fit2cloud-ui-plus 0.0.1-beta.0

package/src/components/speed-dial/FuSpeedDialItem.vue

@@ -0,0 +1,88 @@
+<template>
+  <transition :css="false" @before-enter="beforeEnter" @enter="enter" @leave="leave">
+    <div v-if="isActive" class="fu-speed-dial-item" :style="itemSize">
+      <slot>
+        <fu-speed-dial-action-button :index="index" v-bind="$attrs" />
+      </slot>
+    </div>
+  </transition>
+</template>
+
+<script setup lang="ts">
+import {
+  inject,
+  computed
+} from 'vue'
+import FuSpeedDialActionButton from "@/components/speed-dial/FuSpeedDialActionButton.vue";
+defineOptions({ name: "FuSpeedDialItem" });
+const props = defineProps({
+  index: {
+    type: Number,
+    required: true
+  },
+})
+const FuSpeedDial = inject('FuSpeedDial')
+
+const config = computed(() => {
+  return FuSpeedDial.config;
+})
+
+const direction = computed(() => {
+  return FuSpeedDial.direction;
+})
+const isActive = computed(() => {
+  return FuSpeedDial.active;
+})
+
+const size = computed(() => {
+  return FuSpeedDial.size;
+})
+
+const spacing = computed(() => {
+  return config.value.item.spacing || 0;
+})
+
+const directionPosition = computed(() => {
+  if (["top", "left"].includes(direction.value)) {
+    return -config.value.fab.size - spacing.value
+  }
+  return config.value.fab.size + spacing.value
+})
+
+const itemSize = computed(() => {
+  let size = config.value.fab.size + "px";
+  return {
+    width: size,
+    height: size,
+  }
+})
+
+function setPosition(el: HTMLElement, position: any) {
+  if (["top", "bottom"].includes(direction.value)) {
+    el.style.transform = "translateY(" + position + ")"
+  } else {
+    el.style.transform = "translateX(" + position + ")"
+  }
+}
+function beforeEnter(el: HTMLElement) {
+  el.style.transition = "all 0.3s"
+  el.style.position = "absolute"
+  setPosition(el, 0)
+  el.style.opacity = "0"
+}
+function enter(el: HTMLElement, done: Function) {
+  let position = props.index * directionPosition.value + "px"
+  setTimeout(() => {
+    setPosition(el, position)
+    el.style.opacity = "1"
+    done()
+  })
+}
+function leave(el: HTMLElement, done: Function) {
+  setPosition(el, 0)
+  el.style.opacity = "0"
+  setTimeout(() => {
+    done()
+  }, 200)
+}
+</script>

package/src/components/speed-dial/index.ts

@@ -0,0 +1,11 @@
+import FuSpeedDial from "./FuSpeedDial.vue"
+import FuSpeedDialItem from "./FuSpeedDialItem.vue"
+
+import type { App } from 'vue'
+
+FuSpeedDial.install = (app: App): void => {
+  app.component(FuSpeedDial.name, FuSpeedDial)
+  app.component(FuSpeedDialItem.name, FuSpeedDialItem)
+}
+
+export default FuSpeedDial;

package/src/components/split-pane/FuSplitPane.vue

