Merge pull request #104 from IBEC-BOX/CardScale

IBEC-BOX · Apr 8, 2024 · ca6535c · ca6535c
2 parents 76b6258 + 2ecaa30
commit ca6535c
Show file tree

Hide file tree

Showing 13 changed files with 389 additions and 206 deletions.
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
@@ -38,17 +38,18 @@ export default defineNuxtConfig({
     components: [
       'pagesTestVuetify',
       'partsFooterDefault',
-      'partsCard',
       'partsForms',
       'partsErgVacancies',
       'partsHeaderDefault',
       'partsHeaderErg',
       'partsSlider',
       'partsNews',
       'partsModal',
+      'partsCardDefault',
+      'partsCardScale',
     ]
   },
-  devtools: { enabled: true },
+  devtools: { enabled: false },
   build: {
     transpile: ['vuetify'],
   }

diff --git a/playground/public/bg-card.png b/playground/public/bg-card.png
diff --git a/src/module.ts b/src/module.ts
@@ -65,10 +65,17 @@ export default defineNuxtModule<ModuleOptions>({
       });
     }
 
-    if (options.components.includes("partsCard")) {
+    if (options.components.includes("partsCardDefault")) {
       addComponent({
-        name: "partsCard", // name of the component to be used in vue templates
-        filePath: resolver.resolve("runtime/components/Parts/Card.vue"),
+        name: "partsCardDefault", // name of the component to be used in vue templates
+        filePath: resolver.resolve("runtime/components/Parts/Card/Default.vue"),
+      });
+    }
+
+    if (options.components.includes("partsCardScale")) {
+      addComponent({
+        name: "partsCardScale", // name of the component to be used in vue templates
+        filePath: resolver.resolve("runtime/components/Parts/Card/Scale.vue"),
       });
     }
 

diff --git a/src/runtime/components/Pages/TestVuetify.vue b/src/runtime/components/Pages/TestVuetify.vue
@@ -2,9 +2,9 @@
   <v-app class="">
     <partsHeaderErg
       :burger="false"
-      :bgClassHeader="'bg-primary'"
+      :bg-class-header="'bg-primary'"
       :color-class-menu="'text-white'"
-      :columnGapList="26"
+      :column-gap-list="26"
       :text-btn="'Получить консультацию'"
       :set-lang="[
         {
@@ -26,92 +26,12 @@
     <NuxtPage class="bg-primary" />
     <section class="h-100 bg-primary">
       <v-container class=" px-4">
-
-        <partsForms
-          :style-form="'contacts'"
-          :inputs="[
-                      {
-
-                        colsAttrs: {
-                          cols: 12
-                        },
-                        attrs: {
-                          variant: 'solo',
-                          placeholder: 'asd',
-                          flat: true,
-                          rounded: '16',
-                          clearable: true,
-                          maska: {mask: 'A A'},
-                          rules: [
-                            u => !!u || 'asd',
-                            u => !u || u.length <= 50 || 'Имя не должно быть длиннее 50 символов'
-                          ],
-                        },
-                        value: '',
-                      },
-                      {
-                          placeholder: '+7',
-                          colsAttrs: {
-                            cols: 12
-                          },
-                          maska: {mask: '+7 (###) ###-##-##'},
-                          value: '+7',
-                          attrs: {
-                            variant: 'solo',
-                            placeholder: '+7',
-                            flat: true,
-                            rounded: '16',
-                            clearable: true,
-                            rules: [
-                              u => !!u || 'asd',
-                              u => !u || u.length === 18 || ''
-                            ],
-                          },
-                      }
-                    ]"
-          :button-setting="{
-                      text: 'asd',
-                      attrs: {
-                        block: true,
-                        size: 'x-large',
-                        rounded: 'xl',
-                        color: 'dark-1',
-                        class: 'text-none mb-10',
-                        elevation: 0,
-                      }
-                    }"
-          @form-data="formData"
-          :checkbox-setting="{
-                      attrs: {
-                        class: 'custom-checkbox',
-                        rules: [
-                          u => u || u.length === false || 'asd'
-                        ],
-                      },
-                      label:  `
-                        <span class='text-dark-1 text-body-1'>
-                           'asd'
-                            <a href='/' class='text-dark-1'>
-                                'asd'
-                            </a>
-                        </span>
-                      `
-                    }"
-          title="asdasd"
-          :contacts="[
-            {
-              title: 'asd',
-              phone: `<p>+321321321</p><p>+321321321</p>`,
-              mail: 'asdsadasd'
-            }
-          ]"
-          :switchContentOnValid="true"
-        >
-          <template #confirm-form>
-            <p>asdsdfdsf,</p>
-            <p>asdsdfdsf</p>
-          </template>
-        </partsForms>
+        <partsCardScale
+          :cards="cards"
+          title-icon-class="mr-5"
+          title-icon-max-width="46"
+          title-icon-max-height="46"
+        />
       </v-container>
     </section>
 
@@ -131,99 +51,60 @@
       :copyright="{
         text: '2023 Untitled UI. All rights reserverd'
       }"
+      :social="socialsMedia"
+      :swap-copyright-and-socials="true"
     />
   </v-app>
 </template>
 
 <script setup>
