ch3chi-commons-vue 1.2.0 → 1.8.1

package/src/components/form/CRadioPlatFormField.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { useRadioFormField } from '../../composables/useRadioFormField'
+import { COptionItem } from '../../model/FormOptions'
+import { IBSFieldStyleConfig } from '../../model/BSFieldStyleConfig'
+
+const props = defineProps<{
+  label?: string
+  required?: boolean
+  name: string
+  optionList: COptionItem[]
+  readMode?: boolean
+  styleConfig?: IBSFieldStyleConfig
+}>()
+
+const {
+  useOptionList,
+  bStyleConfig,
+  fieldModel,
+  fieldRef,
+  isRequired,
+  isReadMode,
+  selectedText,
+  hasFormFieldError
+} = useRadioFormField(props)
+</script>
+
+<template>
+  <div :class="bStyleConfig.containerClass">
+    <label v-if="props.label && !bStyleConfig.hideLabel" :class="bStyleConfig.labelClass">
+      {{props.label}}
+      <span v-if="isRequired" :class="bStyleConfig.requiredLabelClass">{{bStyleConfig.requiredLabelText}}</span>
+    </label>
+    <template v-if="isReadMode">
+      <div>
+        <span :class="bStyleConfig.plainTextClass">
+          {{ selectedText }}
+        </span>
+        <input type="hidden" :name="props.name" v-model="fieldRef"/>
+      </div>
+    </template>
+    <template v-else>
+      <div>
+        <div class="c-platradio-wrapper" :class="bStyleConfig.radioWrapperClass"
+             v-for="optionItem in useOptionList" :key="optionItem.id">
+          <label :class="bStyleConfig.radioLabelClass" :for="`radio-${props.name}-${optionItem.id}`">
+            <input type="radio" :class="bStyleConfig.radioClass"
+                   :id="`radio-${props.name}-${optionItem.id}`"
+                   :name="props.name" :value="optionItem.value"
+                   v-model="fieldRef"
+                   v-form-invalid="fieldModel" />
+            {{optionItem.text}}
+            <i :class="bStyleConfig.radioHelperIconClass"></i>
+          </label>
+        </div>
+        <div v-if="hasFormFieldError(fieldModel)" :class="bStyleConfig.errorClass">
+          {{ fieldModel.errorMessage }}
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+div.c-platradio-wrapper label {
+  cursor: pointer;
+}
+</style>

