gi-component 0.0.49 → 0.0.50

package/packages/components/page-layout/src/page-layout.vue

@@ -1,203 +0,0 @@
-<template>
-  <ElSplitter ref="splitterRef" :class="getClass">
-    <ElSplitterPanel v-if="slots.left" v-model:size="size">
-      <div :class="b('page-layout__left')" :style="props.leftStyle">
-        <slot name="left"></slot>
-      </div>
-    </ElSplitterPanel>
-    <div v-if="slots.left && props.collapse" :class="b('page-layout__split')">
-      <SplitButton :collapsed="Number(size) === 0" @click="handleClick"></SplitButton>
-    </div>
-    <ElSplitterPanel :resizable="props.collapse">
-      <div :class="b('page-layout__right')">
-        <div v-if="slots.header" :class="b('page-layout__header')" :style="props.headerStyle">
-          <slot name="header"></slot>
-        </div>
-        <div v-if="slots.tool" :class="b('page-layout__tool')" :style="props.toolStyle">
-          <slot name="tool"></slot>
-        </div>
-        <div :class="b('page-layout__body')" :style="props.bodyStyle">
-          <slot></slot>
-        </div>
-      </div>
-    </ElSplitterPanel>
-  </ElSplitter>
-</template>
-
-<script lang="ts" setup>
-import type { PageLayoutProps } from './type'
-import { ElSplitter, ElSplitterPanel } from 'element-plus'
-import { computed, onBeforeUnmount, ref, useSlots } from 'vue'
-import { useBemClass } from '../../../hooks'
-import SplitButton from './split-button.vue'
-import { useAutoCollapse } from './useAutoCollapse'
-
-const props = withDefaults(defineProps<PageLayoutProps>(), {
-  size: 270,
-  bordered: false,
-  collapse: true,
-  autoCollapse: false,
-  collapseBreakpoint: 850,
-  leftStyle: () => ({}),
-  headerStyle: () => ({}),
-  toolStyle: () => ({}),
-  bodyStyle: () => ({})
-})
-
-defineSlots<{
-  header: () => void
-  left: () => void
-  tool: () => void
-  default: () => void
-}>()
-
-const slots = useSlots()
-const { b } = useBemClass()
-const splitterRef = ref<InstanceType<typeof ElSplitter>>()
-const size = ref(props.size)
-const collapsing = ref(false)
-let collapsingTimer: ReturnType<typeof setTimeout> | null = null
-
-const COLLAPSE_TRANSITION_MS = 300
-
-function setCollapsingSize(newSize: typeof size.value) {
-  if (collapsingTimer) {
-    clearTimeout(collapsingTimer)
-  }
-  collapsing.value = true
-  collapsingTimer = setTimeout(() => {
-    collapsing.value = false
-    collapsingTimer = null
-  }, COLLAPSE_TRANSITION_MS)
-  size.value = newSize
-}
-
-const autoCollapseEnabled = props.collapse && props.autoCollapse && !!slots.left && !!props.collapseBreakpoint
-
-useAutoCollapse({
-  splitterRef,
-  size,
-  enabled: autoCollapseEnabled,
-  collapseBreakpoint: props.collapseBreakpoint,
-  panelSize: () => props.size,
-  setCollapsingSize
-})
-
-onBeforeUnmount(() => {
-  if (collapsingTimer) {
-    clearTimeout(collapsingTimer)
-    collapsingTimer = null
-  }
-})
-
-const getClass = computed(() => {
-  const arr: string[] = [b('page-layout')]
-  if (props.bordered) {
-    arr.push(b('page-layout--bordered'))
-  }
-  if (slots.header) {
-    arr.push(b('page-layout--has-header'))
-  }
-  if (slots.tool) {
-    arr.push(b('page-layout--has-tool'))
-  }
-  if (collapsing.value) {
-    arr.push(b('page-layout--collapsing'))
-  }
-  return arr.join(' ')
-})
-
-function handleClick() {
-  setCollapsingSize(Number(size.value) > 30 ? 0 : props.size)
-}
-</script>
-
-<style lang="scss" scoped>
-@use '../../../styles/var.scss' as a;
-
-:deep(.el-splitter-bar__dragger-horizontal) {
-
-  &::before,
-  &::after {
-    width: 1px;
-  }
-}
-
-.#{a.$prefix}-page-layout {
-  flex: 1;
-  width: auto;
-  height: 100%;
-  display: flex;
-  overflow: hidden;
-  background-color: var(--el-bg-color);
-
-  &--bordered {
-    border: 1px solid var(--el-border-color);
-  }
-
-  &__left {
-    width: 100%;
-    height: 100%;
-  }
-
-  &__right {
-    flex: 1;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    position: relative;
-  }
-}
-
-.#{a.$prefix}-page-layout__header {
-  padding: var(--padding);
-  padding-bottom: 0;
-  border-bottom: 1px solid var(--el-border-color);
-  box-sizing: border-box;
-}
-
-.#{a.$prefix}-page-layout__tool {
-  width: 100%;
-  padding: var(--padding);
-  padding-bottom: 0;
-  display: flex;
-  justify-content: end;
-  align-items: center;
-  box-sizing: border-box;
-}
-
-.#{a.$prefix}-page-layout__body {
-  flex: 1;
-  padding: var(--padding);
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-
-.#{a.$prefix}-page-layout--has-header {
-  .#{a.$prefix}-page-layout__tool {
-    padding-top: 10px;
-  }
-}
-
-.#{a.$prefix}-page-layout--has-tool {
-  .#{a.$prefix}-page-layout__body {
-    padding-top: 10px;
-  }
-}
-
-.#{a.$prefix}-page-layout__split {
-  width: 0;
-  height: auto;
-  position: relative;
-}
-
-.#{a.$prefix}-page-layout--collapsing {
-  :deep(.el-splitter-panel) {
-    transition: flex-basis 0.3s;
-  }
-}
-</style>

