@indielayer/ui 1.5.1 → 1.6.0

package/lib/components/radio/theme/Radio.base.theme.js

@@ -2,51 +2,51 @@ const a = {
   classes: {
     wrapper: ({ data: e }) => {
       const t = ["inline-block relative cursor-pointer focus:outline-none group"];
-      return e.isInsideForm && !e.isInsideFormGroup && t.push("mb-3"), t;
+      return e.isInsideForm && !e.isInsideFormGroup && t.push("mb-5"), t;
     },
     circle: ({ props: e }) => {
       const t = ["rounded-full flex justify-center items-center shrink-0 border outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline"];
       return e.size === "lg" ? t.push("h-5 w-5") : e.size === "xl" ? t.push("h-6 w-6") : t.push("h-4 w-4"), t;
     },
     circleIcon: ({ props: e, data: t }) => {
-      const s = [];
-      return t.selected || s.push("opacity-0"), e.size === "sm" || e.size === "xs" ? s.push("h-2") : e.size === "lg" ? s.push("h-2.5") : e.size === "xl" ? s.push("h-3") : s.push("h-2"), s;
+      const r = [];
+      return t.selected || r.push("opacity-0"), e.size === "sm" || e.size === "xs" ? r.push("h-2") : e.size === "lg" ? r.push("h-2.5") : e.size === "xl" ? r.push("h-3") : r.push("h-2"), r;
     },
-    label: ({ props: e }) => {
-      let t = "font-medium text-secondary-800 dark:text-secondary-200 pl-2";
-      return e.size === "xs" ? t += " text-xs" : e.size === "sm" ? t += " text-sm" : e.size === "lg" ? t += " text-lg" : e.size === "xl" && (t += " text-xl"), t;
+    label: ({ props: e, data: t }) => {
+      let r = "text-secondary-800 dark:text-secondary-200 pl-2";
+      return r += t.isInsideFormGroup ? " font-normal" : " font-medium", e.size === "xs" ? r += " text-xs" : e.size === "sm" ? r += " text-sm" : e.size === "lg" ? r += " text-lg" : e.size === "xl" && (r += " text-xl"), r;
     },
     content: ({ props: e }) => {
       let t = "pl-2";
       return e.size === "xs" ? t += " text-xs" : e.size === "sm" ? t += " text-sm" : e.size === "lg" ? t += " text-lg" : e.size === "xl" && (t += " text-xl"), t;
     }
   },
-  styles: ({ props: e, colors: t, css: s, data: n }) => {
-    const r = t.getPalette("gray"), l = t.getPalette(e.color), i = [];
-    return e.loading ? s.variables({
+  styles: ({ props: e, colors: t, css: r, data: n }) => {
+    const s = t.getPalette("gray"), l = t.getPalette(e.color), i = [];
+    return e.loading ? r.variables({
       bg: "transparent",
       border: "transparent",
       dark: {
         bg: "transparent",
         border: "transparent"
       }
-    }) : (e.disabled ? n.selected ? i.push(s.variables({
+    }) : (e.disabled ? n.selected ? i.push(r.variables({
       bg: "transparent",
-      border: r[200],
-      circle: r[200],
+      border: s[200],
+      circle: s[200],
       dark: {
         bg: "transparent",
-        border: r[700],
-        circle: r[700]
+        border: s[700],
+        circle: s[700]
       }
-    })) : i.push(s.variables({
-      bg: r[200],
-      border: r[200],
+    })) : i.push(r.variables({
+      bg: s[200],
+      border: s[200],
       dark: {
-        bg: r[700],
-        border: r[700]
+        bg: s[700],
+        border: s[700]
       }
-    })) : (n.selected ? i.push(s.variables({
+    })) : (n.selected ? i.push(r.variables({
       bg: "transparent",
       border: l[500],
       circle: l[500],
@@ -55,16 +55,16 @@ const a = {
         border: l[500],
         circle: l[500]
       }
-    })) : i.push(s.variables({
+    })) : i.push(r.variables({
       bg: "#fff",
-      border: e.glow ? l[300] : r[300],
+      border: e.glow ? l[300] : s[300],
       dark: {
-        bg: r[900],
-        border: e.glow ? l[300] : r[400]
+        bg: s[900],
+        border: e.glow ? l[300] : s[400]
       }
-    })), e.glow && i.push(s.get("glow", t.getColorOpacity(l[500], 0.5)))), i);
+    })), e.glow && i.push(r.get("glow", t.getColorOpacity(l[500], 0.5)))), i);
   }
-}, u = a;
+}, o = a;
 export {
-  u as default
+  o as default
 };

package/lib/components/scroll/Scroll.vue2.js

@@ -21,11 +21,11 @@ const L = {
       var e;
       (e = l.value) == null || e.dispatchEvent(new CustomEvent("scroll"));
     }
-    const { styles: h, classes: p, className: m } = C("Scroll", {}, t);
+    const { styles: h, classes: m, className: p } = C("Scroll", {}, t);
     return a({ scrollEl: l }), (e, R) => ($(), z("div", {
-      class: r(["flex relative overflow-hidden", [
-        o(m),
-        o(p).wrapper,
+      class: r(["flex relative overflow-hidden max-w-full max-h-full", [
+        o(p),
+        o(m).wrapper,
         e.$style.scrollwrap,
         e.horizontal ? [
           e.$style.horizontal,

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

@@ -1,13 +1,18 @@
 import { type ExtractPublicPropTypes } from 'vue';
 import { type ThemeComponent } from '../../composables/useTheme';
 declare const sliderProps: {
-    min: NumberConstructor;
-    max: NumberConstructor;
+    min: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    max: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
     step: {
-        type: NumberConstructor;
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
-    gradient: BooleanConstructor;
     modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
     id: StringConstructor;
     name: StringConstructor;
@@ -37,24 +42,24 @@ declare const sliderProps: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
     };
-    size: {
-        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
-        readonly default: "md";
-        readonly validator: (value: string) => boolean;
-    };
 };
 export type SliderProps = ExtractPublicPropTypes<typeof sliderProps>;
-type InternalClasses = 'wrapper' | 'drag';
+type InternalClasses = 'wrapper' | 'input' | 'track' | 'progress';
 export interface SliderTheme extends ThemeComponent<SliderProps, InternalClasses> {
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    min: NumberConstructor;
-    max: NumberConstructor;
+    min: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    max: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
     step: {
-        type: NumberConstructor;
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
-    gradient: BooleanConstructor;
     modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
     id: StringConstructor;
     name: StringConstructor;
@@ -84,11 +89,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly default: string | undefined;
     };
-    size: {
-        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
-        readonly default: "md";
-        readonly validator: (value: string) => boolean;
-    };
 }, {
     focus: () => void | undefined;
     blur: () => void | undefined;
@@ -96,13 +96,18 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     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<{
-    min: NumberConstructor;
-    max: NumberConstructor;
+    min: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    max: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
     step: {
-        type: NumberConstructor;
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
-    gradient: BooleanConstructor;
     modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
     id: StringConstructor;
     name: StringConstructor;
@@ -132,17 +137,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly default: string | undefined;
     };
-    size: {
-        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
-        readonly default: "md";
-        readonly validator: (value: string) => boolean;
-    };
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;
     color: string;
-    size: import("../../composables/useCommon").Size;
     loading: boolean;
     loadingStatus: import("../loader/Loader.vue").LoaderStatus;
     readonly: boolean;
@@ -150,8 +149,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     validateOnInput: boolean;
     hideFooter: boolean;
     rules: unknown[];
-    gradient: boolean;
-    step: number;
+    max: string | number;
+    min: string | number;
+    step: string | number;
 }, {}>, {
     prefix?(_: {
         value: number;

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

@@ -1,148 +1,7 @@
-import { defineComponent as j, ref as u, watch as D, computed as G, openBlock as k, createBlock as H, normalizeClass as g, unref as l, normalizeStyle as N, withCtx as J, createElementVNode as c, renderSlot as C, createVNode as O, createElementBlock as Q, toDisplayString as U, createCommentVNode as Y } from "vue";
-import { useEventListener as f } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
-import { useCommon as V } from "../../composables/useCommon.js";
-import { useColors as Z } from "../../composables/useColors.js";
-import { useInteractive as P } from "../../composables/useInteractive.js";
-import { useInputtable as b } from "../../composables/useInputtable.js";
-import { useTheme as ee } from "../../composables/useTheme.js";
-import te from "../label/Label.vue.js";
-import re from "../progress/Progress.vue.js";
-const oe = { class: "flex items-center relative w-full" }, ae = { class: "-mx-2" }, se = ["textContent"], le = {
-  ...V.props(),
-  ...Z.props("primary"),
-  ...P.props(),
-  ...b.props(),
-  min: Number,
-  max: Number,
-  step: {
-    type: Number,
-    default: 1
-  },
-  gradient: Boolean
-}, ne = {
-  name: "XSlider",
-  validators: {
-    ...V.validators()
-  }
-}, be = /* @__PURE__ */ j({
-  ...ne,
-  props: le,
-  emits: b.emits(!1),
-  setup(R, { expose: X, emit: L }) {
-    const d = R, x = L, v = u(null), o = u(null), n = u(null), t = u(Number(d.modelValue ?? 0)), { focus: p, blur: S } = P(v);
-    D(() => d.modelValue, (e) => {
-      t.value = Number(e ?? 0);
-    }), D(t, (e) => {
-      x("update:modelValue", e);
-    });
-    const a = u(), w = G(() => !!a.value);
-    function W(e) {
-      if (e.stopPropagation(), !o.value || !n.value)
-        return;
-      p();
-      const r = n.value.offsetWidth;
-      let s = Math.floor(e.offsetX * 100 / r);
-      s < 0 && (s = 0), s > 100 && (s = 100), t.value = s, setTimeout(() => {
-        var m;
-        a.value = {
-          x: e.x,
-          y: e.y,
-          maxWidth: r,
-          offsetX: (m = o.value) == null ? void 0 : m.offsetLeft
-        };
-      }), e.preventDefault(), e.stopPropagation();
-    }
-    function $(e) {
-      !o.value || !n.value || (p(), a.value = {
-        x: e.x,
-        y: e.y,
-        maxWidth: n.value.offsetWidth,
-        offsetX: o.value.offsetLeft
-      }, e.preventDefault(), e.stopPropagation());
-    }
-    function B(e) {
-      if (!a.value || !o.value)
-        return;
-      const { x: r, maxWidth: s, offsetX: m } = a.value, _ = e.x - r;
-      if (_ === 0)
-        return;
-      const K = m + _;
-      let i = Math.floor(K * 100 / s);
-      i < 0 && (i = 0), i > 100 && (i = 100), t.value = i, e.preventDefault(), e.stopPropagation();
-    }
-    function E(e) {
-      a.value && (a.value = void 0, e.preventDefault(), e.stopPropagation());
-    }
-    typeof window < "u" && (f(n, "pointerdown", W, !1), f(o, "pointerdown", $, !1), f(window, "pointermove", B, !0), f(window, "pointerup", E, !0)), f(v, "keydown", I);
-    function I(e) {
-      if (e.code === "ArrowLeft") {
-        const r = t.value - 1;
-        r >= 0 && (t.value = r), e.preventDefault();
-      } else if (e.code === "ArrowRight") {
-        const r = t.value + 1;
-        r <= 100 && (t.value = r), e.preventDefault();
-      }
-    }
-    const {
-      errorInternal: y,
-      reset: q,
-      validate: M,
-      setError: z,
-      isInsideForm: A
-    } = b(d, { focus: p, emit: x, withListeners: !1 }), { styles: T, classes: h, className: F } = ee("Slider", {}, d);
-    return X({ focus: p, blur: S, reset: q, validate: M, setError: z }), (e, r) => (k(), H(te, {
-      ref_key: "elRef",
-      ref: v,
-      tabindex: "0",
-      class: g(["group", [
-        l(F),
-        l(h).wrapper
-      ]]),
-      style: N(l(T)),
-      disabled: e.disabled,
-      required: e.required,
-      "is-inside-form": l(A),
-      label: e.label
-    }, {
-      default: J(() => [
-        c("div", oe, [
-          C(e.$slots, "prefix", { value: t.value }),
-          c("div", {
-            ref_key: "progressRef",
-            ref: n,
-            class: g([[w.value ? "cursor-grabbing" : "cursor-grab"], "relative w-full py-2 mx-2"])
-          }, [
-            c("div", ae, [
-              O(re, {
-                percentage: t.value,
-                animate: !1,
-                thick: "",
-                class: "w-full",
-                gradient: e.gradient
-              }, null, 8, ["percentage", "gradient"])
-            ]),
-            c("div", {
-              ref_key: "dragRef",
-              ref: o,
-              class: g(["absolute group-focus:border-[color:var(--x-slider-border)]", [
-                l(h).drag,
-                w.value ? "cursor-grabbing" : "cursor-grab"
-              ]]),
-              style: N(`left: ${t.value}%;`)
-            }, null, 6)
-          ], 2),
-          C(e.$slots, "suffix", { value: t.value })
-        ]),
-        l(y) ? (k(), Q("p", {
-          key: 0,
-          class: "text-sm text-error-500 mt-1",
-          textContent: U(l(y))
-        }, null, 8, se)) : Y("", !0)
-      ]),
-      _: 3
-    }, 8, ["style", "disabled", "required", "is-inside-form", "label", "class"]));
-  }
-});
+import o from "./Slider.vue2.js";
+import "./Slider.vue3.js";
+import r from "../../_virtual/_plugin-vue_export-helper.js";
+const _ = /* @__PURE__ */ r(o, [["__scopeId", "data-v-0298db68"]]);
 export {
-  be as default
+  _ as default
 };

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

@@ -1,4 +1,103 @@
-import f from "./Slider.vue.js";
+import { defineComponent as E, ref as d, watch as p, computed as F, openBlock as f, createBlock as c, normalizeStyle as v, unref as r, normalizeClass as a, withCtx as P, createElementVNode as o, renderSlot as b, mergeProps as R, toHandlers as H, createCommentVNode as L } from "vue";
+import { useCommon as T } from "../../composables/useCommon.js";
+import { useColors as X } from "../../composables/useColors.js";
+import { useInteractive as y } from "../../composables/useInteractive.js";
+import { useInputtable as i } from "../../composables/useInputtable.js";
+import { useTheme as j } from "../../composables/useTheme.js";
+import x from "../label/Label.vue.js";
+import A from "../inputFooter/InputFooter.vue.js";
+const D = { class: "flex items-center relative w-full gap-2 min-h-[1.25rem]" }, G = { class: "relative flex items-center flex-1" }, J = ["id", "disabled", "name", "max", "min", "step", "readonly", "value"], K = {
+  ...X.props("primary"),
+  ...y.props(),
+  ...i.props(),
+  min: {
+    type: [Number, String],
+    default: 0
+  },
+  max: {
+    type: [Number, String],
+    default: 100
+  },
+  step: {
+    type: [Number, String],
+    default: 1
+  }
+}, M = {
+  name: "XSlider",
+  validators: {
+    ...T.validators()
+  }
+}, le = /* @__PURE__ */ E({
+  ...M,
+  props: K,
+  emits: i.emits(),
+  setup(h, { expose: N, emit: g }) {
+    const s = h, n = g, m = d(null), l = d(Number(s.modelValue ?? 0)), { focus: u, blur: w } = y(m);
+    p(() => s.modelValue, (e) => {
+      l.value = Number(e ?? 0);
+    }), p(l, (e) => {
+      n("update:modelValue", e);
+    });
+    const S = F(() => (l.value - Number(s.min)) / (Number(s.max) - Number(s.min)) * 100), {
+      errorInternal: C,
+      hideFooterInternal: _,
+      isInsideForm: k,
+      inputListeners: I,
+      reset: V,
+      validate: $,
+      setError: q
+    } = i(s, { focus: u, emit: n }), { styles: z, classes: t, className: B } = j("Slider", {}, s);
+    return N({ focus: u, blur: w, reset: V, validate: $, setError: q }), (e, O) => (f(), c(x, {
+      style: v(r(z)),
+      disabled: e.disabled,
+      required: e.required,
+      "is-inside-form": r(k),
+      label: e.label,
+      class: a([
+        r(B),
+        r(t).wrapper
+      ]),
+      tooltip: e.tooltip
+    }, {
+      default: P(() => [
+        o("div", D, [
+          b(e.$slots, "prefix", { value: l.value }, void 0, !0),
+          o("div", G, [
+            o("input", R({
+              id: e.id,
+              ref_key: "elRef",
+              ref: m,
+              type: "range",
+              class: [r(t).input, "absolute w-full z-10 appearance-none bg-transparent focus:outline-none focus-visible:outline-none"],
+              disabled: e.disabled,
+              name: e.name,
+              max: e.max,
+              min: e.min,
+              step: e.step,
+              readonly: e.readonly,
+              value: l.value
+            }, H(r(I), !0)), null, 16, J),
+            o("div", {
+              class: a(["absolute w-full", r(t).track])
+            }, [
+              o("div", {
+                class: a(r(t).progress),
+                style: v({ width: S.value + "%" })
+              }, null, 6)
+            ], 2)
+          ]),
+          b(e.$slots, "suffix", { value: l.value }, void 0, !0)
+        ]),
+        r(_) ? L("", !0) : (f(), c(A, {
+          key: 0,
+          error: r(C),
+          helper: e.helper
+        }, null, 8, ["error", "helper"]))
+      ]),
+      _: 3
+    }, 8, ["style", "disabled", "required", "is-inside-form", "label", "class", "tooltip"]));
+  }
+});
 export {
-  f as default
+  le as default
 };

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

@@ -0,0 +1,4 @@
+const e = "";
+export {
+  e as default
+};

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

@@ -1,16 +1,20 @@
-const o = {
+const l = {
   classes: {
-    wrapper: "",
-    drag: "w-[20px] h-[20px] -mt-[13px] -ml-[10px] rounded-full bg-white border shadow-sm"
+    wrapper: ({ props: r }) => {
+      const e = [];
+      return r.disabled && e.push("cursor-not-allowed"), e;
+    },
+    input: "w-[calc(100%+0.5rem)] -ml-1 disabled:cursor-not-allowed",
+    track: "h-1.5 bg-secondary-200 dark:bg-secondary-700 rounded-md overflow-hidden",
+    progress: "h-full bg-[color:var(--x-slider-bg)]"
   },
-  styles: ({ props: t, colors: e, css: r }) => {
-    const a = e.getPalette("primary"), s = e.getPalette(t.color);
-    return r.variables({
-      bg: s[500],
-      border: a[500]
+  styles: ({ props: r, colors: e, css: s }) => {
+    const o = e.getPalette(r.color);
+    return s.variables({
+      bg: o[400]
     });
   }
-}, l = o;
+}, a = l;
 export {
-  l as default
+  a as default
 };

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

@@ -1,16 +1,5 @@
-const o = {
-  classes: {
-    wrapper: "",
-    drag: "w-[16px] h-[16px] -mt-[11px] -ml-[8px] rounded-full bg-secondary-900 dark:bg-secondary-100"
-  },
-  styles: ({ props: r, colors: e, css: t }) => {
-    const a = e.getPalette("primary"), s = e.getPalette(r.color);
-    return t.variables({
-      bg: s[500],
-      border: a[500]
-    });
-  }
-}, l = o;
+import e from "./Slider.base.theme.js";
+const t = e, o = t;
 export {
-  l as default
+  o as default
 };