@oruga-ui/theme-oruga 0.0.1

package/src/components/Notification.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { useProgrammatic } from "@oruga-ui/oruga-next";
+
+function simple() {
+  const { oruga } = useProgrammatic();
+  oruga.notification.open("Something happened");
+}
+function success() {
+  const { oruga } = useProgrammatic();
+  oruga.notification.open({
+    message: "Something happened correctly!",
+    variant: "success",
+    closable: true,
+  });
+}
+function toast() {
+  const { oruga } = useProgrammatic();
+  oruga.notification.open({
+    message: "Something happened correctly!",
+    rootClass: "toast",
+    position: "top",
+  });
+}
+function danger() {
+  const { oruga } = useProgrammatic();
+
+  oruga.notification.open({
+    message: `Something's not good, also I'm on <b>bottom</b>`,
+    position: "bottom-right",
+    variant: "danger",
+    closable: true,
+    indefinite: true,
+    ariaLive: "assertive",
+    ariaAtomic: true,
+    ariaCloseLabel: "Close",
+    onClose: () => {
+      const { oruga } = useProgrammatic();
+      oruga.notification.open("Custom notification closed!");
+    },
+  });
+}
+</script>
+
+<template>
+  <section>
+    <h2>Notification Demo</h2>
+    <hr />
+  </section>
+
+  <section>
+    <h3>Base</h3>
+
+    <o-notification
+      closable
+      variant="primary"
+      aria-close-label="Close notification">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id
+      fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien
+      laoreet elit
+    </o-notification>
+    <o-notification
+      closable
+      variant="secondary"
+      aria-close-label="Close notification">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id
+      fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien
+      laoreet elit
+    </o-notification>
+    <o-notification
+      closable
+      variant="info"
+      aria-close-label="Close notification">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id
+      fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien
+      laoreet elit
+    </o-notification>
+    <o-notification
+      closable
+      variant="success"
+      aria-close-label="Close notification">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id
+      fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien
+      laoreet elit
+    </o-notification>
+    <o-notification
+      closable
+      variant="warning"
+      aria-close-label="Close notification"
+      role="alert">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id
+      fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien
+      laoreet elit
+    </o-notification>
+    <o-notification
+      closable
+      variant="danger"
+      aria-close-label="Close notification"
+      role="alert">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id
+      fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien
+      laoreet elit
+    </o-notification>
+
+    <o-notification
+      closable
+      type="info"
+      variant="info"
+      aria-close-label="Close notification">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id
+      fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien
+      laoreet elit
+    </o-notification>
+  </section>
+
+  <section>
+    <h3>Programmatically opening</h3>
+
+    <div class="buttons">
+      <o-button
+        label="Launch notification (default)"
+        size="medium"
+        @click="simple" />
+      <o-button
+        label="Launch notification (custom)"
+        variant="success"
+        size="medium"
+        @click="success" />
+      <o-button label="Launch toast" size="medium" @click="toast" />
+      <o-button
+        label="Launch notification (custom)"
+        variant="danger"
+        size="medium"
+        @click="danger" />
+    </div>
+  </section>
+</template>

