@cghbcf/xp-ui 1.0.0

package/dist/style.css

@@ -0,0 +1 @@
+*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:1.5;color:#303133;background-color:#f2f3f5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100vh}input,button,textarea,select{font-family:inherit;font-size:inherit;line-height:inherit}button{border:none;background:none;cursor:pointer}input[type=text],input[type=password],input[type=number],textarea{-moz-appearance:none;appearance:none;-webkit-appearance:none}a{color:#409eff;text-decoration:none}a:hover{text-decoration:underline}ul,ol{list-style:none}table{border-collapse:collapse;border-spacing:0}img{max-width:100%;vertical-align:middle}.xp-button[data-v-8bb35629]{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;font-size:14px;font-weight:500;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease;outline:none}.xp-button[data-v-8bb35629]:focus{outline:none}.xp-button--primary[data-v-8bb35629]{background-color:#409eff;color:#fff}.xp-button--primary[data-v-8bb35629]:hover:not(:disabled){background-color:#66b1ff}.xp-button--primary[data-v-8bb35629]:active:not(:disabled){background-color:#3a8ee6}.xp-button--default[data-v-8bb35629]{background-color:#fff;color:#606266;border:1px solid #dcdfe6}.xp-button--default[data-v-8bb35629]:hover:not(:disabled){color:#409eff;border-color:#c6e2ff;background-color:#ecf5ff}.xp-button--default[data-v-8bb35629]:active:not(:disabled){border-color:#409eff}.xp-button--success[data-v-8bb35629]{background-color:#67c23a;color:#fff}.xp-button--success[data-v-8bb35629]:hover:not(:disabled){background-color:#85ce61}.xp-button--success[data-v-8bb35629]:active:not(:disabled){background-color:#5daf34}.xp-button--warning[data-v-8bb35629]{background-color:#e6a23c;color:#fff}.xp-button--warning[data-v-8bb35629]:hover:not(:disabled){background-color:#ebb563}.xp-button--warning[data-v-8bb35629]:active:not(:disabled){background-color:#cf9236}.xp-button--danger[data-v-8bb35629]{background-color:#f56c6c;color:#fff}.xp-button--danger[data-v-8bb35629]:hover:not(:disabled){background-color:#f78989}.xp-button--danger[data-v-8bb35629]:active:not(:disabled){background-color:#e45656}.xp-button--small[data-v-8bb35629]{padding:4px 12px;font-size:12px}.xp-button--medium[data-v-8bb35629]{padding:8px 16px;font-size:14px}.xp-button--large[data-v-8bb35629]{padding:12px 24px;font-size:16px}.xp-button--disabled[data-v-8bb35629],.xp-button--loading[data-v-8bb35629]{cursor:not-allowed;opacity:.6}.xp-button__loading[data-v-8bb35629]{width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin-8bb35629 .6s linear infinite;margin-right:6px}.xp-button--default .xp-button__loading[data-v-8bb35629]{border-color:#6062664d;border-top-color:#606266}.xp-button__text[data-v-8bb35629]{display:inline-flex;align-items:center}@keyframes spin-8bb35629{to{transform:rotate(360deg)}}.xp-input[data-v-d69c9b60]{position:relative;display:inline-flex;align-items:center;width:100%;max-width:320px}.xp-input__inner[data-v-d69c9b60]{width:100%;height:40px;padding:0 15px;font-size:14px;color:#303133;background-color:#fff;border:1px solid #dcdfe6;border-radius:4px;outline:none;transition:all .2s ease}.xp-input__inner[data-v-d69c9b60]:focus{border-color:#409eff;box-shadow:0 0 0 2px #409eff1a}.xp-input__inner[data-v-d69c9b60]::placeholder{color:#c0c4cc}.xp-input--small .xp-input__inner[data-v-d69c9b60]{height:32px;padding:0 12px;font-size:12px}.xp-input--medium .xp-input__inner[data-v-d69c9b60]{height:40px;padding:0 15px;font-size:14px}.xp-input--large .xp-input__inner[data-v-d69c9b60]{height:48px;padding:0 15px;font-size:16px}.xp-input--disabled .xp-input__inner[data-v-d69c9b60]{background-color:#f5f7fa;border-color:#e4e7ed;color:#c0c4cc;cursor:not-allowed}.xp-input--prefix .xp-input__inner[data-v-d69c9b60]{padding-left:35px}.xp-input--suffix .xp-input__inner[data-v-d69c9b60]{padding-right:35px}.xp-input__prefix[data-v-d69c9b60],.xp-input__suffix[data-v-d69c9b60]{position:absolute;width:25px;height:100%;display:flex;align-items:center;justify-content:center;color:#909399;font-size:14px}.xp-input__prefix[data-v-d69c9b60]{left:0}.xp-input__suffix[data-v-d69c9b60]{right:0}.xp-card[data-v-60989cba]{background-color:#fff;border-radius:4px;border:1px solid #ebeef5;overflow:hidden;transition:box-shadow .2s ease}.xp-card--always[data-v-60989cba]{box-shadow:0 2px 12px #0000001a}.xp-card--hover[data-v-60989cba]{box-shadow:none}.xp-card--hover[data-v-60989cba]:hover{box-shadow:0 2px 12px #0000001a}.xp-card--never[data-v-60989cba]{box-shadow:none}.xp-card__header[data-v-60989cba]{padding:18px 20px;border-bottom:1px solid #ebeef5;box-sizing:border-box}.xp-card__title[data-v-60989cba]{margin:0;font-size:16px;font-weight:600;color:#303133}.xp-card__body[data-v-60989cba]{padding:20px;color:#606266;font-size:14px;line-height:1.8}.xp-card__footer[data-v-60989cba]{padding:18px 20px;border-top:1px solid #ebeef5;box-sizing:border-box}.xp-dialog__wrapper[data-v-7015aab1]{position:fixed;top:0;left:0;right:0;bottom:0;z-index:2000;display:flex;align-items:center;justify-content:center}.xp-dialog__mask[data-v-7015aab1]{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#00000080}.xp-dialog[data-v-7015aab1]{position:relative;background-color:#fff;border-radius:4px;box-shadow:0 2px 12px #0000001a;width:500px;margin:0 auto;overflow:hidden}.xp-dialog__header[data-v-7015aab1]{padding:18px 20px;border-bottom:1px solid #ebeef5;display:flex;justify-content:space-between;align-items:center;box-sizing:border-box}.xp-dialog__title[data-v-7015aab1]{margin:0;font-size:16px;font-weight:600;color:#303133}.xp-dialog__close[data-v-7015aab1]{background:none;border:none;font-size:24px;color:#909399;cursor:pointer;padding:0;line-height:1;transition:color .2s ease}.xp-dialog__close[data-v-7015aab1]:hover{color:#606266}.xp-dialog__body[data-v-7015aab1]{padding:20px;color:#606266;font-size:14px;line-height:1.8}.xp-dialog__footer[data-v-7015aab1]{padding:18px 20px;border-top:1px solid #ebeef5;display:flex;justify-content:flex-end;gap:12px;box-sizing:border-box}.xp-dialog-fade-enter-active[data-v-7015aab1],.xp-dialog-fade-leave-active[data-v-7015aab1]{transition:opacity .2s ease}.xp-dialog-fade-enter-from[data-v-7015aab1],.xp-dialog-fade-leave-to[data-v-7015aab1]{opacity:0}.xp-dialog-slide-enter-active[data-v-7015aab1],.xp-dialog-slide-leave-active[data-v-7015aab1]{transition:all .3s ease}.xp-dialog-slide-enter-from[data-v-7015aab1],.xp-dialog-slide-leave-to[data-v-7015aab1]{opacity:0;transform:translateY(-20px) scale(.95)}

