fit2cloud-ui-plus 1.0.9 → 1.1.0

package/src/components/ steps/FuHorizontalSteps.vue

@@ -0,0 +1,103 @@
+<script lang="ts">
+import { ref, watch, defineComponent, h, computed, Transition, provide } from 'vue';
+import FuHorizontalNavigation from './FuHorizontalNavigation.vue';
+import FuStepsFooter from './FuStepsFooter';
+import { Step, Stepper } from './Stepper';
+
+export default defineComponent({
+  name: 'FuHorizontalSteps',
+  components: {
+    FuHorizontalNavigation,
+    FuStepsFooter,
+  },
+
+  emits: ['change'],
+
+  setup(_, { attrs, slots, emit, expose }) {
+    const stepper: any = ref(new Stepper());
+    stepper.value?.activeSet.add(0);
+
+    watch(
+      () => stepper.value.index,
+      (value) => {
+        emit('change', stepper.value.steps[value]);
+      }
+    );
+
+    const heightStyle = computed(() => {
+      return { height: parseInt(stepper.value?.height) + 'px' || 'auto' };
+    });
+
+    function active(index: number) {
+      stepper.value?.active(index);
+    }
+
+    function disable(index: number) {
+      return !stepper.value?.isActive(index);
+    }
+
+    function next() {
+      stepper.value.next();
+    }
+    function prev() {
+      stepper.value.prev();
+    }
+    function $func(name: any) {
+      emit(name);
+    }
+    provide('stepper', stepper.value);
+
+    expose({
+      next,
+      prev,
+      active,
+    });
+    return () => {
+      let steps: any = [];
+      if (slots.default?.()) {
+        slots.default?.().forEach((node, index) => {
+          const options = {
+            index: index,
+            ...node.props,
+          };
+          const step = new Step(options);
+          steps.push(step);
+        });
+      }
+      stepper.value.steps = steps;
+
+      stepper.value = Object.assign(stepper.value, attrs);
+      return h(
+        'div',
+        {
+          class: ['fu-steps', 'fu-steps--horizontal'],
+        },
+        [
+          h(FuHorizontalNavigation, {
+            stepper: stepper.value,
+            steps: steps,
+            disable: disable,
+            onActive: active,
+          }),
+          h(
+            'div',
+            { class: 'fu-steps__wrapper' },
+            h(
+              'div',
+              { class: 'fu-steps__container', style: heightStyle.value },
+
+              h(Transition, { name: 'carousel', mode: 'out-in', tag: 'p' }, () =>
+                slots.default?.().map((item: any, index) => {
+                  item['key'] = index;
+                  return stepper.value.index === index && item;
+                })
+              )
+            )
+          ),
+          h('div', { class: 'fu-steps__footer' }, slots.footer?.() || h(FuStepsFooter, { onStepperFn: $func })),
+        ]
+      );
+    };
+  },
+});
+</script>

package/src/components/ steps/FuStep.vue

@@ -0,0 +1,11 @@
+<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: any = inject('stepper')
+const loading = computed(() => stepper.isLoading || false)
+</script>

package/src/components/ steps/FuStepButton.vue

@@ -0,0 +1,8 @@
+<template>
+  <el-button v-bind="$attrs">
+    <slot />
+  </el-button>
+</template>
+<script lang="ts" setup>
+
+</script>

package/src/components/ steps/FuSteps.vue

@@ -0,0 +1,43 @@
+<script lang="ts">
+import { defineComponent, h, ref } from 'vue';
+import FuHorizontalSteps from './FuHorizontalSteps.vue';
+import FuVerticalSteps from './FuVerticalSteps.vue';
+
+export default defineComponent({
+  name: 'FuSteps',
+  components: {
+    FuHorizontalSteps,
+    FuVerticalSteps,
+  },
+  emits: ['change'],
+  props: ['direction'],
+  setup(props, { attrs, slots, emit, expose }) {
+    const { direction } = props;
+    const FuSteps = ref<typeof FuHorizontalSteps | typeof FuVerticalSteps>();
+    function next() {
+      FuSteps.value?.next();
+    }
+    function prev() {
+      FuSteps.value?.prev();
+    }
+
+    function active(index: number) {
+      FuSteps.value?.active(index);
+    }
+
+    function handleChange({ id, title, index }: any) {
+      emit('change', { id, title, index });
+    }
+    expose({
+      next,
+      prev,
+      active,
+    });
+    if (direction === 'vertical') {
+      return () => h(FuVerticalSteps, { ref: FuSteps, onChange: handleChange, ...attrs }, slots);
+    } else {
+      return () => h(FuHorizontalSteps, { ref: FuSteps, onChange: handleChange, ...attrs }, slots);
+    }
+  },
+});
+</script>