@@ -0,0 +1,228 @@
+<template>
+  <div :style="{ cursor, userSelect }" class="fu-split-pane" ref="outerWrapper">
+    <div :class="[`is-${direction}`, 'fu-split-pane__left']"
+      :style="{ [attr]: isReverse ? valueAnother : `${usedValue}px`, 'padding-right': padding }">
+      <slot :name="isHorizontal ? 'left' : 'top'"></slot>
+    </div>
+    <div :class="resizerClasses" :style="{ [resizerAttr]: `${usedValue}px`, ...resizerStyle }" @mousedown="onMouseDown"
+      @mouseover="hover = true" @mouseleave="hover = false">
+      <div class="icon" v-if="resizerType === 'resizer'">
+        <slot name="resizer">
+          <i class="el-icon-more"></i>
+        </slot>
+      </div>
+    </div>
+    <div :class="[`is-${direction}`, 'fu-split-pane__right']"
+      :style="{ [attr]: isReverse ? `${usedValue}px` : valueAnother, 'padding-left': padding }">
+      <slot :name="isHorizontal ? 'right' : 'bottom'"></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, watch, computed, nextTick, getCurrentInstance } from "vue";
+defineOptions({ name: "FuSplitPane" });
+const props = defineProps({
+  min: {
+    type: [Number, String],
+    default: "10px",
+  },
+  left: [Number, String],
+  right: [Number, String],
+  top: [Number, String],
+  bottom: [Number, String],
+  direction: {
+    validator: (val: string) => ["vertical", "horizontal"].includes(val),
+    default: "horizontal",
+  },
+  localKey: String,
+  resizable: {
+    type: Boolean,
+    default: true,
+  },
+  resizerType: {
+    validator: (val: string) => ["resizer", "line"].includes(val),
+    default: "resizer",
+  },
+  resizerClass: String,
+  resizerStyle: Object,
+  resizerHoverClass: String,
+
+});
+const emit = defineEmits(["changeSplit"])
+
+const instance = getCurrentInstance()
+
+const active = ref(false)
+const usedValue = ref(0)
+const oldValue = ref(0)
+const initOffset = ref(0)
+const hover = ref(false)
+
+watch(() => props.left, (newValue, oldValue) => {
+  if (newValue !== oldValue) {
+    nextTick(() => {
+      usedValue.value = defaultValue.value;
+    });
+  }
+}, { immediate: true })
+
+watch(() => props.bottom, (newValue, oldValue) => {
+  if (newValue !== oldValue) {
+    nextTick(() => {
+      usedValue.value = defaultValue.value;
+    });
+  }
+}, { immediate: true })
+
+
+const isReverse = computed(() => {
+  return props.right || props.bottom;
+})
+
+const isHorizontal = computed(() => {
+  return props.direction === "horizontal";
+})
+
+const userSelect = computed(() => {
+  return active.value ? "none" : "" as any
+})
+
+const cursor = computed(() => {
+  return active.value && props.resizable
+    ? isHorizontal.value
+      ? "col-resize"
+      : "row-resize"
+    : "";
+})
+
+const outerWrapperSize = computed(() => {
+  return instance.refs.outerWrapper[offsetSize.value];
+})
+
+const offsetSize = computed(() => {
+  return isHorizontal.value ? "offsetWidth" : "offsetHeight";
+})
+
+const defaultValue = computed(() => {
+  if (isHorizontal.value) {
+    return props.left
+      ? getMin(percentToValue(props.left))
+      : (props.right && getMin(percentToValue(props.right))) ||
+      outerWrapperSize.value / 2;
+  } else {
+    return props.top
+      ? getMin(percentToValue(props.top))
+      : (props.bottom && getMin(percentToValue(props.bottom))) ||
+      outerWrapperSize.value / 2;
+  }
+})
+const valueAnother = computed(() => {
+  return `calc(100% - ${usedValue.value}px)`;
+})
+
+const attr = computed(() => {
+  return isHorizontal.value ? "width" : "height";
+})
+
+const resizerAttr = computed(() => {
+  return isHorizontal.value
+    ? isReverse.value
+      ? "right"
+      : "left"
+    : isReverse.value
+      ? "bottom"
+      : "top" ;
+})
+const saveKey = computed(() => {
+  return "Fu-SP-" + props.localKey;
+})
+const resizerClasses = computed(() => {
+  const classes = [
+    `fu-split-pane__${props.resizerType}`,
+    `is-${props.direction}`,
+    props.resizable && "is-resizable",
+    props.resizerClass,
+    hover.value && (props.resizerHoverClass || "hover"),
+  ];
+  return classes;
+})
+const padding = computed(() => {
+  return props.resizerType === "resizer" && isHorizontal.value && "3px" as any;
+})
+
+
+
+function onMouseDown(e: MouseEvent) {
+  initOffset.value = isHorizontal.value ? e.pageX : e.pageY;
+  oldValue.value = usedValue.value;
+  active.value = true;
+  document.addEventListener("mousemove", onMouseMove);
+  document.addEventListener("mouseup", onMouseUp);
+}
+function onMouseUp() {
+  active.value = false;
+  document.removeEventListener("mousemove", onMouseMove);
+  document.removeEventListener("mouseup", onMouseUp);
+  emit("changeSplit", usedValue.value);
+}
+function onMouseMove(e: MouseEvent) {
+  if (!props.resizable) return;
+  if (active.value) {
+    const currentPage = isHorizontal.value ? e.pageX : e.pageY;
+    const offset = currentPage - initOffset.value;
+    const value = isReverse.value
+      ? oldValue.value - offset
+      : oldValue.value + offset;
+    if (
+      value > percentToValue(props.min) &&
+      value < outerWrapperSize.value - percentToValue(props.min)
+    ) {
+      usedValue.value = value;
+      writeValue();
+    }
+  }
+}
+// 百分比换算成像素
+function percentToValue(val: any) {
+  const size = instance.refs.outerWrapper[offsetSize.value];
+  if (typeof val === "string" && val.includes("%")) {
+    return (parseInt(val) / 100) * size;
+  } else {
+    return parseInt(val);
+  }
+}
+// 是否取最小值
+function getMin(val: any) {
+  return val < percentToValue(props.min)
+    ? percentToValue(props.min)
+    : val;
+}
+// localStorage储存数值
+function writeValue() {
+  const obj = {
+    [resizerAttr.value]: usedValue.value,
+  };
+  if (props.localKey) {
+    localStorage.setItem(saveKey.value, JSON.stringify(obj));
+  }
+}
+
+function readValue() {
+  if (props.localKey) {
+    const local = localStorage.getItem(saveKey.value);
+    if (local && local[resizerAttr.value]) {
+      usedValue.value = parseInt(local) || defaultValue.value;
+    } else {
+      usedValue.value = defaultValue.value;
+    }
+  } else {
+    usedValue.value = defaultValue.value;
+  }
+}
+
+onMounted(() => {
+  readValue()
+});
+</script>
+

