@vyr/design 0.0.33 → 0.0.34

package/src/index.ts

@@ -1,4 +1,5 @@
 import './theme'
+import { useProvider } from './components/composables/useProvider'
 import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community'
 import { AgGridVue as VyrTable } from 'ag-grid-vue3'
 import VyrSlot from './components/Slot.vue'
@@ -10,7 +11,7 @@ import VyrChecked from './components/Checked.vue'
 import VyrCheckedGroup from './components/CheckedGroup.vue'
 import VyrCol from './components/Col.vue'
 import VyrColorPicker from './components/ColorPicker.vue'
-import VyrDrapdown from './components/Dropdown.vue'
+import VyrDropdown from './components/Dropdown.vue'
 import VyrDialog from './components/Dialog.vue'
 import VyrDraggable from './components/Draggable.vue'
 import VyrDynamicLayouter from './components/DynamicLayouter.vue'
@@ -33,6 +34,7 @@ ModuleRegistry.registerModules([AllCommunityModule])
 
 export * as VyrTableCommon from 'ag-grid-community'
 export {
+    useProvider,
     VyrTable,
     VyrSlot,
     VyrButton,
@@ -43,7 +45,7 @@ export {
     VyrCheckedGroup,
     VyrCol,
     VyrColorPicker,
-    VyrDrapdown,
+    VyrDropdown,
     VyrDialog,
     VyrDraggable,
     VyrDynamicLayouter,

package/src/theme/ThemeService.ts

@@ -0,0 +1,55 @@
+import { ThemeServiceInit, galaxyTheme, ThemeService as _ThemeService, Theme } from "devui-theme";
+
+class ThemeService {
+  static darkTheme = {
+    ...galaxyTheme,
+    data: {
+      ...galaxyTheme.data,
+      "devui-icon-hover-bg": "#393a3e",
+    },
+  };
+
+  themeCollection = new Map<string, Theme>();
+  themeService: _ThemeService;
+  currentTheme = "dark";
+
+  constructor() {
+    this.themeService = ThemeServiceInit() as _ThemeService;
+    this.set('dark', ThemeService.darkTheme);
+  }
+
+  set(themeType: string, theme: Theme) {
+    this.themeCollection.set(themeType, theme);
+  }
+
+  get(themeType: string) {
+    return this.themeCollection.get(themeType) || null;
+  }
+
+  update(themeUpdate: Partial<Theme>) {
+    const theme = this.get(this.currentTheme);
+    if (theme === null) return null
+    const updatedTheme: Theme = {
+      ...theme,
+      ...themeUpdate,
+      data: {
+        ...theme.data,
+        ...themeUpdate.data,
+      },
+    };
+    this.set(this.currentTheme, updatedTheme);
+    this.apply(this.currentTheme);
+  }
+
+  apply(themeType = 'dark') {
+    const theme = this.get(themeType);
+    if (theme === null) return null
+    this.themeService.applyTheme(theme);
+    document.body.setAttribute("ui-theme-type", themeType);
+    this.currentTheme = themeType;
+  }
+}
+
+export {
+  ThemeService
+};

package/src/theme/index.ts

@@ -1,6 +1,7 @@
 import '../font/iconfont.css'
 import '../theme/global.less'
 import { reactive } from "vue"
+import { ThemeService } from './ThemeService'
 
 interface ThemeConfig {
   whiteColor: string
@@ -126,7 +127,7 @@ class Theme {
     optionDisabledBackgroundColor: 'rgba(77, 77, 77, 1)',
 
     optionsScrollMargin: { unit: 'px', value: 6 },
-    optionsBorderColor: 'rgba(77, 77, 77, 1)',
+    optionsBorderColor: 'rgba(45, 45, 45, 1)',
     optionsBackgroundColor: 'rgba(30, 30, 30, 1)',
 
     dialogHeaderBackgroundColor: 'rgba(30, 30, 30, 0.9)',
@@ -156,4 +157,11 @@ class Theme {
 
 Theme.update(Theme.config)
 
-export { ThemeConfig, Theme }
+export { ThemeConfig, Theme }
+
+//使用主题服务，代替现在的旧的主题处理方式，且将css预处理器替换为 sass
+const themeService = new ThemeService()
+
+export {
+  themeService
+}

package/src/tool/copy.ts

@@ -0,0 +1,24 @@
+function fallbackCopyTextToClipboard(text: string) {
+    const textArea = document.createElement("textarea")
+    textArea.setAttribute('style', 'position:fixed;z-index:-999;')
+    textArea.value = text
+    document.body.appendChild(textArea)
+    textArea.focus()
+    textArea.select()
+
+    try {
+        document.execCommand('copy');
+    } catch (err) {
+        console.log('复制失败')
+    }
+
+    document.body.removeChild(textArea);
+}
+
+const copy = (content: string) => {
+    return navigator.clipboard ? navigator.clipboard.writeText(content) : fallbackCopyTextToClipboard(content)
+}
+
+export {
+    copy
+}

package/src/tool/index.ts

@@ -1,4 +1,5 @@
 export * from './ArrayUtils'
 export * from './Color'
 export * from './Listener'
-export * from './Draggable'
+export * from './Draggable'
+export * from './copy'