@neatui/nuxt 0.1.0

package/src/components/form/TimeView.vue

@@ -0,0 +1,244 @@
+<template>
+  <div :class="`${frame ? 'b-solid bk-line b-xs r-sm' : ''}`" ui-flex="col xy">
+    <div ui-calendar-head="" class="nx-sl ny-sm b-solid bk-line bb-xs">
+      <div ui-flex="row lm"></div>
+      <div ui-flex="row cm" class="nx-ss-sub">
+        <p class="mx-ss-sub">
+          <b>{{ curr.y }}年</b>
+          <b>{{ curr.m }}月</b>
+          <b>{{ curr.d }}日</b>
+        </p>
+      </div>
+      <div ui-flex="row rm"></div>
+    </div>
+    <div ui-flex="row am" class="fs-xs bold nx-sl nt-sm"><span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div>
+    <div>
+      <ul ui-calendar-days="" ui-flex="row lm" class="flex-wrap nx-sm">
+        <li class="ew7 n-sm ux-none" v-for="(item, idx) in curr.days" :key="idx">
+          <div v-if="item.day" @click="change(item)" ui-cover="-xs">
+            <div
+              ui-flex="col cm"
+              class="r-sm b-solid bk-none b-xs"
+              :class="`${item.isToday ? 'bk-main-ls' : item.isLastMonth || item.isNextMonth ? 'co-note' : item.isHoliday ? 'co-risk' : ''} ${
+                state.selected && state.selected === item.date ? 'active bg-main-ls co-fore' : 'hover-bg-weak'
+              }`"
+            >
+              <span>{{ item.day }}</span>
+              <sup style="font-size: 0.6em; margin-top: -0.3em; position: absolute; left: 100%; top: 0" v-if="item.holiday" class="lh-ss">休</sup>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div ui-calendar-foot="" ui-flex="row xm" class="nx-sl nb-sl">
+      <div ui-flex="row lm">
+        <div ui-btn="@a s none :square" @click="prev('y')">
+          <svg style="width: 1em; height: 1em" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M220.1 481.5L502 199.3c7.6-7.6 17.8-11.8 28.5-11.8s20.9 4.2 28.5 11.8c7.5 7.6 11.8 17.8 11.8 28.5s-4.2 20.9-11.8 28.5L305.5 510l253.4 253.7c7.3 7.6 11.4 17.8 11.3 28.4-0.1 10.6-4.3 20.7-11.8 28.2-7.5 7.5-17.6 11.7-28.1 11.8-10.6 0.1-20.7-4-28.3-11.3L220.1 538.5c-7.5-7.6-11.8-17.8-11.8-28.5s4.2-21 11.8-28.5z"
+              p-id="3429"
+            ></path>
+            <path
+              d="M453.3 514.5c0-10.7 4.2-20.9 11.8-28.5L747 203.9c7.6-7.6 17.8-11.8 28.5-11.8s20.9 4.2 28.5 11.8c7.5 7.6 11.8 17.8 11.8 28.5s-4.2 20.9-11.8 28.5L550.5 514.5l253.4 253.7c7.3 7.6 11.4 17.8 11.3 28.4-0.1 10.6-4.3 20.7-11.8 28.2-7.5 7.5-17.6 11.7-28.1 11.8-10.6 0.1-20.7-4-28.3-11.3L465.1 543c-7.5-7.5-11.8-17.8-11.8-28.5z"
+              p-id="3430"
+            ></path>
+          </svg>
+        </div>
+        <div ui-btn="@a s none :square" @click="prev('m')">
+          <svg style="width: 1em; height: 1em" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M684.2 827.6c-7.7 7.7-18.1 12-28.9 12-10.9 0-21.3-4.3-28.9-12L339.8 540.7c-7.7-7.7-12-18.1-12-29 0-10.9 4.3-21.3 12-29l286.6-286.9c7.7-7.5 18.1-11.6 28.8-11.5 10.7 0.1 21 4.4 28.6 12 7.6 7.6 11.9 17.9 12 28.6 0.1 10.7-4 21.1-11.5 28.8L426.6 511.8l257.6 257.9c7.7 7.7 12 18.1 12 29s-4.3 21.2-12 28.9z"
+              p-id="1281"
+            ></path>
+          </svg>
+        </div>
+      </div>
+      <div ui-flex="row cm" class="nx-ss-sub">
+        <ul class="fs-xs n-sm-sub" ui-flex="row lm">
+          <li ui-btn="@a s none">年</li>
+          <li ui-btn="@a s none">月</li>
+          <li ui-btn="@a s none">日</li>
+        </ul>
+      </div>
+      <div ui-flex="row rm">
+        <div ui-btn="@a s none :square" @click="next('m')">
+          <svg style="width: 1em; height: 1em" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M339.8 827.6c-7.7-7.7-12-18.1-12-29s4.3-21.3 12-29l257.6-257.9-257.6-257.9c-7.5-7.7-11.6-18.1-11.5-28.8 0.1-10.7 4.4-21 12-28.6 7.6-7.6 17.9-11.9 28.6-12 10.7-0.1 21.1 4 28.8 11.5l286.6 286.9c7.7 7.7 12 18.1 12 29 0 10.9-4.3 21.3-12 29L397.7 827.6c-7.7 7.7-18.1 12-28.9 12-10.9 0-21.4-4.3-29-12z"
+              p-id="3084"
+            ></path>
+          </svg>
+        </div>
+        <div ui-btn="@a s none :square" @click="next('y')">
+          <svg style="width: 1em; height: 1em" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M803.9 481.5L522.1 199.3a40.18 40.18 0 0 0-28.5-11.8c-10.7 0-20.9 4.2-28.5 11.8-7.5 7.6-11.8 17.8-11.8 28.5s4.2 20.9 11.8 28.5L718.5 510 465.1 763.6c-7.3 7.6-11.4 17.8-11.3 28.4 0.1 10.6 4.3 20.7 11.8 28.2 7.5 7.5 17.6 11.7 28.1 11.8 10.6 0.1 20.7-4 28.3-11.3l281.9-282.2c7.5-7.6 11.8-17.8 11.8-28.5s-4.2-21-11.8-28.5z"
+              p-id="3256"
+            ></path>
+            <path
+              d="M570.7 514.5c0-10.7-4.2-20.9-11.8-28.5L277 203.9a40.18 40.18 0 0 0-28.5-11.8c-10.7 0-20.9 4.2-28.5 11.8-7.5 7.6-11.8 17.8-11.8 28.5s4.2 20.9 11.8 28.5l253.4 253.7-253.3 253.6c-7.3 7.6-11.4 17.8-11.3 28.4 0.1 10.6 4.3 20.7 11.8 28.2 7.5 7.5 17.6 11.7 28.1 11.8 10.6 0.1 20.7-4 28.3-11.3L558.9 543c7.5-7.5 11.8-17.8 11.8-28.5z"
+              p-id="3257"
+            ></path>
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { computed, reactive, toRefs } from 'vue';
+  import { idate } from '@fekit/utils';
+  // 创建日期
+  const cDate = (date: any = null) => {
+    const _date = new Date(date);
+    return date && _date instanceof Date && !isNaN(_date.getTime()) ? _date : new Date();
+  };
+  // 个位补零
+  const numfill = (num: string | number = '') => {
+    return Number(num) < 10 ? `0${num}` : num;
+  };
+  // 外部入参
+  const props = defineProps({
+    frame: { type: Boolean, default: false },
+    theme: { type: String, default: '@a' },
+    sz: { type: String, default: 'm' },
+    co: { type: String, default: '' },
+    block: { type: Boolean, default: true },
+    // 提示文案
+    tips: {
+      type: String,
+      default: ''
+    },
+    // 提示文案
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    // 格式
+    format: {
+      type: String,
+      default: ''
+    },
+    // 值
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    // 值
+    modelValue: { type: [String, Number], default: '' },
+    // 节假日
+    holiday: {
+      type: Object,
+      default: () => ({})
+    },
+    // 校验规则
+    rules: {
+      type: Array,
+      default: () => []
+    },
+    // 是否是示校验图标
+    verify: {
+      type: Boolean,
+      default: false
+    }
+  });
+
+  // 内部数据
+  const state: any = reactive({
+    view: 1,
+    show: 0,
+    pos: 'bl',
+    selected: '',
+    date: props.value,
+    curr: computed(() => {
+      const date = cDate(state.date);
+      const calendar = [];
+      // 年
+      const y: any = date.getFullYear();
+      // 月
+      const m: any = date.getMonth() + 1;
+      // 日
+      const d: any = date.getDate();
+      // 本月第一天星期几
+      const w = new Date(`${y}-${m}-1`).getDay();
+      // 当前月份一共几天
+      const days = new Date(y, m, 0).getDate();
+
+      // 当前
+      const curr = new Date();
+      const curr_y = curr.getFullYear();
+      const curr_m = curr.getMonth() + 1;
+      const curr_d = curr.getDate();
+
+      // 上月
+      const last = new Date(y, m - 1, 0);
+      const last_y = last.getFullYear();
+      const last_m = last.getMonth() + 1;
+
+      // 下月
+      const next = new Date(y, m + 1, 0);
+      const next_y = next.getFullYear();
+      const next_m = next.getMonth() + 1;
+      let prevdays = last.getDate();
+
+      for (let i = 0; i < w; i++) {
+        calendar.unshift({
+          date: `${last_y}-${numfill(last_m)}-${prevdays}`,
+          day: prevdays,
+          isLastMonth: 1
+        });
+        prevdays = prevdays - 1;
+      }
+      for (let i = 1; i <= days; i++) {
+        const _i = numfill(i);
+        calendar.push({
+          date: `${y}-${numfill(m)}-${_i}`,
+          day: _i,
+          isToday: curr_y === y && curr_m === m && curr_d === i,
+          isHoliday: props.holiday[`${y}-${numfill(m)}-${_i}`]?.name ? 1 : 0,
+          holiday: props.holiday[`${y}-${numfill(m)}-${_i}`]?.name
+        });
+      }
+      for (let i = 1; calendar.length < 42; i++) {
+        const _i = numfill(i);
+        calendar.push({
+          date: `${next_y}-${numfill(next_m)}-${_i}`,
+          day: _i,
+          isNextMonth: 1
+        });
+      }
+      return { days: calendar, y, m, d };
+    }),
+    value: computed(() => {
+      return props.format ? idate(state.selected || props.value).format(props.format) : state.selected || props.value;
+    })
+  });
+  const { curr = {} }: any = toRefs(state);
+
+  const upload = (a: any = 'm', b: any = 1) => {
+    const date = cDate(state.date);
+    if (a === 'm') {
+      date.setMonth(date.getMonth() + b);
+    } else {
+      date.setFullYear(date.getFullYear() + b);
+    }
+    return date.toISOString().substring(0, 10);
+  };
+
+  // 日期前翻
+  const prev = (type: any = 'm') => {
+    state.date = upload(type, -1);
+  };
+  // 日期后翻
+  const next = (type: any = 'm') => {
+    state.date = upload(type, 1);
+  };
+
+  // 向外通信
+  const emits = defineEmits(['change']);
+  const change = (item: any) => {
+    state.selected = item.date;
+    state.date = item.date;
+    emits('change', item.date);
+  };
+</script>

package/src/components/form/Upload.vue

@@ -0,0 +1,346 @@
+<template>
+  <ul ui-flex="row lm :wrap" class="mb-ss-sub mr-ss-sub" v-bind="{ ...attrs }">
+    <li v-for="(file, idx) in state.files" :key="idx" ui-flex="col cm" class="flex-fixed bg-fore n-sl w-ms h-ms b-solid bk-line b-xs">
+      <img v-if="file.type === 'image'" :src="file.path" alt="" />
+      <template v-else-if="file.type === 'pdf'">
+        <svg t="1705645350800" class="w-ss h-ss" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1913">
+          <path
+            d="M205.5 64H665l232 232v639c0 13.807-11.193 25-25 25H205.5c-13.807 0-25-11.193-25-25V89c0-13.807 11.193-25 25-25z m449.145 25H205.5v846H872V306.355L654.645 89z"
+            fill="#B7B7BD"
+            p-id="1914"
+          ></path>
+          <path d="M665 64l-11 23.5v197c0 13.807 11.193 25 25 25h194.5L897 296 665 64z m14 49.355L850.145 284.5H679V113.355z" fill="#B7B7BD" p-id="1915"></path>
+          <path d="M255 571m10 0l556 0q10 0 10 10l0 0q0 10-10 10l-556 0q-10 0-10-10l0 0q0-10 10-10Z" fill="#B7B7BD" p-id="1916"></path>
+          <path d="M255 707m10 0l556 0q10 0 10 10l0 0q0 10-10 10l-556 0q-10 0-10-10l0 0q0-10 10-10Z" fill="#B7B7BD" p-id="1917"></path>
+          <path d="M255 639m10 0l556 0q10 0 10 10l0 0q0 10-10 10l-556 0q-10 0-10-10l0 0q0-10 10-10Z" fill="#B7B7BD" p-id="1918"></path>
+          <path d="M255 774m10 0l556 0q10 0 10 10l0 0q0 10-10 10l-556 0q-10 0-10-10l0 0q0-10 10-10Z" fill="#B7B7BD" p-id="1919"></path>
+          <path d="M255 842m10 0l556 0q10 0 10 10l0 0q0 10-10 10l-556 0q-10 0-10-10l0 0q0-10 10-10Z" fill="#B7B7BD" p-id="1920"></path>
+          <path d="M67 193m16 0l287 0q16 0 16 16l0 287q0 16-16 16l-287 0q-16 0-16-16l0-287q0-16 16-16Z" fill="#FF4867" p-id="1921"></path>
+          <path
+            d="M314.229 459.289c-21.407 0-40.606-36.765-50.708-60.673-16.991-7.098-35.722-13.728-53.918-18.014-15.92 10.514-43.014 26.251-63.818 26.251-12.911 0-22.21-6.496-25.622-17.813-2.609-9.309-0.4-15.738 2.409-19.22 5.485-7.5 16.79-11.317 33.715-11.317 13.714 0 31.107 2.41 50.507 7.098 12.51-8.907 25.22-19.22 36.525-30.135-5.017-23.84-10.503-62.48 3.412-80.294 6.89-8.505 17.393-11.318 30.103-7.5 13.914 4.017 19.199 12.522 20.804 19.22 5.887 23.237-20.804 54.578-38.8 72.994 4.015 15.938 9.3 32.747 15.721 48.15 25.822 11.518 56.527 28.728 60.006 47.48 1.405 6.495-0.602 12.522-5.887 17.813-4.549 3.75-9.365 5.96-14.45 5.96z m-31.647-52.419c12.785 26.402 24.975 38.862 31.4 38.862 0.995 0 2.386-0.404 4.373-2.02 2.385-2.425 2.385-4.041 1.988-5.523-1.325-6.937-12.124-18.32-37.761-31.319z m-126.377-35.247c-16.73 0-21.33 4.093-22.73 6.003-0.399 0.614-1.599 2.455-0.399 7.23 1 4.092 3.8 8.458 12.464 8.458 10.865 0 26.595-6.207 44.857-17.325-13.063-2.933-24.594-4.366-34.192-4.366z m67.632-1.765c10.845 2.983 22.09 6.827 32.535 10.803-3.792-9.809-6.853-20.015-9.448-29.824-7.651 6.561-15.436 12.99-23.087 19.021zM265.9 259.556c-3.827 0-6.513 1.409-8.93 4.024-7.118 8.917-7.924 31.38-2.418 60.144 20.884-22.26 32.232-42.711 29.411-53.64-0.402-1.61-1.611-6.504-11.348-9.32-2.686-0.805-4.7-1.208-6.715-1.208z"
+            fill="#FFFFFF"
+            p-id="1922"
+          ></path>
+        </svg>
+      </template>
+      <template v-else-if="file.type === 'xlsx'">
+        <svg t="1705645380770" class="w-ss h-ss" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2060">
+          <path
+            d="M205.799024 64.936585H664.850732l231.773658 231.773659v638.376585c0 13.79353-11.18208 24.97561-24.97561 24.97561H205.799024c-13.79353 0-24.97561-11.18208-24.975609-24.97561V89.912195c0-13.79353 11.18208-24.97561 24.975609-24.97561z m448.70681 24.97561H205.799024v845.174634H871.64878V307.055141L654.505834 89.912195z"
+            fill="#B7B7BD"
+            p-id="2061"
+          ></path>
+          <path
+            d="M664.850732 64.936585l-10.989269 23.477074v196.807804c0 13.79353 11.18208 24.97561 24.97561 24.97561h194.310244L896.62439 296.710244 664.850732 64.936585z m13.986341 49.306849L849.815102 285.221463H678.837073V114.243434z"
+            fill="#B7B7BD"
+            p-id="2062"
+          ></path>
+          <path
+            d="M255.250732 571.441951m9.990244 0l555.457561 0q9.990244 0 9.990243 9.990244l0 0q0 9.990244-9.990243 9.990244l-555.457561 0q-9.990244 0-9.990244-9.990244l0 0q0-9.990244 9.990244-9.990244Z"
+            fill="#B7B7BD"
+            p-id="2063"
+          ></path>
+          <path
+            d="M255.250732 707.309268m9.990244 0l555.457561 0q9.990244 0 9.990243 9.990244l0 0q0 9.990244-9.990243 9.990244l-555.457561 0q-9.990244 0-9.990244-9.990244l0 0q0-9.990244 9.990244-9.990244Z"
+            fill="#B7B7BD"
+            p-id="2064"
+          ></path>
+          <path
+            d="M255.250732 639.37561m9.990244 0l555.457561 0q9.990244 0 9.990243 9.990244l0 0q0 9.990244-9.990243 9.990244l-555.457561 0q-9.990244 0-9.990244-9.990244l0 0q0-9.990244 9.990244-9.990244Z"
+            fill="#B7B7BD"
+            p-id="2065"
+          ></path>
+          <path
+            d="M255.250732 774.243902m9.990244 0l555.457561 0q9.990244 0 9.990243 9.990244l0 0q0 9.990244-9.990243 9.990244l-555.457561 0q-9.990244 0-9.990244-9.990244l0 0q0-9.990244 9.990244-9.990244Z"
+            fill="#B7B7BD"
+            p-id="2066"
+          ></path>
+          <path
+            d="M255.250732 842.177561m9.990244 0l555.457561 0q9.990244 0 9.990243 9.990244l0 0q0 9.990244-9.990243 9.990244l-555.457561 0q-9.990244 0-9.990244-9.990244l0 0q0-9.990244 9.990244-9.990244Z"
+            fill="#B7B7BD"
+            p-id="2067"
+          ></path>
+          <path
+            d="M67.434146 193.810732m15.984391 0l286.72 0q15.98439 0 15.98439 15.98439l0 286.72q0 15.98439-15.98439 15.98439l-286.72 0q-15.98439 0-15.984391-15.98439l0-286.72q0-15.98439 15.984391-15.98439Z"
+            fill="#00C090"
+            p-id="2068"
+          ></path>
+          <path
+            d="M242.569116 353.23904l89.224866 84.502478c4.337764 4.107988 4.523582 10.954302 0.415595 15.291067-4.107988 4.337764-10.954302 4.523582-15.291068 0.415595l-89.224866-84.502479-84.502478 89.224867c-4.107988 4.337764-10.954302 4.523582-15.291067 0.415594-4.337764-4.107988-4.523582-10.954302-0.415595-15.291067l84.502478-89.224867-89.224866-84.502478c-4.337764-4.107988-4.523582-10.954302-0.415594-15.291067 4.107988-4.337764 10.954302-4.523582 15.291067-0.415594l89.224867 84.502478 84.502478-89.224867c4.107988-4.337764 10.954302-4.523582 15.291067-0.415594 4.337764 4.107988 4.523582 10.954302 0.415594 15.291068l-84.502478 89.224866z"
+            fill="#FFFFFF"
+            p-id="2069"
+          ></path>
+        </svg>
+      </template>
+      <template v-else-if="file.type === 'docx'">
+        <svg t="1705645401993" class="w-ss h-ss" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2207">
+          <path
+            d="M205.5 64H665l232 232v639c0 13.807-11.193 25-25 25H205.5c-13.807 0-25-11.193-25-25V89c0-13.807 11.193-25 25-25z m449.145 25H205.5v846H872V306.355L654.645 89z"
+            fill="#B7B7BD"
+            p-id="2208"
+          ></path>
+          <path d="M665 64l-11 23.5v197c0 13.807 11.193 25 25 25h194.5L897 296 665 64z m14 49.355L850.145 284.5H679V113.355z" fill="#B7B7BD" p-id="2209"></path>
+          <path d="M67 193m16 0l287 0q16 0 16 16l0 287q0 16-16 16l-287 0q-16 0-16-16l0-287q0-16 16-16Z" fill="#4297FC" p-id="2210"></path>
+          <path d="M255 571m10 0l556 0q10 0 10 10l0 0q0 10-10 10l-556 0q-10 0-10-10l0 0q0-10 10-10Z" fill="#B7B7BD" p-id="2211"></path>
+          <path d="M255 707m10 0l556 0q10 0 10 10l0 0q0 10-10 10l-556 0q-10 0-10-10l0 0q0-10 10-10Z" fill="#B7B7BD" p-id="2212"></path>
+          <path d="M255 639m10 0l556 0q10 0 10 10l0 0q0 10-10 10l-556 0q-10 0-10-10l0 0q0-10 10-10Z" fill="#B7B7BD" p-id="2213"></path>
+          <path d="M255 774m10 0l556 0q10 0 10 10l0 0q0 10-10 10l-556 0q-10 0-10-10l0 0q0-10 10-10Z" fill="#B7B7BD" p-id="2214"></path>
+          <path d="M255 842m10 0l556 0q10 0 10 10l0 0q0 10-10 10l-556 0q-10 0-10-10l0 0q0-10 10-10Z" fill="#B7B7BD" p-id="2215"></path>
+          <path
+            d="M315.269 451.314c7.015 7.61 19.731 2.651 19.731-7.693V271h-22.737v143.524l-76.9-83.418c-4.503-4.885-12.223-4.885-16.726 0l-76.9 83.418V271H119v172.62c0 10.345 12.716 15.303 19.731 7.694L227 355.564l88.269 95.75z"
+            fill="#FFFFFF"
+            p-id="2216"
+          ></path>
+        </svg>
+      </template>
+      <template v-else-if="file.type === 'pptx'">
+        <svg t="1705645414803" class="w-ss h-ss" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2354">
+          <path
+            d="M205.5 64H665l232 232v639c0 13.807-11.193 25-25 25H205.5c-13.807 0-25-11.193-25-25V89c0-13.807 11.193-25 25-25z m449.145 25H205.5v846H872V306.355L654.645 89z"
+            fill="#B7B7BD"
+            p-id="2355"
+          ></path>
+          <path d="M665 64l-11 23.5v197c0 13.807 11.193 25 25 25h194.5L897 296 665 64z m14 49.355L850.145 284.5H679V113.355z" fill="#B7B7BD" p-id="2356"></path>
+          <path d="M255 571m10 0l556 0q10 0 10 10l0 0q0 10-10 10l-556 0q-10 0-10-10l0 0q0-10 10-10Z" fill="#B7B7BD" p-id="2357"></path>
+          <path d="M255 707m10 0l556 0q10 0 10 10l0 0q0 10-10 10l-556 0q-10 0-10-10l0 0q0-10 10-10Z" fill="#B7B7BD" p-id="2358"></path>
+          <path d="M255 639m10 0l556 0q10 0 10 10l0 0q0 10-10 10l-556 0q-10 0-10-10l0 0q0-10 10-10Z" fill="#B7B7BD" p-id="2359"></path>
+          <path d="M255 774m10 0l556 0q10 0 10 10l0 0q0 10-10 10l-556 0q-10 0-10-10l0 0q0-10 10-10Z" fill="#B7B7BD" p-id="2360"></path>
+          <path d="M255 842m10 0l556 0q10 0 10 10l0 0q0 10-10 10l-556 0q-10 0-10-10l0 0q0-10 10-10Z" fill="#B7B7BD" p-id="2361"></path>
+          <path d="M67 193m16 0l287 0q16 0 16 16l0 287q0 16-16 16l-287 0q-16 0-16-16l0-287q0-16 16-16Z" fill="#FF7A64" p-id="2362"></path>
+          <path
+            d="M314 312.055c0 16.701-8.014 25.218-26.96 27.787H129c-5.523 0-10 4.477-10 10V451.5c0 5.523 4.477 10 10 10s10-4.477 10-10v-91.658h148.694a10 10 0 0 0 1.264-0.08C317.98 356.065 334 339.393 334 312.055c0-26.83-15.298-44.972-43.677-52.703a10 10 0 0 0-2.629-0.352H129c-5.523 0-10 4.477-10 10s4.477 10 10 10h157.317C305.466 284.553 314 295.032 314 312.055z"
+            fill="#FFFFFF"
+            p-id="2363"
+          ></path>
+        </svg>
+      </template>
+      <template v-else>
+        <svg t="1705645436666" class="w-ss h-ss" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2501">
+          <path
+            d="M205.5 64H665l232 232v639c0 13.807-11.193 25-25 25H205.5c-13.807 0-25-11.193-25-25V89c0-13.807 11.193-25 25-25z m449.145 25H205.5v846H872V306.355L654.645 89z"
+            fill="#B7B7BD"
+            p-id="2502"
+          ></path>
+          <path d="M665 64l-11 23.5v197c0 13.807 11.193 25 25 25h194.5L897 296 665 64z m14 49.355L850.145 284.5H679V113.355z" fill="#B7B7BD" p-id="2503"></path>
+          <path d="M255 571m10 0l556 0q10 0 10 10l0 0q0 10-10 10l-556 0q-10 0-10-10l0 0q0-10 10-10Z" fill="#B7B7BD" p-id="2504"></path>
+          <path d="M255 707m10 0l556 0q10 0 10 10l0 0q0 10-10 10l-556 0q-10 0-10-10l0 0q0-10 10-10Z" fill="#B7B7BD" p-id="2505"></path>
+          <path d="M255 639m10 0l556 0q10 0 10 10l0 0q0 10-10 10l-556 0q-10 0-10-10l0 0q0-10 10-10Z" fill="#B7B7BD" p-id="2506"></path>
+          <path d="M255 774m10 0l556 0q10 0 10 10l0 0q0 10-10 10l-556 0q-10 0-10-10l0 0q0-10 10-10Z" fill="#B7B7BD" p-id="2507"></path>
+          <path d="M255 842m10 0l556 0q10 0 10 10l0 0q0 10-10 10l-556 0q-10 0-10-10l0 0q0-10 10-10Z" fill="#B7B7BD" p-id="2508"></path>
+          <path d="M67 193m16 0l287 0q16 0 16 16l0 287q0 16-16 16l-287 0q-16 0-16-16l0-287q0-16 16-16Z" fill="#CCCCCC" p-id="2509"></path>
+          <path
+            d="M226.274 240c14.845 0 29.79 4.862 41.18 13.738C280.444 263.86 288 278.458 288 295.57c0 22.53-15.93 43.423-46.252 63.48l-0.31 0.203V387c0 6.525-5.208 11.834-11.695 11.996l-0.305 0.004c-6.627 0-12-5.373-12-12v-34.314a12 12 0 0 1 5.673-10.196C250.988 325.189 264 309.227 264 295.57c0-9.498-3.99-17.207-11.298-22.902-7.059-5.5-16.796-8.668-26.428-8.668-9.598 0-19.202 3.147-26.147 8.625-7.064 5.571-10.985 13.116-11.123 22.435l-0.004 0.51c0 6.628-5.373 12-12 12s-12-5.372-12-12c0-33.201 28.361-55.57 61.274-55.57zM230 453c9.389 0 17-7.611 17-17s-7.611-17-17-17-17 7.611-17 17 7.611 17 17 17z"
+            fill="#FFFFFF"
+            p-id="2510"
+          ></path>
+        </svg>
+      </template>
+      <p ui-omit="1" class="fs-ss ac">{{ file.name }}</p>
+    </li>
+    <li v-if="(!multiple && state.files && state.files.length === 0) || (multiple && (!limit || (limit && state.files && state.files.length < limit)))">
+      <slot>
+        <label ui-flex="row cm" ui-form="@a type:upload tips:hover" :class="`upload w-ms h-ms n-sl bg-fore b-solid bk-line b-xs ${uploadClass}`" :style="uploadStyle">
+          <div v-if="tips" ui-form-tips>
+            {{ tips }}
+          </div>
+          <input style="display: none" type="file" class="pa input" :multiple="multiple" @change="change" />
+          <div class="co-note ac input-icon">
+            <svg t="1705642180833" style="width: 1em; height: 1em" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4215">
+              <path
+                d="M906.212134 565.732986 565.732986 565.732986 565.732986 906.212134C565.732986 926.013685 541.666486 959.972 511.97312 959.972 482.297674 959.972 458.213254 926.013685 458.213254 906.212134L458.213254 565.732986 117.734106 565.732986C97.950475 565.732986 63.97424 541.666486 63.97424 511.97312 63.97424 482.279754 97.950475 458.213254 117.734106 458.213254L458.213254 458.213254 458.213254 117.734106C458.213254 97.950475 482.297674 63.97424 511.97312 63.97424 541.666486 63.97424 565.732986 97.950475 565.732986 117.734106L565.732986 458.213254 906.212134 458.213254C925.995765 458.213254 959.972 482.279754 959.972 511.97312 959.972 541.666486 925.995765 565.732986 906.212134 565.732986Z"
+                p-id="4216"
+              ></path>
+            </svg>
+          </div>
+        </label>
+      </slot>
+    </li>
+  </ul>
+  <Layer :id="layerId" am="as"></Layer>
+</template>
+<script setup lang="ts">
+  import { reactive, ref, watch } from 'vue';
+  import { Image } from '../display';
+  import draggable from 'vuedraggable';
+  import Compressor from 'compressorjs';
+  import { Layer, LayerById } from '../basic';
+  import { isArray, isFunction } from '@fekit/utils';
+
+  const layerId = Math.random().toString(36).slice(-6);
+
+  interface Props {
+    modelValue?: string | any[];
+    // 文件限制数量
+    limit?: number;
+    attrs?: object;
+    uploadClass?: string;
+    uploadStyle?: string;
+    id?: string;
+    tips?: string; // 提示文案
+    // 文件类型
+    accept?: string;
+    // 是否可以上传多个文件
+    multiple?: boolean;
+    // 是否需要抠图处理
+    crop?: boolean;
+    // 上传路径
+    action?: string;
+    // 请求上传接口
+    upload?: (formData: FormData) => Promise<any>;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    uploadClass: '',
+    uploadStyle: '',
+    id: '',
+    attrs: () => ({}),
+    tips: '',
+    modelValue: '',
+    accept: 'image/*',
+    multiple: false,
+    crop: false,
+    action: '/common/updateFile',
+    upload: async () => null
+  });
+
+  const state: any = reactive({
+    files: []
+  });
+
+  const emit = defineEmits(['update:modelValue', 'change']);
+
+  // const files = ref<any>(isArray(props.modelValue) ? props.modelValue : props.modelValue ? [{ imgUrl: props.modelValue }] : []);
+
+  // 删除图片
+  // const delImg = (src: any) => {
+  //   files.value = files.value.filter((item: any) => {
+  //     return item.imgUrl !== src.imgUrl;
+  //   });
+  // };
+
+  // const uploadClick = () => {
+  //   LayerById(layerId).show();
+  // };
+
+  // const update = () => {
+  //   emit('update:modelValue', isArray(props.modelValue) ? files.value : files.value.length > 0 ? files.value[0].imgUrl : '');
+  // };
+
+  const change = async (e: any = {}) => {
+    const files = e?.target?.files || [];
+    for (let i = 0; i < files.length; i++) {
+      const _file: any = files[i];
+
+      // 文件类型
+      let type = '';
+      if (_file.type === 'application/msword' || _file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
+        type = 'docx';
+      } else if (_file.type === 'application/vnd.ms-excel' || _file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
+        type = 'xlsx';
+      } else if (_file.type === 'application/vnd.openxmlformats-officedocument.presentationml.presentation') {
+        type = 'pptx';
+      } else if (_file.type === 'application/pdf') {
+        type = 'pdf';
+      } else if (_file.type === 'text/html') {
+        type = 'html';
+      } else if (_file.type.startsWith('image/') && _file.type !== 'image/vnd.adobe.photoshop') {
+        type = 'image';
+      }
+      const file: any = { name: _file.name, type, path: URL.createObjectURL(_file), url: await props.upload(_file) };
+      // 上传文件
+      state.files.push(file);
+
+      // if (isFunction(props.upload)) {
+      //   const src: any = await props.upload(_file);
+      //   if (src) {
+      //     file.src = src;
+      //   }
+      // }
+    }
+
+    // const _files = [];
+    // for (let i = 0; i < files.length; i++) {
+    //   const file = files[i];
+    //   const blob = URL.createObjectURL(file);
+    //   _files.push({ blob, file });
+    // }
+    // console.log(98, _files);
+    // for (let i = 0; i < _files.length; i++) {
+    //   let { file = '' } = _files[i];
+    //   // 若为图片,则进行压缩处理
+    //   if (/image/.test(file.type)) {
+    //     const _blob: any = await new Promise((resolve, reject) => {
+    //       new Compressor(file, {
+    //         quality: 1,
+    //         checkOrientation: false,
+    //         success: resolve,
+    //         maxWidth: 1000,
+    //         maxHeight: 700,
+    //         error: reject
+    //       });
+    //     });
+    //     const { name = '' }: any = _blob || {};
+    //     file = new File([_blob], name);
+    //   }
+    //   const formData = new FormData();
+    //   formData.append('file', file);
+    //   if (isFunction(props.upload)) {
+    //     const url: any = await props.upload(formData);
+    //     console.log(126, url);
+    //     if (url) {
+    //       files.value = [...files.value, { url }];
+    //     }
+    //   }
+    // }
+  };
+
+  // watch(
+  //   () => [props.modelValue, state.files],
+  //   (n: any, o: any) => {
+  //     if (n[0] !== o[0]) {
+  //       files.value = isArray(props.modelValue) ? props.modelValue : props.modelValue ? [{ imgUrl: props.modelValue }] : [];
+  //     }
+  //     if (n[1] !== o[1]) {
+  //       emit('update:modelValue', isArray(props.modelValue) ? files.value : files.value.length > 0 ? files.value[0].imgUrl : '');
+  //     }
+  //   },
+  //   { deep: true }
+  // );
+
+  // defineExpose({ change, uploadClick });
+</script>
+<style lang="scss">
+  .mc-upload {
+    flex-wrap: wrap;
+
+    .upload {
+      width: 8em;
+      height: 8em;
+      border-radius: 0.25em;
+      transition:
+        all 0.35s,
+        background-color 0s;
+      // background-color: #ffffff;
+      position: relative;
+
+      .input {
+        opacity: 0;
+        height: 100%;
+        width: 100%;
+      }
+      .input-icon {
+        line-height: 1.3;
+      }
+    }
+
+    &-img {
+      display: flex;
+      flex-direction: row;
+
+      &-item {
+        margin-right: 0.75rem;
+        margin-bottom: 0.75rem;
+      }
+    }
+  }
+</style>

package/src/components/form/index.ts

@@ -0,0 +1,82 @@
+import Input from './Input@v3.vue';
+import InputRange from './InputRange.vue';
+import Switch from './Switch.vue';
+import TextArea from './TextArea.vue';
+
+import Select from './Select@v3.vue';
+import SelectList from './SelectList.vue';
+import SelectTags from './SelectTags.vue';
+import SelectPicker from './SelectPicker.vue';
+import SearchSelect from './SearchSelect@v3.vue';
+import MoreSelect from './MoreSelect@v3.vue';
+import MoreSelectList from './MoreSelectList.vue';
+import MoreSelectTags from './MoreSelectTags.vue';
+import MoreSelectPicker from './MoreSelectPicker.vue';
+import SearchMoreSelect from './SearchMoreSelect.vue';
+import PageSelect from './PageSelect.vue';
+import SelectTree from './SelectTree/SelectTree@v1.vue';
+
+// import DateView from './DateView.vue';
+import DateView from './DateView@v2.vue';
+// import DateView from './DateView@v3.vue';
+import DateRangeView from './DateRangeView@v3.vue';
+import DatePicker from './DatePicker.vue';
+import TimePicker from './TimePicker.vue';
+import DateRangePicker from './DateRangePicker@v3.vue';
+import ImgUpload from './ImgUpload.vue';
+import Upload from './Upload.vue';
+import Cascader from './Cascader.vue';
+
+export {
+  Input,
+  InputRange,
+  Switch,
+  TextArea,
+  Select,
+  SelectList,
+  SelectTags,
+  SelectPicker,
+  SearchSelect,
+  PageSelect,
+  SelectTree,
+  MoreSelect,
+  MoreSelectList,
+  MoreSelectTags,
+  MoreSelectPicker,
+  SearchMoreSelect,
+  // 日期&时间
+  DateView,
+  DateRangeView,
+  DatePicker,
+  TimePicker,
+  DateRangePicker,
+  ImgUpload,
+  Upload,
+  Cascader
+};
+
+// 单选
+// Select      下拉选择 (默认)
+// SelectDrape 下拉选择 等同 Select
+// SelectPanel 面板选择
+// SelectLayer 弹层选择
+// SelectCards 卡片选择
+// SelectWheel 滚轮选择
+// SelectTags  标签选择
+
+// 多选
+// MultiSelectDrape 下拉选择 (默认)
+// MultiSelectPanel 面板选择
+// MultiSelectLayer 弹层选择
+// MultiSelectCards 卡片选择
+// MultiSelectWheel 滚轮选择
+// MultiSelectTags  标签选择
+
+// 日期
+// Date           日期选择核心
+// DateDrape      日期下拉选择
+// DatePanel      日期面板选择
+// DateLayer      日期弹层选择
+// DateWheel      日期滚轮选择
+
+// MultiDateView  多选日期