fix: components

wetix · Dec 13, 2021 · 11a03f8 · 11a03f8
1 parent a3ddd23
commit 11a03f8
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 38 deletions.
diff --git a/components/button/types/index.d.ts b/components/button/types/index.d.ts
@@ -1,6 +1,7 @@
 import type { SvelteComponentTyped } from "svelte/internal";
 
 export interface ButtonProps {
+  /** component id */
   id?: string;
   variant?: "default" | "primary";
   ref?: HTMLButtonElement;

diff --git a/components/column/src/Column.svelte b/components/column/src/Column.svelte
@@ -13,12 +13,12 @@
     `resp-col--${size}-${span}`;
 
   const clsNames: string[] = [];
-  if (xs) clsNames.push(getClassName("xs", xs));
-  if (sm) clsNames.push(getClassName("sm", sm));
-  if (md) clsNames.push(getClassName("md", md));
-  if (lg) clsNames.push(getClassName("lg", lg));
-  if (xl) clsNames.push(getClassName("xl", xl));
-  if (sl) clsNames.push(getClassName("sl", sl));
+  if (!isNaN(xs)) clsNames.push(getClassName("xs", xs));
+  if (!isNaN(sm)) clsNames.push(getClassName("sm", sm));
+  if (!isNaN(md)) clsNames.push(getClassName("md", md));
+  if (!isNaN(lg)) clsNames.push(getClassName("lg", lg));
+  if (!isNaN(xl)) clsNames.push(getClassName("xl", xl));
+  if (!isNaN(sl)) clsNames.push(getClassName("sl", sl));
 </script>
 
 <div
@@ -80,6 +80,12 @@
     box-sizing: border-box;
     word-break: break-word;
 
+    &--xs-0 {
+      @media (max-width: $sm) {
+        display: none;
+      }
+    }
+
     @for $i from 1 through 24 {
       &--xs-#{$i} {
         $width: math.percentage(math.div(100, 24 * 100) * $i);

diff --git a/components/table/__test__/Table.spec.ts b/components/table/__test__/Table.spec.ts
@@ -9,16 +9,16 @@ describe("Table", () => {
     items: [{ id: 1 }, { id: 2 }],
   };
 
-  const { getByRole, getAllByRole } = render(Table, { props });
+  const { getByRole, container } = render(Table, { props });
 
   test("shows proper heading when rendered", () => {
     const component = getByRole("table");
     expect(() => component).not.toThrow();
 
-    const ths = document.querySelectorAll("thead th");
+    const ths = container.querySelectorAll("thead th");
     expect(ths).toHaveLength(props.columns.length);
 
-    const tds = document.querySelectorAll("tbody td");
+    const tds = container.querySelectorAll("tbody td");
     expect(tds).toHaveLength(props.columns.length * props.items.length);
   });
 });
diff --git a/components/upload/src/Upload.svelte b/components/upload/src/Upload.svelte
@@ -9,30 +9,32 @@
   export let ref: HTMLInputElement;
   export let name = "file";
   export let url = "";
-  export let headers = {};
+  export let headers: Object = {};
   export let accept = "image/*";
   export let withCredentials = true;
   export let directory = false;
   export let multiple = false;
   export let value = "";
 
-  let loading = false;
-  onMount(() => {
-    if (ref && directory) {
-      ref.setAttribute("webkitdirectory", "true");
-      ref.setAttribute("mozdirectory", "true");
-    }
-  });
+  let uploadFiles: File[] = [];
+  let uploading = false;
+  let dragover = false;
+  // onMount(() => {
+  //   if (ref && directory) {
+  //     ref.setAttribute("webkitdirectory", "true");
+  //     ref.setAttribute("mozdirectory", "true");
+  //   }
+  // });
 
-  const handleChange = (e: Event) => {
+  const handleSubmit = (e: Event) => {
     const { files } = <HTMLInputElement>e.target;
 
-    loading = true;
-    const formData = new FormData();
+    uploading = true;
+
     const xhr = new XMLHttpRequest();
     xhr.open("POST", url, true);
     xhr.withCredentials = withCredentials;
-    Object.entries<string>(headers).forEach(([k, v]) => {
+    Object.entries(headers).forEach(([k, v]) => {
       xhr.setRequestHeader(k, v);
     });
     xhr.addEventListener("loadstart", (e) => {
@@ -45,6 +47,7 @@
       if (xhr.readyState === 4) {
         let response = xhr.responseXML;
         const contentType = xhr.getResponseHeader("Content-Type") || "";
+
         try {
           if (xhr.status != 204 && /json/i.test(contentType))
             response = JSON.parse(xhr.responseText);
@@ -59,11 +62,12 @@
         } catch (e) {
           dispatch("error", xhr);
         } finally {
-          loading = false;
+          // uploading = false;
         }
       }
     });
 
+    const formData = new FormData();
     if (files) {
       if (multiple) {
         for (let i = 0; i < files.length; i++) {
@@ -76,22 +80,54 @@
 
     xhr.send(formData);
   };
+
+  const dragUpload = (node: Node) => {
+    console.log(node);
+    return { destroy() {} };
+  };
+
+  const handleDragEnter = () => {
+    dragover = true;
+  };
+
+  const handleDragLeave = () => {
+    dragover = false;
+  };
+
+  const handleDrop = (e: DragEvent) => {
+    console.log(e.dataTransfer);
+  };
 </script>
 
-<label class="resp-upload {className}" {...$$restProps}>
-  <input
-    {id}
-    bind:this={ref}
-    type="file"
-    {name}
-    bind:value
-    {multiple}
-    {accept}
-    on:change={handleChange}
-    on:change
-    tabindex="-1"
-  />
-</label>
+<div
+  on:dragover={handleDragEnter}
+  on:dragenter={handleDragEnter}
+  on:dragleave={handleDragLeave}
+  on:drop={handleDragLeave}
+  on:drop={handleDrop}
+>
+  <form
+    method="POST"
+    action={url}
+    on:submit|preventDefault|stopPropagation={handleSubmit}
+  >
+    <label class="resp-upload {className}" {...$$restProps}>
+      <input
+        {id}
+        bind:this={ref}
+        use:dragUpload
+        type="file"
+        {name}
+        bind:value
+        {multiple}
+        {accept}
+        on:change
+        tabindex="-1"
+      />
+      <slot {uploading} {dragover} />
+    </label>
+  </form>
+</div>
 
 <style lang="scss" global>
   .resp-upload {

diff --git a/components/upload/types/index.d.ts b/components/upload/types/index.d.ts
@@ -23,7 +23,8 @@ export interface UploadEvents {
 
 export interface UploadSlots {
   default: {
-    loading: boolean;
+    uploading: boolean;
+    dragover: boolean;
   };
 }
 

diff --git a/stories/Upload.stories.svelte b/stories/Upload.stories.svelte
@@ -16,7 +16,9 @@
 />
 
 <Template let:args>
-  <Upload {ref} {...args} />
+  <Upload {ref} {...args}>
+    <div let:uploading let:dragover>BOX {uploading} {dragover}</div>
+  </Upload>
 </Template>
 
 <Story