package/src/components/Pagination.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const total = ref(200);
+const current = ref(10);
+const perPage = ref(10);
+const rangeBefore = ref(3);
+const rangeAfter = ref(1);
+const order = ref("");
+const size = ref("");
+const isSimple = ref(false);
+const isRounded = ref(false);
+const prevIcon = ref("chevron-left");
+const nextIcon = ref("chevron-right");
+</script>
+
+<template>
+  <section>
+    <h2>Pagination Demo</h2>
+    <hr />
+  </section>
+
+  <section>
+    <h3>Base</h3>
+
+    <o-field grouped group-multiline>
+      <o-field label="Total">
+        <o-input v-model="total" type="number"></o-input>
+      </o-field>
+      <o-field label="Items per page">
+        <o-input v-model="perPage" type="number"></o-input>
+      </o-field>
+    </o-field>
+
+    <o-field grouped group-multiline>
+      <o-field label="Show buttons before current">
+        <o-input v-model="rangeBefore" type="number" min="0"></o-input>
+      </o-field>
+      <o-field label="Show buttons after current">
+        <o-input v-model="rangeAfter" type="number" min="0"></o-input>
+      </o-field>
+    </o-field>
+
+    <o-field grouped group-multiline>
+      <o-field label="Order">
+        <o-select v-model="order">
+          <option value="">default</option>
+          <option value="left">left</option>
+          <option value="centered">centered</option>
+          <option value="right">right</option>
+        </o-select>
+      </o-field>
+      <o-field label="Size">
+        <o-select v-model="size">
+          <option value="">default</option>
+          <option value="small">small</option>
+          <option value="medium">medium</option>
+          <option value="large">large</option>
+        </o-select>
+      </o-field>
+      <o-field label="Previous icon">
+        <o-select v-model="prevIcon">
+          <option value="chevron-left">Chevron</option>
+          <option value="arrow-left">Arrow</option>
+        </o-select>
+      </o-field>
+      <o-field label="Next icon">
+        <o-select v-model="nextIcon">
+          <option value="chevron-right">Chevron</option>
+          <option value="arrow-right">Arrow</option>
+        </o-select>
+      </o-field>
+    </o-field>
+    <o-field grouped group-multiline>
+      <o-switch v-model="isSimple">Simple</o-switch>
+      <o-switch v-model="isRounded">Rounded</o-switch>
+    </o-field>
+    <br />
+    <o-pagination
+      v-model:current="current"
+      :total="total"
+      :range-before="rangeBefore"
+      :range-after="rangeAfter"
+      :order="order"
+      :size="size"
+      :simple="isSimple"
+      :rounded="isRounded"
+      :per-page="perPage"
+      :icon-prev="prevIcon"
+      :icon-next="nextIcon"
+      aria-next-label="Next page"
+      aria-previous-label="Previous page"
+      aria-page-label="Page"
+      aria-current-label="Current page">
+    </o-pagination>
+  </section>
+</template>

package/src/components/Radio.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const radio = ref("Jack");
+const variant = ref("success");
+const size = ref("small");
+</script>
+
+<template>
+  <section>
+    <h2>Radio Demo</h2>
+    <hr />
+  </section>
+
+  <section>
+    <h3>Base</h3>
+
+    <o-field>
+      <o-radio v-model="radio" name="name" native-value="Flint">
+        Flint
+      </o-radio>
+      <o-radio v-model="radio" name="name" native-value="Silver">
+        Silver
+      </o-radio>
+      <o-radio v-model="radio" name="name" native-value="Jack"> Jack </o-radio>
+      <o-radio v-model="radio" name="name" native-value="Vane" disabled>
+        Vane
+      </o-radio>
+    </o-field>
+    <p><b>Selection:</b> {{ radio }}</p>
+  </section>
+
+  <section>
+    <h3>Variant</h3>
+
+    <o-field>
+      <o-radio v-model="variant" native-value="default"> Default </o-radio>
+    </o-field>
+    <o-field>
+      <o-radio v-model="variant" native-value="primary" variant="primary">
+        Primary
+      </o-radio>
+    </o-field>
+    <o-field>
+      <o-radio v-model="variant" native-value="secondary" variant="secondary">
+        Secondary
+      </o-radio>
+    </o-field>
+    <o-field>
+      <o-radio v-model="variant" native-value="info" variant="info">
+        Info
+      </o-radio>
+    </o-field>
+    <o-field>
+      <o-radio v-model="variant" native-value="success" variant="success">
+        Success
+      </o-radio>
+    </o-field>
+    <o-field>
+      <o-radio v-model="variant" native-value="warning" variant="warning">
+        Warning
+      </o-radio>
+    </o-field>
+    <o-field>
+      <o-radio v-model="variant" native-value="danger" variant="danger">
+        Danger
+      </o-radio>
+    </o-field>
+    <p><b>Selection:</b> {{ variant }}</p>
+  </section>
+
+  <section>
+    <h3>Size</h3>
+
+    <o-field>
+      <o-radio v-model="size" native-value="small" size="small">
+        Small
+      </o-radio>
+    </o-field>
+    <o-field>
+      <o-radio v-model="size" native-value="default"> Default </o-radio>
+    </o-field>
+    <o-field>
+      <o-radio v-model="size" native-value="medium" size="medium">
+        Medium
+      </o-radio>
+    </o-field>
+    <o-field>
+      <o-radio v-model="size" native-value="large" size="large">
+        Large
+      </o-radio>
+    </o-field>
+    <p><b>Selection:</b> {{ size }}</p>
+  </section>
+</template>

