y-admin-pro 0.0.1

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

@@ -0,0 +1,44 @@
+<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' }">
+        <IconArrow
+          size="sm"
+          direction="down"
+          color="primary"
+          :style="{ marginRight: '1px', transform: 'translate(-2px, 1px)' }"
+        />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+      <div
+        :style="{
+          display: 'flex',
+          alignItems: 'center',
+          marginTop: '4px',
+          paddingLeft: '8px'
+        }"
+      >
+        <IconArrow size="sm" :style="{ marginRight: '1px' }" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+      <div :style="{ display: 'flex', alignItems: 'center', marginTop: '4px' }">
+        <IconArrow size="sm" :style="{ marginRight: '1px' }" />
+        <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-virtual-tree-multiple-select.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <IconInput size="sm">
+      <IconSkeleton size="sm" :style="{ flex: 1, maxWidth: '32px' }" />
+      <IconSkeleton
+        size="sm"
+        :style="{ flex: 1, maxWidth: '32px', margin: '0 0 0 6px' }"
+      />
+      <IconSkeleton
+        size="sm"
+        :style="{ flex: 1, maxWidth: '32px', margin: '0 6px 0 6px' }"
+      />
+      <SvgIcon name="ArrowUp" size="sm" :style="{ margin: '0 0 0 auto' }" />
+    </IconInput>
+    <IconPanel
+      size="sm"
+      :style="{ paddingRight: '10px', position: 'relative' }"
+    >
+      <div
+        :style="{ display: 'flex', alignItems: 'center', marginTop: '-2px' }"
+      >
+        <IconArrow
+          size="sm"
+          direction="down"
+          color="primary"
+          :style="{ marginRight: '1px', transform: 'translate(-2px, 1px)' }"
+        />
+        <IconCheckbox size="sm" :checked="true" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+      <div
+        :style="{
+          display: 'flex',
+          alignItems: 'center',
+          marginTop: '2px',
+          paddingLeft: '10px'
+        }"
+      >
+        <IconArrow size="sm" :style="{ marginRight: '1px' }" />
+        <IconCheckbox size="sm" :checked="true" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+      <div
+        :style="{
+          display: 'flex',
+          alignItems: 'center',
+          marginTop: '2px',
+          marginBottom: '-2px'
+        }"
+      >
+        <IconArrow size="sm" :style="{ marginRight: '1px' }" />
+        <IconCheckbox size="sm" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+      <div
+        class="ele-icon-bg-primary7"
+        :style="{
+          width: '4px',
+          height: '18px',
+          borderRadius: '2px',
+          position: 'absolute',
+          top: '4px',
+          right: '3px'
+        }"
+      ></div>
+    </IconPanel>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {
+    IconInput,
+    IconSkeleton,
+    SvgIcon,
+    IconPanel,
+    IconCheckbox,
+    IconArrow
+  } from '../icons/index';
+</script>

package/packages/ele-pro-form-builder/components/covers/cover-virtual-tree-select.vue

@@ -0,0 +1,58 @@
+<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"
+      :style="{ paddingRight: '10px', position: 'relative' }"
+    >
+      <div :style="{ display: 'flex', alignItems: 'center' }">
+        <IconArrow
+          size="sm"
+          direction="down"
+          color="primary"
+          :style="{ marginRight: '1px', transform: 'translate(-2px, 1px)' }"
+        />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+      <div
+        :style="{
+          display: 'flex',
+          alignItems: 'center',
+          marginTop: '4px',
+          paddingLeft: '8px'
+        }"
+      >
+        <IconArrow size="sm" :style="{ marginRight: '1px' }" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+      <div :style="{ display: 'flex', alignItems: 'center', marginTop: '4px' }">
+        <IconArrow size="sm" :style="{ marginRight: '1px' }" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+      <div
+        class="ele-icon-bg-primary7"
+        :style="{
+          width: '4px',
+          height: '18px',
+          borderRadius: '2px',
+          position: 'absolute',
+          top: '4px',
+          right: '3px'
+        }"
+      ></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/index.ts

