@wot-ui/ui 1.0.0 → 2.0.0-alpha.4

package/composables/useUpload.ts

@@ -0,0 +1,366 @@
+import { isArray, isDef, isFunction } from '../common/util'
+import type { ChooseFile, ChooseFileOption, UploadFileItem, UploadMethod, UploadStatusType, UploadSuccessStatus } from '../components/wd-upload/types'
+
+export const UPLOAD_STATUS: Record<string, UploadStatusType> = {
+  PENDING: 'pending',
+  LOADING: 'loading',
+  SUCCESS: 'success',
+  FAIL: 'fail'
+}
+
+export interface UseUploadReturn {
+  // 开始上传文件
+  startUpload: (file: UploadFileItem, options: UseUploadOptions) => UniApp.UploadTask | void | Promise<void>
+  // 中断上传
+  abort: (task?: UniApp.UploadTask) => void
+  // 上传状态常量
+  UPLOAD_STATUS: Record<string, UploadStatusType>
+  // 选择文件
+  chooseFile: (options: ChooseFileOption) => Promise<ChooseFile[]>
+}
+
+export interface UseUploadOptions {
+  // 上传地址
+  action: string
+  // 请求头
+  header?: Record<string, any>
+  // 文件对应的 key
+  name?: string
+  // 其它表单数据
+  formData?: Record<string, any>
+  // 文件类型 仅支付宝支持且在支付宝平台必填
+  fileType?: 'image' | 'video' | 'audio'
+  // 成功状态码
+  statusCode?: UploadSuccessStatus
+  // 文件状态的key
+  statusKey?: string
+  // 自定义上传方法
+  uploadMethod?: UploadMethod
+  // 上传成功回调
+  onSuccess?: (res: UniApp.UploadFileSuccessCallbackResult, file: UploadFileItem, formData: Record<string, any>) => void
+  // 上传失败回调
+  onError?: (res: UniApp.GeneralCallbackResult, file: UploadFileItem, formData: Record<string, any>) => void
+  // 上传进度回调
+  onProgress?: (res: UniApp.OnProgressUpdateResult, file: UploadFileItem) => void
+  // 是否自动中断之前的上传任务
+  abortPrevious?: boolean
+  // 根据文件拓展名过滤(H5支持全部类型过滤,微信小程序支持all和file时过滤,其余平台不支持)
+  extension?: string[]
+}
+
+export function useUpload(): UseUploadReturn {
+  let currentTask: UniApp.UploadTask | null = null
+
+  // 中断上传
+  const abort = (task?: UniApp.UploadTask) => {
+    if (task) {
+      task.abort()
+    } else if (currentTask) {
+      currentTask.abort()
+      currentTask = null
+    }
+  }
+
+  /**
+   * 默认上传方法
+   */
+  const defaultUpload: UploadMethod = (file, formData, options) => {
+    // 如果配置了自动中断,则中断之前的上传任务
+    if (options.abortPrevious) {
+      abort()
+    }
+
+    const uploadTask = uni.uploadFile({
+      url: options.action,
+      header: options.header,
+      name: options.name,
+      fileName: options.name,
+      fileType: options.fileType,
+      formData,
+      filePath: file.url,
+      success(res) {
+        const successStatus = options.statusCode
+        const isSuccess = isArray(successStatus) ? successStatus.includes(res.statusCode) : res.statusCode === successStatus
+        if (isSuccess) {
+          // 上传成功
+          options.onSuccess(res, file, formData)
+        } else {
+          // 上传失败
+          options.onError({ ...res, errMsg: res.errMsg || '' }, file, formData)
+        }
+      },
+      fail(err) {
+        // 上传失败
+        options.onError(err, file, formData)
+      }
+    })
+
+    currentTask = uploadTask
+
+    // 获取当前文件加载的百分比
+    uploadTask.onProgressUpdate((res) => {
+      options.onProgress(res, file)
+    })
+
+    // 返回上传任务实例,让外部可以控制上传过程
+    return uploadTask
+  }
+
+  /**
+   * 开始上传文件
+   */
+  const startUpload = (file: UploadFileItem, options: UseUploadOptions) => {
+    const {
+      uploadMethod,
+      formData = {},
+      action,
+      name = 'file',
+      header = {},
+      fileType = 'image',
+      statusCode = 200,
+      statusKey = 'status',
+      abortPrevious = false
+    } = options
+
+    // 设置上传中状态
+    file[statusKey] = UPLOAD_STATUS.LOADING
+
+    const uploadOptions = {
+      action,
+      header,
+      name,
+      fileName: name,
+      fileType,
+      statusCode,
+      abortPrevious,
+      onSuccess: (res: UniApp.UploadFileSuccessCallbackResult, file: UploadFileItem, formData: Record<string, any>) => {
+        // 更新文件状态
+        file[statusKey] = UPLOAD_STATUS.SUCCESS
+        currentTask = null
+        options.onSuccess?.(res, file, formData)
+      },
+      onError: (error: UniApp.GeneralCallbackResult, file: UploadFileItem, formData: Record<string, any>) => {
+        // 更新文件状态和错误信息
+        file[statusKey] = UPLOAD_STATUS.FAIL
+        file.error = error.errMsg
+        currentTask = null
+        options.onError?.(error, file, formData)
+      },
+      onProgress: (res: UniApp.OnProgressUpdateResult, file: UploadFileItem) => {
+        // 更新上传进度
+        file.percent = res.progress
+        options.onProgress?.(res, file)
+      }
+    }
+
+    // 返回上传任务实例,支持外部获取uploadTask进行操作
+    if (isFunction(uploadMethod)) {
+      return uploadMethod(file, formData, uploadOptions)
+    } else {
+      return defaultUpload(file, formData, uploadOptions)
+    }
+  }
+
+  /**
+   * 格式化图片信息
+   */
+  function formatImage(res: UniApp.ChooseImageSuccessCallbackResult): ChooseFile[] {
+    // #ifdef MP-DINGTALK
+    // 钉钉文件在files中
+    res.tempFiles = isDef((res as any).files) ? (res as any).files : res.tempFiles
+    // #endif
+    if (isArray(res.tempFiles)) {
+      return res.tempFiles.map((item: any) => ({
+        path: item.path || '',
+        name: item.name || '',
+        size: item.size,
+        type: 'image',
+        thumb: item.path || ''
+      }))
+    }
+    return [
+      {
+        path: (res.tempFiles as any).path || '',
+        name: (res.tempFiles as any).name || '',
+        size: (res.tempFiles as any).size,
+        type: 'image',
+        thumb: (res.tempFiles as any).path || ''
+      }
+    ]
+  }
+
+  /**
+   * 格式化视频信息
+   */
+  function formatVideo(res: UniApp.ChooseVideoSuccess): ChooseFile[] {
+    return [
+      {
+        path: res.tempFilePath || (res as any).filePath || '',
+        name: res.name || '',
+        size: res.size,
+        type: 'video',
+        thumb: (res as any).thumbTempFilePath || '',
+        duration: res.duration
+      }
+    ]
+  }
+
+  /**
+   * 格式化媒体信息
+   */
+  function formatMedia(res: UniApp.ChooseMediaSuccessCallbackResult): ChooseFile[] {
+    return res.tempFiles.map((item) => ({
+      type: item.fileType,
+      path: item.tempFilePath,
+      thumb: item.fileType === 'video' ? item.thumbTempFilePath : item.tempFilePath,
+      size: item.size,
+      duration: item.duration
+    }))
+  }
+
+  /**
+   * 选择文件
+   */
+  function chooseFile({
+    multiple,
+    sizeType,
+    sourceType,
+    maxCount,
+    accept,
+    compressed,
+    maxDuration,
+    camera,
+    extension
+  }: ChooseFileOption): Promise<ChooseFile[]> {
+    return new Promise((resolve, reject) => {
+      switch (accept) {
+        case 'image':
+          // #ifdef MP-WEIXIN
+          uni.chooseMedia({
+            count: multiple ? maxCount : 1,
+            mediaType: ['image'],
+            sourceType,
+            sizeType,
+            camera,
+            success: (res) => resolve(formatMedia(res)),
+            fail: reject
+          })
+          // #endif
+          // #ifndef MP-WEIXIN
+          uni.chooseImage({
+            count: multiple ? maxCount : 1,
+            sizeType,
+            sourceType,
+            // #ifdef H5
+            extension,
+            // #endif
+            success: (res) => resolve(formatImage(res)),
+            fail: reject
+          })
+          // #endif
+          break
+        case 'video':
+          // #ifdef MP-WEIXIN
+          uni.chooseMedia({
+            count: multiple ? maxCount : 1,
+            mediaType: ['video'],
+            sourceType,
+            camera,
+            maxDuration,
+            success: (res) => resolve(formatMedia(res)),
+            fail: reject
+          })
+          // #endif
+          // #ifndef MP-WEIXIN
+          uni.chooseVideo({
+            sourceType,
+            compressed,
+            maxDuration,
+            camera,
+            // #ifdef H5
+            extension,
+            // #endif
+            success: (res) => resolve(formatVideo(res)),
+            fail: reject
+          })
+          // #endif
+          break
+        // #ifdef MP-WEIXIN
+        case 'media':
+          uni.chooseMedia({
+            count: multiple ? maxCount : 1,
+            sourceType,
+            sizeType,
+            camera,
+            maxDuration,
+            success: (res) => resolve(formatMedia(res)),
+            fail: reject
+          })
+          break
+        case 'file':
+          uni.chooseMessageFile({
+            count: multiple ? (isDef(maxCount) ? maxCount : 100) : 1,
+            type: accept,
+            extension,
+            success: (res) => resolve(res.tempFiles),
+            fail: reject
+          })
+          break
+        // #endif
+        case 'all':
+          // #ifdef H5
+          uni.chooseFile({
+            count: multiple ? maxCount : 1,
+            type: accept,
+            extension,
+            success: (res) => resolve(res.tempFiles as ChooseFile[]),
+            fail: reject
+          })
+          // #endif
+          // #ifdef MP-WEIXIN
+          uni.chooseMessageFile({
+            count: multiple ? Number(maxCount) : 1,
+            type: accept,
+            extension,
+            success: (res) => resolve(res.tempFiles),
+            fail: reject
+          })
+          // #endif
+
+          break
+        default:
+          // #ifdef MP-WEIXIN
+          uni.chooseMedia({
+            count: multiple ? maxCount : 1,
+            mediaType: ['image'],
+            sourceType,
+            sizeType,
+            camera,
+            success: (res) => resolve(formatMedia(res)),
+            fail: reject
+          })
+          // #endif
+          // #ifndef MP-WEIXIN
+          uni.chooseImage({
+            count: multiple ? maxCount : 1,
+            sizeType,
+            sourceType,
+            // #ifdef H5
+            extension,
+            // #endif
+            success: (res) => resolve(formatImage(res)),
+            fail: reject
+          })
+          // #endif
+          break
+      }
+    })
+  }
+
+  return {
+    startUpload,
+    abort,
+    UPLOAD_STATUS,
+    chooseFile
+  }
+}

