customs-ui-kit 1.0.5 → 1.0.6

package/dist/customs-ui-kit.es.js

@@ -1,13 +1,14 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".isHighlight[data-v-ae952d65]{box-shadow:0 0 8px #409effcc;transform:scale(1.02);transition:all .3s ease}.myTableWrapper[data-v-160d151c]{width:100%;overflow:hidden}.myTable[data-v-160d151c]{--el-table-header-bg-color: #f5f7fa}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
-import { defineComponent as i, openBlock as l, createBlock as s, unref as r, mergeProps as n, withCtx as d, renderSlot as u, createElementBlock as c, Fragment as f, renderList as m, createVNode as _, createSlots as h } from "vue";
-import { ElButton as v, ElSelect as y, ElOption as g, ElTable as B, ElTableColumn as $ } from "element-plus";
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".isHighlight[data-v-930320b7]{box-shadow:0 0 8px #409effcc;transform:scale(1.02);transition:all .3s ease}.myTableWrapper[data-v-930831ed]{width:100%;overflow:hidden}.myTable[data-v-930831ed]{--el-table-header-bg-color: #f5f7fa}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
+import { defineComponent as i, openBlock as l, createBlock as s, unref as r, mergeProps as n, withCtx as d, renderSlot as u, createElementBlock as c, Fragment as f, renderList as m, createVNode as _, createSlots as y } from "vue";
+import { ElButton as h, ElSelect as v, ElOption as B, ElTable as g, ElTableColumn as $ } from "element-plus";
 const k = /* @__PURE__ */ i({
+  name: "MyButton",
   __name: "Button",
   props: {
     highlight: { type: Boolean }
   },
   setup(t) {
-    return (a, o) => (l(), s(r(v), n(a.$attrs, {
+    return (a, o) => (l(), s(r(h), n(a.$attrs, {
       class: ["myButton", { isHighlight: t.highlight }]
     }), {
       default: d(() => [
@@ -21,15 +22,16 @@ const k = /* @__PURE__ */ i({
   for (const [e, p] of a)
     o[e] = p;
   return o;
-}, I = /* @__PURE__ */ b(k, [["__scopeId", "data-v-ae952d65"]]), S = /* @__PURE__ */ i({
+}, C = /* @__PURE__ */ b(k, [["__scopeId", "data-v-930320b7"]]), S = /* @__PURE__ */ i({
+  name: "MySelect",
   __name: "Select",
   props: {
     options: {}
   },
   setup(t) {
-    return (a, o) => (l(), s(r(y), n(a.$attrs, { class: "mySelect" }), {
+    return (a, o) => (l(), s(r(v), n(a.$attrs, { class: "mySelect" }), {
       default: d(() => [
-        t.options && t.options.length ? (l(!0), c(f, { key: 0 }, m(t.options, (e) => (l(), s(r(g), {
+        t.options && t.options.length ? (l(!0), c(f, { key: 0 }, m(t.options, (e) => (l(), s(r(B), {
           key: e.value,
           label: e.label,
           value: e.value,
@@ -39,7 +41,8 @@ const k = /* @__PURE__ */ i({
       _: 3
     }, 16));
   }
-}), M = /* @__PURE__ */ b(S, [["__scopeId", "data-v-ed4b07be"]]), T = { class: "myTableWrapper" }, E = /* @__PURE__ */ i({
+}), I = /* @__PURE__ */ b(S, [["__scopeId", "data-v-baf73093"]]), T = { class: "myTableWrapper" }, E = /* @__PURE__ */ i({
+  name: "MyTable",
   __name: "Table",
   props: {
     data: { default: () => [] },
@@ -48,7 +51,7 @@ const k = /* @__PURE__ */ i({
   },
   setup(t) {
     return (a, o) => (l(), c("div", T, [
-      _(r(B), n({
+      _(r(g), n({
         data: t.data,
         border: t.border
       }, a.$attrs, { class: "myTable" }), {
@@ -59,7 +62,7 @@ const k = /* @__PURE__ */ i({
             label: e.label,
             width: e.width,
             sortable: e.sortable
-          }, h({ _: 2 }, [
+          }, y({ _: 2 }, [
             a.$slots[e.prop] ? {
               name: "default",
               fn: d((p) => [
@@ -74,9 +77,9 @@ const k = /* @__PURE__ */ i({
       }, 16, ["data", "border"])
     ]));
   }
-}), O = /* @__PURE__ */ b(E, [["__scopeId", "data-v-160d151c"]]);
+}), O = /* @__PURE__ */ b(E, [["__scopeId", "data-v-930831ed"]]);
 export {
-  I as MyButton,
-  M as MySelect,
+  C as MyButton,
+  I as MySelect,
   O as MyTable
 };

package/dist/customs-ui-kit.umd.js

@@ -1,2 +1,2 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".isHighlight[data-v-ae952d65]{box-shadow:0 0 8px #409effcc;transform:scale(1.02);transition:all .3s ease}.myTableWrapper[data-v-160d151c]{width:100%;overflow:hidden}.myTable[data-v-160d151c]{--el-table-header-bg-color: #f5f7fa}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
-(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("element-plus")):typeof define=="function"&&define.amd?define(["exports","vue","element-plus"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.CustomsUIKit={},r.Vue,r.ElementPlus))})(this,(function(r,e,l){"use strict";const c=e.defineComponent({__name:"Button",props:{highlight:{type:Boolean}},setup(o){return(n,a)=>(e.openBlock(),e.createBlock(e.unref(l.ElButton),e.mergeProps(n.$attrs,{class:["myButton",{isHighlight:o.highlight}]}),{default:e.withCtx(()=>[e.renderSlot(n.$slots,"default",{},void 0,!0)]),_:3},16,["class"]))}}),s=(o,n)=>{const a=o.__vccOpts||o;for(const[t,d]of n)a[t]=d;return a},i=s(c,[["__scopeId","data-v-ae952d65"]]),p=s(e.defineComponent({__name:"Select",props:{options:{}},setup(o){return(n,a)=>(e.openBlock(),e.createBlock(e.unref(l.ElSelect),e.mergeProps(n.$attrs,{class:"mySelect"}),{default:e.withCtx(()=>[o.options&&o.options.length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(o.options,t=>(e.openBlock(),e.createBlock(e.unref(l.ElOption),{key:t.value,label:t.label,value:t.value,disabled:t.disabled},null,8,["label","value","disabled"]))),128)):e.renderSlot(n.$slots,"default",{key:1},void 0,!0)]),_:3},16))}}),[["__scopeId","data-v-ed4b07be"]]),f={class:"myTableWrapper"},m=s(e.defineComponent({__name:"Table",props:{data:{default:()=>[]},columns:{default:()=>[]},border:{type:Boolean,default:!0}},setup(o){return(n,a)=>(e.openBlock(),e.createElementBlock("div",f,[e.createVNode(e.unref(l.ElTable),e.mergeProps({data:o.data,border:o.border},n.$attrs,{class:"myTable"}),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.columns,t=>(e.openBlock(),e.createBlock(e.unref(l.ElTableColumn),{key:t.prop,prop:t.prop,label:t.label,width:t.width,sortable:t.sortable},e.createSlots({_:2},[n.$slots[t.prop]?{name:"default",fn:e.withCtx(d=>[e.renderSlot(n.$slots,t.prop,e.mergeProps({ref_for:!0},d),void 0,!0)]),key:"0"}:void 0]),1032,["prop","label","width","sortable"]))),128)),e.renderSlot(n.$slots,"append",{},void 0,!0)]),_:3},16,["data","border"])]))}}),[["__scopeId","data-v-160d151c"]]);r.MyButton=i,r.MySelect=p,r.MyTable=m,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".isHighlight[data-v-930320b7]{box-shadow:0 0 8px #409effcc;transform:scale(1.02);transition:all .3s ease}.myTableWrapper[data-v-930831ed]{width:100%;overflow:hidden}.myTable[data-v-930831ed]{--el-table-header-bg-color: #f5f7fa}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
+(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("element-plus")):typeof define=="function"&&define.amd?define(["exports","vue","element-plus"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.CustomsUIKit={},r.Vue,r.ElementPlus))})(this,(function(r,e,l){"use strict";const c=e.defineComponent({name:"MyButton",__name:"Button",props:{highlight:{type:Boolean}},setup(o){return(n,a)=>(e.openBlock(),e.createBlock(e.unref(l.ElButton),e.mergeProps(n.$attrs,{class:["myButton",{isHighlight:o.highlight}]}),{default:e.withCtx(()=>[e.renderSlot(n.$slots,"default",{},void 0,!0)]),_:3},16,["class"]))}}),s=(o,n)=>{const a=o.__vccOpts||o;for(const[t,d]of n)a[t]=d;return a},i=s(c,[["__scopeId","data-v-930320b7"]]),p=s(e.defineComponent({name:"MySelect",__name:"Select",props:{options:{}},setup(o){return(n,a)=>(e.openBlock(),e.createBlock(e.unref(l.ElSelect),e.mergeProps(n.$attrs,{class:"mySelect"}),{default:e.withCtx(()=>[o.options&&o.options.length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(o.options,t=>(e.openBlock(),e.createBlock(e.unref(l.ElOption),{key:t.value,label:t.label,value:t.value,disabled:t.disabled},null,8,["label","value","disabled"]))),128)):e.renderSlot(n.$slots,"default",{key:1},void 0,!0)]),_:3},16))}}),[["__scopeId","data-v-baf73093"]]),f={class:"myTableWrapper"},m=s(e.defineComponent({name:"MyTable",__name:"Table",props:{data:{default:()=>[]},columns:{default:()=>[]},border:{type:Boolean,default:!0}},setup(o){return(n,a)=>(e.openBlock(),e.createElementBlock("div",f,[e.createVNode(e.unref(l.ElTable),e.mergeProps({data:o.data,border:o.border},n.$attrs,{class:"myTable"}),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.columns,t=>(e.openBlock(),e.createBlock(e.unref(l.ElTableColumn),{key:t.prop,prop:t.prop,label:t.label,width:t.width,sortable:t.sortable},e.createSlots({_:2},[n.$slots[t.prop]?{name:"default",fn:e.withCtx(d=>[e.renderSlot(n.$slots,t.prop,e.mergeProps({ref_for:!0},d),void 0,!0)]),key:"0"}:void 0]),1032,["prop","label","width","sortable"]))),128)),e.renderSlot(n.$slots,"append",{},void 0,!0)]),_:3},16,["data","border"])]))}}),[["__scopeId","data-v-930831ed"]]);r.MyButton=i,r.MySelect=p,r.MyTable=m,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "customs-ui-kit",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "main": "dist/customs-ui-kit.umd.js",
   "module": "dist/customs-ui-kit.es.js",
   "types": "dist/index.d.ts",

package/src/components/Button/Button.stories.ts

@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/vue3';
 import { MyButton } from './index';
 
+import DefaultExampleCode from './examples/Default.vue?raw';
+import HighlightedExampleCode from './examples/Highlighted.vue?raw';
+
 const meta = {
   title: 'Components/MyButton',
   component: MyButton,
@@ -34,6 +37,13 @@ export const Default: Story = {
     },
     template: '<my-button v-bind="args">{{ args.default }}</my-button>',
   }),
+  parameters: {
+    docs: {
+      source: {
+        code: DefaultExampleCode
+      }
+    }
+  }
 };
 
 export const Highlighted: Story = {
@@ -49,4 +59,11 @@ export const Highlighted: Story = {
     },
     template: '<my-button v-bind="args">{{ args.default }}</my-button>',
   }),
+  parameters: {
+    docs: {
+      source: {
+        code: HighlightedExampleCode
+      }
+    }
+  }
 };

package/src/components/Button/Button.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { ElButton } from 'element-plus';
 import type { ButtonProps as ElButtonProps } from 'element-plus';
-
+defineOptions({
+  name: 'MyButton'
+});
 /**
  * 自定义按钮组件属性 (继承并扩展 Element Plus)
  */

package/src/components/Button/examples/Default.vue

@@ -0,0 +1,9 @@
+<template>
+  <my-button type="primary" :highlight="false">
+    Click Me
+  </my-button>
+</template>
+
+<script setup lang="ts">
+import { MyButton } from 'customs-ui-kit';
+</script>

package/src/components/Button/examples/Highlighted.vue

@@ -0,0 +1,9 @@
+<template>
+  <my-button type="success" highlight>
+    Highlighted Button
+  </my-button>
+</template>
+
+<script setup lang="ts">
+import { MyButton } from 'customs-ui-kit';
+</script>

package/src/components/Select/Select.stories.ts

@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from '@storybook/vue3';
 import { MySelect } from './index';
 import { ref } from 'vue';
 
+import DefaultExampleCode from './examples/Default.vue?raw';
+
 const meta = {
   title: 'Components/MySelect',
   component: MySelect,
@@ -37,4 +39,11 @@ export const Default: Story = {
     },
     template: '<my-select v-model="value" v-bind="args" style="width: 240px" />',
   }),
+  parameters: {
+    docs: {
+      source: {
+        code: DefaultExampleCode
+      }
+    }
+  }
 };

package/src/components/Select/Select.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { ElSelect, ElOption } from 'element-plus';
 import type { SelectProps as ElSelectProps } from 'element-plus';
+defineOptions({
+  name: 'MySelect'
+});
 
 /**
  * 自定义选择器组件属性 (继承并扩展 Element Plus)

package/src/components/Select/examples/Default.vue

@@ -0,0 +1,22 @@
+<template>
+  <my-select
+    v-model="value"
+    :clearable="true"
+    placeholder="请选择"
+    :options="options"
+    style="width: 240px"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { MySelect } from 'customs-ui-kit';
+
+const value = ref('');
+
+const options = [
+  { label: '选项一', value: '1' },
+  { label: '选项二', value: '2' },
+  { label: '选项三', value: '3', disabled: true },
+];
+</script>

package/src/components/Table/Table.stories.ts

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/vue3';
 import { MyTable } from './index';
 
+import DefaultExampleCode from './examples/Default.vue?raw';
+
 const meta = {
   title: 'Components/MyTable',
   component: MyTable,
@@ -46,4 +48,11 @@ export const Default: Story = {
     },
     template: '<my-table v-bind="args" />',
   }),
+  parameters: {
+    docs: {
+      source: {
+        code: DefaultExampleCode
+      }
+    }
+  }
 };

package/src/components/Table/Table.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { ElTable, ElTableColumn } from 'element-plus';
 import type { TableProps as ElTableProps } from 'element-plus';
+defineOptions({
+  name: 'MyTable'
+});
 
 /**
  * 表格列配置定义

package/src/components/Table/examples/Default.vue

@@ -0,0 +1,23 @@
+<template>
+  <my-table 
+    :border="true" 
+    :columns="columns" 
+    :data="data" 
+  />
+</template>
+
+<script setup lang="ts">
+import { MyTable } from 'customs-ui-kit';
+
+const columns = [
+  { prop: 'date', label: 'Date', width: '180' },
+  { prop: 'name', label: 'Name', width: '180' },
+  { prop: 'address', label: 'Address' },
+];
+
+const data = [
+  { date: '2026-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+  { date: '2026-05-02', name: 'John', address: 'No. 189, Grove St, Los Angeles' },
+  { date: '2026-05-04', name: 'Morgan', address: 'No. 189, Grove St, Los Angeles' },
+];
+</script>