first commit

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

@@ -0,0 +1,132 @@
+<script setup>
+const countryList = [
+  {
+    label: 'Bahamas, The',
+    value: 'bahamas',
+  },
+  {
+    label: 'Bahrain',
+    value: 'bahrain',
+  },
+  {
+    label: 'Bangladesh',
+    value: 'bangladesh',
+  },
+  {
+    label: 'Barbados',
+    value: 'barbados',
+  },
+  {
+    label: 'Belarus',
+    value: 'belarus',
+  },
+  {
+    label: 'Belgium',
+    value: 'belgium',
+  },
+  {
+    label: 'Belize',
+    value: 'belize',
+  },
+  {
+    label: 'Benin',
+    value: 'benin',
+  },
+  {
+    label: 'Bhutan',
+    value: 'bhutan',
+  },
+  {
+    label: 'Bolivia',
+    value: 'bolivia',
+  },
+  {
+    label: 'Bosnia and Herzegovina',
+    value: 'bosnia',
+  },
+  {
+    label: 'Botswana',
+    value: 'botswana',
+  },
+  {
+    label: 'Brazil',
+    value: 'brazil',
+  },
+  {
+    label: 'Brunei',
+    value: 'brunei',
+  },
+  {
+    label: 'Bulgaria',
+    value: 'bulgaria',
+  },
+  {
+    label: 'Burkina Faso',
+    value: 'burkina',
+  },
+]
+
+const selectedCountry = ref('')
+const isDialogVisible = ref(false)
+</script>
+
+<template>
+  <VDialog
+    v-model="isDialogVisible"
+    scrollable
+    max-width="350"
+  >
+    <!-- Dialog Activator -->
+    <template #activator="{ props }">
+      <VBtn v-bind="props">
+        Open Dialog
+      </VBtn>
+    </template>
+
+    <!-- Dialog Content -->
+    <VCard>
+      <DialogCloseBtn
+        variant="text"
+        size="default"
+        @click="isDialogVisible = false"
+      />
+
+      <VCardItem class="pb-3">
+        <VCardTitle>Select Country</VCardTitle>
+      </VCardItem>
+
+      <VDivider />
+      <VCardText style="block-size: 300px;">
+        <VRadioGroup
+          v-model="selectedCountry"
+          :inline="false"
+        >
+          <VRadio
+            v-for="country in countryList"
+            :key="country.label"
+            :label="country.label"
+            :value="country.value"
+            color="primary"
+          />
+        </VRadioGroup>
+      </VCardText>
+
+      <VDivider />
+
+      <VCardText class="pt-5 text-end">
+        <VSpacer />
+        <VBtn
+          variant="outlined"
+          color="secondary"
+          class="me-4"
+          @click="isDialogVisible = false"
+        >
+          Close
+        </VBtn>
+        <VBtn @click="isDialogVisible = false">
+          Save Changes
+        </VBtn>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>