chore: apply prettier

shoelace-style · Aug 18, 2022 · cf7623a · cf7623a
1 parent d9fdcb4
commit cf7623a
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 57 deletions.
diff --git a/docs/components/file-upload.md b/docs/components/file-upload.md
@@ -86,9 +86,7 @@ Use the `button` slot to customize the button appearance.
 
 ```html preview
 <sl-file-upload>
-  <sl-button variant="danger" slot="button">
-    Custom Button
-  </sl-button>
+  <sl-button variant="danger" slot="button"> Custom Button </sl-button>
 </sl-file-upload>
 ```
 
@@ -161,7 +159,7 @@ const App = () => <SlFileUpload accept="image/*"></SlFileUpload>;
 
 ### Form Usage with FormData
 
-The FileUpload component can be used inside a form as a replacement for `<input type="file">`. The files can be accessed using FormData. See [Form Control documentation](../getting-started/form-controls.md) for more details. 
+The FileUpload component can be used inside a form as a replacement for `<input type="file">`. The files can be accessed using FormData. See [Form Control documentation](../getting-started/form-controls.md) for more details.
 
 ```html preview
 <form class="file-upload">
@@ -175,7 +173,7 @@ The FileUpload component can be used inside a form as a replacement for `<input
 
 <script type="module">
   const form = document.querySelector('.file-upload');
