@dv.net/ui-kit 1.0.0

package/dist/chunks/UiSelect.vue_vue_type_script_setup_true_lang-Cs1zeiaG.js

@@ -0,0 +1,328 @@
+import { defineComponent as ie, mergeModels as q, useModel as G, ref as w, computed as y, createElementBlock as h, openBlock as i, withKeys as z, normalizeClass as O, unref as a, createElementVNode as b, createVNode as J, withCtx as f, createCommentVNode as p, createBlock as d, renderSlot as C, toDisplayString as B, withModifiers as Q, createTextVNode as X, Fragment as ae, renderList as se } from "vue";
+import { _ as re } from "./UiLoading.vue_vue_type_script_setup_true_lang-BtR0ERuP.js";
+import "./style-CD0jFgS4.js";
+import { _ as ue } from "./SelectList.vue_vue_type_script_setup_true_lang-D7rVgcUu.js";
+import { _ as Y } from "./SelectListItem.vue_vue_type_script_setup_true_lang-CqpBkc62.js";
+/* empty css                                                        */
+import { _ as pe } from "./SelectSearch.vue_vue_type_script_setup_true_lang-BLx-GlCO.js";
+import { _ as de } from "./SelectTrigger.vue_vue_type_script_setup_true_lang-BvkUN4NZ.js";
+import { _ as ce } from "./SelectVirtualList.vue_vue_type_script_setup_true_lang-B2gLyWDm.js";
+import { useKeyboard as fe } from "../components/UiSelect/composables/useKeyboard.js";
+import { useMultiple as ve } from "../components/UiSelect/composables/useMultiple.js";
+import "./vue3-lottie.es-C_Z24a9S.js";
+import { _ as Z } from "./UiIcon.vue_vue_type_script_setup_true_lang-CP1bPN5o.js";
+/* empty css                                                */
+/* empty css                                                         */
+/* empty css                                                    */
+import "./useDatePicker-D8lDAs1P.js";
+import { config as N } from "../config/index.js";
+/* empty css                                                           */
+/* empty css                                                       */
+/* empty css                                                   */
+/* empty css                                                  */
+import { _ as me } from "./UiDropdown.vue_vue_type_script_setup_true_lang-DjVzkaIW.js";
+/* empty css                                                    */
+/* empty css                                                    */
+/* empty css                                                    */
+/* empty css                                                  */
+/* empty css                                                      */
+import "vue-router";
+/* empty css                                                */
+/* empty css                                                 */
+/* empty css                                                      */
+/* empty css                                                    */
+/* empty css                                                */
+/* empty css                                                    */
+/* empty css                                                               */
+/* empty css                                                    */
+const ye = ["disabled", "id"], he = ["title"], be = { class: "ui-select__content" }, ke = {
+  key: 0,
+  class: "ui-select__header"
+}, ge = {
+  key: 3,
+  class: "ui-select__no-data-block"
+}, Ce = {
+  key: 6,
+  class: "ui-select__footer"
+}, io = /* @__PURE__ */ ie({
+  __name: "UiSelect",
+  props: /* @__PURE__ */ q({
+    options: { default: () => [] },
+    valueKey: { default: "value" },
+    labelKey: { default: "label" },
+    asObject: { type: Boolean },
+    type: { default: "outside" },
+    size: { default: "md" },
+    error: { type: Boolean },
+    filled: { type: Boolean },
+    disabled: { type: Boolean },
+    placeholder: {},
+    withSearch: { type: Boolean },
+    clearable: { type: Boolean },
+    loading: { type: Boolean, default: !1 },
+    id: {},
+    multiple: { type: Boolean },
+    itemSize: { default: "sm" },
+    popperClass: {},
+    fitContentWidth: { type: Boolean, default: !0 },
+    offset: { type: [Number, Object, Function], default: 1 },
+    placement: { default: "bottom" },
+    readonly: { type: Boolean },
+    teleport: { type: [String, Boolean], default: "body" },
+    isVirtualList: { type: Boolean, default: !1 },
+    customSearch: { type: Boolean, default: !1 },
+    chevronName: { default: "keyboard-arrow-down" },
+    chevronColor: { default: "intherit" },
+    chevronSize: { default: "md" },
+    optionClass: {},
+    searchFn: {}
+  }, {
+    modelValue: { default: null },
+    modelModifiers: {},
+    isOpen: { type: Boolean, default: !1 },
+    isOpenModifiers: {}
+  }),
+  emits: /* @__PURE__ */ q(["change", "clear", "changeInfinityScroll", "search", "onClose"], ["update:modelValue", "update:isOpen"]),
+  setup(V, { emit: x }) {
+    const $ = x, l = V, n = G(V, "modelValue"), L = G(V, "isOpen"), k = w(!1), r = w(""), K = w(), M = w(), j = y(() => l.disabled || l.readonly), u = y(() => l.options.length && typeof l.options[0] != "object"), ee = y(() => N.uiSelect.translations.notFound && !g.value.length), F = y(() => Array.isArray(n.value) ? !!n.value.length : !!n.value), I = y(() => {
+      if (l.multiple && Array.isArray(n.value) && n.value.length)
+        return `${N.uiSelect.translations.multipleSelectedText} ${n.value.length}`;
+      const e = T(n.value);
+      return u.value ? e : e?.[l.labelKey];
+    }), g = y(() => l.customSearch || !r.value ? l.options : l.searchFn ? l.searchFn(r.value) : l.options.filter((e) => {
+      const t = u.value ? e : e?.[l.labelKey];
+      return String(t).toLowerCase().includes(r.value.toLowerCase());
+    })), { onKeydownDown: _, onKeydownEnter: D, onKeydownUp: R, navigatedIndex: v } = fe({
+      isFocus: k,
+      checkOption: A,
+      filteredOptions: g
+    }), { setModelValueItem: oe } = ve(n);
+    function A(e) {
+      l.multiple && Array.isArray(n.value) ? oe(S(e)) : (n.value = S(e), W()), $("change");
+    }
+    function c(e) {
+      return l.multiple && Array.isArray(n.value) ? n.value.includes(S(e)) : n.value === S(e);
+    }
+    function S(e) {
+      return u.value || l.asObject ? e : e?.[l.valueKey];
+    }
+    function T(e) {
+      return e ? l.options.find((t) => u.value ? t === e : l.asObject ? t?.[l.valueKey] === e?.[l.valueKey] : t?.[l.valueKey] === e) : null;
+    }
+    function U(e) {
+      v.value = e;
+    }
+    function E() {
+      v.value = null;
+    }
+    function le() {
+      n.value = l.multiple ? [] : null, $("clear");
+    }
+    function te() {
+      j.value || (P(), K.value.open());
+    }
+    function W() {
+      H(), K.value.close();
+    }
+    function H() {
+      r.value = "", $("search", r.value), $("onClose"), v.value = null, k.value = !1, M.value.blur();
+    }
+    function P() {
+      const e = g.value.findIndex((t) => c(t));
+      e !== -1 && (v.value = e), M.value.focus(), k.value = !0;
+    }
+    return (e, t) => (i(), h("div", {
+      class: O(["ui-select__wrapper", [{ "is-disabled": l.disabled }]]),
+      onKeydown: [
+        t[5] || (t[5] = z(
+          //@ts-ignore
+          (...o) => a(D) && a(D)(...o),
+          ["enter"]
+        )),
+        t[6] || (t[6] = z(
+          //@ts-ignore
+          (...o) => a(_) && a(_)(...o),
+          ["down"]
+        )),
+        t[7] || (t[7] = z(
+          //@ts-ignore
+          (...o) => a(R) && a(R)(...o),
+          ["up"]
+        )),
+        z(W, ["tab"])
+      ]
+    }, [
+      b("input", {
+        inputmode: "none",
+        ref_key: "inputRef",
+        ref: M,
+        disabled: e.disabled,
+        id: e.id,
+        class: "ui-select__input",
+        onFocus: te
+      }, null, 40, ye),
+      J(a(me), {
+        modelValue: L.value,
+        "onUpdate:modelValue": t[4] || (t[4] = (o) => L.value = o),
+        offset: e.offset,
+        ref_key: "dropdownRef",
+        ref: K,
+        onClose: H,
+        onOpen: P,
+        "popper-class": [e.popperClass ?? "", "ui-select__popper"],
+        "fit-content-width": e.fitContentWidth,
+        disabled: j.value,
+        placement: e.placement,
+        teleport: e.teleport
+      }, {
+        reference: f(() => [
+          b("div", {
+            class: O(["ui-select", [
+              e.size,
+              { "is-focus": k.value },
+              { "is-error": l.error },
+              { "is-filled": l.filled },
+              { "is-has-value": F.value },
+              `type-${e.type}`
+            ]])
+          }, [
+            J(de, {
+              clearable: !!e.clearable,
+              isFocus: k.value,
+              "is-has-value": F.value,
+              "is-active": F.value,
+              type: e.type,
+              placeholder: e.placeholder,
+              "chevron-color": e.chevronColor,
+              "chevron-name": e.chevronName,
+              "chevron-size": e.chevronSize,
+              onClear: le
+            }, {
+              default: f(() => [
+                C(e.$slots, "selected", {
+                  option: e.multiple ? n.value : T(n.value)
+                }, () => [
+                  I.value ? (i(), h("span", {
+                    key: 0,
+                    title: I.value
+                  }, B(I.value), 9, he)) : p("", !0)
+                ])
+              ]),
+              _: 3
+            }, 8, ["clearable", "isFocus", "is-has-value", "is-active", "type", "placeholder", "chevron-color", "chevron-name", "chevron-size"])
+          ], 2)
+        ]),
+        default: f(() => [
+          b("div", be, [
+            e.$slots.header ? (i(), h("div", ke, [
+              C(e.$slots, "header")
+            ])) : p("", !0),
+            e.loading && !e.options.length && !r.value ? (i(), d(re, {
+              key: 1,
+              "icon-size": "xl",
+              class: "ui-select__loading-inner",
+              "is-show": ""
+            })) : p("", !0),
+            l.withSearch ? (i(), d(pe, {
+              key: 2,
+              "onUpdate:modelValue": [
+                t[0] || (t[0] = (o) => e.$emit("search", o)),
+                t[1] || (t[1] = (o) => r.value = o)
+              ],
+              modelValue: r.value
+            }, null, 8, ["modelValue"])) : p("", !0),
+            ee.value ? (i(), h("div", ge, [
+              b("p", null, B(a(N).uiSelect.translations.notFound), 1)
+            ])) : p("", !0),
+            e.isVirtualList ? (i(), d(ce, {
+              key: 4,
+              onChangeInfinityScroll: t[2] || (t[2] = (o) => e.$emit("changeInfinityScroll")),
+              size: e.itemSize,
+              options: g.value,
+              "is-loading": e.loading
+            }, {
+              default: f(({ item: o }) => [
+                (i(), d(Y, {
+                  class: O(e.optionClass && e.optionClass(o.option, o.index)),
+                  key: o.index,
+                  size: e.itemSize,
+                  "is-navigated": a(v) === o.index,
+                  "is-checked": c(o.option),
+                  onClick: Q((m) => A(o.option), ["prevent"]),
+                  onMouseenter: (m) => U(o.index),
+                  onMouseleave: E,
+                  title: u.value ? o.option : o.option[e.labelKey]
+                }, {
+                  default: f(() => [
+                    b("span", null, [
+                      C(e.$slots, "default", {
+                        option: o.option,
+                        checked: c(o.option)
+                      }, () => [
+                        X(B(u.value ? o.option : o.option[e.labelKey]), 1)
+                      ])
+                    ]),
+                    c(o.option) ? (i(), d(a(Z), {
+                      key: 0,
+                      color: "var(--color-icon-accent)",
+                      type: "400",
+                      name: "done"
+                    })) : p("", !0)
+                  ]),
+                  _: 2
+                }, 1032, ["class", "size", "is-navigated", "is-checked", "onClick", "onMouseenter", "title"]))
+              ]),
+              _: 3
+            }, 8, ["size", "options", "is-loading"])) : (i(), d(ue, {
+              key: 5,
+              onChangeInfinityScroll: t[3] || (t[3] = (o) => e.$emit("changeInfinityScroll")),
+              search: r.value,
+              size: e.itemSize,
+              options: g.value
+            }, {
+              default: f(({ options: o }) => [
+                (i(!0), h(ae, null, se(o, ({ index: m, data: s }) => (i(), d(Y, {
+                  class: O(e.optionClass && e.optionClass(s, m)),
+                  key: m,
+                  size: e.itemSize,
+                  "is-navigated": a(v) === m,
+                  "is-checked": c(s),
+                  onClick: Q((ne) => A(s), ["prevent"]),
+                  onMouseenter: (ne) => U(m),
+                  onMouseleave: E,
+                  title: u.value ? s : s[e.labelKey]
+                }, {
+                  default: f(() => [
+                    b("span", null, [
+                      C(e.$slots, "default", {
+                        option: s,
+                        checked: c(s)
+                      }, () => [
+                        X(B(u.value ? s : s[e.labelKey]), 1)
+                      ])
+                    ]),
+                    c(s) ? (i(), d(a(Z), {
+                      key: 0,
+                      color: "var(--color-icon-accent)",
+                      type: "400",
+                      name: "done"
+                    })) : p("", !0)
+                  ]),
+                  _: 2
+                }, 1032, ["class", "size", "is-navigated", "is-checked", "onClick", "onMouseenter", "title"]))), 128))
+              ]),
+              _: 3
+            }, 8, ["search", "size", "options"])),
+            e.$slots.footer ? (i(), h("div", Ce, [
+              C(e.$slots, "footer")
+            ])) : p("", !0)
+          ])
+        ]),
+        _: 3
+      }, 8, ["modelValue", "offset", "popper-class", "fit-content-width", "disabled", "placement", "teleport"])
+    ], 34));
+  }
+});
+export {
+  io as _
+};