package/src/components/split-pane/index.ts

@@ -0,0 +1,8 @@
+import FuSplitPane from './FuSplitPane.vue';
+
+import type { App } from 'vue'
+FuSplitPane.install = (app: App): void => {
+  app.component(FuSplitPane.name, FuSplitPane);
+};
+
+export default FuSplitPane;

package/src/components/steps/FuHorizontalNavigation.vue

@@ -0,0 +1,18 @@
+<template>
+  <el-steps :active="stepper.index" v-bind="stepper">
+    <el-step v-for="(step, index) in steps" :key="index" v-bind="step" @click.native="click(index)"
+      :class="disable(index) && 'fu-step--disable'" />
+  </el-steps>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  stepper: Object,
+  steps: Array,
+  disable: Function,
+})
+const emit = defineEmits(["active"])
+function click(index: number) {
+  (!props.disable(index)) && emit("active", index);
+}
+</script>

package/src/components/steps/FuHorizontalSteps.vue

@@ -0,0 +1,94 @@
+<script>
+import FuHorizontalNavigation from "./FuHorizontalNavigation";
+import FuStepsFooter from "./FuStepsFooter";
+import { Step, Stepper } from "./Stepper";
+
+export default {
+  name: "FuHorizontalSteps",
+  components: { FuHorizontalNavigation, FuStepsFooter },
+  data() {
+    return {
+      stepper: new Stepper(),
+    };
+  },
+  created() {
+    this.stepper.activeSet.add(0);
+  },
+  provide() {
+    return {
+      stepper: this.stepper,
+    };
+  },
+  watch: {
+    "stepper.index"(value) {
+      this.$emit("change", this.stepper.steps[value]);
+    },
+  },
+  computed: {
+    heightStyle() {
+      return {
+        height: parseInt(this.stepper?.height) + "px" || "auto",
+      };
+    },
+  },
+  render(h) {
+    // let currentNode;
+    let steps = [];
+    if (this.$slots.default) {
+      this.$slots.default.forEach((node, index) => {
+        const options = {
+          index: index,
+          ...node.data.attrs,
+        };
+        const step = new Step(options);
+        steps.push(step);
+        // if (this.stepper.isCurrent(index)) {
+        //   currentNode = node;
+        // }
+      });
+    }
+    this.stepper.steps = steps;
+    this.stepper = Object.assign(this.stepper, this.$attrs);
+    return (
+      <div class="fu-steps fu-steps--horizontal">
+        <fu-horizontal-navigation
+          stepper={this.stepper}
+          steps={steps}
+          disable={this.disable}
+          vOn:active={this.active} />
+        <div class="fu-steps__wrapper">
+          <div class="fu-steps__container" style={this.heightStyle}>
+            <transition name="carousel" mode="out-in">
+              {this._l(
+                this.$slots.default,
+                (item, index) => this.stepper.index === index && item
+              )}
+            </transition>
+          </div>
+        </div>
+        <div class="fu-steps__footer">
+          {this.$slots.footer || <fu-steps-footer vOn:stepperFn={this.$func} />}
+        </div>
+      </div>
+    );
+  },
+
+  methods: {
+    active(index) {
+      this.stepper.active(index);
+    },
+    next() {
+      this.stepper.next();
+    },
+    prev() {
+      this.stepper.prev();
+    },
+    disable(index) {
+      return !this.stepper.isActive(index);
+    },
+    $func(name) {
+      this.$emit(name);
+    },
+  },
+};
+</script>

