js-kompo-utils 1.0.0

package/components/VlPartialDate.vue

@@ -0,0 +1,283 @@
+<template>
+    <vl-form-field v-bind="$_wrapperAttributes" @labelclick="focus">
+        <div class="vlInputGroup">
+            <div class="vlInputPrepend" @click.stop="openCalendar" v-html="$_icon" />
+            <flat-pickr 
+                v-model="internalValue"                                                    
+                class="vlFormControl"
+                ref="flatpickr"
+                v-bind="$_attributes"
+                v-on="$_events" 
+                autocomplete="off" />
+            <div class="vlInputAppend" v-if="!$_readOnly">
+                <i v-if="component.value" 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'
+
+import flatPickr from 'vue-flatpickr-component'; 
+import 'flatpickr/dist/flatpickr.css';
+import 'flatpickr/dist/themes/airbnb.css';
+
+import { French } from "flatpickr/dist/l10n/fr.js"
+
+export default {
+    mixins: [Field],
+    components: { flatPickr },
+    data() {
+        return {
+            internalValue: null
+        }
+    },
+    mounted() {
+        this.parseInitialValue();
+        
+        // For day-month mode, hide year elements after flatpickr is ready
+        if (this.$_mode === 'day-month') {
+            this.$nextTick(() => {
+                this.hideYearElements();
+            });
+        }
+    },
+    computed: {
+        $_mode() { return this.$_config('mode') || 'day-month' },
+        $_separator() { return this.$_config('separator') || '-' },
+        $_locale() { return this.$_config('kompo_locale') },
+        $_placeholder() { return this.$_config('placeholder') || this.defaultPlaceholder },
+        $_yearStart() { return this.$_config('yearStart') || new Date().getFullYear() - 10 },
+        $_yearEnd() { return this.$_config('yearEnd') || new Date().getFullYear() + 10 },
+
+        defaultPlaceholder() {
+            const placeholders = {
+                'day-month': 'DD-MM',
+                'month-year': 'MM-YYYY'
+            };
+            return placeholders[this.$_mode] || 'DD-MM';
+        },
+
+        // Flatpickr date format (internal)
+        internalDateFormat() {
+            if (this.$_mode === 'month-year') {
+                return 'Y-m';
+            }
+            return 'Y-m-d';
+        },
+
+        // Display format
+        altFormat() {
+            if (this.$_mode === 'month-year') {
+                return 'F Y'; // "January 2026"
+            }
+            return 'd F'; // "25 January" - no year shown
+        },
+
+        $_attributes() {
+            const isMonthYear = this.$_mode === 'month-year';
+            const isDayMonth = this.$_mode === 'day-month';
+            
+            return {
+                ...this.$_defaultFieldAttributes,
+                placeholder: this.$_placeholder,
+                config: Object.assign({
+                    wrap: true,
+                    clickOpens: this.$_config('attrs')?.['disabled'] ? false : true,
+                    dateFormat: this.internalDateFormat,
+                    allowInput: false,
+                    altInput: true,
+                    altInputClass: 'vlFormControl',
+                    altFormat: this.altFormat,
+                    // Disable year navigation for day-month mode
+                    ...(isDayMonth ? {
+                        onReady: (selectedDates, dateStr, instance) => {
+                            this.hideYearElements(instance);
+                        },
+                        onOpen: (selectedDates, dateStr, instance) => {
+                            this.hideYearElements(instance);
+                        },
+                        onMonthChange: (selectedDates, dateStr, instance) => {
+                            this.hideYearElements(instance);
+                        }
+                    } : {}),
+                    // For month-year mode
+                    ...(isMonthYear ? {
+                        plugins: [this.monthSelectPlugin()],
+                    } : {}),
+                    minDate: isMonthYear ? `${this.$_yearStart}-01` : undefined,
+                    maxDate: isMonthYear ? `${this.$_yearEnd}-12` : undefined,
+                }, 
+                    (this.$_locale == 'fr') ? { locale: French } : {},
+                ),
+                disabled: this.$_readOnly ? true : false
+            }
+        },
+
+        $_events() { 
+            return {
+                ...this.$_defaultFieldEvents,
+                blur: () => {},
+                change: () => {},
+                'on-change': this.onChange,
+                'on-close': this.onClose,
+                'on-open': this.onOpen
+            }
+        }
+    },
+    watch: {
+        'component.value': {
+            handler(value) {
+                if (!value) {
+                    this.internalValue = null;
+                }
+            }
+        }
+    },
+    methods: {
+        hideYearElements(instance) {
+            const fp = instance || this.$refs.flatpickr?.fp;
+            if (!fp || !fp.calendarContainer) return;
+
+            const container = fp.calendarContainer;
+            
+            // Hide year input/display
+            const yearInput = container.querySelector('.numInput.cur-year');
+            if (yearInput) {
+                yearInput.style.display = 'none';
+            }
+
+            // Hide year arrows
+            const yearArrowUp = container.querySelector('.arrowUp');
+            const yearArrowDown = container.querySelector('.arrowDown');
+            if (yearArrowUp) yearArrowUp.style.display = 'none';
+            if (yearArrowDown) yearArrowDown.style.display = 'none';
+
+            // Add class to container for additional CSS targeting
+            container.classList.add('flatpickr-no-year');
+        },
+
+        monthSelectPlugin() {
+            return (fp) => {
+                fp.config.dateFormat = 'Y-m';
+                
+                return {
+                    onReady: function() {
+                        fp.calendarContainer.classList.add('flatpickr-monthSelect-months');
+                        const days = fp.calendarContainer.querySelector('.flatpickr-days');
+                        if (days) days.style.display = 'none';
+                    }
+                };
+            };
+        },
+
+        parseInitialValue() {
+            const value = this.component.value;
+            if (!value) {
+                this.internalValue = null;
+                return;
+            }
+
+            const separator = this.$_separator;
+            const parts = value.split(separator);
+
+            if (this.$_mode === 'month-year' && parts.length === 2) {
+                const month = parts[0].padStart(2, '0');
+                const year = parts[1];
+                this.internalValue = `${year}-${month}`;
+            } else if (this.$_mode === 'day-month' && parts.length === 2) {
+                const day = parts[0].padStart(2, '0');
+                const month = parts[1].padStart(2, '0');
+                const year = new Date().getFullYear();
+                this.internalValue = `${year}-${month}-${day}`;
+            }
+        },
+
+        formatOutput(dateStr) {
+            if (!dateStr) return '';
+
+            const separator = this.$_separator;
+
+            if (this.$_mode === 'month-year') {
+                const parts = dateStr.split('-');
+                if (parts.length >= 2) {
+                    return `${parts[1]}${separator}${parts[0]}`;
+                }
+            } else {
+                const parts = dateStr.split('-');
+                if (parts.length >= 3) {
+                    return `${parts[2]}${separator}${parts[1]}`;
+                }
+            }
+            return '';
+        },
+
+        openCalendar() {
+            this.$refs.flatpickr.fp.open();
+        },
+
+        focus() {
+            this.$refs.flatpickr.fp.open();
+        },
+
+        onOpen(selectedDates, dateStr, instance) {
+            if (this.$_mode === 'day-month') {
+                this.$nextTick(() => {
+                    this.hideYearElements(instance);
+                });
+            }
+        },
+
+        onChange(selectedDates, dateStr, instance) {
+            const outputValue = this.formatOutput(dateStr);
+            this.component.value = outputValue;
+            
+            this.$_clearErrors();
+            this.$_changeAction();
+        },
+
+        onClose(obj, value) {
+            this.$_blurAction();
+        },
+
+        clear() {
+            this.internalValue = null;
+            this.component.value = '';
+            this.$_blurAction();
+            this.$_changeAction();
+        }
+    }
+}
+</script>
+
+<style>
+/* Hide year elements for day-month mode */
+.flatpickr-no-year .numInput.cur-year,
+.flatpickr-no-year .arrowUp,
+.flatpickr-no-year .arrowDown {
+    display: none !important;
+}
+
+.flatpickr-no-year .flatpickr-current-month {
+    padding-top: 0;
+}
+
+.flatpickr-no-year .flatpickr-current-month .flatpickr-monthDropdown-months {
+    margin-left: 0;
+}
+
+/* Month picker specific styles */
+.flatpickr-monthSelect-months .flatpickr-days {
+    display: none !important;
+}
+
+.flatpickr-monthSelect-months .flatpickr-current-month {
+    font-size: 1.1rem;
+}
+
+.flatpickr-monthSelect-months .flatpickr-current-month select,
+.flatpickr-monthSelect-months .flatpickr-current-month input {
+    font-size: 1rem;
+}
+</style>

