Phone view case updated

resources/js/Components/ui/drawer/Drawer.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { useForwardPropsEmits } from "reka-ui";
+import { DrawerRoot } from "vaul-vue";
+
+const props = defineProps({
+  activeSnapPoint: { type: [Number, String, null], required: false },
+  closeThreshold: { type: Number, required: false },
+  shouldScaleBackground: { type: Boolean, required: false, default: true },
+  setBackgroundColorOnScale: { type: Boolean, required: false },
+  scrollLockTimeout: { type: Number, required: false },
+  fixed: { type: Boolean, required: false },
+  dismissible: { type: Boolean, required: false },
+  modal: { type: Boolean, required: false },
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  nested: { type: Boolean, required: false },
+  direction: { type: String, required: false },
+  noBodyStyles: { type: Boolean, required: false },
+  handleOnly: { type: Boolean, required: false },
+  preventScrollRestoration: { type: Boolean, required: false },
+  snapPoints: { type: Array, required: false },
+  fadeFromIndex: { type: null, required: false },
+});
+
+const emits = defineEmits([
+  "drag",
+  "release",
+  "close",
+  "update:open",
+  "update:activeSnapPoint",
+  "animationEnd",
+]);
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DrawerRoot v-bind="forwarded">
+    <slot />
+  </DrawerRoot>
+</template>

resources/js/Components/ui/drawer/DrawerContent.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { useForwardPropsEmits } from "reka-ui";
+import { DrawerContent, DrawerPortal } from "vaul-vue";
+import { cn } from "@/lib/utils";
+import DrawerOverlay from "./DrawerOverlay.vue";
+
+const props = defineProps({
+  forceMount: { type: Boolean, required: false },
+  disableOutsidePointerEvents: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+const emits = defineEmits([
+  "escapeKeyDown",
+  "pointerDownOutside",
+  "focusOutside",
+  "interactOutside",
+  "openAutoFocus",
+  "closeAutoFocus",
+]);
+
+const delegatedProps = reactiveOmit(props, "class");
+const forwardedProps = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerContent
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+          props.class,
+        )
+      "
+    >
+      <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      <slot />
+    </DrawerContent>
+  </DrawerPortal>
+</template>

resources/js/Components/ui/drawer/DrawerDescription.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { DrawerDescription } from "vaul-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <DrawerDescription
+    v-bind="delegatedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </DrawerDescription>
+</template>

resources/js/Components/ui/drawer/DrawerFooter.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <div :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)">
+    <slot />
+  </div>
+</template>

resources/js/Components/ui/drawer/DrawerHeader.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <div :class="cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)">
+    <slot />
+  </div>
+</template>

resources/js/Components/ui/drawer/DrawerOverlay.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { DrawerOverlay } from "vaul-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  forceMount: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <DrawerOverlay
+    v-bind="delegatedProps"
+    :class="cn('fixed inset-0 z-50 bg-black/80', props.class)"
+  />
+</template>

resources/js/Components/ui/drawer/DrawerTitle.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { DrawerTitle } from "vaul-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <DrawerTitle
+    v-bind="delegatedProps"
+    :class="
+      cn('text-lg font-semibold leading-none tracking-tight', props.class)
+    "
+  >
+    <slot />
+  </DrawerTitle>
+</template>

resources/js/Components/ui/drawer/index.js

@@ -0,0 +1,8 @@
+export { default as Drawer } from "./Drawer.vue";
+export { default as DrawerContent } from "./DrawerContent.vue";
+export { default as DrawerDescription } from "./DrawerDescription.vue";
+export { default as DrawerFooter } from "./DrawerFooter.vue";
+export { default as DrawerHeader } from "./DrawerHeader.vue";
+export { default as DrawerOverlay } from "./DrawerOverlay.vue";
+export { default as DrawerTitle } from "./DrawerTitle.vue";
+export { DrawerClose, DrawerPortal, DrawerTrigger } from "vaul-vue";