package/packages/components/page-layout/src/split-button.vue

@@ -1,107 +0,0 @@
-<template>
-  <div :class="getClass" @click="handleClick">
-    <ElIcon :size="props.iconSize">
-      <ArrowRightBold v-if="collapsed" :size="iconSize" />
-      <ArrowLeftBold v-else :size="iconSize" />
-    </ElIcon>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
-import { ElIcon } from 'element-plus'
-import { computed } from 'vue'
-import { useBemClass } from '../../../hooks'
-
-/** 按钮类型 */
-type ButtonType = 'default' | 'circle'
-
-/** 组件属性定义 */
-interface Props {
-  /** 是否折叠状态 */
-  collapsed?: boolean
-  /** 按钮类型 */
-  type?: ButtonType
-  /** 图标大小 */
-  iconSize?: number
-  /** 是否禁用 */
-  disabled?: boolean
-}
-
-/** 组件事件定义 */
-interface Emits {
-  (e: 'click'): void
-  (e: 'update:collapsed', value: boolean): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  collapsed: false,
-  type: 'circle',
-  iconSize: 10,
-  disabled: false
-})
-
-const emit = defineEmits<Emits>()
-const { b } = useBemClass()
-
-/** 计算按钮类名 */
-const getClass = computed(() => {
-  const arr: string[] = [b('split-button'), b(`split-button--${props.type}`)]
-  if (props.collapsed) {
-    arr.push(b('split-button--collapsed'))
-  }
-  if (props.disabled) {
-    arr.push(b('split-button--disabled'))
-  }
-  return arr.join(' ')
-})
-
-/** 处理点击事件 */
-const handleClick = () => {
-  if (props.disabled) return
-  emit('click')
-  emit('update:collapsed', !props.collapsed)
-}
-</script>
-
-<style lang="scss" scoped>
-@use '../../../styles/var.scss' as a;
-
-.#{a.$prefix}-split-button {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 9;
-  border: 1px solid var(--el-border-color);
-  background-color: var(--el-bg-color);
-  box-sizing: border-box;
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  will-change: transform, background-color, border-color;
-
-  &--disabled {
-    cursor: not-allowed;
-    opacity: 0.6;
-    pointer-events: none;
-  }
-
-  &--default {
-    width: 18px;
-    height: 40px;
-    left: 0;
-    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
-  }
-
-  &--circle {
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    left: -12px;
-    overflow: hidden;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-  }
-}
-</style>

package/packages/components/page-layout/src/type.ts

