km-card-layout-component-miniprogram 0.1.8 → 0.1.9

package/src/vendor/km-card-layout-core/ops/changeBackground.ts

@@ -102,10 +102,9 @@ export const applySpecialStyle = (
   const specialStyle = resolveSpecialStyle(el, background);
   const baseStyle = { ...(el.style || {}) };
   const isCustom = el.type === 'custom';
-  const hasExplicit =
-    isCustom
-      ? Boolean(baseStyle.backgroundColor || baseStyle.background)
-      : baseStyle.color !== undefined && baseStyle.color !== null;
+  const hasExplicit = isCustom
+    ? Boolean(baseStyle.backgroundColor || baseStyle.background)
+    : baseStyle.color !== undefined && baseStyle.color !== null;
 
   const overrideExisting = options.overrideExisting === true;
   const hasSpecial = Object.keys(specialStyle).length > 0;
@@ -167,3 +166,14 @@ export const updateElementsStyle = (
     ),
   };
 };
+
+export const setElementVisible = (
+  layout: CardLayoutSchema[],
+  key: string,
+  visible: boolean
+): CardLayoutSchema[] => {
+  return layout.map(la => ({
+    ...la,
+    children: la.children.map(el => (el.key === key ? { ...el, visible } : el)),
+  }));
+};

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

@@ -0,0 +1,144 @@
+import { addUnit } from '../helpers';
+import { getAbsLayout } from '../layout';
+import type {
+  CardElement,
+  CardLayoutSchema,
+  IconElement,
+  ImageElement,
+  LayoutPanelElement,
+  TextElement,
+} from '../interface';
+
+export const buildWrapperStyle = (el: CardElement, unit: 'px' | 'rpx' = 'px') => {
+  const abs = getAbsLayout(el);
+  if (!abs) return {};
+  return {
+    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',
+  };
+};
+
+export const buildCardStyle = (layout: CardLayoutSchema, unit: 'px' | 'rpx' = 'px') => ({
+  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',
+});
+
+export const buildBackgroundStyle = (layout: CardLayoutSchema, unit: 'px' | 'rpx' = 'px') => ({
+  zIndex: layout.backgroundZIndex,
+  borderRadius:
+    layout.borderRadius !== undefined
+      ? addUnit(layout.borderRadius, unit)
+      : undefined,
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  left: 0,
+  top: 0,
+});
+
+export const buildBaseContentStyle = (el: CardElement) => ({
+  ...(el.style || {}),
+  boxSizing: 'border-box',
+});
+
+export const buildPanelContentStyle = (el: LayoutPanelElement, unit: 'px' | 'rpx' = 'px') => ({
+  position: 'relative',
+  width: '100%',
+  height: '100%',
+  display: 'block',
+  boxSizing: 'border-box',
+  ...(el.style || {}),
+});
+
+export const buildTextContentStyle = (el: TextElement, unit: 'px' | 'rpx' = 'px') => {
+  const textAlign =
+    (el.style?.textAlign as string | undefined) || el.align || undefined;
+  const style: Record<string, any> = {
+    ...(el.style || {}),
+    fontSize: addUnit(el.style?.fontSize, unit),
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word',
+    lineHeight:
+      el.style?.lineHeight !== undefined && el.style?.lineHeight !== null
+        ? addUnit(el.style.lineHeight as any, unit)
+        : '1',
+  };
+  if (textAlign) style.textAlign = textAlign;
+  return style;
+};
+
+export const buildImageContentStyle = (el: ImageElement) => {
+  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 style;
+};
+
+export const getTextValue = (el: TextElement) =>
+  el.defaultValue !== undefined && el.defaultValue !== null
+    ? `${el.defaultValue}`
+    : '';
+
+export const getImageSrc = (el: ImageElement) =>
+  el.defaultUrl || el.defaultValue || '';
+
+export const getIconName = (el: IconElement) =>
+  (el.name || el.defaultValue || '') as string;
+
+export const buildTextIconMeta = (el: TextElement, unit: 'px' | 'rpx' = 'px') => {
+  const icon = el.icon;
+  const enabled = icon?.enable === true;
+  if (!icon || !enabled) return null;
+
+  const style = icon.style || 'fill';
+  const baseName = icon.name || el.key || el.binding || el.id;
+  let name: string | undefined;
+  if (style === 'dot') name = 'round';
+  else if (style === 'line') name = baseName ? `${baseName}-line` : undefined;
+  else name = baseName || undefined;
+  if (!name) return null;
+
+  const size =
+    icon.size !== undefined && icon.size !== null
+      ? icon.size
+      : (el.style?.fontSize as any);
+  const gap = icon.gap !== undefined && icon.gap !== null ? icon.gap : 4;
+  const color =
+    icon.color ??
+    ((typeof el.style?.color === 'string' ? el.style.color : undefined) as
+      | string
+      | undefined);
+
+  return {
+    name: `${name}`,
+    size: addUnit(size as any, unit),
+    gap: addUnit(gap as any, unit),
+    color,
+    align: icon.align || 'left',
+    wrapperStyle: {
+      height:
+        el.style?.lineHeight !== undefined && el.style?.lineHeight !== null
+          ? addUnit(el.style.lineHeight, unit)
+          : el.style?.fontSize,
+    },
+  };
+};

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