-const slides2 = [
+const socialsMedia =  [
   {
     id: 0,
-    chip: {
-      text: 'abvgd',
-      attrs: {
-        color: 'primary'
-      }
-    },
-    title: 'Кредитная карта с целым годом без %',
-    subtitle: 'Подзаголовок маленький, в две строки',
-    titleAttrs: {
-      class: 'text-white w-75'
-    },
-    backgroundImg: 'https://images.unsplash.com/photo-1562043236-559c3b65a6e2?auto=format&fit=crop&q=80&w=2940&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-    buttons: [
-      {
-        id: 0,
-        text: 'Large button',
-        attrs: {
-          size: 'large',
-          color: 'primary',
-          class: 'text-body-1',
-        }
-      }
-    ],
-    active: true,
+    img: '/mail.svg',
   },
   {
     id: 1,
-    chip: {
-      text: 'abvgd',
-      attrs: {
-        color: 'primary'
-      }
-    },
-    title: 'Экологические акции',
-    subtitle: 'Команда АО “ССГПО” активно принимает участие в мероприятиях, направленных на помощь экологии',
-    textBlockAttrs: {
-      class: ''
-    },
-    subTitleAttrs: {
-      class: 'text-primary'
-    },
-    titleAttrs: {
-      class: 'text-primary text-h5 w-75'
-    },
-    img: {
-      src: 'https://s3-alpha-sig.figma.com/img/555c/6876/cb9c4c93facc41f9da4145fa73aca28f?Expires=1708300800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=GuQUtcWbVrWRn1GfwukhEdmCQ9ZxpWBc8-kYGxqc~kInBXYg7QiQUdnC11N6CBJyNYPhZmkMoCyqJLchOvtrizsQiSWQytj96hkeDbtlODJe60UxBq9LQqLWuzCoq8~9-IL~oKeji3ECSklL1VCqbv5NQ-Lxi~ItwX-sunBEXVsx9g9oxZIZrkuIVOfBA9vqYz1PVaG9FrIP7zL5R73ahu0m2V-MLPBe8OUFEQSWbDw9xUPIUKyXOfbm9En80I9oV8k55cLvyNaid-2qCCPtXrm26v7ohCeXQILx1-9j8xBHjy0cLploNutzmGMC0uiPQnr115gYHEhBXaJk2Ez8zA__',
-      attrs: {
-        'max-height': 400,
-        'max-width': '98%',
-        class: 'rounded-xl'
-      }
-    },
-    active: true,
+    img: '/mail.svg',
   },
   {
     id: 2,
-    chip: {
-      text: 'abvgd',
-      attrs: {
-        color: 'primary'
-      }
-    },
-    title: 'Экологические акции',
-    subtitle: 'Команда АО “ССГПО” активно принимает участие в мероприятиях, направленных на помощь экологии',
-    textBlockAttrs: {
-      class: ''
-    },
-    subTitleAttrs: {
-      class: 'text-primary'
-    },
-    titleAttrs: {
-      class: 'text-primary text-h5 w-75'
-    },
-    img: {
-      src: 'https://s3-alpha-sig.figma.com/img/555c/6876/cb9c4c93facc41f9da4145fa73aca28f?Expires=1708300800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=GuQUtcWbVrWRn1GfwukhEdmCQ9ZxpWBc8-kYGxqc~kInBXYg7QiQUdnC11N6CBJyNYPhZmkMoCyqJLchOvtrizsQiSWQytj96hkeDbtlODJe60UxBq9LQqLWuzCoq8~9-IL~oKeji3ECSklL1VCqbv5NQ-Lxi~ItwX-sunBEXVsx9g9oxZIZrkuIVOfBA9vqYz1PVaG9FrIP7zL5R73ahu0m2V-MLPBe8OUFEQSWbDw9xUPIUKyXOfbm9En80I9oV8k55cLvyNaid-2qCCPtXrm26v7ohCeXQILx1-9j8xBHjy0cLploNutzmGMC0uiPQnr115gYHEhBXaJk2Ez8zA__',
-      attrs: {
-        'max-height': 400,
-        'max-width': '98%',
-        class: 'rounded-xl'
-      }
-    },
-    active: true,
+    img: '/mail.svg',
   },
 ]
 
+const cards = [
+  {
+    id: 1,
+    background: '/bg-card.png',
+    icon: '/word.svg',
+    title: 'Производство',
+    chip: 'Энергетическое оборудовние'
+  },
+  {
+    id: 2,
+    background: '/bg-card.png',
+    icon: '/word.svg',
+    title: 'РЕМОНТ',
+    chip: 'Литейное производство'
+  },
+  {
+    id: 3,
+    background: '/bg-card.png',
+    icon: '/word.svg',
+    title: 'Производство',
+    chip: 'Энергетическое оборудовние'
+  },
+  {
+    id: 4,
+    background: '/bg-card.png',
+    icon: '/word.svg',
+    title: 'РЕМОНТ',
+    chip: 'Литейное производство'
+  },
+];
+
+
 const formData = (data) => {
   console.log(data)
 }

diff --git a/src/runtime/components/Parts/Card.vue → ...runtime/components/Parts/Card/Default.vue b/src/runtime/components/Parts/Card.vue → ...runtime/components/Parts/Card/Default.vue
@@ -178,7 +178,7 @@
 </template>
 
 <script setup>
-import { useMainStore } from "../../store/mainStore";
+import { useMainStore } from "../../../store/mainStore";
 import {useAttrs, ref} from "vue";
 const mainStore = useMainStore()