package/src/components/ steps/FuStepsFooter.ts

@@ -0,0 +1,75 @@
+import { defineComponent, h, inject, ref, computed } from "vue";
+import FuStepButton from "./FuStepButton.vue";
+export default defineComponent({
+  name: "FuStepsFooter",
+  components: {
+    FuStepButton,
+  },
+  emits: ["stepperFn"],
+  setup(props, { emit }) {
+    const stepper: any = 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;
+    });
+
+    function clickHandle(fnName: string) {
+      stepper[fnName] ? stepper[fnName]() : emit("stepperFn", fnName);
+      disabledButton.value = true;
+      setTimeout(() => {
+        disabledButton.value = false;
+      }, 500);
+    }
+    const button = (value: string) => {
+      return h(
+        FuStepButton,
+        {
+          disabled: disabled.value,
+          size: stepper.buttonSize,
+          onClick: () => clickHandle(value),
+        },
+        () => stepper[`${value}ButtonText`]
+      );
+    };
+    return () =>
+      h(
+        "div",
+        {
+          class: `fu-steps__footer--${stepper.footerAlign}`,
+        },
+        [
+          h(
+            "div",
+            {
+              class: "fu-steps__footer--block",
+              style: "margin-right:10px",
+            },
+            [showCancel.value && button("onCancel")]
+          ),
+          h(
+            "div",
+            {
+              class: "fu-steps__footer--block",
+            },
+            [
+              !isFirst.value && button("prev"),
+              isLast.value ? button("onFinish") : button("next"),
+            ]
+          ),
+        ]
+      );
+  },
+});

package/src/components/ steps/FuVerticalNavigation.vue

@@ -0,0 +1,41 @@
+<template>
+  <el-steps :active="active" v-bind="stepper" direction="vertical" >
+    <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 === active" :style="heightStyle">
+            <slot v-bind:step="step"></slot>
+          </div>
+        </el-collapse-transition>
+      </template>
+    </el-step>
+  </el-steps>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import { computed } from "vue";
+import {Step} from "@/components/ steps/Stepper";
+const props = defineProps({
+  stepper: Object,
+  steps: Array as PropType<Step[]>,
+  disable: Function as PropType<(index: number) => boolean>
+})
+const emit = defineEmits(["active"])
+
+const active = computed(() => {
+  return props.stepper!.index
+})
+
+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,94 @@
+<script lang="ts">
+import { ref, watch, defineComponent, h,provide } from 'vue'
+import FuVerticalNavigation from "./FuVerticalNavigation.vue";
+import FuStepsFooter from "./FuStepsFooter";
+import { Stepper, Step } from "./Stepper";
+
+export default defineComponent({
+  name: "FuVerticalSteps",
+  components: { FuVerticalNavigation, FuStepsFooter },
+
+  emits: ['change'],
+
+  setup(_, { attrs, slots, emit, expose }) {
+    const stepper = ref(new Stepper)
+    stepper.value.activeSet.add(0)
+    watch(() => stepper.value.index, (value) => {
+      emit("change", stepper.value.steps[value]);
+    })
+
+    function active(index: number) {
+      stepper.value.active(index);
+    }
+    function disable(index: number) {
+      return !stepper.value.isActive(index);
+    }
+
+    function next() {
+      stepper.value.next();
+    }
+    function prev() {
+      stepper.value.prev();
+    }
+
+    function $func(name: any) {
+      emit(name);
+    }
+
+    provide('stepper', stepper.value)
+
+    expose({
+      next,
+      prev,
+      active
+    });
+
+    return () => {
+      let currentNode: any;
+      let steps: any = [];
+      if (slots.default?.()) {
+        slots.default?.().forEach((node, index) => {
+          const options = {
+            index: index,
+            ...node.props,
+          };
+          const step = new Step(options);
+          steps.push(step);
+          if (stepper.value.isCurrent(index)) {
+          currentNode = node;
+        }
+        });
+      }
+      stepper.value.steps = steps;
+      stepper.value = Object.assign(stepper.value, attrs);
+
+      return h(
+        'div',
+        {
+          class: ['fu-steps', 'fu-steps--vertical']
+        },
+        [
+          h(
+            FuVerticalNavigation,
+            {
+              stepper: stepper.value,
+              steps: steps,
+              disable: disable,
+              onActive: active
+            },
+            ()=> currentNode
+          ),
+          h(
+            'div',
+            { class: 'fu-steps__footer' },
+            h(FuStepsFooter, { onStepperFn: $func })
+          )
+        ]
+      )
+
+    }
+  }
+
+})
+</script>
+

