@indielayer/ui 1.2.0 → 1.3.0

package/lib/composables/keys.js

@@ -1,10 +1,10 @@
-const o = Symbol(), t = Symbol(), e = Symbol(), n = Symbol(), c = Symbol(), y = Symbol(), i = Symbol();
+const o = Symbol(), t = Symbol(), n = Symbol(), e = Symbol(), c = Symbol(), y = Symbol(), i = Symbol();
 export {
   y as injectButtonGroupKey,
-  c as injectColorsKey,
-  t as injectFormKey,
-  n as injectIconsKey,
+  e as injectFormKey,
+  c as injectIconsKey,
   i as injectNotificationKey,
-  o as injectTabKey,
-  e as injectThemeKey
+  o as injectOptionsKey,
+  n as injectTabKey,
+  t as injectThemeKey
 };

package/lib/composables/useColors.js

@@ -0,0 +1,52 @@
+import { inject as m, computed as p, unref as f } from "vue";
+import { injectThemeKey as g } from "./keys.js";
+import { tailwindColors as n, setOpacity as l, isValidColor as d, colorShade as t } from "../common/colors.js";
+import { mergeRightDeep as y } from "../common/utils.js";
+const i = {}, C = {
+  primary: n.sky,
+  secondary: n.slate,
+  success: n.green,
+  warning: n.yellow,
+  error: n.red
+}, a = (r) => n[r], c = (r, s) => l(r, s), w = () => {
+  const r = m(g, {}), s = p(() => y(C, f(r).colors || {}));
+  return {
+    getPalette: (e) => {
+      if (!e)
+        return a("gray");
+      const o = a(e);
+      if (o)
+        return o;
+      if (i[e])
+        return i[e];
+      if (s.value[e])
+        return s.value[e];
+      if (!d(e))
+        return console.warn(`Invalid color: ${e}`), a("gray");
+      const u = {
+        50: t(e, 0.9),
+        100: t(e, 0.8),
+        200: t(e, 0.6),
+        300: t(e, 0.4),
+        400: t(e, 0.1),
+        500: e,
+        600: t(e, -0.1),
+        700: t(e, -0.25),
+        800: t(e, -0.58),
+        900: t(e, -0.7),
+        950: t(e, -0.8)
+      };
+      return i[e] = u, u;
+    },
+    getColorOpacity: c
+  };
+};
+w.props = (r) => ({
+  color: {
+    type: String,
+    default: r
+  }
+});
+export {
+  w as useColors
+};

package/lib/composables/{inputtable.d.ts → useInputtable.d.ts}

