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

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

@@ -0,0 +1,8 @@
+<view class="km-node" style="{{wrapperStyle}}">
+  <image
+    class="km-node__image"
+    style="{{contentStyle}}"
+    src="{{imageSrc}}"
+    mode="{{mode}}"
+  />
+</view>

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

@@ -0,0 +1,10 @@
+.km-node {
+  box-sizing: border-box;
+  color: inherit;
+}
+
+.km-node__image {
+  width: 100%;
+  height: 100%;
+  display: block;
+}

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

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

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

@@ -0,0 +1,52 @@
+import {
+  buildTextContentStyle,
+  buildTextIconMeta,
+  buildWrapperStyle,
+  getTextValue,
+  styleObjectToString,
+  type TextElement,
+} 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: '',
+    textValue: '',
+    iconMeta: null as any,
+  },
+  observers: {
+    element(el: TextElement) {
+      if (!el) return;
+      const wrapperStyle = styleObjectToString(buildWrapperStyle(el, 'rpx'), 'rpx');
+      const contentStyle = styleObjectToString(buildTextContentStyle(el, 'rpx'), 'rpx');
+      const textValue = getTextValue(el);
+      const iconRaw = buildTextIconMeta(el, 'rpx');
+      const iconMeta =
+        iconRaw && iconRaw.name
+          ? {
+              ...iconRaw,
+              text: mapIconGlyph(iconRaw.name, iconRaw.name),
+              wrapperStyle: styleObjectToString(iconRaw.wrapperStyle, 'rpx'),
+            }
+          : iconRaw;
+      this.setData({ wrapperStyle, contentStyle, textValue, iconMeta });
+    },
+  },
+});

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

@@ -0,0 +1,29 @@
+<view class="km-node km-node--text" style="{{wrapperStyle}}">
+  <view class="km-node__text" style="{{contentStyle}}">
+    <block wx:if="{{iconMeta && iconMeta.name}}">
+      <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" >
+            <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>
+        <block wx:else>
+          <view style="{{iconMeta.wrapperStyle}}" class="km-node__text-icon--wrapper">
+            <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>
+          <text class="km-node__text-value">{{textValue || ''}}</text>
+        </block>
+      </view>
+    </block>
+    <block wx:else>
+      <text class="km-node__text-value">{{textValue || ''}}</text>
+    </block>
+  </view>
+</view>

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

@@ -0,0 +1,59 @@
+.km-node {
+  box-sizing: border-box;
+  color: inherit;
+}
+
+.km-node--text {
+  /* overflow hidden if needed */
+}
+
+.km-node--text text {
+  display: inline;
+}
+
+.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-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.km-node__text-value {
+  display: inline-block;
+  white-space: pre-wrap;
+  word-break: break-word;
+  vertical-align: middle;
+}
+
+@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;
+}
+
+.km-node__text-icon--wrapper{
+  display: inline-block;
+}

package/src/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/src/components/card-layout/index.ts

@@ -2,53 +2,32 @@ import type {
   CardElement,
   CardLayoutInput,
   CardLayoutSchema,
-  IconElement,
-  ImageElement,
   LayoutPanelElement,
-  TextElement,
 } from '../../vendor/km-card-layout-core/index';
 import {
-  addUnit,
+  buildBackgroundStyle,
+  buildCardStyle,
+  buildPanelContentStyle,
+  buildWrapperStyle,
   normalizeLayout,
-  resolveBindingValue,
   styleObjectToString,
 } from '../../vendor/km-card-layout-core/index';
-import { ICON_CODE_MAP } from './icon-map';
 
-type LayoutData = {
-  [key: string]: any;
-};
-
-interface RenderIcon {
-  name?: string;
-  text?: string;
-  size?: string;
-  color?: string;
-  gap?: string;
-  align?: 'left' | 'right';
-  wrapperStyle: string;
-}
-
-interface RenderElement {
-  id: string;
-  type: CardElement['type'];
+type PanelElement = LayoutPanelElement & {
   wrapperStyle: string;
   contentStyle: string;
-  name?: string;
-  text?: string;
-  src?: string;
-  mode?: string;
-  icon?: RenderIcon;
   children?: RenderElement[];
-}
+};
 
