ch3chi-commons-vue 1.2.0 → 1.8.1

package/src/composables/useCheckBoxFormField.ts

@@ -0,0 +1,126 @@
+import {inject, Ref, watch, ref, computed, toValue, onMounted} from 'vue'
+import {v4 as uuidv4} from 'uuid'
+import {cloneDeep, get, isArray, isObject} from 'lodash'
+import {BaseFormDataModel, hasFormFieldError} from '../model/BaseFormDataModel'
+import {EmptyDataModel} from '../model/EmptyDataModel'
+import {BSFieldStyleConfig, IBSFieldStyleConfig} from '../model/BSFieldStyleConfig'
+import {COptionItem} from '../model/FormOptions'
+
+/**
+ * useCheckBoxFormField
+ * 將 CCheckBoxFormField 的共用邏輯抽離為 composable，
+ * 提供 checkbox 欄位的選項、狀態、樣式、驗證等功能。
+ */
+interface UseCheckBoxFormFieldProps {
+  /** Checkbox 欄位的標籤文字 */
+  label?: string
+  /** 是否必填 */
+  required?: boolean
+  requiredReactive?: boolean // 以 reactive 方式控制是否必填
+  /** 欄位名稱 (form field name) */
+  name: string
+  /** Checkbox 選項集，可為靜態陣列或 reactive 物件 */
+  optionList: COptionItem[] | Ref<COptionItem[]>
+  valueType?: string; // 欄位值的類型 (例如: 'array', 'object', 'string' 等)
+  /** 是否為閱讀模式 */
+  readMode?: boolean
+  /** 樣式設定 */
+  styleConfig?: IBSFieldStyleConfig
+}
+
+export function useCheckBoxFormField(props: UseCheckBoxFormFieldProps) {
+  // 1. 建立 Checkbox 選項集合，支援 reactive optionList
+  const useOptionList = computed(() => {
+    const rawList = toValue(props.optionList) as COptionItem[]
+    const clonedList = cloneDeep(rawList)
+    clonedList.forEach((optionItem: COptionItem) => {
+      if (!optionItem.id) {
+        const uniqueId = uuidv4()
+        optionItem.id = `checkbox-${props.name}-${uniqueId}`
+      }
+    })
+    return clonedList
+  })
+
+  // 2. 注入 viewModel，取得表單資料與驗證狀態
+  const viewModel = inject('c-formViewModel', new EmptyDataModel()) as BaseFormDataModel
+  if (!viewModel) {
+    console.error('CheckBoxFormField: viewModel not found, please provide "c-formViewModel" in parent component')
+  }
+
+  // 3. 合併樣式設定，支援自訂與預設樣式
+  const bStyleConfig = BSFieldStyleConfig.mix({
+    plainTextClass: ''
+  }, props.styleConfig)
+
+  // 4. 取得欄位對應的 fieldModel 與 value 參照 (v-model 綁定)
+  const formFieldMap = viewModel.formFieldMap
+  const fieldModel = get(formFieldMap, props.name)
+  if (!fieldModel) {
+    console.error('CheckBoxFormField: field model not found for name:', props.name)
+  }
+  // 動態推斷型別的 fieldRef
+  let fieldRef: Ref<unknown> | undefined = undefined
+  if (fieldModel && fieldModel.value !== undefined) {
+    fieldRef = fieldModel.value as Ref<unknown>
+  } else {
+    console.error('CheckBoxFormField.ref: field model not found for name:', props.name)
+  }
+
+  // 5. 控制項屬性：是否必填、是否閱讀模式、選中選項文字
+  // isRequired 改為 computed，根據 props.required（優先）及 viewModel.fieldIsRequired(props.name) 響應式判斷
+  const isRequired = computed(() => {
+    if (typeof props.requiredReactive === 'boolean') {
+      return props.requiredReactive
+    }
+    return props.required || viewModel.fieldIsRequired(props.name)
+  })
+  const isReadMode = props.readMode === true
+  const selectedText = ref('')
+
+  // 6. 閱讀模式下，動態取得已選擇選項的顯示文字
+  if (isReadMode && fieldRef) {
+    watch(fieldRef, (newValue) => {
+      // 多選情況
+      if (isArray(newValue) || isObject(newValue)) {
+        const selectedOptions = useOptionList.value.filter(option => {
+          if (isArray(newValue)) {
+            return newValue.includes(option.value)
+          } else {
+            return Object.values(newValue).includes(option.value)
+          }
+        })
+        selectedText.value = selectedOptions.map(option => option.text).join('\n')
+        return
+      }
+      // 單選情況
+      const selectedOption = useOptionList.value.find(option => option.value === newValue)
+      selectedText.value = selectedOption ? selectedOption.text : ''
+    }, {immediate: true})
+  }
+
+  onMounted(() => {
+  });
+
+  // 8. 回傳所有組件所需的狀態與參照
+  return {
+    /** 處理後的選項集 (含唯一 id) */
+    useOptionList,
+    /** 注入的表單 viewModel */
+    viewModel,
+    /** 合併後的樣式設定 */
+    bStyleConfig,
+    /** 欄位的 fieldModel (含驗證狀態) */
+    fieldModel,
+    /** 欄位的 value 參照 (v-model 綁定) */
+    fieldRef,
+    /** 是否必填 */
+    isRequired,
+    /** 是否為閱讀模式 */
+    isReadMode,
+    /** 已選擇選項的顯示文字 (閱讀模式用) */
+    selectedText,
+    /** 檢查欄位是否有錯誤的函數 */
+    hasFormFieldError
+  }
+}

