@dt-frames/ui 1.0.0 → 1.0.3

package/package.json

@@ -1,49 +1,50 @@
-{
-	"name": "@dt-frames/ui",
-	"version": "1.0.0",
-	"keywords": [
-		"vite",
-		"vue"
-	],
-	"publishConfig": {
-		"access": "public"
-	},
-	"scripts": {
-		"dev": "yarn build -w",
-		"build": "vite build"
-	},
-	"files": [
-		"src",
-		"assets",
-		"*.d.ts",
-		"es",
-		"index.*",
-		"README.md",
-		"tsconfig.json"
-	],
-	"exports": {
-		".": "./es/index.js"
-	},
-	"types": "./es/index.d.ts",
-	"sideEffects": false,
-	"dependencies": {
-		"@vueuse/core": "^7.5.2",
-		"lodash-es": "^4.17.21",
-		"sortablejs": "^1.15.0",
-		"vue": "^3.2.25",
-		"vue-router": "^4.0.12",
-		"xlsx": "^0.18.5"
-	},
-	"peerDependencies": {
-		"@dt-frames/core": "1.0.0",
-		"@dt-frames/plugins": "1.0.0"
-	},
-	"devDependencies": {
-		"@vitejs/plugin-vue": "^2.0.0",
-		"vite": "^2.7.2"
-	},
-	"description": "主要包含主题和组件",
-	"main": "",
-	"author": "周勇",
-	"license": "ISC"
-}
+{
+	"name": "@dt-frames/ui",
+	"version": "1.0.3",
+	"keywords": [
+		"ui",
+		"dt-ui"
+	],
+	"publishConfig": {
+		"access": "public",
+		"registry": "https://registry.npmjs.org/"
+	},
+	"scripts": {
+		"dev": "yarn build -w",
+		"build": "vite build"
+	},
+	"files": [
+		"src",
+		"assets",
+		"*.d.ts",
+		"es",
+		"index.*",
+		"README.md",
+		"tsconfig.json"
+	],
+	"exports": {
+		".": "./es/index.js"
+	},
+	"types": "./es/index.d.ts",
+	"sideEffects": false,
+	"dependencies": {
+		"@iconify/iconify": "^2.1.2",
+		"@vueuse/core": "^7.5.2",
+		"lodash-es": "^4.17.21",
+		"sortablejs": "^1.15.0",
+		"vue": "^3.2.25",
+		"vue-router": "^4.0.12",
+		"xlsx": "^0.18.5"
+	},
+	"peerDependencies": {
+		"@dt-frames/core": "1.0.0",
+		"@dt-frames/plugins": "1.0.0"
+	},
+	"devDependencies": {
+		"@iconify/json": "^1.1.460",
+		"@vitejs/plugin-vue": "^2.0.0",
+		"vite": "^2.7.2",
+		"vite-plugin-purge-icons": "^0.7.0",
+		"vite-plugin-theme": "^0.8.6"
+	}
+}

package/src/assets/style/reset.less

@@ -10,9 +10,6 @@
     .dt-icon{
         margin: 0 5px;
     }
-    &:hover, &:focus{
-        color: #fff !important;
-    }
 }
 
 .ant-picker{

package/src/directives/index.ts

@@ -2,6 +2,7 @@
 import { App } from 'vue'
 import { authMounted } from './permission'
 import { iconMounted } from './icon'
+import '@purge-icons/generated'
 
 
 const dtDirectives = [

package/src/theme/sider/index.less

@@ -91,37 +91,37 @@
             }
         }
     }
+}
 
-    &--fixed {
-        position: fixed;
-        top: 0;
-        left: 0;
-        height: 100%;
-    }
+.dt-sideBar.dt-sideBar--fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+}
 
