js-kompo-utils 1.0.0

package/README.md

@@ -0,0 +1 @@
+# Kompo js utils

package/app.js

@@ -0,0 +1,22 @@
+import { KompoJsConfigBuilder, KompoJsInitializer } from './orchestrator/KompoJsBuilder.js';
+import VueQrcodeReader from 'vue-qrcode-reader';
+import functions from './functions/index.js';
+import { getAllDefaultComponents } from './components/getAllDefaultComponents.js';
+
+const defaultConfig = new KompoJsConfigBuilder()
+    .withJquery()
+    .withCkEditor()
+    .withKompoMaps()
+    .addVuePlugin(VueQrcodeReader)
+    .mergeWindowUtils(functions)
+    .addComponents(getAllDefaultComponents())
+    .addFilesToImport([
+        () => require('./raw_animations/count-up-animation.js'),
+        () => require('./raw_animations/magic-poof.js')
+    ]);
+
+export {
+    defaultConfig,
+    KompoJsInitializer,
+    KompoJsConfigBuilder
+};

package/components/VlApexChart.vue

@@ -0,0 +1,89 @@
+<template>
+<div
+    v-if="!$_displayNone"
+    v-show="!$_hidden"
+    v-bind="$_attributes"
+>
+    <div ref="chart"></div>
+</div>
+</template>
+
+<script>
+import ApexCharts from 'apexcharts'
+import Other from 'vue-kompo/js/form/mixins/Other'
+
+export default {
+    mixins: [Other],
+    data() {
+        return {
+            chartInstance: null,
+        }
+    },
+    methods: {
+        formatCompact(val) {
+            if (val >= 1000000) return (val / 1000000).toFixed(1).replace(/\.0$/, '') + 'M'
+            if (val >= 1000) return (val / 1000).toFixed(1).replace(/\.0$/, '') + 'k'
+            return val
+        },
+        applyFormatters(options) {
+            const applyToAxis = (axis) => {
+                if (axis && axis.compactNumbers) {
+                    axis.labels = axis.labels || {}
+                    axis.labels.formatter = (val) => this.formatCompact(val)
+                    delete axis.compactNumbers
+                }
+            }
+            if (Array.isArray(options.yaxis)) {
+                options.yaxis.forEach(applyToAxis)
+            } else if (options.yaxis) {
+                applyToAxis(options.yaxis)
+            }
+        },
+        resolveRawFunctions(obj) {
+            const RAW_PREFIX = 'APEXCHART_RAW:'
+            if (typeof obj === 'string' && obj.startsWith(RAW_PREFIX)) {
+                const fnStr = obj.slice(RAW_PREFIX.length)
+                try {
+                    return new Function('return (' + fnStr + ')')()
+                } catch (e) {
+                    console.warn('Failed to parse APEXCHART_RAW function:', fnStr, e)
+                    return undefined
+                }
+            }
+            if (Array.isArray(obj)) return obj.map(v => this.resolveRawFunctions(v))
+            if (obj && typeof obj === 'object') {
+                const resolved = {}
+                for (const key in obj) resolved[key] = this.resolveRawFunctions(obj[key])
+                return resolved
+            }
+            return obj
+        },
+        resolveCssVars(obj) {
+            if (typeof obj === 'string' && obj.startsWith('var(--')) {
+                const varName = obj.slice(4, -1)
+                return getComputedStyle(document.documentElement).getPropertyValue(varName).trim()
+            }
+            if (Array.isArray(obj)) return obj.map(v => this.resolveCssVars(v))
+            if (obj && typeof obj === 'object') {
+                const resolved = {}
+                for (const key in obj) resolved[key] = this.resolveCssVars(obj[key])
+                return resolved
+            }
+            return obj
+        },
+    },
+    mounted() {
+        let options = this.$_config('chartOptions') || {}
+        options = this.resolveCssVars(options)
+        options = this.resolveRawFunctions(options)
+        this.applyFormatters(options)
+        this.chartInstance = new ApexCharts(this.$refs.chart, options)
+        this.chartInstance.render()
+    },
+    beforeDestroy() {
+        if (this.chartInstance) {
+            this.chartInstance.destroy()
+        }
+    },
+}
+</script>

