@oruga-ui/theme-oruga 0.0.1 → 0.2.0

package/src/components/Dropdown.vue

@@ -14,6 +14,7 @@ const menus = ref([
   { icon: "cog", text: "Configuration" },
 ]);
 const selectedOptions = ref([]);
+const teleport = ref(false);
 </script>
 
 <template>
@@ -26,46 +27,52 @@ const selectedOptions = ref([]);
     <h3>Base</h3>
 
     <div class="dropdown-example">
-      <o-dropdown aria-role="list">
-        <template #trigger>
+      <o-dropdown>
+        <template #trigger="{ active }">
           <o-button
             variant="primary"
-            class="dropdown-toggle"
+            :icon-right="active ? 'caret-up' : 'caret-down'"
             label="Click me!" />
         </template>
 
-        <o-dropdown-item aria-role="listitem">Action</o-dropdown-item>
-        <o-dropdown-item aria-role="listitem">Another action</o-dropdown-item>
-        <o-dropdown-item aria-role="listitem">Something else</o-dropdown-item>
+        <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']" aria-role="list">
-        <template #trigger>
-          <o-button variant="info" class="dropdown-toggle" label="Hover me!" />
+      <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 aria-role="listitem">Action</o-dropdown-item>
-        <o-dropdown-item aria-role="listitem">Another action</o-dropdown-item>
-        <o-dropdown-item aria-role="listitem">Something else</o-dropdown-item>
+        <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 aria-role="list">
-        <template #trigger>
-          <o-button class="dropdown-toggle" label="Disabled" disabled />
+      <o-dropdown disabled>
+        <template #trigger="{ active }">
+          <o-button
+            label="Disabled"
+            disabled
+            :icon-right="active ? 'caret-up' : 'caret-down'" />
         </template>
 
-        <o-dropdown-item aria-role="listitem">Action</o-dropdown-item>
-        <o-dropdown-item aria-role="listitem">Another action</o-dropdown-item>
-        <o-dropdown-item aria-role="listitem">Something else</o-dropdown-item>
+        <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 aria-role="list">
+      <o-dropdown>
         <template #trigger="{ active }">
           <span role="button">
             Custom
@@ -75,21 +82,21 @@ const selectedOptions = ref([]);
           </span>
         </template>
 
-        <o-dropdown-item aria-role="listitem">Action</o-dropdown-item>
-        <o-dropdown-item aria-role="listitem">Another action</o-dropdown-item>
-        <o-dropdown-item aria-role="listitem">Something else</o-dropdown-item>
+        <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']" aria-role="list">
+      <o-dropdown :triggers="['contextmenu']">
         <template #trigger>
           <o-button label="Right click" />
         </template>
 
-        <o-dropdown-item aria-role="listitem">Action</o-dropdown-item>
-        <o-dropdown-item aria-role="listitem">Another action</o-dropdown-item>
-        <o-dropdown-item aria-role="listitem">Something else</o-dropdown-item>
+        <o-dropdown-item label="Action" />
+        <o-dropdown-item label="Another action" />
+        <o-dropdown-item label="Something else" />
       </o-dropdown>
     </div>
   </section>
@@ -98,20 +105,14 @@ const selectedOptions = ref([]);
     <h3>Inline</h3>
 
     <div class="dropdown-example">
-      <o-dropdown inline aria-role="list">
+      <o-dropdown inline>
         <template #trigger>
           <o-button label="Inline" />
         </template>
 
-        <o-dropdown-item aria-role="listitem" value="1">
-          Action
-        </o-dropdown-item>
-        <o-dropdown-item aria-role="listitem" value="2">
-          Another action
-        </o-dropdown-item>
-        <o-dropdown-item aria-role="listitem" value="3">
-          Something else
-        </o-dropdown-item>
+        <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>
@@ -121,32 +122,30 @@ const selectedOptions = ref([]);
 
     <div>
       <o-field>
-        <o-switch v-model="isScrollable">Scrollable</o-switch>
+        <o-switch v-model="isScrollable" label="Scrollable" />
       </o-field>
     </div>
 
     <o-dropdown
       v-model="currentMenu"
       :scrollable="isScrollable"
-      :max-height="maxHeight"
-      aria-role="list">
+      :max-height="maxHeight">
       <template #trigger>
-        <o-button variant="primary" type="button" class="dropdown-toggle">
-          <o-icon :icon="currentMenu.icon" />
-          <span>{{ currentMenu.text }}</span>
-        </o-button>
+        <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"
-        aria-role="listitem">
+        :value="menu">
         <div class="media">
           <o-icon class="media-left" :icon="menu.icon" />
