@storybook/addon-actions#actions JavaScript Examples

The following examples show how to use @storybook/addon-actions#actions. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Carousel.stories.js    From vue-snap with MIT License 6 votes vote down vote up 
Default = (_, { argTypes }) => ({
  props: Object.keys(argTypes),
  data: () => ({ carouselMock }),
  components: { Carousel, Slide },
  methods: actions('pageEvent', 'boundLeftEvent', 'boundRightEvent', 'mountedEvent'),
  template: `
    <carousel
      class="story-carousel story-carousel--colors"
      :hide-arrows="hideArrows"
      :hide-arrows-on-bound="hideArrowsOnBound"
      @page="pageEvent"
      @bound-left="boundLeftEvent"
      @bound-right="boundRightEvent"
      @mounted="mountedEvent"
    >
      <slide
        class="story-carousel__slide"
        v-for="{ id, content } in carouselMock"
        :key="id"
      >
        {{ content }}
      </slide>
    </carousel>
  `
})
Example #2
Source File: Carousel.stories.js    From vue-snap with MIT License 6 votes vote down vote up 
Multiple = (_, { argTypes }) => ({
  props: Object.keys(argTypes),
  data: () => ({ carouselMock }),
  components: { Carousel, Slide },
  methods: actions('pageEvent', 'boundLeftEvent', 'boundRightEvent', 'mountedEvent'),
  template: `
    <carousel
      class="story-carousel story-carousel--colors story-carousel--multiple"
      :hide-arrows="hideArrows"
      :hide-arrows-on-bound="hideArrowsOnBound"
      @page="pageEvent"
      @bound-left="boundLeftEvent"
      @bound-right="boundRightEvent"
      @mounted="mountedEvent"
    >
      <slide
        class="story-carousel__slide"
        v-for="{ id, content } in carouselMock"
        :key="id"
      >
        {{ content }}
      </slide>
    </carousel>
  `
})
Example #3
Source File: Carousel.stories.js    From vue-snap with MIT License 6 votes vote down vote up 
NonRegular = (_, { argTypes }) => ({
  props: Object.keys(argTypes),
  data: () => ({ carouselMock }),
  components: { Carousel, Slide },
  methods: actions('pageEvent', 'boundLeftEvent', 'boundRightEvent', 'mountedEvent'),
  template: `
    <carousel
      class="story-carousel story-carousel--colors story-carousel--non-regular"
      :hide-arrows="hideArrows"
      :hide-arrows-on-bound="hideArrowsOnBound"
      @page="pageEvent"
      @bound-left="boundLeftEvent"
      @bound-right="boundRightEvent"
      @mounted="mountedEvent"
    >
      <slide
        class="story-carousel__slide"
        v-for="{ id, content, width } in carouselMock"
        :key="id"
        :style="{ flexBasis: width + 'px' }"
      >
        {{ content }}
      </slide>
    </carousel>
  `
})
Example #4
Source File: Carousel.stories.js    From vue-snap with MIT License 6 votes vote down vote up 
Images = (_, { argTypes }) => ({
  props: Object.keys(argTypes),
  data: () => ({ carouselMock }),
  components: { Carousel, Slide },
  methods: actions('pageEvent', 'boundLeftEvent', 'boundRightEvent', 'mountedEvent'),
  template: `
    <carousel
      class="story-carousel story-carousel--multiple story-carousel--images"
      :hide-arrows="hideArrows"
      :hide-arrows-on-bound="hideArrowsOnBound"
      @page="pageEvent"
      @bound-left="boundLeftEvent"
      @bound-right="boundRightEvent"
      @mounted="mountedEvent"
    >
      <slide
        class="story-carousel__slide"
        v-for="{ id, content, image, name } in carouselMock"
        :key="id"
      >
        <img
          :src="image"
          :alt="name"
        />
      </slide>
    </carousel>
  `
})
Example #5
Source File: Carousel.stories.js    From vue-snap with MIT License 6 votes vote down vote up 
ImagesLazy = (_, { argTypes }) => ({
  props: Object.keys(argTypes),
  data: () => ({ carouselMock }),
  components: { Carousel, Slide },
  methods: actions('pageEvent', 'boundLeftEvent', 'boundRightEvent', 'mountedEvent'),
  template: `
    <carousel
      class="story-carousel story-carousel--multiple story-carousel--images"
      :hide-arrows="hideArrows"
      :hide-arrows-on-bound="hideArrowsOnBound"
      @page="pageEvent"
      @bound-left="boundLeftEvent"
      @bound-right="boundRightEvent"
      @mounted="mountedEvent"
    >
      <slide
        class="story-carousel__slide"
        v-for="{ id, content, image, name } in carouselMock"
        :key="id"
      >
        <lazy-image
          :src="image"
          :alt="name"
          width="200"
          height="200"
        />
      </slide>
    </carousel>
  `
})
Example #6
Source File: Carousel.stories.js    From vue-snap with MIT License 5 votes vote down vote up 
MultipleCustomArrows = (_, { argTypes }) => ({
  props: Object.keys(argTypes),
  data: () => ({ carouselMock }),
  components: { Carousel, Slide },
  methods: actions('pageEvent', 'boundLeftEvent', 'boundRightEvent', 'mountedEvent'),
  template: `
    <carousel
      class="story-carousel story-carousel--colors story-carousel--multiple"
      :hide-arrows="hideArrows"
      :hide-arrows-on-bound="hideArrowsOnBound"
      @page="pageEvent"
      @bound-left="boundLeftEvent"
      @bound-right="boundRightEvent"
      @mounted="mountedEvent"
    >
      <slide
        class="story-carousel__slide"
        v-for="{ id, content } in carouselMock"
        :key="id"
      >
        {{ content }}
      </slide>

      <template #arrows="{ changeSlide, boundLeft, boundRight }">
        <button @click="changeSlide(-1)">
          left
        </button>

        <button @click="changeSlide(1)">
          right
        </button>

        <p v-if="boundLeft">
          boundLeft!
        </p>

        <p v-else-if="boundRight">
          boundRight!
        </p>
      </template>
    </carousel>
  `
})
Example #7
Source File: builder.stories.js    From dnd-builder with MIT License 5 votes vote down vote up 
events = actions('onItemAdd', 'onItemChange', 'onItemMove', 'onItemRemove',
'onItemResize', 'onPageAdd', 'onPageChange', 'onPageDuplicate',
'onPageOrdersChange', 'onPageRemove', 'onSettingChange')