@windwalker-io/unicorn-next 0.1.3 → 0.1.5
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/dist/chunks/field-modal-tree.js +5 -2
- package/dist/chunks/field-modal-tree.js.map +1 -1
- package/dist/chunks/field-multi-uploader.js +5 -1
- package/dist/chunks/field-multi-uploader.js.map +1 -1
- package/dist/chunks/legacy.js +2 -2
- package/dist/chunks/legacy.js.map +1 -1
- package/dist/chunks/unicorn.js +6 -4
- package/dist/chunks/unicorn.js.map +1 -1
- package/dist/chunks/validation.js.map +1 -1
- package/dist/index.d.ts +46 -24
- package/dist/unicorn.js +1 -1
- package/package.json +1 -1
- package/src/composable/useFieldModalTree.ts +2 -2
- package/src/composable/useFieldMultiUploader.ts +8 -2
- package/src/composable/useValidation.ts +17 -6
- package/src/legacy/legacy.ts +2 -2
- package/src/module/field-multi-uploader.ts +6 -1
- package/src/module/validation.ts +31 -11
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ad as forceArray, u as useHttpClient,
|
|
1
|
+
import { ad as forceArray, u as useHttpClient, ab as useCssImport, ac as data } from "./unicorn.js";
|
|
2
2
|
import { defineComponent, ref, computed, h, Transition, withDirectives, mergeProps, vShow, unref, inject, watch, onBeforeUpdate, nextTick, onMounted, createElementBlock, openBlock, normalizeClass, createElementVNode, createBlock, createCommentVNode, normalizeStyle, vModelDynamic, withModifiers, createTextVNode, toDisplayString, withCtx, Fragment, renderList, useTemplateRef, onUnmounted, provide, vModelText, createVNode, TransitionGroup, createApp } from "vue";
|
|
3
3
|
import { Modal } from "bootstrap";
|
|
4
4
|
import { c as cloneDeep } from "./cloneDeep.js";
|
|
@@ -789,5 +789,8 @@ async function init() {
|
|
|
789
789
|
customElements.define(ModalTreeElement.is, ModalTreeElement);
|
|
790
790
|
await useCssImport("@vue-animate");
|
|
791
791
|
}
|
|
792
|
-
/* @__PURE__ */ init();
|
|
792
|
+
const ready = /* @__PURE__ */ init();
|
|
793
|
+
export {
|
|
794
|
+
ready
|
|
795
|
+
};
|
|
793
796
|
//# sourceMappingURL=field-modal-tree.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-modal-tree.js","sources":["../../src/utilities/tree.ts","../../../../../../node_modules/vue3-slide-up-down/dist/vue3-slide-up-down.js","../../src/vue/components/ModalTree/TreeItem.vue","../../src/vue/components/ModalTree/TreeItem.vue","../../src/vue/components/ModalTree/TreeModal.vue","../../src/vue/components/ModalTree/TreeModal.vue","../../src/vue/components/ModalTree/ModalTreeApp.vue","../../src/vue/components/ModalTree/ModalTreeApp.vue","../../src/module/field-modal-tree.ts"],"sourcesContent":["import { TreeNode } from '../types';\r\n\r\nexport function flattenChildren(children: TreeNode[]) {\r\n const flat: TreeNode[] = [];\r\n\r\n function loopChildren(children: TreeNode[]) {\r\n for (const child of children) {\r\n if (child.children.length === 0) {\r\n flat.push(child);\r\n continue;\r\n }\r\n\r\n loopChildren(child.children);\r\n }\r\n }\r\n\r\n loopChildren(children);\r\n return flat;\r\n}\r\n\r\n","import { defineComponent as C, ref as E, computed as h, h as p, Transition as W, withDirectives as F, mergeProps as L, vShow as k, unref as b } from \"vue\";\nfunction y(t) {\n return {\n height: t.style.height,\n width: t.style.width,\n position: t.style.position,\n visibility: t.style.visibility,\n overflow: t.style.overflow,\n paddingTop: t.style.paddingTop,\n paddingBottom: t.style.paddingBottom,\n borderTopWidth: t.style.borderTopWidth,\n borderBottomWidth: t.style.borderBottomWidth,\n marginTop: t.style.marginTop,\n marginBottom: t.style.marginBottom\n };\n}\nfunction V(t, o, i) {\n const e = b(t), { width: n } = getComputedStyle(o);\n o.style.width = n, o.style.position = \"absolute\", o.style.visibility = \"hidden\", o.style.height = \"\";\n const { height: s } = getComputedStyle(o);\n return o.style.width = i.width, o.style.position = i.position, o.style.visibility = i.visibility, o.style.height = e, o.style.overflow = \"hidden\", i.height && i.height != e ? i.height : s;\n}\nfunction f(t, o, i, e, n) {\n const s = t.animate(e, n);\n t.style.height = o.height, s.onfinish = () => {\n t.style.overflow = o.overflow, i();\n };\n}\nfunction m(t, o, i, e) {\n const n = b(o);\n return [\n {\n height: n,\n opacity: t.opacityClosed,\n paddingTop: n,\n paddingBottom: n,\n borderTopWidth: n,\n borderBottomWidth: n,\n marginTop: n,\n marginBottom: n\n },\n {\n height: i,\n opacity: t.opacityOpen,\n paddingTop: e.paddingTop || 0,\n paddingBottom: e.paddingBottom || 0,\n borderTopWidth: e.borderTopWidth || 0,\n borderBottomWidth: e.borderBottomWidth || 0,\n marginTop: e.marginTop || 0,\n marginBottom: e.marginBottom || 0\n }\n ];\n}\nconst x = C({\n props: {\n modelValue: {\n type: Boolean,\n default: !1\n },\n /**\n * Time in milliseconds for the slide duration\n */\n duration: {\n type: Number,\n default: 500\n },\n /**\n * Timing function for the animation\n */\n timingFunction: {\n type: String,\n default: \"ease-in-out\"\n },\n /**\n * Independent timing function for the animation when entering\n */\n timingFunctionEnter: {\n type: String,\n default: null\n },\n /**\n * Independent timing function for the animation when leaving\n */\n timingFunctionLeave: {\n type: String,\n default: null\n },\n /**\n * Opacity value from 0 - 1 of the element when open\n */\n opacityOpen: {\n type: Number,\n default: 1\n },\n /**\n * Opacity value from 0 - 1 of the element when closed\n */\n opacityClosed: {\n type: Number,\n default: 0\n },\n /**\n * HTML tag to use for the outer container\n */\n tag: {\n type: String,\n default: \"div\"\n },\n /**\n * Always render the element inside the slide container\n */\n eager: {\n type: Boolean,\n default: !1\n }\n },\n emits: [\"update:modelValue\", \"open-start\", \"open-end\", \"close-start\", \"close-end\"],\n setup(t, { slots: o, attrs: i, emit: e }) {\n const n = E(\"0px\"), s = h(() => t.timingFunctionEnter || t.timingFunction), v = h(() => t.timingFunctionLeave || t.timingFunction);\n function T(g, l) {\n const d = g, a = y(d), r = V(n, d, a), u = m(t, n, r, a), c = { duration: t.duration, easing: s.value };\n f(d, a, () => {\n l(), e(\"open-end\");\n }, u, c);\n }\n function B(g, l) {\n const d = g, a = y(d), { height: r } = getComputedStyle(d);\n d.style.height = r, d.style.overflow = \"hidden\";\n const u = m(t, n, r, a).reverse(), c = { duration: t.duration, easing: v.value };\n f(d, a, () => {\n l(), e(\"close-end\");\n }, u, c);\n }\n return () => p(\n W,\n {\n css: !1,\n persisted: t.eager,\n onBeforeEnter: () => e(\"open-start\"),\n onEnter: T,\n onBeforeLeave: () => e(\"close-start\"),\n onLeave: B\n },\n {\n default: () => t.modelValue || t.eager ? F(\n p(\n t.tag,\n L(i, {\n class: \"slide-up-down__container\"\n }),\n o\n ),\n [t.eager ? [k, t.modelValue === !0] : [null]]\n ) : null\n }\n );\n }\n});\nexport {\n x as Vue3SlideUpDown\n};\n","<script setup lang=\"ts\">\r\nimport { type ComponentPublicInstance, type ComputedRef, computed, inject, nextTick, onBeforeUpdate, onMounted, ref, watch } from 'vue';\r\nimport { Vue3SlideUpDown } from 'vue3-slide-up-down';\r\nimport { TitleGetter, TreeNode, ValueGetter } from '../../../types';\r\nimport { flattenChildren } from '../../../utilities';\r\nimport TreeItem from './TreeItem.vue';\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n node: TreeNode;\r\n level?: number;\r\n branchSelectable?: boolean;\r\n }>(),\r\n {\r\n level: 1,\r\n branchSelectable: false,\r\n }\r\n);\r\n\r\nconst emit = defineEmits<{\r\n change: [checked: boolean];\r\n input: [checked: boolean];\r\n}>();\r\n\r\nconst node = ref<TreeNode>(props.node);\r\n// const selectNode = inject<(node: TreeNode, select: boolean) => any>('selectNode');\r\nconst selectedValues = inject<ComputedRef<(string | number)[]>>('selectedValues');\r\nconst id = inject('id');\r\nconst multiple = inject('multiple');\r\nconst valueGetter = inject<ValueGetter>('valueGetter');\r\nconst titleGetter = inject<TitleGetter>('titleGetter');\r\n\r\nconst selected = ref(false);\r\nconst indeterminate = computed(() => !!props.node.indeterminate);\r\nconst stopWatch = ref(false);\r\nconst open = ref(false);\r\nconst childrenComponents = ref<ComponentPublicInstance<typeof TreeItem>[]>([]);\r\n\r\nwatch(() => props.node, () => {\r\n selected.value = !!props.node.selected;\r\n}, { deep: true });\r\n\r\nfunction setChildrenComponent(child: ComponentPublicInstance<typeof TreeItem>) {\r\n childrenComponents.value.push(child);\r\n}\r\n\r\nonBeforeUpdate(() => {\r\n childrenComponents.value = [];\r\n});\r\n\r\nconst indentPx = computed(() => {\r\n return (props.level - 1) * 15;\r\n});\r\n\r\nconst isBranch = computed(() => {\r\n return props.node.children.length > 0;\r\n});\r\n\r\nconst isLeaf = computed(() => {\r\n return !isBranch.value;\r\n});\r\n\r\nfunction updateSelected() {\r\n if (isBranch.value) {\r\n return;\r\n }\r\n\r\n node.value.selected = selectedValues.value.includes(valueGetter(props.node.value));\r\n}\r\n\r\nfunction select(select: boolean) {\r\n if (selected.value === select) {\r\n return;\r\n }\r\n\r\n node.value.selected = select;\r\n\r\n checkboxChanged(select);\r\n}\r\n\r\nfunction checkboxChanged(v: boolean) {\r\n if (isBranch.value) {\r\n node.value.selected = v;\r\n\r\n if (multiple) {\r\n stopWatchThen(() => {\r\n const flatChildren = flattenChildren(node.value.children);\r\n for (const child of flatChildren) {\r\n child.selected = v;\r\n child.indeterminate = false;\r\n }\r\n });\r\n // syncChildrenStatus();\r\n }\r\n } else {\r\n nextTick(() => {\r\n node.value.selected = v;\r\n });\r\n }\r\n emit('change', v);\r\n emit('input', v);\r\n}\r\n\r\nfunction childChanged(v: boolean) {\r\n if (isLeaf.value || stopWatch.value) {\r\n return;\r\n }\r\n if (!childrenComponents.value) {\r\n return;\r\n }\r\n if (childrenComponents.value.length === 0) {\r\n return;\r\n }\r\n syncChildrenStatus();\r\n}\r\n\r\nfunction syncChildrenStatus() {\r\n if (isLeaf.value) {\r\n return;\r\n }\r\n let selectedCount = 0;\r\n let unselectCount = 0;\r\n let indeterminateInner = 0;\r\n const oldIndeterminate = indeterminate.value;\r\n const oldSelected = selected.value;\r\n \r\n for (const child of flattenChildren(props.node.children)) {\r\n if (child.selected) {\r\n selectedCount++;\r\n } else {\r\n unselectCount++;\r\n }\r\n\r\n if (child.indeterminate) {\r\n indeterminateInner++;\r\n }\r\n }\r\n\r\n // for (const childComponent of childrenComponents.value) {\r\n // if (childComponent.selected) {\r\n // checked++;\r\n // } else {\r\n // unchecked++;\r\n // }\r\n // if (childComponent.indeterminate) {\r\n // indeterminateInner++;\r\n // }\r\n // }\r\n\r\n if ((selectedCount !== 0 && unselectCount !== 0) || indeterminateInner > 0) {\r\n node.value.indeterminate = true;\r\n } else {\r\n node.value.selected = unselectCount === 0;\r\n node.value.indeterminate = false;\r\n }\r\n\r\n if (\r\n selected.value !== oldSelected\r\n || indeterminate.value !== oldIndeterminate\r\n ) {\r\n emit('change', selected.value);\r\n emit('input', selected.value);\r\n }\r\n}\r\n\r\nfunction stopWatchThen(callback: () => any) {\r\n stopWatch.value = true;\r\n callback();\r\n stopWatch.value = false;\r\n}\r\n\r\nwatch(() => selectedValues, async () => {\r\n if (!isBranch.value) {\r\n updateSelected();\r\n }\r\n await nextTick();\r\n\r\n syncChildrenStatus();\r\n}, { deep: true });\r\n\r\nwatch(selected, (v) => {\r\n});\r\n\r\nupdateSelected();\r\n\r\nonMounted(() => {\r\n syncChildrenStatus();\r\n});\r\n\r\ndefineExpose({\r\n select,\r\n selected,\r\n indeterminate\r\n});\r\n</script>\r\n\r\n<template>\r\n <div class=\"c-tree-item\"\r\n :class=\"[ isBranch ? 'c-tree-item--branch' : 'c-tree-item--leaf' ]\">\r\n <div class=\"d-flex c-tree-item__title\"\r\n :style=\"{ 'padding-left': indentPx + 'px' }\"\r\n :class=\"[ isBranch ? 'bg-light ' : '' ]\">\r\n <div class=\"p-2 ms-2\">\r\n <input\r\n :type=\"multiple ? 'checkbox' : 'radio'\"\r\n class=\"form-check-input\"\r\n v-if=\"isLeaf || (branchSelectable && multiple)\"\r\n :id=\"id + '__item-' + valueGetter(node.value)\"\r\n v-model=\"selected\"\r\n :value=\"true\"\r\n :unchecked-value=\"false\"\r\n :indeterminate.sync=\"indeterminate\"\r\n @change=\"checkboxChanged(($event.target as HTMLInputElement).checked)\"\r\n />\r\n <input v-else\r\n :type=\"multiple ? 'checkbox' : 'radio'\"\r\n class=\"form-check-input\"\r\n disabled\r\n :checked=\"indeterminate\" :indeterminate.sync=\"indeterminate\" />\r\n </div>\r\n <a class=\"c-tree-item__text d-flex align-items-center flex-grow-1 py-2 text-decoration-none\"\r\n style=\"cursor: pointer;\"\r\n :data-level=\"level\"\r\n data-bs-toggle=\"collapse\"\r\n @click.prevent=\"isLeaf ? select(!selected) : open = !open\">\r\n <span class=\"me-2 fa\" :class=\"[ isLeaf ? 'fa-tag' : 'fa-folder' ]\"></span>\r\n\r\n {{ node.value.title }}\r\n\r\n <span v-if=\"isBranch\" class=\"ms-auto me-3\">\r\n <span :class=\"[ open ? 'fa fa-chevron-up' : 'fa fa-chevron-down' ]\"></span>\r\n </span>\r\n </a>\r\n </div>\r\n\r\n <Vue3SlideUpDown\r\n v-if=\"node.children.length > 0\"\r\n v-model=\"open\"\r\n :duration=\"300\"\r\n class=\"c-tree-item__children\"\r\n >\r\n <TreeItem v-for=\"(child, i) of node.children\"\r\n :node=\"child\"\r\n :key=\"valueGetter(child.value)\"\r\n :level=\"level + 1\"\r\n :branch-selectable=\"branchSelectable\"\r\n :ref=\"setChildrenComponent\"\r\n @change=\"childChanged\"\r\n />\r\n </Vue3SlideUpDown>\r\n </div>\r\n</template>\r\n\r\n<style scoped lang=\"scss\">\r\n.c-tree-item {\r\n &__title {\r\n border-bottom: 1px solid #ddd;\r\n }\r\n\r\n cursor: pointer;\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nimport { type ComponentPublicInstance, type ComputedRef, computed, inject, nextTick, onBeforeUpdate, onMounted, ref, watch } from 'vue';\r\nimport { Vue3SlideUpDown } from 'vue3-slide-up-down';\r\nimport { TitleGetter, TreeNode, ValueGetter } from '../../../types';\r\nimport { flattenChildren } from '../../../utilities';\r\nimport TreeItem from './TreeItem.vue';\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n node: TreeNode;\r\n level?: number;\r\n branchSelectable?: boolean;\r\n }>(),\r\n {\r\n level: 1,\r\n branchSelectable: false,\r\n }\r\n);\r\n\r\nconst emit = defineEmits<{\r\n change: [checked: boolean];\r\n input: [checked: boolean];\r\n}>();\r\n\r\nconst node = ref<TreeNode>(props.node);\r\n// const selectNode = inject<(node: TreeNode, select: boolean) => any>('selectNode');\r\nconst selectedValues = inject<ComputedRef<(string | number)[]>>('selectedValues');\r\nconst id = inject('id');\r\nconst multiple = inject('multiple');\r\nconst valueGetter = inject<ValueGetter>('valueGetter');\r\nconst titleGetter = inject<TitleGetter>('titleGetter');\r\n\r\nconst selected = ref(false);\r\nconst indeterminate = computed(() => !!props.node.indeterminate);\r\nconst stopWatch = ref(false);\r\nconst open = ref(false);\r\nconst childrenComponents = ref<ComponentPublicInstance<typeof TreeItem>[]>([]);\r\n\r\nwatch(() => props.node, () => {\r\n selected.value = !!props.node.selected;\r\n}, { deep: true });\r\n\r\nfunction setChildrenComponent(child: ComponentPublicInstance<typeof TreeItem>) {\r\n childrenComponents.value.push(child);\r\n}\r\n\r\nonBeforeUpdate(() => {\r\n childrenComponents.value = [];\r\n});\r\n\r\nconst indentPx = computed(() => {\r\n return (props.level - 1) * 15;\r\n});\r\n\r\nconst isBranch = computed(() => {\r\n return props.node.children.length > 0;\r\n});\r\n\r\nconst isLeaf = computed(() => {\r\n return !isBranch.value;\r\n});\r\n\r\nfunction updateSelected() {\r\n if (isBranch.value) {\r\n return;\r\n }\r\n\r\n node.value.selected = selectedValues.value.includes(valueGetter(props.node.value));\r\n}\r\n\r\nfunction select(select: boolean) {\r\n if (selected.value === select) {\r\n return;\r\n }\r\n\r\n node.value.selected = select;\r\n\r\n checkboxChanged(select);\r\n}\r\n\r\nfunction checkboxChanged(v: boolean) {\r\n if (isBranch.value) {\r\n node.value.selected = v;\r\n\r\n if (multiple) {\r\n stopWatchThen(() => {\r\n const flatChildren = flattenChildren(node.value.children);\r\n for (const child of flatChildren) {\r\n child.selected = v;\r\n child.indeterminate = false;\r\n }\r\n });\r\n // syncChildrenStatus();\r\n }\r\n } else {\r\n nextTick(() => {\r\n node.value.selected = v;\r\n });\r\n }\r\n emit('change', v);\r\n emit('input', v);\r\n}\r\n\r\nfunction childChanged(v: boolean) {\r\n if (isLeaf.value || stopWatch.value) {\r\n return;\r\n }\r\n if (!childrenComponents.value) {\r\n return;\r\n }\r\n if (childrenComponents.value.length === 0) {\r\n return;\r\n }\r\n syncChildrenStatus();\r\n}\r\n\r\nfunction syncChildrenStatus() {\r\n if (isLeaf.value) {\r\n return;\r\n }\r\n let selectedCount = 0;\r\n let unselectCount = 0;\r\n let indeterminateInner = 0;\r\n const oldIndeterminate = indeterminate.value;\r\n const oldSelected = selected.value;\r\n \r\n for (const child of flattenChildren(props.node.children)) {\r\n if (child.selected) {\r\n selectedCount++;\r\n } else {\r\n unselectCount++;\r\n }\r\n\r\n if (child.indeterminate) {\r\n indeterminateInner++;\r\n }\r\n }\r\n\r\n // for (const childComponent of childrenComponents.value) {\r\n // if (childComponent.selected) {\r\n // checked++;\r\n // } else {\r\n // unchecked++;\r\n // }\r\n // if (childComponent.indeterminate) {\r\n // indeterminateInner++;\r\n // }\r\n // }\r\n\r\n if ((selectedCount !== 0 && unselectCount !== 0) || indeterminateInner > 0) {\r\n node.value.indeterminate = true;\r\n } else {\r\n node.value.selected = unselectCount === 0;\r\n node.value.indeterminate = false;\r\n }\r\n\r\n if (\r\n selected.value !== oldSelected\r\n || indeterminate.value !== oldIndeterminate\r\n ) {\r\n emit('change', selected.value);\r\n emit('input', selected.value);\r\n }\r\n}\r\n\r\nfunction stopWatchThen(callback: () => any) {\r\n stopWatch.value = true;\r\n callback();\r\n stopWatch.value = false;\r\n}\r\n\r\nwatch(() => selectedValues, async () => {\r\n if (!isBranch.value) {\r\n updateSelected();\r\n }\r\n await nextTick();\r\n\r\n syncChildrenStatus();\r\n}, { deep: true });\r\n\r\nwatch(selected, (v) => {\r\n});\r\n\r\nupdateSelected();\r\n\r\nonMounted(() => {\r\n syncChildrenStatus();\r\n});\r\n\r\ndefineExpose({\r\n select,\r\n selected,\r\n indeterminate\r\n});\r\n</script>\r\n\r\n<template>\r\n <div class=\"c-tree-item\"\r\n :class=\"[ isBranch ? 'c-tree-item--branch' : 'c-tree-item--leaf' ]\">\r\n <div class=\"d-flex c-tree-item__title\"\r\n :style=\"{ 'padding-left': indentPx + 'px' }\"\r\n :class=\"[ isBranch ? 'bg-light ' : '' ]\">\r\n <div class=\"p-2 ms-2\">\r\n <input\r\n :type=\"multiple ? 'checkbox' : 'radio'\"\r\n class=\"form-check-input\"\r\n v-if=\"isLeaf || (branchSelectable && multiple)\"\r\n :id=\"id + '__item-' + valueGetter(node.value)\"\r\n v-model=\"selected\"\r\n :value=\"true\"\r\n :unchecked-value=\"false\"\r\n :indeterminate.sync=\"indeterminate\"\r\n @change=\"checkboxChanged(($event.target as HTMLInputElement).checked)\"\r\n />\r\n <input v-else\r\n :type=\"multiple ? 'checkbox' : 'radio'\"\r\n class=\"form-check-input\"\r\n disabled\r\n :checked=\"indeterminate\" :indeterminate.sync=\"indeterminate\" />\r\n </div>\r\n <a class=\"c-tree-item__text d-flex align-items-center flex-grow-1 py-2 text-decoration-none\"\r\n style=\"cursor: pointer;\"\r\n :data-level=\"level\"\r\n data-bs-toggle=\"collapse\"\r\n @click.prevent=\"isLeaf ? select(!selected) : open = !open\">\r\n <span class=\"me-2 fa\" :class=\"[ isLeaf ? 'fa-tag' : 'fa-folder' ]\"></span>\r\n\r\n {{ node.value.title }}\r\n\r\n <span v-if=\"isBranch\" class=\"ms-auto me-3\">\r\n <span :class=\"[ open ? 'fa fa-chevron-up' : 'fa fa-chevron-down' ]\"></span>\r\n </span>\r\n </a>\r\n </div>\r\n\r\n <Vue3SlideUpDown\r\n v-if=\"node.children.length > 0\"\r\n v-model=\"open\"\r\n :duration=\"300\"\r\n class=\"c-tree-item__children\"\r\n >\r\n <TreeItem v-for=\"(child, i) of node.children\"\r\n :node=\"child\"\r\n :key=\"valueGetter(child.value)\"\r\n :level=\"level + 1\"\r\n :branch-selectable=\"branchSelectable\"\r\n :ref=\"setChildrenComponent\"\r\n @change=\"childChanged\"\r\n />\r\n </Vue3SlideUpDown>\r\n </div>\r\n</template>\r\n\r\n<style scoped lang=\"scss\">\r\n.c-tree-item {\r\n &__title {\r\n border-bottom: 1px solid #ddd;\r\n }\r\n\r\n cursor: pointer;\r\n}\r\n</style>\r\n","<script lang=\"ts\" setup>\r\nimport { Modal } from 'bootstrap';\r\nimport { computed, getCurrentInstance, inject, onMounted, onUnmounted, provide, ref, useTemplateRef, watch } from 'vue';\r\nimport { useHttpClient } from '../../../composable';\r\nimport { forceArray } from '../../../service';\r\nimport { MaybeArray, ModalTreeSource, SearchMatcher, TitleGetter, TreeNode, ValueGetter } from '../../../types';\r\nimport { flattenChildren } from '../../../utilities';\r\nimport TreeItem from './TreeItem.vue';\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n open?: boolean;\r\n id?: string;\r\n name?: string;\r\n types?: string[];\r\n title?: string;\r\n disabled?: boolean;\r\n readonly?: boolean;\r\n value?: MaybeArray<string | number>;\r\n branchSelectable?: boolean;\r\n source?: ModalTreeSource;\r\n searchText?: string;\r\n }>(),\r\n {\r\n branchSelectable: false,\r\n }\r\n);\r\n\r\nconst emits = defineEmits<{\r\n change: [value: any];\r\n input: [value: any];\r\n selected: [items: any[]];\r\n hide: [];\r\n}>();\r\n\r\n// provide('selectNode', selectNode);\r\n\r\nconst valueGetter = inject<ValueGetter>('valueGetter');\r\nconst titleGetter = inject<TitleGetter>('titleGetter');\r\nconst searchMatcher = inject<SearchMatcher>('searchMatcher');\r\n\r\nconst loading = ref(false);\r\nconst multiple = inject<boolean>('multiple', false);\r\nconst modalElement = useTemplateRef<HTMLDivElement>('modal')\r\n\r\nlet $modal: Modal;\r\n\r\nonMounted(() => {\r\n $modal = Modal.getOrCreateInstance(modalElement.value!);\r\n modalElement.value!.addEventListener('show.bs.modal', onShow);\r\n modalElement.value!.addEventListener('hide.bs.modal', onHide);\r\n});\r\n\r\nonUnmounted(() => {\r\n modalElement.value!.removeEventListener('show.bs.modal', onShow);\r\n modalElement.value!.removeEventListener('hide.bs.modal', onHide);\r\n});\r\n\r\n// Items\r\nconst nodes = ref<TreeNode[]>([]);\r\nconst selectedNodes = ref<TreeNode[]>([]);\r\n\r\nconst displayNodes = computed(() => {\r\n if (searchEnabled.value) {\r\n return searchedItems.value;\r\n }\r\n return nodes.value;\r\n});\r\n\r\nconst flatNodes = computed(() => flattenChildren(nodes.value));\r\n\r\nconst selectedValues = computed(() => {\r\n return flatNodes.value.filter((node) => node.selected).map((node) => valueGetter(node.value));\r\n});\r\n\r\nprovide('selectedValues', selectedValues);\r\n\r\nwatch(() => selectedValues, () => {\r\n emits('change', selectedValues.value);\r\n emits('input', selectedValues.value);\r\n emits('selected', selectedNodes.value);\r\n});\r\n\r\n// function selectNode(node: TreeNode, select: boolean) {\r\n// node.selected = select;\r\n//\r\n// // if (select) {\r\n// // if (!multiple) {\r\n// // selectedNodes.value = [];\r\n// // }\r\n// // if (!selectedValues.value.includes(valueGetter(node.value))) {\r\n// // selectedNodes.value.push(node);\r\n// // }\r\n// // } else {\r\n// // selectedNodes.value = selectedNodes.value.filter(\r\n// // (selectedNode: TreeNode) => valueGetter(selectedNode.value) !== valueGetter(node.value)\r\n// // );\r\n// // }\r\n// emits('change', selectedValues.value);\r\n// emits('input', selectedValues.value);\r\n// emits('selected', selectedNodes.value);\r\n// }\r\n\r\nconst canModify = computed(() => {\r\n return !props.readonly && !props.disabled;\r\n});\r\n\r\n// Search\r\nconst q = ref('');\r\nconst searchEnabled = computed(() => q.value !== '');\r\n\r\nconst searchedItems = computed(() => {\r\n if (q.value === '') {\r\n return [];\r\n }\r\n\r\n return flatNodes.value.filter((item: TreeNode) => {\r\n return searchMatcher(item.value, q.value);\r\n });\r\n});\r\n\r\nasync function loadItems() {\r\n loading.value = true;\r\n const http = await useHttpClient();\r\n try {\r\n let src = props.source;\r\n\r\n if (typeof src === 'string') {\r\n const res = await http.get(src);\r\n nodes.value = res.data.data;\r\n } else if (typeof src === 'function') {\r\n nodes.value = await src();\r\n } else {\r\n if (!Array.isArray(src)) {\r\n src = src.children;\r\n }\r\n\r\n nodes.value = src;\r\n }\r\n } finally {\r\n loading.value = false;\r\n }\r\n}\r\n\r\n// Modal Control\r\nwatch(() => props.open, (v) => {\r\n if (v) {\r\n $modal.show();\r\n } else {\r\n $modal.hide();\r\n }\r\n});\r\n\r\nasync function onShow() {\r\n await loadItems();\r\n updateSelectedItemsByValue();\r\n}\r\n\r\nfunction onHide() {\r\n nodes.value = [];\r\n q.value = '';\r\n emits('hide');\r\n}\r\n\r\nfunction updateSelectedItemsByValue() {\r\n const values = forceArray(props.value);\r\n\r\n selectedNodes.value = flatNodes.value\r\n .filter((item: TreeNode) => {\r\n return values.includes(valueGetter(item.value));\r\n });\r\n}\r\n\r\nwatch(\r\n () => props.value,\r\n () => updateSelectedItemsByValue(),\r\n { immediate: true, deep: true }\r\n);\r\n\r\n</script>\r\n\r\n<template>\r\n <div ref=\"modal\" class=\"modal fade\" :id=\"`${id}__modal`\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"-modal-label\"\r\n aria-hidden=\"true\">\r\n <div class=\"modal-dialog\" role=\"document\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h4 class=\"modal-title\" :id=\"`${id}__modal-label`\">\r\n {{ title }}\r\n </h4>\r\n <button type=\"button\" class=\"close btn-close\" data-bs-dismiss=\"modal\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n <span aria-hidden=\"true\" class=\"visually-hidden\">×</span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"modal-body p-0\">\r\n <div class=\"std-form box-list m-3\">\r\n <div class=\"form-group\">\r\n <input type=\"search\" class=\"form-control\" :placeholder=\"searchText\"\r\n v-model=\"q\" />\r\n </div>\r\n </div>\r\n\r\n <div v-if=\"!loading\" class=\"box-list__items\">\r\n <TreeItem v-for=\"node of displayNodes\"\r\n :node\r\n :key=\"valueGetter(node.value)\"\r\n :level=\"1\"\r\n :branchSelectable\r\n />\r\n </div>\r\n <div v-else>\r\n <div class=\"d-flex justify-content-center\">\r\n <div class=\"spinner-border spinner-border-sm my-3\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<style scoped>\r\n\r\n</style>\r\n","<script lang=\"ts\" setup>\r\nimport { Modal } from 'bootstrap';\r\nimport { computed, getCurrentInstance, inject, onMounted, onUnmounted, provide, ref, useTemplateRef, watch } from 'vue';\r\nimport { useHttpClient } from '../../../composable';\r\nimport { forceArray } from '../../../service';\r\nimport { MaybeArray, ModalTreeSource, SearchMatcher, TitleGetter, TreeNode, ValueGetter } from '../../../types';\r\nimport { flattenChildren } from '../../../utilities';\r\nimport TreeItem from './TreeItem.vue';\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n open?: boolean;\r\n id?: string;\r\n name?: string;\r\n types?: string[];\r\n title?: string;\r\n disabled?: boolean;\r\n readonly?: boolean;\r\n value?: MaybeArray<string | number>;\r\n branchSelectable?: boolean;\r\n source?: ModalTreeSource;\r\n searchText?: string;\r\n }>(),\r\n {\r\n branchSelectable: false,\r\n }\r\n);\r\n\r\nconst emits = defineEmits<{\r\n change: [value: any];\r\n input: [value: any];\r\n selected: [items: any[]];\r\n hide: [];\r\n}>();\r\n\r\n// provide('selectNode', selectNode);\r\n\r\nconst valueGetter = inject<ValueGetter>('valueGetter');\r\nconst titleGetter = inject<TitleGetter>('titleGetter');\r\nconst searchMatcher = inject<SearchMatcher>('searchMatcher');\r\n\r\nconst loading = ref(false);\r\nconst multiple = inject<boolean>('multiple', false);\r\nconst modalElement = useTemplateRef<HTMLDivElement>('modal')\r\n\r\nlet $modal: Modal;\r\n\r\nonMounted(() => {\r\n $modal = Modal.getOrCreateInstance(modalElement.value!);\r\n modalElement.value!.addEventListener('show.bs.modal', onShow);\r\n modalElement.value!.addEventListener('hide.bs.modal', onHide);\r\n});\r\n\r\nonUnmounted(() => {\r\n modalElement.value!.removeEventListener('show.bs.modal', onShow);\r\n modalElement.value!.removeEventListener('hide.bs.modal', onHide);\r\n});\r\n\r\n// Items\r\nconst nodes = ref<TreeNode[]>([]);\r\nconst selectedNodes = ref<TreeNode[]>([]);\r\n\r\nconst displayNodes = computed(() => {\r\n if (searchEnabled.value) {\r\n return searchedItems.value;\r\n }\r\n return nodes.value;\r\n});\r\n\r\nconst flatNodes = computed(() => flattenChildren(nodes.value));\r\n\r\nconst selectedValues = computed(() => {\r\n return flatNodes.value.filter((node) => node.selected).map((node) => valueGetter(node.value));\r\n});\r\n\r\nprovide('selectedValues', selectedValues);\r\n\r\nwatch(() => selectedValues, () => {\r\n emits('change', selectedValues.value);\r\n emits('input', selectedValues.value);\r\n emits('selected', selectedNodes.value);\r\n});\r\n\r\n// function selectNode(node: TreeNode, select: boolean) {\r\n// node.selected = select;\r\n//\r\n// // if (select) {\r\n// // if (!multiple) {\r\n// // selectedNodes.value = [];\r\n// // }\r\n// // if (!selectedValues.value.includes(valueGetter(node.value))) {\r\n// // selectedNodes.value.push(node);\r\n// // }\r\n// // } else {\r\n// // selectedNodes.value = selectedNodes.value.filter(\r\n// // (selectedNode: TreeNode) => valueGetter(selectedNode.value) !== valueGetter(node.value)\r\n// // );\r\n// // }\r\n// emits('change', selectedValues.value);\r\n// emits('input', selectedValues.value);\r\n// emits('selected', selectedNodes.value);\r\n// }\r\n\r\nconst canModify = computed(() => {\r\n return !props.readonly && !props.disabled;\r\n});\r\n\r\n// Search\r\nconst q = ref('');\r\nconst searchEnabled = computed(() => q.value !== '');\r\n\r\nconst searchedItems = computed(() => {\r\n if (q.value === '') {\r\n return [];\r\n }\r\n\r\n return flatNodes.value.filter((item: TreeNode) => {\r\n return searchMatcher(item.value, q.value);\r\n });\r\n});\r\n\r\nasync function loadItems() {\r\n loading.value = true;\r\n const http = await useHttpClient();\r\n try {\r\n let src = props.source;\r\n\r\n if (typeof src === 'string') {\r\n const res = await http.get(src);\r\n nodes.value = res.data.data;\r\n } else if (typeof src === 'function') {\r\n nodes.value = await src();\r\n } else {\r\n if (!Array.isArray(src)) {\r\n src = src.children;\r\n }\r\n\r\n nodes.value = src;\r\n }\r\n } finally {\r\n loading.value = false;\r\n }\r\n}\r\n\r\n// Modal Control\r\nwatch(() => props.open, (v) => {\r\n if (v) {\r\n $modal.show();\r\n } else {\r\n $modal.hide();\r\n }\r\n});\r\n\r\nasync function onShow() {\r\n await loadItems();\r\n updateSelectedItemsByValue();\r\n}\r\n\r\nfunction onHide() {\r\n nodes.value = [];\r\n q.value = '';\r\n emits('hide');\r\n}\r\n\r\nfunction updateSelectedItemsByValue() {\r\n const values = forceArray(props.value);\r\n\r\n selectedNodes.value = flatNodes.value\r\n .filter((item: TreeNode) => {\r\n return values.includes(valueGetter(item.value));\r\n });\r\n}\r\n\r\nwatch(\r\n () => props.value,\r\n () => updateSelectedItemsByValue(),\r\n { immediate: true, deep: true }\r\n);\r\n\r\n</script>\r\n\r\n<template>\r\n <div ref=\"modal\" class=\"modal fade\" :id=\"`${id}__modal`\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"-modal-label\"\r\n aria-hidden=\"true\">\r\n <div class=\"modal-dialog\" role=\"document\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h4 class=\"modal-title\" :id=\"`${id}__modal-label`\">\r\n {{ title }}\r\n </h4>\r\n <button type=\"button\" class=\"close btn-close\" data-bs-dismiss=\"modal\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n <span aria-hidden=\"true\" class=\"visually-hidden\">×</span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"modal-body p-0\">\r\n <div class=\"std-form box-list m-3\">\r\n <div class=\"form-group\">\r\n <input type=\"search\" class=\"form-control\" :placeholder=\"searchText\"\r\n v-model=\"q\" />\r\n </div>\r\n </div>\r\n\r\n <div v-if=\"!loading\" class=\"box-list__items\">\r\n <TreeItem v-for=\"node of displayNodes\"\r\n :node\r\n :key=\"valueGetter(node.value)\"\r\n :level=\"1\"\r\n :branchSelectable\r\n />\r\n </div>\r\n <div v-else>\r\n <div class=\"d-flex justify-content-center\">\r\n <div class=\"spinner-border spinner-border-sm my-3\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<style scoped>\r\n\r\n</style>\r\n","<script lang=\"ts\" setup>\r\nimport { cloneDeep } from 'lodash-es';\r\nimport { computed, provide, ref, watch } from 'vue';\r\nimport { forceArray } from '../../../service';\r\nimport {\r\n ValueGetter,\r\n ModalTreeSource,\r\n TitleGetter,\r\n TreeNode,\r\n SearchMatcher,\r\n MaybeArray,\r\n MaybePromise\r\n} from '../../../types';\r\nimport TreeModal from './TreeModal.vue';\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n id?: string;\r\n name?: string;\r\n title?: string;\r\n disabled?: boolean;\r\n readonly?: boolean;\r\n value?: MaybeArray<string | number>;\r\n source?: ModalTreeSource;\r\n items?: MaybeArray<TreeNode> | (() => MaybePromise<MaybeArray<TreeNode>>);\r\n valueGetter?: ValueGetter;\r\n titleGetter?: TitleGetter;\r\n searchMatcher?: SearchMatcher;\r\n modalTitle?: string;\r\n vertical?: boolean;\r\n branchSelectable?: boolean;\r\n selectAllChildren?: boolean;\r\n placeholder?: string;\r\n multiple?: boolean;\r\n buttonText?: string;\r\n itemClass?: string;\r\n searchText?: string;\r\n }>(),\r\n {\r\n branchSelectable: false,\r\n selectAllChildren: false,\r\n placeholder: '- No selected -',\r\n multiple: false,\r\n buttonText: 'Select',\r\n itemClass: 'badge bg-primary badge-pill',\r\n searchText: 'Search',\r\n valueGetter: (item: any) => item.id,\r\n titleGetter: (item: any) => item.title,\r\n }\r\n);\r\n\r\nprovide('id', props.id);\r\nprovide('name', props.name);\r\nprovide('multiple', props.multiple);\r\nprovide('valueGetter', props.valueGetter);\r\nprovide('titleGetter', props.titleGetter);\r\nprovide('searchMatcher', props.searchMatcher ?? defaultSearchMatcher);\r\n\r\nfunction defaultSearchMatcher(item: any, q: string) {\r\n return props.titleGetter(item).toLowerCase().includes(q.toLowerCase());\r\n}\r\n\r\nconst selected = ref<TreeNode[]>([]);\r\nconst value = ref<(string|number)[]>(forceArray(props.value));\r\n\r\n// Modal\r\nconst treeModalOpen = ref(false);\r\n\r\nfunction openSelector() {\r\n treeModalOpen.value = true;\r\n}\r\n\r\nfunction deleteItem(i: number, node: TreeNode) {\r\n selected.value = selected.value.filter((it: TreeNode) => props.valueGetter(it.value) !== props.valueGetter(node.value));\r\n}\r\n\r\nfunction handleSelected(items: any[]) {\r\n selected.value = cloneDeep(items);\r\n}\r\n\r\nwatch(() => props.items, async (v) => {\r\n if (typeof v === 'function') {\r\n v = await v();\r\n }\r\n\r\n selected.value = forceArray(v).filter((node: TreeNode) => {\r\n return value.value.includes(props.valueGetter(node.value));\r\n });\r\n}, { immediate: true });\r\n\r\nconst selectedValues = computed(() => {\r\n return selected.value.map(node => props.valueGetter(node.value));\r\n});\r\n\r\nconst canModify = computed(() => {\r\n return !props.readonly && !props.disabled;\r\n});\r\n\r\n</script>\r\n\r\n<template>\r\n <div class=\"c-modal-tree\">\r\n <div class=\"c-modal-tree__container p-2 d-flex flex-column\"\r\n :class=\"[ vertical ? '' : 'flex-md-row' ]\">\r\n <div v-if=\"canModify\" class=\"me-2 mb-2\"\r\n :class=\"{ 'mb-md-0': !vertical }\">\r\n <div class=\"btn-group\">\r\n <button class=\"btn btn-secondary btn-sm btn-rounded text-nowrap\" type=\"button\"\r\n @click=\"openSelector\">\r\n {{ buttonText }}\r\n </button>\r\n <button class=\"btn btn-secondary btn-sm btn-rounded\" type=\"button\"\r\n @click=\"selected = []\">\r\n <span class=\"fa fa-times\"></span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div v-if=\"selected.length > 0\">\r\n <TransitionGroup name=\"fade\">\r\n <span v-for=\"(node, i) of selected\"\r\n class=\"me-2 mb-2 c-item\"\r\n :class=\"itemClass\"\r\n :key=\"valueGetter(node.value)\"\r\n style=\"animation-duration: .3s\">\r\n <span>{{ titleGetter(node.value) }}</span>\r\n <span type=\"button\" v-if=\"canModify\"\r\n @click.prevent=\"deleteItem(i, node)\" class=\"ms-2\" style=\"cursor: pointer\">\r\n <span class=\"fa fa-times\"></span>\r\n </span>\r\n </span>\r\n </TransitionGroup>\r\n </div>\r\n <div v-else class=\"text-muted\">\r\n {{ placeholder }}\r\n </div>\r\n </div>\r\n\r\n <select multiple\r\n style=\"display: none;\"\r\n ref=\"input\"\r\n :id=\"id\"\r\n :name=\"name\"\r\n :disabled=\"disabled\"\r\n :readonly=\"readonly\"\r\n v-bind=\"$attrs\"\r\n >\r\n <option v-for=\"id of selectedValues\" :value=\"id\" :selected=\"true\">{{ id }}</option>\r\n </select>\r\n\r\n <TreeModal\r\n :open=\"treeModalOpen\"\r\n @hide=\"treeModalOpen = false\"\r\n :id=\"id\"\r\n :title=\"modalTitle\"\r\n :source=\"source\"\r\n :value=\"selectedValues\"\r\n :branchSelectable\r\n v-bind=\"$attrs\"\r\n :disabled=\"disabled\"\r\n :readonly=\"readonly\"\r\n :search-text=\"searchText\"\r\n @selected=\"handleSelected\"\r\n />\r\n </div>\r\n</template>\r\n\r\n<style scoped>\r\n.c-item {\r\n padding-left: .75rem;\r\n padding-right: .75rem;\r\n padding-top: .5rem;\r\n padding-bottom: .5rem;\r\n}\r\n</style>\r\n","<script lang=\"ts\" setup>\r\nimport { cloneDeep } from 'lodash-es';\r\nimport { computed, provide, ref, watch } from 'vue';\r\nimport { forceArray } from '../../../service';\r\nimport {\r\n ValueGetter,\r\n ModalTreeSource,\r\n TitleGetter,\r\n TreeNode,\r\n SearchMatcher,\r\n MaybeArray,\r\n MaybePromise\r\n} from '../../../types';\r\nimport TreeModal from './TreeModal.vue';\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n id?: string;\r\n name?: string;\r\n title?: string;\r\n disabled?: boolean;\r\n readonly?: boolean;\r\n value?: MaybeArray<string | number>;\r\n source?: ModalTreeSource;\r\n items?: MaybeArray<TreeNode> | (() => MaybePromise<MaybeArray<TreeNode>>);\r\n valueGetter?: ValueGetter;\r\n titleGetter?: TitleGetter;\r\n searchMatcher?: SearchMatcher;\r\n modalTitle?: string;\r\n vertical?: boolean;\r\n branchSelectable?: boolean;\r\n selectAllChildren?: boolean;\r\n placeholder?: string;\r\n multiple?: boolean;\r\n buttonText?: string;\r\n itemClass?: string;\r\n searchText?: string;\r\n }>(),\r\n {\r\n branchSelectable: false,\r\n selectAllChildren: false,\r\n placeholder: '- No selected -',\r\n multiple: false,\r\n buttonText: 'Select',\r\n itemClass: 'badge bg-primary badge-pill',\r\n searchText: 'Search',\r\n valueGetter: (item: any) => item.id,\r\n titleGetter: (item: any) => item.title,\r\n }\r\n);\r\n\r\nprovide('id', props.id);\r\nprovide('name', props.name);\r\nprovide('multiple', props.multiple);\r\nprovide('valueGetter', props.valueGetter);\r\nprovide('titleGetter', props.titleGetter);\r\nprovide('searchMatcher', props.searchMatcher ?? defaultSearchMatcher);\r\n\r\nfunction defaultSearchMatcher(item: any, q: string) {\r\n return props.titleGetter(item).toLowerCase().includes(q.toLowerCase());\r\n}\r\n\r\nconst selected = ref<TreeNode[]>([]);\r\nconst value = ref<(string|number)[]>(forceArray(props.value));\r\n\r\n// Modal\r\nconst treeModalOpen = ref(false);\r\n\r\nfunction openSelector() {\r\n treeModalOpen.value = true;\r\n}\r\n\r\nfunction deleteItem(i: number, node: TreeNode) {\r\n selected.value = selected.value.filter((it: TreeNode) => props.valueGetter(it.value) !== props.valueGetter(node.value));\r\n}\r\n\r\nfunction handleSelected(items: any[]) {\r\n selected.value = cloneDeep(items);\r\n}\r\n\r\nwatch(() => props.items, async (v) => {\r\n if (typeof v === 'function') {\r\n v = await v();\r\n }\r\n\r\n selected.value = forceArray(v).filter((node: TreeNode) => {\r\n return value.value.includes(props.valueGetter(node.value));\r\n });\r\n}, { immediate: true });\r\n\r\nconst selectedValues = computed(() => {\r\n return selected.value.map(node => props.valueGetter(node.value));\r\n});\r\n\r\nconst canModify = computed(() => {\r\n return !props.readonly && !props.disabled;\r\n});\r\n\r\n</script>\r\n\r\n<template>\r\n <div class=\"c-modal-tree\">\r\n <div class=\"c-modal-tree__container p-2 d-flex flex-column\"\r\n :class=\"[ vertical ? '' : 'flex-md-row' ]\">\r\n <div v-if=\"canModify\" class=\"me-2 mb-2\"\r\n :class=\"{ 'mb-md-0': !vertical }\">\r\n <div class=\"btn-group\">\r\n <button class=\"btn btn-secondary btn-sm btn-rounded text-nowrap\" type=\"button\"\r\n @click=\"openSelector\">\r\n {{ buttonText }}\r\n </button>\r\n <button class=\"btn btn-secondary btn-sm btn-rounded\" type=\"button\"\r\n @click=\"selected = []\">\r\n <span class=\"fa fa-times\"></span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div v-if=\"selected.length > 0\">\r\n <TransitionGroup name=\"fade\">\r\n <span v-for=\"(node, i) of selected\"\r\n class=\"me-2 mb-2 c-item\"\r\n :class=\"itemClass\"\r\n :key=\"valueGetter(node.value)\"\r\n style=\"animation-duration: .3s\">\r\n <span>{{ titleGetter(node.value) }}</span>\r\n <span type=\"button\" v-if=\"canModify\"\r\n @click.prevent=\"deleteItem(i, node)\" class=\"ms-2\" style=\"cursor: pointer\">\r\n <span class=\"fa fa-times\"></span>\r\n </span>\r\n </span>\r\n </TransitionGroup>\r\n </div>\r\n <div v-else class=\"text-muted\">\r\n {{ placeholder }}\r\n </div>\r\n </div>\r\n\r\n <select multiple\r\n style=\"display: none;\"\r\n ref=\"input\"\r\n :id=\"id\"\r\n :name=\"name\"\r\n :disabled=\"disabled\"\r\n :readonly=\"readonly\"\r\n v-bind=\"$attrs\"\r\n >\r\n <option v-for=\"id of selectedValues\" :value=\"id\" :selected=\"true\">{{ id }}</option>\r\n </select>\r\n\r\n <TreeModal\r\n :open=\"treeModalOpen\"\r\n @hide=\"treeModalOpen = false\"\r\n :id=\"id\"\r\n :title=\"modalTitle\"\r\n :source=\"source\"\r\n :value=\"selectedValues\"\r\n :branchSelectable\r\n v-bind=\"$attrs\"\r\n :disabled=\"disabled\"\r\n :readonly=\"readonly\"\r\n :search-text=\"searchText\"\r\n @selected=\"handleSelected\"\r\n />\r\n </div>\r\n</template>\r\n\r\n<style scoped>\r\n.c-item {\r\n padding-left: .75rem;\r\n padding-right: .75rem;\r\n padding-top: .5rem;\r\n padding-bottom: .5rem;\r\n}\r\n</style>\r\n","import { data } from '../data';\r\nimport { useCssImport } from '../service';\r\nimport { createApp } from 'vue';\r\nimport ModalTreeApp from '../vue/components/ModalTree/ModalTreeApp.vue';\r\n\r\nconst app = createApp({\r\n name: 'modal-tree',\r\n components: {\r\n ModalTreeApp\r\n }\r\n});\r\napp.config.globalProperties.$getData = data;\r\n\r\nclass ModalTreeElement extends HTMLElement {\r\n static is = 'modal-tree';\r\n\r\n vm: any;\r\n\r\n connectedCallback() {\r\n if (!this.vm) {\r\n this.vm = app.mount(this);\r\n }\r\n }\r\n}\r\n\r\nasync function init() {\r\n customElements.define(ModalTreeElement.is, ModalTreeElement);\r\n await useCssImport('@vue-animate');\r\n}\r\n\r\nexport const ready = init();\r\n"],"names":["children","b","C","E","h","p","W","F","L","k","select","_hoisted_1","_createElementBlock","_normalizeClass","_createElementVNode","_normalizeStyle","_withDirectives","_openBlock","_hoisted_2","_hoisted_3","_createTextVNode","_toDisplayString","_hoisted_5","_createBlock","_Fragment","_renderList","_hoisted_4","_hoisted_6","_hoisted_7","_createVNode","_TransitionGroup","_withCtx","_withModifiers","_createCommentVNode","_mergeProps"],"mappings":"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","x_google_ignoreList":[1]}
|
|
1
|
+
{"version":3,"file":"field-modal-tree.js","sources":["../../src/utilities/tree.ts","../../../../../../node_modules/vue3-slide-up-down/dist/vue3-slide-up-down.js","../../src/vue/components/ModalTree/TreeItem.vue","../../src/vue/components/ModalTree/TreeItem.vue","../../src/vue/components/ModalTree/TreeModal.vue","../../src/vue/components/ModalTree/TreeModal.vue","../../src/vue/components/ModalTree/ModalTreeApp.vue","../../src/vue/components/ModalTree/ModalTreeApp.vue","../../src/module/field-modal-tree.ts"],"sourcesContent":["import { TreeNode } from '../types';\r\n\r\nexport function flattenChildren(children: TreeNode[]) {\r\n const flat: TreeNode[] = [];\r\n\r\n function loopChildren(children: TreeNode[]) {\r\n for (const child of children) {\r\n if (child.children.length === 0) {\r\n flat.push(child);\r\n continue;\r\n }\r\n\r\n loopChildren(child.children);\r\n }\r\n }\r\n\r\n loopChildren(children);\r\n return flat;\r\n}\r\n\r\n","import { defineComponent as C, ref as E, computed as h, h as p, Transition as W, withDirectives as F, mergeProps as L, vShow as k, unref as b } from \"vue\";\nfunction y(t) {\n return {\n height: t.style.height,\n width: t.style.width,\n position: t.style.position,\n visibility: t.style.visibility,\n overflow: t.style.overflow,\n paddingTop: t.style.paddingTop,\n paddingBottom: t.style.paddingBottom,\n borderTopWidth: t.style.borderTopWidth,\n borderBottomWidth: t.style.borderBottomWidth,\n marginTop: t.style.marginTop,\n marginBottom: t.style.marginBottom\n };\n}\nfunction V(t, o, i) {\n const e = b(t), { width: n } = getComputedStyle(o);\n o.style.width = n, o.style.position = \"absolute\", o.style.visibility = \"hidden\", o.style.height = \"\";\n const { height: s } = getComputedStyle(o);\n return o.style.width = i.width, o.style.position = i.position, o.style.visibility = i.visibility, o.style.height = e, o.style.overflow = \"hidden\", i.height && i.height != e ? i.height : s;\n}\nfunction f(t, o, i, e, n) {\n const s = t.animate(e, n);\n t.style.height = o.height, s.onfinish = () => {\n t.style.overflow = o.overflow, i();\n };\n}\nfunction m(t, o, i, e) {\n const n = b(o);\n return [\n {\n height: n,\n opacity: t.opacityClosed,\n paddingTop: n,\n paddingBottom: n,\n borderTopWidth: n,\n borderBottomWidth: n,\n marginTop: n,\n marginBottom: n\n },\n {\n height: i,\n opacity: t.opacityOpen,\n paddingTop: e.paddingTop || 0,\n paddingBottom: e.paddingBottom || 0,\n borderTopWidth: e.borderTopWidth || 0,\n borderBottomWidth: e.borderBottomWidth || 0,\n marginTop: e.marginTop || 0,\n marginBottom: e.marginBottom || 0\n }\n ];\n}\nconst x = C({\n props: {\n modelValue: {\n type: Boolean,\n default: !1\n },\n /**\n * Time in milliseconds for the slide duration\n */\n duration: {\n type: Number,\n default: 500\n },\n /**\n * Timing function for the animation\n */\n timingFunction: {\n type: String,\n default: \"ease-in-out\"\n },\n /**\n * Independent timing function for the animation when entering\n */\n timingFunctionEnter: {\n type: String,\n default: null\n },\n /**\n * Independent timing function for the animation when leaving\n */\n timingFunctionLeave: {\n type: String,\n default: null\n },\n /**\n * Opacity value from 0 - 1 of the element when open\n */\n opacityOpen: {\n type: Number,\n default: 1\n },\n /**\n * Opacity value from 0 - 1 of the element when closed\n */\n opacityClosed: {\n type: Number,\n default: 0\n },\n /**\n * HTML tag to use for the outer container\n */\n tag: {\n type: String,\n default: \"div\"\n },\n /**\n * Always render the element inside the slide container\n */\n eager: {\n type: Boolean,\n default: !1\n }\n },\n emits: [\"update:modelValue\", \"open-start\", \"open-end\", \"close-start\", \"close-end\"],\n setup(t, { slots: o, attrs: i, emit: e }) {\n const n = E(\"0px\"), s = h(() => t.timingFunctionEnter || t.timingFunction), v = h(() => t.timingFunctionLeave || t.timingFunction);\n function T(g, l) {\n const d = g, a = y(d), r = V(n, d, a), u = m(t, n, r, a), c = { duration: t.duration, easing: s.value };\n f(d, a, () => {\n l(), e(\"open-end\");\n }, u, c);\n }\n function B(g, l) {\n const d = g, a = y(d), { height: r } = getComputedStyle(d);\n d.style.height = r, d.style.overflow = \"hidden\";\n const u = m(t, n, r, a).reverse(), c = { duration: t.duration, easing: v.value };\n f(d, a, () => {\n l(), e(\"close-end\");\n }, u, c);\n }\n return () => p(\n W,\n {\n css: !1,\n persisted: t.eager,\n onBeforeEnter: () => e(\"open-start\"),\n onEnter: T,\n onBeforeLeave: () => e(\"close-start\"),\n onLeave: B\n },\n {\n default: () => t.modelValue || t.eager ? F(\n p(\n t.tag,\n L(i, {\n class: \"slide-up-down__container\"\n }),\n o\n ),\n [t.eager ? [k, t.modelValue === !0] : [null]]\n ) : null\n }\n );\n }\n});\nexport {\n x as Vue3SlideUpDown\n};\n","<script setup lang=\"ts\">\r\nimport { type ComponentPublicInstance, type ComputedRef, computed, inject, nextTick, onBeforeUpdate, onMounted, ref, watch } from 'vue';\r\nimport { Vue3SlideUpDown } from 'vue3-slide-up-down';\r\nimport { TitleGetter, TreeNode, ValueGetter } from '../../../types';\r\nimport { flattenChildren } from '../../../utilities';\r\nimport TreeItem from './TreeItem.vue';\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n node: TreeNode;\r\n level?: number;\r\n branchSelectable?: boolean;\r\n }>(),\r\n {\r\n level: 1,\r\n branchSelectable: false,\r\n }\r\n);\r\n\r\nconst emit = defineEmits<{\r\n change: [checked: boolean];\r\n input: [checked: boolean];\r\n}>();\r\n\r\nconst node = ref<TreeNode>(props.node);\r\n// const selectNode = inject<(node: TreeNode, select: boolean) => any>('selectNode');\r\nconst selectedValues = inject<ComputedRef<(string | number)[]>>('selectedValues');\r\nconst id = inject('id');\r\nconst multiple = inject('multiple');\r\nconst valueGetter = inject<ValueGetter>('valueGetter');\r\nconst titleGetter = inject<TitleGetter>('titleGetter');\r\n\r\nconst selected = ref(false);\r\nconst indeterminate = computed(() => !!props.node.indeterminate);\r\nconst stopWatch = ref(false);\r\nconst open = ref(false);\r\nconst childrenComponents = ref<ComponentPublicInstance<typeof TreeItem>[]>([]);\r\n\r\nwatch(() => props.node, () => {\r\n selected.value = !!props.node.selected;\r\n}, { deep: true });\r\n\r\nfunction setChildrenComponent(child: ComponentPublicInstance<typeof TreeItem>) {\r\n childrenComponents.value.push(child);\r\n}\r\n\r\nonBeforeUpdate(() => {\r\n childrenComponents.value = [];\r\n});\r\n\r\nconst indentPx = computed(() => {\r\n return (props.level - 1) * 15;\r\n});\r\n\r\nconst isBranch = computed(() => {\r\n return props.node.children.length > 0;\r\n});\r\n\r\nconst isLeaf = computed(() => {\r\n return !isBranch.value;\r\n});\r\n\r\nfunction updateSelected() {\r\n if (isBranch.value) {\r\n return;\r\n }\r\n\r\n node.value.selected = selectedValues.value.includes(valueGetter(props.node.value));\r\n}\r\n\r\nfunction select(select: boolean) {\r\n if (selected.value === select) {\r\n return;\r\n }\r\n\r\n node.value.selected = select;\r\n\r\n checkboxChanged(select);\r\n}\r\n\r\nfunction checkboxChanged(v: boolean) {\r\n if (isBranch.value) {\r\n node.value.selected = v;\r\n\r\n if (multiple) {\r\n stopWatchThen(() => {\r\n const flatChildren = flattenChildren(node.value.children);\r\n for (const child of flatChildren) {\r\n child.selected = v;\r\n child.indeterminate = false;\r\n }\r\n });\r\n // syncChildrenStatus();\r\n }\r\n } else {\r\n nextTick(() => {\r\n node.value.selected = v;\r\n });\r\n }\r\n emit('change', v);\r\n emit('input', v);\r\n}\r\n\r\nfunction childChanged(v: boolean) {\r\n if (isLeaf.value || stopWatch.value) {\r\n return;\r\n }\r\n if (!childrenComponents.value) {\r\n return;\r\n }\r\n if (childrenComponents.value.length === 0) {\r\n return;\r\n }\r\n syncChildrenStatus();\r\n}\r\n\r\nfunction syncChildrenStatus() {\r\n if (isLeaf.value) {\r\n return;\r\n }\r\n let selectedCount = 0;\r\n let unselectCount = 0;\r\n let indeterminateInner = 0;\r\n const oldIndeterminate = indeterminate.value;\r\n const oldSelected = selected.value;\r\n \r\n for (const child of flattenChildren(props.node.children)) {\r\n if (child.selected) {\r\n selectedCount++;\r\n } else {\r\n unselectCount++;\r\n }\r\n\r\n if (child.indeterminate) {\r\n indeterminateInner++;\r\n }\r\n }\r\n\r\n // for (const childComponent of childrenComponents.value) {\r\n // if (childComponent.selected) {\r\n // checked++;\r\n // } else {\r\n // unchecked++;\r\n // }\r\n // if (childComponent.indeterminate) {\r\n // indeterminateInner++;\r\n // }\r\n // }\r\n\r\n if ((selectedCount !== 0 && unselectCount !== 0) || indeterminateInner > 0) {\r\n node.value.indeterminate = true;\r\n } else {\r\n node.value.selected = unselectCount === 0;\r\n node.value.indeterminate = false;\r\n }\r\n\r\n if (\r\n selected.value !== oldSelected\r\n || indeterminate.value !== oldIndeterminate\r\n ) {\r\n emit('change', selected.value);\r\n emit('input', selected.value);\r\n }\r\n}\r\n\r\nfunction stopWatchThen(callback: () => any) {\r\n stopWatch.value = true;\r\n callback();\r\n stopWatch.value = false;\r\n}\r\n\r\nwatch(() => selectedValues, async () => {\r\n if (!isBranch.value) {\r\n updateSelected();\r\n }\r\n await nextTick();\r\n\r\n syncChildrenStatus();\r\n}, { deep: true });\r\n\r\nwatch(selected, (v) => {\r\n});\r\n\r\nupdateSelected();\r\n\r\nonMounted(() => {\r\n syncChildrenStatus();\r\n});\r\n\r\ndefineExpose({\r\n select,\r\n selected,\r\n indeterminate\r\n});\r\n</script>\r\n\r\n<template>\r\n <div class=\"c-tree-item\"\r\n :class=\"[ isBranch ? 'c-tree-item--branch' : 'c-tree-item--leaf' ]\">\r\n <div class=\"d-flex c-tree-item__title\"\r\n :style=\"{ 'padding-left': indentPx + 'px' }\"\r\n :class=\"[ isBranch ? 'bg-light ' : '' ]\">\r\n <div class=\"p-2 ms-2\">\r\n <input\r\n :type=\"multiple ? 'checkbox' : 'radio'\"\r\n class=\"form-check-input\"\r\n v-if=\"isLeaf || (branchSelectable && multiple)\"\r\n :id=\"id + '__item-' + valueGetter(node.value)\"\r\n v-model=\"selected\"\r\n :value=\"true\"\r\n :unchecked-value=\"false\"\r\n :indeterminate.sync=\"indeterminate\"\r\n @change=\"checkboxChanged(($event.target as HTMLInputElement).checked)\"\r\n />\r\n <input v-else\r\n :type=\"multiple ? 'checkbox' : 'radio'\"\r\n class=\"form-check-input\"\r\n disabled\r\n :checked=\"indeterminate\" :indeterminate.sync=\"indeterminate\" />\r\n </div>\r\n <a class=\"c-tree-item__text d-flex align-items-center flex-grow-1 py-2 text-decoration-none\"\r\n style=\"cursor: pointer;\"\r\n :data-level=\"level\"\r\n data-bs-toggle=\"collapse\"\r\n @click.prevent=\"isLeaf ? select(!selected) : open = !open\">\r\n <span class=\"me-2 fa\" :class=\"[ isLeaf ? 'fa-tag' : 'fa-folder' ]\"></span>\r\n\r\n {{ node.value.title }}\r\n\r\n <span v-if=\"isBranch\" class=\"ms-auto me-3\">\r\n <span :class=\"[ open ? 'fa fa-chevron-up' : 'fa fa-chevron-down' ]\"></span>\r\n </span>\r\n </a>\r\n </div>\r\n\r\n <Vue3SlideUpDown\r\n v-if=\"node.children.length > 0\"\r\n v-model=\"open\"\r\n :duration=\"300\"\r\n class=\"c-tree-item__children\"\r\n >\r\n <TreeItem v-for=\"(child, i) of node.children\"\r\n :node=\"child\"\r\n :key=\"valueGetter(child.value)\"\r\n :level=\"level + 1\"\r\n :branch-selectable=\"branchSelectable\"\r\n :ref=\"setChildrenComponent\"\r\n @change=\"childChanged\"\r\n />\r\n </Vue3SlideUpDown>\r\n </div>\r\n</template>\r\n\r\n<style scoped lang=\"scss\">\r\n.c-tree-item {\r\n &__title {\r\n border-bottom: 1px solid #ddd;\r\n }\r\n\r\n cursor: pointer;\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nimport { type ComponentPublicInstance, type ComputedRef, computed, inject, nextTick, onBeforeUpdate, onMounted, ref, watch } from 'vue';\r\nimport { Vue3SlideUpDown } from 'vue3-slide-up-down';\r\nimport { TitleGetter, TreeNode, ValueGetter } from '../../../types';\r\nimport { flattenChildren } from '../../../utilities';\r\nimport TreeItem from './TreeItem.vue';\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n node: TreeNode;\r\n level?: number;\r\n branchSelectable?: boolean;\r\n }>(),\r\n {\r\n level: 1,\r\n branchSelectable: false,\r\n }\r\n);\r\n\r\nconst emit = defineEmits<{\r\n change: [checked: boolean];\r\n input: [checked: boolean];\r\n}>();\r\n\r\nconst node = ref<TreeNode>(props.node);\r\n// const selectNode = inject<(node: TreeNode, select: boolean) => any>('selectNode');\r\nconst selectedValues = inject<ComputedRef<(string | number)[]>>('selectedValues');\r\nconst id = inject('id');\r\nconst multiple = inject('multiple');\r\nconst valueGetter = inject<ValueGetter>('valueGetter');\r\nconst titleGetter = inject<TitleGetter>('titleGetter');\r\n\r\nconst selected = ref(false);\r\nconst indeterminate = computed(() => !!props.node.indeterminate);\r\nconst stopWatch = ref(false);\r\nconst open = ref(false);\r\nconst childrenComponents = ref<ComponentPublicInstance<typeof TreeItem>[]>([]);\r\n\r\nwatch(() => props.node, () => {\r\n selected.value = !!props.node.selected;\r\n}, { deep: true });\r\n\r\nfunction setChildrenComponent(child: ComponentPublicInstance<typeof TreeItem>) {\r\n childrenComponents.value.push(child);\r\n}\r\n\r\nonBeforeUpdate(() => {\r\n childrenComponents.value = [];\r\n});\r\n\r\nconst indentPx = computed(() => {\r\n return (props.level - 1) * 15;\r\n});\r\n\r\nconst isBranch = computed(() => {\r\n return props.node.children.length > 0;\r\n});\r\n\r\nconst isLeaf = computed(() => {\r\n return !isBranch.value;\r\n});\r\n\r\nfunction updateSelected() {\r\n if (isBranch.value) {\r\n return;\r\n }\r\n\r\n node.value.selected = selectedValues.value.includes(valueGetter(props.node.value));\r\n}\r\n\r\nfunction select(select: boolean) {\r\n if (selected.value === select) {\r\n return;\r\n }\r\n\r\n node.value.selected = select;\r\n\r\n checkboxChanged(select);\r\n}\r\n\r\nfunction checkboxChanged(v: boolean) {\r\n if (isBranch.value) {\r\n node.value.selected = v;\r\n\r\n if (multiple) {\r\n stopWatchThen(() => {\r\n const flatChildren = flattenChildren(node.value.children);\r\n for (const child of flatChildren) {\r\n child.selected = v;\r\n child.indeterminate = false;\r\n }\r\n });\r\n // syncChildrenStatus();\r\n }\r\n } else {\r\n nextTick(() => {\r\n node.value.selected = v;\r\n });\r\n }\r\n emit('change', v);\r\n emit('input', v);\r\n}\r\n\r\nfunction childChanged(v: boolean) {\r\n if (isLeaf.value || stopWatch.value) {\r\n return;\r\n }\r\n if (!childrenComponents.value) {\r\n return;\r\n }\r\n if (childrenComponents.value.length === 0) {\r\n return;\r\n }\r\n syncChildrenStatus();\r\n}\r\n\r\nfunction syncChildrenStatus() {\r\n if (isLeaf.value) {\r\n return;\r\n }\r\n let selectedCount = 0;\r\n let unselectCount = 0;\r\n let indeterminateInner = 0;\r\n const oldIndeterminate = indeterminate.value;\r\n const oldSelected = selected.value;\r\n \r\n for (const child of flattenChildren(props.node.children)) {\r\n if (child.selected) {\r\n selectedCount++;\r\n } else {\r\n unselectCount++;\r\n }\r\n\r\n if (child.indeterminate) {\r\n indeterminateInner++;\r\n }\r\n }\r\n\r\n // for (const childComponent of childrenComponents.value) {\r\n // if (childComponent.selected) {\r\n // checked++;\r\n // } else {\r\n // unchecked++;\r\n // }\r\n // if (childComponent.indeterminate) {\r\n // indeterminateInner++;\r\n // }\r\n // }\r\n\r\n if ((selectedCount !== 0 && unselectCount !== 0) || indeterminateInner > 0) {\r\n node.value.indeterminate = true;\r\n } else {\r\n node.value.selected = unselectCount === 0;\r\n node.value.indeterminate = false;\r\n }\r\n\r\n if (\r\n selected.value !== oldSelected\r\n || indeterminate.value !== oldIndeterminate\r\n ) {\r\n emit('change', selected.value);\r\n emit('input', selected.value);\r\n }\r\n}\r\n\r\nfunction stopWatchThen(callback: () => any) {\r\n stopWatch.value = true;\r\n callback();\r\n stopWatch.value = false;\r\n}\r\n\r\nwatch(() => selectedValues, async () => {\r\n if (!isBranch.value) {\r\n updateSelected();\r\n }\r\n await nextTick();\r\n\r\n syncChildrenStatus();\r\n}, { deep: true });\r\n\r\nwatch(selected, (v) => {\r\n});\r\n\r\nupdateSelected();\r\n\r\nonMounted(() => {\r\n syncChildrenStatus();\r\n});\r\n\r\ndefineExpose({\r\n select,\r\n selected,\r\n indeterminate\r\n});\r\n</script>\r\n\r\n<template>\r\n <div class=\"c-tree-item\"\r\n :class=\"[ isBranch ? 'c-tree-item--branch' : 'c-tree-item--leaf' ]\">\r\n <div class=\"d-flex c-tree-item__title\"\r\n :style=\"{ 'padding-left': indentPx + 'px' }\"\r\n :class=\"[ isBranch ? 'bg-light ' : '' ]\">\r\n <div class=\"p-2 ms-2\">\r\n <input\r\n :type=\"multiple ? 'checkbox' : 'radio'\"\r\n class=\"form-check-input\"\r\n v-if=\"isLeaf || (branchSelectable && multiple)\"\r\n :id=\"id + '__item-' + valueGetter(node.value)\"\r\n v-model=\"selected\"\r\n :value=\"true\"\r\n :unchecked-value=\"false\"\r\n :indeterminate.sync=\"indeterminate\"\r\n @change=\"checkboxChanged(($event.target as HTMLInputElement).checked)\"\r\n />\r\n <input v-else\r\n :type=\"multiple ? 'checkbox' : 'radio'\"\r\n class=\"form-check-input\"\r\n disabled\r\n :checked=\"indeterminate\" :indeterminate.sync=\"indeterminate\" />\r\n </div>\r\n <a class=\"c-tree-item__text d-flex align-items-center flex-grow-1 py-2 text-decoration-none\"\r\n style=\"cursor: pointer;\"\r\n :data-level=\"level\"\r\n data-bs-toggle=\"collapse\"\r\n @click.prevent=\"isLeaf ? select(!selected) : open = !open\">\r\n <span class=\"me-2 fa\" :class=\"[ isLeaf ? 'fa-tag' : 'fa-folder' ]\"></span>\r\n\r\n {{ node.value.title }}\r\n\r\n <span v-if=\"isBranch\" class=\"ms-auto me-3\">\r\n <span :class=\"[ open ? 'fa fa-chevron-up' : 'fa fa-chevron-down' ]\"></span>\r\n </span>\r\n </a>\r\n </div>\r\n\r\n <Vue3SlideUpDown\r\n v-if=\"node.children.length > 0\"\r\n v-model=\"open\"\r\n :duration=\"300\"\r\n class=\"c-tree-item__children\"\r\n >\r\n <TreeItem v-for=\"(child, i) of node.children\"\r\n :node=\"child\"\r\n :key=\"valueGetter(child.value)\"\r\n :level=\"level + 1\"\r\n :branch-selectable=\"branchSelectable\"\r\n :ref=\"setChildrenComponent\"\r\n @change=\"childChanged\"\r\n />\r\n </Vue3SlideUpDown>\r\n </div>\r\n</template>\r\n\r\n<style scoped lang=\"scss\">\r\n.c-tree-item {\r\n &__title {\r\n border-bottom: 1px solid #ddd;\r\n }\r\n\r\n cursor: pointer;\r\n}\r\n</style>\r\n","<script lang=\"ts\" setup>\r\nimport { Modal } from 'bootstrap';\r\nimport { computed, getCurrentInstance, inject, onMounted, onUnmounted, provide, ref, useTemplateRef, watch } from 'vue';\r\nimport { useHttpClient } from '../../../composable';\r\nimport { forceArray } from '../../../service';\r\nimport { MaybeArray, ModalTreeSource, SearchMatcher, TitleGetter, TreeNode, ValueGetter } from '../../../types';\r\nimport { flattenChildren } from '../../../utilities';\r\nimport TreeItem from './TreeItem.vue';\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n open?: boolean;\r\n id?: string;\r\n name?: string;\r\n types?: string[];\r\n title?: string;\r\n disabled?: boolean;\r\n readonly?: boolean;\r\n value?: MaybeArray<string | number>;\r\n branchSelectable?: boolean;\r\n source?: ModalTreeSource;\r\n searchText?: string;\r\n }>(),\r\n {\r\n branchSelectable: false,\r\n }\r\n);\r\n\r\nconst emits = defineEmits<{\r\n change: [value: any];\r\n input: [value: any];\r\n selected: [items: any[]];\r\n hide: [];\r\n}>();\r\n\r\n// provide('selectNode', selectNode);\r\n\r\nconst valueGetter = inject<ValueGetter>('valueGetter');\r\nconst titleGetter = inject<TitleGetter>('titleGetter');\r\nconst searchMatcher = inject<SearchMatcher>('searchMatcher');\r\n\r\nconst loading = ref(false);\r\nconst multiple = inject<boolean>('multiple', false);\r\nconst modalElement = useTemplateRef<HTMLDivElement>('modal')\r\n\r\nlet $modal: Modal;\r\n\r\nonMounted(() => {\r\n $modal = Modal.getOrCreateInstance(modalElement.value!);\r\n modalElement.value!.addEventListener('show.bs.modal', onShow);\r\n modalElement.value!.addEventListener('hide.bs.modal', onHide);\r\n});\r\n\r\nonUnmounted(() => {\r\n modalElement.value!.removeEventListener('show.bs.modal', onShow);\r\n modalElement.value!.removeEventListener('hide.bs.modal', onHide);\r\n});\r\n\r\n// Items\r\nconst nodes = ref<TreeNode[]>([]);\r\nconst selectedNodes = ref<TreeNode[]>([]);\r\n\r\nconst displayNodes = computed(() => {\r\n if (searchEnabled.value) {\r\n return searchedItems.value;\r\n }\r\n return nodes.value;\r\n});\r\n\r\nconst flatNodes = computed(() => flattenChildren(nodes.value));\r\n\r\nconst selectedValues = computed(() => {\r\n return flatNodes.value.filter((node) => node.selected).map((node) => valueGetter(node.value));\r\n});\r\n\r\nprovide('selectedValues', selectedValues);\r\n\r\nwatch(() => selectedValues, () => {\r\n emits('change', selectedValues.value);\r\n emits('input', selectedValues.value);\r\n emits('selected', selectedNodes.value);\r\n});\r\n\r\n// function selectNode(node: TreeNode, select: boolean) {\r\n// node.selected = select;\r\n//\r\n// // if (select) {\r\n// // if (!multiple) {\r\n// // selectedNodes.value = [];\r\n// // }\r\n// // if (!selectedValues.value.includes(valueGetter(node.value))) {\r\n// // selectedNodes.value.push(node);\r\n// // }\r\n// // } else {\r\n// // selectedNodes.value = selectedNodes.value.filter(\r\n// // (selectedNode: TreeNode) => valueGetter(selectedNode.value) !== valueGetter(node.value)\r\n// // );\r\n// // }\r\n// emits('change', selectedValues.value);\r\n// emits('input', selectedValues.value);\r\n// emits('selected', selectedNodes.value);\r\n// }\r\n\r\nconst canModify = computed(() => {\r\n return !props.readonly && !props.disabled;\r\n});\r\n\r\n// Search\r\nconst q = ref('');\r\nconst searchEnabled = computed(() => q.value !== '');\r\n\r\nconst searchedItems = computed(() => {\r\n if (q.value === '') {\r\n return [];\r\n }\r\n\r\n return flatNodes.value.filter((item: TreeNode) => {\r\n return searchMatcher(item.value, q.value);\r\n });\r\n});\r\n\r\nasync function loadItems() {\r\n loading.value = true;\r\n const http = await useHttpClient();\r\n try {\r\n let src = props.source;\r\n\r\n if (typeof src === 'string') {\r\n const res = await http.get(src);\r\n nodes.value = res.data.data;\r\n } else if (typeof src === 'function') {\r\n nodes.value = await src();\r\n } else {\r\n if (!Array.isArray(src)) {\r\n src = src.children;\r\n }\r\n\r\n nodes.value = src;\r\n }\r\n } finally {\r\n loading.value = false;\r\n }\r\n}\r\n\r\n// Modal Control\r\nwatch(() => props.open, (v) => {\r\n if (v) {\r\n $modal.show();\r\n } else {\r\n $modal.hide();\r\n }\r\n});\r\n\r\nasync function onShow() {\r\n await loadItems();\r\n updateSelectedItemsByValue();\r\n}\r\n\r\nfunction onHide() {\r\n nodes.value = [];\r\n q.value = '';\r\n emits('hide');\r\n}\r\n\r\nfunction updateSelectedItemsByValue() {\r\n const values = forceArray(props.value);\r\n\r\n selectedNodes.value = flatNodes.value\r\n .filter((item: TreeNode) => {\r\n return values.includes(valueGetter(item.value));\r\n });\r\n}\r\n\r\nwatch(\r\n () => props.value,\r\n () => updateSelectedItemsByValue(),\r\n { immediate: true, deep: true }\r\n);\r\n\r\n</script>\r\n\r\n<template>\r\n <div ref=\"modal\" class=\"modal fade\" :id=\"`${id}__modal`\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"-modal-label\"\r\n aria-hidden=\"true\">\r\n <div class=\"modal-dialog\" role=\"document\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h4 class=\"modal-title\" :id=\"`${id}__modal-label`\">\r\n {{ title }}\r\n </h4>\r\n <button type=\"button\" class=\"close btn-close\" data-bs-dismiss=\"modal\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n <span aria-hidden=\"true\" class=\"visually-hidden\">×</span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"modal-body p-0\">\r\n <div class=\"std-form box-list m-3\">\r\n <div class=\"form-group\">\r\n <input type=\"search\" class=\"form-control\" :placeholder=\"searchText\"\r\n v-model=\"q\" />\r\n </div>\r\n </div>\r\n\r\n <div v-if=\"!loading\" class=\"box-list__items\">\r\n <TreeItem v-for=\"node of displayNodes\"\r\n :node\r\n :key=\"valueGetter(node.value)\"\r\n :level=\"1\"\r\n :branchSelectable\r\n />\r\n </div>\r\n <div v-else>\r\n <div class=\"d-flex justify-content-center\">\r\n <div class=\"spinner-border spinner-border-sm my-3\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<style scoped>\r\n\r\n</style>\r\n","<script lang=\"ts\" setup>\r\nimport { Modal } from 'bootstrap';\r\nimport { computed, getCurrentInstance, inject, onMounted, onUnmounted, provide, ref, useTemplateRef, watch } from 'vue';\r\nimport { useHttpClient } from '../../../composable';\r\nimport { forceArray } from '../../../service';\r\nimport { MaybeArray, ModalTreeSource, SearchMatcher, TitleGetter, TreeNode, ValueGetter } from '../../../types';\r\nimport { flattenChildren } from '../../../utilities';\r\nimport TreeItem from './TreeItem.vue';\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n open?: boolean;\r\n id?: string;\r\n name?: string;\r\n types?: string[];\r\n title?: string;\r\n disabled?: boolean;\r\n readonly?: boolean;\r\n value?: MaybeArray<string | number>;\r\n branchSelectable?: boolean;\r\n source?: ModalTreeSource;\r\n searchText?: string;\r\n }>(),\r\n {\r\n branchSelectable: false,\r\n }\r\n);\r\n\r\nconst emits = defineEmits<{\r\n change: [value: any];\r\n input: [value: any];\r\n selected: [items: any[]];\r\n hide: [];\r\n}>();\r\n\r\n// provide('selectNode', selectNode);\r\n\r\nconst valueGetter = inject<ValueGetter>('valueGetter');\r\nconst titleGetter = inject<TitleGetter>('titleGetter');\r\nconst searchMatcher = inject<SearchMatcher>('searchMatcher');\r\n\r\nconst loading = ref(false);\r\nconst multiple = inject<boolean>('multiple', false);\r\nconst modalElement = useTemplateRef<HTMLDivElement>('modal')\r\n\r\nlet $modal: Modal;\r\n\r\nonMounted(() => {\r\n $modal = Modal.getOrCreateInstance(modalElement.value!);\r\n modalElement.value!.addEventListener('show.bs.modal', onShow);\r\n modalElement.value!.addEventListener('hide.bs.modal', onHide);\r\n});\r\n\r\nonUnmounted(() => {\r\n modalElement.value!.removeEventListener('show.bs.modal', onShow);\r\n modalElement.value!.removeEventListener('hide.bs.modal', onHide);\r\n});\r\n\r\n// Items\r\nconst nodes = ref<TreeNode[]>([]);\r\nconst selectedNodes = ref<TreeNode[]>([]);\r\n\r\nconst displayNodes = computed(() => {\r\n if (searchEnabled.value) {\r\n return searchedItems.value;\r\n }\r\n return nodes.value;\r\n});\r\n\r\nconst flatNodes = computed(() => flattenChildren(nodes.value));\r\n\r\nconst selectedValues = computed(() => {\r\n return flatNodes.value.filter((node) => node.selected).map((node) => valueGetter(node.value));\r\n});\r\n\r\nprovide('selectedValues', selectedValues);\r\n\r\nwatch(() => selectedValues, () => {\r\n emits('change', selectedValues.value);\r\n emits('input', selectedValues.value);\r\n emits('selected', selectedNodes.value);\r\n});\r\n\r\n// function selectNode(node: TreeNode, select: boolean) {\r\n// node.selected = select;\r\n//\r\n// // if (select) {\r\n// // if (!multiple) {\r\n// // selectedNodes.value = [];\r\n// // }\r\n// // if (!selectedValues.value.includes(valueGetter(node.value))) {\r\n// // selectedNodes.value.push(node);\r\n// // }\r\n// // } else {\r\n// // selectedNodes.value = selectedNodes.value.filter(\r\n// // (selectedNode: TreeNode) => valueGetter(selectedNode.value) !== valueGetter(node.value)\r\n// // );\r\n// // }\r\n// emits('change', selectedValues.value);\r\n// emits('input', selectedValues.value);\r\n// emits('selected', selectedNodes.value);\r\n// }\r\n\r\nconst canModify = computed(() => {\r\n return !props.readonly && !props.disabled;\r\n});\r\n\r\n// Search\r\nconst q = ref('');\r\nconst searchEnabled = computed(() => q.value !== '');\r\n\r\nconst searchedItems = computed(() => {\r\n if (q.value === '') {\r\n return [];\r\n }\r\n\r\n return flatNodes.value.filter((item: TreeNode) => {\r\n return searchMatcher(item.value, q.value);\r\n });\r\n});\r\n\r\nasync function loadItems() {\r\n loading.value = true;\r\n const http = await useHttpClient();\r\n try {\r\n let src = props.source;\r\n\r\n if (typeof src === 'string') {\r\n const res = await http.get(src);\r\n nodes.value = res.data.data;\r\n } else if (typeof src === 'function') {\r\n nodes.value = await src();\r\n } else {\r\n if (!Array.isArray(src)) {\r\n src = src.children;\r\n }\r\n\r\n nodes.value = src;\r\n }\r\n } finally {\r\n loading.value = false;\r\n }\r\n}\r\n\r\n// Modal Control\r\nwatch(() => props.open, (v) => {\r\n if (v) {\r\n $modal.show();\r\n } else {\r\n $modal.hide();\r\n }\r\n});\r\n\r\nasync function onShow() {\r\n await loadItems();\r\n updateSelectedItemsByValue();\r\n}\r\n\r\nfunction onHide() {\r\n nodes.value = [];\r\n q.value = '';\r\n emits('hide');\r\n}\r\n\r\nfunction updateSelectedItemsByValue() {\r\n const values = forceArray(props.value);\r\n\r\n selectedNodes.value = flatNodes.value\r\n .filter((item: TreeNode) => {\r\n return values.includes(valueGetter(item.value));\r\n });\r\n}\r\n\r\nwatch(\r\n () => props.value,\r\n () => updateSelectedItemsByValue(),\r\n { immediate: true, deep: true }\r\n);\r\n\r\n</script>\r\n\r\n<template>\r\n <div ref=\"modal\" class=\"modal fade\" :id=\"`${id}__modal`\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"-modal-label\"\r\n aria-hidden=\"true\">\r\n <div class=\"modal-dialog\" role=\"document\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h4 class=\"modal-title\" :id=\"`${id}__modal-label`\">\r\n {{ title }}\r\n </h4>\r\n <button type=\"button\" class=\"close btn-close\" data-bs-dismiss=\"modal\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n <span aria-hidden=\"true\" class=\"visually-hidden\">×</span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"modal-body p-0\">\r\n <div class=\"std-form box-list m-3\">\r\n <div class=\"form-group\">\r\n <input type=\"search\" class=\"form-control\" :placeholder=\"searchText\"\r\n v-model=\"q\" />\r\n </div>\r\n </div>\r\n\r\n <div v-if=\"!loading\" class=\"box-list__items\">\r\n <TreeItem v-for=\"node of displayNodes\"\r\n :node\r\n :key=\"valueGetter(node.value)\"\r\n :level=\"1\"\r\n :branchSelectable\r\n />\r\n </div>\r\n <div v-else>\r\n <div class=\"d-flex justify-content-center\">\r\n <div class=\"spinner-border spinner-border-sm my-3\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<style scoped>\r\n\r\n</style>\r\n","<script lang=\"ts\" setup>\r\nimport { cloneDeep } from 'lodash-es';\r\nimport { computed, provide, ref, watch } from 'vue';\r\nimport { forceArray } from '../../../service';\r\nimport {\r\n ValueGetter,\r\n ModalTreeSource,\r\n TitleGetter,\r\n TreeNode,\r\n SearchMatcher,\r\n MaybeArray,\r\n MaybePromise\r\n} from '../../../types';\r\nimport TreeModal from './TreeModal.vue';\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n id?: string;\r\n name?: string;\r\n title?: string;\r\n disabled?: boolean;\r\n readonly?: boolean;\r\n value?: MaybeArray<string | number>;\r\n source?: ModalTreeSource;\r\n items?: MaybeArray<TreeNode> | (() => MaybePromise<MaybeArray<TreeNode>>);\r\n valueGetter?: ValueGetter;\r\n titleGetter?: TitleGetter;\r\n searchMatcher?: SearchMatcher;\r\n modalTitle?: string;\r\n vertical?: boolean;\r\n branchSelectable?: boolean;\r\n selectAllChildren?: boolean;\r\n placeholder?: string;\r\n multiple?: boolean;\r\n buttonText?: string;\r\n itemClass?: string;\r\n searchText?: string;\r\n }>(),\r\n {\r\n branchSelectable: false,\r\n selectAllChildren: false,\r\n placeholder: '- No selected -',\r\n multiple: false,\r\n buttonText: 'Select',\r\n itemClass: 'badge bg-primary badge-pill',\r\n searchText: 'Search',\r\n valueGetter: (item: any) => item.id,\r\n titleGetter: (item: any) => item.title,\r\n }\r\n);\r\n\r\nprovide('id', props.id);\r\nprovide('name', props.name);\r\nprovide('multiple', props.multiple);\r\nprovide('valueGetter', props.valueGetter);\r\nprovide('titleGetter', props.titleGetter);\r\nprovide('searchMatcher', props.searchMatcher ?? defaultSearchMatcher);\r\n\r\nfunction defaultSearchMatcher(item: any, q: string) {\r\n return props.titleGetter(item).toLowerCase().includes(q.toLowerCase());\r\n}\r\n\r\nconst selected = ref<TreeNode[]>([]);\r\nconst value = ref<(string|number)[]>(forceArray(props.value));\r\n\r\n// Modal\r\nconst treeModalOpen = ref(false);\r\n\r\nfunction openSelector() {\r\n treeModalOpen.value = true;\r\n}\r\n\r\nfunction deleteItem(i: number, node: TreeNode) {\r\n selected.value = selected.value.filter((it: TreeNode) => props.valueGetter(it.value) !== props.valueGetter(node.value));\r\n}\r\n\r\nfunction handleSelected(items: any[]) {\r\n selected.value = cloneDeep(items);\r\n}\r\n\r\nwatch(() => props.items, async (v) => {\r\n if (typeof v === 'function') {\r\n v = await v();\r\n }\r\n\r\n selected.value = forceArray(v).filter((node: TreeNode) => {\r\n return value.value.includes(props.valueGetter(node.value));\r\n });\r\n}, { immediate: true });\r\n\r\nconst selectedValues = computed(() => {\r\n return selected.value.map(node => props.valueGetter(node.value));\r\n});\r\n\r\nconst canModify = computed(() => {\r\n return !props.readonly && !props.disabled;\r\n});\r\n\r\n</script>\r\n\r\n<template>\r\n <div class=\"c-modal-tree\">\r\n <div class=\"c-modal-tree__container p-2 d-flex flex-column\"\r\n :class=\"[ vertical ? '' : 'flex-md-row' ]\">\r\n <div v-if=\"canModify\" class=\"me-2 mb-2\"\r\n :class=\"{ 'mb-md-0': !vertical }\">\r\n <div class=\"btn-group\">\r\n <button class=\"btn btn-secondary btn-sm btn-rounded text-nowrap\" type=\"button\"\r\n @click=\"openSelector\">\r\n {{ buttonText }}\r\n </button>\r\n <button class=\"btn btn-secondary btn-sm btn-rounded\" type=\"button\"\r\n @click=\"selected = []\">\r\n <span class=\"fa fa-times\"></span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div v-if=\"selected.length > 0\">\r\n <TransitionGroup name=\"fade\">\r\n <span v-for=\"(node, i) of selected\"\r\n class=\"me-2 mb-2 c-item\"\r\n :class=\"itemClass\"\r\n :key=\"valueGetter(node.value)\"\r\n style=\"animation-duration: .3s\">\r\n <span>{{ titleGetter(node.value) }}</span>\r\n <span type=\"button\" v-if=\"canModify\"\r\n @click.prevent=\"deleteItem(i, node)\" class=\"ms-2\" style=\"cursor: pointer\">\r\n <span class=\"fa fa-times\"></span>\r\n </span>\r\n </span>\r\n </TransitionGroup>\r\n </div>\r\n <div v-else class=\"text-muted\">\r\n {{ placeholder }}\r\n </div>\r\n </div>\r\n\r\n <select multiple\r\n style=\"display: none;\"\r\n ref=\"input\"\r\n :id=\"id\"\r\n :name=\"name\"\r\n :disabled=\"disabled\"\r\n :readonly=\"readonly\"\r\n v-bind=\"$attrs\"\r\n >\r\n <option v-for=\"id of selectedValues\" :value=\"id\" :selected=\"true\">{{ id }}</option>\r\n </select>\r\n\r\n <TreeModal\r\n :open=\"treeModalOpen\"\r\n @hide=\"treeModalOpen = false\"\r\n :id=\"id\"\r\n :title=\"modalTitle\"\r\n :source=\"source\"\r\n :value=\"selectedValues\"\r\n :branchSelectable\r\n v-bind=\"$attrs\"\r\n :disabled=\"disabled\"\r\n :readonly=\"readonly\"\r\n :search-text=\"searchText\"\r\n @selected=\"handleSelected\"\r\n />\r\n </div>\r\n</template>\r\n\r\n<style scoped>\r\n.c-item {\r\n padding-left: .75rem;\r\n padding-right: .75rem;\r\n padding-top: .5rem;\r\n padding-bottom: .5rem;\r\n}\r\n</style>\r\n","<script lang=\"ts\" setup>\r\nimport { cloneDeep } from 'lodash-es';\r\nimport { computed, provide, ref, watch } from 'vue';\r\nimport { forceArray } from '../../../service';\r\nimport {\r\n ValueGetter,\r\n ModalTreeSource,\r\n TitleGetter,\r\n TreeNode,\r\n SearchMatcher,\r\n MaybeArray,\r\n MaybePromise\r\n} from '../../../types';\r\nimport TreeModal from './TreeModal.vue';\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n id?: string;\r\n name?: string;\r\n title?: string;\r\n disabled?: boolean;\r\n readonly?: boolean;\r\n value?: MaybeArray<string | number>;\r\n source?: ModalTreeSource;\r\n items?: MaybeArray<TreeNode> | (() => MaybePromise<MaybeArray<TreeNode>>);\r\n valueGetter?: ValueGetter;\r\n titleGetter?: TitleGetter;\r\n searchMatcher?: SearchMatcher;\r\n modalTitle?: string;\r\n vertical?: boolean;\r\n branchSelectable?: boolean;\r\n selectAllChildren?: boolean;\r\n placeholder?: string;\r\n multiple?: boolean;\r\n buttonText?: string;\r\n itemClass?: string;\r\n searchText?: string;\r\n }>(),\r\n {\r\n branchSelectable: false,\r\n selectAllChildren: false,\r\n placeholder: '- No selected -',\r\n multiple: false,\r\n buttonText: 'Select',\r\n itemClass: 'badge bg-primary badge-pill',\r\n searchText: 'Search',\r\n valueGetter: (item: any) => item.id,\r\n titleGetter: (item: any) => item.title,\r\n }\r\n);\r\n\r\nprovide('id', props.id);\r\nprovide('name', props.name);\r\nprovide('multiple', props.multiple);\r\nprovide('valueGetter', props.valueGetter);\r\nprovide('titleGetter', props.titleGetter);\r\nprovide('searchMatcher', props.searchMatcher ?? defaultSearchMatcher);\r\n\r\nfunction defaultSearchMatcher(item: any, q: string) {\r\n return props.titleGetter(item).toLowerCase().includes(q.toLowerCase());\r\n}\r\n\r\nconst selected = ref<TreeNode[]>([]);\r\nconst value = ref<(string|number)[]>(forceArray(props.value));\r\n\r\n// Modal\r\nconst treeModalOpen = ref(false);\r\n\r\nfunction openSelector() {\r\n treeModalOpen.value = true;\r\n}\r\n\r\nfunction deleteItem(i: number, node: TreeNode) {\r\n selected.value = selected.value.filter((it: TreeNode) => props.valueGetter(it.value) !== props.valueGetter(node.value));\r\n}\r\n\r\nfunction handleSelected(items: any[]) {\r\n selected.value = cloneDeep(items);\r\n}\r\n\r\nwatch(() => props.items, async (v) => {\r\n if (typeof v === 'function') {\r\n v = await v();\r\n }\r\n\r\n selected.value = forceArray(v).filter((node: TreeNode) => {\r\n return value.value.includes(props.valueGetter(node.value));\r\n });\r\n}, { immediate: true });\r\n\r\nconst selectedValues = computed(() => {\r\n return selected.value.map(node => props.valueGetter(node.value));\r\n});\r\n\r\nconst canModify = computed(() => {\r\n return !props.readonly && !props.disabled;\r\n});\r\n\r\n</script>\r\n\r\n<template>\r\n <div class=\"c-modal-tree\">\r\n <div class=\"c-modal-tree__container p-2 d-flex flex-column\"\r\n :class=\"[ vertical ? '' : 'flex-md-row' ]\">\r\n <div v-if=\"canModify\" class=\"me-2 mb-2\"\r\n :class=\"{ 'mb-md-0': !vertical }\">\r\n <div class=\"btn-group\">\r\n <button class=\"btn btn-secondary btn-sm btn-rounded text-nowrap\" type=\"button\"\r\n @click=\"openSelector\">\r\n {{ buttonText }}\r\n </button>\r\n <button class=\"btn btn-secondary btn-sm btn-rounded\" type=\"button\"\r\n @click=\"selected = []\">\r\n <span class=\"fa fa-times\"></span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div v-if=\"selected.length > 0\">\r\n <TransitionGroup name=\"fade\">\r\n <span v-for=\"(node, i) of selected\"\r\n class=\"me-2 mb-2 c-item\"\r\n :class=\"itemClass\"\r\n :key=\"valueGetter(node.value)\"\r\n style=\"animation-duration: .3s\">\r\n <span>{{ titleGetter(node.value) }}</span>\r\n <span type=\"button\" v-if=\"canModify\"\r\n @click.prevent=\"deleteItem(i, node)\" class=\"ms-2\" style=\"cursor: pointer\">\r\n <span class=\"fa fa-times\"></span>\r\n </span>\r\n </span>\r\n </TransitionGroup>\r\n </div>\r\n <div v-else class=\"text-muted\">\r\n {{ placeholder }}\r\n </div>\r\n </div>\r\n\r\n <select multiple\r\n style=\"display: none;\"\r\n ref=\"input\"\r\n :id=\"id\"\r\n :name=\"name\"\r\n :disabled=\"disabled\"\r\n :readonly=\"readonly\"\r\n v-bind=\"$attrs\"\r\n >\r\n <option v-for=\"id of selectedValues\" :value=\"id\" :selected=\"true\">{{ id }}</option>\r\n </select>\r\n\r\n <TreeModal\r\n :open=\"treeModalOpen\"\r\n @hide=\"treeModalOpen = false\"\r\n :id=\"id\"\r\n :title=\"modalTitle\"\r\n :source=\"source\"\r\n :value=\"selectedValues\"\r\n :branchSelectable\r\n v-bind=\"$attrs\"\r\n :disabled=\"disabled\"\r\n :readonly=\"readonly\"\r\n :search-text=\"searchText\"\r\n @selected=\"handleSelected\"\r\n />\r\n </div>\r\n</template>\r\n\r\n<style scoped>\r\n.c-item {\r\n padding-left: .75rem;\r\n padding-right: .75rem;\r\n padding-top: .5rem;\r\n padding-bottom: .5rem;\r\n}\r\n</style>\r\n","import { data } from '../data';\r\nimport { useCssImport } from '../service';\r\nimport { createApp } from 'vue';\r\nimport ModalTreeApp from '../vue/components/ModalTree/ModalTreeApp.vue';\r\n\r\nconst app = createApp({\r\n name: 'modal-tree',\r\n components: {\r\n ModalTreeApp\r\n }\r\n});\r\napp.config.globalProperties.$getData = data;\r\n\r\nclass ModalTreeElement extends HTMLElement {\r\n static is = 'modal-tree';\r\n\r\n vm: any;\r\n\r\n connectedCallback() {\r\n if (!this.vm) {\r\n this.vm = app.mount(this);\r\n }\r\n }\r\n}\r\n\r\nasync function init() {\r\n customElements.define(ModalTreeElement.is, ModalTreeElement);\r\n await useCssImport('@vue-animate');\r\n}\r\n\r\nexport const ready = init();\r\n"],"names":["children","b","C","E","h","p","W","F","L","k","select","_hoisted_1","_createElementBlock","_normalizeClass","_createElementVNode","_normalizeStyle","_withDirectives","_openBlock","_hoisted_2","_hoisted_3","_createTextVNode","_toDisplayString","_hoisted_5","_createBlock","_Fragment","_renderList","_hoisted_4","_hoisted_6","_hoisted_7","_createVNode","_TransitionGroup","_withCtx","_withModifiers","_createCommentVNode","_mergeProps"],"mappings":";;;;AAEO,SAAS,gBAAgB,UAAsB;AACpD,QAAM,OAAmB,CAAA;AAEzB,WAAS,aAAaA,WAAsB;AAC1C,eAAW,SAASA,WAAU;AAC5B,UAAI,MAAM,SAAS,WAAW,GAAG;AAC/B,aAAK,KAAK,KAAK;AACf;AAAA,MACF;AAEA,mBAAa,MAAM,QAAQ;AAAA,IAC7B;AAAA,EACF;AAEA,eAAa,QAAQ;AACrB,SAAO;AACT;ACjBA,SAAS,EAAE,GAAG;AACZ,SAAO;AAAA,IACL,QAAQ,EAAE,MAAM;AAAA,IAChB,OAAO,EAAE,MAAM;AAAA,IACf,UAAU,EAAE,MAAM;AAAA,IAClB,YAAY,EAAE,MAAM;AAAA,IACpB,UAAU,EAAE,MAAM;AAAA,IAClB,YAAY,EAAE,MAAM;AAAA,IACpB,eAAe,EAAE,MAAM;AAAA,IACvB,gBAAgB,EAAE,MAAM;AAAA,IACxB,mBAAmB,EAAE,MAAM;AAAA,IAC3B,WAAW,EAAE,MAAM;AAAA,IACnB,cAAc,EAAE,MAAM;AAAA,EAC1B;AACA;AACA,SAAS,EAAE,GAAG,GAAG,GAAG;AAClB,QAAM,IAAIC,MAAE,CAAC,GAAG,EAAE,OAAO,EAAC,IAAK,iBAAiB,CAAC;AACjD,IAAE,MAAM,QAAQ,GAAG,EAAE,MAAM,WAAW,YAAY,EAAE,MAAM,aAAa,UAAU,EAAE,MAAM,SAAS;AAClG,QAAM,EAAE,QAAQ,MAAM,iBAAiB,CAAC;AACxC,SAAO,EAAE,MAAM,QAAQ,EAAE,OAAO,EAAE,MAAM,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,EAAE,YAAY,EAAE,MAAM,SAAS,GAAG,EAAE,MAAM,WAAW,UAAU,EAAE,UAAU,EAAE,UAAU,IAAI,EAAE,SAAS;AAC5L;AACA,SAAS,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG;AACxB,QAAM,IAAI,EAAE,QAAQ,GAAG,CAAC;AACxB,IAAE,MAAM,SAAS,EAAE,QAAQ,EAAE,WAAW,MAAM;AAC5C,MAAE,MAAM,WAAW,EAAE,UAAU,EAAC;AAAA,EAClC;AACF;AACA,SAAS,EAAE,GAAG,GAAG,GAAG,GAAG;AACrB,QAAM,IAAIA,MAAE,CAAC;AACb,SAAO;AAAA,IACL;AAAA,MACE,QAAQ;AAAA,MACR,SAAS,EAAE;AAAA,MACX,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,gBAAgB;AAAA,MAChB,mBAAmB;AAAA,MACnB,WAAW;AAAA,MACX,cAAc;AAAA,IACpB;AAAA,IACI;AAAA,MACE,QAAQ;AAAA,MACR,SAAS,EAAE;AAAA,MACX,YAAY,EAAE,cAAc;AAAA,MAC5B,eAAe,EAAE,iBAAiB;AAAA,MAClC,gBAAgB,EAAE,kBAAkB;AAAA,MACpC,mBAAmB,EAAE,qBAAqB;AAAA,MAC1C,WAAW,EAAE,aAAa;AAAA,MAC1B,cAAc,EAAE,gBAAgB;AAAA,IACtC;AAAA,EACA;AACA;AACA,MAAM,IAAIC,gCAAE;AAAA,EACV,OAAO;AAAA,IACL,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACf;AAAA;AAAA;AAAA;AAAA,IAII,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACf;AAAA;AAAA;AAAA;AAAA,IAII,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA,IACf;AAAA;AAAA;AAAA;AAAA,IAII,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,IACf;AAAA;AAAA;AAAA;AAAA,IAII,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,IACf;AAAA;AAAA;AAAA;AAAA,IAII,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACf;AAAA;AAAA;AAAA;AAAA,IAII,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA,IACf;AAAA;AAAA;AAAA;AAAA,IAII,KAAK;AAAA,MACH,MAAM;AAAA,MACN,SAAS;AAAA,IACf;AAAA;AAAA;AAAA;AAAA,IAII,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACf;AAAA,EACA;AAAA,EACE,OAAO,CAAC,qBAAqB,cAAc,YAAY,eAAe,WAAW;AAAA,EACjF,MAAM,GAAG,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,KAAK;AACxC,UAAM,IAAIC,IAAE,KAAK,GAAG,IAAIC,SAAE,MAAM,EAAE,uBAAuB,EAAE,cAAc,GAAG,IAAIA,SAAE,MAAM,EAAE,uBAAuB,EAAE,cAAc;AACjI,aAAS,EAAE,GAAG,GAAG;AACf,YAAM,IAAI,GAAG,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,GAAG,CAAC,GAAG,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI,EAAE,UAAU,EAAE,UAAU,QAAQ,EAAE,MAAK;AACrG,QAAE,GAAG,GAAG,MAAM;AACZ,UAAC,GAAI,EAAE,UAAU;AAAA,MACnB,GAAG,GAAG,CAAC;AAAA,IACT;AACA,aAAS,EAAE,GAAG,GAAG;AACf,YAAM,IAAI,GAAG,IAAI,EAAE,CAAC,GAAG,EAAE,QAAQ,MAAM,iBAAiB,CAAC;AACzD,QAAE,MAAM,SAAS,GAAG,EAAE,MAAM,WAAW;AACvC,YAAM,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC,EAAE,QAAO,GAAI,IAAI,EAAE,UAAU,EAAE,UAAU,QAAQ,EAAE,MAAK;AAC9E,QAAE,GAAG,GAAG,MAAM;AACZ,UAAC,GAAI,EAAE,WAAW;AAAA,MACpB,GAAG,GAAG,CAAC;AAAA,IACT;AACA,WAAO,MAAMC;AAAAA,MACXC;AAAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,WAAW,EAAE;AAAA,QACb,eAAe,MAAM,EAAE,YAAY;AAAA,QACnC,SAAS;AAAA,QACT,eAAe,MAAM,EAAE,aAAa;AAAA,QACpC,SAAS;AAAA,MACjB;AAAA,MACM;AAAA,QACE,SAAS,MAAM,EAAE,cAAc,EAAE,QAAQC;AAAAA,UACvCF;AAAAA,YACE,EAAE;AAAA,YACFG,WAAE,GAAG;AAAA,cACH,OAAO;AAAA,YACrB,CAAa;AAAA,YACD;AAAA,UACZ;AAAA,UACU,CAAC,EAAE,QAAQ,CAACC,OAAG,EAAE,eAAe,IAAE,IAAI,CAAC,IAAI,CAAC;AAAA,QACtD,IAAY;AAAA,MACZ;AAAA,IACA;AAAA,EACE;AACF,CAAC;;;;;;;;;;ACtJD,UAAM,QAAQ;AAYd,UAAM,OAAO;AAKb,UAAM,OAAO,IAAc,MAAM,IAAI;AAErC,UAAM,iBAAiB,OAAyC,gBAAgB;AAChF,UAAM,KAAK,OAAO,IAAI;AACtB,UAAM,WAAW,OAAO,UAAU;AAClC,UAAM,cAAc,OAAoB,aAAa;AACrD,UAAM,cAAc,OAAoB,aAAa;AAErD,UAAM,WAAW,IAAI,KAAK;AAC1B,UAAM,gBAAgB,SAAS,MAAM,CAAC,CAAC,MAAM,KAAK,aAAa;AAC/D,UAAM,YAAY,IAAI,KAAK;AAC3B,UAAM,OAAO,IAAI,KAAK;AACtB,UAAM,qBAAqB,IAAgD,EAAE;AAE7E,UAAM,MAAM,MAAM,MAAM,MAAM;AAC5B,eAAS,QAAQ,CAAC,CAAC,MAAM,KAAK;AAAA,IAChC,GAAG,EAAE,MAAM,MAAM;AAEjB,aAAS,qBAAqB,OAAiD;AAC7E,yBAAmB,MAAM,KAAK,KAAK;AAAA,IACrC;AAEA,mBAAe,MAAM;AACnB,yBAAmB,QAAQ,CAAA;AAAA,IAC7B,CAAC;AAED,UAAM,WAAW,SAAS,MAAM;AAC9B,cAAQ,MAAM,QAAQ,KAAK;AAAA,IAC7B,CAAC;AAED,UAAM,WAAW,SAAS,MAAM;AAC9B,aAAO,MAAM,KAAK,SAAS,SAAS;AAAA,IACtC,CAAC;AAED,UAAM,SAAS,SAAS,MAAM;AAC5B,aAAO,CAAC,SAAS;AAAA,IACnB,CAAC;AAED,aAAS,iBAAiB;AACxB,UAAI,SAAS,OAAO;AAClB;AAAA,MACF;AAEA,WAAK,MAAM,WAAW,eAAe,MAAM,SAAS,YAAY,MAAM,KAAK,KAAK,CAAC;AAAA,IACnF;AAEA,aAAS,OAAOC,SAAiB;AAC/B,UAAI,SAAS,UAAUA,SAAQ;AAC7B;AAAA,MACF;AAEA,WAAK,MAAM,WAAWA;AAEtB,sBAAgBA,OAAM;AAAA,IACxB;AAEA,aAAS,gBAAgB,GAAY;AACnC,UAAI,SAAS,OAAO;AAClB,aAAK,MAAM,WAAW;AAEtB,YAAI,UAAU;AACZ,wBAAc,MAAM;AAClB,kBAAM,eAAe,gBAAgB,KAAK,MAAM,QAAQ;AACxD,uBAAW,SAAS,cAAc;AAChC,oBAAM,WAAW;AACjB,oBAAM,gBAAgB;AAAA,YACxB;AAAA,UACF,CAAC;AAAA,QAEH;AAAA,MACF,OAAO;AACL,iBAAS,MAAM;AACb,eAAK,MAAM,WAAW;AAAA,QACxB,CAAC;AAAA,MACH;AACA,WAAK,UAAU,CAAC;AAChB,WAAK,SAAS,CAAC;AAAA,IACjB;AAEA,aAAS,aAAa,GAAY;AAChC,UAAI,OAAO,SAAS,UAAU,OAAO;AACnC;AAAA,MACF;AACA,UAAI,CAAC,mBAAmB,OAAO;AAC7B;AAAA,MACF;AACA,UAAI,mBAAmB,MAAM,WAAW,GAAG;AACzC;AAAA,MACF;AACA,yBAAA;AAAA,IACF;AAEA,aAAS,qBAAqB;AAC5B,UAAI,OAAO,OAAO;AAChB;AAAA,MACF;AACA,UAAI,gBAAgB;AACpB,UAAI,gBAAgB;AACpB,UAAI,qBAAqB;AACzB,YAAM,mBAAmB,cAAc;AACvC,YAAM,cAAc,SAAS;AAE7B,iBAAW,SAAS,gBAAgB,MAAM,KAAK,QAAQ,GAAG;AACxD,YAAI,MAAM,UAAU;AAClB;AAAA,QACF,OAAO;AACL;AAAA,QACF;AAEA,YAAI,MAAM,eAAe;AACvB;AAAA,QACF;AAAA,MACF;AAaA,UAAK,kBAAkB,KAAK,kBAAkB,KAAM,qBAAqB,GAAG;AAC1E,aAAK,MAAM,gBAAgB;AAAA,MAC7B,OAAO;AACL,aAAK,MAAM,WAAW,kBAAkB;AACxC,aAAK,MAAM,gBAAgB;AAAA,MAC7B;AAEA,UACE,SAAS,UAAU,eAChB,cAAc,UAAU,kBAC3B;AACA,aAAK,UAAU,SAAS,KAAK;AAC7B,aAAK,SAAS,SAAS,KAAK;AAAA,MAC9B;AAAA,IACF;AAEA,aAAS,cAAc,UAAqB;AAC1C,gBAAU,QAAQ;AAClB,eAAA;AACA,gBAAU,QAAQ;AAAA,IACpB;AAEA,UAAM,MAAM,gBAAgB,YAAY;AACtC,UAAI,CAAC,SAAS,OAAO;AACnB,uBAAA;AAAA,MACF;AACA,YAAM,SAAA;AAEN,yBAAA;AAAA,IACF,GAAG,EAAE,MAAM,MAAM;AAEjB,UAAM,UAAU,CAAC,MAAM;AAAA,IACvB,CAAC;AAED,mBAAA;AAEA,cAAU,MAAM;AACd,yBAAA;AAAA,IACF,CAAC;AAED,aAAa;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;;;;;;;;;;;;;;;ACSU,MAAAC,eAAA,EAAA,OAAM,WAAA;;;;;;EA2Ba,OAAM;;;sBAhClCC,mBAqDM,OAAA;AAAA,IArDD,OAAKC,eAAA,CAAC,eAAa,CACZ,OAAA,WAAQ,wBAAA,mBAAA,CAAA,CAAA;AAAA,EAAA,GAAA;AAAA,IAClBC,mBAkCM,OAAA;AAAA,MAlCD,OAAKD,eAAA,CAAC,6BAA2B,CAE1B,OAAA,WAAQ,cAAA,EAAA,CAAA,CAAA;AAAA,MADjB,OAAKE,iCAAoB,OAAA,WAAQ,KAAA,CAAA;AAAA,IAAA,GAAA;AAAA,MAElCD,mBAiBM,OAjBNH,cAiBM;AAAA,QAbI,OAAA,UAAW,OAAA,oBAAoB,OAAA,WAAAK,gBAAAC,UAAA,GAHvCL,mBAUE,SAAA;AAAA,UAAA,KAAA;AAAA,UATC,MAAM,OAAA,WAAQ,aAAA;AAAA,UACf,OAAM;AAAA,UAEL,IAAI,OAAA,KAAE,YAAe,OAAA,YAAY,YAAK,KAAK;AAAA,UAAA,uBAAA,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WACnC,OAAA,WAAQ;AAAA,UAChB,OAAO;AAAA,UACP,mBAAiB;AAAA,UACjB,eAAoB,OAAA;AAAA,UACpB,UAAM,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,OAAA,gBAAiB,OAAO,OAA4B,OAAO;AAAA,QAAA,GAAA,MAAA,IAAAM,YAAA,IAAA;AAAA,0BAJ3D,OAAA,QAAQ;AAAA,QAAA,CAAA,KAAAD,UAAA,GAMnBL,mBAIiE,SAAA;AAAA,UAAA,KAAA;AAAA,UAH9D,MAAM,OAAA,WAAQ,aAAA;AAAA,UACf,OAAM;AAAA,UACN,UAAA;AAAA,UACC,SAAS,OAAA;AAAA,UAAgB,eAAoB,OAAA;AAAA,QAAA,GAAA,MAAA,GAAAO,YAAA;AAAA;MAElDL,mBAYI,KAAA;AAAA,QAZD,OAAM;AAAA,QACP,OAAA,EAAA,UAAA,UAAA;AAAA,QACC,cAAY,OAAA;AAAA,QACb,kBAAe;AAAA,QACd,SAAK,oDAAU,OAAA,SAAS,OAAA,OAAM,CAAE,OAAA,QAAQ,IAAI,OAAA,OAAI,CAAI,OAAA,MAAI,CAAA,SAAA,CAAA;AAAA,MAAA,GAAA;AAAA,QACzDA,mBAA0E,QAAA;AAAA,UAApE,OAAKD,eAAA,CAAC,WAAS,CAAW,OAAA,SAAM,WAAA,WAAA,CAAA,CAAA;AAAA,QAAA,GAAA,MAAA,CAAA;AAAA,QAAoCO,gBAAA,MAE1EC,gBAAG,OAAA,KAAK,MAAM,KAAK,IAAG,KAEtB,CAAA;AAAA,QAAY,OAAA,YAAAJ,UAAA,GAAZL,mBAEO,QAFPU,cAEO;AAAA,UADLR,mBAA2E,QAAA;AAAA,YAApE,OAAKD,gBAAI,OAAA,OAAI,qBAAA,oBAAA,CAAA;AAAA,UAAA,GAAA,MAAA,CAAA;AAAA;;;IAMlB,OAAA,KAAK,SAAS,SAAM,KAAAI,UAAA,GAD5BM,YAckB,OAAA,iBAAA,GAAA;AAAA,MAAA,KAAA;AAAA,MAZP,YAAA,OAAA;AAAA,MAAA,uBAAA,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAA,OAAA,OAAI;AAAA,MACZ,UAAU;AAAA,MACX,OAAM;AAAA,IAAA,GAAA;AAAA,uBAEI,MAAmC;AAAA,SAAAN,UAAA,IAAA,GAA7CL,mBAOEY,UAAA,MAAAC,WAP6B,OAAA,KAAK,UAAQ,CAA1B,OAAO,MAAC;8BAA1BF,YAOE,OAAA,UAAA,GAAA;AAAA,YANC,MAAM;AAAA,YACN,KAAK,OAAA,YAAY,MAAM,KAAK;AAAA,YAC5B,OAAO,OAAA,QAAK;AAAA,YACZ,qBAAmB,OAAA;AAAA,YAAA,SAAA;AAAA,YACnB,KAAK,OAAA;AAAA,YACL,UAAQ,OAAA;AAAA,UAAA,GAAA,MAAA,GAAA,CAAA,QAAA,SAAA,mBAAA,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;AC9OjB,UAAM,QAAQ;AAmBd,UAAM,QAAQ;AASd,UAAM,cAAc,OAAoB,aAAa;AACrD,UAAM,cAAc,OAAoB,aAAa;AACrD,UAAM,gBAAgB,OAAsB,eAAe;AAE3D,UAAM,UAAU,IAAI,KAAK;AACzB,UAAM,WAAW,OAAgB,YAAY,KAAK;AAClD,UAAM,eAAe,eAA+B,OAAO;AAE3D,QAAI;AAEJ,cAAU,MAAM;AACd,eAAS,MAAM,oBAAoB,aAAa,KAAM;AACtD,mBAAa,MAAO,iBAAiB,iBAAiB,MAAM;AAC5D,mBAAa,MAAO,iBAAiB,iBAAiB,MAAM;AAAA,IAC9D,CAAC;AAED,gBAAY,MAAM;AAChB,mBAAa,MAAO,oBAAoB,iBAAiB,MAAM;AAC/D,mBAAa,MAAO,oBAAoB,iBAAiB,MAAM;AAAA,IACjE,CAAC;AAGD,UAAM,QAAQ,IAAgB,EAAE;AAChC,UAAM,gBAAgB,IAAgB,EAAE;AAExC,UAAM,eAAe,SAAS,MAAM;AAClC,UAAI,cAAc,OAAO;AACvB,eAAO,cAAc;AAAA,MACvB;AACA,aAAO,MAAM;AAAA,IACf,CAAC;AAED,UAAM,YAAY,SAAS,MAAM,gBAAgB,MAAM,KAAK,CAAC;AAE7D,UAAM,iBAAiB,SAAS,MAAM;AACpC,aAAO,UAAU,MAAM,OAAO,CAAC,SAAS,KAAK,QAAQ,EAAE,IAAI,CAAC,SAAS,YAAY,KAAK,KAAK,CAAC;AAAA,IAC9F,CAAC;AAED,YAAQ,kBAAkB,cAAc;AAExC,UAAM,MAAM,gBAAgB,MAAM;AAChC,YAAM,UAAU,eAAe,KAAK;AACpC,YAAM,SAAS,eAAe,KAAK;AACnC,YAAM,YAAY,cAAc,KAAK;AAAA,IACvC,CAAC;AAsBD,UAAM,YAAY,SAAS,MAAM;AAC/B,aAAO,CAAC,MAAM,YAAY,CAAC,MAAM;AAAA,IACnC,CAAC;AAGD,UAAM,IAAI,IAAI,EAAE;AAChB,UAAM,gBAAgB,SAAS,MAAM,EAAE,UAAU,EAAE;AAEnD,UAAM,gBAAgB,SAAS,MAAM;AACnC,UAAI,EAAE,UAAU,IAAI;AAClB,eAAO,CAAA;AAAA,MACT;AAEA,aAAO,UAAU,MAAM,OAAO,CAAC,SAAmB;AAChD,eAAO,cAAc,KAAK,OAAO,EAAE,KAAK;AAAA,MAC1C,CAAC;AAAA,IACH,CAAC;AAED,mBAAe,YAAY;AACzB,cAAQ,QAAQ;AAChB,YAAM,OAAO,MAAM,cAAA;AACnB,UAAI;AACF,YAAI,MAAM,MAAM;AAEhB,YAAI,OAAO,QAAQ,UAAU;AAC3B,gBAAM,MAAM,MAAM,KAAK,IAAI,GAAG;AAC9B,gBAAM,QAAQ,IAAI,KAAK;AAAA,QACzB,WAAW,OAAO,QAAQ,YAAY;AACpC,gBAAM,QAAQ,MAAM,IAAA;AAAA,QACtB,OAAO;AACL,cAAI,CAAC,MAAM,QAAQ,GAAG,GAAG;AACvB,kBAAM,IAAI;AAAA,UACZ;AAEA,gBAAM,QAAQ;AAAA,QAChB;AAAA,MACF,UAAA;AACE,gBAAQ,QAAQ;AAAA,MAClB;AAAA,IACF;AAGA,UAAM,MAAM,MAAM,MAAM,CAAC,MAAM;AAC7B,UAAI,GAAG;AACL,eAAO,KAAA;AAAA,MACT,OAAO;AACL,eAAO,KAAA;AAAA,MACT;AAAA,IACF,CAAC;AAED,mBAAe,SAAS;AACtB,YAAM,UAAA;AACN,iCAAA;AAAA,IACF;AAEA,aAAS,SAAS;AAChB,YAAM,QAAQ,CAAA;AACd,QAAE,QAAQ;AACV,YAAM,MAAM;AAAA,IACd;AAEA,aAAS,6BAA6B;AACpC,YAAM,SAAS,WAAW,MAAM,KAAK;AAErC,oBAAc,QAAQ,UAAU,MAC7B,OAAO,CAAC,SAAmB;AAC1B,eAAO,OAAO,SAAS,YAAY,KAAK,KAAK,CAAC;AAAA,MAChD,CAAC;AAAA,IACL;AAEA;AAAA,MACE,MAAM,MAAM;AAAA,MACZ,MAAM,2BAAA;AAAA,MACN,EAAE,WAAW,MAAM,MAAM,KAAA;AAAA,IAAK;;;;;;;;;;;;ECQvB,OAAM;AAAA,EAAe,MAAK;;AACxB,MAAAJ,eAAA,EAAA,OAAM,gBAAA;AACJ,MAAAO,eAAA,EAAA,OAAM,eAAA;;AASN,MAAAC,eAAA,EAAA,OAAM,iBAAA;AACJ,MAAAC,eAAA,EAAA,OAAM,wBAAA;AACJ,MAAA,aAAA,EAAA,OAAM,aAAA;;;;EAMQ,OAAM;;;;sBArBnChB,mBAqCM,OAAA;AAAA,IArCD,KAAI;AAAA,IAAQ,OAAM;AAAA,IAAc,IAAE,GAAK,OAAA,EAAE;AAAA,IAAW,UAAS;AAAA,IAAK,MAAK;AAAA,IAAS,mBAAgB;AAAA,IACnG,eAAY;AAAA,EAAA,GAAA;AAAA,IACZE,mBAkCM,OAlCNI,cAkCM;AAAA,MAjCJJ,mBAgCM,OAhCNK,cAgCM;AAAA,QA/BJL,mBAOM,OAPNY,cAOM;AAAA,UANJZ,mBAEK,MAAA;AAAA,YAFD,OAAM;AAAA,YAAe,IAAE,GAAK,OAAA,EAAE;AAAA,UAAA,GAAAO,gBAC7B,OAAA,KAAK,GAAA,GAAAC,YAAA;AAAA,UAAA,OAAA,CAAA,MAAA,OAAA,CAAA,IAEVR,mBAES,UAAA;AAAA,YAFD,MAAK;AAAA,YAAS,OAAM;AAAA,YAAkB,mBAAgB;AAAA,YAAQ,gBAAa;AAAA,YAAQ,cAAW;AAAA,UAAA,GAAA;AAAA,YACpGA,mBAA+D,QAAA;AAAA,cAAzD,eAAY;AAAA,cAAO,OAAM;AAAA,YAAA,GAAkB,GAAO;AAAA,UAAA,GAAA,EAAA;AAAA;QAI5DA,mBAqBM,OArBNa,cAqBM;AAAA,UApBJb,mBAKM,OALNc,cAKM;AAAA,YAJJd,mBAGM,OAHN,YAGM;AAAA,cAAAE,eAFJF,mBACgB,SAAA;AAAA,gBADT,MAAK;AAAA,gBAAS,OAAM;AAAA,gBAAgB,aAAa,OAAA;AAAA,gBAAA,uBAAA,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAC7C,OAAA,IAAC;AAAA,cAAA,GAAA,MAAA,GAAA,UAAA,GAAA;AAAA,6BAAD,OAAA,CAAC;AAAA,cAAA,CAAA;AAAA;;WAIJ,OAAA,WAAAG,UAAA,GAAZL,mBAOM,OAPN,aAOM;AAAA,aAAAK,UAAA,IAAA,GANJL,mBAKEY,UAAA,MAAAC,WALuB,OAAA,cAAY,CAApB,SAAI;kCAArBF,YAKE,OAAA,UAAA,GAAA;AAAA,gBAJC;AAAA,gBACA,KAAK,OAAA,YAAY,KAAK,KAAK;AAAA,gBAC3B,OAAO;AAAA,gBACP,kBAAA,OAAA;AAAA,cAAA,GAAA,MAAA,GAAA,CAAA,QAAA,kBAAA,CAAA;AAAA;8BAGLX,mBAIM,OAAA,aAAA,CAAA,GAAA,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA;AAAA,YAHJE,mBAEM,OAAA,EAFD,OAAM,gCAAA,GAA+B;AAAA,cACxCA,mBAAyD,OAAA,EAApD,OAAM,wCAAA,CAAuC;AAAA,YAAA,GAAA,EAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACtMhE,UAAM,QAAQ;AAoCd,YAAQ,MAAM,MAAM,EAAE;AACtB,YAAQ,QAAQ,MAAM,IAAI;AAC1B,YAAQ,YAAY,MAAM,QAAQ;AAClC,YAAQ,eAAe,MAAM,WAAW;AACxC,YAAQ,eAAe,MAAM,WAAW;AACxC,YAAQ,iBAAiB,MAAM,iBAAiB,oBAAoB;AAEpE,aAAS,qBAAqB,MAAW,GAAW;AAClD,aAAO,MAAM,YAAY,IAAI,EAAE,cAAc,SAAS,EAAE,aAAa;AAAA,IACvE;AAEA,UAAM,WAAW,IAAgB,EAAE;AACnC,UAAM,QAAQ,IAAuB,WAAW,MAAM,KAAK,CAAC;AAG5D,UAAM,gBAAgB,IAAI,KAAK;AAE/B,aAAS,eAAe;AACtB,oBAAc,QAAQ;AAAA,IACxB;AAEA,aAAS,WAAW,GAAW,MAAgB;AAC7C,eAAS,QAAQ,SAAS,MAAM,OAAO,CAAC,OAAiB,MAAM,YAAY,GAAG,KAAK,MAAM,MAAM,YAAY,KAAK,KAAK,CAAC;AAAA,IACxH;AAEA,aAAS,eAAe,OAAc;AACpC,eAAS,QAAQ,UAAU,KAAK;AAAA,IAClC;AAEA,UAAM,MAAM,MAAM,OAAO,OAAO,MAAM;AACpC,UAAI,OAAO,MAAM,YAAY;AAC3B,YAAI,MAAM,EAAA;AAAA,MACZ;AAEA,eAAS,QAAQ,WAAW,CAAC,EAAE,OAAO,CAAC,SAAmB;AACxD,eAAO,MAAM,MAAM,SAAS,MAAM,YAAY,KAAK,KAAK,CAAC;AAAA,MAC3D,CAAC;AAAA,IACH,GAAG,EAAE,WAAW,MAAM;AAEtB,UAAM,iBAAiB,SAAS,MAAM;AACpC,aAAO,SAAS,MAAM,IAAI,CAAA,SAAQ,MAAM,YAAY,KAAK,KAAK,CAAC;AAAA,IACjE,CAAC;AAED,UAAM,YAAY,SAAS,MAAM;AAC/B,aAAO,CAAC,MAAM,YAAY,CAAC,MAAM;AAAA,IACnC,CAAC;;;;;;ACKM,MAAA,aAAA,EAAA,OAAM,eAAA;AAKA,MAAA,aAAA,EAAA,OAAM,YAAA;;;;;EA2BD,OAAM;;;;;AAhCtB,SAAAG,UAAA,GAAAL,mBA+DM,OA/DN,YA+DM;AAAA,IA9DJE,mBAkCM,OAAA;AAAA,MAlCD,OAAKD,eAAA,CAAC,kDAAgD,CAC/C,OAAA,WAAQ,KAAA,aAAA,CAAA,CAAA;AAAA,IAAA,GAAA;AAAA,MACP,OAAA,aAAAI,aAAXL,mBAYM,OAAA;AAAA,QAAA,KAAA;AAAA,QAZgB,OAAKC,eAAA,CAAC,aAAW,EAAA,WAAA,CACf,OAAA,UAAQ,CAAA;AAAA,MAAA,GAAA;AAAA,QAC9BC,mBASM,OATN,YASM;AAAA,UARJA,mBAGS,UAAA;AAAA,YAHD,OAAM;AAAA,YAAmD,MAAK;AAAA,YACnE,SAAO,OAAA;AAAA,UAAA,GAAAO,gBACL,OAAA,UAAU,GAAA,CAAA;AAAA,UAEfP,mBAGS,UAAA;AAAA,YAHD,OAAM;AAAA,YAAuC,MAAK;AAAA,YACvD,SAAK,sCAAE,OAAA,WAAQ,CAAA;AAAA,UAAA,GAAA,CAAA,GAAA,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA;AAAA,YAChBA,mBAAiC,QAAA,EAA3B,OAAM,cAAA,GAAa,MAAA,EAAA;AAAA,UAAA,EAAA,CAAA;AAAA;;MAKpB,OAAA,SAAS,SAAM,kBAA1BF,mBAcM,OAAA,YAAA;AAAA,QAbJiB,YAYkBC,iBAAA,EAZD,MAAK,OAAA,GAAM;AAAA,UAAA,SAAAC,QACpB,MAA6B;AAAA,aAAAd,UAAA,IAAA,GAAnCL,mBAUOY,UAAA,MAAAC,WAVmB,OAAA,UAAQ,CAApB,MAAM,MAAC;kCAArBb,mBAUO,QAAA;AAAA,gBATL,OAAKC,eAAA,CAAC,oBACE,OAAA,SAAS,CAAA;AAAA,gBAChB,KAAK,OAAA,YAAY,KAAK,KAAK;AAAA,gBAC5B,OAAA,EAAA,sBAAA,MAAA;AAAA,cAAA,GAAA;AAAA,gBACAC,mBAA0C,QAAA,MAAAO,gBAAjC,OAAA,YAAY,KAAK,KAAK,CAAA,GAAA,CAAA;AAAA,gBACL,iCAA1BT,mBAGO,QAAA;AAAA,kBAAA,KAAA;AAAA,kBAHD,MAAK;AAAA,kBACR,SAAKoB,cAAA,CAAA,WAAU,OAAA,WAAW,GAAG,IAAI,GAAA,CAAA,SAAA,CAAA;AAAA,kBAAG,OAAM;AAAA,kBAAO,OAAA,EAAA,UAAA,UAAA;AAAA,gBAAA,GAAA,CAAA,GAAA,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA;AAAA,kBAClDlB,mBAAiC,QAAA,EAA3B,OAAM,cAAA,GAAa,MAAA,EAAA;AAAA,gBAAA,EAAA,GAAA,GAAA,UAAA,KAAAmB,mBAAA,IAAA,IAAA;AAAA;;;;;0BAKjCrB,mBAEM,OAFN,YAEMS,gBADD,OAAA,WAAW,GAAA,CAAA;AAAA,IAAA,GAAA,CAAA;AAAA,IAIlBP,mBAUS,UAVToB,WAUS;AAAA,MAVD,UAAA;AAAA,MACN,OAAA,EAAA,WAAA,OAAA;AAAA,MACA,KAAI;AAAA,MACH,IAAI,OAAA;AAAA,MACJ,MAAM,OAAA;AAAA,MACN,UAAU,OAAA;AAAA,MACV,UAAU,OAAA;AAAA,IAAA,GACH,KAAA,MAAM,GAAA;AAAA,OAAAjB,UAAA,IAAA,GAEdL,mBAAmFY,UAAA,MAAAC,WAA9D,OAAA,gBAAc,CAApB,OAAE;4BAAjBb,mBAAmF,UAAA;AAAA,UAA7C,OAAO;AAAA,UAAK,UAAU;AAAA,QAAA,GAAAS,gBAAS,EAAE,GAAA,GAAA,UAAA;AAAA,MAAA,CAAA,GAAA,GAAA;AAAA;IAGzEQ,YAaE,qBAbFK,WAaE;AAAA,MAZC,MAAM,OAAA;AAAA,MACN,QAAI,sCAAE,OAAA,gBAAa;AAAA,MACnB,IAAI,OAAA;AAAA,MACJ,OAAO,OAAA;AAAA,MACP,QAAQ,OAAA;AAAA,MACR,OAAO,OAAA;AAAA,MACP,kBAAA,OAAA;AAAA,IAAA,GACO,KAAA,QAAM;AAAA,MACb,UAAU,OAAA;AAAA,MACV,UAAU,OAAA;AAAA,MACV,eAAa,OAAA;AAAA,MACb,YAAU,OAAA;AAAA,IAAA,CAAA,GAAA,MAAA,IAAA,CAAA,QAAA,MAAA,SAAA,UAAA,SAAA,oBAAA,YAAA,YAAA,aAAA,CAAA;AAAA;;;AC7JjB,MAAM,MAAM,0BAAU;AAAA,EACpB,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,EAAA;AAEJ,CAAC;AACD,IAAI,OAAO,iBAAiB,WAAW;AAEvC,MAAM,yBAAyB,YAAY;AAAA,EACzC,OAAO,KAAK;AAAA,EAEZ;AAAA,EAEA,oBAAoB;AAClB,QAAI,CAAC,KAAK,IAAI;AACZ,WAAK,KAAK,IAAI,MAAM,IAAI;AAAA,IAC1B;AAAA,EACF;AACF;AAEA,eAAe,OAAO;AACpB,iBAAe,OAAO,iBAAiB,IAAI,gBAAgB;AAC3D,QAAM,aAAa,cAAc;AACnC;AAEO,MAAM,QAAQ,qBAAA;","x_google_ignoreList":[1]}
|
|
@@ -35,7 +35,7 @@ async function init() {
|
|
|
35
35
|
injectCssToDocument(css);
|
|
36
36
|
customElements.define(MultiUploaderElement.is, MultiUploaderElement);
|
|
37
37
|
}
|
|
38
|
-
/* @__PURE__ */ init();
|
|
38
|
+
const ready = /* @__PURE__ */ init();
|
|
39
39
|
function createAppInstance(opt, tmpl, el) {
|
|
40
40
|
return defineComponent({
|
|
41
41
|
name: "MultiUploaderFieldApp",
|
|
@@ -256,4 +256,8 @@ function createAppInstance(opt, tmpl, el) {
|
|
|
256
256
|
}
|
|
257
257
|
});
|
|
258
258
|
}
|
|
259
|
+
export {
|
|
260
|
+
MultiUploaderElement,
|
|
261
|
+
ready
|
|
262
|
+
};
|
|
259
263
|
//# sourceMappingURL=field-multi-uploader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-multi-uploader.js","sources":["../../src/module/field-multi-uploader.ts"],"sourcesContent":["import { Modal } from 'bootstrap';\r\nimport type { Options } from 'sortablejs';\r\nimport {\r\n type ComponentPublicInstance,\r\n computed,\r\n createApp,\r\n defineComponent,\r\n getCurrentInstance,\r\n nextTick,\r\n onMounted,\r\n PropType,\r\n ref,\r\n useTemplateRef\r\n} from 'vue';\r\nimport { VueDraggable } from 'vue-draggable-plus';\r\nimport {\r\n createItem,\r\n ItemCard,\r\n ItemCardPlaceholder,\r\n MultiUploader,\r\n MultiUploaderComposableInstance,\r\n MultiUploaderOptions,\r\n UploaderItem\r\n} from 'vue-multi-uploader';\r\nimport css from 'vue-multi-uploader/src/vue-multi-uploader.scss?inline';\r\nimport { useStack } from '../composable';\r\nimport { data } from '../data';\r\nimport { forceArray, injectCssToDocument } from '../service';\r\nimport { mergeDeep } from '../utilities';\r\n\r\nexport type UniMultiUploaderOptions = {\r\n value?: any[];\r\n uploadUrl: string;\r\n maxFiles?: number;\r\n maxConcurrent?: number;\r\n thumbSize?: number;\r\n accept?: string;\r\n readonly: boolean;\r\n disabled: boolean;\r\n fieldName?: string;\r\n fieldFullName?: string;\r\n tmplSelector: string;\r\n canReplace: false;\r\n openFileHandler?: (item: UploaderItem) => void;\r\n}\r\n\r\nconst defaultOptions = {\r\n readonly: false,\r\n disabled: false,\r\n sortable: false,\r\n thumbSize: 150,\r\n maxConcurrent: 5,\r\n canReplace: false,\r\n tmplSelector: '#multi-uploader-field-tmpl',\r\n};\r\n\r\nclass MultiUploaderElement extends HTMLElement {\r\n static is = 'uni-multi-uploader';\r\n\r\n modalElement!: HTMLDivElement;\r\n vm!: ComponentPublicInstance;\r\n\r\n async connectedCallback() {\r\n let options: Partial<UniMultiUploaderOptions> = JSON.parse(\r\n this.getAttribute('options') || '{}'\r\n );\r\n\r\n const resolvedOptions: UniMultiUploaderOptions = mergeDeep({}, defaultOptions, options);\r\n\r\n // Make some default options since PHP will send NULL\r\n resolvedOptions.thumbSize ??= 150;\r\n\r\n this.modalElement = this.querySelector<HTMLDivElement>('.modal')!;\r\n\r\n const tmplSelector = resolvedOptions.tmplSelector;\r\n\r\n const app = createApp(\r\n createAppInstance(resolvedOptions, document.querySelector(tmplSelector)!.innerHTML, this)\r\n );\r\n\r\n this.vm = app.mount(this);\r\n }\r\n}\r\n\r\nasync function init() {\r\n injectCssToDocument(css);\r\n customElements.define(MultiUploaderElement.is, MultiUploaderElement);\r\n}\r\nexport const ready = init();\r\n\r\nfunction createAppInstance(opt: UniMultiUploaderOptions, tmpl: string, el: MultiUploaderElement) {\r\n return defineComponent({\r\n name: 'MultiUploaderFieldApp',\r\n template: tmpl,\r\n components: {\r\n VueDraggable,\r\n MultiUploader,\r\n ItemCard,\r\n ItemCardPlaceholder,\r\n },\r\n props: {\r\n stackName: String as PropType<string>,\r\n },\r\n setup(props, { expose }) {\r\n const options = ref<UniMultiUploaderOptions>(opt);\r\n const current = ref<UploaderItem>();\r\n const currentIndex = ref<number>();\r\n const loading = ref(false);\r\n const dragarea = ref<HTMLDivElement>();\r\n const modal = ref<HTMLDivElement>();\r\n const app = getCurrentInstance();\r\n const uploader = useTemplateRef<typeof MultiUploader>('uploader');\r\n const canModify = computed(() => !options.value.disabled && !options.value.readonly);\r\n const instance = ref<MultiUploaderComposableInstance>();\r\n\r\n onMounted(() => {\r\n instance.value = uploader.value!.instance;\r\n\r\n domEmit('multi-uploader:mounted', { app, uploader });\r\n });\r\n\r\n const items = ref<UploaderItem[]>([]);\r\n\r\n for (let item of forceArray(options.value.value)) {\r\n if (typeof item === 'string') {\r\n item = {\r\n url: item\r\n };\r\n }\r\n\r\n const uploadItem = createItem({\r\n url: item.url || '',\r\n thumbUrl: item.thumbUrl || item.thumb_url || item.url || '',\r\n data: item\r\n });\r\n\r\n items.value.push(uploadItem);\r\n }\r\n\r\n const uploadUrl = options.value.uploadUrl;\r\n const value = items.value;\r\n const uploaderOptions = ref<MultiUploaderOptions>({\r\n maxFiles: () => options.value.maxFiles,\r\n readonly: () => options.value.readonly,\r\n disabled: () => options.value.disabled,\r\n accept: () => options.value.accept,\r\n maxConcurrent: () => options.value.maxConcurrent,\r\n prepareXhr(xhr) {\r\n xhr.setRequestHeader(\r\n 'X-CSRF-TOKEN',\r\n data('csrf-token')\r\n );\r\n },\r\n onItemUploadSuccess(item, xhr) {\r\n const res = JSON.parse(xhr.responseText);\r\n item.url = res.data.url;\r\n item.thumbUrl = res.data.thumbUrl || res.data.thumb_url || res.data.url;\r\n item.data = res.data;\r\n item.data.title ??= item.url.split('/').pop()?.split('?').shift() || '';\r\n }\r\n });\r\n const draggableOptions: Options = {\r\n draggable: '.c-drag-item',\r\n animation: 300,\r\n disabled: !canModify.value,\r\n };\r\n\r\n function openFile(item: UploaderItem) {\r\n if (options.value.openFileHandler) {\r\n options.value.openFileHandler(item);\r\n } else {\r\n window.open(item.download_url || item.url);\r\n }\r\n }\r\n\r\n async function itemClick(item: UploaderItem, i: number, event: MouseEvent) {\r\n current.value = item;\r\n currentIndex.value = i;\r\n\r\n domEmit('item-click', { item, i });\r\n\r\n nextTick().then(() => {\r\n Modal.getOrCreateInstance(modal.value!).show();\r\n });\r\n // this.$options.metaModal.modal('show');\r\n }\r\n\r\n function metaSave() {\r\n current.value = undefined;\r\n currentIndex.value = undefined;\r\n\r\n // nextTick().then(() => {\r\n // new bootstrap.Modal(modal.value).hide();\r\n // });\r\n // this.$options.metaModal.modal('hide');\r\n }\r\n\r\n function isImage(url: string) {\r\n const ext = url.split('.').pop()!.split('?').shift() || '';\r\n const allow = ['png', 'jpeg', 'jpg', 'gif', 'bmp', 'webp'];\r\n\r\n return allow.indexOf(ext.toLowerCase()) !== -1;\r\n }\r\n\r\n function dragover(e: DragEvent) {\r\n if (!options.value.canReplace) {\r\n return;\r\n }\r\n\r\n dragarea.value!.style.opacity = '0.75';\r\n }\r\n\r\n function dragleave(e: DragEvent) {\r\n if (!options.value.canReplace) {\r\n return;\r\n }\r\n\r\n dragarea.value!.style.opacity = '1';\r\n }\r\n\r\n function drop(event: DragEvent) {\r\n if (!options.value.canReplace) {\r\n return;\r\n }\r\n\r\n dragarea.value!.style.opacity = '1';\r\n const item = current.value;\r\n const file = event.dataTransfer?.files[0] || null;\r\n\r\n if (!file) {\r\n return;\r\n }\r\n\r\n instance.value!.checkFile(file);\r\n\r\n if (instance.value!.isReadonly) {\r\n return;\r\n }\r\n\r\n item!.file = file;\r\n\r\n loading.value = true;\r\n\r\n try {\r\n instance.value!.uploadFile(item!);\r\n } finally {\r\n loading.value = false;\r\n }\r\n }\r\n\r\n function uploading() {\r\n useStack(props.stackName).push(true);\r\n\r\n domEmit('uploading');\r\n }\r\n\r\n function uploaded() {\r\n useStack(props.stackName).pop();\r\n\r\n domEmit('uploaded');\r\n }\r\n\r\n function onChange(item: UploaderItem) {\r\n domEmit('change', item);\r\n }\r\n\r\n function domEmit(event: string, detail?: any) {\r\n el.dispatchEvent(new CustomEvent(event, { detail }));\r\n }\r\n\r\n const foo = ref<string>();\r\n\r\n foo.value = 'Bar';\r\n\r\n const icons = ref<Record<string, string>>({\r\n default: 'fas fa-file',\r\n pdf: 'fas fa-file-pdf text-danger',\r\n xls: 'fas fa-file-excel text-success',\r\n xlsx: 'fas fa-file-excel text-success',\r\n doc: 'fas fa-file-word text-primary',\r\n docx: 'fas fa-file-word text-primary',\r\n ppt: 'fas fa-file-powerpoint text-warning',\r\n pptx: 'fas fa-file-powerpoint text-warning',\r\n zip: 'fas fa-file-archive text-dark',\r\n '7z': 'fas fa-file-archive text-dark',\r\n rar: 'fas fa-file-archive text-dark',\r\n mp4: 'fas fa-file-video text-dark',\r\n avi: 'fas fa-file-video text-dark',\r\n flv: 'fas fa-file-video text-dark',\r\n mov: 'fas fa-file-video text-dark',\r\n ogg: 'fas fa-file-video text-dark',\r\n webm: 'fas fa-file-video text-dark',\r\n mpg: 'fas fa-file-video text-dark',\r\n mp3: 'fas fa-file-audio text-dark',\r\n acc: 'fas fa-file-audio text-dark',\r\n wav: 'fas fa-file-audio text-dark',\r\n });\r\n\r\n function setIcons(newIcons: Record<string, string>, merge = true) {\r\n if (merge) {\r\n icons.value = { ...icons.value, ...newIcons };\r\n return;\r\n }\r\n\r\n icons.value = newIcons;\r\n }\r\n\r\n expose({\r\n uploader,\r\n instance,\r\n value,\r\n canModify,\r\n openFile,\r\n itemClick,\r\n isImage,\r\n setIcons,\r\n });\r\n\r\n function fileIcon(item: UploaderItem) {\r\n let path = item.file ? item.file.name : item.url;\r\n\r\n // strip query\r\n path = String(path).split('?')[0];\r\n\r\n // Get extension\r\n const ext = path.split('.').pop() || '';\r\n\r\n const def = 'default' in icons ? icons.default : 'fas fa-file';\r\n\r\n return icons[String(ext || 'default').toLowerCase() as keyof typeof icons] || def;\r\n }\r\n\r\n return {\r\n uploader,\r\n uploadUrl,\r\n value,\r\n uploaderOptions,\r\n draggableOptions,\r\n modal,\r\n dragarea,\r\n options,\r\n current,\r\n currentIndex,\r\n loading,\r\n instance,\r\n canModify,\r\n\r\n openFile,\r\n itemClick,\r\n metaSave,\r\n isImage,\r\n dragover,\r\n dragleave,\r\n drop,\r\n uploading,\r\n uploaded,\r\n onChange,\r\n domEmit,\r\n fileIcon,\r\n };\r\n }\r\n });\r\n}\r\n"],"names":[],"mappings":";;;;;;AA8CA,MAAM,iBAAiB;AAAA,EACrB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,cAAc;AAChB;AAEA,MAAM,6BAA6B,YAAY;AAAA,EAC7C,OAAO,KAAK;AAAA,EAEZ;AAAA,EACA;AAAA,EAEA,MAAM,oBAAoB;AACxB,QAAI,UAA4C,KAAK;AAAA,MACnD,KAAK,aAAa,SAAS,KAAK;AAAA,IAAA;AAGlC,UAAM,kBAA2C,UAAU,IAAI,gBAAgB,OAAO;AAGtF,oBAAgB,cAAc;AAE9B,SAAK,eAAe,KAAK,cAA8B,QAAQ;AAE/D,UAAM,eAAe,gBAAgB;AAErC,UAAM,MAAM;AAAA,MACV,kBAAkB,iBAAiB,SAAS,cAAc,YAAY,EAAG,WAAW,IAAI;AAAA,IAAA;AAG1F,SAAK,KAAK,IAAI,MAAM,IAAI;AAAA,EAC1B;AACF;AAEA,eAAe,OAAO;AACpB,sBAAoB,GAAG;AACvB,iBAAe,OAAO,qBAAqB,IAAI,oBAAoB;AACrE;AACqB,qBAAA;AAErB,SAAS,kBAAkB,KAA8B,MAAc,IAA0B;AAC/F,SAAO,gBAAgB;AAAA,IACrB,MAAM;AAAA,IACN,UAAU;AAAA,IACV,YAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,OAAO;AAAA,MACL,WAAW;AAAA,IAAA;AAAA,IAEb,MAAM,OAAO,EAAE,UAAU;AACvB,YAAM,UAAU,IAA6B,GAAG;AAChD,YAAM,UAAU,IAAA;AAChB,YAAM,eAAe,IAAA;AACrB,YAAM,UAAU,IAAI,KAAK;AACzB,YAAM,WAAW,IAAA;AACjB,YAAM,QAAQ,IAAA;AACd,YAAM,MAAM,mBAAA;AACZ,YAAM,WAAW,eAAqC,UAAU;AAChE,YAAM,YAAY,SAAS,MAAM,CAAC,QAAQ,MAAM,YAAY,CAAC,QAAQ,MAAM,QAAQ;AACnF,YAAM,WAAW,IAAA;AAEjB,gBAAU,MAAM;AACd,iBAAS,QAAQ,SAAS,MAAO;AAEjC,gBAAQ,0BAA0B,EAAE,KAAK,SAAA,CAAU;AAAA,MACrD,CAAC;AAED,YAAM,QAAQ,IAAoB,EAAE;AAEpC,eAAS,QAAQ,WAAW,QAAQ,MAAM,KAAK,GAAG;AAChD,YAAI,OAAO,SAAS,UAAU;AAC5B,iBAAO;AAAA,YACL,KAAK;AAAA,UAAA;AAAA,QAET;AAEA,cAAM,aAAa,WAAW;AAAA,UAC5B,KAAK,KAAK,OAAO;AAAA,UACjB,UAAU,KAAK,YAAY,KAAK,aAAa,KAAK,OAAO;AAAA,UACzD,MAAM;AAAA,QAAA,CACP;AAED,cAAM,MAAM,KAAK,UAAU;AAAA,MAC7B;AAEA,YAAM,YAAY,QAAQ,MAAM;AAChC,YAAM,QAAQ,MAAM;AACpB,YAAM,kBAAkB,IAA0B;AAAA,QAChD,UAAU,MAAM,QAAQ,MAAM;AAAA,QAC9B,UAAU,MAAM,QAAQ,MAAM;AAAA,QAC9B,UAAU,MAAM,QAAQ,MAAM;AAAA,QAC9B,QAAQ,MAAM,QAAQ,MAAM;AAAA,QAC5B,eAAe,MAAM,QAAQ,MAAM;AAAA,QACnC,WAAW,KAAK;AACd,cAAI;AAAA,YACF;AAAA,YACA,KAAK,YAAY;AAAA,UAAA;AAAA,QAErB;AAAA,QACA,oBAAoB,MAAM,KAAK;AAC7B,gBAAM,MAAM,KAAK,MAAM,IAAI,YAAY;AACvC,eAAK,MAAM,IAAI,KAAK;AACpB,eAAK,WAAW,IAAI,KAAK,YAAY,IAAI,KAAK,aAAa,IAAI,KAAK;AACpE,eAAK,OAAO,IAAI;AAChB,eAAK,KAAK,UAAU,KAAK,IAAI,MAAM,GAAG,EAAE,IAAA,GAAO,MAAM,GAAG,EAAE,WAAW;AAAA,QACvE;AAAA,MAAA,CACD;AACD,YAAM,mBAA4B;AAAA,QAChC,WAAW;AAAA,QACX,WAAW;AAAA,QACX,UAAU,CAAC,UAAU;AAAA,MAAA;AAGvB,eAAS,SAAS,MAAoB;AACpC,YAAI,QAAQ,MAAM,iBAAiB;AACjC,kBAAQ,MAAM,gBAAgB,IAAI;AAAA,QACpC,OAAO;AACL,iBAAO,KAAK,KAAK,gBAAgB,KAAK,GAAG;AAAA,QAC3C;AAAA,MACF;AAEA,qBAAe,UAAU,MAAoB,GAAW,OAAmB;AACzE,gBAAQ,QAAQ;AAChB,qBAAa,QAAQ;AAErB,gBAAQ,cAAc,EAAE,MAAM,EAAA,CAAG;AAEjC,iBAAA,EAAW,KAAK,MAAM;AACpB,gBAAM,oBAAoB,MAAM,KAAM,EAAE,KAAA;AAAA,QAC1C,CAAC;AAAA,MAEH;AAEA,eAAS,WAAW;AAClB,gBAAQ,QAAQ;AAChB,qBAAa,QAAQ;AAAA,MAMvB;AAEA,eAAS,QAAQ,KAAa;AAC5B,cAAM,MAAM,IAAI,MAAM,GAAG,EAAE,IAAA,EAAO,MAAM,GAAG,EAAE,MAAA,KAAW;AACxD,cAAM,QAAQ,CAAC,OAAO,QAAQ,OAAO,OAAO,OAAO,MAAM;AAEzD,eAAO,MAAM,QAAQ,IAAI,YAAA,CAAa,MAAM;AAAA,MAC9C;AAEA,eAAS,SAAS,GAAc;AAC9B,YAAI,CAAC,QAAQ,MAAM,YAAY;AAC7B;AAAA,QACF;AAEA,iBAAS,MAAO,MAAM,UAAU;AAAA,MAClC;AAEA,eAAS,UAAU,GAAc;AAC/B,YAAI,CAAC,QAAQ,MAAM,YAAY;AAC7B;AAAA,QACF;AAEA,iBAAS,MAAO,MAAM,UAAU;AAAA,MAClC;AAEA,eAAS,KAAK,OAAkB;AAC9B,YAAI,CAAC,QAAQ,MAAM,YAAY;AAC7B;AAAA,QACF;AAEA,iBAAS,MAAO,MAAM,UAAU;AAChC,cAAM,OAAO,QAAQ;AACrB,cAAM,OAAO,MAAM,cAAc,MAAM,CAAC,KAAK;AAE7C,YAAI,CAAC,MAAM;AACT;AAAA,QACF;AAEA,iBAAS,MAAO,UAAU,IAAI;AAE9B,YAAI,SAAS,MAAO,YAAY;AAC9B;AAAA,QACF;AAEA,aAAM,OAAO;AAEb,gBAAQ,QAAQ;AAEhB,YAAI;AACF,mBAAS,MAAO,WAAW,IAAK;AAAA,QAClC,UAAA;AACE,kBAAQ,QAAQ;AAAA,QAClB;AAAA,MACF;AAEA,eAAS,YAAY;AACnB,iBAAS,MAAM,SAAS,EAAE,KAAK,IAAI;AAEnC,gBAAQ,WAAW;AAAA,MACrB;AAEA,eAAS,WAAW;AAClB,iBAAS,MAAM,SAAS,EAAE,IAAA;AAE1B,gBAAQ,UAAU;AAAA,MACpB;AAEA,eAAS,SAAS,MAAoB;AACpC,gBAAQ,UAAU,IAAI;AAAA,MACxB;AAEA,eAAS,QAAQ,OAAe,QAAc;AAC5C,WAAG,cAAc,IAAI,YAAY,OAAO,EAAE,OAAA,CAAQ,CAAC;AAAA,MACrD;AAEA,YAAM,MAAM,IAAA;AAEZ,UAAI,QAAQ;AAEZ,YAAM,QAAQ,IAA4B;AAAA,QACxC,SAAS;AAAA,QACT,KAAK;AAAA,QACL,KAAK;AAAA,QACL,MAAM;AAAA,QACN,KAAK;AAAA,QACL,MAAM;AAAA,QACN,KAAK;AAAA,QACL,MAAM;AAAA,QACN,KAAK;AAAA,QACL,MAAM;AAAA,QACN,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,MAAM;AAAA,QACN,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MAAA,CACN;AAED,eAAS,SAAS,UAAkC,QAAQ,MAAM;AAChE,YAAI,OAAO;AACT,gBAAM,QAAQ,EAAE,GAAG,MAAM,OAAO,GAAG,SAAA;AACnC;AAAA,QACF;AAEA,cAAM,QAAQ;AAAA,MAChB;AAEA,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAED,eAAS,SAAS,MAAoB;AACpC,YAAI,OAAO,KAAK,OAAO,KAAK,KAAK,OAAO,KAAK;AAG7C,eAAO,OAAO,IAAI,EAAE,MAAM,GAAG,EAAE,CAAC;AAGhC,cAAM,MAAM,KAAK,MAAM,GAAG,EAAE,SAAS;AAErC,cAAM,MAAM,aAAa,QAAQ,MAAM,UAAU;AAEjD,eAAO,MAAM,OAAO,OAAO,SAAS,EAAE,YAAA,CAAmC,KAAK;AAAA,MAChF;AAEA,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA,CACD;AACH;"}
|
|
1
|
+
{"version":3,"file":"field-multi-uploader.js","sources":["../../src/module/field-multi-uploader.ts"],"sourcesContent":["import { Modal } from 'bootstrap';\r\nimport type { Options } from 'sortablejs';\r\nimport {\r\n type ComponentPublicInstance,\r\n computed,\r\n createApp,\r\n defineComponent,\r\n getCurrentInstance,\r\n nextTick,\r\n onMounted,\r\n PropType,\r\n ref,\r\n useTemplateRef\r\n} from 'vue';\r\nimport { VueDraggable } from 'vue-draggable-plus';\r\nimport {\r\n createItem,\r\n ItemCard,\r\n ItemCardPlaceholder,\r\n MultiUploader,\r\n MultiUploaderComposableInstance,\r\n MultiUploaderOptions,\r\n UploaderItem\r\n} from 'vue-multi-uploader';\r\nimport css from 'vue-multi-uploader/src/vue-multi-uploader.scss?inline';\r\nimport { useStack } from '../composable';\r\nimport { data } from '../data';\r\nimport { forceArray, injectCssToDocument } from '../service';\r\nimport { mergeDeep } from '../utilities';\r\n\r\nexport type UniMultiUploaderOptions = {\r\n value?: any[];\r\n uploadUrl: string;\r\n maxFiles?: number;\r\n maxConcurrent?: number;\r\n thumbSize?: number;\r\n accept?: string;\r\n readonly: boolean;\r\n disabled: boolean;\r\n fieldName?: string;\r\n fieldFullName?: string;\r\n tmplSelector: string;\r\n canReplace: false;\r\n openFileHandler?: (item: UploaderItem) => void;\r\n}\r\n\r\nconst defaultOptions = {\r\n readonly: false,\r\n disabled: false,\r\n sortable: false,\r\n thumbSize: 150,\r\n maxConcurrent: 5,\r\n canReplace: false,\r\n tmplSelector: '#multi-uploader-field-tmpl',\r\n};\r\n\r\nexport class MultiUploaderElement extends HTMLElement {\r\n static is = 'uni-multi-uploader';\r\n\r\n modalElement!: HTMLDivElement;\r\n vm!: ComponentPublicInstance;\r\n\r\n async connectedCallback() {\r\n let options: Partial<UniMultiUploaderOptions> = JSON.parse(\r\n this.getAttribute('options') || '{}'\r\n );\r\n\r\n const resolvedOptions: UniMultiUploaderOptions = mergeDeep({}, defaultOptions, options);\r\n\r\n // Make some default options since PHP will send NULL\r\n resolvedOptions.thumbSize ??= 150;\r\n\r\n this.modalElement = this.querySelector<HTMLDivElement>('.modal')!;\r\n\r\n const tmplSelector = resolvedOptions.tmplSelector;\r\n\r\n const app = createApp(\r\n createAppInstance(resolvedOptions, document.querySelector(tmplSelector)!.innerHTML, this)\r\n );\r\n\r\n this.vm = app.mount(this);\r\n }\r\n}\r\n\r\nasync function init() {\r\n injectCssToDocument(css);\r\n customElements.define(MultiUploaderElement.is, MultiUploaderElement);\r\n}\r\nexport const ready = init();\r\n\r\nexport interface MultiUploaderModule {\r\n MultiUploaderElement: typeof MultiUploaderElement;\r\n ready: typeof ready;\r\n}\r\n\r\nfunction createAppInstance(opt: UniMultiUploaderOptions, tmpl: string, el: MultiUploaderElement) {\r\n return defineComponent({\r\n name: 'MultiUploaderFieldApp',\r\n template: tmpl,\r\n components: {\r\n VueDraggable,\r\n MultiUploader,\r\n ItemCard,\r\n ItemCardPlaceholder,\r\n },\r\n props: {\r\n stackName: String as PropType<string>,\r\n },\r\n setup(props, { expose }) {\r\n const options = ref<UniMultiUploaderOptions>(opt);\r\n const current = ref<UploaderItem>();\r\n const currentIndex = ref<number>();\r\n const loading = ref(false);\r\n const dragarea = ref<HTMLDivElement>();\r\n const modal = ref<HTMLDivElement>();\r\n const app = getCurrentInstance();\r\n const uploader = useTemplateRef<typeof MultiUploader>('uploader');\r\n const canModify = computed(() => !options.value.disabled && !options.value.readonly);\r\n const instance = ref<MultiUploaderComposableInstance>();\r\n\r\n onMounted(() => {\r\n instance.value = uploader.value!.instance;\r\n\r\n domEmit('multi-uploader:mounted', { app, uploader });\r\n });\r\n\r\n const items = ref<UploaderItem[]>([]);\r\n\r\n for (let item of forceArray(options.value.value)) {\r\n if (typeof item === 'string') {\r\n item = {\r\n url: item\r\n };\r\n }\r\n\r\n const uploadItem = createItem({\r\n url: item.url || '',\r\n thumbUrl: item.thumbUrl || item.thumb_url || item.url || '',\r\n data: item\r\n });\r\n\r\n items.value.push(uploadItem);\r\n }\r\n\r\n const uploadUrl = options.value.uploadUrl;\r\n const value = items.value;\r\n const uploaderOptions = ref<MultiUploaderOptions>({\r\n maxFiles: () => options.value.maxFiles,\r\n readonly: () => options.value.readonly,\r\n disabled: () => options.value.disabled,\r\n accept: () => options.value.accept,\r\n maxConcurrent: () => options.value.maxConcurrent,\r\n prepareXhr(xhr) {\r\n xhr.setRequestHeader(\r\n 'X-CSRF-TOKEN',\r\n data('csrf-token')\r\n );\r\n },\r\n onItemUploadSuccess(item, xhr) {\r\n const res = JSON.parse(xhr.responseText);\r\n item.url = res.data.url;\r\n item.thumbUrl = res.data.thumbUrl || res.data.thumb_url || res.data.url;\r\n item.data = res.data;\r\n item.data.title ??= item.url.split('/').pop()?.split('?').shift() || '';\r\n }\r\n });\r\n const draggableOptions: Options = {\r\n draggable: '.c-drag-item',\r\n animation: 300,\r\n disabled: !canModify.value,\r\n };\r\n\r\n function openFile(item: UploaderItem) {\r\n if (options.value.openFileHandler) {\r\n options.value.openFileHandler(item);\r\n } else {\r\n window.open(item.download_url || item.url);\r\n }\r\n }\r\n\r\n async function itemClick(item: UploaderItem, i: number, event: MouseEvent) {\r\n current.value = item;\r\n currentIndex.value = i;\r\n\r\n domEmit('item-click', { item, i });\r\n\r\n nextTick().then(() => {\r\n Modal.getOrCreateInstance(modal.value!).show();\r\n });\r\n // this.$options.metaModal.modal('show');\r\n }\r\n\r\n function metaSave() {\r\n current.value = undefined;\r\n currentIndex.value = undefined;\r\n\r\n // nextTick().then(() => {\r\n // new bootstrap.Modal(modal.value).hide();\r\n // });\r\n // this.$options.metaModal.modal('hide');\r\n }\r\n\r\n function isImage(url: string) {\r\n const ext = url.split('.').pop()!.split('?').shift() || '';\r\n const allow = ['png', 'jpeg', 'jpg', 'gif', 'bmp', 'webp'];\r\n\r\n return allow.indexOf(ext.toLowerCase()) !== -1;\r\n }\r\n\r\n function dragover(e: DragEvent) {\r\n if (!options.value.canReplace) {\r\n return;\r\n }\r\n\r\n dragarea.value!.style.opacity = '0.75';\r\n }\r\n\r\n function dragleave(e: DragEvent) {\r\n if (!options.value.canReplace) {\r\n return;\r\n }\r\n\r\n dragarea.value!.style.opacity = '1';\r\n }\r\n\r\n function drop(event: DragEvent) {\r\n if (!options.value.canReplace) {\r\n return;\r\n }\r\n\r\n dragarea.value!.style.opacity = '1';\r\n const item = current.value;\r\n const file = event.dataTransfer?.files[0] || null;\r\n\r\n if (!file) {\r\n return;\r\n }\r\n\r\n instance.value!.checkFile(file);\r\n\r\n if (instance.value!.isReadonly) {\r\n return;\r\n }\r\n\r\n item!.file = file;\r\n\r\n loading.value = true;\r\n\r\n try {\r\n instance.value!.uploadFile(item!);\r\n } finally {\r\n loading.value = false;\r\n }\r\n }\r\n\r\n function uploading() {\r\n useStack(props.stackName).push(true);\r\n\r\n domEmit('uploading');\r\n }\r\n\r\n function uploaded() {\r\n useStack(props.stackName).pop();\r\n\r\n domEmit('uploaded');\r\n }\r\n\r\n function onChange(item: UploaderItem) {\r\n domEmit('change', item);\r\n }\r\n\r\n function domEmit(event: string, detail?: any) {\r\n el.dispatchEvent(new CustomEvent(event, { detail }));\r\n }\r\n\r\n const foo = ref<string>();\r\n\r\n foo.value = 'Bar';\r\n\r\n const icons = ref<Record<string, string>>({\r\n default: 'fas fa-file',\r\n pdf: 'fas fa-file-pdf text-danger',\r\n xls: 'fas fa-file-excel text-success',\r\n xlsx: 'fas fa-file-excel text-success',\r\n doc: 'fas fa-file-word text-primary',\r\n docx: 'fas fa-file-word text-primary',\r\n ppt: 'fas fa-file-powerpoint text-warning',\r\n pptx: 'fas fa-file-powerpoint text-warning',\r\n zip: 'fas fa-file-archive text-dark',\r\n '7z': 'fas fa-file-archive text-dark',\r\n rar: 'fas fa-file-archive text-dark',\r\n mp4: 'fas fa-file-video text-dark',\r\n avi: 'fas fa-file-video text-dark',\r\n flv: 'fas fa-file-video text-dark',\r\n mov: 'fas fa-file-video text-dark',\r\n ogg: 'fas fa-file-video text-dark',\r\n webm: 'fas fa-file-video text-dark',\r\n mpg: 'fas fa-file-video text-dark',\r\n mp3: 'fas fa-file-audio text-dark',\r\n acc: 'fas fa-file-audio text-dark',\r\n wav: 'fas fa-file-audio text-dark',\r\n });\r\n\r\n function setIcons(newIcons: Record<string, string>, merge = true) {\r\n if (merge) {\r\n icons.value = { ...icons.value, ...newIcons };\r\n return;\r\n }\r\n\r\n icons.value = newIcons;\r\n }\r\n\r\n expose({\r\n uploader,\r\n instance,\r\n value,\r\n canModify,\r\n openFile,\r\n itemClick,\r\n isImage,\r\n setIcons,\r\n });\r\n\r\n function fileIcon(item: UploaderItem) {\r\n let path = item.file ? item.file.name : item.url;\r\n\r\n // strip query\r\n path = String(path).split('?')[0];\r\n\r\n // Get extension\r\n const ext = path.split('.').pop() || '';\r\n\r\n const def = 'default' in icons ? icons.default : 'fas fa-file';\r\n\r\n return icons[String(ext || 'default').toLowerCase() as keyof typeof icons] || def;\r\n }\r\n\r\n return {\r\n uploader,\r\n uploadUrl,\r\n value,\r\n uploaderOptions,\r\n draggableOptions,\r\n modal,\r\n dragarea,\r\n options,\r\n current,\r\n currentIndex,\r\n loading,\r\n instance,\r\n canModify,\r\n\r\n openFile,\r\n itemClick,\r\n metaSave,\r\n isImage,\r\n dragover,\r\n dragleave,\r\n drop,\r\n uploading,\r\n uploaded,\r\n onChange,\r\n domEmit,\r\n fileIcon,\r\n };\r\n }\r\n });\r\n}\r\n"],"names":[],"mappings":"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"}
|
package/dist/chunks/legacy.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { i as isDebug, u as useHttpClient, _ as __, r as route, a as useUniDirective, b as animateTo, c as renderMessage, d as clearMessages, s as simpleNotify, e as clearNotifies, l as loadAlpine, f as initAlpineComponent, p as prepareAlpine, g as useFormValidation, h as addGlobalValidator, j as
|
|
1
|
+
import { i as isDebug, u as useHttpClient, _ as __, r as route, a as useUniDirective, b as animateTo, c as renderMessage, d as clearMessages, s as simpleNotify, e as clearNotifies, l as loadAlpine, f as initAlpineComponent, p as prepareAlpine, g as useFormValidation, h as addGlobalValidator, j as useFieldValidationInstance, k as useFormValidationInstance, m as useStack, n as useQueue, o as useSystemUri, q as useAssetUri, t as domready, v as selectOne, w as selectAll, x as getBoundedInstance, y as getBoundedInstanceList, z as module, A as h, B as html, C as delegate, D as debounce, E as throttle, F as simpleConfirm, G as simpleAlert, H as sprintfExports, I as base64UrlEncode, J as base64UrlDecode, K as uid, L as tid, M as serial, N as mark, O as useTomSelect, P as slideUp, Q as slideDown, R as slideToggle, S as fadeOut, T as fadeIn, U as highlight, V as useColorPicker, W as useDisableOnSubmit, X as useDisableIfStackNotEmpty, Y as useCheckboxesMultiSelect, Z as useKeepAlive, $ as useBs5KeepTab, a0 as useBs5ButtonRadio, a1 as useBs5Tooltip, a2 as useFormAsync, a3 as useGridAsync, a4 as useForm, a5 as useGrid } from "./unicorn.js";
|
|
2
2
|
function numberFormat(number, decimals = 0, decPoint = ".", thousandsSep = ",") {
|
|
3
3
|
number = Number(number);
|
|
4
4
|
const str = number.toFixed(decimals ? decimals : 0).toString().split(".");
|
|
@@ -133,7 +133,7 @@ async function useLegacyMethods(app) {
|
|
|
133
133
|
app.formValidation = useFormValidation;
|
|
134
134
|
app.$validation = {
|
|
135
135
|
get: useFormValidationInstance,
|
|
136
|
-
getField:
|
|
136
|
+
getField: useFieldValidationInstance,
|
|
137
137
|
addGlobalValidator,
|
|
138
138
|
import: () => useFormValidation()
|
|
139
139
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"legacy.js","sources":["../../../../../../node_modules/@lyrasoft/ts-toolkit/src/generic/number.ts","../../src/legacy/loader.ts","../../src/legacy/legacy.ts"],"sourcesContent":["export function numberFormat(number: string | number, decimals = 0, decPoint = '.', thousandsSep = ',') {\n number = Number(number);\n\n const str = number.toFixed(decimals ? decimals : 0).toString().split('.');\n const parts = [];\n\n for (var i = str[0].length; i > 0; i -= 3) {\n parts.unshift(str[0].substring(Math.max(0, i - 3), i));\n }\n\n str[0] = parts.join(thousandsSep ? thousandsSep : ',');\n\n return str.join(decPoint ? decPoint : '.');\n}\n","import { isDebug } from '../service';\r\n\r\nconst imports: Record<string, { promise: Promise<any>; resolve?: Function; }> = {};\r\n\r\nexport class LegacyLoader {\r\n static install(app: any) {\r\n const loader = app.$loader = new this(app);\r\n\r\n app.import = loader.import.bind(loader);\r\n app.importSync = loader.importSync.bind(loader);\r\n app.importCSS = loader.importCSS.bind(loader);\r\n app.minFileName = loader.minFileName.bind(loader);\r\n app.afterImported = loader.afterImported.bind(loader);\r\n }\r\n\r\n constructor(protected app: any) {\r\n //\r\n }\r\n\r\n doImport(src: string): Promise<any> {\r\n return S.import(src);\r\n }\r\n\r\n /**\r\n * Import modules or scripts.\r\n */\r\n import(...src: any[]): Promise<any|any[]> {\r\n if (src.length === 1) {\r\n return this.doImport(src[0]);\r\n }\r\n\r\n const promises: Promise<any>[] = [];\r\n\r\n src.forEach((link) => {\r\n promises.push(\r\n link instanceof Promise ? link : this.doImport(link)\r\n );\r\n });\r\n\r\n return Promise.all(promises);\r\n }\r\n\r\n /**\r\n * Import sync.\r\n */\r\n importSync(...src: any): Promise<any|any[]> {\r\n let promise: Promise<any> = Promise.resolve();\r\n let url: string[];\r\n const modules: any[] = [];\r\n\r\n while (url = src.shift()) {\r\n if (!Array.isArray(url)) {\r\n url = [ url ];\r\n }\r\n\r\n const target = url;\r\n promise = promise.then(\r\n () => this.import(...target).then((m) => {\r\n modules.push(m);\r\n return modules;\r\n })\r\n );\r\n }\r\n\r\n return promise;\r\n }\r\n\r\n /**\r\n * Import CSS files.\r\n */\r\n async importCSS(...src: any): Promise<any|any[]> {\r\n let modules: any = await this.import(...src);\r\n\r\n if (!Array.isArray(modules)) {\r\n modules = [modules];\r\n }\r\n\r\n const styles: CSSStyleSheet[] = (modules as any[]).map(module => module.default);\r\n\r\n document.adoptedStyleSheets = [...document.adoptedStyleSheets, ...styles];\r\n }\r\n\r\n minFileName(fileName: string): string {\r\n const segments = fileName.split('.');\r\n const ext = segments.pop();\r\n\r\n if (isDebug()) {\r\n return segments.join('.') + '.min.' + ext;\r\n }\r\n\r\n return fileName;\r\n }\r\n\r\n asImported(name: string) {\r\n if (!imports[name]) {\r\n imports[name] = {\r\n promise: Promise.resolve(),\r\n resolve: undefined\r\n };\r\n } else {\r\n imports[name]?.resolve?.();\r\n }\r\n }\r\n\r\n /**\r\n * Add after import hook for some url or id.\r\n */\r\n afterImported(name: string, callback: (resolve: Function, reject?: Function) => void): Promise<any> {\r\n if (!imports[name]) {\r\n let r;\r\n imports[name] = {\r\n promise: new Promise((resolve) => {\r\n r = resolve;\r\n }),\r\n };\r\n\r\n imports[name].resolve = r;\r\n }\r\n\r\n imports[name].promise.then(callback);\r\n\r\n return imports[name].promise;\r\n }\r\n}\r\n\r\n","import { numberFormat } from '@lyrasoft/ts-toolkit/generic';\r\nimport { sprintf, vsprintf } from 'sprintf-js';\r\nimport {\r\n addGlobalValidator,\r\n useBs5ButtonRadio,\r\n useBs5KeepTab,\r\n useBs5Tooltip,\r\n useCheckboxesMultiSelect,\r\n useFieldValidationSync,\r\n useForm,\r\n useFormAsync,\r\n useFormValidation,\r\n useFormValidationInstance,\r\n useGrid,\r\n useGridAsync,\r\n useHttpClient,\r\n useQueue,\r\n useStack,\r\n useTomSelect,\r\n useUniDirective\r\n} from '../composable';\r\nimport {\r\n __,\r\n animateTo,\r\n base64UrlDecode,\r\n base64UrlEncode,\r\n clearMessages,\r\n clearNotifies,\r\n debounce,\r\n delegate,\r\n domready,\r\n fadeIn,\r\n fadeOut,\r\n getBoundedInstance,\r\n getBoundedInstanceList,\r\n h,\r\n highlight,\r\n html,\r\n initAlpineComponent,\r\n isDebug,\r\n loadAlpine,\r\n mark,\r\n module,\r\n prepareAlpine,\r\n renderMessage,\r\n route,\r\n selectAll,\r\n selectOne,\r\n serial,\r\n simpleAlert,\r\n simpleConfirm,\r\n simpleNotify,\r\n slideDown,\r\n slideToggle,\r\n slideUp,\r\n throttle,\r\n tid,\r\n uid,\r\n useAssetUri,\r\n useColorPicker,\r\n useDisableIfStackNotEmpty,\r\n useDisableOnSubmit,\r\n useKeepAlive,\r\n useSystemUri\r\n} from '../service';\r\nimport { LegacyLoader } from './loader';\r\n\r\nexport async function useLegacyMethods(app: any) {\r\n const http = await useHttpClient();\r\n\r\n app.use(LegacyLoader);\r\n\r\n handleUri(app);\r\n handlerHelper(app);\r\n handleCrypto(app);\r\n\r\n app.__ = __;\r\n app.trans = __;\r\n app.route = route;\r\n app.$http = http;\r\n app.directive = useUniDirective;\r\n\r\n app.animate = animateTo;\r\n app.$animation = { to: animateTo };\r\n\r\n app.addMessage = renderMessage;\r\n app.clearMessages = clearMessages;\r\n app.notify = simpleNotify;\r\n app.clearNotifies = clearNotifies;\r\n\r\n app.loadAlpine = loadAlpine;\r\n app.initAlpine = initAlpineComponent;\r\n app.beforeAlpineInit = prepareAlpine;\r\n app.prepareAlpine = prepareAlpine;\r\n\r\n handleUI(app);\r\n\r\n await handleFormGrid(app);\r\n\r\n app.formValidation = useFormValidation;\r\n app.$validation = {\r\n get: useFormValidationInstance,\r\n getField: useFieldValidationSync,\r\n addGlobalValidator: addGlobalValidator,\r\n import: () => useFormValidation()\r\n };\r\n\r\n app.stack = useStack;\r\n app.queue = useQueue;\r\n}\r\n\r\nfunction handleCrypto(app: any) {\r\n app.base64Encode = base64UrlEncode;\r\n app.base64Decode = base64UrlDecode;\r\n // app.uuid4 = uuid4;\r\n app.uid = uid;\r\n app.tid = tid;\r\n // app.md5 = md5;\r\n app.serial = serial;\r\n}\r\n\r\nfunction handleUri(app: any) {\r\n app.uri = useSystemUri;\r\n app.asset = useAssetUri;\r\n}\r\n\r\nfunction handlerHelper(app: any) {\r\n app.domready = domready;\r\n app.selectOne = selectOne;\r\n app.selectAll = selectAll;\r\n app.each = selectAll;\r\n app.getBoundedInstance = getBoundedInstance;\r\n app.getBoundedInstanceList = getBoundedInstanceList;\r\n app.module = module;\r\n app.h = h;\r\n app.html = html;\r\n // app.$get = get;\r\n // app.$set = set;\r\n app.delegate = delegate;\r\n app.debounce = debounce;\r\n app.throttle = throttle;\r\n app.isDebug = isDebug;\r\n app.confirm = simpleConfirm;\r\n app.alert = simpleAlert;\r\n app.numberFormat = numberFormat;\r\n app.sprintf = sprintf;\r\n app.vsprintf = vsprintf;\r\n // app.genRandomString = genRandomString;\r\n // app.defaultsDeep = defaultsDeep;\r\n}\r\n\r\nfunction handleUI(app: any) {\r\n app.$ui ??= {};\r\n app.$ui.addMessage = renderMessage;\r\n app.$ui.clearMessages = clearMessages;\r\n app.$ui.notify = simpleNotify;\r\n app.$ui.clearNotifies = clearNotifies;\r\n\r\n app.$ui.loadAlpine = loadAlpine;\r\n app.$ui.initAlpine = initAlpineComponent;\r\n app.$ui.beforeAlpineInit = prepareAlpine;\r\n app.$ui.prepareAlpine = prepareAlpine;\r\n\r\n app.$ui.mark = mark;\r\n app.$ui.tomSelect = useTomSelect;\r\n app.$ui.slideUp = slideUp;\r\n app.$ui.slideDown = slideDown;\r\n app.$ui.slideToggle = slideToggle;\r\n app.$ui.fadeOut = fadeOut;\r\n app.$ui.fadeIn = fadeIn;\r\n app.$ui.highlight = highlight;\r\n app.$ui.colorPicker = useColorPicker;\r\n app.$ui.disableOnSubmit = useDisableOnSubmit;\r\n app.$ui.disableIfStackNotEmpty = useDisableIfStackNotEmpty;\r\n app.$ui.checkboxesMultiSelect = useCheckboxesMultiSelect;\r\n app.$ui.keepAlive = useKeepAlive;\r\n app.$ui.bootstrap = {\r\n tooltip: useBs5Tooltip,\r\n buttonRadio: useBs5ButtonRadio,\r\n keepTab: useBs5KeepTab,\r\n };\r\n}\r\n\r\nasync function handleFormGrid(app: any) {\r\n await useFormAsync();\r\n await useGridAsync();\r\n\r\n app.form = useForm;\r\n app.grid = useGrid;\r\n}\r\n"],"names":["module","sprintf","vsprintf"],"mappings":";AAAO,SAAS,aAAa,QAAyB,WAAW,GAAG,WAAW,KAAK,eAAe,KAAK;AACtG,WAAS,OAAO,MAAM;AAEtB,QAAM,MAAM,OAAO,QAAQ,WAAW,WAAW,CAAC,EAAE,SAAA,EAAW,MAAM,GAAG;AACxE,QAAM,QAAQ,CAAA;AAEd,WAAS,IAAI,IAAI,CAAC,EAAE,QAAQ,IAAI,GAAG,KAAK,GAAG;AACzC,UAAM,QAAQ,IAAI,CAAC,EAAE,UAAU,KAAK,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;AAAA,EACvD;AAEA,MAAI,CAAC,IAAI,MAAM,KAAK,eAAe,eAAe,GAAG;AAErD,SAAO,IAAI,KAAK,WAAW,WAAW,GAAG;AAC3C;ACXA,MAAM,UAA0E,CAAA;AAEzE,MAAM,aAAa;AAAA,EAWxB,YAAsB,KAAU;AAAV,SAAA,MAAA;AAAA,EAEtB;AAAA,EAZA,OAAO,QAAQ,KAAU;AACvB,UAAM,SAAS,IAAI,UAAU,IAAI,KAAK,GAAG;AAEzC,QAAI,SAAS,OAAO,OAAO,KAAK,MAAM;AACtC,QAAI,aAAa,OAAO,WAAW,KAAK,MAAM;AAC9C,QAAI,YAAY,OAAO,UAAU,KAAK,MAAM;AAC5C,QAAI,cAAc,OAAO,YAAY,KAAK,MAAM;AAChD,QAAI,gBAAgB,OAAO,cAAc,KAAK,MAAM;AAAA,EACtD;AAAA,EAMA,SAAS,KAA2B;AAClC,WAAO,EAAE,OAAO,GAAG;AAAA,EACrB;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU,KAAgC;AACxC,QAAI,IAAI,WAAW,GAAG;AACpB,aAAO,KAAK,SAAS,IAAI,CAAC,CAAC;AAAA,IAC7B;AAEA,UAAM,WAA2B,CAAA;AAEjC,QAAI,QAAQ,CAAC,SAAS;AACpB,eAAS;AAAA,QACP,gBAAgB,UAAU,OAAO,KAAK,SAAS,IAAI;AAAA,MAAA;AAAA,IAEvD,CAAC;AAED,WAAO,QAAQ,IAAI,QAAQ;AAAA,EAC7B;AAAA;AAAA;AAAA;AAAA,EAKA,cAAc,KAA8B;AAC1C,QAAI,UAAwB,QAAQ,QAAA;AACpC,QAAI;AACJ,UAAM,UAAiB,CAAA;AAEvB,WAAO,MAAM,IAAI,SAAS;AACxB,UAAI,CAAC,MAAM,QAAQ,GAAG,GAAG;AACvB,cAAM,CAAE,GAAI;AAAA,MACd;AAEA,YAAM,SAAS;AACf,gBAAU,QAAQ;AAAA,QAChB,MAAM,KAAK,OAAO,GAAG,MAAM,EAAE,KAAK,CAAC,MAAM;AACvC,kBAAQ,KAAK,CAAC;AACd,iBAAO;AAAA,QACT,CAAC;AAAA,MAAA;AAAA,IAEL;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,aAAa,KAA8B;AAC/C,QAAI,UAAe,MAAM,KAAK,OAAO,GAAG,GAAG;AAE3C,QAAI,CAAC,MAAM,QAAQ,OAAO,GAAG;AAC3B,gBAAU,CAAC,OAAO;AAAA,IACpB;AAEA,UAAM,SAA2B,QAAkB,IAAI,CAAAA,YAAUA,QAAO,OAAO;AAE/E,aAAS,qBAAqB,CAAC,GAAG,SAAS,oBAAoB,GAAG,MAAM;AAAA,EAC1E;AAAA,EAEA,YAAY,UAA0B;AACpC,UAAM,WAAW,SAAS,MAAM,GAAG;AACnC,UAAM,MAAM,SAAS,IAAA;AAErB,QAAI,WAAW;AACb,aAAO,SAAS,KAAK,GAAG,IAAI,UAAU;AAAA,IACxC;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,WAAW,MAAc;AACvB,QAAI,CAAC,QAAQ,IAAI,GAAG;AAClB,cAAQ,IAAI,IAAI;AAAA,QACd,SAAS,QAAQ,QAAA;AAAA,QACjB,SAAS;AAAA,MAAA;AAAA,IAEb,OAAO;AACL,cAAQ,IAAI,GAAG,UAAA;AAAA,IACjB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,cAAc,MAAc,UAAwE;AAClG,QAAI,CAAC,QAAQ,IAAI,GAAG;AAClB,UAAI;AACJ,cAAQ,IAAI,IAAI;AAAA,QACd,SAAS,IAAI,QAAQ,CAAC,YAAY;AAChC,cAAI;AAAA,QACN,CAAC;AAAA,MAAA;AAGH,cAAQ,IAAI,EAAE,UAAU;AAAA,IAC1B;AAEA,YAAQ,IAAI,EAAE,QAAQ,KAAK,QAAQ;AAEnC,WAAO,QAAQ,IAAI,EAAE;AAAA,EACvB;AACF;ACxDA,eAAsB,iBAAiB,KAAU;AAC/C,QAAM,OAAO,MAAM,cAAA;AAEnB,MAAI,IAAI,YAAY;AAEpB,YAAU,GAAG;AACb,gBAAc,GAAG;AACjB,eAAa,GAAG;AAEhB,MAAI,KAAK;AACT,MAAI,QAAQ;AACZ,MAAI,QAAQ;AACZ,MAAI,QAAQ;AACZ,MAAI,YAAY;AAEhB,MAAI,UAAU;AACd,MAAI,aAAa,EAAE,IAAI,UAAA;AAEvB,MAAI,aAAa;AACjB,MAAI,gBAAgB;AACpB,MAAI,SAAS;AACb,MAAI,gBAAgB;AAEpB,MAAI,aAAa;AACjB,MAAI,aAAa;AACjB,MAAI,mBAAmB;AACvB,MAAI,gBAAgB;AAEpB,WAAS,GAAG;AAEZ,QAAM,eAAe,GAAG;AAExB,MAAI,iBAAiB;AACrB,MAAI,cAAc;AAAA,IAChB,KAAK;AAAA,IACL,UAAU;AAAA,IACV;AAAA,IACA,QAAQ,MAAM,kBAAA;AAAA,EAAkB;AAGlC,MAAI,QAAQ;AACZ,MAAI,QAAQ;AACd;AAEA,SAAS,aAAa,KAAU;AAC9B,MAAI,eAAe;AACnB,MAAI,eAAe;AAEnB,MAAI,MAAM;AACV,MAAI,MAAM;AAEV,MAAI,SAAS;AACf;AAEA,SAAS,UAAU,KAAU;AAC3B,MAAI,MAAM;AACV,MAAI,QAAQ;AACd;AAEA,SAAS,cAAc,KAAU;AAC/B,MAAI,WAAW;AACf,MAAI,YAAY;AAChB,MAAI,YAAY;AAChB,MAAI,OAAO;AACX,MAAI,qBAAqB;AACzB,MAAI,yBAAyB;AAC7B,MAAI,SAAS;AACb,MAAI,IAAI;AACR,MAAI,OAAO;AAGX,MAAI,WAAW;AACf,MAAI,WAAW;AACf,MAAI,WAAW;AACf,MAAI,UAAU;AACd,MAAI,UAAU;AACd,MAAI,QAAQ;AACZ,MAAI,eAAe;AACnB,MAAI,UAAUC,eAAAA;AACd,MAAI,WAAWC,eAAAA;AAGjB;AAEA,SAAS,SAAS,KAAU;AAC1B,MAAI,QAAQ,CAAA;AACZ,MAAI,IAAI,aAAa;AACrB,MAAI,IAAI,gBAAgB;AACxB,MAAI,IAAI,SAAS;AACjB,MAAI,IAAI,gBAAgB;AAExB,MAAI,IAAI,aAAa;AACrB,MAAI,IAAI,aAAa;AACrB,MAAI,IAAI,mBAAmB;AAC3B,MAAI,IAAI,gBAAgB;AAExB,MAAI,IAAI,OAAO;AACf,MAAI,IAAI,YAAY;AACpB,MAAI,IAAI,UAAU;AAClB,MAAI,IAAI,YAAY;AACpB,MAAI,IAAI,cAAc;AACtB,MAAI,IAAI,UAAU;AAClB,MAAI,IAAI,SAAS;AACjB,MAAI,IAAI,YAAY;AACpB,MAAI,IAAI,cAAc;AACtB,MAAI,IAAI,kBAAkB;AAC1B,MAAI,IAAI,yBAAyB;AACjC,MAAI,IAAI,wBAAwB;AAChC,MAAI,IAAI,YAAY;AACpB,MAAI,IAAI,YAAY;AAAA,IAClB,SAAS;AAAA,IACT,aAAa;AAAA,IACb,SAAS;AAAA,EAAA;AAEb;AAEA,eAAe,eAAe,KAAU;AACtC,QAAM,aAAA;AACN,QAAM,aAAA;AAEN,MAAI,OAAO;AACX,MAAI,OAAO;AACb;","x_google_ignoreList":[0]}
|
|
1
|
+
{"version":3,"file":"legacy.js","sources":["../../../../../../node_modules/@lyrasoft/ts-toolkit/src/generic/number.ts","../../src/legacy/loader.ts","../../src/legacy/legacy.ts"],"sourcesContent":["export function numberFormat(number: string | number, decimals = 0, decPoint = '.', thousandsSep = ',') {\n number = Number(number);\n\n const str = number.toFixed(decimals ? decimals : 0).toString().split('.');\n const parts = [];\n\n for (var i = str[0].length; i > 0; i -= 3) {\n parts.unshift(str[0].substring(Math.max(0, i - 3), i));\n }\n\n str[0] = parts.join(thousandsSep ? thousandsSep : ',');\n\n return str.join(decPoint ? decPoint : '.');\n}\n","import { isDebug } from '../service';\r\n\r\nconst imports: Record<string, { promise: Promise<any>; resolve?: Function; }> = {};\r\n\r\nexport class LegacyLoader {\r\n static install(app: any) {\r\n const loader = app.$loader = new this(app);\r\n\r\n app.import = loader.import.bind(loader);\r\n app.importSync = loader.importSync.bind(loader);\r\n app.importCSS = loader.importCSS.bind(loader);\r\n app.minFileName = loader.minFileName.bind(loader);\r\n app.afterImported = loader.afterImported.bind(loader);\r\n }\r\n\r\n constructor(protected app: any) {\r\n //\r\n }\r\n\r\n doImport(src: string): Promise<any> {\r\n return S.import(src);\r\n }\r\n\r\n /**\r\n * Import modules or scripts.\r\n */\r\n import(...src: any[]): Promise<any|any[]> {\r\n if (src.length === 1) {\r\n return this.doImport(src[0]);\r\n }\r\n\r\n const promises: Promise<any>[] = [];\r\n\r\n src.forEach((link) => {\r\n promises.push(\r\n link instanceof Promise ? link : this.doImport(link)\r\n );\r\n });\r\n\r\n return Promise.all(promises);\r\n }\r\n\r\n /**\r\n * Import sync.\r\n */\r\n importSync(...src: any): Promise<any|any[]> {\r\n let promise: Promise<any> = Promise.resolve();\r\n let url: string[];\r\n const modules: any[] = [];\r\n\r\n while (url = src.shift()) {\r\n if (!Array.isArray(url)) {\r\n url = [ url ];\r\n }\r\n\r\n const target = url;\r\n promise = promise.then(\r\n () => this.import(...target).then((m) => {\r\n modules.push(m);\r\n return modules;\r\n })\r\n );\r\n }\r\n\r\n return promise;\r\n }\r\n\r\n /**\r\n * Import CSS files.\r\n */\r\n async importCSS(...src: any): Promise<any|any[]> {\r\n let modules: any = await this.import(...src);\r\n\r\n if (!Array.isArray(modules)) {\r\n modules = [modules];\r\n }\r\n\r\n const styles: CSSStyleSheet[] = (modules as any[]).map(module => module.default);\r\n\r\n document.adoptedStyleSheets = [...document.adoptedStyleSheets, ...styles];\r\n }\r\n\r\n minFileName(fileName: string): string {\r\n const segments = fileName.split('.');\r\n const ext = segments.pop();\r\n\r\n if (isDebug()) {\r\n return segments.join('.') + '.min.' + ext;\r\n }\r\n\r\n return fileName;\r\n }\r\n\r\n asImported(name: string) {\r\n if (!imports[name]) {\r\n imports[name] = {\r\n promise: Promise.resolve(),\r\n resolve: undefined\r\n };\r\n } else {\r\n imports[name]?.resolve?.();\r\n }\r\n }\r\n\r\n /**\r\n * Add after import hook for some url or id.\r\n */\r\n afterImported(name: string, callback: (resolve: Function, reject?: Function) => void): Promise<any> {\r\n if (!imports[name]) {\r\n let r;\r\n imports[name] = {\r\n promise: new Promise((resolve) => {\r\n r = resolve;\r\n }),\r\n };\r\n\r\n imports[name].resolve = r;\r\n }\r\n\r\n imports[name].promise.then(callback);\r\n\r\n return imports[name].promise;\r\n }\r\n}\r\n\r\n","import { numberFormat } from '@lyrasoft/ts-toolkit/generic';\r\nimport { sprintf, vsprintf } from 'sprintf-js';\r\nimport {\r\n addGlobalValidator,\r\n useBs5ButtonRadio,\r\n useBs5KeepTab,\r\n useBs5Tooltip,\r\n useCheckboxesMultiSelect,\r\n useFieldValidationInstance,\r\n useForm,\r\n useFormAsync,\r\n useFormValidation,\r\n useFormValidationInstance,\r\n useGrid,\r\n useGridAsync,\r\n useHttpClient,\r\n useQueue,\r\n useStack,\r\n useTomSelect,\r\n useUniDirective\r\n} from '../composable';\r\nimport {\r\n __,\r\n animateTo,\r\n base64UrlDecode,\r\n base64UrlEncode,\r\n clearMessages,\r\n clearNotifies,\r\n debounce,\r\n delegate,\r\n domready,\r\n fadeIn,\r\n fadeOut,\r\n getBoundedInstance,\r\n getBoundedInstanceList,\r\n h,\r\n highlight,\r\n html,\r\n initAlpineComponent,\r\n isDebug,\r\n loadAlpine,\r\n mark,\r\n module,\r\n prepareAlpine,\r\n renderMessage,\r\n route,\r\n selectAll,\r\n selectOne,\r\n serial,\r\n simpleAlert,\r\n simpleConfirm,\r\n simpleNotify,\r\n slideDown,\r\n slideToggle,\r\n slideUp,\r\n throttle,\r\n tid,\r\n uid,\r\n useAssetUri,\r\n useColorPicker,\r\n useDisableIfStackNotEmpty,\r\n useDisableOnSubmit,\r\n useKeepAlive,\r\n useSystemUri\r\n} from '../service';\r\nimport { LegacyLoader } from './loader';\r\n\r\nexport async function useLegacyMethods(app: any) {\r\n const http = await useHttpClient();\r\n\r\n app.use(LegacyLoader);\r\n\r\n handleUri(app);\r\n handlerHelper(app);\r\n handleCrypto(app);\r\n\r\n app.__ = __;\r\n app.trans = __;\r\n app.route = route;\r\n app.$http = http;\r\n app.directive = useUniDirective;\r\n\r\n app.animate = animateTo;\r\n app.$animation = { to: animateTo };\r\n\r\n app.addMessage = renderMessage;\r\n app.clearMessages = clearMessages;\r\n app.notify = simpleNotify;\r\n app.clearNotifies = clearNotifies;\r\n\r\n app.loadAlpine = loadAlpine;\r\n app.initAlpine = initAlpineComponent;\r\n app.beforeAlpineInit = prepareAlpine;\r\n app.prepareAlpine = prepareAlpine;\r\n\r\n handleUI(app);\r\n\r\n await handleFormGrid(app);\r\n\r\n app.formValidation = useFormValidation;\r\n app.$validation = {\r\n get: useFormValidationInstance,\r\n getField: useFieldValidationInstance,\r\n addGlobalValidator: addGlobalValidator,\r\n import: () => useFormValidation()\r\n };\r\n\r\n app.stack = useStack;\r\n app.queue = useQueue;\r\n}\r\n\r\nfunction handleCrypto(app: any) {\r\n app.base64Encode = base64UrlEncode;\r\n app.base64Decode = base64UrlDecode;\r\n // app.uuid4 = uuid4;\r\n app.uid = uid;\r\n app.tid = tid;\r\n // app.md5 = md5;\r\n app.serial = serial;\r\n}\r\n\r\nfunction handleUri(app: any) {\r\n app.uri = useSystemUri;\r\n app.asset = useAssetUri;\r\n}\r\n\r\nfunction handlerHelper(app: any) {\r\n app.domready = domready;\r\n app.selectOne = selectOne;\r\n app.selectAll = selectAll;\r\n app.each = selectAll;\r\n app.getBoundedInstance = getBoundedInstance;\r\n app.getBoundedInstanceList = getBoundedInstanceList;\r\n app.module = module;\r\n app.h = h;\r\n app.html = html;\r\n // app.$get = get;\r\n // app.$set = set;\r\n app.delegate = delegate;\r\n app.debounce = debounce;\r\n app.throttle = throttle;\r\n app.isDebug = isDebug;\r\n app.confirm = simpleConfirm;\r\n app.alert = simpleAlert;\r\n app.numberFormat = numberFormat;\r\n app.sprintf = sprintf;\r\n app.vsprintf = vsprintf;\r\n // app.genRandomString = genRandomString;\r\n // app.defaultsDeep = defaultsDeep;\r\n}\r\n\r\nfunction handleUI(app: any) {\r\n app.$ui ??= {};\r\n app.$ui.addMessage = renderMessage;\r\n app.$ui.clearMessages = clearMessages;\r\n app.$ui.notify = simpleNotify;\r\n app.$ui.clearNotifies = clearNotifies;\r\n\r\n app.$ui.loadAlpine = loadAlpine;\r\n app.$ui.initAlpine = initAlpineComponent;\r\n app.$ui.beforeAlpineInit = prepareAlpine;\r\n app.$ui.prepareAlpine = prepareAlpine;\r\n\r\n app.$ui.mark = mark;\r\n app.$ui.tomSelect = useTomSelect;\r\n app.$ui.slideUp = slideUp;\r\n app.$ui.slideDown = slideDown;\r\n app.$ui.slideToggle = slideToggle;\r\n app.$ui.fadeOut = fadeOut;\r\n app.$ui.fadeIn = fadeIn;\r\n app.$ui.highlight = highlight;\r\n app.$ui.colorPicker = useColorPicker;\r\n app.$ui.disableOnSubmit = useDisableOnSubmit;\r\n app.$ui.disableIfStackNotEmpty = useDisableIfStackNotEmpty;\r\n app.$ui.checkboxesMultiSelect = useCheckboxesMultiSelect;\r\n app.$ui.keepAlive = useKeepAlive;\r\n app.$ui.bootstrap = {\r\n tooltip: useBs5Tooltip,\r\n buttonRadio: useBs5ButtonRadio,\r\n keepTab: useBs5KeepTab,\r\n };\r\n}\r\n\r\nasync function handleFormGrid(app: any) {\r\n await useFormAsync();\r\n await useGridAsync();\r\n\r\n app.form = useForm;\r\n app.grid = useGrid;\r\n}\r\n"],"names":["module","sprintf","vsprintf"],"mappings":"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","x_google_ignoreList":[0]}
|
package/dist/chunks/unicorn.js
CHANGED
|
@@ -1125,7 +1125,7 @@ function useFieldModalSelect() {
|
|
|
1125
1125
|
return import("./field-modal-select.js");
|
|
1126
1126
|
}
|
|
1127
1127
|
function useFieldModalTree() {
|
|
1128
|
-
import("./field-modal-tree.js");
|
|
1128
|
+
return import("./field-modal-tree.js");
|
|
1129
1129
|
}
|
|
1130
1130
|
async function useFieldRepeatable() {
|
|
1131
1131
|
const module2 = await import("./field-repeatable.js");
|
|
@@ -1341,7 +1341,7 @@ async function useFormValidation(selector) {
|
|
|
1341
1341
|
function useFormValidationInstance(selector) {
|
|
1342
1342
|
return getBoundedInstance(selector, "form.validation");
|
|
1343
1343
|
}
|
|
1344
|
-
function
|
|
1344
|
+
function useFieldValidationInstance(selector) {
|
|
1345
1345
|
return getBoundedInstance(selector, "field.validation");
|
|
1346
1346
|
}
|
|
1347
1347
|
async function addGlobalValidator(name, validator, options = {}) {
|
|
@@ -2043,7 +2043,9 @@ function polyfill() {
|
|
|
2043
2043
|
}
|
|
2044
2044
|
}
|
|
2045
2045
|
async function useFieldMultiUploader() {
|
|
2046
|
-
await import("./field-multi-uploader.js");
|
|
2046
|
+
const module2 = await import("./field-multi-uploader.js");
|
|
2047
|
+
await module2.ready;
|
|
2048
|
+
return module2;
|
|
2047
2049
|
}
|
|
2048
2050
|
async function useTinymce(selector, options = {}) {
|
|
2049
2051
|
const module2 = await import("./tinymce.js");
|
|
@@ -2236,7 +2238,7 @@ export {
|
|
|
2236
2238
|
useFormValidation as g,
|
|
2237
2239
|
addGlobalValidator as h,
|
|
2238
2240
|
isDebug as i,
|
|
2239
|
-
|
|
2241
|
+
useFieldValidationInstance as j,
|
|
2240
2242
|
useFormValidationInstance as k,
|
|
2241
2243
|
loadAlpine as l,
|
|
2242
2244
|
useStack as m,
|