@oruga-ui/theme-oruga 0.2.1 → 0.3.0

package/src/components/Dropdown.vue

@@ -1,329 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-
-const isScrollable = ref(true);
-const maxHeight = ref(200);
-const currentMenu = ref({ icon: "users", text: "People" });
-const menus = ref([
-  { icon: "users", text: "People" },
-  { icon: "box", text: "Orders" },
-  { icon: "credit-card", text: "Payments" },
-  { icon: "dolly", text: "Logistics" },
-  { icon: "business-time", text: "Jobs" },
-  { icon: "shopping-cart", text: "Cart" },
-  { icon: "cog", text: "Configuration" },
-]);
-const selectedOptions = ref([]);
-const teleport = ref(false);
-</script>
-
-<template>
-  <section>
-    <h2>Dropdown Demo</h2>
-    <hr />
-  </section>
-
-  <section>
-    <h3>Base</h3>
-
-    <div class="dropdown-example">
-      <o-dropdown>
-        <template #trigger="{ active }">
-          <o-button
-            variant="primary"
-            :icon-right="active ? 'caret-up' : 'caret-down'"
-            label="Click me!" />
-        </template>
-
-        <o-dropdown-item label="Action" />
-        <o-dropdown-item label="Another action" />
-        <o-dropdown-item label="Something else" />
-      </o-dropdown>
-    </div>
-
-    <div class="dropdown-example">
-      <o-dropdown :triggers="['hover']">
-        <template #trigger="{ active }">
-          <o-button
-            variant="info"
-            label="Hover me!"
-            :icon-right="active ? 'caret-up' : 'caret-down'" />
-        </template>
-
-        <o-dropdown-item label="Action" />
-        <o-dropdown-item label="Another action" />
-        <o-dropdown-item label="Something else" />
-      </o-dropdown>
-    </div>
-
-    <div class="dropdown-example">
-      <o-dropdown disabled>
-        <template #trigger="{ active }">
-          <o-button
-            label="Disabled"
-            disabled
-            :icon-right="active ? 'caret-up' : 'caret-down'" />
-        </template>
-
-        <o-dropdown-item label="Action" />
-        <o-dropdown-item label="Another action" />
-        <o-dropdown-item label="Something else" />
-      </o-dropdown>
-    </div>
-
-    <div class="dropdown-example">
-      <o-dropdown>
-        <template #trigger="{ active }">
-          <span role="button">
-            Custom
-            <o-icon
-              variant="success"
-              :icon="active ? 'caret-up' : 'caret-down'" />
-          </span>
-        </template>
-
-        <o-dropdown-item label="Action" />
-        <o-dropdown-item label="Another action" />
-        <o-dropdown-item label="Something else" />
-      </o-dropdown>
-    </div>
-
-    <div class="dropdown-example">
-      <o-dropdown :triggers="['contextmenu']">
-        <template #trigger>
-          <o-button label="Right click" />
-        </template>
-
-        <o-dropdown-item label="Action" />
-        <o-dropdown-item label="Another action" />
-        <o-dropdown-item label="Something else" />
-      </o-dropdown>
-    </div>
-  </section>
-
-  <section>
-    <h3>Inline</h3>
-
-    <div class="dropdown-example">
-      <o-dropdown inline>
-        <template #trigger>
-          <o-button label="Inline" />
-        </template>
-
-        <o-dropdown-item value="1" label="Action " />
-        <o-dropdown-item value="2" label="Another action " />
-        <o-dropdown-item value="3" label="Something else " />
-      </o-dropdown>
-    </div>
-  </section>
-
-  <section>
-    <h3>Scrollable</h3>
-
-    <div>
-      <o-field>
-        <o-switch v-model="isScrollable" label="Scrollable" />
-      </o-field>
-    </div>
-
-    <o-dropdown
-      v-model="currentMenu"
-      :scrollable="isScrollable"
-      :max-height="maxHeight">
-      <template #trigger>
-        <o-button
-          variant="primary"
-          type="button"
-          :label="currentMenu.text"
-          :icon-left="currentMenu.icon"
-          icon-right="caret-down" />
-      </template>
-
-      <o-dropdown-item
-        v-for="(menu, index) in menus"
-        :key="index"
-        :value="menu">
-        <div class="media">
-          <o-icon class="media-left" :icon="menu.icon" />
-          <div class="media-content">{{ menu.text }}</div>
-        </div>
-      </o-dropdown-item>
-    </o-dropdown>
-  </section>
-
-  <section>
-    <h3>Multiple</h3>
-
-    <p><b>selected</b>: {{ selectedOptions }}</p>
-    <o-dropdown v-model="selectedOptions" multiple>
-      <template #trigger>
-        <o-button variant="primary" type="button">
-          Selected ({{ selectedOptions.length }})
-        </o-button>
-      </template>
-
-      <o-dropdown-item value="option1" label="option 1" />
-      <o-dropdown-item value="option2" label="Option 2" />
-      <o-dropdown-item value="option3" label="Option 3" />
-    </o-dropdown>
-  </section>
-
-  <section>
-    <h3>Positioning & Expanded</h3>
-
-    <o-field>
-      <o-switch v-model="teleport" label="teleport" />
-    </o-field>
-
-    <div class="dropdown-example expanded">
-      <o-dropdown position="auto" expanded :teleport="teleport">
-        <template #trigger>
-          <o-button variant="primary" label="Position Auto" expanded />
-        </template>
-
-        <o-dropdown-item label="Action" />
-        <o-dropdown-item label="Another action" />
-        <o-dropdown-item label="Something else" />
-      </o-dropdown>
-    </div>
-
-    <hr />
-
-    <div class="dropdown-example">
-      <o-dropdown :teleport="teleport" position="right">
-        <template #trigger>
-          <o-button label="Append to right" />
-        </template>
-
-        <o-dropdown-item label="Action" />
-        <o-dropdown-item label="Another action" />
-        <o-dropdown-item label="Something else" />
-      </o-dropdown>
-    </div>
-
-    <div class="dropdown-example">
-      <o-dropdown :teleport="teleport" position="left">
-        <template #trigger>
-          <o-button label="Append to left" />
-        </template>
-
-        <o-dropdown-item label="Action" />
-        <o-dropdown-item label="Another action" />
-        <o-dropdown-item label="Something else" />
-      </o-dropdown>
-    </div>
-
-    <div class="dropdown-example">
-      <o-dropdown :teleport="teleport" position="top">
-        <template #trigger>
-          <o-button label="Append to top" />
-        </template>
-
-        <o-dropdown-item label="Action" />
-        <o-dropdown-item label="Another action" />
-        <o-dropdown-item label="Something else" />
-      </o-dropdown>
-    </div>
-
-    <div class="dropdown-example">
-      <o-dropdown :teleport="teleport" position="bottom">
-        <template #trigger>
-          <o-button label="Append to bottom" />
-        </template>
-
-        <o-dropdown-item label="Action" />
-        <o-dropdown-item label="Another action" />
-        <o-dropdown-item label="Something else" />
-      </o-dropdown>
-    </div>
-
-    <hr />
-
-    <div class="dropdown-example">
-      <o-dropdown :teleport="teleport" position="top-right">
-        <template #trigger>
-          <o-button label="Append to top-right" />
-        </template>
-
-        <o-dropdown-item label="Action" />
-        <o-dropdown-item label="Another action" />
-        <o-dropdown-item label="Something else" />
-      </o-dropdown>
-    </div>
-
-    <div class="dropdown-example">
-      <o-dropdown :teleport="teleport" position="top-left">
-        <template #trigger>
-          <o-button label="Append to top-left" />
-        </template>
-
-        <o-dropdown-item label="Action" />
-        <o-dropdown-item label="Another action" />
-        <o-dropdown-item label="Something else" />
-      </o-dropdown>
-    </div>
-
-    <div class="dropdown-example">
-      <o-dropdown :teleport="teleport" position="bottom-right">
-        <template #trigger>
-          <o-button label="Append to bottom-right" />
-        </template>
-
-        <o-dropdown-item label="Action" />
-        <o-dropdown-item label="Another action" />
-        <o-dropdown-item label="Something else" />
-      </o-dropdown>
-    </div>
-
-    <div class="dropdown-example">
-      <o-dropdown :teleport="teleport" position="bottom-left">
-        <template #trigger>
-          <o-button label="Append to bottom-left" />
-        </template>
-
-        <o-dropdown-item label="Action" />
-        <o-dropdown-item label="Another action" />
-        <o-dropdown-item label="Something else" />
-      </o-dropdown>
-    </div>
-  </section>
-</template>
-
-<style scoped lang="scss">
-.dropdown-example {
-  display: inline-flex;
-  position: relative;
-  vertical-align: top;
-
-  &.expanded {
-    display: block;
-  }
-
-  &:not(:last-child) {
-    margin-right: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-}
-
-.media {
-  align-items: flex-start;
-  display: flex;
-  text-align: left;
-
-  .media-content {
-    flex-basis: auto;
-    flex-grow: 1;
-    flex-shrink: 1;
-    text-align: left;
-    overflow-y: hidden;
-    overflow-x: auto;
-  }
-
-  .media-left {
-    margin-right: 1rem;
-    flex-basis: auto;
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-}
-</style>

package/src/components/Field.vue

@@ -1,235 +0,0 @@
-<template>
-  <section>
-    <h2>Field Demo</h2>
-    <hr />
-  </section>
-
-  <section>
-    <h3>Base</h3>
-
-    <o-field label="Name">
-      <o-input value="Kevin Garvey" expanded />
-    </o-field>
-
-    <o-field
-      label="Email"
-      variant="danger"
-      message-variant="info"
-      message="This email is invalid">
-      <o-input type="email" value="john@" maxlength="30" expanded />
-    </o-field>
-
-    <o-field
-      label="Username"
-      variant="success"
-      message="This username is available">
-      <o-input value="johnsilver" maxlength="30" has-counter expanded />
-    </o-field>
-
-    <o-field label="Password" variant="warning">
-      <o-input value="123" type="password" maxlength="30" expanded />
-    </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" label="Search" />
-    </o-field>
-
-    <o-field>
-      <o-input placeholder="This is expanded" expanded />
-      <o-button label="@gmail.com" />
-    </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" label="Transfer" />
-    </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" label="Button" />
-      <o-dropdown>
-        <template #trigger>
-          <o-button variant="primary" icon-right="caret-down" />
-        </template>
-
-        <o-dropdown-item label="Action" />
-        <o-dropdown-item label="Another action" />
-        <o-dropdown-item label="Something else" />
-      </o-dropdown>
-    </o-field>
-
-    <o-field>
-      <o-button variant="primary" label="Button" />
-      <o-dropdown>
-        <template #trigger>
-          <o-button variant="primary" icon-right="caret-down" />
-        </template>
-
-        <o-dropdown-item label="Action" />
-        <o-dropdown-item label="Another action" />
-        <o-dropdown-item label="Something else" />
-      </o-dropdown>
-      <o-button variant="primary" label="Button" />
-    </o-field>
-
-    <o-field>
-      <o-input icon="search" type="search" placeholder="Search..." />
-      <o-dropdown>
-        <template #trigger>
-          <o-button label="Filters" icon="caret-down" />
-        </template>
-        <o-dropdown-item
-          value="open_issues"
-          label="Open Issues and Pull Requests" />
-        <o-dropdown-item value="your_issues" label="Your Issues" />
-        <o-dropdown-item value="pull_requests" label="Your Pull Requests" />
-        <o-dropdown-item value="everything" label="Everything" />
-      </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" label="Search" />
-    </o-field>
-
-    <o-field grouped message="What do you want to search?">
-      <o-input placeholder="Search..." expanded />
-      <o-button variant="primary" label="Search" />
-    </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" expanded>
-        <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" expanded />
-    </o-field>
-
-    <o-field horizontal>
-      <!-- Label left empty for spacing -->
-      <o-button
-        variant="primary"
-        icon-left="envelope"
-        outlined
-        label="Send message" />
-    </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

@@ -1,66 +0,0 @@
-<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>
-.o-icon:not(:last-child) {
-  margin-right: 0.5rem;
-}
-</style>