@@ -0,0 +1,108 @@
+import { markRaw } from 'vue';
+import CoverInput from './cover-input.vue';
+import CoverTextarea from './cover-textarea.vue';
+import CoverSelect from './cover-select.vue';
+import CoverMultipleSelect from './cover-multiple-select.vue';
+import CoverRadio from './cover-radio.vue';
+import CoverRadioButton from './cover-radio-button.vue';
+import CoverCheckbox from './cover-checkbox.vue';
+import CoverCheckboxButton from './cover-checkbox-button.vue';
+import CoverDate from './cover-date.vue';
+import CoverDatetime from './cover-datetime.vue';
+import CoverDaterange from './cover-daterange.vue';
+import CoverDatetimerange from './cover-datetimerange.vue';
+import CoverTime from './cover-time.vue';
+import CoverTimerange from './cover-timerange.vue';
+import CoverTimeSelect from './cover-time-select.vue';
+import CoverSwitch from './cover-switch.vue';
+import CoverInputNumber from './cover-input-number.vue';
+import CoverAutocomplete from './cover-autocomplete.vue';
+import CoverMention from './cover-mention.vue';
+import CoverCascader from './cover-cascader.vue';
+import CoverMultipleCascader from './cover-multiple-cascader.vue';
+import CoverRate from './cover-rate.vue';
+import CoverTransfer from './cover-transfer.vue';
+import CoverColorPicker from './cover-color-picker.vue';
+import CoverSlider from './cover-slider.vue';
+import CoverSliderRange from './cover-slider-range.vue';
+import CoverTreeSelect from './cover-tree-select.vue';
+import CoverTreeMultipleSelect from './cover-tree-multiple-select.vue';
+import CoverVirtualTreeSelect from './cover-virtual-tree-select.vue';
+import CoverVirtualTreeMultipleSelect from './cover-virtual-tree-multiple-select.vue';
+import CoverTableSelect from './cover-table-select.vue';
+import CoverTableMultipleSelect from './cover-table-multiple-select.vue';
+import CoverCheckCard from './cover-check-card.vue';
+import CoverMultipleCheckCard from './cover-multiple-check-card.vue';
+import CoverEditTag from './cover-edit-tag.vue';
+import CoverText from './cover-text.vue';
+import CoverLabel from './cover-label.vue';
+import CoverDivider from './cover-divider.vue';
+import CoverButton from './cover-button.vue';
+import CoverIcon from './cover-icon.vue';
+import CoverImage from './cover-image.vue';
+import CoverAlert from './cover-alert.vue';
+import CoverSteps from './cover-steps.vue';
+import CoverProTable from './cover-pro-table.vue';
+import CoverCard from './cover-card.vue';
+import CoverTable from './cover-table.vue';
+import CoverTabs from './cover-tabs.vue';
+import CoverRow from './cover-row.vue';
+import CoverCollapse from './cover-collapse.vue';
+import CoverCarousel from './cover-carousel.vue';
+import CoverDescriptions from './cover-descriptions.vue';
+import CoverDiv from './cover-div.vue';
+
+export const covers = {
+  input: markRaw(CoverInput),
+  textarea: markRaw(CoverTextarea),
+  select: markRaw(CoverSelect),
+  multipleSelect: markRaw(CoverMultipleSelect),
+  radio: markRaw(CoverRadio),
+  radioButton: markRaw(CoverRadioButton),
+  checkbox: markRaw(CoverCheckbox),
+  checkboxButton: markRaw(CoverCheckboxButton),
+  date: markRaw(CoverDate),
+  datetime: markRaw(CoverDatetime),
+  daterange: markRaw(CoverDaterange),
+  datetimerange: markRaw(CoverDatetimerange),
+  time: markRaw(CoverTime),
+  timerange: markRaw(CoverTimerange),
+  timeSelect: markRaw(CoverTimeSelect),
+  switch: markRaw(CoverSwitch),
+  inputNumber: markRaw(CoverInputNumber),
+  autocomplete: markRaw(CoverAutocomplete),
+  mention: markRaw(CoverMention),
+  cascader: markRaw(CoverCascader),
+  multipleCascader: markRaw(CoverMultipleCascader),
+  rate: markRaw(CoverRate),
+  transfer: markRaw(CoverTransfer),
+  colorPicker: markRaw(CoverColorPicker),
+  slider: markRaw(CoverSlider),
+  sliderRange: markRaw(CoverSliderRange),
+  treeSelect: markRaw(CoverTreeSelect),
+  treeMultipleSelect: markRaw(CoverTreeMultipleSelect),
+  virtualTreeSelect: markRaw(CoverVirtualTreeSelect),
+  virtualTreeMultipleSelect: markRaw(CoverVirtualTreeMultipleSelect),
+  tableSelect: markRaw(CoverTableSelect),
+  tableMultipleSelect: markRaw(CoverTableMultipleSelect),
+  checkCard: markRaw(CoverCheckCard),
+  multipleCheckCard: markRaw(CoverMultipleCheckCard),
+  editTag: markRaw(CoverEditTag),
+  text: markRaw(CoverText),
+  label: markRaw(CoverLabel),
+  divider: markRaw(CoverDivider),
+  button: markRaw(CoverButton),
+  icon: markRaw(CoverIcon),
+  image: markRaw(CoverImage),
+  alert: markRaw(CoverAlert),
+  steps: markRaw(CoverSteps),
+  proTable: markRaw(CoverProTable),
+  card: markRaw(CoverCard),
+  table: markRaw(CoverTable),
+  tabs: markRaw(CoverTabs),
+  row: markRaw(CoverRow),
+  collapse: markRaw(CoverCollapse),
+  carousel: markRaw(CoverCarousel),
+  descriptions: markRaw(CoverDescriptions),
+  div: markRaw(CoverDiv)
+};

