@indielayer/ui 1.14.5 → 1.15.0

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

@@ -3,7 +3,7 @@
     <x-avatar name="John Smith" rounded />
     <x-avatar name="Andrew Colt" />
     <x-badge color="green" outlined position="bottom">
-      <x-avatar rounded name="Janet" image="https://images.unsplash.com/photo-1597223557154-721c1cecc4b0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=128&q=80" />
+      <x-avatar rounded name="Janet" image="https://gravatar.com/avatar/aa99b351245441b8ca95d54a52d2998c" />
     </x-badge>
   </div>
 </template>

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

@@ -1,15 +1,29 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 const name = ref('John')
+const title = ref('')
 </script>
 
 <template>
-  <x-input
-    v-model="name"
-    label="Name"
-    name="name"
-    placeholder="Placeholder"
-    helper="Helper text here"
-    tooltip="Tooltip here"
-  />
+  <div class="grid gap-6">
+    <x-input
+      v-model="name"
+      label="Name"
+      name="name"
+      placeholder="Placeholder"
+      helper="Helper text here"
+      tooltip="Tooltip here"
+      clearable
+    />
+
+    <x-input
+      v-model="title"
+      label="Title with character counter"
+      name="title"
+      maxlength="50"
+      show-counter
+      helper="Character counter is displayed"
+      placeholder="Enter a title (max 50 characters)"
+    />
+  </div>
 </template>

package/docs/pages/component/table/selectable.vue

@@ -65,4 +65,4 @@ const singleSelected = ref<number>(2)
       />
     </x-card>
   </div>
-</template>
+</template>

package/docs/pages/component/table/virtual.vue

@@ -51,7 +51,8 @@ const selected = ref<number[]>([])
       class="!h-80"
       fixed
       virtual-list
-      :virtual-list-item-height="54"
+      :to-fn="(item: any) => `/books/${item.id}`"
+      :virtual-list-item-height="44"
       selectable
     >
       <template #item-action="{ item }">

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

@@ -6,7 +6,7 @@ const notifications = useNotifications()
 
 <template>
   <div class="space-x-2 space-y-2">
-    <x-tag color="primary">Hello</x-tag>
+    <x-tag color="primary" to="/">Hello</x-tag>
     <x-tag color="purple">Hello</x-tag>
     <x-tag
       color="green"

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

@@ -2,18 +2,32 @@
 import { ref } from 'vue'
 
 const multiline = ref('')
+const comment = ref('')
 </script>
 
 <template>
-  <div class="grid grid-cols-2 gap-4">
+  <div class="grid gap-6">
+    <div class="grid grid-cols-2 gap-4">
+      <x-textarea
+        v-model="multiline"
+        label="Normal textarea"
+        helper="Helper text"
+        resizable
+        placeholder="Placeholder"
+        tooltip="Tooltip here"
+        clearable
+      />
+      <x-textarea v-model="multiline" label="Multiline adjust" adjust-to-text clearable />
+    </div>
+
     <x-textarea
-      v-model="multiline"
-      label="Normal textarea"
-      helper="Helper text"
-      resizable
-      placeholder="Placeholder"
-      tooltip="Tooltip here"
+      v-model="comment"
+      label="Comment with character counter"
+      maxlength="200"
+      show-counter
+      helper="Maximum 200 characters"
+      placeholder="Enter your comment"
+      rows="4"
     />
-    <x-textarea v-model="multiline" label="Multiline adjust" adjust-to-text />
   </div>
 </template>

package/lib/components/avatar/Avatar.vue2.js

@@ -1,13 +1,13 @@
-import { defineComponent as d, ref as f, computed as g, watch as v, openBlock as n, createBlock as y, resolveDynamicComponent as h, normalizeStyle as w, unref as r, normalizeClass as C, withCtx as S, createElementBlock as s, toDisplayString as _, renderSlot as k, createVNode as z, createCommentVNode as B } from "vue";
+import { defineComponent as f, ref as g, computed as v, watch as y, openBlock as n, createBlock as h, resolveDynamicComponent as w, normalizeStyle as C, unref as r, normalizeClass as S, withCtx as _, createElementBlock as s, createCommentVNode as l, toDisplayString as k, renderSlot as z, createVNode as B } from "vue";
 import { useCommon as i } from "../../composables/useCommon.js";
 import { useColors as I } from "../../composables/useColors.js";
 import { useTheme as N } from "../../composables/useTheme.js";
 import { avatarIcon as $ } from "../../common/icons.js";
