@emuanalytics/flow-rdf-ui 4.1.0-preview.10 → 4.1.0-preview.11

package/dist/components/dialog/dialog.styles.mjs

@@ -6,9 +6,9 @@ const styles = css`
 
   :host {
     --width: 31rem;
-    --header-spacing: var(--flow-ui-spacing-medium);
-    --body-spacing: var(--flow-ui-spacing-medium);
-    --footer-spacing: var(--flow-ui-spacing-medium);
+    --header-spacing: var(--flow-ui-spacing-large);
+    --body-spacing: var(--flow-ui-spacing-large);
+    --footer-spacing: var(--flow-ui-spacing-large);
 
     display: contents;
   }
@@ -18,6 +18,14 @@ const styles = css`
     --body-spacing: 0 var(--flow-ui-spacing-x-large);
   }
 
+  ::slotted(:nth-child(1 of :not([slot]))) {
+    margin-top: 0;
+  }
+
+  ::slotted(:nth-last-child(1 of :not([slot]))) {
+    margin-bottom: 0;
+  }
+
   .dialog {
     display: flex;
     align-items: center;
@@ -92,7 +100,7 @@ const styles = css`
   .dialog__body {
     flex: 1 1 auto;
     display: block;
-    padding: var(--body-spacing);
+    padding-inline: var(--body-spacing);
     overflow: auto;
     -webkit-overflow-scrolling: touch;
   }
@@ -104,7 +112,7 @@ const styles = css`
   }
 
   .dialog__footer ::slotted(flow-ui-button:not(:first-of-type)) {
-    margin-inline-start: var(--flow-ui-spacing-x-small);
+    margin-inline-start: var(--flow-ui-spacing-small);
   }
 
   .dialog:not(.dialog--has-footer) .dialog__footer {

package/dist/components/icon/library.system.mjs

@@ -143,7 +143,8 @@ const icons = {
   plus: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="flow-ui-icon"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32v144H48c-17.7 0-32 14.3-32 32s14.3 32 32 32h144v144c0 17.7 14.3 32 32 32s32-14.3 32-32V288h144c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>',
   "square-plus": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="flow-ui-icon"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm136 312v-64h-64c-13.3 0-24-10.7-24-24s10.7-24 24-24h64v-64c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24h-64v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z"/></svg>',
   "square-minus": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="flow-ui-icon"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm88 200h144c13.3 0 24 10.7 24 24s-10.7 24-24 24H152c-13.3 0-24-10.7-24-24s10.7-24 24-24z"/></svg>',
-  "ellipsis-vertical": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 512' class='flow-ui-icon'><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d='M64 360a56 56 0 100 112 56 56 0 100-112zm0-160a56 56 0 100 112 56 56 0 100-112zm56-104A56 56 0 108 96a56 56 0 10112 0z'/></svg>"
+  "ellipsis-vertical": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 512' class='flow-ui-icon'><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d='M64 360a56 56 0 100 112 56 56 0 100-112zm0-160a56 56 0 100 112 56 56 0 100-112zm56-104A56 56 0 108 96a56 56 0 10112 0z'/></svg>",
+  bars: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' class='flow-ui-icon'><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d='M0 96c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zm0 160c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zm448 160c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h384c17.7 0 32 14.3 32 32z'/></svg>"
 };
 const systemLibrary = {
   name: "system",

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

@@ -0,0 +1,101 @@
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import styles from './list.styles.mjs';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class FlowUiList extends FlowRdfElement {
+  constructor() {
+    super();
+    this.draggedItem = null;
+    this.draggedOverItem = null;
+    this.readonly = false;
+    this.reorder = false;
+    this.removable = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  get listItems() {
+    return [...this.querySelectorAll("flow-ui-list-item")];
+  }
+  handleDragStart(ev) {
+    this.draggedItem = ev.target;
+    console.log(`parent drag start: ${this.draggedItem.value}`, this.draggedItem);
+  }
+  handleDragOver(ev) {
+    ev.stopPropagation();
+    if (!this.draggedItem) {
+      return;
+    }
+    let target = ev.target.closest("flow-ui-list-item");
+    if (target === this.draggedItem) {
+      target = null;
+    }
+    if (target && target !== this.draggedOverItem) {
+      if (this.draggedItem === target.previousElementSibling) {
+        console.log("moving down");
+        this.insertBefore(this.draggedItem, target.nextSibling);
+      } else if (this.draggedItem === target.nextElementSibling) {
+        this.insertBefore(this.draggedItem, target);
+      }
+      this.draggedOverItem = null;
+    } else {
+      this.draggedOverItem = target;
+    }
+  }
+  handleDrop(_ev) {
+    if (!this.draggedItem || !this.draggedOverItem) {
+      return;
+    }
+    console.log(`parent drop: ${this.draggedItem.value} onto target: ${this.draggedOverItem.value}`);
+  }
+  handleDragEnd(ev) {
+    const target = ev.target.value;
+    console.log(`parent drag end: target: ${target}`);
+    this.draggedItem = null;
+    this.draggedOverItem = null;
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      list: true
+    })}
+        @flow-ui-drag-start=${this.handleDragStart}
+        @flow-ui-drag-over=${this.handleDragOver}
+        @flow-ui-drag-drop=${this.handleDrop}
+        @flow-ui-drag-end=${this.handleDragEnd}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+FlowUiList.styles = styles;
+__decorateClass([
+  property({ type: Boolean })
+], FlowUiList.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean })
+], FlowUiList.prototype, "reorder", 2);
+__decorateClass([
+  property({ type: Boolean })
+], FlowUiList.prototype, "removable", 2);
+
+export { FlowUiList as default };

