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

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

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const index_1 = require("../../vendor/km-card-layout-core/index");
-const icon_map_1 = require("./icon-map");
 const ensureArray = (input) => {
     if (!input)
         return [];
@@ -12,207 +11,27 @@ const pickCardId = (layout, idx) => {
         return layout.name || layout.id;
     return `card-${idx}`;
 };
-const withUnit = (value, unit) => (0, index_1.addUnit)(value, unit);
-const buildCardStyle = (layout, unit) => (0, index_1.styleObjectToString)({
-    width: withUnit(layout.width, unit),
-    height: withUnit(layout.height, unit),
-    color: layout.fontColor,
-    borderRadius: layout.borderRadius !== undefined
-        ? withUnit(layout.borderRadius, unit)
-        : undefined,
-    padding: layout.padding !== undefined ? withUnit(layout.padding, unit) : undefined,
-    position: 'relative',
-    overflow: 'hidden',
-    boxSizing: 'border-box',
-    backgroundColor: 'transparent',
-}, unit);
-const buildBackgroundStyle = (layout, unit) => (0, index_1.styleObjectToString)({
-    zIndex: layout.backgroundZIndex,
-    borderRadius: layout.borderRadius !== undefined
-        ? withUnit(layout.borderRadius, unit)
-        : undefined,
-    width: '100%',
-    height: '100%',
-    position: 'absolute',
-    left: 0,
-    top: 0,
-}, unit);
-const buildWrapperStyle = (el, unit) => {
-    if (!el.layout || el.layout.mode !== 'absolute')
-        return '';
-    return (0, index_1.styleObjectToString)({
-        position: 'absolute',
-        left: withUnit(el.layout.x, unit),
-        top: withUnit(el.layout.y, unit),
-        width: withUnit(el.layout.width, unit),
-        height: withUnit(el.layout.height, unit),
-        zIndex: el.layout.zIndex,
-        boxSizing: 'border-box',
-        display: 'flex',
-        alignItems: 'center',
-    }, unit);
-};
-const buildPanelContentStyle = (el, unit) => (0, index_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.2',
-        display: 'inline-flex',
-        alignItems: 'center',
-    };
-    if (textAlign)
-        style.textAlign = textAlign;
-    return (0, index_1.styleObjectToString)(style, unit);
-};
-const buildBaseContentStyle = (el, unit) => (0, index_1.styleObjectToString)({
-    ...(el.style || {}),
-    boxSizing: 'border-box',
-}, unit);
-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 buildTextIcon = (el, unit) => {
-    var _a, _b, _c, _d, _e;
-    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 = (_d = (_b = icon.color) !== null && _b !== void 0 ? _b : (_c = el.style) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : undefined;
-    const text = mapIconGlyph(name, name);
-    return {
-        name,
-        text,
-        size: size !== undefined ? withUnit(size, unit) : undefined,
-        gap: gap !== undefined ? withUnit(gap, unit) : undefined,
-        wrapperStyle: (0, index_1.styleObjectToString)({
-            display: 'inline-flex',
-            alignItems: 'center',
-            height: ((_e = el.style) === null || _e === void 0 ? void 0 : _e.lineHeight) || 'auto',
-        }, unit),
-        color,
-        align: icon.align || 'left',
-    };
-};
-const buildRenderNode = (el, data, unit) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    if (!el || el.visible === false)
-        return null;
-    const wrapperStyle = buildWrapperStyle(el, unit);
+const decorateElements = (children = []) => (children || []).map(el => {
     if (el.type === 'layout-panel') {
         const panel = el;
         return {
-            id: el.id,
-            type: el.type,
-            wrapperStyle,
-            contentStyle: buildPanelContentStyle(panel, unit),
-            children: buildRenderNodes(panel.children || [], data, unit),
-        };
-    }
-    if (el.type === 'text') {
-        const textValue = (_b = (_a = (0, index_1.resolveBindingValue)(el.binding, data)) !== 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: `${textValue}`,
-            icon: buildTextIcon(el, unit),
-        };
-    }
-    if (el.type === 'image') {
-        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';
-        }
-        const src = (_e = (_d = (_c = (0, index_1.resolveBindingValue)(el.binding, data)) !== 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: (0, index_1.styleObjectToString)(style, unit),
-            src,
-            mode,
+            ...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 || []),
         };
     }
-    if (el.type === 'icon') {
-        const resolved = (_h = (_g = (_f = (0, index_1.resolveBindingValue)(el.binding, data)) !== null && _f !== void 0 ? _f : el.name) !== null && _g !== void 0 ? _g : el.defaultValue) !== null && _h !== void 0 ? _h : '';
-        const text = mapIconGlyph(`${resolved}`, `${resolved}`);
-        return {
-            id: el.id,
-            type: el.type,
-            wrapperStyle,
-            contentStyle: buildBaseContentStyle(el, unit),
-            name: `${resolved}`,
-            text,
-        };
-    }
-    if (el.type === 'custom') {
-        return {
-            id: el.id,
-            type: el.type,
-            wrapperStyle,
-            contentStyle: buildBaseContentStyle(el, unit),
-        };
-    }
-    return null;
-};
-const buildRenderNodes = (children, data, unit) => {
-    if (!Array.isArray(children))
-        return [];
-    const nodes = [];
-    children.forEach(el => {
-        if (!el || el.visible === false)
-            return;
-        const node = buildRenderNode(el, data, unit);
-        if (node)
-            nodes.push(node);
-    });
-    return nodes;
+    return el;
+});
+const buildCards = (layouts) => {
+    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 || []),
+    }));
 };
