@topvisor/ui 1.0.42-date.2 → 1.0.42-dev.2

package/formsExt/formsExt.amd.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"formsExt.amd.js","sources":["../../src/components/formsExt/editArea/editArea.vue","../../src/components/formsExt/editInput/editInput.vue","../../src/components/formsExt/radioGroup/radioGroup.vue","../../src/components/formsExt/checkboxGroup/checkboxGroup.vue","../../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","../../src/components/formsExt/formsExt.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport Button from '@/components/forms/button/button.vue';\nimport type { Emits, Props } 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\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\"\n\t\t\tclass=\"top-editArea_title\"\n\t\t\t@click=\"clickOnTitle()\"\n\t\t>\n\t\t\t{{ title }}\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-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_title {\n\tfont-size: 12px;\n}\n\n.top-editArea_form {\n\tflex-direction: column;\n\toutline: none;\n}\n\n.top-editArea_form:not(.top-error):hover,\n.top-editArea_form:not(.top-error).top-focus {\n\tborder-color: var(--top-forms-border-color-hover);\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\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 type { Ref } from '@vue/reactivity';\nimport { ref, watch } from 'vue';\nimport type { Props } from './types';\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> = ref(null);\n\nwatch(model, () => {\n\tif (!props.radiosProps?.some(item => item.value === model.value)) {\n\t\tmodel.value = props.radiosProps?.[0]?.value ?? '';\n\t}\n\n\telRef.value?.querySelector('.radioGroup_item-selected')?.scrollIntoView();\n}, { immediate: true });\n\nconst uid = 'radioGroup-' + Math.random();\n</script>\n\n<template>\n\t<div\n\t\tref=\"elRef\"\n\t\t:class=\"{\n\t\t\t['top-radioGroup']: 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<label\n\t\t\tv-for=\"item of radiosProps\"\n\t\t\t:class=\"{\n\t\t\t\t['top-radioGroup_item-selected']: item.value === model,\n\t\t\t\t['top-radioGroup_item']: true,\n\t\t\t\t['top-forms-focusable']: true,\n\t\t\t\t['top-disabled']: item.disabled,\n\t\t\t}\"\n\t\t\t:data-top-icon=\"item.icon\"\n\t\t\t@click=\"model = item.value\"\n\t\t>\n\t\t\t{{ item.title }}\n\n\t\t\t<span\n\t\t\t\tv-if=\"showIndicator\"\n\t\t\t\tclass=\"top-radioGroup_circle\"\n\t\t\t></span>\n\n\t\t\t<!-- Для нативной навигации -->\n\t\t\t<input\n\t\t\t\tv-model=\"model\"\n\t\t\t\t:name=\"uid\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t['top-unvisible']: true,\n\t\t\t\t}\"\n\t\t\t\t:value=\"item.value\"\n\t\t\t\t:disabled=\"item.disabled\"\n\t\t\t/>\n\t\t</label>\n\t</div>\n</template>\n\n<style>\n.top-radioGroup {\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-radioGroup_item {\n\tcolor: var(--color-text-2);\n\tcursor: pointer;\n\tbox-sizing: border-box;\n\tborder-radius: 6px;\n\theight: calc(var(--top-forms-base-height) - 4px);\n\tpadding: 0 16px;\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: 4px;\n}\n\n.top-radioGroup_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/* selected */\n.top-radioGroup_item-selected {\n\tcolor: var(--color-text-1);\n\tpointer-events: none;\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/* circle */\n.top-radioGroup_circle {\n\tcontent: \"\";\n\tbox-sizing: border-box;\n\tborder: 1px solid var(--color-line-3-opacity);\n\tborder-radius: 50%;\n\tpadding: 3px;\n\tmargin-left: auto;\n\twidth: calc(var(--top-forms-option-height) - 3px * 2);\n\theight: calc(var(--top-forms-option-height) - 3px * 2);\n}\n\n.top-radioGroup_item:hover .top-radioGroup_circle:before {\n\tborder-color: var(--color-line-primary-1);\n}\n\n/* circle selected */\n.top-radioGroup_item-selected .top-radioGroup_circle {\n\tborder-color: var(--color-line-primary-1);\n\tborder-width: 5px;\n}\n\n.top-radioGroup_item-selected:hover .top-radioGroup_circle {\n\tborder-color: var(--color-line-primary-1);\n}\n\n/* top-error  */\n.top-radioGroup.top-error .top-radioGroup_item:not(.top-disabled) .top-radioGroup_circle {\n\tborder-color: var(--color-line-negative-1);\n}\n</style>\n","<script setup lang=\"ts\">\nimport type { Props } from './types';\n\nconst model = defineModel<Props['modelValue']>({\n\trequired: true,\n});\n\nwithDefaults(defineProps<Props>(), {\n\tsize: 's',\n\tstyling: 'outline',\n});\n\nconst onChange = (id: Props['modelValue'][number]) => {\n\tconst newModel = [...model.value];\n\tconst index = newModel.indexOf(id);\n\n\tif (index === -1) {\n\t\tnewModel.push(id);\n\t} else {\n\t\tnewModel.splice(index, 1);\n\t}\n\n\tmodel.value = newModel;\n};\n</script>\n\n<template>\n\t<div\n\t\t:class=\"{\n      \t\t['top-checkboxGroup']: true,\n      \t\t['top-checkboxGroup-' + styling]: true,\n      \t\t['top-scrollBarXHidding']: true,\n      \t\t['top-size_' + size]: !!size,\n      \t\t['top-error']: isError,\n    \t}\"\n\t>\n\t\t<label\n\t\t\tv-for=\"item in items\"\n\t\t\t:key=\"item.id\"\n\t\t\t:class=\"{\n\t\t\t\t['top-checkboxGroup_item']: true,\n\t\t\t\t['top-checkboxGroup_item-selected']: model.includes(item.id),\n\t\t\t\t['top-forms-focusable']: true,\n\t\t\t\t['top-disabled']: item.disabled,\n\t\t\t}\"\n\t\t\t:data-top-icon=\"item.icon\"\n\t\t>\n\t\t\t<input\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tclass=\"top-unvisible\"\n\t\t\t\t:value=\"item.id\"\n\t\t\t\t:checked=\"model.includes(item.id)\"\n\t\t\t\t:disabled=\"item.disabled\"\n\t\t\t\t@change=\"onChange(item.id)\"\n\t\t\t/>\n\n\t\t\t{{ item.title }}\n\t\t</label>\n\t</div>\n</template>\n\n<style>\n.top-checkboxGroup {\n\tuser-select: none;\n\tborder-radius: 8px;\n\theight: var(--top-forms-base-height);\n\tbox-sizing: border-box;\n\tdisplay: flex;\n}\n\n.top-checkboxGroup_item {\n\tbox-sizing: border-box;\n\tpadding: 1px var(--top-padding-4);\n\tcursor: pointer;\n\tfont-weight: 600;\n\twhite-space: nowrap;\n\tdisplay: flex;\n\tflex-grow: 1;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: var(--top-gap-1);\n}\n\n/* outline */\n.top-checkboxGroup-outline {\n\tborder: 1px solid var(--color-line-1);\n\tbackground: var(--color-layout-front-1);\n}\n\n.top-checkboxGroup-outline .top-checkboxGroup_item {\n\theight: calc(var(--top-forms-base-height) - 2px);\n\tmin-height: 100%;\n}\n\n.top-checkboxGroup-outline .top-checkboxGroup_item:hover {\n\tbackground: var(--color-layer-primary-1);\n}\n\n.top-checkboxGroup-outline .top-checkboxGroup_item-selected {\n\tbackground: var(--color-bg-primary-1);\n\tcolor: var(--color-text-white);\n\t--top-icon-color: var(--color-text-white);\n}\n\n.top-checkboxGroup-outline .top-checkboxGroup_item-selected:hover {\n\tbackground: var(--color-bg-primary-2);\n}\n\n.top-checkboxGroup-outline.top-error .top-checkboxGroup_item:hover {\n\tbackground: var(--color-layer-negative-1);\n}\n\n.top-checkboxGroup-outline.top-error .top-checkboxGroup_item-selected {\n\tbackground: var(--color-bg-negative-1);\n}\n\n.top-checkboxGroup-outline.top-error .top-checkboxGroup_item-selected:hover {\n\tbackground: var(--color-bg-negative-2);\n}\n\n/* borderless */\n.top-checkboxGroup-borderless {\n\tpadding: 2px;\n\tbackground: var(--color-bg-shading-2);\n\tgap: 2px;\n}\n\n.top-checkboxGroup-borderless .top-checkboxGroup_item {\n\tborder-radius: 6px;\n\theight: calc(var(--top-forms-base-height) - 4px);\n}\n\n.top-checkboxGroup-borderless .top-checkboxGroup_item:hover {\n\tbox-shadow: var(--top-shadow-s);\n\tbackground: var(--color-bg-lightning-1);\n}\n\n.top-checkboxGroup-borderless .top-checkboxGroup_item-selected {\n\tbackground: var(--color-bg-primary-1);\n\tcolor: var(--color-text-white);\n\t--top-icon-color: var(--color-text-white);\n}\n\n.top-checkboxGroup-borderless .top-checkboxGroup_item-selected:hover {\n\tbackground: var(--color-bg-primary-2);\n}\n\n.top-checkboxGroup-borderless.top-error .top-checkboxGroup_item:hover {\n\tbackground: var(--color-bg-lightning-1);\n}\n\n.top-checkboxGroup-borderless.top-error .top-checkboxGroup_item-selected {\n\tbackground: var(--color-bg-negative-1);\n}\n\n.top-checkboxGroup-borderless.top-error .top-checkboxGroup_item-selected:hover {\n\tbackground: var(--color-bg-negative-2);\n}\n</style>\n","import { ref } from 'vue';\nimport { debounce } from '../../../../core/utils/lodash';\nimport type { Item, Props } from '../types';\n\nexport type API = ReturnType<typeof useAPI>;\n\nexport const useAPI = (apiRequest: Props['apiRequest'], minLength: number, useCache: Props['useCache']) => {\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\tlet _searchText = '';\n\tlet _nextOffset: number | undefined;\n\n\tif (apiRequest && !apiRequest.params.limit) {\n\t\tapiRequest.params.limit = 100;\n\t}\n\n\t/**\n\t * Выполнить обращение к API\n\t *\n\t * При ошибке вернет undefined\n\t */\n\tconst callAPIRequest = async (): Promise<{ nextOffset?: number, result: Item[] } | undefined> => {\n\t\tif (!apiRequest) return;\n\n\t\tlet res;\n\t\tlet cacheKey;\n\n\t\tif (useCache) {\n\t\t\t// кэш для полученных ответов через apiRequest\n\t\t\t// общий для всех компонентов, использующих apiRequest\n\t\t\tapiRequest.cache ??= new Map();\n\n\t\t\tcacheKey = JSON.stringify(apiRequest.params);\n\t\t\tres = apiRequest.cache.get(cacheKey);\n\n\t\t\tif (res) {\n\t\t\t\treturn res;\n\t\t\t}\n\t\t}\n\n\t\tisLoading.value = true;\n\t\tres = await apiRequest.call();\n\t\tisLoading.value = false;\n\n\t\tif (res.errors) return;\n\n\t\tif (!Array.isArray(res.result)) {\n\t\t\tconsole.warn(`В 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 (useCache) {\n\t\t\tapiRequest.cache.set(cacheKey as string, res);\n\t\t}\n\n\t\treturn res;\n\t};\n\n\t/**\n\t * Загрузить items\n\t */\n\tconst load = async () => {\n\t\tif (!apiRequest) return;\n\n\t\tapiRequest.params.offset = 0;\n\t\tapiRequest.params.search = _searchText;\n\n\t\tconst res = await callAPIRequest();\n\t\tif (!res) return;\n\n\t\t_nextOffset = res.nextOffset;\n\n\t\titems.value = res.result;\n\t};\n\n\t/**\n\t * Загрузить следующую страницу items\n\t */\n\tconst loadAppend = async () => {\n\t\tif (!apiRequest) return;\n\n\t\t// данных о следующих страницах не обнаружено\n\t\tif (!_nextOffset) return;\n\n\t\t// дозагружать нельзя, если не завершена предыдущшая загрузка\n\t\tif (isLoading.value) return;\n\n\t\tapiRequest.params.offset = _nextOffset;\n\t\tapiRequest.params.search = _searchText;\n\n\t\tconst res = await callAPIRequest();\n\t\tif (!res) return;\n\n\t\t_nextOffset = res.nextOffset;\n\n\t\titems.value = items.value.concat(res.result);\n\t};\n\n\tconst loadDebounce = debounce(() => load(), 200);\n\n\t/**\n\t * Выполнить поиск по указанному тексту\n\t *\n\t * Если длина текста меньше minLength, поиск не будет проивзеден\n\t *\n\t * Если текст не изменился, поиск не будет проивзеден\n\t * @param searchText - текст поиска\n\t * @param useDebounce - дедупликация загрузки списка\n\t */\n\tconst setSearchTextAndLoad = (searchText: string, useDebounce = true) => {\n\t\tif (!apiRequest) return;\n\n\t\tif (searchText.length < minLength) return;\n\n\t\t// условия поиска не поменялись, данные загружены\n\t\tif (searchText === _searchText && items.value.length) return;\n\n\t\t_searchText = searchText;\n\n\t\tif (useDebounce) {\n\t\t\tvoid loadDebounce();\n\t\t} else {\n\t\t\tvoid load();\n\t\t}\n\t};\n\n\treturn {\n\t\tapiRequest,\n\t\titems,\n\t\tisLoading,\n\t\tloadAppend,\n\t\tsetSearchTextAndLoad,\n\t};\n};\n","import type { Item, Props } from './types';\n\nexport const ITEM_ID_ALL = 0;\n\n/**\n * Выбран ли элемент\n */\nexport const isSelected = (modelValue: Props['modelValue'], item: Item, checkNameForNullId = true) => {\n\tif (checkNameForNullId && item.id === null) {\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","import { computed, ref, type ComputedRef, type Ref } from 'vue';\nimport { invertKeyboardLayout } from '@/core/utils/keyboard';\nimport type { Item, Props } from '../types';\nimport { type API } from './useAPI';\nimport { isSelected, ITEM_ID_ALL } from '../utils';\nimport { useI18n } from '@/core/plugins/i18n';\n\n/**\n * Функционал поиска\n */\nexport const useMenu = (\n\tmodel: Ref<Props['modelValue']>,\n\titems: Ref<Props['items']>,\n\tmultiselect: Props['multiselect'],\n\tappendAllValue: Ref<Props['appendAllValue']>,\n\tappendSearchToResult: Ref<Props['appendSearchToResult']>,\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,\n\t};\n\n\t/**\n\t * Сброс поиска\n\t */\n\tconst resetSearch = () => {\n\t\tsearchText.value = '';\n\t\tapi.items.value = [];\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 && appendAllValue.value) {\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 * Подготовленный список меню, который содержит в сумме:\n\t * - prop.items: указанный список с учетом фильтра и опций компонента\n\t * - api.items: результаты api запроса, если используется api\n\t *\n\t * @returns Отфильтрованный массив элементов для отображения\n\t */\n\tconst itemsForShow = computed(() => {\n\t\tconst searchString = searchText.value.toLowerCase();\n\t\tconst searchStringInvertKeyboard = invertKeyboardLayout(searchString);\n\n\t\tlet items: NonNullable<Props['items']> = [];\n\n\t\tlocalItems.value.forEach((item) => {\n\t\t\tconst itemName = item.name.toLowerCase();\n\n\t\t\tif (\n\t\t\t\titem.id === Number(searchString) ||\n\t\t\t\titemName.includes(searchString) ||\n\t\t\t\titemName.includes(searchStringInvertKeyboard)\n\t\t\t) {\n\t\t\t\tif (itemName === searchString || itemName === searchStringInvertKeyboard) {\n\t\t\t\t\titems.unshift(item);\n\t\t\t\t} else {\n\t\t\t\t\titems.push(item);\n\t\t\t\t}\n\t\t\t}\n\t\t});\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(!items.length || items[0].name.toLowerCase() !== searchString)\n\t\t) {\n\t\t\titems.push({\n\t\t\t\tid: null,\n\t\t\t\tname: searchText.value,\n\t\t\t});\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\tconst selectNextItem = () => {\n\t\tif (!Array.isArray(model.value)) {\n\t\t\tconst currentIndex = itemsForShow.value.findIndex(item => item.id === (model.value as Item).id);\n\t\t\tconst nextIndex = (currentIndex + 1) % itemsForShow.value.length;\n\t\t\tmodel.value = { ...itemsForShow.value[nextIndex] };\n\t\t}\n\t};\n\n\t/**\n\t * Удалить выбранное значение по id\n\t *\n\t * @param id Идентификатор элемента для удаления\n\t */\n\tconst deleteItemById = async (id: Item['id']) => {\n\t\tif (Array.isArray(model.value)) {\n\t\t\tmodel.value = model.value.filter(item => item.id !== id);\n\t\t}\n\t};\n\n\treturn {\n\t\tsearchText,\n\t\tresetSearch,\n\t\titems: localItems,\n\t\titemsForShow,\n\t\tselectNextItem,\n\t\tdeleteItemById,\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 { TopInput, TopPreloader } from '@/components/forms/forms';\nimport type { Item, Props, Slots } from './types';\nimport Selector2ItemMulti from './itemMulti.vue';\nimport { useAPI } from './composables/useAPI';\nimport { useMenu } from './composables/useMenu';\nimport { isSelected } from './utils';\n\nconst props = withDefaults(defineProps<Props>(), {\n\titems: () => [] as Array<Item>,\n\tsize: 's',\n\tminLength: 0,\n\tselectedAsPlaceholder: true,\n\tsearchType: 'popup',\n});\n\nconst model = defineModel<Props['modelValue']>({ required: true });\n\ndefineSlots<Slots>();\n\n/**\n * Основной элемент селектора\n */\nconst topInput = ref<InstanceType<typeof TopInput> | null>(null);\n\n/**\n * Объект для работы с API\n */\nconst api = useAPI(props.apiRequest, props.minLength || 0, props.useCache);\n\n/**\n * Объект для работы с меню\n */\nconst menu = useMenu(model, toRef(props, 'items'), props.multiselect, toRef(props, 'appendAllValue'), toRef(props, 'appendSearchToResult'), api);\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\nconst component = computed(() => {\n\tif (searchTypeLocal.value === 'inline') return 'TopInput';\n\n\treturn 'div';\n});\n\n// /**\n//  * Экземпляр компонента Popup\n//  */\n// const popupRef = ref<any>(null);\n\n// /**\n//  * Получить доступ к объекту popup\n//  *\n//  * @returns Объект popup или undefined, если popup не инициализирован\n//  */\n// const getPopup = (): TopLibPopup | undefined => {\n// \treturn popupRef.value?.popup;\n// };\n\nif (api.apiRequest) {\n\t// отложенный поиск при вводе текста\n\twatch(menu.searchText, () => api.setSearchTextAndLoad(menu.searchText.value));\n}\n\n/**\n * Выбрать элемент\n *\n * @param item Элемент для выбора\n */\nconst selectItem = (item: Item) => {\n\tif (props.multiselect && Array.isArray(model.value)) {\n\t\tif (!isSelected(model.value, item)) {\n\t\t\tmodel.value = [...model.value, item];\n\t\t}\n\t} else {\n\t\tmodel.value = item;\n\t}\n};\n\nconst placeholder = computed(() => {\n\tif (Array.isArray(model.value) || props.multiselect || !props.selectedAsPlaceholder) {\n\t\treturn props.placeholder;\n\t}\n\n\treturn model.value.name || props.placeholder;\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\ttopInput.value?.focus();\n\n\tif (menu.searchText.value) menu.resetSearch();\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.loadAppend();\n\t}\n};\n\n// для storybook\nif ((window as any).__STORYBOOK_PREVIEW__) {\n\twatch(\n\t\t() => props.multiselect,\n\t\t() => {\n\t\t\tmodel.value = props.multiselect ? [] : { id: null, name: '' };\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}, 300);\n\t\t},\n\t);\n}\n</script>\n\n<template>\n\t<TopPopup\n\t\t@open=\"onOpen()\"\n\t\t@close=\"onClose()\"\n\t\t@scrollContentList=\"apiRequest ? onScrollContentList($event) : undefined\"\n\t\t:notch=\"false\"\n\t\t:transitionDuration=\"0\"\n\t>\n\t\t<template #opener>\n\t\t\t<component\n\t\t\t\t:is=\"component\"\n\t\t\t\tref=\"subcomponentSelector\"\n\t\t\t\tv-top-focus.onupdate=\"isError\"\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-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@keydown.up.down.enter.space.stop.prevent=\"($event.currentTarget as HTMLElement).click()\"\n\t\t\t\t@keydown.delete=\"model = []\"\n\t\t\t\ttabindex=\"0\"\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.deleteItemById\"\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=\"!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\n\t\t\t\t\tv-if=\"addChanger && !multiselect && menu.items.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=\"menu.selectNextItem\"\n\t\t\t\t></span>\n\t\t\t</component>\n\t\t</template>\n\n\t\t<template #widget v-if=\"searchType === 'popup'\">\n\t\t\t<TopPopupWidgetInput\n\t\t\t\ttitle=\"Поиск\"\n\t\t\t\ticon=\"\"\n\t\t\t\tv-model=\"menu.searchText.value\"\n\t\t\t\t:isLoading=\"api.isLoading.value && !apiRequest?.params.offset\"\n\t\t\t\t:placeholder\n\t\t\t/>\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: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}\"\n\t\t\t\t:key=\"item.id ?? undefined\"\n\t\t\t\t:closeByClick=\"!multiselect || Core.state.isMobile\"\n\t\t\t\t@click=\"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<TopPopupListItem\n\t\t\t\tv-if=\"!api.isLoading.value && !menu.itemsForShow.value.length\"\n\t\t\t\ttype=\"regular\"\n\t\t\t>\n\t\t\t\t{{ $i18n.Common.No_results }}\n\t\t\t</TopPopupListItem>\n\n\t\t\t<!-- Индикатор загрузки, первичная дозагрузка отображается в поле поиска, если оно отображено -->\n\t\t\t<TopPopupListItem\n\t\t\t\tv-if=\"api.isLoading.value && (searchType !== 'popup' || apiRequest?.params.offset)\"\n\t\t\t\ttype=\"regular\"\n\t\t\t>\n\t\t\t\t<TopPreloader type=\"circles\"/>\n\t\t\t</TopPopupListItem>\n\t\t</template>\n\t</TopPopup>\n</template>\n\n<style>\n.top-selector2 {\n\twidth: 180px;\n\tmin-height: var(--top-forms-base-height);\n\tbox-sizing: border-box;\n\tposition: relative;\n\tdisplay: flex;\n\toverflow: hidden;\n\tpadding: var(--top-padding-1) var(--top-forms-padding);\n\n\tborder-radius: var(--top-radius-2);\n\tborder: 1px solid var(--top-forms-border-color);\n\tbackground: var(--top-forms-background-color);\n}\n\n.top-selector2::placeholder {\n\tcolor: var(--color-text-1);\n}\n\n.top-selector2-multiselect {\n\twidth: unset;\n\tmin-width: 180px;\n\tpadding: var(--top-padding-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_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\ttransform: translateX(-16px);\n}\n</style>\n","import type { ComponentCustomProps } from 'vue';\n\nimport EditArea from './editArea/editArea.vue';\nimport EditInput from './editInput/editInput.vue';\nimport RadioGroup from './radioGroup/radioGroup.vue';\nimport CheckboxGroup from './checkboxGroup/checkboxGroup.vue';\nimport Selector2 from './selector2/selector2.vue';\nimport Menu from './menu/menu.vue';\nimport Info from './info/info.vue';\n\nexport const TopEditArea = EditArea as typeof EditArea & ComponentCustomProps;\nexport const TopEditInput = EditInput as typeof EditInput & ComponentCustomProps;\nexport const TopRadioGroup = RadioGroup as typeof RadioGroup & ComponentCustomProps;\nexport const TopCheckboxGroup = CheckboxGroup as typeof CheckboxGroup & ComponentCustomProps;\nexport const TopSelector2 = Selector2 as typeof Selector2 & ComponentCustomProps;\nexport const TopMenu = Menu as typeof Menu & ComponentCustomProps;\nexport const TopInfo = Info as typeof Info & ComponentCustomProps;\n"],"names":["isChanged","vue","localValue","props","submit","value","emit","intermediateValue","elRef","model","_a","item","_c","_b","onChange","id","index","newModel","items","isLoading","_nextOffset","apiRequest","res","cacheKey","indexWithError","_searchText","callAPIRequest","loadAppend","searchText","minLength","modelValue","itemSelected","useMenu","multiselect","appendAllValue","appendSearchToResult","api","forms","localItems","localItems2","itemAll","itemsForShow","searchStringInvertKeyboard","utils_keyboard","searchString","items2","isSelected","resetSearch","nextIndex","topInput","useAPI","menu","searchTypeLocal","component","selectItem","placeholder","onScrollContentList","e","el","TopEditArea","_sfc_main$6","TopEditInput","_sfc_main$5","TopRadioGroup","_sfc_main$4","TopCheckboxGroup","_sfc_main$3","TopSelector2","_sfc_main$1","TopMenu","menu_vue_vue_type_style_index_0_lang","TopInfo","_sfc_main"],"mappings":"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"}

