km-card-layout-component-miniprogram 0.1.18 → 0.1.19

package/miniprogram_dist/components/card-layout/elements/custom-element/index.wxml

@@ -1,5 +1,7 @@
-<view class="km-node km-node--custom" style="{{wrapperStyle}}">
-  <view class="km-node__custom" style="{{contentStyle}}">
-    <slot name="{{element.id}}"></slot>
+<template name="custom-element">
+  <view class="km-node km-node--custom" style="{{wrapperStyle}}">
+    <view class="km-node__custom" style="{{contentStyle}}">
+      <slot name="{{element.id}}"></slot>
+    </view>
   </view>
-</view>
+</template>

package/miniprogram_dist/components/card-layout/elements/icon-element/index.wxml

@@ -1,5 +1,7 @@
-<view class="km-node km-node--icon" style="{{wrapperStyle}}">
-  <view class="km-node__icon icon" style="{{contentStyle}}">
-    {{iconText}}
+<template name="icon-element">
+  <view class="km-node km-node--icon" style="{{wrapperStyle}}">
+    <view class="km-node__icon icon" style="{{contentStyle}}">
+      {{iconText}}
+    </view>
   </view>
-</view>
+</template>

package/miniprogram_dist/components/card-layout/elements/image-element/index.wxml

@@ -1,8 +1,10 @@
-<view class="km-node" style="{{wrapperStyle}}">
-  <image
-    class="km-node__image"
-    style="{{contentStyle}}"
-    src="{{imageSrc}}"
-    mode="{{mode}}"
-  />
-</view>
+<template name="image-element">
+  <view class="km-node" style="{{wrapperStyle}}">
+    <image
+      class="km-node__image"
+      style="{{contentStyle}}"
+      src="{{imageSrc}}"
+      mode="{{mode}}"
+    />
+  </view>
+</template>

package/miniprogram_dist/components/card-layout/elements/text-element/index.wxml

@@ -1,3 +1,4 @@
+<template name="text-element">
 <view class="km-node km-node--text" style="{{wrapperStyle}}">
   <view class="km-node__text" style="{{contentStyle}}">
     <block wx:if="{{(iconMeta && (iconMeta.name || iconMeta.text)) && (element.icon && element.icon.style !== 'text')}}">
@@ -40,3 +41,4 @@
     </block>
   </view>
 </view>
+</template>

package/miniprogram_dist/components/card-layout/elements/text-element/index.wxss

@@ -3,10 +3,6 @@
   color: inherit;
 }
 
-.km-node--text {
-  /* overflow hidden if needed */
-}
-
 .km-node--text text {
   display: inline;
 }

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

@@ -2,6 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.hasCompanyDutyKey = exports.normalizeMoreCompany = void 0;
 const index_1 = require("../../vendor/km-card-layout-core/index");