-  
+
   form.addEventListener('submit', event => {
     event.preventDefault();
     const formData = new FormData(form);
@@ -190,7 +188,7 @@ import { SlFileUpload, SlButton } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => {
   const form = useRef(null);
-  
+
   function handleSubmit(event) {
     event.preventDefault();
     const formData = new FormData(form);
@@ -203,16 +201,20 @@ const App = () => {
       <br />
       <input type="file" name="native-input" multiple></input>
       <br />
-      <SlButton type="reset" variant="default">Reset</SlButton>
-      <SlButton type="submit" variant="primary">Submit</SlButton>
+      <SlButton type="reset" variant="default">
+        Reset
+      </SlButton>
+      <SlButton type="submit" variant="primary">
+        Submit
+      </SlButton>
     </form>
   );
 };
 ```
 
 ### Form Usage with JSON
 
-The FileUpload component can be used inside a form as a replacement for `<input type="file">`. The files can be serialized using JSON. See [Form Control documentation](../getting-started/form-controls.md) for more details. 
+The FileUpload component can be used inside a form as a replacement for `<input type="file">`. The files can be serialized using JSON. See [Form Control documentation](../getting-started/form-controls.md) for more details.
 
 ```html preview
 <form class="file-upload-json">
@@ -228,7 +230,7 @@ The FileUpload component can be used inside a form as a replacement for `<input
   import { serialize } from '../dist/utilities/form.js';
 
   const form = document.querySelector('.file-upload-json');
-  
+
   form.addEventListener('submit', event => {
     event.preventDefault();
     const data = serialize(form);
@@ -257,8 +259,12 @@ const App = () => {
       <br />
       <input type="file" name="native-input" multiple></input>
       <br />
-      <SlButton type="reset" variant="default">Reset</SlButton>
-      <SlButton type="submit" variant="primary">Submit</SlButton>
+      <SlButton type="reset" variant="default">
+        Reset
+      </SlButton>
+      <SlButton type="submit" variant="primary">
+        Submit
+      </SlButton>
     </form>
   );
 };
@@ -273,7 +279,7 @@ To upload a file, listen to the `sl-change` event and handle the received file.
 
 <script type="module">
   const fileUpload = document.querySelector('.upload-file');
-  
+
   fileUpload.addEventListener('sl-change', event => {
     event.preventDefault();
     const fileInfo = event.detail;
@@ -308,8 +314,12 @@ const App = () => {
       <br />
       <input type="file" name="native-input" multiple></input>
       <br />
-      <SlButton type="reset" variant="default">Reset</SlButton>
-      <SlButton type="submit" variant="primary">Submit</SlButton>
+      <SlButton type="reset" variant="default">
+        Reset
+      </SlButton>
+      <SlButton type="submit" variant="primary">
+        Submit
+      </SlButton>
     </form>
   );
 };
@@ -324,21 +334,21 @@ Set `loading` to `true` on the FileInfo object to add a loading indicator to the
 
 <script type="module">
   const fileUpload = document.querySelector('.upload-file-loading');
-  
-  fileUpload.addEventListener('sl-change', async (event) => {
+
+  fileUpload.addEventListener('sl-change', async event => {
     event.preventDefault();
     const fileInfo = event.detail;
     const xhr = new XMLHttpRequest();
     xhr.open('POST', 'http://localhost:8080/upload/');
     xhr.setRequestHeader('Content-Type', fileInfo.file.type);
     xhr.send(fileInfo.file);
-    
+
     fileInfo.loading = true;
-    
+
     setTimeout(() => {
-        fileInfo.loading = false;
-        fileUpload.requestUpdate();
-    }, 3000)
+      fileInfo.loading = false;
+      fileUpload.requestUpdate();
+    }, 3000);
   });
 </script>
 ```
@@ -364,7 +374,7 @@ const App = () => {
     setTimeout(() => {
       fileInfo.loading = false;
       fileUpload.requestUpdate();
-    }, 3000)
+    }, 3000);
   }
 
   return (
@@ -373,8 +383,12 @@ const App = () => {
       <br />
       <input type="file" name="native-input" multiple></input>
       <br />
-      <SlButton type="reset" variant="default">Reset</SlButton>
-      <SlButton type="submit" variant="primary">Submit</SlButton>
+      <SlButton type="reset" variant="default">
+        Reset
+      </SlButton>
+      <SlButton type="submit" variant="primary">
+        Submit
+      </SlButton>
     </form>
   );
 };
@@ -389,21 +403,21 @@ To handle errors in a [XMLHttpRequest](https://developer.mozilla.org/en-US/docs/
 
 <script type="module">
   const fileUpload = document.querySelector('.upload-file-errors');
-  
-  fileUpload.addEventListener('sl-change', async (event) => {
+
+  fileUpload.addEventListener('sl-change', async event => {
     event.preventDefault();
     const fileInfo = event.detail;
     const xhr = new XMLHttpRequest();
-    
+
     xhr.upload.onerror = event => {
-      console.error('error:', event)
+      console.error('error:', event);
       fileInfo.loading = false;
-      fileInfo.warning = "Upload Failed";
+      fileInfo.warning = 'Upload Failed';
       fileInfo.accepted = false;
-      
-      fileUpload.requestUpdate()
+
+      fileUpload.requestUpdate();
     };
-    
+
     xhr.open('POST', 'http://localhost');
     xhr.setRequestHeader('Content-Type', fileInfo.file.type);
     xhr.send(fileInfo.file);
@@ -427,12 +441,12 @@ const App = () => {
     const xhr = new XMLHttpRequest();
 
     xhr.upload.onerror = event => {
-      console.error('error:', event)
+      console.error('error:', event);
       fileInfo.loading = false;
-      fileInfo.warning = "Upload Failed";
+      fileInfo.warning = 'Upload Failed';
       fileInfo.accepted = false;
 
-      fileUpload.requestUpdate()
+      fileUpload.requestUpdate();
     };
 
     xhr.open('POST', 'http://localhost');
@@ -448,8 +462,12 @@ const App = () => {
       <br />
       <input type="file" name="native-input" multiple></input>
       <br />
-      <SlButton type="reset" variant="default">Reset</SlButton>
-      <SlButton type="submit" variant="primary">Submit</SlButton>
+      <SlButton type="reset" variant="default">
+        Reset
+      </SlButton>
+      <SlButton type="submit" variant="primary">
+        Submit
+      </SlButton>
     </form>
   );
 };
@@ -464,29 +482,29 @@ The [XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpReq
 
 <script type="module">
   const fileUpload = document.querySelector('.upload-file-progress');
-  
-  fileUpload.addEventListener('sl-change', async (event) => {
+
+  fileUpload.addEventListener('sl-change', async event => {
     event.preventDefault();
     const fileInfo = event.detail;
     const xhr = new XMLHttpRequest();
-    
+
     xhr.upload.onprogress = event => {
       if (event.lengthComputable) {
         console.log('progress: ', (event.loaded / event.total) * 100);
         fileInfo.progress = (event.loaded / event.total) * 100;
         fileUpload.requestUpdate();
       }
     };
-    
+
     xhr.upload.onload = event => {
-      console.log('complete: ',event);
+      console.log('complete: ', event);
       fileInfo.loading = false;
       fileUpload.requestUpdate();
     };
-    
+
     xhr.open('POST', 'http://localhost:8080/upload');
     var formData = new FormData();
-    formData.append("file", fileInfo.file);
+    formData.append('file', fileInfo.file);
     xhr.send(formData);
 
     fileInfo.loading = true;
@@ -516,14 +534,14 @@ const App = () => {
     };
 
     xhr.upload.onload = event => {
-      console.log('complete: ',event);
+      console.log('complete: ', event);
       fileInfo.loading = false;
       fileUpload.requestUpdate();
     };
 
     xhr.open('POST', 'http://localhost:8080/upload');
     var formData = new FormData();
-    formData.append("file", fileInfo.file);
+    formData.append('file', fileInfo.file);
     xhr.send(formData);
 
     fileInfo.loading = true;
@@ -535,8 +553,12 @@ const App = () => {
       <br />
       <input type="file" name="native-input" multiple></input>
       <br />
-      <SlButton type="reset" variant="default">Reset</SlButton>
-      <SlButton type="submit" variant="primary">Submit</SlButton>
+      <SlButton type="reset" variant="default">
+        Reset
+      </SlButton>
+      <SlButton type="submit" variant="primary">
+        Submit
+      </SlButton>
     </form>
   );
 };
@@ -570,9 +592,7 @@ Set the `content` slot to customize the appearance of the dropzone.
 <sl-file-upload>
   <sl-card slot="label" class="card-footer">
     This card is a dropzone. You can drag all sorts of things in it!
-    <div slot="footer">
-      Footer
-    </div>
+    <div slot="footer">Footer</div>
   </sl-card>
 </sl-file-upload>
 

diff --git a/src/components/file-upload/file-upload.test.ts b/src/components/file-upload/file-upload.test.ts
@@ -1,8 +1,8 @@
 import { expect, fixture, html, oneEvent } from '@open-wc/testing';
 import sinon from 'sinon';
+import { serialize } from '../../utilities/form';
 import type SlFileUploadItem from '../file-upload-item/file-upload-item';
 import type SlFileUpload from './file-upload';
-import { serialize } from '../../utilities/form';
 
 describe('<sl-file-upload>', () => {
   let xhr: sinon.SinonFakeXMLHttpRequestStatic;

diff --git a/src/components/file-upload/file-upload.ts b/src/components/file-upload/file-upload.ts
@@ -1,16 +1,17 @@
+/* eslint-disable lit-a11y/click-events-have-key-events */
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../../components/icon-button/icon-button';
 import '../../components/icon/icon';
 import '../../components/progress-bar/progress-bar';
 import { emit } from '../../internal/event';
+import { FormSubmitController } from '../../internal/form';
 import { LocalizeController } from '../../utilities/localize';
 import styles from './file-upload.styles';
 import { hasValidFileSize, hasValidFileType } from './library';
 import type { FileInfo } from './library';
-import { FormSubmitController } from '../../internal/form';
-import { ifDefined } from 'lit/directives/if-defined.js';
 
 /**
  * @since 2.0
@@ -64,7 +65,7 @@ export default class SlFileUpload extends LitElement {
   @state() warning?: string;
 
   /** Indicates whether a file is currently dragged over the dropzone */
-  @state() isDragover: boolean = false;
+  @state() isDragover = false;
 
   @query('#file-input') fileInput: HTMLInputElement;
 
@@ -75,7 +76,7 @@ export default class SlFileUpload extends LitElement {
 
   public get value(): string | File {
     if (this.files.length > 0) {
-      return 'C:\\fakepath\\' + this.files[0].file.name;
+      return `C:\\fakepath\\${  this.files[0].file.name}`;
     }
     return '';
   }

diff --git a/src/translations/sv.ts b/src/translations/sv.ts
@@ -6,12 +6,18 @@ const translation: Translation = {
   $name: 'Svenska',
   $dir: 'ltr',
 
+  browseFiles: '',
   clearEntry: 'Återställ val',
   close: 'Stäng',
   copy: 'Kopiera',
   currentValue: 'Nuvarande värde',
+  dragDrop: '',
+  fileSizeExceeded: '',
+  fileTypeNotAccepted: '',
   hidePassword: 'Dölj lösenord',
   loading: 'Läser in',
+  maxFiles: '',
+  noMultipleFiles: '',
   progress: 'Framsteg',
   remove: 'Ta bort',
   resize: 'Ändra storlek',