@oruga-ui/theme-oruga 0.0.1

package/src/components/Autocomplete.vue

@@ -0,0 +1,606 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+const nameBase = ref("");
+const selectedBase = ref();
+
+const dataBase = ref([
+  "Angular 1",
+  "Angular 2",
+  "Angular 4",
+  "Angular 5",
+  "Angular 6",
+  "Angular 7",
+  "Aurelia",
+  "Backbone",
+  "Ember",
+  "jQuery",
+  "Meteor",
+  "Node.js",
+  "Polymer",
+  "React",
+  "RxJS",
+  "Vue.js",
+]);
+
+const filteredDataBase = computed((): string[] => {
+  return dataBase.value.filter((option: any) => {
+    return (
+      option.toString().toLowerCase().indexOf(nameBase.value.toLowerCase()) >= 0
+    );
+  });
+});
+
+const nameObjects = ref("");
+const selectedObjects = ref();
+const dataObjects = [
+  {
+    id: 1,
+    user: { first_name: "Jesse", last_name: "Simmons" },
+    date: "2016/10/15 13:43:27",
+    gender: "Male",
+  },
+  {
+    id: 2,
+    user: { first_name: "John", last_name: "Jacobs" },
+    date: "2016/12/15 06:00:53",
+    gender: "Male",
+  },
+  {
+    id: 3,
+    user: { first_name: "Tina", last_name: "Gilbert" },
+    date: "2016/04/26 06:26:28",
+    gender: "Female",
+  },
+  {
+    id: 4,
+    user: { first_name: "Clarence", last_name: "Flores" },
+    date: "2016/04/10 10:28:46",
+    gender: "Male",
+  },
+  {
+    id: 5,
+    user: { first_name: "Anne", last_name: "Lee" },
+    date: "2016/12/06 14:38:38",
+    gender: "Female",
+  },
+  {
+    id: 6,
+    user: { first_name: "Sara", last_name: "Armstrong" },
+    date: "2016/09/23 18:50:04",
+    gender: "Female",
+  },
+  {
+    id: 7,
+    user: { first_name: "Anthony", last_name: "Webb" },
+    date: "2016/08/30 23:49:38",
+    gender: "Male",
+  },
+  {
+    id: 8,
+    user: { first_name: "Andrew", last_name: "Greene" },
+    date: "2016/11/20 14:57:47",
+    gender: "Male",
+  },
+  {
+    id: 9,
+    user: { first_name: "Russell", last_name: "White" },
+    date: "2016/07/13 09:29:49",
+    gender: "Male",
+  },
+  {
+    id: 10,
+    user: { first_name: "Lori", last_name: "Hunter" },
+    date: "2016/12/09 01:44:05",
+    gender: "Female",
+  },
+  {
+    id: 11,
+    user: { first_name: "Ronald", last_name: "Wood" },
+    date: "2016/12/04 02:23:48",
+    gender: "Male",
+  },
+  {
+    id: 12,
+    user: { first_name: "Michael", last_name: "Harper" },
+    date: "2016/07/27 13:28:15",
+    gender: "Male",
+  },
+  {
+    id: 13,
+    user: { first_name: "George", last_name: "Dunn" },
+    date: "2017/03/07 12:26:52",
+    gender: "Male",
+  },
+  {
+    id: 14,
+    user: { first_name: "Eric", last_name: "Rogers" },
+    date: "2016/06/07 05:41:52",
+    gender: "Male",
+  },
+  {
+    id: 15,
+    user: { first_name: "Juan", last_name: "Meyer" },
+    date: "2017/02/01 04:56:34",
+    gender: "Male",
+  },
+  {
+    id: 16,
+    user: { first_name: "Silvia", last_name: "Rosa" },
+    date: "2017/01/26 11:50:04",
+    gender: "Female",
+  },
+  {
+    id: 17,
+    user: { first_name: "Lori", last_name: "Cunningham" },
+    date: "2016/05/01 10:00:56",
+    gender: "Female",
+  },
+  {
+    id: 18,
+    user: { first_name: "Charles", last_name: "Graham" },
+    date: "2016/05/31 06:43:30",
+    gender: "Male",
+  },
+  {
+    id: 19,
+    user: { first_name: "Henry", last_name: "Morrison" },
+    date: "2016/09/27 16:15:44",
+    gender: "Male",
+  },
+  {
+    id: 20,
+    user: { first_name: "Albert", last_name: "Mendoza" },
+    date: "2016/08/08 05:29:24",
+    gender: "Male",
+  },
+  {
+    id: 21,
+    user: { first_name: "Ruby", last_name: "Snyder" },
+    date: "2017/04/01 12:04:39",
+    gender: "Female",
+  },
+  {
+    id: 22,
+    user: { first_name: "Jesse", last_name: "Warren" },
+    date: "2016/08/20 01:36:38",
+    gender: "Male",
+  },
+  {
+    id: 23,
+    user: { first_name: "Carlos", last_name: "Ferguson" },
+    date: "2016/05/31 10:40:29",
+    gender: "Male",
+  },
+  {
+    id: 24,
+    user: { first_name: "Melissa", last_name: "Peters" },
+    date: "2016/07/23 00:41:54",
+    gender: "Female",
+  },
+  {
+    id: 25,
+    user: { first_name: "Arthur", last_name: "Garza" },
+    date: "2017/03/11 14:11:37",
+    gender: "Male",
+  },
+  {
+    id: 26,
+    user: { first_name: "Joe", last_name: "Berry" },
+    date: "2016/07/09 15:16:56",
+    gender: "Male",
+  },
+  {
+    id: 27,
+    user: { first_name: "Joseph", last_name: "Bishop" },
+    date: "2016/10/04 19:44:54",
+    gender: "Male",
+  },
+  {
+    id: 28,
+    user: { first_name: "Sarah", last_name: "Harper" },
+    date: "2016/09/23 05:09:11",
+    gender: "Female",
+  },
+  {
+    id: 29,
+    user: { first_name: "Christopher", last_name: "Fuller" },
+    date: "2016/04/12 00:05:35",
+    gender: "Male",
+  },
+  {
+    id: 30,
+    user: { first_name: "Alan", last_name: "Mendoza" },
+    date: "2016/04/22 10:48:02",
+    gender: "Male",
+  },
+  {
+    id: 31,
+    user: { first_name: "James", last_name: "Davis" },
+    date: "2017/01/16 15:17:03",
+    gender: "Male",
+  },
+  {
+    id: 32,
+    user: { first_name: "Scott", last_name: "Welch" },
+    date: "2016/10/04 23:31:51",
+    gender: "Male",
+  },
+  {
+    id: 33,
+    user: { first_name: "Mildred", last_name: "Myers" },
+    date: "2016/11/23 13:46:18",
+    gender: "Female",
+  },
+  {
+    id: 34,
+    user: { first_name: "Victor", last_name: "Martinez" },
+    date: "2016/04/06 17:05:07",
+    gender: "Male",
+  },
+  {
+    id: 35,
+    user: { first_name: "Susan", last_name: "Medina" },
+    date: "2016/12/09 10:33:37",
+    gender: "Female",
+  },
+  {
+    id: 36,
+    user: { first_name: "Judy", last_name: "Long" },
+    date: "2016/07/26 16:19:04",
+    gender: "Female",
+  },
+  {
+    id: 37,
+    user: { first_name: "Joan", last_name: "Myers" },
+    date: "2016/09/22 04:55:54",
+    gender: "Female",
+  },
+  {
+    id: 38,
+    user: { first_name: "Rachel", last_name: "Gonzales" },
+    date: "2016/07/15 13:56:38",
+    gender: "Female",
+  },
+  {
+    id: 39,
+    user: { first_name: "Roger", last_name: "Hunt" },
+    date: "2016/08/14 10:43:11",
+    gender: "Male",
+  },
+  {
+    id: 40,
+    user: { first_name: "Dorothy", last_name: "Howard" },
+    date: "2016/06/19 05:34:49",
+    gender: "Female",
+  },
+  {
+    id: 41,
+    user: { first_name: "Eugene", last_name: "Lynch" },
+    date: "2016/12/24 08:19:24",
+    gender: "Male",
+  },
+  {
+    id: 42,
+    user: { first_name: "Kathy", last_name: "Webb" },
+    date: "2017/04/01 21:09:05",
+    gender: "Female",
+  },
+  {
+    id: 43,
+    user: { first_name: "Antonio", last_name: "White" },
+    date: "2017/02/10 06:51:20",
+    gender: "Male",
+  },
+  {
+    id: 44,
+    user: { first_name: "Louis", last_name: "Spencer" },
+    date: "2016/10/08 02:20:22",
+    gender: "Male",
+  },
+  {
+    id: 45,
+    user: { first_name: "Andrea", last_name: "Marshall" },
+    date: "2016/09/04 10:59:57",
+    gender: "Female",
+  },
+  {
+    id: 46,
+    user: { first_name: "Eugene", last_name: "Sims" },
+    date: "2017/03/15 06:39:48",
+    gender: "Male",
+  },
+  {
+    id: 47,
+    user: { first_name: "Mildred", last_name: "Gibson" },
+    date: "2016/04/18 06:43:54",
+    gender: "Female",
+  },
+  {
+    id: 48,
+    user: { first_name: "Joan", last_name: "Arnold" },
+    date: "2016/12/16 04:52:23",
+    gender: "Female",
+  },
+  {
+    id: 49,
+    user: { first_name: "Jesse", last_name: "Schmidt" },
+    date: "2016/06/11 02:44:33",
+    gender: "Male",
+  },
+  {
+    id: 50,
+    user: { first_name: "David", last_name: "Frazier" },
+    date: "2017/02/15 21:46:30",
+    gender: "Male",
+  },
+  {
+    id: 51,
+    user: { first_name: "Nicholas", last_name: "Howell" },
+    date: "2016/11/01 15:08:31",
+    gender: "Male",
+  },
+  {
+    id: 52,
+    user: { first_name: "Douglas", last_name: "Chapman" },
+    date: "2017/02/08 03:33:24",
+    gender: "Male",
+  },
+  {
+    id: 53,
+    user: { first_name: "Bruce", last_name: "Simmons" },
+    date: "2016/07/14 12:11:17",
+    gender: "Male",
+  },
+  {
+    id: 54,
+    user: { first_name: "Antonio", last_name: "George" },
+    date: "2016/11/07 19:12:55",
+    gender: "Male",
+  },
+  {
+    id: 55,
+    user: { first_name: "Chris", last_name: "Marshall" },
+    date: "2016/07/03 12:11:45",
+    gender: "Male",
+  },
+  {
+    id: 56,
+    user: { first_name: "Ashley", last_name: "Hudson" },
+    date: "2016/10/14 21:08:05",
+    gender: "Female",
+  },
+  {
+    id: 57,
+    user: { first_name: "Alan", last_name: "Edwards" },
+    date: "2017/03/22 21:10:25",
+    gender: "Male",
+  },
+  {
+    id: 58,
+    user: { first_name: "George", last_name: "Clark" },
+    date: "2016/04/28 03:15:05",
+    gender: "Male",
+  },
+  {
+    id: 59,
+    user: { first_name: "Frank", last_name: "Porter" },
+    date: "2016/09/08 00:48:14",
+    gender: "Male",
+  },
+  {
+    id: 60,
+    user: { first_name: "Christopher", last_name: "Palmer" },
+    date: "2016/05/24 08:58:12",
+    gender: "Male",
+  },
+];
+
+const filteredDataObjects = computed(() =>
+  dataObjects.filter(
+    (option) =>
+      option.user.first_name
+        .toString()
+        .toLowerCase()
+        .indexOf(nameObjects.value.toLowerCase()) >= 0,
+  ),
+);
+
+const nameGroups = ref("");
+const selectedGroups = ref();
+const dataGroups = [
+  {
+    type: "Fruit",
+    items: ["Apple", "Banana", "Watermelon"],
+  },
+  {
+    type: "Vegetables",
+    items: ["Carrot", "Broccoli", "Cucumber", "Onion"],
+  },
+];
+
+const filteredDataGroups = computed(() =>
+  dataGroups.reduce((acc, element): any => {
+    const items = element.items.filter(
+      (item) => item.toLowerCase().indexOf(nameGroups.value.toLowerCase()) >= 0,
+    );
+
+    return items.length ? [...acc, { type: element.type, items }] : acc;
+  }, []),
+);
+
+const keepFirst = ref(false);
+const openOnFocus = ref(false);
+
+const isFetching = ref(false);
+const page = ref(1);
+const totalPages = ref(1);
+
+const dataInfinite = ref<any[]>([]);
+const selectedInfinite = ref();
+const nameInfinite = ref("");
+
+async function getAsyncData(_name: string) {
+  if (nameInfinite.value !== _name) {
+    nameInfinite.value = _name;
+    dataInfinite.value = [];
+    page.value = 1;
+    totalPages.value = 1;
+  }
+
+  // String cleared
+  if (!_name.length) {
+    dataInfinite.value = [];
+    page.value = 1;
+    totalPages.value = 1;
+
+    return;
+  }
+
+  // Reached last page
+  if (page.value > totalPages.value) {
+    return;
+  }
+
+  isFetching.value = true;
+  try {
+    const _data = await fetch(
+      `https://api.themoviedb.org/3/search/movie?api_key=bb6f51bef07465653c3e553d6ab161a8&query=${_name}&page=${page.value}`,
+    ).then((response) => response.json());
+
+    dataInfinite.value = [...dataInfinite.value, ..._data.results];
+    page.value += 1;
+    totalPages.value = _data.total_pages;
+  } finally {
+    isFetching.value = false;
+  }
+}
+
+function getMoreAsyncData() {
+  getAsyncData(nameInfinite.value);
+}
+</script>
+
+<template>
+  <section>
+    <h2>Autocomplete Demo</h2>
+    <hr />
+  </section>
+
+  <section>
+    <h3>Base</h3>
+
+    <o-field label="Find a JS framework">
+      <o-autocomplete
+        v-model="nameBase"
+        rounded
+        expanded
+        placeholder="e.g. jQuery"
+        icon="search"
+        clearable
+        :data="filteredDataBase"
+        @select="(option: string) => (selectedBase = option)">
+        <template #empty>No results found</template>
+      </o-autocomplete>
+    </o-field>
+    <p><b>Selected:</b> {{ selectedBase }}</p>
+  </section>
+
+  <section>
+    <h3>Objects array</h3>
+
+    <o-field grouped group-multiline>
+      <o-switch v-model="openOnFocus">Open dropdown on focus</o-switch>
+      <o-switch v-model="keepFirst">Keep-first</o-switch>
+    </o-field>
+
+    <o-field label="Find a name">
+      <o-autocomplete
+        v-model="nameObjects"
+        placeholder="e.g. Anne"
+        :keep-first="keepFirst"
+        :open-on-focus="openOnFocus"
+        :data="filteredDataObjects"
+        field="user.first_name"
+        @select="(option: any) => (selectedObjects = option)" />
+    </o-field>
+    <p><b>Selected:</b> {{ selectedObjects }}</p>
+  </section>
+
+  <section>
+    <h3>Groups</h3>
+
+    <o-field label="Find a food">
+      <o-autocomplete
+        v-model="nameGroups"
+        group-field="type"
+        group-options="items"
+        open-on-focus
+        :data="filteredDataGroups"
+        field="user.first_name"
+        @select="(option:any) => (selectedGroups = option)" />
+    </o-field>
+    <p><b>Selected:</b> {{ selectedGroups }}</p>
+  </section>
+
+  <section>
+    <h3>Infinite Scroll</h3>
+
+    <o-field label="Find a movie">
+      <o-autocomplete
+        :data="dataInfinite"
+        placeholder="e.g. Fight Club"
+        field="title"
+        :loading="isFetching"
+        check-infinite-scroll
+        :debounce-typing="500"
+        @typing="getAsyncData"
+        @select="(option: any) => (selectedInfinite = option)"
+        @infinite-scroll="getMoreAsyncData">
+        <template #default="props">
+          <div class="media">
+            <div class="media-left">
+              <img
+                width="32"
+                :src="`https://image.tmdb.org/t/p/w500/${props.option.poster_path}`" />
+            </div>
+            <div class="media-content">
+              {{ props.option.title }}
+              <br />
+              <small>
+                Released at {{ props.option.release_date }}, rated
+                <b>{{ props.option.vote_average }}</b>
+              </small>
+            </div>
+          </div>
+        </template>
+        <template v-if="page > totalPages" #footer>
+          <span class="ex-text-grey"> Thats it! No more movies found. </span>
+        </template>
+      </o-autocomplete>
+    </o-field>
+    <p><b>Selected:</b> {{ selectedInfinite }}</p>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.media {
+  align-items: flex-start;
+  display: flex;
+  text-align: left;
+}
+.media-left {
+  margin-right: 1rem;
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+.media-content {
+  flex-basis: auto;
+  flex-grow: 1;
+  flex-shrink: 1;
+  text-align: left;
+  overflow-y: hidden;
+  overflow-x: auto;
+}
+</style>

package/src/components/Button.vue

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