gi-component 0.0.7 → 0.0.9

package/package.json

@@ -1,56 +1,60 @@
-{
-  "name": "gi-component",
-  "type": "module",
-  "version": "0.0.7",
-  "description": "Vue3中基于Element Plus二次封装基础组件库",
-  "author": "lin",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/lin-97/gi-component.git"
-  },
-  "keywords": [
-    "element-plus",
-    "vitepress",
-    "vue3",
-    "gi-component",
-    "二次封装组件",
-    "封装组件"
-  ],
-  "main": "dist/index.umd.js",
-  "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist",
-    "packages"
-  ],
-  "scripts": {
-    "dev": "vite --host",
-    "docs:dev": "cd docs && pnpm dev",
-    "docs:build": "cd docs && pnpm build",
-    "docs:preview": "cd docs && pnpm preview",
-    "build:lib": "vite build --mode lib",
-    "build:docs": "cd docs && pnpm build"
-  },
-  "peerDependencies": {
-    "element-plus": "^2.11.2",
-    "vue": "^3.5.15"
-  },
-  "devDependencies": {
-    "@antfu/eslint-config": "^5.2.1",
-    "@element-plus/icons-vue": "^2.3.1",
-    "@vitejs/plugin-vue": "^5.2.4",
-    "@vitejs/plugin-vue-jsx": "^4.2.0",
-    "element-plus": "^2.11.2",
-    "eslint": "^9.27.0",
-    "sass": "^1.89.0",
-    "sass-loader": "^16.0.5",
-    "terser": "^5.44.0",
-    "typescript": "^5.8.3",
-    "unplugin-vue-components": "^28.8.0",
-    "vite": "6.3.5",
-    "vite-plugin-dts": "^4.5.4",
-    "vue": "^3.5.15",
-    "vue-tsc": "^2.2.10"
-  }
-}
+{
+  "name": "gi-component",
+  "type": "module",
+  "version": "0.0.9",
+  "description": "Vue3中基于Element Plus二次封装基础组件库",
+  "author": "lin",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lin-97/gi-component.git"
+  },
+  "keywords": [
+    "element-plus",
+    "vitepress",
+    "vue3",
+    "gi-component",
+    "二次封装组件",
+    "封装组件"
+  ],
+  "main": "dist/index.umd.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "packages"
+  ],
+  "scripts": {
+    "dev": "vite --host",
+    "docs:dev": "cd docs && pnpm dev",
+    "docs:build": "cd docs && pnpm build",
+    "docs:preview": "cd docs && pnpm preview",
+    "build:lib": "vite build --mode lib",
+    "build:docs": "cd docs && pnpm build",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "peerDependencies": {
+    "element-plus": "^2.11.2",
+    "vue": "^3.5.15"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^5.2.1",
+    "@element-plus/icons-vue": "^2.3.1",
+    "@types/node": "^24.2.0",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitejs/plugin-vue-jsx": "^4.2.0",
+    "element-plus": "^2.11.2",
+    "eslint": "^9.27.0",
+    "sass": "^1.89.0",
+    "sass-loader": "^16.0.5",
+    "standard-version": "^9.5.0",
+    "terser": "^5.44.0",
+    "typescript": "^5.8.3",
+    "unplugin-vue-components": "^28.8.0",
+    "vite": "6.3.5",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.5.15",
+    "vue-tsc": "^2.2.10"
+  }
+}

package/packages/components/button/index.ts

@@ -1,5 +1,5 @@
-import Button from './src/button.vue';
+import Button from './src/button.vue'
 
-export type ButtonInstance = InstanceType<typeof Button>;
-export * from './src/type';
-export default Button;
+export type ButtonInstance = InstanceType<typeof Button>
+export * from './src/type'
+export default Button

