From 271faab56549add5d50137cb5a12877cc57c6e09 Mon Sep 17 00:00:00 2001 From: AibtVlr Date: Fri, 6 Oct 2023 17:54:16 +0600 Subject: [PATCH 01/15] Update HeaderOne.vue --- .../components/Parts/header/HeaderOne.vue | 155 ++++++++++++------ 1 file changed, 103 insertions(+), 52 deletions(-) diff --git a/src/runtime/components/Parts/header/HeaderOne.vue b/src/runtime/components/Parts/header/HeaderOne.vue index ef084ec..9ee24b0 100644 --- a/src/runtime/components/Parts/header/HeaderOne.vue +++ b/src/runtime/components/Parts/header/HeaderOne.vue @@ -1,54 +1,80 @@ @@ -70,6 +109,11 @@ import { ref } from 'vue' const props = defineProps({ + headerHeight: { + type: Number, + default: 78 + }, + logo: { type: String, default: 'data:image/svg+xml,%3Csvg width=\'46\' height=\'20\' viewBox=\'0 0 46 20\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M0.86 15V0.879999H2.84V13.28H9.18V15H0.86ZM9.93766 9.92C9.93766 8.41333 10.4643 7.16 11.5177 6.16C12.571 5.14667 13.8577 4.64 15.3777 4.64C16.911 4.64 18.2043 5.14 19.2577 6.14C20.311 7.14 20.8377 8.4 20.8377 9.92C20.8377 11.44 20.311 12.7067 19.2577 13.72C18.2043 14.7333 16.9177 15.24 15.3977 15.24C13.8777 15.24 12.5843 14.7333 11.5177 13.72C10.4643 12.7067 9.93766 11.44 9.93766 9.92ZM11.9177 9.92C11.9177 10.9733 12.251 11.8467 12.9177 12.54C13.5977 13.22 14.4243 13.56 15.3977 13.56C16.3577 13.56 17.1777 13.2133 17.8577 12.52C18.5377 11.8267 18.8777 10.96 18.8777 9.92C18.8777 8.88 18.5377 8.02 17.8577 7.34C17.1777 6.66 16.3577 6.32 15.3977 6.32C14.4243 6.32 13.5977 6.66 12.9177 7.34C12.251 8.02 11.9177 8.88 11.9177 9.92ZM24.1358 16.84C25.0424 17.2933 25.9691 17.52 26.9158 17.52C27.8624 17.52 28.6291 17.2867 29.2158 16.82C29.8158 16.3667 30.1158 15.66 30.1158 14.7V13.88L30.1758 13.24H30.1358C29.4824 14.3333 28.4691 14.88 27.0958 14.88C25.7224 14.88 24.6224 14.3933 23.7958 13.42C22.9824 12.4467 22.5758 11.2133 22.5758 9.72C22.5758 8.22667 22.9691 7.00667 23.7558 6.06C24.5424 5.11333 25.6224 4.64 26.9958 4.64C27.6758 4.64 28.3024 4.76667 28.8758 5.02C29.4491 5.27333 29.8891 5.66 30.1958 6.18H30.2558C30.2158 6.1 30.1958 6 30.1958 5.88V4.88H32.0558V14.58C32.0558 15.38 31.9091 16.0867 31.6158 16.7C31.3358 17.3133 30.9491 17.7933 30.4558 18.14C29.9624 18.5 29.4224 18.7667 28.8358 18.94C28.2491 19.1133 27.6224 19.2 26.9558 19.2C25.7691 19.2 24.6158 18.92 23.4958 18.36L24.1358 16.84ZM24.5358 9.66C24.5358 10.7267 24.7958 11.5867 25.3158 12.24C25.8491 12.88 26.5691 13.2 27.4758 13.2C28.2624 13.2 28.9024 12.9267 29.3958 12.38C29.9024 11.8333 30.1558 10.9467 30.1558 9.72C30.1558 7.45333 29.2024 6.32 27.2958 6.32C26.4291 6.32 25.7491 6.62 25.2558 7.22C24.7758 7.80667 24.5358 8.62 24.5358 9.66ZM34.3908 9.92C34.3908 8.41333 34.9174 7.16 35.9708 6.16C37.0241 5.14667 38.3108 4.64 39.8308 4.64C41.3641 4.64 42.6574 5.14 43.7108 6.14C44.7641 7.14 45.2908 8.4 45.2908 9.92C45.2908 11.44 44.7641 12.7067 43.7108 13.72C42.6574 14.7333 41.3708 15.24 39.8508 15.24C38.3308 15.24 37.0374 14.7333 35.9708 13.72C34.9174 12.7067 34.3908 11.44 34.3908 9.92ZM36.3708 9.92C36.3708 10.9733 36.7041 11.8467 37.3708 12.54C38.0508 13.22 38.8774 13.56 39.8508 13.56C40.8108 13.56 41.6308 13.2133 42.3108 12.52C42.9908 11.8267 43.3308 10.96 43.3308 9.92C43.3308 8.88 42.9908 8.02 42.3108 7.34C41.6308 6.66 40.8108 6.32 39.8508 6.32C38.8774 6.32 38.0508 6.66 37.3708 7.34C36.7041 8.02 36.3708 8.88 36.3708 9.92Z\' fill=\'black\'/%3E%3C/svg%3E%0A' @@ -90,12 +134,23 @@ default: '', }, - sticky: { - type: Boolean, - default: false - } + menuTopLinks: { + type: Array, + default: () => [] + }, + + mobileHeight: { + type: Number, + default: 78, + }, }) + let screen_width + + if (process.client) { + screen_width = window.innerWidth + } + // Menu const menu_open = ref(false) @@ -168,8 +223,4 @@ font-weight: bold; } } - - .buttons-container { - gap: 16px; - } From c8347849689e1a70fdf4cc4d8315770a6e21bf23 Mon Sep 17 00:00:00 2001 From: AibtVlr Date: Fri, 6 Oct 2023 17:55:01 +0600 Subject: [PATCH 02/15] add second variant for header --- .../components/Parts/header/HeaderTwo.vue | 190 ++++++++++++++++++ src/stories/HeaderTwo.stories.js | 128 ++++++++++++ 2 files changed, 318 insertions(+) create mode 100644 src/runtime/components/Parts/header/HeaderTwo.vue create mode 100644 src/stories/HeaderTwo.stories.js diff --git a/src/runtime/components/Parts/header/HeaderTwo.vue b/src/runtime/components/Parts/header/HeaderTwo.vue new file mode 100644 index 0000000..5172b65 --- /dev/null +++ b/src/runtime/components/Parts/header/HeaderTwo.vue @@ -0,0 +1,190 @@ + + + + + diff --git a/src/stories/HeaderTwo.stories.js b/src/stories/HeaderTwo.stories.js new file mode 100644 index 0000000..b39845a --- /dev/null +++ b/src/stories/HeaderTwo.stories.js @@ -0,0 +1,128 @@ +import HeaderTwo from '../runtime/components/Parts/header/HeaderTwo.vue'; + +// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction +export default { + title: 'Parts/HeaderTwo', + component: HeaderTwo, + tags: ['autodocs'], +}; + +// More on writing stories with args: https://storybook.js.org/docs/vue/writing-stories/args +export const First = { + args: { + header_menu: [ + { + id: 0, + title: 'Home', + link: '/', + }, + + { + id: 0, + title: 'About us', + link: '#', + }, + + { + id: 0, + title: 'Services', + link: '#', + }, + + { + id: 0, + title: 'Projects', + link: '#', + }, + + { + id: 0, + title: 'Team', + link: '#', + }, + + { + id: 0, + title: 'Career', + link: '#', + }, + ], + header_top_menu: [ + { + id: 0, + title: 'Company 1', + url: '#' + }, + + { + id: 1, + title: 'Company 2', + url: '#' + }, + + { + id: 2, + title: 'Company 3', + url: '#' + } + ], + header_buttons_second: [ + { + id: 0, + text: 'Call to action', + color: 'primary', + variant: 'flat', + }, + ], + header_top_links: [ + { + id: 0, + title: 'Город', + url: '#', + }, + + { + id: 1, + title: '7888', + prepend_icon: 'mdi-phone-outline', + url: '#', + }, + + { + id: 2, + title: 'Адреса', + prepend_icon: 'mdi-map-marker-outline', + url: '#', + } + ], + langs: [ + { + id: 0, + title: 'Қазақша', + image: 'https://flagcdn.com/w20/kz.png' + }, + + { + id: 1, + title: 'Русский', + image: 'https://flagcdn.com/w20/ru.png' + }, + + { + id: 3, + title: 'English', + image: 'https://flagcdn.com/w20/us.png' + } + ], + selected_lang: { + title: 'Қазақша', + image: 'https://flagcdn.com/w20/kz.png' + } + }, + 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?node-id=1%3A165&mode=dev", + }, + }, +}; From 14685693bc66c879438d4ea96a2d5b74eea88ec5 Mon Sep 17 00:00:00 2001 From: AibtVlr Date: Fri, 6 Oct 2023 17:55:27 +0600 Subject: [PATCH 03/15] add third variant for header --- .../components/Parts/header/HeaderThree.vue | 169 ++++++++ src/stories/HeaderThree.stories.js | 375 ++++++++++++++++++ 2 files changed, 544 insertions(+) create mode 100644 src/runtime/components/Parts/header/HeaderThree.vue create mode 100644 src/stories/HeaderThree.stories.js diff --git a/src/runtime/components/Parts/header/HeaderThree.vue b/src/runtime/components/Parts/header/HeaderThree.vue new file mode 100644 index 0000000..2b02a90 --- /dev/null +++ b/src/runtime/components/Parts/header/HeaderThree.vue @@ -0,0 +1,169 @@ + + + + + diff --git a/src/stories/HeaderThree.stories.js b/src/stories/HeaderThree.stories.js new file mode 100644 index 0000000..843f63d --- /dev/null +++ b/src/stories/HeaderThree.stories.js @@ -0,0 +1,375 @@ +import HeaderThree from '../runtime/components/Parts/header/HeaderThree.vue'; + +// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction +export default { + title: 'Parts/HeaderThree', + component: HeaderThree, + tags: ['autodocs'], +}; + +// More on writing stories with args: https://storybook.js.org/docs/vue/writing-stories/args +export const First = { + args: { + header_tabs: [ + { + id: 0, + title: 'Bank', + list: [ + { + id: '0', + title: 'Credit cards', + link: '#' + }, + + { + id: '2', + title: 'Debit cards', + link: '#' + }, + + { + id: '3', + title: 'Services', + link: '#' + }, + + { + id: '4', + title: 'Projects', + link: '#' + }, + + { + id: '5', + title: 'Team', + link: '#' + }, + + { + id: '1', + title: 'Career', + link: '#' + }, + ] + }, + + { + id: 1, + title: 'Business', + list: [ + { + id: '0', + title: 'Credit cards', + link: '#' + }, + + { + id: '2', + title: 'Debit cards', + link: '#' + }, + + { + id: '3', + title: 'Services', + link: '#' + }, + + { + id: '4', + title: 'Projects', + link: '#' + }, + + { + id: '5', + title: 'Team', + link: '#' + }, + + { + id: '1', + title: 'Career', + link: '#' + }, + ] + }, + + { + id: 2, + title: 'Checkout', + list: [ + { + id: '0', + title: 'Credit cards', + link: '#' + }, + + { + id: '2', + title: 'Debit cards', + link: '#' + }, + + { + id: '3', + title: 'Services', + link: '#' + }, + + { + id: '4', + title: 'Projects', + link: '#' + }, + + { + id: '5', + title: 'Team', + link: '#' + }, + + { + id: '1', + title: 'Career', + link: '#' + }, + ] + }, + + { + id: 3, + title: 'Investment', + list: [ + { + id: '0', + title: 'Credit cards', + link: '#' + }, + + { + id: '2', + title: 'Debit cards', + link: '#' + }, + + { + id: '3', + title: 'Services', + link: '#' + }, + + { + id: '4', + title: 'Projects', + link: '#' + }, + + { + id: '5', + title: 'Team', + link: '#' + }, + + { + id: '1', + title: 'Career', + link: '#' + }, + ] + }, + + { + id: 4, + title: 'Insurance', + list: [ + { + id: '0', + title: 'Credit cards', + link: '#' + }, + + { + id: '2', + title: 'Debit cards', + link: '#' + }, + + { + id: '3', + title: 'Services', + link: '#' + }, + + { + id: '4', + title: 'Projects', + link: '#' + }, + + { + id: '5', + title: 'Team', + link: '#' + }, + + { + id: '1', + title: 'Career', + link: '#' + }, + ] + }, + + { + id: 5, + title: 'Travel', + list: [ + { + id: '0', + title: 'Credit cards', + link: '#' + }, + + { + id: '2', + title: 'Debit cards', + link: '#' + }, + + { + id: '3', + title: 'Services', + link: '#' + }, + + { + id: '4', + title: 'Projects', + link: '#' + }, + + { + id: '5', + title: 'Team', + link: '#' + }, + + { + id: '1', + title: 'Career', + link: '#' + }, + ] + }, + + { + id: 6, + title: 'City', + list: [ + { + id: '0', + title: 'Credit cards', + link: '#' + }, + + { + id: '2', + title: 'Debit cards', + link: '#' + }, + + { + id: '3', + title: 'Services', + link: '#' + }, + + { + id: '4', + title: 'Projects', + link: '#' + }, + + { + id: '5', + title: 'Team', + link: '#' + }, + + { + id: '1', + title: 'Career', + link: '#' + }, + ] + }, + ], + header_buttons: [ + { + id: 0, + text: 'Contact us', + color: 'primary', + variant: 'outlined', + }, + + { + id: 1, + text: 'Login', + color: 'primary', + elevation: '1', + variant: 'flat', + } + ], + header_top_links: [ + { + id: 0, + title: 'Город', + url: '#', + }, + + { + id: 1, + title: '7888', + prepend_icon: 'mdi-phone-outline', + url: '#', + }, + + { + id: 2, + title: 'Адреса', + prepend_icon: 'mdi-map-marker-outline', + url: '#', + } + ], + langs: [ + { + id: 0, + title: 'Қазақша', + image: 'https://flagcdn.com/w20/kz.png' + }, + + { + id: 1, + title: 'Русский', + image: 'https://flagcdn.com/w20/ru.png' + }, + + { + id: 3, + title: 'English', + image: 'https://flagcdn.com/w20/us.png' + } + ], + selected_lang: { + title: 'Қазақша', + image: 'https://flagcdn.com/w20/kz.png' + } + }, + 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?node-id=1%3A165&mode=dev", + }, + }, +}; From e8b0875a28cc5e849966242ade2f574fd4e51aae Mon Sep 17 00:00:00 2001 From: AibtVlr Date: Fri, 6 Oct 2023 17:55:56 +0600 Subject: [PATCH 04/15] add fourth variant for header --- .../components/Parts/header/HeaderFour.vue | 32 +++++ src/stories/HeaderFour.stories.js | 113 ++++++++++++++++++ 2 files changed, 145 insertions(+) create mode 100644 src/runtime/components/Parts/header/HeaderFour.vue create mode 100644 src/stories/HeaderFour.stories.js diff --git a/src/runtime/components/Parts/header/HeaderFour.vue b/src/runtime/components/Parts/header/HeaderFour.vue new file mode 100644 index 0000000..2573d26 --- /dev/null +++ b/src/runtime/components/Parts/header/HeaderFour.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/src/stories/HeaderFour.stories.js b/src/stories/HeaderFour.stories.js new file mode 100644 index 0000000..2509580 --- /dev/null +++ b/src/stories/HeaderFour.stories.js @@ -0,0 +1,113 @@ +import HeaderFour from '../runtime/components/Parts/header/HeaderFour.vue'; + +// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction +export default { + title: 'Parts/HeaderFour', + component: HeaderFour, + tags: ['autodocs'], +}; + +// More on writing stories with args: https://storybook.js.org/docs/vue/writing-stories/args +export const First = { + args: { + header_menu: [ + { + id: 0, + title: 'Home', + link: '/', + }, + + { + id: 0, + title: 'About us', + link: '#', + }, + + { + id: 0, + title: 'Services', + link: '#', + }, + + { + id: 0, + title: 'Projects', + link: '#', + }, + + { + id: 0, + title: 'Team', + link: '#', + }, + + { + id: 0, + title: 'Career', + link: '#', + }, + ], + header_buttons: [ + { + id: 0, + text: 'Contact us', + color: 'grey-darken-3', + variant: 'outlined', + }, + + { + id: 1, + text: 'Login', + color: 'grey-darken-3', + elevation: '1', + variant: 'flat', + } + ], + header_top_menu_links: [ + { + id: 0, + title: 'Company 1', + url: '#' + }, + { + id: 1, + title: 'Company 2', + url: '#' + }, + { + id: 2, + title: 'Company 3', + url: '#' + } + ], + langs: [ + { + id: 0, + title: 'Қазақша', + image: 'https://flagcdn.com/w20/kz.png' + }, + + { + id: 1, + title: 'Русский', + image: 'https://flagcdn.com/w20/ru.png' + }, + + { + id: 3, + title: 'English', + image: 'https://flagcdn.com/w20/us.png' + } + ], + selected_lang: { + title: 'Қазақша', + image: 'https://flagcdn.com/w20/kz.png' + } + }, + 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?node-id=1%3A165&mode=dev", + }, + }, +}; From 1604d357956e2eac1601f143e6c9992b596ed8a3 Mon Sep 17 00:00:00 2001 From: AibtVlr Date: Fri, 6 Oct 2023 17:56:15 +0600 Subject: [PATCH 05/15] Update testVuetify.vue --- src/runtime/components/Pages/testVuetify.vue | 526 ++++++++++++++++++- 1 file changed, 522 insertions(+), 4 deletions(-) diff --git a/src/runtime/components/Pages/testVuetify.vue b/src/runtime/components/Pages/testVuetify.vue index 557bf92..71dc1fa 100644 --- a/src/runtime/components/Pages/testVuetify.vue +++ b/src/runtime/components/Pages/testVuetify.vue @@ -7,12 +7,135 @@

