@sparklingopinions/sparkling-ui 0.4.0 → 0.4.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/components/AlertDialog/AlertDialog.js.map +1 -1
- package/dist/components/AlertDialog/AlertDialog.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/AlertDialog/AlertDialog.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/Popover/Popover.js.map +1 -1
- package/dist/components/Popover/Popover.vue_vue_type_script_setup_true_lang.js +2 -1
- package/dist/components/Popover/Popover.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertDialog.js","names":["_sfc_main","AlertDialog_vue_vue_type_script_setup_true_lang_default","AlertDialog_default"],"sources":["../../../src/components/AlertDialog/AlertDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\n\nimport {\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogOverlay,\n AlertDialogPortal,\n AlertDialogRoot,\n AlertDialogTitle\n} from 'reka-ui'\n\nimport { type ConfirmRequest, confirmRequest } from '../../composables/useConfirm'\nimport Button from '../Button/Button.vue'\n\nexport interface AlertDialogProps {\n /** Defaults for every confirmation; each call can override them. */\n confirmLabel?: string\n cancelLabel?: string\n}\n\nwithDefaults(defineProps<AlertDialogProps>(), { confirmLabel: 'Confirm', cancelLabel: 'Cancel' })\n\n// Kept while it animates out, after the request is answered. Plain buttons, not Reka's Action and Cancel: those\n// close the dialog themselves, which would answer before the click does.\nconst shown = ref<ConfirmRequest | null>(null)\nconst open = computed({\n get: () => !!confirmRequest.value,\n set: (value) => !value && answer(false)\n})\n\nwatch(confirmRequest, (request) => {\n if (request) shown.value = request\n})\n\nfunction answer(confirmed: boolean) {\n confirmRequest.value?.resolve(confirmed)\n confirmRequest.value = null\n}\n</script>\n\n<template>\n <AlertDialogRoot v-model:open=\"open\">\n <AlertDialogPortal>\n <AlertDialogOverlay\n class=\"fixed inset-0 z-[
|
|
1
|
+
{"version":3,"file":"AlertDialog.js","names":["_sfc_main","AlertDialog_vue_vue_type_script_setup_true_lang_default","AlertDialog_default"],"sources":["../../../src/components/AlertDialog/AlertDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\n\nimport {\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogOverlay,\n AlertDialogPortal,\n AlertDialogRoot,\n AlertDialogTitle\n} from 'reka-ui'\n\nimport { type ConfirmRequest, confirmRequest } from '../../composables/useConfirm'\nimport Button from '../Button/Button.vue'\n\nexport interface AlertDialogProps {\n /** Defaults for every confirmation; each call can override them. */\n confirmLabel?: string\n cancelLabel?: string\n}\n\nwithDefaults(defineProps<AlertDialogProps>(), { confirmLabel: 'Confirm', cancelLabel: 'Cancel' })\n\n// Kept while it animates out, after the request is answered. Plain buttons, not Reka's Action and Cancel: those\n// close the dialog themselves, which would answer before the click does.\nconst shown = ref<ConfirmRequest | null>(null)\nconst open = computed({\n get: () => !!confirmRequest.value,\n set: (value) => !value && answer(false)\n})\n\nwatch(confirmRequest, (request) => {\n if (request) shown.value = request\n})\n\nfunction answer(confirmed: boolean) {\n confirmRequest.value?.resolve(confirmed)\n confirmRequest.value = null\n}\n</script>\n\n<template>\n <AlertDialogRoot v-model:open=\"open\">\n <AlertDialogPortal>\n <AlertDialogOverlay\n class=\"fixed inset-0 z-[1160] flex items-center justify-center bg-sui-scrim/40 backdrop-blur-[4px] data-[state=closed]:animate-sui-scrim-out data-[state=open]:animate-sui-scrim-in\"\n >\n <AlertDialogContent\n v-if=\"shown\"\n class=\"flex w-[27rem] max-w-[calc(100vw-2.5rem)] flex-col overflow-hidden rounded-xl bg-sui-surface shadow-xl outline-hidden data-[state=closed]:animate-sui-dialog-out data-[state=open]:animate-sui-dialog-in\"\n @open-auto-focus.prevent=\"($event.target as HTMLElement).focus()\"\n >\n <div class=\"border-b border-sui-line-subtle px-5 py-4\">\n <AlertDialogTitle class=\"truncate text-base font-semibold text-sui-ink\">{{ shown.title }}</AlertDialogTitle>\n </div>\n <AlertDialogDescription class=\"px-5 py-5 text-sm leading-relaxed text-sui-ink-emphasis\">\n {{ shown.message }}\n </AlertDialogDescription>\n <div class=\"flex items-center justify-end gap-3 border-t border-sui-line-subtle bg-sui-canvas px-5 py-4\">\n <Button type=\"button\" :variant=\"shown.cancelVariant ?? 'ghost'\" @click=\"answer(false)\">\n {{ shown.cancelLabel ?? cancelLabel }}\n </Button>\n <Button type=\"button\" :variant=\"shown.confirmVariant ?? 'primary'\" @click=\"answer(true)\">\n {{ shown.confirmLabel ?? confirmLabel }}\n </Button>\n </div>\n </AlertDialogContent>\n </AlertDialogOverlay>\n </AlertDialogPortal>\n </AlertDialogRoot>\n</template>\n"],"mappings":""}
|
|
@@ -25,7 +25,7 @@ var S = { class: "border-b border-sui-line-subtle px-5 py-4" }, C = { class: "fl
|
|
|
25
25
|
"onUpdate:open": n[3] ||= (e) => T.value = e
|
|
26
26
|
}, {
|
|
27
27
|
default: m(() => [s(f(y), null, {
|
|
28
|
-
default: m(() => [s(f(v), { class: "fixed inset-0 z-[
|
|
28
|
+
default: m(() => [s(f(v), { class: "fixed inset-0 z-[1160] flex items-center justify-center bg-sui-scrim/40 backdrop-blur-[4px] data-[state=closed]:animate-sui-scrim-out data-[state=open]:animate-sui-scrim-in" }, {
|
|
29
29
|
default: m(() => [w.value ? (l(), r(f(g), {
|
|
30
30
|
key: 0,
|
|
31
31
|
class: "flex w-[27rem] max-w-[calc(100vw-2.5rem)] flex-col overflow-hidden rounded-xl bg-sui-surface shadow-xl outline-hidden data-[state=closed]:animate-sui-dialog-out data-[state=open]:animate-sui-dialog-in",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertDialog.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_withCtx","_createVNode","_withModifiers","_createElementVNode","_createTextVNode","_toDisplayString","Button","_createCommentVNode","Button_default","_hoisted_1","_hoisted_2","AlertDialog_vue_vue_type_script_setup_true_lang_default","shown","ref","open","computed","confirmRequest","value","answer","request","confirmed","openBlock","createBlock","unref","AlertDialogRoot","_cache","$event","withCtx","createVNode","AlertDialogPortal","AlertDialogOverlay","AlertDialogContent","withModifiers","createElementVNode","AlertDialogTitle","createTextVNode","toDisplayString","AlertDialogDescription","__props","createCommentVNode"],"sources":["../../../src/components/AlertDialog/AlertDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\n\nimport {\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogOverlay,\n AlertDialogPortal,\n AlertDialogRoot,\n AlertDialogTitle\n} from 'reka-ui'\n\nimport { type ConfirmRequest, confirmRequest } from '../../composables/useConfirm'\nimport Button from '../Button/Button.vue'\n\nexport interface AlertDialogProps {\n /** Defaults for every confirmation; each call can override them. */\n confirmLabel?: string\n cancelLabel?: string\n}\n\nwithDefaults(defineProps<AlertDialogProps>(), { confirmLabel: 'Confirm', cancelLabel: 'Cancel' })\n\n// Kept while it animates out, after the request is answered. Plain buttons, not Reka's Action and Cancel: those\n// close the dialog themselves, which would answer before the click does.\nconst shown = ref<ConfirmRequest | null>(null)\nconst open = computed({\n get: () => !!confirmRequest.value,\n set: (value) => !value && answer(false)\n})\n\nwatch(confirmRequest, (request) => {\n if (request) shown.value = request\n})\n\nfunction answer(confirmed: boolean) {\n confirmRequest.value?.resolve(confirmed)\n confirmRequest.value = null\n}\n</script>\n\n<template>\n <AlertDialogRoot v-model:open=\"open\">\n <AlertDialogPortal>\n <AlertDialogOverlay\n class=\"fixed inset-0 z-[
|
|
1
|
+
{"version":3,"file":"AlertDialog.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_withCtx","_createVNode","_withModifiers","_createElementVNode","_createTextVNode","_toDisplayString","Button","_createCommentVNode","Button_default","_hoisted_1","_hoisted_2","AlertDialog_vue_vue_type_script_setup_true_lang_default","shown","ref","open","computed","confirmRequest","value","answer","request","confirmed","openBlock","createBlock","unref","AlertDialogRoot","_cache","$event","withCtx","createVNode","AlertDialogPortal","AlertDialogOverlay","AlertDialogContent","withModifiers","createElementVNode","AlertDialogTitle","createTextVNode","toDisplayString","AlertDialogDescription","__props","createCommentVNode"],"sources":["../../../src/components/AlertDialog/AlertDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\n\nimport {\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogOverlay,\n AlertDialogPortal,\n AlertDialogRoot,\n AlertDialogTitle\n} from 'reka-ui'\n\nimport { type ConfirmRequest, confirmRequest } from '../../composables/useConfirm'\nimport Button from '../Button/Button.vue'\n\nexport interface AlertDialogProps {\n /** Defaults for every confirmation; each call can override them. */\n confirmLabel?: string\n cancelLabel?: string\n}\n\nwithDefaults(defineProps<AlertDialogProps>(), { confirmLabel: 'Confirm', cancelLabel: 'Cancel' })\n\n// Kept while it animates out, after the request is answered. Plain buttons, not Reka's Action and Cancel: those\n// close the dialog themselves, which would answer before the click does.\nconst shown = ref<ConfirmRequest | null>(null)\nconst open = computed({\n get: () => !!confirmRequest.value,\n set: (value) => !value && answer(false)\n})\n\nwatch(confirmRequest, (request) => {\n if (request) shown.value = request\n})\n\nfunction answer(confirmed: boolean) {\n confirmRequest.value?.resolve(confirmed)\n confirmRequest.value = null\n}\n</script>\n\n<template>\n <AlertDialogRoot v-model:open=\"open\">\n <AlertDialogPortal>\n <AlertDialogOverlay\n class=\"fixed inset-0 z-[1160] flex items-center justify-center bg-sui-scrim/40 backdrop-blur-[4px] data-[state=closed]:animate-sui-scrim-out data-[state=open]:animate-sui-scrim-in\"\n >\n <AlertDialogContent\n v-if=\"shown\"\n class=\"flex w-[27rem] max-w-[calc(100vw-2.5rem)] flex-col overflow-hidden rounded-xl bg-sui-surface shadow-xl outline-hidden data-[state=closed]:animate-sui-dialog-out data-[state=open]:animate-sui-dialog-in\"\n @open-auto-focus.prevent=\"($event.target as HTMLElement).focus()\"\n >\n <div class=\"border-b border-sui-line-subtle px-5 py-4\">\n <AlertDialogTitle class=\"truncate text-base font-semibold text-sui-ink\">{{ shown.title }}</AlertDialogTitle>\n </div>\n <AlertDialogDescription class=\"px-5 py-5 text-sm leading-relaxed text-sui-ink-emphasis\">\n {{ shown.message }}\n </AlertDialogDescription>\n <div class=\"flex items-center justify-end gap-3 border-t border-sui-line-subtle bg-sui-canvas px-5 py-4\">\n <Button type=\"button\" :variant=\"shown.cancelVariant ?? 'ghost'\" @click=\"answer(false)\">\n {{ shown.cancelLabel ?? cancelLabel }}\n </Button>\n <Button type=\"button\" :variant=\"shown.confirmVariant ?? 'primary'\" @click=\"answer(true)\">\n {{ shown.confirmLabel ?? confirmLabel }}\n </Button>\n </div>\n </AlertDialogContent>\n </AlertDialogOverlay>\n </AlertDialogPortal>\n </AlertDialogRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;EAyBA,IAAMe,IAAQC,EAA2B,IAAI,GACvCC,IAAOC,EAAS;GACpB,WAAW,CAAC,CAACC,EAAe;GAC5B,MAAM,MAAU,CAACC,KAASC,EAAO,EAAK;EACxC,CAAC;EAED,EAAMF,IAAiB,MAAY;GACjC,AAAIG,MAAS,EAAM,QAAQA;EAC7B,CAAC;EAED,SAASD,EAAO,GAAoB;GAElC,AADAF,EAAe,OAAO,QAAQI,CAAS,GACvC,EAAe,QAAQ;EACzB;E,kBAIEvB,EAAA,GAAAC,EA2BkBC,EAAAyB,CAAA,GAAA;GA3BO,MAAMV,EAAA;GAAA,iBAAA,AAAAW,EAAA,QAAA,MAAA,EAAI,QAAAC;;GACjC,SAAA1B,QAyBoB,CAzBpBC,EAyBoBF,EAAA8B,CAAA,GAAA,MAAA;IAxBlB,SAAA7B,QAuBqB,CAvBrBC,EAuBqBF,EAAA+B,CAAA,GAAA,EAtBnB,OAAM,+KAA8K,GAAA;KAEpL,SAAA9B,QAmBqB,CAlBbY,EAAA,SADRf,EAAA,GAAAC,EAmBqBC,EAAAgC,CAAA,GAAA;;MAjBnB,OAAM;MACL,iBAAe,AAAAN,EAAA,OAAAvB,GAAA,MAAWwB,EAAO,OAAuB,MAAK,GAAA,CAAA,SAAA,CAAA;;MAE9D,SAAA1B,QAEM;OAFNG,EAEM,OAFNM,GAEM,CADJR,EAA4GF,EAAAmC,CAAA,GAAA,EAA1F,OAAM,gDAA+C,GAAA;QAAC,SAAAlC,QAAiB,CAAdI,EAAAC,EAAAO,EAAA,MAAM,KAAK,GAAA,CAAA,C;;;OAExFX,EAEyBF,EAAAsC,CAAA,GAAA,EAFD,OAAM,0DAAyD,GAAA;QACrF,SAAArC,QAAmB,CAAhBI,EAAAC,EAAAO,EAAA,MAAM,OAAO,GAAA,CAAA,C;;;OAElBT,EAOM,OAPNO,GAOM,CANJT,EAESK,GAAA;QAFD,MAAK;QAAU,SAASM,EAAA,MAAM,iBAAa;QAAc,SAAK,AAAAa,EAAA,QAAA,MAAEP,EAAM,EAAA;;QAC5E,SAAAlB,QAAsC,CAAnCI,EAAAC,EAAAO,EAAA,MAAM,eAAe0B,EAAA,WAAW,GAAA,CAAA,C;;O,oBAErCrC,EAESK,GAAA;QAFD,MAAK;QAAU,SAASM,EAAA,MAAM,kBAAc;QAAgB,SAAK,AAAAa,EAAA,QAAA,MAAEP,EAAM,EAAA;;QAC/E,SAAAlB,QAAwC,CAArCI,EAAAC,EAAAO,EAAA,MAAM,gBAAgB0B,EAAA,YAAY,GAAA,CAAA,C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","names":["_sfc_main","Popover_vue_vue_type_script_setup_true_lang_default","Popover_default"],"sources":["../../../src/components/Popover/Popover.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, ref, useAttrs, watch } from 'vue'\n\nimport { PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot } from 'reka-ui'\n\nexport interface PopoverProps {\n /** The gap to the anchor, in px; negative overlaps it. */\n offset?: number\n /** Shifts it along the anchor's edge, in px. */\n alignOffset?: number\n closeOnEscape?: boolean\n /** The panel's width, e.g. `20rem`. */\n width?: string\n}\n\n// Root is Reka's renderless PopoverRoot: class and attributes belong on the panel.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<PopoverProps>(), {\n offset: 4,\n alignOffset: 0,\n closeOnEscape: true,\n width: '16rem'\n})\n\nconst emit = defineEmits<{ show: []; hide: [] }>()\n\nconst attrs = useAttrs()\n\nconst open = ref(false)\nconst anchor = ref<HTMLElement>()\n// What was clicked to open it; clicks on it toggle the popover rather than counting as outside.\nconst opener = ref<HTMLElement>()\nconst label = ref<string>()\n// A press outside closes it and leaves focus to what was pressed.\nlet pressedOutside = false\n\n/** Opens below the event's element, or below `target` when given. */\nfunction show(event: Event, target?: HTMLElement) {\n opener.value = event.currentTarget as HTMLElement\n anchor.value = target ?? opener.value\n // A dialog needs a name: an aria-label given to the popover, or else the name of the element it opened from.\n label.value =\n (attrs['aria-label'] as string | undefined) ??\n opener.value?.getAttribute('aria-label') ??\n opener.value?.textContent?.trim()\n pressedOutside = false\n open.value = true\n}\n\nfunction hide() {\n open.value = false\n}\n\nfunction toggle(event: Event, target?: HTMLElement) {\n if (open.value) hide()\n else show(event, target)\n}\n\ndefineExpose({ show, hide, toggle })\n\nfunction isOnAnchor(target: EventTarget | null) {\n return target instanceof Node && [anchor.value, opener.value].some((el) => el?.contains(target))\n}\n\nfunction onPointerDownOutside(event: CustomEvent<{ originalEvent: PointerEvent }>) {\n if (isOnAnchor(event.detail.originalEvent.target)) event.preventDefault()\n else pressedOutside = true\n}\n\nfunction onEscape(event: KeyboardEvent) {\n if (!props.closeOnEscape) event.preventDefault()\n}\n\n// Otherwise focus left in the panel goes back to the anchor.\nfunction onCloseAutoFocus(event: Event) {\n event.preventDefault()\n const active = document.activeElement\n const inPanel = !active || active === document.body || (event.target as HTMLElement).contains(active)\n if (inPanel && !pressedOutside) anchor.value?.focus()\n}\n\n// Focus goes to an [autofocus] element inside, or else the panel, so Tab moves through it and Escape works at once.\n// The event comes from Reka's positioning wrapper around the panel.\nfunction onOpenAutoFocus(event: Event) {\n event.preventDefault()\n const wrapper = event.target as HTMLElement | null\n const panel = wrapper?.querySelector<HTMLElement>('[role=\"dialog\"]')\n ;(panel?.querySelector<HTMLElement>('[autofocus]') ?? panel)?.focus()\n}\n\n// It closes when the page moves under it: a scrolling ancestor of the anchor, or a resized window.\nfunction onScroll(event: Event) {\n if (event.target instanceof Node && event.target.contains(anchor.value ?? null)) hide()\n}\n\nwatch(open, (isOpen) => {\n if (isOpen) {\n window.addEventListener('scroll', onScroll, true)\n window.addEventListener('resize', hide)\n emit('show')\n } else {\n window.removeEventListener('scroll', onScroll, true)\n window.removeEventListener('resize', hide)\n emit('hide')\n }\n})\n\nonBeforeUnmount(() => {\n window.removeEventListener('scroll', onScroll, true)\n window.removeEventListener('resize', hide)\n})\n</script>\n\n<template>\n <PopoverRoot v-model:open=\"open\">\n <PopoverAnchor :reference=\"anchor\" />\n <PopoverPortal>\n <PopoverContent\n v-bind=\"$attrs\"\n align=\"start\"\n :align-offset=\"alignOffset\"\n :aria-label=\"label\"\n class=\"z-[1100] block origin-center rounded-lg border border-sui-line-subtle bg-sui-surface text-sui-ink shadow-xl data-[state=closed]:animate-sui-overlay-out data-[state=open]:animate-sui-overlay-in\"\n side=\"bottom\"\n :side-offset=\"offset\"\n :style=\"{ width }\"\n @close-auto-focus=\"onCloseAutoFocus\"\n @escape-key-down=\"onEscape\"\n @focus-outside.prevent\n @open-auto-focus=\"onOpenAutoFocus\"\n @pointer-down-outside=\"onPointerDownOutside\"\n >\n <slot :hide=\"hide\" />\n </PopoverContent>\n </PopoverPortal>\n </PopoverRoot>\n</template>\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"Popover.js","names":["_sfc_main","Popover_vue_vue_type_script_setup_true_lang_default","Popover_default"],"sources":["../../../src/components/Popover/Popover.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, ref, useAttrs, watch } from 'vue'\n\nimport { PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot } from 'reka-ui'\n\nexport interface PopoverProps {\n /** The gap to the anchor, in px; negative overlaps it. */\n offset?: number\n /** Shifts it along the anchor's edge, in px. */\n alignOffset?: number\n closeOnEscape?: boolean\n /** The panel's width, e.g. `20rem`. */\n width?: string\n}\n\n// Root is Reka's renderless PopoverRoot: class and attributes belong on the panel.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<PopoverProps>(), {\n offset: 4,\n alignOffset: 0,\n closeOnEscape: true,\n width: '16rem'\n})\n\nconst emit = defineEmits<{ show: []; hide: [] }>()\n\nconst attrs = useAttrs()\n\nconst open = ref(false)\nconst anchor = ref<HTMLElement>()\n// What was clicked to open it; clicks on it toggle the popover rather than counting as outside.\nconst opener = ref<HTMLElement>()\nconst label = ref<string>()\n// A press outside closes it and leaves focus to what was pressed.\nlet pressedOutside = false\n\n/** Opens below the event's element, or below `target` when given. */\nfunction show(event: Event, target?: HTMLElement) {\n opener.value = event.currentTarget as HTMLElement\n anchor.value = target ?? opener.value\n // A dialog needs a name: an aria-label given to the popover, or else the name of the element it opened from.\n label.value =\n (attrs['aria-label'] as string | undefined) ??\n opener.value?.getAttribute('aria-label') ??\n opener.value?.textContent?.trim()\n pressedOutside = false\n open.value = true\n}\n\nfunction hide() {\n open.value = false\n}\n\nfunction toggle(event: Event, target?: HTMLElement) {\n if (open.value) hide()\n else show(event, target)\n}\n\ndefineExpose({ show, hide, toggle })\n\nfunction isOnAnchor(target: EventTarget | null) {\n return target instanceof Node && [anchor.value, opener.value].some((el) => el?.contains(target))\n}\n\nfunction onPointerDownOutside(event: CustomEvent<{ originalEvent: PointerEvent }>) {\n if (isOnAnchor(event.detail.originalEvent.target)) event.preventDefault()\n else pressedOutside = true\n}\n\nfunction onEscape(event: KeyboardEvent) {\n if (!props.closeOnEscape) event.preventDefault()\n}\n\n// Otherwise focus left in the panel goes back to the anchor.\nfunction onCloseAutoFocus(event: Event) {\n event.preventDefault()\n const active = document.activeElement\n const inPanel = !active || active === document.body || (event.target as HTMLElement).contains(active)\n if (inPanel && !pressedOutside) anchor.value?.focus()\n}\n\n// Focus goes to an [autofocus] element inside, or else the panel, so Tab moves through it and Escape works at once.\n// The event comes from Reka's positioning wrapper around the panel.\nfunction onOpenAutoFocus(event: Event) {\n event.preventDefault()\n const wrapper = event.target as HTMLElement | null\n const panel = wrapper?.querySelector<HTMLElement>('[role=\"dialog\"]')\n ;(panel?.querySelector<HTMLElement>('[autofocus]') ?? panel)?.focus()\n}\n\n// It closes when the page moves under it: a scrolling ancestor of the anchor, or a resized window.\nfunction onScroll(event: Event) {\n if (event.target instanceof Node && event.target.contains(anchor.value ?? null)) hide()\n}\n\nwatch(open, (isOpen) => {\n if (isOpen) {\n window.addEventListener('scroll', onScroll, true)\n window.addEventListener('resize', hide)\n emit('show')\n } else {\n window.removeEventListener('scroll', onScroll, true)\n window.removeEventListener('resize', hide)\n emit('hide')\n }\n})\n\nonBeforeUnmount(() => {\n window.removeEventListener('scroll', onScroll, true)\n window.removeEventListener('resize', hide)\n})\n</script>\n\n<template>\n <PopoverRoot v-model:open=\"open\">\n <PopoverAnchor :reference=\"anchor\" />\n <PopoverPortal>\n <PopoverContent\n v-bind=\"$attrs\"\n align=\"start\"\n :align-offset=\"alignOffset\"\n :aria-label=\"label\"\n class=\"z-[1100] block max-h-(--reka-popover-content-available-height) origin-center overflow-y-auto rounded-lg outline-hidden border border-sui-line-subtle bg-sui-surface text-sui-ink shadow-xl data-[state=closed]:animate-sui-overlay-out data-[state=open]:animate-sui-overlay-in\"\n :collision-padding=\"8\"\n side=\"bottom\"\n :side-offset=\"offset\"\n :style=\"{ width }\"\n @close-auto-focus=\"onCloseAutoFocus\"\n @escape-key-down=\"onEscape\"\n @focus-outside.prevent\n @open-auto-focus=\"onOpenAutoFocus\"\n @pointer-down-outside=\"onPointerDownOutside\"\n >\n <slot :hide=\"hide\" />\n </PopoverContent>\n </PopoverPortal>\n </PopoverRoot>\n</template>\n"],"mappings":""}
|
|
@@ -65,7 +65,8 @@ var _ = /*@__PURE__*/ n({
|
|
|
65
65
|
align: "start",
|
|
66
66
|
"align-offset": n.alignOffset,
|
|
67
67
|
"aria-label": T.value,
|
|
68
|
-
class: "z-[1100] block origin-center rounded-lg border border-sui-line-subtle bg-sui-surface text-sui-ink shadow-xl data-[state=closed]:animate-sui-overlay-out data-[state=open]:animate-sui-overlay-in",
|
|
68
|
+
class: "z-[1100] block max-h-(--reka-popover-content-available-height) origin-center overflow-y-auto rounded-lg outline-hidden border border-sui-line-subtle bg-sui-surface text-sui-ink shadow-xl data-[state=closed]:animate-sui-overlay-out data-[state=open]:animate-sui-overlay-in",
|
|
69
|
+
"collision-padding": 8,
|
|
69
70
|
side: "bottom",
|
|
70
71
|
"side-offset": n.offset,
|
|
71
72
|
style: { width: n.width },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_mergeProps","_withModifiers","_renderSlot","Popover_vue_vue_type_script_setup_true_lang_default","__expose","__emit","props","__props","emit","attrs","useAttrs","open","ref","anchor","opener","label","pressedOutside","show","event","target","hide","toggle","isOnAnchor","el","onPointerDownOutside","onEscape","onCloseAutoFocus","active","onOpenAutoFocus","panel","onScroll","watch","isOpen","onBeforeUnmount","openBlock","createBlock","unref","PopoverRoot","_cache","$event","withCtx","createVNode","PopoverAnchor","PopoverPortal","PopoverContent","mergeProps","_ctx","withModifiers","renderSlot"],"sources":["../../../src/components/Popover/Popover.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, ref, useAttrs, watch } from 'vue'\n\nimport { PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot } from 'reka-ui'\n\nexport interface PopoverProps {\n /** The gap to the anchor, in px; negative overlaps it. */\n offset?: number\n /** Shifts it along the anchor's edge, in px. */\n alignOffset?: number\n closeOnEscape?: boolean\n /** The panel's width, e.g. `20rem`. */\n width?: string\n}\n\n// Root is Reka's renderless PopoverRoot: class and attributes belong on the panel.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<PopoverProps>(), {\n offset: 4,\n alignOffset: 0,\n closeOnEscape: true,\n width: '16rem'\n})\n\nconst emit = defineEmits<{ show: []; hide: [] }>()\n\nconst attrs = useAttrs()\n\nconst open = ref(false)\nconst anchor = ref<HTMLElement>()\n// What was clicked to open it; clicks on it toggle the popover rather than counting as outside.\nconst opener = ref<HTMLElement>()\nconst label = ref<string>()\n// A press outside closes it and leaves focus to what was pressed.\nlet pressedOutside = false\n\n/** Opens below the event's element, or below `target` when given. */\nfunction show(event: Event, target?: HTMLElement) {\n opener.value = event.currentTarget as HTMLElement\n anchor.value = target ?? opener.value\n // A dialog needs a name: an aria-label given to the popover, or else the name of the element it opened from.\n label.value =\n (attrs['aria-label'] as string | undefined) ??\n opener.value?.getAttribute('aria-label') ??\n opener.value?.textContent?.trim()\n pressedOutside = false\n open.value = true\n}\n\nfunction hide() {\n open.value = false\n}\n\nfunction toggle(event: Event, target?: HTMLElement) {\n if (open.value) hide()\n else show(event, target)\n}\n\ndefineExpose({ show, hide, toggle })\n\nfunction isOnAnchor(target: EventTarget | null) {\n return target instanceof Node && [anchor.value, opener.value].some((el) => el?.contains(target))\n}\n\nfunction onPointerDownOutside(event: CustomEvent<{ originalEvent: PointerEvent }>) {\n if (isOnAnchor(event.detail.originalEvent.target)) event.preventDefault()\n else pressedOutside = true\n}\n\nfunction onEscape(event: KeyboardEvent) {\n if (!props.closeOnEscape) event.preventDefault()\n}\n\n// Otherwise focus left in the panel goes back to the anchor.\nfunction onCloseAutoFocus(event: Event) {\n event.preventDefault()\n const active = document.activeElement\n const inPanel = !active || active === document.body || (event.target as HTMLElement).contains(active)\n if (inPanel && !pressedOutside) anchor.value?.focus()\n}\n\n// Focus goes to an [autofocus] element inside, or else the panel, so Tab moves through it and Escape works at once.\n// The event comes from Reka's positioning wrapper around the panel.\nfunction onOpenAutoFocus(event: Event) {\n event.preventDefault()\n const wrapper = event.target as HTMLElement | null\n const panel = wrapper?.querySelector<HTMLElement>('[role=\"dialog\"]')\n ;(panel?.querySelector<HTMLElement>('[autofocus]') ?? panel)?.focus()\n}\n\n// It closes when the page moves under it: a scrolling ancestor of the anchor, or a resized window.\nfunction onScroll(event: Event) {\n if (event.target instanceof Node && event.target.contains(anchor.value ?? null)) hide()\n}\n\nwatch(open, (isOpen) => {\n if (isOpen) {\n window.addEventListener('scroll', onScroll, true)\n window.addEventListener('resize', hide)\n emit('show')\n } else {\n window.removeEventListener('scroll', onScroll, true)\n window.removeEventListener('resize', hide)\n emit('hide')\n }\n})\n\nonBeforeUnmount(() => {\n window.removeEventListener('scroll', onScroll, true)\n window.removeEventListener('resize', hide)\n})\n</script>\n\n<template>\n <PopoverRoot v-model:open=\"open\">\n <PopoverAnchor :reference=\"anchor\" />\n <PopoverPortal>\n <PopoverContent\n v-bind=\"$attrs\"\n align=\"start\"\n :align-offset=\"alignOffset\"\n :aria-label=\"label\"\n class=\"z-[1100] block origin-center rounded-lg border border-sui-line-subtle bg-sui-surface text-sui-ink shadow-xl data-[state=closed]:animate-sui-overlay-out data-[state=open]:animate-sui-overlay-in\"\n side=\"bottom\"\n :side-offset=\"offset\"\n :style=\"{ width }\"\n @close-auto-focus=\"onCloseAutoFocus\"\n @escape-key-down=\"onEscape\"\n @focus-outside.prevent\n @open-auto-focus=\"onOpenAutoFocus\"\n @pointer-down-outside=\"onPointerDownOutside\"\n >\n <slot :hide=\"hide\" />\n </PopoverContent>\n </PopoverPortal>\n </PopoverRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAkBA,IAAMY,IAAQC,GAORC,IAAOH,GAEPI,IAAQC,EAAS,GAEjBC,IAAOC,EAAI,EAAK,GAChBC,IAASD,EAAiB,GAE1BE,IAASF,EAAiB,GAC1BG,IAAQH,EAAY,GAEtBI,IAAiB;EAGrB,SAASC,EAAK,GAAc,GAAsB;GAShD,AARA,EAAO,QAAQC,EAAM,eACrB,EAAO,QAAQC,KAAUL,EAAO,OAEhC,EAAM,QACHL,EAAM,iBACPK,EAAO,OAAO,aAAa,YAAY,KACvCA,EAAO,OAAO,aAAa,KAAK,GAClC,IAAiB,IACjB,EAAK,QAAQ;EACf;EAEA,SAASM,IAAO;GACd,EAAK,QAAQ;EACf;EAEA,SAASC,EAAO,GAAc,GAAsB;GAClD,AAAIV,EAAK,QAAOS,EAAK,IAChBH,EAAKC,GAAOC,CAAM;EACzB;EAEA,EAAa;GAAE;GAAM;GAAM;EAAO,CAAC;EAEnC,SAASG,EAAW,GAA4B;GAC9C,OAAOH,aAAkB,QAAQ,CAACN,EAAO,OAAOC,EAAO,KAAK,CAAC,CAAC,MAAM,MAAOS,GAAI,SAASJ,CAAM,CAAC;EACjG;EAEA,SAASK,EAAqB,GAAqD;GACjF,AAAIF,EAAWJ,EAAM,OAAO,cAAc,MAAM,IAAGA,EAAM,eAAe,IACnE,IAAiB;EACxB;EAEA,SAASO,EAAS,GAAsB;GACtC,AAAKnB,EAAM,iBAAeY,EAAM,eAAe;EACjD;EAGA,SAASQ,EAAiB,GAAc;GACtC,EAAM,eAAe;GACrB,IAAMC,IAAS,SAAS;GAExB,CADgB,CAACA,KAAUA,MAAW,SAAS,QAAST,EAAM,OAAuB,SAASS,CAAM,MACrF,CAACX,KAAgBH,EAAO,OAAO,MAAM;EACtD;EAIA,SAASe,EAAgB,GAAc;GACrC,EAAM,eAAe;GAErB,IAAMC,IADUX,EAAM,QACC,cAA2B,mBAAiB;GAClE,CAACW,GAAO,cAA2B,aAAa,KAAKA,EAAA,EAAQ,MAAM;EACtE;EAGA,SAASC,EAAS,GAAc;GAC9B,AAAIZ,EAAM,kBAAkB,QAAQA,EAAM,OAAO,SAASL,EAAO,SAAS,IAAI,KAAGO,EAAK;EACxF;E,OAEAW,EAAMpB,IAAO,MAAW;GACtB,AAAIqB,KACF,OAAO,iBAAiB,UAAUF,GAAU,EAAI,GAChD,OAAO,iBAAiB,UAAUV,CAAI,GACtCZ,EAAK,MAAM,MAEX,OAAO,oBAAoB,UAAUsB,GAAU,EAAI,GACnD,OAAO,oBAAoB,UAAUV,CAAI,GACzCZ,EAAK,MAAM;EAEf,CAAC,GAEDyB,QAAsB;GAEpB,AADA,OAAO,oBAAoB,UAAUH,GAAU,EAAI,GACnD,OAAO,oBAAoB,UAAUV,CAAI;EAC3C,CAAC,I,UAICzB,EAAA,GAAAC,
|
|
1
|
+
{"version":3,"file":"Popover.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_mergeProps","_withModifiers","_renderSlot","Popover_vue_vue_type_script_setup_true_lang_default","__expose","__emit","props","__props","emit","attrs","useAttrs","open","ref","anchor","opener","label","pressedOutside","show","event","target","hide","toggle","isOnAnchor","el","onPointerDownOutside","onEscape","onCloseAutoFocus","active","onOpenAutoFocus","panel","onScroll","watch","isOpen","onBeforeUnmount","openBlock","createBlock","unref","PopoverRoot","_cache","$event","withCtx","createVNode","PopoverAnchor","PopoverPortal","PopoverContent","mergeProps","_ctx","withModifiers","renderSlot"],"sources":["../../../src/components/Popover/Popover.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, ref, useAttrs, watch } from 'vue'\n\nimport { PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot } from 'reka-ui'\n\nexport interface PopoverProps {\n /** The gap to the anchor, in px; negative overlaps it. */\n offset?: number\n /** Shifts it along the anchor's edge, in px. */\n alignOffset?: number\n closeOnEscape?: boolean\n /** The panel's width, e.g. `20rem`. */\n width?: string\n}\n\n// Root is Reka's renderless PopoverRoot: class and attributes belong on the panel.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<PopoverProps>(), {\n offset: 4,\n alignOffset: 0,\n closeOnEscape: true,\n width: '16rem'\n})\n\nconst emit = defineEmits<{ show: []; hide: [] }>()\n\nconst attrs = useAttrs()\n\nconst open = ref(false)\nconst anchor = ref<HTMLElement>()\n// What was clicked to open it; clicks on it toggle the popover rather than counting as outside.\nconst opener = ref<HTMLElement>()\nconst label = ref<string>()\n// A press outside closes it and leaves focus to what was pressed.\nlet pressedOutside = false\n\n/** Opens below the event's element, or below `target` when given. */\nfunction show(event: Event, target?: HTMLElement) {\n opener.value = event.currentTarget as HTMLElement\n anchor.value = target ?? opener.value\n // A dialog needs a name: an aria-label given to the popover, or else the name of the element it opened from.\n label.value =\n (attrs['aria-label'] as string | undefined) ??\n opener.value?.getAttribute('aria-label') ??\n opener.value?.textContent?.trim()\n pressedOutside = false\n open.value = true\n}\n\nfunction hide() {\n open.value = false\n}\n\nfunction toggle(event: Event, target?: HTMLElement) {\n if (open.value) hide()\n else show(event, target)\n}\n\ndefineExpose({ show, hide, toggle })\n\nfunction isOnAnchor(target: EventTarget | null) {\n return target instanceof Node && [anchor.value, opener.value].some((el) => el?.contains(target))\n}\n\nfunction onPointerDownOutside(event: CustomEvent<{ originalEvent: PointerEvent }>) {\n if (isOnAnchor(event.detail.originalEvent.target)) event.preventDefault()\n else pressedOutside = true\n}\n\nfunction onEscape(event: KeyboardEvent) {\n if (!props.closeOnEscape) event.preventDefault()\n}\n\n// Otherwise focus left in the panel goes back to the anchor.\nfunction onCloseAutoFocus(event: Event) {\n event.preventDefault()\n const active = document.activeElement\n const inPanel = !active || active === document.body || (event.target as HTMLElement).contains(active)\n if (inPanel && !pressedOutside) anchor.value?.focus()\n}\n\n// Focus goes to an [autofocus] element inside, or else the panel, so Tab moves through it and Escape works at once.\n// The event comes from Reka's positioning wrapper around the panel.\nfunction onOpenAutoFocus(event: Event) {\n event.preventDefault()\n const wrapper = event.target as HTMLElement | null\n const panel = wrapper?.querySelector<HTMLElement>('[role=\"dialog\"]')\n ;(panel?.querySelector<HTMLElement>('[autofocus]') ?? panel)?.focus()\n}\n\n// It closes when the page moves under it: a scrolling ancestor of the anchor, or a resized window.\nfunction onScroll(event: Event) {\n if (event.target instanceof Node && event.target.contains(anchor.value ?? null)) hide()\n}\n\nwatch(open, (isOpen) => {\n if (isOpen) {\n window.addEventListener('scroll', onScroll, true)\n window.addEventListener('resize', hide)\n emit('show')\n } else {\n window.removeEventListener('scroll', onScroll, true)\n window.removeEventListener('resize', hide)\n emit('hide')\n }\n})\n\nonBeforeUnmount(() => {\n window.removeEventListener('scroll', onScroll, true)\n window.removeEventListener('resize', hide)\n})\n</script>\n\n<template>\n <PopoverRoot v-model:open=\"open\">\n <PopoverAnchor :reference=\"anchor\" />\n <PopoverPortal>\n <PopoverContent\n v-bind=\"$attrs\"\n align=\"start\"\n :align-offset=\"alignOffset\"\n :aria-label=\"label\"\n class=\"z-[1100] block max-h-(--reka-popover-content-available-height) origin-center overflow-y-auto rounded-lg outline-hidden border border-sui-line-subtle bg-sui-surface text-sui-ink shadow-xl data-[state=closed]:animate-sui-overlay-out data-[state=open]:animate-sui-overlay-in\"\n :collision-padding=\"8\"\n side=\"bottom\"\n :side-offset=\"offset\"\n :style=\"{ width }\"\n @close-auto-focus=\"onCloseAutoFocus\"\n @escape-key-down=\"onEscape\"\n @focus-outside.prevent\n @open-auto-focus=\"onOpenAutoFocus\"\n @pointer-down-outside=\"onPointerDownOutside\"\n >\n <slot :hide=\"hide\" />\n </PopoverContent>\n </PopoverPortal>\n </PopoverRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAkBA,IAAMY,IAAQC,GAORC,IAAOH,GAEPI,IAAQC,EAAS,GAEjBC,IAAOC,EAAI,EAAK,GAChBC,IAASD,EAAiB,GAE1BE,IAASF,EAAiB,GAC1BG,IAAQH,EAAY,GAEtBI,IAAiB;EAGrB,SAASC,EAAK,GAAc,GAAsB;GAShD,AARA,EAAO,QAAQC,EAAM,eACrB,EAAO,QAAQC,KAAUL,EAAO,OAEhC,EAAM,QACHL,EAAM,iBACPK,EAAO,OAAO,aAAa,YAAY,KACvCA,EAAO,OAAO,aAAa,KAAK,GAClC,IAAiB,IACjB,EAAK,QAAQ;EACf;EAEA,SAASM,IAAO;GACd,EAAK,QAAQ;EACf;EAEA,SAASC,EAAO,GAAc,GAAsB;GAClD,AAAIV,EAAK,QAAOS,EAAK,IAChBH,EAAKC,GAAOC,CAAM;EACzB;EAEA,EAAa;GAAE;GAAM;GAAM;EAAO,CAAC;EAEnC,SAASG,EAAW,GAA4B;GAC9C,OAAOH,aAAkB,QAAQ,CAACN,EAAO,OAAOC,EAAO,KAAK,CAAC,CAAC,MAAM,MAAOS,GAAI,SAASJ,CAAM,CAAC;EACjG;EAEA,SAASK,EAAqB,GAAqD;GACjF,AAAIF,EAAWJ,EAAM,OAAO,cAAc,MAAM,IAAGA,EAAM,eAAe,IACnE,IAAiB;EACxB;EAEA,SAASO,EAAS,GAAsB;GACtC,AAAKnB,EAAM,iBAAeY,EAAM,eAAe;EACjD;EAGA,SAASQ,EAAiB,GAAc;GACtC,EAAM,eAAe;GACrB,IAAMC,IAAS,SAAS;GAExB,CADgB,CAACA,KAAUA,MAAW,SAAS,QAAST,EAAM,OAAuB,SAASS,CAAM,MACrF,CAACX,KAAgBH,EAAO,OAAO,MAAM;EACtD;EAIA,SAASe,EAAgB,GAAc;GACrC,EAAM,eAAe;GAErB,IAAMC,IADUX,EAAM,QACC,cAA2B,mBAAiB;GAClE,CAACW,GAAO,cAA2B,aAAa,KAAKA,EAAA,EAAQ,MAAM;EACtE;EAGA,SAASC,EAAS,GAAc;GAC9B,AAAIZ,EAAM,kBAAkB,QAAQA,EAAM,OAAO,SAASL,EAAO,SAAS,IAAI,KAAGO,EAAK;EACxF;E,OAEAW,EAAMpB,IAAO,MAAW;GACtB,AAAIqB,KACF,OAAO,iBAAiB,UAAUF,GAAU,EAAI,GAChD,OAAO,iBAAiB,UAAUV,CAAI,GACtCZ,EAAK,MAAM,MAEX,OAAO,oBAAoB,UAAUsB,GAAU,EAAI,GACnD,OAAO,oBAAoB,UAAUV,CAAI,GACzCZ,EAAK,MAAM;EAEf,CAAC,GAEDyB,QAAsB;GAEpB,AADA,OAAO,oBAAoB,UAAUH,GAAU,EAAI,GACnD,OAAO,oBAAoB,UAAUV,CAAI;EAC3C,CAAC,I,UAICzB,EAAA,GAAAC,EAsBcC,EAAAwC,CAAA,GAAA;GAtBO,MAAM1B,EAAA;GAAA,iBAAA,AAAA2B,EAAA,QAAA,MAAA,EAAI,QAAAC;;GAC7B,SAAAzC,QAAqC,CAArCC,EAAqCF,EAAA6C,CAAA,GAAA,EAArB,WAAW7B,EAAA,MAAM,GAAA,MAAA,GAAA,CAAA,WAAA,CAAA,GACjCd,EAmBgBF,EAAA8C,CAAA,GAAA,MAAA;IAlBd,SAAA7C,QAiBiB,CAjBjBC,EAiBiBF,EAAA+C,CAAA,GAjBjB5C,EACUN,EAgBO,QAhBD;KACd,OAAM;KACL,gBAAca,EAAA;KACd,cAAYQ,EAAA;KACb,OAAM;KACL,qBAAmB;KACpB,MAAK;KACJ,eAAaR,EAAA;KACb,OAAK,EAAA,OAAIA,EAAA,MAAK;KACI;KAClB,iBAAiBkB;KACjB,gBAAa,AAAAa,EAAA,OAAArC,QAAd,CAAA,GAAsB,CAAA,SAAA,CAAA;KACJ;KACK;;KAEvB,SAAAH,QAAqB,CAArBI,EAAqB4C,EAAA,QAAA,WAAA,EAAR,QAAI,CAAA,C"}
|