basic tempate of web

2026-06-19 23:55:39 -07:00
parent cef6b487cd
commit 118472945f
172 changed files with 15878 additions and 0 deletions
@@ -0,0 +1,83 @@
+<template>
+  <v-dialog
+    v-model="internalDialog"
+    :max-width="mobile ? undefined : maxWidth"
+    :fullscreen="mobile"
+    :persistent="persistent"
+    scrollable
+  >
+    <HeaderActionsCard>
+      <template #header>
+        <div
+          class="d-flex align-start ga-2 w-100"
+          :class="{ 'pl-4': mobile, 'pt-2': mobile }"
+          style="white-space: normal"
+        >
+          <slot name="title">
+            <h3
+              class="text-h5 py-2 flex-grow-1 text-break"
+              style="min-width: 0; overflow-wrap: anywhere; white-space: normal"
+            >
+              <v-icon
+                v-if="titleIcon"
+                class="mr-2"
+                >{{ titleIcon }}</v-icon
+              >
+              {{ title }}
+            </h3>
+          </slot>
+          <v-btn
+            v-if="!hideClose"
+            icon="mdi-close"
+            :variant="mobile ? 'tonal' : 'text'"
+            density="comfortable"
+            class="flex-shrink-0"
+            @click="close"
+          />
+        </div>
+      </template>
+
+      <slot />
+    </HeaderActionsCard>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+import { useDisplay } from "vuetify"
+
+import HeaderActionsCard from "@/components/shared/cards/HeaderActionsCard.vue"
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    title?: string
+    titleIcon?: string
+    maxWidth?: number | string
+    persistent?: boolean
+    hideClose?: boolean
+  }>(),
+  {
+    title: "",
+    titleIcon: "",
+    maxWidth: 700,
+    persistent: false,
+    hideClose: false,
+  }
+)
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean]
+}>()
+
+const { mobile } = useDisplay()
+
+const internalDialog = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+})
+
+function close() {
+  internalDialog.value = false
+}
+</script>