@operato/property-editor 0.1.19 → 0.2.31

package/src/property-stack.ts

@@ -1,109 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { LitElement, css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-@customElement('property-stack')
-export default class PropertyStack extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: block;
-      }
-
-      #add-floor {
-        width: 100%;
-        height: 20px;
-        background-color: blue;
-        color: white;
-      }
-
-      div {
-        background-color: blue;
-        width: calc(100% - 40px);
-        width: -webkit-calc(100% - 40px);
-        min-height: 20px;
-      }
-
-      div[active] {
-        background-color: red;
-      }
-
-      div button {
-        position: absolute;
-        right: 10px;
-        width: 30px;
-        min-height: 20px;
-      }
-    `
-  ]
-
-  /**
-   * `stack`은 stack에 의해 만들어진 층의 배열을 유지한다.
-   */
-  @property({ type: Array }) stack: { name: string }[] = []
-
-  /**
-   * `activeIndex`은 현재 active된 층의 인덱스를 유지한다.
-   */
-  @property({ type: Number }) activeIndex: number = 0
-
-  render() {
-    const stack = [...this.stack].reverse()
-    const length = stack.length
-
-    return html`
-      <button id="add-floor" @click=${(e: Event) => this._onClickAddFloor(e)}>+</button>
-
-      ${stack.map(
-        (item, index) => html`
-          <div
-            ?active=${length - index - 1 == this.activeIndex}
-            @click=${(e: Event) => this._onClickToActive(e)}
-            idx=${length - index - 1}
-          >
-            ${item.name} <button @click=${(e: Event) => this._onClickRemoveFloor(e)}>-</button>
-          </div>
-        `
-      )}
-    `
-  }
-
-  _onClickAddFloor(e: Event) {
-    this.stack.push({ name: String(this.stack.length + 1) })
-    this.requestUpdate()
-  }
-
-  _onClickToActive(e: Event) {
-    const div = e.target as HTMLElement
-    if (div.tagName != 'DIV') {
-      return
-    }
-
-    this.activeIndex = Number(div.getAttribute('idx'))
-  }
-
-  _onClickRemoveFloor(e: Event) {
-    const div = (e.target as HTMLElement).parentElement
-
-    if (div?.tagName != 'DIV') {
-      return
-    }
-
-    const idx = Number(div.getAttribute('idx'))
-
-    this.stack.splice(idx, 1)
-
-    if (this.activeIndex == idx) {
-      this.activeIndex = 0
-    } else if (this.activeIndex >= idx) {
-      this.activeIndex--
-    } else if (this.activeIndex >= this.stack.length) {
-      this.activeIndex = 0
-    }
-
-    this.requestUpdate()
-  }
-}

package/test/property-angle.test.ts

@@ -1,32 +0,0 @@
-import { expect, fixture } from '@open-wc/testing'
-
-import { PropertyAngle } from '../src/property-angle'
-import { html } from 'lit'
-
-describe('PropertyAngle', () => {
-  it('has a default title "Hey there" and angle 5', async () => {
-    const el = await fixture<PropertyAngle>(html`<property-angle></property-angle>`)
-
-    expect(el.title).to.equal('Hey there')
-    expect(el.radian).to.equal(5)
-  })
-
-  it('increases the angle on button click', async () => {
-    const el = await fixture<PropertyAngle>(html`<property-angle></property-angle>`)
-    el.shadowRoot!.querySelector('button')!.click()
-
-    expect(el.radian).to.equal(6)
-  })
-
-  it('can override the title via attribute', async () => {
-    const el = await fixture<PropertyAngle>(html`<property-angle title="attribute title"></property-angle>`)
-
-    expect(el.title).to.equal('attribute title')
-  })
-
-  it('passes the a11y audit', async () => {
-    const el = await fixture<PropertyAngle>(html`<property-angle></property-angle>`)
-
-    await expect(el).shadowDom.to.be.accessible()
-  })
-})