@indielayer/ui 1.0.10 → 1.1.0

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,20 +147,20 @@ 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: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    size: import("../../composables/common").Size;
+    disabled: boolean;
     type: string;
-    required: boolean;
+    dir: "ltr" | "rtl";
     color: string;
-    dir: string;
+    size: import("../../composables/common").Size;
     block: boolean;
-    disabled: boolean;
+    required: boolean;
     loading: boolean;
     readonly: boolean;
     validateOnInput: boolean;

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,3 +1,19 @@
+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;
@@ -26,8 +42,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
 }>>, {
     color: string;
-    tag: string;
     shadow: boolean;
+    tag: string;
     external: boolean;
     underline: boolean;
 }, {}>, {

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,18 +100,18 @@ 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;
 }, {}>;