@oruga-ui/theme-oruga 0.0.1

package/src/components/Carousel.vue

@@ -0,0 +1,296 @@
+<script setup lang="ts">
+import { reactive, ref } 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" },
+];
+
+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",
+  },
+];
+
+const carousel = ref(1);
+const listSettings = reactive({
+  arrow: true,
+  arrowHover: true,
+  hasDrag: true,
+  itemsToShow: 4,
+  itemsToList: 1,
+  repeat: false,
+});
+
+const gallery = ref(false);
+const indicatorsSettings = reactive({
+  itemsToShow: 2,
+  breakpoints: {
+    768: {
+      itemsToShow: 4,
+    },
+    960: {
+      itemsToShow: 6,
+    },
+  },
+});
+
+function switchGallery(value: boolean): any {
+  gallery.value = value;
+
+  if (value) {
+    document.documentElement.classList.add("o-clipped");
+  } else {
+    document.documentElement.classList.remove("o-clipped");
+  }
+}
+
+const customSettings = reactive({
+  hasDrag: false,
+  autoplay: false,
+  pauseHover: false,
+  interval: 3000,
+  repeat: false,
+  position: "bottom",
+  style: "dots",
+});
+</script>
+
+<template>
+  <section>
+    <h2>Carousel Demo</h2>
+    <hr />
+  </section>
+  <section class="py-4 container">
+    <h3>Base</h3>
+
+    <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>
+  </section>
+
+  <section class="py-4 container">
+    <h3>Carousel List</h3>
+
+    <div class="example-component">
+      <o-field grouped group-multiline>
+        <o-field>
+          <o-switch v-model="listSettings.arrow">Arrow</o-switch>
+        </o-field>
+        <o-field>
+          <o-switch
+            v-model="listSettings.arrowHover"
+            :disabled="!listSettings.arrow">
+            Arrow on hover
+          </o-switch>
+        </o-field>
+        <o-field>
+          <o-switch v-model="listSettings.hasDrag">Drag event</o-switch>
+        </o-field>
+        <o-field>
+          <o-switch v-model="listSettings.repeat">Repeat</o-switch>
+        </o-field>
+      </o-field>
+      <o-field grouped group-multiline>
+        <o-field label="Items to Show">
+          <o-input
+            v-model.number="listSettings.itemsToShow"
+            type="number"
+            min="1"
+            :max="items.length" />
+        </o-field>
+        <o-field label="Items to List">
+          <o-input
+            v-model.number="listSettings.itemsToList"
+            type="number"
+            min="1"
+            :max="items.length - 1" />
+        </o-field>
+      </o-field>
+    </div>
+    <o-carousel v-model="carousel" v-bind="listSettings">
+      <o-carousel-item v-for="(item, i) in items" :key="i">
+        <img :src="item.image" />
+      </o-carousel-item>
+    </o-carousel>
+    <p><b>Current Item:</b> {{ carousel }}</p>
+  </section>
+
+  <section class="py-4 container">
+    <h3>Custom As indicators</h3>
+
+    <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"
+          v-bind="indicatorsSettings"
+          as-indicator
+          @update:model-value="switchTo($event)">
+          <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>
+        <button
+          type="button"
+          class="btn-close ex-close-icon"
+          aria-label="Close"
+          @click="switchGallery(false)" />
+
+        <div style="color: #ffffff; text-align: center">
+          Hello, I'm an overlay!
+        </div>
+      </template>
+    </o-carousel>
+  </section>
+
+  <section class="py-4 container">
+    <h3>Custom</h3>
+
+    <div class="example-component">
+      <o-field grouped group-multiline>
+        <o-field>
+          <o-switch v-model="customSettings.autoplay">Autoplay</o-switch>
+        </o-field>
+        <o-field>
+          <o-switch
+            v-model="customSettings.pauseHover"
+            :disabled="!customSettings.autoplay">
+            Pause on hover
+          </o-switch>
+        </o-field>
+        <o-field>
+          <o-switch v-model="customSettings.hasDrag">Drag event</o-switch>
+        </o-field>
+        <o-field>
+          <o-switch
+            v-model="customSettings.repeat"
+            :disabled="!customSettings.autoplay">
+            Repeat
+          </o-switch>
+        </o-field>
+      </o-field>
+      <o-field grouped group-multiline>
+        <o-field label="Value">
+          <o-input
+            v-model.number="carousel"
+            type="number"
+            min="0"
+            :max="carousels.length - 1" />
+        </o-field>
+        <o-field label="Interval">
+          <o-input
+            v-model.number="customSettings.interval"
+            type="number"
+            min="0"
+            step="1000"
+            :disabled="!customSettings.autoplay" />
+        </o-field>
+        <o-field label="Indicator Position">
+          <o-select v-model="customSettings.position">
+            <option value="top">top</option>
+            <option value="bottom">bottom</option>
+          </o-select>
+        </o-field>
+        <o-field label="Indicator Style">
+          <o-select v-model="customSettings.style">
+            <option value="boxes ">boxes</option>
+            <option value="dots">dots</option>
+            <option value="lines ">lines</option>
+          </o-select>
+        </o-field>
+      </o-field>
+    </div>
+
+    <o-carousel
+      v-model="carousel"
+      v-bind="customSettings"
+      :indicator-position="customSettings.position"
+      indicator-inside
+      :indicator-style="customSettings.style">
+      <o-carousel-item v-for="(slide, i) in carousels" :key="i">
+        <section class="ex-slide" :style="{ 'background-color': slide.color }">
+          <h1>{{ slide.text }}</h1>
+          <o-input :placeholder="slide.text" />
+          <p>A link that <a href="#arrow">goes to arrow</a></p>
+        </section>
+      </o-carousel-item>
+    </o-carousel>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.container {
+  max-width: 80vw;
+}
+.ex-slide {
+  padding: 9rem 4.5rem;
+  color: #ffffff;
+  text-align: center;
+}
+img {
+  display: block;
+  height: auto;
+  width: 100%;
+  max-width: 100%;
+}
+.img-indicator {
+  filter: grayscale(100%);
+}
+.img-indicator-active {
+  filter: grayscale(0%);
+}
+.ex-close-icon {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  filter: var(--bs-btn-close-white-filter);
+}
+</style>

