vxe-pc-ui 4.20.34 → 4.20.35

package/es/steps/src/steps.js

@@ -1,54 +1,306 @@
-import { ref, h, reactive } from "vue";
+import { ref, h, reactive, computed, watch, provide, onMounted, onBeforeUnmount } from "vue";
 import { defineVxeComponent } from "../../ui/src/comp";
 import XEUtils from "xe-utils";
 import { VxeUI } from "@vxe-ui/core";
-const { createEvent } = VxeUI;
-var steps_default = defineVxeComponent({
-  name: "VxeSteps",
-  props: {},
-  emits: [],
-  setup(props, context) {
-    const { emit } = context;
-    const xID = XEUtils.uniqueId();
-    const refElem = ref();
-    const reactData = reactive({});
-    const refMaps = {
-      refElem
-    };
-    const computeMaps = {};
-    const $xeSteps = {
-      xID,
-      props,
-      context,
-      reactData,
-      getRefMaps: () => refMaps,
-      getComputeMaps: () => computeMaps
-    };
-    const dispatchEvent = (type, params, evnt) => {
-      emit(type, createEvent(evnt, { $steps: $xeSteps }, params));
-    };
-    const stepsMethods = {
-      dispatchEvent
-    };
-    const stepsPrivateMethods = {};
-    Object.assign($xeSteps, stepsMethods, stepsPrivateMethods);
-    const renderVN = () => {
-      return h(
-        "div",
-        {
-          ref: refElem,
-          class: "vxe-steps"
-        },
-        []
+import { getText } from "../../ui/src/utils";
+const { getConfig, getIcon, useFns, createEvent } = VxeUI;
+function createInternalData() {
+  return {
+    fullData: []
+  };
+}
+function createReactData() {
+  return {
+    itemList: [],
+    staticItems: [],
+    isOptConf: false
+  };
+}
+var steps_default = (
+  /* define-vxe-component start */
+  defineVxeComponent({
+    name: "VxeSteps",
+    props: {
+      modelValue: [Number, String],
+      size: {
+        type: String,
+        default: () => getConfig().steps.size
+      },
+      options: Array,
+      type: {
+        type: String,
+        default: () => getConfig().steps.type
+      },
+      vertical: {
+        type: Boolean,
+        default: () => getConfig().steps.vertical
+      },
+      optionProps: Object,
+      separator: {
+        type: [String, Number],
+        default: () => getConfig().steps.separator
+      },
+      showNumber: {
+        type: Boolean,
+        default: () => getConfig().steps.showNumber
+      },
+      showIcon: {
+        type: Boolean,
+        default: () => getConfig().steps.showIcon
+      }
+    },
+    emits: [
+      "update:modelValue"
+    ],
+    setup(props, context) {
+      const { slots, emit } = context;
+      const xID = XEUtils.uniqueId();
+      const { computeSize } = useFns.useSize(props);
+      const refElem = ref();
+      const reactData = reactive(createReactData());
+      const internalData = createInternalData();
+      const refMaps = {
+        refElem
+      };
+      const computeMaps = {};
+      const $xeSteps = {
+        xID,
+        props,
+        context,
+        reactData,
+        internalData,
+        getRefMaps: () => refMaps,
+        getComputeMaps: () => computeMaps
+      };
+      const computePropsOpts = computed(() => {
+        return Object.assign({}, getConfig().steps.optionProps, props.optionProps);
+      });
+      const computeTitleField = computed(() => {
+        const propsOpts = computePropsOpts.value;
+        return propsOpts.title || "title";
+      });
+      const computeContentField = computed(() => {
+        const propsOpts = computePropsOpts.value;
+        return propsOpts.content || "content";
+      });
+      const computeStatusField = computed(() => {
+        const propsOpts = computePropsOpts.value;
+        return propsOpts.status || "status";
+      });
+      const computeSeparatorText = computed(() => {
+        const { separator } = props;
+        return XEUtils.toValueString(separator) || "";
+      });
+      const computeCurrentNum = computed(() => {
+        const { modelValue } = props;
+        return modelValue ? XEUtils.toNumber(modelValue) : 0;
+      });
+      const dispatchEvent = (type, params, evnt) => {
+        emit(type, createEvent(evnt, { $steps: $xeSteps }, params));
+      };
+      const loadData = (opts, isOptConf) => {
+        reactData.isOptConf = isOptConf;
+        internalData.fullData = opts || [];
+        updateItems();
+      };
+      const updateItems = () => {
+        const { fullData } = internalData;
+        reactData.itemList = fullData.slice(0);
+      };
+      const stepsMethods = {
+        dispatchEvent
+      };
+      const stepsPrivateMethods = {};
+      Object.assign($xeSteps, stepsMethods, stepsPrivateMethods);
+      const renderIcon = (itemStatus, isCurrent, isFinish, index) => {
+        const { showNumber, showIcon } = props;
+        if (!showNumber) {
+          return h("span", {
+            class: "vxe-steps--item-icon-dot"
+          });
+        }
+        if (showIcon && (isFinish || itemStatus === "finish" || itemStatus === "error")) {
+          return h("span", {
+            class: "vxe-steps--item-icon-status"
+          }, [
+            h("i", {
+              class: itemStatus === "error" ? isCurrent ? getIcon().STEPS_STATUS_ERROR_CURRENT : getIcon().STEPS_STATUS_ERROR : isCurrent ? getIcon().STEPS_STATUS_FINISH_CURRENT : getIcon().STEPS_STATUS_FINISH
+            })
+          ]);
+        }
+        return h("span", {
+          class: "vxe-steps--item-icon-num"
+        }, `${index + 1}`);
+      };
+      const renderItem = (item, index) => {
+        const { itemList, isOptConf } = reactData;
+        const titleField = computeTitleField.value;
+        const contentField = computeContentField.value;
+        const currentNum = computeCurrentNum.value;
+        const statusField = computeStatusField.value;
+        const titleVal = getText(isOptConf ? item[titleField] : item.title);
+        const contentVal = getText(isOptConf ? item[contentField] : item.content);
+        const customStatus = getText(isOptConf ? item[statusField] : item.status);
+        const titleSlot = slots.title;
+        const contentSlot = slots.content;
+        const isFinish = currentNum > index;
+        const isCurrent = currentNum === index;
+        return h(
+          "div",
+          {
+            key: index,
+            class: [
+              "vxe-steps--item",
+              {
+                [`status--${customStatus}`]: customStatus,
+                "is--finish": isFinish,
+                "is--current": currentNum === index,
+                "is--last": index === itemList.length - 1
+              }
+            ]
+          },
+          [
+            h("div", {
+              class: "vxe-steps--item-line"
+            }),
+            h(
+              "div",
+              {
+                class: "vxe-steps--item-icon"
+              },
+              [
+                renderIcon(customStatus, isCurrent, isFinish, index)
+              ]
+            ),
+            h(
+              "div",
+              {
+                class: "vxe-steps--item-wrapper"
+              },
+              [
+                h("div", {
+                  class: "vxe-steps--item-title"
+                }, titleSlot ? titleSlot({ item }) : titleVal),
+                h("div", {
+                  class: "vxe-steps--item-content"
+                }, contentSlot ? contentSlot({ item }) : contentVal)
+              ]
+            )
+          ]
+        );
+      };
+      const renderSeparator = (index) => {
+        const separatorText = computeSeparatorText.value;
+        const separatorSlot = slots.separator;
+        return h(
+          "div",
+          {
+            key: `s${index}`,
+            class: "vxe-steps--item-separator"
+          },
+          separatorSlot ? separatorSlot({}) : [
+            separatorText ? h("span", {
+              key: "st"
+            }, separatorText) : h("span", {
+              key: "si",
+              class: getIcon().STEPS_SEPARATOR
+            })
+          ]
+        );
+      };
+      const renderItems = () => {
+        const { type, vertical } = props;
+        const { itemList } = reactData;
+        const isSimple = type === "simple";
+        const list = [];
+        itemList.forEach((item, index) => {
+          list.push(renderItem(item, index));
+          if (isSimple && !vertical && index < itemList.length - 1) {
+            list.push(renderSeparator(index));
+          }
+        });
+        return list;
+      };
+      const renderVN = () => {
+        const { showNumber, vertical, type } = props;
+        const vSize = computeSize.value;
+        const defaultSlot = slots.default;
+        return h(
+          "div",
+          {
+            ref: refElem,
+            class: [
+              "vxe-steps",
+              {
+                [`size--${vSize}`]: vSize,
+                "is--number": showNumber,
+                "is--vertical": vertical,
+                "is--horizontal": !vertical,
+                "is--simple": type === "simple"
+              }
+            ]
+          },
+          [
+            h(
+              "div",
+              {
+                class: "vxe-steps--slots"
+              },
+              defaultSlot ? defaultSlot({}) : []
+            ),
+            h(
+              "div",
+              {
+                class: "vxe-steps--body"
+              },
+              renderItems()
+            )
+          ]
+        );
+      };
+      watch(
+        () => reactData.staticItems,
+        (val) => {
+          loadData(val, false);
+        }
       );
-    };
-    $xeSteps.renderVN = renderVN;
-    return $xeSteps;
-  },
-  render() {
-    return this.renderVN();
-  }
-});
+      const refOptsFlag = ref(0);
+      watch(
+        () => props.options,
+        () => {
+          refOptsFlag.value++;
+        }
+      );
+      watch(
+        () => props.options ? props.options.length : -1,
+        () => {
+          refOptsFlag.value++;
+        }
+      );
+      watch(refOptsFlag, () => {
+        loadData(props.options || [], true);
+      });
+      onMounted(() => {
+        const { staticItems } = reactData;
+        if (staticItems.length) {
+          loadData(staticItems, false);
+        } else {
+          loadData(props.options || [], true);
+        }
+      });
+      onBeforeUnmount(() => {
+        XEUtils.assign(reactData, createReactData());
+        XEUtils.assign(internalData, createInternalData());
+      });
+      provide("$xeSteps", $xeSteps);
+      $xeSteps.renderVN = renderVN;
+      return $xeSteps;
+    },
+    render() {
+      return this.renderVN();
+    }
+  })
+);
 export {
   steps_default as default
 };

package/es/steps/src/util.d.ts

@@ -0,0 +1,7 @@
+import { StepItemInfo } from './step-info';
+import type { VxeStepsConstructor } from '../../../types';
+export declare function isStepItem(item: any): item is StepItemInfo;
+export declare function createStepItem($xeSteps: VxeStepsConstructor, _vm: any): StepItemInfo;
+export declare function watchStepItem(props: any, itemInfo: StepItemInfo): void;
+export declare function assembleStepItem($xeSteps: VxeStepsConstructor, el: HTMLDivElement, itemInfo: StepItemInfo): void;
+export declare function destroyStepItem($xeSteps: VxeStepsConstructor, itemInfo: StepItemInfo): void;

package/es/steps/src/util.js

@@ -0,0 +1,44 @@
+import { watch } from "vue";
+import XEUtils from "xe-utils";
+import { StepItemInfo } from "./step-info";
+function isStepItem(item) {
+  return item instanceof StepItemInfo;
+}
+function createStepItem($xeSteps, _vm) {
+  return isStepItem(_vm) ? _vm : new StepItemInfo($xeSteps, _vm);
+}
+function watchStepItem(props, itemInfo) {
+  Object.keys(props).forEach((name) => {
+    watch(
+      () => props[name],
+      (value) => {
+        itemInfo.update(name, value);
+      }
+    );
+  });
+}
+function assembleStepItem($xeSteps, el, itemInfo) {
+  const reactData = $xeSteps.reactData;
+  const { staticItems } = reactData;
+  const parentElem = el.parentNode;
+  if (parentElem && staticItems) {
+    staticItems.splice(XEUtils.arrayIndexOf(parentElem.children, el), 0, itemInfo);
+    reactData.staticItems = staticItems.slice(0);
+  }
+}
+function destroyStepItem($xeSteps, itemInfo) {
+  const { reactData } = $xeSteps;
+  const { staticItems } = reactData;
+  const index = XEUtils.findIndexOf(staticItems, (item) => item.id === itemInfo.id);
+  if (index > -1) {
+    staticItems.splice(index, 1);
+  }
+  reactData.staticItems = staticItems.slice(0);
+}
+export {
+  assembleStepItem,
+  createStepItem,
+  destroyStepItem,
+  isStepItem,
+  watchStepItem
+};

package/es/steps/style.css

@@ -0,0 +1,297 @@
+.vxe-steps {
+  --vxe-ui-steps-current-font-size: var(--vxe-ui-font-size-default);
+  --vxe-ui-steps-current-padding: var(--vxe-ui-form-item-padding-default);
+}
+.vxe-steps.size--xlarge {
+  --vxe-ui-steps-current-font-size: var(--vxe-ui-font-size-xlarge);
+  --vxe-ui-steps-current-padding: var(--vxe-ui-form-item-padding-xlarge);
+}
+.vxe-steps.size--large {
+  --vxe-ui-steps-current-font-size: var(--vxe-ui-font-size-large);
+  --vxe-ui-steps-current-padding: var(--vxe-ui-form-item-padding-large);
+}
+.vxe-steps.size--medium {
+  --vxe-ui-steps-current-font-size: var(--vxe-ui-font-size-medium);
+  --vxe-ui-steps-current-padding: var(--vxe-ui-form-item-padding-medium);
+}
+.vxe-steps.size--small {
+  --vxe-ui-steps-current-font-size: var(--vxe-ui-font-size-small);
+  --vxe-ui-steps-current-padding: var(--vxe-ui-form-item-padding-small);
+}
+.vxe-steps.size--mini {
+  --vxe-ui-steps-current-font-size: var(--vxe-ui-font-size-mini);
+  --vxe-ui-steps-current-padding: var(--vxe-ui-form-item-padding-mini);
+}
+
+.vxe-steps {
+  --vxe-ui-steps-current-icon-size: var(--vxe-ui-steps-icon-dot-size);
+}
+.vxe-steps.is--number {
+  --vxe-ui-steps-current-icon-size: var(--vxe-ui-steps-icon-num-size);
+}
+
+.vxe-steps {
+  display: flex;
+  flex-direction: column;
+  padding: var(--vxe-ui-steps-current-padding) 0;
+  font-size: var(--vxe-ui-steps-current-font-size);
+  color: var(--vxe-ui-font-color);
+}
+.vxe-steps .vxe-steps--body {
+  display: flex;
+  flex-direction: column;
+}
+.vxe-steps .vxe-steps--item {
+  position: relative;
+  display: flex;
+  padding-bottom: calc(var(--vxe-ui-steps-current-icon-size) + 0.5em);
+}
+.vxe-steps .vxe-steps--item:last-child {
+  padding-bottom: 0;
+}
+.vxe-steps .vxe-steps--item.is--last .vxe-steps--item-line {
+  display: none;
+}
+.vxe-steps .vxe-steps--item-line {
+  position: absolute;
+  left: calc(var(--vxe-ui-steps-current-icon-size) / 2 - var(--vxe-ui-steps-line-width) / 2);
+  top: var(--vxe-ui-steps-current-icon-size);
+  bottom: 0;
+  width: var(--vxe-ui-steps-line-width);
+  background-color: var(--vxe-ui-base-border-color);
+}
+.vxe-steps .vxe-steps--item-icon {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--vxe-ui-steps-current-icon-size);
+  height: var(--vxe-ui-steps-current-icon-size);
+  margin-right: 0.75em;
+}
+.vxe-steps .vxe-steps--item-icon-dot {
+  width: var(--vxe-ui-steps-icon-dot-size);
+  height: var(--vxe-ui-steps-icon-dot-size);
+  border: var(--vxe-ui-steps-line-width) solid currentColor;
+  border-radius: 50%;
+  background-color: var(--vxe-ui-layout-background-color);
+  box-sizing: border-box;
+}
+.vxe-steps .vxe-steps--item-icon-num {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--vxe-ui-steps-icon-num-size);
+  height: var(--vxe-ui-steps-icon-num-size);
+  border-radius: 50%;
+  border: var(--vxe-ui-steps-line-width) solid currentColor;
+  background-color: var(--vxe-ui-layout-background-color);
+  box-sizing: border-box;
+  font-size: 0.875em;
+  font-weight: 600;
+  line-height: 1;
+}
+.vxe-steps .vxe-steps--item-icon-status {
+  line-height: 1;
+  background-color: var(--vxe-ui-layout-background-color);
+}
+.vxe-steps .vxe-steps--item-icon-status i {
+  font-size: var(--vxe-ui-steps-icon-num-size);
+}
+.vxe-steps .vxe-steps--item-wrapper {
+  flex: 1;
+  min-width: 0;
+  padding-top: 0.125em;
+}
+.vxe-steps .vxe-steps--item-title {
+  font-weight: 600;
+  line-height: 1.4;
+}
+.vxe-steps .vxe-steps--item-content {
+  margin-top: 0.25em;
+  line-height: 1.5;
+  word-break: break-word;
+  color: var(--vxe-ui-font-lighten-color);
+}
+.vxe-steps.is--horizontal .vxe-steps--body {
+  flex-direction: row;
+  align-items: flex-start;
+}
+.vxe-steps.is--horizontal .vxe-steps--item {
+  --vxe-ui-steps-item-padding-x: calc(var(--vxe-ui-steps-current-icon-size) + 0.5em);
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: 0;
+  padding-right: var(--vxe-ui-steps-item-padding-x);
+  text-align: center;
+}
+.vxe-steps.is--horizontal .vxe-steps--item:last-child {
+  padding-right: 0;
+}
+.vxe-steps.is--horizontal .vxe-steps--item-line {
+  left: calc(50% - var(--vxe-ui-steps-item-padding-x) / 2);
+  right: calc(-50% + var(--vxe-ui-steps-item-padding-x) / 2);
+  top: calc(var(--vxe-ui-steps-current-icon-size) / 2 - var(--vxe-ui-steps-line-width) / 2);
+  bottom: auto;
+  width: auto;
+  height: var(--vxe-ui-steps-line-width);
+}
+.vxe-steps.is--horizontal .vxe-steps--item-icon {
+  margin-right: 0;
+  margin-bottom: 0.5em;
+}
+.vxe-steps.is--horizontal .vxe-steps--item-wrapper {
+  width: 100%;
+  padding-top: 0;
+}
+.vxe-steps.is--horizontal .vxe-steps--item-content {
+  margin-top: 0.125em;
+}
+
+.vxe-steps--item {
+  color: var(--vxe-ui-steps-status-default-color);
+}
+.vxe-steps--item.status--finish .vxe-steps--item-icon-num {
+  color: var(--vxe-ui-steps-status-finish-color);
+  border-color: var(--vxe-ui-steps-status-finish-color);
+}
+.vxe-steps--item.status--finish .vxe-steps--item-title {
+  color: var(--vxe-ui-steps-status-finish-color);
+}
+.vxe-steps--item.status--finish .vxe-steps--item-icon-status {
+  color: var(--vxe-ui-steps-status-finish-color);
+}
+.vxe-steps--item.status--error .vxe-steps--item-icon-num {
+  color: var(--vxe-ui-steps-status-error-color);
+  border-color: var(--vxe-ui-steps-status-error-color);
+}
+.vxe-steps--item.status--error .vxe-steps--item-title {
+  color: var(--vxe-ui-steps-status-error-color);
+}
+.vxe-steps--item.status--error .vxe-steps--item-icon-status {
+  color: var(--vxe-ui-steps-status-error-color);
+}
+.vxe-steps--item.status--process .vxe-steps--item-icon-dot {
+  background-color: var(--vxe-ui-steps-status-process-color);
+}
+.vxe-steps--item.is--finish.status--finish .vxe-steps--item-icon-num {
+  color: var(--vxe-ui-steps-status-finish-color);
+}
+.vxe-steps--item.is--finish.status--finish .vxe-steps--item-icon-status {
+  color: var(--vxe-ui-steps-status-finish-color);
+}
+.vxe-steps--item.is--finish.status--finish .vxe-steps--item-icon-dot {
+  border-color: var(--vxe-ui-steps-status-finish-color);
+}
+.vxe-steps--item.is--finish.status--error .vxe-steps--item-icon-num {
+  color: var(--vxe-ui-steps-status-error-color);
+}
+.vxe-steps--item.is--finish.status--error .vxe-steps--item-icon-status {
+  color: var(--vxe-ui-steps-status-error-color);
+}
+.vxe-steps--item.is--finish.status--error .vxe-steps--item-icon-dot {
+  border-color: var(--vxe-ui-steps-status-error-color);
+}
+.vxe-steps--item.is--finish .vxe-steps--item-icon-num {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-steps--item.is--finish .vxe-steps--item-icon-dot {
+  border-color: var(--vxe-ui-font-primary-color);
+}
+.vxe-steps--item.is--finish .vxe-steps--item-line {
+  background-color: var(--vxe-ui-font-primary-color);
+}
+.vxe-steps--item.is--finish .vxe-steps--item-icon-status {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-steps--item.is--current.status--finish .vxe-steps--item-icon-num {
+  background-color: var(--vxe-ui-steps-status-finish-color);
+  color: var(--vxe-ui-layout-background-color);
+  border-color: var(--vxe-ui-steps-status-finish-color);
+}
+.vxe-steps--item.is--current.status--finish .vxe-steps--item-title {
+  color: var(--vxe-ui-steps-status-finish-color);
+}
+.vxe-steps--item.is--current.status--finish .vxe-steps--item-icon-status {
+  color: var(--vxe-ui-steps-status-finish-color);
+}
+.vxe-steps--item.is--current.status--finish .vxe-steps--item-icon-dot {
+  border-color: var(--vxe-ui-steps-status-finish-color);
+  background-color: var(--vxe-ui-steps-status-finish-color);
+}
+.vxe-steps--item.is--current.status--error .vxe-steps--item-icon-num {
+  background-color: var(--vxe-ui-steps-status-error-color);
+  color: var(--vxe-ui-layout-background-color);
+  border-color: var(--vxe-ui-steps-status-error-color);
+}
+.vxe-steps--item.is--current.status--error .vxe-steps--item-title {
+  color: var(--vxe-ui-steps-status-error-color);
+}
+.vxe-steps--item.is--current.status--error .vxe-steps--item-icon-status {
+  color: var(--vxe-ui-steps-status-error-color);
+}
+.vxe-steps--item.is--current.status--error .vxe-steps--item-icon-dot {
+  border-color: var(--vxe-ui-steps-status-error-color);
+  background-color: var(--vxe-ui-steps-status-error-color);
+}
+.vxe-steps--item.is--current .vxe-steps--item-icon-dot {
+  border-color: var(--vxe-ui-font-primary-color);
+  background-color: var(--vxe-ui-font-primary-color);
+}
+.vxe-steps--item.is--current .vxe-steps--item-icon-num {
+  background-color: var(--vxe-ui-font-primary-color);
+  color: var(--vxe-ui-layout-background-color);
+  border-color: var(--vxe-ui-font-primary-color);
+}
+.vxe-steps--item.is--current .vxe-steps--item-title {
+  color: var(--vxe-ui-font-primary-color);
+  font-weight: 700;
+}
+
+.vxe-steps--item-separator {
+  display: flex;
+  align-items: center;
+  flex: none;
+  margin: 0 0.5em;
+  color: var(--vxe-ui-font-placeholder-color);
+  white-space: nowrap;
+}
+
+.vxe-steps.is--simple .vxe-steps--item-icon,
+.vxe-steps.is--simple .vxe-steps--item-line,
+.vxe-steps.is--simple .vxe-steps--item-content {
+  display: none;
+}
+.vxe-steps.is--simple .vxe-steps--item {
+  padding-bottom: 0;
+}
+.vxe-steps.is--simple .vxe-steps--item-wrapper {
+  padding-top: 0;
+}
+.vxe-steps.is--simple.is--horizontal .vxe-steps--body {
+  flex-wrap: wrap;
+  align-items: center;
+}
+.vxe-steps.is--simple.is--horizontal .vxe-steps--item {
+  flex: none;
+  flex-direction: row;
+  align-items: center;
+  padding-right: 0;
+  text-align: left;
+}
+.vxe-steps.is--simple.is--horizontal .vxe-steps--item-wrapper {
+  width: auto;
+}
+.vxe-steps.is--simple.is--vertical .vxe-steps--item {
+  padding-bottom: 0.5em;
+}
+.vxe-steps.is--simple.is--vertical .vxe-steps--item:last-child {
+  padding-bottom: 0;
+}
+
+.vxe-steps--slots {
+  display: none;
+}