package/src/components/Select.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const selectedOptions = ref([]);
+</script>
+
+<template>
+  <section>
+    <h2>Select Demo</h2>
+    <hr />
+  </section>
+
+  <section>
+    <h3>Base</h3>
+
+    <o-field label="Simple">
+      <o-select placeholder="Select a name">
+        <option value="flint">Flint</option>
+        <option value="silver">Silver</option>
+      </o-select>
+    </o-field>
+
+    <o-field label="Grouped">
+      <o-select placeholder="Select a character" icon="user">
+        <optgroup label="Black Sails">
+          <option value="flint">Flint</option>
+          <option value="silver">Silver</option>
+          <option value="vane">Vane</option>
+          <option value="billy">Billy</option>
+          <option value="jack">Jack</option>
+        </optgroup>
+
+        <optgroup label="Breaking Bad">
+          <option value="heisenberg">Heisenberg</option>
+          <option value="jesse">Jesse</option>
+          <option value="saul">Saul</option>
+          <option value="mike">Mike</option>
+        </optgroup>
+
+        <optgroup label="Game of Thrones">
+          <option value="tyrion-lannister">Tyrion Lannister</option>
+          <option value="jamie-lannister">Jamie Lannister</option>
+          <option value="daenerys-targaryen">Daenerys Targaryen</option>
+          <option value="jon-snow">Jon Snow</option>
+        </optgroup>
+      </o-select>
+    </o-field>
+
+    <o-field
+      label="Error"
+      variant="danger"
+      message="Something went wrong with this field">
+      <o-select placeholder="Select a character">
+        <option value="flint">Flint</option>
+        <option value="silver">Silver</option>
+      </o-select>
+    </o-field>
+
+    <o-field label="Rounded">
+      <o-select placeholder="Select a character" rounded>
+        <option value="flint">Flint</option>
+        <option value="silver">Silver</option>
+      </o-select>
+    </o-field>
+
+    <o-field label="Disabled">
+      <o-select placeholder="Select a character" disabled>
+        <option value="flint">Flint</option>
+        <option value="silver">Silver</option>
+      </o-select>
+    </o-field>
+
+    <o-field label="Disabled option">
+      <o-select placeholder="Select a character">
+        <option value="flint">Flint</option>
+        <option value="silver" disabled>Silver</option>
+      </o-select>
+    </o-field>
+
+    <o-field label="Expanded">
+      <o-select placeholder="Select a character" expanded>
+        <option value="flint">Flint</option>
+        <option value="silver">Silver</option>
+      </o-select>
+    </o-field>
+
+    <o-field label="Multiple">
+      <o-select v-model="selectedOptions" multiple native-size="8">
+        <option value="flint">Flint</option>
+        <option value="silver">Silver</option>
+        <option value="vane">Vane</option>
+        <option value="billy">Billy</option>
+        <option value="jack">Jack</option>
+        <option value="heisenberg">Heisenberg</option>
+        <option value="jesse">Jesse</option>
+        <option value="saul">Saul</option>
+        <option value="mike">Mike</option>
+      </o-select>
+    </o-field>
+  </section>
+
+  <section class="my-4">
+    <h3>Sizes</h3>
+
+    <o-field label="Size 'small'">
+      <o-select placeholder="Select a name" size="small">
+        <option value="flint">Flint</option>
+        <option value="silver">Silver</option>
+      </o-select>
+    </o-field>
+
+    <o-field label="Size 'default'">
+      <o-select placeholder="Select a name">
+        <option value="flint">Flint</option>
+        <option value="silver">Silver</option>
+      </o-select>
+    </o-field>
+
+    <o-field label="Size 'medium'">
+      <o-select placeholder="Select a name" size="medium">
+        <option value="flint">Flint</option>
+        <option value="silver">Silver</option>
+      </o-select>
+    </o-field>
+
+    <o-field label="Size 'large'">
+      <o-select placeholder="Select a name" size="large">
+        <option value="flint">Flint</option>
+        <option value="silver">Silver</option>
+      </o-select>
+    </o-field>
+  </section>
+
+  <section class="my-4">
+    <h3>With Icons</h3>
+
+    <o-field>
+      <o-select placeholder="Select a name" icon="search" icon-clickable>
+        <option value="flint">Flint</option>
+        <option value="silver">Silver</option>
+      </o-select>
+    </o-field>
+
+    <o-field>
+      <o-select
+        placeholder="Select a name"
+        icon="envelope"
+        icon-right="times-circle"
+        icon-right-clickable>
+        <option value="flint">Flint</option>
+        <option value="silver">Silver</option>
+      </o-select>
+    </o-field>
+  </section>
+</template>