package/src/composables/useRadioFormField.ts

@@ -0,0 +1,106 @@
+import { inject, Ref, watch, ref, computed, toValue } from 'vue'
+import { v4 as uuidv4 } from 'uuid'
+import { cloneDeep, get } from 'lodash'
+import {BaseFormDataModel, hasFormFieldError} from '../model/BaseFormDataModel'
+import { EmptyDataModel } from '../model/EmptyDataModel'
+import { BSFieldStyleConfig, IBSFieldStyleConfig } from '../model/BSFieldStyleConfig'
+import { COptionItem } from '../model/FormOptions'
+
+/**
+ * useRadioFormField
+ * 將 CRadioFormField/CRadioPlatFormField 的共用邏輯抽離為 composable，
+ * 提供 radio 欄位的選項、狀態、樣式、驗證等功能。
+ */
+interface UseRadioFormFieldProps {
+  /** Radio 欄位的標籤文字 */
+  label?: string
+  /** 是否必填 */
+  required?: boolean
+  requiredReactive?: boolean // 以 reactive 方式控制是否必填
+  /** 欄位名稱 (form field name) */
+  name: string
+  /** Radio 選項集，可為靜態陣列或 reactive 物件 */
+  optionList: COptionItem[] | Ref<COptionItem[]>
+  /** 是否為閱讀模式 */
+  readMode?: boolean
+  /** 樣式設定 */
+  styleConfig?: IBSFieldStyleConfig
+}
+
+export function useRadioFormField(props: UseRadioFormFieldProps) {
+  // 1. 建立 Radio 選項集合，支援 reactive optionList
+  const useOptionList = computed(() => {
+    const rawList = toValue(props.optionList) as COptionItem[]
+    const clonedList = cloneDeep(rawList)
+    clonedList.forEach((optionItem: COptionItem) => {
+      if (!optionItem.id) {
+        const uniqueId = uuidv4()
+        optionItem.id = `radio-${props.name}-${uniqueId}`
+      }
+    })
+    return clonedList
+  });
+
+  // 2. 注入 viewModel，取得表單資料與驗證狀態
+  const viewModel = inject('c-formViewModel', new EmptyDataModel()) as BaseFormDataModel
+  if (!viewModel) {
+    console.error('RadioFormField: viewModel not found, please provide "c-formViewModel" in parent component')
+  }
+
+  // 3. 合併樣式設定，支援自訂與預設樣式
+  const bStyleConfig = BSFieldStyleConfig.mix({
+    plainTextClass: 'form-control-plaintext bg-light border rounded px-3 d-flex align-items-center'
+  }, props.styleConfig)
+
+  // 4. 取得欄位對應的 fieldModel 與 value 參照 (v-model 綁定)
+  const formFieldMap = viewModel.formFieldMap
+  const fieldModel = get(formFieldMap, props.name)
+  if (!fieldModel) {
+    console.error('RadioFormField: field model not found for name:', props.name)
+  }
+  const fieldRef = fieldModel?.value as Ref<boolean>
+  if (!fieldRef) {
+    console.error('RadioFormField.ref: field model not found for name:', props.name)
+  }
+
+  // 5. 控制項屬性：是否必填、是否閱讀模式、選中選項文字
+  // isRequired 改為 computed，根據 props.required（優先）及 viewModel.fieldIsRequired(props.name) 響應式判斷
+  const isRequired = computed(() => {
+    if (typeof props.requiredReactive === 'boolean') {
+      return props.requiredReactive
+    }
+    return props.required || viewModel.fieldIsRequired(props.name)
+  })
+  const isReadMode = props.readMode === true
+  const selectedText = ref('')
+
+  // 6. 閱讀模式下，動態取得已選擇選項的顯示文字
+  if (isReadMode) {
+    watch(fieldRef, (newValue) => {
+      const selectedOption = useOptionList.value.find(option => option.value === newValue)
+      selectedText.value = selectedOption ? selectedOption.text : ''
+    }, { immediate: true })
+  }
+
+  // 7. 回傳所有組件所需的狀態與參照
+  return {
+    /** 處理後的選項集 (含唯一 id) */
+    useOptionList,
+    /** 注入的表單 viewModel */
+    viewModel,
+    /** 合併後的樣式設定 */
+    bStyleConfig,
+    /** 欄位的 fieldModel (含驗證狀態) */
+    fieldModel,
+    /** 欄位的 value 參照 (v-model 綁定) */
+    fieldRef,
+    /** 是否必填 */
+    isRequired,
+    /** 是否為閱讀模式 */
+    isReadMode,
+    /** 已選擇選項的顯示文字 (閱讀模式用) */
+    selectedText,
+    /** 檢查欄位是否有錯誤的函數 */
+    hasFormFieldError
+  }
+}

