@oruga-ui/theme-oruga 0.0.1

package/src/components/Field.vue

@@ -0,0 +1,243 @@
+<template>
+  <section>
+    <h2>Field Demo</h2>
+    <hr />
+  </section>
+
+  <section>
+    <h3>Base</h3>
+
+    <o-field label="Name">
+      <o-input value="Kevin Garvey" />
+    </o-field>
+
+    <o-field
+      label="Email"
+      variant="danger"
+      message-variant="info"
+      message="This email is invalid">
+      <o-input type="email" value="john@" maxlength="30" />
+    </o-field>
+
+    <o-field
+      label="Username"
+      variant="success"
+      message="This username is available">
+      <o-input value="johnsilver" maxlength="30" has-counter />
+    </o-field>
+
+    <o-field label="Password" variant="warning">
+      <o-input value="123" type="password" maxlength="30" />
+    </o-field>
+
+    <o-field label="Subject" grouped>
+      <o-select placeholder="Select a subject">
+        <option value="1">Option 1</option>
+        <option value="2">Option 2</option>
+      </o-select>
+    </o-field>
+
+    <o-field
+      label="Wrong subject"
+      variant="danger"
+      message="Selected subject is wrong">
+      <o-select placeholder="Select a subject">
+        <option value="1">Option 1</option>
+        <option value="2">Option 2</option>
+      </o-select>
+    </o-field>
+  </section>
+
+  <section>
+    <h3>Addons</h3>
+
+    <o-field variant="danger">
+      <o-input placeholder="Search..." type="search" icon="search" />
+      <o-button variant="primary">Search</o-button>
+    </o-field>
+
+    <o-field>
+      <o-input placeholder="This is expanded" expanded />
+      <o-button>@gmail.com</o-button>
+    </o-field>
+
+    <o-field>
+      <o-select placeholder="Currency">
+        <option>$</option>
+        <option>£</option>
+        <option>€</option>
+      </o-select>
+      <o-input type="number" placeholder="0,00" /><o-button variant="success">
+        Transfer
+      </o-button>
+    </o-field>
+
+    <o-field>
+      <o-button>
+        <o-icon icon="bold" />
+      </o-button>
+
+      <o-button>
+        <o-icon icon="italic" />
+      </o-button>
+
+      <o-button>
+        <o-icon icon="underline" />
+      </o-button>
+
+      <o-button>
+        <o-icon icon="align-left" />
+      </o-button>
+
+      <o-button>
+        <o-icon icon="align-center" />
+      </o-button>
+
+      <o-button>
+        <o-icon icon="align-right" />
+      </o-button>
+
+      <o-input placeholder="Search..." type="search" icon="search" />
+    </o-field>
+
+    <o-field>
+      <o-button variant="primary"> Button </o-button>
+      <o-dropdown>
+        <template #trigger>
+          <o-button variant="primary">
+            <o-icon icon="caret-down" />
+          </o-button>
+        </template>
+
+        <o-dropdown-item>Action</o-dropdown-item>
+        <o-dropdown-item>Another action</o-dropdown-item>
+        <o-dropdown-item>Something else</o-dropdown-item>
+      </o-dropdown>
+    </o-field>
+
+    <o-field>
+      <o-button variant="primary"> Button </o-button>
+      <o-dropdown>
+        <template #trigger>
+          <o-button variant="primary">
+            <o-icon icon="caret-down" />
+          </o-button>
+        </template>
+
+        <o-dropdown-item>Action</o-dropdown-item>
+        <o-dropdown-item>Another action</o-dropdown-item>
+        <o-dropdown-item>Something else</o-dropdown-item>
+      </o-dropdown>
+      <o-button variant="primary"> Button </o-button>
+    </o-field>
+
+    <o-field>
+      <o-input icon="search" type="search" placeholder="Search..." />
+      <o-dropdown>
+        <template #trigger>
+          <o-button>
+            <span>Filters</span>
+            <o-icon icon="caret-down" />
+          </o-button>
+        </template>
+        <o-dropdown-item value="open_issues">
+          Open Issues and Pull Requests
+        </o-dropdown-item>
+        <o-dropdown-item value="your_issues">Your Issues</o-dropdown-item>
+        <o-dropdown-item value="pull_requests">
+          Your Pull Requests
+        </o-dropdown-item>
+        <o-dropdown-item value="everything">Everything</o-dropdown-item>
+      </o-dropdown>
+    </o-field>
+  </section>
+
+  <section>
+    <h3>Grouped</h3>
+
+    <o-field grouped variant="danger" message="What do you want to search?">
+      <o-input placeholder="Search..." />
+      <o-button variant="primary">Search</o-button>
+    </o-field>
+
+    <o-field grouped message="What do you want to search?">
+      <o-input placeholder="Search..." expanded />
+      <o-button variant="primary">Search</o-button>
+    </o-field>
+
+    <o-field grouped group-multiline>
+      <o-input />
+      <o-button>First</o-button>
+      <o-button>Second</o-button>
+      <o-button>Third</o-button>
+      <o-button>Fourth</o-button>
+      <o-button>Fifth</o-button>
+      <o-button>Sixth</o-button>
+      <o-button>Seventh</o-button>
+      <o-button>Eighth</o-button>
+    </o-field>
+  </section>
+
+  <section class="py-4 container">
+    <h3>Horizontal</h3>
+
+    <o-field
+      horizontal
+      label="Subject"
+      variant="danger"
+      message="Please enter a subject">
+      <o-input name="subject" icon="pen" expanded />
+    </o-field>
+
+    <o-field horizontal label="From">
+      <o-input name="name" placeholder="Name" icon="user" expanded />
+      <o-input
+        name="email"
+        type="email"
+        placeholder="nobody@nowhere.com"
+        icon="at"
+        expanded />
+    </o-field>
+
+    <o-field horizontal label="Topic">
+      <o-select placeholder="Select a topic" icon="book">
+        <option value="1">Oruga</option>
+        <option value="2">Vue.js</option>
+        <option value="3">UI</option>
+      </o-select>
+    </o-field>
+
+    <o-field horizontal label="Message">
+      <o-input type="textarea" />
+    </o-field>
+
+    <o-field horizontal>
+      <!-- Label left empty for spacing -->
+      <o-button variant="primary" icon-left="envelope" outlined>
+        Send message
+      </o-button>
+    </o-field>
+  </section>
+
+  <section>
+    <h3>Slot</h3>
+
+    <o-field horizontal>
+      <template #label>
+        With tooltip
+        <o-tooltip label="Help text here for explanation">
+          <o-icon size="small" icon="question-circle" />
+        </o-tooltip>
+      </template>
+      <o-input size="medium" />
+    </o-field>
+
+    <o-field>
+      <template #label> Label with custom <i>style</i> </template>
+      <o-input />
+      <template #message>
+        <small>Message with custom <b>style</b> </small>
+      </template>
+    </o-field>
+  </section>
+</template>

