@oruga-ui/theme-oruga 0.0.1 → 0.2.1

package/dist/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/dist/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/dist/scss/utils/_variables.scss

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oruga-ui/theme-oruga",
-  "version": "0.0.1",
+  "version": "0.2.1",
   "description": "Default theme for Oruga",
   "license": "MIT",
   "main": "dist/theme.js",
@@ -24,7 +24,7 @@
     "url": "https://github.com/oruga-ui/theme-oruga/issues"
   },
   "scripts": {
-    "dev": "vite --force",    
+    "dev": "vite --force",
     "serve": "vite preview",
     "build": "vue-tsc --noEmit && vite build",
     "build:lib": "rimraf dist && npm run build:config && npm run build:scss && npm run build:scss-full",
@@ -36,37 +36,37 @@
     "update": "ncu -u"
   },
   "devDependencies": {
-    "@fortawesome/fontawesome-free": "6.4.2",
-    "@oruga-ui/oruga-next": "0.6.0",
-    "@rollup/plugin-typescript": "11.1.3",
-    "@vitejs/plugin-vue": "4.3.4",
+    "@fortawesome/fontawesome-free": "6.5.0",
+    "@oruga-ui/oruga-next": "0.8.1",
+    "@rollup/plugin-typescript": "11.1.5",
+    "@vitejs/plugin-vue": "4.5.0",
     "@vue/eslint-config-prettier": "^8.0.0",
-    "@vue/eslint-config-typescript": "^11.0.3",
+    "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/tsconfig": "^0.4.0",
-    "autoprefixer": "10.4.15",
+    "autoprefixer": "10.4.16",
     "clean-css-cli": "^5.6.2",
-    "core-js": "3.32.2",
-    "eslint": "^8.49.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-vue": "^9.17.0",
-    "npm-check-updates": "^16.13.3",
-    "postcss": "8.4.29",
-    "prettier": "^3.0.3",
-    "rimraf": "5.0.1",
-    "rollup": "^3.29.1",
+    "core-js": "3.33.3",
+    "eslint": "^8.54.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-vue": "^9.18.1",
+    "npm-check-updates": "^16.14.11",
+    "postcss": "8.4.31",
+    "prettier": "^3.1.0",
+    "rimraf": "5.0.5",
+    "rollup": "^4.6.0",
     "rollup-plugin-copy": "3.5.0",
-    "rollup-plugin-sass": "1.12.20",
-    "sass": "1.66.1",
-    "stylelint": "^15.10.3",
+    "rollup-plugin-sass": "1.12.21",
+    "sass": "1.69.5",
+    "stylelint": "^15.11.0",
     "stylelint-config-recommended": "^13.0.0",
-    "stylelint-config-recommended-scss": "^13.0.0",
-    "stylelint-prettier": "^4.0.2",
-    "stylelint-scss": "^5.1.0",
+    "stylelint-config-recommended-scss": "^13.1.0",
+    "stylelint-prettier": "^4.1.0",
+    "stylelint-scss": "^5.3.1",
     "tslib": "2.6.2",
-    "typescript": "5.2.2",
-    "vite": "^4.4.9",
-    "vue": "3.3.4",
-    "vue-router": "4.2.4",
-    "vue-tsc": "1.8.10"
+    "typescript": "5.3.2",
+    "vite": "^5.0.4",
+    "vue": "3.3.9",
+    "vue-router": "4.2.5",
+    "vue-tsc": "1.8.24"
   }
 }

package/src/App.vue

