wshisbadboy-ui-lib 0.1.0

package/dist/my-ui-lib.es.js

@@ -0,0 +1,590 @@
+import { useSlots as I, computed as B, openBlock as t, createElementBlock as s, normalizeClass as M, createCommentVNode as r, renderSlot as p, createTextVNode as S, toDisplayString as _, ref as k, watch as T, provide as O, inject as z, onMounted as V, onBeforeUnmount as L, createElementVNode as i, normalizeStyle as N, nextTick as j, createBlock as A, Transition as D, withCtx as F, resolveDynamicComponent as q, Fragment as E, renderList as H, createApp as R } from "vue";
+const U = ["disabled", "type"], G = {
+  key: 0,
+  class: "my-btn__loader"
+}, J = {
+  key: 1,
+  class: "my-btn__icon"
+}, K = {
+  key: 2,
+  class: "my-btn__text"
+}, P = {
+  name: "MyButton"
+}, Q = /* @__PURE__ */ Object.assign(P, {
+  props: {
+    variant: {
+      type: String,
+      default: "primary",
+      validator: (e) => ["primary", "secondary", "outline", "text"].includes(e)
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: (e) => ["small", "medium", "large"].includes(e)
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    nativeType: {
+      type: String,
+      default: "button"
+    },
+    icon: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["click"],
+  setup(e, { emit: l }) {
+    const a = l, u = I(), o = B(() => !!u.default), n = B(() => !o.value);
+    function d(c) {
+      a("click", c);
+    }
+    return (c, g) => (t(), s("button", {
+      class: M([
+        "my-btn",
+        `my-btn--${e.variant}`,
+        `my-btn--${e.size}`,
+        {
+          "my-btn--loading": e.loading,
+          "my-btn--icon-only": n.value
+        }
+      ]),
+      disabled: e.disabled || e.loading,
+      type: e.nativeType,
+      onClick: d
+    }, [
+      e.loading ? (t(), s("span", G)) : r("", !0),
+      e.icon && !e.loading ? (t(), s("span", J, [
+        p(c.$slots, "icon", {}, () => [
+          S(_(e.icon), 1)
+        ])
+      ])) : r("", !0),
+      o.value && !n.value ? (t(), s("span", K, [
+        p(c.$slots, "default")
+      ])) : r("", !0)
+    ], 10, U));
+  }
+}), W = { class: "my-collapse" }, X = {
+  name: "MyCollapse"
+}, $ = /* @__PURE__ */ Object.assign(X, {
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    accordion: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: l }) {
+    const a = e, u = l, o = k([...a.modelValue]);
+    return T(
+      () => a.modelValue,
+      (n) => {
+        o.value = [...n];
+      }
+    ), O("collapse", {
+      activeNames: o,
+      accordion: a.accordion,
+      onItemToggle(n) {
+        const d = o.value.indexOf(n);
+        d > -1 ? o.value.splice(d, 1) : a.accordion ? o.value = [n] : o.value.push(n), u("update:modelValue", [...o.value]);
+      }
+    }), (n, d) => (t(), s("div", W, [
+      p(n.$slots, "default")
+    ]));
+  }
+}), Y = ["disabled"], Z = { class: "my-collapse-item__title" }, ee = {
+  name: "MyCollapseItem"
+}, C = /* @__PURE__ */ Object.assign(ee, {
+  props: {
+    title: { type: String, default: "" },
+    name: { type: [String, Number], required: !0 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const l = z("collapse", null), a = e, u = k(null), o = k("0");
+    let n = null;
+    const d = B(() => l ? l.activeNames.value.includes(a.name) : !1);
+    function c() {
+      return u.value ? u.value.scrollHeight : 0;
+    }
+    function g() {
+      a.disabled || !l || l.onItemToggle(a.name);
+    }
+    async function y() {
+      var w;
+      o.value = "auto", await j();
+      const f = c();
+      o.value = "0", (w = u.value) == null || w.scrollHeight, requestAnimationFrame(() => {
+        o.value = f + "px";
+      });
+    }
+    function m() {
+      const f = c();
+      o.value = f + "px", requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          o.value = "0";
+        });
+      });
+    }
+    return T(d, (f) => {
+      f ? y() : m();
+    }), V(() => {
+      d.value && (o.value = "auto"), u.value && (n = new ResizeObserver(() => {
+        if (d.value && o.value !== "auto") {
+          const f = c();
+          f > 0 && (o.value = f + "px");
+        }
+      }), n.observe(u.value));
+    }), L(() => {
+      n && n.disconnect();
+    }), (f, w) => (t(), s("div", {
+      class: M(["my-collapse-item", { "is-active": d.value, "is-disabled": e.disabled }])
+    }, [
+      i("button", {
+        class: "my-collapse-item__header",
+        disabled: e.disabled,
+        onClick: g
+      }, [
+        i("span", Z, [
+          p(f.$slots, "title", {}, () => [
+            S(_(e.title), 1)
+          ])
+        ]),
+        w[0] || (w[0] = i("span", { class: "my-collapse-item__arrow" }, [
+          i("svg", {
+            viewBox: "0 0 24 24",
+            width: "16",
+            height: "16",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2"
+          }, [
+            i("path", { d: "M6 9l6 6 6-6" })
+          ])
+        ], -1))
+      ], 8, Y),
+      i("div", {
+        class: "my-collapse-item__wrap",
+        style: N({ height: o.value })
+      }, [
+        i("div", {
+          class: "my-collapse-item__content",
+          ref_key: "contentRef",
+          ref: u
+        }, [
+          p(f.$slots, "default")
+        ], 512)
+      ], 4)
+    ], 2));
+  }
+});
+$.install = (e) => {
+  e.component($.name, $);
+};
+C.install = (e) => {
+  e.component(C.name, C);
+};
+const te = {
+  key: 0,
+  class: "my-alert__icon"
+}, se = {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, ne = {
+  key: 0,
+  d: "M22 11.08V12a10 10 0 11-5.93-9.14"
+}, le = {
+  key: 1,
+  points: "22 4 12 14.01 9 11.01"
+}, oe = {
+  key: 2,
+  d: "M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
+}, ie = {
+  key: 3,
+  x1: "12",
+  y1: "9",
+  x2: "12",
+  y2: "13"
+}, ae = {
+  key: 4,
+  x1: "12",
+  y1: "17",
+  x2: "12.01",
+  y2: "17"
+}, re = {
+  key: 5,
+  cx: "12",
+  cy: "12",
+  r: "10"
+}, ce = {
+  key: 6,
+  x1: "15",
+  y1: "9",
+  x2: "9",
+  y2: "15"
+}, ue = {
+  key: 7,
+  x1: "9",
+  y1: "9",
+  x2: "15",
+  y2: "15"
+}, de = {
+  key: 8,
+  cx: "12",
+  cy: "12",
+  r: "10"
+}, ye = {
+  key: 9,
+  x1: "12",
+  y1: "16",
+  x2: "12",
+  y2: "12"
+}, me = {
+  key: 10,
+  x1: "12",
+  y1: "8",
+  x2: "12.01",
+  y2: "8"
+}, fe = { class: "my-alert__body" }, ge = {
+  key: 0,
+  class: "my-alert__title"
+}, he = {
+  key: 1,
+  class: "my-alert__desc"
+}, ve = {
+  name: "MyAlert"
+}, pe = /* @__PURE__ */ Object.assign(ve, {
+  props: {
+    type: {
+      type: String,
+      default: "info",
+      validator: (e) => ["info", "success", "warning", "error"].includes(e)
+    },
+    title: { type: String, default: "" },
+    description: { type: String, default: "" },
+    closable: { type: Boolean, default: !0 },
+    showIcon: { type: Boolean, default: !0 }
+  },
+  emits: ["close"],
+  setup(e, { emit: l }) {
+    const a = l, u = k(!0);
+    function o() {
+      u.value = !1, a("close");
+    }
+    return (n, d) => u.value ? (t(), s("div", {
+      key: 0,
+      class: M(["my-alert", `my-alert--${e.type}`]),
+      role: "alert"
+    }, [
+      e.showIcon ? (t(), s("span", te, [
+        p(n.$slots, "icon", {}, () => [
+          (t(), s("svg", se, [
+            e.type === "success" ? (t(), s("path", ne)) : r("", !0),
+            e.type === "success" ? (t(), s("polyline", le)) : r("", !0),
+            e.type === "warning" ? (t(), s("path", oe)) : r("", !0),
+            e.type === "warning" ? (t(), s("line", ie)) : r("", !0),
+            e.type === "warning" ? (t(), s("line", ae)) : r("", !0),
+            e.type === "error" ? (t(), s("circle", re)) : r("", !0),
+            e.type === "error" ? (t(), s("line", ce)) : r("", !0),
+            e.type === "error" ? (t(), s("line", ue)) : r("", !0),
+            e.type === "info" ? (t(), s("circle", de)) : r("", !0),
+            e.type === "info" ? (t(), s("line", ye)) : r("", !0),
+            e.type === "info" ? (t(), s("line", me)) : r("", !0)
+          ]))
+        ])
+      ])) : r("", !0),
+      i("div", fe, [
+        e.title || n.$slots.title ? (t(), s("span", ge, [
+          p(n.$slots, "title", {}, () => [
+            S(_(e.title), 1)
+          ])
+        ])) : r("", !0),
+        n.$slots.default || e.description ? (t(), s("p", he, [
+          p(n.$slots, "default", {}, () => [
+            S(_(e.description), 1)
+          ])
+        ])) : r("", !0)
+      ]),
+      e.closable ? (t(), s("button", {
+        key: 1,
+        class: "my-alert__close",
+        onClick: o,
+        "aria-label": "关闭"
+      }, [...d[0] || (d[0] = [
+        i("svg", {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2"
+        }, [
+          i("line", {
+            x1: "18",
+            y1: "6",
+            x2: "6",
+            y2: "18"
+          }),
+          i("line", {
+            x1: "6",
+            y1: "6",
+            x2: "18",
+            y2: "18"
+          })
+        ], -1)
+      ])])) : r("", !0)
+    ], 2)) : r("", !0);
+  }
+}), xe = { class: "my-message__icon" }, ke = {
+  key: 0,
+  width: "16",
+  height: "16",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, we = {
+  key: 1,
+  width: "16",
+  height: "16",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, _e = {
+  key: 2,
+  width: "16",
+  height: "16",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, be = {
+  key: 3,
+  width: "16",
+  height: "16",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, $e = {
+  key: 0,
+  class: "my-message__text"
+}, Ce = {
+  name: "MyMessage"
+}, h = /* @__PURE__ */ Object.assign(Ce, {
+  props: {
+    type: {
+      type: String,
+      default: "info"
+    },
+    message: { type: [String, Function], default: "" },
+    duration: { type: Number, default: 3e3 },
+    showClose: { type: Boolean, default: !1 }
+  },
+  emits: ["destroy"],
+  setup(e, { emit: l }) {
+    const a = e, u = l, o = k(!0);
+    let n = null;
+    const d = B(() => typeof a.message == "string");
+    function c() {
+      o.value = !1, n && clearTimeout(n), u("destroy");
+    }
+    function g() {
+      a.duration > 0 && (n = setTimeout(() => {
+        o.value = !1;
+      }, a.duration));
+    }
+    return V(() => {
+      g();
+    }), (y, m) => (t(), A(D, {
+      name: "my-message-fade",
+      onAfterLeave: m[0] || (m[0] = (f) => y.$emit("destroy"))
+    }, {
+      default: F(() => [
+        o.value ? (t(), s("div", {
+          key: 0,
+          class: M(["my-message", `my-message--${e.type}`]),
+          role: "alert"
+        }, [
+          i("span", xe, [
+            e.type === "success" ? (t(), s("svg", ke, [...m[1] || (m[1] = [
+              i("path", { d: "M22 11.08V12a10 10 0 11-5.93-9.14" }, null, -1),
+              i("polyline", { points: "22 4 12 14.01 9 11.01" }, null, -1)
+            ])])) : e.type === "warning" ? (t(), s("svg", we, [...m[2] || (m[2] = [
+              i("path", { d: "M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" }, null, -1),
+              i("line", {
+                x1: "12",
+                y1: "9",
+                x2: "12",
+                y2: "13"
+              }, null, -1),
+              i("line", {
+                x1: "12",
+                y1: "17",
+                x2: "12.01",
+                y2: "17"
+              }, null, -1)
+            ])])) : e.type === "error" ? (t(), s("svg", _e, [...m[3] || (m[3] = [
+              i("circle", {
+                cx: "12",
+                cy: "12",
+                r: "10"
+              }, null, -1),
+              i("line", {
+                x1: "15",
+                y1: "9",
+                x2: "9",
+                y2: "15"
+              }, null, -1),
+              i("line", {
+                x1: "9",
+                y1: "9",
+                x2: "15",
+                y2: "15"
+              }, null, -1)
+            ])])) : (t(), s("svg", be, [...m[4] || (m[4] = [
+              i("circle", {
+                cx: "12",
+                cy: "12",
+                r: "10"
+              }, null, -1),
+              i("line", {
+                x1: "12",
+                y1: "16",
+                x2: "12",
+                y2: "12"
+              }, null, -1),
+              i("line", {
+                x1: "12",
+                y1: "8",
+                x2: "12.01",
+                y2: "8"
+              }, null, -1)
+            ])]))
+          ]),
+          d.value ? (t(), s("span", $e, _(e.message), 1)) : (t(), A(q(e.message), {
+            key: 1,
+            class: "my-message__text"
+          })),
+          e.showClose ? (t(), s("button", {
+            key: 2,
+            class: "my-message__close",
+            onClick: c,
+            "aria-label": "关闭"
+          }, [...m[5] || (m[5] = [
+            i("svg", {
+              width: "12",
+              height: "12",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              i("line", {
+                x1: "18",
+                y1: "6",
+                x2: "6",
+                y2: "18"
+              }),
+              i("line", {
+                x1: "6",
+                y1: "6",
+                x2: "18",
+                y2: "18"
+              })
+            ], -1)
+          ])])) : r("", !0)
+        ], 2)) : r("", !0)
+      ]),
+      _: 1
+    }));
+  }
+}), Be = { class: "my-message-container" }, Se = {
+  __name: "MessageList",
+  setup(e, { expose: l }) {
+    const a = k([]);
+    let u = 0;
+    function o(c) {
+      const g = ++u, y = {
+        id: g,
+        type: c.type || "info",
+        message: c.message || "",
+        duration: c.duration ?? 3e3,
+        showClose: c.showClose ?? !1
+      };
+      return a.value.push(y), y.duration > 0 && setTimeout(() => n(g), y.duration + 300), g;
+    }
+    function n(c) {
+      const g = a.value.findIndex((y) => y.id === c);
+      g > -1 && a.value.splice(g, 1);
+    }
+    function d() {
+      a.value = [];
+    }
+    return l({ add: o, remove: n, clear: d }), (c, g) => (t(), s("div", Be, [
+      (t(!0), s(E, null, H(a.value, (y, m) => (t(), A(h, {
+        key: y.id,
+        type: y.type,
+        message: y.message,
+        duration: y.duration,
+        "show-close": y.showClose,
+        onDestroy: (f) => n(y.id)
+      }, null, 8, ["type", "message", "duration", "show-close", "onDestroy"]))), 128))
+    ]));
+  }
+};
+let x = null;
+function Me() {
+  if (x) return x;
+  const e = document.createElement("div");
+  return document.body.appendChild(e), x = R(Se).mount(e), x;
+}
+function b(e) {
+  const l = typeof e == "string" ? { message: e, type: "info" } : e;
+  return Me().add(l);
+}
+const v = (e) => b(e);
+v.info = (e, l) => b({ message: e, type: "info", duration: l });
+v.success = (e, l) => b({ message: e, type: "success", duration: l });
+v.warning = (e, l) => b({ message: e, type: "warning", duration: l });
+v.error = (e, l) => b({ message: e, type: "error", duration: l });
+v.closeAll = () => {
+  x && x.clear();
+};
+h.install = (e) => {
+  e.component(h.name, h);
+};
+h.success = v.success;
+h.error = v.error;
+h.warning = v.warning;
+h.info = v.info;
+h.closeAll = v.closeAll;
+const Ae = [Q, $, C, pe, h], Te = (e) => {
+  Ae.forEach((l) => {
+    e.component(l.name, l);
+  });
+}, Ie = { install: Te };
+export {
+  pe as Alert,
+  Q as Button,
+  $ as Collapse,
+  C as CollapseItem,
+  h as Message,
+  Ie as default,
+  Te as install
+};

package/dist/my-ui-lib.umd.js

@@ -0,0 +1 @@
+(function(m,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(m=typeof globalThis<"u"?globalThis:m||self,e(m.MyUiLib={},m.Vue))})(this,(function(m,e){"use strict";const N=["disabled","type"],w={key:0,class:"my-btn__loader"},C={key:1,class:"my-btn__icon"},b={key:2,class:"my-btn__text"},E=Object.assign({name:"MyButton"},{props:{variant:{type:String,default:"primary",validator:t=>["primary","secondary","outline","text"].includes(t)},size:{type:String,default:"medium",validator:t=>["small","medium","large"].includes(t)},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},nativeType:{type:String,default:"button"},icon:{type:String,default:""}},emits:["click"],setup(t,{emit:n}){const a=n,c=e.useSlots(),l=e.computed(()=>!!c.default),o=e.computed(()=>!l.value);function i(s){a("click",s)}return(s,f)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["my-btn",`my-btn--${t.variant}`,`my-btn--${t.size}`,{"my-btn--loading":t.loading,"my-btn--icon-only":o.value}]),disabled:t.disabled||t.loading,type:t.nativeType,onClick:i},[t.loading?(e.openBlock(),e.createElementBlock("span",w)):e.createCommentVNode("",!0),t.icon&&!t.loading?(e.openBlock(),e.createElementBlock("span",C,[e.renderSlot(s.$slots,"icon",{},()=>[e.createTextVNode(e.toDisplayString(t.icon),1)])])):e.createCommentVNode("",!0),l.value&&!o.value?(e.openBlock(),e.createElementBlock("span",b,[e.renderSlot(s.$slots,"default")])):e.createCommentVNode("",!0)],10,N))}}),$={class:"my-collapse"},h=Object.assign({name:"MyCollapse"},{props:{modelValue:{type:Array,default:()=>[]},accordion:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(t,{emit:n}){const a=t,c=n,l=e.ref([...a.modelValue]);return e.watch(()=>a.modelValue,o=>{l.value=[...o]}),e.provide("collapse",{activeNames:l,accordion:a.accordion,onItemToggle(o){const i=l.value.indexOf(o);i>-1?l.value.splice(i,1):a.accordion?l.value=[o]:l.value.push(o),c("update:modelValue",[...l.value])}}),(o,i)=>(e.openBlock(),e.createElementBlock("div",$,[e.renderSlot(o.$slots,"default")]))}}),S=["disabled"],M={class:"my-collapse-item__title"},u=Object.assign({name:"MyCollapseItem"},{props:{title:{type:String,default:""},name:{type:[String,Number],required:!0},disabled:{type:Boolean,default:!1}},setup(t){const n=e.inject("collapse",null),a=t,c=e.ref(null),l=e.ref("0");let o=null;const i=e.computed(()=>n?n.activeNames.value.includes(a.name):!1);function s(){return c.value?c.value.scrollHeight:0}function f(){a.disabled||!n||n.onItemToggle(a.name)}async function r(){var _;l.value="auto",await e.nextTick();const y=s();l.value="0",(_=c.value)==null||_.scrollHeight,requestAnimationFrame(()=>{l.value=y+"px"})}function d(){const y=s();l.value=y+"px",requestAnimationFrame(()=>{requestAnimationFrame(()=>{l.value="0"})})}return e.watch(i,y=>{y?r():d()}),e.onMounted(()=>{i.value&&(l.value="auto"),c.value&&(o=new ResizeObserver(()=>{if(i.value&&l.value!=="auto"){const y=s();y>0&&(l.value=y+"px")}}),o.observe(c.value))}),e.onBeforeUnmount(()=>{o&&o.disconnect()}),(y,_)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["my-collapse-item",{"is-active":i.value,"is-disabled":t.disabled}])},[e.createElementVNode("button",{class:"my-collapse-item__header",disabled:t.disabled,onClick:f},[e.createElementVNode("span",M,[e.renderSlot(y.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(t.title),1)])]),_[0]||(_[0]=e.createElementVNode("span",{class:"my-collapse-item__arrow"},[e.createElementVNode("svg",{viewBox:"0 0 24 24",width:"16",height:"16",fill:"none",stroke:"currentColor","stroke-width":"2"},[e.createElementVNode("path",{d:"M6 9l6 6 6-6"})])],-1))],8,S),e.createElementVNode("div",{class:"my-collapse-item__wrap",style:e.normalizeStyle({height:l.value})},[e.createElementVNode("div",{class:"my-collapse-item__content",ref_key:"contentRef",ref:c},[e.renderSlot(y.$slots,"default")],512)],4)],2))}});h.install=t=>{t.component(h.name,h)},u.install=t=>{t.component(u.name,u)};const T={key:0,class:"my-alert__icon"},A={width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},z={key:0,d:"M22 11.08V12a10 10 0 11-5.93-9.14"},O={key:1,points:"22 4 12 14.01 9 11.01"},D={key:2,d:"M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"},I={key:3,x1:"12",y1:"9",x2:"12",y2:"13"},j={key:4,x1:"12",y1:"17",x2:"12.01",y2:"17"},L={key:5,cx:"12",cy:"12",r:"10"},q={key:6,x1:"15",y1:"9",x2:"9",y2:"15"},F={key:7,x1:"9",y1:"9",x2:"15",y2:"15"},H={key:8,cx:"12",cy:"12",r:"10"},R={key:9,x1:"12",y1:"16",x2:"12",y2:"12"},U={key:10,x1:"12",y1:"8",x2:"12.01",y2:"8"},P={class:"my-alert__body"},G={key:0,class:"my-alert__title"},J={key:1,class:"my-alert__desc"},V=Object.assign({name:"MyAlert"},{props:{type:{type:String,default:"info",validator:t=>["info","success","warning","error"].includes(t)},title:{type:String,default:""},description:{type:String,default:""},closable:{type:Boolean,default:!0},showIcon:{type:Boolean,default:!0}},emits:["close"],setup(t,{emit:n}){const a=n,c=e.ref(!0);function l(){c.value=!1,a("close")}return(o,i)=>c.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["my-alert",`my-alert--${t.type}`]),role:"alert"},[t.showIcon?(e.openBlock(),e.createElementBlock("span",T,[e.renderSlot(o.$slots,"icon",{},()=>[(e.openBlock(),e.createElementBlock("svg",A,[t.type==="success"?(e.openBlock(),e.createElementBlock("path",z)):e.createCommentVNode("",!0),t.type==="success"?(e.openBlock(),e.createElementBlock("polyline",O)):e.createCommentVNode("",!0),t.type==="warning"?(e.openBlock(),e.createElementBlock("path",D)):e.createCommentVNode("",!0),t.type==="warning"?(e.openBlock(),e.createElementBlock("line",I)):e.createCommentVNode("",!0),t.type==="warning"?(e.openBlock(),e.createElementBlock("line",j)):e.createCommentVNode("",!0),t.type==="error"?(e.openBlock(),e.createElementBlock("circle",L)):e.createCommentVNode("",!0),t.type==="error"?(e.openBlock(),e.createElementBlock("line",q)):e.createCommentVNode("",!0),t.type==="error"?(e.openBlock(),e.createElementBlock("line",F)):e.createCommentVNode("",!0),t.type==="info"?(e.openBlock(),e.createElementBlock("circle",H)):e.createCommentVNode("",!0),t.type==="info"?(e.openBlock(),e.createElementBlock("line",R)):e.createCommentVNode("",!0),t.type==="info"?(e.openBlock(),e.createElementBlock("line",U)):e.createCommentVNode("",!0)]))])])):e.createCommentVNode("",!0),e.createElementVNode("div",P,[t.title||o.$slots.title?(e.openBlock(),e.createElementBlock("span",G,[e.renderSlot(o.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(t.title),1)])])):e.createCommentVNode("",!0),o.$slots.default||t.description?(e.openBlock(),e.createElementBlock("p",J,[e.renderSlot(o.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.description),1)])])):e.createCommentVNode("",!0)]),t.closable?(e.openBlock(),e.createElementBlock("button",{key:1,class:"my-alert__close",onClick:l,"aria-label":"关闭"},[...i[0]||(i[0]=[e.createElementVNode("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},[e.createElementVNode("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.createElementVNode("line",{x1:"6",y1:"6",x2:"18",y2:"18"})],-1)])])):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0)}}),K={class:"my-message__icon"},Q={key:0,width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},W={key:1,width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},X={key:2,width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},Y={key:3,width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},Z={key:0,class:"my-message__text"},k=Object.assign({name:"MyMessage"},{props:{type:{type:String,default:"info"},message:{type:[String,Function],default:""},duration:{type:Number,default:3e3},showClose:{type:Boolean,default:!1}},emits:["destroy"],setup(t,{emit:n}){const a=t,c=n,l=e.ref(!0);let o=null;const i=e.computed(()=>typeof a.message=="string");function s(){l.value=!1,o&&clearTimeout(o),c("destroy")}function f(){a.duration>0&&(o=setTimeout(()=>{l.value=!1},a.duration))}return e.onMounted(()=>{f()}),(r,d)=>(e.openBlock(),e.createBlock(e.Transition,{name:"my-message-fade",onAfterLeave:d[0]||(d[0]=y=>r.$emit("destroy"))},{default:e.withCtx(()=>[l.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["my-message",`my-message--${t.type}`]),role:"alert"},[e.createElementVNode("span",K,[t.type==="success"?(e.openBlock(),e.createElementBlock("svg",Q,[...d[1]||(d[1]=[e.createElementVNode("path",{d:"M22 11.08V12a10 10 0 11-5.93-9.14"},null,-1),e.createElementVNode("polyline",{points:"22 4 12 14.01 9 11.01"},null,-1)])])):t.type==="warning"?(e.openBlock(),e.createElementBlock("svg",W,[...d[2]||(d[2]=[e.createElementVNode("path",{d:"M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"},null,-1),e.createElementVNode("line",{x1:"12",y1:"9",x2:"12",y2:"13"},null,-1),e.createElementVNode("line",{x1:"12",y1:"17",x2:"12.01",y2:"17"},null,-1)])])):t.type==="error"?(e.openBlock(),e.createElementBlock("svg",X,[...d[3]||(d[3]=[e.createElementVNode("circle",{cx:"12",cy:"12",r:"10"},null,-1),e.createElementVNode("line",{x1:"15",y1:"9",x2:"9",y2:"15"},null,-1),e.createElementVNode("line",{x1:"9",y1:"9",x2:"15",y2:"15"},null,-1)])])):(e.openBlock(),e.createElementBlock("svg",Y,[...d[4]||(d[4]=[e.createElementVNode("circle",{cx:"12",cy:"12",r:"10"},null,-1),e.createElementVNode("line",{x1:"12",y1:"16",x2:"12",y2:"12"},null,-1),e.createElementVNode("line",{x1:"12",y1:"8",x2:"12.01",y2:"8"},null,-1)])]))]),i.value?(e.openBlock(),e.createElementBlock("span",Z,e.toDisplayString(t.message),1)):(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.message),{key:1,class:"my-message__text"})),t.showClose?(e.openBlock(),e.createElementBlock("button",{key:2,class:"my-message__close",onClick:s,"aria-label":"关闭"},[...d[5]||(d[5]=[e.createElementVNode("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},[e.createElementVNode("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.createElementVNode("line",{x1:"6",y1:"6",x2:"18",y2:"18"})],-1)])])):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0)]),_:1}))}}),v={class:"my-message-container"},ee={__name:"MessageList",setup(t,{expose:n}){const a=e.ref([]);let c=0;function l(s){const f=++c,r={id:f,type:s.type||"info",message:s.message||"",duration:s.duration??3e3,showClose:s.showClose??!1};return a.value.push(r),r.duration>0&&setTimeout(()=>o(f),r.duration+300),f}function o(s){const f=a.value.findIndex(r=>r.id===s);f>-1&&a.value.splice(f,1)}function i(){a.value=[]}return n({add:l,remove:o,clear:i}),(s,f)=>(e.openBlock(),e.createElementBlock("div",v,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(r,d)=>(e.openBlock(),e.createBlock(k,{key:r.id,type:r.type,message:r.message,duration:r.duration,"show-close":r.showClose,onDestroy:y=>o(r.id)},null,8,["type","message","duration","show-close","onDestroy"]))),128))]))}};let g=null;function te(){if(g)return g;const t=document.createElement("div");return document.body.appendChild(t),g=e.createApp(ee).mount(t),g}function B(t){const n=typeof t=="string"?{message:t,type:"info"}:t;return te().add(n)}const p=t=>B(t);p.info=(t,n)=>B({message:t,type:"info",duration:n}),p.success=(t,n)=>B({message:t,type:"success",duration:n}),p.warning=(t,n)=>B({message:t,type:"warning",duration:n}),p.error=(t,n)=>B({message:t,type:"error",duration:n}),p.closeAll=()=>{g&&g.clear()},k.install=t=>{t.component(k.name,k)},k.success=p.success,k.error=p.error,k.warning=p.warning,k.info=p.info,k.closeAll=p.closeAll;const oe=[E,h,u,V,k],x=t=>{oe.forEach(n=>{t.component(n.name,n)})},ne={install:x};m.Alert=V,m.Button=E,m.Collapse=h,m.CollapseItem=u,m.Message=k,m.default=ne,m.install=x,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/dist/wshisbadboy-ui-lib.css

