Skip to content

Commit

Permalink
feat: improve tippy demo (#5357)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mynetfan
mynetfan authored Jan 11, 2025
1 parent a263731 commit cb9c8db
Show file tree
Hide file tree
Showing 3 changed files with 168 additions and 90 deletions.
27 changes: 14 additions & 13 deletions packages/effects/common-ui/src/components/tippy/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,25 +10,26 @@ import { usePreferences } from '@vben-core/preferences';
import useTippyDirective from './directive';

import 'tippy.js/dist/tippy.css';
import 'tippy.js/dist/backdrop.css';
import 'tippy.js/themes/light.css';
import 'tippy.js/animations/scale.css';
import 'tippy.js/animations/scale-subtle.css';
import 'tippy.js/animations/scale-extreme.css';
import 'tippy.js/animations/shift-toward.css';
import 'tippy.js/animations/shift-away.css';
import 'tippy.js/animations/perspective.css';

const { isDark } = usePreferences();
export type TippyProps = Props & {
animation?:
| 'fade'
| 'perspective'
| 'scale'
| 'scale-extreme'
| 'scale-subtle'
| 'shift-away'
| boolean;
theme?: 'auto' | 'dark' | 'light';
};
export type TippyProps = Partial<
Props & {
animation?:
| 'fade'
| 'perspective'
| 'scale'
| 'shift-away'
| 'shift-toward'
| boolean;
theme?: 'auto' | 'dark' | 'light';
}
>;

export function initTippy(app: App<Element>, options?: DefaultProps) {
setDefaultProps({
Expand Down
2 changes: 1 addition & 1 deletion playground/src/router/routes/modules/examples.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,7 @@ const routes: RouteRecordRaw[] = [
path: '/examples/tippy',
component: () => import('#/views/examples/tippy/index.vue'),
meta: {
icon: 'material-symbols:chat-bubble',
icon: 'mdi:message-settings-outline',
title: 'Tippy',
},
},
Expand Down
229 changes: 153 additions & 76 deletions playground/src/views/examples/tippy/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,160 +1,237 @@
<script lang="ts" setup>
import { computed, reactive } from 'vue';
import type { TippyProps } from '@vben/common-ui';
import { reactive } from 'vue';
import { Page, Tippy } from '@vben/common-ui';
import { Button, Card, Flex } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
const props = reactive({
const tippyProps = reactive<TippyProps>({
animation: 'shift-away',
arrow: true,
content: '这是一个提示',
delay: 200,
delay: [200, 200],
duration: 200,
followCursor: '',
hideOnClick: '',
followCursor: false,
hideOnClick: false,
inertia: true,
maxWidth: 'none',
placement: 'top',
theme: 'dark',
trigger: 'mouseenter focusin',
});
const tippyProps = computed(() => {
return {
...props,
followCursor: ['', 'true'].includes(props.followCursor)
? !!props.followCursor
: props.followCursor,
hideOnClick: ['', 'true'].includes(props.hideOnClick)
? !!props.hideOnClick
: props.hideOnClick,
};
});
function parseBoolean(value: string) {
switch (value) {
case 'false': {
return false;
}
case 'true': {
return true;
}
default: {
return value;
}
}
}
const [Form] = useVbenForm({
handleValuesChange(values) {
Object.assign(props, { ...values });
Object.assign(tippyProps, {
...values,
delay: [values.delay1, values.delay2],
followCursor: parseBoolean(values.followCursor),
hideOnClick: parseBoolean(values.hideOnClick),
trigger: values.trigger.join(' '),
});
},
schema: [
{
component: 'RadioGroup',
componentProps: {
buttonStyle: 'solid',
class: 'w-full',
options: [
{ label: '自动', value: 'auto' },
{ label: '暗色', value: 'dark' },
{ label: '亮色', value: 'light' },
],
optionType: 'button',
},
defaultValue: tippyProps.theme,
fieldName: 'theme',
label: '主题',
},
{
component: 'Select',
componentProps: {
class: 'w-full',
options: [
{ label: 'shift-away', value: 'shift-away' },
{ label: 'scale', value: 'scale' },
{ label: 'scale-extreme', value: 'scale-extreme' },
{ label: 'scale-subtle', value: 'scale-subtle' },
{ label: 'perspective', value: 'perspective' },
{ label: 'fade', value: 'fade' },
{ label: '向上滑入', value: 'shift-away' },
{ label: '向下滑入', value: 'shift-toward' },
{ label: '缩放', value: 'scale' },
{ label: '透视', value: 'perspective' },
{ label: '淡入', value: 'fade' },
],
},
defaultValue: props.animation,
defaultValue: tippyProps.animation,
fieldName: 'animation',
label: '动画',
label: '动画类型',
},
{
component: 'RadioGroup',
componentProps: {
buttonStyle: 'solid',
options: [
{ label: '是', value: true },
{ label: '否', value: false },
],
optionType: 'button',
},
defaultValue: tippyProps.inertia,
fieldName: 'inertia',
label: '动画惯性',
},
{
component: 'Select',
componentProps: {
class: 'w-full',
options: [
{ label: '顶部', value: 'top' },
{ label: '顶左', value: 'top-start' },
{ label: '顶右', value: 'top-end' },
{ label: '底部', value: 'bottom' },
{ label: '底左', value: 'bottom-start' },
{ label: '底右', value: 'bottom-end' },
{ label: '左侧', value: 'left' },
{ label: '左上', value: 'left-start' },
{ label: '左下', value: 'left-end' },
{ label: '右侧', value: 'right' },
{ label: '右上', value: 'right-start' },
{ label: '右下', value: 'right-end' },
],
},
defaultValue: tippyProps.placement,
fieldName: 'placement',
label: '位置',
},
{
component: 'InputNumber',
defaultValue: props.duration,
componentProps: {
addonAfter: '毫秒',
},
defaultValue: tippyProps.duration,
fieldName: 'duration',
label: '动画时长',
},
{
component: 'InputNumber',
componentProps: {
addonAfter: '毫秒',
},
defaultValue: 100,
fieldName: 'delay1',
label: '显示延时',
},
{
component: 'InputNumber',
componentProps: {
addonAfter: '毫秒',
},
defaultValue: 100,
fieldName: 'delay2',
label: '隐藏延时',
},
{
component: 'Input',
defaultValue: props.content,
defaultValue: tippyProps.content,
fieldName: 'content',
label: '内容',
},
{
component: 'Switch',
defaultValue: props.arrow,
component: 'RadioGroup',
componentProps: {
buttonStyle: 'solid',
options: [
{ label: '是', value: true },
{ label: '否', value: false },
],
optionType: 'button',
},
defaultValue: tippyProps.arrow,
fieldName: 'arrow',
label: '箭头',
label: '指示箭头',
},
{
component: 'Select',
componentProps: {
class: 'w-full',
options: [
{ label: '不跟随', value: '' },
{ label: '不跟随', value: 'false' },
{ label: '完全跟随', value: 'true' },
{ label: '仅横向', value: 'horizontal' },
{ label: '仅纵向', value: 'vertical' },
{ label: '仅初始', value: 'initial' },
],
},
defaultValue: props.followCursor,
defaultValue: tippyProps.followCursor?.toString(),
fieldName: 'followCursor',
label: '跟随指针',
},
{
component: 'Select',
componentProps: {
class: 'w-full',
mode: 'multiple',
options: [
{ label: '否', value: '' },
{ label: '是', value: 'true' },
{ label: '仅内部点击', value: 'toggle' },
{ label: '鼠标移入', value: 'mouseenter' },
{ label: '被点击', value: 'click' },
{ label: '获得焦点', value: 'focusin' },
{ label: '无触发，仅手动', value: 'manual' },
],
},
defaultValue: props.hideOnClick,
fieldName: 'hideOnClick',
label: '点击后隐藏',
},
{
component: 'InputNumber',
defaultValue: 100,
fieldName: 'delay',
label: '延时',
defaultValue: tippyProps.trigger?.split(' '),
fieldName: 'trigger',
label: '触发方式',
},
{
component: 'RadioGroup',
component: 'Select',
componentProps: {
class: 'w-full',
options: [
{ label: 'auto', value: 'auto' },
{ label: 'dark', value: 'dark' },
{ label: 'light', value: 'light' },
{ label: '否', value: 'false' },
{ label: '是', value: 'true' },
{ label: '仅内部', value: 'toggle' },
],
},
defaultValue: props.theme,
fieldName: 'theme',
label: '主题',
defaultValue: tippyProps.hideOnClick?.toString(),
dependencies: {
componentProps(_, formAction) {
return {
disabled: !formAction.values.trigger.includes('click'),
};
},
triggerFields: ['trigger'],
},
fieldName: 'hideOnClick',
help: '只有在触发方式为`click`时才有效',
label: '点击后隐藏',
},
{
component: 'Input',
componentProps: {
allowClear: true,
placeholder: 'none、200px',
},
defaultValue: props.maxWidth,
defaultValue: tippyProps.maxWidth,
fieldName: 'maxWidth',
label: '最大宽度',
},
{
component: 'Select',
componentProps: {
class: 'w-full',
options: [
{ label: '顶部', value: 'top' },
{ label: '顶左', value: 'top-start' },
{ label: '顶右', value: 'top-end' },
{ label: '底部', value: 'bottom' },
{ label: '底左', value: 'bottom-start' },
{ label: '底右', value: 'bottom-end' },
{ label: '左侧', value: 'left' },
{ label: '左上', value: 'left-start' },
{ label: '左下', value: 'left-end' },
{ label: '右侧', value: 'right' },
{ label: '右上', value: 'right-start' },
{ label: '右下', value: 'right-end' },
],
},
defaultValue: 'top',
fieldName: 'placement',
label: '位置',
},
],
showDefaultActions: false,
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
});
Expand Down

0 comments on commit cb9c8db

Please sign in to comment.