package/packages/components/button/src/button.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script setup lang="ts">
-import type { ButtonProps as ElButtonProps } from 'element-plus';
-import type { ButtonProps } from './type.ts';
+import type { ButtonProps as ElButtonProps } from 'element-plus'
+import type { ButtonProps } from './type.ts'
 import {
   Delete,
   Download,
@@ -15,45 +15,45 @@ import {
   Printer,
   Search,
   Upload
-} from '@element-plus/icons-vue';
-import { computed, useAttrs } from 'vue';
-import { useBemClass } from '../../../hooks';
+} from '@element-plus/icons-vue'
+import { computed, useAttrs } from 'vue'
+import { useBemClass } from '../../../hooks'
 
 const props = withDefaults(defineProps<ButtonProps>(), {
   type: ''
-});
+})
 
 const emit = defineEmits<{
-  (e: 'click', event: MouseEvent): void;
-}>();
-
-const attrs = useAttrs();
-
-const { b } = useBemClass();
-
-const obj: Record<string, { btnProps: Partial<ButtonProps>; btnText: string }> =
-{
-  add: { btnProps: { icon: Plus, type: 'primary' }, btnText: '新增' },
-  edit: { btnProps: { icon: Edit, type: 'primary' }, btnText: '编辑' },
-  delete: { btnProps: { icon: Delete, type: 'danger' }, btnText: '删除' },
-  search: { btnProps: { icon: Search, type: 'primary' }, btnText: '搜索' },
-  reset: { btnProps: { type: undefined }, btnText: '重置' },
-  upload: { btnProps: { icon: Upload, type: 'primary' }, btnText: '上传' },
-  download: {
-    btnProps: { icon: Download, type: 'primary' },
-    btnText: '下载'
-  },
-  print: { btnProps: { icon: Printer, type: 'primary' }, btnText: '打印' }
-};
+  (e: 'click', event: MouseEvent): void
+}>()
+
+const attrs = useAttrs()
+
+const { b } = useBemClass()
+
+const obj: Record<string, { btnProps: Partial<ButtonProps>, btnText: string }>
+  = {
+    add: { btnProps: { icon: Plus, type: 'primary' }, btnText: '新增' },
+    edit: { btnProps: { icon: Edit, type: 'primary' }, btnText: '编辑' },
+    delete: { btnProps: { icon: Delete, type: 'danger' }, btnText: '删除' },
+    search: { btnProps: { icon: Search, type: 'primary' }, btnText: '搜索' },
+    reset: { btnProps: { type: undefined }, btnText: '重置' },
+    upload: { btnProps: { icon: Upload, type: 'primary' }, btnText: '上传' },
+    download: {
+      btnProps: { icon: Download, type: 'primary' },
+      btnText: '下载'
+    },
+    print: { btnProps: { icon: Printer, type: 'primary' }, btnText: '打印' }
+  }
 
 const bindProps = computed(() => {
-  const btnProps = obj?.[props.type]?.btnProps || { type: props.type };
-  return { ...attrs, ...props, ...btnProps } as Omit<ElButtonProps, 'type'>;
-});
+  const btnProps = obj?.[props.type]?.btnProps || { type: props.type }
+  return { ...attrs, ...props, ...btnProps } as Omit<ElButtonProps, 'type'>
+})
 
 const btnText = computed(() => {
-  return obj[props.type].btnText;
-});
+  return obj[props.type].btnText
+})
 </script>
 
 <style lang="scss" scoped></style>

package/packages/components/button/src/type.ts

