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

package/miniprogram_dist/vendor/km-card-layout-core/ops/changeBackground.js

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setElementVisible = exports.updateElementsStyle = exports.applyBackground = exports.applySpecialStyle = exports.resolveSpecialStyle = exports.DEFAULT_DECOR_COLOR = exports.backgroundChange = void 0;
+const toNameArray = (name) => {
+    if (Array.isArray(name))
+        return name.filter(Boolean);
+    if (!name)
+        return [];
+    return `${name}`
+        .split(',')
+        .map(n => n.trim())
+        .filter(Boolean);
+};
+function backgroundChange(bg, layout) {
+    const applySpecialColor = (el) => {
+        const extras = bg.fontColorExtra || [];
+        if (!extras.length)
+            return el;
+        const keys = [];
+        if (el.binding)
+            keys.push(String(el.binding));
+        if (el.id)
+            keys.push(String(el.id));
+        if (el.type === 'icon')
+            keys.push('icon');
+        if (el.type === 'custom')
+            keys.push('decor');
+        const matched = extras.find(sc => toNameArray(sc.name).some(n => keys.some(k => k === null || k === void 0 ? void 0 : k.startsWith(n))));
+        if (!matched)
+            return el;
+        const baseStyle = { ...(el.style || {}) };
+        if (el.type === 'custom') {
+            return { ...el, style: { ...baseStyle, backgroundColor: matched.color } };
+        }
+        return { ...el, style: { ...baseStyle, color: matched.color } };
+    };
+    const traverse = (children = []) => children.map(el => {
+        if (!el)
+            return el;
+        if (el.type === 'layout-panel') {
+            return {
+                ...el,
+                children: traverse(el.children || []),
+            };
+        }
+        return applySpecialColor(el);
+    });
+    return {
+        ...layout,
+        backgroundImage: bg.imgUrl,
+        fontColor: bg.fontColor || layout.fontColor,
+        children: traverse(layout.children || []),
+    };
+}
+exports.backgroundChange = backgroundChange;
+exports.DEFAULT_DECOR_COLOR = '#94a3b8';
+const resolveSpecialStyle = (element, background) => {
+    var _a;
+    if (!background)
+        return {};
+    const keys = [];
+    if (element.binding)
+        keys.push(String(element.binding));
+    if (element.id)
+        keys.push(String(element.id));
+    if (element.type === 'icon')
+        keys.push('icon');
+    if (element.type === 'custom')
+        keys.push('decor');
+    const matched = (_a = background.specialColors) === null || _a === void 0 ? void 0 : _a.find(sc => {
+        const names = toNameArray(sc.name);
+        return names.some(n => keys.some(k => k === null || k === void 0 ? void 0 : k.startsWith(n)));
+    });
+    if (!matched)
+        return {};
+    if (element.type === 'custom') {
+        return { backgroundColor: matched.color };
+    }
+    return { color: matched.color };
+};
+exports.resolveSpecialStyle = resolveSpecialStyle;
+const applySpecialStyle = (el, background = null, options = {}) => {
+    const specialStyle = (0, exports.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 overrideExisting = options.overrideExisting === true;
+    const hasSpecial = Object.keys(specialStyle).length > 0;
+    const defaultDecorColor = options.defaultDecorColor || exports.DEFAULT_DECOR_COLOR;
+    if (hasSpecial) {
+        if (hasExplicit && !overrideExisting)
+            return el;
+        return { ...el, style: { ...baseStyle, ...specialStyle } };
+    }
+    if (overrideExisting && hasExplicit) {
+        const nextStyle = { ...baseStyle };
+        if (isCustom) {
+            nextStyle.backgroundColor = (background === null || background === void 0 ? void 0 : background.mainColor) || defaultDecorColor;
+        }
+        else {
+            delete nextStyle.color;
+        }
+        return { ...el, style: nextStyle };
+    }
+    return el;
+};
+exports.applySpecialStyle = applySpecialStyle;
+const applyBackground = (layout, background, _options = {}) => {
+    var _a;
+    const bgId = Number(background.id);
+    const payload = {
+        id: Number.isFinite(bgId) ? bgId : 0,
+        name: background.name,
+        imgUrl: background.imageUrl,
+        fontColor: background.mainColor,
+        fontColorExtra: ((_a = background.specialColors) === null || _a === void 0 ? void 0 : _a.map(sc => ({
+            name: sc.name,
+            color: sc.color,
+        }))) || [],
+    };
+    return backgroundChange(payload, layout);
+};
+exports.applyBackground = applyBackground;
+const updateElementsStyle = (layout, targetIds, updates) => {
+    const targets = new Set(targetIds);
+    return {
+        ...layout,
+        children: layout.children.map(el => targets.has(el.id)
+            ? { ...el, style: { ...(el.style || {}), ...updates } }
+            : el),
+    };
+};
+exports.updateElementsStyle = updateElementsStyle;
+const setElementVisible = (layout, key, visible) => {
+    return layout.map(la => ({
+        ...la,
+        children: la.children.map(el => (el.key === key ? { ...el, visible } : el)),
+    }));
+};
+exports.setElementVisible = setElementVisible;

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

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildTextIconMeta = exports.getIconName = exports.getImageSrc = exports.getTextValue = exports.buildImageContentStyle = exports.buildTextContentStyle = exports.buildPanelContentStyle = exports.buildBaseContentStyle = exports.buildBackgroundStyle = exports.buildCardStyle = exports.buildWrapperStyle = void 0;
+const helpers_1 = require("../helpers");
+const layout_1 = require("../layout");
+const buildWrapperStyle = (el, unit = 'px') => {
+    const abs = (0, layout_1.getAbsLayout)(el);
+    if (!abs)
+        return {};
+    return {
+        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',
+    };
+};
+exports.buildWrapperStyle = buildWrapperStyle;
+const buildCardStyle = (layout, unit = 'px') => ({
+    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',
+});
+exports.buildCardStyle = buildCardStyle;
+const buildBackgroundStyle = (layout, unit = 'px') => ({
+    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,
+});
+exports.buildBackgroundStyle = buildBackgroundStyle;
+const buildBaseContentStyle = (el) => ({
+    ...(el.style || {}),
+    boxSizing: 'border-box',
+});
+exports.buildBaseContentStyle = buildBaseContentStyle;
+const buildPanelContentStyle = (el, unit = 'px') => ({
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    display: 'block',
+    boxSizing: 'border-box',
+    ...(el.style || {}),
+});
+exports.buildPanelContentStyle = buildPanelContentStyle;
+const buildTextContentStyle = (el, unit = 'px') => {
+    var _a, _b, _c, _d;
+    const textAlign = ((_a = el.style) === null || _a === void 0 ? void 0 : _a.textAlign) || el.align || undefined;
+    const style = {
+        ...(el.style || {}),
+        fontSize: (0, helpers_1.addUnit)((_b = el.style) === null || _b === void 0 ? void 0 : _b.fontSize, unit),
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-word',
+        lineHeight: ((_c = el.style) === null || _c === void 0 ? void 0 : _c.lineHeight) !== undefined && ((_d = el.style) === null || _d === void 0 ? void 0 : _d.lineHeight) !== null
+            ? (0, helpers_1.addUnit)(el.style.lineHeight, unit)
+            : '1',
+    };
+    if (textAlign)
+        style.textAlign = textAlign;
+    return style;
+};
+exports.buildTextContentStyle = buildTextContentStyle;
+const buildImageContentStyle = (el) => {
+    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 style;
+};
+exports.buildImageContentStyle = buildImageContentStyle;
+const getTextValue = (el) => el.defaultValue !== undefined && el.defaultValue !== null
+    ? `${el.defaultValue}`
+    : '';
+exports.getTextValue = getTextValue;
+const getImageSrc = (el) => el.defaultUrl || el.defaultValue || '';
+exports.getImageSrc = getImageSrc;
+const getIconName = (el) => (el.name || el.defaultValue || '');
+exports.getIconName = getIconName;
+const buildTextIconMeta = (el, unit = 'px') => {
+    var _a, _b, _c, _d, _e, _f;
+    const icon = el.icon;
+    const enabled = (icon === null || icon === void 0 ? void 0 : 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;
+    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
+        : (_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}`,
+        size: (0, helpers_1.addUnit)(size, unit),
+        gap: (0, helpers_1.addUnit)(gap, unit),
+        color,
+        align: icon.align || 'left',
+        wrapperStyle: {
+            height: ((_d = el.style) === null || _d === void 0 ? void 0 : _d.lineHeight) !== undefined && ((_e = el.style) === null || _e === void 0 ? void 0 : _e.lineHeight) !== null
+                ? (0, helpers_1.addUnit)(el.style.lineHeight, unit)
+                : (_f = el.style) === null || _f === void 0 ? void 0 : _f.fontSize,
+        },
+    };
+};
+exports.buildTextIconMeta = buildTextIconMeta;

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildRenderData = void 0;
+const changeBackground_1 = require("../ops/changeBackground");
+const utils_1 = require("../utils");
+function buildRenderData(layout, items, config) {
+    // 绑定数据
+    let renderLayout = (0, utils_1.applyItemCollectBindings)(layout, items);
+    // 设置显示逻辑
+    renderLayout = (0, changeBackground_1.setElementVisible)(renderLayout, 'image', config.showAvatar);
+    renderLayout = (0, changeBackground_1.setElementVisible)(renderLayout, 'logo', config.showLogo);
+    // 设置背景
+    renderLayout = renderLayout.map((la, index) => config.currentBg[index] ? (0, changeBackground_1.backgroundChange)(config.currentBg[index], la) : la);
+    return renderLayout;
+}
+exports.buildRenderData = buildRenderData;

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

@@ -1,132 +1,25 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTemplateBackgrounds = exports.getTemplateItems = exports.applyItemCollectBindings = exports.stripLayoutBindings = exports.backgroundChange = void 0;
-function backgroundChange(bg, layout) {
-    const toNameArray = (name) => {
-        if (Array.isArray(name))
-            return name.filter(Boolean);
-        if (!name)
-            return [];
-        return `${name}`
-            .split(',')
-            .map(n => n.trim())
-            .filter(Boolean);
-    };
-    const applySpecialColor = (el) => {
-        const extras = bg.fontColorExtra || [];
-        if (!extras.length)
-            return el;
-        const keys = [];
-        if (el.binding)
-            keys.push(String(el.binding));
-        if (el.id)
-            keys.push(String(el.id));
-        if (el.type === 'icon')
-            keys.push('icon');
-        if (el.type === 'custom')
-            keys.push('decor');
-        const matched = extras.find(sc => toNameArray(sc.name).some(n => keys.some(k => k === null || k === void 0 ? void 0 : k.startsWith(n))));
-        if (!matched)
-            return el;
-        const baseStyle = { ...(el.style || {}) };
-        if (el.type === 'custom') {
-            return { ...el, style: { ...baseStyle, backgroundColor: matched.color } };
-        }
-        return { ...el, style: { ...baseStyle, color: matched.color } };
-    };
-    const traverse = (children = []) => children.map(el => {
-        if (!el)
-            return el;
-        if (el.type === 'layout-panel') {
-            return {
-                ...el,
-                children: traverse(el.children || []),
-            };
-        }
-        return applySpecialColor(el);
-    });
-    return {
-        ...layout,
-        backgroundImage: bg.imgUrl,
-        fontColor: bg.fontColor || layout.fontColor,
-        children: traverse(layout.children || []),
-    };
-}
-exports.backgroundChange = backgroundChange;
-function stripLayoutBindings(layouts = []) {
-    const targetLayouts = Array.isArray(layouts) ? layouts : [];
-    const stripElement = (el) => {
-        const { binding: _b, defaultValue: _d, ...rest } = el;
-        if (el.type === 'layout-panel') {
-            return {
-                ...rest,
-                children: (el.children || []).map(stripElement),
-            };
-        }
-        return rest;
-    };
-    return targetLayouts.map(layout => ({
-        ...layout,
-        children: (layout.children || []).map(stripElement),
-    }));
-}
-exports.stripLayoutBindings = stripLayoutBindings;
-/**
- * 应用元素数据绑定字段
- * @param layouts 布局
- * @param items 绑定元素数据
- * @returns
- */
-function applyItemCollectBindings(layouts = [], items = []) {
-    const targetLayouts = Array.isArray(layouts) ? layouts : [];
-    const metaMap = new Map();
-    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) => {
-        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 };
-        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 === 'layout-panel') {
-            return {
-                ...base,
-                children: (el.children || []).map(assignBinding),
-            };
-        }
-        return base;
-    };
-    return targetLayouts.map(layout => ({
-        ...layout,
-        children: (layout.children || []).map(assignBinding),
-    }));
-}
-exports.applyItemCollectBindings = applyItemCollectBindings;
-function getTemplateItems(ids, items) {
-    const idArray = ids.split(',').map(id => id.trim());
-    return items.filter(item => idArray.includes(String(item.id)));
-}
-exports.getTemplateItems = getTemplateItems;
-function getTemplateBackgrounds(ids, items) {
-    const idArray = ids.split(',').map(id => id.trim());
-    return items.filter(item => idArray.includes(String(item.id)));
-}
-exports.getTemplateBackgrounds = getTemplateBackgrounds;
+exports.DEFAULT_DECOR_COLOR = exports.resolveSpecialStyle = exports.updateElementsStyle = exports.applyBackground = exports.applySpecialStyle = exports.backgroundChange = void 0;
+__exportStar(require("./bindings"), exports);
+var changeBackground_1 = require("./ops/changeBackground");
+Object.defineProperty(exports, "backgroundChange", { enumerable: true, get: function () { return changeBackground_1.backgroundChange; } });
+Object.defineProperty(exports, "applySpecialStyle", { enumerable: true, get: function () { return changeBackground_1.applySpecialStyle; } });
+Object.defineProperty(exports, "applyBackground", { enumerable: true, get: function () { return changeBackground_1.applyBackground; } });
+Object.defineProperty(exports, "updateElementsStyle", { enumerable: true, get: function () { return changeBackground_1.updateElementsStyle; } });
+Object.defineProperty(exports, "resolveSpecialStyle", { enumerable: true, get: function () { return changeBackground_1.resolveSpecialStyle; } });
+Object.defineProperty(exports, "DEFAULT_DECOR_COLOR", { enumerable: true, get: function () { return changeBackground_1.DEFAULT_DECOR_COLOR; } });

package/package.json

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

package/script/sync-core.js

@@ -5,8 +5,16 @@ const pkgRoot = path.resolve(__dirname, '..');
 const coreRoot = path.resolve(pkgRoot, '../km-card-layout-core');
 const targetDir = path.resolve(pkgRoot, 'src/vendor/km-card-layout-core');
 
-const filesToCopy = ['index.ts', 'types.d.ts', 'utils.ts'];
-const dirsToCopy = ['interface'];
+const filesToCopy = [
+  'index.ts',
+  'types.d.ts',
+  'utils.ts',
+  'helpers.ts',
+  'layout.ts',
+  'data.ts',
+  'bindings.ts',
+];
+const dirsToCopy = ['interface', 'render', 'ops'];
 
 function ensureFileExists(filePath) {
   if (!fs.existsSync(filePath)) {
@@ -16,6 +24,9 @@ function ensureFileExists(filePath) {
 
 function syncCore() {
   ensureFileExists(coreRoot);
+  if (fs.existsSync(targetDir)) {
+    fs.rmSync(targetDir, { recursive: true, force: true });
+  }
   fs.mkdirSync(targetDir, { recursive: true });
 
   filesToCopy.forEach((fileName) => {

package/src/components/card-layout/elements/custom-element/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/src/components/card-layout/elements/custom-element/index.ts

@@ -0,0 +1,30 @@
+import {
+  buildBaseContentStyle,
+  buildWrapperStyle,
+  styleObjectToString,
+  type CustomElement,
+} from '../../../../vendor/km-card-layout-core/index';
+
+Component({
+  options: {
+    styleIsolation: 'apply-shared',
+  },
+  properties: {
+    element: {
+      type: Object,
+      value: {},
+    },
+  },
+  data: {
+    wrapperStyle: '',
+    contentStyle: '',
+  },
+  observers: {
+    element(el: CustomElement) {
+      if (!el) return;
+      const wrapperStyle = styleObjectToString(buildWrapperStyle(el, 'rpx'), 'rpx');
+      const contentStyle = styleObjectToString(buildBaseContentStyle(el), 'rpx');
+      this.setData({ wrapperStyle, contentStyle });
+    },
+  },
+});

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

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

package/src/components/card-layout/elements/custom-element/index.wxss

@@ -0,0 +1,14 @@
+.km-node {
+  box-sizing: border-box;
+  color: inherit;
+}
+
+.km-node--custom {
+  box-sizing: border-box;
+}
+
+.km-node__custom {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}

package/src/components/card-layout/elements/icon-element/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/src/components/card-layout/elements/icon-element/index.ts

@@ -0,0 +1,42 @@
+import {
+  buildBaseContentStyle,
+  buildWrapperStyle,
+  getIconName,
+  styleObjectToString,
+  type IconElement,
+} from '../../../../vendor/km-card-layout-core/index';
+import { ICON_CODE_MAP } from '../../icon-map';
+
+const mapIconGlyph = (name?: string, fallback?: string) => {
+  if (!name) return fallback;
+  const glyph = ICON_CODE_MAP[name];
+  if (glyph) return String.fromCharCode(parseInt(glyph, 16));
+  return fallback || name;
+};
+
+Component({
+  options: {
+    styleIsolation: 'apply-shared',
+  },
+  properties: {
+    element: {
+      type: Object,
+      value: {},
+    },
+  },
+  data: {
+    wrapperStyle: '',
+    contentStyle: '',
+    iconText: '',
+  },
+  observers: {
+    element(el: IconElement) {
+      if (!el) return;
+      const wrapperStyle = styleObjectToString(buildWrapperStyle(el, 'rpx'), 'rpx');
+      const contentStyle = styleObjectToString(buildBaseContentStyle(el), 'rpx');
+      const name = getIconName(el);
+      const iconText = mapIconGlyph(name, name || '');
+      this.setData({ wrapperStyle, contentStyle, iconText });
+    },
+  },
+});

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

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

package/src/components/card-layout/elements/icon-element/index.wxss

@@ -0,0 +1,37 @@
+.km-node {
+  box-sizing: border-box;
+  color: inherit;
+}
+
+.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;
+}
+
+@font-face {
+  font-family: 'km-icon';
+  src: url('data:font/woff;charset=utf-8;base64,d09GRgABAAAAAEl4AA0AAAAAcmgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAABJXAAAABoAAAAcrMtJV0dERUYAAEk8AAAAHgAAAB4AKQByT1MvMgAAAaQAAABGAAAAYDw3SVljbWFwAAAC7AAAAM8AAAIW8XL3K2dhc3AAAEk0AAAACAAAAAj//wADZ2x5ZgAABJgAAEBZAABkZPJymXJoZWFkAAABMAAAADEAAAA2MtZiFmhoZWEAAAFkAAAAIAAAACQNagmCaG10eAAAAewAAAD/AAABqqs3Ii9sb2NhAAADvAAAANoAAADaKv0P7G1heHAAAAGEAAAAHwAAACABmQHEbmFtZQAARPQAAAFGAAACgl6CAQJwb3N0AABGPAAAAvUAAATh1g15W3jaY2BkYGAA4lqffPd4fpuvDNwsDCDwVIyfA0b///i/gXMWcyeQy8HABBIFAAVdCfwAAAB42mNgZGBgbvjfwBDDOfP/x///OWcxAEVQQCYAuxgH/XjaY2BkYGDIYdzBoMwAAkxAzAWEDAz/wXwGACjlAl8AeNpjYGFRYJzAwMrAwNTJdIaBgaEfQjO+ZjBi5ACKMrAyM2AFAWmuKQwHnjE+y2Ju+N/AwMB8h6ERKMyIpESBgREAenQNCwAAeNo90cErBGEYx/Hf1LMH7MVxoigHtS600pzWnMjBlt2dFAeiNuWgXLgokgslbpyE/Aduyl38J3ty4aCs7/vOk6lPv+d5531n3nfGVF5JIZlUx9fAbawnEfIFq14/YhddFPjFmynZ9n4TbYzg2tcMW6Epr4NQT3jSJ2lcW9ec1fSEAheMnVume7KKBbQwiMye+5/kEpqYwQoOY59pn1xGw3Lt8NwHS7UY35frivqbet2fNYZp+4j76vj+GpUhjZJreLfxODecay/eTzVPzmIj9uX7VLnUmfdb/2fN4trcv0kYv8Oxe/V5Rzhg7inZ8wzjN5b0f6z8PV2d/AHivi0JAHja3dBFUoVRDITR88PD3d3d3d3d3d33zQqYwwVGbIGk8qV6kK7qIN7vlIsCRdlBRT865iPsWOig318/PwOjbwYd+7mKSZAoSbIUqdKky5ApS7YcufLkK1CoSLESpcqCZ4VKVarVqFWnXoNGTZq1aNWmXYdOXbr16NWn34BBQ4aNGDVm3IRJU6bNmDVn3oJFS5atWLVm3YZNW7bt2LVn34FDR46dOHXm3IVLV67duHXn3oNHT8Hv2YtXbyFaot9HfMeMC4jztyL/vr4AXx4eawAAAAAAAAAAAACwAPIDSgQ8BLIFUgWUBcIF/gY8BpIHCgdAB3wHoAgOCHAIxgk+CV4JzAnqCkQKrgtUC8QMEAxsDNQNFA1SDegONg6qDyQPgg/CEAIQxBEwEaQSHBLYE14T4hRcFPIVTBYMFkwWqBckGGAYxhmYGegaEBpeGuIbXhvwHPQd5B62Hygf6CBeILog9CFUIbgiBCJ0ItQjbCQSJGgkuCVsJcImKib0J44ocijOKSApUCo2KmQqtituK34sJixkLMgtdC3WLpgvPC+QMBww/DGCMagyMgAA') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+.icon {
+  font-family: 'km-icon' !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/src/components/card-layout/elements/image-element/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/src/components/card-layout/elements/image-element/index.ts

@@ -0,0 +1,35 @@
+import {
+  buildImageContentStyle,
+  buildWrapperStyle,
+  getImageSrc,
+  styleObjectToString,
+  type ImageElement,
+} from '../../../../vendor/km-card-layout-core/index';
+
+Component({
+  options: {
+    styleIsolation: 'apply-shared',
+  },
+  properties: {
+    element: {
+      type: Object,
+      value: {},
+    },
+  },
+  data: {
+    wrapperStyle: '',
+    contentStyle: '',
+    imageSrc: '',
+    mode: 'aspectFill',
+  },
+  observers: {
+    element(el: ImageElement) {
+      if (!el) return;
+      const wrapperStyle = styleObjectToString(buildWrapperStyle(el, 'rpx'), 'rpx');
+      const contentStyle = styleObjectToString(buildImageContentStyle(el), 'rpx');
+      const imageSrc = getImageSrc(el);
+      const mode = el.fit === 'contain' ? 'aspectFit' : 'aspectFill';
+      this.setData({ wrapperStyle, contentStyle, imageSrc, mode });
+    },
+  },
+});