@@ -0,0 +1,21 @@
+import { CardLayoutSchema, TemplateItem } from '../interface';
+import { backgroundChange, setElementVisible } from '../ops/changeBackground';
+import { Config } from '../types';
+import { applyItemCollectBindings } from '../utils';
+
+export function buildRenderData(
+  layout: CardLayoutSchema[],
+  items: TemplateItem[],
+  config: Config
+): CardLayoutSchema[] {
+  // 绑定数据
+  let renderLayout = applyItemCollectBindings(layout, items);
+  // 设置显示逻辑
+  renderLayout = setElementVisible(renderLayout, 'image', config.showAvatar);
+  renderLayout = setElementVisible(renderLayout, 'logo', config.showLogo);
+  // 设置背景
+  renderLayout = renderLayout.map((la, index) =>
+    config.currentBg[index] ? backgroundChange(config.currentBg[index], la) : la
+  );
+  return renderLayout;
+}

package/src/vendor/km-card-layout-core/types.d.ts

@@ -10,10 +10,19 @@ import type {
   CardElement,
   CardLayoutInput,
   CardLayoutSchema,
-  RenderNode,
-  RenderResult,
+  TemplateItem,
+  TemplateBackground
 } from './interface';
 
+export type Config = {
+  showAvatar: boolean;
+  showLogo: boolean;
+  /**
+   * 当前背景 (0 为正面背景 1 为背面背景)
+   */
+  currentBg: TemplateBackground[];
+};
+
 export function addUnit(
   value: string | number | undefined | null,
   unit: 'px' | 'rpx'
@@ -137,15 +146,65 @@ export function updateElementsStyle(
   updates: Record<string, any>
 ): CardLayoutSchema;
 
-export function buildRenderNodes(
-  children: CardElement[],
-  data: Record<string, any>,
-  unit?: 'px' | 'rpx',
-  context?: BindingContext
-): RenderNode[];
+export function buildWrapperStyle(
+  el: CardElement,
+  unit?: 'px' | 'rpx'
+): Record<string, any>;
+
+export function buildCardStyle(
+  layout: CardLayoutSchema,
+  unit?: 'px' | 'rpx'
+): Record<string, any>;
+
+export function buildBackgroundStyle(
+  layout: CardLayoutSchema,
+  unit?: 'px' | 'rpx'
+): Record<string, any>;
+
+export function buildBaseContentStyle(
+  el: CardElement
+): Record<string, any>;
 
-export function buildRenderResult(
-  layout: CardLayoutInput,
-  data: Record<string, any>,
+export function buildPanelContentStyle(
+  el: import('./interface/elements').LayoutPanelElement,
   unit?: 'px' | 'rpx'
-): RenderResult;
+): Record<string, any>;
+
+export function buildTextContentStyle(
+  el: import('./interface/elements').TextElement,
+  unit?: 'px' | 'rpx'
+): Record<string, any>;
+
+export function buildImageContentStyle(
+  el: import('./interface/elements').ImageElement
+): Record<string, any>;
+
+export function getTextValue(
+  el: import('./interface/elements').TextElement
+): string;
+
+export function getImageSrc(
+  el: import('./interface/elements').ImageElement
+): string;
+
+export function getIconName(
+  el: import('./interface/elements').IconElement
+): string;
+
+export function buildTextIconMeta(
+  el: import('./interface/elements').TextElement,
+  unit?: 'px' | 'rpx'
+): {
+  name: string;
+  size?: string;
+  gap?: string;
+  color?: string;
+  align: 'left' | 'right';
+  wrapperStyle?: Record<string, any>;
+} | null;
+
+export function buildRenderData (
+  layout: CardLayoutSchema[],
+  items: TemplateItem[],
+  config: Config
+): CardLayoutSchema[];

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

@@ -1,3 +1,5 @@
+
+
 export * from './bindings';
 export {
   backgroundChange,
@@ -7,3 +9,5 @@ export {
   resolveSpecialStyle,
   DEFAULT_DECOR_COLOR,
 } from './ops/changeBackground';
+
+

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

@@ -1,210 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildRenderResult = exports.buildRenderNodes = void 0;
-const helpers_1 = require("../helpers");
-const layout_1 = require("../layout");
-const data_1 = require("../data");
-const buildCardStyle = (layout, unit) => (0, helpers_1.styleObjectToString)({
-    width: (0, helpers_1.addUnit)(layout.width, unit),
-    height: (0, helpers_1.addUnit)(layout.height, unit),
-    color: layout.fontColor,
-    borderRadius: layout.borderRadius !== undefined
-        ? (0, helpers_1.addUnit)(layout.borderRadius, unit)
-        : undefined,
-    padding: layout.padding !== undefined ? (0, helpers_1.addUnit)(layout.padding, unit) : undefined,
-    position: 'relative',
-    overflow: 'hidden',
-    boxSizing: 'border-box',
-    backgroundColor: 'transparent',
-}, unit);
-const buildBackgroundStyle = (layout, unit) => (0, helpers_1.styleObjectToString)({
-    zIndex: layout.backgroundZIndex,
-    borderRadius: layout.borderRadius !== undefined
-        ? (0, helpers_1.addUnit)(layout.borderRadius, unit)
-        : undefined,
-    width: '100%',
-    height: '100%',
-    position: 'absolute',
-    left: 0,
-    top: 0,
-}, unit);
-const buildWrapperStyle = (el, unit) => {
-    const abs = (0, layout_1.getAbsLayout)(el);
-    if (!abs)
-        return '';
-    return (0, helpers_1.styleObjectToString)({
-        position: 'absolute',
-        left: (0, helpers_1.addUnit)(abs.x, unit),
-        top: (0, helpers_1.addUnit)(abs.y, unit),
-        width: (0, helpers_1.addUnit)(abs.width, unit),
-        height: (0, helpers_1.addUnit)(abs.height, unit),
-        zIndex: abs.zIndex,
-        boxSizing: 'border-box',
-    }, unit);
-};
-const buildPanelContentStyle = (el, unit) => (0, helpers_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',
-    };
-    if (textAlign)
-        style.textAlign = textAlign;
-    return (0, helpers_1.styleObjectToString)(style, unit);
-};
-const buildBaseContentStyle = (el, unit) => (0, helpers_1.styleObjectToString)({
-    ...(el.style || {}),
-    boxSizing: 'border-box',
-}, unit);
-const buildImageContentStyle = (el, unit) => {
-    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';
-    }
-    return (0, helpers_1.styleObjectToString)(style, unit);
-};
-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 = (_b = icon.color) !== null && _b !== void 0 ? _b : (typeof ((_c = el.style) === null || _c === void 0 ? void 0 : _c.color) === 'string' ? el.style.color : undefined);
-    return {
-        name: `${name}`,
-        text: `${name}`,
-        size: (0, helpers_1.addUnit)(size, unit),
-        gap: (0, helpers_1.addUnit)(gap, unit),
-        color: color,
-        align: icon.align || 'left',
-        wrapperStyle: (0, helpers_1.styleObjectToString)({
-            display: 'inline-flex',
-            alignItems: 'center',
-            height: ((_d = el.style) === null || _d === void 0 ? void 0 : _d.lineHeight) || '1',
-        }, unit),
-    };
-};
-const buildNode = (el, rootData, unit, context) => {
-    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') {
-        return {
-            id: el.id,
-            type: el.type,
-            visible: el.visible,
-            wrapperStyle,
-            contentStyle: buildPanelContentStyle(el, unit),
-            children: (0, exports.buildRenderNodes)(el.children || [], rootData, unit, context),
-        };
-    }
-    const baseStyle = buildBaseContentStyle(el, unit);
-    if (el.type === 'text') {
-        const value = (_b = (_a = (0, data_1.resolveBindingValue)(el.binding, rootData, context)) !== 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: `${value}`,
-            visible: el.visible,
-            icon: buildTextIcon(el, unit),
-        };
-    }
-    if (el.type === 'image') {
-        const src = (_e = (_d = (_c = (0, data_1.resolveBindingValue)(el.binding, rootData, context)) !== 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: buildImageContentStyle(el, unit),
-            src,
-            mode,
-            visible: el.visible,
-        };
-    }
-    if (el.type === 'icon') {
-        const name = (_h = (_g = (_f = (0, data_1.resolveBindingValue)(el.binding, rootData, context)) !== null && _f !== void 0 ? _f : el.name) !== null && _g !== void 0 ? _g : el.defaultValue) !== null && _h !== void 0 ? _h : '';
-        return {
-            id: el.id,
-            type: el.type,
-            wrapperStyle,
-            contentStyle: baseStyle,
-            name: `${name}`,
-            text: `${name}`,
-            visible: el.visible,
-        };
-    }
-    if (el.type === 'custom') {
-        return {
-            id: el.id,
-            type: el.type,
-            wrapperStyle,
-            contentStyle: baseStyle,
-            visible: el.visible,
-        };
-    }
-    return null;
-};
-const buildRenderNodes = (children, rootData, unit = 'px', context = {}) => {
-    if (!Array.isArray(children))
-        return [];
-    const nodes = [];
-    children.forEach(el => {
-        if (!el || el.visible === false)
-            return;
-        const node = buildNode(el, rootData, unit, context);
-        if (node)
-            nodes.push(node);
-    });
-    return nodes;
-};
-exports.buildRenderNodes = buildRenderNodes;
-const buildRenderResult = (layoutInput, dataInput, unit = 'px') => {
-    const layouts = (0, layout_1.normalizeLayout)(layoutInput);
-    return layouts.map(layout => {
-        const cardStyle = buildCardStyle(layout, unit);
-        const bgStyle = buildBackgroundStyle(layout, unit);
-        const renderTree = (0, exports.buildRenderNodes)(layout.children || [], dataInput || {}, unit);
-        return {
-            renderTree,
-            cardStyle,
-            backgroundImage: layout.backgroundImage || '',
-            backgroundStyle: bgStyle,
-        };
-    });
-};
-exports.buildRenderResult = buildRenderResult;

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

@@ -1,53 +0,0 @@
-import type { CardElementType, CardElement } from './elements';
-import type { CardLayoutInput, CardLayoutSchema } from './layout';
-
-export interface RenderNodeIcon {
-  name: string;
-  text?: string;
-  size?: string;
-  color?: string;
-  gap?: string;
-  align?: 'left' | 'right';
-  wrapperStyle?: string;
-}
-
-export interface RenderNode {
-  id: string;
-  type: CardElementType | 'text';
-  wrapperStyle: string;
-  contentStyle: string;
-  name?: string;
-  text?: string;
-  src?: string;
-  mode?: string;
-  children?: RenderNode[];
-  visible?: boolean;
-  icon?: RenderNodeIcon;
-}
-
-export interface RenderPageResult {
-  renderTree: RenderNode[];
-  cardStyle: string;
-  backgroundImage: string;
-  backgroundStyle: string;
-}
-
-export type RenderResult = RenderPageResult[];
-
-export interface BindingContext {
-  /**
-   * 当前上下文数据的绑定前缀（预留给嵌套场景）
-   */
-  contextBinding?: string;
-  /**
-   * 当前上下文数据（预留给嵌套场景）
-   */
-  contextData?: any;
-}
-
-export type {
-  CardElement,
-  CardElementType,
-  CardLayoutInput,
-  CardLayoutSchema,
-};