@adyen/bento-vue2 1.68.0 → 1.68.2
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/dist/@types/index.d.ts +296 -25
- package/dist/action-bar.js +1 -1
- package/dist/assets/accordion-item.css +1 -1
- package/dist/assets/action-bar.css +1 -1
- package/dist/assets/base-modal.css +1 -1
- package/dist/assets/card.css +1 -1
- package/dist/assets/data-grid.css +1 -1
- package/dist/assets/dialog-page.css +1 -1
- package/dist/assets/file-uploader.css +1 -1
- package/dist/assets/inspector.css +1 -1
- package/dist/assets/menu.css +1 -1
- package/dist/assets/modal-fullscreen.css +1 -1
- package/dist/assets/popover.css +1 -1
- package/dist/assets/sidepanel.css +1 -1
- package/dist/chunks/{action-bar.Dy6tfK8c.js → action-bar.DQb7WVVd.js} +2 -2
- package/dist/chunks/{action-bar.Dy6tfK8c.js.map → action-bar.DQb7WVVd.js.map} +1 -1
- package/dist/chunks/{button-actions-with-menu.CcxUTbsI.js → button-actions-with-menu.nPj7sdGE.js} +2 -2
- package/dist/chunks/{button-actions-with-menu.CcxUTbsI.js.map → button-actions-with-menu.nPj7sdGE.js.map} +1 -1
- package/dist/chunks/{dashboard-section.DBT99mLj.js → dashboard-section.BIe6eVHq.js} +2 -2
- package/dist/chunks/{dashboard-section.DBT99mLj.js.map → dashboard-section.BIe6eVHq.js.map} +1 -1
- package/dist/chunks/{data-grid-template.B2lDfM2o.js → data-grid-template.Co0Ecr79.js} +2 -2
- package/dist/chunks/{data-grid-template.B2lDfM2o.js.map → data-grid-template.Co0Ecr79.js.map} +1 -1
- package/dist/chunks/{data-grid.B7Z9_WDY.js → data-grid.erxjh5TN.js} +5 -5
- package/dist/chunks/data-grid.erxjh5TN.js.map +1 -0
- package/dist/chunks/{header-with-views.Bxvu8mq_.js → header-with-views.BUQ-MlAq.js} +3 -3
- package/dist/chunks/{header-with-views.Bxvu8mq_.js.map → header-with-views.BUQ-MlAq.js.map} +1 -1
- package/dist/chunks/{header.DvHS-PnC.js → header.uyxNdQa3.js} +2 -2
- package/dist/chunks/{header.DvHS-PnC.js.map → header.uyxNdQa3.js.map} +1 -1
- package/dist/chunks/{menu.dX3_vU05.js → menu.D0OQgk40.js} +143 -143
- package/dist/chunks/menu.D0OQgk40.js.map +1 -0
- package/dist/chunks/popover.types.CBqyA4ly.js.map +1 -1
- package/dist/chunks/{tutorial.DRRfp81j.js → tutorial.CxrGhLS7.js} +2 -2
- package/dist/chunks/{tutorial.DRRfp81j.js.map → tutorial.CxrGhLS7.js.map} +1 -1
- package/dist/dashboard-template.js +1 -1
- package/dist/data-grid-template.js +1 -1
- package/dist/data-grid.js +1 -1
- package/dist/header-with-views.js +1 -1
- package/dist/header.js +1 -1
- package/dist/index.js +8 -8
- package/dist/internal.js +1 -1
- package/dist/menu.js +1 -1
- package/dist/tutorial.js +1 -1
- package/dist/web-types.json +2 -2
- package/package.json +2 -2
- package/dist/chunks/data-grid.B7Z9_WDY.js.map +0 -1
- package/dist/chunks/menu.dX3_vU05.js.map +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { defineComponent as p, computed as r } from "vue";
|
|
2
2
|
import { u as l } from "./use-has-slot.C9lQZ6nz.js";
|
|
3
3
|
import { B as d, a as c, c as i } from "./typography.J1v_SPG3.js";
|
|
4
|
-
import { B as u } from "./button-actions-with-menu.
|
|
4
|
+
import { B as u } from "./button-actions-with-menu.nPj7sdGE.js";
|
|
5
5
|
import { I as n, H as _ } from "./header-meta.CfloYa86.js";
|
|
6
6
|
import { n as f } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
|
|
7
7
|
import "../assets/header.css";
|
|
@@ -100,4 +100,4 @@ const I = v.exports;
|
|
|
100
100
|
export {
|
|
101
101
|
I as B
|
|
102
102
|
};
|
|
103
|
-
//# sourceMappingURL=header.
|
|
103
|
+
//# sourceMappingURL=header.uyxNdQa3.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.
|
|
1
|
+
{"version":3,"file":"header.uyxNdQa3.js","sources":["../../src/components/header/header.types.ts","../../src/components/header/header.vue"],"sourcesContent":["import { BentoLoadingButtonState } from '@/core/components/loading-button/loading-button.types';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoHeaderVariant {\n PAGE = 'page',\n COMPONENT = 'component',\n}\n\nexport interface BentoHeaderReloadButton {\n title: string;\n event?: (event: Event) => void;\n state?: `${BentoLoadingButtonState}`;\n}\n","<template>\n <header class=\"b-header\" :class=\"conditionalClasses\">\n <div class=\"b-header__wrapper\">\n <div class=\"b-header__title\">\n <div>\n <bento-typography v-bind=\"typography\" class=\"b-header__text\">{{ title }}</bento-typography>\n <info-icon-with-popover\n v-if=\"infoIconTooltipText || hasSlot('infoIconTooltipContent')\"\n class=\"b-header__tooltip\"\n :popover-text=\"infoIconTooltipText\"\n >\n <template v-if=\"hasSlot('infoIconTooltipContent')\" #default\n ><slot name=\"infoIconTooltipContent\"\n /></template>\n </info-icon-with-popover>\n </div>\n </div>\n <header-meta\n v-if=\"description || hasSlot('description') || lastUpdated\"\n class=\"b-header__meta-container\"\n :description=\"description\"\n :last-updated=\"lastUpdated\"\n :reload-button=\"reloadButton\"\n >\n <template v-if=\"hasSlot('description')\" #description><slot name=\"description\" /></template>\n </header-meta>\n <button-actions-with-menu\n v-if=\"actions\"\n :actions=\"actions\"\n :displayed-actions=\"2\"\n class=\"b-header__actions\"\n />\n </div>\n </header>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import { InfoIconWithPopover } from '@/internal';\n import { BentoButtonActionsList } from '@/components/button';\n import { useHasSlot } from '@/composables';\n import { BentoHeaderReloadButton, BentoHeaderVariant } from './header.types';\n import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n import { HeaderMeta } from '@/internal/header-meta';\n import ButtonActionsWithMenu from '../internal/button-actions-with-menu/button-actions-with-menu.vue';\n\n export default defineComponent({\n name: 'bento-header',\n components: {\n BentoTypography,\n ButtonActionsWithMenu,\n InfoIconWithPopover,\n HeaderMeta,\n },\n props: {\n /**\n * Array of BentoButtonActionsList to show to the right of the title\n */\n actions: {\n type: Array as PropType<BentoButtonActionsList>,\n default: null,\n },\n\n /**\n * Text showed under the title\n */\n description: { type: String, default: null },\n\n /**\n * Text showed in the info-icon tooltip on hover\n */\n infoIconTooltipText: { type: InfoIconWithPopover.props.popoverText.type, default: null },\n\n /**\n * Popover position of the info icon text.\n */\n infoIconPopoverPosition: {\n type: InfoIconWithPopover.props.popoverPosition.type,\n default: InfoIconWithPopover.props.popoverPosition.default,\n validator: InfoIconWithPopover.props.popoverPosition.validator,\n },\n\n /**\n * JavaScript \"Date\" object for when the content was last updated\n */\n lastUpdated: { type: [Date, Number], default: null },\n\n /**\n * Variant represents type of Header\n * @values page, component\n */\n variant: {\n type: String as PropType<BentoHeaderVariant | `${BentoHeaderVariant}`>,\n default: BentoHeaderVariant.PAGE,\n validator: (value: BentoHeaderVariant) => Object.values(BentoHeaderVariant).includes(value),\n },\n\n /**\n * Text used as a title\n */\n title: { type: String, required: true },\n\n /**\n * Reload button which shows next to the header's timestamp\n * {@see BentoHeaderReloadButton}\n */\n reloadButton: {\n type: Object as PropType<BentoHeaderReloadButton>,\n default: null,\n },\n },\n emits: ['reload'],\n setup(props, { slots }) {\n const conditionalClasses = computed(() => ({\n 'b-header--component': props.variant === BentoHeaderVariant.COMPONENT,\n }));\n\n const typography = computed(() => ({\n el: props.variant === BentoHeaderVariant.PAGE ? BentoTypographyElement.H1 : BentoTypographyElement.H2,\n variant: BentoTypographyVariant.TITLE,\n medium: props.variant === BentoHeaderVariant.COMPONENT,\n large: props.variant === BentoHeaderVariant.PAGE,\n }));\n return {\n hasSlot: useHasSlot(slots),\n conditionalClasses,\n typography,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./header.scss\" />\n"],"names":["BentoHeaderVariant","BentoHeaderVariant2","_sfc_main","defineComponent","BentoTypography","ButtonActionsWithMenu","InfoIconWithPopover","HeaderMeta","value","props","slots","conditionalClasses","computed","typography","BentoTypographyElement","BentoTypographyVariant","useHasSlot"],"mappings":";;;;;;;AAKY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA;ACyCZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,iBAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,YAAAC;AAAA,EACA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,SAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,aAAA,EAAA,MAAA,QAAA,SAAA,KAAA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA,EAAA,MAAAD,EAAA,MAAA,YAAA,MAAA,SAAA,KAAA;AAAA;AAAA;AAAA;AAAA,IAKA,yBAAA;AAAA,MAKA,MAAAA,EAAA,MAAA,gBAAA;AAAA,MACA,SAAAA,EAAA,MAAA,gBAAA;AAAA,MACA,WAAAA,EAAA,MAAA,gBAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,aAAA,EAAA,MAAA,CAAA,MAAA,MAAA,GAAA,SAAA,KAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAAN,EAAA;AAAA,MACA,WAAA,CAAAQ,MAAA,OAAA,OAAAR,CAAA,EAAA,SAAAQ,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA,EAAA,MAAA,QAAA,UAAA,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA,CAAA,QAAA;AAAA,EACA,MAAAC,GAAA,EAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,OAAA;AAAA,MAAA,uBAAAH,EAAA,YAAAT,EAAA;AAAA,IACA,EAAA,GAGAa,IAAAD,EAAA,OAAA;AAAA,MAAA,IAAAH,EAAA,YAAAT,EAAA,OAAAc,EAAA,KAAAA,EAAA;AAAA,MACA,SAAAC,EAAA;AAAA,MACA,QAAAN,EAAA,YAAAT,EAAA;AAAA,MACA,OAAAS,EAAA,YAAAT,EAAA;AAAA,IACA,EAAA;AAEA,WAAA;AAAA,MAAA,SAAAgB,EAAAN,CAAA;AAAA,MACA,oBAAAC;AAAA,MACA,YAAAE;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
import { defineComponent as M, computed as
|
|
2
|
-
import { B as
|
|
3
|
-
import { B as
|
|
4
|
-
import { B as
|
|
5
|
-
import { u as
|
|
6
|
-
import { u as
|
|
7
|
-
import { g as
|
|
1
|
+
import { defineComponent as M, computed as h, ref as a, inject as N, onMounted as P, watch as K, nextTick as A, useSlots as G, provide as X } from "vue";
|
|
2
|
+
import { B as F, D as q } from "./divider.Cc4JFWG_.js";
|
|
3
|
+
import { B as V } from "./popover.Bo4Bkudr.js";
|
|
4
|
+
import { B as Y } from "./popover.types.CBqyA4ly.js";
|
|
5
|
+
import { u as j } from "./use-click-outside.BnhTgpSt.js";
|
|
6
|
+
import { u as J } from "./use-has-slot.C9lQZ6nz.js";
|
|
7
|
+
import { g as Z } from "./generate-uid.NJ8tVoha.js";
|
|
8
8
|
import { u as z } from "./i18n.BQkEbtPM.js";
|
|
9
|
-
import { B as
|
|
10
|
-
import { C as
|
|
9
|
+
import { B as $, p as Q } from "./typography.J1v_SPG3.js";
|
|
10
|
+
import { C as ee } from "./chevron-down.eYtgv5ly.js";
|
|
11
11
|
/* empty css */
|
|
12
12
|
import { n as x } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
|
|
13
13
|
import "./index.Cl4_42j5.js";
|
|
14
|
-
import { C as
|
|
15
|
-
import { a as
|
|
16
|
-
import { t as
|
|
17
|
-
import { B as
|
|
18
|
-
import { B as
|
|
14
|
+
import { C as te, a as R } from "./chevron-right.C--ZOC9j.js";
|
|
15
|
+
import { a as T, B as ne } from "./base-button.-gx_u8Bd.js";
|
|
16
|
+
import { t as oe } from "./truncate.BfIl_-71.js";
|
|
17
|
+
import { B as se } from "./teleport.BV6zrDjA.js";
|
|
18
|
+
import { B as ue } from "./toggle-button.DEVVvpkw.js";
|
|
19
19
|
import "../assets/menu.css";
|
|
20
|
-
const
|
|
21
|
-
let
|
|
22
|
-
const
|
|
20
|
+
const le = Symbol("menu inverse style injection key");
|
|
21
|
+
let D = 0;
|
|
22
|
+
const ae = {
|
|
23
23
|
beforeCreate() {
|
|
24
|
-
this.uuid =
|
|
24
|
+
this.uuid = D.toString(), D += 1;
|
|
25
25
|
}
|
|
26
26
|
};
|
|
27
|
-
var
|
|
27
|
+
var re = function() {
|
|
28
28
|
var t = this, n = t._self._c;
|
|
29
29
|
return n("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? n("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), n("path", { attrs: { fill: "#001222", d: "M8 4C8.29667 4 8.58668 3.91203 8.83335 3.74721C9.08003 3.58238 9.27229 3.34811 9.38582 3.07403C9.49935 2.79994 9.52906 2.49834 9.47118 2.20737C9.4133 1.91639 9.27044 1.64912 9.06066 1.43934C8.85088 1.22956 8.58361 1.0867 8.29264 1.02882C8.00167 0.970945 7.70006 1.00065 7.42598 1.11418C7.15189 1.22771 6.91762 1.41997 6.7528 1.66665C6.58797 1.91332 6.5 2.20333 6.5 2.5C6.5 2.89783 6.65803 3.27936 6.93934 3.56066C7.22064 3.84197 7.60218 4 8 4Z" } }), n("path", { attrs: { fill: "#001222", d: "M8 15C8.29667 15 8.58668 14.912 8.83335 14.7472C9.08003 14.5824 9.27229 14.3481 9.38582 14.074C9.49935 13.7999 9.52906 13.4983 9.47118 13.2074C9.4133 12.9164 9.27044 12.6491 9.06066 12.4393C8.85088 12.2296 8.58361 12.0867 8.29264 12.0288C8.00167 11.9709 7.70006 12.0007 7.42598 12.1142C7.15189 12.2277 6.91762 12.42 6.7528 12.6666C6.58797 12.9133 6.5 13.2033 6.5 13.5C6.5 13.8978 6.65803 14.2794 6.93934 14.5607C7.22064 14.842 7.60218 15 8 15Z" } }), n("path", { attrs: { fill: "#001222", d: "M8.83335 9.24721C8.58668 9.41203 8.29667 9.5 8 9.5C7.60218 9.5 7.22064 9.34197 6.93934 9.06066C6.65803 8.77936 6.5 8.39783 6.5 8C6.5 7.70333 6.58797 7.41332 6.7528 7.16665C6.91762 6.91997 7.15189 6.72771 7.42598 6.61418C7.70006 6.50065 8.00167 6.47094 8.29264 6.52882C8.58361 6.5867 8.85088 6.72956 9.06066 6.93934C9.27044 7.14912 9.4133 7.41639 9.47118 7.70737C9.52906 7.99834 9.49935 8.29994 9.38582 8.57403C9.27229 8.84811 9.08003 9.08238 8.83335 9.24721Z" } })]);
|
|
30
|
-
},
|
|
30
|
+
}, ie = [], ce = /* @__PURE__ */ x(
|
|
31
|
+
ae,
|
|
31
32
|
re,
|
|
32
33
|
ie,
|
|
33
|
-
ce,
|
|
34
34
|
!1,
|
|
35
35
|
null,
|
|
36
36
|
null
|
|
37
37
|
);
|
|
38
|
-
const
|
|
38
|
+
const fe = ce.exports, de = M({
|
|
39
39
|
name: "menu-item",
|
|
40
|
-
components: { BaseButton:
|
|
40
|
+
components: { BaseButton: ne, BentoTypography: $, ChevronRightIcon: te },
|
|
41
41
|
props: {
|
|
42
42
|
/**
|
|
43
43
|
* menu-item text that gets displayed as the main label
|
|
@@ -105,24 +105,24 @@ const de = fe.exports, me = M({
|
|
|
105
105
|
default: !1
|
|
106
106
|
}
|
|
107
107
|
},
|
|
108
|
-
emits: [
|
|
108
|
+
emits: [T.CLICK],
|
|
109
109
|
setup(u, { emit: t }) {
|
|
110
|
-
const e =
|
|
110
|
+
const e = h(() => ({
|
|
111
111
|
"b-menu-item--critical": u.critical,
|
|
112
112
|
"b-menu-item--indent": u.indent
|
|
113
|
-
})), s =
|
|
113
|
+
})), s = h(() => oe(u.secondaryText, 10));
|
|
114
114
|
return {
|
|
115
115
|
// Values
|
|
116
116
|
conditionalClasses: e,
|
|
117
117
|
computedSecondaryText: s,
|
|
118
118
|
// Methods
|
|
119
119
|
onClick: (i) => {
|
|
120
|
-
i.stopPropagation(), u.handler(), t(
|
|
120
|
+
i.stopPropagation(), u.handler(), t(T.CLICK);
|
|
121
121
|
}
|
|
122
122
|
};
|
|
123
123
|
}
|
|
124
124
|
});
|
|
125
|
-
var
|
|
125
|
+
var me = function() {
|
|
126
126
|
var t = this, n = t._self._c;
|
|
127
127
|
return t._self._setupProxy, n("base-button", { staticClass: "b-menu-item", class: t.conditionalClasses, attrs: { role: "menuitem", disabled: t.disabled, tabindex: "-1" }, on: { click: t.onClick }, scopedSlots: t._u([t.icon ? { key: "iconLeft", fn: function() {
|
|
128
128
|
return [n(t.icon, { tag: "component", staticClass: "b-menu-item__icon-left", attrs: { "aria-hidden": "true" } })];
|
|
@@ -131,23 +131,23 @@ var pe = function() {
|
|
|
131
131
|
}, proxy: !0 }, t.chevron ? { key: "iconRight", fn: function() {
|
|
132
132
|
return [n("chevron-right-icon", { attrs: { "aria-hidden": "true" } })];
|
|
133
133
|
}, proxy: !0 } : null], null, !0) });
|
|
134
|
-
},
|
|
134
|
+
}, pe = [], _e = /* @__PURE__ */ x(
|
|
135
|
+
de,
|
|
135
136
|
me,
|
|
136
137
|
pe,
|
|
137
|
-
_e,
|
|
138
138
|
!1,
|
|
139
139
|
null,
|
|
140
140
|
"1e289ecc"
|
|
141
141
|
);
|
|
142
|
-
const
|
|
143
|
-
var
|
|
144
|
-
const
|
|
142
|
+
const W = _e.exports;
|
|
143
|
+
var C = /* @__PURE__ */ ((u) => (u.BACK = "back", u.CLOSE = "close", u.OPEN = "open", u))(C || {});
|
|
144
|
+
const ye = Symbol("menu registering injection key"), ve = {
|
|
145
145
|
name: "bento-menu-list-container"
|
|
146
|
-
},
|
|
147
|
-
...
|
|
146
|
+
}, Ce = /* @__PURE__ */ M({
|
|
147
|
+
...ve,
|
|
148
148
|
setup(u) {
|
|
149
|
-
const t = a(), n = a({}), e =
|
|
150
|
-
|
|
149
|
+
const t = a(), n = a({}), e = N(
|
|
150
|
+
ye,
|
|
151
151
|
!1
|
|
152
152
|
);
|
|
153
153
|
if (e) {
|
|
@@ -159,26 +159,26 @@ const ve = Symbol("menu registering injection key"), Ce = {
|
|
|
159
159
|
return { __sfc: !0, menuListContainerRef: t, menuListContainerEvents: n, registeringAndMousingOut: e };
|
|
160
160
|
}
|
|
161
161
|
});
|
|
162
|
-
var
|
|
162
|
+
var he = function() {
|
|
163
163
|
var t = this, n = t._self._c, e = t._self._setupProxy;
|
|
164
164
|
return n("div", t._g({ ref: "menuListContainerRef", staticClass: "b-menu-list-container", attrs: { "data-testid": "menu-list-container" } }, e.menuListContainerEvents), [t._t("default")], 2);
|
|
165
|
-
},
|
|
165
|
+
}, be = [], ke = /* @__PURE__ */ x(
|
|
166
|
+
Ce,
|
|
166
167
|
he,
|
|
167
168
|
be,
|
|
168
|
-
ke,
|
|
169
169
|
!1,
|
|
170
170
|
null,
|
|
171
171
|
"f5d01392"
|
|
172
172
|
);
|
|
173
|
-
const
|
|
173
|
+
const U = ke.exports, H = {
|
|
174
174
|
"en-US": {
|
|
175
175
|
backButton: "Go back",
|
|
176
176
|
menuButton: "Open menu"
|
|
177
177
|
}
|
|
178
|
-
},
|
|
179
|
-
i18n: { messages:
|
|
178
|
+
}, ge = M({
|
|
179
|
+
i18n: { messages: H },
|
|
180
180
|
name: "sub-menu-item-list",
|
|
181
|
-
components: { BentoDivider:
|
|
181
|
+
components: { BentoDivider: F, MenuItem: W, MenuListContainer: U },
|
|
182
182
|
props: {
|
|
183
183
|
items: {
|
|
184
184
|
type: Array,
|
|
@@ -189,22 +189,22 @@ const H = ge.exports, K = {
|
|
|
189
189
|
required: !0
|
|
190
190
|
}
|
|
191
191
|
},
|
|
192
|
-
emits: [
|
|
192
|
+
emits: [C.CLOSE, C.BACK],
|
|
193
193
|
setup(u, { emit: t }) {
|
|
194
|
-
const n = a(null), e = a(0), s = a(u.items.length),
|
|
194
|
+
const n = a(null), e = a(0), s = a(u.items.length), m = () => t(C.CLOSE), i = () => t(C.BACK), r = h(() => {
|
|
195
195
|
var y;
|
|
196
|
-
const l = (y = u.items) == null ? void 0 : y.map((
|
|
197
|
-
...
|
|
198
|
-
indent: !
|
|
196
|
+
const l = (y = u.items) == null ? void 0 : y.map((p) => ({
|
|
197
|
+
...p,
|
|
198
|
+
indent: !p.icon,
|
|
199
199
|
isTitle: !1,
|
|
200
|
-
clickHandler:
|
|
200
|
+
clickHandler: m
|
|
201
201
|
}));
|
|
202
202
|
return [
|
|
203
203
|
{
|
|
204
204
|
text: u.title,
|
|
205
205
|
secondaryText: null,
|
|
206
206
|
critical: !1,
|
|
207
|
-
icon:
|
|
207
|
+
icon: R,
|
|
208
208
|
isTitle: !0,
|
|
209
209
|
disabled: !1,
|
|
210
210
|
indent: !1,
|
|
@@ -215,10 +215,10 @@ const H = ge.exports, K = {
|
|
|
215
215
|
...l
|
|
216
216
|
];
|
|
217
217
|
}), c = async () => {
|
|
218
|
-
var l, y,
|
|
219
|
-
(k = (
|
|
218
|
+
var l, y, p, v, k;
|
|
219
|
+
(k = (v = (p = (y = (l = n.value) == null ? void 0 : l.children) == null ? void 0 : y[e.value]) == null ? void 0 : p.children) == null ? void 0 : v[0]) == null || k.focus();
|
|
220
220
|
};
|
|
221
|
-
|
|
221
|
+
P(async () => {
|
|
222
222
|
setTimeout(() => c(), 150);
|
|
223
223
|
});
|
|
224
224
|
const o = () => {
|
|
@@ -228,21 +228,21 @@ const H = ge.exports, K = {
|
|
|
228
228
|
};
|
|
229
229
|
return {
|
|
230
230
|
// Enums
|
|
231
|
-
BentoMenuEvent:
|
|
231
|
+
BentoMenuEvent: C,
|
|
232
232
|
// Values
|
|
233
233
|
subMenuItemListRefLocal: n,
|
|
234
234
|
subMenuFocusedIndex: e,
|
|
235
|
-
ChevronLeftIcon:
|
|
235
|
+
ChevronLeftIcon: R,
|
|
236
236
|
computedItems: r,
|
|
237
237
|
// Methods
|
|
238
|
-
closeMenu:
|
|
238
|
+
closeMenu: m,
|
|
239
239
|
onBackButton: i,
|
|
240
240
|
focusPrevious: o,
|
|
241
241
|
focusNext: _
|
|
242
242
|
};
|
|
243
243
|
}
|
|
244
244
|
});
|
|
245
|
-
var
|
|
245
|
+
var Ie = function() {
|
|
246
246
|
var t = this, n = t._self._c;
|
|
247
247
|
return t._self._setupProxy, n("transition", { attrs: { name: "b-sub-menu-item-list__transition", appear: "" } }, [n("menu-list-container", { staticClass: "b-sub-menu-item-list" }, [n("ul", { ref: "subMenuItemListRefLocal", staticClass: "b-sub-menu-item-list__list", attrs: { role: "menu" }, on: { keydown: [function(e) {
|
|
248
248
|
return !e.type.indexOf("key") && t._k(e.keyCode, "down", 40, e.key, ["Down", "ArrowDown"]) ? null : (e.stopPropagation(), t.focusNext.apply(null, arguments));
|
|
@@ -253,42 +253,42 @@ var xe = function() {
|
|
|
253
253
|
}] } }, t._l(t.computedItems, function(e, s) {
|
|
254
254
|
return n("li", { key: `sub-menu-item-list-item-${s}`, attrs: { role: "none" } }, [n("menu-item", { attrs: { text: e.text, handler: e.handler, "secondary-text": e.secondaryText, icon: e.icon, "is-title": e.isTitle, disabled: e.disabled, critical: e.critical, indent: e.indent, tabindex: s === t.subMenuFocusedIndex ? "0" : "-1" }, on: { click: e.clickHandler } }), e.addDivider ? n("bento-divider", { staticClass: "b-sub-menu-item-list__divider" }) : t._e()], 1);
|
|
255
255
|
}), 0)])], 1);
|
|
256
|
-
},
|
|
256
|
+
}, xe = [], Me = /* @__PURE__ */ x(
|
|
257
|
+
ge,
|
|
257
258
|
Ie,
|
|
258
259
|
xe,
|
|
259
|
-
Me,
|
|
260
260
|
!1,
|
|
261
261
|
null,
|
|
262
262
|
"25195627"
|
|
263
263
|
);
|
|
264
|
-
const
|
|
265
|
-
function
|
|
266
|
-
const
|
|
264
|
+
const Be = Me.exports;
|
|
265
|
+
function we(u, t, n) {
|
|
266
|
+
const m = a(0), i = a(0), r = (o) => {
|
|
267
267
|
if (!o || !o.parentElement)
|
|
268
268
|
return;
|
|
269
269
|
const _ = o.parentElement, l = o.cloneNode(!0);
|
|
270
270
|
l.style.position = "absolute", l.style.visibility = "hidden", _.appendChild(l), l.style.width = "max-content";
|
|
271
|
-
const y = l.offsetWidth,
|
|
272
|
-
|
|
273
|
-
const
|
|
274
|
-
i.value =
|
|
271
|
+
const y = l.offsetWidth, p = Math.max(150, Math.min(y, 350));
|
|
272
|
+
m.value = p, l.style.width = `${p}px`;
|
|
273
|
+
const v = l.offsetHeight;
|
|
274
|
+
i.value = v, _.removeChild(l), i.value = v;
|
|
275
275
|
};
|
|
276
|
-
return
|
|
276
|
+
return K([t, n], async ([o]) => {
|
|
277
277
|
var _, l;
|
|
278
278
|
if (o !== null) {
|
|
279
|
-
await
|
|
279
|
+
await A();
|
|
280
280
|
const y = (l = (_ = u.value) == null ? void 0 : _[0]) == null ? void 0 : l.$el;
|
|
281
281
|
y && r(y);
|
|
282
282
|
} else
|
|
283
|
-
|
|
284
|
-
}), { computedStyle:
|
|
283
|
+
m.value = 0, i.value = 0;
|
|
284
|
+
}), { computedStyle: h(() => {
|
|
285
285
|
const o = { width: "max-content" };
|
|
286
|
-
return n.value && (i.value > 0 && (o.height = `${i.value}px`),
|
|
286
|
+
return n.value && (i.value > 0 && (o.height = `${i.value}px`), m.value > 0 && (o.width = `${m.value}px`)), o;
|
|
287
287
|
}) };
|
|
288
288
|
}
|
|
289
|
-
const
|
|
289
|
+
const Se = M({
|
|
290
290
|
name: "menu-item-list",
|
|
291
|
-
components: { BentoDivider:
|
|
291
|
+
components: { BentoDivider: F, MenuItem: W, MenuListContainer: U, SubMenuItemList: Be },
|
|
292
292
|
props: {
|
|
293
293
|
/**
|
|
294
294
|
* The data to be displayed in the list
|
|
@@ -319,63 +319,63 @@ const Ee = M({
|
|
|
319
319
|
default: !0
|
|
320
320
|
}
|
|
321
321
|
},
|
|
322
|
-
emits: [
|
|
322
|
+
emits: [C.CLOSE, "menu-item-click"],
|
|
323
323
|
setup(u, { emit: t, expose: n }) {
|
|
324
|
-
const e = a(null), s = a(null),
|
|
325
|
-
let
|
|
326
|
-
return
|
|
327
|
-
...
|
|
328
|
-
indent:
|
|
324
|
+
const e = a(null), s = a(null), m = a(null), i = a(null), r = a(!1), c = a(null), o = a(u.focusLastElement ? u.data.length - 1 : 0), _ = a(0), l = a(u.data.length - 1), y = h(() => u.data.some((d) => d.icon)), p = h(() => u.indentItems || y.value ? u.data.map((d) => {
|
|
325
|
+
let f = !1;
|
|
326
|
+
return d.icon || (f = !0), {
|
|
327
|
+
...d,
|
|
328
|
+
indent: f
|
|
329
329
|
};
|
|
330
|
-
}) : u.data),
|
|
331
|
-
var
|
|
332
|
-
(
|
|
333
|
-
}, k = () => t(
|
|
334
|
-
if (
|
|
335
|
-
c.value =
|
|
330
|
+
}) : u.data), v = async () => {
|
|
331
|
+
var d, f, b;
|
|
332
|
+
(b = (f = (d = s.value) == null ? void 0 : d.children[o.value]) == null ? void 0 : f.children[0]) == null || b.focus();
|
|
333
|
+
}, k = () => t(C.CLOSE), B = (d, f) => {
|
|
334
|
+
if (d.items) {
|
|
335
|
+
c.value = f, r.value = !0;
|
|
336
336
|
return;
|
|
337
337
|
}
|
|
338
|
-
c.value =
|
|
339
|
-
}, B = () => {
|
|
340
|
-
o.value > 0 ? (o.value -= 1, m.value[o.value].disabled && B()) : o.value = l.value, C();
|
|
338
|
+
c.value = f, r.value = !1, !d.skipClose && u.closeMenuOnItemSelect !== !1 && k(), t("menu-item-click");
|
|
341
339
|
}, g = () => {
|
|
342
|
-
o.value
|
|
343
|
-
}, I = (
|
|
344
|
-
|
|
345
|
-
|
|
340
|
+
o.value > 0 ? (o.value -= 1, p.value[o.value].disabled && g()) : o.value = l.value, v();
|
|
341
|
+
}, I = () => {
|
|
342
|
+
o.value < l.value ? (o.value += 1, p.value[o.value].disabled && I()) : o.value = 0, v();
|
|
343
|
+
}, w = (d, f) => {
|
|
344
|
+
var b;
|
|
345
|
+
(b = d == null ? void 0 : d.items) != null && b.length && (c.value = f, r.value = !0);
|
|
346
346
|
}, S = () => {
|
|
347
347
|
c.value && r.value && (c.value = null, r.value = !1);
|
|
348
348
|
}, E = () => {
|
|
349
|
-
r.value = !1, c.value = null,
|
|
349
|
+
r.value = !1, c.value = null, v();
|
|
350
350
|
};
|
|
351
351
|
n({
|
|
352
|
-
focusItem:
|
|
352
|
+
focusItem: v
|
|
353
353
|
});
|
|
354
|
-
const { computedStyle: O } =
|
|
354
|
+
const { computedStyle: O } = we(i, c, r);
|
|
355
355
|
return {
|
|
356
356
|
// Values
|
|
357
357
|
menuItemListRef: s,
|
|
358
|
-
menuItemListWrapperRef:
|
|
358
|
+
menuItemListWrapperRef: m,
|
|
359
359
|
subMenuItemListRef: i,
|
|
360
360
|
menuItemRef: e,
|
|
361
|
-
computedData:
|
|
361
|
+
computedData: p,
|
|
362
362
|
computedStyle: O,
|
|
363
363
|
focusedIndex: o,
|
|
364
364
|
subMenuFocusedIndex: _,
|
|
365
365
|
showSubMenu: r,
|
|
366
366
|
visibleSubMenuIndex: c,
|
|
367
367
|
// Methods
|
|
368
|
-
menuItemClick:
|
|
368
|
+
menuItemClick: B,
|
|
369
369
|
closeMenu: k,
|
|
370
|
-
focusPrevious:
|
|
371
|
-
focusNext:
|
|
372
|
-
focusRight:
|
|
370
|
+
focusPrevious: g,
|
|
371
|
+
focusNext: I,
|
|
372
|
+
focusRight: w,
|
|
373
373
|
focusLeft: S,
|
|
374
374
|
onBackButton: E
|
|
375
375
|
};
|
|
376
376
|
}
|
|
377
377
|
});
|
|
378
|
-
var
|
|
378
|
+
var Ee = function() {
|
|
379
379
|
var t = this, n = t._self._c;
|
|
380
380
|
return t._self._setupProxy, n("menu-list-container", { ref: "menuItemListWrapperRef", style: t.computedStyle }, [n("ul", { ref: "menuItemListRef", staticClass: "b-menu-item-list", attrs: { role: "menu" }, on: { keydown: [function(e) {
|
|
381
381
|
return !e.type.indexOf("key") && t._k(e.keyCode, "down", 40, e.key, ["Down", "ArrowDown"]) ? null : t.focusNext.apply(null, arguments);
|
|
@@ -386,28 +386,28 @@ var Oe = function() {
|
|
|
386
386
|
}, function(e) {
|
|
387
387
|
return !e.type.indexOf("key") && t._k(e.keyCode, "tab", 9, e.key, "Tab") ? null : t.closeMenu.apply(null, arguments);
|
|
388
388
|
}] } }, t._l(t.computedData, function(e, s) {
|
|
389
|
-
var
|
|
389
|
+
var m, i, r, c;
|
|
390
390
|
return n("li", { key: `menu-item-${s}`, ref: "menuItemRef", refInFor: !0, staticClass: "b-menu-item-list__item", attrs: { role: "none" }, on: { keydown: [function(o) {
|
|
391
391
|
return !o.type.indexOf("key") && t._k(o.keyCode, "right", 39, o.key, ["Right", "ArrowRight"]) || "button" in o && o.button !== 2 ? null : t.focusRight(e, s);
|
|
392
392
|
}, function(o) {
|
|
393
393
|
return !o.type.indexOf("key") && t._k(o.keyCode, "left", 37, o.key, ["Left", "ArrowLeft"]) || "button" in o && o.button !== 0 ? null : t.focusLeft();
|
|
394
|
-
}] } }, [n("menu-item", { attrs: { text: e.text, handler: (
|
|
394
|
+
}] } }, [n("menu-item", { attrs: { text: e.text, handler: (m = e.items) != null && m.length ? () => null : e.handler, "secondary-text": e.secondaryText, icon: e.icon, chevron: !!((i = e.items) != null && i.length), disabled: e.disabled, critical: e.critical, indent: e.indent, tabindex: s === t.subMenuFocusedIndex ? "0" : "-1", "aria-haspopup": !!((r = e.items) != null && r.length), "aria-expanded": t.showSubMenu && t.visibleSubMenuIndex === s }, on: { click: function(o) {
|
|
395
395
|
return t.menuItemClick(e, s);
|
|
396
396
|
} } }), e.addDivider ? n("bento-divider", { staticClass: "b-menu-item-list__divider" }) : t._e(), (c = e.items) != null && c.length && t.showSubMenu && t.visibleSubMenuIndex === s ? n("sub-menu-item-list", { ref: "subMenuItemListRef", refInFor: !0, attrs: { items: e.items, title: e.text }, on: { back: t.onBackButton, close: t.closeMenu } }) : t._e()], 1);
|
|
397
397
|
}), 0)]);
|
|
398
|
-
},
|
|
398
|
+
}, Oe = [], Le = /* @__PURE__ */ x(
|
|
399
|
+
Se,
|
|
399
400
|
Ee,
|
|
400
401
|
Oe,
|
|
401
|
-
Le,
|
|
402
402
|
!1,
|
|
403
403
|
null,
|
|
404
404
|
"a94a192f"
|
|
405
405
|
);
|
|
406
|
-
const
|
|
407
|
-
i18n: { messages:
|
|
406
|
+
const Re = Le.exports, Te = {
|
|
407
|
+
i18n: { messages: H },
|
|
408
408
|
name: "bento-menu"
|
|
409
|
-
},
|
|
410
|
-
...
|
|
409
|
+
}, De = /* @__PURE__ */ M({
|
|
410
|
+
...Te,
|
|
411
411
|
props: {
|
|
412
412
|
button: { default: () => ({
|
|
413
413
|
variant: "secondary"
|
|
@@ -415,7 +415,7 @@ const Te = Re.exports, De = {
|
|
|
415
415
|
closeMenuOnItemSelect: { type: Boolean, default: !0 },
|
|
416
416
|
data: null,
|
|
417
417
|
disableArrowDownOpeningMenu: { type: Boolean, default: !1 },
|
|
418
|
-
menuPosition: { default:
|
|
418
|
+
menuPosition: { default: Y.BOTTOM_START },
|
|
419
419
|
menuFixedPositioning: { type: Boolean, default: !1 },
|
|
420
420
|
menuWidth: { default: null },
|
|
421
421
|
revertFocusToButton: { type: Boolean, default: !0 },
|
|
@@ -424,53 +424,53 @@ const Te = Re.exports, De = {
|
|
|
424
424
|
},
|
|
425
425
|
emits: ["menu-item-click", "click-outside"],
|
|
426
426
|
setup(u, { expose: t, emit: n }) {
|
|
427
|
-
var
|
|
428
|
-
const e = u, s =
|
|
429
|
-
q
|
|
430
|
-
const
|
|
431
|
-
"b-menu--inverse":
|
|
432
|
-
})), k =
|
|
427
|
+
var d;
|
|
428
|
+
const e = u, s = G(), m = J(s), { t: i } = z(), r = a(null), c = a(null), o = a(!1), _ = a(!1), l = a(null), y = Z("menu"), p = N(le, a(!1));
|
|
429
|
+
X(q, p);
|
|
430
|
+
const v = h(() => ({
|
|
431
|
+
"b-menu--inverse": p.value
|
|
432
|
+
})), k = h(() => e.menuWidth ? { width: `${e.menuWidth}px` } : null), B = h(() => {
|
|
433
433
|
if (e != null && e.button)
|
|
434
434
|
return {
|
|
435
435
|
variant: "secondary",
|
|
436
436
|
...e.button
|
|
437
437
|
};
|
|
438
|
-
}),
|
|
439
|
-
o.value = !0, n(
|
|
438
|
+
}), g = () => {
|
|
439
|
+
o.value = !0, n(C.OPEN);
|
|
440
440
|
}, I = async (f = e.revertFocusToButton) => {
|
|
441
|
-
var
|
|
442
|
-
o.value && (o.value = !1, f && (await
|
|
443
|
-
},
|
|
441
|
+
var b, L;
|
|
442
|
+
o.value && (o.value = !1, f && (await A(), (L = (b = r.value) == null ? void 0 : b.$el) == null || L.focus()), n(C.CLOSE));
|
|
443
|
+
}, w = (f) => {
|
|
444
444
|
f.stopPropagation(), o.value ? I() : g();
|
|
445
|
-
},
|
|
445
|
+
}, S = (f) => {
|
|
446
446
|
f.preventDefault(), _.value = !1, e.disableArrowDownOpeningMenu || g();
|
|
447
|
-
},
|
|
447
|
+
}, E = (f) => {
|
|
448
448
|
f.preventDefault(), _.value = !0, g();
|
|
449
|
-
},
|
|
449
|
+
}, O = () => {
|
|
450
450
|
n("menu-item-click");
|
|
451
451
|
};
|
|
452
|
-
return
|
|
452
|
+
return j(
|
|
453
453
|
l,
|
|
454
454
|
() => {
|
|
455
455
|
I(), n("click-outside");
|
|
456
456
|
},
|
|
457
457
|
{
|
|
458
458
|
...e.closeOnClickOutsideOptions,
|
|
459
|
-
ignore: [r, ...((
|
|
459
|
+
ignore: [r, ...((d = e.closeOnClickOutsideOptions) == null ? void 0 : d.ignore) ?? []]
|
|
460
460
|
}
|
|
461
461
|
), t({
|
|
462
462
|
/**
|
|
463
463
|
* Control to enable programmatic closing of the menu
|
|
464
464
|
*/
|
|
465
465
|
closeMenu: I
|
|
466
|
-
}),
|
|
467
|
-
|
|
466
|
+
}), P(() => {
|
|
467
|
+
m("iconRight") && Q(
|
|
468
468
|
'"bento-menu" no longer supports the "iconRight" slot. The right-aligned icon is now fixed by design.'
|
|
469
469
|
);
|
|
470
|
-
}), { __sfc: !0, props: e, emit: n, slots: s, hasSlot:
|
|
470
|
+
}), { __sfc: !0, props: e, emit: n, slots: s, hasSlot: m, t: i, menuButtonRef: r, menuItemListRef: c, showMenu: o, isLastElementFocused: _, popoverRef: l, menuId: y, isInverseColorSet: p, computedClasses: v, computedMenuWidth: k, computedButtonPropsWithDefaults: B, openMenu: g, closeMenu: I, toggleShowMenu: w, onKeyDown: S, onKeyUp: E, menuItemClick: O, BentoToggleButton: ue, BentoPopover: V, BentoTeleport: se, ChevronDownIcon: ee, OptionsVerticalIcon: fe, MenuItemList: Re };
|
|
471
471
|
}
|
|
472
472
|
});
|
|
473
|
-
var
|
|
473
|
+
var Ne = function() {
|
|
474
474
|
var t = this, n = t._self._c, e = t._self._setupProxy;
|
|
475
475
|
return n("div", { staticClass: "b-menu", class: e.computedClasses, attrs: { "data-testid": "menu" }, on: { keydown: [function(s) {
|
|
476
476
|
return !s.type.indexOf("key") && t._k(s.keyCode, "down", 40, s.key, ["Down", "ArrowDown"]) ? null : e.onKeyDown.apply(null, arguments);
|
|
@@ -478,7 +478,7 @@ var Pe = function() {
|
|
|
478
478
|
return !s.type.indexOf("key") && t._k(s.keyCode, "up", 38, s.key, ["Up", "ArrowUp"]) ? null : e.onKeyUp.apply(null, arguments);
|
|
479
479
|
}, function(s) {
|
|
480
480
|
return !s.type.indexOf("key") && t._k(s.keyCode, "esc", 27, s.key, ["Esc", "Escape"]) ? null : e.closeMenu();
|
|
481
|
-
}] } }, [n(e.BentoToggleButton, t._b({ ref: "menuButtonRef", attrs: { "aria-haspopup": "true", "aria-controls": e.showMenu ? e.menuId : null,
|
|
481
|
+
}] } }, [n(e.BentoToggleButton, t._b({ ref: "menuButtonRef", attrs: { "aria-haspopup": "true", "aria-controls": e.showMenu ? e.menuId : null, toggled: e.showMenu, inverse: e.isInverseColorSet }, on: { click: e.toggleShowMenu }, scopedSlots: t._u([!e.hasSlot("default") || e.hasSlot("iconLeft") ? { key: "iconLeft", fn: function() {
|
|
482
482
|
return [t._t("iconLeft", function() {
|
|
483
483
|
return [n(e.OptionsVerticalIcon, { attrs: { title: e.t("menuButton") } })];
|
|
484
484
|
})];
|
|
@@ -496,20 +496,20 @@ var Pe = function() {
|
|
|
496
496
|
"left-start",
|
|
497
497
|
"left-end"
|
|
498
498
|
], teleport: t.teleport, "without-space": "" } }, [n(e.MenuItemList, { ref: "menuItemListRef", attrs: { "close-menu-on-item-select": t.closeMenuOnItemSelect, data: t.data, "focus-last-element": e.isLastElementFocused }, on: { close: e.closeMenu, "menu-item-click": e.menuItemClick } })], 1) : t._e()], 1) : t._e()], 1);
|
|
499
|
-
},
|
|
499
|
+
}, Pe = [], Ae = /* @__PURE__ */ x(
|
|
500
|
+
De,
|
|
500
501
|
Ne,
|
|
501
502
|
Pe,
|
|
502
|
-
Ae,
|
|
503
503
|
!1,
|
|
504
504
|
null,
|
|
505
|
-
"
|
|
505
|
+
"f7030411"
|
|
506
506
|
);
|
|
507
|
-
const
|
|
507
|
+
const nt = Ae.exports;
|
|
508
508
|
export {
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
509
|
+
nt as B,
|
|
510
|
+
ye as D,
|
|
511
|
+
le as M,
|
|
512
|
+
fe as O,
|
|
513
|
+
C as a
|
|
514
514
|
};
|
|
515
|
-
//# sourceMappingURL=menu.
|
|
515
|
+
//# sourceMappingURL=menu.D0OQgk40.js.map
|