@@ -44,6 +44,7 @@ const components = Object.keys(paths)
 
   main {
     flex-grow: 1;
+    padding-bottom: 6rem;
     margin: 2rem;
 
     > section {

package/src/assets/scss/components/_autocomplete.scss

@@ -6,69 +6,11 @@ $autocomplete-item-hover-background-color: #f5f5f5 !default;
 $autocomplete-item-hover-color: #000000 !default;
 $autocomplete-item-line-height: $base-line-height !default;
 $autocomplete-item-padding: 0.375rem 1rem !default;
-$autocomplete-menu-background: #ffffff !default;
-$autocomplete-menu-border-radius: $base-border-radius !default;
-$autocomplete-menu-box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
-  0 0 0 1px rgba(10, 10, 10, 0.02) !default;
-$autocomplete-menu-margin: 0 !default;
-$autocomplete-menu-max-height: 200px !default;
-$autocomplete-menu-padding: 0.5rem 0 0.5rem 0 !default;
-$autocomplete-menu-zindex: 20 !default;
 /* @docs */
 
 .o-acp {
   position: relative;
 
-  &__menu {
-    display: block;
-    width: 100%;
-    position: absolute;
-    left: 0;
-    top: 100%;
-    overflow: auto;
-
-    @include avariable(
-      "z-index",
-      "autocomplete-menu-zindex",
-      $autocomplete-menu-zindex
-    );
-    @include avariable(
-      "background-color",
-      "autocomplete-menu-background",
-      $autocomplete-menu-background
-    );
-    @include avariable(
-      "border-radius",
-      "autocomplete-menu-border-radius",
-      $autocomplete-menu-border-radius
-    );
-    @include avariable(
-      "box-shadow",
-      "autocomplete-menu-box-shadow",
-      $autocomplete-menu-box-shadow
-    );
-    @include avariable(
-      "padding",
-      "autocomplete-menu-padding",
-      $autocomplete-menu-padding
-    );
-    @include avariable(
-      "margin",
-      "autocomplete-menu-margin",
-      $autocomplete-menu-margin
-    );
-    @include avariable(
-      "max-height",
-      "autocomplete-menu-max-height",
-      $autocomplete-menu-max-height
-    );
-
-    &--top {
-      top: auto;
-      bottom: 100%;
-    }
-  }
-
   &__item {
     display: block;
     position: relative;
@@ -123,8 +65,4 @@ $autocomplete-menu-zindex: 20 !default;
       );
     }
   }
-
-  &--expanded {
-    width: 100%;
-  }
 }

package/src/assets/scss/components/_carousel.scss

@@ -56,7 +56,7 @@ $carousel-overlay-zindex: 40 !default;
     );
   }
 
-  &__scene {
+  &__wrapper {
     position: relative;
     width: 100%;
   }
@@ -77,6 +77,10 @@ $carousel-overlay-zindex: 40 !default;
   &__item {
     @include avariable("border", "carousel-item-border", $carousel-item-border);
     flex-shrink: 0;
+
+    &--clickable {
+      cursor: pointer;
+    }
   }
 
   &__indicators {
@@ -182,16 +186,16 @@ $carousel-overlay-zindex: 40 !default;
         );
       }
 
-      &---lines {
+      &--lines {
         @include avariable(
           "width",
-          "carousel-indicator-lines-height",
-          $carousel-indicator-lines-height
+          "carousel-indicator-lines-width",
+          $carousel-indicator-lines-width
         );
         @include avariable(
           "height",
-          "carousel-indicator-lines-width",
-          $carousel-indicator-lines-width
+          "carousel-indicator-lines-height",
+          $carousel-indicator-lines-height
         );
       }
     }

package/src/assets/scss/components/_checkbox.scss

@@ -49,7 +49,7 @@ $checkbox-line-height: 1.5 !default;
     $checkbox-margin-sibiling
   );
 
