customs-ui-kit 1.0.1 → 1.0.3

package/dist/customs-ui-kit.css

@@ -1 +1 @@
-._isHighlight_2pl28_11{box-shadow:0 0 8px #409effcc;transform:scale(1.02);transition:all .3s ease}._myTableWrapper_1olwi_3{width:100%;overflow:hidden}._myTable_1olwi_3{--el-table-header-bg-color: #f5f7fa}
+.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}

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

@@ -1,76 +1,81 @@
-import { defineComponent as d, openBlock as o, createBlock as m, unref as r, mergeProps as n, withCtx as p, renderSlot as u, createElementBlock as i, normalizeClass as y, createVNode as b, Fragment as _, renderList as h, createSlots as f } from "vue";
-import { ElButton as g, ElTable as $, ElTableColumn as B } from "element-plus";
-const T = /* @__PURE__ */ d({
+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";
+const k = /* @__PURE__ */ i({
   __name: "Button",
   props: {
     highlight: { type: Boolean }
   },
-  setup(s) {
-    return (e, l) => (o(), m(r(g), n(e.$attrs, {
-      class: [e.$style.myButton, { [e.$style.isHighlight]: s.highlight }]
+  setup(t) {
+    return (a, o) => (l(), s(r(v), n(a.$attrs, {
+      class: ["myButton", { isHighlight: t.highlight }]
     }), {
-      default: p(() => [
-        u(e.$slots, "default")
+      default: d(() => [
+        u(a.$slots, "default", {}, void 0, !0)
       ]),
       _: 3
     }, 16, ["class"]));
   }
-}), k = "_myButton_2pl28_3", w = "_isHighlight_2pl28_11", M = {
-  myButton: k,
-  isHighlight: w
-}, c = (s, e) => {
-  const l = s.__vccOpts || s;
-  for (const [t, a] of e)
-    l[t] = a;
-  return l;
-}, v = {
-  $style: M
-}, L = /* @__PURE__ */ c(T, [["__cssModules", v]]), C = /* @__PURE__ */ d({
+}), b = (t, a) => {
+  const o = t.__vccOpts || t;
+  for (const [e, p] of a)
+    o[e] = p;
+  return o;
+}, I = /* @__PURE__ */ b(k, [["__scopeId", "data-v-ae952d65"]]), S = /* @__PURE__ */ i({
+  __name: "Select",
+  props: {
+    options: {}
+  },
+  setup(t) {
+    return (a, o) => (l(), s(r(y), 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), {
+          key: e.value,
+          label: e.label,
+          value: e.value,
+          disabled: e.disabled
+        }, null, 8, ["label", "value", "disabled"]))), 128)) : u(a.$slots, "default", { key: 1 }, void 0, !0)
+      ]),
+      _: 3
+    }, 16));
+  }
+}), M = /* @__PURE__ */ b(S, [["__scopeId", "data-v-ed4b07be"]]), T = { class: "myTableWrapper" }, E = /* @__PURE__ */ i({
   __name: "Table",
   props: {
     data: { default: () => [] },
     columns: { default: () => [] },
     border: { type: Boolean, default: !0 }
   },
-  setup(s) {
-    return (e, l) => (o(), i("div", {
-      class: y(e.$style.myTableWrapper)
-    }, [
-      b(r($), n({
-        data: s.data,
-        border: s.border
-      }, e.$attrs, {
-        class: e.$style.myTable
-      }), {
-        default: p(() => [
-          (o(!0), i(_, null, h(s.columns, (t) => (o(), m(r(B), {
-            key: t.prop,
-            prop: t.prop,
-            label: t.label,
-            width: t.width,
-            sortable: t.sortable
-          }, f({ _: 2 }, [
-            e.$slots[t.prop] ? {
+  setup(t) {
+    return (a, o) => (l(), c("div", T, [
+      _(r(B), n({
+        data: t.data,
+        border: t.border
+      }, a.$attrs, { class: "myTable" }), {
+        default: d(() => [
+          (l(!0), c(f, null, m(t.columns, (e) => (l(), s(r($), {
+            key: e.prop,
+            prop: e.prop,
+            label: e.label,
+            width: e.width,
+            sortable: e.sortable
+          }, h({ _: 2 }, [
+            a.$slots[e.prop] ? {
               name: "default",
-              fn: p((a) => [
-                u(e.$slots, t.prop, n({ ref_for: !0 }, a))
+              fn: d((p) => [
+                u(a.$slots, e.prop, n({ ref_for: !0 }, p), void 0, !0)
               ]),
               key: "0"
             } : void 0
           ]), 1032, ["prop", "label", "width", "sortable"]))), 128)),
-          u(e.$slots, "append")
+          u(a.$slots, "append", {}, void 0, !0)
         ]),
         _: 3
-      }, 16, ["data", "border", "class"])
-    ], 2));
+      }, 16, ["data", "border"])
+    ]));
   }
-}), E = "_myTableWrapper_1olwi_3", H = "_myTable_1olwi_3", W = {
-  myTableWrapper: E,
-  myTable: H
-}, S = {
-  $style: W
-}, N = /* @__PURE__ */ c(C, [["__cssModules", S]]);
+}), O = /* @__PURE__ */ b(E, [["__scopeId", "data-v-160d151c"]]);
 export {
-  L as MyButton,
-  N as MyTable
+  I as MyButton,
+  M as MySelect,
+  O as MyTable
 };

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

@@ -1 +1 @@
-(function(s,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):(s=typeof globalThis<"u"?globalThis:s||self,e(s.CustomsUIKit={},s.Vue,s.ElementPlus))})(this,(function(s,e,r){"use strict";const p=e.defineComponent({__name:"Button",props:{highlight:{type:Boolean}},setup(l){return(t,n)=>(e.openBlock(),e.createBlock(e.unref(r.ElButton),e.mergeProps(t.$attrs,{class:[t.$style.myButton,{[t.$style.isHighlight]:l.highlight}]}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},16,["class"]))}}),d={myButton:"_myButton_2pl28_3",isHighlight:"_isHighlight_2pl28_11"},i=(l,t)=>{const n=l.__vccOpts||l;for(const[o,a]of t)n[o]=a;return n},c=i(p,[["__cssModules",{$style:d}]]),m=i(e.defineComponent({__name:"Table",props:{data:{default:()=>[]},columns:{default:()=>[]},border:{type:Boolean,default:!0}},setup(l){return(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(t.$style.myTableWrapper)},[e.createVNode(e.unref(r.ElTable),e.mergeProps({data:l.data,border:l.border},t.$attrs,{class:t.$style.myTable}),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.columns,o=>(e.openBlock(),e.createBlock(e.unref(r.ElTableColumn),{key:o.prop,prop:o.prop,label:o.label,width:o.width,sortable:o.sortable},e.createSlots({_:2},[t.$slots[o.prop]?{name:"default",fn:e.withCtx(a=>[e.renderSlot(t.$slots,o.prop,e.mergeProps({ref_for:!0},a))]),key:"0"}:void 0]),1032,["prop","label","width","sortable"]))),128)),e.renderSlot(t.$slots,"append")]),_:3},16,["data","border","class"])],2))}}),[["__cssModules",{$style:{myTableWrapper:"_myTableWrapper_1olwi_3",myTable:"_myTable_1olwi_3"}}]]);s.MyButton=c,s.MyTable=m,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));
+(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"})}));

package/package.json

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

package/src/components/Button/Button.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ElButton } from 'element-plus';
 import type { ButtonProps as ElButtonProps } from 'element-plus';
-import { useCssModule } from 'vue';
 
 /**
  * 自定义按钮组件属性 (继承并扩展 Element Plus)
@@ -18,12 +17,12 @@ defineProps<MyButtonProps>();
 </script>
 
 <template>
-  <el-button v-bind="$attrs" :class="[$style.myButton, { [$style.isHighlight]: highlight }]">
+  <el-button v-bind="$attrs" class="myButton" :class="{ 'isHighlight': highlight }">
     <slot />
   </el-button>
 </template>
 
-<style module>
+<style scoped>
 .myButton {
   /* 在这里可以添加基础的自定义样式 */
 }

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

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { MySelect } from './index';
+import { ref } from 'vue';
+
+const meta = {
+  title: 'Components/MySelect',
+  component: MySelect,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['large', 'default', 'small'],
+    },
+    clearable: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+} satisfies Meta<typeof MySelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    clearable: true,
+    placeholder: '请选择',
+    options: [
+      { label: '选项一', value: '1' },
+      { label: '选项二', value: '2' },
+      { label: '选项三', value: '3', disabled: true },
+    ],
+  },
+  render: (args) => ({
+    components: { MySelect },
+    setup() {
+      const value = ref('');
+      return { args, value };
+    },
+    template: '<my-select v-model="value" v-bind="args" style="width: 240px" />',
+  }),
+};

