@indielayer/ui 0.0.0-dev-20240125104319

package/lib/components/form/Form.vue.d.ts

@@ -0,0 +1,103 @@
+import { type PropType, type ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
+declare const formProps: {
+    autoValidate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: BooleanConstructor;
+    errors: {
+        type: PropType<[FormError[], FormError]>;
+        default: () => never[];
+    };
+    title: StringConstructor;
+    description: StringConstructor;
+    hasFooter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+export type FormProps = ExtractPublicPropTypes<typeof formProps>;
+export type FormInjection = {
+    registerInput: (name: string, focus: () => void, validate: () => boolean, setError: (val: string) => void) => void;
+    unregisterInput: (name: string) => void;
+    isInsideForm: boolean;
+};
+export type FormError = {
+    field: string;
+    msg: string;
+};
+export type FormInput = {
+    name: string;
+    focus: () => void;
+    validate: (val?: any) => boolean;
+    setError: (val: string) => void;
+};
+type InternalClasses = 'wrapper' | 'content' | 'title' | 'description' | 'footer';
+export interface FormTheme extends ThemeComponent<FormProps, InternalClasses> {
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    autoValidate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: BooleanConstructor;
+    errors: {
+        type: PropType<[FormError[], FormError]>;
+        default: () => never[];
+    };
+    title: StringConstructor;
+    description: StringConstructor;
+    hasFooter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "submit"[], "submit", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    autoValidate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: BooleanConstructor;
+    errors: {
+        type: PropType<[FormError[], FormError]>;
+        default: () => never[];
+    };
+    title: StringConstructor;
+    description: StringConstructor;
+    hasFooter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onSubmit?: ((...args: any[]) => any) | undefined;
+}, {
+    autoValidate: boolean;
+    autoFocus: boolean;
+    disabled: boolean;
+    errors: [FormError[], FormError];
+    hasFooter: boolean;
+}, {}>, {
+    header?(_: {}): any;
+    default?(_: {}): any;
+    footer?(_: {}): any;
+    "primary-action"?(_: {}): any;
+    "secondary-action"?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/form/Form.vue.js

@@ -0,0 +1,109 @@
+import { defineComponent as E, provide as I, onMounted as S, watch as $, nextTick as A, openBlock as c, createElementBlock as m, normalizeStyle as C, unref as i, normalizeClass as n, renderSlot as r, toDisplayString as p, createCommentVNode as f, createElementVNode as y } from "vue";
+import { injectFormKey as N } from "../../composables/keys.js";
+import { useTheme as T } from "../../composables/useTheme.js";
+const j = {
+  key: 0,
+  class: "mb-10"
+}, w = ["disabled"], z = {
+  autoValidate: {
+    type: Boolean,
+    default: !0
+  },
+  autoFocus: {
+    type: Boolean,
+    default: !0
+  },
+  disabled: Boolean,
+  errors: {
+    type: [Array, Object],
+    default: () => []
+  },
+  title: String,
+  description: String,
+  hasFooter: {
+    type: Boolean,
+    default: !0
+  }
+}, D = {
+  name: "XForm"
+}, O = /* @__PURE__ */ E({
+  ...D,
+  props: z,
+  emits: ["submit"],
+  setup(h, { emit: b }) {
+    const l = h, F = b, s = [];
+    I(N, {
+      registerInput: (e, t, o, d) => {
+        const u = s.find((B) => B.name === e);
+        u ? (u.focus = t, u.validate = o, u.setError = d) : s.push({ name: e, focus: t, validate: o, setError: d });
+      },
+      unregisterInput: (e) => {
+        const t = s.findIndex((o) => o.name === e);
+        s.splice(t, 1);
+      },
+      isInsideForm: !0
+    }), S(async () => {
+      l.autoFocus && s && s.length > 0 && setTimeout(s[0].focus, 50);
+    }), $(() => l.errors, (e) => {
+      e && A(() => {
+        if (Array.isArray(e))
+          e.forEach((t) => {
+            const o = s.find((d) => d.name === t.field);
+            o && o.setError(t.msg);
+          });
+        else {
+          const t = s.find((o) => o.name === e.field);
+          t && t.setError(e.msg);
+        }
+      });
+    });
+    const g = () => {
+      let e = !0;
+      return s.forEach((t) => {
+        !t.validate() && e && (e = !1, t.focus && t.focus());
+      }), e;
+    }, V = (e) => {
+      e.preventDefault(), e.stopPropagation();
+      const t = l.autoValidate ? g() : !0;
+      F("submit", t);
+    }, { styles: k, classes: a, className: v } = T("Form", {}, l);
+    return (e, t) => (c(), m("form", {
+      style: C(i(k)),
+      class: n([
+        i(v),
+        i(a).wrapper
+      ]),
+      onSubmit: V
+    }, [
+      r(e.$slots, "header", {}, () => [
+        e.title || e.description ? (c(), m("div", j, [
+          e.title ? (c(), m("p", {
+            key: 0,
+            class: n(i(a).title)
+          }, p(e.title), 3)) : f("", !0),
+          e.description ? (c(), m("p", {
+            key: 1,
+            class: n(i(a).description)
+          }, p(e.description), 3)) : f("", !0)
+        ])) : f("", !0)
+      ]),
+      y("fieldset", {
+        disabled: e.disabled,
+        class: n(i(a).content)
+      }, [
+        r(e.$slots, "default")
+      ], 10, w),
+      e.hasFooter ? r(e.$slots, "footer", { key: 0 }, () => [
+        y("div", {
+          class: n(i(a).footer)
+        }, [
+          r(e.$slots, "primary-action"),
+          r(e.$slots, "secondary-action")
+        ], 2)
+      ]) : f("", !0)
+    ], 38));
+  }
+});
+export {
+  O as default
+};

package/lib/components/form/Form.vue2.js

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

package/lib/components/form/__tests__/Form.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { default as XForm } from './Form.vue';
+export type { FormProps, FormError, FormInjection, FormInput, FormTheme } from './Form.vue';

package/lib/components/form/theme/Form.base.theme.d.ts

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

package/lib/components/form/theme/Form.base.theme.js

@@ -0,0 +1,12 @@
+const t = {
+  classes: {
+    wrapper: "relative",
+    content: "grid gap-4",
+    title: "text-xl mb-1",
+    description: "text-gray-500",
+    footer: "space-x-4 mt-4"
+  }
+}, e = t;
+export {
+  e as default
+};

package/lib/components/form/theme/Form.carbon.theme.d.ts

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

package/lib/components/form/theme/Form.carbon.theme.js

@@ -0,0 +1,12 @@
+const t = {
+  classes: {
+    wrapper: "relative",
+    content: "grid",
+    title: "text-xl mb-1",
+    description: "text-gray-500",
+    footer: "grid grid-cols-2 gap-4 lg:flex mt-8"
+  }
+}, e = t;
+export {
+  e as default
+};

package/lib/components/formGroup/FormGroup.vue.d.ts

@@ -0,0 +1,132 @@
+import { type ExtractPublicPropTypes, type MaybeRef } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
+declare const formGroupProps: {
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    required: BooleanConstructor;
+    validateOnInput: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    label: StringConstructor;
+    helper: StringConstructor;
+    error: StringConstructor;
+    hideFooter: BooleanConstructor;
+    rules: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
+};
+export type FormGroupProps = ExtractPublicPropTypes<typeof formGroupProps>;
+export type FormGroupInjection = {
+    registerInputGroup: (name: string, focus: () => void) => void;
+    unregisterInputGroup: (name: string) => void;
+    setValue: (val: string | number | string[] | number[]) => void;
+    value: MaybeRef<string | number | string[] | number[] | null | undefined>;
+    isInsideFormGroup: boolean;
+};
+export type FormGroupInput = {
+    name: string;
+    focus: () => void;
+};
+type InternalClasses = 'wrapper';
+export interface FormGroupTheme extends ThemeComponent<FormGroupProps, InternalClasses> {
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    required: BooleanConstructor;
+    validateOnInput: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    label: StringConstructor;
+    helper: StringConstructor;
+    error: StringConstructor;
+    hideFooter: BooleanConstructor;
+    rules: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
+}, {
+    focus: () => void;
+    blur: typeof blur;
+    reset: () => void;
+    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<{
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    required: BooleanConstructor;
+    validateOnInput: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    label: StringConstructor;
+    helper: StringConstructor;
+    error: StringConstructor;
+    hideFooter: BooleanConstructor;
+    rules: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
+}>> & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    loading: boolean;
+    loadingStatus: import("../loader/Loader.vue").LoaderStatus;
+    readonly: boolean;
+    required: boolean;
+    validateOnInput: boolean;
+    hideFooter: boolean;
+    rules: unknown[];
+    vertical: boolean;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/formGroup/FormGroup.vue.js

@@ -0,0 +1,82 @@
+import { defineComponent as C, computed as k, provide as q, openBlock as m, createBlock as p, mergeProps as B, unref as o, toHandlers as N, withCtx as $, createElementVNode as w, normalizeClass as A, renderSlot as E, createCommentVNode as P } from "vue";
+import { useTheme as j } from "../../composables/useTheme.js";
+import { useInteractive as z } from "../../composables/useInteractive.js";
+import { useInputtable as l } from "../../composables/useInputtable.js";
+import { injectFormGroupKey as H } from "../../composables/keys.js";
+import K from "../label/Label.vue.js";
+import O from "../inputFooter/InputFooter.vue.js";
+const S = {
+  ...z.props(),
+  ...l.props(),
+  vertical: {
+    type: Boolean,
+    default: !1
+  }
+}, T = {
+  name: "XFormGroup"
+}, R = /* @__PURE__ */ C({
+  ...T,
+  props: S,
+  emits: l.emits(),
+  setup(d, { expose: f, emit: c }) {
+    const r = d, s = [], V = k(() => typeof r.modelValue == "string" || typeof r.modelValue == "number" || Array.isArray(r.modelValue) ? r.modelValue : "");
+    q(H, {
+      registerInputGroup: (e, t) => {
+        s.push({ name: e, focus: t });
+      },
+      unregisterInputGroup: (e) => {
+        const t = s.findIndex((g) => g.name === e);
+        s.splice(t, 1);
+      },
+      setValue: (e) => {
+        n("update:modelValue", e);
+      },
+      isInsideFormGroup: !0,
+      value: V
+    });
+    function i() {
+      var e;
+      (e = s[0]) == null || e.focus();
+    }
+    const n = c, {
+      errorInternal: a,
+      isInsideForm: y,
+      isFirstValidation: b,
+      reset: h,
+      validate: u,
+      setError: v
+    } = l(r, { focus: i, emit: n }), I = {
+      change: (e) => {
+        r.validateOnInput && !b.value && u(r.modelValue);
+      }
+    }, { styles: F, classes: G, className: _ } = j("FormGroup", {}, r, { errorInternal: a });
+    return f({ focus: i, blur, reset: h, validate: u, setError: v }), (e, t) => (m(), p(K, B({
+      tag: "fieldset",
+      style: o(F),
+      disabled: e.disabled,
+      required: e.required,
+      "is-inside-form": o(y),
+      label: e.label,
+      class: [
+        o(_)
+      ]
+    }, N(I)), {
+      default: $(() => [
+        w("div", {
+          class: A(o(G).wrapper)
+        }, [
+          E(e.$slots, "default")
+        ], 2),
+        e.hideFooter ? P("", !0) : (m(), p(O, {
+          key: 0,
+          error: o(a),
+          helper: e.helper
+        }, null, 8, ["error", "helper"]))
+      ]),
+      _: 3
+    }, 16, ["style", "disabled", "required", "is-inside-form", "label", "class"]));
+  }
+});
+export {
+  R as default
+};

package/lib/components/formGroup/FormGroup.vue2.js

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

package/lib/components/formGroup/__tests__/FormGroup.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { default as XFormGroup } from './FormGroup.vue';
+export type { FormGroupProps, FormGroupInjection, FormGroupInput, FormGroupTheme } from './FormGroup.vue';

package/lib/components/formGroup/theme/FormGroup.base.theme.d.ts

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

package/lib/components/formGroup/theme/FormGroup.base.theme.js

@@ -0,0 +1,11 @@
+const t = {
+  classes: {
+    wrapper: ({ props: s }) => {
+      const e = [""];
+      return s.vertical ? e.push("grid gap-1") : e.push("flex gap-2"), e;
+    }
+  }
+}, a = t;
+export {
+  a as default
+};

package/lib/components/formGroup/theme/FormGroup.carbon.theme.d.ts

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

package/lib/components/formGroup/theme/FormGroup.carbon.theme.js

@@ -0,0 +1,11 @@
+const t = {
+  classes: {
+    wrapper: ({ props: s }) => {
+      const e = [""];
+      return s.vertical ? e.push("grid gap-3") : e.push("flex gap-4"), e;
+    }
+  }
+}, a = t;
+export {
+  a as default
+};

package/lib/components/icon/Icon.vue.d.ts

@@ -0,0 +1,64 @@
+import { type ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
+declare const iconProps: {
+    icon: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    filled: BooleanConstructor;
+    viewBox: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+};
+export type IconProps = ExtractPublicPropTypes<typeof iconProps>;
+export type Icon = string | {
+    icon: string;
+    filled?: boolean;
+    viewBox?: string;
+};
+export type IconInjection = Record<string, Icon>;
+type InternalClasses = 'wrapper';
+export interface IconTheme extends ThemeComponent<IconProps, InternalClasses> {
+}
+declare const _default: import("vue").DefineComponent<{
+    icon: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    filled: BooleanConstructor;
+    viewBox: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    icon: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    filled: BooleanConstructor;
+    viewBox: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+}>>, {
+    size: import("../../composables/useCommon").Size;
+    filled: boolean;
+    viewBox: string;
+}, {}>;
+export default _default;

package/lib/components/icon/Icon.vue.js

@@ -0,0 +1,73 @@
+import { defineComponent as C, inject as T, ref as s, watchEffect as H, computed as L, normalizeStyle as h, unref as i, openBlock as x, createElementBlock as k, mergeProps as M, normalizeClass as O } from "vue";
+import { useCommon as y } from "../../composables/useCommon.js";
+import { injectIconsKey as g } from "../../composables/keys.js";
+import { useTheme as z } from "../../composables/useTheme.js";
+const E = ["innerHTML"], V = ["stroke-linejoin", "stroke-linecap", "stroke", "fill", "viewBox", "innerHTML"], G = {
+  ...y.props(),
+  icon: {
+    type: String,
+    required: !0
+  },
+  filled: Boolean,
+  viewBox: {
+    type: String,
+    default: "0 0 24 24"
+  }
+}, P = {
+  name: "XIcon",
+  validators: {
+    ...y.validators()
+  }
+}, N = /* @__PURE__ */ C({
+  ...P,
+  props: G,
+  setup(_) {
+    const o = _, a = T(g, {}), r = s(!1), t = s(""), n = s(o.filled), u = s(o.viewBox), f = s({});
+    H(() => {
+      const e = a && o.icon && a[o.icon];
+      if (r.value = !1, t.value = e, e)
+        if (typeof e == "string")
+          if (e.startsWith("<svg")) {
+            r.value = !0;
+            const { content: c, attributes: l } = B(e);
+            f.value = l, t.value = c;
+          } else
+            r.value = !1, t.value = e;
+        else
+          typeof e == "object" && (t.value = e.icon, n.value = e.filled || o.filled, u.value = e.viewBox || o.viewBox);
+      else
+        t.value = o.icon || "";
+    });
+    function B(e) {
+      e = e.trim();
+      const c = e.substring(e.indexOf(">") + 1, e.lastIndexOf("</svg>")), l = e.substring(e.indexOf("<svg") + 4, e.indexOf(">")).trim().match(/[\w-]+="[^"]*"/g), m = {};
+      return l == null || l.forEach((j) => {
+        const [w, I] = j.split("=");
+        ["height", "width", "class"].includes(w) || (m[w] = I.replace(/(^"|"$)/g, ""));
+      }), {
+        attributes: m,
+        content: c
+      };
+    }
+    const { styles: b, classes: p, className: v } = z("Icon", {}, o), d = L(() => h(i(b)));
+    return (e, c) => r.value ? (x(), k("svg", M({
+      key: 0,
+      style: d.value,
+      class: ["shrink-0", i(v), i(p).wrapper]
+    }, f.value, { innerHTML: t.value }), null, 16, E)) : (x(), k("svg", {
+      key: 1,
+      style: h(d.value),
+      xmlns: "http://www.w3.org/2000/svg",
+      class: O(["shrink-0", i(v), i(p).wrapper, { "stroke-2": !n.value }]),
+      "stroke-linejoin": n.value ? void 0 : "round",
+      "stroke-linecap": n.value ? void 0 : "round",
+      stroke: n.value ? void 0 : "currentColor",
+      fill: n.value ? "currentColor" : "none",
+      viewBox: u.value,
+      innerHTML: t.value
+    }, null, 14, V));
+  }
+});
+export {
+  N as default
+};

package/lib/components/icon/Icon.vue2.js

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

package/lib/components/icon/__tests__/Icon.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { default as XIcon } from './Icon.vue';
+export type { IconProps, IconTheme, Icon, IconInjection } from './Icon.vue';

package/lib/components/icon/theme/Icon.base.theme.d.ts

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