package/components/VlPasswordInput.vue

@@ -0,0 +1,358 @@
+<template>
+    <vl-form-field v-bind="$_wrapperAttributes">
+        <div :class="inputGroupClass">
+            <!-- Toggle button on the left -->
+            <button
+                v-if="showToggle && togglePosition === 'left'"
+                type="button"
+                class="toggle-button toggle-left"
+                :class="{ 'disabled': !allowToggle }"
+                @click="togglePasswordVisibility"
+                :disabled="!allowToggle"
+                :title="isVisible ? 'Hide password' : 'Show password'"
+            >
+                <span class="toggle-icon" v-html="currentToggleIcon"></span>
+            </button>
+
+            <!-- Password Input -->
+            <input
+                ref="passwordInput"
+                class="vlFormControl password-input"
+                :class="{ 'has-left-toggle': showToggle && togglePosition === 'left', 'has-right-toggle': showToggle && togglePosition === 'right' }"
+                :type="isVisible ? 'text' : 'password'"
+                :value="component?.value || ''"
+                v-bind="$_attributes"
+                v-on="$_events"
+                @input="onPasswordInput"
+                @focus="onPasswordFocus"
+                @blur="onPasswordBlur"
+            />
+
+            <!-- Toggle button on the right -->
+            <button
+                v-if="showToggle && togglePosition === 'right'"
+                type="button"
+                class="toggle-button toggle-right"
+                :class="{ 'disabled': !allowToggle }"
+                @click="togglePasswordVisibility"
+                :disabled="!allowToggle"
+                :title="isVisible ? 'Hide password' : 'Show password'"
+            >
+                <span class="toggle-icon" v-html="currentToggleIcon"></span>
+            </button>
+        </div>
+
+        <!-- Optional Strength Indicator -->
+        <div v-if="strengthIndicator && component?.value" class="strength-indicator">
+            <div class="strength-bar">
+                <div
+                    class="strength-fill"
+                    :class="strengthClass"
+                    :style="{ width: strengthPercentage + '%' }"
+                ></div>
+            </div>
+            <div class="strength-text" :class="strengthClass">
+                {{ strengthLabel }}
+            </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 {
+    name: 'VlPasswordInput',
+    mixins: [Field, HasInputAttributes],
+
+    data() {
+        return {
+            isVisible: false,
+            isFocused: false,
+        }
+    },
+
+    computed: {
+        $_attributes() {
+            return {
+                ...this.$_defaultFieldAttributes,
+                ...this.$_defaultInputAttributes,
+                autocomplete: 'current-password',
+            }
+        },
+
+        showToggle() {
+            return this.$_config('showToggle') !== false
+        },
+
+        togglePosition() {
+            return this.$_config('togglePosition') || 'right'
+        },
+
+        allowToggle() {
+            return this.$_config('allowToggle') !== false
+        },
+
+        toggleIconShow() {
+            return this.$_config('toggleIconShow') || this.defaultShowIcon
+        },
+
+        toggleIconHide() {
+            return this.$_config('toggleIconHide') || this.defaultHideIcon
+        },
+
+        defaultShowIcon() {
+            return `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                <circle cx="12" cy="12" r="3"></circle>
+            </svg>`
+        },
+
+        defaultHideIcon() {
+            return `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
+                <line x1="1" y1="1" x2="23" y2="23"></line>
+            </svg>`
+        },
+
+        strengthIndicator() {
+            return this.$_config('strengthIndicator') === true
+        },
+
+        currentToggleIcon() {
+            return this.isVisible ? this.toggleIconHide : this.toggleIconShow
+        },
+
+        inputGroupClass() {
+            const baseClass = 'vlInputGroup rounded-lg flex items-stretch'
+            const errorClass = this.showError ? (this.$_config('invalidClass') || '!border !border-red-600') : ''
+            return `${baseClass} ${errorClass}`
+        },
+
+        showError() {
+            const validateFront = this.$_config('validateFront')
+            if (!validateFront) return false
+
+            return this.component?.value && !this.isValidPassword && !this.isFocused
+        },
+
+        isValidPassword() {
+            // Basic validation - can be extended
+            const value = this.component?.value || ''
+            return value.length >= 1 // At least one character
+        },
+
+        // Password strength calculation
+        passwordStrength() {
+            const password = this.component?.value || ''
+            if (!password) return 0
+
+            let score = 0
+
+            // Length
+            if (password.length >= 8) score += 25
+            if (password.length >= 12) score += 25
+
+            // Character variety
+            if (/[a-z]/.test(password)) score += 12.5
+            if (/[A-Z]/.test(password)) score += 12.5
+            if (/[0-9]/.test(password)) score += 12.5
+            if (/[^A-Za-z0-9]/.test(password)) score += 12.5
+
+            return Math.min(score, 100)
+        },
+
+        strengthPercentage() {
+            return this.passwordStrength
+        },
+
+        strengthClass() {
+            const strength = this.passwordStrength
+            if (strength < 25) return 'strength-weak'
+            if (strength < 50) return 'strength-fair'
+            if (strength < 75) return 'strength-good'
+            return 'strength-strong'
+        },
+
+        strengthLabel() {
+            const strength = this.passwordStrength
+            if (strength < 25) return 'Weak'
+            if (strength < 50) return 'Fair'
+            if (strength < 75) return 'Good'
+            return 'Strong'
+        }
+    },
+
+    methods: {
+        togglePasswordVisibility() {
+            if (!this.allowToggle) return
+
+            this.isVisible = !this.isVisible
+
+            // Keep focus on input after toggle
+            this.$nextTick(() => {
+                this.focusPasswordInput()
+            })
+        },
+
+        onPasswordInput(event) {
+            const value = event.target.value
+            this.component.value = value
+        },
+
+        onPasswordFocus() {
+            this.isFocused = true
+        },
+
+        onPasswordBlur() {
+            this.isFocused = false
+        },
+
+        focusPasswordInput() {
+            if (this.$refs.passwordInput) {
+                this.$refs.passwordInput.focus()
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+.vlInputGroup {
+    display: flex;
+    align-items: stretch;
+    border-radius: 0.5rem;
+    position: relative;
+}
+
+.toggle-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem;
+    border: 1px solid #d1d5db;
+    background: white;
+    cursor: pointer;
+    user-select: none;
+    width: 40px;
+    min-width: 40px;
+}
+
+.toggle-button:hover:not(.disabled) {
+    background-color: white;
+    border-color: #d1d5db;
+}
+
+.toggle-button:hover:not(.disabled) .toggle-icon svg {
+    stroke-width: 3;
+    stroke: #374151;
+}
+
+.toggle-button:focus {
+    outline: none;
+    border-color: #d1d5db;
+    box-shadow: none;
+}
+
+.toggle-button:active {
+    background-color: white;
+    border-color: #d1d5db;
+    box-shadow: none;
+    transform: none;
+}
+
+.toggle-button.disabled {
+    background-color: #f3f4f6;
+    color: #9ca3af;
+    cursor: not-allowed;
+}
+
+.toggle-left {
+    border-right: none;
+    border-radius: 0.5rem 0 0 0.5rem;
+    padding-left: 1.25rem;
+}
+
+.toggle-right {
+    border-left: none;
+    border-radius: 0 0.5rem 0.5rem 0;
+    padding-right: 1.25rem;
+}
+
+.toggle-icon {
+    font-size: 1rem;
+    line-height: 1;
+}
+
+.password-input.has-left-toggle {
+    border-radius: 0 0.5rem 0.5rem 0;
+    border-left: none;
+}
+
+.password-input.has-right-toggle {
+    border-radius: 0.5rem 0 0 0.5rem;
+    border-right: none;
+}
+
+.password-input:not(.has-left-toggle):not(.has-right-toggle) {
+    border-radius: 0.5rem;
+}
+
+/* Strength Indicator */
+.strength-indicator {
+    margin-top: 1rem;
+}
+
+.strength-bar {
+    height: 4px;
+    background-color: #e5e7eb;
+    border-radius: 2px;
+    overflow: hidden;
+    margin-bottom: 0.25rem;
+}
+
+.strength-fill {
+    height: 100%;
+    transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
+    border-radius: 2px;
+}
+
+.strength-text {
+    font-size: 0.75rem;
+    font-weight: 500;
+}
+
+/* Strength Colors */
+.strength-weak {
+    color: #dc2626;
+}
+.strength-weak .strength-fill,
+.strength-fill.strength-weak {
+    background-color: #dc2626;
+}
+
+.strength-fair {
+    color: #ea580c;
+}
+.strength-fair .strength-fill,
+.strength-fill.strength-fair {
+    background-color: #ea580c;
+}
+
+.strength-good {
+    color: #ca8a04;
+}
+.strength-good .strength-fill,
+.strength-fill.strength-good {
+    background-color: #ca8a04;
+}
+
+.strength-strong {
+    color: #16a34a;
+}
+.strength-strong .strength-fill,
+.strength-fill.strength-strong {
+    background-color: #16a34a;
+}
+</style>