@w0s/input-file-preview 3.0.1 → 3.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +56 -56
  2. package/dist/InputFilePreview.js +3 -3
  3. package/dist/attribute/Preview.js +1 -1
  4. package/dist/attribute/Preview.js.map +1 -1
  5. package/dist/index.d.ts.map +1 -1
  6. package/dist/index.js +1 -1
  7. package/dist/util/errorMessage.d.ts.map +1 -1
  8. package/dist/util/errorMessage.js +1 -1
  9. package/dist/util/errorMessage.js.map +1 -1
  10. package/package.json +2 -2
package/README.md CHANGED
@@ -1,56 +1,56 @@
1
- # Show preview with `<input type=file>`
2
-
3
- [![npm version](https://badge.fury.io/js/%40w0s%2Finput-file-preview.svg)](https://www.npmjs.com/package/@w0s/input-file-preview)
4
- [![Workflow status](https://github.com/SaekiTominaga/js-library-browser/actions/workflows/input-file-preview.yml/badge.svg)](https://github.com/SaekiTominaga/js-library-browser/actions/workflows/input-file-preview.yml)
5
-
6
- ## Demo
7
-
8
- - [Demo page](https://saekitominaga.github.io/js-library-browser/packages/input-file-preview/demo/)
9
-
10
- ## Examples
11
-
12
- ```HTML
13
- <script type="importmap">
14
- {
15
- "imports": {
16
- "@w0s/input-file-preview": "...",
17
- "@w0s/html-escape": "...",
18
- "whatwg-mimetype": "..."
19
- }
20
- }
21
- </script>
22
- <script type="module">
23
- import inputFilePreview from '@w0s/input-file-preview';
24
-
25
- inputFilePreview(document.querySelectorAll('.js-input-file-preview')); // `getElementById()` or `getElementsByClassName()` or `getElementsByTagName()` or `querySelector()` or `querySelectorAll()`
26
- </script>
27
-
28
- <input type="file" class="js-input-file-preview"
29
- data-preview="preview"
30
- data-max-size="1048576"
31
- />
32
- <template id="preview">
33
- <output><code>${name}</code> (<data value="${size}">${size} byte</data>) cannot be previewed.</output>
34
- </template>
35
- ```
36
-
37
- ## HTML attributes
38
-
39
- <dl>
40
- <dt><code>type</code> [required]</dt>
41
- <dd>This attribute must include <code>file</code>.</dd>
42
- <dt><code>data-preview</code> [required]</dt>
43
- <dd>ID of the <code>&lt;template&gt;</code> element to display the preview.</dd>
44
- <dt><code>data-max-size</code> [optional]</dt>
45
- <dd>The number of bytes of maximum file size to preview (Files larger than this will not be previewed, but will not result in an error). If not specified, the default value is 10 MiB.</dd>
46
- </dl>
47
-
48
- ## `<template>` element
49
-
50
- - `<template>` element must have one `<output>` element.
51
- - 🆗 `<template> <output>Message</output> </template>`
52
- - 🆗 `<ul> <template> <li> <output>Message</output> </li> </template> </ul>`
53
- - 🆖 `<template> <p>Message</p> </template>`
54
- - Include the error message in the `<output>` element.
55
- - `${name}` in the `<output>` element is converted to the file name, and `${size}` is converted to the file size (in bytes).
56
- - e.g. `<output><code>${name}</code> (<data value="${size}">${size} byte</data>) cannot be previewed.</output>`
1
+ # Show preview with `<input type=file>`
2
+
3
+ [![npm version](https://badge.fury.io/js/%40w0s%2Finput-file-preview.svg)](https://www.npmjs.com/package/@w0s/input-file-preview)
4
+ [![Workflow status](https://github.com/SaekiTominaga/js-library-browser/actions/workflows/package-input-file-preview.yml/badge.svg)](https://github.com/SaekiTominaga/js-library-browser/actions/workflows/package-input-file-preview.yml)
5
+
6
+ ## Demo
7
+
8
+ - [Demo page](https://saekitominaga.github.io/js-library-browser/packages/input-file-preview/demo/)
9
+
10
+ ## Examples
11
+
12
+ ```HTML
13
+ <script type="importmap">
14
+ {
15
+ "imports": {
16
+ "@w0s/input-file-preview": "...",
17
+ "@w0s/html-escape": "...",
18
+ "whatwg-mimetype": "..."
19
+ }
20
+ }
21
+ </script>
22
+ <script type="module">
23
+ import inputFilePreview from '@w0s/input-file-preview';
24
+
25
+ inputFilePreview(document.querySelectorAll('.js-input-file-preview')); // `getElementById()` or `getElementsByClassName()` or `getElementsByTagName()` or `querySelector()` or `querySelectorAll()`
26
+ </script>
27
+
28
+ <input type="file" class="js-input-file-preview"
29
+ data-preview="preview"
30
+ data-max-size="1048576"
31
+ />
32
+ <template id="preview">
33
+ <output><code>${name}</code> (<data value="${size}">${size} byte</data>) cannot be previewed.</output>
34
+ </template>
35
+ ```
36
+
37
+ ## HTML attributes
38
+
39
+ <dl>
40
+ <dt><code>type</code> [required]</dt>
41
+ <dd>This attribute must include <code>file</code>.</dd>
42
+ <dt><code>data-preview</code> [required]</dt>
43
+ <dd>ID of the <code>&lt;template&gt;</code> element to display the preview.</dd>
44
+ <dt><code>data-max-size</code> [optional]</dt>
45
+ <dd>The number of bytes of maximum file size to preview (Files larger than this will not be previewed, but will not result in an error). If not specified, the default value is 10 MiB.</dd>
46
+ </dl>
47
+
48
+ ## `<template>` element
49
+
50
+ - `<template>` element must have one `<output>` element.
51
+ - 🆗 `<template> <output>Message</output> </template>`
52
+ - 🆗 `<ul> <template> <li> <output>Message</output> </li> </template> </ul>`
53
+ - 🆖 `<template> <p>Message</p> </template>`
54
+ - Include the error message in the `<output>` element.
55
+ - `${name}` in the `<output>` element is converted to the file name, and `${size}` is converted to the file size (in bytes).
56
+ - e.g. `<output><code>${name}</code> (<data value="${size}">${size} byte</data>) cannot be previewed.</output>`
package/dist/InputFilePreview.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import MIMEType from 'whatwg-mimetype';
2
- import { convert } from './util/errorMessage.js';
3
- import Preview from './attribute/Preview.js';
4
- import MaxSize from './attribute/MaxSize.js';
2
+ import { convert } from "./util/errorMessage.js";
3
+ import Preview from "./attribute/Preview.js";
4
+ import MaxSize from "./attribute/MaxSize.js";
5
5
  /**
6
6
  * Show preview with `<input type=file>`
7
7
  */
package/dist/attribute/Preview.js CHANGED
@@ -29,7 +29,7 @@ export default class {
29
29
  return this.#template;
30
30
  }
31
31
  get outputHtml() {
32
- return this.#output.innerHTML;
32
+ return 'getHTML' in this.#output ? this.#output.getHTML() : this.#output.innerHTML;
33
33
  }
34
34
  }
35
35
  //# sourceMappingURL=Preview.js.map
package/dist/attribute/Preview.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Preview.js","sourceRoot":"","sources":["../../src/attribute/Preview.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,OAAO;IACJ,SAAS,CAAsB;IAE/B,OAAO,CAAoB;IAEpC;;OAEG;IACH,YAAY,KAAgC;QAC3C,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YAC3C,MAAM,IAAI,SAAS,CAAC,0CAA0C,CAAC,CAAC;QACjE,CAAC;QAED,MAAM,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;QAChD,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;YACvB,MAAM,IAAI,KAAK,CAAC,cAAc,KAAK,eAAe,CAAC,CAAC;QACrD,CAAC;QACD,IAAI,CAAC,CAAC,QAAQ,YAAY,mBAAmB,CAAC,EAAE,CAAC;YAChD,MAAM,IAAI,KAAK,CAAC,cAAc,KAAK,sCAAsC,CAAC,CAAC;QAC5E,CAAC;QACD,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;QAE1B,MAAM,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACxD,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;YACrB,MAAM,IAAI,KAAK,CAAC,uEAAuE,CAAC,CAAC;QAC1F,CAAC;QACD,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;IACvB,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IAED,IAAI,UAAU;QACb,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC;IAC/B,CAAC;CACD"}
1
+ {"version":3,"file":"Preview.js","sourceRoot":"","sources":["../../src/attribute/Preview.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,OAAO;IACJ,SAAS,CAAsB;IAE/B,OAAO,CAAoB;IAEpC;;OAEG;IACH,YAAY,KAAgC;QAC3C,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YAC3C,MAAM,IAAI,SAAS,CAAC,0CAA0C,CAAC,CAAC;QACjE,CAAC;QAED,MAAM,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;QAChD,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;YACvB,MAAM,IAAI,KAAK,CAAC,cAAc,KAAK,eAAe,CAAC,CAAC;QACrD,CAAC;QACD,IAAI,CAAC,CAAC,QAAQ,YAAY,mBAAmB,CAAC,EAAE,CAAC;YAChD,MAAM,IAAI,KAAK,CAAC,cAAc,KAAK,sCAAsC,CAAC,CAAC;QAC5E,CAAC;QACD,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;QAE1B,MAAM,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACxD,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;YACrB,MAAM,IAAI,KAAK,CAAC,uEAAuE,CAAC,CAAC;QAC1F,CAAC;QACD,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;IACvB,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IAED,IAAI,UAAU;QACb,OAAO,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC,CAAE,IAAI,CAAC,OAA6B,CAAC,SAAS,CAAC;IAC3G,CAAC;CACD"}
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"4CAUmC,UAAU,CAAC,OAAO,CAAC,GAAG,gBAAgB,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,KAAG,IAAI;AAA1G,wBAYE"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"yBAUgB,mBAAmB,UAAU,CAAC,OAAO,CAAC,GAAG,gBAAgB,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,KAAG,IAAI;AAA1G,wBAYE"}
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import InputFilePreview from './InputFilePreview.js';
1
+ import InputFilePreview from "./InputFilePreview.js";
2
2
  const validate = (element) => {
3
3
  if (!(element instanceof HTMLInputElement)) {
4
4
  throw new Error('Element must be a `HTMLInputElement`');
package/dist/util/errorMessage.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"errorMessage.d.ts","sourceRoot":"","sources":["../../src/util/errorMessage.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO,YAAa,MAAM,QAAQ,IAAI,KAAG,MAIrD,CAAC"}
1
+ {"version":3,"file":"errorMessage.d.ts","sourceRoot":"","sources":["../../src/util/errorMessage.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO,GAAI,SAAS,MAAM,EAAE,MAAM,IAAI,KAAG,MAIrD,CAAC"}
package/dist/util/errorMessage.js CHANGED
@@ -11,6 +11,6 @@ import { escape } from '@w0s/html-escape';
11
11
  */
12
12
  export const convert = (message, file) => {
13
13
  const { name, size } = file;
14
- return message.replaceAll(/\$\{name\}/g, escape(name)).replaceAll(/\$\{size\}/g, String(size));
14
+ return message.replaceAll(/\$\{name\}/gu, escape(name)).replaceAll(/\$\{size\}/gu, String(size));
15
15
  };
16
16
  //# sourceMappingURL=errorMessage.js.map
package/dist/util/errorMessage.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"errorMessage.js","sourceRoot":"","sources":["../../src/util/errorMessage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,OAAe,EAAE,IAAU,EAAU,EAAE;IAC9D,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAE5B,OAAO,OAAO,CAAC,UAAU,CAAC,aAAa,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;AAChG,CAAC,CAAC"}
1
+ {"version":3,"file":"errorMessage.js","sourceRoot":"","sources":["../../src/util/errorMessage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,OAAe,EAAE,IAAU,EAAU,EAAE;IAC9D,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAE5B,OAAO,OAAO,CAAC,UAAU,CAAC,cAAc,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,cAAc,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;AAClG,CAAC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@w0s/input-file-preview",
3
- "version": "3.0.1",
3
+ "version": "3.0.3",
4
4
  "description": "Show preview with `<input type=file>`",
5
5
  "keywords": [
6
6
  "file"
@@ -34,7 +34,7 @@
34
34
  "prebuild": "rimraf dist/* -g",
35
35
  "build": "tsc",
36
36
  "watch": "tsc -w",
37
- "lint": "eslint src/**/*.ts __tests__/**/*.js",
37
+ "lint": "eslint src/**/*.ts",
38
38
  "pretest": "npm run build",
39
39
  "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest dist/.+\\.test\\.js -c ../../jest.config.mjs --roots packages/input-file-preview"
40
40
  },