km-card-layout-component-miniprogram 0.1.12 → 0.1.14

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

@@ -1,18 +1,28 @@
 <view class="km-node km-node--text" style="{{wrapperStyle}}">
   <view class="km-node__text" style="{{contentStyle}}">
-    <block wx:if="{{iconMeta && iconMeta.name}}">
+    <block wx:if="{{(iconMeta && (iconMeta.name || iconMeta.text)) && (element.icon && element.icon.style !== 'text')}}">
       <view class="km-node__text-content">
-        <block wx:if="{{iconMeta.align === 'right'}}">
-          <text class="km-node__text-value">{{textValue || ''}}</text>
-          <view style="{{iconMeta.wrapperStyle}}" class="km-node__text-icon--wrapper" >
+
+        <!-- icon 在右侧 -->
+        <block wx:if="{{iconMeta && iconMeta.align === 'right'}}">
+          <text class="km-node__text-value">{{(element.icon && element.icon.style === 'text' && element.icon.enable) ? (element.label + '：') : ''}}{{textValue || ''}}</text>
+          <view
+            class="km-node__text-icon--wrapper"
+            style="{{iconMeta.wrapperStyle}}"
+          >
             <text
               class="km-node__text-icon icon"
               style="font-size: {{iconMeta.size || '16px'}}; color: {{iconMeta.color || ''}}; margin-right: {{iconMeta.gap || ''}};"
             >{{iconMeta.text || iconMeta.name || ''}}</text>
           </view>
         </block>
+
+        <!-- icon 在左侧 -->
         <block wx:else>
-          <view style="{{iconMeta.wrapperStyle}}" class="km-node__text-icon--wrapper">
+          <view
+            class="km-node__text-icon--wrapper"
+            style="{{iconMeta.wrapperStyle}}"
+          >
             <text
               class="km-node__text-icon icon"
               style="font-size: {{iconMeta.size || '16px'}}; color: {{iconMeta.color || ''}}; margin-right: {{iconMeta.gap || ''}};"
@@ -20,10 +30,13 @@
           </view>
           <text class="km-node__text-value">{{textValue || ''}}</text>
         </block>
+
       </view>
     </block>
+
+    <!-- 无 icon -->
     <block wx:else>
-      <text class="km-node__text-value">{{textValue || ''}}</text>
+      <text class="km-node__text-value">{{(element.icon && element.icon.style === 'text' && element.icon.enable) ? (element.label + '：') : ''}}{{textValue || ''}}</text>
     </block>
   </view>
 </view>

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

