gi-component 0.0.49 → 0.0.51

package/dist/components.d.ts

@@ -1,27 +0,0 @@
-/* eslint-disable */
-// @ts-nocheck
-// Generated by scripts/generate-components-dts.js - 用于主项目全局组件类型提示
-export {}
-
-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']
-  }
-}

package/packages/components/button/index.ts

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

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

@@ -1,60 +0,0 @@
-<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/button/src/type.ts

@@ -1,15 +0,0 @@
-import type { ButtonProps as ElButtonProps } from 'element-plus'
-
-export interface ButtonProps extends Partial<Omit<ElButtonProps, 'type'>> {
-  type?:
-    | 'add'
-    | 'edit'
-    | 'delete'
-    | 'search'
-    | 'reset'
-    | 'upload'
-    | 'download'
-    | 'print'
-    | ''
-    | ElButtonProps['type']
-}

package/packages/components/card/index.ts

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

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

@@ -1,171 +0,0 @@
-<template>
-  <div :class="getCardClass">
-    <section :class="getHeaderClass" :style="props.headerStyle">
-      <div :class="b('card-header__title')">
-        <slot name="title">{{ props.title }}</slot>
-      </div>
-      <div :class="b('card-header__extra')">
-        <ElSpace>
-          <slot name="extra">{{ props.extra }}</slot>
-        </ElSpace>
-      </div>
-    </section>
-    <section :class="b('card-body')" :style="props.bodyStyle">
-      <slot></slot>
-    </section>
-    <section v-if="slot.footer" :class="b('card-footer')">
-      <slot name="footer"></slot>
-    </section>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { CardProps } from './type'
-import { ElSpace } from 'element-plus'
-import { computed, useSlots } from 'vue'
-import { useBemClass } from '../../../hooks'
-
-const props = withDefaults(defineProps<CardProps>(), {
-  title: '',
-  extra: '',
-  size: 'middle' as const,
-  bordered: false,
-  headerBordered: true,
-  headerStyle: () => ({}),
-  bodyStyle: () => ({}),
-  inner: false
-})
-
-defineSlots<{
-  default: () => void
-  title: () => void
-  extra: () => void
-  footer: () => void
-}>()
-
-const slot = useSlots()
-const { b } = useBemClass()
-
-const getCardClass = computed(() => {
-  const arr: string[] = [b('card')]
-  if (props.bordered) {
-    arr.push(b('card--bordered'))
-  }
-  arr.push(b(`card--${props.size}`))
-  if (props.inner) {
-    arr.push(b('card--inner'))
-  }
-  return arr.join(' ')
-})
-
-const getHeaderClass = computed(() => {
-  const arr: string[] = [b('card-header')]
-  if (props.headerBordered) {
-    arr.push(b('card-header--bordered'))
-  }
-  return arr.join(' ')
-})
-</script>
-
-<style lang="scss" scoped>
-@use '../../../styles/var.scss' as a;
-
-.#{a.$prefix}-card {
-  width: 100%;
-  background-color: var(--el-bg-color);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  box-sizing: border-box;
-  --card-padding-x: var(--padding);
-  --card-padding-x-small: 10px;
-  --card-padding-y: var(--padding);
-  --card-padding-y-small: 10px;
-
-  &--bordered {
-    border: 1px solid var(--el-border-color);
-  }
-}
-
-.#{a.$prefix}-card-header {
-  height: 46px;
-  padding: 0 var(--card-padding-x);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  color: var(--el-text-color-primary);
-  box-sizing: border-box;
-  position: relative;
-  flex-shrink: 0;
-
-  &__title {
-    position: relative;
-    line-height: 1.3em;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    box-sizing: border-box;
-    font-weight: 500;
-    font-size: 16px;
-  }
-
-  &__extra {
-    display: flex;
-  }
-
-  &--bordered {
-    border-bottom: 1px solid var(--el-border-color);
-  }
-}
-
-.#{a.$prefix}-card-body {
-  padding: var(--card-padding-x);
-  box-sizing: border-box;
-  overflow: hidden;
-  height: 100%;
-}
-
-.#{a.$prefix}-card-footer {
-  padding: var(--card-padding-y) var(--card-padding-x);
-  box-sizing: border-box;
-  border-top: 1px solid var(--el-border-color);
-  box-sizing: border-box;
-}
-
-.#{a.$prefix}-card--small {
-  .#{a.$prefix}-card-header {
-    height: 36px;
-    padding: 0 var(--card-padding-x-small);
-
-    &__title {
-      font-size: 14px;
-    }
-  }
-
-  .#{a.$prefix}-card-body {
-    padding: var(--card-padding-x-small);
-  }
-
-  .#{a.$prefix}-card-footer {
-    padding: var(--card-padding-y-small) var(--card-padding-x-small);
-  }
-}
-
-.#{a.$prefix}-card--full {
-  .#{a.$prefix}-card-body {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-  }
-}
-
-.#{a.$prefix}-card--inner {
-
-  .#{a.$prefix}-card-header,
-  .#{a.$prefix}-card-body,
-  .#{a.$prefix}-card-footer {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-</style>

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

