@oruga-ui/theme-oruga 0.2.1 → 0.3.0

package/src/components/Timepicker.vue

@@ -1,122 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-
-const time = ref<Date | null>(null);
-const hourFormat = ref(undefined); // Browser locale
-const enableSeconds = ref(false);
-const locale = ref(undefined); // Browser locale
-
-const min = new Date();
-min.setHours(9);
-min.setMinutes(0);
-const max = new Date();
-max.setHours(18);
-max.setMinutes(0);
-
-const minTime = ref(min);
-const maxTime = ref(max);
-
-const minutesGranularity = ref(5);
-const hoursGranularity = ref(2);
-</script>
-
-<template>
-  <section>
-    <h2>Timepicker Demo</h2>
-    <hr />
-  </section>
-
-  <section>
-    <h3>Base</h3>
-
-    <o-field grouped>
-      <o-field>
-        <o-switch v-model="enableSeconds" label="Enable seconds" />
-      </o-field>
-      <o-field label="Locale">
-        <o-select v-model="locale">
-          <option :value="undefined"></option>
-          <option value="de-DE">de-DE</option>
-          <option value="en-CA">en-CA</option>
-          <option value="en-GB">en-GB</option>
-          <option value="en-US">en-US</option>
-          <option value="es-ES">es-ES</option>
-          <option value="es-MX">es-MX</option>
-          <option value="fr-CA">fr-CA</option>
-          <option value="fr-FR">fr-FR</option>
-          <option value="it-IT">it-IT</option>
-          <option value="ja-JP">ja-JP</option>
-          <option value="pt-BR">pt-BR</option>
-          <option value="ru-RU">ru-RU</option>
-          <option value="zn-CN">zn-CN</option>
-        </o-select>
-      </o-field>
-      <o-field label="Hour format">
-        <o-select v-model="hourFormat">
-          <option :value="undefined"></option>
-          <option value="12">12</option>
-          <option value="24">24</option>
-        </o-select>
-      </o-field>
-    </o-field>
-
-    <o-field label="Select time">
-      <o-timepicker
-        rounded
-        placeholder="Click to select..."
-        icon="clock"
-        :enable-seconds="enableSeconds"
-        :hour-format="hourFormat"
-        :locale="locale" />
-    </o-field>
-  </section>
-
-  <section>
-    <h3>Inline</h3>
-
-    <o-timepicker v-model="time" inline />
-  </section>
-
-  <section>
-    <h3>Min/Max date</h3>
-
-    <o-field label="Select time">
-      <o-timepicker
-        placeholder="Click to select..."
-        :min-time="minTime"
-        :max-time="maxTime" />
-    </o-field>
-  </section>
-
-  <section>
-    <h3>Slot</h3>
-
-    <o-field label="Select time">
-      <o-timepicker v-model="time" placeholder="Click to select...">
-        <o-button
-          label="Now"
-          variant="primary"
-          icon-left="clock"
-          @click="time = new Date()" />
-        <o-button
-          label="Clear"
-          variant="danger"
-          icon-left="times"
-          outlined
-          @click="time = null" />
-      </o-timepicker>
-    </o-field>
-  </section>
-
-  <section>
-    <h3>Granularity</h3>
-
-    <o-field label="Select time">
-      <o-timepicker
-        placeholder="Click to select"
-        icon="clock"
-        :increment-minutes="minutesGranularity"
-        :increment-hours="hoursGranularity" />
-    </o-field>
-  </section>
-</template>

package/src/components/Tooltip.vue