-  &__check {
+  &__input {
     @include avariable("width", "checkbox-size", $checkbox-size);
     @include avariable("height", "checkbox-size", $checkbox-size);
     outline: none;
@@ -162,18 +162,18 @@ $checkbox-line-height: 1.5 !default;
     $color: list.nth($pair, 1);
     $color-invert: list.nth($pair, 2);
     &--#{$name} {
-      .o-chk__check {
+      .o-chk__input {
         @include avariable("border-color", ("variant-" + #{$name}), $color);
         @include avariable("background-color", ("variant-" + #{$name}), $color);
       }
 
-      .o-chk__check--checked {
+      .o-chk__input--checked {
         background-image: url(svg_checkmark(
           variable(("variant-invert-" + #{$name}), $color-invert)
         ));
       }
 
-      .o-chk__check--indeterminate {
+      .o-chk__input--indeterminate {
         background-image: url(svg_indeterminate(
           variable(("variant-invert-" + #{$name}), $color-invert)
         ));

package/src/assets/scss/components/_datepicker.scss

@@ -124,6 +124,14 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
       }
     }
 
+    &__previous {
+      order: 1;
+    }
+
+    &__next {
+      order: 3;
+    }
+
     &__previous,
     &__next {
       justify-content: center;
@@ -201,14 +209,6 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
       }
     }
 
-    &__previous {
-      order: 1;
-    }
-
-    &__next {
-      order: 3;
-    }
-
     &__list {
       order: 2;
       align-items: center;
@@ -243,7 +243,7 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
   }
 
   &__table,
-  &__molist.nth {
+  &__month {
     display: table;
     margin: 0 auto 0 auto;
 
@@ -555,14 +555,14 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
     }
   }
 
-  &__molist.nth__table {
+  &__month__table {
     display: inline-flex;
     flex-wrap: wrap;
     flex-direction: row;
     width: 17rem;
   }
 
-  &__molist.nth__cell {
+  &__month__cell {
     display: flex;
     align-items: center;
     justify-content: center;

package/src/assets/scss/components/_dropdown.scss

@@ -12,8 +12,10 @@ $dropdown-item-padding: 0.375rem 1rem !default;
 $dropdown-item-font-weight: 400 !default;
 $dropdown-menu-background: #ffffff !default;
 $dropdown-menu-border-radius: $base-border-radius !default;
-$dropdown-menu-box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
+$dropdown-menu-box-shadow:
+  0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
   0 0 0 1px rgba(10, 10, 10, 0.02) !default;
+$dropdown-menu-spacer: 0px !default;
 $dropdown-menu-margin: 0 !default;
 $dropdown-menu-padding: 0.5rem 0 0.5rem 0 !default;
 $dropdown-menu-width: 12rem !default;
@@ -31,16 +33,6 @@ $dropdown-mobile-zindex: 50 !default;
   position: relative;
   vertical-align: top;
 
-  &--inline {
-    display: inline;
-
-    .o-drop__menu {
-      position: static;
-      display: inline-block;
-      padding: 0;
-    }
-  }
-
   &__overlay {
     position: fixed;
     bottom: 0;
@@ -68,8 +60,6 @@ $dropdown-mobile-zindex: 50 !default;
 
   &__menu {
     position: absolute;
-    left: 0;
-    top: 100%;
     display: block;
 
     @include avariable(
@@ -104,28 +94,133 @@ $dropdown-mobile-zindex: 50 !default;
     );
     @include avariable("margin", "dropdown-menu-margin", $dropdown-menu-margin);
 
-    &--top-left {
+    &--bottom {
+      left: 50%;
+      right: auto;
+
+      @include evariable(
+        "top",
+        "calc(100% + $param)",
+        eparam(
+          "$param",
+          variable("dropdown-menu-spacer", $dropdown-menu-spacer)
+        )
+      );
+      bottom: auto;
+      transform: translateX(-50%);
+    }
+
+    &--top {
+      left: 50%;
+      right: auto;
       top: auto;
-      bottom: 100%;
-      right: 0;
+
+      @include evariable(
+        "bottom",
+        "calc(100% + $param)",
+        eparam(
+          "$param",
+          variable("dropdown-menu-spacer", $dropdown-menu-spacer)
+        )
+      );
+      transform: translateX(-50%);
+    }
+
+    &--left {
+      @include evariable(
+        "right",
+        "calc(100% + $param)",
+        eparam(
+          "$param",
+          variable("dropdown-menu-spacer", $dropdown-menu-spacer)
+        )
+      );
       left: auto;
+      top: 50%;
+      bottom: auto;
+      transform: translateY(-50%);
     }
 
-    &--bottom-left {
+    &--right {
+      right: auto;
+
+      @include evariable(
+        "left",
+        "calc(100% + $param)",
+        eparam(
+          "$param",
+          variable("dropdown-menu-spacer", $dropdown-menu-spacer)
+        )
+      );
+      top: 50%;
+      bottom: auto;
+      transform: translateY(-50%);
+    }
+
+    &--top-right {
       right: 0;
       left: auto;
+      top: auto;
+
+      @include evariable(
+        "bottom",
+        "calc(100% + $param)",
+        eparam(
+          "$param",
+          variable("dropdown-menu-spacer", $dropdown-menu-spacer)
+        )
+      );
     }
 
-    &--top-right {
+    &--top-left {
+      right: auto;
+      left: 0;
       top: auto;
-      bottom: 100%;
+
+      @include evariable(
+        "bottom",
+        "calc(100% + $param)",
+        eparam(
+          "$param",
+          variable("dropdown-menu-spacer", $dropdown-menu-spacer)
+        )
+      );
+    }
+
+    &--bottom-right {
+      right: 0;
+      left: auto;
+
+      @include evariable(
+        "top",
+        "calc(100% + $param)",
+        eparam(
+          "$param",
+          variable("dropdown-menu-spacer", $dropdown-menu-spacer)
+        )
+      );
+      bottom: auto;
+    }
+
+    &--bottom-left {
+      right: auto;
+      left: 0;
+
+      @include evariable(
+        "top",
+        "calc(100% + $param)",
+        eparam(
+          "$param",
+          variable("dropdown-menu-spacer", $dropdown-menu-spacer)
+        )
+      );
+      bottom: auto;
     }
   }
 
   &__item {
     display: block;
     position: relative;
-    cursor: pointer;
 
     @include avariable("color", "dropdown-item-color", $dropdown-item-color);
     @include avariable(
@@ -171,17 +266,31 @@ $dropdown-mobile-zindex: 50 !default;
       );
     }
 
-    &:hover:not(&--active) {
-      @include avariable(
-        "background-color",
-        "dropdown-item-hover-background-color",
-        $dropdown-item-hover-background-color
-      );
-      @include avariable(
-        "color",
-        "dropdown-item-hover-color",
-        $dropdown-item-hover-color
-      );
+    &--clickable {
+      cursor: pointer;
+
+      &:hover:not(&--active) {
+        @include avariable(
+          "background-color",
+          "dropdown-item-hover-background-color",
+          $dropdown-item-hover-background-color
+        );
+        @include avariable(
+          "color",
+          "dropdown-item-hover-color",
+          $dropdown-item-hover-color
+        );
+      }
+    }
+  }
+
+  &--inline {
+    display: inline;
+
+    .o-drop__menu {
+      position: static;
+      display: inline-block;
+      padding: 0;
     }
   }
 
@@ -238,4 +347,8 @@ $dropdown-mobile-zindex: 50 !default;
       display: block;
     }
   }
+
+  &--teleport {
+    width: unset;
+  }
 }

package/src/assets/scss/components/_field.scss

@@ -69,22 +69,22 @@ $field-horizontal-label-margin: 0 1.5rem 0 0 !default;
     display: flex;
     justify-content: flex-start;
 
-    > *:first-child:not(:only-child) button,
     > button:first-child,
-    > *:first-child:not(:only-child) input,
+    > *:first-child:not(:only-child) button,
     > input:first-child,
-    > *:first-child:not(:only-child) select,
-    > select:first-child {
+    > *:first-child:not(:only-child) input,
+    > select:first-child,
+    > *:first-child:not(:only-child) select {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
     }
 
-    > *:last-child:not(:only-child) button,
     > button:last-child,
-    > *:last-child:not(:only-child) input,
+    > *:last-child:not(:only-child) button,
     > input:last-child,
-    > *:last-child:not(:only-child) select,
-    > select:last-child {
+    > *:last-child:not(:only-child) input,
+    > select:last-child,
+    > *:last-child:not(:only-child) select {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
     }

package/src/assets/scss/components/_icon.scss

@@ -20,7 +20,9 @@ $icon-spin-duration: 2s !default;
   align-items: center;
   display: inline-flex;
   justify-content: center;
-  transition: transform $speed-slow $easing, opacity $speed $easing;
+  transition:
+    transform $speed-slow $easing,
+    opacity $speed $easing;
 
   @each $name, $value in $sizes {
     &--#{$name} {