package/src/components/steps/FuStep.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="fu-step" v-loading="loading">
+    <slot/>
+  </div>
+</template>
+<script lang="ts" setup>
+import { inject, computed } from 'vue'
+defineOptions({ name: "FuStep" });
+const stepper = inject('stepper')
+const loading = computed(() => {
+  return stepper?.isLoading || false;
+})
+</script>

package/src/components/steps/FuSteps.vue

@@ -0,0 +1,22 @@
+<script lang="ts">
+import { defineComponent, h } from 'vue'
+import FuHorizontalSteps from "./FuHorizontalSteps";
+import FuVerticalSteps from "./FuVerticalSteps";
+
+export default defineComponent({
+    name: 'FuSteps',
+    props: ["direction"],
+    setup(props, context) {
+        const { direction } = props
+        return () => {
+            if (direction === "vertical") {
+                return h(FuVerticalSteps, context.attrs, context.slots)
+            } else {
+                return h(FuHorizontalSteps, context.attrs, context.slots)
+            }
+        }
+    }
+
+})
+</script>
+

package/src/components/steps/FuStepsFooter.ts

@@ -0,0 +1,79 @@
+import {
+  defineComponent,
+  h,
+  inject,
+  ref,
+  computed
+} from 'vue'
+export default defineComponent({
+  name: "FuStepsFooter",
+  setup(props, { emit }) {
+    const stepper = inject('stepper')
+    const disabledButton = ref(false)
+
+    const isFirst = computed(() => {
+      return stepper.isFirst(stepper.index);
+    })
+    const isLast = computed(() => {
+      return stepper.isLast(stepper.index);
+    })
+
+    const showCancel = computed(() => {
+      return stepper.showCancel !== false;
+    })
+
+    const disabled = computed(() => {
+      return stepper?.isLoading || disabledButton.value;
+    })
+    const button = (value: string) => {
+      return h(
+        'el-button',
+        {
+          disabled: disabled,
+          size: stepper.buttonSize,   // configSize
+          onClick: () => clickHandle(value)
+        },
+        stepper[`${value}ButtonText`]
+      );
+    };
+
+    function clickHandle(fnName: string) {
+      stepper[fnName]
+        ? stepper[fnName]()
+        : emit("stepperFn", fnName);
+      disabledButton.value = true;
+      setTimeout(() => {
+        disabledButton.value = false;
+      }, 500);
+    }
+    return () => {
+      return h(
+        'div',
+        {
+          class: `fu-steps__footer--${stepper.footerAlign}`,
+        },
+        [
+          h(
+            'div',
+            {
+              class: 'fu-steps__footer--block',
+              style: 'margin-right:10px'
+            },
+            showCancel && button("cancel")
+          ),
+          h(
+            'div',
+            {
+              class: 'fu-steps__footer--block',
+            },
+            [
+              !isFirst && button("prev"),
+              isLast ? button("finish") : button("next")
+            ]
+          ),
+        ]
+      );
+    }
+  }
+})
+