package/dist/xp-ui.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),c=(t,l)=>{const a=t.__vccOpts||t;for(const[d,n]of l)a[d]=n;return a},y=["disabled"],g={key:0,class:"xp-button__loading"},k={class:"xp-button__text"},b={__name:"Button",props:{type:{type:String,default:"default",validator:t=>["primary","default","success","warning","danger"].includes(t)},size:{type:String,default:"medium",validator:t=>["small","medium","large"].includes(t)},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1}},emits:["click"],setup(t,{emit:l}){const a=t,d=l,n=s=>{!a.disabled&&!a.loading&&d("click",s)};return(s,o)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["xp-button",[`xp-button--${t.type}`,`xp-button--${t.size}`,{"xp-button--disabled":t.disabled,"xp-button--loading":t.loading}]]),disabled:t.disabled||t.loading,onClick:n},[t.loading?(e.openBlock(),e.createElementBlock("span",g)):e.createCommentVNode("",!0),e.createElementVNode("span",k,[e.renderSlot(s.$slots,"default",{},void 0,!0)])],10,y))}},i=c(b,[["__scopeId","data-v-8bb35629"]]),B={key:0,class:"xp-input__prefix"},v=["type","value","placeholder","disabled"],$={key:1,class:"xp-input__suffix"},C={__name:"Input",props:{modelValue:{type:String,default:""},type:{type:String,default:"text",validator:t=>["text","password","number"].includes(t)},placeholder:{type:String,default:""},disabled:{type:Boolean,default:!1},size:{type:String,default:"medium",validator:t=>["small","medium","large"].includes(t)}},emits:["update:modelValue","focus","blur"],setup(t,{emit:l}){const a=l,d=o=>{a("update:modelValue",o.target.value)},n=o=>{a("focus",o)},s=o=>{a("blur",o)};return(o,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["xp-input",[`xp-input--${t.size}`,{"xp-input--disabled":t.disabled,"xp-input--prefix":o.$slots.prefix,"xp-input--suffix":o.$slots.suffix}]])},[o.$slots.prefix?(e.openBlock(),e.createElementBlock("span",B,[e.renderSlot(o.$slots,"prefix",{},void 0,!0)])):e.createCommentVNode("",!0),e.createElementVNode("input",{class:"xp-input__inner",type:t.type,value:t.modelValue,placeholder:t.placeholder,disabled:t.disabled,onInput:d,onFocus:n,onBlur:s},null,40,v),o.$slots.suffix?(e.openBlock(),e.createElementBlock("span",$,[e.renderSlot(o.$slots,"suffix",{},void 0,!0)])):e.createCommentVNode("",!0)],2))}},p=c(C,[["__scopeId","data-v-d69c9b60"]]),V={key:0,class:"xp-card__header"},S={class:"xp-card__title"},N={class:"xp-card__body"},E={key:1,class:"xp-card__footer"},w={__name:"Card",props:{title:{type:String,default:""},shadow:{type:String,default:"always",validator:t=>["always","hover","never"].includes(t)}},setup(t){return(l,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["xp-card",[`xp-card--${t.shadow}`]])},[t.title||l.$slots.header?(e.openBlock(),e.createElementBlock("div",V,[e.renderSlot(l.$slots,"header",{},()=>[e.createElementVNode("h3",S,e.toDisplayString(t.title),1)],!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",N,[e.renderSlot(l.$slots,"default",{},void 0,!0)]),l.$slots.footer?(e.openBlock(),e.createElementBlock("div",E,[e.renderSlot(l.$slots,"footer",{},void 0,!0)])):e.createCommentVNode("",!0)],2))}},m=c(w,[["__scopeId","data-v-60989cba"]]),T={class:"xp-dialog__header"},I={class:"xp-dialog__title"},z={class:"xp-dialog__body"},X={class:"xp-dialog__footer"},D={__name:"Dialog",props:{visible:{type:Boolean,default:!1},title:{type:String,default:""},width:{type:String,default:"500px"},confirmButtonText:{type:String,default:"确定"},cancelButtonText:{type:String,default:"取消"},closeOnClickModal:{type:Boolean,default:!0}},emits:["confirm","cancel","update:visible"],setup(t,{emit:l}){const a=t,d=l,n=()=>{d("update:visible",!1)},s=()=>{a.closeOnClickModal&&n()},o=()=>{d("confirm"),n()},r=()=>{d("cancel"),n()};return(h,u)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{name:"xp-dialog-fade"},{default:e.withCtx(()=>[t.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:"xp-dialog__wrapper",onClick:e.withModifiers(s,["self"])},[u[0]||(u[0]=e.createElementVNode("div",{class:"xp-dialog__mask"},null,-1)),e.createVNode(e.Transition,{name:"xp-dialog-slide"},{default:e.withCtx(()=>[t.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:"xp-dialog",style:e.normalizeStyle({width:t.width})},[e.createElementVNode("div",T,[e.createElementVNode("h3",I,e.toDisplayString(t.title),1),e.createElementVNode("button",{class:"xp-dialog__close",onClick:n}," × ")]),e.createElementVNode("div",z,[e.renderSlot(h.$slots,"default",{},void 0,!0)]),e.createElementVNode("div",X,[e.createVNode(i,{onClick:r},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.cancelButtonText),1)]),_:1}),e.createVNode(i,{type:"primary",onClick:o},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.confirmButtonText),1)]),_:1})])],4)):e.createCommentVNode("",!0)]),_:3})])):e.createCommentVNode("",!0)]),_:3})]))}},f=c(D,[["__scopeId","data-v-7015aab1"]]),x={XpButton:i,XpInput:p,XpCard:m,XpDialog:f},_=t=>{Object.entries(x).forEach(([l,a])=>{t.component(l,a)})},M={install:_,...x};exports.XpButton=i;exports.XpCard=m;exports.XpDialog=f;exports.XpInput=p;exports.default=M;exports.install=_;

package/dist/xp-ui.es.js

@@ -0,0 +1,274 @@
+import { openBlock as s, createElementBlock as i, normalizeClass as h, createCommentVNode as r, createElementVNode as d, renderSlot as u, toDisplayString as m, createBlock as C, Teleport as B, createVNode as p, Transition as g, withCtx as f, withModifiers as S, normalizeStyle as w, createTextVNode as v } from "vue";
+const x = (e, t) => {
+  const a = e.__vccOpts || e;
+  for (const [o, n] of t)
+    a[o] = n;
+  return a;
+}, I = ["disabled"], V = {
+  key: 0,
+  class: "xp-button__loading"
+}, T = { class: "xp-button__text" }, z = {
+  __name: "Button",
+  props: {
+    type: {
+      type: String,
+      default: "default",
+      validator: (e) => ["primary", "default", "success", "warning", "danger"].includes(e)
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: (e) => ["small", "medium", "large"].includes(e)
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    loading: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["click"],
+  setup(e, { emit: t }) {
+    const a = e, o = t, n = (c) => {
+      !a.disabled && !a.loading && o("click", c);
+    };
+    return (c, l) => (s(), i("button", {
+      class: h(["xp-button", [
+        `xp-button--${e.type}`,
+        `xp-button--${e.size}`,
+        {
+          "xp-button--disabled": e.disabled,
+          "xp-button--loading": e.loading
+        }
+      ]]),
+      disabled: e.disabled || e.loading,
+      onClick: n
+    }, [
+      e.loading ? (s(), i("span", V)) : r("", !0),
+      d("span", T, [
+        u(c.$slots, "default", {}, void 0, !0)
+      ])
+    ], 10, I));
+  }
+}, _ = /* @__PURE__ */ x(z, [["__scopeId", "data-v-8bb35629"]]), M = {
+  key: 0,
+  class: "xp-input__prefix"
+}, N = ["type", "value", "placeholder", "disabled"], O = {
+  key: 1,
+  class: "xp-input__suffix"
+}, X = {
+  __name: "Input",
+  props: {
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    type: {
+      type: String,
+      default: "text",
+      validator: (e) => ["text", "password", "number"].includes(e)
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: (e) => ["small", "medium", "large"].includes(e)
+    }
+  },
+  emits: ["update:modelValue", "focus", "blur"],
+  setup(e, { emit: t }) {
+    const a = t, o = (l) => {
+      a("update:modelValue", l.target.value);
+    }, n = (l) => {
+      a("focus", l);
+    }, c = (l) => {
+      a("blur", l);
+    };
+    return (l, y) => (s(), i("div", {
+      class: h(["xp-input", [
+        `xp-input--${e.size}`,
+        {
+          "xp-input--disabled": e.disabled,
+          "xp-input--prefix": l.$slots.prefix,
+          "xp-input--suffix": l.$slots.suffix
+        }
+      ]])
+    }, [
+      l.$slots.prefix ? (s(), i("span", M, [
+        u(l.$slots, "prefix", {}, void 0, !0)
+      ])) : r("", !0),
+      d("input", {
+        class: "xp-input__inner",
+        type: e.type,
+        value: e.modelValue,
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        onInput: o,
+        onFocus: n,
+        onBlur: c
+      }, null, 40, N),
+      l.$slots.suffix ? (s(), i("span", O, [
+        u(l.$slots, "suffix", {}, void 0, !0)
+      ])) : r("", !0)
+    ], 2));
+  }
+}, D = /* @__PURE__ */ x(X, [["__scopeId", "data-v-d69c9b60"]]), E = {
+  key: 0,
+  class: "xp-card__header"
+}, F = { class: "xp-card__title" }, j = { class: "xp-card__body" }, q = {
+  key: 1,
+  class: "xp-card__footer"
+}, A = {
+  __name: "Card",
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    shadow: {
+      type: String,
+      default: "always",
+      validator: (e) => ["always", "hover", "never"].includes(e)
+    }
+  },
+  setup(e) {
+    return (t, a) => (s(), i("div", {
+      class: h(["xp-card", [
+        `xp-card--${e.shadow}`
+      ]])
+    }, [
+      e.title || t.$slots.header ? (s(), i("div", E, [
+        u(t.$slots, "header", {}, () => [
+          d("h3", F, m(e.title), 1)
+        ], !0)
+      ])) : r("", !0),
+      d("div", j, [
+        u(t.$slots, "default", {}, void 0, !0)
+      ]),
+      t.$slots.footer ? (s(), i("div", q, [
+        u(t.$slots, "footer", {}, void 0, !0)
+      ])) : r("", !0)
+    ], 2));
+  }
+}, G = /* @__PURE__ */ x(A, [["__scopeId", "data-v-60989cba"]]), H = { class: "xp-dialog__header" }, J = { class: "xp-dialog__title" }, K = { class: "xp-dialog__body" }, L = { class: "xp-dialog__footer" }, P = {
+  __name: "Dialog",
+  props: {
+    visible: {
+      type: Boolean,
+      default: !1
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    width: {
+      type: String,
+      default: "500px"
+    },
+    confirmButtonText: {
+      type: String,
+      default: "确定"
+    },
+    cancelButtonText: {
+      type: String,
+      default: "取消"
+    },
+    closeOnClickModal: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: ["confirm", "cancel", "update:visible"],
+  setup(e, { emit: t }) {
+    const a = e, o = t, n = () => {
+      o("update:visible", !1);
+    }, c = () => {
+      a.closeOnClickModal && n();
+    }, l = () => {
+      o("confirm"), n();
+    }, y = () => {
+      o("cancel"), n();
+    };
+    return (k, b) => (s(), C(B, { to: "body" }, [
+      p(g, { name: "xp-dialog-fade" }, {
+        default: f(() => [
+          e.visible ? (s(), i("div", {
+            key: 0,
+            class: "xp-dialog__wrapper",
+            onClick: S(c, ["self"])
+          }, [
+            b[0] || (b[0] = d("div", { class: "xp-dialog__mask" }, null, -1)),
+            p(g, { name: "xp-dialog-slide" }, {
+              default: f(() => [
+                e.visible ? (s(), i("div", {
+                  key: 0,
+                  class: "xp-dialog",
+                  style: w({ width: e.width })
+                }, [
+                  d("div", H, [
+                    d("h3", J, m(e.title), 1),
+                    d("button", {
+                      class: "xp-dialog__close",
+                      onClick: n
+                    }, " × ")
+                  ]),
+                  d("div", K, [
+                    u(k.$slots, "default", {}, void 0, !0)
+                  ]),
+                  d("div", L, [
+                    p(_, { onClick: y }, {
+                      default: f(() => [
+                        v(m(e.cancelButtonText), 1)
+                      ]),
+                      _: 1
+                    }),
+                    p(_, {
+                      type: "primary",
+                      onClick: l
+                    }, {
+                      default: f(() => [
+                        v(m(e.confirmButtonText), 1)
+                      ]),
+                      _: 1
+                    })
+                  ])
+                ], 4)) : r("", !0)
+              ]),
+              _: 3
+            })
+          ])) : r("", !0)
+        ]),
+        _: 3
+      })
+    ]));
+  }
+}, Q = /* @__PURE__ */ x(P, [["__scopeId", "data-v-7015aab1"]]), $ = {
+  XpButton: _,
+  XpInput: D,
+  XpCard: G,
+  XpDialog: Q
+}, R = (e) => {
+  Object.entries($).forEach(([t, a]) => {
+    e.component(t, a);
+  });
+}, W = {
+  install: R,
+  ...$
+};
+export {
+  _ as XpButton,
+  G as XpCard,
+  Q as XpDialog,
+  D as XpInput,
+  W as default,
+  R as install
+};

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@cghbcf/xp-ui",
+  "version": "1.0.0",
+  "description": "Vue3 component library - A modern UI component library for Vue 3",
+  "keywords": ["vue", "vue3", "component", "ui", "library"],
+  "author": "Xp UI Team",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/xp-ui.cjs.js",
+  "module": "dist/xp-ui.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/xp-ui.es.js",
+      "require": "./dist/xp-ui.cjs.js"
+    },
+    "./style.css": "./dist/style.css",
+    "./dist/style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "vite": "^5.2.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "sass": "^1.71.0",
+    "vitepress": "^1.0.0"
+  }
+}