feat: 支持迭代器容器

packages/ui/src/index.ts

@@ -19,11 +19,12 @@
 import Button from './button';
 import Container from './container';
 import Img from './img';
+import IteratorContainer from './iterator-container';
 import Overlay from './overlay';
 import Page from './page';
 import PageFragment from './page-fragment';
 import PageFragmentContainer from './page-fragment-container';
-import Qrcode from './qrcode';
+import QRcode from './qrcode';
 import Text from './text';
 
 const ui: Record<string, any> = {
@@ -32,10 +33,11 @@ const ui: Record<string, any> = {
   button: Button,
   text: Text,
   img: Img,
-  qrcode: Qrcode,
+  qrcode: QRcode,
   overlay: Overlay,
   'page-fragment-container': PageFragmentContainer,
   'page-fragment': PageFragment,
+  'iterator-container': IteratorContainer,
 };
 
 export default ui;

packages/ui/src/iterator-container/index.ts

@@ -0,0 +1,24 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import IteratorContainer from './src/IteratorContainer.vue';
+
+export { default as config } from './src/formConfig';
+export { default as value } from './src/initValue';
+
+export default IteratorContainer;

packages/ui/src/iterator-container/src/IteratorContainer.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="magic-ui-iterator-container" :id="`${config.id || ''}`" :style="style">
+    <Container v-for="(item, index) in configs" :key="index" :config="item"></Container>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
+
+import Core from '@tmagic/core';
+import type { MContainer } from '@tmagic/schema';
+
+import Container from '../../container';
+import useApp from '../../useApp';
+
+const props = withDefaults(
+  defineProps<{
+    config: MContainer & {
+      type: 'iterator-container';
+      iteratorData: any[];
+      dsField: string[];
+      itemConfig: {
+        layout: string;
+        style: Record<string, string | number>;
+      };
+    };
+    model?: any;
+  }>(),
+  {
+    model: () => ({}),
+  },
+);
+
+const app: Core | undefined = inject('app');
+
+const style = computed(() => app?.transformStyle(props.config.style || {}));
+
+const configs = computed(() => {
+  const { iteratorData = [] } = props.config;
+
+  if (app?.platform === 'editor' && !iteratorData.length) {
+    iteratorData.push({});
+  }
+
+  return iteratorData.map((itemData) => ({
+    items:
+      app?.dataSourceManager?.compliedIteratorItems(itemData, props.config.items, props.config.dsField) ??
+      props.config.items,
+    id: '',
+    style: {
+      ...props.config.itemConfig.style,
+      position: 'relative',
+      left: 0,
+      top: 0,
+    },
+  }));
+});
+
+useApp({
+  config: props.config,
+  methods: {},
+});
+</script>

packages/ui/src/iterator-container/src/formConfig.ts

@@ -0,0 +1,110 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
+
+export default [
+  {
+    name: 'iteratorData',
+    text: '数据源数据',
+    value: 'value',
+    fieldType: ['array'],
+    checkStrictly: false,
+    type: 'data-source-field-select',
+    onChange: (vm: any, v: string[] = [], { model }: any) => {
+      const [dsId, ...keys] = v;
+      model.dsField = [dsId.replace(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, ''), ...keys];
+      return v;
+    },
+  },
+  {
+    name: 'dsField',
+    type: 'hidden',
+  },
+  {
+    type: 'panel',
+    title: '子项配置',
+    name: 'itemConfig',
+    items: [
+      {
+        name: 'layout',
+        text: '容器布局',
+        type: 'select',
+        defaultValue: 'absolute',
+        options: [
+          { value: 'absolute', text: '绝对定位' },
+          { value: 'relative', text: '流式布局', disabled: true },
+        ],
+      },
+      {
+        type: 'fieldset',
+        legend: '样式',
+        name: 'style',
+        items: [
+          {
+            name: 'width',
+            text: '宽度',
+          },
+          {
+            name: 'height',
+            text: '高度',
+          },
+          {
+            text: 'overflow',
+            name: 'overflow',
+            type: 'select',
+            options: [
+              { text: 'visible', value: 'visible' },
+              { text: 'hidden', value: 'hidden' },
+              { text: 'clip', value: 'clip' },
+              { text: 'scroll', value: 'scroll' },
+              { text: 'auto', value: 'auto' },
+              { text: 'overlay', value: 'overlay' },
+            ],
+          },
+          {
+            name: 'backgroundImage',
+            text: '背景图',
+          },
+          {
+            name: 'backgroundColor',
+            text: '背景颜色',
+            type: 'colorPicker',
+          },
+          {
+            name: 'backgroundRepeat',
+            text: '背景图重复',
+            type: 'select',
+            defaultValue: 'no-repeat',
+            options: [
+              { text: 'repeat', value: 'repeat' },
+              { text: 'repeat-x', value: 'repeat-x' },
+              { text: 'repeat-y', value: 'repeat-y' },
+              { text: 'no-repeat', value: 'no-repeat' },
+              { text: 'inherit', value: 'inherit' },
+            ],
+          },
+          {
+            name: 'backgroundSize',
+            text: '背景图大小',
+            defaultValue: '100% 100%',
+          },
+        ],
+      },
+    ],
+  },
+];

packages/ui/src/iterator-container/src/initValue.ts

@@ -0,0 +1,31 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+  style: {
+    width: '375',
+    height: '100',
+  },
+  itemConfig: {
+    style: {
+      width: '100%',
+      height: '100%',
+    },
+  },
+  items: [],
+};