@indielayer/ui 1.0.10 → 1.1.0

package/lib/components/button/ButtonGroup.vue.d.ts

@@ -1,3 +1,31 @@
+import { type ExtractPublicPropTypes } from 'vue';
+declare const buttonGroupProps: {
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    outlined: BooleanConstructor;
+    rounded: BooleanConstructor;
+    ghost: BooleanConstructor;
+    light: BooleanConstructor;
+    flat: BooleanConstructor;
+    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 ButtonGroupProps = ExtractPublicPropTypes<typeof buttonGroupProps>;
+export type ButtonGroupInjection = {
+    groupProps: ButtonGroupProps;
+    isButtonGroup: boolean;
+};
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     tag: {
         type: StringConstructor;
@@ -7,6 +35,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     rounded: BooleanConstructor;
     ghost: BooleanConstructor;
     light: BooleanConstructor;
+    flat: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     color: {
@@ -27,6 +56,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     rounded: BooleanConstructor;
     ghost: BooleanConstructor;
     light: BooleanConstructor;
+    flat: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     color: {
@@ -39,14 +69,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly validator: (value: string) => boolean;
     };
 }>>, {
-    size: import("../../composables/common").Size;
+    disabled: boolean;
+    flat: boolean;
     color: string;
-    light: boolean;
-    outlined: boolean;
+    size: import("../../composables/common").Size;
+    ghost: boolean;
     tag: string;
+    outlined: boolean;
     rounded: boolean;
-    ghost: boolean;
-    disabled: boolean;
+    light: boolean;
     loading: boolean;
 }, {}>, {
     default?(_: {}): any;

package/lib/components/button/ButtonGroup.vue.js

@@ -0,0 +1,9 @@
+import o from "./ButtonGroup.vue2.js";
+import s from "./ButtonGroup.vue3.js";
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const r = {
+  $style: s
+}, f = /* @__PURE__ */ t(o, [["__cssModules", r]]);
+export {
+  f as default
+};

package/lib/components/button/ButtonGroup.vue2.js

@@ -0,0 +1,54 @@
+import { defineComponent as a, provide as u, openBlock as m, createBlock as i, resolveDynamicComponent as d, normalizeStyle as f, unref as t, normalizeClass as c, withCtx as B, renderSlot as g } from "vue";
+import { useTheme as y } from "../../composables/theme.js";
+import { useCommon as r } from "../../composables/common.js";
+import { useColors as h } from "../../composables/colors.js";
+import { useInteractive as v } from "../../composables/interactive.js";
+import { injectButtonGroupKey as C } from "../../composables/keys.js";
+import b from "./ButtonGroup.theme.js";
+const G = {
+  ...r.props(),
+  ...h.props(),
+  ...v.props(),
+  tag: {
+    type: String,
+    default: "div"
+  },
+  outlined: Boolean,
+  rounded: Boolean,
+  ghost: Boolean,
+  light: Boolean,
+  flat: Boolean
+}, _ = {
+  name: "XButtonGroup",
+  validators: {
+    ...r.validators()
+  }
+}, I = /* @__PURE__ */ a({
+  ..._,
+  props: G,
+  setup(s) {
+    const e = s;
+    u(C, {
+      groupProps: e,
+      isButtonGroup: !0
+    });
+    const { className: n, classes: p, styles: l } = y("button-group", b, e);
+    return (o, S) => (m(), i(d(o.tag), {
+      style: f(t(l)),
+      class: c([
+        t(n),
+        o.$style["button-group"],
+        o.rounded ? o.$style["button-group--rounded"] : "",
+        t(p).wrapper
+      ])
+    }, {
+      default: B(() => [
+        g(o.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["style", "class"]));
+  }
+});
+export {
+  I as default
+};

package/lib/components/button/ButtonGroup.vue3.js

@@ -0,0 +1,7 @@
+const o = {
+  "button-group": "_button-group_1p7wb_2",
+  "button-group--rounded": "_button-group--rounded_1p7wb_1"
+};
+export {
+  o as default
+};

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

@@ -0,0 +1,6 @@
+export { default as XButton } from './Button.vue';
+export type { ButtonProps } from './Button.vue';
+export type { ButtonTheme } from './Button.theme';
+export { default as XButtonGroup } from './ButtonGroup.vue';
+export type { ButtonGroupProps, ButtonGroupInjection } from './ButtonGroup.vue';
+export type { ButtonGroupTheme } from './ButtonGroup.theme';

package/lib/components/card/Card.theme.d.ts

@@ -1,7 +1,10 @@
-import type { ThemeParams } from '../../composables/theme';
-declare const _default: {
-    classes: {
-        wrapper: ({ props }: ThemeParams) => string;
-    };
-};
-export default _default;
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme';
+import type { CardProps } from './Card.vue';
+type InternalClasses = 'wrapper';
+interface InternalTheme extends ThemeComponent<CardProps, InternalClasses> {
+}
+export interface CardTheme extends Omit<InternalTheme, 'classes'> {
+    classes?: Partial<ThemeClasses<CardProps, InternalClasses>>;
+}
+declare const theme: InternalTheme;
+export default theme;

package/lib/components/card/Card.theme.js

@@ -0,0 +1,8 @@
+const a = {
+  classes: {
+    wrapper: ({ props: e }) => `rounded bg-white dark:bg-gray-800${e.flat ? "" : " shadow"}`
+  }
+}, t = a;
+export {
+  t as default
+};

package/lib/components/card/Card.vue.d.ts

@@ -1,3 +1,12 @@
+import type { ExtractPublicPropTypes } from 'vue';
+declare const cardProps: {
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    flat: BooleanConstructor;
+};
+export type CardProps = ExtractPublicPropTypes<typeof cardProps>;
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     tag: {
         type: StringConstructor;

package/lib/components/card/Card.vue.js

@@ -0,0 +1,31 @@
+import { defineComponent as n, openBlock as c, createBlock as p, resolveDynamicComponent as m, unref as e, normalizeClass as f, withCtx as d, renderSlot as i } from "vue";
+import { useTheme as u } from "../../composables/theme.js";
+import _ from "./Card.theme.js";
+const y = {
+  tag: {
+    type: String,
+    default: "div"
+  },
+  flat: Boolean
+}, C = { name: "XCard" }, v = /* @__PURE__ */ n({
+  ...C,
+  props: y,
+  setup(t) {
+    const o = t, { styles: a, classes: r, className: l } = u("card", _, o);
+    return (s, h) => (c(), p(m(s.tag), {
+      styles: e(a),
+      class: f([
+        e(l),
+        e(r).wrapper
+      ])
+    }, {
+      default: d(() => [
+        i(s.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["styles", "class"]));
+  }
+});
+export {
+  v as default
+};

package/lib/components/card/Card.vue2.js

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

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

@@ -0,0 +1,3 @@
+export { default as XCard } from './Card.vue';
+export type { CardProps } from './Card.vue';
+export type { CardTheme } from './Card.theme';

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

@@ -1,11 +1,14 @@
-import type { ThemeParams } from '../../composables/theme';
-declare const _default: {
-    classes: {
-        wrapper: string;
-        box: ({ props }: ThemeParams) => string[];
-        icon: ({ props }: ThemeParams) => string[];
-        label: ({ props }: ThemeParams) => string[];
-    };
-    styles({ props, colors, css, data }: ThemeParams): Record<string, string> | (string | object)[];
+import type { Ref } from 'vue';
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme';
+import type { CheckboxProps } from './Checkbox.vue';
+type InternalClasses = 'wrapper' | 'box' | 'icon' | 'label';
+type InternalExtraData = {
+    checked: Ref<boolean>;
 };
-export default _default;
+interface InternalTheme extends ThemeComponent<CheckboxProps, InternalClasses, InternalExtraData> {
+}
+export interface CheckboxTheme extends Omit<InternalTheme, 'classes'> {
+    classes?: Partial<ThemeClasses<CheckboxProps, InternalClasses, InternalExtraData>>;
+}
+declare const theme: InternalTheme;
+export default theme;

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

@@ -0,0 +1,52 @@
+const b = {
+  classes: {
+    wrapper: "inline-block relative cursor-pointer align-middle",
+    box: ({ props: e }) => {
+      const r = ["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 e.size === "xs" || e.size === "sm" ? r.push("h-4 w-4") : e.size === "xl" ? r.push("h-6 w-6") : r.push("h-5 w-5"), r;
+    },
+    icon: ({ props: e }) => {
+      const r = ["fill-current text-white dark:text-gray-900"];
+      return e.size === "xs" || e.size === "sm" ? r.push("h-2 w-2") : e.size === "xl" ? r.push("h-4 w-4") : r.push("h-3 w-3"), r;
+    },
+    label: ({ props: e }) => {
+      const r = ["inline-block font-medium text-gray-800 dark:text-gray-200 pl-2"];
+      return e.size === "xs" ? r.push("text-xs") : e.size === "sm" ? r.push("text-sm") : e.size === "lg" ? r.push("text-lg") : e.size === "xl" && r.push("text-xl"), r;
+    }
+  },
+  styles({ props: e, colors: r, css: a, data: i }) {
+    const t = r.getPalette("gray"), s = r.getPalette(e.color), l = [];
+    return e.loading ? a.variables({
+      bg: "transparent",
+      border: "transparent",
+      dark: {
+        bg: "transparent",
+        border: "transparent"
+      }
+    }) : (e.disabled ? l.push(a.variables({
+      bg: t[100],
+      border: t[200],
+      dark: {
+        bg: t[800],
+        border: t[700]
+      }
+    })) : (i.checked ? l.push(a.variables({
+      bg: s[500],
+      border: s[500],
+      dark: {
+        bg: s[500],
+        border: s[500]
+      }
+    })) : l.push(a.variables({
+      bg: "#fff",
+      border: e.glow ? s[300] : t[300],
+      dark: {
+        bg: t[900],
+        border: e.glow ? s[300] : t[400]
+      }
+    })), e.glow && l.push(a.get("glow", r.getColorOpacity(s[500], 0.5)))), l);
+  }
+}, o = b;
+export {
+  o as default
+};

package/lib/components/checkbox/Checkbox.vue.d.ts

@@ -1,3 +1,34 @@
+import { type ExtractPublicPropTypes } from 'vue';
+declare const checkboxProps: {
+    label: StringConstructor;
+    helper: StringConstructor;
+    glow: 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 CheckboxProps = ExtractPublicPropTypes<typeof checkboxProps>;
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     label: StringConstructor;
     helper: StringConstructor;
@@ -31,7 +62,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     blur: () => void | undefined;
     toggle: () => void;
     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;
@@ -64,12 +95,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
+    disabled: boolean;
+    color: string;
     size: import("../../composables/common").Size;
     required: boolean;
-    color: string;
-    glow: boolean;
-    disabled: boolean;
     loading: boolean;
+    glow: boolean;
     readonly: boolean;
     validateOnInput: boolean;
     rules: unknown[];

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

@@ -0,0 +1,9 @@
+import o from "./Checkbox.vue2.js";
+import s from "./Checkbox.vue3.js";
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const e = {
+  $style: s
+}, f = /* @__PURE__ */ t(o, [["__cssModules", e]]);
+export {
+  f as default
+};

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

@@ -0,0 +1,108 @@
+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,
+  glow: Boolean
+}, Y = {
+  name: "XCheckbox",
+  validators: {
+    ...k.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;
+    }
+    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) }
+      ])
+    }, [
+      r("div", {
+        ref_key: "elRef",
+        ref: u,
+        class: l(["flex items-center", { "cursor-not-allowed": e.disabled }]),
+        tabindex: "0",
+        onKeypress: M(N(m, ["prevent", "stop"]), ["space"])
+      }, [
+        D(r("input", {
+          "onUpdate:modelValue": f[0] || (f[0] = (q) => o.value = q),
+          "aria-checked": o.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]
+        ]),
+        r("div", {
+          class: l([
+            s(a).box,
+            [e.glow && !e.disabled && !e.loading ? e.$style["checkbox--glow"] : ""]
+          ])
+        }, [
+          e.loading ? (t(), X(U, {
+            key: 0,
+            size: e.size,
+            class: "absolute"
+          }, null, 8, ["size"])) : v(e.$slots, "icon", { key: 1 }, () => [
+            (t(), n("svg", {
+              viewBox: "0 0 20 20",
+              class: l([s(a).icon, { "opacity-0": !o.value }])
+            }, O, 2))
+          ])
+        ], 2),
+        r("div", {
+          class: l(s(a).label)
+        }, [
+          e.label ? (t(), n("span", {
+            key: 0,
+            textContent: _(e.label)
+          }, null, 8, Q)) : v(e.$slots, "default", { key: 1 })
+        ], 2)
+      ], 42, G),
+      F(s(j), {
+        error: s(z),
+        helper: e.helper
+      }, null, 8, ["error", "helper"])
+    ], 6));
+  }
+});
+export {
+  ie as default
+};

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

@@ -0,0 +1,6 @@
+const o = {
+  "checkbox--glow": "_checkbox--glow_a1gm3_1"
+};
+export {
+  o as default
+};

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

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

package/lib/components/collapse/Collapse.theme.d.ts

@@ -1,9 +1,10 @@
-import type { ThemeParams } from '../../composables/theme';
-declare const _default: {
-    classes: {
-        wrapper: ({ props }: ThemeParams) => string;
-        icon: string;
-        content: string;
-    };
-};
-export default _default;
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme';
+import type { CollapseProps } from './Collapse.vue';
+type InternalClasses = 'wrapper' | 'icon' | 'content';
+interface InternalTheme extends ThemeComponent<CollapseProps, InternalClasses> {
+}
+export interface CollapseTheme extends Omit<InternalTheme, 'classes'> {
+    classes?: Partial<ThemeClasses<CollapseProps, InternalClasses>>;
+}
+declare const theme: InternalTheme;
+export default theme;

package/lib/components/collapse/Collapse.theme.js

@@ -0,0 +1,10 @@
+const t = {
+  classes: {
+    wrapper: ({ props: e }) => `relative flex items-center ${e.icon ? "flex-row-reverse" : ""} ${e.disabled ? "" : "cursor-pointer"}`,
+    icon: "absolute top-1/2 transform -translate-y-1/2 right-3",
+    content: "transition-[height] duration-150 overflow-y-hidden"
+  }
+}, r = t;
+export {
+  r as default
+};

package/lib/components/collapse/Collapse.vue.d.ts

@@ -1,3 +1,19 @@
+import { type ExtractPublicPropTypes } from 'vue';
+declare const collapseProps: {
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+    expanded: BooleanConstructor;
+    showIcon: BooleanConstructor;
+    icon: StringConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+};
+export type CollapseProps = ExtractPublicPropTypes<typeof collapseProps>;
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     tag: {
         type: StringConstructor;
@@ -31,9 +47,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     onExpand?: ((...args: any[]) => any) | undefined;
 }, {
+    disabled: boolean;
     color: string;
     tag: string;
-    disabled: boolean;
     expanded: boolean;
     showIcon: boolean;
 }, {}>, {