@7pmlabs/design-system 0.4.0 → 0.4.2

package/dist/design-system18.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"design-system18.mjs","sources":["../src/components/BMultiSelect.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createVNode as _createVNode, unref as _unref, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, renderList as _renderList, Fragment as _Fragment, toDisplayString as _toDisplayString, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, withModifiers as _withModifiers, vShow as _vShow, withDirectives as _withDirectives } from \"vue\"\n\nconst _hoisted_1 = { class: \"ds-absolute ds-right-3 ds-z-[1]\" }\nconst _hoisted_2 = /*#__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_3 = [\n  _hoisted_2\n]\nconst _hoisted_4 = [\"onClick\"]\nconst _hoisted_5 = /*#__PURE__*/_createElementVNode(\"path\", { d: \"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z\" }, null, -1)\nconst _hoisted_6 = [\n  _hoisted_5\n]\nconst _hoisted_7 = [\"id\", \"disabled\"]\nconst _hoisted_8 = /*#__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_9 = [\n  _hoisted_8\n]\nconst _hoisted_10 = [\"id\", \"data-cy\", \"data-ut\"]\nconst _hoisted_11 = { class: \"ds-max-h-72 ds-overflow-y-auto ds-rounded-lg ds-bg-white ds-shadow\" }\nconst _hoisted_12 = { class: \"ds-py-1 ds-text-sm ds-text-black/[0.85]\" }\nconst _hoisted_13 = [\"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 { 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 BCheckbox from './BCheckbox.vue';\r\nimport BErrorMessage from './BErrorMessage.vue';\r\nimport BLabel from './BLabel.vue';\r\nimport BTextField from './BTextField.vue';\r\nimport type { DisplayItem } from '@/types';\r\n\r\n//#region Props\r\nexport interface BMultiSelectProps {\r\n  inputId?: string;\r\n  modelValue: Array<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   * Show number of selected items.\r\n   */\r\n  showSelectedItemCount?: 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: 'BMultiSelect',\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    showSelectedItemCount: { 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// https://vuejs.org/guide/essentials/event-handling.html#event-modifiers\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: Array<string | number>) => !!val && val.length > 0,\r\n  errorMessage: () =>\r\n    props.requiredErrorMessage || t('ds.global.field_required'),\r\n};\r\nconst inputText = ref('');\r\nconst selectedItems = 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\nconst selectedItemCount = computed(() =>\r\n  value.value?.length > 1\r\n    ? ` (${t('ds.components.base.multi_select.selected_item_count', {\r\n        count: value.value?.length,\r\n      })})`\r\n    : '',\r\n);\r\nconst labelDisplay = computed(() =>\r\n  props.showSelectedItemCount\r\n    ? `${props.label}${selectedItemCount.value}`\r\n    : props.label,\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(\r\n  value,\r\n  () => {\r\n    ensureSelectedItems();\r\n  },\r\n  {\r\n    deep: true,\r\n  },\r\n);\r\nwatch(\r\n  () => props.items,\r\n  () => {\r\n    if (value.value.length !== 0 && selectedItems.value.length === 0) {\r\n      ensureSelectedItems();\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 ensureSelectedItems = () => {\r\n  selectedItems.value = value.value.map((v) => {\r\n    let item = selectedItems.value.find((i) => i.value === v);\r\n    if (!item) {\r\n      item = props.items.find((i) => i.value === v);\r\n    }\r\n    return { text: item?.text, value: v, cssClass: item?.cssClass };\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  const index = value.value.findIndex((v) => v === item.value);\r\n  if (index !== -1) {\r\n    value.value.splice(index, 1);\r\n  } else {\r\n    value.value.push(item.value);\r\n  }\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  inputText.value = '';\r\n};\r\nconst deselectItem = (item: DisplayItem) => {\r\n  const index = value.value.findIndex((v) => v === item.value);\r\n  if (index !== -1) {\r\n    value.value.splice(index, 1);\r\n    emit('change', item.value);\r\n    nextTick(() => {\r\n      validate();\r\n    });\r\n  }\r\n};\r\nconst init = () => {\r\n  if (props.items.length > 0) {\r\n    ensureSelectedItems();\r\n  }\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: labelDisplay.value,\n        required: _ctx.required\n      }, null, 8, [\"id\", \"label\", \"required\"]),\n      (props.allowInput)\n        ? (_openBlock(), _createElementBlock(\"div\", {\n            key: 0,\n            class: _normalizeClass([{\r\n          'ds-border-focus ds-ring-1 ds-ring-focus':\r\n            selectMenu.value && _unref(validationResult).valid,\r\n          'ds-ring-1 ds-ring-error': selectMenu.value && !_unref(validationResult).valid,\r\n          'ds-border-black/10': _unref(validationResult).valid,\r\n          'ds-border-error': !_unref(validationResult).valid,\r\n        }, \"ds-relative ds-flex ds-flex-wrap ds-items-center ds-gap-x-1 ds-rounded-lg ds-border ds-bg-white ds-px-3 ds-py-1 ds-drop-shadow-light\"])\n          }, [\n            _createElementVNode(\"div\", _hoisted_1, [\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                onClick: _cache[0] || (_cache[0] = ($event: any) => (inputRef.value?.focus()))\n              }, _hoisted_3, 2))\n            ]),\n            (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(selectedItems.value, (item, i) => {\n              return (_openBlock(), _createElementBlock(\"div\", {\n                key: `item${i}`,\n                class: \"ds-my-0.5 ds-flex-initial ds-space-x-1 ds-rounded-lg ds-bg-black/10 ds-px-2\"\n              }, [\n                _createElementVNode(\"span\", null, _toDisplayString(item.text), 1),\n                (_openBlock(), _createElementBlock(\"svg\", {\n                  class: \"ds-mb-1 ds-inline ds-h-4 ds-w-4 ds-cursor-pointer ds-fill-black/60 hover:ds-fill-black/40\",\n                  viewBox: \"0 0 512 512\",\n                  xmlns: \"http://www.w3.org/2000/svg\",\n                  onClick: ($event: any) => (deselectItem(item))\n                }, _hoisted_6, 8, _hoisted_4))\n              ]))\n            }), 128)),\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[1] || (_cache[1] = ($event: any) => ((inputText).value = $event)),\n                    onChangeInputText\n                  ],\n                  disabled: props.disabled,\n                  class: \"ds-flex-auto\",\n                  \"hide-details\": \"\",\n                  \"input-css-class\": \"ds-drop-shadow-none ds-border-none !ds-ring-0 ds-px-0 !ds-h-[30px] ds-pl-0\",\n                  onFocus: _cache[2] || (_cache[2] = ($event: any) => (selectMenu.value = true))\n                }, null, 8, [\"id\", \"modelValue\", \"disabled\"]))\n              : _createCommentVNode(\"\", true)\n          ], 2))\n        : (_openBlock(), _createElementBlock(\"button\", {\n            key: 1,\n            id: id.value,\n            class: _normalizeClass(btnCssClass.value),\n            disabled: _ctx.disabled,\n            type: \"button\",\n            onClick: _cache[3] || (_cache[3] = ($event: any) => (selectMenu.value = !selectMenu.value))\n          }, [\n            (selectedItems.value.length > 0)\n              ? (_openBlock(), _createElementBlock(\"span\", {\n                  key: 0,\n                  class: _normalizeClass([_ctx.valueCssClass, \"ds-truncate ds-text-sm\"])\n                }, _toDisplayString(selectedItems.value?.map((s) => s.text).join(', ')), 3))\n              : (_openBlock(), _createElementBlock(\"span\", {\n                  key: 1,\n                  class: _normalizeClass([_ctx.valueCssClass, \"ds-truncate ds-text-sm ds-text-black/[0.4]\"])\n                }, _toDisplayString(props.placeholder), 3)),\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_9, 2))\n          ], 10, _hoisted_7)),\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_11, [\n          _createElementVNode(\"ul\", _hoisted_12, [\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: _withModifiers(($event: any) => (onClickItem(item)), [\"prevent\"])\n              }, [\n                _createElementVNode(\"a\", {\n                  class: _normalizeClass([\r\n                  item.cssClass +\r\n                  `${\r\n                    selectedItems.value.some((s) => s.value === item.value)\r\n                      ? ' ds-bg-slate-100'\r\n                      : ''\r\n                  }`\r\n                , \"ds-flex ds-items-center ds-space-x-2 ds-px-4 ds-py-2 hover:ds-bg-slate-100\"])\n                }, [\n                  _createVNode(BCheckbox, {\n                    modelValue: value.value,\n                    \"onUpdate:modelValue\": _cache[4] || (_cache[4] = ($event: any) => ((value).value = $event)),\n                    value: item.value,\n                    size: \"sm\"\n                  }, null, 8, [\"modelValue\", \"value\"]),\n                  _createElementVNode(\"span\", null, _toDisplayString(item?.text), 1)\n                ], 2)\n              ], 8, _hoisted_13))\n            }), 128))\n          ])\n        ])\n      ], 10, _hoisted_10), [\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","_hoisted_12","_hoisted_13","_sfc_main","_defineComponent","__props","__expose","emit","props","selectEl","ref","inputRef","selectMenuEl","selectMenu","t","useI18n","validateRequired","val","inputText","selectedItems","id","computed","uuid","value","btnCssClass","result","validationResult","vRules","selectedItemCount","_a","_b","labelDisplay","validate","useValidationField","watch","lockScrollBody","ensureMenuPosition","unlockScrollBody","resetMenuPosition","ensureSelectedItems","v","item","i","initPressEscapeEventListener","closeOnEscapePressed","event","closeSelectMenu","initClickOutsideEventListener","closeOnClickOutside","r","onClickItem","index","nextTick","ensureMenuWidth","parentEl","menuEl","ensureVisiblePosition","resetPosition","onChangeInputText","text","deselectItem","onMounted","onBeforeUnmount","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","_createVNode","BLabel","_normalizeClass","_unref","$event","_Fragment","_renderList","_toDisplayString","_createBlock","BTextField","_createCommentVNode","s","_createTextVNode","_withDirectives","_withModifiers","BCheckbox","_vShow","BErrorMessage"],"mappings":"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"}
+{"version":3,"file":"design-system18.mjs","sources":["../src/components/BMultiSelect.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createVNode as _createVNode, unref as _unref, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, renderList as _renderList, Fragment as _Fragment, toDisplayString as _toDisplayString, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, withModifiers as _withModifiers, vShow as _vShow, withDirectives as _withDirectives } from \"vue\"\n\nconst _hoisted_1 = { class: \"ds-absolute ds-right-3 ds-z-[1]\" }\nconst _hoisted_2 = /*#__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_3 = [\n  _hoisted_2\n]\nconst _hoisted_4 = [\"onClick\"]\nconst _hoisted_5 = /*#__PURE__*/_createElementVNode(\"path\", { d: \"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z\" }, null, -1)\nconst _hoisted_6 = [\n  _hoisted_5\n]\nconst _hoisted_7 = [\"id\", \"disabled\"]\nconst _hoisted_8 = /*#__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_9 = [\n  _hoisted_8\n]\nconst _hoisted_10 = [\"id\", \"data-cy\", \"data-ut\"]\nconst _hoisted_11 = { class: \"ds-max-h-72 ds-overflow-y-auto ds-rounded-lg ds-bg-white ds-shadow\" }\nconst _hoisted_12 = { class: \"ds-py-1 ds-text-sm ds-text-black/[0.85]\" }\nconst _hoisted_13 = [\"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 { 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 BCheckbox from './BCheckbox.vue';\nimport BErrorMessage from './BErrorMessage.vue';\nimport BLabel from './BLabel.vue';\nimport BTextField from './BTextField.vue';\nimport type { DisplayItem } from '@/types';\n\n//#region Props\nexport interface BMultiSelectProps {\n  inputId?: string;\n  modelValue: Array<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   * Show number of selected items.\n   */\n  showSelectedItemCount?: boolean;\n  /**\n   * Allow to type to search.\n   */\n  allowInput?: boolean;\n}\n\n\nexport default /*#__PURE__*/_defineComponent({\n  __name: 'BMultiSelect',\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    showSelectedItemCount: { 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// https://vuejs.org/guide/essentials/event-handling.html#event-modifiers\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: Array<string | number>) => !!val && val.length > 0,\n  errorMessage: () =>\n    props.requiredErrorMessage || t('ds.global.field_required'),\n};\nconst inputText = ref('');\nconst selectedItems = 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});\nconst selectedItemCount = computed(() =>\n  value.value?.length > 1\n    ? ` (${t('ds.components.base.multi_select.selected_item_count', {\n        count: value.value?.length,\n      })})`\n    : '',\n);\nconst labelDisplay = computed(() =>\n  props.showSelectedItemCount\n    ? `${props.label}${selectedItemCount.value}`\n    : props.label,\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(\n  value,\n  () => {\n    ensureSelectedItems();\n  },\n  {\n    deep: true,\n  },\n);\nwatch(\n  () => props.items,\n  () => {\n    if (value.value.length !== 0 && selectedItems.value.length === 0) {\n      ensureSelectedItems();\n    }\n  },\n  {\n    deep: true,\n  },\n);\n//#endregion\n\n//#region Methods\nconst ensureSelectedItems = () => {\n  selectedItems.value = value.value.map((v) => {\n    let item = selectedItems.value.find((i) => i.value === v);\n    if (!item) {\n      item = props.items.find((i) => i.value === v);\n    }\n    return { text: item?.text, value: v, cssClass: item?.cssClass };\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  const index = value.value.findIndex((v) => v === item.value);\n  if (index !== -1) {\n    value.value.splice(index, 1);\n  } else {\n    value.value.push(item.value);\n  }\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  inputText.value = '';\n};\nconst deselectItem = (item: DisplayItem) => {\n  const index = value.value.findIndex((v) => v === item.value);\n  if (index !== -1) {\n    value.value.splice(index, 1);\n    emit('change', item.value);\n    nextTick(() => {\n      validate();\n    });\n  }\n};\nconst init = () => {\n  if (props.items.length > 0) {\n    ensureSelectedItems();\n  }\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: labelDisplay.value,\n        required: _ctx.required\n      }, null, 8, [\"id\", \"label\", \"required\"]),\n      (props.allowInput)\n        ? (_openBlock(), _createElementBlock(\"div\", {\n            key: 0,\n            class: _normalizeClass([{\n          'ds-border-focus ds-ring-1 ds-ring-focus':\n            selectMenu.value && _unref(validationResult).valid,\n          'ds-ring-1 ds-ring-error': selectMenu.value && !_unref(validationResult).valid,\n          'ds-border-black/10': _unref(validationResult).valid,\n          'ds-border-error': !_unref(validationResult).valid,\n        }, \"ds-relative ds-flex ds-flex-wrap ds-items-center ds-gap-x-1 ds-rounded-lg ds-border ds-bg-white ds-px-3 ds-py-1 ds-drop-shadow-light\"])\n          }, [\n            _createElementVNode(\"div\", _hoisted_1, [\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                onClick: _cache[0] || (_cache[0] = ($event: any) => (inputRef.value?.focus()))\n              }, _hoisted_3, 2))\n            ]),\n            (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(selectedItems.value, (item, i) => {\n              return (_openBlock(), _createElementBlock(\"div\", {\n                key: `item${i}`,\n                class: \"ds-my-0.5 ds-flex-initial ds-space-x-1 ds-rounded-lg ds-bg-black/10 ds-px-2\"\n              }, [\n                _createElementVNode(\"span\", null, _toDisplayString(item.text), 1),\n                (_openBlock(), _createElementBlock(\"svg\", {\n                  class: \"ds-mb-1 ds-inline ds-h-4 ds-w-4 ds-cursor-pointer ds-fill-black/60 hover:ds-fill-black/40\",\n                  viewBox: \"0 0 512 512\",\n                  xmlns: \"http://www.w3.org/2000/svg\",\n                  onClick: ($event: any) => (deselectItem(item))\n                }, _hoisted_6, 8, _hoisted_4))\n              ]))\n            }), 128)),\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[1] || (_cache[1] = ($event: any) => ((inputText).value = $event)),\n                    onChangeInputText\n                  ],\n                  disabled: props.disabled,\n                  class: \"ds-flex-auto\",\n                  \"hide-details\": \"\",\n                  \"input-css-class\": \"ds-drop-shadow-none ds-border-none !ds-ring-0 ds-px-0 !ds-h-[30px] ds-pl-0\",\n                  onFocus: _cache[2] || (_cache[2] = ($event: any) => (selectMenu.value = true))\n                }, null, 8, [\"id\", \"modelValue\", \"disabled\"]))\n              : _createCommentVNode(\"\", true)\n          ], 2))\n        : (_openBlock(), _createElementBlock(\"button\", {\n            key: 1,\n            id: id.value,\n            class: _normalizeClass(btnCssClass.value),\n            disabled: _ctx.disabled,\n            type: \"button\",\n            onClick: _cache[3] || (_cache[3] = ($event: any) => (selectMenu.value = !selectMenu.value))\n          }, [\n            (selectedItems.value.length > 0)\n              ? (_openBlock(), _createElementBlock(\"span\", {\n                  key: 0,\n                  class: _normalizeClass([_ctx.valueCssClass, \"ds-truncate ds-text-sm\"])\n                }, _toDisplayString(selectedItems.value?.map((s) => s.text).join(', ')), 3))\n              : (_openBlock(), _createElementBlock(\"span\", {\n                  key: 1,\n                  class: _normalizeClass([_ctx.valueCssClass, \"ds-truncate ds-text-sm ds-text-black/[0.4]\"])\n                }, _toDisplayString(props.placeholder), 3)),\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_9, 2))\n          ], 10, _hoisted_7)),\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_11, [\n          _createElementVNode(\"ul\", _hoisted_12, [\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: _withModifiers(($event: any) => (onClickItem(item)), [\"prevent\"])\n              }, [\n                _createElementVNode(\"a\", {\n                  class: _normalizeClass([\n                  item.cssClass +\n                  `${\n                    selectedItems.value.some((s) => s.value === item.value)\n                      ? ' ds-bg-slate-100'\n                      : ''\n                  }`\n                , \"ds-flex ds-items-center ds-space-x-2 ds-px-4 ds-py-2 hover:ds-bg-slate-100\"])\n                }, [\n                  _createVNode(BCheckbox, {\n                    modelValue: value.value,\n                    \"onUpdate:modelValue\": _cache[4] || (_cache[4] = ($event: any) => ((value).value = $event)),\n                    value: item.value,\n                    size: \"sm\"\n                  }, null, 8, [\"modelValue\", \"value\"]),\n                  _createElementVNode(\"span\", null, _toDisplayString(item?.text), 1)\n                ], 2)\n              ], 8, _hoisted_13))\n            }), 128))\n          ])\n        ])\n      ], 10, _hoisted_10), [\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","_hoisted_12","_hoisted_13","_sfc_main","_defineComponent","__props","__expose","emit","props","selectEl","ref","inputRef","selectMenuEl","selectMenu","t","useI18n","validateRequired","val","inputText","selectedItems","id","computed","uuid","value","btnCssClass","result","validationResult","vRules","selectedItemCount","_a","_b","labelDisplay","validate","useValidationField","watch","lockScrollBody","ensureMenuPosition","unlockScrollBody","resetMenuPosition","ensureSelectedItems","v","item","i","initPressEscapeEventListener","closeOnEscapePressed","event","closeSelectMenu","initClickOutsideEventListener","closeOnClickOutside","r","onClickItem","index","nextTick","ensureMenuWidth","parentEl","menuEl","ensureVisiblePosition","resetPosition","onChangeInputText","text","deselectItem","onMounted","onBeforeUnmount","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","_createVNode","BLabel","_normalizeClass","_unref","$event","_Fragment","_renderList","_toDisplayString","_createBlock","BTextField","_createCommentVNode","s","_createTextVNode","_withDirectives","_withModifiers","BCheckbox","_vShow","BErrorMessage"],"mappings":"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"}