package/packages/ele-pro-form-builder/components/event-edit.vue

@@ -0,0 +1,130 @@
+<!-- 事件编辑弹窗 -->
+<template>
+  <ElButton
+    size="small"
+    class="ele-pro-form-builder-props-fluid-btn"
+    @click="openModal"
+  >
+    {{ title }}
+  </ElButton>
+  <EleModal
+    :width="800"
+    :maxable="true"
+    position="center"
+    v-model="visible"
+    :closeOnClickModal="false"
+    :destroyOnClose="true"
+    :bodyStyle="{
+      height: '520px',
+      minHeight: '100%',
+      maxHeight: '100%',
+      padding: '8px 16px'
+    }"
+  >
+    <template #header>
+      <div class="ele-pro-form-builder-code-edit-header">
+        <div>{{ title }}</div>
+        <ElIcon
+          v-if="codeTips"
+          class="ele-pro-form-builder-code-edit-icon"
+          @mousedown.stop=""
+          @touchstart.stop=""
+        >
+          <QuestionCircleOutlined />
+          <div class="ele-pro-form-builder-code-edit-tip">
+            {{ codeTips }}
+          </div>
+        </ElIcon>
+      </div>
+    </template>
+    <div class="ele-pro-form-builder-code-edit-wrapper">
+      <component
+        :is="codeEditerComponent || CodeEditer"
+        v-model="codeContent"
+      />
+    </div>
+    <template #footer>
+      <ElButton size="default" @click="handleCancel">取消</ElButton>
+      <ElButton type="primary" size="default" @click="handleSave">
+        保存
+      </ElButton>
+    </template>
+  </EleModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { ElButton, ElIcon } from 'element-plus';
+  import { QuestionCircleOutlined } from '../../icons/index';
+  import type { UserComponent } from '../../ele-app/types';
+  import { codeStringPrefix } from '../../ele-pro-form/components/render-core';
+  import EleModal from '../../ele-modal/index.vue';
+  import CodeEditer from './code-editer.vue';
+
+  defineOptions({ name: 'EventEdit' });
+
+  const props = defineProps<{
+    /** 数据 */
+    modelValue?: string;
+    /** 弹窗标题 */
+    title?: string;
+    /** 顶部提示内容 */
+    codeTips?: string;
+    /** 默认提示示例代码 */
+    codePlaceholder?: string;
+    /** 代码字符串前缀 */
+    codePrefix?: string;
+    /** 代码编辑器组件 */
+    codeEditerComponent?: UserComponent;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', data?: string): void;
+  }>();
+
+  /** 弹窗是否打开 */
+  const visible = ref(false);
+
+  /** 内容 */
+  const codeContent = ref('');
+
+  /** 获取代码字符串前缀 */
+  const getCodePrefix = (): string => {
+    return props.codePrefix ?? codeStringPrefix;
+  };
+
+  /** 获取数据结果 */
+  const getResult = (): string | undefined => {
+    const code = codeContent.value;
+    if (code == null || !code) {
+      return;
+    }
+    return `${getCodePrefix()}${code}`;
+  };
+
+  /** 打开弹窗 */
+  const openModal = () => {
+    const codePrefix = getCodePrefix();
+    if (props.modelValue == null || typeof props.modelValue !== 'string') {
+      codeContent.value = props.codePlaceholder ?? '';
+    } else if (props.modelValue.trim().startsWith(codePrefix)) {
+      codeContent.value = props.modelValue.trim().slice(codePrefix.length);
+    } else {
+      codeContent.value = (props.modelValue || props.codePlaceholder) ?? '';
+    }
+    visible.value = true;
+  };
+
+  /** 关闭弹窗 */
+  const handleCancel = () => {
+    visible.value = false;
+    codeContent.value = '';
+  };
+
+  /** 保存编辑 */
+  const handleSave = () => {
+    const result = getResult();
+    handleCancel();
+    emit('update:modelValue', result);
+  };
+</script>

