yanzhen-design-vue
Version:
82 lines (81 loc) • 2.41 kB
JavaScript
import { ref, useAttrs, computed, mergeProps, unref, watch, reactive, nextTick, createVNode } from "vue";
import { useProxyProps } from "@yanzhen-libs/utils-vue";
import { pick, flattenDeep, isString, uniq } from "lodash-es";
import { isEmptyArray, isEmptyValue } from "@yanzhen-libs/utils";
import { useVModel } from "@vueuse/core";
import { Tag } from "ant-design-vue";
import { AntTag } from "./tag.mjs";
function useTag(props, emit) {
const _ref = ref();
const _inputRef = ref();
const tags = ref(getTags());
const attrs = useAttrs();
const visible = useVModel(props, "visible", emit);
const config = computed(() => {
return pick(props, ...Object.keys(AntTag.props));
});
const proxyProps = useProxyProps(config, AntTag.emits, {
emit,
exclude: ["visible", "onUpdate:visible"],
filter: true
});
const _props = computed(() => {
return mergeProps(attrs, unref(proxyProps));
});
function getTags() {
if (isEmptyArray(props.value)) return [];
return flattenDeep(isString(props.value) ? [props.value] : props.value);
}
function setTags(value) {
const newValue = uniq(value).filter((value2) => !isEmptyValue(value2) && isString(value2));
emit("update:value", newValue.length > 1 ? newValue : newValue[1]);
}
watch(tags, (newTags) => {
setTags(newTags);
});
const editState = reactive({
inputVisible: false,
inputValue: ""
});
const handleClose = (e, removedTag) => {
tags.value = unref(tags).filter((tag) => tag !== removedTag);
emit("close", e);
};
async function showInput() {
var _a, _b;
editState.inputVisible = true;
await nextTick();
(_b = (_a = unref(_inputRef)) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
}
function handleInputConfirm(e) {
const value = flattenDeep([unref(tags), editState.inputValue]);
if (!isEmptyValue(editState.inputValue)) {
tags.value = value;
console.log("[tags]", tags, tags.value);
emit("update:value", tags.value);
emit("blur", e);
}
editState.inputVisible = false;
editState.inputValue = "";
}
return [
{
_ref,
_inputRef,
visible,
tags,
proxyProps,
_props,
handleClose,
editState,
handleInputConfirm,
showInput
},
(props2) => {
return createVNode(Tag, mergeProps(attrs, props2));
}
];
}
export {
useTag
};