@oruga-ui/theme-oruga 0.2.1 → 0.3.0

package/src/components/Radio.vue

@@ -1,111 +0,0 @@
-<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" label="Flint" />
-      <o-radio
-        v-model="radio"
-        name="name"
-        native-value="Silver"
-        label="Silver" />
-      <o-radio v-model="radio" name="name" native-value="Jack" label="Jack" />
-      <o-radio
-        v-model="radio"
-        name="name"
-        native-value="Vane"
-        disabled
-        label="Vane" />
-    </o-field>
-
-    <p><b>Selection:</b> {{ radio }}</p>
-  </section>
-
-  <section>
-    <h3>Variant</h3>
-
-    <o-field>
-      <o-radio v-model="variant" native-value="default" label="Default" />
-    </o-field>
-    <o-field>
-      <o-radio
-        v-model="variant"
-        native-value="primary"
-        variant="primary"
-        label="Primary" />
-    </o-field>
-    <o-field>
-      <o-radio
-        v-model="variant"
-        native-value="secondary"
-        variant="secondary"
-        label="Secondary" />
-    </o-field>
-    <o-field>
-      <o-radio
-        v-model="variant"
-        native-value="info"
-        variant="info"
-        label="Info" />
-    </o-field>
-    <o-field>
-      <o-radio
-        v-model="variant"
-        native-value="success"
-        variant="success"
-        label="Success" />
-    </o-field>
-    <o-field>
-      <o-radio
-        v-model="variant"
-        native-value="warning"
-        variant="warning"
-        label="Warning" />
-    </o-field>
-    <o-field>
-      <o-radio
-        v-model="variant"
-        native-value="danger"
-        variant="danger"
-        label="Danger" />
-    </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" label="Small" />
-    </o-field>
-    <o-field>
-      <o-radio v-model="size" native-value="default" label="Default" />
-    </o-field>
-    <o-field>
-      <o-radio
-        v-model="size"
-        native-value="medium"
-        size="medium"
-        label="Medium" />
-    </o-field>
-    <o-field>
-      <o-radio v-model="size" native-value="large" size="large" label="Large" />
-    </o-field>
-
-    <p><b>Selection:</b> {{ size }}</p>
-  </section>
-</template>

package/src/components/Select.vue

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

@@ -1,73 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-
-const isActive = ref(false);
-const isOverlay = ref(true);
-const isFullheight = ref(true);
-const isFullwidth = ref(false);
-const isReduced = ref(false);
-const expandOnHover = ref(false);
-const teleport = ref(false);
-const position = ref("left");
-const inline = ref(false);
-
-const toggleSidebar = () => {
-  isActive.value = !isActive.value;
-};
-</script>
-
-<template>
-  <section>
-    <h2>Sidebar Demoo</h2>
-    <hr />
-  </section>
-
-  <section>
-    <h3>Base</h3>
-
-    <o-field grouped>
-      <o-switch v-model="isOverlay" label="Overlay" />
-      <o-switch v-model="isFullheight" label="Fullheight" />
-      <o-switch v-model="isFullwidth" label="Fullwidth" />
-      <o-switch v-model="isReduced" label="Reduce" />
-      <o-switch v-model="expandOnHover" label="Expand on hover" />
-      <o-switch v-model="teleport" label="On body" />
-      <o-switch v-model="inline" label="Inline" />
-    </o-field>
-
-    <o-field label="Position">
-      <o-select v-model="position">
-        <option value="top">Top</option>
-        <option value="bottom">Bottom</option>
-        <option value="right">Right</option>
-        <option value="left">Left</option>
-      </o-select>
-    </o-field>
-    <o-button @click="toggleSidebar()">Show</o-button>
-
-    <o-sidebar
-      v-model:active="isActive"
-      variant="primary"
-      :fullheight="isFullheight"
-      :fullwidth="isFullwidth"
-      :overlay="isOverlay"
-      :position="position"
-      :reduce="isReduced"
-      :expand-on-hover="expandOnHover"
-      :teleport="teleport"
-      :inline="inline"
-      mobile="fullwidth"
-      @close="toggleSidebar()">
-      <o-button
-        class="btn-close"
-        icon-left="times"
-        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>
-  </section>
-</template>

