@oiij/naive-ui/dist/components/toggle-input/ToggleInput.js

Some Composable Functions And Components for Vue 3

import { createElementBlock, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeProps, openBlock, ref, renderSlot, toDisplayString, unref, useModel, useTemplateRef, watchEffect } from "vue";
import { NInput } from "naive-ui";

//#region src/components/toggle-input/ToggleInput.vue
const _sfc_main = /* @__PURE__ */ defineComponent({
	__name: "ToggleInput",
	props: /* @__PURE__ */ mergeModels({
		trigger: { default: "click" },
		inputProps: {}
	}, {
		"value": {},
		"valueModifiers": {}
	}),
	emits: /* @__PURE__ */ mergeModels(["trigger"], ["update:value"]),
	setup(__props, { emit: __emit }) {
		const emit = __emit;
		const value = useModel(__props, "value");
		const showInput = ref(false);
		const inputRef = useTemplateRef("input-ref");
		const inputValue = ref(value.value);
		watchEffect(() => {
			inputValue.value = value.value;
		});
		function onTrigger() {
			inputValue.value = value.value;
			showInput.value = true;
			emit("trigger");
			nextTick(() => {
				inputRef.value?.focus();
			});
		}
		function onUpdateValue(val) {
			inputValue.value = val;
		}
		function hideInput() {
			showInput.value = false;
		}
		function onEmit() {
			hideInput();
			value.value = inputValue.value;
		}
		return (_ctx, _cache) => {
			return openBlock(), createElementBlock("div", {
				onClick: _cache[0] || (_cache[0] = ($event) => __props.trigger === "click" && onTrigger()),
				onDblclick: _cache[1] || (_cache[1] = ($event) => __props.trigger === "dblclick" && onTrigger())
			}, [showInput.value ? renderSlot(_ctx.$slots, "input", normalizeProps(mergeProps({ key: 0 }, {
				onUpdateValue,
				hideInput,
				onEmit,
				inputValue: inputValue.value
			})), () => [createVNode(unref(NInput), mergeProps({
				ref: "input-ref",
				value: typeof inputValue.value === "string" ? inputValue.value : inputValue.value?.toString()
			}, __props.inputProps, {
				"onUpdate:value": onUpdateValue,
				onBlur: onEmit
			}), null, 16, ["value"])]) : renderSlot(_ctx.$slots, "default", normalizeProps(mergeProps({ key: 1 }, { value: inputValue.value })), () => [createTextVNode(toDisplayString(inputValue.value), 1)])], 32);
		};
	}
});
var ToggleInput_default = _sfc_main;

//#endregion
export { ToggleInput_default as default };