js-kompo-utils 1.0.39 → 1.0.40

package/components/VlSwipeableTabs.vue

@@ -2,7 +2,7 @@
     <div class="vlTabs"
         v-bind="$_layoutWrapperAttributes"
         v-show="!$_hidden">
-        <ul role="tablist" class="flex">
+        <ul v-if="!hasDots" role="tablist" class="flex">
             <li
                 v-for="(element, index) in elements"
                 :key="index"
@@ -18,8 +18,9 @@
                     @selectTab="selectTab(index)" />
             </li>
         </ul>
-        <div class="vlTabContent" :class="{ 'vlTabContent--swipeable': isSwipeable }">
+        <div ref="content" class="vlTabContent" :class="{ 'vlTabContent--swipeable': isSwipeable }" :style="contentStyle">
             <div v-if="isSwipeable"
+                 ref="track"
                  class="vlTabSwipeContainer"
                  :style="swipeContainerStyle"
                  @touchstart="onTouchStart"
@@ -29,7 +30,7 @@
                     v-for="(tab, index) in elements"
                     :key="index"
                     :activeTab="tabActive(index)"
-                    :collapsed="!tabActive(index)"
+                    :collapsed="hasDots ? tabCollapsedWhenIdle(index) : !tabActive(index)"
                     :swipeable="true"
                     v-bind="$_attributes(tab)"/>
             </div>
@@ -41,6 +42,31 @@
                     v-bind="$_attributes(tab)"/>
             </template>
         </div>
+        <div v-if="hasDots && elements.length > 1" class="vlTabDots">
+            <div role="tablist" class="vlTabDots__list">
+                <button
+                    v-for="(element, index) in elements"
+                    :key="index"
+                    type="button"
+                    role="tab"
+                    class="vlTabDot"
+                    :class="{ 'vlTabDot--active': tabActive(index) }"
+                    :aria-selected="tabActive(index) ? 'true' : 'false'"
+                    :aria-label="element.label"
+                    @click="selectTab(index)" />
+            </div>
+            <button
+                v-if="nextLabel"
+                v-show="activeTab < elements.length - 1"
+                type="button"
+                class="vlTabDots__next"
+                @click="moveTab(1)">
+                {{ nextLabel }}
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M8.91 19.92L15.43 13.4C16.2 12.63 16.2 11.37 15.43 10.6L8.91 4.08"/>
+                </svg>
+            </button>
+        </div>
     </div>
 </template>
 
