@tmagic/editor 1.5.1 → 1.5.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.1",
+  "version": "1.5.3",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.0",
     "sortablejs": "^1.15.2",
-    "@tmagic/design": "1.5.1",
-    "@tmagic/stage": "1.5.1",
-    "@tmagic/form": "1.5.1",
-    "@tmagic/table": "1.5.1",
-    "@tmagic/utils": "1.5.1"
+    "@tmagic/design": "1.5.3",
+    "@tmagic/form": "1.5.3",
+    "@tmagic/table": "1.5.3",
+    "@tmagic/stage": "1.5.3",
+    "@tmagic/utils": "1.5.3"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
@@ -83,7 +83,7 @@
     "monaco-editor": "^0.48.0",
     "typescript": "*",
     "vue": ">=3.5.0",
-    "@tmagic/core": "1.5.1"
+    "@tmagic/core": "1.5.3"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/components/SplitView.vue

@@ -22,7 +22,7 @@
 
 <script lang="ts" setup>
 import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watchEffect } from 'vue';
-import { OnDrag } from 'gesto';
+import type { OnDrag } from 'gesto';
 
 import Resizer from './Resizer.vue';
 

package/src/fields/DataSourceFieldSelect/Index.vue

@@ -44,7 +44,7 @@ import { Coin } from '@element-plus/icons-vue';
 
 import { DataSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessage, TMagicTooltip } from '@tmagic/design';
-import type { FieldProps, FormState } from '@tmagic/form';
+import type { ContainerChangeEventData, FieldProps, FormState } from '@tmagic/form';
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
@@ -129,9 +129,9 @@ const checkStrictly = computed(() => {
   return value ?? props.config.value === 'key';
 });
 