-import A from "../icon/Icon.vue.js";
-const D = ["alt", "src"], V = {
+import b from "../icon/Icon.vue.js";
+const A = ["alt", "src"], D = {
   key: 1,
   class: "leading-none"
-}, b = {
+}, V = {
   ...i.props(),
   ...I.props("primary"),
   tag: {
@@ -22,18 +22,18 @@ const D = ["alt", "src"], V = {
 }, E = {
   name: "XAvatar",
   validators: i.validators()
-}, F = /* @__PURE__ */ d({
+}, F = /* @__PURE__ */ f({
   ...E,
-  props: b,
-  setup(l) {
-    const a = l, o = f(), m = g(() => {
+  props: V,
+  setup(m) {
+    const a = m, o = g(), p = v(() => {
       if (a.name) {
         const e = a.name.match(/\b\w/g) || [];
         return ((e.shift() || "") + (e.pop() || "")).toUpperCase();
       }
       return "";
     });
-    typeof window < "u" && Image && v(() => a.image, (e) => {
+    typeof window < "u" && Image && y(() => a.image, (e) => {
       if (o.value = void 0, !e)
         return;
       const t = new Image();
@@ -44,23 +44,24 @@ const D = ["alt", "src"], V = {
     }, {
       immediate: !0
     });
-    const { styles: c, classes: p, className: u } = N("Avatar", {}, a, { source: o });
-    return (e, t) => (n(), y(h(e.tag), {
-      style: w(r(c)),
-      class: C([
-        r(u),
+    const { styles: c, classes: u, className: d } = N("Avatar", {}, a, { source: o });
+    return (e, t) => (n(), h(w(e.tag), {
+      style: C(r(c)),
+      class: S([
+        r(d),
         e.$style.avatar,
-        r(p).wrapper
+        r(u).wrapper
       ])
     }, {
-      default: S(() => [
+      default: _(() => [
         o.value ? (n(), s("img", {
           key: 0,
           alt: e.alt,
           src: e.image,
-          class: "h-full w-full"
-        }, null, 8, D)) : e.name ? (n(), s("span", V, _(m.value), 1)) : e.name ? B("", !0) : k(e.$slots, "avatarIcon", { key: 2 }, () => [
-          z(A, {
+          class: "absolute top-0 left-0 h-full w-full"
+        }, null, 8, A)) : l("", !0),
+        e.name ? (n(), s("span", D, k(p.value), 1)) : e.name ? l("", !0) : z(e.$slots, "avatarIcon", { key: 2 }, () => [
+          B(b, {
             size: e.size,
             icon: r($)
           }, null, 8, ["size", "icon"])

package/lib/components/avatar/theme/Avatar.base.theme.js

@@ -1,25 +1,22 @@
-const n = {
+const r = {
   classes: {
-    wrapper({ props: e }) {
-      const t = ["relative inline-flex items-center justify-center overflow-hidden align-middle border box-content"];
-      return t.push(e.rounded ? "rounded-full" : "rounded-md"), e.size === "xs" ? t.push("h-6 w-6 text-xs") : e.size === "sm" ? t.push("h-9 w-9 text-sm") : e.size === "lg" ? t.push("h-12 w-12 text-lg") : e.size === "xl" ? t.push("h-[3.75rem] w-[3.75rem] text-xl") : t.push("h-10 w-10"), t;
+    wrapper({ props: t }) {
+      const e = ["relative inline-flex items-center justify-center overflow-hidden align-middle border box-content"];
+      return e.push(t.rounded ? "rounded-full" : "rounded-md"), t.size === "xs" ? e.push("h-6 w-6 text-xs") : t.size === "sm" ? e.push("h-9 w-9 text-sm") : t.size === "lg" ? e.push("h-12 w-12 text-lg") : t.size === "xl" ? e.push("h-[3.75rem] w-[3.75rem] text-xl") : e.push("h-10 w-10"), e;
     }
   },
-  styles({ props: e, colors: t, css: r, data: l }) {
-    const s = t.getPalette(e.color);
-    return l.source ? r.variables({
-      bg: "transparent",
-      border: e.outlined ? s[500] : "transparent"
-    }) : r.variables({
+  styles({ props: t, colors: e, css: l, data: n }) {
+    const s = e.getPalette(t.color);
+    return l.variables({
       bg: s[100],
       text: s[500],
-      border: e.outlined ? s[500] : "transparent",
+      border: t.outlined ? s[500] : "transparent",
       dark: {
         bg: s[900]
       }
     });
   }
-}, i = n;
+}, i = r;
 export {
   i as default
 };

package/lib/components/datepicker/Datepicker.vue.js

@@ -161,7 +161,7 @@ const W = {
     }), c({ focus: v, blur: w, validate: r });
     const { styles: B, classes: S, className: O } = V("Datepicker", {}, g);
     return (e, H) => (N(), I("div", {
-      style: P([n(B), { "--dp-clear-btn-top": e.label ? "2.70rem" : "1.2rem" }]),
+      style: P([n(B), { "--dp-clear-btn-top": e.label ? "2.75rem" : "1.2rem" }]),
       class: j([
         n(O),
         n(S).wrapper

package/lib/components/drawer/Drawer.vue.js

@@ -1,12 +1,12 @@
-import { defineComponent as X, ref as a, watchEffect as j, watch as K, computed as v, onMounted as M, openBlock as y, createBlock as O, Teleport as q, createVNode as w, Transition as F, withCtx as g, withDirectives as G, createElementVNode as k, normalizeClass as $, unref as n, createElementBlock as H, createCommentVNode as x, normalizeStyle as I, renderSlot as f, vShow as J } from "vue";
-import { useBreakpoints as Q, breakpointsTailwind as U, useEventListener as S, useSwipe as W } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
-import { useTheme as Y } from "../../composables/useTheme.js";
-import Z from "../scroll/Scroll.vue.js";
-const ee = {
+import { defineComponent as j, ref as r, watchEffect as K, watch as M, computed as y, onMounted as O, openBlock as w, createBlock as q, Teleport as F, createVNode as g, Transition as G, withCtx as k, withDirectives as H, createElementVNode as $, normalizeClass as x, unref as n, createElementBlock as I, createCommentVNode as S, normalizeStyle as J, renderSlot as u, vShow as Q } from "vue";
+import { useBreakpoints as U, breakpointsTailwind as W, useEventListener as E, useSwipe as Y } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
+import { useTheme as Z } from "../../composables/useTheme.js";
+import ee from "../scroll/Scroll.vue.js";
+const te = {
   key: 0,
   ref: "swipeRef",
   class: "flex flex-col max-h-full"
-}, te = ["left", "right", "top", "bottom"], oe = {
+}, oe = ["left", "right", "top", "bottom"], ie = {
   modelValue: Boolean,
   position: {
     type: String,
@@ -29,126 +29,132 @@ const ee = {
     type: Boolean,
     default: !0
   }
-}, ie = {
+}, se = {
   name: "XDrawer",
   inheritAttrs: !1,
   validators: {
-    position: te
+    position: oe
   }
-}, pe = /* @__PURE__ */ X({
-  ...ie,
-  props: oe,
+}, fe = /* @__PURE__ */ j({
+  ...se,
+  props: ie,
   emits: ["update:modelValue"],
-  setup(E, { expose: L, emit: B }) {
-    const t = E, u = B, i = a(!0), s = a(t.modelValue), r = a(null), d = a(null), c = a(!1), h = typeof t.breakpoint == "string", p = Q(h ? U : { md: t.breakpoint || 768 }).smaller(h ? t.breakpoint : "md");
-    j(() => {
-      t.breakpoint && (p.value ? (i.value = !0, l()) : (i.value = !1, m()));
-    }), S(r, "pointerdown", l), K(() => t.modelValue, (e) => {
+  setup(L, { expose: B, emit: T }) {
+    const t = L, d = T, i = r(!0), s = r(t.modelValue), p = r(null), c = r(null), h = r(!1), m = typeof t.breakpoint == "string", f = U(m ? W : { md: t.breakpoint || 768 }).smaller(m ? t.breakpoint : "md");
+    K(() => {
+      t.breakpoint && (f.value ? (i.value = !0, l()) : (i.value = !1, v()));
+    }), E(p, "pointerdown", l), M(() => t.modelValue, (e) => {
       s.value = e;
-    }), typeof window < "u" && S(document, "keydown", T);
-    function T(e) {
+    }), typeof window < "u" && E(document, "keydown", V);
+    function V(e) {
       e.key === "Escape" && s.value && l();
     }
-    W(d, {
+    Y(c, {
       onSwipeEnd(e, o) {
         i.value && (t.position === "left" && o === "left" || t.position === "right" && o === "right" || t.position === "top" && o === "up" || t.position === "bottom" && o === "down") && l();
       }
     });
-    const V = v(() => {
+    const N = y(() => {
       const e = {};
       return t.position === "left" || t.position === "right" ? e.width = `${t.width}px` : (t.position === "top" || t.position === "bottom") && (e.height = `${t.height}px`), e;
-    }), N = v(() => {
+    }), _ = y(() => {
       const e = [];
       return i.value && (e.push("absolute shadow-lg"), t.position === "top" ? e.push("top-0 inset-x-0") : t.position === "bottom" ? e.push("bottom-0 inset-x-0") : t.position === "left" ? e.push("left-0 inset-y-0") : t.position === "right" && e.push("right-0 inset-y-0")), e;
     });
-    function _(e) {
+    function C(e) {
       e.classList.add("inset-0"), t.position === "top" ? e.style.top = `-${t.height}px` : t.position === "bottom" ? e.style.bottom = `-${t.height}px` : t.position === "left" ? e.style.left = `-${t.width}px` : t.position === "right" && (e.style.right = `-${t.width}px`);
     }
-    function C(e, o) {
+    function R(e, o) {
       if (!i.value) {
         o();
         return;
       }
-      e.addEventListener("transitionend", o), setTimeout(() => {
+      const a = () => {
+        e.removeEventListener("transitionend", a), o();
+      };
+      e.addEventListener("transitionend", a), setTimeout(() => {
         t.backdrop && e.classList.add("bg-slate-500/30"), t.position === "top" ? e.style.top = "0" : t.position === "bottom" ? e.style.bottom = "0" : t.position === "left" ? e.style.left = "0" : t.position === "right" && (e.style.right = "0");
       }, 1);
     }
-    function R(e) {
+    function D(e) {
     }
-    function D(e, o) {
-      e.addEventListener("transitionend", o), setTimeout(() => {
+    function z(e, o) {
+      const a = () => {
+        e.removeEventListener("transitionend", a), o();
+      };
+      e.addEventListener("transitionend", a), setTimeout(() => {
         t.backdrop && e.classList.remove("bg-slate-500/30"), t.position === "top" ? e.style.top = `-${t.height}px` : t.position === "bottom" ? e.style.bottom = `-${t.height}px` : t.position === "left" ? e.style.left = `-${t.width}px` : t.position === "right" && (e.style.right = `-${t.width}px`);
       }, 1);
     }
-    function z(e) {
+    function A(e) {
       e.classList.remove("inset-0");
     }
     function l(e) {
-      e && e.target !== r.value || (s.value = !1, u("update:modelValue", !1));
+      e && e.target !== p.value || (s.value = !1, d("update:modelValue", !1));
     }
-    function m() {
-      s.value = !0, u("update:modelValue", !0);
+    function v() {
+      s.value = !0, d("update:modelValue", !0);
     }
-    M(() => {
-      c.value = !0;
+    O(() => {
+      h.value = !0;
     });
-    const { styles: A, classes: b, className: P } = Y("Drawer", {}, t);
-    return L({ open: m, close: l }), (e, o) => c.value ? (y(), O(q, {
+    const { styles: P, classes: b, className: X } = Z("Drawer", {}, t);
+    return B({ open: v, close: l }), (e, o) => h.value ? (w(), q(F, {
       key: 0,
       to: e.teleportTo,
       disabled: !i.value
     }, [
-      w(F, {
+      g(G, {
         css: !1,
-        onBeforeEnter: _,
-        onEnter: C,
-        onBeforeLeave: R,
-        onLeave: D,
-        onAfterLeave: z
+        onBeforeEnter: C,
+        onEnter: R,
+        onBeforeLeave: D,
+        onLeave: z,
+        onAfterLeave: A
       }, {
-        default: g(() => [
-          G(k("div", {
+        default: k(() => [
+          H($("div", {
             ref_key: "backdropRef",
-            ref: r,
-            class: $([
+            ref: p,
+            class: x([
               e.$attrs.class,
               n(b).backdrop,
               i.value || !e.breakpoint ? "absolute z-40" : ""
             ])
           }, [
-            i.value && s.value ? (y(), H("div", ee, null, 512)) : x("", !0),
-            k("div", {
+            i.value && s.value ? (w(), I("div", te, null, 512)) : S("", !0),
+            $("div", {
               ref_key: "drawerRef",
-              ref: d,
-              class: $([
-                n(P),
-                N.value,
+              ref: c,
+              class: x([
+                n(X),
+                _.value,
                 n(b).wrapper
               ]),
-              style: I([V.value, n(A)])
+              style: J([N.value, n(P)])
             }, [
-              f(e.$slots, "header"),
-              w(Z, {
+              u(e.$slots, "header"),
+              g(ee, {
                 scrollbar: !1,
                 vertical: "",
                 class: "flex-1"
               }, {
-                default: g(() => [
-                  f(e.$slots, "default")
+                default: k(() => [
+                  u(e.$slots, "default")
                 ]),
                 _: 3
               }),
-              f(e.$slots, "footer")
+              u(e.$slots, "footer")
             ], 6)
           ], 2), [
-            [J, e.breakpoint ? s.value && n(p) || !n(p) : s.value]
+            [Q, e.breakpoint ? s.value && n(f) || !n(f) : s.value]
           ])
         ]),
         _: 3
       })
-    ], 8, ["to", "disabled"])) : x("", !0);
+    ], 8, ["to", "disabled"])) : S("", !0);
   }
 });
 export {
-  pe as default
+  fe as default
 };

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

@@ -23,6 +23,8 @@ declare const inputProps: {
     };
     step: (StringConstructor | NumberConstructor)[];
     block: BooleanConstructor;
+    showCounter: BooleanConstructor;
+    clearable: BooleanConstructor;
     modelValue: {
         readonly type: PropType<string | number | boolean | object | any[] | undefined>;
         readonly default: undefined;
@@ -92,6 +94,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     };
     step: (StringConstructor | NumberConstructor)[];
     block: BooleanConstructor;
+    showCounter: BooleanConstructor;
+    clearable: BooleanConstructor;
     modelValue: {
         readonly type: PropType<string | number | boolean | object | any[] | undefined>;
         readonly default: undefined;
@@ -159,6 +163,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     };
     step: (StringConstructor | NumberConstructor)[];
     block: BooleanConstructor;
+    showCounter: BooleanConstructor;
+    clearable: BooleanConstructor;
     modelValue: {
         readonly type: PropType<string | number | boolean | object | any[] | undefined>;
         readonly default: undefined;
@@ -214,8 +220,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     hideFooter: boolean;
     rules: unknown[];
     skipFormRegistry: boolean;
+    clearable: boolean;
     showPasswordToggle: boolean;
     dir: "rtl" | "ltr";
+    showCounter: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     prefix?(_: {}): any;
     suffix?(_: {}): any;