@oruga-ui/theme-oruga 0.0.1 → 0.2.0

package/src/components/Switch.vue

@@ -20,7 +20,7 @@ const passive = ref(null);
     <h3>Base</h3>
 
     <o-field>
-      <o-switch>Default </o-switch>
+      <o-switch label="Default" />
     </o-field>
     <o-field>
       <o-switch v-model="isSwitched">
@@ -33,7 +33,7 @@ const passive = ref(null);
       </o-switch>
     </o-field>
     <o-field>
-      <o-switch disabled>Disabled</o-switch>
+      <o-switch disabled label="Disabled" />
     </o-field>
   </section>
 
@@ -41,25 +41,25 @@ const passive = ref(null);
     <h3>Variant</h3>
 
     <o-field>
-      <o-switch :value="true"> Default </o-switch>
+      <o-switch :model-value="true" label="Default" />
     </o-field>
     <o-field>
-      <o-switch :value="true" variant="primary"> Primary </o-switch>
+      <o-switch :model-value="true" variant="primary" label="Primary" />
     </o-field>
     <o-field>
-      <o-switch :value="true" variant="secondary"> Secondary </o-switch>
+      <o-switch :model-value="true" variant="secondary" label="Secondary" />
     </o-field>
     <o-field>
-      <o-switch :value="true" variant="info"> Info </o-switch>
+      <o-switch :model-value="true" variant="info" label="Info" />
     </o-field>
     <o-field>
-      <o-switch :value="true" variant="success"> Success </o-switch>
+      <o-switch :model-value="true" variant="success" label="Success" />
     </o-field>
     <o-field>
-      <o-switch :value="true" variant="danger"> Danger </o-switch>
+      <o-switch :model-value="true" variant="danger" label="Danger" />
     </o-field>
     <o-field>
-      <o-switch :value="true" variant="warning"> Warning </o-switch>
+      <o-switch :model-value="true" variant="warning" label="Warning" />
     </o-field>
   </section>
 
@@ -67,16 +67,16 @@ const passive = ref(null);
     <h3>Size</h3>
 
     <o-field>
-      <o-switch size="small">Small</o-switch>
+      <o-switch size="small" label="Small" />
     </o-field>
     <o-field>
-      <o-switch>Default</o-switch>
+      <o-switch label="Default" />
     </o-field>
     <o-field>
-      <o-switch size="medium">Medium</o-switch>
+      <o-switch size="medium" label="Medium" />
     </o-field>
     <o-field>
-      <o-switch size="large">Large</o-switch>
+      <o-switch size="large" label="Large" />
     </o-field>
   </section>
 
@@ -84,10 +84,14 @@ const passive = ref(null);
     <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">
+      <o-switch v-model="isRounded" label="Rounded" />
+      <o-switch
+        v-model="position"
+        true-value="left"
+        false-value="right"
+        label="
         Label on left
-      </o-switch>
+      " />
     </o-field>
     <o-field grouped>
       <o-field label="Variant">
@@ -127,8 +131,7 @@ const passive = ref(null);
       :position="position"
       :size="size"
       :variant="variant"
-      :passive-variant="passive">
-      Sample
-    </o-switch>
+      :passive-variant="passive"
+      label="Sample" />
   </section>
 </template>

package/src/components/Table.vue

@@ -141,15 +141,16 @@ const selected = ref(null);
     <h3>Sandbox</h3>
 
     <o-field grouped group-multiline>
-      <o-switch v-model="isBordered" :rounded="true">Bordered</o-switch>
-      <o-switch v-model="isStriped" :rounded="true">Striped</o-switch>
-      <o-switch v-model="isNarrowed" :rounded="true">Narrowed</o-switch>
-      <o-switch v-model="isHoverable" :rounded="true">Hoverable</o-switch>
-      <o-switch v-model="isFocusable" :rounded="true">Focusable</o-switch>
-      <o-switch v-model="isLoading" :rounded="true">Loading state</o-switch>
-      <o-switch v-model="isEmpty" :rounded="true">Empty</o-switch>
+      <o-switch v-model="isBordered" :rounded="true" label="Bordered" />
+      <o-switch v-model="isStriped" :rounded="true" label="Striped" />
+      <o-switch v-model="isNarrowed" :rounded="true" label="Narrowed" />
+      <o-switch v-model="isHoverable" :rounded="true" label="Hoverable" />
+      <o-switch v-model="isFocusable" :rounded="true" label="Focusable" />
+      <o-switch v-model="isLoading" :rounded="true" label="Loading state" />
+      <o-switch v-model="isEmpty" :rounded="true" label="Empty" />
       <o-switch v-model="hasMobileCards" :rounded="true">
