@operato/font 10.29.34 → 10.29.37

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/font",
   "description": "User interface to select font and create font.",
   "author": "heartyoh",
-  "version": "10.29.34",
+  "version": "10.29.37",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -51,15 +51,15 @@
   },
   "dependencies": {
     "@material/web": "^2.0.0",
-    "@operato/attachment": "^10.29.34",
+    "@operato/attachment": "^10.29.37",
     "@operato/headroom": "^10.29.1",
     "@operato/i18n": "^10.29.27",
-    "@operato/input": "^10.29.30",
-    "@operato/layout": "^10.29.30",
-    "@operato/property-editor": "^10.29.34",
+    "@operato/input": "^10.29.37",
+    "@operato/layout": "^10.29.37",
+    "@operato/property-editor": "^10.29.37",
     "@operato/pull-to-refresh": "^10.29.23",
-    "@operato/shell": "^10.29.30",
-    "@operato/utils": "^10.29.23",
+    "@operato/shell": "^10.29.37",
+    "@operato/utils": "^10.29.37",
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
@@ -96,5 +96,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "0d3019a310120559ca3d3fcaeeff365d875b208f"
+  "gitHead": "38361a65226ee9f23814747b4f0520edf42c3184"
 }

package/test/font-creation-card.test.ts

@@ -0,0 +1,64 @@
+import { aTimeout, expect, fixture } from '@open-wc/testing'
+import { html } from 'lit'
+
+import '../src/font-creation-card.js'
+
+/**
+ * The font card's file pick.
+ *
+ * ## Why this is tested
+ *
+ * The card picked font files with its own `ox-file-selector`, one of several file pickers that did
+ * the same thing. It now uses `ox-input-file`, the one picker. What must hold: picked font files
+ * reach `create-font`, a file that is not a font is refused, picking does not flip the card, and
+ * reset empties the pick.
+ */
+describe('font-creation-card', () => {
+  const drop = (area: HTMLElement, ...files: File[]) => {
+    const dataTransfer = new DataTransfer()
+    files.forEach(one => dataTransfer.items.add(one))
+    area.dispatchEvent(new DragEvent('drop', { dataTransfer, bubbles: true, cancelable: true }))
+  }
+
+  it('takes the picked font files into create-font', async () => {
+    const card: any = await fixture(html`<font-creation-card></font-creation-card>`)
+    card.provider = 'custom'
+    await card.updateComplete
+
+    const picker = card.renderRoot.querySelector('ox-input-file')
+    expect(picker, 'the card has no picker').to.exist
+
+    drop(picker, new File(['x'], 'brand.woff2'), new File(['x'], 'notes.txt', { type: 'text/plain' }))
+    await aTimeout(0)
+    await card.updateComplete
+
+    expect(card.files.map((one: File) => one.name), 'a non-font was taken').to.deep.equal(['brand.woff2'])
+
+    let detail: any
+    card.addEventListener('create-font', (e: CustomEvent) => (detail = e.detail))
+    const form = card.renderRoot.querySelector('form')
+    ;(form.elements.namedItem('name') as HTMLInputElement).value = 'Brand'
+    form.dispatchEvent(new Event('submit', { cancelable: true }))
+
+    expect(detail.files.map((one: File) => one.name)).to.deep.equal(['brand.woff2'])
+  })
+
+  it('does not flip when the picker is clicked, and reset empties the pick', async () => {
+    const card: any = await fixture(html`<font-creation-card></font-creation-card>`)
+    card.provider = 'custom'
+    card.classList.add('flipped')
+    await card.updateComplete
+
+    const picker = card.renderRoot.querySelector('ox-input-file')
+    picker.click()
+    expect(card.classList.contains('flipped'), 'clicking the picker flipped the card').to.equal(true)
+
+    drop(picker, new File(['x'], 'brand.ttf'))
+    await aTimeout(0)
+    card.reset()
+    await card.updateComplete
+
+    expect(card.files).to.deep.equal([])
+    expect(picker.value).to.deep.equal([])
+  })
+})

