wave-ui 3.15.0 → 3.16.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.15.0",
+  "version": "3.16.1",
   "description": "A UI framework for Vue.js 3 (and 2) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "homepage": "https://antoniandre.github.io/wave-ui",
@@ -42,27 +42,17 @@
     "vue framework",
     "ui"
   ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build --base /wave-ui/",
-    "build-types": "tsc -p ./tsconfig.json",
-    "build-bundle": "BUNDLE=true vite build && npm run build-types && mv ./dist/style.css ./dist/wave-ui.css",
-    "preview": "vite preview --base /wave-ui/",
-    "lint": "vite lint",
-    "publish-doc": "npm run build && npm run build-bundle && git add . && git commit -m 'Publish documentation on Github.' && git push && git push --tag"
-  },
   "devDependencies": {
-    "@eslint/js": "^9.9.1",
+    "@eslint/js": "^9.10.0",
     "@faker-js/faker": "^8.4.1",
     "@mdi/font": "^7.4.47",
     "@tsconfig/recommended": "^1.0.7",
     "@typescript-eslint/eslint-plugin": "^8.4.0",
     "@typescript-eslint/parser": "^8.4.0",
     "@vitejs/plugin-vue": "^5.1.3",
-    "@vue/compiler-sfc": "3.4.38",
     "autoprefixer": "^10.4.20",
     "axios": "^1.7.7",
-    "eslint": "^9.9.1",
+    "eslint": "^9.10.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.30.0",
     "eslint-plugin-n": "^17.10.2",
@@ -73,22 +63,31 @@
     "gsap": "^3.12.5",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
-    "postcss": "^8.4.44",
+    "postcss": "^8.4.45",
     "pug": "^3.0.3",
     "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.77.8",
-    "simple-syntax-highlighter": "^3.0.8",
+    "sass": "^1.78.0",
+    "simple-syntax-highlighter": "^3.0.10",
     "splitpanes": "^3.1.5",
     "typescript": "^5.5.4",
     "typescript-eslint": "^8.4.0",
-    "vite": "^5.4.2",
+    "vite": "^5.4.3",
     "vite-svg-loader": "^5.1.0",
-    "vue": "^3.4.38",
+    "vue": "^3.5.3",
     "vue-router": "^4.4.3",
     "vueperslides": "^3.5.1",
     "vuex": "^4.1.0"
   },
   "peerDependencies": {
     "vue": "^3.2.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build --base /wave-ui/",
+    "build-types": "tsc -p ./tsconfig.json",
+    "build-bundle": "BUNDLE=true vite build && npm run build-types && mv ./dist/style.css ./dist/wave-ui.css",
+    "preview": "vite preview --base /wave-ui/",
+    "lint": "vite lint",
+    "publish-doc": "npm run build && npm run build-bundle && git add . && git commit -m 'Publish documentation on Github.' && git push && git push --tag"
   }
-}
+}

package/src/wave-ui/components/w-alert.vue

@@ -2,7 +2,7 @@
 .w-alert(v-if="show" :class="classes")
   //- Add a wrapper around the content when needed.
   template(v-if="type || icon || dismiss")
