gi-component 0.0.48 → 0.0.50

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

@@ -1,170 +0,0 @@
-<template>
-  <ElSplitter :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, ref, useSlots } from 'vue'
-import { useBemClass } from '../../../hooks'
-import SplitButton from './split-button.vue'
-
-const props = withDefaults(defineProps<PageLayoutProps>(), {
-  size: 270,
-  bordered: false,
-  collapse: true,
-  leftStyle: () => ({}),
-  headerStyle: () => ({}),
-  toolStyle: () => ({}),
-  bodyStyle: () => ({})
-})
-
-defineSlots<{
-  header: () => void
-  left: () => void
-  tool: () => void
-  default: () => void
-}>()
-
-const slots = useSlots()
-const { b } = useBemClass()
-const size = ref(props.size)
-const collapsing = ref(false)
-
-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() {
-  collapsing.value = true
-  setTimeout(() => {
-    collapsing.value = false
-  }, 300)
-  size.value = 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,12 +0,0 @@
-import type { SplitterPanelProps } from 'element-plus'
-import type { CSSProperties } from 'vue'
-
-export interface PageLayoutProps {
-  size?: SplitterPanelProps['size']
-  bordered?: boolean
-  collapse?: boolean
-  leftStyle?: CSSProperties
-  headerStyle?: CSSProperties
-  toolStyle?: CSSProperties
-  bodyStyle?: CSSProperties
-}

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: 10px;
-}
-</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

package/packages/components/tabs/src/tabs.vue

@@ -1,139 +0,0 @@
-<template>
-  <div :class="getClass">
-    <div :class="b('tabs__default')">
-      <slot>
-        <ElTabs v-model="model" :type="props.type" :stretch="props.stretch"
-          @tab-click="(p, e) => emits('tab-click', p, e)" @tab-change="emits('tab-change', $event as any)">
-          <ElTabPane v-for="item in props.options" :key="item.name" :name="item.name" :disabled="item?.disabled">
-            <template #label>
-              <slot name="label" :data="item">{{ item.label }}</slot>
-            </template>
-          </ElTabPane>
-        </ElTabs>
-      </slot>
-    </div>
-    <div v-if="slots.extra" :class="b('tabs__extra')">
-      <slot name="extra"></slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { TabsProps as ElTabsProps, TabsPaneContext } from 'element-plus'
-import type { TabsOptionItem, TabsProps } from './type.ts'
-import { ElTabPane, ElTabs } from 'element-plus'
-import { computed, useSlots } from 'vue'
-import { useBemClass } from '../../../hooks'
-
-const model = defineModel<ElTabsProps['modelValue']>()
-
-const props = withDefaults(defineProps<TabsProps>(), {
-  type: '',
-  options: () => [],
-  size: 'medium',
-  inner: false
-})
-
-const emits = defineEmits<{
-  (e: 'tab-click', pane: TabsPaneContext, ev: Event): void
-  (e: 'tab-change', value: string): void
-}>()
-
-defineSlots<{
-  default: () => void
-  extra: () => void
-  label: (e: { data: TabsOptionItem }) => void
-}>()
-
-const slots = useSlots()
-const { b } = useBemClass()
-
-const getClass = computed(() => {
-  const arr: string[] = [b('tabs')]
-  arr.push(b(`tabs--${props.size}`))
-  if (props.inner) {
-    arr.push(b('tabs--inner'))
-  }
-  return arr.join(' ')
-})
-</script>
-
-<style lang="scss" scoped>
-@use '../../../styles/var.scss' as a;
-
-:deep(.el-tabs__nav-prev),
-:deep(.el-tabs__nav-next) {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.#{a.$prefix}-tabs {
-  width: 100%;
-  padding: 0 var(--padding);
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid var(--el-border-color);
-  box-sizing: border-box;
-  background-color: var(--el-bg-color);
-
-  &__default {
-    flex: 1;
-    overflow: hidden;
-
-    :deep(.el-tabs__header) {
-      margin-bottom: 0;
-
-      .el-tabs__nav-wrap {
-        &::after {
-          display: none;
-        }
-      }
-    }
-
-    :deep(.el-tabs__active-bar) {
-      bottom: 1px;
-    }
-  }
-
-  &__extra {
-    margin-left: 10px;
-    align-self: flex-start;
-  }
-}
-
-:deep(.el-tabs--card) {
-  >.el-tabs__header {
-    border-bottom: none;
-  }
-}
-
-:deep(.el-tabs--border-card) {
-  border-bottom: none;
-
-  >.el-tabs__content {
-    display: none;
-  }
-
-  >.el-tabs__header {
-    border-bottom: none;
-  }
-}
-
-.#{a.$prefix}-tabs--small {
-  padding: 0 10px;
-
-  :deep(.el-tabs) {
-    --el-tabs-header-height: 32px;
-
-    .el-tabs__item {
-      font-size: 12px;
-    }
-  }
-}
-
-.#{a.$prefix}-tabs--inner {
-  padding: 0;
-}
-</style>

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

@@ -1,15 +0,0 @@
-import type { TabsProps as ElTabsProps } from 'element-plus'
-
-export type TabsOptionItem = {
-  label: string
-  name: string
-  disabled?: boolean
-}
-
-export interface TabsProps
-  extends Partial<Pick<ElTabsProps, 'type' | 'stretch'>> {
-  type?: ElTabsProps['type']
-  options?: TabsOptionItem[]
-  size?: 'small' | 'medium'
-  inner?: boolean // 内嵌模式
-}

package/packages/components/tag/index.ts

@@ -1,5 +0,0 @@
-import Tag from './src/tag.vue'
-
-export type TagInstance = InstanceType<typeof Tag>
-export * from './src/type'
-export default Tag