@dronico/droni-kit 1.7.7 → 1.7.8

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.7.8](https://github.com/Droni-app/droni-kit/compare/v1.7.7...v1.7.8) (2025-05-09)
+
+
+### Bug Fixes
+
+* readonly on textarea ([f72d1e2](https://github.com/Droni-app/droni-kit/commit/f72d1e278e252ccfd7410b23a9dc06fd5210618d))
+
 ## [1.7.7](https://github.com/Droni-app/droni-kit/compare/v1.7.6...v1.7.7) (2025-05-09)
 
 

package/dist/droni-kit.cjs.js

@@ -165,7 +165,7 @@
   dk:dark:bg-zinc-800
   dk:dark:text-zinc-100
   dk:dark:focus:bg-zinc-700
-  dk:dark:[color-scheme:dark]`,_=e.defineComponent({__name:"DuiInput",props:{modelValue:{type:String,default:""},type:{type:String,default:"text"},size:{type:String,default:"md"},block:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},placeholder:{type:String,default:void 0},name:{type:String,default:void 0},id:{type:String,default:void 0},required:{type:Boolean,default:!1},label:{type:String,default:void 0},pattern:{type:String,default:void 0},readonly:{type:Boolean,default:!1},rounded:{type:String,default:"all"}},emits:["update:modelValue"],setup(l,{emit:r}){const d=l,b=r;function n(t){const o=t.target;b("update:modelValue",o.value)}const s={sm:"dk:text-sm dk:px-3 dk:py-1.5",md:"dk:text-base dk:px-4 dk:py-2",lg:"dk:text-lg dk:px-5 dk:py-3"},k={all:"dk:rounded",top:"dk:rounded-t",bottom:"dk:rounded-b",left:"dk:rounded-l",right:"dk:rounded-r",none:"dk:rounded-none"},i={sm:"dk:text-sm dk:pb-0.5",md:"dk:text-base dk:pb-1",lg:"dk:text-lg dk:pb-2"},c=e.computed(()=>{const t=s[d.size]||"",o=d.block?"dk:w-full":"",a=k[d.rounded]||"";return[C,t,o,a].join(" ")}),u=e.computed(()=>{const t=i[d.size]||"",o=d.block?"dk:w-full":"";return[t,o].join(" ")});return(t,o)=>(e.openBlock(),e.createElementBlock("div",null,[d.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:d.id,class:e.normalizeClass([u.value,"dk:text-start dk:block dk:text-zinc-700 dk:dark:text-zinc-200 dk:px-0"])},[e.createTextVNode(e.toDisplayString(d.label)+" ",1),d.required?(e.openBlock(),e.createElementBlock("span",f,"*")):e.createCommentVNode("",!0)],10,z)):e.createCommentVNode("",!0),e.createElementVNode("input",{type:d.type,class:e.normalizeClass(c.value),value:l.modelValue,disabled:d.disabled,placeholder:d.placeholder,required:d.required,name:d.name,id:d.id,pattern:d.pattern,readonly:d.readonly,"aria-label":d.placeholder,"aria-disabled":d.disabled,"aria-required":d.required,onInput:n},null,42,S)]))}}),B=["for"],w={key:0,class:"dk:text-rose-500"},V=["value","disabled","placeholder","required","name","id","aria-label","aria-disabled","aria-required"],q=`
+  dk:dark:[color-scheme:dark]`,_=e.defineComponent({__name:"DuiInput",props:{modelValue:{type:String,default:""},type:{type:String,default:"text"},size:{type:String,default:"md"},block:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},placeholder:{type:String,default:void 0},name:{type:String,default:void 0},id:{type:String,default:void 0},required:{type:Boolean,default:!1},label:{type:String,default:void 0},pattern:{type:String,default:void 0},readonly:{type:Boolean,default:!1},rounded:{type:String,default:"all"}},emits:["update:modelValue"],setup(l,{emit:r}){const d=l,b=r;function n(t){const o=t.target;b("update:modelValue",o.value)}const s={sm:"dk:text-sm dk:px-3 dk:py-1.5",md:"dk:text-base dk:px-4 dk:py-2",lg:"dk:text-lg dk:px-5 dk:py-3"},k={all:"dk:rounded",top:"dk:rounded-t",bottom:"dk:rounded-b",left:"dk:rounded-l",right:"dk:rounded-r",none:"dk:rounded-none"},i={sm:"dk:text-sm dk:pb-0.5",md:"dk:text-base dk:pb-1",lg:"dk:text-lg dk:pb-2"},c=e.computed(()=>{const t=s[d.size]||"",o=d.block?"dk:w-full":"",a=k[d.rounded]||"";return[C,t,o,a].join(" ")}),u=e.computed(()=>{const t=i[d.size]||"",o=d.block?"dk:w-full":"";return[t,o].join(" ")});return(t,o)=>(e.openBlock(),e.createElementBlock("div",null,[d.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:d.id,class:e.normalizeClass([u.value,"dk:text-start dk:block dk:text-zinc-700 dk:dark:text-zinc-200 dk:px-0"])},[e.createTextVNode(e.toDisplayString(d.label)+" ",1),d.required?(e.openBlock(),e.createElementBlock("span",f,"*")):e.createCommentVNode("",!0)],10,z)):e.createCommentVNode("",!0),e.createElementVNode("input",{type:d.type,class:e.normalizeClass(c.value),value:l.modelValue,disabled:d.disabled,placeholder:d.placeholder,required:d.required,name:d.name,id:d.id,pattern:d.pattern,readonly:d.readonly,"aria-label":d.placeholder,"aria-disabled":d.disabled,"aria-required":d.required,onInput:n},null,42,S)]))}}),B=["for"],w={key:0,class:"dk:text-rose-500"},V=["value","disabled","placeholder","required","name","id","readonly","aria-label","aria-disabled","aria-required"],q=`
   dk:border-b
   dk:border-zinc-300
   dk:bg-zinc-50
@@ -177,7 +177,7 @@
   dk:dark:bg-zinc-800
   dk:dark:text-zinc-100
   dk:dark:focus:bg-zinc-700
-  dk:dark:[color-scheme:dark]`,$=e.defineComponent({__name:"DuiTextarea",props:{modelValue:{type:String,default:""},size:{type:String,default:"md"},block:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},placeholder:{type:String,default:void 0},name:{type:String,default:void 0},id:{type:String,default:void 0},required:{type:Boolean,default:!1},label:{type:String,default:void 0},rounded:{type:String,default:"all"},autoheight:{type:Boolean,default:!0},resize:{type:String,default:"none"}},emits:["update:modelValue"],setup(l,{emit:r}){const d=l,b=r;function n(a){const p=a.target;d.autoheight&&o(p),b("update:modelValue",p.value)}const s={sm:"dk:text-sm dk:px-3 dk:py-1.5",md:"dk:text-base dk:px-3 dk:py-2",lg:"dk:text-lg dk:px-5 dk:py-3"},k={all:"dk:rounded",top:"dk:rounded-t",bottom:"dk:rounded-b",left:"dk:rounded-l",right:"dk:rounded-r",none:"dk:rounded-none"},i={sm:"dk:text-sm dk:pb-0.5",md:"dk:text-base dk:pb-1",lg:"dk:text-lg dk:pb-2"},c={none:"dk:resize-none",both:"dk:resize",horizontal:"dk:resize-x",vertical:"dk:resize-y"},u=e.computed(()=>{const a=s[d.size]||"",p=d.block?"dk:w-full":"",m=k[d.rounded]||"",g=c[d.resize]||"";return[q,a,p,m,g].join(" ")}),t=e.computed(()=>{const a=i[d.size]||"",p=d.block?"dk:w-full":"";return[a,p].join(" ")}),o=a=>{a.style.height="auto",a.style.height=`${a.scrollHeight+5}px`};return(a,p)=>(e.openBlock(),e.createElementBlock("div",null,[d.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:d.id,class:e.normalizeClass([t.value,"dk:text-start dk:block dk:text-zinc-700 dk:dark:text-zinc-200 dk:px-0"])},[e.createTextVNode(e.toDisplayString(d.label)+" ",1),d.required?(e.openBlock(),e.createElementBlock("span",w,"*")):e.createCommentVNode("",!0)],10,B)):e.createCommentVNode("",!0),e.createElementVNode("textarea",{class:e.normalizeClass(u.value),value:l.modelValue,disabled:d.disabled,placeholder:d.placeholder,required:d.required,name:d.name,id:d.id,"aria-label":d.placeholder,"aria-disabled":d.disabled,"aria-required":d.required,onInput:n},null,42,V)]))}}),E=["title"],D={key:1},N=`
+  dk:dark:[color-scheme:dark]`,$=e.defineComponent({__name:"DuiTextarea",props:{modelValue:{type:String,default:""},size:{type:String,default:"md"},block:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},placeholder:{type:String,default:void 0},name:{type:String,default:void 0},id:{type:String,default:void 0},required:{type:Boolean,default:!1},label:{type:String,default:void 0},readonly:{type:Boolean,default:!1},rounded:{type:String,default:"all"},autoheight:{type:Boolean,default:!0},resize:{type:String,default:"none"}},emits:["update:modelValue"],setup(l,{emit:r}){const d=l,b=r;function n(a){const p=a.target;d.autoheight&&o(p),b("update:modelValue",p.value)}const s={sm:"dk:text-sm dk:px-3 dk:py-1.5",md:"dk:text-base dk:px-3 dk:py-2",lg:"dk:text-lg dk:px-5 dk:py-3"},k={all:"dk:rounded",top:"dk:rounded-t",bottom:"dk:rounded-b",left:"dk:rounded-l",right:"dk:rounded-r",none:"dk:rounded-none"},i={sm:"dk:text-sm dk:pb-0.5",md:"dk:text-base dk:pb-1",lg:"dk:text-lg dk:pb-2"},c={none:"dk:resize-none",both:"dk:resize",horizontal:"dk:resize-x",vertical:"dk:resize-y"},u=e.computed(()=>{const a=s[d.size]||"",p=d.block?"dk:w-full":"",m=k[d.rounded]||"",g=c[d.resize]||"";return[q,a,p,m,g].join(" ")}),t=e.computed(()=>{const a=i[d.size]||"",p=d.block?"dk:w-full":"";return[a,p].join(" ")}),o=a=>{a.style.height="auto",a.style.height=`${a.scrollHeight+5}px`};return(a,p)=>(e.openBlock(),e.createElementBlock("div",null,[d.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:d.id,class:e.normalizeClass([t.value,"dk:text-start dk:block dk:text-zinc-700 dk:dark:text-zinc-200 dk:px-0"])},[e.createTextVNode(e.toDisplayString(d.label)+" ",1),d.required?(e.openBlock(),e.createElementBlock("span",w,"*")):e.createCommentVNode("",!0)],10,B)):e.createCommentVNode("",!0),e.createElementVNode("textarea",{class:e.normalizeClass(u.value),value:l.modelValue,disabled:d.disabled,placeholder:d.placeholder,required:d.required,name:d.name,id:d.id,readonly:d.readonly,"aria-label":d.placeholder,"aria-disabled":d.disabled,"aria-required":d.required,onInput:n},null,42,V)]))}}),E=["title"],D={key:1},N=`
   dk:transition
   dk:text-center
   dk:disabled:opacity-50

package/dist/droni-kit.es.js

@@ -1,4 +1,4 @@
-import { defineComponent as v, computed as x, createElementBlock as k, openBlock as a, normalizeClass as m, renderSlot as z, createCommentVNode as h, createElementVNode as f, createTextVNode as S, toDisplayString as y, Fragment as C, renderList as q } from "vue";
+import { defineComponent as v, computed as x, createElementBlock as a, openBlock as k, normalizeClass as m, renderSlot as z, createCommentVNode as h, createElementVNode as f, createTextVNode as S, toDisplayString as y, Fragment as C, renderList as q } from "vue";
 const $ = ["type", "title", "disabled"], B = { key: 1 }, V = `
   dk:transition
   dk:text-center
@@ -239,13 +239,13 @@ const $ = ["type", "title", "disabled"], B = { key: 1 }, V = `
       const o = (((r = s[d.variant]) == null ? void 0 : r[d.color]) || "") + " " + s[d.variant].base, b = e[d.size] || "", u = d.block ? "dk:w-full" : "", p = c[d.rounded] || "";
       return [V, o, b, u, p].join(" ");
     });
-    return (o, b) => (a(), k("button", {
+    return (o, b) => (k(), a("button", {
       type: d.type,
       class: m(i.value),
       title: d.title,
       disabled: d.disabled || d.loading
     }, [
-      d.loading ? (a(), k("span", B, "Cargando...")) : z(o.$slots, "default", { key: 0 })
+      d.loading ? (k(), a("span", B, "Cargando...")) : z(o.$slots, "default", { key: 0 })
     ], 10, $));
   }
 }), D = ["for"], j = {
@@ -348,14 +348,14 @@ const $ = ["type", "title", "disabled"], B = { key: 1 }, V = `
       const r = b[e.size] || "", l = e.block ? "dk:w-full" : "";
       return [r, l].join(" ");
     });
-    return (r, l) => (a(), k("div", null, [
-      e.label ? (a(), k("label", {
+    return (r, l) => (k(), a("div", null, [
+      e.label ? (k(), a("label", {
         key: 0,
         for: e.id,
         class: m([p.value, "dk:text-start dk:block dk:text-zinc-700 dk:dark:text-zinc-200 dk:px-0"])
       }, [
         S(y(e.label) + " ", 1),
-        e.required ? (a(), k("span", j, "*")) : h("", !0)
+        e.required ? (k(), a("span", j, "*")) : h("", !0)
       ], 10, D)) : h("", !0),
       f("input", {
         type: e.type,
@@ -378,7 +378,7 @@ const $ = ["type", "title", "disabled"], B = { key: 1 }, V = `
 }), I = ["for"], N = {
   key: 0,
   class: "dk:text-rose-500"
-}, T = ["value", "disabled", "placeholder", "required", "name", "id", "aria-label", "aria-disabled", "aria-required"], E = `
+}, T = ["value", "disabled", "placeholder", "required", "name", "id", "readonly", "aria-label", "aria-disabled", "aria-required"], E = `
   dk:border-b
   dk:border-zinc-300
   dk:bg-zinc-50
