@nextcloud/vue
Version:
Nextcloud vue components
77 lines (76 loc) • 3.23 kB
JavaScript
import '../assets/NcSelectUsers-BWhtNRbI.css';
import { defineComponent, mergeModels, useModel, ref, watch, createBlock, openBlock, unref, mergeProps, withCtx, createVNode } from "vue";
import { N as NcListItemIcon } from "./NcListItemIcon-8fWhyS_R.mjs";
import { N as NcSelect } from "./NcSelect-Czzsi3P_.mjs";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "NcSelectUsers",
props: /* @__PURE__ */ mergeModels({
ariaLabelClearSelected: {},
ariaLabelListbox: {},
ariaLabelDeselectOption: { type: Function },
disabled: { type: Boolean },
inputId: {},
inputLabel: {},
labelOutside: { type: Boolean },
keepOpen: { type: Boolean },
loading: { type: Boolean },
multiple: { type: Boolean },
noWrap: { type: Boolean },
options: {},
placeholder: {},
required: { type: Boolean }
}, {
"modelValue": {},
"modelModifiers": {}
}),
emits: /* @__PURE__ */ mergeModels(["search"], ["update:modelValue"]),
setup(__props, { emit: __emit }) {
const modelValue = useModel(__props, "modelValue");
const emit = __emit;
const search = ref("");
watch(search, () => emit("search", search.value));
const clickableArea = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue("--default-clickable-area"));
const gridBaseLine = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue("--default-grid-baseline"));
const avatarSize = clickableArea - 2 * gridBaseLine;
function filterBy(option, label, search2) {
const EMAIL_NOTATION = /[^<]*<([^>]+)/;
const match = search2.match(EMAIL_NOTATION);
const subname = option.subname?.toLocaleLowerCase() ?? "";
return match && subname.indexOf(match[1].toLocaleLowerCase()) > -1 || `${label} ${option.subname}`.toLocaleLowerCase().indexOf(search2.toLocaleLowerCase()) > -1;
}
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(NcSelect), mergeProps({
modelValue: modelValue.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
class: "nc-select-users"
}, _ctx.$props, {
"filter-by": filterBy,
label: "displayName",
onSearch: _cache[1] || (_cache[1] = ($event) => search.value = $event)
}), {
option: withCtx((option) => [
createVNode(unref(NcListItemIcon), mergeProps(option, {
"avatar-size": 32,
name: option.displayName,
search: search.value
}), null, 16, ["name", "search"])
]),
"selected-option": withCtx((selectedOption) => [
createVNode(unref(NcListItemIcon), mergeProps(selectedOption, {
"avatar-size": avatarSize,
name: selectedOption.displayName,
"no-margin": "",
search: search.value
}), null, 16, ["name", "search"])
]),
_: 1
}, 16, ["modelValue"]);
};
}
});
const NcSelectUsers = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4fbb6472"]]);
export {
NcSelectUsers as N
};
//# sourceMappingURL=NcSelectUsers-DVTI1DIZ.mjs.map