@@ -1,4 +1,4 @@
-import type { PropType } from 'vue';
+import type { MaybeRef, PropType } from 'vue';
 export interface XFormInputMethods {
     focus: () => void;
     validate: (val: any) => boolean;
@@ -12,8 +12,14 @@ export declare const useInputtable: {
     }): {
         isFirstValidation: import("vue").Ref<boolean>;
         errorInternal: any;
+        isFocused: import("vue").Ref<boolean>;
         isInsideForm: boolean;
-        inputListeners: {};
+        inputListeners: MaybeRef<{
+            focus: (event: Event) => void;
+            blur: (event: Event) => void;
+            input: (event: Event) => void;
+            change: (event: Event) => void;
+        }>;
         reset: () => void;
         validate: (val?: any) => boolean;
         setError: (val: string) => void;
@@ -29,6 +35,7 @@ export declare const useInputtable: {
             readonly default: true;
         };
         readonly error: StringConstructor;
+        readonly hideFooter: BooleanConstructor;
         readonly rules: {
             readonly type: ArrayConstructor;
             readonly default: () => never[];

package/lib/composables/useInputtable.js

@@ -0,0 +1,93 @@
+import { ref as s, watch as I, inject as B, computed as A, onMounted as S, onUnmounted as j } from "vue";
+import { injectFormKey as O } from "./keys.js";
+const p = (t, { focus: h, emit: u, withListeners: y = !0 }) => {
+  const o = s(!0), n = s(t.error), b = t.name ? t.name : (Math.random() + 1).toString(36).substring(7), i = s(b);
+  I(() => t.error, (e) => {
+    n.value = e;
+  }), I(() => t.name, (e) => {
+    e && (i.value = e);
+  });
+  const c = B(O, {
+    registerInput: () => {
+    },
+    unregisterInput: () => {
+    },
+    isInsideForm: !1
+  }), V = () => {
+    n.value = "", o.value = !0, u("update:modelValue", "");
+  }, v = (e) => {
+    n.value = e;
+  }, d = (e) => {
+    e = e || t.modelValue, o.value = !1;
+    for (let m = 0; m < t.rules.length; m++) {
+      const r = t.rules[m];
+      let a = !0;
+      if (typeof r == "function")
+        a = r(e);
+      else if (Array.isArray(r) && r.length === 2) {
+        const { 0: l, 1: g } = r;
+        a = l(e, g);
+      } else {
+        const l = r.fn, { options: g } = r;
+        a = l(e, g);
+      }
+      if (a !== !0)
+        return n.value = a, !1;
+    }
+    return n.value = "", !0;
+  }, f = s(!1), F = y ? A(() => ({
+    focus: (e) => {
+      f.value = !0, u("focus", e);
+    },
+    blur: (e) => {
+      f.value = !1, u("blur", e);
+    },
+    input: (e) => {
+      t.validateOnInput && !o.value && d(e.target.value), u("update:modelValue", e.target.value);
+    },
+    change: (e) => u("change", e)
+  })) : {
+    focus: () => {
+    },
+    blur: () => {
+    },
+    input: () => {
+    },
+    change: () => {
+    }
+  };
+  return S(() => {
+    c.registerInput(i.value, h, d, v);
+  }), j(() => {
+    c.unregisterInput(i.value);
+  }), {
+    isFirstValidation: o,
+    errorInternal: n,
+    isFocused: f,
+    isInsideForm: c.isInsideForm,
+    inputListeners: F,
+    reset: V,
+    validate: d,
+    setError: v
+  };
+};
+p.emits = (t = !0) => t ? ["update:modelValue", "blur", "focus", "input", "change"] : ["update:modelValue"];
+p.props = () => ({
+  modelValue: [String, Number, Boolean, Object, Array],
+  name: String,
+  readonly: Boolean,
+  required: Boolean,
+  validateOnInput: {
+    type: Boolean,
+    default: !0
+  },
+  error: String,
+  hideFooter: Boolean,
+  rules: {
+    type: Array,
+    default: () => []
+  }
+});
+export {
+  p as useInputtable
+};

package/lib/composables/{interactive.d.ts → useInteractive.d.ts}

@@ -1,7 +1,10 @@
-import type { Ref } from 'vue';
+import type { LoaderStatus } from 'src/components/loader/Loader.vue';
+import type { PropType, Ref } from 'vue';
 export interface InteractiveProps {
     disabled?: boolean;
     loading?: boolean;
+    loadingLabel?: string;
+    loadingStatus?: LoaderStatus;
 }
 export declare const useInteractive: {
     (el: Ref<HTMLElement | null>): {
@@ -11,5 +14,10 @@ export declare const useInteractive: {
     props(): {
         readonly disabled: BooleanConstructor;
         readonly loading: BooleanConstructor;
+        readonly loadingLabel: StringConstructor;
+        readonly loadingStatus: {
+            readonly type: PropType<LoaderStatus>;
+            readonly default: "active";
+        };
     };
 };

package/lib/composables/useInteractive.js

@@ -0,0 +1,22 @@
+const t = (o) => ({
+  focus: () => {
+    var a, e;
+    return (e = (a = o.value) == null ? void 0 : a.focus) == null ? void 0 : e.call(a);
+  },
+  blur: () => {
+    var a, e;
+    return (e = (a = o.value) == null ? void 0 : a.blur) == null ? void 0 : e.call(a);
+  }
+});
+t.props = () => ({
+  disabled: Boolean,
+  loading: Boolean,
+  loadingLabel: String,
+  loadingStatus: {
+    type: String,
+    default: "active"
+  }
+});
+export {
+  t as useInteractive
+};

package/lib/composables/useNotifications.d.ts

@@ -0,0 +1,2 @@
+import type { NotificationInjection } from '../components/notifications/Notifications.vue';
+export declare const useNotifications: (key?: symbol | string) => NotificationInjection | undefined;

package/lib/composables/{theme.d.ts → useTheme.d.ts}

@@ -1,11 +1,14 @@
-import { type StyleValue, type Slots, type UnwrapNestedRefs, type UnwrapRef, type MaybeRef } from 'vue';
-import { type ColorComposition } from './colors';
-import { type CSSComposition } from './css';
+import { type Slots, type UnwrapNestedRefs, type UnwrapRef, type MaybeRef, type CSSProperties } from 'vue';
+import { type ColorComposition } from './useColors';
+import { type CSSComposition } from './useCSS';
+import type { ComponentThemes } from 'src/theme';
+export type Stylish = false | null | undefined | string | CSSProperties;
+export type StyleValue = Stylish | Array<Stylish>;
 export type ThemeVueClass = string | Record<string, boolean> | (string | Record<string, boolean>)[];
 export type ThemeClasses<P, K extends string = string, D = undefined> = Record<K, string | ((params: ThemeParams<P, D>) => ThemeVueClass)>;
 export type ThemeStyles<P, D> = StyleValue | ((params: ThemeParams<P, D>) => StyleValue);
 export interface ThemeComponent<P = object, K extends string = string, D = object> {
-    classes?: ThemeClasses<P, K, D>;
+    classes?: Partial<ThemeClasses<P, K, D>>;
     styles?: ThemeStyles<P, D>;
 }
 export type ThemeParams<P = Record<string, any>, D = Record<string, any>> = {
@@ -16,8 +19,8 @@ export type ThemeParams<P = Record<string, any>, D = Record<string, any>> = {
     rtl?: boolean;
     data: UnwrapNestedRefs<D>;
 };
-export declare const useTheme: <P extends object = object, K extends string = string, D extends object = object>(namespace: string, defaultTheme?: ThemeComponent<P, K, D>, props?: MaybeRef<P>, data?: D) => {
-    classPrefix: import("vue").ComputedRef<any>;
+export declare const useTheme: <P extends object = object, K extends string = string, D extends object = object>(namespace: keyof ComponentThemes, defaultTheme?: ThemeComponent<P, K, D>, props?: MaybeRef<P>, data?: D) => {
+    classPrefix: import("vue").ComputedRef<string>;
     className: import("vue").ComputedRef<string>;
     colors: ColorComposition;
     classes: import("vue").ComputedRef<Record<K, ThemeVueClass>>;

package/lib/composables/useTheme.js

@@ -0,0 +1,59 @@
+import { inject as O, computed as c, unref as e, useSlots as P } from "vue";
+import { injectThemeKey as T } from "./keys.js";
+import { useColors as d } from "./useColors.js";
+import { useCSS as A } from "./useCSS.js";
+import { mergeRightDeep as D, smartUnref as h, isFunction as S, isObject as $ } from "../common/utils.js";
+const U = (s, r = {}, n = {}, l = {}) => {
+  const o = O(T, {}), v = c(() => {
+    var t, m, a;
+    return (m = (t = e(o)) == null ? void 0 : t.components) != null && m[s] ? D(r.classes || {}, ((a = e(o).components) == null ? void 0 : a[s].classes) || {}) : r.classes || {};
+  }), p = s.replace(/([A-Z])/g, (t) => `-${t[0].toLowerCase()}`).replace(/^-/, ""), f = c(() => {
+    var t;
+    return ((t = e(o)) == null ? void 0 : t.classPrefix) ?? "x-";
+  }), w = c(() => `${f.value}${p}`), C = c(() => {
+    var t;
+    return ((t = e(o)) == null ? void 0 : t.rtl) ?? !1;
+  }), g = P(), i = d(), u = A(p), y = c(() => b(v.value, {
+    props: e(n),
+    slots: g,
+    data: h(l),
+    colors: i,
+    css: u,
+    rtl: e(C)
+  })), N = c(() => {
+    var a, x;
+    const t = ((x = (a = e(o)) == null ? void 0 : a.components) == null ? void 0 : x[s]) || {}, m = {
+      props: e(n),
+      slots: g,
+      data: h(l),
+      colors: i,
+      css: u,
+      rtl: e(C)
+    };
+    return [
+      j(r.styles, m),
+      j(t.styles, m)
+    ];
+  });
+  return {
+    classPrefix: f,
+    className: w,
+    colors: i,
+    classes: y,
+    styles: N,
+    css: u
+  };
+};
+function b(s, r) {
+  const n = {};
+  return Object.keys(s).forEach((l) => {
+    const o = s[l];
+    n[l] = S(o) ? o(r) : $(o) ? b(o, r) : o;
+  }), n;
+}
+function j(s, r) {
+  return S(s) ? s(r) || {} : $(s) ? s : {};
+}
+export {
+  U as useTheme
+};

package/lib/create.d.ts

@@ -1,13 +1,12 @@
 import type { App } from 'vue';
-import type { ColorLibrary } from './composables/colors';
-export type IndielayerUIOptions = {
+import { type UITheme } from './theme';
+export type UIOptions = {
     prefix?: string;
-    components?: any;
-    colors?: ColorLibrary;
-    icons?: any;
-    theme?: any;
+    components?: any[];
+    icons?: Record<string, any>;
+    theme?: UITheme;
 };
-declare const create: (createOptions?: IndielayerUIOptions) => {
-    install: (app: App, installOptions?: IndielayerUIOptions) => void;
+declare const create: (createOptions?: UIOptions) => {
+    install: (app: App, installOptions?: UIOptions) => void;
 };
 export default create;

package/lib/create.js

@@ -1,19 +1,21 @@
-import { injectColorsKey as c, injectIconsKey as r, injectThemeKey as a } from "./composables/keys.js";
-const f = {
+import { injectOptionsKey as r, injectIconsKey as m, injectThemeKey as f } from "./composables/keys.js";
+import { injectThemeStyles as a } from "./theme.js";
+const l = {
   prefix: "X"
-}, l = (s = {}) => ({
-  install: (t, i = {}) => {
+}, h = (o = {}) => ({
+  install: (t, c = {}) => {
+    var s;
     const e = {
-      ...f,
-      ...s,
-      ...i
+      ...l,
+      ...o,
+      ...c
     };
-    e.components && e.components.forEach((o) => {
-      const n = o.name.startsWith("X") ? o.name.slice(1) : o.name;
-      t.component(`${e.prefix}${n}`) || t.component(`${e.prefix}${n}`, o);
-    }), t.provide(c, e.colors), t.provide(r, e.icons || {}), t.provide(a, e.theme || {});
+    e.components && e.components.forEach((n) => {
+      const i = n.name.startsWith("X") ? n.name.slice(1) : n.name;
+      t.component(`${e.prefix}${i}`) || t.component(`${e.prefix}${i}`, n);
+    }), t.provide(r, e), t.provide(m, e.icons || {}), t.provide(f, e.theme || {}), (s = e.theme) != null && s.styles && a(e.theme.name || "", e.theme.styles);
   }
-}), $ = l;
+}), $ = h;
 export {
   $ as default
 };

package/lib/index.d.ts

@@ -1,6 +1,8 @@
-export { tailwindColors as colors } from './composables/colors-utils';
+export { tailwindColors as colors } from './common/colors';
 export { default as version } from './version';
 export * from './components';
 export * from './composables';
-export { default as createUI } from './create';
+export * from './themes';
+export type { UITheme, ComponentThemes } from './theme';
+export { default as createUI, type UIOptions } from './create';
 export { default } from './install';