Merge pull request #21 from IBEC-BOX/modals

Merge pull request from IBEC-BOX/modals

playground/pages/modals.vue

@@ -0,0 +1,155 @@
+<template>
+  <v-main>
+    <v-container class="h-100">
+      <h1>
+        Modals
+      </h1>
+      <div class="w-100 d-flex flex-wrap align-start" style="gap: 16px">
+        <v-btn @click="modal1 = true">
+          Modal 1
+        </v-btn>
+
+        <v-btn @click="modal2 = true">
+          Modal 2
+        </v-btn>
+
+        <v-btn @click="modal3 = true">
+          Modal 3
+        </v-btn>
+
+        <v-btn @click="modal4 = true">
+          Modal 4
+        </v-btn>
+
+        <v-btn @click="modal5 = true">
+          Modal 5
+        </v-btn>
+      </div>
+    </v-container>
+
+    <!-- Standart -->
+    <modal
+        v-model="modal1"
+        width="580"
+        heading="Sure you want to accept?"
+        text="A sure you want to accept this?"
+        rounded="lg"
+        :buttons="modal_buttons"
+        icon="mdi-check-circle-outline"
+        icon-size="34"
+      >
+        <template #body>
+          <v-text-field variant="solo-filled" flat hide-details placeholder="Text" />
+        </template>
+      </modal>
+    <!-- Standart END -->
+
+    <!-- No icon -->
+    <modal
+        v-model="modal2"
+        width="580"
+        heading="Sure you want to accept?"
+        text="A sure you want to accept this?"
+        rounded="lg"
+        :buttons="modal_buttons"
+        buttons-direction="column-reverse"
+      />
+    <!-- No icon END -->
+
+    <!-- Icon center -->
+    <modal
+        v-model="modal3"
+        width="580"
+        heading="Successfully accepted !"
+        text="You have successfully completed the survey. We can download the application to our device. If you have any questions, you can contact us."
+        rounded="lg"
+        :buttons="modal_buttons"
+        buttons-direction="column-reverse"
+        icon-center
+        icon="mdi-check-circle-outline"
+        icon-color="dark"
+        icon-bg="transparent"
+        icon-size="52"
+      />
+    <!-- Icon center -->
+
+    <!-- Image -->
+    <modal
+        v-model="modal4"
+        width="580"
+        heading="Subscribe to our newsletter"
+        text="A sure you want to accept this?"
+        rounded="lg"
+        :buttons="modal_buttons"
+        img-rounded="lg"
+        img="https://images.unsplash.com/photo-1684252408280-737200626f2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2788&q=80"
+      >
+        <template #body>
+          <v-text-field variant="solo-filled" flat hide-details placeholder="Email" />
+          <v-checkbox label="Don't show this again" hide-details></v-checkbox>
+        </template>
+      </modal>
+    <!-- Image END -->
+
+    <!-- Image fluid -->
+    <modal
+        v-model="modal5"
+        width="580"
+        heading="Subscribe to our newsletter"
+        text="A sure you want to accept this?"
+        rounded="lg"
+        close-button-variant="tonal"
+        close-button-color="grey-lighten-3"
+        :buttons="modal_buttons"
+        img-height="300"
+        img-fluid
+        img="https://images.unsplash.com/photo-1684252408280-737200626f2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2788&q=80"
+      />
+    <!-- Image fluid END -->
+  </v-main>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  import modal from '../../src/runtime/components/Parts/modal.vue'
+
+  const modal1 = ref(false)
+
+  const modal2 = ref(false)
+
+  const modal3 = ref(false)
+
+  const modal4 = ref(false)
+
+  const modal5 = ref(false)
+
+  const modal_buttons = [
+    {
+      id: 0,
+      text: 'No, cancel',
+      attributes: {
+        size: 'x-large',
+        variant: 'outlined',
+        color: 'primary',
+        class: 'text-body-1',
+        rounded: 'lg',
+      }
+    },
+
+    {
+      id: 1,
+      text: 'Yes, confirm ',
+      attributes: {
+        size: 'x-large',
+        variant: 'flat',
+        color: 'primary',
+        class: 'text-body-1',
+        rounded: 'lg',
+      }
+    },
+  ]
+</script>
+
+<style scoped>
+
+</style>

src/module.ts

@@ -40,6 +40,12 @@ export default defineNuxtModule<ModuleOptions>({
       filePath: resolver.resolve('runtime/components/Parts/header.vue')
     })
 
