y-admin-pro 0.0.1

package/packages/ele-pro-form-builder/components/component-list.vue

@@ -0,0 +1,168 @@
+<!-- 组件库列表 -->
+<template>
+  <div class="ele-pro-form-builder-component-wrapper">
+    <div
+      v-for="(groupItem, index) in groupData"
+      :key="index + '_' + groupItem.name"
+      class="ele-pro-form-builder-component-group"
+    >
+      <div
+        class="ele-pro-form-builder-component-group-label"
+        @click="handleLabelClick"
+      >
+        {{ groupItem.name }}
+      </div>
+      <VueDraggable
+        itemKey="key"
+        :sort="false"
+        :delay="150"
+        :delayOnTouchOnly="true"
+        :fallbackOnBody="true"
+        :group="sortableGroup"
+        :disabled="!draggable"
+        :setData="() => void 0"
+        :clone="handleCloneItem"
+        :modelValue="groupItem.items"
+        class="ele-pro-form-builder-component-list"
+      >
+        <template #item="{ element }">
+          <div
+            :class="[
+              'ele-pro-form-builder-component-item',
+              { 'is-selected': element.type === selectedType }
+            ]"
+            @click="handleItemClick(element)"
+          >
+            <div class="ele-pro-form-builder-component-item-body">
+              <div class="ele-pro-form-builder-component-item-cover">
+                <component v-if="element.cover" :is="element.cover" />
+              </div>
+            </div>
+            <div class="ele-pro-form-builder-component-item-label">
+              {{ element.name }}
+            </div>
+          </div>
+        </template>
+      </VueDraggable>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import VueDraggable from 'vuedraggable';
+  import { findTree } from '../../utils/common';
+  import { sortableGroupName } from '../../ele-pro-form/util';
+  import type {
+    ProFormItemKey,
+    ProFormItemProps,
+    ProFormItemTypeData
+  } from '../../ele-pro-form/types';
+  import type {
+    ComponentItem,
+    ComponentGroup,
+    UpdateItemsResult
+  } from '../types';
+  import { generateBuildFormItem, fixedChildTypes } from './build-core';
+  /** 拖拽排序配置 */
+  const sortableGroup = { name: sortableGroupName, pull: 'clone', put: false };
+
+  defineOptions({ name: 'ComponentList' });
+
+  const props = defineProps<{
+    /** 全部表单项 */
+    formItems?: ProFormItemProps[];
+    /** 要添加子级的父级表单项 id */
+    parentFormItemId?: ProFormItemKey;
+    /** 是否可拖拽 */
+    draggable?: boolean;
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+    /** 选中的组件类型 */
+    selectedType?: string;
+    /** 选中的表单项 id */
+    selectedFormItemId?: ProFormItemKey;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'updateItems', result: UpdateItemsResult): void;
+    (e: 'itemClick', componentType: string): void;
+  }>();
+
+  /** 组件库列表数据 */
+  const groupData = computed<ComponentGroup[]>(() => {
+    return (props.componentData || []).map((groupItem) => {
+      return {
+        ...groupItem,
+        items: groupItem.items
+          .filter((item) => !item.hide)
+          .map((d) => ({
+            ...d,
+            key: `proFormBuilderComponent_${d.type}`
+          }))
+      };
+    });
+  });
+
+  /** 拖拽时生成表单项数据 */
+  const handleCloneItem = (original: ComponentItem) => {
+    const item = generateBuildFormItem(
+      original.type,
+      props.formItems,
+      props.componentData,
+      props.itemTypeData
+    );
+    return item ?? original;
+  };
+
+  /** 点击添加表单项事件 */
+  const handleItemClick = (componentItem: ComponentItem) => {
+    const item = generateBuildFormItem(
+      componentItem.type,
+      props.formItems,
+      props.componentData,
+      props.itemTypeData
+    );
+    // 添加子级
+    if (props.selectedFormItemId == null) {
+      const result: UpdateItemsResult = {
+        addItems: [{ item, parentItemId: props.parentFormItemId }],
+        updateItems: [],
+        deleteItemIds: []
+      };
+      emit('updateItems', result);
+      return;
+    }
+    // 修改组件类型
+    const updateItems = [
+      { itemId: props.selectedFormItemId, field: 'type', value: item?.type },
+      { itemId: props.selectedFormItemId, field: 'props', value: item?.props },
+      { itemId: props.selectedFormItemId, field: 'slots', value: item?.slots }
+    ];
+    const oldItem = findTree(
+      props.formItems,
+      (d) => d.key === props.selectedFormItemId
+    );
+    if (
+      oldItem &&
+      (fixedChildTypes.some((d) => d.type === oldItem.type) ||
+        fixedChildTypes.some((d) => d.type === item?.type)) &&
+      oldItem.type !== item?.type
+    ) {
+      updateItems.push({
+        itemId: props.selectedFormItemId,
+        field: 'children',
+        value: item?.children
+      });
+    }
+    emit('updateItems', { addItems: [], updateItems, deleteItemIds: [] });
+  };
+
+  /** 点击分组标题事件 */
+  const handleLabelClick = (e: MouseEvent) => {
+    const el = (e.currentTarget as any)?.parentElement;
+    el && el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  };
+</script>