package/src/directive/CBootstrapDirective.ts

@@ -0,0 +1,83 @@
+import {Directive, DirectiveBinding} from 'vue';
+import {Dropdown, Tooltip} from 'bootstrap';
+import {CBSModalViewModel} from "../model/CBSModalViewModel";
+
+
+/**
+ * v-tooltip 指令
+ * 初始化 Bootstrap 的 Tooltip
+ * 使用方式：<button v-tooltip>Hover me</button>
+ */
+export const vdTooltip: Directive = {
+  mounted(el) {
+    new Tooltip(el);
+  },
+  unmounted(el) {
+    const tooltip = Tooltip.getInstance(el);
+    if (tooltip) tooltip.dispose();
+  }
+};
+
+/**
+ * v-cbs-modal 指令
+ * binding.value 必須是 CBSModalViewModel 的實例
+ */
+export const vdCBSModal: Directive = {
+  mounted(elt, binding: DirectiveBinding) {
+    if(!(binding.value instanceof CBSModalViewModel)) {
+      console.error('vdCBSModal directive requires binding.value to be an instance of CBSModalView');
+      return;
+    }
+    const viewModel = binding.value as CBSModalViewModel;
+    viewModel.init({elt});
+  },
+  unmounted(elt, binding: DirectiveBinding) {
+    if(!(binding.value instanceof CBSModalViewModel)) {
+      console.error('vdCBSModal directive requires binding.value to be an instance of CBSModalView');
+      return;
+    }
+    // 清理 Modal 實例
+    const viewModel = binding.value as CBSModalViewModel;
+    viewModel.unmount();
+  }
+}
+
+// 當點擊其他地方時，隱藏 Dropdown
+function hideDropdown(el: HTMLElement, event: MouseEvent) {
+  // 如果點擊的不是 Dropdown 元素或其子元素，則隱藏 Dropdown
+  if (!el.contains(event.target as Node)) {
+    Dropdown.getInstance(el)?.hide();
+    return;
+  }
+}
+
+/**
+ * v-cbs-dropdown 指令
+ * 初始化 Bootstrap 的 Dropdown
+ */
+export const vdCBSDropdown: Directive = {
+  mounted(el: HTMLElement) {
+    // 初始化 Bootstrap 的 Dropdown
+    const dropdown = Dropdown.getOrCreateInstance(el);
+    // click toggle dropdown
+    el.addEventListener('click', (event: Event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      // 顯示 Dropdown
+      dropdown.toggle();
+      return false;
+    });
+    const docListener = hideDropdown.bind(null, el);
+    // 點擊其他地方關閉 Dropdown
+    document.addEventListener('click', docListener);
+
+  },
+  unmounted(el: HTMLElement) {
+    // 清理 Dropdown 實例
+    const dropdown = Dropdown.getInstance(el);
+    dropdown?.dispose();
+    const docListener = hideDropdown.bind(null, el);
+    // 移除點擊事件監聽器
+    document.removeEventListener('click', docListener);
+  }
+}

