Skip to content

Tooltip added overlayInnerStyle attribute #6292

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Feb 21, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions components/affix/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -127,23 +127,23 @@ const Affix = defineComponent({
newState.affixStyle = {
position: 'fixed',
top: fixedTop,
width: placeholderReact.width + 'px',
height: placeholderReact.height + 'px',
width: placeholderRect.width + 'px',
height: placeholderRect.height + 'px',
};
newState.placeholderStyle = {
width: placeholderReact.width + 'px',
height: placeholderReact.height + 'px',
width: placeholderRect.width + 'px',
height: placeholderRect.height + 'px',
};
} else if (fixedBottom !== undefined) {
newState.affixStyle = {
position: 'fixed',
bottom: fixedBottom,
width: placeholderReact.width + 'px',
height: placeholderReact.height + 'px',
width: placeholderRect.width + 'px',
height: placeholderRect.height + 'px',
};
newState.placeholderStyle = {
width: placeholderReact.width + 'px',
height: placeholderReact.height + 'px',
width: placeholderRect.width + 'px',
height: placeholderRect.height + 'px',
};
}

Expand Down Expand Up @@ -179,9 +179,9 @@ const Affix = defineComponent({
const targetNode = target();
if (targetNode && placeholderNode.value) {
const targetRect = getTargetRect(targetNode);
const placeholderReact = getTargetRect(placeholderNode.value as HTMLElement);
const fixedTop = getFixedTop(placeholderReact, targetRect, offsetTop.value);
const fixedBottom = getFixedBottom(placeholderReact, targetRect, offsetBottom.value);
const placeholderRect = getTargetRect(placeholderNode.value as HTMLElement);
const fixedTop = getFixedTop(placeholderRect, targetRect, offsetTop.value);
const fixedBottom = getFixedBottom(placeholderRect, targetRect, offsetBottom.value);
if (
(fixedTop !== undefined && affixStyle.top === fixedTop) ||
(fixedBottom !== undefined && affixStyle.bottom === fixedBottom)
Expand Down
8 changes: 4 additions & 4 deletions components/affix/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,19 @@ export function getTargetRect(target: BindElement): DOMRect {
: ({ top: 0, bottom: window.innerHeight } as DOMRect);
}

export function getFixedTop(placeholderReact: DOMRect, targetRect: DOMRect, offsetTop: number) {
if (offsetTop !== undefined && targetRect.top > placeholderReact.top - offsetTop) {
export function getFixedTop(placeholderRect: DOMRect, targetRect: DOMRect, offsetTop: number) {
if (offsetTop !== undefined && targetRect.top > placeholderRect.top - offsetTop) {
return `${offsetTop + targetRect.top}px`;
}
return undefined;
}

export function getFixedBottom(
placeholderReact: DOMRect,
placeholderRect: DOMRect,
targetRect: DOMRect,
offsetBottom: number,
) {
if (offsetBottom !== undefined && targetRect.bottom < placeholderReact.bottom + offsetBottom) {
if (offsetBottom !== undefined && targetRect.bottom < placeholderRect.bottom + offsetBottom) {
const targetBottomOffset = window.innerHeight - targetRect.bottom;
return `${offsetBottom + targetBottomOffset}px`;
}
Expand Down
2 changes: 1 addition & 1 deletion components/button/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ Different button styles can be generated by setting Button properties. The recom
| htmlType | set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | |
| icon | set the icon of button, see: Icon component | v-slot | - | |
| loading | set the loading status of button | boolean \| { delay: number } | `false` | |
| shape | Can be set button shape | `default` \| `circle` \| `round` | 'default' | |
| shape | Can be set button shape | `default` \| `circle` \| `round` | `default` | |
| size | set the size of button | `large` \| `middle` \| `small` | `middle` | |
| target | same as target attribute of a, works when href is specified | string | - | |
| type | can be set button type | `primary` \| `ghost` \| `dashed` \| `link` \| `text` \| `default` | `default` | |
Expand Down
2 changes: 1 addition & 1 deletion components/button/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
| htmlType | 设置 `button` 原生的 `type` 值,可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | |
| icon | 设置按钮的图标类型 | v-slot | - | |
| loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` | |
| shape | 设置按钮形状 | `default` \| `circle` \| `round` | 'default' | |
| shape | 设置按钮形状 | `default` \| `circle` \| `round` | `default` | |
| size | 设置按钮大小 | `large` \| `middle` \| `small` | `middle` | |
| target | 相当于 a 链接的 target 属性,href 存在时生效 | string | - | |
| type | 设置按钮类型 | `primary` \| `ghost` \| `dashed` \| `link` \| `text` \| `default` | `default` | |
Expand Down
2 changes: 1 addition & 1 deletion components/input/demo/textarea.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ For multi-line input.
<a-textarea v-model:value="value" placeholder="Basic usage" :rows="4" />
<br />
<br />
<a-textarea :rows="4" placeholder="maxLength is 6" :maxlength="6" />
<a-textarea :rows="4" placeholder="maxlength is 6" :maxlength="6" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
Expand Down
2 changes: 1 addition & 1 deletion components/select/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ Select component to select value from options.
| maxTagTextLength | Max text length to show | number | - | |
| menuItemSelectedIcon | The custom menuItemSelected icon | VNode \| slot | - | |
| mode | Set mode of Select | 'multiple' \| 'tags' | - | |
| notFoundContent | Specify content to show when no result matches.. | string\|slot | 'Not Found' | |
| notFoundContent | Specify content to show when no result matches.. | string\|slot | `Not Found` | |
| open | Controlled open state of dropdown | boolean | - | |
| option | custom render option by slot | v-slot:option="{value, label, [disabled, key, title]}" | - | 2.2.5 |
| optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | value | |
Expand Down
4 changes: 2 additions & 2 deletions components/select/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,15 +42,15 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*zo76T7KQx2UAAAAAAA
| filterOption | 是否根据输入项进行筛选。当其为一个函数时,会接收 `inputValue` `option` 两个参数,当 `option` 符合筛选条件时,应返回 `true`,反之则返回 `false`。 | `boolean` \| `function(inputValue, option)` | true | |
| filterSort | 搜索时对筛选结果项的排序函数, 类似[Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)里的 compareFunction | (optionA: Option, optionB: Option) => number | - | 3.0 |
| firstActiveValue | 默认高亮的选项 | string\|string\[] | - | |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。 | Function(triggerNode) | () => document.body | |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。 | function(triggerNode) | () => document.body | |
| labelInValue | 是否把每个选项的 label 包装到 value 中,会把 Select 的 value 类型从 `string` 变为 `{key: string, label: vNodes, originLabel: any}` 的格式, originLabel(3.1) 保持原始类型,如果通过 a-select-option children 构造的节点,该值是是个函数(即 a-select-option 的默认插槽) | boolean | false | |
| listHeight | 设置弹窗滚动高度 | number | 256 | |
| maxTagCount | 最多显示多少个 tag | number | - | |
| maxTagPlaceholder | 隐藏 tag 时显示的内容 | slot \| function(omittedValues) | - | |
| maxTagTextLength | 最大显示的 tag 文本长度 | number | - | |
| menuItemSelectedIcon | 自定义当前选中的条目图标 | VNode \| slot | - | |
| mode | 设置 Select 的模式为多选或标签 | 'multiple' \| 'tags' \| 'combobox' | - | |
| notFoundContent | 当下拉列表为空时显示的内容 | string\|slot | 'Not Found' | |
| notFoundContent | 当下拉列表为空时显示的内容 | string\|slot | `Not Found` | |
| open | 是否展开下拉菜单 | boolean | - | |
| option | 通过 option 插槽,自定义节点 | v-slot:option="{value, label, [disabled, key, title]}" | - | 2.2.5 |
| optionFilterProp | 搜索时过滤对应的 option 属性,不支持 children | string | value | |
Expand Down
4 changes: 2 additions & 2 deletions components/tooltip/Tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,7 @@ export default defineComponent({
computed(() => !injectFromPopover.value),
);
return () => {
const { openClassName, overlayClassName } = props;
const { openClassName, overlayClassName, overlayInnerStyle } = props;
let children = filterEmpty(slots.default?.()) ?? null;
children = children.length === 1 ? children[0] : children;

Expand Down Expand Up @@ -268,8 +268,8 @@ export default defineComponent({
hashId.value,
);
const formattedOverlayInnerStyle = {
...props.overlayInnerStyle,
...colorInfo.value.overlayStyle,
...overlayInnerStyle,
};
const arrowContentStyle = colorInfo.value.arrowStyle;
const vcTooltipProps = {
Expand Down
1 change: 1 addition & 0 deletions components/tooltip/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ The following APIs are shared by Tooltip, Popconfirm, Popover.
| mouseLeaveDelay | Delay in seconds, before tooltip is hidden on mouse leave | number | 0.1 | |
| overlayClassName | Class name of the tooltip card | string | - | |
| overlayStyle | Style of the tooltip card | object | - | |
| overlayInnerStyle | Style of the tooltip inner content | object | - | 4.0.0 |
| placement | The position of the tooltip relative to the target, which can be one of `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` | |
| trigger | Tooltip trigger mode | `hover` \| `focus` \| `click` \| `contextmenu` | `hover` | |
| open(v-model) | Whether the floating tooltip card is open or not, Use `visible` under 4.0.0 | boolean | `false` | 4.0.0 |
Expand Down
1 change: 1 addition & 0 deletions components/tooltip/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Vyyeu8jq2/Tooltp.svg
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip,单位:秒 | number | 0.1 | |
| overlayClassName | 卡片类名 | string | 无 | |
| overlayStyle | 卡片样式 | object | 无 | |
| overlayInnerStyle | 卡片内容区域样式 | object | 无 | 4.0 |
| placement | 气泡框位置,可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | top | |
| trigger | 触发行为,可选 `hover/focus/click/contextmenu` | string | hover | |
| open(v-model) | 用于手动控制浮层显隐, 小于 4.0.0 使用 `visible` | boolean | false | 4.0 |
Expand Down
14 changes: 7 additions & 7 deletions components/upload/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
| accept | File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | - | | |
| action | Uploading URL | string\|(file) => `Promise` | - | | |
| beforeUpload | Hook function which will be executed before uploading. Uploading will be stopped with `false` or a rejected Promise returned. | (file, fileList) => `boolean` \| `Promise` | - | |
| customRequest | override for the default xhr behavior allowing for additional customization and ability to implement your own XMLHttpRequest | Function | - | | |
| customRequest | override for the default xhr behavior allowing for additional customization and ability to implement your own XMLHttpRequest | function | - | | |
| data | Uploading params or function which can return uploading params. | object\|function(file) | - | | |
| directory | support upload whole directory ([caniuse](https://caniuse.com/#feat=input-file-directory)) | boolean | false | | |
| directory | Support upload whole directory([caniuse](https://caniuse.com/#feat=input-file-directory)) | boolean | false | 3.0 | |
Expand All @@ -32,7 +32,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
| headers | Set request headers, valid above IE10. | object | - | | |
| iconRender | Custom show icon | v-slot:iconRender="{file: UploadFile, listType?: UploadListType}" | - | 3.0 | |
| isImageUrl | Customize if render &lt;img /> in thumbnail | (file: UploadFile) => boolean | - | 3.0 | |
| itemRender | Custom item of uploadList | v-slot:itemRender="{originNode: ReactElement, file: UploadFile, fileList: object\[], actions: { download: function, preview: function, remove: function }" | - | 3.0 | |
| itemRender | Custom item of uploadList | v-slot:itemRender="{originNode: VNode, file: UploadFile, fileList: object\[], actions: { download: function, preview: function, remove: function }" | - | 3.0 | |
| listType | Built-in stylesheets, support for three types: `text`, `picture` or `picture-card` | string | `text` | | |
| maxCount | Limit the number of uploaded files. Will replace current one when `maxCount` is `1` | number | - | 3.0 | |
| method | http method of upload request | string | `post` | 1.5.0 | |
Expand All @@ -43,19 +43,19 @@ Uploading is the process of publishing information (web pages, text, pictures, v
| previewIcon | custom preview icon | v-slot:iconRender="{file: UploadFile}" | - | 3.0 | |
| progress | Custom progress bar | [ProgressProps](/components/progress/#API) (support `type="line"` only) | { strokeWidth: 2, showInfo: false } | 3.0 | |
| removeIcon | custom remove icon | v-slot:iconRender="{file: UploadFile}" | - | 3.0 | |
| showUploadList | Whether to show default upload list, could be an object to specify `showPreviewIcon`, `showRemoveIcon` and `showDownloadIcon` individually | Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean } | true | showDownloadIcon(3.0) | |
| showUploadList | Whether to show default upload list, could be an object to specify `showPreviewIcon`, `showRemoveIcon` and `showDownloadIcon` individually | boolean \| { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean } | true | showDownloadIcon(3.0) | |
| supportServerRender | Need to be turned on while the server side is rendering. | boolean | false | | |
| withCredentials | ajax upload with cookie sent | boolean | false | | |

### events

| Events Name | Description | Arguments | Version | |
| --- | --- | --- | --- | --- |
| change | A callback function, can be executed when uploading state is changing. See [change](#change) | Function | - | |
| download | Click the method to download the file, pass the method to perform the method logic, do not pass the default jump to the new TAB. | Function(file): void | Jump to new TAB | 1.5.0 |
| change | A callback function, can be executed when uploading state is changing. See [change](#change) | function | - | |
| download | Click the method to download the file, pass the method to perform the method logic, do not pass the default jump to the new TAB. | function(file): void | Jump to new TAB | 1.5.0 |
| drop | A callback function executed when files are dragged and dropped into upload area | (event: DragEvent) => void | - | 3.0 |
| preview | A callback function, will be executed when file link or preview icon is clicked. | Function(file) | - | |
| reject | A callback function, will be executed when drop files is not accept. | Function(fileList) | - | |
| preview | A callback function, will be executed when file link or preview icon is clicked. | function(file) | - | |
| reject | A callback function, will be executed when drop files is not accept. | function(fileList) | - | |
| remove   | A callback function, will be executed when removing file button is clicked, remove event will be prevented when return value is false or a Promise which resolve(false) or reject | function(file): boolean \| Promise | -   | 3.0 |

### UploadFile
Expand Down
Loading