package/dist/design-system181.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("./design-system202.js"),s=require("./design-system189.js"),t=require("./design-system168.js");function a(){this.size=0,this.__data__={hash:new e,map:new(t||s),string:new e}}module.exports=a;
+"use strict";const e=require("./design-system202.js"),s=require("./design-system189.js"),t=require("./design-system165.js");function a(){this.size=0,this.__data__={hash:new e,map:new(t||s),string:new e}}module.exports=a;
 //# sourceMappingURL=design-system181.js.map

package/dist/design-system181.mjs

@@ -1,6 +1,6 @@
 import a from "./design-system202.mjs";
 import t from "./design-system189.mjs";
-import e from "./design-system168.mjs";
+import e from "./design-system165.mjs";
 function o() {
   this.size = 0, this.__data__ = {
     hash: new a(),

package/dist/design-system186.js

@@ -1,2 +1,2 @@
-"use strict";const u=require("./design-system159.js"),a=require("./design-system113.js");function i(r,e,t){var s=e(r);return a(r)?s:u(s,t(r))}module.exports=i;
+"use strict";const u=require("./design-system159.js"),a=require("./design-system117.js");function i(r,e,t){var s=e(r);return a(r)?s:u(s,t(r))}module.exports=i;
 //# sourceMappingURL=design-system186.js.map

package/dist/design-system186.mjs

@@ -1,5 +1,5 @@
 import e from "./design-system159.mjs";
-import u from "./design-system113.mjs";
+import u from "./design-system117.mjs";
 function l(r, s, t) {
   var a = s(r);
   return u(r) ? a : e(a, t(r));

package/dist/design-system187.js

@@ -1,2 +1,2 @@
-"use strict";const t=require("./design-system159.js"),s=require("./design-system175.js"),n=require("./design-system195.js"),o=require("./design-system137.js");var u=Object.getOwnPropertySymbols,y=u?function(r){for(var e=[];r;)t(e,n(r)),r=s(r);return e}:o;const i=y;module.exports=i;
+"use strict";const t=require("./design-system159.js"),s=require("./design-system175.js"),n=require("./design-system195.js"),o=require("./design-system141.js");var u=Object.getOwnPropertySymbols,y=u?function(r){for(var e=[];r;)t(e,n(r)),r=s(r);return e}:o;const i=y;module.exports=i;
 //# sourceMappingURL=design-system187.js.map

package/dist/design-system187.mjs

@@ -1,7 +1,7 @@
 import o from "./design-system159.mjs";
 import m from "./design-system175.mjs";
 import e from "./design-system195.mjs";
-import s from "./design-system137.mjs";
+import s from "./design-system141.mjs";
 var a = Object.getOwnPropertySymbols, y = a ? function(r) {
   for (var t = []; r; )
     o(t, e(r)), r = m(r);

package/dist/design-system19.js

@@ -1,2 +1,2 @@
-"use strict";const t=require("vue"),A=require("./design-system29.js"),K=require("./design-system3.js"),P=require("./design-system48.js"),N=require("./design-system97.js"),$=require("./design-system98.js"),L=require("./design-system99.js"),S={class:"ds-flex ds-items-center ds-justify-center ds-space-x-2"},W=t.defineComponent({__name:"BOtpField",props:{inputId:{default:""},modelValue:{default:""},numInputs:{default:6},focusIndex:{default:void 0},disabled:{type:Boolean,default:!1},inputCssClass:{default:""},validationRules:{default:void 0},required:{type:Boolean,default:!1},requiredErrorMessage:{default:""},hideDetails:{type:Boolean,default:!1}},emits:["complete","change","update:focusIndex","update:modelValue"],setup(b,{expose:k,emit:l}){const s=b,{t:B}=P.useI18n(),O={validateRule:e=>!!e,errorMessage:()=>s.requiredErrorMessage||B("ds.global.field_required")},i=t.ref(0),p=t.ref([]),f=t.ref(null),x=e=>{u.value=e},q=()=>{u.value=-1},y=t.computed(()=>s.inputId||`id-${$()}`),n=t.computed({get(){return s.modelValue.split("")},set(e){l("update:modelValue",e.join(""))}}),C=t.computed(()=>s.modelValue),u=t.computed({get(){return s.focusIndex!==void 0?s.focusIndex:i.value},set(e){s.focusIndex!==void 0?l("update:focusIndex",e):i.value=e}}),D=t.computed(()=>{let e=[];return s.required&&e.push(O),s.validationRules&&(e=e.concat(s.validationRules)),e.length?e:void 0}),V=t.computed(()=>[s.disabled?"ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4]":"ds-text-black/[0.85]",m.value.valid?"ds-border-black/[0.1] focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus":"ds-border-error focus:ds-ring-1 focus:ds-ring-error",s.inputCssClass]),{validate:v,validationResult:m}=K.useValidationField(y.value,C,D.value),R=()=>{f.value[u.value].focus()},h=()=>n.value.join("").length===s.numInputs?l("complete",n.value.join("")):"Wait until the user enters the required number of characters",c=e=>{u.value=Math.max(Math.min(s.numInputs-1,e),0)},g=()=>{c(u.value+1)},I=()=>{c(u.value-1)},d=e=>{p.value=[...n.value],n.value[u.value]=e,n.value=L(n.value);const o=p.value.join(""),r=n.value.join("");o!==r&&(l("change",r),h())},F=e=>{e.preventDefault();const o=e.clipboardData.getData("text/plain").slice(0,s.numInputs-u.value).split("");if(!o.join("").match(/^\d+$/))return"Invalid pasted data";const a=n.value.slice(0,u.value).concat(o);return a.slice(0,s.numInputs).forEach((_,w)=>{n.value[w]=_}),c(a.slice(0,s.numInputs).length),l("update:modelValue",n.value.join("")),h()},j=e=>{d(e),g()},E=e=>{switch(e.key){case"Backspace":e.preventDefault(),d(""),I();break;case"Delete":e.preventDefault(),d("");break;case"ArrowLeft":e.preventDefault(),I();break;case"ArrowRight":e.preventDefault(),g();break}},M=()=>{v()};return k({validate:v,focus:R}),(e,o)=>(t.openBlock(),t.createElementBlock("div",null,[t.createElementVNode("div",S,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.numInputs,(r,a)=>(t.openBlock(),t.createBlock(N,{key:a,ref_for:!0,ref_key:"boxRefs",ref:f,class:t.normalizeClass(V.value),focus:u.value===a,"is-disabled":e.disabled,value:n.value[a],onOnChange:j,onOnKeydown:E,onOnKeyup:M,onOnPaste:F,onOnFocus:_=>x(a),onOnBlur:q},null,8,["class","focus","is-disabled","value","onOnFocus"]))),128))]),e.hideDetails?t.createCommentVNode("",!0):(t.openBlock(),t.createBlock(A,{key:0,"error-message":t.unref(m).errorMessage(),class:"ds-mt-1"},null,8,["error-message"]))]))}});module.exports=W;
+"use strict";const t=require("vue"),A=require("./design-system29.js"),K=require("./design-system3.js"),P=require("./design-system48.js"),N=require("./design-system99.js"),$=require("./design-system95.js"),L=require("./design-system100.js"),S={class:"ds-flex ds-items-center ds-justify-center ds-space-x-2"},W=t.defineComponent({__name:"BOtpField",props:{inputId:{default:""},modelValue:{default:""},numInputs:{default:6},focusIndex:{default:void 0},disabled:{type:Boolean,default:!1},inputCssClass:{default:""},validationRules:{default:void 0},required:{type:Boolean,default:!1},requiredErrorMessage:{default:""},hideDetails:{type:Boolean,default:!1}},emits:["complete","change","update:focusIndex","update:modelValue"],setup(b,{expose:k,emit:l}){const s=b,{t:B}=P.useI18n(),O={validateRule:e=>!!e,errorMessage:()=>s.requiredErrorMessage||B("ds.global.field_required")},i=t.ref(0),p=t.ref([]),f=t.ref(null),x=e=>{u.value=e},q=()=>{u.value=-1},y=t.computed(()=>s.inputId||`id-${$()}`),n=t.computed({get(){return s.modelValue.split("")},set(e){l("update:modelValue",e.join(""))}}),C=t.computed(()=>s.modelValue),u=t.computed({get(){return s.focusIndex!==void 0?s.focusIndex:i.value},set(e){s.focusIndex!==void 0?l("update:focusIndex",e):i.value=e}}),D=t.computed(()=>{let e=[];return s.required&&e.push(O),s.validationRules&&(e=e.concat(s.validationRules)),e.length?e:void 0}),V=t.computed(()=>[s.disabled?"ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4]":"ds-text-black/[0.85]",m.value.valid?"ds-border-black/[0.1] focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus":"ds-border-error focus:ds-ring-1 focus:ds-ring-error",s.inputCssClass]),{validate:v,validationResult:m}=K.useValidationField(y.value,C,D.value),R=()=>{f.value[u.value].focus()},h=()=>n.value.join("").length===s.numInputs?l("complete",n.value.join("")):"Wait until the user enters the required number of characters",c=e=>{u.value=Math.max(Math.min(s.numInputs-1,e),0)},g=()=>{c(u.value+1)},I=()=>{c(u.value-1)},d=e=>{p.value=[...n.value],n.value[u.value]=e,n.value=L(n.value);const o=p.value.join(""),r=n.value.join("");o!==r&&(l("change",r),h())},F=e=>{e.preventDefault();const o=e.clipboardData.getData("text/plain").slice(0,s.numInputs-u.value).split("");if(!o.join("").match(/^\d+$/))return"Invalid pasted data";const a=n.value.slice(0,u.value).concat(o);return a.slice(0,s.numInputs).forEach((_,w)=>{n.value[w]=_}),c(a.slice(0,s.numInputs).length),l("update:modelValue",n.value.join("")),h()},j=e=>{d(e),g()},E=e=>{switch(e.key){case"Backspace":e.preventDefault(),d(""),I();break;case"Delete":e.preventDefault(),d("");break;case"ArrowLeft":e.preventDefault(),I();break;case"ArrowRight":e.preventDefault(),g();break}},M=()=>{v()};return k({validate:v,focus:R}),(e,o)=>(t.openBlock(),t.createElementBlock("div",null,[t.createElementVNode("div",S,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.numInputs,(r,a)=>(t.openBlock(),t.createBlock(N,{key:a,ref_for:!0,ref_key:"boxRefs",ref:f,class:t.normalizeClass(V.value),focus:u.value===a,"is-disabled":e.disabled,value:n.value[a],onOnChange:j,onOnKeydown:E,onOnKeyup:M,onOnPaste:F,onOnFocus:_=>x(a),onOnBlur:q},null,8,["class","focus","is-disabled","value","onOnFocus"]))),128))]),e.hideDetails?t.createCommentVNode("",!0):(t.openBlock(),t.createBlock(A,{key:0,"error-message":t.unref(m).errorMessage(),class:"ds-mt-1"},null,8,["error-message"]))]))}});module.exports=W;
 //# sourceMappingURL=design-system19.js.map

