mirror of
https://github.com/antd-tiny-vue/antd-tiny-vue.git
synced 2025-07-07 17:59:18 +08:00
Compare commits
22 Commits
e5896c093a
...
main
Author | SHA1 | Date | |
---|---|---|---|
46b98316ee | |||
7320eaf54d | |||
ae025850b0 | |||
febc297d5e | |||
5338a2fe92 | |||
b486c0ae40 | |||
01eb9af46c | |||
7f296bc378 | |||
6096c28669 | |||
786877b629 | |||
4e0a756239 | |||
79210d99c9 | |||
7bc8ec1094 | |||
08f17ce876 | |||
fe029c5a0e | |||
0d1e4d3e7c | |||
07d0ff0785 | |||
2208af0174 | |||
63ac0cb613 | |||
7cead859d1 | |||
7ae7f3a878 | |||
27f2980768 |
@ -1,3 +1,5 @@
|
||||
cache
|
||||
.temp
|
||||
*.log
|
||||
es
|
||||
lib
|
||||
|
2
.gitignore
vendored
2
.gitignore
vendored
@ -5,3 +5,5 @@ node_modules
|
||||
dist
|
||||
cache
|
||||
.temp
|
||||
es
|
||||
lib
|
||||
|
17
.vitepress/components/demo.vue
Normal file
17
.vitepress/components/demo.vue
Normal file
@ -0,0 +1,17 @@
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, shallowRef } from 'vue'
|
||||
|
||||
const comp = shallowRef()
|
||||
onMounted(async () => {
|
||||
const { AntdTheme } = await import('vite-plugin-vitepress-demo/theme')
|
||||
comp.value = AntdTheme
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ClientOnly>
|
||||
<component v-bind="$attrs" :is="comp"></component>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
@ -10,20 +10,19 @@ const baseSrc = fileURLToPath(new URL('./', import.meta.url))
|
||||
|
||||
export default defineConfig({
|
||||
rewrites: getRewrites(),
|
||||
mpa: true,
|
||||
lang: 'en-US',
|
||||
ignoreDeadLinks: true,
|
||||
locales: {
|
||||
'zh-CN': {
|
||||
lang: 'zh-CN',
|
||||
title: 'vue3组件库站点',
|
||||
title: 'Antd Tiny Vue',
|
||||
label: '简体中文',
|
||||
description: 'vue3组件库站点',
|
||||
themeConfig: getZhCNConfig()
|
||||
},
|
||||
root: {
|
||||
lang: 'en-US',
|
||||
title: 'vue3 component library site',
|
||||
title: 'Antd Tiny Vue',
|
||||
label: 'English',
|
||||
description: 'vue3 component library site',
|
||||
themeConfig: getEnUSConfig()
|
||||
|
@ -1,15 +1,18 @@
|
||||
import type { Theme } from 'vitepress'
|
||||
// eslint-disable-next-line import/no-named-as-default
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import { AntdTheme } from 'vite-plugin-vitepress-demo/theme'
|
||||
// @ts-expect-error this is a local module
|
||||
import Antd from 'antd-tiny-vue'
|
||||
|
||||
import AntdTheme from '../components/demo.vue'
|
||||
// import { AntdTheme } from 'vite-plugin-vitepress-demo/theme'
|
||||
export default {
|
||||
...DefaultTheme,
|
||||
enhanceApp(ctx) {
|
||||
async enhanceApp(ctx) {
|
||||
DefaultTheme.enhanceApp?.(ctx)
|
||||
ctx.app.component('Demo', AntdTheme)
|
||||
ctx.app.use(Antd)
|
||||
// @ts-expect-error this is a local module
|
||||
if (!import.meta.env.SSR) {
|
||||
// @ts-expect-error this is a local module
|
||||
const Antd = (await import('antd-tiny-vue')).default
|
||||
ctx.app.use(Antd)
|
||||
}
|
||||
}
|
||||
} as Theme
|
||||
|
12
components/_util/hooks/flex-gap-support.ts
Normal file
12
components/_util/hooks/flex-gap-support.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { useState } from '@v-c/utils'
|
||||
import { onMounted } from 'vue'
|
||||
import { detectFlexGapSupported } from '../style-checker'
|
||||
|
||||
export default () => {
|
||||
const [flexible, setFlexible] = useState(false)
|
||||
|
||||
onMounted(() => {
|
||||
setFlexible(detectFlexGapSupported())
|
||||
})
|
||||
return flexible
|
||||
}
|
32
components/_util/style-checker.ts
Normal file
32
components/_util/style-checker.ts
Normal file
@ -0,0 +1,32 @@
|
||||
import { canUseDom } from '@v-c/utils'
|
||||
|
||||
export const canUseDocElement = () =>
|
||||
canUseDom() && window.document.documentElement
|
||||
|
||||
let flexGapSupported: boolean
|
||||
export const detectFlexGapSupported = () => {
|
||||
if (!canUseDocElement()) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (flexGapSupported !== undefined) {
|
||||
return flexGapSupported
|
||||
}
|
||||
|
||||
// create flex container with row-gap set
|
||||
const flex = document.createElement('div')
|
||||
flex.style.display = 'flex'
|
||||
flex.style.flexDirection = 'column'
|
||||
flex.style.rowGap = '1px'
|
||||
|
||||
// create two, elements inside it
|
||||
flex.appendChild(document.createElement('div'))
|
||||
flex.appendChild(document.createElement('div'))
|
||||
|
||||
// append to the DOM (needed to obtain scrollHeight)
|
||||
document.body.appendChild(flex)
|
||||
flexGapSupported = flex.scrollHeight === 1 // flex container should be 1px high from the row-gap
|
||||
document.body.removeChild(flex)
|
||||
|
||||
return flexGapSupported
|
||||
}
|
@ -1,9 +1,26 @@
|
||||
// import type { VNode, VNodeChild } from 'vue'
|
||||
// import { isString } from '@v-c/utils'
|
||||
import { Text } from 'vue'
|
||||
import type { VNode } from 'vue'
|
||||
|
||||
const rxTwoCNChar = /^[\u4E00-\u9FA5]{2}$/
|
||||
export const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar)
|
||||
|
||||
export function isUnBorderedButtonType(type?: ButtonType) {
|
||||
return type === 'text' || type === 'link'
|
||||
}
|
||||
export const spaceChildren = (child: VNode, needInserted: boolean) => {
|
||||
const SPACE = needInserted ? ' ' : ''
|
||||
if (child.type === Text) {
|
||||
let text = (child.children as string).trim()
|
||||
if (isTwoCNChar(text)) {
|
||||
text = text.split('').join(SPACE)
|
||||
}
|
||||
return <span>{text}</span>
|
||||
}
|
||||
return child
|
||||
}
|
||||
|
||||
//
|
||||
// function splitCNCharsBySpace(child: VNodeChild , needInserted: boolean) {
|
||||
// if (child === null || child === undefined) {
|
||||
@ -33,7 +50,6 @@ export function isUnBorderedButtonType(type?: ButtonType) {
|
||||
//
|
||||
// return child;
|
||||
// }
|
||||
//
|
||||
// export function spaceChildren(children: React.ReactNode, needInserted: boolean) {
|
||||
// let isPrevChildPure: boolean = false;
|
||||
// const childList: React.ReactNode[] = [];
|
||||
@ -57,7 +73,14 @@ export function isUnBorderedButtonType(type?: ButtonType) {
|
||||
// );
|
||||
// }
|
||||
|
||||
const ButtonTypes = ['default', 'primary', 'ghost', 'dashed', 'link', 'text'] as const
|
||||
const ButtonTypes = [
|
||||
'default',
|
||||
'primary',
|
||||
'ghost',
|
||||
'dashed',
|
||||
'link',
|
||||
'text'
|
||||
] as const
|
||||
export type ButtonType = (typeof ButtonTypes)[number]
|
||||
|
||||
const ButtonShapes = ['default', 'circle', 'round'] as const
|
||||
|
@ -16,7 +16,12 @@ import { useCompactItemContext } from '../space/compact'
|
||||
import useStyle from './style'
|
||||
import type { ButtonProps, LoadingConfigType } from './interface'
|
||||
import { buttonProps } from './interface'
|
||||
import { isTwoCNChar, isUnBorderedButtonType } from './button-helper'
|
||||
import {
|
||||
isTwoCNChar,
|
||||
isUnBorderedButtonType,
|
||||
spaceChildren
|
||||
} from './button-helper'
|
||||
import LoadingIcon from './loading-icon'
|
||||
type Loading = number | boolean
|
||||
|
||||
function getLoadingConfig(loading: ButtonProps['loading']): LoadingConfigType {
|
||||
@ -53,9 +58,13 @@ const Button = defineComponent({
|
||||
direction
|
||||
)
|
||||
const sizeCls = computed(() => {
|
||||
const sizeClassNameMap = { large: 'lg', small: 'sm', middle: undefined }
|
||||
const sizeFullname = compactSize?.value || size.value
|
||||
return sizeClassNameMap[sizeFullname!]
|
||||
const sizeClassNameMap: Record<string, any> = {
|
||||
large: 'lg',
|
||||
small: 'sm',
|
||||
middle: undefined
|
||||
}
|
||||
const sizeFullName = compactSize?.value || size.value
|
||||
return sizeClassNameMap[sizeFullName]
|
||||
})
|
||||
const disabled = useDisabled(props)
|
||||
const buttonRef = shallowRef<HTMLButtonElement | null>(null)
|
||||
@ -69,6 +78,23 @@ const Button = defineComponent({
|
||||
)
|
||||
const [hasTwoCNChar, setHasTwoCNChar] = useState(false)
|
||||
|
||||
let isNeedInserted = false
|
||||
|
||||
const fixTwoCNChar = () => {
|
||||
// FIXME: for HOC usage like <FormatMessage />
|
||||
if (!buttonRef.value || autoInsertSpaceInButton.value === false) {
|
||||
return
|
||||
}
|
||||
const buttonText = buttonRef.value.textContent
|
||||
if (isNeedInserted && isTwoCNChar(buttonText as string)) {
|
||||
if (!hasTwoCNChar.value) {
|
||||
setHasTwoCNChar(true)
|
||||
}
|
||||
} else if (hasTwoCNChar.value) {
|
||||
setHasTwoCNChar(false)
|
||||
}
|
||||
}
|
||||
|
||||
let delayTimer: number | null = null
|
||||
|
||||
onMounted(() => {
|
||||
@ -80,7 +106,6 @@ const Button = defineComponent({
|
||||
} else {
|
||||
setLoading(loadingOrDelay.value.loading)
|
||||
}
|
||||
// fixTwoCNChar()
|
||||
})
|
||||
|
||||
function cleanupTimer() {
|
||||
@ -123,29 +148,11 @@ const Button = defineComponent({
|
||||
return () => {
|
||||
const { shape, rootClassName, ghost, type, block, danger } = props
|
||||
const icon = getSlotsProps(slots, props, 'icon')
|
||||
const children = filterEmpty(slots.default?.())
|
||||
const isNeedInserted = () => {
|
||||
return (
|
||||
children.length === 1 &&
|
||||
!slots.icon &&
|
||||
isUnBorderedButtonType(props.type)
|
||||
)
|
||||
}
|
||||
|
||||
const fixTwoCNChar = () => {
|
||||
// FIXME: for HOC usage like <FormatMessage />
|
||||
if (!buttonRef.value || autoInsertSpaceInButton.value === false) {
|
||||
return
|
||||
}
|
||||
const buttonText = buttonRef.value.textContent
|
||||
if (isNeedInserted() && isTwoCNChar(buttonText as string)) {
|
||||
if (!hasTwoCNChar) {
|
||||
setHasTwoCNChar(true)
|
||||
}
|
||||
} else if (hasTwoCNChar) {
|
||||
setHasTwoCNChar(false)
|
||||
}
|
||||
}
|
||||
const children = filterEmpty(slots.default?.() as any)
|
||||
isNeedInserted =
|
||||
children.length === 1 &&
|
||||
!slots.icon &&
|
||||
!isUnBorderedButtonType(props.type)
|
||||
fixTwoCNChar()
|
||||
showError()
|
||||
const iconType = innerLoading.value ? 'loading' : icon
|
||||
@ -177,8 +184,22 @@ const Button = defineComponent({
|
||||
compactItemClassnames.value,
|
||||
rootClassName
|
||||
)
|
||||
const iconNode = icon && !innerLoading.value ? icon?.() : <>L</>
|
||||
const iconNode =
|
||||
icon &&
|
||||
(!innerLoading.value ? (
|
||||
icon?.()
|
||||
) : (
|
||||
<LoadingIcon
|
||||
existIcon={!!icon}
|
||||
prefixCls={prefixCls.value}
|
||||
loading={!!innerLoading.value}
|
||||
/>
|
||||
))
|
||||
|
||||
const kids =
|
||||
children || children === 0
|
||||
? spaceChildren(children[0] as any, isNeedInserted && autoInsertSpace)
|
||||
: undefined
|
||||
if (attrs.href !== undefined) {
|
||||
return wrapSSR(
|
||||
<a
|
||||
@ -189,13 +210,19 @@ const Button = defineComponent({
|
||||
ref={buttonRef}
|
||||
>
|
||||
{iconNode}
|
||||
{children}
|
||||
{kids}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
let buttonNode = (
|
||||
<button {...attrs} onClick={handleClick} class={classes}>
|
||||
{children}
|
||||
<button
|
||||
{...attrs}
|
||||
onClick={handleClick}
|
||||
class={classes}
|
||||
ref={buttonRef}
|
||||
>
|
||||
{iconNode}
|
||||
{kids}
|
||||
</button>
|
||||
)
|
||||
|
||||
|
@ -14,12 +14,12 @@ title: Type
|
||||
There are `primary` button, `default` button, `dashed` button, `text` button and `link` button in antd.
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<a-button type="primary">Primary Button</a-button>
|
||||
<a-button>Default Button</a-button>
|
||||
<a-button type="dashed">Dashed Button</a-button>
|
||||
<a-button type="text">Text Button</a-button>
|
||||
<a-button type="link">Link Button</a-button>
|
||||
<a-space wrap>
|
||||
<a-button type="primary">Primary Button</a-button>
|
||||
<a-button>Default Button</a-button>
|
||||
<a-button type="dashed">Dashed Button</a-button>
|
||||
<a-button type="text">Text Button</a-button>
|
||||
<a-button type="link">Link Button</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
@ -49,7 +49,6 @@ It accepts all props which native buttons support.
|
||||
|
||||
## Design Token
|
||||
|
||||
<ComponentTokenTable component="Button"></ComponentTokenTable>
|
||||
|
||||
## FAQ
|
||||
|
||||
|
@ -54,7 +54,6 @@
|
||||
|
||||
## Design Token
|
||||
|
||||
<ComponentTokenTable component="Button"></ComponentTokenTable>
|
||||
|
||||
## FAQ
|
||||
|
||||
|
67
components/button/loading-icon.tsx
Normal file
67
components/button/loading-icon.tsx
Normal file
@ -0,0 +1,67 @@
|
||||
import { Transition, defineComponent, nextTick } from 'vue'
|
||||
import { booleanType, someType, stringType } from '@v-c/utils'
|
||||
import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined'
|
||||
|
||||
export interface LoadingIconProps {
|
||||
prefixCls: string
|
||||
existIcon: boolean
|
||||
loading?: boolean | object
|
||||
}
|
||||
export const loadingIconProps = {
|
||||
prefixCls: stringType(),
|
||||
existIcon: booleanType(),
|
||||
loading: someType<boolean | object>([Boolean, Object])
|
||||
}
|
||||
|
||||
const getCollapsedWidth = (el: Element) => {
|
||||
const node: HTMLElement = el as HTMLElement
|
||||
if (node) {
|
||||
node.style.width = '0'
|
||||
node.style.opacity = '0'
|
||||
node.style.transform = 'scale(0)'
|
||||
}
|
||||
}
|
||||
|
||||
const getRealWidth = (el: Element) => {
|
||||
const node: HTMLElement = el as HTMLElement
|
||||
nextTick(() => {
|
||||
if (node) {
|
||||
node.style.width = `${node.scrollWidth}px`
|
||||
node.style.opacity = '1'
|
||||
node.style.transform = 'scale(1)'
|
||||
}
|
||||
}).then()
|
||||
}
|
||||
|
||||
const LoadingIcon = defineComponent({
|
||||
name: 'LoadingIcon',
|
||||
props: loadingIconProps,
|
||||
setup(props) {
|
||||
return () => {
|
||||
const { loading, existIcon, prefixCls } = props
|
||||
const visible = !!loading
|
||||
if (existIcon) {
|
||||
return (
|
||||
<span class={`${prefixCls}-loading-icon`}>
|
||||
<LoadingOutlined />
|
||||
</span>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Transition
|
||||
name={`${prefixCls}-loading-icon-motion`}
|
||||
onBeforeEnter={getCollapsedWidth}
|
||||
onEnter={getRealWidth}
|
||||
>
|
||||
{visible ? (
|
||||
<span class={`${prefixCls}-loading-icon`}>
|
||||
<LoadingOutlined />
|
||||
</span>
|
||||
) : null}
|
||||
</Transition>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default LoadingIcon
|
@ -16,9 +16,10 @@ export interface ButtonToken extends FullToken<'Button'> {
|
||||
}
|
||||
|
||||
// ============================== Shared ==============================
|
||||
const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSSObject => {
|
||||
const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
|
||||
token
|
||||
): CSSObject => {
|
||||
const { componentCls, iconCls } = token
|
||||
|
||||
return {
|
||||
[componentCls]: {
|
||||
outline: 'none',
|
||||
@ -60,25 +61,8 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
|
||||
},
|
||||
// Special styles for Primary Button
|
||||
[`&-compact-item${componentCls}-primary`]: {
|
||||
[`&:not([disabled]) + ${componentCls}-compact-item${componentCls}-primary:not([disabled])`]: {
|
||||
position: 'relative',
|
||||
|
||||
'&:before': {
|
||||
position: 'absolute',
|
||||
top: -token.lineWidth,
|
||||
insetInlineStart: -token.lineWidth,
|
||||
display: 'inline-block',
|
||||
width: token.lineWidth,
|
||||
height: `calc(100% + ${token.lineWidth * 2}px)`,
|
||||
backgroundColor: token.colorPrimaryHover,
|
||||
content: '""'
|
||||
}
|
||||
}
|
||||
},
|
||||
// Special styles for Primary Button
|
||||
'&-compact-vertical-item': {
|
||||
[`&${componentCls}-primary`]: {
|
||||
[`&:not([disabled]) + ${componentCls}-compact-vertical-item${componentCls}-primary:not([disabled])`]: {
|
||||
[`&:not([disabled]) + ${componentCls}-compact-item${componentCls}-primary:not([disabled])`]:
|
||||
{
|
||||
position: 'relative',
|
||||
|
||||
'&:before': {
|
||||
@ -86,19 +70,41 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
|
||||
top: -token.lineWidth,
|
||||
insetInlineStart: -token.lineWidth,
|
||||
display: 'inline-block',
|
||||
width: `calc(100% + ${token.lineWidth * 2}px)`,
|
||||
height: token.lineWidth,
|
||||
width: token.lineWidth,
|
||||
height: `calc(100% + ${token.lineWidth * 2}px)`,
|
||||
backgroundColor: token.colorPrimaryHover,
|
||||
content: '""'
|
||||
}
|
||||
}
|
||||
},
|
||||
// Special styles for Primary Button
|
||||
'&-compact-vertical-item': {
|
||||
[`&${componentCls}-primary`]: {
|
||||
[`&:not([disabled]) + ${componentCls}-compact-vertical-item${componentCls}-primary:not([disabled])`]:
|
||||
{
|
||||
position: 'relative',
|
||||
|
||||
'&:before': {
|
||||
position: 'absolute',
|
||||
top: -token.lineWidth,
|
||||
insetInlineStart: -token.lineWidth,
|
||||
display: 'inline-block',
|
||||
width: `calc(100% + ${token.lineWidth * 2}px)`,
|
||||
height: token.lineWidth,
|
||||
backgroundColor: token.colorPrimaryHover,
|
||||
content: '""'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const genHoverActiveButtonStyle = (hoverStyle: CSSObject, activeStyle: CSSObject): CSSObject => ({
|
||||
const genHoverActiveButtonStyle = (
|
||||
hoverStyle: CSSObject,
|
||||
activeStyle: CSSObject
|
||||
): CSSObject => ({
|
||||
'&:not(:disabled)': {
|
||||
'&:hover': hoverStyle,
|
||||
'&:active': activeStyle
|
||||
@ -106,21 +112,23 @@ const genHoverActiveButtonStyle = (hoverStyle: CSSObject, activeStyle: CSSObject
|
||||
})
|
||||
|
||||
// ============================== Shape ===============================
|
||||
const genCircleButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
const genCircleButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
|
||||
token
|
||||
) => ({
|
||||
minWidth: token.controlHeight,
|
||||
paddingInlineStart: 0,
|
||||
paddingInlineEnd: 0,
|
||||
borderRadius: '50%'
|
||||
})
|
||||
|
||||
const genRoundButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
const genRoundButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
|
||||
borderRadius: token.controlHeight,
|
||||
paddingInlineStart: token.controlHeight / 2,
|
||||
paddingInlineEnd: token.controlHeight / 2
|
||||
})
|
||||
|
||||
// =============================== Type ===============================
|
||||
const genDisabledStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
const genDisabledStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
|
||||
cursor: 'not-allowed',
|
||||
borderColor: token.colorBorder,
|
||||
color: token.colorTextDisabled,
|
||||
@ -162,17 +170,21 @@ const genGhostButtonStyle = (
|
||||
}
|
||||
})
|
||||
|
||||
const genSolidDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
const genSolidDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
|
||||
token
|
||||
) => ({
|
||||
'&:disabled': {
|
||||
...genDisabledStyle(token)
|
||||
}
|
||||
})
|
||||
|
||||
const genSolidButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
const genSolidButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
|
||||
...genSolidDisabledButtonStyle(token)
|
||||
})
|
||||
|
||||
const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
|
||||
token
|
||||
) => ({
|
||||
'&:disabled': {
|
||||
cursor: 'not-allowed',
|
||||
color: token.colorTextDisabled
|
||||
@ -180,7 +192,9 @@ const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token
|
||||
})
|
||||
|
||||
// Type: Default
|
||||
const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
|
||||
token
|
||||
) => ({
|
||||
...genSolidButtonStyle(token),
|
||||
|
||||
backgroundColor: token.colorBgContainer,
|
||||
@ -199,7 +213,13 @@ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
}
|
||||
),
|
||||
|
||||
...genGhostButtonStyle(token.componentCls, token.colorBgContainer, token.colorBgContainer, token.colorTextDisabled, token.colorBorder),
|
||||
...genGhostButtonStyle(
|
||||
token.componentCls,
|
||||
token.colorBgContainer,
|
||||
token.colorBgContainer,
|
||||
token.colorTextDisabled,
|
||||
token.colorBorder
|
||||
),
|
||||
|
||||
[`&${token.componentCls}-dangerous`]: {
|
||||
color: token.colorError,
|
||||
@ -216,13 +236,21 @@ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
}
|
||||
),
|
||||
|
||||
...genGhostButtonStyle(token.componentCls, token.colorError, token.colorError, token.colorTextDisabled, token.colorBorder),
|
||||
...genGhostButtonStyle(
|
||||
token.componentCls,
|
||||
token.colorError,
|
||||
token.colorError,
|
||||
token.colorTextDisabled,
|
||||
token.colorBorder
|
||||
),
|
||||
...genSolidDisabledButtonStyle(token)
|
||||
}
|
||||
})
|
||||
|
||||
// Type: Primary
|
||||
const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
|
||||
token
|
||||
) => ({
|
||||
...genSolidButtonStyle(token),
|
||||
|
||||
color: token.colorTextLightSolid,
|
||||
@ -290,13 +318,15 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
})
|
||||
|
||||
// Type: Dashed
|
||||
const genDashedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
const genDashedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
|
||||
token
|
||||
) => ({
|
||||
...genDefaultButtonStyle(token),
|
||||
borderStyle: 'dashed'
|
||||
})
|
||||
|
||||
// Type: Link
|
||||
const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
|
||||
color: token.colorLink,
|
||||
|
||||
...genHoverActiveButtonStyle(
|
||||
@ -327,7 +357,7 @@ const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
})
|
||||
|
||||
// Type: Text
|
||||
const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
|
||||
...genHoverActiveButtonStyle(
|
||||
{
|
||||
color: token.colorText,
|
||||
@ -359,14 +389,16 @@ const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
})
|
||||
|
||||
// Href and Disabled
|
||||
const genDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
|
||||
const genDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
|
||||
token
|
||||
) => ({
|
||||
...genDisabledStyle(token),
|
||||
[`&${token.componentCls}:hover`]: {
|
||||
...genDisabledStyle(token)
|
||||
}
|
||||
})
|
||||
|
||||
const genTypeButtonStyle: GenerateStyle<ButtonToken> = token => {
|
||||
const genTypeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
|
||||
const { componentCls } = token
|
||||
|
||||
return {
|
||||
@ -380,10 +412,25 @@ const genTypeButtonStyle: GenerateStyle<ButtonToken> = token => {
|
||||
}
|
||||
|
||||
// =============================== Size ===============================
|
||||
const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls = ''): CSSInterpolation => {
|
||||
const { componentCls, iconCls, controlHeight, fontSize, lineHeight, lineWidth, borderRadius, buttonPaddingHorizontal } = token
|
||||
const genSizeButtonStyle = (
|
||||
token: ButtonToken,
|
||||
sizePrefixCls = ''
|
||||
): CSSInterpolation => {
|
||||
const {
|
||||
componentCls,
|
||||
iconCls,
|
||||
controlHeight,
|
||||
fontSize,
|
||||
lineHeight,
|
||||
lineWidth,
|
||||
borderRadius,
|
||||
buttonPaddingHorizontal
|
||||
} = token
|
||||
|
||||
const paddingVertical = Math.max(0, (controlHeight - fontSize * lineHeight) / 2 - lineWidth)
|
||||
const paddingVertical = Math.max(
|
||||
0,
|
||||
(controlHeight - fontSize * lineHeight) / 2 - lineWidth
|
||||
)
|
||||
const paddingHorizontal = buttonPaddingHorizontal - lineWidth
|
||||
|
||||
const iconOnlyCls = `${componentCls}-icon-only`
|
||||
@ -427,17 +474,20 @@ const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls = ''): CSSInterpol
|
||||
|
||||
// Shape - patch prefixCls again to override solid border radius style
|
||||
{
|
||||
[`${componentCls}${componentCls}-circle${sizePrefixCls}`]: genCircleButtonStyle(token)
|
||||
[`${componentCls}${componentCls}-circle${sizePrefixCls}`]:
|
||||
genCircleButtonStyle(token)
|
||||
},
|
||||
{
|
||||
[`${componentCls}${componentCls}-round${sizePrefixCls}`]: genRoundButtonStyle(token)
|
||||
[`${componentCls}${componentCls}-round${sizePrefixCls}`]:
|
||||
genRoundButtonStyle(token)
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const genSizeBaseButtonStyle: GenerateStyle<ButtonToken> = token => genSizeButtonStyle(token)
|
||||
const genSizeBaseButtonStyle: GenerateStyle<ButtonToken> = (token) =>
|
||||
genSizeButtonStyle(token)
|
||||
|
||||
const genSizeSmallButtonStyle: GenerateStyle<ButtonToken> = token => {
|
||||
const genSizeSmallButtonStyle: GenerateStyle<ButtonToken> = (token) => {
|
||||
const smallToken = mergeToken<ButtonToken>(token, {
|
||||
controlHeight: token.controlHeightSM,
|
||||
padding: token.paddingXS,
|
||||
@ -448,7 +498,7 @@ const genSizeSmallButtonStyle: GenerateStyle<ButtonToken> = token => {
|
||||
return genSizeButtonStyle(smallToken, `${token.componentCls}-sm`)
|
||||
}
|
||||
|
||||
const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = token => {
|
||||
const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
|
||||
const largeToken = mergeToken<ButtonToken>(token, {
|
||||
controlHeight: token.controlHeightLG,
|
||||
fontSize: token.fontSizeLG,
|
||||
@ -458,7 +508,7 @@ const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = token => {
|
||||
return genSizeButtonStyle(largeToken, `${token.componentCls}-lg`)
|
||||
}
|
||||
|
||||
const genBlockButtonStyle: GenerateStyle<ButtonToken> = token => {
|
||||
const genBlockButtonStyle: GenerateStyle<ButtonToken> = (token) => {
|
||||
const { componentCls } = token
|
||||
return {
|
||||
[componentCls]: {
|
||||
@ -470,7 +520,7 @@ const genBlockButtonStyle: GenerateStyle<ButtonToken> = token => {
|
||||
}
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Button', token => {
|
||||
export default genComponentStyleHook('Button', (token) => {
|
||||
const { controlTmpOutline, paddingContentHorizontal } = token
|
||||
|
||||
const buttonToken = mergeToken<ButtonToken>(token, {
|
||||
|
@ -1,2 +1,3 @@
|
||||
export { default as Button } from './button'
|
||||
export { default as ConfigProvider } from './config-provider'
|
||||
export { default as Space } from './space'
|
||||
|
@ -1,8 +1,20 @@
|
||||
import { booleanType, createInjectionState, functionType, objectType, someType, stringType } from '@v-c/utils'
|
||||
import {
|
||||
booleanType,
|
||||
createInjectionState,
|
||||
functionType,
|
||||
objectType,
|
||||
someType,
|
||||
stringType
|
||||
} from '@v-c/utils'
|
||||
import type { ExtractPropTypes } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
import type { DerivativeFunc } from '@antd-tiny-vue/cssinjs'
|
||||
import type { AliasToken, MapToken, OverrideToken, SeedToken } from '../theme/interface'
|
||||
import type {
|
||||
AliasToken,
|
||||
MapToken,
|
||||
OverrideToken,
|
||||
SeedToken
|
||||
} from '../theme/interface'
|
||||
import type { RenderEmptyHandler } from './default-render-empty'
|
||||
import type { ConfigProviderProps } from './index'
|
||||
|
||||
@ -34,7 +46,10 @@ export interface ThemeConfig {
|
||||
}
|
||||
export const defaultIconPrefixCls = 'anticon'
|
||||
|
||||
const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
|
||||
const defaultGetPrefixCls = (
|
||||
suffixCls?: string,
|
||||
customizePrefixCls?: string
|
||||
) => {
|
||||
if (customizePrefixCls) return customizePrefixCls
|
||||
|
||||
return suffixCls ? `ant-${suffixCls}` : 'ant'
|
||||
@ -82,11 +97,16 @@ const configState = (props: ConfigProviderProps) => {
|
||||
const getPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
|
||||
const { prefixCls, getPrefixCls } = props
|
||||
if (customizePrefixCls) return customizePrefixCls
|
||||
const mergedPrefixCls = prefixCls || getPrefixCls?.('') || defaultGetPrefixCls('')
|
||||
const mergedPrefixCls =
|
||||
prefixCls || getPrefixCls?.('') || defaultGetPrefixCls('')
|
||||
return suffixCls ? `${mergedPrefixCls}-${suffixCls}` : mergedPrefixCls
|
||||
}
|
||||
const iconPrefixCls = computed(() => props?.iconPrefixCls ?? defaultIconPrefixCls)
|
||||
const shouldWrapSSR = computed(() => iconPrefixCls.value !== defaultIconPrefixCls)
|
||||
const iconPrefixCls = computed(
|
||||
() => props?.iconPrefixCls ?? defaultIconPrefixCls
|
||||
)
|
||||
const shouldWrapSSR = computed(
|
||||
() => iconPrefixCls.value !== defaultIconPrefixCls
|
||||
)
|
||||
const csp = computed(() => props?.csp)
|
||||
const componentSize = computed(() => props?.componentSize)
|
||||
const componentDisabled = computed(() => props?.componentDisabled)
|
||||
@ -103,7 +123,8 @@ const configState = (props: ConfigProviderProps) => {
|
||||
direction
|
||||
}
|
||||
}
|
||||
const [useProviderConfigProvide, useProviderConfigInject] = createInjectionState(configState)
|
||||
const [useProviderConfigProvide, useProviderConfigInject] =
|
||||
createInjectionState(configState)
|
||||
|
||||
export { useProviderConfigProvide }
|
||||
export const useProviderConfigState = (): ReturnType<typeof configState> => {
|
||||
@ -115,7 +136,7 @@ export const useProviderConfigState = (): ReturnType<typeof configState> => {
|
||||
componentSize: computed(() => undefined),
|
||||
componentDisabled: computed(() => false),
|
||||
direction: computed(() => undefined),
|
||||
autoInsertSpaceInButton: computed(() => undefined)
|
||||
autoInsertSpaceInButton: computed(() => true)
|
||||
} as any)
|
||||
)
|
||||
}
|
||||
|
@ -1,41 +0,0 @@
|
||||
import { classNames, createInjectionState } from '@v-c/utils'
|
||||
import type { Ref } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
import type { DirectionType } from '../config-provider'
|
||||
|
||||
const spaceCompactItem = () => {
|
||||
return {
|
||||
compactDirection: computed(() => null),
|
||||
isFirstItem: computed(() => null),
|
||||
isLastItem: computed(() => null),
|
||||
compactSize: computed(() => null)
|
||||
}
|
||||
}
|
||||
|
||||
export const [useSpaceCompactProvider, useSpaceCompactInject] = createInjectionState(spaceCompactItem)
|
||||
|
||||
export const useSpaceCompactItemState = (): ReturnType<typeof spaceCompactItem> | undefined => useSpaceCompactInject()
|
||||
|
||||
export const useCompactItemContext = (prefixCls: Ref<string>, direction: Ref<DirectionType>) => {
|
||||
const compactItemContext = useSpaceCompactItemState()
|
||||
|
||||
const compactItemClassnames = computed(() => {
|
||||
if (!compactItemContext) return ''
|
||||
|
||||
const { compactDirection, isFirstItem, isLastItem } = compactItemContext
|
||||
const separator = compactDirection.value === 'vertical' ? '-vertical-' : '-'
|
||||
|
||||
return classNames({
|
||||
[`${prefixCls.value}-compact${separator}item`]: true,
|
||||
[`${prefixCls.value}-compact${separator}first-item`]: isFirstItem.value,
|
||||
[`${prefixCls.value}-compact${separator}last-item`]: isLastItem.value,
|
||||
[`${prefixCls.value}-compact${separator}item-rtl`]: direction.value === 'rtl'
|
||||
})
|
||||
})
|
||||
|
||||
return {
|
||||
compactSize: compactItemContext?.compactSize,
|
||||
compactDirection: compactItemContext?.compactDirection,
|
||||
compactItemClassnames
|
||||
}
|
||||
}
|
142
components/space/compact.tsx
Normal file
142
components/space/compact.tsx
Normal file
@ -0,0 +1,142 @@
|
||||
import {
|
||||
anyType,
|
||||
booleanType,
|
||||
classNames,
|
||||
createInjectionState,
|
||||
filterEmpty,
|
||||
isObject,
|
||||
stringType
|
||||
} from '@v-c/utils'
|
||||
import type { Ref } from 'vue'
|
||||
import { computed, defineComponent } from 'vue'
|
||||
import type { DirectionType } from '../config-provider'
|
||||
import type { SizeType } from '../config-provider/context'
|
||||
import { useProviderConfigState } from '../config-provider/context'
|
||||
import useStyle from './style'
|
||||
|
||||
const spaceCompactItem = (props: any) => {
|
||||
return {
|
||||
compactDirection: computed(() => props.compactDirection),
|
||||
isFirstItem: computed(() => props.isFirstItem),
|
||||
isLastItem: computed(() => props.isLastItem),
|
||||
compactSize: computed(() => props.compactSize)
|
||||
}
|
||||
}
|
||||
|
||||
export const [useSpaceCompactProvider, useSpaceCompactInject] =
|
||||
createInjectionState(spaceCompactItem)
|
||||
|
||||
export const useSpaceCompactItemState = ():
|
||||
| ReturnType<typeof spaceCompactItem>
|
||||
| undefined => useSpaceCompactInject()
|
||||
|
||||
export const useCompactItemContext = (
|
||||
prefixCls: Ref<string>,
|
||||
direction: Ref<DirectionType>
|
||||
) => {
|
||||
const compactItemContext = useSpaceCompactItemState()
|
||||
|
||||
const compactItemClassnames = computed(() => {
|
||||
if (!compactItemContext) return ''
|
||||
|
||||
const { compactDirection, isFirstItem, isLastItem } = compactItemContext
|
||||
const separator = compactDirection.value === 'vertical' ? '-vertical-' : '-'
|
||||
|
||||
return classNames({
|
||||
[`${prefixCls.value}-compact${separator}item`]: true,
|
||||
[`${prefixCls.value}-compact${separator}first-item`]: isFirstItem.value,
|
||||
[`${prefixCls.value}-compact${separator}last-item`]: isLastItem.value,
|
||||
[`${prefixCls.value}-compact${separator}item-rtl`]:
|
||||
direction.value === 'rtl'
|
||||
})
|
||||
})
|
||||
|
||||
return {
|
||||
compactSize: compactItemContext?.compactSize,
|
||||
compactDirection: compactItemContext?.compactDirection,
|
||||
compactItemClassnames
|
||||
}
|
||||
}
|
||||
|
||||
const CompactItem = defineComponent({
|
||||
name: 'CompactItem',
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
compactSize: anyType<SizeType>(),
|
||||
compactDirection: stringType<'horizontal' | 'vertical'>(),
|
||||
isFirstItem: booleanType(),
|
||||
isLastItem: booleanType()
|
||||
},
|
||||
setup(props, { slots }) {
|
||||
useSpaceCompactProvider(props)
|
||||
return () => slots.default?.()
|
||||
}
|
||||
})
|
||||
|
||||
export const spaceCompactProps = {
|
||||
prefixCls: stringType(),
|
||||
size: anyType<SizeType>('middle'),
|
||||
direction: stringType<'horizontal' | 'vertical'>(),
|
||||
block: anyType<boolean>(),
|
||||
rootClassName: stringType()
|
||||
}
|
||||
|
||||
const Compact = defineComponent({
|
||||
name: 'Compact',
|
||||
inheritAttrs: false,
|
||||
props: spaceCompactProps,
|
||||
setup(props, { slots, attrs }) {
|
||||
const { getPrefixCls, direction: directionConfig } =
|
||||
useProviderConfigState()
|
||||
const prefixCls = computed(() =>
|
||||
getPrefixCls('space-compact', props.prefixCls)
|
||||
)
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls)
|
||||
const compactItemContext = useSpaceCompactItemState()
|
||||
return () => {
|
||||
const childNodes = filterEmpty(slots.default?.())
|
||||
if (childNodes.length === 0) return null
|
||||
const { rootClassName, size, direction } = props
|
||||
const cls = classNames(
|
||||
prefixCls.value,
|
||||
hashId.value,
|
||||
{
|
||||
[`${prefixCls.value}-rtl`]: directionConfig.value === 'rtl',
|
||||
[`${prefixCls.value}-block`]: props.block,
|
||||
[`${prefixCls.value}-vertical`]: props.direction === 'vertical'
|
||||
},
|
||||
attrs.class,
|
||||
rootClassName
|
||||
)
|
||||
const nodes = childNodes.map((child, index) => {
|
||||
const key =
|
||||
(isObject(child) && (child as any).key) ||
|
||||
`${prefixCls.value}-item-${index}`
|
||||
return (
|
||||
<CompactItem
|
||||
key={key}
|
||||
compactSize={size}
|
||||
compactDirection={direction}
|
||||
isFirstItem={
|
||||
(index === 0 && !compactItemContext) ||
|
||||
compactItemContext?.isFirstItem.value
|
||||
}
|
||||
isLastItem={
|
||||
index === childNodes.length - 1 &&
|
||||
(!compactItemContext || compactItemContext?.isLastItem.value)
|
||||
}
|
||||
>
|
||||
{child}
|
||||
</CompactItem>
|
||||
)
|
||||
})
|
||||
return wrapSSR(
|
||||
<div {...attrs} class={cls}>
|
||||
{nodes}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default Compact
|
157
components/space/index.tsx
Normal file
157
components/space/index.tsx
Normal file
@ -0,0 +1,157 @@
|
||||
import {
|
||||
anyType,
|
||||
booleanType,
|
||||
classNames,
|
||||
createInjectionState,
|
||||
filterEmpty,
|
||||
isObject,
|
||||
stringType,
|
||||
vNodeType
|
||||
} from '@v-c/utils'
|
||||
import type { App, CSSProperties } from 'vue'
|
||||
import { computed, defineComponent, shallowRef } from 'vue'
|
||||
import type { SizeType } from '../config-provider/context'
|
||||
import { useProviderConfigState } from '../config-provider/context'
|
||||
import useFlexGapSupport from '../_util/hooks/flex-gap-support'
|
||||
import useStyle from './style'
|
||||
import Item from './item'
|
||||
import Compact from './compact'
|
||||
|
||||
export type SpaceSize = SizeType | number
|
||||
|
||||
const spaceState = function ({ sizes, supportFlexGap, latestIndex }: any) {
|
||||
return {
|
||||
latestIndex: computed(() => latestIndex.value),
|
||||
horizontalSize: computed(() => sizes[0]),
|
||||
verticalSize: computed(() => sizes[1]),
|
||||
supportFlexGap: computed(() => supportFlexGap.value)
|
||||
}
|
||||
}
|
||||
|
||||
export const [useSpaceProvider, useSpaceInject] =
|
||||
createInjectionState(spaceState)
|
||||
|
||||
export const useSpaceContextState = () =>
|
||||
useSpaceInject() ?? {
|
||||
latestIndex: computed(() => 0),
|
||||
horizontalSize: computed(() => 0),
|
||||
verticalSize: computed(() => 0),
|
||||
supportFlexGap: computed(() => false)
|
||||
}
|
||||
|
||||
export const spaceProps = {
|
||||
prefixCls: stringType(),
|
||||
rootClassName: stringType(),
|
||||
size: anyType<SizeType | [SpaceSize, SpaceSize]>('small'),
|
||||
direction: anyType<'horizontal' | 'vertical'>('horizontal'),
|
||||
align: stringType<'start' | 'end' | 'center' | 'baseline'>(),
|
||||
split: vNodeType(),
|
||||
wrap: booleanType(false)
|
||||
}
|
||||
|
||||
const spaceSize = {
|
||||
small: 8,
|
||||
middle: 16,
|
||||
large: 24
|
||||
}
|
||||
|
||||
function getNumberSize(size: SpaceSize) {
|
||||
return typeof size === 'string' ? spaceSize[size] : size || 0
|
||||
}
|
||||
const Space = defineComponent({
|
||||
name: 'ASpace',
|
||||
inheritAttrs: false,
|
||||
props: spaceProps,
|
||||
setup(props, { attrs, slots }) {
|
||||
const { getPrefixCls, direction: directionConfig } =
|
||||
useProviderConfigState()
|
||||
const supportFlexGap = useFlexGapSupport()
|
||||
const prefixCls = computed(() => getPrefixCls('space', props.prefixCls))
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls)
|
||||
const sizes = computed<[SpaceSize, SpaceSize]>(() => {
|
||||
const { size } = props
|
||||
if (Array.isArray(size)) {
|
||||
return size.map(getNumberSize) as [SpaceSize, SpaceSize]
|
||||
}
|
||||
return [getNumberSize(size), getNumberSize(size)] as [
|
||||
SpaceSize,
|
||||
SpaceSize
|
||||
]
|
||||
})
|
||||
const latestIndex = shallowRef(0)
|
||||
|
||||
useSpaceProvider({ sizes, supportFlexGap, latestIndex })
|
||||
|
||||
return () => {
|
||||
const { align, direction, rootClassName, split, wrap } = props
|
||||
const childNodes = filterEmpty(slots.default?.() as any)
|
||||
const mergedAlign =
|
||||
align === undefined && direction === 'horizontal' ? 'center' : align
|
||||
const cn = classNames(
|
||||
prefixCls.value,
|
||||
hashId.value,
|
||||
`${prefixCls.value}-${direction}`,
|
||||
{
|
||||
[`${prefixCls.value}-rtl`]: directionConfig.value === 'rtl',
|
||||
[`${prefixCls.value}-align-${mergedAlign}`]: mergedAlign
|
||||
},
|
||||
attrs.class,
|
||||
rootClassName
|
||||
)
|
||||
const itemClassName = `${prefixCls.value}-item`
|
||||
const marginDirection =
|
||||
directionConfig.value === 'rtl' ? 'marginLeft' : 'marginRight'
|
||||
const nodes = childNodes.map((child, i) => {
|
||||
if (child !== null && child !== undefined) {
|
||||
latestIndex.value = i
|
||||
}
|
||||
const key =
|
||||
(isObject(child) && (child as any).key) || `${itemClassName}-${i}`
|
||||
return (
|
||||
<Item
|
||||
class={itemClassName}
|
||||
key={key}
|
||||
direction={direction}
|
||||
index={i}
|
||||
marginDirection={marginDirection}
|
||||
split={split}
|
||||
wrap={wrap}
|
||||
>
|
||||
{child}
|
||||
</Item>
|
||||
)
|
||||
})
|
||||
|
||||
// =========================== Render ===========================
|
||||
if (childNodes.length === 0) {
|
||||
return null
|
||||
}
|
||||
const gapStyle: CSSProperties = {}
|
||||
if (wrap) {
|
||||
gapStyle.flexWrap = 'wrap'
|
||||
if (!supportFlexGap.value) {
|
||||
gapStyle.marginBottom = `-${sizes.value[1]}px`
|
||||
}
|
||||
}
|
||||
if (supportFlexGap.value) {
|
||||
gapStyle.columnGap = `${sizes.value[0]}px`
|
||||
gapStyle.rowGap = `${sizes.value[1]}px`
|
||||
}
|
||||
return wrapSSR(
|
||||
<div {...attrs} class={cn} style={[gapStyle, (attrs as any).style]}>
|
||||
{nodes}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Space.install = function (app: App) {
|
||||
app.component('ASpace', Space)
|
||||
}
|
||||
|
||||
Space.Compact = Compact
|
||||
export default Space as typeof Space &
|
||||
Plugin & {
|
||||
readonly Compact: typeof Compact
|
||||
}
|
74
components/space/item.tsx
Normal file
74
components/space/item.tsx
Normal file
@ -0,0 +1,74 @@
|
||||
import {
|
||||
booleanType,
|
||||
filterEmpty,
|
||||
numberType,
|
||||
someType,
|
||||
stringType,
|
||||
vNodeType
|
||||
} from '@v-c/utils'
|
||||
import type { CSSProperties, ExtractPropTypes, VNodeChild } from 'vue'
|
||||
import { defineComponent } from 'vue'
|
||||
import { useSpaceContextState } from './index'
|
||||
|
||||
export const itemProps = {
|
||||
className: stringType(),
|
||||
children: vNodeType(),
|
||||
index: numberType(),
|
||||
direction: stringType<'horizontal' | 'vertical'>(),
|
||||
marginDirection: stringType<'marginLeft' | 'marginRight'>(),
|
||||
split: someType<string | (() => VNodeChild) | VNodeChild>([
|
||||
String,
|
||||
Function,
|
||||
Object
|
||||
]),
|
||||
wrap: booleanType()
|
||||
}
|
||||
|
||||
export type ItemProps = ExtractPropTypes<typeof itemProps>
|
||||
|
||||
const Item = defineComponent({
|
||||
name: 'VcSpaceItem',
|
||||
props: itemProps,
|
||||
setup(props, { attrs, slots }) {
|
||||
const { supportFlexGap, latestIndex, verticalSize, horizontalSize } =
|
||||
useSpaceContextState()
|
||||
return () => {
|
||||
const { direction, index, marginDirection, split, wrap } = props
|
||||
const children = slots.default?.()
|
||||
if (!children || filterEmpty(children).length === 0) {
|
||||
return null
|
||||
}
|
||||
let style: CSSProperties = {}
|
||||
if (!supportFlexGap.value) {
|
||||
if (direction === 'vertical') {
|
||||
if (index < latestIndex.value) {
|
||||
style.marginBottom = `${horizontalSize.value / (split ? 2 : 1)}px`
|
||||
}
|
||||
} else {
|
||||
style = {
|
||||
...(index < latestIndex.value &&
|
||||
({
|
||||
[marginDirection]: `${horizontalSize.value / (split ? 2 : 1)}px`
|
||||
} as CSSProperties)),
|
||||
...(wrap && { paddingBottom: `${verticalSize.value}px` })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div class={attrs.class} style={style}>
|
||||
{children}
|
||||
</div>
|
||||
{index < latestIndex.value && split && (
|
||||
<span class={`${attrs.class}-split`} style={style}>
|
||||
{split}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default Item
|
@ -1,7 +1,9 @@
|
||||
import type { AliasToken, GenerateStyle } from '../../theme/internal'
|
||||
import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook'
|
||||
|
||||
const genCollapseMotion: GenerateStyle<TokenWithCommonCls<AliasToken>> = token => ({
|
||||
const genCollapseMotion: GenerateStyle<TokenWithCommonCls<AliasToken>> = (
|
||||
token
|
||||
) => ({
|
||||
[token.componentCls]: {
|
||||
// For common/openAnimation
|
||||
[`${token.antCls}-motion-collapse-legacy`]: {
|
||||
|
@ -1,7 +1,12 @@
|
||||
import { generate } from '@ant-design/colors'
|
||||
import genControlHeight from '../shared/genControlHeight'
|
||||
import genSizeMapToken from '../shared/genSizeMapToken'
|
||||
import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface'
|
||||
import type {
|
||||
ColorPalettes,
|
||||
MapToken,
|
||||
PresetColorType,
|
||||
SeedToken
|
||||
} from '../../interface'
|
||||
import { defaultPresetColors } from '../seed'
|
||||
import genColorMapToken from '../shared/genColorMapToken'
|
||||
import genCommonMapToken from '../shared/genCommonMapToken'
|
||||
@ -10,7 +15,8 @@ import { generateColorPalettes, generateNeutralColorPalettes } from './colors'
|
||||
|
||||
export default function derivative(token: SeedToken): MapToken {
|
||||
const colorPalettes = Object.keys(defaultPresetColors)
|
||||
.map((colorKey: keyof PresetColorType) => {
|
||||
.map((value) => {
|
||||
const colorKey = value as keyof PresetColorType
|
||||
const colors = generate(token[colorKey])
|
||||
|
||||
return new Array(10).fill(1).reduce((prev, _, i) => {
|
||||
|
38
package.json
38
package.json
@ -1,6 +1,7 @@
|
||||
{
|
||||
"name": "antd-tiny-vue",
|
||||
"version": "1.0.0",
|
||||
"packageManager": "pnpm@8.2.0",
|
||||
"description": "this is a tiny antd components for vue3",
|
||||
"keywords": [
|
||||
"antd",
|
||||
@ -12,39 +13,53 @@
|
||||
],
|
||||
"license": "MIT",
|
||||
"author": "aibayanyu",
|
||||
"main": "dist/index.js",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
"types": "lib/index.d.ts",
|
||||
"files": [
|
||||
"lib",
|
||||
"es",
|
||||
"dist",
|
||||
"README.md"
|
||||
],
|
||||
"scripts": {
|
||||
"test": "vitest",
|
||||
"prepare": "husky install",
|
||||
"dev": "vitepress dev",
|
||||
"build:site": "vitepress build",
|
||||
"build:lib": "vite build --config vite.build.config.ts",
|
||||
"build:umd": "vite build --config vite.bundle.config.ts",
|
||||
"copy:css": "cpx \"components/style/*.css\" dist",
|
||||
"preview": "vitepress preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/colors": "^7.0.0",
|
||||
"@antd-tiny-vue/cssinjs": "^0.0.4",
|
||||
"@ant-design/icons-vue": "^6.1.0",
|
||||
"@antd-tiny-vue/cssinjs": "0.0.8",
|
||||
"@ctrl/tinycolor": "^3.6.0",
|
||||
"@v-c/utils": "^0.0.19",
|
||||
"@v-c/utils": "^0.0.22",
|
||||
"@vueuse/core": "^9.13.0",
|
||||
"vue": "^3.2.47"
|
||||
"vue": "^3.3.0-beta.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^17.5.0",
|
||||
"@commitlint/config-conventional": "^17.4.4",
|
||||
"@mistjs/eslint-config-vue-jsx": "^0.0.7",
|
||||
"@mistjs/tsconfig": "^1.0.0",
|
||||
"@mistjs/tsconfig-vue": "^0.0.3",
|
||||
"@mistjs/tsconfig": "^1.1.1",
|
||||
"@mistjs/tsconfig-vue": "^1.1.2",
|
||||
"@types/node": "^18.15.10",
|
||||
"@vitejs/plugin-vue-jsx": "^3.0.1",
|
||||
"cpx": "^1.5.0",
|
||||
"eslint": "^8.36.0",
|
||||
"husky": "^8.0.3",
|
||||
"lint-staged": "^13.2.0",
|
||||
"prettier": "^2.8.7",
|
||||
"typescript": "^4.9.5",
|
||||
"typescript": "^5.0.4",
|
||||
"unbuild": "^1.1.2",
|
||||
"vite": "^4.2.1",
|
||||
"vite-plugin-vitepress-demo": "2.0.0-beta.28",
|
||||
"vitepress": "1.0.0-alpha.69",
|
||||
"vite": "^4.3.3",
|
||||
"vite-plugin-dts": "^2.3.0",
|
||||
"vite-plugin-vitepress-demo": "2.0.0-beta.29",
|
||||
"vitepress": "1.0.0-alpha.74",
|
||||
"vitest": "^0.28.5"
|
||||
},
|
||||
"pnpm": {
|
||||
@ -52,6 +67,9 @@
|
||||
"ignoreMissing": [
|
||||
"@algolia/client-search"
|
||||
]
|
||||
},
|
||||
"overrides": {
|
||||
"vue": "3.3.0-beta.2"
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
|
2693
pnpm-lock.yaml
generated
2693
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -1,3 +1,6 @@
|
||||
{
|
||||
"extends": "@mistjs/tsconfig-vue"
|
||||
"extends": "@mistjs/tsconfig-vue",
|
||||
"compilerOptions": {
|
||||
"moduleResolution": "bundler"
|
||||
}
|
||||
}
|
||||
|
47
vite.build.config.ts
Normal file
47
vite.build.config.ts
Normal file
@ -0,0 +1,47 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||
import dts from 'vite-plugin-dts'
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vueJsx(),
|
||||
dts({
|
||||
outputDir: ['es', 'lib'],
|
||||
include: ['components/**/*.ts', 'components/**/*.tsx']
|
||||
})
|
||||
],
|
||||
build: {
|
||||
minify: false,
|
||||
rollupOptions: {
|
||||
external: [
|
||||
'@ant-design/colors',
|
||||
/^@ant-design\/icons-vue/,
|
||||
'@antd-tiny-vue/cssinjs',
|
||||
'@ctrl/tinycolor',
|
||||
'@v-c/utils',
|
||||
'@vueuse/core',
|
||||
'vue'
|
||||
],
|
||||
output: [
|
||||
{
|
||||
format: 'es',
|
||||
dir: 'es',
|
||||
entryFileNames: '[name].js',
|
||||
preserveModules: true,
|
||||
preserveModulesRoot: 'components'
|
||||
},
|
||||
{
|
||||
format: 'cjs',
|
||||
dir: 'lib',
|
||||
entryFileNames: '[name].js',
|
||||
preserveModules: true,
|
||||
preserveModulesRoot: 'components',
|
||||
exports: 'named'
|
||||
}
|
||||
]
|
||||
},
|
||||
lib: {
|
||||
entry: 'components/index.ts',
|
||||
formats: ['es', 'cjs']
|
||||
}
|
||||
}
|
||||
})
|
13
vite.bundle.config.ts
Normal file
13
vite.bundle.config.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||
export default defineConfig({
|
||||
plugins: [vueJsx()],
|
||||
build: {
|
||||
lib: {
|
||||
entry: 'components/index.ts',
|
||||
name: 'Antd',
|
||||
fileName: () => `antd.js`,
|
||||
formats: ['umd']
|
||||
}
|
||||
}
|
||||
})
|
Reference in New Issue
Block a user