js-kompo-utils 1.0.0

package/components/VlValidatedInput.vue

@@ -0,0 +1,262 @@
+<template>
+    <vl-form-field v-bind="$_wrapperAttributes">
+        <div :class="'vlInputGroup rounded-lg ' + (showError ? invalidClass : '')">
+            <input :value="visualValue" class="vlFormControl" v-bind="$_attributes" v-on="$_events"
+                @input="onInputValue" @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 {
+            rawValue: this.component?.value || '',
+            pastValue: this.component?.value || '',
+            focused: false,
+            dirty: false
+        }
+    },
+    watch: {
+        'component.value'(value) {
+            this.rawValue = value ?? '';
+            this.pastValue = value ?? '';
+        }
+    },
+    computed: {
+        visualValue() {
+            return this.formatToModel(this.rawValue)
+        },
+        $_attributes() {
+            return {
+                ...this.$_defaultFieldAttributes,
+                ...this.$_defaultInputAttributes
+            }
+        },
+        focusOnLoad() { return this.$_config('focusOnLoad') },
+        invalidClass() { return this.$_config('invalidClass') },
+        formatModels() { return this.$_config('formatModels') },
+        validateFormat() { return this.$_config('validateFormat') },
+        allowFormat() { return this.$_config('allowFormat') },
+        keepFormat() { return this.$_config('keepFormat') },
+        showError() {
+            return !this.isValidValue && !this.focused && this.dirty;
+        },
+        isValidValue() {
+            const valueToValidate = this.keepFormat 
+                ? (this.component?.value || '') 
+                : this.formatToModel(this.component?.value || '');
+            return (new RegExp(this.validateFormat)).test(valueToValidate);
+        }
+    },
+    methods: {
+        onInputValue(e) {
+            const input = e.target;
+            const oldFormatted = this.visualValue;
+            const newFormatted = input.value;
+            const oldRaw = this.rawValue;
+            const cursorPos = input.selectionStart;
+            const selectionEnd = input.selectionEnd;
+
+            // Detect operation type
+            const operation = this.detectOperation(oldFormatted, newFormatted, cursorPos, selectionEnd);
+
+            // Extract raw value considering the operation
+            const extractionResult = this.extractRawValue(newFormatted, oldFormatted, oldRaw, operation);
+
+            if (!extractionResult.valid) {
+                // Restore previous state
+                this.$nextTick(() => {
+                    input.value = oldFormatted;
+                    input.setSelectionRange(operation.originalCursor, operation.originalCursor);
+                });
+                return;
+            }
+
+            // Update raw value
+            this.rawValue = extractionResult.raw;
+            this.component.value = this.keepFormat 
+                ? this.formatToModel(extractionResult.raw) 
+                : extractionResult.raw;
+
+            // Calculate new cursor position
+            this.$nextTick(() => {
+                const formattedValue = this.formatToModel(extractionResult.raw);
+                const newCursorPos = this.calculateNewCursorPosition(
+                    operation,
+                    extractionResult.raw,
+                    formattedValue,
+                    extractionResult.rawCursorPos
+                );
+
+                input.value = formattedValue;
+                input.setSelectionRange(newCursorPos, newCursorPos);
+            });
+        },
+
+        detectOperation(oldFormatted, newFormatted, cursorPos, selectionEnd) {
+            const lengthDiff = newFormatted.length - oldFormatted.length;
+            const hasSelection = selectionEnd > cursorPos;
+
+            return {
+                type: lengthDiff > 0 ? 'insert' : lengthDiff < 0 ? 'delete' : 'replace',
+                lengthDiff,
+                cursorPos,
+                selectionEnd,
+                hasSelection,
+                originalCursor: cursorPos
+            };
+        },
+
+        extractRawValue(newFormatted, oldFormatted, oldRaw, operation) {
+            let raw = '';
+            let rawCursorPos = 0;
+
+            // For delete operations, check if we're deleting at a format boundary
+            if (operation.type === 'delete' && operation.lengthDiff === -1) {
+                // Find what was deleted
+                let deletedIndex = -1;
+                for (let i = 0; i < oldFormatted.length; i++) {
+                    if (i >= newFormatted.length || oldFormatted[i] !== newFormatted[i]) {
+                        deletedIndex = i;
+                        break;
+                    }
+                }
+
+                const deletedChar = oldFormatted[deletedIndex];
+                const isFormattingChar = !(new RegExp(this.allowFormat)).test(deletedChar);
+
+                if (isFormattingChar) {
+                    // A formatting character was deleted
+                    let rawIndexBeforeDeletion = 0;
+                    for (let i = 0; i < deletedIndex; i++) {
+                        if ((new RegExp(this.allowFormat)).test(oldFormatted[i])) {
+                            rawIndexBeforeDeletion++;
+                        }
+                    }
+
+                    raw = oldRaw.slice(0, rawIndexBeforeDeletion - 1) + oldRaw.slice(rawIndexBeforeDeletion);
+                    rawCursorPos = rawIndexBeforeDeletion - 1;
+                } else {
+                    // Normal character deletion
+                    // Calculate raw position where deletion occurred
+                    let rawDeletePos = 0;
+                    for (let i = 0; i < deletedIndex; i++) {
+                        if ((new RegExp(this.allowFormat)).test(oldFormatted[i])) {
+                            rawDeletePos++;
+                        }
+                    }
+
+                    // Build new raw by removing character at rawDeletePos
+                    raw = oldRaw.slice(0, rawDeletePos) + oldRaw.slice(rawDeletePos + 1);
+                    rawCursorPos = rawDeletePos; // Cursor stays at deletion point
+                }
+            } else {
+                // Insert or replace - normal extraction
+                for (let i = 0; i < newFormatted.length; i++) {
+                    const char = newFormatted[i];
+                    if ((new RegExp(this.allowFormat)).test(char)) {
+                        raw += char;
+                        if (i < operation.cursorPos) {
+                            rawCursorPos++;
+                        }
+                    }
+                }
+            }
+
+            const isValid = (new RegExp(this.allowFormat)).test(raw || '');
+
+            return {
+                raw,
+                rawCursorPos,
+                valid: isValid
+            };
+        },
+
+        buildFormattedToRawMapping(formatted, raw) {
+            const mapping = [];
+            let rawIndex = 0;
+
+            for (let i = 0; i < formatted.length; i++) {
+                const char = formatted[i];
+                const isRawChar = (new RegExp(this.allowFormat)).test(char);
+
+                mapping.push({
+                    formattedIndex: i,
+                    rawIndex: isRawChar ? rawIndex++ : -1,
+                    isRawChar,
+                    char
+                });
+            }
+
+            return mapping;
+        },
+
+        calculateNewCursorPosition(operation, newRaw, newFormatted, rawCursorPos) {
+            // Si estamos al final del raw, posicionar al final del formatted
+            if (rawCursorPos >= newRaw.length) {
+                return newFormatted.length;
+            }
+
+            // Build the mapping for the new formatted string
+            const mapping = this.buildFormattedToRawMapping(newFormatted, newRaw);
+
+            // Find the formatted position that corresponds to our raw cursor position
+            let targetRawIndex = rawCursorPos;
+            let formattedPos = 0;
+
+            for (let i = 0; i < mapping.length; i++) {
+                const entry = mapping[i];
+
+                if (entry.isRawChar && entry.rawIndex === targetRawIndex) {
+                    formattedPos = i;
+                    break;
+                } else if (entry.isRawChar && entry.rawIndex > targetRawIndex) {
+                    // We've passed our target, position cursor before this character
+                    formattedPos = i;
+                    break;
+                }
+            }
+
+            // Remove the special handling that was causing issues
+            // The cursor position is already correctly calculated above
+
+            return formattedPos;
+        },
+        onFocus() {
+            this.focused = true;
+            this.dirty = true;
+        },
+        formatToModel(value) {
+            if (!value) return '';
+
+            if (this.formatModels && Object.entries(this.formatModels).length > 0) {
+                Object.entries(this.formatModels).forEach(([from, to]) => {
+                    value = value.replace(new RegExp(from), to)
+                })
+            }
+            return value;
+        }
+    },
+    mounted() {
+        if (this.focusOnLoad)
+            this.focus()
+    },
+}
+</script>
+
+<style scoped>
+.invalid-icon {
+    color: red;
+    font-weight: bold;
+    margin-left: 8px;
+    cursor: pointer;
+}
+</style>

