@nextcloud/vue
Version:
Nextcloud vue components
102 lines (101 loc) • 3.84 kB
JavaScript
import '../assets/NcAppNavigationSearch-o97SOfOb.css';
import { useFocusWithin } from "@vueuse/core";
import { useSlots, ref, watch, nextTick } from "vue";
import { C as Close } from "./Close-BtLPUSdO.mjs";
import { N as NcInputField } from "./NcInputField-kKgY_2GV.mjs";
import { r as register, q as t42, s as t15, a as t } from "./_l10n-BEfeU7gr.mjs";
import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
register(t15, t42);
const __default__ = {
name: "NcAppNavigationSearch",
model: {
event: "update:modelValue",
prop: "modelValue"
}
};
const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
props: {
/**
* Current search input
*/
modelValue: {
type: String,
default: ""
},
/**
* 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
}
},
emits: ["update:modelValue"],
setup(__props, { emit }) {
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 actionsContainer = ref();
const hasActions = () => !!slots.actions;
const showActions = ref(true);
const timeoutId = ref();
const hideActions = ref(false);
watch(inputHasFocus, () => {
showActions.value = !inputHasFocus.value;
});
watch(showActions, (show) => {
window.clearTimeout(timeoutId.value);
if (show) {
hideActions.value = false;
} else {
window.setTimeout(() => {
hideActions.value = !show;
}, transitionTimeout);
}
});
function onCloseSearch() {
emit("update:modelValue", "");
if (hasActions()) {
showActions.value = true;
nextTick(() => actionsContainer.value.querySelector("button")?.focus());
}
}
return { __sfc: true, emit, slots, inputElement, inputHasFocus, transitionTimeout, actionsContainer, hasActions, showActions, timeoutId, hideActions, onCloseSearch, IconClose: Close, NcInputField, t };
}
});
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
return _c("div", { staticClass: "app-navigation-search", class: {
"app-navigation-search--has-actions": _setup.hasActions()
} }, [_c(_setup.NcInputField, { ref: "inputElement", staticClass: "app-navigation-search__input", attrs: { "aria-label": _vm.label, "label-outside": "", "placeholder": _vm.placeholder ?? _vm.label, "show-trailing-button": "", "trailing-button-label": _setup.t("Clear search"), "type": "search", "value": _vm.modelValue }, on: { "update:value": function($event) {
return _vm.$emit("update:modelValue", $event);
}, "trailing-button-click": _setup.onCloseSearch }, scopedSlots: _vm._u([{ key: "trailing-button-icon", fn: function() {
return [_c(_setup.IconClose, { attrs: { "size": 20 } })];
}, proxy: true }]) }), _setup.hasActions() ? _c("div", { ref: "actionsContainer", staticClass: "app-navigation-search__actions", class: {
"app-navigation-search__actions--hidden": !_setup.showActions,
"hidden-visually": _setup.hideActions
} }, [_vm._t("actions")], 2) : _vm._e()], 1);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns,
false,
null,
"21bb8308"
);
const NcAppNavigationSearch = __component__.exports;
export {
NcAppNavigationSearch as N
};
//# sourceMappingURL=NcAppNavigationSearch-CsIzwF6F.mjs.map