package/dist/components/list/list.mjs

@@ -0,0 +1,5 @@
+import FlowUiList from './list.component.mjs';
+
+
+
+export { FlowUiList as default };

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

@@ -0,0 +1,21 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: block;
+
+    --divider-color: var(--flow-ui-divider-color);
+  }
+
+  .list {
+    display: flex;
+    flex-direction: column;
+    gap: max(var(--flow-ui-divider-width), 2px);
+    background-color: var(--divider-color);
+  }
+`;
+
+export { styles as default };

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

@@ -0,0 +1,197 @@
+import { html, nothing } from 'lit';
+import { 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 styles from './list-item.styles.mjs';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class FlowUiListItem extends FlowRdfElement {
+  constructor() {
+    super();
+    this.hasSlotController = new HasSlotController(this, "prefix", "suffix", "menu");
+    this.readonly = false;
+    this.reorder = false;
+    this.removable = false;
+    this.handleDragStart = (ev) => {
+      ev.stopPropagation();
+      ev.dataTransfer.setData("application/flow-ui-list-item", this.value);
+      ev.dataTransfer.effectAllowed = "move";
+      this.emit("flow-ui-drag-start");
+    };
+    this.handleDragStart = this.handleDragStart.bind(this);
+    this.handleDragOver = this.handleDragOver.bind(this);
+    this.handleDrop = this.handleDrop.bind(this);
+    this.handleDragEnd = this.handleDragEnd.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);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("dragover", this.handleDragOver);
+    this.removeEventListener("drop", this.handleDrop);
+  }
+  rename() {
+    this.input.focus();
+  }
+  handleMenuSelect(ev) {
+    const menuItem = ev.detail.item;
+    if (menuItem.value === "rename") {
+      this.updateComplete.then(() => this.rename());
+    } else if (menuItem.value === "remove") {
+      const requestRemove = this.emit("flow-ui-remove", { cancelable: true });
+      if (!requestRemove.defaultPrevented) {
+        this.remove();
+      }
+    }
+  }
+  handleInputEvents(ev) {
+    if (ev.type === "flow-ui-change") {
+      this.label = this.input.value;
+      this.input.blur();
+    } else {
+      ev.stopPropagation();
+    }
+  }
+  handleReorderPointerDown(_ev) {
+    this.addEventListener("dragstart", this.handleDragStart);
+    console.log("adding dragstart");
+    this.addEventListener("dragend", this.handleDragEnd);
+    this.setAttribute("draggable", "true");
+  }
+  handleReorderPointerUp(_ev) {
+    this.removeEventListener("dragstart", this.handleDragStart);
+    console.log("removing dragstart");
+    this.removeEventListener("dragend", this.handleDragEnd);
+    this.removeAttribute("draggable");
+  }
+  handleDragOver(ev) {
+    ev.stopPropagation();
+    ev.preventDefault();
+    if (ev.dataTransfer?.types.includes("application/flow-ui-list-item")) {
+      ev.dataTransfer.dropEffect = "move";
+      this.emit("flow-ui-drag-over");
+    }
+  }
+  handleDragEnd(ev) {
+    ev.stopPropagation();
+    this.removeEventListener("dragstart", this.handleDragStart);
+    console.log("removing dragstart");
+    this.removeEventListener("dragend", this.handleDragEnd);
+    this.removeAttribute("draggable");
+    this.emit("flow-ui-drag-end");
+  }
+  handleDrop(ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    this.emit("flow-ui-drag-drop");
+  }
+  renderMenu() {
+    const hasCustomMenuDivider = (!this.readonly || this.removable) && this.hasSlotController.test("menu");
+    return html`
+      <flow-ui-dropdown placement="bottom-end" class="list-item__menu-dropdown">
+        <flow-ui-icon-button
+          part="menu-button"
+          class="list-item__menu-button"
+          slot="trigger"
+          name="ellipsis-vertical"
+          library="system"
+        ></flow-ui-icon-button>
+        <flow-ui-menu @flow-ui-select=${this.handleMenuSelect}>
+          ${!this.readonly ? html`
+                <flow-ui-menu-item value="rename">Rename</flow-ui-menu-item>
+              ` : nothing}
+          ${this.removable ? html`
+                <flow-ui-menu-item value="remove">Delete</flow-ui-menu-item>
+              ` : nothing}
+          ${hasCustomMenuDivider ? html`
+                <flow-ui-divider></flow-ui-divider>
+              ` : nothing}
+          ${this.hasSlotController.test("menu") ? html`
+                <slot name="menu"></slot>
+              ` : nothing}
+        </flow-ui-menu>
+        <slot name="menu"></slot>
+      </flow-ui-dropdown>
+    `;
+  }
+  render() {
+    const hasMenu = this.readonly || this.removable || this.hasSlotController.test("menu");
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      "list-item": true,
+      "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
+    })}
+      >
+        ${this.reorder ? html`
+              <flow-ui-icon
+                part="reorder-icon"
+                name="bars"
+                library="system"
+                class="list-item__reorder-icon"
+                @pointerdown=${this.handleReorderPointerDown}
+                @pointerup=${this.handleReorderPointerUp}
+              ></flow-ui-icon>
+            ` : nothing}
+        <slot name="prefix" part="prefix" class="list-item__prefix"></slot>
+
+        <flow-ui-input
+          exportparts="input"
+          inline
+          class="list-item__input"
+          .value=${this.label}
+          .readonly=${this.readonly}
+          @flow-ui-change=${this.handleInputEvents}
+          @flow-ui-input=${this.handleInputEvents}
+        ></flow-ui-input>
+        <div class="list-item__spacer"></div>
+        <slot name="suffix" part="suffix" class="list-item__suffix"></slot>
+
+        ${hasMenu ? this.renderMenu() : nothing}
+      </div>
+    `;
+  }
+}
+FlowUiListItem.styles = styles;
+__decorateClass([
+  query(".list-item__input")
+], FlowUiListItem.prototype, "input", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiListItem.prototype, "label", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiListItem.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiListItem.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiListItem.prototype, "reorder", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiListItem.prototype, "removable", 2);
+
+export { FlowUiListItem as default };

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

