js-kompo-utils 1.0.0

package/components/VlDateMonthDay.vue

@@ -0,0 +1,327 @@
+<template>
+    <vl-form-field v-bind="$_wrapperAttributes">
+        <div class="vlInputGroup vlDateMonthDay">
+            <div class="vlInputPrepend" v-html="$_icon" />
+            
+            <div class="vlDateMonthDay-selects">
+                <!-- First selector -->
+                <div class="vlDateMonthDay-select-wrapper">
+                    <select 
+                        v-model="firstValue" 
+                        @change="updateValue"
+                        class="vlDateMonthDay-select"
+                        :disabled="$_readOnly"
+                    >
+                        <option value="" disabled>{{ firstPlaceholder }}</option>
+                        <option v-for="opt in firstOptions" :key="opt.value" :value="opt.value">
+                            {{ opt.label }}
+                        </option>
+                    </select>
+                    <svg class="vlDateMonthDay-chevron" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                    </svg>
+                </div>
+
+                <span class="vlDateMonthDay-separator">{{ $_separator }}</span>
+
+                <!-- Second selector -->
+                <div class="vlDateMonthDay-select-wrapper">
+                    <select 
+                        v-model="secondValue" 
+                        @change="updateValue"
+                        class="vlDateMonthDay-select"
+                        :disabled="$_readOnly"
+                    >
+                        <option value="" disabled>{{ secondPlaceholder }}</option>
+                        <option v-for="opt in secondOptions" :key="opt.value" :value="opt.value">
+                            {{ opt.label }}
+                        </option>
+                    </select>
+                    <svg class="vlDateMonthDay-chevron" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                    </svg>
+                </div>
+            </div>
+
+            <div class="vlInputAppend" v-if="!$_readOnly && hasValue">
+                <i class="icon-times cursor-pointer hover:text-red-500 transition-colors" @click.stop="clear" />
+            </div>
+        </div>
+    </vl-form-field>
+</template>
+
+<script>
+import Field from 'vue-kompo/js/form/mixins/Field'
+
+export default {
+    mixins: [Field],
+    data() {
+        return {
+            firstValue: '',
+            secondValue: ''
+        }
+    },
+    mounted() {
+        // Ensure component.value is empty string if nothing is selected initially
+        if (!this.component.value || this.component.value === 'null') {
+            this.component.value = '';
+        }
+    },
+    computed: {
+        $_mode() { return this.$_config('mode') || 'day-month' },
+        $_separator() { return this.$_config('separator') || '-' },
+        $_locale() { return this.$_config('kompo_locale') || 'en' },
+        $_yearStart() { return this.$_config('yearStart') || new Date().getFullYear() - 10 },
+        $_yearEnd() { return this.$_config('yearEnd') || new Date().getFullYear() + 10 },
+        
+        hasValue() {
+            return this.firstValue && this.secondValue;
+        },
+
+        // Determine what the first and second selectors represent
+        firstType() {
+            const modes = {
+                'day-month': 'day',
+                'month-day': 'month',
+                'month-year': 'month',
+                'year-month': 'year'
+            };
+            return modes[this.$_mode] || 'day';
+        },
+        secondType() {
+            const modes = {
+                'day-month': 'month',
+                'month-day': 'day',
+                'month-year': 'year',
+                'year-month': 'month'
+            };
+            return modes[this.$_mode] || 'month';
+        },
+
+        // Placeholders
+        firstPlaceholder() {
+            return this.getPlaceholder(this.firstType);
+        },
+        secondPlaceholder() {
+            return this.getPlaceholder(this.secondType);
+        },
+
+        // Options for first selector
+        firstOptions() {
+            return this.getOptions(this.firstType);
+        },
+        // Options for second selector
+        secondOptions() {
+            return this.getOptions(this.secondType);
+        },
+
+        // Days depend on selected month (if month is selected)
+        daysInMonth() {
+            let month = null;
+            if (this.firstType === 'month') month = this.firstValue;
+            if (this.secondType === 'month') month = this.secondValue;
+            
+            if (month) {
+                return new Date(2024, month, 0).getDate(); // Use leap year for Feb
+            }
+            return 31;
+        },
+
+        months() {
+            const formatter = new Intl.DateTimeFormat(this.$_locale, { month: 'long' });
+            return Array.from({ length: 12 }, (_, i) => {
+                const date = new Date(2024, i, 1);
+                return {
+                    value: i + 1,
+                    label: formatter.format(date)
+                };
+            });
+        },
+
+        years() {
+            const years = [];
+            for (let y = this.$_yearStart; y <= this.$_yearEnd; y++) {
+                years.push({ value: y, label: String(y) });
+            }
+            return years;
+        },
+
+        days() {
+            return Array.from({ length: this.daysInMonth }, (_, i) => ({
+                value: i + 1,
+                label: this.padZero(i + 1)
+            }));
+        }
+    },
+    watch: {
+        'component.value': {
+            immediate: true,
+            handler(value) {
+                this.parseValue(value);
+            }
+        },
+        // Adjust day if month changes and day exceeds days in month
+        secondValue(newVal) {
+            if (this.firstType === 'day' && this.secondType === 'month' && this.firstValue) {
+                const maxDays = new Date(2024, newVal, 0).getDate();
+                if (this.firstValue > maxDays) {
+                    this.firstValue = maxDays;
+                }
+            }
+        },
+        firstValue(newVal) {
+            if (this.firstType === 'month' && this.secondType === 'day' && this.secondValue) {
+                const maxDays = new Date(2024, newVal, 0).getDate();
+                if (this.secondValue > maxDays) {
+                    this.secondValue = maxDays;
+                }
+            }
+        }
+    },
+    methods: {
+        padZero(num) {
+            return String(num).padStart(2, '0');
+        },
+
+        getPlaceholder(type) {
+            const configKey = type + 'Placeholder';
+            const configured = this.$_config(configKey);
+            if (configured) return configured;
+
+            const defaults = {
+                day: 'DD',
+                month: 'MM',
+                year: 'YYYY'
+            };
+            return defaults[type] || '';
+        },
+
+        getOptions(type) {
+            switch (type) {
+                case 'day': return this.days;
+                case 'month': return this.months;
+                case 'year': return this.years;
+                default: return [];
+            }
+        },
+
+        parseValue(value) {
+            if (!value || value === '' || value === 'null') {
+                this.firstValue = '';
+                this.secondValue = '';
+                return;
+            }
+            
+            const separator = this.$_separator;
+            const parts = value.split(separator);
+            
+            if (parts.length === 2) {
+                this.firstValue = parseInt(parts[0], 10) || '';
+                this.secondValue = parseInt(parts[1], 10) || '';
+            }
+        },
+
+        formatValue(val, type) {
+            if (type === 'year') {
+                return String(val);
+            }
+            return this.padZero(val);
+        },
+
+        updateValue() {
+            if (this.firstValue && this.secondValue) {
+                const first = this.formatValue(this.firstValue, this.firstType);
+                const second = this.formatValue(this.secondValue, this.secondType);
+                this.component.value = `${first}${this.$_separator}${second}`;
+            } else if (!this.firstValue && !this.secondValue) {
+                this.component.value = '';
+            }
+            // Don't update if only one is selected (partial state)
+            
+            this.$_changeAction();
+        },
+
+        clear() {
+            this.firstValue = '';
+            this.secondValue = '';
+            this.component.value = '';
+            this.$_changeAction();
+        }
+    }
+}
+</script>
+
+<style scoped>
+.vlDateMonthDay {
+    display: flex;
+    align-items: center;
+}
+
+.vlDateMonthDay-selects {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    gap: 0.25rem;
+}
+
+.vlDateMonthDay-select-wrapper {
+    position: relative;
+    flex: 1;
+}
+
+.vlDateMonthDay-select {
+    width: 100%;
+    appearance: none;
+    -webkit-appearance: none;
+    background-color: transparent;
+    border: none;
+    padding: 0.5rem 1.75rem 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    cursor: pointer;
+    outline: none;
+    background-color: #f9fafb;
+    border-radius: 0.375rem;
+    transition: background-color 0.15s ease;
+}
+
+.vlDateMonthDay-select:hover:not(:disabled) {
+    background-color: #f3f4f6;
+}
+
+.vlDateMonthDay-select:focus {
+    background-color: #eff6ff;
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
+}
+
+.vlDateMonthDay-select:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.vlDateMonthDay-chevron {
+    position: absolute;
+    right: 0.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1rem;
+    height: 1rem;
+    color: #9ca3af;
+    pointer-events: none;
+}
+
+.vlDateMonthDay-separator {
+    color: #6b7280;
+    font-weight: 500;
+    padding: 0 0.25rem;
+    flex-shrink: 0;
+}
+
+/* Style the options */
+.vlDateMonthDay-select option {
+    padding: 0.5rem;
+}
+
+.vlDateMonthDay-select option:first-child {
+    color: #9ca3af;
+}
+</style>

