mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
Alignment with Carbon version 10.32 (#588)
* feat(code-snippet): add copy functionality - docs: add custom feedback copy text example * feat(tile): support disabled state for SelectableTile, RadioTile Closes #539 * build(rollup): add clipboard-copy to globals * feat(copy-button): add copy functionality * feat(content-switcher): deprecate the light prop - docs: remove the light variant example * fix(toolbar-search): remove outer div * feat(search): add searchClass prop * fix(composed-modal): set hasScrollingContent class on ModalBody * docs(data-table): add expandable size examples * feat(tooltip): add TooltipFooter component * fix(time-picker): correctly display invalidText * feat(breadcrumb): support overflow menu * feat(multi-select): export inputRef prop * chore(deps-dev): upgrade carbon-components to v10.32.0 * feat(form): add noMargin prop to FormGroup * docs(tooltip): document TooltipFooter * feat(context-menu): support danger kind for ContextMenuOption * feat(data-table): support rendering empty table header in skeleton * refactor(types): use shorter import path in DataTableSkeleton * feat(data-table): allow sorting to be disabled for a specific header * docs(data-table): update example to desort the Protocol header As an example, it makes more sense because all the values ("http") are the same. * fix(context-menu): set initial y offset of context menu based on window height #577 * fix(context-menu): render submenu based on viewport constraints #577
This commit is contained in:
parent
f13e3b100e
commit
fa9b90cd79
61 changed files with 825 additions and 233 deletions
|
@ -1,4 +1,10 @@
|
|||
<script>
|
||||
/**
|
||||
* Specify the kind of option
|
||||
* @type {"default" | "danger"}
|
||||
*/
|
||||
export let kind = "default";
|
||||
|
||||
/** Set to `true` to enable the disabled state */
|
||||
export let disabled = false;
|
||||
|
||||
|
@ -64,11 +70,16 @@
|
|||
let role = "menuitem";
|
||||
let submenuOpen = false;
|
||||
let submenuPosition = [0, 0];
|
||||
let menuOffsetX = 0;
|
||||
|
||||
const unsubPosition = ctx.position.subscribe((position) => {
|
||||
rootMenuPosition = position;
|
||||
});
|
||||
|
||||
const unsubMenuOffsetX = ctx.menuOffsetX.subscribe((_menuOffsetX) => {
|
||||
menuOffsetX = _menuOffsetX;
|
||||
});
|
||||
|
||||
function handleClick(opts = {}) {
|
||||
if (disabled) return ctx.close();
|
||||
if (subOptions) return;
|
||||
|
@ -106,6 +117,7 @@
|
|||
|
||||
return () => {
|
||||
unsubPosition();
|
||||
unsubMenuOffsetX();
|
||||
if (unsubCurrentIds) unsubCurrentIds();
|
||||
if (unsubCurrentId) unsubCurrentId();
|
||||
if (typeof timeoutHover === "number") clearTimeout(timeoutHover);
|
||||
|
@ -118,7 +130,13 @@
|
|||
$: ctx.setPopup(submenuOpen);
|
||||
$: if (submenuOpen) {
|
||||
const { width, y } = ref.getBoundingClientRect();
|
||||
submenuPosition = [rootMenuPosition[0] + width, y];
|
||||
let x = rootMenuPosition[0] + width;
|
||||
|
||||
if (window.innerWidth - menuOffsetX < width) {
|
||||
x = rootMenuPosition[0] - width;
|
||||
}
|
||||
|
||||
submenuPosition = [x, y];
|
||||
}
|
||||
$: {
|
||||
if (isSelectable) {
|
||||
|
@ -158,6 +176,7 @@
|
|||
class:bx--context-menu-option="{true}"
|
||||
class:bx--context-menu-option--disabled="{true}"
|
||||
class:bx--context-menu-option--active="{subOptions && submenuOpen}"
|
||||
class:bx--context-menu-option--danger="{!subOptions && kind === 'danger'}"
|
||||
indented="{indented}"
|
||||
aria-checked="{isSelectable || isRadio ? selected : undefined}"
|
||||
data-nested="{ref &&
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue