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

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

@@ -1,9 +1,6 @@
-
-
 .km-card-layout {
   display: flex;
   flex-direction: column;
-  gap: 16rpx;
 }
 
 .km-card-layout__item {
@@ -33,74 +30,14 @@
   color: inherit;
 }
 
-.km-node--icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.km-node__image {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-.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;
-}
-
-.km-node__icon-dot {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  background-color: #999;
-}
-
 .km-node__panel {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
 }
 
-.km-node__custom {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-}
 
-.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-value {
-  display: inline-block;
-  white-space: pre-wrap;
-  word-break: break-word;
-  vertical-align: middle;
-}
-
-.km-node--text text {
-  display: inline;
-}
 
-/* ICON */
 
 
 @font-face {

package/src/utils/card-schema.ts

@@ -3,14 +3,21 @@ export type {
   CardElementType,
   CardLayoutInput,
   CardLayoutSchema,
-  RenderNode,
-  RenderResult
 } from '../vendor/km-card-layout-core/index'
 
 export {
   addUnit,
-  buildRenderNodes,
-  buildRenderResult,
+  buildWrapperStyle,
+  buildCardStyle,
+  buildBackgroundStyle,
+  buildBaseContentStyle,
+  buildPanelContentStyle,
+  buildTextContentStyle,
+  buildImageContentStyle,
+  buildTextIconMeta,
+  getTextValue,
+  getImageSrc,
+  getIconName,
   normalizeLayout,
   resolveBindingValue,
   styleObjectToString

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

@@ -0,0 +1,87 @@
+import type { CardElement, CardLayoutSchema } from './interface';
+import type {
+  TemplateBackground,
+  TemplateItem,
+} from './interface/data/payload';
+
+export function stripLayoutBindings(
+  layouts: CardLayoutSchema[] = []
+): CardLayoutSchema[] {
+  const targetLayouts = Array.isArray(layouts) ? layouts : [];
+  const stripElement = (el: CardElement): CardElement => {
+    const { binding: _b, defaultValue: _d, ...rest } = el as any;
+    if (el.type === 'layout-panel') {
+      return {
+        ...rest,
+        children: (el.children || []).map(stripElement),
+      } as CardElement;
+    }
+    return rest as CardElement;
+  };
+
+  return targetLayouts.map(layout => ({
+    ...layout,
+    children: (layout.children || []).map(stripElement),
+  }));
+}
+
+export function applyItemCollectBindings(
+  layouts: CardLayoutSchema[] = [],
+  items: TemplateItem[] = []
+): CardLayoutSchema[] {
+  const targetLayouts = Array.isArray(layouts) ? layouts : [];
+  const metaMap = new Map<string, TemplateItem>();
+  const metaList = Array.isArray(items) ? items : [];
+  metaList.forEach(item => {
+    if (item && item.id !== undefined && item.id !== null) {
+      metaMap.set(String(item.id), item);
+    }
+  });
+
+  const assignBinding = (el: CardElement): CardElement => {
+    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: any = { ...el };
+    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 === 'layout-panel') {
+      return {
+        ...base,
+        children: (el.children || []).map(assignBinding),
+      } as CardElement;
+    }
+    return base as CardElement;
+  };
+
+  return targetLayouts.map(layout => ({
+    ...layout,
+    children: (layout.children || []).map(assignBinding),
+  }));
+}
+
+export function getTemplateItems(ids: string, items: TemplateItem[]) {
+  const idArray = ids.split(',').map(id => id.trim());
+  return items.filter(item => idArray.includes(String(item.id)));
+}
+
+export function getTemplateBackgrounds(
+  ids: string,
+  items: TemplateBackground[]
+) {
+  const idArray = ids.split(',').map(id => id.trim());
+  return items.filter(item => idArray.includes(String(item.id)));
+}

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

@@ -0,0 +1,39 @@
+import { isObject } from './helpers';
+import type { BindingContext } from './interface';
+
+const pathToSegments = (path: string): string[] =>
+  `${path || ''}`
+    .replace(/\[(\d+)\]/g, '.$1')
+    .split('.')
+    .map(p => p.trim())
+    .filter(Boolean);
+
+const readByPath = (data: any, path: string): any => {
+  if (path === undefined || path === null || path === '') return data;
+  const segments = pathToSegments(path);
+  let cursor: any = data;
+  for (let i = 0; i < segments.length; i += 1) {
+    if (!isObject(cursor) && !Array.isArray(cursor)) return undefined;
+    const key = segments[i];
+    if (Array.isArray(cursor)) {
+      const idx = Number(key);
+      cursor = Number.isNaN(idx) ? undefined : cursor[idx];
+    } else {
+      cursor = (cursor as Record<string, any>)[key];
+    }
+    if (cursor === undefined || cursor === null) {
+      return cursor;
+    }
+  }
+  return cursor;
+};
+
+export const resolveBindingValue = (
+  binding: string | undefined,
+  rootData: Record<string, any>,
+  context?: BindingContext
+): any => {
+  if (!binding) return undefined;
+  const value = readByPath(rootData, binding);
+  return value === undefined ? undefined : value;
+};

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

@@ -0,0 +1,76 @@
+const DIMENSION_PROPS = new Set([
+  'width',
+  'height',
+  'top',
+  'right',
+  'bottom',
+  'left',
+  'padding',
+  'paddingTop',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingRight',
+  'margin',
+  'marginTop',
+  'marginBottom',
+  'marginLeft',
+  'marginRight',
+  'fontSize',
+  'lineHeight',
+  'borderRadius',
+  'borderWidth',
+  'letterSpacing',
+  'gap',
+  'rowGap',
+  'columnGap',
+]);
+
+export const toNumber = (value: unknown): number | undefined => {
+  const num = Number(value);
+  return Number.isFinite(num) ? num : undefined;
+};
+
+const toKebab = (key: string): string =>
+  key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+
+export const addUnit = (
+  value: string | number | undefined | null,
+  unit: 'px' | 'rpx'
+): string | undefined => {
+  if (value === undefined || value === null || value === '') return undefined;
+  if (typeof value === 'number') {
+    const ratio = unit === 'rpx' ? 2 : 1;
+    return `${value * ratio}${unit}`;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    if (Number.isFinite(parsed)) {
+      const ratio = unit === 'rpx' ? 2 : 1;
+      return `${parsed * ratio}${unit}`;
+    }
+  }
+  return `${value}`;
+};
+
+export const styleObjectToString = (
+  style?: Record<string, any>,
+  unit: 'px' | 'rpx' = 'px'
+): string => {
+  if (!style) return '';
+  const pairs: string[] = [];
+  Object.keys(style).forEach(key => {
+    const value = style[key];
+    if (value === undefined || value === null || value === '') return;
+    const useUnit = DIMENSION_PROPS.has(key)
+      ? addUnit(value as any, unit)
+      : value;
+    if (useUnit === undefined || useUnit === null || useUnit === '') return;
+    pairs.push(`${toKebab(key)}:${useUnit}`);
+  });
+  return pairs.join(';');
+};
+
+export const isObject = (
+  val: unknown
+): val is Record<string, any> | any[] =>
+  Boolean(val) && typeof val === 'object';