DeforaNetworks/corteza
3
0
Fork 0
Code Activity

Add calculatePosition prop to vue-select in all webapps

Browse Source
This commit is contained in:
Katrin Yordanova
2023-04-06 14:49:08 +03:00
parent fab4e39de6
commit e27abef2de
29 changed files with 289 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/web/admin/src/components/Apigw/CFilterParams.vue
View File

@@ -39,6 +39,7 @@
:get-option-key="getOptionKey"
:reduce="wf => wf.workflowID"
:placeholder="$t('filters.placeholders.workflow')"
:calculate-position="calculateDropdownPosition"
class="bg-white"
/>

1
client/web/admin/src/components/Authclient/CSelectUser.vue
View File

@@ -5,6 +5,7 @@
:get-option-label="getOptionLabel"
:get-option-key="getOptionKey"
:value="user.value"
:calculate-position="calculateDropdownPosition"
class="bg-white"
@search="search"
@input="updateRunAs"

1
client/web/admin/src/components/Permissions/CPermissionClone.vue
View File

@@ -36,6 +36,7 @@
:loading="processingRoles"
multiple
:placeholder="$t('ui.clone.pick-role')"
:calculate-position="calculateDropdownPosition"
class="bg-white"
/>
</b-form-group>

2
client/web/admin/src/components/Permissions/CPermissionList.vue
View File

@@ -232,6 +232,7 @@
clearable
:disabled="add.mode === 'eval' && !!add.userID"
:placeholder="$t('ui.add.role.placeholder')"
:calculate-position="calculateDropdownPosition"
class="bg-white"
/>
</b-form-group>
@@ -253,6 +254,7 @@
label="name"
clearable
:placeholder="$t('ui.add.user.placeholder')"
:calculate-position="calculateDropdownPosition"
class="bg-white"
@search="searchUsers"
/>

3
client/web/admin/src/mixins/index.js
View File

@@ -3,8 +3,11 @@ import Vue from 'vue'
import resourceTranslations from './resource-translations'
import toast from './toast'
import vueSelectPosition from './vue-select-position'
import './eventbus'
Vue.mixin(resourceTranslations)
Vue.mixin(toast)
Vue.mixin(vueSelectPosition)

48
client/web/admin/src/mixins/vue-select-position.js Normal file
View File

@@ -0,0 +1,48 @@
import { createPopper } from '@popperjs/core'
export default {
methods: {
calculateDropdownPosition (dropdownList, component, { width }) {
/**
* We need to explicitly define the dropdown width since
* it is usually inherited from the parent with CSS.
*/
dropdownList.style.width = width
/**
* Here we position the dropdownList relative to the $refs.toggle Element.
*
* The 'offset' modifier aligns the dropdown so that the $refs.toggle and
* the dropdownList overlap by 1 pixel.
*
* The 'toggleClass' modifier adds a 'drop-up' class to the Vue Select
* wrapper so that we can set some styles for when the dropdown is placed
* above.
*/
const popper = createPopper(component.$refs.toggle, dropdownList, {
placement: 'bottom',
modifiers: [
{
name: 'offset',
options: {
offset: [0, -1],
},
},
{
name: 'toggleClass',
enabled: true,
phase: 'write',
fn ({ state }) {
component.$el.classList.toggle('drop-up', state.placement === 'top')
},
}],
})
/**
* To prevent memory leaks Popper needs to be destroyed.
* If you return function, it will be called just before dropdown is removed from DOM.
*/
return () => popper.destroy()
},
},
}

1
client/web/compose/src/components/Public/Record/Exporter/Configurator.vue
View File

@@ -31,6 +31,7 @@
v-model="exportTimezone"
:options="timezones"
:get-option-key="getOptionKey"
:calculate-position="calculateDropdownPosition"
:placeholder="$t('recordList.export.timezonePlaceholder')"
class="bg-white"
/>

1
client/web/privacy/src/components/Requests/Editor/Correct.vue
View File

@@ -18,6 +18,7 @@
:get-option-label="({ handle, meta }) => meta.name || handle"
:get-option-key="getOptionKey"
:placeholder="$t('connection.placeholder')"
:calculate-position="calculateDropdownPosition"
class="h-100 bg-white"
/>
</b-form-group>

1
client/web/privacy/src/components/Requests/Editor/Delete.vue
View File

@@ -18,6 +18,7 @@
:get-option-label="({ handle, meta }) => meta.name || handle"
:get-option-key="getOptionKey"
:placeholder="$t('connection.placeholder')"
:calculate-position="calculateDropdownPosition"
class="h-100 bg-white"
/>
</b-form-group>

