km-card-layout-core 0.1.8 → 0.1.10

package/dist/index.js

@@ -232,8 +232,6 @@ const buildWrapperStyle = (el, unit) => {
         height: (0, exports.addUnit)(abs.height, unit),
         zIndex: abs.zIndex,
         boxSizing: 'border-box',
-        display: 'flex',
-        alignItems: 'center',
     }, unit);
 };
 const buildPanelContentStyle = (el, unit) => (0, exports.styleObjectToString)({
@@ -341,7 +339,7 @@ const buildNode = (el, rootData, unit, context) => {
         return {
             id: el.id,
             type: el.type,
-            visible: !!el.visible,
+            visible: el.visible,
             wrapperStyle,
             contentStyle: buildPanelContentStyle(el, unit),
             children: (0, exports.buildRenderNodes)(el.children || [], rootData, unit, context),
@@ -356,7 +354,7 @@ const buildNode = (el, rootData, unit, context) => {
             wrapperStyle,
             contentStyle: buildTextContentStyle(el, unit),
             text: `${value}`,
-            visible: !!el.visible,
+            visible: el.visible,
             icon: buildTextIcon(el, unit),
         };
     }
@@ -370,7 +368,7 @@ const buildNode = (el, rootData, unit, context) => {
             contentStyle: buildImageContentStyle(el, unit),
             src,
             mode,
-            visible: !!el.visible,
+            visible: el.visible,
         };
     }
     if (el.type === 'icon') {
@@ -382,7 +380,7 @@ const buildNode = (el, rootData, unit, context) => {
             contentStyle: baseStyle,
             name: `${name}`,
             text: `${name}`,
-            visible: !!el.visible,
+            visible: el.visible,
         };
     }
     if (el.type === 'custom') {
@@ -391,7 +389,7 @@ const buildNode = (el, rootData, unit, context) => {
             type: el.type,
             wrapperStyle,
             contentStyle: baseStyle,
-            visible: !!el.visible,
+            visible: el.visible,
         };
     }
     return null;

package/index.ts

@@ -204,131 +204,129 @@ export const resolveBindingValue = (
   return value === undefined ? undefined : value;
 };
 
-/** ---------- 样式构建 ---------- */
-
-const buildCardStyle = (
-  layout: CardLayoutSchema,
-  unit: 'px' | 'rpx'
-): string =>
-  styleObjectToString(
-    {
-      width: addUnit(layout.width, unit),
-      height: addUnit(layout.height, unit),
-      color: layout.fontColor,
-      borderRadius:
-        layout.borderRadius !== undefined
-          ? addUnit(layout.borderRadius, unit)
-          : undefined,
-      padding:
-        layout.padding !== undefined ? addUnit(layout.padding, unit) : undefined,
-      position: 'relative',
-      overflow: 'hidden',
-      boxSizing: 'border-box',
-      backgroundColor: 'transparent',
-    },
-    unit
-  );
-
-const buildBackgroundStyle = (
-  layout: CardLayoutSchema,
-  unit: 'px' | 'rpx'
-): string =>
-  styleObjectToString(
-    {
-      zIndex: layout.backgroundZIndex,
-      borderRadius:
-        layout.borderRadius !== undefined
-          ? addUnit(layout.borderRadius, unit)
-          : undefined,
-      width: '100%',
-      height: '100%',
-      position: 'absolute',
-      left: 0,
-      top: 0,
-    },
-    unit
-  );
-
-/**
- * 生成元素外层样式（绝对/弹性布局），始终返回内联样式字符串。
- */
-const buildWrapperStyle = (el: CardElement, unit: 'px' | 'rpx'): string => {
-  const abs = getAbsLayout(el);
-  if (!abs) return '';
-
-  return styleObjectToString(
-    {
-      position: 'absolute',
-      left: addUnit(abs.x, unit),
-      top: addUnit(abs.y, unit),
-      width: addUnit(abs.width, unit),
-      height: addUnit(abs.height, unit),
-      zIndex: abs.zIndex,
-      boxSizing: 'border-box',
-      display: 'flex',
-      alignItems: 'center',
-    },
-    unit
-  );
-};
-const buildPanelContentStyle = (
-  el: LayoutPanelElement,
-  unit: 'px' | 'rpx'
-): string =>
-  styleObjectToString(
-    {
-      position: 'relative',
-      width: '100%',
-      height: '100%',
-      display: 'block',
-      boxSizing: 'border-box',
-      ...(el.style || {}),
-    },
-    unit
-  );
-
-const buildTextContentStyle = (el: TextElement, unit: 'px' | 'rpx') => {
-  const textAlign =
-    (el.style?.textAlign as string | undefined) || el.align || undefined;
-  const style: Record<string, any> = {
-    ...(el.style || {}),
-    whiteSpace: 'pre-wrap',
-    wordBreak: 'break-word',
-    lineHeight:
-      el.style?.lineHeight !== undefined && el.style?.lineHeight !== null
-        ? el.style.lineHeight
-        : '1.2',
-    display: 'inline-flex',
-    alignItems: 'center',
-  };
-  if (textAlign) style.textAlign = textAlign;
-  return styleObjectToString(style, unit);
-};
-
-const buildBaseContentStyle = (
-  el: CardElement,
-  unit: 'px' | 'rpx'
-): string =>
-  styleObjectToString(
-    {
-      ...(el.style || {}),
-      boxSizing: 'border-box',
-    },
-    unit
-  );
-
-const buildImageContentStyle = (
-  el: ImageElement,
-  unit: 'px' | 'rpx'
-): string => {
-  const style: Record<string, any> = { ...(el.style || {}) };
-  const borderWidth = Number(style.borderWidth);
-  if (Number.isFinite(borderWidth) && borderWidth > 0) {
-    if (!style.borderStyle) style.borderStyle = 'solid';
-    if (!style.borderColor) style.borderColor = '#000000';
-  }
-  return styleObjectToString(style, unit);
-};
+/** ---------- 样式构建 ---------- */
+
+const buildCardStyle = (
+  layout: CardLayoutSchema,
+  unit: 'px' | 'rpx'
+): string =>
+  styleObjectToString(
+    {
+      width: addUnit(layout.width, unit),
+      height: addUnit(layout.height, unit),
+      color: layout.fontColor,
+      borderRadius:
+        layout.borderRadius !== undefined
+          ? addUnit(layout.borderRadius, unit)
+          : undefined,
+      padding:
+        layout.padding !== undefined ? addUnit(layout.padding, unit) : undefined,
+      position: 'relative',
+      overflow: 'hidden',
+      boxSizing: 'border-box',
+      backgroundColor: 'transparent',
+    },
+    unit
+  );
+
+const buildBackgroundStyle = (
+  layout: CardLayoutSchema,
+  unit: 'px' | 'rpx'
+): string =>
+  styleObjectToString(
+    {
+      zIndex: layout.backgroundZIndex,
+      borderRadius:
+        layout.borderRadius !== undefined
+          ? addUnit(layout.borderRadius, unit)
+          : undefined,
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      left: 0,
+      top: 0,
+    },
+    unit
+  );
+
+/**
+ * 生成元素外层样式（绝对/弹性布局），始终返回内联样式字符串。
+ */
+const buildWrapperStyle = (el: CardElement, unit: 'px' | 'rpx'): string => {
+  const abs = getAbsLayout(el);
+  if (!abs) return '';
+
+  return styleObjectToString(
+    {
+      position: 'absolute',
+      left: addUnit(abs.x, unit),
+      top: addUnit(abs.y, unit),
+      width: addUnit(abs.width, unit),
+      height: addUnit(abs.height, unit),
+      zIndex: abs.zIndex,
+      boxSizing: 'border-box',
+    },
+    unit
+  );
+};
+const buildPanelContentStyle = (
+  el: LayoutPanelElement,
+  unit: 'px' | 'rpx'
+): string =>
+  styleObjectToString(
+    {
+      position: 'relative',
+      width: '100%',
+      height: '100%',
+      display: 'block',
+      boxSizing: 'border-box',
+      ...(el.style || {}),
+    },
+    unit
+  );
+
+const buildTextContentStyle = (el: TextElement, unit: 'px' | 'rpx') => {
+  const textAlign =
+    (el.style?.textAlign as string | undefined) || el.align || undefined;
+  const style: Record<string, any> = {
+    ...(el.style || {}),
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word',
+    lineHeight:
+      el.style?.lineHeight !== undefined && el.style?.lineHeight !== null
+        ? el.style.lineHeight
+        : '1.2',
+    display: 'inline-flex',
+    alignItems: 'center',
+  };
+  if (textAlign) style.textAlign = textAlign;
+  return styleObjectToString(style, unit);
+};
+
+const buildBaseContentStyle = (
+  el: CardElement,
+  unit: 'px' | 'rpx'
+): string =>
+  styleObjectToString(
+    {
+      ...(el.style || {}),
+      boxSizing: 'border-box',
+    },
+    unit
+  );
+
+const buildImageContentStyle = (
+  el: ImageElement,
+  unit: 'px' | 'rpx'
+): string => {
+  const style: Record<string, any> = { ...(el.style || {}) };
+  const borderWidth = Number(style.borderWidth);
+  if (Number.isFinite(borderWidth) && borderWidth > 0) {
+    if (!style.borderStyle) style.borderStyle = 'solid';
+    if (!style.borderColor) style.borderColor = '#000000';
+  }
+  return styleObjectToString(style, unit);
+};
 
 const buildTextIcon = (
   el: TextElement,
@@ -357,23 +355,23 @@ const buildTextIcon = (
       | string
       | undefined);
 
-  return {
-    name: `${name}`,
-    text: `${name}`,
-    size: addUnit(size as any, unit),
-    gap: addUnit(gap as any, unit),
-    color: color as any,
-    align: icon.align || 'left',
-    wrapperStyle: styleObjectToString(
-      {
-        display: 'inline-flex',
-        alignItems: 'center',
-        height: el.style?.lineHeight || 'auto',
-      },
-      unit
-    ),
-  };
-};
+  return {
+    name: `${name}`,
+    text: `${name}`,
+    size: addUnit(size as any, unit),
+    gap: addUnit(gap as any, unit),
+    color: color as any,
+    align: icon.align || 'left',
+    wrapperStyle: styleObjectToString(
+      {
+        display: 'inline-flex',
+        alignItems: 'center',
+        height: el.style?.lineHeight || 'auto',
+      },
+      unit
+    ),
+  };
+};
 
 /** ---------- 渲染树构建 ---------- */
 /**
@@ -408,52 +406,52 @@ const buildNode = (
   if (!el || el.visible === false) return null;
   const wrapperStyle = buildWrapperStyle(el, unit);
 
-  if (el.type === 'layout-panel') {
-    return {
-      id: el.id,
-      type: el.type,
-      visible: !!el.visible,
-      wrapperStyle,
-      contentStyle: buildPanelContentStyle(el as LayoutPanelElement, unit),
-      children: buildRenderNodes(el.children || [], rootData, unit, context),
-    };
-  }
-
-  const baseStyle = buildBaseContentStyle(el, unit);
-  if (el.type === 'text') {
-    const value =
-      resolveBindingValue(el.binding, rootData, context) ??
-      el.defaultValue ??
-      '';
-    return {
-      id: el.id,
-      type: el.type,
-      wrapperStyle,
-      contentStyle: buildTextContentStyle(el as TextElement, unit),
-      text: `${value}`,
-      visible: !!el.visible,
-      icon: buildTextIcon(el as TextElement, unit),
-    };
-  }
-
-  if (el.type === 'image') {
-    const src =
-      resolveBindingValue(el.binding, rootData, context) ??
-      (el as ImageElement).defaultUrl ??
-      el.defaultValue ??
+  if (el.type === 'layout-panel') {
+    return {
+      id: el.id,
+      type: el.type,
+      visible: el.visible,
+      wrapperStyle,
+      contentStyle: buildPanelContentStyle(el as LayoutPanelElement, unit),
+      children: buildRenderNodes(el.children || [], rootData, unit, context),
+    };
+  }
+
+  const baseStyle = buildBaseContentStyle(el, unit);
+  if (el.type === 'text') {
+    const value =
+      resolveBindingValue(el.binding, rootData, context) ??
+      el.defaultValue ??
+      '';
+    return {
+      id: el.id,
+      type: el.type,
+      wrapperStyle,
+      contentStyle: buildTextContentStyle(el as TextElement, unit),
+      text: `${value}`,
+      visible: el.visible,
+      icon: buildTextIcon(el as TextElement, unit),
+    };
+  }
+
+  if (el.type === 'image') {
+    const src =
+      resolveBindingValue(el.binding, rootData, context) ??
+      (el as ImageElement).defaultUrl ??
+      el.defaultValue ??
       '';
-    const mode =
-      (el as ImageElement).fit === 'contain' ? 'aspectFit' : 'aspectFill';
-    return {
-      id: el.id,
-      type: el.type,
-      wrapperStyle,
-      contentStyle: buildImageContentStyle(el as ImageElement, unit),
-      src,
-      mode,
-      visible: !!el.visible,
-    };
-  }
+    const mode =
+      (el as ImageElement).fit === 'contain' ? 'aspectFit' : 'aspectFill';
+    return {
+      id: el.id,
+      type: el.type,
+      wrapperStyle,
+      contentStyle: buildImageContentStyle(el as ImageElement, unit),
+      src,
+      mode,
+      visible: el.visible,
+    };
+  }
 
   if (el.type === 'icon') {
     const name =
@@ -468,7 +466,7 @@ const buildNode = (
       contentStyle: baseStyle,
       name: `${name}`,
       text: `${name}`,
-      visible: !!el.visible,
+      visible: el.visible,
     };
   }
 
@@ -478,7 +476,7 @@ const buildNode = (
       type: el.type,
       wrapperStyle,
       contentStyle: baseStyle,
-      visible: !!el.visible,
+      visible: el.visible,
     };
   }
 
@@ -492,14 +490,14 @@ export const buildRenderResult = (
   dataInput: Record<string, any>,
   unit: 'px' | 'rpx' = 'px'
 ): RenderResult => {
-  const layouts = normalizeLayout(layoutInput);
-  return layouts.map(layout => {
-    const cardStyle = buildCardStyle(layout, unit);
-    const bgStyle = buildBackgroundStyle(layout, unit);
-
-    const renderTree = buildRenderNodes(
-      layout.children || [],
-      dataInput || {},
+  const layouts = normalizeLayout(layoutInput);
+  return layouts.map(layout => {
+    const cardStyle = buildCardStyle(layout, unit);
+    const bgStyle = buildBackgroundStyle(layout, unit);
+
+    const renderTree = buildRenderNodes(
+      layout.children || [],
+      dataInput || {},
       unit
     );
 
@@ -512,4 +510,4 @@ export const buildRenderResult = (
   });
 };
 
-export * from './utils';
+export * from './utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "km-card-layout-core",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Shared render helpers for CardMaster layout JSON (binding resolution, layout normalization).",
   "main": "dist/index.js",
   "types": "types.d.ts",