@utogether/udp-core 1.0.1-beta.9 → 1.0.2

package/src/components/udp/flip-down/FlipCard/flip-card.vue

@@ -1,251 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import type { FlipCardHandleInterface } from './interfaces';
-
-const { initFrontText, initBackText, duration } = defineProps({
-  // 初始前牌文字
-  initFrontText: { type: [String, Number], default: '0' },
-  // 初始后牌文字
-  initBackText: { type: [String, Number], default: '1' },
-  // 翻牌动画时间，与CSS中设置的animation-duration保持一致
-  duration: { type: Number, default: 600 }
-});
-// 是否正在翻转中
-const isFlipping = ref(false);
-// 翻转类型，down=向下翻转，up=向上翻转
-const flipType = ref<string>('down');
-// 前牌文字
-const frontText = ref<string | number>(initFrontText);
-// 后牌文字
-const backText = ref<string | number>(initBackText);
-// 翻转
-const flip = ({
-  type,
-  newFrontText,
-  newBackText
-}: {
-  type: string;
-  newFrontText: string | number;
-  newBackText: string | number;
-}) => {
-  if (isFlipping.value) {
-    return false;
-  }
-  frontText.value = newFrontText;
-  backText.value = newBackText;
-  flipType.value = type;
-  isFlipping.value = true;
-
-  setTimeout(() => {
-    frontText.value = newBackText;
-    isFlipping.value = false;
-  }, duration);
-};
-
-defineExpose<FlipCardHandleInterface>({
-  // 下翻牌
-  flipDown: (newFrontText, newBackText) => {
-    flip({ type: 'down', newFrontText, newBackText });
-  },
-  // 上翻牌
-  flipUp: (newFrontText, newBackText) => {
-    flip({ type: 'up', newFrontText, newBackText });
-  }
-});
-</script>
-
-<template>
-  <div class="M-FlipCard" :class="{ down: flipType === 'down', up: flipType === 'up', go: isFlipping }">
-    <div class="digital front" :class="'number' + frontText" />
-    <div class="digital back" :class="'number' + backText" />
-  </div>
-</template>
-
-<style scoped>
-.M-FlipCard {
-  display: inline-block;
-  position: relative;
-  width: 36px;
-  height: 60px;
-  line-height: 60px;
-  border: solid 1px #222;
-  border-radius: 10px;
-  background: #fff;
-  font-size: 46px;
-  font-weight: 700;
-  color: #ec685c;
-  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
-  text-align: center;
-  /* font-family: 'Helvetica Neue'; */
-}
-
-.M-FlipCard .digital:before,
-.M-FlipCard .digital:after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  /* background: #000; */
-  background: #222;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-
-.M-FlipCard .digital:before {
-  top: 0;
-  bottom: 50%;
-  border-radius: 10px 10px 0 0;
-  /* border-bottom: solid 1px #666; */
-}
-
-.M-FlipCard .digital:after {
-  top: 50%;
-  bottom: 0;
-  border-radius: 0 0 10px 10px;
-  line-height: 0;
-}
-
-/*向下翻*/
-.M-FlipCard.down .front:before {
-  z-index: 3;
-}
-
-.M-FlipCard.down .back:after {
-  z-index: 2;
-  transform-origin: 50% 0%;
-  transform: perspective(160px) rotateX(180deg);
-}
-
-.M-FlipCard.down .front:after,
-.M-FlipCard.down .back:before {
-  z-index: 1;
-}
-
-.M-FlipCard.down.go .front:before {
-  transform-origin: 50% 100%;
-  animation: frontFlipDown 0.6s ease-in-out both;
-  box-shadow: 0 -2px 6px rgba(255, 255, 255, 0.3);
-  backface-visibility: hidden;
-}
-
-.M-FlipCard.down.go .back:after {
-  animation: backFlipDown 0.6s ease-in-out both;
-}
-
-/*向上翻*/
-.M-FlipCard.up .front:after {
-  z-index: 3;
-}
-
-.M-FlipCard.up .back:before {
-  z-index: 2;
-  transform-origin: 50% 100%;
-  transform: perspective(160px) rotateX(-180deg);
-}
-
-.M-FlipCard.up .front:before,
-.M-FlipCard.up .back:after {
-  z-index: 1;
-}
-
-.M-FlipCard.up.go .front:after {
-  transform-origin: 50% 0;
-  animation: frontFlipUp 0.6s ease-in-out both;
-  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.3);
-  backface-visibility: hidden;
-}
-
-.M-FlipCard.up.go .back:before {
-  animation: backFlipUp 0.6s ease-in-out both;
-}
-
-@keyframes frontFlipDown {
-  0% {
-    transform: perspective(160px) rotateX(0deg);
-  }
-
-  100% {
-    transform: perspective(160px) rotateX(-180deg);
-  }
-}
-
-@keyframes backFlipDown {
-  0% {
-    transform: perspective(160px) rotateX(180deg);
-  }
-
-  100% {
-    transform: perspective(160px) rotateX(0deg);
-  }
-}
-
-@keyframes frontFlipUp {
-  0% {
-    transform: perspective(160px) rotateX(0deg);
-  }
-
-  100% {
-    transform: perspective(160px) rotateX(180deg);
-  }
-}
-
-@keyframes backFlipUp {
-  0% {
-    transform: perspective(160px) rotateX(-180deg);
-  }
-
-  100% {
-    transform: perspective(160px) rotateX(0deg);
-  }
-}
-
-.M-FlipCard .number0:before,
-.M-FlipCard .number0:after {
-  content: '0';
-}
-
-.M-FlipCard .number1:before,
-.M-FlipCard .number1:after {
-  content: '1';
-}
-
-.M-FlipCard .number2:before,
-.M-FlipCard .number2:after {
-  content: '2';
-}
-
-.M-FlipCard .number3:before,
-.M-FlipCard .number3:after {
-  content: '3';
-}
-
-.M-FlipCard .number4:before,
-.M-FlipCard .number4:after {
-  content: '4';
-}
-
-.M-FlipCard .number5:before,
-.M-FlipCard .number5:after {
-  content: '5';
-}
-
-.M-FlipCard .number6:before,
-.M-FlipCard .number6:after {
-  content: '6';
-}
-
-.M-FlipCard .number7:before,
-.M-FlipCard .number7:after {
-  content: '7';
-}
-
-.M-FlipCard .number8:before,
-.M-FlipCard .number8:after {
-  content: '8';
-}
-
-.M-FlipCard .number9:before,
-.M-FlipCard .number9:after {
-  content: '9';
-}
-</style>

