@indielayer/ui 1.2.0 → 1.4.0

package/lib/components/checkbox/Checkbox.vue2.js

@@ -1,108 +1,142 @@
-import { defineComponent as K, ref as b, watch as h, openBlock as t, createElementBlock as n, normalizeStyle as L, unref as s, normalizeClass as l, createElementVNode as r, withKeys as M, withModifiers as N, withDirectives as D, vModelCheckbox as R, createBlock as X, renderSlot as v, toDisplayString as _, createVNode as F } from "vue";
-import { useTheme as P } from "../../composables/theme.js";
-import { useCommon as k } from "../../composables/common.js";
-import { useColors as T } from "../../composables/colors.js";
-import { useInteractive as y } from "../../composables/interactive.js";
-import { useInputtable as d } from "../../composables/inputtable.js";
-import U from "../spinner/Spinner.vue.js";
-import j from "../helpers/InputError.js";
-import A from "./Checkbox.theme.js";
-const G = ["onKeypress"], H = ["aria-checked", "aria-disabled", "disabled", "name", "required"], J = /* @__PURE__ */ r("path", { d: "M0 11l2-2 5 5L18 3l2 2L7 18z" }, null, -1), O = [
-  J
-], Q = ["textContent"], W = {
-  ...k.props(),
-  ...T.props("primary"),
-  ...y.props(),
-  ...d.props(),
-  label: String,
-  helper: String,
+import { defineComponent as P, ref as w, watch as m, unref as o, openBlock as i, createElementBlock as p, normalizeStyle as R, normalizeClass as u, createElementVNode as d, withKeys as T, withModifiers as H, withDirectives as O, mergeProps as U, toHandlers as X, vModelCheckbox as j, createBlock as V, renderSlot as C, toDisplayString as J, createCommentVNode as Q } from "vue";
+import { useTheme as W } from "../../composables/useTheme.js";
+import { useCommon as I } from "../../composables/useCommon.js";
+import { useColors as Y } from "../../composables/useColors.js";
+import { useInteractive as z } from "../../composables/useInteractive.js";
+import { useInputtable as f } from "../../composables/useInputtable.js";
+import Z from "../spinner/Spinner.vue.js";
+import x from "../inputFooter/InputFooter.vue.js";
+const ee = ["onKeypress"], se = ["id", "name", "aria-checked", "aria-disabled", "disabled", "required"], le = {
+  key: 1,
+  name: "check-icon",
+  class: "w-2/3 h-[2px] bg-white dark:bg-gray-900"
+}, ae = /* @__PURE__ */ d("path", { d: "M0 11l2-2 5 5L18 3l2 2L7 18z" }, null, -1), oe = [
+  ae
+], re = ["textContent"], ie = {
+  ...I.props(),
+  ...Y.props("primary"),
+  ...z.props(),
+  ...f.props(),
+  value: [String, Number],
+  indeterminate: Boolean,
   glow: Boolean
-}, Y = {
+}, te = {
   name: "XCheckbox",
   validators: {
-    ...k.validators()
+    ...I.validators()
   }
-}, ie = /* @__PURE__ */ K({
-  ...Y,
-  props: W,
-  emits: d.emits(!1),
-  setup(g, { expose: w, emit: p }) {
-    const i = g, u = b(null), o = b(!1);
-    h(() => i.modelValue, (e) => {
-      o.value = !!e;
-    }, { immediate: !0 }), h(() => o.value, (e) => {
-      p("update:modelValue", e);
-    });
-    function m() {
-      o.value = !o.value;
+}, he = /* @__PURE__ */ P({
+  ...te,
+  props: ie,
+  emits: f.emits(!1),
+  setup(A, { expose: B, emit: $ }) {
+    const s = A, v = $, h = w(null), l = w(!1);
+    function b() {
+      l.value = !l.value;
     }
-    const { focus: c, blur: C } = y(u), {
-      errorInternal: z,
-      isInsideForm: B,
-      reset: I,
-      validate: S,
-      setError: V
-    } = d(i, { focus: c, emit: p, withListeners: !1 }), { styles: E, classes: a, className: $ } = P("checkbox", A, i, { checked: o });
-    return w({ focus: c, blur: C, toggle: m, reset: I, validate: S, setError: V }), (e, f) => (t(), n("label", {
-      style: L(s(E)),
-      class: l([
-        s($),
-        s(a).wrapper,
-        { "mb-3": s(B) }
+    const { focus: y, blur: F } = z(h), {
+      errorInternal: G,
+      hideFooterInternal: N,
+      isInsideForm: S,
+      isInsideFormGroup: c,
+      isFirstValidation: _,
+      formGroup: r,
+      reset: q,
+      validate: k,
+      setError: E
+    } = f(s, { focus: y, emit: v, withListeners: !1 });
+    c ? (m(() => r.value, () => {
+      const e = o(r.value);
+      e && Array.isArray(e) && e.includes(s.value) ? l.value = !0 : l.value = !1;
+    }, { immediate: !0, deep: !0 }), m(() => l.value, (e) => {
+      if (!s.value)
+        return;
+      const a = o(r.value);
+      if (e)
+        if (a && Array.isArray(a)) {
+          if (!a.includes(s.value)) {
+            const n = [...a, s.value];
+            r.setValue(n);
+          }
+        } else
+          r.setValue([s.value]);
+      else if (a && Array.isArray(a) && a.includes(s.value)) {
+        const n = a.findIndex((D) => D === s.value), g = [...a];
+        g.splice(n, 1), r.setValue(g);
+      }
+    })) : (m(() => s.modelValue, (e) => {
+      l.value = !!e;
+    }, { immediate: !0 }), m(() => l.value, (e) => {
+      v("update:modelValue", e);
+    }));
+    const K = {
+      input: () => {
+        c || setTimeout(() => {
+          s.validateOnInput && !_.value && k(s.modelValue);
+        }, 0);
+      }
+    }, { styles: L, classes: t, className: M } = W("Checkbox", {}, s, { checked: l, isInsideForm: S, isInsideFormGroup: c });
+    return B({ focus: y, blur: F, toggle: b, reset: q, validate: k, setError: E }), (e, a) => (i(), p("label", {
+      style: R(o(L)),
+      class: u([
+        o(M),
+        o(t).wrapper
       ])
     }, [
-      r("div", {
+      d("div", {
         ref_key: "elRef",
-        ref: u,
-        class: l(["flex items-center", { "cursor-not-allowed": e.disabled }]),
+        ref: h,
+        class: u(o(t).content),
         tabindex: "0",
-        onKeypress: M(N(m, ["prevent", "stop"]), ["space"])
+        onKeypress: T(H(b, ["prevent", "stop"]), ["space"])
       }, [
-        D(r("input", {
-          "onUpdate:modelValue": f[0] || (f[0] = (q) => o.value = q),
-          "aria-checked": o.value ? "true" : "false",
+        O(d("input", U({
+          id: e.id,
+          "onUpdate:modelValue": a[0] || (a[0] = (n) => l.value = n),
+          name: e.name,
+          "aria-checked": e.indeterminate ? "mixed" : l.value ? "true" : "false",
           "aria-disabled": e.disabled ? "true" : void 0,
           type: "checkbox",
           class: "invisible absolute",
           disabled: e.disabled || e.loading,
-          name: e.name,
           required: e.required
-        }, null, 8, H), [
-          [R, o.value]
+        }, X(K, !0)), null, 16, se), [
+          [j, l.value]
         ]),
-        r("div", {
-          class: l([
-            s(a).box,
+        d("div", {
+          class: u([
+            o(t).box,
             [e.glow && !e.disabled && !e.loading ? e.$style["checkbox--glow"] : ""]
           ])
         }, [
-          e.loading ? (t(), X(U, {
+          e.loading ? (i(), V(Z, {
             key: 0,
             size: e.size,
             class: "absolute"
-          }, null, 8, ["size"])) : v(e.$slots, "icon", { key: 1 }, () => [
-            (t(), n("svg", {
+          }, null, 8, ["size"])) : e.indeterminate ? (i(), p("span", le)) : C(e.$slots, "icon", { key: 2 }, () => [
+            (i(), p("svg", {
               viewBox: "0 0 20 20",
-              class: l([s(a).icon, { "opacity-0": !o.value }])
-            }, O, 2))
+              class: u([o(t).icon, { "opacity-0": !l.value }])
+            }, oe, 2))
           ])
         ], 2),
-        r("div", {
-          class: l(s(a).label)
+        d("div", {
+          class: u(o(t).label)
         }, [
-          e.label ? (t(), n("span", {
+          e.label ? (i(), p("span", {
             key: 0,
-            textContent: _(e.label)
-          }, null, 8, Q)) : v(e.$slots, "default", { key: 1 })
+            textContent: J(e.label)
+          }, null, 8, re)) : C(e.$slots, "default", { key: 1 })
         ], 2)
-      ], 42, G),
-      F(s(j), {
-        error: s(z),
+      ], 42, ee),
+      o(N) ? Q("", !0) : (i(), V(x, {
+        key: 0,
+        error: o(G),
         helper: e.helper
-      }, null, 8, ["error", "helper"])
+      }, null, 8, ["error", "helper"]))
     ], 6));
   }
 });
 export {
-  ie as default
+  he as default
 };

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

@@ -1,3 +1,2 @@
 export { default as XCheckbox } from './Checkbox.vue';
-export type { CheckboxProps } from './Checkbox.vue';
-export type { CheckboxTheme } from './Checkbox.theme';
+export type { CheckboxProps, CheckboxTheme } from './Checkbox.vue';

package/lib/components/checkbox/theme/Checkbox.base.theme.d.ts

@@ -0,0 +1,3 @@
+import type { CheckboxTheme } from '../Checkbox.vue';
+declare const theme: CheckboxTheme;
+export default theme;

package/lib/components/checkbox/theme/Checkbox.base.theme.js

@@ -0,0 +1,59 @@
+const o = {
+  classes: {
+    wrapper: ({ data: r }) => {
+      const e = ["inline-block relative cursor-pointer align-middle"];
+      return r.isInsideForm && !r.isInsideFormGroup && e.push("mb-3"), e;
+    },
+    box: ({ props: r }) => {
+      const e = ["rounded flex justify-center items-center shrink-0 border-2 border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]"];
+      return r.size === "xs" || r.size === "sm" ? e.push("h-4 w-4") : r.size === "xl" ? e.push("h-6 w-6") : e.push("h-5 w-5"), e;
+    },
+    content: ({ props: r }) => {
+      const e = ["flex items-center"];
+      return r.disabled && e.push("cursor-not-allowed"), e;
+    },
+    icon: ({ props: r }) => {
+      const e = ["fill-current text-white dark:text-gray-900"];
+      return r.size === "xs" || r.size === "sm" ? e.push("h-2 w-2") : r.size === "xl" ? e.push("h-4 w-4") : e.push("h-3 w-3"), e;
+    },
+    label: ({ props: r }) => {
+      const e = ["inline-block font-medium text-gray-800 dark:text-gray-200 pl-2"];
+      return r.size === "xs" ? e.push("text-xs") : r.size === "sm" ? e.push("text-sm") : r.size === "lg" ? e.push("text-lg") : r.size === "xl" && e.push("text-xl"), e;
+    }
+  },
+  styles({ props: r, colors: e, css: l, data: i }) {
+    const s = e.getPalette("gray"), t = e.getPalette(r.color), a = [];
+    return r.loading ? l.variables({
+      bg: "transparent",
+      border: "transparent",
+      dark: {
+        bg: "transparent",
+        border: "transparent"
+      }
+    }) : (r.disabled ? a.push(l.variables({
+      bg: s[100],
+      border: s[200],
+      dark: {
+        bg: s[800],
+        border: s[700]
+      }
+    })) : (i.checked ? a.push(l.variables({
+      bg: t[500],
+      border: t[500],
+      dark: {
+        bg: t[500],
+        border: t[500]
+      }
+    })) : a.push(l.variables({
+      bg: "#fff",
+      border: r.glow ? t[300] : s[300],
+      dark: {
+        bg: s[900],
+        border: r.glow ? t[300] : s[400]
+      }
+    })), r.glow && a.push(l.get("glow", e.getColorOpacity(t[500], 0.5)))), a);
+  }
+}, n = o;
+export {
+  n as default
+};

package/lib/components/checkbox/theme/Checkbox.carbon.theme.d.ts

@@ -0,0 +1,3 @@
+import type { CheckboxTheme } from '../Checkbox.vue';
+declare const theme: CheckboxTheme;
+export default theme;

package/lib/components/checkbox/theme/Checkbox.carbon.theme.js

@@ -0,0 +1,59 @@
+const o = {
+  classes: {
+    wrapper: ({ data: r }) => {
+      const e = ["inline-block relative cursor-pointer align-middle"];
+      return r.isInsideForm && !r.isInsideFormGroup && e.push("mb-8"), e;
+    },
+    box: ({ props: r }) => {
+      const e = ["rounded-sm flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)] mt-0.5"];
+      return r.size === "xs" || r.size === "sm" ? e.push("h-3 w-3") : r.size === "xl" ? e.push("h-5 w-5") : e.push("h-4 w-4"), e;
+    },
+    content: ({ props: r }) => {
+      const e = ["flex"];
+      return r.disabled && e.push("cursor-not-allowed"), e;
+    },
+    icon: ({ props: r }) => {
+      const e = ["fill-current text-white dark:text-gray-900"];
+      return r.size === "xs" || r.size === "sm" ? e.push("h-2 w-2") : r.size === "xl" ? e.push("h-3.5 w-3.5") : e.push("h-2.5 w-2.5"), e;
+    },
+    label: ({ props: r }) => {
+      const e = ["text-gray-800 dark:text-gray-200 pl-2 text-sm"];
+      return r.size === "xs" ? e.push("text-xs") : r.size === "sm" ? e.push("text-sm") : r.size === "lg" ? e.push("text-lg") : r.size === "xl" && e.push("text-xl"), e;
+    }
+  },
+  styles({ props: r, colors: e, css: l, data: i }) {
+    const s = e.getPalette("gray"), t = e.getPalette(r.color), a = [];
+    return r.loading ? l.variables({
+      bg: "transparent",
+      border: "transparent",
+      dark: {
+        bg: "transparent",
+        border: "transparent"
+      }
+    }) : (r.disabled ? a.push(l.variables({
+      bg: s[100],
+      border: s[200],
+      dark: {
+        bg: s[800],
+        border: s[700]
+      }
+    })) : (i.checked ? a.push(l.variables({
+      bg: t[500],
+      border: t[500],
+      dark: {
+        bg: t[500],
+        border: t[500]
+      }
+    })) : a.push(l.variables({
+      bg: "#fff",
+      border: r.glow ? t[300] : s[900],
+      dark: {
+        bg: s[900],
+        border: r.glow ? t[300] : s[300]
+      }
+    })), r.glow && a.push(l.get("glow", e.getColorOpacity(t[500], 0.5)))), a);
+  }
+}, n = o;
+export {
+  n as default
+};

package/lib/components/container/Container.vue.d.ts

@@ -1,23 +1,40 @@
 import type { ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const containerProps: {
     tag: {
         type: StringConstructor;
         default: string;
     };
+    fluid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 };
 export type ContainerProps = ExtractPublicPropTypes<typeof containerProps>;
+type InternalClasses = 'wrapper';
+export interface ContainerTheme extends ThemeComponent<ContainerProps, InternalClasses> {
+}
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     tag: {
         type: StringConstructor;
         default: string;
     };
+    fluid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     tag: {
         type: StringConstructor;
         default: string;
     };
+    fluid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     tag: string;
+    fluid: boolean;
 }, {}>, {
     default?(_: {}): any;
 }>;

package/lib/components/container/Container.vue.js

@@ -1,21 +1,24 @@
-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, renderSlot as d } from "vue";
-import { useTheme as _ } from "../../composables/theme.js";
-import y from "./Container.theme.js";
-const C = {
+import { defineComponent as r, openBlock as c, createBlock as p, resolveDynamicComponent as i, normalizeStyle as f, unref as e, normalizeClass as m, withCtx as u, renderSlot as d } from "vue";
+import { useTheme as y } from "../../composables/useTheme.js";
+const _ = {
   tag: {
     type: String,
     default: "div"
+  },
+  fluid: {
+    type: Boolean,
+    default: !1
   }
-}, h = { name: "XContainer" }, w = /* @__PURE__ */ l({
-  ...h,
-  props: C,
-  setup(o) {
-    const s = o, { styles: n, classes: r, className: a } = _("container", y, s);
-    return (t, g) => (c(), m(p(t.tag), {
-      style: i(e(n)),
-      class: f([
-        e(a),
-        e(r).wrapper
+}, C = { name: "XContainer" }, S = /* @__PURE__ */ r({
+  ...C,
+  props: _,
+  setup(s) {
+    const o = s, { styles: a, classes: n, className: l } = y("Container", {}, o);
+    return (t, g) => (c(), p(i(t.tag), {
+      style: f(e(a)),
+      class: m([
+        e(l),
+        e(n).wrapper
       ])
     }, {
       default: u(() => [
@@ -26,5 +29,5 @@ const C = {
   }
 });
 export {
-  w as default
+  S as default
 };

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

@@ -1,3 +1,2 @@
 export { default as XContainer } from './Container.vue';
-export type { ContainerProps } from './Container.vue';
-export type { ContainerTheme } from './Container.theme';
+export type { ContainerProps, ContainerTheme } from './Container.vue';

package/lib/components/container/theme/Container.base.theme.d.ts

@@ -0,0 +1,3 @@
+import type { ContainerTheme } from '../Container.vue';
+declare const theme: ContainerTheme;
+export default theme;

package/lib/components/container/theme/Container.base.theme.js

@@ -0,0 +1,11 @@
+const a = {
+  classes: {
+    wrapper: ({ props: s }) => {
+      const e = ["px-4 md:px-8"];
+      return s.fluid || e.push("max-w-screen-2xl mx-auto"), e;
+    }
+  }
+}, t = a;
+export {
+  t as default
+};

package/lib/components/container/theme/Container.carbon.theme.d.ts

@@ -0,0 +1,3 @@
+import type { ContainerTheme } from '../Container.vue';
+declare const theme: ContainerTheme;
+export default theme;

package/lib/components/container/theme/Container.carbon.theme.js

@@ -0,0 +1,5 @@
+import e from "./Container.base.theme.js";
+const t = e, o = t;
+export {
+  o as default
+};

package/lib/components/divider/Divider.vue.d.ts

@@ -1,9 +1,13 @@
 import type { ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const dividerProps: {
     label: StringConstructor;
     vertical: BooleanConstructor;
 };
 export type DividerProps = ExtractPublicPropTypes<typeof dividerProps>;
+type InternalClasses = 'wrapper' | 'label' | 'line';
+export interface DividerTheme extends ThemeComponent<DividerProps, InternalClasses> {
+}
 declare const _default: import("vue").DefineComponent<{
     label: StringConstructor;
     vertical: BooleanConstructor;

package/lib/components/divider/Divider.vue.js

@@ -1,16 +1,15 @@
-import { defineComponent as p, openBlock as o, createElementBlock as s, normalizeStyle as r, unref as t, normalizeClass as a, createElementVNode as i, toDisplayString as u, createCommentVNode as v } from "vue";
-import { useTheme as h } from "../../composables/theme.js";
-import y from "./Divider.theme.js";
-const f = ["textContent"], g = {
+import { defineComponent as p, openBlock as s, createElementBlock as o, normalizeStyle as r, unref as t, normalizeClass as a, createElementVNode as i, toDisplayString as u, createCommentVNode as v } from "vue";
+import { useTheme as y } from "../../composables/useTheme.js";
+const h = ["textContent"], f = {
   label: String,
   vertical: Boolean
-}, C = { name: "XDivider" }, B = /* @__PURE__ */ p({
-  ...C,
-  props: g,
+}, g = { name: "XDivider" }, x = /* @__PURE__ */ p({
+  ...g,
+  props: f,
   setup(n) {
-    const m = n, { styles: c, classes: l, className: d } = h("divider", y, m);
-    return (e, b) => (o(), s("div", {
-      style: r(t(c)),
+    const c = n, { styles: m, classes: l, className: d } = y("Divider", {}, c);
+    return (e, C) => (s(), o("div", {
+      style: r(t(m)),
       class: a([
         t(d),
         t(l).wrapper
@@ -25,7 +24,7 @@ const f = ["textContent"], g = {
           }
         ])
       }, null, 6),
-      e.label ? (o(), s("div", {
+      e.label ? (s(), o("div", {
         key: 0,
         class: a(["font-medium text-sm text-gray-600 dark:text-gray-300", [
           t(l).label,
@@ -35,7 +34,7 @@ const f = ["textContent"], g = {
           }
         ]]),
         textContent: u(e.label)
-      }, null, 10, f)) : v("", !0),
+      }, null, 10, h)) : v("", !0),
       i("div", {
         class: a(t(l).line),
         style: r([
@@ -49,5 +48,5 @@ const f = ["textContent"], g = {
   }
 });
 export {
-  B as default
+  x as default
 };

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

@@ -1,3 +1,2 @@
 export { default as XDivider } from './Divider.vue';
-export type { DividerProps } from './Divider.vue';
-export type { DividerTheme } from './Divider.theme';
+export type { DividerProps, DividerTheme } from './Divider.vue';

package/lib/components/divider/theme/Divider.base.theme.d.ts

@@ -0,0 +1,3 @@
+import type { DividerTheme } from '../Divider.vue';
+declare const theme: DividerTheme;
+export default theme;

package/lib/components/divider/theme/Divider.carbon.theme.d.ts

@@ -0,0 +1,3 @@
+import type { DividerTheme } from '../Divider.vue';
+declare const theme: DividerTheme;
+export default theme;

package/lib/components/divider/theme/Divider.carbon.theme.js

@@ -0,0 +1,5 @@
+import e from "./Divider.base.theme.js";
+const t = e, o = t;
+export {
+  o as default
+};

package/lib/components/drawer/Drawer.vue.d.ts

@@ -1,4 +1,5 @@
 import { type PropType, type ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const drawerPosition: readonly ["left", "right", "top", "bottom"];
 declare const drawerProps: {
     modelValue: BooleanConstructor;
@@ -26,6 +27,9 @@ declare const drawerProps: {
 };
 export type DrawerPosition = typeof drawerPosition[number];
 export type DrawerProps = ExtractPublicPropTypes<typeof drawerProps>;
+type InternalClasses = 'wrapper' | 'backdrop';
+export interface DrawerTheme extends ThemeComponent<DrawerProps, InternalClasses> {
+}
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue: BooleanConstructor;
     position: {
@@ -78,12 +82,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    position: "left" | "right" | "top" | "bottom";
     modelValue: boolean;
-    height: string | number;
+    teleportTo: string | HTMLElement;
     width: string | number;
-    position: "left" | "right" | "top" | "bottom";
+    height: string | number;
     backdrop: boolean;
-    teleportTo: string | HTMLElement;
 }, {}>, {
     header?(_: {}): any;
     default?(_: {}): any;