package/src/directive/CDateFormatterDirective.ts

@@ -0,0 +1,37 @@
+import dayjs from 'dayjs';
+import type {Directive} from 'vue';
+import {isRef} from 'vue';
+
+function formatDateToElement(el: HTMLElement, value: unknown) {
+  let date: Date | undefined;
+  if (isRef(value)) {
+    date = value.value as Date;
+  } else if (value instanceof Date) {
+    date = value;
+  }
+  // 如果 el 有 data-date-format 屬性，則使用該格式化方式
+  const dateFormat = el.getAttribute('data-date-format') || 'YYYY-MM-DD';
+  const formatted = date ? dayjs(date).format(dateFormat) : '';
+  if (el.tagName === 'INPUT' && (el as HTMLInputElement).type === 'text') {
+    (el as HTMLInputElement).value = formatted;
+  } else if (['SPAN', 'P', 'DIV'].includes(el.tagName)) {
+    el.innerHTML = formatted;
+  }
+}
+
+/**
+ * v-date-formatter 指令
+ * 解析 ref<Date> 並格式化為文字，根據元素型態輸出
+ * 可以透過 attribute data-date-format 指定日期格式，預設為 'YYYY-MM-DD'
+ * 使用方式：
+ * <input type="text" v-date-formatter="dateRef" data-date-format="YYYY/MM/DD" />
+ * <span v-date-formatter="dateRef" data-date-format="DD-MM-YYYY"></span>
+ */
+export const vdDateFormatter: Directive = {
+  mounted(el, binding) {
+    formatDateToElement(el, binding.value);
+  },
+  updated(el, binding) {
+    formatDateToElement(el, binding.value);
+  }
+};

package/src/directive/CFTurnstileDirective.ts

@@ -0,0 +1,46 @@
+import {type Directive, DirectiveBinding} from 'vue';
+import {FieldContext} from "vee-validate";
+
+
+/**
+ * v-cf-turnstile 指令
+ * 用於在表單中嵌入 Cloudflare Turnstile 驗證碼
+ * 使用方式：
+ * <pre>
+ * <div v-cf-turnstile="fieldContext"></div>
+ * 其中 fieldContext 為 vee-validate 的 FieldContext，用於接收驗證碼 token
+ * </pre>
+ * 需要在全域變數中定義 Cloudflare Turnstile 的 site key：
+ * <pre>
+ * (window as any).__CLOUDFLARE_TURNSTILE_SITE_KEY__ = 'your-site-key-here';
+ * </pre>
+ */
+export const CFTurnstileDirective: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    const fieldContext = binding.value as FieldContext;
+    const siteKey = (window as any).__CLOUDFLARE_TURNSTILE_SITE_KEY__;
+    if (!siteKey) {
+      console.error('Cloudflare Turnstile site key is not defined.');
+      return
+    }
+    const renderTurnstile = () => {
+      window.turnstile?.render(el, {
+        sitekey: siteKey,
+        callback: (token: string) => {
+          fieldContext.value.value = token;
+        }
+      })
+    }
+    if (window.turnstile) {
+      renderTurnstile()
+      return
+    }
+    const interval = setInterval(() => {
+      if (window.turnstile) {
+        clearInterval(interval)
+        renderTurnstile()
+      }
+    }, 100)
+
+  }
+}

