@emuanalytics/flow-rdf-ui 4.1.0-preview.21 → 4.1.0-preview.23

package/dist/components/list/list.component.mjs

@@ -1,7 +1,9 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { boolean } from '../../internal/boolean.mjs';
 import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import { watch } from '../../internal/watch.mjs';
 import styles from './list.styles.mjs';
 
 var __defProp = Object.defineProperty;
@@ -20,12 +22,17 @@ class FlowUiList extends FlowRdfElement {
     super();
     this.draggedItem = null;
     this.draggedOverItem = null;
-    this.readonly = false;
+    this.selectable = false;
+    this.editable = false;
     this.reorder = false;
     this.removable = false;
   }
   connectedCallback() {
     super.connectedCallback();
+    this.editable = boolean(this.editable, true);
+    this.reorder = boolean(this.reorder, true);
+    this.removable = boolean(this.removable, true);
+    this.selectable = boolean(this.selectable, true);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -33,6 +40,83 @@ class FlowUiList extends FlowRdfElement {
   get listItems() {
     return [...this.querySelectorAll("flow-ui-list-item")];
   }
+  handleStyleChange() {
+    this.syncItems();
+  }
+  handleValueChange() {
+    if (this.hasUpdated) {
+      this.updateCheckedItem();
+    }
+  }
+  handleItemClick(event) {
+    if (!this.selectable) {
+      return;
+    }
+    const target = event.target.closest("flow-ui-list-item");
+    const items = this.listItems;
+    const oldValue = this.value;
+    if (target.disabled) {
+      return;
+    }
+    this.value = target.value;
+    items.forEach((item) => item.checked = item === target);
+    if (this.value !== oldValue) {
+      this.emit("flow-ui-change");
+      this.emit("flow-ui-input");
+    }
+  }
+  handleKeyDown(event) {
+    if (!this.selectable) {
+      return;
+    }
+    if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "].includes(event.key)) {
+      return;
+    }
+    const items = this.listItems.filter((item) => !item.disabled);
+    const checkedItem = items.find((item) => item.checked) ?? items[0];
+    const incr = event.key === " " ? 0 : ["ArrowUp", "ArrowLeft"].includes(event.key) ? -1 : 1;
+    const oldValue = this.value;
+    let index = items.indexOf(checkedItem) + incr;
+    if (index < 0) {
+      index = items.length - 1;
+    }
+    if (index > items.length - 1) {
+      index = 0;
+    }
+    this.listItems.forEach((item) => {
+      item.checked = false;
+      item.tabIndex = -1;
+    });
+    this.value = items[index].value;
+    items[index].checked = true;
+    items[index].tabIndex = 0;
+    items[index].focus();
+    if (this.value !== oldValue) {
+      this.emit("flow-ui-change");
+      this.emit("flow-ui-input");
+    }
+    event.preventDefault();
+  }
+  syncItems() {
+    if (customElements.get("flow-ui-list-item")) {
+      const items = this.listItems;
+      items.forEach((item) => {
+        item.checked = item.value === this.value;
+        item.removable = this.removable;
+        item.editable = this.editable;
+        item.reorder = this.reorder;
+      });
+      if (!items.some((item) => item.checked)) {
+        items[0].tabIndex = 0;
+      }
+    } else {
+      customElements.whenDefined("flow-ui-list-item").then(() => this.syncItems());
+    }
+  }
+  updateCheckedItem() {
+    const items = this.listItems;
+    items.forEach((item) => item.checked = item.value === this.value);
+  }
   handleDragStart(ev) {
     this.draggedItem = ev.target;
     console.log(`parent drag start: ${this.draggedItem.value}`, this.draggedItem);
@@ -71,6 +155,9 @@ class FlowUiList extends FlowRdfElement {
     this.draggedOverItem = null;
   }
   render() {
+    const defaultSlot = html`
+      <slot @click=${this.handleItemClick} @keydown=${this.handleKeyDown} @slotchange=${this.syncItems}></slot>
+    `;
     return html`
       <div
         part="base"
@@ -82,20 +169,32 @@ class FlowUiList extends FlowRdfElement {
         @flow-ui-drag-drop=${this.handleDrop}
         @flow-ui-drag-end=${this.handleDragEnd}
       >
-        <slot></slot>
+        ${defaultSlot}
       </div>
     `;
   }
 }
 FlowUiList.styles = styles;
+__decorateClass([
+  property({ reflect: true })
+], FlowUiList.prototype, "value", 2);
 __decorateClass([
   property({ type: Boolean })
-], FlowUiList.prototype, "readonly", 2);
+], FlowUiList.prototype, "selectable", 2);
+__decorateClass([
+  property({ type: Boolean })
+], FlowUiList.prototype, "editable", 2);
 __decorateClass([
   property({ type: Boolean })
 ], FlowUiList.prototype, "reorder", 2);
 __decorateClass([
   property({ type: Boolean })
 ], FlowUiList.prototype, "removable", 2);