package/src/components/Select/Select.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { ElSelect, ElOption } from 'element-plus';
+import type { SelectProps as ElSelectProps } from 'element-plus';
+
+/**
+ * 自定义选择器组件属性 (继承并扩展 Element Plus)
+ */
+export interface MySelectProps extends /* @vue-ignore */ Partial<ElSelectProps> {
+  /** 
+   * 数据源选项
+   */
+  options?: Array<{ label: string; value: string | number; disabled?: boolean }>;
+}
+
+defineProps<MySelectProps>();
+</script>
+
+<template>
+  <el-select v-bind="$attrs" class="mySelect">
+    <template v-if="options && options.length">
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        :disabled="item.disabled"
+      />
+    </template>
+    <slot v-else />
+  </el-select>
+</template>
+
+<style scoped>
+.mySelect {
+  /* 在这里可以添加基础的自定义样式 */
+}
+</style>

package/src/components/Select/index.ts

@@ -0,0 +1,4 @@
+import MySelect from './Select.vue';
+
+export { MySelect };
+export type { MySelectProps } from './Select.vue';

package/src/components/Table/Table.vue

@@ -45,8 +45,8 @@ withDefaults(defineProps<MyTableProps>(), {
 </script>
 
 <template>
-  <div :class="$style.myTableWrapper">
-    <el-table :data="data" :border="border" v-bind="$attrs" :class="$style.myTable">
+  <div class="myTableWrapper">
+    <el-table :data="data" :border="border" v-bind="$attrs" class="myTable">
       <el-table-column
         v-for="col in columns"
         :key="col.prop"
@@ -67,7 +67,7 @@ withDefaults(defineProps<MyTableProps>(), {
   </div>
 </template>
 
-<style module>
+<style scoped>
 .myTableWrapper {
   width: 100%;
   overflow: hidden;

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from './components/Button';
+export * from './components/Select';
 export * from './components/Table';