@utogether/udp-core 1.0.1-beta.4 → 1.0.1-beta.5

package/dist/{utogether-CFdIDuAT.js → utogether-DXDcsKt7.js}

@@ -1,6 +1,6 @@
 import { computed as W, ref as L } from "vue";
 import { useGlobal as g, storageLocal as u, deviceDetection as H, cookies as C, storageSession as M } from "@utogether/utils";
-import { y as P, j as E, s as j, g as h, v as d, z as J, l as K, m as R, n as V, u as S, r as G, o as O, A as x, B as Z } from "./index-CLliRySq.js";
+import { z as P, j as E, s as j, g as h, w as d, A as J, l as K, m as R, n as V, u as S, r as G, o as O, B as x, C as Z } from "./index-BDE4-ZvN.js";
 import { useI18n as f } from "vue-i18n";
 import { defineStore as v } from "pinia";
 function I() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@utogether/udp-core",
   "private": false,
-  "version": "1.0.1-beta.4",
+  "version": "1.0.1-beta.5",
   "description": "",
   "type": "module",
   "main1": "index.ts",

package/src/App.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <template>
-  <el-config-provider size="small" :z-index="12000" :locale="currentLocale">
+  <el-config-provider size="small" :z-index="5555" :locale="currentLocale">
     <router-view />
   </el-config-provider>
 </template>

package/src/api/index.ts

@@ -6,6 +6,7 @@
  * @Description: API封装
  */
 import { http } from '@utogether/utils';
+// import { http } from '../utils/udp/http';
 import { getEnv } from '../config';
 
 // 路由相关服务
