jky-component-lib 0.0.6 → 0.0.9

package/dist/umd/index.js

@@ -1,2 +1,172 @@
-(function(n,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(n=typeof globalThis<"u"?globalThis:n||self,t(n.StarterLibVue3={},n.Vue))})(this,function(n,t){"use strict";var s=document.createElement("style");s.textContent=`.jky-component-lib-say-hello{background:#42b883;color:#fff;padding:8px 20px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;margin:4px 2px;cursor:pointer;border-radius:6px}
-/*$vite$:1*/`,document.head.appendChild(s);const f="0.0.6",c=Symbol("INSTALLED_KEY");function d(e=[]){return{install:l=>{l[c]||(l[c]=!0,e.forEach(o=>l.use(o)))},version:f}}function p(e,r){return e.install=l=>{for(const o of[e,...Object.values({})])l.component(o.name,o)},e}const a=p(t.defineComponent({name:"StSayHello",__name:"SayHello",props:{name:{}},setup(e){function r(){alert(`Hello, ${e.name}!`)}return(l,o)=>(t.openBlock(),t.createElementBlock("button",{class:"jky-component-lib-say-hello",onClick:o[0]||(o[0]=_=>r())}," Say, hi! "))}})),u=[a];function m(e){return e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase().replace(/\s+/g,"-")}function y(){return{type:"component",resolve:e=>{if(e.match(/^St[A-Z]/))return{name:e,from:"jky-component-lib",sideEffects:[`jky-component-lib/dist/es/${m(e.replace("St",""))}/style.css`]}}}}const i=d(u),S=i.install,b=i.version;n.StSayHello=a,n.StarterLibVue3Resolver=y,n.components=u,n.default=i,n.install=S,n.version=b,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("element-plus")) : typeof define === "function" && define.amd ? define(["exports", "vue", "element-plus"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.JkyComponentLib = {}, global.Vue, global.ElementPlus));
+})(this, (function(exports2, vue, ElementPlus) {
+  "use strict";var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+  var __vite_style__ = document.createElement("style");
+  __vite_style__.textContent = "/* Button 组件样式 - 使用 TailwindCSS 4.x */\n@reference '../styles.css';\n.jky-button {\n  /* 使用 TailwindCSS 工具类 */\n@apply inline-flex items-center justify-center font-medium rounded-md transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;\n  \n  /* 使用 CSS 变量 */\n  background-color: var(--color-primary);\n  color: var(--color-primary-foreground);\n  border: 1px solid transparent;\n  cursor: pointer;\n  \n  /* 默认尺寸 */\n  --button-height: 40px;\n  --button-padding: 0 16px;\n  --button-font-size: 14px;\n  \n  height: var(--button-height);\n  padding: var(--button-padding);\n  font-size: var(--button-font-size);\n}\n\n/* 按钮类型 */\n.jky-button--primary {\n  background-color: var(--color-primary);\n  color: var(--color-primary-foreground);\n}\n.jky-button--primary:hover {\n  background-color: color-mix(in srgb, var(--color-primary), black 10%);\n}\n.jky-button--success {\n  background-color: var(--color-success);\n  color: var(--color-success-foreground);\n}\n.jky-button--success:hover {\n  background-color: color-mix(in srgb, var(--color-success), black 10%);\n}\n.jky-button--warning {\n  background-color: var(--color-warning);\n  color: var(--color-warning-foreground);\n}\n.jky-button--warning:hover {\n  background-color: color-mix(in srgb, var(--color-warning), black 10%);\n}\n.jky-button--danger {\n  background-color: var(--color-destructive);\n  color: var(--color-destructive-foreground);\n}\n.jky-button--danger:hover {\n  background-color: color-mix(in srgb, var(--color-destructive), black 10%);\n}\n.jky-button--info {\n  background-color: var(--color-muted);\n  color: var(--color-muted-foreground);\n}\n.jky-button--info:hover {\n  background-color: color-mix(in srgb, var(--color-muted), black 10%);\n}\n\n/* 按钮尺寸 */\n.jky-button--large {\n  --button-height: 48px;\n  --button-padding: 0 24px;\n  --button-font-size: 16px;\n}\n.jky-button--default {\n  --button-height: 40px;\n  --button-padding: 0 16px;\n  --button-font-size: 14px;\n}\n.jky-button--small {\n  --button-height: 32px;\n  --button-padding: 0 12px;\n  --button-font-size: 12px;\n}\n\n/* 禁用状态 */\n.jky-button.is-disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* 加载状态 */\n.jky-button.is-loading {\n  position: relative;\n  pointer-events: none;\n}\n.jky-button__loading {\n@apply absolute inset-0 flex items-center justify-center;\n}\n.loading-spinner {\n@apply w-5 h-5 animate-spin;\n}\n\n/* 边框按钮样式 */\n.jky-button--primary.is-border {\n  background-color: transparent;\n  border-color: var(--color-primary);\n  color: var(--color-primary);\n}\n.jky-button--primary.is-border:hover {\n  background-color: color-mix(in srgb, var(--color-primary), transparent 90%);\n}\n\n/* 文字按钮样式 */\n.jky-button--text {\n  background-color: transparent;\n  color: var(--color-primary);\n  border-color: transparent;\n}\n.jky-button--text:hover {\n  background-color: color-mix(in srgb, var(--color-primary), transparent 90%);\n}\n@reference '../styles.css';\n.jky-component-lib-say-hello{\n  background: #42b883;\n  color: white;\n  padding: 8px 20px;\n  text-align: center;\n  text-decoration: none;\n  display: inline-block;\n  font-size: 16px;\n  margin: 4px 2px;\n  cursor: pointer;\n  border-radius: 6px;\n}\n/*$vite$:1*/";
+  document.head.appendChild(__vite_style__);
+  const version$1 = "0.0.9";
+  const INSTALLED_KEY = Symbol("INSTALLED_KEY");
+  function createInstaller(components2 = []) {
+    const install2 = (app, options) => {
+      if (app[INSTALLED_KEY])
+        return;
+      app[INSTALLED_KEY] = true;
+      app.use(ElementPlus, options == null ? void 0 : options.elementPlusOptions);
+      components2.forEach((c) => app.use(c));
+    };
+    return {
+      install: install2,
+      version: version$1
+    };
+  }
+  function installWithSFC(main, extra) {
+    main.install = ((app, ..._options) => {
+      for (const comp of [main, ...Object.values({})]) {
+        if (comp && comp.name) {
+          app.component(comp.name, comp);
+        }
+      }
+      return app;
+    });
+    return main;
+  }
+  const _hoisted_1 = ["disabled"];
+  const _hoisted_2 = {
+    key: 0,
+    class: "jky-button__loading"
+  };
+  const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
+    name: "JkyButton"
+  }), {
+    __name: "Button",
+    props: {
+      type: { default: "primary" },
+      size: { default: "default" },
+      disabled: { type: Boolean, default: false },
+      loading: { type: Boolean, default: false }
+    },
+    emits: ["click"],
+    setup(__props, { emit: __emit }) {
+      const emit = __emit;
+      function handleClick() {
+        if (!__props.disabled && !__props.loading) {
+          emit("click");
+        }
+      }
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("button", {
+          class: vue.normalizeClass(["jky-button", [
+            `jky-button--${__props.type}`,
+            `jky-button--${__props.size}`,
+            {
+              "is-disabled": __props.disabled,
+              "is-loading": __props.loading
+            }
+          ]]),
+          disabled: __props.disabled || __props.loading,
+          onClick: handleClick
+        }, [
+          __props.loading ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [..._cache[0] || (_cache[0] = [
+            vue.createElementVNode("svg", {
+              class: "loading-spinner",
+              viewBox: "0 0 50 50"
+            }, [
+              vue.createElementVNode("circle", {
+                cx: "25",
+                cy: "25",
+                r: "20",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": "4",
+                "stroke-dasharray": "80",
+                "stroke-dashoffset": "0"
+              }, [
+                vue.createElementVNode("animateTransform", {
+                  attributeName: "transform",
+                  type: "rotate",
+                  from: "0 25 25",
+                  to: "360 25 25",
+                  dur: "1s",
+                  repeatCount: "indefinite"
+                })
+              ])
+            ], -1)
+          ])])) : vue.createCommentVNode("", true),
+          vue.renderSlot(_ctx.$slots, "default")
+        ], 10, _hoisted_1);
+      };
+    }
+  }));
+  const JkyButton = installWithSFC(_sfc_main$1);
+  const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
+    name: "JkySayHello"
+  }), {
+    __name: "SayHello",
+    props: {
+      name: {}
+    },
+    setup(__props) {
+      function sayHello() {
+        alert(`Hello, ${__props.name}!`);
+      }
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("button", {
+          class: "jky-component-lib-say-hello",
+          onClick: _cache[0] || (_cache[0] = ($event) => sayHello())
+        }, " Say, hi! ");
+      };
+    }
+  }));
+  const JkySayHello = installWithSFC(_sfc_main);
+  const components = [
+    JkySayHello,
+    JkyButton
+  ];
+  function StarterLibVue3Resolver() {
+    return {
+      type: "component",
+      resolve: (name) => {
+        if (name.match(/^Jky[A-Z]/)) {
+          return {
+            name,
+            from: "jky-component-lib",
+            sideEffects: [
+              `jky-component-lib/dist/es/${name.replace("Jky", "").toLowerCase()}/style.css`
+            ]
+          };
+        }
+      }
+    };
+  }
+  const installer = createInstaller(components);
+  const install = installer.install;
+  const version = installer.version;
+  exports2.JkyButton = JkyButton;
+  exports2.JkySayHello = JkySayHello;
+  exports2.StarterLibVue3Resolver = StarterLibVue3Resolver;
+  exports2.components = components;
+  exports2.default = installer;
+  exports2.install = install;
+  exports2.version = version;
+  Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+}));

