====== Vue.js 3.x LabeledComboForm コンポーネント ======
===== 要求 =====
* input の以下のタイプを実装するラベル付きコンポーネント
* text
* password
* email
* url
* number
* date
* time
* v-model 対応
* 再利用可能なコンポーネントとする。
* 指定可能な属性が異なるため、$attr をバインドするが、対応できない場合は別のコンポーネントとしてで作成する。
===== コード =====
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: `
`,
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 のカスタムイベントはここでリッスンして再発行しなくても、バブリングで親コンポーネントに届く。
===== Props =====
^ Property ^ Type ^ Default ^ Description ^
| **type** | String | 'text' | input タグの type 指定 (text, password, email, url, date, time) |
| **value** | String | | v-model プロパティとして value を持つ |
| **buttonEvent** | String | | コンボボタンをクリックした際の、イベント名を指定する |
| **controlWrapperClasses** | Array | [] | select を囲う div タグに反映するクラス |
| **controlWrapperStyles** | Object | {} | select を囲う div タグに反映するスタイル |
| **controlClasses** | Array | [] | 入力コントロールに反映するクラス |
| **controlStyles** | Object | {} | 入力コントロールに反映するスタイル |
| **messageWrapperClasses** | Array | [] | エラーメッセージを囲う div タグに反映するクラス |
| **errors** | Array | [] | エラーメッセージの配列 |
| **controlErrorClass** | String | 'has-error' | コントロールに反映するエラークラス |
| **messageErrorClass** | String | 'text-danger' | エラーメッセージに反映するエラークラス |
**※ ここで記述されていない number や date, time などに指定可能なプロパティ min, max, step などは $attrs で input タグに自動的にバインドする.**
===== Events =====
^ Event ^ Value ^
| **update:value** | 選択された値 |
===== Demo =====
==== テーブルライクなレイアウト ====
Test