@@ -429,6 +429,10 @@ const $ = ["type", "title", "disabled"], B = { key: 1 }, V = `
       type: String,
       default: void 0
     },
+    readonly: {
+      type: Boolean,
+      default: !1
+    },
     rounded: {
       type: String,
       default: "all"
@@ -478,14 +482,14 @@ const $ = ["type", "title", "disabled"], B = { key: 1 }, V = `
     }), l = (t) => {
       t.style.height = "auto", t.style.height = `${t.scrollHeight + 5}px`;
     };
-    return (t, g) => (a(), k("div", null, [
-      e.label ? (a(), k("label", {
+    return (t, g) => (k(), a("div", null, [
+      e.label ? (k(), a("label", {
         key: 0,
         for: e.id,
         class: m([r.value, "dk:text-start dk:block dk:text-zinc-700 dk:dark:text-zinc-200 dk:px-0"])
       }, [
         S(y(e.label) + " ", 1),
-        e.required ? (a(), k("span", N, "*")) : h("", !0)
+        e.required ? (k(), a("span", N, "*")) : h("", !0)
       ], 10, I)) : h("", !0),
       f("textarea", {
         class: m(p.value),
@@ -495,6 +499,7 @@ const $ = ["type", "title", "disabled"], B = { key: 1 }, V = `
         required: e.required,
         name: e.name,
         id: e.id,
+        readonly: e.readonly,
         "aria-label": e.placeholder,
         "aria-disabled": e.disabled,
         "aria-required": e.required,
@@ -734,11 +739,11 @@ const $ = ["type", "title", "disabled"], B = { key: 1 }, V = `
       const o = (((r = s[d.variant]) == null ? void 0 : r[d.color]) || "") + " " + s[d.variant].base, b = e[d.size] || "", u = d.block ? "dk:block" : "dk:inline-block", p = c[d.rounded] || "";
       return [R, o, b, u, p].join(" ");
     });
-    return (o, b) => (a(), k("span", {
+    return (o, b) => (k(), a("span", {
       class: m(i.value),
       title: d.title
     }, [
-      d.loading ? (a(), k("span", H, "Cargando...")) : z(o.$slots, "default", { key: 0 })
+      d.loading ? (k(), a("span", H, "Cargando...")) : z(o.$slots, "default", { key: 0 })
     ], 10, F));
   }
 }), G = ["for"], J = {
@@ -851,14 +856,14 @@ const $ = ["type", "title", "disabled"], B = { key: 1 }, V = `
       const r = b[e.size] || "", l = e.block ? "dk:w-full" : "";
       return [r, l].join(" ");
     });
-    return (r, l) => (a(), k("div", null, [
-      e.label ? (a(), k("label", {
+    return (r, l) => (k(), a("div", null, [
+      e.label ? (k(), a("label", {
         key: 0,
         for: e.id,
         class: m([p.value, "dk:text-start dk:block dk:text-zinc-700 dk:dark:text-zinc-200 dk:px-0"])
       }, [
         S(y(e.label) + " ", 1),
-        e.required ? (a(), k("span", J, "*")) : h("", !0)
+        e.required ? (k(), a("span", J, "*")) : h("", !0)
       ], 10, G)) : h("", !0),
       f("select", {
         id: e.id,
@@ -872,8 +877,8 @@ const $ = ["type", "title", "disabled"], B = { key: 1 }, V = `
         "aria-required": e.required,
         onChange: s
       }, [
-        e.placeholder ? (a(), k("option", M, y(e.placeholder), 1)) : h("", !0),
-        (a(!0), k(C, null, q(e.options, (t, g) => (a(), k("option", {
+        e.placeholder ? (k(), a("option", M, y(e.placeholder), 1)) : h("", !0),
+        (k(!0), a(C, null, q(e.options, (t, g) => (k(), a("option", {
           key: g,
           value: t[e.itemValue] ?? "",
           selected: t[e.itemValue] == e.modelValue
@@ -944,7 +949,7 @@ const $ = ["type", "title", "disabled"], B = { key: 1 }, V = `
       const i = ((u = c[d.variant]) == null ? void 0 : u[d.color]) || "", o = c[d.variant].base || "", b = e[d.rounded] || "";
       return [Q, o, i, b].join(" ");
     });
-    return (i, o) => (a(), k("div", {
+    return (i, o) => (k(), a("div", {
       class: m(s.value),
       role: "alert"
     }, [

package/dist/stories/Forms/DuiTextarea.stories.d.ts

@@ -38,6 +38,10 @@ declare const meta: {
             type: StringConstructor;
             default: undefined;
         };
+        readonly: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         rounded: {
             type: () => "all" | "top" | "bottom" | "left" | "right" | "none";
             default: string;
@@ -89,6 +93,10 @@ declare const meta: {
             type: StringConstructor;
             default: undefined;
         };
+        readonly: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         rounded: {
             type: () => "all" | "top" | "bottom" | "left" | "right" | "none";
             default: string;
@@ -114,6 +122,7 @@ declare const meta: {
         name: string;
         id: string;
         required: boolean;
+        readonly: boolean;
         autoheight: boolean;
         resize: "none" | "both" | "horizontal" | "vertical";
     }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
@@ -182,6 +191,12 @@ declare const meta: {
             options: string[];
             defaultValue: string;
         };
+        readonly: {
+            control: {
+                type: "boolean";
+            };
+            defaultValue: boolean;
+        };
     };
 };
 export default meta;

package/dist/stories/Forms/DuiTextarea.vue.d.ts

@@ -35,6 +35,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         default: undefined;
     };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     rounded: {
         type: () => "all" | "top" | "bottom" | "left" | "right" | "none";
         default: string;
@@ -86,6 +90,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         default: undefined;
     };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     rounded: {
         type: () => "all" | "top" | "bottom" | "left" | "right" | "none";
         default: string;
@@ -111,6 +119,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     name: string;
     id: string;
     required: boolean;
+    readonly: boolean;
     autoheight: boolean;
     resize: "none" | "both" | "horizontal" | "vertical";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dronico/droni-kit",
   "author": "Gustavo Barragan <dev@droni.co>",
-  "version": "1.7.7",
+  "version": "1.7.8",
   "private": false,
   "access": "public",
   "publishConfig": {