From 732e1427f85f1b6988d733156a6edd691e971b0c Mon Sep 17 00:00:00 2001
From: AibtVlr <valeryaibatov@gmail.com>
Date: Mon, 23 Oct 2023 14:08:16 +0600
Subject: [PATCH 1/8] add pinia

---
 package.json              |  2 ++
 playground/nuxt.config.ts |  2 +-
 src/store/store.js        | 17 +++++++++++++++++
 3 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 src/store/store.js

diff --git a/package.json b/package.json
index 49486cf..ee7213d 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,8 @@
   "dependencies": {
     "@mdi/font": "^7.2.96",
     "@nuxt/kit": "^3.7.2",
+    "@pinia/nuxt": "^0.5.1",
+    "pinia": "^2.1.7",
     "vuetify": "3.3.16"
   },
   "devDependencies": {
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index 07abfc9..05f5cf2 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -1,5 +1,5 @@
 export default defineNuxtConfig({
-  modules: ['../src/module'],
+  modules: ['../src/module', '@pinia/nuxt'],
   nuxt3UIKit: {
     theme: 'green'
   },
diff --git a/src/store/store.js b/src/store/store.js
new file mode 100644
index 0000000..6679503
--- /dev/null
+++ b/src/store/store.js
@@ -0,0 +1,17 @@
+import {defineStore} from 'pinia'
+
+export const useStore = defineStore('store', {
+  getters: {
+    getObjectPropertiesWithPrefix: () => {
+      return (obj, prefix) => {
+        const properties = {};
+        for (const key in obj) {
+          if (key.startsWith(`${prefix}-`)) {
+            properties[key.split(`${prefix}-`)[1]] = obj[key];
+          }
+        }
+        return properties;
+      };
+    }
+  }
+})

From a1236bcd4880cfe9fc98398026434be0855c7725 Mon Sep 17 00:00:00 2001
From: AibtVlr <valeryaibatov@gmail.com>
Date: Mon, 23 Oct 2023 17:51:25 +0600
Subject: [PATCH 2/8] fix forms

---
 src/runtime/components/Parts/Forms.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/components/Parts/Forms.vue b/src/runtime/components/Parts/Forms.vue
index d6e5e76..f2284ed 100644
--- a/src/runtime/components/Parts/Forms.vue
+++ b/src/runtime/components/Parts/Forms.vue
@@ -137,7 +137,7 @@
       </v-row>
     </v-form>
   </v-sheet>
-  <v-sheet v-if="bigImage.length || smallImage.length" :width="1110" class="mx-auto custom-ui-form">
+  <v-sheet v-if="bigImage.length || smallImage.length" class="mx-auto custom-ui-form">
     <v-form ref="form" @submit.prevent="dataForm($refs.form.isValid)" class="pa-6 px-sm-10 pt-sm-10 pb-sm-5">
       <v-row>
         <v-col cols="12" class="text-center mb-7 text-sm-32 text-h5" v-if="smallImage.length">{{ title }}</v-col>

From 2ed0411826f9a0a50cf17ef744c3a1d7811b5d6b Mon Sep 17 00:00:00 2001
From: AibtVlr <valeryaibatov@gmail.com>
Date: Mon, 23 Oct 2023 17:54:30 +0600
Subject: [PATCH 3/8] Create vacancies.vue

---
 src/runtime/components/Parts/vacancies.vue | 91 ++++++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 src/runtime/components/Parts/vacancies.vue

diff --git a/src/runtime/components/Parts/vacancies.vue b/src/runtime/components/Parts/vacancies.vue
new file mode 100644
index 0000000..e5680d1
--- /dev/null
+++ b/src/runtime/components/Parts/vacancies.vue
@@ -0,0 +1,91 @@
+<template>
+  <v-main>
+    <v-container>
+      <v-breadcrumbs class="px-0" :items="breadcrumbs" divider=">"></v-breadcrumbs>
+      <h1 class="mb-10 text-h4">Вакансии</h1>
+
+      <v-row class="mb-16">
+        <v-col
+          v-for="card in cards"
+          :key="card"
+          cols="12"
+          md="6"
+          lg="4"
+          xl="3"
+        >
+          <Card
+            :max-width="500"
+            v-bind="card"
+          >
+            <template v-if="'button' in card || 'city' in card" #button>
+              <div class="d-flex align-center w-100">
+                <v-btn v-if="'button' in card" class="mr-auto" v-bind="{...defaultButton, ...card.button}" @click="'function' in card.button ? card.button.function() : null" />
+
+                <span v-if="'city' in card" class="text-15 text-primary">
+                  {{ card.city }}
+                </span>
+              </div>
+            </template>
+          </Card>
+        </v-col>
+      </v-row>
+
+      <Forms
+        v-bind="formAttrs"
+        @form-data="formData"
+      />
+    </v-container>
+  </v-main>
+</template>
+
+<script setup>
+  import Card from './Card.vue'
+  import Forms from './Forms.vue'
+  import {defineProps, defineEmits, useAttrs} from 'vue'
+
+  const attrs = useAttrs()
+  const emit = defineEmits(['form-data'])
+  const props = defineProps({
+    cards: {
+      type: Array,
+      default: () => []
+    },
+
+    breadcrumbs: {
+      type: Array,
+      default: () => [{ href: '/', title: 'Главная' }, 'Вакансии'],
+    }
+  })
+
+  const getObjectPropertiesWithPrefix = (obj, prefix) => {
+    const properties = {};
+    for (const key in obj) {
+      if (key.startsWith(`${prefix}-`)) {
+        properties[key.split(`${prefix}-`)[1]] = obj[key];
+      }
+    }
+    return properties;
+  }
+
+  const formAttrs = {
+    ...getObjectPropertiesWithPrefix(attrs, 'form')
+  }
+
+  console.log(formAttrs)
+
+  const formData = (data) => {
+    emit('form-data', data )
+  }
+
+  const defaultButton = {
+    size: 'large',
+    color: 'white',
+    class: 'bg-primary text-body-1',
+    rounded: 'pill',
+    text: 'Open'
+  }
+</script>
+
+<style scoped>
+
+</style>

From 089942bc71e35d2e6b996e67039b1f808db40662 Mon Sep 17 00:00:00 2001
From: AibtVlr <valeryaibatov@gmail.com>
Date: Mon, 23 Oct 2023 17:54:39 +0600
Subject: [PATCH 4/8] Create vacancy.vue

---
 src/runtime/components/Parts/vacancy.vue | 173 +++++++++++++++++++++++
 1 file changed, 173 insertions(+)
 create mode 100644 src/runtime/components/Parts/vacancy.vue

diff --git a/src/runtime/components/Parts/vacancy.vue b/src/runtime/components/Parts/vacancy.vue
new file mode 100644
index 0000000..e3aa6dd
--- /dev/null
+++ b/src/runtime/components/Parts/vacancy.vue
@@ -0,0 +1,173 @@
+<template>
+  <v-main>
+    <v-container class="pb-0 mb-10">
+      <v-breadcrumbs
+        class="px-0"
+        :items="[{ href: '/', title: 'Главная', }, {href: '/vacancies', title: 'Вакансии'}, name]"
+        divider=">"
+      />
+      <h1 class="mb-0 text-h4">
+        {{ name }}
+      </h1>
+    </v-container>
+
+    <div class="bg-grey-lighten-4 mb-15 py-8">
+      <v-container class="py-0 d-flex align-center flex-wrap">
+        <v-row>
+          <v-col>
+            <p class="text-h6 text-grey-darken-1">
+              <span class="text-black"> Опыт работы :</span> {{ experience }}
+            </p>
+            <p class="text-h6 text-grey-darken-1">
+              <span class="text-black"> Занятость :</span> {{ schedule }}
+            </p>
+          </v-col>
+
+          <v-col
+            cols="12"
+            md="6"
+            lg="4"
+          >
+            <v-alert
+              class="ml-auto text-center flex-0-0 px-10 py-5"
+              rounded="lg"
+              border-color="grey-lighten-2"
+              variant="outlined"
+            >
+              <p class="mb-0 text-h6">
+                ЗП от : {{ salary }}
+              </p>
+            </v-alert>
+          </v-col>
+        </v-row>
+      </v-container>
+    </div>
+
+    <v-container>
+      <!-- Requirements -->
+      <h2 class="text-h5 mb-6">
+        Требования
+      </h2>
+
+      <ol
+        class="mb-10"
+        style="list-style-position: inside;"
+      >
+        <li
+          v-for="requirement in requirements"
+          :key="requirement.id"
+          class="text-17 text-grey-darken-3"
+        >
+          {{ requirement.title }}
+        </li>
+      </ol>
+      <!-- Requirements END -->
+
+      <!-- Responsibilities -->
+      <h2 class="text-h5 mb-6">
+        Обязанности
+      </h2>
+
+      <ol
+        class="mb-0 mb-10"
+        style="list-style-position: inside;"
+      >
+        <li
+          v-for="duty in responsibilities"
+          :key="duty.id"
+          class="text-17 text-grey-darken-3"
+        >
+          {{ duty.title }}
+        </li>
+      </ol>
+      <!-- Responsibilities END -->
+
+      <!-- Conditions -->
+      <h2 class="text-h5 mb-6">
+        Что даем
+      </h2>
+
+      <ol class="mb-16" style="list-style-position: inside;">
+        <li
+          v-for="condition in conditions"
+          :key="condition.id"
+          class="text-17 text-grey-darken-3"
+        >
+          {{ condition.title }}
+        </li>
+      </ol>
+      <!-- Conditions END -->
+
+      <Forms
+        v-bind="formAttrs"
+        @form-data="formData"
+      />
+    </v-container>
+  </v-main>
+</template>
+
+<script setup>
+  import Forms from './Forms.vue'
+  import {defineProps, defineEmits, useAttrs} from 'vue'
+
+  const attrs = useAttrs()
+  const emit = defineEmits(['form-data'])
+  const props = defineProps({
+    name: {
+      type: String,
+      default: ''
+    },
+
+    experience: {
+      type: String,
+      default: ''
+    },
+
+    schedule: {
+      type: String,
+      default: ''
+    },
+
+    salary: {
+      type: String,
+      default: ''
+    },
+
+    requirements: {
+      type: Array,
+      default: () => []
+    },
+
+    responsibilities: {
+      type: Array,
+      default: () => []
+    },
+
+    conditions: {
+      type: Array,
+      default: () => []
+    },
+  })
+
+  const getObjectPropertiesWithPrefix = (obj, prefix) => {
+    const properties = {};
+    for (const key in obj) {
+      if (key.startsWith(`${prefix}-`)) {
+        properties[key.split(`${prefix}-`)[1]] = obj[key];
+      }
+    }
+    return properties;
+  }
+
+  const formAttrs = {
+    ...getObjectPropertiesWithPrefix(attrs, 'form')
+  }
+
+  const formData = (data) => {
+    emit('form-data', data )
+  }
+</script>
+
+<style scoped>
+
+</style>

From abb02de9db12dd344dc70653fed624390d610eea Mon Sep 17 00:00:00 2001
From: AibtVlr <valeryaibatov@gmail.com>
Date: Mon, 23 Oct 2023 17:55:00 +0600
Subject: [PATCH 5/8] add pages for vacancies and vacancy

---
 playground/pages/vacancies.vue | 260 +++++++++++++++++++++++++++++++++
 playground/pages/vacancy.vue   | 201 +++++++++++++++++++++++++
 2 files changed, 461 insertions(+)
 create mode 100644 playground/pages/vacancies.vue
 create mode 100644 playground/pages/vacancy.vue

diff --git a/playground/pages/vacancies.vue b/playground/pages/vacancies.vue
new file mode 100644
index 0000000..e95ec5e
--- /dev/null
+++ b/playground/pages/vacancies.vue
@@ -0,0 +1,260 @@
+<template>
+  <div>
+    <partVacancies
+      :cards="cards"
+      :form-title="'Заполните контактные данные и оставьте заявку на консультацию'"
+      :form-inputs="inputs"
+      :form-style-form="'standard'"
+      :form-small-image="'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg'"
+      :form-socials="socials"
+      :form-alt-image="'sad'"
+      :form-info-company="infoCompany"
+      :form-checkbox-setting="checkboxSetting"
+      :form-commentary="commentary"
+      @form-data="formData"
+    />
+  </div>
+</template>
+
+<script setup>
+  import partVacancies from '../../src/runtime/components/Parts/vacancies.vue'
+
+  const test = () => {
+    console.log('test')
+  }
+
+  const cards = [
+    {
+      id: 1,
+      positionImageVacancy: 'end',
+      title: 'Card Title',
+      subtitle: 'Card Title',
+      price: "150 000 - 180 000 ₸",
+      imgSrc: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg",
+      imgAlt: "Картинка",
+      styleCard: "vacancy",
+      text: "A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.",
+      city: "Almaty, KZ",
+      button: {
+        to: '/vacancy'
+      }
+    },
+    {
+      id: 2,
+      positionImageVacancy: 'end',
+      title: 'Card Title',
+      subtitle: 'Card Title',
+      price: "150 000 - 180 000 ₸",
+      imgSrc: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg",
+      imgAlt: "Картинка",
+      styleCard: "vacancy",
+      text: "A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.",
+      city: "Almaty, KZ",
+      button: {
+        to: '/'
+      }
+    },
+    {
+      id: 3,
+      positionImageVacancy: 'end',
+      title: 'Card Title',
+      subtitle: 'Card Title',
+      price: "150 000 - 180 000 ₸",
+      imgSrc: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg",
+      imgAlt: "Картинка",
+      styleCard: "vacancy",
+      text: "A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.",
+      city: "Almaty, KZ",
+      button: {
+        to: '/'
+      }
+    },
+    {
+      id: 4,
+      positionImageVacancy: 'end',
+      title: 'Card Title',
+      subtitle: 'Card Title',
+      price: "150 000 - 180 000 ₸",
+      imgSrc: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg",
+      imgAlt: "Картинка",
+      styleCard: "vacancy",
+      text: "A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.",
+      city: "Almaty, KZ",
+      button: {
+        to: '/'
+      }
+    },
+    {
+      id: 5,
+      positionImageVacancy: 'end',
+      title: 'Card Title',
+      subtitle: 'Card Title',
+      price: "150 000 - 180 000 ₸",
+      imgSrc: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg",
+      imgAlt: "Картинка",
+      styleCard: "vacancy",
+      text: "A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.",
+      city: "Almaty, KZ",
+      button: {
+        to: '/'
+      }
+    },
+    {
+      id: 6,
+      positionImageVacancy: 'end',
+      title: 'Card Title',
+      subtitle: 'Card Title',
+      price: "150 000 - 180 000 ₸",
+      imgSrc: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg",
+      imgAlt: "Картинка",
+      styleCard: "vacancy",
+      text: "A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.",
+      city: "Almaty, KZ",
+      button: {
+        to: '/'
+      }
+    },
+    {
+      id: 7,
+      positionImageVacancy: 'end',
+      title: 'Card Title',
+      subtitle: 'Card Title',
+      price: "150 000 - 180 000 ₸",
+      imgSrc: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg",
+      imgAlt: "Картинка",
+      styleCard: "vacancy",
+      text: "A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.",
+      city: "Almaty, KZ",
+      button: {
+        to: '/'
+      }
+    },
+    {
+      id: 8,
+      positionImageVacancy: 'end',
+      title: 'Card Title',
+      subtitle: 'Card Title',
+      price: "150 000 - 180 000 ₸",
+      imgSrc: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg",
+      imgAlt: "Картинка",
+      styleCard: "vacancy",
+      text: "A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.",
+      city: "Almaty, KZ",
+      button: {
+        to: '/'
+      }
+    },
+    {
+      id: 9,
+      positionImageVacancy: 'end',
+      title: 'Card Title',
+      subtitle: 'Card Title',
+      price: "150 000 - 180 000 ₸",
+      imgSrc: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg",
+      imgAlt: "Картинка",
+      styleCard: "vacancy",
+      text: "A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.",
+      city: "Almaty, KZ",
+      button: {
+        to: '/'
+      }
+    },
+  ]
+
+  const formData = (data) => {
+    console.log(data)
+  }
+  const socials = [
+    {
+      link: '321',
+      img: 'data:image/svg+xml,%3Csvg width=\'32\' height=\'32\' viewBox=\'0 0 32 32\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Crect width=\'32\' height=\'32\' rx=\'16\' fill=\'%234D4E52\'/%3E%3Cpath d=\'M22.4002 10.0819L19.9959 22.6339C19.9959 22.6339 19.6594 23.5042 18.7353 23.0868L13.1879 18.6822L13.1621 18.6692C13.9115 17.9724 19.7221 12.5622 19.9761 12.317C20.3692 11.9372 20.1251 11.7111 19.6687 11.998L11.0856 17.6425L7.77431 16.4887C7.77431 16.4887 7.2532 16.2968 7.20307 15.8794C7.15228 15.4613 7.79146 15.2352 7.79146 15.2352L21.2907 9.75126C21.2907 9.75126 22.4002 9.24644 22.4002 10.0819Z\' fill=\'white\'/%3E%3C/svg%3E%0A',
+      alt: '321',
+    },
+    {
+      link: '321',
+      img: 'data:image/svg+xml,%3Csvg width=\'32\' height=\'32\' viewBox=\'0 0 32 32\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Crect width=\'32\' height=\'32\' rx=\'16\' fill=\'%234D4E52\'/%3E%3Cpath d=\'M17.3259 16.2918H20.3036L20.7711 13.2483H17.3253V11.585C17.3253 10.3207 17.7359 9.1996 18.9113 9.1996H20.8002V6.5437C20.4683 6.49861 19.7664 6.3999 18.4402 6.3999C15.6707 6.3999 14.0471 7.87134 14.0471 11.2237V13.2483H11.2002V16.2918H14.0471V24.6567C14.6109 24.742 15.182 24.7999 15.7682 24.7999C16.2982 24.7999 16.8153 24.7512 17.3259 24.6817V16.2918Z\' fill=\'white\'/%3E%3C/svg%3E%0A',
+      alt: '321',
+    },
+    {
+      link: '321',
+      img: 'data:image/svg+xml,%3Csvg width=\'32\' height=\'32\' viewBox=\'0 0 32 32\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Crect width=\'32\' height=\'32\' rx=\'16\' fill=\'%234D4E52\'/%3E%3Cpath d=\'M22.3415 9.65019C20.761 8.07519 18.6537 7.2002 16.4293 7.2002C11.8049 7.2002 8.05854 10.9335 8.05854 15.5419C8.05854 17.0002 8.46829 18.4585 9.17073 19.6835L8 24.0002L12.4488 22.8335C13.6781 23.4752 15.0244 23.8252 16.4293 23.8252C21.0537 23.8252 24.8 20.0919 24.8 15.4835C24.7415 13.3252 23.9219 11.2252 22.3415 9.65019ZM20.4683 18.5169C20.2927 18.9835 19.4732 19.4502 19.0634 19.5085C18.7122 19.5669 18.2439 19.5669 17.7756 19.4502C17.4829 19.3335 17.0732 19.2169 16.6049 18.9835C14.4976 18.1085 13.1512 16.0085 13.0341 15.8335C12.9171 15.7169 12.1561 14.7252 12.1561 13.6752C12.1561 12.6252 12.6829 12.1585 12.8585 11.9252C13.0341 11.6919 13.2683 11.6919 13.4439 11.6919C13.561 11.6919 13.7366 11.6919 13.8537 11.6919C13.9707 11.6919 14.1463 11.6335 14.322 12.0419C14.4976 12.4502 14.9073 13.5002 14.9659 13.5585C15.0244 13.6752 15.0244 13.7919 14.9659 13.9085C14.9073 14.0252 14.8488 14.1419 14.7317 14.2585C14.6146 14.3752 14.4976 14.5502 14.439 14.6085C14.3219 14.7252 14.2049 14.8419 14.322 15.0169C14.439 15.2502 14.8488 15.8919 15.4927 16.4752C16.3122 17.1752 16.9561 17.4085 17.1902 17.5252C17.4244 17.6419 17.5415 17.5835 17.6585 17.4669C17.7756 17.3502 18.1854 16.8835 18.3024 16.6502C18.4195 16.4169 18.5951 16.4752 18.7707 16.5335C18.9463 16.5919 20 17.1169 20.1756 17.2335C20.4098 17.3502 20.5268 17.4085 20.5854 17.4669C20.6439 17.6419 20.6439 18.0502 20.4683 18.5169Z\' fill=\'white\'/%3E%3C/svg%3E%0A',
+      alt: '321',
+    },
+  ]
+  const combobox = {
+    label: "выбери пункт",
+    rules: [
+      v => !!v || 'ФИО обязательно к заполнению',
+    ],
+    clearable: true,
+    multiple: true,
+    items: ['a', 'b', 'c', 'd', 'e', 'ab', 'bc', 'de']
+  }
+  const inputs = [
+    {
+      label: "ФИО",
+      rules: [
+        v => !!v || 'ФИО обязательно к заполнению',
+        v => (v && v.length <= 10) || 'Имя не должно быть длиннее 10 символов',
+      ],
+      placeholder: "Аче Ачевович",
+      value: ''
+    },
+    {
+      // sm: 6,
+      // md: 6,
+      // lg: 6,
+      // xl: 6,
+      // xxl: 6,
+      label: "ФИО",
+      rules: [
+        v => !!v || 'ФИО обязательно к заполнению',
+        v => (v && v.length <= 10) || 'Имя не должно быть длиннее 10 символов',
+      ],
+      placeholder: "Аче Ачевович",
+      value: ''
+    },
+    // {
+    // sm: 6,
+    // md: 6,
+    // lg: 6,
+    // xl: 6,
+    // xxl: 6,
+    // label: "ФИО",
+    // rules: [
+    //   v => !!v || 'ФИО обязательно к заполнению',
+    //   v => (v && v.length <= 10) || 'Имя не должно быть длиннее 10 символов',
+    // ],
+    // placeholder: "Аче Ачевович",
+    // value: ''
+    // },
+  ]
+  const infoCompany = [
+    {
+      icon: "mdi-phone",
+      colorIcon: "primary",
+      sizeIcon: "large",
+      text: "Номер телефона компании"
+    },
+    {
+      icon: "mdi-information",
+      colorIcon: "primary",
+      sizeIcon: "large",
+      text: "Номер телефона компании"
+    },
+  ]
+  const checkboxSetting = {
+    color: 'primary',
+    rules: [
+      v => !!v || 'Нажми на флажок!'
+    ],
+    label: "Нажимая кнопку, я соглашаюсь на обработку персональных данных"
+  }
+  const commentary = {
+    label: "комментарий",
+    rules: [
+      v => !!v || 'ФИО обязательно к заполнению',
+    ],
+    rows: 3,
+  }
+</script>
diff --git a/playground/pages/vacancy.vue b/playground/pages/vacancy.vue
new file mode 100644
index 0000000..bcf3030
--- /dev/null
+++ b/playground/pages/vacancy.vue
@@ -0,0 +1,201 @@
+<template>
+  <div>
+    <partVacancy
+      name="Дизайнер"
+      experience="от 3-х лет и более"
+      schedule="гибкий график или по проектная"
+      salary="150 000 - 180 000 ₸"
+      :requirements="requirements"
+      :responsibilities="responsibilities"
+      :conditions="conditions"
+
+      :form-title="'Заполните контактные данные и оставьте заявку на консультацию'"
+      :form-inputs="inputs"
+      :form-style-form="'standard'"
+      :form-small-image="'data:image/svg+xml,%3Csvg width=\'465\' height=\'230\' viewBox=\'0 0 465 230\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Crect width=\'465\' height=\'230\' rx=\'12\' fill=\'%23E6E7EB\'/%3E%3Cpath d=\'M278 77H188C183 77 178 82 178 87V157C178 159.652 179.054 162.196 180.929 164.071C182.804 165.946 185.348 167 188 167H278C283 167 288 162 288 157V87C288 82 283 77 278 77ZM198 147L215.5 124.5L228 139.5L245.5 117L268 147H198Z\' fill=\'white\'/%3E%3C/svg%3E%0A'"
+      :form-socials="socials"
+      :form-alt-image="'sad'"
+      :form-info-company="infoCompany"
+      :form-checkbox-setting="checkboxSetting"
+      :form-commentary="commentary"
+      @form-data="formData"
+    />
+  </div>
+</template>
+
+<script setup>
+  import partVacancy from '../../src/runtime/components/Parts/vacancy.vue'
+
+  const requirements = [
+    {
+      id: 0,
+      title: 'Опыт в этой сфере от 3-х лет.'
+    },
+
+    {
+      id: 1,
+      title: 'Наличие в портфолио реализованных  дизайнов'
+    },
+
+    {
+      id: 2,
+      title: 'Проживание в Алматы'
+    },
+
+    {
+      id: 3,
+      title: 'Грамотная речь и знание 3 языков'
+    },
+
+    {
+      id: 4,
+      title: 'Креативное мышление'
+    },
+
+  ]
+
+  const responsibilities = [
+    {
+      id: 0,
+      title: 'Своевременно и качественно выполнять художественно-оформительские работы по казам подразделений предприятия (клиентов).'
+    },
+
+    {
+      id: 1,
+      title: 'Составлять эскизы и выполнять работы по художественному оформлению публикаций различного характера'
+    },
+
+    {
+      id: 2,
+      title: 'Создавать иллюстрации к текстам (графики, рисунки, схемы, диаграммы, др.), разрабатывать новые шрифты, стили оформления'
+    },
+
+    {
+      id: 3,
+      title: 'Вносить исправления в проекты художественного и технического оформления по указанию художественного редактора.'
+    },
+
+    {
+      id: 4,
+      title: 'Умение работать в команде ;)'
+    },
+  ]
+
+  const conditions = [
+    {
+      id: 0,
+      title: ' Участие в разных крутых проектов'
+    },
+
+    {
+      id: 1,
+      title: 'Общение и работа с профессиональными специалистами'
+    },
+
+    {
+      id: 2,
+      title: 'Зарплату'
+    }
+  ]
+
+  const formData = (data) => {
+    console.log(data)
+  }
+  const socials = [
+    {
+      link: '321',
+      img: 'data:image/svg+xml,%3Csvg width=\'32\' height=\'32\' viewBox=\'0 0 32 32\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Crect width=\'32\' height=\'32\' rx=\'16\' fill=\'%234D4E52\'/%3E%3Cpath d=\'M22.4002 10.0819L19.9959 22.6339C19.9959 22.6339 19.6594 23.5042 18.7353 23.0868L13.1879 18.6822L13.1621 18.6692C13.9115 17.9724 19.7221 12.5622 19.9761 12.317C20.3692 11.9372 20.1251 11.7111 19.6687 11.998L11.0856 17.6425L7.77431 16.4887C7.77431 16.4887 7.2532 16.2968 7.20307 15.8794C7.15228 15.4613 7.79146 15.2352 7.79146 15.2352L21.2907 9.75126C21.2907 9.75126 22.4002 9.24644 22.4002 10.0819Z\' fill=\'white\'/%3E%3C/svg%3E%0A',
+      alt: '321',
+    },
+    {
+      link: '321',
+      img: 'data:image/svg+xml,%3Csvg width=\'32\' height=\'32\' viewBox=\'0 0 32 32\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Crect width=\'32\' height=\'32\' rx=\'16\' fill=\'%234D4E52\'/%3E%3Cpath d=\'M17.3259 16.2918H20.3036L20.7711 13.2483H17.3253V11.585C17.3253 10.3207 17.7359 9.1996 18.9113 9.1996H20.8002V6.5437C20.4683 6.49861 19.7664 6.3999 18.4402 6.3999C15.6707 6.3999 14.0471 7.87134 14.0471 11.2237V13.2483H11.2002V16.2918H14.0471V24.6567C14.6109 24.742 15.182 24.7999 15.7682 24.7999C16.2982 24.7999 16.8153 24.7512 17.3259 24.6817V16.2918Z\' fill=\'white\'/%3E%3C/svg%3E%0A',
+      alt: '321',
+    },
+    {
+      link: '321',
+      img: 'data:image/svg+xml,%3Csvg width=\'32\' height=\'32\' viewBox=\'0 0 32 32\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Crect width=\'32\' height=\'32\' rx=\'16\' fill=\'%234D4E52\'/%3E%3Cpath d=\'M22.3415 9.65019C20.761 8.07519 18.6537 7.2002 16.4293 7.2002C11.8049 7.2002 8.05854 10.9335 8.05854 15.5419C8.05854 17.0002 8.46829 18.4585 9.17073 19.6835L8 24.0002L12.4488 22.8335C13.6781 23.4752 15.0244 23.8252 16.4293 23.8252C21.0537 23.8252 24.8 20.0919 24.8 15.4835C24.7415 13.3252 23.9219 11.2252 22.3415 9.65019ZM20.4683 18.5169C20.2927 18.9835 19.4732 19.4502 19.0634 19.5085C18.7122 19.5669 18.2439 19.5669 17.7756 19.4502C17.4829 19.3335 17.0732 19.2169 16.6049 18.9835C14.4976 18.1085 13.1512 16.0085 13.0341 15.8335C12.9171 15.7169 12.1561 14.7252 12.1561 13.6752C12.1561 12.6252 12.6829 12.1585 12.8585 11.9252C13.0341 11.6919 13.2683 11.6919 13.4439 11.6919C13.561 11.6919 13.7366 11.6919 13.8537 11.6919C13.9707 11.6919 14.1463 11.6335 14.322 12.0419C14.4976 12.4502 14.9073 13.5002 14.9659 13.5585C15.0244 13.6752 15.0244 13.7919 14.9659 13.9085C14.9073 14.0252 14.8488 14.1419 14.7317 14.2585C14.6146 14.3752 14.4976 14.5502 14.439 14.6085C14.3219 14.7252 14.2049 14.8419 14.322 15.0169C14.439 15.2502 14.8488 15.8919 15.4927 16.4752C16.3122 17.1752 16.9561 17.4085 17.1902 17.5252C17.4244 17.6419 17.5415 17.5835 17.6585 17.4669C17.7756 17.3502 18.1854 16.8835 18.3024 16.6502C18.4195 16.4169 18.5951 16.4752 18.7707 16.5335C18.9463 16.5919 20 17.1169 20.1756 17.2335C20.4098 17.3502 20.5268 17.4085 20.5854 17.4669C20.6439 17.6419 20.6439 18.0502 20.4683 18.5169Z\' fill=\'white\'/%3E%3C/svg%3E%0A',
+      alt: '321',
+    },
+  ]
+  const combobox = {
+    label: "выбери пункт",
+    rules: [
+      v => !!v || 'ФИО обязательно к заполнению',
+    ],
+    clearable: true,
+    multiple: true,
+    items: ['a', 'b', 'c', 'd', 'e', 'ab', 'bc', 'de']
+  }
+  const inputs = [
+    {
+      label: "ФИО",
+      rules: [
+        v => !!v || 'ФИО обязательно к заполнению',
+        v => (v && v.length <= 10) || 'Имя не должно быть длиннее 10 символов',
+      ],
+      placeholder: "Аче Ачевович",
+      value: ''
+    },
+    {
+      // sm: 6,
+      // md: 6,
+      // lg: 6,
+      // xl: 6,
+      // xxl: 6,
+      label: "ФИО",
+      rules: [
+        v => !!v || 'ФИО обязательно к заполнению',
+        v => (v && v.length <= 10) || 'Имя не должно быть длиннее 10 символов',
+      ],
+      placeholder: "Аче Ачевович",
+      value: ''
+    },
+    // {
+    // sm: 6,
+    // md: 6,
+    // lg: 6,
+    // xl: 6,
+    // xxl: 6,
+    // label: "ФИО",
+    // rules: [
+    //   v => !!v || 'ФИО обязательно к заполнению',
+    //   v => (v && v.length <= 10) || 'Имя не должно быть длиннее 10 символов',
+    // ],
+    // placeholder: "Аче Ачевович",
+    // value: ''
+    // },
+  ]
+  const infoCompany = [
+    {
+      icon: "mdi-phone",
+      colorIcon: "primary",
+      sizeIcon: "large",
+      text: "Номер телефона компании"
+    },
+    {
+      icon: "mdi-information",
+      colorIcon: "primary",
+      sizeIcon: "large",
+      text: "Номер телефона компании"
+    },
+  ]
+  const checkboxSetting = {
+    color: 'primary',
+    rules: [
+      v => !!v || 'Нажми на флажок!'
+    ],
+    label: "Нажимая кнопку, я соглашаюсь на обработку персональных данных"
+  }
+  const commentary = {
+    label: "комментарий",
+    rules: [
+      v => !!v || 'ФИО обязательно к заполнению',
+    ],
+    rows: 3,
+  }
+</script>
+
+<style scoped>
+
+</style>

From eb6e94bb0bf7aefb647667821b1f28f877f42db5 Mon Sep 17 00:00:00 2001
From: AibtVlr <valeryaibatov@gmail.com>
Date: Mon, 23 Oct 2023 17:55:04 +0600
Subject: [PATCH 6/8] Update testVuetify.vue

---
 src/runtime/components/Pages/testVuetify.vue | 21 +++-----------------
 1 file changed, 3 insertions(+), 18 deletions(-)

diff --git a/src/runtime/components/Pages/testVuetify.vue b/src/runtime/components/Pages/testVuetify.vue
index 042aba2..667b3f0 100644
--- a/src/runtime/components/Pages/testVuetify.vue
+++ b/src/runtime/components/Pages/testVuetify.vue
@@ -3,7 +3,7 @@
     <!-- Header first variant -->
     <partsHeader
       header-active-link-variant="bottom_line black"
-      variant="tabs"
+      variant="top-bar"
       :buttons="header_buttons"
       :menu="header_menu"
       :top-menu="header_top_menu_links"
@@ -18,21 +18,6 @@
         buttons slot
       </template>
     </partsHeader>
-
-    <v-main class="d-flex align-center">
-      <Forms
-        :title="'Заполните контактные данные и оставьте заявку на консультацию'"
-        :inputs="inputs"
-        @form-data="formData"
-        :style-form="'standard'"
-        :small-image="'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg'"
-        :socials="socials"
-        :alt-image="'sad'"
-        :info-company="infoCompany"
-        :checkbox-setting="checkboxSetting"
-        :commentary="commentary"
-      />
-    </v-main>
     <!-- Header first variant END -->
 
     <v-main class="d-flex align-center">
@@ -398,8 +383,8 @@ const header_menu = [
 
   {
     id: 3,
-    title: 'Projects',
-    url: '',
+    title: 'Vacancies',
+    url: '/vacancies',
   },
 
   {

From 28488627c278bbc9d749fe0761906cad34d2cecb Mon Sep 17 00:00:00 2001
From: AibtVlr <valeryaibatov@gmail.com>
Date: Mon, 23 Oct 2023 17:55:10 +0600
Subject: [PATCH 7/8] Create vacancies.stories.js

---
 src/stories/vacancies.stories.js | 225 +++++++++++++++++++++++++++++++
 1 file changed, 225 insertions(+)
 create mode 100644 src/stories/vacancies.stories.js

diff --git a/src/stories/vacancies.stories.js b/src/stories/vacancies.stories.js
new file mode 100644
index 0000000..eae6965
--- /dev/null
+++ b/src/stories/vacancies.stories.js
@@ -0,0 +1,225 @@
+import Vacancies from '../runtime/components/Parts/vacancies.vue'
+
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
+export default {
+  title: 'Parts/Vacancies',
+  component: Vacancies,
+  tags: ['autodocs'],
+};
+
+export const Standard = {
+  render: (args) => ({
+    components: { Vacancies },
+    setup() {
+      console.log(args)
+      return { args };
+    },
+    template:`<Vacancies v-bind="args">
+    </Vacancies>`
+  }),
+  args: {
+    cards: [
+      {
+        id: 1,
+        positionImageVacancy: 'end',
+        title: 'Card Title',
+        subtitle: 'Card Title',
+        price: "150 000 - 180 000 ₸",
+        imgSrc: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg",
+        imgAlt: "Картинка",
+        styleCard: "vacancy",
+        text: "A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.",
+        city: "Almaty, KZ",
+        button: {
+          to: '/vacancy'
+        }
+      },
+      {
+        id: 2,
+        positionImageVacancy: 'end',
+        title: 'Card Title',
+        subtitle: 'Card Title',
+        price: "150 000 - 180 000 ₸",
+        imgSrc: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg",
+        imgAlt: "Картинка",
+        styleCard: "vacancy",
+        text: "A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.",
+        city: "Almaty, KZ",
+        button: {
+          to: '/'
+        }
+      },
+      {
+        id: 3,
+        positionImageVacancy: 'end',
+        title: 'Card Title',
+        subtitle: 'Card Title',
+        price: "150 000 - 180 000 ₸",
+        imgSrc: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg",
+        imgAlt: "Картинка",
+        styleCard: "vacancy",
+        text: "A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.",
+        city: "Almaty, KZ",
+        button: {
+          to: '/'
+        }
+      },
+      {
+        id: 4,
+        positionImageVacancy: 'end',
+        title: 'Card Title',
+        subtitle: 'Card Title',
+        price: "150 000 - 180 000 ₸",
+        imgSrc: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg",
+        imgAlt: "Картинка",
+        styleCard: "vacancy",
+        text: "A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.",
+        city: "Almaty, KZ",
+        button: {
+          to: '/'
+        }
+      },
+      {
+        id: 5,
+        positionImageVacancy: 'end',
+        title: 'Card Title',
+        subtitle: 'Card Title',
+        price: "150 000 - 180 000 ₸",
+        imgSrc: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg",
+        imgAlt: "Картинка",
+        styleCard: "vacancy",
+        text: "A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.",
+        city: "Almaty, KZ",
+        button: {
+          to: '/'
+        }
+      },
+      {
+        id: 6,
+        positionImageVacancy: 'end',
+        title: 'Card Title',
+        subtitle: 'Card Title',
+        price: "150 000 - 180 000 ₸",
+        imgSrc: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg",
+        imgAlt: "Картинка",
+        styleCard: "vacancy",
+        text: "A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.",
+        city: "Almaty, KZ",
+        button: {
+          to: '/'
+        }
+      },
+      {
+        id: 7,
+        positionImageVacancy: 'end',
+        title: 'Card Title',
+        subtitle: 'Card Title',
+        price: "150 000 - 180 000 ₸",
+        imgSrc: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg",
+        imgAlt: "Картинка",
+        styleCard: "vacancy",
+        text: "A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.",
+        city: "Almaty, KZ",
+        button: {
+          to: '/'
+        }
+      },
+      {
+        id: 8,
+        positionImageVacancy: 'end',
+        title: 'Card Title',
+        subtitle: 'Card Title',
+        price: "150 000 - 180 000 ₸",
+        imgSrc: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg",
+        imgAlt: "Картинка",
+        styleCard: "vacancy",
+        text: "A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.",
+        city: "Almaty, KZ",
+        button: {
+          to: '/'
+        }
+      },
+      {
+        id: 9,
+        positionImageVacancy: 'end',
+        title: 'Card Title',
+        subtitle: 'Card Title',
+        price: "150 000 - 180 000 ₸",
+        imgSrc: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg",
+        imgAlt: "Картинка",
+        styleCard: "vacancy",
+        text: "A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.",
+        city: "Almaty, KZ",
+        button: {
+          to: '/'
+        }
+      },
+    ],
+    'form-title': "Заполните контактные данные и оставьте заявку на консультацию",
+    'form-inputs': [
+      {
+        label: "ФИО",
+        placeholder: "Аче Ачевович",
+        value: ''
+      },
+      {
+        // sm: 6,
+        // md: 6,
+        // lg: 6,
+        // xl: 6,
+        // xxl: 6,
+        label: "ФИО",
+        placeholder: "Аче Ачевович",
+        value: ''
+      },
+    ],
+    'form-style-form': "standard",
+    'form-small-image': "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg",
+    'form-socials': [
+      {
+        link: '321',
+        img: 'data:image/svg+xml,%3Csvg width=\'32\' height=\'32\' viewBox=\'0 0 32 32\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Crect width=\'32\' height=\'32\' rx=\'16\' fill=\'%234D4E52\'/%3E%3Cpath d=\'M22.4002 10.0819L19.9959 22.6339C19.9959 22.6339 19.6594 23.5042 18.7353 23.0868L13.1879 18.6822L13.1621 18.6692C13.9115 17.9724 19.7221 12.5622 19.9761 12.317C20.3692 11.9372 20.1251 11.7111 19.6687 11.998L11.0856 17.6425L7.77431 16.4887C7.77431 16.4887 7.2532 16.2968 7.20307 15.8794C7.15228 15.4613 7.79146 15.2352 7.79146 15.2352L21.2907 9.75126C21.2907 9.75126 22.4002 9.24644 22.4002 10.0819Z\' fill=\'white\'/%3E%3C/svg%3E%0A',
+        alt: '321',
+      },
+      {
+        link: '321',
+        img: 'data:image/svg+xml,%3Csvg width=\'32\' height=\'32\' viewBox=\'0 0 32 32\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Crect width=\'32\' height=\'32\' rx=\'16\' fill=\'%234D4E52\'/%3E%3Cpath d=\'M17.3259 16.2918H20.3036L20.7711 13.2483H17.3253V11.585C17.3253 10.3207 17.7359 9.1996 18.9113 9.1996H20.8002V6.5437C20.4683 6.49861 19.7664 6.3999 18.4402 6.3999C15.6707 6.3999 14.0471 7.87134 14.0471 11.2237V13.2483H11.2002V16.2918H14.0471V24.6567C14.6109 24.742 15.182 24.7999 15.7682 24.7999C16.2982 24.7999 16.8153 24.7512 17.3259 24.6817V16.2918Z\' fill=\'white\'/%3E%3C/svg%3E%0A',
+        alt: '321',
+      },
+      {
+        link: '321',
+        img: 'data:image/svg+xml,%3Csvg width=\'32\' height=\'32\' viewBox=\'0 0 32 32\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Crect width=\'32\' height=\'32\' rx=\'16\' fill=\'%234D4E52\'/%3E%3Cpath d=\'M22.3415 9.65019C20.761 8.07519 18.6537 7.2002 16.4293 7.2002C11.8049 7.2002 8.05854 10.9335 8.05854 15.5419C8.05854 17.0002 8.46829 18.4585 9.17073 19.6835L8 24.0002L12.4488 22.8335C13.6781 23.4752 15.0244 23.8252 16.4293 23.8252C21.0537 23.8252 24.8 20.0919 24.8 15.4835C24.7415 13.3252 23.9219 11.2252 22.3415 9.65019ZM20.4683 18.5169C20.2927 18.9835 19.4732 19.4502 19.0634 19.5085C18.7122 19.5669 18.2439 19.5669 17.7756 19.4502C17.4829 19.3335 17.0732 19.2169 16.6049 18.9835C14.4976 18.1085 13.1512 16.0085 13.0341 15.8335C12.9171 15.7169 12.1561 14.7252 12.1561 13.6752C12.1561 12.6252 12.6829 12.1585 12.8585 11.9252C13.0341 11.6919 13.2683 11.6919 13.4439 11.6919C13.561 11.6919 13.7366 11.6919 13.8537 11.6919C13.9707 11.6919 14.1463 11.6335 14.322 12.0419C14.4976 12.4502 14.9073 13.5002 14.9659 13.5585C15.0244 13.6752 15.0244 13.7919 14.9659 13.9085C14.9073 14.0252 14.8488 14.1419 14.7317 14.2585C14.6146 14.3752 14.4976 14.5502 14.439 14.6085C14.3219 14.7252 14.2049 14.8419 14.322 15.0169C14.439 15.2502 14.8488 15.8919 15.4927 16.4752C16.3122 17.1752 16.9561 17.4085 17.1902 17.5252C17.4244 17.6419 17.5415 17.5835 17.6585 17.4669C17.7756 17.3502 18.1854 16.8835 18.3024 16.6502C18.4195 16.4169 18.5951 16.4752 18.7707 16.5335C18.9463 16.5919 20 17.1169 20.1756 17.2335C20.4098 17.3502 20.5268 17.4085 20.5854 17.4669C20.6439 17.6419 20.6439 18.0502 20.4683 18.5169Z\' fill=\'white\'/%3E%3C/svg%3E%0A',
+        alt: '321',
+      },
+    ],
+    'form-alt-image': "sad",
+    'form-info-company': [
+      {
+        icon: "mdi-phone",
+        colorIcon: "primary",
+        sizeIcon: "large",
+        text: "Номер телефона компании"
+      },
+      {
+        icon: "mdi-information",
+        colorIcon: "primary",
+        sizeIcon: "large",
+        text: "Номер телефона компании"
+      },
+    ],
+    'form-checkbox-setting':  {
+      color: 'primary',
+      label: "Нажимая кнопку, я соглашаюсь на обработку персональных данных"
+    },
+    'form-commentary': {
+      label: "комментарий",
+  },
+  },
+
+  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=799%3A23548&mode=design&t=BOxkwX4fDO2LoaIg-1",
+    },
+  }
+}

From 0ed6b0aa283b6b79fde3f7ce5c28d46296d90143 Mon Sep 17 00:00:00 2001
From: AibtVlr <valeryaibatov@gmail.com>
Date: Mon, 23 Oct 2023 17:55:12 +0600
Subject: [PATCH 8/8] Create vacancy.stories.js

---
 src/stories/vacancy.stories.js | 162 +++++++++++++++++++++++++++++++++
 1 file changed, 162 insertions(+)
 create mode 100644 src/stories/vacancy.stories.js

diff --git a/src/stories/vacancy.stories.js b/src/stories/vacancy.stories.js
new file mode 100644
index 0000000..3d116b4
--- /dev/null
+++ b/src/stories/vacancy.stories.js
@@ -0,0 +1,162 @@
+import Vacancy from '../runtime/components/Parts/vacancy.vue'
+
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
+export default {
+  title: 'Parts/Vacancy',
+  component: Vacancy,
+  tags: ['autodocs'],
+};
+
+export const Standard = {
+  render: (args) => ({
+    components: { Vacancy },
+    setup() {
+      console.log(args)
+      return { args };
+    },
+    template:`<Vacancy v-bind="args">
+    </Vacancy>`
+  }),
+  args: {
+    name: "Дизайнер",
+    experience: "от 3-х лет и более",
+    schedule: "гибкий график или по проектная",
+    salary: "150 000 - 180 000 ₸",
+    requirements: [
+      {
+        id: 0,
+        title: 'Опыт в этой сфере от 3-х лет.'
+      },
+
+      {
+        id: 1,
+        title: 'Наличие в портфолио реализованных  дизайнов'
+      },
+
+      {
+        id: 2,
+        title: 'Проживание в Алматы'
+      },
+
+      {
+        id: 3,
+        title: 'Грамотная речь и знание 3 языков'
+      },
+
+      {
+        id: 4,
+        title: 'Креативное мышление'
+      },
+
+    ],
+    responsibilities: [
+      {
+        id: 0,
+        title: 'Своевременно и качественно выполнять художественно-оформительские работы по казам подразделений предприятия (клиентов).'
+      },
+
+      {
+        id: 1,
+        title: 'Составлять эскизы и выполнять работы по художественному оформлению публикаций различного характера'
+      },
+
+      {
+        id: 2,
+        title: 'Создавать иллюстрации к текстам (графики, рисунки, схемы, диаграммы, др.), разрабатывать новые шрифты, стили оформления'
+      },
+
+      {
+        id: 3,
+        title: 'Вносить исправления в проекты художественного и технического оформления по указанию художественного редактора.'
+      },
+
+      {
+        id: 4,
+        title: 'Умение работать в команде ;)'
+      },
+    ],
+    conditions: [
+      {
+        id: 0,
+        title: ' Участие в разных крутых проектов'
+      },
+
+      {
+        id: 1,
+        title: 'Общение и работа с профессиональными специалистами'
+      },
+
+      {
+        id: 2,
+        title: 'Зарплату'
+      }
+    ],
+
+    'form-title': "Заполните контактные данные и оставьте заявку на консультацию",
+    'form-inputs': [
+      {
+        label: "ФИО",
+        placeholder: "Аче Ачевович",
+        value: ''
+      },
+      {
+        // sm: 6,
+        // md: 6,
+        // lg: 6,
+        // xl: 6,
+        // xxl: 6,
+        label: "ФИО",
+        placeholder: "Аче Ачевович",
+        value: ''
+      },
+    ],
+    'form-style-form': "standard",
+    'form-small-image': "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg",
+    'form-socials': [
+      {
+        link: '321',
+        img: 'data:image/svg+xml,%3Csvg width=\'32\' height=\'32\' viewBox=\'0 0 32 32\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Crect width=\'32\' height=\'32\' rx=\'16\' fill=\'%234D4E52\'/%3E%3Cpath d=\'M22.4002 10.0819L19.9959 22.6339C19.9959 22.6339 19.6594 23.5042 18.7353 23.0868L13.1879 18.6822L13.1621 18.6692C13.9115 17.9724 19.7221 12.5622 19.9761 12.317C20.3692 11.9372 20.1251 11.7111 19.6687 11.998L11.0856 17.6425L7.77431 16.4887C7.77431 16.4887 7.2532 16.2968 7.20307 15.8794C7.15228 15.4613 7.79146 15.2352 7.79146 15.2352L21.2907 9.75126C21.2907 9.75126 22.4002 9.24644 22.4002 10.0819Z\' fill=\'white\'/%3E%3C/svg%3E%0A',
+        alt: '321',
+      },
+      {
+        link: '321',
+        img: 'data:image/svg+xml,%3Csvg width=\'32\' height=\'32\' viewBox=\'0 0 32 32\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Crect width=\'32\' height=\'32\' rx=\'16\' fill=\'%234D4E52\'/%3E%3Cpath d=\'M17.3259 16.2918H20.3036L20.7711 13.2483H17.3253V11.585C17.3253 10.3207 17.7359 9.1996 18.9113 9.1996H20.8002V6.5437C20.4683 6.49861 19.7664 6.3999 18.4402 6.3999C15.6707 6.3999 14.0471 7.87134 14.0471 11.2237V13.2483H11.2002V16.2918H14.0471V24.6567C14.6109 24.742 15.182 24.7999 15.7682 24.7999C16.2982 24.7999 16.8153 24.7512 17.3259 24.6817V16.2918Z\' fill=\'white\'/%3E%3C/svg%3E%0A',
+        alt: '321',
+      },
+      {
+        link: '321',
+        img: 'data:image/svg+xml,%3Csvg width=\'32\' height=\'32\' viewBox=\'0 0 32 32\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Crect width=\'32\' height=\'32\' rx=\'16\' fill=\'%234D4E52\'/%3E%3Cpath d=\'M22.3415 9.65019C20.761 8.07519 18.6537 7.2002 16.4293 7.2002C11.8049 7.2002 8.05854 10.9335 8.05854 15.5419C8.05854 17.0002 8.46829 18.4585 9.17073 19.6835L8 24.0002L12.4488 22.8335C13.6781 23.4752 15.0244 23.8252 16.4293 23.8252C21.0537 23.8252 24.8 20.0919 24.8 15.4835C24.7415 13.3252 23.9219 11.2252 22.3415 9.65019ZM20.4683 18.5169C20.2927 18.9835 19.4732 19.4502 19.0634 19.5085C18.7122 19.5669 18.2439 19.5669 17.7756 19.4502C17.4829 19.3335 17.0732 19.2169 16.6049 18.9835C14.4976 18.1085 13.1512 16.0085 13.0341 15.8335C12.9171 15.7169 12.1561 14.7252 12.1561 13.6752C12.1561 12.6252 12.6829 12.1585 12.8585 11.9252C13.0341 11.6919 13.2683 11.6919 13.4439 11.6919C13.561 11.6919 13.7366 11.6919 13.8537 11.6919C13.9707 11.6919 14.1463 11.6335 14.322 12.0419C14.4976 12.4502 14.9073 13.5002 14.9659 13.5585C15.0244 13.6752 15.0244 13.7919 14.9659 13.9085C14.9073 14.0252 14.8488 14.1419 14.7317 14.2585C14.6146 14.3752 14.4976 14.5502 14.439 14.6085C14.3219 14.7252 14.2049 14.8419 14.322 15.0169C14.439 15.2502 14.8488 15.8919 15.4927 16.4752C16.3122 17.1752 16.9561 17.4085 17.1902 17.5252C17.4244 17.6419 17.5415 17.5835 17.6585 17.4669C17.7756 17.3502 18.1854 16.8835 18.3024 16.6502C18.4195 16.4169 18.5951 16.4752 18.7707 16.5335C18.9463 16.5919 20 17.1169 20.1756 17.2335C20.4098 17.3502 20.5268 17.4085 20.5854 17.4669C20.6439 17.6419 20.6439 18.0502 20.4683 18.5169Z\' fill=\'white\'/%3E%3C/svg%3E%0A',
+        alt: '321',
+      },
+    ],
+    'form-alt-image': "sad",
+    'form-info-company': [
+      {
+        icon: "mdi-phone",
+        colorIcon: "primary",
+        sizeIcon: "large",
+        text: "Номер телефона компании"
+      },
+      {
+        icon: "mdi-information",
+        colorIcon: "primary",
+        sizeIcon: "large",
+        text: "Номер телефона компании"
+      },
+    ],
+    'form-checkbox-setting':  {
+      color: 'primary',
+      label: "Нажимая кнопку, я соглашаюсь на обработку персональных данных"
+    },
+    'form-commentary': {
+      label: "комментарий",
+    },
+  },
+
+  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=799%3A23548&mode=design&t=BOxkwX4fDO2LoaIg-1",
+    },
+  }
+}