@7pmlabs/design-system 0.4.6 → 0.4.7
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/design-system100.js +1 -1
- package/dist/design-system100.js.map +1 -1
- package/dist/design-system100.mjs +25 -67
- package/dist/design-system100.mjs.map +1 -1
- package/dist/design-system102.js +1 -1
- package/dist/design-system102.js.map +1 -1
- package/dist/design-system102.mjs +2 -4
- package/dist/design-system102.mjs.map +1 -1
- package/dist/design-system103.js +1 -1
- package/dist/design-system103.js.map +1 -1
- package/dist/design-system103.mjs +2 -8
- package/dist/design-system103.mjs.map +1 -1
- package/dist/design-system104.js +1 -1
- package/dist/design-system104.js.map +1 -1
- package/dist/design-system104.mjs +5 -6
- package/dist/design-system104.mjs.map +1 -1
- package/dist/design-system105.js +1 -1
- package/dist/design-system105.mjs +3 -5
- package/dist/design-system105.mjs.map +1 -1
- package/dist/design-system106.js +1 -1
- package/dist/design-system106.mjs +2 -4
- package/dist/design-system106.mjs.map +1 -1
- package/dist/design-system107.js +1 -1
- package/dist/design-system107.mjs +2 -2
- package/dist/design-system108.js +1 -1
- package/dist/design-system108.js.map +1 -1
- package/dist/design-system108.mjs +4 -2
- package/dist/design-system108.mjs.map +1 -1
- package/dist/design-system109.js +1 -1
- package/dist/design-system109.js.map +1 -1
- package/dist/design-system109.mjs +8 -2
- package/dist/design-system109.mjs.map +1 -1
- package/dist/design-system110.js +1 -1
- package/dist/design-system110.js.map +1 -1
- package/dist/design-system110.mjs +7 -2
- package/dist/design-system110.mjs.map +1 -1
- package/dist/design-system111.js +1 -1
- package/dist/design-system111.mjs +1 -1
- package/dist/design-system13.js +1 -1
- package/dist/design-system13.mjs +3 -3
- package/dist/design-system14.js +1 -1
- package/dist/design-system14.js.map +1 -1
- package/dist/design-system14.mjs +3 -3
- package/dist/design-system141.js +1 -1
- package/dist/design-system141.js.map +1 -1
- package/dist/design-system141.mjs +2 -12
- package/dist/design-system141.mjs.map +1 -1
- package/dist/design-system143.js +1 -1
- package/dist/design-system143.mjs +1 -1
- package/dist/design-system144.js +1 -1
- package/dist/design-system144.js.map +1 -1
- package/dist/design-system144.mjs +11 -5
- package/dist/design-system144.mjs.map +1 -1
- package/dist/design-system145.js +1 -1
- package/dist/design-system145.js.map +1 -1
- package/dist/design-system145.mjs +6 -10
- package/dist/design-system145.mjs.map +1 -1
- package/dist/design-system146.js +1 -1
- package/dist/design-system146.js.map +1 -1
- package/dist/design-system146.mjs +10 -2
- package/dist/design-system146.mjs.map +1 -1
- package/dist/design-system148.js +1 -1
- package/dist/design-system148.mjs +1 -1
- package/dist/design-system149.js +1 -1
- package/dist/design-system149.mjs +1 -1
- package/dist/design-system15.js +1 -1
- package/dist/design-system15.mjs +1 -1
- package/dist/design-system152.js +1 -1
- package/dist/design-system152.mjs +1 -1
- package/dist/design-system153.js +1 -1
- package/dist/design-system153.mjs +1 -1
- package/dist/design-system17.js +1 -1
- package/dist/design-system17.js.map +1 -1
- package/dist/design-system17.mjs +1 -1
- package/dist/design-system18.js +1 -1
- package/dist/design-system18.js.map +1 -1
- package/dist/design-system18.mjs +1 -1
- package/dist/design-system18.mjs.map +1 -1
- package/dist/design-system19.js +1 -1
- package/dist/design-system19.mjs +3 -3
- package/dist/design-system21.js +1 -1
- package/dist/design-system21.mjs +1 -1
- package/dist/design-system22.js +1 -1
- package/dist/design-system22.js.map +1 -1
- package/dist/design-system22.mjs +1 -1
- package/dist/design-system22.mjs.map +1 -1
- package/dist/design-system23.js +1 -1
- package/dist/design-system23.mjs +1 -1
- package/dist/design-system44.js +1 -1
- package/dist/design-system44.mjs +1 -1
- package/dist/design-system55.js +1 -1
- package/dist/design-system55.mjs +1 -1
- package/dist/design-system75.js +1 -1
- package/dist/design-system75.mjs +1 -1
- package/dist/design-system78.js +1 -1
- package/dist/design-system78.mjs +1 -1
- package/dist/design-system84.js +1 -1
- package/dist/design-system84.js.map +1 -1
- package/dist/design-system84.mjs +3 -3
- package/dist/design-system84.mjs.map +1 -1
- package/dist/design-system87.js +1 -1
- package/dist/design-system87.mjs +2 -2
- package/dist/design-system90.js +1 -1
- package/dist/design-system90.mjs +1 -1
- package/dist/design-system92.js +1 -1
- package/dist/design-system92.mjs +3 -3
- package/dist/design-system93.js +1 -5
- package/dist/design-system93.js.map +1 -1
- package/dist/design-system93.mjs +17 -10
- package/dist/design-system93.mjs.map +1 -1
- package/dist/design-system94.js +5 -1
- package/dist/design-system94.js.map +1 -1
- package/dist/design-system94.mjs +10 -2172
- package/dist/design-system94.mjs.map +1 -1
- package/dist/design-system95.js +1 -1
- package/dist/design-system95.js.map +1 -1
- package/dist/design-system95.mjs +2138 -1069
- package/dist/design-system95.mjs.map +1 -1
- package/dist/design-system96.js +1 -1
- package/dist/design-system96.js.map +1 -1
- package/dist/design-system96.mjs +1103 -17
- package/dist/design-system96.mjs.map +1 -1
- package/dist/design-system97.js +1 -1
- package/dist/design-system97.js.map +1 -1
- package/dist/design-system97.mjs +62 -63
- package/dist/design-system97.mjs.map +1 -1
- package/dist/design-system98.js +1 -1
- package/dist/design-system98.js.map +1 -1
- package/dist/design-system98.mjs +68 -6
- package/dist/design-system98.mjs.map +1 -1
- package/dist/design-system99.js +1 -1
- package/dist/design-system99.js.map +1 -1
- package/dist/design-system99.mjs +5 -24
- package/dist/design-system99.mjs.map +1 -1
- package/dist/style.css +1 -1
- package/dist/types/components/BButton.vue.d.ts +53 -53
- package/dist/types/components/BCarousel/BCarousel.vue.d.ts +70 -70
- package/dist/types/components/BCarousel/BCarouselItem.vue.d.ts +9 -9
- package/dist/types/components/BCheckbox.vue.d.ts +94 -94
- package/dist/types/components/BCollapse.vue.d.ts +26 -26
- package/dist/types/components/BCurrencyField.vue.d.ts +164 -164
- package/dist/types/components/BDatePicker.vue.d.ts +186 -186
- package/dist/types/components/BDateRangePicker.vue.d.ts +173 -173
- package/dist/types/components/BDropdown/BDropdown.vue.d.ts +118 -118
- package/dist/types/components/BDropdown/BDropdownContent.vue.d.ts +9 -9
- package/dist/types/components/BDropdown/BDropdownItem.vue.d.ts +24 -24
- package/dist/types/components/BErrorMessage.vue.d.ts +28 -28
- package/dist/types/components/BImagePicker/BImagePicker.vue.d.ts +106 -106
- package/dist/types/components/BImagePicker/BImagePickerCloseButton.vue.d.ts +2 -2
- package/dist/types/components/BImagePicker/BImagePreview.vue.d.ts +28 -28
- package/dist/types/components/BLabel.vue.d.ts +47 -47
- package/dist/types/components/BLoadingBar.vue.d.ts +46 -46
- package/dist/types/components/BLoadingOverlay.vue.d.ts +37 -37
- package/dist/types/components/BModal/BModal.vue.d.ts +70 -70
- package/dist/types/components/BModal/BModalBody.vue.d.ts +9 -9
- package/dist/types/components/BModal/BModalContainer.vue.d.ts +49 -49
- package/dist/types/components/BModal/BModalFooter.vue.d.ts +9 -9
- package/dist/types/components/BModal/BModalHeader.vue.d.ts +9 -9
- package/dist/types/components/BMultiSelect.vue.d.ts +177 -177
- package/dist/types/components/BOtpField/BOtpField.vue.d.ts +138 -138
- package/dist/types/components/BOtpField/BOtpFieldBox.vue.d.ts +53 -53
- package/dist/types/components/BOverlay.vue.d.ts +9 -9
- package/dist/types/components/BPagination.vue.d.ts +71 -71
- package/dist/types/components/BRadio.vue.d.ts +125 -125
- package/dist/types/components/BSelect.vue.d.ts +164 -164
- package/dist/types/components/BTabs/BTab.vue.d.ts +9 -9
- package/dist/types/components/BTabs/BTabs.vue.d.ts +59 -59
- package/dist/types/components/BTextField.vue.d.ts +197 -197
- package/dist/types/components/BTextarea.vue.d.ts +155 -155
- package/dist/types/components/BTimeline/BTimeline.vue.d.ts +9 -9
- package/dist/types/components/BTimeline/BTimelineItem.vue.d.ts +9 -9
- package/dist/types/components/BToast/BToast.vue.d.ts +20 -20
- package/dist/types/components/BToast/BToastItem.vue.d.ts +49 -49
- package/dist/types/components/BTooltip.vue.d.ts +56 -56
- package/dist/types/components/index.d.ts +36 -36
- package/dist/types/composables/Date.d.ts +7 -7
- package/dist/types/composables/Validation.d.ts +41 -41
- package/dist/types/constants/Common.d.ts +9 -9
- package/dist/types/constants/Enums.d.ts +110 -110
- package/dist/types/helpers/ComponentHelper.d.ts +7 -7
- package/dist/types/helpers/DateHelper.d.ts +2 -2
- package/dist/types/index.d.ts +11 -11
- package/dist/types/playground/PlaygroundView.vue.d.ts +2 -2
- package/dist/types/plugin.d.ts +8 -8
- package/dist/types/types/Common.d.ts +5 -5
- package/dist/types/types/components/BErrorMessage.d.ts +1 -1
- package/dist/types/types/components/BImagePicker.d.ts +6 -6
- package/dist/types/types/components/BTabs.d.ts +4 -4
- package/dist/types/types/components/BToast.d.ts +8 -8
- package/dist/types/types/index.d.ts +5 -5
- package/package.json +10 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"design-system22.mjs","sources":["../src/components/BSelect.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createVNode as _createVNode, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, withCtx as _withCtx, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, renderList as _renderList, Fragment as _Fragment, vShow as _vShow, withDirectives as _withDirectives, unref as _unref } from \"vue\"\n\nconst _hoisted_1 = /*#__PURE__*/_createElementVNode(\"path\", { d: \"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\" }, null, -1)\nconst _hoisted_2 = [\n _hoisted_1\n]\nconst _hoisted_3 = [\"id\", \"disabled\"]\nconst _hoisted_4 = { key: 0 }\nconst _hoisted_5 = {\n key: 1,\n class: \"ds-text-black/[0.4]\"\n}\nconst _hoisted_6 = /*#__PURE__*/_createElementVNode(\"path\", { d: \"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\" }, null, -1)\nconst _hoisted_7 = [\n _hoisted_6\n]\nconst _hoisted_8 = [\"id\", \"data-cy\", \"data-ut\"]\nconst _hoisted_9 = { class: \"ds-max-h-72 ds-overflow-y-auto ds-rounded-lg ds-bg-white ds-shadow\" }\nconst _hoisted_10 = { class: \"ds-py-1 ds-text-sm ds-text-black/[0.85]\" }\nconst _hoisted_11 = [\"onClick\"]\n\nimport {\n useValidationField,\n type ValidationRule,\n} from '@/composables/Validation';\nimport {\n ensureVisiblePosition,\n lockScrollBody,\n resetPosition,\n unlockScrollBody,\n} from '@/helpers/ComponentHelper';\nimport type { DisplayItem } from '@/types';\nimport { v4 as uuid } from 'uuid';\nimport {\n computed,\n nextTick,\n onBeforeUnmount,\n onMounted,\n ref,\n watch,\n} from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport BErrorMessage from './BErrorMessage.vue';\nimport BLabel from './BLabel.vue';\nimport BTextField from './BTextField.vue';\n\n//#region Props\nexport interface BSelectProps {\n inputId?: string;\n modelValue: string | number;\n label?: string;\n items: DisplayItem[];\n disabled?: boolean;\n placeholder?: string;\n valueCssClass?: string;\n menuCssClass?: string;\n /**\n * Array of custom validation rules.\n */\n validationRules?: ValidationRule[];\n /**\n * Validate if the field is left empty.\n */\n required?: boolean;\n requiredErrorMessage?: string;\n /**\n * Hide the validation error message.\n */\n hideDetails?: boolean;\n /**\n * Allow to type to search.\n */\n allowInput?: boolean;\n}\n\n\nexport default /*#__PURE__*/_defineComponent({\n __name: 'BSelect',\n props: {\n inputId: { default: '' },\n modelValue: {},\n label: { default: '' },\n items: {},\n disabled: { type: Boolean, default: false },\n placeholder: { default: '' },\n valueCssClass: { default: '' },\n menuCssClass: { default: '' },\n validationRules: { default: undefined },\n required: { type: Boolean, default: false },\n requiredErrorMessage: { default: '' },\n hideDetails: { type: Boolean, default: false },\n allowInput: { type: Boolean, default: false }\n },\n emits: [\"change\", \"open\", \"close\", \"change:input\", \"update:modelValue\"],\n setup(__props: any, { expose: __expose, emit }) {\n\nconst props = __props;\n\n\n//#endregion\n\n//#region Events\n\n//#endregion\n\n//#region Data\nconst selectEl = ref<HTMLElement | null>(null);\nconst inputRef = ref<InstanceType<typeof BTextField> | null>(null);\nconst selectMenuEl = ref<HTMLElement | null>(null);\nconst selectMenu = ref(false);\nconst { t } = useI18n();\nconst validateRequired: ValidationRule = {\n validateRule: (val) => !!val,\n errorMessage: () =>\n props.requiredErrorMessage || t('ds.global.field_required'),\n};\nconst inputText = ref('');\nconst selectedItem = ref<DisplayItem>();\nconst id = computed(() => props.inputId || `id-${uuid()}`);\nconst value = computed({\n get() {\n return props.modelValue;\n },\n set(val) {\n emit('update:modelValue', val);\n },\n});\nconst btnCssClass = computed(() => {\n let result = `ds-border ds-drop-shadow-light ds-text-sm ds-h-[40px] ds-px-3 ds-rounded-lg ds-block ds-w-full ds-inline-flex ds-items-center ds-justify-between `;\n result += props.disabled\n ? `ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4] `\n : `ds-bg-white ds-text-black/[0.85] `;\n result += !validationResult.value.valid\n ? `ds-border-error focus:ds-ring-1 focus:ds-ring-error `\n : `ds-border-black/10 focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus `;\n\n return result;\n});\nconst vRules = computed(() => {\n let result: ValidationRule[] = [];\n\n if (props.required) {\n result.push(validateRequired);\n }\n if (props.validationRules) {\n result = result.concat(props.validationRules);\n }\n\n return result.length ? result : undefined;\n});\n\nconst { validate, validationResult } = useValidationField(\n id.value,\n value,\n vRules.value,\n);\n//#endregion\n\n//#region Watchers\nwatch(selectMenu, (val) => {\n if (val) {\n lockScrollBody();\n ensureMenuPosition();\n emit('open');\n } else {\n unlockScrollBody();\n resetMenuPosition();\n emit('close');\n }\n});\nwatch(value, () => {\n ensureSelectedItem();\n ensureInputText();\n});\nwatch(\n () => props.items,\n () => {\n if (value.value && !selectedItem.value?.value) {\n ensureSelectedItem();\n ensureInputText();\n }\n },\n {\n deep: true,\n },\n);\n//#endregion\n\n//#region Methods\nconst ensureSelectedItem = () => {\n selectedItem.value = props.items?.find((i) => i.value === value.value);\n};\nconst ensureInputText = () => {\n if (props.allowInput) {\n inputText.value = selectedItem.value?.text || '';\n }\n};\nconst initPressEscapeEventListener = () => {\n document.addEventListener('keydown', closeOnEscapePressed);\n};\nconst closeOnEscapePressed = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n closeSelectMenu();\n }\n};\nconst initClickOutsideEventListener = () => {\n document.addEventListener('click', closeOnClickOutside);\n};\nconst closeOnClickOutside = (event: any) => {\n const refs = [selectEl.value, selectMenuEl.value];\n const withinBoundaries = refs.some((r) => event.composedPath().includes(r));\n if (!withinBoundaries) {\n closeSelectMenu();\n }\n};\nconst onClickItem = (item: DisplayItem) => {\n value.value = item.value;\n closeSelectMenu();\n emit('change', item.value);\n nextTick(() => {\n validate();\n });\n};\nconst ensureMenuWidth = (parentEl: HTMLElement, menuEl: HTMLElement) => {\n menuEl.style.width = `${parentEl.offsetWidth}px`;\n};\nconst ensureMenuPosition = () => {\n nextTick(() => {\n ensureVisiblePosition(selectEl.value!, selectMenuEl.value!);\n ensureMenuWidth(selectEl.value!, selectMenuEl.value!);\n });\n};\nconst resetMenuPosition = () => {\n resetPosition(selectEl.value!, selectMenuEl.value!);\n};\nconst onChangeInputText = (text: string) => {\n emit('change:input', text);\n};\nconst closeSelectMenu = () => {\n selectMenu.value = false;\n inputRef.value?.blur();\n ensureInputText();\n};\nconst init = () => {\n ensureSelectedItem();\n ensureInputText();\n};\ninit();\n//#endregion\n\n//#region Lifecycle Hooks\nonMounted(() => {\n initPressEscapeEventListener();\n initClickOutsideEventListener();\n});\nonBeforeUnmount(() => {\n document.removeEventListener('keydown', closeOnEscapePressed);\n document.removeEventListener('click', closeOnClickOutside);\n unlockScrollBody();\n // Make sure dropdown menu unmounted with itself\n resetMenuPosition();\n});\n//#endregion\n\n__expose({ validate, selectMenu });\n\nreturn (_ctx: any,_cache: any) => {\n return (_openBlock(), _createElementBlock(\"div\", null, [\n _createElementVNode(\"div\", {\n ref_key: \"selectEl\",\n ref: selectEl\n }, [\n _createVNode(BLabel, {\n id: id.value,\n label: _ctx.label,\n required: _ctx.required\n }, null, 8, [\"id\", \"label\", \"required\"]),\n (props.allowInput)\n ? (_openBlock(), _createBlock(BTextField, {\n key: 0,\n id: id.value,\n ref_key: \"inputRef\",\n ref: inputRef,\n modelValue: inputText.value,\n \"onUpdate:modelValue\": [\n _cache[0] || (_cache[0] = ($event: any) => ((inputText).value = $event)),\n onChangeInputText\n ],\n disabled: props.disabled,\n placeholder: props.placeholder,\n \"hide-details\": \"\",\n onFocus: _cache[1] || (_cache[1] = ($event: any) => (selectMenu.value = true)),\n \"onClick:append\": _cache[2] || (_cache[2] = ($event: any) => (inputRef.value?.focus()))\n }, {\n appendIcon: _withCtx(() => [\n (_openBlock(), _createElementBlock(\"svg\", {\n class: _normalizeClass([[selectMenu.value ? 'ds-rotate-180' : ''], \"ds-h-4 ds-w-4 ds-transition-transform\"]),\n viewBox: \"0 0 320 512\",\n xmlns: \"http://www.w3.org/2000/svg\"\n }, _hoisted_2, 2))\n ]),\n _: 1\n }, 8, [\"id\", \"modelValue\", \"disabled\", \"placeholder\"]))\n : (_openBlock(), _createElementBlock(\"button\", {\n key: 1,\n id: id.value,\n class: _normalizeClass(btnCssClass.value),\n disabled: props.disabled,\n type: \"button\",\n onClick: _cache[3] || (_cache[3] = ($event: any) => (selectMenu.value = !selectMenu.value))\n }, [\n _createElementVNode(\"span\", {\n class: _normalizeClass([_ctx.valueCssClass, \"ds-truncate\"])\n }, [\n (selectedItem.value?.text)\n ? (_openBlock(), _createElementBlock(\"span\", _hoisted_4, _toDisplayString(selectedItem.value?.text), 1))\n : (_openBlock(), _createElementBlock(\"span\", _hoisted_5, _toDisplayString(props.placeholder), 1))\n ], 2),\n _createTextVNode(\" \"),\n (_openBlock(), _createElementBlock(\"svg\", {\n class: _normalizeClass([[selectMenu.value ? 'ds-rotate-180' : ''], \"ds-h-4 ds-w-4 ds-transition-transform\"]),\n viewBox: \"0 0 320 512\",\n xmlns: \"http://www.w3.org/2000/svg\"\n }, _hoisted_7, 2))\n ], 10, _hoisted_3)),\n _withDirectives(_createElementVNode(\"div\", {\n id: `${id.value}Menu`,\n ref_key: \"selectMenuEl\",\n ref: selectMenuEl,\n class: _normalizeClass([_ctx.menuCssClass, \"ds-absolute ds-z-50 ds-min-w-[8rem] ds-py-1\"]),\n \"data-cy\": _ctx.$attrs['data-cy'] ? `${_ctx.$attrs['data-cy']}Menu` : undefined,\n \"data-ut\": _ctx.$attrs['data-ut'] ? `${_ctx.$attrs['data-ut']}Menu` : undefined\n }, [\n _createElementVNode(\"div\", _hoisted_9, [\n _createElementVNode(\"ul\", _hoisted_10, [\n (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.items, (item, index) => {\n return (_openBlock(), _createElementBlock(\"li\", {\n key: `item${index}`,\n class: \"ds-cursor-pointer\",\n onClick: ($event: any) => (onClickItem(item))\n }, [\n _createElementVNode(\"a\", {\n class: _normalizeClass([\n item.cssClass +\n `${item.value === value.value ? ' ds-bg-gray-150' : ''}`\n , \"ds-block ds-px-4 ds-py-2 hover:ds-bg-gray-150\"])\n }, _toDisplayString(item?.text), 3)\n ], 8, _hoisted_11))\n }), 128))\n ])\n ])\n ], 10, _hoisted_8), [\n [_vShow, selectMenu.value]\n ])\n ], 512),\n (!_ctx.hideDetails)\n ? (_openBlock(), _createBlock(BErrorMessage, {\n key: 0,\n \"error-message\": _unref(validationResult).errorMessage(),\n class: \"ds-mt-1\"\n }, null, 8, [\"error-message\"]))\n : _createCommentVNode(\"\", true)\n ]))\n}\n}\n\n})"],"names":["_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_sfc_main","_defineComponent","__props","__expose","emit","props","selectEl","ref","inputRef","selectMenuEl","selectMenu","t","useI18n","validateRequired","val","inputText","selectedItem","id","computed","uuid","value","btnCssClass","result","validationResult","vRules","validate","useValidationField","watch","lockScrollBody","ensureMenuPosition","unlockScrollBody","resetMenuPosition","ensureSelectedItem","ensureInputText","_a","i","initPressEscapeEventListener","closeOnEscapePressed","event","closeSelectMenu","initClickOutsideEventListener","closeOnClickOutside","r","onClickItem","item","nextTick","ensureMenuWidth","parentEl","menuEl","ensureVisiblePosition","resetPosition","onChangeInputText","text","onMounted","onBeforeUnmount","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","_createVNode","BLabel","_createBlock","BTextField","$event","_withCtx","_normalizeClass","_toDisplayString","_b","_createTextVNode","_withDirectives","_Fragment","_renderList","index","_vShow","_createCommentVNode","BErrorMessage","_unref"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"design-system22.mjs","sources":["../src/components/BSelect.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createVNode as _createVNode, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, withCtx as _withCtx, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, renderList as _renderList, Fragment as _Fragment, vShow as _vShow, withDirectives as _withDirectives, unref as _unref } from \"vue\"\n\nconst _hoisted_1 = /*#__PURE__*/_createElementVNode(\"path\", { d: \"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\" }, null, -1)\nconst _hoisted_2 = [\n _hoisted_1\n]\nconst _hoisted_3 = [\"id\", \"disabled\"]\nconst _hoisted_4 = { key: 0 }\nconst _hoisted_5 = {\n key: 1,\n class: \"ds-text-black/[0.4]\"\n}\nconst _hoisted_6 = /*#__PURE__*/_createElementVNode(\"path\", { d: \"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\" }, null, -1)\nconst _hoisted_7 = [\n _hoisted_6\n]\nconst _hoisted_8 = [\"id\", \"data-cy\", \"data-ut\"]\nconst _hoisted_9 = { class: \"ds-max-h-72 ds-overflow-y-auto ds-rounded-lg ds-bg-white ds-shadow\" }\nconst _hoisted_10 = { class: \"ds-py-1 ds-text-sm ds-text-black/[0.85]\" }\nconst _hoisted_11 = [\"onClick\"]\n\nimport {\r\n useValidationField,\r\n type ValidationRule,\r\n} from '@/composables/Validation';\r\nimport {\r\n ensureVisiblePosition,\r\n lockScrollBody,\r\n resetPosition,\r\n unlockScrollBody,\r\n} from '@/helpers/ComponentHelper';\r\nimport type { DisplayItem } from '@/types';\r\nimport { v4 as uuid } from 'uuid';\r\nimport {\r\n computed,\r\n nextTick,\r\n onBeforeUnmount,\r\n onMounted,\r\n ref,\r\n watch,\r\n} from 'vue';\r\nimport { useI18n } from 'vue-i18n';\r\nimport BErrorMessage from './BErrorMessage.vue';\r\nimport BLabel from './BLabel.vue';\r\nimport BTextField from './BTextField.vue';\r\n\r\n//#region Props\r\nexport interface BSelectProps {\r\n inputId?: string;\r\n modelValue: string | number;\r\n label?: string;\r\n items: DisplayItem[];\r\n disabled?: boolean;\r\n placeholder?: string;\r\n valueCssClass?: string;\r\n menuCssClass?: string;\r\n /**\r\n * Array of custom validation rules.\r\n */\r\n validationRules?: ValidationRule[];\r\n /**\r\n * Validate if the field is left empty.\r\n */\r\n required?: boolean;\r\n requiredErrorMessage?: string;\r\n /**\r\n * Hide the validation error message.\r\n */\r\n hideDetails?: boolean;\r\n /**\r\n * Allow to type to search.\r\n */\r\n allowInput?: boolean;\r\n}\r\n\r\n\nexport default /*#__PURE__*/_defineComponent({\n __name: 'BSelect',\n props: {\n inputId: { default: '' },\n modelValue: {},\n label: { default: '' },\n items: {},\n disabled: { type: Boolean, default: false },\n placeholder: { default: '' },\n valueCssClass: { default: '' },\n menuCssClass: { default: '' },\n validationRules: { default: undefined },\n required: { type: Boolean, default: false },\n requiredErrorMessage: { default: '' },\n hideDetails: { type: Boolean, default: false },\n allowInput: { type: Boolean, default: false }\n },\n emits: [\"change\", \"open\", \"close\", \"change:input\", \"update:modelValue\"],\n setup(__props: any, { expose: __expose, emit }) {\n\nconst props = __props;\n\r\n\r\n//#endregion\r\n\r\n//#region Events\r\n\r\n//#endregion\r\n\r\n//#region Data\r\nconst selectEl = ref<HTMLElement | null>(null);\r\nconst inputRef = ref<InstanceType<typeof BTextField> | null>(null);\r\nconst selectMenuEl = ref<HTMLElement | null>(null);\r\nconst selectMenu = ref(false);\r\nconst { t } = useI18n();\r\nconst validateRequired: ValidationRule = {\r\n validateRule: (val) => !!val,\r\n errorMessage: () =>\r\n props.requiredErrorMessage || t('ds.global.field_required'),\r\n};\r\nconst inputText = ref('');\r\nconst selectedItem = ref<DisplayItem>();\r\nconst id = computed(() => props.inputId || `id-${uuid()}`);\r\nconst value = computed({\r\n get() {\r\n return props.modelValue;\r\n },\r\n set(val) {\r\n emit('update:modelValue', val);\r\n },\r\n});\r\nconst btnCssClass = computed(() => {\r\n let result = `ds-border ds-drop-shadow-light ds-text-sm ds-h-[40px] ds-px-3 ds-rounded-lg ds-block ds-w-full ds-inline-flex ds-items-center ds-justify-between `;\r\n result += props.disabled\r\n ? `ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4] `\r\n : `ds-bg-white ds-text-black/[0.85] `;\r\n result += !validationResult.value.valid\r\n ? `ds-border-error focus:ds-ring-1 focus:ds-ring-error `\r\n : `ds-border-black/10 focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus `;\r\n\r\n return result;\r\n});\r\nconst vRules = computed(() => {\r\n let result: ValidationRule[] = [];\r\n\r\n if (props.required) {\r\n result.push(validateRequired);\r\n }\r\n if (props.validationRules) {\r\n result = result.concat(props.validationRules);\r\n }\r\n\r\n return result.length ? result : undefined;\r\n});\r\n\r\nconst { validate, validationResult } = useValidationField(\r\n id.value,\r\n value,\r\n vRules.value,\r\n);\r\n//#endregion\r\n\r\n//#region Watchers\r\nwatch(selectMenu, (val) => {\r\n if (val) {\r\n lockScrollBody();\r\n ensureMenuPosition();\r\n emit('open');\r\n } else {\r\n unlockScrollBody();\r\n resetMenuPosition();\r\n emit('close');\r\n }\r\n});\r\nwatch(value, () => {\r\n ensureSelectedItem();\r\n ensureInputText();\r\n});\r\nwatch(\r\n () => props.items,\r\n () => {\r\n if (value.value && !selectedItem.value?.value) {\r\n ensureSelectedItem();\r\n ensureInputText();\r\n }\r\n },\r\n {\r\n deep: true,\r\n },\r\n);\r\n//#endregion\r\n\r\n//#region Methods\r\nconst ensureSelectedItem = () => {\r\n selectedItem.value = props.items?.find((i) => i.value === value.value);\r\n};\r\nconst ensureInputText = () => {\r\n if (props.allowInput) {\r\n inputText.value = selectedItem.value?.text || '';\r\n }\r\n};\r\nconst initPressEscapeEventListener = () => {\r\n document.addEventListener('keydown', closeOnEscapePressed);\r\n};\r\nconst closeOnEscapePressed = (event: KeyboardEvent) => {\r\n if (event.key === 'Escape') {\r\n closeSelectMenu();\r\n }\r\n};\r\nconst initClickOutsideEventListener = () => {\r\n document.addEventListener('click', closeOnClickOutside);\r\n};\r\nconst closeOnClickOutside = (event: any) => {\r\n const refs = [selectEl.value, selectMenuEl.value];\r\n const withinBoundaries = refs.some((r) => event.composedPath().includes(r));\r\n if (!withinBoundaries) {\r\n closeSelectMenu();\r\n }\r\n};\r\nconst onClickItem = (item: DisplayItem) => {\r\n value.value = item.value;\r\n closeSelectMenu();\r\n emit('change', item.value);\r\n nextTick(() => {\r\n validate();\r\n });\r\n};\r\nconst ensureMenuWidth = (parentEl: HTMLElement, menuEl: HTMLElement) => {\r\n menuEl.style.width = `${parentEl.offsetWidth}px`;\r\n};\r\nconst ensureMenuPosition = () => {\r\n nextTick(() => {\r\n ensureVisiblePosition(selectEl.value!, selectMenuEl.value!);\r\n ensureMenuWidth(selectEl.value!, selectMenuEl.value!);\r\n });\r\n};\r\nconst resetMenuPosition = () => {\r\n resetPosition(selectEl.value!, selectMenuEl.value!);\r\n};\r\nconst onChangeInputText = (text: string) => {\r\n emit('change:input', text);\r\n};\r\nconst closeSelectMenu = () => {\r\n selectMenu.value = false;\r\n inputRef.value?.blur();\r\n ensureInputText();\r\n};\r\nconst init = () => {\r\n ensureSelectedItem();\r\n ensureInputText();\r\n};\r\ninit();\r\n//#endregion\r\n\r\n//#region Lifecycle Hooks\r\nonMounted(() => {\r\n initPressEscapeEventListener();\r\n initClickOutsideEventListener();\r\n});\r\nonBeforeUnmount(() => {\r\n document.removeEventListener('keydown', closeOnEscapePressed);\r\n document.removeEventListener('click', closeOnClickOutside);\r\n unlockScrollBody();\r\n // Make sure dropdown menu unmounted with itself\r\n resetMenuPosition();\r\n});\r\n//#endregion\r\n\r\n__expose({ validate, selectMenu });\r\n\nreturn (_ctx: any,_cache: any) => {\n return (_openBlock(), _createElementBlock(\"div\", null, [\n _createElementVNode(\"div\", {\n ref_key: \"selectEl\",\n ref: selectEl\n }, [\n _createVNode(BLabel, {\n id: id.value,\n label: _ctx.label,\n required: _ctx.required\n }, null, 8, [\"id\", \"label\", \"required\"]),\n (props.allowInput)\n ? (_openBlock(), _createBlock(BTextField, {\n key: 0,\n id: id.value,\n ref_key: \"inputRef\",\n ref: inputRef,\n modelValue: inputText.value,\n \"onUpdate:modelValue\": [\n _cache[0] || (_cache[0] = ($event: any) => ((inputText).value = $event)),\n onChangeInputText\n ],\n disabled: props.disabled,\n placeholder: props.placeholder,\n \"hide-details\": \"\",\n onFocus: _cache[1] || (_cache[1] = ($event: any) => (selectMenu.value = true)),\n \"onClick:append\": _cache[2] || (_cache[2] = ($event: any) => (inputRef.value?.focus()))\n }, {\n appendIcon: _withCtx(() => [\n (_openBlock(), _createElementBlock(\"svg\", {\n class: _normalizeClass([[selectMenu.value ? 'ds-rotate-180' : ''], \"ds-h-4 ds-w-4 ds-transition-transform\"]),\n viewBox: \"0 0 320 512\",\n xmlns: \"http://www.w3.org/2000/svg\"\n }, _hoisted_2, 2))\n ]),\n _: 1\n }, 8, [\"id\", \"modelValue\", \"disabled\", \"placeholder\"]))\n : (_openBlock(), _createElementBlock(\"button\", {\n key: 1,\n id: id.value,\n class: _normalizeClass(btnCssClass.value),\n disabled: props.disabled,\n type: \"button\",\n onClick: _cache[3] || (_cache[3] = ($event: any) => (selectMenu.value = !selectMenu.value))\n }, [\n _createElementVNode(\"span\", {\n class: _normalizeClass([_ctx.valueCssClass, \"ds-truncate\"])\n }, [\n (selectedItem.value?.text)\n ? (_openBlock(), _createElementBlock(\"span\", _hoisted_4, _toDisplayString(selectedItem.value?.text), 1))\n : (_openBlock(), _createElementBlock(\"span\", _hoisted_5, _toDisplayString(props.placeholder), 1))\n ], 2),\n _createTextVNode(\" \"),\n (_openBlock(), _createElementBlock(\"svg\", {\n class: _normalizeClass([[selectMenu.value ? 'ds-rotate-180' : ''], \"ds-h-4 ds-w-4 ds-transition-transform\"]),\n viewBox: \"0 0 320 512\",\n xmlns: \"http://www.w3.org/2000/svg\"\n }, _hoisted_7, 2))\n ], 10, _hoisted_3)),\n _withDirectives(_createElementVNode(\"div\", {\n id: `${id.value}Menu`,\n ref_key: \"selectMenuEl\",\n ref: selectMenuEl,\n class: _normalizeClass([_ctx.menuCssClass, \"ds-absolute ds-z-50 ds-min-w-[8rem] ds-py-1\"]),\n \"data-cy\": _ctx.$attrs['data-cy'] ? `${_ctx.$attrs['data-cy']}Menu` : undefined,\n \"data-ut\": _ctx.$attrs['data-ut'] ? `${_ctx.$attrs['data-ut']}Menu` : undefined\n }, [\n _createElementVNode(\"div\", _hoisted_9, [\n _createElementVNode(\"ul\", _hoisted_10, [\n (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.items, (item, index) => {\n return (_openBlock(), _createElementBlock(\"li\", {\n key: `item${index}`,\n class: \"ds-cursor-pointer\",\n onClick: ($event: any) => (onClickItem(item))\n }, [\n _createElementVNode(\"a\", {\n class: _normalizeClass([\r\n item.cssClass +\r\n `${item.value === value.value ? ' ds-bg-gray-150' : ''}`\r\n , \"ds-block ds-px-4 ds-py-2 hover:ds-bg-gray-150\"])\n }, _toDisplayString(item?.text), 3)\n ], 8, _hoisted_11))\n }), 128))\n ])\n ])\n ], 10, _hoisted_8), [\n [_vShow, selectMenu.value]\n ])\n ], 512),\n (!_ctx.hideDetails)\n ? (_openBlock(), _createBlock(BErrorMessage, {\n key: 0,\n \"error-message\": _unref(validationResult).errorMessage(),\n class: \"ds-mt-1\"\n }, null, 8, [\"error-message\"]))\n : _createCommentVNode(\"\", true)\n ]))\n}\n}\n\n})"],"names":["_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_sfc_main","_defineComponent","__props","__expose","emit","props","selectEl","ref","inputRef","selectMenuEl","selectMenu","t","useI18n","validateRequired","val","inputText","selectedItem","id","computed","uuid","value","btnCssClass","result","validationResult","vRules","validate","useValidationField","watch","lockScrollBody","ensureMenuPosition","unlockScrollBody","resetMenuPosition","ensureSelectedItem","ensureInputText","_a","i","initPressEscapeEventListener","closeOnEscapePressed","event","closeSelectMenu","initClickOutsideEventListener","closeOnClickOutside","r","onClickItem","item","nextTick","ensureMenuWidth","parentEl","menuEl","ensureVisiblePosition","resetPosition","onChangeInputText","text","onMounted","onBeforeUnmount","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","_createVNode","BLabel","_createBlock","BTextField","$event","_withCtx","_normalizeClass","_toDisplayString","_b","_createTextVNode","_withDirectives","_Fragment","_renderList","index","_vShow","_createCommentVNode","BErrorMessage","_unref"],"mappings":"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"}
|
package/dist/design-system23.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const l=require("vue"),b=require("./design-system3.js"),g=require("./design-system48.js"),_=require("./design-system29.js"),q=require("./design-system30.js"),y=require("./design-
|
|
1
|
+
"use strict";const l=require("vue"),b=require("./design-system3.js"),g=require("./design-system48.js"),_=require("./design-system29.js"),q=require("./design-system30.js"),y=require("./design-system93.js"),B=["id","autocomplete","disabled","placeholder","readonly","rows"],h=l.defineComponent({__name:"BTextarea",props:{inputId:{default:""},inputCssClass:{default:""},modelValue:{},validationRules:{default:void 0},label:{default:""},placeholder:{default:""},autocomplete:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},rows:{default:3},required:{type:Boolean,default:!1},requiredErrorMessage:{default:""},hideDetails:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(a,{expose:u,emit:i}){const s=a,{t:n}=g.useI18n(),c={validateRule:e=>typeof e=="number"?!!e:!!(e&&(e!=null&&e.trim())),errorMessage:()=>s.requiredErrorMessage||n("ds.global.field_required")},r=l.computed(()=>s.inputId||`id-${y()}`),t=l.computed({get(){return s.modelValue},set(e){i("update:modelValue",e)}}),p=l.computed(()=>[{"ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/40":s.disabled,"ds-text-black/[0.85]":!s.disabled,"ds-border-error focus:ds-ring-1 focus:ds-ring-error":!d.value.valid,"ds-border-black/[0.1] focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus":d.value.valid},s.inputCssClass]),f=l.computed(()=>{let e=[];return s.required&&e.push(c),s.validationRules&&(e=e.concat(s.validationRules)),e.length?e:void 0}),{validate:m,validationResult:d}=b.useValidationField(r.value,t,f.value);return u({validate:m}),(e,o)=>(l.openBlock(),l.createElementBlock("div",null,[l.createVNode(q,{id:r.value,label:e.label,required:e.required},null,8,["id","label","required"]),l.withDirectives(l.createElementVNode("textarea",{id:r.value,"onUpdate:modelValue":o[0]||(o[0]=v=>t.value=v),autocomplete:s.autocomplete?"on":"off",class:l.normalizeClass([p.value,"ds-block ds-w-full ds-rounded-lg ds-border ds-px-3 ds-py-1 ds-text-sm ds-drop-shadow-light"]),disabled:s.disabled,placeholder:s.placeholder,readonly:s.readonly,rows:s.rows},null,10,B),[[l.vModelText,t.value]]),e.hideDetails?l.createCommentVNode("",!0):(l.openBlock(),l.createBlock(_,{key:0,"error-message":l.unref(d).errorMessage(),class:"ds-mt-1"},null,8,["error-message"]))]))}});module.exports=h;
|
|
2
2
|
//# sourceMappingURL=design-system23.js.map
|
package/dist/design-system23.mjs
CHANGED
|
@@ -3,7 +3,7 @@ import { useValidationField as x } from "./design-system3.mjs";
|
|
|
3
3
|
import { useI18n as R } from "./design-system48.mjs";
|
|
4
4
|
import M from "./design-system29.mjs";
|
|
5
5
|
import E from "./design-system30.mjs";
|
|
6
|
-
import D from "./design-
|
|
6
|
+
import D from "./design-system93.mjs";
|
|
7
7
|
const I = ["id", "autocomplete", "disabled", "placeholder", "readonly", "rows"], j = /* @__PURE__ */ g({
|
|
8
8
|
__name: "BTextarea",
|
|
9
9
|
props: {
|
package/dist/design-system44.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const e=require("./design-system84.js");require("./design-system85.js");const r=require("./design-system52.js"),t=r(e,[["__scopeId","data-v-
|
|
1
|
+
"use strict";const e=require("./design-system84.js");require("./design-system85.js");const r=require("./design-system52.js"),t=r(e,[["__scopeId","data-v-fec0801f"]]);module.exports=t;
|
|
2
2
|
//# sourceMappingURL=design-system44.js.map
|
package/dist/design-system44.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./design-system84.mjs";
|
|
2
2
|
import "./design-system85.mjs";
|
|
3
3
|
import r from "./design-system52.mjs";
|
|
4
|
-
const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-
|
|
4
|
+
const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-fec0801f"]]);
|
|
5
5
|
export {
|
|
6
6
|
m as default
|
|
7
7
|
};
|
package/dist/design-system55.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const e=require("vue"),a=require("./design-system5.js"),p=require("./design-
|
|
1
|
+
"use strict";const e=require("vue"),a=require("./design-system5.js"),p=require("./design-system93.js"),m=["id","disabled","value"],b=["for"],f=["for"],k=`
|
|
2
2
|
peer-checked:ds-text-transparent peer-checked:ds-bg-gradient-to-r peer-checked:ds-from-primary-f-stop peer-checked:ds-from-primary-f peer-checked:ds-to-primary-t
|
|
3
3
|
peer-checked:after:ds-opacity-100
|
|
4
4
|
`,h=e.defineComponent({__name:"BCheckbox",props:{inputId:{default:""},inputCssClass:{default:""},modelValue:{type:[Boolean,Array],default:!1},label:{default:""},labelOrphan:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},size:{default:a.BCheckboxSize.Medium}},emits:["update:modelValue"],setup(r,{emit:u}){const l=r,t=e.computed(()=>l.inputId||`id-${p()}`),o=e.computed({get(){return l.modelValue},set(s){u("update:modelValue",s)}}),n=e.computed(()=>{let s="";switch(l.size){case a.BCheckboxSize.Small:s+="size-sm ";break;case a.BCheckboxSize.Medium:default:s+=" ";break}return s}),i=e.computed(()=>[l.inputCssClass,{"ds-cursor-not-allowed":l.disabled}]);return(s,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([n.value,"b-checkbox ds-flex ds-items-center"])},[e.withDirectives(e.createElementVNode("input",{id:t.value,"onUpdate:modelValue":d[0]||(d[0]=c=>o.value=c),class:e.normalizeClass([i.value,"ds-peer ds-invisible"]),disabled:s.disabled,value:s.$attrs.value,type:"checkbox"},null,10,m),[[e.vModelCheckbox,o.value]]),e.createElementVNode("label",{class:e.normalizeClass([k,"input-label"]),for:t.value},null,8,b),s.label||s.$slots.default?(e.openBlock(),e.createElementBlock("label",{key:0,for:s.labelOrphan?void 0:t.value,class:"ds-ml-2 ds-text-sm ds-font-medium ds-text-gray-900"},[e.renderSlot(s.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(l.label),1)],!0)],8,f)):e.createCommentVNode("",!0)],2))}});module.exports=h;
|
package/dist/design-system55.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent as h, computed as s, openBlock as u, createElementBlock as i, normalizeClass as t, withDirectives as v, createElementVNode as n, vModelCheckbox as k, renderSlot as C, createTextVNode as y, toDisplayString as V, createCommentVNode as B } from "vue";
|
|
2
2
|
import { BCheckboxSize as d } from "./design-system5.mjs";
|
|
3
|
-
import g from "./design-
|
|
3
|
+
import g from "./design-system93.mjs";
|
|
4
4
|
const x = ["id", "disabled", "value"], z = ["for"], S = ["for"], _ = `
|
|
5
5
|
peer-checked:ds-text-transparent peer-checked:ds-bg-gradient-to-r peer-checked:ds-from-primary-f-stop peer-checked:ds-from-primary-f peer-checked:ds-to-primary-t
|
|
6
6
|
peer-checked:after:ds-opacity-100
|
package/dist/design-system75.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const e=require("vue"),k=require("./design-
|
|
1
|
+
"use strict";const e=require("vue"),k=require("./design-system93.js"),C={class:"ds-flex ds-flex-wrap ds-overflow-hidden ds-rounded-lg ds-border ds-border-gray-100 ds-bg-gray-100"},_=["onClick"],g=["id"],y=e.defineComponent({__name:"BTabs",props:{headers:{},modelValue:{default:void 0},headerCssClass:{default:""}},emits:["update:modelValue"],setup(p,{emit:b}){const r=p,o=e.ref(null),l=e.ref(null),s=e.ref(null),t=e.ref(0),n=e.ref(0),u=e.computed({get(){return r.modelValue!==void 0?r.modelValue:n.value},set(a){r.modelValue!==void 0?b("update:modelValue",a):n.value=a}}),c=e.computed(()=>`id-${k()}`);e.watch(u,a=>{i(a)}),e.watch(()=>r.headers,()=>{e.nextTick(()=>{v()})});const h=a=>{u.value=a},i=a=>{if(s.value&&l.value)if(t.value=a,[...s.value,...l.value].forEach(d=>{d.classList.remove("active")}),s.value[t.value]&&l.value[t.value])s.value[t.value].classList.add("active"),l.value[t.value].classList.add("active");else{const d=t.value-1;d>=0&&(s.value[d].classList.add("active"),l.value[d].classList.add("active"))}},v=()=>{o.value&&(s.value=[...o.value.querySelectorAll(`#${c.value} > .tab`)],s.value.forEach(a=>{a.classList.contains("active")&&(t.value=s.value.indexOf(a))}),i(t.value))};return e.onMounted(()=>{v()}),(a,d)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"tabContainer",ref:o},[e.renderSlot(a.$slots,"headers-prepend",{},void 0,!0),e.createElementVNode("ul",C,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.headers,(f,m)=>(e.openBlock(),e.createElementBlock("li",{key:m,ref_for:!0,ref_key:"tabHeaders",ref:l,class:e.normalizeClass([[a.headerCssClass,f.disabled?"ds-pointer-events-none ds-text-black/40":""],"tab-header ds-min-w-[5rem] ds-flex-1 ds-cursor-pointer ds-rounded-lg ds-p-2 ds-text-center ds-text-sm ds-font-medium ds-capitalize hover:ds-bg-slate-50 hover:ds-text-primary-t"]),onClick:V=>h(m)},e.toDisplayString(f.text),11,_))),128))]),e.renderSlot(a.$slots,"headers-append",{},void 0,!0),e.createElementVNode("div",{id:c.value,class:"ds-w-full"},[e.renderSlot(a.$slots,"default",{},void 0,!0)],8,g)],512))}});module.exports=y;
|
|
2
2
|
//# sourceMappingURL=design-system75.js.map
|
package/dist/design-system75.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineComponent as V, ref as d, computed as C, watch as k, nextTick as L, onMounted as T, openBlock as n, createElementBlock as u, renderSlot as i, createElementVNode as _, Fragment as $, renderList as w, normalizeClass as B, toDisplayString as E } from "vue";
|
|
2
|
-
import H from "./design-
|
|
2
|
+
import H from "./design-system93.mjs";
|
|
3
3
|
const I = { class: "ds-flex ds-flex-wrap ds-overflow-hidden ds-rounded-lg ds-border ds-border-gray-100 ds-bg-gray-100" }, S = ["onClick"], z = ["id"], F = /* @__PURE__ */ V({
|
|
4
4
|
__name: "BTabs",
|
|
5
5
|
props: {
|
package/dist/design-system78.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const t=require("vue"),B=require("./design-system3.js"),k=require("./design-system48.js"),q=require("./design-system29.js"),V=require("./design-system30.js"),C=require("./design-
|
|
1
|
+
"use strict";const t=require("vue"),B=require("./design-system3.js"),k=require("./design-system48.js"),q=require("./design-system29.js"),V=require("./design-system30.js"),C=require("./design-system93.js"),x={class:"b-text-field"},E={class:"ds-relative"},I={key:0,class:"b-text-field__prepend-icon ds-absolute ds-left-3 ds-top-0 ds-z-[1] ds-flex ds-h-full ds-cursor-pointer ds-items-center hover:ds-text-primary-t"},R=["id","autocomplete","disabled","inputmode","placeholder","readonly","type","onKeyup"],M={key:1,class:"b-text-field__append-icon ds-absolute ds-right-3 ds-top-0 ds-z-[1] ds-flex ds-h-full ds-cursor-pointer ds-items-center hover:ds-text-primary-t"},N=t.defineComponent({__name:"BTextField",props:{inputId:{default:""},inputCssClass:{default:""},validationRules:{default:void 0},modelValue:{},label:{default:""},placeholder:{default:""},autocomplete:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},type:{default:"text"},required:{type:Boolean,default:!1},requiredErrorMessage:{default:""},hideDetails:{type:Boolean,default:!1},inputHandler:{default:void 0},inputmode:{default:"text"}},emits:["focus","blur","press:enter","update:modelValue"],setup(p,{expose:c,emit:o}){const s=p,{t:f}=k.useI18n(),d=t.ref(null),m={validateRule:e=>typeof e=="number"?!!e:!!(e&&(e!=null&&e.trim())),errorMessage:()=>s.requiredErrorMessage||f("ds.global.field_required")},r=t.computed(()=>s.inputId||`id-${C()}`),u=t.computed({get(){return s.modelValue},set(e){o("update:modelValue",e)}}),v=t.computed(()=>[{"ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4]":s.disabled,"ds-text-black/[0.85]":!s.disabled,"ds-border-error focus:ds-ring-1 focus:ds-ring-error":!n.value.valid,"ds-border-black/[0.1] focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus":n.value.valid},s.inputCssClass]),b=t.computed(()=>{let e=[];return s.required&&e.push(m),s.validationRules&&(e=e.concat(s.validationRules)),e.length?e:void 0}),{validate:i,validationResult:n}=B.useValidationField(r.value,u,b.value),y=()=>{o("press:enter")},_=()=>{o("focus")},g=()=>{o("blur")},h=()=>{i()};return c({validate:i,focus:()=>{var e;(e=d.value)==null||e.focus()},blur:()=>{var e;(e=d.value)==null||e.blur()}}),(e,l)=>(t.openBlock(),t.createElementBlock("div",x,[t.createVNode(V,{id:r.value,label:e.label,required:e.required},null,8,["id","label","required"]),t.createElementVNode("div",E,[e.$slots.prependIcon?(t.openBlock(),t.createElementBlock("div",I,[t.renderSlot(e.$slots,"prependIcon",{},void 0,!0)])):t.createCommentVNode("",!0),t.withDirectives(t.createElementVNode("input",{id:r.value,ref_key:"inputRef",ref:d,"onUpdate:modelValue":l[0]||(l[0]=a=>u.value=a),autocomplete:s.autocomplete?"on":"off",disabled:s.disabled,inputmode:s.inputmode,placeholder:s.placeholder,readonly:s.readonly,type:s.type,class:t.normalizeClass([[v.value],"ds-block ds-h-[40px] ds-w-full ds-rounded-lg ds-border ds-px-3 ds-text-sm ds-drop-shadow-light"]),onBlur:g,onFocus:_,onInput:l[1]||(l[1]=(...a)=>e.inputHandler&&e.inputHandler(...a)),onKeyup:[h,t.withKeys(y,["enter"])]},null,42,R),[[t.vModelDynamic,u.value]]),e.$slots.appendIcon?(t.openBlock(),t.createElementBlock("div",M,[t.renderSlot(e.$slots,"appendIcon",{},void 0,!0)])):t.createCommentVNode("",!0)]),e.hideDetails?t.createCommentVNode("",!0):(t.openBlock(),t.createBlock(q,{key:0,"error-message":t.unref(n).errorMessage(),class:"ds-mt-1"},null,8,["error-message"]))]))}});module.exports=N;
|
|
2
2
|
//# sourceMappingURL=design-system78.js.map
|
package/dist/design-system78.mjs
CHANGED
|
@@ -3,7 +3,7 @@ import { useValidationField as z } from "./design-system3.mjs";
|
|
|
3
3
|
import { useI18n as F } from "./design-system48.mjs";
|
|
4
4
|
import H from "./design-system29.mjs";
|
|
5
5
|
import N from "./design-system30.mjs";
|
|
6
|
-
import U from "./design-
|
|
6
|
+
import U from "./design-system93.mjs";
|
|
7
7
|
const S = { class: "b-text-field" }, T = { class: "ds-relative" }, j = {
|
|
8
8
|
key: 0,
|
|
9
9
|
class: "b-text-field__prepend-icon ds-absolute ds-left-3 ds-top-0 ds-z-[1] ds-flex ds-h-full ds-cursor-pointer ds-items-center hover:ds-text-primary-t"
|
package/dist/design-system84.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const t=require("vue"),h=require("./design-system4.js"),L=require("./design-system48.js"),P=require("./design-system101.js"),j=require("./design-system45.js"),A=require("./design-system3.js"),$=require("./design-system30.js"),U=require("./design-system11.js"),H=require("./design-system29.js"),O=require("./design-
|
|
1
|
+
"use strict";const t=require("vue"),h=require("./design-system4.js"),L=require("./design-system48.js"),P=require("./design-system101.js"),j=require("./design-system45.js"),A=require("./design-system3.js"),$=require("./design-system30.js"),U=require("./design-system11.js"),H=require("./design-system29.js"),O=require("./design-system93.js"),G=require("./design-system100.js"),J=d=>(t.pushScopeId("data-v-fec0801f"),d=d(),t.popScopeId(),d),K={class:"b-image-picker ds-w-full"},Q={class:"ds-gap-2 ds-space-y-4 ds-rounded-lg ds-bg-white ds-p-4 ds-drop-shadow"},W={key:0,class:"ds-flex ds-flex-wrap ds-justify-center ds-gap-1"},X=["onClick","onDragenter","onDragstart","onDrop"],Y=["src"],Z={class:"ds-flex ds-flex-wrap ds-justify-center"},ee=J(()=>t.createElementVNode("svg",{class:"ds-absolute -ds-bottom-[3px] ds-left-0 ds-h-4 ds-w-4 ds-fill-primary-t",viewBox:"0 0 512 512",xmlns:"http://www.w3.org/2000/svg"},[t.createElementVNode("path",{d:"M447.1 32h-384C28.64 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM111.1 96c26.51 0 48 21.49 48 48S138.5 192 111.1 192s-48-21.49-48-48S85.48 96 111.1 96zM446.1 407.6C443.3 412.8 437.9 416 432 416H82.01c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C142.1 290.4 146.9 288 152 288s9.916 2.441 12.93 6.574l32.46 44.51l93.3-139.1C293.7 194.7 298.7 192 304 192s10.35 2.672 13.31 7.125l128 192C448.6 396 448.9 402.3 446.1 407.6z"})],-1)),te=["accept","multiple"],ae=t.defineComponent({__name:"BImagePicker",props:{inputId:{default:""},modelValue:{},label:{default:""},multiple:{type:Boolean,default:!1},maxFileSize:{default:20},hideDetails:{type:Boolean,default:!1},required:{type:Boolean,default:!1},requiredErrorMessage:{default:""},validationRules:{default:void 0}},emits:["change","update:modelValue"],setup(d,{expose:y,emit:c}){const l=d,{t:g}=L.useI18n(),p=t.ref(null),f=t.ref(0),n=t.computed({get(){return l.modelValue},set(e){c("update:modelValue",e)}}),v=t.ref(!0),m=t.ref(!0),i=t.ref({visible:!1,url:""}),_=t.computed(()=>h.FileImageTypes.join(", ")),k=t.computed(()=>l.inputId||`id-${O()}`),V={validateRule:e=>!!e&&e.length>0,errorMessage:()=>l.requiredErrorMessage||g("ds.global.field_required")},B={validateRule:()=>v.value,errorMessage:()=>g("ds.components.base.image_picker.file_types_valid",{types:_.value})},D={validateRule:()=>m.value,errorMessage:()=>g("ds.components.base.image_picker.file_size_valid",{size:l.maxFileSize})},w=t.computed(()=>{let e=[];return l.required&&e.push(V),l.validationRules&&(e=e.concat(l.validationRules)),e.push(B),e.push(D),e.length?e:void 0}),{validate:u,validationResult:I}=A.useValidationField(k.value,n,w.value),b=(e,a)=>{f.value=e,a.target.classList.add("dragging"),a.dataTransfer.effectAllowed="move",a.dataTransfer.setData("index",e.toString())},C=e=>{e.target.classList.remove("dragging")},E=(e,a)=>{const s=a.target;f.value!==e&&s.classList.add("dropped-target")},q=e=>{e.preventDefault(),e.dataTransfer.dropEffect="move"},x=e=>{e.target.classList.remove("dropped-target")},F=(e,a)=>{a.preventDefault(),a.target.classList.remove("dropped-target");const r=parseInt(a.dataTransfer.getData("index")),o=n.value[r];n.value.splice(r,1),n.value.splice(e,0,o),c("change"),u()},N=()=>{var e;(e=p.value)==null||e.click()},R=e=>{let a=e.target.files||e.dataTransfer.files;a.length&&(S(a),p.value&&(p.value.value=null))},S=e=>{Array.from(e).forEach(a=>{if(v.value=h.FileImageTypes.includes(a.type),m.value=z(a.size)<=l.maxFileSize,v.value&&m.value){let s=new FileReader;s.onload=r=>{l.multiple?n.value.push({url:r.target.result,file:a,type:a.type}):n.value.splice(0,1,{url:r.target.result,file:a,type:a.type}),c("change"),u()},s.readAsDataURL(a)}else u()})},T=(e,a)=>{e.stopPropagation(),n.value.splice(a,1),c("change"),u()},z=e=>e/1024**2,M=e=>{i.value.url=e.url,i.value.visible=!0};return y({validate:u}),(e,a)=>(t.openBlock(),t.createElementBlock("div",K,[t.createVNode($,{label:l.label},null,8,["label"]),t.createElementVNode("div",Q,[t.unref(G)(n.value)?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("div",W,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(n.value,(s,r)=>(t.openBlock(),t.createElementBlock("div",{key:r,class:"b-image-picker__draggable ds-h-full ds-cursor-pointer ds-rounded-lg ds-transition-all hover:ds-ring-2 hover:ds-ring-primary-t",draggable:"true",onClick:o=>M(s),onDragend:C,onDragenter:o=>E(r,o),onDragleave:x,onDragover:q,onDragstart:o=>b(r,o),onDrop:o=>F(r,o)},[t.createElementVNode("img",{src:s.url,alt:"image",class:"ds-h-full ds-w-full ds-rounded-lg"},null,8,Y),t.createVNode(P,{class:"ds-right-1 ds-top-1 ds-h-8 ds-w-8",onClick:o=>T(o,r)},null,8,["onClick"])],40,X))),128))])),t.createElementVNode("div",Z,[t.createVNode(U,{onClick:N},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(e.$t("ds.components.base.image_picker.select_image")),1)]),appendIcon:t.withCtx(()=>[ee]),_:1}),t.createElementVNode("input",{ref_key:"inputRef",ref:p,accept:_.value,multiple:l.multiple,class:"ds-hidden",type:"file",onChange:R},null,40,te)])]),l.hideDetails?t.createCommentVNode("",!0):(t.openBlock(),t.createBlock(H,{key:0,"error-message":t.unref(I).errorMessage(),class:"mt-1"},null,8,["error-message"])),t.createVNode(j,{modelValue:i.value.visible,"onUpdate:modelValue":a[0]||(a[0]=s=>i.value.visible=s),url:i.value.url},null,8,["modelValue","url"])]))}});module.exports=ae;
|
|
2
2
|
//# sourceMappingURL=design-system84.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"design-system84.js","sources":["../src/components/BImagePicker/BImagePicker.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createVNode as _createVNode, unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \"vue\"\n\nconst _withScopeId = n => (_pushScopeId(\"data-v-1f555f5e\"),n=n(),_popScopeId(),n)\nconst _hoisted_1 = { class: \"b-image-picker ds-w-full\" }\nconst _hoisted_2 = { class: \"ds-gap-2 ds-space-y-4 ds-rounded-lg ds-bg-white ds-p-4 ds-drop-shadow\" }\nconst _hoisted_3 = {\n key: 0,\n class: \"ds-flex ds-flex-wrap ds-justify-center ds-gap-1\"\n}\nconst _hoisted_4 = [\"onClick\", \"onDragenter\", \"onDragstart\", \"onDrop\"]\nconst _hoisted_5 = [\"src\"]\nconst _hoisted_6 = { class: \"ds-flex ds-flex-wrap ds-justify-center\" }\nconst _hoisted_7 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"svg\", {\n class: \"ds-absolute -ds-bottom-[3px] ds-left-0 ds-h-4 ds-w-4 ds-fill-primary-t\",\n viewBox: \"0 0 512 512\",\n xmlns: \"http://www.w3.org/2000/svg\"\n}, [\n /*#__PURE__*/_createElementVNode(\"path\", { d: \"M447.1 32h-384C28.64 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM111.1 96c26.51 0 48 21.49 48 48S138.5 192 111.1 192s-48-21.49-48-48S85.48 96 111.1 96zM446.1 407.6C443.3 412.8 437.9 416 432 416H82.01c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C142.1 290.4 146.9 288 152 288s9.916 2.441 12.93 6.574l32.46 44.51l93.3-139.1C293.7 194.7 298.7 192 304 192s10.35 2.672 13.31 7.125l128 192C448.6 396 448.9 402.3 446.1 407.6z\" })\n], -1))\nconst _hoisted_8 = [\"accept\", \"multiple\"]\n\nimport { FileImageTypes } from '@/constants/Common';\nimport type { FileItemRead } from '@/types';\nimport { isEmpty } from 'lodash-es';\nimport { v4 as uuid } from 'uuid';\nimport { computed, ref } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport BImagePickerCloseButton from './BImagePickerCloseButton.vue';\nimport ImagePreview from './BImagePreview.vue';\nimport type { ValidationRule } from '@/composables/Validation';\nimport { useValidationField } from '@/composables/Validation';\nimport BLabel from '../BLabel.vue';\nimport BButton from '../BButton.vue';\nimport BErrorMessage from '../BErrorMessage.vue';\n\n//#region Props\nexport interface Props {\n inputId?: string;\n modelValue: FileItemRead[];\n label?: string;\n multiple?: boolean;\n maxFileSize?: number;\n hideDetails?: boolean;\n required?: boolean;\n requiredErrorMessage?: string;\n validationRules?: ValidationRule[];\n}\n\n\nexport default /*#__PURE__*/_defineComponent({\n __name: 'BImagePicker',\n props: {\n inputId: { default: '' },\n modelValue: {},\n label: { default: '' },\n multiple: { type: Boolean, default: false },\n maxFileSize: { default: 20 },\n hideDetails: { type: Boolean, default: false },\n required: { type: Boolean, default: false },\n requiredErrorMessage: { default: '' },\n validationRules: { default: undefined }\n },\n emits: [\"change\", \"update:modelValue\"],\n setup(__props: any, { expose: __expose, emit }) {\n\nconst props = __props;\n\n// Drag & Drop: https://www.w3schools.com/jsref/event_ondragover.asp\n\n//#endregion\n\n//#region Events\n\n//#endregion\n\n//#region Data\nconst { t } = useI18n();\nconst inputRef = ref<HTMLInputElement | null>(null);\nconst draggedIndex = ref(0);\nconst value = computed({\n get() {\n return props.modelValue;\n },\n set(val) {\n emit('update:modelValue', val);\n },\n});\nconst fileTypesValid = ref(true);\nconst fileSizeValid = ref(true);\nconst previewImage = ref({\n visible: false,\n url: '',\n});\nconst allowedTypes = computed(() => FileImageTypes.join(', '));\nconst id = computed(() => props.inputId || `id-${uuid()}`);\nconst validateRequired: ValidationRule = {\n validateRule: (val: FileItemRead[]) => !!val && val.length > 0,\n errorMessage: () =>\n props.requiredErrorMessage || t('ds.global.field_required'),\n};\nconst validateFileTypesValid: ValidationRule = {\n validateRule: () => fileTypesValid.value,\n errorMessage: () =>\n t('ds.components.base.image_picker.file_types_valid', {\n types: allowedTypes.value,\n }),\n};\nconst validateFileSizeValid: ValidationRule = {\n validateRule: () => fileSizeValid.value,\n errorMessage: () =>\n t('ds.components.base.image_picker.file_size_valid', {\n size: props.maxFileSize,\n }),\n};\nconst vRules = computed(() => {\n let result: ValidationRule[] = [];\n\n if (props.required) {\n result.push(validateRequired);\n }\n if (props.validationRules) {\n result = result.concat(props.validationRules);\n }\n result.push(validateFileTypesValid);\n result.push(validateFileSizeValid);\n\n return result.length ? result : undefined;\n});\nconst { validate, validationResult } = useValidationField(\n id.value,\n value,\n vRules.value,\n);\n//#endregion\n\n//#region Methods\n/* Events fired on the drag target */\nconst handleDragStart = (index: number, e: DragEvent) => {\n draggedIndex.value = index;\n const target = e.target as HTMLDivElement;\n target.classList.add('dragging');\n e.dataTransfer!.effectAllowed = 'move';\n e.dataTransfer!.setData('index', index.toString());\n};\nconst handleDragEnd = (e: DragEvent) => {\n const target = e.target as HTMLDivElement;\n target.classList.remove('dragging');\n};\n/* Events fired on the drop target */\nconst handleDragEnter = (index: number, e: DragEvent) => {\n const target = e.target as HTMLDivElement;\n if (draggedIndex.value !== index) {\n target.classList.add('dropped-target');\n }\n};\nconst handleDragOver = (e: DragEvent) => {\n // By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element\n e.preventDefault();\n e.dataTransfer!.dropEffect = 'move';\n};\nconst handleDragLeave = (e: DragEvent) => {\n // When the draggable p element leaves the droptarget, reset the style\n const target = e.target as HTMLDivElement;\n target.classList.remove('dropped-target');\n};\nconst handleDrop = (index: number, e: DragEvent) => {\n e.preventDefault();\n const target = e.target as HTMLDivElement;\n target.classList.remove('dropped-target');\n const draggedIndex = parseInt(e.dataTransfer!.getData('index'));\n const draggedImg = value.value[draggedIndex];\n value.value.splice(draggedIndex, 1);\n value.value.splice(index, 0, draggedImg);\n\n emit('change');\n validate();\n};\nconst openFileDialog = () => {\n inputRef.value?.click();\n};\nconst onChangeInput = (e: any) => {\n let fileList: FileList = e.target.files || e.dataTransfer.files;\n if (!fileList.length) {\n return;\n }\n createFileImages(fileList);\n\n // Clear input's value so onChange event can work for the same files next picks\n if (inputRef.value) {\n inputRef.value.value = null as any;\n }\n};\nconst createFileImages = (fileList: FileList) => {\n Array.from(fileList).forEach((file) => {\n fileTypesValid.value = FileImageTypes.includes(file.type);\n fileSizeValid.value = convertToMB(file.size) <= props.maxFileSize;\n\n if (fileTypesValid.value && fileSizeValid.value) {\n let reader: any = new FileReader();\n\n reader.onload = (f: any) => {\n if (props.multiple) {\n value.value.push({\n url: f.target.result,\n file,\n type: file.type,\n });\n } else {\n value.value.splice(0, 1, {\n url: f.target.result,\n file,\n type: file.type,\n });\n }\n\n emit('change');\n validate();\n };\n\n reader.readAsDataURL(file);\n } else {\n validate();\n }\n });\n};\nconst removeFileImage = (e: Event, index: number) => {\n e.stopPropagation();\n value.value.splice(index, 1);\n\n emit('change');\n validate();\n};\nconst convertToMB = (numberOfBytes: number) => numberOfBytes / 1024 ** 2;\nconst preview = (item: FileItemRead) => {\n previewImage.value.url = item.url;\n previewImage.value.visible = true;\n};\n//#endregion\n\n__expose({ validate });\n\nreturn (_ctx: any,_cache: any) => {\n return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n _createVNode(BLabel, {\n label: props.label\n }, null, 8, [\"label\"]),\n _createElementVNode(\"div\", _hoisted_2, [\n (!_unref(isEmpty)(value.value))\n ? (_openBlock(), _createElementBlock(\"div\", _hoisted_3, [\n (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(value.value, (item, index) => {\n return (_openBlock(), _createElementBlock(\"div\", {\n key: index,\n class: \"b-image-picker__draggable ds-h-full ds-cursor-pointer ds-rounded-lg ds-transition-all hover:ds-ring-2 hover:ds-ring-primary-t\",\n draggable: \"true\",\n onClick: ($event: any) => (preview(item)),\n onDragend: handleDragEnd,\n onDragenter: ($event: any) => (handleDragEnter(index, $event)),\n onDragleave: handleDragLeave,\n onDragover: handleDragOver,\n onDragstart: ($event: any) => (handleDragStart(index, $event)),\n onDrop: ($event: any) => (handleDrop(index, $event))\n }, [\n _createElementVNode(\"img\", {\n src: item.url,\n alt: \"image\",\n class: \"ds-h-full ds-w-full ds-rounded-lg\"\n }, null, 8, _hoisted_5),\n _createVNode(BImagePickerCloseButton, {\n class: \"ds-right-1 ds-top-1 ds-h-8 ds-w-8\",\n onClick: (e) => removeFileImage(e, index)\n }, null, 8, [\"onClick\"])\n ], 40, _hoisted_4))\n }), 128))\n ]))\n : _createCommentVNode(\"\", true),\n _createElementVNode(\"div\", _hoisted_6, [\n _createVNode(BButton, { onClick: openFileDialog }, {\n default: _withCtx(() => [\n _createTextVNode(_toDisplayString(_ctx.$t('ds.components.base.image_picker.select_image')), 1)\n ]),\n appendIcon: _withCtx(() => [\n _hoisted_7\n ]),\n _: 1\n }),\n _createElementVNode(\"input\", {\n ref_key: \"inputRef\",\n ref: inputRef,\n accept: allowedTypes.value,\n multiple: props.multiple,\n class: \"ds-hidden\",\n type: \"file\",\n onChange: onChangeInput\n }, null, 40, _hoisted_8)\n ])\n ]),\n (!props.hideDetails)\n ? (_openBlock(), _createBlock(BErrorMessage, {\n key: 0,\n \"error-message\": _unref(validationResult).errorMessage(),\n class: \"mt-1\"\n }, null, 8, [\"error-message\"]))\n : _createCommentVNode(\"\", true),\n _createVNode(ImagePreview, {\n modelValue: previewImage.value.visible,\n \"onUpdate:modelValue\": _cache[0] || (_cache[0] = ($event: any) => ((previewImage.value.visible) = $event)),\n url: previewImage.value.url\n }, null, 8, [\"modelValue\", \"url\"])\n ]))\n}\n}\n\n})"],"names":["_withScopeId","_pushScopeId","n","_popScopeId","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_createElementVNode","_hoisted_8","_sfc_main","_defineComponent","__props","__expose","emit","props","t","useI18n","inputRef","ref","draggedIndex","value","computed","val","fileTypesValid","fileSizeValid","previewImage","allowedTypes","FileImageTypes","id","uuid","validateRequired","validateFileTypesValid","validateFileSizeValid","vRules","result","validate","validationResult","useValidationField","handleDragStart","index","e","handleDragEnd","handleDragEnter","target","handleDragOver","handleDragLeave","handleDrop","draggedImg","openFileDialog","_a","onChangeInput","fileList","createFileImages","file","convertToMB","reader","f","removeFileImage","numberOfBytes","preview","item","_ctx","_cache","_openBlock","_createElementBlock","_createVNode","BLabel","_unref","isEmpty","_createCommentVNode","_Fragment","_renderList","$event","BImagePickerCloseButton","BButton","_withCtx","_createTextVNode","_toDisplayString","_createBlock","BErrorMessage","ImagePreview"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"design-system84.js","sources":["../src/components/BImagePicker/BImagePicker.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createVNode as _createVNode, unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \"vue\"\n\nconst _withScopeId = n => (_pushScopeId(\"data-v-fec0801f\"),n=n(),_popScopeId(),n)\nconst _hoisted_1 = { class: \"b-image-picker ds-w-full\" }\nconst _hoisted_2 = { class: \"ds-gap-2 ds-space-y-4 ds-rounded-lg ds-bg-white ds-p-4 ds-drop-shadow\" }\nconst _hoisted_3 = {\n key: 0,\n class: \"ds-flex ds-flex-wrap ds-justify-center ds-gap-1\"\n}\nconst _hoisted_4 = [\"onClick\", \"onDragenter\", \"onDragstart\", \"onDrop\"]\nconst _hoisted_5 = [\"src\"]\nconst _hoisted_6 = { class: \"ds-flex ds-flex-wrap ds-justify-center\" }\nconst _hoisted_7 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"svg\", {\n class: \"ds-absolute -ds-bottom-[3px] ds-left-0 ds-h-4 ds-w-4 ds-fill-primary-t\",\n viewBox: \"0 0 512 512\",\n xmlns: \"http://www.w3.org/2000/svg\"\n}, [\n /*#__PURE__*/_createElementVNode(\"path\", { d: \"M447.1 32h-384C28.64 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM111.1 96c26.51 0 48 21.49 48 48S138.5 192 111.1 192s-48-21.49-48-48S85.48 96 111.1 96zM446.1 407.6C443.3 412.8 437.9 416 432 416H82.01c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C142.1 290.4 146.9 288 152 288s9.916 2.441 12.93 6.574l32.46 44.51l93.3-139.1C293.7 194.7 298.7 192 304 192s10.35 2.672 13.31 7.125l128 192C448.6 396 448.9 402.3 446.1 407.6z\" })\n], -1))\nconst _hoisted_8 = [\"accept\", \"multiple\"]\n\nimport { FileImageTypes } from '@/constants/Common';\r\nimport type { FileItemRead } from '@/types';\r\nimport { isEmpty } from 'lodash-es';\r\nimport { v4 as uuid } from 'uuid';\r\nimport { computed, ref } from 'vue';\r\nimport { useI18n } from 'vue-i18n';\r\nimport BImagePickerCloseButton from './BImagePickerCloseButton.vue';\r\nimport ImagePreview from './BImagePreview.vue';\r\nimport type { ValidationRule } from '@/composables/Validation';\r\nimport { useValidationField } from '@/composables/Validation';\r\nimport BLabel from '../BLabel.vue';\r\nimport BButton from '../BButton.vue';\r\nimport BErrorMessage from '../BErrorMessage.vue';\r\n\r\n//#region Props\r\nexport interface Props {\r\n inputId?: string;\r\n modelValue: FileItemRead[];\r\n label?: string;\r\n multiple?: boolean;\r\n maxFileSize?: number;\r\n hideDetails?: boolean;\r\n required?: boolean;\r\n requiredErrorMessage?: string;\r\n validationRules?: ValidationRule[];\r\n}\r\n\r\n\nexport default /*#__PURE__*/_defineComponent({\n __name: 'BImagePicker',\n props: {\n inputId: { default: '' },\n modelValue: {},\n label: { default: '' },\n multiple: { type: Boolean, default: false },\n maxFileSize: { default: 20 },\n hideDetails: { type: Boolean, default: false },\n required: { type: Boolean, default: false },\n requiredErrorMessage: { default: '' },\n validationRules: { default: undefined }\n },\n emits: [\"change\", \"update:modelValue\"],\n setup(__props: any, { expose: __expose, emit }) {\n\nconst props = __props;\n\r\n// Drag & Drop: https://www.w3schools.com/jsref/event_ondragover.asp\r\n\r\n//#endregion\r\n\r\n//#region Events\r\n\r\n//#endregion\r\n\r\n//#region Data\r\nconst { t } = useI18n();\r\nconst inputRef = ref<HTMLInputElement | null>(null);\r\nconst draggedIndex = ref(0);\r\nconst value = computed({\r\n get() {\r\n return props.modelValue;\r\n },\r\n set(val) {\r\n emit('update:modelValue', val);\r\n },\r\n});\r\nconst fileTypesValid = ref(true);\r\nconst fileSizeValid = ref(true);\r\nconst previewImage = ref({\r\n visible: false,\r\n url: '',\r\n});\r\nconst allowedTypes = computed(() => FileImageTypes.join(', '));\r\nconst id = computed(() => props.inputId || `id-${uuid()}`);\r\nconst validateRequired: ValidationRule = {\r\n validateRule: (val: FileItemRead[]) => !!val && val.length > 0,\r\n errorMessage: () =>\r\n props.requiredErrorMessage || t('ds.global.field_required'),\r\n};\r\nconst validateFileTypesValid: ValidationRule = {\r\n validateRule: () => fileTypesValid.value,\r\n errorMessage: () =>\r\n t('ds.components.base.image_picker.file_types_valid', {\r\n types: allowedTypes.value,\r\n }),\r\n};\r\nconst validateFileSizeValid: ValidationRule = {\r\n validateRule: () => fileSizeValid.value,\r\n errorMessage: () =>\r\n t('ds.components.base.image_picker.file_size_valid', {\r\n size: props.maxFileSize,\r\n }),\r\n};\r\nconst vRules = computed(() => {\r\n let result: ValidationRule[] = [];\r\n\r\n if (props.required) {\r\n result.push(validateRequired);\r\n }\r\n if (props.validationRules) {\r\n result = result.concat(props.validationRules);\r\n }\r\n result.push(validateFileTypesValid);\r\n result.push(validateFileSizeValid);\r\n\r\n return result.length ? result : undefined;\r\n});\r\nconst { validate, validationResult } = useValidationField(\r\n id.value,\r\n value,\r\n vRules.value,\r\n);\r\n//#endregion\r\n\r\n//#region Methods\r\n/* Events fired on the drag target */\r\nconst handleDragStart = (index: number, e: DragEvent) => {\r\n draggedIndex.value = index;\r\n const target = e.target as HTMLDivElement;\r\n target.classList.add('dragging');\r\n e.dataTransfer!.effectAllowed = 'move';\r\n e.dataTransfer!.setData('index', index.toString());\r\n};\r\nconst handleDragEnd = (e: DragEvent) => {\r\n const target = e.target as HTMLDivElement;\r\n target.classList.remove('dragging');\r\n};\r\n/* Events fired on the drop target */\r\nconst handleDragEnter = (index: number, e: DragEvent) => {\r\n const target = e.target as HTMLDivElement;\r\n if (draggedIndex.value !== index) {\r\n target.classList.add('dropped-target');\r\n }\r\n};\r\nconst handleDragOver = (e: DragEvent) => {\r\n // By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element\r\n e.preventDefault();\r\n e.dataTransfer!.dropEffect = 'move';\r\n};\r\nconst handleDragLeave = (e: DragEvent) => {\r\n // When the draggable p element leaves the droptarget, reset the style\r\n const target = e.target as HTMLDivElement;\r\n target.classList.remove('dropped-target');\r\n};\r\nconst handleDrop = (index: number, e: DragEvent) => {\r\n e.preventDefault();\r\n const target = e.target as HTMLDivElement;\r\n target.classList.remove('dropped-target');\r\n const draggedIndex = parseInt(e.dataTransfer!.getData('index'));\r\n const draggedImg = value.value[draggedIndex];\r\n value.value.splice(draggedIndex, 1);\r\n value.value.splice(index, 0, draggedImg);\r\n\r\n emit('change');\r\n validate();\r\n};\r\nconst openFileDialog = () => {\r\n inputRef.value?.click();\r\n};\r\nconst onChangeInput = (e: any) => {\r\n let fileList: FileList = e.target.files || e.dataTransfer.files;\r\n if (!fileList.length) {\r\n return;\r\n }\r\n createFileImages(fileList);\r\n\r\n // Clear input's value so onChange event can work for the same files next picks\r\n if (inputRef.value) {\r\n inputRef.value.value = null as any;\r\n }\r\n};\r\nconst createFileImages = (fileList: FileList) => {\r\n Array.from(fileList).forEach((file) => {\r\n fileTypesValid.value = FileImageTypes.includes(file.type);\r\n fileSizeValid.value = convertToMB(file.size) <= props.maxFileSize;\r\n\r\n if (fileTypesValid.value && fileSizeValid.value) {\r\n let reader: any = new FileReader();\r\n\r\n reader.onload = (f: any) => {\r\n if (props.multiple) {\r\n value.value.push({\r\n url: f.target.result,\r\n file,\r\n type: file.type,\r\n });\r\n } else {\r\n value.value.splice(0, 1, {\r\n url: f.target.result,\r\n file,\r\n type: file.type,\r\n });\r\n }\r\n\r\n emit('change');\r\n validate();\r\n };\r\n\r\n reader.readAsDataURL(file);\r\n } else {\r\n validate();\r\n }\r\n });\r\n};\r\nconst removeFileImage = (e: Event, index: number) => {\r\n e.stopPropagation();\r\n value.value.splice(index, 1);\r\n\r\n emit('change');\r\n validate();\r\n};\r\nconst convertToMB = (numberOfBytes: number) => numberOfBytes / 1024 ** 2;\r\nconst preview = (item: FileItemRead) => {\r\n previewImage.value.url = item.url;\r\n previewImage.value.visible = true;\r\n};\r\n//#endregion\r\n\r\n__expose({ validate });\r\n\nreturn (_ctx: any,_cache: any) => {\n return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n _createVNode(BLabel, {\n label: props.label\n }, null, 8, [\"label\"]),\n _createElementVNode(\"div\", _hoisted_2, [\n (!_unref(isEmpty)(value.value))\n ? (_openBlock(), _createElementBlock(\"div\", _hoisted_3, [\n (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(value.value, (item, index) => {\n return (_openBlock(), _createElementBlock(\"div\", {\n key: index,\n class: \"b-image-picker__draggable ds-h-full ds-cursor-pointer ds-rounded-lg ds-transition-all hover:ds-ring-2 hover:ds-ring-primary-t\",\n draggable: \"true\",\n onClick: ($event: any) => (preview(item)),\n onDragend: handleDragEnd,\n onDragenter: ($event: any) => (handleDragEnter(index, $event)),\n onDragleave: handleDragLeave,\n onDragover: handleDragOver,\n onDragstart: ($event: any) => (handleDragStart(index, $event)),\n onDrop: ($event: any) => (handleDrop(index, $event))\n }, [\n _createElementVNode(\"img\", {\n src: item.url,\n alt: \"image\",\n class: \"ds-h-full ds-w-full ds-rounded-lg\"\n }, null, 8, _hoisted_5),\n _createVNode(BImagePickerCloseButton, {\n class: \"ds-right-1 ds-top-1 ds-h-8 ds-w-8\",\n onClick: (e) => removeFileImage(e, index)\n }, null, 8, [\"onClick\"])\n ], 40, _hoisted_4))\n }), 128))\n ]))\n : _createCommentVNode(\"\", true),\n _createElementVNode(\"div\", _hoisted_6, [\n _createVNode(BButton, { onClick: openFileDialog }, {\n default: _withCtx(() => [\n _createTextVNode(_toDisplayString(_ctx.$t('ds.components.base.image_picker.select_image')), 1)\n ]),\n appendIcon: _withCtx(() => [\n _hoisted_7\n ]),\n _: 1\n }),\n _createElementVNode(\"input\", {\n ref_key: \"inputRef\",\n ref: inputRef,\n accept: allowedTypes.value,\n multiple: props.multiple,\n class: \"ds-hidden\",\n type: \"file\",\n onChange: onChangeInput\n }, null, 40, _hoisted_8)\n ])\n ]),\n (!props.hideDetails)\n ? (_openBlock(), _createBlock(BErrorMessage, {\n key: 0,\n \"error-message\": _unref(validationResult).errorMessage(),\n class: \"mt-1\"\n }, null, 8, [\"error-message\"]))\n : _createCommentVNode(\"\", true),\n _createVNode(ImagePreview, {\n modelValue: previewImage.value.visible,\n \"onUpdate:modelValue\": _cache[0] || (_cache[0] = ($event: any) => ((previewImage.value.visible) = $event)),\n url: previewImage.value.url\n }, null, 8, [\"modelValue\", \"url\"])\n ]))\n}\n}\n\n})"],"names":["_withScopeId","_pushScopeId","n","_popScopeId","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_createElementVNode","_hoisted_8","_sfc_main","_defineComponent","__props","__expose","emit","props","t","useI18n","inputRef","ref","draggedIndex","value","computed","val","fileTypesValid","fileSizeValid","previewImage","allowedTypes","FileImageTypes","id","uuid","validateRequired","validateFileTypesValid","validateFileSizeValid","vRules","result","validate","validationResult","useValidationField","handleDragStart","index","e","handleDragEnd","handleDragEnter","target","handleDragOver","handleDragLeave","handleDrop","draggedImg","openFileDialog","_a","onChangeInput","fileList","createFileImages","file","convertToMB","reader","f","removeFileImage","numberOfBytes","preview","item","_ctx","_cache","_openBlock","_createElementBlock","_createVNode","BLabel","_unref","isEmpty","_createCommentVNode","_Fragment","_renderList","$event","BImagePickerCloseButton","BButton","_withCtx","_createTextVNode","_toDisplayString","_createBlock","BErrorMessage","ImagePreview"],"mappings":"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"}
|
package/dist/design-system84.mjs
CHANGED
|
@@ -7,9 +7,9 @@ import { useValidationField as le } from "./design-system3.mjs";
|
|
|
7
7
|
import se from "./design-system30.mjs";
|
|
8
8
|
import re from "./design-system11.mjs";
|
|
9
9
|
import oe from "./design-system29.mjs";
|
|
10
|
-
import de from "./design-
|
|
11
|
-
import ie from "./design-
|
|
12
|
-
const ne = (i) => (Y("data-v-
|
|
10
|
+
import de from "./design-system93.mjs";
|
|
11
|
+
import ie from "./design-system100.mjs";
|
|
12
|
+
const ne = (i) => (Y("data-v-fec0801f"), i = i(), Z(), i), ue = { class: "b-image-picker ds-w-full" }, ce = { class: "ds-gap-2 ds-space-y-4 ds-rounded-lg ds-bg-white ds-p-4 ds-drop-shadow" }, pe = {
|
|
13
13
|
key: 0,
|
|
14
14
|
class: "ds-flex ds-flex-wrap ds-justify-center ds-gap-1"
|
|
15
15
|
}, ge = ["onClick", "onDragenter", "onDragstart", "onDrop"], me = ["src"], ve = { class: "ds-flex ds-flex-wrap ds-justify-center" }, fe = /* @__PURE__ */ ne(() => /* @__PURE__ */ d("svg", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"design-system84.mjs","sources":["../src/components/BImagePicker/BImagePicker.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createVNode as _createVNode, unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \"vue\"\n\nconst _withScopeId = n => (_pushScopeId(\"data-v-1f555f5e\"),n=n(),_popScopeId(),n)\nconst _hoisted_1 = { class: \"b-image-picker ds-w-full\" }\nconst _hoisted_2 = { class: \"ds-gap-2 ds-space-y-4 ds-rounded-lg ds-bg-white ds-p-4 ds-drop-shadow\" }\nconst _hoisted_3 = {\n key: 0,\n class: \"ds-flex ds-flex-wrap ds-justify-center ds-gap-1\"\n}\nconst _hoisted_4 = [\"onClick\", \"onDragenter\", \"onDragstart\", \"onDrop\"]\nconst _hoisted_5 = [\"src\"]\nconst _hoisted_6 = { class: \"ds-flex ds-flex-wrap ds-justify-center\" }\nconst _hoisted_7 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"svg\", {\n class: \"ds-absolute -ds-bottom-[3px] ds-left-0 ds-h-4 ds-w-4 ds-fill-primary-t\",\n viewBox: \"0 0 512 512\",\n xmlns: \"http://www.w3.org/2000/svg\"\n}, [\n /*#__PURE__*/_createElementVNode(\"path\", { d: \"M447.1 32h-384C28.64 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM111.1 96c26.51 0 48 21.49 48 48S138.5 192 111.1 192s-48-21.49-48-48S85.48 96 111.1 96zM446.1 407.6C443.3 412.8 437.9 416 432 416H82.01c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C142.1 290.4 146.9 288 152 288s9.916 2.441 12.93 6.574l32.46 44.51l93.3-139.1C293.7 194.7 298.7 192 304 192s10.35 2.672 13.31 7.125l128 192C448.6 396 448.9 402.3 446.1 407.6z\" })\n], -1))\nconst _hoisted_8 = [\"accept\", \"multiple\"]\n\nimport { FileImageTypes } from '@/constants/Common';\nimport type { FileItemRead } from '@/types';\nimport { isEmpty } from 'lodash-es';\nimport { v4 as uuid } from 'uuid';\nimport { computed, ref } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport BImagePickerCloseButton from './BImagePickerCloseButton.vue';\nimport ImagePreview from './BImagePreview.vue';\nimport type { ValidationRule } from '@/composables/Validation';\nimport { useValidationField } from '@/composables/Validation';\nimport BLabel from '../BLabel.vue';\nimport BButton from '../BButton.vue';\nimport BErrorMessage from '../BErrorMessage.vue';\n\n//#region Props\nexport interface Props {\n inputId?: string;\n modelValue: FileItemRead[];\n label?: string;\n multiple?: boolean;\n maxFileSize?: number;\n hideDetails?: boolean;\n required?: boolean;\n requiredErrorMessage?: string;\n validationRules?: ValidationRule[];\n}\n\n\nexport default /*#__PURE__*/_defineComponent({\n __name: 'BImagePicker',\n props: {\n inputId: { default: '' },\n modelValue: {},\n label: { default: '' },\n multiple: { type: Boolean, default: false },\n maxFileSize: { default: 20 },\n hideDetails: { type: Boolean, default: false },\n required: { type: Boolean, default: false },\n requiredErrorMessage: { default: '' },\n validationRules: { default: undefined }\n },\n emits: [\"change\", \"update:modelValue\"],\n setup(__props: any, { expose: __expose, emit }) {\n\nconst props = __props;\n\n// Drag & Drop: https://www.w3schools.com/jsref/event_ondragover.asp\n\n//#endregion\n\n//#region Events\n\n//#endregion\n\n//#region Data\nconst { t } = useI18n();\nconst inputRef = ref<HTMLInputElement | null>(null);\nconst draggedIndex = ref(0);\nconst value = computed({\n get() {\n return props.modelValue;\n },\n set(val) {\n emit('update:modelValue', val);\n },\n});\nconst fileTypesValid = ref(true);\nconst fileSizeValid = ref(true);\nconst previewImage = ref({\n visible: false,\n url: '',\n});\nconst allowedTypes = computed(() => FileImageTypes.join(', '));\nconst id = computed(() => props.inputId || `id-${uuid()}`);\nconst validateRequired: ValidationRule = {\n validateRule: (val: FileItemRead[]) => !!val && val.length > 0,\n errorMessage: () =>\n props.requiredErrorMessage || t('ds.global.field_required'),\n};\nconst validateFileTypesValid: ValidationRule = {\n validateRule: () => fileTypesValid.value,\n errorMessage: () =>\n t('ds.components.base.image_picker.file_types_valid', {\n types: allowedTypes.value,\n }),\n};\nconst validateFileSizeValid: ValidationRule = {\n validateRule: () => fileSizeValid.value,\n errorMessage: () =>\n t('ds.components.base.image_picker.file_size_valid', {\n size: props.maxFileSize,\n }),\n};\nconst vRules = computed(() => {\n let result: ValidationRule[] = [];\n\n if (props.required) {\n result.push(validateRequired);\n }\n if (props.validationRules) {\n result = result.concat(props.validationRules);\n }\n result.push(validateFileTypesValid);\n result.push(validateFileSizeValid);\n\n return result.length ? result : undefined;\n});\nconst { validate, validationResult } = useValidationField(\n id.value,\n value,\n vRules.value,\n);\n//#endregion\n\n//#region Methods\n/* Events fired on the drag target */\nconst handleDragStart = (index: number, e: DragEvent) => {\n draggedIndex.value = index;\n const target = e.target as HTMLDivElement;\n target.classList.add('dragging');\n e.dataTransfer!.effectAllowed = 'move';\n e.dataTransfer!.setData('index', index.toString());\n};\nconst handleDragEnd = (e: DragEvent) => {\n const target = e.target as HTMLDivElement;\n target.classList.remove('dragging');\n};\n/* Events fired on the drop target */\nconst handleDragEnter = (index: number, e: DragEvent) => {\n const target = e.target as HTMLDivElement;\n if (draggedIndex.value !== index) {\n target.classList.add('dropped-target');\n }\n};\nconst handleDragOver = (e: DragEvent) => {\n // By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element\n e.preventDefault();\n e.dataTransfer!.dropEffect = 'move';\n};\nconst handleDragLeave = (e: DragEvent) => {\n // When the draggable p element leaves the droptarget, reset the style\n const target = e.target as HTMLDivElement;\n target.classList.remove('dropped-target');\n};\nconst handleDrop = (index: number, e: DragEvent) => {\n e.preventDefault();\n const target = e.target as HTMLDivElement;\n target.classList.remove('dropped-target');\n const draggedIndex = parseInt(e.dataTransfer!.getData('index'));\n const draggedImg = value.value[draggedIndex];\n value.value.splice(draggedIndex, 1);\n value.value.splice(index, 0, draggedImg);\n\n emit('change');\n validate();\n};\nconst openFileDialog = () => {\n inputRef.value?.click();\n};\nconst onChangeInput = (e: any) => {\n let fileList: FileList = e.target.files || e.dataTransfer.files;\n if (!fileList.length) {\n return;\n }\n createFileImages(fileList);\n\n // Clear input's value so onChange event can work for the same files next picks\n if (inputRef.value) {\n inputRef.value.value = null as any;\n }\n};\nconst createFileImages = (fileList: FileList) => {\n Array.from(fileList).forEach((file) => {\n fileTypesValid.value = FileImageTypes.includes(file.type);\n fileSizeValid.value = convertToMB(file.size) <= props.maxFileSize;\n\n if (fileTypesValid.value && fileSizeValid.value) {\n let reader: any = new FileReader();\n\n reader.onload = (f: any) => {\n if (props.multiple) {\n value.value.push({\n url: f.target.result,\n file,\n type: file.type,\n });\n } else {\n value.value.splice(0, 1, {\n url: f.target.result,\n file,\n type: file.type,\n });\n }\n\n emit('change');\n validate();\n };\n\n reader.readAsDataURL(file);\n } else {\n validate();\n }\n });\n};\nconst removeFileImage = (e: Event, index: number) => {\n e.stopPropagation();\n value.value.splice(index, 1);\n\n emit('change');\n validate();\n};\nconst convertToMB = (numberOfBytes: number) => numberOfBytes / 1024 ** 2;\nconst preview = (item: FileItemRead) => {\n previewImage.value.url = item.url;\n previewImage.value.visible = true;\n};\n//#endregion\n\n__expose({ validate });\n\nreturn (_ctx: any,_cache: any) => {\n return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n _createVNode(BLabel, {\n label: props.label\n }, null, 8, [\"label\"]),\n _createElementVNode(\"div\", _hoisted_2, [\n (!_unref(isEmpty)(value.value))\n ? (_openBlock(), _createElementBlock(\"div\", _hoisted_3, [\n (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(value.value, (item, index) => {\n return (_openBlock(), _createElementBlock(\"div\", {\n key: index,\n class: \"b-image-picker__draggable ds-h-full ds-cursor-pointer ds-rounded-lg ds-transition-all hover:ds-ring-2 hover:ds-ring-primary-t\",\n draggable: \"true\",\n onClick: ($event: any) => (preview(item)),\n onDragend: handleDragEnd,\n onDragenter: ($event: any) => (handleDragEnter(index, $event)),\n onDragleave: handleDragLeave,\n onDragover: handleDragOver,\n onDragstart: ($event: any) => (handleDragStart(index, $event)),\n onDrop: ($event: any) => (handleDrop(index, $event))\n }, [\n _createElementVNode(\"img\", {\n src: item.url,\n alt: \"image\",\n class: \"ds-h-full ds-w-full ds-rounded-lg\"\n }, null, 8, _hoisted_5),\n _createVNode(BImagePickerCloseButton, {\n class: \"ds-right-1 ds-top-1 ds-h-8 ds-w-8\",\n onClick: (e) => removeFileImage(e, index)\n }, null, 8, [\"onClick\"])\n ], 40, _hoisted_4))\n }), 128))\n ]))\n : _createCommentVNode(\"\", true),\n _createElementVNode(\"div\", _hoisted_6, [\n _createVNode(BButton, { onClick: openFileDialog }, {\n default: _withCtx(() => [\n _createTextVNode(_toDisplayString(_ctx.$t('ds.components.base.image_picker.select_image')), 1)\n ]),\n appendIcon: _withCtx(() => [\n _hoisted_7\n ]),\n _: 1\n }),\n _createElementVNode(\"input\", {\n ref_key: \"inputRef\",\n ref: inputRef,\n accept: allowedTypes.value,\n multiple: props.multiple,\n class: \"ds-hidden\",\n type: \"file\",\n onChange: onChangeInput\n }, null, 40, _hoisted_8)\n ])\n ]),\n (!props.hideDetails)\n ? (_openBlock(), _createBlock(BErrorMessage, {\n key: 0,\n \"error-message\": _unref(validationResult).errorMessage(),\n class: \"mt-1\"\n }, null, 8, [\"error-message\"]))\n : _createCommentVNode(\"\", true),\n _createVNode(ImagePreview, {\n modelValue: previewImage.value.visible,\n \"onUpdate:modelValue\": _cache[0] || (_cache[0] = ($event: any) => ((previewImage.value.visible) = $event)),\n url: previewImage.value.url\n }, null, 8, [\"modelValue\", \"url\"])\n ]))\n}\n}\n\n})"],"names":["_withScopeId","_pushScopeId","n","_popScopeId","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_createElementVNode","_hoisted_8","_sfc_main","_defineComponent","__props","__expose","emit","props","t","useI18n","inputRef","ref","draggedIndex","value","computed","val","fileTypesValid","fileSizeValid","previewImage","allowedTypes","FileImageTypes","id","uuid","validateRequired","validateFileTypesValid","validateFileSizeValid","vRules","result","validate","validationResult","useValidationField","handleDragStart","index","e","handleDragEnd","handleDragEnter","target","handleDragOver","handleDragLeave","handleDrop","draggedImg","openFileDialog","_a","onChangeInput","fileList","createFileImages","file","convertToMB","reader","f","removeFileImage","numberOfBytes","preview","item","_ctx","_cache","_openBlock","_createElementBlock","_createVNode","BLabel","_unref","isEmpty","_createCommentVNode","_Fragment","_renderList","$event","BImagePickerCloseButton","BButton","_withCtx","_createTextVNode","_toDisplayString","_createBlock","BErrorMessage","ImagePreview"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"design-system84.mjs","sources":["../src/components/BImagePicker/BImagePicker.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createVNode as _createVNode, unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \"vue\"\n\nconst _withScopeId = n => (_pushScopeId(\"data-v-fec0801f\"),n=n(),_popScopeId(),n)\nconst _hoisted_1 = { class: \"b-image-picker ds-w-full\" }\nconst _hoisted_2 = { class: \"ds-gap-2 ds-space-y-4 ds-rounded-lg ds-bg-white ds-p-4 ds-drop-shadow\" }\nconst _hoisted_3 = {\n key: 0,\n class: \"ds-flex ds-flex-wrap ds-justify-center ds-gap-1\"\n}\nconst _hoisted_4 = [\"onClick\", \"onDragenter\", \"onDragstart\", \"onDrop\"]\nconst _hoisted_5 = [\"src\"]\nconst _hoisted_6 = { class: \"ds-flex ds-flex-wrap ds-justify-center\" }\nconst _hoisted_7 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"svg\", {\n class: \"ds-absolute -ds-bottom-[3px] ds-left-0 ds-h-4 ds-w-4 ds-fill-primary-t\",\n viewBox: \"0 0 512 512\",\n xmlns: \"http://www.w3.org/2000/svg\"\n}, [\n /*#__PURE__*/_createElementVNode(\"path\", { d: \"M447.1 32h-384C28.64 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM111.1 96c26.51 0 48 21.49 48 48S138.5 192 111.1 192s-48-21.49-48-48S85.48 96 111.1 96zM446.1 407.6C443.3 412.8 437.9 416 432 416H82.01c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C142.1 290.4 146.9 288 152 288s9.916 2.441 12.93 6.574l32.46 44.51l93.3-139.1C293.7 194.7 298.7 192 304 192s10.35 2.672 13.31 7.125l128 192C448.6 396 448.9 402.3 446.1 407.6z\" })\n], -1))\nconst _hoisted_8 = [\"accept\", \"multiple\"]\n\nimport { FileImageTypes } from '@/constants/Common';\r\nimport type { FileItemRead } from '@/types';\r\nimport { isEmpty } from 'lodash-es';\r\nimport { v4 as uuid } from 'uuid';\r\nimport { computed, ref } from 'vue';\r\nimport { useI18n } from 'vue-i18n';\r\nimport BImagePickerCloseButton from './BImagePickerCloseButton.vue';\r\nimport ImagePreview from './BImagePreview.vue';\r\nimport type { ValidationRule } from '@/composables/Validation';\r\nimport { useValidationField } from '@/composables/Validation';\r\nimport BLabel from '../BLabel.vue';\r\nimport BButton from '../BButton.vue';\r\nimport BErrorMessage from '../BErrorMessage.vue';\r\n\r\n//#region Props\r\nexport interface Props {\r\n inputId?: string;\r\n modelValue: FileItemRead[];\r\n label?: string;\r\n multiple?: boolean;\r\n maxFileSize?: number;\r\n hideDetails?: boolean;\r\n required?: boolean;\r\n requiredErrorMessage?: string;\r\n validationRules?: ValidationRule[];\r\n}\r\n\r\n\nexport default /*#__PURE__*/_defineComponent({\n __name: 'BImagePicker',\n props: {\n inputId: { default: '' },\n modelValue: {},\n label: { default: '' },\n multiple: { type: Boolean, default: false },\n maxFileSize: { default: 20 },\n hideDetails: { type: Boolean, default: false },\n required: { type: Boolean, default: false },\n requiredErrorMessage: { default: '' },\n validationRules: { default: undefined }\n },\n emits: [\"change\", \"update:modelValue\"],\n setup(__props: any, { expose: __expose, emit }) {\n\nconst props = __props;\n\r\n// Drag & Drop: https://www.w3schools.com/jsref/event_ondragover.asp\r\n\r\n//#endregion\r\n\r\n//#region Events\r\n\r\n//#endregion\r\n\r\n//#region Data\r\nconst { t } = useI18n();\r\nconst inputRef = ref<HTMLInputElement | null>(null);\r\nconst draggedIndex = ref(0);\r\nconst value = computed({\r\n get() {\r\n return props.modelValue;\r\n },\r\n set(val) {\r\n emit('update:modelValue', val);\r\n },\r\n});\r\nconst fileTypesValid = ref(true);\r\nconst fileSizeValid = ref(true);\r\nconst previewImage = ref({\r\n visible: false,\r\n url: '',\r\n});\r\nconst allowedTypes = computed(() => FileImageTypes.join(', '));\r\nconst id = computed(() => props.inputId || `id-${uuid()}`);\r\nconst validateRequired: ValidationRule = {\r\n validateRule: (val: FileItemRead[]) => !!val && val.length > 0,\r\n errorMessage: () =>\r\n props.requiredErrorMessage || t('ds.global.field_required'),\r\n};\r\nconst validateFileTypesValid: ValidationRule = {\r\n validateRule: () => fileTypesValid.value,\r\n errorMessage: () =>\r\n t('ds.components.base.image_picker.file_types_valid', {\r\n types: allowedTypes.value,\r\n }),\r\n};\r\nconst validateFileSizeValid: ValidationRule = {\r\n validateRule: () => fileSizeValid.value,\r\n errorMessage: () =>\r\n t('ds.components.base.image_picker.file_size_valid', {\r\n size: props.maxFileSize,\r\n }),\r\n};\r\nconst vRules = computed(() => {\r\n let result: ValidationRule[] = [];\r\n\r\n if (props.required) {\r\n result.push(validateRequired);\r\n }\r\n if (props.validationRules) {\r\n result = result.concat(props.validationRules);\r\n }\r\n result.push(validateFileTypesValid);\r\n result.push(validateFileSizeValid);\r\n\r\n return result.length ? result : undefined;\r\n});\r\nconst { validate, validationResult } = useValidationField(\r\n id.value,\r\n value,\r\n vRules.value,\r\n);\r\n//#endregion\r\n\r\n//#region Methods\r\n/* Events fired on the drag target */\r\nconst handleDragStart = (index: number, e: DragEvent) => {\r\n draggedIndex.value = index;\r\n const target = e.target as HTMLDivElement;\r\n target.classList.add('dragging');\r\n e.dataTransfer!.effectAllowed = 'move';\r\n e.dataTransfer!.setData('index', index.toString());\r\n};\r\nconst handleDragEnd = (e: DragEvent) => {\r\n const target = e.target as HTMLDivElement;\r\n target.classList.remove('dragging');\r\n};\r\n/* Events fired on the drop target */\r\nconst handleDragEnter = (index: number, e: DragEvent) => {\r\n const target = e.target as HTMLDivElement;\r\n if (draggedIndex.value !== index) {\r\n target.classList.add('dropped-target');\r\n }\r\n};\r\nconst handleDragOver = (e: DragEvent) => {\r\n // By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element\r\n e.preventDefault();\r\n e.dataTransfer!.dropEffect = 'move';\r\n};\r\nconst handleDragLeave = (e: DragEvent) => {\r\n // When the draggable p element leaves the droptarget, reset the style\r\n const target = e.target as HTMLDivElement;\r\n target.classList.remove('dropped-target');\r\n};\r\nconst handleDrop = (index: number, e: DragEvent) => {\r\n e.preventDefault();\r\n const target = e.target as HTMLDivElement;\r\n target.classList.remove('dropped-target');\r\n const draggedIndex = parseInt(e.dataTransfer!.getData('index'));\r\n const draggedImg = value.value[draggedIndex];\r\n value.value.splice(draggedIndex, 1);\r\n value.value.splice(index, 0, draggedImg);\r\n\r\n emit('change');\r\n validate();\r\n};\r\nconst openFileDialog = () => {\r\n inputRef.value?.click();\r\n};\r\nconst onChangeInput = (e: any) => {\r\n let fileList: FileList = e.target.files || e.dataTransfer.files;\r\n if (!fileList.length) {\r\n return;\r\n }\r\n createFileImages(fileList);\r\n\r\n // Clear input's value so onChange event can work for the same files next picks\r\n if (inputRef.value) {\r\n inputRef.value.value = null as any;\r\n }\r\n};\r\nconst createFileImages = (fileList: FileList) => {\r\n Array.from(fileList).forEach((file) => {\r\n fileTypesValid.value = FileImageTypes.includes(file.type);\r\n fileSizeValid.value = convertToMB(file.size) <= props.maxFileSize;\r\n\r\n if (fileTypesValid.value && fileSizeValid.value) {\r\n let reader: any = new FileReader();\r\n\r\n reader.onload = (f: any) => {\r\n if (props.multiple) {\r\n value.value.push({\r\n url: f.target.result,\r\n file,\r\n type: file.type,\r\n });\r\n } else {\r\n value.value.splice(0, 1, {\r\n url: f.target.result,\r\n file,\r\n type: file.type,\r\n });\r\n }\r\n\r\n emit('change');\r\n validate();\r\n };\r\n\r\n reader.readAsDataURL(file);\r\n } else {\r\n validate();\r\n }\r\n });\r\n};\r\nconst removeFileImage = (e: Event, index: number) => {\r\n e.stopPropagation();\r\n value.value.splice(index, 1);\r\n\r\n emit('change');\r\n validate();\r\n};\r\nconst convertToMB = (numberOfBytes: number) => numberOfBytes / 1024 ** 2;\r\nconst preview = (item: FileItemRead) => {\r\n previewImage.value.url = item.url;\r\n previewImage.value.visible = true;\r\n};\r\n//#endregion\r\n\r\n__expose({ validate });\r\n\nreturn (_ctx: any,_cache: any) => {\n return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n _createVNode(BLabel, {\n label: props.label\n }, null, 8, [\"label\"]),\n _createElementVNode(\"div\", _hoisted_2, [\n (!_unref(isEmpty)(value.value))\n ? (_openBlock(), _createElementBlock(\"div\", _hoisted_3, [\n (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(value.value, (item, index) => {\n return (_openBlock(), _createElementBlock(\"div\", {\n key: index,\n class: \"b-image-picker__draggable ds-h-full ds-cursor-pointer ds-rounded-lg ds-transition-all hover:ds-ring-2 hover:ds-ring-primary-t\",\n draggable: \"true\",\n onClick: ($event: any) => (preview(item)),\n onDragend: handleDragEnd,\n onDragenter: ($event: any) => (handleDragEnter(index, $event)),\n onDragleave: handleDragLeave,\n onDragover: handleDragOver,\n onDragstart: ($event: any) => (handleDragStart(index, $event)),\n onDrop: ($event: any) => (handleDrop(index, $event))\n }, [\n _createElementVNode(\"img\", {\n src: item.url,\n alt: \"image\",\n class: \"ds-h-full ds-w-full ds-rounded-lg\"\n }, null, 8, _hoisted_5),\n _createVNode(BImagePickerCloseButton, {\n class: \"ds-right-1 ds-top-1 ds-h-8 ds-w-8\",\n onClick: (e) => removeFileImage(e, index)\n }, null, 8, [\"onClick\"])\n ], 40, _hoisted_4))\n }), 128))\n ]))\n : _createCommentVNode(\"\", true),\n _createElementVNode(\"div\", _hoisted_6, [\n _createVNode(BButton, { onClick: openFileDialog }, {\n default: _withCtx(() => [\n _createTextVNode(_toDisplayString(_ctx.$t('ds.components.base.image_picker.select_image')), 1)\n ]),\n appendIcon: _withCtx(() => [\n _hoisted_7\n ]),\n _: 1\n }),\n _createElementVNode(\"input\", {\n ref_key: \"inputRef\",\n ref: inputRef,\n accept: allowedTypes.value,\n multiple: props.multiple,\n class: \"ds-hidden\",\n type: \"file\",\n onChange: onChangeInput\n }, null, 40, _hoisted_8)\n ])\n ]),\n (!props.hideDetails)\n ? (_openBlock(), _createBlock(BErrorMessage, {\n key: 0,\n \"error-message\": _unref(validationResult).errorMessage(),\n class: \"mt-1\"\n }, null, 8, [\"error-message\"]))\n : _createCommentVNode(\"\", true),\n _createVNode(ImagePreview, {\n modelValue: previewImage.value.visible,\n \"onUpdate:modelValue\": _cache[0] || (_cache[0] = ($event: any) => ((previewImage.value.visible) = $event)),\n url: previewImage.value.url\n }, null, 8, [\"modelValue\", \"url\"])\n ]))\n}\n}\n\n})"],"names":["_withScopeId","_pushScopeId","n","_popScopeId","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_createElementVNode","_hoisted_8","_sfc_main","_defineComponent","__props","__expose","emit","props","t","useI18n","inputRef","ref","draggedIndex","value","computed","val","fileTypesValid","fileSizeValid","previewImage","allowedTypes","FileImageTypes","id","uuid","validateRequired","validateFileTypesValid","validateFileSizeValid","vRules","result","validate","validationResult","useValidationField","handleDragStart","index","e","handleDragEnd","handleDragEnter","target","handleDragOver","handleDragLeave","handleDrop","draggedImg","openFileDialog","_a","onChangeInput","fileList","createFileImages","file","convertToMB","reader","f","removeFileImage","numberOfBytes","preview","item","_ctx","_cache","_openBlock","_createElementBlock","_createVNode","BLabel","_unref","isEmpty","_createCommentVNode","_Fragment","_renderList","$event","BImagePickerCloseButton","BButton","_withCtx","_createTextVNode","_toDisplayString","_createBlock","BErrorMessage","ImagePreview"],"mappings":"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"}
|
package/dist/design-system87.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const e=require("vue"),h=require("./design-system30.js"),g=require("./design-system3.js"),V=require("./design-system29.js"),q=require("./design-system48.js"),B=require("./design-
|
|
1
|
+
"use strict";const e=require("vue"),h=require("./design-system30.js"),g=require("./design-system3.js"),V=require("./design-system29.js"),q=require("./design-system48.js"),B=require("./design-system95.js"),C=require("./design-system5.js"),E=require("./design-system93.js"),N={class:"b-currency-field"},R={class:"ds-relative"},I={key:0,class:"b-currency-field__prepend-icon ds-absolute ds-left-3 ds-top-0 ds-z-[1] ds-flex ds-h-full ds-cursor-pointer ds-items-center hover:ds-text-primary-t"},S=["id","autocomplete","disabled","placeholder","readonly","onKeyup"],M={key:1,class:"b-currency-field__append-icon ds-absolute ds-right-3 ds-top-0 ds-z-[1] ds-flex ds-h-full ds-cursor-pointer ds-items-center hover:ds-text-primary-t"},w=e.defineComponent({__name:"BCurrencyField",props:{inputId:{default:""},inputCssClass:{default:""},modelValue:{},label:{default:""},validationRules:{default:void 0},placeholder:{default:""},autocomplete:{type:Boolean,default:!1},required:{type:Boolean,default:!1},requiredErrorMessage:{default:""},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},hideDetails:{type:Boolean,default:!1},locale:{default:C.SupportedLocale["vi-VN"]}},emits:["press:enter","update:modelValue"],setup(i,{emit:a}){const t=i;let o;const{t:c}=q.useI18n(),u=e.ref(null),p={validateRule:s=>!!(s&&(s!=null&&s.trim())),errorMessage:()=>t.requiredErrorMessage||c("ds.global.field_required")},r=e.computed(()=>t.inputId||`id-${E()}`),l=e.computed({get(){return t.modelValue},set(s){a("update:modelValue",s)}}),m=e.computed(()=>[{"ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4]":t.disabled,"ds-text-black/[0.85]":!t.disabled,"ds-border-error focus:ds-ring-1 focus:ds-ring-error":!d.value.valid,"ds-border-black/[0.1] focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus":d.value.valid},t.inputCssClass]),f=e.computed(()=>{let s=[];return t.required&&s.push(p),t.validationRules&&(s=s.concat(t.validationRules)),s.length?s:void 0}),v=e.computed(()=>t.locale==="en-US"?{mask:"$num",blocks:{num:{mask:Number,thousandsSeparator:" "}}}:[{mask:""},{mask:"num VND",lazy:!1,blocks:{num:{mask:Number,thousandsSeparator:" "}}}]),{validate:k,validationResult:d}=g.useValidationField(r.value,l,f.value);e.watch(()=>t.locale,()=>{n()}),e.watch(()=>t.modelValue,s=>{s!=o.unmaskedValue&&(o.unmaskedValue=s.toString())});const _=()=>{k()},b=()=>{a("press:enter")},y=()=>{l.value=typeof l.value=="number"?+o.unmaskedValue:o.unmaskedValue},n=()=>{o&&o.destroy(),o=B(u.value,v.value),o.on("accept",y)};return e.onMounted(()=>{n(),o.unmaskedValue=l.value.toString()}),(s,$)=>(e.openBlock(),e.createElementBlock("div",N,[e.createVNode(h,{id:r.value,label:s.label,required:s.required},null,8,["id","label","required"]),e.createElementVNode("div",R,[s.$slots.prependIcon?(e.openBlock(),e.createElementBlock("div",I,[e.renderSlot(s.$slots,"prependIcon",{},void 0,!0)])):e.createCommentVNode("",!0),e.createElementVNode("input",{id:r.value,ref_key:"inputRef",ref:u,autocomplete:t.autocomplete?"on":"off",class:e.normalizeClass([m.value,"ds-block ds-h-[40px] ds-w-full ds-rounded-lg ds-border ds-px-3 ds-text-sm ds-drop-shadow-light"]),disabled:t.disabled,placeholder:t.placeholder,readonly:t.readonly,onKeyup:[_,e.withKeys(b,["enter"])]},null,42,S),s.$slots.appendIcon?(e.openBlock(),e.createElementBlock("div",M,[e.renderSlot(s.$slots,"appendIcon",{},void 0,!0)])):e.createCommentVNode("",!0)]),s.hideDetails?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(V,{key:0,"error-message":e.unref(d).errorMessage(),class:"ds-mt-1"},null,8,["error-message"]))]))}});module.exports=w;
|
|
2
2
|
//# sourceMappingURL=design-system87.js.map
|
package/dist/design-system87.mjs
CHANGED
|
@@ -3,9 +3,9 @@ import K from "./design-system30.mjs";
|
|
|
3
3
|
import { useValidationField as x } from "./design-system3.mjs";
|
|
4
4
|
import z from "./design-system29.mjs";
|
|
5
5
|
import { useI18n as D } from "./design-system48.mjs";
|
|
6
|
-
import U from "./design-
|
|
6
|
+
import U from "./design-system95.mjs";
|
|
7
7
|
import { SupportedLocale as F } from "./design-system5.mjs";
|
|
8
|
-
import A from "./design-
|
|
8
|
+
import A from "./design-system93.mjs";
|
|
9
9
|
const L = { class: "b-currency-field" }, O = { class: "ds-relative" }, j = {
|
|
10
10
|
key: 0,
|
|
11
11
|
class: "b-currency-field__prepend-icon ds-absolute ds-left-3 ds-top-0 ds-z-[1] ds-flex ds-h-full ds-cursor-pointer ds-items-center hover:ds-text-primary-t"
|
package/dist/design-system90.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./design-system89.js"),y=require("./design-system91.js"),Q=require("./design-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./design-system89.js"),y=require("./design-system91.js"),Q=require("./design-system94.js");/*!
|
|
2
2
|
* core-base v9.2.2
|
|
3
3
|
* (c) 2022 kazuya kawaguchi
|
|
4
4
|
* Released under the MIT License.
|
package/dist/design-system90.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { getGlobalThis as Fe, isObject as h, isArray as $, isPlainObject as M, isString as u, isBoolean as I, assign as H, isFunction as C, isRegExp as ee, warn as j, format as me, escapeHtml as te, inBrowser as K, mark as R, measure as B, isNumber as L, isEmptyObject as z, generateCodeFrame as Me, generateFormatCacheKey as be, isDate as ve, toDisplayString as he } from "./design-system89.mjs";
|
|
2
2
|
import { defaultOnError as Ie, baseCompile as Ce, createCompileError as Le, CompileErrorCodes as we } from "./design-system91.mjs";
|
|
3
|
-
import { IntlifyDevToolsHooks as ue } from "./design-
|
|
3
|
+
import { IntlifyDevToolsHooks as ue } from "./design-system94.mjs";
|
|
4
4
|
/*!
|
|
5
5
|
* core-base v9.2.2
|
|
6
6
|
* (c) 2022 kazuya kawaguchi
|