km-card-layout-component-miniprogram 0.1.5 → 0.1.6

package/miniprogram_dist/components/card-layout/index.js

@@ -12,25 +12,221 @@ const pickCardId = (layout, idx) => {
         return layout.name || layout.id;
     return `card-${idx}`;
 };
+const withUnit = (value, unit) => (0, index_1.addUnit)(value, unit);
+const buildCardStyle = (layout, unit) => (0, index_1.styleObjectToString)({
+    width: withUnit(layout.width, unit),
+    height: withUnit(layout.height, unit),
+    color: layout.fontColor,
+    borderRadius: layout.borderRadius !== undefined
+        ? withUnit(layout.borderRadius, unit)
+        : undefined,
+    padding: layout.padding !== undefined ? withUnit(layout.padding, unit) : undefined,
+    position: 'relative',
+    overflow: 'hidden',
+    boxSizing: 'border-box',
+    backgroundColor: 'transparent',
+}, unit);
+const buildBackgroundStyle = (layout, unit) => (0, index_1.styleObjectToString)({
+    zIndex: layout.backgroundZIndex,
+    borderRadius: layout.borderRadius !== undefined
+        ? withUnit(layout.borderRadius, unit)
+        : undefined,
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+}, unit);
+const buildWrapperStyle = (el, unit) => {
+    if (!el.layout || el.layout.mode !== 'absolute')
+        return '';
+    return (0, index_1.styleObjectToString)({
+        position: 'absolute',
+        left: withUnit(el.layout.x, unit),
+        top: withUnit(el.layout.y, unit),
+        width: withUnit(el.layout.width, unit),
+        height: withUnit(el.layout.height, unit),
+        zIndex: el.layout.zIndex,
+        boxSizing: 'border-box',
+        display: 'flex',
+        alignItems: 'center',
+    }, unit);
+};
+const buildPanelContentStyle = (el, unit) => (0, index_1.styleObjectToString)({
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    display: 'block',
+    boxSizing: 'border-box',
+    ...(el.style || {}),
+}, unit);
+const buildTextContentStyle = (el, unit) => {
+    var _a, _b, _c;
+    const textAlign = ((_a = el.style) === null || _a === void 0 ? void 0 : _a.textAlign) || el.align || undefined;
+    const style = {
+        ...el.style,
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-word',
+        lineHeight: ((_b = el.style) === null || _b === void 0 ? void 0 : _b.lineHeight) !== undefined && ((_c = el.style) === null || _c === void 0 ? void 0 : _c.lineHeight) !== null
+            ? el.style.lineHeight
+            : '1.2',
+        display: 'inline-flex',
+        alignItems: 'center',
+    };
+    if (textAlign)
+        style.textAlign = textAlign;
+    return (0, index_1.styleObjectToString)(style, unit);
+};
+const buildBaseContentStyle = (el, unit) => (0, index_1.styleObjectToString)({
+    ...(el.style || {}),
+    boxSizing: 'border-box',
+}, unit);
+const mapIconGlyph = (name, fallback) => {
+    if (!name)
+        return fallback;
+    const glyph = icon_map_1.ICON_CODE_MAP[name];
+    if (glyph)
+        return String.fromCharCode(parseInt(glyph, 16));
+    return fallback || name;
+};
+const buildTextIcon = (el, unit) => {
+    var _a, _b, _c, _d;
+    const icon = el.icon;
+    if (!icon || icon.enable === false)
+        return undefined;
+    const style = icon.style || 'fill';
+    const baseName = el.key || el.binding || el.id;
+    let name;
+    if (style === 'dot')
+        name = 'round';
+    else if (style === 'line')
+        name = baseName ? `${baseName}-line` : undefined;
+    else
+        name = baseName || undefined;
+    if (!name)
+        return undefined;
+    const size = icon.size !== undefined && icon.size !== null
+        ? icon.size
+        : (_a = el.style) === null || _a === void 0 ? void 0 : _a.fontSize;
+    const gap = icon.gap !== undefined && icon.gap !== null ? icon.gap : 4;
+    const color = (_d = (_b = icon.color) !== null && _b !== void 0 ? _b : (_c = el.style) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : undefined;
+    const text = mapIconGlyph(name, name);
+    return {
+        name,
+        text,
+        size: size !== undefined ? withUnit(size, unit) : undefined,
+        gap: gap !== undefined ? withUnit(gap, unit) : undefined,
+        color,
+        align: icon.align || 'left',
+    };
+};
+const buildRenderNode = (el, data, unit) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    if (!el || el.visible === false)
+        return null;
+    const wrapperStyle = buildWrapperStyle(el, unit);
+    if (el.type === 'layout-panel') {
+        const panel = el;
+        return {
+            id: el.id,
+            type: el.type,
+            wrapperStyle,
+            contentStyle: buildPanelContentStyle(panel, unit),
+            children: buildRenderNodes(panel.children || [], data, unit),
+        };
+    }
+    if (el.type === 'text') {
+        const textValue = (_b = (_a = (0, index_1.resolveBindingValue)(el.binding, data)) !== null && _a !== void 0 ? _a : el.defaultValue) !== null && _b !== void 0 ? _b : '';
+        return {
+            id: el.id,
+            type: el.type,
+            wrapperStyle,
+            contentStyle: buildTextContentStyle(el, unit),
+            text: `${textValue}`,
+            icon: buildTextIcon(el, unit),
+        };
+    }
+    if (el.type === 'image') {
+        const style = { ...(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';
+        }
+        const src = (_e = (_d = (_c = (0, index_1.resolveBindingValue)(el.binding, data)) !== null && _c !== void 0 ? _c : el.defaultUrl) !== null && _d !== void 0 ? _d : el.defaultValue) !== null && _e !== void 0 ? _e : '';
+        const mode = el.fit === 'contain' ? 'aspectFit' : 'aspectFill';
+        return {
+            id: el.id,
+            type: el.type,
+            wrapperStyle,
+            contentStyle: (0, index_1.styleObjectToString)(style, unit),
+            src,
+            mode,
+        };
+    }
+    if (el.type === 'icon') {
+        const resolved = (_h = (_g = (_f = (0, index_1.resolveBindingValue)(el.binding, data)) !== null && _f !== void 0 ? _f : el.name) !== null && _g !== void 0 ? _g : el.defaultValue) !== null && _h !== void 0 ? _h : '';
+        const text = mapIconGlyph(`${resolved}`, `${resolved}`);
+        return {
+            id: el.id,
+            type: el.type,
+            wrapperStyle,
+            contentStyle: buildBaseContentStyle(el, unit),
+            name: `${resolved}`,
+            text,
+        };
+    }
+    if (el.type === 'custom') {
+        return {
+            id: el.id,
+            type: el.type,
+            wrapperStyle,
+            contentStyle: buildBaseContentStyle(el, unit),
+        };
+    }
+    return null;
+};
+const buildRenderNodes = (children, data, unit) => {
+    if (!Array.isArray(children))
+        return [];
+    const nodes = [];
+    children.forEach(el => {
+        if (!el || el.visible === false)
+            return;
+        const node = buildRenderNode(el, data, unit);
+        if (node)
+            nodes.push(node);
+    });
+    return nodes;
+};
+const buildCards = (layouts, data, unit) => layouts.map(layout => ({
+    id: layout.name || layout.id || '',
+    cardStyle: buildCardStyle(layout, unit),
+    backgroundImage: layout.backgroundImage || '',
+    backgroundStyle: buildBackgroundStyle(layout, unit),
+    nodes: buildRenderNodes(layout.children || [], data, unit),
+}));
 Component({
     options: {
-        styleIsolation: 'apply-shared'
+        styleIsolation: 'apply-shared',
     },
     properties: {
         layout: {
             type: Array,
             optionalTypes: [Object],
-            value: []
+            value: [],
         },
         data: {
             type: Object,
             value: {
-                user: {}
-            }
-        }
+                user: {},
+            },
+        },
     },
     data: {
-        cards: []
+        cards: [],
     },
     observers: {
         layout() {
@@ -38,27 +234,14 @@ Component({
         },
         data() {
             this.rebuild();
-        }
+        },
     },
     lifetimes: {
         attached() {
             this.rebuild();
-        }
+        },
     },
     methods: {
-        normalizeIconGlyph(nodes) {
-            return nodes.map(node => {
-                if (node.type === 'icon') {
-                    const glyph = icon_map_1.ICON_CODE_MAP[node.name || node.text || ''];
-                    const text = glyph ? String.fromCharCode(parseInt(glyph, 16)) : node.text;
-                    return { ...node, text };
-                }
-                if (node.children && node.children.length) {
-                    return { ...node, children: this.normalizeIconGlyph(node.children) };
-                }
-                return node;
-            });
-        },
         rebuild() {
             const layoutInput = ensureArray(this.data.layout);
             const dataInput = (this.data.data || {});
@@ -66,15 +249,12 @@ Component({
                 this.setData({ cards: [] });
                 return;
             }
-            const rendered = (0, index_1.buildRenderResult)(layoutInput, dataInput, 'rpx');
-            const cards = rendered.map((card, idx) => ({
+            const normalizedLayouts = (0, index_1.normalizeLayout)(layoutInput);
+            const cards = buildCards(normalizedLayouts, dataInput, 'rpx').map((card, idx) => ({
+                ...card,
                 id: pickCardId(layoutInput[idx], idx),
-                cardStyle: card.cardStyle,
-                backgroundImage: card.backgroundImage,
-                backgroundStyle: card.backgroundStyle,
-                nodes: this.normalizeIconGlyph(card.renderTree)
             }));
             this.setData({ cards });
-        }
-    }
+        },
+    },
 });

package/miniprogram_dist/components/card-layout/index.wxml

@@ -1,6 +1,6 @@
-<view class="km-card-layout-list">
+<view class="km-card-layout">
   <block wx:for="{{cards}}" wx:key="id">
-    <view class="km-card-layout-item">
+    <view class="km-card-layout__item">
       <view class="km-card" style="{{item.cardStyle}}">
         <image
           wx:if="{{item.backgroundImage}}"
@@ -31,7 +31,7 @@
   <block wx:elif="{{node.type === 'icon'}}">
     <view class="km-node km-node--icon" style="{{node.wrapperStyle}}">
       <view
-        wx:if="{{node.name === 'dot'}}"
+        wx:if="{{node.name === 'dot' || node.name === 'round'}}"
         class="km-node__icon-dot"
         style="{{node.contentStyle}}"
       />
@@ -39,7 +39,7 @@
         wx:else
         class="km-node__icon icon"
         style="{{node.contentStyle}}"
-      >{{node.text}}</view>
+      >{{node.text || ''}}</view>
     </view>
   </block>
   <block wx:elif="{{node.type === 'layout-panel'}}">
@@ -60,7 +60,23 @@
   </block>
   <block wx:else>
     <view class="km-node km-node--text" style="{{node.wrapperStyle}}">
-      <view style="{{node.contentStyle}}">{{node.text}}</view>
+      <view class="km-node__text" style="{{node.contentStyle}}">
+        <block wx:if="{{node.icon && node.icon.name}}">
+          <view
+            class="km-node__text-content"
+            style="flex-direction: {{node.icon.align === 'right' ? 'row-reverse' : 'row'}};">
+            <text
+              class="km-node__text-icon icon"
+              style="font-size: {{node.icon.size || '16px'}}; color: {{node.icon.color || ''}}; margin-right: {{node.icon.align !== 'right' ? (node.icon.gap || '') : ''}}; margin-left: {{node.icon.align === 'right' ? (node.icon.gap || '') : ''}};">
+              {{node.icon.text || node.icon.name || ''}}
+            </text>
+            <text class="km-node__text-value">{{node.text || ''}}</text>
+          </view>
+        </block>
+        <block wx:else>
+          <text class="km-node__text-value">{{node.text || ''}}</text>
+        </block>
+      </view>
     </view>
   </block>
 </template>

package/miniprogram_dist/components/card-layout/index.wxss

@@ -1,11 +1,12 @@
 
 
-.km-card-layout-list {
+.km-card-layout {
   display: flex;
   flex-direction: column;
+  gap: 16rpx;
 }
 
-.km-card-layout-item {
+.km-card-layout__item {
   width: 100%;
 }
 
@@ -15,7 +16,7 @@
   box-sizing: border-box;
   color: inherit;
   font-family: 'PingFang SC', 'Microsoft Yahei', sans-serif;
-  background: #0f1115;
+  background: transparent;
 }
 
 .km-card__bg {
@@ -32,11 +33,12 @@
   color: inherit;
 }
 
-.km-node--icon{
+.km-node--icon {
   display: flex;
   align-items: center;
-  justify-items: center;
+  justify-content: center;
 }
+
 .km-node__image {
   width: 100%;
   height: 100%;
@@ -73,8 +75,27 @@
   box-sizing: border-box;
 }
 
+.km-node__text {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.km-node__text-content {
+  display: inline-flex;
+  align-items: center;
+}
+
+.km-node__text-value {
+  display: inline-block;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
 .km-node--text text {
   display: block;
+  white-space: pre-wrap;
   word-break: break-word;
 }