@@ -1,187 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-
-const active = ref(true);
-const teleport = ref(false);
-</script>
-
-<template>
-  <section>
-    <h2>Tooltip Demo</h2>
-    <hr />
-  </section>
-
-  <section>
-    <h3>Base</h3>
-
-    <o-tooltip label="Tooltip">
-      <o-button label="Hover me! " />
-    </o-tooltip>
-
-    <o-tooltip label="delayed by 1000ms" :delay="1000">
-      <o-button variant="warning" label="Delayed" />
-    </o-tooltip>
-
-    <o-tooltip label="I'm on body" teleport>
-      <o-button variant="info" label="Append on body" />
-    </o-tooltip>
-  </section>
-
-  <section>
-    <h3>Position</h3>
-
-    <o-field>
-      <o-switch v-model="teleport" label="teleport" />
-    </o-field>
-
-    <o-tooltip label="Tooltip right" :teleport="teleport" position="right">
-      <o-button label="Right" />
-    </o-tooltip>
-
-    <o-tooltip label="Tooltip top" :teleport="teleport" position="top">
-      <o-button label="Top" />
-    </o-tooltip>
-
-    <o-tooltip label="Tooltip bottom" :teleport="teleport" position="bottom">
-      <o-button label="Bottom" />
-    </o-tooltip>
-
-    <o-tooltip label="Tooltip left" :teleport="teleport" position="left">
-      <o-button label="Left" />
-    </o-tooltip>
-
-    <hr />
-
-    <o-tooltip label="Tooltip right" :teleport="teleport" position="top-right">
-      <o-button label="Top Right" />
-    </o-tooltip>
-
-    <o-tooltip label="Tooltip top" :teleport="teleport" position="top-left">
-      <o-button label="Top Left" />
-    </o-tooltip>
-
-    <o-tooltip
-      label="Tooltip bottom"
-      :teleport="teleport"
-      position="bottom-right">
-      <o-button label="Bottom Right" />
-    </o-tooltip>
-
-    <o-tooltip label="Tooltip left" :teleport="teleport" position="bottom-left">
-      <o-button label="Bottom Left" />
-    </o-tooltip>
-  </section>
-  <section>
-    <h3>Variants</h3>
-
-    <o-tooltip label="Default">
-      <o-button label="Default" />
-    </o-tooltip>
-
-    <o-tooltip label="Primary" variant="primary">
-      <o-button label="Primary" variant="primary" />
-    </o-tooltip>
-
-    <o-tooltip label="Secondary" variant="secondary">
-      <o-button label="Secondary" variant="secondary" />
-    </o-tooltip>
-
-    <o-tooltip label="Success" variant="success">
-      <o-button label="Success" variant="success" />
-    </o-tooltip>
-
-    <o-tooltip label="Danger" variant="danger">
-      <o-button label="Danger" variant="danger" />
-    </o-tooltip>
-
-    <o-tooltip label="Warning" variant="warning">
-      <o-button label="Warning" variant="warning" />
-    </o-tooltip>
-
-    <o-tooltip label="Info" variant="info">
-      <o-button label="Info" variant="info" />
-    </o-tooltip>
-  </section>
-
-  <section>
-    <h3>Multiline</h3>
-
-    <o-tooltip
-      variant="info"
-      label="Tooltip multiline, probably because it's too long for a casual tooltip"
-      multiline>
-      <o-button label="Multiline (default)" />
-    </o-tooltip>
-
-    <o-tooltip
-      variant="info"
-      label="It's not brief, but it's also not long"
-      multiline>
-      <o-button label="Multiline (small)" />
-    </o-tooltip>
-
-    <o-tooltip
-      variant="info"
-      label="Tooltip large multiline, because it's too long to be on a medium size. Did I tell you it's really long? Yes, it is — I assure you!"
-      position="bottom"
-      multiline>
-      <o-button label="Multiline (large)" />
-    </o-tooltip>
-  </section>
-
-  <section>
-    <h3>Slot</h3>
-
-    <o-tooltip variant="light" position="bottom" multiline>
-      <o-button>Html Content</o-button>
-      <template #content>
-        <b>Lorem ipsum dolor sit amet</b>, consectetur warning elit.
-        <i>Fusce id fermentum quam</i>.
-      </template>
-    </o-tooltip>
-
-    <o-tooltip
-      variant="light"
-      :triggers="['click']"
-      :auto-close="['outside', 'escape']">
-      <template #content>
-        <o-icon icon="heart" variant="dark"></o-icon>
-        <o-icon icon="thumbs-up" variant="dark"></o-icon>
-        <o-icon icon="thumbs-down" variant="dark"></o-icon>
-        <o-icon icon="smile-beam"></o-icon>
-      </template>
-      <o-button label="Action" />
-    </o-tooltip>
-  </section>
-
-  <section>
-    <h3>Toggle</h3>
-
-    <o-field>
-      <o-switch v-model="active" label="Toggle Always" />
-    </o-field>
-
-    <o-tooltip
-      variant="danger"
-      label="I'm never closing"
-      :active="active"
-      always
-      position="bottom">
-      <o-button label="Always" />
-    </o-tooltip>
-
-    <o-tooltip
-      variant="danger"
-      label="Tooltip right"
-      position="right"
-      :active="active">
-      <o-button label="Right" />
-    </o-tooltip>
-  </section>
-</template>
-
-<style scoped>
-.o-tip {
-  margin-right: 10px;
-}
-</style>

