feat: update theme for oruga v0.8

oruga-ui · Dec 7, 2023 · 1bf5978 · 1bf5978
2 parents 2783574 + d4b5111
commit 1bf5978
Show file tree

Hide file tree

Showing 52 changed files with 2,579 additions and 1,965 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -11,6 +11,7 @@ module.exports = {
   ],
   plugins: ["prettier"],
   rules: {
+    "@typescript-eslint/no-explicit-any": ["warn"],
     "vue/padding-line-between-blocks": ["error", "always"],
     "vue/multi-word-component-names": ["off"],
     "comma-dangle": ["error", "always-multiline"],

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -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": "file:../oruga/packages/oruga-next",
+    "@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"
   }
 }
diff --git a/src/App.vue b/src/App.vue
@@ -44,6 +44,7 @@ const components = Object.keys(paths)
 
   main {
     flex-grow: 1;
+    padding-bottom: 6rem;
     margin: 2rem;
 
     > section {

diff --git a/src/assets/scss/components/_autocomplete.scss b/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%;
-  }
 }
diff --git a/src/assets/scss/components/_carousel.scss b/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
         );
       }
     }

diff --git a/src/assets/scss/components/_checkbox.scss b/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)
         ));

diff --git a/src/assets/scss/components/_datepicker.scss b/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;