-const buildCards = (layouts, data, unit) => layouts.map(layout => ({
-    id: layout.name || layout.id || '',
-    cardStyle: buildCardStyle(layout, unit),
-    backgroundImage: layout.backgroundImage || '',
-    backgroundStyle: buildBackgroundStyle(layout, unit),
-    nodes: buildRenderNodes(layout.children || [], data, unit),
-}));
 Component({
     options: {
         styleIsolation: 'apply-shared',
@@ -249,16 +68,12 @@ Component({
     methods: {
         rebuild() {
             const layoutInput = ensureArray(this.data.layout);
-            const dataInput = (this.data.data || {});
             if (!layoutInput.length) {
                 this.setData({ cards: [] });
                 return;
             }
             const normalizedLayouts = (0, index_1.normalizeLayout)(layoutInput);
-            const cards = buildCards(normalizedLayouts, dataInput, 'rpx').map((card, idx) => ({
-                ...card,
-                id: pickCardId(layoutInput[idx], idx),
-            }));
+            const cards = buildCards(normalizedLayouts);
             this.setData({ cards });
         },
     },

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

@@ -1,3 +1,9 @@
 {
-  "component": true
+  "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"
+  }
 }

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

@@ -9,82 +9,34 @@
           src="{{item.backgroundImage}}"
           mode="aspectFill"
         />
-        <block wx:for="{{item.nodes}}" wx:key="id">
-          <template is="render-node" data="{{node:item}}" />
+        <block wx:for="{{item.elements}}" wx:key="id">
+          <template is="render-element" data="{{el:item}}" />
         </block>
       </view>
     </view>
   </block>
 </view>
 
-<template name="render-node">
-  <block wx:if="{{node.type === 'image'}}">
-    <view class="km-node" style="{{node.wrapperStyle}}">
-      <image
-        class="km-node__image"
-        style="{{node.contentStyle}}"
-        src="{{node.src}}"
-        mode="{{node.mode || 'aspectFill'}}"
-      />
-    </view>
+<template name="render-element">
+  <block wx:if="{{el.type === 'image'}}">
+    <image-element element="{{el}}" />
   </block>
-  <block wx:elif="{{node.type === 'icon'}}">
-    <view class="km-node km-node--icon" style="{{node.wrapperStyle}}">
-      <view
-        wx:if="{{node.name === 'dot' || node.name === 'round'}}"
-        class="km-node__icon-dot"
-        style="{{node.contentStyle}}"
-      />
-      <view
-        wx:else
-        class="km-node__icon icon"
-        style="{{node.contentStyle}}"
-      >{{node.text || ''}}</view>
-    </view>
+  <block wx:elif="{{el.type === 'icon'}}">
+    <icon-element element="{{el}}" />
   </block>
-  <block wx:elif="{{node.type === 'layout-panel'}}">
-    <view class="km-node" style="{{node.wrapperStyle}}">
-      <view class="km-node__panel" style="{{node.contentStyle}}">
-        <block wx:for="{{node.children}}" wx:key="id">
-          <template is="render-node" data="{{node:item}}" />
+  <block wx:elif="{{el.type === 'layout-panel'}}">
+    <view class="km-node" style="{{el.wrapperStyle}}">
+      <view class="km-node__panel" style="{{el.contentStyle}}">
+        <block wx:for="{{el.children}}" wx:key="id">
+          <template is="render-element" data="{{el:item}}" />
         </block>
       </view>
     </view>
   </block>
-  <block wx:elif="{{node.type === 'custom'}}">
-    <view class="km-node km-node--custom" style="{{node.wrapperStyle}}">
-      <view class="km-node__custom" style="{{node.contentStyle}}">
-        <slot name="{{node.id}}"></slot>
-      </view>
-    </view>
+  <block wx:elif="{{el.type === 'custom'}}">
+    <custom-element element="{{el}}" />
   </block>
   <block wx:else>
-    <view class="km-node km-node--text" style="{{node.wrapperStyle}}">
-      <view class="km-node__text" style="{{node.contentStyle}}">
-        <block wx:if="{{node.icon && node.icon.name}}">
-          <view class="km-node__text-content">
-            <block wx:if="{{node.icon.align === 'right'}}">
-              <text class="km-node__text-value">{{node.text || ''}}</text>
-              <view style="{{node.icon.wrapperStyle}}">
-                <text
-                class="km-node__text-icon icon"
-                style="font-size: {{node.icon.size || '16px'}}; color: {{node.icon.color || ''}}; margin-right: {{node.icon.gap || ''}};">{{node.icon.text || node.icon.name || ''}}</text>
-              </view>
-            </block>
-            <block wx:else>
-              <view style="{{node.icon.wrapperStyle}}">
-                <text
-                class="km-node__text-icon icon"
-                style="font-size: {{node.icon.size || '16px'}}; color: {{node.icon.color || ''}}; margin-right: {{node.icon.gap || ''}};">{{node.icon.text || node.icon.name || ''}}</text>
-              </view>
-              <text class="km-node__text-value">{{node.text || ''}}</text>
-            </block>
-          </view>
-        </block>
-        <block wx:else>
-          <text class="km-node__text-value">{{node.text || ''}}</text>
-        </block>
-      </view>
-    </view>
+    <text-element element="{{el}}" />
   </block>
 </template>

package/miniprogram_dist/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/miniprogram_dist/utils/card-schema.js

@@ -1,10 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.styleObjectToString = exports.resolveBindingValue = exports.normalizeLayout = exports.buildRenderResult = exports.buildRenderNodes = exports.addUnit = void 0;
+exports.styleObjectToString = exports.resolveBindingValue = exports.normalizeLayout = exports.getIconName = exports.getImageSrc = exports.getTextValue = exports.buildTextIconMeta = exports.buildImageContentStyle = exports.buildTextContentStyle = exports.buildPanelContentStyle = exports.buildBaseContentStyle = exports.buildBackgroundStyle = exports.buildCardStyle = exports.buildWrapperStyle = exports.addUnit = void 0;
 var index_1 = require("../vendor/km-card-layout-core/index");
 Object.defineProperty(exports, "addUnit", { enumerable: true, get: function () { return index_1.addUnit; } });
-Object.defineProperty(exports, "buildRenderNodes", { enumerable: true, get: function () { return index_1.buildRenderNodes; } });
-Object.defineProperty(exports, "buildRenderResult", { enumerable: true, get: function () { return index_1.buildRenderResult; } });
+Object.defineProperty(exports, "buildWrapperStyle", { enumerable: true, get: function () { return index_1.buildWrapperStyle; } });
+Object.defineProperty(exports, "buildCardStyle", { enumerable: true, get: function () { return index_1.buildCardStyle; } });
+Object.defineProperty(exports, "buildBackgroundStyle", { enumerable: true, get: function () { return index_1.buildBackgroundStyle; } });
+Object.defineProperty(exports, "buildBaseContentStyle", { enumerable: true, get: function () { return index_1.buildBaseContentStyle; } });
+Object.defineProperty(exports, "buildPanelContentStyle", { enumerable: true, get: function () { return index_1.buildPanelContentStyle; } });
+Object.defineProperty(exports, "buildTextContentStyle", { enumerable: true, get: function () { return index_1.buildTextContentStyle; } });
+Object.defineProperty(exports, "buildImageContentStyle", { enumerable: true, get: function () { return index_1.buildImageContentStyle; } });
+Object.defineProperty(exports, "buildTextIconMeta", { enumerable: true, get: function () { return index_1.buildTextIconMeta; } });
+Object.defineProperty(exports, "getTextValue", { enumerable: true, get: function () { return index_1.getTextValue; } });
+Object.defineProperty(exports, "getImageSrc", { enumerable: true, get: function () { return index_1.getImageSrc; } });
+Object.defineProperty(exports, "getIconName", { enumerable: true, get: function () { return index_1.getIconName; } });
 Object.defineProperty(exports, "normalizeLayout", { enumerable: true, get: function () { return index_1.normalizeLayout; } });
 Object.defineProperty(exports, "resolveBindingValue", { enumerable: true, get: function () { return index_1.resolveBindingValue; } });
 Object.defineProperty(exports, "styleObjectToString", { enumerable: true, get: function () { return index_1.styleObjectToString; } });

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

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTemplateBackgrounds = exports.getTemplateItems = exports.applyItemCollectBindings = exports.stripLayoutBindings = void 0;
+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;
+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) => {
+        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 };
+        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' && ((_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 === '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;

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveBindingValue = void 0;
+const helpers_1 = require("./helpers");
+const pathToSegments = (path) => `${path || ''}`
+    .replace(/\[(\d+)\]/g, '.$1')
+    .split('.')
+    .map(p => p.trim())
+    .filter(Boolean);
+const readByPath = (data, path) => {
+    if (path === undefined || path === null || path === '')
+        return data;
+    const segments = pathToSegments(path);
+    let cursor = data;
+    for (let i = 0; i < segments.length; i += 1) {
+        if (!(0, helpers_1.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[key];
+        }
+        if (cursor === undefined || cursor === null) {
+            return cursor;
+        }
+    }
+    return cursor;
+};
+const resolveBindingValue = (binding, rootData, context) => {
+    if (!binding)
+        return undefined;
+    const value = readByPath(rootData, binding);
+    return value === undefined ? undefined : value;
+};
+exports.resolveBindingValue = resolveBindingValue;

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

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isObject = exports.styleObjectToString = exports.addUnit = exports.toNumber = void 0;
+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',
+]);
+const toNumber = (value) => {
+    const num = Number(value);
+    return Number.isFinite(num) ? num : undefined;
+};
+exports.toNumber = toNumber;
+const toKebab = (key) => key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+const addUnit = (value, unit) => {
+    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}`;
+};
+exports.addUnit = addUnit;
+const styleObjectToString = (style, unit = 'px') => {
+    if (!style)
+        return '';
+    const pairs = [];
+    Object.keys(style).forEach(key => {
+        const value = style[key];
+        if (value === undefined || value === null || value === '')
+            return;
+        const useUnit = DIMENSION_PROPS.has(key)
+            ? (0, exports.addUnit)(value, unit)
+            : value;
+        if (useUnit === undefined || useUnit === null || useUnit === '')
+            return;
+        pairs.push(`${toKebab(key)}:${useUnit}`);
+    });
+    return pairs.join(';');
+};
+exports.styleObjectToString = styleObjectToString;
+const isObject = (val) => Boolean(val) && typeof val === 'object';
+exports.isObject = isObject;