edvoyui-component-library-test-flight 0.0.106 → 0.0.108

package/src/components/modal/EUIModal.vue

@@ -3,16 +3,18 @@
     <Transition name="modal" appear>
       <div
         v-if="isVisible"
-        class="fixed inset-0 z-50 flex flex-col items-center justify-end sm:justify-center"
+        class="fixed z-50 flex flex-col items-center justify-end inset-2 sm:justify-center"
         @click.self="closeModal"
       >
         <div
           class="backdrop fixed inset-0 z-[-1] w-screen h-screen bg-black/50 pointer-events-none overflow-hidden"
         ></div>
         <div
-          class="bg-white shadow-lg max-w-lg w-full max-h-[calc(100svh-3rem)] md:h-auto overflow-hidden relative"
           :class="[
+            'bg-white shadow-lg w-full overflow-hidden relative flex flex-col justify-between',
+            slideClass,
             roundedClass !== '' ? roundedClass : 'rounded-t-3xl md:rounded-2xl',
+            size === 'full' ? 'h-full max-h-svh' : 'max-h-[calc(100svh-3rem)] md:h-auto'
           ]"
         >
           <template v-if="$slots.header">
@@ -55,14 +57,14 @@
           <template v-if="$slots.content">
             <slot name="content"></slot>
           </template>
-          <div v-else class="p-4 border-t border-b border-gray-200">
+          <div v-else class="p-4 border-t border-b border-gray-200 max-h-[calc(100svh-3rem)] flex-1">
             <slot></slot>
           </div>
 
           <template v-if="$slots.footer">
             <slot name="footer"></slot>
           </template>
-          <div v-else class="flex items-center justify-end p-4 space-x-2">
+          <div v-else class="sticky bottom-0 flex items-center justify-end float-none p-4 space-x-2">
             <button
               @click="closeModal"
               class="px-4 py-2 text-base font-semibold tracking-wide text-gray-600 transition-colors duration-75 bg-white rounded-md hover:bg-gray-100"
@@ -83,7 +85,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, onUnmounted, watch } from "vue";
+import {
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  watch,
+  computed,
+  type PropType,
+} from "vue";
 
 export default defineComponent({
   name: "Modal",
@@ -112,9 +121,27 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    size: {
+      type: String as PropType<"xs" | "sm" | "md" | "lg" | "xl" | "full">,
+      default: "sm",
+    },
   },
   emits: ["update:isVisible", "confirm"],
   setup(props, { emit }) {
+    const slideClass = computed(() => {
+      const sizeClass = {
+        full: "max-w-screen",
+        xl: "max-w-screen-lg min-w-[100svw] sm:min-w-[1024px]",
+        lg: "max-w-2xl min-w-[100svw] sm:min-w-[42rem]",
+        md: "max-w-xl min-w-[100svw] sm:min-w-[36rem]",
+        sm: "max-w-lg min-w-[100svw] sm:min-w-[32rem]",
+        xs: "max-w-md min-w-[100svw] sm:min-w-[28rem]",
+      };
+
+      const slideWidth = sizeClass[props.size];
+      return slideWidth;
+    });
+
     // Methods
     const closeModal = () => {
       if (!props.persistent) {
@@ -143,9 +170,10 @@ export default defineComponent({
       window.removeEventListener("keydown", handleKeydown);
     });
     return {
-      closeModal
+      closeModal,
+      slideClass,
     };
-  }
+  },
 });
 </script>
 
@@ -160,7 +188,7 @@ export default defineComponent({
 }
 .modal-enter-to,
 .modal-leave-from {
- @apply opacity-100;
+  @apply opacity-100;
 }
 
 .backdrop {

package/src/components/slideover/EUISlideover.stories.ts

@@ -23,7 +23,7 @@ const meta: Meta<typeof EUISlideover> = {
         },
       },
       size: {
-        control: { type: "select", options: ["xs", "sm", "md", "lg"] },
+        control: { type: "select", options: ["xs", "sm", "md", "lg", "full"] },
         description: "Size of the slideover.",
         defaultValue: "xs",
         table: {