UNPKG

ng-devui

Version:

DevUI components based on Angular

85 lines 12.6 kB
import cssVars from 'css-vars-ponyfill'; import { THEME_KEY } from './key-config'; import { devuiDarkTheme, devuiLightTheme } from './theme-data'; import { ThemeService } from './theme-service'; import { EventBus } from './utils'; /** * usage * main.ts ```ts import { ThemeServiceInit } from 'ng-devui/theme'; ThemeServiceInit(); ``` * */ export function ThemeServiceInit(themes, defaultThemeName, extraData, ieSupport = false, // TODO:css-var-ponyflll 仍有一些问题待定位 allowDynamicTheme = false) { if (typeof window === 'undefined' || typeof document === 'undefined') { return null; } window[THEME_KEY.themeCollection] = themes || { 'devui-light-theme': devuiLightTheme, 'devui-dark-theme': devuiDarkTheme, }; window[THEME_KEY.currentTheme] = defaultThemeName || 'devui-light-theme'; const eventBus = window.globalEventBus || new EventBus(); // window.globalEventBus 为 框架的事件总线 const themeService = new ThemeService(eventBus); window[THEME_KEY.themeService] = themeService; themeService.setExtraData(extraData || { 'devui-dark-theme': { appendClasses: ['dark-mode'], }, }); const currentTheme = window?.localStorage.getItem(THEME_KEY.userLastPreferTheme) || defaultThemeName; themeService.initializeTheme(currentTheme, allowDynamicTheme); if (ieSupport) { ieSupportCssVar(); } return themeService; } export function ThemeServiceFollowSystemOn(themeConfig) { if (typeof window === 'undefined' || typeof document === 'undefined') { return null; } const themeService = window[THEME_KEY.themeService]; themeService.registerMediaQuery(); return themeService.mediaQuery.prefersColorSchemeChange.subscribe((value) => { if (value === 'dark') { themeService.applyTheme(window[THEME_KEY.themeCollection][(themeConfig && themeConfig.darkThemeName) || 'devui-dark-theme']); } else { themeService.applyTheme(window[THEME_KEY.themeCollection][(themeConfig && themeConfig.lightThemeName) || 'devui-light-theme']); } }); } export function ThemeServiceFollowSystemOff(sub) { if (typeof window === 'undefined' || typeof document === 'undefined') { return; } if (sub) { sub.unsubscribe(); } const themeService = window[THEME_KEY.themeService]; themeService.unregisterMediaQuery(); } export function ieSupportCssVar() { if (typeof window === 'undefined' || typeof document === 'undefined') { return; } const isNativeSupport = (window.CSS && CSS.supports && CSS.supports('(--a: 0)')) || false; if (isNativeSupport) { return; } cssVars({ watch: true, silent: true }); const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { cssVars({ watch: false, silent: true }); cssVars({ watch: true, silent: true }); }); }); const config = { attributes: true, attributeFilter: [THEME_KEY.uiThemeAttributeName] }; observer.observe(document.querySelector(`#${THEME_KEY.styleElementId}`), config); } // TODO: management should handle add / remove theme from theme collection. // TODO: move global variables(window.xxxx) to single namespace //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWUtbWFuYWdlbWVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2RldnVpL3RoZW1lL3RoZW1lLW1hbmFnZW1lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxPQUFPLE1BQU0sbUJBQW1CLENBQUM7QUFFeEMsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGNBQWMsQ0FBQztBQUV6QyxPQUFPLEVBQUUsY0FBYyxFQUFFLGVBQWUsRUFBRSxNQUFNLGNBQWMsQ0FBQztBQUMvRCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLFNBQVMsQ0FBQztBQUVuQzs7Ozs7Ozs7RUFRRTtBQUNGLE1BQU0sVUFBVSxnQkFBZ0IsQ0FDOUIsTUFBdUMsRUFDdkMsZ0JBQXlCLEVBQ3pCLFNBT0MsRUFDRCxTQUFTLEdBQUcsS0FBSyxFQUFFLGtDQUFrQztBQUNyRCxpQkFBaUIsR0FBRyxLQUFLO0lBRXpCLElBQUksT0FBTyxNQUFNLEtBQUssV0FBVyxJQUFJLE9BQU8sUUFBUSxLQUFLLFdBQVcsRUFBRSxDQUFDO1FBQ3JFLE9BQU8sSUFBSSxDQUFDO0lBQ2QsQ0FBQztJQUNELE1BQU0sQ0FBQyxTQUFTLENBQUMsZUFBZSxDQUFDLEdBQUcsTUFBTSxJQUFJO1FBQzVDLG1CQUFtQixFQUFFLGVBQWU7UUFDcEMsa0JBQWtCLEVBQUUsY0FBYztLQUNuQyxDQUFDO0lBQ0YsTUFBTSxDQUFDLFNBQVMsQ0FBQyxZQUFZLENBQUMsR0FBRyxnQkFBZ0IsSUFBSSxtQkFBbUIsQ0FBQztJQUN6RSxNQUFNLFFBQVEsR0FBSSxNQUFjLENBQUMsY0FBYyxJQUFJLElBQUksUUFBUSxFQUFFLENBQUMsQ0FBQyxrQ0FBa0M7SUFDckcsTUFBTSxZQUFZLEdBQUcsSUFBSSxZQUFZLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDaEQsTUFBTSxDQUFDLFNBQVMsQ0FBQyxZQUFZLENBQUMsR0FBRyxZQUFZLENBQUM7SUFFOUMsWUFBWSxDQUFDLFlBQVksQ0FDdkIsU0FBUyxJQUFJO1FBQ1gsa0JBQWtCLEVBQUU7WUFDbEIsYUFBYSxFQUFFLENBQUMsV0FBVyxDQUFDO1NBQzdCO0tBQ0YsQ0FDRixDQUFDO0lBRUYsTUFBTSxZQUFZLEdBQUcsTUFBTSxFQUFFLFlBQVksQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLG1CQUFtQixDQUFDLElBQUksZ0JBQWdCLENBQUM7SUFDckcsWUFBWSxDQUFDLGVBQWUsQ0FBQyxZQUFZLEVBQUUsaUJBQWlCLENBQUMsQ0FBQztJQUM5RCxJQUFJLFNBQVMsRUFBRSxDQUFDO1FBQ2QsZUFBZSxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQUNELE9BQU8sWUFBWSxDQUFDO0FBQ3RCLENBQUM7QUFFRCxNQUFNLFVBQVUsMEJBQTBCLENBQUMsV0FBK0Q7SUFDeEcsSUFBSSxPQUFPLE1BQU0sS0FBSyxXQUFXLElBQUksT0FBTyxRQUFRLEtBQUssV0FBVyxFQUFFLENBQUM7UUFDckUsT0FBTyxJQUFJLENBQUM7SUFDZCxDQUFDO0lBQ0QsTUFBTSxZQUFZLEdBQWlCLE1BQU0sQ0FBQyxTQUFTLENBQUMsWUFBWSxDQUFDLENBQUM7SUFDbEUsWUFBWSxDQUFDLGtCQUFrQixFQUFFLENBQUM7SUFDbEMsT0FBTyxZQUFZLENBQUMsVUFBVSxDQUFDLHdCQUF3QixDQUFDLFNBQVMsQ0FBQyxDQUFDLEtBQUssRUFBRSxFQUFFO1FBQzFFLElBQUksS0FBSyxLQUFLLE1BQU0sRUFBRSxDQUFDO1lBQ3JCLFlBQVksQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQyxlQUFlLENBQUMsQ0FBQyxDQUFDLFdBQVcsSUFBSSxXQUFXLENBQUMsYUFBYSxDQUFDLElBQUksa0JBQWtCLENBQUMsQ0FBQyxDQUFDO1FBQy9ILENBQUM7YUFBTSxDQUFDO1lBQ04sWUFBWSxDQUFDLFVBQVUsQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUMsV0FBVyxJQUFJLFdBQVcsQ0FBQyxjQUFjLENBQUMsSUFBSSxtQkFBbUIsQ0FBQyxDQUFDLENBQUM7UUFDakksQ0FBQztJQUNILENBQUMsQ0FBQyxDQUFDO0FBQ0wsQ0FBQztBQUNELE1BQU0sVUFBVSwyQkFBMkIsQ0FBQyxHQUFrQjtJQUM1RCxJQUFJLE9BQU8sTUFBTSxLQUFLLFdBQVcsSUFBSSxPQUFPLFFBQVEsS0FBSyxXQUFXLEVBQUUsQ0FBQztRQUNyRSxPQUFPO0lBQ1QsQ0FBQztJQUNELElBQUksR0FBRyxFQUFFLENBQUM7UUFDUixHQUFHLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQUNELE1BQU0sWUFBWSxHQUFHLE1BQU0sQ0FBQyxTQUFTLENBQUMsWUFBWSxDQUFDLENBQUM7SUFDcEQsWUFBWSxDQUFDLG9CQUFvQixFQUFFLENBQUM7QUFDdEMsQ0FBQztBQUVELE1BQU0sVUFBVSxlQUFlO0lBQzdCLElBQUksT0FBTyxNQUFNLEtBQUssV0FBVyxJQUFJLE9BQU8sUUFBUSxLQUFLLFdBQVcsRUFBRSxDQUFDO1FBQ3JFLE9BQU87SUFDVCxDQUFDO0lBQ0QsTUFBTSxlQUFlLEdBQUcsQ0FBRSxNQUFjLENBQUMsR0FBRyxJQUFJLEdBQUcsQ0FBQyxRQUFRLElBQUksR0FBRyxDQUFDLFFBQVEsQ0FBQyxVQUFVLENBQUMsQ0FBQyxJQUFJLEtBQUssQ0FBQztJQUNuRyxJQUFJLGVBQWUsRUFBRSxDQUFDO1FBQ3BCLE9BQU87SUFDVCxDQUFDO0lBQ0QsT0FBTyxDQUFDLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQztJQUN2QyxNQUFNLFFBQVEsR0FBRyxJQUFJLGdCQUFnQixDQUFDLENBQUMsU0FBUyxFQUFFLEVBQUU7UUFDbEQsU0FBUyxDQUFDLE9BQU8sQ0FBQyxDQUFDLFFBQVEsRUFBRSxFQUFFO1lBQzdCLE9BQU8sQ0FBQyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSxDQUFDLENBQUM7WUFDeEMsT0FBTyxDQUFDLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQztRQUN6QyxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUMsQ0FBQyxDQUFDO0lBRUgsTUFBTSxNQUFNLEdBQUcsRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLGVBQWUsRUFBRSxDQUFDLFNBQVMsQ0FBQyxvQkFBb0IsQ0FBQyxFQUFFLENBQUM7SUFFdkYsUUFBUSxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsYUFBYSxDQUFDLElBQUksU0FBUyxDQUFDLGNBQWMsRUFBRSxDQUFDLEVBQUUsTUFBTSxDQUFDLENBQUM7QUFDbkYsQ0FBQztBQUVELDJFQUEyRTtBQUMzRSwrREFBK0QiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY3NzVmFycyBmcm9tICdjc3MtdmFycy1wb255ZmlsbCc7XHJcbmltcG9ydCB7IFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xyXG5pbXBvcnQgeyBUSEVNRV9LRVkgfSBmcm9tICcuL2tleS1jb25maWcnO1xyXG5pbXBvcnQgeyBUaGVtZSB9IGZyb20gJy4vdGhlbWUnO1xyXG5pbXBvcnQgeyBkZXZ1aURhcmtUaGVtZSwgZGV2dWlMaWdodFRoZW1lIH0gZnJvbSAnLi90aGVtZS1kYXRhJztcclxuaW1wb3J0IHsgVGhlbWVTZXJ2aWNlIH0gZnJvbSAnLi90aGVtZS1zZXJ2aWNlJztcclxuaW1wb3J0IHsgRXZlbnRCdXMgfSBmcm9tICcuL3V0aWxzJztcclxuXHJcbi8qKlxyXG4gKiB1c2FnZVxyXG4gKiBtYWluLnRzXHJcbiBgYGB0c1xyXG4gaW1wb3J0IHsgVGhlbWVTZXJ2aWNlSW5pdCB9IGZyb20gJ25nLWRldnVpL3RoZW1lJztcclxuIFRoZW1lU2VydmljZUluaXQoKTtcclxuIGBgYFxyXG4gKlxyXG4qL1xyXG5leHBvcnQgZnVuY3Rpb24gVGhlbWVTZXJ2aWNlSW5pdChcclxuICB0aGVtZXM/OiB7IFt0aGVtZU5hbWU6IHN0cmluZ106IFRoZW1lIH0sXHJcbiAgZGVmYXVsdFRoZW1lTmFtZT86IHN0cmluZyxcclxuICBleHRyYURhdGE/OiB7XHJcbiAgICBbdGhlbWVOYW1lOiBzdHJpbmddOiB7XHJcbiAgICAgIGFwcGVuZENsYXNzZXM/OiBBcnJheTxzdHJpbmc+O1xyXG4gICAgICBjc3NWYXJpYWJsZXM/OiB7XHJcbiAgICAgICAgW2Nzc1Zhck5hbWU6IHN0cmluZ106IHN0cmluZztcclxuICAgICAgfTtcclxuICAgIH07XHJcbiAgfSxcclxuICBpZVN1cHBvcnQgPSBmYWxzZSwgLy8gVE9ET++8mmNzcy12YXItcG9ueWZsbGwg5LuN5pyJ5LiA5Lqb6Zeu6aKY5b6F5a6a5L2NXHJcbiAgYWxsb3dEeW5hbWljVGhlbWUgPSBmYWxzZVxyXG4pIHtcclxuICBpZiAodHlwZW9mIHdpbmRvdyA9PT0gJ3VuZGVmaW5lZCcgfHwgdHlwZW9mIGRvY3VtZW50ID09PSAndW5kZWZpbmVkJykge1xyXG4gICAgcmV0dXJuIG51bGw7XHJcbiAgfVxyXG4gIHdpbmRvd1tUSEVNRV9LRVkudGhlbWVDb2xsZWN0aW9uXSA9IHRoZW1lcyB8fCB7XHJcbiAgICAnZGV2dWktbGlnaHQtdGhlbWUnOiBkZXZ1aUxpZ2h0VGhlbWUsXHJcbiAgICAnZGV2dWktZGFyay10aGVtZSc6IGRldnVpRGFya1RoZW1lLFxyXG4gIH07XHJcbiAgd2luZG93W1RIRU1FX0tFWS5jdXJyZW50VGhlbWVdID0gZGVmYXVsdFRoZW1lTmFtZSB8fCAnZGV2dWktbGlnaHQtdGhlbWUnO1xyXG4gIGNvbnN0IGV2ZW50QnVzID0gKHdpbmRvdyBhcyBhbnkpLmdsb2JhbEV2ZW50QnVzIHx8IG5ldyBFdmVudEJ1cygpOyAvLyB3aW5kb3cuZ2xvYmFsRXZlbnRCdXMg5Li6IOahhuaetueahOS6i+S7tuaAu+e6v1xyXG4gIGNvbnN0IHRoZW1lU2VydmljZSA9IG5ldyBUaGVtZVNlcnZpY2UoZXZlbnRCdXMpO1xyXG4gIHdpbmRvd1tUSEVNRV9LRVkudGhlbWVTZXJ2aWNlXSA9IHRoZW1lU2VydmljZTtcclxuXHJcbiAgdGhlbWVTZXJ2aWNlLnNldEV4dHJhRGF0YShcclxuICAgIGV4dHJhRGF0YSB8fCB7XHJcbiAgICAgICdkZXZ1aS1kYXJrLXRoZW1lJzoge1xyXG4gICAgICAgIGFwcGVuZENsYXNzZXM6IFsnZGFyay1tb2RlJ10sXHJcbiAgICAgIH0sXHJcbiAgICB9XHJcbiAgKTtcclxuXHJcbiAgY29uc3QgY3VycmVudFRoZW1lID0gd2luZG93Py5sb2NhbFN0b3JhZ2UuZ2V0SXRlbShUSEVNRV9LRVkudXNlckxhc3RQcmVmZXJUaGVtZSkgfHwgZGVmYXVsdFRoZW1lTmFtZTtcclxuICB0aGVtZVNlcnZpY2UuaW5pdGlhbGl6ZVRoZW1lKGN1cnJlbnRUaGVtZSwgYWxsb3dEeW5hbWljVGhlbWUpO1xyXG4gIGlmIChpZVN1cHBvcnQpIHtcclxuICAgIGllU3VwcG9ydENzc1ZhcigpO1xyXG4gIH1cclxuICByZXR1cm4gdGhlbWVTZXJ2aWNlO1xyXG59XHJcblxyXG5leHBvcnQgZnVuY3Rpb24gVGhlbWVTZXJ2aWNlRm9sbG93U3lzdGVtT24odGhlbWVDb25maWc/OiB7IGxpZ2h0VGhlbWVOYW1lOiBzdHJpbmc7IGRhcmtUaGVtZU5hbWU6IHN0cmluZyB9KTogU3Vic2NyaXB0aW9uIHtcclxuICBpZiAodHlwZW9mIHdpbmRvdyA9PT0gJ3VuZGVmaW5lZCcgfHwgdHlwZW9mIGRvY3VtZW50ID09PSAndW5kZWZpbmVkJykge1xyXG4gICAgcmV0dXJuIG51bGw7XHJcbiAgfVxyXG4gIGNvbnN0IHRoZW1lU2VydmljZTogVGhlbWVTZXJ2aWNlID0gd2luZG93W1RIRU1FX0tFWS50aGVtZVNlcnZpY2VdO1xyXG4gIHRoZW1lU2VydmljZS5yZWdpc3Rlck1lZGlhUXVlcnkoKTtcclxuICByZXR1cm4gdGhlbWVTZXJ2aWNlLm1lZGlhUXVlcnkucHJlZmVyc0NvbG9yU2NoZW1lQ2hhbmdlLnN1YnNjcmliZSgodmFsdWUpID0+IHtcclxuICAgIGlmICh2YWx1ZSA9PT0gJ2RhcmsnKSB7XHJcbiAgICAgIHRoZW1lU2VydmljZS5hcHBseVRoZW1lKHdpbmRvd1tUSEVNRV9LRVkudGhlbWVDb2xsZWN0aW9uXVsodGhlbWVDb25maWcgJiYgdGhlbWVDb25maWcuZGFya1RoZW1lTmFtZSkgfHwgJ2RldnVpLWRhcmstdGhlbWUnXSk7XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICB0aGVtZVNlcnZpY2UuYXBwbHlUaGVtZSh3aW5kb3dbVEhFTUVfS0VZLnRoZW1lQ29sbGVjdGlvbl1bKHRoZW1lQ29uZmlnICYmIHRoZW1lQ29uZmlnLmxpZ2h0VGhlbWVOYW1lKSB8fCAnZGV2dWktbGlnaHQtdGhlbWUnXSk7XHJcbiAgICB9XHJcbiAgfSk7XHJcbn1cclxuZXhwb3J0IGZ1bmN0aW9uIFRoZW1lU2VydmljZUZvbGxvd1N5c3RlbU9mZihzdWI/OiBTdWJzY3JpcHRpb24pIHtcclxuICBpZiAodHlwZW9mIHdpbmRvdyA9PT0gJ3VuZGVmaW5lZCcgfHwgdHlwZW9mIGRvY3VtZW50ID09PSAndW5kZWZpbmVkJykge1xyXG4gICAgcmV0dXJuO1xyXG4gIH1cclxuICBpZiAoc3ViKSB7XHJcbiAgICBzdWIudW5zdWJzY3JpYmUoKTtcclxuICB9XHJcbiAgY29uc3QgdGhlbWVTZXJ2aWNlID0gd2luZG93W1RIRU1FX0tFWS50aGVtZVNlcnZpY2VdO1xyXG4gIHRoZW1lU2VydmljZS51bnJlZ2lzdGVyTWVkaWFRdWVyeSgpO1xyXG59XHJcblxyXG5leHBvcnQgZnVuY3Rpb24gaWVTdXBwb3J0Q3NzVmFyKCkge1xyXG4gIGlmICh0eXBlb2Ygd2luZG93ID09PSAndW5kZWZpbmVkJyB8fCB0eXBlb2YgZG9jdW1lbnQgPT09ICd1bmRlZmluZWQnKSB7XHJcbiAgICByZXR1cm47XHJcbiAgfVxyXG4gIGNvbnN0IGlzTmF0aXZlU3VwcG9ydCA9ICgod2luZG93IGFzIGFueSkuQ1NTICYmIENTUy5zdXBwb3J0cyAmJiBDU1Muc3VwcG9ydHMoJygtLWE6IDApJykpIHx8IGZhbHNlO1xyXG4gIGlmIChpc05hdGl2ZVN1cHBvcnQpIHtcclxuICAgIHJldHVybjtcclxuICB9XHJcbiAgY3NzVmFycyh7IHdhdGNoOiB0cnVlLCBzaWxlbnQ6IHRydWUgfSk7XHJcbiAgY29uc3Qgb2JzZXJ2ZXIgPSBuZXcgTXV0YXRpb25PYnNlcnZlcigobXV0YXRpb25zKSA9PiB7XHJcbiAgICBtdXRhdGlvbnMuZm9yRWFjaCgobXV0YXRpb24pID0+IHtcclxuICAgICAgY3NzVmFycyh7IHdhdGNoOiBmYWxzZSwgc2lsZW50OiB0cnVlIH0pO1xyXG4gICAgICBjc3NWYXJzKHsgd2F0Y2g6IHRydWUsIHNpbGVudDogdHJ1ZSB9KTtcclxuICAgIH0pO1xyXG4gIH0pO1xyXG5cclxuICBjb25zdCBjb25maWcgPSB7IGF0dHJpYnV0ZXM6IHRydWUsIGF0dHJpYnV0ZUZpbHRlcjogW1RIRU1FX0tFWS51aVRoZW1lQXR0cmlidXRlTmFtZV0gfTtcclxuXHJcbiAgb2JzZXJ2ZXIub2JzZXJ2ZShkb2N1bWVudC5xdWVyeVNlbGVjdG9yKGAjJHtUSEVNRV9LRVkuc3R5bGVFbGVtZW50SWR9YCksIGNvbmZpZyk7XHJcbn1cclxuXHJcbi8vIFRPRE86IG1hbmFnZW1lbnQgc2hvdWxkIGhhbmRsZSBhZGQgLyByZW1vdmUgdGhlbWUgZnJvbSB0aGVtZSBjb2xsZWN0aW9uLlxyXG4vLyBUT0RPOiBtb3ZlIGdsb2JhbCB2YXJpYWJsZXPvvIh3aW5kb3cueHh4eO+8iSB0byBzaW5nbGUgbmFtZXNwYWNlXHJcbiJdfQ==