gi-component 0.0.49 → 0.0.51

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

@@ -1,114 +0,0 @@
-<template>
-  <ElDialog v-bind="dialogProps" v-model="visible" :class="getClass" :title="props.title"
-    :style="{ maxWidth: !props.fullscreen ? '480px' : '100%', ...props.style }">
-    <slot>
-      <template v-if="typeof props.content === 'string'">
-        <p>{{ props.content }}</p>
-      </template>
-      <template v-if="typeof props.content === 'function'">
-        <component :is="props?.content?.()"></component>
-      </template>
-    </slot>
-    <template v-if="props.footer" #footer>
-      <slot name="footer">
-        <template v-if="typeof props.footer === 'boolean'">
-          <ElSpace :size="10">
-            <ElButton v-bind="props.cancelButtonProps" @click="handleCancel">
-              {{ props.cancelText }}
-            </ElButton>
-            <ElButton type="primary" v-bind="props.okButtonProps" :loading="okLoading" @click="handleOk">
-              {{ props.okText }}
-            </ElButton>
-          </ElSpace>
-        </template>
-        <template v-else>
-          <component :is="props.footer()"></component>
-        </template>
-      </slot>
-    </template>
-  </ElDialog>
-</template>
-
-<script lang="ts" setup>
-import type { VNode } from 'vue'
-import type { DialogProps } from './type'
-import { ElButton, ElDialog, ElSpace } from 'element-plus'
-import { computed, ref } from 'vue'
-import { useBemClass } from '../../../hooks'
-
-const visible = defineModel('modelValue', {
-  type: Boolean,
-  default: false
-})
-
-const props = withDefaults(defineProps<DialogProps>(), {
-  closeOnClickModal: true,
-  showClose: true,
-  footer: true,
-  okText: '确认',
-  cancelText: '取消',
-  width: 'calc(100% - 20px)',
-  alignCenter: true,
-  lockScroll: true
-})
-
-defineSlots<{
-  title: () => VNode
-  footer: () => VNode
-  default: () => VNode
-}>()
-
-const { b } = useBemClass()
-
-const getClass = computed(() => {
-  const arr: string[] = [b('dialog')]
-  if (props.simple) {
-    arr.push(b('dialog--simple'))
-  }
-  return arr.join(' ')
-})
-
-const dialogProps = computed(() => {
-  return {
-    ...props,
-    content: undefined,
-    footer: undefined,
-    okText: undefined,
-    cancelText: undefined,
-    okButtonProps: undefined,
-    cancelButtonProps: undefined,
-    onOk: undefined,
-    onBeforeOk: undefined,
-    onCancel: undefined,
-    simple: undefined
-  }
-})
-
-const okLoading = ref(false)
-
-const handleCancel = () => {
-  props.onCancel?.()
-  visible.value = false
-}
-
-const handleOk = async () => {
-  if (props.onBeforeOk) {
-    try {
-      okLoading.value = true
-      const flag = await props.onBeforeOk()
-      okLoading.value = false
-      if (flag) {
-        visible.value = false
-      }
-    } catch (error) {
-      console.error('error', error)
-      okLoading.value = false
-    }
-  } else {
-    props.onOk?.()
-    visible.value = false
-  }
-}
-</script>
-
-<style lang="scss" scoped></style>

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

@@ -1,16 +0,0 @@
-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
-}

package/packages/components/dot/index.ts

@@ -1,5 +0,0 @@
-import Dot from './src/dot.vue'
-
-export type DotInstance = InstanceType<typeof Dot>
-export * from './src/type'
-export default Dot

package/packages/components/dot/src/dot.vue