package/components/VlDateTextInput.vue

@@ -0,0 +1,151 @@
+<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="formatDateStructure"
+                @input="onInputDateNumber"
+                @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')},
+
+        validateJustFuture() { return this.$_config('validateJustFuture') },
+
+        formatDateStructure() { return this.$_config('dateFormat') },
+
+        rawDateNumbers() { return this.visualValue.replace(/\D/g, '') },
+
+        quantityOfNumbersDate() { return this.formatDateStructure.replace(/[^a-zA-Z]/g, '').length },
+
+        formatedDate() {
+            return this.formatDate(this.rawDateNumbers);
+        },
+
+        rawDate() {
+            const rawDateNumbers = this.rawDateNumbers;
+            const formatParts = this.formatDateStructure.split(/[^a-zA-Z]+/);
+            const dateParts = [];
+            let index = 0;
+
+            formatParts.forEach(part => {
+                dateParts.push(rawDateNumbers.slice(index, index + part.length));
+                index += part.length;
+            });
+
+            if (!dateParts.length) return null;
+
+            const [day, month, year] = formatParts.length === 3 ? dateParts : [null, ...dateParts];
+
+            if (formatParts.length === 3) {
+                return new Date(`${month}-${day}-${year}`);
+            } else {
+                return new Date(`${month}-01-${year}`);
+            }
+        },
+
+        showError() {
+            return !this.isValidDate && !this.focused && this.dirty;
+        },
+
+        isValidDate() {
+            const date = this.rawDate;
+
+            if (!date || date == 'Invalid Date') return false;
+
+            if (this.validateJustFuture) {
+                if (date < new Date()) return false;
+            }
+
+            return true;
+        }
+    },
+    methods: {
+        focus(){
+            this.$refs.input.focus()
+        },
+        
+        onInputDateNumber() {
+            this.visualValue = this.formatedDate;
+            this.component.value = this.isValidDate ? this.rawDate.toLocaleDateString() : null;
+        },
+
+        onFocus() {
+            this.focused = true;
+            this.dirty = true;
+        },
+        dateToRawNumbers(date) {
+            if (!date) return '';
+
+            return (new Date(date)).toLocaleDateString().replace(/\D/g, '');
+        },
+        formatDate(rawDateNumbers) {
+            let formatted = '';
+            let index = 0;
+
+            for (let char of this.formatDateStructure) {
+                if (!rawDateNumbers[index]) break;
+
+                if (/[^a-zA-Z]/.test(char)) {
+                    formatted += char;
+                } else {
+                    formatted += rawDateNumbers[index] || '';
+                    index++;
+                }
+            }
+
+            return formatted;
+        },
+    },
+    mounted(){
+        if(this.component.value) {
+            this.visualValue = this.component.value
+            this.onInputDateNumber()
+        }
+
+        if(this.focusOnLoad)
+            this.focus()
+    },
+}
+</script>
+
+<style scoped>
+.invalid-icon {
+    color: red;
+    font-weight: bold;
+    margin-left: 8px;
+    cursor: pointer;
+}
+</style>