edvoyui-component-library-test-flight 0.0.147 → 0.0.148

package/dist/modal/EUIModal.vue.d.ts

@@ -1,5 +1,5 @@
 export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/modal/EUIModal.vue?vue&type=script&lang.ts";
-import "/Volumes/work/repos/edvoy-ui-v2/src/components/modal/EUIModal.vue?vue&type=style&index=0&scoped=0a1278e7&lang.scss";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/modal/EUIModal.vue?vue&type=style&index=0&scoped=6e392f5b&lang.scss";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=EUIModal.vue.d.ts.map

package/dist/modal/EUIModal.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EUIModal.vue.d.ts","sourceRoot":"","sources":["../../src/components/modal/EUIModal.vue"],"names":[],"mappings":"AACA,cAAc,2FAA2F,CAAC;AA6F1G,OAAO,oHAAoH,CAAC;;AAE5H,wBAAmH"}
+{"version":3,"file":"EUIModal.vue.d.ts","sourceRoot":"","sources":["../../src/components/modal/EUIModal.vue"],"names":[],"mappings":"AACA,cAAc,2FAA2F,CAAC;AA+F1G,OAAO,oHAAoH,CAAC;;AAE5H,wBAAmH"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "edvoyui-component-library-test-flight",
   "private": false,
-  "version": "0.0.147",
+  "version": "0.0.148",
   "type": "module",
   "files": [
     "dist/",

package/src/components/modal/EUIModal.stories.ts

@@ -55,6 +55,20 @@ const meta: Meta<typeof EUIModal> = {
           defaultValue: { summary: "sm" },
         },
       },
+      placement: {
+        control: { type: "select" },
+        options: [
+          "top",
+          "bottom",
+          "center",
+        ],
+        description:
+          "Defines the position of the modal show in 'placement' element. Default is 'center'.",
+        defaultValue: "center",
+        table: {
+          defaultValue: { summary: "center" },
+        },
+      },
     },
   },
   parameters: {

package/src/components/modal/EUIModal.vue

@@ -3,7 +3,14 @@
     <Transition name="modal" appear>
       <div
         v-if="isVisible"
-        class="fixed z-50 flex flex-col items-center justify-end inset-2 sm:justify-center"
+        class="fixed z-50 flex flex-col items-center justify-end inset-2 modal-wrapper"
+        :class="[
+          placement === 'top'
+            ? 'sm:justify-start'
+            : placement === 'bottom'
+            ? 'sm:justify-end'
+            : 'sm:justify-center',
+        ]"
         @click.self="closeModal"
       >
         <div
@@ -11,10 +18,12 @@
         ></div>
         <div
           :class="[
-            'bg-white shadow-lg w-full overflow-hidden relative flex flex-col justify-between',
+            'bg-white shadow-lg w-full overflow-hidden relative flex flex-col justify-between modal-container',
             slideClass,
             roundedClass !== '' ? roundedClass : 'rounded-t-3xl md:rounded-2xl',
-            size === 'full' ? 'h-full max-h-svh' : 'max-h-[calc(100svh-3rem)] md:h-auto'
+            size === 'full'
+              ? 'h-full max-h-svh'
+              : 'max-h-[calc(100svh-3rem)] md:h-auto',
           ]"
         >
           <template v-if="$slots.header">
@@ -57,14 +66,20 @@
           <template v-if="$slots.content">
             <slot name="content"></slot>
           </template>
-          <div v-else class="p-4 border-t border-b border-gray-200 max-h-[calc(100svh-3rem)] flex-1">
+          <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="sticky bottom-0 flex items-center justify-end float-none 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"
@@ -125,6 +140,10 @@ export default defineComponent({
       type: String as PropType<"xs" | "sm" | "md" | "lg" | "xl" | "full">,
       default: "sm",
     },
+    placement: {
+      type: String as PropType<"center" | "bottom" | "top">,
+      default: "center",
+    },
   },
   emits: ["update:isVisible", "confirm"],
   setup(props, { emit }) {