+    // Modal
+    addComponent( {
+      name: 'partsModal',
+      filePath: resolver.resolve('runtime/components/Parts/modal.vue')
+    })
+
 
     addComponent({
       name: 'News',

src/runtime/components/Pages/testVuetify.vue

@@ -381,8 +381,8 @@ const header_menu = [
 
   {
     id: 2,
-    title: 'Services',
-    url: '',
+    title: 'Modals',
+    url: 'modals',
   },
 
   {

src/runtime/components/Parts/modal.vue

@@ -0,0 +1,156 @@
+<template>
+  <v-dialog v-model="value">
+    <v-card :rounded="rounded">
+      <div class="w-100 d-flex" :class="{'position-absolute pt-5 px-5': imgFluid}" style="z-index: 1000">
+        <v-btn
+          v-bind="closeButtonAttrs"
+          class="ml-auto"
+          @click="value = false"
+        />
+      </div>
+
+      <div class="flex-grow-1 px-0 d-flex mb-4" :class="{'px-5': !imgFluid}" v-if="img.length">
+        <div class="overflow-hidden h-100 w-100" :class="[`rounded-${imgRounded}`]">
+          <v-img :src="img" v-bind="imageAttrs" cover />
+        </div>
+      </div>
+
+      <v-card-text class="pt-0 pb-4 d-flex align-center" :class="{'flex-column': iconCenter}">
+        <div v-if="icon.length" :class="[`bg-${iconBg}`]" class="icon-container pa-3 rounded-lg d-flex align-center justify-center mr-4">
+          <v-icon v-bind="iconAttrs" :icon="icon" />
+        </div>
+
+        <div class="flex-grow-1" :class="{'text-center' : (!icon.length || iconCenter)}">
+          <p class="text-h6 text-lg-h5 mb-0">
+            {{ heading }}
+          </p>
+
+          <p class="mb-0 text-15 text-lg-body-1">
+            {{ text }}
+          </p>
+        </div>
+      </v-card-text>
+
+      <v-card-item v-if="$slots.body">
+        <slot name="body" />
+      </v-card-item>
+
+      <v-card-item class="pb-4 pt-5" v-if="buttons.length">
+        <div class="buttons-container d-flex" :class="[`flex-${buttonsDirection}`]">
+          <v-btn
+            v-for="button in buttons"
+            v-bind="button.attributes"
+            :key="button.id"
+            class="flex-grow-1"
+          >
+            {{ button.text }}
+          </v-btn>
+        </div>
+      </v-card-item>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+  import { defineProps, useAttrs, computed, ref } from 'vue'
+
+  const attrs = useAttrs()
+
+  const getObjectPropertiesWithPrefix = (obj, prefix) => {
+    const iconProperties = {};
+
+    for (const key in obj) {
+      if (key.startsWith(`${prefix}-`)) {
+        iconProperties[key.split(`${prefix}-`)[1]] = obj[key];
+      }
+    }
+
+    return iconProperties;
+  };
+
+  const iconAttrs = ref({
+    size: 'large',
+    color: 'white',
+    ...getObjectPropertiesWithPrefix(attrs, 'icon')
+  })
+
+  const imageAttrs = ref({
+    height: 199,
+    ...getObjectPropertiesWithPrefix(attrs, 'img')
+  })
+
+  const closeButtonAttrs = ref({
+    elevation: 0,
+    size: 'small',
+    icon: 'mdi-window-close',
+    ...getObjectPropertiesWithPrefix(attrs, 'close-button')
+  })
+
+  const props = defineProps({
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    heading: {
+      type: String,
+      default: '',
+    },
+    text: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    rounded: {
+      type: String,
+      default: '',
+    },
+    buttons: {
+      type: Array,
+      default: () => []
+    },
+    buttonsDirection: {
+      type: String,
+      default: 'row'
+    },
+    iconCenter: {
+      type: Boolean,
+      default: false
+    },
+    iconBg: {
+      type: String,
+      default: 'grey-lighten-2'
+    },
+    img: {
+      type: String,
+      default: ''
+    },
+    imgRounded: {
+      type: String,
+      default: 'md',
+    },
+    imgFluid: {
+      type: Boolean,
+      default: false,
+    },
+  })
+
+  // Init v-model
+  const emit = defineEmits(['update:modelValue'])
+  const value = computed({
+    get() {
+      return props.modelValue
+    },
+    set(value) {
+      emit('update:modelValue', value)
+    }
+  })
+</script>
+
+<style scoped>
+.buttons-container {
+  gap: 16px;
+}
+</style>