@@ -57,6 +83,10 @@ export default {
             swipeOffset: 0,
             isSwiping: false,
             isAnimating: false,
+            // Dots mode: the page sliding out, and the content height pinned during a change
+            previousTab: null,
+            contentHeight: null,
+            heightTimer: null,
             startX: 0,
             startY: 0,
             directionLocked: false,
@@ -67,7 +97,9 @@ export default {
             return this.$_config('activeTab')
         },
         tabParamKey(){
-            return this.$_config('tabParamKey') || 'tab_number'
+            var key = this.$_config('tabParamKey')
+
+            return key === false ? null : (key || 'tab_number')
         },
         selectId(){
             return this.$_config('selectId')
@@ -78,13 +110,31 @@ export default {
         isSwipeable(){
             return !!this.$_config('swipeable')
         },
+        hasDots(){
+            return !!this.$_config('dots')
+        },
+        nextLabel(){
+            return this.$_config('nextLabel')
+        },
+        hasArrowKeys(){
+            return !!this.$_config('arrowKeys')
+        },
+        contentStyle(){
+            if (this.contentHeight === null) return {}
+
+            return {
+                height: this.contentHeight + 'px',
+                transition: 'height 0.3s ease',
+            }
+        },
         isMobile(){
             return typeof window !== 'undefined' && window.matchMedia('(max-width: 1023px)').matches
         },
         swipeContainerStyle(){
             var baseOffset = -this.activeTab * 100
 
-            if (!this.isMobile) {
+            // Dots have no labels to click, so the slide is the only cue that the page changed.
+            if (!this.isMobile && !this.hasDots) {
                 return {
                     transform: 'translateX(' + baseOffset + '%)',
                 }
@@ -120,6 +170,7 @@ export default {
                 this.isAnimating = true
             }
 
+            this.animateHeightFrom(this.activeTab)
             this.activeTab = index
             this.persistActiveTab()
             this.syncSelect()
@@ -144,6 +195,60 @@ export default {
         tabDisabled(index) {
             return this.elements[index].isDisabled
         },
+        // Only the pages on screen are expanded: the outgoing one while it slides away, neighbours while dragging.
+        tabCollapsedWhenIdle(index) {
+            if (index === this.activeTab) return false
+            if (this.isSwiping) return Math.abs(index - this.activeTab) !== 1
+
+            return !(this.isAnimating && index === this.previousTab)
+        },
+        pinHeight() {
+            if (!this.hasDots || !this.$refs.content) return
+
+            clearTimeout(this.heightTimer)
+
+            if (this.contentHeight === null) {
+                this.contentHeight = this.$refs.content.offsetHeight
+            }
+        },
+        // From the pinned height to the incoming page's own height, then back to auto.
+        animateHeightFrom(fromIndex) {
+            if (!this.hasDots || !this.$refs.content || !this.$refs.track) return
+
+            this.pinHeight()
+            this.previousTab = fromIndex
+
+            this.$nextTick(() => {
+                var tab = this.$refs.track.children[this.activeTab]
+                void this.$refs.content.offsetHeight // flush the pinned height so the change transitions
+
+                if (tab) this.contentHeight = tab.offsetHeight
+            })
+
+            this.releaseHeightLater()
+        },
+        releaseHeightLater() {
+            clearTimeout(this.heightTimer)
+
+            this.heightTimer = setTimeout(() => {
+                this.contentHeight = null
+                this.previousTab = null
+            }, 300)
+        },
+        moveTab(direction) {
+            var nextIndex = this.findNextEnabledTab(this.activeTab, direction)
+
+            if (nextIndex !== this.activeTab) {
+                this.selectTab(nextIndex)
+            }
+        },
+        onKeydown(e) {
+            if (e.altKey || e.ctrlKey || e.metaKey || !this.$el.offsetParent) return
+            if (e.target.closest && e.target.closest('input, textarea, select, [contenteditable]')) return
+
+            if (e.key === 'ArrowRight') this.moveTab(1)
+            if (e.key === 'ArrowLeft') this.moveTab(-1)
+        },
 
         // --- Swipe methods ---
 
@@ -173,6 +278,7 @@ export default {
                 }
 
                 this.directionLocked = true
+                this.pinHeight()
                 this.isSwiping = true
             }
 
@@ -217,6 +323,7 @@ export default {
                 }
 
                 if (nextIndex !== this.activeTab) {
+                    this.animateHeightFrom(this.activeTab)
                     this.activeTab = nextIndex
                     this.persistActiveTab()
                     this.syncSelect()
@@ -225,6 +332,10 @@ export default {
             }
             // else: snap back (activeTab unchanged, animation brings it back)
 
+            if (this.previousTab === null) {
+                this.releaseHeightLater()
+            }
+
             this.swipeOffset = 0
 
             setTimeout(() => {
@@ -324,6 +435,13 @@ export default {
     },
     mounted(){
         this.syncSelect()
+
+        if (this.hasArrowKeys) {
+            document.addEventListener('keydown', this.onKeydown)
+        }
+    },
+    beforeDestroy(){
+        document.removeEventListener('keydown', this.onKeydown)
     },
 }
 </script>

package/kompo-ckeditor-1.0.17/komponents/TranslatableEditor.vue

@@ -14,6 +14,9 @@
             
             :editor="editor" 
             :config="editorConfig" />
+        <div v-if="charCounter" class="vlCharCounter" :class="{ 'vlCharCounter--over': charCount > charCounter }">
+            {{ charCount }} / {{ charCounter }} {{ charCounterLabel }}
+        </div>
     </vl-form-field>
 </template>
 
@@ -23,6 +26,21 @@ import Translatable from 'vue-kompo/js/form/mixins/Translatable'
 
 export default {
     mixins: [CKEditor, Translatable],
+    computed: {
+        charCounter(){
+            return this.$_config('charCounter')
+        },
+        charCounterLabel(){
+            return this.$_config('charCounterLabel') || ''
+        },
+        // Visible text of the current language: what the user reads, not the stored HTML.
+        charCount(){
+            var div = document.createElement('div')
+            div.innerHTML = this.currentTranslation || ''
+
+            return div.textContent.length
+        },
+    },
 }
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-kompo-utils",
-  "version": "1.0.39",
+  "version": "1.0.40",
   "description": "",
   "main": "app.js",
   "scripts": {