package/src/components/Checkbox.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const checkbox = ref(false);
+const checkboxCustom = ref("Yes");
+const checkboxGroup = ref(["Flint"]);
+</script>
+
+<template>
+  <section>
+    <h2>Checkbox Demo</h2>
+    <hr />
+  </section>
+
+  <section>
+    <h3>Base</h3>
+
+    <o-field>
+      <o-checkbox v-model="checkbox">
+        {{ checkbox }}
+      </o-checkbox>
+    </o-field>
+    <o-field>
+      <o-checkbox v-model="checkboxCustom" true-value="Yes" false-value="No">
+        {{ checkboxCustom }}
+      </o-checkbox>
+    </o-field>
+    <o-field>
+      <o-checkbox :indeterminate="true"> Indeterminate </o-checkbox>
+    </o-field>
+    <o-field>
+      <o-checkbox disabled>Disabled</o-checkbox>
+    </o-field>
+  </section>
+
+  <section>
+    <h3>Variant</h3>
+
+    <o-field>
+      <o-checkbox :value="true"> Default </o-checkbox>
+    </o-field>
+    <o-field>
+      <o-checkbox :value="true" variant="primary"> Primary </o-checkbox>
+    </o-field>
+    <o-field>
+      <o-checkbox :value="true" variant="secondary"> Secondary </o-checkbox>
+    </o-field>
+    <o-field>
+      <o-checkbox :value="true" variant="info"> Info </o-checkbox>
+    </o-field>
+    <o-field>
+      <o-checkbox :value="true" variant="success"> Success </o-checkbox>
+    </o-field>
+    <o-field>
+      <o-checkbox :value="true" variant="warning"> Warning </o-checkbox>
+    </o-field>
+    <o-field>
+      <o-checkbox :value="true" variant="danger"> Danger </o-checkbox>
+    </o-field>
+  </section>
+
+  <section>
+    <h3>Indeterminate</h3>
+
+    <o-field>
+      <o-checkbox indeterminate> Default Indeterminate </o-checkbox>
+    </o-field>
+    <o-field>
+      <o-checkbox variant="primary" indeterminate>
+        Primary Indeterminate
+      </o-checkbox>
+    </o-field>
+    <o-field>
+      <o-checkbox variant="secondary" indeterminate>
+        Secondary Indeterminate
+      </o-checkbox>
+    </o-field>
+    <o-field>
+      <o-checkbox variant="info" indeterminate> Info Indeterminate </o-checkbox>
+    </o-field>
+    <o-field>
+      <o-checkbox variant="success" indeterminate>
+        Success Indeterminate
+      </o-checkbox>
+    </o-field>
+    <o-field>
+      <o-checkbox variant="warning" indeterminate>
+        Warning Indeterminate
+      </o-checkbox>
+    </o-field>
+    <o-field>
+      <o-checkbox variant="danger" indeterminate>
+        Danger Indeterminate
+      </o-checkbox>
+    </o-field>
+  </section>
+
+  <section>
+    <h3>Size</h3>
+
+    <o-field>
+      <o-checkbox size="small"> Small </o-checkbox>
+    </o-field>
+    <o-field>
+      <o-checkbox> Default </o-checkbox>
+    </o-field>
+    <o-field>
+      <o-checkbox size="medium"> Medium </o-checkbox>
+    </o-field>
+    <o-field>
+      <o-checkbox size="large"> Large </o-checkbox>
+    </o-field>
+  </section>
+
+  <section>
+    <h3>Array</h3>
+
+    <o-field>
+      <o-checkbox v-model="checkboxGroup" native-value="Silver">
+        Silver
+      </o-checkbox>
+      <o-checkbox v-model="checkboxGroup" native-value="Flint">
+        Flint
+      </o-checkbox>
+      <o-checkbox v-model="checkboxGroup" native-value="Vane">
+        Vane
+      </o-checkbox>
+      <o-checkbox v-model="checkboxGroup" native-value="Billy" disabled>
+        Billy
+      </o-checkbox>
+    </o-field>
+    <p><b>Selection:</b> {{ checkboxGroup }}</p>
+  </section>
+</template>