-const onChangeHandler = (value: string[]) => {
+const onChangeHandler = (value: string[], eventData?: ContainerChangeEventData) => {
   if (!Array.isArray(value)) {
-    emit('change', value);
+    emit('change', value, eventData);
     return;
   }
 
@@ -139,7 +139,7 @@ const onChangeHandler = (value: string[]) => {
   const dataSource = dataSources.value.find((ds) => ds.id === removeDataSourceFieldPrefix(dsId));
 
   if (!dataSource) {
-    emit('change', value);
+    emit('change', value, eventData);
     return;
   }
 
@@ -160,10 +160,10 @@ const onChangeHandler = (value: string[]) => {
     (field?.type &&
       (field.type === 'any' || dataSourceFieldType.includes('any') || dataSourceFieldType.includes(field.type)))
   ) {
-    emit('change', value);
+    emit('change', value, eventData);
   } else {
     tMagicMessage.error(`请选择类型为${dataSourceFieldType.join('或')}的字段`);
-    emit('change', [dsId]);
+    emit('change', [dsId], eventData);
   }
 };
 </script>

package/src/fields/DisplayConds.vue

@@ -63,7 +63,8 @@ const config = computed<GroupListConfig>(() => ({
     {
       type: 'table',
       name: 'cond',
-      operateColWidth: 50,
+      operateColWidth: 100,
+      enableToggleMode: false,
       items: [
         parentFields.value.length
           ? {

package/src/fields/StyleSetter/Index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="m-fields-style-setter">
+    <TMagicCollapse :model-value="collapseValue">
+      <template v-for="(item, index) in list" :key="index">
+        <TMagicCollapseItem :name="`${index}`">
+          <template #title><MIcon :icon="Grid"></MIcon>{{ item.title }}</template>
+          <component v-if="item.component" :is="item.component" :values="model[name]" @change="change"></component>
+        </TMagicCollapseItem>
+      </template>
+    </TMagicCollapse>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { shallowRef } from 'vue';
+import { Grid } from '@element-plus/icons-vue';
+
+import { TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
+import type { ContainerChangeEventData, FieldProps } from '@tmagic/form';
+import type { StyleSchema } from '@tmagic/schema';
+
+import MIcon from '@editor/components/Icon.vue';
+
+import { Background, Border, Font, Layout, Position } from './pro/';
+
+defineOptions({
+  name: 'MFieldsStyleSetter',
+});
+
+defineProps<FieldProps<StyleSchema>>();
+
+const emit = defineEmits<{
+  change: [v: any, eventData: ContainerChangeEventData];
+}>();
+
+const list = [
+  {
+    name: 'font',
+    title: '布局',
+    component: Layout,
+  },
+  {
+    title: '位置',
+    component: Position,
+  },
+  {
+    title: '背景',
+    component: Background,
+  },
+  {
+    title: '文字',
+    component: Font,
+  },
+  {
+    title: '边框与圆角',
+    component: Border,
+  },
+];
+
+const collapseValue = shallowRef(
+  Array(list.length)
+    .fill(1)
+    .map((x, i) => `${i}`),
+);
+
+const change = (v: any, eventData: ContainerChangeEventData) => {
+  emit('change', v, eventData);
+};
+</script>

package/src/fields/StyleSetter/components/BackgroundPosition.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="background-position-container">
+    <div class="presets-value-list">
+      <TMagicButton
+        v-for="(item, index) in list"
+        :key="index"
+        link
+        :class="model[name] === item.value && 'btn-active'"
+        @click="changeHandler(item.value)"
+      >
+        <div :class="['position-icon', item.class, model[name] === item.value && 'active']"></div>
+      </TMagicButton>
+    </div>
+    <div class="custom-value">
+      <TMagicInput v-model="model[name]" size="small" placeholder="自定义背景位置" clearable @change="changeHandler">
+      </TMagicInput>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { TMagicButton, TMagicInput } from '@tmagic/design';
+import type { FieldProps, FormItem } from '@tmagic/form';
+
+const emit = defineEmits(['change']);
+defineProps<FieldProps<{ type: 'style-setter' } & FormItem>>();
+
+const horizontalList = [
+  {
+    value: 'left',
+    text: '左',
+  },
+  {
+    value: 'center',
+    text: '中',
+  },
+  {
+    value: 'right',
+    text: '右',
+  },
+];
+
+const verticalList = [
+  {
+    value: 'top',
+    text: '上',
+  },
+  {
+    value: 'center',
+    text: '中',
+  },
+  {
+    value: 'bottom',
+    text: '下',
+  },
+];
+
+const list = verticalList
+  .map((vertical) =>
+    horizontalList.map((horizontal) => ({
+      value: `${horizontal.value} ${vertical.value}`,
+      tips: `${horizontal.text}${vertical.text}`,
+      class: `${horizontal.value}-${vertical.value}`,
+    })),
+  )
+  .flat();
+
+const changeHandler = (v: string) => {
+  emit('change', v);
+};
+</script>

package/src/fields/StyleSetter/components/Border.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="border-box-container">
+    <div class="border-icon-container">
+      <div class="border-icon-container-row">
+        <div
+          class="border-icon border-icon-top"
+          :class="{ active: direction === 'Top' }"
+          @click="selectDirection('Top')"
+        ></div>
+      </div>
+      <div class="border-icon-container-row">
+        <div
+          class="border-icon border-icon-left"
+          :class="{ active: direction === 'Left' }"
+          @click="selectDirection('Left')"
+        ></div>
+        <div class="border-icon" :class="{ active: direction === '' }" @click="selectDirection()"></div>
+        <div
+          class="border-icon border-icon-right"
+          :class="{ active: direction === 'Right' }"
+          @click="selectDirection('Right')"
+        ></div>
+      </div>
+      <div class="border-icon-container-row">
+        <div
+          class="border-icon border-icon-bottom"
+          :class="{ active: direction === 'Bottom' }"
+          @click="selectDirection('Bottom')"
+        ></div>
+      </div>
+    </div>
+    <div class="border-value-container">
+      <MContainer :config="config" :model="model" @change="change"></MContainer>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import type { ContainerChangeEventData, FormValue } from '@tmagic/form';
+import { MContainer } from '@tmagic/form';
+import type { StyleSchema } from '@tmagic/schema';
+
+const direction = ref('');
+
+const config = computed(() => ({
+  items: [
+    {
+      name: `border${direction.value}Width`,
+      text: '边框宽度',
+      labelWidth: '68px',
+      type: 'data-source-field-select',
+      fieldConfig: {
+        type: 'text',
+      },
+    },
+    {
+      name: `border${direction.value}Color`,
+      text: '边框颜色',
+      labelWidth: '68px',
+      type: 'data-source-field-select',
+      fieldConfig: {
+        type: 'colorPicker',
+      },
+    },
+    {
+      name: `border${direction.value}Style`,
+      text: '边框样式',
+
+      labelWidth: '68px',
+      type: 'data-source-field-select',
+      fieldConfig: {
+        type: 'select',
+        options: ['solid', 'dashed', 'dotted'].map((item) => ({
+          value: item,
+          text: item,
+        })),
+      },
+    },
+  ],
+}));
+
+const selectDirection = (d?: string) => (direction.value = d || '');
+
+const emit = defineEmits<{
+  change: [v: StyleSchema, eventData: ContainerChangeEventData];
+}>();
+
+withDefaults(
+  defineProps<{
+    model: FormValue;
+  }>(),
+  {},
+);
+
+const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
+  eventData.changeRecords?.forEach((record) => {
+    emit('change', record.value, {
+      modifyKey: record.propPath,
+    });
+  });
+};
+</script>

package/src/fields/StyleSetter/components/Box.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="layout-box-container">
+    <div v-for="(item, index) in list" :key="index" :class="item.class">
+      <span class="help-txt" v-if="item.text">{{ item.text }}</span>
+      <span class="next-input">
+        <input
+          v-model="model[item.name]"
+          :title="model[item.name]"
+          @change="change($event, item.name)"
+          placeholder="0"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { ContainerChangeEventData, FormValue } from '@tmagic/form';
+
+const list = [
+  {
+    name: 'marginTop',
+    class: 'outer-top-border',
+  },
+  {
+    name: 'marginRight',
+    class: 'outer-right-border',
+  },
+  {
+    name: 'marginBottom',
+    text: 'MARGIN',
+    class: 'outer-bottom-border',
+  },
+  {
+    name: 'marginLeft',
+    class: 'outer-left-border',
+  },
+  {
+    name: 'paddingTop',
+    class: 'inner-top-border',
+  },
+  {
+    name: 'paddingRight',
+    class: 'inner-right-border',
+  },
+  {
+    name: 'paddingBottom',
+    text: 'PADDING',
+    class: 'inner-bottom-border',
+  },
+  {
+    name: 'paddingLeft',
+    class: 'inner-left-border',
+  },
+];
+
+const emit = defineEmits<{
+  change: [v: string, eventData: ContainerChangeEventData];
+}>();
+
+withDefaults(
+  defineProps<{
+    model: FormValue;
+  }>(),
+  {},
+);
+
+const change = (event: Event, name: string) => {
+  emit('change', (event.target as HTMLInputElement).value, {
+    modifyKey: name,
+  });
+};
+</script>

package/src/fields/StyleSetter/components/Position.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="layout-box-container">
+    <div v-for="(item, index) in list" :key="index" :class="item.class">
+      <span class="next-input">
+        <input
+          v-model="model[item.name]"
+          :title="model[item.name]"
+          @change="change($event, item.name)"
+          placeholder="0"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { ContainerChangeEventData, FormValue } from '@tmagic/form';
+
+const list = [
+  {
+    name: 'top',
+    class: 'outer-top-border',
+  },
+  {
+    name: 'right',
+    class: 'outer-right-border',
+  },
+  {
+    name: 'bottom',
+    class: 'outer-bottom-border',
+  },
+  {
+    name: 'left',
+    class: 'outer-left-border',
+  },
+];
+
+const emit = defineEmits<{
+  change: [v: string, eventData: ContainerChangeEventData];
+}>();
+
+withDefaults(
+  defineProps<{
+    model: FormValue;
+  }>(),
+  {},
+);
+
+const change = (event: Event, name: string) => {
+  emit('change', (event.target as HTMLInputElement).value, {
+    modifyKey: name,
+  });
+};
+</script>

package/src/fields/StyleSetter/icons/background-position/LeftBottom.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path
+      d="M960 128a64 64 0 0 1 64 64v640a64 64 0 0 1-64 64H64a64 64 0 0 1-64-64V192a64 64 0 0 1 64-64h896z m0 64H64v640h896V192z m-96 64a32 32 0 0 1 32 32v448a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V288a32 32 0 0 1 32-32h704z"
+    ></path>
+  </svg>
+</template>

package/src/fields/StyleSetter/icons/background-position/LeftCenter.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path
+      d="M960 128a64 64 0 0 1 64 64v640a64 64 0 0 1-64 64H64a64 64 0 0 1-64-64V192a64 64 0 0 1 64-64h896z m0 64H64v640h896V192z m-96 64a32 32 0 0 1 32 32v448a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V288a32 32 0 0 1 32-32h704z"
+    ></path>
+  </svg>
+</template>

package/src/fields/StyleSetter/icons/background-position/LeftTop.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path
+      d="M1024 0v1024H0V0h1024z m-73.142857 73.142857H73.142857v877.714286h877.714286V73.142857z"
+      fill="#1D1F24"
+    ></path>
+    <path
+      d="M512 219.428571v292.571429H219.428571V219.428571h292.571429zM438.857143 292.571429H292.571429v146.285714h146.285714V292.571429z"
+      fill="#1D1F24"
+    ></path>
+  </svg>
+</template>

package/src/fields/StyleSetter/icons/background-position/index.ts

@@ -0,0 +1,3 @@
+export { default as BackgroundPositionLeftTop } from './LeftTop.vue';
+export { default as DisplayFlex } from './Flex.vue';
+export { default as DisplayInline } from './Inline.vue';

package/src/fields/StyleSetter/icons/background-repeat/NoRepeat.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path
+      d="M912.526651 867.741144 555.540144 510.712681l356.986507-357.000833c11.171434-11.18576 11.171434-29.257348 0-40.443108-11.20111-11.18576-29.272697-11.18576-40.444131 0L515.096013 470.267527 158.096203 113.267716c-11.187807-11.159154-29.258371-11.159154-40.444131 0-11.186783 11.186783-11.186783 29.286 0 40.47176L474.623229 510.712681 117.623419 867.741144c-11.159154 11.172457-11.159154 29.216415 0 40.443108 11.18576 11.17348 29.284977 11.17348 40.47176 0l357.000833-357.027439 356.985484 357.027439c11.171434 11.17348 29.243021 11.17348 40.444131 0C923.698085 896.957559 923.725714 878.913601 912.526651 867.741144z"
+      fill="#5D5D5D"
+    ></path>
+  </svg>
+</template>

package/src/fields/StyleSetter/icons/background-repeat/Repeat.vue

@@ -0,0 +1,31 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path
+      d="M884.736 102.4l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456C696.32 311.296 712.704 327.68 733.184 327.68l147.456 0c20.48 0 36.864-16.384 36.864-36.864L917.504 139.264C921.6 118.784 905.216 102.4 884.736 102.4zM884.736 290.816l-147.456 0L737.28 139.264l147.456 0L884.736 290.816z"
+    ></path>
+    <path
+      d="M884.736 696.32l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C921.6 712.704 905.216 696.32 884.736 696.32zM884.736 884.736l-147.456 0 0-147.456 147.456 0L884.736 884.736z"
+    ></path>
+    <path
+      d="M884.736 401.408l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C921.6 417.792 905.216 401.408 884.736 401.408zM884.736 585.728l-147.456 0 0-147.456 147.456 0L884.736 585.728z"
+    ></path>
+    <path
+      d="M585.728 401.408l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C622.592 417.792 606.208 401.408 585.728 401.408zM585.728 585.728l-147.456 0 0-147.456 147.456 0L585.728 585.728z"
+    ></path>
+    <path
+      d="M585.728 102.4l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864L622.592 139.264C622.592 118.784 606.208 102.4 585.728 102.4zM585.728 290.816l-147.456 0L438.272 139.264l147.456 0L585.728 290.816z"
+    ></path>
+    <path
+      d="M585.728 696.32l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C622.592 712.704 606.208 696.32 585.728 696.32zM585.728 884.736l-147.456 0 0-147.456 147.456 0L585.728 884.736z"
+    ></path>
+    <path
+      d="M290.816 696.32 139.264 696.32c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C327.68 712.704 311.296 696.32 290.816 696.32zM290.816 884.736 139.264 884.736l0-147.456 147.456 0L286.72 884.736z"
+    ></path>
+    <path
+      d="M290.816 401.408 139.264 401.408c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C327.68 417.792 311.296 401.408 290.816 401.408zM290.816 585.728 139.264 585.728l0-147.456 147.456 0L286.72 585.728z"
+    ></path>
+    <path
+      d="M290.816 102.4 139.264 102.4c-20.48 0-36.864 16.384-36.864 36.864l0 147.456C102.4 311.296 118.784 327.68 139.264 327.68l147.456 0C311.296 327.68 327.68 311.296 327.68 290.816L327.68 139.264C327.68 118.784 311.296 102.4 290.816 102.4zM290.816 290.816 139.264 290.816 139.264 139.264l147.456 0L286.72 290.816z"
+    ></path>
+  </svg>
+</template>

package/src/fields/StyleSetter/icons/background-repeat/RepeatX.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path
+      d="M796.444444 170.666667h-227.555555v682.666666h227.555555V170.666667z m-56.888888 625.777777h-113.777778V227.555556h113.777778v568.888888zM455.111111 170.666667H227.555556v682.666666h227.555555V170.666667zM398.222222 796.444444H284.444444V227.555556h113.777778v568.888888zM910.222222 56.888889h56.888889v910.222222h-56.888889zM56.888889 56.888889h56.888889v910.222222H56.888889z"
+      fill="#333333"
+    ></path>
+  </svg>
+</template>

package/src/fields/StyleSetter/icons/background-repeat/RepeatY.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path
+      d="M170.666667 227.555556v227.555555h682.666666V227.555556H170.666667z m625.777777 56.888888v113.777778H227.555556V284.444444h568.888888zM170.666667 568.888889v227.555555h682.666666v-227.555555H170.666667z m625.777777 56.888889v113.777778H227.555556v-113.777778h568.888888zM56.888889 56.888889h910.222222v56.888889H56.888889zM56.888889 910.222222h910.222222v56.888889H56.888889z"
+      fill="#333333"
+    ></path>
+  </svg>
+</template>

package/src/fields/StyleSetter/icons/background-repeat/index.ts

@@ -0,0 +1,4 @@
+export { default as BackgroundRepeat } from './Repeat.vue';
+export { default as BackgroundRepeatX } from './RepeatX.vue';
+export { default as BackgroundRepeatY } from './RepeatY.vue';
+export { default as BackgroundNoRepeat } from './NoRepeat.vue';

package/src/fields/StyleSetter/icons/display/Block.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path
+      d="M960 128a64 64 0 0 1 64 64v640a64 64 0 0 1-64 64H64a64 64 0 0 1-64-64V192a64 64 0 0 1 64-64h896z m0 64H64v640h896V192z m-96 64a32 32 0 0 1 32 32v448a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V288a32 32 0 0 1 32-32h704z"
+    ></path>
+  </svg>
+</template>

package/src/fields/StyleSetter/icons/display/Flex.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path
+      d="M960 128a64 64 0 0 1 64 64v640a64 64 0 0 1-64 64H64a64 64 0 0 1-64-64V192a64 64 0 0 1 64-64h896z m0 64H64v640h896V192zM352 256v512H160V256h192z m256 0v512h-192V256h192z m256 0v512h-192V256h192z"
+    ></path>
+  </svg>
+</template>

package/src/fields/StyleSetter/icons/display/Inline.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path
+      d="M787.616 651.36a142.72 142.72 0 0 0 52.864 31.904 205.504 205.504 0 0 0 67.264 10.848 245.76 245.76 0 0 0 38.784-2.4c9.504-1.6 19.36-4 30.208-7.04 8.16-2.24 15.968-5.12 23.36-8.32l23.392-10.816V587.52h-8.736c-3.968 3.424-8.96 7.648-15.104 12.544a190.272 190.272 0 0 1-19.936 13.504 120.32 120.32 0 0 1-27.616 12.544 102.528 102.528 0 0 1-62.72-0.576 80 80 0 0 1-29.824-17.088 89.28 89.28 0 0 1-21.664-32.512c-5.696-13.664-8.64-30.784-8.64-51.296 0-19.744 2.72-36.384 7.968-50.08 5.248-13.664 12.384-24.896 20.992-33.056 9.12-8.832 18.816-14.816 29.632-18.816a101.824 101.824 0 0 1 63.68-0.736c9.408 3.136 18.08 7.04 26.112 11.68 13.024 7.808 25.28 16.768 36.672 26.784H1024v-78.72c-6.08-2.88-13.12-6.08-21.12-9.6a205.984 205.984 0 0 0-57.152-15.36 270.016 270.016 0 0 0-37.056-2.304c-24.864 0-47.744 4-68.704 11.84-20.992 7.776-38.432 18.784-52.64 33.6a144.256 144.256 0 0 0-33.632 54.176 207.68 207.68 0 0 0-12.48 70.176c0 27.84 3.968 52.352 12.16 73.568a146.08 146.08 0 0 0 34.176 53.184l0.064 0.416z m-186.112 34.656a122.912 122.912 0 0 0 42.784-21.504c11.2-8.32 20.224-19.296 26.24-31.936 6.56-13.664 9.888-28.704 9.664-43.904 0-22.784-6.272-41.024-18.912-54.72-12.544-13.92-29.664-23.04-51.104-27.36v-2.304c14.4-6.24 26.688-16.448 35.52-29.408 8.384-12.544 12.544-27.008 12.544-43.52 0-14.24-2.944-26.784-9.12-37.6a65.696 65.696 0 0 0-27.936-26.24 117.44 117.44 0 0 0-36.48-12.096A437.312 437.312 0 0 0 526.656 352h-127.552v340.384h143.392c23.84 0 43.52-2.112 59.008-6.4z m-118.112-271.584h7.968c16.544 0 29.472 0.128 38.656 0.352 9.248 0.576 16.864 1.728 23.04 4a26.24 26.24 0 0 1 14.4 13.12c2.656 5.28 4.064 11.072 4.128 16.96 0.16 6.656-1.056 13.248-3.52 19.392a28.064 28.064 0 0 1-15.04 13.696c-7.04 2.912-14.56 4.48-22.208 4.576-9.472 0.32-20.864 0.544-34.24 0.544h-13.184v-72.64z m6.144 215.52h-6.144v-84.8h18.464c12.64 0 24.736 0 36.384 0.256 9.216-0.16 18.432 0.896 27.36 3.2 9.696 2.848 16.544 7.232 20.512 13.12 4 5.92 6.08 14.24 6.08 25.088 0 8.192-1.728 15.488-4.992 21.824-3.232 6.336-9.696 11.392-18.24 15.392-8.544 4-18.24 5.696-28.48 6.272-10.304 0.224-27.392 0.224-51.328 0.224l0.384-0.576z m-378.56-6.016h124.672l23.36 68.416H348.8L224.32 353.728H124.416L0 692.384h87.52l23.488-68.416-0.064-0.032z m62.336-183.552l41.472 121.44h-82.88l41.408-121.44z"
+    ></path>
+  </svg>
+</template>

package/src/fields/StyleSetter/icons/display/InlineBlock.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path
+      d="M960 128a64 64 0 0 1 64 64v640a64 64 0 0 1-64 64H64a64 64 0 0 1-64-64V192a64 64 0 0 1 64-64h896z m0 64H64v640h896V192z m-131.936 158.496c65.984 1.824 109.024 32.512 129.184 92.064l-65.952 15.136-1.856-5.664c-9.984-27.52-30.432-42.112-61.376-43.84-46.72 2.784-71.456 35.296-74.208 97.6 1.856 63.2 26.56 96.64 74.24 100.32 37.536-0.928 59.52-23.36 65.92-67.328L960 559.36l-1.792 7.232c-16.96 63.872-60.352 95.84-130.144 95.84-93.44-4.608-142.464-56.8-147.04-156.672 4.576-98.048 53.6-149.792 147.04-155.296z m-568.928 4.128l114.08 302.336H297.6l-22.016-65.984H160.192L138.24 656.96H64l112.672-302.336h82.464z m278.976 0l7.68 0.32c62.816 3.36 96 27.104 99.52 71.136 0 35.744-19.712 59.552-59.104 71.456 42.144 9.184 65.952 32.544 71.456 70.08 0 59.552-37.568 89.344-112.672 89.344h-148.416v-302.336h141.536z m-4.128 173.152H465.28v81.088h67.328c33.92 0 51.296-13.76 52.224-41.248-2.752-25.632-19.68-38.912-50.848-39.84zM217.92 408.224h-1.376l-0.96 7.36c-1.184 7.232-3.168 13.92-5.92 20.128l-34.336 103.04h87.936l-38.464-104.416-2.624-9.024c-1.6-5.888-3.04-11.584-4.256-17.088z m309.184-2.752H465.28v71.456h61.824c29.344-0.928 44.448-13.76 45.376-38.464-0.96-22.016-16.032-32.992-45.376-32.992z"
+    ></path>
+  </svg>
+</template>

package/src/fields/StyleSetter/icons/display/None.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path
+      d="M931.37 477.14c-43.94-69.49-93.39-125.03-147.99-166.35L663.31 441.46c8.79 21.36 13.63 44.91 13.63 69.62 0 96.27-73.84 174.32-164.95 174.32-21.63 0-42.28-4.39-61.32-12.47l-94.09 102.52a455.097 455.097 0 0 0 155.41 26.2c172.62 0 312.43-85.54 419.59-256.63 12.83-20.43 12.72-47.45-0.21-67.88zM795.52 127.99L682.24 252.82C627.73 231 570.1 220.04 512.11 220.5c-171.15 0-310.99 85.66-419.48 256.75-12.93 20.43-13.04 47.33-0.2 67.78 46.95 75.15 100.3 133.68 160.01 175.82L131.9 853.65l38.9 42.36 663.6-725.76-38.88-42.26zM519.68 438.37c-3.72-0.59-7.46-0.81-11.27-0.81-45.63 0-82.43 39.03-82.43 87.16 0 4.97 0.42 9.81 1.14 14.54l-57.15 60.14-5.92 8.33c-13.15-24.94-20.5-53.68-20.5-84.28 0-96.3 73.84-174.45 164.95-174.45 27.2 0 52.76 6.93 75.4 19.29l-64.22 70.08z m52.05 135.53c21.74-23.26 27.17-55.48 16.31-81.39l-96.42 103.16c26.59 9.08 58.38 1.48 80.11-21.77z"
+    ></path>
+  </svg>
+</template>

package/src/fields/StyleSetter/icons/display/index.ts

@@ -0,0 +1,5 @@
+export { default as DisplayBlock } from './Block.vue';
+export { default as DisplayFlex } from './Flex.vue';
+export { default as DisplayInline } from './Inline.vue';
+export { default as DisplayInlineBlock } from './InlineBlock.vue';
+export { default as DisplayNone } from './None.vue';

package/src/fields/StyleSetter/icons/flex-direction/Column.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path
+      d="M896 320H128V0h768v320z m0 320H128v-256h768v256z m-128 192l-256 192-256-192 192-0.032V704h128v128h192z"
+    ></path>
+  </svg>
+</template>

package/src/fields/StyleSetter/icons/flex-direction/ColumnReverse.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path
+      d="M896 704H128v320h768V704z m0-320H128v256h768v-256z m-128-192l-256-192-256 192 192 0.032V320h128V192h192z"
+    ></path>
+  </svg>
+</template>

package/src/fields/StyleSetter/icons/flex-direction/Row.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path
+      d="M320 128v768H0V128h320z m320 0v768h-256V128h256z m192 128l192 256-192 256-0.032-192H704v-128h128V256z"
+    ></path>
+  </svg>
+</template>