/**
 * Field option: Canvas Height
 * Conditionally shown when canvas_size is 'custom'
 */
Vue.component('field-canvas-height', {
    template: '#tmpl-wpuf-field-canvas-height',

    mixins: [
        wpuf_mixins.option_field_mixin,
        wpuf_mixins.form_field_mixin
    ],

    computed: {
        /**
         * Check if canvas size is set to custom
         */
        isCustomSize: function() {
            return this.editing_form_field.canvas_size === 'custom';
        },

        /**
         * Get/set the field value
         */
        value: {
            get: function() {
                if (this.option_field && this.option_field.name && this.editing_form_field) {
                    return this.editing_form_field[this.option_field.name] || this.option_field.default || '';
                }
                return '';
            },
            set: function(newValue) {
                if (this.option_field && this.option_field.name && this.editing_form_field) {
                    this.$set(this.editing_form_field, this.option_field.name, newValue);
                    this.update_value(this.option_field.name, newValue);
                }
            }
        }
    },

    methods: {
        /**
         * Handle focusout event
         */
        on_focusout: function() {
            if (this.option_field && this.option_field.name) {
                this.update_value(this.option_field.name, this.value);
            }
        },

        /**
         * Handle keyup event
         */
        on_keyup: function() {
            // Optional: Add any keyup handling if needed
        }
    }
});

