@oruga-ui/theme-oruga 0.2.0 → 0.2.2

package/src/components/Button.vue

@@ -1,80 +0,0 @@
-<template>
-  <section>
-    <h2>Button Demo</h2>
-    <hr />
-  </section>
-
-  <section>
-    <h3>Base</h3>
-
-    <div class="buttons">
-      <o-button variant="primary" label="Primary" />
-      <o-button variant="secondary" label="Secondary" />
-      <o-button variant="info" label="Info" />
-      <o-button variant="success" label="Success" />
-      <o-button variant="warning" label="Warning" />
-      <o-button variant="danger" label="Danger" />
-    </div>
-  </section>
-
-  <section>
-    <h3>States</h3>
-
-    <div class="buttons">
-      <o-button label="Normal" />
-      <o-button disabled label="Disabled" />
-      <o-button rounded variant="light" label="Rounded" />
-    </div>
-  </section>
-
-  <section>
-    <h3>Outlined</h3>
-
-    <div class="buttons">
-      <o-button variant="primary" outlined label="Outlined" />
-      <o-button variant="secondary" outlined label="Outlined" />
-      <o-button variant="info" outlined label="Outlined" />
-      <o-button variant="success" outlined label="Outlined" />
-      <o-button variant="warning" outlined label="Outlined" />
-      <o-button variant="danger" outlined label="Outlined" />
-    </div>
-  </section>
-
-  <section>
-    <h3>Inverted</h3>
-
-    <div class="buttons">
-      <o-button variant="primary" inverted label="Inverted" />
-      <o-button variant="secondary" inverted label="Inverted" />
-      <o-button variant="info" inverted label="Inverted" />
-      <o-button variant="success" inverted label="Inverted" />
-      <o-button variant="warning" inverted label="Inverted" />
-      <o-button variant="danger" inverted label="Inverted" />
-    </div>
-  </section>
-
-  <section>
-    <h3>Icons</h3>
-
-    <div class="buttons">
-      <o-button variant="primary" size="small" icon-left="plus" label="Add" />
-      <o-button variant="primary" icon-left="plus" label="Add" />
-      <o-button variant="primary" size="medium" icon-left="plus" label="Add" />
-      <o-button variant="primary" size="large" icon-left="plus" label="Add" />
-    </div>
-
-    <div class="buttons">
-      <o-button variant="danger" icon-left="trash" label="Delete" />
-      <o-button variant="danger" icon-right="trash" label="Delete" />
-      <o-button variant="danger" icon-right="trash" />
-    </div>
-  </section>
-
-  <section>
-    <h3>Expanded</h3>
-
-    <div class="buttons">
-      <o-button variant="primary" expanded label="Expanded" />
-    </div>
-  </section>
-</template>

package/src/components/Carousel.vue

@@ -1,295 +0,0 @@
-<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({
-  arrows: true,
-  arrowsHover: true,
-  dragable: true,
-  itemsToShow: 4,
-  itemsToList: 1,
-  repeat: false,
-});
-
-const gallery = ref(false);
-const indicatorsSettings = reactive({
-  indicators: false,
-  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({
-  dragable: 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.arrows" label="Arrow" />
-        </o-field>
-        <o-field>
-          <o-switch
-            v-model="listSettings.arrowsHover"
-            :disabled="!listSettings.arrows"
-            label="Arrow on hover" />
-        </o-field>
-        <o-field>
-          <o-switch v-model="listSettings.dragable" label="Drag event" />
-        </o-field>
-        <o-field>
-          <o-switch v-model="listSettings.repeat" label="Repeat" />
-        </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"
-          @update:model-value="switchTo($event)">
-          <o-carousel-item
-            v-for="(item, i) in items"
-            :key="i"
-            clickable
-            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" label="Autoplay" />
-        </o-field>
-        <o-field>
-          <o-switch
-            v-model="customSettings.pauseHover"
-            :disabled="!customSettings.autoplay"
-            label="Pause on hover" />
-        </o-field>
-        <o-field>
-          <o-switch v-model="customSettings.dragable" label="Drag event" />
-        </o-field>
-        <o-field>
-          <o-switch
-            v-model="customSettings.repeat"
-            :disabled="!customSettings.autoplay"
-            label="Repeat" />
-        </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

@@ -1,135 +0,0 @@
-<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" label="Indeterminate" />
-    </o-field>
-    <o-field>
-      <o-checkbox disabled label="Disabled" />
-    </o-field>
-  </section>
-
-  <section>
-    <h3>Variant</h3>
-
-    <o-field>
-      <o-checkbox :value="true" label="Default" />
-    </o-field>
-    <o-field>
-      <o-checkbox :value="true" variant="primary" label="Primary" />
-    </o-field>
-    <o-field>
-      <o-checkbox :value="true" variant="secondary" label="Secondary" />
-    </o-field>
-    <o-field>
-      <o-checkbox :value="true" variant="info" label="Info" />
-    </o-field>
-    <o-field>
-      <o-checkbox :value="true" variant="success" label="Success" />
-    </o-field>
-    <o-field>
-      <o-checkbox :value="true" variant="warning" label="Warning" />
-    </o-field>
-    <o-field>
-      <o-checkbox :value="true" variant="danger" label="Danger" />
-    </o-field>
-  </section>
-
-  <section>
-    <h3>Indeterminate</h3>
-
-    <o-field>
-      <o-checkbox indeterminate label="Default Indeterminate" />
-    </o-field>
-    <o-field>
-      <o-checkbox
-        variant="primary"
-        indeterminate
-        label="Primary Indeterminate" />
-    </o-field>
-    <o-field>
-      <o-checkbox
-        variant="secondary"
-        indeterminate
-        label="Secondary Indeterminate" />
-    </o-field>
-    <o-field>
-      <o-checkbox variant="info" indeterminate label="Info Indeterminate" />
-    </o-field>
-    <o-field>
-      <o-checkbox
-        variant="success"
-        indeterminate
-        label="Success Indeterminate" />
-    </o-field>
-    <o-field>
-      <o-checkbox
-        variant="warning"
-        indeterminate
-        label="Warning Indeterminate" />
-    </o-field>
-    <o-field>
-      <o-checkbox variant="danger" indeterminate label="Danger Indeterminate" />
-    </o-field>
-  </section>
-
-  <section>
-    <h3>Size</h3>
-
-    <o-field>
-      <o-checkbox size="small" label="Small" />
-    </o-field>
-    <o-field>
-      <o-checkbox label="Default" />
-    </o-field>
-    <o-field>
-      <o-checkbox size="medium" label="Medium" />
-    </o-field>
-    <o-field>
-      <o-checkbox size="large" label="Large" />
-    </o-field>
-  </section>
-
-  <section>
-    <h3>Array</h3>
-
-    <o-field>
-      <o-checkbox
-        v-model="checkboxGroup"
-        native-value="Silver"
-        label="Silver" />
-      <o-checkbox v-model="checkboxGroup" native-value="Flint" label="Flint" />
-      <o-checkbox v-model="checkboxGroup" native-value="Vane" label="Vane" />
-      <o-checkbox
-        v-model="checkboxGroup"
-        native-value="Billy"
-        disabled
-        label="Billy" />
-    </o-field>
-    <p><b>Selection:</b> {{ checkboxGroup }}</p>
-  </section>
-</template>

package/src/components/Collapse.vue

@@ -1,134 +0,0 @@
-<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>