@utogether/udp-core 1.0.0 → 1.0.1-beta.10

package/src/components/ReFlop/src/Filpper.tsx

@@ -1,99 +0,0 @@
-/*
- * @Author: wei.li
- * @Date: 2022-05-26 10:25:57
- * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-04-16 14:12:03
- * @Description: file content
- */
-import { defineComponent, ref } from 'vue';
-import propTypes from '@/utils/propTypes';
-import './filpper.css';
-
-const props = {
-  // front paper text
-  // 前牌文字
-  frontText: propTypes.number.def(0),
-  // back paper text
-  // 后牌文字
-  backText: propTypes.number.def(1),
-  // flipping duration, please be consistent with the CSS animation-duration value.
-  // 翻牌动画时间，与CSS中设置的animation-duration保持一致
-  duration: propTypes.number.def(600)
-};
-
-export default defineComponent({
-  name: 'SuFlop',
-  props,
-  setup(props) {
-    const { frontText, backText, duration } = props;
-    const isFlipping = ref(false);
-    const flipType = ref('down');
-    const frontTextFromData = ref(frontText);
-    const backTextFromData = ref(backText);
-
-    const textClass = (number: number) => {
-      return 'number' + number;
-    };
-
-    const flip = (type: string, front: number, back: number) => {
-      // 如果处于翻转中，则不执行
-      if (isFlipping.value) return false;
-      frontTextFromData.value = front;
-      backTextFromData.value = back;
-      // 根据传递过来的type设置翻转方向
-      flipType.value = type;
-      // 设置翻转状态为true
-      isFlipping.value = true;
-
-      setTimeout(() => {
-        // 设置翻转状态为false
-        isFlipping.value = false;
-        frontTextFromData.value = back;
-      }, duration);
-    };
-
-    // 下翻牌
-    const flipDown = (front: any, back: any): void => {
-      flip('down', front, back);
-    };
-
-    // 上翻牌
-    const flipUp = (front: any, back: any): void => {
-      flip('up', front, back);
-    };
-
-    // 设置前牌文字
-    function setFront(text: number): void {
-      frontTextFromData.value = text;
-    }
-
-    // 设置后牌文字
-    const setBack = (text: number): void => {
-      backTextFromData.value = text;
-    };
-
-    return {
-      flipType,
-      isFlipping,
-      frontTextFromData,
-      backTextFromData,
-      textClass,
-      flipDown,
-      flipUp,
-      setFront,
-      setBack
-    };
-  },
-
-  render() {
-    const main = `m-flipper ${this.flipType} ${this.isFlipping ? 'go' : ''}`;
-    const front = `digital front ${this.textClass(this.frontTextFromData)}`;
-    const back = `digital back ${this.textClass(this.backTextFromData)}`;
-    return (
-      <div class={main}>
-        <div class={front} />
-        <div class={back} />
-      </div>
-    );
-  }
-});

package/src/components/ReFlop/src/filpper.css

@@ -1,184 +0,0 @@
-.m-flipper {
-  display: inline-block;
-  position: relative;
-  width: 60px;
-  height: 100px;
-  line-height: 100px;
-  border: solid 1px #000;
-  border-radius: 10px;
-  background: #fff;
-  font-size: 66px;
-  color: #fff;
-  box-shadow: 0 0 6px rgb(0 0 0 / 50%);
-  text-align: center;
-  font-family: 'Helvetica Neue';
-}
-
-.m-flipper .digital::before,
-.m-flipper .digital::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  background: #000;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-
-.m-flipper .digital::before {
-  top: 0;
-  bottom: 50%;
-  border-radius: 10px 10px 0 0;
-  border-bottom: solid 1px #666;
-}
-
-.m-flipper .digital::after {
-  top: 50%;
-  bottom: 0;
-  border-radius: 0 0 10px 10px;
-  line-height: 0;
-}
-
-/* 向下翻 */
-.m-flipper.down .front::before {
-  z-index: 3;
-}
-
-.m-flipper.down .back::after {
-  z-index: 2;
-  transform-origin: 50% 0%;
-  transform: perspective(160px) rotateX(180deg);
-}
-
-.m-flipper.down .front::after,
-.m-flipper.down .back::before {
-  z-index: 1;
-}
-
-.m-flipper.down.go .front::before {
-  transform-origin: 50% 100%;
-  animation: frontFlipDown 0.6s ease-in-out both;
-  box-shadow: 0 -2px 6px rgb(255 255 255 / 30%);
-  backface-visibility: hidden;
-}
-
-.m-flipper.down.go .back::after {
-  animation: backFlipDown 0.6s ease-in-out both;
-}
-
-/* 向上翻 */
-.m-flipper.up .front::after {
-  z-index: 3;
-}
-
-.m-flipper.up .back::before {
-  z-index: 2;
-  transform-origin: 50% 100%;
-  transform: perspective(160px) rotateX(-180deg);
-}
-
-.m-flipper.up .front::before,
-.m-flipper.up .back::after {
-  z-index: 1;
-}
-
-.m-flipper.up.go .front::after {
-  transform-origin: 50% 0;
-  animation: frontFlipUp 0.6s ease-in-out both;
-  box-shadow: 0 2px 6px rgb(255 255 255 / 30%);
-  backface-visibility: hidden;
-}
-
-.m-flipper.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-flipper .number0::before,
-.m-flipper .number0::after {
-  content: '0';
-}
-
-.m-flipper .number1::before,
-.m-flipper .number1::after {
-  content: '1';
-}
-
-.m-flipper .number2::before,
-.m-flipper .number2::after {
-  content: '2';
-}
-
-.m-flipper .number3::before,
-.m-flipper .number3::after {
-  content: '3';
-}
-
-.m-flipper .number4::before,
-.m-flipper .number4::after {
-  content: '4';
-}
-
-.m-flipper .number5::before,
-.m-flipper .number5::after {
-  content: '5';
-}
-
-.m-flipper .number6::before,
-.m-flipper .number6::after {
-  content: '6';
-}
-
-.m-flipper .number7::before,
-.m-flipper .number7::after {
-  content: '7';
-}
-
-.m-flipper .number8::before,
-.m-flipper .number8::after {
-  content: '8';
-}
-
-.m-flipper .number9::before,
-.m-flipper .number9::after {
-  content: '9';
-}