package/src/components/Skeleton.vue

@@ -1,75 +0,0 @@
-<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>
-      <o-switch v-model="animated" label="Animated" />
-    </o-field>
-
-    <o-field label="20%">
-      <o-skeleton width="20%" :animated="animated" />
-    </o-field>
-    <o-field label="40%">
-      <o-skeleton width="40%" :animated="animated" />
-    </o-field>
-    <o-field label="80%">
-      <o-skeleton width="80%" :animated="animated" />
-    </o-field>
-    <o-field label="100%">
-      <o-skeleton :animated="animated" />
-    </o-field>
-    <o-field label=" Count 2">
-      <o-skeleton :animated="animated" :count="2" />
-    </o-field>
-  </section>
-
-  <section>
-    <h3>Circle</h3>
-
-    <o-skeleton :animated="animated" circle width="64px" height="64px" />
-  </section>
-
-  <section>
-    <h3>Sizes</h3>
-
-    <o-field label="Small" grouped>
-      <o-skeleton size="small" />
-    </o-field>
-    <o-field label="Default" grouped>
-      <o-skeleton />
-    </o-field>
-    <o-field label="Medium" grouped>
-      <o-skeleton size="medium" />
-    </o-field>
-    <o-field label="Large" grouped>
-      <o-skeleton size="large" />
-    </o-field>
-  </section>
-
-  <section>
-    <h3>Position</h3>
-
-    <o-field label="Left" grouped>
-      <o-skeleton width="30%" position="left" />
-    </o-field>
-
-    <o-field label="Center" grouped>
-      <o-skeleton width="30%" position="centered" />
-    </o-field>
-
-    <o-field label="Right" grouped>
-      <o-skeleton width="30%" position="right" />
-    </o-field>
-  </section>
-</template>

package/src/components/Slider.vue