@@ -1,16 +0,0 @@
-import type { SplitterPanelProps } from 'element-plus'
-import type { CSSProperties } from 'vue'
-
-export interface PageLayoutProps {
-  size?: SplitterPanelProps['size']
-  bordered?: boolean
-  collapse?: boolean
-  /** 是否开启容器宽度自动折叠左侧面板 */
-  autoCollapse?: boolean
-  /** 容器宽度小于该值时自动折叠左侧面板，大于该值时自动展开（单位 px） */
-  collapseBreakpoint?: number
-  leftStyle?: CSSProperties
-  headerStyle?: CSSProperties
-  toolStyle?: CSSProperties
-  bodyStyle?: CSSProperties
-}

package/packages/components/page-layout/src/useAutoCollapse.ts

@@ -1,88 +0,0 @@
-import type { ElSplitter, SplitterPanelProps } from 'element-plus'
-import type { Ref } from 'vue'
-import { nextTick, onBeforeUnmount, onMounted } from 'vue'
-
-const RESIZE_DEBOUNCE_MS = 150
-
-export interface UseAutoCollapseOptions<TSize extends SplitterPanelProps['size'] = SplitterPanelProps['size']> {
-  splitterRef: Ref<InstanceType<typeof ElSplitter> | undefined>
-  size: Ref<TSize>
-  enabled: boolean
-  collapseBreakpoint: number
-  panelSize: () => TSize
-  setCollapsingSize: (newSize: TSize) => void
-}
-
-export function useAutoCollapse<TSize extends SplitterPanelProps['size']>(
-  options: UseAutoCollapseOptions<TSize>
-) {
-  if (!options.enabled) {
-    return
-  }
-
-  let resizeObserver: ResizeObserver | null = null
-  let debounceTimer: ReturnType<typeof setTimeout> | null = null
-
-  function getSplitterWidth() {
-    const el = options.splitterRef.value?.$el as HTMLElement | undefined
-    return el?.clientWidth ?? 0
-  }
-
-  function applyAutoCollapseWidth(width: number) {
-    const threshold = options.collapseBreakpoint
-
-    if (width < threshold && Number(options.size.value) > 30) {
-      options.setCollapsingSize(0 as TSize)
-    }
-    else if (width > threshold && Number(options.size.value) === 0) {
-      options.setCollapsingSize(options.panelSize())
-    }
-  }
-
-  function debouncedApplyAutoCollapseWidth() {
-    if (debounceTimer) {
-      clearTimeout(debounceTimer)
-    }
-    debounceTimer = setTimeout(() => {
-      debounceTimer = null
-      applyAutoCollapseWidth(getSplitterWidth())
-    }, RESIZE_DEBOUNCE_MS)
-  }
-
-  function clearDebounceTimer() {
-    if (debounceTimer) {
-      clearTimeout(debounceTimer)
-      debounceTimer = null
-    }
-  }
-
-  function bindResizeObserver() {
-    unbindResizeObserver()
-
-    const el = options.splitterRef.value?.$el as HTMLElement | undefined
-    if (!el || typeof ResizeObserver === 'undefined') {
-      return
-    }
-
-    resizeObserver = new ResizeObserver(() => {
-      debouncedApplyAutoCollapseWidth()
-    })
-    resizeObserver.observe(el)
-    applyAutoCollapseWidth(getSplitterWidth())
-  }
-
-  function unbindResizeObserver() {
-    resizeObserver?.disconnect()
-    resizeObserver = null
-  }
-
-  onMounted(async () => {
-    await nextTick()
-    bindResizeObserver()
-  })
-
-  onBeforeUnmount(() => {
-    clearDebounceTimer()
-    unbindResizeObserver()
-  })
-}

package/packages/components/table/index.ts

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

package/packages/components/table/src/TableColumn.vue

@@ -1,43 +0,0 @@
-<template>
-  <ElTableColumn v-bind="columnProps">
-    <!-- 处理render函数 -->
-    <template v-if="column.render" #default="scope">
-      <template v-if="typeof column.render(scope) === 'string'">{{ column.render(scope) }}</template>
-      <component :is="column.render(scope)" v-else />
-    </template>
-
-    <!-- 处理插槽内容 -->
-    <template v-else-if="column.slotName" #default="scope">
-      <slot :name="column.slotName" v-bind="scope" />
-    </template>
-
-    <!-- 递归渲染子列 -->
-    <template v-if="column.children && column.children.length > 0">
-      <TableColumn v-for="child in column.children" :key="child.prop || child.label" :column="child">
-        <!-- 将所有插槽传递给子组件 -->
-        <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="scope">
-          <slot :name="slotName" v-bind="scope" />
-        </template>
-      </TableColumn>
-    </template>
-  </ElTableColumn>
-</template>
-
-<script lang="ts" setup>
-import type { TableColumnItem } from './type'
-import { ElTableColumn } from 'element-plus'
-import { computed } from 'vue'
-import TableColumn from './TableColumn.vue'
-
-const props = defineProps<{
-  column: TableColumnItem
-}>()
-
-// 计算el-table-column需要的属性
-const columnProps = computed(() => {
-  const { slotName, render, children, ...restProps } = props.column
-  return restProps
-})
-</script>
-
-<style scoped></style>

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