2
client/web/privacy/src/mixins/index.js
View File

@@ -1,5 +1,7 @@
import Vue from 'vue'
import toast from './toast'
import vueSelectPosition from './vue-select-position'
Vue.mixin(toast)
Vue.mixin(vueSelectPosition)

48
client/web/privacy/src/mixins/vue-select-position.js Normal file
View File

@@ -0,0 +1,48 @@
import { createPopper } from '@popperjs/core'
export default {
methods: {
calculateDropdownPosition (dropdownList, component, { width }) {
/**
* We need to explicitly define the dropdown width since
* it is usually inherited from the parent with CSS.
*/
dropdownList.style.width = width
/**
* Here we position the dropdownList relative to the $refs.toggle Element.
*
* The 'offset' modifier aligns the dropdown so that the $refs.toggle and
* the dropdownList overlap by 1 pixel.
*
* The 'toggleClass' modifier adds a 'drop-up' class to the Vue Select
* wrapper so that we can set some styles for when the dropdown is placed
* above.
*/
const popper = createPopper(component.$refs.toggle, dropdownList, {
placement: 'bottom',
modifiers: [
{
name: 'offset',
options: {
offset: [0, -1],
},
},
{
name: 'toggleClass',
enabled: true,
phase: 'write',
fn ({ state }) {
component.$el.classList.toggle('drop-up', state.placement === 'top')
},
}],
})
/**
* To prevent memory leaks Popper needs to be destroyed.
* If you return function, it will be called just before dropdown is removed from DOM.
*/
return () => popper.destroy()
},
},
}

1
client/web/privacy/src/views/Privacy/DataOverview/Application.vue
View File

@@ -20,6 +20,7 @@
:options="connections"
:clearable="false"
:placeholder="$t('connection.placeholder')"
:calculate-position="calculateDropdownPosition"
:get-option-label="({ handle, meta }) => meta.name || handle"
:get-option-key="getOptionKey"
class="h-100 bg-white"

1
client/web/reporter/src/components/Common/ColumnSelector.vue
View File

@@ -8,6 +8,7 @@
:placeholder="$t('general:label.none')"
:reduce="r => r.name"
append-to-body
:calculate-position="calculateDropdownPosition"
class="column-selector bg-white"
v-on="$listeners"
/>

1
client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Chart.vue
View File

@@ -59,6 +59,7 @@
option-text="label"
option-value="value"
clearable
:calculate-position="calculateDropdownPosition"
class="mw-100"
style="min-width: 100%;"
>

2
client/web/reporter/src/mixins/index.js
View File

@@ -1,5 +1,7 @@
import Vue from 'vue'
import toast from './toast'
import vueSelectPosition from './vue-select-position'
Vue.mixin(toast)
Vue.mixin(vueSelectPosition)

48
client/web/reporter/src/mixins/vue-select-position.js Normal file
View File

@@ -0,0 +1,48 @@
import { createPopper } from '@popperjs/core'
export default {
methods: {
calculateDropdownPosition (dropdownList, component, { width }) {
/**
* We need to explicitly define the dropdown width since
* it is usually inherited from the parent with CSS.
*/
dropdownList.style.width = width
/**
* Here we position the dropdownList relative to the $refs.toggle Element.
*
* The 'offset' modifier aligns the dropdown so that the $refs.toggle and
* the dropdownList overlap by 1 pixel.
*
* The 'toggleClass' modifier adds a 'drop-up' class to the Vue Select
* wrapper so that we can set some styles for when the dropdown is placed
* above.
*/
const popper = createPopper(component.$refs.toggle, dropdownList, {
placement: 'bottom',
modifiers: [
{
name: 'offset',
options: {
offset: [0, -1],
},
},
{
name: 'toggleClass',
enabled: true,
phase: 'write',
fn ({ state }) {
component.$el.classList.toggle('drop-up', state.placement === 'top')
},
}],
})
/**
* To prevent memory leaks Popper needs to be destroyed.
* If you return function, it will be called just before dropdown is removed from DOM.
*/
return () => popper.destroy()
},
},
}

1
client/web/reporter/src/views/Report/Builder.vue
View File

@@ -19,6 +19,7 @@
:options="scenarioOptions"
:get-option-key="getOptionKey"
:placeholder="$t('builder:pick-scenario')"
:calculate-position="calculateDropdownPosition"
class="bg-white rounded"
@input="refreshReport()"
/>

