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