-    w-icon.w-alert__icon.mr2(v-if="type || icon") {{ type ? typeIcon : icon }}
+    w-icon.w-alert__icon(v-if="type || icon") {{ type ? typeIcon : icon }}
     .w-alert__content
       slot
     w-button.w-alert__dismiss(
@@ -31,6 +31,7 @@ export default {
     iconOutside: { type: Boolean },
     plain: { type: Boolean },
     dismiss: { type: Boolean },
+    bold: { type: Boolean },
     // Types (with icon).
     success: { type: Boolean },
     info: { type: Boolean },
@@ -43,14 +44,12 @@ export default {
     lg: { type: Boolean },
     xl: { type: Boolean },
     // Borders.
-    noBorder: { type: Boolean },
+    border: { type: Boolean },
     borderLeft: { type: Boolean },
     borderRight: { type: Boolean },
     borderTop: { type: Boolean },
     borderBottom: { type: Boolean },
-    outline: { type: Boolean },
-    dark: { type: Boolean },
-    light: { type: Boolean }
+    outline: { type: Boolean }
   },
 
   emits: ['input', 'update:modelValue', 'close'],
@@ -93,14 +92,16 @@ export default {
     },
 
     hasSingleBorder () {
-      return this.borderLeft || this.borderRight ||
-        this.borderTop || this.borderBottom
+      return this.borderLeft || this.borderRight || this.borderTop || this.borderBottom
     },
 
     classes () {
+      const bgColor = this.bgColor || (this.plain && this.type)
+      const color = this.color || (!this.plain && this.type) || (!bgColor && 'primary')
+
       return {
-        [`${this.bgColor || (this.plain && this.type)}--bg w-alert--bg`]: this.bgColor || (this.plain && this.type),
-        [this.color || (!this.plain && this.type)]: this.color || (!this.plain && this.type),
+        [`${bgColor}--bg w-alert--bg`]: bgColor,
+        [color]: color,
         [`size--${this.presetSize}`]: this.presetSize,
         [`w-alert--${this.type}`]: this.type,
         'w-alert--has-icon': this.type || this.icon || this.dismiss,
@@ -109,15 +110,14 @@ export default {
         'w-alert--outline': this.outline,
         'w-alert--tile': this.tile,
         'w-alert--round': this.round,
-        'w-alert--no-border': this.noBorder || (this.plain && this.type),
         'w-alert--one-border': this.hasSingleBorder || this.iconOutside,
-        'w-alert--border-left': (!this.noBorder && this.borderLeft) || this.iconOutside,
-        'w-alert--border-right': !this.noBorder && this.borderRight,
-        'w-alert--border-top': !this.noBorder && this.borderTop,
-        'w-alert--border-bottom': !this.noBorder && this.borderBottom,
+        'w-alert--border-left': this.borderLeft || this.iconOutside,
+        'w-alert--border-right': this.borderRight,
+        'w-alert--border-top': this.borderTop,
+        'w-alert--border-bottom': this.borderBottom,
+        'w-alert--border': this.border && !this.hasSingleBorder,
         'w-alert--shadow': this.shadow,
-        'w-alert--dark': this.dark,
-        'w-alert--light': this.light
+        'w-alert--bold': this.bold
       }
     }
   },
@@ -136,19 +136,19 @@ export default {
   margin-top: 4 * $base-increment;
   margin-bottom: 4 * $base-increment;
   padding: 2 * $base-increment;
-  font-size: round(1.1 * $base-font-size);
-  font-weight: 700;
+  font-size: $base-font-size;
   border-radius: $border-radius;
-  border: 1px solid currentColor;
+  border: 0 solid currentColor;
 
   @include themeable;
 
+  &--bold {font-weight: 700;}
   &--has-icon {
     display: flex;
     align-items: center;
   }
 
-  &--outline {border-color: currentColor;}
+  &--border, &--outline {border-width: 1px;}
   &--tile {border-radius: 0;}
   &--round {
     border-radius: 99em;
@@ -156,7 +156,7 @@ export default {
     padding-right: 3 * $base-increment;
   }
   &--shadow {box-shadow: $box-shadow;}
-  &--no-border, &--one-border, &--plain {border: transparent;}
+  &--one-border, &--plain {border: transparent;}
 
   // Before for the border, after for the background color.
   // ------------------------------------------------------
@@ -224,7 +224,7 @@ export default {
     margin-right: 2 * $base-increment;
     font-size: 1.3em;
   }
-  &--has-icon &__content {flex-grow: 1;align-self: flex-start;}
+  &--has-icon &__content {flex-grow: 1;}
   @-moz-document url-prefix() {
     &--has-icon &__content {margin-top: 0.18em;}
   }

package/src/wave-ui/scss/_layout.scss

@@ -168,11 +168,11 @@
     // In all the sizes below, round(x / 2) * 2 to always have even numbers.
     // Different heights with a mix of odd and even numbers will misalign
     // when vertically centering (vertical-align or align-items center).
-    .size--xs {font-size: round(0.85 * $base-font-size);}
-    .size--sm {font-size: round(1 * $base-font-size);}
-    .size--md {font-size: round(1.1 * $base-font-size);}
-    .size--lg {font-size: round(1.4 * $base-font-size);}
-    .size--xl {font-size: round(1.65 * $base-font-size);}
+    .size--xs {font-size: round(0.8 * $base-font-size);}
+    .size--sm {font-size: round(0.9 * $base-font-size);}
+    .size--md {font-size: round(1 * $base-font-size);}
+    .size--lg {font-size: round(1.2 * $base-font-size);}
+    .size--xl {font-size: round(1.4 * $base-font-size);}
     // ----------------------------------------------
 
     // Grid system.

package/src/wave-ui/scss/_typography.scss

@@ -2,7 +2,6 @@
   .headline, .title1 {
     font-size: round(2.2 * $base-font-size);
     font-weight: 100;
-    letter-spacing: 1px;
   }
 
   .title2 {