Vue.js 3.x ComboForm コンポーネント

• 以下のタイプを実装するボタンとエラーメッセージ表示付き input コンポーネント （但し、ボタン部分はエラー色にならない）
  • text
  • password
  • email
  • url
  • number
  • date
  • time
  • file デザイン的に無理だった。。。
• v-model 対応
• 指定可能な属性が異なるため、$attr をバインドし、それだけで対応できない入力 (checkbox, radio 等) は別のコンポーネントとしてで作成する。

• ボタンをクリックすると、Prop で指定されたイベントを送出する。
• 親コンポーネントで変更された値は、v-model 経由で反映される。

ComboForm.js

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 ComboForm = {
  template: `
    <div :class="computedControlWrapperClasses" :style="controlWrapperStyles">
      <div class="input-group">
        <input class="form-control"
          :type="type"
          :class="controlClasses"
          :style="controlStyles"
          :value="value"
          v-bind="$attrs"
          @input="updateValue($event.target.value)"
        >
        <span class="input-group-btn has-error">
          <button class="btn btn-default" type="button" @click="emitButtonEvent">{{ buttonLabel }}</button>
        </span>
      </div>
      <div :class="computedMessageWrapperClasses" :style="messageWrapperStyles">
        <template v-for="msg in errors">
          <span>{{ msg }}</span><br>
        </template>
      </div>
    </div>
  `,
  props: {
    type:                  { type: String, default: 'text' },
    value:                 { type: String },
    buttonLabel:           { type: String, default: 'submit' },
    buttonEvent:           { type: String, default: 'comboclick' },
    errors:                { type: Array,  default: [] },
    controlWrapperClasses: { type: Array,  default: [] },
    controlWrapperStyles:  { type: Object, default: {} },
    controlClasses:        { type: Array,  default: [] },
    controlStyles:         { type: Object, default: {} },
    messageWrapperClasses: { type: Array,  default: [] },
    messageWrapperStyles:  { type: Object, default: {} },
    controlErrorClass:     { type: String, default: 'has-error' },
    messageErrorClass:     { type: String, default: 'text-danger' },
  },
  setup(props, context) {
    const computedControlWrapperClasses = computed(() => {
      return getWrapClass(
        props.errors,
        props.controlWrapperClasses,
        props.controlErrorClass
      )
    })
    const computedMessageWrapperClasses = computed(() => {
      return getWrapClass(
        props.errors,
        props.messageWrapperClasses,
        props.messageErrorClass
      )
    })
    function emitButtonEvent() {
      context.emit(props.buttonEvent, 'dummy')
    }
    function updateValue(v) {
      context.emit('update:value', v)
    }
    return {
      computedControlWrapperClasses,
      computedMessageWrapperClasses,
      emitButtonEvent,
      updateValue
    }
  }
};
export default ComboForm;

<html><style>th, td { padding: 12px !important }</style></html>

※ ここで記述されていない number や date, time などに指定可能なプロパティ min, max, step などは $attrs で input タグに自動的にバインドする.

<html><style>th, td { padding: 12px !important }</style></html>

<html>

<combo-form type="text"
  placeholder="placeholder text"
  :control-wrapper-classes="['col-sm-8']"
  :errors="errors"
  v-model:value="boundText"
  button-event="testEvent"
  @test-event="testClickHandler($event)"
>
</combo-form>

<combo-form type="email"
  placeholder="placeholder text"
  :control-wrapper-classes="['col-sm-8']"
  :errors="errors"
  v-model:value="boundText"
>
</combo-form>

<input-form type="url"
  placeholder="url placeholder text"
  :control-wrapper-classes="['col-sm-8']"
  :errors="errors"
  v-model:value="boundText"
>
</input-form>

<input-form type="number"
  label-text="Number Label"
  step="5"
  :control-wrapper-classes="['col-sm-8']"
  :errors="errors"
  v-model:value="boundText"
>
</input-form>

<input-form type="date"
  min="2021-01-01"
  max="2021-01-20"
  step="5"
  :control-wrapper-classes="['col-sm-8']"
  :errors="errors"
  v-model:value="boundText"
>
</input-form>

<input-form type="time"
  min="08:00:00"
  max="18:00:00"
  step="60"
  :control-wrapper-classes="['col-sm-8']"
  :errors="errors"
  v-model:value="boundText"
></input-form>

<!-- file はちょっと無理がある。。。
<input-form type="file"
  :control-wrapper-classes="['col-sm-8']"
  :errors="errors"
  v-model:value="boundText"
></input-form>
-->

<input type="text" class="form-control" :value="boundText" @input="boundText=$event.target.value">
<input type="text" class="form-control" :value="boundText" @input="boundText=$event.target.value">
<button @click="clearError">ClearError</button>
<button @click="appendError">AppendError</button>

<script type=“module”>
import { createApp } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.esm-browser.js';
import ComboForm from '/_export/code/vuejs/vue3/combo_form?codeblock=0';
import InputForm from '/_export/code/vuejs/vue3/input_form?codeblock=0';

const App = {

components: {
  comboForm: ComboForm,
  inputForm: InputForm
},
data() {
  return {
    boundText: null,
    errors: []
  }
},
methods: {
  testClickHandler() {
    alert('Combo Button Clicked')
  },
  clearError() {
    this.errors.splice(0, 1);
  },
  appendError() {
    this.errors.splice(0, 0, 'error message B')
  }
}

}

createApp(App).mount('#app')
</script>
</html>