@@ -1,107 +0,0 @@
-<template>
-  <span :class="getClass" :style="getStyle"></span>
-</template>
-
-<script setup lang="ts">
-import type { CSSProperties } from 'vue'
-import type { DotProps } from './type.ts'
-import { computed } from 'vue'
-import { useBemClass } from '../../../hooks'
-
-const props = withDefaults(defineProps<DotProps>(), {
-  type: 'circle',
-  size: 6,
-  color: 'primary'
-})
-
-const { b } = useBemClass()
-
-const getClass = computed(() => {
-  const arr = [b('dot'), b(`dot--${props.type}`)]
-  if (['primary', 'success', 'danger', 'warning', 'info'].includes(props.color)) {
-    arr.push(b(`dot--${props.color}`))
-  }
-  if (props.animation) {
-    arr.push(b('dot--animation'))
-  }
-  return arr.join(' ')
-})
-
-const getStyle = computed(() => {
-  const obj: CSSProperties = {}
-  if (props.color && !['primary', 'success', 'danger', 'warning', 'info'].includes(props.color)) {
-    obj.backgroundColor = props.color
-  }
-  if (props.size) {
-    obj.width = `${props.size}px`
-    obj.height = `${props.size}px`
-  }
-  return obj
-})
-</script>
-
-<style scoped lang="scss">
-@use '../../../styles/var.scss' as a;
-
-.#{a.$prefix}-dot {
-  display: inline-flex;
-  border-radius: 100px;
-  background-color: var(--el-color-info);
-}
-
-.#{a.$prefix}-dot--square {
-  border-radius: 0;
-}
-
-.#{a.$prefix}-dot--primary {
-  background-color: var(--el-color-primary);
-}
-
-.#{a.$prefix}-dot--success {
-  background-color: var(--el-color-success);
-}
-
-.#{a.$prefix}-dot--danger {
-  background-color: var(--el-color-danger);
-}
-
-.#{a.$prefix}-dot--warning {
-  background-color: var(--el-color-warning);
-}
-
-.#{a.$prefix}-dot--info {
-  background-color: var(--el-color-info);
-}
-
-.#{a.$prefix}-dot--animation {
-  position: relative;
-
-  &::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    content: '';
-    background: inherit;
-    border-radius: 50%;
-    animation: dot-animation 1.2s ease-in-out infinite;
-  }
-}
-
-@keyframes dot-animation {
-  0% {
-    opacity: 1;
-    transform: scale(0.5);
-  }
-
-  30% {
-    opacity: 0.7;
-  }
-
-  100% {
-    opacity: 0;
-    transform: scale(2.5);
-  }
-}
-</style>

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

@@ -1,6 +0,0 @@
-export interface DotProps {
-  type?: 'circle' | 'square'
-  size?: number
-  color?: string | 'primary' | 'success' | 'warning' | 'danger' | 'info'
-  animation?: boolean
-}

package/packages/components/drawer/index.ts

@@ -1,6 +0,0 @@
-import Drawer from './src/drawer.vue'
-
-export type DrawerInstance = InstanceType<typeof Drawer>
-export * from './src/drawer'
-export * from './src/type'
-export default Drawer

package/packages/components/drawer/src/drawer.ts

@@ -1,84 +0,0 @@
-import type { DrawerInstance } from '../index'
-import ElementPlus from 'element-plus'
-import { createApp, h, ref } from 'vue'
-import GiDrawer from './drawer.vue'
-
-export type DrawerOptions = Partial<DrawerInstance['$props']>
-
-export interface DrawerReturnObject {
-  close: () => void
-  update: (newProps?: Record<string, any>) => void
-}
-
-const DEF_OPTIONS: DrawerOptions = {
-
-}
-
-export function createDrawer() {
-  const Drawer = {
-    _context: {},
-    // 核心创建方法
-    create(options: DrawerOptions): DrawerReturnObject {
-      const mergedOptions = { ...DEF_OPTIONS, ...options }
-      // 创建容器
-      const container = document.createElement('div')
-      document.body.appendChild(container)
-
-      // 状态管理
-      const visible = ref(true)
-      const dialogOptions = ref(mergedOptions || {})
-
-      // 创建弹窗应用
-      const drawerApp = createApp({
-        setup() {
-          // 关闭处理
-          const closed = () => {
-            drawerApp.unmount()
-            container.remove()
-          }
-
-          return () =>
-            h(GiDrawer, {
-              ...dialogOptions.value,
-              'modelValue': visible.value,
-              'onUpdate:modelValue': (val: boolean) => (visible.value = val),
-              'onClosed': () => closed()
-            })
-        }
-      })
-
-      drawerApp.use(ElementPlus)
-
-      // 继承主应用的上下文
-      Object.assign(drawerApp._context, Drawer._context)
-
-      // 挂载
-      drawerApp.mount(container)
-
-      return {
-        /** 关闭抽屉 */
-        close: () => {
-          visible.value = false
-          setTimeout(() => {
-            drawerApp.unmount()
-            container.remove()
-          }, 300)
-        },
-        /** 更新抽屉 */
-        update: (newProps?: Record<string, any>) => {
-          dialogOptions.value = { ...dialogOptions.value, ...newProps }
-        }
-      }
-    },
-
-    /** 抽屉-打开 */
-    open(options: DrawerOptions) {
-      return this.create(options)
-    }
-  }
-
-  return Drawer
-}
-
-// 默认导出实例
-export const Drawer = createDrawer()

