From 520bdc14b7cc719406979052e4b839c0525183a0 Mon Sep 17 00:00:00 2001
From: AibtVlr <valeryaibatov@gmail.com>
Date: Mon, 16 Oct 2023 16:35:41 +0600
Subject: [PATCH 1/3] add modals

---
 src/runtime/components/Parts/modal.vue | 156 +++++++++++++++
 src/stories/Modal.stories.js           | 259 +++++++++++++++++++++++++
 2 files changed, 415 insertions(+)
 create mode 100644 src/runtime/components/Parts/modal.vue
 create mode 100644 src/stories/Modal.stories.js

diff --git a/src/runtime/components/Parts/modal.vue b/src/runtime/components/Parts/modal.vue
new file mode 100644
index 0000000..6afd701
--- /dev/null
+++ b/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>
diff --git a/src/stories/Modal.stories.js b/src/stories/Modal.stories.js
new file mode 100644
index 0000000..6bb7fe1
--- /dev/null
+++ b/src/stories/Modal.stories.js
@@ -0,0 +1,259 @@
+import Modal from '../runtime/components/Parts/modal.vue'
+
+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',
+    }
+  }
+]
+
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
+export default {
+  title: 'Parts/Modal',
+  component: Modal,
+  tags: ['autodocs'],
+  argTypes: {
+    //General
+    modelValue: 'boolean',
+    heading: { type: 'text' },
+    text: { type: 'text' },
+    rounded: { type: 'text' },
+
+    //Buttons
+    buttons: { type: 'array' },
+    buttonsDirection: { type: 'text' },
+
+    //Icon
+    icon: { type: 'text' },
+    iconCenter: {type: 'boolean'},
+    iconBg: { type: 'text' },
+
+    //Img
+    img: { type: 'text' },
+    imgRounded: { type: 'text' },
+    imgFluid: {type: 'boolean'}
+  },
+};
+
+export const Standard = {
+  render: (args) => ({
+    components: { Modal },
+    setup() {
+      console.log(args)
+      return { args };
+    },
+    template:`<Modal v-bind="args">
+    </Modal>`
+  }),
+  args: {
+    modelValue: true,
+    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"
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/UmrBZaCGhezw0qx9xuq7Xf/%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0?type=design&node-id=1441%3A36039&mode=design&t=pIUOX6myj5IXqDE7-1",
+    },
+  },
+}
+
+export const body_slot = {
+  render: (args) => ({
+    components: { Modal },
+    setup() {
+      console.log(args)
+      return { args };
+    },
+    template:`<Modal v-bind="args">
+      <template #body v-if="${'bodySlot' in args}">
+        ${args.bodySlot}
+      </template>
+    </Modal>`
+  }),
+  args: {
+    bodySlot:
+       `<v-text-field variant="solo-filled" flat hide-details placeholder="Email" />
+        <v-checkbox label="Don't show this again" hide-details></v-checkbox>`,
+    modelValue: true,
+    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"
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/UmrBZaCGhezw0qx9xuq7Xf/%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0?type=design&node-id=1441%3A36039&mode=design&t=pIUOX6myj5IXqDE7-1",
+    },
+  },
+}
+
+export const No_icon = {
+  render: (args) => ({
+    components: { Modal },
+    setup() {
+      console.log(args)
+      return { args };
+    },
+    template:`<Modal v-bind="args">
+    </Modal>`
+  }),
+  args: {
+    modelValue: true,
+    width:"580",
+    heading:"Sure you want to accept?",
+    text:"A sure you want to accept this?",
+    rounded:"lg",
+    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',
+        }
+      },
+    ],
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/UmrBZaCGhezw0qx9xuq7Xf/%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0?type=design&node-id=1441%3A36039&mode=design&t=pIUOX6myj5IXqDE7-1",
+    },
+  },
+}
+
+export const Icon_center = {
+  render: (args) => ({
+    components: { Modal },
+    setup() {
+      console.log(args)
+      return { args };
+    },
+    template:`<Modal v-bind="args">
+    </Modal>`
+  }),
+  args: {
+    modelValue: true,
+    width:"580",
+    heading:"Sure you want to accept?",
+    text:"A sure you want to accept this?",
+    rounded:"lg",
+    buttons: modal_buttons,
+    buttonsDirection: 'column-reverse',
+    icon: 'mdi-check-circle-outline',
+    iconCenter: true,
+    'icon-color':"dark",
+    iconBg: "transparent",
+    'icon-size': "52"
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/UmrBZaCGhezw0qx9xuq7Xf/%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0?type=design&node-id=1441%3A36039&mode=design&t=pIUOX6myj5IXqDE7-1",
+    },
+  },
+}
+
+export const Image = {
+  render: (args) => ({
+    components: { Modal },
+    setup() {
+      console.log(args)
+      return { args };
+    },
+    template:`<Modal v-bind="args">
+    </Modal>`
+  }),
+  args: {
+    modelValue: true,
+    width: "580",
+    heading: "Subscribe to our newsletter",
+    text: "A sure you want to accept this?",
+    rounded: "lg",
+    buttons: modal_buttons,
+    'img-height': "300",
+    '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",
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/UmrBZaCGhezw0qx9xuq7Xf/%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0?type=design&node-id=1441%3A36039&mode=design&t=pIUOX6myj5IXqDE7-1",
+    },
+  },
+}
+
+export const Image_fluid = {
+  render: (args) => ({
+    components: { Modal },
+    setup() {
+      console.log(args)
+      return { args };
+    },
+    template:`<Modal v-bind="args">
+    </Modal>`
+  }),
+  args: {
+    modelValue: true,
+    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': true,
+    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",
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/UmrBZaCGhezw0qx9xuq7Xf/%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0?type=design&node-id=1441%3A36039&mode=design&t=pIUOX6myj5IXqDE7-1",
+    },
+  },
+}

From 38fb9fabcaa4c45daffb0d1b0f35743aea40431a Mon Sep 17 00:00:00 2001
From: AibtVlr <valeryaibatov@gmail.com>
Date: Mon, 16 Oct 2023 16:35:55 +0600
Subject: [PATCH 2/3] Create modals page

---
 playground/pages/modals.vue                  | 155 +++++++++++++++++++
 src/runtime/components/Pages/testVuetify.vue |   4 +-
 2 files changed, 157 insertions(+), 2 deletions(-)
 create mode 100644 playground/pages/modals.vue

diff --git a/playground/pages/modals.vue b/playground/pages/modals.vue
new file mode 100644
index 0000000..aaec0c0
--- /dev/null
+++ b/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>
diff --git a/src/runtime/components/Pages/testVuetify.vue b/src/runtime/components/Pages/testVuetify.vue
index e3b1422..0fc2296 100644
--- a/src/runtime/components/Pages/testVuetify.vue
+++ b/src/runtime/components/Pages/testVuetify.vue
@@ -381,8 +381,8 @@ const header_menu = [
 
   {
     id: 2,
-    title: 'Services',
-    url: '',
+    title: 'Modals',
+    url: 'modals',
   },
 
   {

From 88ddbcbe28545171db5352cee6ac6e309f5761f4 Mon Sep 17 00:00:00 2001
From: AibtVlr <valeryaibatov@gmail.com>
Date: Tue, 17 Oct 2023 14:44:49 +0600
Subject: [PATCH 3/3] add modal to module.ts

---
 src/module.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/module.ts b/src/module.ts
index 15e4ed0..476455c 100644
--- a/src/module.ts
+++ b/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',