<template>
  <o-carousel>
    <o-carousel-item v-for="(carousel, i) in carousels" :key="i">
      <section class="ex-slide" :style="{ 'background-color': carousel.color }">
        <h1>{{ carousel.text }}</h1>
      </section>
    </o-carousel-item>
  </o-carousel>
</template>
<script>
import { defineComponent } from 'vue';

const carousels = [
  { text: "Slide 1", color: "#445e00" },
  { text: "Slide 2", color: "#006724" },
  { text: "Slide 3", color: "#b60000" },
  { text: "Slide 4", color: "#f4c300" },
  { text: "Slide 5", color: "#005c98" },
];

export default defineComponent({
  setup() {
    return { carousels };
  }
});
</script>
<style>
.ex-slide {
  padding: 9rem 4.5rem;
  color: #ffffff;
  text-align: center;
}
</style>

<template>
  <section>
    <div class="example-component">
      <o-field grouped group-multiline>
        <div class="control">
          <o-switch v-model="settings.arrow">Arrow</o-switch>
        </div>
        <div class="control">
          <o-switch v-model="settings.arrowHover" :disabled="!settings.arrow">Arrow on hover</o-switch>
        </div>
        <div class="control">
          <o-switch v-model="settings.hasDrag">Drag event</o-switch>
        </div>
        <div class="control">
          <o-switch v-model="settings.repeat">Repeat</o-switch>
        </div>
      </o-field>
      <o-field grouped group-multiline>
        <o-field label="Items to Show">
          <o-input type="number" v-model.number="settings.itemsToShow" min="1" :max="items.length" />
        </o-field>
        <o-field label="Items to List">
          <o-input type="number" v-model.number="settings.itemsToList" min="1" :max="items.length - 1" />
        </o-field>
      </o-field>
    </div>
    <o-carousel
      v-model="carousel"
      v-bind="settings"
    >
      <o-carousel-item v-for="(item, i) in items" :key="i">
        <img :src="item.image" />
      </o-carousel-item>
    </o-carousel>
  </section>
</template>
<script>
import { defineComponent, reactive, ref } from 'vue';

const items = [
  {
    title: 'Slide 1',
    image: 'https://picsum.photos/id/1/1230/500',
  },
  {
    title: 'Slide 2',
    image: 'https://picsum.photos/id/2/1230/500',
  },
  {
    title: 'Slide 3',
    image: 'https://picsum.photos/id/3/1230/500',
  },
  {
    title: 'Slide 4',
    image: 'https://picsum.photos/id/4/1230/500',
  },
  {
    title: 'Slide 5',
    image: 'https://picsum.photos/id/5/1230/500',
  },
  {
    title: 'Slide 6',
    image: 'https://picsum.photos/id/6/1230/500',
  },
  {
    title: 'Slide 7',
    image: 'https://picsum.photos/id/7/1230/500',
  },
];

export default defineComponent({
  setup() {
    const carousel = ref(1);
    const settings = reactive({
      arrow: true,
      arrowHover: true,
      hasDrag: true,
      itemsToShow: 4,
      itemsToList: 1,
      repeat: false,
    });

    return {
      carousel,
      settings,
      items,
    };
  }
});
</script>