package/global.d.ts

@@ -0,0 +1,106 @@
+declare module 'vue' {
+  // Helper for Volar
+  export interface GlobalComponents {
+    WdActionSheet: typeof import('./components/wd-action-sheet/wd-action-sheet.vue')['default']
+    WdBadge: typeof import('./components/wd-badge/wd-badge.vue')['default']
+    WdButton: typeof import('./components/wd-button/wd-button.vue')['default']
+    WdCalendar: typeof import('./components/wd-calendar/wd-calendar.vue')['default']
+    WdCalendarView: typeof import('./components/wd-calendar-view/wd-calendar-view.vue')['default']
+    WdCard: typeof import('./components/wd-card/wd-card.vue')['default']
+    WdCell: typeof import('./components/wd-cell/wd-cell.vue')['default']
+    WdCellGroup: typeof import('./components/wd-cell-group/wd-cell-group.vue')['default']
+    WdCheckbox: typeof import('./components/wd-checkbox/wd-checkbox.vue')['default']
+    WdCheckboxGroup: typeof import('./components/wd-checkbox-group/wd-checkbox-group.vue')['default']
+    WdCol: typeof import('./components/wd-col/wd-col.vue')['default']
+    WdCascader: typeof import('./components/wd-cascader/wd-cascader.vue')['default']
+    WdCollapse: typeof import('./components/wd-collapse/wd-collapse.vue')['default']
+    WdCollapseItem: typeof import('./components/wd-collapse-item/wd-collapse-item.vue')['default']
+    WdConfigProvider: typeof import('./components/wd-config-provider/wd-config-provider.vue')['default']
+    WdCurtain: typeof import('./components/wd-curtain/wd-curtain.vue')['default']
+    WdDatetimePicker: typeof import('./components/wd-datetime-picker/wd-datetime-picker.vue')['default']
+    WdDatetimePickerView: typeof import('./components/wd-datetime-picker-view/wd-datetime-picker-view.vue')['default']
+    WdDivider: typeof import('./components/wd-divider/wd-divider.vue')['default']
+    WdDropMenu: typeof import('./components/wd-drop-menu/wd-drop-menu.vue')['default']
+    WdDropMenuItem: typeof import('./components/wd-drop-menu-item/wd-drop-menu-item.vue')['default']
+    WdGrid: typeof import('./components/wd-grid/wd-grid.vue')['default']
+    WdGridItem: typeof import('./components/wd-grid-item/wd-grid-item.vue')['default']
+    WdIcon: typeof import('./components/wd-icon/wd-icon.vue')['default']
+    WdImg: typeof import('./components/wd-img/wd-img.vue')['default']
+    WdImgCropper: typeof import('./components/wd-img-cropper/wd-img-cropper.vue')['default']
+    WdInput: typeof import('./components/wd-input/wd-input.vue')['default']
+    WdInputNumber: typeof import('./components/wd-input-number/wd-input-number.vue')['default']
+    WdLoading: typeof import('./components/wd-loading/wd-loading.vue')['default']
+    WdLoadmore: typeof import('./components/wd-loadmore/wd-loadmore.vue')['default']
+    WdDialog: typeof import('./components/wd-dialog/wd-dialog.vue')['default']
+    WdOverlay: typeof import('./components/wd-overlay/wd-overlay.vue')['default']
+    WdNoticeBar: typeof import('./components/wd-notice-bar/wd-notice-bar.vue')['default']
+    WdPagination: typeof import('./components/wd-pagination/wd-pagination.vue')['default']
+    WdPicker: typeof import('./components/wd-picker/wd-picker.vue')['default']
+    WdPickerView: typeof import('./components/wd-picker-view/wd-picker-view.vue')['default']
+    WdPopover: typeof import('./components/wd-popover/wd-popover.vue')['default']
+    WdPopup: typeof import('./components/wd-popup/wd-popup.vue')['default']
+    WdProgress: typeof import('./components/wd-progress/wd-progress.vue')['default']
+    WdRadio: typeof import('./components/wd-radio/wd-radio.vue')['default']
+    WdRadioGroup: typeof import('./components/wd-radio-group/wd-radio-group.vue')['default']
+    WdRate: typeof import('./components/wd-rate/wd-rate.vue')['default']
+    WdResize: typeof import('./components/wd-resize/wd-resize.vue')['default']
+    WdRow: typeof import('./components/wd-row/wd-row.vue')['default']
+    WdSearch: typeof import('./components/wd-search/wd-search.vue')['default']
+    WdSelectPicker: typeof import('./components/wd-select-picker/wd-select-picker.vue')['default']
+    WdSlider: typeof import('./components/wd-slider/wd-slider.vue')['default']
+    WdSortButton: typeof import('./components/wd-sort-button/wd-sort-button.vue')['default']
+    WdEmpty: typeof import('./components/wd-empty/wd-empty.vue')['default']
+    WdStep: typeof import('./components/wd-step/wd-step.vue')['default']
+    WdSteps: typeof import('./components/wd-steps/wd-steps.vue')['default']
+    WdSticky: typeof import('./components/wd-sticky/wd-sticky.vue')['default']
+    WdStickyBox: typeof import('./components/wd-sticky-box/wd-sticky-box.vue')['default']
+    WdSwipeAction: typeof import('./components/wd-swipe-action/wd-swipe-action.vue')['default']
+    WdSwitch: typeof import('./components/wd-switch/wd-switch.vue')['default']
+    WdTab: typeof import('./components/wd-tab/wd-tab.vue')['default']
+    WdTabs: typeof import('./components/wd-tabs/wd-tabs.vue')['default']
+    WdTag: typeof import('./components/wd-tag/wd-tag.vue')['default']
+    WdToast: typeof import('./components/wd-toast/wd-toast.vue')['default']
+    WdTooltip: typeof import('./components/wd-tooltip/wd-tooltip.vue')['default']
+    WdTransition: typeof import('./components/wd-transition/wd-transition.vue')['default']
+    WdUpload: typeof import('./components/wd-upload/wd-upload.vue')['default']
+    WdNotify: typeof import('./components/wd-notify/wd-notify.vue')['default']
+    WdWatermark: typeof import('./components/wd-watermark/wd-watermark.vue')['default']
+    WdCircle: typeof import('./components/wd-circle/wd-circle.vue')['default']
+    WdSwiper: typeof import('./components/wd-swiper/wd-swiper.vue')['default']
+    WdSwiperNav: typeof import('./components/wd-swiper-nav/wd-swiper-nav.vue')['default']
+    WdSegmented: typeof import('./components/wd-segmented/wd-segmented.vue')['default']
+    WdTabbar: typeof import('./components/wd-tabbar/wd-tabbar.vue')['default']
+    WdTabbarItem: typeof import('./components/wd-tabbar-item/wd-tabbar-item.vue')['default']
+    WdNavbar: typeof import('./components/wd-navbar/wd-navbar.vue')['default']
+    WdNavbarCapsule: typeof import('./components/wd-navbar-capsule/wd-navbar-capsule.vue')['default']
+    WdTable: typeof import('./components/wd-table/wd-table.vue')['default']
+    WdTableColumn: typeof import('./components/wd-table-column/wd-table-column.vue')['default']
+    WdSidebar: typeof import('./components/wd-sidebar/wd-sidebar.vue')['default']
+    WdSidebarItem: typeof import('./components/wd-sidebar-item/wd-sidebar-item.vue')['default']
+    WdFab: typeof import('./components/wd-fab/wd-fab.vue')['default']
+    WdCountDown: typeof import('./components/wd-count-down/wd-count-down.vue')['default']
+    WdKeyboard: typeof import('./components/wd-keyboard/wd-keyboard.vue')['default']
+    WdGap: typeof import('./components/wd-gap/wd-gap.vue')['default']
+    WdPasswordInput: typeof import('./components/wd-password-input/wd-password-input.vue')['default']
+    WdForm: typeof import('./components/wd-form/wd-form.vue')['default']
+    WdFormItem: typeof import('./components/wd-form-item/wd-form-item.vue')['default']
+    WdTextarea: typeof import('./components/wd-textarea/wd-textarea.vue')['default']
+    WdVideoPreview: typeof import('./components/wd-video-preview/wd-video-preview.vue')['default']
+    WdBacktop: typeof import('./components/wd-backtop/wd-backtop.vue')['default']
+    WdSkeleton: typeof import('./components/wd-skeleton/wd-skeleton.vue')['default']
+    WdIndexBar: typeof import('./components/wd-index-bar/wd-index-bar.vue')['default']
+    WdIndexAnchor: typeof import('./components/wd-index-anchor/wd-index-anchor.vue')['default']
+    WdText: typeof import('./components/wd-text/wd-text.vue')['default']
+    WdCountTo: typeof import('./components/wd-count-to/wd-count-to.vue')['default']
+    WdFloatingPanel: typeof import('./components/wd-floating-panel/wd-floating-panel.vue')['default']
+    WdSignature: typeof import('./components/wd-signature/wd-signature.vue')['default']
+    WdRootPortal: typeof import('./components/wd-root-portal/wd-root-portal.vue')['default']
+    WdTour: typeof import('./components/wd-tour/wd-tour.vue')['default']
+    WdAvatar: typeof import('./components/wd-avatar/wd-avatar.vue')['default']
+    WdAvatarGroup: typeof import('./components/wd-avatar-group/wd-avatar-group.vue')['default']
+    WdImagePreview: typeof import('./components/wd-image-preview/wd-image-preview.vue')['default']
+    WdSlideVerify: typeof import('./components/wd-slide-verify/wd-slide-verify.vue')['default']
+  }
+}
+
+export {}