package/src/directive/CFormDirective.ts

@@ -0,0 +1,57 @@
+import {type Directive, DirectiveBinding} from "vue";
+import {FieldContext} from "vee-validate";
+import _ from "lodash";
+import {Schema} from "yup";
+
+/**
+ * 此指令用於當 FormField 有錯誤時，顯示錯誤樣式 'is-invalid'。
+ */
+export const CFormFieldErrorStyleDirective: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    addErrorClassIfNeed(el, binding.value as FieldContext);
+  },
+  updated(el: HTMLElement, binding: DirectiveBinding) {
+    addErrorClassIfNeed(el, binding.value as FieldContext);
+  },
+}
+
+// 此函式用於檢查 FieldContext 的錯誤狀態，並根據錯誤狀態添加或移除 'is-invalid' 類別。
+function addErrorClassIfNeed(el: HTMLElement, fieldContext: FieldContext) {
+  if(_.isNil(fieldContext) || !_.has(fieldContext, 'errors') || !_.isArray(fieldContext.errors.value)) {
+    el.classList.remove('is-invalid');
+    return;
+  }
+
+  if(_.isEmpty(fieldContext.errors.value)) {
+    el.classList.remove('is-invalid');
+  } else {
+    el.classList.add('is-invalid');
+  }
+}
+
+/**
+ * 此指令用於當 Yup Schema 驗證失敗時，顯示錯誤樣式 'is-invalid'。
+ */
+export const CFormFieldErrorOnYupDirective: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    addErrorClassIfNeedOnYup(el, binding.value as Schema);
+  },
+  updated(el: HTMLElement, binding: DirectiveBinding) {
+    addErrorClassIfNeedOnYup(el, binding.value as Schema);
+  },
+}
+
+function addErrorClassIfNeedOnYup(el: HTMLElement, schema: Schema) {
+  if(_.isNil(schema) || !_.isFunction(schema.validateSync)) {
+    el.classList.remove('is-invalid');
+    return;
+  }
+
+  try {
+    const val = (el as HTMLInputElement).value || '';
+    schema.validateSync(val);
+    el.classList.remove('is-invalid');
+  } catch (err) {
+    el.classList.add('is-invalid');
+  }
+}

package/src/directive/PermissionDirective.ts