<template>
  <o-carousel :autoplay="false" :overlay="gallery" @click="switchGallery(true)">
    <o-carousel-item v-for="(item, i) in items" :key="i">
      <a class="image">
        <img :src="item.image" />
      </a>
    </o-carousel-item>
    <template #indicators="{ active, switchTo }">
      <o-carousel
        :model-value="active"
        @update:model-value="switchTo($event)"
        v-bind="settings"
        as-indicator
      >
        <o-carousel-item
          v-for="(item, i) in items"
          :key="i"
          item-class="img-indicator"
          item-active-class="img-indicator-active"
        >
          <img :src="item.image" />
        </o-carousel-item>
      </o-carousel>
    </template>
    <template #overlay>
      <o-icon
        v-if="gallery"
        icon="times"
        root-class="ex-close-icon"
        clickable
        @click="switchGallery(false)"
      />
      <div style="color: #ffffff; text-align: center">
        Hello, I'm an overlay!
      </div>
    </template>
  </o-carousel>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const gallery = ref(false);
    const settings = {
      itemsToShow: 2,
      breakpoints: {
        768: {
          itemsToShow: 4,
        },
        960: {
          itemsToShow: 6,
        },
      },
    };

    const items = ref(
      [
        {
          title: "Slide 1",
          image: "https://picsum.photos/id/1/1230/500",
        },
        {
          title: "Slide 2",
          image: "https://picsum.photos/id/2/1230/500",
        },
        {
          title: "Slide 3",
          image: "https://picsum.photos/id/3/1230/500",
        },
        {
          title: "Slide 4",
          image: "https://picsum.photos/id/4/1230/500",
        },
        {
          title: "Slide 5",
          image: "https://picsum.photos/id/5/1230/500",
        },
        {
          title: "Slide 6",
          image: "https://picsum.photos/id/6/1230/500",
        },
        {
          title: "Slide 7",
          image: "https://picsum.photos/id/7/1230/500",
        },
      ]
    );

    function switchGallery(value) {
      gallery.value = value;

      if (value) {
        document.documentElement.classList.add("o-clipped");
      } else {
        document.documentElement.classList.remove("o-clipped");
      }
    };

    return {
      gallery,
      settings,
      items,
      switchGallery,
    };
  },
  data() {
    return {
    };
  },
  methods: {
  },
});
</script>

<style>
.image img {
  display: block;
  height: auto;
  width: 100%;
}
.img-indicator {
  filter: grayscale(100%);
}
.img-indicator-active {
  filter: grayscale(0%);
}
.ex-close-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #ffffff;
  z-index: 99;
}
</style>

<template>
  <section>
    <div class="example-component">
      <o-field grouped group-multiline>
        <div class="control">
          <o-switch v-model="settings.autoplay">Autoplay</o-switch>
        </div>
        <div class="control">
          <o-switch v-model="settings.pauseHover" :disabled="!settings.autoplay"
            >Pause on hover</o-switch
          >
        </div>
        <div class="control">
          <o-switch v-model="settings.hasDrag">Drag event</o-switch>
        </div>
        <div class="control">
          <o-switch v-model="settings.repeat" :disabled="!settings.autoplay">Repeat</o-switch>
        </div>
      </o-field>
      <o-field grouped group-multiline>
        <o-field label="Value">
          <o-input
            type="number"
            v-model.number="carousel"
            min="0"
            :max="carousels.length - 1"
          />
        </o-field>
        <o-field label="Interval">
          <o-input
            type="number"
            v-model.number="settings.interval"
            min="0"
            step="1000"
            :disabled="!settings.autoplay"
          />
        </o-field>
      </o-field>
    </div>

    <o-carousel
      v-model="carousel"
      v-bind="settings"
    >
      <o-carousel-item v-for="(carousel, i) in carousels" :key="i">
        <section
          class="ex-slide"
          :style="{ 'background-color': carousel.color }"
        >
          <h1>{{ carousel.title }}</h1>
          <o-input :placeholder="carousel.title"></o-input>
          <p>A link that <a href="#arrow">goes to arrow</a></p>
        </section>
      </o-carousel-item>
    </o-carousel>
  </section>
</template>
<script>
import { defineComponent, ref, reactive } from 'vue';

const carousels = [
  { text: "Slide 1", color: "#445e00" },
  { text: "Slide 2", color: "#006724" },
  { text: "Slide 3", color: "#b60000" },
  { text: "Slide 4", color: "#f4c300" },
  { text: "Slide 5", color: "#005c98" },
];

export default defineComponent({

  setup() {
    const carousel = ref(0);
    const settings = reactive({
      hasDrag: false,
      autoplay: false,
      pauseHover: false,
      interval: 3000,
      repeat: false,
    });

    return {
      carousel,
      settings,
      carousels,
    };
  },
});
</script>