package/components/data/countries.js

@@ -0,0 +1,253 @@
+// Static countries data with flags and dial codes
+export const COUNTRIES_DATA = [
+    { code: 'AD', name: 'Andorra', dialCode: '376', flag: 'https://flagcdn.com/w20/ad.png' },
+    { code: 'AE', name: 'United Arab Emirates', dialCode: '971', flag: 'https://flagcdn.com/w20/ae.png' },
+    { code: 'AF', name: 'Afghanistan', dialCode: '93', flag: 'https://flagcdn.com/w20/af.png' },
+    { code: 'AG', name: 'Antigua and Barbuda', dialCode: '1268', flag: 'https://flagcdn.com/w20/ag.png' },
+    { code: 'AI', name: 'Anguilla', dialCode: '1264', flag: 'https://flagcdn.com/w20/ai.png' },
+    { code: 'AL', name: 'Albania', dialCode: '355', flag: 'https://flagcdn.com/w20/al.png' },
+    { code: 'AM', name: 'Armenia', dialCode: '374', flag: 'https://flagcdn.com/w20/am.png' },
+    { code: 'AO', name: 'Angola', dialCode: '244', flag: 'https://flagcdn.com/w20/ao.png' },
+    { code: 'AQ', name: 'Antarctica', dialCode: '672', flag: 'https://flagcdn.com/w20/aq.png' },
+    { code: 'AR', name: 'Argentina', dialCode: '54', flag: 'https://flagcdn.com/w20/ar.png' },
+    { code: 'AS', name: 'American Samoa', dialCode: '1684', flag: 'https://flagcdn.com/w20/as.png' },
+    { code: 'AT', name: 'Austria', dialCode: '43', flag: 'https://flagcdn.com/w20/at.png' },
+    { code: 'AU', name: 'Australia', dialCode: '61', flag: 'https://flagcdn.com/w20/au.png' },
+    { code: 'AW', name: 'Aruba', dialCode: '297', flag: 'https://flagcdn.com/w20/aw.png' },
+    { code: 'AX', name: 'Åland Islands', dialCode: '358', flag: 'https://flagcdn.com/w20/ax.png' },
+    { code: 'AZ', name: 'Azerbaijan', dialCode: '994', flag: 'https://flagcdn.com/w20/az.png' },
+    { code: 'BA', name: 'Bosnia and Herzegovina', dialCode: '387', flag: 'https://flagcdn.com/w20/ba.png' },
+    { code: 'BB', name: 'Barbados', dialCode: '1246', flag: 'https://flagcdn.com/w20/bb.png' },
+    { code: 'BD', name: 'Bangladesh', dialCode: '880', flag: 'https://flagcdn.com/w20/bd.png' },
+    { code: 'BE', name: 'Belgium', dialCode: '32', flag: 'https://flagcdn.com/w20/be.png' },
+    { code: 'BF', name: 'Burkina Faso', dialCode: '226', flag: 'https://flagcdn.com/w20/bf.png' },
+    { code: 'BG', name: 'Bulgaria', dialCode: '359', flag: 'https://flagcdn.com/w20/bg.png' },
+    { code: 'BH', name: 'Bahrain', dialCode: '973', flag: 'https://flagcdn.com/w20/bh.png' },
+    { code: 'BI', name: 'Burundi', dialCode: '257', flag: 'https://flagcdn.com/w20/bi.png' },
+    { code: 'BJ', name: 'Benin', dialCode: '229', flag: 'https://flagcdn.com/w20/bj.png' },
+    { code: 'BL', name: 'Saint Barthélemy', dialCode: '590', flag: 'https://flagcdn.com/w20/bl.png' },
+    { code: 'BM', name: 'Bermuda', dialCode: '1441', flag: 'https://flagcdn.com/w20/bm.png' },
+    { code: 'BN', name: 'Brunei', dialCode: '673', flag: 'https://flagcdn.com/w20/bn.png' },
+    { code: 'BO', name: 'Bolivia', dialCode: '591', flag: 'https://flagcdn.com/w20/bo.png' },
+    { code: 'BQ', name: 'Caribbean Netherlands', dialCode: '599', flag: 'https://flagcdn.com/w20/bq.png' },
+    { code: 'BR', name: 'Brazil', dialCode: '55', flag: 'https://flagcdn.com/w20/br.png' },
+    { code: 'BS', name: 'Bahamas', dialCode: '1242', flag: 'https://flagcdn.com/w20/bs.png' },
+    { code: 'BT', name: 'Bhutan', dialCode: '975', flag: 'https://flagcdn.com/w20/bt.png' },
+    { code: 'BV', name: 'Bouvet Island', dialCode: '47', flag: 'https://flagcdn.com/w20/bv.png' },
+    { code: 'BW', name: 'Botswana', dialCode: '267', flag: 'https://flagcdn.com/w20/bw.png' },
+    { code: 'BY', name: 'Belarus', dialCode: '375', flag: 'https://flagcdn.com/w20/by.png' },
+    { code: 'BZ', name: 'Belize', dialCode: '501', flag: 'https://flagcdn.com/w20/bz.png' },
+    { code: 'CA', name: 'Canada', dialCode: '1', flag: 'https://flagcdn.com/w20/ca.png' },
+    { code: 'CC', name: 'Cocos Islands', dialCode: '61', flag: 'https://flagcdn.com/w20/cc.png' },
+    { code: 'CD', name: 'Democratic Republic of the Congo', dialCode: '243', flag: 'https://flagcdn.com/w20/cd.png' },
+    { code: 'CF', name: 'Central African Republic', dialCode: '236', flag: 'https://flagcdn.com/w20/cf.png' },
+    { code: 'CG', name: 'Republic of the Congo', dialCode: '242', flag: 'https://flagcdn.com/w20/cg.png' },
+    { code: 'CH', name: 'Switzerland', dialCode: '41', flag: 'https://flagcdn.com/w20/ch.png' },
+    { code: 'CI', name: 'Ivory Coast', dialCode: '225', flag: 'https://flagcdn.com/w20/ci.png' },
+    { code: 'CK', name: 'Cook Islands', dialCode: '682', flag: 'https://flagcdn.com/w20/ck.png' },
+    { code: 'CL', name: 'Chile', dialCode: '56', flag: 'https://flagcdn.com/w20/cl.png' },
+    { code: 'CM', name: 'Cameroon', dialCode: '237', flag: 'https://flagcdn.com/w20/cm.png' },
+    { code: 'CN', name: 'China', dialCode: '86', flag: 'https://flagcdn.com/w20/cn.png' },
+    { code: 'CO', name: 'Colombia', dialCode: '57', flag: 'https://flagcdn.com/w20/co.png' },
+    { code: 'CR', name: 'Costa Rica', dialCode: '506', flag: 'https://flagcdn.com/w20/cr.png' },
+    { code: 'CU', name: 'Cuba', dialCode: '53', flag: 'https://flagcdn.com/w20/cu.png' },
+    { code: 'CV', name: 'Cape Verde', dialCode: '238', flag: 'https://flagcdn.com/w20/cv.png' },
+    { code: 'CW', name: 'Curaçao', dialCode: '599', flag: 'https://flagcdn.com/w20/cw.png' },
+    { code: 'CX', name: 'Christmas Island', dialCode: '61', flag: 'https://flagcdn.com/w20/cx.png' },
+    { code: 'CY', name: 'Cyprus', dialCode: '357', flag: 'https://flagcdn.com/w20/cy.png' },
+    { code: 'CZ', name: 'Czech Republic', dialCode: '420', flag: 'https://flagcdn.com/w20/cz.png' },
+    { code: 'DE', name: 'Germany', dialCode: '49', flag: 'https://flagcdn.com/w20/de.png' },
+    { code: 'DJ', name: 'Djibouti', dialCode: '253', flag: 'https://flagcdn.com/w20/dj.png' },
+    { code: 'DK', name: 'Denmark', dialCode: '45', flag: 'https://flagcdn.com/w20/dk.png' },
+    { code: 'DM', name: 'Dominica', dialCode: '1767', flag: 'https://flagcdn.com/w20/dm.png' },
+    { code: 'DO', name: 'Dominican Republic', dialCode: '1809', flag: 'https://flagcdn.com/w20/do.png' },
+    { code: 'DZ', name: 'Algeria', dialCode: '213', flag: 'https://flagcdn.com/w20/dz.png' },
+    { code: 'EC', name: 'Ecuador', dialCode: '593', flag: 'https://flagcdn.com/w20/ec.png' },
+    { code: 'EE', name: 'Estonia', dialCode: '372', flag: 'https://flagcdn.com/w20/ee.png' },
+    { code: 'EG', name: 'Egypt', dialCode: '20', flag: 'https://flagcdn.com/w20/eg.png' },
+    { code: 'EH', name: 'Western Sahara', dialCode: '212', flag: 'https://flagcdn.com/w20/eh.png' },
+    { code: 'ER', name: 'Eritrea', dialCode: '291', flag: 'https://flagcdn.com/w20/er.png' },
+    { code: 'ES', name: 'Spain', dialCode: '34', flag: 'https://flagcdn.com/w20/es.png' },
+    { code: 'ET', name: 'Ethiopia', dialCode: '251', flag: 'https://flagcdn.com/w20/et.png' },
+    { code: 'FI', name: 'Finland', dialCode: '358', flag: 'https://flagcdn.com/w20/fi.png' },
+    { code: 'FJ', name: 'Fiji', dialCode: '679', flag: 'https://flagcdn.com/w20/fj.png' },
+    { code: 'FK', name: 'Falkland Islands', dialCode: '500', flag: 'https://flagcdn.com/w20/fk.png' },
+    { code: 'FM', name: 'Micronesia', dialCode: '691', flag: 'https://flagcdn.com/w20/fm.png' },
+    { code: 'FO', name: 'Faroe Islands', dialCode: '298', flag: 'https://flagcdn.com/w20/fo.png' },
+    { code: 'FR', name: 'France', dialCode: '33', flag: 'https://flagcdn.com/w20/fr.png' },
+    { code: 'GA', name: 'Gabon', dialCode: '241', flag: 'https://flagcdn.com/w20/ga.png' },
+    { code: 'GB', name: 'United Kingdom', dialCode: '44', flag: 'https://flagcdn.com/w20/gb.png' },
+    { code: 'GD', name: 'Grenada', dialCode: '1473', flag: 'https://flagcdn.com/w20/gd.png' },
+    { code: 'GE', name: 'Georgia', dialCode: '995', flag: 'https://flagcdn.com/w20/ge.png' },
+    { code: 'GF', name: 'French Guiana', dialCode: '594', flag: 'https://flagcdn.com/w20/gf.png' },
+    { code: 'GG', name: 'Guernsey', dialCode: '44', flag: 'https://flagcdn.com/w20/gg.png' },
+    { code: 'GH', name: 'Ghana', dialCode: '233', flag: 'https://flagcdn.com/w20/gh.png' },
+    { code: 'GI', name: 'Gibraltar', dialCode: '350', flag: 'https://flagcdn.com/w20/gi.png' },
+    { code: 'GL', name: 'Greenland', dialCode: '299', flag: 'https://flagcdn.com/w20/gl.png' },
+    { code: 'GM', name: 'Gambia', dialCode: '220', flag: 'https://flagcdn.com/w20/gm.png' },
+    { code: 'GN', name: 'Guinea', dialCode: '224', flag: 'https://flagcdn.com/w20/gn.png' },
+    { code: 'GP', name: 'Guadeloupe', dialCode: '590', flag: 'https://flagcdn.com/w20/gp.png' },
+    { code: 'GQ', name: 'Equatorial Guinea', dialCode: '240', flag: 'https://flagcdn.com/w20/gq.png' },
+    { code: 'GR', name: 'Greece', dialCode: '30', flag: 'https://flagcdn.com/w20/gr.png' },
+    { code: 'GS', name: 'South Georgia', dialCode: '500', flag: 'https://flagcdn.com/w20/gs.png' },
+    { code: 'GT', name: 'Guatemala', dialCode: '502', flag: 'https://flagcdn.com/w20/gt.png' },
+    { code: 'GU', name: 'Guam', dialCode: '1671', flag: 'https://flagcdn.com/w20/gu.png' },
+    { code: 'GW', name: 'Guinea-Bissau', dialCode: '245', flag: 'https://flagcdn.com/w20/gw.png' },
+    { code: 'GY', name: 'Guyana', dialCode: '592', flag: 'https://flagcdn.com/w20/gy.png' },
+    { code: 'HK', name: 'Hong Kong', dialCode: '852', flag: 'https://flagcdn.com/w20/hk.png' },
+    { code: 'HM', name: 'Heard Island', dialCode: '672', flag: 'https://flagcdn.com/w20/hm.png' },
+    { code: 'HN', name: 'Honduras', dialCode: '504', flag: 'https://flagcdn.com/w20/hn.png' },
+    { code: 'HR', name: 'Croatia', dialCode: '385', flag: 'https://flagcdn.com/w20/hr.png' },
+    { code: 'HT', name: 'Haiti', dialCode: '509', flag: 'https://flagcdn.com/w20/ht.png' },
+    { code: 'HU', name: 'Hungary', dialCode: '36', flag: 'https://flagcdn.com/w20/hu.png' },
+    { code: 'ID', name: 'Indonesia', dialCode: '62', flag: 'https://flagcdn.com/w20/id.png' },
+    { code: 'IE', name: 'Ireland', dialCode: '353', flag: 'https://flagcdn.com/w20/ie.png' },
+    { code: 'IL', name: 'Israel', dialCode: '972', flag: 'https://flagcdn.com/w20/il.png' },
+    { code: 'IM', name: 'Isle of Man', dialCode: '44', flag: 'https://flagcdn.com/w20/im.png' },
+    { code: 'IN', name: 'India', dialCode: '91', flag: 'https://flagcdn.com/w20/in.png' },
+    { code: 'IO', name: 'British Indian Ocean Territory', dialCode: '246', flag: 'https://flagcdn.com/w20/io.png' },
+    { code: 'IQ', name: 'Iraq', dialCode: '964', flag: 'https://flagcdn.com/w20/iq.png' },
+    { code: 'IR', name: 'Iran', dialCode: '98', flag: 'https://flagcdn.com/w20/ir.png' },
+    { code: 'IS', name: 'Iceland', dialCode: '354', flag: 'https://flagcdn.com/w20/is.png' },
+    { code: 'IT', name: 'Italy', dialCode: '39', flag: 'https://flagcdn.com/w20/it.png' },
+    { code: 'JE', name: 'Jersey', dialCode: '44', flag: 'https://flagcdn.com/w20/je.png' },
+    { code: 'JM', name: 'Jamaica', dialCode: '1876', flag: 'https://flagcdn.com/w20/jm.png' },
+    { code: 'JO', name: 'Jordan', dialCode: '962', flag: 'https://flagcdn.com/w20/jo.png' },
+    { code: 'JP', name: 'Japan', dialCode: '81', flag: 'https://flagcdn.com/w20/jp.png' },
+    { code: 'KE', name: 'Kenya', dialCode: '254', flag: 'https://flagcdn.com/w20/ke.png' },
+    { code: 'KG', name: 'Kyrgyzstan', dialCode: '996', flag: 'https://flagcdn.com/w20/kg.png' },
+    { code: 'KH', name: 'Cambodia', dialCode: '855', flag: 'https://flagcdn.com/w20/kh.png' },
+    { code: 'KI', name: 'Kiribati', dialCode: '686', flag: 'https://flagcdn.com/w20/ki.png' },
+    { code: 'KM', name: 'Comoros', dialCode: '269', flag: 'https://flagcdn.com/w20/km.png' },
+    { code: 'KN', name: 'Saint Kitts and Nevis', dialCode: '1869', flag: 'https://flagcdn.com/w20/kn.png' },
+    { code: 'KP', name: 'North Korea', dialCode: '850', flag: 'https://flagcdn.com/w20/kp.png' },
+    { code: 'KR', name: 'South Korea', dialCode: '82', flag: 'https://flagcdn.com/w20/kr.png' },
+    { code: 'KW', name: 'Kuwait', dialCode: '965', flag: 'https://flagcdn.com/w20/kw.png' },
+    { code: 'KY', name: 'Cayman Islands', dialCode: '1345', flag: 'https://flagcdn.com/w20/ky.png' },
+    { code: 'KZ', name: 'Kazakhstan', dialCode: '7', flag: 'https://flagcdn.com/w20/kz.png' },
+    { code: 'LA', name: 'Laos', dialCode: '856', flag: 'https://flagcdn.com/w20/la.png' },
+    { code: 'LB', name: 'Lebanon', dialCode: '961', flag: 'https://flagcdn.com/w20/lb.png' },
+    { code: 'LC', name: 'Saint Lucia', dialCode: '1758', flag: 'https://flagcdn.com/w20/lc.png' },
+    { code: 'LI', name: 'Liechtenstein', dialCode: '423', flag: 'https://flagcdn.com/w20/li.png' },
+    { code: 'LK', name: 'Sri Lanka', dialCode: '94', flag: 'https://flagcdn.com/w20/lk.png' },
+    { code: 'LR', name: 'Liberia', dialCode: '231', flag: 'https://flagcdn.com/w20/lr.png' },
+    { code: 'LS', name: 'Lesotho', dialCode: '266', flag: 'https://flagcdn.com/w20/ls.png' },
+    { code: 'LT', name: 'Lithuania', dialCode: '370', flag: 'https://flagcdn.com/w20/lt.png' },
+    { code: 'LU', name: 'Luxembourg', dialCode: '352', flag: 'https://flagcdn.com/w20/lu.png' },
+    { code: 'LV', name: 'Latvia', dialCode: '371', flag: 'https://flagcdn.com/w20/lv.png' },
+    { code: 'LY', name: 'Libya', dialCode: '218', flag: 'https://flagcdn.com/w20/ly.png' },
+    { code: 'MA', name: 'Morocco', dialCode: '212', flag: 'https://flagcdn.com/w20/ma.png' },
+    { code: 'MC', name: 'Monaco', dialCode: '377', flag: 'https://flagcdn.com/w20/mc.png' },
+    { code: 'MD', name: 'Moldova', dialCode: '373', flag: 'https://flagcdn.com/w20/md.png' },
+    { code: 'ME', name: 'Montenegro', dialCode: '382', flag: 'https://flagcdn.com/w20/me.png' },
+    { code: 'MF', name: 'Saint Martin', dialCode: '590', flag: 'https://flagcdn.com/w20/mf.png' },
+    { code: 'MG', name: 'Madagascar', dialCode: '261', flag: 'https://flagcdn.com/w20/mg.png' },
+    { code: 'MH', name: 'Marshall Islands', dialCode: '692', flag: 'https://flagcdn.com/w20/mh.png' },
+    { code: 'MK', name: 'North Macedonia', dialCode: '389', flag: 'https://flagcdn.com/w20/mk.png' },
+    { code: 'ML', name: 'Mali', dialCode: '223', flag: 'https://flagcdn.com/w20/ml.png' },
+    { code: 'MM', name: 'Myanmar', dialCode: '95', flag: 'https://flagcdn.com/w20/mm.png' },
+    { code: 'MN', name: 'Mongolia', dialCode: '976', flag: 'https://flagcdn.com/w20/mn.png' },
+    { code: 'MO', name: 'Macao', dialCode: '853', flag: 'https://flagcdn.com/w20/mo.png' },
+    { code: 'MP', name: 'Northern Mariana Islands', dialCode: '1670', flag: 'https://flagcdn.com/w20/mp.png' },
+    { code: 'MQ', name: 'Martinique', dialCode: '596', flag: 'https://flagcdn.com/w20/mq.png' },
+    { code: 'MR', name: 'Mauritania', dialCode: '222', flag: 'https://flagcdn.com/w20/mr.png' },
+    { code: 'MS', name: 'Montserrat', dialCode: '1664', flag: 'https://flagcdn.com/w20/ms.png' },
+    { code: 'MT', name: 'Malta', dialCode: '356', flag: 'https://flagcdn.com/w20/mt.png' },
+    { code: 'MU', name: 'Mauritius', dialCode: '230', flag: 'https://flagcdn.com/w20/mu.png' },
+    { code: 'MV', name: 'Maldives', dialCode: '960', flag: 'https://flagcdn.com/w20/mv.png' },
+    { code: 'MW', name: 'Malawi', dialCode: '265', flag: 'https://flagcdn.com/w20/mw.png' },
+    { code: 'MX', name: 'Mexico', dialCode: '52', flag: 'https://flagcdn.com/w20/mx.png' },
+    { code: 'MY', name: 'Malaysia', dialCode: '60', flag: 'https://flagcdn.com/w20/my.png' },
+    { code: 'MZ', name: 'Mozambique', dialCode: '258', flag: 'https://flagcdn.com/w20/mz.png' },
+    { code: 'NA', name: 'Namibia', dialCode: '264', flag: 'https://flagcdn.com/w20/na.png' },
+    { code: 'NC', name: 'New Caledonia', dialCode: '687', flag: 'https://flagcdn.com/w20/nc.png' },
+    { code: 'NE', name: 'Niger', dialCode: '227', flag: 'https://flagcdn.com/w20/ne.png' },
+    { code: 'NF', name: 'Norfolk Island', dialCode: '672', flag: 'https://flagcdn.com/w20/nf.png' },
+    { code: 'NG', name: 'Nigeria', dialCode: '234', flag: 'https://flagcdn.com/w20/ng.png' },
+    { code: 'NI', name: 'Nicaragua', dialCode: '505', flag: 'https://flagcdn.com/w20/ni.png' },
+    { code: 'NL', name: 'Netherlands', dialCode: '31', flag: 'https://flagcdn.com/w20/nl.png' },
+    { code: 'NO', name: 'Norway', dialCode: '47', flag: 'https://flagcdn.com/w20/no.png' },
+    { code: 'NP', name: 'Nepal', dialCode: '977', flag: 'https://flagcdn.com/w20/np.png' },
+    { code: 'NR', name: 'Nauru', dialCode: '674', flag: 'https://flagcdn.com/w20/nr.png' },
+    { code: 'NU', name: 'Niue', dialCode: '683', flag: 'https://flagcdn.com/w20/nu.png' },
+    { code: 'NZ', name: 'New Zealand', dialCode: '64', flag: 'https://flagcdn.com/w20/nz.png' },
+    { code: 'OM', name: 'Oman', dialCode: '968', flag: 'https://flagcdn.com/w20/om.png' },
+    { code: 'PA', name: 'Panama', dialCode: '507', flag: 'https://flagcdn.com/w20/pa.png' },
+    { code: 'PE', name: 'Peru', dialCode: '51', flag: 'https://flagcdn.com/w20/pe.png' },
+    { code: 'PF', name: 'French Polynesia', dialCode: '689', flag: 'https://flagcdn.com/w20/pf.png' },
+    { code: 'PG', name: 'Papua New Guinea', dialCode: '675', flag: 'https://flagcdn.com/w20/pg.png' },
+    { code: 'PH', name: 'Philippines', dialCode: '63', flag: 'https://flagcdn.com/w20/ph.png' },
+    { code: 'PK', name: 'Pakistan', dialCode: '92', flag: 'https://flagcdn.com/w20/pk.png' },
+    { code: 'PL', name: 'Poland', dialCode: '48', flag: 'https://flagcdn.com/w20/pl.png' },
+    { code: 'PM', name: 'Saint Pierre and Miquelon', dialCode: '508', flag: 'https://flagcdn.com/w20/pm.png' },
+    { code: 'PN', name: 'Pitcairn Islands', dialCode: '64', flag: 'https://flagcdn.com/w20/pn.png' },
+    { code: 'PR', name: 'Puerto Rico', dialCode: '1787', flag: 'https://flagcdn.com/w20/pr.png' },
+    { code: 'PS', name: 'Palestine', dialCode: '970', flag: 'https://flagcdn.com/w20/ps.png' },
+    { code: 'PT', name: 'Portugal', dialCode: '351', flag: 'https://flagcdn.com/w20/pt.png' },
+    { code: 'PW', name: 'Palau', dialCode: '680', flag: 'https://flagcdn.com/w20/pw.png' },
+    { code: 'PY', name: 'Paraguay', dialCode: '595', flag: 'https://flagcdn.com/w20/py.png' },
+    { code: 'QA', name: 'Qatar', dialCode: '974', flag: 'https://flagcdn.com/w20/qa.png' },
+    { code: 'RE', name: 'Réunion', dialCode: '262', flag: 'https://flagcdn.com/w20/re.png' },
+    { code: 'RO', name: 'Romania', dialCode: '40', flag: 'https://flagcdn.com/w20/ro.png' },
+    { code: 'RS', name: 'Serbia', dialCode: '381', flag: 'https://flagcdn.com/w20/rs.png' },
+    { code: 'RU', name: 'Russia', dialCode: '7', flag: 'https://flagcdn.com/w20/ru.png' },
+    { code: 'RW', name: 'Rwanda', dialCode: '250', flag: 'https://flagcdn.com/w20/rw.png' },
+    { code: 'SA', name: 'Saudi Arabia', dialCode: '966', flag: 'https://flagcdn.com/w20/sa.png' },
+    { code: 'SB', name: 'Solomon Islands', dialCode: '677', flag: 'https://flagcdn.com/w20/sb.png' },
+    { code: 'SC', name: 'Seychelles', dialCode: '248', flag: 'https://flagcdn.com/w20/sc.png' },
+    { code: 'SD', name: 'Sudan', dialCode: '249', flag: 'https://flagcdn.com/w20/sd.png' },
+    { code: 'SE', name: 'Sweden', dialCode: '46', flag: 'https://flagcdn.com/w20/se.png' },
+    { code: 'SG', name: 'Singapore', dialCode: '65', flag: 'https://flagcdn.com/w20/sg.png' },
+    { code: 'SH', name: 'Saint Helena', dialCode: '290', flag: 'https://flagcdn.com/w20/sh.png' },
+    { code: 'SI', name: 'Slovenia', dialCode: '386', flag: 'https://flagcdn.com/w20/si.png' },
+    { code: 'SJ', name: 'Svalbard and Jan Mayen', dialCode: '47', flag: 'https://flagcdn.com/w20/sj.png' },
+    { code: 'SK', name: 'Slovakia', dialCode: '421', flag: 'https://flagcdn.com/w20/sk.png' },
+    { code: 'SL', name: 'Sierra Leone', dialCode: '232', flag: 'https://flagcdn.com/w20/sl.png' },
+    { code: 'SM', name: 'San Marino', dialCode: '378', flag: 'https://flagcdn.com/w20/sm.png' },
+    { code: 'SN', name: 'Senegal', dialCode: '221', flag: 'https://flagcdn.com/w20/sn.png' },
+    { code: 'SO', name: 'Somalia', dialCode: '252', flag: 'https://flagcdn.com/w20/so.png' },
+    { code: 'SR', name: 'Suriname', dialCode: '597', flag: 'https://flagcdn.com/w20/sr.png' },
+    { code: 'SS', name: 'South Sudan', dialCode: '211', flag: 'https://flagcdn.com/w20/ss.png' },
+    { code: 'ST', name: 'São Tomé and Príncipe', dialCode: '239', flag: 'https://flagcdn.com/w20/st.png' },
+    { code: 'SV', name: 'El Salvador', dialCode: '503', flag: 'https://flagcdn.com/w20/sv.png' },
+    { code: 'SX', name: 'Sint Maarten', dialCode: '1721', flag: 'https://flagcdn.com/w20/sx.png' },
+    { code: 'SY', name: 'Syria', dialCode: '963', flag: 'https://flagcdn.com/w20/sy.png' },
+    { code: 'SZ', name: 'Eswatini', dialCode: '268', flag: 'https://flagcdn.com/w20/sz.png' },
+    { code: 'TC', name: 'Turks and Caicos Islands', dialCode: '1649', flag: 'https://flagcdn.com/w20/tc.png' },
+    { code: 'TD', name: 'Chad', dialCode: '235', flag: 'https://flagcdn.com/w20/td.png' },
+    { code: 'TF', name: 'French Southern Territories', dialCode: '262', flag: 'https://flagcdn.com/w20/tf.png' },
+    { code: 'TG', name: 'Togo', dialCode: '228', flag: 'https://flagcdn.com/w20/tg.png' },
+    { code: 'TH', name: 'Thailand', dialCode: '66', flag: 'https://flagcdn.com/w20/th.png' },
+    { code: 'TJ', name: 'Tajikistan', dialCode: '992', flag: 'https://flagcdn.com/w20/tj.png' },
+    { code: 'TK', name: 'Tokelau', dialCode: '690', flag: 'https://flagcdn.com/w20/tk.png' },
+    { code: 'TL', name: 'East Timor', dialCode: '670', flag: 'https://flagcdn.com/w20/tl.png' },
+    { code: 'TM', name: 'Turkmenistan', dialCode: '993', flag: 'https://flagcdn.com/w20/tm.png' },
+    { code: 'TN', name: 'Tunisia', dialCode: '216', flag: 'https://flagcdn.com/w20/tn.png' },
+    { code: 'TO', name: 'Tonga', dialCode: '676', flag: 'https://flagcdn.com/w20/to.png' },
+    { code: 'TR', name: 'Turkey', dialCode: '90', flag: 'https://flagcdn.com/w20/tr.png' },
+    { code: 'TT', name: 'Trinidad and Tobago', dialCode: '1868', flag: 'https://flagcdn.com/w20/tt.png' },
+    { code: 'TV', name: 'Tuvalu', dialCode: '688', flag: 'https://flagcdn.com/w20/tv.png' },
+    { code: 'TW', name: 'Taiwan', dialCode: '886', flag: 'https://flagcdn.com/w20/tw.png' },
+    { code: 'TZ', name: 'Tanzania', dialCode: '255', flag: 'https://flagcdn.com/w20/tz.png' },
+    { code: 'UA', name: 'Ukraine', dialCode: '380', flag: 'https://flagcdn.com/w20/ua.png' },
+    { code: 'UG', name: 'Uganda', dialCode: '256', flag: 'https://flagcdn.com/w20/ug.png' },
+    { code: 'UM', name: 'United States Minor Outlying Islands', dialCode: '1', flag: 'https://flagcdn.com/w20/um.png' },
+    { code: 'US', name: 'United States', dialCode: '1', flag: 'https://flagcdn.com/w20/us.png' },
+    { code: 'UY', name: 'Uruguay', dialCode: '598', flag: 'https://flagcdn.com/w20/uy.png' },
+    { code: 'UZ', name: 'Uzbekistan', dialCode: '998', flag: 'https://flagcdn.com/w20/uz.png' },
+    { code: 'VA', name: 'Vatican City', dialCode: '379', flag: 'https://flagcdn.com/w20/va.png' },
+    { code: 'VC', name: 'Saint Vincent and the Grenadines', dialCode: '1784', flag: 'https://flagcdn.com/w20/vc.png' },
+    { code: 'VE', name: 'Venezuela', dialCode: '58', flag: 'https://flagcdn.com/w20/ve.png' },
+    { code: 'VG', name: 'British Virgin Islands', dialCode: '1284', flag: 'https://flagcdn.com/w20/vg.png' },
+    { code: 'VI', name: 'United States Virgin Islands', dialCode: '1340', flag: 'https://flagcdn.com/w20/vi.png' },
+    { code: 'VN', name: 'Vietnam', dialCode: '84', flag: 'https://flagcdn.com/w20/vn.png' },
+    { code: 'VU', name: 'Vanuatu', dialCode: '678', flag: 'https://flagcdn.com/w20/vu.png' },
+    { code: 'WF', name: 'Wallis and Futuna', dialCode: '681', flag: 'https://flagcdn.com/w20/wf.png' },
+    { code: 'WS', name: 'Samoa', dialCode: '685', flag: 'https://flagcdn.com/w20/ws.png' },
+    { code: 'YE', name: 'Yemen', dialCode: '967', flag: 'https://flagcdn.com/w20/ye.png' },
+    { code: 'YT', name: 'Mayotte', dialCode: '262', flag: 'https://flagcdn.com/w20/yt.png' },
+    { code: 'ZA', name: 'South Africa', dialCode: '27', flag: 'https://flagcdn.com/w20/za.png' },
+    { code: 'ZM', name: 'Zambia', dialCode: '260', flag: 'https://flagcdn.com/w20/zm.png' },
+    { code: 'ZW', name: 'Zimbabwe', dialCode: '263', flag: 'https://flagcdn.com/w20/zw.png' }
+].sort((a, b) => a.name.localeCompare(b.name))
+