1
client/web/reporter/src/views/Report/View.vue
View File

@@ -16,6 +16,7 @@
:options="scenarioOptions"
:get-option-key="getOptionKey"
:placeholder="$t('pick-scenario')"
:calculate-position="calculateDropdownPosition"
class="bg-white rounded"
@input="refreshReport()"
/>

4
client/web/workflow/src/components/Configurator/Function.vue
View File

@@ -34,6 +34,7 @@
:reduce="f => f.value"
:filter="functionFilter"
:placeholder="$t('steps:function.configurator.select-function')"
:calculate-position="calculateDropdownPosition"
@input="functionChanged"
/>
</b-form-group>
@@ -109,6 +110,7 @@
:get-option-key="getOptionParamKey"
:filter="argTypeFilter"
:clearable="false"
:calculate-position="calculateDropdownPosition"
@input="$root.$emit('change-detected')"
/>
</b-form-group>
@@ -130,6 +132,7 @@
:reduce="wf => a.type === 'ID' ? wf.workflowID : wf.handle"
clearable
:placeholder="$t('steps:function.configurator.search-workflow')"
:calculate-position="calculateDropdownPosition"
class="bg-white rounded"
@input="$root.$emit('change-detected')"
@search="searchWorkflows"
@@ -144,6 +147,7 @@
:filter="varFilter"
:reduce="a => a.value"
:placeholder="$t('steps:function.configurator.option-select')"
:calculate-position="calculateDropdownPosition"
@input="$root.$emit('change-detected')"
/>

4
client/web/workflow/src/components/Configurator/Trigger.vue
View File

@@ -28,6 +28,7 @@
:reduce="r => r.value"
:filter="resTypeFilter"
:placeholder="$t('steps:trigger.configurator.select-resource-type')"
:calculate-position="calculateDropdownPosition"
@input="resourceChanged"
/>
</b-form-group>
@@ -45,6 +46,7 @@
:reduce="e => e.eventType"
:filter="evtTypeFilter"
:placeholder="$t('steps:trigger.configurator.select-event-type')"
:calculate-position="calculateDropdownPosition"
@input="eventChanged"
/>
</b-form-group>
@@ -149,6 +151,7 @@
:reduce="c => c.value"
:filter="constrFilter"
:placeholder="$t('steps:trigger.configurator.select-constraint-type')"
:calculate-position="calculateDropdownPosition"
@input="$root.$emit('change-detected')"
/>
</b-form-group>
@@ -164,6 +167,7 @@
label="text"
:reduce="c => c.value"
:placeholder="$t('steps:trigger.configurator.select-operator')"
:calculate-position="calculateDropdownPosition"
@input="$root.$emit('change-detected')"
/>
</b-form-group>

1
client/web/workflow/src/components/Configurator/Workflow.vue
View File

@@ -49,6 +49,7 @@
:get-option-label="getOptionLabel"
:get-option-key="getOptionKey"
:value="user.value"
:calculate-position="calculateDropdownPosition"
@search="search"
@input="updateRunAs"
/>

1
client/web/workflow/src/components/ExpressionTable.vue
View File

@@ -72,6 +72,7 @@
:get-option-key="getOptionKey"
:clearable="false"
:filter="varFilter"
:calculate-position="calculateDropdownPosition"
@input="$root.$emit('change-detected')"
/>
</b-form-group>

2
client/web/workflow/src/mixins/index.js
View File

@@ -1,5 +1,7 @@
import Vue from 'vue'
import toast from './toast'
import vueSelectPosition from './vue-select-position'
Vue.mixin(toast)
Vue.mixin(vueSelectPosition)

48
client/web/workflow/src/mixins/vue-select-position.js Normal file
View File

@@ -0,0 +1,48 @@
import { createPopper } from '@popperjs/core'
export default {
methods: {
calculateDropdownPosition (dropdownList, component, { width }) {
/**
* We need to explicitly define the dropdown width since
* it is usually inherited from the parent with CSS.
*/
dropdownList.style.width = width
/**
* Here we position the dropdownList relative to the $refs.toggle Element.
*
* The 'offset' modifier aligns the dropdown so that the $refs.toggle and
* the dropdownList overlap by 1 pixel.
*
* The 'toggleClass' modifier adds a 'drop-up' class to the Vue Select
* wrapper so that we can set some styles for when the dropdown is placed
* above.
*/
const popper = createPopper(component.$refs.toggle, dropdownList, {
placement: 'bottom',
modifiers: [
{
name: 'offset',
options: {
offset: [0, -1],
},
},
{
name: 'toggleClass',
enabled: true,
phase: 'write',
fn ({ state }) {
component.$el.classList.toggle('drop-up', state.placement === 'top')
},
}],
})
/**
* To prevent memory leaks Popper needs to be destroyed.
* If you return function, it will be called just before dropdown is removed from DOM.
*/
return () => popper.destroy()
},
},
}

