gi-component 0.0.36 → 0.0.38

package/dist/types/tool.d.ts

@@ -1,6 +1,6 @@
 type AllKeys<T> = T extends any ? keyof T : never;
 type UnionType<T, K extends PropertyKey> = T extends any ? K extends keyof T ? T[K] : never : never;
 export type MergeMultiple<T extends any[]> = {
-    [K in AllKeys<T[number]>]: UnionType<T[number], K>;
+    [K in AllKeys<T[number]>]?: UnionType<T[number], K>;
 };
 export {};

package/package.json

@@ -1,72 +1,72 @@
-{
-  "name": "gi-component",
-  "type": "module",
-  "version": "0.0.36",
-  "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",
-    "二次封装组件",
-    "封装组件"
-  ],
-  "sideEffects": [
-    "packages/components/dialog/src/dialog.ts"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js"
-    },
-    "./dist/gi.css": "./dist/gi.css",
-    "./dist/components.d.ts": "./packages/components.d.ts"
-  },
-  "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",
-    "build:docs": "cd docs && pnpm build",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
-  },
-  "peerDependencies": {
-    "element-plus": "^2.11.0",
-    "vue": "^3.4.0"
-  },
-  "devDependencies": {
-    "@antfu/eslint-config": "^7.2.0",
-    "@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.39.2",
-    "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",
-    "xe-utils": "^3.7.9"
-  }
-}
+{
+  "name": "gi-component",
+  "type": "module",
+  "version": "0.0.38",
+  "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",
+    "二次封装组件",
+    "封装组件"
+  ],
+  "sideEffects": [
+    "packages/components/dialog/src/dialog.ts"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    },
+    "./dist/gi.css": "./dist/gi.css",
+    "./dist/components.d.ts": "./packages/components.d.ts"
+  },
+  "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",
+    "build:docs": "cd docs && pnpm build",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "peerDependencies": {
+    "element-plus": "^2.11.0",
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^7.2.0",
+    "@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.39.2",
+    "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",
+    "xe-utils": "^3.7.9"
+  }
+}

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

@@ -1,60 +1,60 @@
-<template>
-  <ElButton :class="b('button')" v-bind="bindProps" @click="(e: MouseEvent) => emit('click', e)">
-    <slot>{{ btnText }}</slot>
-  </ElButton>
-</template>
-
-<script setup lang="ts">
-import type { ButtonProps as ElButtonProps } from 'element-plus'
-import type { ButtonProps } from './type.ts'
-import {
-  Delete,
-  Download,
-  Edit,
-  Plus,
-  Printer,
-  Search,
-  Upload
-} from '@element-plus/icons-vue'
-import { ElButton } from 'element-plus'
-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 }, btnText: '上传' },
-  download: {
-    btnProps: { icon: Download },
-    btnText: '下载'
-  },
-  print: { btnProps: { icon: Printer }, btnText: '打印' }
-}
-
-const bindProps = computed(() => {
-  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
-})
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <ElButton :class="b('button')" v-bind="bindProps" @click="(e: MouseEvent) => emit('click', e)">
+    <slot>{{ btnText }}</slot>
+  </ElButton>
+</template>
+
+<script setup lang="ts">
+import type { ButtonProps as ElButtonProps } from 'element-plus'
+import type { ButtonProps } from './type.ts'
+import {
+  Delete,
+  Download,
+  Edit,
+  Plus,
+  Printer,
+  Search,
+  Upload
+} from '@element-plus/icons-vue'
+import { ElButton } from 'element-plus'
+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 }, btnText: '上传' },
+  download: {
+    btnProps: { icon: Download },
+    btnText: '下载'
+  },
+  print: { btnProps: { icon: Printer }, btnText: '打印' }
+}
+
+const bindProps = computed(() => {
+  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
+})
+</script>
+
+<style lang="scss" scoped></style>

package/packages/components/flex/index.ts

@@ -0,0 +1,5 @@
+import Flex from './src/flex.vue'
+
+export type FlexInstance = InstanceType<typeof Flex>
+export * from './src/type'
+export default Flex

package/packages/components/flex/src/flex.vue

@@ -0,0 +1,72 @@
+<template>
+  <div :class="classNames" :style="style">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import type { FlexProps } from './type'
+import { computed } from 'vue'
+import { useBemClass } from '../../../hooks'
+
+const props = withDefaults(defineProps<FlexProps>(), {
+  vertical: false,
+  wrap: false,
+  justify: 'normal',
+  align: 'normal',
+  flex: 'normal'
+})
+
+const { b } = useBemClass()
+
+const classNames = computed(() => [b('flex')])
+
+const gapMap: Record<string, string> = {
+  small: '8px',
+  middle: '16px',
+  large: '24px'
+}
+
+const resolvedGap = computed(() => {
+  if (props.gap === undefined || props.gap === null || props.gap === '')
+    return undefined
+  if (typeof props.gap === 'number')
+    return `${props.gap}px`
+  if (gapMap[props.gap])
+    return gapMap[props.gap]
+  return String(props.gap)
+})
+
+const resolvedWrap = computed(() => {
+  if (typeof props.wrap === 'boolean')
+    return props.wrap ? 'wrap' : 'nowrap'
+  // 模板中写 wrap 无值时 Vue 传空字符串，视为开启换行
+  if (props.wrap === '')
+    return 'wrap'
+  return props.wrap
+})
+
+const style = computed<CSSProperties>(() => {
+  const obj: CSSProperties = {
+    display: 'flex',
+    flexDirection: props.vertical ? 'column' : 'row',
+    flexWrap: resolvedWrap.value,
+    justifyContent: props.justify,
+    alignItems: props.align
+  }
+  if (props.flex !== 'normal') {
+    obj.flex = props.flex
+  }
+  if (resolvedGap.value) {
+    obj.gap = resolvedGap.value
+  }
+  return obj
+})
+</script>
+
+<style scoped lang="scss">
+:deep(.el-button+.el-button) {
+  margin-left: 0;
+}
+</style>

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

