@oruga-ui/theme-oruga 0.0.1

package/src/components/Tooltip.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const active = ref(true);
+</script>
+
+<template>
+  <section>
+    <h2>Tooltip Demo</h2>
+    <hr />
+  </section>
+
+  <section>
+    <h3>Base</h3>
+
+    <o-tooltip label="Tooltip right" position="right">
+      <o-button label="Right" />
+    </o-tooltip>
+
+    <o-tooltip label="Tooltip top" variant="dark">
+      <o-button label="Top (default)" />
+    </o-tooltip>
+
+    <o-tooltip label="Tooltip bottom" variant="dark" position="bottom">
+      <o-button label="Bottom" />
+    </o-tooltip>
+
+    <o-tooltip label="Tooltip left" variant="dark" position="left">
+      <o-button label="Left" />
+    </o-tooltip>
+
+    <o-tooltip label="delayed by 1000ms" variant="dark" :delay="1000">
+      <o-button variant="warning" label="Delayed" />
+    </o-tooltip>
+  </section>
+
+  <section>
+    <h3>Colors</h3>
+
+    <o-tooltip label="Default">
+      <o-button label="Default" />
+    </o-tooltip>
+
+    <o-tooltip label="Primary" variant="primary">
+      <o-button label="Primary" />
+    </o-tooltip>
+
+    <o-tooltip label="Secondary" variant="secondary">
+      <o-button label="Secondary" />
+    </o-tooltip>
+
+    <o-tooltip label="Success" variant="success">
+      <o-button label="Success" />
+    </o-tooltip>
+
+    <o-tooltip label="Danger" variant="danger">
+      <o-button label="Danger" />
+    </o-tooltip>
+
+    <o-tooltip label="Warning" variant="warning">
+      <o-button label="Warning" />
+    </o-tooltip>
+
+    <o-tooltip label="Info" variant="info">
+      <o-button label="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"> Toggle Always </o-switch>
+    </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

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

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

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

package/src/router/index.ts

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

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

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