package/packages/components/drawer/src/drawer.vue

@@ -1,114 +0,0 @@
-<template>
-  <ElDrawer v-bind="dialogProps" v-model="visible" :class="getClass" :title="props.title" :style="{ ...props.style }">
-    <slot>
-      <template v-if="typeof props.content === 'string'">
-        <p>{{ props.content }}</p>
-      </template>
-      <template v-if="typeof props.content === 'function'">
-        <component :is="props?.content?.()"></component>
-      </template>
-    </slot>
-    <template v-if="props.footer" #footer>
-      <slot name="footer">
-        <template v-if="typeof props.footer === 'boolean'">
-          <ElSpace :size="10">
-            <ElButton v-bind="props.cancelButtonProps" @click="handleCancel">
-              {{ props.cancelText }}
-            </ElButton>
-            <ElButton type="primary" v-bind="props.okButtonProps" :loading="okLoading" @click="handleOk">
-              {{ props.okText }}
-            </ElButton>
-          </ElSpace>
-        </template>
-        <template v-else>
-          <component :is="props.footer()"></component>
-        </template>
-      </slot>
-    </template>
-  </ElDrawer>
-</template>
-
-<script lang="ts" setup>
-import type { VNode } from 'vue'
-import type { DrawerProps } from './type'
-import { ElButton, ElDrawer, ElSpace } from 'element-plus'
-import { computed, ref } from 'vue'
-import { useBemClass } from '../../../hooks'
-
-const visible = defineModel('modelValue', {
-  type: Boolean,
-  default: false
-})
-
-const props = withDefaults(defineProps<DrawerProps>(), {
-  title: '',
-  withHeader: true,
-  closeOnClickModal: true,
-  closeOnPressEscape: true,
-  lockScroll: true,
-  modal: true,
-  showClose: true,
-  footer: true,
-  okText: '确认',
-  cancelText: '取消',
-  size: '300px',
-  appendTo: 'body'
-})
-
-defineSlots<{
-  title: () => VNode
-  footer: () => VNode
-  default: () => VNode
-}>()
-
-const { b } = useBemClass()
-
-const getClass = computed(() => {
-  const arr: string[] = [b('drawer')]
-  return arr.join(' ')
-})
-
-const dialogProps = computed(() => {
-  return {
-    ...props,
-    content: undefined,
-    footer: undefined,
-    okText: undefined,
-    cancelText: undefined,
-    okButtonProps: undefined,
-    cancelButtonProps: undefined,
-    onOk: undefined,
-    onBeforeOk: undefined,
-    onCancel: undefined,
-    simple: undefined
-  }
-})
-
-const okLoading = ref(false)
-
-const handleCancel = () => {
-  props.onCancel?.()
-  visible.value = false
-}
-
-const handleOk = async () => {
-  if (props.onBeforeOk) {
-    try {
-      okLoading.value = true
-      const flag = await props.onBeforeOk()
-      okLoading.value = false
-      if (flag) {
-        visible.value = false
-      }
-    } catch (error) {
-      console.error('error', error)
-      okLoading.value = false
-    }
-  } else {
-    props.onOk?.()
-    visible.value = false
-  }
-}
-</script>
-
-<style lang="scss" scoped></style>

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

