src/engineer/render.ts

@@ -9,7 +9,6 @@ import type {
   Axis,
   Block,
   DataRefer,
-  Theme,
   View,
   ViewChildren,
   Widget,
@@ -18,7 +17,7 @@ import { provideBlockId } from './context'
 import {
   align,
   background,
-  bordering, clip,
+  bordering,
   gap,
   insets,
   radii,
@@ -56,14 +55,6 @@ function isRefer(s: any): s is DataRefer {
     && typeof s.key === 'string'
 }
 
-export function isFlexible(theme: Theme) {
-  return theme.axis != null
-    || theme.mainAlign != null
-    || theme.crossAlign != null
-    || theme.wrap != null
-    || theme.gap != null
-}
-
 export function render(view?: ViewChildren, axis?: Axis): VNodeChild {
   if (view == null)
     return null
@@ -137,14 +128,14 @@ export function render(view?: ViewChildren, axis?: Axis): VNodeChild {
     textAlign: theme?.textAlign,
     lineHeight: theme?.lineHeight,
     // clip
-    ...clip(theme?.clip),
+    overflow: theme?.clip,
   }
 
   // note: 在前面初始化 css 时使用了参数 axis，
   // 所以在这里复用它用于子视图构建
   axis = theme?.axis
 
-  if (theme?.flexible || (theme && theme.flexible == null && isFlexible(theme))) {
+  if (theme?.flexible) {
     Object.assign(css, {
       display: 'flex',
       flexDirection: axis === 'y' ? 'column' : undefined,

src/engineer/types.ts

@@ -252,15 +252,11 @@ 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
 
 /**
  * 视图数据
@@ -268,17 +264,9 @@ export type ClipBehavior =
  * 描述了视图的基本布局和外观表现。
  */
 export interface Theme extends Textual, Flexible, Boxed, Decoration, Spatial, Flexible {
-  /**
+  /** 是否开启弹性布局,todo 删除改属性，根据属性判断是否启用 flex 布局 */
-   * 是否强制开启弹性布局
-   *
-   * 当未给出该属性时，如果指定了 Flexible 中的属性，引擎会自动启用弹性布局。
-   */
   flexible?: boolean
-  /**
+  /** 超出视图剪切方式，对应 overflow 属性 */
-   * 超出视图剪切方式
-   *
-   * 对应 overflow 属性
-   */
   clip?: ClipBehavior
 }
 

src/engineer/utils/clip.ts

@@ -1,21 +0,0 @@
-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,
-      }
-  }
-}

src/engineer/utils/index.ts

@@ -1,7 +1,6 @@
 export * from './align'
 export * from './background'
 export * from './border'
-export * from './clip'
 export * from './gap'
 export * from './hash'
 export * from './insets'