package/packages/ele-pro-form-builder/components/component-name.vue

@@ -0,0 +1,24 @@
+<template>
+  <span>{{ typeName }}</span>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import type { ComponentGroup } from '../types';
+  import { getComponentItemByType } from './build-core';
+
+  defineOptions({ name: 'ComponentName' });
+
+  const props = defineProps<{
+    /** 表单项组件类型 */
+    itemType?: string;
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+  }>();
+
+  /** 组件类型名称 */
+  const typeName = computed<string | undefined>(() => {
+    const type = props.itemType;
+    return getComponentItemByType(type, props.componentData)?.name ?? type;
+  });
+</script>

package/packages/ele-pro-form-builder/components/component-picker.vue

@@ -0,0 +1,77 @@
+<!-- 添加子级的组件选择弹窗 -->
+<template>
+  <EleModal
+    :width="808"
+    :maxable="true"
+    position="center"
+    title="组件库"
+    :modelValue="modelValue"
+    :closeOnClickModal="false"
+    :destroyOnClose="true"
+    :bodyStyle="{
+      height: '568px',
+      minHeight: '100%',
+      maxHeight: '100%',
+      overflow: 'auto',
+      padding: 0
+    }"
+    modalBodyClass="ele-pro-form-builder-component-picker"
+    :style="{ overflow: 'hidden' }"
+    @update:modelValue="handleUpdateModelValue"
+  >
+    <ComponentList
+      :parentFormItemId="addParentFormItemId"
+      :formItems="formItems"
+      :componentData="componentData"
+      :itemTypeData="itemTypeData"
+      :selectedType="editFormItemType"
+      :selectedFormItemId="editFormItemId"
+      @updateItems="handleUpdateItems"
+    />
+  </EleModal>
+</template>
+
+<script lang="ts" setup>
+  import type {
+    ProFormItemKey,
+    ProFormItemProps,
+    ProFormItemTypeData
+  } from '../../ele-pro-form/types';
+  import EleModal from '../../ele-modal/index.vue';
+  import type { ComponentGroup, UpdateItemsResult } from '../types';
+  import ComponentList from './component-list.vue';
+
+  defineOptions({ name: 'ComponentPicker' });
+
+  defineProps<{
+    /** 弹窗是否打开 */
+    modelValue?: boolean;
+    /** 要添加子级的父级表单项 key */
+    addParentFormItemId?: ProFormItemKey;
+    /** 要修改组件类型的表单项 key */
+    editFormItemId?: ProFormItemKey;
+    /** 要修改组件类型的表单项组件类型 */
+    editFormItemType?: string;
+    /** 全部表单项 */
+    formItems?: ProFormItemProps[];
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', visible?: boolean): void;
+    (e: 'updateItems', result: UpdateItemsResult): void;
+  }>();
+
+  /** 更新弹窗打开状态 */
+  const handleUpdateModelValue = (visible?: boolean) => {
+    emit('update:modelValue', visible);
+  };
+
+  /** 更新表单项数据 */
+  const handleUpdateItems = (result: UpdateItemsResult) => {
+    emit('updateItems', result);
+  };
+</script>

