@indielayer/ui 1.3.0 → 1.4.0

package/lib/components/table/TableRow.vue.js

@@ -1,32 +1,28 @@
-import { defineComponent as i, computed as a, openBlock as n, createElementBlock as s, normalizeClass as d, renderSlot as g } from "vue";
-const r = {
+import { defineComponent as c, computed as m, openBlock as p, createElementBlock as u, normalizeStyle as d, unref as l, normalizeClass as g, renderSlot as f } from "vue";
+import { useTheme as b } from "../../composables/useTheme.js";
+const o = {
   verticalAlign: ["baseline", "bottom", "middle", "text-bottom", "text-top", "top"]
-}, c = { name: "XTableRow", validators: r }, u = /* @__PURE__ */ i({
-  ...c,
-  props: {
-    pointer: Boolean,
-    striped: Boolean,
-    verticalAlign: {
-      type: String,
-      default: "top",
-      validator: (t) => r.verticalAlign.includes(t)
-    }
-  },
+}, v = {
+  pointer: Boolean,
+  striped: Boolean,
+  verticalAlign: {
+    type: String,
+    default: "top",
+    validator: (t) => o.verticalAlign.includes(t)
+  }
+}, A = { name: "XTableRow", validators: o }, y = /* @__PURE__ */ c({
+  ...A,
+  props: v,
   setup(t) {
-    const e = t, l = a(() => e.verticalAlign === "baseline" ? "align-baseline" : e.verticalAlign === "bottom" ? "align-bottom" : e.verticalAlign === "middle" ? "align-middle" : e.verticalAlign === "text-bottom" ? "align-text-bottom" : e.verticalAlign === "text-top" ? "align-text-top" : e.verticalAlign === "top" ? "align-top" : "");
-    return (o, p) => (n(), s("tr", {
-      class: d([
-        t.striped ? "odd:bg-gray-50 dark:odd:bg-gray-800" : "border-b border-gray-200 dark:border-gray-700",
-        {
-          "hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer": t.pointer
-        },
-        l.value
-      ])
+    const e = t, n = m(() => e.verticalAlign === "baseline" ? "align-baseline" : e.verticalAlign === "bottom" ? "align-bottom" : e.verticalAlign === "middle" ? "align-middle" : e.verticalAlign === "text-bottom" ? "align-text-bottom" : e.verticalAlign === "text-top" ? "align-text-top" : e.verticalAlign === "top" ? "align-top" : ""), { styles: i, classes: r, className: a } = b("TableRow", {}, e);
+    return (s, x) => (p(), u("tr", {
+      style: d(l(i)),
+      class: g([l(a), l(r).row, n.value])
     }, [
-      g(o.$slots, "default")
-    ], 2));
+      f(s.$slots, "default")
+    ], 6));
   }
 });
 export {
-  u as default
+  y as default
 };

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

@@ -1,9 +1,11 @@
 export { default as XTable } from './Table.vue';
 export { default as XTableBody } from './TableBody';
 export { default as XTableCell } from './TableCell.vue';
-export { default as XTableHead } from './TableHead';
+export { default as XTableHead } from './TableHead.vue';
 export { default as XTableHeader } from './TableHeader.vue';
 export { default as XTableRow } from './TableRow.vue';
 export type { TableProps, TableHeader, TableTheme } from './Table.vue';
-export type { TableHeaderProps, TableHeaderAlign, TableHeaderSort } from './TableHeader.vue';
+export type { TableHeadProps, TableHeadTheme } from './TableHead.vue';
+export type { TableRowProps, TableRowTheme } from './TableRow.vue';
+export type { TableHeaderProps, TableHeaderAlign, TableHeaderSort, TableHeaderTheme } from './TableHeader.vue';
 export type { TableCellProps, TableCellTextAlign, TableCellVerticalAlign, TableCellTheme } from './TableCell.vue';

package/lib/components/table/theme/Table.base.theme.js

@@ -1,12 +1,13 @@
-const t = {
+const a = {
   classes: {
-    wrapper: ({ props: a }) => {
+    wrapper: "w-full h-full overflow-x-auto",
+    table: ({ props: l }) => {
       const e = ["w-full relative"];
-      return a.scrollable && e.push("overflow-x-scroll sm:overflow-x-auto whitespace-wrap sm:whitespace-normal block sm:table"), a.stickyHeader && e.push("relative"), a.fixed && e.push("table-fixed"), e;
+      return l.scrollable && e.push("overflow-x-scroll sm:overflow-x-auto whitespace-wrap sm:whitespace-normal"), l.stickyHeader && e.push("relative"), l.fixed && e.push("md:table-fixed"), e;
     },
-    loadingWrapper: "absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-50"
+    loadingWrapper: "absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-30"
   }
-}, s = t;
+}, t = a;
 export {
-  s as default
+  t as default
 };

package/lib/components/table/theme/Table.carbon.theme.js

@@ -1,5 +1,13 @@
-import e from "./Table.base.theme.js";
-const t = e, o = t;
+const t = {
+  classes: {
+    wrapper: "w-full h-full shadow-sm overflow-x-auto text-sm bg-white dark:bg-gray-800",
+    table: ({ props: a }) => {
+      const e = ["w-full relative"];
+      return a.scrollable && e.push("overflow-x-scroll sm:overflow-x-auto whitespace-wrap sm:whitespace-normal"), a.stickyHeader && e.push("relative"), a.fixed && e.push("md:table-fixed"), e;
+    },
+    loadingWrapper: "absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-30"
+  }
+}, l = t;
 export {
-  o as default
+  l as default
 };

package/lib/components/table/theme/TableCell.base.theme.js

@@ -1,8 +1,8 @@
 const i = {
   classes: {
-    wrapper: ({ props: t }) => {
-      const e = ["last:pr-0 px-3"];
-      return e.push(t.dense ? "py-2" : "py-4"), t.textAlign === "left" ? e.push("text-left") : t.textAlign === "center" ? e.push("text-center") : t.textAlign === "right" ? e.push("text-right") : t.textAlign === "justify" && e.push("text-justify"), t.verticalAlign === "baseline" ? e.push("align-baseline") : t.verticalAlign === "bottom" ? e.push("align-bottom") : t.verticalAlign === "middle" ? e.push("align-middle") : t.verticalAlign === "text-bottom" ? e.push("align-text-bottom") : t.verticalAlign === "text-top" ? e.push("align-text-top") : t.verticalAlign === "top" && e.push("align-top"), t.truncate && t.fixed && e.push("truncate"), e;
+    wrapper: ({ props: e }) => {
+      const t = ["last:pr-0 px-3"];
+      return t.push(e.dense ? "py-2" : "py-4"), e.textAlign === "left" ? t.push("text-left") : e.textAlign === "center" ? t.push("text-center") : e.textAlign === "right" ? t.push("text-right") : e.textAlign === "justify" && t.push("text-justify"), e.verticalAlign === "baseline" ? t.push("align-baseline") : e.verticalAlign === "bottom" ? t.push("align-bottom") : e.verticalAlign === "middle" ? t.push("align-middle") : e.verticalAlign === "text-bottom" ? t.push("align-text-bottom") : e.verticalAlign === "text-top" ? t.push("align-text-top") : e.verticalAlign === "top" && t.push("align-top"), e.truncate && t.push("truncate"), t;
     }
   }
 }, l = i;

package/lib/components/table/theme/TableCell.carbon.theme.js

@@ -1,5 +1,11 @@
-import e from "./TableCell.base.theme.js";
-const t = e, o = t;
+const i = {
+  classes: {
+    wrapper: ({ props: e }) => {
+      const t = ["last:pr-0 px-3"];
+      return t.push(e.dense ? "py-2" : "py-4"), e.textAlign === "left" ? t.push("text-left") : e.textAlign === "center" ? t.push("text-center") : e.textAlign === "right" ? t.push("text-right") : e.textAlign === "justify" && t.push("text-justify"), e.verticalAlign === "baseline" ? t.push("align-baseline") : e.verticalAlign === "bottom" ? t.push("align-bottom") : e.verticalAlign === "middle" ? t.push("align-middle") : e.verticalAlign === "text-bottom" ? t.push("align-text-bottom") : e.verticalAlign === "text-top" ? t.push("align-text-top") : e.verticalAlign === "top" && t.push("align-top"), e.truncate && t.push("truncate"), t;
+    }
+  }
+}, l = i;
 export {
-  o as default
+  l as default
 };

package/lib/components/table/theme/TableHead.base.theme.d.ts

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

package/lib/components/table/theme/TableHead.base.theme.js

@@ -0,0 +1,9 @@
+const t = {
+  classes: {
+    thead: "align-bottom",
+    row: "text-sm text-gray-600 dark:text-gray-400 border-b"
+  }
+}, e = t;
+export {
+  e as default
+};

package/lib/components/table/theme/TableHead.carbon.theme.d.ts

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

package/lib/components/table/theme/TableHead.carbon.theme.js

@@ -0,0 +1,9 @@
+const t = {
+  classes: {
+    thead: "align-bottom",
+    row: "text-gray-900 dark:text-gray-50"
+  }
+}, e = t;
+export {
+  e as default
+};

package/lib/components/table/theme/TableHeader.base.theme.d.ts

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

package/lib/components/table/theme/TableHeader.base.theme.js

@@ -0,0 +1,12 @@
+const s = {
+  classes: {
+    th: ({ props: e }) => {
+      const t = ["relative py-2 font-semibold tracking-widest uppercase text-xs px-3"];
+      return e.sortable && t.push("cursor-pointer hover:text-gray-800 dark:hover:text-gray-300 transition-colors duration-150 ease-in-out"), e.stickyHeader && t.push("sticky top-0"), e.textAlign === "left" && t.push("text-left"), e.textAlign === "right" && t.push("text-right"), e.textAlign === "center" && t.push("text-center"), e.textAlign === "justify" && t.push("text-justify"), t;
+    },
+    sortIcon: ({ props: e }) => ["absolute stroke-2 w-3 h-3 top-2.5 right-0.5"]
+  }
+}, i = s;
+export {
+  i as default
+};

package/lib/components/table/theme/TableHeader.carbon.theme.d.ts

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

package/lib/components/table/theme/TableHeader.carbon.theme.js

@@ -0,0 +1,12 @@
+const s = {
+  classes: {
+    th: ({ props: e }) => {
+      const t = ["relative py-3.5 font-semibold text-sm px-3 bg-gray-200 dark:bg-gray-700 select-none"];
+      return e.sortable && t.push("cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-150 ease-in-out pr-5"), e.stickyHeader && t.push("sticky top-0"), e.textAlign === "left" && t.push("text-left"), e.textAlign === "right" && t.push("text-right"), e.textAlign === "center" && t.push("text-center"), e.textAlign === "justify" && t.push("text-justify"), t;
+    },
+    sortIcon: ({ props: e }) => ["absolute stroke-2 w-4 h-4 top-4 right-2"]
+  }
+}, r = s;
+export {
+  r as default
+};

package/lib/components/table/theme/TableRow.base.theme.d.ts

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

package/lib/components/table/theme/TableRow.base.theme.js

@@ -0,0 +1,11 @@
+const s = {
+  classes: {
+    row: ({ props: e }) => {
+      const r = [];
+      return e.striped ? r.push("odd:bg-gray-50 dark:odd:bg-gray-800") : r.push("border-b border-gray-200 dark:border-gray-700"), e.pointer && r.push("hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"), r;
+    }
+  }
+}, o = s;
+export {
+  o as default
+};

package/lib/components/table/theme/TableRow.carbon.theme.d.ts

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

package/lib/components/table/theme/TableRow.carbon.theme.js

@@ -0,0 +1,11 @@
+const s = {
+  classes: {
+    row: ({ props: e }) => {
+      const r = [];
+      return e.striped ? r.push("odd:bg-gray-50 dark:odd:bg-gray-800") : r.push("border-b border-gray-200 dark:border-gray-700"), e.pointer && r.push("hover:bg-gray-50 dark:hover:bg-gray-600 cursor-pointer"), r;
+    }
+  }
+}, o = s;
+export {
+  o as default
+};

package/lib/components/tag/Tag.vue.d.ts

@@ -19,7 +19,7 @@ declare const tagProps: {
     };
 };
 export type TagProps = ExtractPublicPropTypes<typeof tagProps>;
-type InternalClasses = 'wrapper' | 'loadingWrapper';
+type InternalClasses = 'wrapper';
 export interface TagTheme extends ThemeComponent<TagProps, InternalClasses> {
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
@@ -59,12 +59,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     onRemove?: ((...args: any[]) => any) | undefined;
 }, {
-    size: import("../../composables/useCommon").Size;
+    tag: string;
     outlined: boolean;
     removable: boolean;
     color: string;
-    tag: string;
     rounded: boolean;
+    size: import("../../composables/useCommon").Size;
 }, {}>, {
     default?(_: {}): any;
 }>;

package/lib/components/tag/Tag.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as p, computed as f, openBlock as s, createBlock as g, resolveDynamicComponent as v, normalizeClass as y, unref as r, normalizeStyle as x, withCtx as z, createElementBlock as k, renderSlot as l, createVNode as b } from "vue";
+import { defineComponent as p, computed as f, openBlock as s, createBlock as g, resolveDynamicComponent as v, normalizeClass as k, unref as r, normalizeStyle as b, withCtx as x, createElementBlock as y, renderSlot as a, createVNode as z } from "vue";
 import { useColors as C } from "../../composables/useColors.js";
-import { useCommon as a } from "../../composables/useCommon.js";
+import { useCommon as l } from "../../composables/useCommon.js";
 import { useTheme as B } from "../../composables/useTheme.js";
 import { closeIcon as S } from "../../common/icons.js";
 import _ from "../icon/Icon.vue.js";
@@ -8,7 +8,7 @@ const $ = {
   key: 0,
   class: "max-w-full truncate"
 }, h = {
-  ...a.props(),
+  ...l.props(),
   ...C.props("gray"),
   tag: {
     type: String,
@@ -20,36 +20,36 @@ const $ = {
 }, w = {
   name: "XTag",
   validators: {
-    ...a.validators()
+    ...l.validators()
   }
 }, V = /* @__PURE__ */ p({
   ...w,
   props: h,
   emits: ["remove"],
   setup(n) {
-    const o = n, i = f(() => o.size === "xs" ? "xs" : o.size === "sm" ? "sm" : o.size === "lg" ? "md" : o.size === "xl" ? "lg" : "sm"), { styles: m, classes: u, className: d } = B("Tag", {}, o);
+    const o = n, i = f(() => o.size === "xs" ? "xs" : o.size === "sm" ? "sm" : o.size === "lg" ? "md" : o.size === "xl" ? "lg" : "sm"), { styles: m, classes: d, className: u } = B("Tag", {}, o);
     return (e, t) => (s(), g(v(e.tag), {
-      class: y([
-        "text-[color:var(--x-tag-text)] dark:text-[color:var(--x-tag-dark-text)] border-[color:var(--x-tag-border)",
+      class: k([
+        "text-[color:var(--x-tag-text)] dark:text-[color:var(--x-tag-dark-text)] border-[color:var(--x-tag-border)] dark:border-[color:var(--x-tag-dark-border)]",
         [
-          r(d),
-          r(u).wrapper,
-          e.outlined ? "border" : "bg-[color:var(--x-tag-bg)]",
+          r(u),
+          r(d).wrapper,
+          e.outlined ? "border" : "bg-[color:var(--x-tag-bg)] dark:bg-[color:var(--x-tag-dark-bg)]",
           e.rounded ? "rounded-full" : "rounded"
         ]
       ]),
-      style: x(r(m))
+      style: b(r(m))
     }, {
-      default: z(() => [
-        e.removable ? (s(), k("span", $, [
-          l(e.$slots, "default"),
-          b(_, {
+      default: x(() => [
+        e.removable ? (s(), y("span", $, [
+          a(e.$slots, "default"),
+          z(_, {
             size: i.value,
             icon: r(S),
-            class: "ml-1 cursor-pointer hover:text-gray-700 transition-colors duration-150",
+            class: "ml-1.5 cursor-pointer hover:text-gray-700 transition-colors duration-150",
             onClick: t[0] || (t[0] = (c) => e.$emit("remove", c))
           }, null, 8, ["size", "icon"])
-        ])) : l(e.$slots, "default", { key: 1 })
+        ])) : a(e.$slots, "default", { key: 1 })
       ]),
       _: 3
     }, 8, ["style", "class"]));

package/lib/components/tag/theme/Tag.base.theme.js

@@ -1,23 +1,24 @@
-const i = {
+const x = {
   classes: {
-    wrapper: ({ props: t }) => {
+    wrapper: ({ props: l }) => {
       let e = "inline-flex items-center leading-none max-w-full";
-      return t.size === "xs" ? e += " px-2 py-1 text-xs" : t.size === "sm" ? e += " px-2 py-1 text-sm" : t.size === "lg" ? e += " px-4 py-3 text-lg" : t.size === "xl" ? e += " px-6 py-6 text-xl" : e += " px-3 py-2", e;
-    },
-    loadingWrapper: "absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-50"
+      return l.size === "xs" ? e += " px-2 py-1 text-xs" : l.size === "sm" ? e += " px-2 py-1 text-sm" : l.size === "lg" ? e += " px-4 py-3 text-lg" : l.size === "xl" ? e += " px-6 py-6 text-xl" : e += " px-3 py-2", e;
+    }
   },
-  styles: ({ colors: t, props: e, css: s }) => {
-    const l = t.getPalette(e.color);
+  styles: ({ colors: l, props: e, css: s }) => {
+    const t = l.getPalette(e.color);
     return s.variables({
-      bg: l[100],
-      text: l[800],
-      border: l[800],
+      bg: t[200],
+      text: t[800],
+      border: t[800],
       dark: {
-        text: e.outlined ? l[200] : l[800]
+        bg: t[800],
+        border: t[400],
+        text: e.outlined ? t[200] : t[100]
       }
     });
   }
-}, x = i;
+}, i = x;
 export {
-  x as default
+  i as default
 };

package/lib/components/tag/theme/Tag.carbon.theme.js

@@ -1,24 +1,24 @@
-const i = {
+const x = {
   classes: {
-    wrapper: ({ props: t }) => {
+    wrapper: ({ props: l }) => {
       let e = "inline-flex items-center leading-none max-w-full ";
-      return t.size === "xs" || t.size === "sm" ? e += " px-2 py-1 text-xs" : t.size === "lg" ? e += " px-4 py-3" : t.size === "xl" ? e += " px-5 py-5 text-lg" : e += " px-3 py-2 text-sm", e;
-    },
-    loadingWrapper: "absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-50"
+      return l.size === "xs" || l.size === "sm" ? e += " px-2 py-0.5 text-xs" : l.size === "lg" ? e += " px-4 py-3" : l.size === "xl" ? e += " px-5 py-5 text-lg" : e += " px-3 py-1 text-sm", e;
+    }
   },
-  styles: ({ colors: t, props: e, css: s }) => {
-    const l = t.getPalette(e.color);
+  styles: ({ colors: l, props: e, css: s }) => {
+    const t = l.getPalette(e.color);
     return s.variables({
-      bg: l[200],
-      text: l[800],
-      border: l[800],
+      bg: t[200],
+      text: t[800],
+      border: t[800],
       dark: {
-        bg: l[700],
-        text: e.outlined ? l[200] : l[800]
+        bg: t[800],
+        border: t[400],
+        text: e.outlined ? t[200] : t[100]
       }
     });
   }
-}, r = i;
+}, i = x;
 export {
-  r as default
+  i as default
 };

package/lib/components/textarea/Textarea.vue.d.ts

@@ -1,8 +1,6 @@
 import { type ExtractPublicPropTypes, type Ref } from 'vue';
 import { type ThemeComponent } from '../../composables/useTheme';
 declare const textareaProps: {
-    helper: StringConstructor;
-    label: StringConstructor;
     dir: {
         type: StringConstructor;
         default: string;
@@ -20,6 +18,7 @@ declare const textareaProps: {
     preventEnter: BooleanConstructor;
     block: BooleanConstructor;
     modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -27,6 +26,8 @@ declare const textareaProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
@@ -54,8 +55,6 @@ type InternalExtraData = {
 export interface TextareaTheme extends ThemeComponent<TextareaProps, InternalClasses, InternalExtraData> {
 }
 declare const _default: import("vue").DefineComponent<{
-    helper: StringConstructor;
-    label: StringConstructor;
     dir: {
         type: StringConstructor;
         default: string;
@@ -73,6 +72,7 @@ declare const _default: import("vue").DefineComponent<{
     preventEnter: BooleanConstructor;
     block: BooleanConstructor;
     modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -80,6 +80,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
@@ -105,8 +107,6 @@ declare const _default: import("vue").DefineComponent<{
     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<{
-    helper: StringConstructor;
-    label: StringConstructor;
     dir: {
         type: StringConstructor;
         default: string;
@@ -124,6 +124,7 @@ declare const _default: import("vue").DefineComponent<{
     preventEnter: BooleanConstructor;
     block: BooleanConstructor;
     modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -131,6 +132,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
@@ -152,13 +155,13 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
+    disabled: boolean;
     size: import("../../composables/useCommon").Size;
-    required: boolean;
     block: boolean;
-    disabled: boolean;
     loading: boolean;
     loadingStatus: import("../loader/Loader.vue").LoaderStatus;
     readonly: boolean;
+    required: boolean;
     validateOnInput: boolean;
     hideFooter: boolean;
     rules: unknown[];

package/lib/components/textarea/Textarea.vue.js

@@ -1,19 +1,17 @@
-import { defineComponent as I, ref as V, watch as P, openBlock as m, createBlock as d, normalizeStyle as q, unref as r, normalizeClass as K, withCtx as R, createElementVNode as j, mergeProps as F, toHandlers as H, withKeys as L, createCommentVNode as $ } from "vue";
-import { useResizeObserver as D, useEventListener as O } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
-import { useCSS as X } from "../../composables/useCSS.js";
-import { useTheme as A } from "../../composables/useTheme.js";
+import { defineComponent as V, ref as P, watch as q, openBlock as m, createBlock as d, normalizeStyle as K, unref as r, normalizeClass as R, withCtx as j, createElementVNode as F, mergeProps as H, toHandlers as L, withKeys as $, createCommentVNode as D } from "vue";
+import { useResizeObserver as O, useEventListener as X } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
+import { useCSS as A } from "../../composables/useCSS.js";
+import { useTheme as G } from "../../composables/useTheme.js";
 import { useCommon as u } from "../../composables/useCommon.js";
-import { useColors as G } from "../../composables/useColors.js";
+import { useColors as J } from "../../composables/useColors.js";
 import { useInputtable as s } from "../../composables/useInputtable.js";
 import { useInteractive as p } from "../../composables/useInteractive.js";
-import J from "../label/Label.vue.js";
-import M from "../inputFooter/InputFooter.vue.js";
-const Q = ["disabled", "max", "maxlength", "min", "dir", "rows", "minlength", "name", "placeholder", "readonly", "value", "onKeydown"], U = {
+import M from "../label/Label.vue.js";
+import Q from "../inputFooter/InputFooter.vue.js";
+const U = ["id", "disabled", "max", "maxlength", "min", "dir", "rows", "minlength", "name", "placeholder", "readonly", "value", "onKeydown"], W = {
   ...u.props(),
   ...p.props(),
   ...s.props(),
-  helper: String,
-  label: String,
   dir: {
     type: String,
     default: "ltr"
@@ -30,21 +28,21 @@ const Q = ["disabled", "max", "maxlength", "min", "dir", "rows", "minlength", "n
   adjustToText: Boolean,
   preventEnter: Boolean,
   block: Boolean
-}, W = {
+}, Y = {
   name: "XTextarea",
   validators: {
     ...u.validators()
   }
-}, me = /* @__PURE__ */ I({
-  ...W,
-  props: U,
+}, de = /* @__PURE__ */ V({
+  ...Y,
+  props: W,
   emits: s.emits(),
   setup(f, { expose: c, emit: h }) {
-    const t = f, b = h, o = V(null);
-    D(o, n), typeof window < "u" && O(window, "resize", n), P([() => t.modelValue, () => t.size], () => {
+    const t = f, b = h, o = P(null);
+    O(o, n), typeof window < "u" && X(window, "resize", n), q([() => t.modelValue, () => t.size], () => {
       setTimeout(n);
     });
-    const g = X("textarea"), y = G().getPalette("primary"), v = g.get("border", y[400]);
+    const g = A("textarea"), y = J().getPalette("primary"), v = g.get("border", y[400]);
     function w() {
       n();
     }
@@ -56,26 +54,28 @@ const Q = ["disabled", "max", "maxlength", "min", "dir", "rows", "minlength", "n
     }
     const { focus: a, blur: k } = p(o), {
       errorInternal: l,
-      isInsideForm: N,
-      inputListeners: T,
-      reset: C,
-      validate: z,
-      setError: E
-    } = s(t, { focus: a, emit: b }), { styles: x, classes: i, className: B } = A("Textarea", {}, t, { errorInternal: l });
-    return c({ focus: a, blur: k, reset: C, validate: z, setError: E }), (e, Z) => (m(), d(J, {
-      style: q(r(x)),
+      hideFooterInternal: N,
+      isInsideForm: T,
+      inputListeners: C,
+      reset: z,
+      validate: E,
+      setError: I
+    } = s(t, { focus: a, emit: b }), { styles: x, classes: i, className: B } = G("Textarea", {}, t, { errorInternal: l });
+    return c({ focus: a, blur: k, reset: z, validate: E, setError: I }), (e, _) => (m(), d(M, {
+      style: K(r(x)),
       block: e.block,
       disabled: e.disabled,
       required: e.required,
-      "is-inside-form": r(N),
+      "is-inside-form": r(T),
       label: e.label,
-      class: K([
+      class: R([
         r(B),
         r(i).wrapper
       ])
     }, {
-      default: R(() => [
-        j("textarea", F({
+      default: j(() => [
+        F("textarea", H({
+          id: e.id,
           ref_key: "elRef",
           ref: o,
           class: ["", [
@@ -94,11 +94,11 @@ const Q = ["disabled", "max", "maxlength", "min", "dir", "rows", "minlength", "n
           placeholder: e.placeholder,
           readonly: e.readonly,
           value: e.modelValue ? String(e.modelValue) : ""
-        }, H(r(T), !0), {
-          onKeydown: L(S, ["enter"]),
+        }, L(r(C), !0), {
+          onKeydown: $(S, ["enter"]),
           onInput: w
-        }), null, 16, Q),
-        e.hideFooter ? $("", !0) : (m(), d(M, {
+        }), null, 16, U),
+        r(N) ? D("", !0) : (m(), d(Q, {
           key: 0,
           error: r(l),
           helper: e.helper
@@ -109,5 +109,5 @@ const Q = ["disabled", "max", "maxlength", "min", "dir", "rows", "minlength", "n
   }
 });
 export {
-  me as default
+  de as default
 };