package/components/getAllDefaultComponents.js

@@ -0,0 +1,12 @@
+export function getAllDefaultComponents() {
+    const defaultComponents = {};
+    
+    const files = require.context('.', true, /\.vue$/i)
+    
+    files.keys().map(file => {
+        const componentName = file.match(/\.\/(.*)\.vue/)[1];
+        defaultComponents[componentName] = files(file).default;
+    });
+    
+    return defaultComponents;
+}

package/docs/architecture.md

@@ -0,0 +1,71 @@
+# js-kompo-utils - Architecture
+
+## Two Responsibilities
+
+The system splits app initialization into two classes with distinct roles:
+
+**`KompoJsConfigBuilder`** — Declares *what* the app needs. Knows nothing about how initialization works. Stores components, feature flags, plugins, callbacks. Pure data, no side effects.
+
+**`KompoJsInitializer`** — Executes *how* the app boots. Reads the config and runs a fixed sequence of steps. This is the only place where `require()`, `Vue.component()`, and `window` mutation happen.
+
+The builder can be shared, extended, and modified across apps. The initializer is the part that would change if you migrated to a different framework or build system.
+
+## Why this separation
+
+A typical Laravel `app.js` mixes concerns: imports, global assignments, component registration, library boot, and Vue mounting — all in one imperative file. If one line fails, everything after it breaks.
+
+This system separates *configuration* from *execution*:
+
+- The consumer declares intent: "I want jQuery, these components, this bootstrap"
+- The initializer handles the mechanics: load order, global assignment, Vue setup
+
+This means a consuming app doesn't need to know that Vue must be on `window` before `vue-kompo` loads, or that Google Maps needs a style set before import. The initializer encapsulates that knowledge.
+
+## Initialization sequence
+
+```
+1. bootstrapExecution    — Run the app's Laravel bootstrap (axios, lodash, CSRF)
+2. requireFilesToImport  — Execute file import callbacks (animations, scripts)
+3. bootJqueryIfRequired  — Expose jQuery on window
+4. bootVue               — Load Vue, vue-kompo, register plugins and components
+5. decorateWindow        — Apply window utils and run decorators
+6. bootCkEditorIfRequired
+7. bootMapsIfRequired
+8. instanceApp           — Mount Vue on the DOM
+```
+
+Every step supports `addBeforeStepCallback` / `addAfterStepCallback` for app-specific logic at any point in the sequence.
+
+## defaultConfig
+
+`app.js` exports a `defaultConfig` — a pre-built `KompoJsConfigBuilder` with sensible defaults for kompo apps: all package components, jQuery, CKEditor, Maps, QR reader, window utilities, animations.
+
+A consuming app imports this and layers its own config on top:
+
+```javascript
+const config = defaultConfig
+    .bootstrap(() => require('./bootstrap'))
+    .excludeComponent('VlApexChart')
+    .addWindowDecorator(myDecorator);
+```
+
+This avoids repeating 30+ lines of component registration across every app while keeping full control.
+
+## Error resilience
+
+Steps are categorized as **essential** or **non-essential**:
+
+- **Essential** (`bootstrapExecution`, `bootVue`, `instanceApp`): If these fail, the app can't function. Errors propagate normally — you want these to break the build or show a clear error.
+- **Non-essential** (everything else): Wrapped in try/catch. A failed CKEditor init or animation import logs a warning but doesn't prevent the app from rendering.
+
+This prevents the scenario where a runtime error in a non-critical feature (like tutorials) kills the entire view.
+
+## Replacing the initializer
+
+`KompoJsInitializer` is the only class coupled to Vue 2, webpack `require()`, and the specific boot sequence. If you migrate to Vue 3, Vite, or a different framework:
+
+1. Create a new initializer class (e.g., `KompoVue3Initializer`)
+2. It reads the same `KompoJsConfigBuilder` config
+3. Implements its own step sequence
+
+The config builder stays the same — apps only change which initializer they instantiate.