javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add mention component (#17586)

Browse Source 
* feat: add mention component

* fix: build error

* fix: build error

* feat: delete as a whole

* fix: update docs

* fix: update global.d.ts

* fix: update

* fix: update code

* fix: update code

* fix: update code

* fix: rename

* fix: update code

* fix: upload code

* fix: update code

* fix: fixed cursor position abnormality

* fix: update code

* fix: docs add avatar

* fix: tooltip position is wrong when placing on top

* feat: add overview icon

* fix: overview icon color
This commit is contained in:
赵添
2024-08-02 11:00:26 +08:00
committed by GitHub
parent 76ee10ab69
commit 0456c790db
91 changed files with 1737 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
packages/theme-chalk/src/common/var.scss
View File

@@ -851,6 +851,31 @@ $segmented: map.merge(
$segmented
);
// Mention
// css3 var in packages/theme-chalk/src/mention.scss
$mention: () !default;
$mention: map.merge(
(
'font-size': getCssVar('font-size-base'),
'bg-color': getCssVar('bg-color', 'overlay'),
'shadow': getCssVar('box-shadow-light'),
'border': 1px solid getCssVar('border-color-light'),
'option-color': getCssVar('text-color-regular'),
'option-height': 34px,
'option-min-width': 100px,
'option-hover-background': getCssVar('fill-color', 'light'),
'option-selected-color': getCssVar('color-primary'),
'option-disabled-color': getCssVar('text-color-placeholder'),
'option-loading-color': getCssVar('text-color-secondary'),
'option-loading-padding': 10px 0,
'max-height': 174px,
'padding': 6px 0,
'header-padding': 10px,
'footer-padding': 10px,
),
$mention
);
// Table
// css3 var in packages/theme-chalk/src/table.scss
$table: () !default;

1
packages/theme-chalk/src/index.scss
View File

@@ -107,3 +107,4 @@
@use './anchor.scss';
@use './anchor-link.scss';
@use './segmented.scss';
@use './mention.scss';

90
packages/theme-chalk/src/mention.scss Normal file
View File

@@ -0,0 +1,90 @@
@use 'sass:map';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@include b(mention) {
position: relative;
width: 100%;
@include e(popper) {
@include picker-popper(
map.get($mention, 'bg-color'),
map.get($mention, 'border'),
map.get($mention, 'shadow')
);
}
}
@include b(mention-dropdown) {
@include set-component-css-var('mention', $mention);
@include e(item) {
font-size: getCssVar('mention-font-size');
padding: 0 20px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: getCssVar('mention-option-color');
height: getCssVar('mention-option-height');
line-height: getCssVar('mention-option-height');
box-sizing: border-box;
min-width: getCssVar('mention-option-min-width');
cursor: pointer;
@include when(hovering) {
background-color: getCssVar('mention-option-hover-background');
}
@include when(selected) {
color: getCssVar('mention-option-selected-color');
font-weight: bold;
}
@include when(disabled) {
color: getCssVar('mention-option-disabled-color');
cursor: not-allowed;
background-color: unset;
}
}
}
@include b(mention-dropdown) {
z-index: calc(#{getCssVar('index-top')} + 1);
border-radius: getCssVar('border-radius-base');
box-sizing: border-box;
}
@include b(mention-dropdown__loading) {
padding: 10px 0;
margin: 0;
text-align: center;
color: getCssVar('mention-option-loading-color');
font-size: 12px;
min-width: getCssVar('mention-option-min-width');
}
@include b(mention-dropdown__wrap) {
max-height: getCssVar('mention-max-height');
}
@include b(mention-dropdown__list) {
list-style: none;
padding: getCssVar('mention-padding');
margin: 0;
box-sizing: border-box;
}
@include b(mention-dropdown__header) {
padding: getCssVar('mention-header-padding');
border-bottom: getCssVar('mention-border');
}
@include b(mention-dropdown__footer) {
padding: getCssVar('mention-footer-padding');
border-top: getCssVar('mention-border');
}