@vertexvis/ui 0.1.0-canary.3 → 0.1.0-canary.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/{select-0eb7203f.js → select-e7f11281.js} +3 -3
- package/dist/cjs/vertex-select.cjs.entry.js +1 -1
- package/dist/collection/components/select/select.css +12 -0
- package/dist/collection/components/select/select.js +2 -2
- package/dist/components/components.esm.js +1 -1
- package/dist/components/index.esm.js +1 -1
- package/dist/components/p-3453e764.entry.js +1 -0
- package/dist/components/p-b7513ece.js +1 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/{select-75ed5653.js → select-5b35c98b.js} +3 -3
- package/dist/esm/vertex-select.entry.js +1 -1
- package/package.json +2 -2
- package/dist/components/p-552c128f.js +0 -1
- package/dist/components/p-ebabee40.entry.js +0 -1
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -33,7 +33,7 @@ const radioGroup = require('./radio-group-d628f631.js');
|
|
|
33
33
|
const resizable = require('./resizable-e4248256.js');
|
|
34
34
|
const resultList = require('./result-list-1e592c3c.js');
|
|
35
35
|
const searchBar = require('./search-bar-bb40cfa7.js');
|
|
36
|
-
const select = require('./select-
|
|
36
|
+
const select = require('./select-e7f11281.js');
|
|
37
37
|
const slider = require('./slider-13594e49.js');
|
|
38
38
|
const spinner = require('./spinner-bb990a42.js');
|
|
39
39
|
const textField = require('./text-field-0397fb34.js');
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
const index = require('./index-6a92256c.js');
|
|
4
4
|
const index$1 = require('./index-e1b40fa6.js');
|
|
5
5
|
|
|
6
|
-
const selectCss = ":host{--select-width:100
|
|
6
|
+
const selectCss = ":host{--select-width:100%;--select-option-white-space:normal}.root{display:inline-block;color:var(--vertex-ui-neutral-700);width:var(--select-width);font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);overflow:hidden;user-select:none}.root:not(.disabled):hover{color:var(--vertex-ui-neutral-800)}.root.disabled{color:var(--vertex-ui-neutral-400)}.target,.selected-option{background-color:var(--vertex-ui-neutral-200);width:100%;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;padding:0.375rem 0.75rem 0.375rem 0.75rem}.target.hidden{box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%),\n 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%)}.selected-option.disabled,.target.disabled{background-color:var(--vertex-ui-neutral-100);cursor:default}.target{border-radius:4px}.text{white-space:var(--select-option-white-space);overflow:hidden;text-overflow:ellipsis}.icon{padding-left:1rem;margin-left:auto}.options{position:relative;cursor:pointer;background-color:var(--vertex-ui-white);border-radius:4px;padding:0.25rem 0;top:-0.25rem;box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%),\n 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%)}.options.animated{transition:opacity 0.1s ease-in 0.05s;opacity:0}.options.hidden{background-color:transparent}.options.visible{opacity:1}.options>*,.options>slot::slotted(*){padding:0.375rem 0.75rem 0.375rem 0.75rem}.options.hidden>*,.options.hidden>slot::slotted(*){opacity:0}.options>slot::slotted(:hover){background-color:var(--vertex-ui-neutral-200)}vertex-popover{--transform-origin:top left;--open-animation-name:open-scale-y;--close-animation-name:close-scale-y}";
|
|
7
7
|
|
|
8
8
|
const GET_BOUNDS_DEBOUNCE_THRESHOLD = 200;
|
|
9
9
|
const Select = class {
|
|
@@ -60,7 +60,7 @@ const Select = class {
|
|
|
60
60
|
}, onClick: !this.open && !this.disabled ? this.handleOpen : undefined }, index.h("div", { class: index$1.classnames('target', {
|
|
61
61
|
hidden: this.open,
|
|
62
62
|
disabled: this.disabled,
|
|
63
|
-
}) }, this.displayValue || this.placeholder, index.h("div", { class: "icon" }, index.h("vertex-icon", { name: "chevron-down", size: "sm" }))), index.h("vertex-popover", { position: this.position, open: this.open, animated: this.animated, resizeBehavior: "fixed", onDismissed: this.handleDismiss }, index.h("div", { class: index$1.classnames('options', {
|
|
63
|
+
}) }, index.h("div", { class: "text" }, this.displayValue || this.placeholder), index.h("div", { class: "icon" }, index.h("vertex-icon", { name: "chevron-down", size: "sm" }))), index.h("vertex-popover", { position: this.position, open: this.open, animated: this.animated, resizeBehavior: "fixed", onDismissed: this.handleDismiss }, index.h("div", { class: index$1.classnames('options', {
|
|
64
64
|
hidden: !this.open,
|
|
65
65
|
visible: this.open,
|
|
66
66
|
animated: this.animated,
|
|
@@ -68,7 +68,7 @@ const Select = class {
|
|
|
68
68
|
minWidth: this.width != null ? `${this.width}px` : 'var(--select-width)',
|
|
69
69
|
} }, index.h("div", { class: index$1.classnames('selected-option', {
|
|
70
70
|
disabled: this.disabled,
|
|
71
|
-
}), onClick: this.handleDismiss }, this.displayValue || this.placeholder, index.h("div", { class: "icon" }, index.h("vertex-icon", { name: "chevron-down", size: "sm" }))), index.h("slot", null)))));
|
|
71
|
+
}), onClick: this.handleDismiss }, index.h("div", { class: "text" }, this.displayValue || this.placeholder), index.h("div", { class: "icon" }, index.h("vertex-icon", { name: "chevron-down", size: "sm" }))), index.h("slot", null)))));
|
|
72
72
|
}
|
|
73
73
|
handleOpen() {
|
|
74
74
|
var _a, _b;
|
|
@@ -4,6 +4,12 @@
|
|
|
4
4
|
the input size from changing as different options are selected.
|
|
5
5
|
*/
|
|
6
6
|
--select-width: 100%;
|
|
7
|
+
|
|
8
|
+
/*
|
|
9
|
+
The white-space behavior of the text within this select input.
|
|
10
|
+
Defaults to `normal`.
|
|
11
|
+
*/
|
|
12
|
+
--select-option-white-space: normal;
|
|
7
13
|
}
|
|
8
14
|
|
|
9
15
|
.root {
|
|
@@ -50,6 +56,12 @@
|
|
|
50
56
|
border-radius: 4px;
|
|
51
57
|
}
|
|
52
58
|
|
|
59
|
+
.text {
|
|
60
|
+
white-space: var(--select-option-white-space);
|
|
61
|
+
overflow: hidden;
|
|
62
|
+
text-overflow: ellipsis;
|
|
63
|
+
}
|
|
64
|
+
|
|
53
65
|
.icon {
|
|
54
66
|
padding-left: 1rem;
|
|
55
67
|
margin-left: auto;
|
|
@@ -53,7 +53,7 @@ export class Select {
|
|
|
53
53
|
}, onClick: !this.open && !this.disabled ? this.handleOpen : undefined }, h("div", { class: classNames('target', {
|
|
54
54
|
hidden: this.open,
|
|
55
55
|
disabled: this.disabled,
|
|
56
|
-
}) }, this.displayValue || this.placeholder, h("div", { class: "icon" }, h("vertex-icon", { name: "chevron-down", size: "sm" }))), h("vertex-popover", { position: this.position, open: this.open, animated: this.animated, resizeBehavior: "fixed", onDismissed: this.handleDismiss }, h("div", { class: classNames('options', {
|
|
56
|
+
}) }, h("div", { class: "text" }, this.displayValue || this.placeholder), h("div", { class: "icon" }, h("vertex-icon", { name: "chevron-down", size: "sm" }))), h("vertex-popover", { position: this.position, open: this.open, animated: this.animated, resizeBehavior: "fixed", onDismissed: this.handleDismiss }, h("div", { class: classNames('options', {
|
|
57
57
|
hidden: !this.open,
|
|
58
58
|
visible: this.open,
|
|
59
59
|
animated: this.animated,
|
|
@@ -61,7 +61,7 @@ export class Select {
|
|
|
61
61
|
minWidth: this.width != null ? `${this.width}px` : 'var(--select-width)',
|
|
62
62
|
} }, h("div", { class: classNames('selected-option', {
|
|
63
63
|
disabled: this.disabled,
|
|
64
|
-
}), onClick: this.handleDismiss }, this.displayValue || this.placeholder, h("div", { class: "icon" }, h("vertex-icon", { name: "chevron-down", size: "sm" }))), h("slot", null)))));
|
|
64
|
+
}), onClick: this.handleDismiss }, h("div", { class: "text" }, this.displayValue || this.placeholder), h("div", { class: "icon" }, h("vertex-icon", { name: "chevron-down", size: "sm" }))), h("slot", null)))));
|
|
65
65
|
}
|
|
66
66
|
handleOpen() {
|
|
67
67
|
var _a, _b;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{d as e,N as t,w as a,p as o,a as r,b as i}from"./p-6834631c.js";export{s as setNonce}from"./p-6834631c.js";(()=>{const i=Array.from(e.querySelectorAll("script")).find((e=>new RegExp(`/${t}(\\.esm)?\\.js($|\\?|#)`).test(e.src)||e.getAttribute("data-stencil-namespace")===t)),n={};return n.resourcesUrl=new URL(".",new URL(i.getAttribute("data-resources-url")||i.src,a.location.href)).href,((o,i)=>{const n=`__sc_import_${t.replace(/\s|-/g,"_")}`;try{a[n]=new Function("w",`return import(w);//${Math.random()}`)}catch(t){const l=new Map;a[n]=t=>{var c;const s=new URL(t,o).href;let p=l.get(s);if(!p){const t=e.createElement("script");t.type="module",t.crossOrigin=i.crossOrigin,t.src=URL.createObjectURL(new Blob([`import * as m from '${s}'; window.${n}.m = m;`],{type:"application/javascript"}));const o=null!==(c=r.t)&&void 0!==c?c:function(e){var t,a,o;return null!==(o=null===(a=null===(t=e.head)||void 0===t?void 0:t.querySelector('meta[name="csp-nonce"]'))||void 0===a?void 0:a.getAttribute("content"))&&void 0!==o?o:void 0}(e);null!=o&&t.setAttribute("nonce",o),p=new Promise((e=>{t.onload=()=>{e(a[n].m),t.remove()}})),l.set(s,p),e.head.appendChild(t)}return p}}})(n.resourcesUrl,i),a.customElements?o(n):__sc_import_components("./p-c3ec6642.js").then((()=>n))})().then((e=>i([["p-24c72960",[[6,"vertex-click-to-edit-textfield",{placeholder:[1],fontSize:[1,"font-size"],disabled:[516],multiline:[4],minRows:[2,"min-rows"],maxRows:[2,"max-rows"],value:[1032],autoFocus:[4,"auto-focus"],editing:[1540],hasError:[4,"has-error"]}]]],["p-226e83a6",[[1,"vertex-collapsible",{label:[1],open:[1540]}]]],["p-41ced35c",[[1,"vertex-context-menu",{targetSelector:[1,"target-selector"],animated:[4],position:[32],open:[32]}]]],["p-0f8b9ede",[[1,"vertex-dialog",{open:[1540],fullscreen:[4],resizable:[4],width:[32],height:[32],minWidth:[32],minHeight:[32],maxWidth:[32],maxHeight:[32],isResizing:[32]},[[4,"keydown","keyDownListener"]]]]],["p-e7336466",[[1,"vertex-draggable-popover",{position:[1],boundarySelector:[1,"boundary-selector"],boundaryPadding:[2,"boundary-padding"],anchorPosition:[32],lastPosition:[32],dragging:[32]}]]],["p-e3d0c2d1",[[1,"vertex-dropdown-menu",{animated:[4],placement:[1],open:[32]}]]],["p-fe7e7a74",[[1,"vertex-help-tooltip",{animated:[4],placement:[1],open:[32]}]]],["p-ae6a3c46",[[6,"vertex-search-bar",{variant:[1],resultItems:[16],triggerCharacters:[16],triggerCharacter:[1,"trigger-character"],breakCharacters:[16],debounce:[2],placeholder:[1],placement:[1],cursorPosition:[32],open:[32],triggerKey:[32],triggerRange:[32],replaceTriggeredValue:[64],getEditableContent:[64]}]]],["p-
|
|
1
|
+
import{d as e,N as t,w as a,p as o,a as r,b as i}from"./p-6834631c.js";export{s as setNonce}from"./p-6834631c.js";(()=>{const i=Array.from(e.querySelectorAll("script")).find((e=>new RegExp(`/${t}(\\.esm)?\\.js($|\\?|#)`).test(e.src)||e.getAttribute("data-stencil-namespace")===t)),n={};return n.resourcesUrl=new URL(".",new URL(i.getAttribute("data-resources-url")||i.src,a.location.href)).href,((o,i)=>{const n=`__sc_import_${t.replace(/\s|-/g,"_")}`;try{a[n]=new Function("w",`return import(w);//${Math.random()}`)}catch(t){const l=new Map;a[n]=t=>{var c;const s=new URL(t,o).href;let p=l.get(s);if(!p){const t=e.createElement("script");t.type="module",t.crossOrigin=i.crossOrigin,t.src=URL.createObjectURL(new Blob([`import * as m from '${s}'; window.${n}.m = m;`],{type:"application/javascript"}));const o=null!==(c=r.t)&&void 0!==c?c:function(e){var t,a,o;return null!==(o=null===(a=null===(t=e.head)||void 0===t?void 0:t.querySelector('meta[name="csp-nonce"]'))||void 0===a?void 0:a.getAttribute("content"))&&void 0!==o?o:void 0}(e);null!=o&&t.setAttribute("nonce",o),p=new Promise((e=>{t.onload=()=>{e(a[n].m),t.remove()}})),l.set(s,p),e.head.appendChild(t)}return p}}})(n.resourcesUrl,i),a.customElements?o(n):__sc_import_components("./p-c3ec6642.js").then((()=>n))})().then((e=>i([["p-24c72960",[[6,"vertex-click-to-edit-textfield",{placeholder:[1],fontSize:[1,"font-size"],disabled:[516],multiline:[4],minRows:[2,"min-rows"],maxRows:[2,"max-rows"],value:[1032],autoFocus:[4,"auto-focus"],editing:[1540],hasError:[4,"has-error"]}]]],["p-226e83a6",[[1,"vertex-collapsible",{label:[1],open:[1540]}]]],["p-41ced35c",[[1,"vertex-context-menu",{targetSelector:[1,"target-selector"],animated:[4],position:[32],open:[32]}]]],["p-0f8b9ede",[[1,"vertex-dialog",{open:[1540],fullscreen:[4],resizable:[4],width:[32],height:[32],minWidth:[32],minHeight:[32],maxWidth:[32],maxHeight:[32],isResizing:[32]},[[4,"keydown","keyDownListener"]]]]],["p-e7336466",[[1,"vertex-draggable-popover",{position:[1],boundarySelector:[1,"boundary-selector"],boundaryPadding:[2,"boundary-padding"],anchorPosition:[32],lastPosition:[32],dragging:[32]}]]],["p-e3d0c2d1",[[1,"vertex-dropdown-menu",{animated:[4],placement:[1],open:[32]}]]],["p-fe7e7a74",[[1,"vertex-help-tooltip",{animated:[4],placement:[1],open:[32]}]]],["p-ae6a3c46",[[6,"vertex-search-bar",{variant:[1],resultItems:[16],triggerCharacters:[16],triggerCharacter:[1,"trigger-character"],breakCharacters:[16],debounce:[2],placeholder:[1],placement:[1],cursorPosition:[32],open:[32],triggerKey:[32],triggerRange:[32],replaceTriggeredValue:[64],getEditableContent:[64]}]]],["p-3453e764",[[1,"vertex-select",{value:[513],placeholder:[513],disabled:[516],animated:[4],resizeObserverFactory:[16],open:[32],position:[32],displayValue:[32]}]]],["p-16719272",[[1,"vertex-slider",{min:[2],max:[2],valueLabelDisplay:[1,"value-label-display"],step:[8],size:[1],value:[1026],disabled:[4]}]]],["p-756c9977",[[1,"vertex-toast",{content:[1],placement:[1],duration:[2],animated:[4],open:[4],type:[1],isOpen:[32]}]]],["p-7f64b251",[[1,"vertex-color-circle-picker",{colors:[1],supplementalColors:[1,"supplemental-colors"],theme:[513],lightenPercentage:[2,"lighten-percentage"],darkenPercentage:[2,"darken-percentage"],selected:[1537],direction:[1]}]]],["p-35e7ab78",[[1,"vertex-color-picker",{value:[1537],disabled:[4]}]]],["p-53515813",[[1,"vertex-toggle",{variant:[1],disabled:[4],checked:[1540]}]]],["p-bca6275a",[[1,"vertex-avatar",{firstName:[1,"first-name"],lastName:[1,"last-name"],value:[1],active:[4],variant:[1]}]]],["p-91123ff6",[[1,"vertex-avatar-group"]]],["p-0b4406fa",[[1,"vertex-badge",{badgeText:[1,"badge-text"],badgeColor:[1,"badge-color"]}]]],["p-fca52578",[[1,"vertex-button",{type:[1],color:[1],variant:[1],size:[1],expand:[1],href:[1],target:[1],disabled:[516]}]]],["p-6d4f055b",[[1,"vertex-card",{mode:[1]}]]],["p-211c1186",[[1,"vertex-card-group",{selected:[516],hovered:[516],expanded:[516]}]]],["p-d7c0c287",[[1,"vertex-chip",{variant:[1],color:[1]}]]],["p-a2018217",[[1,"vertex-logo-loading"]]],["p-cc2e3192",[[1,"vertex-menu-divider"]]],["p-573b8ec6",[[1,"vertex-menu-item",{disabled:[516]}]]],["p-33400eed",[[2,"vertex-radio",{disabled:[516],value:[513],label:[513],name:[513],checked:[516]}]]],["p-8b85ea4a",[[1,"vertex-radio-group",{name:[513],value:[1537]}]]],["p-ea4a2f74",[[1,"vertex-resizable",{horizontalDirection:[1,"horizontal-direction"],verticalDirection:[1,"vertical-direction"],initialHorizontalScale:[2,"initial-horizontal-scale"],initialVerticalScale:[2,"initial-vertical-scale"],initializeWithOffset:[4,"initialize-with-offset"],parentSelector:[1,"parent-selector"],verticalSiblingSelector:[1,"vertical-sibling-selector"],horizontalSiblingSelector:[1,"horizontal-sibling-selector"],contentSelector:[1,"content-selector"],position:[1],dimensionsComputed:[1540,"dimensions-computed"],width:[32],minWidth:[32],maxWidth:[32],height:[32],minHeight:[32],maxHeight:[32],left:[32],top:[32],hoveredLocation:[32],dragStartLocation:[32],updateDimensions:[64]}]]],["p-69375605",[[1,"vertex-spinner",{color:[1],size:[1]}]]],["p-80c989fa",[[1,"vertex-expandable",{expanded:[1540],expanding:[1540],collapsing:[1540],controlled:[516],expandType:[513,"expand-type"],animated:[4],contentScrollHeight:[32]}]]],["p-19318fee",[[1,"vertex-result-list",{items:[16],itemsJson:[1,"items"],viewportStartIndex:[1026,"viewport-start-index"],viewportEndIndex:[1026,"viewport-end-index"],resultHeight:[1026,"result-height"],overScanCount:[2,"over-scan-count"],placement:[1],position:[1],open:[4],listHeight:[32],parsedResults:[32],scrollTop:[32],lastStartIndex:[32],lastFocusedIndex:[32],stateMap:[32]}]]],["p-209db2ba",[[6,"vertex-textfield",{type:[1],name:[1],variant:[1],fontSize:[1,"font-size"],multiline:[4],minRows:[2,"min-rows"],maxRows:[2,"max-rows"],placeholder:[1],autoFocus:[4,"auto-focus"],autoComplete:[1,"auto-complete"],autoCorrect:[1,"auto-correct"],value:[1032],disabled:[516],hasError:[4,"has-error"],updateInput:[64],blurInput:[64],getInputValue:[64],selectAll:[64]}]]],["p-0b1cdc8a",[[1,"vertex-tooltip",{content:[1],disabled:[4],placement:[1],delay:[2],animated:[4],open:[32]}]]],["p-20a74d5d",[[1,"vertex-color-circle",{color:[513],supplementalColor:[513,"supplemental-color"],theme:[513],lightenPercentage:[2,"lighten-percentage"],darkenPercentage:[2,"darken-percentage"],lightened:[1537],darkened:[1537]}]]],["p-9c384f6c",[[1,"vertex-auto-resize-textarea",{textareaSelector:[1,"textarea-selector"],initialValue:[1,"initial-value"],minRows:[514,"min-rows"],maxRows:[514,"max-rows"],textValue:[32]}]]],["p-0517ca62",[[1,"vertex-menu",{animated:[4],open:[1540],placement:[1],fallbackPlacements:[16],backdrop:[4],position:[1040],popoverProps:[16]}]]],["p-f71fc166",[[1,"vertex-icon-button",{iconName:[1,"icon-name"],disabled:[516],variant:[1],iconColor:[1,"icon-color"],iconSize:[1,"icon-size"]}]]],["p-7dba2574",[[1,"vertex-icon",{name:[1],size:[1]}]]],["p-e576818b",[[1,"vertex-popover",{open:[1540],placement:[1],position:[1025],anchorBounds:[16],backdrop:[4],animated:[4],anchorSelector:[1,"anchor-selector"],boundarySelector:[1,"boundary-selector"],resizeBehavior:[1,"resize-behavior"],overflowBehavior:[16],flipBehavior:[16],offsetBehavior:[2,"offset-behavior"],updateOnResize:[4,"update-on-resize"],opened:[32],computedPlacement:[32]}]]]],e)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export{A as AutoResizeTextArea}from"./p-bec53c3a.js";export{A as Avatar}from"./p-c2c076f1.js";export{A as AvatarGroup}from"./p-81cb4da4.js";export{B as Badge}from"./p-29d7697f.js";export{B as Button}from"./p-64e8b92c.js";export{C as Card}from"./p-a3c04bbd.js";export{C as CardGroup}from"./p-ff4a1c3a.js";export{C as Chip}from"./p-a6614625.js";export{C as ClickToEditTextField}from"./p-0e628c05.js";export{C as Collapsible}from"./p-8fe0084d.js";export{C as ColorCircle}from"./p-d9b9aebe.js";export{C as ColorCirclePicker}from"./p-9374ef6c.js";export{C as ColorPicker}from"./p-8434602f.js";export{C as ContextMenu}from"./p-f2bc7ec5.js";export{D as Dialog}from"./p-165aed7d.js";export{D as DraggablePopover}from"./p-41a7564c.js";export{D as DropdownMenu}from"./p-39133bc7.js";export{E as Expandable}from"./p-6a640a2c.js";export{H as HelpTooltip}from"./p-2cff3285.js";export{I as Icon}from"./p-ca52a423.js";export{I as IconButton}from"./p-103249b4.js";export{L as LogoLoading}from"./p-817bf6ff.js";export{M as Menu}from"./p-7b75e004.js";export{M as MenuDivider}from"./p-c939fa4e.js";export{M as MenuItem}from"./p-988058f9.js";export{P as Popover}from"./p-6505cdb3.js";export{R as Radio}from"./p-36c853c4.js";export{R as RadioGroup}from"./p-f693e6f8.js";export{R as Resizable}from"./p-6ec189d2.js";export{R as ResultList}from"./p-52739247.js";export{S as SearchBar}from"./p-4224c2ad.js";export{S as Select}from"./p-
|
|
1
|
+
export{A as AutoResizeTextArea}from"./p-bec53c3a.js";export{A as Avatar}from"./p-c2c076f1.js";export{A as AvatarGroup}from"./p-81cb4da4.js";export{B as Badge}from"./p-29d7697f.js";export{B as Button}from"./p-64e8b92c.js";export{C as Card}from"./p-a3c04bbd.js";export{C as CardGroup}from"./p-ff4a1c3a.js";export{C as Chip}from"./p-a6614625.js";export{C as ClickToEditTextField}from"./p-0e628c05.js";export{C as Collapsible}from"./p-8fe0084d.js";export{C as ColorCircle}from"./p-d9b9aebe.js";export{C as ColorCirclePicker}from"./p-9374ef6c.js";export{C as ColorPicker}from"./p-8434602f.js";export{C as ContextMenu}from"./p-f2bc7ec5.js";export{D as Dialog}from"./p-165aed7d.js";export{D as DraggablePopover}from"./p-41a7564c.js";export{D as DropdownMenu}from"./p-39133bc7.js";export{E as Expandable}from"./p-6a640a2c.js";export{H as HelpTooltip}from"./p-2cff3285.js";export{I as Icon}from"./p-ca52a423.js";export{I as IconButton}from"./p-103249b4.js";export{L as LogoLoading}from"./p-817bf6ff.js";export{M as Menu}from"./p-7b75e004.js";export{M as MenuDivider}from"./p-c939fa4e.js";export{M as MenuItem}from"./p-988058f9.js";export{P as Popover}from"./p-6505cdb3.js";export{R as Radio}from"./p-36c853c4.js";export{R as RadioGroup}from"./p-f693e6f8.js";export{R as Resizable}from"./p-6ec189d2.js";export{R as ResultList}from"./p-52739247.js";export{S as SearchBar}from"./p-4224c2ad.js";export{S as Select}from"./p-b7513ece.js";export{S as Slider}from"./p-cd6ddb10.js";export{S as Spinner}from"./p-09ba50c3.js";export{T as TextField}from"./p-bd11e7d1.js";export{T as Toast}from"./p-3dd08a0f.js";export{T as Toggle}from"./p-59fb829f.js";export{T as Tooltip}from"./p-92930f2a.js";import"./p-6834631c.js";import"./p-b2c7b113.js";import"./p-fe062eb0.js";import"./p-03dbb28c.js";import"./p-1356f525.js";import"./p-59032668.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{S as vertex_select}from"./p-b7513ece.js";import"./p-6834631c.js";import"./p-fe062eb0.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as i,e as t,h as s,c as e,g as o}from"./p-6834631c.js";import{c as n}from"./p-fe062eb0.js";const r=class{constructor(s){i(this,s),this.optionChanged=t(this,"optionChanged",7),this.removeListeners=[],this.controlled=!1,this.value=void 0,this.placeholder="Select an option...",this.disabled=!1,this.animated=!0,this.open=!1,this.position=void 0,this.displayValue=void 0,this.resizeObserverFactory=i=>new ResizeObserver(i),this.handleOpen=this.handleOpen.bind(this),this.handleDismiss=this.handleDismiss.bind(this),this.getBounds=this.getBounds.bind(this)}componentDidLoad(){var i;this.resizeObserver=this.resizeObserverFactory((()=>this.getBounds())),null!=this.rootRef&&this.resizeObserver.observe(this.rootRef),this.slotElement=(null===(i=this.hostElement.shadowRoot)||void 0===i?void 0:i.querySelector("slot"))||void 0,null!=this.value&&this.handleUpdateValue(this.value)}connectedCallback(){window.addEventListener("resize",this.getBounds)}disconnectedCallback(){var i;null===(i=this.resizeObserver)||void 0===i||i.disconnect(),window.removeEventListener("resize",this.getBounds),this.removeOptionListeners()}handleUpdateValue(i){null!=i&&i!==this.internalValue&&(this.internalValue=i,this.updateDisplayValue(i)),this.controlled=null!=i}render(){return s("div",{class:n("root",{disabled:this.disabled}),ref:i=>{this.rootRef=i},onClick:this.open||this.disabled?void 0:this.handleOpen},s("div",{class:n("target",{hidden:this.open,disabled:this.disabled})},s("div",{class:"text"},this.displayValue||this.placeholder),s("div",{class:"icon"},s("vertex-icon",{name:"chevron-down",size:"sm"}))),s("vertex-popover",{position:this.position,open:this.open,animated:this.animated,resizeBehavior:"fixed",onDismissed:this.handleDismiss},s("div",{class:n("options",{hidden:!this.open,visible:this.open,animated:this.animated}),style:{minWidth:null!=this.width?`${this.width}px`:"var(--select-width)"}},s("div",{class:n("selected-option",{disabled:this.disabled}),onClick:this.handleDismiss},s("div",{class:"text"},this.displayValue||this.placeholder),s("div",{class:"icon"},s("vertex-icon",{name:"chevron-down",size:"sm"}))),s("slot",null))))}handleOpen(){var i,t;null===(t=null===(i=this.slotElement)||void 0===i?void 0:i.assignedElements)||void 0===t||t.call(i).forEach((i=>{const t=()=>{var t;const s=i.getAttribute("data-value")||i.innerHTML,e=s!==this.internalValue;this.handleDismiss(),this.controlled||(this.displayValue=i.innerHTML,this.internalValue=s),e&&(null===(t=this.optionChanged)||void 0===t||t.emit(s))};i.addEventListener("click",t),this.removeListeners=[...this.removeListeners,()=>i.removeEventListener("click",t)]})),this.open=!0}handleDismiss(){this.removeOptionListeners(),this.open=!1}updateDisplayValue(i){var t,s;const e=null===(s=null===(t=this.slotElement)||void 0===t?void 0:t.assignedElements)||void 0===s?void 0:s.call(t).find((t=>t.getAttribute("data-value")===i||t.innerHTML===i));this.displayValue=null==e?void 0:e.innerHTML}removeOptionListeners(){this.removeListeners.forEach((i=>i())),this.removeListeners=[]}getBounds(){null!=this.getBoundsTimeout&&(clearTimeout(this.getBoundsTimeout),this.getBoundsTimeout=void 0),this.getBoundsTimeout=setTimeout((()=>{this.getBoundsTimeout=void 0,e((()=>{var i;const t=null===(i=this.rootRef)||void 0===i?void 0:i.getBoundingClientRect();null!=t&&(this.position={x:t.x,y:t.y},this.width=t.width)}))}),200)}get hostElement(){return o(this)}static get watchers(){return{value:["handleUpdateValue"]}}};r.style=":host{--select-width:100%;--select-option-white-space:normal}.root{display:inline-block;color:var(--vertex-ui-neutral-700);width:var(--select-width);font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);overflow:hidden;user-select:none}.root:not(.disabled):hover{color:var(--vertex-ui-neutral-800)}.root.disabled{color:var(--vertex-ui-neutral-400)}.target,.selected-option{background-color:var(--vertex-ui-neutral-200);width:100%;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;padding:0.375rem 0.75rem 0.375rem 0.75rem}.target.hidden{box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%),\n 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%)}.selected-option.disabled,.target.disabled{background-color:var(--vertex-ui-neutral-100);cursor:default}.target{border-radius:4px}.text{white-space:var(--select-option-white-space);overflow:hidden;text-overflow:ellipsis}.icon{padding-left:1rem;margin-left:auto}.options{position:relative;cursor:pointer;background-color:var(--vertex-ui-white);border-radius:4px;padding:0.25rem 0;top:-0.25rem;box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%),\n 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%)}.options.animated{transition:opacity 0.1s ease-in 0.05s;opacity:0}.options.hidden{background-color:transparent}.options.visible{opacity:1}.options>*,.options>slot::slotted(*){padding:0.375rem 0.75rem 0.375rem 0.75rem}.options.hidden>*,.options.hidden>slot::slotted(*){opacity:0}.options>slot::slotted(:hover){background-color:var(--vertex-ui-neutral-200)}vertex-popover{--transform-origin:top left;--open-animation-name:open-scale-y;--close-animation-name:close-scale-y}";export{r as S}
|
package/dist/esm/index.js
CHANGED
|
@@ -29,7 +29,7 @@ export { R as RadioGroup } from './radio-group-7c35d2f0.js';
|
|
|
29
29
|
export { R as Resizable } from './resizable-a147709b.js';
|
|
30
30
|
export { R as ResultList } from './result-list-36cfb08a.js';
|
|
31
31
|
export { S as SearchBar } from './search-bar-59cc151d.js';
|
|
32
|
-
export { S as Select } from './select-
|
|
32
|
+
export { S as Select } from './select-5b35c98b.js';
|
|
33
33
|
export { S as Slider } from './slider-dcdb388f.js';
|
|
34
34
|
export { S as Spinner } from './spinner-afccea51.js';
|
|
35
35
|
export { T as TextField } from './text-field-e542da25.js';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, e as createEvent, h, c as readTask, g as getElement } from './index-72f28b71.js';
|
|
2
2
|
import { c as classnames } from './index-9c609209.js';
|
|
3
3
|
|
|
4
|
-
const selectCss = ":host{--select-width:100
|
|
4
|
+
const selectCss = ":host{--select-width:100%;--select-option-white-space:normal}.root{display:inline-block;color:var(--vertex-ui-neutral-700);width:var(--select-width);font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);overflow:hidden;user-select:none}.root:not(.disabled):hover{color:var(--vertex-ui-neutral-800)}.root.disabled{color:var(--vertex-ui-neutral-400)}.target,.selected-option{background-color:var(--vertex-ui-neutral-200);width:100%;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;padding:0.375rem 0.75rem 0.375rem 0.75rem}.target.hidden{box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%),\n 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%)}.selected-option.disabled,.target.disabled{background-color:var(--vertex-ui-neutral-100);cursor:default}.target{border-radius:4px}.text{white-space:var(--select-option-white-space);overflow:hidden;text-overflow:ellipsis}.icon{padding-left:1rem;margin-left:auto}.options{position:relative;cursor:pointer;background-color:var(--vertex-ui-white);border-radius:4px;padding:0.25rem 0;top:-0.25rem;box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%),\n 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%)}.options.animated{transition:opacity 0.1s ease-in 0.05s;opacity:0}.options.hidden{background-color:transparent}.options.visible{opacity:1}.options>*,.options>slot::slotted(*){padding:0.375rem 0.75rem 0.375rem 0.75rem}.options.hidden>*,.options.hidden>slot::slotted(*){opacity:0}.options>slot::slotted(:hover){background-color:var(--vertex-ui-neutral-200)}vertex-popover{--transform-origin:top left;--open-animation-name:open-scale-y;--close-animation-name:close-scale-y}";
|
|
5
5
|
|
|
6
6
|
const GET_BOUNDS_DEBOUNCE_THRESHOLD = 200;
|
|
7
7
|
const Select = class {
|
|
@@ -58,7 +58,7 @@ const Select = class {
|
|
|
58
58
|
}, onClick: !this.open && !this.disabled ? this.handleOpen : undefined }, h("div", { class: classnames('target', {
|
|
59
59
|
hidden: this.open,
|
|
60
60
|
disabled: this.disabled,
|
|
61
|
-
}) }, this.displayValue || this.placeholder, h("div", { class: "icon" }, h("vertex-icon", { name: "chevron-down", size: "sm" }))), h("vertex-popover", { position: this.position, open: this.open, animated: this.animated, resizeBehavior: "fixed", onDismissed: this.handleDismiss }, h("div", { class: classnames('options', {
|
|
61
|
+
}) }, h("div", { class: "text" }, this.displayValue || this.placeholder), h("div", { class: "icon" }, h("vertex-icon", { name: "chevron-down", size: "sm" }))), h("vertex-popover", { position: this.position, open: this.open, animated: this.animated, resizeBehavior: "fixed", onDismissed: this.handleDismiss }, h("div", { class: classnames('options', {
|
|
62
62
|
hidden: !this.open,
|
|
63
63
|
visible: this.open,
|
|
64
64
|
animated: this.animated,
|
|
@@ -66,7 +66,7 @@ const Select = class {
|
|
|
66
66
|
minWidth: this.width != null ? `${this.width}px` : 'var(--select-width)',
|
|
67
67
|
} }, h("div", { class: classnames('selected-option', {
|
|
68
68
|
disabled: this.disabled,
|
|
69
|
-
}), onClick: this.handleDismiss }, this.displayValue || this.placeholder, h("div", { class: "icon" }, h("vertex-icon", { name: "chevron-down", size: "sm" }))), h("slot", null)))));
|
|
69
|
+
}), onClick: this.handleDismiss }, h("div", { class: "text" }, this.displayValue || this.placeholder), h("div", { class: "icon" }, h("vertex-icon", { name: "chevron-down", size: "sm" }))), h("slot", null)))));
|
|
70
70
|
}
|
|
71
71
|
handleOpen() {
|
|
72
72
|
var _a, _b;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vertexvis/ui",
|
|
3
|
-
"version": "0.1.0-canary.
|
|
3
|
+
"version": "0.1.0-canary.4",
|
|
4
4
|
"description": "The Vertex UI component library.",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -86,5 +86,5 @@
|
|
|
86
86
|
"@floating-ui/dom": "^1.6.5",
|
|
87
87
|
"@vertexvis/utils": "^0.21.0"
|
|
88
88
|
},
|
|
89
|
-
"gitHead": "
|
|
89
|
+
"gitHead": "36b3f79175ca044086832a7dc0766b2fb1c8652c"
|
|
90
90
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as i,e as t,h as s,c as e,g as o}from"./p-6834631c.js";import{c as n}from"./p-fe062eb0.js";const r=class{constructor(s){i(this,s),this.optionChanged=t(this,"optionChanged",7),this.removeListeners=[],this.controlled=!1,this.value=void 0,this.placeholder="Select an option...",this.disabled=!1,this.animated=!0,this.open=!1,this.position=void 0,this.displayValue=void 0,this.resizeObserverFactory=i=>new ResizeObserver(i),this.handleOpen=this.handleOpen.bind(this),this.handleDismiss=this.handleDismiss.bind(this),this.getBounds=this.getBounds.bind(this)}componentDidLoad(){var i;this.resizeObserver=this.resizeObserverFactory((()=>this.getBounds())),null!=this.rootRef&&this.resizeObserver.observe(this.rootRef),this.slotElement=(null===(i=this.hostElement.shadowRoot)||void 0===i?void 0:i.querySelector("slot"))||void 0,null!=this.value&&this.handleUpdateValue(this.value)}connectedCallback(){window.addEventListener("resize",this.getBounds)}disconnectedCallback(){var i;null===(i=this.resizeObserver)||void 0===i||i.disconnect(),window.removeEventListener("resize",this.getBounds),this.removeOptionListeners()}handleUpdateValue(i){null!=i&&i!==this.internalValue&&(this.internalValue=i,this.updateDisplayValue(i)),this.controlled=null!=i}render(){return s("div",{class:n("root",{disabled:this.disabled}),ref:i=>{this.rootRef=i},onClick:this.open||this.disabled?void 0:this.handleOpen},s("div",{class:n("target",{hidden:this.open,disabled:this.disabled})},this.displayValue||this.placeholder,s("div",{class:"icon"},s("vertex-icon",{name:"chevron-down",size:"sm"}))),s("vertex-popover",{position:this.position,open:this.open,animated:this.animated,resizeBehavior:"fixed",onDismissed:this.handleDismiss},s("div",{class:n("options",{hidden:!this.open,visible:this.open,animated:this.animated}),style:{minWidth:null!=this.width?`${this.width}px`:"var(--select-width)"}},s("div",{class:n("selected-option",{disabled:this.disabled}),onClick:this.handleDismiss},this.displayValue||this.placeholder,s("div",{class:"icon"},s("vertex-icon",{name:"chevron-down",size:"sm"}))),s("slot",null))))}handleOpen(){var i,t;null===(t=null===(i=this.slotElement)||void 0===i?void 0:i.assignedElements)||void 0===t||t.call(i).forEach((i=>{const t=()=>{var t;const s=i.getAttribute("data-value")||i.innerHTML,e=s!==this.internalValue;this.handleDismiss(),this.controlled||(this.displayValue=i.innerHTML,this.internalValue=s),e&&(null===(t=this.optionChanged)||void 0===t||t.emit(s))};i.addEventListener("click",t),this.removeListeners=[...this.removeListeners,()=>i.removeEventListener("click",t)]})),this.open=!0}handleDismiss(){this.removeOptionListeners(),this.open=!1}updateDisplayValue(i){var t,s;const e=null===(s=null===(t=this.slotElement)||void 0===t?void 0:t.assignedElements)||void 0===s?void 0:s.call(t).find((t=>t.getAttribute("data-value")===i||t.innerHTML===i));this.displayValue=null==e?void 0:e.innerHTML}removeOptionListeners(){this.removeListeners.forEach((i=>i())),this.removeListeners=[]}getBounds(){null!=this.getBoundsTimeout&&(clearTimeout(this.getBoundsTimeout),this.getBoundsTimeout=void 0),this.getBoundsTimeout=setTimeout((()=>{this.getBoundsTimeout=void 0,e((()=>{var i;const t=null===(i=this.rootRef)||void 0===i?void 0:i.getBoundingClientRect();null!=t&&(this.position={x:t.x,y:t.y},this.width=t.width)}))}),200)}get hostElement(){return o(this)}static get watchers(){return{value:["handleUpdateValue"]}}};r.style=":host{--select-width:100%}.root{display:inline-block;color:var(--vertex-ui-neutral-700);width:var(--select-width);font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);overflow:hidden;user-select:none}.root:not(.disabled):hover{color:var(--vertex-ui-neutral-800)}.root.disabled{color:var(--vertex-ui-neutral-400)}.target,.selected-option{background-color:var(--vertex-ui-neutral-200);width:100%;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;padding:0.375rem 0.75rem 0.375rem 0.75rem}.target.hidden{box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%),\n 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%)}.selected-option.disabled,.target.disabled{background-color:var(--vertex-ui-neutral-100);cursor:default}.target{border-radius:4px}.icon{padding-left:1rem;margin-left:auto}.options{position:relative;cursor:pointer;background-color:var(--vertex-ui-white);border-radius:4px;padding:0.25rem 0;top:-0.25rem;box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%),\n 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%)}.options.animated{transition:opacity 0.1s ease-in 0.05s;opacity:0}.options.hidden{background-color:transparent}.options.visible{opacity:1}.options>*,.options>slot::slotted(*){padding:0.375rem 0.75rem 0.375rem 0.75rem}.options.hidden>*,.options.hidden>slot::slotted(*){opacity:0}.options>slot::slotted(:hover){background-color:var(--vertex-ui-neutral-200)}vertex-popover{--transform-origin:top left;--open-animation-name:open-scale-y;--close-animation-name:close-scale-y}";export{r as S}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export{S as vertex_select}from"./p-552c128f.js";import"./p-6834631c.js";import"./p-fe062eb0.js";
|