@@ -89,7 +89,7 @@ Component({
     },
     methods: {
         rebuild() {
-            const layoutInput = ensureArray(this.data.layout);
+            const layoutInput = (0, index_1.processCardLayout)(this.data.layout, this.data.data);
             const rootData = handleSpecialFields(this.data.data);
             if (!layoutInput.length) {
                 this.setData({ cards: [], rootData });

package/miniprogram_dist/vendor/km-card-layout-core/bindings.js

@@ -20,6 +20,7 @@ function stripLayoutBindings(layouts = []) {
 }
 exports.stripLayoutBindings = stripLayoutBindings;
 function applyItemCollectBindings(layouts = [], items = []) {
+    console.log('applyItemCollectBindings', layouts, items);
     const targetLayouts = Array.isArray(layouts) ? layouts : [];
     const metaMap = new Map();
     const metaList = Array.isArray(items) ? items : [];
@@ -29,14 +30,13 @@ function applyItemCollectBindings(layouts = [], items = []) {
         }
     });
     const assignBinding = (el) => {
-        var _a;
         const meta = metaMap.get(String(el.id));
         const binding = meta && meta.bind !== undefined && meta.bind !== null
             ? meta.bind
             : el.binding;
         const defaultValue = meta && meta.default !== undefined ? meta.default : el.defaultValue;
         const key = meta && meta.key !== undefined ? meta.key : el.key;
-        const base = { ...el };
+        const base = { ...el, label: meta === null || meta === void 0 ? void 0 : meta.name };
         if (binding !== undefined)
             base.binding = binding;
         else
@@ -49,8 +49,10 @@ function applyItemCollectBindings(layouts = [], items = []) {
             base.key = key;
         else
             delete base.key;
-        if (el.type === 'text' && ((_a = meta === null || meta === void 0 ? void 0 : meta.extra) === null || _a === void 0 ? void 0 : _a.icon)) {
-            base.icon = { ...(base.icon || {}), name: meta.extra.icon };
+        if (el.type === 'text') {
+            // if (meta?.extra?.icon) {
+            //   base.icon = { ...(base.icon || {}), name: meta.extra.icon };
+            // }
         }
         if (el.type === 'layout-panel') {
             return {

package/miniprogram_dist/vendor/km-card-layout-core/render/helpers.js

@@ -1,9 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildTextIconMeta = exports.getIconName = exports.getImageSrc = exports.getTextValue = exports.buildImageContentStyle = exports.buildTextValueStyle = exports.buildTextContentStyle = exports.buildPanelContentStyle = exports.buildBaseContentStyle = exports.buildBackgroundStyle = exports.buildCardStyle = exports.buildWrapperStyle = void 0;
+exports.buildTextIconMeta = exports.getIconName = exports.getImageSrc = exports.getTextValue = exports.buildImageContentStyle = exports.buildTextValueStyle = exports.buildTextContentStyle = exports.buildPanelContentStyle = exports.buildBaseContentStyle = exports.buildBackgroundStyle = exports.buildCardStyle = exports.buildWrapperStyle = exports.mockBaseCompanyDutyTemplateItem = void 0;
 const helpers_1 = require("../helpers");
 const layout_1 = require("../layout");
 const data_1 = require("../data");
+exports.mockBaseCompanyDutyTemplateItem = {
+    id: -1,
+    name: 'company_duty_custom',
+    bind: 'user.baseCompanyDuty',
+    key: 'company_duty_custom',
+    type: 'text',
+    cate: 0,
+};
 const buildWrapperStyle = (el, unit = 'px') => {
     const abs = (0, layout_1.getAbsLayout)(el);
     if (!abs)
@@ -32,8 +40,12 @@ const buildCardStyle = (layout, unit = 'px') => ({
 exports.buildCardStyle = buildCardStyle;
 const buildBackgroundStyle = (layout, unit = 'px') => ({
     zIndex: layout.backgroundZIndex,
-    width: '100%',
-    height: '100%',
+    width: layout.backgroundWidth
+        ? (0, helpers_1.addUnit)(layout.backgroundWidth, unit)
+        : '100%',
+    height: layout.backgroundHeight
+        ? (0, helpers_1.addUnit)(layout.backgroundHeight, unit)
+        : '100%',
     position: 'absolute',
     left: 0,
     top: 0,
@@ -91,12 +103,15 @@ const buildImageContentStyle = (el, unit = 'px') => {
         ((_c = el.style) === null || _c === void 0 ? void 0 : _c.borderRadius) !== undefined && ((_d = el.style) === null || _d === void 0 ? void 0 : _d.borderRadius) !== null
             ? (0, helpers_1.addUnit)(el.style.borderRadius, unit)
             : '0';
-    console.log(style);
     return style;
 };
 exports.buildImageContentStyle = buildImageContentStyle;
 const getTextValue = (el, data) => {
-    const bound = el.binding && data ? (0, data_1.resolveBindingValue)(el.binding, data) : undefined;
+    // 如果 id 匹配，则使用 mock 的 binding，否则用原来的
+    const binding = el.id === String(exports.mockBaseCompanyDutyTemplateItem.id)
+        ? exports.mockBaseCompanyDutyTemplateItem.bind
+        : el.binding;
+    const bound = binding && data ? (0, data_1.resolveBindingValue)(binding, data) : undefined;
     const val = bound !== undefined && bound !== null
         ? bound
         : el.defaultValue !== undefined && el.defaultValue !== null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "km-card-layout-component-miniprogram",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "",
   "main": "miniprogram_dist/index.js",
   "miniprogram": "miniprogram_dist",

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

@@ -1,18 +1,28 @@
 <view class="km-node km-node--text" style="{{wrapperStyle}}">
   <view class="km-node__text" style="{{contentStyle}}">
-    <block wx:if="{{iconMeta && iconMeta.name}}">
+    <block wx:if="{{(iconMeta && (iconMeta.name || iconMeta.text)) && (element.icon && element.icon.style !== 'text')}}">
       <view class="km-node__text-content">
-        <block wx:if="{{iconMeta.align === 'right'}}">
-          <text class="km-node__text-value">{{textValue || ''}}</text>
-          <view style="{{iconMeta.wrapperStyle}}" class="km-node__text-icon--wrapper" >
+
+        <!-- icon 在右侧 -->
+        <block wx:if="{{iconMeta && iconMeta.align === 'right'}}">
+          <text class="km-node__text-value">{{(element.icon && element.icon.style === 'text' && element.icon.enable) ? (element.label + '：') : ''}}{{textValue || ''}}</text>
+          <view
+            class="km-node__text-icon--wrapper"
+            style="{{iconMeta.wrapperStyle}}"
+          >
             <text
               class="km-node__text-icon icon"
               style="font-size: {{iconMeta.size || '16px'}}; color: {{iconMeta.color || ''}}; margin-right: {{iconMeta.gap || ''}};"
             >{{iconMeta.text || iconMeta.name || ''}}</text>
           </view>
         </block>
+
+        <!-- icon 在左侧 -->
         <block wx:else>
-          <view style="{{iconMeta.wrapperStyle}}" class="km-node__text-icon--wrapper">
+          <view
+            class="km-node__text-icon--wrapper"
+            style="{{iconMeta.wrapperStyle}}"
+          >
             <text
               class="km-node__text-icon icon"
               style="font-size: {{iconMeta.size || '16px'}}; color: {{iconMeta.color || ''}}; margin-right: {{iconMeta.gap || ''}};"
@@ -20,10 +30,13 @@
           </view>
           <text class="km-node__text-value">{{textValue || ''}}</text>
         </block>
+
       </view>
     </block>
+
+    <!-- 无 icon -->
     <block wx:else>
-      <text class="km-node__text-value">{{textValue || ''}}</text>
+      <text class="km-node__text-value">{{(element.icon && element.icon.style === 'text' && element.icon.enable) ? (element.label + '：') : ''}}{{textValue || ''}}</text>
     </block>
   </view>
 </view>

package/src/components/card-layout/index.ts

@@ -10,6 +10,7 @@ import {
   buildPanelContentStyle,
   buildWrapperStyle,
   normalizeLayout,
+  processCardLayout,
   styleObjectToString,
 } from '../../vendor/km-card-layout-core/index';
 
@@ -128,7 +129,7 @@ Component({
   },
   methods: {
     rebuild() {
-      const layoutInput = ensureArray(this.data.layout as CardLayoutInput);
+      const layoutInput = processCardLayout(this.data.layout, this.data.data);
       const rootData = handleSpecialFields(this.data.data);
       if (!layoutInput.length) {
         this.setData({ cards: [], rootData });

package/src/vendor/km-card-layout-core/bindings.ts

@@ -26,6 +26,8 @@ export function applyItemCollectBindings(
   layouts: CardLayoutSchema[] = [],
   items: TemplateItem[] = []
 ): CardLayoutSchema[] {
+  console.log('applyItemCollectBindings', layouts, items);
+  
   const targetLayouts = Array.isArray(layouts) ? layouts : [];
   const metaMap = new Map<string, TemplateItem>();
   const metaList = Array.isArray(items) ? items : [];
@@ -44,15 +46,17 @@ export function applyItemCollectBindings(
     const defaultValue =
       meta && meta.default !== undefined ? meta.default : el.defaultValue;
     const key = meta && meta.key !== undefined ? meta.key : el.key;
-    const base: any = { ...el };
+    const base: any = { ...el, label: meta?.name };
     if (binding !== undefined) base.binding = binding;
     else delete base.binding;
     if (defaultValue !== undefined) base.defaultValue = defaultValue;
     else delete base.defaultValue;
     if (key !== undefined) base.key = key;
     else delete base.key;
-    if (el.type === 'text' && meta?.extra?.icon) {
-      base.icon = { ...(base.icon || {}), name: meta.extra.icon };
+    if (el.type === 'text') {
+      // if (meta?.extra?.icon) {
+      //   base.icon = { ...(base.icon || {}), name: meta.extra.icon };
+      // }
     }
 
     if (el.type === 'layout-panel') {
@@ -61,6 +65,7 @@ export function applyItemCollectBindings(
         children: (el.children || []).map(assignBinding),
       } as CardElement;
     }
+
     return base as CardElement;
   };
 

package/src/vendor/km-card-layout-core/interface/elements.ts

@@ -32,7 +32,7 @@ export interface TextIconConfig {
   gap?: number;
   align?: 'left' | 'right';
   enable?: boolean;
-  style?: 'fill' | 'dot' | 'line';
+  style?: 'fill' | 'dot' | 'line' | 'text';
 }
 
 export interface TextElement extends CardElementBase {

package/src/vendor/km-card-layout-core/interface/layout.ts

@@ -13,6 +13,8 @@ export interface CardLayoutSchema {
   padding?: number;
   children: CardElement[];
   thumbnail?: string;
+  backgroundWidth?: number;
+  backgroundHeight?: number;
 }
 
 export type CardLayoutInput = CardLayoutSchema[];

package/src/vendor/km-card-layout-core/render/helpers.ts

@@ -7,9 +7,19 @@ import type {
   IconElement,
   ImageElement,
   LayoutPanelElement,
+  TemplateItem,
   TextElement,
 } from '../interface';
 
+export const mockBaseCompanyDutyTemplateItem: TemplateItem = {
+  id: -1,
+  name: 'company_duty_custom',
+  bind: 'user.baseCompanyDuty',
+  key: 'company_duty_custom',
+  type: 'text',
+  cate: 0,
+};
+
 export const buildWrapperStyle = (
   el: CardElement,
   unit: 'px' | 'rpx' = 'px'
@@ -47,8 +57,12 @@ export const buildBackgroundStyle = (
   unit: 'px' | 'rpx' = 'px'
 ) => ({
   zIndex: layout.backgroundZIndex,
-  width: '100%',
-  height: '100%',
+  width: layout.backgroundWidth
+    ? addUnit(layout.backgroundWidth, unit)
+    : '100%',
+  height: layout.backgroundHeight
+    ? addUnit(layout.backgroundHeight, unit)
+    : '100%',
   position: 'absolute',
   left: 0,
   top: 0,
@@ -104,7 +118,10 @@ export const buildTextValueStyle = (
   return style;
 };
 
-export const buildImageContentStyle = (el: ImageElement, unit: 'px' | 'rpx' = 'px') => {
+export const buildImageContentStyle = (
+  el: ImageElement,
+  unit: 'px' | 'rpx' = 'px'
+) => {
   const style: Record<string, any> = { ...(el.style || {}) };
   style.borderWidth =
     el.style?.borderWidth !== undefined && el.style?.borderWidth !== null
@@ -114,22 +131,33 @@ export const buildImageContentStyle = (el: ImageElement, unit: 'px' | 'rpx' = 'p
     el.style?.borderRadius !== undefined && el.style?.borderRadius !== null
       ? addUnit(el.style.borderRadius as any, unit)
       : '0';
-      console.log(style);
   return style;
 };
 
-export const getTextValue = (el: TextElement, data?: Record<string, any>) => {
+export const getTextValue = (
+  el: TextElement,
+  data?: Record<string, any>
+) => {
+  // 如果 id 匹配，则使用 mock 的 binding，否则用原来的
+  const binding =
+    el.id === String(mockBaseCompanyDutyTemplateItem.id)
+      ? mockBaseCompanyDutyTemplateItem.bind
+      : el.binding;
+
   const bound =
-    el.binding && data ? resolveBindingValue(el.binding, data) : undefined;
+    binding && data ? resolveBindingValue(binding, data) : undefined;
+
   const val =
     bound !== undefined && bound !== null
       ? bound
       : el.defaultValue !== undefined && el.defaultValue !== null
       ? el.defaultValue
       : '';
+
   return `${val ?? ''}`;
 };
 
+
 export const getImageSrc = (el: ImageElement, data?: Record<string, any>) => {
   const bound =
     el.binding && data ? resolveBindingValue(el.binding, data) : undefined;