package/src/components/Sidebar.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const isOpen = ref(false);
+const isOverlay = ref(true);
+const isFullheight = ref(true);
+const isFullwidth = ref(false);
+const isReduced = ref(false);
+const right = ref(false);
+const expandOnHover = ref(false);
+
+const toggleSidebar = () => {
+  isOpen.value = !isOpen.value;
+};
+</script>
+
+<template>
+  <section>
+    <h2>Sidebar Demoo</h2>
+    <hr />
+  </section>
+
+  <section>
+    <h3>Base</h3>
+
+    <o-sidebar
+      v-model:open="isOpen"
+      variant="primary"
+      :fullheight="isFullheight"
+      :fullwidth="isFullwidth"
+      :overlay="isOverlay"
+      :right="right"
+      :reduce="isReduced"
+      :expand-on-hover="expandOnHover"
+      mobile="fullwidth"
+      @close="toggleSidebar()">
+      <a class="btn-close" aria-label="Close" @click="toggleSidebar()" />
+      <img
+        width="80"
+        src="https://avatars2.githubusercontent.com/u/66300512?s=200&v=4"
+        alt="Lightweight UI components for Vue.js" />
+      <h3>Example</h3>
+    </o-sidebar>
+
+    <o-field grouped>
+      <o-switch v-model="isOverlay">Overlay</o-switch>
+      <o-switch v-model="isFullheight">Fullheight</o-switch>
+      <o-switch v-model="isFullwidth">Fullwidth</o-switch>
+      <o-switch v-model="isReduced">Reduce</o-switch>
+      <o-switch v-model="expandOnHover">Expand on hover</o-switch>
+      <o-switch v-model="right">right</o-switch>
+    </o-field>
+
+    <o-button @click="toggleSidebar()">Show</o-button>
+  </section>
+</template>

package/src/components/Skeleton.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const animated = ref(true);
+</script>
+
+<template>
+  <section>
+    <h2>Skeleton Demo</h2>
+    <hr />
+  </section>
+
+  <section>
+    <h3>Base</h3>
+
+    <o-field grouped group-multiline>
+      <o-switch v-model="animated">Animated</o-switch>
+    </o-field>
+    20%
+    <o-skeleton width="20%" :animated="animated" />
+    40%
+    <o-skeleton width="40%" :animated="animated" />
+    80%
+    <o-skeleton width="80%" :animated="animated" />
+    Count 2
+    <o-skeleton :animated="animated" :count="2" />
+  </section>
+
+  <section>
+    <h3>Circle</h3>
+
+    <o-skeleton :animated="animated" circle width="64px" height="64px" />
+  </section>
+
+  <section>
+    <h3>Sizes</h3>
+    Small
+    <o-skeleton :animated="animated" size="small" />
+    Default
+    <o-skeleton :animated="animated" />
+    Medium
+    <o-skeleton :animated="animated" size="medium" />
+    Large
+    <o-skeleton :animated="animated" size="large" />
+  </section>
+
+  <section>
+    <h3>Position</h3>
+
+    Left
+    <o-skeleton width="30%" position="left" :animated="animated" />
+    Center
+    <o-skeleton width="30%" position="centered" :animated="animated" />
+    Right
+    <o-skeleton width="30%" position="right" :animated="animated" />
+  </section>
+</template>