@oruga-ui/theme-oruga 0.4.1 → 0.5.0

package/dist/scss/components/_tabs.scss

@@ -28,51 +28,224 @@ $tabs-toggle-link-active-border-color: var(--#{$prefix}primary) !default;
 $tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
 /* @docs */
 
-@mixin item {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  width: 100%;
-  margin: 0;
-  border: 1px solid transparent;
-  background-color: transparent;
-  align-items: center;
-  line-height: $tabs-link-line-height;
-  display: flex;
-  justify-content: center;
-  margin-bottom: -1px;
-  vertical-align: top;
-  cursor: pointer;
-  text-decoration: none;
-  font-size: var(--#{$prefix}tabs-font-size, $tabs-font-size);
-  border-bottom-color: var(
-    --#{$prefix}tabs-border-bottom-color,
-    $tabs-border-bottom-color
-  );
-  border-bottom-style: var(
-    --#{$prefix}tabs-border-bottom-style,
-    $tabs-border-bottom-style
-  );
-  border-bottom-width: var(
-    --#{$prefix}tabs-border-bottom-width,
-    $tabs-border-bottom-width
-  );
-  color: var(--#{$prefix}tabs-link-color, $tabs-link-color);
-  padding: var(--#{$prefix}tabs-link-padding, $tabs-link-padding);
-}
-
 .o-tabs {
-  &--fullwidth {
+  &--expanded {
     width: 100%;
 
-    .o-tabs__nav-item-wrapper {
+    .o-tabs__tab--default,
+    .o-tabs__tab--boxed,
+    .o-tabs__tab--toggle {
+      height: 100%;
+    }
+
+    .o-tabs__nav-item {
       flex-grow: 1;
       flex-shrink: 0;
     }
+  }
 
-    .o-tabs__nav-item-default,
-    .o-tabs__nav-item-boxed,
-    .o-tabs__nav-item-toggle {
-      height: 100%;
+  &__nav {
+    @include unselectable;
+
+    margin: 0;
+    padding: 0;
+    align-items: center;
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 0;
+    justify-content: flex-start;
+    // padding bottom to keep showing the border-bottom
+    padding-bottom: var(
+      --#{$prefix}tabs-border-bottom-width,
+      $tabs-border-bottom-width
+    );
+    font-size: var(--#{$prefix}tabs-font-size, $tabs-font-size);
+
+    @each $name, $value in $sizes {
+      &--#{$name} {
+        font-size: var(--#{$prefix}tabs-font-size-#{$name}, $value);
+      }
+    }
+
+    &--centered {
+      justify-content: center;
+    }
+
+    &--right {
+      justify-content: flex-end;
+    }
+  }
+
+  &__tab {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    width: 100%;
+    margin: 0;
+    border: 1px solid transparent;
+    background-color: transparent;
+    align-items: center;
+    line-height: $tabs-link-line-height;
+    display: flex;
+    justify-content: center;
+    margin-bottom: -1px;
+    vertical-align: top;
+    cursor: pointer;
+    text-decoration: none;
+    font-size: var(--#{$prefix}tabs-font-size, $tabs-font-size);
+    border-bottom-color: var(
+      --#{$prefix}tabs-border-bottom-color,
+      $tabs-border-bottom-color
+    );
+    border-bottom-style: var(
+      --#{$prefix}tabs-border-bottom-style,
+      $tabs-border-bottom-style
+    );
+    border-bottom-width: var(
+      --#{$prefix}tabs-border-bottom-width,
+      $tabs-border-bottom-width
+    );
+    color: var(--#{$prefix}tabs-link-color, $tabs-link-color);
+    padding: var(--#{$prefix}tabs-link-padding, $tabs-link-padding);
+
+    &-icon {
+      margin-right: var(--#{$prefix}tabs-icon-margin, $tabs-icon-margin);
+    }
+
+    // focus effect
+    &:focus,
+    &:focus-within {
+      box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
+      outline: 0;
+      border-radius: #{$tabs-boxed-link-radius};
+    }
+
+    &--default {
+      &.o-tabs__tab--active {
+        border-bottom-color: var(
+          --#{$prefix}tabs-link-active-border-bottom-color,
+          $tabs-link-active-border-bottom-color
+        );
+        color: var(--#{$prefix}tabs-link-active-color, $tabs-link-active-color);
+      }
+
+      &.o-tabs__tab--disabled {
+        pointer-events: none;
+        cursor: not-allowed;
+        opacity: var(--#{$prefix}tabs-disabled-opacity, $tabs-disabled-opacity);
+      }
+
+      &:hover:not(.o-tabs__tab--active) {
+        background-color: var(
+          --#{$prefix}tabs-link-hover-background-color,
+          $tabs-boxed-link-hover-background-color
+        );
+        border-bottom-color: var(
+          --#{$prefix}tabs-link-hover-border-bottom-color,
+          $tabs-boxed-link-hover-border-bottom-color
+        );
+      }
+    }
+
+    &--boxed {
+      border-radius: var(
+        --#{$prefix}tabs-border-bottom-color,
+        #{$tabs-boxed-link-radius} #{$tabs-boxed-link-radius} 0 0
+      );
+
+      &.o-tabs__tab--active {
+        color: var(--#{$prefix}tabs-link-active-color, $tabs-link-active-color);
+        background-color: var(
+          --#{$prefix}tabs-boxed-link-active-background-color,
+          $tabs-boxed-link-active-background-color
+        );
+        border-color: var(
+          --#{$prefix}tabs-boxed-link-active-border-color,
+          $tabs-boxed-link-active-border-color
+        );
+        border-bottom-color: var(
+          --#{$prefix}tabs-boxed-link-active-border-bottom-color,
+          $tabs-boxed-link-active-border-bottom-color
+        );
+      }
+
+      &.o-tabs__tab--disabled {
+        pointer-events: none;
+        cursor: not-allowed;
+        opacity: var(--#{$prefix}tabs-disabled-opacity, $tabs-disabled-opacity);
+      }
+
+      &:hover:not(.o-tabs__tab--active) {
+        background-color: var(
+          --#{$prefix}tabs-boxed-link-hover-background-color,
+          $tabs-boxed-link-hover-background-color
+        );
+      }
+    }
+
+    &--toggle {
+      border-color: var(
+        --#{$prefix}tabs-toggle-link-border-color,
+        $tabs-toggle-link-border-color
+      );
+      border-style: var(
+        --#{$prefix}tabs-toggle-link-border-style,
+        $tabs-toggle-link-border-style
+      );
+      border-width: var(
+        --#{$prefix}tabs-toggle-link-border-width,
+        $tabs-toggle-link-border-width
+      );
+
+      &.o-tabs__tab--active {
+        background-color: var(
+          --#{$prefix}tabs-toggle-link-active-background-color,
+          $tabs-toggle-link-active-background-color
+        );
+        border-color: var(
+          --#{$prefix}tabs-toggle-link-active-border-color,
+          $tabs-toggle-link-active-border-color
+        );
+        color: var(
+          --#{$prefix}tabs-toggle-link-active-color,
+          $tabs-toggle-link-active-color
+        );
+      }
+
+      &.o-tabs__tab--disabled {
+        pointer-events: none;
+        cursor: not-allowed;
+        opacity: var(--#{$prefix}tabs-disabled-opacity, $tabs-disabled-opacity);
+      }
+
+      &:hover:not(.o-tabs_tab--active) {
+        background-color: var(
+          --#{$prefix}tabs-toggle-link-hover-background-color,
+          $tabs-toggle-link-hover-background-color
+        );
+        border-color: var(
+          --#{$prefix}tabs-toggle-link-hover-border-color,
+          $tabs-toggle-link-hover-border-color
+        );
+      }
+    }
+
+    &--pills {
+      border-radius: var(
+        --#{$prefix}tabs-boxed-link-radius,
+        $tabs-boxed-link-radius
+      );
+      border-color: transparent;
+
+      &.o-tabs__tab--active {
+        background-color: var(
+          --#{$prefix}tabs-toggle-link-active-background-color,
+          $tabs-toggle-link-active-background-color
+        );
+        color: var(
+          --#{$prefix}tabs-toggle-link-active-color,
+          $tabs-toggle-link-active-color
+        );
+      }
     }
   }
 
@@ -87,7 +260,11 @@ $tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
       border-bottom: none;
     }
 
-    .o-tabs__nav-item-boxed {
+    .o-tabs__tab---default {
+      border-radius: 0;
+    }
+
+    .o-tabs__tab--boxed {
       border-bottom-color: transparent;
       border-right-color: var(
         --#{$prefix}tabs-border-bottom-color,
@@ -98,7 +275,7 @@ $tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
         #{$tabs-boxed-link-radius} 0 0 #{$tabs-boxed-link-radius}
       );
 
-      &--active {
+      &.o-tabs__tab--active {
         border-right-color: transparent;
         border-bottom-color: var(
           --#{$prefix}tabs-border-bottom-color,
@@ -111,7 +288,7 @@ $tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
   &--right {
     flex-direction: row-reverse;
 
-    .o-tabs__nav-item-boxed {
+    .o-tabs__tab--boxed {
       border-bottom-color: transparent;
       border-right-color: transparent;
       border-left-color: var(
@@ -123,7 +300,7 @@ $tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
         0 #{$tabs-boxed-link-radius} #{$tabs-boxed-link-radius} 0
       );
 
-      &--active {
+      &.o-tabs__tab--active {
         border-left-color: transparent;
         border-right-color: var(
           --#{$prefix}tabs-border-bottom-color,
@@ -137,194 +314,20 @@ $tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
     }
   }
 
-  &__nav {
-    @include unselectable;
-    margin: 0;
-    padding: 0;
-    align-items: center;
-    display: flex;
-    flex-grow: 1;
-    flex-shrink: 0;
-    justify-content: flex-start;
-    // padding bottom to keep showing the border-bottom
-    padding-bottom: var(
-      --#{$prefix}tabs-border-bottom-width,
-      $tabs-border-bottom-width
-    );
-    font-size: var(--#{$prefix}tabs-font-size, $tabs-font-size);
-
-    @each $name, $value in $sizes {
-      &--#{$name} {
-        font-size: var(--#{$prefix}tabs-font-size-#{$name}, $value);
-      }
-    }
-
-    &--centered {
-      justify-content: center;
-    }
-
-    &--right {
-      justify-content: flex-end;
-    }
-
-    &-item {
-      &-icon {
-        margin-right: var(--#{$prefix}tabs-icon-margin, $tabs-icon-margin);
-      }
-
-      // focus effect
-      &:focus,
-      &:focus-within {
-        box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
-        outline: 0;
-        border-radius: #{$tabs-boxed-link-radius};
-      }
-
-      &-default {
-        @include item;
-
-        &--active {
-          border-bottom-color: var(
-            --#{$prefix}tabs-link-active-border-bottom-color,
-            $tabs-link-active-border-bottom-color
-          );
-          color: var(
-            --#{$prefix}tabs-link-active-color,
-            $tabs-link-active-color
-          );
-        }
-
-        &--disabled {
-          pointer-events: none;
-          cursor: not-allowed;
-          opacity: var(
-            --#{$prefix}tabs-disabled-opacity,
-            $tabs-disabled-opacity
-          );
-        }
-
-        &:hover:not(.o-tabs__nav-item-default--active) {
-          background-color: var(
-            --#{$prefix}tabs-link-hover-background-color,
-            $tabs-boxed-link-hover-background-color
-          );
-          border-bottom-color: var(
-            --#{$prefix}tabs-link-hover-border-bottom-color,
-            $tabs-boxed-link-hover-border-bottom-color
-          );
-        }
-      }
-
-      &-boxed {
-        @include item;
-        border-bottom-color: transparent;
-        border-radius: var(
-          --#{$prefix}tabs-border-bottom-color,
-          #{$tabs-boxed-link-radius} #{$tabs-boxed-link-radius} 0 0
-        );
-
-        &--active {
-          color: var(
-            --#{$prefix}tabs-link-active-color,
-            $tabs-link-active-color
-          );
-          background-color: var(
-            --#{$prefix}tabs-boxed-link-active-background-color,
-            $tabs-boxed-link-active-background-color
-          );
-          border-color: var(
-            --#{$prefix}tabs-boxed-link-active-border-color,
-            $tabs-boxed-link-active-border-color
-          );
-          border-bottom-color: var(
-            --#{$prefix}tabs-boxed-link-active-border-bottom-color,
-            $tabs-boxed-link-active-border-bottom-color
-          );
-        }
-
-        &--disabled {
-          pointer-events: none;
-          cursor: not-allowed;
-          opacity: var(
-            --#{$prefix}tabs-disabled-opacity,
-            $tabs-disabled-opacity
-          );
-        }
-
-        &:hover:not(.o-tabs__nav-item-boxed--active) {
-          background-color: var(
-            --#{$prefix}tabs-boxed-link-hover-background-color,
-            $tabs-boxed-link-hover-background-color
-          );
-        }
-      }
-
-      &-toggle {
-        @include item;
-        position: relative;
-        border-color: var(
-          --#{$prefix}tabs-toggle-link-border-color,
-          $tabs-toggle-link-border-color
-        );
-        border-style: var(
-          --#{$prefix}tabs-toggle-link-border-style,
-          $tabs-toggle-link-border-style
-        );
-        border-width: var(
-          --#{$prefix}tabs-toggle-link-border-width,
-          $tabs-toggle-link-border-width
-        );
-        margin-bottom: 0;
-
-        &--active {
-          background-color: var(
-            --#{$prefix}tabs-toggle-link-active-background-color,
-            $tabs-toggle-link-active-background-color
-          );
-          border-color: var(
-            --#{$prefix}tabs-toggle-link-active-border-color,
-            $tabs-toggle-link-active-border-color
-          );
-          color: var(
-            --#{$prefix}tabs-toggle-link-active-color,
-            $tabs-toggle-link-active-color
-          );
-        }
-
-        &--disabled {
-          pointer-events: none;
-          cursor: not-allowed;
-          opacity: var(
-            --#{$prefix}tabs-disabled-opacity,
-            $tabs-disabled-opacity
-          );
-        }
-
-        &:hover:not(.o-tabs__nav-item-toggle--active) {
-          background-color: var(
-            --#{$prefix}tabs-toggle-link-hover-background-color,
-            $tabs-toggle-link-hover-background-color
-          );
-          border-color: var(
-            --#{$prefix}tabs-toggle-link-hover-border-color,
-            $tabs-toggle-link-hover-border-color
-          );
-        }
-      }
-    }
-  }
-
   &__content {
     position: relative;
     overflow: visible;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    padding: var(--#{$prefix}tabs-content-padding, $tabs-content-padding);
 
     &--transitioning {
       overflow: hidden;
     }
+
+    &:not(:has(.o-tabs__panel:empty)) {
+      padding: var(--#{$prefix}tabs-content-padding, $tabs-content-padding);
+    }
   }
 
   &:not(:last-child) {

package/dist/scss/utils/_variables.scss

@@ -42,8 +42,8 @@ $base-disabled-opacity: 0.5 !default;
 
 $control-border-width: 1px !default;
 $control-height: 2.25em !default;
-$control-padding-vertical: calc(0.375em - #{$control-border-width});
-$control-padding-horizontal: calc(0.625em - #{$control-border-width});
+$control-padding-vertical: calc(0.25em - #{$control-border-width});
+$control-padding-horizontal: calc(1em - #{$control-border-width});
 $control-box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.1);
 
 // Sizes

package/dist/theme.js

@@ -1,8 +1,2 @@
-(function (factory) {
-	typeof define === 'function' && define.amd ? define(factory) :
-	factory();
-})((function () { 'use strict';
+/*! Oruga Default Theme v0.5.0 | MIT License | github.com/oruga-ui/theme-oruga */
 
-
-
-}));

package/package.json

@@ -1,19 +1,18 @@
 {
   "name": "@oruga-ui/theme-oruga",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Default theme for Oruga",
   "license": "MIT",
   "type": "module",
   "main": "dist/theme.js",
   "module": "dist/theme.js",
-  "unpkg": "dist/theme.min.js",
+  "unpkg": "dist/theme.js",
   "sideEffects": [
     "*.css",
     "*.scss"
   ],
   "files": [
-    "dist",
-    "src/assets"
+    "dist"
   ],
   "repository": {
     "type": "git",
@@ -26,44 +25,38 @@
     "dev": "vite --force",
     "serve": "vite preview",
     "build": "vue-tsc --noEmit && vite build",
-    "build:lib": "rimraf dist && npm run build:config && npm run build:scss",
-    "build:config": "rollup -c",
-    "build:scss": "sass --no-charset ./src/assets/scss/oruga-build.scss | node ./build/banner.js > dist/oruga.css && cleancss -o dist/oruga.min.css dist/oruga.css",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "lint": "eslint . --fix --quiet",
     "lint:style": "stylelint **/*.{css,scss} --fix --ignore-path .gitignore",
     "update": "ncu -u"
   },
+  "peerDependencies": {
+    "@oruga-ui/oruga-next": "0.9.0"
+  },
   "devDependencies": {
-    "@oruga-ui/examples": "^0.9.0-pre.1",
-    "@oruga-ui/oruga-next": "^0.9.0-pre.1",
-    "@rollup/plugin-typescript": "11.1.6",
-    "@vitejs/plugin-vue": "5.1.1",
-    "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^13.0.0",
+    "@oruga-ui/examples": "0.9.0",
+    "@oruga-ui/oruga-next": "0.9.0",
+    "@vitejs/plugin-vue": "5.1.4",
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "@vue/eslint-config-typescript": "^14.1.3",
     "@vue/tsconfig": "^0.5.1",
-    "autoprefixer": "10.4.19",
-    "clean-css-cli": "^5.6.3",
-    "core-js": "3.37.1",
-    "eslint": "^8.57.0",
+    "core-js": "3.39.0",
+    "eslint": "^9.14.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-vue": "^9.27.0",
-    "npm-check-updates": "^16.14.20",
-    "postcss": "8.4.40",
+    "eslint-plugin-vue": "^9.30.0",
+    "npm-check-updates": "^17.1.10",
     "prettier": "^3.3.3",
-    "rimraf": "6.0.1",
-    "rollup": "^4.19.1",
-    "rollup-plugin-copy": "3.5.0",
-    "rollup-plugin-sass": "1.13.1",
-    "sass": "1.77.8",
-    "stylelint": "^16.8.1",
+    "sass": "1.80.6",
+    "stylelint": "^16.10.0",
     "stylelint-config-recommended": "^14.0.1",
     "stylelint-config-recommended-scss": "^14.1.0",
     "stylelint-prettier": "^5.0.2",
-    "stylelint-scss": "^6.4.1",
-    "typescript": "5.5.4",
-    "vite": "^5.3.5",
-    "vue": "^3.4.34",
-    "vue-router": "4.4.0",
-    "vue-tsc": "^2.0.29"   
+    "stylelint-scss": "^6.8.1",
+    "typescript": "5.6.3",
+    "vite": "^5.4.10",
+    "vite-plugin-banner": "^0.8.0",
+    "vite-plugin-static-copy": "^2.0.0",
+    "vue": "^3.5.12",
+    "vue-router": "4.4.5",
+    "vue-tsc": "^2.1.10"
   }
 }