-          <div class="media-content">
-            <span>{{ menu.text }}</span>
-          </div>
+          <div class="media-content">{{ menu.text }}</div>
         </div>
       </o-dropdown-item>
     </o-dropdown>
@@ -156,91 +155,135 @@ const selectedOptions = ref([]);
     <h3>Multiple</h3>
 
     <p><b>selected</b>: {{ selectedOptions }}</p>
-    <o-dropdown v-model="selectedOptions" multiple aria-role="list">
+    <o-dropdown v-model="selectedOptions" multiple>
       <template #trigger>
-        <o-button variant="primary" type="button" class="dropdown-toggle">
-          <span>Selected ({{ selectedOptions.length }})</span>
+        <o-button variant="primary" type="button">
+          Selected ({{ selectedOptions.length }})
         </o-button>
       </template>
 
-      <o-dropdown-item value="option1" aria-role="listitem">
-        option 1
-      </o-dropdown-item>
-
-      <o-dropdown-item value="option2" aria-role="listitem">
-        Option 2
-      </o-dropdown-item>
-
-      <o-dropdown-item value="option3" aria-role="listitem">
-        Option 3
-      </o-dropdown-item>
+      <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="top-right" aria-role="list" expanded>
+      <o-dropdown position="auto" expanded :teleport="teleport">
         <template #trigger>
-          <o-button
-            class="dropdown-toggle"
-            variant="primary"
-            label="Position top right"
-            expanded />
+          <o-button variant="primary" label="Position Auto" expanded />
         </template>
 
-        <o-dropdown-item aria-role="listitem">Action</o-dropdown-item>
-        <o-dropdown-item aria-role="listitem">Another action</o-dropdown-item>
-        <o-dropdown-item aria-role="listitem">Something else</o-dropdown-item>
+        <o-dropdown-item label="Action" />
+        <o-dropdown-item label="Another action" />
+        <o-dropdown-item label="Something else" />
       </o-dropdown>
     </div>
 
-    <div class="dropdown-example expanded">
-      <o-dropdown position="top-left" aria-role="list" expanded>
+    <hr />
+
+    <div class="dropdown-example">
+      <o-dropdown :teleport="teleport" position="right">
         <template #trigger>
-          <o-button
-            class="dropdown-toggle"
-            variant="primary"
-            label="Position top left"
-            expanded />
+          <o-button label="Append to right" />
         </template>
 
-        <o-dropdown-item aria-role="listitem">Action</o-dropdown-item>
-        <o-dropdown-item aria-role="listitem">Another action</o-dropdown-item>
-        <o-dropdown-item aria-role="listitem">Something else</o-dropdown-item>
+        <o-dropdown-item label="Action" />
+        <o-dropdown-item label="Another action" />
+        <o-dropdown-item label="Something else" />
       </o-dropdown>
     </div>
 
-    <div class="dropdown-example expanded">
-      <o-dropdown position="bottom-left" aria-role="list" expanded>
+    <div class="dropdown-example">
+      <o-dropdown :teleport="teleport" position="left">
         <template #trigger>
-          <o-button
-            class="dropdown-toggle"
-            variant="primary"
-            label="Position bottom left"
-            expanded />
+          <o-button label="Append to left" />
         </template>
 
-        <o-dropdown-item aria-role="listitem">Action</o-dropdown-item>
-        <o-dropdown-item aria-role="listitem">Another action</o-dropdown-item>
-        <o-dropdown-item aria-role="listitem">Something else</o-dropdown-item>
+        <o-dropdown-item label="Action" />
+        <o-dropdown-item label="Another action" />
+        <o-dropdown-item label="Something else" />
       </o-dropdown>
     </div>
 
-    <div class="dropdown-example expanded">
-      <o-dropdown position="bottom-right" aria-role="list" expanded>
+    <div class="dropdown-example">
+      <o-dropdown :teleport="teleport" position="top">
         <template #trigger>
-          <o-button
-            class="dropdown-toggle"
-            variant="primary"
-            label="Position bottom right"
-            expanded />
+          <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 aria-role="listitem">Action</o-dropdown-item>
-        <o-dropdown-item aria-role="listitem">Another action</o-dropdown-item>
-        <o-dropdown-item aria-role="listitem">Something else</o-dropdown-item>
+        <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>
@@ -266,6 +309,7 @@ const selectedOptions = ref([]);
   align-items: flex-start;
   display: flex;
   text-align: left;