package/index.ts

@@ -0,0 +1,6 @@
+export * from './composables'
+export { zodAdapter } from './components/wd-form'
+export type { FormSchema, FormSchemaIssue, FormValidateEvent, FormValidateTrigger } from './components/wd-form'
+export * as CommonUtil from './common/util'
+export * from './locale'
+export type { ConfigProviderThemeVars } from './components/wd-config-provider/types'

package/locale/index.ts

@@ -0,0 +1,32 @@
+import { reactive, ref } from 'vue'
+import zhCN from './lang/zh-CN'
+import { deepAssign } from '../common/util'
+
+type Message = Record<string, any>
+type Messages = Record<string, Message>
+
+const lang = ref<string>('zh-CN')
+const messages = reactive<Messages>({
+  'zh-CN': zhCN
+})
+
+export const Locale = {
+  messages(): Message {
+    return messages[lang.value]
+  },
+
+  use(newLang: string, newMessage?: Message) {
+    lang.value = newLang
+    if (newMessage) {
+      this.add({ [newLang]: newMessage })
+    }
+  },
+
+  add(newMessages: Messages = {}) {
+    deepAssign(messages, newMessages)
+  }
+}
+
+export const useCurrentLang = () => lang
+
+export default Locale

package/locale/lang/ar-SA.ts