package/packages/ele-pro-form-builder/components/html-edit.vue

@@ -0,0 +1,86 @@
+<!-- 富文本编辑弹窗 -->
+<template>
+  <ElButton
+    size="small"
+    class="ele-pro-form-builder-props-fluid-btn"
+    @click="openModal"
+  >
+    {{ title }}
+  </ElButton>
+  <EleModal
+    :width="800"
+    :maxable="true"
+    position="center"
+    :title="title"
+    v-model="visible"
+    :closeOnClickModal="false"
+    :destroyOnClose="true"
+    :bodyStyle="{
+      height: '520px',
+      minHeight: '100%',
+      maxHeight: '100%',
+      padding: '8px 16px'
+    }"
+  >
+    <div class="ele-pro-form-builder-code-edit-wrapper">
+      <component
+        :is="htmlEditerComponent || CodeEditer"
+        v-model="htmlContent"
+      />
+    </div>
+    <template #footer>
+      <ElButton size="default" @click="handleCancel">取消</ElButton>
+      <ElButton type="primary" size="default" @click="handleSave">
+        保存
+      </ElButton>
+    </template>
+  </EleModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { ElButton } from 'element-plus';
+  import type { UserComponent } from '../../ele-app/types';
+  import EleModal from '../../ele-modal/index.vue';
+  import CodeEditer from './code-editer.vue';
+
+  defineOptions({ name: 'HtmlEdit' });
+
+  const props = defineProps<{
+    /** 数据 */
+    modelValue?: string;
+    /** 弹窗标题 */
+    title?: string;
+    /** 富文本编辑器组件 */
+    htmlEditerComponent?: UserComponent;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', data?: string): void;
+  }>();
+
+  /** 弹窗是否打开 */
+  const visible = ref(false);
+
+  /** 内容 */
+  const htmlContent = ref('');
+
+  /** 打开弹窗 */
+  const openModal = () => {
+    htmlContent.value = props.modelValue ?? '';
+    visible.value = true;
+  };
+
+  /** 关闭弹窗 */
+  const handleCancel = () => {
+    visible.value = false;
+    htmlContent.value = '';
+  };
+
+  /** 保存编辑 */
+  const handleSave = () => {
+    const result = htmlContent.value;
+    handleCancel();
+    emit('update:modelValue', result === '' ? void 0 : result);
+  };
+</script>

package/packages/ele-pro-form-builder/components/icons/icon-arrow.vue

