@7pmlabs/design-system 0.8.1 → 1.0.0

package/dist/design-system18.mjs

@@ -1,127 +1,127 @@
-import { defineComponent as L, ref as f, computed as l, openBlock as d, createElementBlock as k, createElementVNode as S, Fragment as W, renderList as z, createBlock as C, normalizeClass as U, unref as G, createCommentVNode as H } from "vue";
-import J from "./design-system14.mjs";
-import { useValidationField as Q } from "./design-system3.mjs";
-import { useI18n as T } from "./design-system49.mjs";
-import X from "./design-system99.mjs";
-import Y from "./design-system98.mjs";
-import Z from "./design-system100.mjs";
-const ee = { class: "ds-flex ds-items-center ds-justify-center ds-space-x-2" }, re = /* @__PURE__ */ L({
-  __name: "BOtpField",
+import { defineComponent as C, computed as p, openBlock as O, createElementBlock as B, createElementVNode as l, normalizeClass as n, toDisplayString as r, withDirectives as o, vShow as i } from "vue";
+import { BPaginationSize as f } from "./design-system5.mjs";
+const x = { class: "ds-inline-flex ds-space-x-1" }, y = 1, g = "...", h = /* @__PURE__ */ C({
+  __name: "BPagination",
   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 }
+    modelValue: {},
+    numberOfPages: {},
+    border: { type: Boolean, default: !1 },
+    transparent: { type: Boolean, default: !1 },
+    size: { default: f.Medium }
   },
-  emits: ["complete", "change", "update:focusIndex", "update:modelValue"],
-  setup(D, { expose: _, emit: y }) {
-    const t = D, o = y, { t: V } = T(), B = {
-      validateRule: (e) => !!e,
-      errorMessage: () => t.requiredErrorMessage || V("ds.global.field_required")
-    }, p = f(0), m = f([]), v = f(null), R = (e) => {
-      a.value = e;
-    }, j = () => {
-      a.value = -1;
-    }, F = l(() => t.inputId || `id-${Y()}`), s = l({
+  emits: ["change", "update:modelValue"],
+  setup(b, { emit: w }) {
+    const d = b, c = w, e = p({
       get() {
-        return t.modelValue.split("");
+        return d.modelValue + 1;
       },
-      set(e) {
-        o("update:modelValue", e.join(""));
+      set(s) {
+        c("update:modelValue", s - 1);
       }
-    }), q = l(() => t.modelValue), a = l({
-      get() {
-        return t.focusIndex !== void 0 ? t.focusIndex : p.value;
-      },
-      set(e) {
-        t.focusIndex !== void 0 ? o("update:focusIndex", e) : p.value = e;
-      }
-    }), w = l(() => {
-      let e = [];
-      return t.required && e.push(B), t.validationRules && (e = e.concat(t.validationRules)), e.length ? e : void 0;
-    }), M = l(() => [
-      t.disabled ? "ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4]" : "ds-text-black/[0.85]",
-      g.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",
-      t.inputCssClass
-    ]), { validate: h, validationResult: g } = Q(
-      F.value,
-      q,
-      w.value
-    ), E = () => {
-      v.value[a.value].focus();
-    }, I = () => s.value.join("").length === t.numInputs ? o("complete", s.value.join("")) : "Wait until the user enters the required number of characters", c = (e) => {
-      a.value = Math.max(Math.min(t.numInputs - 1, e), 0);
-    }, b = () => {
-      c(a.value + 1);
-    }, O = () => {
-      c(a.value - 1);
-    }, i = (e) => {
-      m.value = [...s.value], s.value[a.value] = e, s.value = Z(s.value);
-      const u = m.value.join(""), r = s.value.join("");
-      u !== r && (o("change", r), I());
-    }, $ = (e) => {
-      e.preventDefault();
-      const u = e.clipboardData.getData("text/plain").slice(0, t.numInputs - a.value).split("");
-      if (!u.join("").match(/^\d+$/))
-        return "Invalid pasted data";
-      const n = s.value.slice(0, a.value).concat(u);
-      return n.slice(0, t.numInputs).forEach((x, N) => {
-        s.value[N] = x;
-      }), c(n.slice(0, t.numInputs).length), o("update:modelValue", s.value.join("")), I();
-    }, A = (e) => {
-      i(e), b();
-    }, K = (e) => {
-      switch (e.key) {
-        case "Backspace":
-          e.preventDefault(), i(""), O();
-          break;
-        case "Delete":
-          e.preventDefault(), i("");
-          break;
-        case "ArrowLeft":
-          e.preventDefault(), O();
+    }), t = p(() => {
+      let s = `
+  ds-flex ds-items-center ds-justify-center
+  ds-rounded-lg `;
+      switch (d.border && (s += "ds-border ds-border-gray-300 "), d.size) {
+        case f.Small:
+          s += "ds-w-8 ds-h-8 ";
           break;
-        case "ArrowRight":
-          e.preventDefault(), b();
+        case f.Medium:
+        default:
+          s += "ds-w-10 ds-h-10 ";
           break;
       }
+      return s;
+    }), v = (s) => {
+      e.value = s, c("change", e.value);
+    }, k = () => {
+      e.value > 1 && (e.value--, c("change", e.value));
     }, P = () => {
-      h();
-    };
-    return _({ validate: h, focus: E }), (e, u) => (d(), k("div", null, [
-      S("div", ee, [
-        (d(!0), k(W, null, z(e.numInputs, (r, n) => (d(), C(X, {
-          key: n,
-          ref_for: !0,
-          ref_key: "boxRefs",
-          ref: v,
-          class: U(M.value),
-          focus: a.value === n,
-          "is-disabled": e.disabled,
-          value: s.value[n],
-          onOnChange: A,
-          onOnKeydown: K,
-          onOnKeyup: P,
-          onOnPaste: $,
-          onOnFocus: (x) => R(n),
-          onOnBlur: j
-        }, null, 8, ["class", "focus", "is-disabled", "value", "onOnFocus"]))), 128))
-      ]),
-      e.hideDetails ? H("", !0) : (d(), C(J, {
-        key: 0,
-        "error-message": G(g).errorMessage(),
-        class: "ds-mt-1"
-      }, null, 8, ["error-message"]))
+      e.value < d.numberOfPages && (e.value++, c("change", e.value));
+    }, u = (s = !0) => s ? "ds-text-white ds-bg-primary-t " : `ds-text-black/80 ${d.transparent ? "ds-bg-transparent" : "ds-bg-white"}`;
+    return (s, a) => (O(), B("nav", null, [
+      l("ul", x, [
+        l("li", {
+          class: n([[t.value, u(!1)], "ds-ml-0 ds-cursor-pointer"]),
+          onClick: k
+        }, a[5] || (a[5] = [
+          l("svg", {
+            class: "ds-h-4 ds-w-4 ds-fill-black/80",
+            viewBox: "0 0 320 512",
+            xmlns: "http://www.w3.org/2000/svg"
+          }, [
+            l("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" })
+          ], -1)
+        ]), 2),
+        l("li", {
+          class: n([[u(e.value === 1), t.value], "ds-cursor-pointer"]),
+          onClick: a[0] || (a[0] = (m) => v(1))
+        }, [
+          l("a", null, r(y))
+        ], 2),
+        o(l("li", {
+          class: n([[t.value], "ds-cursor-default"])
+        }, [
+          l("a", null, r(g))
+        ], 2), [
+          [i, e.value > 3]
+        ]),
+        o(l("li", {
+          class: n([[t.value, u(!1)], "ds-cursor-pointer"]),
+          onClick: a[1] || (a[1] = (m) => v(e.value - 1))
+        }, [
+          l("a", null, r(e.value - 1), 1)
+        ], 2), [
+          [i, e.value > 2]
+        ]),
+        o(l("li", {
+          class: n([[t.value, u()], "ds-cursor-pointer"]),
+          onClick: a[2] || (a[2] = (m) => v(e.value))
+        }, [
+          l("a", null, r(e.value), 1)
+        ], 2), [
+          [i, e.value !== 1 && e.value !== s.numberOfPages]
+        ]),
+        o(l("li", {
+          class: n([[t.value, u(!1)], "ds-cursor-pointer"]),
+          onClick: a[3] || (a[3] = (m) => v(e.value + 1))
+        }, [
+          l("a", null, r(e.value + 1), 1)
+        ], 2), [
+          [i, e.value < s.numberOfPages - 1]
+        ]),
+        o(l("li", {
+          class: n([[t.value], "ds-cursor-default"])
+        }, [
+          l("a", null, r(g))
+        ], 2), [
+          [i, e.value < s.numberOfPages - 2]
+        ]),
+        o(l("li", {
+          class: n([[t.value, u(e.value === s.numberOfPages)], "ds-cursor-pointer"]),
+          onClick: a[4] || (a[4] = (m) => v(s.numberOfPages))
+        }, [
+          l("a", null, r(s.numberOfPages), 1)
+        ], 2), [
+          [i, s.numberOfPages > 1]
+        ]),
+        l("li", {
+          class: n([[t.value, u(!1)], "ds-cursor-pointer"]),
+          onClick: P
+        }, a[6] || (a[6] = [
+          l("svg", {
+            class: "ds-h-4 ds-w-4 ds-fill-black/80",
+            viewBox: "0 0 320 512",
+            xmlns: "http://www.w3.org/2000/svg"
+          }, [
+            l("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" })
+          ], -1)
+        ]), 2)
+      ])
     ]));
   }
 });
 export {
-  re as default
+  h as default
 };
 //# sourceMappingURL=design-system18.mjs.map

package/dist/design-system18.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"design-system18.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: __emit }) {\n\n// Sourcecode: https://github.com/ejirocodes/vue3-otp-input\nconst props = __props;\n//#endregion\n\n//#region Events\nconst emit = __emit;\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","emit","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-system18.mjs","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\" }\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: __emit }) {\n\nconst props = __props;\n//#endregion\n\n//#region Events\nconst emit = __emit;\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 ${\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      }, _cache[5] || (_cache[5] = [\n        _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          _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)\n      ]), 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      }, _cache[6] || (_cache[6] = [\n        _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          _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)\n      ]), 2)\n    ])\n  ]))\n}\n}\n\n})"],"names":["_hoisted_1","First","EllipsisText","_sfc_main","_defineComponent","BPaginationSize","__props","__emit","props","emit","value","computed","val","paginationItemClass","result","clickPage","page","clickPrevious","clickNext","getActiveClass","isActive","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","$event","_toDisplayString","_withDirectives","_vShow"],"mappings":"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"}

package/dist/design-system19.mjs

@@ -1,127 +1,207 @@
-import { defineComponent as C, computed as p, openBlock as O, createElementBlock as B, createElementVNode as l, normalizeClass as n, toDisplayString as r, withDirectives as o, vShow as i } from "vue";
-import { BPaginationSize as f } from "./design-system5.mjs";
-const x = { class: "ds-inline-flex ds-space-x-1" }, y = 1, g = "...", h = /* @__PURE__ */ C({
-  __name: "BPagination",
+import { defineComponent as J, ref as r, computed as h, watch as M, nextTick as R, onMounted as K, onBeforeUnmount as Q, openBlock as o, createElementBlock as d, createElementVNode as n, createVNode as X, createBlock as P, withCtx as Y, normalizeClass as i, toDisplayString as $, createTextVNode as Z, withDirectives as ee, Fragment as se, renderList as te, vShow as le, unref as oe, createCommentVNode as ae } from "vue";
+import { useValidationField as de } from "./design-system3.mjs";
+import { lockScrollBody as ne, unlockScrollBody as S, ensureVisiblePosition as ue, resetPosition as re } from "./design-system6.mjs";
+import { useI18n as ie } from "./design-system49.mjs";
+import ce from "./design-system29.mjs";
+import ve from "./design-system14.mjs";
+import pe from "./design-system39.mjs";
+import fe from "./design-system98.mjs";
+const me = ["id", "disabled"], be = { key: 0 }, ge = {
+  key: 1,
+  class: "ds-text-black/[0.4]"
+}, ke = ["id", "data-cy", "data-ut"], he = { class: "ds-max-h-72 ds-overflow-y-auto ds-rounded-lg ds-bg-white ds-shadow" }, we = { class: "ds-py-1 ds-text-sm ds-text-black/[0.85]" }, ye = ["onClick"], Re = /* @__PURE__ */ J({
+  __name: "BSelect",
   props: {
+    inputId: { default: "" },
     modelValue: {},
-    numberOfPages: {},
-    border: { type: Boolean, default: !1 },
-    transparent: { type: Boolean, default: !1 },
-    size: { default: f.Medium }
+    label: { default: "" },
+    items: {},
+    disabled: { type: Boolean, default: !1 },
+    placeholder: { default: "" },
+    valueCssClass: { default: "" },
+    menuCssClass: { default: "" },
+    validationRules: { default: void 0 },
+    required: { type: Boolean, default: !1 },
+    requiredErrorMessage: { default: "" },
+    hideDetails: { type: Boolean, default: !1 },
+    allowInput: { type: Boolean, default: !1 }
   },
-  emits: ["change", "update:modelValue"],
-  setup(b, { emit: w }) {
-    const d = b, c = w, e = p({
+  emits: ["change", "open", "close", "change:input", "update:modelValue"],
+  setup(T, { expose: _, emit: z }) {
+    const t = T, c = z, v = r(null), w = r(null), p = r(null), a = r(!1), { t: D } = ie(), F = {
+      validateRule: (e) => !!e,
+      errorMessage: () => t.requiredErrorMessage || D("ds.global.field_required")
+    }, y = r(""), f = r(), m = h(() => t.inputId || `id-${fe()}`), u = h({
       get() {
-        return d.modelValue + 1;
+        return t.modelValue;
       },
-      set(s) {
-        c("update:modelValue", s - 1);
+      set(e) {
+        c("update:modelValue", e);
       }
-    }), t = p(() => {
-      let s = `
-  ds-flex ds-items-center ds-justify-center
-  ds-rounded-lg `;
-      switch (d.border && (s += "ds-border ds-border-gray-300 "), d.size) {
-        case f.Small:
-          s += "ds-w-8 ds-h-8 ";
-          break;
-        case f.Medium:
-        default:
-          s += "ds-w-10 ds-h-10 ";
-          break;
+    }), N = h(() => {
+      let e = "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 ";
+      return e += t.disabled ? "ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4] " : "ds-bg-white ds-text-black/[0.85] ", e += V.value.valid ? "ds-border-black/10 focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus " : "ds-border-error focus:ds-ring-1 focus:ds-ring-error ", e;
+    }), O = h(() => {
+      let e = [];
+      return t.required && e.push(F), t.validationRules && (e = e.concat(t.validationRules)), e.length ? e : void 0;
+    }), { validate: B, validationResult: V } = de(
+      m.value,
+      u,
+      O.value
+    );
+    M(a, (e) => {
+      e ? (ne(), G(), c("open")) : (S(), L(), c("close"));
+    }), M(u, () => {
+      C(), b();
+    }), M(
+      () => t.items,
+      () => {
+        var e;
+        u.value && !((e = f.value) != null && e.value) && (C(), b());
+      },
+      {
+        deep: !0
       }
-      return s;
-    }), v = (s) => {
-      e.value = s, c("change", e.value);
-    }, k = () => {
-      e.value > 1 && (e.value--, c("change", e.value));
-    }, P = () => {
-      e.value < d.numberOfPages && (e.value++, c("change", e.value));
-    }, u = (s = !0) => s ? "ds-text-white ds-bg-primary-t " : `ds-text-black/80 ${d.transparent ? "ds-bg-transparent" : "ds-bg-white"}`;
-    return (s, a) => (O(), B("nav", null, [
-      l("ul", x, [
-        l("li", {
-          class: n([[t.value, u(!1)], "ds-ml-0 ds-cursor-pointer"]),
-          onClick: k
-        }, a[5] || (a[5] = [
-          l("svg", {
-            class: "ds-h-4 ds-w-4 ds-fill-black/80",
-            viewBox: "0 0 320 512",
-            xmlns: "http://www.w3.org/2000/svg"
-          }, [
-            l("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" })
-          ], -1)
-        ]), 2),
-        l("li", {
-          class: n([[u(e.value === 1), t.value], "ds-cursor-pointer"]),
-          onClick: a[0] || (a[0] = (m) => v(1))
-        }, [
-          l("a", null, r(y))
-        ], 2),
-        o(l("li", {
-          class: n([[t.value], "ds-cursor-default"])
-        }, [
-          l("a", null, r(g))
-        ], 2), [
-          [i, e.value > 3]
-        ]),
-        o(l("li", {
-          class: n([[t.value, u(!1)], "ds-cursor-pointer"]),
-          onClick: a[1] || (a[1] = (m) => v(e.value - 1))
-        }, [
-          l("a", null, r(e.value - 1), 1)
-        ], 2), [
-          [i, e.value > 2]
-        ]),
-        o(l("li", {
-          class: n([[t.value, u()], "ds-cursor-pointer"]),
-          onClick: a[2] || (a[2] = (m) => v(e.value))
+    );
+    const C = () => {
+      var e;
+      f.value = (e = t.items) == null ? void 0 : e.find((s) => s.value === u.value);
+    }, b = () => {
+      var e;
+      t.allowInput && (y.value = ((e = f.value) == null ? void 0 : e.text) || "");
+    }, U = () => {
+      document.addEventListener("keydown", I);
+    }, I = (e) => {
+      e.key === "Escape" && x();
+    }, W = () => {
+      document.addEventListener("click", q);
+    }, q = (e) => {
+      [v.value, p.value].some((g) => e.composedPath().includes(g)) || x();
+    }, j = (e) => {
+      u.value = e.value, x(), c("change", e.value), R(() => {
+        B();
+      });
+    }, A = (e, s) => {
+      s.style.width = `${e.offsetWidth}px`;
+    }, G = () => {
+      R(() => {
+        ue(v.value, p.value), A(v.value, p.value);
+      });
+    }, L = () => {
+      re(v.value, p.value);
+    }, H = (e) => {
+      c("change:input", e);
+    }, x = () => {
+      var e;
+      a.value = !1, (e = w.value) == null || e.blur(), b();
+    };
+    return (() => {
+      C(), b();
+    })(), K(() => {
+      U(), W();
+    }), Q(() => {
+      document.removeEventListener("keydown", I), document.removeEventListener("click", q), S(), L();
+    }), _({ validate: B, selectMenu: a }), (e, s) => {
+      var E, g;
+      return o(), d("div", null, [
+        n("div", {
+          ref_key: "selectEl",
+          ref: v
         }, [
-          l("a", null, r(e.value), 1)
-        ], 2), [
-          [i, e.value !== 1 && e.value !== s.numberOfPages]
-        ]),
-        o(l("li", {
-          class: n([[t.value, u(!1)], "ds-cursor-pointer"]),
-          onClick: a[3] || (a[3] = (m) => v(e.value + 1))
-        }, [
-          l("a", null, r(e.value + 1), 1)
-        ], 2), [
-          [i, e.value < s.numberOfPages - 1]
-        ]),
-        o(l("li", {
-          class: n([[t.value], "ds-cursor-default"])
-        }, [
-          l("a", null, r(g))
-        ], 2), [
-          [i, e.value < s.numberOfPages - 2]
-        ]),
-        o(l("li", {
-          class: n([[t.value, u(e.value === s.numberOfPages)], "ds-cursor-pointer"]),
-          onClick: a[4] || (a[4] = (m) => v(s.numberOfPages))
-        }, [
-          l("a", null, r(s.numberOfPages), 1)
-        ], 2), [
-          [i, s.numberOfPages > 1]
-        ]),
-        l("li", {
-          class: n([[t.value, u(!1)], "ds-cursor-pointer"]),
-          onClick: P
-        }, a[6] || (a[6] = [
-          l("svg", {
-            class: "ds-h-4 ds-w-4 ds-fill-black/80",
-            viewBox: "0 0 320 512",
-            xmlns: "http://www.w3.org/2000/svg"
+          X(ve, {
+            id: m.value,
+            label: e.label,
+            required: e.required
+          }, null, 8, ["id", "label", "required"]),
+          t.allowInput ? (o(), P(pe, {
+            key: 0,
+            id: m.value,
+            ref_key: "inputRef",
+            ref: w,
+            modelValue: y.value,
+            "onUpdate:modelValue": [
+              s[0] || (s[0] = (l) => y.value = l),
+              H
+            ],
+            disabled: t.disabled,
+            placeholder: t.placeholder,
+            "hide-details": "",
+            onFocus: s[1] || (s[1] = (l) => a.value = !0),
+            "onClick:append": s[2] || (s[2] = (l) => {
+              var k;
+              return (k = w.value) == null ? void 0 : k.focus();
+            })
+          }, {
+            appendIcon: Y(() => [
+              (o(), d("svg", {
+                class: i([[a.value ? "ds-rotate-180" : ""], "ds-h-4 ds-w-4 ds-transition-transform"]),
+                viewBox: "0 0 320 512",
+                xmlns: "http://www.w3.org/2000/svg"
+              }, s[4] || (s[4] = [
+                n("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)
+              ]), 2))
+            ]),
+            _: 1
+          }, 8, ["id", "modelValue", "disabled", "placeholder"])) : (o(), d("button", {
+            key: 1,
+            id: m.value,
+            class: i(N.value),
+            disabled: t.disabled,
+            type: "button",
+            onClick: s[3] || (s[3] = (l) => a.value = !a.value)
+          }, [
+            n("span", {
+              class: i([e.valueCssClass, "ds-truncate"])
+            }, [
+              (E = f.value) != null && E.text ? (o(), d("span", be, $((g = f.value) == null ? void 0 : g.text), 1)) : (o(), d("span", ge, $(t.placeholder), 1))
+            ], 2),
+            s[6] || (s[6] = Z("   ")),
+            (o(), d("svg", {
+              class: i([[a.value ? "ds-rotate-180" : ""], "ds-h-4 ds-w-4 ds-transition-transform"]),
+              viewBox: "0 0 320 512",
+              xmlns: "http://www.w3.org/2000/svg"
+            }, s[5] || (s[5] = [
+              n("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)
+            ]), 2))
+          ], 10, me)),
+          ee(n("div", {
+            id: `${m.value}Menu`,
+            ref_key: "selectMenuEl",
+            ref: p,
+            class: i([e.menuCssClass, "ds-absolute ds-z-50 ds-min-w-[8rem] ds-py-1"]),
+            "data-cy": e.$attrs["data-cy"] ? `${e.$attrs["data-cy"]}Menu` : void 0,
+            "data-ut": e.$attrs["data-ut"] ? `${e.$attrs["data-ut"]}Menu` : void 0
           }, [
-            l("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" })
-          ], -1)
-        ]), 2)
-      ])
-    ]));
+            n("div", he, [
+              n("ul", we, [
+                (o(!0), d(se, null, te(e.items, (l, k) => (o(), d("li", {
+                  key: `item${k}`,
+                  class: "ds-cursor-pointer",
+                  onClick: (xe) => j(l)
+                }, [
+                  n("a", {
+                    class: i([
+                      l.cssClass + `${l.value === u.value ? " ds-bg-gray-150" : ""}`,
+                      "ds-block ds-px-4 ds-py-2 hover:ds-bg-gray-150"
+                    ])
+                  }, $(l == null ? void 0 : l.text), 3)
+                ], 8, ye))), 128))
+              ])
+            ])
+          ], 10, ke), [
+            [le, a.value]
+          ])
+        ], 512),
+        e.hideDetails ? ae("", !0) : (o(), P(ce, {
+          key: 0,
+          "error-message": oe(V).errorMessage(),
+          class: "ds-mt-1"
+        }, null, 8, ["error-message"]))
+      ]);
+    };
   }
 });
 export {
-  h as default
+  Re as default
 };
 //# sourceMappingURL=design-system19.mjs.map