@fy-/fws-vue 0.0.921 → 0.0.923
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.
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { onMounted, onUnmounted } from "vue";
|
|
3
|
+
|
|
4
|
+
import ScaleTransition from "./transitions/ScaleTransition.vue";
|
|
5
|
+
|
|
6
|
+
const props = defineProps<{
|
|
7
|
+
show: boolean;
|
|
8
|
+
handleClickOutside: any;
|
|
9
|
+
preventClickOutside?: boolean;
|
|
10
|
+
coordinates?: {
|
|
11
|
+
left?: string;
|
|
12
|
+
right?: string;
|
|
13
|
+
top?: string;
|
|
14
|
+
bottom?: string;
|
|
15
|
+
};
|
|
16
|
+
position: string[];
|
|
17
|
+
closeDropdown: () => void;
|
|
18
|
+
}>();
|
|
19
|
+
|
|
20
|
+
const handleCloseOnEscape = (event: KeyboardEvent) => {
|
|
21
|
+
if (["Escape", "Esc"].includes(event.key)) {
|
|
22
|
+
props.closeDropdown();
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
onMounted(() => {
|
|
27
|
+
document.addEventListener("keydown", handleCloseOnEscape);
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
onUnmounted(() => {
|
|
31
|
+
document.removeEventListener("keydown", handleCloseOnEscape);
|
|
32
|
+
});
|
|
33
|
+
</script>
|
|
34
|
+
|
|
35
|
+
<template>
|
|
36
|
+
<div>
|
|
37
|
+
<div
|
|
38
|
+
v-if="props.show"
|
|
39
|
+
class="fixed left-0 top-0 z-[50] w-full h-full"
|
|
40
|
+
></div>
|
|
41
|
+
|
|
42
|
+
<ScaleTransition>
|
|
43
|
+
<div
|
|
44
|
+
:class="props.position"
|
|
45
|
+
:style="props.coordinates"
|
|
46
|
+
v-show="props.show"
|
|
47
|
+
v-click-outside="props.handleClickOutside"
|
|
48
|
+
class="absolute z-[100] w-[200px] mt-2 rounded-sm bg-white dark:bg-fv-neutral-900 shadow-lg border border-fv-neutral-100 dark:border-fv-neutral-600 focus:outline-none"
|
|
49
|
+
role="menu"
|
|
50
|
+
aria-orientation="vertical"
|
|
51
|
+
aria-labelledby="menu-button"
|
|
52
|
+
tabindex="-1"
|
|
53
|
+
>
|
|
54
|
+
<div role="none">
|
|
55
|
+
<slot></slot>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</ScaleTransition>
|
|
59
|
+
</div>
|
|
60
|
+
</template>
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { computed } from "vue";
|
|
3
|
+
|
|
4
|
+
const props = defineProps<{
|
|
5
|
+
handleClick?: () => void;
|
|
6
|
+
label?: string;
|
|
7
|
+
color?: string;
|
|
8
|
+
}>();
|
|
9
|
+
|
|
10
|
+
const baseClasses = `w-full px-4 py-3 flex items-center border-b opacity-60
|
|
11
|
+
dark:opacity-70 outline-none text-sm border-fv-neutral-200 dark:border-fv-neutral-600
|
|
12
|
+
transition-all duration-200`;
|
|
13
|
+
|
|
14
|
+
const colorClasses = computed(() => {
|
|
15
|
+
if (props.color === "danger") {
|
|
16
|
+
return "text-red-500 dark:hover:text-red-50 hover:bg-red-50 active:bg-red-100 dark:hover:bg-red-900";
|
|
17
|
+
} else {
|
|
18
|
+
return `text-black dark:text-white active:bg-fv-neutral-100 dark:hover:bg-fv-neutral-600
|
|
19
|
+
dark:focus:bg-fv-neutral-600 hover:bg-fv-neutral-50`;
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
const classes = computed(() => `${baseClasses} ${colorClasses.value}`);
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<template>
|
|
27
|
+
<button
|
|
28
|
+
:aria-label="props.label"
|
|
29
|
+
@click.prevent="props.handleClick"
|
|
30
|
+
:class="classes"
|
|
31
|
+
role="menuitem"
|
|
32
|
+
>
|
|
33
|
+
<slot></slot>
|
|
34
|
+
</button>
|
|
35
|
+
</template>
|
|
@@ -140,9 +140,13 @@ const handleKeyboardRelease = (event: KeyboardEvent) => {
|
|
|
140
140
|
isKeyPressed.value = false;
|
|
141
141
|
}
|
|
142
142
|
};
|
|
143
|
+
const closeGallery = () => {
|
|
144
|
+
setModal(false);
|
|
145
|
+
};
|
|
143
146
|
onMounted(() => {
|
|
144
147
|
eventBus.on(`${props.id}GalleryImage`, openGalleryImage);
|
|
145
148
|
eventBus.on(`${props.id}Gallery`, openGalleryImage);
|
|
149
|
+
eventBus.on(`${props.id}GalleryClose`, closeGallery);
|
|
146
150
|
if (window !== undefined && !import.meta.env.SSR) {
|
|
147
151
|
window.addEventListener("keydown", handleKeyboardInput);
|
|
148
152
|
window.addEventListener("keyup", handleKeyboardRelease);
|
|
@@ -151,6 +155,7 @@ onMounted(() => {
|
|
|
151
155
|
onUnmounted(() => {
|
|
152
156
|
eventBus.off(`${props.id}Gallery`, openGalleryImage);
|
|
153
157
|
eventBus.off(`${props.id}GalleryImage`, openGalleryImage);
|
|
158
|
+
eventBus.off(`${props.id}GalleryClose`, closeGallery);
|
|
154
159
|
if (window !== undefined && !import.meta.env.SSR) {
|
|
155
160
|
window.removeEventListener("keydown", handleKeyboardInput);
|
|
156
161
|
window.removeEventListener("keyup", handleKeyboardRelease);
|
package/index.ts
CHANGED
|
@@ -40,7 +40,8 @@ import DefaultLoader from "./components/ui/DefaultLoader.vue";
|
|
|
40
40
|
import DefaultSidebar from "./components/ui/DefaultSidebar.vue";
|
|
41
41
|
import DefaultTagInput from "./components/ui/DefaultTagInput.vue";
|
|
42
42
|
import DefaultGallery from "./components/ui/DefaultGallery.vue";
|
|
43
|
-
|
|
43
|
+
import DefaultDropdown from "./components/ui/DefaultDropdown.vue";
|
|
44
|
+
import DefaultDropdownLink from "./components/ui/DefaultDropdownLink.vue";
|
|
44
45
|
// Components/FWS
|
|
45
46
|
import UserFlow from "./components/fws/UserFlow.vue";
|
|
46
47
|
import DataTable from "./components/fws/DataTable.vue";
|
|
@@ -123,6 +124,8 @@ export {
|
|
|
123
124
|
DefaultSidebar,
|
|
124
125
|
DefaultTagInput,
|
|
125
126
|
DefaultGallery,
|
|
127
|
+
DefaultDropdown,
|
|
128
|
+
DefaultDropdownLink,
|
|
126
129
|
|
|
127
130
|
// FWS
|
|
128
131
|
UserFlow,
|