You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
141 lines
3.8 KiB
141 lines
3.8 KiB
2 months ago
|
'use strict';
|
||
|
|
||
|
Object.defineProperty(exports, '__esModule', { value: true });
|
||
|
|
||
|
var vue = require('vue');
|
||
|
require('../../utils/index.js');
|
||
|
var runtime = require('../../utils/vue/props/runtime.js');
|
||
|
var shared = require('@vue/shared');
|
||
|
var core = require('@vueuse/core');
|
||
|
var types = require('../../utils/types.js');
|
||
|
|
||
|
const _prop = runtime.buildProp({
|
||
|
type: runtime.definePropType(Boolean),
|
||
|
default: null
|
||
|
});
|
||
|
const _event = runtime.buildProp({
|
||
|
type: runtime.definePropType(Function)
|
||
|
});
|
||
|
const createModelToggleComposable = (name) => {
|
||
|
const updateEventKey = `update:${name}`;
|
||
|
const updateEventKeyRaw = `onUpdate:${name}`;
|
||
|
const useModelToggleEmits2 = [updateEventKey];
|
||
|
const useModelToggleProps2 = {
|
||
|
[name]: _prop,
|
||
|
[updateEventKeyRaw]: _event
|
||
|
};
|
||
|
const useModelToggle2 = ({
|
||
|
indicator,
|
||
|
toggleReason,
|
||
|
shouldHideWhenRouteChanges,
|
||
|
shouldProceed,
|
||
|
onShow,
|
||
|
onHide
|
||
|
}) => {
|
||
|
const instance = vue.getCurrentInstance();
|
||
|
const { emit } = instance;
|
||
|
const props = instance.props;
|
||
|
const hasUpdateHandler = vue.computed(() => shared.isFunction(props[updateEventKeyRaw]));
|
||
|
const isModelBindingAbsent = vue.computed(() => props[name] === null);
|
||
|
const doShow = (event) => {
|
||
|
if (indicator.value === true) {
|
||
|
return;
|
||
|
}
|
||
|
indicator.value = true;
|
||
|
if (toggleReason) {
|
||
|
toggleReason.value = event;
|
||
|
}
|
||
|
if (shared.isFunction(onShow)) {
|
||
|
onShow(event);
|
||
|
}
|
||
|
};
|
||
|
const doHide = (event) => {
|
||
|
if (indicator.value === false) {
|
||
|
return;
|
||
|
}
|
||
|
indicator.value = false;
|
||
|
if (toggleReason) {
|
||
|
toggleReason.value = event;
|
||
|
}
|
||
|
if (shared.isFunction(onHide)) {
|
||
|
onHide(event);
|
||
|
}
|
||
|
};
|
||
|
const show = (event) => {
|
||
|
if (props.disabled === true || shared.isFunction(shouldProceed) && !shouldProceed())
|
||
|
return;
|
||
|
const shouldEmit = hasUpdateHandler.value && core.isClient;
|
||
|
if (shouldEmit) {
|
||
|
emit(updateEventKey, true);
|
||
|
}
|
||
|
if (isModelBindingAbsent.value || !shouldEmit) {
|
||
|
doShow(event);
|
||
|
}
|
||
|
};
|
||
|
const hide = (event) => {
|
||
|
if (props.disabled === true || !core.isClient)
|
||
|
return;
|
||
|
const shouldEmit = hasUpdateHandler.value && core.isClient;
|
||
|
if (shouldEmit) {
|
||
|
emit(updateEventKey, false);
|
||
|
}
|
||
|
if (isModelBindingAbsent.value || !shouldEmit) {
|
||
|
doHide(event);
|
||
|
}
|
||
|
};
|
||
|
const onChange = (val) => {
|
||
|
if (!types.isBoolean(val))
|
||
|
return;
|
||
|
if (props.disabled && val) {
|
||
|
if (hasUpdateHandler.value) {
|
||
|
emit(updateEventKey, false);
|
||
|
}
|
||
|
} else if (indicator.value !== val) {
|
||
|
if (val) {
|
||
|
doShow();
|
||
|
} else {
|
||
|
doHide();
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
const toggle = () => {
|
||
|
if (indicator.value) {
|
||
|
hide();
|
||
|
} else {
|
||
|
show();
|
||
|
}
|
||
|
};
|
||
|
vue.watch(() => props[name], onChange);
|
||
|
if (shouldHideWhenRouteChanges && instance.appContext.config.globalProperties.$route !== void 0) {
|
||
|
vue.watch(() => ({
|
||
|
...instance.proxy.$route
|
||
|
}), () => {
|
||
|
if (shouldHideWhenRouteChanges.value && indicator.value) {
|
||
|
hide();
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
vue.onMounted(() => {
|
||
|
onChange(props[name]);
|
||
|
});
|
||
|
return {
|
||
|
hide,
|
||
|
show,
|
||
|
toggle,
|
||
|
hasUpdateHandler
|
||
|
};
|
||
|
};
|
||
|
return {
|
||
|
useModelToggle: useModelToggle2,
|
||
|
useModelToggleProps: useModelToggleProps2,
|
||
|
useModelToggleEmits: useModelToggleEmits2
|
||
|
};
|
||
|
};
|
||
|
const { useModelToggle, useModelToggleProps, useModelToggleEmits } = createModelToggleComposable("modelValue");
|
||
|
|
||
|
exports.createModelToggleComposable = createModelToggleComposable;
|
||
|
exports.useModelToggle = useModelToggle;
|
||
|
exports.useModelToggleEmits = useModelToggleEmits;
|
||
|
exports.useModelToggleProps = useModelToggleProps;
|
||
|
//# sourceMappingURL=index.js.map
|