@neatui/nuxt 0.1.0

package/src/components/form/DateView@v3.vue

@@ -0,0 +1,471 @@
+<template>
+  <div ui-date="@a" class="fekit-date-view pr" :class="`${frame ? 'b-solid bk-line b-xs r-sm' : ''}`" ui-flex="col xy" style="width: 31em; height: 24.5em">
+    <div class="flex-block" ui-flex="row xy">
+      <div style="width: 20em; height: 100%">
+        <div ui-date-head="" class="h-xs+ flex-fixed nx-sl mt-ss ny-ss b-solid bk-back -bb-xs" ui-flex="row xm">
+          <div ui-flex="row lm" class="o-lm">
+            <div ui-btn="@a s none :square" @click="prev('y')">
+              <Icon name="double-arrow-left" />
+            </div>
+            <div ui-btn="@a s none :square" @click="prev('m')">
+              <Icon name="arrow-left" />
+            </div>
+          </div>
+          <div ui-flex="row cm" class="nx-ss-sub">
+            <div ui-flex="row cm" class="nx-ss-sub">
+              <p class="nx-ss-sub nowrap" ui-flex="row cm" ui-btns="@a none xs">
+                <b @click="setPanelType('year')">{{ state.curr.y }}年</b>
+                <b @click="setPanelType('month')">{{ state.curr.m }}月</b>
+              </p>
+            </div>
+          </div>
+          <div ui-flex="row rm" class="o-lm">
+            <div ui-btn="@a s none :square" @click="next('m')">
+              <Icon name="arrow-right" />
+            </div>
+            <div ui-btn="@a s none :square" @click="next('y')">
+              <Icon name="double-arrow-right" />
+            </div>
+          </div>
+        </div>
+        <div ui-date-body="" class="flex-block pr">
+          <div class="full nb-sm">
+            <ul ui-flex="row am" class="fs-xs nx-sm nt-sm">
+              <li class="flex-block ac"><span>日</span></li>
+              <li class="flex-block ac"><span>一</span></li>
+              <li class="flex-block ac"><span>二</span></li>
+              <li class="flex-block ac"><span>三</span></li>
+              <li class="flex-block ac"><span>四</span></li>
+              <li class="flex-block ac"><span>五</span></li>
+              <li class="flex-block ac"><span>六</span></li>
+            </ul>
+            <ul ui-date-days="" ui-flex="col xm" class="flex-wrap nx-sm">
+              <li v-for="(week, idx) in state.curr.days" :key="idx" :ui-date-week="idx + 1" class="flex-block" ui-flex="row am" style="margin-bottom: -0.25em">
+                <div v-for="(item, i) in week" :key="i" class="pr flex-block nb-sm" ui-flex="col xy">
+                  <div
+                    v-if="item.day"
+                    :ui-date-day="item.day"
+                    class="flex-block"
+                    :class="`${item.range ? 'bg-main-xs' : ''} ${item.sta ? 'r-lt-sl r-lb-sl' : ''} ${item.end ? 'r-rt-sl r-rb-sl' : ''}`"
+                    ui-flex="col cm"
+                    @click="change(item)"
+                    @mouseenter="setRangeValue(item)"
+                  >
+                    <div
+                      ui-flex="col cm"
+                      class="r-sm b-solid bk-none b-xs my-ss ux-scale"
+                      style="width: 1.8em; height: 1.8em"
+                      :class="`${item.isLastMonth || item.isNextMonth ? 'co-idle' : item.isHoliday ? 'co-risk' : ''} ${
+                        item.selected ? 'active bg-main-lm co-fore' : 'hover-bg-weak'
+                      }`"
+                    >
+                      <span>{{ item.day }}</span>
+                    </div>
+                  </div>
+                  <div class="pa full-x lh-xs ny-ss ob-no ol-no nowrap s-ml bold" style="transform-origin: 50% 100%" ui-flex="row ct" v-html="extras(item)"></div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div style="width: 11em" class="flex-fixed b-solid bk-back bl-xs" ui-flex="col xy">
+        <div ui-date-head="" class="h-xs+ flex-fixed nx-sl mt-ss ny-ss b-solid bk-back -bb-xs" ui-flex="row cm">
+          <div ui-flex="row cm" class="nx-ss-sub">
+            <div ui-flex="row cm" class="nx-ss-sub">
+              <p class="nx-ss-sub nowrap" ui-flex="row cm" ui-btns="@a none xs">
+                <b @click="setPanelType('year')">时间</b>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div ui-date-body="" class="flex-block pr nl-ss n-ss-sub ac">
+          <div class="full" ui-row="mob-8">
+            <div class="full" ui-scroll=":y" style="padding-bottom: 15.2em">
+              <ul ui-btns="@a none s :block">
+                <li>00</li>
+                <li>01</li>
+                <li>02</li>
+                <li>03</li>
+                <li>04</li>
+                <li>05</li>
+                <li>06</li>
+                <li>07</li>
+                <li>08</li>
+                <li>09</li>
+                <li>10</li>
+                <li>11</li>
+                <li>12</li>
+                <li>13</li>
+                <li>14</li>
+                <li>15</li>
+                <li>16</li>
+                <li>17</li>
+                <li>18</li>
+                <li>19</li>
+                <li>20</li>
+                <li>21</li>
+                <li>22</li>
+                <li>23</li>
+              </ul>
+            </div>
+            <div class="full" ui-scroll=":y" style="padding-bottom: 15.2em">
+              <ul ui-btns="@a none s :block">
+                <li>00</li>
+                <li>01</li>
+                <li>02</li>
+                <li>03</li>
+                <li>04</li>
+                <li>05</li>
+                <li>06</li>
+                <li>07</li>
+                <li>08</li>
+                <li>09</li>
+
+                <li>10</li>
+                <li>11</li>
+                <li>12</li>
+                <li>13</li>
+                <li>14</li>
+                <li>15</li>
+                <li>16</li>
+                <li>17</li>
+                <li>18</li>
+                <li>19</li>
+
+                <li>20</li>
+                <li>21</li>
+                <li>22</li>
+                <li>23</li>
+                <li>24</li>
+                <li>25</li>
+                <li>26</li>
+                <li>27</li>
+                <li>28</li>
+                <li>29</li>
+
+                <li>30</li>
+                <li>31</li>
+                <li>32</li>
+                <li>33</li>
+                <li>34</li>
+                <li>35</li>
+                <li>36</li>
+                <li>37</li>
+                <li>38</li>
+                <li>39</li>
+
+                <li>40</li>
+                <li>41</li>
+                <li>42</li>
+                <li>43</li>
+                <li>44</li>
+                <li>45</li>
+                <li>46</li>
+                <li>47</li>
+                <li>48</li>
+                <li>49</li>
+
+                <li>50</li>
+                <li>51</li>
+                <li>52</li>
+                <li>53</li>
+                <li>54</li>
+                <li>55</li>
+                <li>56</li>
+                <li>57</li>
+                <li>58</li>
+                <li>59</li>
+              </ul>
+            </div>
+            <div class="full" ui-scroll=":y" style="padding-bottom: 15.2em">
+              <ul ui-btns="@a none s :block">
+                <li>00</li>
+                <li>01</li>
+                <li>02</li>
+                <li>03</li>
+                <li>04</li>
+                <li>05</li>
+                <li>06</li>
+                <li>07</li>
+                <li>08</li>
+                <li>09</li>
+
+                <li>10</li>
+                <li>11</li>
+                <li>12</li>
+                <li>13</li>
+                <li>14</li>
+                <li>15</li>
+                <li>16</li>
+                <li>17</li>
+                <li>18</li>
+                <li>19</li>
+
+                <li>20</li>
+                <li>21</li>
+                <li>22</li>
+                <li>23</li>
+                <li>24</li>
+                <li>25</li>
+                <li>26</li>
+                <li>27</li>
+                <li>28</li>
+                <li>29</li>
+
+                <li>30</li>
+                <li>31</li>
+                <li>32</li>
+                <li>33</li>
+                <li>34</li>
+                <li>35</li>
+                <li>36</li>
+                <li>37</li>
+                <li>38</li>
+                <li>39</li>
+
+                <li>40</li>
+                <li>41</li>
+                <li>42</li>
+                <li>43</li>
+                <li>44</li>
+                <li>45</li>
+                <li>46</li>
+                <li>47</li>
+                <li>48</li>
+                <li>49</li>
+
+                <li>50</li>
+                <li>51</li>
+                <li>52</li>
+                <li>53</li>
+                <li>54</li>
+                <li>55</li>
+                <li>56</li>
+                <li>57</li>
+                <li>58</li>
+                <li>59</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="tools" ui-date-foot="" ui-flex="row xm" class="flex-fixed nx-sl ny-sl b-solid bk-line-mm bt-xs">
+      <div ui-flex="row lm" class="nl-ss">
+        <p v-if="state.panel" ui-flex="row lm">
+          <span ui-btn="@a xs none" class="nx-ss" @click="setPanelType('date')">{{ state.panel }}</span>
+          <span v-if="!state.isNoTime" ui-btn="@a xs none" class="nx-ss" @click="setPanelType('time')"> {{ state.time.h }}:{{ state.time.m }}:{{ state.time.s }} </span>
+        </p>
+        <div v-else-if="state.shortcuts?.length" ui-flex="row lm">
+          <div class="mr-sm-sub nx-sl-sub ny-ss-sub lh-ss nowrap fs-ss dib-sub" ui-scroll=":x y:hidden">
+            <p v-for="(item, idx) in state.shortcuts" :key="idx" class="bg-main-xs co-main r-xl" ui-btn="@a xs none :round" @click="item?.func">{{ item?.text }}</p>
+            <p class="bg-main-xs co-main r-xl" ui-btn="@a xs none :round"><Icon class="co-main" name="more" /></p>
+          </div>
+        </div>
+        <div>&nbsp;</div>
+      </div>
+      <div class="ml-sm-sub" ui-flex="row rm">
+        <button v-if="state.panel" ui-btn="@a xs none" class="nx-ss co-risk" @click="remove">清除</button>
+        <button v-if="state.panel && !state.isNoTime" ui-btn="@a xs none" class="nx-ss co-main" @click="update">确定</button>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { computed, reactive, watch } from 'vue';
+  import { idate, isDateString, isObject, isString } from '@fekit/utils';
+  import { Icon } from '../basic';
+
+  // 创建日期
+  const cDate = (date: any = null) => {
+    return isDateString(date) ? new Date(date) : new Date();
+  };
+
+  // 快捷预设
+  const shortcutsList: any = {
+    yesterday: {
+      text: '昨天',
+      func() {
+        change({ date: idate(new Date().setDate(new Date().getDate() - 1)).format('YYYY-MM-DD') });
+      }
+    },
+    today: {
+      text: '今天',
+      func() {
+        change({ date: idate(new Date()).format('YYYY-MM-DD') });
+      }
+    },
+    tomorrow: {
+      text: '明天',
+      func() {
+        change({ date: idate(new Date().setDate(new Date().getDate() + 1)).format('YYYY-MM-DD') });
+      }
+    }
+  };
+
+  const emits: any = defineEmits(['update:modelValue', 'change', 'update']);
+  interface TimeProps {
+    h: boolean | number;
+    m?: boolean | number;
+    s?: boolean | number;
+  }
+  interface Props {
+    modelValue?: string | number;
+    frame: boolean;
+    tools?: boolean;
+    range?: boolean;
+    format?: string;
+    picker?: 'date' | 'week' | 'month' | 'quarter';
+    holiday?: object;
+    shortcuts?: Array<'yesterday' | 'today' | 'tomorrow'>;
+    extras?: (item: any) => string;
+    time?: boolean | TimeProps;
+  }
+  const props: any = withDefaults(defineProps<Props>(), {
+    // 值
+    modelValue: '',
+    // 是否显示框架
+    frame: false,
+    // 是否是示工具
+    tools: true,
+    // 时间范围
+    range: false,
+    // 面板类型
+    picker: 'date',
+    // 额外内容
+    extras: (item: any) => {
+      return `<i class="dib o-ms mb-xs r-xl ${item.today ? 'bg-main' : 'bg-none'}" style="width:.6em; height:.6em;"></i>`;
+    },
+    // 快捷选择
+    shortcuts: () => ['yesterday', 'today', 'tomorrow'],
+    // 数据格式化
+    format: 'YYYY-MM-DD',
+    // 节假日
+    holiday: () => ({}),
+    time: false
+  });
+
+  // 内部数据
+  const state: any = reactive({
+    // 面板显示时间
+    panel: '',
+    // 当前时间计算
+    curr: computed(() => {
+      const date = idate(state.panel);
+      const days = date.calendar({ group: true, value: [state.panel] });
+      const { y = 0, M: m = 0, d = 0 } = date.attr || {};
+      return { days, y, m, d };
+    }),
+    type: 'date',
+    // 值
+    value: '',
+    // 快捷选择
+    shortcuts: computed(() => {
+      return props.shortcuts.map((item: any) => {
+        return isString(item) ? shortcutsList[item] : item;
+      });
+    }),
+    // 时间
+    time: {
+      h: '00',
+      m: '00',
+      s: '00'
+    },
+    isNoTime: computed(() => {
+      if (isObject(props.time)) {
+        return !(props.time.h || props.time.m || props.time.s);
+      } else {
+        return props.time;
+      }
+    })
+  });
+
+  watch(
+    () => props.modelValue,
+    (value: any) => {
+      // 面板显示日期
+      state.panel = value || '';
+      // 值
+      state.value = value || '';
+      // 时间
+    },
+    { deep: true, immediate: true }
+  );
+
+  // 更新时间
+  const upload = (a: any = 'm', b: any = 1) => {
+    const date = cDate(state.panel);
+    if (a === 'm') {
+      date.setMonth(date.getMonth() + b);
+    } else {
+      date.setFullYear(date.getFullYear() + b);
+    }
+    return idate(date).format(props.format);
+  };
+
+  // 日期前翻
+  const prev = (type: any = 'm') => {
+    state.panel = upload(type, -1);
+  };
+  // 日期后翻
+  const next = (type: any = 'm') => {
+    state.panel = upload(type, 1);
+  };
+
+  // 向外通信
+  const change = (item: any) => {
+    state.panel = item ? idate(item.date).format(props.format) : item;
+    emits('change', state.value);
+    if (state.isNoTime) {
+      console.log('这是没有时间的');
+      update();
+    }
+  };
+
+  // 清空日期
+  const remove = () => {
+    state.panel = '';
+    update();
+  };
+
+  // 更新数据
+  const update = () => {
+    emits('update:modelValue', state.panel);
+    emits('update', state.panel);
+  };
+
+  // 设置范围
+  const setRangeValue = (item: any) => {};
+  // 设置面板类型
+  const setPanelType = (type: any) => {
+    state.type = type;
+  };
+  // 设置年份
+  const setYear = (y: any) => {
+    state.type = 'month';
+  };
+  // 设置月份
+  const setMonth = (m: any) => {
+    state.type = 'date';
+  };
+</script>
+<style lang="scss">
+  @keyframes am-editing {
+    0%,
+    20% {
+      opacity: 1;
+    }
+    40%,
+    60% {
+      opacity: 0;
+    }
+    80%,
+    100% {
+      opacity: 1;
+    }
+  }
+  .am-editing {
+    animation: am-editing 1s linear infinite;
+  }
+</style>

package/src/components/form/EditUpload.vue

@@ -0,0 +1,4 @@
+<template>
+  <div>upload</div>
+</template>
+<script setup lang="ts"></script>

package/src/components/form/ImgUpload.vue

@@ -0,0 +1,174 @@
+<template>
+  <div ui-flex="row" class="mc-upload">
+    <template v-if="files && files.length > 0">
+      <draggable :list="files" @update="update" :force-fallback="false" item-key="name" chosen-class="chosen" animation="200" class="mc-upload-img">
+        <template #item="{ element, index }">
+          <div class="mc-upload-img-item">
+            <Image :src="element" :files="files" :initialSlide="index" v-bind="$attrs" @delImg="delImg" />
+          </div>
+        </template>
+      </draggable>
+    </template>
+    <template v-if="(!multiple && files && files.length === 0) || (multiple && (!limit || (limit && files && files.length < limit)))">
+      <slot>
+        <div ui-flex="row cm" ui-form="@a type:upload tips:hover" :class="`upload bg-fore b-solid bk-case b-xs mb-sl ${uploadClass}`" :style="uploadStyle">
+          <div v-if="tips" ui-form-tips>
+            {{ tips }}
+          </div>
+          <input v-if="!crop" type="file" class="pa input" :multiple="multiple" @change="change" />
+          <div v-else class="input pa" @click="uploadClick"></div>
+          <div class="co-note ac input-icon">
+            <i class="icon icon-upload fs-mm"></i>
+            <div class="fs-ss">上传图片</div>
+          </div>
+        </div>
+      </slot>
+    </template>
+
+    <Layer :id="layerId" am="as">
+      <PhotoEditor :layerId="layerId" :action="action" @fileChange="uploadImg"></PhotoEditor>
+    </Layer>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, watch } from 'vue';
+  import { Image, PhotoEditor } from '../display';
+  import draggable from 'vuedraggable';
+  import Compressor from 'compressorjs';
+  import { Layer, LayerById } from '../basic';
+  import { isArray } from '@fekit/utils';
+
+  const layerId = Math.random().toString(36).slice(-6);
+
+  interface Props {
+    limit: number; // 文件限制数量
+    uploadFn: (action: string, formData: FormData) => Promise<string>; // 上传图片接口
+    uploadClass?: string;
+    uploadStyle?: string;
+    id?: string;
+    tips?: string; // 提示文案
+    modelValue?: string | any[];
+    accept?: string; // 文件类型
+    multiple?: boolean; // 是否可以上传多个文件
+    crop?: boolean; // 是否需要抠图处理
+    action?: string; // 上传路径
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    uploadClass: '',
+    uploadStyle: '',
+    id: '',
+    tips: '',
+    modelValue: '',
+    accept: 'image/*',
+    multiple: false,
+    crop: false,
+    action: '/common/updateFile'
+  });
+
+  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 ({ target: { files: _filesList = [] } = {} }: any = {}) => {
+    const _files = [];
+    for (let i = 0; i < _filesList.length; i++) {
+      const file = _filesList[i];
+      const blob = URL.createObjectURL(file);
+      _files.push({ blob, file });
+    }
+
+    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);
+      }
+      uploadImg(file);
+    }
+  };
+
+  // 上传图片
+  const uploadImg = async (file: any) => {
+    const formData = new FormData();
+    formData.append('file', file);
+    const imgUrl = await props.uploadFn(props.action, formData);
+    if (imgUrl) files.value = [...files.value, { imgUrl }];
+  };
+
+  watch(
+    () => [props.modelValue, files.value],
+    (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>