package/dist/chunks/UiSkeleton.vue_vue_type_script_setup_true_lang-DdPvBHJ7.js

@@ -0,0 +1,31 @@
+import { defineComponent as s, useCssVars as l, createElementBlock as r, openBlock as o, normalizeStyle as a, normalizeClass as n, Fragment as d, renderList as i } from "vue";
+const c = /* @__PURE__ */ s({
+  __name: "UiSkeleton",
+  props: {
+    animated: { type: Boolean, default: !0 },
+    rows: { default: 5 },
+    rowHeight: { default: 40 },
+    itemBorderRadius: { default: 4 },
+    rowsGap: { default: 8 },
+    firstColor: { default: "var(--color-background-secondary)" },
+    secondColor: { default: "var(--color-background-tertiary)" }
+  },
+  setup(u) {
+    return l((e) => ({
+      b4e103c2: e.firstColor,
+      "73d03143": e.secondColor
+    })), (e, p) => (o(), r("div", {
+      class: n(["ui-skeleton", { animated: e.animated }]),
+      style: a({ gap: `${e.rowsGap}px` })
+    }, [
+      (o(!0), r(d, null, i(e.rows, (t) => (o(), r("div", {
+        key: t,
+        class: "ui-skeleton__item",
+        style: a({ height: `${e.rowHeight}px`, borderRadius: `${e.itemBorderRadius}px` })
+      }, null, 4))), 128))
+    ], 6));
+  }
+});
+export {
+  c as _
+};