@@ -0,0 +1,5 @@
+import FlowUiListItem from './list-item.component.mjs';
+
+
+
+export { FlowUiListItem as default };

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

@@ -0,0 +1,63 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: block;
+    --padding: var(--flow-ui-list-item-padding);
+    --height: var(--flow-ui-list-item-height);
+    --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);
+  }
+
+  :host([draggable='true']) {
+    opacity: 0.1;
+  }
+
+  .list-item {
+    display: flex;
+    align-items: center;
+    gap: var(--flow-ui-spacing-small);
+
+    height: var(--height);
+    padding: var(--padding);
+
+    color: var(--color);
+    background-color: var(--background-color);
+    user-select: none;
+  }
+
+  .list-item__prefix,
+  .list-item__suffix,
+  .list-item__menu-button,
+  .list-item__reorder-icon {
+    color: var(--accessory-color);
+  }
+
+  .list-item__spacer {
+    flex: 1;
+  }
+
+  .list-item.list-item--readonly .list-item__input::part(form-control) {
+    --control-background-color-hover: transparent;
+    --control-border-color-hover: transparent;
+    --control-background-color-focus: transparent;
+  }
+
+  .list-item__menu-button {
+    visibility: hidden;
+  }
+
+  .list-item:hover .list-item__menu-button {
+    visibility: visible;
+  }
+
+  .list-item__reorder-icon {
+    cursor: move;
+  }
+`;
+
+export { styles as default };

package/dist/components/query-builder/query-builder.component.mjs

@@ -118,11 +118,14 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
    */
   handleRemoveRule(ev, index) {
     ev.stopPropagation();
-    this._value.rules.splice(index, 1);
-    this.requestUpdate();
-    this.updateComplete.then(() => {
-      this.emitValueChange();
-    });
+    const confirmDelete = this.emit("flow-ui-remove", { cancelable: true });
+    if (!confirmDelete.defaultPrevented) {
+      this._value.rules.splice(index, 1);
+      this.requestUpdate();
+      this.updateComplete.then(() => {
+        this.emitValueChange();
+      });
+    }
   }
   handleSubQueryValueChange(ev) {
     ev.stopPropagation();
@@ -160,9 +163,12 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
       const duplicateRule = cloneDeep(rule);
       this._value.rules.splice(index, 0, duplicateRule);
     } else if (menuItem.value === "delete") {
-      this._value.rules.splice(index, 1);
-      if (this._value.rules.length === 0) {
-        this._value.rules.push({ field: "", operator: "=", enabled: true });
+      const confirmDelete = this.emit("flow-ui-remove", { cancelable: true });
+      if (!confirmDelete.defaultPrevented) {
+        this._value.rules.splice(index, 1);
+        if (this._value.rules.length === 0) {
+          this._value.rules.push({ field: "", operator: "=", enabled: true });
+        }
       }
     }
     this.requestUpdate();
@@ -185,6 +191,7 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
     } else if (menuItem.value === "clear-filters") {
       updateValue = true;
       this._value = emptyRuleSet;
+      this.emit("flow-ui-clear");
     }
     if (updateValue) {
       this.requestUpdate();
@@ -249,6 +256,10 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
             library="system"
           ></flow-ui-icon-button>
           <flow-ui-menu @flow-ui-select=${(ev) => this.handleToolbarMenuSelect(ev)}>
+            ${this.hasSlotController.test("menu") ? html`
+                  <slot name="menu"></slot>
+                  <flow-ui-divider></flow-ui-divider>
+                ` : nothing}
             <flow-ui-menu-item value="add-group">Add Filter Group</flow-ui-menu-item>
             ${this.subQueryBuilder ? html`
                   <flow-ui-divider></flow-ui-divider>
@@ -256,10 +267,6 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
                     Delete Filter Group
                   </flow-ui-menu-item>
                 ` : nothing}
-            ${this.hasSlotController.test("menu") ? html`
-                  <flow-ui-divider></flow-ui-divider>
-                  <slot name="menu"></slot>
-                ` : nothing}
             ${this.subQueryBuilder ? nothing : html`
                   <flow-ui-divider></flow-ui-divider>
                   <flow-ui-menu-item value="clear-filters" class="menu-item--danger">Clear Filters</flow-ui-menu-item>