ch3chi-commons-vue 0.1.13 → 1.2.0

package/README.md

@@ -1,19 +1,40 @@
 # Commons Vue Library
 
-這是一個 Vue 公用元件/函式庫。
+這是一個 Vue 3 公用元件/函式庫，提供常用的 UI 元件、API 服務、權限管理等功能，基於 TypeScript 和 Bootstrap 5。
+
+## 功能概述
+
+- **API 服務**: 封裝 Axios，提供統一的 API 呼叫介面，支持身份驗證、檔案下載等。
+- **權限管理**: 提供角色權限映射和選單權限控制。
+- **UI 元件**: 包括表格、表單欄位、警示、載入動畫等 Vue 元件。
+- **指令**: 提供權限控制、日期格式化、表單驗證等 Vue 指令。
+- **模型與工具**: 提供資料模型、工具函式等。
 
 ## 安裝
 
 ```bash
-npm install commons-vue
+npm install ch3chi-commons-vue
 ```
 
+### 相依套件
+
+此函式庫依賴以下套件，請確保您的專案已安裝：
+
+- Vue 3
+- Bootstrap 5
+- Axios
+- Vee-Validate
+- Yup
+- Day.js
+- Lodash
+- 其他請參考 package.json 的 peerDependencies
+
 ## 使用方式
 
 ### APIService 範例
 
 ```ts
-import { ApiService, ApiRequest } from 'commons-vue';
+import { ApiService, ApiRequest } from 'ch3chi-commons-vue';
 
 // 註冊多個 API 端點
 ApiService.registerEndpoints({
@@ -53,7 +74,7 @@ ApiService.download(downloadReq).then(() => {
 ### AuthorizationService 範例
 
 ```ts
