From 0d771396d5959a56dc782ae8b14c6e94327c827b Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Thu, 15 Apr 2021 17:36:54 +0800 Subject: [PATCH] feat(back-top): clsPrefix --- src/_internal/icon/src/Icon.tsx | 12 ++- src/_mixins/use-style.ts | 6 +- src/_mixins/use-theme.ts | 2 +- src/back-top/index.ts | 2 +- src/back-top/src/BackTop.tsx | 165 +++++++++++++++++--------------- 5 files changed, 103 insertions(+), 84 deletions(-) diff --git a/src/_internal/icon/src/Icon.tsx b/src/_internal/icon/src/Icon.tsx index 3e0884368..d3dbcc23b 100644 --- a/src/_internal/icon/src/Icon.tsx +++ b/src/_internal/icon/src/Icon.tsx @@ -1,20 +1,24 @@ -import { h, defineComponent, PropType } from 'vue' +import { h, defineComponent, PropType, toRef } from 'vue' import { useStyle } from '../../../_mixins' import style from './styles/index.cssr' export default defineComponent({ name: 'BaseIcon', props: { + clsPerfix: { + type: String, + default: 'n' + }, onClick: Function as PropType<(e: MouseEvent) => void>, onMousedown: Function as PropType<(e: MouseEvent) => void> }, - setup () { - useStyle('BaseIcon', style) + setup (props) { + useStyle('BaseIcon', style, toRef(props, 'clsPerfix')) }, render () { return ( diff --git a/src/_mixins/use-style.ts b/src/_mixins/use-style.ts index a3b705d0e..ba5192d3a 100644 --- a/src/_mixins/use-style.ts +++ b/src/_mixins/use-style.ts @@ -1,5 +1,5 @@ import { CNode } from 'css-render' -import { ComputedRef, onBeforeMount } from 'vue' +import { Ref, onBeforeMount } from 'vue' import globalStyle from '../_styles/global/index.cssr' globalStyle.mount({ @@ -10,12 +10,12 @@ globalStyle.mount({ export default function useStyle ( mountId: string, style: CNode, - clsPrefixRef?: ComputedRef + clsPrefixRef?: Ref ): void { onBeforeMount(() => { const clsPrefix = clsPrefixRef?.value style.mount({ - id: mountId, + id: clsPrefix === undefined ? mountId : clsPrefix + mountId, head: true, props: { bPrefix: clsPrefix ? `.${clsPrefix}-` : undefined diff --git a/src/_mixins/use-theme.ts b/src/_mixins/use-theme.ts index 29dfb45ae..3dfaa7f35 100644 --- a/src/_mixins/use-theme.ts +++ b/src/_mixins/use-theme.ts @@ -92,7 +92,7 @@ function useTheme ( onBeforeMount(() => { const clsPrefix = clsPrefixRef?.value style.mount({ - target: clsPrefix === undefined ? mountId : clsPrefix + mountId, + id: clsPrefix === undefined ? mountId : clsPrefix + mountId, head: true, props: { bPrefix: clsPrefix ? `.${clsPrefix}-` : undefined diff --git a/src/back-top/index.ts b/src/back-top/index.ts index 12076b870..4c55d441c 100644 --- a/src/back-top/index.ts +++ b/src/back-top/index.ts @@ -1,2 +1,2 @@ -/* istanbul ignore file */ export { default as NBackTop } from './src/BackTop' +export type { BackTopProps } from './src/BackTop' diff --git a/src/back-top/src/BackTop.tsx b/src/back-top/src/BackTop.tsx index 291deca2c..d3a8d0f17 100644 --- a/src/back-top/src/BackTop.tsx +++ b/src/back-top/src/BackTop.tsx @@ -11,12 +11,13 @@ import { Transition, PropType, onMounted, - onBeforeUnmount + onBeforeUnmount, + ExtractPropTypes } from 'vue' import { VLazyTeleport } from 'vueuc' import { useIsMounted, useMergedState } from 'vooks' import { getScrollParent, unwrapElement } from 'seemly' -import { useTheme } from '../../_mixins' +import { useConfig, useTheme } from '../../_mixins' import type { ThemeProps } from '../../_mixins' import { NBaseIcon } from '../../_internal' import { formatLength, warn } from '../../_utils' @@ -25,76 +26,82 @@ import type { BackTopTheme } from '../styles' import BackTopIcon from './BackTopIcon' import style from './styles/index.cssr' +const backTopProps = { + ...(useTheme.props as ThemeProps), + show: { + type: Boolean as PropType, + default: undefined + }, + right: { + type: [Number, String] as PropType, + default: 40 + }, + bottom: { + type: [Number, String] as PropType, + default: 40 + }, + to: { + type: [String, Object] as PropType, + default: 'body' + }, + visibilityHeight: { + type: Number, + default: 180 + }, + listenTo: [String, Object, Function] as PropType< + string | HTMLElement | (() => HTMLElement) + >, + // eslint-disable-next-line vue/prop-name-casing + 'onUpdate:show': { + type: Function, + default: () => {} + }, + // deprecated + target: { + type: Function as PropType<() => HTMLElement | undefined>, + validator: () => { + warn( + 'back-top', + '`target` is deprecated, please use `listen-to` instead.' + ) + return true + }, + default: undefined + }, + onShow: { + type: (Function as unknown) as PropType<(() => void) | undefined>, + validator: () => { + warn( + 'back-top', + '`on-show` is deprecated, please use `on-update:show` instead.' + ) + return true + }, + default: undefined + }, + onHide: { + type: (Function as unknown) as PropType<(() => void) | undefined>, + validator: () => { + warn( + 'back-top', + '`on-hide` is deprecated, please use `on-update:show` instead.' + ) + return true + }, + default: undefined + } +} as const + +export type BackTopProps = Partial> + export default defineComponent({ name: 'BackTop', + // make style applied to back-top button inheritAttrs: false, - props: { - ...(useTheme.props as ThemeProps), - show: { - type: Boolean, - default: undefined - }, - right: { - type: [Number, String], - default: 40 - }, - bottom: { - type: [Number, String], - default: 40 - }, - to: { - type: [String, Object] as PropType, - default: 'body' - }, - visibilityHeight: { - type: Number, - default: 180 - }, - listenTo: { - type: [String, Object, Function], - default: undefined - }, - // eslint-disable-next-line vue/prop-name-casing - 'onUpdate:show': { - type: Function, - default: () => {} - }, - // deprecated - target: { - type: Function as PropType<() => HTMLElement | undefined>, - validator: () => { - warn( - 'back-top', - '`target` is deprecated, please use `listen-to` instead.' - ) - return true - }, - default: undefined - }, - onShow: { - type: (Function as unknown) as PropType<(() => void) | undefined>, - validator: () => { - warn( - 'back-top', - '`on-show` is deprecated, please use `on-update:show` instead.' - ) - return true - }, - default: undefined - }, - onHide: { - type: (Function as unknown) as PropType<(() => void) | undefined>, - validator: () => { - warn( - 'back-top', - '`on-hide` is deprecated, please use `on-update:show` instead.' - ) - return true - }, - default: undefined - } - }, + props: backTopProps, setup (props) { + const { mergedClsPrefix } = useConfig(props) + const scrollTopRef = ref(null) const uncontrolledShowRef = computed(() => { if (scrollTopRef.value === null) return false @@ -130,7 +137,14 @@ export default defineComponent({ props.onHide?.() } }) - const themeRef = useTheme('BackTop', 'BackTop', style, backTopLight, props) + const themeRef = useTheme( + 'BackTop', + 'BackTop', + style, + backTopLight, + props, + mergedClsPrefix + ) function init (): void { if (scrollListenerRegistered) return scrollListenerRegistered = true @@ -205,6 +219,7 @@ export default defineComponent({ scrollTop: scrollTopRef, DomInfoReady: DomInfoReadyRef, transitionDisabled: transitionDisabledRef, + cPrefix: mergedClsPrefix, handleAfterEnter, handleScroll, handleClick, @@ -267,11 +282,11 @@ export default defineComponent({ 'div', mergeProps(this.$attrs, { class: [ - 'n-back-top', - { - 'n-back-top--transition-disabled': this - .transitionDisabled - } + `${this.cPrefix}-back-top`, + { + [`${this.cPrefix}-back-top--transition-disabled`]: this + .transitionDisabled + } ], style: { ...this.style, @@ -285,7 +300,7 @@ export default defineComponent({ 'default', undefined, () => [ - + {{ default: () => BackTopIcon }} ]