+__decorateClass([
+  watch(["reorder", "editable", "removable", "selectable"], { waitUntilFirstUpdate: true })
+], FlowUiList.prototype, "handleStyleChange", 1);
+__decorateClass([
+  watch("value")
+], FlowUiList.prototype, "handleValueChange", 1);
 
 export { FlowUiList as default };

package/dist/components/list/list.styles.mjs

@@ -7,7 +7,7 @@ const styles = css`
   :host {
     display: block;
 
-    --divider-color: var(--flow-ui-divider-color);
+    --divider-color: var(--flow-ui-list-item-divider-color);
   }
 
   .list {

package/dist/components/list-item/list-item.component.mjs

@@ -1,9 +1,10 @@
 import { html, nothing } from 'lit';
-import { query, property } from 'lit/decorators.js';
+import { state, query, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { boolean } from '../../internal/boolean.mjs';
 import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
 import { HasSlotController } from '../../internal/slot.mjs';
+import { watch } from '../../internal/watch.mjs';
 import styles from './list-item.styles.mjs';
 
 var __defProp = Object.defineProperty;
@@ -21,9 +22,12 @@ class FlowUiListItem extends FlowRdfElement {
   constructor() {
     super();
     this.hasSlotController = new HasSlotController(this, "prefix", "suffix", "menu");
-    this.readonly = false;
+    this.hasFocus = false;
+    this.checked = false;
+    this.editable = false;
     this.reorder = false;
     this.removable = false;
+    this.disabled = false;
     this.handleDragStart = (ev) => {
       ev.stopPropagation();
       ev.dataTransfer.setData("application/flow-ui-list-item", this.value);
@@ -34,23 +38,50 @@ class FlowUiListItem extends FlowRdfElement {
     this.handleDragOver = this.handleDragOver.bind(this);
     this.handleDrop = this.handleDrop.bind(this);
     this.handleDragEnd = this.handleDragEnd.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
   }
   connectedCallback() {
     super.connectedCallback();
-    this.readonly = boolean(this.readonly);
-    this.reorder = boolean(this.reorder);
-    this.removable = boolean(this.removable);
-    this.addEventListener("dragover", this.handleDragOver);
-    this.addEventListener("drop", this.handleDrop);
+    this.editable = boolean(this.editable, true);
+    this.reorder = boolean(this.reorder, true);
+    this.removable = boolean(this.removable, true);
+    this.checked = boolean(this.checked, true);
+    this.disabled = boolean(this.disabled, true);
+    this.setAttribute("tabindex", "-1");
+    this.addEventListeners();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener("dragover", this.handleDragOver);
-    this.removeEventListener("drop", this.handleDrop);
+    this.removeEventListeners();
   }
   rename() {
     this.input.focus();
   }
+  handleCheckedChange() {
+    this.setAttribute("aria-checked", this.checked ? "true" : "false");
+    this.setAttribute("tabindex", this.checked ? "0" : "-1");
+  }
+  addEventListeners() {
+    this.addEventListener("blur", this.handleBlur);
+    this.addEventListener("focus", this.handleFocus);
+    this.addEventListener("dragover", this.handleDragOver);
+    this.addEventListener("drop", this.handleDrop);
+  }
+  removeEventListeners() {
+    this.removeEventListener("blur", this.handleBlur);
+    this.removeEventListener("focus", this.handleFocus);
+    this.removeEventListener("dragover", this.handleDragOver);
+    this.removeEventListener("drop", this.handleDrop);
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("flow-ui-blur");
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("flow-ui-focus");
+  }
   handleMenuSelect(ev) {
     const menuItem = ev.detail.item;
     if (menuItem.value === "rename") {
@@ -104,7 +135,7 @@ class FlowUiListItem extends FlowRdfElement {
     this.emit("flow-ui-drag-drop");
   }
   renderMenu() {
-    const hasCustomMenuDivider = (!this.readonly || this.removable) && this.hasSlotController.test("menu");
+    const hasCustomMenuDivider = (this.editable || this.removable) && this.hasSlotController.test("menu");
     return html`
       <flow-ui-dropdown placement="bottom-end" class="list-item__menu-dropdown">
         <flow-ui-icon-button