@@ -1,226 +0,0 @@
-<script setup lang="ts">
-import { computed, reactive, ref } from "vue";
-
-const value = ref(5);
-const sliderValue = ref(4);
-const numbers = ref([2, 5]);
-const numbers2 = ref([2, 6]);
-
-const settings = reactive({
-  rounded: false,
-  tooltip: true,
-  variant: "warning",
-  size: "medium",
-});
-
-const sliderType = computed(() => {
-  if (sliderValue.value > 25 && sliderValue.value < 75) return "warning";
-  else if (sliderValue.value >= 75) return "success";
-  return "danger";
-});
-</script>
-
-<template>
-  <section>
-    <h2>Slider Demo</h2>
-    <hr />
-  </section>
-
-  <section>
-    <h3>Base</h3>
-
-    <o-field label="Simple">
-      <o-slider :model-value="8" />
-    </o-field>
-
-    <o-field label="Disabled">
-      <o-slider :model-value="30" disabled />
-    </o-field>
-
-    <o-field label="Rounded thumb & No Tooltip">
-      <o-slider :model-value="8" rounded :tooltip="false" />
-    </o-field>
-
-    <o-field label="Custom tooltip label">
-      <o-slider :rounded="true" :custom-formatter="(val: any) => val + '%'" />
-    </o-field>
-
-    <o-field label="Tooltip type">
-      <o-slider v-model="sliderValue" :tooltip-variant="sliderType" />
-    </o-field>
-  </section>
-
-  <section>
-    <h3>Sizes</h3>
-
-    <o-field label="Small">
-      <o-slider v-model="value" size="small" />
-    </o-field>
-
-    <o-field label="Default">
-      <o-slider v-model="value" />
-    </o-field>
-
-    <o-field label="Medium">
-      <o-slider v-model="value" size="medium" />
-    </o-field>
-
-    <o-field label="Large">
-      <o-slider v-model="value" size="large" />
-    </o-field>
-  </section>
-
-  <section>
-    <h3>Variant</h3>
-
-    <o-field label="Default">
-      <o-slider v-model="value" :rounded="true" :tooltip="true" />
-    </o-field>
-
-    <o-field label="Primary">
-      <o-slider
-        v-model="value"
-        :rounded="true"
-        :tooltip="true"
-        variant="primary"
-        tooltip-variant="primary" />
-    </o-field>
-    <o-field label="Secondary">
-      <o-slider
-        v-model="value"
-        :rounded="true"
-        :tooltip="true"
-        variant="secondary"
-        tooltip-variant="secondary" />
-    </o-field>
-    <o-field label="Success">
-      <o-slider
-        v-model="value"
-        :rounded="true"
-        :tooltip="true"
-        variant="success"
-        tooltip-variant="success" />
-    </o-field>
-    <o-field label="Info">
-      <o-slider
-        v-model="value"
-        :rounded="true"
-        :tooltip="true"
-        variant="info"
-        tooltip-variant="info" />
-    </o-field>
-    <o-field label="Warning">
-      <o-slider
-        v-model="value"
-        :rounded="true"
-        :tooltip="true"
-        variant="warning"
-        tooltip-variant="warning" />
-    </o-field>
-    <o-field label="Danger">
-      <o-slider
-        v-model="value"
-        :rounded="true"
-        :tooltip="true"
-        variant="danger"
-        tooltip-variant="danger" />
-    </o-field>
-  </section>
-
-  <section>
-    <h3>Customize</h3>
-    <o-field>
-      <o-field>
-        <o-switch v-model="settings.rounded" label="Rounded" />
-      </o-field>
-      <o-field>
-        <o-switch v-model="settings.tooltip" label="With Tooltip" />
-      </o-field>
-      <o-field label="Size">
-        <o-select v-model="settings.size">
-          <option value="small">small</option>
-          <option value="default">default</option>
-          <option value="medium">medium</option>
-          <option value="large">large</option>
-        </o-select>
-      </o-field>
-      <o-field label="Variant">
-        <o-select v-model="settings.variant">
-          <option value="default">default</option>
-          <option value="primary">primary</option>
-          <option value="secondary">secondary</option>
-          <option value="success">success</option>
-          <option value="info">info</option>
-          <option value="warning">warning</option>
-          <option value="danger">danger</option>
-        </o-select>
-      </o-field>
-    </o-field>
-
-    <o-field label="Tooltip type & Default Variant">
-      <o-slider
-        :rounded="settings.rounded"
-        :tooltip="settings.tooltip"
-        :variant="settings.variant"
-        :size="settings.size" />
-    </o-field>
-  </section>
-
-  <section>
-    <h3>Tick and label</h3>
-
-    <o-field label="Show ticks">
-      <o-slider :rounded="true" size="small" :min="1" :max="10" ticks />
-    </o-field>
-
-    <o-field label="Custom tick and label">
-      <o-slider :rounded="true" size="medium" :min="0" :max="10">
-        <template v-for="val in [3, 5, 8]" :key="val">
-          <o-slider-tick :value="val">{{ val }}</o-slider-tick>
-        </template>
-      </o-slider>
-    </o-field>
-
-    <o-field label="Fan">
-      <o-slider
-        :rounded="true"
-        :min="0"
-        :max="3"
-        aria-label="Fan"
-        :tooltip="false">
-        <o-slider-tick :value="0">Off</o-slider-tick>
-        <o-slider-tick :value="1">Low</o-slider-tick>
-        <o-slider-tick :value="2">High</o-slider-tick>
-        <o-slider-tick :value="3">Auto</o-slider-tick>
-      </o-slider>
-    </o-field>
-  </section>
-
-  <section>
-    <h3>Range</h3>
-
-    <o-field label="Range">
-      <o-slider
-        v-model="numbers"
-        :rounded="true"
-        :min="1"
-        :max="15"
-        :step="0.5"
-        ticks>
-      </o-slider>
-    </o-field>
-    <p>{{ numbers }}</p>
-
-    <o-field>
-      <o-slider
-        v-model="numbers2"
-        :rounded="true"
-        variant="danger"
-        :min="-2"
-        :max="8"
-        :step="2">
-      </o-slider>
-    </o-field>
-    <p>{{ numbers2 }}</p>
-  </section>
-</template>