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

oruga-ui · Nov 11, 2024 · 7f65c6b · 7f65c6b
1 parent 054f83d
commit 7f65c6b
Show file tree

Hide file tree

Showing 15 changed files with 175 additions and 116 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="theme-light">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.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": {
     "bulma": "1.0.2"
   },
   "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",

diff --git a/src/App.vue b/src/App.vue
@@ -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;
@@ -84,7 +87,7 @@ import components from "@/components";
             font-size: 1rem;
 
             &.router-link-exact-active {
-                color: #2c3e50;
+                color: var(--vp-c-brand-1);
             }
         }
     }
@@ -97,7 +100,7 @@ import components from "@/components";
 }
 
 @media (max-width: 576px) {
-    #main {
+    #app {
         #nav {
             display: none;
         }

diff --git a/src/assets/scss/components/_datepicker.scss b/src/assets/scss/components/_datepicker.scss
@@ -56,25 +56,38 @@ $datepicker-event-background-color: css.getVar("grey-light") !default;
         }
     }
 
-    // unset opacity when dropdow is disabled
-    .dropdown {
+    // dropdown override
+    .dropdown,
+    &.dropdown {
+        // unset opacity when dropdow is disabled
         &.is-disabled {
             opacity: 1;
         }
-    }
 
-    .dropdown-item {
-        font-size: inherit;
+        .dropdown-menu {
+            .dropdown-item {
+                @include css.register-vars(
+                    (
+                        "dropdown-item-background-l-delta": "transparent",
+                    )
+                );
+                font-size: inherit;
+                padding-inline-end: 1rem;
+            }
+        }
     }
 
     .datepicker-header {
         padding-bottom: 0.875rem;
         margin-bottom: 0.875rem;
         border-bottom: 1px solid css.getVar("grey-lighter");
 
-        .pagination-previous,
-        .pagination-next {
-            border-width: css.getVar("button-border-width");
+        .pagination {
+            button.pagination-previous,
+            button.pagination-next {
+                border-width: css.getVar("button-border-width");
+                border-radius: css.getVar("control-radius");
+            }
         }
     }
 

diff --git a/src/assets/scss/components/_dropdown.scss b/src/assets/scss/components/_dropdown.scss
@@ -2,6 +2,8 @@
 @use "bulma/sass/utilities/css-variables" as css;
 @use "bulma/sass/utilities/mixins" as mixins;
 
+@use "bulma/sass/components/dropdown" as dropodown;
+
 /* @docs */
 $dropdown-mobile-breakpoint: vars.$desktop !default;
 $dropdown-background-background-color: hsla(
@@ -44,6 +46,10 @@ $dropdown-z: 40 !default;
     }
 
     .dropdown-item {
+        @extend a;
+
+        cursor: pointer;
+
         &.is-disabled {
             cursor: not-allowed;
             opacity: css.getVar("dropdown-disabled-opacity");
@@ -86,6 +92,7 @@ $dropdown-z: 40 !default;
         position: static;
         display: inline-block;
         padding: 0;
+        overflow: auto;
         z-index: 0;
     }
 
@@ -176,23 +183,10 @@ $dropdown-z: 40 !default;
                 overflow-y: auto;
                 z-index: calc(css.getVar("dropdown-z") + 10);
 
-                > .dropdown-item,
-                > .has-link a {
+                > .dropdown-item {
                     padding: 1rem 1.5rem;
                 }
             }
         }
     }
-
-    // polyfills for other stuff
-
-    .dropdown-menu .has-link a {
-        @extend .dropdown-item;
-        padding-right: 3rem;
-        white-space: nowrap;
-    }
-
-    .navbar-item {
-        height: 100%;
-    }
 }
diff --git a/src/assets/scss/components/_input.scss b/src/assets/scss/components/_input.scss
@@ -1,7 +1,17 @@
+@use "utils/variables" as var;
+
 .control {
     display: inline-block;
 
     &.is-expanded {
         width: 100%;
     }
+
+    > .icon {
+        @each $name, $value in var.$sizes-map {
+            &.is-#{$name} {
+                font-size: #{$value};
+            }
+        }
+    }
 }
diff --git a/src/assets/scss/components/_menu.scss b/src/assets/scss/components/_menu.scss
@@ -1 +1,13 @@
-// nothing todo here
+@use "bulma/sass/utilities/css-variables" as css;
+
+.menu {
+    .menu-item {
+        &.is-disabled {
+            @include css.register-vars(
+                (
+                    "menu-item-background-l-delta": -10%,
+                )
+            );
+        }
+    }
+}
diff --git a/src/assets/scss/components/_modal.scss b/src/assets/scss/components/_modal.scss
@@ -6,4 +6,8 @@
         max-height: 100vh;
         margin: 0;
     }
+
+    .modal-content {
+        width: auto;
+    }
 }
diff --git a/src/assets/scss/components/_select.scss b/src/assets/scss/components/_select.scss
@@ -7,20 +7,19 @@
             color: rgba(css.getVar("grey"), 0.7);
         }
 
-        &:has(+ .icon) {
-            padding-right: css.getVar("input-height");
+        &.has-icon-left {
+            padding-left: css.getVar("input-height");
         }
-    }
 
-    &.has-icons-left {
-        select {
-            padding-left: css.getVar("input-height");
+        &.has-icon-right {
+            padding-right: css.getVar("input-height");
         }
     }
 
-    &.has-icons-right {
-        select {
-            padding-right: css.getVar("input-height");
+    // remove arrow if not has arrow
+    &:has(select:not(.has-arrow) + .icon) {
+        &::after {
+            display: none;
         }
     }
 

diff --git a/src/assets/scss/components/_steps.scss b/src/assets/scss/components/_steps.scss
@@ -22,32 +22,32 @@ $steps-vertical-padding: 1em 0 !default;
 /* @docs */
 
 .steps-wrapper {
-    .steps {
-        @include css.register-vars(
-            (
-                "steps-size": #{var.$size-normal},
-                "steps-divider-height": #{$steps-divider-height},
-                "steps-details-background-color": #{$steps-details-background-color},
-            )
-        );
+    @include css.register-vars(
+        (
+            "steps-size": #{var.$size-normal},
+            "steps-divider-height": #{$steps-divider-height},
+            "steps-details-background-color": #{$steps-details-background-color},
+        )
+    );
+
+    // sizes
+    @each $name, $value in var.$sizes-map {
+        &.is-#{$name} {
+            @include css.register-vars(
+                (
+                    "steps-size": #{$value},
+                )
+            );
+        }
+    }
 
+    .steps {
         display: flex;
         flex-wrap: wrap;
         font-size: css.getVar("steps-size");
         min-height: calc(css.getVar("steps-size") * 2);
         list-style: none;
 
-        // sizes
-        @each $name, $value in var.$sizes-map {
-            &.is-#{$name} {
-                @include css.register-vars(
-                    (
-                        "steps-size": #{$value},
-                    )
-                );
-            }
-        }
-
         &.is-animated {
             .step {
                 &:not(:first-child),