@@ -1,12 +0,0 @@
-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 // 内嵌模式
-}

package/packages/components/descriptions/index.ts

@@ -1,5 +0,0 @@
-import Descriptions from './src/descriptions.vue'
-
-export type DescriptionsInstance = InstanceType<typeof Descriptions>
-export * from './src/type'
-export default Descriptions

package/packages/components/descriptions/src/descriptions.vue

@@ -1,72 +0,0 @@
-<template>
-  <ElDescriptions :border="border" :column="column" :direction="direction" :size="size" :title="title" :extra="extra">
-    <template v-if="$slots.title" #title>
-      <slot name="title" />
-    </template>
-    <template v-if="$slots.extra" #extra>
-      <slot name="extra" />
-    </template>
-    <template v-if="useColumns">
-      <ElDescriptionsItem v-for="(col, idx) in columns" :key="col.value ?? idx"
-        :label="typeof col.label === 'string' ? col.label : ''" :span="col.span ?? 1" :width="col.width"
-        :min-width="col.minWidth" :align="col.align ?? 'left'" :label-align="col.labelAlign" :class-name="col.className"
-        :label-class-name="col.labelClassName">
-        <template v-if="typeof col.label === 'function'" #label>
-          <NodeRenderer :get-node="() => (col.label as (c: DescriptionsColumnItem) => any)(col)" />
-        </template>
-        <slot v-if="hasColumnSlot(col.value)" :name="col.value" :value="getFieldValue(col)" :data="data" :column="col" />
-        <NodeRenderer v-else-if="col.render && data" :get-node="() => col.render!({ value: getFieldValue(col), data, column: col })" />
-        <span v-else>{{ getFieldValue(col) }}</span>
-      </ElDescriptionsItem>
-    </template>
-    <template v-else>
-      <slot />
-    </template>
-  </ElDescriptions>
-</template>
-
-<script setup lang="ts">
-import type { DescriptionsColumnItem, DescriptionsProps } from './type'
-import { ElDescriptions, ElDescriptionsItem } from 'element-plus'
-import { computed, defineComponent, useSlots } from 'vue'
-
-const props = withDefaults(defineProps<DescriptionsProps>(), {
-  columns: () => [],
-  data: () => ({}),
-  border: false,
-  column: 3,
-  direction: 'horizontal',
-  size: 'default',
-  title: '',
-  extra: ''
-})
-
-defineSlots<{
-  default?: () => any
-  title?: () => any
-  extra?: () => any
-}>()
-
-const NodeRenderer = defineComponent({
-  name: 'NodeRenderer',
-  props: {
-    getNode: { type: Function, required: true }
-  },
-  setup(props: { getNode: () => any }) {
-    return () => props.getNode()
-  }
-})
-
-const slots = useSlots()
-const useColumns = computed(() => (props.columns?.length ?? 0) > 0)
-
-function hasColumnSlot(name: string | undefined): boolean {
-  return !!name && !!(slots as Record<string, unknown>)[name]
-}
-
-function getFieldValue(col: DescriptionsColumnItem) {
-  if (!props.data || col.value === undefined || col.value === null)
-    return ''
-  return props.data[col.value]
-}
-</script>

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

@@ -1,44 +0,0 @@
-import type { VNode } from 'vue'
-
-/** 描述列表列配置（对应 data 的字段与展示） */
-export interface DescriptionsColumnItem {
-  /** 对应 data 的字段名 */
-  value?: string
-  /** 标签文本，或返回 VNode 的函数 */
-  label?: string | ((columnItem: DescriptionsColumnItem) => VNode)
-  /** 列的数量（占据几列） */
-  span?: number
-  /** 列宽度（如无 border，宽度包含标签与内容） */
-  width?: string | number
-  /** 列最小宽度，剩余宽度按比例分配给设置了 minWidth 的列 */
-  minWidth?: string | number
-  /** 列内容对齐方式 */
-  align?: 'left' | 'center' | 'right'
-  /** 列标签对齐方式（无 border 时用 align） */
-  labelAlign?: 'left' | 'center' | 'right'
-  /** 列内容自定义类名 */
-  className?: string
-  /** 列标签自定义类名 */
-  labelClassName?: string
-  /** 自定义渲染内容：({ value, data, column }) => VNode */
-  render?: (params: { value: any; data: Record<string, any>; column: DescriptionsColumnItem }) => VNode
-}
-
-export interface DescriptionsProps {
-  /** 描述列表配置项，与 data 配合使用 */
-  columns?: DescriptionsColumnItem[]
-  /** 详情数据（与 columns 配合，按 value 取字段） */
-  data?: Record<string, any>
-  /** 是否带边框 */
-  border?: boolean
-  /** 一行 Descriptions Item 的数量 */
-  column?: number
-  /** 排列方向 */
-  direction?: 'vertical' | 'horizontal'
-  /** 列表尺寸 */
-  size?: 'large' | 'default' | 'small'
-  /** 标题文本，显示在左上方，也可用 title 插槽 */
-  title?: string
-  /** 操作区，显示在右上方，也可用 extra 插槽 */
-  extra?: string
-}

