customs-ui-kit 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "customs-ui-kit",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "dist/customs-ui-kit.umd.js",
   "module": "dist/customs-ui-kit.es.js",
   "types": "dist/index.d.ts",
@@ -13,7 +13,8 @@
     "./style.css": "./dist/style.css"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "scripts": {
     "dev": "vite",
@@ -35,6 +36,8 @@
     "@storybook/addon-interactions": "^8.6.14",
     "@storybook/addon-links": "^8.6.18",
     "@storybook/blocks": "^8.6.14",
+    "@storybook/manager-api": "^8.6.14",
+    "@storybook/theming": "^8.6.14",
     "@storybook/vue3": "^8.6.18",
     "@storybook/vue3-vite": "^8.6.18",
     "@types/express": "^5.0.6",

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

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { MyButton } from './index';
+
+const meta = {
+  title: 'Components/MyButton',
+  component: MyButton,
+  tags: ['autodocs'],
+  argTypes: {
+    highlight: { control: 'boolean' },
+    type: {
+      control: { type: 'select' },
+      options: ['primary', 'success', 'warning', 'danger', 'info', 'default'],
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['large', 'default', 'small'],
+    },
+  },
+} satisfies Meta<typeof MyButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    type: 'primary',
+    highlight: false,
+    default: 'Click Me',
+  },
+  render: (args) => ({
+    components: { MyButton },
+    setup() {
+      return { args };
+    },
+    template: '<my-button v-bind="args">{{ args.default }}</my-button>',
+  }),
+};
+
+export const Highlighted: Story = {
+  args: {
+    type: 'success',
+    highlight: true,
+    default: 'Highlighted Button',
+  },
+  render: (args) => ({
+    components: { MyButton },
+    setup() {
+      return { args };
+    },
+    template: '<my-button v-bind="args">{{ args.default }}</my-button>',
+  }),
+};

package/src/components/Button/Button.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { ElButton } from 'element-plus';
+import type { ButtonProps as ElButtonProps } from 'element-plus';
+import { useCssModule } from 'vue';
+
+/**
+ * 自定义按钮组件属性 (继承并扩展 Element Plus)
+ */
+export interface MyButtonProps extends /* @vue-ignore */ Partial<ElButtonProps> {
+  /** 
+   * 自定义业务类型：是否为强调按钮
+   * @default false
+   */
+  highlight?: boolean;
+}
+
+defineProps<MyButtonProps>();
+</script>
+
+<template>
+  <el-button v-bind="$attrs" :class="[$style.myButton, { [$style.isHighlight]: highlight }]">
+    <slot />
+  </el-button>
+</template>
+
+<style module>
+.myButton {
+  /* 在这里可以添加基础的自定义样式 */
+}
+
+.isHighlight {
+  box-shadow: 0 0 8px rgba(64, 158, 255, 0.8);
+  transform: scale(1.02);
+  transition: all 0.3s ease;
+}
+</style>

package/src/components/Button/index.ts

@@ -0,0 +1,4 @@
+import MyButton from './Button.vue';
+
+export { MyButton };
+export type { MyButtonProps } from './Button.vue';

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

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { MyTable } from './index';
+
+const meta = {
+  title: 'Components/MyTable',
+  component: MyTable,
+  tags: ['autodocs'],
+  argTypes: {
+    border: { control: 'boolean' },
+  },
+} satisfies Meta<typeof MyTable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    border: true,
+    columns: [
+      { prop: 'date', label: 'Date', width: '180' },
+      { prop: 'name', label: 'Name', width: '180' },
+      { prop: 'address', label: 'Address' },
+    ],
+    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',
+      },
+    ],
+  },
+  render: (args) => ({
+    components: { MyTable },
+    setup() {
+      return { args };
+    },
+    template: '<my-table v-bind="args" />',
+  }),
+};

package/src/components/Table/Table.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { ElTable, ElTableColumn } from 'element-plus';
+import type { TableProps as ElTableProps } from 'element-plus';
+
+/**
+ * 表格列配置定义
+ */
+export interface MyTableColumn {
+  /** 列的属性名 */
+  prop: string;
+  /** 列的显示标题 */
+  label: string;
+  /** 列宽 */
+  width?: string | number;
+  /** 是否支持排序 */
+  sortable?: boolean;
+}
+
+/**
+ * 自定义表格组件属性
+ */
+export interface MyTableProps extends /* @vue-ignore */ Partial<ElTableProps<any>> {
+  /** 
+   * 表格数据数组
+   * @default []
+   */
+  data: any[];
+  /** 
+   * 表格列配置数组
+   * @default []
+   */
+  columns: MyTableColumn[];
+  /** 
+   * 是否显示边框
+   * @default true
+   */
+  border?: boolean;
+}
+
+withDefaults(defineProps<MyTableProps>(), {
+  data: () => [],
+  columns: () => [],
+  border: true
+});
+</script>
+
+<template>
+  <div :class="$style.myTableWrapper">
+    <el-table :data="data" :border="border" v-bind="$attrs" :class="$style.myTable">
+      <el-table-column
+        v-for="col in columns"
+        :key="col.prop"
+        :prop="col.prop"
+        :label="col.label"
+        :width="col.width"
+        :sortable="col.sortable"
+      >
+        <!-- 允许通过具名插槽自定义列内容，插槽名为列的 prop -->
+        <template #default="scope" v-if="$slots[col.prop]">
+          <slot :name="col.prop" v-bind="scope" />
+        </template>
+      </el-table-column>
+      
+      <!-- 允许追加其他列，比如操作列 -->
+      <slot name="append" />
+    </el-table>
+  </div>
+</template>
+
+<style module>
+.myTableWrapper {
+  width: 100%;
+  overflow: hidden;
+}
+
+.myTable {
+  /* 自定义表格样式 */
+  --el-table-header-bg-color: #f5f7fa;
+}
+</style>

package/src/components/Table/index.ts

@@ -0,0 +1,4 @@
+import MyTable from './Table.vue';
+
+export { MyTable };
+export type { MyTableProps, MyTableColumn } from './Table.vue';

package/src/index.ts

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