js-kompo-utils 1.0.0

package/components/VlQrCodeScanner.vue

@@ -0,0 +1,91 @@
+<template>
+    <div v-if="isVisible">
+
+        <p class="px-4 py-2 rounded-xl my-4" :class="resultClass" v-html="result"/>
+
+        <qrcode-stream :camera="camera" @decode="onDecode" @init="onInit" />
+
+        <!--<p class="p-4 rounded-xl my-4" :class="resultClass" v-html="result"/>-->
+
+    </div>
+</template>
+
+<script>
+
+import Trigger from 'vue-kompo/js/form/mixins/Trigger'
+
+export default {
+    mixins: [Trigger],
+
+    data () {
+        return {
+            result: '',
+            resultClass: '',
+            error: '',
+            camera: 'auto',
+            isVisible: false,
+        }
+    },
+
+    mounted(){
+        setTimeout(() => {
+            this.isVisible = true
+            window.isCameraActive = true
+            setInterval(() => this.checkCameraActive(), 2000)
+        }, 1000)
+    },
+
+    methods: {
+        checkCameraActive(){
+            this.isVisible = window.isCameraActive
+        },
+        onDecode (qrCode) {
+            axios({
+                url: this.$_config('checkRoute')+'/'+qrCode,
+                method: 'POST',
+            }).then(r => {
+                this.$kompo.vlFillModal(r, 'some-kompo-id')
+                this.camera = 'off'
+                setTimeout(() => this.camera = 'auto', 1000)
+            })
+        },
+
+        async onInit (promise) {
+            try {
+                await promise
+
+                this.result = this.$_config('readyMsg');
+                this.resultClass = 'bg-level5 text-white';
+
+            } catch (error) {
+                if (error.name === 'NotAllowedError') {
+                    this.error = "ERROR: you need to grant camera access permission"
+                } else if (error.name === 'NotFoundError') {
+                    this.error = "ERROR: no camera on this device"
+                } else if (error.name === 'NotSupportedError') {
+                    his.error = "ERROR: secure context required (HTTPS, localhost)"
+                } else if (error.name === 'NotReadableError') {
+                    this.error = "ERROR: is the camera already in use?"
+                } else if (error.name === 'OverconstrainedError') {
+                    this.error = "ERROR: installed cameras are not suitable"
+                } else if (error.name === 'StreamApiNotSupportedError') {
+                    this.error = "ERROR: Stream API is not supported in this browser"
+                } else if (error.name === 'InsecureContextError') {
+                    this.error = 'ERROR: Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.';
+                } else {
+                    this.error = `ERROR: Camera error (${error.name})`;
+                }
+                this.resultClass = 'bg-danger text-white';
+                this.result = this.error;
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+.error {
+    font-weight: bold;
+    color: red;
+}
+</style>

package/components/VlSwipeableTab.vue

@@ -0,0 +1,35 @@
+<template>
+    <section
+        v-if="!isDisabled"
+        :aria-hidden="!activeTab"
+        v-show="swipeable || activeTab"
+        v-bind="$_layoutWrapperAttributes"
+        class="vlTab"
+        :class="{ 'vlTab--swipeable': swipeable, 'vlTab--active': activeTab, 'vlTab--collapsed': collapsed }"
+        role="tabpanel">
+
+        <component
+            v-bind="$_attributes(tab)"
+            v-for="(tab,index) in elements"
+            :key="index" />
+
+    </section>
+</template>
+
+<script>
+import Layout from 'vue-kompo/js/form/mixins/Layout'
+
+export default {
+    mixins: [Layout],
+    props: {
+        activeTab: { type: Boolean, required: true },
+        swipeable: { type: Boolean, default: false },
+        collapsed: { type: Boolean, default: false },
+    },
+    computed: {
+        isDisabled(){
+            return this.$_config('tabDisabled')
+        },
+    },
+}
+</script>

package/components/VlSwipeableTabs.vue

@@ -0,0 +1,325 @@
+<template>
+    <div class="vlTabs"
+        v-bind="$_layoutWrapperAttributes"
+        v-show="!$_hidden">
+        <ul role="tablist" class="flex">
+            <li
+                v-for="(element, index) in elements"
+                :key="index"
+                role="presentation"
+            >
+                <vl-form-tab-label
+                    :activeTab="tabActive(index)"
+                    :selectedClass="$_selectedClass"
+                    :unselectedClass="$_unselectedClass"
+                    :commonClass="$_commonClass"
+                    :disabledClass="disabledClass"
+                    :vkompo="element"
+                    @selectTab="selectTab(index)" />
+            </li>
+        </ul>
+        <div class="vlTabContent" :class="{ 'vlTabContent--swipeable': isSwipeable }">
+            <div v-if="isSwipeable"
+                 class="vlTabSwipeContainer"
+                 :style="swipeContainerStyle"
+                 @touchstart="onTouchStart"
+                 @touchmove="onTouchMove"
+                 @touchend="onTouchEnd">
+                <component
+                    v-for="(tab, index) in elements"
+                    :key="index"
+                    :activeTab="tabActive(index)"
+                    :collapsed="!tabActive(index)"
+                    :swipeable="true"
+                    v-bind="$_attributes(tab)"/>
+            </div>
+            <template v-else>
+                <component
+                    v-for="(tab,index) in elements"
+                    :key="index"
+                    :activeTab="tabActive(index)"
+                    v-bind="$_attributes(tab)"/>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script>
+import Layout from 'vue-kompo/js/form/mixins/Layout'
+import HasSelectedClass from 'vue-kompo/js/form/mixins/HasSelectedClass'
+
+export default {
+    mixins: [Layout, HasSelectedClass],
+    data(){
+        return {
+            activeTab: 0,
+            // Swipe state
+            swipeOffset: 0,
+            isSwiping: false,
+            isAnimating: false,
+            startX: 0,
+            startY: 0,
+            directionLocked: false,
+        }
+    },
+    computed: {
+        defaultActiveTab(){
+            return this.$_config('activeTab')
+        },
+        tabParamKey(){
+            return 'tab_number'
+        },
+        selectId(){
+            return this.$_config('selectId')
+        },
+        disabledClass(){
+            return this.$_config('disabledClass')
+        },
+        isSwipeable(){
+            return !!this.$_config('swipeable')
+        },
+        isMobile(){
+            return typeof window !== 'undefined' && window.matchMedia('(max-width: 1023px)').matches
+        },
+        swipeContainerStyle(){
+            var baseOffset = -this.activeTab * 100
+
+            if (!this.isMobile) {
+                return {
+                    transform: 'translateX(' + baseOffset + '%)',
+                }
+            }
+
+            if (this.isSwiping) {
+                return {
+                    transform: 'translateX(calc(' + baseOffset + '% + ' + this.swipeOffset + 'px))',
+                    transition: 'none',
+                }
+            }
+
+            return {
+                transform: 'translateX(' + baseOffset + '%)',
+                transition: this.isAnimating ? 'transform 0.3s ease' : 'none',
+            }
+        },
+    },
+    methods:{
+        $_validate(errors) {
+            Layout.methods.$_validate.call(this, errors)
+            this.elements.forEach( (tab, index) => {
+                var errors = []
+                tab.$_getErrors(errors)
+                if(errors.length)
+                    this.activeTab = index
+            })
+        },
+        selectTab(index) {
+            if (this.activeTab === index) return
+
+            if (this.isSwipeable) {
+                this.isAnimating = true
+            }
+
+            this.activeTab = index
+            this.persistActiveTab()
+            this.syncSelect()
+
+            this.$_runOwnInteractions('click')
+
+            if (this.isSwipeable) {
+                setTimeout(() => {
+                    this.isAnimating = false
+                }, 300)
+            }
+        },
+        tabActive(index) {
+            return index == this.activeTab
+        },
+        tabCollapsed(index) {
+            if (!this.isMobile) return false
+            if (index === this.activeTab) return false
+            if (this.isSwiping || this.isAnimating) return false
+            return true
+        },
+        tabDisabled(index) {
+            return this.elements[index].isDisabled
+        },
+
+        // --- Swipe methods ---
+
+        beginSwipe(startX, startY) {
+            this.startX = startX
+            this.startY = startY
+            this.swipeOffset = 0
+            this.isSwiping = false
+            this.directionLocked = false
+        },
+
+        updateSwipe(clientX, clientY, preventDefault) {
+            if (this.isAnimating) return
+
+            var deltaX = clientX - this.startX
+            var deltaY = clientY - this.startY
+
+            // Lock direction on first significant movement
+            if (!this.directionLocked) {
+                if (Math.abs(deltaX) < 5 && Math.abs(deltaY) < 5) return
+
+                if (Math.abs(deltaY) > Math.abs(deltaX)) {
+                    // Vertical scroll — do nothing, let browser handle it
+                    this.directionLocked = true
+                    this.isSwiping = false
+                    return
+                }
+
+                this.directionLocked = true
+                this.isSwiping = true
+            }
+
+            if (!this.isSwiping) return
+
+            if (preventDefault)
+                preventDefault()
+
+            // Boundary resistance: dampen swipe at edges
+            if (this.activeTab === 0 && deltaX > 0) {
+                deltaX = deltaX * 0.3
+            } else if (this.activeTab === this.elements.length - 1 && deltaX < 0) {
+                deltaX = deltaX * 0.3
+            }
+
+            this.swipeOffset = deltaX
+        },
+
+        completeSwipe() {
+            if (!this.isSwiping) {
+                this.directionLocked = false
+                return
+            }
+
+            var container = this.$el.querySelector('.vlTabContent')
+            var containerWidth = container ? container.offsetWidth : 1
+            var swipePercent = Math.abs(this.swipeOffset) / containerWidth
+            var swipedLeft = this.swipeOffset < 0
+            var swipedRight = this.swipeOffset > 0
+
+            this.isSwiping = false
+            this.isAnimating = true
+
+            if (swipePercent >= 0.4) {
+                // Find next valid (non-disabled) tab
+                var nextIndex = this.activeTab
+
+                if (swipedLeft && this.activeTab < this.elements.length - 1) {
+                    nextIndex = this.findNextEnabledTab(this.activeTab, 1)
+                } else if (swipedRight && this.activeTab > 0) {
+                    nextIndex = this.findNextEnabledTab(this.activeTab, -1)
+                }
+
+                if (nextIndex !== this.activeTab) {
+                    this.activeTab = nextIndex
+                    this.persistActiveTab()
+                    this.syncSelect()
+                    this.$_runOwnInteractions('click')
+                }
+            }
+            // else: snap back (activeTab unchanged, animation brings it back)
+
+            this.swipeOffset = 0
+
+            setTimeout(() => {
+                this.isAnimating = false
+            }, 300)
+        },
+
+        onTouchStart(e) {
+            if (this.isAnimating) return
+
+            var touch = e.touches[0]
+            this.beginSwipe(touch.clientX, touch.clientY)
+        },
+
+        onTouchMove(e) {
+            var touch = e.touches[0]
+            this.updateSwipe(touch.clientX, touch.clientY, () => e.preventDefault())
+        },
+
+        onTouchEnd() {
+            this.completeSwipe()
+        },
+
+        findNextEnabledTab(fromIndex, direction) {
+            var nextIndex = fromIndex + direction
+
+            while (nextIndex >= 0 && nextIndex < this.elements.length) {
+                if (!this.elements[nextIndex].isDisabled) {
+                    return nextIndex
+                }
+                nextIndex += direction
+            }
+
+            return fromIndex // No valid tab found, stay put
+        },
+
+        persistActiveTab() {
+            if (!this.tabParamKey || typeof window === 'undefined') return
+
+            var url = new URL(window.location.href)
+            url.searchParams.set(this.tabParamKey, this.activeTab)
+            window.history.replaceState({}, '', url.toString())
+        },
+
+        getPersistedTab() {
+            if (!this.tabParamKey || typeof window === 'undefined') return null
+
+            var params = new URLSearchParams(window.location.search)
+            var tabParam = params.get(this.tabParamKey)
+
+            if (tabParam === null) return null
+
+            var parsed = parseInt(tabParam, 10)
+            return isNaN(parsed) ? null : parsed
+        },
+
+        syncSelect() {
+            if (!this.selectId || typeof window === 'undefined') return
+
+            this.$nextTick(() => {
+                var inputEl = document.getElementById(this.selectId)
+                if (!inputEl) return
+
+                // id is on the <input>, walk up DOM to find a Vue component root
+                var el = inputEl.parentElement
+                while (el && !el.__vue__) {
+                    el = el.parentElement
+                }
+                if (!el) return
+
+                // Walk up Vue component tree to find the Kompo Select
+                var vue = el.__vue__
+                while (vue && typeof vue.select !== 'function') {
+                    vue = vue.$parent
+                }
+                if (!vue || !vue.component || !vue.component.options) return
+
+                var option = vue.component.options[this.activeTab]
+                if (option) {
+                    vue.$set(vue.component, 'value', [option])
+                }
+            })
+        },
+    },
+    created(){
+        var persistedTab = this.getPersistedTab()
+
+        if(persistedTab !== null){
+            this.activeTab = persistedTab
+        }else if(this.defaultActiveTab !== undefined && this.defaultActiveTab !== null){
+            this.activeTab = this.defaultActiveTab
+        }
+    },
+    mounted(){
+        this.syncSelect()
+    },
+}
+</script>

package/components/VlText.vue

@@ -0,0 +1,72 @@
+<template>
+    <div>
+        <div
+            v-if="!$_displayNone"
+            v-show="!$_hidden"
+            v-bind="$_attributes"
+            v-html="content"
+        />
+        <button type="button" :style="buttonStyle" :class="buttonClass" v-if="showMoreBtn" @click.stop="toggleShowingMore">{{showingMore ? showLessText : showMoreText}}</button>
+   </div>
+</template>
+
+<script>
+import Other from 'vue-kompo/js/form/mixins/Other'
+
+export default {
+    mixins: [Other],
+    methods: {
+        toggleShowingMore() {
+            this.showingMore = !this.showingMore;
+        }
+    },
+    computed: {
+        content() {
+            const originalContent = this.$_config('content');
+            let content = originalContent;
+
+            if (this.maxLines != null && !this.showingMore) {
+                content = content.split('\r\n').slice(0, this.maxLines).join('\r\n');
+            }
+
+            if (this.maxChars != null && !this.showingMore) {
+                content = content.slice(0, this.maxChars);
+            }
+
+            if (originalContent != content) {
+                content += '...';
+            }
+
+            return content;
+        },
+        showMoreBtn() {
+            return (this.maxLines != null || this.maxChars != null) && 
+                (this.$_config('content').length != this.content.length || this.showingMore);
+        }
+    },
+    data() {
+        return {
+            maxLines: null,
+            maxChars: null,
+
+            showMoreText: '',
+            showLessText: '',
+
+            buttonClass: '',
+            buttonStyle: '',
+
+            showingMore: false,
+        }
+    },
+    mounted() {
+        this.maxLines = this.$_config('maxLines') ?? this.maxLines;
+        this.maxChars = this.$_config('maxChars') ?? this.maxChars;
+
+        this.showMoreText = this.$_config('showMoreText') ?? this.showMoreText;
+        this.showLessText = this.$_config('showLessText') ?? this.showLessText;
+
+        this.buttonClass = this.$_config('buttonClass') ?? this.buttonClass;
+        this.buttonStyle = this.$_config('buttonStyle') ?? this.buttonStyle;
+    },
+}
+</script>