package/packages/ele-pro-form-builder/components/config-form.vue

@@ -0,0 +1,109 @@
+<!-- 表单设置表单 -->
+<template>
+  <component
+    :is="proFormComponent || EleProForm"
+    size="small"
+    labelPosition="top"
+    :model="configFormData"
+    :items="configFormItems || []"
+    :itemTypeData="itemTypeData"
+    :httpRequest="httpRequest"
+    class="ele-pro-form-builder-props-form"
+    @updateValue="handleUpdateFormProp"
+  >
+    <template
+      v-if="!$slots.proFormBuilderSourceEdit"
+      #proFormBuilderSourceEdit="{ item, model, updatePropValue }"
+    >
+      <SourceEdit
+        :jsonEditerComponent="jsonEditerComponent"
+        v-bind="item.props || {}"
+        :modelValue="model"
+        @update:modelValue="(val) => updatePropValue('', val)"
+      />
+    </template>
+    <template
+      v-if="!$slots.proFormBuilderStyleEdit"
+      #proFormBuilderStyleEdit="{ item, modelValue, updateValue }"
+    >
+      <StyleEdit
+        v-bind="item.props || {}"
+        :modelValue="modelValue"
+        @update:modelValue="updateValue"
+      />
+    </template>
+    <template v-for="name in Object.keys($slots)" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps || {}"></slot>
+    </template>
+  </component>
+</template>
+
+<script lang="ts" setup>
+  import { reactive, watch } from 'vue';
+  import type { UserComponent } from '../../ele-app/types';
+  import type { EleProFormProps } from '../../ele-app/plus';
+  import type {
+    ProFormItemProps,
+    ProFormItemTypeData
+  } from '../../ele-pro-form/types';
+  import EleProForm from '../../ele-pro-form/index.vue';
+  import { deepCloneObject } from './build-core';
+  import SourceEdit from './source-edit.vue';
+  import StyleEdit from './style-edit.vue';
+
+  defineOptions({ name: 'ConfigForm' });
+
+  const props = defineProps<{
+    /** 表单属性 */
+    formProps?: EleProFormProps;
+    /** 表单属性设置的表单项配置 */
+    configFormItems?: ProFormItemProps[];
+    /** 表单属性设置的组件预设属性值 */
+    configFormPresetProps?: Record<string, any>;
+    /** 高级表单组件 */
+    proFormComponent?: UserComponent;
+    /** JSON 编辑器组件 */
+    jsonEditerComponent?: UserComponent;
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'updateFormProp', field: string, value: any): void;
+  }>();
+
+  /** 表单属性数据 */
+  const configFormData = reactive<Record<string, any>>({});
+
+  /** 更新表单属性 */
+  const handleUpdateFormProp = (field: string, value: any) => {
+    emit('updateFormProp', field, value);
+  };
+
+  /** 同步表单属性数据 */
+  watch(
+    () => props.formProps,
+    (formProps) => {
+      const data = Object.assign(
+        {},
+        configFormData,
+        props.configFormPresetProps || {},
+        deepCloneObject(formProps),
+        { items: void 0 }
+      );
+      Object.assign(configFormData, data, {
+        items: void 0,
+        footerProps: Object.assign(
+          { labelWidth: data.footerProps?.labelWidth ?? data.labelWidth },
+          data.footerProps
+        )
+      });
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
+</script>

package/packages/ele-pro-form-builder/components/covers/cover-alert.vue

@@ -0,0 +1,49 @@
+<template>
+  <div :style="{ maxWidth: '92%', margin: '0 auto' }">
+    <div
+      class="ele-icon-border-color-base"
+      :style="{
+        display: 'flex',
+        alignItems: 'center',
+        borderStyle: 'solid',
+        borderWidth: '1px',
+        borderRadius: '4px',
+        padding: '4px 6px'
+      }"
+    >
+      <SvgIcon name="ExclamationCircleFilled" size="sm" />
+      <IconSkeleton size="sm" :style="{ flex: 1, margin: '0 2px 0 4px' }" />
+      <SvgIcon
+        name="CloseOutlined"
+        size="sm"
+        color="placeholder"
+        :style="{ transform: 'scale(0.8)' }"
+      />
+    </div>
+    <div
+      class="ele-icon-border-color-base"
+      :style="{
+        display: 'flex',
+        alignItems: 'center',
+        borderStyle: 'solid',
+        borderWidth: '1px',
+        borderRadius: '4px',
+        padding: '4px 6px',
+        marginTop: '8px'
+      }"
+    >
+      <SvgIcon name="CheckCircleFilled" size="sm" color="success" />
+      <IconSkeleton size="sm" :style="{ flex: 1, margin: '0 2px 0 4px' }" />
+      <SvgIcon
+        name="CloseOutlined"
+        size="sm"
+        color="placeholder"
+        :style="{ transform: 'scale(0.8)' }"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { IconSkeleton, SvgIcon } from '../icons/index';
+</script>

