ch3chi-commons-vue 1.2.0 → 1.8.1

package/src/components/form/CDateRangeFormField.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import {inject, nextTick, onMounted, Ref, ref, watch, computed} from "vue";
+import flatpickr from "flatpickr";
+import "flatpickr/dist/flatpickr.min.css";
+import {Mandarin} from "flatpickr/dist/l10n/zh.js";
+import {v4 as uuidv4} from 'uuid';
+import {BaseFormDataModel, hasFormFieldError} from "../../model/BaseFormDataModel";
+import {EmptyDataModel} from "../../model/EmptyDataModel";
+import * as _ from 'lodash';
+import {BSFieldStyleConfig, IBSFieldStyleConfig} from "../../model/BSFieldStyleConfig";
+
+// ----- props -----
+const props = withDefaults(defineProps<{
+  id?: string; // 欄位 ID
+  label?: string; // 欄位標籤
+  name: string; // 欄位名稱
+  required?: boolean; // 是否為必填
+  requiredReactive?: boolean; // 是否為必填 (響應式)
+  startDateFieldName?: string; // 開始日期欄位名稱
+  endDateFieldName?: string; // 結束日期欄位名稱
+  styleConfig?: IBSFieldStyleConfig; // 樣式設定
+}>(), {
+  requiredReactive: undefined,
+  label: "選擇日期區間",
+  startDateFieldName: "startDate",
+  endDateFieldName: "endDate"
+});
+
+// ----- view model -----
+const viewModel = inject('c-formViewModel', new EmptyDataModel()) as BaseFormDataModel;
+if(!viewModel) {
+  console.error('CDateRangeFormField: viewModel not found, please provide "c-formViewModel" in parent component');
+}
+
+// BSFieldStyleConfig
+const bStyleConfig = BSFieldStyleConfig.mix({}, props.styleConfig);
+
+// ----- form field -----
+const formFieldMap = viewModel.formFieldMap;
+const startDateFieldModel = _.get(formFieldMap, props.startDateFieldName);
+const startDateFieldRef = startDateFieldModel?.value as Ref<Date>;
+const endDateFieldModel = _.get(formFieldMap, props.endDateFieldName);
+const endDateFieldRef = endDateFieldModel?.value as Ref<Date>;
+if (!startDateFieldRef || !endDateFieldRef) {
+  console.error('check fieldMap for CDateRangeFormField:', formFieldMap);
+  console.error('CDateRangeFormField: field model not found for start or end date:',
+    props.startDateFieldName, props.endDateFieldName);
+}
+
+// ----- 控制項 attribute -----
+const triggerBtnId = props.id || `date-range-btn-${uuidv4()}`;
+const dateBtn = ref<HTMLButtonElement | null>(null);
+const flatpickrInstance = ref<any>(null);
+const isRequired = computed(() => {
+  if (typeof props.requiredReactive === 'boolean') {
+    return props.requiredReactive;
+  }
+  return props.required || viewModel.fieldIsRequired(props.startDateFieldName) || viewModel.fieldIsRequired(props.endDateFieldName);
+});
+
+// ----- event handler -----
+function toggleFlatpickr() {
+  if(flatpickrInstance.value?.isOpen) {
+    flatpickrInstance.value?.close();
+  } else {
+    flatpickrInstance.value?.open();
+  }
+}
+
+// ----- watch -----
+watch(startDateFieldRef, (newDate) => {
+  flatpickrInstance.value?.setDate([newDate, endDateFieldRef.value], false); // 第二個參數 false 表示不觸發 onChange 事件
+});
+watch(endDateFieldRef, (newDate) => {
+  flatpickrInstance.value?.setDate([startDateFieldRef.value, newDate], false); // 第二個參數 false 表示不觸發 onChange 事件
+});
+
+// ----- LifeCycle -----
+onMounted(() => {
+  nextTick(() => {
+    flatpickrInstance.value = flatpickr(`#${triggerBtnId}`, {
+      mode: "range", // 啟用日期區間選擇
+      dateFormat: "Y-m-d", // 日期格式
+      locale: Mandarin, // 設定語系為中文
+      onChange: (selectedDates) => {
+        if (selectedDates.length === 2) {
+          // 更新開始和結束日期
+          const startDate = selectedDates[0];
+          // 設定開始日期的時間為 00:00:00
+          startDate.setHours(0, 0, 0, 0);
+          startDateFieldRef.value = startDate;
+          // 設定結束日期的時間為 23:59:59
+          const endDate = selectedDates[1];
+          endDate.setHours(23, 59, 59, 999);
+          endDateFieldRef.value = endDate;
+        }
+      }
+    });
+  })
+});
+
+</script>
+
+<template>
+  <div :class="bStyleConfig.containerClass">
+    <label v-if="props.label && !bStyleConfig.hideLabel" :for="triggerBtnId" :class="bStyleConfig.labelClass">
+      {{ props.label }}
+      <span v-if="isRequired" :class="bStyleConfig.requiredLabelClass">{{bStyleConfig.requiredLabelText}}</span>
+    </label>
+    <div :class="bStyleConfig.wrapperClass">
+      <button type="button" class="btn btn-outline-secondary"
+              title="點擊選擇日期區間" v-tooltip
+              ref="dateBtn"
+              :id="triggerBtnId" @click.prevent.stop>
+        <font-icon icon="calendar-days"/>
+      </button>
+      <input type="text" :class="bStyleConfig.inputClass" placeholder="開始日期" readonly
+             v-date-formatter="startDateFieldRef"
+             v-form-invalid="startDateFieldModel"
+             @click.prevent.stop="toggleFlatpickr">
+      <span class="input-group-text">~</span>
+      <input type="text" :class="bStyleConfig.inputClass" placeholder="結束日期" readonly
+             v-date-formatter="endDateFieldRef"
+             v-form-invalid="endDateFieldModel"
+             @click.prevent.stop="toggleFlatpickr">
+    </div>
+    <div v-if="hasFormFieldError(startDateFieldModel)" :class="bStyleConfig.errorClass">
+      {{ startDateFieldModel.errorMessage }}
+    </div>
+    <div v-if="hasFormFieldError(endDateFieldModel)" :class="bStyleConfig.errorClass">
+      {{ endDateFieldModel.errorMessage }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/form/CFilePickerFormField.vue

@@ -0,0 +1,471 @@
+<script setup lang="ts">
+import {computed, isReactive, onMounted, reactive, ref, toRaw, watch} from "vue";
+import {useViewStore} from "../../stores/ViewStore";
+import {CFileDataModel, FileUploadProgress} from "../../model/CFileDataModel";
+import {v4 as uuidv4} from 'uuid';
+import _ from 'lodash';
+import {checkHasSameFile} from '../../utils/CToolUtils';
+import {ApiService} from "../../api/ApiService";
+import {AxiosProgressEvent} from "axios";
+import {FontAwesomeIcon as FontIcon} from "@fortawesome/vue-fontawesome";
+import {BSFieldStyleConfig, IBSFieldStyleConfig} from "../../model/BSFieldStyleConfig";
+
+// ----- Properties -----
+const props = withDefaults(defineProps<{
+  id?: string;
+  label?: string;
+  name?: string; // 對應到 dataModel 的欄位名稱
+  dataModel?: any; // 用於雙向綁定的資料模型
+  validationDataKey?: string; // 用於驗證的資料鍵值，預設為 name
+  placeholder?: string;
+  tip?: string; // 提示訊息
+  accept?: string;
+  required?: boolean;
+  multiple?: boolean; // 是否支援多檔案上傳
+  fileCountLimit?: number; // 檔案數量限制，只會在 multiple 為 true 時生效
+  fileSizeLimit?: number; // 檔案大小限制，單位為 bytes
+  styleConfig?: IBSFieldStyleConfig; // BS 欄位樣式設定
+}>(), {
+  label: '',
+  placeholder: '請選擇檔案'
+});
+
+// BSFieldStyleConfig
+const bStyleConfig = BSFieldStyleConfig.mix({
+  fileClass: 'form-control cursor-pointer c-single-file'
+}, props.styleConfig);
+
+// ----- attribute -----
+// componentId 用於唯一標識這個組件
+const componentId = props.id || `file-picker-${uuidv4()}`;
+// 可接受的檔案類型
+const acceptedFileTypes = bStyleConfig.fileAccept || props.accept || '*';
+// isRequired 用於判斷是否為必填欄位
+const isRequired = props.required || false;
+const boxClassName = props.multiple ? 'c-multiple-file-box' : 'input-group c-single-file-box'; // 根據是否多檔案上傳來決定 class 名稱
+// file 物件
+const selectedFile = ref<File | null>(null); // 用於單個檔案
+const showSingleFilePicker = ref(props.multiple === false);
+const selectedFileList = reactive<File[]>([]);  // 用於多檔案上傳
+// 上傳進度
+const uploadProgressMap = reactive<Record<string, FileUploadProgress>>({});
+// 已上傳檔案列表
+const uploadedFileList = reactive<CFileDataModel[]>([]);
+
+// maxFileSize 用於限制檔案大小，從 props or env 或其他配置中獲取，單位為 bytes
+const maxFileSize = props.fileSizeLimit || import.meta.env.VITE_MAX_FILE_SIZE || 2 * 1024 * 1024; // 預設為 2MB
+// 偵測是否已經超過最大檔案個數限制
+const isOverFileCountLimit = computed(() => {
+  if(!props.multiple || !props.fileCountLimit) {
+    return false; // 如果不是多檔案上傳或沒有設定檔案數量限制，則不需要檢查
+  }
+  return selectedFileList.length >= props.fileCountLimit;
+});
+
+// ----- view model -----
+// 用來驗證是否有錯誤訊息
+const formFieldMap = props.dataModel?.formFieldMap;
+const validationKey = props.validationDataKey || props.name || '';
+const fieldModel = formFieldMap[validationKey];
+
+// 是否自動上傳檔案
+const enableAutoUpload = true;
+
+// 引入 viewStore 用於顯示錯誤訊息
+const viewStore = useViewStore();
+
+// input type="file" element ref
+const fileInputRef = ref<HTMLInputElement | null>(null);
+const textInputRef = ref<HTMLInputElement | null>(null);
+
+// ----- Methods -----
+
+// 顯示選擇的檔案名稱到文字輸入框
+const displayFileName = (): void => {
+  const fileInputElt = fileInputRef.value;
+  const textInputElt = textInputRef.value;
+  if (!fileInputElt || !textInputElt) {
+    return;
+  }
+  // 根據單選或多選來顯示檔案名稱
+  // 單選情況下，把選擇的檔案名稱顯示在文字輸入框中
+  if (!props.multiple) {
+    if (selectedFile.value) {
+      textInputElt.value = selectedFile.value.name; // 顯示檔案名稱
+    } else {
+      textInputElt.value = ''; // 清除檔案名稱
+    }
+    return;
+  }
+  // 多選情況下，顯示所有選擇的檔案名稱到顯示區中，textInputElt 不顯示檔案名稱
+  textInputElt.value = '';
+};
+
+// ----- event handler -----
+// 顯示檔案選擇器
+const doShowFilePicker = (): void => {
+  const fileInputElt = fileInputRef.value;
+  if (fileInputElt) {
+    fileInputElt.click(); // 模擬點擊檔案選擇按鈕
+  }
+};
+// 處理檔案選擇事件
+const onFileSelected = (event: Event): void => {
+  const fileInput = event.target as HTMLInputElement;
+  if(!fileInput || !fileInput.files || fileInput.files.length === 0) {
+    selectedFile.value = null; // 清除選擇的檔案
+    displayFileName(); // 更新顯示的檔案名稱
+    return;
+  }
+
+  // 檢查是否支援多檔案上傳
+  // 當使用多檔案上傳
+  if (props.multiple) {
+    // 偵測到選擇的檔案數量是否超過限制，以及 selectedFileList 的長度是否超過限制
+    if (props.fileCountLimit && (fileInput.files.length + selectedFileList.length + uploadedFileList.length) > props.fileCountLimit) {
+      viewStore.showModalError({
+        content: `最多只能選擇 ${props.fileCountLimit} 個檔案`
+      });
+      return;
+    }
+
+    // 如果支援多檔案上傳，則將所有選擇的檔案儲存到 selectedFileList
+    // 這邊使用累加的方式來儲存選擇的檔案
+    for (const file of Array.from(fileInput.files)) {
+      // 檢查檔案是否已經在 selectedFileList 中
+      if (checkHasSameFile(selectedFileList, file)) {
+        continue;
+      }
+      // 檢查檔案大小是否超過限制
+      if (file.size > maxFileSize) {
+        viewStore.showModalError({
+          content: `檔案 ${file.name} 超過最大允許大小 ${maxFileSize / (1024 * 1024)} MB`
+        });
+        continue;
+      }
+      selectedFileList.push(file); // 儲存選擇的檔案
+      uploadProgressMap[file.name] = new FileUploadProgress();
+    }
+    // 清除單個檔案選擇
+    selectedFile.value = null;
+    // 更新顯示的檔案名稱
+    displayFileName();
+    // 把 fileInputRef 的值清空，這樣才能在下次選擇相同檔案時觸發 change 事件
+    fileInput.value = '';
+    // 如果啟用自動上傳，則自動上傳所有選擇的檔案
+    if(enableAutoUpload) {
+      selectedFileList.forEach(file => {
+        doUploadFile(file);
+      });
+    }
+    return;
+  }
+
+  // 單檔案上傳情況下，檢查是否已經有選擇的檔案或已經上傳的檔案
+  if(enableAutoUpload) {
+    const hasFileAlready = selectedFile.value !== null || uploadedFileList.length > 0;
+    if(hasFileAlready) {
+      viewStore.showModalError({
+        content: `只能選擇一個檔案`
+      });
+      doReset();
+      return;
+    }
+  }
+  // 單檔案上傳情況下，僅儲存第一個選擇的檔案
+  const firstFile = fileInput.files[0];
+  if (firstFile.size > maxFileSize) {
+    viewStore.showModalError({
+      content: `最大允許檔案大小為 ${maxFileSize / (1024 * 1024)} MB`
+    })
+    doReset()
+    return;
+  }
+  // 儲存選擇的檔案
+  selectedFile.value = firstFile;
+  displayFileName();
+  // 把 fileInputRef 的值清空，這樣才能在下次選擇相同檔案時觸發 change 事件
+  fileInput.value = '';
+  if(enableAutoUpload) {
+    uploadProgressMap[selectedFile.value.name] = new FileUploadProgress();
+    doUploadFile(selectedFile.value);
+    showSingleFilePicker.value = false;
+  }
+  return;
+};
+// reset 檔案選擇
+const doReset = (): void => {
+  const fileInputElt = fileInputRef.value;
+  if (!fileInputElt) {
+    return;
+  }
+  fileInputElt.value = ''; // 清除檔案選擇
+  selectedFile.value = null; // 清除選擇的檔案
+  selectedFileList.splice(0, selectedFileList.length); // 清空已選擇的檔案列表
+  // 清除上傳進度
+  Object.keys(uploadProgressMap).forEach(key => {
+    _.unset(uploadProgressMap, key);
+  });
+  uploadedFileList.splice(0, uploadedFileList.length); // 清空已上傳的檔案列表
+  showSingleFilePicker.value = props.multiple === false;
+  displayFileName(); // 更新顯示的檔案名稱
+};
+
+// 上傳檔案
+async function doUploadFile(file: File) {
+  const formData = new FormData();
+  formData.append('file', file);
+
+  // 初始化上傳進度
+  const uploadProgress = uploadProgressMap[file.name];
+  uploadProgress.start();
+  // 處理上傳進度事件
+  const handleUploadProgress = (event: AxiosProgressEvent) => {
+    if (event.lengthComputable && event.total) {
+      const percentCompleted = Math.round((event.loaded * 100) / event.total);
+      uploadProgress.progress = percentCompleted;
+    } else {
+      uploadProgress.progress = 0;
+    }
+  };
+  // 呼叫上傳 API
+  const resp = await ApiService.call({
+    endpointKey: 'Resources-Create',
+    postBody : formData,
+    onUploadProgress: handleUploadProgress
+  });
+  if(!resp.isOk()) {
+    console.error(`upload file fail`, resp);
+    uploadProgress.fail('上傳失敗');
+    return;
+  }
+
+  // 上傳成功，將進度設為完成
+  uploadProgressMap[file.name].complete();
+  // 模擬上傳完成，將檔案加入已上傳列表
+  const fileDataModel = new CFileDataModel({
+    ...resp.data,
+    name: file.name,
+    size: file.size,
+    fileObj: file
+  });
+  uploadedFileList.push(fileDataModel);
+  // 移除已上傳的檔案
+  if(props.multiple) {
+    _.remove<File[]>(selectedFileList, (f: File | null) => _.isNil(f) || f.name === file.name);
+  }else {
+    selectedFile.value = null;
+    displayFileName();
+  }
+}
+
+// 檢查是否可以移除已選擇的檔案
+function disableRemoveSelectedFile(fileItem: File): boolean {
+  const uploadProgress = uploadProgressMap[fileItem.name];
+  return uploadProgress && !uploadProgress.readyToUpload();
+}
+
+// 移除已選擇的檔案
+function removeSelectedFile(fileName: string) {
+  _.remove<File[]>(selectedFileList, (f: File | null) => _.isNil(f) || f.name === fileName);
+  delete uploadProgressMap[fileName];
+}
+// 移除已上傳的檔案
+const onlyRemoveUploadFile = (fileItem: CFileDataModel) => {
+  _.remove<CFileDataModel[]>(uploadedFileList, (f: CFileDataModel) => f === fileItem);
+}
+async function removeUploadedFile(fileItem: CFileDataModel) {
+  // 如果是關聯檔案，則不呼叫 API 刪除，而是直接從列表中移除直到使用者點擊儲存才會真正刪除
+  // if(fileItem.isAssociated === true) {
+  //   onlyRemoveUploadFile(fileItem);
+  //   return;
+  // }
+
+  // 如果已經有 uid 則呼叫 API
+  if(fileItem.uid) {
+    const resp = await ApiService.call({
+      endpointKey: 'Resources-Delete',
+      pathParam: { uid: fileItem.uid },
+      postBody: {}
+    });
+    if(!resp.isOk()) {
+      console.error(`delete file fail`, resp);
+      return;
+    }
+  }
+  onlyRemoveUploadFile(fileItem);
+  // 如果是單檔案上傳，則顯示檔案選擇器
+  if(!props.multiple) {
+    showSingleFilePicker.value = true;
+  }
+}
+
+// ----- 資料於不同元件同步 -----
+// 監聽 uploadedFileList 的變化，並同步到 dataModel
+watch(uploadedFileList, () => {
+  syncToDataModel();
+}, { deep: true });
+// 同步到 dataModel
+function syncToDataModel() {
+  if(!props.name || !props.dataModel) {
+    return;
+  }
+  // 根據是否多檔案上傳來決定同步的值
+  if(props.multiple) {
+    props.dataModel[props.name] = uploadedFileList.map(item => {
+      if(isReactive(item)) {
+        return toRaw(item);
+      }
+      return item;
+    });
+    _.invoke(props.dataModel, 'applyPropertiesToFormField');
+    _.invoke(props.dataModel, 'validateField', props.name);
+    return;
+  }
+
+  // 單檔案上傳情況
+  const fileItem = uploadedFileList.map(item => {
+    if(isReactive(item)) {
+      return toRaw(item);
+    }
+    return item;
+  }).pop();
+  _.set(props.dataModel, props.name, fileItem || null);
+  _.invoke(props.dataModel, 'applyPropertiesToFormField');
+  _.invoke(props.dataModel, 'validateField', props.name);
+}
+
+// 讓父元件可以呼叫，強制同步資料
+function addSavedFiles(files: CFileDataModel[]) {
+  uploadedFileList.push(...files);
+  if(!props.multiple) {
+    // 如果是單檔案上傳，則不顯示檔案選擇器
+    showSingleFilePicker.value = false;
+  }
+}
+
+// ----- LifeCycle -----
+onMounted((): void => {
+
+});
+
+// ----- expose -----
+defineExpose({
+  addSavedFiles
+});
+
+</script>
+
+<template>
+  <div :id="componentId" :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>
+      <span v-if="props.tip" class="ms-2" :title="props.tip" v-tooltip>
+        <font-icon icon="question-circle"/>
+      </span>
+    </label>
+    <div class="" :class="boxClassName">
+      <input type="file" class="d-none c-file-input"
+             :accept="acceptedFileTypes"
+             :multiple="bStyleConfig.fileMultiple || props.multiple"
+             ref="fileInputRef"
+             @change="onFileSelected" />
+      <input type="text" :class="bStyleConfig.fileClass" readonly
+             title="點擊選擇檔案" v-tooltip
+             ref="textInputRef"
+             :placeholder="props.placeholder"
+             v-show="showSingleFilePicker"
+             v-form-invalid="fieldModel"
+             @click="doShowFilePicker" />
+      <button type="button" class="input-group-text btn btn-outline-secondary c-single-file"
+             title="點擊選擇檔案" v-tooltip
+              v-show="showSingleFilePicker"
+              @click.prevent.stop="doShowFilePicker">
+        <font-icon icon="file-arrow-up"/>
+      </button>
+      <!-- 移除按鈕 -->
+<!--      <button type="button" class="input-group-text btn btn-danger c-single-file"-->
+<!--              title="清除檔案" v-tooltip-->
+<!--              v-if="selectedFile"-->
+<!--              @click.prevent.stop="doReset">-->
+<!--        <i class="fa-solid fa-xmark"></i>-->
+<!--      </button>-->
+      <button type="button" class="btn btn-outline-secondary c-multiple-file"
+              :disabled="isOverFileCountLimit"
+              @click.prevent.stop="doShowFilePicker">
+        <font-icon icon="file-arrow-up"/>
+        選擇檔案
+      </button>
+    </div>
+  </div>
+  <!-- 錯誤訊息 -->
+  <div v-if="fieldModel?.errorMessage" :class="bStyleConfig.errorClass">
+    {{ fieldModel.errorMessage }}
+  </div>
+  <!-- 待上傳檔案列表 -->
+  <div v-if="selectedFileList.length" class="mt-3 c-file-upload-list">
+    <h6>待上傳檔案</h6>
+    <ul class="list-group">
+      <li v-for="file in selectedFileList" :key="file.name" class="list-group-item d-flex align-items-center">
+        <span class="me-2">{{ file.name }}</span>
+        <button class="btn btn-sm btn-outline-primary me-2"
+                @click.prevent.stop="doUploadFile(file)"
+                v-show="uploadProgressMap[file.name].readyToUpload()">上傳</button>
+        <button class="btn btn-sm btn-outline-danger me-2"
+                :disabled="disableRemoveSelectedFile(file)"
+                @click.prevent.stop="removeSelectedFile(file.name)">移除</button>
+        <div class="flex-grow-1" v-if="uploadProgressMap[file.name].isShowProgress()">
+          <div class="progress">
+            <div class="progress-bar" role="progressbar"
+                 :style="{ width: uploadProgressMap[file.name].progress + '%' }"
+                 :aria-valuenow="uploadProgressMap[file.name].progress" aria-valuemin="0" aria-valuemax="100">
+            </div>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+  <!-- 已上傳檔案列表 -->
+  <div v-if="uploadedFileList.length" class="mt-3">
+    <h6 v-if="props.multiple">已上傳檔案</h6>
+    <ul class="list-group">
+      <li v-for="fileItem in uploadedFileList" :key="fileItem.name" class="list-group-item d-flex align-items-center">
+        <component :is="fileItem.url ? 'a' : 'span'"
+                   :href="fileItem.url"
+                   :download="fileItem.name"
+                   target="_blank"
+                   rel="noopener noreferrer"
+                   class="c-file-download-link me-2">
+          <font-icon icon="file-lines" class="me-1"/>
+          <span>{{ fileItem.name }}</span>
+        </component>
+        <button class="btn btn-sm btn-outline-danger ms-auto" @click.prevent.stop="removeUploadedFile(fileItem)">移除</button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.c-single-file-box .c-multiple-file{
+  display: none;
+}
+.c-multiple-file-box .c-single-file {
+  display: none;
+}
+
+.c-file-upload-list .progress {
+  height: 8px;
+}
+
+
+.c-file-download-link:is(a) {
+  color: var(--bs-link-color);
+  cursor: pointer;
+}
+.c-file-download-link:is(a):hover {
+  color: var(--bs-link-hover-color);
+  text-decoration: underline;
+}
+
+</style>

package/src/components/form/CRadioFormField.vue

@@ -0,0 +1,62 @@
+<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="bStyleConfig.radioWrapperClass"
+             v-for="optionItem in useOptionList" :key="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">
+          <label :class="bStyleConfig.radioLabelClass" :for="`radio-${props.name}-${optionItem.id}`">{{optionItem.text}}</label>
+        </div>
+        <div v-if="hasFormFieldError(fieldModel)" :class="bStyleConfig.errorClass">
+          {{ fieldModel.errorMessage }}
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+
+</style>