-import { AuthorizationService, CMenuItem, MenuItem } from 'commons-vue';
+import { AuthorizationService, CMenuItem, MenuItem } from 'ch3chi-commons-vue';
 
 // 設定角色權限映射
 AuthorizationService.rolePermissionMap = {
@@ -81,8 +102,120 @@ const menu = AuthorizationService.provideMenuByPermission({
 console.log('使用者可見選單:', menu);
 ```
 
+### UI 元件範例
+
+#### CTable 表格元件
+
+```vue
+<template>
+  <CTable
+    :columns="columns"
+    :data-list="dataList"
+    :query-param="queryParam"
+    @page-change="handlePageChange"
+    @sort-change="handleSortChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { CTable, CTableColumn } from 'ch3chi-commons-vue';
+
+const columns: CTableColumn[] = [
+  { key: 'name', label: '名稱', sortable: true },
+  { key: 'email', label: '電子郵件' }
+];
+
+const dataList = [
+  { name: 'John Doe', email: 'john@example.com' }
+];
+
+const queryParam = reactive({
+  page: 1,
+  size: 10,
+  sort: []
+});
+</script>
+```
 
+#### 表單欄位元件
+
+```vue
+<template>
+  <CTextInputFormField
+    v-model="formData.name"
+    label="名稱"
+    :validation-rules="{ required: true }"
+  />
+  <CDateFormField
+    v-model="formData.birthDate"
+    label="生日"
+  />
+</template>
+
+<script setup lang="ts">
+import { CTextInputFormField, CDateFormField } from 'ch3chi-commons-vue';
+
+const formData = reactive({
+  name: '',
+  birthDate: null
+});
+</script>
+```
+
+#### 其他元件
+
+- `CAlert`: 警示訊息元件
+- `CBSToast`: Toast 通知
+- `CGlobalSpinner`: 全域載入動畫
+
+### 指令範例
+
+#### 權限指令
+
+```vue
+<template>
+  <button v-permission="'user.write'">編輯使用者</button>
+</template>
+
+<script setup lang="ts">
+import { PermissionDirective } from 'ch3chi-commons-vue';
+</script>
+```
+
+#### 日期格式化指令
+
+```vue
+<template>
+  <span v-date-formatter="dateValue"></span>
+</template>
+
+<script setup lang="ts">
+import { vdDateFormatter } from 'ch3chi-commons-vue';
+</script>
+```
 
 ## 文件
 
-請參考 src/ 目錄下的程式碼與註解，或補充詳細 API 文件。
+請參考以下文件以獲取詳細資訊：
+
+- [API Service 使用指南](doc/ApiService-BearerAuth-Mechanism.md)
+- [CTable 樣式配置指南](doc/CTableStyleConfig-Usage-Guide.md)
+- [權限管理指南](doc/UserSession-Store-Generic-Guide.md)
+- 其他文件請參考 `doc/` 目錄
+
+## 開發與建置
+
+```bash
+# 安裝依賴
+npm install
+
+# 建置
+npm run vite-build
+
+# 發行新版本
+npm run release
+```
+
+## 授權
+
+此專案採用 MIT 授權。

package/dist/api/ApiService.d.ts

@@ -1,4 +1,5 @@
-import { AxiosProgressEvent, RawAxiosResponseHeaders } from 'axios';
+import { AxiosProgressEvent, AxiosRequestConfig, AxiosResponse, RawAxiosResponseHeaders } from 'axios';
+import { AccessToken } from '../model/TokenUser';
 /**
  * ApiEndpoint 定義 API 端點的結構
  */
@@ -6,9 +7,22 @@ export interface ApiEndpoint {
     path: string;
     method: string;
     isAuthenticated?: boolean;
+    security?: string[];
+    withCredentials?: boolean;
+    isRefreshTokenEndpoint?: boolean;
     errorMessageMap?: Record<number, string>;
     noSpinner?: boolean;
     headers?: Record<string, string>;
+    metaData?: Record<string, any>;
+}
+/**
+ * CreateEndpointOptions 定義建立 ApiEndpoint 時的選項
+ * 通常用於設定預設值
+ */
+export interface CreateEndpointOptions {
+    isAuthenticated?: boolean;
+    security?: string[];
+    headers?: Record<string, string>;
 }
 /**
  * ApiRequest 定義 API 請求的結構
@@ -22,6 +36,8 @@ export declare class ApiRequest {
     isDownloadMode?: boolean;
     downloadFileName?: string;
     onUploadProgress?: (progressEvent: AxiosProgressEvent) => void;
+    axiosConfig?: AxiosRequestConfig;
+    noSpinner?: boolean;
     constructor(data: ApiRequest);
 }
 /**
@@ -29,13 +45,15 @@ export declare class ApiRequest {
  */
 export declare class ApiResponse {
     httpStatus: number;
-    code: number;
+    status?: number;
     message?: string;
     data?: any;
     nativeError?: any;
     paging?: Record<string, any>;
     blobData?: Blob;
     headers?: RawAxiosResponseHeaders;
+    details?: any;
+    axiosResponse?: AxiosResponse;
     constructor(data?: Partial<ApiResponse>);
     isOk(): boolean;
 }
@@ -53,23 +71,79 @@ export declare class ApiRejectError extends Error {
  * ApiService 提供呼叫後端 API 的功能
  */
 export declare class ApiService {
+    private static _options;
     private static _apiEndpoints;
     private static _customHeaders;
+    private static _customHeaderProvider?;
     private static _customErrorMessageMap;
+    private static _accessToken?;
+    private static _accessTokenProvider?;
+    private static _refreshTokenPromise?;
+    private static _axiosInstance?;
+    private static _failedRequestQueue;
+    private static _isRefreshing;
+    static set accessToken(token: AccessToken);
+    static set accessTokenProvider(provider: () => Promise<AccessToken | undefined>);
+    static getAccessToken(): Promise<AccessToken | undefined>;
+    /**
+     * 靜態方法，新增全域自訂標頭
+     * @param key
+     * @param value
+     */
+    static addHeader(key: string, value: string): void;
+    /**
+     * 靜態方法，移除全域自訂標頭
+     * @param key
+     */
+    static removeHeader(key: string): void;
+    /**
+     * 靜態方法，設定自訂標頭提供者
+     * @param provider
+     */
+    static customHeaderProvider(provider: (endpoint: ApiEndpoint, header: Record<string, any>) => Promise<Record<string, string>>): void;
     constructor();
     /**
      * 靜態方法，配置 ApiService
      * 為方便管理，建議在專案啟動時呼叫此方法註冊所有端點
      * 可以配置
+     * - debugMode: 是否啟用除錯模式
+     * - baseUrl: API 伺服器的基礎 URL
+     * - contextPath: API 的上下文路徑
+     * - proxyEnable: 是否啟用代理
+     * - proxyBaseUrl: 代理的基礎 URL
+     * - showSpinnerFunc: 顯示全域載入動畫的函式
+     * - hideSpinnerFunc: 隱藏全域載入動畫的函式
+     * - showErrorToastFunc: 顯示全域錯誤提示的函式
      * - endpoints: 預設註冊的 API 端點
      * - customHeaders: 全域自訂標頭
      * - customErrorMessageMap: 全域自訂錯誤訊息對應
+     * - createEndpointOptions: 建立端點時的預設選項
+     * - refreshTokenFunc: 刷新存取權杖的函式
+     * - onAuthenticateFailed: 認證失敗時的回調函式
      * @param config
      */
     static configure(config: {
+        debugMode?: boolean;
+        baseUrl?: string;
+        contextPath?: string;
+        proxyEnable?: boolean;
+        proxyBaseUrl?: string;
+        showSpinnerFunc?: () => void;
+        hideSpinnerFunc?: () => void;
+        showErrorToastFunc?: (param: {
+            title?: string;
+            content?: string;
+        }) => void;
         endpoints: Record<string, ApiEndpoint>;
         customHeaders?: Record<string, string>;
+        customHeaderProvider?: (endpoint: ApiEndpoint, header: Record<string, any>) => Promise<Record<string, string>>;
         customErrorMessageMap?: Record<number, string>;
+        createEndpointOptions?: CreateEndpointOptions;
+        refreshTokenFunc?: () => Promise<AccessToken>;
+        onAuthenticateFailed?: (param: {
+            apiEndpoint: ApiEndpoint;
+            apiRequest: ApiRequest;
+        }) => void;
     }): void;
     /**
      * 靜態方法，新增單一 API 端點
@@ -123,4 +197,37 @@ export declare class ApiService {
      * @param str RFC 2047 編碼的字串
      */
     decodeRfc2047(str: string): string;
+    /**
+     * 檢查是否啟用 Bearer Token 認證
+     */
+    private static hasBearerAuth;
+    /**
+     * 設定 axios 攔截器
+     */
+    private static setupAxiosInterceptors;
+    /**
+     * 設定認證相關的 interceptors
+     */
+    private static setupAuthInterceptorsOnBearerAuth;
+    /**
+     * 刷新 access token
+     */
+    static refreshToken(): Promise<AccessToken>;
+    /**
+     * 檢查並刷新 token（如果需要）
+     */
+    private static refreshTokenIfNeeded;
+    /**
+     * 處理佇列中的失敗請求
+     */
+    private static processFailedRequestQueue;
+    /**
+     * 處理認證失敗
+     */
+    private static handleAuthenticationFailed;
+    /**
+     * 取得 axios 實例
+     */
+    private static getAxiosInstance;
 }
+export declare const __ApiServiceDefine__: ApiEndpoint;

package/dist/auth/AuthorizationService.d.ts

@@ -49,8 +49,7 @@ export declare class AuthorizationService {
     static hasPermissionByRole(roleCodes: string[], requiredPermission: string): boolean;
     /**
      * 根據角色列表提供選單項目
-     * @param roleCode 角色代碼
-     * @param permissions 權限列表
+     * @param param 配置參數
      */
     static provideMenuByPermission(param: ProvideMenuByPermissionParams): CMenuItem[];
 }

package/dist/auth/PermissionDescriptor.d.ts

@@ -0,0 +1,37 @@
+/**
+ * 權限：操作字串列舉
+ */
+export declare enum PermissionAction {
+    NONE = "NONE",// 無操作
+    SIGN_IN = "SIGN_IN",// 登入
+    SIGN_OUT = "SIGN_OUT",// 登出
+    FORGOT_PASSWORD = "FORGOT_PASSWORD",// 忘記密碼
+    RESET_PASSWORD = "RESET_PASSWORD",// 重設個人密碼
+    CHANGE_PASSWORD = "CHANGE_PASSWORD",// 更改密碼
+    CREATE = "CREATE",// 建立資料
+    SEARCH = "SEARCH",// 查詢列表
+    READ = "READ",// 讀取資料
+    UPDATE = "UPDATE",// 更新資料
+    DELETE = "DELETE",// 刪除資料
+    EXPORT = "EXPORT"
+}
+/**
+ * 權限描述類別
+ */
+export declare class PermissionDescriptor {
+    module: string;
+    action: PermissionAction;
+    supportedActions: PermissionAction[];
+    constructor(data?: Partial<PermissionDescriptor> | string);
+    /**
+     * 檢查是否屬於同一個 module
+     * @param toCheckPermissions
+     */
+    checkModule(toCheckPermissions: string[]): boolean;
+    /**
+     * 檢查是否具有指定的權限
+     * @param toCheckPermissions
+     */
+    checkPermission(toCheckPermissions: string[]): boolean;
+}
+export declare const __PermissionStringDefine__: PermissionAction;

package/dist/components/CAlertDefine.d.ts

@@ -1,4 +1,5 @@
 export interface CAlertModalData {
+    type?: CAlertModalType | string;
     title?: string;
     content?: string;
     onCancel?: () => void;
@@ -10,3 +11,4 @@ export declare enum CAlertModalType {
     Confirm = "confirm",// 確認類型
     Info = "info"
 }
+export declare const __CAlertModelDefine__: CAlertModalData & CAlertModalType;

package/dist/components/CGlobalSpinner.vue.d.ts

@@ -1,5 +1,8 @@
 type __VLS_Props = {
     show?: boolean;
+    color?: string;
+    delayMS?: number;
+    isDelay?: boolean;
 };
 declare function showSpinner(): void;
 declare function hide(): void;

package/dist/components/CTable.vue.d.ts

@@ -0,0 +1,24 @@
+import { Reactive } from 'vue';
+import { BaseFormDataModel } from '../model/BaseFormDataModel';
+import { QueryParameter } from '../model/QueryParameter';
+import { CTableColumn } from './CTableDefine';
+type CTableProps<T extends QueryParameter, V extends BaseFormDataModel> = {
+    queryParam?: Reactive<T>;
+    columns: CTableColumn[];
+    dataList?: V[];
+    disablePagination?: boolean;
+    multiSort?: boolean;
+    pageSizeOptions?: number[];
+    styleConfig?: Record<string, any>;
+};
+type __VLS_Props = CTableProps<QueryParameter, BaseFormDataModel>;
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "table-action": (...args: any[]) => void;
+    "page-change": (...args: any[]) => void;
+    "sort-change": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onTable-action"?: ((...args: any[]) => any) | undefined;
+    "onPage-change"?: ((...args: any[]) => any) | undefined;
+    "onSort-change"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/CTableDefine.d.ts

@@ -54,6 +54,11 @@ export interface CTableColumnDefine {
     dataNameList?: string[];
     text: string;
     defaultText?: string;
+    sortConfig?: {
+        sortable?: boolean;
+        key?: string | string[];
+        direction?: 'asc' | 'desc';
+    } | undefined;
     width?: string;
     align?: 'left' | 'center' | 'right';
     dataAlign?: 'left' | 'center' | 'right';
@@ -75,6 +80,11 @@ export declare class CTableColumn implements CTableColumnDefine {
     dataNameList?: string[];
     text: string;
     defaultText?: string;
+    sortConfig?: {
+        sortable?: boolean;
+        key?: string | string[];
+        direction?: 'asc' | 'desc';
+    };
     width?: string;
     align?: 'left' | 'center' | 'right';
     dataAlign?: 'left' | 'center' | 'right';
@@ -123,3 +133,69 @@ export declare class CTableColumn implements CTableColumnDefine {
      */
     private buildActionButtonMeta;
 }
+/**
+ * 分頁樣式配置介面
+ */
+export interface PaginationStyleConfig {
+    backgroundColor: string;
+    textColor: string;
+    borderColor: string;
+    hoverBackgroundColor: string;
+    hoverTextColor: string;
+    hoverBorderColor: string;
+    activeBackgroundColor: string;
+    activeTextColor: string;
+    activeBorderColor: string;
+    previousIcon: string;
+    nextIcon: string;
+    firstIcon: string;
+    lastIcon: string;
+    ellipsisIcon: string;
+}
+export interface TableStyleConfig {
+    sortIconNone?: string;
+    sortIconAsc?: string;
+    sortIconDesc?: string;
+    scrollbarThumbColor?: string;
+    scrollbarTrackColor?: string;
+    scrollbarThumbHoverColor?: string;
+    scrollbarHeight?: string;
+}
+/**
+ * CTableConfig 類別用於配置表格的全域設定 包含以下
+ * - 分頁樣式設定
+ * - 每頁顯示選項
+ */
+export declare class CTableConfig {
+    private static tableStyleConfig;
+    static getTableStyleConfig(): TableStyleConfig;
+    static setTableStyleConfig(config: Partial<TableStyleConfig>): void;
+    private static defaultPaginationStyle;
+    private static currentPaginationStyle;
+    /**
+     * 設定全域分頁樣式
+     * @param config 分頁樣式配置
+     */
+    static setPaginationStyle(config: Partial<PaginationStyleConfig>): void;
+    /**
+     * 取得當前分頁樣式
+     */
+    static getPaginationStyle(): PaginationStyleConfig;
+    /**
+     * 重置分頁樣式為預設值
+     */
+    static resetPaginationStyle(): void;
+    /**
+     * 產生分頁樣式的 CSS 變數物件
+     */
+    static getPaginationStyleVars(): Record<string, string>;
+    /**
+     * 產生表格樣式的 CSS 變數物件
+     */
+    static getTableStyleVars(): Record<string, string>;
+    /**
+     * 預設每頁顯示選項
+     */
+    static pageSizeOptions: number[];
+}
+export declare const __CTableDefine__: CTableColumnType & CTableColumnActionType & CTableColumnActionParam & CTableColumnActionMeta & CTableColumnDefine & PaginationStyleConfig;

package/dist/components/CTableTD.vue.d.ts

@@ -0,0 +1,7 @@
+import { CTableColumn } from '../components/CTableDefine';
+export interface CTableTDProps {
+    columnItem: CTableColumn;
+    dataItem: Record<string, any>;
+}
+declare const _default: import('vue').DefineComponent<CTableTDProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CTableTDProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/form/CChangePasswordFormField.vue.d.ts

@@ -0,0 +1,14 @@
+import { PasswordDataModel } from '../../model/PasswordDataModel';
+import { ApiResponse } from '../../api/ApiService';
+import { IBSFieldStyleConfig } from '../../model/BSFieldStyleConfig';
+type __VLS_Props = {
+    userUid: string;
+    requireOldPassword?: boolean;
+    dataModelConstructor?: new () => PasswordDataModel;
+    callApi: (dataModel: PasswordDataModel) => Promise<ApiResponse>;
+    styleConfig?: IBSFieldStyleConfig;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    requireOldPassword: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/form/CCheckBoxFormField.vue.d.ts

@@ -0,0 +1,30 @@
+import { COptionItem } from '../../model/FormOptions';
+import { IBSFieldStyleConfig } from '../../model/BSFieldStyleConfig';
+type __VLS_Props = {
+    /**
+     * Radio 欄位的標籤文字
+     */
+    label?: string;
+    /**
+     * Radio 欄位是否為必填
+     */
+    required?: boolean;
+    /**
+     * Radio 欄位的名稱，為 form field 的 name 屬性
+     */
+    name: string;
+    /**
+     * Radio 選項集
+     */
+    optionList: COptionItem[];
+    /**
+     * 是否為閱讀模式，若為 true 則只顯示選項文字，不顯示 Radio 按鈕
+     */
+    readMode?: boolean;
+    /**
+     * BS 欄位樣式設定
+     */
+    styleConfig?: IBSFieldStyleConfig;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/form/CDateFormField.vue.d.ts

@@ -0,0 +1,17 @@
+import { IBSFieldStyleConfig } from '../../model/BSFieldStyleConfig';
+type __VLS_Props = {
+    id?: string;
+    label?: string;
+    name: string;
+    required?: boolean;
+    placeholder?: string;
+    readMode?: boolean;
+    timeType?: 'startOfDay' | 'endOfDay';
+    styleConfig?: IBSFieldStyleConfig;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    dateBtn: HTMLButtonElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/components/form/CDateQueryField.vue.d.ts

@@ -0,0 +1,16 @@
+import { IBSFieldStyleConfig } from '../../model/BSFieldStyleConfig';
+type __VLS_Props = {
+    id?: string;
+    label?: string;
+    model: any;
+    name: string;
+    placeholder?: string;
+    timeType?: 'startOfDay' | 'endOfDay';
+    styleConfig?: IBSFieldStyleConfig;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    dateBtn: HTMLButtonElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/components/form/CDateRangeFormField.vue.d.ts

@@ -0,0 +1,17 @@
+import { IBSFieldStyleConfig } from '../../model/BSFieldStyleConfig';
+type __VLS_Props = {
+    id?: string;
+    label?: string;
+    required?: boolean;
+    startDateFieldName?: string;
+    endDateFieldName?: string;
+    styleConfig?: IBSFieldStyleConfig;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+    startDateFieldName: string;
+    endDateFieldName: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    dateBtn: HTMLButtonElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/components/form/CFilePickerFormField.vue.d.ts

@@ -0,0 +1,28 @@
+import { CFileDataModel } from '../../model/CFileDataModel';
+import { IBSFieldStyleConfig } from '../../model/BSFieldStyleConfig';
+type __VLS_Props = {
+    id?: string;
+    label?: string;
+    name?: string;
+    dataModel?: any;
+    validationDataKey?: string;
+    placeholder?: string;
+    tip?: string;
+    accept?: string;
+    required?: boolean;
+    multiple?: boolean;
+    fileCountLimit?: number;
+    fileSizeLimit?: number;
+    styleConfig?: IBSFieldStyleConfig;
+};
+declare function addSavedFiles(files: CFileDataModel[]): void;
+declare const _default: import('vue').DefineComponent<__VLS_Props, {
+    addSavedFiles: typeof addSavedFiles;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+    placeholder: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    fileInputRef: HTMLInputElement;
+    textInputRef: HTMLInputElement;
+}, any>;
+export default _default;