diff --git a/packages/core/src/item/component.ts b/packages/core/src/item/component.ts index db505ae..bf33fbd 100644 --- 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 index 31a2db1..c9e0026 100644 --- 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 index 16e3f50..a6b41d6 100644 --- 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 = 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 index e8a97ed..0479955 100644 --- 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 index 426cc2e..d0a5251 100644 --- 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 () => {