fix: Merge pull request #2 from room-js/responsive-items

fix: Changes items prop to support mobile and desktop

package.json

@@ -34,14 +34,15 @@
     "@babel/core": "7.5.5",
     "@semantic-release/changelog": "3.0.4",
     "@semantic-release/git": "7.0.16",
-    "@storybook/addon-actions": "5.1.9",
-    "@storybook/addon-info": "5.1.9",
-    "@storybook/addon-knobs": "5.1.9",
-    "@storybook/addon-viewport": "5.1.9",
-    "@storybook/vue": "5.1.9",
+    "@storybook/addon-actions": "5.2.1",
+    "@storybook/addon-info": "5.2.1",
+    "@storybook/addon-knobs": "5.2.1",
+    "@storybook/addon-viewport": "5.2.1",
+    "@storybook/vue": "5.2.1",
     "@types/jest": "24.0.15",
     "@types/node": "12.6.8",
-    "@types/storybook__addon-knobs": "5.0.2",
+    "@types/react-color": "3.0.1",
+    "@types/storybook__addon-knobs": "5.0.4",
     "@types/storybook__addon-viewport": "4.1.1",
     "@types/storybook__vue": "5.0.2",
     "@typescript-eslint/parser": "1.11.0",
@@ -69,7 +70,7 @@
     "rollup-plugin-vue": "5.0.1",
     "sass-loader": "7.1.0",
     "semantic-release": "15.13.19",
-    "simple-commit-message": "4.0.3",
+    "simple-commit-message": "4.0.13",
     "ts-jest": "24.0.2",
     "typescript": "3.5.2",
     "vue": "2.6.10",

src/components/SliderDesktop/sliderDesktop.stories.ts

@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/vue';
 import { boolean, select } from '@storybook/addon-knobs';
 import SliderDesktop from './index.vue';