@@ -0,0 +1,150 @@
+export default {
+  calendar: {
+    placeholder: 'حدد التاريخ',
+    title: 'حدد التاريخ',
+    day: 'يوم',
+    week: 'أسبوع',
+    month: 'شهر',
+    confirm: 'تأكيد',
+    startTime: 'وقت البداية',
+    endTime: 'وقت النهاية',
+    to: 'إلى',
+    timeFormat: 'YY-MM-DD HH:mm:ss',
+    dateFormat: 'YYYY-MM-DD',
+    weekFormat: (year: number, week: number) => `${year} الأسبوع ${week}`,
+    startWeek: 'بداية الأسبوع',
+    endWeek: 'نهاية الأسبوع',
+    startMonth: 'بداية الشهر',
+    endMonth: 'نهاية الشهر',
+    monthFormat: 'YYYY-MM'
+  },
+  calendarView: {
+    startTime: 'وقت البداية',
+    endTime: 'وقت النهاية',
+    weeks: {
+      sun: 'الأحد',
+      mon: 'الاثنين',
+      tue: 'الثلاثاء',
+      wed: 'الأربعاء',
+      thu: 'الخميس',
+      fri: 'الجمعة',
+      sat: 'السبت'
+    },
+    rangePrompt: (maxRange: number) => `لا يمكن أن تزيد الأيام المحددة عن ${maxRange} يوم`,
+    rangePromptWeek: (maxRange: number) => `لا يمكن أن تزيد الأسابيع المحددة عن ${maxRange} أسبوع`,
+    rangePromptMonth: (maxRange: number) => `لا يمكن أن تزيد الشهور المحددة عن ${maxRange} شهر`,
+    monthTitle: 'YYYY-MM',
+    yearTitle: 'YYYY',
+    month: 'MM',
+    hour: (value: number) => `${value} ساعة`,
+    minute: (value: number) => `${value} دقيقة`,
+    second: (value: number) => `${value} ثانية`
+  },
+  datetimePicker: {
+    start: 'من',
+    end: 'إلى',
+    to: 'إلى',
+    placeholder: 'حدد التاريخ والوقت',
+    confirm: 'تأكيد',
+    cancel: 'إلغاء'
+  },
+  collapse: {
+    expand: 'توسيع',
+    retract: 'طي'
+  },
+  cascader: {
+    title: 'حدد لون',
+    placeholder: 'حدد لون',
+    select: 'حدد',
+    confirm: 'تأكيد'
+  },
+  loadmore: {
+    loading: 'جارٍ التحميل...',
+    finished: 'التحميل قد انتهى',
+    error: 'فشل التحميل...',
+    retry: 'إعادة المحاولة'
+  },
+  imgCropper: {
+    confirm: 'تأكيد',
+    cancel: 'إلغاء'
+  },
+  messageBox: {
+    inputPlaceholder: 'الرجاء إدخال المعلومات',
+    confirm: 'تأكيد',
+    cancel: 'إلغاء',
+    inputNoValidate: 'الرجاء التأكد من إدخال المعلومات الصحيحة'
+  },
+  dialog: {
+    inputPlaceholder: 'الرجاء إدخال المعلومات',
+    confirm: 'تأكيد',
+    cancel: 'إلغاء',
+    inputNoValidate: 'الرجاء التأكد من إدخال المعلومات الصحيحة'
+  },
+  numberKeyboard: {
+    confirm: 'إنهاء'
+  },
+  pagination: {
+    prev: 'السابق',
+    next: 'التالي',
+    page: (value: number) => `صفحة: ${value}`,
+    total: (total: number) => `المجموع: ${total}`,
+    size: (size: number) => `${size} / صفحة`
+  },
+  picker: {
+    cancel: 'إلغاء',
+    done: 'إنهاء',
+    placeholder: 'حدد'
+  },
+  search: {
+    search: 'بحث',
+    cancel: 'إلغاء'
+  },
+  steps: {
+    wait: 'لم يبدأ',
+    finished: 'تم',
+    process: 'جاري',
+    failed: 'فشل'
+  },
+  tabs: {
+    all: 'الجميع'
+  },
+  upload: {
+    error: 'فشل التحميل'
+  },
+  input: {
+    placeholder: 'الرجاء إدخال المعلومات...'
+  },
+  selectPicker: {
+    title: 'حدد',
+    placeholder: 'حدد',
+    select: 'حدد',
+    confirm: 'تأكيد',
+    filterPlaceholder: 'بحث'
+  },
+  tag: {
+    placeholder: 'إدخال',
+    add: 'إضافة وسم'
+  },
+  textarea: {
+    placeholder: 'الرجاء إدخال نص متعدد الأسطر هنا...'
+  },
+  tableCol: {
+    indexLabel: 'فهرس'
+  },
+  tour: {
+    prev: 'السابق',
+    next: 'التالي',
+    finish: 'إنهاء',
+    skip: 'تخطي'
+  },
+  signature: {
+    confirmText: 'تأكيد',
+    clearText: 'مسح',
+    revokeText: 'تراجع',
+    restoreText: 'استعادة'
+  },
+  slideVerify: {
+    text: 'اسحب لليمين للتحقق',
+    successText: 'تم التحقق بنجاح'
+  }
+}