From 41d62c15b97f48b2e68089e0d942ea11f8c9d09f Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Sun, 3 Jan 2021 00:16:06 +0800 Subject: [PATCH] refactor(dialog): new theme --- src/dialog/src/Dialog.vue | 80 +++++++++-- src/dialog/src/DialogEnvironment.vue | 5 +- src/dialog/src/DialogProvider.js | 18 +-- src/dialog/src/styles/index.cssr.js | 124 +++++++++++++++++ src/dialog/src/styles/index.js | 9 -- src/dialog/src/styles/themed-base.cssr.js | 158 ---------------------- src/dialog/styles/_common.js | 2 +- src/dialog/styles/dark.js | 20 +-- src/dialog/styles/light.js | 20 +-- src/styles.js | 2 +- src/styles.new.js | 4 +- 11 files changed, 233 insertions(+), 209 deletions(-) create mode 100644 src/dialog/src/styles/index.cssr.js delete mode 100644 src/dialog/src/styles/index.js delete mode 100644 src/dialog/src/styles/themed-base.cssr.js diff --git a/src/dialog/src/Dialog.vue b/src/dialog/src/Dialog.vue index d26377b78..1b65f81a4 100644 --- a/src/dialog/src/Dialog.vue +++ b/src/dialog/src/Dialog.vue @@ -2,12 +2,11 @@
@@ -46,7 +45,7 @@ diff --git a/src/dialog/src/DialogEnvironment.vue b/src/dialog/src/DialogEnvironment.vue index 88bb091b1..7b187e6b7 100644 --- a/src/dialog/src/DialogEnvironment.vue +++ b/src/dialog/src/DialogEnvironment.vue @@ -28,10 +28,11 @@ diff --git a/src/dialog/src/DialogProvider.js b/src/dialog/src/DialogProvider.js index 562acc066..267a8e1ec 100644 --- a/src/dialog/src/DialogProvider.js +++ b/src/dialog/src/DialogProvider.js @@ -1,17 +1,11 @@ -import { Fragment, ref, h, reactive } from 'vue' +import { defineComponent, Fragment, ref, h, reactive } from 'vue' import { createId } from 'seemly' import { omit } from '../../_utils' import DialogEnvironment from './DialogEnvironment.vue' import { useClicked, useClickPosition } from 'vooks' -export default { +export default defineComponent({ name: 'DialogProvider', - props: { - to: { - type: [String, Object], - default: undefined - } - }, provide () { return { dialog: { @@ -23,6 +17,12 @@ export default { } } }, + props: { + to: { + type: [String, Object], + default: undefined + } + }, setup () { const dialogListRef = ref([]) return { @@ -75,4 +75,4 @@ export default { this.$slots.default() ]) } -} +}) diff --git a/src/dialog/src/styles/index.cssr.js b/src/dialog/src/styles/index.cssr.js new file mode 100644 index 000000000..1892ece37 --- /dev/null +++ b/src/dialog/src/styles/index.cssr.js @@ -0,0 +1,124 @@ +import { c, cB, cE, cM, insideModal } from '../../../_utils/cssr' + +// vars: +// --icon-color +// --bezier +// --close-margin +// --icon-margin +// --icon-size +// --close-size +// --close-color +// --close-color-hover +// --close-color-pressed +// --color +// --text-color +// --border-radius +// --padding +// --line-height +// --border +// --content-margin +// --title-font-size +// --title-font-weight +// --title-text-color +// --action-space +export default c([ + cB( + 'dialog', ` + line-height: var(--line-height); + position: relative; + background: var(--color); + color: var(--text-color); + box-sizing: border-box; + margin: auto; + border-radius: var(--border-radius); + padding: var(--padding); + transition: + border-color .3s var(--bezier), + background-color .3s var(--bezier), + color .3s var(--bezier); + `, + [ + cE('icon', { + color: 'var(--icon-color)' + }), + cM('bordered', { + border: 'var(--border)' + }), + cM('icon-top', [ + cE('close', { + margin: 'var(--close-margin)' + }), + cE('icon', { + margin: 'var(--icon-margin)' + }), + cE('content', { + textAlign: 'center' + }), + cE('title', { + justifyContent: 'center' + }), + cE('action', { + justifyContent: 'center' + }) + ]), + cM('icon-left', [ + cE('icon', { + margin: 'var(--icon-margin)' + }) + ]), + cE('close', ` + font-size: var(--close-size); + cursor: pointer; + position: absolute; + right: 0; + top: 0; + color: var(--close-color); + margin: var(--close-margin); + transition: .3s color var(--bezier); + `, + [ + c('&:hover', { + color: 'var(--close-color-hover)' + }), + c('&:active', { + color: 'var(--close-color-pressed)' + }) + ]), + cE('content', ` + font-size: var(--font-size); + margin: var(--content-margin); + position: relative; + `), + cE('action', ` + display: flex; + justify-content: flex-end; + `, [ + c('> *:not(:last-child)', { + marginRight: 'var(--action-space)' + }) + ]), + cE('icon', { + fontSize: 'var(--icon-size)', + transition: 'color .3s var(--bezier)' + }), + cE('title', ` + transition: color .3s var(--bezier); + display: flex; + align-items: center; + font-size: var(--title-font-size); + font-weight: var(--title-font-weight); + color: var(--title-text-color); + `), + cB('dialog-icon-container', { + display: 'flex', + justifyContent: 'center' + }) + ] + ), + insideModal( + cB('dialog', ` + width: 446px; + max-width: calc(100vw - 32px); + `) + ) +]) diff --git a/src/dialog/src/styles/index.js b/src/dialog/src/styles/index.js deleted file mode 100644 index fd9338f5d..000000000 --- a/src/dialog/src/styles/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import baseStyle from './themed-base.cssr.js' - -export default [ - { - key: 'mergedTheme', - watch: ['mergedTheme'], - CNode: baseStyle - } -] diff --git a/src/dialog/src/styles/themed-base.cssr.js b/src/dialog/src/styles/themed-base.cssr.js deleted file mode 100644 index e9cb887c2..000000000 --- a/src/dialog/src/styles/themed-base.cssr.js +++ /dev/null @@ -1,158 +0,0 @@ -import { c, cTB, cB, cE, cM, createKey } from '../../../_utils/cssr' - -export default c([ - ({ props }) => { - const { - $global: { - cubicBezierEaseInOut - }, - $local - } = props - const { - actionSpace, - contentMargin, - iconSize, - iconMargin, - iconMarginIconTop, - padding, - headerTextColor, - textColor, - color, - border, - borderRadius, - headerFontWeight, - headerFontSize, - closeSize, - closeMargin, - closeMarginIconTop, - closeColor, - closeColorHover, - closeColorPressed, - fontSize, - lineHeight - } = $local - const dialogStyle = cTB( - 'dialog', - { - raw: ` - line-height: ${lineHeight}; - position: relative; - background: ${color}; - color: ${textColor}; - box-sizing: border-box; - margin: auto; - border-radius: ${borderRadius}; - padding: ${padding}; - transition: - border-color .3s ${cubicBezierEaseInOut}, - background-color .3s ${cubicBezierEaseInOut}, - color .3s ${cubicBezierEaseInOut}; - ` - }, - [ - [ - 'info', - 'success', - 'warning', - 'error' - ].map(type => cM(`${type}-type`, [ - cE('icon', { - color: $local[createKey('iconColor', type)] - }) - ])), - cM('bordered', { - border - }), - cM('icon-top', [ - cE('close', { - margin: closeMarginIconTop - }), - cE('icon', { - margin: iconMarginIconTop - }), - cE('content', { - textAlign: 'center' - }), - cE('title', { - justifyContent: 'center' - }), - cE('action', { - justifyContent: 'center' - }) - ]), - cM('icon-left', [ - cE('icon', { - margin: iconMargin - }) - ]), - cE('close', { - raw: ` - font-size: ${closeSize}; - margin: ${padding}; - cursor: pointer; - position: absolute; - right: 0; - top: 0; - color: ${closeColor}; - margin: ${closeMargin}; - transition: .3s color ${cubicBezierEaseInOut}; - ` - }, - [ - c('&:hover', { - color: closeColorHover - }), - c('&:active', { - color: closeColorPressed - }) - ]), - cE('content', { - raw: ` - font-size: ${fontSize}; - margin: ${contentMargin}; - position: relative; - ` - }), - cE('action', { - raw: ` - display: flex; - justify-content: flex-end; - ` - }, [ - c('> *:not(:last-child)', { - marginRight: actionSpace - }) - ]), - cE('icon', { - fontSize: iconSize, - transition: `color .3s ${cubicBezierEaseInOut}` - }), - cE('title', { - raw: ` - transition: color .3s ${cubicBezierEaseInOut}; - display: flex; - align-items: center; - font-size: ${headerFontSize}; - font-weight: ${headerFontWeight}; - color: ${headerTextColor} - ` - }), - cB('dialog-icon-container', { - display: 'flex', - justifyContent: 'center' - }) - ] - ) - return [ - dialogStyle, - cB('modal', [ - cB('dialog', { - raw: ` - width: 446px; - max-width: calc(100vw - 32px); - ` - }) - ]) - ] - } -]) diff --git a/src/dialog/styles/_common.js b/src/dialog/styles/_common.js index 9fe0addc6..65a78f63c 100644 --- a/src/dialog/styles/_common.js +++ b/src/dialog/styles/_common.js @@ -1,5 +1,5 @@ export default { - headerFontSize: '18px', + titleFontSize: '18px', padding: '16px 28px 20px 28px', iconSize: '28px', actionSpace: '12px', diff --git a/src/dialog/styles/dark.js b/src/dialog/styles/dark.js index 3ae9aedfa..e476987d1 100644 --- a/src/dialog/styles/dark.js +++ b/src/dialog/styles/dark.js @@ -1,14 +1,16 @@ -import create from '../../_styles/utils/create-component-base' import commonVars from './_common' -import { baseDark } from '../../_styles/base' import { iconDark } from '../../icon/styles' import { buttonDark } from '../../button/styles' +import { commonDark } from '../../_styles/new-common' -export default create({ - theme: 'dark', +export default { name: 'Dialog', - peer: [baseDark, iconDark, buttonDark], - getLocalVars (vars) { + common: commonDark, + peers: { + Icon: iconDark, + Button: buttonDark + }, + self (vars) { const { textColor1Overlay, textColor2Overlay, @@ -31,7 +33,7 @@ export default create({ fontSize, lineHeight, border: `1px solid ${dividerColorOverlay}`, - headerTextColor: textColor1Overlay, + titleTextColor: textColor1Overlay, textColor: textColor2Overlay, color: modalColor, closeColor: closeColorOverlay, @@ -42,7 +44,7 @@ export default create({ iconColorWarning: warningColor, iconColorError: errorColor, borderRadius, - headerFontWeight: fontWeightStrong + titleFontWeight: fontWeightStrong } } -}) +} diff --git a/src/dialog/styles/light.js b/src/dialog/styles/light.js index a435a2353..ddc15f582 100644 --- a/src/dialog/styles/light.js +++ b/src/dialog/styles/light.js @@ -1,14 +1,16 @@ -import create from '../../_styles/utils/create-component-base' import commonVars from './_common' -import { baseLight } from '../../_styles/base' import { iconLight } from '../../icon/styles' import { buttonLight } from '../../button/styles' +import { commonLight } from '../../_styles/new-common' -export default create({ - theme: 'light', +export default { name: 'Dialog', - peer: [baseLight, iconLight, buttonLight], - getLocalVars (vars) { + common: commonLight, + peers: { + Icon: iconLight, + Button: buttonLight + }, + self (vars) { const { textColor1, textColor2, @@ -31,7 +33,7 @@ export default create({ fontSize, lineHeight, border: `1px solid ${dividerColor}`, - headerTextColor: textColor1, + titleTextColor: textColor1, textColor: textColor2, color: cardColor, closeColor: closeColor, @@ -42,7 +44,7 @@ export default create({ iconColorWarning: warningColor, iconColorError: errorColor, borderRadius, - headerFontWeight: fontWeightStrong + titleFontWeight: fontWeightStrong } } -}) +} diff --git a/src/styles.js b/src/styles.js index c0b664be6..e7c1ee196 100644 --- a/src/styles.js +++ b/src/styles.js @@ -34,7 +34,7 @@ export { baseDark, baseLight } from './_styles/base' // export { dataTableDark, dataTableLight } from './data-table/styles' // export { datePickerDark, datePickerLight } from './date-picker/styles' // export { descriptionsDark, descriptionsLight } from './descriptions/styles' -export { dialogDark, dialogLight } from './dialog/styles' +// export { dialogDark, dialogLight } from './dialog/styles' // export { dividerDark, dividerLight } from './divider/styles' export { drawerDark, drawerLight } from './drawer/styles' export { dropdownDark, dropdownLight } from './dropdown/styles' diff --git a/src/styles.new.js b/src/styles.new.js index 17b5dbbce..25805be63 100644 --- a/src/styles.new.js +++ b/src/styles.new.js @@ -9,7 +9,6 @@ import { badgeDark } from './badge/styles' import { breadcrumbDark } from './breadcrumb/styles' import { buttonDark } from './button/styles' import { cardDark } from './card/styles' -import { dividerDark } from './divider/styles' import { cascaderDark } from './cascader/styles' import { checkboxDark } from './checkbox/styles' import { codeDark } from './code/styles' @@ -17,6 +16,8 @@ import { collapseDark } from './collapse/styles' import { dataTableDark } from './data-table/styles' import { datePickerDark } from './date-picker/styles' import { descriptionsDark } from './descriptions/styles' +import { dialogDark } from './dialog/styles' +import { dividerDark } from './divider/styles' export const darkTheme = { common: commonDark, @@ -37,5 +38,6 @@ export const darkTheme = { DataTable: dataTableDark, DatePicker: datePickerDark, Descriptions: descriptionsDark, + Dialog: dialogDark, Divider: dividerDark }