wave-ui 3.0.5 → 3.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.0.5",
+  "version": "3.1.1",
   "description": "An emerging UI framework for Vue.js (2 & 3) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "homepage": "https://antoniandre.github.io/wave-ui",
@@ -49,24 +49,25 @@
     "lint": "vite lint"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.0",
-    "@babel/eslint-parser": "^7.19.1",
+    "@babel/core": "^7.21.3",
+    "@babel/eslint-parser": "^7.21.3",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@faker-js/faker": "^7.6.0",
     "@mdi/font": "^5.9.55",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vue/compiler-sfc": "3.2.45",
-    "autoprefixer": "^10.4.13",
-    "axios": "^0.25.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^9.9.0",
+    "autoprefixer": "^10.4.14",
+    "axios": "^1.3.4",
+    "eslint": "^8.36.0",
+    "eslint-plugin-vue": "^9.10.0",
     "font-awesome": "^4.7.0",
-    "gsap": "^3.11.4",
+    "gsap": "^3.11.5",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
     "postcss": "^8.4.21",
     "pug": "^3.0.2",
     "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.58.3",
+    "sass": "^1.60.0",
     "simple-syntax-highlighter": "^2.2.5",
     "splitpanes": "^3.1.5",
     "standard": "^17.0.0",

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

@@ -119,7 +119,9 @@ component(
 
 <script>
 /**
- * @todo Share the common parts between w-input, w-textarea & w-select.
+ * @todo
+ * - Share the common parts between w-input, w-textarea & w-select.
+ * - option to fit to the content using contenteditable div
  **/
 
 import FormElementMixin from '../mixins/form-elements'
@@ -581,6 +583,7 @@ $inactive-color: #777;
     top: 50%;
     left: 0;
     padding-left: 2 * $base-increment;
+    white-space: nowrap;
     transform: translateY(-50%);
     pointer-events: none;
 

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

@@ -40,21 +40,19 @@ component(
         .w-select__selection-slot(v-if="$slots.selection")
           //- inputValue is always an array.
           slot(name="selection" :item="multiple ? inputValue : inputValue[0]")
-        input.w-select__selection(
+        .w-select__selection(
           ref="selection-input"
-          type="text"
-          :value="$slots.selection ? '' : selectionString"
+          :contenteditable="isDisabled || isReadonly ? 'false' : 'true'"
           @focus="!isDisabled && !isReadonly && onFocus($event)"
           @blur="onBlur"
           @keydown="!isDisabled && !isReadonly && onKeydown($event)"
           :id="`w-select--${_.uid}`"
-          :placeholder="(!$slots.selection && placeholder) || null"
+          :class="{ 'w-select__selection--placeholder': !$slots.selection && !selectionString && placeholder }"
           :disabled="isDisabled || null"
           readonly
           aria-readonly="true"
-          :required="required || null"
           :tabindex="tabindex || null"
-          autocomplete="off")
+          v-html="$slots.selection ? '' : selectionString || placeholder")
         //- For standard HTML form submission.
         input(
           v-for="(val, i) in (inputValue.length ? inputValue : [{}])"
@@ -149,7 +147,8 @@ export default {
     noUnselect: { type: Boolean },
     menuProps: { type: Object }, // Allow passing down an object of props to the w-menu component.
     dark: { type: Boolean },
-    light: { type: Boolean }
+    light: { type: Boolean },
+    fitToContent: { type: Boolean }
     // Props from mixin: name, disabled, readonly, required, tabindex, validators.
     // Computed from mixin: inputName, isDisabled & isReadonly.
   },
@@ -200,6 +199,7 @@ export default {
         'w-select--dark': this.dark,
         'w-select--light': this.light,
         'w-select--disabled': this.isDisabled,
+        'w-select--fit-to-content': this.fitToContent,
         'w-select--readonly': this.isReadonly,
         [`w-select--${this.hasValue ? 'filled' : 'empty'}`]: true,
         'w-select--focused': (this.isFocused || this.showMenu) && !this.isReadonly,
@@ -230,6 +230,7 @@ export default {
     onFocus (e) {
       this.isFocused = true
       this.$emit('focus', e)
+      return false
     },
 
     onBlur (e) {
@@ -238,6 +239,11 @@ export default {
     },
 
     onKeydown (e) {
+      // Forbid typing in contenteditable element.
+      // Note: using contenteditable rather than input in order to be able to fit the select list
+      // to its content with CSS. Only contenteditable divs/non-interactive elements can react to focus/blur ).
+      e.preventDefault()
+
       if ([13, 27, 38, 40].includes(e.keyCode)) e.preventDefault()
 
       if (e.keyCode === 27) this.closeMenu() // Escape.
@@ -300,7 +306,6 @@ export default {
     // Also accept objects if returnObject is true.
     // In any case, always end up with an array.
     checkSelection (items) {
-      console.log(items)
       items = Array.isArray(items) ? items : (items !== undefined ? [items] : [])
       // `selectItems` items always have a value.
       const allValues = this.selectItems.map(item => item.value)
@@ -368,6 +373,11 @@ export default {
     -webkit-tap-highlight-color: transparent;
   }
 
+  &--fit-to-content {
+    display: inline-flex;
+    flex-grow: 0;
+  }
+
   // Selection wrapper.
   // ------------------------------------------------------
   &__selection-wrap {
@@ -423,21 +433,21 @@ export default {
     }
   }
 
-  // selection (input) field.
+  // Selection (contenteditable) field.
+  // Using contenteditable instead of readonly input in order to be able to fit to content.
+  // Then disable typing and hide caret.
   // ------------------------------------------------------
   &__selection {
     width: 100%;
     height: 100%;
     min-height: inherit;
-    font: inherit;
-    color: inherit;
-    text-align: inherit;
-    background: none;
-    border: none;
     outline: none;
     padding-left: 2 * $base-increment;
     padding-right: 2 * $base-increment;
+    display: flex;
+    align-items: center;
     cursor: pointer;
+    caret-color: transparent;
 
     .w-select__selection-slot + & {
       position: absolute;
@@ -463,9 +473,9 @@ export default {
       -webkit-tap-highlight-color: transparent;
     }
 
-    .w-select--disabled input::placeholder {color: inherit;}
-
     .w-select--readonly & {cursor: auto;}
+
+    &--placeholder {color: #888;}
   }
 
   &__selection-slot {
@@ -529,6 +539,7 @@ export default {
     top: 50%;
     left: 0;
     right: 0;
+    white-space: nowrap;
     // Use margin instead of padding as the scale transformation below decreases the real padding
     // size and misaligns the label.
     margin-left: 2 * $base-increment;

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

@@ -59,7 +59,7 @@
 
       //- Normal rows.
       template(v-if="tableItems.length && loading !== true")
-        template(v-for="(item, i) in sortedItems" :key="i")
+        template(v-for="(item, i) in paginatedItems" :key="i")
           //- Fully custom tr (`item` slot).
           slot(
             v-if="$slots.item"
@@ -136,26 +136,41 @@
       tr.w-table__row.w-table__pagination-wrap(v-if="pagination && paginationConfig")
         td.w-table__cell(:colspan="headers.length")
           .w-table__pagination
-            w-select.pagination-number.pagination-number--items-per-page(
-              v-if="paginationConfig.itemsPerPageOptions"
-              v-model="paginationConfig.itemsPerPage"
-              :items="paginationConfig.itemsPerPageOptions"
-              label-position="left"
-              label="Items per page"
-              label-color="inherit")
-            span.pagination-number.pagination-number--results.
-              {{ paginationConfig.start }}-{{ paginationConfig.end }} of {{ paginationConfig.total }}
-            .pagination-arrows
-              w-button.pagination-arrow.pagination-arrow--prev(
-                @click="paginationConfig.page--"
-                icon="wi-chevron-left"
-                text
-                lg)
-              w-button.pagination-arrow.pagination-arrow--next(
-                @click="paginationConfig.page++"
-                icon="wi-chevron-right"
-                text
-                lg)
+            | {{ paginationConfig }}
+            slot(
+              name="pagination"
+              :range="`${paginationConfig.start}-${paginationConfig.end} of ${paginationConfig.total}`"
+              :total="paginationConfig.total")
+              w-select.pagination-number.pagination-number--items-per-page(
+                v-if="paginationConfig.itemsPerPageOptions"
+                v-model="paginationConfig.itemsPerPage"
+                @input="updatePaginationConfig"
+                :items="paginationConfig.itemsPerPageOptions"
+                label-position="left"
+                label="Items per page"
+                label-color="inherit")
+              .pagination-arrows
+                w-button.pagination-arrow.pagination-arrow--prev(
+                  @click="goToPage('-1')"
+                  :disabled="paginationConfig.page <= 1"
+                  icon="wi-chevron-left"
+                  text
+                  lg)
+                w-button.pagination-arrow.pagination-arrow--prev(
+                  v-for="i in paginationConfig.pagesCount"
+                  :key="i"
+                  @click="goToPage(i)"
+                  round
+                  text
+                  lg) {{ i }}
+                w-button.pagination-arrow.pagination-arrow--next(
+                  @click="goToPage('+1')"
+                  :disabled="paginationConfig.page >= paginationConfig.pagesCount"
+                  icon="wi-chevron-right"
+                  text
+                  lg)
+              span.pagination-number.pagination-number--results.
+                {{ paginationConfig.start }}-{{ paginationConfig.end }} of {{ paginationConfig.total }}
 </template>
 
 <script>
@@ -339,6 +354,10 @@ export default {
     // Faster lookup than array.includes(uid) and also cached.
     expandedRowsByUid () {
       return this.expandedRowsInternal.reduce((obj, uid) => (obj[uid] = true) && obj, {})
+    },
+
+    paginatedItems () {
+      return this.sortedItems.slice(this.paginationConfig.start, this.paginationConfig.end)
     }
   },
 
@@ -535,17 +554,32 @@ export default {
     },
 
     updatePaginationConfig () {
-      const itemsPerPage = this.pagination?.itemsPerPage || 10
+      const itemsPerPage = this.pagination?.itemsPerPage || 20
+      const itemsPerPageOptions = this.pagination?.itemsPerPageOptions || [20, 100, { label: 'All', value: 0 }]
       const total = this.pagination?.total || this.items.length
+      const itemsPerPageOrTotal = itemsPerPage || total
       const page = this.pagination?.page || 1
       this.paginationConfig = {
         itemsPerPage,
-        itemsPerPageOptions: this.pagination?.itemsPerPageOptions || [{ label: '10', value: 10 }, { label: '100', value: 100 }, { label: 'All', value: 0 }],
+        itemsPerPageOptions: itemsPerPageOptions.map(item => ({
+          label: ['string', 'number'].includes(typeof item) ? item.toString() : (item.label || item.value),
+          value: ['string', 'number'].includes(typeof item) ? ~~item : (item.value ?? item.label)
+        })),
         page,
         start: this.pagination?.start || 1,
-        end: total >= (itemsPerPage * page) ? (itemsPerPage * page) : (total % (itemsPerPage * page)),
-        total
+        end: total >= (itemsPerPageOrTotal * page) ? (itemsPerPageOrTotal * page) : (total % (itemsPerPageOrTotal * page)),
+        total,
+        pagesCount: Math.ceil(total / itemsPerPageOrTotal)
       }
+    },
+
+    goToPage (page) {
+      if (['-1', '+1'].includes(page)) this.paginationConfig.page += +page
+      else this.paginationConfig.page = page
+      const { itemsPerPage } = this.paginationConfig
+      this.paginationConfig.page = Math.max(1, this.paginationConfig.page)
+      this.paginationConfig.start = (itemsPerPage * (this.paginationConfig.page - 1)) + 1
+      this.paginationConfig.end = (this.paginationConfig.start - 1) + itemsPerPage
     }
   },
 
@@ -581,6 +615,11 @@ export default {
 
     selectedRows (array) {
       this.selectedRowsInternal = Array.isArray(array) && array.length ? this.selectedRows : []
+    },
+
+    pagination: {
+      handler () { this.updatePaginationConfig() },
+      deep: true
     }
   }
 }
@@ -800,27 +839,31 @@ $tr-border-top: 1px;
     }
   }
 
+  // Pagination.
+  // ------------------------------------------------------
+  &__pagination-wrap {
+    border-top: $border;
+  }
   &__pagination {
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    padding-top: $base-increment;
-    padding-bottom: $base-increment;
 
     .pagination-number--items-per-page {
-      margin-right: 6 * $base-increment;
       flex-grow: 0;
       text-align: right;
     }
+
+    .pagination-arrows {
+      margin-left: 3 * $base-increment;
+      margin-right: 3 * $base-increment;
+    }
+
     .pagination-number--of {
       margin-left: $base-increment;
       margin-right: $base-increment;
     }
     .w-select__selection {max-width: 60px;}
-
-    .pagination-arrows {
-      margin-left: 6 * $base-increment;
-    }
   }
 }
 

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

@@ -355,6 +355,7 @@ $inactive-color: #777;
     top: $base-increment;
     left: 0;
     padding-left: 2 * $base-increment;
+    white-space: nowrap;
     transform: translateY(0%);
     pointer-events: none;
 

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

@@ -48,7 +48,7 @@ $base-font-size: 14px !default; // Must be a px unit.
 $base-increment: round(divide($base-font-size, 4)) !default;
 $layout-padding: $base-increment * 4 !default; // Applied on the .content-wrap tag.
 $border-radius: 3px !default;
-$border-color: rgba(var(--w-contrast-bg-color-rgb), 0.15) !default;
+$border-color: rgba(var(--w-contrast-bg-color-rgb), 0.12) !default;
 $border: 1px solid $border-color !default;
 $transition-duration: 0.25s !default;
 $fast-transition-duration: 0.15s !default;

package/src/wave-ui/utils/dynamic-css.js

@@ -275,8 +275,10 @@ export const injectColorsCSSInDOM = themeColors => {
     css.id = 'wave-ui-colors'
     css.innerHTML = generateColors(themeColors)
 
-    const firstStyle = document.head.querySelectorAll('style,link[rel="stylesheet"]')[0]
-    if (firstStyle) firstStyle.before(css)
+    // Keep the injected colors at the end of other styles.
+    // This should have priority over the user rules that have the same specificity.
+    const styles = document.head.querySelectorAll('style,link[rel="stylesheet"]')
+    if (styles.length) styles[styles.length - 1].after(css)
     else document.head.appendChild(css)
   }
 }