y-admin-pro 0.0.1

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

@@ -0,0 +1,55 @@
+<template>
+  <div :style="{ display: 'flex', flexDirection: 'column' }">
+    <div
+      v-for="index in 2"
+      :key="index"
+      class="ele-icon-border-color-base"
+      :style="{
+        marginTop: index === 1 ? void 0 : '6px',
+        borderRadius: '3px',
+        borderStyle: 'solid',
+        borderWidth: '1px'
+      }"
+    >
+      <div
+        class="ele-icon-border-color-base"
+        :style="{
+          height: '16px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+          paddingLeft: '6px',
+          paddingRight: '2px',
+          borderBottomStyle: index === 1 ? 'solid' : void 0,
+          borderBottomWidth: index === 1 ? '1px' : void 0
+        }"
+      >
+        <IconSkeleton
+          size="xs"
+          :style="{ width: '50%', margin: '0 auto 0 0' }"
+        />
+        <SvgIcon
+          v-if="index === 1"
+          name="ArrowDown"
+          size="sm"
+          :style="{ transform: 'scale(0.8)' }"
+        />
+        <SvgIcon
+          v-else
+          name="ArrowRight"
+          size="sm"
+          color="placeholder"
+          :style="{ transform: 'scale(0.8)' }"
+        />
+      </div>
+      <div v-if="index === 1" :style="{ padding: '6px' }">
+        <IconSkeleton size="xs" />
+        <IconSkeleton size="xs" :style="{ marginTop: '4px', width: '50%' }" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { SvgIcon, IconSkeleton } from '../icons/index';
+</script>

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

@@ -0,0 +1,25 @@
+<template>
+  <IconInput
+    :style="{
+      height: 'auto',
+      padding: '6px',
+      maxWidth: '52px',
+      margin: '0 auto'
+    }"
+  >
+    <div
+      :style="{
+        width: '18px',
+        height: '18px',
+        borderRadius: '3px',
+        background:
+          'conic-gradient(from 90deg at 50% 50%, rgb(255, 0, 0) -19.41deg, rgb(255, 0, 0) 18.76deg, rgb(255, 138, 0) 59.32deg, rgb(255, 230, 0) 99.87deg, rgb(20, 255, 0) 141.65deg, rgb(0, 163, 255) 177.72deg, rgb(5, 0, 255) 220.23deg, rgb(173, 0, 255) 260.13deg, rgb(255, 0, 199) 300.69deg, rgb(255, 0, 0) 340.59deg, rgb(255, 0, 0) 378.76deg)'
+      }"
+    ></div>
+    <SvgIcon name="ArrowDown" size="sm" :style="{ margin: '0 0 0 auto' }" />
+  </IconInput>
+</template>
+
+<script lang="ts" setup>
+  import { IconInput, SvgIcon } from '../icons/index';
+</script>

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

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <IconInput size="sm">
+      <IconSkeleton size="sm" :style="{ width: '50%' }" />
+      <SvgIcon
+        name="CalendarOutlined"
+        size="sm"
+        :style="{ margin: '0 0 0 auto' }"
+      />
+    </IconInput>
+    <IconPanel :style="{ padding: '1px 0' }">
+      <IconCalendar size="sm" />
+    </IconPanel>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {
+    IconInput,
+    IconSkeleton,
+    SvgIcon,
+    IconPanel,
+    IconCalendar
+  } from '../icons/index';
+</script>

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

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <IconInput size="sm">
+      <IconRangeSkeleton size="sm" />
+      <SvgIcon
+        name="CalendarOutlined"
+        size="sm"
+        :style="{ margin: '0 0 0 8px' }"
+      />
+    </IconInput>
+    <IconPanel :style="{ padding: '1px 0' }">
+      <IconCalendar size="sm" />
+    </IconPanel>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {
+    IconInput,
+    IconRangeSkeleton,
+    SvgIcon,
+    IconPanel,
+    IconCalendar
+  } from '../icons/index';
+</script>

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

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <IconInput size="sm">
+      <IconSkeleton size="sm" :style="{ width: '50%' }" />
+      <SvgIcon
+        name="ClockCircleOutlined"
+        size="sm"
+        :style="{ margin: '0 0 0 auto' }"
+      />
+    </IconInput>
+    <IconPanel :style="{ padding: '1px 0' }">
+      <IconCalendar size="sm" />
+    </IconPanel>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {
+    IconInput,
+    IconSkeleton,
+    SvgIcon,
+    IconPanel,
+    IconCalendar
+  } from '../icons/index';
+</script>

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

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <IconInput size="sm">
+      <IconRangeSkeleton size="sm" />
+      <SvgIcon
+        name="ClockCircleOutlined"
+        size="sm"
+        :style="{ margin: '0 0 0 8px' }"
+      />
+    </IconInput>
+    <IconPanel :style="{ padding: '1px 0' }">
+      <IconCalendar size="sm" />
+    </IconPanel>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {
+    IconInput,
+    IconRangeSkeleton,
+    SvgIcon,
+    IconPanel,
+    IconCalendar
+  } from '../icons/index';
+</script>

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

