@knowark/componarkjs 1.7.3

package/lib/components/droparea/components/droparea.test.js

@@ -0,0 +1,320 @@
+import { jest } from '@jest/globals'
+import './droparea.js'
+
+describe('Droparea', () => {
+  const createBubbledEvent = (type, props = {}) => {
+    const event = new Event(type, {
+      bubbles: true,
+    })
+    Object.assign(event, props)
+    return event
+  }
+
+  global.URL.createObjectURL = jest.fn()
+
+  let container = null
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    container.remove()
+    container = null
+  })
+
+  it('can be instantiated', () => {
+    container.innerHTML = /* html */ `
+            <ark-droparea></ark-droparea>
+        `
+
+    const droparea = container.querySelector('ark-droparea')
+    expect(droparea).toBe(droparea.init())
+  })
+
+  it('drag files to zone highlights the drop area', () => {
+    container.innerHTML = /* html */ `
+            <ark-droparea></ark-droparea>
+        `
+
+    const droparea = container.querySelector('ark-droparea')
+    const dropZone = droparea.dropZone
+    const dragNode = dropZone
+
+    dragNode.dispatchEvent(
+      createBubbledEvent('dragover', {
+        clientX: 0,
+        clientY: 1,
+      })
+    )
+    expect(dropZone.classList['1']).toBe('highlight')
+  })
+
+  it('drag files outside the zone unhighlight the drop area', () => {
+    container.innerHTML = /* html */ `
+            <ark-droparea></ark-droparea>
+        `
+
+    const droparea = container.querySelector('ark-droparea')
+    const dropZone = droparea.dropZone
+
+    dropZone.dispatchEvent(
+      createBubbledEvent('dragleave', {
+        clientX: 0,
+        clientY: 1,
+      })
+    )
+    expect(dropZone.classList.length).toBe(1)
+  })
+
+  it('Allows dropping multiple files to the component', () => {
+    container.innerHTML = /* html */ `
+            <ark-droparea></ark-droparea>
+        `
+
+    const droparea = container.querySelector('ark-droparea')
+    const dropZone = droparea.querySelector('.ark-droparea__form')
+    const myFile = new File(['image'], 'Doggy.png', {
+      type: 'image/png',
+    })
+    const myFile2 = new File(['image'], 'Scooby.png', {
+      type: 'image/png',
+    })
+    const dropEvent = createBubbledEvent('drop', {
+      clientX: 0,
+      clientY: 1,
+      dataTransfer: {
+        files: [myFile, myFile2],
+      },
+    })
+
+    dropZone.dispatchEvent(dropEvent)
+    expect(droparea.fileList[0].name).toEqual(myFile.name)
+    expect(droparea.fileList[1].name).toEqual(myFile2.name)
+  })
+
+  it('Can recieve a single file', () => {
+    container.innerHTML = /* html */ `
+            <ark-droparea single></ark-droparea>
+        `
+
+    const droparea = container.querySelector('ark-droparea')
+    const dropZone = droparea.querySelector('.ark-droparea__form')
+    const myFile = new File(['image'], 'Snoopy.png', {
+      type: 'image/png',
+    })
+    const myFile2 = new File(['image'], 'Scooby.png', {
+      type: 'image/png',
+    })
+
+    const dropEvent = createBubbledEvent('drop', {
+      clientX: 0,
+      clientY: 1,
+      dataTransfer: {
+        files: [myFile, myFile2],
+      },
+    })
+
+    dropZone.dispatchEvent(dropEvent)
+    expect(droparea.fileList.length).toBe(1)
+    expect(droparea.fileList[1]).toBeFalsy()
+  })
+
+  it('Returns the file list as object URL', () => {
+    container.innerHTML = /* html */ `
+            <ark-droparea></ark-droparea>
+        `
+
+    const droparea = container.querySelector('ark-droparea')
+    const dropZone = droparea.querySelector('.ark-droparea__form')
+    const myFile = new File(['image'], 'Snoopy.png', {
+      type: 'image/png',
+    })
+    const myFile2 = new File(['image'], 'Scooby.png', {
+      type: 'image/png',
+    })
+
+    const dropEvent = createBubbledEvent('drop', {
+      clientX: 0,
+      clientY: 1,
+      dataTransfer: {
+        files: [myFile, myFile2],
+      },
+    })
+
+    dropZone.dispatchEvent(dropEvent)
+    expect(droparea.fileList.length).toEqual(2)
+  })
+
+  it('Returns a media list of file metadata objects', () => {
+    container.innerHTML = /* html */ `
+            <ark-droparea></ark-droparea>
+        `
+
+    const droparea = container.querySelector('ark-droparea')
+    const dropZone = droparea.querySelector('.ark-droparea__form')
+    const myFile = new File(['image'], 'Snoopy.png', {
+      type: 'image/png',
+    })
+    const myFile2 = new File(['image'], 'Scooby.png', {
+      type: 'image/png',
+    })
+
+    const dropEvent = createBubbledEvent('drop', {
+      clientX: 0,
+      clientY: 1,
+      dataTransfer: {
+        files: [myFile, myFile2],
+      },
+    })
+
+    dropZone.dispatchEvent(dropEvent)
+    expect(droparea.mediaList.length).toEqual(2)
+    expect(droparea.mediaList).toEqual([
+      {
+        name: 'Snoopy.png',
+        size: 5,
+        type: 'image/png',
+        url: undefined,
+      },
+      {
+        name: 'Scooby.png',
+        size: 5,
+        type: 'image/png',
+        url: undefined,
+      },
+    ])
+  })
+
+  it('Can select files from input', () => {
+    container.innerHTML = /* html */ `
+            <ark-droparea></ark-droparea>
+        `
+
+    const droparea = container.querySelector('ark-droparea')
+    const dropOpen = droparea.querySelector('.ark-droparea__open')
+    const input = droparea.querySelector('.ark-droparea__input')
+    const myFile = new File(['image'], 'Snoopy.png', {
+      type: 'image/png',
+    })
+    const changeEvent = createBubbledEvent('change', {})
+    Object.defineProperty(changeEvent, 'target', {
+      value: {
+        files: [myFile],
+      },
+    })
+    dropOpen.click()
+    input.dispatchEvent(changeEvent)
+    expect(droparea.fileList.length).toBeTruthy()
+  })
+
+  it('Can limit the file formats that component recieves', () => {
+    container.innerHTML = /* html */ `
+            <ark-droparea accept="jpg, png"></ark-droparea>
+        `
+
+    const droparea = container.querySelector('ark-droparea')
+    const input = droparea.querySelector('.ark-droparea__input')
+    const myFile = new File(['image'], 'Snoopy.jpg', {
+      type: 'image/png',
+    })
+    const myFile2 = new File(['image'], 'Scrappy.png', {
+      type: 'image/png',
+    })
+    const changeEvent = createBubbledEvent('change', {})
+    Object.defineProperty(changeEvent, 'target', {
+      value: {
+        files: [myFile, myFile2],
+      },
+    })
+
+    input.dispatchEvent(changeEvent)
+    expect(droparea.fileList.length).toBeTruthy()
+  })
+
+  it("Does not allow dropping a file that doesn't not exist in accept'", () => {
+    container.innerHTML = /* html */ `
+            <ark-droparea accept="jpg, png"></ark-droparea>
+        `
+
+    const droparea = container.querySelector('ark-droparea')
+    const input = droparea.querySelector('.ark-droparea__input')
+    const myFile = new File(['text'], 'Snoopy.txt', {
+      type: 'text/txt',
+    })
+    const changeEvent = createBubbledEvent('change', {})
+    Object.defineProperty(changeEvent, 'target', {
+      value: {
+        files: [myFile],
+      },
+    })
+    input.dispatchEvent(changeEvent)
+    expect(droparea.fileList.length).toBeFalsy()
+  })
+
+  it("General file type values can be specified'", () => {
+    container.innerHTML = /* html */ `
+            <ark-droparea accept="audio, image, video, text">
+            </ark-droparea>
+        `
+
+    const droparea = container.querySelector('ark-droparea')
+    const dropZone = droparea.querySelector('.ark-droparea__form')
+    const myFile = new File(['audio'], 'autechre.mp3', {
+      type: 'audio/mp3',
+    })
+    const myFile2 = new File(['video'], 'cats.mov', {
+      type: 'video/mov',
+    })
+    const myFile3 = new File(['image'], 'snoopy.jpg', {
+      type: 'image/jpg',
+    })
+    const myFile4 = new File(['text'], 'styles.css', {
+      type: 'text/css',
+    })
+
+    const files = [myFile, myFile2, myFile3, myFile4]
+    const dropEvent = createBubbledEvent('drop', {
+      clientX: 0,
+      clientY: 1,
+      dataTransfer: {
+        files: files,
+      },
+    })
+    dropZone.dispatchEvent(dropEvent)
+
+    droparea.fileList.forEach((file, i) => {
+      expect(file.type).toBe(files[i].type)
+    })
+  })
+
+  it('Size of files can be limited', () => {
+    container.innerHTML = /* html */ `
+            <ark-droparea max-size= "2"></ark-droparea>
+        `
+
+    const droparea = container.querySelector('ark-droparea')
+    const dropZone = droparea.querySelector('.ark-droparea__form')
+    const myFile = new File(['image'], 'Doggy.png', {
+      type: 'image/png',
+    })
+    const myFile2 = new File(['image'], 'Scooby.png', {
+      type: 'image/png',
+    })
+    Object.defineProperty(myFile2, 'size', { value: 1024 * 1024 + 1 })
+
+    const dropEvent = createBubbledEvent('drop', {
+      clientX: 0,
+      clientY: 1,
+      dataTransfer: {
+        files: [myFile, myFile2],
+      },
+    })
+
+    droparea.maxSizeValidate([])
+    droparea.maxSizeValidate(myFile2)
+    dropZone.dispatchEvent(dropEvent)
+    expect(droparea.maxSizeValidate).toBeCalled
+  })
+})