package/src/components/ steps/Stepper.ts

@@ -0,0 +1,171 @@
+import {useLocale} from '@/hooks';
+
+const {t} = useLocale();
+import {StepperOptions, StepOptions} from './types';
+
+export class Stepper implements StepperOptions {
+  steps: [Step];
+  index: number;
+  activeSet: any;
+  isLoading: boolean;
+  onCancelButtonText: string;
+  onFinishButtonText: string;
+  prevButtonText: string;
+  nextButtonText: string;
+  buttonSize: string;
+  footerAlign: string;
+  showCancel: any;
+  beforeActive: Function;
+  beforeLeave: Function;
+  height: string;
+
+  constructor(options?: StepperOptions) {
+    options = options || ({} as StepperOptions);
+    // 所有步骤节点(Step对象数组)
+    this.steps = options.steps;
+    // 正在执行的节点的索引
+    this.index = options.index === undefined ? 0 : options.index;
+    // 激活过的节点的索引
+    this.activeSet = new Set();
+    // loading状态
+    this.isLoading = options?.isLoading || false;
+    // footer 属性
+    this.onCancelButtonText = options.onCancelButtonText || t('fu.steps.cancel');
+    this.onFinishButtonText = options.onFinishButtonText || t('fu.steps.finish');
+    this.prevButtonText = options.prevButtonText || t('fu.steps.prev');
+    this.nextButtonText = options.nextButtonText || t('fu.steps.next');
+    this.buttonSize = options.buttonSize || 'default';
+    this.footerAlign = options.footerAlign || 'flex';
+    // 是否显示取消按钮
+    this.showCancel = options.showCancel === undefined ? false : options.showCancel;
+    // 激活前钩子
+    this.beforeActive = options.beforeActive;
+    // 离开前钩子
+    this.beforeLeave = options.beforeLeave;
+    // 高度
+    this.height = options.height;
+  }
+
+  // index是否为第一个节点
+  isFirst(index: number): boolean {
+    return index === 0;
+  }
+
+  // index是否为最后一个节点
+  isLast(index: number): boolean {
+    return index === this.steps.length - 1;
+  }
+
+  // index的节点是否激活过
+  isActive(index: number): boolean {
+    return this.activeSet.has(index);
+  }
+
+  // index的节点是否为正在激活的节点
+  isCurrent(index: number): boolean {
+    return this.index === index;
+  }
+
+  // 激活
+  async active(index: number) {
+    // 在节点范围内，并且不等于当前节点
+    const isValid: boolean = index >= 0 && index < this.steps.length && this.index !== index;
+    const forward: boolean = index > this.index;
+    if (isValid) {
+      // 离开前钩子返回false，则不执行激活
+      if (await (this.executeBeforeLeave(this.index, forward)) !== false) {
+        // 激活前钩子返回false，则不执行激活
+        if (await (this.executeBeforeActive(index, forward)) !== false) {
+          // 激活
+          this.index = index;
+          this.activeSet.add(index);
+        }
+      }
+    }
+  }
+
+  // 反激活
+  // inactive(index: number): void {
+  //   this.activeSet.delete(index);
+  // }
+
+  // 下一步
+  next(): void {
+    if (!this.isLast(this.index)) {
+      this.active(this.index + 1);
+    }
+  }
+
+  // 上一步
+  prev(): void {
+    if (!this.isFirst(this.index)) {
+      this.active(this.index - 1);
+    }
+  }
+
+  // 使用索引获取Step对象
+  getStep(index: number): Step | undefined {
+    if (this.steps && this.steps.length > index) {
+      return this.steps[index];
+    }
+  }
+
+  // 使用ID获取节点索引
+  // getIndex(id: string): number {
+  //   if (this.steps) {
+  //     for (let i = 0; i < this.steps.length; i++) {
+  //       let step: any = this.steps[i];
+  //       if (id === step.id) {
+  //         return i;
+  //       }
+  //     }
+  //   }
+  //   return -1;
+  // }
+
+  executeBeforeLeave(index: number, forward: boolean) {
+    const step: any = this.getStep(index);
+    if (step.beforeLeave) {
+      return step.beforeLeave(step, forward);
+    }
+    if (this.beforeLeave) {
+      return this.beforeLeave(step, forward);
+    }
+  }
+
+  executeBeforeActive(index: number, forward: boolean) {
+    const step: any = this.getStep(index);
+    if (step.beforeActive) {
+      return step.beforeActive(step, forward);
+    }
+    if (this.beforeActive) {
+      return this.beforeActive(step, forward);
+    }
+  }
+}
+
+export class Step implements StepOptions {
+  id?: string;
+  index: number;
+  beforeActive?: Function;
+  beforeLeave?: Function;
+  title?: string;
+  description?: string;
+  icon?: string;
+  status?: string;
+
+  constructor(options?: StepOptions) {
+    options = options || ({} as StepOptions);
+    this.id = options.id;
+    this.index = options.index;
+    // 激活前钩子
+    this.beforeActive = options.beforeActive;
+    // 离开前钩子
+    this.beforeLeave = options.beforeLeave;
+    // el-step 属性
+    this.title = options.title;
+    this.description = options.description;
+    this.icon = options.icon;
+    this.status = options.status;
+  }
+}

