#16 - Updated context menu's

package.json

@@ -37,6 +37,7 @@
 		"@astrojs/vue": "^3.0.0",
 		"@tauri-apps/api": "^1.5.0",
 		"@vercel/blob": "^0.13.0",
+		"@vueuse/core": "^10.4.1",
 		"astro": "^3.2.2",
 		"flowbite": "^1.8.1",
 		"flowbite-typography": "^1.0.3",

src/components/base/modal.vue

@@ -0,0 +1,53 @@
+<template>
+	<div
+		tabindex="-1"
+		aria-hidden="true"
+		class="fixed left-0 right-0 top-0 z-50 flex h-full max-h-full w-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black bg-opacity-50 p-4 md:inset-0"
+	>
+		<div ref="modal" class="relative max-h-full w-full max-w-lg">
+			<div
+				class="relative rounded-lg bg-white text-gray-900 shadow dark:bg-gray-700 dark:text-white"
+			>
+				<button
+					type="button"
+					class="absolute right-2.5 top-3 ml-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
+					@click="emit('close')"
+				>
+					<svg
+						class="h-3 w-3"
+						aria-hidden="true"
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 14 14"
+					>
+						<path
+							stroke="currentColor"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
+						/>
+					</svg>
+					<span class="sr-only">Close modal</span>
+				</button>
+				<div class="px-6 py-6 lg:px-8">
+					<slot />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { onClickOutside, onKeyDown } from '@vueuse/core';
+import { ref } from 'vue';
+
+const emit = defineEmits(['close']);
+
+const modal = ref<HTMLElement>();
+onClickOutside(modal, () => emit('close'));
+
+onKeyDown('Escape', () => {
+	emit('close');
+});
+</script>

src/components/base/select.vue

@@ -0,0 +1,50 @@
+<template>
+	<div>
+		<BaseLabel class="mb-2" :for="props.id"><slot name="label" /></BaseLabel>
+		<select
+			:id="id"
+			class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+			:value="modelValue"
+			@input="updateValue"
+			@change="change"
+			:required="props.required"
+		>
+			<slot name="options" />
+		</select>
+		<p v-if="props.errors" class="ml-2 mt-2 text-xs text-red-500">
+			<template v-for="error in props.errors"> {{ error }}<br /> </template>
+		</p>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { type PropType } from 'vue';
+import BaseLabel from './label.vue';
+
+const props = defineProps({
+	id: {
+		type: String,
+		required: true,
+	},
+	modelValue: {
+		type: String,
+		required: true,
+	},
+	errors: {
+		type: Array as PropType<string[] | undefined>,
+	},
+	required: {
+		type: Boolean,
+		default: false,
+	},
+});
+
+// Emits
+const emit = defineEmits(['update:modelValue', 'change']);
+const updateValue = (event: Event) => {
+	emit('update:modelValue', (event.target as HTMLInputElement).value);
+};
+const change = (_event: Event) => {
+	emit('change');
+};
+</script>

src/components/base/toast.vue

@@ -0,0 +1,122 @@
+<template>
+	<div
+		v-if="showToast"
+		class="mb-4 flex w-full max-w-xs items-center rounded-lg bg-white p-4 text-gray-500 shadow dark:bg-gray-800 dark:text-gray-400"
+		role="alert"
+	>
+		<div
+			v-if="props.type === ToastType.Success"
+			class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-500 dark:bg-green-800 dark:text-green-200"
+		>
+			<svg
+				class="h-5 w-5"
+				aria-hidden="true"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="currentColor"
+				viewBox="0 0 20 20"
+			>
+				<path
+					d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"
+				/>
+			</svg>
+			<span class="sr-only">Check icon</span>
+		</div>
+		<div
+			v-else-if="props.type === ToastType.Danger"
+			class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100 text-red-500 dark:bg-red-800 dark:text-red-200"
+		>
+			<svg
+				class="h-5 w-5"
+				aria-hidden="true"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="currentColor"
+				viewBox="0 0 20 20"
+			>
+				<path
+					d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z"
+				/>
+			</svg>
+			<span class="sr-only">Error icon</span>
+		</div>
+		<div
+			v-else-if="props.type === ToastType.Warning"
+			class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-orange-100 text-orange-500 dark:bg-orange-700 dark:text-orange-200"
+		>
+			<svg
+				class="h-5 w-5"
+				aria-hidden="true"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="currentColor"
+				viewBox="0 0 20 20"
+			>
+				<path
+					d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"
+				/>
+			</svg>
+			<span class="sr-only">Warning icon</span>
+		</div>
+		<div
+			v-else-if="props.type === ToastType.Info"
+			class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-blue-100 text-blue-500 dark:bg-blue-700 dark:text-blue-200"
+		>
+			<svg
+				class="h-5 w-5"
+				aria-hidden="true"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="currentColor"
+				viewBox="0 0 20 20"
+			>
+				<path
+					d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"
+				/>
+			</svg>
+			<span class="sr-only">Info icon</span>
+		</div>
+		<div class="ml-3 text-sm font-normal"><slot /></div>
+		<button
+			type="button"
+			class="-mx-1.5 -my-1.5 ml-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-white p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white"
+			aria-label="Close"
+			@click="showToast = false"
+		>
+			<span class="sr-only">Close</span>
+			<svg
+				class="h-3 w-3"
+				aria-hidden="true"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 14 14"
+			>
+				<path
+					stroke="currentColor"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
+				/>
+			</svg>
+		</button>
+	</div>
+</template>
+
+<script lang="ts">
+export enum ToastType {
+	Info = 'info',
+	Danger = 'danger',
+	Success = 'success',
+	Warning = 'warning',
+}
+</script>
+
+<script setup lang="ts">
+import { ref, type PropType } from 'vue';
+
+const showToast = ref(true);
+
+const props = defineProps({
+	type: {
+		type: String as PropType<ToastType>,
+		required: true,
+	},
+});
+</script>