package/packages/ele-pro-form-builder/components/covers/cover-autocomplete.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <IconInput size="sm">
+      <IconSkeleton size="sm" :style="{ width: '50%' }" />
+      <IconCursor />
+    </IconInput>
+    <IconPanel size="sm">
+      <IconSkeleton size="sm" />
+      <IconSkeleton size="sm" :style="{ marginTop: '4px' }" />
+      <IconSkeleton size="sm" :style="{ marginTop: '4px' }" />
+    </IconPanel>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {
+    IconInput,
+    IconSkeleton,
+    IconCursor,
+    IconPanel
+  } from '../icons/index';
+</script>

package/packages/ele-pro-form-builder/components/covers/cover-button.vue

@@ -0,0 +1,15 @@
+<template>
+  <IconButton
+    size="sm"
+    type="primary"
+    :style="{
+      margin: '0 auto',
+      width: '58px',
+      padding: '0 12px'
+    }"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { IconButton } from '../icons/index';
+</script>

package/packages/ele-pro-form-builder/components/covers/cover-card.vue

@@ -0,0 +1,29 @@
+<template>
+  <div
+    class="ele-icon-border-color-base"
+    :style="{
+      borderStyle: 'solid',
+      borderWidth: '1px',
+      borderRadius: '4px'
+    }"
+  >
+    <div
+      class="ele-icon-border-color-base"
+      :style="{
+        padding: '8px 10px',
+        borderBottomStyle: 'solid',
+        borderBottomWidth: '1px'
+      }"
+    >
+      <IconSkeleton :style="{ width: '38px' }" size="sm" />
+    </div>
+    <div :style="{ padding: '8px 10px 12px 10px' }">
+      <IconSkeleton size="sm" />
+      <IconSkeleton size="sm" :style="{ marginTop: '10px', width: '50%' }" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { IconSkeleton } from '../icons/index';
+</script>

package/packages/ele-pro-form-builder/components/covers/cover-carousel.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div :style="{ display: 'flex', alignItems: 'center' }">
+      <SvgIcon
+        name="ArrowLeft"
+        color="placeholder"
+        class="ele-icon-border-color-base"
+        :style="{
+          width: '10px',
+          height: '10px',
+          borderStyle: 'solid',
+          borderWidth: '1px',
+          borderRadius: '50%',
+          fontSize: '12px'
+        }"
+        :iconStyle="{ transform: 'scale(0.8)' }"
+      />
+      <div
+        class="ele-icon-border-color-base"
+        :style="{
+          flex: 1,
+          height: '40px',
+          borderStyle: 'solid',
+          borderWidth: '1px',
+          borderRadius: '3px',
+          margin: '0 3px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }"
+      >
+        <IconImage size="sm" />
+      </div>
+      <SvgIcon
+        name="ArrowRight"
+        color="placeholder"
+        class="ele-icon-border-color-base"
+        :style="{
+          width: '10px',
+          height: '10px',
+          borderStyle: 'solid',
+          borderWidth: '1px',
+          borderRadius: '50%',
+          fontSize: '12px'
+        }"
+        :iconStyle="{ transform: 'scale(0.8)' }"
+      />
+    </div>
+    <div
+      :style="{ display: 'flex', justifyContent: 'center', marginTop: '4px' }"
+    >
+      <IconSkeleton
+        v-for="index in 3"
+        :key="index"
+        :color="index === 1 ? 'primary' : void 0"
+        :style="{ width: '8px', height: '2px', margin: '0 3px' }"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { SvgIcon, IconSkeleton, IconImage } from '../icons/index';
+</script>

