first commit

resources/js/views/demos/components/dialog/DemoDialogFullscreen.vue

@@ -0,0 +1,126 @@
+<script setup>
+const isDialogVisible = ref(false)
+</script>
+
+<template>
+  <VDialog
+    v-model="isDialogVisible"
+    fullscreen
+    :scrim="false"
+    transition="dialog-bottom-transition"
+  >
+    <!-- Dialog Activator -->
+    <template #activator="{ props }">
+      <VBtn v-bind="props">
+        Open Dialog
+      </VBtn>
+    </template>
+
+    <!-- Dialog Content -->
+    <VCard>
+      <!-- Toolbar -->
+      <div>
+        <VToolbar color="primary">
+          <VBtn
+            icon
+            variant="plain"
+            @click="isDialogVisible = false"
+          >
+            <VIcon
+              color="white"
+              icon="ri-close-line"
+            />
+          </VBtn>
+
+          <VToolbarTitle>Settings</VToolbarTitle>
+
+          <VSpacer />
+
+          <VToolbarItems>
+            <VBtn
+              variant="text"
+              @click="isDialogVisible = false"
+            >
+              Save
+            </VBtn>
+          </VToolbarItems>
+        </VToolbar>
+      </div>
+
+      <!-- List -->
+      <VList lines="two">
+        <VListSubheader>User Controls</VListSubheader>
+        <VListItem
+          title="Content filtering"
+          subtitle="Set the content filtering level to restrict apps that can be downloaded"
+        />
+        <VListItem
+          title="Password"
+          subtitle="Require password for purchase or use password to restrict purchase"
+        />
+      </VList>
+
+      <VDivider />
+
+      <!-- List -->
+      <VList
+        lines="two"
+        select-strategy="classic"
+      >
+        <VListSubheader>General</VListSubheader>
+
+        <VListItem
+          title="Notifications"
+          subtitle="Notify me about updates to apps or games that I downloaded"
+          value="Notifications"
+        >
+          <template #prepend="{ isActive }">
+            <VListItemAction start>
+              <VCheckbox
+                :model-value="isActive"
+                color="primary"
+              />
+            </VListItemAction>
+          </template>
+        </VListItem>
+
+        <VListItem
+          title="Sound"
+          subtitle="Auto-update apps at any time. Data charges may apply"
+          value="Sound"
+        >
+          <template #prepend="{ isActive }">
+            <VListItemAction start>
+              <VCheckbox
+                :model-value="isActive"
+                color="primary"
+              />
+            </VListItemAction>
+          </template>
+        </VListItem>
+
+        <VListItem
+          title="Auto-add widgets"
+          subtitle="Automatically add home screen widgets"
+          value="Auto-add widgets"
+        >
+          <template #prepend="{ isActive }">
+            <VListItemAction start>
+              <VCheckbox
+                :model-value="isActive"
+                color="primary"
+              />
+            </VListItemAction>
+          </template>
+        </VListItem>
+      </VList>
+    </VCard>
+  </VDialog>
+</template>
+
+<style lang="scss">
+.dialog-bottom-transition-enter-active,
+.dialog-bottom-transition-leave-active {
+  transition: transform 0.2s ease-in-out;
+}
+</style>