package/src/components/Icon.vue

@@ -0,0 +1,66 @@
+<template>
+  <section>
+    <h2>Icon Demo</h2>
+    <hr />
+  </section>
+
+  <section>
+    <h3>Base</h3>
+
+    <o-field>
+      <o-icon pack="fas" icon="user" size="small" />
+      <o-icon pack="fas" icon="home" size="small" />
+      <o-icon pack="fas" icon="tachometer-alt" size="small" />
+    </o-field>
+
+    <o-field>
+      <o-icon pack="fas" icon="user" />
+      <o-icon pack="fas" icon="home" />
+      <o-icon pack="fas" icon="tachometer-alt" />
+    </o-field>
+
+    <o-field>
+      <o-icon pack="fas" icon="user" size="medium" />
+      <o-icon pack="fas" icon="home" size="medium" />
+      <o-icon pack="fas" icon="tachometer-alt" size="medium" />
+    </o-field>
+
+    <o-field>
+      <o-icon pack="fas" icon="user" size="large" variant="success" clickable />
+      <o-icon pack="fas" icon="home" size="large" variant="info" clickable />
+      <o-icon
+        pack="fas"
+        icon="tachometer-alt"
+        size="large"
+        variant="primary"
+        clickable />
+    </o-field>
+  </section>
+
+  <section>
+    <h3>Buttons</h3>
+
+    <div class="buttons">
+      <o-button variant="success">
+        <o-icon pack="fas" icon="check" />
+        <span>Finish</span>
+      </o-button>
+
+      <o-button variant="warning">
+        <o-icon pack="fas" icon="check" />
+        <span>Finish</span>
+      </o-button>
+
+      <o-button variant="warning">
+        <o-icon pack="fas" icon="sync-alt" spin />
+        <span>Refresh</span>
+      </o-button>
+    </div>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.icon:not(:last-child) {
+  margin-right: 0.5rem;
+}
+</style>

package/src/components/Input.vue

