qidian-vue-ui 1.7.0 → 1.8.0

package/dist/components/steps/index.css

@@ -1,59 +1,58 @@
-.qd-steps[data-v-3fae5c44] {
+.qd-steps[data-v-b9e61b9f] {
   display: grid;
   gap: var(--td-comp-paddingTB-xs);
 }
-.qd-steps__nav[data-v-3fae5c44] {
+.qd-steps__nav[data-v-b9e61b9f] {
   display: flex;
   align-items: center;
   width: 100%;
 }
-.qd-steps__phases[data-v-3fae5c44] {
+.qd-steps__phases[data-v-b9e61b9f] {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
 }
-.qd-steps__phase[data-v-3fae5c44] {
+.qd-steps__phase[data-v-b9e61b9f] {
   display: inline-flex;
   align-items: center;
   gap: var(--td-size-3);
   padding: var(--td-size-1) var(--td-comp-paddingLR-s) var(--td-size-1) var(--td-comp-paddingLR-xs);
   border-radius: var(--td-radius-round);
   transition: all 0.15s;
-}
-.qd-steps__phase--clickable[data-v-3fae5c44] {
   cursor: pointer;
 }
-.qd-steps__phase--done[data-v-3fae5c44] {
+.qd-steps__phase--done[data-v-b9e61b9f] {
   color: var(--td-text-color-secondary);
 }
-.qd-steps__phase--done .qd-steps__phase-icon[data-v-3fae5c44] {
+.qd-steps__phase--done .qd-steps__phase-icon[data-v-b9e61b9f] {
   background-color: var(--td-success-color);
   color: var(--td-text-color-anti);
   border-color: transparent;
 }
-.qd-steps__phase--done .qd-steps__phase-name[data-v-3fae5c44] {
+.qd-steps__phase--done .qd-steps__phase-name[data-v-b9e61b9f] {
   color: var(--td-text-color-secondary);
 }
-.qd-steps__phase--done.qd-steps__phase--clickable[data-v-3fae5c44]:hover {
+.qd-steps__phase--done[data-v-b9e61b9f]:hover {
   background-color: var(--td-bg-color-container-hover);
 }
-.qd-steps__phase--active[data-v-3fae5c44] {
+.qd-steps__phase--active[data-v-b9e61b9f] {
   background-color: var(--td-brand-color-light);
 }
-.qd-steps__phase--active .qd-steps__phase-icon[data-v-3fae5c44] {
+.qd-steps__phase--active .qd-steps__phase-icon[data-v-b9e61b9f] {
   background-color: var(--td-brand-color);
   color: var(--td-text-color-anti);
   border-color: transparent;
   box-shadow: var(--td-shadow-1);
 }
-.qd-steps__phase--active .qd-steps__phase-name[data-v-3fae5c44] {
+.qd-steps__phase--active .qd-steps__phase-name[data-v-b9e61b9f] {
   color: var(--td-text-color-brand);
   font-weight: 700;
 }
-.qd-steps__phase--pending[data-v-3fae5c44] {
+.qd-steps__phase--pending[data-v-b9e61b9f] {
   opacity: 0.6;
+  cursor: default;
 }
-.qd-steps__phase-icon[data-v-3fae5c44] {
+.qd-steps__phase-icon[data-v-b9e61b9f] {
   width: calc(var(--td-comp-size-xxxs) + var(--td-size-1));
   height: calc(var(--td-comp-size-xxxs) + var(--td-size-1));
   border-radius: var(--td-radius-circle);
@@ -69,27 +68,27 @@
   border: calc(var(--td-size-1) / 2) solid var(--td-component-stroke);
   transition: all 0.15s;
 }
-.qd-steps__phase-name[data-v-3fae5c44] {
+.qd-steps__phase-name[data-v-b9e61b9f] {
   font-size: var(--td-font-size-body-small);
   color: var(--td-text-color-placeholder);
   font-weight: 600;
   white-space: nowrap;
   transition: color 0.15s;
 }
-.qd-steps__separator[data-v-3fae5c44] {
+.qd-steps__separator[data-v-b9e61b9f] {
   color: var(--td-text-color-placeholder);
   margin: 0 var(--td-comp-margin-s);
   font-size: var(--td-font-size-body-large);
   line-height: 1;
   transform: translateY(calc(var(--td-size-1) / -2));
 }
-.qd-steps__separator--done[data-v-3fae5c44] {
+.qd-steps__separator--done[data-v-b9e61b9f] {
   color: var(--td-success-color);
 }
-.qd-steps__divider[data-v-3fae5c44] {
+.qd-steps__divider[data-v-b9e61b9f] {
   border-top: calc(var(--td-size-1) / 2) solid var(--td-border-level-1-color);
 }
-.qd-steps__substeps[data-v-3fae5c44] {
+.qd-steps__substeps[data-v-b9e61b9f] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -98,69 +97,68 @@
   margin-top: 0;
   padding-bottom: 0;
 }
-.qd-steps__substep-list[data-v-3fae5c44] {
+.qd-steps__substep-list[data-v-b9e61b9f] {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: var(--td-size-1);
 }
-.qd-steps__substep[data-v-3fae5c44] {
+.qd-steps__substep[data-v-b9e61b9f] {
   display: inline-flex;
   align-items: center;
   border-radius: var(--td-radius-medium);
   padding: var(--td-size-2) var(--td-comp-paddingLR-s);
   gap: var(--td-size-3);
   transition: all 0.12s;
-}
-.qd-steps__substep--clickable[data-v-3fae5c44] {
   cursor: pointer;
 }
-.qd-steps__substep[data-v-3fae5c44]:hover {
+.qd-steps__substep[data-v-b9e61b9f]:hover {
   background-color: var(--td-bg-color-container-hover);
 }
-.qd-steps__substep:hover .qd-steps__substep-name[data-v-3fae5c44] {
+.qd-steps__substep:hover .qd-steps__substep-name[data-v-b9e61b9f] {
   color: var(--td-text-color-primary);
 }
-.qd-steps__substep--done .qd-steps__substep-no[data-v-3fae5c44] {
+.qd-steps__substep--done .qd-steps__substep-no[data-v-b9e61b9f] {
   color: var(--td-success-color);
   background-color: transparent;
 }
-.qd-steps__substep--done .qd-steps__substep-no[data-v-3fae5c44]::before {
+.qd-steps__substep--done .qd-steps__substep-no[data-v-b9e61b9f]::before {
   background-color: var(--td-success-color);
   border-color: transparent;
 }
-.qd-steps__substep--done .qd-steps__substep-name[data-v-3fae5c44] {
+.qd-steps__substep--done .qd-steps__substep-name[data-v-b9e61b9f] {
   color: var(--td-text-color-primary);
 }
-.qd-steps__substep--active[data-v-3fae5c44] {
+.qd-steps__substep--active[data-v-b9e61b9f] {
   background-color: var(--td-bg-color-container-hover);
 }
-.qd-steps__substep--active .qd-steps__substep-no[data-v-3fae5c44] {
+.qd-steps__substep--active .qd-steps__substep-no[data-v-b9e61b9f] {
   color: var(--td-text-color-brand);
   background-color: transparent;
 }
-.qd-steps__substep--active .qd-steps__substep-no[data-v-3fae5c44]::before {
+.qd-steps__substep--active .qd-steps__substep-no[data-v-b9e61b9f]::before {
   background-color: var(--td-brand-color);
   border-color: transparent;
   box-shadow: 0 0 0 var(--td-size-1) var(--td-brand-color-light);
 }
-.qd-steps__substep--active .qd-steps__substep-name[data-v-3fae5c44] {
+.qd-steps__substep--active .qd-steps__substep-name[data-v-b9e61b9f] {
   color: var(--td-text-color-brand);
   font-weight: 700;
 }
-.qd-steps__substep--pending[data-v-3fae5c44] {
+.qd-steps__substep--pending[data-v-b9e61b9f] {
   color: var(--td-text-color-placeholder);
+  cursor: default;
 }
-.qd-steps__substep--pending .qd-steps__substep-no[data-v-3fae5c44] {
+.qd-steps__substep--pending .qd-steps__substep-no[data-v-b9e61b9f] {
   color: var(--td-text-color-disabled);
 }
-.qd-steps__substep--pending .qd-steps__substep-no[data-v-3fae5c44]::before {
+.qd-steps__substep--pending .qd-steps__substep-no[data-v-b9e61b9f]::before {
   border-color: var(--td-component-border);
 }
-.qd-steps__substep--pending .qd-steps__substep-name[data-v-3fae5c44] {
+.qd-steps__substep--pending .qd-steps__substep-name[data-v-b9e61b9f] {
   color: var(--td-text-color-placeholder);
 }
-.qd-steps__substep-no[data-v-3fae5c44] {
+.qd-steps__substep-no[data-v-b9e61b9f] {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -174,7 +172,7 @@
   color: var(--td-text-color-disabled);
   background-color: transparent;
 }
-.qd-steps__substep-no[data-v-3fae5c44]::before {
+.qd-steps__substep-no[data-v-b9e61b9f]::before {
   content: '';
   position: absolute;
   left: 0;
@@ -187,14 +185,14 @@
   transform: translateY(-50%);
   transition: all 0.12s;
 }
-.qd-steps__substep-name[data-v-3fae5c44] {
+.qd-steps__substep-name[data-v-b9e61b9f] {
   font-size: var(--td-font-size-body-small);
   font-weight: 600;
   color: var(--td-text-color-secondary);
   white-space: nowrap;
   transition: color 0.12s;
 }
-.qd-steps__indicator[data-v-3fae5c44] {
+.qd-steps__indicator[data-v-b9e61b9f] {
   flex: none;
   margin-left: auto;
   padding: 0;
@@ -205,7 +203,7 @@
   white-space: nowrap;
   background-color: transparent;
 }
-.qd-steps__indicator b[data-v-3fae5c44] {
+.qd-steps__indicator b[data-v-b9e61b9f] {
   color: var(--td-text-color-primary);
   font-weight: 700;
 }

package/dist/components/steps/index.vue.d.ts

@@ -1,10 +1,11 @@
 import type { QdStepsProps } from './types';
 declare const _default: import("vue").DefineComponent<QdStepsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    jump: (stepIndex: number) => any;
+    change: (index: number) => any;
+    "update:current": (current: number) => any;
 }, string, import("vue").PublicProps, Readonly<QdStepsProps> & Readonly<{
-    onJump?: ((stepIndex: number) => any) | undefined;
+    onChange?: ((index: number) => any) | undefined;
+    "onUpdate:current"?: ((current: number) => any) | undefined;
 }>, {
     maxReachedStep: number;
-    canJumpTo: (stepIndex: number) => boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/steps/index.vue.mjs

@@ -2,7 +2,7 @@ import './index.css'
 import _sfc_main from "./index.vue2.mjs";
 /* empty css            */
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3fae5c44"]]);
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b9e61b9f"]]);
 export {
   index as default
 };

package/dist/components/steps/index.vue2.mjs

@@ -1,5 +1,6 @@
 import './index.css'
 import { defineComponent, mergeDefaults, computed, createElementBlock, openBlock, createElementVNode, createCommentVNode, Fragment, renderList, createBlock, normalizeClass, toDisplayString, unref, createTextVNode } from "vue";
+import { useVModels } from "../../node_modules/.pnpm/@vueuse_core@14.2.0_vue@3.5.26_typescript@5.9.3_/node_modules/@vueuse/core/dist/index.mjs";
 import { ChevronRightSIcon } from "tdesign-icons-vue-next";
 import { qdStepsProps } from "./props.mjs";
 const _hoisted_1 = { class: "qd-steps" };
@@ -33,18 +34,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: /* @__PURE__ */ mergeDefaults({
     options: {},
     current: {},
-    maxReachedStep: {},
-    canJumpTo: { type: Function }
+    maxReachedStep: {}
   }, qdStepsProps),
-  emits: ["jump"],
+  emits: ["change", "update:current"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const { current } = useVModels(props, emit);
     const flatSteps = computed(() => props.options.flatMap((group) => getPhaseStepLabels(group)));
-    const reachedStep = computed(() => props.maxReachedStep ?? props.current);
+    const reachedStep = computed(() => props.maxReachedStep ?? current.value);
     const hasSubSteps = computed(() => props.options.some((group) => group.steps?.length));
     const currentPhaseIndex = computed(
-      () => props.options.findIndex((group) => getPhaseStepIndexes(group).includes(props.current))
+      () => props.options.findIndex((group) => getPhaseStepIndexes(group).includes(current.value))
     );
     const currentPhaseStepIndexes = computed(() => {
       const group = props.options[currentPhaseIndex.value];
@@ -63,52 +64,44 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function getPhaseStatus(group) {
       const stepIndexes = getPhaseStepIndexes(group);
-      const isActive = stepIndexes.includes(props.current);
+      const isActive = stepIndexes.includes(current.value);
       if (isActive) return "active";
-      const isDone = stepIndexes.every((stepIndex) => stepIndex <= reachedStep.value);
+      const isDone = stepIndexes.every((index) => index <= reachedStep.value);
       if (isDone) return "done";
       return "pending";
     }
-    function getStepStatus(stepIndex) {
-      if (stepIndex === props.current) return "active";
-      if (stepIndex < props.current || stepIndex <= reachedStep.value) return "done";
+    function getStepStatus(index) {
+      if (index === current.value) return "active";
+      if (index < current.value || index <= reachedStep.value) return "done";
       return "pending";
     }
     function handlePhaseClick(phase) {
-      const stepIndex = getPhaseFirstStepIndex(phase);
-      if (!props.canJumpTo(stepIndex)) return;
-      emit("jump", stepIndex);
+      const index = getPhaseFirstStepIndex(phase);
+      current.value = index;
+      emit("change", index);
     }
-    function handleStepClick(stepIndex) {
-      if (!props.canJumpTo(stepIndex)) return;
-      emit("jump", stepIndex);
+    function handleStepClick(index) {
+      current.value = index;
+      emit("change", index);
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", _hoisted_2, [
           createElementVNode("div", _hoisted_3, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (phase, pi) => {
-              return openBlock(), createElementBlock(Fragment, { key: pi }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (item, index) => {
+              return openBlock(), createElementBlock(Fragment, { key: index }, [
                 createElementVNode("div", {
-                  class: normalizeClass([
-                    "qd-steps__phase",
-                    {
-                      "qd-steps__phase--done": getPhaseStatus(phase) === "done",
-                      "qd-steps__phase--active": getPhaseStatus(phase) === "active",
-                      "qd-steps__phase--pending": getPhaseStatus(phase) === "pending",
-                      "qd-steps__phase--clickable": __props.canJumpTo(getPhaseFirstStepIndex(phase))
-                    }
-                  ]),
-                  onClick: ($event) => handlePhaseClick(phase)
+                  class: normalizeClass(["qd-steps__phase", `qd-steps__phase--${getPhaseStatus(item)}`]),
+                  onClick: ($event) => handlePhaseClick(item)
                 }, [
-                  getPhaseStatus(phase) === "done" ? (openBlock(), createElementBlock("span", _hoisted_5, "✓")) : getPhaseStatus(phase) === "active" ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(pi + 1), 1)) : (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(pi + 1), 1)),
-                  createElementVNode("span", _hoisted_8, toDisplayString(phase.title), 1)
+                  getPhaseStatus(item) === "done" ? (openBlock(), createElementBlock("span", _hoisted_5, "✓")) : getPhaseStatus(item) === "active" ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(index + 1), 1)) : (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(index + 1), 1)),
+                  createElementVNode("span", _hoisted_8, toDisplayString(item.title), 1)
                 ], 10, _hoisted_4),
-                pi < __props.options.length - 1 ? (openBlock(), createBlock(unref(ChevronRightSIcon), {
+                index < __props.options.length - 1 ? (openBlock(), createBlock(unref(ChevronRightSIcon), {
                   key: 0,
                   class: normalizeClass([
                     "qd-steps__separator",
-                    { "qd-steps__separator--done": getPhaseStatus(phase) === "done" }
+                    { "qd-steps__separator--done": getPhaseStatus(item) === "done" }
                   ])
                 }, null, 8, ["class"])) : createCommentVNode("", true)
               ], 64);
@@ -122,13 +115,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               (openBlock(true), createElementBlock(Fragment, null, renderList(currentPhaseStepIndexes.value, (stepIndex, subIndex) => {
                 return openBlock(), createElementBlock("div", {
                   key: stepIndex,
-                  class: normalizeClass([
-                    "qd-steps__substep",
-                    `qd-steps__substep--${getStepStatus(stepIndex)}`,
-                    {
-                      "qd-steps__substep--clickable": __props.canJumpTo(stepIndex)
-                    }
-                  ]),
+                  class: normalizeClass(["qd-steps__substep", `qd-steps__substep--${getStepStatus(stepIndex)}`]),
                   onClick: ($event) => handleStepClick(stepIndex)
                 }, [
                   createElementVNode("span", _hoisted_12, [
@@ -144,7 +131,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             createElementVNode("div", _hoisted_14, [
               _cache[0] || (_cache[0] = createTextVNode(" 第 ", -1)),
-              createElementVNode("b", null, toDisplayString(__props.current + 1), 1),
+              createElementVNode("b", null, toDisplayString(unref(current) + 1), 1),
               createTextVNode(" / " + toDisplayString(flatSteps.value.length) + " 步 ", 1)
             ])
           ])

package/dist/components/steps/props.d.ts

@@ -1,4 +1,3 @@
 export declare const qdStepsProps: {
     readonly maxReachedStep: undefined;
-    readonly canJumpTo: () => boolean;
 };

package/dist/components/steps/props.mjs

@@ -1,6 +1,5 @@
 const qdStepsProps = {
-  maxReachedStep: void 0,
-  canJumpTo: () => false
+  maxReachedStep: void 0
 };
 export {
   qdStepsProps

package/dist/components/steps/types.d.ts

@@ -6,5 +6,4 @@ export interface QdStepsProps {
     options: QdStepsGroup[];
     current: number;
     maxReachedStep?: number;
-    canJumpTo?: (stepIndex: number) => boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qidian-vue-ui",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "基于 TDesign 的 QiDian Vue UI 组件库",
   "author": "qidian",
   "license": "MIT",