@@ -0,0 +1,102 @@
+import {Directive, DirectiveBinding} from "vue";
+import _ from "lodash";
+import {UserSessionActions} from "../stores/ViewStore";
+
+/**
+ * 此指令用於根據使用者權限來控制元素的顯示與否。
+ * 使用方式：v-permission="{need: ['PERMISSION_1', 'PERMISSION_2'], granted: userPermissionsArray, enableVisible: true}"
+ * 當使用者擁有其中一個權限時，元素將會顯示，否則隱藏。
+ * 根據 enableVisible 參數決定是隱藏元素還是移除元素，true 為隱藏 (使用 d-none)，false 為移除元素。
+ */
+export const PermissionDirective: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    const {
+      need,
+      granted,
+      enableVisible = false
+    } = binding.value as { need: string[] | string, granted: string[], enableVisible?: boolean};
+    const executeShow = (needToShow: boolean) => {
+      if(enableVisible) {
+        el.classList.toggle('d-none', !needToShow);
+        return;
+      }
+      if(!needToShow) {
+        el.remove();
+      }
+    }
+    const neededPermissions = Array.isArray(need) ? need : [need];
+    if(_.isEmpty(neededPermissions)) {
+      executeShow(false);
+      return;
+    }
+    if(_.isEmpty(granted)) {
+      executeShow(false);
+      return;
+    }
+    const hasPermission = _.some(neededPermissions, perm => _.includes(granted, perm));
+    if(!hasPermission) {
+      executeShow(false);
+    } else {
+      executeShow(true);
+    }
+  },
+  updated(el: HTMLElement, binding: DirectiveBinding) {},
+}
+
+
+/**
+ * 此指令用於根據使用者權限來控制元素的顯示與否，使用 UserSessionActions 來檢查權限。
+ * 使用方式：v-store-permission="{sessionStore: userSessionStore, need: ['PERMISSION_1', 'PERMISSION_2'], enableVisible: true}"
+ * 當使用者擁有其中一個權限時，元素將會顯示，否則隱藏。
+ * 根據 enableVisible 參數決定是隱藏元素還是移除元素，true 為隱藏 (使用 d-none)，false 為移除元素。
+ */
+export const StorePermissionDirective: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    const {
+      sessionStore,
+      need,
+      enableVisible = false
+    } = binding.value as { sessionStore: UserSessionActions, need: string[] | string, enableVisible?: boolean};
+    const executeShow = (needToShow: boolean) => {
+      if(enableVisible) {
+        el.classList.toggle('d-none', !needToShow);
+        return;
+      }
+      if(!needToShow) {
+        el.remove();
+      }
+    }
+    const neededPermissions = Array.isArray(need) ? need : [need];
+    executeShow(sessionStore.hasPermission(neededPermissions));
+  },
+  updated(el: HTMLElement, binding: DirectiveBinding) {},
+}
+
+// 在外部定義一個 Map
+const nodeMap = new WeakMap<HTMLElement, Node>();
+
+/**
+ * 建立一個權限指令，使用提供的 UserSessionActions 來檢查權限。
+ * @param options
+ */
+export const createPermissionDirectives = (options: { sessionStore?: UserSessionActions }) => {
+  return {
+    mounted(el: HTMLElement, binding: DirectiveBinding) {
+      const need = binding.value as string[] | string;
+      const sessionStore = options.sessionStore;
+      if (!sessionStore) {
+        return;
+      }
+      const hasPermission = sessionStore.hasPermission(need);
+      if (!hasPermission) {
+        // 建立一個空的註釋節點來取代原有的 DOM
+        const comment = document.createComment('v-permission-hidden');
+        // 儲存在 Map 中，如果未來需要還原，可以從 nodeMap 取回
+        nodeMap.set(el, comment);
+        el.parentNode?.replaceChild(comment, el);
+      }
+    },
+    updated(el: HTMLElement, binding: DirectiveBinding) {
+    },
+  };
+}

package/src/env.d.ts