@@ -0,0 +1,45 @@
+<template>
+  <div
+    :class="[
+      {
+        'ele-icon-border-color-text-light': color !== 'primary'
+      },
+      { 'ele-icon-border-color-primary': color === 'primary' }
+    ]"
+    :style="{
+      flexShrink: 0,
+      borderStyle: 'solid',
+      borderWidth: size === 'sm' ? '3px' : '4px',
+      ...{
+        right: {
+          borderTopColor: 'transparent',
+          borderRightColor: 'transparent',
+          borderBottomColor: 'transparent'
+        },
+        left: {
+          borderTopColor: 'transparent',
+          borderLeftColor: 'transparent',
+          borderBottomColor: 'transparent'
+        },
+        down: {
+          borderLeftColor: 'transparent',
+          borderRightColor: 'transparent',
+          borderBottomColor: 'transparent'
+        },
+        up: {
+          borderTopColor: 'transparent',
+          borderLeftColor: 'transparent',
+          borderRightColor: 'transparent'
+        }
+      }[direction || 'right']
+    }"
+  ></div>
+</template>
+
+<script lang="ts" setup>
+  defineProps<{
+    size?: 'sm' | 'md';
+    direction?: 'right' | 'left' | 'down' | 'up';
+    color?: 'text-light' | 'primary';
+  }>();
+</script>

package/packages/ele-pro-form-builder/components/icons/icon-button.vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    :class="[
+      'ele-icon-border-color-base',
+      { 'ele-icon-bg-primary': type === 'primary' },
+      { 'ele-icon-bg-fill': type !== 'primary' && type !== 'bordered' }
+    ]"
+    :style="{
+      display: 'flex',
+      alignItems: 'center',
+      height: size === 'sm' ? '22px' : '28px',
+      padding: size === 'sm' ? '0 6px' : '0 10px',
+      boxSizing: 'border-box',
+      borderRadius: '4px',
+      borderStyle: type === 'bordered' ? 'solid' : void 0,
+      borderWidth: type === 'bordered' ? '1px' : void 0
+    }"
+  >
+    <IconSkeleton
+      v-if="!hideSkeleton && (type === 'primary' || type === 'bordered')"
+      :size="size === 'sm' ? 'xs' : 'sm'"
+      :class="[
+        { 'ele-icon-bg-white': type === 'primary' },
+        { 'ele-icon-bg-fill-light': type !== 'primary' }
+      ]"
+      :style="{ flex: 1 }"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { IconSkeleton } from './index';
+
+  defineProps<{
+    size?: 'sm' | 'md';
+    type?: 'default' | 'primary' | 'bordered';
+    hideSkeleton?: boolean;
+  }>();
+</script>

package/packages/ele-pro-form-builder/components/icons/icon-calendar.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="ele-icon-bg-calendar"
+    :style="{
+      height: size === 'sm' ? '38px' : '66px',
+      width: size === 'sm' ? '82px' : '144px',
+      margin: '0 auto',
+      backgroundPosition: 'center',
+      backgroundSize: size === 'sm' ? '12px 12px' : '20px 20px',
+      maxWidth: '100%'
+    }"
+  ></div>
+</template>
+
+<script lang="ts" setup>
+  defineProps<{
+    size?: 'sm' | 'md';
+  }>();
+</script>

package/packages/ele-pro-form-builder/components/icons/icon-card.vue

@@ -0,0 +1,40 @@
+<template>
+  <div
+    :class="[
+      { 'ele-icon-border-color-primary5': checked },
+      { 'ele-icon-border-color-base': !checked }
+    ]"
+    :style="{
+      padding: size === 'sm' ? '8px' : '10px',
+      borderRadius: '4px',
+      borderStyle: 'solid',
+      borderWidth: '1px',
+      position: 'relative'
+    }"
+  >
+    <IconSkeleton :size="size === 'sm' ? 'xs' : 'sm'" />
+    <div
+      v-if="checked"
+      class="ele-icon-border-color-primary"
+      :style="{
+        borderRadius: '2px',
+        borderStyle: 'solid',
+        borderWidth: '4px',
+        borderLeftColor: 'transparent',
+        borderBottomColor: 'transparent',
+        position: 'absolute',
+        right: size === 'sm' ? '2px' : '4px',
+        top: size === 'sm' ? '2px' : '4px'
+      }"
+    ></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { IconSkeleton } from './index';
+
+  defineProps<{
+    size?: 'sm' | 'md';
+    checked?: boolean;
+  }>();
+</script>