+const icon_map_1 = require("./icon-map");
+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 EMPTY_COMPANY_DUTY = {
     company: '',
     duty: '',
@@ -67,25 +76,84 @@ const pickCardId = (layout, idx) => {
         return layout.name || layout.id;
     return `card-${idx}`;
 };
-const decorateElements = (children = []) => (children || []).map(el => {
-    if (el.type === 'layout-panel') {
-        const panel = el;
-        return {
-            ...panel,
-            wrapperStyle: (0, index_1.styleObjectToString)((0, index_1.buildWrapperStyle)(panel, 'rpx'), 'rpx'),
-            contentStyle: (0, index_1.styleObjectToString)((0, index_1.buildPanelContentStyle)(panel, 'rpx'), 'rpx'),
-            children: decorateElements(panel.children || []),
-        };
-    }
-    return el;
-});
-const buildCards = (layouts) => {
+const decorateElements = (children = [], rootData) => {
+    const data = rootData || {};
+    return (children || []).map(el => {
+        const wrapperStyle = (0, index_1.styleObjectToString)((0, index_1.buildWrapperStyle)(el, 'rpx'), 'rpx');
+        switch (el.type) {
+            case 'layout-panel': {
+                const panel = el;
+                return {
+                    ...panel,
+                    wrapperStyle,
+                    contentStyle: (0, index_1.styleObjectToString)((0, index_1.buildPanelContentStyle)(panel, 'rpx'), 'rpx'),
+                    children: decorateElements(panel.children || [], rootData),
+                };
+            }
+            case 'image': {
+                const imageEl = el;
+                const contentStyle = (0, index_1.styleObjectToString)((0, index_1.buildImageContentStyle)(imageEl), 'rpx');
+                const imageSrc = (0, index_1.getImageSrc)(imageEl, data);
+                const mode = imageEl.fit === 'contain' ? 'aspectFit' : 'aspectFill';
+                return {
+                    ...imageEl,
+                    wrapperStyle,
+                    contentStyle,
+                    imageSrc,
+                    mode,
+                };
+            }
+            case 'icon': {
+                const iconEl = el;
+                const contentStyle = (0, index_1.styleObjectToString)((0, index_1.buildBaseContentStyle)(iconEl), 'rpx');
+                const name = (0, index_1.getIconName)(iconEl);
+                const iconText = mapIconGlyph(name, name || '');
+                return {
+                    ...iconEl,
+                    wrapperStyle,
+                    contentStyle,
+                    iconText,
+                };
+            }
+            case 'custom': {
+                const customEl = el;
+                const contentStyle = (0, index_1.styleObjectToString)((0, index_1.buildBaseContentStyle)(customEl), 'rpx');
+                return {
+                    ...customEl,
+                    wrapperStyle,
+                    contentStyle,
+                };
+            }
+            default: {
+                const textEl = el;
+                const contentStyle = (0, index_1.styleObjectToString)((0, index_1.buildTextContentStyle)(textEl, 'rpx'), 'rpx');
+                const textValue = (0, index_1.getTextValue)(textEl, data);
+                const iconRaw = (0, index_1.buildTextIconMeta)(textEl, 'rpx');
+                const iconMeta = iconRaw && iconRaw.name
+                    ? {
+                        ...iconRaw,
+                        text: mapIconGlyph(iconRaw.name, iconRaw.name),
+                        wrapperStyle: (0, index_1.styleObjectToString)(iconRaw.wrapperStyle, 'rpx'),
+                    }
+                    : iconRaw;
+                return {
+                    ...textEl,
+                    wrapperStyle,
+                    contentStyle,
+                    textValue,
+                    iconMeta,
+                };
+            }
+        }
+    });
+};
+const buildCards = (layouts, rootData) => {
     return layouts.map((layout, idx) => ({
         id: pickCardId(layouts[idx], idx),
         cardStyle: (0, index_1.styleObjectToString)((0, index_1.buildCardStyle)(layout, 'rpx'), 'rpx'),
         backgroundImage: layout.backgroundImage || '',
         backgroundStyle: (0, index_1.styleObjectToString)((0, index_1.buildBackgroundStyle)(layout, 'rpx'), 'rpx'),
-        elements: decorateElements(layout.children || []),
+        elements: decorateElements(layout.children || [], rootData),
     }));
 };
 const hasCompanyDutyKey = (schemas) => {
@@ -155,7 +223,7 @@ Component({
                 return;
             }
             const normalizedLayouts = (0, index_1.normalizeLayout)(layoutInput);
-            const cards = buildCards(normalizedLayouts);
+            const cards = buildCards(normalizedLayouts, rootData);
             this.setData({ cards, rootData });
         },
     },

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

@@ -1,9 +1,3 @@
 {
-  "component": true,
-  "usingComponents": {
-    "text-element": "./elements/text-element/index",
-    "image-element": "./elements/image-element/index",
-    "icon-element": "./elements/icon-element/index",
-    "custom-element": "./elements/custom-element/index"
-  }
+  "component": true
 }

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

@@ -1,3 +1,8 @@
+<import src="./elements/custom-element/index.wxml" />
+<import src="./elements/icon-element/index.wxml" />
+<import src="./elements/image-element/index.wxml" />
+<import src="./elements/text-element/index.wxml" />
+
 <view class="km-card-layout">
   <block wx:for="{{cards}}" wx:key="id">
     <view class="km-card-layout__item">
@@ -19,10 +24,16 @@
 
 <template name="render-element">
   <block wx:if="{{el.type === 'image'}}">
-    <image-element element="{{el}}" rootData="{{rootData}}" />
+    <template
+      is="image-element"
+      data="{{wrapperStyle: el.wrapperStyle, contentStyle: el.contentStyle, imageSrc: el.imageSrc, mode: el.mode}}"
+    />
   </block>
   <block wx:elif="{{el.type === 'icon'}}">
-    <icon-element element="{{el}}" rootData="{{rootData}}" />
+    <template
+      is="icon-element"
+      data="{{wrapperStyle: el.wrapperStyle, contentStyle: el.contentStyle, iconText: el.iconText}}"
+    />
   </block>
   <block wx:elif="{{el.type === 'layout-panel'}}">
     <view class="km-node" style="{{el.wrapperStyle}}">
@@ -34,9 +45,15 @@
     </view>
   </block>
   <block wx:elif="{{el.type === 'custom'}}">
-    <custom-element element="{{el}}" rootData="{{rootData}}" />
+    <template
+      is="custom-element"
+      data="{{wrapperStyle: el.wrapperStyle, contentStyle: el.contentStyle, element: el}}"
+    />
   </block>
   <block wx:else>
-    <text-element element="{{el}}" rootData="{{rootData}}" />
+    <template
+      is="text-element"
+      data="{{wrapperStyle: el.wrapperStyle, contentStyle: el.contentStyle, textValue: el.textValue, iconMeta: el.iconMeta, element: el}}"
+    />
   </block>
 </template>

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

@@ -36,7 +36,90 @@
   box-sizing: border-box;
 }
 
+.km-node__image {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.km-node--text text {
+  display: inline;
+}
+
+.km-node__text {
+  width: 100%;
+  height: 100%;
+  display: block;
+  box-sizing: border-box;
+  text-align: inherit;
+}
+
+.km-node__text-content {
+  display: inline-block;
+  vertical-align: middle;
+  height: 100%;
+}
+
+.km-node__text-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.km-node__text-value {
+  display: inline-block;
+  white-space: pre-wrap;
+  word-break: break-word;
+  vertical-align: middle;
+}
+
+.icon {
+  font-family: 'km-icon' !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.km-node__text-icon--wrapper{
+  display: inline-block;
+}
+
+
+.km-node--icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.km-node__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-family: 'km-icon', 'PingFang SC', 'Microsoft Yahei', sans-serif;
+  font-style: normal;
+  font-weight: normal;
+}
+
+.icon {
+  font-family: 'km-icon' !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 
+.km-node--custom {
+  box-sizing: border-box;
+}
+
+.km-node__custom {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}