package/src/components/ReFlop/src/index.vue

@@ -1,126 +0,0 @@
-<script setup lang="ts">
-import { ref, unref, nextTick, onUnmounted } from 'vue';
-import { templateRef } from '@vueuse/core';
-import flippers from './filpper';
-
-const timer = ref(null);
-const flipObjs = ref([]);
-
-const flipperHour1 = templateRef<HTMLElement | null>('flipperHour1', null);
-const flipperHour2 = templateRef<HTMLElement | null>('flipperHour2', null);
-const flipperMinute1 = templateRef<HTMLElement | null>('flipperMinute1', null);
-const flipperMinute2 = templateRef<HTMLElement | null>('flipperMinute2', null);
-const flipperSecond1 = templateRef<HTMLElement | null>('flipperSecond1', null);
-const flipperSecond2 = templateRef<HTMLElement | null>('flipperSecond2', null);
-
-// 初始化数字
-const init = () => {
-  const now = new Date();
-  const nowTimeStr = formatDate(new Date(now.getTime()), 'hhiiss');
-  for (let i = 0; i < flipObjs.value.length; i++) {
-    flipObjs?.value[i]?.setFront(nowTimeStr[i]);
-  }
-};
-
-// 开始计时
-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 < flipObjs.value.length; i++) {
-      if (nowTimeStr[i] === nextTimeStr[i]) {
-        continue;
-      }
-      flipObjs?.value[i]?.flipDown(nowTimeStr[i], nextTimeStr[i]);
-    }
-  }, 1000);
-};
-
-// 正则格式化日期
-const formatDate = (date: Date, dateFormat: string) => {
-  /* 单独格式化年份，根据y的字符数量输出年份
-     * 例如：yyyy => 2019
-            yy => 19
-            y => 9
-     */
-  if (/(y+)/.test(dateFormat)) {
-    dateFormat = dateFormat.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
-  }
-  // 格式化月、日、时、分、秒
-  const o = {
-    'm+': date.getMonth() + 1,
-    'd+': date.getDate(),
-    'h+': date.getHours(),
-    'i+': date.getMinutes(),
-    's+': date.getSeconds()
-  };
-  for (const k in o) {
-    if (new RegExp(`(${k})`).test(dateFormat)) {
-      // 取出对应的值
-      const str = o[k] + '';
-      /* 根据设置的格式，输出对应的字符
-       * 例如: 早上8时，hh => 08，h => 8
-       * 但是，当数字>=10时，无论格式为一位还是多位，不做截取，这是与年份格式化不一致的地方
-       * 例如: 下午15时，hh => 15, h => 15
-       */
-      dateFormat = dateFormat.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str));
-    }
-  }
-  return dateFormat;
-};
-
-// 日期时间补零
-const padLeftZero = (str: string | any[]) => {
-  return ('00' + str).substr(str.length);
-};
-
-nextTick(() => {
-  flipObjs.value = [
-    unref(flipperHour1),
-    unref(flipperHour2),
-    unref(flipperMinute1),
-    unref(flipperMinute2),
-    unref(flipperSecond1),
-    unref(flipperSecond2)
-  ];
-
-  init();
-  run();
-});
-
-onUnmounted(() => {
-  if (timer.value) {
-    clearInterval(timer.value);
-    timer.value = null;
-  }
-});
-</script>
-
-<template>
-  <div class="flip-clock">
-    <flippers ref="flipperHour1" />
-    <flippers ref="flipperHour2" />
-    <em>:</em>
-    <flippers ref="flipperMinute1" />
-    <flippers ref="flipperMinute2" />
-    <em>:</em>
-    <flippers ref="flipperSecond1" />
-    <flippers ref="flipperSecond2" />
-  </div>
-</template>
-
-<style>
-.flip-clock .m-flipper {
-  margin: 0 3px;
-}
-
-.flip-clock em {
-  display: inline-block;
-  font-size: 66px;
-  font-style: normal;
-  line-height: 102px;
-  vertical-align: top;
-}
-</style>

