From 9d4d39f10fcc9bd48c983f44ffd47fdcea7c520a Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Fri, 16 Apr 2021 02:33:18 +0800
Subject: [PATCH] feat(ellipsis): clsPrefix
---
src/ellipsis/index.ts | 1 +
src/ellipsis/src/Ellipsis.tsx | 36 +++++++++++++++++------------------
2 files changed, 18 insertions(+), 19 deletions(-)
diff --git a/src/ellipsis/index.ts b/src/ellipsis/index.ts
index c7b5aa75b..1624ed519 100644
--- a/src/ellipsis/index.ts
+++ b/src/ellipsis/index.ts
@@ -1 +1,2 @@
export { default as NEllipsis } from './src/Ellipsis'
+export type { EllipsisProps } from './src/Ellipsis'
diff --git a/src/ellipsis/src/Ellipsis.tsx b/src/ellipsis/src/Ellipsis.tsx
index 27039dbbe..a8157b853 100644
--- a/src/ellipsis/src/Ellipsis.tsx
+++ b/src/ellipsis/src/Ellipsis.tsx
@@ -1,24 +1,20 @@
-import {
- defineComponent,
- h,
- ref,
- PropType,
- computed,
- mergeProps,
- ExtractPropTypes
-} from 'vue'
+import { defineComponent, h, ref, PropType, computed, mergeProps } from 'vue'
import type { PopoverProps } from '../../popover/src/Popover'
import { TooltipInst } from '../../tooltip/src/Tooltip'
import { NTooltip } from '../../tooltip'
-import { useTheme } from '../../_mixins'
+import { useConfig, useTheme } from '../../_mixins'
import type { ThemeProps } from '../../_mixins'
+import type { ExtractPublicPropTypes } from '../../_utils'
import { ellipsisLight } from '../styles'
import type { EllipsisTheme } from '../styles'
import style from './styles/index.cssr'
-const lineClampClass = 'n-ellpisis--line-clamp'
+function createLineClampClass (clsPrefix: string): string {
+ return `${clsPrefix}-ellpisis--line-clamp`
+}
const ellpisisProps = {
+ ...(useTheme.props as ThemeProps<EllipsisTheme>),
expandTrigger: String as PropType<'click'>,
lineClamp: [Number, String] as PropType<string | number>,
tooltip: {
@@ -27,22 +23,21 @@ const ellpisisProps = {
}
} as const
-export type EllipsisProps = Partial<ExtractPropTypes<typeof ellpisisProps>>
+export type EllipsisProps = ExtractPublicPropTypes<typeof ellpisisProps>
export default defineComponent({
name: 'Ellipsis',
inheritAttrs: false,
- props: {
- ...(useTheme.props as ThemeProps<EllipsisTheme>),
- ...ellpisisProps
- },
+ props: ellpisisProps,
setup (props, { slots, attrs }) {
+ const { mergedClsPrefix } = useConfig(props)
const mergedTheme = useTheme(
'Ellipsis',
'ellipsis',
style,
ellipsisLight,
- props
+ props,
+ mergedClsPrefix
)
const triggerRef = ref<HTMLElement | null>(null)
const tooltipRef = ref<TooltipInst | null>(null)
@@ -96,8 +91,10 @@ export default defineComponent({
<span
{...mergeProps(attrs, {
class: [
- 'n-ellpisis',
- props.lineClamp !== undefined ? lineClampClass : undefined
+ `${mergedClsPrefix.value}-ellpisis`,
+ props.lineClamp !== undefined
+ ? createLineClampClass(mergedClsPrefix.value)
+ : undefined
],
style: ellpisisStyleRef.value
})}
@@ -110,6 +107,7 @@ export default defineComponent({
function syncEllipsisStyle (trigger: HTMLElement): void {
if (!trigger) return
const latestStyle = ellpisisStyleRef.value
+ const lineClampClass = createLineClampClass(mergedClsPrefix.value)
if (props.lineClamp !== undefined) {
if (!trigger.classList.contains(lineClampClass)) {
trigger.classList.add(lineClampClass)