package/src/components/udp/flip-down/FlipCard/interfaces.ts

@@ -1,4 +0,0 @@
-export interface FlipCardHandleInterface {
-  flipDown: (newFrontText: string | number, newBackText: string | number) => void;
-  flipUp: (newFrontText: string | number, newBackText: string | number) => void;
-}

package/src/components/udp/flip-down/FlipClock/flip-clock.vue

@@ -1,113 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import FlipCard from '../FlipCard/flip-card.vue';
-import type { FlipCardHandleInterface } from '../FlipCard/interfaces.ts';
-
-const timer = ref<ReturnType<typeof setInterval> | null>(null);
-
-const flipCardHour1Ref = ref<FlipCardHandleInterface | null>(null);
-const flipCardHour2Ref = ref<FlipCardHandleInterface | null>(null);
-const flipCardMinute1Ref = ref<FlipCardHandleInterface | null>(null);
-const flipCardMinute2Ref = ref<FlipCardHandleInterface | null>(null);
-const flipCardSecond1Ref = ref<FlipCardHandleInterface | null>(null);
-const flipCardSecond2Ref = ref<FlipCardHandleInterface | null>(null);
-
-const flipCards = [
-  flipCardHour1Ref,
-  flipCardHour2Ref,
-  flipCardMinute1Ref,
-  flipCardMinute2Ref,
-  flipCardSecond1Ref,
-  flipCardSecond2Ref
-];
-
-onMounted(() => {
-  // 开始计时
-  const run = () => {
-    timer.value = setInterval(() => {
-      // 获取当前时间
-      const now = new Date();
-      const nowTimeStr = formatDate(new Date(now.getTime() - 1000), 'hhiiss');
-      const nextTimeStr = formatDate(now, 'hhiiss');
-      for (let i = 0; i < flipCards.length; i++) {
-        if (nowTimeStr[i] === nextTimeStr[i]) {
-          continue;
-        }
-        flipCards[i].value?.flipDown(nowTimeStr[i], nextTimeStr[i]);
-      }
-    }, 1000);
-  };
-  run();
-});
-
-// 正则格式化日期
-const formatDate = (date: Date, dateFormat: string) => {
-  /* 单独格式化年份，根据y的字符数量输出年份
-       * 例如：yyyy => 2019
-              yy => 19
-              y => 9
-       */
-  const yearMatch = dateFormat.match(/(y+)/);
-  if (yearMatch) {
-    dateFormat = dateFormat.replace(yearMatch[0], (date.getFullYear() + '').slice(-yearMatch[0].length));
-  }
-  // 格式化月、日、时、分、秒
-  const formatMap: Record<string, number> = {
-    'm+': date.getMonth() + 1,
-    'd+': date.getDate(),
-    'h+': date.getHours(),
-    'i+': date.getMinutes(),
-    's+': date.getSeconds()
-  };
-  for (const key in formatMap) {
-    const match = dateFormat.match(new RegExp(`(${key})`));
-    if (match) {
-      // 取出对应的值
-      const str = formatMap[key] + '';
-      /* 根据设置的格式，输出对应的字符
-       * 例如: 早上8时，hh => 08，h => 8
-       * 但是，当数字>=10时，无论格式为一位还是多位，不做截取，这是与年份格式化不一致的地方
-       * 例如: 下午15时，hh => 15, h => 15
-       */
-      dateFormat = dateFormat.replace(match[0], match[0].length === 1 ? str : str.padStart(2, '0'));
-    }
-  }
-
-  return dateFormat;
-};
-
-// 初始化
-const now = new Date();
-const initNowTimeStr = formatDate(new Date(now.getTime()), 'hhiiss');
-</script>
-
-<template>
-  <div className="FlipClock">
-    <FlipCard ref="flipCardHour1Ref" :init-front-text="initNowTimeStr[0]" />
-    <FlipCard ref="flipCardHour2Ref" :init-front-text="initNowTimeStr[1]" />
-    <em>:</em>
-    <FlipCard ref="flipCardMinute1Ref" :init-front-text="initNowTimeStr[2]" />
-    <FlipCard ref="flipCardMinute2Ref" :init-front-text="initNowTimeStr[3]" />
-    <em>:</em>
-    <FlipCard ref="flipCardSecond1Ref" :init-front-text="initNowTimeStr[4]" />
-    <FlipCard ref="flipCardSecond2Ref" :init-front-text="initNowTimeStr[5]" />
-  </div>
-</template>
-
-<style scoped>
-.FlipClock {
-  text-align: center;
-}
-
-.FlipClock .M-FlipCard {
-  margin: 0 3px;
-}
-
-.FlipClock em {
-  display: inline-block;
-  line-height: 55px;
-  font-size: 42px;
-  font-style: normal;
-  vertical-align: top;
-}
-</style>