package/src/components/Upload.vue

@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-
-const dropFiles = ref<File[]>([]);
-const file = ref<File | null>(null);
-
-function deleteDropFile(index: number) {
-  dropFiles.value.splice(index, 1);
-}
-</script>
-
-<template>
-  <section>
-    <h2>Upload Demo</h2>
-    <hr />
-  </section>
-
-  <section>
-    <h3>Base</h3>
-
-    <o-field class="file">
-      <o-upload v-model="file">
-        <o-button
-          tag="a"
-          variant="primary"
-          icon-left="upload"
-          label="Click to upload" />
-      </o-upload>
-    </o-field>
-    <p><b>Selected File:</b> {{ file?.name }}</p>
-  </section>
-
-  <section>
-    <h3>Drag&Drop</h3>
-
-    <o-field>
-      <o-upload v-model="dropFiles" multiple variant="info" expanded drag-drop>
-        <section class="ex-center">
-          <p>
-            <o-icon icon="upload" size="large" />
-          </p>
-          <p>Drop your files here or click to upload</p>
-        </section>
-      </o-upload>
-    </o-field>
-
-    <div class="tags">
-      <span v-for="(f, index) in dropFiles" :key="index">
-        {{ f.name }}
-        <o-button
-          icon-left="times"
-          size="small"
-          native-type="button"
-          @click="deleteDropFile(index)" />
-      </span>
-    </div>
-  </section>
-</template>
-
-<style scoped lang="scss">
-.ex-center {
-  p {
-    text-align: center;
-  }
-}
-</style>

package/src/main.ts

@@ -1,29 +0,0 @@
-import { createApp } from "vue";
-
-import App from "./App.vue";
-import router from "./router";
-
-import Oruga from "@oruga-ui/oruga-next";
-
-import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
-import "@fortawesome/fontawesome-free/scss/regular.scss";
-import "@fortawesome/fontawesome-free/scss/solid.scss";
-
-import "./assets/scss/oruga-full.scss";
-
-createApp(App)
-  .use(router)
-  .use(Oruga, {
-    iconPack: "fas",
-    customIconPacks: {
-      fas: {
-        sizes: {
-          default: "",
-          small: "fa-sm",
-          medium: "fa-lg",
-          large: "fa-2x",
-        },
-      },
-    },
-  })
-  .mount("#app");

package/src/plugins/theme.ts

@@ -1 +0,0 @@
-// No theme config to export. Theme includes only css.

package/src/router/index.ts

@@ -1,39 +0,0 @@
-import {
-  createRouter,
-  createWebHistory,
-  type RouteRecordRaw,
-} from "vue-router";
-import Home from "../views/Home.vue";
-
-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,
-    };
-  });
-
-const routes: Array<RouteRecordRaw> = [
-  {
-    path: "/",
-    name: "Home",
-    component: Home,
-  },
-  ...components.map(({ name, link }: any) => ({
-    path: link,
-    name: name,
-    component: () => import("../components" + link + ".vue"),
-  })),
-];
-
-const router = createRouter({
-  history: createWebHistory("/"),
-  routes,
-});
-
-export default router;

package/src/views/Home.vue

@@ -1,24 +0,0 @@
-<template>
-  <div class="content">
-    <img
-      class="image__oruga"
-      src="https://oruga.io/logo.png"
-      alt="Logo Oruga Default Theme" />
-    <h1 class="mt-2">Oruga Default Theme Demo</h1>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.content {
-  text-align: center;
-  width: auto;
-  margin: 0 auto;
-  transform: translateY(70%);
-}
-
-.image__oruga {
-  height: 128px;
-  display: flex;
-  margin: 0 auto;
-}
-</style>

package/types/index.d.ts

@@ -1 +0,0 @@
-declare module "@oruga-ui/theme-oruga";