@oruga-ui/theme-oruga 0.0.1

package/src/components/Slider.vue

@@ -0,0 +1,226 @@
+<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">Rounded</o-switch>
+      </o-field>
+      <o-field>
+        <o-switch v-model="settings.tooltip">With Tooltip</o-switch>
+      </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>

package/src/components/Steps.vue

@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const activeStep = ref("0");
+
+const showSocial = ref(false);
+const isAnimated = ref(true);
+const isVertical = ref(false);
+const isRounded = ref(true);
+const isStepsClickable = ref(false);
+
+const hasNavigation = ref(true);
+const customNavigation = ref(false);
+const isProfileSuccess = ref(false);
+
+const prevIcon = ref("chevron-left");
+const nextIcon = ref("chevron-right");
+const labelPosition = ref("bottom");
+const stepsPosition = ref("left");
+const position = ref(null);
+const size = ref(null);
+</script>
+
+<template>
+  <section>
+    <h2>Steps Demo</h2>
+    <hr />
+  </section>
+
+  <section>
+    <h3>Base</h3>
+
+    <o-field grouped group-multiline>
+      <o-field>
+        <o-switch v-model="showSocial"> Show Social step </o-switch>
+      </o-field>
+      <o-field>
+        <o-switch v-model="isAnimated"> Animated </o-switch>
+      </o-field>
+      <o-field>
+        <o-switch v-model="isRounded"> Rounded </o-switch>
+      </o-field>
+      <o-field>
+        <o-switch v-model="isVertical"> Vertical </o-switch>
+      </o-field>
+      <o-field>
+        <o-switch v-model="isStepsClickable"> Clickable Marker </o-switch>
+      </o-field>
+    </o-field>
+    <o-field grouped group-multiline>
+      <o-field>
+        <o-switch v-model="hasNavigation"> Navigation Buttons </o-switch>
+      </o-field>
+      <o-field>
+        <o-switch v-model="customNavigation"> Custom Navigation </o-switch>
+      </o-field>
+      <o-field>
+        <o-switch v-model="isProfileSuccess">
+          Set <code>success</code> for profile
+        </o-switch>
+      </o-field>
+    </o-field>
+    <o-field v-if="hasNavigation" grouped group-multiline>
+      <o-field label="Prev 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 label="Label position">
+        <o-select v-model="labelPosition">
+          <option value="bottom">Bottom</option>
+          <option value="right">Right</option>
+          <option value="left">Left</option>
+        </o-select>
+      </o-field>
+      <o-field label="steps position">
+        <o-select v-model="stepsPosition">
+          <option value="right">Right</option>
+          <option value="left">Left</option>
+        </o-select>
+      </o-field>
+    </o-field>
+
+    <o-steps
+      v-model="activeStep"
+      :vertical="isVertical"
+      :position="stepsPosition"
+      :animated="isAnimated"
+      :rounded="isRounded"
+      :has-navigation="hasNavigation"
+      :icon-prev="prevIcon"
+      :icon-next="nextIcon"
+      :label-position="labelPosition">
+      <o-step-item step="1" label="Account" :clickable="isStepsClickable">
+        <h1 class="title text-center">Account</h1>
+        Lorem ipsum dolor sit amet.
+      </o-step-item>
+
+      <o-step-item
+        step="2"
+        label="Profile"
+        :clickable="isStepsClickable"
+        :variant="isProfileSuccess ? 'success' : ''">
+        <h1 class="title text-center">Profile</h1>
+        Lorem ipsum dolor sit amet.
+      </o-step-item>
+
+      <o-step-item
+        step="3"
+        :visible="showSocial"
+        label="Social"
+        :clickable="isStepsClickable">
+        <h1 class="title text-center">Social</h1>
+        Lorem ipsum dolor sit amet.
+      </o-step-item>
+
+      <o-step-item
+        :step="showSocial ? '4' : '3'"
+        label="Finish"
+        :clickable="isStepsClickable"
+        disabled>
+        <h1 class="title text-center">Finish</h1>
+        Lorem ipsum dolor sit amet.
+      </o-step-item>
+
+      <template v-if="customNavigation" #navigation="{ previous, next }">
+        <o-button
+          outlined
+          variant="danger"
+          icon-pack="fas"
+          icon-left="backward"
+          :disabled="previous.disabled"
+          @click.prevent="previous.action">
+          Previous
+        </o-button>
+        <o-button
+          outlined
+          variant="success"
+          icon-pack="fas"
+          icon-right="forward"
+          :disabled="next.disabled"
+          @click.prevent="next.action">
+          Next
+        </o-button>
+      </template>
+    </o-steps>
+  </section>
+
+  <section>
+    <h3>Variants</h3>
+
+    Warning
+    <o-steps variant="warning">
+      <o-step-item label="Account" icon="user-lock">empty</o-step-item>
+      <o-step-item label="Profile" icon="user">empty</o-step-item>
+      <o-step-item label="Social" icon="user-plus">empty</o-step-item>
+    </o-steps>
+
+    Info
+    <o-steps variant="info">
+      <o-step-item label="Account" icon="user-lock">empty</o-step-item>
+      <o-step-item label="Profile" icon="user">empty</o-step-item>
+      <o-step-item label="Social" icon="user-plus">empty</o-step-item>
+    </o-steps>
+
+    Success
+    <o-steps variant="success">
+      <o-step-item label="Account" icon="user-lock">empty</o-step-item>
+      <o-step-item label="Profile" icon="user">empty</o-step-item>
+      <o-step-item label="Social" icon="user-plus">empty</o-step-item>
+    </o-steps>
+  </section>
+
+  <section>
+    <h3>Vertical</h3>
+
+    <o-field grouped group-multiline>
+      <o-field>
+        <o-switch v-model="position" true-value="right">
+          Right position</o-switch
+        >
+      </o-field>
+      <o-field label="Size">
+        <o-select v-model="size" placeholder="Size">
+          <option :value="null">Default</option>
+          <option value="small">Small</option>
+          <option value="medium">Medium</option>
+          <option value="large">Large</option>
+        </o-select>
+      </o-field>
+      <o-field label="Label position" label-position="on-border">
+        <o-select v-model="labelPosition">
+          <option value="bottom">Bottom</option>
+          <option value="right">Right</option>
+          <option value="left">Left</option>
+        </o-select>
+      </o-field>
+    </o-field>
+
+    <o-steps
+      :position="position"
+      :label-position="labelPosition"
+      :size="size"
+      vertical>
+      <o-step-item label="Account" icon="user-lock">
+        Account: Lorem ipsum dolor sit amet. <br />
+        Account: Lorem ipsum dolor sit amet. <br />
+        Account: Lorem ipsum dolor sit amet.
+      </o-step-item>
+
+      <o-step-item label="Profile" icon="user">
+        Profile: Lorem ipsum dolor sit amet. <br />
+        Profile: Lorem ipsum dolor sit amet.? <br />
+        Profile: Lorem ipsum dolor sit amet. <br />
+        Profile: Lorem ipsum dolor sit amet.
+      </o-step-item>
+
+      <o-step-item label="Social" icon="user-plus" disabled>
+        Social: Lorem ipsum dolor sit amet. <br />
+        Social: Lorem ipsum dolor sit amet. <br />
+        Social: Lorem ipsum dolor sit amet. <br />
+        Social: Lorem ipsum dolor sit amet. <br />
+        Social: Lorem ipsum dolor sit amet.
+      </o-step-item>
+    </o-steps>
+  </section>
+</template>

