ch3chi-commons-vue 1.2.0 → 1.8.1

package/src/model/BSFieldStyleConfig.ts

@@ -0,0 +1,349 @@
+/**
+ * BSFieldStyleConfig 配置物件
+ * 用於以配置方式自訂欄位外觀和行為
+ */
+
+export interface IBSFieldStyleConfig {
+  // ----- 容器配置 -----
+  containerClass?: string;
+
+  // ----- Label 配置 -----
+  labelClass?: string;
+  labelPrefix?: string; // label 前置內容
+  labelSuffix?: string; // label 後置內容
+  hideLabel?: boolean;
+
+  // ----- required label 配置 -----
+  requiredLabelClass?: string;
+  requiredLabelText?: string;
+
+  // plain text 配置
+  plainTextClass?: string;
+
+  // ----- Input 配置 -----
+  inputClass?: string;
+  inputPrefix?: {
+    text?: string;
+    class?: string;
+  };
+  inputSuffix?: {
+    text?: string;
+    class?: string;
+  };
+  wrapperClass?: string; // input-group 的 class
+
+  // ----- Select 配置 -----
+  selectClass?: string;
+  selectSize?: 'sm' | 'lg'; // Bootstrap select 大小
+  selectMultiple?: boolean; // 是否多選
+  selectPlaceholder?: string; // placeholder 文字
+
+  // ----- Textarea 配置 -----
+  textareaClass?: string;
+  textareaRows?: number; // 預設行數
+  textareaResize?: 'none' | 'both' | 'horizontal' | 'vertical'; // 調整大小方式
+  textareaAutoGrow?: boolean; // 自動調整高度
+
+  // ----- Checkbox/Radio 配置 -----
+  checkboxClass?: string;
+  checkboxLabelClass?: string;
+  checkboxWrapperClass?: string; // form-check div 的 class
+  checkboxHelperIconClass?: string; // checkbox helper icon class
+  radioClass?: string;
+  radioLabelClass?: string;
+  radioWrapperClass?: string; // form-check div 的 class
+  radioInline?: boolean; // 是否水平排列
+  radioHelperIconClass?: string; // radio helper icon class
+
+  // ----- File Input 配置 -----
+  fileClass?: string;
+  fileAccept?: string; // 允許的檔案類型
+  fileMultiple?: boolean; // 是否多檔案選擇
+  fileDragDrop?: boolean; // 是否支援拖放
+
+  // ----- Date Button 配置 -----
+  calendarIconClass?: string;
+  calendarClearIconClass?: string;
+
+  // ----- Button 配置 -----
+  changePasswordButtonClass?: string;
+  changePasswordButtonIcon?: string;
+
+  // ----- Error 配置 -----
+  errorClass?: string;
+  errorPrefix?: string;
+
+}
+
+/**
+ * BSFieldStyleConfig 類別
+ */
+export class BSFieldStyleConfig {
+
+  /**
+   * 單一實例
+   */
+  static instance: BSFieldStyleConfig = new BSFieldStyleConfig();
+
+  /**
+   * 合併配置
+   * @param config 要合併到全域實例的配置
+   */
+  static merge(config: IBSFieldStyleConfig) {
+    this.instance.config = { ...this.instance.config, ...config };
+  }
+
+  /**
+   * 混合多個樣式配置，建立新的 BSFieldStyleConfig 實例
+   * 優先順序：propStyle > defaultStyle > instance（全域設定）
+   *
+   * @param defaultStyle 預設樣式配置（例如組件內建的預設值）
+   * @param propStyle 組件 prop 傳入的樣式配置
+   * @returns 合併後的 BSFieldStyleConfig 實例
+   *
+   * @example
+   * ```typescript
+   * // 在組件中使用
+   * const bStyleConfig = BSFieldStyleConfig.mix(
+   *   { plainTextClass: 'form-control-plaintext bg-light' }, // 組件預設值
+   *   props.styleConfig // 從 prop 傳入的值
+   * );
+   * ```
+   */
+  static mix(defaultStyle: IBSFieldStyleConfig, propStyle?: IBSFieldStyleConfig): BSFieldStyleConfig {
+    // 合併順序：預設樣式 <- 全域設定 <- prop 樣式
+    const mergedConfig = {
+      ...defaultStyle,
+      ...this.instance.config,
+      ...(propStyle || {})
+    };
+    return new BSFieldStyleConfig(mergedConfig);
+  }
+
+  // ~ ----------------------------------------------------------
+  // ~ constructor
+
+  constructor(public config: IBSFieldStyleConfig = {}) {
+  }
+
+  // 取得容器 class
+  get containerClass(): string {
+    return this.config.containerClass || 'form-group';
+  }
+
+  // 取得 label class
+  get labelClass(): string {
+    return this.config.labelClass || 'form-label';
+  }
+
+  // 取得 input class
+  get inputClass(): string {
+    return this.config.inputClass || 'form-control';
+  }
+
+  // 取得 wrapper class（用於 input-group）
+  get wrapperClass(): string {
+    return this.config.wrapperClass || 'input-group';
+  }
+
+  // 取得 error class
+  get errorClass(): string {
+    return this.config.errorClass || 'invalid-feedback d-block mt-1';
+  }
+
+  // 是否隱藏 label
+  get hideLabel(): boolean {
+    return this.config.hideLabel || false;
+  }
+
+  // 取得 required label class 樣式
+  get requiredLabelClass(): string {
+    return this.config.requiredLabelClass || 'text-danger px-1';
+  }
+
+  // 取得 required label 文字
+  get requiredLabelText(): string {
+    return this.config.requiredLabelText || '*';
+  }
+
+  // 取得 plain text class
+  get plainTextClass(): string {
+    return this.config.plainTextClass || 'form-control-plaintext';
+  }
+
+  // 是否有 input prefix
+  get hasInputPrefix(): boolean {
+    return !!this.config.inputPrefix?.text;
+  }
+
+  // 是否有 input suffix
+  get hasInputSuffix(): boolean {
+    return !!this.config.inputSuffix?.text;
+  }
+
+  // 取得 input prefix text
+  get inputPrefixText(): string {
+    return this.config.inputPrefix?.text || '';
+  }
+
+  // 取得 input suffix text
+  get inputSuffixText(): string {
+    return this.config.inputSuffix?.text || '';
+  }
+
+  // 取得 input prefix class
+  get inputPrefixClass(): string {
+    return this.config.inputPrefix?.class || 'input-group-text';
+  }
+
+  // 取得 input suffix class
+  get inputSuffixClass(): string {
+    return this.config.inputSuffix?.class || 'input-group-text';
+  }
+
+  // ----- Select 相關屬性 -----
+
+  // 取得 select class
+  get selectClass(): string {
+    let baseClass = this.config.selectClass || 'form-select';
+    if (this.config.selectSize) {
+      baseClass += ` form-select-${this.config.selectSize}`;
+    }
+    return baseClass;
+  }
+
+  // 是否多選 select
+  get selectMultiple(): boolean {
+    return this.config.selectMultiple || false;
+  }
+
+  // 取得 select placeholder
+  get selectPlaceholder(): string {
+    return this.config.selectPlaceholder || '';
+  }
+
+  // ----- Textarea 相關屬性 -----
+
+  // 取得 textarea class
+  get textareaClass(): string {
+    return this.config.textareaClass || 'form-control';
+  }
+
+  // 取得 textarea rows
+  get textareaRows(): number {
+    return this.config.textareaRows || 3;
+  }
+
+  // 取得 textarea resize 樣式
+  get textareaResizeStyle(): string {
+    return this.config.textareaResize ? `resize: ${this.config.textareaResize}` : '';
+  }
+
+  // 是否自動調整高度
+  get textareaAutoGrow(): boolean {
+    return this.config.textareaAutoGrow || false;
+  }
+
+  // ----- Checkbox 相關屬性 -----
+
+  // 取得 checkbox class
+  get checkboxClass(): string {
+    return this.config.checkboxClass || 'form-check-input';
+  }
+
+  // 取得 checkbox label class
+  get checkboxLabelClass(): string {
+    return this.config.checkboxLabelClass || 'form-check-label';
+  }
+
+  // 取得 checkbox wrapper class
+  get checkboxWrapperClass(): string {
+    return this.config.checkboxWrapperClass || 'form-check';
+  }
+
+  get checkboxHelperIconClass(): string {
+    return this.config.checkboxHelperIconClass || '';
+  }
+
+  // ----- Radio 相關屬性 -----
+
+  // 取得 radio class
+  get radioClass(): string {
+    return this.config.radioClass || 'form-check-input';
+  }
+
+  // 取得 radio label class
+  get radioLabelClass(): string {
+    return this.config.radioLabelClass || 'form-check-label';
+  }
+
+  // 取得 radio wrapper class
+  get radioWrapperClass(): string {
+    let baseClass = this.config.radioWrapperClass || 'form-check';
+    if (this.config.radioInline) {
+      baseClass += ' form-check-inline';
+    }
+    return baseClass;
+  }
+
+  // 是否 radio inline 排列
+  get radioInline(): boolean {
+    return this.config.radioInline || false;
+  }
+
+  // 取得 radio helper icon class
+  get radioHelperIconClass(): string {
+    return this.config.radioHelperIconClass || '';
+  }
+
+  // ----- File Input 相關屬性 -----
+
+  // 取得 file input class
+  get fileClass(): string {
+    return this.config.fileClass || 'form-control';
+  }
+
+  // 取得 file accept 屬性
+  get fileAccept(): string {
+    return this.config.fileAccept || '';
+  }
+
+  // 是否多檔案選擇
+  get fileMultiple(): boolean {
+    return this.config.fileMultiple || false;
+  }
+
+  // 是否支援拖放
+  get fileDragDrop(): boolean {
+    return this.config.fileDragDrop || false;
+  }
+
+  // ----- Date Button 相關屬性 -----
+
+  // 取得 calendar icon class
+  get calendarIconClass(): string {
+    return this.config.calendarIconClass || 'bi bi-calendar-event';
+  }
+
+  // 取得 calendar clear icon class
+  get calendarClearIconClass(): string {
+    return this.config.calendarClearIconClass || 'bi bi-x-circle' ;
+  }
+
+  // ----- button -----
+  // 取得 change password button class
+  get changePasswordButtonClass(): string {
+    return this.config.changePasswordButtonClass || 'btn btn-warning';
+  }
+
+  // 取得 change password button icon
+  get changePasswordButtonIcon(): string {
+    return this.config.changePasswordButtonIcon || '';
+  }
+}
+
+// ~ ----------------------------------------------------------
+
+// 防止 Vite/rollup tree-shake 掉 type export
+export const __BSFieldStyleConfigDefine__ = null as unknown as
+  IBSFieldStyleConfig;

