diff --git a/src/runtime/components/Parts/Gallery/Row.vue b/src/runtime/components/Parts/Gallery/Row.vue index 9a815ac..041cd13 100644 --- a/src/runtime/components/Parts/Gallery/Row.vue +++ b/src/runtime/components/Parts/Gallery/Row.vue @@ -4,7 +4,7 @@ :slides-per-view="blocks.length === 4 ? (lgAndUp ? 4 : (mdAndUp ? 3.2 : 1.2)) : (lgAndUp ? 4.2 : (mdAndUp ? 3.2 : 1.2))" :space-between="lgAndUp ? 20 : 8" direction="horizontal" - class="row-gallery-blocks d-block" + class="row-gallery-blocks d-block w-100" height="290px" v-bind="swiperAttrs" > diff --git a/src/runtime/components/Parts/Gallery/View.vue b/src/runtime/components/Parts/Gallery/View.vue index 91b700a..b76cd4a 100644 --- a/src/runtime/components/Parts/Gallery/View.vue +++ b/src/runtime/components/Parts/Gallery/View.vue @@ -19,7 +19,7 @@ <swiper-container ref="thumbsSwiperRef" :direction="mdAndUp ? 'vertical' : 'horizontal'" - class="gallery-view-swiper-blocks d-block" + class="gallery-view-swiper-blocks w-100 d-block" :style="{ height: mdAndUp ? '100vh' : '100%', overflow: 'auto' }" :slides-per-view="mdAndUp ? 6.8 : 4.2" space-between="0" diff --git a/src/stories/partsGalleryRow.stories.js b/src/stories/partsGalleryRow.stories.js new file mode 100644 index 0000000..5ab348d --- /dev/null +++ b/src/stories/partsGalleryRow.stories.js @@ -0,0 +1,101 @@ +import Row from '../runtime/components/Parts/Gallery/Row.vue'; + +export default { + title: 'Parts/Gallery/Row', + component: Row, + tags: ['autodocs'], + argTypes: {}, +}; + +export const StandardWithLinks = { + render: (args) => ({ + components: { Row }, + setup() { + return { args }; + }, + template: '<Row v-bind="args" />', + }), + args: { + blocks: [ + { + id: 1, + title: 'Продукция', + preview: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg', + category: { + id: 1, + title: 'Производство' + } + }, + { + id: 2, + title: 'Корпоративные бизнес-системы', + preview: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg', + category: { + id: 1, + title: 'Производство' + } + }, + { + id: 2, + title: 'Корпоративные бизнес-системы', + preview: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg', + category: { + id: 1, + title: 'Производство' + } + }, + { + id: 2, + title: 'Корпоративные бизнес-системы', + preview: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg', + category: { + id: 1, + title: 'Производство' + } + }, + { + id: 2, + title: 'Корпоративные бизнес-системы', + preview: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg', + category: { + id: 1, + title: 'Производство' + } + }, + ], + disableLinks: false, + } +} + +export const StandardWithoutLinks = { + render: (args) => ({ + components: { Row }, + setup() { + return { args }; + }, + template: '<Row v-bind="args" />', + }), + args: { + blocks: [ + { + id: 1, + title: 'Продукция', + preview: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg', + category: { + id: 1, + title: 'Производство' + } + }, + { + id: 2, + title: 'Корпоративные бизнес-системы', + preview: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg', + category: { + id: 1, + title: 'Производство' + } + }, + ], + disableLinks: true, + } +} diff --git a/src/stories/partsGalleryView.stories.js b/src/stories/partsGalleryView.stories.js new file mode 100644 index 0000000..ae572b0 --- /dev/null +++ b/src/stories/partsGalleryView.stories.js @@ -0,0 +1,39 @@ +import View from '../runtime/components/Parts/Gallery/View.vue'; + +export default { + title: 'Parts/Gallery/View', + component: View, + tags: ['autodocs'], + argTypes: {}, +}; + +export const Standard = { + render: (args) => ({ + components: { View }, + setup() { + return { args }; + }, + template: '<View v-bind="args" />', + }), + args: { + gallery: [ + { + id: 1, + image: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg', + active: true, + }, + { + id: 2, + image: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg', + active: false, + }, + ], + previewImage: { + image: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg', + active: true, + id: 1, + }, + modelValue: true, + } +}; + diff --git a/src/stories/partsNews.stories.js b/src/stories/partsNews.stories.js index c46ddd8..3fcffe6 100644 --- a/src/stories/partsNews.stories.js +++ b/src/stories/partsNews.stories.js @@ -2,7 +2,7 @@ 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', + title: 'Parts/News', component: partsNews, tags: ['autodocs'], argTypes: {