package/components/VlCKEditorTemplate.vue

@@ -0,0 +1,52 @@
+<template>
+    <div :class="'card-gray-100 p-4 ' + $_config('containerClass')">
+        <div>
+            <div class="vlFormLabel" v-if="!$_config('removeLabel')" />
+            <div class="py-2">
+                <div v-if="!$_config('withoutHeight')" class="h-24"></div>
+
+                <vl-form-field v-bind="$_wrapperAttributes">
+                    <vlLocaleTabs :locales="locales" :activeLocale="activeLocale" @changeLocale="changeTab" />
+                    <ckeditor class="vlFormControl" ref="content" v-model="currentTranslation" v-bind="$_attributes"
+                        v-on="$_events" @keydown.stop :editor="editor" :config="editorConfig" />
+                </vl-form-field>
+            </div>
+        </div>
+        <div class="py-3">
+            <div class="vlFormLabel" v-if="$_config('titleVariables')">{{ $_config('titleVariables') }}</div>
+            <div class="flex flex-wrap gap-4 mt-2">
+                <div class="flex-1" v-for="(variables, typeLabel) in allVariables" :key="typeLabel">
+                    <vl-dropdown :vkompo="variables" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Translatable from 'vue-kompo/js/form/mixins/Translatable'
+import CKEditor from '../kompo-ckeditor-1.0.17/mixins/CKEditor'
+import CKEditorUtilities from '../kompo-ckeditor-1.0.17/mixins/CKEditorUtilities'
+
+export default {
+    mixins: [CKEditor, Translatable, CKEditorUtilities],
+    data() {
+        return {
+            allVariables: [],
+            variableToInsert: null,
+            editorInitialized: false
+        }
+    },
+    created() {
+        this.allVariables = this.$_config('variables')
+        this.$_vlOn("insertVariable", (payload) => {
+            if (!payload['uniqueid'] || this.$_config('uniqueId') == payload['uniqueid']) {
+                this.insertVariable(payload);
+            }
+        });
+    },
+    computed: {
+
+    }
+}
+</script>

package/components/VlCKEditorWithVars.vue

@@ -0,0 +1,80 @@
+<template>
+    <div :class="$_config('containerClass')">
+        <vl-form-field v-bind="$_wrapperAttributes">
+            <vlLocaleTabs :locales="locales" :activeLocale="activeLocale" @changeLocale="changeTab" />
+            <ckeditor class="vlFormControl" ref="content" v-model="currentTranslation" v-bind="$_attributes"
+                v-on="$_events" @keydown.stop :editor="editor" :config="editorConfig" />
+        </vl-form-field>
+        <div class="vlFormLabel" v-if="$_config('titleVariables')">
+            {{ $_config("titleVariables") }}
+        </div>
+        <div class="flex flex-wrap gap-4 mt-2">
+            <div class="flex-1" v-for="(variables, typeLabel) in allVariables" :key="typeLabel">
+                <vl-dropdown :vkompo="variables" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Translatable from "vue-kompo/js/form/mixins/Translatable";
+import CKEditor from "../kompo-ckeditor-1.0.17/mixins/CKEditor";
+
+export default {
+    mixins: [CKEditor, Translatable],
+    data() {
+        return {
+            allVariables: [],
+            variableToInsert: null,
+        };
+    },
+    methods: {
+        insertVariable(payload) {
+            var html =
+                '<span class="mention" data-mention="' +
+                payload.type +
+                '">' +
+                payload.label +
+                "</span>";
+            this.insertHtml(html);
+
+            this.variableToInsert = null;
+        },
+        insertHtml(html) {
+            const editor = this.$refs.content.$_instance;
+            editor.model.change((writer) => {
+                const viewFragment = editor.data.processor.toView(html);
+                const modelFragment = editor.data.toModel(viewFragment);
+                editor.model.insertContent(
+                    modelFragment,
+                    editor.model.document.selection
+                );
+            });
+        },
+        insertText(text) {
+            const editor = this.$refs.content.$_instance;
+            editor.model.change((writer) => {
+                const insertPosition =
+                    editor.model.document.selection.getFirstPosition();
+                writer.insertText(text, insertPosition);
+            });
+        },
+    },
+    created() {
+        this.allVariables = this.$_config("variables");
+
+        this.$_vlOn("insertVariable", (payload) => {
+            if (!payload['uniqueid'] || this.$_config('uniqueId') == payload['uniqueid']) {
+                this.insertVariable(payload);
+            }
+        });
+    },
+};
+</script>
+
+<style scoped>
+.ck-editor__editable_inline {
+    min-height: unset !important;
+    max-height: unset !important;
+}
+</style>