-interface RenderCard {
+type RenderElement = CardElement | PanelElement;
+
+type RenderCard = {
   id: string;
   cardStyle: string;
   backgroundImage?: string;
   backgroundStyle: string;
-  nodes: RenderElement[];
-}
+  elements: RenderElement[];
+};
 
 const ensureArray = (input: CardLayoutInput | any): CardLayoutInput => {
   if (!input) return [];
@@ -60,268 +39,29 @@ const pickCardId = (layout: any, idx: number) => {
   return `card-${idx}`;
 };
 
-const withUnit = (value: any, unit: 'px' | 'rpx') => addUnit(value, unit);
-
-const buildCardStyle = (layout: CardLayoutSchema, unit: 'px' | 'rpx') =>
-  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: CardLayoutSchema, unit: 'px' | 'rpx') =>
-  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: CardElement, unit: 'px' | 'rpx') => {
-  if (!el.layout || el.layout.mode !== 'absolute') return '';
-  return 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: LayoutPanelElement,
-  unit: 'px' | 'rpx',
-) =>
-  styleObjectToString(
-    {
-      position: 'relative',
-      width: '100%',
-      height: '100%',
-      display: 'block',
-      boxSizing: 'border-box',
-      ...(el.style || {}),
-    },
-    unit,
-  );
-
-const buildTextContentStyle = (el: TextElement, unit: 'px' | 'rpx') => {
-  const textAlign =
-    (el.style?.textAlign as string | undefined) || el.align || undefined;
-  const style: Record<string, any> = {
-    ...el.style,
-    whiteSpace: 'pre-wrap',
-    wordBreak: 'break-word',
-    lineHeight:
-      el.style?.lineHeight !== undefined && el.style?.lineHeight !== null
-        ? el.style.lineHeight
-        : '1.2',
-    display: 'inline-flex',
-    alignItems: 'center',
-  };
-  if (textAlign) style.textAlign = textAlign;
-  return styleObjectToString(style, unit);
-};
-
-const buildBaseContentStyle = (el: CardElement, unit: 'px' | 'rpx') =>
-  styleObjectToString(
-    {
-      ...(el.style || {}),
-      boxSizing: 'border-box',
-    },
-    unit,
-  );
-
-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;
-};
-
-const buildTextIcon = (
-  el: TextElement,
-  unit: 'px' | 'rpx',
-): RenderIcon | undefined => {
-  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: string | undefined;
-  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
-      : (el.style?.fontSize as number | string | undefined);
-  const gap = icon.gap !== undefined && icon.gap !== null ? icon.gap : 4;
-  const color =
-    icon.color ?? (el.style?.color as string | undefined) ?? undefined;
-
-  const text = mapIconGlyph(name, name);
-  return {
-    name,
-    text,
-    size: size !== undefined ? withUnit(size, unit) : undefined,
-    gap: gap !== undefined ? withUnit(gap, unit) : undefined,
-    wrapperStyle: styleObjectToString(
-      {
-        display: 'inline-flex',
-        alignItems: 'center',
-        height: el.style?.lineHeight || 'auto',
-      },
-      unit,
-    ),
-    color,
-    align: icon.align || 'left',
-  };
-};
-
-const buildRenderNode = (
-  el: CardElement,
-  data: LayoutData,
-  unit: 'px' | 'rpx',
-): RenderElement | null => {
-  if (!el || el.visible === false) return null;
-  const wrapperStyle = buildWrapperStyle(el, unit);
-
-  if (el.type === 'layout-panel') {
-    const panel = el as LayoutPanelElement;
-    return {
-      id: el.id,
-      type: el.type,
-      wrapperStyle,
-      contentStyle: buildPanelContentStyle(panel, unit),
-      children: buildRenderNodes(panel.children || [], data, unit),
-    };
-  }
-
-  if (el.type === 'text') {
-    const textValue =
-      resolveBindingValue(el.binding, data) ?? el.defaultValue ?? '';
-    return {
-      id: el.id,
-      type: el.type,
-      wrapperStyle,
-      contentStyle: buildTextContentStyle(el as TextElement, unit),
-      text: `${textValue}`,
-      icon: buildTextIcon(el as TextElement, unit),
-    };
-  }
-
-  if (el.type === 'image') {
-    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';
+const decorateElements = (children: CardElement[] = []): RenderElement[] =>
+  (children || []).map(el => {
+    if (el.type === 'layout-panel') {
+      const panel = el as LayoutPanelElement;
+      return {
+        ...panel,
+        wrapperStyle: styleObjectToString(buildWrapperStyle(panel, 'rpx'), 'rpx'),
+        contentStyle: styleObjectToString(buildPanelContentStyle(panel, 'rpx'), 'rpx'),
+        children: decorateElements(panel.children || []),
+      };
     }
-
-    const src =
-      resolveBindingValue(el.binding, data) ??
-      (el as ImageElement).defaultUrl ??
-      el.defaultValue ??
-      '';
-    const mode =
-      (el as ImageElement).fit === 'contain' ? 'aspectFit' : 'aspectFill';
-    return {
-      id: el.id,
-      type: el.type,
-      wrapperStyle,
-      contentStyle: styleObjectToString(style, unit),
-      src,
-      mode,
-    };
-  }
-
-  if (el.type === 'icon') {
-    const resolved =
-      resolveBindingValue(el.binding, data) ??
-      (el as IconElement).name ??
-      el.defaultValue ??
-      '';
-    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: CardElement[],
-  data: LayoutData,
-  unit: 'px' | 'rpx',
-) => {
-  if (!Array.isArray(children)) return [];
-  const nodes: RenderElement[] = [];
-  children.forEach(el => {
-    if (!el || el.visible === false) return;
-    const node = buildRenderNode(el, data, unit);
-    if (node) nodes.push(node);
+    return el;
   });
-  return nodes;
-};
 
-const buildCards = (
-  layouts: CardLayoutInput,
-  data: LayoutData,
-  unit: 'px' | 'rpx',
-) =>
-  layouts.map(layout => ({
-    id: layout.name || (layout as any).id || '',
-    cardStyle: buildCardStyle(layout, unit),
+const buildCards = (layouts: CardLayoutSchema[]) => {
+  return layouts.map((layout, idx) => ({
+    id: pickCardId(layouts[idx], idx),
+    cardStyle: styleObjectToString(buildCardStyle(layout, 'rpx'), 'rpx'),
     backgroundImage: layout.backgroundImage || '',
-    backgroundStyle: buildBackgroundStyle(layout, unit),
-    nodes: buildRenderNodes(layout.children || [], data, unit),
+    backgroundStyle: styleObjectToString(buildBackgroundStyle(layout, 'rpx'), 'rpx'),
+    elements: decorateElements(layout.children || []),
   }));
+};
 
 Component({
   options: {
@@ -359,7 +99,6 @@ Component({
   methods: {
     rebuild() {
       const layoutInput = ensureArray(this.data.layout as CardLayoutInput);
-      const dataInput = (this.data.data || {}) as LayoutData;
 
       if (!layoutInput.length) {
         this.setData({ cards: [] });
@@ -367,12 +106,7 @@ Component({
       }
 
       const normalizedLayouts = 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/src/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>