package/src/components/ReFlowChart/index.ts

@@ -1,24 +0,0 @@
-/*
- * @Author: wei.li
- * @Date: 2022-05-26 10:25:57
- * @LastEditors: wei.li
- * @LastEditTime: 2022-08-24 13:38:17
- * @Description: file content
- */
-import { withInstall } from '@utogether/utils';
-import control from './src/Control.vue';
-import nodePanel from './src/NodePanel.vue';
-import dataDialog from './src/DataDialog.vue';
-
-/** LogicFlow流程图-控制面板 */
-const Control = withInstall(control);
-
-/** LogicFlow流程图-拖拽面板 */
-const NodePanel = withInstall(nodePanel);
-
-/** LogicFlow流程图-查看数据 */
-const DataDialog = withInstall(dataDialog);
-
-export { Control, NodePanel, DataDialog };
-
-// LogicFlow流程图文档：http://logic-flow.org/

package/src/components/ReFlowChart/src/Control.vue

@@ -1,139 +0,0 @@
-<script setup lang="ts">
-import { ref, unref, onMounted } from 'vue';
-import { LogicFlow } from '@logicflow/core';
-
-interface Props {
-  lf: LogicFlow;
-  catTurboData?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  lf: null
-});
-
-const emit = defineEmits<{
-  (e: 'catData'): void;
-}>();
-
-const controlButton3 = ref();
-const controlButton4 = ref();
-
-const focusIndex = ref<Number>(-1);
-const titleLists = ref([
-  {
-    icon: 'icon-zoom-out-hs',
-    text: '缩小',
-    size: '18',
-    disabled: false
-  },
-  {
-    icon: 'icon-enlarge-hs',
-    text: '放大',
-    size: '18',
-    disabled: false
-  },
-  {
-    icon: 'icon-full-screen-hs',
-    text: '适应',
-    size: '15',
-    disabled: false
-  },
-  {
-    icon: 'icon-previous-hs',
-    text: '上一步',
-    size: '15',
-    disabled: true
-  },
-  {
-    icon: 'icon-next-step-hs',
-    text: '下一步',
-    size: '17',
-    disabled: true
-  },
-  {
-    icon: 'icon-download-hs',
-    text: '下载图片',
-    size: '17',
-    disabled: false
-  },
-  {
-    icon: 'icon-watch-hs',
-    text: '查看数据',
-    size: '17',
-    disabled: false
-  }
-]);
-
-const onControl = (item, key) => {
-  ['zoom', 'zoom', 'resetZoom', 'undo', 'redo', 'getSnapshot'].forEach((v, i) => {
-    const domControl = props.lf;
-    if (key === 1) {
-      domControl.zoom(true);
-    }
-    if (key === 6) {
-      emit('catData');
-    }
-    if (key === i) {
-      domControl[v]();
-    }
-  });
-};
-
-const onEnter = key => {
-  focusIndex.value = key;
-};
-
-onMounted(() => {
-  props.lf.on('history:change', ({ data: { undoAble, redoAble } }) => {
-    unref(titleLists)[3].disabled = unref(controlButton3).disabled = !undoAble;
-    unref(titleLists)[4].disabled = unref(controlButton4).disabled = !redoAble;
-  });
-});
-</script>
-
-<template>
-  <div class="control-container">
-    <!-- 功能按钮 -->
-    <ul>
-      <li
-        v-for="(item, key) in titleLists"
-        :key="key"
-        :title="item.text"
-        class="dark:text-bg_color"
-        @mouseenter.prevent="onEnter(key)"
-        @mouseleave.prevent="focusIndex = -1"
-      >
-        <el-tooltip :content="item.text" :visible="focusIndex === key" placement="right">
-          <button
-            :ref="'controlButton' + key"
-            :disabled="item.disabled"
-            :style="{
-              cursor: item.disabled === false ? 'pointer' : 'not-allowed',
-              color: item.disabled === false ? '' : '#00000040',
-              background: 'transparent'
-            }"
-            @click="onControl(item, key)"
-          >
-            <span :class="'iconfont ' + item.icon" :style="{ fontSize: `${item.size}px` }" />
-          </button>
-        </el-tooltip>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<style scoped>
-.control-container {
-  background: hsl(0deg 0% 100% / 80%);
-  box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
-}
-
-.control-container ul li {
-  margin: 10px;
-  text-align: center;
-}
-
-.control-container ul li span:hover {
-  color: var(--el-color-primary);
-}
-</style>

package/src/components/ReFlowChart/src/DataDialog.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import VueJsonPretty from 'vue-json-pretty';
-import 'vue-json-pretty/lib/styles.css';
-
-const props = defineProps({
-  graphData: Object
-});
-</script>
-
-<template>
-  <vue-json-pretty :path="'res'" :deep="3" :show-length="true" :data="props.graphData" />
-</template>