@@ -1,4 +1,4 @@
-import type { ButtonProps as ElButtonProps } from 'element-plus';
+import type { ButtonProps as ElButtonProps } from 'element-plus'
 
 export interface ButtonProps extends Partial<Omit<ElButtonProps, 'type'>> {
   type?:
@@ -11,5 +11,5 @@ export interface ButtonProps extends Partial<Omit<ElButtonProps, 'type'>> {
     | 'download'
     | 'print'
     | ''
-    | ElButtonProps['type'];
+    | ElButtonProps['type']
 }

package/packages/components/card/index.ts

@@ -1,5 +1,5 @@
-import Card from './src/card.vue';
+import Card from './src/card.vue'
 
-export type CardInstance = InstanceType<typeof Card>;
-export * from './src/type';
-export default Card;
+export type CardInstance = InstanceType<typeof Card>
+export * from './src/type'
+export default Card

package/packages/components/card/src/card.vue

@@ -18,9 +18,9 @@
 </template>
 
 <script lang="ts" setup>
-import type { CardProps } from './type';
-import { computed, useSlots } from 'vue';
-import { useBemClass } from '../../../hooks';
+import type { CardProps } from './type'
+import { computed, useSlots } from 'vue'
+import { useBemClass } from '../../../hooks'
 
 const props = withDefaults(defineProps<CardProps>(), {
   title: '',
@@ -31,37 +31,37 @@ const props = withDefaults(defineProps<CardProps>(), {
   headerStyle: () => ({}),
   bodyStyle: () => ({}),
   inner: false
-});
+})
 
 defineSlots<{
-  default: () => void;
-  title: () => void;
-  extra: () => void;
-  footer: () => void;
-}>();
+  default: () => void
+  title: () => void
+  extra: () => void
+  footer: () => void
+}>()
 
-const slot = useSlots();
-const { b } = useBemClass();
+const slot = useSlots()
+const { b } = useBemClass()
 
 const getCardClass = computed(() => {
-  const arr: string[] = [b('card')];
+  const arr: string[] = [b('card')]
   if (props.bordered) {
-    arr.push(b('card--bordered'));
+    arr.push(b('card--bordered'))
   }
   if (props.inner) {
-    arr.push(b('card--inner'));
+    arr.push(b('card--inner'))
   }
-  arr.push(b(`card--${props.size}`));
-  return arr.join(' ');
-});
+  arr.push(b(`card--${props.size}`))
+  return arr.join(' ')
+})
 
 const getHeaderClass = computed(() => {
-  const arr: string[] = [b('card-header')];
+  const arr: string[] = [b('card-header')]
   if (props.headerBordered) {
-    arr.push(b('card-header--bordered'));
+    arr.push(b('card-header--bordered'))
   }
-  return arr.join(' ');
-});
+  return arr.join(' ')
+})
 </script>
 
 <style lang="scss" scoped>

package/packages/components/card/src/type.ts

@@ -1,12 +1,12 @@
-import type { CSSProperties } from 'vue';
+import type { CSSProperties } from 'vue'
 
 export interface CardProps {
-  title?: string;
-  extra?: string;
-  bordered?: boolean;
-  size?: 'small' | 'middle';
-  headerBordered?: boolean;
-  headerStyle?: CSSProperties;
-  bodyStyle?: CSSProperties;
-  inner?: boolean; // 内嵌模式
+  title?: string
+  extra?: string
+  bordered?: boolean
+  size?: 'small' | 'middle'
+  headerBordered?: boolean
+  headerStyle?: CSSProperties
+  bodyStyle?: CSSProperties
+  inner?: boolean // 内嵌模式
 }

package/packages/components/dialog/index.ts

@@ -1,6 +1,6 @@
-import Dialog from './src/dialog.vue';
+import Dialog from './src/dialog.vue'
 
-export type DialogInstance = InstanceType<typeof Dialog>;
-export * from './src/dialog';
-export * from './src/type';
-export default Dialog;
+export type DialogInstance = InstanceType<typeof Dialog>
+export * from './src/dialog'
+export * from './src/type'
+export default Dialog

package/packages/components/dialog/src/dialog.ts

@@ -1,13 +1,13 @@
-import type { DialogInstance } from '../index';
-import ElementPlus from 'element-plus';
-import { createApp, h, ref } from 'vue';
-import GiDialog from './dialog.vue';
+import type { DialogInstance } from '../index'
+import ElementPlus from 'element-plus'
+import { createApp, h, ref } from 'vue'
+import GiDialog from './dialog.vue'
 