@@ -115,7 +146,7 @@ class FlowUiListItem extends FlowRdfElement {
           library="system"
         ></flow-ui-icon-button>
         <flow-ui-menu @flow-ui-select=${this.handleMenuSelect}>
-          ${!this.readonly ? html`
+          ${this.editable ? html`
                 <flow-ui-menu-item value="rename">Rename</flow-ui-menu-item>
               ` : nothing}
           ${this.removable ? html`
@@ -133,16 +164,18 @@ class FlowUiListItem extends FlowRdfElement {
     `;
   }
   render() {
-    const hasMenu = this.readonly || this.removable || this.hasSlotController.test("menu");
+    const hasMenu = this.editable || this.removable || this.hasSlotController.test("menu");
     return html`
       <div
         part="base"
         class=${classMap({
       "list-item": true,
+      "list-item--checked": this.checked,
       "list-item--has-prefix": this.hasSlotController.test("prefix"),
       "list-item--has-suffix": this.hasSlotController.test("suffix"),
       "list-item--has-menu": this.hasSlotController.test("menu"),
-      "list-item--readonly": this.readonly
+      "list-item--editable": this.editable,
+      "list-item--focused": this.hasFocus
     })}
       >
         ${this.reorder ? html`
@@ -162,7 +195,8 @@ class FlowUiListItem extends FlowRdfElement {
           inline
           class="list-item__input"
           .value=${this.label}
-          .readonly=${this.readonly}
+          .readonly=${!this.editable}
+          tabindex=${this.editable ? "0" : "-1"}
           @flow-ui-change=${this.handleInputEvents}
           @flow-ui-input=${this.handleInputEvents}
         ></flow-ui-input>
@@ -175,6 +209,9 @@ class FlowUiListItem extends FlowRdfElement {
   }
 }
 FlowUiListItem.styles = styles;
+__decorateClass([
+  state()
+], FlowUiListItem.prototype, "hasFocus", 2);
 __decorateClass([
   query(".list-item__input")
 ], FlowUiListItem.prototype, "input", 2);
@@ -186,12 +223,21 @@ __decorateClass([
 ], FlowUiListItem.prototype, "value", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], FlowUiListItem.prototype, "readonly", 2);
+], FlowUiListItem.prototype, "checked", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiListItem.prototype, "editable", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], FlowUiListItem.prototype, "reorder", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], FlowUiListItem.prototype, "removable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiListItem.prototype, "disabled", 2);
+__decorateClass([
+  watch("checked")
+], FlowUiListItem.prototype, "handleCheckedChange", 1);
 
 export { FlowUiListItem as default };

package/dist/components/list-item/list-item.styles.mjs

@@ -11,6 +11,15 @@ const styles = css`
     --color: var(--flow-ui-list-item-color);
     --accessory-color: var(--flow-ui-list-item-accessory-color);
     --background-color: var(--flow-ui-list-item-background-color);
+
+    --selection-width: 6px;
+    --selection-color: var(--flow-ui-list-item-selected-color, var(--flow-ui-color-primary-500));
+
+    --background-color-selected: var(--flow-ui-list-item-background-color-selected, var(--flow-ui-color-neutral-500));
+  }
+
+  :host(:focus-visible) {
+    outline: 0px;
   }
 
   :host([draggable='true']) {
@@ -24,12 +33,19 @@ const styles = css`
 
     height: var(--height);
     padding: var(--padding);
+    padding-right: calc(var(--padding) / 2);
+    border-right: calc(var(--padding) / 2) solid transparent;
 
     color: var(--color);
     background-color: var(--background-color);
     user-select: none;
   }
 
+  .list-item--checked {
+    border-right-color: var(--selection-color);
+    background-color: var(--background-color-selected);
+  }
+
   .list-item__prefix,
   .list-item__suffix,
   .list-item__menu-button,
@@ -41,7 +57,7 @@ const styles = css`
     flex: 1;
   }
 
-  .list-item.list-item--readonly .list-item__input::part(form-control) {
+  .list-item:not(.list-item--editable) .list-item__input::part(form-control) {
     --control-background-color-hover: transparent;
     --control-border-color-hover: transparent;
     --control-background-color-focus: transparent;
@@ -58,6 +74,10 @@ const styles = css`
   .list-item__reorder-icon {
     cursor: move;
   }
+
+  .list-item__input {
+    margin-left: calc(var(--padding) * -0.5);
+  }
 `;
 
 export { styles as default };