Merge pull request #149 from IBEC-BOX/feat/gallery

added documentation for gallery row, view

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"
   >

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"

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,
+  }
+}

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,
+  }
+};
+

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: {