gi-component 0.0.37 → 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,7 +1,7 @@
 {
   "name": "gi-component",
   "type": "module",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "description": "Vue3中基于Element Plus二次封装基础组件库",
   "author": "lin",
   "license": "MIT",

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.d.ts

@@ -15,6 +15,7 @@ declare module 'vue' {
     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']

package/packages/index.ts

@@ -6,6 +6,7 @@ import DialogComponent, { Dialog as DialogFunction } from './components/dialog'
 import Dot from './components/dot'
 import Drawer from './components/drawer'
 import EditTable from './components/edit-table'
+import Flex from './components/flex'
 import Form from './components/form'
 import GridItem from './components/grid/src/grid-item.vue'
 import Grid from './components/grid/src/grid.vue'
@@ -37,6 +38,7 @@ const components = {
   Tabs,
   InputGroup,
   InputSearch,
+  Flex,
   Grid,
   GridItem,
   Form,
@@ -55,6 +57,7 @@ export const GiDot: typeof Dot = Dot
 export const GiTabs: typeof Tabs = Tabs
 export const GiInputGroup: typeof InputGroup = InputGroup
 export const GiInputSearch: typeof InputSearch = InputSearch
+export const GiFlex: typeof Flex = Flex
 export const GiGrid: typeof Grid = Grid
 export const GiGridItem: typeof GridItem = GridItem
 export const GiForm: typeof Form = Form