scq-vue 1.0.0

package/README.md

@@ -0,0 +1,74 @@
+# scq-vue
+
+Vue 3 component library with Button and Input.
+
+## Install
+
+```bash
+pnpm add scq-vue
+```
+
+## Usage
+
+### Global install
+
+```ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import ScqVue from 'scq-vue'
+import 'scq-vue/style.css'
+
+createApp(App).use(ScqVue).mount('#app')
+```
+
+### On-demand import
+
+```ts
+import { Button, Input } from 'scq-vue'
+import 'scq-vue/style.css'
+```
+
+### On-demand style import
+
+```ts
+import { Button, Input } from 'scq-vue'
+import 'scq-vue/styles/button.css'
+import 'scq-vue/styles/input.css'
+```
+
+## Components
+
+- Button
+- Input
+
+## Development
+
+```bash
+pnpm install
+pnpm dev
+pnpm build
+pnpm dev:play
+```
+
+## Publish
+
+1. Update version in package.json
+2. Build package
+
+```bash
+pnpm build
+```
+
+3. Login and publish
+
+```bash
+npm login
+npm publish
+```
+
+## Build output
+
+- dist/scq-vue.es.js
+- dist/scq-vue.umd.js
+- dist/style.css
+- dist/types

package/dist/scq-vue.es.js

