Vue.js 3.x で作る LabeledForm

import { computed } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.esm-browser.js';
import { getWrapClass } from 'https://wws.jp/_export/code/vuejs/vue3/form_utils?codeblock=0';
 
const LabeledForm = {
  template: `
    <div class="row" :class="mergedFormWrapperClasses" :style="formWrapperStyles">
      <div :class="computedLabelWrapperClasses" :style="labelWrapperStyles">
        <slot name="label"><label>{{ labelText }}</label></slot>
      </div>
      <slot></slot>
    </div>
  `,
  props: {
    errors:                { type: Array,  default: [] },
    formWrapperClasses:    { type: Array,  default: [] },
    formWrapperStyles:     { type: Object, default: {} },
    labelWrapperClasses:   { type: Array,  default: [] },
    labelWrapperStyles:    { type: Object, default: { paddingTop: '7px' } },
    labelText:             { type: String },
    formErrorClass:        { type: String, default: 'has-error' },
    labelErrorClass:       { type: String, default: 'text-danger' },
  },
 
  components: {},
 
  setup(props, context) {
    const mergedFormWrapperClasses = computed(() => {
      return getWrapClass(
        props.errors,
        props.formWrapperClasses,
        props.formErrorClass
      )
    })
 
    const computedLabelWrapperClasses = computed(() => {
      return getWrapClass(
        props.errors,
        props.labelWrapperClasses,
        props.labelErrorClass
      )
    })
 
    return {
      mergedFormWrapperClasses,
      computedLabelWrapperClasses,
    }
  }
}
export default LabeledForm ;