@oruga-ui/theme-oruga 0.0.1 → 0.2.0

package/src/assets/scss/oruga.scss

@@ -10,12 +10,6 @@ $sizes: () !default;
 @import "utils/variables";
 @import "utils/helpers";
 
-// Autocomplete
-$whitelist: add-to-whitelist(
-  "autocomplete-menu-background",
-  "autocomplete-menu-zindex"
-);
-
 // Button
 $whitelist: add-to-whitelist(
   "button-background-color",
@@ -52,12 +46,12 @@ $whitelist: add-to-whitelist(
 
 // Datepicker
 $whitelist: add-to-whitelist(
-  "datepicker-item-disabled-color",
-  "datepicker-item-selectable-color",
   "datepicker-btn-border-color",
   "datepicker-btn-color",
+  "datepicker-item-disabled-color",
   "datepicker-item-hovered-background-color",
   "datepicker-item-hovered-color",
+  "datepicker-item-selectable-color",
   "datepicker-item-selected-background-color",
   "datepicker-item-selected-color",
   "datepicker-item-selected-within-background-color",
@@ -66,10 +60,11 @@ $whitelist: add-to-whitelist(
 
 // Dropdown
 $whitelist: add-to-whitelist(
-  "dropdown-menu-background",
-  "dropdown-mobile-overlay-color",
   "dropdown-disabled-opacity",
+  "dropdown-menu-background",
   "dropdown-menu-zindex",
+  "dropdown-menu-spacer",
+  "dropdown-mobile-overlay-color",
   "dropdown-mobile-overlay-zindex",
   "dropdown-mobile-zindex",
   "dropdown-item-active-background-color",
@@ -83,16 +78,6 @@ $whitelist: add-to-whitelist("icon-spin-duration");
 // Input
 $whitelist: add-to-whitelist();
 
-// Inputitems
-$whitelist: add-to-whitelist(
-  "inputitems-border-style",
-  "inputitems-border-color",
-  "inputitems-border-width",
-  "inputitems-color",
-  "inputitems-item-color",
-  "inputitems-item-background-color"
-);
-
 // Modal
 $whitelist: add-to-whitelist(
   "modal-zindex",
@@ -182,6 +167,16 @@ $whitelist: add-to-whitelist(
   "tabs-link-color"
 );
 
+// Taginput
+$whitelist: add-to-whitelist(
+  "taginput-border-style",
+  "taginput-border-color",
+  "taginput-border-width",
+  "taginput-color",
+  "taginput-item-color",
+  "taginput-item-background-color"
+);
+
 // Timepicker
 $whitelist: add-to-whitelist("timepicker-select-placeholder-opacity");
 

package/src/assets/scss/utils/_helpers.scss

@@ -94,16 +94,12 @@
 ///   By default is `false`, if `true` it allows to bypass whitelist and set the value
 /// @return {string} the variable or null if not in whitelist when $css-vars == false.
 @function variable($name, $value, $forceval: false) {
-  @if $css-vars {
-    @if is-empty-whitelist() or is-in-whitelist($name) {
+  @if is-empty-whitelist() or is-in-whitelist($name) or $forceval {
+    @if $css-vars {
       @return var(--#{$prefix}#{$name}, #{$value});
-    }
-  } @else if $sass-vars {
-    @if is-empty-whitelist() or is-in-whitelist($name) {
+    } @else {
       @return #{$value};
     }
-  } @else if $forceval {
-    @return #{$value};
   }
 
   @return null;

package/src/assets/scss/utils/_variables.scss

@@ -4,7 +4,6 @@
 
 // Settings
 $whitelist: () !default;
-$sass-vars: true !default;
 $css-vars: true !default;
 $prefix: "oruga-" !default;
 

package/src/components/Autocomplete.vue

@@ -510,8 +510,8 @@ function getMoreAsyncData() {
     <h3>Objects array</h3>
 
     <o-field grouped group-multiline>
-      <o-switch v-model="openOnFocus">Open dropdown on focus</o-switch>
-      <o-switch v-model="keepFirst">Keep-first</o-switch>
+      <o-switch v-model="openOnFocus" label="Open dropdown on focus" />
+      <o-switch v-model="keepFirst" label="Keep-first" />
     </o-field>
 
     <o-field label="Find a name">
@@ -538,7 +538,7 @@ function getMoreAsyncData() {
         open-on-focus
         :data="filteredDataGroups"
         field="user.first_name"
-        @select="(option:any) => (selectedGroups = option)" />
+        @select="(option: any) => (selectedGroups = option)" />
     </o-field>
     <p><b>Selected:</b> {{ selectedGroups }}</p>
   </section>
@@ -552,11 +552,11 @@ function getMoreAsyncData() {
         placeholder="e.g. Fight Club"
         field="title"
         :loading="isFetching"
-        check-infinite-scroll
-        :debounce-typing="500"
-        @typing="getAsyncData"
+        check-scroll
+        :debounce="500"
+        @input="getAsyncData"
         @select="(option: any) => (selectedInfinite = option)"
-        @infinite-scroll="getMoreAsyncData">
+        @scroll-end="getMoreAsyncData">
         <template #default="props">
           <div class="media">
             <div class="media-left">

package/src/components/Button.vue

@@ -8,12 +8,12 @@
     <h3>Base</h3>
 
     <div class="buttons">
-      <o-button variant="primary">Primary</o-button>
-      <o-button variant="secondary">Secondary</o-button>
-      <o-button variant="info">Info</o-button>
-      <o-button variant="success">Success</o-button>
-      <o-button variant="warning">Warning</o-button>
-      <o-button variant="danger">Danger</o-button>
+      <o-button variant="primary" label="Primary" />
+      <o-button variant="secondary" label="Secondary" />
+      <o-button variant="info" label="Info" />
+      <o-button variant="success" label="Success" />
+      <o-button variant="warning" label="Warning" />
+      <o-button variant="danger" label="Danger" />
     </div>
   </section>
 
@@ -21,9 +21,9 @@
     <h3>States</h3>
 
     <div class="buttons">
-      <o-button>Normal</o-button>
-      <o-button disabled>Disabled</o-button>
-      <o-button rounded variant="light">Rounded</o-button>
+      <o-button label="Normal" />
+      <o-button disabled label="Disabled" />
+      <o-button rounded variant="light" label="Rounded" />
     </div>
   </section>
 
@@ -31,12 +31,12 @@
     <h3>Outlined</h3>
 
     <div class="buttons">
-      <o-button variant="primary" outlined>Outlined</o-button>
-      <o-button variant="secondary" outlined>Outlined</o-button>
-      <o-button variant="info" outlined>Outlined</o-button>
-      <o-button variant="success" outlined>Outlined</o-button>
-      <o-button variant="warning" outlined>Outlined</o-button>
-      <o-button variant="danger" outlined>Outlined</o-button>
+      <o-button variant="primary" outlined label="Outlined" />
+      <o-button variant="secondary" outlined label="Outlined" />
+      <o-button variant="info" outlined label="Outlined" />
+      <o-button variant="success" outlined label="Outlined" />
+      <o-button variant="warning" outlined label="Outlined" />
+      <o-button variant="danger" outlined label="Outlined" />
     </div>
   </section>
 
@@ -44,12 +44,12 @@
     <h3>Inverted</h3>
 
     <div class="buttons">
-      <o-button variant="primary" inverted>Inverted</o-button>
-      <o-button variant="secondary" inverted>Inverted</o-button>
-      <o-button variant="info" inverted>Inverted</o-button>
-      <o-button variant="success" inverted>Inverted</o-button>
-      <o-button variant="warning" inverted>Inverted</o-button>
-      <o-button variant="danger" inverted>Inverted</o-button>
+      <o-button variant="primary" inverted label="Inverted" />
+      <o-button variant="secondary" inverted label="Inverted" />
+      <o-button variant="info" inverted label="Inverted" />
+      <o-button variant="success" inverted label="Inverted" />
+      <o-button variant="warning" inverted label="Inverted" />
+      <o-button variant="danger" inverted label="Inverted" />
     </div>
   </section>
 
@@ -57,15 +57,15 @@
     <h3>Icons</h3>
 
     <div class="buttons">
-      <o-button variant="primary" size="small" icon-left="plus">Add</o-button>
-      <o-button variant="primary" icon-left="plus">Add</o-button>
-      <o-button variant="primary" size="medium" icon-left="plus">Add</o-button>
-      <o-button variant="primary" size="large" icon-left="plus">Add</o-button>
+      <o-button variant="primary" size="small" icon-left="plus" label="Add" />
+      <o-button variant="primary" icon-left="plus" label="Add" />
+      <o-button variant="primary" size="medium" icon-left="plus" label="Add" />
+      <o-button variant="primary" size="large" icon-left="plus" label="Add" />
     </div>
 
     <div class="buttons">
-      <o-button variant="danger" icon-left="trash">Delete</o-button>
-      <o-button variant="danger" icon-right="trash">Delete</o-button>
+      <o-button variant="danger" icon-left="trash" label="Delete" />
+      <o-button variant="danger" icon-right="trash" label="Delete" />
       <o-button variant="danger" icon-right="trash" />
     </div>
   </section>
@@ -74,7 +74,7 @@
     <h3>Expanded</h3>
 
     <div class="buttons">
-      <o-button variant="primary" expanded>Expanded</o-button>
+      <o-button variant="primary" expanded label="Expanded" />
     </div>
   </section>
 </template>

package/src/components/Carousel.vue

@@ -42,9 +42,9 @@ const items = [
 
 const carousel = ref(1);
 const listSettings = reactive({
-  arrow: true,
-  arrowHover: true,
-  hasDrag: true,
+  arrows: true,
+  arrowsHover: true,
+  dragable: true,
   itemsToShow: 4,
   itemsToList: 1,
   repeat: false,
@@ -52,6 +52,7 @@ const listSettings = reactive({
 
 const gallery = ref(false);
 const indicatorsSettings = reactive({
+  indicators: false,
   itemsToShow: 2,
   breakpoints: {
     768: {
@@ -74,7 +75,7 @@ function switchGallery(value: boolean): any {
 }
 
 const customSettings = reactive({
-  hasDrag: false,
+  dragable: false,
   autoplay: false,
   pauseHover: false,
   interval: 3000,
@@ -89,6 +90,7 @@ const customSettings = reactive({
     <h2>Carousel Demo</h2>
     <hr />
   </section>
+
   <section class="py-4 container">
     <h3>Base</h3>
 
@@ -109,20 +111,19 @@ const customSettings = reactive({
     <div class="example-component">
       <o-field grouped group-multiline>
         <o-field>
-          <o-switch v-model="listSettings.arrow">Arrow</o-switch>
+          <o-switch v-model="listSettings.arrows" label="Arrow" />
         </o-field>
         <o-field>
           <o-switch
-            v-model="listSettings.arrowHover"
-            :disabled="!listSettings.arrow">
-            Arrow on hover
-          </o-switch>
+            v-model="listSettings.arrowsHover"
+            :disabled="!listSettings.arrows"
+            label="Arrow on hover" />
         </o-field>
         <o-field>
-          <o-switch v-model="listSettings.hasDrag">Drag event</o-switch>
+          <o-switch v-model="listSettings.dragable" label="Drag event" />
         </o-field>
         <o-field>
-          <o-switch v-model="listSettings.repeat">Repeat</o-switch>
+          <o-switch v-model="listSettings.repeat" label="Repeat" />
         </o-field>
       </o-field>
       <o-field grouped group-multiline>
@@ -166,11 +167,11 @@ const customSettings = reactive({
         <o-carousel
           :model-value="active"
           v-bind="indicatorsSettings"
-          as-indicator
           @update:model-value="switchTo($event)">
           <o-carousel-item
             v-for="(item, i) in items"
             :key="i"
+            clickable
             item-class="img-indicator"
             item-active-class="img-indicator-active">
             <img :src="item.image" />
@@ -197,24 +198,22 @@ const customSettings = reactive({
     <div class="example-component">
       <o-field grouped group-multiline>
         <o-field>
-          <o-switch v-model="customSettings.autoplay">Autoplay</o-switch>
+          <o-switch v-model="customSettings.autoplay" label="Autoplay" />
         </o-field>
         <o-field>
           <o-switch
             v-model="customSettings.pauseHover"
-            :disabled="!customSettings.autoplay">
-            Pause on hover
-          </o-switch>
+            :disabled="!customSettings.autoplay"
+            label="Pause on hover" />
         </o-field>
         <o-field>
-          <o-switch v-model="customSettings.hasDrag">Drag event</o-switch>
+          <o-switch v-model="customSettings.dragable" label="Drag event" />
         </o-field>
         <o-field>
           <o-switch
             v-model="customSettings.repeat"
-            :disabled="!customSettings.autoplay">
-            Repeat
-          </o-switch>
+            :disabled="!customSettings.autoplay"
+            label="Repeat" />
         </o-field>
       </o-field>
       <o-field grouped group-multiline>

package/src/components/Checkbox.vue

@@ -26,10 +26,10 @@ const checkboxGroup = ref(["Flint"]);
       </o-checkbox>
     </o-field>
     <o-field>
-      <o-checkbox :indeterminate="true"> Indeterminate </o-checkbox>
+      <o-checkbox :indeterminate="true" label="Indeterminate" />
     </o-field>
     <o-field>
-      <o-checkbox disabled>Disabled</o-checkbox>
+      <o-checkbox disabled label="Disabled" />
     </o-field>
   </section>
 
@@ -37,25 +37,25 @@ const checkboxGroup = ref(["Flint"]);
     <h3>Variant</h3>
 
     <o-field>
-      <o-checkbox :value="true"> Default </o-checkbox>
+      <o-checkbox :value="true" label="Default" />
     </o-field>
     <o-field>
-      <o-checkbox :value="true" variant="primary"> Primary </o-checkbox>
+      <o-checkbox :value="true" variant="primary" label="Primary" />
     </o-field>
     <o-field>
-      <o-checkbox :value="true" variant="secondary"> Secondary </o-checkbox>
+      <o-checkbox :value="true" variant="secondary" label="Secondary" />
     </o-field>
     <o-field>
-      <o-checkbox :value="true" variant="info"> Info </o-checkbox>
+      <o-checkbox :value="true" variant="info" label="Info" />
     </o-field>
     <o-field>
-      <o-checkbox :value="true" variant="success"> Success </o-checkbox>
+      <o-checkbox :value="true" variant="success" label="Success" />
     </o-field>
     <o-field>
-      <o-checkbox :value="true" variant="warning"> Warning </o-checkbox>
+      <o-checkbox :value="true" variant="warning" label="Warning" />
     </o-field>
     <o-field>
-      <o-checkbox :value="true" variant="danger"> Danger </o-checkbox>
+      <o-checkbox :value="true" variant="danger" label="Danger" />
     </o-field>
   </section>
 
@@ -63,35 +63,37 @@ const checkboxGroup = ref(["Flint"]);
     <h3>Indeterminate</h3>
 
     <o-field>
-      <o-checkbox indeterminate> Default Indeterminate </o-checkbox>
+      <o-checkbox indeterminate label="Default Indeterminate" />
     </o-field>
     <o-field>
-      <o-checkbox variant="primary" indeterminate>
-        Primary Indeterminate
-      </o-checkbox>
+      <o-checkbox
+        variant="primary"
+        indeterminate
+        label="Primary Indeterminate" />
     </o-field>
     <o-field>
-      <o-checkbox variant="secondary" indeterminate>
-        Secondary Indeterminate
-      </o-checkbox>
+      <o-checkbox
+        variant="secondary"
+        indeterminate
+        label="Secondary Indeterminate" />
     </o-field>
     <o-field>
-      <o-checkbox variant="info" indeterminate> Info Indeterminate </o-checkbox>
+      <o-checkbox variant="info" indeterminate label="Info Indeterminate" />
     </o-field>
     <o-field>
-      <o-checkbox variant="success" indeterminate>
-        Success Indeterminate
-      </o-checkbox>
+      <o-checkbox
+        variant="success"
+        indeterminate
+        label="Success Indeterminate" />
     </o-field>
     <o-field>
-      <o-checkbox variant="warning" indeterminate>
-        Warning Indeterminate
-      </o-checkbox>
+      <o-checkbox
+        variant="warning"
+        indeterminate
+        label="Warning Indeterminate" />
     </o-field>
     <o-field>
-      <o-checkbox variant="danger" indeterminate>
-        Danger Indeterminate
-      </o-checkbox>
+      <o-checkbox variant="danger" indeterminate label="Danger Indeterminate" />
     </o-field>
   </section>
 
@@ -99,16 +101,16 @@ const checkboxGroup = ref(["Flint"]);
     <h3>Size</h3>
 
     <o-field>
-      <o-checkbox size="small"> Small </o-checkbox>
+      <o-checkbox size="small" label="Small" />
     </o-field>
     <o-field>
-      <o-checkbox> Default </o-checkbox>
+      <o-checkbox label="Default" />
     </o-field>
     <o-field>
-      <o-checkbox size="medium"> Medium </o-checkbox>
+      <o-checkbox size="medium" label="Medium" />
     </o-field>
     <o-field>
-      <o-checkbox size="large"> Large </o-checkbox>
+      <o-checkbox size="large" label="Large" />
     </o-field>
   </section>
 
@@ -116,18 +118,17 @@ const checkboxGroup = ref(["Flint"]);
     <h3>Array</h3>
 
     <o-field>
-      <o-checkbox v-model="checkboxGroup" native-value="Silver">
-        Silver
-      </o-checkbox>
-      <o-checkbox v-model="checkboxGroup" native-value="Flint">
-        Flint
-      </o-checkbox>
-      <o-checkbox v-model="checkboxGroup" native-value="Vane">
-        Vane
-      </o-checkbox>
-      <o-checkbox v-model="checkboxGroup" native-value="Billy" disabled>
-        Billy
-      </o-checkbox>
+      <o-checkbox
+        v-model="checkboxGroup"
+        native-value="Silver"
+        label="Silver" />
+      <o-checkbox v-model="checkboxGroup" native-value="Flint" label="Flint" />
+      <o-checkbox v-model="checkboxGroup" native-value="Vane" label="Vane" />
+      <o-checkbox
+        v-model="checkboxGroup"
+        native-value="Billy"
+        disabled
+        label="Billy" />
     </o-field>
     <p><b>Selection:</b> {{ checkboxGroup }}</p>
   </section>

package/src/components/Collapse.vue

@@ -94,7 +94,9 @@ article {
 <style scoped lang="scss">
 .card {
   background-color: #fff;
-  box-shadow: 0 2px 3px hsla(0, 0%, 4%, 0.1), 0 0 0 1px hsla(0, 0%, 4%, 0.1);
+  box-shadow:
+    0 2px 3px hsla(0, 0%, 4%, 0.1),
+    0 0 0 1px hsla(0, 0%, 4%, 0.1);
   color: #4a4a4a;
   max-width: 100%;
   position: relative;

package/src/components/Datepicker.vue

@@ -132,7 +132,7 @@ const datepicker = ref<any>(null);
         </o-select>
       </o-field>
       <o-field>
-        <o-switch v-model="showWeekNumber">Show week number</o-switch>
+        <o-switch v-model="showWeekNumber" label="Show week number" />
       </o-field>
     </o-field>
 
@@ -145,8 +145,7 @@ const datepicker = ref<any>(null);
         icon="calendar"
         :events="events"
         :indicators="indicators"
-        trap-focus>
-      </o-datepicker>
+        trap-focus />
     </o-field>
     <p><b>Selected:</b> {{ selected }}</p>
   </section>
@@ -174,8 +173,7 @@ const datepicker = ref<any>(null);
         placeholder="Click to select..."
         icon="calendar"
         trap-focus
-        range>
-      </o-datepicker>
+        range />
     </o-field>
     <p><b>Selected:</b> {{ range }}</p>
   </section>
@@ -243,12 +241,12 @@ const datepicker = ref<any>(null);
         <template #footer>
           <div class="d-flex justify-content-end mt-2">
             <o-button variant="primary" @click="date = new Date()">
-              <o-icon icon="calendar"></o-icon>
+              <o-icon icon="calendar" />
               <span>Today</span>
             </o-button>
 
             <o-button variant="danger" @click="date = null">
-              <o-icon icon="times"></o-icon>
+              <o-icon icon="times" />
               <span>Clear</span>
             </o-button>
           </div>
@@ -261,7 +259,7 @@ const datepicker = ref<any>(null);
     <h3>Events</h3>
 
     <o-field>
-      <o-switch v-model="bars">Bars</o-switch>
+      <o-switch v-model="bars" label="Bars" />
     </o-field>
 
     <o-datepicker
@@ -278,8 +276,7 @@ const datepicker = ref<any>(null);
       <o-datepicker
         placeholder="Click to select..."
         icon="calendar"
-        type="month">
-      </o-datepicker>
+        type="month" />
     </o-field>
   </section>
 </template>

package/src/components/Datetimepicker.vue

@@ -23,10 +23,10 @@ const maxDatetime = ref(null);
 
     <o-field grouped>
       <o-field>
-        <o-switch v-model="showWeekNumber">Show week number</o-switch>
+        <o-switch v-model="showWeekNumber" label="Show week number" />
       </o-field>
       <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">
@@ -80,11 +80,11 @@ const maxDatetime = ref(null);
         <template #footer>
           <div class="d-flex justify-content-center mt-3">
             <o-button variant="primary" @click="datetime = new Date()">
-              <o-icon icon="calendar"></o-icon>
+              <o-icon icon="calendar" />
               <span>Today</span>
             </o-button>
             <o-button variant="danger" @click="datetime = null">
-              <o-icon icon="times"></o-icon>
+              <o-icon icon="times" />
               <span>Clear</span>
             </o-button>
           </div>