@@ -20,7 +21,6 @@ export const getServiceApi = () => {
 
 export const setRouter = router => {
   http.setRouter(router);
-  console.log('====url', getBaseURL());
   // http.setBaseUrl(getBaseURL());
 };
 

package/src/components/udp/count-down.vue

@@ -0,0 +1,536 @@
+<template>
+  <div class="flip-clock">
+    <template v-for="data in timeData" :key="data.label">
+      <span v-show="data.show" :id="data.elementId" class="flip-clock__piece">
+        <div v-if="flipAnimation">
+          <span
+            class="flip-clock__card flip-card"
+            :style="countdownSize ? `font-size:${countdownSize}` : ''"
+          >
+            <b class="flip-card__top">{{ twoDigits(data.current) }}</b>
+            <b class="flip-card__bottom" :data-value="twoDigits(data.current)" />
+            <b class="flip-card__back" :data-value="twoDigits(data.previous)" />
+            <b class="flip-card__back-bottom" :data-value="twoDigits(data.previous)" />
+          </span>
+        </div>
+        <div v-else>
+          <span class="no-animation__card">{{ twoDigits(data.current) }}</span>
+        </div>
+        <span
+          v-if="showLabels"
+          class="flip-clock__slot"
+          :style="labelSize ? `font-size:${labelSize}` : ''"
+          >{{ data.label }}</span
+        >
+      </span>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'SuCountdown'
+};
+</script>
+
+<script setup lang="ts">
+import { computed, onBeforeMount, onMounted, onUnmounted, ref, watch } from 'vue';
+import dayjs from 'dayjs';
+
+const props = defineProps({
+  countdown: {
+    type: Boolean,
+    default: false
+  },
+  deadline: {
+    type: String,
+    required: false,
+    default: dayjs().add(5, 'days').format('YYYY-MM-DD HH:mm:ss')
+  },
+  deadlineISO: {
+    type: String,
+    required: false
+  },
+  deadlineDate: {
+    type: Date,
+    required: false
+  },
+  countdownSize: {
+    type: String,
+    required: false
+    // default:"2.2rem"
+  },
+
+  labelSize: {
+    type: String,
+    required: false
+    // default:"2.2rem"
+  },
+  stop: {
+    type: Boolean,
+    required: false
+  },
+  flipAnimation: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  showDays: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  showHours: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  showMinutes: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  showSeconds: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  showLabels: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  labels: {
+    type: Object,
+    required: false,
+    default: function () {
+      return {
+        days: 'Days',
+        hours: 'Hours',
+        minutes: 'Minutes',
+        seconds: 'Seconds'
+      };
+    }
+  },
+  mainColor: {
+    type: String,
+    default: '#EC685C'
+  },
+  secondFlipColor: {
+    type: String,
+    default: props => props.mainColor
+  },
+  mainFlipBackgroundColor: {
+    type: String,
+    default: '#222222'
+  },
+  secondFlipBackgroundColor: {
+    type: String,
+    default: '#393939'
+  },
+  labelColor: {
+    type: String,
+    default: '#222222'
+  }
+});
+
+const now = ref(Math.trunc(new Date().getTime() / 1000));
+const date = ref<number>(0);
+const interval = ref();
+const diff = ref(0);
+const show = ref(false);
+const timeData = ref([
+  {
+    current: 0,
+    previous: 0,
+    label: props.labels.days,
+    elementId: 'flip-card-days-' + Date.now(),
+    show: props.showDays
+  },
+  {
+    current: 0,
+    previous: 0,
+    label: props.labels.hours,
+    elementId: 'flip-card-hours-' + Date.now(),
+    show: props.showHours
+  },
+  {
+    current: 0,
+    previous: 0,
+    label: props.labels.minutes,
+    elementId: 'flip-card-minutes-' + Date.now(),
+    show: props.showMinutes
+  },
+  {
+    current: 0,
+    previous: 0,
+    label: props.labels.seconds,
+    elementId: 'flip-card-seconds-' + Date.now(),
+    show: props.showSeconds
+  }
+]);
+
+const updateAllCards = () => {
+  updateTime(0, days);
+  updateTime(1, hours);
+  updateTime(2, minutes);
+  updateTime(3, seconds);
+};
+
+const twoDigits = value => {
+  if (value != undefined) {
+    if (value.toString().length <= 1) {
+      return '0' + value.toString();
+    }
+    return value.toString();
+  } else {
+    return '00';
+  }
+};
+
+const updateTime = (idx, newValue) => {
+  if (idx >= timeData.value.length || newValue === undefined) {
+    return;
+  }
+
+  // if (window['requestAnimationFrame']) {
+  //     frame = requestAnimationFrame(updateTime.bind(this));
+  // }
+
+  const d = timeData.value[idx];
+  const val = newValue.value < 0 ? 0 : newValue.value;
+  const el = document.querySelector(`#${d.elementId}`);
+
+  if (val !== d.current) {
+    d.previous = d.current;
+    d.current = val;
+
+    if (el) {
+      el.classList.remove('flip');
+      // @ts-ignore
+      void el.offsetWidth;
+      el.classList.add('flip');
+    }
+
+    if (idx === 0) {
+      const els = el!.querySelectorAll('span b');
+      if (els) {
+        //@ts-ignore
+        for (const e of els) {
+          const cls = e.classList[0];
+          if (newValue.value / 1000 >= 1) {
+            if (!cls.includes('-4digits')) {
+              const newCls = cls + '-4digits';
+              e.classList.add(newCls);
+              e.classList.remove(cls);
+            }
+          } else {
+            if (cls.includes('-4digits')) {
+              const newCls = cls.replace('-4digits', '');
+              e.classList.add(newCls);
+              e.classList.remove(cls);
+            }
+          }
+        }
+      } else {
+        console.log('....');
+      }
+    }
+  }
+};
+
+const seconds = computed(() => {
+  if (props.countdown) {
+    return Math.trunc(diff.value) % 60;
+  }
+  return Math.trunc(now.value) % 60;
+});
+
+const minutes = computed(() => {
+  if (props.countdown) {
+    return Math.trunc(diff.value / 60) % 60;
+  }
+  return Math.trunc(now.value / 60) % 60;
+});
+const hours = computed(() => {
+  if (props.countdown) {
+    return Math.trunc(diff.value / 60 / 60) % 24;
+  }
+  return new Date(now.value * 1000).getHours();
+  // return Math.trunc(now.value / 60 / 60) % 24;
+});
+const days = computed(() => {
+  if (props.countdown) {
+    return Math.trunc(diff.value / 60 / 60 / 24);
+  }
+  return Math.trunc(now.value / 60 / 60 / 24);
+});
+
+watch(
+  () => props.deadline,
+  newVal => {
+    const endTime = newVal as unknown as String;
+    date.value = Math.trunc(Date.parse(endTime.replace(/-/g, '/')) / 1000);
+    if (!date.value) {
+      throw new Error("Invalid props value, correct the 'deadline'");
+    }
+  }
+);
+
+watch(now, () => {
+  if (props.countdown) {
+    diff.value = date.value - now.value;
+    if (diff.value <= 0 || props.stop) {
+      diff.value = 0;
+      updateTime(3, 0);
+    } else {
+      updateAllCards();
+    }
+  } else {
+    updateAllCards();
+  }
+});
+
+watch(diff, newVal => {
+  if (newVal == 0) {
+    // emit('timeElapsed');
+    updateAllCards();
+  }
+});
+
+onMounted(() => {
+  if (diff.value !== 0) {
+    show.value = true;
+  }
+});
+
+onBeforeMount(() => {
+  if (props.countdown) {
+    if (!props.deadline) {
+      throw new Error("Missing props 'deadline'");
+    }
+    const endTime = props.deadline;
+    let epoch = Date.parse(endTime.replace(/-/g, '/'));
+    if (props.deadlineDate != null) {
+      epoch = Date.parse(props.deadlineDate.toDateString());
+    }
+    if (props.deadlineISO) {
+      epoch = Date.parse(props.deadlineISO);
+    }
+    date.value = Math.trunc(epoch / 1000);
+    if (!date.value) {
+      throw new Error("Invalid props value, correct the 'deadline'");
+    }
+  }
+  interval.value = setInterval(() => {
+    now.value = Math.trunc(new Date().getTime() / 1000);
+  }, 1000);
+});
+
+onUnmounted(() => {
+  // if (window['cancelAnimationFrame']) {
+  //     cancelAnimationFrame(frame);
+  // }
+  clearInterval(interval.value);
+});
+</script>
+
+<style lang="scss">
+.no-animation__card {
+  font-weight: 500;
+  font-size: 2rem;
+  line-height: 1.5;
+  display: block;
+  color: v-bind(mainColor);
+}
+
+.flip-clock {
+  text-align: center;
+  perspective: 600px;
+  margin: 0 auto;
+
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+  }
+}
+
+.flip-clock__piece {
+  display: inline-block;
+  margin: 0 0.2vw;
+
+  @media (min-width: 1000px) {
+    margin: 0 5px;
+  }
+}
+
+.flip-clock__slot {
+  font-size: 1rem;
+  line-height: 1.5;
+  display: block;
+  color: v-bind(labelColor);
+}
+
+$halfHeight: 0.72em;
+$borderRadius: 0.15em;
+
+.flip-card {
+  display: block;
+  position: relative;
+  padding-bottom: $halfHeight;
+  font-size: 2.25rem;
+  line-height: 0.95;
+}
+
+@media (min-width: 1000px) {
+  .flip-clock__slot {
+    font-size: 1.2rem;
+  }
+
+  .flip-card {
+    font-size: 3rem;
+  }
+}
+
+.flip-card__top,
+.flip-card__bottom,
+.flip-card__back-bottom,
+.flip-card__back::before,
+.flip-card__back::after {
+  display: block;
+  height: $halfHeight;
+  color: v-bind(mainColor);
+  background: v-bind(mainFlipBackgroundColor);
+  padding: 0.23em 0.15em 0.4em;
+  border-radius: $borderRadius $borderRadius 0 0;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  transform-style: preserve-3d;
+  width: 2.1em;
+  height: $halfHeight;
+}
+
+.flip-card__top-4digits,
+.flip-card__bottom-4digits,
+.flip-card__back-bottom-4digits,
+.flip-card__back-4digits::before,
+.flip-card__back-4digits::after {
+  display: block;
+  height: $halfHeight;
+  color: v-bind(mainColor);
+  background: v-bind(mainFlipBackgroundColor);
+  padding: 0.23em 0.15em 0.4em;
+  border-radius: $borderRadius $borderRadius 0 0;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  transform-style: preserve-3d;
+  width: 2.65em;
+  height: $halfHeight;
+}
+
+.flip-card__bottom,
+.flip-card__back-bottom,
+.flip-card__bottom-4digits,
+.flip-card__back-bottom-4digits {
+  color: v-bind(secondFlipColor);
+  position: absolute;
+  top: 50%;
+  left: 0;
+  border-top: solid 1px #000;
+  background: v-bind(secondFlipBackgroundColor);
+  border-radius: 0 0 $borderRadius $borderRadius;
+  pointer-events: none;
+  overflow: hidden;
+  z-index: 2;
+}
+
+.flip-card__back-bottom,
+.flip-card__back-bottom-4digits {
+  z-index: 1;
+}
+
+.flip-card__bottom::after,
+.flip-card__back-bottom::after,
+.flip-card__bottom-4digits::after,
+.flip-card__back-bottom-4digits::after {
+  display: block;
+  margin-top: -$halfHeight;
+}
+
+.flip-card__back::before,
+.flip-card__bottom::after,
+.flip-card__back-bottom::after,
+.flip-card__back-4digits::before,
+.flip-card__bottom-4digits::after,
+.flip-card__back-bottom-4digits::after {
+  content: attr(data-value);
+}
+
+.flip-card__back,
+.flip-card__back-4digits {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  left: 0%;
+  pointer-events: none;
+}
+
+.flip-card__back::before,
+.flip-card__back-4digits::before {
+  position: relative;
+  overflow: hidden;
+  z-index: -1;
+}
+
+.flip .flip-card__back::before,
+.flip .flip-card__back-4digits::before {
+  z-index: 1;
+  animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
+  animation-fill-mode: both;
+  transform-origin: center bottom;
+}
+
+.flip .flip-card__bottom,
+.flip .flip-card__bottom-4digits {
+  transform-origin: center top;
+  animation-fill-mode: both;
+  animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
+}
+
+@keyframes flipTop {
+  0% {
+    transform: rotateX(0deg);
+    z-index: 2;
+  }
+
+  0%,
+  99% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: rotateX(-90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes flipBottom {
+  0%,
+  50% {
+    z-index: -1;
+    transform: rotateX(90deg);
+    opacity: 0;
+  }
+
+  51% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+    transform: rotateX(0deg);
+    z-index: 5;
+  }
+}
+</style>

package/src/components/udp/form.vue

@@ -0,0 +1,107 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2022-03-02 17:07:59
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-07-30 18:57:09
+ * @Description: SuForm
+-->
+
+<template>
+  <div class="width: 100%">
+    <vxe-form
+      ref="xForm"
+      v-model:collapse-status="collapseStatus"
+      :data="record"
+      :items="formItems"
+      :rules="rules"
+      :loading="loading"
+      :vertical="vertical"
+      title-align="right"
+      :title-width="titleWidth"
+    >
+      <template #dividerPrefix>
+        <div class="w-2 h-4 bg-amber-600">5555</div>
+      </template>
+      <template #collapseNode>
+        <div class="flex justify-start">
+          <vxe-checkbox
+            v-model="collapseStatus"
+            content="查看更多"
+            :checked-value="false"
+            :unchecked-value="true"
+            class="pl-10"
+          />
+        </div>
+      </template>
+    </vxe-form>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'UtForm'
+};
+</script>
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { ref, computed } from 'vue';
+// import { formatRules } from '@utogether/utils';
+import { formatItems, formatRules } from './utils';
+// import type { IRecord, IFormItemProps } from '../../types';
+
+export interface IProps {
+  record: IRecord; // 数据对象
+  items: Array<IFormItemProps>; // form item
+  loading?: boolean;
+  vertical?: boolean;
+  titleWidth?: number;
+  span?: number;
+  dataStatus?: string;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  record: (): IRecord => {
+    return {};
+  },
+  items: () => [],
+  loading: false,
+  vertical: false,
+  titleWidth: 100,
+  span: 6,
+  dataStatus: 'detail'
+});
+const xForm = ref(undefined);
+const { t } = useI18n();
+const collapseStatus = ref(true);
+/**
+ * @description: 根据items 获取必填选
+ */
+const rules = computed(() => {
+  if (!props.items.length) return {};
+  return formatRules(props.items, t);
+});
+
+const formItems = computed(() => {
+  if (!props.items.length) return props.items;
+  return formatItems(props.items, props.dataStatus, 6);
+});
+
+/**
+ * @deprecated
+ * @description 使用validate替换
+ * @param cb
+ */
+const validateForm = (cb: Function) => {
+  (xForm as any).value.validate(cb);
+};
+const validate = (cb: Function) => {
+  (xForm as any).value.validate(cb);
+  setTimeout(() => {
+    xForm.value.clearValidate();
+  }, 1600);
+};
+defineExpose({
+  validateForm,
+  validate
+});
+</script>