-        Mobile cards <small>(collapsed rows)</small>
+        Mobile cards
+        <small>(collapsed rows)</small>
       </o-switch>
     </o-field>
 
@@ -171,17 +172,13 @@ const selected = ref(null);
         :key="idx"
         v-slot="{ row }"
         v-bind="column">
-        <span>
-          <component
-            :is="column.component(row[column.field]).is"
-            v-if="column.component"
-            v-bind="column.component(row[column.field])" />
-          {{
-            column.display
-              ? column.display(row[column.field])
-              : row[column.field]
-          }}
-        </span>
+        <component
+          :is="column.component(row[column.field]).is"
+          v-if="column.component"
+          v-bind="column.component(row[column.field])" />
+        {{
+          column.display ? column.display(row[column.field]) : row[column.field]
+        }}
       </o-table-column>
 
       <template #detail="props">
@@ -203,10 +200,11 @@ const selected = ref(null);
     <h3>Paginated</h3>
 
     <o-field grouped group-multiline>
-      <o-switch v-model="isPaginated" :rounded="true"> Paginated </o-switch>
-      <o-switch v-model="isPaginationSimple" :rounded="true">
-        Simple Paginated
-      </o-switch>
+      <o-switch v-model="isPaginated" :rounded="true" label="Paginated " />
+      <o-switch
+        v-model="isPaginationSimple"
+        :rounded="true"
+        label="Simple Paginated" />
       <o-select v-model="perPage" :disabled="!isPaginated">
         <option value="3">3 per page</option>
         <option value="5">5 per page</option>
@@ -234,17 +232,13 @@ const selected = ref(null);
         :key="idx"
         v-slot="{ row }"
         v-bind="column">
-        <span>
-          <component
-            :is="column.component(row[column.field]).is"
-            v-if="column.component"
-            v-bind="column.component(row[column.field])" />
-          {{
-            column.display
-              ? column.display(row[column.field])
-              : row[column.field]
-          }}
-        </span>
+        <component
+          :is="column.component(row[column.field]).is"
+          v-if="column.component"
+          v-bind="column.component(row[column.field])" />
+        {{
+          column.display ? column.display(row[column.field]) : row[column.field]
+        }}
       </o-table-column>
     </o-table>
   </section>
@@ -256,9 +250,8 @@ const selected = ref(null);
       variant="danger"
       :disabled="!selected"
       icon-left="times"
-      @click="selected = null">
-      <span>Clear selected</span>
-    </o-button>
+      label="Clear selected"
+      @click="selected = null" />
 
     <p><b>Selected:</b> {{ selected }}</p>
 

package/src/components/Tabs.vue

@@ -165,12 +165,13 @@ const type = ref("default");
 
   <section>
     <h3>Vertical</h3>
+
     <o-field grouped group-multiline>
       <o-field>
-        <o-switch v-model="atRight"> Right position </o-switch>
+        <o-switch v-model="atRight" label="Right position" />
       </o-field>
       <o-field>
-        <o-switch v-model="expanded"> Expanded </o-switch>
+        <o-switch v-model="expanded" label="Expanded" />
       </o-field>
       <o-field label="Size">
         <o-select v-model="size">

package/src/components/Taginput.vue

