@api-client/ui 0.4.1 → 0.4.3

package/src/mixins/FileDropMixin.ts

@@ -2,7 +2,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { html, TemplateResult, LitElement } from 'lit'
 import { property } from 'lit/decorators.js'
-import { dedupeMixin } from '@open-wc/dedupe-mixin'
 import '../md/icons/ui-icon.js'
 
 export const dragEnterHandler = Symbol('dragEnterHandler')
@@ -39,126 +38,126 @@ export declare class FileDropMixinInterface {
  *
  * @mixin
  */
-export const FileDropMixin = dedupeMixin(
-  <T extends Constructor<LitElement>>(superClass: T): Constructor<FileDropMixinInterface> & T => {
-    class MyMixinClass extends superClass {
-      @property({ type: Boolean }) accessor dropTargetActive: boolean
+export const FileDropMixin = <T extends Constructor<LitElement>>(
+  superClass: T
+): Constructor<FileDropMixinInterface> & T => {
+  class MyMixinClass extends superClass {
+    @property({ type: Boolean }) accessor dropTargetActive: boolean
+
+    dropTarget: HTMLElement = document.body
+
+    constructor(...args: any[]) {
+      super(...args)
+      this[dragEnterHandler] = this[dragEnterHandler].bind(this)
+      this[dragLeaveHandler] = this[dragLeaveHandler].bind(this)
+      this[dragOverHandler] = this[dragOverHandler].bind(this)
+      this[dropHandler] = this[dropHandler].bind(this)
+
+      this.dropTargetActive = false
+    }
 
-      dropTarget: HTMLElement = document.body
+    override connectedCallback(): void {
+      const { dropTarget } = this
+      dropTarget.addEventListener('dragenter', this[dragEnterHandler])
+      dropTarget.addEventListener('dragleave', this[dragLeaveHandler])
+      dropTarget.addEventListener('dragover', this[dragOverHandler])
+      dropTarget.addEventListener('drop', this[dropHandler])
+      super.connectedCallback()
+    }
 
-      constructor(...args: any[]) {
-        super(...args)
-        this[dragEnterHandler] = this[dragEnterHandler].bind(this)
-        this[dragLeaveHandler] = this[dragLeaveHandler].bind(this)
-        this[dragOverHandler] = this[dragOverHandler].bind(this)
-        this[dropHandler] = this[dropHandler].bind(this)
+    override disconnectedCallback(): void {
+      const { dropTarget } = this
+      dropTarget.removeEventListener('dragenter', this[dragEnterHandler])
+      dropTarget.removeEventListener('dragleave', this[dragLeaveHandler])
+      dropTarget.removeEventListener('dragover', this[dragOverHandler])
+      dropTarget.removeEventListener('drop', this[dropHandler])
+      super.disconnectedCallback()
+    }
 
-        this.dropTargetActive = false
-      }
+    /**
+     * Processes dropped to the page files
+     * @param files The list of dropped files
+     * @abstract This is to be implemented by the platform bindings
+     */
+    async processDroppedFiles(files: FileList): Promise<void> {
+      // ...
+    }
 
-      override connectedCallback(): void {
-        const { dropTarget } = this
-        dropTarget.addEventListener('dragenter', this[dragEnterHandler])
-        dropTarget.addEventListener('dragleave', this[dragLeaveHandler])
-        dropTarget.addEventListener('dragover', this[dragOverHandler])
-        dropTarget.addEventListener('drop', this[dropHandler])
-        super.connectedCallback()
-      }
+    /**
+     * @returns The template for the drop file message
+     */
+    dropTargetTemplate(): TemplateResult {
+      return html`
+        <div class="drop-info">
+          <ui-icon icon="fileDownload" class="drop-icon"></ui-icon>
+          <p class="drop-message">Drop the file here</p>
+        </div>
+      `
+    }
 
-      override disconnectedCallback(): void {
-        const { dropTarget } = this
-        dropTarget.removeEventListener('dragenter', this[dragEnterHandler])
-        dropTarget.removeEventListener('dragleave', this[dragLeaveHandler])
-        dropTarget.removeEventListener('dragover', this[dragOverHandler])
-        dropTarget.removeEventListener('drop', this[dropHandler])
-        super.disconnectedCallback()
+    [dragEnterHandler](e: DragEvent): void {
+      if (!e.dataTransfer) {
+        return
       }
-
-      /**
-       * Processes dropped to the page files
-       * @param files The list of dropped files
-       * @abstract This is to be implemented by the platform bindings
-       */
-      async processDroppedFiles(files: FileList): Promise<void> {
-        // ...
+      if (![...e.dataTransfer.types].includes('Files')) {
+        return
       }
+      e.preventDefault()
+      this.dropTarget.classList.add('drop-target')
+      this.dropTargetActive = true
+      e.dataTransfer.effectAllowed = 'copy'
+    }
 
-      /**
-       * @returns The template for the drop file message
-       */
-      dropTargetTemplate(): TemplateResult {
-        return html`
-          <div class="drop-info">
-            <ui-icon icon="fileDownload" class="drop-icon"></ui-icon>
-            <p class="drop-message">Drop the file here</p>
-          </div>
-        `
+    [dragLeaveHandler](e: DragEvent): void {
+      if (!e.dataTransfer) {
+        return
       }
-
-      [dragEnterHandler](e: DragEvent): void {
-        if (!e.dataTransfer) {
-          return
-        }
-        if (![...e.dataTransfer.types].includes('Files')) {
-          return
-        }
-        e.preventDefault()
-        this.dropTarget.classList.add('drop-target')
-        this.dropTargetActive = true
-        e.dataTransfer.effectAllowed = 'copy'
+      if (![...e.dataTransfer.types].includes('Files')) {
+        return
       }
-
-      [dragLeaveHandler](e: DragEvent): void {
-        if (!e.dataTransfer) {
-          return
-        }
-        if (![...e.dataTransfer.types].includes('Files')) {
-          return
-        }
-        const node = e.target as HTMLElement
-        if (node.nodeType !== Node.ELEMENT_NODE) {
-          return
-        }
-        if (node !== this.dropTarget && !node.classList.contains('drop-info')) {
-          return
-        }
-        e.preventDefault()
-        this.dropTarget.classList.remove('drop-target')
-        this.dropTargetActive = false
+      const node = e.target as HTMLElement
+      if (node.nodeType !== Node.ELEMENT_NODE) {
+        return
+      }
+      if (node !== this.dropTarget && !node.classList.contains('drop-info')) {
+        return
       }
+      e.preventDefault()
+      this.dropTarget.classList.remove('drop-target')
+      this.dropTargetActive = false
+    }
 
-      [dragOverHandler](e: DragEvent): void {
-        if (!e.dataTransfer) {
-          return
-        }
-        if (![...e.dataTransfer.types].includes('Files')) {
-          return
-        }
-        const node = e.target as HTMLElement
-        if (node.nodeType !== Node.ELEMENT_NODE) {
-          return
-        }
-        if (node !== this.dropTarget && !node.classList.contains('drop-info')) {
-          return
-        }
-        e.preventDefault()
-        this.dropTarget.classList.add('drop-target')
-        this.dropTargetActive = true
+    [dragOverHandler](e: DragEvent): void {
+      if (!e.dataTransfer) {
+        return
+      }
+      if (![...e.dataTransfer.types].includes('Files')) {
+        return
+      }
+      const node = e.target as HTMLElement
+      if (node.nodeType !== Node.ELEMENT_NODE) {
+        return
       }
+      if (node !== this.dropTarget && !node.classList.contains('drop-info')) {
+        return
+      }
+      e.preventDefault()
+      this.dropTarget.classList.add('drop-target')
+      this.dropTargetActive = true
+    }
 
-      [dropHandler](e: DragEvent): void {
-        if (!e.dataTransfer) {
-          return
-        }
-        if (![...e.dataTransfer.types].includes('Files')) {
-          return
-        }
-        e.preventDefault()
-        this.dropTarget.classList.remove('drop-target')
-        this.dropTargetActive = false
-        this.processDroppedFiles(e.dataTransfer.files)
+    [dropHandler](e: DragEvent): void {
+      if (!e.dataTransfer) {
+        return
       }
+      if (![...e.dataTransfer.types].includes('Files')) {
+        return
+      }
+      e.preventDefault()
+      this.dropTarget.classList.remove('drop-target')
+      this.dropTargetActive = false
+      this.processDroppedFiles(e.dataTransfer.files)
     }
-    return MyMixinClass as Constructor<FileDropMixinInterface> & T
   }
-)
+  return MyMixinClass as Constructor<FileDropMixinInterface> & T
+}

package/src/mixins/RenderableMixin.ts

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { dedupeMixin } from '@open-wc/dedupe-mixin'
 import { html, TemplateResult, render, nothing } from 'lit'
 import reactive from '../decorators/reactive.js'
 
@@ -65,124 +64,124 @@ export declare class RenderableMixinInterface {
  *
  * @mixin
  */
-export const RenderableMixin = dedupeMixin(
-  <T extends Constructor<any>>(superClass: T): Constructor<RenderableMixinInterface> & T => {
-    class RenderableMixinClass extends superClass {
-      /**
-       * Determines whether the initial render had run and the `firstRender()`
-       * function was called.
-       *
-       * @default false
-       */
-      @reactive() accessor firstRendered = false;
-
-      [renderingValue] = false;
-
-      [hasPendingUpdatePromise] = false;
-
-      [updateResolver]?: (value?: any) => void
-
-      #updateComplete?: Promise<boolean>
-
-      /**
-       * @type A promise resolved when the render finished.
-       */
-      get updateComplete(): Promise<boolean> | undefined {
-        return this.#updateComplete
-      }
+export const RenderableMixin = <T extends Constructor<any>>(
+  superClass: T
+): Constructor<RenderableMixinInterface> & T => {
+  class RenderableMixinClass extends superClass {
+    /**
+     * Determines whether the initial render had run and the `firstRender()`
+     * function was called.
+     *
+     * @default false
+     */
+    @reactive() accessor firstRendered = false;
+
+    [renderingValue] = false;
+
+    [hasPendingUpdatePromise] = false;
+
+    [updateResolver]?: (value?: any) => void
+
+    #updateComplete?: Promise<boolean>
+
+    /**
+     * @type A promise resolved when the render finished.
+     */
+    get updateComplete(): Promise<boolean> | undefined {
+      return this.#updateComplete
+    }
 
-      /**
-       * True when rendering debouncer is running.
-       */
-      get rendering(): boolean {
-        return this[renderingValue]
-      }
+    /**
+     * True when rendering debouncer is running.
+     */
+    get rendering(): boolean {
+      return this[renderingValue]
+    }
 
-      constructor(...args: any[]) {
-        super(...args)
-        this[setUpdatePromise]()
-      }
+    constructor(...args: any[]) {
+      super(...args)
+      this[setUpdatePromise]()
+    }
 
-      /**
-       * Helper function to be overridden by child classes. It is called when the view
-       * is rendered for the first time.
-       */
-      firstRender(): void {
-        //
-      }
+    /**
+     * Helper function to be overridden by child classes. It is called when the view
+     * is rendered for the first time.
+     */
+    firstRender(): void {
+      //
+    }
 
-      /**
-       * A function called when the template has been rendered
-       */
-      updated(): void {
-        //
-      }
+    /**
+     * A function called when the template has been rendered
+     */
+    updated(): void {
+      //
+    }
 
-      /**
-       * This to be used by the child classes to render page template.
-       * @returns Application page template
-       */
-      pageTemplate(): TemplateResult | typeof nothing {
-        return html``
-      }
+    /**
+     * This to be used by the child classes to render page template.
+     * @returns Application page template
+     */
+    pageTemplate(): TemplateResult | typeof nothing {
+      return html``
+    }
 
-      /**
-       * The main render function. Sub classes should not override this method.
-       * Override `[renderPage]()` instead.
-       *
-       * The function calls `[renderPage]()` in a micro task so it is safe to call this
-       * multiple time in the same event loop.
-       */
-      render(): void {
-        if (this.rendering) {
-          return
-        }
-        this[renderingValue] = true
-        if (!this[hasPendingUpdatePromise]) {
-          this[setUpdatePromise]()
-        }
-        requestAnimationFrame(() => {
-          this[renderingValue] = false
-          this[renderPage]()
-        })
+    /**
+     * The main render function. Sub classes should not override this method.
+     * Override `[renderPage]()` instead.
+     *
+     * The function calls `[renderPage]()` in a micro task so it is safe to call this
+     * multiple time in the same event loop.
+     */
+    render(): void {
+      if (this.rendering) {
+        return
       }
-
-      [renderPage](): void {
-        const root = document.querySelector('#app') as HTMLElement
-        if (!root) {
-          // eslint-disable-next-line no-console
-          console.warn(`The <div id="app"></div> is not in the document.`)
-          return
-        }
-        if (!this.firstRendered) {
-          this.firstRendered = true
-          // cleanup any pre-existing content.
-          Array.from(root.childNodes).forEach((node) => node.parentNode?.removeChild(node))
-          setTimeout(() => this.firstRender())
-        }
-        render(this.pageTemplate(), root, { host: this })
-        this[resolveUpdatePromise]()
-        this.updated()
+      this[renderingValue] = true
+      if (!this[hasPendingUpdatePromise]) {
+        this[setUpdatePromise]()
       }
+      requestAnimationFrame(() => {
+        this[renderingValue] = false
+        this[renderPage]()
+      })
+    }
 
-      [setUpdatePromise](): void {
-        this.#updateComplete = new Promise((resolve) => {
-          this[updateResolver] = resolve
-          this[hasPendingUpdatePromise] = true
-        })
+    [renderPage](): void {
+      const root = document.querySelector('#app') as HTMLElement
+      if (!root) {
+        // eslint-disable-next-line no-console
+        console.warn(`The <div id="app"></div> is not in the document.`)
+        return
+      }
+      if (!this.firstRendered) {
+        this.firstRendered = true
+        // cleanup any pre-existing content.
+        Array.from(root.childNodes).forEach((node) => node.parentNode?.removeChild(node))
+        setTimeout(() => this.firstRender())
       }
+      render(this.pageTemplate(), root, { host: this })
+      this[resolveUpdatePromise]()
+      this.updated()
+    }
+
+    [setUpdatePromise](): void {
+      this.#updateComplete = new Promise((resolve) => {
+        this[updateResolver] = resolve
+        this[hasPendingUpdatePromise] = true
+      })
+    }
 
-      [resolveUpdatePromise](): void {
-        if (!this[hasPendingUpdatePromise]) {
-          return
-        }
-        this[hasPendingUpdatePromise] = false
-        const resolver = this[updateResolver]
-        if (resolver) {
-          resolver()
-        }
+    [resolveUpdatePromise](): void {
+      if (!this[hasPendingUpdatePromise]) {
+        return
+      }
+      this[hasPendingUpdatePromise] = false
+      const resolver = this[updateResolver]
+      if (resolver) {
+        resolver()
       }
     }
-    return RenderableMixinClass as Constructor<RenderableMixinInterface> & T
   }
-)
+  return RenderableMixinClass as Constructor<RenderableMixinInterface> & T
+}