@@ -1,15 +0,0 @@
-import type { ButtonProps, DrawerProps as ElDrawerProps } from 'element-plus'
-import type { CSSProperties, VNode } from 'vue'
-
-export interface DrawerProps extends Partial<ElDrawerProps> {
-  content?: string | (() => VNode)
-  footer?: boolean | (() => VNode)
-  okText?: string
-  cancelText?: string
-  okButtonProps?: Partial<ButtonProps>
-  cancelButtonProps?: Partial<ButtonProps>
-  style?: CSSProperties
-  onOk?: () => void
-  onBeforeOk?: () => Promise<boolean>
-  onCancel?: () => void
-}

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

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

package/packages/components/edit-table/src/edit-table.vue

@@ -1,201 +0,0 @@
-<template>
-  <ElForm ref="formRef" :model="form" :class="b('edit-table')">
-    <ElTable :data="form.tableData" border v-bind="attrs">
-      <ElTableColumn v-for="(column, index) in props.columns" :key="column.prop + index" :width="column.width"
-        v-bind="column.columnProps" :prop="column.prop" :label="column.label"
-        :label-class-name="getLabelClassName(column)">
-        <template #default="scope">
-          <ElFormItem v-bind="column.formItemProps" :label="column.label"
-            :prop="`tableData[${scope.$index}].${column.prop}`" :rules="getFormItemRules(column)">
-            <template v-if="column.slotName">
-              <slot :name="column.slotName" v-bind="scope"></slot>
-            </template>
-            <template v-else-if="!column.type">
-              {{ scope.row[column.prop] }}
-            </template>
-            <component :is="COMP_MAP[column.type] || column.type" v-else v-bind="getComponentBindProps(column)"
-              v-model="scope.row[column.prop]" class="w-full" :disabled="isDisabled(scope)" />
-          </ElFormItem>
-        </template>
-      </ElTableColumn>
-    </ElTable>
-  </ElForm>
-</template>
-
-<script lang="ts" setup>
-import type { FormInstance } from 'element-plus'
-import type { EditTableColumnItem, EditTableColumnItemType } from './type'
-import type { EditTableProps } from './type.ts'
-import * as El from 'element-plus'
-import { ElForm, ElFormItem, ElTable, ElTableColumn } from 'element-plus'
-import { computed, ref, useAttrs } from 'vue'
-import { useBemClass } from '../../../hooks'
-import InputSearch from '../../input-search'
-
-const props = withDefaults(defineProps<EditTableProps>(), {
-  rowKey: 'id',
-  data: () => [],
-  columns: () => []
-})
-
-const attrs = useAttrs()
-const { b } = useBemClass()
-
-const COMP_MAP: Record<EditTableColumnItemType, any> = {
-  'input': El.ElInput,
-  'textarea': El.ElInput,
-  'input-number': El.ElInputNumber,
-  'input-tag': El.ElInputTag,
-  'select': El.ElSelect,
-  'select-v2': El.ElSelectV2,
-  'tree-select': El.ElTreeSelect,
-  'cascader': El.ElCascader,
-  'slider': El.ElSlider,
-  'switch': El.ElSwitch,
-  'rate': El.ElRate,
-  'checkbox-group': El.ElCheckboxGroup,
-  'checkbox': El.ElCheckbox,
-  'radio-group': El.ElRadioGroup,
-  'radio': El.ElRadio,
-  'date-picker': El.ElDatePicker,
-  'time-picker': El.ElTimePicker,
-  'time-select': El.ElTimeSelect,
-  'color-picker': El.ElColorPicker,
-  'transfer': El.ElTransfer,
-  'autocomplete': El.ElAutocomplete,
-  'upload': El.ElUpload,
-  'input-search': InputSearch,
-  'slot': undefined
-}
-
-const formRef = ref<FormInstance | null>()
-
-/** 表单数据 */
-const form = computed(() => ({ tableData: props.data }))
-
-const clearable = false
-/** 组件静态配置 */
-const STATIC_PROPS = new Map([
-  ['input', { clearable, maxlength: 20 }],
-  [
-    'textarea',
-    {
-      clearable,
-      type: 'textarea',
-      rows: 1,
-      maxlength: 200,
-      showWordLimit: true
-    }
-  ],
-  ['input-number', {}],
-  ['input-tag', { clearable }],
-  ['select', { clearable }],
-  ['select-v2', { clearable }],
-  ['tree-select', { clearable }],
-  ['cascader', { clearable }],
-  ['slider', {}],
-  ['switch', {}],
-  ['rate', {}],
-  ['checkbox-group', {}],
-  ['checkbox', {}],
-  ['radio-group', {}],
-  ['radio', {}],
-  ['date-picker', { clearable }],
-  ['time-picker', { clearable }],
-  ['time-select', { clearable }],
-  ['color-picker', {}],
-  ['transfer', {}],
-  ['autocomplete', {}],
-  ['upload', {}],
-  ['title', {}]
-])
-
-/** 占位符文本映射 */
-const PLACEHOLDER_MAP = new Map<EditTableColumnItemType, (label?: string) => string | undefined>([
-  ['input', (label) => `请输入${label}`],
-  ['input-number', (label) => `请输入${label}`],
-  ['input-tag', (label) => `请输入${label}`],
-  ['textarea', (label) => `请填写${label}`],
-  ['select', (label) => `请选择${label}`],
-  ['select-v2', (label) => `请选择${label}`],
-  ['tree-select', (label) => `请选择${label}`],
-  ['cascader', (label) => `请选择${label}`],
-  ['time-select', (label) => `请选择${label}`],
-  ['input-search', (label) => `请选择${label}`],
-  ['date-picker', () => '请选择日期'],
-  ['time-picker', () => '请选择时间']
-])
-
-/** 获取占位文本 */
-const getPlaceholder = (item: EditTableColumnItem): string | undefined => {
-  if (!item.type) return undefined
-  const placeholderFn = PLACEHOLDER_MAP.get(item.type)
-  return placeholderFn ? placeholderFn(item.label) : undefined
-}
-
-/** 组件的默认props配置 */
-function getComponentBindProps(item: EditTableColumnItem) {
-  // 获取默认配置
-  const defaultProps: Record<string, any> = { ...(STATIC_PROPS.get(item.type || '') || {}) }
-  const placeholder = getPlaceholder(item)
-  if (placeholder) {
-    defaultProps.placeholder = placeholder
-  }
-  // 日期选择器格式化
-  if (item.type === 'date-picker') {
-    defaultProps.valueFormat = item?.componentProps?.type === 'datetime' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'
-  }
-  // 合并默认配置和自定义配置
-  return { ...defaultProps, ...(item?.componentProps || {}) }
-}
-
-/** 表单项校验规则 */
-function getFormItemRules(item: EditTableColumnItem) {
-  const rules = Array.isArray(item.rules) ? item.rules : []
-  if (item.required) {
-    return [
-      { required: true, message: `${item.label}为必填项` },
-      ...rules
-    ]
-  }
-  return item.rules
-}
-
-/** 表头标题样式 */
-function getLabelClassName(item: EditTableColumnItem) {
-  if (item.required) return 'column-required'
-  return ''
-}
-
-/** 判断是否禁用 */
-const isDisabled = (scope: any): boolean => {
-  if (typeof props?.cellDisabled === 'function') {
-    return props.cellDisabled(scope)
-  }
-  return false
-}
-
-defineExpose({ formRef })
-</script>
-
-<style lang="scss" scoped>
-:deep(.el-form-item) {
-  margin-bottom: 0;
-
-  .el-form-item__label {
-    display: none;
-  }
-}
-
-:deep(.column-required) {
-  .cell {
-    position: relative;
-
-    &::after {
-      content: '*';
-      color: red;
-      margin-left: 2px;
-    }
-  }
-}
-</style>