I'm the drawer

+ + + + + + + + + + + + + + + + + + + + @@ -43,6 +166,9 @@ import { ref } from 'vue' import Card from "../Parts/Card.vue" import footerOne from "../Parts/footer/footer.vue"; import HeaderOne from '../Parts/header/HeaderOne.vue' +import HeaderTwo from '../Parts/header/HeaderTwo.vue' +import HeaderThree from '../Parts/header/HeaderThree.vue' +import HeaderFour from '../Parts/header/HeaderFour.vue' const showDrawer = ref(false); @@ -262,6 +388,7 @@ const menu = [ ] }, ] + const store = [ { id: 1, @@ -276,6 +403,7 @@ const store = [ link: "/" }, ] + const nav = [ { id: 1, @@ -394,7 +522,7 @@ const header_buttons = [ { id: 0, text: 'Contact us', - color: 'grey-darken-3', + color: 'primary', variant: 'outlined', function: func, }, @@ -402,12 +530,402 @@ const header_buttons = [ { id: 1, text: 'Login', - color: 'grey-darken-3', + color: 'primary', elevation: '1', variant: 'flat', } ] +const header_top_menu = [ + { + id: 0, + title: 'Company 1', + url: '#' + }, + + { + id: 1, + title: 'Company 2', + url: '#' + }, + + { + id: 2, + title: 'Company 3', + url: '#' + } +] + +const header_top_links = [ + { + id: 0, + title: 'Город', + url: '#', + }, + + { + id: 1, + title: '7888', + prepend_icon: 'mdi-phone-outline', + url: '#', + }, + + { + id: 2, + title: 'Адреса', + prepend_icon: 'mdi-map-marker-outline', + url: '#', + } +] + +const header_top_menu_links = [ + { + id: 0, + title: 'Company 1', + url: '#' + }, + { + id: 1, + title: 'Company 2', + url: '#' + }, + { + id: 2, + title: 'Company 3', + url: '#' + } +] + +const header_buttons_second = [ + { + id: 0, + text: 'Call to action', + color: 'primary', + variant: 'flat', + }, +] + +const header_tabs = [ + { + id: 0, + title: 'Bank', + list: [ + { + id: '0', + title: 'Credit cards', + link: '#' + }, + + { + id: '2', + title: 'Debit cards', + link: '#' + }, + + { + id: '3', + title: 'Services', + link: '#' + }, + + { + id: '4', + title: 'Projects', + link: '#' + }, + + { + id: '5', + title: 'Team', + link: '#' + }, + + { + id: '1', + title: 'Career', + link: '#' + }, + ] + }, + + { + id: 1, + title: 'Business', + list: [ + { + id: '0', + title: 'Credit cards', + link: '#' + }, + + { + id: '2', + title: 'Debit cards', + link: '#' + }, + + { + id: '3', + title: 'Services', + link: '#' + }, + + { + id: '4', + title: 'Projects', + link: '#' + }, + + { + id: '5', + title: 'Team', + link: '#' + }, + + { + id: '1', + title: 'Career', + link: '#' + }, + ] + }, + + { + id: 2, + title: 'Checkout', + list: [ + { + id: '0', + title: 'Credit cards', + link: '#' + }, + + { + id: '2', + title: 'Debit cards', + link: '#' + }, + + { + id: '3', + title: 'Services', + link: '#' + }, + + { + id: '4', + title: 'Projects', + link: '#' + }, + + { + id: '5', + title: 'Team', + link: '#' + }, + + { + id: '1', + title: 'Career', + link: '#' + }, + ] + }, + + { + id: 3, + title: 'Investment', + list: [ + { + id: '0', + title: 'Credit cards', + link: '#' + }, + + { + id: '2', + title: 'Debit cards', + link: '#' + }, + + { + id: '3', + title: 'Services', + link: '#' + }, + + { + id: '4', + title: 'Projects', + link: '#' + }, + + { + id: '5', + title: 'Team', + link: '#' + }, + + { + id: '1', + title: 'Career', + link: '#' + }, + ] + }, + + { + id: 4, + title: 'Insurance', + list: [ + { + id: '0', + title: 'Credit cards', + link: '#' + }, + + { + id: '2', + title: 'Debit cards', + link: '#' + }, + + { + id: '3', + title: 'Services', + link: '#' + }, + + { + id: '4', + title: 'Projects', + link: '#' + }, + + { + id: '5', + title: 'Team', + link: '#' + }, + + { + id: '1', + title: 'Career', + link: '#' + }, + ] + }, + + { + id: 5, + title: 'Travel', + list: [ + { + id: '0', + title: 'Credit cards', + link: '#' + }, + + { + id: '2', + title: 'Debit cards', + link: '#' + }, + + { + id: '3', + title: 'Services', + link: '#' + }, + + { + id: '4', + title: 'Projects', + link: '#' + }, + + { + id: '5', + title: 'Team', + link: '#' + }, + + { + id: '1', + title: 'Career', + link: '#' + }, + ] + }, + + { + id: 6, + title: 'City', + list: [ + { + id: '0', + title: 'Credit cards', + link: '#' + }, + + { + id: '2', + title: 'Debit cards', + link: '#' + }, + + { + id: '3', + title: 'Services', + link: '#' + }, + + { + id: '4', + title: 'Projects', + link: '#' + }, + + { + id: '5', + title: 'Team', + link: '#' + }, + + { + id: '1', + title: 'Career', + link: '#' + }, + ] + }, +] + +const selected_lang = ref({ + title: 'Қазақша', + image: 'https://flagcdn.com/w20/kz.png' +}) + +const langs = ref([ + { + id: 0, + title: 'Қазақша', + image: 'https://flagcdn.com/w20/kz.png' + }, + + { + id: 1, + title: 'Русский', + image: 'https://flagcdn.com/w20/ru.png' + }, + + { + id: 3, + title: 'English', + image: 'https://flagcdn.com/w20/us.png' + } +]) + /* Redundant unused code to test treeshaking */ const unusedFunction = () => console.log('unusedFunction'); From 118c69cbc529f95ae935792038b578384f33a751 Mon Sep 17 00:00:00 2001 From: AibtVlr Date: Fri, 6 Oct 2023 17:57:03 +0600 Subject: [PATCH 06/15] Update module.ts --- src/module.ts | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/module.ts b/src/module.ts index 1159dc6..68e155f 100644 --- a/src/module.ts +++ b/src/module.ts @@ -35,11 +35,26 @@ export default defineNuxtModule({ name: 'partsCard', // name of the component to be used in vue templates filePath: resolver.resolve('runtime/components/Parts/Card.vue') }) - + // Headers addComponent({ name: 'HeaderOne', filePath: resolver.resolve('runtime/components/Parts/HeaderOne.vue') }) + + addComponent({ + name: 'HeaderTwo', + filePath: resolver.resolve('runtime/components/Parts/HeaderTwo.vue') + }) + + addComponent({ + name: 'HeaderThree', + filePath: resolver.resolve('runtime/components/Parts/HeaderThree.vue') + }) + + addComponent({ + name: 'HeaderFour', + filePath: resolver.resolve('runtime/components/Parts/HeaderFour.vue') + }) } }) From f3582c2d386a76672d05071ec0e1ad5cbfede709 Mon Sep 17 00:00:00 2001 From: AibtVlr Date: Tue, 10 Oct 2023 17:18:27 +0600 Subject: [PATCH 07/15] remove old headers --- .../components/Parts/header/HeaderFour.vue | 32 -- .../components/Parts/header/HeaderOne.vue | 226 ----------- .../components/Parts/header/HeaderThree.vue | 169 -------- .../components/Parts/header/HeaderTwo.vue | 190 --------- src/stories/HeaderFour.stories.js | 113 ------ src/stories/HeaderOne.stories.js | 73 ---- src/stories/HeaderThree.stories.js | 375 ------------------ src/stories/HeaderTwo.stories.js | 128 ------ 8 files changed, 1306 deletions(-) delete mode 100644 src/runtime/components/Parts/header/HeaderFour.vue delete mode 100644 src/runtime/components/Parts/header/HeaderOne.vue delete mode 100644 src/runtime/components/Parts/header/HeaderThree.vue delete mode 100644 src/runtime/components/Parts/header/HeaderTwo.vue delete mode 100644 src/stories/HeaderFour.stories.js delete mode 100644 src/stories/HeaderOne.stories.js delete mode 100644 src/stories/HeaderThree.stories.js delete mode 100644 src/stories/HeaderTwo.stories.js diff --git a/src/runtime/components/Parts/header/HeaderFour.vue b/src/runtime/components/Parts/header/HeaderFour.vue deleted file mode 100644 index 2573d26..0000000 --- a/src/runtime/components/Parts/header/HeaderFour.vue +++ /dev/null @@ -1,32 +0,0 @@ - - - - - diff --git a/src/runtime/components/Parts/header/HeaderOne.vue b/src/runtime/components/Parts/header/HeaderOne.vue deleted file mode 100644 index 9ee24b0..0000000 --- a/src/runtime/components/Parts/header/HeaderOne.vue +++ /dev/null @@ -1,226 +0,0 @@ - - - - - diff --git a/src/runtime/components/Parts/header/HeaderThree.vue b/src/runtime/components/Parts/header/HeaderThree.vue deleted file mode 100644 index 2b02a90..0000000 --- a/src/runtime/components/Parts/header/HeaderThree.vue +++ /dev/null @@ -1,169 +0,0 @@ - - - - - diff --git a/src/runtime/components/Parts/header/HeaderTwo.vue b/src/runtime/components/Parts/header/HeaderTwo.vue deleted file mode 100644 index 5172b65..0000000 --- a/src/runtime/components/Parts/header/HeaderTwo.vue +++ /dev/null @@ -1,190 +0,0 @@ - - - - - diff --git a/src/stories/HeaderFour.stories.js b/src/stories/HeaderFour.stories.js deleted file mode 100644 index 2509580..0000000 --- a/src/stories/HeaderFour.stories.js +++ /dev/null @@ -1,113 +0,0 @@ -import HeaderFour from '../runtime/components/Parts/header/HeaderFour.vue'; - -// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction -export default { - title: 'Parts/HeaderFour', - component: HeaderFour, - tags: ['autodocs'], -}; - -// More on writing stories with args: https://storybook.js.org/docs/vue/writing-stories/args -export const First = { - args: { - header_menu: [ - { - id: 0, - title: 'Home', - link: '/', - }, - - { - id: 0, - title: 'About us', - link: '#', - }, - - { - id: 0, - title: 'Services', - link: '#', - }, - - { - id: 0, - title: 'Projects', - link: '#', - }, - - { - id: 0, - title: 'Team', - link: '#', - }, - - { - id: 0, - title: 'Career', - link: '#', - }, - ], - header_buttons: [ - { - id: 0, - text: 'Contact us', - color: 'grey-darken-3', - variant: 'outlined', - }, - - { - id: 1, - text: 'Login', - color: 'grey-darken-3', - elevation: '1', - variant: 'flat', - } - ], - header_top_menu_links: [ - { - id: 0, - title: 'Company 1', - url: '#' - }, - { - id: 1, - title: 'Company 2', - url: '#' - }, - { - id: 2, - title: 'Company 3', - url: '#' - } - ], - langs: [ - { - id: 0, - title: 'Қазақша', - image: 'https://flagcdn.com/w20/kz.png' - }, - - { - id: 1, - title: 'Русский', - image: 'https://flagcdn.com/w20/ru.png' - }, - - { - id: 3, - title: 'English', - image: 'https://flagcdn.com/w20/us.png' - } - ], - selected_lang: { - title: 'Қазақша', - image: 'https://flagcdn.com/w20/kz.png' - } - }, - 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?node-id=1%3A165&mode=dev", - }, - }, -}; diff --git a/src/stories/HeaderOne.stories.js b/src/stories/HeaderOne.stories.js deleted file mode 100644 index 74bd9ad..0000000 --- a/src/stories/HeaderOne.stories.js +++ /dev/null @@ -1,73 +0,0 @@ -import HeaderOne from '../runtime/components/Parts/header/HeaderOne.vue'; - -// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction -export default { - title: 'Parts/HeaderOne', - component: HeaderOne, - tags: ['autodocs'], -}; - -// More on writing stories with args: https://storybook.js.org/docs/vue/writing-stories/args -export const First = { - args: { - header_menu: [ - { - id: 0, - title: 'Home', - link: '/', - }, - - { - id: 0, - title: 'About us', - link: '#', - }, - - { - id: 0, - title: 'Services', - link: '#', - }, - - { - id: 0, - title: 'Projects', - link: '#', - }, - - { - id: 0, - title: 'Team', - link: '#', - }, - - { - id: 0, - title: 'Career', - link: '#', - }, - ], - header_buttons: [ - { - id: 0, - text: 'Contact us', - color: 'grey-darken-3', - variant: 'outlined', - }, - - { - id: 1, - text: 'Login', - color: 'grey-darken-3', - elevation: '1', - variant: 'flat', - } - ] - }, - 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?node-id=1%3A165&mode=dev", - }, - }, -}; diff --git a/src/stories/HeaderThree.stories.js b/src/stories/HeaderThree.stories.js deleted file mode 100644 index 843f63d..0000000 --- a/src/stories/HeaderThree.stories.js +++ /dev/null @@ -1,375 +0,0 @@ -import HeaderThree from '../runtime/components/Parts/header/HeaderThree.vue'; - -// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction -export default { - title: 'Parts/HeaderThree', - component: HeaderThree, - tags: ['autodocs'], -}; - -// More on writing stories with args: https://storybook.js.org/docs/vue/writing-stories/args -export const First = { - args: { - header_tabs: [ - { - id: 0, - title: 'Bank', - list: [ - { - id: '0', - title: 'Credit cards', - link: '#' - }, - - { - id: '2', - title: 'Debit cards', - link: '#' - }, - - { - id: '3', - title: 'Services', - link: '#' - }, - - { - id: '4', - title: 'Projects', - link: '#' - }, - - { - id: '5', - title: 'Team', - link: '#' - }, - - { - id: '1', - title: 'Career', - link: '#' - }, - ] - }, - - { - id: 1, - title: 'Business', - list: [ - { - id: '0', - title: 'Credit cards', - link: '#' - }, - - { - id: '2', - title: 'Debit cards', - link: '#' - }, - - { - id: '3', - title: 'Services', - link: '#' - }, - - { - id: '4', - title: 'Projects', - link: '#' - }, - - { - id: '5', - title: 'Team', - link: '#' - }, - - { - id: '1', - title: 'Career', - link: '#' - }, - ] - }, - - { - id: 2, - title: 'Checkout', - list: [ - { - id: '0', - title: 'Credit cards', - link: '#' - }, - - { - id: '2', - title: 'Debit cards', - link: '#' - }, - - { - id: '3', - title: 'Services', - link: '#' - }, - - { - id: '4', - title: 'Projects', - link: '#' - }, - - { - id: '5', - title: 'Team', - link: '#' - }, - - { - id: '1', - title: 'Career', - link: '#' - }, - ] - }, - - { - id: 3, - title: 'Investment', - list: [ - { - id: '0', - title: 'Credit cards', - link: '#' - }, - - { - id: '2', - title: 'Debit cards', - link: '#' - }, - - { - id: '3', - title: 'Services', - link: '#' - }, - - { - id: '4', - title: 'Projects', - link: '#' - }, - - { - id: '5', - title: 'Team', - link: '#' - }, - - { - id: '1', - title: 'Career', - link: '#' - }, - ] - }, - - { - id: 4, - title: 'Insurance', - list: [ - { - id: '0', - title: 'Credit cards', - link: '#' - }, - - { - id: '2', - title: 'Debit cards', - link: '#' - }, - - { - id: '3', - title: 'Services', - link: '#' - }, - - { - id: '4', - title: 'Projects', - link: '#' - }, - - { - id: '5', - title: 'Team', - link: '#' - }, - - { - id: '1', - title: 'Career', - link: '#' - }, - ] - }, - - { - id: 5, - title: 'Travel', - list: [ - { - id: '0', - title: 'Credit cards', - link: '#' - }, - - { - id: '2', - title: 'Debit cards', - link: '#' - }, - - { - id: '3', - title: 'Services', - link: '#' - }, - - { - id: '4', - title: 'Projects', - link: '#' - }, - - { - id: '5', - title: 'Team', - link: '#' - }, - - { - id: '1', - title: 'Career', - link: '#' - }, - ] - }, - - { - id: 6, - title: 'City', - list: [ - { - id: '0', - title: 'Credit cards', - link: '#' - }, - - { - id: '2', - title: 'Debit cards', - link: '#' - }, - - { - id: '3', - title: 'Services', - link: '#' - }, - - { - id: '4', - title: 'Projects', - link: '#' - }, - - { - id: '5', - title: 'Team', - link: '#' - }, - - { - id: '1', - title: 'Career', - link: '#' - }, - ] - }, - ], - header_buttons: [ - { - id: 0, - text: 'Contact us', - color: 'primary', - variant: 'outlined', - }, - - { - id: 1, - text: 'Login', - color: 'primary', - elevation: '1', - variant: 'flat', - } - ], - header_top_links: [ - { - id: 0, - title: 'Город', - url: '#', - }, - - { - id: 1, - title: '7888', - prepend_icon: 'mdi-phone-outline', - url: '#', - }, - - { - id: 2, - title: 'Адреса', - prepend_icon: 'mdi-map-marker-outline', - url: '#', - } - ], - langs: [ - { - id: 0, - title: 'Қазақша', - image: 'https://flagcdn.com/w20/kz.png' - }, - - { - id: 1, - title: 'Русский', - image: 'https://flagcdn.com/w20/ru.png' - }, - - { - id: 3, - title: 'English', - image: 'https://flagcdn.com/w20/us.png' - } - ], - selected_lang: { - title: 'Қазақша', - image: 'https://flagcdn.com/w20/kz.png' - } - }, - 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?node-id=1%3A165&mode=dev", - }, - }, -}; diff --git a/src/stories/HeaderTwo.stories.js b/src/stories/HeaderTwo.stories.js deleted file mode 100644 index b39845a..0000000 --- a/src/stories/HeaderTwo.stories.js +++ /dev/null @@ -1,128 +0,0 @@ -import HeaderTwo from '../runtime/components/Parts/header/HeaderTwo.vue'; - -// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction -export default { - title: 'Parts/HeaderTwo', - component: HeaderTwo, - tags: ['autodocs'], -}; - -// More on writing stories with args: https://storybook.js.org/docs/vue/writing-stories/args -export const First = { - args: { - header_menu: [ - { - id: 0, - title: 'Home', - link: '/', - }, - - { - id: 0, - title: 'About us', - link: '#', - }, - - { - id: 0, - title: 'Services', - link: '#', - }, - - { - id: 0, - title: 'Projects', - link: '#', - }, - - { - id: 0, - title: 'Team', - link: '#', - }, - - { - id: 0, - title: 'Career', - link: '#', - }, - ], - header_top_menu: [ - { - id: 0, - title: 'Company 1', - url: '#' - }, - - { - id: 1, - title: 'Company 2', - url: '#' - }, - - { - id: 2, - title: 'Company 3', - url: '#' - } - ], - header_buttons_second: [ - { - id: 0, - text: 'Call to action', - color: 'primary', - variant: 'flat', - }, - ], - header_top_links: [ - { - id: 0, - title: 'Город', - url: '#', - }, - - { - id: 1, - title: '7888', - prepend_icon: 'mdi-phone-outline', - url: '#', - }, - - { - id: 2, - title: 'Адреса', - prepend_icon: 'mdi-map-marker-outline', - url: '#', - } - ], - langs: [ - { - id: 0, - title: 'Қазақша', - image: 'https://flagcdn.com/w20/kz.png' - }, - - { - id: 1, - title: 'Русский', - image: 'https://flagcdn.com/w20/ru.png' - }, - - { - id: 3, - title: 'English', - image: 'https://flagcdn.com/w20/us.png' - } - ], - selected_lang: { - title: 'Қазақша', - image: 'https://flagcdn.com/w20/kz.png' - } - }, - 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?node-id=1%3A165&mode=dev", - }, - }, -}; From f450764531fc073d17977800e682fcdbd426bb3f Mon Sep 17 00:00:00 2001 From: AibtVlr Date: Tue, 10 Oct 2023 17:18:46 +0600 Subject: [PATCH 08/15] add pages --- playground/pages/about.vue | 19 +++++ playground/pages/index.vue | 160 +++++++++++++++++++++++++++++++++++++ 2 files changed, 179 insertions(+) create mode 100644 playground/pages/about.vue create mode 100644 playground/pages/index.vue diff --git a/playground/pages/about.vue b/playground/pages/about.vue new file mode 100644 index 0000000..9bd1f4a --- /dev/null +++ b/playground/pages/about.vue @@ -0,0 +1,19 @@ + + + + + diff --git a/playground/pages/index.vue b/playground/pages/index.vue new file mode 100644 index 0000000..2778877 --- /dev/null +++ b/playground/pages/index.vue @@ -0,0 +1,160 @@ + + + + + From 7d6bfef777a9cc05d8775d4b0fe40ae0b82a69e8 Mon Sep 17 00:00:00 2001 From: AibtVlr Date: Tue, 10 Oct 2023 17:19:13 +0600 Subject: [PATCH 09/15] remove old headers from module.ts --- src/module.ts | 22 ++++++---------------- 1 file changed, 6 insertions(+), 16 deletions(-) diff --git a/src/module.ts b/src/module.ts index 68e155f..f08837d 100644 --- a/src/module.ts +++ b/src/module.ts @@ -36,25 +36,15 @@ export default defineNuxtModule({ filePath: resolver.resolve('runtime/components/Parts/Card.vue') }) - // Headers - addComponent({ - name: 'HeaderOne', - filePath: resolver.resolve('runtime/components/Parts/HeaderOne.vue') - }) - - addComponent({ - name: 'HeaderTwo', - filePath: resolver.resolve('runtime/components/Parts/HeaderTwo.vue') - }) - - addComponent({ - name: 'HeaderThree', - filePath: resolver.resolve('runtime/components/Parts/HeaderThree.vue') + // Header + addComponent( { + name: 'partsHeader', + filePath: resolver.resolve('runtime/components/Parts/header.vue') }) addComponent({ - name: 'HeaderFour', - filePath: resolver.resolve('runtime/components/Parts/HeaderFour.vue') + name: 'News', + filePath: resolver.resolve('runtime/components/Parts/News.vue') }) } }) From f5da21c6d7b0031455d4f1f992de93a800e9c758 Mon Sep 17 00:00:00 2001 From: AibtVlr Date: Tue, 10 Oct 2023 17:20:25 +0600 Subject: [PATCH 10/15] create header component and merge old headers into it --- .../components/Parts/header/header.vue | 339 ++++++++++++++++++ 1 file changed, 339 insertions(+) create mode 100644 src/runtime/components/Parts/header/header.vue diff --git a/src/runtime/components/Parts/header/header.vue b/src/runtime/components/Parts/header/header.vue new file mode 100644 index 0000000..538522a --- /dev/null +++ b/src/runtime/components/Parts/header/header.vue @@ -0,0 +1,339 @@ + + + + + From 5eaf6b1352dec745b632934bc62326b01c2cc4ff Mon Sep 17 00:00:00 2001 From: AibtVlr Date: Tue, 10 Oct 2023 17:20:51 +0600 Subject: [PATCH 11/15] merge --- src/runtime/components/Parts/Card.vue | 36 +++--- src/runtime/components/Parts/News.vue | 108 +++++++++++++++++ src/stories/Card.stories.js | 96 ++++++++++------ src/stories/partsNews.stories.js | 159 ++++++++++++++++++++++++++ 4 files changed, 349 insertions(+), 50 deletions(-) create mode 100644 src/runtime/components/Parts/News.vue create mode 100644 src/stories/partsNews.stories.js diff --git a/src/runtime/components/Parts/Card.vue b/src/runtime/components/Parts/Card.vue index 01bae73..992313b 100644 --- a/src/runtime/components/Parts/Card.vue +++ b/src/runtime/components/Parts/Card.vue @@ -1,9 +1,10 @@ diff --git a/src/runtime/components/Parts/News.vue b/src/runtime/components/Parts/News.vue new file mode 100644 index 0000000..99d35b9 --- /dev/null +++ b/src/runtime/components/Parts/News.vue @@ -0,0 +1,108 @@ + + + diff --git a/src/stories/Card.stories.js b/src/stories/Card.stories.js index 604e255..952ab55 100644 --- a/src/stories/Card.stories.js +++ b/src/stories/Card.stories.js @@ -7,28 +7,29 @@ export default { component: Card, tags: ['autodocs'], argTypes: { - width: { control: "text" }, + maxWidth: { type: "text" }, + minHeight: { type: "text" }, styleCard: { - control: { type: "radio" }, + control: { control: "radio" }, options: ['standard', 'vacancy'] }, variantCard: { - control: { type: "select" }, + control: { control: "select" }, options: ['elevated', 'flat', 'tonal', 'outlined'] }, - horizontalCard: { control: "boolean" }, - horizontalWidthImage: { control: "text" }, - dateAuthorRight: { control: "boolean" }, - imgSrc: { control: "text" }, - imgAlt: { control: "text" }, - title: { control: "text" }, - subtitle: { control: "text" }, - price: { control: "text" }, - text: { control: "text" }, - date: { control: "text" }, - author: { control: "text" }, - city: { control: "text" }, - statusVacancy: { control: "object" } + horizontalCard: { type: "boolean" }, + horizontalWidthImage: { type: "text" }, + dateAuthorRight: { type: "boolean" }, + imgSrc: { type: "text" }, + imgAlt: { type: "text" }, + title: { type: "text" }, + subtitle: { type: "text" }, + price: { type: "text" }, + text: { type: "text" }, + date: { type: "text" }, + author: { type: "text" }, + city: { type: "text" }, + statusVacancy: { type: "Array" } }, }; @@ -49,7 +50,7 @@ export const Standard = { buttonSlot: `MEDIUM BUTTON`, dateAuthorRight: false, horizontalCard: false, - width: 349, + maxWidth: 349, variantCard: "elevated", styleCard: "standard", imgSrc: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg", @@ -68,11 +69,10 @@ export const Standard = { } export const StandardHorizontal = { - render: Standard.render, args: { dateAuthorRight: true, horizontalCard: true, - width: 700, + maxWidth: 700, horizontalWidthImage: 300, variantCard: "elevated", styleCard: "standard", @@ -92,10 +92,25 @@ export const StandardHorizontal = { } export const vacancyError = { - render: Standard.render, + render: (args) => ({ + components: { Card }, + setup() { + console.log(args) + return { args }; + }, + template:` + + ` + }), args: { - buttonSlot: `MEDIUM BUTTON`, - width: 349, + buttonSlot: ` +
+ Almaty, KZ + MEDIUM BUTTON +
`, + maxWidth: 349, variantCard: "elevated", styleCard: "vacancy", imgSrc: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg", @@ -105,10 +120,13 @@ export const vacancyError = { price: "150 000 - 180 000 ₸", 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", - statusVacancy: { - text: "Reply without resume", - status: "error" - } + statusVacancy: [ + { + id: 1, + text: "Reply without resume", + status: "error" + } + ] }, parameters: { design: { @@ -121,10 +139,14 @@ export const vacancyError = { export const vacancySuccess = { - render: Standard.render, + render: vacancyError.render, args: { - buttonSlot: `MEDIUM BUTTON`, - width: 349, + buttonSlot: ` +
+

Almaty, KZ

+ MEDIUM BUTTON +
`, + maxWidth: 349, variantCard: "elevated", styleCard: "vacancy", imgSrc: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg", @@ -133,10 +155,18 @@ export const vacancySuccess = { positionImageVacancy: "start", 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", - statusVacancy: { - text: "Be the first", - status: "success" - } + statusVacancy: [ + { + id: 1, + text: "Be the first", + status: "success" + }, + { + id: 2, + text: "Be the first", + status: "success" + }, + ] }, parameters: { design: { diff --git a/src/stories/partsNews.stories.js b/src/stories/partsNews.stories.js new file mode 100644 index 0000000..c46ddd8 --- /dev/null +++ b/src/stories/partsNews.stories.js @@ -0,0 +1,159 @@ +import partsNews from '../runtime/components/Parts/News.vue' + +// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction +export default { + title: 'Parts/partsNews', + component: partsNews, + tags: ['autodocs'], + argTypes: { + settingsCol: { type: 'object' }, + settingsButton: { type: 'object'}, + cards: { control: 'array' }, + title: { control: 'text' } + }, +}; + +export const First = { + render: (args) => ({ + components: { partsNews }, + setup() { + console.log(args) + return { args }; + }, + template:` + + ` + }), + args: { + text: "Новости о нас", + positionTitle: "start", + cards: [ + { + id: 1, + dateAuthorRight: false, + horizontalCard: false, + width: 349, + minHeight: 414, + variantCard: "elevated", + styleCard: "standard", + imgSrc: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg", + imgAlt: "Картинка", + title: "Card Title", + text: "A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.", + date: "02.04.2023", + author: "by Tyler, The Creator", + functionButton: null, + textButton: "Читать", + iconButton: "", + prependIconButton: "$vuetify", + appendIconButton: "", + }, + { + id: 2, + dateAuthorRight: false, + horizontalCard: false, + width: 349, + variantCard: "elevated", + styleCard: "standard", + imgSrc: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg", + imgAlt: "Картинка", + title: "Card Title", + text: "A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.", + date: "02.04.2023", + author: "by Tyler, The Creator", + functionButton: null, + textButton: "Читать", + }, + { + id: 3, + dateAuthorRight: false, + horizontalCard: false, + width: 349, + variantCard: "elevated", + styleCard: "standard", + imgSrc: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg", + imgAlt: "Картинка", + title: "Card Title", + text: "A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.", + date: "02.04.2023", + author: "by Tyler, The Creator", + functionButton: null, + textButton: "Читать", + }, + { + id: 4, + dateAuthorRight: false, + horizontalCard: false, + width: 349, + minHeight: 414, + variantCard: "elevated", + styleCard: "standard", + imgSrc: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg", + imgAlt: "Картинка", + title: "Card Title", + text: "A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.", + date: "02.04.2023", + author: "by Tyler, The Creator", + functionButton: null, + textButton: "Читать", + }, + { + id: 5, + dateAuthorRight: false, + horizontalCard: false, + width: 349, + minHeight: 414, + variantCard: "elevated", + styleCard: "standard", + imgSrc: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg", + imgAlt: "Картинка", + title: "Card Title", + text: "A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.", + date: "02.04.2023", + author: "by Tyler, The Creator", + functionButton: null, + textButton: "Читать", + }, + { + id: 6, + dateAuthorRight: false, + horizontalCard: false, + width: 349, + minHeight: 414, + variantCard: "elevated", + styleCard: "standard", + imgSrc: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg", + imgAlt: "Картинка", + title: "Card Title", + text: "A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.", + date: "02.04.2023", + author: "by Tyler, The Creator", + functionButton: null, + textButton: "Читать", + appendIconButton: "$vuetify", + } + ], + settingsCol: { + cols: "12", + sm: "6", + md: "4", + lg: "4", + xl: "3", + xxl: "2", + }, + settingsButton: { + variant: "", + stacked: false, + density: "", + size: "", + block: false, + rounded: "", + elevation: 0, + ripple: false, + color: "primary" + }, + buttonNews: `MEDIUM BUTTON` + } +} From 76e401f81e3df241b7affa5fa754843cf7353b72 Mon Sep 17 00:00:00 2001 From: AibtVlr Date: Tue, 10 Oct 2023 17:21:16 +0600 Subject: [PATCH 12/15] update testVuetify --- src/runtime/components/Pages/testVuetify.vue | 748 ++++--------------- src/runtime/style/vuetify.scss | 4 + 2 files changed, 138 insertions(+), 614 deletions(-) diff --git a/src/runtime/components/Pages/testVuetify.vue b/src/runtime/components/Pages/testVuetify.vue index 71dc1fa..4de6374 100644 --- a/src/runtime/components/Pages/testVuetify.vue +++ b/src/runtime/components/Pages/testVuetify.vue @@ -1,151 +1,26 @@