package/dist/src/ox-file-selector.d.ts

@@ -1,11 +0,0 @@
-import '@material/web/icon/icon.js';
-import { LitElement } from 'lit';
-export declare class OxFileSelector extends LitElement {
-    static styles: import("lit").CSSResult[];
-    label: string;
-    accept?: string;
-    showFilename: boolean;
-    multiple: boolean;
-    _files: Array<any>;
-    render(): import("lit-html").TemplateResult<1>;
-}

package/dist/src/ox-file-selector.js

@@ -1,130 +0,0 @@
-import { __decorate } from "tslib";
-import '@material/web/icon/icon.js';
-import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-let OxFileSelector = class OxFileSelector extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.label = 'select file';
-        this.showFilename = false;
-        this.multiple = false;
-        this._files = [];
-    }
-    render() {
-        return html `
-      <div id="input-box">
-        ${this.showFilename
-            ? html `
-              <input class="upload-name" value=${this._files.map(f => f.name).join(', ') || this.label} disabled />
-            `
-            : html ``}
-        <label for="input-file">${this.label}</label>
-        <input
-          id="input-file"
-          type="file"
-          accept="${this.accept}"
-          class="upload-hidden"
-          ?multiple=${this.multiple}
-          hidden
-          @change=${(e) => {
-            const el = e.currentTarget;
-            this.dispatchEvent(new CustomEvent('file-change', {
-                bubbles: true,
-                composed: true,
-                detail: {
-                    files: el.files
-                }
-            }));
-            el.value = '';
-        }}
-        />
-      </div>
-    `;
-    }
-};
-OxFileSelector.styles = [
-    css `
-      :host {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        position: relative;
-        overflow: hidden;
-      }
-
-      #input-box {
-        display: flex;
-        width: 100%;
-        height: 100%;
-      }
-
-      input[type='file'] {
-        position: absolute;
-        width: 0px;
-        height: 0px;
-        padding: 0;
-        margin: -1px;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        border: 0;
-        border-radius: inherit;
-        background-color: inherit;
-      }
-
-      label {
-        padding: unset;
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        color: var(--file-selector-color, #999);
-        font-size: inherit;
-        line-height: normal;
-        vertical-align: middle;
-        background-color: var(--file-selector-bg-color, #fdfdfd);
-        cursor: pointer;
-        border: var(--file-selector-border, 1px solid #ebebeb);
-        border-radius: var(--file-selector-border-radius, 0.25em);
-      }
-
-      /* named upload */
-      .upload-name {
-        flex: 1;
-        padding: 0.5em 0.75em; /* label의 패딩값과 일치 */
-        font-size: inherit;
-        font-family: inherit;
-        line-height: normal;
-        vertical-align: middle;
-        background-color: #f5f5f5;
-        border: 1px solid #ebebeb;
-        border-bottom-color: #e2e2e2;
-        border-radius: 0.25em;
-        -webkit-appearance: none; /* 네이티브 외형 감추기 */
-        -moz-appearance: none;
-        appearance: none;
-      }
-    `
-];
-__decorate([
-    property({ type: String })
-], OxFileSelector.prototype, "label", void 0);
-__decorate([
-    property({ type: String })
-], OxFileSelector.prototype, "accept", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'show-filename' })
-], OxFileSelector.prototype, "showFilename", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'multiple' })
-], OxFileSelector.prototype, "multiple", void 0);
-__decorate([
-    property({ type: Array })
-], OxFileSelector.prototype, "_files", void 0);
-OxFileSelector = __decorate([
-    customElement('ox-file-selector')
-], OxFileSelector);
-export { OxFileSelector };
-//# sourceMappingURL=ox-file-selector.js.map

