UNPKG

ng-devui

Version:

DevUI components based on Angular

836 lines (826 loc) 27 kB
import * as i0 from '@angular/core'; import { InjectionToken, Injectable, Optional, Inject, Pipe, NgModule } from '@angular/core'; import { Subject, ReplaySubject } from 'rxjs'; import { getLocaleId, formatDate } from '@angular/common'; const monthsOfYear = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', ]; var enUS = { locale: 'en-us', common: { searchPlaceholder: 'Enter a keyword.', noData: 'No data available.', noRecordsFound: 'No records found.', btnConfirm: 'Confirm', loading: 'Loading...', checkAll: 'All', btnOk: 'OK', btnCancel: 'Cancel', btnClose: 'Close', reset: 'Reset', btnClickMe: 'click me!', copied: 'Copied', }, autoComplete: { latestInput: 'Latest input', }, datatable: { tableSetting: 'Table Setting', ensure: 'Ensure', cancel: 'Cancel', compact: 'Compact', standard: 'Standard', loose: 'Loose', divideLine: 'Divide Line', striped: 'Striped', tableShadow: 'Table Shadow', styles: 'Table Style', colSelected: 'Selected', colCanSelect: 'Selectable', }, datePicker: { today: 'Today', clear: 'Clear', daysOfWeek: ['Sun', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat'], monthsOfYear: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', ], startDate: 'Start Date', endDate: 'End Date', yearDisplay(year) { return `${year}`; }, }, datePickerPro: { placeholder: 'select date', startPlaceholder: 'select start date', endPlaceholder: 'select end date', daysOfWeek: ['Sun', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat'], monthsOfYear: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', ], getYearMonthStr(year, month) { return `${monthsOfYear[month - 1]} ${year}`; }, hour: 'Hr', min: 'Min', second: 'Sec', yearDisplay(year) { return `${year}`; }, }, form: { required(val) { return 'The value cannot be empty.'; }, minlength(len) { return `The length cannot be less than ${len}.`; }, maxlength(len) { return `The length cannot be greater than ${len}.`; }, min(val) { return `The value cannot be less than ${val}.`; }, max(val) { return `The value cannot be greater than ${val}.`; }, requiredTrue(val) { return 'The value needs to be true.'; }, email(val) { return 'Email format verification failed.'; }, whitespace(val) { return 'The value cannot only has whitespace.'; }, }, gantt: { today: 'Today', day: 'Day', week: 'Week', month: 'Month', milestone: 'milestone', monthsOfYear: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec', ], yearDisplay(year) { return `${year}`; }, monthDisplay(strMonthIndex) { return this.monthsOfYear[Number(strMonthIndex) - 1]; }, yearAndMonthDisplay(year, strMonthIndex) { return this.monthDisplay(strMonthIndex) + ' ' + this.yearDisplay(year); }, }, pagination: { goTo: 'Go To', pageSize: 'Page Size', page: 'Page', perPage: ' / Page', totalItem(total) { return `Total Records: ${total}`; } }, quadrant: { xAxisLabel: 'Urgency', yAxisLabel: 'Importance', defaultTitleConf: [ { title: 'Important and urgent' }, { title: 'Important not urgent' }, { title: 'Not important not urgent' }, { title: 'Not important urgent' }, ], }, upload: { warning: 'Warning', upload: 'Upload', chooseFile: '--select--', chooseFiles: '--select--', preload: 'Selected', uploading: 'Uploading...', uploaded: 'Upload successful', uploadFailed: 'Upload failed', uploadSuccess: 'Upload Successful', delete: 'Delete', reUpload: 'reupload', cancelUpload: 'Upload cancel', getNotAllowedFileTypeMsg(filename, scope) { return `Files with unsupported types: ${filename}. Supported file types: ${scope}`; }, getBeyondMaximalFileSizeMsg(filename, maximalSize) { return `Maximum file size (MB): ${maximalSize}. Files whose size exceeds the maximum value: ${filename}`; }, getBeyondMaximumFileCountMsg(maximalSize) { return `Maximum file count: ${maximalSize}. Files exceeds the maximum value`; }, getAllFilesBeyondMaximalFileSizeMsg(maximalSize) { return `Maximum file size (MB): ${maximalSize}. The selected files exceed the maximum value`; }, getExistSameNameFilesMsg(sameNames) { return `Duplicate files exist : "${sameNames}"`; }, getSelectedFilesCount(filesCount) { return `${filesCount} files added`; }, getUploadingFilesCount(uploadingCount, filesCount) { return `${uploadingCount}/${filesCount} is uploading`; }, getFailedFilesCount(failedCount) { return `${failedCount} files upload failed`; }, }, modal: { warning: 'Warning', error: 'Error', fail: 'Fail', info: 'Information', success: 'Success', }, imagePreview: { rotate: 'Rotate', zoomIn: 'Zoom In', zoomOut: 'Zoom Out', bestScale: 'Best Ratio', originScale: 'Original Ratio', pre: 'Previous', next: 'Next', origin: 'View the original image', download: 'Download' }, colorPicker: { recentlyUsed: 'Recently Used', basicColors: 'Basic Colors', moreColors: 'More Colors', }, stepsGuide: { previous: 'Previous', next: 'Continue', finish: 'OK', }, splitter: { collapse: 'Collapse', expand: 'Expand', }, relativeTime: { yearsAgo(num) { return num === 1 ? 'last year' : `${num} years ago`; }, monthsAgo(num) { return num === 1 ? 'last month' : `${num} months ago`; }, weeksAgo(num) { return num === 1 ? 'last week' : `${num} weeks ago`; }, daysAgo(num) { return num === 1 ? 'yesterday' : `${num} days ago`; }, daysLater(num) { return num === 1 ? 'tomorrow' : `${num} days later`; }, weeksLater(num) { return num === 1 ? 'next week' : `${num} weeks later`; }, monthsLater(num) { return num === 1 ? 'next month' : `${num} months later`; }, yearsLater(num) { return num === 1 ? 'next year' : `${num} years later`; }, hoursAgo(num) { return num === 1 ? `1 hour ago` : `${num} hours ago`; }, minutesAgo(num) { return num === 1 ? `1 minute ago` : `${num} minutes ago`; }, minutesLater(num) { return num === 1 ? `1 minute later` : `${num} minutes later`; }, hoursLater(num) { return num === 1 ? `1 hours later` : `${num} hours later`; }, justnow: 'just now', later: 'later', }, tagsInput: { tagsReachMaxLength: 'The length of tags has reached maxTags', tagsReachMaxNumber: 'Maximum number reached: ', create: 'Create' }, categorySearch: { confirm: 'Confirm', cancel: 'Cancel', selectFilterCondition: 'Please select a filter condition:', getFindingMessage(msg) { return `find in '${msg}'`; }, getSearchMessage(msg) { return `only search '${msg}'`; }, saveFilter: 'Save Filter', filterTitle: 'Filter Title', placeholder: 'Please enter...', searchPlaceholder: 'Click here to choose a filter condition', noFilterConditions: 'No filter conditions', clearFilterCondition: 'Clear Filter Condition', seeMore: 'See more', selected: 'Selected', switchToStart: 'Switch To Start', switchToEnd: 'Switch To End', keyword: 'Keyword', }, userGuide: { guide: 'Guide', prev: 'Prev', next: 'Next', finish: 'Finish', autoFill: 'Click here to auto-populate' } }; var zhCN = { locale: 'zh-cn', common: { searchPlaceholder: '请输入关键字', noData: '没有数据', noRecordsFound: '找不到相关记录', btnConfirm: '确定', loading: '加载中...', checkAll: '全选', btnOk: '确定', reset: '重置', btnCancel: '取消', btnClose: '关闭', btnClickMe: '点击我', copied: '复制成功', }, autoComplete: { latestInput: '最近输入', }, datatable: { tableSetting: '表格设置', ensure: '确认', cancel: '取消', compact: '紧凑', standard: '标准', loose: '宽松', divideLine: '行分割线', striped: '斑马纹填充', tableShadow: '表格阴影', styles: '外观', colSelected: '已选列', colCanSelect: '可选列', }, datePicker: { today: '今天', clear: '清除', daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], monthsOfYear: [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ], startDate: '开始日期', endDate: '结束日期', yearDisplay(year) { return `${year}年`; }, }, datePickerPro: { placeholder: '请选择日期', startPlaceholder: '请选择开始日期', endPlaceholder: '请选择结束日期', daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], monthsOfYear: [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ], getYearMonthStr(year, month) { return `${year}${month}月`; }, hour: '时', min: '分', second: '秒', yearDisplay(year) { return `${year}年`; }, }, form: { required(val) { return '值不能为空'; }, minlength(len) { return `长度不能小于${len}`; }, maxlength(len) { return `长度不能大于${len}`; }, min(val) { return `值不能小于${val}`; }, max(val) { return `值不能大于${val}`; }, requiredTrue(val) { return '值需要为真'; }, email(val) { return '邮箱格式校验不通过'; }, whitespace(val) { return '值不能全为空格'; }, }, gantt: { today: '今天', day: '天', week: '周', month: '月', milestone: '里程碑', monthsOfYear: [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ], yearDisplay(year) { return `${year}年`; }, monthDisplay(strMonthIndex) { return this.monthsOfYear[Number(strMonthIndex) - 1]; }, yearAndMonthDisplay(year, strMonthIndex) { return this.yearDisplay(year) + this.monthDisplay(strMonthIndex); }, }, pagination: { goTo: '跳至', pageSize: '每页条数', page: '页', perPage: '条/页', totalItem(total) { return `共 ${total} 条`; } }, quadrant: { xAxisLabel: '紧急度', yAxisLabel: '重要度', defaultTitleConf: [ { title: '重要紧急' }, { title: '重要不紧急' }, { title: '不重要不紧急' }, { title: '不重要紧急' } ], }, upload: { warning: '提醒', upload: '上传', chooseFile: '选择文件', chooseFiles: '选择多个文件', preload: '预加载', uploading: '上传中...', uploaded: '已上传', uploadFailed: '上传失败', uploadSuccess: '上传成功!', delete: '删除', reUpload: '重新上传', cancelUpload: '取消上传', getNotAllowedFileTypeMsg(filename, scope) { return `支持的文件类型: "${scope}", 您上传的文件"${filename}"不在允许范围内,请重新选择文件`; }, getBeyondMaximalFileSizeMsg(filename, maximalSize) { return `最大支持上传${maximalSize}MB的文件, 您上传的文件"${filename}"超过可上传文件大小`; }, getBeyondMaximumFileCountMsg(maximalSize) { return `最大支持上传${maximalSize}个文件, 您上传的文件数量超过最大限制`; }, getAllFilesBeyondMaximalFileSizeMsg(maximalSize) { return `最大支持上传${maximalSize}MB的文件, 您本次上传的所有文件超过可上传文件大小`; }, getExistSameNameFilesMsg(sameNames) { return `您上传的 "${sameNames}" 存在重名文件, 请重新选择文件`; }, getSelectedFilesCount(filesCount) { return `已添加${filesCount}个文件`; }, getUploadingFilesCount(uploadingCount, filesCount) { return `${uploadingCount}/${filesCount}正在上传`; }, getFailedFilesCount(failedCount) { return `${failedCount}个文件上传失败!`; }, }, modal: { warning: '提醒', error: '错误', fail: '失败', info: '提示', success: '成功', }, imagePreview: { rotate: '旋转', zoomIn: '放大', zoomOut: '缩小', bestScale: '最佳比例', originScale: '原始比例', pre: '上一张', next: '下一张', origin: '查看原图', download: '下载' }, colorPicker: { recentlyUsed: '最近使用', basicColors: '基本颜色', moreColors: '更多颜色', }, stepsGuide: { previous: '上一步', next: '我知道啦,继续', finish: '我知道啦', }, splitter: { collapse: '收起', expand: '展开', }, relativeTime: { yearsAgo(num) { return num === 1 ? '去年' : `${num}年前`; }, monthsAgo(num) { return num === 1 ? '上个月' : `${num}个月前`; }, weeksAgo(num) { return num === 1 ? '上周' : `${num}周前`; }, daysAgo(num) { return num === 1 ? '昨天' : `${num}天前`; }, daysLater(num) { return num === 1 ? '明天' : `${num}天后`; }, weeksLater(num) { return num === 1 ? '下周' : `${num}周后`; }, monthsLater(num) { return num === 1 ? '下个月' : `${num}个月后`; }, yearsLater(num) { return num === 1 ? '明年' : `${num}年后`; }, hoursAgo(num) { return `${num}小时前`; }, minutesAgo(num) { return `${num}分钟前`; }, minutesLater(num) { return `${num}分钟后`; }, hoursLater(num) { return `${num}小时后`; }, justnow: '刚刚', later: '稍后' }, tagsInput: { tagsReachMaxLength: '您输入的标签已达到最大长度限制', tagsReachMaxNumber: '已达到最大个数:', create: '生成' }, categorySearch: { confirm: '确定', cancel: '取消', selectFilterCondition: '请选择筛选条件:', getFindingMessage(msg) { return `在 '${msg}' 中查找`; }, getSearchMessage(type) { return `仅搜索关键字 '${type}'`; }, saveFilter: '保存过滤器', filterTitle: '过滤器标题', placeholder: '请输入...', searchPlaceholder: '点击此处添加筛选条件', noFilterConditions: '没有筛选条件', clearFilterCondition: '清空', seeMore: '查看全部过滤条件', selected: '已选择', switchToStart: '切换至开始时间', switchToEnd: '切换至结束时间', keyword: '关键字', }, userGuide: { guide: '指引', prev: '上一步', next: '下一步', finish: '完成', autoFill: '点击此处自动填充' } }; const ZH_CN = 'zh-cn'; const EN_US = 'en-us'; const DEVUI_LANG = new InjectionToken(ZH_CN); class I18nService { constructor(appLang) { this.appLang = appLang; this.i18nConfig = { 'zh-cn': zhCN, 'en-us': enUS }; this.LANG_KEY = 'lang'; this.subject = new Subject(); // 废弃 this.i18nSubject = new ReplaySubject(1); if (Object.prototype.hasOwnProperty.call(this.i18nConfig, this.appLang)) { this.DEFAULT_LANG = this.appLang; this.currentLang = this.appLang; } else { this.DEFAULT_LANG = 'zh-cn'; this.currentLang = 'zh-cn'; } this.i18nSubject.next(this.getI18nText()); } toggleLang(lang = this.DEFAULT_LANG) { try { localStorage.setItem('lang', lang); } catch (error) { console.error(error); } if (Object.prototype.hasOwnProperty.call(this.i18nConfig, lang)) { this.currentLang = lang; this.i18nSubject.next(this.getI18nText()); } } getI18nText() { const lang = localStorage.getItem(this.LANG_KEY) ? localStorage.getItem('lang') : this.DEFAULT_LANG; if (Object.prototype.hasOwnProperty.call(this.i18nConfig, lang)) { this.currentLang = lang; } return this.i18nConfig[this.currentLang]; } langChange() { return this.i18nSubject.asObservable(); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: I18nService, deps: [{ token: DEVUI_LANG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); } static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: I18nService, providedIn: 'root' }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: I18nService, decorators: [{ type: Injectable, args: [{ providedIn: 'root' }] }], ctorParameters: () => [{ type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DEVUI_LANG] }] }] }); class I18nUtil { static { this.supportLanguages = ['zh-cn', 'en-us']; } static getCurrentLanguage() { let lang = localStorage.getItem('lang'); if (I18nUtil.supportLanguages.indexOf(lang) < 0) { lang = I18nUtil.supportLanguages[0]; } return lang; } static getSupportLanguages() { return I18nUtil.supportLanguages; } } class I18nFormat { // 默认locale使用英文,因为angular默认只支持英文,其他的需要显示注册 static { this.DEFAULT_LOCALE = 'en-us'; } static { this.FULL_FORMAT_ZH = 'y-MM-dd HH:mm:ss zzzz'; } static { this.FULL_FORMAT_EN = 'MMM dd, y HH:mm:ss zzzz'; } static { this.FULL_FORMAT_RU = 'dd.MM.y HH:mm:ss zzzz'; } static { this.LONG_FORMAT_ZH = 'y-MM-dd HH:mm:ss'; } static { this.LONG_FORMAT_EN = 'MMM dd, y HH:mm:ss'; } static { this.LONG_FORMAT_RU = 'dd.MM.y HH:mm:ss'; } static { this.MEDIUM_FORMAT_ZH = 'y-MM-dd HH:mm'; } static { this.MEDIUM_FORMAT_EN = 'MMM dd, y HH:mm'; } static { this.MEDIUM_FORMAT_RU = 'dd.MM.y HH:mm'; } static { this.SHORT_FORMAT_ZH = 'y-MM-dd'; } static { this.SHORT_FORMAT_EN = 'MMM dd, y'; } static { this.SHORT_FORMAT_RU = 'dd.MM.y'; } static { this.ULTRA_SHORT_FORMAT_ZH = 'y-MM'; } static { this.ULTRA_SHORT_FORMAT_EN = 'MMM, y'; } static { this.ULTRA_SHORT_FORMAT_RU = 'MM.y'; } static { this.localFormat = { 'zh-cn': { full: I18nFormat.FULL_FORMAT_ZH, long: I18nFormat.LONG_FORMAT_ZH, medium: I18nFormat.MEDIUM_FORMAT_ZH, short: I18nFormat.SHORT_FORMAT_ZH, ultraShort: I18nFormat.ULTRA_SHORT_FORMAT_ZH, }, 'en-us': { full: I18nFormat.FULL_FORMAT_EN, long: I18nFormat.LONG_FORMAT_EN, medium: I18nFormat.MEDIUM_FORMAT_EN, short: I18nFormat.SHORT_FORMAT_EN, ultraShort: I18nFormat.ULTRA_SHORT_FORMAT_EN, }, 'ru-ru': { full: I18nFormat.FULL_FORMAT_RU, long: I18nFormat.LONG_FORMAT_RU, medium: I18nFormat.MEDIUM_FORMAT_RU, short: I18nFormat.SHORT_FORMAT_RU, ultraShort: I18nFormat.ULTRA_SHORT_FORMAT_RU, }, }; } // 通过get方法来做业务没有指定locale的时候fallback static getLocaleAndLang(locale) { const currentLanguage = I18nUtil.getCurrentLanguage(); let localeId; try { // 通过get方法来判断是否存在locale getLocaleId(locale); localeId = (locale || I18nFormat.DEFAULT_LOCALE).toLocaleLowerCase(); } catch (error) { localeId = I18nFormat.DEFAULT_LOCALE; } return { localeId, currentLanguage }; } // 短格式:y-MM-dd static formatDate(value, format, locale, timezone) { const localeLang = I18nFormat.getLocaleAndLang(locale); const formatStr = format ? format : I18nFormat.localFormat[localeLang.currentLanguage].short; return formatDate(value, formatStr, localeLang.localeId, timezone); } // 完整格式:y-MM-dd hh:mm:ss zzzz static formatDateTime(value, format, locale, timezone) { const localeLang = I18nFormat.getLocaleAndLang(locale); const formatStr = format ? format : I18nFormat.localFormat[localeLang.currentLanguage].full; return formatDate(value, formatStr, localeLang.localeId, timezone); } // 完整格式不加GMT:y-MM-dd hh:mm:ss static formatDateTimeWithoutGMT(value, format, locale, timezone) { const localeLang = I18nFormat.getLocaleAndLang(locale); const formatStr = format ? format : I18nFormat.localFormat[localeLang.currentLanguage].long; return formatDate(value, formatStr, localeLang.localeId, timezone); } } class I18nDatePipe { /** * 使用方式参考:{{dateObj | i18nDate:'full':false}} 参数可选 * @param value 日期表达式,字符串、数字或者日期对象. * @param format 格式化表达式, 使用 'full','short'或者自定义格式化表达式. * @param withGMT 是否包含GMT信息,默认包含,只对完整日期有效 * @returns 返回格式化后的字符串. */ transform(value, format = 'full', withGMT = true) { if (format === 'full') { let formatValue = I18nFormat.formatDateTime(value); if (!withGMT) { formatValue = I18nFormat.formatDateTimeWithoutGMT(value); } return formatValue; } else if (format === 'short') { return I18nFormat.formatDate(value); } else { // 默认使用用户传入的format格式化 return I18nFormat.formatDate(value, format); } } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: I18nDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); } static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: I18nDatePipe, name: "i18nDate" }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: I18nDatePipe, decorators: [{ type: Pipe, args: [{ name: 'i18nDate' }] }] }); class I18nModule { static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: I18nModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); } static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: I18nModule, declarations: [I18nDatePipe], exports: [I18nDatePipe] }); } static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: I18nModule }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: I18nModule, decorators: [{ type: NgModule, args: [{ declarations: [ I18nDatePipe ], exports: [ I18nDatePipe ] }] }] }); /** * Generated bundle index. Do not edit. */ export { DEVUI_LANG, EN_US, I18nDatePipe, I18nFormat, I18nModule, I18nService, I18nUtil, ZH_CN }; //# sourceMappingURL=ng-devui-i18n.mjs.map