@indielayer/ui 1.5.0 → 1.5.2

package/docs/components/toolbar/Toolbar.vue

@@ -25,7 +25,7 @@ const isDev = import.meta.env.DEV
 
 <template>
   <x-container fluid class="bg-white dark:bg-secondary-800">
-    <div class="flex justify-items-center items-center py-2">
+    <div class="flex justify-items-center items-center py-2 min-h-[54px]">
       <a href="/" class="flex items-center">
         <img src="@/assets/images/logo_mini.svg" width="26" alt="Indielayer"/>
         <x-divider vertical class="!h-[24px] mx-3"/>
@@ -40,14 +40,7 @@ const isDev = import.meta.env.DEV
       <x-spacer/>
 
       <div class="flex items-center font-semibold text-sm">
-        <x-select
-          v-if="isDev"
-          v-model="selected"
-          :options="options"
-          hide-footer
-          size="sm"
-        />
-        <x-divider v-if="isDev" vertical style="height: 10px;" class="px-2"/>
+
         <div class="tracking-wide text-xs">v{{ version }}</div>
         <x-divider vertical style="height: 10px;" class="px-2 hidden sm:block"/>
         <x-link

package/docs/pages/component/form/usage.vue

@@ -33,25 +33,22 @@ function onSubmit(isValid: string) {
 
 <template>
   <x-form title="Edit user information" description="Almost all fields are required" @submit="onSubmit">
-    <div class="grid grid-cols-2 gap-4">
-      <x-input
-        v-model="email"
-        :rules="[rules.isRequired, rules.isEmail]"
-        name="email"
-        label="Email"
-        placeholder="Enter your email"
-      />
-      <x-input
-        v-model="password"
-        type="password"
-        :rules="[rules.isRequired]"
-        name="password"
-        label="Password"
-        placeholder="Enter your password"
-        helper="Must be between 8 and 10 characters"
-      />
-    </div>
-
+    <x-input
+      v-model="email"
+      :rules="[rules.isRequired, rules.isEmail]"
+      name="email"
+      label="Email"
+      placeholder="Enter your email"
+    />
+    <x-input
+      v-model="password"
+      type="password"
+      :rules="[rules.isRequired]"
+      name="password"
+      label="Password"
+      placeholder="Enter your password"
+      helper="Must be between 8 and 10 characters"
+    />
     <x-textarea
       v-model="description"
       name="description"

package/docs/pages/component/modal/composed.vue

@@ -10,6 +10,12 @@ const email = ref('')
 const password = ref('')
 const description = ref('')
 
+const selected = ref()
+const options = [
+  { value: 'us', label: 'USA' },
+  { value: 'u', label: 'United Kingdom' },
+]
+
 const rules = {
   isEmail: (v: string) => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid',
   isRequired: (v: string) => !!v  || 'Field is required',
@@ -55,6 +61,7 @@ function onSubmit(isValid: boolean) {
       placeholder="Description"
       hide-footer
     />
+    <x-select v-model="selected" :options="options" label="Country" :rules="[rules.isRequired]"/>
 
     <!-- <template #tertiary-action>
       <x-button color="gray" size="lg">Tertiary</x-button>

package/docs/pages/component/modal/usage.vue

@@ -33,7 +33,7 @@ const show3 = ref(false)
     :has-actions="false"
     :has-header="false"
     show-close
-    :dissmissable="false"
+    persistent
   >
     Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure praesentium non id dolores vitae. Nam ratione veritatis ab cumque voluptas porro illum, voluptate perferendis ducimus dolorem optio magni assumenda dolore! Doloremque facere aliquid facilis distinctio accusamus, dolorum eligendi consequuntur molestias sapiente non rem vero sed eos minus itaque sunt officiis iste ea repellendus possimus earum maiores? Quo laudantium fuga odit tenetur sint fugit deleniti dolores placeat, accusamus magni consectetur unde totam sunt labore dolor rem consequatur quaerat! Iure temporibus voluptatem cumque, dolore maiores rerum neque vero, iusto veritatis repellat eligendi amet! Molestiae cumque officiis eius harum iste, fuga corporis molestias.
   </x-modal>

package/exports/nuxt.plugin.js

@@ -1,8 +1,15 @@
 import { defineNuxtPlugin } from '#app'
-import create from '../src/create'
+import { BaseTheme, injectIconsKey, injectOptionsKey, injectThemeKey, createUI } from '../src'
 
 export default defineNuxtPlugin((nuxtApp) => {
-  const UI = create(nuxtApp.$config.public?.indielayerOptions)
+  const UI = createUI({
+    ...nuxtApp.$config.public?.indielayerOptions,
+    theme: BaseTheme,
+    injectIconsKey,
+    injectOptionsKey,
+    injectThemeKey,
+
+  })
 
   nuxtApp.vueApp.use(UI)
 })

package/lib/components/accordion/AccordionItem.vue.js

@@ -27,13 +27,13 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
     type: String,
     default: "right"
   }
-}, oe = {
+}, te = {
   name: "XAccordionItem",
   validators: {
     iconAlign: Z
   }
 }, ae = /* @__PURE__ */ V({
-  ...oe,
+  ...te,
   props: ee,
   emits: ["expand"],
   setup(A, { expose: x, emit: _ }) {
@@ -41,40 +41,40 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
       isInsideAccordion: !1
     }), w = z(() => u.iconAlign || n.iconAlign), I = D({
       iconAlign: w
-    }), o = m(!n.expanded), t = m(!0);
+    }), t = m(!n.expanded), o = m(!0);
     H(() => n.expanded, () => {
-      o.value = !n.expanded;
+      t.value = !n.expanded;
     });
     function B(e) {
-      t.value && (e.style.height = "0px");
+      o.value && (e.style.height = "0px");
     }
     function E(e, i) {
-      t.value ? (e.addEventListener("transitionend", i), setTimeout(() => {
+      o.value ? (e.addEventListener("transitionend", i), setTimeout(() => {
         e.style.height = `${e.scrollHeight}px`;
       }, 1)) : i();
     }
-    function C(e) {
-      t.value ? e.style.removeProperty("height") : t.value = !0;
+    function b(e) {
+      o.value ? e.style.removeProperty("height") : o.value = !0;
     }
-    function $(e) {
-      t.value && (e.style.height = `${e.scrollHeight}px`);
+    function C(e) {
+      o.value && (e.style.height = `${e.scrollHeight}px`);
     }
-    function b(e, i) {
-      t.value ? (e.addEventListener("transitionend", i), setTimeout(() => {
+    function $(e, i) {
+      o.value ? (e.addEventListener("transitionend", i), setTimeout(() => {
         e.style.height = "0px";
       }, 1)) : i();
     }
     function S(e) {
-      t.value ? e.style.removeProperty("height") : t.value = !0;
+      o.value ? e.style.removeProperty("height") : o.value = !0;
     }
     function p(e = !0) {
-      t.value = e, o.value = !1;
+      o.value = e, t.value = !1;
     }
     function L(e = !0) {
-      t.value = e, o.value = !0;
+      o.value = e, t.value = !0;
     }
     function f() {
-      n.disabled || (o.value = !o.value);
+      n.disabled || (t.value = !t.value);
     }
     function P(e = !0) {
       p(e), k("expand");
@@ -82,20 +82,21 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
     const { styles: N, classes: c, className: T } = J("AccordionItem", {}, {
       ...n,
       ...I
-    }, { collapsed: o, isInsideAccordion: u.isInsideAccordion });
+    }, { collapsed: t, isInsideAccordion: u.isInsideAccordion });
     return x({ toggle: f, open: p, close: L }), (e, i) => (a(), v(K(e.tag), {
       style: M(s(N)),
       class: l(s(T)),
       "aria-disabled": e.disabled,
-      "aria-expanded": o.value ? "false" : "true"
+      "aria-expanded": t.value ? "false" : "true"
     }, {
       default: h(() => [
         r("button", {
+          type: "button",
           class: l(s(c).wrapper),
           onClick: f
         }, [
           r("div", R, [
-            d(e.$slots, "default", { collapsed: o.value })
+            d(e.$slots, "default", { collapsed: t.value })
           ]),
           e.showIcon ? (a(), g("div", {
             key: 0,
@@ -111,9 +112,9 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
         X(q, {
           onBeforeEnter: B,
           onEnter: E,
-          onAfterEnter: C,
-          onBeforeLeave: $,
-          onLeave: b,
+          onAfterEnter: b,
+          onBeforeLeave: C,
+          onLeave: $,
           onAfterLeave: S
         }, {
           default: h(() => [
@@ -122,10 +123,10 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
             }, [
               d(e.$slots, "content", {
                 expand: P,
-                collapsed: o.value
+                collapsed: t.value
               })
             ], 2), [
-              [G, !o.value]
+              [G, !t.value]
             ])
           ]),
           _: 3

package/lib/components/accordion/theme/AccordionItem.base.theme.js

@@ -1,16 +1,16 @@
-const r = {
+const i = {
   classes: {
-    wrapper: ({ props: t, slots: i, data: e }) => {
-      const s = ["relative flex items-center w-full text-left"];
-      return e.isInsideAccordion && (i.default && (t.iconAlign === "left" ? s.push("pl-8 pr-4") : s.push("pr-8 pl-4"), s.push("py-2"), t.disabled || s.push("hover:bg-secondary-50 dark:hover:bg-secondary-600")), t.disabled || s.push("cursor-pointer")), s;
+    wrapper: ({ props: t, slots: r, data: e }) => {
+      const s = ["relative flex items-center w-full text-left rounded"];
+      return e.isInsideAccordion && (r.default && (t.iconAlign === "left" ? s.push("pl-8 pr-4") : s.push("pr-8 pl-4"), s.push("py-2"), t.disabled || s.push("hover:bg-secondary-100 dark:hover:bg-secondary-600")), t.disabled || s.push("cursor-pointer")), s;
     },
-    icon: ({ props: t, data: i }) => {
+    icon: ({ props: t, data: r }) => {
       const e = ["absolute flex transform transition-transform duration-150"];
-      return i.collapsed || e.push("rotate-180"), t.disabled && e.push("text-secondary-300"), t.iconAlign === "left" ? e.push("left-2") : e.push("right-2"), e;
+      return r.collapsed || e.push("rotate-180"), t.disabled && e.push("text-secondary-300"), t.iconAlign === "left" ? e.push("left-2") : e.push("right-2"), e;
     },
     content: "transition-[height] duration-150 overflow-y-hidden"
   }
-}, n = r;
+}, n = i;
 export {
   n as default
 };

package/lib/components/alert/Alert.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as v, computed as g, openBlock as l, createElementBlock as a, normalizeStyle as k, unref as r, normalizeClass as w, renderSlot as t, createBlock as b, createCommentVNode as i, createElementVNode as n, Fragment as B, createVNode as $ } from "vue";
+import { defineComponent as v, computed as g, openBlock as l, createElementBlock as a, normalizeStyle as k, unref as r, normalizeClass as b, renderSlot as t, createBlock as w, createCommentVNode as i, createElementVNode as n, Fragment as B, createVNode as $ } from "vue";
 import { useColors as I } from "../../composables/useColors.js";
 import { useTheme as C } from "../../composables/useTheme.js";
 import { infoIcon as h, successIcon as N, errorIcon as S, warningIcon as V, closeIcon as z } from "../../common/icons.js";
@@ -24,7 +24,7 @@ const A = /* @__PURE__ */ n("div", { class: "flex-grow" }, null, -1), E = ["aria
     const o = m, p = g(() => o.type === "info" ? h : o.type === "success" ? N : o.type === "error" ? S : o.type === "warning" ? V : ""), { styles: u, classes: f, className: d } = C("Alert", {}, o);
     return (e, s) => (l(), a("div", {
       style: k(r(u)),
-      class: w([
+      class: b([
         r(d),
         e.$style.alert,
         e.glow ? e.$style["alert--glow"] : "",
@@ -32,7 +32,7 @@ const A = /* @__PURE__ */ n("div", { class: "flex-grow" }, null, -1), E = ["aria
       ])
     }, [
       t(e.$slots, "icon", {}, () => [
-        e.type ? (l(), b(c, {
+        e.type ? (l(), w(c, {
           key: 0,
           icon: p.value,
           class: "text-[color:var(--x-alert-icon)] dark:text-[color:var(--x-alert-dark-icon)]"
@@ -44,6 +44,7 @@ const A = /* @__PURE__ */ n("div", { class: "flex-grow" }, null, -1), E = ["aria
       e.removable ? (l(), a(B, { key: 0 }, [
         A,
         n("button", {
+          type: "button",
           class: "shrink-0",
           "aria-label": e.closeLabel,
           onClick: s[0] || (s[0] = (y) => e.$emit("remove", y))

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

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

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

@@ -1,4 +1,4 @@
-import { defineComponent as D, ref as I, inject as T, computed as l, useAttrs as V, unref as e, openBlock as a, createBlock as r, resolveDynamicComponent as A, normalizeClass as u, normalizeStyle as E, withCtx as F, createCommentVNode as d, createElementVNode as m, renderSlot as K } from "vue";
+import { defineComponent as D, ref as I, inject as T, computed as l, useAttrs as V, unref as t, openBlock as a, createBlock as r, resolveDynamicComponent as A, normalizeClass as u, normalizeStyle as E, withCtx as F, createCommentVNode as d, createElementVNode as m, renderSlot as K } from "vue";
 import { useTheme as O } from "../../composables/useTheme.js";
 import { useColors as X } from "../../composables/useColors.js";
 import { useCommon as b } from "../../composables/useCommon.js";
@@ -34,42 +34,42 @@ const J = {
   validators: {
     ...b.validators()
   }
-}, eo = /* @__PURE__ */ D({
+}, to = /* @__PURE__ */ D({
   ...M,
   props: J,
   setup(y, { expose: v }) {
-    const t = y, g = I(null), s = T(q, {
+    const e = y, g = I(null), s = T(q, {
       isButtonGroup: !1,
       groupProps: {}
-    }), { isButtonGroup: B } = s, n = l(() => s.groupProps.size || t.size), z = l(() => s.groupProps.flat || t.flat), k = l(() => t.color || s.groupProps.color), P = l(() => t.ghost || s.groupProps.ghost), S = l(() => t.light || s.groupProps.light), w = l(() => t.outlined || s.groupProps.outlined), i = l(() => t.disabled || s.groupProps.disabled), p = l(() => t.icon || t.iconLeft), C = V(), R = l(() => C.href ? "a" : t.to ? "router-link" : t.tag), L = l(() => ({
-      size: e(n),
-      flat: e(z),
-      color: e(k),
-      ghost: e(P),
-      light: e(S),
-      outlined: e(w),
-      disabled: e(i),
-      loading: t.loading,
-      block: t.block,
-      glow: t.glow,
-      iconLeft: e(p),
-      iconRight: t.iconRight,
-      rounded: t.rounded
+    }), { isButtonGroup: B } = s, n = l(() => s.groupProps.size || e.size), z = l(() => s.groupProps.flat || e.flat), k = l(() => e.color || s.groupProps.color), P = l(() => e.ghost || s.groupProps.ghost), S = l(() => e.light || s.groupProps.light), w = l(() => e.outlined || s.groupProps.outlined), i = l(() => e.disabled || s.groupProps.disabled), p = l(() => e.icon || e.iconLeft), C = V(), R = l(() => C.href ? "a" : e.to ? "router-link" : e.tag), L = l(() => ({
+      size: t(n),
+      flat: t(z),
+      color: t(k),
+      ghost: t(P),
+      light: t(S),
+      outlined: t(w),
+      disabled: t(i),
+      loading: e.loading,
+      block: e.block,
+      glow: e.glow,
+      iconLeft: t(p),
+      iconRight: e.iconRight,
+      rounded: e.rounded
     })), { className: G, classes: c, styles: $ } = O("Button", {}, L, {
       isButtonGroup: B
-    }), { focus: N, blur: j } = h(g);
-    return v({ focus: N, blur: j }), (o, Q) => (a(), r(A(R.value), {
+    }), { focus: j, blur: N } = h(g);
+    return v({ focus: j, blur: N }), (o, Q) => (a(), r(A(R.value), {
       ref_key: "elRef",
       ref: g,
       to: o.to,
       class: u([
-        e(G),
+        t(G),
         o.$style.button,
         o.glow && !i.value && !o.loading ? o.$style["button--glow"] : "",
-        e(c).wrapper,
+        t(c).wrapper,
         { "w-full": o.block }
       ]),
-      style: E(e($)),
+      style: E(t($)),
       "aria-busy": o.loading ? "true" : null,
       "aria-disabled": o.tag !== "button" && i.value ? "true" : null,
       disabled: i.value || o.loading,
@@ -84,14 +84,14 @@ const J = {
           status: o.loadingStatus
         }, null, 8, ["size", "label", "status"])) : d("", !0),
         m("div", {
-          class: u({ invisible: o.loading })
+          class: u(["inline-flex items-center justify-center", { invisible: o.loading }])
         }, [
           p.value ? (a(), r(f, {
             key: 0,
             size: n.value,
             icon: p.value,
             class: u([
-              e(c).iconLeft
+              t(c).iconLeft
             ])
           }, null, 8, ["size", "icon", "class"])) : d("", !0),
           m("span", null, [
@@ -103,7 +103,7 @@ const J = {
           size: n.value,
           icon: o.iconRight,
           class: u([
-            e(c).iconRight,
+            t(c).iconRight,
             { invisible: o.loading }
           ])
         }, null, 8, ["size", "icon", "class"])) : d("", !0)
@@ -113,5 +113,5 @@ const J = {
   }
 });
 export {
-  eo as default
+  to as default
 };

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

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

package/lib/components/inputFooter/theme/InputFooter.base.theme.js

@@ -1,6 +1,6 @@
 const e = {
   classes: {
-    wrapper: "min-h-[1.3rem] text-xs mt-1",
+    wrapper: "text-xs mt-1",
     helperText: "text-secondary-500 dark:text-secondary-400",
     errorText: "text-error-500 dark:text-error-400"
   }

package/lib/components/label/theme/Label.base.theme.js

@@ -2,7 +2,7 @@ const s = {
   classes: {
     wrapper: ({ props: t }) => {
       const e = ["block relative align-bottom focus:outline-none"];
-      return t.isInsideForm && e.push("mb-3"), t.block && e.push("w-full"), e;
+      return t.isInsideForm && e.push("mb-5"), t.block && e.push("w-full"), e;
     },
     label: ({ props: t }) => {
       const e = "flex items-center gap-2 font-medium text-secondary-800 dark:text-secondary-200 mb-1";