@indielayer/ui 1.0.9 → 1.1.0

package/lib/components/input/Input.theme.d.ts

@@ -1,11 +1,13 @@
-import type { ThemeParams } from '../../composables/theme';
-declare const _default: {
-    classes: {
-        wrapper: string;
-        label: ({ props }: ThemeParams) => string;
-        input: ({ props, data }: ThemeParams) => string[];
-        icon: string;
-    };
-    styles: ({ colors, props, css }: ThemeParams) => string;
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme';
+import type { InputProps } from './Input.vue';
+type InternalClasses = 'wrapper' | 'label' | 'input' | 'icon';
+type InternalExtraData = {
+    errorInternal: any;
 };
-export default _default;
+interface InternalTheme extends ThemeComponent<InputProps, InternalClasses, InternalExtraData> {
+}
+export interface InputTheme extends Omit<InternalTheme, 'classes'> {
+    classes?: Partial<ThemeClasses<InputProps, InternalClasses, InternalExtraData>>;
+}
+declare const theme: InternalTheme;
+export default theme;

package/lib/components/input/Input.theme.js

@@ -0,0 +1,21 @@
+const s = {
+  classes: {
+    wrapper: "inline-block align-bottom text-left",
+    label: ({ props: e }) => {
+      const r = "font-medium text-gray-800 dark:text-gray-200 mb-1";
+      return 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;
+    },
+    input: ({ props: e, data: r }) => {
+      const t = ["appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-gray-300 dark:border-gray-700 border shadow-sm rounded-md"];
+      return !r.errorInternal && !e.disabled && t.push("hover:border-gray-400 dark:hover:border-gray-500"), e.size === "xs" ? t.push("px-2 py-1 text-xs") : e.size === "sm" ? t.push("px-2 py-2 text-sm") : e.size === "lg" ? t.push("px-4 py-3 text-lg") : e.size === "xl" ? t.push("px-5 py-4 text-xl") : t.push("px-3 py-2"), t.push(e.disabled ? "bg-gray-100 dark:bg-gray-900 text-gray-500 cursor-not-allowed" : "bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200"), t;
+    },
+    icon: "text-gray-600 dark:text-gray-300 absolute my-auto inset-y-0"
+  },
+  styles: ({ colors: e, props: r, css: t }) => {
+    const a = e.getPalette(r.color);
+    return t.get("border", a[400]);
+  }
+}, l = s;
+export {
+  l as default
+};

package/lib/components/input/Input.vue.d.ts

@@ -1,4 +1,5 @@
-declare const _default: import("vue").DefineComponent<{
+import { type PropType, type ExtractPublicPropTypes } from 'vue';
+declare const inputProps: {
     showPasswordToggle: {
         type: BooleanConstructor;
         default: boolean;
@@ -6,23 +7,73 @@ declare const _default: import("vue").DefineComponent<{
     helper: StringConstructor;
     label: StringConstructor;
     dir: {
+        type: PropType<"ltr" | "rtl">;
+        default: string;
+    };
+    icon: StringConstructor;
+    iconLeft: StringConstructor;
+    iconRight: StringConstructor;
+    max: (StringConstructor | NumberConstructor)[];
+    maxlength: (StringConstructor | NumberConstructor)[];
+    min: (StringConstructor | NumberConstructor)[];
+    minlength: (StringConstructor | NumberConstructor)[];
+    placeholder: StringConstructor;
+    type: {
         type: StringConstructor;
         default: string;
     };
+    block: 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;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: PropType<import("../../composables/common").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+};
+export type InputProps = ExtractPublicPropTypes<typeof inputProps>;
+declare const _default: import("vue").DefineComponent<{
+    showPasswordToggle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    helper: StringConstructor;
+    label: StringConstructor;
+    dir: {
+        type: PropType<"ltr" | "rtl">;
+        default: string;
+    };
     icon: StringConstructor;
     iconLeft: StringConstructor;
     iconRight: StringConstructor;
-    max: (NumberConstructor | StringConstructor)[];
-    maxlength: (NumberConstructor | StringConstructor)[];
-    min: (NumberConstructor | StringConstructor)[];
-    minlength: (NumberConstructor | StringConstructor)[];
+    max: (StringConstructor | NumberConstructor)[];
+    maxlength: (StringConstructor | NumberConstructor)[];
+    min: (StringConstructor | NumberConstructor)[];
+    minlength: (StringConstructor | NumberConstructor)[];
     placeholder: StringConstructor;
     type: {
         type: StringConstructor;
         default: string;
     };
     block: BooleanConstructor;
-    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    modelValue: PropType<string | number | boolean | object | any[] | undefined>;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -42,7 +93,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: string | undefined;
     };
     size: {
-        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly type: PropType<import("../../composables/common").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
@@ -50,7 +101,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<{
     showPasswordToggle: {
@@ -60,23 +111,23 @@ declare const _default: import("vue").DefineComponent<{
     helper: StringConstructor;
     label: StringConstructor;
     dir: {
-        type: StringConstructor;
+        type: PropType<"ltr" | "rtl">;
         default: string;
     };
     icon: StringConstructor;
     iconLeft: StringConstructor;
     iconRight: StringConstructor;
-    max: (NumberConstructor | StringConstructor)[];
-    maxlength: (NumberConstructor | StringConstructor)[];
-    min: (NumberConstructor | StringConstructor)[];
-    minlength: (NumberConstructor | StringConstructor)[];
+    max: (StringConstructor | NumberConstructor)[];
+    maxlength: (StringConstructor | NumberConstructor)[];
+    min: (StringConstructor | NumberConstructor)[];
+    minlength: (StringConstructor | NumberConstructor)[];
     placeholder: StringConstructor;
     type: {
         type: StringConstructor;
         default: string;
     };
     block: BooleanConstructor;
-    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    modelValue: PropType<string | number | boolean | object | any[] | undefined>;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -96,24 +147,24 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: string | undefined;
     };
     size: {
-        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly type: PropType<import("../../composables/common").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
 }>> & {
-    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    readonly: boolean;
-    size: import("../../composables/common").Size;
-    required: boolean;
+    disabled: boolean;
     type: string;
+    dir: "ltr" | "rtl";
     color: string;
-    dir: string;
+    size: import("../../composables/common").Size;
     block: boolean;
-    disabled: boolean;
+    required: boolean;
     loading: boolean;
+    readonly: boolean;
     validateOnInput: boolean;
     rules: unknown[];
     showPasswordToggle: boolean;
-}>;
+}, {}>;
 export default _default;

package/lib/components/input/Input.vue.js

@@ -0,0 +1,140 @@
+import { defineComponent as $, ref as h, watch as X, openBlock as l, createElementBlock as y, normalizeStyle as D, unref as r, normalizeClass as s, toDisplayString as F, createCommentVNode as p, createElementVNode as b, createBlock as u, mergeProps as H, toHandlers as j, createVNode as q } from "vue";
+import { useTheme as A } from "../../composables/theme.js";
+import { useColors as G } from "../../composables/colors.js";
+import { useCommon as v } from "../../composables/common.js";
+import { useInputtable as c } from "../../composables/inputtable.js";
+import { useInteractive as S } from "../../composables/interactive.js";
+import { eyeIcon as J, eyeVisibleIcon as K } from "../../common/icons.js";
+import d from "../icon/Icon.vue.js";
+import M from "../helpers/InputError.js";
+import O from "./Input.theme.js";
+const Q = ["textContent"], U = { class: "relative" }, W = ["disabled", "min", "max", "minlength", "maxlength", "dir", "name", "placeholder", "readonly", "type", "value"], Y = {
+  ...v.props(),
+  ...G.props("primary"),
+  ...S.props(),
+  ...c.props(),
+  showPasswordToggle: {
+    type: Boolean,
+    default: !0
+  },
+  helper: String,
+  label: String,
+  dir: {
+    type: String,
+    default: "ltr"
+  },
+  icon: String,
+  iconLeft: String,
+  iconRight: String,
+  max: [Number, String],
+  maxlength: [Number, String],
+  min: [Number, String],
+  minlength: [Number, String],
+  placeholder: String,
+  type: {
+    type: String,
+    default: "text"
+  },
+  block: Boolean
+}, Z = {
+  name: "XInput",
+  validators: {
+    ...v.validators()
+  }
+}, ae = /* @__PURE__ */ $({
+  ...Z,
+  props: Y,
+  emits: c.emits(),
+  setup(w, { expose: k, emit: z }) {
+    const o = w, f = h(null), i = h(o.type);
+    X(() => o.type, (e) => {
+      i.value = e;
+    });
+    function N(e) {
+      if (!e.target)
+        return;
+      const t = e.target;
+      if (o.type === "number") {
+        const m = Number(t.value);
+        typeof o.min < "u" && m < Number(o.min) && (t.value = o.min.toString()), typeof o.max < "u" && m > Number(o.max) && (t.value = o.max.toString());
+      }
+    }
+    function C() {
+      i.value = i.value === "password" ? "text" : "password";
+    }
+    const { focus: g, blur: I } = S(f), {
+      errorInternal: a,
+      isInsideForm: R,
+      inputListeners: V,
+      reset: B,
+      validate: L,
+      setError: P
+    } = c(o, { focus: g, emit: z }), { styles: E, classes: n, className: T } = A("input", O, o, { errorInternal: a });
+    return k({ focus: g, blur: I, reset: B, validate: L, setError: P }), (e, t) => (l(), y("label", {
+      style: D(r(E)),
+      class: s(["relative", [
+        r(T),
+        r(n).wrapper,
+        { "mb-3": r(R), "w-full": e.block }
+      ]])
+    }, [
+      e.label ? (l(), y("p", {
+        key: 0,
+        class: s(r(n).label),
+        textContent: F(e.label)
+      }, null, 10, Q)) : p("", !0),
+      b("div", U, [
+        e.iconLeft ? (l(), u(d, {
+          key: 0,
+          size: e.size,
+          icon: e.iconLeft,
+          class: s(["ml-2 left-1", r(n).icon])
+        }, null, 8, ["size", "icon", "class"])) : p("", !0),
+        b("input", H({
+          ref_key: "elRef",
+          ref: f,
+          class: [
+            r(n).input,
+            e.type === "password" ? "pr-10" : "",
+            // error
+            r(a) ? "border-red-500 dark:border-red-400 focus:outline-red-500" : "focus:outline-[color:var(--x-input-border)]",
+            {
+              "!pl-10": e.iconLeft,
+              "!pr-10": e.iconRight
+            }
+          ],
+          disabled: e.disabled,
+          min: e.min,
+          max: e.max,
+          minlength: e.minlength,
+          maxlength: e.maxlength,
+          dir: e.dir,
+          name: e.name,
+          placeholder: e.placeholder,
+          readonly: e.readonly,
+          type: i.value,
+          value: e.modelValue || ""
+        }, e.$attrs, j(r(V), !0), { onChange: N }), null, 16, W),
+        e.iconRight ? (l(), u(d, {
+          key: 1,
+          size: e.size,
+          icon: e.iconRight,
+          class: s(["mr-2 right-1", r(n).icon])
+        }, null, 8, ["size", "icon", "class"])) : e.type === "password" && e.showPasswordToggle ? (l(), u(d, {
+          key: 2,
+          size: e.size,
+          icon: i.value === "password" ? r(J) : r(K),
+          class: s(["mr-2 right-1 cursor-pointer", r(n).icon]),
+          onClick: t[0] || (t[0] = (m) => C())
+        }, null, 8, ["size", "icon", "class"])) : p("", !0)
+      ]),
+      q(r(M), {
+        error: r(a),
+        helper: e.helper
+      }, null, 8, ["error", "helper"])
+    ], 6));
+  }
+});
+export {
+  ae as default
+};

package/lib/components/input/Input.vue2.js

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

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

@@ -0,0 +1,3 @@
+export { default as XInput } from './Input.vue';
+export type { InputProps } from './Input.vue';
+export type { InputTheme } from './Input.theme';

package/lib/components/link/Link.theme.d.ts

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

package/lib/components/link/Link.theme.js

@@ -0,0 +1,25 @@
+const a = {
+  classes: {
+    wrapper: "transition duration-300 ease-in-out cursor-pointer inline-flex"
+  },
+  styles: ({ colors: o, props: t, css: r }) => {
+    const e = o.getPalette(t.color || "gray");
+    return r.variables({
+      text: t.color ? e[600] : "",
+      hover: {
+        text: t.shadow ? "" : e[700]
+      },
+      shadow: e[100],
+      dark: {
+        text: t.color ? e[400] : "",
+        hover: {
+          text: e[300]
+        },
+        shadow: e[900]
+      }
+    });
+  }
+}, s = a;
+export {
+  s as default
+};

package/lib/components/link/Link.vue.d.ts

@@ -1,4 +1,20 @@
-declare const _default: import("vue").DefineComponent<{
+import type { ExtractPublicPropTypes } from 'vue';
+declare const linkProps: {
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    to: (ObjectConstructor | StringConstructor)[];
+    shadow: BooleanConstructor;
+    external: BooleanConstructor;
+    underline: BooleanConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+};
+export type LinkProps = ExtractPublicPropTypes<typeof linkProps>;
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     tag: {
         type: StringConstructor;
         default: string;
@@ -26,9 +42,16 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     color: string;
-    tag: string;
     shadow: boolean;
+    tag: string;
     external: boolean;
     underline: boolean;
+}, {}>, {
+    default?(_: {}): any;
 }>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/link/Link.vue.js

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

package/lib/components/link/Link.vue2.js

@@ -0,0 +1,48 @@
+import { defineComponent as m, openBlock as n, createBlock as p, resolveDynamicComponent as u, normalizeStyle as d, unref as o, normalizeClass as f, withCtx as c, createElementBlock as k, renderSlot as t, createVNode as y } from "vue";
+import { useColors as h } from "../../composables/colors.js";
+import { useTheme as g } from "../../composables/theme.js";
+import { externalIcon as B } from "../../common/icons.js";
+import w from "../icon/Icon.vue.js";
+import C from "./Link.theme.js";
+const $ = {
+  key: 0,
+  class: "inline-flex items-center"
+}, S = {
+  ...h.props(),
+  tag: {
+    type: String,
+    default: "a"
+  },
+  to: [String, Object],
+  shadow: Boolean,
+  external: Boolean,
+  underline: Boolean
+}, v = { name: "XLink" }, L = /* @__PURE__ */ m({
+  ...v,
+  props: S,
+  setup(l) {
+    const s = l, { styles: r, classes: a, className: i } = g("link", C, s);
+    return (e, z) => (n(), p(u(e.to ? e.tag !== "a" ? e.tag : "router-link" : e.tag), {
+      to: e.to,
+      style: d(o(r)),
+      class: f([
+        o(i),
+        e.$style.link,
+        o(a).wrapper,
+        [e.shadow ? e.$style["link--shadow"] : ""],
+        { underline: e.underline }
+      ])
+    }, {
+      default: c(() => [
+        e.external ? (n(), k("span", $, [
+          t(e.$slots, "default", {}, void 0, !0),
+          y(w, { icon: o(B) }, null, 8, ["icon"])
+        ])) : t(e.$slots, "default", { key: 1 }, void 0, !0)
+      ]),
+      _: 3
+    }, 8, ["to", "style", "class"]));
+  }
+});
+export {
+  L as default
+};

package/lib/components/link/Link.vue3.js

@@ -0,0 +1,8 @@
+const k = "_link_ke25h_2", l = {
+  link: k,
+  "link--shadow": "_link--shadow_ke25h_1"
+};
+export {
+  l as default,
+  k as link
+};

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

@@ -0,0 +1,3 @@
+export { default as XLink } from './Link.vue';
+export type { LinkProps } from './Link.vue';
+export type { LinkTheme } from './Link.theme';

package/lib/components/menu/Menu.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 { MenuProps } from './Menu.vue';
+type InternalClasses = 'wrapper';
+interface InternalTheme extends ThemeComponent<MenuProps, InternalClasses> {
+}
+export interface MenuTheme extends Omit<InternalTheme, 'classes'> {
+    classes?: Partial<ThemeClasses<MenuProps, InternalClasses>>;
+}
+declare const theme: InternalTheme;
+export default theme;

package/lib/components/menu/Menu.theme.js

@@ -0,0 +1,8 @@
+const e = {
+  classes: {
+    wrapper: ""
+  }
+}, s = e;
+export {
+  s as default
+};

package/lib/components/menu/Menu.vue.d.ts

@@ -1,6 +1,59 @@
-import type { PropType } from 'vue';
+import type { ExtractPublicPropTypes, PropType } from 'vue';
+import { type Size } from '../../composables/common';
+declare const menuProps: {
+    items: PropType<MenuArrayItem[]>;
+    collapsible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    collapseIcon: StringConstructor;
+    expanded: BooleanConstructor;
+    disabled: BooleanConstructor;
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    filled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: PropType<Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+};
+export type MenuArrayItem = {
+    collapsible?: boolean;
+    collapseIcon?: string;
+    expanded?: boolean;
+    divider?: boolean;
+    items?: MenuArrayItem[];
+    value?: string | number;
+    to?: string | object;
+    href?: string;
+    target?: string;
+    exact?: boolean;
+    color?: string;
+    size?: Size;
+    label?: string;
+    icon?: string;
+    iconRight?: string;
+    loading?: boolean;
+    rounded?: boolean;
+    filled?: boolean;
+    disabled?: boolean;
+    active?: boolean;
+    attrs?: Record<string, unknown>;
+    onClick?: (e: MouseEvent) => void;
+};
+export type MenuProps = ExtractPublicPropTypes<typeof menuProps>;
 declare const _default: import("vue").DefineComponent<{
-    items: PropType<any[]>;
+    items: PropType<MenuArrayItem[]>;
     collapsible: {
         type: BooleanConstructor;
         default: boolean;
@@ -21,12 +74,12 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: string | undefined;
     };
     size: {
-        readonly type: PropType<import("../../composables/common").Size>;
+        readonly type: PropType<Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "expand"[], "expand", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    items: PropType<any[]>;
+    items: PropType<MenuArrayItem[]>;
     collapsible: {
         type: BooleanConstructor;
         default: boolean;
@@ -47,19 +100,19 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: string | undefined;
     };
     size: {
-        readonly type: PropType<import("../../composables/common").Size>;
+        readonly type: PropType<Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
 }>> & {
     onExpand?: ((...args: any[]) => any) | undefined;
 }, {
-    size: import("../../composables/common").Size;
-    filled: boolean;
+    disabled: boolean;
     color: string;
+    size: Size;
     rounded: boolean;
-    disabled: boolean;
+    filled: boolean;
     expanded: boolean;
     collapsible: boolean;
-}>;
+}, {}>;
 export default _default;