@morscherlab/mint-sdk 1.4.0-beta.9 → 1.4.1
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/README.md +14 -3
- package/dist/{AlertBox-B2Bgr3ei.js → AlertBox-DwgNTEqf.js} +3 -3
- package/dist/{AlertBox-B2Bgr3ei.js.map → AlertBox-DwgNTEqf.js.map} +1 -1
- package/dist/{AppSidebar-Dq9W1jE2.js → AppSidebar-CZZaxni0.js} +1103 -144
- package/dist/AppSidebar-CZZaxni0.js.map +1 -0
- package/dist/{ConfirmDialog-nbJj51is.js → ConfirmDialog-CjWoxAD1.js} +2 -2
- package/dist/{ConfirmDialog-nbJj51is.js.map → ConfirmDialog-CjWoxAD1.js.map} +1 -1
- package/dist/{ExperimentPopover-5T1fAq2L.js → ExperimentPopover-DujiuQIO.js} +5 -5
- package/dist/{ExperimentPopover-5T1fAq2L.js.map → ExperimentPopover-DujiuQIO.js.map} +1 -1
- package/dist/{ExperimentSelectorModal-65peG4Up.js → ExperimentSelectorModal-B4j4eUOJ.js} +114 -98
- package/dist/ExperimentSelectorModal-B4j4eUOJ.js.map +1 -0
- package/dist/{SegmentedControl-BtnnjWzs.js → SegmentedControl-DyUPH3I5.js} +2 -2
- package/dist/{SegmentedControl-BtnnjWzs.js.map → SegmentedControl-DyUPH3I5.js.map} +1 -1
- package/dist/{SettingsModal-483nyI6b.js → SettingsModal-D2MOOtuO.js} +26 -25
- package/dist/SettingsModal-D2MOOtuO.js.map +1 -0
- package/dist/__stories__/experiment-helpers.d.ts +10 -0
- package/dist/__tests__/components/AppTopBarOnboarding.test.d.ts +1 -0
- package/dist/__tests__/components/FloatingPanelsInModal.test.d.ts +1 -0
- package/dist/__tests__/composables/useFloatingPanel.test.d.ts +1 -0
- package/dist/__tests__/composables/useOnboarding.test.d.ts +1 -0
- package/dist/__tests__/styles/paletteTokens.test.d.ts +1 -0
- package/dist/__tests__/styles/v2AuditRules.test.d.ts +1 -0
- package/dist/components/AppTopBar.vue.d.ts +20 -5
- package/dist/components/BaseButton.vue.d.ts +4 -2
- package/dist/components/ExperimentSelectorModal.vue.d.ts +15 -1
- package/dist/components/JobsStatusTray.vue.d.ts +15 -4
- package/dist/components/PluginWorkspaceView.props.d.ts +3 -0
- package/dist/components/PluginWorkspaceView.vue.d.ts +3 -0
- package/dist/components/SmartGroupFieldRecipe.vue.d.ts +3 -3
- package/dist/components/internal/AppTopBarOnboardingInternal.vue.d.ts +7 -0
- package/dist/components/internal/AppTopBarPageSelectorInternal.vue.d.ts +2 -1
- package/dist/components/internal/AutoGroupModalInternal.vue.d.ts +2 -2
- package/dist/components/internal/OnboardingLayerInternal.vue.d.ts +7 -0
- package/dist/components/internal/WorkspaceShellInternal.vue.d.ts +8 -0
- package/dist/composables/pluginWorkspaceModel.d.ts +2 -2
- package/dist/composables/useFileImport.d.ts +7 -0
- package/dist/composables/useFloatingPanel.d.ts +29 -0
- package/dist/composables/useJobCenter.d.ts +41 -3
- package/dist/composables/useOnboarding.d.ts +119 -0
- package/dist/{controlSchemaModel-B8CTXagP.js → controlSchemaModel-Bsg0t5Ab.js} +2 -2
- package/dist/{controlSchemaModel-B8CTXagP.js.map → controlSchemaModel-Bsg0t5Ab.js.map} +1 -1
- package/dist/{data-CgILxDLW.js → data-Boeh4uPI.js} +13 -12
- package/dist/{data-CgILxDLW.js.map → data-Boeh4uPI.js.map} +1 -1
- package/dist/data.d.ts +1 -1
- package/dist/data.js +9 -9
- package/dist/{experiment-43OJtH7R.js → experiment-DyO54FQB.js} +25 -61
- package/dist/experiment-DyO54FQB.js.map +1 -0
- package/dist/{experimentStatus-Cqp6qNrR.js → experimentStatus-DCn2QKG7.js} +2 -2
- package/dist/{experimentStatus-Cqp6qNrR.js.map → experimentStatus-DCn2QKG7.js.map} +1 -1
- package/dist/index.js +20 -20
- package/dist/{install-BtLWTk6H.js → install-BEHp7Mo-.js} +15 -15
- package/dist/{install-BtLWTk6H.js.map → install-BEHp7Mo-.js.map} +1 -1
- package/dist/install.js +1 -1
- package/dist/{lab-MHzp-_J8.js → lab-D61eaX6f.js} +68 -61
- package/dist/{lab-MHzp-_J8.js.map → lab-D61eaX6f.js.map} +1 -1
- package/dist/lab.js +4 -4
- package/dist/{records-B6gpM_3e.js → records-D4aQXyZu.js} +193 -133
- package/dist/records-D4aQXyZu.js.map +1 -0
- package/dist/{runtime-7vfl_bI3.js → runtime-q-R0CNLh.js} +400 -33
- package/dist/runtime-q-R0CNLh.js.map +1 -0
- package/dist/runtime.d.ts +1 -1
- package/dist/runtime.js +7 -7
- package/dist/{shell-Cs9OJMnm.js → shell-6CGFvUUw.js} +10 -5
- package/dist/{shell-Cs9OJMnm.js.map → shell-6CGFvUUw.js.map} +1 -1
- package/dist/shell.d.ts +1 -0
- package/dist/shell.js +6 -6
- package/dist/stores/index.d.ts +1 -1
- package/dist/stores/index.js +2 -2
- package/dist/stores/settings.d.ts +4 -12
- package/dist/styles.css +1191 -479
- package/dist/types/components.d.ts +2 -0
- package/dist/types/index.d.ts +1 -1
- package/dist/types/jobs.d.ts +9 -0
- package/dist/types/platform.d.ts +1 -1
- package/dist/{useDropdownState-8yWMu-7_.js → useDropdownState-uFIz6Yv8.js} +16 -4
- package/dist/useDropdownState-uFIz6Yv8.js.map +1 -0
- package/dist/{useExperimentSamples-DHnxKFAF.js → useExperimentSamples-QEFoq4tf.js} +48 -6
- package/dist/useExperimentSamples-QEFoq4tf.js.map +1 -0
- package/dist/{useListReorder-BitdUhxn.js → useListReorder-DsuzwWGS.js} +122 -172
- package/dist/useListReorder-DsuzwWGS.js.map +1 -0
- package/dist/{useRackEditor-DiwCt77M.js → useRackEditor-KpZ4iJ6o.js} +22 -32
- package/dist/useRackEditor-KpZ4iJ6o.js.map +1 -0
- package/dist/useRealtime-B58Lo-Tm.js +508 -0
- package/dist/useRealtime-B58Lo-Tm.js.map +1 -0
- package/dist/{useRequest-D506eHi8.js → useRequest-BuDmW8Jc.js} +8 -37
- package/dist/useRequest-BuDmW8Jc.js.map +1 -0
- package/package.json +3 -2
- package/src/__stories__/experiment-helpers.ts +3 -3
- package/src/__tests__/components/ActionMenu.test.ts +2 -2
- package/src/__tests__/components/AppTopBar.test.ts +206 -1
- package/src/__tests__/components/AppTopBarOnboarding.test.ts +160 -0
- package/src/__tests__/components/AppTopBarPageSelector.test.ts +125 -9
- package/src/__tests__/components/BaseButton.test.ts +19 -0
- package/src/__tests__/components/BaseModal.test.ts +13 -0
- package/src/__tests__/components/ExperimentSelectorModal.test.ts +34 -1
- package/src/__tests__/components/FloatingPanelsInModal.test.ts +94 -0
- package/src/__tests__/components/GeneratedPluginView.test.ts +1 -1
- package/src/__tests__/components/JobsStatusTray.test.ts +373 -71
- package/src/__tests__/components/PluginWorkspaceView.test.ts +63 -1
- package/src/__tests__/components/SampleSelector.test.ts +20 -0
- package/src/__tests__/components/SettingsModal.test.ts +9 -2
- package/src/__tests__/composables/useFileImport.test.ts +36 -0
- package/src/__tests__/composables/useFloatingPanel.test.ts +68 -0
- package/src/__tests__/composables/useJobCenter.test.ts +262 -3
- package/src/__tests__/composables/useOnboarding.test.ts +317 -0
- package/src/__tests__/docs/frontendDocsCatalog.test.ts +4 -3
- package/src/__tests__/fixtures/table-import/cells.xlsx +0 -0
- package/src/__tests__/fixtures/table-import/samples.xlsx +0 -0
- package/src/__tests__/stores/settings.test.ts +21 -21
- package/src/__tests__/styles/cssTokens.test.ts +4 -1
- package/src/__tests__/styles/menusShellRefresh.test.ts +8 -2
- package/src/__tests__/styles/paletteTokens.test.ts +44 -0
- package/src/__tests__/styles/v2AuditRules.test.ts +104 -0
- package/src/components/ActionMenu.vue +6 -37
- package/src/components/AppTopBar.onboarding.story.vue +69 -0
- package/src/components/AppTopBar.story.vue +59 -4
- package/src/components/AppTopBar.vue +132 -10
- package/src/components/BaseButton.vue +16 -2
- package/src/components/BaseModal.vue +2 -1
- package/src/components/ExperimentSelectorModal.story.vue +38 -0
- package/src/components/ExperimentSelectorModal.vue +20 -1
- package/src/components/GeneratedPluginView.vue +4 -9
- package/src/components/GeneratedResultRenderer.vue +3 -4
- package/src/components/JobsStatusTray.story.vue +97 -43
- package/src/components/JobsStatusTray.vue +287 -290
- package/src/components/LayoutResizeHandle.story.vue +65 -4
- package/src/components/PluginWorkspaceView.props.ts +3 -0
- package/src/components/PluginWorkspaceView.vue +17 -0
- package/src/components/SampleSelector.story.vue +21 -6
- package/src/components/SampleSelector.vue +10 -3
- package/src/components/SectionCard.story.vue +33 -0
- package/src/components/SettingsModal.vue +7 -12
- package/src/components/Tooltip.vue +9 -32
- package/src/components/internal/AppTopBarOnboardingInternal.vue +172 -0
- package/src/components/internal/AppTopBarPageSelectorInternal.vue +140 -72
- package/src/components/internal/DatePickerDateInternal.vue +7 -45
- package/src/components/internal/DatePickerDateTimeInternal.vue +7 -1
- package/src/components/internal/DatePickerTimeInternal.vue +8 -1
- package/src/components/internal/NumberUnitInputInternal.vue +4 -18
- package/src/components/internal/OnboardingLayerInternal.vue +173 -0
- package/src/components/internal/SelectMultipleInternal.vue +6 -1
- package/src/components/internal/SelectSearchableInternal.vue +6 -1
- package/src/components/internal/WellEditPopupInternal.vue +11 -22
- package/src/components/internal/WorkspaceShellInternal.vue +12 -0
- package/src/composables/pluginWorkspaceModel.ts +2 -2
- package/src/composables/useFileImport.ts +51 -1
- package/src/composables/useFloatingPanel.ts +107 -0
- package/src/composables/useJobCenter.ts +188 -6
- package/src/composables/useOnboarding.ts +465 -0
- package/src/composables/usePluginWorkspace.ts +1 -1
- package/src/data.ts +1 -0
- package/src/runtime.ts +2 -1
- package/src/shell.ts +17 -0
- package/src/stores/index.ts +0 -2
- package/src/stores/settings.ts +20 -50
- package/src/styles/components/action-menu.css +1 -1
- package/src/styles/components/app-layout.css +6 -3
- package/src/styles/components/app-page-selector.css +120 -45
- package/src/styles/components/app-top-bar.css +165 -3
- package/src/styles/components/button.css +8 -0
- package/src/styles/components/dataframe.css +1 -1
- package/src/styles/components/date-picker.css +4 -2
- package/src/styles/components/datetime-picker.css +4 -4
- package/src/styles/components/experiment-selector-modal.css +13 -0
- package/src/styles/components/jobs-status-tray.css +134 -296
- package/src/styles/components/layout-resize-handle.css +59 -16
- package/src/styles/components/modal.css +3 -3
- package/src/styles/components/number-input.css +1 -1
- package/src/styles/components/onboarding.css +368 -0
- package/src/styles/components/progress-bar.css +3 -3
- package/src/styles/components/sample-selector.css +43 -0
- package/src/styles/components/searchable-select.css +3 -7
- package/src/styles/components/section-card.css +30 -6
- package/src/styles/components/settings-modal.css +7 -2
- package/src/styles/components/time-picker.css +3 -6
- package/src/styles/components/toast.css +1 -1
- package/src/styles/components/tooltip.css +2 -2
- package/src/styles/components/unit-input.css +1 -1
- package/src/styles/components/well-edit-popup.css +2 -2
- package/src/styles/index.css +1 -0
- package/src/styles/variables.css +153 -15
- package/src/types/components.ts +2 -0
- package/src/types/index.ts +1 -0
- package/src/types/jobs.ts +10 -0
- package/src/types/platform.ts +1 -1
- package/dist/AppSidebar-Dq9W1jE2.js.map +0 -1
- package/dist/ExperimentSelectorModal-65peG4Up.js.map +0 -1
- package/dist/SettingsModal-483nyI6b.js.map +0 -1
- package/dist/experiment-43OJtH7R.js.map +0 -1
- package/dist/records-B6gpM_3e.js.map +0 -1
- package/dist/runtime-7vfl_bI3.js.map +0 -1
- package/dist/useDropdownState-8yWMu-7_.js.map +0 -1
- package/dist/useExperimentSamples-DHnxKFAF.js.map +0 -1
- package/dist/useListReorder-BitdUhxn.js.map +0 -1
- package/dist/useRackEditor-DiwCt77M.js.map +0 -1
- package/dist/useRealtime-C3iy9QkU.js +0 -699
- package/dist/useRealtime-C3iy9QkU.js.map +0 -1
- package/dist/useRequest-D506eHi8.js.map +0 -1
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { a as BaseButton_default, i as useEventListener, t as useDropdownState } from "./useDropdownState-
|
|
2
|
-
import {
|
|
3
|
-
import { I as FormField_default, _ as APP_EXPERIMENT_KEY, t as isRecord, z as BaseCheckbox_default } from "./records-
|
|
4
|
-
import { F as applySpecDefaults, _ as
|
|
5
|
-
import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineAsyncComponent, defineComponent, guardReactiveProps, inject, mergeProps, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, openBlock, reactive, readonly, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, shallowRef, toDisplayString, toRaw, toValue, unref, useSlots, useTemplateRef, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
|
|
6
|
-
import { Moon, Sun } from "lucide-vue-next";
|
|
1
|
+
import { a as BaseButton_default, i as useEventListener, t as useDropdownState } from "./useDropdownState-uFIz6Yv8.js";
|
|
2
|
+
import { n as integrationHost, u as useSettingsStore } from "./experiment-DyO54FQB.js";
|
|
3
|
+
import { E as useMenuKeyboard, I as FormField_default, _ as APP_EXPERIMENT_KEY, t as isRecord, z as BaseCheckbox_default } from "./records-D4aQXyZu.js";
|
|
4
|
+
import { F as applySpecDefaults, M as usePlatform, _ as getTypeDefault, a as StepWizard_default, c as normalizeControls, d as numericValue, g as getFieldRegistryEntry, l as normalizeOption, o as defaultValueForControl, p as orderedUnique, u as humanize } from "./useListReorder-DsuzwWGS.js";
|
|
5
|
+
import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineAsyncComponent, defineComponent, guardReactiveProps, inject, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, provide, reactive, readonly, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, shallowRef, toDisplayString, toRaw, toValue, unref, useId, useSlots, useTemplateRef, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
|
|
6
|
+
import { Check, CircleAlert, CircleCheck, CircleHelp, CircleX, ListChecks, LoaderCircle, Moon, Play, Sun, X } from "lucide-vue-next";
|
|
7
|
+
import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
|
|
7
8
|
//#region src/composables/useTheme.ts
|
|
8
9
|
/** Reads and toggles the active theme (light/dark/system) with reactivity to OS preference changes. */
|
|
9
10
|
function useTheme() {
|
|
@@ -49,25 +50,25 @@ var ThemeToggle_default = /* @__PURE__ */ defineComponent({
|
|
|
49
50
|
});
|
|
50
51
|
//#endregion
|
|
51
52
|
//#region src/components/CollapsibleCard.vue?vue&type=script&setup=true&lang.ts
|
|
52
|
-
var _hoisted_1$
|
|
53
|
-
var _hoisted_2$
|
|
54
|
-
var _hoisted_3$
|
|
55
|
-
var _hoisted_4$
|
|
56
|
-
var _hoisted_5$
|
|
57
|
-
var _hoisted_6$
|
|
58
|
-
var _hoisted_7$
|
|
59
|
-
var _hoisted_8$
|
|
53
|
+
var _hoisted_1$12 = { class: "mint-collapsible-card__header-shell" };
|
|
54
|
+
var _hoisted_2$10 = ["disabled", "aria-expanded"];
|
|
55
|
+
var _hoisted_3$10 = { class: "mint-collapsible-card__title-section" };
|
|
56
|
+
var _hoisted_4$9 = ["d"];
|
|
57
|
+
var _hoisted_5$9 = ["d"];
|
|
58
|
+
var _hoisted_6$8 = { class: "mint-collapsible-card__titles" };
|
|
59
|
+
var _hoisted_7$7 = { class: "mint-collapsible-card__title" };
|
|
60
|
+
var _hoisted_8$7 = {
|
|
60
61
|
key: 0,
|
|
61
62
|
class: "mint-collapsible-card__subtitle"
|
|
62
63
|
};
|
|
63
|
-
var _hoisted_9$
|
|
64
|
-
var _hoisted_10$
|
|
64
|
+
var _hoisted_9$7 = { class: "mint-collapsible-card__actions" };
|
|
65
|
+
var _hoisted_10$6 = [
|
|
65
66
|
"disabled",
|
|
66
67
|
"aria-label",
|
|
67
68
|
"title",
|
|
68
69
|
"onClick"
|
|
69
70
|
];
|
|
70
|
-
var _hoisted_11$
|
|
71
|
+
var _hoisted_11$6 = {
|
|
71
72
|
key: 0,
|
|
72
73
|
class: "mint-collapsible-card__action-icon",
|
|
73
74
|
viewBox: "0 0 24 24",
|
|
@@ -78,13 +79,13 @@ var _hoisted_11$3 = {
|
|
|
78
79
|
"stroke-linejoin": "round",
|
|
79
80
|
"aria-hidden": "true"
|
|
80
81
|
};
|
|
81
|
-
var _hoisted_12$
|
|
82
|
-
var _hoisted_13$
|
|
83
|
-
var _hoisted_14$
|
|
82
|
+
var _hoisted_12$5 = ["d"];
|
|
83
|
+
var _hoisted_13$5 = ["d"];
|
|
84
|
+
var _hoisted_14$3 = {
|
|
84
85
|
key: 1,
|
|
85
86
|
class: "mint-collapsible-card__action-text-icon"
|
|
86
87
|
};
|
|
87
|
-
var _hoisted_15$
|
|
88
|
+
var _hoisted_15$3 = [
|
|
88
89
|
"disabled",
|
|
89
90
|
"aria-label",
|
|
90
91
|
"aria-expanded"
|
|
@@ -160,13 +161,13 @@ var CollapsibleCard_default = /* @__PURE__ */ defineComponent({
|
|
|
160
161
|
emit("action", action.id);
|
|
161
162
|
}
|
|
162
163
|
return (_ctx, _cache) => {
|
|
163
|
-
return openBlock(), createElementBlock("div", { class: normalizeClass(["mint-collapsible-card", __props.dense ? "mint-collapsible-card--dense" : ""]) }, [createElementVNode("div", _hoisted_1$
|
|
164
|
+
return openBlock(), createElementBlock("div", { class: normalizeClass(["mint-collapsible-card", __props.dense ? "mint-collapsible-card--dense" : ""]) }, [createElementVNode("div", _hoisted_1$12, [createElementVNode("button", {
|
|
164
165
|
type: "button",
|
|
165
166
|
class: normalizeClass(headerClasses.value),
|
|
166
167
|
disabled: __props.disabled,
|
|
167
168
|
"aria-expanded": isOpen.value,
|
|
168
169
|
onClick: toggle
|
|
169
|
-
}, [createElementVNode("div", _hoisted_3$
|
|
170
|
+
}, [createElementVNode("div", _hoisted_3$10, [__props.icon ? (openBlock(), createElementBlock("div", {
|
|
170
171
|
key: 0,
|
|
171
172
|
class: "mint-collapsible-card__icon-badge",
|
|
172
173
|
style: normalizeStyle(iconBgStyle.value)
|
|
@@ -184,15 +185,15 @@ var CollapsibleCard_default = /* @__PURE__ */ defineComponent({
|
|
|
184
185
|
return openBlock(), createElementBlock("path", {
|
|
185
186
|
key: i,
|
|
186
187
|
d
|
|
187
|
-
}, null, 8, _hoisted_4$
|
|
188
|
+
}, null, 8, _hoisted_4$9);
|
|
188
189
|
}), 128)) : (openBlock(), createElementBlock("path", {
|
|
189
190
|
key: 1,
|
|
190
191
|
d: __props.icon
|
|
191
|
-
}, null, 8, _hoisted_5$
|
|
192
|
+
}, null, 8, _hoisted_5$9))], 4)) : (openBlock(), createElementBlock("span", {
|
|
192
193
|
key: 1,
|
|
193
194
|
class: "mint-collapsible-card__icon-text",
|
|
194
195
|
style: normalizeStyle(iconColorStyle.value)
|
|
195
|
-
}, toDisplayString(__props.icon), 5))], 4)) : createCommentVNode("", true), createElementVNode("div", _hoisted_6$
|
|
196
|
+
}, toDisplayString(__props.icon), 5))], 4)) : createCommentVNode("", true), createElementVNode("div", _hoisted_6$8, [createElementVNode("h3", _hoisted_7$7, toDisplayString(__props.title), 1), __props.subtitle ? (openBlock(), createElementBlock("p", _hoisted_8$7, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)])])], 10, _hoisted_2$10), createElementVNode("div", _hoisted_9$7, [
|
|
196
197
|
__props.badge !== void 0 ? (openBlock(), createElementBlock("span", {
|
|
197
198
|
key: 0,
|
|
198
199
|
class: normalizeClass(badgeClasses.value)
|
|
@@ -207,15 +208,15 @@ var CollapsibleCard_default = /* @__PURE__ */ defineComponent({
|
|
|
207
208
|
"aria-label": action.label,
|
|
208
209
|
title: action.label,
|
|
209
210
|
onClick: ($event) => handleActionClick(action)
|
|
210
|
-
}, [action.icon && isSvgIconValue(action.icon) ? (openBlock(), createElementBlock("svg", _hoisted_11$
|
|
211
|
+
}, [action.icon && isSvgIconValue(action.icon) ? (openBlock(), createElementBlock("svg", _hoisted_11$6, [Array.isArray(action.icon) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(action.icon, (d, i) => {
|
|
211
212
|
return openBlock(), createElementBlock("path", {
|
|
212
213
|
key: i,
|
|
213
214
|
d
|
|
214
|
-
}, null, 8, _hoisted_12$
|
|
215
|
+
}, null, 8, _hoisted_12$5);
|
|
215
216
|
}), 128)) : (openBlock(), createElementBlock("path", {
|
|
216
217
|
key: 1,
|
|
217
218
|
d: action.icon
|
|
218
|
-
}, null, 8, _hoisted_13$
|
|
219
|
+
}, null, 8, _hoisted_13$5))])) : action.icon ? (openBlock(), createElementBlock("span", _hoisted_14$3, toDisplayString(action.icon), 1)) : createCommentVNode("", true)], 14, _hoisted_10$6);
|
|
219
220
|
}), 128)),
|
|
220
221
|
__props.showToggle ? (openBlock(), createElementBlock("div", {
|
|
221
222
|
key: 1,
|
|
@@ -244,7 +245,7 @@ var CollapsibleCard_default = /* @__PURE__ */ defineComponent({
|
|
|
244
245
|
"stroke-linejoin": "round",
|
|
245
246
|
viewBox: "0 0 24 24",
|
|
246
247
|
"aria-hidden": "true"
|
|
247
|
-
}, [..._cache[2] || (_cache[2] = [createElementVNode("path", { d: "m6 9 6 6 6-6" }, null, -1)])], 2))], 8, _hoisted_15$
|
|
248
|
+
}, [..._cache[2] || (_cache[2] = [createElementVNode("path", { d: "m6 9 6 6 6-6" }, null, -1)])], 2))], 8, _hoisted_15$3)
|
|
248
249
|
])]), createVNode(Transition, { name: "collapse" }, {
|
|
249
250
|
default: withCtx(() => [withDirectives(createElementVNode("div", _hoisted_16$2, [createElementVNode("div", _hoisted_17$2, [renderSlot(_ctx.$slots, "default")])], 512), [[vShow, isOpen.value]])]),
|
|
250
251
|
_: 3
|
|
@@ -811,7 +812,7 @@ function usePluginWorkspace(options) {
|
|
|
811
812
|
sidebarToggleLabel: sidebar.toggleLabel ?? "Open workspace sidebar",
|
|
812
813
|
sidebarCloseLabel: sidebar.closeLabel ?? "Close workspace sidebar",
|
|
813
814
|
hasSidebarSurface: hasSidebarSurface.value,
|
|
814
|
-
title: props.spec?.title
|
|
815
|
+
title: props.spec?.title,
|
|
815
816
|
subtitle: props.spec?.subtitle,
|
|
816
817
|
topBar: topBarSpec.value === false ? false : {
|
|
817
818
|
...topBarSpec.value,
|
|
@@ -848,13 +849,13 @@ function usePluginWorkspace(options) {
|
|
|
848
849
|
}
|
|
849
850
|
//#endregion
|
|
850
851
|
//#region src/components/AppLayout.vue?vue&type=script&setup=true&lang.ts
|
|
851
|
-
var _hoisted_1$
|
|
852
|
+
var _hoisted_1$11 = {
|
|
852
853
|
key: 0,
|
|
853
854
|
class: "mint-layout__topbar"
|
|
854
855
|
};
|
|
855
|
-
var _hoisted_2$
|
|
856
|
-
var _hoisted_3$
|
|
857
|
-
var _hoisted_4$
|
|
856
|
+
var _hoisted_2$9 = { class: "mint-layout__body" };
|
|
857
|
+
var _hoisted_3$9 = ["aria-label", "aria-expanded"];
|
|
858
|
+
var _hoisted_4$8 = {
|
|
858
859
|
key: 0,
|
|
859
860
|
class: "mint-layout__sidebar-toggle-icon",
|
|
860
861
|
viewBox: "0 0 24 24",
|
|
@@ -865,7 +866,7 @@ var _hoisted_4$6 = {
|
|
|
865
866
|
"stroke-linejoin": "round",
|
|
866
867
|
"aria-hidden": "true"
|
|
867
868
|
};
|
|
868
|
-
var _hoisted_5$
|
|
869
|
+
var _hoisted_5$8 = {
|
|
869
870
|
key: 1,
|
|
870
871
|
class: "mint-layout__sidebar-toggle-icon",
|
|
871
872
|
viewBox: "0 0 24 24",
|
|
@@ -876,7 +877,7 @@ var _hoisted_5$6 = {
|
|
|
876
877
|
"stroke-linejoin": "round",
|
|
877
878
|
"aria-hidden": "true"
|
|
878
879
|
};
|
|
879
|
-
var _hoisted_6$
|
|
880
|
+
var _hoisted_6$7 = { class: "mint-layout__main" };
|
|
880
881
|
//#endregion
|
|
881
882
|
//#region src/components/AppLayout.vue
|
|
882
883
|
var AppLayout_default = /* @__PURE__ */ defineComponent({
|
|
@@ -954,7 +955,7 @@ var AppLayout_default = /* @__PURE__ */ defineComponent({
|
|
|
954
955
|
sidebarOpenModel.value = false;
|
|
955
956
|
}
|
|
956
957
|
return (_ctx, _cache) => {
|
|
957
|
-
return openBlock(), createElementBlock("div", { class: normalizeClass(layoutClasses.value) }, [_ctx.$slots.topbar ? (openBlock(), createElementBlock("div", _hoisted_1$
|
|
958
|
+
return openBlock(), createElementBlock("div", { class: normalizeClass(layoutClasses.value) }, [_ctx.$slots.topbar ? (openBlock(), createElementBlock("div", _hoisted_1$11, [renderSlot(_ctx.$slots, "topbar")])) : createCommentVNode("", true), createElementVNode("div", _hoisted_2$9, [
|
|
958
959
|
__props.responsiveSidebar && _ctx.$slots.sidebar ? (openBlock(), createElementBlock("button", {
|
|
959
960
|
key: 0,
|
|
960
961
|
type: "button",
|
|
@@ -962,7 +963,7 @@ var AppLayout_default = /* @__PURE__ */ defineComponent({
|
|
|
962
963
|
"aria-label": sidebarOpenModel.value ? __props.sidebarCloseLabel : __props.sidebarToggleLabel,
|
|
963
964
|
"aria-expanded": sidebarOpenModel.value,
|
|
964
965
|
onClick: toggleSidebar
|
|
965
|
-
}, [!sidebarOpenModel.value ? (openBlock(), createElementBlock("svg", _hoisted_4$
|
|
966
|
+
}, [!sidebarOpenModel.value ? (openBlock(), createElementBlock("svg", _hoisted_4$8, [..._cache[0] || (_cache[0] = [createElementVNode("path", { d: "M4 6h16M4 12h16M4 18h16" }, null, -1)])])) : (openBlock(), createElementBlock("svg", _hoisted_5$8, [..._cache[1] || (_cache[1] = [createElementVNode("path", { d: "M6 18 18 6M6 6l12 12" }, null, -1)])]))], 8, _hoisted_3$9)) : createCommentVNode("", true),
|
|
966
967
|
__props.responsiveSidebar && _ctx.$slots.sidebar && sidebarOpenModel.value ? (openBlock(), createElementBlock("div", {
|
|
967
968
|
key: 1,
|
|
968
969
|
class: "mint-layout__sidebar-backdrop",
|
|
@@ -973,7 +974,7 @@ var AppLayout_default = /* @__PURE__ */ defineComponent({
|
|
|
973
974
|
class: "mint-layout__sidebar",
|
|
974
975
|
style: normalizeStyle(sidebarStyle.value)
|
|
975
976
|
}, [renderSlot(_ctx.$slots, "sidebar")], 4)) : createCommentVNode("", true),
|
|
976
|
-
createElementVNode("main", _hoisted_6$
|
|
977
|
+
createElementVNode("main", _hoisted_6$7, [renderSlot(_ctx.$slots, "default")])
|
|
977
978
|
])], 2);
|
|
978
979
|
};
|
|
979
980
|
}
|
|
@@ -1123,18 +1124,18 @@ function isFiniteNumber(value, min, max) {
|
|
|
1123
1124
|
}
|
|
1124
1125
|
//#endregion
|
|
1125
1126
|
//#region src/components/internal/ActionItemInternal.vue?vue&type=script&setup=true&lang.ts
|
|
1126
|
-
var _hoisted_1$
|
|
1127
|
+
var _hoisted_1$10 = [
|
|
1127
1128
|
"href",
|
|
1128
1129
|
"aria-disabled",
|
|
1129
1130
|
"tabindex"
|
|
1130
1131
|
];
|
|
1131
|
-
var _hoisted_2$
|
|
1132
|
+
var _hoisted_2$8 = [
|
|
1132
1133
|
"href",
|
|
1133
1134
|
"aria-disabled",
|
|
1134
1135
|
"tabindex",
|
|
1135
1136
|
"onClick"
|
|
1136
1137
|
];
|
|
1137
|
-
var _hoisted_3$
|
|
1138
|
+
var _hoisted_3$8 = ["type", "disabled"];
|
|
1138
1139
|
//#endregion
|
|
1139
1140
|
//#region src/components/internal/ActionItemInternal.vue
|
|
1140
1141
|
var ActionItemInternal_default = /* @__PURE__ */ defineComponent({
|
|
@@ -1180,7 +1181,7 @@ var ActionItemInternal_default = /* @__PURE__ */ defineComponent({
|
|
|
1180
1181
|
"aria-disabled": __props.disabled || void 0,
|
|
1181
1182
|
tabindex: __props.disabled ? -1 : void 0,
|
|
1182
1183
|
onClick: handleClick
|
|
1183
|
-
}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$
|
|
1184
|
+
}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$10)) : __props.to ? (openBlock(), createBlock(_component_router_link, {
|
|
1184
1185
|
key: 1,
|
|
1185
1186
|
to: __props.to,
|
|
1186
1187
|
custom: ""
|
|
@@ -1190,33 +1191,33 @@ var ActionItemInternal_default = /* @__PURE__ */ defineComponent({
|
|
|
1190
1191
|
"aria-disabled": __props.disabled || void 0,
|
|
1191
1192
|
tabindex: __props.disabled ? -1 : void 0,
|
|
1192
1193
|
onClick: ($event) => handleRouterClick($event, navigate)
|
|
1193
|
-
}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_2$
|
|
1194
|
+
}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_2$8)]),
|
|
1194
1195
|
_: 3
|
|
1195
1196
|
}, 8, ["to"])) : (openBlock(), createElementBlock("button", mergeProps({ key: 2 }, _ctx.$attrs, {
|
|
1196
1197
|
type: __props.type,
|
|
1197
1198
|
disabled: __props.disabled,
|
|
1198
1199
|
onClick: handleClick
|
|
1199
|
-
}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_3$
|
|
1200
|
+
}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_3$8));
|
|
1200
1201
|
};
|
|
1201
1202
|
}
|
|
1202
1203
|
});
|
|
1203
1204
|
//#endregion
|
|
1204
1205
|
//#region src/components/PluginIcon.vue?vue&type=script&setup=true&lang.ts
|
|
1205
|
-
var _hoisted_1$
|
|
1206
|
-
var _hoisted_2$
|
|
1207
|
-
var _hoisted_3$
|
|
1206
|
+
var _hoisted_1$9 = ["viewBox"];
|
|
1207
|
+
var _hoisted_2$7 = { key: 0 };
|
|
1208
|
+
var _hoisted_3$7 = [
|
|
1208
1209
|
"id",
|
|
1209
1210
|
"x1",
|
|
1210
1211
|
"y1",
|
|
1211
1212
|
"x2",
|
|
1212
1213
|
"y2"
|
|
1213
1214
|
];
|
|
1214
|
-
var _hoisted_4$
|
|
1215
|
+
var _hoisted_4$7 = [
|
|
1215
1216
|
"offset",
|
|
1216
1217
|
"stop-color",
|
|
1217
1218
|
"stop-opacity"
|
|
1218
1219
|
];
|
|
1219
|
-
var _hoisted_5$
|
|
1220
|
+
var _hoisted_5$7 = [
|
|
1220
1221
|
"x",
|
|
1221
1222
|
"y",
|
|
1222
1223
|
"width",
|
|
@@ -1224,14 +1225,14 @@ var _hoisted_5$5 = [
|
|
|
1224
1225
|
"rx",
|
|
1225
1226
|
"fill"
|
|
1226
1227
|
];
|
|
1227
|
-
var _hoisted_6$
|
|
1228
|
+
var _hoisted_6$6 = [
|
|
1228
1229
|
"d",
|
|
1229
1230
|
"fill",
|
|
1230
1231
|
"stroke",
|
|
1231
1232
|
"stroke-width",
|
|
1232
1233
|
"opacity"
|
|
1233
1234
|
];
|
|
1234
|
-
var _hoisted_7$
|
|
1235
|
+
var _hoisted_7$6 = {
|
|
1235
1236
|
key: 1,
|
|
1236
1237
|
class: "mint-plugin-icon__svg",
|
|
1237
1238
|
viewBox: "0 0 24 24",
|
|
@@ -1242,8 +1243,8 @@ var _hoisted_7$4 = {
|
|
|
1242
1243
|
"stroke-linejoin": "round",
|
|
1243
1244
|
"aria-hidden": "true"
|
|
1244
1245
|
};
|
|
1245
|
-
var _hoisted_8$
|
|
1246
|
-
var _hoisted_9$
|
|
1246
|
+
var _hoisted_8$6 = ["d"];
|
|
1247
|
+
var _hoisted_9$6 = ["src"];
|
|
1247
1248
|
//#endregion
|
|
1248
1249
|
//#region src/components/PluginIcon.vue
|
|
1249
1250
|
var PluginIcon_default = /* @__PURE__ */ defineComponent({
|
|
@@ -1319,7 +1320,7 @@ var PluginIcon_default = /* @__PURE__ */ defineComponent({
|
|
|
1319
1320
|
viewBox: structuredIcon.value.viewBox,
|
|
1320
1321
|
"aria-hidden": "true"
|
|
1321
1322
|
}, [
|
|
1322
|
-
structuredIcon.value.gradient ? (openBlock(), createElementBlock("defs", _hoisted_2$
|
|
1323
|
+
structuredIcon.value.gradient ? (openBlock(), createElementBlock("defs", _hoisted_2$7, [createElementVNode("linearGradient", {
|
|
1323
1324
|
id: gradientId.value,
|
|
1324
1325
|
x1: gradientCoords.value.x1,
|
|
1325
1326
|
y1: gradientCoords.value.y1,
|
|
@@ -1331,8 +1332,8 @@ var PluginIcon_default = /* @__PURE__ */ defineComponent({
|
|
|
1331
1332
|
offset: stop.offset,
|
|
1332
1333
|
"stop-color": stop.color,
|
|
1333
1334
|
"stop-opacity": stop.opacity
|
|
1334
|
-
}, null, 8, _hoisted_4$
|
|
1335
|
-
}), 128))], 8, _hoisted_3$
|
|
1335
|
+
}, null, 8, _hoisted_4$7);
|
|
1336
|
+
}), 128))], 8, _hoisted_3$7)])) : createCommentVNode("", true),
|
|
1336
1337
|
structuredIcon.value.background ? (openBlock(), createElementBlock("rect", {
|
|
1337
1338
|
key: 1,
|
|
1338
1339
|
x: structuredViewBox.value.x,
|
|
@@ -1341,7 +1342,7 @@ var PluginIcon_default = /* @__PURE__ */ defineComponent({
|
|
|
1341
1342
|
height: structuredViewBox.value.height,
|
|
1342
1343
|
rx: structuredIcon.value.background.radius,
|
|
1343
1344
|
fill: backgroundFill.value
|
|
1344
|
-
}, null, 8, _hoisted_5$
|
|
1345
|
+
}, null, 8, _hoisted_5$7)) : createCommentVNode("", true),
|
|
1345
1346
|
(openBlock(true), createElementBlock(Fragment, null, renderList(structuredIcon.value.paths, (path, index) => {
|
|
1346
1347
|
return openBlock(), createElementBlock("path", {
|
|
1347
1348
|
key: index,
|
|
@@ -1352,41 +1353,56 @@ var PluginIcon_default = /* @__PURE__ */ defineComponent({
|
|
|
1352
1353
|
opacity: path.opacity,
|
|
1353
1354
|
"stroke-linecap": "round",
|
|
1354
1355
|
"stroke-linejoin": "round"
|
|
1355
|
-
}, null, 8, _hoisted_6$
|
|
1356
|
+
}, null, 8, _hoisted_6$6);
|
|
1356
1357
|
}), 128))
|
|
1357
|
-
], 8, _hoisted_1$
|
|
1358
|
+
], 8, _hoisted_1$9)) : detected.value.format === "path" || detected.value.format === "fallback" ? (openBlock(), createElementBlock("svg", _hoisted_7$6, [createElementVNode("path", { d: iconValue.value }, null, 8, _hoisted_8$6)])) : (openBlock(), createElementBlock("img", {
|
|
1358
1359
|
key: 2,
|
|
1359
1360
|
class: "mint-plugin-icon__img",
|
|
1360
1361
|
src: iconValue.value,
|
|
1361
1362
|
alt: "",
|
|
1362
1363
|
referrerpolicy: "no-referrer",
|
|
1363
1364
|
loading: "lazy"
|
|
1364
|
-
}, null, 8, _hoisted_9$
|
|
1365
|
+
}, null, 8, _hoisted_9$6))], 6);
|
|
1365
1366
|
};
|
|
1366
1367
|
}
|
|
1367
1368
|
});
|
|
1368
1369
|
//#endregion
|
|
1369
1370
|
//#region src/components/internal/AppTopBarPageSelectorInternal.vue?vue&type=script&setup=true&lang.ts
|
|
1370
|
-
var _hoisted_1$
|
|
1371
|
-
|
|
1371
|
+
var _hoisted_1$8 = {
|
|
1372
|
+
ref: "root",
|
|
1373
|
+
class: "mint-page-selector__crumb"
|
|
1374
|
+
};
|
|
1375
|
+
var _hoisted_2$6 = { class: "mint-page-selector__plugin" };
|
|
1376
|
+
var _hoisted_3$6 = ["aria-expanded"];
|
|
1377
|
+
var _hoisted_4$6 = {
|
|
1372
1378
|
key: 1,
|
|
1373
1379
|
class: "mint-page-selector__icon-fallback"
|
|
1374
1380
|
};
|
|
1375
|
-
var
|
|
1376
|
-
var
|
|
1381
|
+
var _hoisted_5$6 = { class: "mint-page-selector__label" };
|
|
1382
|
+
var _hoisted_6$5 = {
|
|
1377
1383
|
class: "mint-page-selector__chevron-wrap",
|
|
1378
1384
|
"aria-hidden": "true"
|
|
1379
1385
|
};
|
|
1380
|
-
var
|
|
1381
|
-
|
|
1382
|
-
class: "mint-page-selector__menu",
|
|
1383
|
-
|
|
1386
|
+
var _hoisted_7$5 = ["aria-label"];
|
|
1387
|
+
var _hoisted_8$5 = {
|
|
1388
|
+
class: "mint-page-selector__menu-title",
|
|
1389
|
+
"aria-hidden": "true"
|
|
1384
1390
|
};
|
|
1385
|
-
var
|
|
1391
|
+
var _hoisted_9$5 = {
|
|
1386
1392
|
key: 1,
|
|
1387
1393
|
class: "mint-page-selector__icon-fallback"
|
|
1388
1394
|
};
|
|
1389
|
-
var
|
|
1395
|
+
var _hoisted_10$5 = { class: "mint-page-selector__item-text" };
|
|
1396
|
+
var _hoisted_11$5 = { class: "mint-page-selector__item-label" };
|
|
1397
|
+
var _hoisted_12$4 = {
|
|
1398
|
+
key: 0,
|
|
1399
|
+
class: "mint-page-selector__item-hint"
|
|
1400
|
+
};
|
|
1401
|
+
var _hoisted_13$4 = {
|
|
1402
|
+
key: 0,
|
|
1403
|
+
class: "mint-page-selector__item-key",
|
|
1404
|
+
"aria-hidden": "true"
|
|
1405
|
+
};
|
|
1390
1406
|
//#endregion
|
|
1391
1407
|
//#region src/components/internal/AppTopBarPageSelectorInternal.vue
|
|
1392
1408
|
var AppTopBarPageSelectorInternal_default = /* @__PURE__ */ defineComponent({
|
|
@@ -1395,19 +1411,64 @@ var AppTopBarPageSelectorInternal_default = /* @__PURE__ */ defineComponent({
|
|
|
1395
1411
|
pages: {},
|
|
1396
1412
|
currentPageId: {},
|
|
1397
1413
|
placeholder: { default: "Go to…" },
|
|
1398
|
-
minWidth: {
|
|
1414
|
+
minWidth: {},
|
|
1415
|
+
pluginName: {}
|
|
1399
1416
|
},
|
|
1400
1417
|
emits: ["select"],
|
|
1401
1418
|
setup(__props, { emit: __emit }) {
|
|
1402
|
-
/**
|
|
1419
|
+
/** "Plugin / page" switcher: the plugin name, then a trigger that opens the page menu (hints, number keys 1-9). */
|
|
1403
1420
|
const props = __props;
|
|
1404
1421
|
const emit = __emit;
|
|
1405
|
-
const
|
|
1422
|
+
const triggerEl = useTemplateRef("trigger");
|
|
1423
|
+
const menuEl = useTemplateRef("menu");
|
|
1424
|
+
const { isOpen, open, close, toggle } = useDropdownState({
|
|
1406
1425
|
rootRef: useTemplateRef("root"),
|
|
1407
|
-
triggerRef:
|
|
1426
|
+
triggerRef: triggerEl
|
|
1408
1427
|
});
|
|
1409
1428
|
const normalizedPages = computed(() => props.pages.map(normalizeItemInput));
|
|
1429
|
+
const menuTitle = computed(() => props.pluginName ? `${props.pluginName} pages` : "Pages");
|
|
1410
1430
|
const current = computed(() => normalizedPages.value.find((p) => p.id === props.currentPageId) ?? normalizedPages.value[0]);
|
|
1431
|
+
const rows = () => Array.from(menuEl.value?.querySelectorAll("[role=\"menuitem\"]") ?? []);
|
|
1432
|
+
const isEnabled = (row) => !row.hasAttribute("disabled") && row.getAttribute("aria-disabled") !== "true";
|
|
1433
|
+
const enabledRows = () => rows().filter(isEnabled);
|
|
1434
|
+
const { handlePanelKeydown } = useMenuKeyboard({
|
|
1435
|
+
items: enabledRows,
|
|
1436
|
+
isOpen: () => isOpen.value,
|
|
1437
|
+
open,
|
|
1438
|
+
close
|
|
1439
|
+
});
|
|
1440
|
+
function handleTriggerKeydown(event) {
|
|
1441
|
+
if (isOpen.value || ![
|
|
1442
|
+
"ArrowDown",
|
|
1443
|
+
"Enter",
|
|
1444
|
+
" "
|
|
1445
|
+
].includes(event.key)) return;
|
|
1446
|
+
event.preventDefault();
|
|
1447
|
+
open();
|
|
1448
|
+
nextTick(() => {
|
|
1449
|
+
const items = enabledRows();
|
|
1450
|
+
(items.find((row) => row.getAttribute("aria-current") === "page") ?? items[0])?.focus();
|
|
1451
|
+
});
|
|
1452
|
+
}
|
|
1453
|
+
function activate(row) {
|
|
1454
|
+
row.click();
|
|
1455
|
+
if (!isOpen.value) triggerEl.value?.focus();
|
|
1456
|
+
}
|
|
1457
|
+
function handleMenuKeydown(event) {
|
|
1458
|
+
if (/^[1-9]$/.test(event.key)) {
|
|
1459
|
+
event.preventDefault();
|
|
1460
|
+
const row = rows()[Number(event.key) - 1];
|
|
1461
|
+
if (row && isEnabled(row)) activate(row);
|
|
1462
|
+
return;
|
|
1463
|
+
}
|
|
1464
|
+
const focused = document.activeElement;
|
|
1465
|
+
if ((event.key === "Enter" || event.key === " ") && focused && enabledRows().includes(focused)) {
|
|
1466
|
+
event.preventDefault();
|
|
1467
|
+
activate(focused);
|
|
1468
|
+
return;
|
|
1469
|
+
}
|
|
1470
|
+
handlePanelKeydown(event);
|
|
1471
|
+
}
|
|
1411
1472
|
function handleSelect(page) {
|
|
1412
1473
|
if (page.disabled) return;
|
|
1413
1474
|
if (page.href || page.to) {
|
|
@@ -1418,17 +1479,20 @@ var AppTopBarPageSelectorInternal_default = /* @__PURE__ */ defineComponent({
|
|
|
1418
1479
|
close();
|
|
1419
1480
|
}
|
|
1420
1481
|
return (_ctx, _cache) => {
|
|
1421
|
-
return openBlock(), createElementBlock("div", {
|
|
1422
|
-
|
|
1482
|
+
return openBlock(), createElementBlock("div", _hoisted_1$8, [__props.pluginName ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_2$6, toDisplayString(__props.pluginName), 1), _cache[1] || (_cache[1] = createElementVNode("span", {
|
|
1483
|
+
class: "mint-page-selector__slash",
|
|
1484
|
+
"aria-hidden": "true"
|
|
1485
|
+
}, "/", -1))], 64)) : createCommentVNode("", true), createElementVNode("div", {
|
|
1423
1486
|
class: "mint-page-selector",
|
|
1424
|
-
style: normalizeStyle({ minWidth: __props.minWidth })
|
|
1487
|
+
style: normalizeStyle(__props.minWidth ? { minWidth: __props.minWidth } : void 0)
|
|
1425
1488
|
}, [createElementVNode("button", {
|
|
1426
1489
|
ref: "trigger",
|
|
1427
1490
|
type: "button",
|
|
1428
1491
|
class: normalizeClass(["mint-page-selector__trigger", { "mint-page-selector__trigger--open": unref(isOpen) }]),
|
|
1429
1492
|
"aria-expanded": unref(isOpen),
|
|
1430
1493
|
"aria-haspopup": "menu",
|
|
1431
|
-
onClick: _cache[0] || (_cache[0] = withModifiers((...args) => unref(toggle) && unref(toggle)(...args), ["stop"]))
|
|
1494
|
+
onClick: _cache[0] || (_cache[0] = withModifiers((...args) => unref(toggle) && unref(toggle)(...args), ["stop"])),
|
|
1495
|
+
onKeydown: handleTriggerKeydown
|
|
1432
1496
|
}, [
|
|
1433
1497
|
current.value ? (openBlock(), createElementBlock("span", {
|
|
1434
1498
|
key: 0,
|
|
@@ -1439,9 +1503,9 @@ var AppTopBarPageSelectorInternal_default = /* @__PURE__ */ defineComponent({
|
|
|
1439
1503
|
icon: current.value.icon,
|
|
1440
1504
|
size: "sm",
|
|
1441
1505
|
variant: "solid"
|
|
1442
|
-
}, null, 8, ["icon"])) : (openBlock(), createElementBlock("span",
|
|
1443
|
-
createElementVNode("span",
|
|
1444
|
-
createElementVNode("span",
|
|
1506
|
+
}, null, 8, ["icon"])) : (openBlock(), createElementBlock("span", _hoisted_4$6, toDisplayString(current.value.label.charAt(0)), 1))])], 2)) : createCommentVNode("", true),
|
|
1507
|
+
createElementVNode("span", _hoisted_5$6, toDisplayString(current.value?.label ?? __props.placeholder), 1),
|
|
1508
|
+
createElementVNode("span", _hoisted_6$5, [(openBlock(), createElementBlock("svg", {
|
|
1445
1509
|
class: normalizeClass(["mint-page-selector__chevron", { "mint-page-selector__chevron--open": unref(isOpen) }]),
|
|
1446
1510
|
viewBox: "0 0 24 24",
|
|
1447
1511
|
fill: "none",
|
|
@@ -1449,8 +1513,15 @@ var AppTopBarPageSelectorInternal_default = /* @__PURE__ */ defineComponent({
|
|
|
1449
1513
|
"stroke-width": "2",
|
|
1450
1514
|
"stroke-linecap": "round",
|
|
1451
1515
|
"stroke-linejoin": "round"
|
|
1452
|
-
}, [..._cache[
|
|
1453
|
-
],
|
|
1516
|
+
}, [..._cache[2] || (_cache[2] = [createElementVNode("path", { d: "m6 9 6 6 6-6" }, null, -1)])], 2))])
|
|
1517
|
+
], 42, _hoisted_3$6), unref(isOpen) ? (openBlock(), createElementBlock("div", {
|
|
1518
|
+
key: 0,
|
|
1519
|
+
ref: "menu",
|
|
1520
|
+
class: "mint-page-selector__menu",
|
|
1521
|
+
role: "menu",
|
|
1522
|
+
"aria-label": menuTitle.value,
|
|
1523
|
+
onKeydown: handleMenuKeydown
|
|
1524
|
+
}, [createElementVNode("div", _hoisted_8$5, toDisplayString(menuTitle.value), 1), (openBlock(true), createElementBlock(Fragment, null, renderList(normalizedPages.value, (page, index) => {
|
|
1454
1525
|
return openBlock(), createBlock(ActionItemInternal_default, {
|
|
1455
1526
|
key: page.id,
|
|
1456
1527
|
href: page.href,
|
|
@@ -1462,39 +1533,47 @@ var AppTopBarPageSelectorInternal_default = /* @__PURE__ */ defineComponent({
|
|
|
1462
1533
|
{ "mint-page-selector__item--disabled": page.disabled }
|
|
1463
1534
|
]),
|
|
1464
1535
|
role: "menuitem",
|
|
1536
|
+
"aria-current": page.id === current.value?.id ? "page" : void 0,
|
|
1537
|
+
"aria-keyshortcuts": index < 9 ? String(index + 1) : void 0,
|
|
1465
1538
|
onClick: ($event) => handleSelect(page)
|
|
1466
1539
|
}, {
|
|
1467
|
-
default: withCtx(() => [
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
1540
|
+
default: withCtx(() => [
|
|
1541
|
+
createElementVNode("span", { class: normalizeClass(["mint-page-selector__item-icon", { "mint-page-selector__item-icon--metadata": unref(isPluginIconFormat)(page.icon) }]) }, [renderSlot(_ctx.$slots, "item-icon", { page }, () => [unref(isPluginIconFormat)(page.icon) ? (openBlock(), createBlock(PluginIcon_default, {
|
|
1542
|
+
key: 0,
|
|
1543
|
+
class: "mint-page-selector__metadata-icon",
|
|
1544
|
+
icon: page.icon,
|
|
1545
|
+
size: "sm",
|
|
1546
|
+
variant: "solid"
|
|
1547
|
+
}, null, 8, ["icon"])) : (openBlock(), createElementBlock("span", _hoisted_9$5, toDisplayString(page.label.charAt(0)), 1))])], 2),
|
|
1548
|
+
createElementVNode("span", _hoisted_10$5, [createElementVNode("span", _hoisted_11$5, toDisplayString(page.label), 1), page.hint ? (openBlock(), createElementBlock("span", _hoisted_12$4, toDisplayString(page.hint), 1)) : createCommentVNode("", true)]),
|
|
1549
|
+
index < 9 ? (openBlock(), createElementBlock("span", _hoisted_13$4, toDisplayString(index + 1), 1)) : createCommentVNode("", true)
|
|
1550
|
+
]),
|
|
1474
1551
|
_: 2
|
|
1475
1552
|
}, 1032, [
|
|
1476
1553
|
"href",
|
|
1477
1554
|
"to",
|
|
1478
1555
|
"disabled",
|
|
1479
1556
|
"class",
|
|
1557
|
+
"aria-current",
|
|
1558
|
+
"aria-keyshortcuts",
|
|
1480
1559
|
"onClick"
|
|
1481
1560
|
]);
|
|
1482
|
-
}), 128))])) : createCommentVNode("", true)], 4);
|
|
1561
|
+
}), 128))], 40, _hoisted_7$5)) : createCommentVNode("", true)], 4)], 512);
|
|
1483
1562
|
};
|
|
1484
1563
|
}
|
|
1485
1564
|
});
|
|
1486
1565
|
//#endregion
|
|
1487
1566
|
//#region src/components/internal/AppTopBarPillNavInternal.vue?vue&type=script&setup=true&lang.ts
|
|
1488
|
-
var _hoisted_1$
|
|
1567
|
+
var _hoisted_1$7 = {
|
|
1489
1568
|
class: "mint-pill-nav",
|
|
1490
1569
|
"aria-label": "Primary"
|
|
1491
1570
|
};
|
|
1492
|
-
var _hoisted_2$
|
|
1571
|
+
var _hoisted_2$5 = [
|
|
1493
1572
|
"disabled",
|
|
1494
1573
|
"aria-expanded",
|
|
1495
1574
|
"onClick"
|
|
1496
1575
|
];
|
|
1497
|
-
var _hoisted_3$
|
|
1576
|
+
var _hoisted_3$5 = {
|
|
1498
1577
|
key: 0,
|
|
1499
1578
|
class: "mint-pill-nav__icon",
|
|
1500
1579
|
viewBox: "0 0 24 24",
|
|
@@ -1505,15 +1584,15 @@ var _hoisted_3$3 = {
|
|
|
1505
1584
|
"stroke-linejoin": "round",
|
|
1506
1585
|
"aria-hidden": "true"
|
|
1507
1586
|
};
|
|
1508
|
-
var _hoisted_4$
|
|
1509
|
-
var _hoisted_5$
|
|
1510
|
-
var _hoisted_6$
|
|
1587
|
+
var _hoisted_4$5 = ["d"];
|
|
1588
|
+
var _hoisted_5$5 = ["d"];
|
|
1589
|
+
var _hoisted_6$4 = {
|
|
1511
1590
|
key: 1,
|
|
1512
1591
|
class: "mint-pill-nav__dot",
|
|
1513
1592
|
role: "img",
|
|
1514
1593
|
"aria-label": "Needs attention"
|
|
1515
1594
|
};
|
|
1516
|
-
var _hoisted_7$
|
|
1595
|
+
var _hoisted_7$4 = {
|
|
1517
1596
|
key: 0,
|
|
1518
1597
|
class: "mint-pill-nav__icon",
|
|
1519
1598
|
viewBox: "0 0 24 24",
|
|
@@ -1524,21 +1603,21 @@ var _hoisted_7$2 = {
|
|
|
1524
1603
|
"stroke-linejoin": "round",
|
|
1525
1604
|
"aria-hidden": "true"
|
|
1526
1605
|
};
|
|
1527
|
-
var _hoisted_8$
|
|
1528
|
-
var _hoisted_9$
|
|
1529
|
-
var _hoisted_10$
|
|
1606
|
+
var _hoisted_8$4 = ["d"];
|
|
1607
|
+
var _hoisted_9$4 = ["d"];
|
|
1608
|
+
var _hoisted_10$4 = {
|
|
1530
1609
|
key: 1,
|
|
1531
1610
|
class: "mint-pill-nav__dot",
|
|
1532
1611
|
role: "img",
|
|
1533
1612
|
"aria-label": "Needs attention"
|
|
1534
1613
|
};
|
|
1535
|
-
var _hoisted_11$
|
|
1614
|
+
var _hoisted_11$4 = {
|
|
1536
1615
|
key: 2,
|
|
1537
1616
|
class: "mint-popover mint-pill-nav__dropdown",
|
|
1538
1617
|
role: "menu"
|
|
1539
1618
|
};
|
|
1540
|
-
var _hoisted_12$
|
|
1541
|
-
var _hoisted_13$
|
|
1619
|
+
var _hoisted_12$3 = { class: "mint-pill-nav__dropdown-label" };
|
|
1620
|
+
var _hoisted_13$3 = {
|
|
1542
1621
|
key: 0,
|
|
1543
1622
|
class: "mint-pill-nav__dropdown-description"
|
|
1544
1623
|
};
|
|
@@ -1621,7 +1700,7 @@ var AppTopBarPillNavInternal_default = /* @__PURE__ */ defineComponent({
|
|
|
1621
1700
|
}
|
|
1622
1701
|
useEventListener(() => document, "click", handleClickOutside);
|
|
1623
1702
|
return (_ctx, _cache) => {
|
|
1624
|
-
return openBlock(), createElementBlock("nav", _hoisted_1$
|
|
1703
|
+
return openBlock(), createElementBlock("nav", _hoisted_1$7, [(openBlock(true), createElementBlock(Fragment, null, renderList(normalizedItems.value, (item) => {
|
|
1625
1704
|
return openBlock(), createElementBlock("div", {
|
|
1626
1705
|
key: item.id,
|
|
1627
1706
|
ref_for: true,
|
|
@@ -1640,17 +1719,17 @@ var AppTopBarPillNavInternal_default = /* @__PURE__ */ defineComponent({
|
|
|
1640
1719
|
"aria-haspopup": "menu",
|
|
1641
1720
|
onClick: withModifiers(($event) => handleClick(item), ["stop"])
|
|
1642
1721
|
}, [
|
|
1643
|
-
isSvgIcon(item.icon) ? (openBlock(), createElementBlock("svg", _hoisted_3$
|
|
1722
|
+
isSvgIcon(item.icon) ? (openBlock(), createElementBlock("svg", _hoisted_3$5, [Array.isArray(item.icon) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(item.icon, (d, index) => {
|
|
1644
1723
|
return openBlock(), createElementBlock("path", {
|
|
1645
1724
|
key: index,
|
|
1646
1725
|
d
|
|
1647
|
-
}, null, 8, _hoisted_4$
|
|
1726
|
+
}, null, 8, _hoisted_4$5);
|
|
1648
1727
|
}), 128)) : (openBlock(), createElementBlock("path", {
|
|
1649
1728
|
key: 1,
|
|
1650
1729
|
d: item.icon
|
|
1651
|
-
}, null, 8, _hoisted_5$
|
|
1730
|
+
}, null, 8, _hoisted_5$5))])) : createCommentVNode("", true),
|
|
1652
1731
|
createTextVNode(" " + toDisplayString(activeChild(item)?.label ?? item.label) + " ", 1),
|
|
1653
|
-
item.dot ? (openBlock(), createElementBlock("span", _hoisted_6$
|
|
1732
|
+
item.dot ? (openBlock(), createElementBlock("span", _hoisted_6$4)) : createCommentVNode("", true),
|
|
1654
1733
|
(openBlock(), createElementBlock("svg", {
|
|
1655
1734
|
class: normalizeClass(["mint-pill-nav__chevron", { "mint-pill-nav__chevron--open": openItemId.value === item.id }]),
|
|
1656
1735
|
viewBox: "0 0 24 24",
|
|
@@ -1661,7 +1740,7 @@ var AppTopBarPillNavInternal_default = /* @__PURE__ */ defineComponent({
|
|
|
1661
1740
|
"stroke-linejoin": "round",
|
|
1662
1741
|
"aria-hidden": "true"
|
|
1663
1742
|
}, [..._cache[0] || (_cache[0] = [createElementVNode("path", { d: "m6 9 6 6 6-6" }, null, -1)])], 2))
|
|
1664
|
-
], 10, _hoisted_2$
|
|
1743
|
+
], 10, _hoisted_2$5)) : (openBlock(), createBlock(ActionItemInternal_default, {
|
|
1665
1744
|
key: 1,
|
|
1666
1745
|
href: item.href,
|
|
1667
1746
|
to: item.to,
|
|
@@ -1674,17 +1753,17 @@ var AppTopBarPillNavInternal_default = /* @__PURE__ */ defineComponent({
|
|
|
1674
1753
|
onClick: ($event) => handleClick(item)
|
|
1675
1754
|
}, {
|
|
1676
1755
|
default: withCtx(() => [
|
|
1677
|
-
isSvgIcon(item.icon) ? (openBlock(), createElementBlock("svg", _hoisted_7$
|
|
1756
|
+
isSvgIcon(item.icon) ? (openBlock(), createElementBlock("svg", _hoisted_7$4, [Array.isArray(item.icon) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(item.icon, (d, index) => {
|
|
1678
1757
|
return openBlock(), createElementBlock("path", {
|
|
1679
1758
|
key: index,
|
|
1680
1759
|
d
|
|
1681
|
-
}, null, 8, _hoisted_8$
|
|
1760
|
+
}, null, 8, _hoisted_8$4);
|
|
1682
1761
|
}), 128)) : (openBlock(), createElementBlock("path", {
|
|
1683
1762
|
key: 1,
|
|
1684
1763
|
d: item.icon
|
|
1685
|
-
}, null, 8, _hoisted_9$
|
|
1764
|
+
}, null, 8, _hoisted_9$4))])) : createCommentVNode("", true),
|
|
1686
1765
|
createTextVNode(" " + toDisplayString(item.label) + " ", 1),
|
|
1687
|
-
item.dot ? (openBlock(), createElementBlock("span", _hoisted_10$
|
|
1766
|
+
item.dot ? (openBlock(), createElementBlock("span", _hoisted_10$4)) : createCommentVNode("", true)
|
|
1688
1767
|
]),
|
|
1689
1768
|
_: 2
|
|
1690
1769
|
}, 1032, [
|
|
@@ -1693,7 +1772,7 @@ var AppTopBarPillNavInternal_default = /* @__PURE__ */ defineComponent({
|
|
|
1693
1772
|
"disabled",
|
|
1694
1773
|
"class",
|
|
1695
1774
|
"onClick"
|
|
1696
|
-
])), item.children?.length && openItemId.value === item.id ? (openBlock(), createElementBlock("div", _hoisted_11$
|
|
1775
|
+
])), item.children?.length && openItemId.value === item.id ? (openBlock(), createElementBlock("div", _hoisted_11$4, [(openBlock(true), createElementBlock(Fragment, null, renderList(item.children, (option) => {
|
|
1697
1776
|
return openBlock(), createBlock(ActionItemInternal_default, {
|
|
1698
1777
|
key: option.id,
|
|
1699
1778
|
href: option.href,
|
|
@@ -1708,8 +1787,8 @@ var AppTopBarPillNavInternal_default = /* @__PURE__ */ defineComponent({
|
|
|
1708
1787
|
onClick: ($event) => handleOptionClick(option, item)
|
|
1709
1788
|
}, {
|
|
1710
1789
|
default: withCtx(() => [
|
|
1711
|
-
createElementVNode("span", _hoisted_12$
|
|
1712
|
-
option.description ? (openBlock(), createElementBlock("span", _hoisted_13$
|
|
1790
|
+
createElementVNode("span", _hoisted_12$3, toDisplayString(option.label), 1),
|
|
1791
|
+
option.description ? (openBlock(), createElementBlock("span", _hoisted_13$3, toDisplayString(option.description), 1)) : createCommentVNode("", true),
|
|
1713
1792
|
_cache[1] || (_cache[1] = createElementVNode("svg", {
|
|
1714
1793
|
class: "mint-menu-item__check",
|
|
1715
1794
|
viewBox: "0 0 16 16",
|
|
@@ -1735,6 +1814,757 @@ var AppTopBarPillNavInternal_default = /* @__PURE__ */ defineComponent({
|
|
|
1735
1814
|
}
|
|
1736
1815
|
});
|
|
1737
1816
|
//#endregion
|
|
1817
|
+
//#region src/components/internal/OnboardingLayerInternal.vue?vue&type=script&setup=true&lang.ts
|
|
1818
|
+
var _hoisted_1$6 = ["aria-label", "onClick"];
|
|
1819
|
+
var _hoisted_2$4 = {
|
|
1820
|
+
key: 0,
|
|
1821
|
+
class: "mint-onboarding"
|
|
1822
|
+
};
|
|
1823
|
+
var _hoisted_3$4 = ["aria-labelledby"];
|
|
1824
|
+
var _hoisted_4$4 = ["aria-label"];
|
|
1825
|
+
var _hoisted_5$4 = {
|
|
1826
|
+
key: 0,
|
|
1827
|
+
class: "mint-onboarding__count"
|
|
1828
|
+
};
|
|
1829
|
+
var _hoisted_6$3 = { "aria-hidden": "true" };
|
|
1830
|
+
var _hoisted_7$3 = { class: "mint-onboarding__sr" };
|
|
1831
|
+
var _hoisted_8$3 = ["id"];
|
|
1832
|
+
var _hoisted_9$3 = { class: "mint-onboarding__body" };
|
|
1833
|
+
var _hoisted_10$3 = { class: "mint-onboarding__footer" };
|
|
1834
|
+
var _hoisted_11$3 = {
|
|
1835
|
+
key: 0,
|
|
1836
|
+
class: "mint-onboarding__hint"
|
|
1837
|
+
};
|
|
1838
|
+
var HOLE_PAD = 4;
|
|
1839
|
+
//#endregion
|
|
1840
|
+
//#region src/components/internal/OnboardingLayerInternal.vue
|
|
1841
|
+
var OnboardingLayerInternal_default = /* @__PURE__ */ defineComponent({
|
|
1842
|
+
__name: "OnboardingLayerInternal",
|
|
1843
|
+
props: { state: {} },
|
|
1844
|
+
setup(__props) {
|
|
1845
|
+
/**
|
|
1846
|
+
* The tour layer: a scrim with a hole over the anchor, the step card, and the
|
|
1847
|
+
* what's-new dots. AppTopBar renders it when the app provides onboarding.
|
|
1848
|
+
*/
|
|
1849
|
+
const props = __props;
|
|
1850
|
+
const active = computed(() => props.state.active.value);
|
|
1851
|
+
const card = ref(null);
|
|
1852
|
+
const hole = ref(null);
|
|
1853
|
+
const cardPosition = ref({
|
|
1854
|
+
x: 0,
|
|
1855
|
+
y: 0
|
|
1856
|
+
});
|
|
1857
|
+
const titleId = useId();
|
|
1858
|
+
let stopAutoUpdate;
|
|
1859
|
+
async function position() {
|
|
1860
|
+
const current = active.value;
|
|
1861
|
+
if (!current || !card.value) return;
|
|
1862
|
+
hole.value = current.element.getBoundingClientRect();
|
|
1863
|
+
const { x, y } = await computePosition(current.element, card.value, {
|
|
1864
|
+
strategy: "fixed",
|
|
1865
|
+
placement: current.step.placement ?? "bottom",
|
|
1866
|
+
middleware: [
|
|
1867
|
+
offset(12),
|
|
1868
|
+
flip(),
|
|
1869
|
+
shift({ padding: 12 })
|
|
1870
|
+
]
|
|
1871
|
+
});
|
|
1872
|
+
if (active.value === current) cardPosition.value = {
|
|
1873
|
+
x,
|
|
1874
|
+
y
|
|
1875
|
+
};
|
|
1876
|
+
}
|
|
1877
|
+
let returnFocus = null;
|
|
1878
|
+
watch(active, async (current, previous) => {
|
|
1879
|
+
stopAutoUpdate?.();
|
|
1880
|
+
stopAutoUpdate = void 0;
|
|
1881
|
+
hole.value = null;
|
|
1882
|
+
if (current && !previous) returnFocus = document.activeElement;
|
|
1883
|
+
if (!current) {
|
|
1884
|
+
if (returnFocus?.isConnected) returnFocus.focus();
|
|
1885
|
+
returnFocus = null;
|
|
1886
|
+
return;
|
|
1887
|
+
}
|
|
1888
|
+
await nextTick();
|
|
1889
|
+
if (!card.value || active.value !== current) return;
|
|
1890
|
+
current.element.scrollIntoView({
|
|
1891
|
+
block: "nearest",
|
|
1892
|
+
inline: "nearest"
|
|
1893
|
+
});
|
|
1894
|
+
stopAutoUpdate = autoUpdate(current.element, card.value, () => void position());
|
|
1895
|
+
if (current.step.advanceOn === "click") current.element.focus();
|
|
1896
|
+
else card.value.focus();
|
|
1897
|
+
}, { immediate: true });
|
|
1898
|
+
onBeforeUnmount(() => stopAutoUpdate?.());
|
|
1899
|
+
useEventListener(document, "keydown", (event) => {
|
|
1900
|
+
const current = active.value;
|
|
1901
|
+
if (!current || !card.value) return;
|
|
1902
|
+
const focused = document.activeElement;
|
|
1903
|
+
if (focused && focused !== document.body && !card.value.contains(focused) && focused !== current.element) return;
|
|
1904
|
+
const onCard = focused === card.value;
|
|
1905
|
+
if (event.key === "Escape") {
|
|
1906
|
+
event.stopPropagation();
|
|
1907
|
+
props.state.dismiss();
|
|
1908
|
+
} else if (event.key === "Tab") {
|
|
1909
|
+
const buttons = [...card.value.querySelectorAll("button")];
|
|
1910
|
+
const stops = current.step.advanceOn === "click" ? [current.element, ...buttons] : buttons;
|
|
1911
|
+
const at = stops.indexOf(document.activeElement);
|
|
1912
|
+
const target = at === -1 ? event.shiftKey ? stops.length - 1 : 0 : (at + (event.shiftKey ? -1 : 1) + stops.length) % stops.length;
|
|
1913
|
+
event.preventDefault();
|
|
1914
|
+
stops[target].focus();
|
|
1915
|
+
} else if (event.key === "Enter" && onCard && current.step.advanceOn !== "click") {
|
|
1916
|
+
event.preventDefault();
|
|
1917
|
+
props.state.next();
|
|
1918
|
+
}
|
|
1919
|
+
}, { capture: true });
|
|
1920
|
+
const holeStyle = computed(() => hole.value && {
|
|
1921
|
+
left: `${hole.value.left - HOLE_PAD}px`,
|
|
1922
|
+
top: `${hole.value.top - HOLE_PAD}px`,
|
|
1923
|
+
width: `${hole.value.width + 8}px`,
|
|
1924
|
+
height: `${hole.value.height + 8}px`
|
|
1925
|
+
});
|
|
1926
|
+
const blockerStyle = computed(() => {
|
|
1927
|
+
const rect = hole.value;
|
|
1928
|
+
if (!rect || active.value?.step.advanceOn !== "click") return void 0;
|
|
1929
|
+
const [x, y, w, h] = [
|
|
1930
|
+
rect.left - HOLE_PAD,
|
|
1931
|
+
rect.top - HOLE_PAD,
|
|
1932
|
+
rect.width + 8,
|
|
1933
|
+
rect.height + 8
|
|
1934
|
+
];
|
|
1935
|
+
return { clipPath: `path(evenodd, 'M0 0H${window.innerWidth}V${window.innerHeight}H0Z M${x} ${y}h${w}v${h}h${-w}Z')` };
|
|
1936
|
+
});
|
|
1937
|
+
const isLast = computed(() => !!active.value && active.value.index === active.value.count - 1);
|
|
1938
|
+
const nextLabel = computed(() => active.value?.news ? "Got it" : isLast.value ? "Done" : "Next");
|
|
1939
|
+
const dots = ref([]);
|
|
1940
|
+
let frame = 0;
|
|
1941
|
+
function placeDots() {
|
|
1942
|
+
cancelAnimationFrame(frame);
|
|
1943
|
+
frame = requestAnimationFrame(() => {
|
|
1944
|
+
dots.value = active.value ? [] : props.state.news.value.flatMap((item) => {
|
|
1945
|
+
if (!item.unseen) return [];
|
|
1946
|
+
const element = document.querySelector(`[data-onboarding="${CSS.escape(item.anchor)}"]`);
|
|
1947
|
+
if (!element) return [];
|
|
1948
|
+
const rect = element.getBoundingClientRect();
|
|
1949
|
+
return rect.width ? [{
|
|
1950
|
+
id: item.id,
|
|
1951
|
+
title: item.title,
|
|
1952
|
+
x: rect.right,
|
|
1953
|
+
y: rect.top
|
|
1954
|
+
}] : [];
|
|
1955
|
+
});
|
|
1956
|
+
});
|
|
1957
|
+
}
|
|
1958
|
+
const observer = new MutationObserver(placeDots);
|
|
1959
|
+
watch(() => props.state.unseenNews.value > 0, (watching) => {
|
|
1960
|
+
observer.disconnect();
|
|
1961
|
+
if (watching) observer.observe(document.body, {
|
|
1962
|
+
childList: true,
|
|
1963
|
+
subtree: true
|
|
1964
|
+
});
|
|
1965
|
+
placeDots();
|
|
1966
|
+
}, { immediate: true });
|
|
1967
|
+
watch(active, placeDots);
|
|
1968
|
+
useEventListener(window, "resize", placeDots);
|
|
1969
|
+
useEventListener(window, "scroll", placeDots, {
|
|
1970
|
+
capture: true,
|
|
1971
|
+
passive: true
|
|
1972
|
+
});
|
|
1973
|
+
onBeforeUnmount(() => {
|
|
1974
|
+
observer.disconnect();
|
|
1975
|
+
cancelAnimationFrame(frame);
|
|
1976
|
+
});
|
|
1977
|
+
return (_ctx, _cache) => {
|
|
1978
|
+
return openBlock(), createBlock(Teleport, { to: "body" }, [(openBlock(true), createElementBlock(Fragment, null, renderList(dots.value, (dot) => {
|
|
1979
|
+
return openBlock(), createElementBlock("button", {
|
|
1980
|
+
key: dot.id,
|
|
1981
|
+
type: "button",
|
|
1982
|
+
class: "mint-onboarding__dot",
|
|
1983
|
+
style: normalizeStyle({
|
|
1984
|
+
left: `${dot.x}px`,
|
|
1985
|
+
top: `${dot.y}px`
|
|
1986
|
+
}),
|
|
1987
|
+
"aria-label": `New: ${dot.title}`,
|
|
1988
|
+
onClick: ($event) => __props.state.showNews(dot.id)
|
|
1989
|
+
}, null, 12, _hoisted_1$6);
|
|
1990
|
+
}), 128)), active.value ? (openBlock(), createElementBlock("div", _hoisted_2$4, [
|
|
1991
|
+
createElementVNode("div", {
|
|
1992
|
+
class: "mint-onboarding__blocker",
|
|
1993
|
+
style: normalizeStyle(blockerStyle.value)
|
|
1994
|
+
}, null, 4),
|
|
1995
|
+
holeStyle.value ? (openBlock(), createElementBlock("div", {
|
|
1996
|
+
key: 0,
|
|
1997
|
+
class: "mint-onboarding__hole",
|
|
1998
|
+
style: normalizeStyle(holeStyle.value)
|
|
1999
|
+
}, null, 4)) : createCommentVNode("", true),
|
|
2000
|
+
createElementVNode("div", {
|
|
2001
|
+
ref_key: "card",
|
|
2002
|
+
ref: card,
|
|
2003
|
+
class: "mint-onboarding__card",
|
|
2004
|
+
role: "dialog",
|
|
2005
|
+
"aria-modal": "true",
|
|
2006
|
+
"aria-labelledby": unref(titleId),
|
|
2007
|
+
tabindex: "-1",
|
|
2008
|
+
style: normalizeStyle({
|
|
2009
|
+
left: `${cardPosition.value.x}px`,
|
|
2010
|
+
top: `${cardPosition.value.y}px`
|
|
2011
|
+
})
|
|
2012
|
+
}, [
|
|
2013
|
+
createElementVNode("button", {
|
|
2014
|
+
type: "button",
|
|
2015
|
+
class: "mint-onboarding__close",
|
|
2016
|
+
"aria-label": active.value.news ? "Close" : "Close tour",
|
|
2017
|
+
onClick: _cache[0] || (_cache[0] = ($event) => __props.state.dismiss())
|
|
2018
|
+
}, [createVNode(unref(X), {
|
|
2019
|
+
size: 14,
|
|
2020
|
+
"aria-hidden": "true"
|
|
2021
|
+
})], 8, _hoisted_4$4),
|
|
2022
|
+
active.value.count > 1 ? (openBlock(), createElementBlock("span", _hoisted_5$4, [createElementVNode("span", _hoisted_6$3, toDisplayString(active.value.index + 1) + " / " + toDisplayString(active.value.count), 1), createElementVNode("span", _hoisted_7$3, "Step " + toDisplayString(active.value.index + 1) + " of " + toDisplayString(active.value.count), 1)])) : createCommentVNode("", true),
|
|
2023
|
+
createElementVNode("p", {
|
|
2024
|
+
id: unref(titleId),
|
|
2025
|
+
class: "mint-onboarding__title"
|
|
2026
|
+
}, toDisplayString(active.value.step.title), 9, _hoisted_8$3),
|
|
2027
|
+
createElementVNode("p", _hoisted_9$3, toDisplayString(active.value.step.body), 1),
|
|
2028
|
+
createElementVNode("div", _hoisted_10$3, [
|
|
2029
|
+
active.value.step.advanceOn === "click" ? (openBlock(), createElementBlock("span", _hoisted_11$3, "Click the highlighted control.")) : createCommentVNode("", true),
|
|
2030
|
+
active.value.index > 0 ? (openBlock(), createBlock(BaseButton_default, {
|
|
2031
|
+
key: 1,
|
|
2032
|
+
variant: "ghost",
|
|
2033
|
+
size: "sm",
|
|
2034
|
+
onClick: _cache[1] || (_cache[1] = ($event) => __props.state.back())
|
|
2035
|
+
}, {
|
|
2036
|
+
default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode("Back", -1)])]),
|
|
2037
|
+
_: 1
|
|
2038
|
+
})) : createCommentVNode("", true),
|
|
2039
|
+
active.value.step.advanceOn !== "click" ? (openBlock(), createBlock(BaseButton_default, {
|
|
2040
|
+
key: 2,
|
|
2041
|
+
size: "sm",
|
|
2042
|
+
onClick: _cache[2] || (_cache[2] = ($event) => __props.state.next())
|
|
2043
|
+
}, {
|
|
2044
|
+
default: withCtx(() => [createTextVNode(toDisplayString(nextLabel.value), 1)]),
|
|
2045
|
+
_: 1
|
|
2046
|
+
})) : createCommentVNode("", true)
|
|
2047
|
+
])
|
|
2048
|
+
], 12, _hoisted_3$4)
|
|
2049
|
+
])) : createCommentVNode("", true)]);
|
|
2050
|
+
};
|
|
2051
|
+
}
|
|
2052
|
+
});
|
|
2053
|
+
//#endregion
|
|
2054
|
+
//#region src/components/internal/AppTopBarOnboardingInternal.vue?vue&type=script&setup=true&lang.ts
|
|
2055
|
+
var _hoisted_1$5 = ["aria-expanded"];
|
|
2056
|
+
var _hoisted_2$3 = { class: "mint-onboarding-help__count" };
|
|
2057
|
+
var _hoisted_3$3 = {
|
|
2058
|
+
class: "mint-onboarding-help__bar",
|
|
2059
|
+
"aria-hidden": "true"
|
|
2060
|
+
};
|
|
2061
|
+
var _hoisted_4$3 = ["aria-label", "aria-expanded"];
|
|
2062
|
+
var _hoisted_5$3 = {
|
|
2063
|
+
key: 0,
|
|
2064
|
+
class: "mint-onboarding-help__badge",
|
|
2065
|
+
"aria-hidden": "true"
|
|
2066
|
+
};
|
|
2067
|
+
var _hoisted_6$2 = { class: "mint-onboarding-help__header" };
|
|
2068
|
+
var _hoisted_7$2 = { class: "mint-onboarding-help__count" };
|
|
2069
|
+
var _hoisted_8$2 = {
|
|
2070
|
+
class: "mint-onboarding-help__progress",
|
|
2071
|
+
"aria-hidden": "true"
|
|
2072
|
+
};
|
|
2073
|
+
var _hoisted_9$2 = { class: "mint-onboarding-help__todos" };
|
|
2074
|
+
var _hoisted_10$2 = ["aria-label"];
|
|
2075
|
+
var _hoisted_11$2 = { class: "mint-onboarding-help__todo-title" };
|
|
2076
|
+
var _hoisted_12$2 = ["onClick"];
|
|
2077
|
+
var _hoisted_13$2 = ["onClick"];
|
|
2078
|
+
var _hoisted_14$2 = ["onClick"];
|
|
2079
|
+
var _hoisted_15$2 = {
|
|
2080
|
+
key: 0,
|
|
2081
|
+
class: "mint-onboarding-help__new"
|
|
2082
|
+
};
|
|
2083
|
+
//#endregion
|
|
2084
|
+
//#region src/components/internal/AppTopBarOnboardingInternal.vue
|
|
2085
|
+
var AppTopBarOnboardingInternal_default = /* @__PURE__ */ defineComponent({
|
|
2086
|
+
__name: "AppTopBarOnboardingInternal",
|
|
2087
|
+
props: { state: {} },
|
|
2088
|
+
setup(__props) {
|
|
2089
|
+
/**
|
|
2090
|
+
* The top-bar onboarding controls: the "Getting started n/m" chip while the
|
|
2091
|
+
* checklist is open, and the Help button with the checklist, tours and news.
|
|
2092
|
+
*/
|
|
2093
|
+
const props = __props;
|
|
2094
|
+
const root = ref(null);
|
|
2095
|
+
const helpButton = ref(null);
|
|
2096
|
+
const panel = ref(null);
|
|
2097
|
+
const panelPosition = ref({
|
|
2098
|
+
x: 0,
|
|
2099
|
+
y: 0
|
|
2100
|
+
});
|
|
2101
|
+
const open = ref(false);
|
|
2102
|
+
const hasContent = computed(() => props.state.tasks.value.length > 0 || props.state.tours.value.length > 0 || props.state.news.value.length > 0);
|
|
2103
|
+
const progress = computed(() => {
|
|
2104
|
+
const total = props.state.tasks.value.length;
|
|
2105
|
+
return total ? Math.round(props.state.tasksDone.value / total * 100) : 0;
|
|
2106
|
+
});
|
|
2107
|
+
function toggle() {
|
|
2108
|
+
open.value = !open.value;
|
|
2109
|
+
if (open.value) props.state.refresh();
|
|
2110
|
+
}
|
|
2111
|
+
let stopAutoUpdate;
|
|
2112
|
+
watch(open, async (isOpen) => {
|
|
2113
|
+
stopAutoUpdate?.();
|
|
2114
|
+
stopAutoUpdate = void 0;
|
|
2115
|
+
if (!isOpen) return;
|
|
2116
|
+
await nextTick();
|
|
2117
|
+
const button = helpButton.value;
|
|
2118
|
+
const floating = panel.value;
|
|
2119
|
+
if (!button || !floating || !open.value) return;
|
|
2120
|
+
stopAutoUpdate = autoUpdate(button, floating, async () => {
|
|
2121
|
+
const { x, y } = await computePosition(button, floating, {
|
|
2122
|
+
strategy: "fixed",
|
|
2123
|
+
placement: "bottom-end",
|
|
2124
|
+
middleware: [offset(8), shift({ padding: 8 })]
|
|
2125
|
+
});
|
|
2126
|
+
panelPosition.value = {
|
|
2127
|
+
x,
|
|
2128
|
+
y
|
|
2129
|
+
};
|
|
2130
|
+
});
|
|
2131
|
+
});
|
|
2132
|
+
onBeforeUnmount(() => stopAutoUpdate?.());
|
|
2133
|
+
function run(action) {
|
|
2134
|
+
open.value = false;
|
|
2135
|
+
action();
|
|
2136
|
+
}
|
|
2137
|
+
useEventListener(document, "pointerdown", (event) => {
|
|
2138
|
+
const target = event.target;
|
|
2139
|
+
if (open.value && !root.value?.contains(target) && !panel.value?.contains(target)) open.value = false;
|
|
2140
|
+
});
|
|
2141
|
+
useEventListener(document, "keydown", (event) => {
|
|
2142
|
+
if (open.value && event.key === "Escape") open.value = false;
|
|
2143
|
+
});
|
|
2144
|
+
return (_ctx, _cache) => {
|
|
2145
|
+
return openBlock(), createElementBlock(Fragment, null, [hasContent.value ? (openBlock(), createElementBlock("div", {
|
|
2146
|
+
key: 0,
|
|
2147
|
+
ref_key: "root",
|
|
2148
|
+
ref: root,
|
|
2149
|
+
class: "mint-onboarding-help"
|
|
2150
|
+
}, [
|
|
2151
|
+
__props.state.checklistVisible.value ? (openBlock(), createElementBlock("button", {
|
|
2152
|
+
key: 0,
|
|
2153
|
+
type: "button",
|
|
2154
|
+
class: normalizeClass(["mint-onboarding-help__chip", { "mint-onboarding-help__chip--open": open.value }]),
|
|
2155
|
+
"data-onboarding": "topbar-checklist",
|
|
2156
|
+
"aria-expanded": open.value,
|
|
2157
|
+
onClick: toggle
|
|
2158
|
+
}, [
|
|
2159
|
+
_cache[1] || (_cache[1] = createTextVNode(" Getting started ", -1)),
|
|
2160
|
+
createElementVNode("span", _hoisted_2$3, toDisplayString(__props.state.tasksDone.value) + "/" + toDisplayString(__props.state.tasks.value.length), 1),
|
|
2161
|
+
createElementVNode("span", _hoisted_3$3, [createElementVNode("span", { style: normalizeStyle({ width: `${progress.value}%` }) }, null, 4)])
|
|
2162
|
+
], 10, _hoisted_1$5)) : createCommentVNode("", true),
|
|
2163
|
+
createElementVNode("button", {
|
|
2164
|
+
ref_key: "helpButton",
|
|
2165
|
+
ref: helpButton,
|
|
2166
|
+
type: "button",
|
|
2167
|
+
class: normalizeClass(["mint-topbar__settings-btn", { "mint-topbar__settings-btn--open": open.value }]),
|
|
2168
|
+
"data-onboarding": "topbar-help",
|
|
2169
|
+
"aria-label": __props.state.unseenNews.value ? `Help, ${__props.state.unseenNews.value} new` : "Help",
|
|
2170
|
+
"aria-expanded": open.value,
|
|
2171
|
+
onClick: toggle
|
|
2172
|
+
}, [createVNode(unref(CircleHelp), {
|
|
2173
|
+
class: "mint-topbar__settings-icon",
|
|
2174
|
+
"aria-hidden": "true"
|
|
2175
|
+
}), __props.state.unseenNews.value ? (openBlock(), createElementBlock("span", _hoisted_5$3, toDisplayString(__props.state.unseenNews.value), 1)) : createCommentVNode("", true)], 10, _hoisted_4$3),
|
|
2176
|
+
(openBlock(), createBlock(Teleport, { to: "body" }, [open.value ? (openBlock(), createElementBlock("div", {
|
|
2177
|
+
key: 0,
|
|
2178
|
+
ref_key: "panel",
|
|
2179
|
+
ref: panel,
|
|
2180
|
+
class: "mint-popover mint-onboarding-help__panel",
|
|
2181
|
+
role: "dialog",
|
|
2182
|
+
"aria-label": "Help",
|
|
2183
|
+
style: normalizeStyle({
|
|
2184
|
+
left: `${panelPosition.value.x}px`,
|
|
2185
|
+
top: `${panelPosition.value.y}px`
|
|
2186
|
+
})
|
|
2187
|
+
}, [
|
|
2188
|
+
__props.state.tasks.value.length ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
2189
|
+
createElementVNode("div", _hoisted_6$2, [_cache[2] || (_cache[2] = createElementVNode("span", { class: "mint-onboarding-help__heading" }, "Getting started", -1)), createElementVNode("span", _hoisted_7$2, toDisplayString(__props.state.tasksDone.value) + "/" + toDisplayString(__props.state.tasks.value.length), 1)]),
|
|
2190
|
+
createElementVNode("div", _hoisted_8$2, [createElementVNode("span", { style: normalizeStyle({ width: `${progress.value}%` }) }, null, 4)]),
|
|
2191
|
+
createElementVNode("ul", _hoisted_9$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.state.tasks.value, (task) => {
|
|
2192
|
+
return openBlock(), createElementBlock("li", {
|
|
2193
|
+
key: task.id,
|
|
2194
|
+
class: normalizeClass(["mint-onboarding-help__todo", { "mint-onboarding-help__todo--done": task.done }])
|
|
2195
|
+
}, [
|
|
2196
|
+
createElementVNode("span", {
|
|
2197
|
+
class: "mint-onboarding-help__check",
|
|
2198
|
+
role: "img",
|
|
2199
|
+
"aria-label": task.done ? "Done" : "Not done"
|
|
2200
|
+
}, [task.done ? (openBlock(), createBlock(unref(Check), {
|
|
2201
|
+
key: 0,
|
|
2202
|
+
size: 10,
|
|
2203
|
+
"stroke-width": 3,
|
|
2204
|
+
"aria-hidden": "true"
|
|
2205
|
+
})) : createCommentVNode("", true)], 8, _hoisted_10$2),
|
|
2206
|
+
createElementVNode("span", _hoisted_11$2, toDisplayString(task.title), 1),
|
|
2207
|
+
task.action && !task.done ? (openBlock(), createElementBlock("button", {
|
|
2208
|
+
key: 0,
|
|
2209
|
+
type: "button",
|
|
2210
|
+
class: "mint-onboarding-help__link",
|
|
2211
|
+
onClick: ($event) => run(task.action.run)
|
|
2212
|
+
}, toDisplayString(task.action.label), 9, _hoisted_12$2)) : createCommentVNode("", true)
|
|
2213
|
+
], 2);
|
|
2214
|
+
}), 128))]),
|
|
2215
|
+
__props.state.tasksDone.value < __props.state.tasks.value.length ? (openBlock(), createElementBlock("button", {
|
|
2216
|
+
key: 0,
|
|
2217
|
+
type: "button",
|
|
2218
|
+
class: "mint-onboarding-help__link mint-onboarding-help__hide",
|
|
2219
|
+
onClick: _cache[0] || (_cache[0] = ($event) => __props.state.setChecklistHidden(!__props.state.checklistHidden.value))
|
|
2220
|
+
}, toDisplayString(__props.state.checklistHidden.value ? "Show checklist in the top bar" : "Hide checklist from the top bar"), 1)) : createCommentVNode("", true)
|
|
2221
|
+
], 64)) : createCommentVNode("", true),
|
|
2222
|
+
__props.state.tours.value.length ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [_cache[3] || (_cache[3] = createElementVNode("div", { class: "mint-onboarding-help__section" }, "Tours", -1)), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.state.tours.value, (tour) => {
|
|
2223
|
+
return openBlock(), createElementBlock("button", {
|
|
2224
|
+
key: tour.id,
|
|
2225
|
+
type: "button",
|
|
2226
|
+
class: "mint-menu-item",
|
|
2227
|
+
onClick: ($event) => run(() => __props.state.startTour(tour.id))
|
|
2228
|
+
}, [createVNode(unref(Play), {
|
|
2229
|
+
class: "mint-onboarding-help__icon",
|
|
2230
|
+
"aria-hidden": "true"
|
|
2231
|
+
}), createTextVNode(" " + toDisplayString(tour.title), 1)], 8, _hoisted_13$2);
|
|
2232
|
+
}), 128))], 64)) : createCommentVNode("", true),
|
|
2233
|
+
__props.state.news.value.length ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [_cache[4] || (_cache[4] = createElementVNode("div", { class: "mint-onboarding-help__section" }, "What's new", -1)), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.state.news.value, (item) => {
|
|
2234
|
+
return openBlock(), createElementBlock("button", {
|
|
2235
|
+
key: item.id,
|
|
2236
|
+
type: "button",
|
|
2237
|
+
class: "mint-menu-item",
|
|
2238
|
+
onClick: ($event) => run(() => __props.state.showNews(item.id))
|
|
2239
|
+
}, [createTextVNode(toDisplayString(item.title) + " ", 1), item.unseen ? (openBlock(), createElementBlock("span", _hoisted_15$2, "New")) : createCommentVNode("", true)], 8, _hoisted_14$2);
|
|
2240
|
+
}), 128))], 64)) : createCommentVNode("", true)
|
|
2241
|
+
], 4)) : createCommentVNode("", true)]))
|
|
2242
|
+
], 512)) : createCommentVNode("", true), createVNode(OnboardingLayerInternal_default, { state: __props.state }, null, 8, ["state"])], 64);
|
|
2243
|
+
};
|
|
2244
|
+
}
|
|
2245
|
+
});
|
|
2246
|
+
//#endregion
|
|
2247
|
+
//#region src/composables/useOnboarding.ts
|
|
2248
|
+
var ONBOARDING_KEY = Symbol("mint-onboarding");
|
|
2249
|
+
/** Wait this long for the missing anchor of a run's first step, or of the step after a click step; then skip it. */
|
|
2250
|
+
var ANCHOR_WAIT_MS = 2e3;
|
|
2251
|
+
var HIDE_CHECKLIST = "hide:checklist";
|
|
2252
|
+
var stepKey = (tour, step) => `step:${tour.id}/${step.id}`;
|
|
2253
|
+
var anchorSelector = (anchor) => `[data-onboarding="${CSS.escape(anchor)}"]`;
|
|
2254
|
+
/** Types a definition, so it can live in its own file. */
|
|
2255
|
+
function defineOnboarding(definition) {
|
|
2256
|
+
return definition;
|
|
2257
|
+
}
|
|
2258
|
+
function readSeen(key) {
|
|
2259
|
+
try {
|
|
2260
|
+
const raw = globalThis.localStorage?.getItem(key);
|
|
2261
|
+
const parsed = raw ? JSON.parse(raw) : null;
|
|
2262
|
+
return Array.isArray(parsed) ? parsed.filter((item) => typeof item === "string") : null;
|
|
2263
|
+
} catch {
|
|
2264
|
+
return null;
|
|
2265
|
+
}
|
|
2266
|
+
}
|
|
2267
|
+
function writeSeen(key, seen) {
|
|
2268
|
+
try {
|
|
2269
|
+
globalThis.localStorage?.setItem(key, JSON.stringify([...seen]));
|
|
2270
|
+
} catch {}
|
|
2271
|
+
}
|
|
2272
|
+
/** Resolves with the element once it is in the document, or null after `timeout` or when `signal` aborts. */
|
|
2273
|
+
function waitForElement(selector, timeout, signal) {
|
|
2274
|
+
const found = document.querySelector(selector);
|
|
2275
|
+
if (found) return Promise.resolve(found);
|
|
2276
|
+
return new Promise((resolve) => {
|
|
2277
|
+
const observer = new MutationObserver(() => {
|
|
2278
|
+
const element = document.querySelector(selector);
|
|
2279
|
+
if (element) finish(element);
|
|
2280
|
+
});
|
|
2281
|
+
const timer = setTimeout(() => finish(null), timeout);
|
|
2282
|
+
const onAbort = () => finish(null);
|
|
2283
|
+
function finish(element) {
|
|
2284
|
+
observer.disconnect();
|
|
2285
|
+
clearTimeout(timer);
|
|
2286
|
+
signal.removeEventListener("abort", onAbort);
|
|
2287
|
+
resolve(element);
|
|
2288
|
+
}
|
|
2289
|
+
signal.addEventListener("abort", onAbort);
|
|
2290
|
+
observer.observe(document.body, {
|
|
2291
|
+
childList: true,
|
|
2292
|
+
subtree: true,
|
|
2293
|
+
attributes: true,
|
|
2294
|
+
attributeFilter: ["data-onboarding"]
|
|
2295
|
+
});
|
|
2296
|
+
});
|
|
2297
|
+
}
|
|
2298
|
+
var MODAL_SELECTOR = "[aria-modal=\"true\"]:not(.mint-onboarding__card)";
|
|
2299
|
+
/** Resolves true once no modal is open, or false when `signal` aborts first. */
|
|
2300
|
+
function waitForNoModal(signal) {
|
|
2301
|
+
if (!document.querySelector(MODAL_SELECTOR)) return Promise.resolve(true);
|
|
2302
|
+
return new Promise((resolve) => {
|
|
2303
|
+
const observer = new MutationObserver(() => {
|
|
2304
|
+
if (!document.querySelector(MODAL_SELECTOR)) finish(true);
|
|
2305
|
+
});
|
|
2306
|
+
const onAbort = () => finish(false);
|
|
2307
|
+
function finish(closed) {
|
|
2308
|
+
observer.disconnect();
|
|
2309
|
+
signal.removeEventListener("abort", onAbort);
|
|
2310
|
+
resolve(closed);
|
|
2311
|
+
}
|
|
2312
|
+
signal.addEventListener("abort", onAbort);
|
|
2313
|
+
observer.observe(document.body, {
|
|
2314
|
+
childList: true,
|
|
2315
|
+
subtree: true,
|
|
2316
|
+
attributes: true,
|
|
2317
|
+
attributeFilter: ["aria-modal"]
|
|
2318
|
+
});
|
|
2319
|
+
});
|
|
2320
|
+
}
|
|
2321
|
+
/**
|
|
2322
|
+
* Creates the app's onboarding coordinator and provides it to `AppTopBar`, which then
|
|
2323
|
+
* shows the Help button, the checklist chip and the tour layer. Call it once, in the
|
|
2324
|
+
* root component. It shows one item at a time and waits for open modals.
|
|
2325
|
+
*
|
|
2326
|
+
* ```ts
|
|
2327
|
+
* provideOnboarding(onboarding, { appId: 'leaf' })
|
|
2328
|
+
* ```
|
|
2329
|
+
*/
|
|
2330
|
+
function provideOnboarding(definition, options) {
|
|
2331
|
+
const { user, isAdmin } = usePlatform();
|
|
2332
|
+
const userId = computed(() => {
|
|
2333
|
+
const fallback = isAdmin.value ? "local" : null;
|
|
2334
|
+
const value = options.userId === void 0 ? user.value?.id ?? fallback : toValue(options.userId);
|
|
2335
|
+
return value == null ? null : String(value);
|
|
2336
|
+
});
|
|
2337
|
+
const route = computed(() => toValue(options.route) ?? void 0);
|
|
2338
|
+
const storageKey = computed(() => userId.value === null ? null : `mint.onboarding.${options.appId}.${userId.value}`);
|
|
2339
|
+
const enabled = computed(() => storageKey.value !== null);
|
|
2340
|
+
const seen = ref(/* @__PURE__ */ new Set());
|
|
2341
|
+
const tick = ref(0);
|
|
2342
|
+
const active = shallowRef(null);
|
|
2343
|
+
let run = null;
|
|
2344
|
+
let runId = 0;
|
|
2345
|
+
let stepWait;
|
|
2346
|
+
let detachClick;
|
|
2347
|
+
/** Applies `update` to the stored state merged with this tab's, so tabs do not drop each other's keys. */
|
|
2348
|
+
function persist(update) {
|
|
2349
|
+
const key = storageKey.value;
|
|
2350
|
+
if (!key) return;
|
|
2351
|
+
const merged = /* @__PURE__ */ new Set([...readSeen(key) ?? [], ...seen.value]);
|
|
2352
|
+
update(merged);
|
|
2353
|
+
seen.value = merged;
|
|
2354
|
+
writeSeen(key, merged);
|
|
2355
|
+
}
|
|
2356
|
+
function markSeen(...keys) {
|
|
2357
|
+
if (keys.every((key) => seen.value.has(key))) return;
|
|
2358
|
+
persist((set) => keys.forEach((key) => set.add(key)));
|
|
2359
|
+
}
|
|
2360
|
+
function onStorage(event) {
|
|
2361
|
+
if (event.key && event.key === storageKey.value) seen.value = new Set(readSeen(event.key) ?? []);
|
|
2362
|
+
}
|
|
2363
|
+
window.addEventListener("storage", onStorage);
|
|
2364
|
+
watch(storageKey, (key) => {
|
|
2365
|
+
stop();
|
|
2366
|
+
if (!key) {
|
|
2367
|
+
seen.value = /* @__PURE__ */ new Set();
|
|
2368
|
+
return;
|
|
2369
|
+
}
|
|
2370
|
+
const stored = readSeen(key);
|
|
2371
|
+
seen.value = new Set(stored ?? []);
|
|
2372
|
+
if (stored === null) {
|
|
2373
|
+
for (const item of definition.whatsNew ?? []) seen.value.add(`news:${item.id}`);
|
|
2374
|
+
writeSeen(key, seen.value);
|
|
2375
|
+
}
|
|
2376
|
+
}, { immediate: true });
|
|
2377
|
+
const tours = computed(() => (definition.tours ?? []).filter((tour) => !tour.route || tour.route === route.value));
|
|
2378
|
+
const tasks = computed(() => {
|
|
2379
|
+
tick.value;
|
|
2380
|
+
return (definition.checklist ?? []).filter((task) => task.available?.() ?? true).map((task) => ({
|
|
2381
|
+
...task,
|
|
2382
|
+
done: seen.value.has(`task:${task.id}`) || !!task.done?.()
|
|
2383
|
+
}));
|
|
2384
|
+
});
|
|
2385
|
+
watch(tasks, (list) => markSeen(...list.filter((task) => task.done).map((task) => `task:${task.id}`)), { immediate: true });
|
|
2386
|
+
const tasksDone = computed(() => tasks.value.filter((task) => task.done).length);
|
|
2387
|
+
const checklistHidden = computed(() => seen.value.has(HIDE_CHECKLIST));
|
|
2388
|
+
const checklistVisible = computed(() => enabled.value && tasks.value.length > 0 && tasksDone.value < tasks.value.length && !checklistHidden.value);
|
|
2389
|
+
const news = computed(() => (definition.whatsNew ?? []).map((item) => ({
|
|
2390
|
+
...item,
|
|
2391
|
+
unseen: !seen.value.has(`news:${item.id}`)
|
|
2392
|
+
})));
|
|
2393
|
+
const unseenNews = computed(() => enabled.value ? news.value.filter((item) => item.unseen).length : 0);
|
|
2394
|
+
function stop() {
|
|
2395
|
+
runId += 1;
|
|
2396
|
+
stepWait?.abort();
|
|
2397
|
+
run = null;
|
|
2398
|
+
detachClick?.();
|
|
2399
|
+
detachClick = void 0;
|
|
2400
|
+
active.value = null;
|
|
2401
|
+
}
|
|
2402
|
+
/**
|
|
2403
|
+
* Shows the first step at or after `from` whose anchor is there. Only the first step of
|
|
2404
|
+
* the run and the step after a click step wait for theirs (the page or a menu can still
|
|
2405
|
+
* be opening); after Next a missing anchor is skipped at once. Skipped steps stay unseen.
|
|
2406
|
+
*/
|
|
2407
|
+
/**
|
|
2408
|
+
* The later steps the page can still show: the anchor is on the page now, or
|
|
2409
|
+
* a click step that can show opens it. The count grows if an anchor renders later.
|
|
2410
|
+
*/
|
|
2411
|
+
function laterSteps(steps, from) {
|
|
2412
|
+
let count = 0;
|
|
2413
|
+
let previous = true;
|
|
2414
|
+
for (let at = from + 1; at < steps.length; at += 1) {
|
|
2415
|
+
previous = previous && steps[at - 1].advanceOn === "click" || !!document.querySelector(anchorSelector(steps[at].anchor));
|
|
2416
|
+
if (previous) count += 1;
|
|
2417
|
+
}
|
|
2418
|
+
return count;
|
|
2419
|
+
}
|
|
2420
|
+
async function showFrom(from) {
|
|
2421
|
+
if (!run) return;
|
|
2422
|
+
const id = ++runId;
|
|
2423
|
+
stepWait?.abort();
|
|
2424
|
+
const wait = new AbortController();
|
|
2425
|
+
stepWait = wait;
|
|
2426
|
+
detachClick?.();
|
|
2427
|
+
detachClick = void 0;
|
|
2428
|
+
const waitFirst = from === 0 || run.steps[from - 1].advanceOn === "click";
|
|
2429
|
+
for (let index = from; index < run.steps.length; index += 1) {
|
|
2430
|
+
const step = run.steps[index];
|
|
2431
|
+
const timeout = index === from && waitFirst ? ANCHOR_WAIT_MS : 0;
|
|
2432
|
+
const element = await waitForElement(anchorSelector(step.anchor), timeout, wait.signal);
|
|
2433
|
+
if (id !== runId) return;
|
|
2434
|
+
if (!element) {
|
|
2435
|
+
console.debug(`[mint-onboarding] No element with data-onboarding="${step.anchor}"; step "${step.id}" skipped.`);
|
|
2436
|
+
continue;
|
|
2437
|
+
}
|
|
2438
|
+
run.index = index;
|
|
2439
|
+
markSeen(run.tour ? stepKey(run.tour, step) : `news:${step.id}`);
|
|
2440
|
+
if (step.advanceOn === "click") {
|
|
2441
|
+
const onClick = () => next();
|
|
2442
|
+
element.addEventListener("click", onClick);
|
|
2443
|
+
detachClick = () => element.removeEventListener("click", onClick);
|
|
2444
|
+
}
|
|
2445
|
+
run.shown.add(index);
|
|
2446
|
+
const steps = run.steps;
|
|
2447
|
+
const position = [...run.shown].filter((at) => at < index && !!document.querySelector(anchorSelector(steps[at].anchor))).length;
|
|
2448
|
+
active.value = {
|
|
2449
|
+
step,
|
|
2450
|
+
element,
|
|
2451
|
+
index: position,
|
|
2452
|
+
count: position + 1 + laterSteps(run.steps, index),
|
|
2453
|
+
news: !run.tour
|
|
2454
|
+
};
|
|
2455
|
+
return;
|
|
2456
|
+
}
|
|
2457
|
+
const finished = !!run.tour;
|
|
2458
|
+
stop();
|
|
2459
|
+
if (finished && options.autoStart !== false) autoStart();
|
|
2460
|
+
}
|
|
2461
|
+
function begin(tour, steps) {
|
|
2462
|
+
if (!enabled.value || steps.length === 0) return;
|
|
2463
|
+
stop();
|
|
2464
|
+
run = {
|
|
2465
|
+
tour,
|
|
2466
|
+
steps,
|
|
2467
|
+
index: 0,
|
|
2468
|
+
shown: /* @__PURE__ */ new Set()
|
|
2469
|
+
};
|
|
2470
|
+
showFrom(0);
|
|
2471
|
+
}
|
|
2472
|
+
function startTour(id) {
|
|
2473
|
+
const tour = tours.value.find((item) => item.id === id);
|
|
2474
|
+
if (!tour) return;
|
|
2475
|
+
autoStartAbort?.abort();
|
|
2476
|
+
begin(tour, availableSteps(tour));
|
|
2477
|
+
}
|
|
2478
|
+
function showNews(id) {
|
|
2479
|
+
const item = definition.whatsNew?.find((entry) => entry.id === id);
|
|
2480
|
+
if (!item) return;
|
|
2481
|
+
autoStartAbort?.abort();
|
|
2482
|
+
begin(null, [item]);
|
|
2483
|
+
}
|
|
2484
|
+
function next() {
|
|
2485
|
+
if (run) showFrom(run.index + 1);
|
|
2486
|
+
}
|
|
2487
|
+
function back() {
|
|
2488
|
+
if (!run) return;
|
|
2489
|
+
for (let index = run.index - 1; index >= 0; index -= 1) if (document.querySelector(anchorSelector(run.steps[index].anchor))) {
|
|
2490
|
+
showFrom(index);
|
|
2491
|
+
return;
|
|
2492
|
+
}
|
|
2493
|
+
}
|
|
2494
|
+
function dismiss() {
|
|
2495
|
+
autoStartAbort?.abort();
|
|
2496
|
+
const tour = run?.tour;
|
|
2497
|
+
if (tour) markSeen(...tour.steps.map((step) => stepKey(tour, step)));
|
|
2498
|
+
stop();
|
|
2499
|
+
}
|
|
2500
|
+
function complete(taskId) {
|
|
2501
|
+
markSeen(`task:${taskId}`);
|
|
2502
|
+
}
|
|
2503
|
+
function setChecklistHidden(hidden) {
|
|
2504
|
+
if (!storageKey.value) return;
|
|
2505
|
+
if (hidden) markSeen(HIDE_CHECKLIST);
|
|
2506
|
+
else persist((set) => set.delete(HIDE_CHECKLIST));
|
|
2507
|
+
}
|
|
2508
|
+
function refresh() {
|
|
2509
|
+
tick.value += 1;
|
|
2510
|
+
}
|
|
2511
|
+
const availableSteps = (tour) => tour.steps.filter((step) => step.available?.() ?? true);
|
|
2512
|
+
const tried = /* @__PURE__ */ new Set();
|
|
2513
|
+
let autoStartAbort;
|
|
2514
|
+
async function autoStart() {
|
|
2515
|
+
autoStartAbort?.abort();
|
|
2516
|
+
const controller = new AbortController();
|
|
2517
|
+
autoStartAbort = controller;
|
|
2518
|
+
if (!await waitForNoModal(controller.signal) || run || !enabled.value) return;
|
|
2519
|
+
for (const tour of tours.value) {
|
|
2520
|
+
if (tried.has(tour.id)) continue;
|
|
2521
|
+
const unseen = availableSteps(tour).filter((step) => !seen.value.has(stepKey(tour, step)));
|
|
2522
|
+
if (unseen.length) {
|
|
2523
|
+
tried.add(tour.id);
|
|
2524
|
+
begin(tour, unseen);
|
|
2525
|
+
return;
|
|
2526
|
+
}
|
|
2527
|
+
}
|
|
2528
|
+
}
|
|
2529
|
+
watch([route, storageKey], () => {
|
|
2530
|
+
stop();
|
|
2531
|
+
tried.clear();
|
|
2532
|
+
refresh();
|
|
2533
|
+
if (options.autoStart !== false) autoStart();
|
|
2534
|
+
}, { immediate: true });
|
|
2535
|
+
onScopeDispose(() => {
|
|
2536
|
+
autoStartAbort?.abort();
|
|
2537
|
+
window.removeEventListener("storage", onStorage);
|
|
2538
|
+
stop();
|
|
2539
|
+
});
|
|
2540
|
+
const state = {
|
|
2541
|
+
definition,
|
|
2542
|
+
enabled,
|
|
2543
|
+
active,
|
|
2544
|
+
tours,
|
|
2545
|
+
tasks,
|
|
2546
|
+
tasksDone,
|
|
2547
|
+
checklistVisible,
|
|
2548
|
+
checklistHidden,
|
|
2549
|
+
news,
|
|
2550
|
+
unseenNews,
|
|
2551
|
+
startTour,
|
|
2552
|
+
showNews,
|
|
2553
|
+
next,
|
|
2554
|
+
back,
|
|
2555
|
+
dismiss,
|
|
2556
|
+
complete,
|
|
2557
|
+
setChecklistHidden,
|
|
2558
|
+
refresh
|
|
2559
|
+
};
|
|
2560
|
+
provide(ONBOARDING_KEY, state);
|
|
2561
|
+
return state;
|
|
2562
|
+
}
|
|
2563
|
+
/** The app's onboarding coordinator, e.g. to call `complete(taskId)`. Null when the app provides none. */
|
|
2564
|
+
function useOnboarding() {
|
|
2565
|
+
return inject(ONBOARDING_KEY, null);
|
|
2566
|
+
}
|
|
2567
|
+
//#endregion
|
|
1738
2568
|
//#region src/composables/pluginIdentity.ts
|
|
1739
2569
|
var identity = reactive({});
|
|
1740
2570
|
/** The seeded identity AppTopBar shows in standalone mode. Internal: not exported from the package. */
|
|
@@ -1852,13 +2682,39 @@ var _hoisted_17$1 = {
|
|
|
1852
2682
|
};
|
|
1853
2683
|
var _hoisted_18$1 = {
|
|
1854
2684
|
key: 0,
|
|
1855
|
-
class: "mint-topbar__center"
|
|
2685
|
+
class: "mint-topbar__center",
|
|
2686
|
+
"data-onboarding": "topbar-pills"
|
|
1856
2687
|
};
|
|
1857
2688
|
var _hoisted_19$1 = { class: "mint-topbar__right" };
|
|
1858
2689
|
var _hoisted_20$1 = {
|
|
1859
2690
|
key: 0,
|
|
1860
2691
|
class: "mint-topbar__standalone-badge"
|
|
1861
2692
|
};
|
|
2693
|
+
var _hoisted_21$1 = {
|
|
2694
|
+
class: "mint-topbar__job-status",
|
|
2695
|
+
"aria-live": "polite"
|
|
2696
|
+
};
|
|
2697
|
+
var _hoisted_22$1 = [
|
|
2698
|
+
"title",
|
|
2699
|
+
"aria-label",
|
|
2700
|
+
"aria-expanded",
|
|
2701
|
+
"aria-controls"
|
|
2702
|
+
];
|
|
2703
|
+
var _hoisted_23$1 = {
|
|
2704
|
+
key: 0,
|
|
2705
|
+
class: "mint-topbar__job-bar",
|
|
2706
|
+
"aria-hidden": "true"
|
|
2707
|
+
};
|
|
2708
|
+
var _hoisted_24$1 = [
|
|
2709
|
+
"aria-label",
|
|
2710
|
+
"aria-expanded",
|
|
2711
|
+
"aria-controls"
|
|
2712
|
+
];
|
|
2713
|
+
var _hoisted_25$1 = {
|
|
2714
|
+
key: 0,
|
|
2715
|
+
class: "mint-topbar__job-count",
|
|
2716
|
+
"aria-hidden": "true"
|
|
2717
|
+
};
|
|
1862
2718
|
//#endregion
|
|
1863
2719
|
//#region src/components/AppTopBar.vue
|
|
1864
2720
|
var AppTopBar_default = /* @__PURE__ */ defineComponent({
|
|
@@ -1869,14 +2725,22 @@ var AppTopBar_default = /* @__PURE__ */ defineComponent({
|
|
|
1869
2725
|
spec: { default: () => ({}) },
|
|
1870
2726
|
pill: {},
|
|
1871
2727
|
pageSelector: {},
|
|
1872
|
-
currentPageSelectorId: {}
|
|
2728
|
+
currentPageSelectorId: {},
|
|
2729
|
+
job: {},
|
|
2730
|
+
jobsDone: {},
|
|
2731
|
+
jobsOpen: {
|
|
2732
|
+
type: Boolean,
|
|
2733
|
+
default: void 0
|
|
2734
|
+
},
|
|
2735
|
+
jobsPanelId: {}
|
|
1873
2736
|
},
|
|
1874
2737
|
emits: [
|
|
1875
2738
|
"page-selector-select",
|
|
1876
2739
|
"update:pill",
|
|
1877
2740
|
"pill-select",
|
|
1878
2741
|
"pill-option-select",
|
|
1879
|
-
"settings-values-change"
|
|
2742
|
+
"settings-values-change",
|
|
2743
|
+
"job-click"
|
|
1880
2744
|
],
|
|
1881
2745
|
setup(__props, { emit: __emit }) {
|
|
1882
2746
|
/**
|
|
@@ -1895,9 +2759,9 @@ var AppTopBar_default = /* @__PURE__ */ defineComponent({
|
|
|
1895
2759
|
}, props.spec));
|
|
1896
2760
|
const settingsConfig = computed(() => toValue(config.value.settings) || void 0);
|
|
1897
2761
|
const showSettings = computed(() => settingsConfig.value !== void 0);
|
|
1898
|
-
const SettingsModal = defineAsyncComponent(() => import("./SettingsModal-
|
|
1899
|
-
const ExperimentPopover = defineAsyncComponent(() => import("./ExperimentPopover-
|
|
1900
|
-
const ExperimentSelectorModal = defineAsyncComponent(() => import("./ExperimentSelectorModal-
|
|
2762
|
+
const SettingsModal = defineAsyncComponent(() => import("./SettingsModal-D2MOOtuO.js").then((n) => n.n));
|
|
2763
|
+
const ExperimentPopover = defineAsyncComponent(() => import("./ExperimentPopover-DujiuQIO.js").then((n) => n.n));
|
|
2764
|
+
const ExperimentSelectorModal = defineAsyncComponent(() => import("./ExperimentSelectorModal-B4j4eUOJ.js").then((n) => n.n));
|
|
1901
2765
|
const emit = __emit;
|
|
1902
2766
|
const settingsOpen = ref(false);
|
|
1903
2767
|
const headerEl = ref(null);
|
|
@@ -1909,7 +2773,39 @@ var AppTopBar_default = /* @__PURE__ */ defineComponent({
|
|
|
1909
2773
|
const { integrated: isIntegrated, plugin } = usePlatform();
|
|
1910
2774
|
const isStandalone = computed(() => !isIntegrated.value);
|
|
1911
2775
|
const appExperiment = inject(APP_EXPERIMENT_KEY, null);
|
|
2776
|
+
const onboarding = useOnboarding();
|
|
1912
2777
|
const canBindExperiment = computed(() => plugin.value?.plugin_type !== "static");
|
|
2778
|
+
const showExperiment = computed(() => !!appExperiment && !isStandalone.value && canBindExperiment.value);
|
|
2779
|
+
const runSlotJoined = ref(!!props.job);
|
|
2780
|
+
const JOB_STATUS_TEXT = {
|
|
2781
|
+
queued: "Job queued",
|
|
2782
|
+
running: "Job running",
|
|
2783
|
+
awaiting_input: "Job needs input",
|
|
2784
|
+
completed: "Job completed",
|
|
2785
|
+
failed: "Job failed",
|
|
2786
|
+
cancelled: "Job cancelled"
|
|
2787
|
+
};
|
|
2788
|
+
const jobPercent = computed(() => props.job?.percent == null ? null : Math.min(100, Math.max(0, Math.round(props.job.percent))));
|
|
2789
|
+
const jobName = computed(() => props.job ? jobPercent.value != null ? `${props.job.label} ${jobPercent.value}%` : props.job.label : void 0);
|
|
2790
|
+
function syncRunSlotJoined() {
|
|
2791
|
+
runSlotJoined.value = !!props.job;
|
|
2792
|
+
}
|
|
2793
|
+
const JOB_TONES = {
|
|
2794
|
+
queued: "primary",
|
|
2795
|
+
running: "primary",
|
|
2796
|
+
awaiting_input: "warning",
|
|
2797
|
+
completed: "success",
|
|
2798
|
+
failed: "error",
|
|
2799
|
+
cancelled: "neutral"
|
|
2800
|
+
};
|
|
2801
|
+
const JOB_ICONS = {
|
|
2802
|
+
queued: LoaderCircle,
|
|
2803
|
+
running: LoaderCircle,
|
|
2804
|
+
awaiting_input: CircleAlert,
|
|
2805
|
+
completed: CircleCheck,
|
|
2806
|
+
failed: CircleX,
|
|
2807
|
+
cancelled: CircleX
|
|
2808
|
+
};
|
|
1913
2809
|
const slots = useSlots();
|
|
1914
2810
|
const pluginIcon = computed(() => plugin.value?.icon || (slots.logo ? void 0 : pluginIdentity.icon));
|
|
1915
2811
|
const seeded = computed(() => isStandalone.value && !props.title && !props.subtitle);
|
|
@@ -1925,6 +2821,8 @@ var AppTopBar_default = /* @__PURE__ */ defineComponent({
|
|
|
1925
2821
|
}, { flush: "sync" });
|
|
1926
2822
|
/** Integrated plugins show their name as a static identity in place of the title; the page selector replaces it. */
|
|
1927
2823
|
const identityName = computed(() => isIntegrated.value && !hasPageSelector.value ? plugin.value?.display_name || plugin.value?.name : void 0);
|
|
2824
|
+
/** The page selector crumb reads "<plugin> / <page>". */
|
|
2825
|
+
const pageSelectorPluginName = computed(() => isIntegrated.value ? plugin.value?.display_name || plugin.value?.name : props.title || pluginIdentity.name);
|
|
1928
2826
|
const identitySubtitle = computed(() => plugin.value?.subtitle || plugin.value?.description);
|
|
1929
2827
|
const hasPillNav = computed(() => !!config.value.pills?.length);
|
|
1930
2828
|
const hasTitleGroup = computed(() => !hasPageSelector.value && !identityName.value && !!titleText.value && !!subtitleText.value);
|
|
@@ -1961,7 +2859,7 @@ var AppTopBar_default = /* @__PURE__ */ defineComponent({
|
|
|
1961
2859
|
icon: pluginIcon.value,
|
|
1962
2860
|
size: "topbar",
|
|
1963
2861
|
variant: "solid"
|
|
1964
|
-
}, null, 8, ["icon"])) : renderSlot(_ctx.$slots, "logo", {}, () => [config.value.logo ? (openBlock(), createElementBlock("div", _hoisted_6$1, [..._cache[
|
|
2862
|
+
}, null, 8, ["icon"])) : renderSlot(_ctx.$slots, "logo", {}, () => [config.value.logo ? (openBlock(), createElementBlock("div", _hoisted_6$1, [..._cache[11] || (_cache[11] = [createElementVNode("div", { class: "mint-topbar__logo-icon" }, [createElementVNode("span", { class: "mint-topbar__logo-text" }, "M")], -1)])])) : createCommentVNode("", true)], void 0, 1)], void 0, 1)])) : createCommentVNode("", true)], 8, _hoisted_4$2)) : config.value.homePath ? (openBlock(), createBlock(_component_router_link, {
|
|
1965
2863
|
key: 1,
|
|
1966
2864
|
to: config.value.homePath,
|
|
1967
2865
|
class: "mint-topbar-home-link"
|
|
@@ -1978,7 +2876,7 @@ var AppTopBar_default = /* @__PURE__ */ defineComponent({
|
|
|
1978
2876
|
icon: pluginIcon.value,
|
|
1979
2877
|
size: "topbar",
|
|
1980
2878
|
variant: "solid"
|
|
1981
|
-
}, null, 8, ["icon"])) : renderSlot(_ctx.$slots, "logo", {}, () => [config.value.logo ? (openBlock(), createElementBlock("div", _hoisted_8$1, [..._cache[
|
|
2879
|
+
}, null, 8, ["icon"])) : renderSlot(_ctx.$slots, "logo", {}, () => [config.value.logo ? (openBlock(), createElementBlock("div", _hoisted_8$1, [..._cache[12] || (_cache[12] = [createElementVNode("div", { class: "mint-topbar__logo-icon" }, [createElementVNode("span", { class: "mint-topbar__logo-text" }, "M")], -1)])])) : createCommentVNode("", true)], void 0, 1)], void 0, 1)])) : createCommentVNode("", true)]),
|
|
1982
2880
|
_: 3
|
|
1983
2881
|
}, 8, ["to"])) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [unref(isIntegrated) || _ctx.$slots.icon || _ctx.$slots.logo || pluginIcon.value || config.value.logo ? (openBlock(), createElementBlock("span", _hoisted_9$1, [unref(isIntegrated) ? (openBlock(), createBlock(PluginIcon_default, {
|
|
1984
2882
|
key: 0,
|
|
@@ -1992,17 +2890,20 @@ var AppTopBar_default = /* @__PURE__ */ defineComponent({
|
|
|
1992
2890
|
icon: pluginIcon.value,
|
|
1993
2891
|
size: "topbar",
|
|
1994
2892
|
variant: "solid"
|
|
1995
|
-
}, null, 8, ["icon"])) : renderSlot(_ctx.$slots, "logo", {}, () => [config.value.logo ? (openBlock(), createElementBlock("div", _hoisted_10$1, [..._cache[
|
|
2893
|
+
}, null, 8, ["icon"])) : renderSlot(_ctx.$slots, "logo", {}, () => [config.value.logo ? (openBlock(), createElementBlock("div", _hoisted_10$1, [..._cache[13] || (_cache[13] = [createElementVNode("div", { class: "mint-topbar__logo-icon" }, [createElementVNode("span", { class: "mint-topbar__logo-text" }, "M")], -1)])])) : createCommentVNode("", true)], void 0, 1)], void 0, 1)])) : createCommentVNode("", true)], 64))]),
|
|
1996
2894
|
identityName.value ? (openBlock(), createElementBlock("span", _hoisted_11$1, [createElementVNode("span", _hoisted_12$1, toDisplayString(identityName.value), 1), identitySubtitle.value ? (openBlock(), createElementBlock("span", _hoisted_13$1, toDisplayString(identitySubtitle.value), 1)) : createCommentVNode("", true)])) : createCommentVNode("", true),
|
|
1997
2895
|
hasPlatformPageSelector.value ? (openBlock(), createElementBlock("span", {
|
|
1998
2896
|
key: 1,
|
|
1999
2897
|
ref_key: "platformPageSelectorEl",
|
|
2000
2898
|
ref: platformPageSelectorEl,
|
|
2001
|
-
class: "mint-topbar__platform-page-selector"
|
|
2899
|
+
class: "mint-topbar__platform-page-selector",
|
|
2900
|
+
"data-onboarding": "topbar-page-selector"
|
|
2002
2901
|
}, null, 512)) : hasPropPageSelector.value ? (openBlock(), createBlock(AppTopBarPageSelectorInternal_default, {
|
|
2003
2902
|
key: 2,
|
|
2903
|
+
"data-onboarding": "topbar-page-selector",
|
|
2004
2904
|
pages: normalizedPageSelector.value,
|
|
2005
2905
|
"current-page-id": __props.currentPageSelectorId,
|
|
2906
|
+
"plugin-name": pageSelectorPluginName.value,
|
|
2006
2907
|
onSelect: _cache[0] || (_cache[0] = ($event) => emit("page-selector-select", $event))
|
|
2007
2908
|
}, createSlots({ _: 2 }, [_ctx.$slots["page-selector-icon"] ? {
|
|
2008
2909
|
name: "icon",
|
|
@@ -2012,7 +2913,11 @@ var AppTopBar_default = /* @__PURE__ */ defineComponent({
|
|
|
2012
2913
|
name: "item-icon",
|
|
2013
2914
|
fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "page-selector-item-icon", normalizeProps(guardReactiveProps(slotProps)))]),
|
|
2014
2915
|
key: "1"
|
|
2015
|
-
} : void 0]), 1032, [
|
|
2916
|
+
} : void 0]), 1032, [
|
|
2917
|
+
"pages",
|
|
2918
|
+
"current-page-id",
|
|
2919
|
+
"plugin-name"
|
|
2920
|
+
])) : createCommentVNode("", true),
|
|
2016
2921
|
hasTitleGroup.value ? (openBlock(), createElementBlock("div", _hoisted_14$1, [createElementVNode("span", _hoisted_15$1, toDisplayString(titleText.value), 1), createElementVNode("span", _hoisted_16$1, toDisplayString(subtitleText.value), 1)])) : hasTitleOnly.value ? (openBlock(), createElementBlock("span", _hoisted_17$1, toDisplayString(titleText.value), 1)) : createCommentVNode("", true),
|
|
2017
2922
|
renderSlot(_ctx.$slots, "nav")
|
|
2018
2923
|
]),
|
|
@@ -2025,23 +2930,77 @@ var AppTopBar_default = /* @__PURE__ */ defineComponent({
|
|
|
2025
2930
|
}, null, 8, ["items", "current-item-id"])) : createCommentVNode("", true)])])) : createCommentVNode("", true),
|
|
2026
2931
|
createElementVNode("div", _hoisted_19$1, [
|
|
2027
2932
|
config.value.standaloneLabel !== false && isStandalone.value ? (openBlock(), createElementBlock("span", _hoisted_20$1, toDisplayString(config.value.standaloneLabel), 1)) : createCommentVNode("", true),
|
|
2028
|
-
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
}
|
|
2933
|
+
showExperiment.value || __props.job !== void 0 || runSlotJoined.value ? (openBlock(), createElementBlock("div", {
|
|
2934
|
+
key: 1,
|
|
2935
|
+
class: normalizeClass(["mint-topbar__run-slot", { "mint-topbar__run-slot--joined": runSlotJoined.value }]),
|
|
2936
|
+
"data-onboarding": "topbar-run"
|
|
2937
|
+
}, [
|
|
2938
|
+
showExperiment.value && unref(appExperiment) ? (openBlock(), createBlock(unref(ExperimentPopover), mergeProps({ key: 0 }, __props.job ? {
|
|
2939
|
+
...unref(appExperiment).popover.value,
|
|
2940
|
+
showSave: false
|
|
2941
|
+
} : unref(appExperiment).popover.value, {
|
|
2942
|
+
onSelect: _cache[2] || (_cache[2] = ($event) => unref(appExperiment).openModal()),
|
|
2943
|
+
onSave: _cache[3] || (_cache[3] = ($event) => unref(appExperiment).handleSave()),
|
|
2944
|
+
onDetach: _cache[4] || (_cache[4] = ($event) => unref(appExperiment).handleDetach())
|
|
2945
|
+
}), null, 16)) : createCommentVNode("", true),
|
|
2946
|
+
createElementVNode("span", _hoisted_21$1, toDisplayString(__props.job ? JOB_STATUS_TEXT[__props.job.status] : ""), 1),
|
|
2947
|
+
createVNode(Transition, {
|
|
2948
|
+
name: "mint-topbar-job",
|
|
2949
|
+
mode: "out-in",
|
|
2950
|
+
appear: "",
|
|
2951
|
+
onBeforeEnter: syncRunSlotJoined,
|
|
2952
|
+
onAfterLeave: syncRunSlotJoined
|
|
2953
|
+
}, {
|
|
2954
|
+
default: withCtx(() => [__props.job ? (openBlock(), createElementBlock("button", {
|
|
2955
|
+
key: "run",
|
|
2956
|
+
type: "button",
|
|
2957
|
+
class: normalizeClass(["mint-topbar__job", `mint-topbar__job--${JOB_TONES[__props.job.status]}`]),
|
|
2958
|
+
title: jobName.value,
|
|
2959
|
+
"aria-label": jobName.value,
|
|
2960
|
+
"aria-expanded": __props.jobsOpen,
|
|
2961
|
+
"aria-controls": __props.jobsPanelId,
|
|
2962
|
+
onClick: _cache[5] || (_cache[5] = ($event) => emit("job-click"))
|
|
2963
|
+
}, [(openBlock(), createBlock(resolveDynamicComponent(JOB_ICONS[__props.job.status]), {
|
|
2964
|
+
class: normalizeClass(["mint-topbar__job-icon", { "mint-topbar__job-icon--spin": __props.job.status === "running" || __props.job.status === "queued" }]),
|
|
2965
|
+
size: 14,
|
|
2966
|
+
"aria-hidden": "true"
|
|
2967
|
+
}, null, 8, ["class"])), jobPercent.value != null ? (openBlock(), createElementBlock("span", _hoisted_23$1, [createElementVNode("span", { style: normalizeStyle({ width: `${jobPercent.value}%` }) }, null, 4)])) : createCommentVNode("", true)], 10, _hoisted_22$1)) : __props.job === null ? (openBlock(), createElementBlock("button", {
|
|
2968
|
+
key: "idle",
|
|
2969
|
+
type: "button",
|
|
2970
|
+
class: "mint-topbar__job mint-topbar__job--idle",
|
|
2971
|
+
"aria-label": __props.jobsDone ? `Jobs, ${__props.jobsDone} completed` : void 0,
|
|
2972
|
+
"aria-expanded": __props.jobsOpen,
|
|
2973
|
+
"aria-controls": __props.jobsPanelId,
|
|
2974
|
+
onClick: _cache[6] || (_cache[6] = ($event) => emit("job-click"))
|
|
2975
|
+
}, [
|
|
2976
|
+
createVNode(unref(ListChecks), {
|
|
2977
|
+
class: "mint-topbar__job-icon",
|
|
2978
|
+
size: 14,
|
|
2979
|
+
"aria-hidden": "true"
|
|
2980
|
+
}),
|
|
2981
|
+
_cache[14] || (_cache[14] = createElementVNode("span", { class: "mint-topbar__job-label" }, "Jobs", -1)),
|
|
2982
|
+
__props.jobsDone ? (openBlock(), createElementBlock("span", _hoisted_25$1, toDisplayString(__props.jobsDone), 1)) : createCommentVNode("", true)
|
|
2983
|
+
], 8, _hoisted_24$1)) : createCommentVNode("", true)]),
|
|
2984
|
+
_: 1
|
|
2985
|
+
})
|
|
2986
|
+
], 2)) : createCommentVNode("", true),
|
|
2033
2987
|
renderSlot(_ctx.$slots, "actions"),
|
|
2034
|
-
|
|
2988
|
+
unref(onboarding)?.enabled.value ? (openBlock(), createBlock(AppTopBarOnboardingInternal_default, {
|
|
2035
2989
|
key: 2,
|
|
2990
|
+
state: unref(onboarding)
|
|
2991
|
+
}, null, 8, ["state"])) : createCommentVNode("", true),
|
|
2992
|
+
config.value.themeToggle ? (openBlock(), createBlock(ThemeToggle_default, {
|
|
2993
|
+
key: 3,
|
|
2036
2994
|
size: "sm"
|
|
2037
2995
|
})) : createCommentVNode("", true),
|
|
2038
2996
|
showSettings.value ? (openBlock(), createElementBlock("button", {
|
|
2039
|
-
key:
|
|
2997
|
+
key: 4,
|
|
2040
2998
|
type: "button",
|
|
2041
2999
|
class: "mint-topbar__settings-btn",
|
|
2042
3000
|
"aria-label": "Open settings",
|
|
2043
|
-
|
|
2044
|
-
|
|
3001
|
+
"data-onboarding": "topbar-settings",
|
|
3002
|
+
onClick: _cache[7] || (_cache[7] = ($event) => settingsOpen.value = true)
|
|
3003
|
+
}, [..._cache[15] || (_cache[15] = [createElementVNode("svg", {
|
|
2045
3004
|
class: "mint-topbar__settings-icon",
|
|
2046
3005
|
viewBox: "0 0 24 24",
|
|
2047
3006
|
fill: "none",
|
|
@@ -2060,7 +3019,7 @@ var AppTopBar_default = /* @__PURE__ */ defineComponent({
|
|
|
2060
3019
|
showSettings.value && settingsOpen.value ? (openBlock(), createBlock(unref(SettingsModal), {
|
|
2061
3020
|
key: 0,
|
|
2062
3021
|
open: settingsOpen.value,
|
|
2063
|
-
"onUpdate:open": _cache[
|
|
3022
|
+
"onUpdate:open": _cache[8] || (_cache[8] = ($event) => settingsOpen.value = $event),
|
|
2064
3023
|
title: settingsConfig.value?.title,
|
|
2065
3024
|
tabs: normalizedSettingsTabs.value,
|
|
2066
3025
|
"show-appearance": settingsConfig.value?.showAppearance ?? true,
|
|
@@ -2070,7 +3029,7 @@ var AppTopBar_default = /* @__PURE__ */ defineComponent({
|
|
|
2070
3029
|
spec: settingsConfig.value?.spec,
|
|
2071
3030
|
values: settingsConfig.value?.values,
|
|
2072
3031
|
"user-type": settingsConfig.value?.userType,
|
|
2073
|
-
"onUpdate:values": _cache[
|
|
3032
|
+
"onUpdate:values": _cache[9] || (_cache[9] = ($event) => emit("settings-values-change", $event))
|
|
2074
3033
|
}, createSlots({
|
|
2075
3034
|
appearance: withCtx(() => [renderSlot(_ctx.$slots, "settings-appearance")]),
|
|
2076
3035
|
_: 2
|
|
@@ -2091,7 +3050,7 @@ var AppTopBar_default = /* @__PURE__ */ defineComponent({
|
|
|
2091
3050
|
"values",
|
|
2092
3051
|
"user-type"
|
|
2093
3052
|
])) : createCommentVNode("", true),
|
|
2094
|
-
unref(appExperiment) && !isStandalone.value && canBindExperiment.value && unref(appExperiment).selectorModal.value.open ? (openBlock(), createBlock(unref(ExperimentSelectorModal), mergeProps({ key: 1 }, unref(appExperiment).selectorModal.value, { "onUpdate:open": _cache[
|
|
3053
|
+
unref(appExperiment) && !isStandalone.value && canBindExperiment.value && unref(appExperiment).selectorModal.value.open ? (openBlock(), createBlock(unref(ExperimentSelectorModal), mergeProps({ key: 1 }, unref(appExperiment).selectorModal.value, { "onUpdate:open": _cache[10] || (_cache[10] = ($event) => $event ? unref(appExperiment).openModal() : unref(appExperiment).closeModal()) }), null, 16)) : createCommentVNode("", true)
|
|
2095
3054
|
], 64);
|
|
2096
3055
|
};
|
|
2097
3056
|
}
|
|
@@ -3560,6 +4519,6 @@ var AppSidebar_default = /* @__PURE__ */ defineComponent({
|
|
|
3560
4519
|
}
|
|
3561
4520
|
});
|
|
3562
4521
|
//#endregion
|
|
3563
|
-
export {
|
|
4522
|
+
export { controlValuesToComponentBindingsById as A, usePluginWorkspace as C, useControlSchema as D, getControlDefaults as E, getDefaultControlView as F, CollapsibleCard_default as I, ThemeToggle_default as L, controlsTo as M, controlsToFormSchema as N, controlBindings as O, controlsToSettingsSchema as P, useTheme as R, AppLayout_default as S, defineControls as T, provideOnboarding as _, pickExistingRecordKeys as a, normalizeItemInput as b, valuesEqual as c, useForm as d, AppTopBar_default as f, defineOnboarding as g, ONBOARDING_KEY as h, formSchemaFieldNames as i, controlValuesToComponentProps as j, controlValuesToComponentBindings as k, useFormBuilder as l, ANCHOR_WAIT_MS as m, FormSchemaInternal_default as n, pickRecordKeys as o, providePluginIdentity as p, FormFieldRendererInternal_default as r, recordValuesEqualForKeys as s, AppSidebar_default as t, evaluateCondition as u, useOnboarding as v, defineControlComponentBindings as w, normalizeLabelItemInput as x, PluginIcon_default as y };
|
|
3564
4523
|
|
|
3565
|
-
//# sourceMappingURL=AppSidebar-
|
|
4524
|
+
//# sourceMappingURL=AppSidebar-CZZaxni0.js.map
|