package/dist/chunks/UiSwitch.vue_vue_type_script_setup_true_lang-xn4QBS7Q.js

@@ -0,0 +1,76 @@
+import { defineComponent as c, mergeModels as s, useModel as f, createElementBlock as r, openBlock as n, normalizeClass as h, withModifiers as b, createElementVNode as o, createCommentVNode as g, createVNode as _, unref as w, toDisplayString as m } from "vue";
+import "./vue3-lottie.es-C_Z24a9S.js";
+import "./style-CD0jFgS4.js";
+/* empty css                                                */
+/* empty css                                                         */
+/* empty css                                                    */
+import "./useDatePicker-D8lDAs1P.js";
+import "../config/index.js";
+/* empty css                                                           */
+/* empty css                                                       */
+/* empty css                                                   */
+/* empty css                                                  */
+/* empty css                                                    */
+/* empty css                                                    */
+/* empty css                                                    */
+/* empty css                                                  */
+/* empty css                                                      */
+import "vue-router";
+/* empty css                                                */
+import { _ as k } from "./UiLoading.vue_vue_type_script_setup_true_lang-BtR0ERuP.js";
+/* empty css                                                 */
+/* empty css                                                      */
+/* empty css                                                        */
+/* empty css                                                    */
+/* empty css                                                */
+/* empty css                                                    */
+/* empty css                                                               */
+/* empty css                                                    */
+const y = ["checked", "disabled"], C = { class: "ui-switch__dot" }, V = {
+  key: 0,
+  class: "ui-switch__label"
+}, Z = /* @__PURE__ */ c({
+  __name: "UiSwitch",
+  props: /* @__PURE__ */ s({
+    disabled: { type: Boolean, default: !1 },
+    loading: { type: Boolean, default: !1 },
+    label: {},
+    text: {},
+    beforeChange: {}
+  }, {
+    modelValue: { type: Boolean, default: !1 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ s(["change"], ["update:modelValue"]),
+  setup(l, { emit: d }) {
+    const i = f(l, "modelValue"), t = l, p = d;
+    async function u() {
+      t.disabled || t.loading || (t.beforeChange ? await t.beforeChange() : i.value = !i.value, p("change", i.value));
+    }
+    return (e, a) => (n(), r("label", {
+      onClick: b(u, ["prevent"]),
+      class: h(["ui-switch", { "is-disabled": e.disabled, "is-loading": e.loading }])
+    }, [
+      o("input", {
+        checked: i.value,
+        disabled: e.disabled || e.loading,
+        class: "ui-switch__input",
+        type: "checkbox"
+      }, null, 8, y),
+      o("span", C, [
+        _(w(k), {
+          "icon-color": "#fff",
+          "is-show": e.loading
+        }, null, 8, ["is-show"])
+      ]),
+      a[0] || (a[0] = o("span", { class: "ui-switch__slider" }, null, -1)),
+      e.label || e.text ? (n(), r("div", V, [
+        o("h4", null, m(e.label), 1),
+        o("p", null, m(e.text), 1)
+      ])) : g("", !0)
+    ], 2));
+  }
+});
+export {
+  Z as _
+};