upd(InkDropdown): add stepping

Author: xiaoland

.changeset/afraid-impalas-notice.md

@@ -0,0 +1,5 @@
+---
+"@inkcre/web-design": patch
+---
+
+Update InkDropdown: add stepping

packages/web-design/agent-skills/components/references/inkDropdown.md

@@ -95,6 +95,7 @@ export const inkDropdownProps = {
   },
   placeholder: makeStringProp("Select an option"),
   displayAs: makeStringProp<"box">("box"),
+  enableStepping: makeBooleanProp(false),
 } as const;
 ```
 

packages/web-design/src/components/inkDropdown/inkDropdown.scss

@@ -107,36 +107,3 @@
   color: sys-var(color, text, subtle);
   @include apply-font(label-sm);
 }
-
-.ink-dropdown__refresh {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: sys-var(size, md);
-  height: sys-var(size, md);
-  padding: 0;
-  border: 1px solid sys-var(color, border, subtle);
-  background-color: sys-var(color, surface, base);
-  cursor: pointer;
-  transition: all 0.2s;
-  flex-shrink: 0;
-
-  &:hover:not(:disabled) {
-    border-color: sys-var(color, border, base);
-    background-color: sys-var(color, surface, base-hover);
-  }
-
-  &:disabled {
-    opacity: sys-var(opacity, disabled);
-    cursor: not-allowed;
-  }
-
-  &--loading {
-    border-color: sys-var(color, border, base);
-  }
-}
-
-.ink-dropdown__refresh i {
-  @include apply-icon(md);
-  color: sys-var(color, text, base);
-}

packages/web-design/src/components/inkDropdown/inkDropdown.story.vue

@@ -76,5 +76,20 @@ const onRefresh = () => {
         :refresher="asyncOptionsLoader"
       />
     </Variant>
+
+    <!-- [Feature] Stepping -->
+    <Variant title="With Stepping">
+      <InkDropdown v-model="selectedValue" :options="options" enable-stepping />
+    </Variant>
+
+    <!-- [Feature] Stepping & Refresh -->
+    <Variant title="Stepping & Refresh">
+      <InkDropdown
+        v-model="selectedValue"
+        v-model:options="options"
+        :refresher="onRefresh"
+        enable-stepping
+      />
+    </Variant>
   </Story>
 </template>

packages/web-design/src/components/inkDropdown/inkDropdown.test.ts

@@ -2,6 +2,7 @@ import { describe, it, expect, vi } from "vitest";
 import { mount } from "@vue/test-utils";
 import { nextTick } from "vue";
 import InkDropdown from "./inkDropdown.vue";
+import InkButton from "../inkButton/inkButton.vue";
 import type { DropdownOption } from "./inkDropdown";
 
 describe("InkDropdown", () => {
@@ -175,4 +176,75 @@ describe("InkDropdown", () => {
 
     expect(refresher).toHaveBeenCalled();
   });
+
+  describe("stepping", () => {
+    const options = [
+      { label: "Opt 1", value: "v1" },
+      { label: "Opt 2", value: "v2" },
+      { label: "Opt 3", value: "v3" },
+    ];
+
+    it("loops forward correctly", async () => {
+      const wrapper = mount(InkDropdown, {
+        props: {
+          modelValue: "v1",
+          options,
+          enableStepping: true,
+        },
+      });
+
+      const nextBtn = wrapper.findAllComponents(InkButton).at(1);
+      await nextBtn?.trigger("click");
+      expect(wrapper.emitted("update:modelValue")?.[0]).toEqual(["v2"]);
+
+      await wrapper.setProps({ modelValue: "v3" });
+      await nextBtn?.trigger("click");
+      expect(wrapper.emitted("update:modelValue")?.[1]).toEqual(["v1"]);
+    });
+
+    it("loops backward correctly", async () => {
+      const wrapper = mount(InkDropdown, {
+        props: {
+          modelValue: "v1",
+          options,
+          enableStepping: true,
+        },
+      });
+
+      const prevBtn = wrapper.findAllComponents(InkButton).at(0);
+      await prevBtn?.trigger("click");
+      expect(wrapper.emitted("update:modelValue")?.[0]).toEqual(["v3"]);
+
+      await wrapper.setProps({ modelValue: "v2" });
+      await prevBtn?.trigger("click");
+      expect(wrapper.emitted("update:modelValue")?.[1]).toEqual(["v1"]);
+    });
+
+    it("is disabled when editable is false", () => {
+      const wrapper = mount(InkDropdown, {
+        props: {
+          options,
+          enableStepping: true,
+          editable: false,
+        },
+      });
+
+      const buttons = wrapper.findAllComponents(InkButton);
+      expect(buttons.at(0)?.find("button").element.disabled).toBe(true);
+      expect(buttons.at(1)?.find("button").element.disabled).toBe(true);
+    });
+
+    it("is disabled when options are empty", () => {
+      const wrapper = mount(InkDropdown, {
+        props: {
+          options: [],
+          enableStepping: true,
+        },
+      });
+
+      const buttons = wrapper.findAllComponents(InkButton);
+      expect(buttons.at(0)?.find("button").element.disabled).toBe(true);
+      expect(buttons.at(1)?.find("button").element.disabled).toBe(true);
+    });
+  });
 });

packages/web-design/src/components/inkDropdown/inkDropdown.ts

@@ -29,6 +29,7 @@ export const inkDropdownProps = {
   },
   placeholder: makeStringProp("Select an option"),
   displayAs: makeStringProp<"box">("box"),
+  enableStepping: makeBooleanProp(false),
 } as const;
 
 // --- Emits ---

packages/web-design/src/components/inkDropdown/inkDropdown.vue

@@ -7,6 +7,7 @@ import {
   type DropdownOption,
 } from "./inkDropdown";
 import InkField from "../inkField/inkField.vue";
+import InkButton from "../inkButton/inkButton.vue";
 import { INK_FORM_CONTEXT_KEY } from "../inkForm/inkForm";
 import { useOptionalModel } from "../../composables/use-optional-model";
 
@@ -36,6 +37,14 @@ const displayValue = computed(() => {
   return option ? option.label : props.placeholder;
 });
 
+const currentIndex = computed(() => {
+  return optionsModel.value.findIndex((opt) => opt.value === props.modelValue);
+});
+
+const isSteppingDisabled = computed(() => {
+  return !props.editable || optionsModel.value.length === 0;
+});
+
 // --- methods ---
 const loadOptionsIfNeeded = async (force: boolean = false) => {
   if (optionsModel.value.length > 0 && !force) {
@@ -58,6 +67,20 @@ const onRefresh = async () => {
   await loadOptionsIfNeeded(true);
 };
 
+const onPrev = () => {
+  if (isSteppingDisabled.value) return;
+  const len = optionsModel.value.length;
+  const nextIdx = (currentIndex.value - 1 + len) % len;
+  onOptionSelect(optionsModel.value[nextIdx].value);
+};
+
+const onNext = () => {
+  if (isSteppingDisabled.value) return;
+  const len = optionsModel.value.length;
+  const nextIdx = (currentIndex.value + 1) % len;
+  onOptionSelect(optionsModel.value[nextIdx].value);
+};
+
 const onDropdownClick = async () => {
   if (props.editable) {
     if (showOptions.value) {
@@ -115,22 +138,34 @@ const [DefineDropdown, ReuseDropdown] = createReusableTemplate();
         ></span>
       </div>
 
+      <!-- Stepping Buttons -->
+      <template v-if="enableStepping">
+        <InkButton
+          icon="i-mdi-chevron-left"
+          :disabled="isSteppingDisabled"
+          @click="onPrev"
+          type="square"
+          title="Previous"
+        />
+        <InkButton
+          icon="i-mdi-chevron-right"
+          :disabled="isSteppingDisabled"
+          type="square"
+          @click="onNext"
+          title="Next"
+        />
+      </template>
+
       <!-- Refresh Button -->
-      <button
+      <InkButton
         v-if="props.refresher"
-        :class="[
-          'ink-dropdown__refresh',
-          { 'ink-dropdown__refresh--loading': isRefreshing },
-        ]"
+        class="ink-dropdown__refresh"
+        :icon="`i-mdi-refresh ${isRefreshing ? 'animate-spin' : ''}`"
         :disabled="isRefreshing"
-        @click.stop="onRefresh"
-        type="button"
+        type="square"
+        @click="onRefresh"
         title="Refresh options"
-      >
-        <span
-          :class="['i-mdi-refresh', { 'animate-spin': isRefreshing }]"
-        ></span>
-      </button>
+      />
 
       <!-- Options -->
       <div v-if="showOptions" class="ink-dropdown__options">

packages/web-design/todo.md

@@ -17,5 +17,7 @@
 - [ ] InkAutoForm 支持切换编辑模式
 - [x] i18n
 - [ ] make InkPagination use v-model
-- [ ] Agent Skills
+- [x] Agent Skills
 - [ ] InkTooltip, InkDropdown with css `position-anchor`
+- [ ] InkDropdown Stepping
+- [ ] InkDropdown keyword filter (enter any symbol will trigger search) (searching label and description)