@oruga-ui/theme-oruga 0.2.0 → 0.2.2

package/src/App.vue

@@ -1,105 +0,0 @@
-<script setup lang="ts">
-const paths = import.meta.glob("./components/*.vue") as any;
-const components = Object.keys(paths)
-  .map((c: string) => c.replace(".vue", ""))
-  .map((c: string) => c.replace("./components/", ""))
-  .map((c: string) => `/${c}`)
-  .map((c: string) => {
-    const name = c.split("/")[1];
-    return {
-      name,
-      link: c,
-    };
-  });
-</script>
-
-<template>
-  <div id="app">
-    <nav id="nav">
-      <router-link to="/" class="theme-label">
-        <img
-          class="image__oruga"
-          src="https://oruga.io/logo.png"
-          alt="Logo Oruga Default Theme" />
-        <b>Oruga Default Theme</b>
-      </router-link>
-      <hr />
-      <router-link v-for="item in components" :key="item.name" :to="item.link">
-        {{ item.name }}
-      </router-link>
-    </nav>
-
-    <main>
-      <router-view />
-    </main>
-  </div>
-</template>
-
-<style lang="scss">
-@import "./assets/scss/utils/variables";
-
-#app {
-  display: flex;
-  width: 100%;
-
-  main {
-    flex-grow: 1;
-    padding-bottom: 6rem;
-    margin: 2rem;
-
-    > section {
-      margin: 1rem 0;
-
-      h3 {
-        font-size: 1.75rem;
-      }
-
-      .buttons > *:not(:last-child) {
-        margin-right: 0.5rem;
-        margin-bottom: 0.5rem;
-      }
-    }
-  }
-
-  #nav {
-    display: flex;
-    flex-direction: column;
-    height: auto;
-    min-height: 100vh;
-    width: 15%;
-    background-color: $grey-light;
-
-    .theme-label {
-      font-size: 1.5rem;
-      text-align: center;
-      padding: 1rem 0;
-    }
-
-    a {
-      font-weight: bold;
-      color: white;
-      text-decoration: none;
-      padding: 1px 0 1px 10px;
-      font-size: 1em;
-
-      &.router-link-exact-active {
-        color: $primary;
-      }
-    }
-  }
-}
-
-.image__oruga {
-  height: 64px;
-  display: flex;
-  margin: 0 auto;
-}
-
-@media (max-width: 576px) {
-  #app {
-    #nav {
-      display: none;
-    }
-  }
-}
-</style>

package/src/components/Autocomplete.vue

@@ -1,606 +0,0 @@
-<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" label="Open dropdown on focus" />
-      <o-switch v-model="keepFirst" label="Keep-first" />
-    </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-scroll
-        :debounce="500"
-        @input="getAsyncData"
-        @select="(option: any) => (selectedInfinite = option)"
-        @scroll-end="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>