@@ -0,0 +1,121 @@
+<template>
+  <section>
+    <h2>Input Demo</h2>
+    <hr />
+  </section>
+
+  <section>
+    <h3>Base</h3>
+
+    <o-field label="Name">
+      <o-input expanded />
+    </o-field>
+
+    <o-field label="Email" variant="danger" message="This email is invalid">
+      <o-input type="email" value="john@" maxlength="30" />
+    </o-field>
+
+    <o-field
+      label="Username"
+      variant="success"
+      message="This username is available">
+      <o-input value="johnsilver" maxlength="30" />
+    </o-field>
+
+    <o-field label="Password">
+      <o-input type="password" value="iwantmytreasure" password-reveal>
+      </o-input>
+    </o-field>
+
+    <o-field label="Message">
+      <o-input maxlength="200" type="textarea" />
+    </o-field>
+
+    <o-field>
+      <o-input placeholder="No label" />
+    </o-field>
+
+    <o-field label="Rounded">
+      <o-input placeholder="No label" rounded />
+    </o-field>
+
+    <o-field label="Disabled">
+      <o-input placeholder="Disabled" disabled />
+    </o-field>
+  </section>
+
+  <section>
+    <h3>Variants</h3>
+
+    <o-field label="Primary" variant="primary">
+      <o-input placeholder="Primary" />
+    </o-field>
+    <o-field label="Secondary" variant="secondary">
+      <o-input placeholder="Secondary" />
+    </o-field>
+    <o-field label="Success" variant="success">
+      <o-input placeholder="Success" />
+    </o-field>
+    <o-field label="Info" variant="info">
+      <o-input placeholder="Info" />
+    </o-field>
+    <o-field label="Warning" variant="warning">
+      <o-input placeholder="Warning" />
+    </o-field>
+    <o-field
+      label="Error"
+      variant="danger"
+      message="You can have a message too">
+      <o-input placeholder="Error" />
+    </o-field>
+  </section>
+
+  <section>
+    <h3>Sizes</h3>
+
+    <o-field>
+      <o-input placeholder="small" size="small" icon="user" />
+    </o-field>
+    <o-field>
+      <o-input placeholder="default" icon="user" />
+    </o-field>
+    <o-field>
+      <o-input placeholder="medium" size="medium" icon="user" />
+    </o-field>
+    <o-field>
+      <o-input placeholder="Large" size="large" icon="user" />
+    </o-field>
+  </section>
+
+  <section>
+    <h3>With Icons</h3>
+
+    <o-field>
+      <o-input
+        placeholder="Search..."
+        type="search"
+        icon="search"
+        icon-clickable>
+      </o-input>
+    </o-field>
+
+    <o-field>
+      <o-input
+        placeholder="Search..."
+        type="search"
+        icon-right="search"
+        icon-right-clickable>
+      </o-input>
+    </o-field>
+
+    <o-field>
+      <o-input
+        placeholder="Email"
+        type="email"
+        icon="envelope"
+        icon-right="times-circle"
+        icon-right-clickable>
+      </o-input>
+    </o-field>
+  </section>
+</template>

package/src/components/Loading.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const isLoading = ref(false);
+const isFullPage = ref(true);
+const isCustomLoading = ref(false);
+const isCustomFullPage = ref(true);
+</script>
+
+<template>
+  <section>
+    <h2>Loading Demo</h2>
+    <hr />
+  </section>
+
+  <section>
+    <h3>Base</h3>
+
+    <o-field>
+      <o-button
+        size="medium"
+        variant="primary"
+        @click="() => (isLoading = true)">
+        Launch loading
+      </o-button>
+    </o-field>
+    <o-field>
+      <o-switch v-model="isFullPage" disabled>
+        Display loader over full page
+      </o-switch>
+    </o-field>
+    <p style="position: relative">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id
+      fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien
+      laoreet elit
+      <o-loading
+        v-model:active="isLoading"
+        :full-page="isFullPage"
+        :can-cancel="true" />
+    </p>
+  </section>
+
+  <section>
+    <h3>Base Custom Slot</h3>
+
+    <o-field>
+      <o-button
+        size="medium"
+        variant="primary"
+        @click="() => (isCustomLoading = true)">
+        Launch loading
+      </o-button>
+    </o-field>
+    <o-field>
+      <o-switch v-model="isCustomFullPage">
+        Display loader over full page
+      </o-switch>
+    </o-field>
+    <p style="position: relative">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id
+      fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien
+      laoreet elit
+      <o-loading
+        v-model:active="isCustomLoading"
+        :full-page="isCustomFullPage"
+        :can-cancel="true">
+        <o-icon pack="fas" icon="sync-alt" size="large" spin />
+      </o-loading>
+    </p>
+  </section>
+</template>

