@xy-planning-network/trees 0.6.0 → 0.6.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/dist/trees.es.js +82 -72
- package/dist/trees.umd.js +6 -6
- package/package.json +1 -1
- package/src/lib-components/indicators/XYSpinner.vue +1 -1
- package/src/lib-components/layout/SidebarLayout.vue +1 -1
- package/src/lib-components/overlays/ContentModal.vue +1 -1
- package/src/lib-components/overlays/Flash.vue +49 -42
- package/src/lib-components/overlays/Modal.vue +1 -1
- package/src/lib-components/overlays/Slideover.vue +1 -1
- package/src/lib-components/overlays/Spinner.vue +27 -24
package/package.json
CHANGED
|
@@ -5,6 +5,7 @@ import {
|
|
|
5
5
|
loadWindowFlashes,
|
|
6
6
|
} from "@/composables/useFlashes"
|
|
7
7
|
import { onMounted } from "vue"
|
|
8
|
+
import { Portal } from "@headlessui/vue"
|
|
8
9
|
|
|
9
10
|
const { flasher, flashes } = useAppFlashes()
|
|
10
11
|
|
|
@@ -28,56 +29,62 @@ onMounted(() => {
|
|
|
28
29
|
})
|
|
29
30
|
</script>
|
|
30
31
|
<template>
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
<transition-group
|
|
35
|
-
tag="div"
|
|
36
|
-
class="max-w-sm space-y-2 w-full"
|
|
37
|
-
enter-active-class="ease-out duration-300"
|
|
38
|
-
enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
|
|
39
|
-
enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
|
|
40
|
-
leave-active-class="ease-in duration-100"
|
|
41
|
-
leave-from-class="opacity-100"
|
|
42
|
-
leave-to-class="opacity-0"
|
|
32
|
+
<Portal>
|
|
33
|
+
<div
|
|
34
|
+
class="fixed inset-0 flex flex-col items-end justify-end px-4 py-6 pointer-events-none sm:p-6 z-[45]"
|
|
43
35
|
>
|
|
44
|
-
<
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
class="
|
|
48
|
-
|
|
36
|
+
<transition-group
|
|
37
|
+
tag="div"
|
|
38
|
+
class="max-w-sm space-y-2 w-full"
|
|
39
|
+
enter-active-class="ease-out duration-300"
|
|
40
|
+
enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
|
|
41
|
+
enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
|
|
42
|
+
leave-active-class="ease-in duration-100"
|
|
43
|
+
leave-from-class="opacity-100"
|
|
44
|
+
leave-to-class="opacity-0"
|
|
49
45
|
>
|
|
50
46
|
<div
|
|
51
|
-
|
|
47
|
+
v-for="[id, flash] in flashes"
|
|
48
|
+
:key="flash.message"
|
|
49
|
+
class="bg-white shadow-lg rounded-lg pointer-events-auto border-t-4 transform z-10"
|
|
50
|
+
:class="[getFlashClass(flash.type)]"
|
|
52
51
|
>
|
|
53
|
-
<div
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
52
|
+
<div
|
|
53
|
+
class="rounded-lg ring-1 ring-black ring-opacity-5 overflow-hidden"
|
|
54
|
+
>
|
|
55
|
+
<div class="p-4">
|
|
56
|
+
<div class="flex items-center">
|
|
57
|
+
<div class="w-0 flex-1 flex justify-between">
|
|
58
|
+
<p
|
|
59
|
+
class="w-0 flex-1 text-sm leading-5 font-medium text-gray-900"
|
|
60
|
+
v-html="flash.message"
|
|
61
|
+
></p>
|
|
62
|
+
</div>
|
|
63
|
+
<div class="ml-4 shrink-0 flex">
|
|
64
|
+
<button
|
|
65
|
+
@click="flasher.remove(id)"
|
|
66
|
+
class="inline-flex text-gray-400 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150"
|
|
67
|
+
>
|
|
68
|
+
<svg
|
|
69
|
+
class="h-5 w-5"
|
|
70
|
+
viewBox="0 0 20 20"
|
|
71
|
+
fill="currentColor"
|
|
72
|
+
>
|
|
73
|
+
<path
|
|
74
|
+
fill-rule="evenodd"
|
|
75
|
+
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
76
|
+
clip-rule="evenodd"
|
|
77
|
+
/>
|
|
78
|
+
</svg>
|
|
79
|
+
</button>
|
|
80
|
+
</div>
|
|
74
81
|
</div>
|
|
75
82
|
</div>
|
|
76
83
|
</div>
|
|
77
84
|
</div>
|
|
78
|
-
</
|
|
79
|
-
</
|
|
80
|
-
</
|
|
85
|
+
</transition-group>
|
|
86
|
+
</div>
|
|
87
|
+
</Portal>
|
|
81
88
|
</template>
|
|
82
89
|
|
|
83
90
|
<style>
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
+
import { Portal } from "@headlessui/vue"
|
|
2
3
|
import XYSpinner from "../indicators/XYSpinner.vue"
|
|
3
4
|
import { useAppSpinnerDisplay } from "@/composables/useSpinner"
|
|
4
5
|
|
|
@@ -22,30 +23,32 @@ const fadeOut = (): void => {
|
|
|
22
23
|
}
|
|
23
24
|
</script>
|
|
24
25
|
<template>
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
<div
|
|
43
|
-
class="container font-medium text-lg leading-snug text-center transition-opacity"
|
|
44
|
-
v-show="showMsg"
|
|
26
|
+
<Portal>
|
|
27
|
+
<div
|
|
28
|
+
class="fixed top-0 left-0 flex flex-col items-center justify-center w-full h-full cursor-not-allowed z-40 bg-gray-50 bg-opacity-50"
|
|
29
|
+
v-if="loading"
|
|
30
|
+
>
|
|
31
|
+
<XYSpinner class="w-32 h-32" />
|
|
32
|
+
<div class="mt-2" v-show="messages">
|
|
33
|
+
<transition
|
|
34
|
+
appear
|
|
35
|
+
enter-active-class="ease-out duration-1000"
|
|
36
|
+
enter-from-class="opacity-0"
|
|
37
|
+
enter-to-class="opacity-100"
|
|
38
|
+
leave-active-class="ease-in duration-500"
|
|
39
|
+
leave-from-class="opacity-100"
|
|
40
|
+
leave-to-class="opacity-0"
|
|
41
|
+
@after-enter="fadeOut"
|
|
42
|
+
@after-leave="fadeIn"
|
|
45
43
|
>
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
44
|
+
<div
|
|
45
|
+
class="container font-medium text-lg leading-snug text-center transition-opacity"
|
|
46
|
+
v-show="showMsg"
|
|
47
|
+
>
|
|
48
|
+
{{ msg }}
|
|
49
|
+
</div>
|
|
50
|
+
</transition>
|
|
51
|
+
</div>
|
|
49
52
|
</div>
|
|
50
|
-
</
|
|
53
|
+
</Portal>
|
|
51
54
|
</template>
|