@@ -1,89 +0,0 @@
-<template>
-  <div :class="b('table')">
-    <ElTable v-bind="tableProps" ref="tableRef" :data="props.data as any[]">
-      <TableColumn v-for="item in props.columns" :key="item.prop || item.label" :column="item">
-        <!-- 将所有插槽传递给子组件 -->
-        <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="scope">
-          <slot :name="slotName" v-bind="scope" />
-        </template>
-      </TableColumn>
-    </ElTable>
-
-    <ElRow v-if="props.pagination !== false" justify="end" :class="b('table-pagination')">
-      <ElPagination v-bind="paginationProps" :current-page="paginationProps.currentPage"
-        :page-size="paginationProps.pageSize" />
-    </ElRow>
-  </div>
-</template>
-
-<script lang="ts" setup generic="T extends DefaultRow">
-import type { DefaultRow, TableProps, TableSlotScope } from './type'
-import { ElPagination, ElRow, ElTable } from 'element-plus'
-import { computed, useAttrs, useTemplateRef } from 'vue'
-import { useBemClass } from '../../../hooks'
-import TableColumn from './TableColumn.vue'
-
-const props = withDefaults(defineProps<TableProps<T>>(), {
-  fit: true,
-  showHeader: true,
-  selectOnIndeterminate: true,
-  data: () => [],
-  columns: () => [],
-  pagination: () => ({})
-})
-
-defineSlots<{
-  append: () => void
-  empty: () => void
-  [propsName: string]: (props: TableSlotScope<T>) => void
-}>()
-
-const attrs = useAttrs()
-const { b } = useBemClass()
-const tableRef = useTemplateRef('tableRef')
-
-const tableProps = computed(() => {
-  return {
-    ...attrs,
-    ...props,
-    columns: undefined,
-    pagination: undefined
-  }
-})
-
-const paginationProps = computed(() => {
-  return {
-    background: true,
-    layout: 'prev, pager, next, sizes, total',
-    pageSizes: [10, 20, 50, 100],
-    ...(typeof props.pagination === 'boolean' ? {} : props.pagination)
-  }
-})
-
-defineExpose({
-  tableRef
-})
-</script>
-
-<style lang="scss" scoped>
-@use '../../../styles/var.scss' as a;
-
-:deep(.el-pagination__rightwrapper) {
-  flex: auto;
-}
-
-.#{a.$prefix}-table {
-  height: 100%;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-
-  :deep(.el-table) {
-    flex: 1;
-  }
-}
-
-.#{a.$prefix}-table-pagination {
-  margin-top: 12px;
-}
-</style>

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

@@ -1,24 +0,0 @@
-import type { TableProps as ElTableProps, PaginationProps, TableColumnInstance } from 'element-plus'
-import type { ExtractPropTypes, VNode } from 'vue'
-
-export type DefaultRow = Record<PropertyKey, any>
-
-export interface TableColumnItem<T extends DefaultRow = any> extends Omit<TableColumnInstance['$props'], never> {
-  slotName?: string
-  children?: TableColumnItem[]
-  render?: (scope: TableSlotScope<T>) => VNode | VNode[] | string
-}
-
-export type TableSlotScope<T extends DefaultRow = any> = {
-  $index: number
-  cellIndex: number
-  column: TableColumnInstance['$props']
-  row: T
-  expanded: boolean
-}
-
-export interface TableProps<T extends DefaultRow = any> extends ExtractPropTypes<ElTableProps<Record<string | number | symbol, any>>> {
-  data?: T[]
-  columns?: TableColumnItem[]
-  pagination?: Partial<PaginationProps> | boolean
-}

package/packages/components/tabs/index.ts

@@ -1,5 +0,0 @@
-import Tabs from './src/tabs.vue'
-
-export type TabsInstance = InstanceType<typeof Tabs>
-export * from './src/type'
-export default Tabs