package/src/model/BaseDictionary.ts

@@ -0,0 +1,86 @@
+/**
+ * BaseDictionary class
+ * 用於 distionary store 的基底類別
+ */
+export abstract class BaseDictionary {
+  protected data: Record<string, any> = {};
+  dataProvider: (key: string) => Promise<any> | any = () => ({});
+  lastUpdatedAt: number = Date.now();
+
+  protected constructor(data: Partial<BaseDictionary> = {}) {
+    if (data) {
+      Object.assign(this, data);
+    }
+    this.init();
+  }
+
+  /**
+   * 初始化方法，讓子類別可以覆寫以進行自訂初始化
+   * @protected
+   */
+  abstract init():void;
+
+  val(key: string): any {
+    return this.data[key];
+  }
+
+  setVal(key: string, value: any): void {
+    this.data[key] = value;
+  }
+
+  hasVal(key: string): boolean {
+    return key in this.data;
+  }
+
+  /**
+   * 載入所有字典資料
+   * 使用 Promise.allSettled 確保即使某個載入失敗，其他的也能繼續執行
+   */
+  async loadAll(): Promise<void> {
+    const keys = Object.keys(this.data);
+    const results = await Promise.allSettled(keys.map(key => this.loadDictionary(key)));
+    // 可選：記錄失敗的項目
+    results.forEach((result, index) => {
+      if (result.status === 'rejected') {
+        console.error(`Failed to load dictionary for key "${keys[index]}":`, result.reason);
+      }
+    });
+  }
+
+  /**
+   * load dictionary data
+   * 支援 Promise 或是直接回傳資料物件
+   * @param key
+   */
+  async loadDictionary(key: string): Promise<Record<string, any>> {
+    const result = this.dataProvider(key);
+    if (result instanceof Promise) {
+      return result.then(data => {
+        this.data[key] = data;
+        this.lastUpdatedAt = Date.now();
+        return data;
+      });
+    }
+    this.data[key] = result;
+    this.lastUpdatedAt = Date.now();
+    return Promise.resolve(result);
+  }
+
+  loadFromStore(storeData: Record<string, any>): this {
+    this.data = storeData.data || {};
+    return this;
+  }
+
+  // ~ ----------------------------------------------------------
+}
+
+export class CBaseDictionary extends BaseDictionary {
+
+  constructor(data: Partial<CBaseDictionary> = {}) {
+    super(data);
+  }
+
+  init(): void {
+    // 子類別可覆寫此方法進行初始化
+  }
+}