-export type DialogOptions = Partial<DialogInstance['$props']>;
+export type DialogOptions = Partial<DialogInstance['$props']>
 
 export interface DialogReturnObject {
-  close: () => void;
-  update: (newProps?: Record<string, any>) => void;
+  close: () => void
+  update: (newProps?: Record<string, any>) => void
 }
 
 const DEF_OPTIONS: DialogOptions = {
@@ -15,73 +15,73 @@ const DEF_OPTIONS: DialogOptions = {
   // center: false,
   // footer: true,
   // closeOnClickModal: true
-};
+}
 
 export function createDialog() {
   const Dialog = {
     _context: {},
     // 核心创建方法
     create(options: DialogOptions): DialogReturnObject {
-      const mergedOptions = { ...DEF_OPTIONS, ...options };
+      const mergedOptions = { ...DEF_OPTIONS, ...options }
       // 创建容器
-      const container = document.createElement('div');
-      document.body.appendChild(container);
+      const container = document.createElement('div')
+      document.body.appendChild(container)
 
       // 状态管理
-      const visible = ref(true);
-      const dialogOptions = ref(mergedOptions || {});
+      const visible = ref(true)
+      const dialogOptions = ref(mergedOptions || {})
 
       // 创建弹窗应用
       const dialogApp = createApp({
         setup() {
           // 关闭处理
           const closed = () => {
-            dialogApp.unmount();
-            container.remove();
-          };
+            dialogApp.unmount()
+            container.remove()
+          }
 
           return () =>
             h(GiDialog, {
               ...dialogOptions.value,
-              modelValue: visible.value,
+              'modelValue': visible.value,
               'onUpdate:modelValue': (val: boolean) => (visible.value = val),
-              onClosed: () => closed()
-            });
+              'onClosed': () => closed()
+            })
         }
-      });
+      })
 
-      dialogApp.use(ElementPlus);
+      dialogApp.use(ElementPlus)
 
       // 继承主应用的上下文
-      Object.assign(dialogApp._context, Dialog._context);
+      Object.assign(dialogApp._context, Dialog._context)
 
       // 挂载
-      dialogApp.mount(container);
+      dialogApp.mount(container)
 
       return {
         /** 关闭对话框 */
         close: () => {
-          visible.value = false;
+          visible.value = false
           setTimeout(() => {
-            dialogApp.unmount();
-            container.remove();
-          }, 300);
+            dialogApp.unmount()
+            container.remove()
+          }, 300)
         },
         /** 更新对话框 */
         update: (newProps?: Record<string, any>) => {
-          dialogOptions.value = { ...dialogOptions.value, ...newProps };
+          dialogOptions.value = { ...dialogOptions.value, ...newProps }
         }
-      };
+      }
     },
 
     /** 对话框-打开 */
     open(options: DialogOptions) {
-      return this.create(options);
+      return this.create(options)
     }
-  };
+  }
 
-  return Dialog;
+  return Dialog
 }
 
 // 默认导出实例
-export const Dialog = createDialog();
+export const Dialog = createDialog()

package/packages/components/dialog/src/dialog.vue

@@ -18,9 +18,11 @@
       <slot name="footer">
         <template v-if="typeof props.footer === 'boolean'">
           <el-space :size="10">
-            <el-button v-bind="props.cancelButtonProps" @click="handleCancel">{{
+            <el-button v-bind="props.cancelButtonProps" @click="handleCancel">
+{{
               props.cancelText
-            }}</el-button>
+            }}
+</el-button>
             <el-button
               type="primary"
               v-bind="props.okButtonProps"
@@ -40,15 +42,15 @@
 </template>
 
 <script lang="ts" setup>
