@indielayer/ui 1.0.9 → 1.1.0

package/lib/components/select/Select.vue.d.ts

@@ -1,10 +1,39 @@
-import { type PropType } from 'vue';
-export declare type SelectOption = {
+import { type PropType, type ExtractPublicPropTypes } from 'vue';
+declare const selectProps: {
+    placeholder: StringConstructor;
+    options: PropType<SelectOption[]>;
+    multiple: BooleanConstructor;
+    label: StringConstructor;
+    helper: StringConstructor;
+    flat: BooleanConstructor;
+    modelValue: PropType<string | number | boolean | object | any[] | undefined>;
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    required: BooleanConstructor;
+    validateOnInput: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    error: StringConstructor;
+    rules: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    size: {
+        readonly type: PropType<import("../../composables/common").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+};
+export type SelectOption = {
     value: number | string;
     disabled: boolean;
     label: string;
 };
-declare const _default: import("vue").DefineComponent<{
+export type SelectProps = ExtractPublicPropTypes<typeof selectProps>;
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     placeholder: StringConstructor;
     options: PropType<SelectOption[]>;
     multiple: BooleanConstructor;
@@ -35,7 +64,7 @@ declare const _default: import("vue").DefineComponent<{
     focus: () => void | undefined;
     blur: () => void | undefined;
     reset: () => void;
-    validate: (val: any) => boolean;
+    validate: (val?: any) => boolean;
     setError: (val: string) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     placeholder: StringConstructor;
@@ -65,16 +94,23 @@ declare const _default: import("vue").DefineComponent<{
         readonly validator: (value: string) => boolean;
     };
 }>> & {
-    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    readonly: boolean;
+    disabled: boolean;
     flat: boolean;
     size: import("../../composables/common").Size;
+    multiple: boolean;
     required: boolean;
-    disabled: boolean;
     loading: boolean;
+    readonly: boolean;
     validateOnInput: boolean;
     rules: unknown[];
-    multiple: boolean;
+}, {}>, {
+    icon?(_: {}): any;
 }>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/select/Select.vue.js

@@ -0,0 +1,269 @@
+import { defineComponent as re, ref as m, computed as _, watch as x, openBlock as i, createElementBlock as u, normalizeClass as c, unref as a, normalizeStyle as te, toDisplayString as v, createCommentVNode as oe, createElementVNode as g, createVNode as k, withCtx as w, Fragment as y, renderList as R, createBlock as I, createTextVNode as T, withDirectives as ne, mergeProps as ae, toHandlers as ie, vModelSelect as se, renderSlot as ue } from "vue";
+import { useEventListener as de } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.4/node_modules/@vueuse/core/index.js";
+import { useCommon as j } from "../../composables/common.js";
+import { useInputtable as O } from "../../composables/inputtable.js";
+import { useInteractive as F } from "../../composables/interactive.js";
+import { useTheme as fe } from "../../composables/theme.js";
+import { checkIcon as pe, chevronDownIcon as ce } from "../../common/icons.js";
+import me from "../tag/Tag.vue.js";
+import ve from "../icon/Icon.vue.js";
+import ye from "../menu/MenuItem.vue.js";
+import be from "../spinner/Spinner.vue.js";
+import he from "../popover/Popover.vue.js";
+import ge from "../popover/PopoverContainer.vue.js";
+import ke from "../helpers/InputError.js";
+import we from "./Select.theme.js";
+const Ae = ["textContent"], Ve = { class: "relative" }, _e = {
+  key: 0,
+  class: "text-gray-400 dark:text-gray-500"
+}, Re = { key: 1 }, Ie = {
+  key: 1,
+  class: "px-2 text-center text-gray-400"
+}, Oe = ["name", "disabled", "multiple", "readonly"], Se = ["value", "disabled"], ze = {
+  ...j.props(),
+  ...F.props(),
+  ...O.props(),
+  placeholder: String,
+  options: Array,
+  multiple: Boolean,
+  label: String,
+  helper: String,
+  flat: Boolean
+}, Ce = {
+  name: "XSelect",
+  validators: {
+    ...j.validators()
+  }
+}, Ke = /* @__PURE__ */ re({
+  ...Ce,
+  props: ze,
+  emits: O.emits(),
+  setup(M, { expose: U, emit: b }) {
+    const o = M, S = m(null), z = m(null), A = m(null), s = m(null), d = m(), t = _({
+      get() {
+        return o.multiple ? o.modelValue ? Array.isArray(o.modelValue) ? o.modelValue : [o.modelValue] : [] : o.modelValue;
+      },
+      set(e) {
+        b("update:modelValue", e);
+      }
+    }), f = _(() => !o.options || o.options.length === 0 ? [] : o.options.map((e) => {
+      let r = !1;
+      return o.multiple && Array.isArray(t.value) ? r = t.value.includes(e.value) : r = e.value === t.value, {
+        value: e.value,
+        label: e.label,
+        active: r,
+        disabled: e.disabled,
+        iconRight: r ? pe : void 0,
+        onClick: () => D(e.value)
+      };
+    })), C = _(() => {
+      var e;
+      return (e = o.options) == null ? void 0 : e.filter((r) => !r.disabled);
+    });
+    x(() => {
+      var e;
+      return (e = s.value) == null ? void 0 : e.isOpen;
+    }, () => {
+      var e;
+      (e = s.value) != null && e.isOpen && (o.multiple || typeof d.value > "u") && V(-1);
+    }), x(d, (e) => {
+      typeof e < "u" && A.value && A.value[e].$el.scrollIntoView({ block: "nearest", inline: "nearest" });
+    });
+    function V(e, r = "down") {
+      if (!C.value || C.value.length === 0) {
+        d.value = void 0;
+        return;
+      }
+      if (typeof e > "u" && (e = r === "down" ? -1 : 1), r === "down") {
+        let l = e + 1;
+        for (l > f.value.length - 1 && (l = 0); f.value[l].disabled; )
+          ++l > f.value.length - 1 && (l = 0);
+        d.value = l;
+      } else {
+        let l = e - 1;
+        for (l < 0 && (l = f.value.length - 1); f.value[l].disabled; )
+          --l < 0 && (l = f.value.length - 1);
+        d.value = l;
+      }
+    }
+    de(z, "keydown", H);
+    function H(e) {
+      var r, l, n, P, $, B, L, X;
+      if (f.value.length !== 0)
+        if (e.code === "ArrowDown") {
+          if (e.preventDefault(), !((r = s.value) != null && r.isOpen)) {
+            (l = s.value) == null || l.open();
+            return;
+          }
+          V(d.value, "down");
+        } else if (e.code === "ArrowUp") {
+          if (e.preventDefault(), !((n = s.value) != null && n.isOpen))
+            return;
+          V(d.value, "up");
+        } else if (e.code === "Enter" || e.code === "Space") {
+          if (e.preventDefault(), e.stopPropagation(), !((P = s.value) != null && P.isOpen)) {
+            ($ = s.value) == null || $.open();
+            return;
+          }
+          typeof d.value < "u" && (D(f.value[d.value].value), o.multiple || (B = s.value) == null || B.close());
+        } else
+          e.code === "Escape" ? (e.preventDefault(), e.stopPropagation(), (L = s.value) == null || L.close()) : e.code === "Tab" && ((X = s.value) == null || X.close());
+    }
+    function D(e) {
+      var l;
+      const r = (l = o.options) == null ? void 0 : l.find((n) => n.value === e);
+      if (!(!r || r.disabled))
+        if (o.multiple)
+          if (Array.isArray(t.value)) {
+            const n = t.value.indexOf(e);
+            n !== -1 ? t.value.splice(n, 1) : (t.value.push(e), b("update:modelValue", t.value));
+          } else
+            t.value = [e];
+        else
+          t.value = e;
+    }
+    function K(e) {
+      return !!(typeof e > "u" || e === null || e === "" || Array.isArray(e) && e.length === 0 || !Array.isArray(e) && typeof e == "object" && Object.keys(e).length === 0);
+    }
+    function W(e, r) {
+      e.stopPropagation();
+      const l = t.value.indexOf(r);
+      l !== -1 && (t.value.splice(l, 1), b("update:modelValue", t.value));
+    }
+    function E(e) {
+      var l;
+      const r = (l = o.options) == null ? void 0 : l.find((n) => n.value === e);
+      return r ? r.label : "";
+    }
+    const { focus: N, blur: q } = F(S), {
+      errorInternal: h,
+      inputListeners: G,
+      reset: J,
+      validate: Q,
+      setError: Y,
+      isInsideForm: Z
+    } = O(o, { focus: N, emit: b, withListeners: !1 }), { styles: ee, classes: p, className: le } = fe("select", we, o, { errorInternal: h });
+    return U({ focus: N, blur: q, reset: J, validate: Q, setError: Y }), (e, r) => (i(), u("label", {
+      ref_key: "labelRef",
+      ref: z,
+      tabindex: "0",
+      class: c(["group relative", [
+        a(le),
+        a(p).wrapper,
+        { "mb-3": a(Z) }
+      ]]),
+      style: te(a(ee))
+    }, [
+      e.label ? (i(), u("p", {
+        key: 0,
+        class: c(a(p).label),
+        textContent: v(e.label)
+      }, null, 10, Ae)) : oe("", !0),
+      g("div", Ve, [
+        k(he, {
+          ref_key: "popoverRef",
+          ref: s,
+          block: "",
+          disabled: e.disabled || e.loading,
+          "dismiss-on-click": !e.multiple,
+          align: "left"
+        }, {
+          content: w(() => [
+            k(ge, {
+              class: c(a(p).content)
+            }, {
+              default: w(() => [
+                f.value.length > 0 ? (i(!0), u(y, { key: 0 }, R(f.value, (l, n) => (i(), I(ye, {
+                  key: n,
+                  ref_for: !0,
+                  ref_key: "itemsRef",
+                  ref: A,
+                  item: l,
+                  size: e.size,
+                  disabled: l.disabled,
+                  selected: n === d.value,
+                  color: "primary",
+                  filled: ""
+                }, null, 8, ["item", "size", "disabled", "selected"]))), 128)) : (i(), u("div", Ie, " No options "))
+              ]),
+              _: 1
+            }, 8, ["class"])
+          ]),
+          default: w(() => [
+            g("div", {
+              class: c([
+                a(p).box,
+                {
+                  // error
+                  "border-red-500 dark:border-red-400 group-focus:outline-red-500": a(h),
+                  "group-focus:outline-[color:var(--x-select-border)]": !e.disabled && !a(h)
+                }
+              ])
+            }, [
+              e.multiple && Array.isArray(t.value) && t.value.length > 0 ? (i(!0), u(y, { key: 0 }, R(t.value, (l) => (i(), I(me, {
+                key: l,
+                size: "sm",
+                class: "mr-1",
+                removable: "",
+                onRemove: (n) => {
+                  W(n, l);
+                }
+              }, {
+                default: w(() => [
+                  T(v(E(l)), 1)
+                ]),
+                _: 2
+              }, 1032, ["onRemove"]))), 128)) : !e.multiple && !K(t.value) ? (i(), u(y, { key: 1 }, [
+                T(v(E(t.value)), 1)
+              ], 64)) : (i(), u(y, { key: 2 }, [
+                e.placeholder ? (i(), u("div", _e, v(e.placeholder), 1)) : (i(), u("div", Re, " "))
+              ], 64))
+            ], 2)
+          ]),
+          _: 1
+        }, 8, ["disabled", "dismiss-on-click"]),
+        ne(g("select", ae({
+          ref_key: "elRef",
+          ref: S,
+          "onUpdate:modelValue": r[0] || (r[0] = (l) => t.value = l),
+          class: "hidden",
+          name: e.name,
+          disabled: e.disabled || e.loading,
+          multiple: e.multiple,
+          readonly: e.readonly
+        }, ie(a(G), !0)), [
+          (i(!0), u(y, null, R(e.options, (l, n) => (i(), u("option", {
+            key: n,
+            value: l.value,
+            disabled: l.disabled
+          }, v(l.label), 9, Se))), 128))
+        ], 16, Oe), [
+          [se, t.value]
+        ]),
+        g("div", {
+          class: c(a(p).iconWrapper)
+        }, [
+          e.loading ? (i(), I(be, {
+            key: 0,
+            size: e.size
+          }, null, 8, ["size"])) : ue(e.$slots, "icon", { key: 1 }, () => [
+            k(ve, {
+              icon: a(ce),
+              class: c([
+                a(p).icon,
+                e.disabled ? "text-gray-600 dark:text-gray-500" : "text-gray-500 dark:text-gray-400"
+              ])
+            }, null, 8, ["icon", "class"])
+          ])
+        ], 2)
+      ]),
+      k(a(ke), {
+        error: a(h),
+        helper: e.helper
+      }, null, 8, ["error", "helper"])
+    ], 6));
+  }
+});
+export {
+  Ke as default
+};

package/lib/components/select/Select.vue2.js

@@ -0,0 +1,4 @@
+import f from "./Select.vue.js";
+export {
+  f as default
+};

package/lib/components/select/index.d.ts

@@ -0,0 +1,3 @@
+export { default as XSelect } from './Select.vue';
+export type { SelectProps, SelectOption } from './Select.vue';
+export type { SelectTheme } from './Select.theme';

package/lib/components/skeleton/Skeleton.theme.d.ts

@@ -1,6 +1,10 @@
-declare const _default: {
-    classes: {
-        wrapper: string;
-    };
-};
-export default _default;
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme';
+import type { SkeletonProps } from './Skeleton.vue';
+type InternalClasses = 'wrapper';
+interface InternalTheme extends ThemeComponent<SkeletonProps, InternalClasses> {
+}
+export interface SkeletonTheme extends Omit<InternalTheme, 'classes'> {
+    classes?: Partial<ThemeClasses<SkeletonProps, InternalClasses>>;
+}
+declare const theme: InternalTheme;
+export default theme;

package/lib/components/skeleton/Skeleton.theme.js

@@ -0,0 +1,8 @@
+const e = {
+  classes: {
+    wrapper: "animate-pulse bg-gray-300 dark:bg-gray-600 rounded-md"
+  }
+}, a = e;
+export {
+  a as default
+};

package/lib/components/skeleton/Skeleton.vue.d.ts

@@ -1,3 +1,11 @@
+import type { ExtractPublicPropTypes } from 'vue';
+declare const skeletonProps: {
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+};
+export type SkeletonProps = ExtractPublicPropTypes<typeof skeletonProps>;
 declare const _default: import("vue").DefineComponent<{
     tag: {
         type: StringConstructor;
@@ -10,5 +18,5 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     tag: string;
-}>;
+}, {}>;
 export default _default;

package/lib/components/skeleton/Skeleton.vue.js

@@ -0,0 +1,30 @@
+import { defineComponent as l, openBlock as c, createBlock as m, resolveDynamicComponent as p, normalizeStyle as i, unref as e, normalizeClass as f, withCtx as u, createTextVNode as _ } from "vue";
+import { useTheme as d } from "../../composables/theme.js";
+import y from "./Skeleton.theme.js";
+const k = {
+  tag: {
+    type: String,
+    default: "div"
+  }
+}, h = { name: "XSkeleton" }, v = /* @__PURE__ */ l({
+  ...h,
+  props: k,
+  setup(t) {
+    const s = t, { styles: o, classes: n, className: r } = d("skeleton", y, s);
+    return (a, C) => (c(), m(p(a.tag), {
+      style: i(e(o)),
+      class: f([
+        e(r),
+        e(n).wrapper
+      ])
+    }, {
+      default: u(() => [
+        _(" ​ ")
+      ]),
+      _: 1
+    }, 8, ["style", "class"]));
+  }
+});
+export {
+  v as default
+};

package/lib/components/skeleton/Skeleton.vue2.js

@@ -0,0 +1,4 @@
+import f from "./Skeleton.vue.js";
+export {
+  f as default
+};

package/lib/components/skeleton/index.d.ts

@@ -0,0 +1,3 @@
+export { default as XSkeleton } from './Skeleton.vue';
+export type { SkeletonProps } from './Skeleton.vue';
+export type { SkeletonTheme } from './Skeleton.theme';

package/lib/components/slider/Slider.theme.d.ts

@@ -1,10 +1,10 @@
-import type { ThemeParams } from '../../composables/theme';
-declare const _default: {
-    classes: {
-        wrapper: string;
-        label: ({ props }: ThemeParams) => string;
-        drag: string;
-    };
-    styles: ({ props, colors, css }: ThemeParams) => Record<string, string>;
-};
-export default _default;
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme';
+import type { SliderProps } from './Slider.vue';
+type InternalClasses = 'wrapper' | 'label' | 'drag';
+interface InternalTheme extends ThemeComponent<SliderProps, InternalClasses> {
+}
+export interface SliderTheme extends Omit<InternalTheme, 'classes'> {
+    classes?: Partial<ThemeClasses<SliderProps, InternalClasses>>;
+}
+declare const theme: InternalTheme;
+export default theme;

package/lib/components/slider/Slider.theme.js

@@ -0,0 +1,20 @@
+const a = {
+  classes: {
+    wrapper: "inline-block align-bottom text-left focus:outline-none",
+    label: ({ props: t }) => {
+      let e = "font-medium text-gray-800 dark:text-gray-200 mb-1";
+      return t.size === "xs" ? e += " text-xs" : t.size === "sm" ? e += " text-sm" : t.size === "lg" ? e += " text-lg" : t.size === "xl" && (e += " text-xl"), e;
+    },
+    drag: "w-[20px] h-[20px] -mt-[13px] -ml-[10px] rounded-full bg-white border shadow-sm"
+  },
+  styles: ({ props: t, colors: e, css: l }) => {
+    const s = e.getPalette("primary"), r = e.getPalette(t.color);
+    return l.variables({
+      bg: r[500],
+      border: s[500]
+    });
+  }
+}, i = a;
+export {
+  i as default
+};

package/lib/components/slider/Slider.vue.d.ts

@@ -1,4 +1,40 @@
-declare const _default: import("vue").DefineComponent<{
+import { type ExtractPublicPropTypes } from 'vue';
+declare const sliderProps: {
+    label: StringConstructor;
+    min: NumberConstructor;
+    max: NumberConstructor;
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    gradient: BooleanConstructor;
+    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    required: BooleanConstructor;
+    validateOnInput: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    error: StringConstructor;
+    rules: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+};
+export type SliderProps = ExtractPublicPropTypes<typeof sliderProps>;
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     label: StringConstructor;
     min: NumberConstructor;
     max: NumberConstructor;
@@ -35,7 +71,7 @@ declare const _default: import("vue").DefineComponent<{
     focus: () => void | undefined;
     blur: () => void | undefined;
     reset: () => void;
-    validate: (val: any) => boolean;
+    validate: (val?: any) => boolean;
     setError: (val: string) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     label: StringConstructor;
@@ -71,17 +107,29 @@ declare const _default: import("vue").DefineComponent<{
         readonly validator: (value: string) => boolean;
     };
 }>> & {
-    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    readonly: boolean;
+    disabled: boolean;
+    color: string;
     size: import("../../composables/common").Size;
     required: boolean;
-    color: string;
-    disabled: boolean;
+    step: number;
     loading: boolean;
+    readonly: boolean;
     validateOnInput: boolean;
     rules: unknown[];
     gradient: boolean;
-    step: number;
+}, {}>, {
+    prefix?(_: {
+        value: number;
+    }): any;
+    suffix?(_: {
+        value: number;
+    }): any;
 }>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};