package/src/components/form/CSelectFormField.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import {computed, inject, onMounted, ref, Ref, watch, watchEffect} from 'vue';
+import {BaseFormDataModel, hasFormFieldError} from "../../model/BaseFormDataModel";
+import {COptionItem} from "../../model/FormOptions";
+import {v4 as uuidv4} from 'uuid';
+import _ from "lodash";
+import {EmptyDataModel} from "../../model/EmptyDataModel";
+import {BSFieldStyleConfig, IBSFieldStyleConfig} from "../../model/BSFieldStyleConfig";
+
+const props = withDefaults(defineProps<{
+  id?: string; // 欄位 ID
+  label?: string; // 欄位標籤
+  required?: boolean; // 是否為必填
+  requiredReactive?: boolean; // 是否為必填 (響應式)
+  placeholder?: string; // 輸入提示文字
+  name: string; // 欄位名稱
+  optionList?: COptionItem[] | Promise<COptionItem[]>; // 選項列表
+  readMode?: boolean; // 是否為閱讀模式，只會顯示文字
+  dependentField?: string; // 連動欄位名稱
+  fetchOptions?: (linkedValue: any) => Promise<COptionItem[]>; // 取得動態選項的函式
+  styleConfig?: IBSFieldStyleConfig; // BS 欄位樣式設定
+}>(), {
+  placeholder: '請選擇項目',
+  requiredReactive: undefined
+});
+
+// ----- view model -----
+const viewModel = inject('c-formViewModel', new EmptyDataModel()) as BaseFormDataModel;
+if (!viewModel) {
+  console.error('CSelectFormField: viewModel not found, please provide "c-formViewModel" in parent component');
+}
+
+// BSFieldStyleConfig
+const bStyleConfig = BSFieldStyleConfig.mix({
+  plainTextClass: 'form-control-plaintext bg-light border rounded px-3 d-flex align-items-center'
+}, props.styleConfig);
+
+// field model
+const formFieldMap = viewModel.formFieldMap;
+const fieldModel = _.get(formFieldMap, props.name);
+const fieldRef = fieldModel?.value as Ref<string | null>;
+
+// ----- 與 option list 相關 -----
+const optionListRef = ref<COptionItem[]>([]);
+
+// 處理 optionList (支援 Promise)
+const initOptionList = async () => {
+  if (!props.optionList) {
+    optionListRef.value = [];
+    return;
+  }
+
+  // 檢查是否為 Promise
+  if (props.optionList instanceof Promise) {
+    optionListRef.value = await props.optionList;
+  } else {
+    optionListRef.value = props.optionList;
+  }
+};
+
+// 監聽 optionList 變化
+watch(() => props.optionList, async () => {
+  await initOptionList();
+}, { immediate: true });
+
+// 監聽連動欄位變化，更新選項
+initForDependentFieldIfNeed();
+
+// ----- 控制項 attribute -----
+const componentId = props.id || 'selectPicker-' + uuidv4();
+const isRequired = computed(() => {
+  if (typeof props.requiredReactive === 'boolean') {
+    return props.requiredReactive;
+  }
+  return props.required || viewModel.fieldIsRequired(props.name);
+});
+const isReadMode = props.readMode == true || false;
+const displayText = computed(() => {
+  return optionListRef.value.filter((item: COptionItem) => item.value === fieldRef.value)[0]?.text || '';
+});
+
+// watch(() => fieldRef.value, () => {
+//   console.log(`CSelectFormField: [${props.name}] fieldRef changed`, fieldRef.value, optionListRef.value);
+// });
+
+// 自動追蹤 fieldRef 和 optionListRef 的變化，確保值和選項同步
+watchEffect(() => {
+  // 自動追蹤 fieldRef 和 optionListRef 的變化
+  const value = fieldRef.value;
+  const options = optionListRef.value;
+  // 確保值和選項同步
+  if (value && options.length > 0) {
+    const found = options.find(item => item.value === value);
+    if (!found) {
+      console.warn(`Value "${value}" not found in options`);
+    }
+  }
+}, {flush: 'post'});
+
+// ----- LifeCycle -----
+onMounted(() => {
+
+});
+
+// ----- private functions -----
+function initForDependentFieldIfNeed() {
+  // 如果有設定 dependentField 和 fetchOptions，則監聽連動欄位變化
+  if(!props.dependentField || !props.fetchOptions || !_.isFunction(props.fetchOptions)) {
+    return;
+  }
+  const dependentFieldModel = formFieldMap[props.dependentField];
+  if(!dependentFieldModel) {
+    console.warn(`CSelectFormField: dependentField "${props.dependentField}" not found in formFieldMap`);
+    return;
+  }
+
+  // 監聽連動欄位變化
+  watch(dependentFieldModel.value, async (newVal, oldVal) => {
+    // 取得新的選項列表
+    const newOptions = await props.fetchOptions?.(newVal);
+    optionListRef.value = newOptions || [];
+
+    // 決定是否要清空目前的欄位值 (非第一次呼叫且值有變更時)
+    const isFirstCall = oldVal === undefined;
+    if(!isFirstCall && oldVal !== newVal) {
+      // 判斷目前的值是否在新的選項中
+      const found = newOptions?.find(item => item.value === fieldRef.value);
+      if(!found) {
+        fieldRef.value = null;
+      }
+    }
+  }, {immediate: true});
+}
+</script>
+
+<template>
+  <div :class="bStyleConfig.containerClass">
+    <label v-if="props.label && !bStyleConfig.hideLabel" :for="componentId" :class="bStyleConfig.labelClass">
+      {{ props.label }}
+      <span v-if="isRequired" :class="bStyleConfig.requiredLabelClass">{{bStyleConfig.requiredLabelText}}</span>
+    </label>
+    <template v-if="isReadMode">
+      <div :id="componentId">
+        <span :class="bStyleConfig.plainTextClass">
+          {{ displayText }}
+        </span>
+      </div>
+      <input type="hidden" :name="props.name" v-model="fieldRef"/>
+    </template>
+    <template v-else>
+      <select :id="componentId" :class="bStyleConfig.selectClass"
+              :name="props.name"
+              :required="isRequired"
+              :aria-label="props.placeholder"
+              :multiple="bStyleConfig.selectMultiple"
+              v-model="fieldRef"
+              v-form-invalid="fieldModel">
+        <option selected :value="null">{{ bStyleConfig.selectPlaceholder || props.placeholder }}</option>
+        <template v-for="optionItem in optionListRef" :key="optionItem.id" >
+          <option :value="optionItem.value"
+                  :disabled="optionItem.disabled">
+            {{ optionItem.text }}
+          </option>
+        </template>
+      </select>
+      <div v-if="hasFormFieldError(fieldModel)" :class="bStyleConfig.errorClass">
+        {{ fieldModel.errorMessage }}
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/form/CTextAreaFormField.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+
+import {inject, Ref, ref, ComputedRef} from 'vue';
+import {v4 as uuidv4} from 'uuid';
+import {BaseFormDataModel, hasFormFieldError} from "../../model/BaseFormDataModel";
+import * as _ from 'lodash';
+import {EmptyDataModel} from "../../model/EmptyDataModel";
+import {BSFieldStyleConfig, IBSFieldStyleConfig} from "../../model/BSFieldStyleConfig";
+
+const props = defineProps<{
+  id?: string; // 欄位 ID
+  label?: string; // 欄位標籤
+  name: string; // 欄位名稱
+  required?: boolean; // 是否為必填
+  placeholder?: string; // 輸入提示文字
+  rows?: number; // 行數，預設為 3
+  maxlength?: number; // 最大長度
+  disabledState?: ComputedRef<boolean>; // 禁用狀態的引用
+  readMode?: boolean; // 是否為閱讀模式，只會顯示文字
+  styleConfig?: IBSFieldStyleConfig; // BS 欄位樣式設定
+}>();
+
+
+// ----- view model -----
+const viewModel = inject('c-formViewModel', new EmptyDataModel()) as BaseFormDataModel;
+if (!viewModel) {
+  console.error('CTextAreaFormField: viewModel not found, please provide "c-formViewModel" in parent component');
+}
+
+// BSFieldStyleConfig
+const bStyleConfig = BSFieldStyleConfig.mix({
+  plainTextClass: 'form-control disabled c-textarea-readonly'
+}, props.styleConfig);
+
+// field model
+const formFieldMap = viewModel.formFieldMap;
+const fieldModel = _.get(formFieldMap, props.name);
+const fieldRef = fieldModel?.value as Ref<string>;
+
+// ----- 控制項 attribute -----
+const componentId = props.id || 'textarea-' + uuidv4();
+const isRequired = props.required || viewModel.fieldIsRequired(props.name);
+
+</script>
+
+<template>
+  <div :class="bStyleConfig.containerClass">
+    <label v-if="props.label && !bStyleConfig.hideLabel" :for="componentId" :class="bStyleConfig.labelClass">
+      {{ props.label }}
+      <span v-if="isRequired" :class="bStyleConfig.requiredLabelClass">{{bStyleConfig.requiredLabelText}}</span>
+    </label>
+    <template v-if="props.readMode">
+      <div :class="bStyleConfig.plainTextClass" :id="componentId">
+        {{ fieldRef }}
+      </div>
+    </template>
+    <template v-else>
+      <textarea :class="bStyleConfig.textareaClass"
+                :id="componentId"
+                :name="props.name"
+                :required="isRequired"
+                :rows="props.rows || bStyleConfig.textareaRows || 3"
+                :maxlength="props.maxlength"
+                :style="bStyleConfig.textareaResizeStyle"
+                :placeholder="props.placeholder"
+                :disabled="props.disabledState?.value || false"
+                v-model="fieldRef"
+                v-form-invalid="fieldModel">
+      </textarea>
+      <div v-if="hasFormFieldError(fieldModel)" :class="bStyleConfig.errorClass">
+        {{ fieldModel.errorMessage }}
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.c-textarea-readonly {
+  background-color: #e9ecef;
+  opacity: 1;
+  min-height: 90px;
+}
+
+</style>