-import type { VNode } from 'vue';
-import type { DialogProps } from './type';
-import { computed, defineProps, defineSlots, ref } from 'vue';
-import { useBemClass } from '../../../hooks';
+import type { VNode } from 'vue'
+import type { DialogProps } from './type'
+import { computed, defineProps, defineSlots, ref } from 'vue'
+import { useBemClass } from '../../../hooks'
 
 const visible = defineModel('modelValue', {
   type: Boolean,
   default: false
-});
+})
 
 const props = withDefaults(defineProps<DialogProps>(), {
   closeOnClickModal: true,
@@ -58,23 +60,23 @@ const props = withDefaults(defineProps<DialogProps>(), {
   cancelText: '取消',
   width: 'calc(100% - 20px)',
   alignCenter: true
-});
+})
 
 defineSlots<{
-  title: () => VNode;
-  footer: () => VNode;
-  default: () => VNode;
-}>();
+  title: () => VNode
+  footer: () => VNode
+  default: () => VNode
+}>()
 
-const { b } = useBemClass();
+const { b } = useBemClass()
 
 const getClass = computed(() => {
-  const arr: string[] = [b('dialog')];
+  const arr: string[] = [b('dialog')]
   if (props.simple) {
-    arr.push(b('dialog--simple'));
+    arr.push(b('dialog--simple'))
   }
-  return arr.join(' ');
-});
+  return arr.join(' ')
+})
 
 const dialogProps = computed(() => {
   return {
@@ -89,34 +91,34 @@ const dialogProps = computed(() => {
     onBeforeOk: undefined,
     onCancel: undefined,
     simple: undefined
-  };
-});
+  }
+})
 
-const okLoading = ref(false);
+const okLoading = ref(false)
 
 const handleCancel = () => {
-  props.onCancel?.();
-  visible.value = false;
-};
+  props.onCancel?.()
+  visible.value = false
+}
 
 const handleOk = async () => {
   if (props.onBeforeOk) {
     try {
-      okLoading.value = true;
-      const flag = await props.onBeforeOk();
-      okLoading.value = false;
+      okLoading.value = true
+      const flag = await props.onBeforeOk()
+      okLoading.value = false
       if (flag) {
-        visible.value = false;
+        visible.value = false
       }
     } catch (error) {
-      console.error('error', error);
-      okLoading.value = false;
+      console.error('error', error)
+      okLoading.value = false
     }
   } else {
-    props.onOk?.();
-    visible.value = false;
+    props.onOk?.()
+    visible.value = false
   }
-};
+}
 </script>
 
 <style lang="scss" scoped></style>

package/packages/components/dialog/src/type.ts

@@ -1,16 +1,16 @@
-import type { ButtonProps, DialogProps as ElDialogProps } from 'element-plus';
-import type { CSSProperties, VNode } from 'vue';
+import type { ButtonProps, DialogProps as ElDialogProps } from 'element-plus'
+import type { CSSProperties, VNode } from 'vue'
 
 export interface DialogProps extends Partial<ElDialogProps> {
-  content?: string | (() => VNode);
-  footer?: boolean | (() => VNode);
-  okText?: string;
-  cancelText?: string;
-  okButtonProps?: Partial<ButtonProps>;
-  cancelButtonProps?: Partial<ButtonProps>;
-  style?: CSSProperties;
-  simple?: boolean; // 简单模式
-  onOk?: () => void;
-  onBeforeOk?: () => Promise<boolean>;
-  onCancel?: () => void;
+  content?: string | (() => VNode)
+  footer?: boolean | (() => VNode)
+  okText?: string
+  cancelText?: string
+  okButtonProps?: Partial<ButtonProps>
+  cancelButtonProps?: Partial<ButtonProps>
+  style?: CSSProperties
+  simple?: boolean // 简单模式
+  onOk?: () => void
+  onBeforeOk?: () => Promise<boolean>
+  onCancel?: () => void
 }

package/packages/components/edit-table/index.ts

@@ -1,5 +1,5 @@
-import EditTable from './src/edit-table.vue';
+import EditTable from './src/edit-table.vue'
 
-export type EditTableInstance = InstanceType<typeof EditTable>;
-export * from './src/type';
-export default EditTable;
+export type EditTableInstance = InstanceType<typeof EditTable>
+export * from './src/type'
+export default EditTable