package/src/components/Modal.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const isImageModalActive = ref(false);
+const isCardModalActive = ref(false);
+const isFullScreenModalActive = ref(false);
+
+const tags = ref([]);
+const value = ref(20);
+</script>
+
+<template>
+  <section>
+    <h2>Modal Demo</h2>
+    <hr />
+  </section>
+
+  <section>
+    <h3>Base</h3>
+
+    <div class="buttons">
+      <o-button
+        size="medium"
+        variant="primary"
+        label="Open Image Modal"
+        @click="isImageModalActive = true" />
+
+      <o-button
+        size="medium"
+        variant="primary"
+        label="Open Card Modal"
+        @click="isCardModalActive = true" />
+
+      <o-button
+        size="medium"
+        variant="primary"
+        label="Open FullScreen Modal"
+        @click="isFullScreenModalActive = true" />
+    </div>
+
+    <!-- image modal -->
+    <o-modal v-model:active="isImageModalActive">
+      <p style="text-align: center">
+        <img
+          style="background-color: white"
+          src="https://avatars2.githubusercontent.com/u/66300512?s=200&v=4" />
+      </p>
+    </o-modal>
+
+    <!-- card modal -->
+    <o-modal v-model:active="isCardModalActive" :width="720" scroll="clip">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Log in to continue using the service</h5>
+          <o-icon
+            clickable
+            native-type="button"
+            icon="times"
+            @click="isCardModalActive = false" />
+        </div>
+        <div class="modal-body">
+          <o-field label="Email">
+            <o-input
+              icon="at"
+              :has-counter="true"
+              maxlength="10"
+              placeholder="Enter Your Email" />
+          </o-field>
+          <o-field label="Password">
+            <o-input
+              icon="lock"
+              :has-counter="true"
+              maxlength="10"
+              placeholder="Enter Your Password" />
+          </o-field>
+          <o-field label="Enter some items">
+            <o-inputitems
+              v-model="tags"
+              variant="primary"
+              field="user.first_name"
+              icon="tag"
+              placeholder="Add an item"
+              keep-first />
+          </o-field>
+          <o-field label="Dark & Medium">
+            <o-slider
+              v-model="value"
+              :rounded="true"
+              size="medium"
+              variant="dark"
+              tooltip-variant="dark" />
+          </o-field>
+          <o-field>
+            <o-checkbox variant="info"> Remember me </o-checkbox>
+          </o-field>
+        </div>
+        <div class="modal-footer">
+          <o-button
+            outlined
+            variant="danger"
+            label="Close"
+            @click="isCardModalActive = false" />
+          <o-button outlined variant="primary" label="Log in" />
+        </div>
+      </div>
+    </o-modal>
+
+    <!-- fullscreen modal -->
+    <o-modal
+      v-model:active="isFullScreenModalActive"
+      :width="720"
+      scroll="clip"
+      :can-cancel="['escape', 'button']"
+      full-screen>
+      <div class="modal-content h-100">
+        <div class="modal-header">
+          <h5 class="modal-title">Log in to continue using the service</h5>
+          <o-icon
+            clickable
+            native-type="button"
+            icon="times"
+            @click="isFullScreenModalActive = false" />
+        </div>
+        <div class="modal-body">
+          <o-field label="Email">
+            <o-input
+              icon="at"
+              :has-counter="true"
+              maxlength="10"
+              placeholder="Enter Your Email" />
+          </o-field>
+          <o-field label="Password">
+            <o-input
+              icon="lock"
+              :has-counter="true"
+              maxlength="10"
+              placeholder="Enter Your Password" />
+          </o-field>
+          <o-field label="Enter some items">
+            <o-inputitems
+              v-model="tags"
+              variant="primary"
+              field="user.first_name"
+              icon="tag"
+              placeholder="Add an item"
+              keep-first />
+          </o-field>
+          <o-field label="Dark & Medium">
+            <o-slider
+              v-model="value"
+              :rounded="true"
+              size="medium"
+              variant="dark"
+              tooltip-variant="dark" />
+          </o-field>
+          <o-field>
+            <o-checkbox variant="info"> Remember me </o-checkbox>
+          </o-field>
+        </div>
+        <div class="modal-footer">
+          <o-button
+            outlined
+            variant="danger"
+            label="Close"
+            @click="isFullScreenModalActive = false" />
+          <o-button outlined variant="primary" label="Log in" />
+        </div>
+      </div>
+    </o-modal>
+  </section>
+</template>