@sparklingopinions/sparkling-ui 0.1.1 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Toast/Toaster.js.map +1 -1
- package/dist/components/Toast/Toaster.vue.d.ts +11 -2
- package/dist/components/Toast/Toaster.vue_vue_type_script_setup_true_lang.js +37 -28
- package/dist/components/Toast/Toaster.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toaster.js","names":["_sfc_main","Toaster_vue_vue_type_script_setup_true_lang_default","Toaster_default"],"sources":["../../../src/components/Toast/Toaster.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ToastProvider, ToastRoot, ToastViewport } from 'reka-ui'\n\nimport { type ToastSeverity, removeToast, toasts } from '../../composables/toast'\nimport ToastMessage from './ToastMessage.vue'\n\nexport interface ToastPreview {\n summary: string\n detail?: string\n severity?: ToastSeverity\n closable?: boolean\n}\n\nexport interface ToasterProps {\n /** The toast region's name for assistive tech; `{hotkey}` is F8, which focuses it. */\n label?: string\n closeLabel?: string\n
|
|
1
|
+
{"version":3,"file":"Toaster.js","names":["_sfc_main","Toaster_vue_vue_type_script_setup_true_lang_default","Toaster_default"],"sources":["../../../src/components/Toast/Toaster.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ToastProvider, ToastRoot, ToastViewport } from 'reka-ui'\n\nimport { type ToastSeverity, removeToast, toasts } from '../../composables/toast'\nimport ToastMessage from './ToastMessage.vue'\n\nexport interface ToastPreview {\n /** Keeps its place as the list changes, so toasts animate in and out like live ones. Defaults to its index. */\n id?: string | number\n summary: string\n detail?: string\n severity?: ToastSeverity\n closable?: boolean\n}\n\nexport interface ToasterProps {\n /** The toast region's name for assistive tech; `{hotkey}` is F8, which focuses it. */\n label?: string\n closeLabel?: string\n /**\n * Toasts drawn in place, for docs, designs and demos, instead of the live ones fixed to the viewport. The list is\n * yours: add and remove items, and handle `close`.\n */\n preview?: ToastPreview[]\n}\n\nwithDefaults(defineProps<ToasterProps>(), {\n label: 'Notifications ({hotkey})',\n closeLabel: 'Close',\n preview: undefined\n})\n\ndefineEmits<{\n /** A preview toast's close button, with its `id` (or index). */\n close: [id: string | number]\n}>()\n</script>\n\n<!-- Mount once near the app root; `toast.info(...)` and friends show here. Swiping is off. -->\n<template>\n <TransitionGroup\n v-if=\"preview\"\n class=\"flex w-full max-w-96 flex-col\"\n enter-active-class=\"animate-sui-toast-in\"\n leave-active-class=\"animate-sui-toast-out overflow-hidden\"\n tag=\"div\"\n >\n <ToastMessage\n v-for=\"(item, index) in preview\"\n :key=\"item.id ?? index\"\n :closable=\"item.closable\"\n :close-label=\"closeLabel\"\n :detail=\"item.detail\"\n :severity=\"item.severity\"\n :summary=\"item.summary\"\n @close=\"$emit('close', item.id ?? index)\"\n />\n </TransitionGroup>\n <ToastProvider v-else :swipe-threshold=\"Number.POSITIVE_INFINITY\">\n <ToastRoot\n v-for=\"item in toasts\"\n :key=\"item.id\"\n as-child\n :duration=\"item.life || Number.POSITIVE_INFINITY\"\n :open=\"item.open\"\n :type=\"item.severity === 'error' ? 'foreground' : 'background'\"\n @update:open=\"(open) => !open && removeToast(item.id)\"\n >\n <ToastMessage\n class=\"pointer-events-auto data-[state=closed]:animate-sui-toast-out data-[state=closed]:overflow-hidden data-[state=open]:animate-sui-toast-in\"\n :closable=\"item.closable\"\n :close-label=\"closeLabel\"\n :detail=\"item.detail\"\n :severity=\"item.severity\"\n :summary=\"item.summary\"\n @close=\"removeToast(item.id)\"\n />\n </ToastRoot>\n <!-- A div, not Reka's default ol: the toasts are divs, so a page can draw one alone. -->\n <ToastViewport\n as=\"div\"\n class=\"pointer-events-none fixed bottom-5 left-1/2 z-[1200] flex w-96 max-w-[calc(100vw-2.5rem)] -translate-x-1/2 flex-col rounded-md outline-hidden\"\n data-sui-toasts\n :label=\"label\"\n />\n </ToastProvider>\n</template>\n"],"mappings":""}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { type ToastSeverity } from '../../composables/toast';
|
|
2
2
|
export interface ToastPreview {
|
|
3
|
+
/** Keeps its place as the list changes, so toasts animate in and out like live ones. Defaults to its index. */
|
|
4
|
+
id?: string | number;
|
|
3
5
|
summary: string;
|
|
4
6
|
detail?: string;
|
|
5
7
|
severity?: ToastSeverity;
|
|
@@ -9,10 +11,17 @@ export interface ToasterProps {
|
|
|
9
11
|
/** The toast region's name for assistive tech; `{hotkey}` is F8, which focuses it. */
|
|
10
12
|
label?: string;
|
|
11
13
|
closeLabel?: string;
|
|
12
|
-
/**
|
|
14
|
+
/**
|
|
15
|
+
* Toasts drawn in place, for docs, designs and demos, instead of the live ones fixed to the viewport. The list is
|
|
16
|
+
* yours: add and remove items, and handle `close`.
|
|
17
|
+
*/
|
|
13
18
|
preview?: ToastPreview[];
|
|
14
19
|
}
|
|
15
|
-
declare const __VLS_export: import("vue").DefineComponent<ToasterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
20
|
+
declare const __VLS_export: import("vue").DefineComponent<ToasterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
21
|
+
close: (id: string | number) => any;
|
|
22
|
+
}, string, import("vue").PublicProps, Readonly<ToasterProps> & Readonly<{
|
|
23
|
+
onClose?: ((id: string | number) => any) | undefined;
|
|
24
|
+
}>, {
|
|
16
25
|
label: string;
|
|
17
26
|
closeLabel: string;
|
|
18
27
|
preview: ToastPreview[];
|
|
@@ -1,52 +1,61 @@
|
|
|
1
1
|
import { removeToast as e, toasts as t } from "../../composables/toast.js";
|
|
2
2
|
import n from "./ToastMessage.js";
|
|
3
|
-
import { Fragment as r,
|
|
4
|
-
import { ToastProvider as
|
|
3
|
+
import { Fragment as r, TransitionGroup as i, createBlock as a, createElementBlock as o, createVNode as s, defineComponent as c, openBlock as l, renderList as u, unref as d, withCtx as f } from "vue";
|
|
4
|
+
import { ToastProvider as p, ToastRoot as m, ToastViewport as h } from "reka-ui";
|
|
5
5
|
//#region src/components/Toast/Toaster.vue?vue&type=script&setup=true&lang.ts
|
|
6
|
-
var
|
|
7
|
-
key: 0,
|
|
8
|
-
class: "flex w-full max-w-96 flex-col"
|
|
9
|
-
}, g = /*@__PURE__*/ s({
|
|
6
|
+
var g = /*@__PURE__*/ c({
|
|
10
7
|
__name: "Toaster",
|
|
11
8
|
props: {
|
|
12
9
|
label: { default: "Notifications ({hotkey})" },
|
|
13
10
|
closeLabel: { default: "Close" },
|
|
14
11
|
preview: { default: void 0 }
|
|
15
12
|
},
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
"
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
},
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
13
|
+
emits: ["close"],
|
|
14
|
+
setup(c) {
|
|
15
|
+
return (g, _) => c.preview ? (l(), a(i, {
|
|
16
|
+
key: 0,
|
|
17
|
+
class: "flex w-full max-w-96 flex-col",
|
|
18
|
+
"enter-active-class": "animate-sui-toast-in",
|
|
19
|
+
"leave-active-class": "animate-sui-toast-out overflow-hidden",
|
|
20
|
+
tag: "div"
|
|
21
|
+
}, {
|
|
22
|
+
default: f(() => [(l(!0), o(r, null, u(c.preview, (e, t) => (l(), a(n, {
|
|
23
|
+
key: e.id ?? t,
|
|
24
|
+
closable: e.closable,
|
|
25
|
+
"close-label": c.closeLabel,
|
|
26
|
+
detail: e.detail,
|
|
27
|
+
severity: e.severity,
|
|
28
|
+
summary: e.summary,
|
|
29
|
+
onClose: (n) => g.$emit("close", e.id ?? t)
|
|
30
|
+
}, null, 8, [
|
|
31
|
+
"closable",
|
|
32
|
+
"close-label",
|
|
33
|
+
"detail",
|
|
34
|
+
"severity",
|
|
35
|
+
"summary",
|
|
36
|
+
"onClose"
|
|
37
|
+
]))), 128))]),
|
|
38
|
+
_: 1
|
|
39
|
+
})) : (l(), a(d(p), {
|
|
31
40
|
key: 1,
|
|
32
41
|
"swipe-threshold": Infinity
|
|
33
42
|
}, {
|
|
34
|
-
default:
|
|
43
|
+
default: f(() => [(l(!0), o(r, null, u(d(t), (t) => (l(), a(d(m), {
|
|
35
44
|
key: t.id,
|
|
36
45
|
"as-child": "",
|
|
37
46
|
duration: t.life || Infinity,
|
|
38
47
|
open: t.open,
|
|
39
48
|
type: t.severity === "error" ? "foreground" : "background",
|
|
40
|
-
"onUpdate:open": (n) => !n &&
|
|
49
|
+
"onUpdate:open": (n) => !n && d(e)(t.id)
|
|
41
50
|
}, {
|
|
42
|
-
default:
|
|
51
|
+
default: f(() => [s(n, {
|
|
43
52
|
class: "pointer-events-auto data-[state=closed]:animate-sui-toast-out data-[state=closed]:overflow-hidden data-[state=open]:animate-sui-toast-in",
|
|
44
53
|
closable: t.closable,
|
|
45
|
-
"close-label":
|
|
54
|
+
"close-label": c.closeLabel,
|
|
46
55
|
detail: t.detail,
|
|
47
56
|
severity: t.severity,
|
|
48
57
|
summary: t.summary,
|
|
49
|
-
onClose: (n) =>
|
|
58
|
+
onClose: (n) => d(e)(t.id)
|
|
50
59
|
}, null, 8, [
|
|
51
60
|
"closable",
|
|
52
61
|
"close-label",
|
|
@@ -61,11 +70,11 @@ var h = {
|
|
|
61
70
|
"open",
|
|
62
71
|
"type",
|
|
63
72
|
"onUpdate:open"
|
|
64
|
-
]))), 128)),
|
|
73
|
+
]))), 128)), s(d(h), {
|
|
65
74
|
as: "div",
|
|
66
75
|
class: "pointer-events-none fixed bottom-5 left-1/2 z-[1200] flex w-96 max-w-[calc(100vw-2.5rem)] -translate-x-1/2 flex-col rounded-md outline-hidden",
|
|
67
76
|
"data-sui-toasts": "",
|
|
68
|
-
label:
|
|
77
|
+
label: c.label
|
|
69
78
|
}, null, 8, ["label"])]),
|
|
70
79
|
_: 1
|
|
71
80
|
}, 8, ["swipe-threshold"]));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toaster.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","
|
|
1
|
+
{"version":3,"file":"Toaster.vue_vue_type_script_setup_true_lang.js","names":["$emit","_openBlock","_createBlock","_TransitionGroup","_withCtx","_createElementBlock","_Fragment","_renderList","ToastMessage","_unref","_createVNode","ToastMessage_default","Toaster_vue_vue_type_script_setup_true_lang_default","__props","openBlock","createBlock","TransitionGroup","withCtx","createElementBlock","Fragment","renderList","item","index","_ctx","unref","ToastProvider","toasts","ToastRoot","open","removeToast","createVNode","ToastViewport"],"sources":["../../../src/components/Toast/Toaster.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ToastProvider, ToastRoot, ToastViewport } from 'reka-ui'\n\nimport { type ToastSeverity, removeToast, toasts } from '../../composables/toast'\nimport ToastMessage from './ToastMessage.vue'\n\nexport interface ToastPreview {\n /** Keeps its place as the list changes, so toasts animate in and out like live ones. Defaults to its index. */\n id?: string | number\n summary: string\n detail?: string\n severity?: ToastSeverity\n closable?: boolean\n}\n\nexport interface ToasterProps {\n /** The toast region's name for assistive tech; `{hotkey}` is F8, which focuses it. */\n label?: string\n closeLabel?: string\n /**\n * Toasts drawn in place, for docs, designs and demos, instead of the live ones fixed to the viewport. The list is\n * yours: add and remove items, and handle `close`.\n */\n preview?: ToastPreview[]\n}\n\nwithDefaults(defineProps<ToasterProps>(), {\n label: 'Notifications ({hotkey})',\n closeLabel: 'Close',\n preview: undefined\n})\n\ndefineEmits<{\n /** A preview toast's close button, with its `id` (or index). */\n close: [id: string | number]\n}>()\n</script>\n\n<!-- Mount once near the app root; `toast.info(...)` and friends show here. Swiping is off. -->\n<template>\n <TransitionGroup\n v-if=\"preview\"\n class=\"flex w-full max-w-96 flex-col\"\n enter-active-class=\"animate-sui-toast-in\"\n leave-active-class=\"animate-sui-toast-out overflow-hidden\"\n tag=\"div\"\n >\n <ToastMessage\n v-for=\"(item, index) in preview\"\n :key=\"item.id ?? index\"\n :closable=\"item.closable\"\n :close-label=\"closeLabel\"\n :detail=\"item.detail\"\n :severity=\"item.severity\"\n :summary=\"item.summary\"\n @close=\"$emit('close', item.id ?? index)\"\n />\n </TransitionGroup>\n <ToastProvider v-else :swipe-threshold=\"Number.POSITIVE_INFINITY\">\n <ToastRoot\n v-for=\"item in toasts\"\n :key=\"item.id\"\n as-child\n :duration=\"item.life || Number.POSITIVE_INFINITY\"\n :open=\"item.open\"\n :type=\"item.severity === 'error' ? 'foreground' : 'background'\"\n @update:open=\"(open) => !open && removeToast(item.id)\"\n >\n <ToastMessage\n class=\"pointer-events-auto data-[state=closed]:animate-sui-toast-out data-[state=closed]:overflow-hidden data-[state=open]:animate-sui-toast-in\"\n :closable=\"item.closable\"\n :close-label=\"closeLabel\"\n :detail=\"item.detail\"\n :severity=\"item.severity\"\n :summary=\"item.summary\"\n @close=\"removeToast(item.id)\"\n />\n </ToastRoot>\n <!-- A div, not Reka's default ol: the toasts are divs, so a page can draw one alone. -->\n <ToastViewport\n as=\"div\"\n class=\"pointer-events-none fixed bottom-5 left-1/2 z-[1200] flex w-96 max-w-[calc(100vw-2.5rem)] -translate-x-1/2 flex-col rounded-md outline-hidden\"\n data-sui-toasts\n :label=\"label\"\n />\n </ToastProvider>\n</template>\n"],"mappings":";;;;;;;;;;;;;;E,iBAyCUa,EAAA,WADRZ,EAAA,GAAAC,EAiBkBC,GAAA;;GAfhB,OAAM;GACN,sBAAmB;GACnB,sBAAmB;GACnB,KAAI;;GAGF,SAAAC,QAAgC,EADlCH,EAAA,EAAA,GAAAI,EASEC,GAAA,MAAAC,EARwBM,EAAA,UAAhB,GAAM,OADhBZ,EAAA,GAAAC,EASEM,GAAA;IAPC,KAAKa,EAAK,MAAMC;IAChB,UAAUD,EAAK;IACf,eAAaR,EAAA;IACb,QAAQQ,EAAK;IACb,UAAUA,EAAK;IACf,SAASA,EAAK;IACd,UAAK,MAAErB,EAAAA,MAAK,SAAUqB,EAAK,MAAMC,CAAK;;;;;;;;;;E,OAG3CrB,EAAA,GAAAC,EA2BgBO,EAAAgB,CAAA,GAAA;;GA3BO,mBAAiB;;GAEpC,SAAArB,QAAsB,EADxBH,EAAA,EAAA,GAAAI,EAkBYC,GAAA,MAAAC,EAjBKE,EAAAiB,CAAA,IAAR,OADTzB,EAAA,GAAAC,EAkBYO,EAAAkB,CAAA,GAAA;IAhBT,KAAKN,EAAK;IACX,YAAA;IACC,UAAUA,EAAK,QAAQ;IACvB,MAAMA,EAAK;IACX,MAAMA,EAAK,aAAQ,UAAA,eAAA;IACnB,kBAAc,MAAI,CAAMO,KAAQnB,EAAAoB,CAAA,CAAW,CAACR,EAAK,EAAE;;IAEpD,SAAAjB,QAQE,CARFM,EAQEF,GAAA;KAPA,OAAM;KACL,UAAUa,EAAK;KACf,eAAaR,EAAA;KACb,QAAQQ,EAAK;KACb,UAAUA,EAAK;KACf,SAASA,EAAK;KACd,UAAK,MAAEZ,EAAAoB,CAAA,CAAW,CAACR,EAAK,EAAE;;;;;;;;;;;;;;;G,aAI/BX,EAKED,EAAAsB,CAAA,GAAA;IAJA,IAAG;IACH,OAAM;IACN,mBAAA;IACC,OAAOlB,EAAA"}
|