gi-component 0.0.47 → 0.0.49

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gi-component",
   "type": "module",
-  "version": "0.0.47",
+  "version": "0.0.49",
   "description": "Vue3中基于Element Plus二次封装基础组件库",
   "author": "lin",
   "license": "MIT",

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

@@ -53,7 +53,7 @@ const bindProps = computed(() => {
 })
 
 const btnText = computed(() => {
-  return obj[props.type].btnText
+  return obj?.[props.type]?.btnText || ''
 })
 </script>
 

package/packages/components/flex/src/flex.vue

@@ -15,12 +15,19 @@ const props = withDefaults(defineProps<FlexProps>(), {
   wrap: false,
   justify: 'normal',
   align: 'normal',
-  flex: 'normal'
+  flex: 'normal',
+  full: false
 })
 
 const { b } = useBemClass()
 
-const classNames = computed(() => [b('flex'), b(`flex__size--${props.gap}`)])
+const classNames = computed(() => {
+  const arr: string[] = [b('flex'), b(`flex__size--${props.gap}`)]
+  if (props.full) {
+    arr.push(b('flex--full'))
+  }
+  return arr
+})
 
 const SIZE_MAP = ['small', 'middle', 'large']
 
@@ -67,6 +74,12 @@ const style = computed<CSSProperties>(() => {
 }
 
 .#{a.$prefix}-flex {
+  &--full {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
   &__size--small {
     gap: 8px;
   }

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

@@ -13,4 +13,6 @@ export interface FlexProps {
   flex?: string
   /** 设置网格之间的间隙，可选预设 small / middle / large 或 string / number */
   gap?: 'small' | 'middle' | 'large' | string | number
+  /** 是否撑满父容器宽高 */
+  full?: boolean
 }

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

@@ -1,5 +1,5 @@
 <template>
-  <ElSplitter :class="getClass">
+  <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>
@@ -27,14 +27,17 @@
 <script lang="ts" setup>
 import type { PageLayoutProps } from './type'
 import { ElSplitter, ElSplitterPanel } from 'element-plus'
-import { computed, ref, useSlots } from 'vue'
+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: () => ({}),
@@ -50,8 +53,42 @@ defineSlots<{
 
 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')]
@@ -71,11 +108,7 @@ const getClass = computed(() => {
 })
 
 function handleClick() {
-  collapsing.value = true
-  setTimeout(() => {
-    collapsing.value = false
-  }, 300)
-  size.value = Number(size.value) > 30 ? 0 : props.size
+  setCollapsingSize(Number(size.value) > 30 ? 0 : props.size)
 }
 </script>
 

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

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

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

@@ -0,0 +1,88 @@
+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/src/table.vue

@@ -84,6 +84,6 @@ defineExpose({
 }
 
 .#{a.$prefix}-table-pagination {
-  margin-top: 10px;
+  margin-top: 12px;
 }
 </style>

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

@@ -2,7 +2,7 @@
   <div :class="getClass">
     <div :class="b('tabs__default')">
       <slot>
-        <ElTabs v-model="model" :type="props.type" :stretch="props.stretch"
+        <ElTabs :key="props.type" 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>

package/packages/components/tag/src/tag.vue

@@ -349,7 +349,7 @@ $tag-size-large-padding: 0 10px;
 .#{a.$prefix}-tag__type--outline,
 .#{a.$prefix}-tag__type--light-outline {
   &.#{a.$prefix}-tag__color--info {
-    color: var(--el-color-text-primary);
+    color: var(--el-text-color-primary);
   }
 }
 </style>

package/packages/styles/index.scss

@@ -3,8 +3,8 @@
 
 body {
   // 主要作用于页面
-  --padding: 14px;
-  --margin: 14px;
+  --padding: 16px;
+  --margin: 16px;
 }
 
 .g-card-title {