package/packages/components/dialog/index.ts

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

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

@@ -1,40 +0,0 @@
-<template>
-  <div class="el-message-box__container" :class="b('dialog-content')">
-    <el-icon class="el-message-box__status" :class="`el-message-box-icon--${props.type}`">
-      <InfoFilled v-if="props.type === 'info'" />
-      <SuccessFilled v-else-if="props.type === 'success'" />
-      <WarningFilled v-else-if="props.type === 'warning'" />
-      <CircleCloseFilled v-else-if="props.type === 'error'" />
-    </el-icon>
-    <div class="el-message-box__message">
-      <p>{{ props.content }}</p>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { CircleCloseFilled, InfoFilled, SuccessFilled, WarningFilled } from '@element-plus/icons-vue'
-import { useBemClass } from '../../../hooks'
-
-interface Props {
-  type?: 'info' | 'success' | 'warning' | 'error'
-  content?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  type: 'info',
-  content: ''
-})
-
-const { b } = useBemClass()
-</script>
-
-<style lang="scss" scoped>
-@use '../../../styles/var.scss' as a;
-
-.#{a.$prefix}-dialog-content {
-  .el-message-box__message {
-    font-size: 15px;
-  }
-}
-</style>

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

@@ -1,131 +0,0 @@
-import type { DialogInstance } from '../index'
-import ElementPlus from 'element-plus'
-import { createApp, h, ref } from 'vue'
-import DialogContent from './dialog-content.vue'
-import GiDialog from './dialog.vue'
-
-export type DialogOptions = Partial<DialogInstance['$props']>
-
-export interface DialogReturnObject {
-  close: () => void
-  update: (newProps?: Record<string, any>) => void
-}
-
-const DEF_OPTIONS: DialogOptions = {
-  // width: '600px',
-  // center: false,
-  // footer: true,
-  // closeOnClickModal: true
-}
-
-export function createDialog() {
-  const Dialog = {
-    _context: {},
-    // 核心创建方法
-    create(options: DialogOptions): DialogReturnObject {
-      const mergedOptions = { ...DEF_OPTIONS, ...options }
-      // 创建容器
-      const container = document.createElement('div')
-      document.body.appendChild(container)
-
-      // 状态管理
-      const visible = ref(true)
-      const dialogOptions = ref(mergedOptions || {})
-
-      // 创建弹窗应用
-      const dialogApp = createApp({
-        setup() {
-          // 关闭处理
-          const closed = () => {
-            dialogApp.unmount()
-            container.remove()
-          }
-
-          return () =>
-            h(GiDialog, {
-              ...dialogOptions.value,
-              'modelValue': visible.value,
-              'onUpdate:modelValue': (val: boolean) => (visible.value = val),
-              'onClosed': () => closed()
-            })
-        }
-      })
-
-      dialogApp.use(ElementPlus)
-
-      // 继承主应用的上下文
-      Object.assign(dialogApp._context, Dialog._context)
-
-      // 挂载
-      dialogApp.mount(container)
-
-      return {
-        /** 关闭对话框 */
-        close: () => {
-          visible.value = false
-          setTimeout(() => {
-            dialogApp.unmount()
-            container.remove()
-          }, 300)
-        },
-        /** 更新对话框 */
-        update: (newProps?: Record<string, any>) => {
-          dialogOptions.value = { ...dialogOptions.value, ...newProps }
-        }
-      }
-    },
-
-    /** 对话框-打开 */
-    open(options: DialogOptions) {
-      return this.create(options)
-    },
-
-    info(options: DialogOptions) {
-      return this.create({
-        ...options,
-        content: () => h(DialogContent, { type: 'info', content: options.content as string }),
-        simple: true,
-        style: { maxWidth: '420px', ...options.style },
-        lockScroll: false
-      })
-    },
-
-    success(options: DialogOptions) {
-      return this.create({
-        ...options,
-        content: () => h(DialogContent, { type: 'success', content: options.content as string }),
-        simple: true,
-        style: { maxWidth: '420px', ...options.style },
-        lockScroll: false
-      })
-    },
-
-    warning(options: DialogOptions) {
-      return this.create({
-        ...options,
-        content: () => h(DialogContent, { type: 'warning', content: options.content as string }),
-        simple: true,
-        style: { maxWidth: '420px', ...options.style },
-        lockScroll: false
-      })
-    },
-
-    error(options: DialogOptions) {
-      return this.create({
-        ...options,
-        content: () => h(DialogContent, { type: 'error', content: options.content as string }),
-        simple: true,
-        style: { maxWidth: '420px', ...options.style },
-        lockScroll: false
-      })
-    }
-  }
-
-  return Dialog
-}
-
-// 默认导出实例
-export const Dialog = createDialog()
-
-// 防止打包时 tree-shake 掉 info/success/warning/error（此处引用保证被打包）
-void [Dialog.info, Dialog.success, Dialog.warning, Dialog.error]