feat(item): add reject event

chizukicn · Dec 8, 2023 · 77a5f18 · 77a5f18
1 parent 5249e5a
commit 77a5f18
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 11 deletions.
diff --git a/packages/core/src/item/component.ts b/packages/core/src/item/component.ts
@@ -1,5 +1,5 @@
 import { defineComponent, h } from "vue";
-import { itemProps, useSelectionItem } from "@hoci/core";
+import { itemEmits, itemProps, useSelectionItem } from "@hoci/core";
 import { capitalize } from "tslx";
 
 export const HiItem = defineComponent({
@@ -11,6 +11,7 @@ export const HiItem = defineComponent({
       default: "div"
     }
   },
+  emits: itemEmits,
   setup(props, context) {
     const { render, activate, className, isDisabled, activateEvent } = useSelectionItem(
       props,

diff --git a/packages/core/src/item/index.ts b/packages/core/src/item/index.ts
@@ -1,5 +1,5 @@
 import type { ActivateEvent, ElementLike } from "@hoci/shared";
-import { defineHookComponent, defineHookProps, valuePropType } from "@hoci/shared";
+import { defineHookComponent, defineHookEmits, defineHookProps, valuePropType } from "@hoci/shared";
 import type { PropType } from "vue";
 import { computed, watch } from "vue";
 import { tryOnScopeDispose } from "@vueuse/core";
@@ -34,17 +34,22 @@ export const itemProps = defineHookProps({
   }
 });
 
+export const itemEmits = defineHookEmits(["reject"]);
+
 
 export const useSelectionItem = defineHookComponent({
   props: itemProps,
-  setup(props, { slots }) {
+  emits: itemEmits,
+  setup(props, { slots, emit }) {
     const context = useSelectionContext();
 
     const activate = () => {
       if (props.disabled) {
+        emit("reject", props.value);
+        context.reject(props.value);
         return;
       }
-      context.changeActive(props.value);
+      context.activate(props.value);
     };
 
     const label = computed(() => {

diff --git a/packages/core/src/selection/index.ts b/packages/core/src/selection/index.ts
@@ -33,6 +33,12 @@ export interface Option {
 
 
 export interface HiSelectionContext {
+  activate: (_: any) => void
+  reject: (_: any) => void
+  /**
+   * @deprecated
+   * use activate instead
+   */
   changeActive: (_: any) => void
   isActive: (_: any) => boolean
   init?: InitFunction
@@ -106,7 +112,8 @@ export const selectionEmits = defineHookEmits([
   "update:modelValue",
   "change",
   "load",
-  "unload"
+  "unload",
+  "reject"
 ]);
 
 const HiSelectionContextSymbol: InjectionKey<HiSelectionContext> = Symbol("[hi-selection]context");
@@ -116,7 +123,9 @@ export function useSelectionContext() {
   const sharedConfig = useSharedConfig();
   return inject(HiSelectionContextSymbol, {
     isActive: () => false,
+    activate: () => {},
     changeActive: () => {},
+    reject: () => {},
     activeClass: "active",
     unactiveClass: "unactive",
     disabledClass: "disabled",
@@ -174,7 +183,7 @@ export const useSelectionList = defineHookComponent({
       return actives.includes(value);
     }
 
-    function changeActive(value: any) {
+    function activate(value: any) {
       if (isActive(value)) {
         if (props.multiple || props.clearable) {
           actives.splice(actives.indexOf(value), 1);
@@ -195,6 +204,12 @@ export const useSelectionList = defineHookComponent({
       }
     }
 
+
+    function reject(value: any) {
+      emit("reject", value);
+    }
+
+
     const init = (option: Option) => {
       function remove() {
         const index = options.findIndex((e) => e.id === option.id);
@@ -228,8 +243,10 @@ export const useSelectionList = defineHookComponent({
       defaultValue: computed(() => props.defaultValue),
       activateEvent: computed(() => props.activateEvent ?? sharedConfig.activateEvent),
       active: currentValue,
-      changeActive,
+      activate,
+      changeActive: activate,
       isActive,
+      reject,
       init
     }));
 
@@ -244,7 +261,7 @@ export const useSelectionList = defineHookComponent({
 
     const slotData: HiSelectionSlotData = {
       isActive,
-      changeActive,
+      changeActive: activate,
       renderItem
     };
 
@@ -256,7 +273,7 @@ export const useSelectionList = defineHookComponent({
       options,
       actives,
       isActive,
-      changeActive,
+      changeActive: activate,
       renderItem,
       render
     };

diff --git a/packages/core/src/switch/index.ts b/packages/core/src/switch/index.ts
@@ -39,7 +39,7 @@ export const switchProps = defineHookProps({
 
 export type HiSwitchProps = typeof switchProps;
 
-export const switchEmits = defineHookEmits(["update:modelValue", "change"]);
+export const switchEmits = defineHookEmits(["update:modelValue", "change", "reject"]);
 
 export const useSwitch = defineHookComponent({
   props: switchProps,
@@ -52,6 +52,7 @@ export const useSwitch = defineHookComponent({
 
     const toggle = function (value?: any) {
       if (props.disabled) {
+        context.emit("reject", value);
         return;
       }
       const oldValue = modelValue.value;

diff --git a/packages/core/src/tab-pane/component.ts b/packages/core/src/tab-pane/component.ts
@@ -1,11 +1,12 @@
 import { defineComponent, h } from "vue";
 import { capitalize } from "tslx";
-import { itemProps, useSelectionItem } from "../item";
+import { itemEmits, itemProps, useSelectionItem } from "../item";
 
 export const HiTabPane = defineComponent({
   props: {
     ...itemProps
   },
+  emits: itemEmits,
   setup(props, context) {
     const { className, activateEvent, activate, isDisabled, label } = useSelectionItem(props, context);
     return () => {