@nextcloud/vue
Version:
Nextcloud vue components
105 lines (104 loc) • 3.96 kB
JavaScript
import '../assets/NcAppNavigationSearch-BH8hBjGe.css';
import { defineComponent, mergeModels, useModel, useSlots, ref, useTemplateRef, watch, createElementBlock, openBlock, normalizeClass, createVNode, createCommentVNode, unref, withCtx, renderSlot, nextTick } from "vue";
import { useFocusWithin } from "@vueuse/core";
import { I as IconClose } from "./Close-D6ngJ4t9.mjs";
import { N as NcInputField } from "./NcInputField-Bwsh2aHY.mjs";
import { r as register, a as t } from "./_l10n-DrTiip5c.mjs";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
register();
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "NcAppNavigationSearch",
props: /* @__PURE__ */ mergeModels({
/**
* Text used to label the search input
*/
label: {
type: String,
default: t("Search …")
},
/**
* Placeholder of the search input
* By default the value of `label` is used.
*/
placeholder: {
type: String,
default: null
}
}, {
"modelValue": { default: "" },
"modelModifiers": {}
}),
emits: ["update:modelValue"],
setup(__props) {
const model = useModel(__props, "modelValue");
const slots = useSlots();
const inputElement = ref();
const { focused: inputHasFocus } = useFocusWithin(inputElement);
const transitionTimeout = Number.parseInt(window.getComputedStyle(window.document.body).getPropertyValue("--animation-quick")) || 100;
const actionsContainerElement = useTemplateRef("actionsContainer");
const hasActions = () => !!slots.actions?.({});
const showActions = ref(true);
const timeoutId = ref();
const hideActions = ref(false);
watch(inputHasFocus, () => {
showActions.value = !inputHasFocus.value;
window.clearTimeout(timeoutId.value);
if (showActions.value) {
hideActions.value = false;
} else {
window.setTimeout(() => {
hideActions.value = !showActions.value;
}, transitionTimeout);
}
});
function onCloseSearch() {
model.value = "";
if (hasActions()) {
showActions.value = true;
nextTick(() => actionsContainerElement.value?.querySelector("button")?.focus());
}
}
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass(["app-navigation-search", {
"app-navigation-search--has-actions": hasActions()
}])
}, [
createVNode(NcInputField, {
ref_key: "inputElement",
ref: inputElement,
modelValue: model.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
"aria-label": __props.label,
class: "app-navigation-search__input",
"label-outside": "",
placeholder: __props.placeholder ?? __props.label,
"show-trailing-button": "",
"trailing-button-label": unref(t)("Clear search"),
type: "search",
onTrailingButtonClick: onCloseSearch
}, {
"trailing-button-icon": withCtx(() => [
createVNode(IconClose, { size: 20 })
]),
_: 1
}, 8, ["modelValue", "aria-label", "placeholder", "trailing-button-label"]),
hasActions() ? (openBlock(), createElementBlock("div", {
key: 0,
ref: "actionsContainer",
class: normalizeClass(["app-navigation-search__actions", {
"app-navigation-search__actions--hidden": !showActions.value,
"hidden-visually": hideActions.value
}])
}, [
renderSlot(_ctx.$slots, "actions", {}, void 0, true)
], 2)) : createCommentVNode("", true)
], 2);
};
}
});
const NcAppNavigationSearch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f37737bd"]]);
export {
NcAppNavigationSearch as N
};
//# sourceMappingURL=NcAppNavigationSearch-DCgwKEm9.mjs.map