package/lib/components/droparea/index.js

@@ -0,0 +1 @@
+export { Droparea } from './components/droparea.js'

package/lib/components/droparea/styles/ark.css.js

@@ -0,0 +1,235 @@
+const css = String.raw; export default css`
+  .ark-droparea__form {
+    background: var(--canvas, white);
+    color: var(--ink, black);
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0.5rem;
+    border: 2px dashed black;
+    transition: all 0.1s ease-in-out;
+  }
+
+  /* THEME */
+  .ark-droparea__form[background=primary] {
+    background: var(--primary);
+    color: white;
+  }
+
+  .ark-droparea__form.ark-droparea__form[color=primary] {
+    color: var(--primary);
+  }
+
+  .ark-droparea__form[background=secondary] {
+    background: var(--secondary);
+    color: white;
+  }
+
+  .ark-droparea__form.ark-droparea__form[color=secondary] {
+    color: var(--secondary);
+  }
+
+  .ark-droparea__form[background=success] {
+    background: var(--success);
+    color: white;
+  }
+
+  .ark-droparea__form.ark-droparea__form[color=success] {
+    color: var(--success);
+  }
+
+  .ark-droparea__form[background=danger] {
+    background: var(--danger);
+    color: white;
+  }
+
+  .ark-droparea__form.ark-droparea__form[color=danger] {
+    color: var(--danger);
+  }
+
+  .ark-droparea__form[background=warning] {
+    background: var(--warning);
+    color: white;
+  }
+
+  .ark-droparea__form.ark-droparea__form[color=warning] {
+    color: var(--warning);
+  }
+
+  .ark-droparea__form[background=info] {
+    background: var(--info);
+    color: white;
+  }
+
+  .ark-droparea__form.ark-droparea__form[color=info] {
+    color: var(--info);
+  }
+
+  .ark-droparea__form[background=dark] {
+    background: var(--dark);
+    color: white;
+  }
+
+  .ark-droparea__form.ark-droparea__form[color=dark] {
+    color: var(--dark);
+  }
+
+  .ark-droparea__form[background=muted] {
+    background: var(--muted);
+    color: white;
+  }
+
+  .ark-droparea__form.ark-droparea__form[color=muted] {
+    color: var(--muted);
+  }
+
+  .ark-droparea__form[background=light] {
+    background: var(--light);
+    color: white;
+  }
+
+  .ark-droparea__form.ark-droparea__form[color=light] {
+    color: var(--light);
+  }
+
+  .ark-droparea__form [data-message] {
+    color: red;
+    font-size: 1rem;
+  }
+
+  .ark-droparea__form>* {
+    margin: 0;
+  }
+
+  .ark-droparea__form input {
+    position: absolute;
+    visibility: hidden;
+  }
+
+  .ark-droparea__form.highlight {
+    border: 2px solid black;
+    opacity: 0.5;
+  }
+
+  .ark-droparea__message {
+    font-size: 1.5rem;
+    user-select: none;
+  }
+
+  .ark-droparea-preview__list {
+    display: none;
+    grid-auto-flow: column;
+    grid-auto-columns: min-content;
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+    border-radius: 5px;
+    border: 1px solid #e1e1e1;
+    user-select: none;
+    padding: 1.2rem;
+    gap: 0.8rem;
+  }
+
+  .ark-droparea-preview__list::-webkit-scrollbar {
+    height: 10px;
+    width: 0.2rem;
+    border-radius: 15px;
+    background-color: rgba(89, 34, 114, 0.137);
+  }
+
+  .ark-droparea-preview__list::-webkit-scrollbar-thumb {
+    height: 10px;
+    background-color: white;
+    border: 1px solid #aaaaaa;
+    border-radius: 15px;
+  }
+
+  .ark-droparea-preview__frame {
+    box-sizing: border-box;
+    display: grid;
+    width: 110px;
+    height: 110px;
+    align-items: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-color: var(--primary);
+    border-radius: 4px;
+    box-shadow: -3px 4px 6px -4px rgba(1, 31, 255, 0.71);
+    transition: all 0.1s ease-in-out;
+  }
+
+  .ark-droparea-preview__frame:hover,
+  .ark-droparea-preview__frame:active {
+    cursor: pointer;
+    box-shadow: -3px 4px 15px -4px rgba(120, 10, 255, 0.71);
+    transform: scale(1.05);
+  }
+
+  .ark-droparea-preview__frame:hover .ark-droparea__remove,
+  .ark-droparea-preview__frame:active .ark-droparea__remove {
+    visibility: visible;
+  }
+
+  .ark-droparea-preview__frame:after {
+    content: "";
+    background-color: transparent;
+    display: block;
+    position: relative;
+    right: -3rem;
+    width: 5rem;
+    height: 1px;
+  }
+
+  .ark-droparea-preview__frame p {
+    box-sizing: border-box;
+    overflow: hidden;
+    white-space: pre-wrap;
+    width: inherit;
+    font-size: 0.6rem;
+    padding: 0.2rem;
+    line-height: 1.2;
+    text-align: center;
+    color: white;
+  }
+
+  .ark-droparea__remove {
+    visibility: hidden;
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    width: 30px;
+    height: 30px;
+    border: 1px solid white;
+    border-radius: 50%;
+    color: black;
+    outline: none;
+    font-size: 1rem;
+    opacity: 0.8;
+    transition: all 0.1s ease-in-out;
+  }
+
+  .ark-droparea__remove:hover {
+    background: black;
+    color: #ff7676;
+    transform: scale(1);
+    cursor: pointer;
+    opacity: 1;
+  }
+
+  .ark-droparea__open {
+    user-select: none;
+    border: 2px solid black;
+    padding: 0.5rem;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease-out;
+  }
+
+  .ark-droparea__open:hover {
+    box-shadow: 2px 4px 13px -3px rgba(0, 0, 0, 0.56);
+    background-color: white;
+  }
+
+  .ark-droparea__open:active {
+    transform: scale(0.95);
+  }
+` 

package/lib/components/droparea/styles/index.js

@@ -0,0 +1,3 @@
+// @ts-nocheck
+import styles from './ark.css.js'
+export default styles

package/lib/components/emit/components/emit.js

@@ -0,0 +1,33 @@
+import { Component } from '../../../base/component/index.js'
+
+const tag = 'ark-emit'
+export class Emit extends Component {
+  constructor () {
+    super()
+    const type = this['receive'] || 'click'
+    this.source = JSON.parse(this._pop(':scope > data')?.textContent || null)
+    this.addEventListener(type, this.handle.bind(this))
+  }
+
+  reflectedProperties () {
+    return ['receive', 'dispatch']
+  }
+
+  handle (event) {
+    const detail = Object.assign({}, event.detail)
+    if (this.source) Object.assign(detail, this.source)
+    
+    const value = event.target.value
+    if (value) Object.assign(detail, { value })
+    
+    const type = this['dispatch'] || 'emit'
+    this.emit(type, detail)
+  }
+
+  _pop (selector) {
+    const element = this.querySelector(selector)
+    element?.remove()
+    return element
+  }
+}
+Component.define(tag, Emit)