-    &--mix {
-        height: calc(100% - 48px);
-        top: @header-height;
-        background: @menu-mix-bg-color;
-        border-right: 1px solid #f0f0f0;
+.dt-sideBar.dt-sideBar--mix {
+    height: calc(100% - 48px);
+    top: @header-height;
+    background: @menu-mix-bg-color;
+    border-right: 1px solid #f0f0f0;
 
-        .ant-menu{
-            background: @menu-mix-bg-color;
-            border-right: none;
-            .ant-menu-sub{
-                background: @menu-mix-sub-bg-color;
-            }
-            .ant-menu-item-selected{
-                background: @menu-mix-select-bg-color;
-            }
+    .ant-menu{
+        background: @menu-mix-bg-color;
+        border-right: none;
+        .ant-menu-sub{
+            background: @menu-mix-sub-bg-color;
         }
-
-        .ant-layout-sider-trigger{
-            background: @menu-mix-bg-color;
-            border-right: 1px solid #f0f0f0;
-            border-top: 1px solid #f0f0f0;
+        .ant-menu-item-selected{
+            background: @menu-mix-select-bg-color;
         }
     }
+
+    .ant-layout-sider-trigger{
+        background: @menu-mix-bg-color;
+        border-right: 1px solid #f0f0f0;
+        border-top: 1px solid #f0f0f0;
+    }
 }
 
 .ant-layout-sider-dark, .ant-menu-dark {

package/es/themes/generate.ts

@@ -1,74 +0,0 @@
-import { generate } from '@ant-design/colors'
-
-export const primaryColor = '#269ac1'
-
-type Fn = (...arg: any) => any
-type GenerateTheme = 'default' | 'dark'
-
-interface GenerateColorsParams {
-    mixLighten: Fn
-    mixDarken: Fn
-    tinycolor: any
-    color?: string
-}
-
-export function generateAntColors(
-    color: string, 
-    theme: GenerateTheme = 'default'
-) {
-    return generate(color, { theme })
-}
-
-export function getThemeColors(color?: string) {
-    const tc = color || primaryColor
-    const lightColors = generateAntColors(tc)
-    const primary = lightColors[5]
-    const modeColors = generateAntColors(primary, 'dark')
-  
-    return [...lightColors, ...modeColors]
-}
-
-export function generateColors({
-    color = primaryColor,
-    mixLighten,
-    mixDarken,
-    tinycolor,
-}: GenerateColorsParams) {
-    const arr = new Array(19).fill(0);
-    const lightens = arr.map((_t, i) => mixLighten(color, i / 5) )
-  
-    const darkens = arr.map((_t, i) => mixDarken(color, i / 5))
-  
-    const alphaColors = arr.map((_t, i) => {
-        return tinycolor(color)
-            .setAlpha(i / 20)
-            .toRgbString()
-    })
-  
-    const shortAlphaColors = alphaColors.map((item) => item.replace(/\s/g, '').replace(/0\./g, '.'))
-  
-    const tinycolorLightens = arr
-        .map((_t, i) => {
-            return tinycolor(color)
-                .lighten(i * 5)
-                .toHexString()
-        })
-        .filter((item) => item !== '#ffffff')
-  
-    const tinycolorDarkens = arr
-        .map((_t, i) => {
-            return tinycolor(color)
-                .darken(i * 5)
-                .toHexString()
-        })
-        .filter((item) => item !== '#000000')
-
-    return [
-        ...lightens,
-        ...darkens,
-        ...alphaColors,
-        ...shortAlphaColors,
-        ...tinycolorDarkens,
-        ...tinycolorLightens
-    ].filter((item) => !item.includes('-'))
-}

package/es/themes/index.ts

@@ -1,10 +0,0 @@
-import { configThemePlugin } from './themePlugiin'
-import { getThemeColors, generateColors } from './generate'
-import { generateModifyVars } from './modifyVars'
-
-export {
-    configThemePlugin,
-    getThemeColors, 
-    generateColors,
-    generateModifyVars
-}

package/es/themes/modifyVars.ts

@@ -1,33 +0,0 @@
-import { getThemeVariables } from 'ant-design-vue/dist/theme'
-import { resolve } from 'path'
-import { generateAntColors, primaryColor } from './generate';
-
-
-export function generateModifyVars(dark = false) {
-    const palettes = generateAntColors(primaryColor)
-    const primary = palettes[5]
-
-    const primaryColorObj: Record<string, string> = {};
-
-    for (let index = 0; index < 10; index++) {
-        primaryColorObj[`primary-${index + 1}`] = palettes[index];
-    }
-
-    const modifyVars = getThemeVariables({ dark });
-    return {
-        ...modifyVars,
-        hack: `${modifyVars.hack} @import (reference) "${resolve('src/assets/style/index.less')}";`,
-        'primary-color': primary,
-        ...primaryColorObj,
-        'info-color': primary,
-        'processing-color': primary,
-        'success-color': '#55D187',
-        'error-color': '#ED6F6F',
-        'warning-color': '#EFBD47',
-        //'border-color-base': '#EEEEEE',
-        'font-size-base': '14px',
-        'border-radius-base': '2px',
-        'link-color': primary,
-        'app-content-background': '#fafafa',
-    }
-}

package/es/themes/themePlugiin.ts

@@ -1,74 +0,0 @@
-import type { PluginOption } from 'vite'
-import { viteThemePlugin, antdDarkThemePlugin, mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme'
-import { getThemeColors, generateColors } from './generate'
-import { generateModifyVars } from './modifyVars';
-
-export function configThemePlugin(isBuild: boolean, modifyVars: string, preloadFiles: string[]): PluginOption[] {
-    const colors = generateColors({
-        mixDarken,
-        mixLighten,
-        tinycolor,
-    });
-    const plugin = [
-        viteThemePlugin({
-            resolveSelector: (s) => {
-                s = s.trim();
-                switch (s) {
-                    case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':
-                    return '.ant-steps-item-icon > .ant-steps-icon';
-                    case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)':
-                    case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover':
-                    case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active':
-                    return s;
-                    case '.ant-steps-item-icon > .ant-steps-icon':
-                    return s;
-                    case '.ant-select-item-option-selected:not(.ant-select-item-option-disabled)':
-                    return s;
-                    default:
-                    if (s.indexOf('.ant-btn') >= -1) {
-                        // 按钮被重新定制过，需要过滤掉class防止覆盖
-                        return s;
-                    }
-                }
-                return s.startsWith('[data-theme') ? s : `[data-theme] ${s}`;
-            },
-            colorVariables: [...getThemeColors(), ...colors],
-        }),
-        antdDarkThemePlugin({
-            preloadFiles,
-            filter: (id) => (isBuild ? !id.endsWith('antd.less') : true),
-            darkModifyVars: {
-                ...generateModifyVars(true),
-                'text-color': '#c9d1d9',
-                'primary-1': 'rgb(255 255 255 / 8%)',
-                'text-color-base': '#c9d1d9',
-                'component-background': '#151515',
-                'heading-color': 'rgb(255 255 255 / 65%)',
-                // black: '#0e1117',
-                // #8b949e
-                'text-color-secondary': '#8b949e',
-                'border-color-base': '#303030',
-                // 'border-color-split': '#30363d',
-                'item-active-bg': '#111b26',
-                'app-content-background': '#1e1e1e',
-                'tree-node-selected-bg': '#11263c',
-        
-                'alert-success-border-color': '#274916',
-                'alert-success-bg-color': '#162312',
-                'alert-success-icon-color': '#49aa19',
-                'alert-info-border-color': '#153450',
-                'alert-info-bg-color': '#111b26',
-                'alert-info-icon-color': '#177ddc',
-                'alert-warning-border-color': '#594214',
-                'alert-warning-bg-color': '#2b2111',
-                'alert-warning-icon-color': '#d89614',
-                'alert-error-border-color': '#58181c',
-                'alert-error-bg-color': '#2a1215',
-                'alert-error-icon-color': '#a61d24',
-            },
-        }),
-    ];
-  
-    return plugin as unknown as PluginOption[];
-  }
-