package/components/VlCollapsible.vue

@@ -0,0 +1,91 @@
+<template>
+    <div v-bind="$_layoutWrapperAttributes" v-show="!$_hidden" @click="$_clickAction"
+        :class="[expanded ? expandedClass : collapsedClass]" v-turbo-click="component.turbo">
+        <div @click="toggleSubGroup" class="flex flex-between cursor-pointer items-center">
+            <div v-bind="$_attributes(titleEl)" />
+
+            <div v-html="icon" v-if="icon" :style="{
+                transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)',
+                transition: 'transform 0.3s ease'
+            }" />
+        </div>
+        <transition name="expand">
+            <div v-show="expanded" :class="wrapperElementsClass || ''">
+                <template v-for="row in elements">
+                    <div v-bind="$_attributes(row)" />
+                </template>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+import Layout from 'vue-kompo/js/form/mixins/Layout'
+
+export default {
+    mixins: [Layout],
+    data() {
+        return {
+            expanded: false,
+        }
+    },
+    created() {
+        if (this.$_config('expandedByDefault')) {
+            setTimeout(() => {
+                this.expanded = true;
+            }, this.$_config('expandByDefaultDelay') || 0);
+        }
+    },
+    mounted() {
+        setTimeout(() => {
+            if (this.$_config('expandBasedInLinks') && this.links.some(link => window.location.origin + window.location.pathname == link)) {
+                this.expanded = true;
+            }
+        }, 100);
+    },
+    computed: {
+        titleEl() {
+            return this.$_config('titleEl');
+        },
+        idSection() {
+            return this.$_config('idSection');
+        },
+        icon() {
+            return this.$_config('iconT');
+        },
+        expandedClass() {
+            return (this.$_config('expandedClass') || 'expanded') + ' ' + this.$_classes;
+        },
+        collapsedClass() {
+            return (this.$_config('collapsedClasses') || 'collapsed') + ' ' + this.$_classes;
+        },
+        wrapperElementsClass() {
+            return this.$_config('wrapperElementsClass');
+        },
+        links() {
+            return this.$_config('links').split(',');
+        },
+    },
+    methods: {
+        toggleSubGroup() {
+            this.expanded = !this.expanded;
+        },
+    }
+}
+</script>
+
+<style>
+.expand-enter-active, .expand-leave-active {
+    transition: max-height 0.35s ease, opacity 0.35s ease;
+}
+
+.expand-enter, .expand-leave-to {
+    max-height: 0;
+    opacity: 0;
+}
+
+.expand-enter-to, .expand-leave {
+    max-height: 1000px;
+    opacity: 1;
+}
+</style>

package/components/VlCopyBox.vue

