504 lines
13 KiB
JavaScript
504 lines
13 KiB
JavaScript
import { css, html } from '@lion/core';
|
|
import { LionOption } from '@lion/listbox';
|
|
import { renderLitAsNode } from '@lion/helpers';
|
|
// import { withModalDialogConfig } from '@lion/overlays';
|
|
import { LionCombobox } from '../../src/LionCombobox.js';
|
|
import './gh-button.js';
|
|
|
|
// @ts-expect-error
|
|
export class GhOption extends LionOption {
|
|
static get properties() {
|
|
return {
|
|
category: String,
|
|
default: { type: Boolean, reflect: true },
|
|
};
|
|
}
|
|
|
|
static get styles() {
|
|
return [
|
|
super.styles,
|
|
css`
|
|
:host {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding: 16px;
|
|
overflow: hidden;
|
|
color: #24292e;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
background-color: #fff;
|
|
border: 0;
|
|
border-bottom: 1px solid #eaecef;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
@media (min-width: 544px) {
|
|
:host {
|
|
padding-top: 7px;
|
|
padding-bottom: 7px;
|
|
}
|
|
}
|
|
|
|
:host([checked]) {
|
|
background-color: white;
|
|
}
|
|
|
|
:host(:hover),
|
|
:host([active]),
|
|
:host([focused]) {
|
|
background-color: #f6f8fa;
|
|
}
|
|
|
|
.gh-check-icon {
|
|
visibility: hidden;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
:host([checked]) .gh-check-icon {
|
|
visibility: visible;
|
|
}
|
|
|
|
.gh-default-badge {
|
|
visibility: hidden;
|
|
|
|
display: inline-block;
|
|
padding: 0 7px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 18px;
|
|
border-radius: 2em;
|
|
background-color: initial !important;
|
|
border: 1px solid #e1e4e8;
|
|
color: #586069;
|
|
border-color: #e1e4e8;
|
|
}
|
|
|
|
:host([default]) .gh-default-badge {
|
|
visibility: visible;
|
|
}
|
|
|
|
.gh-content {
|
|
flex: 1;
|
|
}
|
|
`,
|
|
];
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<svg
|
|
class="gh-check-icon"
|
|
viewBox="0 0 16 16"
|
|
version="1.1"
|
|
width="16"
|
|
height="16"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
|
|
></path>
|
|
</svg>
|
|
<span class="gh-content"><slot></slot></span>
|
|
<span class="gh-default-badge">default</span>
|
|
`;
|
|
}
|
|
}
|
|
customElements.define('gh-option', GhOption);
|
|
|
|
export class GhCombobox extends LionCombobox {
|
|
static get properties() {
|
|
return {
|
|
category: { type: String },
|
|
isDesktop: { type: Boolean, reflect: true, attribute: 'is-desktop' },
|
|
};
|
|
}
|
|
|
|
static get styles() {
|
|
return [
|
|
super.styles,
|
|
css`
|
|
/** @configure LionCombobox */
|
|
|
|
:host {
|
|
font-family: apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
|
|
Apple Color Emoji, Segoe UI Emoji;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.input-group__container {
|
|
display: flex;
|
|
border-bottom: none;
|
|
}
|
|
|
|
* > ::slotted([role='listbox']) {
|
|
max-height: none;
|
|
}
|
|
|
|
* > ::slotted([slot='input']) {
|
|
padding: 5px 12px;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
color: #24292e;
|
|
vertical-align: middle;
|
|
background-color: #fff;
|
|
background-repeat: no-repeat;
|
|
background-position: right 8px center;
|
|
border: 1px solid #e1e4e8;
|
|
border-radius: 6px;
|
|
outline: none;
|
|
box-shadow: inset 0 1px 0 rgba(225, 228, 232, 0.2);
|
|
}
|
|
|
|
:host([is-desktop]) {
|
|
font-size: 12px;
|
|
}
|
|
|
|
:host([is-desktop]) ::slotted([slot='input']) {
|
|
font-size: 14px;
|
|
}
|
|
|
|
:host([focused]) ::slotted([slot='input']) {
|
|
border-color: #0366d6;
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.3);
|
|
}
|
|
|
|
.gh-combobox {
|
|
height: auto;
|
|
max-height: 480px;
|
|
margin-top: 8px;
|
|
|
|
position: relative;
|
|
z-index: 99;
|
|
display: flex;
|
|
max-height: 66%;
|
|
margin: auto 0;
|
|
overflow: hidden;
|
|
pointer-events: auto;
|
|
flex-direction: column;
|
|
background-color: #fff;
|
|
border-radius: 12px;
|
|
box-shadow: 0 0 18px rgba(27, 31, 35, 0.4);
|
|
/* animation: SelectMenu-modal-animation 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards; */
|
|
}
|
|
|
|
:host([is-desktop]) .gh-combobox {
|
|
width: 300px;
|
|
height: auto;
|
|
max-height: 480px;
|
|
margin: 8px 0 16px;
|
|
font-size: 12px;
|
|
border: 1px solid #e1e4e8;
|
|
border-radius: 6px;
|
|
box-shadow: 0 8px 24px rgba(149, 157, 165, 0.2);
|
|
/* animation-name: SelectMenu-modal-animation--sm; */
|
|
}
|
|
|
|
.form-field__label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/** @enhance LionCombobox */
|
|
|
|
.gh-categories {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
box-shadow: inset 0 -1px 0 #eaecef;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
:host([is-desktop]) .gh-categories {
|
|
padding: 8px 8px 0;
|
|
}
|
|
|
|
.gh-categories__btn {
|
|
flex: 1;
|
|
padding: 8px 16px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: #6a737d;
|
|
text-align: center;
|
|
background-color: initial;
|
|
border: 0;
|
|
box-shadow: inset 0 -1px 0 #eaecef;
|
|
|
|
border-radius: 0;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
outline: none;
|
|
|
|
cursor: pointer;
|
|
}
|
|
|
|
.gh-categories__btn:focus {
|
|
background-color: #dbedff;
|
|
}
|
|
|
|
:host([is-desktop]) .gh-categories__btn {
|
|
flex: none;
|
|
padding: 4px 16px;
|
|
border: solid transparent;
|
|
border-width: 1px 1px 0;
|
|
border-top-left-radius: 6px;
|
|
border-top-right-radius: 6px;
|
|
}
|
|
|
|
.gh-categories__btn[aria-pressed='true'] {
|
|
z-index: 1;
|
|
color: #24292e;
|
|
cursor: default;
|
|
box-shadow: 0 0 0 1px #eaecef;
|
|
cursor: default;
|
|
}
|
|
|
|
:host([is-desktop]) .gh-categories__btn {
|
|
flex: none;
|
|
}
|
|
:host([is-desktop]) .gh-categories__btn[aria-pressed='true'] {
|
|
border-color: #eaecef;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.gh-section-wrapper {
|
|
padding: 16px;
|
|
margin: 0;
|
|
border-bottom: 1px solid #eaecef;
|
|
}
|
|
|
|
:host([is-desktop]) .gh-section-wrapper {
|
|
padding: 8px;
|
|
}
|
|
`,
|
|
];
|
|
}
|
|
|
|
/**
|
|
* @override LionCombobox put all content in an overlay
|
|
*/
|
|
// eslint-disable-next-line class-methods-use-this
|
|
render() {
|
|
return html`
|
|
<slot name="selection-display"></slot>
|
|
<div id="overlay-content-node-wrapper" role="dialog">
|
|
<div class="gh-combobox">
|
|
<div class="form-field__group-one">
|
|
<div class="gh-section-wrapper">${this._groupOneTemplate()}</div>
|
|
</div>
|
|
<div class="form-field__group-two">
|
|
<div class="gh-section-wrapper">${this._groupTwoTemplate()}</div>
|
|
<div class="gh-categories" @click="${this.__handleCategory}">
|
|
<button type="button" data-category="branches" class="gh-categories__btn">
|
|
Branches
|
|
</button>
|
|
<button type="button" data-category="tags" class="gh-categories__btn">Tags</button>
|
|
</div>
|
|
<slot name="listbox"></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<slot id="options-outlet"></slot>
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* Wrapper with combobox role for the text input that the end user controls the listbox with.
|
|
* @type {HTMLElement}
|
|
*/
|
|
get _comboboxNode() {
|
|
if (this.__comboboxNode) {
|
|
return this.__comboboxNode;
|
|
}
|
|
const slot = this.querySelector('[slot="input"]');
|
|
if (slot) {
|
|
this.__comboboxNode = slot;
|
|
return slot;
|
|
}
|
|
const slot2 = this._overlayCtrl?.contentWrapperNode.querySelector('[slot="input"]');
|
|
if (slot2) {
|
|
this.__comboboxNode = slot2;
|
|
return slot2;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
/**
|
|
* @override LionCombobox: remove selection-display (place it higher up)
|
|
*/
|
|
// eslint-disable-next-line class-methods-use-this
|
|
_inputGroupInputTemplate() {
|
|
return html`
|
|
<div class="input-group__input">
|
|
<slot name="input"></slot>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* @override LionCombobox: restore to values FormControlMixin
|
|
*/
|
|
// eslint-disable-next-line class-methods-use-this
|
|
_groupTwoTemplate() {
|
|
return html` ${this._inputGroupTemplate()} ${this._feedbackTemplate()} `;
|
|
}
|
|
|
|
get slots() {
|
|
return {
|
|
...super.slots,
|
|
'selection-display': () => {
|
|
return renderLitAsNode(html` <gh-button>
|
|
<svg
|
|
slot="before"
|
|
text="gray"
|
|
height="16"
|
|
class="octicon octicon-git-branch text-gray"
|
|
viewBox="0 0 16 16"
|
|
version="1.1"
|
|
width="16"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M11.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122V6A2.5 2.5 0 0110 8.5H6a1 1 0 00-1 1v1.128a2.251 2.251 0 11-1.5 0V5.372a2.25 2.25 0 111.5 0v1.836A2.492 2.492 0 016 7h4a1 1 0 001-1v-.628A2.25 2.25 0 019.5 3.25zM4.25 12a.75.75 0 100 1.5.75.75 0 000-1.5zM3.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0z"
|
|
></path>
|
|
</svg>
|
|
|
|
<span slot="after"> </span>
|
|
</gh-button>`);
|
|
},
|
|
};
|
|
}
|
|
|
|
get _overlayInvokerNode() {
|
|
return this.querySelector('[slot="selection-display"]');
|
|
}
|
|
|
|
get _overlayReferenceNode() {
|
|
return this._overlayInvokerNode;
|
|
}
|
|
|
|
get _categoryButtons() {
|
|
return Array.from(this.shadowRoot.querySelectorAll('.gh-categories__btn[data-category]'));
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
|
|
this.showAllOnEmpty = true;
|
|
|
|
/** @type {'branches'|'tags'} */
|
|
this.category = 'branches';
|
|
|
|
this.selectionFollowsFocus = false;
|
|
|
|
// Capture mobile OverlayConfig
|
|
this.__mobileDropdownComboConfig = this.config;
|
|
}
|
|
|
|
firstUpdated(changedProperties) {
|
|
super.firstUpdated(changedProperties);
|
|
|
|
const mql = window.matchMedia('(min-width: 544px)');
|
|
this.isDesktop = mql.matches;
|
|
mql.addListener(({ matches }) => {
|
|
this.isDesktop = matches;
|
|
});
|
|
}
|
|
|
|
updated(changedProperties) {
|
|
super.updated(changedProperties);
|
|
|
|
if (changedProperties.has('category')) {
|
|
const cat = this.category;
|
|
this._categoryButtons.forEach(btn => {
|
|
btn.setAttribute(
|
|
'aria-pressed',
|
|
btn.getAttribute('data-category') === cat ? 'true' : 'false',
|
|
);
|
|
});
|
|
|
|
this._inputNode.placeholder =
|
|
cat === 'branches' ? 'Find or create a branch...' : 'Find a tag';
|
|
|
|
this._handleAutocompletion();
|
|
}
|
|
|
|
if (changedProperties.has('opened')) {
|
|
// eslint-disable-next-line no-shadow
|
|
this._selectionDisplayNode.value = this.modelValue || 'Choose a value...';
|
|
|
|
if (this.opened) {
|
|
setTimeout(() => {
|
|
this._inputNode.focus();
|
|
});
|
|
} else {
|
|
setTimeout(() => {
|
|
this._selectionDisplayNode.focus();
|
|
}, 100);
|
|
}
|
|
}
|
|
|
|
if (changedProperties.has('isDesktop')) {
|
|
// this.config = this.isDesktop ? this.__mobileDropdownComboConfig : withModalDialogConfig();
|
|
}
|
|
}
|
|
|
|
// /**
|
|
// * @enhance LionCombobox
|
|
// * @param {*} option
|
|
// * @param {...any} args
|
|
// */
|
|
// matchCondition(option, ...args) {
|
|
// return super.matchCondition(option, ...args) && option.category === this.category;
|
|
// }
|
|
|
|
// _defineOverlayConfig() {
|
|
// // temp
|
|
// return { ...super._defineOverlayConfig(), hidesOnOutsideClick: false };
|
|
// }
|
|
|
|
__handleCategory(ev) {
|
|
this.category = ev.target.getAttribute('data-category');
|
|
}
|
|
|
|
// TODO: overrides below are not safe for override and should be made configurable in Combobox
|
|
// basically it should be possible te create a combobox without an overlay
|
|
|
|
/**
|
|
* @override
|
|
*/
|
|
_textboxOnKeydown() {
|
|
// if (ev.key === 'Tab') {
|
|
// this.opened = false;
|
|
// }
|
|
this.__hasSelection = this._inputNode.value.length !== this._inputNode.selectionStart;
|
|
}
|
|
|
|
/**
|
|
* @enhance OverlayMixin
|
|
*/
|
|
_setupOpenCloseListeners() {
|
|
super._setupOpenCloseListeners();
|
|
this.__toggleOverlay = this.__toggleOverlay.bind(this);
|
|
this._overlayInvokerNode.addEventListener('click', this.__toggleOverlay);
|
|
}
|
|
|
|
__toggleOverlay() {
|
|
this.opened = !this.opened;
|
|
}
|
|
|
|
/**
|
|
* @enhance OverlayMixin
|
|
*/
|
|
_teardownOpenCloseListeners() {
|
|
super._teardownOpenCloseListeners();
|
|
this._overlayInvokerNode.removeEventListener('click', this.__toggleOverlay);
|
|
}
|
|
}
|
|
customElements.define('gh-combobox', GhCombobox);
|