@@ -397,11 +397,11 @@ function getFilteredTags(text: string) {
   <section>
     <h3>Base</h3>
 
-    <o-switch v-model="allowNew"> Allow new items </o-switch>
-    <o-switch v-model="openOnFocus"> Open on focus </o-switch>
+    <o-switch v-model="allowNew" label="Allow new items" />
+    <o-switch v-model="openOnFocus" label="Open on focus" />
 
     <o-field label="Enter some items">
-      <o-inputitems
+      <o-taginput
         v-model="tags"
         variant="primary"
         :data="filteredTags"
@@ -419,7 +419,7 @@ function getFilteredTags(text: string) {
     <p><b>Items:</b> {{ tags }}</p>
 
     <o-field label="Disabled">
-      <o-inputitems
+      <o-taginput
         variant="primary"
         disabled
         :model-value="['One']"
@@ -438,18 +438,18 @@ function getFilteredTags(text: string) {
     <h3>Limits</h3>
 
     <o-field label="Limited to 10 characters">
-      <o-inputitems maxlength="10" :value="['Oruga', 'Vue', 'CSS']" />
+      <o-taginput maxlength="10" :model-value="['Oruga', 'Vue', 'CSS']" />
     </o-field>
 
     <o-field label="Limited to 5 tags">
-      <o-inputitems maxitems="5" :value="['One', 'Two', 'Three', 'Four']" />
+      <o-taginput maxitems="5" :model-value="['One', 'Two', 'Three', 'Four']" />
     </o-field>
 
     <o-field label="Limited to 10 characters and 5 tags">
-      <o-inputitems
+      <o-taginput
         maxlength="10"
         maxitems="5"
-        :value="['Red', 'Green', 'Blue', 'White']" />
+        :model-value="['Red', 'Green', 'Blue', 'White']" />
     </o-field>
   </section>
 
@@ -457,7 +457,7 @@ function getFilteredTags(text: string) {
     <h3>Variant</h3>
 
     <o-field label="Primary">
-      <o-inputitems
+      <o-taginput
         :model-value="['One']"
         :data="['One', 'Two', 'Three', 'Four']"
         :allow-new="false"
@@ -465,7 +465,7 @@ function getFilteredTags(text: string) {
     </o-field>
 
     <o-field label="Secondary">
-      <o-inputitems
+      <o-taginput
         :model-value="['One']"
         :data="['One', 'Two', 'Three', 'Four']"
         :allow-new="false"
@@ -473,7 +473,7 @@ function getFilteredTags(text: string) {
     </o-field>
 
     <o-field label="Success">
-      <o-inputitems
+      <o-taginput
         :model-value="['One']"
         :data="['One', 'Two', 'Three', 'Four']"
         :allow-new="false"
@@ -481,7 +481,7 @@ function getFilteredTags(text: string) {
     </o-field>
 
     <o-field label="Info">
-      <o-inputitems
+      <o-taginput
         :model-value="['One']"
         :data="['One', 'Two', 'Three', 'Four']"
         :allow-new="false"
@@ -489,7 +489,7 @@ function getFilteredTags(text: string) {
     </o-field>
 
     <o-field label="Warning">
-      <o-inputitems
+      <o-taginput
         :model-value="['One']"
         :data="['One', 'Two', 'Three', 'Four']"
         :allow-new="false"
@@ -497,7 +497,7 @@ function getFilteredTags(text: string) {
     </o-field>
 
     <o-field label="Danger">
-      <o-inputitems
+      <o-taginput
         :model-value="['One']"
         :data="['One', 'Two', 'Three', 'Four']"
         :allow-new="false"

package/src/components/Timepicker.vue

@@ -31,7 +31,7 @@ const hoursGranularity = ref(2);
 
     <o-field grouped>
       <o-field>
-        <o-switch v-model="enableSeconds">Enable seconds</o-switch>
+        <o-switch v-model="enableSeconds" label="Enable seconds" />
       </o-field>
       <o-field label="Locale">
         <o-select v-model="locale">
@@ -67,15 +67,14 @@ const hoursGranularity = ref(2);
         icon="clock"
         :enable-seconds="enableSeconds"
         :hour-format="hourFormat"
-        :locale="locale">
-      </o-timepicker>
+        :locale="locale" />
     </o-field>
   </section>
 
   <section>
     <h3>Inline</h3>
 
-    <o-timepicker v-model="time" inline></o-timepicker>
+    <o-timepicker v-model="time" inline />
   </section>
 
   <section>
@@ -117,8 +116,7 @@ const hoursGranularity = ref(2);
         placeholder="Click to select"
         icon="clock"
         :increment-minutes="minutesGranularity"
-        :increment-hours="hoursGranularity">
-      </o-timepicker>
+        :increment-hours="hoursGranularity" />
     </o-field>
   </section>
 </template>

package/src/components/Tooltip.vue

@@ -2,6 +2,7 @@
 import { ref } from "vue";
 
 const active = ref(true);
+const teleport = ref(false);
 </script>
 
 <template>
@@ -13,56 +14,92 @@ const active = ref(true);
   <section>
     <h3>Base</h3>
 
-    <o-tooltip label="Tooltip right" position="right">
+    <o-tooltip label="Tooltip">
+      <o-button label="Hover me! " />
+    </o-tooltip>
+
+    <o-tooltip label="delayed by 1000ms" :delay="1000">
+      <o-button variant="warning" label="Delayed" />
+    </o-tooltip>
+
+    <o-tooltip label="I'm on body" teleport>
+      <o-button variant="info" label="Append on body" />
+    </o-tooltip>
+  </section>
+
+  <section>
+    <h3>Position</h3>
+
+    <o-field>
+      <o-switch v-model="teleport" label="teleport" />
+    </o-field>
+
+    <o-tooltip label="Tooltip right" :teleport="teleport" position="right">
       <o-button label="Right" />
     </o-tooltip>
 
-    <o-tooltip label="Tooltip top" variant="dark">
-      <o-button label="Top (default)" />
+    <o-tooltip label="Tooltip top" :teleport="teleport" position="top">
+      <o-button label="Top" />
     </o-tooltip>
 
-    <o-tooltip label="Tooltip bottom" variant="dark" position="bottom">
+    <o-tooltip label="Tooltip bottom" :teleport="teleport" position="bottom">
       <o-button label="Bottom" />
     </o-tooltip>
 
-    <o-tooltip label="Tooltip left" variant="dark" position="left">
+    <o-tooltip label="Tooltip left" :teleport="teleport" position="left">
       <o-button label="Left" />
     </o-tooltip>
 
-    <o-tooltip label="delayed by 1000ms" variant="dark" :delay="1000">
-      <o-button variant="warning" label="Delayed" />
+    <hr />
+
+    <o-tooltip label="Tooltip right" :teleport="teleport" position="top-right">
+      <o-button label="Top Right" />
+    </o-tooltip>
+
+    <o-tooltip label="Tooltip top" :teleport="teleport" position="top-left">
+      <o-button label="Top Left" />
     </o-tooltip>
-  </section>
 
+    <o-tooltip
+      label="Tooltip bottom"
+      :teleport="teleport"
+      position="bottom-right">
+      <o-button label="Bottom Right" />
+    </o-tooltip>
+
+    <o-tooltip label="Tooltip left" :teleport="teleport" position="bottom-left">
+      <o-button label="Bottom Left" />
+    </o-tooltip>
+  </section>
   <section>
-    <h3>Colors</h3>
+    <h3>Variants</h3>
 
     <o-tooltip label="Default">
       <o-button label="Default" />
     </o-tooltip>
 
     <o-tooltip label="Primary" variant="primary">
-      <o-button label="Primary" />
+      <o-button label="Primary" variant="primary" />
     </o-tooltip>
 
     <o-tooltip label="Secondary" variant="secondary">
-      <o-button label="Secondary" />
+      <o-button label="Secondary" variant="secondary" />
     </o-tooltip>
 
     <o-tooltip label="Success" variant="success">
-      <o-button label="Success" />
+      <o-button label="Success" variant="success" />
     </o-tooltip>
 
     <o-tooltip label="Danger" variant="danger">
-      <o-button label="Danger" />
+      <o-button label="Danger" variant="danger" />
     </o-tooltip>
 
     <o-tooltip label="Warning" variant="warning">
-      <o-button label="Warning" />
+      <o-button label="Warning" variant="warning" />
     </o-tooltip>
 
     <o-tooltip label="Info" variant="info">
-      <o-button label="Info" />
+      <o-button label="Info" variant="info" />
     </o-tooltip>
   </section>
 
@@ -121,8 +158,9 @@ const active = ref(true);
     <h3>Toggle</h3>
 
     <o-field>
-      <o-switch v-model="active"> Toggle Always </o-switch>
+      <o-switch v-model="active" label="Toggle Always" />
     </o-field>
+
     <o-tooltip
       variant="danger"
       label="I'm never closing"

package/dist/scss/components/_inputitems.scss

@@ -1,175 +0,0 @@
-@use "sass:list";
-
-/* @docs */
-$inputitems-background-color: $input-background-color !default;
-$inputitems-height: calc(2em - 1px) !default;
-$inputitems-padding: calc(0.275em - 1px) 0 0 !default;
-$inputitems-border-color: $grey-lighter !default;
-$inputitems-border-style: solid !default;
-$inputitems-border-width: 1px !default;
-$inputitems-border-radius: $base-border-radius !default;
-$inputitems-color: #363636 !default;
-$inputitems-line-height: $base-line-height !default;
-$inputitems-box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.1) !default;
-$inputitems-max-width: 100% !default;
-$inputitems-width: 100% !default;
-$inputitems-counter-font-size: 0.75rem !default;
-$inputitems-counter-margin: 0.25rem 0 0 0.5rem !default;
-$inputitems-item-background-color: $primary !default;
-$inputitems-item-color: $primary-invert !default;
-$inputitems-item-border-radius: $base-border-radius !default;
-$inputitems-item-margin: 0 0 0 0.275em !default;
-$inputitems-item-padding: 0 0.75em 0 0.75em !default;
-$inputitems-margin-icon-to-text: 0.1875em !default;
-/* @docs */
-
-.o-inputit {
-  display: block;
-
-  &__container {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    position: relative;
-    vertical-align: top;
-    flex-wrap: wrap;
-
-    @include avariable(
-      "max-width",
-      "inputitems-max-width",
-      $inputitems-max-width
-    );
-    @include avariable("width", "inputitems-width", $inputitems-width);
-    @include avariable("padding", "inputitems-padding", $inputitems-padding);
-    @include avariable(
-      "background-color",
-      "inputitems-background-color",
-      $inputitems-background-color
-    );
-    @include avariable(
-      "border-color",
-      "inputitems-border-color",
-      $inputitems-border-color
-    );
-    @include avariable(
-      "border-style",
-      "inputitems-border-style",
-      $inputitems-border-style
-    );
-    @include avariable(
-      "border-width",
-      "inputitems-border-width",
-      $inputitems-border-width
-    );
-    @include avariable(
-      "border-radius",
-      "inputitems-border-radius",
-      $inputitems-border-radius
-    );
-    @include avariable("color", "inputitems-color", $inputitems-color);
-    @include avariable("font-size", "base-font-size", $base-font-size);
-    @include avariable(
-      "line-height",
-      "inputitems-line-height",
-      $inputitems-line-height
-    );
-    @include avariable(
-      "box-shadow",
-      "inputitems-box-shadow",
-      $inputitems-box-shadow
-    );
-
-    @each $name, $value in $sizes {
-      &--#{$name} {
-        @include avariable(
-          "font-size",
-          ("inputitems-font-size-" + #{$name}),
-          $value
-        );
-      }
-    }
-  }
-
-  &__autocomplete {
-    position: static;
-    flex: 1;
-  }
-
-  &__input {
-    border: none;
-    box-shadow: none;
-
-    &:focus {
-      box-shadow: none;
-    }
-  }
-
-  &__item {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-
-    @include side-flex-gap($inputitems-margin-icon-to-text);
-    @include avariable(
-      "background-color",
-      "inputitems-item-background-color",
-      $inputitems-item-background-color
-    );
-    @include avariable(
-      "color",
-      "inputitems-item-color",
-      $inputitems-item-color
-    );
-    @include avariable(
-      "border-radius",
-      "inputitems-item-border-radius",
-      $inputitems-item-border-radius
-    );
-    @include avariable(
-      "margin",
-      "inputitems-item-margin",
-      $inputitems-item-margin
-    );
-    @include avariable(
-      "padding",
-      "inputitems-item-padding",
-      $inputitems-item-padding
-    );
-
-    @each $name, $pair in $colors {
-      $color: list.nth($pair, 1);
-      $color-invert: list.nth($pair, 2);
-      &--#{$name} {
-        @include avariable("background-color", ("variant-" + #{$name}), $color);
-        @include avariable(
-          "color",
-          ("variant-invert-" + #{$name}),
-          $color-invert
-        );
-      }
-    }
-  }
-
-  &__counter {
-    display: block;
-    float: right;
-
-    @include avariable(
-      "font-size",
-      "inputitems-counter-font-size",
-      $inputitems-counter-font-size
-    );
-    @include avariable(
-      "margin",
-      "inputitems-counter-margin",
-      $inputitems-counter-margin
-    );
-  }
-
-  &--expanded {
-    width: 100%;
-    flex-grow: 1;
-    flex-shrink: 1;
-  }
-}