From 963991b97a8f7e0a8d64452b57808b57b07e0fbf Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Fri, 15 Jan 2021 23:33:18 +0800 Subject: [PATCH] refactor(alert, dropdown, menu, popover, tree, code, collapse): better theme typing --- scripts/generate-version.js | 2 +- src/_mixins/index.ts | 1 + src/_mixins/use-theme.ts | 34 +++---- src/alert/src/Alert.vue | 7 +- src/alert/styles/dark.ts | 9 +- src/alert/styles/index.ts | 2 +- src/alert/styles/light.ts | 180 +++++++++++++++++---------------- src/code/src/Code.ts | 5 +- src/code/styles/dark.ts | 8 +- src/code/styles/index.ts | 2 +- src/code/styles/light.ts | 47 +++++---- src/collapse/src/Collapse.ts | 5 +- src/collapse/styles/dark.ts | 9 +- src/collapse/styles/index.ts | 2 +- src/collapse/styles/light.ts | 47 +++++---- src/dropdown/src/Dropdown.ts | 5 +- src/dropdown/styles/dark.ts | 13 ++- src/dropdown/styles/index.ts | 2 +- src/dropdown/styles/light.ts | 103 +++++++++++-------- src/menu/src/Menu.ts | 5 +- src/menu/styles/dark.ts | 9 +- src/menu/styles/index.ts | 2 +- src/menu/styles/light.ts | 66 ++++++------ src/popover/src/Popover.ts | 5 +- src/popover/src/PopoverBody.ts | 7 +- src/popover/styles/dark.ts | 9 +- src/popover/styles/index.ts | 2 +- src/popover/styles/light.ts | 40 ++++---- src/tree/src/Tree.ts | 6 +- src/tree/styles/dark.ts | 9 +- src/tree/styles/index.ts | 2 +- src/tree/styles/light.ts | 55 +++++----- src/version.js | 1 - 33 files changed, 376 insertions(+), 325 deletions(-) delete mode 100644 src/version.js diff --git a/scripts/generate-version.js b/scripts/generate-version.js index 786d778e4..db906f9f9 100644 --- a/scripts/generate-version.js +++ b/scripts/generate-version.js @@ -1,6 +1,6 @@ const version = require('../package.json').version require('fs').writeFileSync( - require('path').resolve(__dirname, '..', 'src', 'version.js'), + require('path').resolve(__dirname, '..', 'src', 'version.ts'), `export default '${version}'\n` ) diff --git a/src/_mixins/index.ts b/src/_mixins/index.ts index 5da268298..240a349e5 100644 --- a/src/_mixins/index.ts +++ b/src/_mixins/index.ts @@ -1,5 +1,6 @@ export { default as useFormItem } from './use-form-item' export { default as useTheme } from './use-theme' +export type { ThemeProps, MergedTheme } from './use-theme' export { default as useConfig } from './use-config' export { default as useLocale } from './use-locale' export { default as useStyle } from './use-style' diff --git a/src/_mixins/use-theme.ts b/src/_mixins/use-theme.ts index 2308d2d14..9e8f180ac 100644 --- a/src/_mixins/use-theme.ts +++ b/src/_mixins/use-theme.ts @@ -12,10 +12,10 @@ globalStyle.mount({ id: 'naive-ui-global' }) -interface Theme { +export interface Theme { name: string - common?: any - peers?: any + common?: ThemeCommonVars + peers?: R self(vars: ThemeCommonVars): T } @@ -119,22 +119,20 @@ useTheme.props = { type: Object, default: undefined } -} +} as const -useTheme.createProps = function () { - return { - unstableTheme: { - type: Object as PropType>, - default: undefined - }, - unstableThemeOverrides: { - type: Object, - default: undefined - }, - builtinThemeOverrides: { - type: Object, - default: undefined - } +export type ThemeProps = { + unstableTheme: { + type: PropType + default: undefined + } + unstableThemeOverrides: { + type: ObjectConstructor + default: undefined + } + builtinThemeOverrides: { + type: ObjectConstructor + default: undefined } } diff --git a/src/alert/src/Alert.vue b/src/alert/src/Alert.vue index 2638100cc..473650cdc 100644 --- a/src/alert/src/Alert.vue +++ b/src/alert/src/Alert.vue @@ -47,9 +47,10 @@ import { } from '../../_base/icons' import { NFadeInExpandTransition, NBaseClose, NBaseIcon } from '../../_base' import { useTheme } from '../../_mixins' +import type { ThemeProps } from '../../_mixins' import { warn, createKey } from '../../_utils' -import { alertLight } from '../styles/index' -import type { AlertThemeVars } from '../styles/index' +import { alertLight } from '../styles' +import type { AlertTheme } from '../styles' import style from './styles/index.cssr' export default defineComponent({ @@ -65,7 +66,7 @@ export default defineComponent({ }, inheritAttrs: false, props: { - ...useTheme.createProps(), + ...(useTheme.props as ThemeProps), title: { type: String, default: undefined diff --git a/src/alert/styles/dark.ts b/src/alert/styles/dark.ts index bd90d4dc1..31fb264cc 100644 --- a/src/alert/styles/dark.ts +++ b/src/alert/styles/dark.ts @@ -1,12 +1,11 @@ import { changeColor } from 'seemly' import { commonDark } from '../../_styles/new-common' -import type { ThemeCommonVars } from '../../_styles/new-common' -import type { AlertThemeVars } from './light' +import type { AlertTheme } from './light' -export default { +const alertDark: AlertTheme = { name: 'Alert', common: commonDark, - self (vars: ThemeCommonVars): AlertThemeVars { + self (vars) { const { lineHeight, borderRadius, @@ -76,3 +75,5 @@ export default { } } } + +export default alertDark diff --git a/src/alert/styles/index.ts b/src/alert/styles/index.ts index 29ff0bd51..b5b7bd833 100644 --- a/src/alert/styles/index.ts +++ b/src/alert/styles/index.ts @@ -1,3 +1,3 @@ export { default as alertDark } from './dark' export { default as alertLight } from './light' -export type { AlertThemeVars } from './light' +export type { AlertThemeVars, AlertTheme } from './light' diff --git a/src/alert/styles/light.ts b/src/alert/styles/light.ts index c4c2e1a22..764e5e629 100644 --- a/src/alert/styles/light.ts +++ b/src/alert/styles/light.ts @@ -1,98 +1,100 @@ import { changeColor, composite } from 'seemly' import { commonLight } from '../../_styles/new-common' import type { ThemeCommonVars } from '../../_styles/new-common' +import type { Theme } from '../../_mixins/use-theme' -const alertLight = { - name: 'Alert', - common: commonLight, - self (vars: ThemeCommonVars) { - const { - lineHeight, - borderRadius, - fontWeightStrong, +const self = (vars: ThemeCommonVars) => { + const { + lineHeight, + borderRadius, + fontWeightStrong, + baseColor, + dividerColorOverlay, + actionColor, + textColor1Overlay, + textColor2Overlay, + closeColor, + closeColorHover, + closeColorPressed, + infoColor, + successColor, + warningColor, + errorColor, + fontSize + } = vars + return { + fontSize, + lineHeight, + titleFontWeight: fontWeightStrong, + borderRadius, + border: `1px solid ${dividerColorOverlay}`, + color: actionColor, + titleTextColor: textColor1Overlay, + iconColor: textColor2Overlay, + contentTextColor: textColor2Overlay, + closeColor, + closeColorHover, + closeColorPressed, + borderInfo: `1px solid ${composite( baseColor, - dividerColorOverlay, - actionColor, - textColor1Overlay, - textColor2Overlay, - closeColor, - closeColorHover, - closeColorPressed, - infoColor, - successColor, - warningColor, - errorColor, - fontSize - } = vars - return { - fontSize, - lineHeight, - titleFontWeight: fontWeightStrong, - borderRadius, - border: `1px solid ${dividerColorOverlay}`, - color: actionColor, - titleTextColor: textColor1Overlay, - iconColor: textColor2Overlay, - contentTextColor: textColor2Overlay, - closeColor, - closeColorHover, - closeColorPressed, - borderInfo: `1px solid ${composite( - baseColor, - changeColor(infoColor, { alpha: 0.25 }) - )}`, - colorInfo: composite(baseColor, changeColor(infoColor, { alpha: 0.08 })), - titleTextColorInfo: textColor1Overlay, - iconColorInfo: infoColor, - contentTextColorInfo: textColor2Overlay, - closeColorInfo: closeColor, - closeColorHoverInfo: closeColorHover, - closeColorPressedInfo: closeColorPressed, - borderSuccess: `1px solid ${composite( - baseColor, - changeColor(successColor, { alpha: 0.25 }) - )}`, - colorSuccess: composite( - baseColor, - changeColor(successColor, { alpha: 0.08 }) - ), - titleTextColorSuccess: textColor1Overlay, - iconColorSuccess: successColor, - contentTextColorSuccess: textColor2Overlay, - closeColorSuccess: closeColor, - closeColorHoverSuccess: closeColorHover, - closeColorPressedSuccess: closeColorPressed, - borderWarning: `1px solid ${composite( - baseColor, - changeColor(warningColor, { alpha: 0.33 }) - )}`, - colorWarning: composite( - baseColor, - changeColor(warningColor, { alpha: 0.08 }) - ), - titleTextColorWarning: textColor1Overlay, - iconColorWarning: warningColor, - contentTextColorWarning: textColor2Overlay, - closeColorWarning: closeColor, - closeColorHoverWarning: closeColorHover, - closeColorPressedWarning: closeColorPressed, - borderError: `1px solid ${composite( - baseColor, - changeColor(errorColor, { alpha: 0.25 }) - )}`, - colorError: composite( - baseColor, - changeColor(errorColor, { alpha: 0.08 }) - ), - titleTextColorError: textColor1Overlay, - iconColorError: errorColor, - contentTextColorError: textColor2Overlay, - closeColorError: closeColor, - closeColorHoverError: closeColorHover, - closeColorPressedError: closeColorPressed - } + changeColor(infoColor, { alpha: 0.25 }) + )}`, + colorInfo: composite(baseColor, changeColor(infoColor, { alpha: 0.08 })), + titleTextColorInfo: textColor1Overlay, + iconColorInfo: infoColor, + contentTextColorInfo: textColor2Overlay, + closeColorInfo: closeColor, + closeColorHoverInfo: closeColorHover, + closeColorPressedInfo: closeColorPressed, + borderSuccess: `1px solid ${composite( + baseColor, + changeColor(successColor, { alpha: 0.25 }) + )}`, + colorSuccess: composite( + baseColor, + changeColor(successColor, { alpha: 0.08 }) + ), + titleTextColorSuccess: textColor1Overlay, + iconColorSuccess: successColor, + contentTextColorSuccess: textColor2Overlay, + closeColorSuccess: closeColor, + closeColorHoverSuccess: closeColorHover, + closeColorPressedSuccess: closeColorPressed, + borderWarning: `1px solid ${composite( + baseColor, + changeColor(warningColor, { alpha: 0.33 }) + )}`, + colorWarning: composite( + baseColor, + changeColor(warningColor, { alpha: 0.08 }) + ), + titleTextColorWarning: textColor1Overlay, + iconColorWarning: warningColor, + contentTextColorWarning: textColor2Overlay, + closeColorWarning: closeColor, + closeColorHoverWarning: closeColorHover, + closeColorPressedWarning: closeColorPressed, + borderError: `1px solid ${composite( + baseColor, + changeColor(errorColor, { alpha: 0.25 }) + )}`, + colorError: composite(baseColor, changeColor(errorColor, { alpha: 0.08 })), + titleTextColorError: textColor1Overlay, + iconColorError: errorColor, + contentTextColorError: textColor2Overlay, + closeColorError: closeColor, + closeColorHoverError: closeColorHover, + closeColorPressedError: closeColorPressed } } +export type AlertThemeVars = ReturnType + +const alertLight: Theme = { + name: 'Alert', + common: commonLight, + self +} + export default alertLight -export type AlertThemeVars = ReturnType +export type AlertTheme = typeof alertLight diff --git a/src/code/src/Code.ts b/src/code/src/Code.ts index 1b7a112a1..ae555a49a 100644 --- a/src/code/src/Code.ts +++ b/src/code/src/Code.ts @@ -1,13 +1,14 @@ import { defineComponent, h, toRef, watch, onMounted, ref, computed } from 'vue' import { useTheme, useHljs } from '../../_mixins' +import type { ThemeProps } from '../../_mixins' import { codeLight } from '../styles' -import type { CodeThemeVars } from '../styles' +import type { CodeTheme } from '../styles' import style from './styles/index.cssr' export default defineComponent({ name: 'Code', props: { - ...useTheme.createProps(), + ...(useTheme.props as ThemeProps), language: { type: String, default: undefined diff --git a/src/code/styles/dark.ts b/src/code/styles/dark.ts index e38a866db..6747b74b3 100644 --- a/src/code/styles/dark.ts +++ b/src/code/styles/dark.ts @@ -1,11 +1,11 @@ import { commonDark } from '../../_styles/new-common' import type { ThemeCommonVars } from '../../_styles/new-common' -import type { CodeThemeVars } from './light' +import type { CodeTheme } from './light' -export default { +const codeDark: CodeTheme = { name: 'Code', common: commonDark, - self (vars: ThemeCommonVars): CodeThemeVars { + self (vars) { const { textColor2, fontSize, fontWeightStrong } = vars return { textColor: textColor2, @@ -24,3 +24,5 @@ export default { } } } + +export default codeDark diff --git a/src/code/styles/index.ts b/src/code/styles/index.ts index 6535a2f89..ff766f134 100644 --- a/src/code/styles/index.ts +++ b/src/code/styles/index.ts @@ -1,3 +1,3 @@ export { default as codeDark } from './dark' export { default as codeLight } from './light' -export type { CodeThemeVars } from './light' +export type { CodeThemeVars, CodeTheme } from './light' diff --git a/src/code/styles/light.ts b/src/code/styles/light.ts index 561710ed4..4506f6742 100644 --- a/src/code/styles/light.ts +++ b/src/code/styles/light.ts @@ -1,28 +1,33 @@ import { commonLight } from '../../_styles/new-common' import type { ThemeCommonVars } from '../../_styles/new-common' +import { Theme } from '../../_mixins/use-theme' -const codeLight = { - name: 'Code', - common: commonLight, - self (vars: ThemeCommonVars) { - const { textColor2, fontSize, fontWeightStrong } = vars - return { - textColor: textColor2, - fontSize, - fontWeightStrong, - // extracted from hljs atom-one-light.scss - 'mono-3': '#a0a1a7', - 'hue-1': '#0184bb', - 'hue-2': '#4078f2', - 'hue-3': '#a626a4', - 'hue-4': '#50a14f', - 'hue-5': '#e45649', - 'hue-5-2': '#c91243', - 'hue-6': '#986801', - 'hue-6-2': '#c18401' - } +const self = (vars: ThemeCommonVars) => { + const { textColor2, fontSize, fontWeightStrong } = vars + return { + textColor: textColor2, + fontSize, + fontWeightStrong, + // extracted from hljs atom-one-light.scss + 'mono-3': '#a0a1a7', + 'hue-1': '#0184bb', + 'hue-2': '#4078f2', + 'hue-3': '#a626a4', + 'hue-4': '#50a14f', + 'hue-5': '#e45649', + 'hue-5-2': '#c91243', + 'hue-6': '#986801', + 'hue-6-2': '#c18401' } } +export type CodeThemeVars = ReturnType + +const codeLight: Theme = { + name: 'Code', + common: commonLight, + self +} + export default codeLight -export type CodeThemeVars = ReturnType +export type CodeTheme = typeof codeLight diff --git a/src/collapse/src/Collapse.ts b/src/collapse/src/Collapse.ts index 157a3a9fa..0885e60d3 100644 --- a/src/collapse/src/Collapse.ts +++ b/src/collapse/src/Collapse.ts @@ -9,8 +9,9 @@ import { } from 'vue' import { intersection } from 'lodash-es' import { useTheme } from '../../_mixins' +import type { ThemeProps } from '../../_mixins' import { call, warn } from '../../_utils' -import { collapseLight } from '../styles' +import { collapseLight, CollapseTheme } from '../styles' import type { CollapseThemeVars } from '../styles' import style from './styles/index.cssr' @@ -25,7 +26,7 @@ export interface NCollapseInjection { export default defineComponent({ name: 'Collapse', props: { - ...useTheme.props, + ...(useTheme.props as ThemeProps), expandedNames: { type: [Array, String] as PropType, default: undefined diff --git a/src/collapse/styles/dark.ts b/src/collapse/styles/dark.ts index b848b5776..9dce79a74 100644 --- a/src/collapse/styles/dark.ts +++ b/src/collapse/styles/dark.ts @@ -1,11 +1,10 @@ import { commonDark } from '../../_styles/new-common' -import type { ThemeCommonVars } from '../../_styles/new-common' -import type { CollapseThemeVars } from './light' +import type { CollapseTheme } from './light' -export default { +const collapseDark: CollapseTheme = { name: 'Collapse', common: commonDark, - self (vars: ThemeCommonVars): CollapseThemeVars { + self (vars) { const { fontWeight, textColor1, @@ -24,3 +23,5 @@ export default { } } } + +export default collapseDark diff --git a/src/collapse/styles/index.ts b/src/collapse/styles/index.ts index 16c4aecee..10f9ef222 100644 --- a/src/collapse/styles/index.ts +++ b/src/collapse/styles/index.ts @@ -1,3 +1,3 @@ export { default as collapseDark } from './dark' export { default as collapseLight } from './light' -export type { CollapseThemeVars } from './light' +export type { CollapseThemeVars, CollapseTheme } from './light' diff --git a/src/collapse/styles/light.ts b/src/collapse/styles/light.ts index c0a9543b7..d277a970d 100644 --- a/src/collapse/styles/light.ts +++ b/src/collapse/styles/light.ts @@ -1,28 +1,33 @@ import { commonLight } from '../../_styles/new-common' import type { ThemeCommonVars } from '../../_styles/new-common' +import { Theme } from '../../_mixins/use-theme' -const collapseLight = { - name: 'Collapse', - common: commonLight, - self (vars: ThemeCommonVars) { - const { - fontWeight, - textColor1, - textColor2, - dividerColorOverlay, - fontSize - } = vars - return { - titleFontSize: fontSize, - titleFontWeight: fontWeight, - dividerColor: dividerColorOverlay, - titleTextColor: textColor1, - fontSize: fontSize, - textColor: textColor2, - arrowColor: textColor2 - } +const self = (vars: ThemeCommonVars) => { + const { + fontWeight, + textColor1, + textColor2, + dividerColorOverlay, + fontSize + } = vars + return { + titleFontSize: fontSize, + titleFontWeight: fontWeight, + dividerColor: dividerColorOverlay, + titleTextColor: textColor1, + fontSize: fontSize, + textColor: textColor2, + arrowColor: textColor2 } } +export type CollapseThemeVars = ReturnType + +const collapseLight: Theme = { + name: 'Collapse', + common: commonLight, + self +} + export default collapseLight -export type CollapseThemeVars = ReturnType +export type CollapseTheme = typeof collapseLight diff --git a/src/dropdown/src/Dropdown.ts b/src/dropdown/src/Dropdown.ts index a76d69c8e..13698cd42 100644 --- a/src/dropdown/src/Dropdown.ts +++ b/src/dropdown/src/Dropdown.ts @@ -12,10 +12,11 @@ import { import { RawNode, TreeMate, Key } from 'treemate' import { useMergedState, useKeyboard, useMemo } from 'vooks' import { useTheme } from '../../_mixins' +import type { ThemeProps } from '../../_mixins' import { NPopover, popoverProps } from '../../popover' import { keep, call, createKey } from '../../_utils' import { dropdownLight } from '../styles' -import type { DropdownThemeVars } from '../styles' +import type { DropdownTheme } from '../styles' import NDropdownMenu from './DropdownMenu' import style from './styles/index.cssr' @@ -92,7 +93,7 @@ export default defineComponent({ props: { ...popoverProps, ...dropdownProps, - ...useTheme.createProps() + ...(useTheme.props as ThemeProps) }, setup (props) { const uncontrolledShowRef = ref(false) diff --git a/src/dropdown/styles/dark.ts b/src/dropdown/styles/dark.ts index 01246b19e..138d0660e 100644 --- a/src/dropdown/styles/dark.ts +++ b/src/dropdown/styles/dark.ts @@ -1,12 +1,15 @@ import { commonDark } from '../../_styles/new-common' -import type { ThemeCommonVars } from '../../_styles/new-common' -import type { DropdownThemeVars } from './light' +import { popoverDark } from '../../popover/styles' +import type { DropdownTheme } from './light' import commonVariables from './_common' -export default { +const dropdownDark: DropdownTheme = { name: 'Dropdown', common: commonDark, - self (vars: ThemeCommonVars): DropdownThemeVars { + peers: { + NPopover: popoverDark + }, + self (vars) { const { primaryColor, textColor2, @@ -48,3 +51,5 @@ export default { } } } + +export default dropdownDark diff --git a/src/dropdown/styles/index.ts b/src/dropdown/styles/index.ts index 7c442b8dc..83c10a4b9 100644 --- a/src/dropdown/styles/index.ts +++ b/src/dropdown/styles/index.ts @@ -1,3 +1,3 @@ export { default as dropdownDark } from './dark' export { default as dropdownLight } from './light' -export type { DropdownThemeVars } from './light' +export type { DropdownThemeVars, DropdownTheme } from './light' diff --git a/src/dropdown/styles/light.ts b/src/dropdown/styles/light.ts index ce1e19525..035588769 100644 --- a/src/dropdown/styles/light.ts +++ b/src/dropdown/styles/light.ts @@ -1,52 +1,67 @@ import { commonLight } from '../../_styles/new-common' import type { ThemeCommonVars } from '../../_styles/new-common' +import type { Theme } from '../../_mixins/use-theme' import commonVariables from './_common' +import { popoverLight } from '../../popover/styles' +import type { PopoverTheme } from '../../popover/styles' -const dropdownLight = { - name: 'Dropdown', - common: commonLight, - self (vars: ThemeCommonVars) { - const { - primaryColor, - textColor2, - boxShadow2, - dividerColor, - hoverColorOverlay, - popoverColor, - borderRadius, - fontSizeSmall, - fontSizeMedium, - fontSizeLarge, - fontSizeHuge, - heightSmall, - heightMedium, - heightLarge, - heightHuge, - textColor3 - } = vars - return { - ...commonVariables, - optionHeightSmall: heightSmall, - optionHeightMedium: heightMedium, - optionHeightLarge: heightLarge, - optionHeightHuge: heightHuge, - optionTextColor: textColor2, - optionTextColorActive: primaryColor, - color: popoverColor, - dividerColor, - borderRadius, - boxShadow: boxShadow2, - suffixColor: textColor2, - prefixColor: textColor2, - optionColorHover: hoverColorOverlay, - groupHeaderTextColor: textColor3, - fontSizeSmall, - fontSizeMedium, - fontSizeLarge, - fontSizeHuge - } +const self = (vars: ThemeCommonVars) => { + const { + primaryColor, + textColor2, + boxShadow2, + dividerColor, + hoverColorOverlay, + popoverColor, + borderRadius, + fontSizeSmall, + fontSizeMedium, + fontSizeLarge, + fontSizeHuge, + heightSmall, + heightMedium, + heightLarge, + heightHuge, + textColor3 + } = vars + return { + ...commonVariables, + optionHeightSmall: heightSmall, + optionHeightMedium: heightMedium, + optionHeightLarge: heightLarge, + optionHeightHuge: heightHuge, + optionTextColor: textColor2, + optionTextColorActive: primaryColor, + color: popoverColor, + dividerColor, + borderRadius, + boxShadow: boxShadow2, + suffixColor: textColor2, + prefixColor: textColor2, + optionColorHover: hoverColorOverlay, + groupHeaderTextColor: textColor3, + fontSizeSmall, + fontSizeMedium, + fontSizeLarge, + fontSizeHuge } } +export type DropdownThemeVars = ReturnType + +const dropdownLight: Theme< + DropdownThemeVars, + { + NPopover: PopoverTheme + } +> = { + name: 'Dropdown', + common: commonLight, + peers: { + NPopover: popoverLight + }, + self +} + +export type DropdownTheme = typeof dropdownLight export default dropdownLight -export type DropdownThemeVars = ReturnType diff --git a/src/menu/src/Menu.ts b/src/menu/src/Menu.ts index 913f5f23c..bb0bc5263 100644 --- a/src/menu/src/Menu.ts +++ b/src/menu/src/Menu.ts @@ -11,17 +11,18 @@ import { import { createTreeMate, Key, RawNode } from 'treemate' import { useCompitable, useMergedState } from 'vooks' import { useTheme } from '../../_mixins' +import type { ThemeProps } from '../../_mixins' import { call, warn } from '../../_utils' import { itemRenderer } from './utils' import { menuLight } from '../styles' -import type { MenuThemeVars } from '../styles' +import type { MenuTheme } from '../styles' import { MenuInjection } from './use-menu-child' import style from './styles/index.cssr' export default defineComponent({ name: 'Menu', props: { - ...useTheme.createProps(), + ...(useTheme.props as ThemeProps), items: { type: Array as PropType, required: true diff --git a/src/menu/styles/dark.ts b/src/menu/styles/dark.ts index 176bb4a2e..4e92e3b9d 100644 --- a/src/menu/styles/dark.ts +++ b/src/menu/styles/dark.ts @@ -1,16 +1,15 @@ import { changeColor } from 'seemly' import { tooltipDark } from '../../tooltip/styles' import { commonDark } from '../../_styles/new-common' -import type { ThemeCommonVars } from '../../_styles/new-common' -import type { MenuThemeVars } from './light' +import type { MenuTheme } from './light' -export default { +const menuDark: MenuTheme = { name: 'Menu', common: commonDark, peers: { Tooltip: tooltipDark }, - self (vars: ThemeCommonVars): MenuThemeVars { + self (vars) { const { borderRadius, textColor3Overlay, @@ -39,3 +38,5 @@ export default { } } } + +export default menuDark diff --git a/src/menu/styles/index.ts b/src/menu/styles/index.ts index ce9684c4d..676ad84da 100644 --- a/src/menu/styles/index.ts +++ b/src/menu/styles/index.ts @@ -1,3 +1,3 @@ export { default as menuDark } from './dark' export { default as menuLight } from './light' -export type { MenuThemeVars } from './light' +export type { MenuThemeVars, MenuTheme } from './light' diff --git a/src/menu/styles/light.ts b/src/menu/styles/light.ts index 6561e23da..4b3bfda5b 100644 --- a/src/menu/styles/light.ts +++ b/src/menu/styles/light.ts @@ -2,43 +2,47 @@ import { changeColor } from 'seemly' import { tooltipLight } from '../../tooltip/styles' import { commonLight } from '../../_styles/new-common' import type { ThemeCommonVars } from '../../_styles/new-common' +import { Theme } from '../../_mixins/use-theme' -const menuLight = { +const self = (vars: ThemeCommonVars) => { + const { + borderRadius, + textColor3, + primaryColor, + textColor2, + primaryColorHover, + textColor1, + fontSize + } = vars + return { + borderRadius: borderRadius, + groupTextColor: textColor3, + itemColorActive: changeColor(primaryColor, { alpha: 0.1 }), + itemTextColor: textColor2, + itemTextColorHover: primaryColorHover, + itemTextColorChildActive: primaryColor, + itemTextColorActive: primaryColor, + itemIconColor: textColor1, + itemIconColorHover: primaryColorHover, + itemIconColorActive: primaryColor, + itemIconColorChildActive: primaryColor, + itemIconColorCollapsed: textColor1, + borderColorHorizontal: 'transparent', + arrowColor: primaryColor, + fontSize + } +} + +export type MenuThemeVars = ReturnType + +const menuLight: Theme = { name: 'Menu', common: commonLight, peers: { Tooltip: tooltipLight }, - self (vars: ThemeCommonVars) { - const { - borderRadius, - textColor3, - primaryColor, - textColor2, - primaryColorHover, - textColor1, - fontSize - } = vars - return { - borderRadius: borderRadius, - groupTextColor: textColor3, - itemColorActive: changeColor(primaryColor, { alpha: 0.1 }), - itemTextColor: textColor2, - itemTextColorHover: primaryColorHover, - itemTextColorChildActive: primaryColor, - itemTextColorActive: primaryColor, - itemIconColor: textColor1, - itemIconColorHover: primaryColorHover, - itemIconColorActive: primaryColor, - itemIconColorChildActive: primaryColor, - itemIconColorCollapsed: textColor1, - borderColorHorizontal: 'transparent', - arrowColor: primaryColor, - fontSize - } - } + self } export default menuLight - -export type MenuThemeVars = ReturnType +export type MenuTheme = typeof menuLight diff --git a/src/popover/src/Popover.ts b/src/popover/src/Popover.ts index f6538fadb..211c35681 100644 --- a/src/popover/src/Popover.ts +++ b/src/popover/src/Popover.ts @@ -14,8 +14,9 @@ import { VBinder, VTarget, FollowerPlacement } from 'vueuc' import { useMergedState, useCompitable, useIsMounted, useMemo } from 'vooks' import { call, keep, warn } from '../../_utils' import { useTheme } from '../../_mixins' +import type { ThemeProps } from '../../_mixins' import NPopoverBody, { popoverBodyProps } from './PopoverBody' -import type { PopoverThemeVars } from '../styles' +import type { PopoverTheme } from '../styles' const bodyPropKeys = Object.keys( popoverBodyProps @@ -74,7 +75,7 @@ export interface PopoverInjection { } export const popoverProps = { - ...useTheme.createProps(), + ...(useTheme.props as ThemeProps), show: { type: Boolean, default: undefined diff --git a/src/popover/src/PopoverBody.ts b/src/popover/src/PopoverBody.ts index f16d888cd..41750555a 100644 --- a/src/popover/src/PopoverBody.ts +++ b/src/popover/src/PopoverBody.ts @@ -17,14 +17,15 @@ import { import { VFollower, FollowerPlacement, FollowerRef } from 'vueuc' import { clickoutside, mousemoveoutside } from 'vdirs' import { useTheme, useConfig } from '../../_mixins' +import type { ThemeProps } from '../../_mixins' import { formatLength, useAdjustedTo, getSlot } from '../../_utils' import { popoverLight } from '../styles' +import type { PopoverTheme } from '../styles' import style from './styles/index.cssr' -import { PopoverThemeVars } from '../styles/light' -import { PopoverInjection } from './Popover' +import type { PopoverInjection } from './Popover' export const popoverBodyProps = { - ...useTheme.createProps(), + ...(useTheme.props as ThemeProps), show: { type: Boolean, default: undefined diff --git a/src/popover/styles/dark.ts b/src/popover/styles/dark.ts index 2dc010141..3d3deea4c 100644 --- a/src/popover/styles/dark.ts +++ b/src/popover/styles/dark.ts @@ -1,12 +1,11 @@ import { commonDark } from '../../_styles/new-common' -import type { ThemeCommonVars } from '../../_styles/new-common' import commonVariables from './_common' -import { PopoverThemeVars } from './light' +import type { PopoverTheme } from './light' -export default { +const popoverDark: PopoverTheme = { name: 'Popover', common: commonDark, - self (vars: ThemeCommonVars): PopoverThemeVars { + self (vars) { const { popoverColor, textColor2Overlay, @@ -24,3 +23,5 @@ export default { } } } + +export default popoverDark diff --git a/src/popover/styles/index.ts b/src/popover/styles/index.ts index 6dad2522a..8d5ae60a3 100644 --- a/src/popover/styles/index.ts +++ b/src/popover/styles/index.ts @@ -1,3 +1,3 @@ export { default as popoverDark } from './dark' export { default as popoverLight } from './light' -export type { PopoverThemeVars } from './light' +export type { PopoverThemeVars, PopoverTheme } from './light' diff --git a/src/popover/styles/light.ts b/src/popover/styles/light.ts index 838afab9c..6c3789c61 100644 --- a/src/popover/styles/light.ts +++ b/src/popover/styles/light.ts @@ -1,29 +1,27 @@ import { commonLight } from '../../_styles/new-common' import type { ThemeCommonVars } from '../../_styles/new-common' +import type { Theme } from '../../_mixins/use-theme' import commonVariables from './_common' -const popoverLight = { - name: 'Popover', - common: commonLight, - self (vars: ThemeCommonVars) { - const { - boxShadow2, - popoverColor, - textColor2, - borderRadius, - fontSize - } = vars - return { - ...commonVariables, - fontSize, - borderRadius, - color: popoverColor, - textColor: textColor2, - boxShadow: boxShadow2 - } +const self = (vars: ThemeCommonVars) => { + const { boxShadow2, popoverColor, textColor2, borderRadius, fontSize } = vars + return { + ...commonVariables, + fontSize, + borderRadius, + color: popoverColor, + textColor: textColor2, + boxShadow: boxShadow2 } } -export default popoverLight +export type PopoverThemeVars = ReturnType -export type PopoverThemeVars = ReturnType +const popoverLight: Theme = { + name: 'Popover', + common: commonLight, + self +} + +export type PopoverTheme = typeof popoverLight +export default popoverLight diff --git a/src/tree/src/Tree.ts b/src/tree/src/Tree.ts index 6bf0c3984..e8e5a5401 100644 --- a/src/tree/src/Tree.ts +++ b/src/tree/src/Tree.ts @@ -12,10 +12,10 @@ import { import { createTreeMate, Key, KeyedRawNode, TreeNode } from 'treemate' import { useMergedState } from 'vooks' import { useTheme } from '../../_mixins' -import type { MergedTheme } from '../../_mixins/use-theme' +import type { ThemeProps, MergedTheme } from '../../_mixins' import { call, warn } from '../../_utils' import { treeLight } from '../styles' -import type { TreeThemeVars } from '../styles' +import type { TreeThemeVars, TreeTheme } from '../styles' import NTreeNode from './TreeNode' import { keysWithFilter } from './utils' import style from './styles/index.cssr' @@ -56,7 +56,7 @@ export interface TreeInjection { export default defineComponent({ name: 'Tree', props: { - ...useTheme.createProps(), + ...(useTheme.props as ThemeProps), data: { type: Array as PropType, required: true diff --git a/src/tree/styles/dark.ts b/src/tree/styles/dark.ts index 8fc310ab3..32c9cbc5f 100644 --- a/src/tree/styles/dark.ts +++ b/src/tree/styles/dark.ts @@ -1,16 +1,15 @@ import { changeColor } from 'seemly' import { checkboxDark } from '../../checkbox/styles' import { commonDark } from '../../_styles/new-common' -import type { ThemeCommonVars } from '../../_styles/new-common' -import type { TreeThemeVars } from './light' +import type { TreeTheme } from './light' -export default { +const treeDark: TreeTheme = { name: 'Tree', common: commonDark, peers: { Checkbox: checkboxDark }, - self (vars: ThemeCommonVars): TreeThemeVars { + self (vars) { const { borderRadiusSmall, hoverColorOverlay, @@ -34,3 +33,5 @@ export default { } } } + +export default treeDark diff --git a/src/tree/styles/index.ts b/src/tree/styles/index.ts index 7e7d63a54..08ebed374 100644 --- a/src/tree/styles/index.ts +++ b/src/tree/styles/index.ts @@ -1,3 +1,3 @@ export { default as treeDark } from './dark' export { default as treeLight } from './light' -export type { TreeThemeVars } from './light' +export type { TreeThemeVars, TreeTheme } from './light' diff --git a/src/tree/styles/light.ts b/src/tree/styles/light.ts index 9d9c7f7ef..54c13ebe5 100644 --- a/src/tree/styles/light.ts +++ b/src/tree/styles/light.ts @@ -2,37 +2,42 @@ import { changeColor } from 'seemly' import { checkboxLight } from '../../checkbox/styles' import { commonLight } from '../../_styles/new-common' import type { ThemeCommonVars } from '../../_styles/new-common' +import { Theme } from '../../_mixins/use-theme' -const treeLight = { +const self = (vars: ThemeCommonVars) => { + const { + borderRadiusSmall, + hoverColorOverlay, + activeColorOverlay, + primaryColor, + textColor3, + textColor2, + textColorDisabled, + fontSize + } = vars + return { + fontSize, + nodeBorderRadius: borderRadiusSmall, + nodeColorHover: hoverColorOverlay, + nodeColorPressed: activeColorOverlay, + nodeColorActive: changeColor(primaryColor, { alpha: 0.1 }), + arrowColor: textColor3, + nodeTextColor: textColor2, + nodeTextColorDisabled: textColorDisabled, + loadingColor: primaryColor + } +} + +export type TreeThemeVars = ReturnType + +const treeLight: Theme = { name: 'Tree', common: commonLight, peers: { Checkbox: checkboxLight }, - self (vars: ThemeCommonVars) { - const { - borderRadiusSmall, - hoverColorOverlay, - activeColorOverlay, - primaryColor, - textColor3, - textColor2, - textColorDisabled, - fontSize - } = vars - return { - fontSize, - nodeBorderRadius: borderRadiusSmall, - nodeColorHover: hoverColorOverlay, - nodeColorPressed: activeColorOverlay, - nodeColorActive: changeColor(primaryColor, { alpha: 0.1 }), - arrowColor: textColor3, - nodeTextColor: textColor2, - nodeTextColorDisabled: textColorDisabled, - loadingColor: primaryColor - } - } + self } export default treeLight -export type TreeThemeVars = ReturnType +export type TreeTheme = typeof treeLight diff --git a/src/version.js b/src/version.js deleted file mode 100644 index a6f83ab4a..000000000 --- a/src/version.js +++ /dev/null @@ -1 +0,0 @@ -export default '2.0.0-beta.1'