@@ -0,0 +1,42 @@
+<template>
+  <div
+    class="ele-icon-border-color-base"
+    :style="{
+      borderTopStyle: 'solid',
+      borderTopWidth: '1px',
+      borderLeftStyle: 'solid',
+      borderLeftWidth: '1px'
+    }"
+  >
+    <div v-for="i in 3" :key="i" :style="{ display: 'flex' }">
+      <div
+        v-for="j in 4"
+        :key="i + '-' + j"
+        :class="[
+          'ele-icon-border-color-base',
+          {
+            'ele-icon-bg-fill': ['1-1', '1-3', '2-1', '2-3', '3-1'].includes(
+              i + '-' + j
+            )
+          }
+        ]"
+        :style="{
+          flex: 1,
+          height: '12px',
+          borderRightStyle: ['3-2', '3-3'].includes(i + '-' + j)
+            ? void 0
+            : 'solid',
+          borderRightWidth: ['3-2', '3-3'].includes(i + '-' + j)
+            ? void 0
+            : '1px',
+          borderBottomStyle: 'solid',
+          borderBottomWidth: '1px'
+        }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>

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

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

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

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <IconSkeleton size="sm" :style="{ marginBottom: '10px', width: '33%' }" />
+    <div
+      class="ele-icon-border-color-primary"
+      :style="{ borderTopStyle: 'solid', borderTopWidth: '1px' }"
+    ></div>
+    <IconSkeleton size="sm" :style="{ margin: '10px 0', width: '66%' }" />
+    <div
+      class="ele-icon-border-color-primary"
+      :style="{ borderTopStyle: 'dashed', borderTopWidth: '1px' }"
+    ></div>
+    <IconSkeleton size="sm" :style="{ marginTop: '10px' }" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { IconSkeleton } from '../icons/index';
+</script>

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

@@ -0,0 +1,18 @@
+<template>
+  <IconInput size="sm">
+    <IconSkeleton size="sm" :style="{ flex: 1, maxWidth: '20px' }" />
+    <IconSkeleton
+      size="sm"
+      :style="{ flex: 1, maxWidth: '20px', margin: '0 0 0 6px' }"
+    />
+    <IconSkeleton
+      size="sm"
+      :style="{ flex: 1, maxWidth: '20px', margin: '0 0 0 6px' }"
+    />
+    <IconCursor :style="{ margin: '0 0 0 6px' }" />
+  </IconInput>
+</template>
+
+<script lang="ts" setup>
+  import { IconInput, IconSkeleton, IconCursor } from '../icons/index';
+</script>

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

@@ -0,0 +1,21 @@
+<template>
+  <div
+    :style="{ display: 'flex', alignItems: 'center', justifyContent: 'center' }"
+  >
+    <SvgIcon name="CheckCircleFilled" :style="{ fontSize: '20px' }" />
+    <SvgIcon
+      name="StarFilled"
+      color="primary5"
+      :style="{ fontSize: '23px', margin: '-2px 0 0 8px' }"
+    />
+    <SvgIcon
+      name="StepForwardFilled"
+      color="light"
+      :style="{ fontSize: '23px', marginLeft: '8px' }"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { SvgIcon } from '../icons/index';
+</script>

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

@@ -0,0 +1,7 @@
+<template>
+  <IconImage :style="{ margin: '0 auto' }" />
+</template>
+
+<script lang="ts" setup>
+  import { IconImage } from '../icons/index';
+</script>

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

@@ -0,0 +1,47 @@
+<template>
+  <div
+    :style="{ display: 'flex', alignItems: 'center', justifyContent: 'center' }"
+  >
+    <div
+      class="ele-icon-bg-fill-light"
+      :style="{
+        width: '20px',
+        height: '20px',
+        borderRadius: '4px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }"
+    >
+      <div
+        class="ele-icon-border-color-text-light"
+        :style="{
+          width: '8px',
+          borderTopStyle: 'solid',
+          borderTopWidth: '2px'
+        }"
+      ></div>
+    </div>
+    <div
+      class="ele-icon-color-base"
+      :style="{ padding: '0 8px', fontSize: '16px', lineHeight: 1 }"
+    >
+      999
+    </div>
+    <SvgIcon
+      name="PlusOutlined"
+      color="secondary"
+      class="ele-icon-bg-fill-light"
+      :style="{
+        width: '20px',
+        height: '20px',
+        borderRadius: '4px',
+        fontSize: '12px'
+      }"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { SvgIcon } from '../icons/index';
+</script>

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

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

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