-import items from '../../mocks/items';
+import { items } from '../../mocks/items';
 
 storiesOf('SliderDesktop', module)
   .add('Default', () => {

src/components/SliderMobile/sliderMobile.stories.ts

@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/vue';
 import { boolean } from '@storybook/addon-knobs';
 import SliderMobile from './index.vue';
-import items from '../../mocks/items';
+import { items } from '../../mocks/items';
 
 storiesOf('SliderMobile', module)
   .addParameters({

src/index.stories.ts

@@ -1,21 +1,20 @@
 import { storiesOf } from '@storybook/vue';
 import { boolean, optionsKnob } from '@storybook/addon-knobs';
 import VueShopItem from './index.vue';
-import { Item } from './types';
-import items from './mocks/items';
+import { items, items2 } from './mocks/items';
 
-const itemsObj = items.reduce((acc, item, i) => ({ ...acc, [i]: i }), {});
+// const itemsObj = items.reduce((acc, item, i) => ({ ...acc, [i]: i }), {});
 
 storiesOf('VueShopItem', module)
-  .add('Default', () => {
-    const itemsOptions = optionsKnob(
-      'Items',
-      itemsObj,
-      items.map((item, i) => i),
-      { display: 'multi-select' }
-    );
+  .add('Single items collection', () => {
+    // const itemsOptions = optionsKnob(
+    //   'Items',
+    //   itemsObj,
+    //   items.map((item, i) => i),
+    //   { display: 'multi-select' }
+    // );
 
-    const getOptions = (): Item[] => itemsOptions.map((i) => ({ imageUrl: items[i].imageUrl }));
+    // const getOptions = (): Item[] => itemsOptions.map((i) => ({ imageUrl: items[i].imageUrl }));
 
     const template = `
       <div style="width: calc(100vw - 20px); height: calc(100vh - 20px);">
@@ -28,7 +27,34 @@ storiesOf('VueShopItem', module)
       props: {
         items: {
           type: Array,
-          default: getOptions
+          default: items, // getOptions
+        },
+        showArrows: {
+          type: Boolean,
+          default: boolean('Show arrows', true),
+        }
+      },
+      template,
+    };
+  })
+  .add('Desktop/mobile collections', () => {
+    const images = {
+      desktop: items2,
+      mobile: items,
+    };
+
+    const template = `
+      <div style="width: calc(100vw - 20px); height: calc(100vh - 20px);">
+        <vue-shop-item :items="items" :showArrows="showArrows" />
+      </div>
+    `;
+
+    return {
+      components: { VueShopItem },
+      props: {
+        items: {
+          type: Object,
+          default: images,
         },
         showArrows: {
           type: Boolean,

src/index.test.ts

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import VueShopItem from './index.vue';
-import items from './mocks/items';
+import { items } from './mocks/items';
 
 test('renders desktop slider correctly', () => {
   const wrapper = mount(VueShopItem, {

src/index.ts

@@ -1,7 +1,7 @@
 import { Vue, Component, Prop } from 'vue-property-decorator';
 import SliderMobile from './components/SliderMobile/index.vue';
 import SliderDesktop from './components/SliderDesktop/index.vue';
-import { Item } from './types';
+import { Item, Items } from './types';
 
 @Component({
   components: {
@@ -10,7 +10,7 @@ import { Item } from './types';
   },
 })
 class VueShopItem extends Vue {
-  @Prop() readonly items!: Item[];
+  @Prop() readonly items!: Item[] | Items;
   @Prop({ default: true }) readonly showArrows!: boolean;
   @Prop({ default: true }) readonly showPreview!: boolean;
   @Prop({ default: 'left' }) readonly previewPosition!: string;
@@ -22,6 +22,14 @@ class VueShopItem extends Vue {
     return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
       .test(window.navigator.userAgent);
   }
+
+  get itemsMobile(): Item[] {
+    return Array.isArray(this.items) ? this.items : this.items.mobile;
+  }
+
+  get itemsDesktop(): Item[] {
+    return Array.isArray(this.items) ? this.items : this.items.desktop;
+  }
 }
 
 export default VueShopItem;

src/index.vue

@@ -1,12 +1,12 @@
 <template>
   <slider-mobile
-    :items="items"
+    :items="itemsMobile"
     :showArrows="showArrows"
     v-if="isMobile()"
   />
   <slider-desktop
     v-else
-    :items="items"
+    :items="itemsDesktop"
     :showPreview="showPreview"
     :previewPosition="previewPosition"
   />

src/mocks/items.ts

@@ -1,9 +1,13 @@
 import { Item } from '../types';
 
-const items: Item[] = [
+export const items: Item[] = [
   { imageUrl: 'https://image.spreadshirtmedia.net/image-server/v1/products/T812A1PA3811PT17X49Y57D162268273FS2623/views/1,width=650,height=650,appearanceId=1.png' },
   { imageUrl: 'https://image.spreadshirtmedia.net/image-server/v1/products/T812A2PA3811PT17X63Y78D160344535FS2341/views/1,width=650,height=650,appearanceId=2/watch-me.png' },
   { imageUrl: 'https://image.spreadshirtmedia.net/image-server/v1/products/T812A1PA3811PT17X58Y109D160251068FS2435/views/1,width=650,height=650,appearanceId=1/security-is-important.png' },
 ];
 
-export default items;
+export const items2: Item[] = [
+  { imageUrl: 'https://image.spreadshirtmedia.net/image-server/v1/products/T812A2PA3811PT17X69Y120D165996188FS1875/views/1,width=650,height=650,appearanceId=2,backgroundColor=f2f2f2/future-is-coming.jpg' },
+  { imageUrl: 'https://image.spreadshirtmedia.net/image-server/v1/products/T812A3PA3811PT17X49Y87D159541997FS2635/views/1,width=650,height=650,appearanceId=3,backgroundColor=f2f2f2/power-of-a-computers-brain.jpg' },
+  { imageUrl: 'https://image.spreadshirtmedia.net/image-server/v1/products/T812A1PA3811PT17X53Y91D159108318FS3953/views/1,width=650,height=650,appearanceId=1,backgroundColor=f2f2f2/you-dont-know-me-unless-youve-scanned-me.jpg' },
+];

src/types.ts

@@ -1,3 +1,8 @@
 export interface Item {
   imageUrl: string;
-}
+}
+
+export interface Items {
+  mobile: Item[];
+  desktop: Item[];
+}