package/dist/src/ox-file-selector.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-file-selector.js","sourceRoot":"","sources":["../../src/ox-file-selector.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAGpD,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAoEuB,UAAK,GAAW,aAAa,CAAA;QAEA,iBAAY,GAAY,KAAK,CAAA;QAClC,aAAQ,GAAY,KAAK,CAAA;QAClD,WAAM,GAAe,EAAE,CAAA;IAoCpD,CAAC;IAlCC,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,YAAY;YACjB,CAAC,CAAC,IAAI,CAAA;iDACiC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK;aACzF;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;kCACgB,IAAI,CAAC,KAAK;;;;oBAIxB,IAAI,CAAC,MAAM;;sBAET,IAAI,CAAC,QAAQ;;oBAEf,CAAC,CAAQ,EAAE,EAAE;YACrB,MAAM,EAAE,GAAG,CAAC,CAAC,aAAiC,CAAA;YAC9C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;gBAC7B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE;oBACN,KAAK,EAAE,EAAE,CAAC,KAAK;iBAChB;aACF,CAAC,CACH,CAAA;YAED,EAAE,CAAC,KAAK,GAAG,EAAE,CAAA;QACf,CAAC;;;KAGN,CAAA;IACH,CAAC;;AA1GM,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+DF;CACF,AAjEY,CAiEZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAA8B;AAC7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAgB;AACc;IAAxD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;oDAA8B;AAClC;IAAnD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;gDAA0B;AAClD;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;8CAAwB;AAxEvC,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA4G1B","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('ox-file-selector')\nexport class OxFileSelector extends LitElement {\n  static styles = [\n    css`\n      :host {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        overflow: hidden;\n      }\n\n      #input-box {\n        display: flex;\n        width: 100%;\n        height: 100%;\n      }\n\n      input[type='file'] {\n        position: absolute;\n        width: 0px;\n        height: 0px;\n        padding: 0;\n        margin: -1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        border: 0;\n        border-radius: inherit;\n        background-color: inherit;\n      }\n\n      label {\n        padding: unset;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        color: var(--file-selector-color, #999);\n        font-size: inherit;\n        line-height: normal;\n        vertical-align: middle;\n        background-color: var(--file-selector-bg-color, #fdfdfd);\n        cursor: pointer;\n        border: var(--file-selector-border, 1px solid #ebebeb);\n        border-radius: var(--file-selector-border-radius, 0.25em);\n      }\n\n      /* named upload */\n      .upload-name {\n        flex: 1;\n        padding: 0.5em 0.75em; /* label의 패딩값과 일치 */\n        font-size: inherit;\n        font-family: inherit;\n        line-height: normal;\n        vertical-align: middle;\n        background-color: #f5f5f5;\n        border: 1px solid #ebebeb;\n        border-bottom-color: #e2e2e2;\n        border-radius: 0.25em;\n        -webkit-appearance: none; /* 네이티브 외형 감추기 */\n        -moz-appearance: none;\n        appearance: none;\n      }\n    `\n  ]\n\n  @property({ type: String }) label: string = 'select file'\n  @property({ type: String }) accept?: string\n  @property({ type: Boolean, attribute: 'show-filename' }) showFilename: boolean = false\n  @property({ type: Boolean, attribute: 'multiple' }) multiple: boolean = false\n  @property({ type: Array }) _files: Array<any> = []\n\n  render() {\n    return html`\n      <div id=\"input-box\">\n        ${this.showFilename\n          ? html`\n              <input class=\"upload-name\" value=${this._files.map(f => f.name).join(', ') || this.label} disabled />\n            `\n          : html``}\n        <label for=\"input-file\">${this.label}</label>\n        <input\n          id=\"input-file\"\n          type=\"file\"\n          accept=\"${this.accept}\"\n          class=\"upload-hidden\"\n          ?multiple=${this.multiple}\n          hidden\n          @change=${(e: Event) => {\n            const el = e.currentTarget as HTMLInputElement\n            this.dispatchEvent(\n              new CustomEvent('file-change', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  files: el.files\n                }\n              })\n            )\n\n            el.value = ''\n          }}\n        />\n      </div>\n    `\n  }\n}\n"]}