package/src/components/Collapse.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const isOpen = ref(1);
+const collapses = ref([
+  {
+    title: "Open to read something intersting written for you!",
+    text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
+          Nulla accumsan, metus ultrices eleifend gravida,   <br />
+          nulla nunc varius lectus, nec rutrum justo nibh eu lectus.  <br />
+          Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.`,
+  },
+  {
+    title: "What the different between Oruga and Buefy?",
+    text: "Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. <br />",
+  },
+  {
+    title: "Nothing special, ignore it!",
+    text: "Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.",
+  },
+]);
+</script>
+
+<template>
+  <section>
+    <h2>Collapse Demo</h2>
+  </section>
+
+  <section>
+    <h2>Base</h2>
+
+    <o-collapse :open="false" aria-id="contentIdForA11y1">
+      <template #trigger>
+        <o-button variant="primary" aria-controls="contentIdForA11y1">
+          Click me!
+        </o-button>
+      </template>
+      <div class="card-body">
+        <h3>Subtitle</h3>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
+          Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius
+          lectus, nec rutrum justo nibh eu lectus. <br />
+          Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel,
+          interdum mattis neque.
+        </p>
+      </div>
+    </o-collapse>
+  </section>
+
+  <section>
+    <h2>Accordion I</h2>
+
+    <o-collapse
+      v-for="(collapse, index) of collapses"
+      :key="index"
+      class="card"
+      animation="slide"
+      :open="isOpen == index"
+      @update:open="isOpen = index">
+      <template #trigger="props">
+        <div class="card-header" role="button">
+          <p class="card-header-title">
+            {{ collapse.title }}
+          </p>
+          <a class="card-header-icon">
+            <o-icon :icon="props.open ? 'caret-up' : 'caret-down'" />
+          </a>
+        </div>
+      </template>
+      <div class="card-content p-2">
+        <div class="content" v-html="collapse.text" />
+      </div>
+    </o-collapse>
+  </section>
+</template>
+
+<style scoped lang="scss">
+article {
+  margin: 1rem 0;
+}
+
+.card {
+  margin: 1rem 0;
+}
+
+.card-header-icon {
+  position: absolute;
+  top: 0.5rem;
+  right: 1rem;
+}
+</style>
+
+<style scoped lang="scss">
+.card {
+  background-color: #fff;
+  box-shadow: 0 2px 3px hsla(0, 0%, 4%, 0.1), 0 0 0 1px hsla(0, 0%, 4%, 0.1);
+  color: #4a4a4a;
+  max-width: 100%;
+  position: relative;
+}
+
+.card-header {
+  background-color: transparent;
+  align-items: stretch;
+  box-shadow: 0 1px 2px hsla(0, 0%, 4%, 0.1);
+  display: flex;
+}
+
+.card-header-title {
+  align-items: center;
+  color: #363636;
+  display: flex;
+  flex-grow: 1;
+  font-weight: 700;
+  padding: 0.75rem;
+  margin: 0;
+}
+
+.card-header-icon {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  padding: 0.75rem;
+  justify-content: center;
+}
+
+.card-content {
+  padding: 1.5rem;
+  background-color: transparent;
+}
+</style>