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

• input の以下のタイプを実装するラベル付きコンポーネント
  • text
  • password
  • email
  • url
  • number
  • date
  • time
• v-model 対応
• 再利用可能なコンポーネントとする。
• 指定可能な属性が異なるため、$attr をバインドするが、対応できない場合は別のコンポーネントとしてで作成する。

LabeledComboForm.js

import LabeledForm from '/_export/code/vuejs/vue3/labeled_form?codeblock=0';
import ComboForm   from '/_export/code/vuejs/vue3/combo_form?codeblock=0';
 
const LabeledComboForm = {
  template: `
    <labeled-form
      :errors="errors"
      :label-text="labelText"
      :form-wrapper-classes="formWrapperClasses"
      :form-wrapper-styles="formWrapperStyles"
      :label-wrapper-classes="labelWrapperClasses"
      :label-wrapper-styles="labelWrapperStyles"
      :form-error-class="formErrorClass"
      :label-error-class="labelErrorClass"
    >
      <template #label v-if="!labelText">
        <slot name="label">
        </slot>
      </template>
      <combo-form
        :type="type"
        v-bind="$attrs"
        :value="value"
        @update:value="updateValue"
        :button-label="buttonLabel"
        :button-event="buttonEvent"
        :errors="errors"
        :control-wrapper-classes="controlWrapperClasses"
        :control-wrapper-styles="controlWrapperStyles"
        :control-classes="controlClasses"
        :control-styles="controlStyles"
        :control-error-class="controlErrorClass"
        :message-wrapper-classes="messageWrapperClasses"
        :message-wrapper-styles="messageWrapperStyles"
        :message-error-class="messageErrorClass"
      >
      </combo-form>
    </labeled-form>
  `,
  components: {
    labeledForm: LabeledForm,
    comboForm: ComboForm
  },
  props: {
    type:                  { type: String, default: 'text' },
    value:                 { type: String },
    buttonLabel:           { type: String, default: 'submit' },
    buttonEvent:           { type: String, default: 'comboClick' },
    errors:                { type: Array,  default: [] },
    labelText:             { type: String },
    formWrapperClasses:    { type: Array,  default: [] },
    formWrapperStyles:     { type: Object, default: {} },
    labelWrapperClasses:   { type: Array,  default: [] },
    labelWrapperStyles:    { type: Object, 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: {} },
    formErrorClass:        { type: String, default: 'has-error' },
    labelErrorClass:       { type: String, default: 'text-danger' },
    controlErrorClass:     { type: String, default: 'is-invalid' },
    messageErrorClass:     { type: String, default: 'text-danger' },
  },
  setup(props, context) {
    function updateValue(v) {
      context.emit('update:value', v)
    }
    return {
      updateValue
    }
  }
};
export default LabeledComboForm;

※ ComboButton のカスタムイベントはここでリッスンして再発行しなくても、バブリングで親コンポーネントに届く。

<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>
<link rel=“stylesheet” href=“/_export/code/vuejs/vue3/form_styles?codeblock=0”>

<labeled-combo-form type="text"
  v-model:value="testText"
  button-label="test"
  button-event="test"
  @test="handler"
  :errors="[]"
  :form-wrapper-classes="['table-form-wrapper']"
  :label-wrapper-classes="['col-sm-4', 'table-label-wrapper']"
  :control-wrapper-classes="['col-sm-8', 'table-control-wrapper']"
>
  <template #label>
    <span class="label label-info">Test</span> <label>Test Label</label>
  </template>
</labeled-combo-form>

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

const App2 = {

components: {
  labeledComboForm: LabeledComboForm
},
data() {
  return {
    testText: 'ABC',
    errors: ['error message A', 'error message B']
  }
},
methods: {
  handler: function() {
    alert('fired!');
  }
}

}

createApp(App2).mount('#app2')
</script>

</html>