scq-vue 1.0.1 → 1.0.2

package/README.md

@@ -23,17 +23,45 @@ import 'scq-vue/style.css'
 createApp(App).use(ScqVue).mount('#app')
 ```
 
+After global install, you can use component tags directly in templates:
+
+```vue
+<template>
+	<scq-button type="primary">Primary</scq-button>
+	<scq-input v-model="value" placeholder="Please input" />
+</template>
+```
+
+Notes:
+- Use prefixed tag names only: `scq-button`, `scq-input`
+
 ### On-demand import
 
 ```ts
-import { Button, Input } from 'scq-vue'
+import { createApp } from 'vue'
+import App from './App.vue'
+import { ScqButton, ScqInput } from 'scq-vue'
 import 'scq-vue/style.css'
+
+const app = createApp(App)
+app.use(ScqButton)
+app.use(ScqInput)
+app.mount('#app')
+```
+
+Then use in templates:
+
+```vue
+<template>
+	<scq-button>Default</scq-button>
+	<scq-input v-model="value" />
+</template>
 ```
 
 ### On-demand style import
 
 ```ts
-import { Button, Input } from 'scq-vue'
+import { ScqButton, ScqInput } from 'scq-vue'
 import 'scq-vue/styles/button.css'
 import 'scq-vue/styles/input.css'
 ```

package/dist/scq-vue.es.js

@@ -1,14 +1,14 @@
-import { computed as g, openBlock as s, createElementBlock as i, normalizeClass as f, createElementVNode as y, createCommentVNode as r, renderSlot as v, defineComponent as P, ref as x, normalizeStyle as $, withModifiers as q, toDisplayString as E } from "vue";
+import { computed as g, openBlock as s, createElementBlock as i, normalizeClass as f, createElementVNode as y, createCommentVNode as r, renderSlot as v, defineComponent as F, ref as h, normalizeStyle as q, withModifiers as I, toDisplayString as K } from "vue";
 const S = (e, d) => {
   const o = e.__vccOpts || e;
   for (const [n, u] of d)
     o[n] = u;
   return o;
-}, M = ["disabled", "type", "autofocus"], N = {
+}, A = ["disabled", "type", "autofocus"], E = {
   key: 0,
   class: "my-btn__loading",
   "aria-hidden": "true"
-}, R = /* @__PURE__ */ Object.assign({
+}, L = /* @__PURE__ */ Object.assign({
   name: "Button"
 }, {
   __name: "Button",
@@ -91,7 +91,7 @@ const S = (e, d) => {
       autofocus: e.autofocus,
       onClick: m
     }, [
-      e.loading ? (s(), i("span", N, [...p[0] || (p[0] = [
+      e.loading ? (s(), i("span", E, [...p[0] || (p[0] = [
         y("svg", {
           viewBox: "0 0 50 50",
           class: "my-btn__loading-svg"
@@ -110,25 +110,25 @@ const S = (e, d) => {
       }, [
         v(c.$slots, "default", {}, void 0, !0)
       ], 2)
-    ], 10, M));
+    ], 10, A));
   }
-}), b = /* @__PURE__ */ S(R, [["__scopeId", "data-v-a92927da"]]);
+}), b = /* @__PURE__ */ S(L, [["__scopeId", "data-v-a92927da"]]), M = (e) => `scq-${e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase()}`;
 b.install = (e) => {
-  e.component(b.name, b);
+  e.component(M(b.name), b);
 };
-const T = {
+const R = {
   key: 0,
   class: "scq-input__group-prepend"
-}, D = { class: "scq-input__wrapper" }, O = {
+}, T = { class: "scq-input__wrapper" }, Z = {
   key: 0,
   class: "scq-input__prefix"
-}, j = ["value", "placeholder", "disabled", "readonly", "maxlength", "minlength", "name", "id"], A = ["type", "value", "placeholder", "disabled", "readonly", "maxlength", "minlength", "autocomplete", "name", "id"], G = {
+}, D = ["value", "placeholder", "disabled", "readonly", "maxlength", "minlength", "name", "id"], O = ["type", "value", "placeholder", "disabled", "readonly", "maxlength", "minlength", "autocomplete", "name", "id"], j = {
   key: 5,
   class: "scq-input__suffix"
-}, H = {
+}, G = {
   key: 1,
   class: "scq-input__group-append"
-}, J = /* @__PURE__ */ P({
+}, H = /* @__PURE__ */ F({
   name: "Input",
   __name: "Input",
   props: {
@@ -152,24 +152,24 @@ const T = {
   },
   emits: ["update:modelValue", "input", "change", "focus", "blur", "clear", "keydown", "keyup", "compositionstart", "compositionupdate", "compositionend"],
   setup(e, { emit: d }) {
-    const o = e, n = d, u = x(), m = x(!1), c = x(!1), p = g(() => o.type === "textarea"), h = g(() => String(o.modelValue ?? "")), V = g(
-      () => o.clearable && !o.disabled && !o.readonly && m.value && h.value.length > 0
+    const o = e, n = d, u = h(), m = h(!1), c = h(!1), p = g(() => o.type === "textarea"), x = g(() => String(o.modelValue ?? "")), V = g(
+      () => o.clearable && !o.disabled && !o.readonly && m.value && x.value.length > 0
     ), z = g(
       () => o.showPassword && !p.value && !o.disabled && !o.readonly
-    ), B = (l) => {
+    ), $ = (l) => {
       const t = l.target.value;
       n("update:modelValue", t), n("input", t);
     }, w = (l) => {
       const t = l.target.value;
       n("change", t);
-    }, C = (l) => {
+    }, B = (l) => {
       m.value = !0, n("focus", l);
-    }, I = (l) => {
+    }, C = (l) => {
       m.value = !1, n("blur", l);
-    }, F = () => {
+    }, P = () => {
       var l;
       n("update:modelValue", ""), n("input", ""), n("change", ""), n("clear"), (l = u.value) == null || l.focus();
-    }, K = () => {
+    }, N = () => {
       var l;
       c.value = !c.value, (l = u.value) == null || l.focus();
     };
@@ -183,11 +183,11 @@ const T = {
         }
       ]])
     }, [
-      l.$slots.prepend ? (s(), i("div", T, [
+      l.$slots.prepend ? (s(), i("div", R, [
         v(l.$slots, "prepend", {}, void 0, !0)
       ])) : r("", !0),
-      y("div", D, [
-        l.$slots.prefix || e.prefixIcon ? (s(), i("span", O, [
+      y("div", T, [
+        l.$slots.prefix || e.prefixIcon ? (s(), i("span", Z, [
           v(l.$slots, "prefix", {}, () => [
             y("i", {
               class: f(e.prefixIcon)
@@ -199,8 +199,8 @@ const T = {
           ref_key: "inputRef",
           ref: u,
           class: f(["scq-input__inner scq-textarea__inner", e.inputClass]),
-          style: $(e.inputStyle),
-          value: h.value,
+          style: q(e.inputStyle),
+          value: x.value,
           placeholder: e.placeholder,
           disabled: e.disabled,
           readonly: e.readonly,
@@ -208,23 +208,23 @@ const T = {
           minlength: e.minlength,
           name: e.name,
           id: e.id,
-          onInput: B,
+          onInput: $,
           onChange: w,
-          onFocus: C,
-          onBlur: I,
+          onFocus: B,
+          onBlur: C,
           onKeydown: t[0] || (t[0] = (a) => n("keydown", a)),
           onKeyup: t[1] || (t[1] = (a) => n("keyup", a)),
           onCompositionstart: t[2] || (t[2] = (a) => n("compositionstart", a)),
           onCompositionupdate: t[3] || (t[3] = (a) => n("compositionupdate", a)),
           onCompositionend: t[4] || (t[4] = (a) => n("compositionend", a))
-        }, null, 46, j)) : (s(), i("input", {
+        }, null, 46, D)) : (s(), i("input", {
           key: 2,
           ref_key: "inputRef",
           ref: u,
           class: f(["scq-input__inner", e.inputClass]),
-          style: $(e.inputStyle),
+          style: q(e.inputStyle),
           type: c.value ? "text" : e.type,
-          value: h.value,
+          value: x.value,
           placeholder: e.placeholder,
           disabled: e.disabled,
           readonly: e.readonly,
@@ -233,31 +233,31 @@ const T = {
           autocomplete: e.autocomplete,
           name: e.name,
           id: e.id,
-          onInput: B,
+          onInput: $,
           onChange: w,
-          onFocus: C,
-          onBlur: I,
+          onFocus: B,
+          onBlur: C,
           onKeydown: t[5] || (t[5] = (a) => n("keydown", a)),
           onKeyup: t[6] || (t[6] = (a) => n("keyup", a)),
           onCompositionstart: t[7] || (t[7] = (a) => n("compositionstart", a)),
           onCompositionupdate: t[8] || (t[8] = (a) => n("compositionupdate", a)),
           onCompositionend: t[9] || (t[9] = (a) => n("compositionend", a))
-        }, null, 46, A)),
+        }, null, 46, O)),
         V.value ? (s(), i("span", {
           key: 3,
           class: "scq-input__clear",
-          onMousedown: t[10] || (t[10] = q(() => {
+          onMousedown: t[10] || (t[10] = I(() => {
           }, ["prevent"])),
-          onClick: F
+          onClick: P
         }, "×", 32)) : r("", !0),
         z.value ? (s(), i("span", {
           key: 4,
           class: "scq-input__password",
-          onMousedown: t[11] || (t[11] = q(() => {
+          onMousedown: t[11] || (t[11] = I(() => {
           }, ["prevent"])),
-          onClick: K
-        }, E(c.value ? "🙈" : "👁"), 33)) : r("", !0),
-        l.$slots.suffix || e.suffixIcon ? (s(), i("span", G, [
+          onClick: N
+        }, K(c.value ? "🙈" : "👁"), 33)) : r("", !0),
+        l.$slots.suffix || e.suffixIcon ? (s(), i("span", j, [
           v(l.$slots, "suffix", {}, () => [
             y("i", {
               class: f(e.suffixIcon)
@@ -265,26 +265,28 @@ const T = {
           ], !0)
         ])) : r("", !0)
       ]),
-      l.$slots.append ? (s(), i("div", H, [
+      l.$slots.append ? (s(), i("div", G, [
         v(l.$slots, "append", {}, void 0, !0)
       ])) : r("", !0)
     ], 2));
   }
-}), k = /* @__PURE__ */ S(J, [["__scopeId", "data-v-e3e12673"]]);
+}), k = /* @__PURE__ */ S(H, [["__scopeId", "data-v-e3e12673"]]), J = (e) => `scq-${e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase()}`;
 k.install = (e) => {
-  e.component(k.name, k);
+  e.component(J(k.name), k);
 };
-const L = [b, k], Q = (e) => {
-  L.forEach((d) => {
+const Q = [b, k], U = (e) => `scq-${e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase()}`, W = (e) => {
+  Q.forEach((d) => {
     const o = d.name;
-    o && e.component(o, d);
+    o && e.component(U(o), d);
   });
-}, W = {
-  install: Q
-};
+}, Y = {
+  install: W
+}, _ = b, ee = k;
 export {
   b as Button,
   k as Input,
-  W as default,
-  Q as install
+  _ as ScqButton,
+  ee as ScqInput,
+  Y as default,
+  W as install
 };

package/dist/scq-vue.umd.js

@@ -1 +1 @@
-(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.ScqVue={},i.Vue))})(this,function(i,e){"use strict";const g=(t,c)=>{const s=t.__vccOpts||t;for(const[l,d]of c)s[l]=d;return s},x=["disabled","type","autofocus"],V={key:0,class:"my-btn__loading","aria-hidden":"true"},f=g(Object.assign({name:"Button"},{__name:"Button",props:{type:{type:String,default:"default",validator:t=>["default","primary","success","warning","info","danger"].includes(t)},size:{type:String,default:"default",validator:t=>["large","default","small"].includes(t)},plain:{type:Boolean,default:!1},round:{type:Boolean,default:!1},circle:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},text:{type:Boolean,default:!1},bg:{type:Boolean,default:!1},link:{type:Boolean,default:!1},nativeType:{type:String,default:"button",validator:t=>["button","submit","reset"].includes(t)},autofocus:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},emits:["click"],setup(t,{emit:c}){const s=t,l=c,d=e.computed(()=>s.disabled||s.loading),r=u=>{d.value||l("click",u)};return(u,m)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["my-btn",`my-btn--${t.type}`,`my-btn--${t.size}`,{"is-disabled":d.value,"is-loading":t.loading,"is-plain":t.plain,"is-round":t.round,"is-circle":t.circle,"is-text":t.text,"is-link":t.link,"is-bg":t.bg}]),disabled:d.value,type:t.nativeType,autofocus:t.autofocus,onClick:r},[t.loading?(e.openBlock(),e.createElementBlock("span",V,[...m[0]||(m[0]=[e.createElementVNode("svg",{viewBox:"0 0 50 50",class:"my-btn__loading-svg"},[e.createElementVNode("circle",{class:"my-btn__loading-path",cx:"25",cy:"25",r:"20",fill:"none"})],-1)])])):e.createCommentVNode("",!0),e.createElementVNode("span",{class:e.normalizeClass(["my-btn__content",{"is-hidden":t.loading&&t.circle}])},[e.renderSlot(u.$slots,"default",{},void 0,!0)],2)],10,x))}}),[["__scopeId","data-v-a92927da"]]);f.install=t=>{t.component(f.name,f)};const w={key:0,class:"scq-input__group-prepend"},S={class:"scq-input__wrapper"},E={key:0,class:"scq-input__prefix"},I=["value","placeholder","disabled","readonly","maxlength","minlength","name","id"],$=["type","value","placeholder","disabled","readonly","maxlength","minlength","autocomplete","name","id"],q={key:5,class:"scq-input__suffix"},N={key:1,class:"scq-input__group-append"},p=g(e.defineComponent({name:"Input",__name:"Input",props:{modelValue:{default:""},type:{default:"text"},size:{default:"default"},placeholder:{default:""},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},clearable:{type:Boolean,default:!1},showPassword:{type:Boolean,default:!1},prefixIcon:{default:""},suffixIcon:{default:""},maxlength:{},minlength:{},autocomplete:{default:"off"},name:{default:""},id:{default:""},inputStyle:{default:""},inputClass:{default:""}},emits:["update:modelValue","input","change","focus","blur","clear","keydown","keyup","compositionstart","compositionupdate","compositionend"],setup(t,{emit:c}){const s=t,l=c,d=e.ref(),r=e.ref(!1),u=e.ref(!1),m=e.computed(()=>s.type==="textarea"),y=e.computed(()=>String(s.modelValue??"")),T=e.computed(()=>s.clearable&&!s.disabled&&!s.readonly&&r.value&&y.value.length>0),P=e.computed(()=>s.showPassword&&!m.value&&!s.disabled&&!s.readonly),B=o=>{const n=o.target.value;l("update:modelValue",n),l("input",n)},b=o=>{const n=o.target.value;l("change",n)},C=o=>{r.value=!0,l("focus",o)},h=o=>{r.value=!1,l("blur",o)},F=()=>{var o;l("update:modelValue",""),l("input",""),l("change",""),l("clear"),(o=d.value)==null||o.focus()},K=()=>{var o;u.value=!u.value,(o=d.value)==null||o.focus()};return(o,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["scq-input",[`scq-input--${t.size}`,{"is-disabled":t.disabled,"is-focus":r.value,"is-textarea":m.value}]])},[o.$slots.prepend?(e.openBlock(),e.createElementBlock("div",w,[e.renderSlot(o.$slots,"prepend",{},void 0,!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",S,[o.$slots.prefix||t.prefixIcon?(e.openBlock(),e.createElementBlock("span",E,[e.renderSlot(o.$slots,"prefix",{},()=>[e.createElementVNode("i",{class:e.normalizeClass(t.prefixIcon)},null,2)],!0)])):e.createCommentVNode("",!0),m.value?(e.openBlock(),e.createElementBlock("textarea",{key:1,ref_key:"inputRef",ref:d,class:e.normalizeClass(["scq-input__inner scq-textarea__inner",t.inputClass]),style:e.normalizeStyle(t.inputStyle),value:y.value,placeholder:t.placeholder,disabled:t.disabled,readonly:t.readonly,maxlength:t.maxlength,minlength:t.minlength,name:t.name,id:t.id,onInput:B,onChange:b,onFocus:C,onBlur:h,onKeydown:n[0]||(n[0]=a=>l("keydown",a)),onKeyup:n[1]||(n[1]=a=>l("keyup",a)),onCompositionstart:n[2]||(n[2]=a=>l("compositionstart",a)),onCompositionupdate:n[3]||(n[3]=a=>l("compositionupdate",a)),onCompositionend:n[4]||(n[4]=a=>l("compositionend",a))},null,46,I)):(e.openBlock(),e.createElementBlock("input",{key:2,ref_key:"inputRef",ref:d,class:e.normalizeClass(["scq-input__inner",t.inputClass]),style:e.normalizeStyle(t.inputStyle),type:u.value?"text":t.type,value:y.value,placeholder:t.placeholder,disabled:t.disabled,readonly:t.readonly,maxlength:t.maxlength,minlength:t.minlength,autocomplete:t.autocomplete,name:t.name,id:t.id,onInput:B,onChange:b,onFocus:C,onBlur:h,onKeydown:n[5]||(n[5]=a=>l("keydown",a)),onKeyup:n[6]||(n[6]=a=>l("keyup",a)),onCompositionstart:n[7]||(n[7]=a=>l("compositionstart",a)),onCompositionupdate:n[8]||(n[8]=a=>l("compositionupdate",a)),onCompositionend:n[9]||(n[9]=a=>l("compositionend",a))},null,46,$)),T.value?(e.openBlock(),e.createElementBlock("span",{key:3,class:"scq-input__clear",onMousedown:n[10]||(n[10]=e.withModifiers(()=>{},["prevent"])),onClick:F},"×",32)):e.createCommentVNode("",!0),P.value?(e.openBlock(),e.createElementBlock("span",{key:4,class:"scq-input__password",onMousedown:n[11]||(n[11]=e.withModifiers(()=>{},["prevent"])),onClick:K},e.toDisplayString(u.value?"🙈":"👁"),33)):e.createCommentVNode("",!0),o.$slots.suffix||t.suffixIcon?(e.openBlock(),e.createElementBlock("span",q,[e.renderSlot(o.$slots,"suffix",{},()=>[e.createElementVNode("i",{class:e.normalizeClass(t.suffixIcon)},null,2)],!0)])):e.createCommentVNode("",!0)]),o.$slots.append?(e.openBlock(),e.createElementBlock("div",N,[e.renderSlot(o.$slots,"append",{},void 0,!0)])):e.createCommentVNode("",!0)],2))}}),[["__scopeId","data-v-e3e12673"]]);p.install=t=>{t.component(p.name,p)};const z=[f,p],k=t=>{z.forEach(c=>{const s=c.name;s&&t.component(s,c)})},M={install:k};i.Button=f,i.Input=p,i.default=M,i.install=k,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.ScqVue={},i.Vue))})(this,function(i,e){"use strict";const g=(t,c)=>{const s=t.__vccOpts||t;for(const[l,d]of c)s[l]=d;return s},$=["disabled","type","autofocus"],w={key:0,class:"my-btn__loading","aria-hidden":"true"},r=g(Object.assign({name:"Button"},{__name:"Button",props:{type:{type:String,default:"default",validator:t=>["default","primary","success","warning","info","danger"].includes(t)},size:{type:String,default:"default",validator:t=>["large","default","small"].includes(t)},plain:{type:Boolean,default:!1},round:{type:Boolean,default:!1},circle:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},text:{type:Boolean,default:!1},bg:{type:Boolean,default:!1},link:{type:Boolean,default:!1},nativeType:{type:String,default:"button",validator:t=>["button","submit","reset"].includes(t)},autofocus:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},emits:["click"],setup(t,{emit:c}){const s=t,l=c,d=e.computed(()=>s.disabled||s.loading),f=u=>{d.value||l("click",u)};return(u,p)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["my-btn",`my-btn--${t.type}`,`my-btn--${t.size}`,{"is-disabled":d.value,"is-loading":t.loading,"is-plain":t.plain,"is-round":t.round,"is-circle":t.circle,"is-text":t.text,"is-link":t.link,"is-bg":t.bg}]),disabled:d.value,type:t.nativeType,autofocus:t.autofocus,onClick:f},[t.loading?(e.openBlock(),e.createElementBlock("span",w,[...p[0]||(p[0]=[e.createElementVNode("svg",{viewBox:"0 0 50 50",class:"my-btn__loading-svg"},[e.createElementVNode("circle",{class:"my-btn__loading-path",cx:"25",cy:"25",r:"20",fill:"none"})],-1)])])):e.createCommentVNode("",!0),e.createElementVNode("span",{class:e.normalizeClass(["my-btn__content",{"is-hidden":t.loading&&t.circle}])},[e.renderSlot(u.$slots,"default",{},void 0,!0)],2)],10,$))}}),[["__scopeId","data-v-a92927da"]]),x=t=>`scq-${t.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}`;r.install=t=>{t.component(x(r.name),r)};const V={key:0,class:"scq-input__group-prepend"},S={class:"scq-input__wrapper"},q={key:0,class:"scq-input__prefix"},E=["value","placeholder","disabled","readonly","maxlength","minlength","name","id"],I=["type","value","placeholder","disabled","readonly","maxlength","minlength","autocomplete","name","id"],N={key:5,class:"scq-input__suffix"},z={key:1,class:"scq-input__group-append"},m=g(e.defineComponent({name:"Input",__name:"Input",props:{modelValue:{default:""},type:{default:"text"},size:{default:"default"},placeholder:{default:""},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},clearable:{type:Boolean,default:!1},showPassword:{type:Boolean,default:!1},prefixIcon:{default:""},suffixIcon:{default:""},maxlength:{},minlength:{},autocomplete:{default:"off"},name:{default:""},id:{default:""},inputStyle:{default:""},inputClass:{default:""}},emits:["update:modelValue","input","change","focus","blur","clear","keydown","keyup","compositionstart","compositionupdate","compositionend"],setup(t,{emit:c}){const s=t,l=c,d=e.ref(),f=e.ref(!1),u=e.ref(!1),p=e.computed(()=>s.type==="textarea"),y=e.computed(()=>String(s.modelValue??"")),A=e.computed(()=>s.clearable&&!s.disabled&&!s.readonly&&f.value&&y.value.length>0),L=e.computed(()=>s.showPassword&&!p.value&&!s.disabled&&!s.readonly),B=o=>{const n=o.target.value;l("update:modelValue",n),l("input",n)},b=o=>{const n=o.target.value;l("change",n)},C=o=>{f.value=!0,l("focus",o)},h=o=>{f.value=!1,l("blur",o)},O=()=>{var o;l("update:modelValue",""),l("input",""),l("change",""),l("clear"),(o=d.value)==null||o.focus()},R=()=>{var o;u.value=!u.value,(o=d.value)==null||o.focus()};return(o,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["scq-input",[`scq-input--${t.size}`,{"is-disabled":t.disabled,"is-focus":f.value,"is-textarea":p.value}]])},[o.$slots.prepend?(e.openBlock(),e.createElementBlock("div",V,[e.renderSlot(o.$slots,"prepend",{},void 0,!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",S,[o.$slots.prefix||t.prefixIcon?(e.openBlock(),e.createElementBlock("span",q,[e.renderSlot(o.$slots,"prefix",{},()=>[e.createElementVNode("i",{class:e.normalizeClass(t.prefixIcon)},null,2)],!0)])):e.createCommentVNode("",!0),p.value?(e.openBlock(),e.createElementBlock("textarea",{key:1,ref_key:"inputRef",ref:d,class:e.normalizeClass(["scq-input__inner scq-textarea__inner",t.inputClass]),style:e.normalizeStyle(t.inputStyle),value:y.value,placeholder:t.placeholder,disabled:t.disabled,readonly:t.readonly,maxlength:t.maxlength,minlength:t.minlength,name:t.name,id:t.id,onInput:B,onChange:b,onFocus:C,onBlur:h,onKeydown:n[0]||(n[0]=a=>l("keydown",a)),onKeyup:n[1]||(n[1]=a=>l("keyup",a)),onCompositionstart:n[2]||(n[2]=a=>l("compositionstart",a)),onCompositionupdate:n[3]||(n[3]=a=>l("compositionupdate",a)),onCompositionend:n[4]||(n[4]=a=>l("compositionend",a))},null,46,E)):(e.openBlock(),e.createElementBlock("input",{key:2,ref_key:"inputRef",ref:d,class:e.normalizeClass(["scq-input__inner",t.inputClass]),style:e.normalizeStyle(t.inputStyle),type:u.value?"text":t.type,value:y.value,placeholder:t.placeholder,disabled:t.disabled,readonly:t.readonly,maxlength:t.maxlength,minlength:t.minlength,autocomplete:t.autocomplete,name:t.name,id:t.id,onInput:B,onChange:b,onFocus:C,onBlur:h,onKeydown:n[5]||(n[5]=a=>l("keydown",a)),onKeyup:n[6]||(n[6]=a=>l("keyup",a)),onCompositionstart:n[7]||(n[7]=a=>l("compositionstart",a)),onCompositionupdate:n[8]||(n[8]=a=>l("compositionupdate",a)),onCompositionend:n[9]||(n[9]=a=>l("compositionend",a))},null,46,I)),A.value?(e.openBlock(),e.createElementBlock("span",{key:3,class:"scq-input__clear",onMousedown:n[10]||(n[10]=e.withModifiers(()=>{},["prevent"])),onClick:O},"×",32)):e.createCommentVNode("",!0),L.value?(e.openBlock(),e.createElementBlock("span",{key:4,class:"scq-input__password",onMousedown:n[11]||(n[11]=e.withModifiers(()=>{},["prevent"])),onClick:R},e.toDisplayString(u.value?"🙈":"👁"),33)):e.createCommentVNode("",!0),o.$slots.suffix||t.suffixIcon?(e.openBlock(),e.createElementBlock("span",N,[e.renderSlot(o.$slots,"suffix",{},()=>[e.createElementVNode("i",{class:e.normalizeClass(t.suffixIcon)},null,2)],!0)])):e.createCommentVNode("",!0)]),o.$slots.append?(e.openBlock(),e.createElementBlock("div",z,[e.renderSlot(o.$slots,"append",{},void 0,!0)])):e.createCommentVNode("",!0)],2))}}),[["__scopeId","data-v-e3e12673"]]),P=t=>`scq-${t.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}`;m.install=t=>{t.component(P(m.name),m)};const M=[r,m],T=t=>`scq-${t.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}`,k=t=>{M.forEach(c=>{const s=c.name;s&&t.component(T(s),c)})},F={install:k},K=r,j=m;i.Button=r,i.Input=m,i.ScqButton=K,i.ScqInput=j,i.default=F,i.install=k,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/types/index.d.ts

@@ -3,5 +3,203 @@ import Button from './components/Button';
 import Input from './components/Input';
 declare const install: (app: App) => void;
 declare const ScqVue: Plugin;
+declare const ScqButton: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<Record<string, unknown>>, Record<string, unknown>, unknown, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<Record<string, unknown>>, Record<string, unknown>, {}, import("vue").ComputedOptions, import("vue").MethodOptions, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<Record<string, unknown>>, Record<string, unknown>, unknown, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Plugin;
+declare const ScqInput: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
+        modelValue?: string | number;
+        type?: "number" | "text" | "password" | "textarea" | "email" | "tel" | "url" | "search";
+        size?: "large" | "default" | "small";
+        placeholder?: string;
+        disabled?: boolean;
+        readonly?: boolean;
+        clearable?: boolean;
+        showPassword?: boolean;
+        prefixIcon?: string;
+        suffixIcon?: string;
+        maxlength?: number;
+        minlength?: number;
+        autocomplete?: string;
+        name?: string;
+        id?: string;
+        inputStyle?: string | Record<string, string>;
+        inputClass?: string;
+    }> & Readonly<{
+        onClear?: (() => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        onInput?: ((value: string) => any) | undefined;
+        onChange?: ((value: string) => any) | undefined;
+        onFocus?: ((evt: FocusEvent) => any) | undefined;
+        onBlur?: ((evt: FocusEvent) => any) | undefined;
+        onKeydown?: ((evt: KeyboardEvent) => any) | undefined;
+        onKeyup?: ((evt: KeyboardEvent) => any) | undefined;
+        onCompositionstart?: ((evt: CompositionEvent) => any) | undefined;
+        onCompositionupdate?: ((evt: CompositionEvent) => any) | undefined;
+        onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+        clear: () => any;
+        "update:modelValue": (value: string) => any;
+        input: (value: string) => any;
+        change: (value: string) => any;
+        focus: (evt: FocusEvent) => any;
+        blur: (evt: FocusEvent) => any;
+        keydown: (evt: KeyboardEvent) => any;
+        keyup: (evt: KeyboardEvent) => any;
+        compositionstart: (evt: CompositionEvent) => any;
+        compositionupdate: (evt: CompositionEvent) => any;
+        compositionend: (evt: CompositionEvent) => any;
+    }, import("vue").PublicProps, {
+        size: "large" | "default" | "small";
+        name: string;
+        modelValue: string | number;
+        type: "number" | "text" | "password" | "textarea" | "email" | "tel" | "url" | "search";
+        placeholder: string;
+        disabled: boolean;
+        readonly: boolean;
+        clearable: boolean;
+        showPassword: boolean;
+        prefixIcon: string;
+        suffixIcon: string;
+        autocomplete: string;
+        id: string;
+        inputStyle: string | Record<string, string>;
+        inputClass: string;
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        modelValue?: string | number;
+        type?: "number" | "text" | "password" | "textarea" | "email" | "tel" | "url" | "search";
+        size?: "large" | "default" | "small";
+        placeholder?: string;
+        disabled?: boolean;
+        readonly?: boolean;
+        clearable?: boolean;
+        showPassword?: boolean;
+        prefixIcon?: string;
+        suffixIcon?: string;
+        maxlength?: number;
+        minlength?: number;
+        autocomplete?: string;
+        name?: string;
+        id?: string;
+        inputStyle?: string | Record<string, string>;
+        inputClass?: string;
+    }> & Readonly<{
+        onClear?: (() => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        onInput?: ((value: string) => any) | undefined;
+        onChange?: ((value: string) => any) | undefined;
+        onFocus?: ((evt: FocusEvent) => any) | undefined;
+        onBlur?: ((evt: FocusEvent) => any) | undefined;
+        onKeydown?: ((evt: KeyboardEvent) => any) | undefined;
+        onKeyup?: ((evt: KeyboardEvent) => any) | undefined;
+        onCompositionstart?: ((evt: CompositionEvent) => any) | undefined;
+        onCompositionupdate?: ((evt: CompositionEvent) => any) | undefined;
+        onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        size: "large" | "default" | "small";
+        name: string;
+        modelValue: string | number;
+        type: "number" | "text" | "password" | "textarea" | "email" | "tel" | "url" | "search";
+        placeholder: string;
+        disabled: boolean;
+        readonly: boolean;
+        clearable: boolean;
+        showPassword: boolean;
+        prefixIcon: string;
+        suffixIcon: string;
+        autocomplete: string;
+        id: string;
+        inputStyle: string | Record<string, string>;
+        inputClass: string;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<{
+    modelValue?: string | number;
+    type?: "number" | "text" | "password" | "textarea" | "email" | "tel" | "url" | "search";
+    size?: "large" | "default" | "small";
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    clearable?: boolean;
+    showPassword?: boolean;
+    prefixIcon?: string;
+    suffixIcon?: string;
+    maxlength?: number;
+    minlength?: number;
+    autocomplete?: string;
+    name?: string;
+    id?: string;
+    inputStyle?: string | Record<string, string>;
+    inputClass?: string;
+}> & Readonly<{
+    onClear?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onInput?: ((value: string) => any) | undefined;
+    onChange?: ((value: string) => any) | undefined;
+    onFocus?: ((evt: FocusEvent) => any) | undefined;
+    onBlur?: ((evt: FocusEvent) => any) | undefined;
+    onKeydown?: ((evt: KeyboardEvent) => any) | undefined;
+    onKeyup?: ((evt: KeyboardEvent) => any) | undefined;
+    onCompositionstart?: ((evt: CompositionEvent) => any) | undefined;
+    onCompositionupdate?: ((evt: CompositionEvent) => any) | undefined;
+    onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    clear: () => any;
+    "update:modelValue": (value: string) => any;
+    input: (value: string) => any;
+    change: (value: string) => any;
+    focus: (evt: FocusEvent) => any;
+    blur: (evt: FocusEvent) => any;
+    keydown: (evt: KeyboardEvent) => any;
+    keyup: (evt: KeyboardEvent) => any;
+    compositionstart: (evt: CompositionEvent) => any;
+    compositionupdate: (evt: CompositionEvent) => any;
+    compositionend: (evt: CompositionEvent) => any;
+}, string, {
+    size: "large" | "default" | "small";
+    name: string;
+    modelValue: string | number;
+    type: "number" | "text" | "password" | "textarea" | "email" | "tel" | "url" | "search";
+    placeholder: string;
+    disabled: boolean;
+    readonly: boolean;
+    clearable: boolean;
+    showPassword: boolean;
+    prefixIcon: string;
+    suffixIcon: string;
+    autocomplete: string;
+    id: string;
+    inputStyle: string | Record<string, string>;
+    inputClass: string;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        prepend?: (props: {}) => any;
+    } & {
+        prefix?: (props: {}) => any;
+    } & {
+        suffix?: (props: {}) => any;
+    } & {
+        append?: (props: {}) => any;
+    };
+}) & Plugin;
 export default ScqVue;
-export { install, Button, Input };
+export { install, Button, Input, ScqButton, ScqInput };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "scq-vue",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A Vue 3 component library",
   "main": "./dist/scq-vue.umd.js",
   "module": "./dist/scq-vue.es.js",