opentiny
/
tiny-vue
2
0
Fork 24
Code Issues Pull Requests 3 Packages Projects Releases Wiki Activity

feat(popconfirm): [popconfirm] Adapting to the SMB theme (#2168)

This commit is contained in:
东风使命必达 2024-09-24 04:30:37 -07:00 committed by GitHub
parent 3b78e2fbc4
commit 4c16cf879d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 27 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
examples/sites/demos/pc/app/popconfirm/type-composition-api.vue
View File

@ -1,42 +1,44 @@
<template>
<div>
<tiny-popconfirm :title="title" type="info">
<tiny-popconfirm :title="title" type="info" :message="message">
<template #reference>
<tiny-button>info</tiny-button>
</template>
</tiny-popconfirm>
<tiny-popconfirm :title="title" type="error">
<tiny-popconfirm :title="title" type="error" :message="message">
<template #reference>
<tiny-button>error</tiny-button>
</template>
</tiny-popconfirm>
<tiny-popconfirm :title="title" type="warning">
<tiny-popconfirm :title="title" type="warning" :message="message">
<template #reference>
<tiny-button>warning</tiny-button>
</template>
</tiny-popconfirm>
<tiny-popconfirm :title="title" type="success">
<tiny-popconfirm :title="title" type="success" :message="message">
<template #reference>
<tiny-button>success</tiny-button>
</template>
</tiny-popconfirm>
<tiny-popconfirm :title="title" :type="TinyIconDel">
<tiny-popconfirm :title="title" :type="TinyIconDel" :message="message">
<template #reference>
<tiny-button>自定义</tiny-button>
</template>
</tiny-popconfirm>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { Popconfirm as TinyPopconfirm, Button as TinyButton } from '@opentiny/vue'
import { iconDel } from '@opentiny/vue-icon'
const title = ref('确定要删除该安全组规则吗?')
const title = ref('提示标题')
const message = ref('安全组规则是推荐的，确定要删除该安全组规则吗?')
const TinyIconDel = iconDel()
</script>

13
examples/sites/demos/pc/app/popconfirm/type.vue
View File

@ -1,30 +1,30 @@
<template>
<div>
<tiny-popconfirm :title="title" type="info">
<tiny-popconfirm :title="title" type="info" :message="message">
<template #reference>
<tiny-button>info</tiny-button>
</template>
</tiny-popconfirm>
<tiny-popconfirm :title="title" type="error">
<tiny-popconfirm :title="title" type="error" :message="message">
<template #reference>
<tiny-button>error</tiny-button>
</template>
</tiny-popconfirm>
<tiny-popconfirm :title="title" type="warning">
<tiny-popconfirm :title="title" type="warning" :message="message">
<template #reference>
<tiny-button>warning</tiny-button>
</template>
</tiny-popconfirm>
<tiny-popconfirm :title="title" type="success">
<tiny-popconfirm :title="title" type="success" :message="message">
<template #reference>
<tiny-button>success</tiny-button>
</template>
</tiny-popconfirm>
<tiny-popconfirm :title="title" :type="TinyIconDel">
<tiny-popconfirm :title="title" :type="TinyIconDel" :message="message">
<template #reference>
<tiny-button>自定义</tiny-button>
</template>
@ -43,7 +43,8 @@ export default {
},
data() {
return {
title: '确定要删除该安全组规则吗?',
title: '提示标题',
message: '安全组规则是推荐的，确定要删除该安全组规则吗?',
TinyIconDel: iconDel()
}
}

9
packages/theme/src/popconfirm/index.less
View File

@ -41,12 +41,8 @@
&__header {
display: flex;
align-items: center;
line-height: var(--ti-popconfirm-popover-line-height);
margin-bottom: var(--ti-popconfirm-popover-margin-bottom);
}
.no-message {
font-weight: 400;
}
&__icon {
height: var(--ti-popconfirm-popover-icon-width);
@ -56,14 +52,14 @@
}
&__title {
flex: 1 1 auto;
font-size: var(--ti-popconfirm-popover-title-font-size);
font-weight: var(--ti-popconfirm-popover-title-font-weight);
line-height: var(--ti-popconfirm-popover-title-line-height);
}
&__content {
color: var(--ti-popconfirm-popover-text-color);
line-height: var(--ti-popconfirm-popover-line-height);
line-height: var(--ti-popconfirm-popover-content-line-height);
}
&__footer {
@ -73,6 +69,7 @@
}
&__confirm-button {
margin-left: 8px;
width: 72px;
}

12
packages/theme/src/popconfirm/vars.less
View File

@ -11,8 +11,10 @@
*/
.component-css-vars-popconfirm() {
// 提示弹窗字体行高
--ti-popconfirm-popover-line-height: 1.5;
// 提示弹窗title字体行高
--ti-popconfirm-popover-title-line-height:var(--ti-common-line-height-2);
// 提示弹窗content字体行高
--ti-popconfirm-popover-content-line-height: var(--ti-common-line-height-1);
// 底部按钮flex排列方式
--ti-popconfirm-popover-footer-justify-content: right;
// 提示弹窗字体大小
@ -20,9 +22,9 @@
// 提示弹窗字体颜色
--ti-popconfirm-popover-footer-font-color: #191919;
// 提示弹窗容器垂直内边距
--ti-popconfirm-popover-container-padding-vertical: unset;
--ti-popconfirm-popover-container-padding-vertical: var(--ti-common-space-base);
// 提示弹窗图标大小
--ti-popconfirm-popover-icon-width: var(--ti-common-size-4x);
--ti-popconfirm-popover-icon-width: var(--ti-common-size-5x);
--ti-popconfirm-popover-icon-margin-bottom: 2px;
// 提示弹窗图标上侧外边距
--ti-popconfirm-popover-icon-margin-right: var(--ti-common-space-base);
@ -32,4 +34,6 @@
--ti-popconfirm-popover-title-font-size: var(--ti-common-font-size-2);
--ti-popconfirm-popover-title-font-weight: var(--ti-common-font-weight-bold);
--ti-popconfirm-popover-text-color: #191919;
// 标题距离内容下边距
--ti-popconfirm-popover-margin-bottom: var(--ti-common-space-2x);
}

2
packages/vue/src/popconfirm/src/pc.vue
View File

@ -22,7 +22,7 @@
:class="['tiny-popconfirm-popover__icon', type ? `tiny-popconfirm-popover--${type}` : '']"
>
</component>
<div class="tiny-popconfirm-popover__title" :class="[message ? '' : 'no-message']">
<div class="tiny-popconfirm-popover__title">
{{ title }}
</div>
</div>