@@ -0,0 +1,14 @@
+export interface FlexProps {
+  /** Flex 主轴的方向是否垂直，使用 flex-direction: column */
+  vertical?: boolean
+  /** 设置元素单行显示还是多行显示，参考 flex-wrap；支持布尔值，true 为 wrap，false 为 nowrap */
+  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse' | boolean | ''
+  /** 设置元素在主轴方向上的对齐方式，参考 justify-content */
+  justify?: 'normal' | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'
+  /** 设置元素在交叉轴方向上的对齐方式，参考 align-items */
+  align?: 'normal' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'
+  /** flex CSS 简写属性 */
+  flex?: string
+  /** 设置网格之间的间隙，可选预设 small / middle / large 或 string / number */
+  gap?: 'small' | 'middle' | 'large' | string | number
+}

package/packages/components/table/index.ts

@@ -1,5 +1,5 @@
-import Table from './src/table.vue'
-
-export type TableInstance = InstanceType<typeof Table>
-export * from './src/type'
-export default Table
+import Table from './src/table.vue'
+
+export type TableInstance = InstanceType<typeof Table>
+export * from './src/type'
+export default Table

package/packages/components.d.ts

@@ -1,30 +1,31 @@
-/* eslint-disable */
-// @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
-// biome-ignore lint: disable
-export {}
-
-/* prettier-ignore */
-declare module 'vue' {
-  export interface GlobalComponents {
-    GiButton: typeof import('./components/button/src/button.vue')['default']
-    GiCard: typeof import('./components/card/src/card.vue')['default']
-    GiDialog: typeof import('./components/dialog/src/dialog.vue')['default']
-    GiDialogContent: typeof import('./components/dialog/src/dialog-content.vue')['default']
-    GiDot: typeof import('./components/dot/src/dot.vue')['default']
-    GiDrawer: typeof import('./components/drawer/src/drawer.vue')['default']
-    GiEditTable: typeof import('./components/edit-table/src/edit-table.vue')['default']
-    GiForm: typeof import('./components/form/src/form.vue')['default']
-    GiGrid: typeof import('./components/grid/src/grid.vue')['default']
-    GiGridItem: typeof import('./components/grid/src/grid-item.vue')['default']
-    GiInputGroup: typeof import('./components/input-group/src/input-group.vue')['default']
-    GiInputSearch: typeof import('./components/input-search/src/input-search.vue')['default']
-    GiPageLayout: typeof import('./components/page-layout/src/page-layout.vue')['default']
-    GiSplitButton: typeof import('./components/page-layout/src/split-button.vue')['default']
-    GiTable: typeof import('./components/table/src/table.vue')['default']
-    GiTableColumn: typeof import('./components/table/src/TableColumn.vue')['default']
-    GiTabs: typeof import('./components/tabs/src/tabs.vue')['default']
-    GiTreeTransfer: typeof import('./components/tree-transfer/src/tree-transfer.vue')['default']
-  }
-}
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    GiButton: typeof import('./components/button/src/button.vue')['default']
+    GiCard: typeof import('./components/card/src/card.vue')['default']
+    GiDialog: typeof import('./components/dialog/src/dialog.vue')['default']
+    GiDialogContent: typeof import('./components/dialog/src/dialog-content.vue')['default']
+    GiDot: typeof import('./components/dot/src/dot.vue')['default']
+    GiDrawer: typeof import('./components/drawer/src/drawer.vue')['default']
+    GiEditTable: typeof import('./components/edit-table/src/edit-table.vue')['default']
+    GiFlex: typeof import('./components/flex/src/flex.vue')['default']
+    GiForm: typeof import('./components/form/src/form.vue')['default']
+    GiGrid: typeof import('./components/grid/src/grid.vue')['default']
+    GiGridItem: typeof import('./components/grid/src/grid-item.vue')['default']
+    GiInputGroup: typeof import('./components/input-group/src/input-group.vue')['default']
+    GiInputSearch: typeof import('./components/input-search/src/input-search.vue')['default']
+    GiPageLayout: typeof import('./components/page-layout/src/page-layout.vue')['default']
+    GiSplitButton: typeof import('./components/page-layout/src/split-button.vue')['default']
+    GiTable: typeof import('./components/table/src/table.vue')['default']
+    GiTableColumn: typeof import('./components/table/src/TableColumn.vue')['default']
+    GiTabs: typeof import('./components/tabs/src/tabs.vue')['default']
+    GiTreeTransfer: typeof import('./components/tree-transfer/src/tree-transfer.vue')['default']
+  }
+}