@@ -0,0 +1,20 @@
+<template>
+  <div
+    class="ele-icon-color-primary"
+    :style="{
+      display: 'flex',
+      alignItems: 'baseline',
+      justifyContent: 'center',
+      fontFamily:
+        '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color emoji'
+    }"
+  >
+    <div :style="{ fontSize: '18px' }">Label</div>
+    <div :style="{ fontSize: '14px', marginLeft: '3px' }">Label</div>
+    <div :style="{ fontSize: '12px', marginLeft: '3px' }">Label</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>

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

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <IconInput size="sm">
+      <div
+        class="ele-icon-color-primary"
+        :style="{
+          fontSize: '13px',
+          fontWeight: 'bold',
+          lineHeight: '13px',
+          fontFamily:
+            '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color emoji',
+          margin: '0 2px 0 -2px',
+          transform: 'translateY(-1px)'
+        }"
+      >
+        @
+      </div>
+      <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-multiple-cascader.vue

@@ -0,0 +1,67 @@
+<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">
+      <div :style="{ display: 'flex', alignItems: 'center' }">
+        <IconCheckbox size="xs" :checked="true" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+        <IconArrow
+          size="sm"
+          color="primary"
+          :style="{ margin: '0 1px 0 4px' }"
+        />
+        <IconCheckbox size="xs" :checked="true" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+        <IconArrow
+          size="sm"
+          color="primary"
+          :style="{ margin: '0 1px 0 4px' }"
+        />
+        <IconCheckbox size="xs" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+      <div :style="{ display: 'flex', alignItems: 'center', marginTop: '4px' }">
+        <IconCheckbox size="xs" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+        <IconArrow size="sm" :style="{ margin: '0 1px 0 4px' }" />
+        <IconCheckbox size="xs" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+        <IconArrow size="sm" :style="{ margin: '0 1px 0 4px' }" />
+        <IconCheckbox size="xs" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+      <div :style="{ display: 'flex', alignItems: 'center', marginTop: '4px' }">
+        <IconCheckbox size="xs" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+        <IconArrow size="sm" :style="{ margin: '0 1px 0 4px' }" />
+        <IconCheckbox size="xs" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+        <IconArrow size="sm" :style="{ margin: '0 1px 0 4px' }" />
+        <IconCheckbox size="xs" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+    </IconPanel>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {
+    IconInput,
+    IconSkeleton,
+    SvgIcon,
+    IconPanel,
+    IconArrow,
+    IconCheckbox
+  } from '../icons/index';
+</script>

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

@@ -0,0 +1,11 @@
+<template>
+  <div :style="{ width: '62px', margin: '0 auto' }">
+    <IconCard size="sm" :checked="true" />
+    <IconCard size="sm" :checked="true" :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-multiple-select.vue

@@ -0,0 +1,49 @@
+<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">
+      <div
+        :style="{ display: 'flex', alignItems: 'center', marginTop: '-2px' }"
+      >
+        <IconCheckbox size="sm" :checked="true" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+      <div :style="{ display: 'flex', alignItems: 'center', marginTop: '2px' }">
+        <IconCheckbox size="sm" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+      <div
+        :style="{
+          display: 'flex',
+          alignItems: 'center',
+          marginTop: '2px',
+          marginBottom: '-2px'
+        }"
+      >
+        <IconCheckbox size="sm" />
+        <IconSkeleton size="sm" :style="{ flex: 1 }" />
+      </div>
+    </IconPanel>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {
+    IconInput,
+    IconSkeleton,
+    SvgIcon,
+    IconPanel,
+    IconCheckbox
+  } from '../icons/index';
+</script>

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

@@ -0,0 +1,7 @@
+<template>
+  <IconTable />
+</template>
+
+<script lang="ts" setup>
+  import { IconTable } from '../icons/index';
+</script>

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

@@ -0,0 +1,20 @@
+<template>
+  <div
+    :style="{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      margin: '0 auto',
+      width: '150px',
+      maxWidth: '100%'
+    }"
+  >
+    <IconRadioButton size="sm" :type="1" :checked="true" />
+    <IconRadioButton size="sm" :type="2" />
+    <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-radio.vue

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

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

@@ -0,0 +1,27 @@
+<template>
+  <div
+    :style="{ display: 'flex', alignItems: 'center', justifyContent: 'center' }"
+  >
+    <SvgIcon
+      name="StarFilled"
+      :style="{ color: '#f7ba2a', fontSize: '20px' }"
+    />
+    <SvgIcon
+      name="StarFilled"
+      :style="{ color: '#f7ba2a', fontSize: '20px', marginLeft: '4px' }"
+    />
+    <SvgIcon
+      name="StarFilled"
+      :style="{ color: '#f7ba2a', fontSize: '20px', marginLeft: '4px' }"
+    />
+    <SvgIcon
+      name="StarFilled"
+      color="lighter"
+      :style="{ fontSize: '20px', marginLeft: '4px' }"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { SvgIcon } from '../icons/index';
+</script>