@@ -0,0 +1,61 @@
+<template>
+<div 
+    v-if="!$_displayNone" 
+    v-show="!$_hidden" 
+    v-bind="$_attributes" 
+    class="flex"
+>
+    <div 
+        :style="{tabSize: tabSize}" 
+        ref="code" 
+        class="m-4 flex-1"
+        v-html="$_label"/>
+    <button 
+        @click.prevent="copyToClipboard" 
+        class="copy-button"
+        :class="buttonRoundedClass"
+        :aria-label="balloonLabel" data-balloon-pos="up-right" 
+        ><svg 
+        class="w-8 h-8" 
+        fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg>
+    </button>
+</div>
+</template>
+
+<script>
+
+import Other from 'vue-kompo/js/form/mixins/Other'
+
+export default {
+    mixins: [Other],
+    data() {
+        return {
+            highlightedCode: '',
+            toCopyCode: '',
+            balloonLabel: 'Copy',
+            buttonRoundedClass: 'rounded-r-lg',
+        }
+    },
+    computed: {
+
+    },
+    methods: {
+        copyToClipboard() {
+            var input = document.createElement('textarea');
+            input.innerHTML = this.toCopyCode;
+            document.body.appendChild(input);
+            input.select();
+            var result = document.execCommand('copy');
+            document.body.removeChild(input);
+
+            this.balloonLabel = 'Copied!'
+            setTimeout(() => this.balloonLabel = 'Copy', 1500)
+        },
+    },
+    created() {
+
+        this.toCopyCode = this.$_label.replace(/`([^`]+)`/g,'$1')
+    }
+}
+
+</script>

package/components/VlCreditCardInput.vue

@@ -0,0 +1,104 @@
+<template>
+    <vl-form-field v-bind="$_wrapperAttributes">
+        <div :class="'vlInputGroup rounded-lg ' + (showError ? invalidClass : '')">
+            <input
+                v-model="visualValue"
+                class="vlFormControl"
+                v-bind="$_attributes"
+                v-on="$_events"
+                placeholder="1234 1234 1234 1234"
+                @input="onInputCardNumber"
+                @focus="onFocus"
+                @blur="focused = false"
+                ref="input"
+            />
+            <div class="justify-center flex items-center px-4" v-if="showError">
+                <span class="invalid-icon">!</span>
+            </div>
+        </div>
+    </vl-form-field>
+</template>
+
+<script>
+import Field from 'vue-kompo/js/form/mixins/Field'
+import HasInputAttributes from 'vue-kompo/js/form/mixins/HasInputAttributes'
+
+export default {
+    mixins: [Field, HasInputAttributes],
+    data() {
+        return {
+            visualValue: this.component?.value || '',
+            focused: false,
+            dirty: false
+        }
+    },
+    computed: {
+        $_attributes() {
+            return {
+                ...this.$_defaultFieldAttributes,
+                ...this.$_defaultInputAttributes
+            }
+        },
+        focusOnLoad(){ return this.$_config('focusOnLoad') },
+        invalidClass() { return this.$_config('invalidClass')},
+
+        rawCardNumbers() { return this.visualValue.replaceAll(/\D/g, '') },
+
+        formatedCardNumber() {
+            const rawNumbers = this.rawCardNumbers;
+
+            return this.performNumberFormatting(rawNumbers);
+        },
+
+        showError() {
+            return !this.isValidCard && !this.focused && this.dirty;
+        },
+
+        isValidCard() {
+            const cardNumber = this.rawCardNumbers;
+            const amex = /^3[47][0-9]{13}$/;
+            const visa = /^4[0-9]{12}(?:[0-9]{3})?$/;
+            const mastercard = /^5[1-5][0-9]{14}$/;
+            const discover = /^6(?:011|5[0-9]{2})[0-9]{12}$/;
+
+            return amex.test(cardNumber) || visa.test(cardNumber) || mastercard.test(cardNumber) || discover.test(cardNumber);
+        }
+    },
+    methods: {
+        focus(){
+            this.$refs.input.focus()
+        },
+
+        performNumberFormatting(number){
+            return number.slice(0, 16).replaceAll(/(.{4})/g, '$1 ').trim();
+        },
+
+        onInputCardNumber() {
+            this.visualValue = this.formatedCardNumber;
+            this.component.value = this.rawCardNumbers;
+        },
+
+        onFocus() {
+            this.focused = true;
+            this.dirty = true;
+        }
+    },
+    mounted(){
+        if(this.focusOnLoad)
+            this.focus()
+
+        if(this.component.value) {
+            this.visualValue = this.performNumberFormatting(this.component.value)
+        }
+    },
+}
+</script>
+
+<style scoped>
+.invalid-icon {
+    color: red;
+    font-weight: bold;
+    margin-left: 8px;
+    cursor: pointer;
+}
+</style>