From 4c91f0f4f7fd52925795e900232bf54e64d94615 Mon Sep 17 00:00:00 2001
From: zestack <simplism.dev@gmail.com>
Date: Wed, 29 Nov 2023 12:52:25 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=B0=83=E6=95=B4=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E5=89=AA=E8=A3=81=E8=A1=8C=E4=B8=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/engineer/render.ts      |  9 +++++----
 src/engineer/types.ts       |  6 +++++-
 src/engineer/utils/clip.ts  | 21 +++++++++++++++++++++
 src/engineer/utils/index.ts |  1 +
 4 files changed, 32 insertions(+), 5 deletions(-)
 create mode 100644 src/engineer/utils/clip.ts

diff --git a/src/engineer/render.ts b/src/engineer/render.ts
index 732546e..5c15d00 100644
--- a/src/engineer/render.ts
+++ b/src/engineer/render.ts
@@ -8,7 +8,8 @@ import { defineComponent, h } from 'vue'
 import type {
   Axis,
   Block,
-  DataRefer, Theme,
+  DataRefer,
+  Theme,
   View,
   ViewChildren,
   Widget,
@@ -17,7 +18,7 @@ import { provideBlockId } from './context'
 import {
   align,
   background,
-  bordering,
+  bordering, clip,
   gap,
   insets,
   radii,
@@ -55,7 +56,7 @@ function isRefer(s: any): s is DataRefer {
     && typeof s.key === 'string'
 }
 
-export const isFlexible = (theme: Theme) => {
+export function isFlexible(theme: Theme) {
   return theme.axis != null
     || theme.mainAlign != null
     || theme.crossAlign != null
@@ -136,7 +137,7 @@ export function render(view?: ViewChildren, axis?: Axis): VNodeChild {
     textAlign: theme?.textAlign,
     lineHeight: theme?.lineHeight,
     // clip
-    overflow: theme?.clip,
+    ...clip(theme?.clip),
   }
 
   // note: 在前面初始化 css 时使用了参数 axis，
diff --git a/src/engineer/types.ts b/src/engineer/types.ts
index 58f12d1..6b53d5d 100644
--- a/src/engineer/types.ts
+++ b/src/engineer/types.ts
@@ -252,11 +252,15 @@ export interface Widget {
   slots?: Omit<Slots, 'default'>
 }
 
+/**
+ * 内容超出视图的剪切行为
+ */
 export type ClipBehavior =
   | 'hidden'
   | 'visible'
-  | 'scroll'
   | 'auto'
+  | 'autoX' // overflow-x: auto; overflow-y: hidden
+  | 'autoY' // overflow-x: hidden; overflow-y: auto
 
 /**
  * 视图数据
diff --git a/src/engineer/utils/clip.ts b/src/engineer/utils/clip.ts
new file mode 100644
index 0000000..f7d19b2
--- /dev/null
+++ b/src/engineer/utils/clip.ts
@@ -0,0 +1,21 @@
+import type { CSSProperties } from 'vue'
+import type { ClipBehavior } from '../types'
+
+export function clip(clip: ClipBehavior | undefined): CSSProperties | undefined {
+  switch (clip) {
+    case 'autoX':
+      return {
+        overflowX: 'auto',
+        overflowY: 'hidden',
+      }
+    case 'autoY':
+      return {
+        overflowX: 'hidden',
+        overflowY: 'auto',
+      }
+    default:
+      return {
+        overflow: clip,
+      }
+  }
+}
diff --git a/src/engineer/utils/index.ts b/src/engineer/utils/index.ts
index 47a2b86..4d18ef1 100644
--- a/src/engineer/utils/index.ts
+++ b/src/engineer/utils/index.ts
@@ -1,6 +1,7 @@
 export * from './align'
 export * from './background'
 export * from './border'
+export * from './clip'
 export * from './gap'
 export * from './hash'
 export * from './insets'