Apply 'k-...' classes to html textarea

[Vincent]

On most Native Kendo Vue components the following classes are applied depending on the state: 

• 'k-floating-label-container'         
• 'k-state-focused'          
• 'k-state-empty'         
• 'k-autofill'         
• 'k-state-invalid'         
• 'k-rtl'

'k-state-invalid' for instance adds a red border around the Kendo Input component:



In this example the red line isn't added to the html textarea:
https://www.telerik.com/kendo-vue-ui/components/form/guidelines-with-examples/#toc-vue-form-inputs

Is there an easy and efficient way to add (some of) these classes to a native html textarea?

[Petar]

Hi Vincent,

Here is a StackBlitz example demonstrating how we can add the k-state-invalid class to the native TextArea, in the context of the example you linked.

To achieve the targeted functionality, I've edited the FormTextArea.vue file by defining the marked in yellow code below:

<template>
    <fieldwrapper>
        <klabel :editor-id="id" :editor-valid="valid">
        {{label}}
        </klabel>
        <div class="k-form-field-wrap">
        <span :class="['k-textarea', textAreaValidClass]">
            <textarea 
                class="k-input"
                style="margin-top: 0px; margin-bottom: 0px; height: 36px;"
                :valid="valid"
                :value="value"
                :id="id"
                @change="handleChange"
                @blur="handleBlur"
                @focus="handleFocus"
            ></textarea>
          </span>
            <error v-if="showValidationMessage">
                {{validationMessage}}
            </error>
            <hint v-else>{{hint}}</hint>
        </div>
    </fieldwrapper> 
</template>

To make the above work as expected, the textAreaValidClass is defined as a computed property as follows:

textAreaValidClass(){
    return this.valid?"":"k-state-invalid"
}

Using the above approach, you can add the classes you listed to the TextArea when you need a given stylization.

Check the linked example and let me know if it demonstrates what you need to implement in your application.

Regards,
Petar
Progress Telerik

[Vincent]

Hi Petar,

This is a great way to add the k-state invalid class however for the focused class I've made this little wrapper component which copies some of the logic from Kendo Input:

<script>
import { h, ref, computed } from "vue";

export default {
    props: {
        component: String,
        dir: String,
        placeholder: String,
        className: String,
        floatingLabelContainer: { type: Boolean, default: false },
        valid: { type: Boolean, default: true },
    },
    setup(props, { emit, slots }) {
        const focused = ref(false);
        // const autofill = ref(false)

        const computedValue = computed(() => {
            return false;
        });

        const spanClasses = computed(() => {
            // console.log(props.className)

            // const local = props.className
            return {
                [props.className]: true,
                "k-floating-label-container": props.floatingLabelContainer,
                "k-state-focused": focused.value,
                "k-state-empty": !(
                    (
                        (computedValue.value === 0
                            ? true
                            : computedValue.value) || props.placeholder
                    )
                    // || autofill.value
                ),
                // "k-autofill": autofill.value,
                "k-state-invalid": !props.valid,
                "k-rtl": props.dir === "rtl",
            };
        });

        const newProps = {
            onChange(e) {
                // console.log('onchange')
                emit("change", e);
            },

            onBlur(e) {
                // console.log('onblur')
                focused.value = false;
                emit("blur", e);
            },

            onFocus(e) {
                // console.log('onfocus')
                focused.value = true;
                emit("focus", e);
            },
        };

        const slot = slots.default ? slots.default() : [];
        const namedSlot = slots.namedSlot
            ? slots.namedSlot(props.component)
            : [];
        // Check if component prop was set, if so use it's name to pass prop functions to render template
        const template = (prop) =>
            slots[props.component] ? slots[props.component](prop) : [];

        return () =>
            h(
                "span",
                {
                    class: spanClasses.value,
                    // onChange: props.handleChange,
                },
                [template({ props: newProps }), namedSlot, slot]
            );
    },
};
</script>

<style></style>

This then allows me to wrap my textarea like so:

 <KendoStateWrapper :valid="valid"
                               @change="handleChange"
                               @blur="handleBlur"
                               @focus="handleFocus"
                               :className="`k-textarea`"
                               :component="'inputTemplate'">
                <template #inputTemplate="{ props }">
                    <textarea :id="id"
                              :value="value"
                              :placeholder="placeholder"
                              v-bind="props"
                              @blur="props.onBlur"
                              @change="props.onChange"
                              @focus="props.onFocus"
                              rows="3"
                              class="k-input">
                    </textarea>
                </template>
            </KendoStateWrapper>

[Petar]

Hi Vincent,

Thank you for sharing your implementation with the community! It will surely help someone who needs to style the textarea DOM element.