package/dist/design-system19.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system19.js","sources":["../src/components/BOtpField/BOtpField.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass, createBlock as _createBlock, createElementVNode as _createElementVNode, unref as _unref, createCommentVNode as _createCommentVNode } from \"vue\"\n\nconst _hoisted_1 = { class: \"ds-flex ds-items-center ds-justify-center ds-space-x-2\" }\n\nimport BErrorMessage from '@/components/BErrorMessage.vue';\r\nimport {\r\n  useValidationField,\r\n  type ValidationRule,\r\n} from '@/composables/Validation';\r\nimport { cloneDeep } from 'lodash-es';\r\nimport { v4 as uuid } from 'uuid';\r\nimport { computed, ref } from 'vue';\r\nimport { useI18n } from 'vue-i18n';\r\nimport BOtpFieldBox from './BOtpFieldBox.vue';\r\n\r\n//#region Props\r\nexport interface BOtpFieldProps {\r\n  inputId?: string;\r\n  modelValue?: string;\r\n  /**\r\n   * Number of input boxes.\r\n   */\r\n  numInputs?: number;\r\n  /**\r\n   * Index of input box to be focused.\r\n   */\r\n  focusIndex?: number;\r\n  disabled?: boolean;\r\n  inputCssClass?: 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\r\n\nexport default /*#__PURE__*/_defineComponent({\n  __name: 'BOtpField',\n  props: {\n    inputId: { default: '' },\n    modelValue: { default: '' },\n    numInputs: { default: 6 },\n    focusIndex: { default: undefined },\n    disabled: { type: Boolean, default: false },\n    inputCssClass: { default: '' },\n    validationRules: { default: undefined },\n    required: { type: Boolean, default: false },\n    requiredErrorMessage: { default: '' },\n    hideDetails: { type: Boolean, default: false }\n  },\n  emits: [\"complete\", \"change\", \"update:focusIndex\", \"update:modelValue\"],\n  setup(__props: any, { expose: __expose, emit }) {\n\nconst props = __props;\n\r\n// Sourcecode: https://github.com/ejirocodes/vue3-otp-input\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 validateRequired: ValidationRule = {\r\n  validateRule: (val: string) => !!val,\r\n  errorMessage: () =>\r\n    props.requiredErrorMessage || t('ds.global.field_required'),\r\n};\r\nconst fIndex = ref(0);\r\nconst oldOtp = ref<any[]>([]);\r\nconst boxRefs = ref<Array<InstanceType<typeof BOtpFieldBox>> | null>(null);\r\nconst handleOnFocus = (index: number) => {\r\n  focusIndexValue.value = index;\r\n};\r\nconst handleOnBlur = () => {\r\n  focusIndexValue.value = -1;\r\n};\r\nconst id = computed(() => props.inputId || `id-${uuid()}`);\r\nconst value = computed<any[]>({\r\n  get() {\r\n    return props.modelValue.split('');\r\n  },\r\n  set(val: any) {\r\n    emit('update:modelValue', val.join(''));\r\n  },\r\n});\r\nconst originalValue = computed(() => props.modelValue);\r\nconst focusIndexValue = computed({\r\n  get() {\r\n    return props.focusIndex !== undefined ? props.focusIndex : fIndex.value;\r\n  },\r\n  set(val: number) {\r\n    if (props.focusIndex !== undefined) {\r\n      emit('update:focusIndex', val);\r\n    } else {\r\n      fIndex.value = val;\r\n    }\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\r\n  return result.length ? result : undefined;\r\n});\r\nconst inputCssClassValue = computed(() => [\r\n  ...[\r\n    props.disabled\r\n      ? 'ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4]'\r\n      : 'ds-text-black/[0.85]',\r\n    validationResult.value.valid\r\n      ? 'ds-border-black/[0.1] focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus'\r\n      : 'ds-border-error focus:ds-ring-1 focus:ds-ring-error',\r\n  ],\r\n  props.inputCssClass,\r\n]);\r\n\r\nconst { validate, validationResult } = useValidationField(\r\n  id.value,\r\n  originalValue,\r\n  vRules.value,\r\n);\r\n//#endregion\r\n\r\n//#region Methods\r\nconst focus = () => {\r\n  boxRefs.value![focusIndexValue.value].focus();\r\n};\r\nconst checkFilledAllInputs = () => {\r\n  if (value.value.join('').length === props.numInputs) {\r\n    return emit('complete', value.value.join(''));\r\n  }\r\n  return 'Wait until the user enters the required number of characters';\r\n};\r\n// Focus on input by index\r\nconst focusInput = (input: number) => {\r\n  focusIndexValue.value = Math.max(Math.min(props.numInputs - 1, input), 0);\r\n};\r\n// Focus on next input\r\nconst focusNextInput = () => {\r\n  focusInput(focusIndexValue.value + 1);\r\n};\r\n// Focus on previous input\r\nconst focusPrevInput = () => {\r\n  focusInput(focusIndexValue.value - 1);\r\n};\r\n// Change OTP value at focused input\r\nconst changeCodeAtFocus = (val: number | string) => {\r\n  oldOtp.value = [...value.value];\r\n\r\n  value.value[focusIndexValue.value] = val;\r\n  value.value = cloneDeep(value.value);\r\n\r\n  const oldOtpStr = oldOtp.value.join('');\r\n  const otpStr = value.value.join('');\r\n  if (oldOtpStr !== otpStr) {\r\n    emit('change', otpStr);\r\n    checkFilledAllInputs();\r\n  }\r\n};\r\n// Handle pasted OTP\r\nconst handleOnPaste = (event: any) => {\r\n  event.preventDefault();\r\n  const pastedData = event.clipboardData\r\n    .getData('text/plain')\r\n    .slice(0, props.numInputs - focusIndexValue.value)\r\n    .split('');\r\n  if (!pastedData.join('').match(/^\\d+$/)) {\r\n    return 'Invalid pasted data';\r\n  }\r\n\r\n  // Paste data from focused input onwards\r\n  const currentCharsInOtp = value.value.slice(0, focusIndexValue.value);\r\n  const combinedWithPastedData = currentCharsInOtp.concat(pastedData);\r\n\r\n  combinedWithPastedData.slice(0, props.numInputs).forEach((val, i) => {\r\n    value.value[i] = val;\r\n  });\r\n\r\n  focusInput(combinedWithPastedData.slice(0, props.numInputs).length);\r\n\r\n  // Update modelValue when data is pasted from keyboard\r\n  emit('update:modelValue', value.value.join(''));\r\n  // Check if `complete`\r\n  return checkFilledAllInputs();\r\n};\r\nconst handleOnChange = (val: string) => {\r\n  changeCodeAtFocus(val);\r\n  focusNextInput();\r\n};\r\n// Handle cases of backspace, delete, left arrow, right arrow\r\nconst handleOnKeyDown = (event: KeyboardEvent) => {\r\n  switch (event.key) {\r\n    case 'Backspace':\r\n      event.preventDefault();\r\n      changeCodeAtFocus('');\r\n      focusPrevInput();\r\n      break;\r\n    case 'Delete':\r\n      event.preventDefault();\r\n      changeCodeAtFocus('');\r\n      break;\r\n    case 'ArrowLeft':\r\n      event.preventDefault();\r\n      focusPrevInput();\r\n      break;\r\n    case 'ArrowRight':\r\n      event.preventDefault();\r\n      focusNextInput();\r\n      break;\r\n    default:\r\n      break;\r\n  }\r\n};\r\nconst handleOnKeyUp = () => {\r\n  validate();\r\n};\r\n//#endregion\r\n\r\n__expose({ validate, focus });\r\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", null, [\n    _createElementVNode(\"div\", _hoisted_1, [\n      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.numInputs, (_, i) => {\n        return (_openBlock(), _createBlock(BOtpFieldBox, {\n          key: i,\n          ref_for: true,\n          ref_key: \"boxRefs\",\n          ref: boxRefs,\n          class: _normalizeClass(inputCssClassValue.value),\n          focus: focusIndexValue.value === i,\n          \"is-disabled\": _ctx.disabled,\n          value: value.value[i],\n          onOnChange: handleOnChange,\n          onOnKeydown: handleOnKeyDown,\n          onOnKeyup: handleOnKeyUp,\n          onOnPaste: handleOnPaste,\n          onOnFocus: ($event: any) => (handleOnFocus(i)),\n          onOnBlur: handleOnBlur\n        }, null, 8, [\"class\", \"focus\", \"is-disabled\", \"value\", \"onOnFocus\"]))\n      }), 128))\n    ]),\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","_sfc_main","_defineComponent","__props","__expose","emit","props","t","useI18n","validateRequired","val","fIndex","ref","oldOtp","boxRefs","handleOnFocus","index","focusIndexValue","handleOnBlur","id","computed","uuid","value","originalValue","vRules","result","inputCssClassValue","validationResult","validate","useValidationField","focus","checkFilledAllInputs","focusInput","input","focusNextInput","focusPrevInput","changeCodeAtFocus","cloneDeep","oldOtpStr","otpStr","handleOnPaste","event","pastedData","combinedWithPastedData","i","handleOnChange","handleOnKeyDown","handleOnKeyUp","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","_","_createBlock","BOtpFieldBox","_normalizeClass","$event","_createCommentVNode","BErrorMessage","_unref"],"mappings":"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"}
+{"version":3,"file":"design-system19.js","sources":["../src/components/BOtpField/BOtpField.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass, createBlock as _createBlock, createElementVNode as _createElementVNode, unref as _unref, createCommentVNode as _createCommentVNode } from \"vue\"\n\nconst _hoisted_1 = { class: \"ds-flex ds-items-center ds-justify-center ds-space-x-2\" }\n\nimport BErrorMessage from '@/components/BErrorMessage.vue';\nimport {\n  useValidationField,\n  type ValidationRule,\n} from '@/composables/Validation';\nimport { cloneDeep } from 'lodash-es';\nimport { v4 as uuid } from 'uuid';\nimport { computed, ref } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport BOtpFieldBox from './BOtpFieldBox.vue';\n\n//#region Props\nexport interface BOtpFieldProps {\n  inputId?: string;\n  modelValue: string;\n  /**\n   * Number of input boxes.\n   */\n  numInputs?: number;\n  /**\n   * Index of input box to be focused.\n   */\n  focusIndex?: number;\n  disabled?: boolean;\n  inputCssClass?: 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\n\nexport default /*#__PURE__*/_defineComponent({\n  __name: 'BOtpField',\n  props: {\n    inputId: { default: '' },\n    modelValue: { default: '' },\n    numInputs: { default: 6 },\n    focusIndex: { default: undefined },\n    disabled: { type: Boolean, default: false },\n    inputCssClass: { default: '' },\n    validationRules: { default: undefined },\n    required: { type: Boolean, default: false },\n    requiredErrorMessage: { default: '' },\n    hideDetails: { type: Boolean, default: false }\n  },\n  emits: [\"complete\", \"change\", \"update:focusIndex\", \"update:modelValue\"],\n  setup(__props: any, { expose: __expose, emit }) {\n\nconst props = __props;\n\n// Sourcecode: https://github.com/ejirocodes/vue3-otp-input\n\n//#endregion\n\n//#region Events\n\n//#endregion\n\n//#region Data\nconst { t } = useI18n();\nconst validateRequired: ValidationRule = {\n  validateRule: (val: string) => !!val,\n  errorMessage: () =>\n    props.requiredErrorMessage || t('ds.global.field_required'),\n};\nconst fIndex = ref(0);\nconst oldOtp = ref<any[]>([]);\nconst boxRefs = ref<Array<InstanceType<typeof BOtpFieldBox>> | null>(null);\nconst handleOnFocus = (index: number) => {\n  focusIndexValue.value = index;\n};\nconst handleOnBlur = () => {\n  focusIndexValue.value = -1;\n};\nconst id = computed(() => props.inputId || `id-${uuid()}`);\nconst value = computed<any[]>({\n  get() {\n    return props.modelValue.split('');\n  },\n  set(val: any) {\n    emit('update:modelValue', val.join(''));\n  },\n});\nconst originalValue = computed(() => props.modelValue);\nconst focusIndexValue = computed({\n  get() {\n    return props.focusIndex !== undefined ? props.focusIndex : fIndex.value;\n  },\n  set(val: number) {\n    if (props.focusIndex !== undefined) {\n      emit('update:focusIndex', val);\n    } else {\n      fIndex.value = val;\n    }\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\n  return result.length ? result : undefined;\n});\nconst inputCssClassValue = computed(() => [\n  ...[\n    props.disabled\n      ? 'ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4]'\n      : 'ds-text-black/[0.85]',\n    validationResult.value.valid\n      ? 'ds-border-black/[0.1] focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus'\n      : 'ds-border-error focus:ds-ring-1 focus:ds-ring-error',\n  ],\n  props.inputCssClass,\n]);\n\nconst { validate, validationResult } = useValidationField(\n  id.value,\n  originalValue,\n  vRules.value,\n);\n//#endregion\n\n//#region Methods\nconst focus = () => {\n  boxRefs.value![focusIndexValue.value].focus();\n};\nconst checkFilledAllInputs = () => {\n  if (value.value.join('').length === props.numInputs) {\n    return emit('complete', value.value.join(''));\n  }\n  return 'Wait until the user enters the required number of characters';\n};\n// Focus on input by index\nconst focusInput = (input: number) => {\n  focusIndexValue.value = Math.max(Math.min(props.numInputs - 1, input), 0);\n};\n// Focus on next input\nconst focusNextInput = () => {\n  focusInput(focusIndexValue.value + 1);\n};\n// Focus on previous input\nconst focusPrevInput = () => {\n  focusInput(focusIndexValue.value - 1);\n};\n// Change OTP value at focused input\nconst changeCodeAtFocus = (val: number | string) => {\n  oldOtp.value = [...value.value];\n\n  value.value[focusIndexValue.value] = val;\n  value.value = cloneDeep(value.value);\n\n  const oldOtpStr = oldOtp.value.join('');\n  const otpStr = value.value.join('');\n  if (oldOtpStr !== otpStr) {\n    emit('change', otpStr);\n    checkFilledAllInputs();\n  }\n};\n// Handle pasted OTP\nconst handleOnPaste = (event: any) => {\n  event.preventDefault();\n  const pastedData = event.clipboardData\n    .getData('text/plain')\n    .slice(0, props.numInputs - focusIndexValue.value)\n    .split('');\n  if (!pastedData.join('').match(/^\\d+$/)) {\n    return 'Invalid pasted data';\n  }\n\n  // Paste data from focused input onwards\n  const currentCharsInOtp = value.value.slice(0, focusIndexValue.value);\n  const combinedWithPastedData = currentCharsInOtp.concat(pastedData);\n\n  combinedWithPastedData.slice(0, props.numInputs).forEach((val, i) => {\n    value.value[i] = val;\n  });\n\n  focusInput(combinedWithPastedData.slice(0, props.numInputs).length);\n\n  // Update modelValue when data is pasted from keyboard\n  emit('update:modelValue', value.value.join(''));\n  // Check if `complete`\n  return checkFilledAllInputs();\n};\nconst handleOnChange = (val: string) => {\n  changeCodeAtFocus(val);\n  focusNextInput();\n};\n// Handle cases of backspace, delete, left arrow, right arrow\nconst handleOnKeyDown = (event: KeyboardEvent) => {\n  switch (event.key) {\n    case 'Backspace':\n      event.preventDefault();\n      changeCodeAtFocus('');\n      focusPrevInput();\n      break;\n    case 'Delete':\n      event.preventDefault();\n      changeCodeAtFocus('');\n      break;\n    case 'ArrowLeft':\n      event.preventDefault();\n      focusPrevInput();\n      break;\n    case 'ArrowRight':\n      event.preventDefault();\n      focusNextInput();\n      break;\n    default:\n      break;\n  }\n};\nconst handleOnKeyUp = () => {\n  validate();\n};\n//#endregion\n\n__expose({ validate, focus });\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", null, [\n    _createElementVNode(\"div\", _hoisted_1, [\n      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.numInputs, (_, i) => {\n        return (_openBlock(), _createBlock(BOtpFieldBox, {\n          key: i,\n          ref_for: true,\n          ref_key: \"boxRefs\",\n          ref: boxRefs,\n          class: _normalizeClass(inputCssClassValue.value),\n          focus: focusIndexValue.value === i,\n          \"is-disabled\": _ctx.disabled,\n          value: value.value[i],\n          onOnChange: handleOnChange,\n          onOnKeydown: handleOnKeyDown,\n          onOnKeyup: handleOnKeyUp,\n          onOnPaste: handleOnPaste,\n          onOnFocus: ($event: any) => (handleOnFocus(i)),\n          onOnBlur: handleOnBlur\n        }, null, 8, [\"class\", \"focus\", \"is-disabled\", \"value\", \"onOnFocus\"]))\n      }), 128))\n    ]),\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","_sfc_main","_defineComponent","__props","__expose","emit","props","t","useI18n","validateRequired","val","fIndex","ref","oldOtp","boxRefs","handleOnFocus","index","focusIndexValue","handleOnBlur","id","computed","uuid","value","originalValue","vRules","result","inputCssClassValue","validationResult","validate","useValidationField","focus","checkFilledAllInputs","focusInput","input","focusNextInput","focusPrevInput","changeCodeAtFocus","cloneDeep","oldOtpStr","otpStr","handleOnPaste","event","pastedData","combinedWithPastedData","i","handleOnChange","handleOnKeyDown","handleOnKeyUp","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","_","_createBlock","BOtpFieldBox","_normalizeClass","$event","_createCommentVNode","BErrorMessage","_unref"],"mappings":"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"}

package/dist/design-system19.mjs

@@ -2,9 +2,9 @@ import { defineComponent as N, ref as f, computed as l, openBlock as d, createEl
 import H from "./design-system29.mjs";
 import { useValidationField as J } from "./design-system3.mjs";
 import { useI18n as Q } from "./design-system48.mjs";
-import T from "./design-system97.mjs";
-import X from "./design-system98.mjs";
-import Y from "./design-system99.mjs";
+import T from "./design-system99.mjs";
+import X from "./design-system95.mjs";
+import Y from "./design-system100.mjs";
 const Z = { class: "ds-flex ds-items-center ds-justify-center ds-space-x-2" }, ue = /* @__PURE__ */ N({
   __name: "BOtpField",
   props: {

package/dist/design-system19.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"design-system19.mjs","sources":["../src/components/BOtpField/BOtpField.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass, createBlock as _createBlock, createElementVNode as _createElementVNode, unref as _unref, createCommentVNode as _createCommentVNode } from \"vue\"\n\nconst _hoisted_1 = { class: \"ds-flex ds-items-center ds-justify-center ds-space-x-2\" }\n\nimport BErrorMessage from '@/components/BErrorMessage.vue';\r\nimport {\r\n  useValidationField,\r\n  type ValidationRule,\r\n} from '@/composables/Validation';\r\nimport { cloneDeep } from 'lodash-es';\r\nimport { v4 as uuid } from 'uuid';\r\nimport { computed, ref } from 'vue';\r\nimport { useI18n } from 'vue-i18n';\r\nimport BOtpFieldBox from './BOtpFieldBox.vue';\r\n\r\n//#region Props\r\nexport interface BOtpFieldProps {\r\n  inputId?: string;\r\n  modelValue?: string;\r\n  /**\r\n   * Number of input boxes.\r\n   */\r\n  numInputs?: number;\r\n  /**\r\n   * Index of input box to be focused.\r\n   */\r\n  focusIndex?: number;\r\n  disabled?: boolean;\r\n  inputCssClass?: 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\r\n\nexport default /*#__PURE__*/_defineComponent({\n  __name: 'BOtpField',\n  props: {\n    inputId: { default: '' },\n    modelValue: { default: '' },\n    numInputs: { default: 6 },\n    focusIndex: { default: undefined },\n    disabled: { type: Boolean, default: false },\n    inputCssClass: { default: '' },\n    validationRules: { default: undefined },\n    required: { type: Boolean, default: false },\n    requiredErrorMessage: { default: '' },\n    hideDetails: { type: Boolean, default: false }\n  },\n  emits: [\"complete\", \"change\", \"update:focusIndex\", \"update:modelValue\"],\n  setup(__props: any, { expose: __expose, emit }) {\n\nconst props = __props;\n\r\n// Sourcecode: https://github.com/ejirocodes/vue3-otp-input\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 validateRequired: ValidationRule = {\r\n  validateRule: (val: string) => !!val,\r\n  errorMessage: () =>\r\n    props.requiredErrorMessage || t('ds.global.field_required'),\r\n};\r\nconst fIndex = ref(0);\r\nconst oldOtp = ref<any[]>([]);\r\nconst boxRefs = ref<Array<InstanceType<typeof BOtpFieldBox>> | null>(null);\r\nconst handleOnFocus = (index: number) => {\r\n  focusIndexValue.value = index;\r\n};\r\nconst handleOnBlur = () => {\r\n  focusIndexValue.value = -1;\r\n};\r\nconst id = computed(() => props.inputId || `id-${uuid()}`);\r\nconst value = computed<any[]>({\r\n  get() {\r\n    return props.modelValue.split('');\r\n  },\r\n  set(val: any) {\r\n    emit('update:modelValue', val.join(''));\r\n  },\r\n});\r\nconst originalValue = computed(() => props.modelValue);\r\nconst focusIndexValue = computed({\r\n  get() {\r\n    return props.focusIndex !== undefined ? props.focusIndex : fIndex.value;\r\n  },\r\n  set(val: number) {\r\n    if (props.focusIndex !== undefined) {\r\n      emit('update:focusIndex', val);\r\n    } else {\r\n      fIndex.value = val;\r\n    }\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\r\n  return result.length ? result : undefined;\r\n});\r\nconst inputCssClassValue = computed(() => [\r\n  ...[\r\n    props.disabled\r\n      ? 'ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4]'\r\n      : 'ds-text-black/[0.85]',\r\n    validationResult.value.valid\r\n      ? 'ds-border-black/[0.1] focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus'\r\n      : 'ds-border-error focus:ds-ring-1 focus:ds-ring-error',\r\n  ],\r\n  props.inputCssClass,\r\n]);\r\n\r\nconst { validate, validationResult } = useValidationField(\r\n  id.value,\r\n  originalValue,\r\n  vRules.value,\r\n);\r\n//#endregion\r\n\r\n//#region Methods\r\nconst focus = () => {\r\n  boxRefs.value![focusIndexValue.value].focus();\r\n};\r\nconst checkFilledAllInputs = () => {\r\n  if (value.value.join('').length === props.numInputs) {\r\n    return emit('complete', value.value.join(''));\r\n  }\r\n  return 'Wait until the user enters the required number of characters';\r\n};\r\n// Focus on input by index\r\nconst focusInput = (input: number) => {\r\n  focusIndexValue.value = Math.max(Math.min(props.numInputs - 1, input), 0);\r\n};\r\n// Focus on next input\r\nconst focusNextInput = () => {\r\n  focusInput(focusIndexValue.value + 1);\r\n};\r\n// Focus on previous input\r\nconst focusPrevInput = () => {\r\n  focusInput(focusIndexValue.value - 1);\r\n};\r\n// Change OTP value at focused input\r\nconst changeCodeAtFocus = (val: number | string) => {\r\n  oldOtp.value = [...value.value];\r\n\r\n  value.value[focusIndexValue.value] = val;\r\n  value.value = cloneDeep(value.value);\r\n\r\n  const oldOtpStr = oldOtp.value.join('');\r\n  const otpStr = value.value.join('');\r\n  if (oldOtpStr !== otpStr) {\r\n    emit('change', otpStr);\r\n    checkFilledAllInputs();\r\n  }\r\n};\r\n// Handle pasted OTP\r\nconst handleOnPaste = (event: any) => {\r\n  event.preventDefault();\r\n  const pastedData = event.clipboardData\r\n    .getData('text/plain')\r\n    .slice(0, props.numInputs - focusIndexValue.value)\r\n    .split('');\r\n  if (!pastedData.join('').match(/^\\d+$/)) {\r\n    return 'Invalid pasted data';\r\n  }\r\n\r\n  // Paste data from focused input onwards\r\n  const currentCharsInOtp = value.value.slice(0, focusIndexValue.value);\r\n  const combinedWithPastedData = currentCharsInOtp.concat(pastedData);\r\n\r\n  combinedWithPastedData.slice(0, props.numInputs).forEach((val, i) => {\r\n    value.value[i] = val;\r\n  });\r\n\r\n  focusInput(combinedWithPastedData.slice(0, props.numInputs).length);\r\n\r\n  // Update modelValue when data is pasted from keyboard\r\n  emit('update:modelValue', value.value.join(''));\r\n  // Check if `complete`\r\n  return checkFilledAllInputs();\r\n};\r\nconst handleOnChange = (val: string) => {\r\n  changeCodeAtFocus(val);\r\n  focusNextInput();\r\n};\r\n// Handle cases of backspace, delete, left arrow, right arrow\r\nconst handleOnKeyDown = (event: KeyboardEvent) => {\r\n  switch (event.key) {\r\n    case 'Backspace':\r\n      event.preventDefault();\r\n      changeCodeAtFocus('');\r\n      focusPrevInput();\r\n      break;\r\n    case 'Delete':\r\n      event.preventDefault();\r\n      changeCodeAtFocus('');\r\n      break;\r\n    case 'ArrowLeft':\r\n      event.preventDefault();\r\n      focusPrevInput();\r\n      break;\r\n    case 'ArrowRight':\r\n      event.preventDefault();\r\n      focusNextInput();\r\n      break;\r\n    default:\r\n      break;\r\n  }\r\n};\r\nconst handleOnKeyUp = () => {\r\n  validate();\r\n};\r\n//#endregion\r\n\r\n__expose({ validate, focus });\r\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", null, [\n    _createElementVNode(\"div\", _hoisted_1, [\n      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.numInputs, (_, i) => {\n        return (_openBlock(), _createBlock(BOtpFieldBox, {\n          key: i,\n          ref_for: true,\n          ref_key: \"boxRefs\",\n          ref: boxRefs,\n          class: _normalizeClass(inputCssClassValue.value),\n          focus: focusIndexValue.value === i,\n          \"is-disabled\": _ctx.disabled,\n          value: value.value[i],\n          onOnChange: handleOnChange,\n          onOnKeydown: handleOnKeyDown,\n          onOnKeyup: handleOnKeyUp,\n          onOnPaste: handleOnPaste,\n          onOnFocus: ($event: any) => (handleOnFocus(i)),\n          onOnBlur: handleOnBlur\n        }, null, 8, [\"class\", \"focus\", \"is-disabled\", \"value\", \"onOnFocus\"]))\n      }), 128))\n    ]),\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","_sfc_main","_defineComponent","__props","__expose","emit","props","t","useI18n","validateRequired","val","fIndex","ref","oldOtp","boxRefs","handleOnFocus","index","focusIndexValue","handleOnBlur","id","computed","uuid","value","originalValue","vRules","result","inputCssClassValue","validationResult","validate","useValidationField","focus","checkFilledAllInputs","focusInput","input","focusNextInput","focusPrevInput","changeCodeAtFocus","cloneDeep","oldOtpStr","otpStr","handleOnPaste","event","pastedData","combinedWithPastedData","i","handleOnChange","handleOnKeyDown","handleOnKeyUp","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","_","_createBlock","BOtpFieldBox","_normalizeClass","$event","_createCommentVNode","BErrorMessage","_unref"],"mappings":"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"}
+{"version":3,"file":"design-system19.mjs","sources":["../src/components/BOtpField/BOtpField.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass, createBlock as _createBlock, createElementVNode as _createElementVNode, unref as _unref, createCommentVNode as _createCommentVNode } from \"vue\"\n\nconst _hoisted_1 = { class: \"ds-flex ds-items-center ds-justify-center ds-space-x-2\" }\n\nimport BErrorMessage from '@/components/BErrorMessage.vue';\nimport {\n  useValidationField,\n  type ValidationRule,\n} from '@/composables/Validation';\nimport { cloneDeep } from 'lodash-es';\nimport { v4 as uuid } from 'uuid';\nimport { computed, ref } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport BOtpFieldBox from './BOtpFieldBox.vue';\n\n//#region Props\nexport interface BOtpFieldProps {\n  inputId?: string;\n  modelValue: string;\n  /**\n   * Number of input boxes.\n   */\n  numInputs?: number;\n  /**\n   * Index of input box to be focused.\n   */\n  focusIndex?: number;\n  disabled?: boolean;\n  inputCssClass?: 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\n\nexport default /*#__PURE__*/_defineComponent({\n  __name: 'BOtpField',\n  props: {\n    inputId: { default: '' },\n    modelValue: { default: '' },\n    numInputs: { default: 6 },\n    focusIndex: { default: undefined },\n    disabled: { type: Boolean, default: false },\n    inputCssClass: { default: '' },\n    validationRules: { default: undefined },\n    required: { type: Boolean, default: false },\n    requiredErrorMessage: { default: '' },\n    hideDetails: { type: Boolean, default: false }\n  },\n  emits: [\"complete\", \"change\", \"update:focusIndex\", \"update:modelValue\"],\n  setup(__props: any, { expose: __expose, emit }) {\n\nconst props = __props;\n\n// Sourcecode: https://github.com/ejirocodes/vue3-otp-input\n\n//#endregion\n\n//#region Events\n\n//#endregion\n\n//#region Data\nconst { t } = useI18n();\nconst validateRequired: ValidationRule = {\n  validateRule: (val: string) => !!val,\n  errorMessage: () =>\n    props.requiredErrorMessage || t('ds.global.field_required'),\n};\nconst fIndex = ref(0);\nconst oldOtp = ref<any[]>([]);\nconst boxRefs = ref<Array<InstanceType<typeof BOtpFieldBox>> | null>(null);\nconst handleOnFocus = (index: number) => {\n  focusIndexValue.value = index;\n};\nconst handleOnBlur = () => {\n  focusIndexValue.value = -1;\n};\nconst id = computed(() => props.inputId || `id-${uuid()}`);\nconst value = computed<any[]>({\n  get() {\n    return props.modelValue.split('');\n  },\n  set(val: any) {\n    emit('update:modelValue', val.join(''));\n  },\n});\nconst originalValue = computed(() => props.modelValue);\nconst focusIndexValue = computed({\n  get() {\n    return props.focusIndex !== undefined ? props.focusIndex : fIndex.value;\n  },\n  set(val: number) {\n    if (props.focusIndex !== undefined) {\n      emit('update:focusIndex', val);\n    } else {\n      fIndex.value = val;\n    }\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\n  return result.length ? result : undefined;\n});\nconst inputCssClassValue = computed(() => [\n  ...[\n    props.disabled\n      ? 'ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4]'\n      : 'ds-text-black/[0.85]',\n    validationResult.value.valid\n      ? 'ds-border-black/[0.1] focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus'\n      : 'ds-border-error focus:ds-ring-1 focus:ds-ring-error',\n  ],\n  props.inputCssClass,\n]);\n\nconst { validate, validationResult } = useValidationField(\n  id.value,\n  originalValue,\n  vRules.value,\n);\n//#endregion\n\n//#region Methods\nconst focus = () => {\n  boxRefs.value![focusIndexValue.value].focus();\n};\nconst checkFilledAllInputs = () => {\n  if (value.value.join('').length === props.numInputs) {\n    return emit('complete', value.value.join(''));\n  }\n  return 'Wait until the user enters the required number of characters';\n};\n// Focus on input by index\nconst focusInput = (input: number) => {\n  focusIndexValue.value = Math.max(Math.min(props.numInputs - 1, input), 0);\n};\n// Focus on next input\nconst focusNextInput = () => {\n  focusInput(focusIndexValue.value + 1);\n};\n// Focus on previous input\nconst focusPrevInput = () => {\n  focusInput(focusIndexValue.value - 1);\n};\n// Change OTP value at focused input\nconst changeCodeAtFocus = (val: number | string) => {\n  oldOtp.value = [...value.value];\n\n  value.value[focusIndexValue.value] = val;\n  value.value = cloneDeep(value.value);\n\n  const oldOtpStr = oldOtp.value.join('');\n  const otpStr = value.value.join('');\n  if (oldOtpStr !== otpStr) {\n    emit('change', otpStr);\n    checkFilledAllInputs();\n  }\n};\n// Handle pasted OTP\nconst handleOnPaste = (event: any) => {\n  event.preventDefault();\n  const pastedData = event.clipboardData\n    .getData('text/plain')\n    .slice(0, props.numInputs - focusIndexValue.value)\n    .split('');\n  if (!pastedData.join('').match(/^\\d+$/)) {\n    return 'Invalid pasted data';\n  }\n\n  // Paste data from focused input onwards\n  const currentCharsInOtp = value.value.slice(0, focusIndexValue.value);\n  const combinedWithPastedData = currentCharsInOtp.concat(pastedData);\n\n  combinedWithPastedData.slice(0, props.numInputs).forEach((val, i) => {\n    value.value[i] = val;\n  });\n\n  focusInput(combinedWithPastedData.slice(0, props.numInputs).length);\n\n  // Update modelValue when data is pasted from keyboard\n  emit('update:modelValue', value.value.join(''));\n  // Check if `complete`\n  return checkFilledAllInputs();\n};\nconst handleOnChange = (val: string) => {\n  changeCodeAtFocus(val);\n  focusNextInput();\n};\n// Handle cases of backspace, delete, left arrow, right arrow\nconst handleOnKeyDown = (event: KeyboardEvent) => {\n  switch (event.key) {\n    case 'Backspace':\n      event.preventDefault();\n      changeCodeAtFocus('');\n      focusPrevInput();\n      break;\n    case 'Delete':\n      event.preventDefault();\n      changeCodeAtFocus('');\n      break;\n    case 'ArrowLeft':\n      event.preventDefault();\n      focusPrevInput();\n      break;\n    case 'ArrowRight':\n      event.preventDefault();\n      focusNextInput();\n      break;\n    default:\n      break;\n  }\n};\nconst handleOnKeyUp = () => {\n  validate();\n};\n//#endregion\n\n__expose({ validate, focus });\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", null, [\n    _createElementVNode(\"div\", _hoisted_1, [\n      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.numInputs, (_, i) => {\n        return (_openBlock(), _createBlock(BOtpFieldBox, {\n          key: i,\n          ref_for: true,\n          ref_key: \"boxRefs\",\n          ref: boxRefs,\n          class: _normalizeClass(inputCssClassValue.value),\n          focus: focusIndexValue.value === i,\n          \"is-disabled\": _ctx.disabled,\n          value: value.value[i],\n          onOnChange: handleOnChange,\n          onOnKeydown: handleOnKeyDown,\n          onOnKeyup: handleOnKeyUp,\n          onOnPaste: handleOnPaste,\n          onOnFocus: ($event: any) => (handleOnFocus(i)),\n          onOnBlur: handleOnBlur\n        }, null, 8, [\"class\", \"focus\", \"is-disabled\", \"value\", \"onOnFocus\"]))\n      }), 128))\n    ]),\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","_sfc_main","_defineComponent","__props","__expose","emit","props","t","useI18n","validateRequired","val","fIndex","ref","oldOtp","boxRefs","handleOnFocus","index","focusIndexValue","handleOnBlur","id","computed","uuid","value","originalValue","vRules","result","inputCssClassValue","validationResult","validate","useValidationField","focus","checkFilledAllInputs","focusInput","input","focusNextInput","focusPrevInput","changeCodeAtFocus","cloneDeep","oldOtpStr","otpStr","handleOnPaste","event","pastedData","combinedWithPastedData","i","handleOnChange","handleOnKeyDown","handleOnKeyUp","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","_","_createBlock","BOtpFieldBox","_normalizeClass","$event","_createCommentVNode","BErrorMessage","_unref"],"mappings":"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"}

package/dist/design-system194.js

@@ -1,2 +1,2 @@
-"use strict";const _=require("./design-system189.js"),a=require("./design-system168.js"),r=require("./design-system180.js");var n=200;function h(s,i){var t=this.__data__;if(t instanceof _){var e=t.__data__;if(!a||e.length<n-1)return e.push([s,i]),this.size=++t.size,this;t=this.__data__=new r(e)}return t.set(s,i),this.size=t.size,this}module.exports=h;
+"use strict";const _=require("./design-system189.js"),a=require("./design-system165.js"),r=require("./design-system180.js");var n=200;function h(s,i){var t=this.__data__;if(t instanceof _){var e=t.__data__;if(!a||e.length<n-1)return e.push([s,i]),this.size=++t.size,this;t=this.__data__=new r(e)}return t.set(s,i),this.size=t.size,this}module.exports=h;
 //# sourceMappingURL=design-system194.js.map

package/dist/design-system194.mjs

@@ -1,5 +1,5 @@
 import _ from "./design-system189.mjs";
-import e from "./design-system168.mjs";
+import e from "./design-system165.mjs";
 import r from "./design-system180.mjs";
 var h = 200;
 function m(i, s) {

package/dist/design-system195.js

@@ -1,2 +1,2 @@
-"use strict";const n=require("./design-system161.js"),o=require("./design-system137.js");var s=Object.prototype,u=s.propertyIsEnumerable,t=Object.getOwnPropertySymbols,a=t?function(r){return r==null?[]:(r=Object(r),n(t(r),function(e){return u.call(r,e)}))}:o;const l=a;module.exports=l;
+"use strict";const n=require("./design-system161.js"),o=require("./design-system141.js");var s=Object.prototype,u=s.propertyIsEnumerable,t=Object.getOwnPropertySymbols,a=t?function(r){return r==null?[]:(r=Object(r),n(t(r),function(e){return u.call(r,e)}))}:o;const l=a;module.exports=l;
 //# sourceMappingURL=design-system195.js.map

package/dist/design-system195.mjs

@@ -1,5 +1,5 @@
 import o from "./design-system161.mjs";
-import a from "./design-system137.mjs";
+import a from "./design-system141.mjs";
 var n = Object.prototype, l = n.propertyIsEnumerable, t = Object.getOwnPropertySymbols, m = t ? function(r) {
   return r == null ? [] : (r = Object(r), o(t(r), function(e) {
     return l.call(r, e);

package/dist/design-system199.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("./design-system163.js");var o=e?e.prototype:void 0,t=o?o.valueOf:void 0;function n(l){return t?Object(t.call(l)):{}}module.exports=n;
+"use strict";const e=require("./design-system170.js");var o=e?e.prototype:void 0,t=o?o.valueOf:void 0;function n(l){return t?Object(t.call(l)):{}}module.exports=n;
 //# sourceMappingURL=design-system199.js.map

package/dist/design-system199.mjs

@@ -1,4 +1,4 @@
-import o from "./design-system163.mjs";
+import o from "./design-system170.mjs";
 var e = o ? o.prototype : void 0, l = e ? e.valueOf : void 0;
 function r(t) {
   return l ? Object(l.call(t)) : {};

package/dist/design-system2.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system2.js","sources":["../src/composables/Date.ts"],"sourcesContent":["import { padStartZero } from '@/helpers/DateHelper';\r\nimport { computed } from 'vue';\r\nimport { useI18n } from 'vue-i18n';\r\n\r\nexport function useDate() {\r\n  /**\r\n   * Data\r\n   */\r\n  const { t, locale } = useI18n();\r\n  const dayNames = computed<Record<number, string>>(() => ({\r\n    0: t('ds.components.base.date_picker.days.sunday'),\r\n    1: t('ds.components.base.date_picker.days.monday'),\r\n    2: t('ds.components.base.date_picker.days.tuesday'),\r\n    3: t('ds.components.base.date_picker.days.wednesday'),\r\n    4: t('ds.components.base.date_picker.days.thursday'),\r\n    5: t('ds.components.base.date_picker.days.friday'),\r\n    6: t('ds.components.base.date_picker.days.saturday'),\r\n  }));\r\n  const monthNames = computed<Record<number, string>>(() => ({\r\n    0: t('ds.components.base.date_picker.months.january'),\r\n    1: t('ds.components.base.date_picker.months.february'),\r\n    2: t('ds.components.base.date_picker.months.march'),\r\n    3: t('ds.components.base.date_picker.months.april'),\r\n    4: t('ds.components.base.date_picker.months.may'),\r\n    5: t('ds.components.base.date_picker.months.june'),\r\n    6: t('ds.components.base.date_picker.months.july'),\r\n    7: t('ds.components.base.date_picker.months.august'),\r\n    8: t('ds.components.base.date_picker.months.september'),\r\n    9: t('ds.components.base.date_picker.months.october'),\r\n    10: t('ds.components.base.date_picker.months.november'),\r\n    11: t('ds.components.base.date_picker.months.december'),\r\n  }));\r\n  const monthShortNames = computed<Record<number, string>>(() => ({\r\n    0: t('ds.components.base.date_picker.months_short.january'),\r\n    1: t('ds.components.base.date_picker.months_short.february'),\r\n    2: t('ds.components.base.date_picker.months_short.march'),\r\n    3: t('ds.components.base.date_picker.months_short.april'),\r\n    4: t('ds.components.base.date_picker.months_short.may'),\r\n    5: t('ds.components.base.date_picker.months_short.june'),\r\n    6: t('ds.components.base.date_picker.months_short.july'),\r\n    7: t('ds.components.base.date_picker.months_short.august'),\r\n    8: t('ds.components.base.date_picker.months_short.september'),\r\n    9: t('ds.components.base.date_picker.months_short.october'),\r\n    10: t('ds.components.base.date_picker.months_short.november'),\r\n    11: t('ds.components.base.date_picker.months_short.december'),\r\n  }));\r\n  const dayShortNames = computed<Record<number, string>>(() => ({\r\n    0: t('ds.components.base.date_picker.days_short.sunday'),\r\n    1: t('ds.components.base.date_picker.days_short.monday'),\r\n    2: t('ds.components.base.date_picker.days_short.tuesday'),\r\n    3: t('ds.components.base.date_picker.days_short.wednesday'),\r\n    4: t('ds.components.base.date_picker.days_short.thursday'),\r\n    5: t('ds.components.base.date_picker.days_short.friday'),\r\n    6: t('ds.components.base.date_picker.days_short.saturday'),\r\n  }));\r\n\r\n  /**\r\n   * Methods\r\n   */\r\n  const formatDateHuge = (date: Date) => {\r\n    if (!validateDate(date)) {\r\n      return date;\r\n    }\r\n\r\n    const dayName = dayNames.value[date.getDay()];\r\n    const monthName = monthNames.value[date.getMonth()];\r\n    const enUSResult = `${dayName}, ${monthName} ${date.getDate()}, ${date.getFullYear()}`;\r\n    const viVNResult = `${dayName}, ${date.getDate()}/${\r\n      date.getMonth() + 1\r\n    }/${date.getFullYear()}`;\r\n\r\n    const result: Record<string, string> = {\r\n      'en-US': enUSResult,\r\n      'vi-VN': viVNResult,\r\n    };\r\n\r\n    return result[locale.value] || enUSResult;\r\n  };\r\n  const formatDate = (date: Date) => {\r\n    if (!validateDate(date)) {\r\n      return date;\r\n    }\r\n\r\n    const result: Record<string, string> = {\r\n      'vi-VN': `${padStartZero(date.getDate(), 2)}/${padStartZero(\r\n        date.getMonth() + 1,\r\n        2,\r\n      )}/${padStartZero(date.getFullYear(), 4)}`,\r\n      'en-US': `${monthNames.value[date.getMonth()]} ${padStartZero(\r\n        date.getDate(),\r\n        2,\r\n      )}, ${date.getFullYear()}`,\r\n    };\r\n\r\n    return result[locale.value];\r\n  };\r\n  const formatTime = (date: Date) => {\r\n    if (!validateDate(date)) {\r\n      return date;\r\n    }\r\n\r\n    const d = new Date(date);\r\n    const h = d.getHours();\r\n    const m = d.getMinutes();\r\n    const formattedStr = `${padStartZero(h, 2)}:${padStartZero(m, 2)}`;\r\n\r\n    const result: Record<string, string> = {\r\n      'vi-VN': formattedStr,\r\n      'en-US': formattedStr,\r\n    };\r\n\r\n    return result[locale.value];\r\n  };\r\n  const formatMonthYear = (\r\n    date: Date,\r\n    type: 'full' | 'short' | 'number' = 'full',\r\n  ) => {\r\n    if (!validateDate(date)) {\r\n      return date;\r\n    }\r\n\r\n    const months = {\r\n      full: monthNames.value,\r\n      short: monthShortNames.value,\r\n      number: [\r\n        '01',\r\n        '02',\r\n        '03',\r\n        '04',\r\n        '05',\r\n        '06',\r\n        '07',\r\n        '08',\r\n        '09',\r\n        '10',\r\n        '11',\r\n        '12',\r\n      ],\r\n    };\r\n\r\n    const monthName = months[type][date.getMonth()];\r\n    const year = date.getFullYear();\r\n    return `${type === 'number' ? `${monthName}/` : `${monthName} `}${year}`;\r\n  };\r\n  const validateDate = (date: Date) =>\r\n    date ? date.toString() !== 'Invalid Date' : false;\r\n\r\n  return {\r\n    formatTime,\r\n    formatDate,\r\n    formatDateHuge,\r\n    formatMonthYear,\r\n    dayShortNames,\r\n  };\r\n}\r\n"],"names":["useDate","t","locale","useI18n","dayNames","computed","monthNames","monthShortNames","dayShortNames","formatDateHuge","date","validateDate","dayName","monthName","enUSResult","viVNResult","formatDate","padStartZero","formatTime","d","h","m","formattedStr","formatMonthYear","type","year"],"mappings":"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"}
+{"version":3,"file":"design-system2.js","sources":["../src/composables/Date.ts"],"sourcesContent":["import { padStartZero } from '@/helpers/DateHelper';\nimport { computed } from 'vue';\nimport { useI18n } from 'vue-i18n';\n\nexport function useDate() {\n  /**\n   * Data\n   */\n  const { t, locale } = useI18n();\n  const dayNames = computed<Record<number, string>>(() => ({\n    0: t('ds.components.base.date_picker.days.sunday'),\n    1: t('ds.components.base.date_picker.days.monday'),\n    2: t('ds.components.base.date_picker.days.tuesday'),\n    3: t('ds.components.base.date_picker.days.wednesday'),\n    4: t('ds.components.base.date_picker.days.thursday'),\n    5: t('ds.components.base.date_picker.days.friday'),\n    6: t('ds.components.base.date_picker.days.saturday'),\n  }));\n  const monthNames = computed<Record<number, string>>(() => ({\n    0: t('ds.components.base.date_picker.months.january'),\n    1: t('ds.components.base.date_picker.months.february'),\n    2: t('ds.components.base.date_picker.months.march'),\n    3: t('ds.components.base.date_picker.months.april'),\n    4: t('ds.components.base.date_picker.months.may'),\n    5: t('ds.components.base.date_picker.months.june'),\n    6: t('ds.components.base.date_picker.months.july'),\n    7: t('ds.components.base.date_picker.months.august'),\n    8: t('ds.components.base.date_picker.months.september'),\n    9: t('ds.components.base.date_picker.months.october'),\n    10: t('ds.components.base.date_picker.months.november'),\n    11: t('ds.components.base.date_picker.months.december'),\n  }));\n  const monthShortNames = computed<Record<number, string>>(() => ({\n    0: t('ds.components.base.date_picker.months_short.january'),\n    1: t('ds.components.base.date_picker.months_short.february'),\n    2: t('ds.components.base.date_picker.months_short.march'),\n    3: t('ds.components.base.date_picker.months_short.april'),\n    4: t('ds.components.base.date_picker.months_short.may'),\n    5: t('ds.components.base.date_picker.months_short.june'),\n    6: t('ds.components.base.date_picker.months_short.july'),\n    7: t('ds.components.base.date_picker.months_short.august'),\n    8: t('ds.components.base.date_picker.months_short.september'),\n    9: t('ds.components.base.date_picker.months_short.october'),\n    10: t('ds.components.base.date_picker.months_short.november'),\n    11: t('ds.components.base.date_picker.months_short.december'),\n  }));\n  const dayShortNames = computed<Record<number, string>>(() => ({\n    0: t('ds.components.base.date_picker.days_short.sunday'),\n    1: t('ds.components.base.date_picker.days_short.monday'),\n    2: t('ds.components.base.date_picker.days_short.tuesday'),\n    3: t('ds.components.base.date_picker.days_short.wednesday'),\n    4: t('ds.components.base.date_picker.days_short.thursday'),\n    5: t('ds.components.base.date_picker.days_short.friday'),\n    6: t('ds.components.base.date_picker.days_short.saturday'),\n  }));\n\n  /**\n   * Methods\n   */\n  const formatDateHuge = (date: Date) => {\n    if (!validateDate(date)) {\n      return date;\n    }\n\n    const dayName = dayNames.value[date.getDay()];\n    const monthName = monthNames.value[date.getMonth()];\n    const enUSResult = `${dayName}, ${monthName} ${date.getDate()}, ${date.getFullYear()}`;\n    const viVNResult = `${dayName}, ${date.getDate()}/${\n      date.getMonth() + 1\n    }/${date.getFullYear()}`;\n\n    const result: Record<string, string> = {\n      'en-US': enUSResult,\n      'vi-VN': viVNResult,\n    };\n\n    return result[locale.value] || enUSResult;\n  };\n  const formatDate = (date: Date) => {\n    if (!validateDate(date)) {\n      return date;\n    }\n\n    const result: Record<string, string> = {\n      'vi-VN': `${padStartZero(date.getDate(), 2)}/${padStartZero(\n        date.getMonth() + 1,\n        2,\n      )}/${padStartZero(date.getFullYear(), 4)}`,\n      'en-US': `${monthNames.value[date.getMonth()]} ${padStartZero(\n        date.getDate(),\n        2,\n      )}, ${date.getFullYear()}`,\n    };\n\n    return result[locale.value];\n  };\n  const formatTime = (date: Date) => {\n    if (!validateDate(date)) {\n      return date;\n    }\n\n    const d = new Date(date);\n    const h = d.getHours();\n    const m = d.getMinutes();\n    const formattedStr = `${padStartZero(h, 2)}:${padStartZero(m, 2)}`;\n\n    const result: Record<string, string> = {\n      'vi-VN': formattedStr,\n      'en-US': formattedStr,\n    };\n\n    return result[locale.value];\n  };\n  const formatMonthYear = (\n    date: Date,\n    type: 'full' | 'short' | 'number' = 'full',\n  ) => {\n    if (!validateDate(date)) {\n      return date;\n    }\n\n    const months = {\n      full: monthNames.value,\n      short: monthShortNames.value,\n      number: [\n        '01',\n        '02',\n        '03',\n        '04',\n        '05',\n        '06',\n        '07',\n        '08',\n        '09',\n        '10',\n        '11',\n        '12',\n      ],\n    };\n\n    const monthName = months[type][date.getMonth()];\n    const year = date.getFullYear();\n    return `${type === 'number' ? `${monthName}/` : `${monthName} `}${year}`;\n  };\n  const validateDate = (date: Date) =>\n    date ? date.toString() !== 'Invalid Date' : false;\n\n  return {\n    formatTime,\n    formatDate,\n    formatDateHuge,\n    formatMonthYear,\n    dayShortNames,\n  };\n}\n"],"names":["useDate","t","locale","useI18n","dayNames","computed","monthNames","monthShortNames","dayShortNames","formatDateHuge","date","validateDate","dayName","monthName","enUSResult","viVNResult","formatDate","padStartZero","formatTime","d","h","m","formattedStr","formatMonthYear","type","year"],"mappings":"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"}

package/dist/design-system2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"design-system2.mjs","sources":["../src/composables/Date.ts"],"sourcesContent":["import { padStartZero } from '@/helpers/DateHelper';\r\nimport { computed } from 'vue';\r\nimport { useI18n } from 'vue-i18n';\r\n\r\nexport function useDate() {\r\n  /**\r\n   * Data\r\n   */\r\n  const { t, locale } = useI18n();\r\n  const dayNames = computed<Record<number, string>>(() => ({\r\n    0: t('ds.components.base.date_picker.days.sunday'),\r\n    1: t('ds.components.base.date_picker.days.monday'),\r\n    2: t('ds.components.base.date_picker.days.tuesday'),\r\n    3: t('ds.components.base.date_picker.days.wednesday'),\r\n    4: t('ds.components.base.date_picker.days.thursday'),\r\n    5: t('ds.components.base.date_picker.days.friday'),\r\n    6: t('ds.components.base.date_picker.days.saturday'),\r\n  }));\r\n  const monthNames = computed<Record<number, string>>(() => ({\r\n    0: t('ds.components.base.date_picker.months.january'),\r\n    1: t('ds.components.base.date_picker.months.february'),\r\n    2: t('ds.components.base.date_picker.months.march'),\r\n    3: t('ds.components.base.date_picker.months.april'),\r\n    4: t('ds.components.base.date_picker.months.may'),\r\n    5: t('ds.components.base.date_picker.months.june'),\r\n    6: t('ds.components.base.date_picker.months.july'),\r\n    7: t('ds.components.base.date_picker.months.august'),\r\n    8: t('ds.components.base.date_picker.months.september'),\r\n    9: t('ds.components.base.date_picker.months.october'),\r\n    10: t('ds.components.base.date_picker.months.november'),\r\n    11: t('ds.components.base.date_picker.months.december'),\r\n  }));\r\n  const monthShortNames = computed<Record<number, string>>(() => ({\r\n    0: t('ds.components.base.date_picker.months_short.january'),\r\n    1: t('ds.components.base.date_picker.months_short.february'),\r\n    2: t('ds.components.base.date_picker.months_short.march'),\r\n    3: t('ds.components.base.date_picker.months_short.april'),\r\n    4: t('ds.components.base.date_picker.months_short.may'),\r\n    5: t('ds.components.base.date_picker.months_short.june'),\r\n    6: t('ds.components.base.date_picker.months_short.july'),\r\n    7: t('ds.components.base.date_picker.months_short.august'),\r\n    8: t('ds.components.base.date_picker.months_short.september'),\r\n    9: t('ds.components.base.date_picker.months_short.october'),\r\n    10: t('ds.components.base.date_picker.months_short.november'),\r\n    11: t('ds.components.base.date_picker.months_short.december'),\r\n  }));\r\n  const dayShortNames = computed<Record<number, string>>(() => ({\r\n    0: t('ds.components.base.date_picker.days_short.sunday'),\r\n    1: t('ds.components.base.date_picker.days_short.monday'),\r\n    2: t('ds.components.base.date_picker.days_short.tuesday'),\r\n    3: t('ds.components.base.date_picker.days_short.wednesday'),\r\n    4: t('ds.components.base.date_picker.days_short.thursday'),\r\n    5: t('ds.components.base.date_picker.days_short.friday'),\r\n    6: t('ds.components.base.date_picker.days_short.saturday'),\r\n  }));\r\n\r\n  /**\r\n   * Methods\r\n   */\r\n  const formatDateHuge = (date: Date) => {\r\n    if (!validateDate(date)) {\r\n      return date;\r\n    }\r\n\r\n    const dayName = dayNames.value[date.getDay()];\r\n    const monthName = monthNames.value[date.getMonth()];\r\n    const enUSResult = `${dayName}, ${monthName} ${date.getDate()}, ${date.getFullYear()}`;\r\n    const viVNResult = `${dayName}, ${date.getDate()}/${\r\n      date.getMonth() + 1\r\n    }/${date.getFullYear()}`;\r\n\r\n    const result: Record<string, string> = {\r\n      'en-US': enUSResult,\r\n      'vi-VN': viVNResult,\r\n    };\r\n\r\n    return result[locale.value] || enUSResult;\r\n  };\r\n  const formatDate = (date: Date) => {\r\n    if (!validateDate(date)) {\r\n      return date;\r\n    }\r\n\r\n    const result: Record<string, string> = {\r\n      'vi-VN': `${padStartZero(date.getDate(), 2)}/${padStartZero(\r\n        date.getMonth() + 1,\r\n        2,\r\n      )}/${padStartZero(date.getFullYear(), 4)}`,\r\n      'en-US': `${monthNames.value[date.getMonth()]} ${padStartZero(\r\n        date.getDate(),\r\n        2,\r\n      )}, ${date.getFullYear()}`,\r\n    };\r\n\r\n    return result[locale.value];\r\n  };\r\n  const formatTime = (date: Date) => {\r\n    if (!validateDate(date)) {\r\n      return date;\r\n    }\r\n\r\n    const d = new Date(date);\r\n    const h = d.getHours();\r\n    const m = d.getMinutes();\r\n    const formattedStr = `${padStartZero(h, 2)}:${padStartZero(m, 2)}`;\r\n\r\n    const result: Record<string, string> = {\r\n      'vi-VN': formattedStr,\r\n      'en-US': formattedStr,\r\n    };\r\n\r\n    return result[locale.value];\r\n  };\r\n  const formatMonthYear = (\r\n    date: Date,\r\n    type: 'full' | 'short' | 'number' = 'full',\r\n  ) => {\r\n    if (!validateDate(date)) {\r\n      return date;\r\n    }\r\n\r\n    const months = {\r\n      full: monthNames.value,\r\n      short: monthShortNames.value,\r\n      number: [\r\n        '01',\r\n        '02',\r\n        '03',\r\n        '04',\r\n        '05',\r\n        '06',\r\n        '07',\r\n        '08',\r\n        '09',\r\n        '10',\r\n        '11',\r\n        '12',\r\n      ],\r\n    };\r\n\r\n    const monthName = months[type][date.getMonth()];\r\n    const year = date.getFullYear();\r\n    return `${type === 'number' ? `${monthName}/` : `${monthName} `}${year}`;\r\n  };\r\n  const validateDate = (date: Date) =>\r\n    date ? date.toString() !== 'Invalid Date' : false;\r\n\r\n  return {\r\n    formatTime,\r\n    formatDate,\r\n    formatDateHuge,\r\n    formatMonthYear,\r\n    dayShortNames,\r\n  };\r\n}\r\n"],"names":["useDate","t","locale","useI18n","dayNames","computed","monthNames","monthShortNames","dayShortNames","formatDateHuge","date","validateDate","dayName","monthName","enUSResult","viVNResult","formatDate","padStartZero","formatTime","d","h","m","formattedStr","formatMonthYear","type","year"],"mappings":"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"}
+{"version":3,"file":"design-system2.mjs","sources":["../src/composables/Date.ts"],"sourcesContent":["import { padStartZero } from '@/helpers/DateHelper';\nimport { computed } from 'vue';\nimport { useI18n } from 'vue-i18n';\n\nexport function useDate() {\n  /**\n   * Data\n   */\n  const { t, locale } = useI18n();\n  const dayNames = computed<Record<number, string>>(() => ({\n    0: t('ds.components.base.date_picker.days.sunday'),\n    1: t('ds.components.base.date_picker.days.monday'),\n    2: t('ds.components.base.date_picker.days.tuesday'),\n    3: t('ds.components.base.date_picker.days.wednesday'),\n    4: t('ds.components.base.date_picker.days.thursday'),\n    5: t('ds.components.base.date_picker.days.friday'),\n    6: t('ds.components.base.date_picker.days.saturday'),\n  }));\n  const monthNames = computed<Record<number, string>>(() => ({\n    0: t('ds.components.base.date_picker.months.january'),\n    1: t('ds.components.base.date_picker.months.february'),\n    2: t('ds.components.base.date_picker.months.march'),\n    3: t('ds.components.base.date_picker.months.april'),\n    4: t('ds.components.base.date_picker.months.may'),\n    5: t('ds.components.base.date_picker.months.june'),\n    6: t('ds.components.base.date_picker.months.july'),\n    7: t('ds.components.base.date_picker.months.august'),\n    8: t('ds.components.base.date_picker.months.september'),\n    9: t('ds.components.base.date_picker.months.october'),\n    10: t('ds.components.base.date_picker.months.november'),\n    11: t('ds.components.base.date_picker.months.december'),\n  }));\n  const monthShortNames = computed<Record<number, string>>(() => ({\n    0: t('ds.components.base.date_picker.months_short.january'),\n    1: t('ds.components.base.date_picker.months_short.february'),\n    2: t('ds.components.base.date_picker.months_short.march'),\n    3: t('ds.components.base.date_picker.months_short.april'),\n    4: t('ds.components.base.date_picker.months_short.may'),\n    5: t('ds.components.base.date_picker.months_short.june'),\n    6: t('ds.components.base.date_picker.months_short.july'),\n    7: t('ds.components.base.date_picker.months_short.august'),\n    8: t('ds.components.base.date_picker.months_short.september'),\n    9: t('ds.components.base.date_picker.months_short.october'),\n    10: t('ds.components.base.date_picker.months_short.november'),\n    11: t('ds.components.base.date_picker.months_short.december'),\n  }));\n  const dayShortNames = computed<Record<number, string>>(() => ({\n    0: t('ds.components.base.date_picker.days_short.sunday'),\n    1: t('ds.components.base.date_picker.days_short.monday'),\n    2: t('ds.components.base.date_picker.days_short.tuesday'),\n    3: t('ds.components.base.date_picker.days_short.wednesday'),\n    4: t('ds.components.base.date_picker.days_short.thursday'),\n    5: t('ds.components.base.date_picker.days_short.friday'),\n    6: t('ds.components.base.date_picker.days_short.saturday'),\n  }));\n\n  /**\n   * Methods\n   */\n  const formatDateHuge = (date: Date) => {\n    if (!validateDate(date)) {\n      return date;\n    }\n\n    const dayName = dayNames.value[date.getDay()];\n    const monthName = monthNames.value[date.getMonth()];\n    const enUSResult = `${dayName}, ${monthName} ${date.getDate()}, ${date.getFullYear()}`;\n    const viVNResult = `${dayName}, ${date.getDate()}/${\n      date.getMonth() + 1\n    }/${date.getFullYear()}`;\n\n    const result: Record<string, string> = {\n      'en-US': enUSResult,\n      'vi-VN': viVNResult,\n    };\n\n    return result[locale.value] || enUSResult;\n  };\n  const formatDate = (date: Date) => {\n    if (!validateDate(date)) {\n      return date;\n    }\n\n    const result: Record<string, string> = {\n      'vi-VN': `${padStartZero(date.getDate(), 2)}/${padStartZero(\n        date.getMonth() + 1,\n        2,\n      )}/${padStartZero(date.getFullYear(), 4)}`,\n      'en-US': `${monthNames.value[date.getMonth()]} ${padStartZero(\n        date.getDate(),\n        2,\n      )}, ${date.getFullYear()}`,\n    };\n\n    return result[locale.value];\n  };\n  const formatTime = (date: Date) => {\n    if (!validateDate(date)) {\n      return date;\n    }\n\n    const d = new Date(date);\n    const h = d.getHours();\n    const m = d.getMinutes();\n    const formattedStr = `${padStartZero(h, 2)}:${padStartZero(m, 2)}`;\n\n    const result: Record<string, string> = {\n      'vi-VN': formattedStr,\n      'en-US': formattedStr,\n    };\n\n    return result[locale.value];\n  };\n  const formatMonthYear = (\n    date: Date,\n    type: 'full' | 'short' | 'number' = 'full',\n  ) => {\n    if (!validateDate(date)) {\n      return date;\n    }\n\n    const months = {\n      full: monthNames.value,\n      short: monthShortNames.value,\n      number: [\n        '01',\n        '02',\n        '03',\n        '04',\n        '05',\n        '06',\n        '07',\n        '08',\n        '09',\n        '10',\n        '11',\n        '12',\n      ],\n    };\n\n    const monthName = months[type][date.getMonth()];\n    const year = date.getFullYear();\n    return `${type === 'number' ? `${monthName}/` : `${monthName} `}${year}`;\n  };\n  const validateDate = (date: Date) =>\n    date ? date.toString() !== 'Invalid Date' : false;\n\n  return {\n    formatTime,\n    formatDate,\n    formatDateHuge,\n    formatMonthYear,\n    dayShortNames,\n  };\n}\n"],"names":["useDate","t","locale","useI18n","dayNames","computed","monthNames","monthShortNames","dayShortNames","formatDateHuge","date","validateDate","dayName","monthName","enUSResult","viVNResult","formatDate","padStartZero","formatTime","d","h","m","formattedStr","formatMonthYear","type","year"],"mappings":"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"}

package/dist/design-system20.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system20.js","sources":["../src/components/BPagination.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, toDisplayString as _toDisplayString, vShow as _vShow, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nconst _hoisted_1 = { class: \"ds-inline-flex ds-space-x-1\" }\nconst _hoisted_2 = /*#__PURE__*/_createElementVNode(\"svg\", {\n  class: \"ds-h-4 ds-w-4 ds-fill-black/80\",\n  viewBox: \"0 0 320 512\",\n  xmlns: \"http://www.w3.org/2000/svg\"\n}, [\n  /*#__PURE__*/_createElementVNode(\"path\", { d: \"M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z\" })\n], -1)\nconst _hoisted_3 = [\n  _hoisted_2\n]\nconst _hoisted_4 = /*#__PURE__*/_createElementVNode(\"svg\", {\n  class: \"ds-h-4 ds-w-4 ds-fill-black/80\",\n  viewBox: \"0 0 320 512\",\n  xmlns: \"http://www.w3.org/2000/svg\"\n}, [\n  /*#__PURE__*/_createElementVNode(\"path\", { d: \"M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z\" })\n], -1)\nconst _hoisted_5 = [\n  _hoisted_4\n]\n\nimport { BPaginationSize } from '@/constants/Enums';\r\nimport { computed } from 'vue';\r\n\r\n//#region Props\r\nexport interface BPaginationProps {\r\n  /**\r\n   * Start by 1.\r\n   */\r\n  modelValue: number;\r\n  numberOfPages: number;\r\n  /**\r\n   * Bordered buttons.\r\n   */\r\n  border?: boolean;\r\n  /**\r\n   * Transparent background buttons.\r\n   */\r\n  transparent?: boolean;\r\n  size?: `${BPaginationSize}`;\r\n}\r\n\r\nconst First = 1;\r\nconst EllipsisText = '...';\r\n\nexport default /*#__PURE__*/_defineComponent({\n  __name: 'BPagination',\n  props: {\n    modelValue: {},\n    numberOfPages: {},\n    border: { type: Boolean, default: false },\n    transparent: { type: Boolean, default: false },\n    size: { default: BPaginationSize.Medium }\n  },\n  emits: [\"change\", \"update:modelValue\"],\n  setup(__props: any, { 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 value = computed({\r\n  get() {\r\n    return props.modelValue + 1;\r\n  },\r\n  set(val: number) {\r\n    emit('update:modelValue', val - 1);\r\n  },\r\n});\r\nconst paginationItemClass = computed(() => {\r\n  let result = `\r\n  ds-flex ds-items-center ds-justify-center\r\n  ds-rounded-lg `;\r\n\r\n  if (props.border) {\r\n    result += 'ds-border ds-border-gray-300 ';\r\n  }\r\n\r\n  switch (props.size) {\r\n    case BPaginationSize.Small:\r\n      result += `ds-w-8 ds-h-8 `;\r\n      break;\r\n    case BPaginationSize.Medium:\r\n    default:\r\n      result += `ds-w-10 ds-h-10 `;\r\n      break;\r\n  }\r\n\r\n  return result;\r\n});\r\n//#endregion\r\n\r\n//#region Methods\r\nconst clickPage = (page: number) => {\r\n  value.value = page;\r\n  // Emitted when page changes via user interaction\r\n  emit('change', value.value);\r\n};\r\nconst clickPrevious = () => {\r\n  if (value.value > 1) {\r\n    value.value--;\r\n    emit('change', value.value);\r\n  }\r\n};\r\nconst clickNext = () => {\r\n  if (value.value < props.numberOfPages) {\r\n    value.value++;\r\n    emit('change', value.value);\r\n  }\r\n};\r\nconst getActiveClass = (isActive: boolean = true) => {\r\n  return isActive\r\n    ? `ds-text-white ds-bg-primary-t `\r\n    : `ds-text-black/80 hover:ds-bg-primary-t/10 ${\r\n        props.transparent ? 'ds-bg-transparent' : 'ds-bg-white'\r\n      }`;\r\n};\r\n//#endregion\r\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"nav\", null, [\n    _createElementVNode(\"ul\", _hoisted_1, [\n      _createElementVNode(\"li\", {\n        class: _normalizeClass([[paginationItemClass.value, getActiveClass(false)], \"ds-ml-0 ds-cursor-pointer\"]),\n        onClick: clickPrevious\n      }, _hoisted_3, 2),\n      _createElementVNode(\"li\", {\n        class: _normalizeClass([[getActiveClass(value.value === 1), paginationItemClass.value], \"ds-cursor-pointer\"]),\n        onClick: _cache[0] || (_cache[0] = ($event: any) => (clickPage(1)))\n      }, [\n        _createElementVNode(\"a\", null, _toDisplayString(First))\n      ], 2),\n      _withDirectives(_createElementVNode(\"li\", {\n        class: _normalizeClass([[paginationItemClass.value], \"ds-cursor-default\"])\n      }, [\n        _createElementVNode(\"a\", null, _toDisplayString(EllipsisText))\n      ], 2), [\n        [_vShow, value.value > 3]\n      ]),\n      _withDirectives(_createElementVNode(\"li\", {\n        class: _normalizeClass([[paginationItemClass.value, getActiveClass(false)], \"ds-cursor-pointer\"]),\n        onClick: _cache[1] || (_cache[1] = ($event: any) => (clickPage(value.value - 1)))\n      }, [\n        _createElementVNode(\"a\", null, _toDisplayString(value.value - 1), 1)\n      ], 2), [\n        [_vShow, value.value > 2]\n      ]),\n      _withDirectives(_createElementVNode(\"li\", {\n        class: _normalizeClass([[paginationItemClass.value, getActiveClass()], \"ds-cursor-pointer\"]),\n        onClick: _cache[2] || (_cache[2] = ($event: any) => (clickPage(value.value)))\n      }, [\n        _createElementVNode(\"a\", null, _toDisplayString(value.value), 1)\n      ], 2), [\n        [_vShow, value.value !== 1 && value.value !== _ctx.numberOfPages]\n      ]),\n      _withDirectives(_createElementVNode(\"li\", {\n        class: _normalizeClass([[paginationItemClass.value, getActiveClass(false)], \"ds-cursor-pointer\"]),\n        onClick: _cache[3] || (_cache[3] = ($event: any) => (clickPage(value.value + 1)))\n      }, [\n        _createElementVNode(\"a\", null, _toDisplayString(value.value + 1), 1)\n      ], 2), [\n        [_vShow, value.value < _ctx.numberOfPages - 1]\n      ]),\n      _withDirectives(_createElementVNode(\"li\", {\n        class: _normalizeClass([[paginationItemClass.value], \"ds-cursor-default\"])\n      }, [\n        _createElementVNode(\"a\", null, _toDisplayString(EllipsisText))\n      ], 2), [\n        [_vShow, value.value < _ctx.numberOfPages - 2]\n      ]),\n      _withDirectives(_createElementVNode(\"li\", {\n        class: _normalizeClass([[paginationItemClass.value, getActiveClass(value.value === _ctx.numberOfPages)], \"ds-cursor-pointer\"]),\n        onClick: _cache[4] || (_cache[4] = ($event: any) => (clickPage(_ctx.numberOfPages)))\n      }, [\n        _createElementVNode(\"a\", null, _toDisplayString(_ctx.numberOfPages), 1)\n      ], 2), [\n        [_vShow, _ctx.numberOfPages > 1]\n      ]),\n      _createElementVNode(\"li\", {\n        class: _normalizeClass([[paginationItemClass.value, getActiveClass(false)], \"ds-cursor-pointer\"]),\n        onClick: clickNext\n      }, _hoisted_5, 2)\n    ])\n  ]))\n}\n}\n\n})"],"names":["_hoisted_1","_hoisted_2","_createElementVNode","_hoisted_3","_hoisted_4","_hoisted_5","First","EllipsisText","_sfc_main","_defineComponent","BPaginationSize","__props","emit","props","value","computed","val","paginationItemClass","result","clickPage","page","clickPrevious","clickNext","getActiveClass","isActive","_ctx","_cache","_openBlock","_createElementBlock","_normalizeClass","$event","_toDisplayString","_withDirectives","_vShow"],"mappings":"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"}
+{"version":3,"file":"design-system20.js","sources":["../src/components/BPagination.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, toDisplayString as _toDisplayString, vShow as _vShow, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nconst _hoisted_1 = { class: \"ds-inline-flex ds-space-x-1\" }\nconst _hoisted_2 = /*#__PURE__*/_createElementVNode(\"svg\", {\n  class: \"ds-h-4 ds-w-4 ds-fill-black/80\",\n  viewBox: \"0 0 320 512\",\n  xmlns: \"http://www.w3.org/2000/svg\"\n}, [\n  /*#__PURE__*/_createElementVNode(\"path\", { d: \"M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z\" })\n], -1)\nconst _hoisted_3 = [\n  _hoisted_2\n]\nconst _hoisted_4 = /*#__PURE__*/_createElementVNode(\"svg\", {\n  class: \"ds-h-4 ds-w-4 ds-fill-black/80\",\n  viewBox: \"0 0 320 512\",\n  xmlns: \"http://www.w3.org/2000/svg\"\n}, [\n  /*#__PURE__*/_createElementVNode(\"path\", { d: \"M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z\" })\n], -1)\nconst _hoisted_5 = [\n  _hoisted_4\n]\n\nimport { BPaginationSize } from '@/constants/Enums';\nimport { computed } from 'vue';\n\n//#region Props\nexport interface BPaginationProps {\n  /**\n   * Start by 1.\n   */\n  modelValue: number;\n  numberOfPages: number;\n  /**\n   * Bordered buttons.\n   */\n  border?: boolean;\n  /**\n   * Transparent background buttons.\n   */\n  transparent?: boolean;\n  size?: `${BPaginationSize}`;\n}\n\nconst First = 1;\nconst EllipsisText = '...';\n\nexport default /*#__PURE__*/_defineComponent({\n  __name: 'BPagination',\n  props: {\n    modelValue: {},\n    numberOfPages: {},\n    border: { type: Boolean, default: false },\n    transparent: { type: Boolean, default: false },\n    size: { default: BPaginationSize.Medium }\n  },\n  emits: [\"change\", \"update:modelValue\"],\n  setup(__props: any, { emit }) {\n\nconst props = __props;\n\n\n//#endregion\n\n//#region Events\n\n//#endregion\n\n//#region Data\nconst value = computed({\n  get() {\n    return props.modelValue + 1;\n  },\n  set(val: number) {\n    emit('update:modelValue', val - 1);\n  },\n});\nconst paginationItemClass = computed(() => {\n  let result = `\n  ds-flex ds-items-center ds-justify-center\n  ds-rounded-lg `;\n\n  if (props.border) {\n    result += 'ds-border ds-border-gray-300 ';\n  }\n\n  switch (props.size) {\n    case BPaginationSize.Small:\n      result += `ds-w-8 ds-h-8 `;\n      break;\n    case BPaginationSize.Medium:\n    default:\n      result += `ds-w-10 ds-h-10 `;\n      break;\n  }\n\n  return result;\n});\n//#endregion\n\n//#region Methods\nconst clickPage = (page: number) => {\n  value.value = page;\n  // Emitted when page changes via user interaction\n  emit('change', value.value);\n};\nconst clickPrevious = () => {\n  if (value.value > 1) {\n    value.value--;\n    emit('change', value.value);\n  }\n};\nconst clickNext = () => {\n  if (value.value < props.numberOfPages) {\n    value.value++;\n    emit('change', value.value);\n  }\n};\nconst getActiveClass = (isActive: boolean = true) => {\n  return isActive\n    ? `ds-text-white ds-bg-primary-t `\n    : `ds-text-black/80 hover:ds-bg-primary-t/10 ${\n        props.transparent ? 'ds-bg-transparent' : 'ds-bg-white'\n      }`;\n};\n//#endregion\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"nav\", null, [\n    _createElementVNode(\"ul\", _hoisted_1, [\n      _createElementVNode(\"li\", {\n        class: _normalizeClass([[paginationItemClass.value, getActiveClass(false)], \"ds-ml-0 ds-cursor-pointer\"]),\n        onClick: clickPrevious\n      }, _hoisted_3, 2),\n      _createElementVNode(\"li\", {\n        class: _normalizeClass([[getActiveClass(value.value === 1), paginationItemClass.value], \"ds-cursor-pointer\"]),\n        onClick: _cache[0] || (_cache[0] = ($event: any) => (clickPage(1)))\n      }, [\n        _createElementVNode(\"a\", null, _toDisplayString(First))\n      ], 2),\n      _withDirectives(_createElementVNode(\"li\", {\n        class: _normalizeClass([[paginationItemClass.value], \"ds-cursor-default\"])\n      }, [\n        _createElementVNode(\"a\", null, _toDisplayString(EllipsisText))\n      ], 2), [\n        [_vShow, value.value > 3]\n      ]),\n      _withDirectives(_createElementVNode(\"li\", {\n        class: _normalizeClass([[paginationItemClass.value, getActiveClass(false)], \"ds-cursor-pointer\"]),\n        onClick: _cache[1] || (_cache[1] = ($event: any) => (clickPage(value.value - 1)))\n      }, [\n        _createElementVNode(\"a\", null, _toDisplayString(value.value - 1), 1)\n      ], 2), [\n        [_vShow, value.value > 2]\n      ]),\n      _withDirectives(_createElementVNode(\"li\", {\n        class: _normalizeClass([[paginationItemClass.value, getActiveClass()], \"ds-cursor-pointer\"]),\n        onClick: _cache[2] || (_cache[2] = ($event: any) => (clickPage(value.value)))\n      }, [\n        _createElementVNode(\"a\", null, _toDisplayString(value.value), 1)\n      ], 2), [\n        [_vShow, value.value !== 1 && value.value !== _ctx.numberOfPages]\n      ]),\n      _withDirectives(_createElementVNode(\"li\", {\n        class: _normalizeClass([[paginationItemClass.value, getActiveClass(false)], \"ds-cursor-pointer\"]),\n        onClick: _cache[3] || (_cache[3] = ($event: any) => (clickPage(value.value + 1)))\n      }, [\n        _createElementVNode(\"a\", null, _toDisplayString(value.value + 1), 1)\n      ], 2), [\n        [_vShow, value.value < _ctx.numberOfPages - 1]\n      ]),\n      _withDirectives(_createElementVNode(\"li\", {\n        class: _normalizeClass([[paginationItemClass.value], \"ds-cursor-default\"])\n      }, [\n        _createElementVNode(\"a\", null, _toDisplayString(EllipsisText))\n      ], 2), [\n        [_vShow, value.value < _ctx.numberOfPages - 2]\n      ]),\n      _withDirectives(_createElementVNode(\"li\", {\n        class: _normalizeClass([[paginationItemClass.value, getActiveClass(value.value === _ctx.numberOfPages)], \"ds-cursor-pointer\"]),\n        onClick: _cache[4] || (_cache[4] = ($event: any) => (clickPage(_ctx.numberOfPages)))\n      }, [\n        _createElementVNode(\"a\", null, _toDisplayString(_ctx.numberOfPages), 1)\n      ], 2), [\n        [_vShow, _ctx.numberOfPages > 1]\n      ]),\n      _createElementVNode(\"li\", {\n        class: _normalizeClass([[paginationItemClass.value, getActiveClass(false)], \"ds-cursor-pointer\"]),\n        onClick: clickNext\n      }, _hoisted_5, 2)\n    ])\n  ]))\n}\n}\n\n})"],"names":["_hoisted_1","_hoisted_2","_createElementVNode","_hoisted_3","_hoisted_4","_hoisted_5","First","EllipsisText","_sfc_main","_defineComponent","BPaginationSize","__props","emit","props","value","computed","val","paginationItemClass","result","clickPage","page","clickPrevious","clickNext","getActiveClass","isActive","_ctx","_cache","_openBlock","_createElementBlock","_normalizeClass","$event","_toDisplayString","_withDirectives","_vShow"],"mappings":"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"}