@nextcloud/vue 9.11.0 → 9.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +36 -0
- package/dist/assets/NcAppContent.css +20 -20
- package/dist/assets/NcAppNavigation.css +13 -13
- package/dist/assets/NcAppNavigationItem.css +45 -49
- package/dist/assets/NcAppNavigationList.css +2 -26
- package/dist/assets/NcAppNavigationNewItem.css +0 -4
- package/dist/assets/NcAppNavigationSettings.css +6 -6
- package/dist/assets/NcAppSettingsDialog.css +3 -3
- package/dist/assets/NcAppSettingsShortcutsSection.css +1 -1
- package/dist/assets/NcAppSidebar.css +28 -28
- package/dist/assets/NcAssistantButton.css +9 -9
- package/dist/assets/NcAssistantContent.css +3 -3
- package/dist/assets/NcAssistantIcon.css +4 -4
- package/dist/assets/NcAvatar.css +26 -26
- package/dist/assets/NcBlurHash.css +2 -2
- package/dist/assets/NcDateTimePicker.css +234 -234
- package/dist/assets/NcDialog.css +16 -16
- package/dist/assets/NcFilePicker.css +1 -1
- package/dist/assets/NcFormBox.css +11 -11
- package/dist/assets/NcFormBoxButton.css +2 -2
- package/dist/assets/NcFormBoxItem.css +15 -15
- package/dist/assets/NcFormBoxSwitch.css +2 -2
- package/dist/assets/NcFormGroup.css +7 -7
- package/dist/assets/NcHotkey.css +8 -8
- package/dist/assets/NcHotkeyList.css +2 -2
- package/dist/assets/NcIconToggleSwitch.css +4 -4
- package/dist/assets/NcKbd.css +3 -3
- package/dist/assets/NcModal.css +69 -63
- package/dist/assets/NcPopover.css +16 -16
- package/dist/assets/NcProfileHoverCard.css +82 -59
- package/dist/assets/NcRadioGroup.css +2 -2
- package/dist/assets/NcRadioGroupButton.css +14 -14
- package/dist/assets/NcRichContenteditable.css +17 -17
- package/dist/assets/NcRichText.css +2 -2
- package/dist/assets/NcUploadPicker.css +41 -0
- package/dist/assets/autolink.css +3 -3
- package/dist/chunks/NcActionInput.mjs +2 -2
- package/dist/chunks/NcActions.mjs +2 -2
- package/dist/chunks/NcAppContent.mjs +171 -298
- package/dist/chunks/NcAppContent.mjs.map +1 -1
- package/dist/chunks/NcAppContentList.vue_vue_type_script_setup_true_lang.mjs +21 -0
- package/dist/chunks/NcAppContentList.vue_vue_type_script_setup_true_lang.mjs.map +1 -0
- package/dist/chunks/NcAppNavigation.mjs +9 -6
- package/dist/chunks/NcAppNavigation.mjs.map +1 -1
- package/dist/chunks/NcAppNavigationItem.mjs +6 -29
- package/dist/chunks/NcAppNavigationItem.mjs.map +1 -1
- package/dist/chunks/NcAppNavigationList.mjs +8 -138
- package/dist/chunks/NcAppNavigationList.mjs.map +1 -1
- package/dist/chunks/NcAppNavigationNewItem.mjs +1 -1
- package/dist/chunks/NcAppNavigationNewItem.mjs.map +1 -1
- package/dist/chunks/NcAppNavigationSearch.mjs +2 -2
- package/dist/chunks/NcAppNavigationSettings.mjs +8 -8
- package/dist/chunks/NcAppSettingsDialog.mjs +5 -5
- package/dist/chunks/NcAppSettingsShortcutsSection.mjs +3 -3
- package/dist/chunks/NcAppSidebar.mjs +15 -15
- package/dist/chunks/NcAppSidebar.mjs.map +1 -1
- package/dist/chunks/NcAssistantButton.mjs +7 -7
- package/dist/chunks/NcAssistantContent.mjs +3 -3
- package/dist/chunks/NcAssistantIcon.mjs +4 -4
- package/dist/chunks/NcAvatar.mjs +30 -10
- package/dist/chunks/NcAvatar.mjs.map +1 -1
- package/dist/chunks/NcBlurHash.mjs +2 -2
- package/dist/chunks/NcCheckboxRadioSwitch.mjs +1 -1
- package/dist/chunks/NcCollectionList.mjs +3 -3
- package/dist/chunks/NcColorPicker.mjs +2 -2
- package/dist/chunks/NcContent.mjs +2 -2
- package/dist/chunks/NcDashboardWidget.mjs +4 -4
- package/dist/chunks/NcDashboardWidget.mjs.map +1 -1
- package/dist/chunks/NcDateTimePicker.mjs +7 -4
- package/dist/chunks/NcDateTimePicker.mjs.map +1 -1
- package/dist/chunks/NcDateTimePickerNative.mjs +2 -2
- package/dist/chunks/NcDialog.mjs +1 -1
- package/dist/chunks/NcDialog.mjs.map +1 -1
- package/dist/chunks/NcDialogButton.vue_vue_type_script_setup_true_lang.mjs +2 -2
- package/dist/chunks/NcEmojiPicker.mjs +2 -2
- package/dist/chunks/NcFilePicker.mjs +6 -5
- package/dist/chunks/NcFilePicker.mjs.map +1 -1
- package/dist/chunks/NcFormBox.mjs +5 -5
- package/dist/chunks/NcFormBoxButton.mjs +2 -2
- package/dist/chunks/NcFormBoxItem.mjs +8 -8
- package/dist/chunks/NcFormBoxSwitch.mjs +2 -2
- package/dist/chunks/NcFormGroup.mjs +7 -7
- package/dist/chunks/NcHotkey.mjs +4 -4
- package/dist/chunks/NcHotkeyList.mjs +4 -4
- package/dist/chunks/NcIconToggleSwitch.mjs +2 -2
- package/dist/chunks/NcKbd.mjs +4 -4
- package/dist/chunks/NcMentionBubble.vue_vue_type_style_index_0_scoped_3c4a673d_lang.mjs +7 -7
- package/dist/chunks/NcMentionBubble.vue_vue_type_style_index_0_scoped_3c4a673d_lang.mjs.map +1 -1
- package/dist/chunks/NcModal.mjs +18 -11
- package/dist/chunks/NcModal.mjs.map +1 -1
- package/dist/chunks/NcPasswordField.mjs +2 -2
- package/dist/chunks/NcPopover.mjs +2 -2
- package/dist/chunks/NcProfileHoverCard.mjs +205 -157
- package/dist/chunks/NcProfileHoverCard.mjs.map +1 -1
- package/dist/chunks/NcRadioGroup.mjs +2 -2
- package/dist/chunks/NcRadioGroupButton.mjs +6 -6
- package/dist/chunks/NcReferenceWidget.mjs +2 -2
- package/dist/chunks/NcRelatedResourcesPanel.mjs +4 -4
- package/dist/chunks/NcRichContenteditable.mjs +12 -12
- package/dist/chunks/NcRichText.mjs +3 -3
- package/dist/chunks/NcRichText.mjs.map +1 -1
- package/dist/chunks/NcSettingsSection.mjs +2 -2
- package/dist/chunks/NcSettingsSelectGroup.mjs +2 -2
- package/dist/chunks/NcTextField.vue_vue_type_script_setup_true_lang.mjs +2 -2
- package/dist/chunks/NcTimezonePicker.vue_vue_type_script_setup_true_lang.mjs +2 -2
- package/dist/chunks/NcUploadPicker.mjs +269 -0
- package/dist/chunks/NcUploadPicker.mjs.map +1 -0
- package/dist/chunks/NcUserStatusIcon.mjs +2 -2
- package/dist/chunks/_l10n.mjs +91 -89
- package/dist/chunks/_l10n.mjs.map +1 -1
- package/dist/chunks/autolink.mjs +3 -3
- package/dist/chunks/colors.mjs +2 -2
- package/dist/chunks/mdi.mjs +7 -5
- package/dist/chunks/mdi.mjs.map +1 -1
- package/dist/chunks/referencePickerModal.mjs +5 -5
- package/dist/components/NcActionInput/NcActionInput.vue.d.ts +3 -3
- package/dist/components/NcAppContent/NcAppContent.vue.d.ts +77 -149
- package/dist/components/NcAppContent/index.d.ts +5 -0
- package/dist/components/NcAppContentList/NcAppContentList.vue.d.ts +28 -27
- package/dist/components/NcAppContentList/index.d.ts +4 -0
- package/dist/components/NcAppContentList/index.mjs +2 -2
- package/dist/components/NcAppNavigationItem/NcAppNavigationItem.vue.d.ts +0 -4
- package/dist/components/NcAppNavigationList/NcAppNavigationList.vue.d.ts +1 -57
- package/dist/components/NcAvatar/NcAvatar.vue.d.ts +26 -0
- package/dist/components/NcCollectionList/NcCollectionList.vue.d.ts +26 -0
- package/dist/components/NcCollectionList/NcCollectionListItem.vue.d.ts +13 -0
- package/dist/components/NcDashboardWidget/NcDashboardWidget.vue.d.ts +26 -0
- package/dist/components/NcDashboardWidgetItem/NcDashboardWidgetItem.vue.d.ts +13 -0
- package/dist/components/NcDateTimePicker/NcDateTimePicker.vue.d.ts +2 -2
- package/dist/components/NcFilePicker/NcFilePicker.vue.d.ts +7 -0
- package/dist/components/NcListItemIcon/NcListItemIcon.vue.d.ts +14 -1
- package/dist/components/NcModal/NcModal.vue.d.ts +3 -0
- package/dist/components/NcProfileHoverCard/NcProfileHoverCard.vue.d.ts +6 -0
- package/dist/components/NcRichText/NcReferencePicker/NcReferencePickerModal.vue.d.ts +8 -0
- package/dist/components/NcUploadPicker/NcUploadPicker.vue.d.ts +180 -0
- package/dist/components/NcUploadPicker/index.d.ts +6 -0
- package/dist/components/NcUploadPicker/index.mjs +5 -0
- package/dist/components/NcUploadPicker/index.mjs.map +1 -0
- package/dist/components/index.d.ts +3 -2
- package/dist/composables/useFormatDateTime/index.mjs +2 -2
- package/dist/index.mjs +169 -167
- package/dist/index.mjs.map +1 -1
- package/dist/utils/getAvatarUrl.d.ts +4 -0
- package/package.json +26 -12
- package/dist/chunks/NcAppContentList.mjs +0 -33
- package/dist/chunks/NcAppContentList.mjs.map +0 -1
- package/dist/chunks/highlight.mjs +0 -5
- package/dist/chunks/highlight.mjs.map +0 -1
- package/dist/components/NcAppNavigationList/highlight.d.ts +0 -12
|
@@ -1,146 +1,16 @@
|
|
|
1
1
|
import '../assets/NcAppNavigationList.css';
|
|
2
|
-
import {
|
|
3
|
-
import { A as APP_NAVIGATION_HIGHLIGHT } from "./highlight.mjs";
|
|
2
|
+
import { openBlock, createElementBlock, renderSlot } from "vue";
|
|
4
3
|
import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
|
|
5
|
-
const _sfc_main =
|
|
6
|
-
name: "NcAppNavigationList"
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
[APP_NAVIGATION_HIGHLIGHT]: {
|
|
10
|
-
show: this.show,
|
|
11
|
-
hide: this.hide
|
|
12
|
-
}
|
|
13
|
-
};
|
|
14
|
-
},
|
|
15
|
-
data() {
|
|
16
|
-
return {
|
|
17
|
-
/** Entry the highlight is on, as reported by that entry itself */
|
|
18
|
-
entry: null,
|
|
19
|
-
/** Whether the highlight is shown */
|
|
20
|
-
visible: false,
|
|
21
|
-
/** Whether position changes should transition (slide) or snap */
|
|
22
|
-
animated: false,
|
|
23
|
-
/** Whether the highlight sits on the active entry (turns transparent) */
|
|
24
|
-
overActive: false,
|
|
25
|
-
/** Vertical offset of the highlight inside the scrollable content */
|
|
26
|
-
top: 0,
|
|
27
|
-
/** Height of the highlight */
|
|
28
|
-
height: 0,
|
|
29
|
-
/** Pending animation frame for re-measuring while scrolling */
|
|
30
|
-
scrollFrame: 0
|
|
31
|
-
};
|
|
32
|
-
},
|
|
33
|
-
computed: {
|
|
34
|
-
highlightStyle() {
|
|
35
|
-
return {
|
|
36
|
-
transform: `translateY(${this.top}px)`,
|
|
37
|
-
height: `${this.height}px`
|
|
38
|
-
};
|
|
39
|
-
}
|
|
40
|
-
},
|
|
41
|
-
beforeUnmount() {
|
|
42
|
-
if (this.scrollFrame) {
|
|
43
|
-
cancelAnimationFrame(this.scrollFrame);
|
|
44
|
-
}
|
|
45
|
-
},
|
|
46
|
-
methods: {
|
|
47
|
-
/**
|
|
48
|
-
* Move the highlight onto an entry. It slides there if already visible,
|
|
49
|
-
* otherwise it snaps into place so it does not slide in from the entry
|
|
50
|
-
* that was hovered before. Over the active entry it turns transparent so
|
|
51
|
-
* that entry keeps its own static highlight.
|
|
52
|
-
*
|
|
53
|
-
* @param entry the entry element asking for the highlight
|
|
54
|
-
*/
|
|
55
|
-
show(entry) {
|
|
56
|
-
this.entry = entry;
|
|
57
|
-
this.overActive = entry.classList.contains("active");
|
|
58
|
-
if (this.visible) {
|
|
59
|
-
this.animated = true;
|
|
60
|
-
this.measure();
|
|
61
|
-
return;
|
|
62
|
-
}
|
|
63
|
-
this.animated = false;
|
|
64
|
-
this.measure();
|
|
65
|
-
this.visible = true;
|
|
66
|
-
this.$nextTick(() => requestAnimationFrame(() => {
|
|
67
|
-
this.animated = true;
|
|
68
|
-
}));
|
|
69
|
-
},
|
|
70
|
-
/**
|
|
71
|
-
* Hide the highlight if it is on the given entry, e.g. because that entry
|
|
72
|
-
* is being removed. While the pointer only moves between entries the
|
|
73
|
-
* highlight stays visible, so it can slide on to the next one.
|
|
74
|
-
*
|
|
75
|
-
* @param entry the entry element that no longer wants the highlight
|
|
76
|
-
*/
|
|
77
|
-
hide(entry) {
|
|
78
|
-
if (this.entry === entry) {
|
|
79
|
-
this.hideNow();
|
|
80
|
-
}
|
|
81
|
-
},
|
|
82
|
-
/** Hide the highlight, as the pointer or focus left the list */
|
|
83
|
-
hideNow() {
|
|
84
|
-
this.visible = false;
|
|
85
|
-
},
|
|
86
|
-
/**
|
|
87
|
-
* Hide the highlight once focus leaves the list entirely
|
|
88
|
-
*
|
|
89
|
-
* @param event the focusout event
|
|
90
|
-
*/
|
|
91
|
-
onFocusOut(event) {
|
|
92
|
-
const list = this.$refs.list;
|
|
93
|
-
if (!list.contains(event.relatedTarget)) {
|
|
94
|
-
this.hideNow();
|
|
95
|
-
}
|
|
96
|
-
},
|
|
97
|
-
/** Read the current entry's geometry relative to the list content */
|
|
98
|
-
measure() {
|
|
99
|
-
const list = this.$refs.list;
|
|
100
|
-
if (!list || !this.entry) {
|
|
101
|
-
return;
|
|
102
|
-
}
|
|
103
|
-
const entryRect = this.entry.getBoundingClientRect();
|
|
104
|
-
const listRect = list.getBoundingClientRect();
|
|
105
|
-
this.top = entryRect.top - listRect.top + list.scrollTop;
|
|
106
|
-
this.height = entryRect.height;
|
|
107
|
-
},
|
|
108
|
-
/**
|
|
109
|
-
* Keep the highlight on its entry while scrolling. Needed because a
|
|
110
|
-
* virtual scroller repositions its entries as the list scrolls.
|
|
111
|
-
*/
|
|
112
|
-
onScroll() {
|
|
113
|
-
if (!this.visible || this.scrollFrame) {
|
|
114
|
-
return;
|
|
115
|
-
}
|
|
116
|
-
this.scrollFrame = requestAnimationFrame(() => {
|
|
117
|
-
this.scrollFrame = 0;
|
|
118
|
-
this.measure();
|
|
119
|
-
});
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
});
|
|
4
|
+
const _sfc_main = {
|
|
5
|
+
name: "NcAppNavigationList"
|
|
6
|
+
};
|
|
7
|
+
const _hoisted_1 = { class: "app-navigation-list" };
|
|
123
8
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
124
|
-
return openBlock(), createElementBlock("ul",
|
|
125
|
-
ref: "list",
|
|
126
|
-
class: normalizeClass(["app-navigation-list", { "app-navigation-list--animated-highlight": _ctx.visible }]),
|
|
127
|
-
onPointerleave: _cache[0] || (_cache[0] = (...args) => _ctx.hideNow && _ctx.hideNow(...args)),
|
|
128
|
-
onFocusout: _cache[1] || (_cache[1] = (...args) => _ctx.onFocusOut && _ctx.onFocusOut(...args)),
|
|
129
|
-
onScrollPassive: _cache[2] || (_cache[2] = (...args) => _ctx.onScroll && _ctx.onScroll(...args))
|
|
130
|
-
}, [
|
|
131
|
-
createElementVNode("div", {
|
|
132
|
-
class: normalizeClass(["app-navigation-list__highlight", {
|
|
133
|
-
"app-navigation-list__highlight--visible": _ctx.visible,
|
|
134
|
-
"app-navigation-list__highlight--animated": _ctx.animated,
|
|
135
|
-
"app-navigation-list__highlight--over-active": _ctx.overActive
|
|
136
|
-
}]),
|
|
137
|
-
style: normalizeStyle(_ctx.highlightStyle),
|
|
138
|
-
"aria-hidden": "true"
|
|
139
|
-
}, null, 6),
|
|
9
|
+
return openBlock(), createElementBlock("ul", _hoisted_1, [
|
|
140
10
|
renderSlot(_ctx.$slots, "default", {}, void 0, true)
|
|
141
|
-
]
|
|
11
|
+
]);
|
|
142
12
|
}
|
|
143
|
-
const NcAppNavigationList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-
|
|
13
|
+
const NcAppNavigationList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-d72957ed"]]);
|
|
144
14
|
export {
|
|
145
15
|
NcAppNavigationList as N
|
|
146
16
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NcAppNavigationList.mjs","sources":["../../src/components/NcAppNavigationList/NcAppNavigationList.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\n\nList wrapper for use in NcAppNavigation.\n\nThe list renders a single hover/focus highlight that slides between entries\ninstead of every entry painting its own hover background. When it slides onto\nthe active entry it turns transparent, so the active entry keeps its own\nstatic highlight.\n\nEntries ask for the highlight themselves - `NcAppNavigationItem` does this out\nof the box. The list never inspects the DOM to find out what is hovered, so it\nalso works when entries are rendered by a virtual scroller. If no entry ever\nasks for it the per-entry hover background is used as a fallback.\n\n#### Example\n\nUsage with NcAppNavigationCaption as a heading.\n\n```vue\n<NcAppNavigation>\n\t<NcAppNavigationList>\n\t\t<NcAppNavigationItem name=\"First\" />\n\t\t<NcAppNavigationItem name=\"Second\" />\n\t\t<NcAppNavigationItem name=\"Third\" />\n\t</NcAppNavigationList>\n\t<NcAppNavigationCaption name=\"Sections\" is-heading />\n\t<NcAppNavigationList>\n\t\t<NcAppNavigationItem name=\"Foo\" />\n\t\t<NcAppNavigationItem name=\"Bar\" />\n\t\t<NcAppNavigationItem name=\"Baz\" />\n\t</NcAppNavigationList>\n</NcAppNavigation>\n```\n</docs>\n\n<template>\n\t<ul\n\t\tref=\"list\"\n\t\tclass=\"app-navigation-list\"\n\t\t:class=\"{ 'app-navigation-list--animated-highlight': visible }\"\n\t\t@pointerleave=\"hideNow\"\n\t\t@focusout=\"onFocusOut\"\n\t\t@scroll.passive=\"onScroll\">\n\t\t<div\n\t\t\tclass=\"app-navigation-list__highlight\"\n\t\t\t:class=\"{\n\t\t\t\t'app-navigation-list__highlight--visible': visible,\n\t\t\t\t'app-navigation-list__highlight--animated': animated,\n\t\t\t\t'app-navigation-list__highlight--over-active': overActive,\n\t\t\t}\"\n\t\t\t:style=\"highlightStyle\"\n\t\t\taria-hidden=\"true\" />\n\t\t<slot />\n\t</ul>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { APP_NAVIGATION_HIGHLIGHT } from './highlight.ts'\n\nexport default defineComponent({\n\tname: 'NcAppNavigationList',\n\n\tprovide() {\n\t\treturn {\n\t\t\t[APP_NAVIGATION_HIGHLIGHT]: {\n\t\t\t\tshow: this.show,\n\t\t\t\thide: this.hide,\n\t\t\t},\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\t/** Entry the highlight is on, as reported by that entry itself */\n\t\t\tentry: null as HTMLElement | null,\n\t\t\t/** Whether the highlight is shown */\n\t\t\tvisible: false,\n\t\t\t/** Whether position changes should transition (slide) or snap */\n\t\t\tanimated: false,\n\t\t\t/** Whether the highlight sits on the active entry (turns transparent) */\n\t\t\toverActive: false,\n\t\t\t/** Vertical offset of the highlight inside the scrollable content */\n\t\t\ttop: 0,\n\t\t\t/** Height of the highlight */\n\t\t\theight: 0,\n\t\t\t/** Pending animation frame for re-measuring while scrolling */\n\t\t\tscrollFrame: 0,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\thighlightStyle(): Record<string, string> {\n\t\t\treturn {\n\t\t\t\ttransform: `translateY(${this.top}px)`,\n\t\t\t\theight: `${this.height}px`,\n\t\t\t}\n\t\t},\n\t},\n\n\tbeforeUnmount() {\n\t\tif (this.scrollFrame) {\n\t\t\tcancelAnimationFrame(this.scrollFrame)\n\t\t}\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Move the highlight onto an entry. It slides there if already visible,\n\t\t * otherwise it snaps into place so it does not slide in from the entry\n\t\t * that was hovered before. Over the active entry it turns transparent so\n\t\t * that entry keeps its own static highlight.\n\t\t *\n\t\t * @param entry the entry element asking for the highlight\n\t\t */\n\t\tshow(entry: HTMLElement) {\n\t\t\tthis.entry = entry\n\t\t\tthis.overActive = entry.classList.contains('active')\n\t\t\tif (this.visible) {\n\t\t\t\tthis.animated = true\n\t\t\t\tthis.measure()\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Re-appearing: snap to the new position, then allow sliding again\n\t\t\tthis.animated = false\n\t\t\tthis.measure()\n\t\t\tthis.visible = true\n\t\t\tthis.$nextTick(() => requestAnimationFrame(() => {\n\t\t\t\tthis.animated = true\n\t\t\t}))\n\t\t},\n\n\t\t/**\n\t\t * Hide the highlight if it is on the given entry, e.g. because that entry\n\t\t * is being removed. While the pointer only moves between entries the\n\t\t * highlight stays visible, so it can slide on to the next one.\n\t\t *\n\t\t * @param entry the entry element that no longer wants the highlight\n\t\t */\n\t\thide(entry: HTMLElement) {\n\t\t\tif (this.entry === entry) {\n\t\t\t\tthis.hideNow()\n\t\t\t}\n\t\t},\n\n\t\t/** Hide the highlight, as the pointer or focus left the list */\n\t\thideNow() {\n\t\t\tthis.visible = false\n\t\t},\n\n\t\t/**\n\t\t * Hide the highlight once focus leaves the list entirely\n\t\t *\n\t\t * @param event the focusout event\n\t\t */\n\t\tonFocusOut(event: FocusEvent) {\n\t\t\tconst list = this.$refs.list as HTMLElement\n\t\t\tif (!list.contains(event.relatedTarget as Node | null)) {\n\t\t\t\tthis.hideNow()\n\t\t\t}\n\t\t},\n\n\t\t/** Read the current entry's geometry relative to the list content */\n\t\tmeasure() {\n\t\t\tconst list = this.$refs.list as HTMLElement | undefined\n\t\t\tif (!list || !this.entry) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst entryRect = this.entry.getBoundingClientRect()\n\t\t\tconst listRect = list.getBoundingClientRect()\n\t\t\tthis.top = entryRect.top - listRect.top + list.scrollTop\n\t\t\tthis.height = entryRect.height\n\t\t},\n\n\t\t/**\n\t\t * Keep the highlight on its entry while scrolling. Needed because a\n\t\t * virtual scroller repositions its entries as the list scrolls.\n\t\t */\n\t\tonScroll() {\n\t\t\tif (!this.visible || this.scrollFrame) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.scrollFrame = requestAnimationFrame(() => {\n\t\t\t\tthis.scrollFrame = 0\n\t\t\t\tthis.measure()\n\t\t\t})\n\t\t},\n\t},\n})\n</script>\n\n<style lang=\"scss\" scoped>\n.app-navigation-list {\n\tposition: relative;\n\twidth: 100%;\n\toverflow-x: hidden;\n\toverflow-y: auto;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: var(--default-grid-baseline, 4px);\n\tpadding: var(--app-navigation-padding);\n\tisolation: isolate; // keep the highlight layered predictably within the list\n\n\t&__highlight {\n\t\t// Half of --animation-quick, so the highlight keeps up with the pointer\n\t\t--highlight-animation-duration: calc(var(--animation-quick) / 2);\n\t\tposition: absolute;\n\t\tinset-inline: var(--app-navigation-padding);\n\t\ttop: 0;\n\t\theight: 0;\n\t\t// As the first positioned child it paints below the entry wrappers\n\t\t// (also positioned), so it sits behind the entry content.\n\t\tz-index: 0;\n\t\tpointer-events: none;\n\t\topacity: 0;\n\t\tborder-radius: var(--border-radius-element);\n\t\t// Matches the per-entry hover background of non-legacy entries.\n\t\tbackground-color: color-mix(in srgb, var(--color-primary-element) 8%, transparent);\n\t\t// Only the position is transitioned, height snaps. Entries in a list are\n\t\t// usually equally high, so this is not visible, and it keeps the slide off\n\t\t// the layout path.\n\t\twill-change: transform;\n\t\t// The fade and the background morph are always transitioned; sliding is\n\t\t// opt-in via --animated so the highlight snaps when it (re)appears.\n\t\t// ease-out so it leaves the old entry immediately and feels responsive.\n\t\ttransition:\n\t\t\topacity var(--highlight-animation-duration) ease-out,\n\t\t\tbackground-color var(--highlight-animation-duration) ease-out;\n\n\t\t&--animated {\n\t\t\ttransition:\n\t\t\t\ttransform var(--highlight-animation-duration) ease-out,\n\t\t\t\topacity var(--highlight-animation-duration) ease-out,\n\t\t\t\tbackground-color var(--highlight-animation-duration) ease-out;\n\t\t}\n\n\t\t&--visible {\n\t\t\topacity: 1;\n\t\t}\n\n\t\t// Over the active entry the highlight turns transparent so the active\n\t\t// entry's own static highlight shows through unchanged, while the\n\t\t// highlight still slides on and off it for a continuous motion.\n\t\t&--over-active {\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\t// Reduced motion is handled globally: the --animation-quick variable is\n\t// collapsed under a prefers-reduced-motion media query by the server theme,\n\t// so these transitions become instant without a component-level override.\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_normalizeStyle","_renderSlot"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"NcAppNavigationList.mjs","sources":["../../src/components/NcAppNavigationList/NcAppNavigationList.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\n\nList wrapper for use in NcAppNavigation.\n\n#### Example\n\nUsage with NcAppNavigationCaption as a heading.\n\n```vue\n<NcAppNavigation>\n\t<NcAppNavigationList>\n\t\t<NcAppNavigationItem name=\"First\" />\n\t\t<NcAppNavigationItem name=\"Second\" />\n\t\t<NcAppNavigationItem name=\"Third\" />\n\t</NcAppNavigationList>\n\t<NcAppNavigationCaption name=\"Sections\" is-heading />\n\t<NcAppNavigationList>\n\t\t<NcAppNavigationItem name=\"Foo\" />\n\t\t<NcAppNavigationItem name=\"Bar\" />\n\t\t<NcAppNavigationItem name=\"Baz\" />\n\t</NcAppNavigationList>\n</NcAppNavigation>\n```\n</docs>\n\n<template>\n\t<ul class=\"app-navigation-list\">\n\t\t<slot />\n\t</ul>\n</template>\n\n<script lang=\"ts\">\nexport default {\n\tname: 'NcAppNavigationList',\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.app-navigation-list {\n\tposition: relative;\n\twidth: 100%;\n\toverflow-x: hidden;\n\toverflow-y: auto;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: var(--default-grid-baseline, 4px);\n\tpadding: var(--app-navigation-padding);\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_renderSlot"],"mappings":";;AAsCA,MAAA,YAAe;AAAA,EACd,MAAM;AACP;AARK,MAAA,aAAA,EAAA,OAAM,sBAAA;;AAAV,SAAAA,UAAA,GAAAC,mBAEK,MAFL,YAEK;AAAA,IADJC,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA,EAAA,CAAA;;;"}
|
|
@@ -94,7 +94,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
94
94
|
createElementVNode("span", {
|
|
95
95
|
class: normalizeClass(["app-navigation-entry-icon", { [$props.icon]: !$props.loading }])
|
|
96
96
|
}, [
|
|
97
|
-
$props.loading ? (openBlock(), createBlock(_component_NcLoadingIcon, { key: 0 })) : renderSlot(_ctx.$slots, "icon", {
|
|
97
|
+
$props.loading ? (openBlock(), createBlock(_component_NcLoadingIcon, { key: 0 })) : renderSlot(_ctx.$slots, "icon", {}, void 0, true, 1)
|
|
98
98
|
], 2),
|
|
99
99
|
!$data.newItemActive ? (openBlock(), createElementBlock("span", {
|
|
100
100
|
key: 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NcAppNavigationNewItem.mjs","sources":["../../src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Usage\n\n#### New Item element\n```vue\n\t<template>\n\t\t<NcAppNavigationNewItem name=\"New Item\" @new-item=\"function(value){alert(value)}\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t</NcAppNavigationNewItem>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t}\n\t</script>\n```\n\n#### New Item element with a loading animation instead of the icon\n```vue\n\t<template>\n\t\t<NcAppNavigationNewItem name=\"New Item\" :loading=\"true\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t</NcAppNavigationNewItem>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<li\n\t\tclass=\"app-navigation-entry\"\n\t\t:class=\"{\n\t\t\t'app-navigation-entry--newItemActive': newItemActive,\n\t\t}\">\n\t\t<!-- New Item -->\n\t\t<button class=\"app-navigation-entry-button\" @click=\"handleNewItem\">\n\t\t\t<span\n\t\t\t\tclass=\"app-navigation-entry-icon\"\n\t\t\t\t:class=\"{ [icon]: !loading }\">\n\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t<slot v-else name=\"icon\" />\n\t\t\t</span>\n\n\t\t\t<span v-if=\"!newItemActive\" class=\"app-navigation-new-item__name\" :title=\"name\">\n\t\t\t\t{{ name }}\n\t\t\t</span>\n\n\t\t\t<!-- new Item input -->\n\t\t\t<span v-if=\"newItemActive\" class=\"newItemContainer\">\n\t\t\t\t<NcInputConfirmCancel\n\t\t\t\t\tref=\"newItemInput\"\n\t\t\t\t\tv-model=\"newItemValue\"\n\t\t\t\t\t:placeholder=\"editPlaceholder !== '' ? editPlaceholder : name\"\n\t\t\t\t\t@cancel=\"cancelNewItem\"\n\t\t\t\t\t@confirm=\"handleNewItemDone\" />\n\t\t\t</span>\n\t\t</button>\n\t</li>\n</template>\n\n<script>\nimport NcInputConfirmCancel from '../NcAppNavigationItem/NcInputConfirmCancel.vue'\nimport NcLoadingIcon from '../NcLoadingIcon/index.ts'\n\nexport default {\n\tname: 'NcAppNavigationNewItem',\n\n\tcomponents: {\n\t\tNcInputConfirmCancel,\n\t\tNcLoadingIcon,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The name of the element.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Refers to the icon on the left, this prop accepts a class\n\t\t * like 'icon-category-enabled'.\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Displays a loading animated icon on the left of the element\n\t\t * instead of the icon.\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Only for 'editable' items, sets label for the edit action button.\n\t\t */\n\t\teditLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Sets the placeholder text for the editing form.\n\t\t */\n\t\teditPlaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['newItem'],\n\n\tdata() {\n\t\treturn {\n\t\t\tnewItemValue: '',\n\t\t\tnewItemActive: false,\n\t\t}\n\t},\n\n\tmethods: {\n\t\thandleNewItem() {\n\t\t\tif (!this.loading) {\n\t\t\t\tthis.newItemActive = true\n\t\t\t\tthis.$nextTick(() => {\n\t\t\t\t\tthis.$refs.newItemInput.focusInput()\n\t\t\t\t})\n\t\t\t}\n\t\t},\n\n\t\tcancelNewItem() {\n\t\t\tthis.newItemActive = false\n\t\t},\n\n\t\thandleNewItemDone() {\n\t\t\tthis.$emit('newItem', this.newItemValue)\n\t\t\tthis.newItemValue = ''\n\t\t\tthis.newItemActive = false\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n@use '../../assets/NcAppNavigationItem.scss';\n\n.app-navigation-new-item__name {\n\toverflow: hidden;\n\tmax-width: 100%;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\tpadding-inline-start: 7px;\n\tfont-size: 14px;\n}\n\n.newItemContainer {\n\twidth: calc(100% - var(--default-clickable-area));\n\tmargin: auto;\n}\n</style>\n"],"names":["_createElementBlock","_createElementVNode","_normalizeClass","_createBlock","_renderSlot","_openBlock","_createVNode"],"mappings":";;;;AAqFA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,IACA;AAAA;EAGD,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA;;;;;IAOX,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOV,SAAS;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,iBAAiB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO,CAAC,SAAS;AAAA,EAEjB,OAAO;AACN,WAAO;AAAA,MACN,cAAc;AAAA,MACd,eAAe;AAAA,IAChB;AAAA,EACD;AAAA,EAEA,SAAS;AAAA,IACR,gBAAgB;AACf,UAAI,CAAC,KAAK,SAAS;AAClB,aAAK,gBAAgB;AACrB,aAAK,UAAU,MAAM;AACpB,eAAK,MAAM,aAAa,WAAU;AAAA,QACnC,CAAC;AAAA,MACF;AAAA,IACD;AAAA,IAEA,gBAAgB;AACf,WAAK,gBAAgB;AAAA,IACtB;AAAA,IAEA,oBAAoB;AACnB,WAAK,MAAM,WAAW,KAAK,YAAY;AACvC,WAAK,eAAe;AACpB,WAAK,gBAAgB;AAAA,IACtB;AAAA;AAEF;;;;EAjG8B,OAAM;;;;;sBAnBnCA,mBA4BK,MAAA;AAAA,IA3BJ,uBAAM,wBAAsB;AAAA,6CACwB,MAAA;AAAA;;IAIpDC,mBAqBS,UAAA;AAAA,MArBD,OAAM;AAAA,MAA+B,gDAAO,SAAA,iBAAA,SAAA,cAAA,GAAA,IAAA;AAAA;MACnDA,mBAKO,QAAA;AAAA,QAJN,OAAKC,eAAA,CAAC,6BAA2B,EAAA,CACtB,OAAA,IAAI,IAAI,OAAA,SAAO,CAAA;AAAA;QACL,OAAA,wBAArBC,YAAgC,0BAAA,EAAA,KAAA,EAAA,CAAA,KAChCC,WAA2B,KAAA,QAAA,QAAA,
|
|
1
|
+
{"version":3,"file":"NcAppNavigationNewItem.mjs","sources":["../../src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Usage\n\n#### New Item element\n```vue\n\t<template>\n\t\t<NcAppNavigationNewItem name=\"New Item\" @new-item=\"function(value){alert(value)}\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t</NcAppNavigationNewItem>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t}\n\t</script>\n```\n\n#### New Item element with a loading animation instead of the icon\n```vue\n\t<template>\n\t\t<NcAppNavigationNewItem name=\"New Item\" :loading=\"true\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t</NcAppNavigationNewItem>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<li\n\t\tclass=\"app-navigation-entry\"\n\t\t:class=\"{\n\t\t\t'app-navigation-entry--newItemActive': newItemActive,\n\t\t}\">\n\t\t<!-- New Item -->\n\t\t<button class=\"app-navigation-entry-button\" @click=\"handleNewItem\">\n\t\t\t<span\n\t\t\t\tclass=\"app-navigation-entry-icon\"\n\t\t\t\t:class=\"{ [icon]: !loading }\">\n\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t<slot v-else name=\"icon\" />\n\t\t\t</span>\n\n\t\t\t<span v-if=\"!newItemActive\" class=\"app-navigation-new-item__name\" :title=\"name\">\n\t\t\t\t{{ name }}\n\t\t\t</span>\n\n\t\t\t<!-- new Item input -->\n\t\t\t<span v-if=\"newItemActive\" class=\"newItemContainer\">\n\t\t\t\t<NcInputConfirmCancel\n\t\t\t\t\tref=\"newItemInput\"\n\t\t\t\t\tv-model=\"newItemValue\"\n\t\t\t\t\t:placeholder=\"editPlaceholder !== '' ? editPlaceholder : name\"\n\t\t\t\t\t@cancel=\"cancelNewItem\"\n\t\t\t\t\t@confirm=\"handleNewItemDone\" />\n\t\t\t</span>\n\t\t</button>\n\t</li>\n</template>\n\n<script>\nimport NcInputConfirmCancel from '../NcAppNavigationItem/NcInputConfirmCancel.vue'\nimport NcLoadingIcon from '../NcLoadingIcon/index.ts'\n\nexport default {\n\tname: 'NcAppNavigationNewItem',\n\n\tcomponents: {\n\t\tNcInputConfirmCancel,\n\t\tNcLoadingIcon,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The name of the element.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Refers to the icon on the left, this prop accepts a class\n\t\t * like 'icon-category-enabled'.\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Displays a loading animated icon on the left of the element\n\t\t * instead of the icon.\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Only for 'editable' items, sets label for the edit action button.\n\t\t */\n\t\teditLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Sets the placeholder text for the editing form.\n\t\t */\n\t\teditPlaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['newItem'],\n\n\tdata() {\n\t\treturn {\n\t\t\tnewItemValue: '',\n\t\t\tnewItemActive: false,\n\t\t}\n\t},\n\n\tmethods: {\n\t\thandleNewItem() {\n\t\t\tif (!this.loading) {\n\t\t\t\tthis.newItemActive = true\n\t\t\t\tthis.$nextTick(() => {\n\t\t\t\t\tthis.$refs.newItemInput.focusInput()\n\t\t\t\t})\n\t\t\t}\n\t\t},\n\n\t\tcancelNewItem() {\n\t\t\tthis.newItemActive = false\n\t\t},\n\n\t\thandleNewItemDone() {\n\t\t\tthis.$emit('newItem', this.newItemValue)\n\t\t\tthis.newItemValue = ''\n\t\t\tthis.newItemActive = false\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n@use '../../assets/NcAppNavigationItem.scss';\n\n.app-navigation-new-item__name {\n\toverflow: hidden;\n\tmax-width: 100%;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\tpadding-inline-start: 7px;\n\tfont-size: 14px;\n}\n\n.newItemContainer {\n\twidth: calc(100% - var(--default-clickable-area));\n\tmargin: auto;\n}\n</style>\n"],"names":["_createElementBlock","_createElementVNode","_normalizeClass","_createBlock","_renderSlot","_openBlock","_createVNode"],"mappings":";;;;AAqFA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,IACA;AAAA;EAGD,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA;;;;;IAOX,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOV,SAAS;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,iBAAiB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO,CAAC,SAAS;AAAA,EAEjB,OAAO;AACN,WAAO;AAAA,MACN,cAAc;AAAA,MACd,eAAe;AAAA,IAChB;AAAA,EACD;AAAA,EAEA,SAAS;AAAA,IACR,gBAAgB;AACf,UAAI,CAAC,KAAK,SAAS;AAClB,aAAK,gBAAgB;AACrB,aAAK,UAAU,MAAM;AACpB,eAAK,MAAM,aAAa,WAAU;AAAA,QACnC,CAAC;AAAA,MACF;AAAA,IACD;AAAA,IAEA,gBAAgB;AACf,WAAK,gBAAgB;AAAA,IACtB;AAAA,IAEA,oBAAoB;AACnB,WAAK,MAAM,WAAW,KAAK,YAAY;AACvC,WAAK,eAAe;AACpB,WAAK,gBAAgB;AAAA,IACtB;AAAA;AAEF;;;;EAjG8B,OAAM;;;;;sBAnBnCA,mBA4BK,MAAA;AAAA,IA3BJ,uBAAM,wBAAsB;AAAA,6CACwB,MAAA;AAAA;;IAIpDC,mBAqBS,UAAA;AAAA,MArBD,OAAM;AAAA,MAA+B,gDAAO,SAAA,iBAAA,SAAA,cAAA,GAAA,IAAA;AAAA;MACnDA,mBAKO,QAAA;AAAA,QAJN,OAAKC,eAAA,CAAC,6BAA2B,EAAA,CACtB,OAAA,IAAI,IAAI,OAAA,SAAO,CAAA;AAAA;QACL,OAAA,wBAArBC,YAAgC,0BAAA,EAAA,KAAA,EAAA,CAAA,KAChCC,WAA2B,KAAA,QAAA,QAAA,CAAA,GAAA,QAAA,MAAA,CAAA;AAAA;OAGf,MAAA,8BAAbJ,mBAEO,QAAA;AAAA;QAFqB,OAAM;AAAA,QAAiC,OAAO,OAAA;AAAA,yBACtE,OAAA,IAAI,GAAA,GAAA,UAAA;MAII,MAAA,iBAAZK,aAAAL,mBAOO,QAPP,YAOO;AAAA,QANNM,YAKgC,iCAAA;AAAA,UAJ/B,KAAI;AAAA,sBACK,MAAA;AAAA,uEAAA,MAAA,eAAY;AAAA,UACpB,aAAa,OAAA,oBAAe,KAAU,OAAA,kBAAkB,OAAA;AAAA,UACxD,UAAQ,SAAA;AAAA,UACR,WAAS,SAAA;AAAA;;;;;;"}
|
|
@@ -3,9 +3,9 @@ import { defineComponent, useModel, useSlots, ref, useTemplateRef, watch, openBl
|
|
|
3
3
|
import { useFocusWithin } from "@vueuse/core";
|
|
4
4
|
import { I as IconClose } from "./Close.mjs";
|
|
5
5
|
import { N as NcInputField } from "./NcInputField.mjs";
|
|
6
|
-
import { r as register, C as
|
|
6
|
+
import { r as register, C as t46, v as t17, a as t } from "./_l10n.mjs";
|
|
7
7
|
import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
|
|
8
|
-
register(t17,
|
|
8
|
+
register(t17, t46);
|
|
9
9
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
10
10
|
__name: "NcAppNavigationSearch",
|
|
11
11
|
props: /* @__PURE__ */ mergeModels({
|
|
@@ -4,11 +4,11 @@ import { x as mdiCog, y as mdiCogOutline } from "./mdi.mjs";
|
|
|
4
4
|
import { onClickOutside } from "@vueuse/core";
|
|
5
5
|
import { N as NcButton } from "./NcButton.mjs";
|
|
6
6
|
import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper.mjs";
|
|
7
|
-
import { r as register, B as
|
|
7
|
+
import { r as register, B as t49, a as t } from "./_l10n.mjs";
|
|
8
8
|
import { c as createElementId } from "./createElementId.mjs";
|
|
9
9
|
import { a as isLegacy } from "./legacy.mjs";
|
|
10
10
|
import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
|
|
11
|
-
register(
|
|
11
|
+
register(t49);
|
|
12
12
|
const _hoisted_1 = ["id"];
|
|
13
13
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
14
14
|
__name: "NcAppNavigationSettings",
|
|
@@ -74,12 +74,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
74
74
|
};
|
|
75
75
|
}
|
|
76
76
|
});
|
|
77
|
-
const container = "
|
|
78
|
-
const header = "
|
|
79
|
-
const button = "
|
|
80
|
-
const content = "
|
|
81
|
-
const animationActive = "
|
|
82
|
-
const animationStop = "
|
|
77
|
+
const container = "_container_qhWZh";
|
|
78
|
+
const header = "_header_1mKCq";
|
|
79
|
+
const button = "_button_EuMDD";
|
|
80
|
+
const content = "_content_cfen6";
|
|
81
|
+
const animationActive = "_animationActive_w9yH6";
|
|
82
|
+
const animationStop = "_animationStop_s-g--";
|
|
83
83
|
const style0 = {
|
|
84
84
|
container,
|
|
85
85
|
header,
|
|
@@ -7,7 +7,7 @@ import { u as useLocalizedAppName, A as APP_VERSION } from "./appName.mjs";
|
|
|
7
7
|
import { A as APP_SETTINGS_LEGACY_DESIGN_KEY, a as APP_SETTINGS_REGISTRATION_KEY } from "./useAppSettingsDialog.mjs";
|
|
8
8
|
import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
|
|
9
9
|
import { useIsMobile } from "../composables/useIsMobile/index.mjs";
|
|
10
|
-
import { r as register, I as
|
|
10
|
+
import { r as register, I as t50, a as t } from "./_l10n.mjs";
|
|
11
11
|
import { i as isLegacy34 } from "./legacy.mjs";
|
|
12
12
|
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
13
13
|
__name: "NcAppSettingsDialogVersion",
|
|
@@ -21,10 +21,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
21
21
|
};
|
|
22
22
|
}
|
|
23
23
|
});
|
|
24
|
-
const appSettingsDialogVersion = "
|
|
25
|
-
const appSettingsDialogVersion__legacy = "
|
|
24
|
+
const appSettingsDialogVersion = "_appSettingsDialogVersion_hDZuG";
|
|
25
|
+
const appSettingsDialogVersion__legacy = "_appSettingsDialogVersion__legacy_xOtWA";
|
|
26
26
|
const style0 = {
|
|
27
|
-
"material-design-icon": "_material-design-
|
|
27
|
+
"material-design-icon": "_material-design-icon_2EH8s",
|
|
28
28
|
appSettingsDialogVersion,
|
|
29
29
|
appSettingsDialogVersion__legacy
|
|
30
30
|
};
|
|
@@ -32,7 +32,7 @@ const cssModules = {
|
|
|
32
32
|
"$style": style0
|
|
33
33
|
};
|
|
34
34
|
const NcAppSettingsDialogVersion = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules]]);
|
|
35
|
-
register(
|
|
35
|
+
register(t50);
|
|
36
36
|
const _hoisted_1 = {
|
|
37
37
|
key: 0,
|
|
38
38
|
class: "app-settings__title"
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import '../assets/NcAppSettingsShortcutsSection.css';
|
|
2
2
|
import { defineComponent, openBlock, createBlock, unref, withCtx, createElementVNode, normalizeClass, renderSlot } from "vue";
|
|
3
3
|
import { N as NcAppSettingsSection } from "./NcAppSettingsSection.mjs";
|
|
4
|
-
import { r as register, q as
|
|
4
|
+
import { r as register, q as t33, a as t } from "./_l10n.mjs";
|
|
5
5
|
import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
|
|
6
|
-
register(
|
|
6
|
+
register(t33);
|
|
7
7
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
8
8
|
__name: "NcAppSettingsShortcutsSection",
|
|
9
9
|
setup(__props) {
|
|
@@ -24,7 +24,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
24
24
|
};
|
|
25
25
|
}
|
|
26
26
|
});
|
|
27
|
-
const appSettingsSectionShortcuts = "
|
|
27
|
+
const appSettingsSectionShortcuts = "_appSettingsSectionShortcuts_5tRBC";
|
|
28
28
|
const style0 = {
|
|
29
29
|
appSettingsSectionShortcuts
|
|
30
30
|
};
|
|
@@ -10,7 +10,7 @@ import { _ as _sfc_main$6 } from "./NcVNodes.vue_vue_type_script_lang.mjs";
|
|
|
10
10
|
import { i as isLegacy34 } from "./legacy.mjs";
|
|
11
11
|
import { useIsSmallMobile } from "../composables/useIsMobile/index.mjs";
|
|
12
12
|
import directive from "../directives/Focus/index.mjs";
|
|
13
|
-
import { r as register,
|
|
13
|
+
import { r as register, X as t16, a as t } from "./_l10n.mjs";
|
|
14
14
|
import { c as createElementId } from "./createElementId.mjs";
|
|
15
15
|
import { g as getTrapStack } from "./focusTrap.mjs";
|
|
16
16
|
import { i as isSlotPopulated, N as NcActions } from "./NcActions.mjs";
|
|
@@ -222,18 +222,18 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
222
222
|
};
|
|
223
223
|
}
|
|
224
224
|
});
|
|
225
|
-
const sidebarTabsButton = "
|
|
226
|
-
const sidebarTabsButton_legacy = "
|
|
227
|
-
const sidebarTabsButton_selected = "
|
|
228
|
-
const sidebarTabsButton_animatedHighlight = "
|
|
229
|
-
const sidebarTabsButton__name = "
|
|
230
|
-
const sidebarTabsButton__icon = "
|
|
231
|
-
const sidebarTabsButton__iconLayer = "
|
|
232
|
-
const sidebarTabsButton__iconLayer_hidden = "
|
|
233
|
-
const sidebarTabsButton__icon_pop = "
|
|
234
|
-
const sidebarTabsButton__legacyIcon = "
|
|
225
|
+
const sidebarTabsButton = "_sidebarTabsButton_aa3cA";
|
|
226
|
+
const sidebarTabsButton_legacy = "_sidebarTabsButton_legacy_3fPRl";
|
|
227
|
+
const sidebarTabsButton_selected = "_sidebarTabsButton_selected_debVN";
|
|
228
|
+
const sidebarTabsButton_animatedHighlight = "_sidebarTabsButton_animatedHighlight_EJHSj";
|
|
229
|
+
const sidebarTabsButton__name = "_sidebarTabsButton__name_g3K0J";
|
|
230
|
+
const sidebarTabsButton__icon = "_sidebarTabsButton__icon_T3-X1";
|
|
231
|
+
const sidebarTabsButton__iconLayer = "_sidebarTabsButton__iconLayer_MCKYo";
|
|
232
|
+
const sidebarTabsButton__iconLayer_hidden = "_sidebarTabsButton__iconLayer_hidden_6R-Pu";
|
|
233
|
+
const sidebarTabsButton__icon_pop = "_sidebarTabsButton__icon_pop_EE96A";
|
|
234
|
+
const sidebarTabsButton__legacyIcon = "_sidebarTabsButton__legacyIcon_uRnaK";
|
|
235
235
|
const style0 = {
|
|
236
|
-
"material-design-icon": "_material-design-
|
|
236
|
+
"material-design-icon": "_material-design-icon_gOcTi",
|
|
237
237
|
sidebarTabsButton,
|
|
238
238
|
sidebarTabsButton_legacy,
|
|
239
239
|
sidebarTabsButton_selected,
|
|
@@ -243,7 +243,7 @@ const style0 = {
|
|
|
243
243
|
sidebarTabsButton__iconLayer,
|
|
244
244
|
sidebarTabsButton__iconLayer_hidden,
|
|
245
245
|
sidebarTabsButton__icon_pop,
|
|
246
|
-
"sidebar-tab-icon-pop": "_sidebar-tab-icon-
|
|
246
|
+
"sidebar-tab-icon-pop": "_sidebar-tab-icon-pop_l-b-c",
|
|
247
247
|
sidebarTabsButton__legacyIcon
|
|
248
248
|
};
|
|
249
249
|
const cssModules = {
|
|
@@ -1018,7 +1018,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
1018
1018
|
"app-sidebar-header--compact": $props.compact
|
|
1019
1019
|
}])
|
|
1020
1020
|
}, [
|
|
1021
|
-
!$props.empty ? renderSlot(_ctx.$slots, "info", {
|
|
1021
|
+
!$props.empty ? renderSlot(_ctx.$slots, "info", {}, () => [
|
|
1022
1022
|
createElementVNode("div", _hoisted_2, [
|
|
1023
1023
|
$options.isSlotPopulated(_ctx.$slots.header?.()) || $props.background ? (openBlock(), createElementBlock("div", {
|
|
1024
1024
|
key: 0,
|
|
@@ -1129,7 +1129,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
1129
1129
|
])
|
|
1130
1130
|
], 2)
|
|
1131
1131
|
])
|
|
1132
|
-
], true) : (openBlock(), createBlock(_component_NcAppSidebarHeader, {
|
|
1132
|
+
], true, 0) : (openBlock(), createBlock(_component_NcAppSidebarHeader, {
|
|
1133
1133
|
key: 1,
|
|
1134
1134
|
class: "app-sidebar-header__mainname--hidden",
|
|
1135
1135
|
name: $props.name,
|