@oruga-ui/oruga-next
Version:
UI components for Vue.js and CSS framework agnostic
342 lines (341 loc) • 14.9 kB
JavaScript
;
/*! Oruga v0.11.0 | MIT License | github.com/oruga-ui/oruga */
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const Autocomplete_vue_vue_type_script_setup_true_lang = require("./Autocomplete.vue_vue_type_script_setup_true_lang-COv3ln9P.cjs");
const Tag_vue_vue_type_script_setup_true_lang = require("./Tag.vue_vue_type_script_setup_true_lang-DRQ4hljF.cjs");
const config = require("./config-eYBvpFOZ.cjs");
const defineClasses = require("./defineClasses-Cqhbv-UT.cjs");
const useInputHandler = require("./useInputHandler-DDJU6Lju.cjs");
const useOptions = require("./useOptions-YcqJ438a.cjs");
const useSequentialId = require("./useSequentialId-BnH6otip.cjs");
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
isOruga: true,
name: "OTaginput",
configField: "taginput",
inheritAttrs: false
},
__name: "Taginput",
props: /* @__PURE__ */ vue.mergeModels({
override: { type: Boolean, default: void 0 },
modelValue: { default: void 0 },
input: { default: "" },
options: { default: void 0 },
filter: { type: Function, default: void 0 },
size: { default: () => config.getDefault("taginput.size") },
variant: { default: () => config.getDefault("taginput.variant") },
maxitems: { default: void 0 },
maxlength: { default: void 0 },
counter: { type: Boolean, default: () => config.getDefault("taginput.counter", true) },
openOnFocus: { type: Boolean, default: () => config.getDefault("taginput.openOnFocus", true) },
keepOpen: { type: Boolean, default: () => config.getDefault("taginput.keepOpen", false) },
placeholder: { default: void 0 },
expanded: { type: Boolean, default: false },
disabled: { type: Boolean, default: false },
keepFirst: { type: Boolean, default: () => config.getDefault("taginput.keepFirst", false) },
allowNew: { type: Boolean, default: () => config.getDefault("taginput.allowNew", false) },
allowDuplicates: { type: Boolean, default: () => config.getDefault("taginput.allowDuplicates", false) },
validateItem: { type: Function, default: () => true },
createItem: { type: Function, default: (item) => item },
checkScroll: { type: Boolean, default: () => config.getDefault("taginput.checkScroll", false) },
closeable: { type: Boolean, default: () => config.getDefault("taginput.closeable", true) },
iconPack: { default: () => config.getDefault("taginput.iconPack") },
icon: { default: () => config.getDefault("taginput.icon") },
closeIcon: { default: () => config.getDefault("taginput.closeIcon", "close") },
ariaCloseLabel: { default: () => config.getDefault("taginput.ariaCloseLabel", "Remove") },
autocomplete: { default: () => config.getDefault("taginput.autocomplete", "off") },
useHtml5Validation: { type: Boolean, default: () => config.getDefault("useHtml5Validation", true) },
customValidity: { type: [String, Function], default: void 0 },
teleport: { type: [Boolean, String, Object], default: () => config.getDefault("taginput.teleport", false) },
rootClass: {},
expandedClass: {},
disabledClass: {},
sizeClass: {},
variantClass: {},
containerClass: {},
itemClass: {},
counterClass: {},
autocompleteClasses: { default: () => config.getDefault("taginput.autocompleteClasses", {}) }
}, {
"modelValue": { default: void 0 },
"modelModifiers": {},
"input": { default: "" },
"inputModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["update:model-value", "update:input", "input", "add", "remove", "focus", "blur", "invalid", "icon-click", "icon-right-click", "scroll-start", "scroll-end"], ["update:modelValue", "update:input"]),
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const autocompleteRef = vue.useTemplateRef("autocompleteComponent");
const { checkHtml5Validity, setFocus, onFocus, onBlur, onInvalid } = useInputHandler.useInputHandler(autocompleteRef, emits, props);
const isDropdownActive = vue.ref(false);
const selectedItems = vue.useModel(__props, "modelValue");
const inputValue = vue.useModel(__props, "input");
const inputLength = vue.computed(() => inputValue.value.trim().length);
const itemsLength = vue.computed(() => {
var _a;
return ((_a = selectedItems.value) == null ? void 0 : _a.length) || 0;
});
const { nextSequence } = useSequentialId.useSequentialId();
const groupedOptions = vue.computed(() => {
const normalizedOptions = useOptions.normalizeOptions(props.options, nextSequence);
const groupedOptions2 = useOptions.toOptionsGroup(normalizedOptions, nextSequence());
return groupedOptions2;
});
const selectedOptions = vue.computed(() => {
if (!selectedItems.value) return [];
return selectedItems.value.map((value) => {
const option = useOptions.findOption(groupedOptions, value);
if (option) return option;
else return { label: String(value), value, key: vue.useId() };
});
});
const hasInput = vue.computed(
() => props.maxitems == null || itemsLength.value < Number(props.maxitems)
);
vue.watchEffect(() => {
if (!hasInput.value) onBlur(new Event("blur"));
});
function addItem(item) {
var _a;
item = item || inputValue.value.trim();
if (item) {
const itemToAdd = props.createItem(item);
if (!((_a = selectedItems.value) == null ? void 0 : _a.length)) {
if (props.validateItem(item)) {
selectedItems.value = [itemToAdd];
emits("add", itemToAdd);
}
} else {
const add = !props.allowDuplicates ? !selectedItems.value.includes(itemToAdd) : true;
if (add && props.validateItem(item)) {
selectedItems.value = [...selectedItems.value, itemToAdd];
emits("add", itemToAdd);
}
}
}
requestAnimationFrame(() => {
inputValue.value = "";
emits("input", "", new Event("input"));
});
}
function removeItem(index2, event) {
var _a;
if (!((_a = selectedItems.value) == null ? void 0 : _a.length)) return;
const item = selectedItems.value.at(index2);
if (!item) return;
selectedItems.value = selectedItems.value.toSpliced(index2, 1);
emits("remove", item);
if (event) event.stopPropagation();
if (props.openOnFocus && autocompleteRef.value) setFocus();
}
function onSelect(option) {
if (!option) return;
addItem(option);
}
function onInput(value, event) {
emits("input", value == null ? void 0 : value.trim(), event);
}
function onBackspace() {
var _a;
if (!((_a = inputValue.value) == null ? void 0 : _a.length) && itemsLength.value > 0)
removeItem(itemsLength.value - 1);
}
function onEnter() {
if (props.allowNew && !isDropdownActive.value) addItem();
}
const rootClasses = defineClasses.defineClasses(
["rootClass", "o-taginput"],
[
"sizeClass",
"o-taginput--",
vue.computed(() => props.size),
vue.computed(() => !!props.size)
],
[
"variantClass",
"o-taginput--",
vue.computed(() => props.variant),
vue.computed(() => !!props.variant)
],
[
"expandedClass",
"o-taginput--expanded",
null,
vue.computed(() => props.expanded)
],
[
"disabledClass",
"o-taginput--disabled",
null,
vue.computed(() => props.disabled)
]
);
const containerClasses = defineClasses.defineClasses([
"containerClass",
"o-taginput__container"
]);
const itemClasses = defineClasses.defineClasses(
["itemClass", "o-taginput__item"],
[
"variantClass",
"o-taginput__item--",
vue.computed(() => props.variant),
vue.computed(() => !!props.variant)
]
);
const counterClasses = defineClasses.defineClasses(["counterClass", "o-taginput__counter"]);
const autocompleteRootClasses = defineClasses.defineClasses([
"autocompleteClasses.rootClass",
"o-taginput__autocomplete"
]);
const autocompleteInputClasses = defineClasses.defineClasses([
"autocompleteClasses.inputClasses.inputClass",
"o-taginput__input"
]);
const attrs = vue.useAttrs();
const autocompleteBind = vue.computed(() => ({
...attrs,
"root-class": defineClasses.getActiveClasses(autocompleteRootClasses),
"input-classes": {
"input-class": defineClasses.getActiveClasses(autocompleteInputClasses)
},
...props.autocompleteClasses
}));
__expose({ checkHtml5Validity, focus: setFocus, value: selectedItems });
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
"data-oruga": "taginput",
class: vue.normalizeClass(vue.unref(rootClasses))
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(containerClasses)),
onFocus: _cache[6] || (_cache[6] = //@ts-ignore
(...args) => vue.unref(onFocus) && vue.unref(onFocus)(...args)),
onBlur: _cache[7] || (_cache[7] = //@ts-ignore
(...args) => vue.unref(onBlur) && vue.unref(onBlur)(...args))
}, [
vue.renderSlot(_ctx.$slots, "selected", {
items: selectedItems.value,
options: selectedOptions.value,
removeItem
}, () => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(selectedOptions.value, (option, index2) => {
return vue.openBlock(), vue.createBlock(Tag_vue_vue_type_script_setup_true_lang._sfc_main, {
key: option.key,
label: option.label,
class: vue.normalizeClass(vue.unref(itemClasses)),
closeable: _ctx.closeable && !_ctx.disabled,
"close-icon": _ctx.closeIcon,
"close-icon-pack": _ctx.iconPack,
"aria-close-label": _ctx.ariaCloseLabel,
onClose: ($event) => removeItem(index2, $event)
}, null, 8, ["label", "class", "closeable", "close-icon", "close-icon-pack", "aria-close-label", "onClose"]);
}), 128))
]),
vue.withDirectives(vue.createVNode(Autocomplete_vue_vue_type_script_setup_true_lang._sfc_main, vue.mergeProps({
ref: "autocompleteComponent",
active: isDropdownActive.value,
"onUpdate:active": _cache[0] || (_cache[0] = ($event) => isDropdownActive.value = $event),
input: inputValue.value,
"onUpdate:input": _cache[1] || (_cache[1] = ($event) => inputValue.value = $event)
}, autocompleteBind.value, {
options: _ctx.options,
filter: _ctx.filter,
placeholder: _ctx.placeholder,
icon: _ctx.icon,
"icon-pack": _ctx.iconPack,
maxlength: _ctx.maxlength,
size: _ctx.size,
disabled: _ctx.disabled,
autocomplete: _ctx.autocomplete,
"open-on-focus": _ctx.openOnFocus,
"keep-first": _ctx.keepFirst,
"keep-open": _ctx.keepOpen,
"check-scroll": _ctx.checkScroll,
teleport: _ctx.teleport,
"has-counter": false,
"use-html5-validation": false,
expanded: "",
onInput,
onFocus: vue.unref(onFocus),
onBlur: vue.unref(onBlur),
onInvalid: vue.unref(onInvalid),
onKeydown: [
vue.withKeys(onEnter, ["enter"]),
vue.withKeys(onEnter, ["tab"]),
vue.withKeys(onBackspace, ["backspace"])
],
onSelect,
onScrollStart: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("scroll-start")),
onScrollEnd: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("scroll-end")),
onIconClick: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("icon-click", $event)),
onIconRightClick: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("icon-right-click", $event))
}), vue.createSlots({ _: 2 }, [
_ctx.$slots.header ? {
name: "header",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "header")
]),
key: "0"
} : void 0,
_ctx.$slots.default ? {
name: "default",
fn: vue.withCtx(({ option, index: index2, value }) => [
vue.renderSlot(_ctx.$slots, "default", {
option,
index: index2,
value
})
]),
key: "1"
} : void 0,
_ctx.$slots.empty ? {
name: "empty",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "empty")
]),
key: "2"
} : void 0,
_ctx.$slots.footer ? {
name: "footer",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "footer")
]),
key: "3"
} : void 0
]), 1040, ["active", "input", "options", "filter", "placeholder", "icon", "icon-pack", "maxlength", "size", "disabled", "autocomplete", "open-on-focus", "keep-first", "keep-open", "check-scroll", "teleport", "onFocus", "onBlur", "onInvalid"]), [
[vue.vShow, hasInput.value]
])
], 34),
_ctx.counter && (_ctx.maxitems || _ctx.maxlength) ? (vue.openBlock(), vue.createElementBlock("small", {
key: 0,
class: vue.normalizeClass(vue.unref(counterClasses))
}, [
_ctx.maxlength && inputLength.value > 0 ? vue.renderSlot(_ctx.$slots, "counter", {
key: 0,
items: inputLength.value,
total: _ctx.maxlength
}, () => [
vue.createTextVNode(vue.toDisplayString(inputLength.value) + " / " + vue.toDisplayString(_ctx.maxlength), 1)
]) : _ctx.maxitems ? vue.renderSlot(_ctx.$slots, "counter", {
key: 1,
items: itemsLength.value,
total: _ctx.maxitems
}, () => [
vue.createTextVNode(vue.toDisplayString(itemsLength.value) + " / " + vue.toDisplayString(_ctx.maxitems), 1)
]) : vue.createCommentVNode("", true)
], 2)) : vue.createCommentVNode("", true)
], 2);
};
}
});
const index = {
install(Vue) {
config.registerComponent(Vue, _sfc_main);
}
};
exports.OTaginput = _sfc_main;
exports.default = index;
//# sourceMappingURL=taginput.cjs.map