8
lib/vue/src/components/permissions/CPermissionsModal.vue
View File

@@ -56,6 +56,7 @@
:options="roles"
:get-option-key="getOptionRoleKey"
append-to-body
:calculate-position="calculateDropdownPosition"
class="h-100 bg-white"
@input="onRoleChange"
/>
@@ -190,6 +191,7 @@
clearable
:disabled="!!add.userID"
:placeholder="labels.add.role.placeholder"
:calculate-position="calculateDropdownPosition"
class="bg-white"
/>
</b-form-group>
@@ -210,6 +212,7 @@
label="name"
clearable
:placeholder="labels.add.user.placeholder"
:calculate-position="calculateDropdownPosition"
class="bg-white"
@search="searchUsers"
/>
@@ -221,6 +224,7 @@
import { modalOpenEventName, split } from './def.ts'
import { VueSelect } from 'vue-select'
import Rules from './form/Rules.vue'
import calculateDropdownPosition from '../../mixins/vue-select-position'
export default {
i18nOptions: {
@@ -232,6 +236,10 @@ export default {
VueSelect,
},
mixins: [
calculateDropdownPosition
],
props: {
labels: {
required: false,

6
lib/vue/src/components/privacy/CSensitivityLevelPicker.vue
View File

@@ -9,6 +9,7 @@
:placeholder="placeholder"
:reduce="l => l.sensitivityLevelID"
append-to-body
:calculate-position="calculateDropdownPosition"
class="bg-white"
@input="onInput"
/>
@@ -17,12 +18,17 @@
<script>
import { NoID } from '@cortezaproject/corteza-js'
import { VueSelect } from 'vue-select'
import calculateDropdownPosition from '../../mixins/vue-select-position'
export default {
components: {
VueSelect,
},
mixins: [
calculateDropdownPosition
],
props: {
value: {
type: String,

4
lib/vue/src/components/prompts/kinds/CPromptComposeRecordPicker.vue
View File

@@ -12,7 +12,7 @@
:get-option-key="getOptionKey"
:loading="processing"
append-to-body
:calculate-position="calculatePosition"
:calculate-position="calculateDropdownPosition"
option-value="recordID"
option-text="label"
placeholder="Select record"
@@ -202,7 +202,7 @@ export default {
}
}, 300),
calculatePosition (dropdownList, component, { width }) {
calculateDropdownPosition (dropdownList, component, { width }) {
/**
* We need to explicitly define the dropdown width since
* it is usually inherited from the parent with CSS.

1
lib/vue/src/mixins/index.ts
View File

@@ -1,2 +1,3 @@
export { default as corredor } from './corredor'
export { default as files } from './files'
export { default as vueSelectPosition } from './vue-select-position'

48
lib/vue/src/mixins/vue-select-position.js Normal file
View File

@@ -0,0 +1,48 @@
import { createPopper } from '@popperjs/core'
export default {
methods: {
calculateDropdownPosition (dropdownList, component, { width }) {
/**
* We need to explicitly define the dropdown width since
* it is usually inherited from the parent with CSS.
*/
dropdownList.style.width = width
/**
* Here we position the dropdownList relative to the $refs.toggle Element.
*
* The 'offset' modifier aligns the dropdown so that the $refs.toggle and
* the dropdownList overlap by 1 pixel.
*
* The 'toggleClass' modifier adds a 'drop-up' class to the Vue Select
* wrapper so that we can set some styles for when the dropdown is placed
* above.
*/
const popper = createPopper(component.$refs.toggle, dropdownList, {
placement: 'bottom',
modifiers: [
{
name: 'offset',
options: {
offset: [0, -1],
},
},
{
name: 'toggleClass',
enabled: true,
phase: 'write',
fn ({ state }) {
component.$el.classList.toggle('drop-up', state.placement === 'top')
},
}],
})
/**
* To prevent memory leaks Popper needs to be destroyed.
* If you return function, it will be called just before dropdown is removed from DOM.
*/
return () => popper.destroy()
},
},
}