Feat v4 theme editor (#6349)
* feat: add theme editor container * feat: add theme editor layout * add left panel * add vue-colorful & fix bug * 修复hue组件抖动问题 * fix bug && add demo * fix bug * fix demo preview * fix theme editor components demo * add theme editor token drawer * add theme editor token drawer * fix bug * open commment * fix error demo * fix theme editor bugpull/6358/head
果冻橙
GitHub
parent
dde2ff140d
commit
f819a1b209
|
|
@ -1,5 +1,5 @@
|
|||
import type { InputProps } from 'ant-design-vue';
|
||||
import { Input, InputNumber, Select, theme } from 'ant-design-vue';
|
||||
import { ConfigProvider, Input, InputNumber, Select, theme } from 'ant-design-vue';
|
||||
import classNames from 'ant-design-vue/es/_util/classNames';
|
||||
import type { PropType } from 'vue';
|
||||
import { defineComponent, watchEffect, watch, computed, toRefs, ref } from 'vue';
|
||||
|
|
@ -175,32 +175,32 @@ const RgbColorInput = defineComponent({
|
|||
return () => {
|
||||
return (
|
||||
<div class="color-panel-rgba-input">
|
||||
{/* <ConfigProvider theme={{ components: { InputNumber: { handleWidth: 12 } } }}> */}
|
||||
<div class="color-panel-rgba-input-part">
|
||||
<InputNumber min={0} max={255} size="small" v-model={[value.value.r, 'value']} />
|
||||
<div class="color-panel-mode-title">R</div>
|
||||
</div>
|
||||
<div class="color-panel-rgba-input-part">
|
||||
<InputNumber min={0} max={255} size="small" v-model={[value.value.g, 'value']} />
|
||||
<div class="color-panel-mode-title">G</div>
|
||||
</div>
|
||||
<div class="color-panel-rgba-input-part">
|
||||
<InputNumber min={0} max={255} size="small" v-model={[value.value.b, 'value']} />
|
||||
<div class="color-panel-mode-title">B</div>
|
||||
</div>
|
||||
{alpha && (
|
||||
<ConfigProvider theme={{ components: { InputNumber: { handleWidth: 12 } } }}>
|
||||
<div class="color-panel-rgba-input-part">
|
||||
<InputNumber
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
size="small"
|
||||
v-model={[value.value.a, 'value']}
|
||||
/>
|
||||
<div class="color-panel-mode-title">A</div>
|
||||
<InputNumber min={0} max={255} size="small" v-model={[value.value.r, 'value']} />
|
||||
<div class="color-panel-mode-title">R</div>
|
||||
</div>
|
||||
)}
|
||||
{/* </ConfigProvider> */}
|
||||
<div class="color-panel-rgba-input-part">
|
||||
<InputNumber min={0} max={255} size="small" v-model={[value.value.g, 'value']} />
|
||||
<div class="color-panel-mode-title">G</div>
|
||||
</div>
|
||||
<div class="color-panel-rgba-input-part">
|
||||
<InputNumber min={0} max={255} size="small" v-model={[value.value.b, 'value']} />
|
||||
<div class="color-panel-mode-title">B</div>
|
||||
</div>
|
||||
{alpha.value && (
|
||||
<div class="color-panel-rgba-input-part">
|
||||
<InputNumber
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
size="small"
|
||||
v-model={[value.value.a, 'value']}
|
||||
/>
|
||||
<div class="color-panel-mode-title">A</div>
|
||||
</div>
|
||||
)}
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -282,7 +282,7 @@ const ColorPanel = defineComponent({
|
|||
{(colorMode.value === 'RGBA' || colorMode.value === 'HEX8') && (
|
||||
<RgbaColorPicker
|
||||
style={{ height: '160px' }}
|
||||
color={tinycolor(color).toRgb()}
|
||||
color={tinycolor(color.value).toRgb()}
|
||||
onChange={value => {
|
||||
props.onChange(getColorStr(value, colorMode.value));
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
import type { CSSProperties, PropType } from 'vue';
|
||||
import { defineComponent, toRefs } from 'vue';
|
||||
import { antdComponents } from './component-panel';
|
||||
import type { Theme } from './interface';
|
||||
import ComponentDemoPro from './token-panel-pro/ComponentDemoPro';
|
||||
|
||||
export type PreviewDemoProps = {
|
||||
theme: Theme;
|
||||
};
|
||||
|
||||
const PreviewDemo = defineComponent({
|
||||
name: 'PreviewDemo',
|
||||
props: {
|
||||
theme: { type: Object as PropType<Theme> },
|
||||
},
|
||||
setup(props, { attrs }) {
|
||||
const { theme } = toRefs(props);
|
||||
|
||||
return () => {
|
||||
return (
|
||||
<div {...attrs} style={{ ...(attrs.style as CSSProperties), overflow: 'auto' }}>
|
||||
<ComponentDemoPro
|
||||
theme={theme.value}
|
||||
components={antdComponents}
|
||||
componentDrawer={false}
|
||||
showAll
|
||||
style={{ minHeight: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
export default PreviewDemo;
|
||||
|
|
@ -0,0 +1,240 @@
|
|||
import type { PropType } from 'vue';
|
||||
import { defineComponent, toRefs, computed } from 'vue';
|
||||
import makeStyle from './utils/makeStyle';
|
||||
import classNames from 'ant-design-vue/es/_util/classNames';
|
||||
import { Button, Dropdown, Menu } from 'ant-design-vue';
|
||||
import { CloseOutlined, PlusOutlined } from '@ant-design/icons-vue';
|
||||
import type { Theme } from './interface';
|
||||
|
||||
interface ThemeItem extends Theme {
|
||||
icon?: any;
|
||||
closable?: boolean;
|
||||
fixed?: boolean;
|
||||
}
|
||||
|
||||
export type ThemeSelectProps = {
|
||||
onEnabledThemeChange: (themes: string[]) => void;
|
||||
onShownThemeChange: (
|
||||
themes: string[],
|
||||
selectTheme: string,
|
||||
info: { type: 'select' | 'deselect' },
|
||||
) => void;
|
||||
enabledThemes: string[];
|
||||
shownThemes: string[];
|
||||
themes: ThemeItem[];
|
||||
showAddTheme?: boolean;
|
||||
};
|
||||
|
||||
const useStyle = makeStyle('ThemeSelect', token => ({
|
||||
'.previewer-theme-select': {
|
||||
padding: `${token.paddingXXS}px ${token.paddingXS}px`,
|
||||
borderRadius: 4,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.02)',
|
||||
height: token.controlHeight,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
overflow: 'hidden',
|
||||
|
||||
[`${token.rootCls}-btn.previewer-theme-select-add-btn`]: {
|
||||
minWidth: 0,
|
||||
width: 16,
|
||||
height: 16,
|
||||
fontSize: 8,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginInlineStart: token.marginSM,
|
||||
boxShadow: 'none',
|
||||
},
|
||||
|
||||
'.previewer-theme-select-tag': {
|
||||
height: 22,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
boxSizing: 'border-box',
|
||||
borderRadius: 4,
|
||||
backgroundColor: token.colorBgContainer,
|
||||
border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
|
||||
paddingInline: 10,
|
||||
fontSize: token.fontSizeSM,
|
||||
position: 'relative',
|
||||
cursor: 'pointer',
|
||||
// transition: `all ${token.motionDurationMid}`,
|
||||
|
||||
'&:not(:last-child)': {
|
||||
marginInlineEnd: token.marginXS,
|
||||
},
|
||||
|
||||
'&.previewer-theme-select-tag-active': {
|
||||
border: `${token.lineWidth}px ${token.lineType} ${token['blue-1']}`,
|
||||
backgroundColor: 'rgba(22,119,255,0.10)',
|
||||
color: token.colorPrimary,
|
||||
|
||||
'&::after': {
|
||||
content: '""',
|
||||
borderStartEndRadius: 2,
|
||||
position: 'absolute',
|
||||
insetInlineEnd: 2,
|
||||
top: 2,
|
||||
width: 6,
|
||||
height: 6,
|
||||
background: `linear-gradient(to right top, transparent, transparent 50%, ${token.colorPrimary} 50%, ${token.colorPrimary} 100%)`,
|
||||
},
|
||||
},
|
||||
|
||||
'.previewer-theme-select-tag-close-btn': {
|
||||
position: 'absolute',
|
||||
top: -2,
|
||||
insetInlineEnd: -2,
|
||||
width: 12,
|
||||
height: 12,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: token.colorBgContainer,
|
||||
boxShadow:
|
||||
'0 2px 8px -2px rgba(0,0,0,0.05), 0 1px 4px -1px rgba(25,15,15,0.07), 0 0 1px 0 rgba(0,0,0,0.08)',
|
||||
borderRadius: '50%',
|
||||
opacity: 0,
|
||||
pointerEvents: 'none',
|
||||
zIndex: 2,
|
||||
color: token.colorIcon,
|
||||
|
||||
'> .anticon': {
|
||||
fontSize: 6,
|
||||
},
|
||||
},
|
||||
|
||||
'&:hover': {
|
||||
'.previewer-theme-select-tag-close-btn': {
|
||||
opacity: 1,
|
||||
pointerEvents: 'initial',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
'.previewer-theme-select-dropdown': {
|
||||
'.previewer-theme-select-dropdown-title': {
|
||||
[`${token.rootCls}-dropdown-menu-item-group-title`]: {
|
||||
fontSize: token.fontSizeSM,
|
||||
paddingBottom: token.padding,
|
||||
paddingTop: 10,
|
||||
},
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
const ThemeSelect = defineComponent({
|
||||
name: 'ThemeSelect',
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
onEnabledThemeChange: { type: Function as PropType<(themes: string[]) => void> },
|
||||
onShownThemeChange: {
|
||||
type: Function as PropType<
|
||||
(themes: string[], selectTheme: string, info: { type: 'select' | 'deselect' }) => void
|
||||
>,
|
||||
},
|
||||
enabledThemes: { type: Array as PropType<string[]> },
|
||||
shownThemes: { type: Array as PropType<string[]> },
|
||||
themes: { type: Array as PropType<ThemeItem[]> },
|
||||
showAddTheme: { type: Boolean },
|
||||
},
|
||||
setup(props, { attrs }) {
|
||||
const { enabledThemes, shownThemes, themes, showAddTheme } = toRefs(props);
|
||||
|
||||
const [wrapSSR, hashId] = useStyle();
|
||||
|
||||
const dropdownItems = computed(() => [
|
||||
{
|
||||
disabled: true,
|
||||
label: '添加主题即可预览',
|
||||
className: 'previewer-theme-select-dropdown-title',
|
||||
type: 'group',
|
||||
key: 'add-theme-to-preview',
|
||||
},
|
||||
...themes.value
|
||||
.filter(theme => !shownThemes.value.includes(theme.key))
|
||||
.map(theme => ({
|
||||
icon: theme.icon,
|
||||
value: theme.key,
|
||||
label: theme.name,
|
||||
key: theme.key,
|
||||
onClick: () => {
|
||||
props.onShownThemeChange([...shownThemes.value, theme.key], theme.key, {
|
||||
type: 'select',
|
||||
});
|
||||
},
|
||||
})),
|
||||
]);
|
||||
|
||||
const shownThemeEntities = computed(() =>
|
||||
themes.value.filter(theme => shownThemes.value.includes(theme.key)),
|
||||
);
|
||||
|
||||
return () => {
|
||||
return wrapSSR(
|
||||
<div {...attrs} class={classNames('previewer-theme-select', hashId.value, attrs.class)}>
|
||||
{shownThemeEntities.value.map(theme => (
|
||||
<span
|
||||
onClick={() => {
|
||||
if (theme.fixed) {
|
||||
return;
|
||||
}
|
||||
props.onEnabledThemeChange(
|
||||
enabledThemes.value.includes(theme.key)
|
||||
? enabledThemes.value.filter(item => item !== theme.key)
|
||||
: [...enabledThemes.value, theme.key],
|
||||
);
|
||||
}}
|
||||
key={theme.key}
|
||||
class={classNames('previewer-theme-select-tag', {
|
||||
'previewer-theme-select-tag-active': enabledThemes.value.includes(theme.key),
|
||||
})}
|
||||
>
|
||||
{theme.name}
|
||||
{theme.closable && (
|
||||
<span
|
||||
class="previewer-theme-select-tag-close-btn"
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
props.onEnabledThemeChange(
|
||||
enabledThemes.value.filter(item => item !== theme.key),
|
||||
);
|
||||
props.onShownThemeChange(
|
||||
shownThemes.value.filter(item => item !== theme.key),
|
||||
theme.key,
|
||||
{ type: 'deselect' },
|
||||
);
|
||||
}}
|
||||
>
|
||||
<CloseOutlined />
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
{showAddTheme.value && (
|
||||
<Dropdown
|
||||
placement="bottomRight"
|
||||
trigger={['click']}
|
||||
overlayClassName={classNames('previewer-theme-select-dropdown', hashId.value)}
|
||||
v-slots={{
|
||||
overlay: () => <Menu items={dropdownItems.value} />,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
type="primary"
|
||||
shape="circle"
|
||||
class="previewer-theme-select-add-btn"
|
||||
icon={<PlusOutlined />}
|
||||
/>
|
||||
</Dropdown>
|
||||
)}
|
||||
</div>,
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
export default ThemeSelect;
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Button, Dropdown, Input, InputNumber } from 'ant-design-vue';
|
||||
import { Button, Popover, Input, InputNumber } from 'ant-design-vue';
|
||||
import classNames from 'ant-design-vue/es/_util/classNames';
|
||||
import type { PropType } from 'vue';
|
||||
import { defineComponent, toRefs, computed, ref, watch } from 'vue';
|
||||
|
|
@ -171,17 +171,23 @@ const TokenInput = defineComponent({
|
|||
value={String(tokenValue.value)}
|
||||
disabled={readonly.value}
|
||||
addonBefore={
|
||||
<Dropdown
|
||||
trigger={['click']}
|
||||
overlay={
|
||||
<ColorPanel
|
||||
alpha
|
||||
color={String(tokenValue.value)}
|
||||
onChange={(v: string) => {
|
||||
handleTokenChange(v);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
<Popover
|
||||
trigger="click"
|
||||
placement="bottomRight"
|
||||
arrow-point-at-center
|
||||
overlayInnerStyle={{ padding: 0 }}
|
||||
v-slots={{
|
||||
content: () => (
|
||||
<ColorPanel
|
||||
alpha
|
||||
color={String(tokenValue.value)}
|
||||
style={{ border: 'none' }}
|
||||
onChange={(v: string) => {
|
||||
handleTokenChange(v);
|
||||
}}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
>
|
||||
<ColorPreview
|
||||
color={String(tokenValue.value)}
|
||||
|
|
@ -192,7 +198,7 @@ const TokenInput = defineComponent({
|
|||
verticalAlign: 'top',
|
||||
}}
|
||||
/>
|
||||
</Dropdown>
|
||||
</Popover>
|
||||
}
|
||||
onChange={e => {
|
||||
handleTokenChange(e.target.value);
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const text = ` A dog is a type of domesticated animal. Known for its loyalty a
|
|||
const Demo = defineComponent({
|
||||
setup() {
|
||||
return () => (
|
||||
<Collapse defaultActiveKey={['1']}>
|
||||
<Collapse activeKey={['1']}>
|
||||
<Panel header="This is panel header 1" key="1">
|
||||
<p>{text}</p>
|
||||
</Panel>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,14 @@
|
|||
import { defineComponent } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { message, Button } from 'ant-design-vue';
|
||||
import type { ComponentDemo } from '../../interface';
|
||||
|
||||
const { _InternalPanelDoNotUseOrYouWillBeFired } = message;
|
||||
|
||||
const Demo = defineComponent({
|
||||
setup() {
|
||||
return () => (
|
||||
<_InternalPanelDoNotUseOrYouWillBeFired
|
||||
type={'error'}
|
||||
content={'这是一条异常消息，会主动消失'}
|
||||
/>
|
||||
);
|
||||
const error = () => {
|
||||
message.error('This is an error message');
|
||||
};
|
||||
|
||||
return () => <Button onClick={error}>Error</Button>;
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,16 @@
|
|||
import { defineComponent } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { message, Button } from 'ant-design-vue';
|
||||
import type { ComponentDemo } from '../../interface';
|
||||
|
||||
const { _InternalPanelDoNotUseOrYouWillBeFired } = message;
|
||||
|
||||
const Demo = defineComponent({
|
||||
setup() {
|
||||
return () => <_InternalPanelDoNotUseOrYouWillBeFired type={'info'} content={'Info'} />;
|
||||
const info = () => {
|
||||
message.info('This is an info message');
|
||||
};
|
||||
|
||||
return () => <Button onClick={info}>Info</Button>;
|
||||
},
|
||||
});
|
||||
|
||||
const componentDemo: ComponentDemo = {
|
||||
demo: <Demo />,
|
||||
tokens: ['colorInfo'],
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
import { defineComponent } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import { message, Button } from 'ant-design-vue';
|
||||
import type { ComponentDemo } from '../../interface';
|
||||
|
||||
const { _InternalPanelDoNotUseOrYouWillBeFired } = message;
|
||||
|
||||
const Demo = defineComponent({
|
||||
setup() {
|
||||
return () => (
|
||||
<_InternalPanelDoNotUseOrYouWillBeFired type={'info'} content={`Hello, Ant Design!`} />
|
||||
);
|
||||
const info = () => {
|
||||
message.info('Hello, Ant Design Vue!');
|
||||
};
|
||||
|
||||
return () => <Button onClick={info}>Info</Button>;
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,14 @@
|
|||
import { defineComponent } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { message, Button } from 'ant-design-vue';
|
||||
import type { ComponentDemo } from '../../interface';
|
||||
|
||||
const { _InternalPanelDoNotUseOrYouWillBeFired } = message;
|
||||
|
||||
const Demo = defineComponent({
|
||||
setup() {
|
||||
return () => (
|
||||
<_InternalPanelDoNotUseOrYouWillBeFired
|
||||
type={'success'}
|
||||
content={'这是一条成功消息，会主动消失'}
|
||||
/>
|
||||
);
|
||||
const success = () => {
|
||||
message.success('This is an success message');
|
||||
};
|
||||
|
||||
return () => <Button onClick={success}>Success</Button>;
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,14 @@
|
|||
import { defineComponent } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { message, Button } from 'ant-design-vue';
|
||||
import type { ComponentDemo } from '../../interface';
|
||||
|
||||
const { _InternalPanelDoNotUseOrYouWillBeFired } = message;
|
||||
|
||||
const Demo = defineComponent({
|
||||
setup() {
|
||||
return () => (
|
||||
<_InternalPanelDoNotUseOrYouWillBeFired
|
||||
type={'warning'}
|
||||
content={'这是一条警告消息，会主动消失'}
|
||||
/>
|
||||
);
|
||||
const warning = () => {
|
||||
message.warning('This is an warning message');
|
||||
};
|
||||
|
||||
return () => <Button onClick={warning}>Warning</Button>;
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,18 @@
|
|||
import { defineComponent } from 'vue';
|
||||
import { notification } from 'ant-design-vue';
|
||||
import { notification, Button } from 'ant-design-vue';
|
||||
import type { ComponentDemo } from '../../interface';
|
||||
|
||||
const { _InternalPanelDoNotUseOrYouWillBeFired } = notification;
|
||||
|
||||
const Demo = defineComponent({
|
||||
setup() {
|
||||
return () => (
|
||||
<_InternalPanelDoNotUseOrYouWillBeFired
|
||||
message={'Notification Title'}
|
||||
type={'error'}
|
||||
description={
|
||||
'This is the content of the notification. This is the content of the notification. This is the content of the notification.'
|
||||
}
|
||||
/>
|
||||
);
|
||||
const error = () => {
|
||||
notification.error({
|
||||
message: 'Notification Title',
|
||||
description:
|
||||
'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
|
||||
});
|
||||
};
|
||||
|
||||
return () => <Button onClick={error}>Error</Button>;
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,18 @@
|
|||
import { defineComponent } from 'vue';
|
||||
import { notification } from 'ant-design-vue';
|
||||
import { notification, Button } from 'ant-design-vue';
|
||||
import type { ComponentDemo } from '../../interface';
|
||||
|
||||
const { _InternalPanelDoNotUseOrYouWillBeFired } = notification;
|
||||
|
||||
const Demo = defineComponent({
|
||||
setup() {
|
||||
return () => (
|
||||
<_InternalPanelDoNotUseOrYouWillBeFired
|
||||
message={'Notification Title'}
|
||||
type={'info'}
|
||||
description={
|
||||
'This is the content of the notification. This is the content of the notification. This is the content of the notification.'
|
||||
}
|
||||
/>
|
||||
);
|
||||
const info = () => {
|
||||
notification.info({
|
||||
message: 'Notification Title',
|
||||
description:
|
||||
'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
|
||||
});
|
||||
};
|
||||
|
||||
return () => <Button onClick={info}>Info</Button>;
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +1,18 @@
|
|||
import { defineComponent } from 'vue';
|
||||
import { notification } from 'ant-design-vue';
|
||||
import { notification, Button } from 'ant-design-vue';
|
||||
import type { ComponentDemo } from '../../interface';
|
||||
|
||||
const { _InternalPanelDoNotUseOrYouWillBeFired } = notification;
|
||||
|
||||
const Demo = defineComponent({
|
||||
setup() {
|
||||
return () => (
|
||||
<_InternalPanelDoNotUseOrYouWillBeFired
|
||||
message={'Notification Title'}
|
||||
description={
|
||||
'This is the content of the notification. This is the content of the notification. This is the content of the notification.'
|
||||
}
|
||||
/>
|
||||
);
|
||||
const open = () => {
|
||||
notification.open({
|
||||
message: 'Notification Title',
|
||||
description:
|
||||
'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
|
||||
});
|
||||
};
|
||||
|
||||
return () => <Button onClick={open}>Open</Button>;
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,18 @@
|
|||
import { defineComponent } from 'vue';
|
||||
import { notification } from 'ant-design-vue';
|
||||
import { notification, Button } from 'ant-design-vue';
|
||||
import type { ComponentDemo } from '../../interface';
|
||||
|
||||
const { _InternalPanelDoNotUseOrYouWillBeFired } = notification;
|
||||
|
||||
const Demo = defineComponent({
|
||||
setup() {
|
||||
return () => (
|
||||
<_InternalPanelDoNotUseOrYouWillBeFired
|
||||
message={'Notification Title'}
|
||||
type={'success'}
|
||||
description={
|
||||
'This is the content of the notification. This is the content of the notification. This is the content of the notification.'
|
||||
}
|
||||
/>
|
||||
);
|
||||
const success = () => {
|
||||
notification.success({
|
||||
message: 'Notification Title',
|
||||
description:
|
||||
'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
|
||||
});
|
||||
};
|
||||
|
||||
return () => <Button onClick={success}>Success</Button>;
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,18 @@
|
|||
import { defineComponent } from 'vue';
|
||||
import { notification } from 'ant-design-vue';
|
||||
import { notification, Button } from 'ant-design-vue';
|
||||
import type { ComponentDemo } from '../../interface';
|
||||
|
||||
const { _InternalPanelDoNotUseOrYouWillBeFired } = notification;
|
||||
|
||||
const Demo = defineComponent({
|
||||
setup() {
|
||||
return () => (
|
||||
<_InternalPanelDoNotUseOrYouWillBeFired
|
||||
message={'Notification Title'}
|
||||
type={'warning'}
|
||||
description={
|
||||
'This is the content of the notification. This is the content of the notification. This is the content of the notification.'
|
||||
}
|
||||
/>
|
||||
);
|
||||
const warning = () => {
|
||||
notification.warning({
|
||||
message: 'Notification Title',
|
||||
description:
|
||||
'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
|
||||
});
|
||||
};
|
||||
|
||||
return () => <Button onClick={warning}>Warning</Button>;
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { defineComponent, ref } from 'vue';
|
||||
import { defineComponent } from 'vue';
|
||||
import { Popconfirm, message } from 'ant-design-vue';
|
||||
import type { ComponentDemo } from '../../interface';
|
||||
|
||||
|
|
@ -10,8 +10,6 @@ function cancel() {
|
|||
}
|
||||
const Demo = defineComponent({
|
||||
setup() {
|
||||
const open = ref(true);
|
||||
|
||||
return () => (
|
||||
<div
|
||||
style={{
|
||||
|
|
@ -28,7 +26,6 @@ const Demo = defineComponent({
|
|||
placement={'topLeft'}
|
||||
getPopupContainer={node => {
|
||||
if (node) {
|
||||
console.log(node.parentNode);
|
||||
return node.parentNode as HTMLElement;
|
||||
}
|
||||
return document.body;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { defineComponent } from 'vue';
|
||||
import { Progress, Space } from 'ant-design-vue';
|
||||
|
||||
import type { ComponentDemo } from '../../interface';
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import classNames from 'ant-design-vue/es/_util/classNames';
|
|||
import ComponentDemos from '../component-demos';
|
||||
import type { AliasToken, ComponentDemo, MutableTheme, TokenName, TokenValue } from '../interface';
|
||||
import { useInjectLocaleContext } from '../locale';
|
||||
// import TokenCard from '../token-panel/token-card';
|
||||
import TokenCard from '../token-panel/token-card';
|
||||
import getDesignToken from '../utils/getDesignToken';
|
||||
import makeStyle from '../utils/makeStyle';
|
||||
import { getComponentToken } from '../utils/statistic';
|
||||
|
|
@ -124,7 +124,7 @@ const ComponentTokenDrawer = defineComponent({
|
|||
const componentTokenData = computed(() => Object.keys(componentToken.value ?? {}));
|
||||
|
||||
const aliasTokenData = computed(() => {
|
||||
return aliasTokenNames.value.sort();
|
||||
return aliasTokenNames.sort();
|
||||
});
|
||||
|
||||
const handleComponentTokenChange = (token: string, value: TokenValue) => {
|
||||
|
|
@ -165,17 +165,19 @@ const ComponentTokenDrawer = defineComponent({
|
|||
<ComponentFullDemos demos={ComponentDemos[component.value]} />
|
||||
</ConfigProvider>
|
||||
</ConfigProvider>
|
||||
<div style={{ flex: '0 0 400px', overflow: 'auto', padding: 24 }}>
|
||||
<div
|
||||
style={{ flex: '0 0 400px', overflow: 'auto', overflowX: 'hidden', padding: '24px' }}
|
||||
>
|
||||
<div class="previewer-component-drawer-subtitle">Related Tokens / 相关 token</div>
|
||||
{/* <TokenCard
|
||||
<TokenCard
|
||||
icon={<BuildOutlined />}
|
||||
hideUsageCount
|
||||
defaultOpen
|
||||
title="Component Token"
|
||||
tokenArr={componentTokenData}
|
||||
tokenPath={['components', component]}
|
||||
themes={[theme]}
|
||||
fallback={() => componentToken}
|
||||
tokenArr={componentTokenData.value}
|
||||
tokenPath={['components', component.value]}
|
||||
themes={[theme.value]}
|
||||
fallback={() => componentToken.value}
|
||||
onTokenChange={(_, tokenName, value) =>
|
||||
handleComponentTokenChange(tokenName, value)
|
||||
}
|
||||
|
|
@ -185,7 +187,7 @@ const ComponentTokenDrawer = defineComponent({
|
|||
description="暂无相关 Component Token"
|
||||
style={{
|
||||
marginBlock: 0,
|
||||
paddingBlock: 32,
|
||||
paddingBlock: '32px',
|
||||
}}
|
||||
/>
|
||||
}
|
||||
|
|
@ -193,11 +195,11 @@ const ComponentTokenDrawer = defineComponent({
|
|||
<TokenCard
|
||||
icon={<CarOutlined />}
|
||||
hideUsageCount
|
||||
themes={[theme]}
|
||||
themes={[theme.value]}
|
||||
defaultOpen
|
||||
title="Alias Token"
|
||||
tokenArr={aliasTokenData}
|
||||
tokenPath={['components', component]}
|
||||
tokenArr={aliasTokenData.value}
|
||||
tokenPath={['components', component.value]}
|
||||
fallback={themeConfig => getDesignToken(themeConfig) as AliasToken}
|
||||
onTokenChange={(_, tokenName, value) =>
|
||||
handleComponentTokenChange(tokenName, value)
|
||||
|
|
@ -208,11 +210,11 @@ const ComponentTokenDrawer = defineComponent({
|
|||
description="暂无相关 Alias Token"
|
||||
style={{
|
||||
marginBlock: 0,
|
||||
paddingBlock: 32,
|
||||
paddingBlock: '32px',
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/> */}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Drawer>
|
||||
|
|
@ -232,14 +234,14 @@ export default defineComponent({
|
|||
},
|
||||
setup(props, { attrs }) {
|
||||
return () => (
|
||||
// <ConfigProvider
|
||||
// theme={{
|
||||
// algorithm: defaultAlgorithm,
|
||||
// ...props.theme,
|
||||
// }}
|
||||
// >
|
||||
<ComponentTokenDrawer {...props} {...attrs} />
|
||||
// </ConfigProvider>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
algorithm: defaultAlgorithm,
|
||||
...props.theme,
|
||||
}}
|
||||
>
|
||||
<ComponentTokenDrawer {...props} {...attrs} />
|
||||
</ConfigProvider>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,81 +0,0 @@
|
|||
import { createVNode } from 'vue';
|
||||
|
||||
function Arrow(props) {
|
||||
return /*#__PURE__*/ React.createElement(
|
||||
'svg',
|
||||
Object.assign(
|
||||
{
|
||||
width: '1em',
|
||||
height: '1em',
|
||||
viewBox: '0 0 16 16',
|
||||
xmlns: 'http://www.w3.org/2000/svg',
|
||||
xmlnsXlink: 'http://www.w3.org/1999/xlink',
|
||||
},
|
||||
props,
|
||||
{
|
||||
style: Object.assign(
|
||||
{
|
||||
verticalAlign: '-0.125em',
|
||||
},
|
||||
props.style,
|
||||
),
|
||||
className: ['nanqu-token-panel-icon', props.className].filter(Boolean).join(' '),
|
||||
},
|
||||
),
|
||||
/*#__PURE__*/ React.createElement(
|
||||
'g',
|
||||
{
|
||||
id: 'Arrow-\u9875\u9762-1',
|
||||
stroke: 'none',
|
||||
strokeWidth: 1,
|
||||
fill: 'none',
|
||||
fillRule: 'evenodd',
|
||||
},
|
||||
/*#__PURE__*/ React.createElement(
|
||||
'g',
|
||||
{
|
||||
id: 'Arrow-\u4E3B\u9898\u9884\u89C8\u5668---\u7EC4\u4EF6\u9884\u89C8',
|
||||
transform: 'translate(-335.000000, -153.000000)',
|
||||
fill: 'currentColor',
|
||||
fillRule: 'nonzero',
|
||||
},
|
||||
/*#__PURE__*/ React.createElement(
|
||||
'g',
|
||||
{
|
||||
id: 'Arrow-\u7F16\u7EC4-18',
|
||||
transform: 'translate(0.000000, 70.000000)',
|
||||
},
|
||||
/*#__PURE__*/ React.createElement(
|
||||
'g',
|
||||
{
|
||||
id: 'Arrow-\u7F16\u7EC4-13',
|
||||
transform: 'translate(331.000000, 79.000000)',
|
||||
},
|
||||
/*#__PURE__*/ React.createElement(
|
||||
'g',
|
||||
{
|
||||
id: 'Arrow-\u6298\u53E0\u7BAD\u5934_Black@2x',
|
||||
transform:
|
||||
'translate(12.000000, 12.000000) rotate(90.000000) translate(-12.000000, -12.000000) translate(4.000000, 4.000000)',
|
||||
},
|
||||
/*#__PURE__*/ React.createElement('rect', {
|
||||
id: 'Arrow-\u77E9\u5F62',
|
||||
opacity: 0,
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 16,
|
||||
height: 16,
|
||||
}),
|
||||
/*#__PURE__*/ React.createElement('path', {
|
||||
d: 'M8.576,10.6224 C8.46400007,10.7357654 8.31136002,10.7997014 8.152,10.8 L7.848,10.8 C7.68897547,10.7980619 7.53693306,10.7343763 7.424,10.6224 L3.3184,6.4672 C3.16044703,6.30862179 3.16044703,6.05217821 3.3184,5.8936 L3.8864,5.3192 C3.95991079,5.24354153 4.06091047,5.20085176 4.1664,5.20085176 C4.27188953,5.20085176 4.37288921,5.24354153 4.4464,5.3192 L8,8.9168 L11.5536,5.3192 C11.6284927,5.24307539 11.7308111,5.20020394 11.8376,5.20020394 C11.9443889,5.20020394 12.0467073,5.24307539 12.1216,5.3192 L12.6816,5.8936 C12.839553,6.05217821 12.839553,6.30862179 12.6816,6.4672 L8.576,10.6224 Z',
|
||||
id: 'Arrow-\u8DEF\u5F84',
|
||||
}),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
export default Arrow;
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
import type { CSSProperties } from 'vue';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
const Arrow = defineComponent({
|
||||
name: 'Arrow',
|
||||
props: {
|
||||
rotate: { type: Number },
|
||||
},
|
||||
setup(props, { attrs }) {
|
||||
return () => {
|
||||
return (
|
||||
<svg
|
||||
{...attrs}
|
||||
width="1em"
|
||||
height="1em"
|
||||
style={{
|
||||
verticalAlign: '-0.125em',
|
||||
transform: `rotate(${props.rotate})`,
|
||||
...(attrs.style as CSSProperties),
|
||||
}}
|
||||
class={['nanqu-token-panel-icon', attrs.class].filter(Boolean).join(' ')}
|
||||
viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
id="Arrow-\u9875\u9762-1"
|
||||
stroke="none"
|
||||
stroke-width="1"
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
>
|
||||
<g
|
||||
id="Arrow-\u4E3B\u9898\u9884\u89C8\u5668---\u7EC4\u4EF6\u9884\u89C8"
|
||||
transform="translate(-335.000000, -153.000000)"
|
||||
fill="currentColor"
|
||||
fill-rule="nonzero"
|
||||
>
|
||||
<g id="Arrow-\u7F16\u7EC4-18" transform="translate(0.000000, 70.000000)">
|
||||
<g id="Arrow-\u7F16\u7EC4-13" transform="translate(331.000000, 79.000000)">
|
||||
<g
|
||||
id="Arrow-\u6298\u53E0\u7BAD\u5934_Black@2x"
|
||||
transform="translate(12.000000, 12.000000) rotate(90.000000) translate(-12.000000, -12.000000) translate(4.000000, 4.000000)"
|
||||
>
|
||||
<rect
|
||||
id="Arrow-\u77E9\u5F62"
|
||||
opacity="0"
|
||||
x="0"
|
||||
y="0"
|
||||
width="16"
|
||||
height="16"
|
||||
></rect>
|
||||
<path
|
||||
d="M8.576,10.6224 C8.46400007,10.7357654 8.31136002,10.7997014 8.152,10.8 L7.848,10.8 C7.68897547,10.7980619 7.53693306,10.7343763 7.424,10.6224 L3.3184,6.4672 C3.16044703,6.30862179 3.16044703,6.05217821 3.3184,5.8936 L3.8864,5.3192 C3.95991079,5.24354153 4.06091047,5.20085176 4.1664,5.20085176 C4.27188953,5.20085176 4.37288921,5.24354153 4.4464,5.3192 L8,8.9168 L11.5536,5.3192 C11.6284927,5.24307539 11.7308111,5.20020394 11.8376,5.20020394 C11.9443889,5.20020394 12.0467073,5.24307539 12.1216,5.3192 L12.6816,5.8936 C12.839553,6.05217821 12.839553,6.30862179 12.6816,6.4672 L8.576,10.6224 Z"
|
||||
id="Arrow-\u8DEF\u5F84"
|
||||
></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
export default Arrow;
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
import { createVNode } from 'vue';
|
||||
|
||||
function Brush(props) {
|
||||
return /*#__PURE__*/ createVNode(
|
||||
'svg',
|
||||
Object.assign(
|
||||
{
|
||||
width: '1em',
|
||||
height: '1em',
|
||||
viewBox: '0 0 14 18',
|
||||
xmlns: 'http://www.w3.org/2000/svg',
|
||||
xmlnsXlink: 'http://www.w3.org/1999/xlink',
|
||||
},
|
||||
props,
|
||||
{
|
||||
style: Object.assign(
|
||||
{
|
||||
verticalAlign: '-0.125em',
|
||||
},
|
||||
props.style,
|
||||
),
|
||||
className: ['nanqu-token-panel-icon', props.className].filter(Boolean).join(' '),
|
||||
},
|
||||
),
|
||||
/*#__PURE__*/ createVNode(
|
||||
'g',
|
||||
{
|
||||
id: 'Brush-\u9875\u9762-1',
|
||||
stroke: 'none',
|
||||
strokeWidth: 1,
|
||||
fill: 'none',
|
||||
fillRule: 'evenodd',
|
||||
fillOpacity: 0.649999976,
|
||||
},
|
||||
/*#__PURE__*/ createVNode(
|
||||
'g',
|
||||
{
|
||||
id: 'Brush-\u4E3B\u9898\u7F16\u8F91\u5668---\u591A\u4E3B\u9898',
|
||||
transform: 'translate(-17.000000, -121.000000)',
|
||||
fill: 'currentColor',
|
||||
fillRule: 'nonzero',
|
||||
},
|
||||
/*#__PURE__*/ createVNode(
|
||||
'g',
|
||||
{
|
||||
id: 'Brush-brush',
|
||||
transform: 'translate(14.000000, 120.000000)',
|
||||
},
|
||||
/*#__PURE__*/ createVNode('path', {
|
||||
d: 'M8.20652175,3.2826087 L8.20652175,4.10326086 C8.20652175,4.55649455 7.83910325,4.92391304 7.38586957,4.92391304 C6.93263588,4.92391304 6.56521738,4.55649455 6.56521738,4.10326086 L6.56521738,3.2826087 L4.92391304,3.2826087 L4.92391304,8.20652175 L14.7717391,8.20652175 L14.7717391,3.2826087 L13.1304348,3.2826087 L13.1304348,5.74456522 C13.1304348,6.19779891 12.7630163,6.5652174 12.3097826,6.5652174 C11.8565489,6.5652174 11.4891304,6.19779891 11.4891304,5.74456522 L11.4891304,3.2826087 L8.20652175,3.2826087 Z M4.92391304,9.84782609 L4.92391304,11.4891304 L7.72233695,11.4891304 C8.08431263,11.4890155 8.42799204,11.6482243 8.66197039,11.9244136 C8.89594874,12.2006029 8.99650752,12.5657753 8.93690217,12.9228098 L8.60043479,14.9399728 C8.51784643,15.435105 8.73592476,15.9322123 9.15616576,16.2067558 C9.57640676,16.4812994 10.1192454,16.4812994 10.5394864,16.2067558 C10.9597274,15.9322123 11.1778057,15.435105 11.0952174,14.9399728 L10.75875,12.9228098 C10.6991446,12.5657753 10.7997034,12.2006029 11.0336818,11.9244136 C11.2676601,11.6482243 11.6113395,11.4890155 11.9733152,11.4891304 L14.7717391,11.4891304 L14.7717391,9.84782609 L4.92391304,9.84782609 Z M12.7143641,14.6699783 C12.9035912,15.807501 12.4022968,16.9492894 11.4368082,17.5798421 C10.4713197,18.2103948 9.2243325,18.2103948 8.25884395,17.5798421 C7.2933554,16.9492894 6.79206095,15.807501 6.98128804,14.6699783 L7.23815217,13.1304348 L4.92391304,13.1304348 C4.48861206,13.1304348 4.07113988,12.9575121 3.76333561,12.6497079 C3.45553133,12.3419036 3.2826087,11.9244314 3.2826087,11.4891304 L3.2826087,3.2826087 C3.2826087,2.84730772 3.45553133,2.42983554 3.76333561,2.12203126 C4.07113988,1.81422698 4.48861206,1.64130434 4.92391304,1.64130434 L14.7717391,1.64130434 C15.2070401,1.64130434 15.6245123,1.81422698 15.9323166,2.12203126 C16.2401208,2.42983554 16.4130435,2.84730772 16.4130435,3.2826087 L16.4130435,11.4891304 C16.4130435,11.9244314 16.2401208,12.3419036 15.9323166,12.6497079 C15.6245123,12.9575121 15.2070401,13.1304348 14.7717391,13.1304348 L12.4575,13.1304348 L12.7143641,14.6699783 L12.7143641,14.6699783 Z',
|
||||
id: 'Brush-\u5F62\u72B6',
|
||||
}),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
export default Brush;
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import type { CSSProperties } from 'vue';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
const Brush = defineComponent({
|
||||
name: 'Brush',
|
||||
setup(_, { attrs }) {
|
||||
return () => {
|
||||
return (
|
||||
<svg
|
||||
{...attrs}
|
||||
width="1em"
|
||||
height="1em"
|
||||
style={{
|
||||
verticalAlign: '-0.125em',
|
||||
...(attrs.style as CSSProperties),
|
||||
}}
|
||||
class={['nanqu-token-panel-icon', attrs.class].filter(Boolean).join(' ')}
|
||||
viewBox="0 0 14 18"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
id="Brush-\u9875\u9762-1"
|
||||
stroke="none"
|
||||
stroke-width="1"
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
fill-opacity="0.649999976"
|
||||
>
|
||||
<g
|
||||
id="Brush-\u4E3B\u9898\u7F16\u8F91\u5668---\u591A\u4E3B\u9898"
|
||||
transform="translate(-17.000000, -121.000000)"
|
||||
fill="currentColor"
|
||||
fill-rule="nonzero"
|
||||
>
|
||||
<g id="Brush-brush" transform="translate(14.000000, 120.000000)">
|
||||
<path
|
||||
d="M8.20652175,3.2826087 L8.20652175,4.10326086 C8.20652175,4.55649455 7.83910325,4.92391304 7.38586957,4.92391304 C6.93263588,4.92391304 6.56521738,4.55649455 6.56521738,4.10326086 L6.56521738,3.2826087 L4.92391304,3.2826087 L4.92391304,8.20652175 L14.7717391,8.20652175 L14.7717391,3.2826087 L13.1304348,3.2826087 L13.1304348,5.74456522 C13.1304348,6.19779891 12.7630163,6.5652174 12.3097826,6.5652174 C11.8565489,6.5652174 11.4891304,6.19779891 11.4891304,5.74456522 L11.4891304,3.2826087 L8.20652175,3.2826087 Z M4.92391304,9.84782609 L4.92391304,11.4891304 L7.72233695,11.4891304 C8.08431263,11.4890155 8.42799204,11.6482243 8.66197039,11.9244136 C8.89594874,12.2006029 8.99650752,12.5657753 8.93690217,12.9228098 L8.60043479,14.9399728 C8.51784643,15.435105 8.73592476,15.9322123 9.15616576,16.2067558 C9.57640676,16.4812994 10.1192454,16.4812994 10.5394864,16.2067558 C10.9597274,15.9322123 11.1778057,15.435105 11.0952174,14.9399728 L10.75875,12.9228098 C10.6991446,12.5657753 10.7997034,12.2006029 11.0336818,11.9244136 C11.2676601,11.6482243 11.6113395,11.4890155 11.9733152,11.4891304 L14.7717391,11.4891304 L14.7717391,9.84782609 L4.92391304,9.84782609 Z M12.7143641,14.6699783 C12.9035912,15.807501 12.4022968,16.9492894 11.4368082,17.5798421 C10.4713197,18.2103948 9.2243325,18.2103948 8.25884395,17.5798421 C7.2933554,16.9492894 6.79206095,15.807501 6.98128804,14.6699783 L7.23815217,13.1304348 L4.92391304,13.1304348 C4.48861206,13.1304348 4.07113988,12.9575121 3.76333561,12.6497079 C3.45553133,12.3419036 3.2826087,11.9244314 3.2826087,11.4891304 L3.2826087,3.2826087 C3.2826087,2.84730772 3.45553133,2.42983554 3.76333561,2.12203126 C4.07113988,1.81422698 4.48861206,1.64130434 4.92391304,1.64130434 L14.7717391,1.64130434 C15.2070401,1.64130434 15.6245123,1.81422698 15.9323166,2.12203126 C16.2401208,2.42983554 16.4130435,2.84730772 16.4130435,3.2826087 L16.4130435,11.4891304 C16.4130435,11.9244314 16.2401208,12.3419036 15.9323166,12.6497079 C15.6245123,12.9575121 15.2070401,13.1304348 14.7717391,13.1304348 L12.4575,13.1304348 L12.7143641,14.6699783 L12.7143641,14.6699783 Z"
|
||||
id="Brush-\u5F62\u72B6"
|
||||
></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
export default Brush;
|
||||
|
|
@ -3,7 +3,6 @@ import { defineComponent } from 'vue';
|
|||
|
||||
const Compact = defineComponent({
|
||||
name: 'Compact',
|
||||
emits: ['click'],
|
||||
setup(_, { attrs }) {
|
||||
return () => {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { defineComponent } from 'vue';
|
|||
|
||||
const Control = defineComponent({
|
||||
name: 'Control',
|
||||
emits: ['click'],
|
||||
setup(_, { attrs }) {
|
||||
return () => {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { defineComponent } from 'vue';
|
|||
|
||||
const Dark = defineComponent({
|
||||
name: 'Dark',
|
||||
emits: ['click'],
|
||||
setup(_, { attrs }) {
|
||||
return () => {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { defineComponent } from 'vue';
|
|||
|
||||
const Light = defineComponent({
|
||||
name: 'Light',
|
||||
emits: ['click'],
|
||||
setup(_, { attrs }) {
|
||||
return () => {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,59 +0,0 @@
|
|||
import { createVNode } from 'vue';
|
||||
|
||||
function Margin(props) {
|
||||
return /*#__PURE__*/ createVNode(
|
||||
'svg',
|
||||
Object.assign(
|
||||
{
|
||||
width: '1em',
|
||||
height: '1em',
|
||||
viewBox: '0 0 16 17',
|
||||
xmlns: 'http://www.w3.org/2000/svg',
|
||||
xmlnsXlink: 'http://www.w3.org/1999/xlink',
|
||||
},
|
||||
props,
|
||||
{
|
||||
style: Object.assign(
|
||||
{
|
||||
verticalAlign: '-0.125em',
|
||||
},
|
||||
props.style,
|
||||
),
|
||||
className: ['nanqu-token-panel-icon', props.className].filter(Boolean).join(' '),
|
||||
},
|
||||
),
|
||||
/*#__PURE__*/ createVNode(
|
||||
'g',
|
||||
{
|
||||
id: 'Margin-\u9875\u9762-1',
|
||||
stroke: 'none',
|
||||
strokeWidth: 1,
|
||||
fill: 'none',
|
||||
fillRule: 'evenodd',
|
||||
},
|
||||
/*#__PURE__*/ createVNode(
|
||||
'g',
|
||||
{
|
||||
id: 'Margin-margin',
|
||||
transform: 'translate(0.000000, 0.942377)',
|
||||
fill: 'currentColor',
|
||||
fillRule: 'nonzero',
|
||||
},
|
||||
/*#__PURE__*/ createVNode('rect', {
|
||||
id: 'Margin-\u77E9\u5F62',
|
||||
opacity: 0,
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 16,
|
||||
height: 15.9807923,
|
||||
}),
|
||||
/*#__PURE__*/ createVNode('path', {
|
||||
d: 'M11.6666667,2.75858915 L4.33333333,2.75858915 C4.01904762,2.75858915 3.80952382,2.54931688 3.80952382,2.23540845 C3.80952382,1.92150003 4.01904763,1.71222775 4.33333334,1.71222775 L11.6666667,1.71222775 C11.9809524,1.71222775 12.1904762,1.92150003 12.1904762,2.23540845 C12.1904762,2.54931688 11.9809524,2.75858915 11.6666667,2.75858915 Z M11.6666667,14.2685646 L4.33333333,14.2685646 C4.01904762,14.2685646 3.8095238,14.0592923 3.8095238,13.7453839 C3.8095238,13.4314755 4.01904762,13.2222032 4.33333333,13.2222032 L11.6666667,13.2222032 C11.9809524,13.2222032 12.1904762,13.4314755 12.1904762,13.7453839 C12.1904762,14.0592923 11.9809524,14.2685646 11.6666667,14.2685646 Z M13.7619048,12.1758418 C13.447619,12.1758418 13.2380952,11.9665695 13.2380952,11.6526611 L13.2380952,4.32813125 C13.2380952,4.01422283 13.4476191,3.80495055 13.7619048,3.80495055 C14.0761905,3.80495055 14.2857143,4.01422283 14.2857143,4.32813125 L14.2857143,11.6526611 C14.2857143,11.9665695 14.0761905,12.1758418 13.7619048,12.1758418 Z M2.23809524,12.1758418 C1.92380953,12.1758418 1.71428572,11.9665695 1.71428572,11.6526611 L1.71428572,4.32813125 C1.71428572,4.01422283 1.92380953,3.80495055 2.23809524,3.80495055 C2.55238096,3.80495055 2.76190477,4.01422283 2.76190477,4.32813125 L2.76190477,11.6526611 C2.76190477,11.9665695 2.55238096,12.1758418 2.23809524,12.1758418 Z M11.6666667,12.1758418 L4.33333333,12.1758418 C4.01904762,12.1758418 3.8095238,11.9665695 3.8095238,11.6526611 L3.8095238,4.32813125 C3.8095238,4.01422283 4.01904763,3.80495055 4.33333334,3.80495055 L11.6666667,3.80495055 C11.9809524,3.80495055 12.1904762,4.01422283 12.1904762,4.32813125 L12.1904762,11.6526611 C12.1904762,11.9665695 11.9809524,12.1758418 11.6666667,12.1758418 Z M4.85714286,11.1294804 L11.1428571,11.1294804 L11.1428571,4.85131196 L4.85714286,4.85131196 L4.85714286,11.1294804 Z',
|
||||
id: 'Margin-\u5F62\u72B6',
|
||||
}),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
export default Margin;
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import type { CSSProperties } from 'vue';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
const Margin = defineComponent({
|
||||
name: 'Margin',
|
||||
setup(_, { attrs }) {
|
||||
return () => {
|
||||
return (
|
||||
<svg
|
||||
{...attrs}
|
||||
width="1em"
|
||||
height="1em"
|
||||
style={{
|
||||
verticalAlign: '-0.125em',
|
||||
...(attrs.style as CSSProperties),
|
||||
}}
|
||||
class={['nanqu-token-panel-icon', attrs.class].filter(Boolean).join(' ')}
|
||||
viewBox="0 0 16 17"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
id="Margin-\u9875\u9762-1"
|
||||
stroke="none"
|
||||
stroke-width="1"
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
>
|
||||
<g
|
||||
id="Margin-margin"
|
||||
transform="translate(0.000000, 0.942377)"
|
||||
fill="currentColor"
|
||||
fill-rule="nonzero"
|
||||
>
|
||||
<rect
|
||||
id="Margin-\u77E9\u5F62"
|
||||
opacity="0"
|
||||
x="0"
|
||||
y="0"
|
||||
width="16"
|
||||
height="15.9807923"
|
||||
></rect>
|
||||
<path
|
||||
d="M11.6666667,2.75858915 L4.33333333,2.75858915 C4.01904762,2.75858915 3.80952382,2.54931688 3.80952382,2.23540845 C3.80952382,1.92150003 4.01904763,1.71222775 4.33333334,1.71222775 L11.6666667,1.71222775 C11.9809524,1.71222775 12.1904762,1.92150003 12.1904762,2.23540845 C12.1904762,2.54931688 11.9809524,2.75858915 11.6666667,2.75858915 Z M11.6666667,14.2685646 L4.33333333,14.2685646 C4.01904762,14.2685646 3.8095238,14.0592923 3.8095238,13.7453839 C3.8095238,13.4314755 4.01904762,13.2222032 4.33333333,13.2222032 L11.6666667,13.2222032 C11.9809524,13.2222032 12.1904762,13.4314755 12.1904762,13.7453839 C12.1904762,14.0592923 11.9809524,14.2685646 11.6666667,14.2685646 Z M13.7619048,12.1758418 C13.447619,12.1758418 13.2380952,11.9665695 13.2380952,11.6526611 L13.2380952,4.32813125 C13.2380952,4.01422283 13.4476191,3.80495055 13.7619048,3.80495055 C14.0761905,3.80495055 14.2857143,4.01422283 14.2857143,4.32813125 L14.2857143,11.6526611 C14.2857143,11.9665695 14.0761905,12.1758418 13.7619048,12.1758418 Z M2.23809524,12.1758418 C1.92380953,12.1758418 1.71428572,11.9665695 1.71428572,11.6526611 L1.71428572,4.32813125 C1.71428572,4.01422283 1.92380953,3.80495055 2.23809524,3.80495055 C2.55238096,3.80495055 2.76190477,4.01422283 2.76190477,4.32813125 L2.76190477,11.6526611 C2.76190477,11.9665695 2.55238096,12.1758418 2.23809524,12.1758418 Z M11.6666667,12.1758418 L4.33333333,12.1758418 C4.01904762,12.1758418 3.8095238,11.9665695 3.8095238,11.6526611 L3.8095238,4.32813125 C3.8095238,4.01422283 4.01904763,3.80495055 4.33333334,3.80495055 L11.6666667,3.80495055 C11.9809524,3.80495055 12.1904762,4.01422283 12.1904762,4.32813125 L12.1904762,11.6526611 C12.1904762,11.9665695 11.9809524,12.1758418 11.6666667,12.1758418 Z M4.85714286,11.1294804 L11.1428571,11.1294804 L11.1428571,4.85131196 L4.85714286,4.85131196 L4.85714286,11.1294804 Z"
|
||||
id="Margin-\u5F62\u72B6"
|
||||
></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
export default Margin;
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
import { createVNode } from 'vue';
|
||||
|
||||
function Motion(props) {
|
||||
return /*#__PURE__*/ createVNode(
|
||||
'svg',
|
||||
Object.assign(
|
||||
{
|
||||
width: '1em',
|
||||
height: '1em',
|
||||
viewBox: '0 0 16 17',
|
||||
xmlns: 'http://www.w3.org/2000/svg',
|
||||
xmlnsXlink: 'http://www.w3.org/1999/xlink',
|
||||
},
|
||||
props,
|
||||
{
|
||||
style: Object.assign(
|
||||
{
|
||||
verticalAlign: '-0.125em',
|
||||
},
|
||||
props.style,
|
||||
),
|
||||
className: ['nanqu-token-panel-icon', props.className].filter(Boolean).join(' '),
|
||||
},
|
||||
),
|
||||
/*#__PURE__*/ createVNode(
|
||||
'g',
|
||||
{
|
||||
id: 'Motion-\u9875\u9762-1',
|
||||
stroke: 'none',
|
||||
strokeWidth: 1,
|
||||
fill: 'none',
|
||||
fillRule: 'evenodd',
|
||||
},
|
||||
/*#__PURE__*/ createVNode(
|
||||
'g',
|
||||
{
|
||||
id: 'Motion-\u5BCC\u6587\u672C\u7F16\u8F91\u5668_\u52A8\u6548',
|
||||
transform: 'translate(0.000000, 0.903962)',
|
||||
fill: 'currentColor',
|
||||
fillRule: 'nonzero',
|
||||
},
|
||||
/*#__PURE__*/ createVNode('rect', {
|
||||
id: 'Motion-\u77E9\u5F62',
|
||||
opacity: 0,
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 16,
|
||||
height: 15.9807923,
|
||||
}),
|
||||
/*#__PURE__*/ createVNode('path', {
|
||||
d: 'M6.55644444,12.5262777 L7.99555556,13.9627734 C8.13290682,14.0984321 8.18701716,14.2971622 8.13737053,14.4836147 C8.0877239,14.6700672 7.94192169,14.8156943 7.75524511,14.8652814 C7.56856853,14.9148684 7.36959959,14.860823 7.23377778,14.7236366 L5.79555556,13.2862532 C5.60250935,13.0737079 5.61045949,12.7472435 5.8136232,12.5443237 C6.01678692,12.3414038 6.3436437,12.3334632 6.55644444,12.5262777 L6.55644444,12.5262777 Z M12.2435556,12.6630023 L13.3857778,13.8038533 C13.5231286,13.9395121 13.5772386,14.138242 13.527592,14.3246942 C13.4779453,14.5111464 13.3321433,14.6567734 13.145467,14.7063605 C12.9587906,14.7559476 12.7598219,14.7019025 12.624,14.5647165 L11.4817778,13.4238655 C11.3444269,13.2882067 11.2903169,13.0894768 11.3399636,12.9030246 C11.3896103,12.7165724 11.5354123,12.5709454 11.7220886,12.5213583 C11.9087649,12.4717712 12.1077337,12.5258163 12.2435556,12.6630023 L12.2435556,12.6630023 Z M7.29511111,0.990809123 C7.37066667,1.03342457 7.43377778,1.09645992 7.47644444,1.17192476 L9.23911111,4.29439403 L12.7564444,5.00376364 C12.9258902,5.03768098 13.0638332,5.16026877 13.1172645,5.32441904 C13.1706959,5.4885693 13.1313024,5.66874209 13.0142222,5.79570068 L10.5866667,8.43430705 L10.9982222,11.9953603 C11.018176,12.1667991 10.94398,12.3356549 10.8041422,12.4370491 C10.6643043,12.5384432 10.4805781,12.5566027 10.3235556,12.4845501 L7.06133333,10.9930095 L3.79733333,12.4845501 C3.64031082,12.5566027 3.45658456,12.5384432 3.3167467,12.4370491 C3.17690884,12.3356549 3.10271286,12.1667991 3.12266667,11.9953603 L3.53511111,8.43519487 L1.10577778,5.79570068 C0.988697555,5.66874209 0.949304077,5.4885693 1.00273546,5.32441904 C1.05616684,5.16026877 1.19410976,5.03768098 1.36355556,5.00376364 L4.88177778,4.29439403 L6.64266667,1.17192476 C6.70502264,1.06136833 6.80886024,0.980137913 6.93126543,0.94615878 C7.05367063,0.912179648 7.18458201,0.928244805 7.29511111,0.990809123 Z M7.05955556,2.62440123 L5.57688889,5.25235374 L2.61688889,5.84808216 L4.65955556,8.07030012 L4.31288889,11.0666987 L7.05955556,9.81131866 L9.80533333,11.0666987 L9.45866667,8.07030012 L11.5031111,5.84896999 L8.54222222,5.25235374 L7.05866667,2.62440123 L7.05955556,2.62440123 Z M13.1528889,7.76045031 L14.5911111,9.19694597 C14.7892424,9.40878705 14.7837079,9.73933037 14.5785954,9.9444359 C14.373483,10.1495414 14.0425491,10.1554552 13.8302222,9.95780926 L12.3911111,8.5213136 C12.2537603,8.38565475 12.1996502,8.18692487 12.2492969,8.00047265 C12.2989436,7.81402043 12.4447456,7.66839345 12.6314219,7.61880637 C12.8180983,7.56921929 13.017067,7.62326436 13.1528889,7.76045031 L13.1528889,7.76045031 Z',
|
||||
id: 'Motion-\u5F62\u72B6',
|
||||
}),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
export default Motion;
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import type { CSSProperties } from 'vue';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
const Motion = defineComponent({
|
||||
name: 'Motion',
|
||||
setup(_, { attrs }) {
|
||||
return () => {
|
||||
return (
|
||||
<svg
|
||||
{...attrs}
|
||||
width="1em"
|
||||
height="1em"
|
||||
style={{
|
||||
verticalAlign: '-0.125em',
|
||||
...(attrs.style as CSSProperties),
|
||||
}}
|
||||
class={['nanqu-token-panel-icon', attrs.class].filter(Boolean).join(' ')}
|
||||
viewBox="0 0 16 17"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
id="Motion-\u9875\u9762-1"
|
||||
stroke="none"
|
||||
stroke-width="1"
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
>
|
||||
<g
|
||||
id="Motion-\u5BCC\u6587\u672C\u7F16\u8F91\u5668_\u52A8\u6548"
|
||||
transform="translate(0.000000, 0.903962)"
|
||||
fill="currentColor"
|
||||
fill-rule="nonzero"
|
||||
>
|
||||
<rect
|
||||
id="Motion-\u77E9\u5F62"
|
||||
opacity="0"
|
||||
x="0"
|
||||
y="0"
|
||||
width="16"
|
||||
height="15.9807923"
|
||||
></rect>
|
||||
<path
|
||||
d="M6.55644444,12.5262777 L7.99555556,13.9627734 C8.13290682,14.0984321 8.18701716,14.2971622 8.13737053,14.4836147 C8.0877239,14.6700672 7.94192169,14.8156943 7.75524511,14.8652814 C7.56856853,14.9148684 7.36959959,14.860823 7.23377778,14.7236366 L5.79555556,13.2862532 C5.60250935,13.0737079 5.61045949,12.7472435 5.8136232,12.5443237 C6.01678692,12.3414038 6.3436437,12.3334632 6.55644444,12.5262777 L6.55644444,12.5262777 Z M12.2435556,12.6630023 L13.3857778,13.8038533 C13.5231286,13.9395121 13.5772386,14.138242 13.527592,14.3246942 C13.4779453,14.5111464 13.3321433,14.6567734 13.145467,14.7063605 C12.9587906,14.7559476 12.7598219,14.7019025 12.624,14.5647165 L11.4817778,13.4238655 C11.3444269,13.2882067 11.2903169,13.0894768 11.3399636,12.9030246 C11.3896103,12.7165724 11.5354123,12.5709454 11.7220886,12.5213583 C11.9087649,12.4717712 12.1077337,12.5258163 12.2435556,12.6630023 L12.2435556,12.6630023 Z M7.29511111,0.990809123 C7.37066667,1.03342457 7.43377778,1.09645992 7.47644444,1.17192476 L9.23911111,4.29439403 L12.7564444,5.00376364 C12.9258902,5.03768098 13.0638332,5.16026877 13.1172645,5.32441904 C13.1706959,5.4885693 13.1313024,5.66874209 13.0142222,5.79570068 L10.5866667,8.43430705 L10.9982222,11.9953603 C11.018176,12.1667991 10.94398,12.3356549 10.8041422,12.4370491 C10.6643043,12.5384432 10.4805781,12.5566027 10.3235556,12.4845501 L7.06133333,10.9930095 L3.79733333,12.4845501 C3.64031082,12.5566027 3.45658456,12.5384432 3.3167467,12.4370491 C3.17690884,12.3356549 3.10271286,12.1667991 3.12266667,11.9953603 L3.53511111,8.43519487 L1.10577778,5.79570068 C0.988697555,5.66874209 0.949304077,5.4885693 1.00273546,5.32441904 C1.05616684,5.16026877 1.19410976,5.03768098 1.36355556,5.00376364 L4.88177778,4.29439403 L6.64266667,1.17192476 C6.70502264,1.06136833 6.80886024,0.980137913 6.93126543,0.94615878 C7.05367063,0.912179648 7.18458201,0.928244805 7.29511111,0.990809123 Z M7.05955556,2.62440123 L5.57688889,5.25235374 L2.61688889,5.84808216 L4.65955556,8.07030012 L4.31288889,11.0666987 L7.05955556,9.81131866 L9.80533333,11.0666987 L9.45866667,8.07030012 L11.5031111,5.84896999 L8.54222222,5.25235374 L7.05866667,2.62440123 L7.05955556,2.62440123 Z M13.1528889,7.76045031 L14.5911111,9.19694597 C14.7892424,9.40878705 14.7837079,9.73933037 14.5785954,9.9444359 C14.373483,10.1495414 14.0425491,10.1554552 13.8302222,9.95780926 L12.3911111,8.5213136 C12.2537603,8.38565475 12.1996502,8.18692487 12.2492969,8.00047265 C12.2989436,7.81402043 12.4447456,7.66839345 12.6314219,7.61880637 C12.8180983,7.56921929 13.017067,7.62326436 13.1528889,7.76045031 L13.1528889,7.76045031 Z"
|
||||
id="Motion-\u5F62\u72B6"
|
||||
></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
export default Motion;
|
||||
|
|
@ -3,7 +3,6 @@ import { defineComponent } from 'vue';
|
|||
|
||||
const Pick = defineComponent({
|
||||
name: 'Pick',
|
||||
emits: ['click'],
|
||||
setup(_, { attrs }) {
|
||||
return () => {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,86 +0,0 @@
|
|||
import { createVNode } from 'vue';
|
||||
|
||||
function SearchDropdown(props) {
|
||||
return /*#__PURE__*/ createVNode(
|
||||
'svg',
|
||||
Object.assign(
|
||||
{
|
||||
width: '1em',
|
||||
height: '1em',
|
||||
viewBox: '0 0 18 18',
|
||||
xmlns: 'http://www.w3.org/2000/svg',
|
||||
xmlnsXlink: 'http://www.w3.org/1999/xlink',
|
||||
},
|
||||
props,
|
||||
{
|
||||
style: Object.assign(
|
||||
{
|
||||
verticalAlign: '-0.125em',
|
||||
},
|
||||
props.style,
|
||||
),
|
||||
className: ['nanqu-token-panel-icon', props.className].filter(Boolean).join(' '),
|
||||
},
|
||||
),
|
||||
/*#__PURE__*/ createVNode(
|
||||
'g',
|
||||
{
|
||||
id: 'SearchDropdown-\u9875\u9762-1',
|
||||
stroke: 'none',
|
||||
strokeWidth: 1,
|
||||
fill: 'none',
|
||||
fillRule: 'evenodd',
|
||||
},
|
||||
/*#__PURE__*/ createVNode(
|
||||
'g',
|
||||
{
|
||||
id: 'SearchDropdown-\u4E3B\u9898\u9884\u89C8\u5668---\u7EC4\u4EF6\u9884\u89C8',
|
||||
transform: 'translate(-23.000000, -198.000000)',
|
||||
fillRule: 'nonzero',
|
||||
},
|
||||
/*#__PURE__*/ createVNode(
|
||||
'g',
|
||||
{
|
||||
id: 'SearchDropdown-\u7F16\u7EC4-18',
|
||||
transform: 'translate(0.000000, 70.000000)',
|
||||
},
|
||||
/*#__PURE__*/ createVNode(
|
||||
'g',
|
||||
{
|
||||
id: 'SearchDropdown-\u7F16\u7EC4-15',
|
||||
transform: 'translate(16.000000, 123.000000)',
|
||||
},
|
||||
/*#__PURE__*/ createVNode(
|
||||
'g',
|
||||
{
|
||||
id: 'SearchDropdown-search-outlined',
|
||||
transform: 'translate(7.000000, 5.000000)',
|
||||
},
|
||||
/*#__PURE__*/ createVNode('rect', {
|
||||
id: 'SearchDropdown-\u77E9\u5F62',
|
||||
fill: '#000000',
|
||||
opacity: 0,
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 18,
|
||||
height: 18,
|
||||
}),
|
||||
/*#__PURE__*/ createVNode('path', {
|
||||
d: 'M15.958,14.99375 L11.41325,10.449 C12.1185,9.53725 12.5,8.4225 12.5,7.25 C12.5,5.8465 11.95225,4.5305 10.96175,3.53825 C9.97125,2.546 8.65175,2 7.25,2 C5.84825,2 4.52875,2.54775 3.53825,3.53825 C2.546,4.52875 2,5.8465 2,7.25 C2,8.65175 2.54775,9.97125 3.53825,10.96175 C4.52875,11.954 5.8465,12.5 7.25,12.5 C8.4225,12.5 9.5355,12.1185 10.44725,11.415 L14.992,15.958 C15.048,16.014 15.139,16.014 15.195,15.958 L15.958,15.19675 C16.014,15.14075 16.014,15.04975 15.958,14.99375 Z M10.022,10.022 C9.28,10.76225 8.2965,11.17 7.25,11.17 C6.2035,11.17 5.22,10.76225 4.478,10.022 C3.73775,9.28 3.33,8.2965 3.33,7.25 C3.33,6.2035 3.73775,5.21825 4.478,4.478 C5.22,3.73775 6.2035,3.33 7.25,3.33 C8.2965,3.33 9.28175,3.736 10.022,4.478 C10.76225,5.22 11.17,6.2035 11.17,7.25 C11.17,8.2965 10.76225,9.28175 10.022,10.022 Z',
|
||||
id: 'SearchDropdown-\u5F62\u72B6',
|
||||
fill: 'currentColor',
|
||||
}),
|
||||
/*#__PURE__*/ createVNode('path', {
|
||||
d: 'M17.8616348,7.7578125 L14.0131973,7.7578125 C13.8977676,7.7578125 13.8333145,7.8796875 13.9047988,7.96289062 L15.8290176,10.1941406 C15.8840957,10.2580078 15.9901504,10.2580078 16.0458145,10.1941406 L17.9700332,7.96289062 C18.0415176,7.8796875 17.9770645,7.7578125 17.8616348,7.7578125 Z',
|
||||
id: 'SearchDropdown-\u8DEF\u5F84',
|
||||
fill: 'currentColor',
|
||||
}),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
export default SearchDropdown;
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
import type { CSSProperties } from 'vue';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
const SearchDropdown = defineComponent({
|
||||
name: 'SearchDropdown',
|
||||
setup(_, { attrs }) {
|
||||
return () => {
|
||||
return (
|
||||
<svg
|
||||
{...attrs}
|
||||
width="1em"
|
||||
height="1em"
|
||||
style={{
|
||||
verticalAlign: '-0.125em',
|
||||
...(attrs.style as CSSProperties),
|
||||
}}
|
||||
class={['nanqu-token-panel-icon', attrs.class].filter(Boolean).join(' ')}
|
||||
viewBox="0 0 18 18"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
id="SearchDropdown-\u9875\u9762-1"
|
||||
stroke="none"
|
||||
stroke-width="1"
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
>
|
||||
<g
|
||||
id="SearchDropdown-\u4E3B\u9898\u9884\u89C8\u5668---\u7EC4\u4EF6\u9884\u89C8"
|
||||
transform="translate(-23.000000, -198.000000)"
|
||||
fill-rule="nonzero"
|
||||
>
|
||||
<g id="SearchDropdown-\u7F16\u7EC4-18" transform="translate(0.000000, 70.000000)">
|
||||
<g id="SearchDropdown-search-outlined" transform="translate(7.000000, 5.000000)">
|
||||
<rect
|
||||
id="SearchDropdown-\u77E9\u5F62"
|
||||
fill="#000000"
|
||||
opacity="0"
|
||||
x="0"
|
||||
y="0"
|
||||
width="18"
|
||||
height="18"
|
||||
></rect>
|
||||
<path
|
||||
d="M15.958,14.99375 L11.41325,10.449 C12.1185,9.53725 12.5,8.4225 12.5,7.25 C12.5,5.8465 11.95225,4.5305 10.96175,3.53825 C9.97125,2.546 8.65175,2 7.25,2 C5.84825,2 4.52875,2.54775 3.53825,3.53825 C2.546,4.52875 2,5.8465 2,7.25 C2,8.65175 2.54775,9.97125 3.53825,10.96175 C4.52875,11.954 5.8465,12.5 7.25,12.5 C8.4225,12.5 9.5355,12.1185 10.44725,11.415 L14.992,15.958 C15.048,16.014 15.139,16.014 15.195,15.958 L15.958,15.19675 C16.014,15.14075 16.014,15.04975 15.958,14.99375 Z M10.022,10.022 C9.28,10.76225 8.2965,11.17 7.25,11.17 C6.2035,11.17 5.22,10.76225 4.478,10.022 C3.73775,9.28 3.33,8.2965 3.33,7.25 C3.33,6.2035 3.73775,5.21825 4.478,4.478 C5.22,3.73775 6.2035,3.33 7.25,3.33 C8.2965,3.33 9.28175,3.736 10.022,4.478 C10.76225,5.22 11.17,6.2035 11.17,7.25 C11.17,8.2965 10.76225,9.28175 10.022,10.022 Z"
|
||||
id="SearchDropdown-\u5F62\u72B6"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
<path
|
||||
d="M17.8616348,7.7578125 L14.0131973,7.7578125 C13.8977676,7.7578125 13.8333145,7.8796875 13.9047988,7.96289062 L15.8290176,10.1941406 C15.8840957,10.2580078 15.9901504,10.2580078 16.0458145,10.1941406 L17.9700332,7.96289062 C18.0415176,7.8796875 17.9770645,7.7578125 17.8616348,7.7578125 Z"
|
||||
id="SearchDropdown-\u8DEF\u5F84"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
export default SearchDropdown;
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
import { createVNode } from 'vue';
|
||||
|
||||
function ShapeLine(props) {
|
||||
return /*#__PURE__*/ createVNode(
|
||||
'svg',
|
||||
Object.assign(
|
||||
{
|
||||
width: '1em',
|
||||
height: '1em',
|
||||
viewBox: '0 0 16 17',
|
||||
xmlns: 'http://www.w3.org/2000/svg',
|
||||
xmlnsXlink: 'http://www.w3.org/1999/xlink',
|
||||
},
|
||||
props,
|
||||
{
|
||||
style: Object.assign(
|
||||
{
|
||||
verticalAlign: '-0.125em',
|
||||
},
|
||||
props.style,
|
||||
),
|
||||
className: ['nanqu-token-panel-icon', props.className].filter(Boolean).join(' '),
|
||||
},
|
||||
),
|
||||
/*#__PURE__*/ createVNode(
|
||||
'g',
|
||||
{
|
||||
id: 'ShapeLine-\u9875\u9762-1',
|
||||
stroke: 'none',
|
||||
strokeWidth: 1,
|
||||
fill: 'none',
|
||||
fillRule: 'evenodd',
|
||||
},
|
||||
/*#__PURE__*/ createVNode(
|
||||
'g',
|
||||
{
|
||||
id: 'ShapeLine-shape-line',
|
||||
transform: 'translate(0.000000, 0.923169)',
|
||||
fill: 'currentColor',
|
||||
fillRule: 'nonzero',
|
||||
},
|
||||
/*#__PURE__*/ createVNode('rect', {
|
||||
id: 'ShapeLine-\u77E9\u5F62',
|
||||
opacity: 0,
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 16,
|
||||
height: 15.9807923,
|
||||
}),
|
||||
/*#__PURE__*/ createVNode('path', {
|
||||
d: 'M5.22,13.3173269 C4.90928357,14.1946577 4.03334945,14.7416208 3.10760502,14.6363783 C2.18186059,14.5311359 1.45139881,13.801551 1.34602985,12.8769179 C1.24066088,11.9522848 1.78828141,11.0774022 2.66666667,10.7670588 L2.66666667,5.21373349 C1.78828141,4.90339007 1.24066088,4.02850749 1.34602985,3.1038744 C1.45139881,2.1792413 2.18186059,1.44965643 3.10760502,1.34441396 C4.03334945,1.23917149 4.90928357,1.78613461 5.22,2.66346539 L10.78,2.66346539 C11.0907164,1.78613461 11.9666505,1.23917149 12.892395,1.34441396 C13.8181394,1.44965643 14.5486012,2.1792413 14.6539702,3.1038744 C14.7593391,4.02850749 14.2117186,4.90339007 13.3333333,5.21373349 L13.3333333,10.7670588 C14.2117186,11.0774022 14.7593391,11.9522848 14.6539702,12.8769179 C14.5486012,13.801551 13.8181394,14.5311359 12.892395,14.6363783 C11.9666505,14.7416208 11.0907164,14.1946577 10.78,13.3173269 L5.22,13.3173269 Z M5.22,11.9855942 L10.78,11.9855942 C10.9819939,11.4165133 11.430235,10.9688103 12,10.7670588 L12,5.21373349 C11.430235,5.01198206 10.9819939,4.56427905 10.78,3.99519808 L5.22,3.99519808 C5.01800608,4.56427905 4.56976496,5.01198206 4,5.21373349 L4,10.7670588 C4.56976496,10.9688103 5.01800608,11.4165133 5.22,11.9855942 Z M3.33333333,3.99519809 C3.5715347,3.9952345 3.79165744,3.86832906 3.91076865,3.66229434 C4.02987987,3.45625961 4.02987987,3.20240385 3.91076865,2.99636913 C3.79165744,2.79033441 3.5715347,2.66342897 3.33333333,2.66346538 C2.96518335,2.66352168 2.66676872,2.96162371 2.66676872,3.32933173 C2.66676872,3.69703976 2.96518335,3.99514178 3.33333333,3.99519809 L3.33333333,3.99519809 Z M12.6666667,3.99519809 C12.904868,3.9952345 13.1249908,3.86832906 13.244102,3.66229434 C13.3632132,3.45625961 13.3632132,3.20240385 13.244102,2.99636913 C13.1249908,2.79033441 12.904868,2.66342897 12.6666667,2.66346538 C12.2985167,2.66352168 12.0001021,2.96162371 12.0001021,3.32933173 C12.0001021,3.69703976 12.2985167,3.99514178 12.6666667,3.99519809 L12.6666667,3.99519809 Z M12.6666667,13.3173269 C12.904868,13.3173633 13.1249908,13.1904579 13.244102,12.9844232 C13.3632132,12.7783885 13.3632132,12.5245327 13.244102,12.318498 C13.1249908,12.1124633 12.904868,11.9855578 12.6666667,11.9855942 C12.2985167,11.9856505 12.0001021,12.2837526 12.0001021,12.6514606 C12.0001021,13.0191686 12.2985167,13.3172706 12.6666667,13.3173269 L12.6666667,13.3173269 Z M3.33333333,13.3173269 C3.5715347,13.3173633 3.79165744,13.1904579 3.91076865,12.9844232 C4.02987987,12.7783885 4.02987987,12.5245327 3.91076865,12.318498 C3.79165744,12.1124633 3.5715347,11.9855578 3.33333333,11.9855942 C2.96518335,11.9856505 2.66676872,12.2837526 2.66676872,12.6514606 C2.66676872,13.0191686 2.96518335,13.3172706 3.33333333,13.3173269 L3.33333333,13.3173269 Z',
|
||||
id: 'ShapeLine-\u5F62\u72B6',
|
||||
}),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
export default ShapeLine;
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import type { CSSProperties } from 'vue';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
const ShapeLine = defineComponent({
|
||||
name: 'ShapeLine',
|
||||
setup(_, { attrs }) {
|
||||
return () => {
|
||||
return (
|
||||
<svg
|
||||
{...attrs}
|
||||
width="1em"
|
||||
height="1em"
|
||||
style={{
|
||||
verticalAlign: '-0.125em',
|
||||
...(attrs.style as CSSProperties),
|
||||
}}
|
||||
class={['nanqu-token-panel-icon', attrs.class].filter(Boolean).join(' ')}
|
||||
viewBox="0 0 16 17"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
id="ShapeLine-\u9875\u9762-1"
|
||||
stroke="none"
|
||||
stroke-width="1"
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
>
|
||||
<g
|
||||
id="ShapeLine-shape-line"
|
||||
transform="translate(0.000000, 0.923169)"
|
||||
fill="currentColor"
|
||||
fill-rule="nonzero"
|
||||
>
|
||||
<rect
|
||||
id="ShapeLine-\u77E9\u5F62"
|
||||
opacity="0"
|
||||
x="0"
|
||||
y="0"
|
||||
width="16"
|
||||
height="15.9807923"
|
||||
></rect>
|
||||
<path
|
||||
d="M5.22,13.3173269 C4.90928357,14.1946577 4.03334945,14.7416208 3.10760502,14.6363783 C2.18186059,14.5311359 1.45139881,13.801551 1.34602985,12.8769179 C1.24066088,11.9522848 1.78828141,11.0774022 2.66666667,10.7670588 L2.66666667,5.21373349 C1.78828141,4.90339007 1.24066088,4.02850749 1.34602985,3.1038744 C1.45139881,2.1792413 2.18186059,1.44965643 3.10760502,1.34441396 C4.03334945,1.23917149 4.90928357,1.78613461 5.22,2.66346539 L10.78,2.66346539 C11.0907164,1.78613461 11.9666505,1.23917149 12.892395,1.34441396 C13.8181394,1.44965643 14.5486012,2.1792413 14.6539702,3.1038744 C14.7593391,4.02850749 14.2117186,4.90339007 13.3333333,5.21373349 L13.3333333,10.7670588 C14.2117186,11.0774022 14.7593391,11.9522848 14.6539702,12.8769179 C14.5486012,13.801551 13.8181394,14.5311359 12.892395,14.6363783 C11.9666505,14.7416208 11.0907164,14.1946577 10.78,13.3173269 L5.22,13.3173269 Z M5.22,11.9855942 L10.78,11.9855942 C10.9819939,11.4165133 11.430235,10.9688103 12,10.7670588 L12,5.21373349 C11.430235,5.01198206 10.9819939,4.56427905 10.78,3.99519808 L5.22,3.99519808 C5.01800608,4.56427905 4.56976496,5.01198206 4,5.21373349 L4,10.7670588 C4.56976496,10.9688103 5.01800608,11.4165133 5.22,11.9855942 Z M3.33333333,3.99519809 C3.5715347,3.9952345 3.79165744,3.86832906 3.91076865,3.66229434 C4.02987987,3.45625961 4.02987987,3.20240385 3.91076865,2.99636913 C3.79165744,2.79033441 3.5715347,2.66342897 3.33333333,2.66346538 C2.96518335,2.66352168 2.66676872,2.96162371 2.66676872,3.32933173 C2.66676872,3.69703976 2.96518335,3.99514178 3.33333333,3.99519809 L3.33333333,3.99519809 Z M12.6666667,3.99519809 C12.904868,3.9952345 13.1249908,3.86832906 13.244102,3.66229434 C13.3632132,3.45625961 13.3632132,3.20240385 13.244102,2.99636913 C13.1249908,2.79033441 12.904868,2.66342897 12.6666667,2.66346538 C12.2985167,2.66352168 12.0001021,2.96162371 12.0001021,3.32933173 C12.0001021,3.69703976 12.2985167,3.99514178 12.6666667,3.99519809 L12.6666667,3.99519809 Z M12.6666667,13.3173269 C12.904868,13.3173633 13.1249908,13.1904579 13.244102,12.9844232 C13.3632132,12.7783885 13.3632132,12.5245327 13.244102,12.318498 C13.1249908,12.1124633 12.904868,11.9855578 12.6666667,11.9855942 C12.2985167,11.9856505 12.0001021,12.2837526 12.0001021,12.6514606 C12.0001021,13.0191686 12.2985167,13.3172706 12.6666667,13.3173269 L12.6666667,13.3173269 Z M3.33333333,13.3173269 C3.5715347,13.3173633 3.79165744,13.1904579 3.91076865,12.9844232 C4.02987987,12.7783885 4.02987987,12.5245327 3.91076865,12.318498 C3.79165744,12.1124633 3.5715347,11.9855578 3.33333333,11.9855942 C2.96518335,11.9856505 2.66676872,12.2837526 2.66676872,12.6514606 C2.66676872,13.0191686 2.96518335,13.3172706 3.33333333,13.3173269 L3.33333333,13.3173269 Z"
|
||||
id="ShapeLine-\u5F62\u72B6"
|
||||
></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
export default ShapeLine;
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
import { createVNode } from 'vue';
|
||||
|
||||
function TokenPanel(props) {
|
||||
return /*#__PURE__*/ createVNode(
|
||||
'svg',
|
||||
Object.assign(
|
||||
{
|
||||
width: '1em',
|
||||
height: '1em',
|
||||
viewBox: '0 0 20 19',
|
||||
xmlns: 'http://www.w3.org/2000/svg',
|
||||
xmlnsXlink: 'http://www.w3.org/1999/xlink',
|
||||
},
|
||||
props,
|
||||
{
|
||||
style: Object.assign(
|
||||
{
|
||||
verticalAlign: '-0.125em',
|
||||
},
|
||||
props.style,
|
||||
),
|
||||
className: ['nanqu-token-panel-icon', props.className].filter(Boolean).join(' '),
|
||||
},
|
||||
),
|
||||
/*#__PURE__*/ createVNode(
|
||||
'g',
|
||||
{
|
||||
id: 'TokenPanel-\u9875\u9762-1',
|
||||
stroke: 'none',
|
||||
strokeWidth: 1,
|
||||
fill: 'none',
|
||||
fillRule: 'evenodd',
|
||||
fillOpacity: 0.85,
|
||||
},
|
||||
/*#__PURE__*/ createVNode(
|
||||
'g',
|
||||
{
|
||||
id: 'TokenPanel-\u4E3B\u9898\u7F16\u8F91\u5668---\u591A\u4E3B\u9898',
|
||||
transform: 'translate(-14.000000, -70.000000)',
|
||||
fill: 'currentColor',
|
||||
},
|
||||
/*#__PURE__*/ createVNode(
|
||||
'g',
|
||||
{
|
||||
id: 'TokenPanel-\u7F16\u7EC4-3',
|
||||
transform: 'translate(10.000000, 66.000000)',
|
||||
},
|
||||
/*#__PURE__*/ createVNode(
|
||||
'g',
|
||||
{
|
||||
id: 'TokenPanel-\u7F16\u7EC4-20',
|
||||
transform: 'translate(4.000000, 4.000000)',
|
||||
},
|
||||
/*#__PURE__*/ createVNode('rect', {
|
||||
id: 'TokenPanel-\u77E9\u5F62',
|
||||
opacity: 0.600000024,
|
||||
x: 1,
|
||||
y: 12,
|
||||
width: 7,
|
||||
height: 7,
|
||||
rx: 0.434782594,
|
||||
}),
|
||||
/*#__PURE__*/ createVNode('path', {
|
||||
d: 'M12.3540059,0 L19.5652174,0 C19.8053412,8.08981097e-16 20,0.194658804 20,0.434782609 L20,7.6459941 C20,7.88611791 19.8053412,8.08077671 19.5652174,8.08077671 C19.4499059,8.08077671 19.3393172,8.03496939 19.2577797,7.95343183 L12.0465682,0.74222034 C11.876775,0.572427169 11.876775,0.297138048 12.0465682,0.127344878 C12.1281057,0.0458073219 12.2386944,-6.44951433e-16 12.3540059,0 Z',
|
||||
id: 'TokenPanel-\u77E9\u5F62',
|
||||
opacity: 0.400000006,
|
||||
}),
|
||||
/*#__PURE__*/ createVNode('circle', {
|
||||
id: 'TokenPanel-\u692D\u5706\u5F62',
|
||||
cx: 4.34782609,
|
||||
cy: 4.34782609,
|
||||
r: 4.34782609,
|
||||
}),
|
||||
/*#__PURE__*/ createVNode('circle', {
|
||||
id: 'TokenPanel-\u692D\u5706\u5F62',
|
||||
cx: 15.5,
|
||||
cy: 15.5,
|
||||
r: 3.5,
|
||||
}),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
export default TokenPanel;
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
import type { CSSProperties } from 'vue';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
const TokenPanel = defineComponent({
|
||||
name: 'TokenPanel',
|
||||
setup(_, { attrs }) {
|
||||
return () => {
|
||||
return (
|
||||
<svg
|
||||
{...attrs}
|
||||
width="1em"
|
||||
height="1em"
|
||||
style={{
|
||||
verticalAlign: '-0.125em',
|
||||
...(attrs.style as CSSProperties),
|
||||
}}
|
||||
class={['nanqu-token-panel-icon', attrs.class].filter(Boolean).join(' ')}
|
||||
viewBox="0 0 20 19"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
id="TokenPanel-\u9875\u9762-1"
|
||||
stroke="none"
|
||||
stroke-width="1"
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
fill-opacity="0.85"
|
||||
>
|
||||
<g
|
||||
id="TokenPanel-\u4E3B\u9898\u7F16\u8F91\u5668---\u591A\u4E3B\u9898"
|
||||
transform="translate(-14.000000, -70.000000)"
|
||||
fill="currentColor"
|
||||
>
|
||||
<g id="TokenPanel-\u7F16\u7EC4-3" transform="translate(10.000000, 66.000000)">
|
||||
<g id="TokenPanel-\u7F16\u7EC4-20" transform="translate(4.000000, 4.000000)">
|
||||
<rect
|
||||
id="TokenPanel-\u77E9\u5F62"
|
||||
opacity="0.600000024"
|
||||
x="1"
|
||||
y="12"
|
||||
width="7"
|
||||
height="7"
|
||||
rx="0.434782594"
|
||||
></rect>
|
||||
<path
|
||||
d="M12.3540059,0 L19.5652174,0 C19.8053412,8.08981097e-16 20,0.194658804 20,0.434782609 L20,7.6459941 C20,7.88611791 19.8053412,8.08077671 19.5652174,8.08077671 C19.4499059,8.08077671 19.3393172,8.03496939 19.2577797,7.95343183 L12.0465682,0.74222034 C11.876775,0.572427169 11.876775,0.297138048 12.0465682,0.127344878 C12.1281057,0.0458073219 12.2386944,-6.44951433e-16 12.3540059,0 Z"
|
||||
id="TokenPanel-\u77E9\u5F62"
|
||||
opacity="0.400000006"
|
||||
></path>
|
||||
<circle
|
||||
id="TokenPanel-\u692D\u5706\u5F62"
|
||||
cx="4.34782609"
|
||||
cy="4.34782609"
|
||||
r="4.34782609"
|
||||
></circle>
|
||||
<circle id="TokenPanel-\u692D\u5706\u5F62" cx="15.5" cy="15.5" r="3.5"></circle>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
export default TokenPanel;
|
||||
|
|
@ -1,15 +1,16 @@
|
|||
export { default as Margin } from './Margin.js';
|
||||
export { default as Motion } from './Motion.js';
|
||||
|
||||
export { default as ShapeLine } from './ShapeLine.js';
|
||||
|
||||
export { default as Arrow } from './Arrow.js';
|
||||
export { default as SearchDropdown } from './SearchDropdown.js';
|
||||
export { default as TokenPanelIcon } from './TokenPanel.js';
|
||||
export { default as Brush } from './Brush.js';
|
||||
|
||||
export { default as Light } from './Light';
|
||||
export { default as DarkTheme } from './Dark';
|
||||
export { default as Pick } from './Pick';
|
||||
export { default as CompactTheme } from './Compact';
|
||||
export { default as Control } from './Control';
|
||||
|
||||
export { default as Motion } from './Motion';
|
||||
export { default as ShapeLine } from './ShapeLine';
|
||||
|
||||
export { default as Arrow } from './Arrow';
|
||||
export { default as SearchDropdown } from './SearchDropdown';
|
||||
export { default as Brush } from './Brush';
|
||||
|
||||
export { default as Margin } from './Margin';
|
||||
|
||||
export { default as TokenPanelIcon } from './TokenPanel';
|
||||
|
|
|
|||
|
|
@ -1,2 +1,12 @@
|
|||
export type { MutableTheme, PreviewerProps, Theme } from './interface';
|
||||
export * from './locale';
|
||||
export * from './meta';
|
||||
export * from './overviews';
|
||||
export { default as PreviewDemo } from './PreviewDemo';
|
||||
export type { PreviewDemoProps } from './PreviewDemo';
|
||||
export { default as Previewer } from './previewer';
|
||||
export { default as ThemeEditor } from './ThemeEditor';
|
||||
export type { ThemeEditorProps } from './ThemeEditor';
|
||||
export { default as TokenPanel } from './token-panel';
|
||||
export type { TokenPanelRef, TokenPreviewProps } from './token-panel';
|
||||
export { default as getDesignToken } from './utils/getDesignToken';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,348 @@
|
|||
import { Button, Layout, message, theme as antdTheme } from 'ant-design-vue';
|
||||
import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
|
||||
import classNames from 'ant-design-vue/es/_util/classNames';
|
||||
import { PropType } from 'vue';
|
||||
import { defineComponent, toRefs, watchEffect, computed, ref } from 'vue';
|
||||
import ComponentPanel from './component-panel';
|
||||
import type { FilterMode } from './FilterPanel';
|
||||
import FilterPanel from './FilterPanel';
|
||||
import { Arrow, CompactTheme, DarkTheme } from './icons';
|
||||
import type { MutableTheme, PreviewerProps, Theme } from './interface';
|
||||
import type { ThemeSelectProps } from './ThemeSelect';
|
||||
import ThemeSelect from './ThemeSelect';
|
||||
import type { TokenPanelRef } from './token-panel';
|
||||
import TokenPanel from './token-panel';
|
||||
import type { TokenType } from './utils/classifyToken';
|
||||
import makeStyle from './utils/makeStyle';
|
||||
|
||||
const { darkAlgorithm } = antdTheme;
|
||||
|
||||
const { Header, Sider, Content } = Layout;
|
||||
const SIDER_WIDTH = 340;
|
||||
|
||||
const useStyle = makeStyle('layout', token => ({
|
||||
[`.previewer-layout${token.rootCls}-layout`]: {
|
||||
[`${token.rootCls}-layout-header`]: {
|
||||
backgroundColor: 'white !important',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
|
||||
paddingInline: `${token.paddingLG}px !important`,
|
||||
},
|
||||
|
||||
[`${token.rootCls}-layout-sider`]: {
|
||||
padding: 0,
|
||||
borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
overflow: 'visible !important',
|
||||
|
||||
[`${token.rootCls}-btn${token.rootCls}-btn-circle.previewer-sider-collapse-btn`]: {
|
||||
position: 'absolute',
|
||||
transform: 'translateX(50%)',
|
||||
border: 'none',
|
||||
boxShadow:
|
||||
'0 2px 8px -2px rgba(0,0,0,0.05), 0 1px 4px -1px rgba(25,15,15,0.07), 0 0 1px 0 rgba(0,0,0,0.08)',
|
||||
marginTop: token.margin,
|
||||
insetInlineEnd: 0,
|
||||
color: 'rgba(0,0,0,0.25)',
|
||||
|
||||
'&:hover': {
|
||||
color: 'rgba(0,0,0,0.45)',
|
||||
boxShadow:
|
||||
'0 2px 8px -2px rgba(0,0,0,0.18), 0 1px 4px -1px rgba(25,15,15,0.18), 0 0 1px 0 rgba(0,0,0,0.18)',
|
||||
},
|
||||
|
||||
'.previewer-sider-collapse-btn-icon': {
|
||||
fontSize: 16,
|
||||
marginTop: 4,
|
||||
transition: 'transform 0.3s',
|
||||
},
|
||||
|
||||
'&-collapsed': {
|
||||
borderRadius: { _skip_check_: true, value: '0 100px 100px 0' },
|
||||
transform: 'translateX(90%)',
|
||||
'.previewer-sider-collapse-btn-icon': {
|
||||
transform: 'rotate(180deg)',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
'.previewer-sider-handler': {
|
||||
position: 'absolute',
|
||||
insetInlineEnd: 0,
|
||||
height: '100%',
|
||||
width: 8,
|
||||
transform: 'translateX(50%)',
|
||||
cursor: 'ew-resize',
|
||||
opacity: 0,
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
const Previewer = defineComponent({
|
||||
name: 'Previewer',
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
onSave: { type: Function as PropType<(themeConfig: ThemeConfig) => void> },
|
||||
showTheme: { type: Boolean },
|
||||
theme: { type: Object as PropType<Theme> },
|
||||
onThemeChange: { type: Function as PropType<(config: ThemeConfig) => void> },
|
||||
},
|
||||
setup(props, { attrs }) {
|
||||
const { showTheme, theme } = toRefs(props);
|
||||
|
||||
const [wrapSSR, hashId] = useStyle();
|
||||
const selectedTokens = ref<string[]>([]);
|
||||
const siderVisible = ref<boolean>(true);
|
||||
const siderWidth = ref<number>(SIDER_WIDTH);
|
||||
const filterMode = ref<FilterMode>('filter');
|
||||
const filterTypes = ref<TokenType[]>([]);
|
||||
|
||||
const tokenPanelRef = ref<TokenPanelRef>(null);
|
||||
const dragRef = ref(false);
|
||||
const siderRef = ref<HTMLDivElement>(null);
|
||||
|
||||
const defaultThemes = computed<ThemeSelectProps['themes']>(() => [
|
||||
{
|
||||
name: '默认主题',
|
||||
key: 'default',
|
||||
config: {},
|
||||
fixed: true,
|
||||
},
|
||||
{
|
||||
name: '暗色主题',
|
||||
key: 'dark',
|
||||
config: {
|
||||
algorithm: darkAlgorithm,
|
||||
},
|
||||
icon: <DarkTheme style={{ fontSize: '16px' }} />,
|
||||
closable: true,
|
||||
},
|
||||
{
|
||||
name: '紧凑主题',
|
||||
key: 'compact',
|
||||
config: {},
|
||||
icon: <CompactTheme style={{ fontSize: '16px' }} />,
|
||||
closable: true,
|
||||
},
|
||||
]);
|
||||
|
||||
const themes = ref<ThemeSelectProps['themes']>(
|
||||
theme.value
|
||||
? [
|
||||
{
|
||||
...theme.value,
|
||||
fixed: true,
|
||||
},
|
||||
]
|
||||
: defaultThemes.value,
|
||||
);
|
||||
|
||||
const shownThemes = ref<string[]>(
|
||||
showTheme.value && !theme.value ? ['default', 'dark'] : [themes.value[0].key],
|
||||
);
|
||||
const enabledThemes = ref<string[]>(
|
||||
showTheme.value && !theme.value ? ['default', 'dark'] : [themes.value[0].key],
|
||||
);
|
||||
|
||||
watchEffect(() => {
|
||||
themes.value = theme.value
|
||||
? [
|
||||
{
|
||||
...theme.value,
|
||||
fixed: true,
|
||||
},
|
||||
]
|
||||
: defaultThemes.value;
|
||||
shownThemes.value = theme.value ? [theme.value.key] : shownThemes.value;
|
||||
enabledThemes.value = theme.value ? [theme.value.key] : enabledThemes.value;
|
||||
});
|
||||
|
||||
watchEffect(() => {
|
||||
const handleMouseUp = () => {
|
||||
dragRef.value = false;
|
||||
document.body.style.cursor = '';
|
||||
if (siderRef.value) {
|
||||
siderRef.value.style.transition = 'all 0.3s';
|
||||
}
|
||||
};
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
if (dragRef.value) {
|
||||
e.preventDefault();
|
||||
siderWidth.value = e.clientX > SIDER_WIDTH ? e.clientX : SIDER_WIDTH;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('mouseup', handleMouseUp);
|
||||
window.addEventListener('mousemove', handleMouseMove);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('mouseup', handleMouseUp);
|
||||
window.removeEventListener('mousemove', handleMouseMove);
|
||||
};
|
||||
});
|
||||
|
||||
const handleTokenClick = (tokenName: string) => {
|
||||
tokenPanelRef.value?.scrollToToken(tokenName);
|
||||
};
|
||||
|
||||
const mutableThemes = computed(() =>
|
||||
enabledThemes.value.map<MutableTheme>(item => {
|
||||
const themeEntity = themes.value.find(themeItem => themeItem.key === item)!;
|
||||
return {
|
||||
name: themeEntity.name,
|
||||
key: themeEntity.key,
|
||||
config: themeEntity.config,
|
||||
onThemeChange: newTheme => {
|
||||
if (themeEntity.key === theme.value?.key) {
|
||||
props.onThemeChange?.(newTheme);
|
||||
} else {
|
||||
themes.value = themes.value.map(themeItem =>
|
||||
themeItem.key === themeEntity.key
|
||||
? {
|
||||
...themeItem,
|
||||
config: newTheme,
|
||||
}
|
||||
: themeItem,
|
||||
);
|
||||
}
|
||||
},
|
||||
};
|
||||
}),
|
||||
);
|
||||
|
||||
const componentPanel = computed(() => (
|
||||
<ComponentPanel
|
||||
filterMode={filterMode.value}
|
||||
selectedTokens={selectedTokens.value}
|
||||
themes={mutableThemes.value}
|
||||
onTokenClick={handleTokenClick}
|
||||
style={{ flex: 1, height: 0, marginTop: '12px' }}
|
||||
/>
|
||||
));
|
||||
|
||||
return () => {
|
||||
return wrapSSR(
|
||||
<Layout {...attrs} class={classNames('previewer-layout', hashId.value, attrs.class)}>
|
||||
<Header class="previewer-header">
|
||||
<span style={{ fontSize: '16px', fontWeight: 'bold', marginRight: '16px' }}>
|
||||
主题预览器
|
||||
</span>
|
||||
{showTheme.value && (
|
||||
<div>
|
||||
<ThemeSelect
|
||||
showAddTheme
|
||||
enabledThemes={enabledThemes.value}
|
||||
shownThemes={shownThemes.value}
|
||||
themes={themes.value}
|
||||
onEnabledThemeChange={value => {
|
||||
if (value.length > 2) {
|
||||
message.warning({
|
||||
content: '最多同时展示两个主题',
|
||||
});
|
||||
return;
|
||||
}
|
||||
enabledThemes.value = value;
|
||||
}}
|
||||
onShownThemeChange={(value, selectTheme, { type }) => {
|
||||
if (type === 'select' && enabledThemes.value.length < 2) {
|
||||
enabledThemes.value = [...enabledThemes.value, selectTheme];
|
||||
}
|
||||
shownThemes.value = value;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ marginLeft: 'auto' }}
|
||||
onClick={() => props.onSave?.(themes.value[0].config)}
|
||||
>
|
||||
保存
|
||||
</Button>
|
||||
</Header>
|
||||
<Layout
|
||||
style={{
|
||||
height: 'calc(100vh - 64px)',
|
||||
}}
|
||||
>
|
||||
<Sider
|
||||
style={{
|
||||
backgroundColor: 'white',
|
||||
height: '100%',
|
||||
overflow: 'auto',
|
||||
flex: `0 0 ${siderWidth.value}px`,
|
||||
willChange: 'auto',
|
||||
}}
|
||||
width={siderVisible.value ? siderWidth.value : 0}
|
||||
ref={siderRef}
|
||||
>
|
||||
<div
|
||||
class="previewer-sider-handler"
|
||||
onMousedown={() => {
|
||||
dragRef.value = true;
|
||||
document.body.style.cursor = 'ew-resize';
|
||||
if (siderRef.value) {
|
||||
siderRef.value.style.transition = 'none';
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
onClick={() => (siderVisible.value = !siderVisible.value)}
|
||||
class={classNames(
|
||||
'previewer-sider-collapse-btn',
|
||||
!siderVisible.value && 'previewer-sider-collapse-btn-collapsed',
|
||||
)}
|
||||
size="small"
|
||||
icon={
|
||||
<Arrow
|
||||
rotate={siderVisible.value ? 0 : 180}
|
||||
class="previewer-sider-collapse-btn-icon"
|
||||
/>
|
||||
}
|
||||
shape="circle"
|
||||
/>
|
||||
<TokenPanel
|
||||
ref={tokenPanelRef}
|
||||
filterTypes={filterTypes.value}
|
||||
onFilterTypesChange={types => (filterTypes.value = types)}
|
||||
themes={mutableThemes.value}
|
||||
selectedTokens={selectedTokens.value}
|
||||
enableTokenSelect
|
||||
onTokenSelect={tokenName =>
|
||||
(selectedTokens.value = selectedTokens.value.includes(tokenName)
|
||||
? selectedTokens.value.filter(item => item !== tokenName)
|
||||
: [...selectedTokens.value, tokenName])
|
||||
}
|
||||
/>
|
||||
</Sider>
|
||||
<Content
|
||||
style={{
|
||||
padding: '16px 20px 28px 24px',
|
||||
height: '100%',
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<FilterPanel
|
||||
selectedTokens={selectedTokens.value}
|
||||
onSelectedTokensChange={tokens => (selectedTokens.value = tokens)}
|
||||
filterMode={filterMode.value}
|
||||
onFilterModeChange={mode => (filterMode.value = mode)}
|
||||
onTokenClick={handleTokenClick}
|
||||
/>
|
||||
{componentPanel.value}
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>,
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
export { PreviewerProps };
|
||||
|
||||
export default Previewer;
|
||||
|
|
@ -80,7 +80,7 @@ const ComponentDemoPro = defineComponent({
|
|||
style={{ margin: '12px 0 0 12px' }}
|
||||
/>
|
||||
|
||||
{/* <ConfigProvider
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Select: {
|
||||
|
|
@ -106,20 +106,20 @@ const ComponentDemoPro = defineComponent({
|
|||
},
|
||||
},
|
||||
}}
|
||||
> */}
|
||||
{mode.value === 'overview' ? (
|
||||
<div style={{ margin: '12px' }}>{overviewDemo.value}</div>
|
||||
) : (
|
||||
<ComponentDemoGroup
|
||||
selectedTokens={selectedTokens.value}
|
||||
themes={[theme.value]}
|
||||
components={components.value}
|
||||
activeComponents={activeComponents.value}
|
||||
componentDrawer={componentDrawer.value}
|
||||
hideTokens
|
||||
/>
|
||||
)}
|
||||
{/* </ConfigProvider> */}
|
||||
>
|
||||
{mode.value === 'overview' ? (
|
||||
<div style={{ margin: '12px' }}>{overviewDemo.value}</div>
|
||||
) : (
|
||||
<ComponentDemoGroup
|
||||
selectedTokens={selectedTokens.value}
|
||||
themes={[theme.value]}
|
||||
components={components.value}
|
||||
activeComponents={activeComponents.value}
|
||||
componentDrawer={componentDrawer.value}
|
||||
hideTokens
|
||||
/>
|
||||
)}
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -140,9 +140,9 @@ export default defineComponent({
|
|||
},
|
||||
setup(props, { attrs }) {
|
||||
return () => (
|
||||
// <ConfigProvider theme={props.theme.config}>
|
||||
<ComponentDemoPro {...props} {...attrs} />
|
||||
// </ConfigProvider>
|
||||
<ConfigProvider theme={props.theme.config}>
|
||||
<ComponentDemoPro {...props} {...attrs} />
|
||||
</ConfigProvider>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import {
|
|||
Button,
|
||||
Checkbox,
|
||||
Collapse,
|
||||
// ConfigProvider,
|
||||
ConfigProvider,
|
||||
Popover,
|
||||
Switch,
|
||||
Tooltip,
|
||||
|
|
@ -519,7 +519,7 @@ const MapTokenCollapse = defineComponent({
|
|||
return (
|
||||
<Collapse
|
||||
class="token-panel-pro-grouped-map-collapse"
|
||||
defaultActiveKey={Object.keys(groupedTokens.value)}
|
||||
activeKey={Object.keys(groupedTokens.value)}
|
||||
expandIconPosition="end"
|
||||
expandIcon={({ isActive }) => (
|
||||
<CaretRightOutlined rotate={isActive ? 450 : 360} style={{ fontSize: '12px' }} />
|
||||
|
|
@ -544,7 +544,7 @@ const MapTokenCollapse = defineComponent({
|
|||
return (
|
||||
<Collapse
|
||||
class="token-panel-pro-grouped-map-collapse"
|
||||
defaultActiveKey={group.value.groups.map(item => item.key)}
|
||||
activeKey={group.value.groups.map(item => item.key)}
|
||||
expandIconPosition="end"
|
||||
expandIcon={({ isActive }) => (
|
||||
<CaretRightOutlined rotate={isActive ? 450 : 360} style={{ fontSize: '12px' }} />
|
||||
|
|
@ -707,149 +707,154 @@ const TokenContent = defineComponent({
|
|||
/>
|
||||
)}
|
||||
</div>
|
||||
{/* <ConfigProvider
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
colorBorder: '#f0f0f0',
|
||||
},
|
||||
}}
|
||||
> */}
|
||||
<Collapse
|
||||
class="token-panel-pro-token-collapse"
|
||||
expandIconPosition={'end'}
|
||||
ghost
|
||||
accordion
|
||||
v-model={[curActiveGroup.value, 'activeKey']}
|
||||
v-slots={{
|
||||
expandIcon: ({ isActive }) => (
|
||||
<CaretRightOutlined rotate={isActive ? 450 : 360} style={{ fontSize: '12px' }} />
|
||||
),
|
||||
}}
|
||||
>
|
||||
{category.value.groups.map((group, index) => {
|
||||
return (
|
||||
<Panel
|
||||
header={
|
||||
<span style={{ fontWeight: 500 }}>
|
||||
{locale.value._lang === 'zh-CN' ? group.name : group.nameEn}
|
||||
</span>
|
||||
}
|
||||
key={group.key}
|
||||
>
|
||||
<div>
|
||||
<div class="token-panel-pro-token-collapse-description">
|
||||
{locale.value._lang === 'zh-CN' ? group.desc : group.descEn}
|
||||
</div>
|
||||
{group.seedToken?.map(seedToken => (
|
||||
<div key={seedToken} class="token-panel-pro-token-collapse-seed-block">
|
||||
<div style={{ marginRight: 'auto' }}>
|
||||
<div class="token-panel-pro-token-collapse-subtitle">
|
||||
<span style={{ fontSize: '12px' }}>Seed Token</span>
|
||||
<Collapse
|
||||
class="token-panel-pro-token-collapse"
|
||||
expandIconPosition={'end'}
|
||||
ghost
|
||||
accordion
|
||||
v-model={[curActiveGroup.value, 'activeKey']}
|
||||
v-slots={{
|
||||
expandIcon: ({ isActive }) => (
|
||||
<CaretRightOutlined
|
||||
rotate={isActive ? 450 : 360}
|
||||
style={{ fontSize: '12px' }}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
>
|
||||
{category.value.groups.map((group, index) => {
|
||||
return (
|
||||
<Panel
|
||||
header={
|
||||
<span style={{ fontWeight: 500 }}>
|
||||
{locale.value._lang === 'zh-CN' ? group.name : group.nameEn}
|
||||
</span>
|
||||
}
|
||||
key={group.key}
|
||||
>
|
||||
<div>
|
||||
<div class="token-panel-pro-token-collapse-description">
|
||||
{locale.value._lang === 'zh-CN' ? group.desc : group.descEn}
|
||||
</div>
|
||||
{group.seedToken?.map(seedToken => (
|
||||
<div key={seedToken} class="token-panel-pro-token-collapse-seed-block">
|
||||
<div style={{ marginRight: 'auto' }}>
|
||||
<div class="token-panel-pro-token-collapse-subtitle">
|
||||
<span style={{ fontSize: '12px' }}>Seed Token</span>
|
||||
<Tooltip
|
||||
placement="topLeft"
|
||||
arrowPointAtCenter
|
||||
title={
|
||||
locale.value._lang === 'zh-CN'
|
||||
? (tokenMeta as any)[seedToken]?.desc
|
||||
: (tokenMeta as any)[seedToken]?.descEn
|
||||
}
|
||||
>
|
||||
<QuestionCircleOutlined
|
||||
style={{ fontSize: '14px', marginLeft: '8px' }}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div>
|
||||
<span class="token-panel-pro-token-collapse-seed-block-name-cn">
|
||||
{locale.value._lang === 'zh-CN'
|
||||
? (tokenMeta as any)[seedToken]?.name
|
||||
: (tokenMeta as any)[seedToken]?.nameEn}
|
||||
</span>
|
||||
{seedToken === 'colorInfo' && (
|
||||
<Checkbox
|
||||
style={{ marginLeft: '12px' }}
|
||||
checked={infoFollowPrimary.value}
|
||||
onChange={e =>
|
||||
props.onInfoFollowPrimaryChange(e.target.checked)
|
||||
}
|
||||
>
|
||||
{locale.value.followPrimary}
|
||||
</Checkbox>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<SeedTokenPreview
|
||||
theme={theme.value}
|
||||
tokenName={seedToken}
|
||||
disabled={seedToken === 'colorInfo' && infoFollowPrimary.value}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
{(group.mapToken || group.groups) && (
|
||||
<div style={{ marginTop: '16px', marginBottom: '24px' }}>
|
||||
<div
|
||||
class="token-panel-pro-token-collapse-subtitle"
|
||||
style={{
|
||||
marginBottom: '10px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<span>Map Token</span>
|
||||
<Tooltip
|
||||
placement="topLeft"
|
||||
arrowPointAtCenter
|
||||
title={
|
||||
locale.value._lang === 'zh-CN'
|
||||
? (tokenMeta as any)[seedToken]?.desc
|
||||
: (tokenMeta as any)[seedToken]?.descEn
|
||||
}
|
||||
title="梯度变量（Map Token） 是基于 Seed 派生的梯度变量，我们精心设计的梯度变量模型具有良好的视觉设计语义，可在亮暗色模式切换时保证视觉梯度的一致性。"
|
||||
>
|
||||
<QuestionCircleOutlined
|
||||
style={{ fontSize: '14px', marginLeft: '8px' }}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div>
|
||||
<span class="token-panel-pro-token-collapse-seed-block-name-cn">
|
||||
{locale.value._lang === 'zh-CN'
|
||||
? (tokenMeta as any)[seedToken]?.name
|
||||
: (tokenMeta as any)[seedToken]?.nameEn}
|
||||
</span>
|
||||
{seedToken === 'colorInfo' && (
|
||||
<Checkbox
|
||||
style={{ marginLeft: '12px' }}
|
||||
checked={infoFollowPrimary.value}
|
||||
onChange={e => props.onInfoFollowPrimaryChange(e.target.checked)}
|
||||
{group.mapTokenGroups && (
|
||||
<div
|
||||
style={{
|
||||
marginLeft: 'auto',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{locale.value.followPrimary}
|
||||
</Checkbox>
|
||||
<label style={{ marginRight: '4px' }}>
|
||||
{locale.value.groupView}
|
||||
</label>
|
||||
<Switch
|
||||
checked={grouped.value}
|
||||
onChange={v => (grouped.value = v as boolean)}
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<MapTokenCollapse
|
||||
group={group}
|
||||
theme={theme.value}
|
||||
selectedTokens={selectedTokens.value}
|
||||
onTokenSelect={props.onTokenSelect}
|
||||
groupFn={
|
||||
group.mapTokenGroups && grouped.value ? groupMapToken : undefined
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<SeedTokenPreview
|
||||
theme={theme.value}
|
||||
tokenName={seedToken}
|
||||
disabled={seedToken === 'colorInfo' && infoFollowPrimary.value}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
{(group.mapToken || group.groups) && (
|
||||
<div style={{ marginTop: '16px', marginBottom: '24px' }}>
|
||||
<div
|
||||
class="token-panel-pro-token-collapse-subtitle"
|
||||
style={{
|
||||
marginBottom: '10px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
)}
|
||||
{index < category.value.groups.length - 1 && (
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ borderRadius: '4px', marginBottom: '12px' }}
|
||||
onClick={() => {
|
||||
curActiveGroup.value = category.value.groups[index + 1]?.key;
|
||||
}}
|
||||
>
|
||||
<span>Map Token</span>
|
||||
<Tooltip
|
||||
placement="topLeft"
|
||||
arrowPointAtCenter
|
||||
title="梯度变量（Map Token） 是基于 Seed 派生的梯度变量，我们精心设计的梯度变量模型具有良好的视觉设计语义，可在亮暗色模式切换时保证视觉梯度的一致性。"
|
||||
>
|
||||
<QuestionCircleOutlined
|
||||
style={{ fontSize: '14px', marginLeft: '8px' }}
|
||||
/>
|
||||
</Tooltip>
|
||||
{group.mapTokenGroups && (
|
||||
<div
|
||||
style={{
|
||||
marginLeft: 'auto',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<label style={{ marginRight: '4px' }}>
|
||||
{locale.value.groupView}
|
||||
</label>
|
||||
<Switch
|
||||
checked={grouped.value}
|
||||
onChange={v => (grouped.value = v as boolean)}
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<MapTokenCollapse
|
||||
group={group}
|
||||
theme={theme.value}
|
||||
selectedTokens={selectedTokens.value}
|
||||
onTokenSelect={props.onTokenSelect}
|
||||
groupFn={
|
||||
group.mapTokenGroups && grouped.value ? groupMapToken : undefined
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{index < category.value.groups.length - 1 && (
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ borderRadius: '4px', marginBottom: '12px' }}
|
||||
onClick={() => {
|
||||
curActiveGroup.value = category.value.groups[index + 1]?.key;
|
||||
}}
|
||||
>
|
||||
{locale.value.next}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</Panel>
|
||||
);
|
||||
})}
|
||||
</Collapse>
|
||||
{/* </ConfigProvider> */}
|
||||
{locale.value.next}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</Panel>
|
||||
);
|
||||
})}
|
||||
</Collapse>
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
</div>,
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,15 +1,8 @@
|
|||
import { CheckOutlined } from '@ant-design/icons';
|
||||
import { Dropdown, Input, Menu, Switch, theme as antdTheme } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import useMergedState from 'rc-util/lib/hooks/useMergedState';
|
||||
import React, {
|
||||
forwardRef,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import type { PropType } from 'vue';
|
||||
import { defineComponent, toRefs, ref, watchEffect, computed } from 'vue';
|
||||
import { CheckOutlined } from '@ant-design/icons-vue';
|
||||
import { Dropdown, Input, Menu, Switch, theme as antdTheme } from 'ant-design-vue';
|
||||
import classNames from 'ant-design-vue/es/_util/classNames';
|
||||
import { SearchDropdown } from '../icons';
|
||||
import type { AliasToken, MutableTheme, TokenValue } from '../interface';
|
||||
import type { TokenType } from '../utils/classifyToken';
|
||||
|
|
@ -121,195 +114,214 @@ export interface TokenPreviewProps {
|
|||
export type TokenPanelRef = {
|
||||
scrollToToken: (token: string) => void;
|
||||
};
|
||||
export default defineComponent({
|
||||
name: 'TokenPreview',
|
||||
props: {
|
||||
themes: { type: Array as PropType<MutableTheme[]> },
|
||||
selectedTokens: { type: Array as PropType<string[]> },
|
||||
onTokenSelect: { type: Function as PropType<(token: string) => void> },
|
||||
filterTypes: { type: Array as PropType<TokenType[]> },
|
||||
onFilterTypesChange: { type: Function as PropType<(types: TokenType[]) => void> },
|
||||
enableTokenSelect: { type: Boolean },
|
||||
},
|
||||
setup(props, { attrs, expose }) {
|
||||
const { filterTypes, themes, selectedTokens, enableTokenSelect } = toRefs(props);
|
||||
|
||||
export default forwardRef<TokenPanelRef, TokenPreviewProps>((props: TokenPreviewProps, ref) => {
|
||||
const {
|
||||
filterTypes,
|
||||
onFilterTypesChange,
|
||||
themes,
|
||||
selectedTokens,
|
||||
onTokenSelect,
|
||||
enableTokenSelect,
|
||||
} = props;
|
||||
const [wrapSSR, hashId] = useStyle();
|
||||
const [search, setSearch] = useState<string>('');
|
||||
const [showAll, setShowAll] = useState<boolean>(false);
|
||||
const [showTokenListShadowTop, setShowTokenListShadowTop] = useState<boolean>(false);
|
||||
const cardWrapperRef = useRef<HTMLDivElement>(null);
|
||||
const [activeCards, setActiveCards] = useState<TokenType[]>([]);
|
||||
const [activeToken, setActiveToken] = useState<string | undefined>();
|
||||
const { token } = useToken();
|
||||
const [mergedFilterTypes, setMergedFilterTypes] = useMergedState<TokenType[]>(filterTypes || []);
|
||||
const [wrapSSR, hashId] = useStyle();
|
||||
const { token } = useToken();
|
||||
|
||||
// TODO: Split AliasToken and SeedToken
|
||||
const groupedToken = useMemo(() => classifyToken(token as any), [token]);
|
||||
const search = ref<string>('');
|
||||
const showAll = ref<boolean>(false);
|
||||
const showTokenListShadowTop = ref<boolean>(false);
|
||||
const cardWrapperRef = ref<HTMLDivElement>(null);
|
||||
const activeCards = ref<TokenType[]>([]);
|
||||
const activeToken = ref<string | undefined>();
|
||||
|
||||
useEffect(() => {
|
||||
const handleTokenListScroll = () => {
|
||||
setShowTokenListShadowTop((cardWrapperRef.current?.scrollTop ?? 0) > 0);
|
||||
};
|
||||
cardWrapperRef.current?.addEventListener('scroll', handleTokenListScroll);
|
||||
const wrapper = cardWrapperRef.current;
|
||||
return () => {
|
||||
wrapper?.removeEventListener('scroll', handleTokenListScroll);
|
||||
};
|
||||
}, []);
|
||||
const mergedFilterTypes = ref<TokenType[]>(filterTypes.value || []);
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
scrollToToken: tokenName => {
|
||||
const type = getTypeOfToken(tokenName);
|
||||
if (!activeCards.includes(type)) {
|
||||
setActiveCards(prev => [...prev, type]);
|
||||
}
|
||||
setActiveToken(tokenName);
|
||||
setTimeout(() => {
|
||||
const node = cardWrapperRef.current?.querySelector<HTMLElement>(
|
||||
`#${getTokenItemId(tokenName)}`,
|
||||
);
|
||||
if (!node) {
|
||||
return;
|
||||
// TODO: Split AliasToken and SeedToken
|
||||
const groupedToken = computed(() => classifyToken(token.value as any));
|
||||
|
||||
watchEffect(() => {
|
||||
const handleTokenListScroll = () => {
|
||||
showTokenListShadowTop.value = (cardWrapperRef.value?.scrollTop ?? 0) > 0;
|
||||
};
|
||||
cardWrapperRef.value?.addEventListener('scroll', handleTokenListScroll);
|
||||
const wrapper = cardWrapperRef.value;
|
||||
return () => {
|
||||
wrapper?.removeEventListener('scroll', handleTokenListScroll);
|
||||
};
|
||||
});
|
||||
|
||||
expose({
|
||||
scrollToToken: tokenName => {
|
||||
const type = getTypeOfToken(tokenName);
|
||||
if (!activeCards.value.includes(type)) {
|
||||
activeCards.value = [...activeCards.value, type];
|
||||
}
|
||||
node?.scrollIntoView({
|
||||
block: 'center',
|
||||
inline: 'nearest',
|
||||
});
|
||||
}, 100);
|
||||
},
|
||||
}));
|
||||
|
||||
const handleAliasTokenChange = (theme: MutableTheme, tokenName: string, value: TokenValue) => {
|
||||
theme.onThemeChange?.(
|
||||
{
|
||||
...theme.config,
|
||||
token: {
|
||||
...theme.config.token,
|
||||
[tokenName]: value,
|
||||
},
|
||||
activeToken.value = tokenName;
|
||||
setTimeout(() => {
|
||||
const node = cardWrapperRef.value?.querySelector<HTMLElement>(
|
||||
`#${getTokenItemId(tokenName)}`,
|
||||
);
|
||||
if (!node) {
|
||||
return;
|
||||
}
|
||||
node?.scrollIntoView({
|
||||
block: 'center',
|
||||
inline: 'nearest',
|
||||
});
|
||||
}, 100);
|
||||
},
|
||||
['token', tokenName],
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
return wrapSSR(
|
||||
<div className={classNames('preview-panel-wrapper', hashId)}>
|
||||
<div className={classNames('preview-panel')}>
|
||||
<div style={{ padding: 16 }}>
|
||||
<h3 className={classNames('preview-panel-space', hashId)}>
|
||||
<span>Alias Token 预览</span>
|
||||
<span className="preview-hide-token">
|
||||
<span>显示所有</span>
|
||||
<Switch checked={showAll} onChange={value => setShowAll(value)} size="small" />
|
||||
</span>
|
||||
</h3>
|
||||
<Input
|
||||
allowClear
|
||||
onChange={e => {
|
||||
setSearch(e.target.value);
|
||||
}}
|
||||
bordered={false}
|
||||
addonBefore={
|
||||
<>
|
||||
<Dropdown
|
||||
overlay={
|
||||
<Menu
|
||||
items={[
|
||||
{
|
||||
label: '筛选项',
|
||||
type: 'group',
|
||||
key: 'title-key',
|
||||
style: { fontSize: 12 },
|
||||
},
|
||||
...TOKEN_SORTS.map(type => ({
|
||||
icon: (
|
||||
<span>
|
||||
<CheckOutlined
|
||||
style={{
|
||||
opacity: mergedFilterTypes.includes(type) ? 1 : 0,
|
||||
marginInlineEnd: 8,
|
||||
fontSize: 12,
|
||||
}}
|
||||
/>
|
||||
{IconMap[type]}
|
||||
</span>
|
||||
),
|
||||
label: TextMap[type],
|
||||
key: type,
|
||||
onClick: () => {
|
||||
const newTypes = mergedFilterTypes.includes(type)
|
||||
? mergedFilterTypes.filter(item => type !== item)
|
||||
: [...mergedFilterTypes, type];
|
||||
setMergedFilterTypes(newTypes);
|
||||
onFilterTypesChange?.(newTypes);
|
||||
},
|
||||
})),
|
||||
]}
|
||||
/>
|
||||
}
|
||||
trigger={['click']}
|
||||
>
|
||||
<SearchDropdown
|
||||
style={{
|
||||
width: 32,
|
||||
cursor: 'pointer',
|
||||
fontSize: 18,
|
||||
paddingTop: 2,
|
||||
transition: 'color 0.3s',
|
||||
}}
|
||||
className={classNames({
|
||||
'previewer-token-type-dropdown-icon-active': mergedFilterTypes.length > 0,
|
||||
})}
|
||||
const handleAliasTokenChange = (theme: MutableTheme, tokenName: string, value: TokenValue) => {
|
||||
theme.onThemeChange?.(
|
||||
{
|
||||
...theme.config,
|
||||
token: {
|
||||
...theme.config.token,
|
||||
[tokenName]: value,
|
||||
},
|
||||
},
|
||||
['token', tokenName],
|
||||
);
|
||||
};
|
||||
|
||||
return () => {
|
||||
return wrapSSR(
|
||||
<div {...attrs} class={classNames('preview-panel-wrapper', hashId.value)}>
|
||||
<div class={classNames('preview-panel')}>
|
||||
<div style={{ padding: '16px' }}>
|
||||
<h3 class={classNames('preview-panel-space', hashId.value)}>
|
||||
<span>Alias Token 预览</span>
|
||||
<span class="preview-hide-token">
|
||||
<span>显示所有</span>
|
||||
<Switch
|
||||
checked={showAll.value}
|
||||
onChange={value => (showAll.value = value as any)}
|
||||
size="small"
|
||||
/>
|
||||
</Dropdown>
|
||||
</>
|
||||
}
|
||||
className="preview-panel-search"
|
||||
placeholder="搜索 Token / 色值 / 文本 / 圆角等"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={classNames('preview-panel-token-wrapper', {
|
||||
'preview-panel-token-wrapper-ping-top': showTokenListShadowTop,
|
||||
})}
|
||||
>
|
||||
<div ref={cardWrapperRef} style={{ height: '100%', overflow: 'auto', padding: '0 16px' }}>
|
||||
<div>
|
||||
{TOKEN_SORTS.filter(
|
||||
type =>
|
||||
type !== 'seed' &&
|
||||
(mergedFilterTypes.includes(type) || mergedFilterTypes.length === 0) &&
|
||||
(!search ||
|
||||
groupedToken[type].some(item =>
|
||||
item.toLowerCase().includes(search.toLowerCase()),
|
||||
)),
|
||||
).map(key => (
|
||||
<TokenCard
|
||||
title={TextMap[key]}
|
||||
icon={IconMap[key]}
|
||||
key={key}
|
||||
tokenPath={['token']}
|
||||
tokenArr={groupedToken[key]}
|
||||
keyword={search}
|
||||
hideUseless={!showAll}
|
||||
open={activeCards.includes(key)}
|
||||
onOpenChange={open =>
|
||||
setActiveCards(prev =>
|
||||
open ? [...prev, key] : prev.filter(item => item !== key),
|
||||
)
|
||||
}
|
||||
onTokenChange={handleAliasTokenChange}
|
||||
activeToken={activeToken}
|
||||
onActiveTokenChange={tokenName => setActiveToken(tokenName)}
|
||||
themes={themes}
|
||||
selectedTokens={selectedTokens}
|
||||
onTokenSelect={onTokenSelect}
|
||||
enableTokenSelect={enableTokenSelect}
|
||||
fallback={config => getDesignToken(config) as AliasToken}
|
||||
/>
|
||||
))}
|
||||
</span>
|
||||
</h3>
|
||||
<Input
|
||||
allowClear
|
||||
onChange={e => {
|
||||
search.value = e.target.value;
|
||||
}}
|
||||
bordered={false}
|
||||
addonBefore={
|
||||
<>
|
||||
<Dropdown
|
||||
v-slots={{
|
||||
overlay: () => (
|
||||
<Menu
|
||||
items={[
|
||||
{
|
||||
label: '筛选项',
|
||||
type: 'group',
|
||||
key: 'title-key',
|
||||
style: { fontSize: '12px' },
|
||||
},
|
||||
...TOKEN_SORTS.map(type => ({
|
||||
icon: (
|
||||
<span>
|
||||
<CheckOutlined
|
||||
style={{
|
||||
opacity: mergedFilterTypes.value.includes(type) ? 1 : 0,
|
||||
marginInlineEnd: '8px',
|
||||
fontSize: '12px',
|
||||
}}
|
||||
/>
|
||||
{IconMap[type]}
|
||||
</span>
|
||||
),
|
||||
label: TextMap[type],
|
||||
key: type,
|
||||
onClick: () => {
|
||||
const newTypes = mergedFilterTypes.value.includes(type)
|
||||
? mergedFilterTypes.value.filter(item => type !== item)
|
||||
: [...mergedFilterTypes.value, type];
|
||||
mergedFilterTypes.value = newTypes;
|
||||
props.onFilterTypesChange?.(newTypes);
|
||||
},
|
||||
})),
|
||||
]}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
trigger={['click']}
|
||||
>
|
||||
<SearchDropdown
|
||||
style={{
|
||||
width: '32px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '18px',
|
||||
paddingTop: '2px',
|
||||
transition: 'color 0.3s',
|
||||
}}
|
||||
class={classNames({
|
||||
'previewer-token-type-dropdown-icon-active':
|
||||
mergedFilterTypes.value.length > 0,
|
||||
})}
|
||||
/>
|
||||
</Dropdown>
|
||||
</>
|
||||
}
|
||||
class="preview-panel-search"
|
||||
placeholder="搜索 Token / 色值 / 文本 / 圆角等"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class={classNames('preview-panel-token-wrapper', {
|
||||
'preview-panel-token-wrapper-ping-top': showTokenListShadowTop.value,
|
||||
})}
|
||||
>
|
||||
<div
|
||||
ref={cardWrapperRef}
|
||||
style={{ height: '100%', overflow: 'auto', padding: '0 16px' }}
|
||||
>
|
||||
<div>
|
||||
{TOKEN_SORTS.filter(
|
||||
type =>
|
||||
type !== 'seed' &&
|
||||
(mergedFilterTypes.value.includes(type) ||
|
||||
mergedFilterTypes.value.length === 0) &&
|
||||
(!search.value ||
|
||||
groupedToken.value[type].some(item =>
|
||||
item.toLowerCase().includes(search.value.toLowerCase()),
|
||||
)),
|
||||
).map(key => (
|
||||
<TokenCard
|
||||
title={TextMap[key]}
|
||||
icon={IconMap[key]}
|
||||
key={key}
|
||||
tokenPath={['token']}
|
||||
tokenArr={groupedToken.value[key]}
|
||||
keyword={search.value}
|
||||
hideUseless={!showAll.value}
|
||||
open={activeCards.value.includes(key)}
|
||||
onOpenChange={open => {
|
||||
activeCards.value = open
|
||||
? [...activeCards.value, key]
|
||||
: activeCards.value.filter(item => item !== key);
|
||||
}}
|
||||
onTokenChange={handleAliasTokenChange}
|
||||
activeToken={activeToken.value}
|
||||
onActiveTokenChange={tokenName => (activeToken.value = tokenName)}
|
||||
themes={themes.value}
|
||||
selectedTokens={selectedTokens.value}
|
||||
onTokenSelect={props.onTokenSelect}
|
||||
enableTokenSelect={enableTokenSelect.value}
|
||||
fallback={config => getDesignToken(config) as AliasToken}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
);
|
||||
</div>,
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import type { PropType } from 'vue';
|
||||
import { defineComponent, toRefs, ref } from 'vue';
|
||||
import {
|
||||
AlignLeftOutlined,
|
||||
BgColorsOutlined,
|
||||
|
|
@ -12,13 +14,11 @@ import {
|
|||
HighlightOutlined,
|
||||
RadiusSettingOutlined,
|
||||
TabletOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { Collapse, Space } from 'antd';
|
||||
import type { ThemeConfig } from 'antd/es/config-provider/context';
|
||||
import classNames from 'classnames';
|
||||
import useMergedState from 'rc-util/es/hooks/useMergedState';
|
||||
import type { ReactNode } from 'react';
|
||||
import React from 'react';
|
||||
} from '@ant-design/icons-vue';
|
||||
import { Collapse, Space } from 'ant-design-vue';
|
||||
import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
|
||||
import classNames from 'ant-design-vue/es/_util/classNames';
|
||||
import PropTypes from 'ant-design-vue/es/_util/vue-types';
|
||||
import { Motion, ShapeLine } from '../../icons';
|
||||
import type { MutableTheme, TokenValue } from '../../interface';
|
||||
import type { TokenType } from '../../utils/classifyToken';
|
||||
|
|
@ -28,9 +28,9 @@ import TokenItem from '../token-item';
|
|||
|
||||
const { Panel } = Collapse;
|
||||
|
||||
interface TokenCardProps {
|
||||
export interface TokenCardProps {
|
||||
title: string;
|
||||
icon?: ReactNode;
|
||||
icon?: any;
|
||||
tokenArr: string[];
|
||||
tokenPath: string[];
|
||||
keyword?: string;
|
||||
|
|
@ -46,11 +46,11 @@ interface TokenCardProps {
|
|||
onTokenSelect?: (token: string) => void;
|
||||
enableTokenSelect?: boolean;
|
||||
hideUsageCount?: boolean;
|
||||
placeholder?: ReactNode;
|
||||
placeholder?: any;
|
||||
fallback?: (config: ThemeConfig) => Record<string, TokenValue>;
|
||||
}
|
||||
|
||||
export const IconMap: Record<TokenType, ReactNode> = {
|
||||
export const IconMap: Record<TokenType, any> = {
|
||||
seed: <BulbOutlined />,
|
||||
colorText: <FontColorsOutlined />,
|
||||
colorBg: <BgColorsOutlined />,
|
||||
|
|
@ -108,86 +108,120 @@ const useStyle = makeStyle('TokenCard', token => ({
|
|||
},
|
||||
}));
|
||||
|
||||
export default ({
|
||||
title,
|
||||
icon,
|
||||
tokenArr,
|
||||
keyword,
|
||||
hideUseless,
|
||||
defaultOpen,
|
||||
open: customOpen,
|
||||
onOpenChange,
|
||||
activeToken,
|
||||
onActiveTokenChange,
|
||||
onTokenChange,
|
||||
tokenPath,
|
||||
selectedTokens,
|
||||
themes,
|
||||
onTokenSelect,
|
||||
enableTokenSelect,
|
||||
hideUsageCount,
|
||||
fallback,
|
||||
placeholder,
|
||||
}: TokenCardProps) => {
|
||||
const [wrapSSR, hashId] = useStyle();
|
||||
const [open, setOpen] = useMergedState(false, {
|
||||
onChange: onOpenChange,
|
||||
defaultValue: defaultOpen,
|
||||
value: customOpen,
|
||||
});
|
||||
export default defineComponent({
|
||||
name: 'TokenCard',
|
||||
props: {
|
||||
title: { type: String as PropType<string> },
|
||||
icon: PropTypes.any,
|
||||
tokenArr: { type: Array as PropType<string[]> },
|
||||
tokenPath: { type: Array as PropType<string[]> },
|
||||
keyword: { type: String as PropType<string> },
|
||||
hideUseless: { type: Boolean },
|
||||
defaultOpen: { type: Boolean },
|
||||
open: { type: Boolean },
|
||||
activeToken: { type: String as PropType<string> },
|
||||
themes: { type: Array as PropType<MutableTheme[]> },
|
||||
selectedTokens: { type: Array as PropType<string[]> },
|
||||
enableTokenSelect: { type: Boolean },
|
||||
hideUsageCount: { type: Boolean },
|
||||
placeholder: PropTypes.any,
|
||||
onOpenChange: { type: Function as PropType<(open: boolean) => void> },
|
||||
onActiveTokenChange: { type: Function as PropType<(token: string | undefined) => void> },
|
||||
onTokenChange: {
|
||||
type: Function as PropType<
|
||||
(theme: MutableTheme, tokenName: string, value: TokenValue) => void
|
||||
>,
|
||||
},
|
||||
onTokenSelect: { type: Function as PropType<(token: string) => void> },
|
||||
fallback: { type: Function as PropType<(config: ThemeConfig) => Record<string, TokenValue>> },
|
||||
},
|
||||
setup(props, { attrs, slots }) {
|
||||
const {
|
||||
title,
|
||||
tokenArr,
|
||||
keyword,
|
||||
hideUseless,
|
||||
defaultOpen,
|
||||
activeToken,
|
||||
tokenPath,
|
||||
selectedTokens,
|
||||
themes,
|
||||
enableTokenSelect,
|
||||
hideUsageCount,
|
||||
} = toRefs(props);
|
||||
|
||||
return wrapSSR(
|
||||
<div className={classNames('token-card', hashId)}>
|
||||
<Collapse
|
||||
ghost
|
||||
expandIcon={({ isActive }) => (
|
||||
<CaretRightOutlined
|
||||
rotate={isActive ? 450 : 360}
|
||||
style={{ fontSize: 12, color: 'rgba(0,0,0,0.45)' }}
|
||||
/>
|
||||
)}
|
||||
expandIconPosition="right"
|
||||
className="token-card-collapse"
|
||||
activeKey={open ? '1' : undefined}
|
||||
onChange={keys => {
|
||||
// onOpenChange?.(keys.length > 0);
|
||||
setOpen(keys.length > 0);
|
||||
}}
|
||||
>
|
||||
<Panel
|
||||
header={
|
||||
<Space size="small">
|
||||
<span>{title}</span>
|
||||
<span>{icon}</span>
|
||||
</Space>
|
||||
}
|
||||
key="1"
|
||||
>
|
||||
{tokenArr
|
||||
.filter(
|
||||
tokenName =>
|
||||
(!keyword || tokenName.toLowerCase().includes(keyword.toLowerCase())) &&
|
||||
(!hideUseless || getRelatedComponents(tokenName).length > 0),
|
||||
)
|
||||
.map(tokenName => (
|
||||
<TokenItem
|
||||
tokenPath={tokenPath}
|
||||
onActiveChange={active => onActiveTokenChange?.(active ? tokenName : undefined)}
|
||||
active={activeToken === tokenName}
|
||||
tokenName={tokenName}
|
||||
key={tokenName}
|
||||
onTokenChange={onTokenChange}
|
||||
themes={themes}
|
||||
selectedTokens={selectedTokens}
|
||||
onTokenSelect={onTokenSelect}
|
||||
enableTokenSelect={enableTokenSelect}
|
||||
hideUsageCount={hideUsageCount}
|
||||
fallback={fallback}
|
||||
/>
|
||||
))}
|
||||
{tokenArr.length === 0 && placeholder}
|
||||
</Panel>
|
||||
</Collapse>
|
||||
</div>,
|
||||
);
|
||||
};
|
||||
const [wrapSSR, hashId] = useStyle();
|
||||
|
||||
const activeKeys = ref(!!defaultOpen.value ? ['1'] : []);
|
||||
|
||||
return () => {
|
||||
const icon = slots.icon ? slots.icon() : props.icon;
|
||||
|
||||
const placeholder = slots.placeholder ? slots.placeholder() : props.placeholder;
|
||||
|
||||
return wrapSSR(
|
||||
<div {...attrs} class={classNames('token-card', hashId.value)}>
|
||||
<Collapse
|
||||
ghost
|
||||
v-slots={{
|
||||
expandIcon: ({ isActive }) => (
|
||||
<CaretRightOutlined
|
||||
rotate={isActive ? 450 : 360}
|
||||
style={{ fontSize: '12px', color: 'rgba(0,0,0,0.45)' }}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
expandIconPosition="end"
|
||||
class="token-card-collapse"
|
||||
v-model={[activeKeys.value, 'activeKey']}
|
||||
onChange={() => {
|
||||
// onOpenChange?.(keys.length > 0);
|
||||
props.onOpenChange(activeKeys.value.length > 0);
|
||||
}}
|
||||
>
|
||||
<Panel
|
||||
v-slots={{
|
||||
header: () => (
|
||||
<Space size="small">
|
||||
<span>{title.value}</span>
|
||||
<span>{icon}</span>
|
||||
</Space>
|
||||
),
|
||||
}}
|
||||
key="1"
|
||||
>
|
||||
{tokenArr.value
|
||||
.filter(
|
||||
tokenName =>
|
||||
(!keyword.value ||
|
||||
tokenName.toLowerCase().includes(keyword.value.toLowerCase())) &&
|
||||
(!hideUseless.value || getRelatedComponents(tokenName).length > 0),
|
||||
)
|
||||
.map(tokenName => {
|
||||
return (
|
||||
<TokenItem
|
||||
tokenPath={tokenPath.value}
|
||||
onActiveChange={active =>
|
||||
props.onActiveTokenChange?.(active ? tokenName : undefined)
|
||||
}
|
||||
active={activeToken.value === tokenName}
|
||||
tokenName={tokenName}
|
||||
key={tokenName}
|
||||
onTokenChange={props.onTokenChange}
|
||||
themes={themes.value}
|
||||
selectedTokens={selectedTokens.value}
|
||||
onTokenSelect={props.onTokenSelect}
|
||||
enableTokenSelect={enableTokenSelect.value}
|
||||
hideUsageCount={hideUsageCount.value}
|
||||
fallback={props.fallback}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{tokenArr.value.length === 0 && placeholder}
|
||||
</Panel>
|
||||
</Collapse>
|
||||
</div>,
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { CaretRightOutlined } from '@ant-design/icons';
|
||||
import { Collapse, Space } from 'antd';
|
||||
import type { ThemeConfig } from 'antd/es/config-provider/context';
|
||||
import classNames from 'classnames';
|
||||
import type { CSSProperties } from 'react';
|
||||
import React, { useEffect, useMemo } from 'react';
|
||||
import { CaretRightOutlined } from '@ant-design/icons-vue';
|
||||
import { Collapse, Space } from 'ant-design-vue';
|
||||
import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
|
||||
import classNames from 'ant-design-vue/es/_util/classNames';
|
||||
import type { PropType, CSSProperties } from 'vue';
|
||||
import { defineComponent, toRefs, watch, computed, ref } from 'vue';
|
||||
import ColorPreview from '../../ColorPreview';
|
||||
import { Pick } from '../../icons';
|
||||
import type { MutableTheme, TokenValue } from '../../interface';
|
||||
|
|
@ -15,7 +15,7 @@ import { getRelatedComponents } from '../../utils/statistic';
|
|||
|
||||
const { Panel } = Collapse;
|
||||
|
||||
interface TokenItemProps {
|
||||
export interface TokenItemProps {
|
||||
tokenName: string;
|
||||
tokenPath: string[];
|
||||
active?: boolean;
|
||||
|
|
@ -29,53 +29,52 @@ interface TokenItemProps {
|
|||
fallback?: (config: ThemeConfig) => Record<string, TokenValue>;
|
||||
}
|
||||
|
||||
const AdditionInfo = ({
|
||||
info,
|
||||
visible,
|
||||
tokenName,
|
||||
style,
|
||||
dark,
|
||||
...rest
|
||||
}: {
|
||||
info: string | number;
|
||||
visible: boolean;
|
||||
tokenName: string;
|
||||
dark?: boolean;
|
||||
style?: CSSProperties;
|
||||
className?: string;
|
||||
}) => {
|
||||
if (typeof info === 'string' && isColor(info)) {
|
||||
return (
|
||||
<ColorPreview
|
||||
dark={dark}
|
||||
color={String(info)}
|
||||
style={{ display: visible ? 'block' : 'none', ...style }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
const AdditionInfo = defineComponent({
|
||||
name: 'AdditionInfo',
|
||||
props: {
|
||||
info: { type: [String, Number] },
|
||||
visible: { type: Boolean },
|
||||
tokenName: { type: String },
|
||||
dark: { type: Boolean },
|
||||
},
|
||||
setup(props, { attrs }) {
|
||||
const { info, visible, dark } = toRefs(props);
|
||||
|
||||
if (info.toString().length < 6 && String(info) !== '') {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
height: 20,
|
||||
overflow: 'hidden',
|
||||
backgroundColor: 'rgba(0,0,0,0.04)',
|
||||
borderRadius: '8px',
|
||||
display: visible ? 'block' : 'none',
|
||||
padding: '0 6px',
|
||||
lineHeight: '20px',
|
||||
...style,
|
||||
}}
|
||||
{...rest}
|
||||
>
|
||||
{info}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return () => {
|
||||
if (typeof info.value === 'string' && isColor(info.value)) {
|
||||
return (
|
||||
<ColorPreview
|
||||
dark={dark.value}
|
||||
color={String(info.value)}
|
||||
style={{ display: visible.value ? 'block' : 'none', ...(attrs.style as CSSProperties) }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
if (info.value.toString().length < 6 && String(info.value) !== '') {
|
||||
return (
|
||||
<div
|
||||
{...attrs}
|
||||
style={{
|
||||
height: '20px',
|
||||
overflow: 'hidden',
|
||||
backgroundColor: 'rgba(0,0,0,0.04)',
|
||||
borderRadius: '8px',
|
||||
display: visible.value ? 'block' : 'none',
|
||||
padding: '0 6px',
|
||||
lineHeight: '20px',
|
||||
...(attrs.style as CSSProperties),
|
||||
}}
|
||||
>
|
||||
{info.value}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const ShowUsageButton = ({
|
||||
selected,
|
||||
|
|
@ -85,17 +84,18 @@ const ShowUsageButton = ({
|
|||
toggleSelected: (v: boolean) => void;
|
||||
}) => {
|
||||
return (
|
||||
<Pick
|
||||
style={{
|
||||
color: selected ? '#1890ff' : undefined,
|
||||
cursor: 'pointer',
|
||||
fontSize: 16,
|
||||
transition: 'color 0.3s',
|
||||
marginInlineStart: 12,
|
||||
verticalAlign: 'middle',
|
||||
}}
|
||||
<span
|
||||
style={{ marginInlineStart: '12px', verticalAlign: 'middle', cursor: 'pointer' }}
|
||||
onClick={() => toggleSelected(!selected)}
|
||||
/>
|
||||
>
|
||||
<Pick
|
||||
style={{
|
||||
color: selected ? '#1890ff' : undefined,
|
||||
fontSize: '16px',
|
||||
transition: 'color 0.3s',
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -177,152 +177,178 @@ const useStyle = makeStyle('TokenItem', token => ({
|
|||
|
||||
export const getTokenItemId = (token: string) => `previewer-token-panel-item-${token}`;
|
||||
|
||||
export default ({
|
||||
tokenName,
|
||||
active,
|
||||
onActiveChange,
|
||||
onTokenChange,
|
||||
tokenPath,
|
||||
selectedTokens,
|
||||
themes,
|
||||
onTokenSelect,
|
||||
enableTokenSelect,
|
||||
hideUsageCount,
|
||||
fallback,
|
||||
}: TokenItemProps) => {
|
||||
const [infoVisible, setInfoVisible] = React.useState(false);
|
||||
const [wrapSSR, hashId] = useStyle();
|
||||
export default defineComponent({
|
||||
name: 'TokenItem',
|
||||
props: {
|
||||
tokenName: { type: String },
|
||||
tokenPath: { type: Array as PropType<string[]> },
|
||||
active: { type: Boolean },
|
||||
themes: { type: Array as PropType<MutableTheme[]> },
|
||||
selectedTokens: { type: Array as PropType<string[]> },
|
||||
enableTokenSelect: { type: Boolean },
|
||||
hideUsageCount: { type: Boolean },
|
||||
onActiveChange: { type: Function as PropType<(active: boolean) => void> },
|
||||
onTokenChange: {
|
||||
type: Function as PropType<
|
||||
(theme: MutableTheme, tokenName: string, value: TokenValue) => void
|
||||
>,
|
||||
},
|
||||
onTokenSelect: { type: Function as PropType<(token: string) => void> },
|
||||
fallback: { type: Function as PropType<(config: ThemeConfig) => Record<string, TokenValue>> },
|
||||
},
|
||||
setup(props, { attrs }) {
|
||||
const {
|
||||
tokenName,
|
||||
active,
|
||||
tokenPath,
|
||||
selectedTokens,
|
||||
themes,
|
||||
enableTokenSelect,
|
||||
hideUsageCount,
|
||||
} = toRefs(props);
|
||||
|
||||
useEffect(() => {
|
||||
if (active) {
|
||||
setInfoVisible(true);
|
||||
}
|
||||
}, [active]);
|
||||
const infoVisible = ref(false);
|
||||
const [wrapSSR, hashId] = useStyle();
|
||||
|
||||
const handleTokenChange = (theme: MutableTheme, value: TokenValue) => {
|
||||
onTokenChange?.(theme, tokenName, value);
|
||||
};
|
||||
watch(
|
||||
active,
|
||||
val => {
|
||||
if (val) {
|
||||
infoVisible.value = true;
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
const count = useMemo(() => getRelatedComponents(tokenName).length, [tokenName]);
|
||||
const handleTokenChange = (theme: MutableTheme, value: TokenValue) => {
|
||||
props.onTokenChange?.(theme, tokenName.value, value);
|
||||
};
|
||||
|
||||
return wrapSSR(
|
||||
<div onMouseEnter={() => onActiveChange?.(false)}>
|
||||
<Collapse
|
||||
collapsible="header"
|
||||
ghost
|
||||
onChange={key => setInfoVisible(key.length > 0)}
|
||||
className={classNames('previewer-token-item-collapse', hashId)}
|
||||
expandIcon={({ isActive }) => (
|
||||
<CaretRightOutlined
|
||||
rotate={isActive ? 90 : 0}
|
||||
style={{ fontSize: 12, cursor: 'pointer' }}
|
||||
/>
|
||||
)}
|
||||
activeKey={infoVisible ? tokenName : undefined}
|
||||
>
|
||||
<Panel
|
||||
key={tokenName}
|
||||
className="previewer-token-item"
|
||||
header={
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
}}
|
||||
id={getTokenItemId(tokenName)}
|
||||
const count = computed(() => getRelatedComponents(tokenName.value).length);
|
||||
|
||||
return () => {
|
||||
return wrapSSR(
|
||||
<div {...attrs} onMouseenter={() => props.onActiveChange?.(false)}>
|
||||
<Collapse
|
||||
collapsible="header"
|
||||
ghost
|
||||
onChange={key => (infoVisible.value = Array.isArray(key) ? key.length > 0 : !!key)}
|
||||
class={classNames('previewer-token-item-collapse', hashId.value)}
|
||||
expandIcon={({ isActive }) => (
|
||||
<CaretRightOutlined
|
||||
rotate={isActive ? 90 : 0}
|
||||
style={{ fontSize: '12px', cursor: 'pointer' }}
|
||||
/>
|
||||
)}
|
||||
activeKey={infoVisible.value ? tokenName.value : undefined}
|
||||
>
|
||||
<Panel
|
||||
key={tokenName.value}
|
||||
class="previewer-token-item"
|
||||
header={
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
}}
|
||||
id={getTokenItemId(tokenName.value)}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
flex: 1,
|
||||
width: 0,
|
||||
display: 'flex',
|
||||
overflow: 'hidden',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
title={tokenName.value}
|
||||
class={classNames('previewer-token-item-name', {
|
||||
'previewer-token-item-highlighted': active.value,
|
||||
})}
|
||||
style={{
|
||||
marginInlineEnd: '5px',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
}}
|
||||
>
|
||||
{tokenName.value}
|
||||
</span>
|
||||
{!hideUsageCount.value && (
|
||||
<span class="previewer-token-count">{count.value}</span>
|
||||
)}
|
||||
</span>
|
||||
{!infoVisible.value && (
|
||||
<div
|
||||
class="previewer-token-preview"
|
||||
style={{
|
||||
minWidth: themes.value.length * 20 + (themes.value.length - 1) * 4,
|
||||
}}
|
||||
>
|
||||
{themes.value.map(({ config, key }, index) => {
|
||||
return (
|
||||
<AdditionInfo
|
||||
key={key}
|
||||
dark={key === 'dark'}
|
||||
tokenName={tokenName.value}
|
||||
info={
|
||||
getValueByPath(config, [...tokenPath.value, tokenName.value]) ??
|
||||
props.fallback?.(config)[tokenName.value] ??
|
||||
''
|
||||
}
|
||||
visible={!infoVisible.value}
|
||||
style={{
|
||||
zIndex: 10 - index,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
extra={
|
||||
enableTokenSelect.value ? (
|
||||
<ShowUsageButton
|
||||
selected={!!selectedTokens.value?.includes(tokenName.value)}
|
||||
toggleSelected={() => {
|
||||
props.onTokenSelect?.(tokenName.value);
|
||||
}}
|
||||
/>
|
||||
) : undefined
|
||||
}
|
||||
>
|
||||
<span
|
||||
<Space
|
||||
direction="vertical"
|
||||
style={{
|
||||
flex: 1,
|
||||
width: 0,
|
||||
display: 'flex',
|
||||
overflow: 'hidden',
|
||||
alignItems: 'center',
|
||||
background: '#fafafa',
|
||||
borderRadius: '4px',
|
||||
padding: '8px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
title={tokenName}
|
||||
className={classNames('previewer-token-item-name', {
|
||||
'previewer-token-item-highlighted': active,
|
||||
})}
|
||||
style={{
|
||||
marginInlineEnd: '5px',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
}}
|
||||
>
|
||||
{tokenName}
|
||||
</span>
|
||||
{!hideUsageCount && <span className="previewer-token-count">{count}</span>}
|
||||
</span>
|
||||
{!infoVisible && (
|
||||
<div
|
||||
className="previewer-token-preview"
|
||||
style={{
|
||||
minWidth: themes.length * 20 + (themes.length - 1) * 4,
|
||||
}}
|
||||
>
|
||||
{themes.map(({ config, key }, index) => {
|
||||
return (
|
||||
<AdditionInfo
|
||||
key={key}
|
||||
dark={key === 'dark'}
|
||||
tokenName={tokenName}
|
||||
info={
|
||||
getValueByPath(config, [...tokenPath, tokenName]) ??
|
||||
fallback?.(config)[tokenName] ??
|
||||
''
|
||||
{themes.value.map(theme => {
|
||||
return (
|
||||
<div key={theme.key}>
|
||||
<TokenInput
|
||||
hideTheme={themes.value.length === 1}
|
||||
theme={theme}
|
||||
onChange={value => handleTokenChange(theme, value)}
|
||||
value={
|
||||
getValueByPath(theme.config, [...tokenPath.value, tokenName.value]) ??
|
||||
props.fallback?.(theme.config)[tokenName.value]
|
||||
}
|
||||
visible={!infoVisible}
|
||||
style={{
|
||||
zIndex: 10 - index,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
extra={
|
||||
enableTokenSelect ? (
|
||||
<ShowUsageButton
|
||||
selected={!!selectedTokens?.includes(tokenName)}
|
||||
toggleSelected={() => {
|
||||
onTokenSelect?.(tokenName);
|
||||
}}
|
||||
/>
|
||||
) : undefined
|
||||
}
|
||||
>
|
||||
<Space
|
||||
direction="vertical"
|
||||
style={{
|
||||
background: '#fafafa',
|
||||
borderRadius: 4,
|
||||
padding: 8,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{themes.map(theme => {
|
||||
return (
|
||||
<div key={theme.key}>
|
||||
<TokenInput
|
||||
hideTheme={themes.length === 1}
|
||||
theme={theme}
|
||||
onChange={value => handleTokenChange(theme, value)}
|
||||
value={
|
||||
getValueByPath(theme.config, [...tokenPath, tokenName]) ??
|
||||
fallback?.(theme.config)[tokenName]
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</Space>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
</div>,
|
||||
);
|
||||
};
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</Space>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
</div>,
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import type { PropType } from 'vue';
|
||||
import { defineComponent, toRefs, computed, ref } from 'vue';
|
||||
import { defineComponent, toRefs, ref, computed } from 'vue';
|
||||
|
||||
import { Hue } from './Hue';
|
||||
import { Saturation } from './Saturation';
|
||||
|
|
@ -10,7 +10,8 @@ import { useColorManipulation } from '../../hooks/useColorManipulation';
|
|||
import { useStyleSheet } from '../../hooks/useStyleSheet';
|
||||
import { formatClassName } from '../../utils/format';
|
||||
|
||||
export interface AlphaColorPicker<T extends AnyColor> extends Partial<ColorPickerBaseProps<T>> {
|
||||
export interface AlphaColorPickerProps<T extends AnyColor>
|
||||
extends Partial<ColorPickerBaseProps<T>> {
|
||||
colorModel: ColorModel<T>;
|
||||
}
|
||||
|
||||
|
|
@ -29,7 +30,11 @@ export const AlphaColorPicker = defineComponent({
|
|||
|
||||
const mergedColor = computed(() => color.value || colorModel.value.defaultColor);
|
||||
|
||||
const [hsva, updateHsva] = useColorManipulation(colorModel, mergedColor, props.onChange);
|
||||
const [hsva, updateHsva] = useColorManipulation<AnyColor>(
|
||||
colorModel,
|
||||
mergedColor,
|
||||
props.onChange,
|
||||
);
|
||||
|
||||
return () => {
|
||||
const nodeClassName = formatClassName(['vue-colorful', attrs.class]);
|
||||
|
|
|
|||
Loading…
Reference in New Issue