@@ -0,0 +1,19 @@
+interface ImportMetaEnv {
+  readonly VITE_CLOUDFLARE_TURNSTILE_SITE_KEY: string
+  readonly VITE_API_PROXY_ENABLE: string;
+  readonly VITE_API_BASE_URL: string;
+  readonly VITE_API_PROXY_BASE_URL: string;
+  readonly VITE_API_CONTEXT_PATH: string;
+  readonly VITE_TINYMCE_API_KEY: string;
+  readonly VITE_MAX_FILE_SIZE: number;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
+
+declare module "*.vue" {
+  import { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/src/index.ts

@@ -0,0 +1,83 @@
+// ~ ----------------------------------------------------------
+// ~ VUE Directive Exports
+export {vdTooltip, vdCBSDropdown, vdCBSModal} from './directive/CBootstrapDirective';
+export {vdDateFormatter} from './directive/CDateFormatterDirective';
+export {CFTurnstileDirective} from './directive/CFTurnstileDirective';
+export {CFormFieldErrorOnYupDirective, CFormFieldErrorStyleDirective} from './directive/CFormDirective';
+export {PermissionDirective, StorePermissionDirective, createPermissionDirectives} from './directive/PermissionDirective';
+
+// ~ ----------------------------------------------------------
+// ~ Model Exports
+export {CBSModalViewModel, ICBSModalViewType} from './model/CBSModalViewModel';
+export {BaseFormDataModel, hasFormFieldError} from './model/BaseFormDataModel';
+export * from './model/BaseListViewModel';
+export * from './model/BSFieldStyleConfig';
+export {CFileDataModel} from './model/CFileDataModel';
+export {CImageViewModel} from './model/CImageViewModel';
+export {EmailReceiverDataModel} from './model/EmailReceiverDataModel';
+export {EmptyDataModel} from './model/EmptyDataModel';
+export {LoginDataModel} from './model/LoginDataModel';
+export {PasswordDataModel} from './model/PasswordDataModel';
+export {Role, SessionUser} from './model/SessionUser';
+export * from './model/TokenUser';
+export * from './model/QueryParameter';
+export * from './model/FormOptions';
+export * from './model/ShowMessageDataModel';
+
+// ~ ----------------------------------------------------------
+// ~ Utils Exports
+export * from './utils/CToolUtils';
+
+// ~ ----------------------------------------------------------
+// ~ Auth Exports
+export {CMenuItem} from './model/CMenuItem';
+export {AuthorizationService} from './auth/AuthorizationService';
+export * from './auth/PermissionDescriptor';
+
+// ~ ----------------------------------------------------------
+// ~ API Exports
+export * from './api/ApiService';
+
+// ~ ----------------------------------------------------------
+// ~ Store Exports
+export * from './model/BaseDictionary';
+export * from './stores/ViewStore';
+import HasPermission from "./components/HasPermission.vue";
+import VueSessionStoreInstaller from './stores/VueSessionStoreInstaller';
+export {HasPermission, VueSessionStoreInstaller};
+
+// ~ ----------------------------------------------------------
+// ~ VUE component Exports
+export * from './components/CAlertDefine';
+import CAlert from './components/CAlert.vue';
+import CBSToast from './components/CBSToast.vue';
+import CGlobalSpinner from "./components/CGlobalSpinner.vue";
+import CChangePasswordFormField from "./components/form/CChangePasswordFormField.vue";
+import CCheckboxFormField from "./components/form/CCheckBoxFormField.vue";
+import CDateFormField from "./components/form/CDateFormField.vue";
+import CDateQueryField from "./components/form/CDateQueryField.vue";
+import CDateRangeFormField from "./components/form/CDateRangeFormField.vue";
+import CFilePickerFormField from "./components/form/CFilePickerFormField.vue";
+import CRadioFormField from "./components/form/CRadioFormField.vue";
+import CSelectFormField from "./components/form/CSelectFormField.vue";
+import CTextAreaFormField from "./components/form/CTextAreaFormField.vue";
+import CTextInputFormField from "./components/form/CTextInputFormField.vue";
+import CRadioPlatFormField from "./components/form/CRadioPlatFormField.vue";
+import CCheckBoxPlatFormField from "./components/form/CCheckBoxPlatFormField.vue";
+
+// ~ ----------------------------------------------------------
+// ~ Table component Exports
+import CTable from "./components/CTable.vue";
+import CTableTD from "./components/CTableTD.vue";
+export * from "./components/CTableDefine";
+
+export {
+  CAlert, CBSToast, CGlobalSpinner,
+  CChangePasswordFormField, CCheckboxFormField, CDateFormField,
+  CDateQueryField, CDateRangeFormField, CFilePickerFormField,
+  CRadioFormField, CSelectFormField, CTextAreaFormField,
+  CRadioPlatFormField, CCheckBoxPlatFormField, CTextInputFormField,
+  CTable, CTableTD
+};
+
+