package/src/components/form/CTextInputFormField.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import type { InputHTMLAttributes } from '@vue/runtime-dom';
+import {inject, Ref, ref, ComputedRef, computed} from 'vue';
+import {v4 as uuidv4} from 'uuid';
+import {BaseFormDataModel, hasFormFieldError} from "../../model/BaseFormDataModel";
+import _ from "lodash";
+import {EmptyDataModel} from "../../model/EmptyDataModel";
+import {BSFieldStyleConfig, IBSFieldStyleConfig} from "../../model/BSFieldStyleConfig";
+
+const props = withDefaults(defineProps<Partial< /* @vue-ignore */ InputHTMLAttributes> & {
+  id?: string; // 欄位 ID
+  label?: string; // 欄位標籤
+  name: string; // 欄位名稱
+  type?: string; // 欄位類型，預設為 'text'
+  required?: boolean; // 是否為必填
+  requiredReactive?: boolean; // 是否為必填 (響應式)
+  placeholder?: string; // 輸入提示文字
+  autocomplete?: string; // 自動完成提示 預設為 'off'
+  disabledState?: ComputedRef<boolean>; // 禁用狀態的引用
+  readMode?: boolean; // 是否為閱讀模式，只會顯示文字
+  min?: number;// min attribute for a number type
+  max?: number;// max attribute for a number type
+  styleConfig?: IBSFieldStyleConfig; // BS 欄位樣式設定
+}>(), {
+  requiredReactive: undefined
+});
+
+
+// ----- view model -----
+const viewModel = inject('c-formViewModel', new EmptyDataModel()) as BaseFormDataModel;
+if(!viewModel) {
+  console.error('CTextInputFormField: viewModel not found, please provide "c-formViewModel" in parent component');
+}
+
+// BSFieldStyleConfig
+const bStyleConfig = BSFieldStyleConfig.mix({
+  plainTextClass: 'form-control-plaintext bg-light border rounded px-3 d-flex align-items-center'
+}, props.styleConfig);
+
+// field model
+const formFieldMap = viewModel.formFieldMap;
+const fieldModel = _.get(formFieldMap, props.name);
+const fieldRef = fieldModel?.value as Ref<string>;
+
+// ----- 控制項 attribute -----
+const componentId = props.id || 'textInput-' + uuidv4();
+// 使用 computed 讓 isRequired 具備響應式，根據 props.required 與 yup schema 動態判斷
+const isRequired = computed(() => {
+  // 若父元件有傳 requiredReactive，優先採用
+  if (typeof props.requiredReactive === 'boolean') {
+    return props.requiredReactive;
+  }
+  // 直接使用 props.required || viewModel.fieldIsRequired(props.name)
+  return props.required || viewModel.fieldIsRequired(props.name);
+});
+const isReadMode = props.readMode == true || false;
+const maxLengthAttr = viewModel.fieldMaxLength(props.name) || undefined;
+
+</script>
+
+<template>
+
+  <div :class="bStyleConfig.containerClass">
+    <label v-if="props.label && !bStyleConfig.hideLabel" :for="componentId" :class="bStyleConfig.labelClass">
+      {{props.label}}
+      <span v-if="isRequired" :class="bStyleConfig.requiredLabelClass">{{bStyleConfig.requiredLabelText}}</span>
+    </label>
+    <template v-if="isReadMode">
+      <div :id="componentId">
+        <span :class="bStyleConfig.plainTextClass">
+          {{ fieldRef }}
+        </span>
+      </div>
+      <input type="hidden" :name="props.name" v-model="fieldRef"/>
+    </template>
+    <template v-else>
+      <input :class="bStyleConfig.inputClass"
+             :id="componentId"
+             :name="props.name"
+             :type="props.type || 'text'"
+             :min="props.min"
+             :max="props.max"
+             :placeholder="props.placeholder || ''"
+             :autocomplete="props.autocomplete"
+             :required="isRequired"
+             :disabled="props.disabledState?.value || false"
+             :maxlength="maxLengthAttr"
+             v-model="fieldRef"
+             v-form-invalid="fieldModel"/>
+      <div v-if="hasFormFieldError(fieldModel)" :class="bStyleConfig.errorClass">
+        {{ fieldModel.errorMessage }}
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/form/CTinyMCEEditorFormField.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { inject, Ref, computed, ref } from 'vue';
+import {BaseFormDataModel, hasFormFieldError} from "../../model/BaseFormDataModel";
+import {v4 as uuidv4} from 'uuid';
+import _ from 'lodash';
+import Editor from '@tinymce/tinymce-vue';
+import {EmptyDataModel} from "../../model/EmptyDataModel";
+import {BSFieldStyleConfig, IBSFieldStyleConfig} from "../../model/BSFieldStyleConfig";
+
+// ----- props -----
+const props = withDefaults(defineProps<{
+  label?: string; // 欄位標籤
+  name: string; // 欄位 data name
+  required?: boolean // 是否為必填
+  requiredReactive?: boolean // 是否為必填 (響應式)
+  styleConfig?: IBSFieldStyleConfig; // BS 欄位樣式設定
+}>(), {
+  requiredReactive: undefined
+});
+
+// ----- view model -----
+const viewModel = inject('c-formViewModel', new EmptyDataModel()) as BaseFormDataModel;
+if(!viewModel) {
+  console.error('CTextInputFormField: viewModel not found, please provide "c-formViewModel" in parent component');
+}
+
+// BSFieldStyleConfig
+const bStyleConfig = BSFieldStyleConfig.mix({}, props.styleConfig);
+const formFieldMap = viewModel.formFieldMap;
+const fieldModel = _.get(formFieldMap, props.name);
+const fieldRef = fieldModel?.value as Ref<string>;
+
+// ----- attribute -----
+const componentId = `tinymceEditor-${uuidv4()}`; // 生成唯一的 ID
+const isRequired = computed(() => {
+  if (typeof props.requiredReactive === 'boolean') {
+    return props.requiredReactive;
+  }
+  return props.required || viewModel.fieldIsRequired(props.name);
+});
+
+// ----- TinyMCE Editor Config -----
+const apiKey = import.meta.env.VITE_TINYMCE_API_KEY;
+const editorBoxElt = ref<HTMLDivElement | null>(null);
+const editorRef = ref<InstanceType<typeof Editor> | null>(null);
+const tinymceOptions = ref({
+  height: 500,
+  menubar: false,
+  language: 'zh-TW', // 設定語言
+  plugins: [
+    'code'
+  ],
+  toolbar: 'undo redo | code'
+});
+
+// ----- event handler -----
+// 當編輯器初始化完成時觸發
+function onEditorInit(editor: InstanceType<typeof Editor>) {
+  if(!editorBoxElt.value) {
+    return;
+  }
+  // 移除隱藏類別
+  editorBoxElt.value.classList.remove('d-none');
+}
+// 注目編輯器
+function doFocusEditor() {
+  const editorInstance = _.invoke(editorRef.value, 'getEditor');
+  editorInstance?.focus();
+}
+
+</script>
+
+<template>
+  <div :class="bStyleConfig.containerClass">
+    <label v-if="props.label && !bStyleConfig.hideLabel" :for="componentId" :class="bStyleConfig.labelClass" @click="doFocusEditor">
+      {{props.label}}
+      <span v-if="isRequired" :class="bStyleConfig.requiredLabelClass">{{bStyleConfig.requiredLabelText}}</span>
+    </label>
+    <div class="c-tinymce-editor-box d-none" ref="editorBoxElt" v-form-invalid="fieldModel">
+      <editor
+        :id="componentId" ref="editorRef"
+        :api-key="apiKey"
+        v-model="fieldRef"
+        :init="tinymceOptions"
+        @init="onEditorInit"
+      />
+    </div>
+    <div v-if="hasFormFieldError(fieldModel)" :class="bStyleConfig.errorClass">
+      {{ fieldModel.errorMessage }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.c-tinymce-editor-box.is-invalid {
+  border: 1px solid red;
+  border-radius: 10px;
+}
+</style>

package/src/components/form/SCTextInputFormField.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import type { InputHTMLAttributes } from '@vue/runtime-dom';
+import {inject, Ref, ref, ComputedRef, computed} from 'vue';
+import {v4 as uuidv4} from 'uuid';
+import {BaseFormDataModel} from "../../model/BaseFormDataModel";
+import _ from "lodash";
+import {EmptyDataModel} from "../../model/EmptyDataModel";
+
+const props = defineProps<Partial< /* @vue-ignore */ InputHTMLAttributes> & {
+  id?: string; // 欄位 ID
+  label?: string; // 欄位標籤
+  name: string; // 欄位名稱
+  type?: string; // 欄位類型，預設為 'text'
+  required?: boolean; // 是否為必填
+  requiredReactive?: boolean; // 是否為必填 (響應式)
+  placeholder?: string; // 輸入提示文字
+  autocomplete?: string; // 自動完成提示 預設為 'off'
+  disabledState?: ComputedRef<boolean>; // 禁用狀態的引用
+  readMode?: boolean; // 是否為閱讀模式，只會顯示文字
+  min?: number;// min attribute for number type
+  max?: number;// max attribute for number type
+}>();
+
+
+// ----- view model -----
+const viewModel = inject('c-formViewModel', new EmptyDataModel()) as BaseFormDataModel;
+if(!viewModel) {
+  console.error('CTextInputFormField: viewModel not found, please provide "c-formViewModel" in parent component');
+}
+
+// field model
+const formFieldMap = viewModel.formFieldMap;
+const fieldModel = _.get(formFieldMap, props.name);
+const fieldRef = fieldModel?.value as Ref<string>;
+
+// ----- 控制項 attribute -----
+const componentId = props.id || 'textInput-' + uuidv4();
+const isRequired = computed(() => {
+  if (typeof props.requiredReactive === 'boolean') {
+    return props.requiredReactive;
+  }
+  return props.required || viewModel.fieldIsRequired(props.name);
+});
+const isReadMode = props.readMode || false;
+const maxLengthAttr = viewModel.fieldMaxLength(props.name) || undefined;
+
+// 預設的 input attributes，方便使用者用 v-bind 一次綁定
+const inputAttrs = computed(() => ({
+  id: componentId,
+  name: props.name,
+  type: props.type || 'text',
+  min: props.min,
+  max: props.max,
+  placeholder: props.placeholder || '',
+  autocomplete: props.autocomplete,
+  required: isRequired.value,
+  disabled: props.disabledState?.value || false,
+  maxlength: maxLengthAttr,
+}));
+
+// 這邊先開出去讓父元件可以控制 isRequired 的值
+function setIsRequired(value: boolean): void {
+  // 建議由父元件直接控制 props.required
+}
+defineExpose({
+  setIsRequired,
+});
+
+</script>
+
+<template>
+  <slot name="default"
+        :componentId="componentId"
+        :fieldRef="fieldRef"
+        :fieldModel="fieldModel"
+        :isRequired="isRequired"
+        :isReadMode="isReadMode"
+        :maxLengthAttr="maxLengthAttr">
+    <!-- 預設實作 -->
+    <div>
+      <slot name="label"
+            :componentId="componentId"
+            :label="props.label"
+            :isRequired="isRequired">
+        <label v-if="props.label" :for="componentId" class="form-label">
+          {{props.label}}
+          <span v-if="isRequired" class="text-danger px-1">*</span>
+        </label>
+      </slot>
+
+      <slot name="input"
+            :componentId="componentId"
+            :fieldRef="fieldRef"
+            :fieldModel="fieldModel"
+            :isRequired="isRequired"
+            :isReadMode="isReadMode"
+            :maxLengthAttr="maxLengthAttr"
+            :inputAttrs="inputAttrs"
+            :props="props">
+        <template v-if="isReadMode">
+          <div :id="componentId">
+            <span class="form-control-plaintext bg-light border rounded px-3 d-flex align-items-center">
+              {{ fieldRef }}
+            </span>
+          </div>
+          <input type="hidden" :name="props.name" v-model="fieldRef"/>
+        </template>
+        <template v-else>
+          <input class="form-control"
+                 v-bind="inputAttrs"
+                 v-model="fieldRef"
+                 v-form-invalid="fieldModel"/>
+        </template>
+      </slot>
+
+      <slot name="error"
+            :fieldModel="fieldModel"
+            :errorMessage="fieldModel?.errorMessage">
+        <div v-if="fieldModel?.errorMessage" class="invalid-feedback d-block mt-1">
+          {{ fieldModel.errorMessage }}
+        </div>
+      </slot>
+    </div>
+  </slot>
+</template>
+
+<style scoped>
+
+</style>