1,383rd Commit

src/layouts/Center.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex justify-center items-center min-h-screen">
+  <div class="flex justify-center items-center min-h-100dvh">
     <slot></slot>
   </div>
 </template>

src/routes/(backstage)/(library)/navigation/drawers/+page.vue

@@ -37,32 +37,32 @@ const flux = reactive({
     <h2 class="text-3xl font-bold my-4 pt-6">Placement</h2>
 
     <XCard>
-      <div class="space-y-4">
+      <div class="flex flex-col gap-4">
         <XRadioGroup v-model:value="flux.placement2" :options="flux.placementOptions2" />
         <div><XButton @click="flux.drawer2 = true">Open</XButton></div>
-
-        <XDrawer v-model="flux.drawer2" :placement="flux.placement2" />
       </div>
+
+      <XDrawer v-model="flux.drawer2" :placement="flux.placement2" />
     </XCard>
   </section>
 
   <section class="my-8">
     <h2 class="text-3xl font-bold my-4 pt-6">Size</h2>
 
     <XCard>
-      <div class="space-y-4">
+      <div class="flex flex-col gap-4">
         <XRadioGroup v-model:value="flux.placement3" :options="flux.placementOptions3" />
         <div><XButton @click="flux.drawer3 = true">Open</XButton></div>
-
-        <XDrawer
-          v-model="flux.drawer3"
-          :placement="flux.placement3"
-          :class="{
-            '!w-80': ['left', 'right'].includes(flux.placement3),
-            '!h-80': ['top', 'bottom'].includes(flux.placement3),
-          }"
-        />
       </div>
+
+      <XDrawer
+        v-model="flux.drawer3"
+        :placement="flux.placement3"
+        :class="{
+          '!w-80': ['left', 'right'].includes(flux.placement3),
+          '!h-80': ['top', 'bottom'].includes(flux.placement3),
+        }"
+      />
     </XCard>
   </section>
 

ui/src/components/drawer/Drawer.vue

@@ -1,27 +1,23 @@
 <script lang="ts" setup>
 import { watch, onUnmounted } from 'vue';
 
-const props = withDefaults(
+const defaultModel = defineModel<boolean>({ default: false });
+
+withDefaults(
   defineProps<{
-    modelValue?: boolean;
     placement?: 'top' | 'right' | 'bottom' | 'left';
   }>(),
   {
-    modelValue: false,
     placement: 'left',
   },
 );
 
-const emit = defineEmits<{
-  (evt: 'update:modelValue', val: boolean): void;
-}>();
-
 const close = () => {
-  emit('update:modelValue', !props.modelValue);
+  defaultModel.value = false;
 };
 
 watch(
-  () => props.modelValue,
+  () => defaultModel.value,
   (val) => {
     document.body.style.overflow = val ? 'hidden' : 'auto';
   },
@@ -38,12 +34,12 @@ onUnmounted(() => {
     v-bind="$attrs"
     class="Drawer"
     :class="{
-      'w-64 h-screen top-0': placement === 'right' || placement === 'left',
+      'top-0 w-64 h-100dvh': placement === 'right' || placement === 'left',
       'left-0': placement === 'left',
       '-translate-x-full': placement === 'left' && !modelValue,
       'right-0': placement === 'right',
       'translate-x-full': placement === 'right' && !modelValue,
-      'w-full h-64 left-0': placement === 'top' || placement === 'bottom',
+      'left-0 w-full h-64': placement === 'top' || placement === 'bottom',
       'top-0': placement === 'top',
       '-translate-y-full': placement === 'top' && !modelValue,
       'bottom-0': placement === 'bottom',
@@ -53,13 +49,13 @@ onUnmounted(() => {
     <slot></slot>
   </div>
 
-  <div v-if="modelValue" class="fixed z-101 inset-0" aria-hidden="true" @click="close">
-    <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+  <div v-if="modelValue" class="fixed inset-0 z-101" aria-hidden="true" @click="close">
+    <div class="absolute inset-0 bg-gray-500/75"></div>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .Drawer {
-  @apply fixed z-102 py-4 overflow-y-auto bg-white dark:bg-slate-900 transition-transform;
+  @apply overflow-y-auto fixed z-102 py-4 bg-white dark:bg-slate-900 transition-transform;
 }
 </style>