package/src/components/steps/FuVerticalNavigation.vue

@@ -0,0 +1,35 @@
+<template>
+  <el-steps :active="stepper.index" v-bind="stepper">
+    <el-step v-for="(step, i) in steps" :key="i" v-bind="step" @click="click(i)"
+      :class="disable(i) && 'fu-step--disable'">
+      <template #description>
+        <span>{{ step.description }}</span>
+        <el-collapse-transition>
+          <div class="fu-steps__container" v-if="i === stepper.index" :style="heightStyle">
+            <slot v-bind:step="step"></slot>
+          </div>
+        </el-collapse-transition>
+      </template>
+    </el-step>
+  </el-steps>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+const props = defineProps({
+  stepper: Object,
+  steps: Array,
+  disable: Function,
+})
+const emit = defineEmits(["active"])
+
+const heightStyle = computed(() => {
+  return {
+    height: parseInt(props.stepper?.height) + "px" || "auto",
+  };
+})
+
+function click(index: number) {
+  !props.disable(index) && emit("active", index);
+}
+</script>

package/src/components/steps/FuVerticalSteps.vue

@@ -0,0 +1,79 @@
+<script>
+import FuVerticalNavigation from "./FuVerticalNavigation.vue";
+import FuStepsFooter from "./FuStepsFooter";
+import { Stepper, Step } from "./Stepper";
+
+export default {
+  name: "FuVerticalSteps",
+  components: { FuVerticalNavigation, FuStepsFooter },
+  data() {
+    return {
+      stepper: new Stepper(),
+    };
+  },
+  created() {
+    this.stepper.activeSet.add(0);
+  },
+  provide() {
+    return {
+      stepper: this.stepper,
+    };
+  },
+  watch: {
+    "stepper.index"(value) {
+      this.$emit("change", this.stepper.steps[value]);
+    },
+  },
+  render() {
+    let currentNode;
+    let steps = [];
+    if (this.$slots.default) {
+      this.$slots.default.forEach((node, index) => {
+        const options = {
+          index: index,
+          ...node.data.attrs,
+        };
+        const step = new Step(options);
+        steps.push(step);
+        if (this.stepper.isCurrent(index)) {
+          currentNode = node;
+        }
+      });
+    }
+    this.stepper.steps = steps;
+    this.stepper = Object.assign(this.stepper, this.$attrs);
+    return (
+      <div class="fu-steps fu-steps--vertical">
+        <fu-vertical-navigation
+          stepper={this.stepper}
+          steps={steps}
+          v-on:active={this.active}
+          disable={this.disable} >
+          {currentNode}
+        </fu-vertical-navigation>
+        <div class="fu-steps__footer">
+          <fu-steps-footer vOn:stepperFn={this.$func} />
+        </div>
+      </div>
+    );
+  },
+
+  methods: {
+    active(index) {
+      this.stepper.active(index);
+    },
+    next() {
+      this.stepper.next();
+    },
+    prev() {
+      this.stepper.prev();
+    },
+    disable(index) {
+      return !this.stepper.isActive(index);
+    },
+    $func(name) {
+      this.$emit(name);
+    },
+  },
+};
+</script>