package/src/components/udp/index.ts

@@ -3,5 +3,8 @@ import FormUpload2 from './form-upload.vue';
 import utLov2 from './lov.vue';
 import UtModalGrid2 from './modal-grid.vue';
 import UtGrid2 from './grid.vue';
+import UtForm2 from './form.vue';
+import UtUpload2 from './upload.vue';
+import UtCountdown2 from './count-down.vue';
 
-export { UtGrid2, UtModalForm2, FormUpload2, utLov2, UtModalGrid2 };
+export { UtGrid2, UtModalForm2, FormUpload2, utLov2, UtModalGrid2, UtForm2, UtCountdown2, UtUpload2 };

package/src/components/udp/modal-form.vue

@@ -34,6 +34,14 @@
         />
       </template>
       <template #footer>
+        <vxe-checkbox
+          v-if="!url && dataStatus === 'add'"
+          v-model="continuous"
+          content="连续添加"
+          unchecked-value="0"
+          checked-value="1"
+          style="margin-right: 12px"
+        />
         <ut-button status="warning" content="cancel" icon="ri-close-line" @tap="onClose" />
         <ut-button status="u-cyan" content="confirm" icon="ri-save-3-line" @tap="onConfirm" />
       </template>
@@ -86,6 +94,7 @@ const props = withDefaults(defineProps<IProps>(), {
 
 const attrs: IRecord = getAttrs(useAttrs());
 
+const continuous = ref('0');
 const loading = ref(false);
 const instance = getCurrentInstance()!;