@nextcloud/vue
Version:
Nextcloud vue components
122 lines (121 loc) • 3.99 kB
JavaScript
import '../assets/NcAppNavigationNewItem-e_CtdnzP.css';
import { N as NcInputConfirmCancel } from "./NcInputConfirmCancel-CSO9hp4z.mjs";
import { N as NcLoadingIcon } from "./NcLoadingIcon-b_ajZ_nQ.mjs";
import { resolveComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, createCommentVNode, createBlock, renderSlot, toDisplayString, createVNode } from "vue";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
const _sfc_main = {
name: "NcAppNavigationNewItem",
components: {
NcInputConfirmCancel,
NcLoadingIcon
},
props: {
/**
* The name of the element.
*/
name: {
type: String,
required: true
},
/**
* Refers to the icon on the left, this prop accepts a class
* like 'icon-category-enabled'.
*/
icon: {
type: String,
default: ""
},
/**
* Displays a loading animated icon on the left of the element
* instead of the icon.
*/
loading: {
type: Boolean,
default: false
},
/**
* Only for 'editable' items, sets label for the edit action button.
*/
editLabel: {
type: String,
default: ""
},
/**
* Sets the placeholder text for the editing form.
*/
editPlaceholder: {
type: String,
default: ""
}
},
emits: ["newItem"],
data() {
return {
newItemValue: "",
newItemActive: false
};
},
methods: {
handleNewItem() {
if (!this.loading) {
this.newItemActive = true;
this.$nextTick(() => {
this.$refs.newItemInput.focusInput();
});
}
},
cancelNewItem() {
this.newItemActive = false;
},
handleNewItemDone() {
this.$emit("newItem", this.newItemValue);
this.newItemValue = "";
this.newItemActive = false;
}
}
};
const _hoisted_1 = ["title"];
const _hoisted_2 = {
key: 1,
class: "newItemContainer"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_NcLoadingIcon = resolveComponent("NcLoadingIcon");
const _component_NcInputConfirmCancel = resolveComponent("NcInputConfirmCancel");
return openBlock(), createElementBlock("li", {
class: normalizeClass(["app-navigation-entry", {
"app-navigation-entry--newItemActive": $data.newItemActive
}])
}, [
createElementVNode("button", {
class: "app-navigation-entry-button",
onClick: _cache[1] || (_cache[1] = (...args) => $options.handleNewItem && $options.handleNewItem(...args))
}, [
createElementVNode("span", {
class: normalizeClass(["app-navigation-entry-icon", { [$props.icon]: !$props.loading }])
}, [
$props.loading ? (openBlock(), createBlock(_component_NcLoadingIcon, { key: 0 })) : renderSlot(_ctx.$slots, "icon", { key: 1 }, void 0, true)
], 2),
!$data.newItemActive ? (openBlock(), createElementBlock("span", {
key: 0,
class: "app-navigation-new-item__name",
title: $props.name
}, toDisplayString($props.name), 9, _hoisted_1)) : createCommentVNode("", true),
$data.newItemActive ? (openBlock(), createElementBlock("span", _hoisted_2, [
createVNode(_component_NcInputConfirmCancel, {
ref: "newItemInput",
modelValue: $data.newItemValue,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $data.newItemValue = $event),
placeholder: $props.editPlaceholder !== "" ? $props.editPlaceholder : $props.name,
onCancel: $options.cancelNewItem,
onConfirm: $options.handleNewItemDone
}, null, 8, ["modelValue", "placeholder", "onCancel", "onConfirm"])
])) : createCommentVNode("", true)
])
], 2);
}
const NcAppNavigationNewItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-ee07f8f8"]]);
export {
NcAppNavigationNewItem as N
};
//# sourceMappingURL=NcAppNavigationNewItem-IzXE-EEq.mjs.map