package/packages/ele-pro-form-builder/components/covers/cover-cascader.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <IconInput size="sm">
+      <IconSkeleton size="sm" :style="{ width: '50%' }" />
+      <SvgIcon name="ArrowUp" size="sm" :style="{ margin: '0 0 0 auto' }" />
+    </IconInput>
+    <IconPanel size="sm">
+      <div :style="{ display: 'flex', alignItems: 'center' }">
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+        <IconArrow
+          size="sm"
+          color="primary"
+          :style="{ margin: '0 1px 0 4px' }"
+        />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+        <IconArrow
+          size="sm"
+          color="primary"
+          :style="{ margin: '0 1px 0 4px' }"
+        />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+      <div :style="{ display: 'flex', alignItems: 'center', marginTop: '4px' }">
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+        <IconArrow size="sm" :style="{ margin: '0 1px 0 4px' }" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+        <IconArrow size="sm" :style="{ margin: '0 1px 0 4px' }" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+      <div :style="{ display: 'flex', alignItems: 'center', marginTop: '4px' }">
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+        <IconArrow size="sm" :style="{ margin: '0 1px 0 4px' }" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+        <IconArrow size="sm" :style="{ margin: '0 1px 0 4px' }" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+    </IconPanel>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {
+    IconInput,
+    IconSkeleton,
+    SvgIcon,
+    IconPanel,
+    IconArrow
+  } from '../icons/index';
+</script>

package/packages/ele-pro-form-builder/components/covers/cover-check-card.vue

@@ -0,0 +1,11 @@
+<template>
+  <div :style="{ width: '62px', margin: '0 auto' }">
+    <IconCard size="sm" :checked="true" />
+    <IconCard size="sm" :style="{ marginTop: '4px' }" />
+    <IconCard size="sm" :style="{ marginTop: '4px' }" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { IconCard } from '../icons/index';
+</script>

package/packages/ele-pro-form-builder/components/covers/cover-checkbox-button.vue

@@ -0,0 +1,25 @@
+<template>
+  <div
+    :style="{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      margin: '0 auto',
+      width: '150px',
+      maxWidth: '100%'
+    }"
+  >
+    <IconRadioButton
+      size="sm"
+      :type="1"
+      :checked="true"
+      :style="{ borderRight: '1px solid #fff' }"
+    />
+    <IconRadioButton size="sm" :type="2" :checked="true" />
+    <IconRadioButton size="sm" :type="3" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { IconRadioButton } from '../icons/index';
+</script>

package/packages/ele-pro-form-builder/components/covers/cover-checkbox.vue

@@ -0,0 +1,20 @@
+<template>
+  <div :style="{ width: '82%', margin: '0 auto' }">
+    <div :style="{ display: 'flex', alignItems: 'center' }">
+      <IconCheckbox size="md" />
+      <IconSkeleton size="sm" :style="{ flex: 1 }" />
+    </div>
+    <div :style="{ display: 'flex', alignItems: 'center', marginTop: '6px' }">
+      <IconCheckbox size="md" :checked="true" />
+      <IconSkeleton size="sm" :style="{ flex: 1 }" />
+    </div>
+    <div :style="{ display: 'flex', alignItems: 'center', marginTop: '6px' }">
+      <IconCheckbox size="md" />
+      <IconSkeleton size="sm" :style="{ flex: 1 }" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { IconSkeleton, IconCheckbox } from '../icons/index';
+</script>