package/dist/umd/styles.css

@@ -1 +1 @@
-.jky-component-lib-say-hello{background:#42b883;border-radius:6px;color:#fff;cursor:pointer;display:inline-block;font-size:16px;margin:4px 2px;padding:8px 20px;text-align:center;text-decoration:none}
+.jky-button{@apply inline-flex items-center justify-center font-medium rounded-md transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;background-color:var(--color-primary);border:1px solid transparent;color:var(--color-primary-foreground);cursor:pointer;--button-height:40px;--button-padding:0 16px;--button-font-size:14px;font-size:var(--button-font-size);height:var(--button-height);padding:var(--button-padding)}.jky-button--primary{background-color:var(--color-primary);color:var(--color-primary-foreground)}.jky-button--primary:hover{background-color:color-mix(in srgb,var(--color-primary),#000 10%)}.jky-button--success{background-color:var(--color-success);color:var(--color-success-foreground)}.jky-button--success:hover{background-color:color-mix(in srgb,var(--color-success),#000 10%)}.jky-button--warning{background-color:var(--color-warning);color:var(--color-warning-foreground)}.jky-button--warning:hover{background-color:color-mix(in srgb,var(--color-warning),#000 10%)}.jky-button--danger{background-color:var(--color-destructive);color:var(--color-destructive-foreground)}.jky-button--danger:hover{background-color:color-mix(in srgb,var(--color-destructive),#000 10%)}.jky-button--info{background-color:var(--color-muted);color:var(--color-muted-foreground)}.jky-button--info:hover{background-color:color-mix(in srgb,var(--color-muted),#000 10%)}.jky-button--large{--button-height:48px;--button-padding:0 24px;--button-font-size:16px}.jky-button--default{--button-height:40px;--button-padding:0 16px;--button-font-size:14px}.jky-button--small{--button-height:32px;--button-padding:0 12px;--button-font-size:12px}.jky-button.is-disabled{cursor:not-allowed;opacity:.5}.jky-button.is-loading{pointer-events:none;position:relative}.jky-button__loading{@apply absolute inset-0 flex items-center justify-center}.loading-spinner{@apply w-5 h-5 animate-spin}.jky-button--primary.is-border{background-color:transparent;border-color:var(--color-primary);color:var(--color-primary)}.jky-button--primary.is-border:hover{background-color:color-mix(in srgb,var(--color-primary),transparent 90%)}.jky-button--text{background-color:transparent;border-color:transparent;color:var(--color-primary)}.jky-button--text:hover{background-color:color-mix(in srgb,var(--color-primary),transparent 90%)}@reference "../styles.css";.jky-component-lib-say-hello{background:#42b883;border-radius:6px;color:#fff;cursor:pointer;display:inline-block;font-size:16px;margin:4px 2px;padding:8px 20px;text-align:center;text-decoration:none}@import "tailwindcss";@import "@fontsource-variable/geist";@custom-variant dark (&:is(.dark *));@theme inline{--font-heading:var(--font-sans);--font-sans:"Geist Variable",sans-serif;--color-sidebar-ring:var(--sidebar-ring);--color-sidebar-border:var(--sidebar-border);--color-sidebar-accent-foreground:var(--sidebar-accent-foreground);--color-sidebar-accent:var(--sidebar-accent);--color-sidebar-primary-foreground:var(--sidebar-primary-foreground);--color-sidebar-primary:var(--sidebar-primary);--color-sidebar-foreground:var(--sidebar-foreground);--color-sidebar:var(--sidebar);--color-chart-5:var(--chart-5);--color-chart-4:var(--chart-4);--color-chart-3:var(--chart-3);--color-chart-2:var(--chart-2);--color-chart-1:var(--chart-1);--color-ring:var(--ring);--color-input:var(--input);--color-border:var(--border);--color-destructive:var(--destructive);--color-accent-foreground:var(--accent-foreground);--color-accent:var(--accent);--color-muted-foreground:var(--muted-foreground);--color-muted:var(--muted);--color-secondary-foreground:var(--secondary-foreground);--color-secondary:var(--secondary);--color-primary-foreground:var(--primary-foreground);--color-primary:var(--primary);--color-popover-foreground:var(--popover-foreground);--color-popover:var(--popover);--color-card-foreground:var(--card-foreground);--color-card:var(--card);--color-foreground:var(--foreground);--color-background:var(--background);--radius-sm:calc(var(--radius)*0.6);--radius-md:calc(var(--radius)*0.8);--radius-lg:var(--radius);--radius-xl:calc(var(--radius)*1.4);--radius-2xl:calc(var(--radius)*1.8);--radius-3xl:calc(var(--radius)*2.2);--radius-4xl:calc(var(--radius)*2.6)}:root{--background:oklch(1 0 0);--foreground:oklch(0.145 0 0);--card:oklch(1 0 0);--card-foreground:oklch(0.145 0 0);--popover:oklch(1 0 0);--popover-foreground:oklch(0.145 0 0);--primary:oklch(0.205 0 0);--primary-foreground:oklch(0.985 0 0);--secondary:oklch(0.97 0 0);--secondary-foreground:oklch(0.205 0 0);--muted:oklch(0.97 0 0);--muted-foreground:oklch(0.556 0 0);--accent:oklch(0.97 0 0);--accent-foreground:oklch(0.205 0 0);--destructive:oklch(0.577 0.245 27.325);--border:oklch(0.922 0 0);--input:oklch(0.922 0 0);--ring:oklch(0.708 0 0);--chart-1:oklch(0.646 0.222 41.116);--chart-2:oklch(0.6 0.118 184.704);--chart-3:oklch(0.398 0.07 227.392);--chart-4:oklch(0.828 0.189 84.429);--chart-5:oklch(0.769 0.188 70.08);--radius:0.625rem;--sidebar:oklch(0.985 0 0);--sidebar-foreground:oklch(0.145 0 0);--sidebar-primary:oklch(0.205 0 0);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.97 0 0);--sidebar-accent-foreground:oklch(0.205 0 0);--sidebar-border:oklch(0.922 0 0);--sidebar-ring:oklch(0.708 0 0)}.dark{--background:oklch(0.145 0 0);--foreground:oklch(0.985 0 0);--card:oklch(0.205 0 0);--card-foreground:oklch(0.985 0 0);--popover:oklch(0.205 0 0);--popover-foreground:oklch(0.985 0 0);--primary:oklch(0.922 0 0);--primary-foreground:oklch(0.205 0 0);--secondary:oklch(0.269 0 0);--secondary-foreground:oklch(0.985 0 0);--muted:oklch(0.269 0 0);--muted-foreground:oklch(0.708 0 0);--accent:oklch(0.269 0 0);--accent-foreground:oklch(0.985 0 0);--destructive:oklch(0.704 0.191 22.216);--border:oklch(1 0 0/10%);--input:oklch(1 0 0/15%);--ring:oklch(0.556 0 0);--chart-1:oklch(0.488 0.243 264.376);--chart-2:oklch(0.696 0.17 162.48);--chart-3:oklch(0.769 0.188 70.08);--chart-4:oklch(0.627 0.265 303.9);--chart-5:oklch(0.645 0.246 16.439);--sidebar:oklch(0.205 0 0);--sidebar-foreground:oklch(0.985 0 0);--sidebar-primary:oklch(0.488 0.243 264.376);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.269 0 0);--sidebar-accent-foreground:oklch(0.985 0 0);--sidebar-border:oklch(1 0 0/10%);--sidebar-ring:oklch(0.556 0 0)}@layer base{*{@apply border-border outline-ring/50}body{@apply bg-background text-foreground}html{@apply font-sans}}

package/dist/volar.d.ts

@@ -1,6 +1,14 @@
 declare module 'vue' {
   export interface GlobalComponents {
-    StSayHello: typeof import('jky-component-lib')['StSayHello']
+    JkySayHello: typeof import('jky-component-lib')['JkySayHello']
+  }
+}
+
+declare module '@vue/runtime-core' {
+  export interface App {
+    use: {
+      (plugin: typeof import('jky-component-lib'), options?: import('jky-component-lib').InstallerOptions): this
+    }
   }
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jky-component-lib",
   "type": "module",
-  "version": "0.0.6",
+  "version": "0.0.9",
   "packageManager": "bun@1.3.5",
   "description": "Vue 3 component library starter template, provides VitePress documentation, supports building ESM, CJS and UMD formats. ",
   "author": "Kieran Wang <kieranwme@gmail.com> (https://github.com/kieranwv/)",
@@ -65,16 +65,17 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^4.13.0",
-    "@kieranwv/utils": "^0.3.0",
+    "@tailwindcss/vite": "^4.2.2",
     "@types/jsdom": "^21.1.7",
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^22.15.14",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vitejs/plugin-vue-jsx": "^4.1.2",
     "@vue/test-utils": "^2.4.6",
-    "@vueuse/core": "^13.1.0",
+    "@vueuse/core": "^14.2.1",
     "bumpp": "^10.1.0",
     "cssnano": "^7.0.7",
+    "element-plus": "^2.13.6",
     "eslint": "^9.26.0",
     "jsdom": "^26.1.0",
     "lint-staged": "^15.5.2",
@@ -84,8 +85,10 @@
     "rimraf": "^6.0.1",
     "shiki": "^3.4.0",
     "simple-git-hooks": "^2.13.0",
+    "tailwindcss": "^4.2.2",
     "typescript": "^5.8.3",
-    "unplugin-vue-components": "^28.5.0",
+    "unplugin-auto-import": "^21.0.0",
+    "unplugin-vue-components": "^32.0.0",
     "vite": "^6.3.5",
     "vite-plugin-bundle-styles": "^0.1.0",
     "vite-plugin-dts": "^4.5.3",

package/dist/es/node_modules/@kieranwv/utils/dist/index.js

@@ -1,6 +0,0 @@
-function r(e) {
-  return e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase().replace(/\s+/g, "-");
-}
-export {
-  r as toLowerCase
-};

package/dist/lib/node_modules/@kieranwv/utils/dist/index.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function r(e){return e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase().replace(/\s+/g,"-")}exports.toLowerCase=r;