package/formsExt/formsExt.d.ts

@@ -1,2 +0,0 @@
-export * from '../components/formsExt/formsExt'
-export {}

package/formsExt/formsExt.js

@@ -1,567 +0,0 @@
-import { Core as Y } from "../core/app.js";
-import { defineComponent as B, ref as w, computed as S, createElementBlock as f, openBlock as p, normalizeClass as C, createCommentVNode as k, createElementVNode as L, toDisplayString as V, createVNode as G, withKeys as E, withModifiers as z, createBlock as $, createSlots as O, withCtx as A, createTextVNode as I, watch as M, toRef as P, mergeProps as W, mergeModels as H, useModel as U, Fragment as _, renderList as K, withDirectives as J, vModelRadio as Q, resolveDirective as Z, unref as h, renderSlot as D, resolveDynamicComponent as q } from "vue";
-import { w as x, _ as F, f as ee, d as te, u as oe, C as X, x as le } from "../.chunks/forms-BZlFXc5U.es.js";
-import { TopPopup as se, TopPopupListItem as N, TopPopupWidgetInput as ae } from "../popup/popup.js";
-import { invertKeyboardLayout as re } from "../utils/keyboard.js";
-import { _ as ne } from "../.chunks/menu.vue_vue_type_style_index_0_lang-BMpVs3Du.es.js";
-const j = ["../assets/formsExt.css"].map((l) => import.meta.resolve(l));
-Y.insertCSSLinkToPage(j, !0);
-const ie = { class: "top-editArea_footer" }, ue = /* @__PURE__ */ B({
-  __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(l, { emit: e }) {
-    const s = l, a = e, r = w(s.defaultValue), t = w(s.isFocused), d = S(() => r.value !== s.defaultValue), c = (n) => {
-      a("submit", n), r.value = s.defaultValue;
-    }, v = () => {
-      if (s.forceShowCloseBtn && !d.value) {
-        a("close");
-        return;
-      }
-      r.value = s.defaultValue;
-    }, T = () => {
-      s.attachToKeyboard && a("clickOnTitle");
-    };
-    return (n, b) => (p(), f("div", {
-      class: C({
-        "top-editArea": !0,
-        "top-editArea-attachedToKeyboard": n.attachToKeyboard
-      })
-    }, [
-      n.title ? (p(), f("div", {
-        key: 0,
-        class: "top-editArea_title",
-        onClick: b[0] || (b[0] = (u) => T())
-      }, V(n.title), 1)) : k("", !0),
-      L("div", {
-        class: C({
-          "top-editArea_form": !0,
-          "top-error": n.isError,
-          "top-focus": t.value
-        })
-      }, [
-        G(x, {
-          modelValue: r.value,
-          "onUpdate:modelValue": b[1] || (b[1] = (u) => r.value = u),
-          name: n.name,
-          placeholder: n.placeholder,
-          rows: n.rows,
-          minHeight: n.minHeight,
-          expandable: n.expandable,
-          disabled: n.disabled,
-          readonly: n.readonly,
-          isError: n.isError,
-          hint: n.hint,
-          class: "top-editArea_element",
-          onFocus: b[2] || (b[2] = () => t.value = !0),
-          onBlur: b[3] || (b[3] = () => t.value = !1),
-          onKeyup: [
-            E(v, ["esc"]),
-            b[4] || (b[4] = E(z((u) => c(r.value), ["ctrl"]), ["enter"]))
-          ]
-        }, null, 8, ["modelValue", "name", "placeholder", "rows", "minHeight", "expandable", "disabled", "readonly", "isError", "hint"]),
-        L("div", ie, [
-          d.value || n.forceShowCloseBtn ? (p(), $(F, {
-            key: 0,
-            icon: n.$core.state.isMobile ? "" : "",
-            class: "top-editArea_button",
-            color: "theme",
-            styling: "soft",
-            onClick: v
-          }, O({ _: 2 }, [
-            n.$core.state.isMobile ? void 0 : {
-              name: "default",
-              fn: A(() => [
-                I(V(n.cancelText), 1)
-              ]),
-              key: "0"
-            }
-          ]), 1032, ["icon"])) : k("", !0),
-          d.value ? (p(), $(F, {
-            key: 1,
-            class: "top-editArea_button",
-            icon: n.$core.state.isMobile ? "" : "",
-            onClick: b[5] || (b[5] = (u) => c(r.value))
-          }, O({ _: 2 }, [
-            n.$core.state.isMobile ? void 0 : {
-              name: "default",
-              fn: A(() => [
-                I(V(n.submitText), 1)
-              ]),
-              key: "0"
-            }
-          ]), 1032, ["icon"])) : k("", !0)
-        ])
-      ], 2)
-    ], 2));
-  }
-}), de = { class: "top-editInput" }, pe = /* @__PURE__ */ B({
-  __name: "editInput",
-  props: {
-    modelValue: {},
-    input: {},
-    button: {}
-  },
-  emits: ["update:modelValue"],
-  setup(l, { emit: e }) {
-    const s = l, a = w(s.modelValue);
-    M(P(s.modelValue), () => {
-      a.value = s.modelValue;
-    });
-    const r = e, t = () => {
-      r("update:modelValue", a.value);
-    };
-    return (d, c) => (p(), f("div", de, [
-      G(ee, W(d.input, {
-        onKeydownCapture: c[0] || (c[0] = E(z((v) => a.value = d.modelValue, ["stop"]), ["esc"])),
-        onKeydown: E(z(t, ["stop"]), ["enter"]),
-        modelValue: a.value,
-        "onUpdate:modelValue": c[1] || (c[1] = (v) => a.value = v)
-      }), null, 16, ["onKeydown", "modelValue"]),
-      a.value !== d.modelValue ? (p(), $(F, W({
-        key: 0,
-        icon: "",
-        styling: "soft"
-      }, d.button, { onClick: t }), null, 16)) : k("", !0)
-    ]));
-  }
-}), ce = ["data-top-icon", "onClick"], me = {
-  key: 0,
-  class: "top-radioGroup_circle"
-}, fe = ["value", "disabled"], ve = /* @__PURE__ */ B({
-  __name: "radioGroup",
-  props: /* @__PURE__ */ H({
-    modelValue: {},
-    radiosProps: {},
-    showIndicator: { type: Boolean },
-    size: { default: "s" },
-    isError: { type: Boolean }
-  }, {
-    modelValue: {
-      required: !0
-    },
-    modelModifiers: {}
-  }),
-  emits: ["update:modelValue"],
-  setup(l) {
-    const e = U(l, "modelValue"), s = l, a = w(null);
-    M(e, () => {
-      var t, d, c, v, T;
-      (t = s.radiosProps) != null && t.some((n) => n.value === e.value) || (e.value = ((c = (d = s.radiosProps) == null ? void 0 : d[0]) == null ? void 0 : c.value) ?? ""), (T = (v = a.value) == null ? void 0 : v.querySelector(".radioGroup_item-selected")) == null || T.scrollIntoView();
-    }, { immediate: !0 });
-    const r = "radioGroup-" + Math.random();
-    return (t, d) => (p(), f("div", {
-      ref_key: "elRef",
-      ref: a,
-      class: C({
-        "top-radioGroup": !0,
-        "top-scrollBarXHidding": !0,
-        ["top-size_" + t.size]: !!t.size,
-        "top-error": t.isError
-      })
-    }, [
-      (p(!0), f(_, null, K(t.radiosProps, (c) => (p(), f("label", {
-        class: C({
-          "top-radioGroup_item-selected": c.value === e.value,
-          "top-radioGroup_item": !0,
-          "top-forms-focusable": !0,
-          "top-disabled": c.disabled
-        }),
-        "data-top-icon": c.icon,
-        onClick: (v) => e.value = c.value
-      }, [
-        I(V(c.title) + " ", 1),
-        t.showIndicator ? (p(), f("span", me)) : k("", !0),
-        J(L("input", {
-          "onUpdate:modelValue": d[0] || (d[0] = (v) => e.value = v),
-          name: r,
-          type: "radio",
-          class: C({
-            "top-unvisible": !0
-          }),
-          value: c.value,
-          disabled: c.disabled
-        }, null, 8, fe), [
-          [Q, e.value]
-        ])
-      ], 10, ce))), 256))
-    ], 2));
-  }
-}), ye = ["data-top-icon"], he = ["value", "checked", "disabled", "onChange"], be = /* @__PURE__ */ B({
-  __name: "checkboxGroup",
-  props: /* @__PURE__ */ H({
-    modelValue: {},
-    items: {},
-    size: { default: "s" },
-    styling: { default: "outline" },
-    isError: { type: Boolean }
-  }, {
-    modelValue: {
-      required: !0
-    },
-    modelModifiers: {}
-  }),
-  emits: ["update:modelValue"],
-  setup(l) {
-    const e = U(l, "modelValue"), s = (a) => {
-      const r = [...e.value], t = r.indexOf(a);
-      t === -1 ? r.push(a) : r.splice(t, 1), e.value = r;
-    };
-    return (a, r) => (p(), f("div", {
-      class: C({
-        "top-checkboxGroup": !0,
-        ["top-checkboxGroup-" + a.styling]: !0,
-        "top-scrollBarXHidding": !0,
-        ["top-size_" + a.size]: !!a.size,
-        "top-error": a.isError
-      })
-    }, [
-      (p(!0), f(_, null, K(a.items, (t) => (p(), f("label", {
-        key: t.id,
-        class: C({
-          "top-checkboxGroup_item": !0,
-          "top-checkboxGroup_item-selected": e.value.includes(t.id),
-          "top-forms-focusable": !0,
-          "top-disabled": t.disabled
-        }),
-        "data-top-icon": t.icon
-      }, [
-        L("input", {
-          type: "checkbox",
-          class: "top-unvisible",
-          value: t.id,
-          checked: e.value.includes(t.id),
-          disabled: t.disabled,
-          onChange: (d) => s(t.id)
-        }, null, 40, he),
-        I(" " + V(t.title), 1)
-      ], 10, ye))), 128))
-    ], 2));
-  }
-}), ge = { class: "top-selector2_itemMulti top-ellipsis" }, Te = /* @__PURE__ */ B({
-  __name: "itemMulti",
-  props: {
-    id: {},
-    name: {}
-  },
-  emits: ["delete"],
-  setup(l) {
-    return (e, s) => (p(), f("div", ge, [
-      I(V(e.name) + " ", 1),
-      L("span", {
-        class: "top-selector2_itemMultiDelete",
-        "data-top-icon": "",
-        onClick: s[0] || (s[0] = (a) => e.$emit("delete", e.id)),
-        onMousedown: s[1] || (s[1] = z(() => {
-        }, ["stop"]))
-      }, null, 32)
-    ]));
-  }
-}), ke = (l, e, s) => {
-  const a = w([]), r = w(!1);
-  let t = "", d;
-  l && !l.params.limit && (l.params.limit = 100);
-  const c = async () => {
-    if (!l) return;
-    let u, o;
-    if (s && (l.cache ??= /* @__PURE__ */ new Map(), o = JSON.stringify(l.params), u = l.cache.get(o), u))
-      return u;
-    if (r.value = !0, u = await l.call(), r.value = !1, u.errors) return;
-    if (!Array.isArray(u.result)) {
-      console.warn("В result ожидался массив");
-      return;
-    }
-    const i = u.result.findIndex((y) => y.id === void 0 || y.name === void 0);
-    if (i !== -1) {
-      console.warn(`В result[${i}] нет id или name`);
-      return;
-    }
-    return s && l.cache.set(o, u), u;
-  }, v = async () => {
-    if (!l) return;
-    l.params.offset = 0, l.params.search = t;
-    const u = await c();
-    u && (d = u.nextOffset, a.value = u.result);
-  }, T = async () => {
-    if (!l || !d || r.value) return;
-    l.params.offset = d, l.params.search = t;
-    const u = await c();
-    u && (d = u.nextOffset, a.value = a.value.concat(u.result));
-  }, n = te(() => v(), 200);
-  return {
-    apiRequest: l,
-    items: a,
-    isLoading: r,
-    loadAppend: T,
-    setSearchTextAndLoad: (u, o = !0) => {
-      l && (u.length < e || u === t && a.value.length || (t = u, o ? n() : v()));
-    }
-  };
-}, Ce = 0, R = (l, e, s = !0) => s && e.id === null ? Array.isArray(l) ? l.some((a) => a.id === e.id && a.name === e.name) : e.name === l.name : Array.isArray(l) ? l.some((a) => a.id === e.id) : e.id === l.id, Ae = (l, e, s, a, r, t) => {
-  const d = w(""), c = {
-    id: Ce,
-    name: oe().Common.All
-  }, v = () => {
-    d.value = "", t.items.value = [];
-  }, T = S(() => {
-    var i;
-    const o = [];
-    return !s && a.value && o.push(c), (i = e.value) == null || i.forEach((y) => o.push({ ...y })), o;
-  }), n = S(() => {
-    const o = d.value.toLowerCase(), i = re(o);
-    let y = [];
-    return T.value.forEach((m) => {
-      const g = m.name.toLowerCase();
-      (m.id === Number(o) || g.includes(o) || g.includes(i)) && (g === o || g === i ? y.unshift(m) : y.push(m));
-    }), y.push(...t.items.value), r.value && d.value && (!y.length || y[0].name.toLowerCase() !== o) && y.push({
-      id: null,
-      name: d.value
-    }), s && (y = y.filter((m) => !R(l.value, m))), y;
-  });
-  return {
-    searchText: d,
-    resetSearch: v,
-    items: T,
-    itemsForShow: n,
-    selectNextItem: () => {
-      if (!Array.isArray(l.value)) {
-        const i = (n.value.findIndex((y) => y.id === l.value.id) + 1) % n.value.length;
-        l.value = { ...n.value[i] };
-      }
-    },
-    deleteItemById: async (o) => {
-      Array.isArray(l.value) && (l.value = l.value.filter((i) => i.id !== o));
-    }
-  };
-}, $e = {
-  key: 0,
-  class: "top-selector2_activeItems"
-}, Ve = {
-  key: 1,
-  class: "top-selector2_activeName top-ellipsis"
-}, we = /* @__PURE__ */ B({
-  __name: "selector2",
-  props: /* @__PURE__ */ H({
-    modelValue: {},
-    items: { default: () => [] },
-    multiselect: { type: Boolean },
-    title: {},
-    disabled: { type: Boolean },
-    size: { default: "s" },
-    isError: { type: Boolean },
-    apiRequest: {},
-    minLength: { default: 0 },
-    useCache: { type: Boolean },
-    appendSearchToResult: { type: Boolean },
-    appendAllValue: { type: Boolean },
-    addChanger: { type: Boolean },
-    searchType: { default: "popup" },
-    placeholder: {},
-    selectedAsPlaceholder: { type: Boolean, default: !0 }
-  }, {
-    modelValue: { required: !0 },
-    modelModifiers: {}
-  }),
-  emits: ["update:modelValue"],
-  setup(l) {
-    const e = l, s = U(l, "modelValue"), a = w(null), r = ke(e.apiRequest, e.minLength || 0, e.useCache), t = Ae(s, P(e, "items"), e.multiselect, P(e, "appendAllValue"), P(e, "appendSearchToResult"), r), d = S(() => e.searchType === "inline" && e.multiselect || e.searchType === "inline" && X.state.isMobile ? "popup" : e.searchType), c = S(() => d.value === "inline" ? "TopInput" : "div");
-    r.apiRequest && M(t.searchText, () => r.setSearchTextAndLoad(t.searchText.value));
-    const v = (o) => {
-      e.multiselect && Array.isArray(s.value) ? R(s.value, o) || (s.value = [...s.value, o]) : s.value = o;
-    }, T = S(() => Array.isArray(s.value) || e.multiselect || !e.selectedAsPlaceholder ? e.placeholder : s.value.name || e.placeholder), n = () => {
-      r.apiRequest && r.setSearchTextAndLoad(t.searchText.value, !1);
-    }, b = () => {
-      var o;
-      (o = a.value) == null || o.focus(), t.searchText.value && t.resetSearch();
-    }, u = (o) => {
-      const i = o.target;
-      i.scrollTop / (i.scrollHeight - i.offsetHeight) > 0.8 && r.loadAppend();
-    };
-    return window.__STORYBOOK_PREVIEW__ && (M(
-      () => e.multiselect,
-      () => {
-        s.value = e.multiselect ? [] : { id: null, name: "" };
-      },
-      { immediate: !0 }
-    ), M(
-      () => e.searchType,
-      () => {
-        setTimeout(() => {
-          location.reload();
-        }, 300);
-      }
-    )), (o, i) => {
-      const y = Z("top-focus");
-      return p(), $(h(se), {
-        onOpen: i[4] || (i[4] = (m) => n()),
-        onClose: i[5] || (i[5] = (m) => b()),
-        onScrollContentList: i[6] || (i[6] = (m) => o.apiRequest ? u(m) : void 0),
-        notch: !1,
-        transitionDuration: 0
-      }, O({
-        opener: A(() => [
-          J((p(), $(q(c.value), {
-            ref: "subcomponentSelector",
-            class: C({
-              "top-selector2": !0,
-              "top-selector2-multiselect": o.multiselect,
-              ["top-size_" + o.size]: !0,
-              "top-disabled": o.disabled,
-              "top-forms-focusable": !o.disabled,
-              "top-error": o.isError
-            }),
-            onKeydown: [
-              i[1] || (i[1] = E(z((m) => m.currentTarget.click(), ["stop", "prevent"]), ["up", "down", "enter", "space"])),
-              i[2] || (i[2] = E((m) => s.value = [], ["delete"]))
-            ],
-            tabindex: "0"
-          }, {
-            default: A(() => [
-              o.multiselect ? (p(), f("div", $e, [
-                (p(!0), f(_, null, K(s.value, (m) => (p(), $(Te, {
-                  id: m.id,
-                  name: m.name,
-                  onDelete: h(t).deleteItemById
-                }, null, 8, ["id", "name", "onDelete"]))), 256))
-              ])) : k("", !0),
-              o.multiselect ? k("", !0) : (p(), f("span", Ve, V(Array.isArray(s.value) ? "" : s.value.name), 1)),
-              o.addChanger && !o.multiselect && h(t).items.value.length > 1 && !o.disabled ? (p(), f("span", {
-                key: 2,
-                class: "top-changer top-changer-selector",
-                "data-top-popup-disabled": "true",
-                onClick: i[0] || (i[0] = //@ts-ignore
-                (...m) => h(t).selectNextItem && h(t).selectNextItem(...m))
-              })) : k("", !0)
-            ]),
-            _: 1
-          }, 40, ["class"])), [
-            [
-              y,
-              o.isError,
-              void 0,
-              { onupdate: !0 }
-            ]
-          ])
-        ]),
-        contentList: A(() => {
-          var m;
-          return [
-            (p(!0), f(_, null, K(h(t).itemsForShow.value, (g) => (p(), $(h(N), {
-              class: C({
-                "top-active": !Array.isArray(s.value) && !o.multiselect && s.value.id === g.id && s.value.name === g.name
-              }),
-              key: g.id ?? void 0,
-              closeByClick: !o.multiselect || h(X).state.isMobile,
-              onClick: (Ee) => v(g)
-            }, {
-              default: A(() => [
-                o.$slots.item ? D(o.$slots, "item", {
-                  key: 0,
-                  item: g
-                }) : (p(), f(_, { key: 1 }, [
-                  I(V(g.name), 1)
-                ], 64))
-              ]),
-              _: 2
-            }, 1032, ["class", "closeByClick", "onClick"]))), 128)),
-            !h(r).isLoading.value && !h(t).itemsForShow.value.length ? (p(), $(h(N), {
-              key: 0,
-              type: "regular"
-            }, {
-              default: A(() => [
-                I(V(o.$i18n.Common.No_results), 1)
-              ]),
-              _: 1
-            })) : k("", !0),
-            h(r).isLoading.value && (o.searchType !== "popup" || (m = o.apiRequest) != null && m.params.offset) ? (p(), $(h(N), {
-              key: 1,
-              type: "regular"
-            }, {
-              default: A(() => [
-                G(h(le), { type: "circles" })
-              ]),
-              _: 1
-            })) : k("", !0)
-          ];
-        }),
-        _: 2
-      }, [
-        o.searchType === "popup" ? {
-          name: "widget",
-          fn: A(() => {
-            var m;
-            return [
-              G(h(ae), {
-                title: "Поиск",
-                icon: "",
-                modelValue: h(t).searchText.value,
-                "onUpdate:modelValue": i[3] || (i[3] = (g) => h(t).searchText.value = g),
-                isLoading: h(r).isLoading.value && !((m = o.apiRequest) != null && m.params.offset),
-                placeholder: T.value
-              }, null, 8, ["modelValue", "isLoading", "placeholder"])
-            ];
-          }),
-          key: "0"
-        } : void 0
-      ]), 1024);
-    };
-  }
-}), Ie = ["data-top-icon"], Be = { class: "top-info_text" }, Se = {
-  key: 0,
-  class: "top-info_value"
-}, Le = /* @__PURE__ */ B({
-  __name: "info",
-  props: {
-    icon: {},
-    styling: { default: "default" },
-    size: { default: "default" }
-  },
-  setup(l) {
-    return (e, s) => (p(), f("div", {
-      class: C({
-        "top-info": !0,
-        ["top-size_" + e.size]: !0,
-        ["top-info-styling_" + e.styling]: !0
-      }),
-      "data-top-icon": e.icon
-    }, [
-      L("div", Be, [
-        D(e.$slots, "default")
-      ]),
-      e.$slots.additional ? (p(), f("span", Se, [
-        D(e.$slots, "additional")
-      ])) : k("", !0)
-    ], 10, Ie));
-  }
-}), Ne = ue, Oe = pe, De = ve, Fe = be, He = we, Ue = ne, We = Le;
-export {
-  Fe as TopCheckboxGroup,
-  Ne as TopEditArea,
-  Oe as TopEditInput,
-  We as TopInfo,
-  Ue as TopMenu,
-  De as TopRadioGroup,
-  He as TopSelector2
-};
-//# sourceMappingURL=formsExt.js.map