@@ -0,0 +1 @@
+.my-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;font-weight:500;border:1px solid transparent;border-radius:6px;cursor:pointer;transition:background-color .15s,border-color .15s,opacity .15s;line-height:1;white-space:nowrap;-webkit-user-select:none;user-select:none}.my-btn--small{padding:6px 12px;font-size:13px;min-height:30px}.my-btn--medium{padding:8px 18px;font-size:14px;min-height:36px}.my-btn--large{padding:10px 24px;font-size:16px;min-height:42px}.my-btn--small.my-btn--icon-only{padding:6px;width:30px}.my-btn--medium.my-btn--icon-only{padding:8px;width:36px}.my-btn--large.my-btn--icon-only{padding:10px;width:42px}.my-btn--primary{background-color:var(--my-primary);color:#fff;border-color:var(--my-primary)}.my-btn--primary:hover:not(:disabled){background-color:var(--my-primary-hover);border-color:var(--my-primary-hover)}.my-btn--primary:active:not(:disabled){background-color:var(--my-primary-active)}.my-btn--secondary{background-color:var(--my-btn-secondary-bg);color:var(--my-text);border-color:var(--my-btn-secondary-border)}.my-btn--secondary:hover:not(:disabled){background-color:var(--my-btn-secondary-hover)}.my-btn--secondary:active:not(:disabled){background-color:var(--my-btn-secondary-active)}.my-btn--outline{background-color:transparent;color:var(--my-primary);border-color:var(--my-primary)}.my-btn--outline:hover:not(:disabled){background-color:var(--my-primary-light)}.my-btn--outline:active:not(:disabled){background-color:var(--my-primary-lighter)}.my-btn--text{background-color:transparent;color:var(--my-primary);border-color:transparent}.my-btn--text:hover:not(:disabled){background-color:var(--my-btn-text-hover)}.my-btn--text:active:not(:disabled){background-color:var(--my-btn-text-active)}.my-btn:disabled{opacity:.5;cursor:not-allowed}.my-btn__loader{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:my-btn-spin .6s linear infinite;flex-shrink:0}@keyframes my-btn-spin{to{transform:rotate(360deg)}}.my-btn__icon{display:inline-flex;align-items:center;flex-shrink:0}.my-btn__text{display:inline-flex;align-items:center}.my-collapse{border:1px solid var(--my-border);border-radius:6px;overflow:hidden}.my-collapse-item{border-bottom:1px solid var(--my-border)}.my-collapse-item:last-child{border-bottom:none}.my-collapse-item__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 16px;border:none;background:var(--my-bg);font-size:14px;font-weight:500;color:var(--my-text);cursor:pointer;transition:background-color .15s;line-height:1.4;text-align:left;font-family:inherit}.my-collapse-item__header:hover:not(:disabled){background-color:var(--my-bg-soft)}.my-collapse-item__header:disabled{cursor:not-allowed;opacity:.5}.my-collapse-item__title{flex:1}.my-collapse-item__arrow{display:inline-flex;flex-shrink:0;margin-left:8px;color:var(--my-text-muted);transition:transform .3s}.my-collapse-item.is-active .my-collapse-item__arrow{transform:rotate(180deg)}.my-collapse-item__wrap{overflow:hidden;transition:height .3s ease;background:var(--my-bg);will-change:height}.my-collapse-item__content{padding:0 16px 16px;font-size:14px;color:var(--my-text-soft);line-height:1.6}.my-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-radius:8px;font-size:14px;line-height:1.6;position:relative;border:1px solid transparent}.my-alert--info{background-color:#eff6ff;border-color:#93c5fd;color:#1e40af}.my-alert--info .my-alert__desc{color:#3b5998}.my-alert--success{background-color:#f0fdf4;border-color:#86efac;color:#166534}.my-alert--success .my-alert__desc{color:#3a7d44}.my-alert--warning{background-color:#fffbeb;border-color:#fcd34d;color:#92400e}.my-alert--warning .my-alert__desc{color:#a16207}.my-alert--error{background-color:#fef2f2;border-color:#fca5a5;color:#991b1b}.my-alert--error .my-alert__desc{color:#b91c1c}.my-alert__icon{display:inline-flex;align-items:center;flex-shrink:0;padding-top:1px}.my-alert__body{flex:1;min-width:0}.my-alert__title{display:block;font-weight:600;margin-bottom:2px}.my-alert__desc{margin:0;font-size:13px}.my-alert__close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;border:none;background:transparent;color:inherit;opacity:.6;cursor:pointer;border-radius:4px;transition:opacity .15s,background-color .15s;padding:0;margin-top:1px}.my-alert__close:hover{opacity:1;background-color:#0000000f}.my-message{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;font-size:14px;line-height:1.5;box-shadow:0 4px 12px #0000001a;pointer-events:auto;background:#fff;border:1px solid var(--my-border, #e5e7eb);color:var(--my-text, #1f2937);min-width:200px;max-width:420px;margin-bottom:8px}.my-message--info{border-left:3px solid #3b82f6}.my-message--success{border-left:3px solid #22c55e}.my-message--warning{border-left:3px solid #f59e0b}.my-message--error{border-left:3px solid #ef4444}.my-message__icon{display:inline-flex;flex-shrink:0;color:var(--my-text-muted, #9ca3af)}.my-message--info .my-message__icon{color:#3b82f6}.my-message--success .my-message__icon{color:#22c55e}.my-message--warning .my-message__icon{color:#f59e0b}.my-message--error .my-message__icon{color:#ef4444}.my-message__text{flex:1;word-break:break-word}.my-message__close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;height:18px;border:none;background:transparent;color:inherit;opacity:.5;cursor:pointer;border-radius:4px;padding:0}.my-message__close:hover{opacity:1;background-color:#0000000f}.my-message-fade-enter-active{transition:all .25s ease}.my-message-fade-leave-active{transition:all .2s ease}.my-message-fade-enter-from{opacity:0;transform:translateY(-12px)}.my-message-fade-leave-to{opacity:0;transform:translateY(-8px)}.my-message-container{position:fixed;top:20px;left:50%;transform:translate(-50%);z-index:9999;display:flex;flex-direction:column;align-items:center;pointer-events:none}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "wshisbadboy-ui-lib",
+  "version": "0.1.0",
+  "description": "A lightweight Vue 3 component library with Button, Alert, Message, and Collapse components.",
+  "type": "module",
+  "license": "MIT",
+  "author": "wshisbadboy",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wshisbadboy/UI-vitepress"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "component",
+    "ui-library",
+    "button",
+    "alert",
+    "message",
+    "collapse"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:lib": "vite build --config vite.config.lib.js",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "main": "./dist/my-ui-lib.umd.js",
+  "module": "./dist/my-ui-lib.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/my-ui-lib.es.js",
+      "require": "./dist/my-ui-lib.umd.js"
+    },
+    "./dist/*": "./dist/*"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.3",
+    "vite": "^6.3.5"
+  }
+}