feat: apply changes for oruga v0.9.0 (#150)

Author: mlmoravek

package-lock.json

@@ -31,14 +31,14 @@
     "update": "ncu -u"
   },
   "peerDependencies": {
-    "@oruga-ui/oruga-next": "0.9.0-pre.2"
+    "@oruga-ui/oruga-next": "0.9.0"
   },
   "dependencies": {
     "bootstrap": "^5.3.3"
   },
   "devDependencies": {
-    "@oruga-ui/examples": "0.9.0-pre.2",
-    "@oruga-ui/oruga-next": "0.9.0-pre.2",
+    "@oruga-ui/examples": "0.9.0",
+    "@oruga-ui/oruga-next": "0.9.0",
     "@types/node": "^22.9.0",
     "@vitejs/plugin-vue": "5.1.4",
     "@vue/eslint-config-prettier": "^10.1.0",
@@ -66,4 +66,4 @@
     "vue-router": "4.4.5",
     "vue-tsc": "2.1.10"
   }
-}
+}

package.json

@@ -36,10 +36,11 @@ import components from "@/components";
 
   main {
     flex-grow: 1;
+    width: 100%;
     height: 100vh;
     padding: 2rem;
     padding-bottom: 6rem;
-    overflow-y: scroll;
+    padding-left: calc(var(--vp-sidebar-width) + 2rem);
 
     > section {
       padding: 1rem 0;
@@ -56,6 +57,8 @@ import components from "@/components";
   }
 
   #nav {
+    position: fixed;
+    left: 0;
     display: flex;
     flex-direction: column;
     height: 100vh;
@@ -97,7 +100,7 @@ import components from "@/components";
 }
 
 @media (max-width: 576px) {
-  #main {
+  #app {
     #nav {
       display: none;
     }

src/App.vue

@@ -2,7 +2,7 @@
 $autocomplete-menu-max-height: 200px !default;
 /* @docs */
 
-.autocomplete-wrapper {
+.autocomplete {
   --#{$prefix}autocomplete-menu-max-height: #{$autocomplete-menu-max-height};
   display: inline-block;
 

src/assets/scss/components/_autocomplete.scss

@@ -99,6 +99,11 @@ $btn-hover-box-shadow: $box-shadow-sm !default;
     cursor: auto;
   }
 
+  &.btn-inverted {
+    --#{$prefix}btn-bg: transparent;
+    --#{$prefix}btn-border-color: transparent;
+  }
+
   // inverted color
   @each $name, $color in $theme-colors {
     &.variant-#{$name}-inverted,

src/assets/scss/components/_button.scss

@@ -37,7 +37,7 @@ $carousel-indicator-spacer: $spacer !default;
 // $carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
 /* @bootstrap docs */
 
-.carousel-wrapper {
+.carousel {
   --#{$prefix}carousel-control-top: #{$carousel-control-top};
   --#{$prefix}carousel-overlay-background: #{$carousel-overlay-background};
   --#{$prefix}carousel-overlay-zindex: #{$carousel-overlay-zindex};

src/assets/scss/components/_carousel.scss

@@ -159,7 +159,7 @@ $dropdown-modal-backdrop-zindex: $zindex-modal-backdrop !default;
   }
 
   // mobile class
-  &.dropdown-modal {
+  &.dropdown-modal:not(&.inline) {
     .dropdown-menu {
       --#{$prefix}dropdown-width: 75%;
       --#{$prefix}dropdown-min-width: 25%;
@@ -200,7 +200,6 @@ $dropdown-modal-backdrop-zindex: $zindex-modal-backdrop !default;
     .dropdown-menu {
       --#{$prefix}dropdown-zindex: 10;
       position: relative;
-      top: 0;
     }
   }
 }

src/assets/scss/components/_dropdown.scss

@@ -97,7 +97,6 @@ $input-field-btn-border-color: $input-border-color !default;
     &.expanded {
       flex-grow: 1;
       flex-shrink: 1;
-      width: auto;
 
       &.btn {
         width: 100%;

src/assets/scss/components/_field.scss

@@ -162,6 +162,11 @@ $input-icon-padding-lg: 3rem !default;
     }
   }
 
+  // remove arrow if not arrowed
+  .form-select:not(.arrowed) {
+    --#{$prefix}form-select-bg-img: unset;
+  }
+
   // the Position of the icon
   .icon {
     --#{$prefix}input-icon-color: #{$input-icon-color};

src/assets/scss/components/_input.scss

@@ -10,13 +10,14 @@ $menu-item-active-bg: var(--#{$prefix}primary) !default;
 $menu-item-active-color: var(--#{$prefix}white) !default;
 $menu-item-disabled-bg: transparent !default;
 $menu-item-disabled-color: var(--#{$prefix}secondary) !default;
+$menu-item-border-radius: var(--#{$prefix}border-radius) !default;
 $menu-icon-spacer: 0.5rem !default;
 $menu-submenu-border-left: 1px solid #445e00 !default;
 $menu-submenu-padding-left: 0.75em !default;
 $menu-submenu-margin: 0.75em !default;
 /* @docs */
 
-.menu-wrapper {
+.menu {
   .menu-label {
     --#{$prefix}menu-label-bg: #{$menu-label-bg};
     --#{$prefix}menu-label-color: #{$menu-label-color};
@@ -33,23 +34,25 @@ $menu-submenu-margin: 0.75em !default;
 
     line-height: var(--#{$prefix}menu-list-line-height);
 
-    .menu-item-wrapper {
+    .menu-item {
       --#{$prefix}menu-item-padding: #{$menu-item-padding};
       --#{$prefix}menu-item-bg: #{$menu-item-bg};
       --#{$prefix}menu-item-color: #{$menu-item-color};
       --#{$prefix}menu-item-active-bg: #{$menu-item-active-bg};
       --#{$prefix}menu-item-active-color: #{$menu-item-active-color};
       --#{$prefix}menu-item-disabled-bg: #{$menu-item-disabled-bg};
       --#{$prefix}menu-item-disabled-color: #{$menu-item-disabled-color};
+      --#{$prefix}menu-item-border-radius: #{$menu-item-border-radius};
 
       list-style: none;
 
-      .menu-item {
+      .menu-button {
         display: block;
         list-style: none;
         background: var(--#{$prefix}menu-item-bg);
         color: var(--#{$prefix}menu-item-color);
         padding: var(--#{$prefix}menu-item-padding);
+        border-radius: var(--#{$prefix}menu-item-border-radius);
 
         &.active {
           --#{$prefix}menu-item-bg: var(--#{$prefix}menu-item-active-bg);