diff --git a/src/progress/demos/enUS/index.demo-entry.md b/src/progress/demos/enUS/index.demo-entry.md index 13d8225a050..907e7847a9a 100644 --- a/src/progress/demos/enUS/index.demo-entry.md +++ b/src/progress/demos/enUS/index.demo-entry.md @@ -16,6 +16,7 @@ no-indicator.vue height.vue processing.vue gradient.vue +rtl-debug.vue ``` ## API diff --git a/src/progress/demos/enUS/rtl-debug.demo.vue b/src/progress/demos/enUS/rtl-debug.demo.vue new file mode 100644 index 00000000000..3687b719d25 --- /dev/null +++ b/src/progress/demos/enUS/rtl-debug.demo.vue @@ -0,0 +1,92 @@ + +# RTL Debug + + + + + diff --git a/src/progress/src/Progress.tsx b/src/progress/src/Progress.tsx index 500c77e06b2..ad268f07f94 100644 --- a/src/progress/src/Progress.tsx +++ b/src/progress/src/Progress.tsx @@ -8,7 +8,7 @@ import { h, type PropType } from 'vue' -import { useConfig, useTheme, useThemeClass } from '../../_mixins' +import { useConfig, useRtl, useTheme, useThemeClass } from '../../_mixins' import { createKey, type ExtractPublicPropTypes } from '../../_utils' import { progressLight } from '../styles' import Circle from './Circle' @@ -92,7 +92,8 @@ export default defineComponent({ } return undefined }) - const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props) + const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } + = useConfig(props) const themeRef = useTheme( 'Progress', '-progress', @@ -138,6 +139,7 @@ export default defineComponent({ '--n-text-color-line-outer': textColorLineOuter } }) + const rtlEnabledRef = useRtl('Progress', mergedRtlRef, mergedClsPrefixRef) const themeClassHandle = inlineThemeDisabled ? useThemeClass( 'progress', @@ -152,7 +154,8 @@ export default defineComponent({ gapDeg, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle?.themeClass, - onRender: themeClassHandle?.onRender + onRender: themeClassHandle?.onRender, + rtlEnabled: rtlEnabledRef } }, render() { @@ -181,7 +184,8 @@ export default defineComponent({ gapOffsetDegree, themeClass, $slots, - onRender + onRender, + rtlEnabled } = this onRender?.() return ( @@ -190,7 +194,8 @@ export default defineComponent({ themeClass, `${mergedClsPrefix}-progress`, `${mergedClsPrefix}-progress--${type}`, - `${mergedClsPrefix}-progress--${status}` + `${mergedClsPrefix}-progress--${status}`, + rtlEnabled && `${mergedClsPrefix}-progress--rtl` ]} style={cssVars as CSSProperties} aria-valuemax={100} diff --git a/src/progress/src/styles/rtl.cssr.ts b/src/progress/src/styles/rtl.cssr.ts new file mode 100644 index 00000000000..d81fa1d1328 --- /dev/null +++ b/src/progress/src/styles/rtl.cssr.ts @@ -0,0 +1,103 @@ +import { c, cB, cM } from '../../../_utils/cssr' + +export default c([ + cB('progress', [ + cM('rtl', ` + direction: rtl; + `, [ + cM('line', [ + cB('progress-content', [ + cB('progress-graph', [ + cB('progress-graph-line', [ + cB('progress-graph-line-rail', [ + cB('progress-graph-line-fill', ` + transform-origin: right center; + `, [ + cM('processing', [ + c('&::after', ` + content: ""; + background-image: var(--n-line-bg-processing); + animation: progress-processing-animation-rtl 2s var(--n-bezier) infinite; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 100%; + `) + ]) + ]) + ]) + ]) + ]) + ]) + ]), + cB('progress-custom-content', { + marginLeft: 0, + marginRight: '14px' + }), + cB('progress-icon', ` + padding-left: 0; + `, [ + cM('as-text', ` + padding-left: 0; + padding-right: 4px; + `) + ]) + ]), + cM('circle, dashboard', [ + cB('progress-graph', [ + cB('progress-graph-circle', ` + transform: scaleX(-1); + `) + ]), + cB('progress-text', ` + direction: ltr; + `), + cB('progress-custom-content', ` + direction: ltr; + `), + cB('progress-icon', ` + direction: ltr; + `) + ]), + cM('multiple-circle', [ + cB('progress-graph', [ + cB('progress-graph-circle', ` + transform: scaleX(-1); + `) + ]), + cB('progress-text', ` + direction: ltr; + `), + cB('progress-custom-content', ` + direction: ltr; + `) + ]) + ]), + c('@keyframes progress-processing-animation-rtl', ` + 0% { + position: absolute; + right: 0; + top: 0; + bottom: 0; + left: 100%; + opacity: 1; + } + 66% { + position: absolute; + right: 0; + top: 0; + bottom: 0; + left: 0; + opacity: 0; + } + 100% { + position: absolute; + right: 0; + top: 0; + bottom: 0; + left: 0; + opacity: 0; + } + `) +]) diff --git a/src/progress/styles/index.ts b/src/progress/styles/index.ts index 3dcc3d3c30d..3b9d95eaa34 100644 --- a/src/progress/styles/index.ts +++ b/src/progress/styles/index.ts @@ -1,3 +1,4 @@ export { default as progressDark } from './dark' export { default as progressLight } from './light' export type { ProgressTheme, ProgressThemeVars } from './light' +export { progressRtl } from './rtl' diff --git a/src/progress/styles/rtl.ts b/src/progress/styles/rtl.ts new file mode 100644 index 00000000000..dcb28098d00 --- /dev/null +++ b/src/progress/styles/rtl.ts @@ -0,0 +1,8 @@ +import type { RtlItem } from '../../config-provider/src/internal-interface' +import rtlStyle from '../src/styles/rtl.cssr' + +export const progressRtl: RtlItem = { + name: 'Progress', + style: rtlStyle, + peers: [] +} diff --git a/src/styles.ts b/src/styles.ts index a64868be7af..9f909531c27 100644 --- a/src/styles.ts +++ b/src/styles.ts @@ -77,7 +77,10 @@ export { export { popconfirmDark } from './popconfirm/styles' export { popoverDark, popoverRtl as unstablePopoverRtl } from './popover/styles' export { popselectDark } from './popselect/styles' -export { progressDark } from './progress/styles' +export { + progressDark, + progressRtl as unstableProgressRtl +} from './progress/styles' export { radioDark, radioRtl as unstableRadioRtl } from './radio/styles' export { rateDark } from './rate/styles' export { resultDark } from './result/styles' diff --git a/volar.d.ts b/volar.d.ts index a69ed683a4b..8fa222d16e4 100644 --- a/volar.d.ts +++ b/volar.d.ts @@ -60,7 +60,6 @@ declare module 'vue' { NGi: (typeof import('naive-ui'))['NGi'] NGrid: (typeof import('naive-ui'))['NGrid'] NGridItem: (typeof import('naive-ui'))['NGridItem'] - NColorIndicator: (typeof import('naive-ui'))['NColorIndicator'] NHeatmap: (typeof import('naive-ui'))['NHeatmap'] NHighlight: (typeof import('naive-ui'))['NHighlight'] NIcon: (typeof import('naive-ui'))['NIcon']