package/src/components/Switch.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const isSwitched = ref(false);
+const isSwitchedCustom = ref("Yes");
+const isRounded = ref(false);
+const position = ref("right");
+const size = ref("");
+const variant = ref(null);
+const passive = ref(null);
+</script>
+
+<template>
+  <section>
+    <h2>Switch Demo</h2>
+    <hr />
+  </section>
+
+  <section>
+    <h3>Base</h3>
+
+    <o-field>
+      <o-switch>Default </o-switch>
+    </o-field>
+    <o-field>
+      <o-switch v-model="isSwitched">
+        {{ isSwitched }}
+      </o-switch>
+    </o-field>
+    <o-field>
+      <o-switch v-model="isSwitchedCustom" true-value="Yes" false-value="No">
+        {{ isSwitchedCustom }}
+      </o-switch>
+    </o-field>
+    <o-field>
+      <o-switch disabled>Disabled</o-switch>
+    </o-field>
+  </section>
+
+  <section>
+    <h3>Variant</h3>
+
+    <o-field>
+      <o-switch :value="true"> Default </o-switch>
+    </o-field>
+    <o-field>
+      <o-switch :value="true" variant="primary"> Primary </o-switch>
+    </o-field>
+    <o-field>
+      <o-switch :value="true" variant="secondary"> Secondary </o-switch>
+    </o-field>
+    <o-field>
+      <o-switch :value="true" variant="info"> Info </o-switch>
+    </o-field>
+    <o-field>
+      <o-switch :value="true" variant="success"> Success </o-switch>
+    </o-field>
+    <o-field>
+      <o-switch :value="true" variant="danger"> Danger </o-switch>
+    </o-field>
+    <o-field>
+      <o-switch :value="true" variant="warning"> Warning </o-switch>
+    </o-field>
+  </section>
+
+  <section>
+    <h3>Size</h3>
+
+    <o-field>
+      <o-switch size="small">Small</o-switch>
+    </o-field>
+    <o-field>
+      <o-switch>Default</o-switch>
+    </o-field>
+    <o-field>
+      <o-switch size="medium">Medium</o-switch>
+    </o-field>
+    <o-field>
+      <o-switch size="large">Large</o-switch>
+    </o-field>
+  </section>
+
+  <section>
+    <h3>Style variants</h3>
+
+    <o-field grouped>
+      <o-switch v-model="isRounded">Rounded</o-switch>
+      <o-switch v-model="position" true-value="left" false-value="right">
+        Label on left
+      </o-switch>
+    </o-field>
+    <o-field grouped>
+      <o-field label="Variant">
+        <o-select v-model="variant" expanded placeholder="Variant">
+          <option value="null">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 label="Passive Variant">
+        <o-select v-model="passive" expanded placeholder="Passive Variant">
+          <option value="null">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 label="Size">
+        <o-select v-model="size" expanded>
+          <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>
+
+    <o-switch
+      :rounded="isRounded"
+      :position="position"
+      :size="size"
+      :variant="variant"
+      :passive-variant="passive">
+      Sample
+    </o-switch>
+  </section>
+</template>