@@ -0,0 +1,290 @@
+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";
+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 = {
+  key: 0,
+  class: "my-btn__loading",
+  "aria-hidden": "true"
+}, R = /* @__PURE__ */ Object.assign({
+  name: "Button"
+}, {
+  __name: "Button",
+  props: {
+    type: {
+      type: String,
+      default: "default",
+      validator: (e) => ["default", "primary", "success", "warning", "info", "danger"].includes(e)
+    },
+    size: {
+      type: String,
+      default: "default",
+      validator: (e) => ["large", "default", "small"].includes(e)
+    },
+    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: (e) => ["button", "submit", "reset"].includes(e)
+    },
+    autofocus: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["click"],
+  setup(e, { emit: d }) {
+    const o = e, n = d, u = g(() => o.disabled || o.loading), m = (c) => {
+      u.value || n("click", c);
+    };
+    return (c, p) => (s(), i("button", {
+      class: f([
+        "my-btn",
+        `my-btn--${e.type}`,
+        `my-btn--${e.size}`,
+        {
+          "is-disabled": u.value,
+          "is-loading": e.loading,
+          "is-plain": e.plain,
+          "is-round": e.round,
+          "is-circle": e.circle,
+          "is-text": e.text,
+          "is-link": e.link,
+          "is-bg": e.bg
+        }
+      ]),
+      disabled: u.value,
+      type: e.nativeType,
+      autofocus: e.autofocus,
+      onClick: m
+    }, [
+      e.loading ? (s(), i("span", N, [...p[0] || (p[0] = [
+        y("svg", {
+          viewBox: "0 0 50 50",
+          class: "my-btn__loading-svg"
+        }, [
+          y("circle", {
+            class: "my-btn__loading-path",
+            cx: "25",
+            cy: "25",
+            r: "20",
+            fill: "none"
+          })
+        ], -1)
+      ])])) : r("", !0),
+      y("span", {
+        class: f(["my-btn__content", { "is-hidden": e.loading && e.circle }])
+      }, [
+        v(c.$slots, "default", {}, void 0, !0)
+      ], 2)
+    ], 10, M));
+  }
+}), b = /* @__PURE__ */ S(R, [["__scopeId", "data-v-a92927da"]]);
+b.install = (e) => {
+  e.component(b.name, b);
+};
+const T = {
+  key: 0,
+  class: "scq-input__group-prepend"
+}, D = { class: "scq-input__wrapper" }, O = {
+  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 = {
+  key: 5,
+  class: "scq-input__suffix"
+}, H = {
+  key: 1,
+  class: "scq-input__group-append"
+}, J = /* @__PURE__ */ P({
+  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(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
+    ), z = g(
+      () => o.showPassword && !p.value && !o.disabled && !o.readonly
+    ), B = (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) => {
+      m.value = !0, n("focus", l);
+    }, I = (l) => {
+      m.value = !1, n("blur", l);
+    }, F = () => {
+      var l;
+      n("update:modelValue", ""), n("input", ""), n("change", ""), n("clear"), (l = u.value) == null || l.focus();
+    }, K = () => {
+      var l;
+      c.value = !c.value, (l = u.value) == null || l.focus();
+    };
+    return (l, t) => (s(), i("div", {
+      class: f(["scq-input", [
+        `scq-input--${e.size}`,
+        {
+          "is-disabled": e.disabled,
+          "is-focus": m.value,
+          "is-textarea": p.value
+        }
+      ]])
+    }, [
+      l.$slots.prepend ? (s(), i("div", T, [
+        v(l.$slots, "prepend", {}, void 0, !0)
+      ])) : r("", !0),
+      y("div", D, [
+        l.$slots.prefix || e.prefixIcon ? (s(), i("span", O, [
+          v(l.$slots, "prefix", {}, () => [
+            y("i", {
+              class: f(e.prefixIcon)
+            }, null, 2)
+          ], !0)
+        ])) : r("", !0),
+        p.value ? (s(), i("textarea", {
+          key: 1,
+          ref_key: "inputRef",
+          ref: u,
+          class: f(["scq-input__inner scq-textarea__inner", e.inputClass]),
+          style: $(e.inputStyle),
+          value: h.value,
+          placeholder: e.placeholder,
+          disabled: e.disabled,
+          readonly: e.readonly,
+          maxlength: e.maxlength,
+          minlength: e.minlength,
+          name: e.name,
+          id: e.id,
+          onInput: B,
+          onChange: w,
+          onFocus: C,
+          onBlur: I,
+          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", {
+          key: 2,
+          ref_key: "inputRef",
+          ref: u,
+          class: f(["scq-input__inner", e.inputClass]),
+          style: $(e.inputStyle),
+          type: c.value ? "text" : e.type,
+          value: h.value,
+          placeholder: e.placeholder,
+          disabled: e.disabled,
+          readonly: e.readonly,
+          maxlength: e.maxlength,
+          minlength: e.minlength,
+          autocomplete: e.autocomplete,
+          name: e.name,
+          id: e.id,
+          onInput: B,
+          onChange: w,
+          onFocus: C,
+          onBlur: I,
+          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)),
+        V.value ? (s(), i("span", {
+          key: 3,
+          class: "scq-input__clear",
+          onMousedown: t[10] || (t[10] = q(() => {
+          }, ["prevent"])),
+          onClick: F
+        }, "×", 32)) : r("", !0),
+        z.value ? (s(), i("span", {
+          key: 4,
+          class: "scq-input__password",
+          onMousedown: t[11] || (t[11] = q(() => {
+          }, ["prevent"])),
+          onClick: K
+        }, E(c.value ? "🙈" : "👁"), 33)) : r("", !0),
+        l.$slots.suffix || e.suffixIcon ? (s(), i("span", G, [
+          v(l.$slots, "suffix", {}, () => [
+            y("i", {
+              class: f(e.suffixIcon)
+            }, null, 2)
+          ], !0)
+        ])) : r("", !0)
+      ]),
+      l.$slots.append ? (s(), i("div", H, [
+        v(l.$slots, "append", {}, void 0, !0)
+      ])) : r("", !0)
+    ], 2));
+  }
+}), k = /* @__PURE__ */ S(J, [["__scopeId", "data-v-e3e12673"]]);
+k.install = (e) => {
+  e.component(k.name, k);
+};
+const L = [b, k], Q = (e) => {
+  L.forEach((d) => {
+    const o = d.name;
+    o && e.component(o, d);
+  });
+}, W = {
+  install: Q
+};
+export {
+  b as Button,
+  k as Input,
+  W as default,
+  Q as install
+};

package/dist/scq-vue.umd.js

@@ -0,0 +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"}})});

package/dist/style.css

@@ -0,0 +1 @@
+.my-btn[data-v-a92927da]{--btn-default-text-color: #606266;--btn-default-bg-color: #ffffff;--btn-default-border-color: #dcdfe6;--btn-hover-text-color: #409eff;--btn-hover-bg-color: #ecf5ff;--btn-hover-border-color: #c6e2ff;--btn-active-bg-color: #3a8ee6;--btn-active-border-color: #3a8ee6;--btn-primary-color: #409eff;--btn-success-color: #67c23a;--btn-warning-color: #e6a23c;--btn-danger-color: #f56c6c;--btn-info-color: #909399;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;font-weight:500;line-height:1;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:8px 16px;height:32px;color:var(--btn-default-text-color);border:1px solid var(--btn-default-border-color);border-radius:4px;background-color:var(--btn-default-bg-color);cursor:pointer;outline:none;transition:.2s}.my-btn[data-v-a92927da]:hover{color:var(--btn-hover-text-color);border-color:var(--btn-hover-border-color);background-color:var(--btn-hover-bg-color)}.my-btn[data-v-a92927da]:active{border-color:var(--btn-active-border-color);background-color:var(--btn-active-bg-color);color:#fff}.my-btn--primary[data-v-a92927da]{color:#fff;border-color:var(--btn-primary-color);background-color:var(--btn-primary-color)}.my-btn--success[data-v-a92927da]{color:#fff;border-color:var(--btn-success-color);background-color:var(--btn-success-color)}.my-btn--warning[data-v-a92927da]{color:#fff;border-color:var(--btn-warning-color);background-color:var(--btn-warning-color)}.my-btn--info[data-v-a92927da]{color:#fff;border-color:var(--btn-info-color);background-color:var(--btn-info-color)}.my-btn--danger[data-v-a92927da]{color:#fff;border-color:var(--btn-danger-color);background-color:var(--btn-danger-color)}.my-btn.is-plain[data-v-a92927da]{background-color:#fff}.my-btn--primary.is-plain[data-v-a92927da]{color:var(--btn-primary-color);border-color:#a0cfff;background-color:#ecf5ff}.my-btn--success.is-plain[data-v-a92927da]{color:var(--btn-success-color);border-color:#b3e19d;background-color:#f0f9eb}.my-btn--warning.is-plain[data-v-a92927da]{color:var(--btn-warning-color);border-color:#f3d19e;background-color:#fdf6ec}.my-btn--info.is-plain[data-v-a92927da]{color:var(--btn-info-color);border-color:#c8c9cc;background-color:#f4f4f5}.my-btn--danger.is-plain[data-v-a92927da]{color:var(--btn-danger-color);border-color:#fab6b6;background-color:#fef0f0}.my-btn--large[data-v-a92927da]{height:40px;padding:12px 20px;font-size:14px}.my-btn--default[data-v-a92927da]{height:32px;padding:8px 16px;font-size:14px}.my-btn--small[data-v-a92927da]{height:24px;padding:5px 11px;font-size:12px}.my-btn.is-round[data-v-a92927da]{border-radius:20px}.my-btn.is-circle[data-v-a92927da]{width:32px;padding:8px;border-radius:50%}.my-btn--large.is-circle[data-v-a92927da]{width:40px;padding:12px}.my-btn--small.is-circle[data-v-a92927da]{width:24px;padding:5px}.my-btn.is-text[data-v-a92927da],.my-btn.is-link[data-v-a92927da]{border-color:transparent;background-color:transparent;padding-left:4px;padding-right:4px}.my-btn.is-text[data-v-a92927da]{color:#606266}.my-btn.is-text.is-bg[data-v-a92927da]{border-radius:4px;background-color:#f5f7fa}.my-btn.is-link[data-v-a92927da]{color:var(--btn-primary-color)}.my-btn.is-disabled[data-v-a92927da]{opacity:.55;cursor:not-allowed;pointer-events:none}.my-btn__content[data-v-a92927da]{display:inline-flex;align-items:center}.my-btn__content.is-hidden[data-v-a92927da]{display:none}.my-btn__loading[data-v-a92927da]{display:inline-flex;width:14px;height:14px}.my-btn__loading-svg[data-v-a92927da]{animation:btn-spin-a92927da .9s linear infinite;width:14px;height:14px}.my-btn__loading-path[data-v-a92927da]{stroke:currentColor;stroke-width:4;stroke-linecap:round;opacity:.9}@keyframes btn-spin-a92927da{to{transform:rotate(360deg)}}.scq-input[data-v-e3e12673]{display:inline-flex;width:100%;color:#303133}.scq-input__wrapper[data-v-e3e12673]{display:inline-flex;align-items:center;width:100%;border:1px solid #dcdfe6;border-radius:4px;background:#fff;transition:border-color .2s}.scq-input.is-focus .scq-input__wrapper[data-v-e3e12673]{border-color:#409eff}.scq-input.is-disabled .scq-input__wrapper[data-v-e3e12673]{background:#f5f7fa;cursor:not-allowed}.scq-input__inner[data-v-e3e12673]{width:100%;border:none;outline:none;background:transparent;color:inherit;padding:8px 12px;font-size:14px}.scq-textarea__inner[data-v-e3e12673]{resize:vertical;min-height:72px}.scq-input--large .scq-input__inner[data-v-e3e12673]{padding:10px 14px;font-size:16px}.scq-input--small .scq-input__inner[data-v-e3e12673]{padding:6px 10px;font-size:12px}.scq-input__prefix[data-v-e3e12673],.scq-input__suffix[data-v-e3e12673],.scq-input__clear[data-v-e3e12673],.scq-input__password[data-v-e3e12673]{display:inline-flex;align-items:center;justify-content:center;color:#909399;padding:0 8px;-webkit-user-select:none;user-select:none}.scq-input__clear[data-v-e3e12673],.scq-input__password[data-v-e3e12673]{cursor:pointer}.scq-input__group-prepend[data-v-e3e12673],.scq-input__group-append[data-v-e3e12673]{display:inline-flex;align-items:center;padding:0 12px;border:1px solid #dcdfe6;background:#f5f7fa;color:#606266;font-size:14px}.scq-input__group-prepend[data-v-e3e12673]{border-right:none;border-radius:4px 0 0 4px}.scq-input__group-append[data-v-e3e12673]{border-left:none;border-radius:0 4px 4px 0}

package/dist/types/components/Button/Button.vue.d.ts

@@ -0,0 +1,37 @@
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    $emit: (event: "click", ...args: any[]) => void;
+    size: string;
+    text: boolean;
+    type: string;
+    disabled: boolean;
+    link: boolean;
+    circle: boolean;
+    plain: boolean;
+    round: boolean;
+    loading: boolean;
+    bg: boolean;
+    nativeType: string;
+    autofocus: boolean;
+    $props: {
+        readonly size?: string | undefined;
+        readonly text?: boolean | undefined;
+        readonly type?: string | undefined;
+        readonly disabled?: boolean | undefined;
+        readonly link?: boolean | undefined;
+        readonly circle?: boolean | undefined;
+        readonly plain?: boolean | undefined;
+        readonly round?: boolean | undefined;
+        readonly loading?: boolean | undefined;
+        readonly bg?: boolean | undefined;
+        readonly nativeType?: string | undefined;
+        readonly autofocus?: boolean | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+};

package/dist/types/components/Button/index.d.ts

@@ -0,0 +1,5 @@
+import type { Plugin } from 'vue';
+import Button from './Button.vue';
+type SFCWithInstall<T> = T & Plugin;
+declare const _Button: SFCWithInstall<typeof Button>;
+export default _Button;

package/dist/types/components/Input/Input.vue.d.ts

@@ -0,0 +1,79 @@
+type InputType = 'text' | 'password' | 'textarea' | 'number' | 'email' | 'tel' | 'url' | 'search';
+type InputSize = 'large' | 'default' | 'small';
+type __VLS_Props = {
+    modelValue?: string | number;
+    type?: InputType;
+    size?: InputSize;
+    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;
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    prepend?: (props: typeof __VLS_1) => any;
+} & {
+    prefix?: (props: typeof __VLS_3) => any;
+} & {
+    suffix?: (props: typeof __VLS_5) => any;
+} & {
+    append?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, 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, import("vue").PublicProps, Readonly<__VLS_Props> & 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: InputSize;
+    name: string;
+    modelValue: string | number;
+    type: InputType;
+    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").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/Input/index.d.ts

@@ -0,0 +1,5 @@
+import type { Plugin } from 'vue';
+import Input from './Input.vue';
+type SFCWithInstall<T> = T & Plugin;
+declare const _Input: SFCWithInstall<typeof Input>;
+export default _Input;

package/dist/types/index.d.ts

@@ -0,0 +1,7 @@
+import type { App, Plugin } from 'vue';
+import Button from './components/Button';
+import Input from './components/Input';
+declare const install: (app: App) => void;
+declare const ScqVue: Plugin;
+export default ScqVue;
+export { install, Button, Input };

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "scq-vue",
+  "version": "1.0.0",
+  "description": "A Vue 3 component library",
+  "main": "./dist/scq-vue.umd.js",
+  "module": "./dist/scq-vue.es.js",
+  "types": "./dist/types/index.d.ts",
+  "files": [
+    "dist",
+    "styles"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/scq-vue.es.js",
+      "require": "./dist/scq-vue.umd.js"
+    },
+    "./style.css": "./dist/style.css",
+    "./styles/index.css": "./styles/index.css",
+    "./styles/button.css": "./styles/button.css",
+    "./styles/input.css": "./styles/input.css"
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "pnpm run clean && vite build && vue-tsc -p tsconfig.build.json",
+    "dev": "vite",
+    "dev:play": "vite --config playground/vite.config.mjs",
+    "build:play": "vite build --config playground/vite.config.mjs",
+    "prepublishOnly": "pnpm run build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "packageManager": "pnpm@10.33.3",
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.6",
+    "rimraf": "^6.0.1",
+    "sass": "^1.99.0",
+    "typescript": "^5.9.3",
+    "vite": "^5.4.21",
+    "vue": "^3.5.34",
+    "vue-router": "^4.6.4",
+    "vue-tsc": "^2.2.12"
+  }
+}

package/styles/button.css

@@ -0,0 +1,213 @@
+.my-btn {
+  --btn-default-text-color: #606266;
+  --btn-default-bg-color: #ffffff;
+  --btn-default-border-color: #dcdfe6;
+  --btn-hover-text-color: #409eff;
+  --btn-hover-bg-color: #ecf5ff;
+  --btn-hover-border-color: #c6e2ff;
+  --btn-active-bg-color: #3a8ee6;
+  --btn-active-border-color: #3a8ee6;
+  --btn-primary-color: #409eff;
+  --btn-success-color: #67c23a;
+  --btn-warning-color: #e6a23c;
+  --btn-danger-color: #f56c6c;
+  --btn-info-color: #909399;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  box-sizing: border-box;
+  font-weight: 500;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  user-select: none;
+  vertical-align: middle;
+  -webkit-appearance: none;
+  appearance: none;
+  padding: 8px 16px;
+  height: 32px;
+  color: var(--btn-default-text-color);
+  border: 1px solid var(--btn-default-border-color);
+  border-radius: 4px;
+  background-color: var(--btn-default-bg-color);
+  cursor: pointer;
+  outline: none;
+  transition: 0.2s;
+}
+
+.my-btn:hover {
+  color: var(--btn-hover-text-color);
+  border-color: var(--btn-hover-border-color);
+  background-color: var(--btn-hover-bg-color);
+}
+
+.my-btn:active {
+  border-color: var(--btn-active-border-color);
+  background-color: var(--btn-active-bg-color);
+  color: #ffffff;
+}
+
+.my-btn--primary {
+  color: #ffffff;
+  border-color: var(--btn-primary-color);
+  background-color: var(--btn-primary-color);
+}
+
+.my-btn--success {
+  color: #ffffff;
+  border-color: var(--btn-success-color);
+  background-color: var(--btn-success-color);
+}
+
+.my-btn--warning {
+  color: #ffffff;
+  border-color: var(--btn-warning-color);
+  background-color: var(--btn-warning-color);
+}
+
+.my-btn--info {
+  color: #ffffff;
+  border-color: var(--btn-info-color);
+  background-color: var(--btn-info-color);
+}
+
+.my-btn--danger {
+  color: #ffffff;
+  border-color: var(--btn-danger-color);
+  background-color: var(--btn-danger-color);
+}
+
+.my-btn.is-plain {
+  background-color: #ffffff;
+}
+
+.my-btn--primary.is-plain {
+  color: var(--btn-primary-color);
+  border-color: #a0cfff;
+  background-color: #ecf5ff;
+}
+
+.my-btn--success.is-plain {
+  color: var(--btn-success-color);
+  border-color: #b3e19d;
+  background-color: #f0f9eb;
+}
+
+.my-btn--warning.is-plain {
+  color: var(--btn-warning-color);
+  border-color: #f3d19e;
+  background-color: #fdf6ec;
+}
+
+.my-btn--info.is-plain {
+  color: var(--btn-info-color);
+  border-color: #c8c9cc;
+  background-color: #f4f4f5;
+}
+
+.my-btn--danger.is-plain {
+  color: var(--btn-danger-color);
+  border-color: #fab6b6;
+  background-color: #fef0f0;
+}
+
+.my-btn--large {
+  height: 40px;
+  padding: 12px 20px;
+  font-size: 14px;
+}
+
+.my-btn--default {
+  height: 32px;
+  padding: 8px 16px;
+  font-size: 14px;
+}
+
+.my-btn--small {
+  height: 24px;
+  padding: 5px 11px;
+  font-size: 12px;
+}
+
+.my-btn.is-round {
+  border-radius: 20px;
+}
+
+.my-btn.is-circle {
+  width: 32px;
+  padding: 8px;
+  border-radius: 50%;
+}
+
+.my-btn--large.is-circle {
+  width: 40px;
+  padding: 12px;
+}
+
+.my-btn--small.is-circle {
+  width: 24px;
+  padding: 5px;
+}
+
+.my-btn.is-text,
+.my-btn.is-link {
+  border-color: transparent;
+  background-color: transparent;
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.my-btn.is-text {
+  color: #606266;
+}
+
+.my-btn.is-text.is-bg {
+  border-radius: 4px;
+  background-color: #f5f7fa;
+}
+
+.my-btn.is-link {
+  color: var(--btn-primary-color);
+}
+
+.my-btn.is-disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.my-btn__content {
+  display: inline-flex;
+  align-items: center;
+}
+
+.my-btn__content.is-hidden {
+  display: none;
+}
+
+.my-btn__loading {
+  display: inline-flex;
+  width: 14px;
+  height: 14px;
+}
+
+.my-btn__loading-svg {
+  animation: btn-spin 0.9s linear infinite;
+  width: 14px;
+  height: 14px;
+}
+
+.my-btn__loading-path {
+  stroke: currentColor;
+  stroke-width: 4;
+  stroke-linecap: round;
+  opacity: 0.9;
+}
+
+@keyframes btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/styles/index.css

@@ -0,0 +1,2 @@
+@import './button.css';
+@import './input.css';

package/styles/input.css

@@ -0,0 +1,87 @@
+.scq-input {
+  display: inline-flex;
+  width: 100%;
+  color: #303133;
+}
+
+.scq-input__wrapper {
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  background: #fff;
+  transition: border-color 0.2s;
+}
+
+.scq-input.is-focus .scq-input__wrapper {
+  border-color: #409eff;
+}
+
+.scq-input.is-disabled .scq-input__wrapper {
+  background: #f5f7fa;
+  cursor: not-allowed;
+}
+
+.scq-input__inner {
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  padding: 8px 12px;
+  font-size: 14px;
+}
+
+.scq-textarea__inner {
+  resize: vertical;
+  min-height: 72px;
+}
+
+.scq-input--large .scq-input__inner {
+  padding: 10px 14px;
+  font-size: 16px;
+}
+
+.scq-input--small .scq-input__inner {
+  padding: 6px 10px;
+  font-size: 12px;
+}
+
+.scq-input__prefix,
+.scq-input__suffix,
+.scq-input__clear,
+.scq-input__password {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #909399;
+  padding: 0 8px;
+  user-select: none;
+}
+
+.scq-input__clear,
+.scq-input__password {
+  cursor: pointer;
+}
+
+.scq-input__group-prepend,
+.scq-input__group-append {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 12px;
+  border: 1px solid #dcdfe6;
+  background: #f5f7fa;
+  color: #606266;
+  font-size: 14px;
+}
+
+.scq-input__group-prepend {
+  border-right: none;
+  border-radius: 4px 0 0 4px;
+}
+
+.scq-input__group-append {
+  border-left: none;
+  border-radius: 0 4px 4px 0;
+}