@topvisor/ui 1.4.1-projectSelector.1 → 1.4.1-projectSelector.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.chunks/{policy.vue_vue_type_style_index_0_lang-ClaW4X74.es.js → policy.vue_vue_type_style_index_0_lang-RJnqOsjD.es.js} +178 -167
- package/.chunks/{policy.vue_vue_type_style_index_0_lang-ClaW4X74.es.js.map → policy.vue_vue_type_style_index_0_lang-RJnqOsjD.es.js.map} +1 -1
- package/.chunks/policy.vue_vue_type_style_index_0_lang-dgZjCI-7.amd.js +2 -0
- package/.chunks/{policy.vue_vue_type_style_index_0_lang-CO-f4TwZ.amd.js.map → policy.vue_vue_type_style_index_0_lang-dgZjCI-7.amd.js.map} +1 -1
- package/formsExt/formsExt.amd.js +1 -1
- package/formsExt/formsExt.amd.js.map +1 -1
- package/formsExt/formsExt.js +33 -33
- package/formsExt/formsExt.js.map +1 -1
- package/icomoon/Read Me.txt +1 -1
- package/icomoon/Topvisor icons.json +361 -131
- package/icomoon/demo.html +141 -1
- package/icomoon/fonts/Topvisor-2.eot +0 -0
- package/icomoon/fonts/Topvisor-2.svg +11 -1
- package/icomoon/fonts/Topvisor-2.ttf +0 -0
- package/icomoon/fonts/Topvisor-2.woff +0 -0
- package/icomoon/selection.json +1 -1
- package/icomoon/style.css +35 -5
- package/package.json +1 -1
- package/project/project.amd.js +1 -1
- package/project/project.amd.js.map +1 -1
- package/project/project.js +778 -730
- package/project/project.js.map +1 -1
- package/src/components/formsExt/selector2/selector2.vue.d.ts +2 -0
- package/src/components/formsExt/selector2/types.d.ts +18 -4
- package/src/components/project/groupSelector/groups/groups.vue.d.ts +7 -1
- package/src/components/project/projectSelector/cache.d.ts +4 -0
- package/src/components/project/projectSelector/projectSelector.vue.d.ts +25 -16
- package/src/components/project/projectSelector/types.d.ts +3 -4
- package/src/components/project/projectSelector/utils.d.ts +7 -10
- package/.chunks/policy.vue_vue_type_style_index_0_lang-CO-f4TwZ.amd.js +0 -2
- package/src/components/project/projectSelector/stories/mocks/projects.d.ts +0 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"policy.vue_vue_type_style_index_0_lang-CO-f4TwZ.amd.js","sources":["../../src/components/formsExt/menu/menu.vue","../../src/components/formsExt/selector2/itemMulti.vue","../../src/components/formsExt/selector2/cache.ts","../../src/components/formsExt/selector2/composables/useAPI.ts","../../src/components/formsExt/selector2/utils.ts","../../src/components/formsExt/selector2/composables/useMenu.ts","../../src/components/formsExt/selector2/selector2.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, onUpdated, ref } from 'vue';\nimport type { Item, Props } from './types';\nimport Core from '@/core/core/core';\nimport { isSafari } from '@/core/utils/device';\nimport TopButton from '@/components/forms/button/button.vue';\n\nconst props = withDefaults(defineProps<Props>(), {\n\tstyling: 'default',\n});\n\nconst model = defineModel({\n\trequired: true,\n});\n\nconst el = ref();\n\n// валидация типа modelValue без возможности выбора нескольких значений (ожидается строка или число)\nif (!props.isMultiple && typeof (model.value) !== 'string' && typeof (model.value) !== 'number') {\n\tconsole.warn('Type check failed for prop \"modelValue\". Expected String: ' + typeof (model.value));\n}\n\n// валидация типа modelValue с возможностью выбора нескольких значений (ожидается массив)\nif (props.isMultiple && !Array.isArray(model.value)) {\n\tconsole.warn('Type check failed for prop \"modelValue\". Expected Array: ' + typeof (model.value));\n}\n\n/**\n * Для множественного выбора без пустого множества\n *\n * Если ничего не выбрано, присваиваем 1-ое значение\n */\nif (props.isMultiple && !props.canBeEmptyMultiple && Array.isArray(model.value) && !model.value.length && props.items[0]) {\n\tmodel.value = [props.items[0]?.href ?? props.items[0]?.value];\n}\n\nconst itemIsActive = (item: Item) => {\n\tif (!Array.isArray(model.value)) {\n\t\treturn item.value === model.value;\n\t}\n\n\treturn model.value.includes(item.value);\n};\n\n/**\n * Выбрать элемент\n * @param item\n * @param toggle - добавить или исключить элемент, для isMultiple\n */\nconst select = (item: Item, toggle = false) => {\n\tif (Array.isArray(model.value)) {\n\t\tlet modelNew = model.value.slice();\n\n\t\tif (toggle) {\n\t\t\tif (!modelNew.length) modelNew = props.items.map(item => item.value);\n\n\t\t\tconst index = modelNew.indexOf(item.value);\n\t\t\tif (index === -1) {\n\t\t\t\tmodelNew.push(item.value);\n\t\t\t} else {\n\t\t\t\tmodelNew.splice(index, 1);\n\t\t\t}\n\t\t} else {\n\t\t\tif (modelNew.length === 1 && modelNew[0] === item.value) {\n\t\t\t\tmodelNew = [];\n\t\t\t} else {\n\t\t\t\tmodelNew = [item.value];\n\t\t\t}\n\t\t}\n\n\t\tif (!props.canBeEmptyMultiple && !modelNew.length) modelNew = [item.value];\n\n\t\tmodel.value = modelNew;\n\n\t\treturn;\n\t}\n\n\tmodel.value = item.value;\n};\n\n// вертикальный скролл в горизонтальный скролл\nconst onWheel = (event: WheelEvent) => {\n\tif (el.value.scrollWidth <= el.value.offsetWidth) return;\n\tif (event.shiftKey) return;\n\tif (Math.abs(event.deltaY) < 50) return; // устройство с высокой точностью, например тачпад\n\n\tevent.preventDefault();\n\n\tconst delta = event.deltaY > 0 ? 30 : -30;\n\tel.value.scrollLeft = el.value.scrollLeft + delta;\n};\n\n/**\n * Замена стандартному scrollIntoView, который меняет скролл документа\n *\n * Выравнивание по ближнему краю элемента\n *\n * Выравнивается таким образом, чтобы был виден соседний элемент\n */\nconst scrollIntoView = (isSmooth = true) => {\n\tconst elBtn = el.value.querySelector('.top-active');\n\tif (!elBtn) return;\n\n\tconst gap = 24;\n\n\t// левая и правая координаты элемента\n\tconst leftMargin = elBtn.offsetLeft - el.value.offsetLeft - gap;\n\tconst rightMargin = elBtn.offsetLeft - el.value.offsetLeft + elBtn.clientWidth + gap;\n\n\t// левая и правая границы видимой части меню\n\tconst leftMarginParent = el.value.scrollLeft;\n\tconst rightMarginParent = el.value.clientWidth + el.value.scrollLeft;\n\n\tlet scrollLeft: number | undefined = undefined;\n\n\t// левую границу элемента к левой границе меню\n\tif (leftMargin < leftMarginParent) scrollLeft = leftMargin;\n\n\t// правую границу элемента к правой границе меню\n\tif (rightMargin > rightMarginParent) scrollLeft = rightMargin - el.value.clientWidth;\n\n\tif (scrollLeft !== undefined) {\n\t\tif (isSafari()) {\n\t\t\tCore.$?.(el.value).animate({ scrollLeft: scrollLeft }, isSmooth ? 200 : 0);\n\t\t} else {\n\t\t\tel.value.scrollTo({ left: scrollLeft, behavior: isSmooth ? 'smooth' : 'auto' });\n\t\t}\n\t}\n};\n\n/**\n * Выбрать все элементы в меню\n */\nconst selectAll = () => {\n\tif (!Array.isArray(model.value)) return;\n\n\tif (model.value.length === props.items.length) {\n\t\tmodel.value = [props.items[0].href ?? props.items[0].value];\n\t\treturn;\n\t}\n\n\tmodel.value = props.items.map(item => item.href ?? item.value);\n};\n\nonMounted(() => scrollIntoView(false));\nonUpdated(() => scrollIntoView(true));\n\n</script>\n\n<template>\n\t<div\n\t\tref=\"el\"\n\t\t:class=\"{\n\t\t\t'top-menu': true,\n\t\t\t['top-style_' + styling]: true,\n\t\t\t// ['top-unwrap-x']: styling === 'default',\n\t\t}\"\n\t\t@wheel=\"onWheel\"\n\t>\n\t\t<TopButton\n\t\t\tv-for=\"item in items\"\n\t\t\t:=\"item\"\n\t\t\tclass=\"top-menu_item\"\n\t\t\tcolor=\"theme\"\n\t\t\t@click=\"select(item, $event.ctrlKey || $event.metaKey)\"\n\t\t\t:isActive=\"itemIsActive(item)\"\n\t\t>\n\t\t\t<template #default v-if=\"item.content\">\n\t\t\t\t{{ item.content }}\n\t\t\t</template>\n\t\t</TopButton>\n\n\t\t<div\n\t\t\tv-if=\"Array.isArray(model) && selectAllItem\"\n\t\t\tclass=\"top-menu_selectAll\"\n\t\t>\n\t\t\t<TopButton\n\t\t\t\t:=\"selectAllItem\"\n\t\t\t\tclass=\"top-menu_item\"\n\t\t\t\tcolor=\"theme\"\n\t\t\t\tstyling=\"\"\n\t\t\t\t@click=\"selectAll()\"\n\t\t\t\t:isActive=\"model.length === items.length\"\n\t\t\t>\n\t\t\t\t<template #default v-if=\"selectAllItem.content\">\n\t\t\t\t\t{{ selectAllItem.content }}\n\t\t\t\t</template>\n\t\t\t</TopButton>\n\t\t</div>\n\t</div>\n</template>\n\n<style>\n.top-menu {\n\t--scroll-thumb-color: var(--color-line-1);\n\t--scroll-thumb-color-hover: var(--color-line-2);\n\t--scroll-thumb-color-active: var(--color-line-3);\n\n\tmax-width: 100%;\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: var(--top-gap-2);\n\toverflow-x: auto;\n\tscrollbar-width: none; /* firefox */\n\n\t/* предотвратить натинвые события браузера (назад / вперед) */\n\toverscroll-behavior-x: contain;\n}\n\n.top-menu::-webkit-scrollbar { display: none; }\n\n.top-menu .top-menu_item {\n\t--top-button-color: var(--color-text-2);\n\n\toutline-offset: -2px !important;\n\tmin-width: 0;\n\tmax-width: 200px;\n\tmargin: 0;\n\tflex-shrink: 0;\n}\n\n.top-menu .top-menu_item[data-top-icon] {\n\t--top-icon-color: var(--color-text-2);\n}\n\n.top-menu_selectAll {\n\tposition: sticky;\n\tright: 0;\n\tbackground: var(--color-layout-front-1);\n\tborder-left: 1px solid var(--color-line-1);\n\tpadding-left: var(--top-padding-1);\n\tbox-shadow: var(--color-layout-front-1) var(--top-padding-2) 0px;\n}\n\n/* style default */\n.top-menu.top-style_default .top-menu_item {\n\t--top-forms-radius: 0;\n\t--top-forms-border-color: transparent;\n\t--top-forms-border-width: 2px;\n\n\tfilter: none;\n\tbox-shadow: none;\n\tborder: none;\n\tborder-bottom: var(--top-forms-border-width) solid var(--top-forms-border-color);\n\tbackground: none;\n}\n\n.top-style_default > .top-menu_item > [data-top-badge] {\n\tmargin-top: 0;\n}\n\n.top-menu.top-style_default .top-menu_item:hover {\n\t--top-icon-color: var(--color-text-1);\n\t--top-button-color: var(--color-text-1);\n\t--top-forms-border-color: var(--color-line-2);\n}\n\n.top-menu.top-style_default .top-menu_item:active,\n.top-menu.top-style_default .top-menu_item.top-active {\n\t--top-icon-color: var(--color-text-primary);\n\t--top-button-color: var(--color-text-1);\n\t--top-forms-border-color: var(--color-line-primary-1);\n}\n\n.top-menu.top-style_default .top-menu_selectAll {\n\tpadding-left: var(--top-padding-2);\n}\n\n/* style bar */\n.top-menu.top-style_bar {\n\tborder-radius: var(--top-radius-3);\n\tborder: 1px solid var(--color-line-2);\n\tpadding: var(--top-padding-1);\n\tgap: 3px;\n}\n.top-menu.top-style_bar .top-menu_item {\n\t--top-button-background-color-hover: var(--color-layer-1);\n\t--top-button-background-color-active: var(--color-layer-2);\n\t--top-button-background-color-selected: var(--color-layer-primary-1);\n\n\tposition: relative;\n}\n\n.top-menu.top-style_bar .top-menu_item:hover {\n\t--top-icon-color: var(--color-text-1);\n\t--top-button-color: var(--color-text-1);\n}\n\n.top-menu.top-style_bar .top-menu_item.top-active {\n\t--top-icon-color: var(--color-text-primary);\n\t--top-button-color: var(--color-text-primary);\n}\n\n/* разделители кнопок в баре */\n.top-menu.top-style_bar .top-menu_item:not(:first-child):not(.top-active):not(:hover):after {\n\tcontent: \"\";\n\tbackground: var(--color-line-1-opacity);\n\twidth: 1px;\n\theight: 60%;\n\tdisplay: block;\n\tposition: absolute;\n\tleft: -2px;\n}\n.top-menu.top-style_bar .top-menu_item.top-active + .top-menu_item:after,\n.top-menu.top-style_bar .top-menu_item:hover + .top-menu_item:after {\n\tcontent: none !important;\n}\n\n/*\n.top-style_bar > .top-menu_item > [data-top-badge] {\n\tmargin-top: -3px;\n}\n*/\n\n/** TODO: .top-unwrap-x надо вынести глобально в UI или добавить в стили для storybook */\n/*\n.top-menu.top-unwrap-x {\n\tpadding-right: var(--top-unwrap-x);\n\tpadding-left: var(--top-unwrap-x);\n\tmargin-right: calc(0px - var(--top-unwrap-x));\n\tmargin-left: calc(0px - var(--top-unwrap-x));\n}\n*/\n</style>\n","<script setup lang=\"ts\">\nimport type { EmitsItemMulti, PropsItemMulti } from './types';\n\ndefineProps<PropsItemMulti>();\ndefineEmits<EmitsItemMulti>();\n</script>\n\n<template>\n\t<div class=\"top-selector2_itemMulti top-ellipsis\">\n\t\t{{ name }}\n\n\t\t<span\n\t\t\tclass=\"top-selector2_itemMultiDelete\"\n\t\t\tdata-top-icon=\"\"\n\t\t\t@click=\"$emit('delete', {id, name})\"\n\t\t\t@mousedown.stop\n\t\t></span>\n\t</div>\n</template>\n\n<style>\n.top-selector2_itemMulti {\n\tbox-sizing: border-box;\n\tpadding-left: var(--top-padding-2);\n\tborder-radius: var(--top-radius-1, 4px);\n\tborder: 1px solid var(--color-line-primary-1);\n\tbackground: var(--color-layer-primary-2);\n\tmin-height: 22px;\n\tmax-width: 100%;\n\tcolor: var(--color-text-1);\n\tflex-grow: 0;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: var(--top-gap-1);\n}\n\n.top-selector2_itemMultiDelete {\n\t--top-icon-size: 14px;\n\t--top-icon-width: 18px;\n\t--top-icon-color: var(--color-text-1);\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100%;\n\tcursor: pointer;\n}\n\n.top-selector2_itemMultiDelete:hover {\n\tbackground: var(--color-layer-primary-2);\n}\n\n@media screen and (min-width: 900px) {\n\t.top-selector2.top-active .top-selector2_itemMultiDelete {\n\t\tz-index: calc(var(--top-popup-z-index) + 1);\n\t}\n}\n</style>\n","import type { Props } from './types';\n\n/**\n * Список кешей для конкретного API метода\n */\nexport const cacheByMethod = new Map<Api.PathAbstract, Map<string, any>>();\n\n/**\n * Сброс кеша конкретного API метода\n */\nexport const clearCache = (apiPath: Api.PathAbstract) => {\n\tcacheByMethod.get(apiPath)?.clear();\n};\n\nexport const genCacheKey = (api: NonNullable<Props['api']>) => {\n\tconst userId = window['mo']?.user?.id;\n\n\tconst cacheKey = JSON.stringify(api.params) + ':' + api.url + ':' + userId;\n\n\treturn cacheKey;\n};\n\nexport const getCache = (cacheKey: string, apiPath: Api.PathAbstract) => {\n\treturn cacheByMethod.get(apiPath)?.get(cacheKey);\n};\n\nexport const setCache = (cacheKey: string, apiPath: Api.PathAbstract, data: any) => {\n\tif (!cacheByMethod.has(apiPath)) {\n\t\tcacheByMethod.set(apiPath, new Map());\n\t}\n\n\tcacheByMethod.get(apiPath)?.set(cacheKey, data);\n};\n","import { ref } from 'vue';\nimport { debounce } from '../../../../core/utils/lodash';\nimport type { Item, Props } from '../types';\nimport { genCacheKey, getCache, setCache } from '../cache';\n\nexport type API = ReturnType<typeof useAPI>;\n\nexport const useAPI = (\n\tapi: Props['api'],\n\tapiSetSearchParams: Props['apiSetSearchParams'],\n\tminLength: number,\n\tuseCache: Props['useCache'],\n) => {\n\t/**\n\t * Список, полученный через API\n\t */\n\tconst items = ref<Item[]>([]);\n\n\t/**\n\t * Флаг - идет загрузка\n\t */\n\tconst isLoading = ref(false);\n\n\tconst countLoading = ref(0);\n\n\tlet searchText = '';\n\tlet nextOffset: number | null | undefined;\n\n\tif (api && !api.params.limit) {\n\t\tapi.params.limit = 100;\n\t}\n\n\t/**\n\t * Выполнить обращение к API\n\t *\n\t * При ошибке вернет undefined\n\t */\n\tconst callAPI = async (): Promise<Api.ResponseSuccess<any, 'get'> | undefined> => {\n\t\tif (!api) return;\n\n\t\tconst cacheKey = useCache ? genCacheKey(api) : undefined;\n\n\t\tif (cacheKey) {\n\t\t\tconst cache = getCache(cacheKey, api.path);\n\t\t\tif (cache) {\n\t\t\t\t// остановить запущенные api запросы\n\t\t\t\tapi.abortByFingerprint();\n\n\t\t\t\treturn cache;\n\t\t\t}\n\t\t}\n\n\t\tconst res = await api.call();\n\n\t\tif (res.errors) return;\n\n\t\tif (!Array.isArray(res.result)) {\n\t\t\tconsole.warn('Array expected in `res.result`');\n\n\t\t\treturn;\n\t\t}\n\n\t\tconst indexWithError = (res.result as Array<Item | any>).findIndex(item => item.id === undefined || item.name === undefined);\n\t\tif (indexWithError !== -1) {\n\t\t\tconsole.warn(`В result[${indexWithError}] нет id или name`);\n\n\t\t\treturn;\n\t\t}\n\n\t\tif (cacheKey) {\n\t\t\tsetCache(cacheKey, api.path, res);\n\t\t}\n\n\t\treturn res as Api.ResponseSuccess<any, 'get'>;\n\t};\n\n\t/**\n\t * Загрузить items\n\t */\n\tconst load = async (append: boolean) => {\n\t\tif (!api) return;\n\n\t\tif (append) {\n\t\t\t// данных о следующих страницах не обнаружено\n\t\t\tif (!nextOffset) return;\n\n\t\t\t// дозагружать нельзя, если не завершена предыдущая загрузка\n\t\t\tif (isLoading.value) return;\n\n\t\t\tapi.params.offset = nextOffset;\n\t\t} else {\n\t\t\tapi.params.offset = 0;\n\t\t}\n\n\t\tapiSetSearchParams?.(api, searchText);\n\n\t\tisLoading.value = true;\n\t\tconst res = await callAPI();\n\t\tisLoading.value = false;\n\n\t\tcountLoading.value++;\n\n\t\tif (!res) return;\n\n\t\tnextOffset = res.nextOffset;\n\n\t\tif (append) {\n\t\t\titems.value = items.value.concat(res.result);\n\t\t} else {\n\t\t\titems.value = res.result;\n\t\t}\n\t};\n\n\tconst loadDebounce = debounce(() => load(false), 200);\n\n\t/**\n\t * Выполнить поиск по указанному тексту\n\t *\n\t * Если длина текста меньше minLength, поиск не будет произведен\n\t *\n\t * Если текст не изменился, поиск не будет произведен\n\t *\n\t * @param newSearchText - текст поиска\n\t * @param useDebounce - дедупликация загрузки списка\n\t */\n\tconst setSearchTextAndLoad = (newSearchText: string, useDebounce = true) => {\n\t\tif (!api) return;\n\n\t\t// остановить начатый поиск и сбросить результаты\n\t\tif (newSearchText.length < minLength) {\n\t\t\tapi.abortByFingerprint();\n\n\t\t\titems.value = [];\n\n\t\t\treturn;\n\t\t}\n\n\t\t// условия поиска не поменялись, данные загружены\n\t\tif (newSearchText === searchText && items.value.length) return;\n\n\t\tsearchText = newSearchText;\n\n\t\tif (useDebounce) {\n\t\t\tvoid loadDebounce();\n\t\t} else {\n\t\t\tvoid load(false);\n\t\t}\n\t};\n\n\treturn {\n\t\tapiRequest: api,\n\t\titems,\n\t\tisLoading,\n\t\tcountLoading,\n\t\tload,\n\t\tsetSearchTextAndLoad,\n\t};\n};\n","import type { Item, Props } from './types';\nimport { genFieldFilter } from '@/api/api';\n\n/**\n * Универсальный id для всех элементов \"Все элементы\" / \"Без фильтра\" в `TopSelector`\n */\nexport const ITEM_ID_ALL = 0;\n\n/**\n * Универсальный id для всех добавляемых элементов через `TopSelector`\n */\nexport const ITEM_ID_NEW = null;\n\n/**\n * Выбран ли элемент\n */\nexport const isSelected = (modelValue: Props['modelValue'], item: Item, checkNameForNullId = true) => {\n\tif (checkNameForNullId && item.id === ITEM_ID_NEW) {\n\t\tif (Array.isArray(modelValue)) {\n\t\t\treturn modelValue.some(itemSelected => itemSelected.id === item.id && itemSelected.name === item.name);\n\t\t} else {\n\t\t\treturn item.name === modelValue.name;\n\t\t}\n\t}\n\n\tif (Array.isArray(modelValue)) {\n\t\treturn modelValue.some(itemSelected => itemSelected.id === item.id);\n\t} else {\n\t\treturn item.id === modelValue.id;\n\t}\n};\n\n/**\n * Вспомогательная утилита для создания `callback` функции на добавление фильтра по полю в api запрос\n *\n * Другие фильтры по указанному полю будут удалены\n *\n * @param api - api, которое используется в `TopSelector`\n * @param search - введенная строка поиска\n * @param fieldName - имя поля, по которому надо добавить фильтр на поиск по нестрогому соответствию\n */\nexport const apiSetSearchParamsFilter = (api: NonNullable<Props['api']>, search: string, fieldName: string) => {\n\tlet filters = api.params.filters ?? [];\n\n\t// удаление других фильтров по этому полю\n\tfilters = filters.filter((filter) => filter.name !== fieldName);\n\n\tif (search) {\n\t\tfilters.push(genFieldFilter(fieldName, 'CONTAINS', [search]));\n\t}\n\n\tapi.changeParams({ filters });\n};\n","import { computed, type ComputedRef, ref, type Ref, watch } from 'vue';\nimport { invertKeyboardLayout } from '@/core/utils/keyboard';\nimport type { Item, Props } from '../types';\nimport { type API } from './useAPI';\nimport { isSelected, ITEM_ID_ALL, ITEM_ID_NEW } from '../utils';\nimport { useI18n } from '@/core/plugins/i18n';\n\n/**\n * Функционал поиска\n */\nexport const useMenu = (\n\tmodel: Ref<Props['modelValue']>,\n\temits: ReturnType<typeof defineEmits>,\n\titems: Ref<Props['items']>,\n\tmultiselect: Props['multiselect'],\n\tuseAllItem: Ref<Props['useAllItem']>,\n\tappendSearchToResult: Ref<Props['appendSearchToResult']>,\n\tappendSearchToResultCond: Ref<Props['appendSearchToResultCond']>,\n\tsearchType: Ref<Props['searchType']>,\n\tminLength: number,\n\tapi: API,\n) => {\n\t/**\n\t * Текст поиска по результатам\n\t */\n\tconst searchText = ref('');\n\n\t/**\n\t * Объект, представляющий опцию \"Все\"\n\t */\n\tconst itemAll = {\n\t\tid: ITEM_ID_ALL,\n\t\tname: useI18n().Common.All as string,\n\t};\n\n\t/**\n\t * Сброс поиска\n\t */\n\tconst resetSearch = () => {\n\t\tsearchText.value = '';\n\t};\n\n\t/**\n\t * Является ли строка поиска достаточной длины для отображения меню\n\t */\n\tconst genIsShort = () => {\n\t\tif (!api.apiRequest) return false;\n\t\tif (searchText.value.length >= minLength) return false;\n\n\t\treturn true;\n\t};\n\n\t/**\n\t * Варианты выбора: props.items + \"Выбрать все\"\n\t */\n\tconst localItems: ComputedRef<Item[]> = computed(() => {\n\t\tconst localItems: Item[] = [];\n\n\t\tif (!multiselect && useAllItem.value) {\n\t\t\tif (typeof useAllItem.value === 'string') {\n\t\t\t\titemAll.name = useAllItem.value;\n\t\t\t}\n\n\t\t\tlocalItems.push(itemAll);\n\t\t}\n\n\t\titems.value?.forEach(item => localItems.push({ ...item }));\n\n\t\treturn localItems;\n\t});\n\n\t/**\n\t * Не используем `computed` в пользу ручного порядка пересчета значения\n\t */\n\tconst itemsForShow = ref<Item[]>([]);\n\n\tconst recalcItemsForShow = () => {\n\t\titemsForShow.value = genItemsForShow();\n\t};\n\n\t/**\n\t * Подготовленный список меню, который содержит в сумме:\n\t * - prop.items: указанный список с учетом фильтра и опций компонента\n\t * - api.items: результаты api запроса, если используется api\n\t *\n\t * @returns Отфильтрованный массив элементов для отображения\n\t */\n\tconst genItemsForShow = () => {\n\t\tconst searchString = searchText.value.toLowerCase();\n\t\tconst searchStringInvertKeyboard = invertKeyboardLayout(searchString);\n\t\tconst searchStringNormalized = searchString.replace(/^https?:\\/\\/(www\\.)?|\\/$/g, '');\n\n\t\tlet items: Item[] = [];\n\n\t\t/**\n\t\t * Элемент текущего разделителя в цикле\n\t\t *\n\t\t * Для скрытия / отображения только нужных заголовков и разделителей при поиске\n\t\t *\n\t\t * Логика для `api.items` должна реализовываться в api или api клиенте при генерации элементов\n\t\t */\n\t\tlet itemTitleCategory: Item | undefined;\n\t\tconst itemsCategory: Item[] = [];\n\n\t\t/**\n\t\t * Добавить элементы в результирующий список\n\t\t */\n\t\tconst flushCategory = () => {\n\t\t\t// крайний разделитель не выводить\n\t\t\tif (itemsCategory.at(-1)?.listItemProps?.type === 'delimiter') {\n\t\t\t\titemsCategory.pop();\n\t\t\t}\n\n\t\t\tif (itemsCategory.length) {\n\t\t\t\tif (itemTitleCategory) {\n\t\t\t\t\titems.push(itemTitleCategory);\n\t\t\t\t}\n\n\t\t\t\titems.push(...itemsCategory);\n\n\t\t\t\titemsCategory.length = 0;\n\t\t\t}\n\t\t};\n\n\t\tfor (const item of localItems.value) {\n\t\t\tswitch (item.listItemProps?.type) {\n\t\t\t\tcase 'title':\n\t\t\t\t\tflushCategory();\n\n\t\t\t\t\titemTitleCategory = item;\n\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'delimiter':\n\t\t\t\t\t// вставить разделитель один раз и только если категория не пуста\n\t\t\t\t\tif (itemsCategory.length) {\n\t\t\t\t\t\tlet index = itemsCategory.length;\n\t\t\t\t\t\tif (itemsCategory.at(-1)?.listItemProps?.type === 'delimiter') index--;\n\n\t\t\t\t\t\titemsCategory[index] = item;\n\t\t\t\t\t}\n\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tconst name = item.name.toLowerCase();\n\t\t\t\t\tif (\n\t\t\t\t\t\tString(item.id).includes(searchString) ||\n\t\t\t\t\t\tname.includes(searchString) ||\n\t\t\t\t\t\tname.includes(searchStringInvertKeyboard) ||\n\t\t\t\t\t\tname.includes(searchStringNormalized)\n\t\t\t\t\t) {\n\t\t\t\t\t\tif (name === searchString || name === searchStringInvertKeyboard) {\n\t\t\t\t\t\t\t// точные совпадения в начало\n\t\t\t\t\t\t\titemsCategory.unshift(item);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\titemsCategory.push(item);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tflushCategory();\n\n\t\titems.push(...api.items.value);\n\n\t\t// ввод произвольного значения\n\t\tif (\n\t\t\tappendSearchToResult.value &&\n\t\t\t!!searchText.value &&\n\t\t\t(!appendSearchToResultCond.value || appendSearchToResultCond.value(searchString)) &&\n\n\t\t\t// результаты могут быть найдены, но не точные, тогда предложить добавить элемент\n\t\t\t!items.find((item) => item.name.toLowerCase() === searchString)\n\t\t) {\n\t\t\tconst itemNew = {\n\t\t\t\tid: ITEM_ID_NEW,\n\t\t\t\tname: searchText.value,\n\t\t\t};\n\n\t\t\t// предложение всегда отображается внизу, чтобы не мешать результатам поиска\n\t\t\titems.push(itemNew);\n\t\t}\n\n\t\tif (multiselect) {\n\t\t\titems = items.filter(item => !isSelected(model.value, item));\n\t\t}\n\n\t\treturn items;\n\t};\n\n\t/**\n\t * Выбрать элемент\n\t *\n\t * @param item Элемент для выбора\n\t */\n\tconst selectItem = (item: Item) => {\n\t\t// это невыбираемый элемент\n\t\tif (item.listItemProps?.type === 'title' || item.listItemProps?.type === 'delimiter') {\n\t\t\treturn;\n\t\t}\n\n\t\tif (multiselect && Array.isArray(model.value)) {\n\t\t\tif (!isSelected(model.value, item)) {\n\t\t\t\tmodel.value = [...model.value, item];\n\t\t\t}\n\t\t} else {\n\t\t\tmodel.value = item;\n\t\t}\n\n\t\tif (item.id === ITEM_ID_NEW) {\n\t\t\temits('appendItem', item);\n\t\t}\n\n\t\t/**\n\t\t * Отложить перерисовку\n\t\t *\n\t\t * fix: Перерисовка меню выполняется раньше, чем срабатывает `click`.\n\t\t * Из-за этого обработчик кликов думает, что клик был вне меню и не закрывает окно\n\t\t *\n\t\t * Файл: @/components/popup/lib/popup.globalEvents.ts\n\t\t *\n\t\t * Функция: onclick()\n\t\t *\n\t\t * ```\n\t\t * const elPopup = e.target.closest<HTMLElement>('.top-popup-wrapper');\n\t\t * ```\n\t\t */\n\t\tsetTimeout(() => {\n\t\t\t/**\n\t\t\t * Завершить поиск после выбора\n\t\t\t */\n\t\t\tresetSearch();\n\t\t});\n\n\t\t// /**\n\t\t// * При изменении значения модели в режиме inline необходимо очистить поле поиска,\n\t\t// * так как поиск больше не актуален после выбора значения\n\t\t// */\n\t\t// if (searchType.value === 'inline') {\n\t\t// \tresetSearch();\n\t\t// }\n\t};\n\n\tif (api.apiRequest) {\n\t\t// загрузка только при открытии popup\n\t\tconst fieldsForWatch: any = [items, api.items];\n\n\t\t// model нужен только для multiselect, без необходимости не использовать для улучшения UX при работе с API\n\t\tif (multiselect) {\n\t\t\tfieldsForWatch.push(model);\n\t\t}\n\n\t\twatch(fieldsForWatch, () => {\n\t\t\trecalcItemsForShow();\n\t\t});\n\t} else {\n\t\twatch([model, items, searchText], () => {\n\t\t\trecalcItemsForShow();\n\t\t}, {\n\t\t\timmediate: true,\n\n\t\t\t// слежение за изменениями `items`\n\t\t\tdeep: 2,\n\t\t});\n\t}\n\n\t/**\n\t * Выбрать следующее значение\n\t */\n\tconst selectNextItem = () => {\n\t\tif (Array.isArray(model.value)) return;\n\n\t\tconst selectableItems = itemsForShow.value.filter((item) => !['title', 'delimiter'].includes(item.listItemProps?.type ?? ''));\n\n\t\tconst currentIndex = selectableItems.findIndex(item => item.id === (model.value as Item).id);\n\t\tconst nextIndex = (currentIndex + 1) % selectableItems.length;\n\t\tmodel.value = { ...selectableItems[nextIndex] };\n\t};\n\n\t/**\n\t * Удалить элемент, `id` и `name` которого равны указанному `item`\n\t */\n\tconst deleteItemByItem = async (item: Item) => {\n\t\tif (Array.isArray(model.value)) {\n\t\t\tmodel.value = model.value.filter((itemI) => itemI.id !== item.id || itemI.name !== item.name);\n\t\t}\n\t};\n\n\treturn {\n\t\tsearchText,\n\t\tresetSearch,\n\t\tgenIsShort,\n\t\titemsForShow,\n\t\tselectItem,\n\t\tselectNextItem,\n\t\tdeleteItemByItem,\n\t};\n};\n","<script setup lang=\"ts\">\nimport { computed, ref, toRef, watch } from 'vue';\nimport Core from '@/core/core/core';\nimport { TopPopup, TopPopupListItem, TopPopupWidgetInput } from '@/components/popup/popup';\nimport { TopPreloader } from '@/components/forms/forms';\nimport type { Emits, Item, Props, Slots } from './types';\nimport Selector2ItemMulti from './itemMulti.vue';\nimport { useAPI } from './composables/useAPI';\nimport { useMenu } from './composables/useMenu';\nimport type { TopLibPopup } from '../../popup/lib/popup';\nimport { clearCache } from './cache';\nimport { ITEM_ID_ALL, ITEM_ID_NEW } from './utils';\n\nconst props = withDefaults(defineProps<Props>(), {\n\titems: () => [] as Item[],\n\tsize: 's',\n\tminLength: 0,\n\tsearchType: 'popup',\n\topenByFocusInput: undefined,\n});\n\nconst model = defineModel<Props['modelValue']>({ required: true });\n\ndefineSlots<Slots>();\n\nconst emits = defineEmits<Emits>();\n\ndefineExpose({\n\t/**\n\t * Сброс локального кеша и кеша api\n\t *\n\t * @param resetAPICache - Сбросить API кеш, по умолчанию не сбрасывается. Для случаев, когда загруженные данные становятся неактуальными\n\t */\n\tresetCache: (resetAPICache: boolean = false) => {\n\t\tif (!api.apiRequest) return;\n\n\t\t// сброс кеша api\n\t\tif (resetAPICache) {\n\t\t\tclearCache(api.apiRequest.path);\n\t\t}\n\n\t\t// сброс кеша списка\n\t\tapi.items.value = [];\n\n\t\t// сброс флага первичной загрузки\n\t\tapi.countLoading.value = 0;\n\n\t\t// сброс параметров дозагрузки\n\t\tapi.apiRequest.params.offset = 0;\n\n\t\t// сброс кеша локального списка с дополнительными элементами, например `useAllItem`\n\t\trequestAnimationFrame(() => {\n\t\t\tmenu.itemsForShow.value = [];\n\t\t});\n\n\t\t// сразу загрузить данные после сброса, если popup уже открыт\n\t\tif (getPopup()?.elPopup) {\n\t\t\tapi.setSearchTextAndLoad(menu.searchText.value);\n\t\t}\n\t},\n});\n\nconst searchTypeLocal = computed(() => {\n\t// multiselect не поддерживает inline ввода\n\tif (props.searchType === 'inline' && props.multiselect) return 'popup';\n\n\t// В мобильной версии popup работает в полноэкранном режиме\n\tif (props.searchType === 'inline' && Core.state.isMobile) return 'popup';\n\n\treturn props.searchType;\n});\n\n/**\n * Объект для работы с API\n */\nconst api = useAPI(props.api, props.apiSetSearchParams, props.minLength, props.useCache);\n\n/**\n * Объект для работы с меню\n */\nconst menu = useMenu(\n\tmodel,\n\temits,\n\ttoRef(props, 'items'),\n\tprops.multiselect,\n\ttoRef(props, 'useAllItem'),\n\ttoRef(props, 'appendSearchToResult'),\n\ttoRef(props, 'appendSearchToResultCond'),\n\tsearchTypeLocal,\n\tprops.minLength,\n\tapi,\n);\n\nconst component = computed(() => {\n\tif (props.buttonProps) return 'TopButton';\n\tif (searchTypeLocal.value === 'inline') return 'TopInput';\n\n\treturn 'div';\n});\n\n/**\n * Экземпляр компонента Popup\n */\nconst popupRef = ref<any>(null);\n\n/**\n * Получить доступ к объекту popup\n */\nconst getPopup = (): TopLibPopup | undefined => {\n\treturn popupRef.value?.popup;\n};\n\nif (api.apiRequest) {\n\t// отложенный поиск при вводе текста\n\twatch(menu.searchText, () => {\n\t\tapi.setSearchTextAndLoad(menu.searchText.value);\n\t});\n}\n\nconst placeholder = computed(() => {\n\tif (Array.isArray(model.value) || props.multiselect || !props.selectedAsPlaceholder && searchTypeLocal.value !== 'inline') {\n\t\treturn props.placeholder;\n\t}\n\n\treturn model.value?.name || props.placeholder;\n});\n\n/**\n * Обработчик ввода клавиш на кнопке или поле ввода\n */\nconst onOpenerKeydown = (e: KeyboardEvent) => {\n\tlet needOpen = false;\n\n\tswitch (e.key) {\n\t\tcase 'Delete':\n\t\tcase 'Backspace':\n\t\t\tif (Array.isArray(model.value)) {\n\t\t\t\te.preventDefault();\n\t\t\t\te.stopPropagation();\n\n\t\t\t\tmodel.value.pop();\n\t\t\t}\n\n\t\t\tbreak;\n\t\tcase 'ArrowUp':\n\t\tcase 'ArrowRight':\n\t\tcase 'ArrowDown':\n\t\tcase 'ArrowLeft':\n\t\tcase 'Enter':\n\t\tcase ' ':\n\t\t\tneedOpen = true;\n\n\t\t\tbreak;\n\t\tcase 'Escape':\n\t\t\tif (searchTypeLocal.value === 'inline') {\n\t\t\t\t// очистка введенного текста\n\t\t\t\tmenu.resetSearch();\n\t\t\t}\n\n\t\t\tbreak;\n\t}\n\n\t// введен символ\n\tconst symbolPressed = e.key.length === 1 && !e.ctrlKey && !e.metaKey;\n\n\t// введен символ\n\tif (searchTypeLocal.value === 'popup' || searchTypeLocal.value === 'inline') {\n\t\tif (symbolPressed) {\n\t\t\tneedOpen = true;\n\t\t}\n\t}\n\n\t// popup уже открыт\n\tif (getPopup()?.elPopup) {\n\t\tneedOpen = false;\n\t}\n\n\tif (needOpen) {\n\t\tif (searchTypeLocal.value === 'popup') {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\n\t\t\t// введен символ\n\t\t\tif (symbolPressed) {\n\t\t\t\t// начало ввода, сразу ввести первый символ вместе с открытием popup\n\t\t\t\tif (!menu.searchText.value) {\n\t\t\t\t\tmenu.searchText.value = e.key;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t(e.currentTarget as HTMLElement)?.click();\n\t}\n};\n\nconst onClickChanger = (e: MouseEvent) => {\n\te.preventDefault();\n\n\tmenu.selectNextItem();\n};\n\n/**\n * Обработчик открытия попапа\n */\nconst onOpen = () => {\n\tif (api.apiRequest) {\n\t\t// при открытии сразу выполнить поиск\n\t\tapi.setSearchTextAndLoad(menu.searchText.value, false);\n\t}\n};\n\n/**\n * Обработчик закрытия попапа\n */\nconst onClose = () => {\n\t// очистка введенного текста, в режиме `inline` input вызывается при `blur`\n\tif (searchTypeLocal.value === 'popup') {\n\t\tif (menu.searchText.value) menu.resetSearch();\n\t}\n};\n\n/**\n * Обработчик прокрутки списка контента\n *\n * Для дозагрузки элеменов через api\n *\n * @param {Event} e - Событие прокрутки\n */\nconst onScrollContentList = (e: Event) => {\n\tconst el = e.target as HTMLElement;\n\n\tif (el.scrollTop / (el.scrollHeight - el.offsetHeight) > 0.8) {\n\t\tapi.load(true);\n\t}\n};\n\nif (import.meta.env.STORYBOOK) {\n\twatch(\n\t\t() => props.multiselect,\n\t\t() => {\n\t\t\tif (props.multiselect) {\n\t\t\t\tif (!Array.isArray(model.value)) {\n\t\t\t\t\tmodel.value = [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tid: 1,\n\t\t\t\t\t\t\tname: 'Выбери меня',\n\t\t\t\t\t\t},\n\t\t\t\t\t];\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif (Array.isArray(model.value)) {\n\t\t\t\t\tmodel.value = {\n\t\t\t\t\t\tid: null,\n\t\t\t\t\t\tname: '',\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t{ immediate: true },\n\t);\n\n\twatch(\n\t\t() => props.searchType,\n\t\t() => {\n\t\t\t// пауза для установки props в адресной строке\n\t\t\tsetTimeout(() => {\n\t\t\t\tlocation.reload();\n\t\t\t}, 500);\n\t\t},\n\t);\n}\n</script>\n\n<template>\n\t<TopPopup\n\t\tref=\"popupRef\"\n\t\t@open=\"onOpen()\"\n\t\t@close=\"onClose()\"\n\t\t@scrollContentList=\"api ? onScrollContentList($event) : undefined\"\n\t\t:notch=\"false\"\n\t\t:transitionDuration=\"0\"\n\t\t:openByFocusInput=\"searchTypeLocal === 'inline' && (openByFocusInput ?? true)\"\n\t\t:disabled=\"searchTypeLocal === 'inline' && menu.genIsShort()\"\n\t>\n\t\t<template #opener>\n\t\t\t<component\n\t\t\t\t:is=\"component\"\n\n\t\t\t\t:=\"buttonProps\"\n\n\t\t\t\t:class=\"{\n\t\t\t\t\t'top-selector2': true,\n\t\t\t\t\t'top-selector2-multiselect': multiselect,\n\t\t\t\t\t['top-selector2-' + modificator]: !!modificator,\n\t\t\t\t\t'top-as-input': !buttonProps && searchTypeLocal !== 'inline',\n\t\t\t\t\t'top-as-selector': true,\n\t\t\t\t\t['top-size_' + size]: true,\n\t\t\t\t\t['top-disabled']: disabled,\n\t\t\t\t\t['top-forms-focusable']: !disabled,\n\t\t\t\t\t['top-error']: isError,\n\t\t\t\t}\"\n\t\t\t\t:icon\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t@keydown=\"onOpenerKeydown\"\n\t\t\t\t@blur=\"searchTypeLocal === 'inline' && menu.resetSearch()\"\n\t\t\t\tv-top-focus.onupdate=\"isError\"\n\t\t\t\tv-top-shortcut=\"openerShortcut\"\n\n\t\t\t\t:placeholder\n\t\t\t\t:title\n\t\t\t\t:captionType=\"searchTypeLocal === 'inline' && title !== undefined ? 'top' : undefined\"\n\t\t\t\tv-model=\"menu.searchText.value\"\n\t\t\t>\n\t\t\t\t<template v-if=\"multiselect\">\n\t\t\t\t\t<div class=\"top-selector2_activeItems\">\n\t\t\t\t\t\t<Selector2ItemMulti\n\t\t\t\t\t\t\tv-for=\"item of model as Item[]\"\n\t\t\t\t\t\t\t:id=\"item.id\"\n\t\t\t\t\t\t\t:name=\"item.name\"\n\t\t\t\t\t\t\t@delete=\"menu.deleteItemByItem\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\n\t\t\t\t<span v-if=\"searchTypeLocal !== 'inline' && !multiselect\" class=\"top-selector2_activeName top-ellipsis\">\n\t\t\t\t\t{{ !Array.isArray(model) ? model.name : '' }}\n\t\t\t\t</span>\n\n\t\t\t\t<span v-if=\"multiselect && !model.length\" class=\"top-selector2_placeholder top-ellipsis\">\n\t\t\t\t\t{{ placeholder }}\n\t\t\t\t</span>\n\n\t\t\t\t<span\n\t\t\t\t\tv-if=\"addChanger && !buttonProps && !multiselect && menu.itemsForShow.value.length > 1 && !disabled\"\n\t\t\t\t\tclass=\"top-changer top-changer-selector\"\n\t\t\t\t\tdata-top-popup-disabled=\"true\"\n\t\t\t\t\t@click=\"onClickChanger\"\n\t\t\t\t></span>\n\t\t\t</component>\n\t\t</template>\n\n\t\t<template #widget v-if=\"searchTypeLocal === 'popup'\">\n\t\t\t<div class=\"top-selector2_searchWidget\">\n\t\t\t\t<TopPopupWidgetInput\n\t\t\t\t\ttitle=\"Поиск\"\n\t\t\t\t\ticon=\"\"\n\t\t\t\t\tv-model=\"menu.searchText.value\"\n\t\t\t\t\tv-top-focus.onupdate=\"model\"\n\t\t\t\t\t:isLoading=\"!!api.countLoading.value && api.isLoading.value\"\n\t\t\t\t\t:placeholder\n\t\t\t\t/>\n\n\t\t\t\t<slot name=\"widgetAction\"\n\t\t\t\t></slot>\n\t\t\t</div>\n\t\t</template>\n\n\t\t<template #contentList>\n\t\t\t<TopPopupListItem\n\t\t\t\tv-for=\"item of menu.itemsForShow.value\"\n\t\t\t\t:key=\"item.id ?? undefined\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'top-active': !Array.isArray(model) && !multiselect && model.id === item.id && model.name === item.name,\n\t\t\t\t\t'top-selector2_item-all':item.id === ITEM_ID_ALL,\n\t\t\t\t\t'top-selector2_item-new':item.id === ITEM_ID_NEW,\n\t\t\t\t}\"\n\t\t\t\t:=\"item.listItemProps\"\n\t\t\t\t:closeByClick=\"!multiselect || Core.state.isMobile\"\n\t\t\t\t@click=\"menu.selectItem(item)\"\n\t\t\t>\n\t\t\t\t<slot\n\t\t\t\t\tv-if=\"$slots.item\"\n\t\t\t\t\tname=\"item\"\n\t\t\t\t\t:item\n\t\t\t\t></slot>\n\n\t\t\t\t<template\n\t\t\t\t\tv-else\n\t\t\t\t>\n\t\t\t\t\t{{ item.name }}\n\t\t\t\t</template>\n\t\t\t</TopPopupListItem>\n\n\t\t\t<!-- Элементов для отображения нет -->\n\t\t\t<template v-if=\"!menu.itemsForShow.value.length && !menu.genIsShort()\">\n\t\t\t\t<TopPopupListItem type=\"regular\">\n\t\t\t\t\t<template v-if=\"!api.isLoading.value || api.countLoading.value\">\n\t\t\t\t\t\t{{ $i18n.Common.No_results }}\n\t\t\t\t\t</template>\n\n\t\t\t\t\t<!-- Индикатор первичной загрузки -->\n\t\t\t\t\t<TopPreloader\n\t\t\t\t\t\tv-else\n\t\t\t\t\t\ttype=\"circles\"\n\t\t\t\t\t/>\n\t\t\t\t</TopPopupListItem>\n\t\t\t</template>\n\n\t\t\t<!-- Индикатор повторной загрузки -->\n\t\t\t<TopLoadbar v-if=\"!!api.countLoading.value && api.isLoading.value && searchTypeLocal === 'inline'\"/>\n\t\t</template>\n\t</TopPopup>\n</template>\n\n<style>\n.top-selector2 {\n\twidth: 180px;\n}\n\n.top-selector2::placeholder,\n.top-selector2_placeholder {\n\tcolor: var(--color-text-2);\n}\n\n.top-selector2_placeholder {\n\tpadding-left: var(--top-padding-1);\n}\n\n.top-selector2.top-as-input {\n\tpadding: var(--top-padding-1) var(--top-forms-padding);\n}\n\n.top-selector2.top-selector2-multiselect {\n\twidth: auto;\n\tpadding: var(--top-padding-1);\n\tflex-grow: 1;\n}\n\n.top-selector2.top-active {\n\t--top-forms-border-color: var(--top-forms-border-color-hover);\n}\n\n.top-selector2_searchWidget {\n\tdisplay: flex;\n\tgap: var(--top-gap-2);\n}\n\n.top-selector2_activeItems {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--top-padding-1);\n\tmax-width: 100%;\n}\n\n.top-selector2_activeName {\n\twhite-space: nowrap;\n}\n\n.top-changer-selector {\n\twidth: auto;\n\tpadding: var(--top-padding-1);\n\tmargin: calc(0px - var(--top-padding-1));\n\ttransform: translateX(0);\n}\n\n.top-selector2.top-button {\n\tjustify-content: start;\n}\n\n.top-selector2.top-input_input ~ .top-changer-selector {\n\ttransform: translateX(-52px);\n}\n\n.top-selector2.top-as-selector {\n\tpadding-right: calc(var(--top-selector-arrow-width) + var(--top-padding-2));\n}\n</style>\n"],"names":["el","vue","props","model","itemIsActive","item","index","modelNew","onWheel","event","delta","scrollIntoView","isSmooth","leftMargin","elBtn","gap","rightMargin","leftMarginParent","rightMarginParent","scrollLeft","$event","select","_cache","selectAll","__props","_ctx","cacheByMethod","clearCache","apiPath","genCacheKey","api","getCache","cacheKey","data","items","isLoading","countLoading","nextOffset","cache","res","indexWithError","load","append","apiSetSearchParams","searchText","callAPI","loadDebounce","forms","newSearchText","minLength","ITEM_ID_ALL","ITEM_ID_NEW","modelValue","itemSelected","apiSetSearchParamsFilter","search","fieldName","filters","filter","field","localItems","multiselect","useAllItem","itemAll","localItems2","itemsForShow","genItemsForShow","searchStringInvertKeyboard","utils_keyboard","searchString","itemTitleCategory","itemsCategory","items2","flushCategory","name","searchStringNormalized","itemNew","isSelected","selectItem","emits","resetSearch","fieldsForWatch","recalcItemsForShow","genIsShort","selectableItems","itemI","__expose","resetAPICache","menu","getPopup","searchTypeLocal","component","popupRef","placeholder","onOpenerKeydown","e","symbolPressed","onClickChanger","onScrollContentList","onOpen","onClose","_hoisted_1","popupHint_vue_vue_type_style_index_0_lang","_hoisted_4"],"mappings":"urBAeAA,EAAAC,EAAA,IAAA,EAGA,CAAAC,EAAA,YAAA,OAAAC,EAAA,OAAA,UAAA,OAAAA,EAAA,OAAA,oGAKAD,EAAA,YAAA,CAAA,MAAA,QAAAC,EAAA,KAAA,4FASAD,EAAA,YAAA,CAAAA,EAAA,oBAAA,MAAA,QAAAC,EAAA,KAAA,GAAA,CAAAA,EAAA,MAAA,QAAAD,EAAA,MAAA,CAAA,mDAIA,MAAAE,EAAAC,oDAEEA,EAAA,QAAAF,EAAA,2IAmBCG,IAAA,GACCC,EAAA,KAAAF,EAAA,KAAA,EAEAE,EAAA,OAAAD,EAAA,CAAA,CACD,MAEAC,EAAA,SAAA,GAAAA,EAAA,CAAA,IAAAF,EAAA,WAGCE,EAAA,CAAAF,EAAA,KAAA,EAIF,CAAAH,EAAA,oBAAA,CAAAK,EAAA,SAAAA,EAAA,CAAAF,EAAA,KAAA,GAEAF,EAAA,MAAAI,SAKDJ,EAAA,MAAAE,EAAA,KAAmB,EAIpBG,EAAAC,GAAA,IACCT,EAAA,MAAA,aAAAA,EAAA,MAAA,aACAS,EAAA,oFAMAT,EAAA,MAAA,WAAAA,EAAA,MAAA,WAAAU,CAA4C,EAU7CC,EAAA,CAAAC,EAAA,KAAA,sEAOCC,EAAAC,EAAA,WAAAd,EAAA,MAAA,WAAAe,EACAC,EAAAF,EAAA,WAAAd,EAAA,MAAA,WAAAc,EAAA,YAAAC,EAGAE,EAAAjB,EAAA,MAAA,WACAkB,EAAAlB,EAAA,MAAA,YAAAA,EAAA,MAAA,iBAKAa,EAAAI,IAAAE,EAAAN,GAGAG,EAAAE,IAAAC,EAAAH,EAAAhB,EAAA,MAAA,aAEAmB,IAAA,0EAIEnB,EAAA,MAAA,SAAA,CAAA,KAAAmB,EAAA,SAAAP,EAAA,SAAA,MAAA,CAAA,EAEF,mCASA,IAAAT,EAAA,MAAA,SAAAD,EAAA,MAAA,OAAA,4FAK6D,EAG9D,OAAAD,EAAA,UAAA,IAAAU,EAAA,EAAA,CAAA,EACAV,EAAA,UAAA,IAAAU,EAAA,EAAA,CAAA,wIAO2D,CAAA,WAKxD,EAAA,2LAMM,QAAAS,GAAAC,EAAAhB,EAAAe,EAAA,SAAAA,EAAA,OAAA,EAC+C,SAAAhB,EAAAC,CAAA,mDAG1C,GAAAJ,EAAA,QAAA,IAAA,kDACK,CAAA,uPAYP,QAAAqB,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAF,GAAAG,EAAA,2GAIG,GAAAtB,EAAA,QAAA,IAAA,gEACc,CAAA,kRCxKtBA,EAAA,gBAAAA,EAAA,gBAAAuB,EAAA,IAAA,EAAA,IAAA,CAAA,yFAJU,QAAAF,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAF,GAAAK,EAAA,MAAA,SAAA,CAAA,GAAAD,EAAA,GAAA,KAAAA,EAAA,IAAA,CAAA,GACmB,YAAAF,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAArB,EAAA,cAAA,IAAA,CACjC,EAAA,CAAA,MAAA,CAAA,mBCVIyB,EAAA,IAAA,IAKAC,EAAAC,GAAA,oBAIAC,EAAAC,GAAA,6BAKN,iDAGMC,EAAA,CAAAC,EAAAJ,4DASNF,EAAA,IAAAE,CAAA,GAAA,IAAAI,EAAAC,CAAA,iBCfA,MAAAC,EAAAjC,EAAA,IAAA,CAAA,CAAA,EAKAkC,EAAAlC,EAAA,IAAA,EAAA,EAEAmC,EAAAnC,EAAA,IAAA,CAAA,WAGAoC,uBAGCP,EAAA,OAAA,MAAA,uHAmBEQ,EAIF,MAAAC,EAAA,MAAAT,EAAA,KAAA,EAEA,GAAAS,EAAA,OAAA,oCAGC,QAAA,KAAA,gCAAA,uEAMD,GAAAC,IAAA,GAAA,+EAUAD,CAAO,EAMRE,EAAA,MAAAC,GAAA,oBAQE,OAAAP,EAAA,MAAA,OAEAL,EAAA,OAAA,OAAAO,CAAoB,MAEpBP,EAAA,OAAA,OAAA,EAGDa,IAAAb,EAAAc,CAAA,EAEAT,EAAA,MAAA,GACA,MAAAI,EAAA,MAAAM,EAAA,EACAV,EAAA,MAAA,iBAMAE,EAAAE,EAAA,aAGCL,EAAA,MAAAA,EAAA,MAAA,OAAAK,EAAA,MAAA,EAEAL,EAAA,MAAAK,EAAA,OACD,EAGDO,EAAAC,EAAA,SAAA,IAAAN,EAAA,EAAA,EAAA,GAAA,EAoCA,MAAA,cACa,MAAAP,EACZ,UAAAC,EACA,aAAAC,EACA,KAAAK,uCAxBA,IAAAO,EAAA,OAAAC,EAAA,wBAGCf,EAAA,MAAA,CAAA,2CAaAO,EAAA,EAAA,GACD,IC5IKS,EAAA,EAKAC,EAAA,+BAOL,MAAA,QAAAC,CAAA,0CAGC/C,EAAA,OAAA+C,EAAA,KAIF,MAAA,QAAAA,CAAA,EACCA,EAAA,KAAAC,GAAAA,EAAA,KAAAhD,EAAA,EAAA,EAEAA,EAAA,KAAA+C,EAAA,GAaKE,EAAA,CAAAxB,EAAAyB,EAAAC,IAAA,4BAINC,EAAAA,EAAA,OAAAC,GAAAA,EAAA,OAAAF,CAAA,KAGCC,EAAA,KAAAE,EAAA,eAAAH,EAAA,WAAA,CAAAD,CAAA,CAAA,CAAA,EAGDzB,EAAA,aAAA,CAAA,QAAA2B,CAAA,CAAA,CACD,4BC3BC,MAAAb,EAAA3C,EAAA,IAAA,EAAA,UAMK,KAAA8C,EAAA,QAAA,EAAA,OAAA,YAQJH,EAAA,MAAA,EAAmB,QAOnB,GAAAd,EAAA,+BASD8B,EAAA3D,EAAA,SAAA,IAAA,YAGC,MAAA,CAAA4D,GAAAC,EAAA,QACC,OAAAA,EAAA,OAAA,WACCC,EAAA,KAAAD,EAAA,OAGDE,EAAA,KAAAD,CAAA,GAGD7B,EAAA,OAAA,QAAA7B,GAAA2D,EAAA,KAAA,CAAA,GAAA3D,CAAA,CAAA,CAAA,EAEA2D,CAAO,CAAA,EAMRC,EAAAhE,EAAA,IAAA,CAAA,CAAA,SAGCgE,EAAA,MAAAC,EAAA,CAAqC,uCAYrCC,EAAAC,EAAA,qBAAAC,CAAA,uDAYAC,oBAQCC,EAAA,GAAA,EAAA,GAAA,eAAA,OAAA,qBAIAA,EAAA,YAEEC,EAAA,KAAAF,CAAA,EAGDE,EAAA,KAAA,GAAAD,CAAA,EAEAA,EAAA,OAAA,EACD,EAGD,UAAAlE,KAAAuD,EAAA,MACC,OAAAvD,EAAA,eAAA,KAAA,CAAkC,IAAA,QAEhCoE,EAAA,YAIA,IAAA,YAIA,GAAAF,EAAA,OAAA,CACC,IAAAjE,EAAAiE,EAAA,OACAA,EAAA,GAAA,EAAA,GAAA,eAAA,OAAA,aAAAjE,IAEAiE,EAAAjE,CAAA,EAAAD,8CAMD,OAAAA,EAAA,EAAA,EAAA,SAAAgE,CAAA,GAAAK,EAAA,SAAAL,CAAA,GAAAK,EAAA,SAAAP,CAAA,GAAAO,EAAA,SAAAC,CAAA,kBAQEJ,EAAA,QAAAlE,CAAA,EAEAkE,EAAA,KAAAlE,CAAA,EAEF,IAIHoE,EAAA,qEAQgF,CAAAD,EAAA,KAAAnE,GAAAA,EAAA,KAAA,YAAA,IAAAgE,CAAA,EAAA,6BAW/EG,EAAA,KAAAI,CAAA,aAIAJ,EAAAA,EAAA,OAAAnE,GAAA,CAAAwE,EAAA1E,EAAA,MAAAE,CAAA,CAAA,GAGDmE,CAAO,EAQRM,EAAAzE,GAAA,CAECA,EAAA,eAAA,OAAA,SAAAA,EAAA,eAAA,OAAA,+EASCF,EAAA,MAAAE,EAGDA,EAAA,KAAA8C,GACC4B,EAAA,aAAA1E,CAAA,kBAqBA2E,EAAA,CAAY,CAAA,EACZ,EAWF,GAAAlD,EAAA,WAAA,wBAMEmD,EAAA,KAAA9E,CAAA,EAGDF,EAAA,MAAAgF,EAAA,IAAA,CACCC,EAAA,CAAmB,CAAA,CACnB,2BAGAA,EAAA,CAAmB,EAAA,cAER,KAAA,CAGL,CAAA,EA0BR,MAAA,CAAO,WAAAtC,EACN,YAAAoC,EACA,WAAAG,EACA,aAAAlB,EACA,WAAAa,EACA,qDArBA,MAAAM,EAAAnB,EAAA,MAAA,OAAA5D,GAAA,CAAA,CAAA,QAAA,WAAA,EAAA,SAAAA,EAAA,eAAA,MAAA,EAAA,CAAA,KAEA+E,EAAA,UAAA/E,GAAAA,EAAA,KAAAF,EAAA,MAAA,EAAA,+BAE8C,mBAM/C,MAAAE,GAAA,0BAEEF,EAAA,MAAAA,EAAA,MAAA,OAAAkF,GAAAA,EAAA,KAAAhF,EAAA,IAAAgF,EAAA,OAAAhF,EAAA,IAAA,EACD,m8BClQFiF,EAAA,CAAa,WAAA,CAAAC,EAAA,KAAA,CAOXzD,EAAA,gBAICH,EAAAG,EAAA,WAAA,IAAA,EAIDA,EAAA,MAAA,MAAA,CAAA,EAGAA,EAAA,aAAA,MAAA,0DAOC0D,EAAA,aAAA,MAAA,CAAA,CAA2B,CAAA,EAI5BC,EAAA,GAAA,qDAGD,CAAA,EAGD,MAAAC,EAAAzF,EAAA,SAAA,IAECC,EAAA,aAAA,UAAAA,EAAA,aAGAA,EAAA,aAAA,UAAA6C,EAAA,KAAA,MAAA,SAAA,oBAEa,6DAWD5C,EACZ4E,EACA9E,EAAA,MAAAC,EAAA,OAAA,gBAEMD,EAAA,MAAAC,EAAA,YAAA,EACmBD,EAAA,MAAAC,EAAA,sBAAA,EACUD,EAAA,MAAAC,EAAA,0BAAA,EACIwF,iBAMxCC,EAAA1F,EAAA,SAAA,IACCC,EAAA,YAAA,0CAGA,KAAO,EAMR0F,EAAA3F,EAAA,IAAA,IAAA,QAMC2F,EAAA,OAAA,MAGD9D,EAAA,YAEC7B,EAAA,MAAAuF,EAAA,WAAA,IAAA,2CAC+C,CAAA,EAIhD,MAAAK,EAAA5F,EAAA,SAAA,kIAKmC,EAMnC6F,EAAAC,GAAA,wBAGgB,IAAA,SACT,IAAA,4EAMH5F,EAAA,MAAA,IAAA,SAGD,IAAA,UACI,IAAA,aACA,IAAA,YACA,IAAA,YACA,IAAA,QACA,IAAA,eAIJ,IAAA,SAEAuF,EAAA,QAAA,+BAKA,CAIF,MAAAM,EAAAD,EAAA,IAAA,SAAA,GAAA,CAAAA,EAAA,SAAA,CAAAA,EAAA,SAGAL,EAAA,QAAA,SAAAA,EAAA,QAAA,qBAOAD,EAAA,GAAA,oBAKCC,EAAA,QAAA,qDAOEF,EAAA,WAAA,oCAMDO,EAAA,eAAA,MAAA,EACF,EAGDE,EAAAF,GAAA,sCAGqB,SAOpBjE,EAAA,yDAGA,SAQA4D,EAAA,QAAA,4CAEA,EAUDQ,EAAAH,GAAA,CACC,MAAA/F,EAAA+F,EAAA,OAEA/F,EAAA,WAAAA,EAAA,aAAAA,EAAA,cAAA,IACC8B,EAAA,KAAA,EAAA,CACD,kNA0CK,OAAAR,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAF,GAAA+E,EAAA,GACS,QAAA7E,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAF,GAAAgF,EAAA,4FAIQ,iBAAAV,EAAA,QAAA,WAAAlE,EAAA,kBAAA,IAC+C,SAAAkE,EAAA,QAAA,UAAAzF,EAAA,MAAAuF,CAAA,EAAA,WAAA,wCAyDvDvF,EAAA,gBAAAA,EAAA,UAAA,EAAAA,EAAA,YAAAA,EAAA,wBAAA0F,EAAA,KAAA,EAAA1F,EAAA,WAAAuB,EAAA,YAAA,CAlDG,MAAA,8MAEsP,eAAAA,EAAA,SAAgC,sBAAA,CAAAA,EAAA,SAAyC,YAAAA,EAAA,8CAanU,OAAAF,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAF,GAAAsE,EAAA,QAAA,UAAAzF,EAAA,MAAAuF,CAAA,EAAA,YAAA,GAC6C,YAAAK,EAAA,MAItD,MAAArE,EAAA,MACA,YAAAkE,EAAA,QAAA,UAAAlE,EAAA,QAAA,OAAA,MAAA,iHAE6B,CAAA,EAAA,wBAWnBA,EAAA,aAAAvB,EAAA,UAAA,EAAAA,EAAA,mBAAA,MAAAoG,EAAA,EADJpG,EAAA,UAAA,EAAA,EAAAA,EAAA,mBAAAA,EAAA,SAAA,KAAAA,EAAA,WAAAE,EAAA,MAAAE,mCADH,GAAAA,EAAA,GAHS,KAAAA,EAAA,KACE,SAAAJ,EAAA,MAAAuF,CAAA,EAAA,gBACE,EAAA,KAAA,EAAA,CAAA,KAAA,OAAA,UAAA,CAAA,0jBAgBQ,QAAAS,CAChB,CAAA,GAAAhG,EAAA,mBAAA,GAAA,EAAA,8FA/Ba,+KAqDvBA,EAAA,UAAA,EAAAA,EAAA,YAAAA,EAAA,MAAAqG,EAAA,WAAA,EAAArG,EAAA,WAAA,CAuBmB,IAAAI,EAAA,IAAA,OArBD,MAAA,CACX,aAAA,CAAA,MAAA,QAAAF,EAAA,KAAA,GAAA,CAAAqB,EAAA,aAAArB,EAAA,MAAA,KAAAE,EAAA,IAAAF,EAAA,MAAA,OAAAE,EAAA,0FAAmN,iCAKpM,aAAA,CAAAmB,EAAA,aAAAvB,EAAA,MAAA8C,EAAA,IAAA,EAAA,MAAA,SACqB,QAAA3B,GAAAnB,EAAA,MAAAuF,CAAA,EAAA,WAAAnF,CAAA,CACd,CAAA,EAAA,wBAMpBoB,EAAA,OAAA,KAAAxB,EAAA,WAAAwB,EAAA,OAAA,OAAA,aADN,CAAA,GAAAxB,EAAA,UAAA,EAAAA,EAAA,mBAAAA,EAAA,SAAA,CAAA,IAAA,CAAA,EAAA,uPAYqB,EAAA,wBAGX,CAAAA,EAAA,MAAA6B,CAAA,EAAA,UAAA,OAAA7B,EAAA,MAAA6B,CAAA,EAAA,aAAA,OAAA7B,EAAA,UAAA,EAAAA,EAAA,mBAAAA,EAAA,SAAA,CAAA,IAAA,CAAA,EAAA,CAAAA,EAAA,gBAAAA,EAAA,gBAAAwB,EAAA,MAAA,OAAA,UAAA,EAAA,CAAA,CADgB,EAAA,EAAA,IAAAxB,EAAA,UAAA,EAAAA,EAAA,YAAAA,EAAA,MAAA8C,EAAA,YAAA,EAAA,qBAMrB,CAAA,oOApDE,GAAA9C,EAAA,QAAA,IAAA,CAaJA,EAAA,mBAAA,MAAAsG,GAAA,iRALH,EAAA,KAAA,EAAA,CAAA,aAAA,YAAA,aAAA,CAAA,EAAA,YAFqB,oBAAM"}
|
|
1
|
+
{"version":3,"file":"policy.vue_vue_type_style_index_0_lang-dgZjCI-7.amd.js","sources":["../../src/components/formsExt/menu/menu.vue","../../src/components/formsExt/selector2/itemMulti.vue","../../src/components/formsExt/selector2/cache.ts","../../src/components/formsExt/selector2/composables/useAPI.ts","../../src/components/formsExt/selector2/utils.ts","../../src/components/formsExt/selector2/composables/useMenu.ts","../../src/components/formsExt/selector2/selector2.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, onUpdated, ref } from 'vue';\nimport type { Item, Props } from './types';\nimport Core from '@/core/core/core';\nimport { isSafari } from '@/core/utils/device';\nimport TopButton from '@/components/forms/button/button.vue';\n\nconst props = withDefaults(defineProps<Props>(), {\n\tstyling: 'default',\n});\n\nconst model = defineModel({\n\trequired: true,\n});\n\nconst el = ref();\n\n// валидация типа modelValue без возможности выбора нескольких значений (ожидается строка или число)\nif (!props.isMultiple && typeof (model.value) !== 'string' && typeof (model.value) !== 'number') {\n\tconsole.warn('Type check failed for prop \"modelValue\". Expected String: ' + typeof (model.value));\n}\n\n// валидация типа modelValue с возможностью выбора нескольких значений (ожидается массив)\nif (props.isMultiple && !Array.isArray(model.value)) {\n\tconsole.warn('Type check failed for prop \"modelValue\". Expected Array: ' + typeof (model.value));\n}\n\n/**\n * Для множественного выбора без пустого множества\n *\n * Если ничего не выбрано, присваиваем 1-ое значение\n */\nif (props.isMultiple && !props.canBeEmptyMultiple && Array.isArray(model.value) && !model.value.length && props.items[0]) {\n\tmodel.value = [props.items[0]?.href ?? props.items[0]?.value];\n}\n\nconst itemIsActive = (item: Item) => {\n\tif (!Array.isArray(model.value)) {\n\t\treturn item.value === model.value;\n\t}\n\n\treturn model.value.includes(item.value);\n};\n\n/**\n * Выбрать элемент\n * @param item\n * @param toggle - добавить или исключить элемент, для isMultiple\n */\nconst select = (item: Item, toggle = false) => {\n\tif (Array.isArray(model.value)) {\n\t\tlet modelNew = model.value.slice();\n\n\t\tif (toggle) {\n\t\t\tif (!modelNew.length) modelNew = props.items.map(item => item.value);\n\n\t\t\tconst index = modelNew.indexOf(item.value);\n\t\t\tif (index === -1) {\n\t\t\t\tmodelNew.push(item.value);\n\t\t\t} else {\n\t\t\t\tmodelNew.splice(index, 1);\n\t\t\t}\n\t\t} else {\n\t\t\tif (modelNew.length === 1 && modelNew[0] === item.value) {\n\t\t\t\tmodelNew = [];\n\t\t\t} else {\n\t\t\t\tmodelNew = [item.value];\n\t\t\t}\n\t\t}\n\n\t\tif (!props.canBeEmptyMultiple && !modelNew.length) modelNew = [item.value];\n\n\t\tmodel.value = modelNew;\n\n\t\treturn;\n\t}\n\n\tmodel.value = item.value;\n};\n\n// вертикальный скролл в горизонтальный скролл\nconst onWheel = (event: WheelEvent) => {\n\tif (el.value.scrollWidth <= el.value.offsetWidth) return;\n\tif (event.shiftKey) return;\n\tif (Math.abs(event.deltaY) < 50) return; // устройство с высокой точностью, например тачпад\n\n\tevent.preventDefault();\n\n\tconst delta = event.deltaY > 0 ? 30 : -30;\n\tel.value.scrollLeft = el.value.scrollLeft + delta;\n};\n\n/**\n * Замена стандартному scrollIntoView, который меняет скролл документа\n *\n * Выравнивание по ближнему краю элемента\n *\n * Выравнивается таким образом, чтобы был виден соседний элемент\n */\nconst scrollIntoView = (isSmooth = true) => {\n\tconst elBtn = el.value.querySelector('.top-active');\n\tif (!elBtn) return;\n\n\tconst gap = 24;\n\n\t// левая и правая координаты элемента\n\tconst leftMargin = elBtn.offsetLeft - el.value.offsetLeft - gap;\n\tconst rightMargin = elBtn.offsetLeft - el.value.offsetLeft + elBtn.clientWidth + gap;\n\n\t// левая и правая границы видимой части меню\n\tconst leftMarginParent = el.value.scrollLeft;\n\tconst rightMarginParent = el.value.clientWidth + el.value.scrollLeft;\n\n\tlet scrollLeft: number | undefined = undefined;\n\n\t// левую границу элемента к левой границе меню\n\tif (leftMargin < leftMarginParent) scrollLeft = leftMargin;\n\n\t// правую границу элемента к правой границе меню\n\tif (rightMargin > rightMarginParent) scrollLeft = rightMargin - el.value.clientWidth;\n\n\tif (scrollLeft !== undefined) {\n\t\tif (isSafari()) {\n\t\t\tCore.$?.(el.value).animate({ scrollLeft: scrollLeft }, isSmooth ? 200 : 0);\n\t\t} else {\n\t\t\tel.value.scrollTo({ left: scrollLeft, behavior: isSmooth ? 'smooth' : 'auto' });\n\t\t}\n\t}\n};\n\n/**\n * Выбрать все элементы в меню\n */\nconst selectAll = () => {\n\tif (!Array.isArray(model.value)) return;\n\n\tif (model.value.length === props.items.length) {\n\t\tmodel.value = [props.items[0].href ?? props.items[0].value];\n\t\treturn;\n\t}\n\n\tmodel.value = props.items.map(item => item.href ?? item.value);\n};\n\nonMounted(() => scrollIntoView(false));\nonUpdated(() => scrollIntoView(true));\n\n</script>\n\n<template>\n\t<div\n\t\tref=\"el\"\n\t\t:class=\"{\n\t\t\t'top-menu': true,\n\t\t\t['top-style_' + styling]: true,\n\t\t\t// ['top-unwrap-x']: styling === 'default',\n\t\t}\"\n\t\t@wheel=\"onWheel\"\n\t>\n\t\t<TopButton\n\t\t\tv-for=\"item in items\"\n\t\t\t:=\"item\"\n\t\t\tclass=\"top-menu_item\"\n\t\t\tcolor=\"theme\"\n\t\t\t@click=\"select(item, $event.ctrlKey || $event.metaKey)\"\n\t\t\t:isActive=\"itemIsActive(item)\"\n\t\t>\n\t\t\t<template #default v-if=\"item.content\">\n\t\t\t\t{{ item.content }}\n\t\t\t</template>\n\t\t</TopButton>\n\n\t\t<div\n\t\t\tv-if=\"Array.isArray(model) && selectAllItem\"\n\t\t\tclass=\"top-menu_selectAll\"\n\t\t>\n\t\t\t<TopButton\n\t\t\t\t:=\"selectAllItem\"\n\t\t\t\tclass=\"top-menu_item\"\n\t\t\t\tcolor=\"theme\"\n\t\t\t\tstyling=\"\"\n\t\t\t\t@click=\"selectAll()\"\n\t\t\t\t:isActive=\"model.length === items.length\"\n\t\t\t>\n\t\t\t\t<template #default v-if=\"selectAllItem.content\">\n\t\t\t\t\t{{ selectAllItem.content }}\n\t\t\t\t</template>\n\t\t\t</TopButton>\n\t\t</div>\n\t</div>\n</template>\n\n<style>\n.top-menu {\n\t--scroll-thumb-color: var(--color-line-1);\n\t--scroll-thumb-color-hover: var(--color-line-2);\n\t--scroll-thumb-color-active: var(--color-line-3);\n\n\tmax-width: 100%;\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: var(--top-gap-2);\n\toverflow-x: auto;\n\tscrollbar-width: none; /* firefox */\n\n\t/* предотвратить натинвые события браузера (назад / вперед) */\n\toverscroll-behavior-x: contain;\n}\n\n.top-menu::-webkit-scrollbar { display: none; }\n\n.top-menu .top-menu_item {\n\t--top-button-color: var(--color-text-2);\n\n\toutline-offset: -2px !important;\n\tmin-width: 0;\n\tmax-width: 200px;\n\tmargin: 0;\n\tflex-shrink: 0;\n}\n\n.top-menu .top-menu_item[data-top-icon] {\n\t--top-icon-color: var(--color-text-2);\n}\n\n.top-menu_selectAll {\n\tposition: sticky;\n\tright: 0;\n\tbackground: var(--color-layout-front-1);\n\tborder-left: 1px solid var(--color-line-1);\n\tpadding-left: var(--top-padding-1);\n\tbox-shadow: var(--color-layout-front-1) var(--top-padding-2) 0px;\n}\n\n/* style default */\n.top-menu.top-style_default .top-menu_item {\n\t--top-forms-radius: 0;\n\t--top-forms-border-color: transparent;\n\t--top-forms-border-width: 2px;\n\n\tfilter: none;\n\tbox-shadow: none;\n\tborder: none;\n\tborder-bottom: var(--top-forms-border-width) solid var(--top-forms-border-color);\n\tbackground: none;\n}\n\n.top-style_default > .top-menu_item > [data-top-badge] {\n\tmargin-top: 0;\n}\n\n.top-menu.top-style_default .top-menu_item:hover {\n\t--top-icon-color: var(--color-text-1);\n\t--top-button-color: var(--color-text-1);\n\t--top-forms-border-color: var(--color-line-2);\n}\n\n.top-menu.top-style_default .top-menu_item:active,\n.top-menu.top-style_default .top-menu_item.top-active {\n\t--top-icon-color: var(--color-text-primary);\n\t--top-button-color: var(--color-text-1);\n\t--top-forms-border-color: var(--color-line-primary-1);\n}\n\n.top-menu.top-style_default .top-menu_selectAll {\n\tpadding-left: var(--top-padding-2);\n}\n\n/* style bar */\n.top-menu.top-style_bar {\n\tborder-radius: var(--top-radius-3);\n\tborder: 1px solid var(--color-line-2);\n\tpadding: var(--top-padding-1);\n\tgap: 3px;\n}\n.top-menu.top-style_bar .top-menu_item {\n\t--top-button-background-color-hover: var(--color-layer-1);\n\t--top-button-background-color-active: var(--color-layer-2);\n\t--top-button-background-color-selected: var(--color-layer-primary-1);\n\n\tposition: relative;\n}\n\n.top-menu.top-style_bar .top-menu_item:hover {\n\t--top-icon-color: var(--color-text-1);\n\t--top-button-color: var(--color-text-1);\n}\n\n.top-menu.top-style_bar .top-menu_item.top-active {\n\t--top-icon-color: var(--color-text-primary);\n\t--top-button-color: var(--color-text-primary);\n}\n\n/* разделители кнопок в баре */\n.top-menu.top-style_bar .top-menu_item:not(:first-child):not(.top-active):not(:hover):after {\n\tcontent: \"\";\n\tbackground: var(--color-line-1-opacity);\n\twidth: 1px;\n\theight: 60%;\n\tdisplay: block;\n\tposition: absolute;\n\tleft: -2px;\n}\n.top-menu.top-style_bar .top-menu_item.top-active + .top-menu_item:after,\n.top-menu.top-style_bar .top-menu_item:hover + .top-menu_item:after {\n\tcontent: none !important;\n}\n\n/*\n.top-style_bar > .top-menu_item > [data-top-badge] {\n\tmargin-top: -3px;\n}\n*/\n\n/** TODO: .top-unwrap-x надо вынести глобально в UI или добавить в стили для storybook */\n/*\n.top-menu.top-unwrap-x {\n\tpadding-right: var(--top-unwrap-x);\n\tpadding-left: var(--top-unwrap-x);\n\tmargin-right: calc(0px - var(--top-unwrap-x));\n\tmargin-left: calc(0px - var(--top-unwrap-x));\n}\n*/\n</style>\n","<script setup lang=\"ts\">\nimport type { EmitsItemMulti, PropsItemMulti } from './types';\n\ndefineProps<PropsItemMulti>();\ndefineEmits<EmitsItemMulti>();\n</script>\n\n<template>\n\t<div class=\"top-selector2_itemMulti top-ellipsis\">\n\t\t{{ name }}\n\n\t\t<span\n\t\t\tclass=\"top-selector2_itemMultiDelete\"\n\t\t\tdata-top-icon=\"\"\n\t\t\t@click=\"$emit('delete', {id, name})\"\n\t\t\t@mousedown.stop\n\t\t></span>\n\t</div>\n</template>\n\n<style>\n.top-selector2_itemMulti {\n\tbox-sizing: border-box;\n\tpadding-left: var(--top-padding-2);\n\tborder-radius: var(--top-radius-1, 4px);\n\tborder: 1px solid var(--color-line-primary-1);\n\tbackground: var(--color-layer-primary-2);\n\tmin-height: 22px;\n\tmax-width: 100%;\n\tcolor: var(--color-text-1);\n\tflex-grow: 0;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: var(--top-gap-1);\n}\n\n.top-selector2_itemMultiDelete {\n\t--top-icon-size: 14px;\n\t--top-icon-width: 18px;\n\t--top-icon-color: var(--color-text-1);\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100%;\n\tcursor: pointer;\n}\n\n.top-selector2_itemMultiDelete:hover {\n\tbackground: var(--color-layer-primary-2);\n}\n\n@media screen and (min-width: 900px) {\n\t.top-selector2.top-active .top-selector2_itemMultiDelete {\n\t\tz-index: calc(var(--top-popup-z-index) + 1);\n\t}\n}\n</style>\n","import type { Props } from './types';\n\n/**\n * Список кешей для конкретного API метода\n */\nexport const cacheByMethod = new Map<Api.PathAbstract, Map<string, any>>();\n\n/**\n * Сброс кеша конкретного API метода\n */\nexport const clearCache = (apiPath: Api.PathAbstract) => {\n\tcacheByMethod.get(apiPath)?.clear();\n};\n\nexport const genCacheKey = (api: NonNullable<Props['api']>) => {\n\tconst userId = window['mo']?.user?.id;\n\n\tconst cacheKey = JSON.stringify(api.params) + ':' + api.url + ':' + userId;\n\n\treturn cacheKey;\n};\n\nexport const getCache = (cacheKey: string, apiPath: Api.PathAbstract) => {\n\treturn cacheByMethod.get(apiPath)?.get(cacheKey);\n};\n\nexport const setCache = (cacheKey: string, apiPath: Api.PathAbstract, data: any) => {\n\tif (!cacheByMethod.has(apiPath)) {\n\t\tcacheByMethod.set(apiPath, new Map());\n\t}\n\n\tcacheByMethod.get(apiPath)?.set(cacheKey, data);\n};\n","import { ref } from 'vue';\nimport { debounce } from '../../../../core/utils/lodash';\nimport type { Item, Props } from '../types';\nimport { genCacheKey, getCache, setCache } from '../cache';\n\nexport type API = ReturnType<typeof useAPI>;\n\nexport const useAPI = (\n\tapi: Props['api'],\n\tapiSetSearchParams: Props['apiSetSearchParams'],\n\tminLength: number,\n\tuseCache: Props['useCache'],\n) => {\n\t/**\n\t * Список, полученный через API\n\t */\n\tconst items = ref<Item[]>([]);\n\n\t/**\n\t * Флаг - идет загрузка\n\t */\n\tconst isLoading = ref(false);\n\n\tconst countLoading = ref(0);\n\n\tlet searchText = '';\n\tlet nextOffset: number | null | undefined;\n\n\tif (api && !api.params.limit) {\n\t\tapi.params.limit = 100;\n\t}\n\n\t/**\n\t * Выполнить обращение к API\n\t *\n\t * При ошибке вернет undefined\n\t */\n\tconst callAPI = async (): Promise<Api.ResponseSuccess<any, 'get'> | undefined> => {\n\t\tif (!api) return;\n\n\t\tconst cacheKey = useCache ? genCacheKey(api) : undefined;\n\n\t\tif (cacheKey) {\n\t\t\tconst cache = getCache(cacheKey, api.path);\n\t\t\tif (cache) {\n\t\t\t\t// остановить запущенные api запросы\n\t\t\t\tapi.abortByFingerprint();\n\n\t\t\t\treturn cache;\n\t\t\t}\n\t\t}\n\n\t\tconst res = await api.call();\n\n\t\tif (res.errors) return;\n\n\t\tif (!Array.isArray(res.result)) {\n\t\t\tconsole.warn('Array expected in `res.result`');\n\n\t\t\treturn;\n\t\t}\n\n\t\tconst indexWithError = (res.result as Array<Item | any>).findIndex(item => item.id === undefined || item.name === undefined);\n\t\tif (indexWithError !== -1) {\n\t\t\tconsole.warn(`В result[${indexWithError}] нет id или name`);\n\n\t\t\treturn;\n\t\t}\n\n\t\tif (cacheKey) {\n\t\t\tsetCache(cacheKey, api.path, res);\n\t\t}\n\n\t\treturn res as Api.ResponseSuccess<any, 'get'>;\n\t};\n\n\t/**\n\t * Загрузить items\n\t */\n\tconst load = async (append: boolean) => {\n\t\tif (!api) return;\n\n\t\tif (append) {\n\t\t\t// данных о следующих страницах не обнаружено\n\t\t\tif (!nextOffset) return;\n\n\t\t\t// дозагружать нельзя, если не завершена предыдущая загрузка\n\t\t\tif (isLoading.value) return;\n\n\t\t\tapi.params.offset = nextOffset;\n\t\t} else {\n\t\t\tapi.params.offset = 0;\n\t\t}\n\n\t\tapiSetSearchParams?.(api, searchText);\n\n\t\tisLoading.value = true;\n\t\tconst res = await callAPI();\n\t\tisLoading.value = false;\n\n\t\tcountLoading.value++;\n\n\t\tif (!res) return;\n\n\t\tnextOffset = res.nextOffset;\n\n\t\tif (append) {\n\t\t\titems.value = items.value.concat(res.result);\n\t\t} else {\n\t\t\titems.value = res.result;\n\t\t}\n\t};\n\n\tconst loadDebounce = debounce(() => load(false), 200);\n\n\t/**\n\t * Выполнить поиск по указанному тексту\n\t *\n\t * Если длина текста меньше minLength, поиск не будет произведен\n\t *\n\t * Если текст не изменился, поиск не будет произведен\n\t *\n\t * @param newSearchText - текст поиска\n\t * @param useDebounce - дедупликация загрузки списка\n\t */\n\tconst setSearchTextAndLoad = (newSearchText: string, useDebounce = true) => {\n\t\tif (!api) return;\n\n\t\t// остановить начатый поиск и сбросить результаты\n\t\tif (newSearchText.length < minLength) {\n\t\t\tapi.abortByFingerprint();\n\n\t\t\titems.value = [];\n\n\t\t\treturn;\n\t\t}\n\n\t\t// условия поиска не поменялись, данные загружены\n\t\tif (newSearchText === searchText && items.value.length) return;\n\n\t\tsearchText = newSearchText;\n\n\t\tif (useDebounce) {\n\t\t\tvoid loadDebounce();\n\t\t} else {\n\t\t\tvoid load(false);\n\t\t}\n\t};\n\n\treturn {\n\t\tapiRequest: api,\n\t\titems,\n\t\tisLoading,\n\t\tcountLoading,\n\t\tload,\n\t\tsetSearchTextAndLoad,\n\t};\n};\n","import type { Item, Props } from './types';\nimport { genFieldFilter } from '@/api/api';\n\n/**\n * Универсальный id для всех элементов \"Все элементы\" / \"Без фильтра\" в `TopSelector`\n */\nexport const ITEM_ID_ALL = 0;\n\n/**\n * Универсальный id для всех добавляемых элементов через `TopSelector`\n */\nexport const ITEM_ID_NEW = null;\n\n/**\n * Выбран ли элемент\n */\nexport const isSelected = (modelValue: Props['modelValue'], item: Item, checkNameForNullId = true) => {\n\tif (checkNameForNullId && item.id === ITEM_ID_NEW) {\n\t\tif (Array.isArray(modelValue)) {\n\t\t\treturn modelValue.some(itemSelected => itemSelected.id === item.id && itemSelected.name === item.name);\n\t\t} else {\n\t\t\treturn item.name === modelValue.name;\n\t\t}\n\t}\n\n\tif (Array.isArray(modelValue)) {\n\t\treturn modelValue.some(itemSelected => itemSelected.id === item.id);\n\t} else {\n\t\treturn item.id === modelValue.id;\n\t}\n};\n\n/**\n * Вспомогательная утилита для создания `callback` функции на добавление фильтра по полю в api запрос\n *\n * Другие фильтры по указанному полю будут удалены\n *\n * @param api - api, которое используется в `TopSelector`\n * @param search - введенная строка поиска\n * @param fieldName - имя поля, по которому надо добавить фильтр на поиск по нестрогому соответствию\n */\nexport const apiSetSearchParamsFilter = (api: NonNullable<Props['api']>, search: string, fieldName: string) => {\n\tlet filters = api.params.filters ?? [];\n\n\t// удаление других фильтров по этому полю\n\tfilters = filters.filter((filter) => filter.name !== fieldName);\n\n\tif (search) {\n\t\tfilters.push(genFieldFilter(fieldName, 'CONTAINS', [search]));\n\t}\n\n\tapi.changeParams({ filters });\n};\n","import { computed, type ComputedRef, ref, type Ref, watch } from 'vue';\nimport { invertKeyboardLayout } from '@/core/utils/keyboard';\nimport type { Item, Props } from '../types';\nimport { type API } from './useAPI';\nimport { isSelected, ITEM_ID_ALL, ITEM_ID_NEW } from '../utils';\nimport { useI18n } from '@/core/plugins/i18n';\n\n/**\n * Функционал поиска\n */\nexport const useMenu = (\n\tmodel: Ref<Props['modelValue']>,\n\temits: ReturnType<typeof defineEmits>,\n\titems: Ref<Props['items']>,\n\tmultiselect: Props['multiselect'],\n\tuseAllItem: Ref<Props['useAllItem']>,\n\tappendSearchToResult: Ref<Props['appendSearchToResult']>,\n\tappendSearchToResultCond: Ref<Props['appendSearchToResultCond']>,\n\tsearchType: Ref<Props['searchType']>,\n\tminLength: number,\n\tapi: API,\n) => {\n\t/**\n\t * Текст поиска по результатам\n\t */\n\tconst searchText = ref('');\n\n\t/**\n\t * Объект, представляющий опцию \"Все\"\n\t */\n\tconst itemAll = {\n\t\tid: ITEM_ID_ALL,\n\t\tname: useI18n().Common.All as string,\n\t};\n\n\t/**\n\t * Сброс поиска\n\t */\n\tconst resetSearch = () => {\n\t\tsearchText.value = '';\n\t};\n\n\t/**\n\t * Является ли строка поиска достаточной длины для отображения меню\n\t */\n\tconst genIsShort = () => {\n\t\tif (!api.apiRequest) return false;\n\t\tif (searchText.value.length >= minLength) return false;\n\n\t\treturn true;\n\t};\n\n\t/**\n\t * Варианты выбора: props.items + \"Выбрать все\"\n\t */\n\tconst localItems: ComputedRef<Item[]> = computed(() => {\n\t\tconst localItems: Item[] = [];\n\n\t\tif (!multiselect && useAllItem.value) {\n\t\t\tif (typeof useAllItem.value === 'string') {\n\t\t\t\titemAll.name = useAllItem.value;\n\t\t\t}\n\n\t\t\tlocalItems.push(itemAll);\n\t\t}\n\n\t\titems.value?.forEach(item => localItems.push({ ...item }));\n\n\t\treturn localItems;\n\t});\n\n\t/**\n\t * Не используем `computed` в пользу ручного порядка пересчета значения\n\t */\n\tconst itemsForShow = ref<Item[]>([]);\n\n\tconst recalcItemsForShow = () => {\n\t\titemsForShow.value = genItemsForShow();\n\t};\n\n\t/**\n\t * Подготовленный список меню, который содержит в сумме:\n\t * - prop.items: указанный список с учетом фильтра и опций компонента\n\t * - api.items: результаты api запроса, если используется api\n\t *\n\t * @returns Отфильтрованный массив элементов для отображения\n\t */\n\tconst genItemsForShow = () => {\n\t\tconst searchString = searchText.value.toLowerCase();\n\t\tconst searchStringInvertKeyboard = invertKeyboardLayout(searchString);\n\t\tconst searchStringNormalized = searchString.replace(/^https?:\\/\\/(www\\.)?|\\/$/g, '');\n\n\t\tlet items: Item[] = [];\n\n\t\t/**\n\t\t * Элемент текущего разделителя в цикле\n\t\t *\n\t\t * Для скрытия / отображения только нужных заголовков и разделителей при поиске\n\t\t *\n\t\t * Логика для `api.items` должна реализовываться в api или api клиенте при генерации элементов\n\t\t */\n\t\tlet itemTitleCategory: Item | undefined;\n\t\tconst itemsCategory: Item[] = [];\n\n\t\t/**\n\t\t * Добавить элементы в результирующий список\n\t\t */\n\t\tconst flushCategory = () => {\n\t\t\t// крайний разделитель не выводить\n\t\t\tif (itemsCategory.at(-1)?.listItemProps?.type === 'delimiter') {\n\t\t\t\titemsCategory.pop();\n\t\t\t}\n\n\t\t\tif (itemsCategory.length) {\n\t\t\t\tif (itemTitleCategory) {\n\t\t\t\t\titems.push(itemTitleCategory);\n\t\t\t\t}\n\n\t\t\t\titems.push(...itemsCategory);\n\n\t\t\t\titemsCategory.length = 0;\n\t\t\t}\n\t\t};\n\n\t\tfor (const item of localItems.value) {\n\t\t\tswitch (item.listItemProps?.type) {\n\t\t\t\tcase 'title':\n\t\t\t\t\tflushCategory();\n\n\t\t\t\t\titemTitleCategory = item;\n\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'delimiter':\n\t\t\t\t\t// вставить разделитель один раз и только если категория не пуста\n\t\t\t\t\tif (itemsCategory.length) {\n\t\t\t\t\t\tlet index = itemsCategory.length;\n\t\t\t\t\t\tif (itemsCategory.at(-1)?.listItemProps?.type === 'delimiter') index--;\n\n\t\t\t\t\t\titemsCategory[index] = item;\n\t\t\t\t\t}\n\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tconst name = item.name.toLowerCase();\n\t\t\t\t\tif (\n\t\t\t\t\t\tString(item.id).includes(searchString) ||\n\t\t\t\t\t\tname.includes(searchString) ||\n\t\t\t\t\t\tname.includes(searchStringInvertKeyboard) ||\n\t\t\t\t\t\tname.includes(searchStringNormalized)\n\t\t\t\t\t) {\n\t\t\t\t\t\tif (name === searchString || name === searchStringInvertKeyboard) {\n\t\t\t\t\t\t\t// точные совпадения в начало\n\t\t\t\t\t\t\titemsCategory.unshift(item);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\titemsCategory.push(item);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tflushCategory();\n\n\t\titems.push(...api.items.value);\n\n\t\t// ввод произвольного значения\n\t\tif (\n\t\t\tappendSearchToResult.value &&\n\t\t\t!!searchText.value &&\n\t\t\t(!appendSearchToResultCond.value || appendSearchToResultCond.value(searchString)) &&\n\n\t\t\t// результаты могут быть найдены, но не точные, тогда предложить добавить элемент\n\t\t\t!items.find((item) => item.name.toLowerCase() === searchString)\n\t\t) {\n\t\t\tconst itemNew = {\n\t\t\t\tid: ITEM_ID_NEW,\n\t\t\t\tname: searchText.value,\n\t\t\t};\n\n\t\t\t// предложение всегда отображается внизу, чтобы не мешать результатам поиска\n\t\t\titems.push(itemNew);\n\t\t}\n\n\t\tif (multiselect) {\n\t\t\titems = items.filter(item => !isSelected(model.value, item));\n\t\t}\n\n\t\treturn items;\n\t};\n\n\t/**\n\t * Выбрать элемент\n\t *\n\t * @param item Элемент для выбора\n\t */\n\tconst selectItem = (item: Item) => {\n\t\t// это невыбираемый элемент\n\t\tif (item.listItemProps?.type === 'title' || item.listItemProps?.type === 'delimiter') {\n\t\t\treturn;\n\t\t}\n\n\t\tif (multiselect && Array.isArray(model.value)) {\n\t\t\tif (!isSelected(model.value, item)) {\n\t\t\t\tmodel.value = [...model.value, item];\n\t\t\t}\n\t\t} else {\n\t\t\tmodel.value = item;\n\t\t}\n\n\t\tif (item.id === ITEM_ID_NEW) {\n\t\t\temits('appendItem', item);\n\t\t}\n\n\t\t/**\n\t\t * Отложить перерисовку\n\t\t *\n\t\t * fix: Перерисовка меню выполняется раньше, чем срабатывает `click`.\n\t\t * Из-за этого обработчик кликов думает, что клик был вне меню и не закрывает окно\n\t\t *\n\t\t * Файл: @/components/popup/lib/popup.globalEvents.ts\n\t\t *\n\t\t * Функция: onclick()\n\t\t *\n\t\t * ```\n\t\t * const elPopup = e.target.closest<HTMLElement>('.top-popup-wrapper');\n\t\t * ```\n\t\t */\n\t\tsetTimeout(() => {\n\t\t\t/**\n\t\t\t * Завершить поиск после выбора\n\t\t\t */\n\t\t\tresetSearch();\n\t\t});\n\n\t\t// /**\n\t\t// * При изменении значения модели в режиме inline необходимо очистить поле поиска,\n\t\t// * так как поиск больше не актуален после выбора значения\n\t\t// */\n\t\t// if (searchType.value === 'inline') {\n\t\t// \tresetSearch();\n\t\t// }\n\t};\n\n\tif (api.apiRequest) {\n\t\t// загрузка только при открытии popup\n\t\tconst fieldsForWatch: any = [items, api.items];\n\n\t\t// model нужен только для multiselect, без необходимости не использовать для улучшения UX при работе с API\n\t\tif (multiselect) {\n\t\t\tfieldsForWatch.push(model);\n\t\t}\n\n\t\twatch(fieldsForWatch, () => {\n\t\t\trecalcItemsForShow();\n\t\t});\n\t} else {\n\t\twatch([model, items, searchText], () => {\n\t\t\trecalcItemsForShow();\n\t\t}, {\n\t\t\timmediate: true,\n\n\t\t\t// слежение за изменениями `items`\n\t\t\tdeep: 2,\n\t\t});\n\t}\n\n\t/**\n\t * Выбрать следующее значение\n\t */\n\tconst selectNextItem = () => {\n\t\tif (Array.isArray(model.value)) return;\n\n\t\tconst selectableItems = itemsForShow.value.filter((item) => !['title', 'delimiter'].includes(item.listItemProps?.type ?? ''));\n\n\t\tconst currentIndex = selectableItems.findIndex(item => item.id === (model.value as Item).id);\n\t\tconst nextIndex = (currentIndex + 1) % selectableItems.length;\n\t\tmodel.value = { ...selectableItems[nextIndex] };\n\t};\n\n\t/**\n\t * Удалить элемент, `id` и `name` которого равны указанному `item`\n\t */\n\tconst deleteItemByItem = async (item: Item) => {\n\t\tif (Array.isArray(model.value)) {\n\t\t\tmodel.value = model.value.filter((itemI) => itemI.id !== item.id || itemI.name !== item.name);\n\t\t}\n\t};\n\n\treturn {\n\t\tsearchText,\n\t\tresetSearch,\n\t\tgenIsShort,\n\t\titemsForShow,\n\t\tselectItem,\n\t\tselectNextItem,\n\t\tdeleteItemByItem,\n\t};\n};\n","<script setup lang=\"ts\">\nimport { computed, ref, toRef, watch } from 'vue';\nimport Core from '@/core/core/core';\nimport { TopPopup, TopPopupListItem, TopPopupWidgetInput } from '@/components/popup/popup';\nimport { TopPreloader } from '@/components/forms/forms';\nimport type { Emits, Item, Props, Slots } from './types';\nimport Selector2ItemMulti from './itemMulti.vue';\nimport { useAPI } from './composables/useAPI';\nimport { useMenu } from './composables/useMenu';\nimport type { TopLibPopup } from '../../popup/lib/popup';\nimport { clearCache } from './cache';\nimport { ITEM_ID_ALL, ITEM_ID_NEW } from './utils';\n\nconst props = withDefaults(defineProps<Props>(), {\n\titems: () => [] as Item[],\n\tsize: 's',\n\tminLength: 0,\n\tsearchType: 'popup',\n\topenByFocusInput: undefined,\n});\n\nconst model = defineModel<Props['modelValue']>({ required: true });\n\ndefineSlots<Slots>();\n\nconst emits = defineEmits<Emits>();\n\ndefineExpose({\n\t/**\n\t * Сброс локального кеша и кеша api\n\t *\n\t * @param resetAPICache - Сбросить API кеш, по умолчанию не сбрасывается. Для случаев, когда загруженные данные становятся неактуальными\n\t */\n\tresetCache: (resetAPICache: boolean = false) => {\n\t\tif (!api.apiRequest) return;\n\n\t\t// сброс кеша api\n\t\tif (resetAPICache) {\n\t\t\tclearCache(api.apiRequest.path);\n\t\t}\n\n\t\t// сброс кеша списка\n\t\tapi.items.value = [];\n\n\t\t// сброс флага первичной загрузки\n\t\tapi.countLoading.value = 0;\n\n\t\t// сброс параметров дозагрузки\n\t\tapi.apiRequest.params.offset = 0;\n\n\t\t// сброс кеша локального списка с дополнительными элементами, например `useAllItem`\n\t\trequestAnimationFrame(() => {\n\t\t\tmenu.itemsForShow.value = [];\n\t\t});\n\n\t\t// сразу загрузить данные после сброса, если popup уже открыт\n\t\tif (getPopup()?.elPopup) {\n\t\t\tapi.setSearchTextAndLoad(menu.searchText.value);\n\t\t}\n\t},\n});\n\nconst searchTypeLocal = computed(() => {\n\t// multiselect не поддерживает inline ввода\n\tif (props.searchType === 'inline' && props.multiselect) return 'popup';\n\n\t// В мобильной версии popup работает в полноэкранном режиме\n\tif (props.searchType === 'inline' && Core.state.isMobile) return 'popup';\n\n\treturn props.searchType;\n});\n\n/**\n * Объект для работы с API\n */\nconst api = useAPI(props.api, props.apiSetSearchParams, props.minLength, props.useCache);\n\n/**\n * Объект для работы с меню\n */\nconst menu = useMenu(\n\tmodel,\n\temits,\n\ttoRef(props, 'items'),\n\tprops.multiselect,\n\ttoRef(props, 'useAllItem'),\n\ttoRef(props, 'appendSearchToResult'),\n\ttoRef(props, 'appendSearchToResultCond'),\n\tsearchTypeLocal,\n\tprops.minLength,\n\tapi,\n);\n\nconst component = computed(() => {\n\tif (props.buttonProps) return 'TopButton';\n\tif (searchTypeLocal.value === 'inline') return 'TopInput';\n\n\treturn 'div';\n});\n\n/**\n * Экземпляр компонента Popup\n */\nconst popupRef = ref<any>(null);\n\n/**\n * Получить доступ к объекту popup\n */\nconst getPopup = (): TopLibPopup | undefined => {\n\treturn popupRef.value?.popup;\n};\n\nif (api.apiRequest) {\n\t// отложенный поиск при вводе текста\n\twatch(menu.searchText, () => {\n\t\tapi.setSearchTextAndLoad(menu.searchText.value);\n\t});\n}\n\nconst placeholder = computed(() => {\n\tif (Array.isArray(model.value) || props.multiselect || !props.selectedAsPlaceholder && searchTypeLocal.value !== 'inline') {\n\t\treturn props.placeholder;\n\t}\n\n\treturn model.value?.name || props.placeholder;\n});\n\n/**\n * Обработчик ввода клавиш на кнопке или поле ввода\n */\nconst onOpenerKeydown = (e: KeyboardEvent) => {\n\tlet needOpen = false;\n\n\tswitch (e.key) {\n\t\tcase 'Delete':\n\t\tcase 'Backspace':\n\t\t\tif (Array.isArray(model.value)) {\n\t\t\t\te.preventDefault();\n\t\t\t\te.stopPropagation();\n\n\t\t\t\tmodel.value.pop();\n\t\t\t}\n\n\t\t\tbreak;\n\t\tcase 'ArrowUp':\n\t\tcase 'ArrowRight':\n\t\tcase 'ArrowDown':\n\t\tcase 'ArrowLeft':\n\t\tcase 'Enter':\n\t\tcase ' ':\n\t\t\tneedOpen = true;\n\n\t\t\tbreak;\n\t\tcase 'Escape':\n\t\t\tif (searchTypeLocal.value === 'inline') {\n\t\t\t\t// очистка введенного текста\n\t\t\t\tmenu.resetSearch();\n\t\t\t}\n\n\t\t\tbreak;\n\t}\n\n\t// введен символ\n\tconst symbolPressed = e.key.length === 1 && !e.ctrlKey && !e.metaKey;\n\n\t// введен символ\n\tif (searchTypeLocal.value === 'popup' || searchTypeLocal.value === 'inline') {\n\t\tif (symbolPressed) {\n\t\t\tneedOpen = true;\n\t\t}\n\t}\n\n\t// popup уже открыт\n\tif (getPopup()?.elPopup) {\n\t\tneedOpen = false;\n\t}\n\n\tif (needOpen) {\n\t\tif (searchTypeLocal.value === 'popup') {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\n\t\t\t// введен символ\n\t\t\tif (symbolPressed) {\n\t\t\t\t// начало ввода, сразу ввести первый символ вместе с открытием popup\n\t\t\t\tif (!menu.searchText.value) {\n\t\t\t\t\tmenu.searchText.value = e.key;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t(e.currentTarget as HTMLElement)?.click();\n\t}\n};\n\nconst onClickChanger = (e: MouseEvent) => {\n\te.preventDefault();\n\n\tmenu.selectNextItem();\n};\n\n/**\n * Обработчик открытия попапа\n */\nconst onOpen = () => {\n\tif (api.apiRequest) {\n\t\t// при открытии сразу выполнить поиск\n\t\tapi.setSearchTextAndLoad(menu.searchText.value, false);\n\t}\n\n\temits('open');\n};\n\n/**\n * Обработчик закрытия попапа\n */\nconst onClose = () => {\n\t// очистка введенного текста, в режиме `inline` input вызывается при `blur`\n\tif (searchTypeLocal.value === 'popup') {\n\t\tif (menu.searchText.value) menu.resetSearch();\n\t}\n};\n\n/**\n * Обработчик прокрутки списка контента\n *\n * Для дозагрузки элеменов через api\n *\n * @param {Event} e - Событие прокрутки\n */\nconst onScrollContentList = (e: Event) => {\n\tconst el = e.target as HTMLElement;\n\n\tif (el.scrollTop / (el.scrollHeight - el.offsetHeight) > 0.8) {\n\t\tapi.load(true);\n\t}\n};\n\nif (import.meta.env.STORYBOOK) {\n\twatch(\n\t\t() => props.multiselect,\n\t\t() => {\n\t\t\tif (props.multiselect) {\n\t\t\t\tif (!Array.isArray(model.value)) {\n\t\t\t\t\tmodel.value = [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tid: 1,\n\t\t\t\t\t\t\tname: 'Выбери меня',\n\t\t\t\t\t\t},\n\t\t\t\t\t];\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif (Array.isArray(model.value)) {\n\t\t\t\t\tmodel.value = {\n\t\t\t\t\t\tid: null,\n\t\t\t\t\t\tname: '',\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t{ immediate: true },\n\t);\n\n\twatch(\n\t\t() => props.searchType,\n\t\t() => {\n\t\t\t// пауза для установки props в адресной строке\n\t\t\tsetTimeout(() => {\n\t\t\t\tlocation.reload();\n\t\t\t}, 500);\n\t\t},\n\t);\n}\n</script>\n\n<template>\n\t<TopPopup\n\t\tref=\"popupRef\"\n\t\t@open=\"onOpen()\"\n\t\t@close=\"onClose()\"\n\t\t@scrollContentList=\"api ? onScrollContentList($event) : undefined\"\n\t\t:notch=\"false\"\n\t\t:transitionDuration=\"0\"\n\t\t:openByFocusInput=\"searchTypeLocal === 'inline' && (openByFocusInput ?? true)\"\n\t\t:disabled=\"searchTypeLocal === 'inline' && menu.genIsShort()\"\n\t>\n\t\t<template #opener>\n\t\t\t<component\n\t\t\t\t:is=\"component\"\n\n\t\t\t\t:=\"buttonProps\"\n\n\t\t\t\t:class=\"{\n\t\t\t\t\t'top-selector2': true,\n\t\t\t\t\t'top-selector2-multiselect': multiselect,\n\t\t\t\t\t['top-selector2-' + modificator]: !!modificator,\n\t\t\t\t\t'top-as-input': !buttonProps && searchTypeLocal !== 'inline',\n\t\t\t\t\t'top-as-selector': true,\n\t\t\t\t\t['top-size_' + size]: true,\n\t\t\t\t\t['top-disabled']: disabled,\n\t\t\t\t\t['top-forms-focusable']: !disabled,\n\t\t\t\t\t['top-error']: isError,\n\t\t\t\t}\"\n\t\t\t\t:icon\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t@keydown=\"onOpenerKeydown\"\n\t\t\t\t@blur=\"searchTypeLocal === 'inline' && menu.resetSearch()\"\n\t\t\t\tv-top-focus.onupdate=\"isError\"\n\t\t\t\tv-top-shortcut=\"openerShortcut\"\n\n\t\t\t\t:placeholder\n\t\t\t\t:title\n\t\t\t\t:captionType=\"searchTypeLocal === 'inline' && title !== undefined ? 'top' : undefined\"\n\t\t\t\tv-model=\"menu.searchText.value\"\n\t\t\t>\n\t\t\t\t<template v-if=\"multiselect\">\n\t\t\t\t\t<div class=\"top-selector2_activeItems\">\n\t\t\t\t\t\t<Selector2ItemMulti\n\t\t\t\t\t\t\tv-for=\"item of model as Item[]\"\n\t\t\t\t\t\t\t:id=\"item.id\"\n\t\t\t\t\t\t\t:name=\"item.name\"\n\t\t\t\t\t\t\t@delete=\"menu.deleteItemByItem\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\n\t\t\t\t<span v-if=\"searchTypeLocal !== 'inline' && !multiselect\" class=\"top-selector2_activeName top-ellipsis\">\n\t\t\t\t\t{{ !Array.isArray(model) ? model.name : '' }}\n\t\t\t\t</span>\n\n\t\t\t\t<span v-if=\"multiselect && !model.length\" class=\"top-selector2_placeholder top-ellipsis\">\n\t\t\t\t\t{{ placeholder }}\n\t\t\t\t</span>\n\n\t\t\t\t<span\n\t\t\t\t\tv-if=\"addChanger && !buttonProps && !multiselect && menu.itemsForShow.value.length > 1 && !disabled\"\n\t\t\t\t\tclass=\"top-changer top-changer-selector\"\n\t\t\t\t\tdata-top-popup-disabled=\"true\"\n\t\t\t\t\t@click=\"onClickChanger\"\n\t\t\t\t></span>\n\t\t\t</component>\n\t\t</template>\n\n\t\t<template #widget v-if=\"searchTypeLocal === 'popup'\">\n\t\t\t<div class=\"top-selector2_searchWidget\">\n\t\t\t\t<TopPopupWidgetInput\n\t\t\t\t\ttitle=\"Поиск\"\n\t\t\t\t\ticon=\"\"\n\t\t\t\t\tv-model=\"menu.searchText.value\"\n\t\t\t\t\tv-top-focus.onupdate=\"model\"\n\t\t\t\t\t:isLoading=\"!!api.countLoading.value && api.isLoading.value\"\n\t\t\t\t\t:placeholder\n\t\t\t\t/>\n\n\t\t\t\t<TopButton\n\t\t\t\t\tv-if=\"hasCloserBtn && !$core.state.isMobile\"\n\t\t\t\t\tclass=\"closer\"\n\t\t\t\t\tcolor=\"theme\"\n\t\t\t\t>\n\t\t\t\t\t{{ $i18n.Common.Cancel }}\n\t\t\t\t</TopButton>\n\t\t\t</div>\n\t\t</template>\n\n\t\t<template #contentList>\n\t\t\t<TopPopupListItem\n\t\t\t\tv-for=\"item of menu.itemsForShow.value\"\n\t\t\t\t:key=\"item.id ?? undefined\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'top-active': !Array.isArray(model) && !multiselect && model.id === item.id && model.name === item.name,\n\t\t\t\t\t'top-selector2_item-all':item.id === ITEM_ID_ALL,\n\t\t\t\t\t'top-selector2_item-new':item.id === ITEM_ID_NEW,\n\t\t\t\t}\"\n\t\t\t\t:=\"item.listItemProps\"\n\t\t\t\t:closeByClick=\"closeAfterAppend ?? (!multiselect || Core.state.isMobile)\"\n\t\t\t\t@click=\"menu.selectItem(item)\"\n\t\t\t>\n\t\t\t\t<slot\n\t\t\t\t\tv-if=\"$slots.item\"\n\t\t\t\t\tname=\"item\"\n\t\t\t\t\t:item\n\t\t\t\t></slot>\n\n\t\t\t\t<template\n\t\t\t\t\tv-else\n\t\t\t\t>\n\t\t\t\t\t{{ item.name }}\n\t\t\t\t</template>\n\t\t\t</TopPopupListItem>\n\n\t\t\t<!-- Элементов для отображения нет -->\n\t\t\t<template v-if=\"!menu.itemsForShow.value.length && !menu.genIsShort()\">\n\t\t\t\t<TopPopupListItem type=\"regular\">\n\t\t\t\t\t<template v-if=\"!api.isLoading.value || api.countLoading.value\">\n\t\t\t\t\t\t{{ $i18n.Common.No_results }}\n\t\t\t\t\t</template>\n\n\t\t\t\t\t<!-- Индикатор первичной загрузки -->\n\t\t\t\t\t<TopPreloader\n\t\t\t\t\t\tv-else\n\t\t\t\t\t\ttype=\"circles\"\n\t\t\t\t\t/>\n\t\t\t\t</TopPopupListItem>\n\t\t\t</template>\n\n\t\t\t<!-- Индикатор повторной загрузки -->\n\t\t\t<TopLoadbar v-if=\"!!api.countLoading.value && api.isLoading.value && searchTypeLocal === 'inline'\"/>\n\t\t</template>\n\t</TopPopup>\n</template>\n\n<style>\n.top-selector2 {\n\twidth: 180px;\n}\n\n.top-selector2::placeholder,\n.top-selector2_placeholder {\n\tcolor: var(--color-text-2);\n}\n\n.top-selector2_placeholder {\n\tpadding-left: var(--top-padding-1);\n}\n\n.top-selector2.top-as-input {\n\tpadding: var(--top-padding-1) var(--top-forms-padding);\n}\n\n.top-selector2.top-selector2-multiselect {\n\twidth: auto;\n\tpadding: var(--top-padding-1);\n\tflex-grow: 1;\n}\n\n.top-selector2.top-active {\n\t--top-forms-border-color: var(--top-forms-border-color-hover);\n}\n\n.top-selector2_searchWidget {\n\tdisplay: flex;\n\tgap: var(--top-gap-2);\n}\n\n.top-selector2_activeItems {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--top-padding-1);\n\tmax-width: 100%;\n}\n\n.top-selector2_activeName {\n\twhite-space: nowrap;\n}\n\n.top-changer-selector {\n\twidth: auto;\n\tpadding: var(--top-padding-1);\n\tmargin: calc(0px - var(--top-padding-1));\n\ttransform: translateX(0);\n}\n\n.top-selector2.top-button {\n\tjustify-content: start;\n}\n\n.top-selector2.top-input_input ~ .top-changer-selector {\n\ttransform: translateX(-52px);\n}\n\n.top-selector2.top-as-selector {\n\tpadding-right: calc(var(--top-selector-arrow-width) + var(--top-padding-2));\n}\n</style>\n"],"names":["el","vue","props","model","itemIsActive","item","index","modelNew","onWheel","event","delta","scrollIntoView","isSmooth","leftMargin","elBtn","gap","rightMargin","leftMarginParent","rightMarginParent","scrollLeft","$event","select","_cache","selectAll","__props","_ctx","cacheByMethod","clearCache","apiPath","genCacheKey","api","getCache","cacheKey","data","items","isLoading","countLoading","nextOffset","cache","res","indexWithError","load","append","apiSetSearchParams","searchText","callAPI","loadDebounce","forms","newSearchText","minLength","ITEM_ID_ALL","ITEM_ID_NEW","modelValue","itemSelected","apiSetSearchParamsFilter","search","fieldName","filters","filter","field","localItems","multiselect","useAllItem","itemAll","localItems2","itemsForShow","genItemsForShow","searchStringInvertKeyboard","utils_keyboard","searchString","itemTitleCategory","itemsCategory","items2","flushCategory","name","searchStringNormalized","itemNew","isSelected","selectItem","emits","resetSearch","fieldsForWatch","recalcItemsForShow","genIsShort","selectableItems","itemI","__expose","resetAPICache","menu","getPopup","searchTypeLocal","component","popupRef","placeholder","onOpenerKeydown","e","symbolPressed","onClickChanger","onScrollContentList","onOpen","onClose","_hoisted_1","popupHint_vue_vue_type_style_index_0_lang","_hoisted_4"],"mappings":"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"}
|
package/formsExt/formsExt.amd.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
define(["require","exports","vue","../.chunks/forms-B_v2vU59.amd","../.chunks/policy.vue_vue_type_style_index_0_lang-
|
|
1
|
+
define(["require","exports","vue","../.chunks/forms-B_v2vU59.amd","../.chunks/policy.vue_vue_type_style_index_0_lang-dgZjCI-7.amd"],(function(z,d,e,m,f){"use strict";if(typeof e>"u")var e=window.Vue;const y={class:"top-editArea_footer"},k=e.defineComponent({__name:"editArea",props:{defaultValue:{default:""},title:{},cancelText:{default:"Cancel"},submitText:{default:"Send"},closeText:{default:"Close"},isFocused:{type:Boolean},forceShowCloseBtn:{type:Boolean},attachToKeyboard:{type:Boolean},modelValue:{},name:{},placeholder:{},styling:{},rows:{},minHeight:{},expandable:{type:Boolean,default:!0},disabled:{type:Boolean},readonly:{type:Boolean},isError:{type:Boolean},hint:{},maxLength:{}},emits:["submit","close","clickOnTitle"],setup(t,{emit:o}){const l=t,n=o,i=e.ref(l.defaultValue),s=e.ref(l.isFocused),r=e.computed(()=>i.value!==l.defaultValue),a=p=>{n("submit",p),i.value=l.defaultValue},c=()=>{if(l.forceShowCloseBtn&&!r.value){n("close");return}i.value=l.defaultValue},N=()=>{l.attachToKeyboard&&n("clickOnTitle")};return(p,u)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass({"top-editArea":!0,"top-editArea-attachedToKeyboard":t.attachToKeyboard})},[t.title||p.$slots.caption?(e.openBlock(),e.createElementBlock("div",{key:0,class:"top-editArea_caption",onClick:u[0]||(u[0]=v=>N())},[e.renderSlot(p.$slots,"caption",{},()=>[e.createTextVNode(e.toDisplayString(t.title),1)])])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass({"top-editArea_form":!0,"top-forms-focusable":!0,"top-as-input":!0,"top-error":t.isError,"top-focus":s.value})},[e.createVNode(m._sfc_main$3,{modelValue:i.value,"onUpdate:modelValue":u[1]||(u[1]=v=>i.value=v),name:t.name,placeholder:t.placeholder,rows:t.rows,minHeight:t.minHeight,expandable:t.expandable,disabled:t.disabled,readonly:t.readonly,isError:t.isError,hint:t.hint,class:"top-editArea_element",onFocus:u[2]||(u[2]=()=>s.value=!0),onBlur:u[3]||(u[3]=()=>s.value=!1),onKeyup:[e.withKeys(c,["esc"]),u[4]||(u[4]=e.withKeys(e.withModifiers(v=>a(i.value),["ctrl"]),["enter"]))]},null,8,["modelValue","name","placeholder","rows","minHeight","expandable","disabled","readonly","isError","hint"]),e.createElementVNode("div",y,[r.value||t.forceShowCloseBtn?(e.openBlock(),e.createBlock(m._sfc_main$1,{key:0,icon:p.$core.state.isMobile?"":"",class:"top-editArea_button",color:"theme",styling:"soft",onClick:c},e.createSlots({_:2},[p.$core.state.isMobile?void 0:{name:"default",fn:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.cancelText),1)]),key:"0"}]),1032,["icon"])):e.createCommentVNode("",!0),r.value?(e.openBlock(),e.createBlock(m._sfc_main$1,{key:1,class:"top-editArea_button",icon:p.$core.state.isMobile?"":"",onClick:u[5]||(u[5]=v=>a(i.value))},e.createSlots({_:2},[p.$core.state.isMobile?void 0:{name:"default",fn:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.submitText),1)]),key:"0"}]),1032,["icon"])):e.createCommentVNode("",!0)])],2)],2))}}),B={class:"top-editInput"},h=e.defineComponent({__name:"editInput",props:{modelValue:{},input:{},button:{}},emits:["update:modelValue"],setup(t,{emit:o}){const l=t,n=e.ref(l.modelValue);e.watch(()=>l.modelValue,()=>{n.value=l.modelValue});const i=o,s=()=>{i("update:modelValue",n.value)};return(r,a)=>(e.openBlock(),e.createElementBlock("div",B,[e.createVNode(m._sfc_main,e.mergeProps(t.input,{onKeydownCapture:a[0]||(a[0]=e.withKeys(e.withModifiers(c=>n.value=t.modelValue,["stop"]),["esc"])),onKeydown:e.withKeys(e.withModifiers(s,["stop"]),["enter"]),modelValue:n.value,"onUpdate:modelValue":a[1]||(a[1]=c=>n.value=c)}),e.createSlots({_:2},[r.$slots.caption?{name:"caption",fn:e.withCtx(()=>[e.renderSlot(r.$slots,"caption")]),key:"0"}:void 0]),1040,["onKeydown","modelValue"]),n.value!==t.modelValue?(e.openBlock(),e.createBlock(m._sfc_main$1,e.mergeProps({key:0,icon:"",styling:"soft"},t.button,{onClick:s}),null,16)):e.createCommentVNode("",!0)]))}}),V=e.defineComponent({__name:"optionGroup",props:e.mergeModels({modelValue:{},items:{},size:{default:"s"},showIndicator:{type:Boolean},isError:{type:Boolean}},{modelValue:{required:!0},modelModifiers:{}}),emits:["update:modelValue"],setup(t){const o=e.useModel(t,"modelValue"),l=t,n=e.ref(null);e.watch(o,()=>{const s=l.items.map(r=>r.value);Array.isArray(o.value)?o.value.find(a=>!s.includes(a))&&(o.value=o.value.filter(a=>s.includes(a))):s.includes(o.value)||(o.value=s[0]??""),n.value?.querySelector(".radioGroup_item-selected")?.scrollIntoView()},{immediate:!0});const i="optionGroup-"+Math.random();return(s,r)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"elRef",ref:n,class:e.normalizeClass({"top-optionGroup":!0,["top-optionGroup-showIndicator_"+Number(t.showIndicator)]:!0,"top-scrollBarXHidding":!0,["top-size_"+t.size]:!!t.size,"top-error":t.isError})},[Array.isArray(o.value)?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(t.items,a=>(e.openBlock(),e.createBlock(m._sfc_main$4,{class:e.normalizeClass({"top-optionGroup_item-selected":o.value.includes(a.value),"top-optionGroup_item":!0}),modelValue:o.value,"onUpdate:modelValue":r[0]||(r[0]=c=>o.value=c),value:a.value,title:a.title,disabled:a.disabled,isError:t.isError,"data-top-icon":a.icon},e.createSlots({_:2},[a.label?{name:"default",fn:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a.label),1)]),key:"0"}:void 0]),1032,["class","modelValue","value","title","disabled","isError","data-top-icon"]))),256)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(t.items,a=>(e.openBlock(),e.createBlock(m._sfc_main$5,{class:e.normalizeClass({"top-optionGroup_item-selected":a.value===o.value,"top-optionGroup_item":!0}),modelValue:o.value,"onUpdate:modelValue":r[1]||(r[1]=c=>o.value=c),name:i,value:a.value,title:a.title,disabled:a.disabled,isError:t.isError,"data-top-icon":a.icon},e.createSlots({_:2},[a.label?{name:"default",fn:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a.label),1)]),key:"0"}:void 0]),1032,["class","modelValue","value","title","disabled","isError","data-top-icon"]))),256))],2))}}),b=e.defineComponent({__name:"radioGroup",props:e.mergeModels({modelValue:{},items:{},size:{},showIndicator:{type:Boolean},isError:{type:Boolean}},{modelValue:{required:!0},modelModifiers:{}}),emits:["update:modelValue"],setup(t){const o=e.useModel(t,"modelValue");return(l,n)=>(e.openBlock(),e.createBlock(V,{class:"top-radioGroup",modelValue:o.value,"onUpdate:modelValue":n[0]||(n[0]=i=>o.value=i),items:l.$props.items,size:l.$props.size,showIndicator:l.$props.showIndicator,isError:l.$props.isError},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default")]),_:3},8,["modelValue","items","size","showIndicator","isError"]))}}),$=e.defineComponent({__name:"checkboxGroup",props:e.mergeModels({modelValue:{},items:{},size:{},showIndicator:{type:Boolean},isError:{type:Boolean}},{modelValue:{required:!0},modelModifiers:{}}),emits:["update:modelValue"],setup(t){const o=e.useModel(t,"modelValue");return(l,n)=>(e.openBlock(),e.createBlock(V,{class:"top-checkboxGroup",modelValue:o.value,"onUpdate:modelValue":n[0]||(n[0]=i=>o.value=i),items:l.$props.items,size:l.$props.size,showIndicator:l.$props.showIndicator,isError:l.$props.isError},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default")]),_:3},8,["modelValue","items","size","showIndicator","isError"]))}}),E=["data-top-icon"],w={class:"top-info_text"},C={key:0,class:"top-info_value"},T=e.defineComponent({__name:"info",props:{icon:{},styling:{default:"default"},size:{default:"default"}},setup(t){return(o,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass({"top-info":!0,["top-size_"+t.size]:!0,["top-info-styling_"+t.styling]:!0}),"data-top-icon":t.icon},[e.createElementVNode("div",w,[e.renderSlot(o.$slots,"default")]),o.$slots.additional?(e.openBlock(),e.createElementBlock("span",C,[e.renderSlot(o.$slots,"additional")])):e.createCommentVNode("",!0)],10,E))}}),S={key:0,class:"top-policy"},g={class:"top-policy_title"},I=["innerHTML"],M=e.defineComponent({__name:"policy",props:{title:{},description:{},acceptText:{}},emits:["accept"],setup(t,{emit:o}){const l=o,n=e.ref(!0),i=()=>{n.value=!1,l("accept")};return(s,r)=>n.value?(e.openBlock(),e.createElementBlock("div",S,[e.createElementVNode("div",g,e.toDisplayString(t.title),1),e.createElementVNode("div",{class:"top-policy_description",innerHTML:t.description},null,8,I),e.createVNode(e.unref(m._sfc_main$1),{size:"m",onClick:i},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.acceptText),1)]),_:1})])):e.createCommentVNode("",!0)}});d.ITEM_ID_ALL=f.ITEM_ID_ALL,d.ITEM_ID_NEW=f.ITEM_ID_NEW,d.TopMenu=f._sfc_main$1,d.TopSelector2=f._sfc_main,d.apiSetSearchParamsFilter=f.apiSetSearchParamsFilter,d.TopCheckboxGroup=$,d.TopEditArea=k,d.TopEditInput=h,d.TopInfo=T,d.TopPolicy=M,d.TopRadioGroup=b,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}));
|
|
2
2
|
//# sourceMappingURL=formsExt.amd.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"formsExt.amd.js","sources":["../../src/components/formsExt/editArea/editArea.vue","../../src/components/formsExt/editInput/editInput.vue","../../src/components/formsExt/libs/optionGroup/optionGroup.vue","../../src/components/formsExt/radioGroup/radioGroup.vue","../../src/components/formsExt/checkboxGroup/checkboxGroup.vue","../../src/components/formsExt/info/info.vue","../../src/components/formsExt/policy/policy.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport Button from '@/components/forms/button/button.vue';\nimport type { Emits, Props, Slots } from './types';\nimport Textarea from '@/components/forms/textarea/textarea.vue';\n\nconst props = withDefaults(defineProps<Props>(), {\n\tdefaultValue: '',\n\tcancelText: 'Cancel',\n\tsubmitText: 'Send',\n\tcloseText: 'Close',\n\texpandable: true,\n});\n\ndefineSlots<Slots>();\nconst emit = defineEmits<Emits>();\n\nconst localValue = ref(props.defaultValue);\n\nconst isFocused = ref(props.isFocused);\n\nconst isChanged = computed(() => localValue.value !== props.defaultValue);\n\nconst submit = (value: string) => {\n\temit('submit', value);\n\n\tlocalValue.value = props.defaultValue;\n};\n\nconst cancel = () => {\n\tif (props.forceShowCloseBtn && !isChanged.value) {\n\t\temit('close');\n\n\t\treturn;\n\t}\n\n\tlocalValue.value = props.defaultValue;\n};\n\nconst clickOnTitle = () => {\n\tif (props.attachToKeyboard) emit('clickOnTitle');\n};\n</script>\n\n<template>\n\t<div\n\t\t:class=\"{\n\t\t\t'top-editArea': true,\n\t\t\t'top-editArea-attachedToKeyboard': attachToKeyboard,\n\t\t}\"\n\t>\n\t\t<div\n\t\t\tv-if=\"title || $slots.caption\"\n\t\t\tclass=\"top-editArea_caption\"\n\t\t\t@click=\"clickOnTitle()\"\n\t\t>\n\t\t\t<slot name=\"caption\">\n\t\t\t\t{{ title }}\n\t\t\t</slot>\n\t\t</div>\n\n\t\t<div\n\t\t\t:class=\"{\n\t\t\t\t'top-editArea_form': true,\n\t\t\t\t'top-forms-focusable': true,\n\t\t\t\t'top-as-input': true,\n\t\t\t\t'top-error': isError,\n\t\t\t\t'top-focus': isFocused,\n\t\t\t}\"\n\t\t>\n\t\t\t<Textarea\n\t\t\t\tv-model=\"localValue\"\n\t\t\t\t:name=\"name\"\n\t\t\t\t:placeholder=\"placeholder\"\n\t\t\t\t:rows=\"rows\"\n\t\t\t\t:minHeight=\"minHeight\"\n\t\t\t\t:expandable=\"expandable\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:readonly=\"readonly\"\n\t\t\t\t:isError=\"isError\"\n\t\t\t\t:hint=\"hint\"\n\t\t\t\tclass=\"top-editArea_element\"\n\t\t\t\t@focus=\"() => isFocused = true\"\n\t\t\t\t@blur=\"() => isFocused = false\"\n\t\t\t\t@keyup.esc=\"cancel\"\n\t\t\t\t@keyup.ctrl.enter=\"submit(localValue)\"\n\t\t\t/>\n\n\t\t\t<div class=\"top-editArea_footer\">\n\t\t\t\t<Button\n\t\t\t\t\tv-if=\"isChanged || forceShowCloseBtn\"\n\t\t\t\t\t:icon=\"$core.state.isMobile ? '': ''\"\n\t\t\t\t\tclass=\"top-editArea_button\"\n\t\t\t\t\tcolor=\"theme\"\n\t\t\t\t\tstyling=\"soft\"\n\t\t\t\t\t@click=\"cancel\"\n\t\t\t\t>\n\t\t\t\t\t<template\n\t\t\t\t\t\t#default\n\t\t\t\t\t\tv-if=\"!$core.state.isMobile\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{{ cancelText }}\n\t\t\t\t\t</template>\n\t\t\t\t</Button>\n\n\t\t\t\t<Button\n\t\t\t\t\tclass=\"top-editArea_button\"\n\t\t\t\t\tv-if=\"isChanged\"\n\t\t\t\t\t:icon=\"$core.state.isMobile ? '': ''\"\n\t\t\t\t\t@click=\"submit(localValue)\"\n\t\t\t\t>\n\t\t\t\t\t<template\n\t\t\t\t\t\t#default\n\t\t\t\t\t\tv-if=\"!$core.state.isMobile\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{{ submitText }}\n\t\t\t\t\t</template>\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</template>\n\n<style>\n.top-editArea {\n\t--top-editArea-bottom: env(keyboard-inset-height, 0px);\n\t--top-editArea-offset-bottom: 0px;\n\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 6px;\n}\n\n.top-editArea_caption {\n\tfont-size: 12px;\n}\n\n.top-editArea_form {\n\tflex-direction: column;\n}\n\n/* textarea в EditArea */\n.top-textarea {\n\twidth: 100%;\n}\n\n.top-editArea_element.top-textarea_textarea {\n\t--top-forms-border-width: 0px;\n\n\toutline: none;\n\tanimation: none;\n}\n\n/* footer */\n.top-editArea_footer {\n\tpadding: var(--top-forms-padding);\n\tdisplay: flex;\n\tmin-height: 32px;\n\talign-self: flex-end;\n\tjustify-content: flex-end;\n\tgap: var(--top-forms-padding);\n}\n\n/* attachedToKeyboard */\n.top-editArea-attachedToKeyboard {\n\tbackground: var(--top-forms-background-color);\n\tposition: fixed;\n\tbottom: calc(var(--top-editArea-offset-bottom) + var(--top-editArea-bottom));\n\tright: 0;\n\tleft: 0;\n\tz-index: 2;\n\tgap: 0;\n\ttransition: bottom var(--transition-fast);\n}\n\n.top-editArea-attachedToKeyboard .top-editArea_form {\n\tborder-radius: 0;\n\tborder: none;\n\tborder-top: 1px solid var(--top-forms-border-color);\n}\n\n.top-editArea-attachedToKeyboard .top-editArea_title {\n\tcursor: pointer;\n\tborder-top: 1px solid var(--color-line-2-opacity);\n\tpadding: var(--top-forms-padding);\n}\n\n.top-editArea-attachedToKeyboard .top-editArea_footer > [data-top-icon] {\n\tborder-radius: 100%;\n}\n\n@media screen and (max-width: 900px) {\n\t.top-editArea_form {\n\t\tflex-direction: row;\n\t}\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ref, toRef, watch } from 'vue';\nimport type { Emits, Props } from './types';\nimport TopInput from '@/components/forms/input/input.vue';\nimport TopButton from '@/components/forms/button/button.vue';\n\nconst props = defineProps<Props>();\n\nconst intermediateValue = ref(props.modelValue);\n\nwatch(toRef(props.modelValue), () => {\n\tintermediateValue.value = props.modelValue;\n});\n\nconst emit = defineEmits<Emits>();\n\nconst submit = () => {\n\temit('update:modelValue', intermediateValue.value);\n};\n</script>\n\n<template>\n\t<div class=\"top-editInput\">\n\t\t<TopInput\n\t\t\t:=\"input\"\n\t\t\t@keydown.esc.capture.stop=\"intermediateValue = modelValue\"\n\t\t\t@keydown.enter.stop=\"submit\"\n\t\t\tv-model=\"intermediateValue\"\n\t\t>\n\t\t\t<template #caption v-if=\"$slots.caption\">\n\t\t\t\t<slot name=\"caption\"></slot>\n\t\t\t</template>\n\t\t</TopInput>\n\n\t\t<TopButton\n\t\t\tv-if=\"intermediateValue !== modelValue\"\n\t\t\ticon=\"\"\n\t\t\tstyling=\"soft\"\n\t\t\t:=\"button\"\n\t\t\t@click=\"submit\"\n\t\t/>\n\t</div>\n</template>\n\n<style>\n.top-editInput {\n\twidth: 220px;\n\tflex-grow: 1;\n\tdisplay: flex;\n\talign-items: flex-end;\n\tgap: var(--top-gap-1);\n}\n\n.top-editInput .top-input {\n\twidth: unset;\n\tflex-grow: 1;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ref, watch } from 'vue';\nimport type { Props } from './types';\nimport TopCheckbox from '@/components/forms/checkbox/checkbox.vue';\nimport TopRadio from '@/components/forms/radio/radio.vue';\n\nconst model = defineModel<Props['modelValue']>({\n\trequired: true,\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n\tsize: 's',\n});\n\nconst elRef = ref<HTMLElement | null>(null);\n\nwatch(model, () => {\n\tconst valuesAvailable = props.items.map(item => item.value);\n\n\tif (Array.isArray(model.value)) {\n\t\t// есть ли неподдерживаемые значения\n\t\tconst valueIsWrong = model.value.find((value) => {\n\t\t\treturn !valuesAvailable.includes(value);\n\t\t});\n\n\t\tif (valueIsWrong) {\n\t\t\t// оставить только поддерживаемые значения\n\t\t\tmodel.value = model.value.filter((value) => {\n\t\t\t\treturn valuesAvailable.includes(value);\n\t\t\t});\n\t\t}\n\t} else {\n\t\tif (!valuesAvailable.includes(model.value)) {\n\t\t\tmodel.value = valuesAvailable[0] ?? '';\n\t\t}\n\t}\n\n\telRef.value?.querySelector('.radioGroup_item-selected')?.scrollIntoView();\n}, { immediate: true });\n\nconst name = 'optionGroup-' + Math.random();\n</script>\n\n<template>\n\t<div\n\t\tref=\"elRef\"\n\t\t:class=\"{\n\t\t\t['top-optionGroup']: true,\n\t\t\t['top-optionGroup-showIndicator_' + Number(showIndicator)]: true,\n\t\t\t['top-scrollBarXHidding']: true,\n\t\t\t['top-size_' + size]: !!size,\n\t\t\t['top-error']: isError,\n\t\t}\"\n\t>\n\t\t<template v-if=\"Array.isArray(model)\">\n\t\t\t<TopCheckbox\n\t\t\t\t:class=\"{\n\t\t\t\t\t['top-optionGroup_item-selected']: model.includes(item.value),\n\t\t\t\t\t['top-optionGroup_item']: true,\n\t\t\t\t}\"\n\t\t\t\tv-for=\"item of items\"\n\t\t\t\tv-model=\"model\"\n\t\t\t\t:value=\"item.value\"\n\t\t\t\t:title=\"item.title\"\n\t\t\t\t:disabled=\"item.disabled\"\n\t\t\t\t:isError\n\t\t\t\t:data-top-icon=\"item.icon\"\n\t\t\t>\n\t\t\t\t<template #default v-if=\"item.label\">\n\t\t\t\t\t{{ item.label }}\n\t\t\t\t</template>\n\t\t\t</TopCheckbox>\n\t\t</template>\n\n\t\t<template v-else>\n\t\t\t<TopRadio\n\t\t\t\t:class=\"{\n\t\t\t\t\t['top-optionGroup_item-selected']: item.value === model,\n\t\t\t\t\t['top-optionGroup_item']: true,\n\t\t\t\t}\"\n\t\t\t\tv-for=\"item of items\"\n\t\t\t\tv-model=\"model\"\n\t\t\t\t:name\n\t\t\t\t:value=\"item.value\"\n\t\t\t\t:title=\"item.title\"\n\t\t\t\t:disabled=\"item.disabled\"\n\t\t\t\t:isError\n\t\t\t\t:data-top-icon=\"item.icon\"\n\t\t\t>\n\t\t\t\t<template #default v-if=\"item.label\">\n\t\t\t\t\t{{ item.label }}\n\t\t\t\t</template>\n\t\t\t</TopRadio>\n\t\t</template>\n\t</div>\n</template>\n\n<style>\n.top-optionGroup {\n\tuser-select: none;\n\tbox-sizing: border-box;\n\tborder-radius: 8px;\n\tbackground-color: var(--color-layout-middle);\n\theight: var(--top-forms-base-height);\n\tpadding: 2px;\n\tgap: 2px;\n\tdisplay: flex;\n\talign-items: flex-start;\n}\n\n.top-optionGroup_item {\n\tcursor: pointer;\n\tbox-sizing: border-box;\n\tborder-radius: 6px;\n\theight: calc(var(--top-forms-base-height) - 4px);\n\tpadding: 1px var(--top-padding-2);\n\tcolor: var(--color-text-2);\n\tfont-weight: 400;\n\twhite-space: nowrap;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-grow: 1;\n\tgap: var(--top-gap-1);\n}\n\n.top-optionGroup_item:hover {\n\tbackground-color: var(--color-layout-front-1);\n\tbox-shadow: 0px 4px 32px 0px rgba(4, 9, 84, 0.10), 0px 0px 4px 0px rgba(4, 9, 84, 0.08);\n}\n\n.top-optionGroup_item-selected {\n\tcolor: var(--color-text-1);\n\tbackground-color: var(--color-bg-lightning-1);\n\tbox-shadow: 0px 4px 32px 0px rgba(4, 9, 84, 0.10), 0px 0px 4px 0px rgba(4, 9, 84, 0.08);\n}\n\n.top-optionGroup_item > .top-forms-optionLabel {\n\tflex-grow: 0;\n}\n\n/* indicator */\n.top-optionGroup-showIndicator_0 > .top-optionGroup_item {\n\tjustify-content: center;\n}\n\n.top-optionGroup-showIndicator_0 > .top-optionGroup_item:has(:focus-visible) {\n\toutline: 2px solid var(--color-bg-primary-2);\n\toutline-offset: -1px;\n}\n\n.top-optionGroup-showIndicator_1 > .top-optionGroup_item {\n\tpadding: 1px 3px;\n\tjustify-content: flex-start;\n}\n\n.top-optionGroup-showIndicator_0 > .top-optionGroup_item > .top-forms-option {\n\topacity: 0;\n\twidth: 0;\n\theight: 0;\n\tposition: absolute;\n}\n\n.top-optionGroup_item > .top-forms-option {\n\torder: -1;\n}\n</style>\n","<script setup lang=\"ts\">\nimport OptionGroup from '../libs/optionGroup/optionGroup.vue';\n\nimport type { Props } from './types';\n\nconst model = defineModel<Props['modelValue']>({\n\trequired: true,\n});\n\ndefineProps<Props>();\n</script>\n\n<template>\n\t<OptionGroup\n\t\tclass=\"top-radioGroup\"\n\t\tv-model=\"model\"\n\t\t:items=\"$props.items\"\n\t\t:size=\"$props.size\"\n\t\t:showIndicator=\"$props.showIndicator\"\n\t\t:isError=\"$props.isError\"\n\t>\n\t\t<slot/>\n\t</OptionGroup>\n</template>\n","<script setup lang=\"ts\">\nimport OptionGroup from '../libs/optionGroup/optionGroup.vue';\n\nimport type { Props } from './types';\n\nconst model = defineModel<Props['modelValue']>({\n\trequired: true,\n});\n\ndefineProps<Props>();\n</script>\n\n<template>\n\t<OptionGroup\n\t\tclass=\"top-checkboxGroup\"\n\t\tv-model=\"model\"\n\t\t:items=\"$props.items\"\n\t\t:size=\"$props.size\"\n\t\t:showIndicator=\"$props.showIndicator\"\n\t\t:isError=\"$props.isError\"\n\t>\n\t\t<slot/>\n\t</OptionGroup>\n</template>\n","<script lang=\"ts\" setup>\nimport type { Props, Slots } from './types';\n\nwithDefaults(defineProps<Props>(), {\n\tstyling: 'default',\n\tsize: 'default',\n});\n\ndefineSlots<Slots>();\n</script>\n\n<template>\n\t<div\n\t\t:class=\"{\n\t\t\t['top-info']: true,\n\t\t\t['top-size_' + size]: true,\n\t\t\t['top-info-styling_' + styling]: true,\n\t\t}\"\n\t\t:data-top-icon=\"icon\"\n\t>\n\t\t<div class=\"top-info_text\">\n\t\t\t<slot></slot>\n\t\t</div>\n\n\t\t<span v-if=\"$slots.additional\" class=\"top-info_value\">\n\t\t\t<slot name=\"additional\"></slot>\n\t\t</span>\n\t</div>\n</template>\n\n<style>\n.top-info {\n\t--top-icon-width: var(--top-icon-size);\n\n\tborder-radius: var(--top-forms-radius);\n\tbox-sizing: border-box;\n\tmin-height: var(--top-forms-base-height);\n\tpadding: var(--top-padding-1) var(--top-padding-2);\n\tflex-grow: 5;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: var(--top-gap-2);\n}\n\n.top-info_text {\n\tflex-grow: 1;\n}\n\n.top-info_value {\n\tfont-weight: bold;\n}\n\n/* size */\n.top-info.top-size_default {\n\tborder-radius: var(--top-radius-3);\n\tpadding: var(--top-padding-4);\n}\n\n/* styling */\n.top-info-styling_default {\n\t--top-icon-color: var(--color-text-2);\n\n\tbackground: var(--color-layer-1);\n}\n\n.top-info-styling_info {\n\t--top-icon-color: var(--color-text-primary);\n\n\tbackground: var(--color-layer-primary-1);\n}\n\n.top-info-styling_warning {\n\t--top-icon-color: var(--color-text-warning);\n\n\tbackground: var(--color-layer-warning-1);\n}\n\n.top-info-styling_negative {\n\t--top-icon-color: var(--color-text-negative);\n\n\tbackground: var(--color-layer-negative-1);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { TopButton } from '@/components/forms/forms';\nimport type { Emits, Props } from '@/components/formsExt/policy/types';\n\ndefineProps<Props>();\nconst emits = defineEmits<Emits>();\n\nconst isVisible = ref(true);\n\nconst onAccept = () => {\n\tisVisible.value = false;\n\n\temits('accept');\n};\n</script>\n\n<template>\n\t<div\n\t\tv-if=\"isVisible\"\n\t\tclass=\"top-policy\"\n\t>\n\t\t<div class=\"top-policy_title\">\n\t\t\t{{ title }}\n\t\t</div>\n\n\t\t<div\n\t\t\tclass=\"top-policy_description\"\n\t\t\tv-html=\"description\"\n\t\t></div>\n\n\t\t<TopButton\n\t\t\tsize=\"m\"\n\t\t\t@click=\"onAccept\"\n\t\t>\n\t\t\t{{ acceptText }}\n\t\t</TopButton>\n\t</div>\n</template>\n\n<style>\n.top-policy {\n\tbox-sizing: border-box;\n\tbox-shadow: var(--top-shadow-b);\n\tborder-radius: var(--top-radius-4);\n\tbackground: var(--color-bg-lightning-1);\n\twidth: 600px;\n\tpadding: var(--top-padding-4);\n\tposition: fixed;\n\tright: var(--top-gap-10);\n\tbottom: var(--top-gap-10);\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: var(--top-gap-4);\n\tz-index: 10000;\n}\n\n.top-policy_title {\n\tfont-size: 24px;\n\tfont-weight: 700;\n}\n\n.top-policy_description {\n\tfont-size: 14px;\n}\n\n@media screen and (max-width: 900px) {\n\t.top-policy {\n\t\twidth: 100%;\n\t\tright: 0;\n\t\tbottom: calc(var(--top-gap-5) + var(--toolbar-height, 0px));\n\t}\n}\n</style>\n"],"names":["isChanged","vue","localValue","props","submit","value","emit","_cache","$event","clickOnTitle","__props","isFocused","cancel","forms","_ctx","intermediateValue","elRef","model","valuesAvailable","item","name","isVisible","_hoisted_2","_hoisted_3","onAccept"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"formsExt.amd.js","sources":["../../src/components/formsExt/editArea/editArea.vue","../../src/components/formsExt/editInput/editInput.vue","../../src/components/formsExt/libs/optionGroup/optionGroup.vue","../../src/components/formsExt/radioGroup/radioGroup.vue","../../src/components/formsExt/checkboxGroup/checkboxGroup.vue","../../src/components/formsExt/info/info.vue","../../src/components/formsExt/policy/policy.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport Button from '@/components/forms/button/button.vue';\nimport type { Emits, Props, Slots } from './types';\nimport Textarea from '@/components/forms/textarea/textarea.vue';\n\nconst props = withDefaults(defineProps<Props>(), {\n\tdefaultValue: '',\n\tcancelText: 'Cancel',\n\tsubmitText: 'Send',\n\tcloseText: 'Close',\n\texpandable: true,\n});\n\ndefineSlots<Slots>();\nconst emit = defineEmits<Emits>();\n\nconst localValue = ref(props.defaultValue);\n\nconst isFocused = ref(props.isFocused);\n\nconst isChanged = computed(() => localValue.value !== props.defaultValue);\n\nconst submit = (value: string) => {\n\temit('submit', value);\n\n\tlocalValue.value = props.defaultValue;\n};\n\nconst cancel = () => {\n\tif (props.forceShowCloseBtn && !isChanged.value) {\n\t\temit('close');\n\n\t\treturn;\n\t}\n\n\tlocalValue.value = props.defaultValue;\n};\n\nconst clickOnTitle = () => {\n\tif (props.attachToKeyboard) emit('clickOnTitle');\n};\n</script>\n\n<template>\n\t<div\n\t\t:class=\"{\n\t\t\t'top-editArea': true,\n\t\t\t'top-editArea-attachedToKeyboard': attachToKeyboard,\n\t\t}\"\n\t>\n\t\t<div\n\t\t\tv-if=\"title || $slots.caption\"\n\t\t\tclass=\"top-editArea_caption\"\n\t\t\t@click=\"clickOnTitle()\"\n\t\t>\n\t\t\t<slot name=\"caption\">\n\t\t\t\t{{ title }}\n\t\t\t</slot>\n\t\t</div>\n\n\t\t<div\n\t\t\t:class=\"{\n\t\t\t\t'top-editArea_form': true,\n\t\t\t\t'top-forms-focusable': true,\n\t\t\t\t'top-as-input': true,\n\t\t\t\t'top-error': isError,\n\t\t\t\t'top-focus': isFocused,\n\t\t\t}\"\n\t\t>\n\t\t\t<Textarea\n\t\t\t\tv-model=\"localValue\"\n\t\t\t\t:name=\"name\"\n\t\t\t\t:placeholder=\"placeholder\"\n\t\t\t\t:rows=\"rows\"\n\t\t\t\t:minHeight=\"minHeight\"\n\t\t\t\t:expandable=\"expandable\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:readonly=\"readonly\"\n\t\t\t\t:isError=\"isError\"\n\t\t\t\t:hint=\"hint\"\n\t\t\t\tclass=\"top-editArea_element\"\n\t\t\t\t@focus=\"() => isFocused = true\"\n\t\t\t\t@blur=\"() => isFocused = false\"\n\t\t\t\t@keyup.esc=\"cancel\"\n\t\t\t\t@keyup.ctrl.enter=\"submit(localValue)\"\n\t\t\t/>\n\n\t\t\t<div class=\"top-editArea_footer\">\n\t\t\t\t<Button\n\t\t\t\t\tv-if=\"isChanged || forceShowCloseBtn\"\n\t\t\t\t\t:icon=\"$core.state.isMobile ? '': ''\"\n\t\t\t\t\tclass=\"top-editArea_button\"\n\t\t\t\t\tcolor=\"theme\"\n\t\t\t\t\tstyling=\"soft\"\n\t\t\t\t\t@click=\"cancel\"\n\t\t\t\t>\n\t\t\t\t\t<template\n\t\t\t\t\t\t#default\n\t\t\t\t\t\tv-if=\"!$core.state.isMobile\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{{ cancelText }}\n\t\t\t\t\t</template>\n\t\t\t\t</Button>\n\n\t\t\t\t<Button\n\t\t\t\t\tclass=\"top-editArea_button\"\n\t\t\t\t\tv-if=\"isChanged\"\n\t\t\t\t\t:icon=\"$core.state.isMobile ? '': ''\"\n\t\t\t\t\t@click=\"submit(localValue)\"\n\t\t\t\t>\n\t\t\t\t\t<template\n\t\t\t\t\t\t#default\n\t\t\t\t\t\tv-if=\"!$core.state.isMobile\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{{ submitText }}\n\t\t\t\t\t</template>\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</template>\n\n<style>\n.top-editArea {\n\t--top-editArea-bottom: env(keyboard-inset-height, 0px);\n\t--top-editArea-offset-bottom: 0px;\n\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 6px;\n}\n\n.top-editArea_caption {\n\tfont-size: 12px;\n}\n\n.top-editArea_form {\n\tflex-direction: column;\n}\n\n/* textarea в EditArea */\n.top-textarea {\n\twidth: 100%;\n}\n\n.top-editArea_element.top-textarea_textarea {\n\t--top-forms-border-width: 0px;\n\n\toutline: none;\n\tanimation: none;\n}\n\n/* footer */\n.top-editArea_footer {\n\tpadding: var(--top-forms-padding);\n\tdisplay: flex;\n\tmin-height: 32px;\n\talign-self: flex-end;\n\tjustify-content: flex-end;\n\tgap: var(--top-forms-padding);\n}\n\n/* attachedToKeyboard */\n.top-editArea-attachedToKeyboard {\n\tbackground: var(--top-forms-background-color);\n\tposition: fixed;\n\tbottom: calc(var(--top-editArea-offset-bottom) + var(--top-editArea-bottom));\n\tright: 0;\n\tleft: 0;\n\tz-index: 2;\n\tgap: 0;\n\ttransition: bottom var(--transition-fast);\n}\n\n.top-editArea-attachedToKeyboard .top-editArea_form {\n\tborder-radius: 0;\n\tborder: none;\n\tborder-top: 1px solid var(--top-forms-border-color);\n}\n\n.top-editArea-attachedToKeyboard .top-editArea_title {\n\tcursor: pointer;\n\tborder-top: 1px solid var(--color-line-2-opacity);\n\tpadding: var(--top-forms-padding);\n}\n\n.top-editArea-attachedToKeyboard .top-editArea_footer > [data-top-icon] {\n\tborder-radius: 100%;\n}\n\n@media screen and (max-width: 900px) {\n\t.top-editArea_form {\n\t\tflex-direction: row;\n\t}\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ref, watch } from 'vue';\nimport type { Emits, Props } from './types';\nimport TopInput from '@/components/forms/input/input.vue';\nimport TopButton from '@/components/forms/button/button.vue';\n\nconst props = defineProps<Props>();\n\nconst intermediateValue = ref(props.modelValue);\n\nwatch(() => props.modelValue, () => {\n\tintermediateValue.value = props.modelValue;\n});\n\nconst emit = defineEmits<Emits>();\n\nconst submit = () => {\n\temit('update:modelValue', intermediateValue.value);\n};\n</script>\n\n<template>\n\t<div class=\"top-editInput\">\n\t\t<TopInput\n\t\t\t:=\"input\"\n\t\t\t@keydown.esc.capture.stop=\"intermediateValue = modelValue\"\n\t\t\t@keydown.enter.stop=\"submit\"\n\t\t\tv-model=\"intermediateValue\"\n\t\t>\n\t\t\t<template #caption v-if=\"$slots.caption\">\n\t\t\t\t<slot name=\"caption\"></slot>\n\t\t\t</template>\n\t\t</TopInput>\n\n\t\t<TopButton\n\t\t\tv-if=\"intermediateValue !== modelValue\"\n\t\t\ticon=\"\"\n\t\t\tstyling=\"soft\"\n\t\t\t:=\"button\"\n\t\t\t@click=\"submit\"\n\t\t/>\n\t</div>\n</template>\n\n<style>\n.top-editInput {\n\twidth: 220px;\n\tflex-grow: 1;\n\tdisplay: flex;\n\talign-items: flex-end;\n\tgap: var(--top-gap-1);\n}\n\n.top-editInput .top-input {\n\twidth: unset;\n\tflex-grow: 1;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ref, watch } from 'vue';\nimport type { Props } from './types';\nimport TopCheckbox from '@/components/forms/checkbox/checkbox.vue';\nimport TopRadio from '@/components/forms/radio/radio.vue';\n\nconst model = defineModel<Props['modelValue']>({\n\trequired: true,\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n\tsize: 's',\n});\n\nconst elRef = ref<HTMLElement | null>(null);\n\nwatch(model, () => {\n\tconst valuesAvailable = props.items.map(item => item.value);\n\n\tif (Array.isArray(model.value)) {\n\t\t// есть ли неподдерживаемые значения\n\t\tconst valueIsWrong = model.value.find((value) => {\n\t\t\treturn !valuesAvailable.includes(value);\n\t\t});\n\n\t\tif (valueIsWrong) {\n\t\t\t// оставить только поддерживаемые значения\n\t\t\tmodel.value = model.value.filter((value) => {\n\t\t\t\treturn valuesAvailable.includes(value);\n\t\t\t});\n\t\t}\n\t} else {\n\t\tif (!valuesAvailable.includes(model.value)) {\n\t\t\tmodel.value = valuesAvailable[0] ?? '';\n\t\t}\n\t}\n\n\telRef.value?.querySelector('.radioGroup_item-selected')?.scrollIntoView();\n}, { immediate: true });\n\nconst name = 'optionGroup-' + Math.random();\n</script>\n\n<template>\n\t<div\n\t\tref=\"elRef\"\n\t\t:class=\"{\n\t\t\t['top-optionGroup']: true,\n\t\t\t['top-optionGroup-showIndicator_' + Number(showIndicator)]: true,\n\t\t\t['top-scrollBarXHidding']: true,\n\t\t\t['top-size_' + size]: !!size,\n\t\t\t['top-error']: isError,\n\t\t}\"\n\t>\n\t\t<template v-if=\"Array.isArray(model)\">\n\t\t\t<TopCheckbox\n\t\t\t\t:class=\"{\n\t\t\t\t\t['top-optionGroup_item-selected']: model.includes(item.value),\n\t\t\t\t\t['top-optionGroup_item']: true,\n\t\t\t\t}\"\n\t\t\t\tv-for=\"item of items\"\n\t\t\t\tv-model=\"model\"\n\t\t\t\t:value=\"item.value\"\n\t\t\t\t:title=\"item.title\"\n\t\t\t\t:disabled=\"item.disabled\"\n\t\t\t\t:isError\n\t\t\t\t:data-top-icon=\"item.icon\"\n\t\t\t>\n\t\t\t\t<template #default v-if=\"item.label\">\n\t\t\t\t\t{{ item.label }}\n\t\t\t\t</template>\n\t\t\t</TopCheckbox>\n\t\t</template>\n\n\t\t<template v-else>\n\t\t\t<TopRadio\n\t\t\t\t:class=\"{\n\t\t\t\t\t['top-optionGroup_item-selected']: item.value === model,\n\t\t\t\t\t['top-optionGroup_item']: true,\n\t\t\t\t}\"\n\t\t\t\tv-for=\"item of items\"\n\t\t\t\tv-model=\"model\"\n\t\t\t\t:name\n\t\t\t\t:value=\"item.value\"\n\t\t\t\t:title=\"item.title\"\n\t\t\t\t:disabled=\"item.disabled\"\n\t\t\t\t:isError\n\t\t\t\t:data-top-icon=\"item.icon\"\n\t\t\t>\n\t\t\t\t<template #default v-if=\"item.label\">\n\t\t\t\t\t{{ item.label }}\n\t\t\t\t</template>\n\t\t\t</TopRadio>\n\t\t</template>\n\t</div>\n</template>\n\n<style>\n.top-optionGroup {\n\tuser-select: none;\n\tbox-sizing: border-box;\n\tborder-radius: 8px;\n\tbackground-color: var(--color-layout-middle);\n\theight: var(--top-forms-base-height);\n\tpadding: 2px;\n\tgap: 2px;\n\tdisplay: flex;\n\talign-items: flex-start;\n}\n\n.top-optionGroup_item {\n\tcursor: pointer;\n\tbox-sizing: border-box;\n\tborder-radius: 6px;\n\theight: calc(var(--top-forms-base-height) - 4px);\n\tpadding: 1px var(--top-padding-2);\n\tcolor: var(--color-text-2);\n\tfont-weight: 400;\n\twhite-space: nowrap;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-grow: 1;\n\tgap: var(--top-gap-1);\n}\n\n.top-optionGroup_item:hover {\n\tbackground-color: var(--color-layout-front-1);\n\tbox-shadow: 0px 4px 32px 0px rgba(4, 9, 84, 0.10), 0px 0px 4px 0px rgba(4, 9, 84, 0.08);\n}\n\n.top-optionGroup_item-selected {\n\tcolor: var(--color-text-1);\n\tbackground-color: var(--color-bg-lightning-1);\n\tbox-shadow: 0px 4px 32px 0px rgba(4, 9, 84, 0.10), 0px 0px 4px 0px rgba(4, 9, 84, 0.08);\n}\n\n.top-optionGroup_item > .top-forms-optionLabel {\n\tflex-grow: 0;\n}\n\n/* indicator */\n.top-optionGroup-showIndicator_0 > .top-optionGroup_item {\n\tjustify-content: center;\n}\n\n.top-optionGroup-showIndicator_0 > .top-optionGroup_item:has(:focus-visible) {\n\toutline: 2px solid var(--color-bg-primary-2);\n\toutline-offset: -1px;\n}\n\n.top-optionGroup-showIndicator_1 > .top-optionGroup_item {\n\tpadding: 1px 3px;\n\tjustify-content: flex-start;\n}\n\n.top-optionGroup-showIndicator_0 > .top-optionGroup_item > .top-forms-option {\n\topacity: 0;\n\twidth: 0;\n\theight: 0;\n\tposition: absolute;\n}\n\n.top-optionGroup_item > .top-forms-option {\n\torder: -1;\n}\n</style>\n","<script setup lang=\"ts\">\nimport OptionGroup from '../libs/optionGroup/optionGroup.vue';\n\nimport type { Props } from './types';\n\nconst model = defineModel<Props['modelValue']>({\n\trequired: true,\n});\n\ndefineProps<Props>();\n</script>\n\n<template>\n\t<OptionGroup\n\t\tclass=\"top-radioGroup\"\n\t\tv-model=\"model\"\n\t\t:items=\"$props.items\"\n\t\t:size=\"$props.size\"\n\t\t:showIndicator=\"$props.showIndicator\"\n\t\t:isError=\"$props.isError\"\n\t>\n\t\t<slot/>\n\t</OptionGroup>\n</template>\n","<script setup lang=\"ts\">\nimport OptionGroup from '../libs/optionGroup/optionGroup.vue';\n\nimport type { Props } from './types';\n\nconst model = defineModel<Props['modelValue']>({\n\trequired: true,\n});\n\ndefineProps<Props>();\n</script>\n\n<template>\n\t<OptionGroup\n\t\tclass=\"top-checkboxGroup\"\n\t\tv-model=\"model\"\n\t\t:items=\"$props.items\"\n\t\t:size=\"$props.size\"\n\t\t:showIndicator=\"$props.showIndicator\"\n\t\t:isError=\"$props.isError\"\n\t>\n\t\t<slot/>\n\t</OptionGroup>\n</template>\n","<script lang=\"ts\" setup>\nimport type { Props, Slots } from './types';\n\nwithDefaults(defineProps<Props>(), {\n\tstyling: 'default',\n\tsize: 'default',\n});\n\ndefineSlots<Slots>();\n</script>\n\n<template>\n\t<div\n\t\t:class=\"{\n\t\t\t['top-info']: true,\n\t\t\t['top-size_' + size]: true,\n\t\t\t['top-info-styling_' + styling]: true,\n\t\t}\"\n\t\t:data-top-icon=\"icon\"\n\t>\n\t\t<div class=\"top-info_text\">\n\t\t\t<slot></slot>\n\t\t</div>\n\n\t\t<span v-if=\"$slots.additional\" class=\"top-info_value\">\n\t\t\t<slot name=\"additional\"></slot>\n\t\t</span>\n\t</div>\n</template>\n\n<style>\n.top-info {\n\t--top-icon-width: var(--top-icon-size);\n\n\tborder-radius: var(--top-forms-radius);\n\tbox-sizing: border-box;\n\tmin-height: var(--top-forms-base-height);\n\tpadding: var(--top-padding-1) var(--top-padding-2);\n\tflex-grow: 5;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: var(--top-gap-2);\n}\n\n.top-info_text {\n\tflex-grow: 1;\n}\n\n.top-info_value {\n\tfont-weight: bold;\n}\n\n/* size */\n.top-info.top-size_default {\n\tborder-radius: var(--top-radius-3);\n\tpadding: var(--top-padding-4);\n}\n\n/* styling */\n.top-info-styling_default {\n\t--top-icon-color: var(--color-text-2);\n\n\tbackground: var(--color-layer-1);\n}\n\n.top-info-styling_info {\n\t--top-icon-color: var(--color-text-primary);\n\n\tbackground: var(--color-layer-primary-1);\n}\n\n.top-info-styling_warning {\n\t--top-icon-color: var(--color-text-warning);\n\n\tbackground: var(--color-layer-warning-1);\n}\n\n.top-info-styling_negative {\n\t--top-icon-color: var(--color-text-negative);\n\n\tbackground: var(--color-layer-negative-1);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { TopButton } from '@/components/forms/forms';\nimport type { Emits, Props } from '@/components/formsExt/policy/types';\n\ndefineProps<Props>();\nconst emits = defineEmits<Emits>();\n\nconst isVisible = ref(true);\n\nconst onAccept = () => {\n\tisVisible.value = false;\n\n\temits('accept');\n};\n</script>\n\n<template>\n\t<div\n\t\tv-if=\"isVisible\"\n\t\tclass=\"top-policy\"\n\t>\n\t\t<div class=\"top-policy_title\">\n\t\t\t{{ title }}\n\t\t</div>\n\n\t\t<div\n\t\t\tclass=\"top-policy_description\"\n\t\t\tv-html=\"description\"\n\t\t></div>\n\n\t\t<TopButton\n\t\t\tsize=\"m\"\n\t\t\t@click=\"onAccept\"\n\t\t>\n\t\t\t{{ acceptText }}\n\t\t</TopButton>\n\t</div>\n</template>\n\n<style>\n.top-policy {\n\tbox-sizing: border-box;\n\tbox-shadow: var(--top-shadow-b);\n\tborder-radius: var(--top-radius-4);\n\tbackground: var(--color-bg-lightning-1);\n\twidth: 600px;\n\tpadding: var(--top-padding-4);\n\tposition: fixed;\n\tright: var(--top-gap-10);\n\tbottom: var(--top-gap-10);\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: var(--top-gap-4);\n\tz-index: 10000;\n}\n\n.top-policy_title {\n\tfont-size: 24px;\n\tfont-weight: 700;\n}\n\n.top-policy_description {\n\tfont-size: 14px;\n}\n\n@media screen and (max-width: 900px) {\n\t.top-policy {\n\t\twidth: 100%;\n\t\tright: 0;\n\t\tbottom: calc(var(--top-gap-5) + var(--toolbar-height, 0px));\n\t}\n}\n</style>\n"],"names":["isChanged","vue","localValue","props","submit","value","emit","_cache","$event","clickOnTitle","__props","isFocused","cancel","forms","_ctx","intermediateValue","elRef","model","valuesAvailable","item","name","isVisible","_hoisted_2","_hoisted_3","onAccept"],"mappings":"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"}
|
package/formsExt/formsExt.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { defineComponent as y, ref as k, computed as F, createElementBlock as c, openBlock as i, normalizeClass as V, createCommentVNode as b, createElementVNode as E, renderSlot as h, createTextVNode as $, toDisplayString as f, createVNode as z, withKeys as I, withModifiers as g, createBlock as v, createSlots as T, withCtx as p, watch as K,
|
|
2
|
-
import { g as
|
|
3
|
-
import { c as
|
|
4
|
-
const O = { class: "top-editArea_footer" },
|
|
1
|
+
import { defineComponent as y, ref as k, computed as F, createElementBlock as c, openBlock as i, normalizeClass as V, createCommentVNode as b, createElementVNode as E, renderSlot as h, createTextVNode as $, toDisplayString as f, createVNode as z, withKeys as I, withModifiers as g, createBlock as v, createSlots as T, withCtx as p, watch as K, mergeProps as M, mergeModels as A, useModel as C, Fragment as G, renderList as S, unref as L } from "vue";
|
|
2
|
+
import { g as N, e as B, _ as U, h as q, j as D } from "../.chunks/forms-BAUgA7Ct.es.js";
|
|
3
|
+
import { c as ne, I as re, a as ue, _ as de, b as ce } from "../.chunks/policy.vue_vue_type_style_index_0_lang-RJnqOsjD.es.js";
|
|
4
|
+
const O = { class: "top-editArea_footer" }, _ = /* @__PURE__ */ y({
|
|
5
5
|
__name: "editArea",
|
|
6
6
|
props: {
|
|
7
7
|
defaultValue: { default: "" },
|
|
@@ -62,7 +62,7 @@ const O = { class: "top-editArea_footer" }, ee = /* @__PURE__ */ y({
|
|
|
62
62
|
"top-focus": r.value
|
|
63
63
|
})
|
|
64
64
|
}, [
|
|
65
|
-
z(
|
|
65
|
+
z(N, {
|
|
66
66
|
modelValue: s.value,
|
|
67
67
|
"onUpdate:modelValue": u[1] || (u[1] = (w) => s.value = w),
|
|
68
68
|
name: e.name,
|
|
@@ -117,7 +117,7 @@ const O = { class: "top-editArea_footer" }, ee = /* @__PURE__ */ y({
|
|
|
117
117
|
], 2)
|
|
118
118
|
], 2));
|
|
119
119
|
}
|
|
120
|
-
}), P = { class: "top-editInput" },
|
|
120
|
+
}), P = { class: "top-editInput" }, ee = /* @__PURE__ */ y({
|
|
121
121
|
__name: "editInput",
|
|
122
122
|
props: {
|
|
123
123
|
modelValue: {},
|
|
@@ -127,14 +127,14 @@ const O = { class: "top-editArea_footer" }, ee = /* @__PURE__ */ y({
|
|
|
127
127
|
emits: ["update:modelValue"],
|
|
128
128
|
setup(e, { emit: o }) {
|
|
129
129
|
const t = e, a = k(t.modelValue);
|
|
130
|
-
K(
|
|
130
|
+
K(() => t.modelValue, () => {
|
|
131
131
|
a.value = t.modelValue;
|
|
132
132
|
});
|
|
133
133
|
const s = o, r = () => {
|
|
134
134
|
s("update:modelValue", a.value);
|
|
135
135
|
};
|
|
136
136
|
return (n, l) => (i(), c("div", P, [
|
|
137
|
-
z(
|
|
137
|
+
z(U, M(e.input, {
|
|
138
138
|
onKeydownCapture: l[0] || (l[0] = I(g((d) => a.value = e.modelValue, ["stop"]), ["esc"])),
|
|
139
139
|
onKeydown: I(g(r, ["stop"]), ["enter"]),
|
|
140
140
|
modelValue: a.value,
|
|
@@ -188,7 +188,7 @@ const O = { class: "top-editArea_footer" }, ee = /* @__PURE__ */ y({
|
|
|
188
188
|
"top-error": e.isError
|
|
189
189
|
})
|
|
190
190
|
}, [
|
|
191
|
-
Array.isArray(o.value) ? (i(!0), c(G, { key: 0 }, S(e.items, (l) => (i(), v(
|
|
191
|
+
Array.isArray(o.value) ? (i(!0), c(G, { key: 0 }, S(e.items, (l) => (i(), v(q, {
|
|
192
192
|
class: V({
|
|
193
193
|
"top-optionGroup_item-selected": o.value.includes(l.value),
|
|
194
194
|
"top-optionGroup_item": !0
|
|
@@ -232,7 +232,7 @@ const O = { class: "top-editArea_footer" }, ee = /* @__PURE__ */ y({
|
|
|
232
232
|
]), 1032, ["class", "modelValue", "value", "title", "disabled", "isError", "data-top-icon"]))), 256))
|
|
233
233
|
], 2));
|
|
234
234
|
}
|
|
235
|
-
}),
|
|
235
|
+
}), oe = /* @__PURE__ */ y({
|
|
236
236
|
__name: "radioGroup",
|
|
237
237
|
props: /* @__PURE__ */ A({
|
|
238
238
|
modelValue: {},
|
|
@@ -264,7 +264,7 @@ const O = { class: "top-editArea_footer" }, ee = /* @__PURE__ */ y({
|
|
|
264
264
|
_: 3
|
|
265
265
|
}, 8, ["modelValue", "items", "size", "showIndicator", "isError"]));
|
|
266
266
|
}
|
|
267
|
-
}),
|
|
267
|
+
}), te = /* @__PURE__ */ y({
|
|
268
268
|
__name: "checkboxGroup",
|
|
269
269
|
props: /* @__PURE__ */ A({
|
|
270
270
|
modelValue: {},
|
|
@@ -296,10 +296,10 @@ const O = { class: "top-editArea_footer" }, ee = /* @__PURE__ */ y({
|
|
|
296
296
|
_: 3
|
|
297
297
|
}, 8, ["modelValue", "items", "size", "showIndicator", "isError"]));
|
|
298
298
|
}
|
|
299
|
-
}),
|
|
299
|
+
}), R = ["data-top-icon"], W = { class: "top-info_text" }, j = {
|
|
300
300
|
key: 0,
|
|
301
301
|
class: "top-info_value"
|
|
302
|
-
},
|
|
302
|
+
}, le = /* @__PURE__ */ y({
|
|
303
303
|
__name: "info",
|
|
304
304
|
props: {
|
|
305
305
|
icon: {},
|
|
@@ -315,18 +315,18 @@ const O = { class: "top-editArea_footer" }, ee = /* @__PURE__ */ y({
|
|
|
315
315
|
}),
|
|
316
316
|
"data-top-icon": e.icon
|
|
317
317
|
}, [
|
|
318
|
-
E("div",
|
|
318
|
+
E("div", W, [
|
|
319
319
|
h(o.$slots, "default")
|
|
320
320
|
]),
|
|
321
|
-
o.$slots.additional ? (i(), c("span",
|
|
321
|
+
o.$slots.additional ? (i(), c("span", j, [
|
|
322
322
|
h(o.$slots, "additional")
|
|
323
323
|
])) : b("", !0)
|
|
324
|
-
], 10,
|
|
324
|
+
], 10, R));
|
|
325
325
|
}
|
|
326
|
-
}),
|
|
326
|
+
}), X = {
|
|
327
327
|
key: 0,
|
|
328
328
|
class: "top-policy"
|
|
329
|
-
},
|
|
329
|
+
}, J = { class: "top-policy_title" }, Q = ["innerHTML"], ae = /* @__PURE__ */ y({
|
|
330
330
|
__name: "policy",
|
|
331
331
|
props: {
|
|
332
332
|
title: {},
|
|
@@ -338,13 +338,13 @@ const O = { class: "top-editArea_footer" }, ee = /* @__PURE__ */ y({
|
|
|
338
338
|
const t = o, a = k(!0), s = () => {
|
|
339
339
|
a.value = !1, t("accept");
|
|
340
340
|
};
|
|
341
|
-
return (r, n) => a.value ? (i(), c("div",
|
|
342
|
-
E("div",
|
|
341
|
+
return (r, n) => a.value ? (i(), c("div", X, [
|
|
342
|
+
E("div", J, f(e.title), 1),
|
|
343
343
|
E("div", {
|
|
344
344
|
class: "top-policy_description",
|
|
345
345
|
innerHTML: e.description
|
|
346
|
-
}, null, 8,
|
|
347
|
-
z(
|
|
346
|
+
}, null, 8, Q),
|
|
347
|
+
z(L(B), {
|
|
348
348
|
size: "m",
|
|
349
349
|
onClick: s
|
|
350
350
|
}, {
|
|
@@ -357,16 +357,16 @@ const O = { class: "top-editArea_footer" }, ee = /* @__PURE__ */ y({
|
|
|
357
357
|
}
|
|
358
358
|
});
|
|
359
359
|
export {
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
360
|
+
ne as ITEM_ID_ALL,
|
|
361
|
+
re as ITEM_ID_NEW,
|
|
362
|
+
te as TopCheckboxGroup,
|
|
363
|
+
_ as TopEditArea,
|
|
364
|
+
ee as TopEditInput,
|
|
365
|
+
le as TopInfo,
|
|
366
|
+
ue as TopMenu,
|
|
367
|
+
ae as TopPolicy,
|
|
368
|
+
oe as TopRadioGroup,
|
|
369
|
+
de as TopSelector2,
|
|
370
|
+
ce as apiSetSearchParamsFilter
|
|
371
371
|
};
|
|
372
372
|
//# sourceMappingURL=formsExt.js.map
|