[components] 组件 AutoGrid 新增 fluid 参数

MoomFE · Oct 16, 2024 · 70b5f3c · 70b5f3c
1 parent 044dbd6
commit 70b5f3c
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,5 @@
 ## [Unreleased]
+  - [@mixte/components] 组件 `AutoGrid` 新增 `fluid` 参数
 
 ## [v2.4.0], [v2.4.0-beta.3], [v2.4.0-beta.2], [v2.4.0-beta.1]
   - 📅 2024-08-27

diff --git a/packages/.vitepress/shared/unocss.theme.ts b/packages/.vitepress/shared/unocss.theme.ts
@@ -1200,11 +1200,11 @@ export const easing = {
 export const transitionProperty = {
   none: "none",
   all: "all",
-  colors: "color,background-color,border-color,outline-color,text-decoration-color,fill,stroke",
+  colors: "color,background-color,border-color,text-decoration-color,fill,stroke",
   opacity: "opacity",
   shadow: "box-shadow",
   transform: "transform",
-  DEFAULT: "color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter"
+  DEFAULT: "color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter"
 };
 export const lineWidth = {
   DEFAULT: "1px",

diff --git a/packages/components/src/auto-grid/src/index.vue b/packages/components/src/auto-grid/src/index.vue
@@ -3,6 +3,7 @@
 </template>
 
 <script lang="tsx" setup>
+  import type { CSSProperties } from 'vue';
   import { computed, onBeforeUpdate, ref } from 'vue';
   import { flatten } from 'naive-ui/es/_utils/vue/flatten';
   import { useAutoGrid } from '../../list-auto-grid/src/composables/useAutoGrid';
@@ -28,7 +29,8 @@
     hasOverflowSuffixSlot.value = !!slots.overflowSuffix;
   });
 
-  function Render() {
+  /** 真实需要渲染的子元素 */
+  const renderChildren = computed(() => {
     let renderChildren = children.value;
 
     if (props.collapsed) {
@@ -43,9 +45,24 @@
       }
     }
 
+    return renderChildren;
+  });
+
+  const finalRootStyle = computed<CSSProperties>(() => {
+    if (props.fluid && (children.value.length < length.value)) {
+      return {
+        ...rootStyle.value,
+        gridTemplateColumns: `repeat(${children.value.length}, 1fr)`,
+      };
+    }
+
+    return rootStyle.value;
+  });
+
+  function Render() {
     return (
-      <div ref={rootRef} class="mixte-auto-grid" style={rootStyle.value}>
-        {renderChildren.map(Node => <div style="overflow: hidden">{Node}</div>)}
+      <div ref={rootRef} class="mixte-auto-grid" style={finalRootStyle.value}>
+        {renderChildren.value.map(Node => <div style="overflow: hidden">{Node}</div>)}
       </div>
     );
   }

diff --git a/packages/components/src/list-auto-grid/src/composables/useAutoGrid.ts b/packages/components/src/list-auto-grid/src/composables/useAutoGrid.ts
@@ -1,4 +1,4 @@
-import type { StyleValue } from 'vue-demi';
+import type { CSSProperties } from 'vue-demi';
 import { computed, ref } from 'vue-demi';
 import { useElementSize } from '@vueuse/core';
 import { isNumeric } from 'mixte';
@@ -21,6 +21,8 @@ export interface CommomAutoGridProps {
   collapsed?: boolean;
   /** 显示行数 */
   collapsedRows?: number | `${number}`;
+  /** 只有一行时, 平铺所有子元素 */
+  fluid?: boolean;
 }
 
 export function useAutoGrid(props: CommomAutoGridProps) {
@@ -37,12 +39,12 @@ export function useAutoGrid(props: CommomAutoGridProps) {
 
   const collapsedRows = computed(() => isNumeric(props.collapsedRows) ? Math.max(1, +props.collapsedRows) : 1);
 
-  /** 每行渲染的子元素数量 */
+  /** 每行可以渲染的子元素数量 */
   const length = computed(() => {
     return Math.floor((width.value + gapX.value) / (itemWidth.value + gapX.value)) || 1;
   });
 
-  const rootStyle = computed<StyleValue>(() => ({
+  const rootStyle = computed<CSSProperties>(() => ({
     width: isCustomWidth.value ? `${props.width}px` : '100%',
     display: 'grid',
     gridTemplateColumns: `repeat(${length.value}, 1fr)`,