+
   .media-content {
     flex-basis: auto;
     flex-grow: 1;
@@ -274,6 +318,7 @@ const selectedOptions = ref([]);
     overflow-y: hidden;
     overflow-x: auto;
   }
+
   .media-left {
     margin-right: 1rem;
     flex-basis: auto;

package/src/components/Field.vue

@@ -8,7 +8,7 @@
     <h3>Base</h3>
 
     <o-field label="Name">
-      <o-input value="Kevin Garvey" />
+      <o-input value="Kevin Garvey" expanded />
     </o-field>
 
     <o-field
@@ -16,18 +16,18 @@
       variant="danger"
       message-variant="info"
       message="This email is invalid">
-      <o-input type="email" value="john@" maxlength="30" />
+      <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 />
+      <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" />
+      <o-input value="123" type="password" maxlength="30" expanded />
     </o-field>
 
     <o-field label="Subject" grouped>
@@ -53,12 +53,12 @@
 
     <o-field variant="danger">
       <o-input placeholder="Search..." type="search" icon="search" />
-      <o-button variant="primary">Search</o-button>
+      <o-button variant="primary" label="Search" />
     </o-field>
 
     <o-field>
       <o-input placeholder="This is expanded" expanded />
-      <o-button>@gmail.com</o-button>
+      <o-button label="@gmail.com" />
     </o-field>
 
     <o-field>
@@ -67,9 +67,8 @@
         <option>£</option>
         <option>€</option>
       </o-select>
-      <o-input type="number" placeholder="0,00" /><o-button variant="success">
-        Transfer
-      </o-button>
+      <o-input type="number" placeholder="0,00" />
+      <o-button variant="success" label="Transfer" />
     </o-field>
 
     <o-field>
@@ -101,53 +100,44 @@
     </o-field>
 
     <o-field>
-      <o-button variant="primary"> Button </o-button>
+      <o-button variant="primary" label="Button" />
       <o-dropdown>
         <template #trigger>
-          <o-button variant="primary">
-            <o-icon icon="caret-down" />
-          </o-button>
+          <o-button variant="primary" icon-right="caret-down" />
         </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-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"> Button </o-button>
+      <o-button variant="primary" label="Button" />
       <o-dropdown>
         <template #trigger>
-          <o-button variant="primary">
-            <o-icon icon="caret-down" />
-          </o-button>
+          <o-button variant="primary" icon-right="caret-down" />
         </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-item label="Action" />
+        <o-dropdown-item label="Another action" />
+        <o-dropdown-item label="Something else" />
       </o-dropdown>
-      <o-button variant="primary"> Button </o-button>
+      <o-button variant="primary" label="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>
+          <o-button label="Filters" icon="caret-down" />
         </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-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>
@@ -157,12 +147,12 @@
 
     <o-field grouped variant="danger" message="What do you want to search?">
       <o-input placeholder="Search..." />
-      <o-button variant="primary">Search</o-button>
+      <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">Search</o-button>
+      <o-button variant="primary" label="Search" />
     </o-field>
 
     <o-field grouped group-multiline>
@@ -200,7 +190,7 @@
     </o-field>
 
     <o-field horizontal label="Topic">
-      <o-select placeholder="Select a topic" icon="book">
+      <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>
@@ -208,14 +198,16 @@
     </o-field>
 
     <o-field horizontal label="Message">
-      <o-input type="textarea" />
+      <o-input type="textarea" expanded />
     </o-field>
 
     <o-field horizontal>
       <!-- Label left empty for spacing -->
-      <o-button variant="primary" icon-left="envelope" outlined>
-        Send message
-      </o-button>
+      <o-button
+        variant="primary"
+        icon-left="envelope"
+        outlined
+        label="Send message" />
     </o-field>
   </section>
 

package/src/components/Icon.vue

@@ -60,7 +60,7 @@
 </template>
 
 <style lang="scss" scoped>
-.icon:not(:last-child) {
+.o-icon:not(:last-child) {
   margin-right: 0.5rem;
 }
 </style>

package/src/components/Input.vue

@@ -12,7 +12,7 @@
     </o-field>
 
     <o-field label="Email" variant="danger" message="This email is invalid">
-      <o-input type="email" value="john@" maxlength="30" />
+      <o-input type="email" value="john@" maxlength="30" expanded />
     </o-field>
 
     <o-field
@@ -50,18 +50,23 @@
     <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"
@@ -76,12 +81,15 @@
     <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>