package/src/components/ steps/index.ts

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

package/src/components/ steps/types.ts

@@ -0,0 +1,29 @@
+import {Step} from "@/components/ steps/Stepper";
+
+export interface StepperOptions {
+  steps: [Step]
+  index: number
+  activeSet: any
+  isLoading?: boolean
+  onCancelButtonText: string
+  onFinishButtonText: string
+  prevButtonText: string
+  nextButtonText: string
+  buttonSize: string
+  footerAlign: string
+  showCancel: any
+  beforeActive: Function
+  beforeLeave: Function
+  height: string
+}
+
+export interface StepOptions {
+  id?: string
+  index: number
+  beforeActive?: Function
+  beforeLeave?: Function
+  title?: string
+  description?: string
+  icon?: string
+  status?: string
+}

package/types/examples/pages/steps/attributes.d.ts

@@ -0,0 +1,63 @@
+/**
+ * 说明文档
+ * @name 表格名称
+ * @header 表格头部参数,任意定义
+ * @table table内容,字段要和header定义的属性保持一直
+ * @children 多表使用
+ */
+export declare const attributes: {
+    name: string;
+    children: ({
+        name: string;
+        header: {
+            prop: string;
+            desc: string;
+            type: string;
+            enum: string;
+            default: string;
+            event?: undefined;
+            value?: undefined;
+            name?: undefined;
+        };
+        table: {
+            prop: string;
+            desc: string;
+            type: string;
+            enum: string;
+            default: string;
+        }[];
+    } | {
+        name: string;
+        header: {
+            event: string;
+            desc: string;
+            value: string;
+            prop?: undefined;
+            type?: undefined;
+            enum?: undefined;
+            default?: undefined;
+            name?: undefined;
+        };
+        table: {
+            event: string;
+            desc: string;
+            value: string;
+        }[];
+    } | {
+        name: string;
+        header: {
+            name: string;
+            desc: string;
+            prop?: undefined;
+            type?: undefined;
+            enum?: undefined;
+            default?: undefined;
+            event?: undefined;
+            value?: undefined;
+        };
+        table: {
+            name: string;
+            desc: string;
+        }[];
+    })[];
+}[];

package/types/examples/pages/steps/demo/BaseSteps.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/types/examples/pages/steps/demo/CustomFooterDemo.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/types/examples/pages/steps/demo/SettingFooterDemo.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/types/examples/pages/steps/demo/StepsHooksDemo.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/types/examples/pages/steps/demo/VerticalSteps.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/types/examples/pages/steps/index.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;