fix: typing

wetix · Dec 5, 2021 · ef7a49a · ef7a49a
1 parent c22e704
commit ef7a49a
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 54 deletions.
diff --git a/components/checkbox/src/Checkbox.svelte b/components/checkbox/src/Checkbox.svelte
@@ -3,6 +3,7 @@
   export { className as class };
   export let ref: null | HTMLInputElement = null;
   export let name = "";
+  export let disabled = false;
   export let label = "";
   export let value = "";
   export let checked = false;
@@ -11,6 +12,7 @@
 <label class="resp-checkbox {className}" {...$$restProps}>
   <input
     {name}
+    {disabled}
     bind:this={ref}
     bind:checked
     type="checkbox"

diff --git a/components/checkbox/types/index.d.ts b/components/checkbox/types/index.d.ts
@@ -2,7 +2,7 @@ import type { SvelteComponentTyped } from "svelte/internal";
 
 export interface CheckboxProps {
   id?: string;
-  ref?: null | HTMLInputElement;
+  ref?: HTMLInputElement;
   label?: string;
   class?: string;
   name?: string;

diff --git a/components/docker/src/Docker.svelte b/components/docker/src/Docker.svelte
@@ -115,10 +115,8 @@
       width: auto;
       background-color: rgba(0, 0, 0, 0.6);
     }
-  }
 
-  @media screen and (max-width: 480px) {
-    .resp-docker {
+    @media (max-width: 576px) {
       width: 100% !important;
     }
   }

diff --git a/components/row/src/Row.svelte b/components/row/src/Row.svelte
@@ -3,13 +3,13 @@
   export { className as class };
   export let justifyContent = "space-between";
   export let alignItems = "flex-start";
-  export let wrap = true;
+  export let nowrap = false;
   export let style = "";
 </script>
 
 <div
   class="resp-row {className}"
-  class:resp-row--nowrap={!wrap}
+  class:resp-row--nowrap={nowrap}
   style="justify-content: {justifyContent}; align-items: {alignItems}; {style}"
   {...$$restProps}
 >

diff --git a/components/select/src/Select.svelte b/components/select/src/Select.svelte
@@ -4,11 +4,11 @@
 
   let className = "";
   export { className as class };
+  export let placeholder = "";
+  export let ref: HTMLSelectElement;
   export let value: string | string[] = "";
   export let size = 10;
   export let multiple = false;
-  export let disabled = false;
-  export let readonly = false;
   export let options: SelectOption[] = [];
 
   // if not multiple, enforce it to size 1
@@ -19,43 +19,50 @@
   <Select {...$$props} {size} class={className} on:change on:blur />
 {:else}
   <select
-    {...$$restProps}
     class="resp-select {className}"
+    bind:this={ref}
     {size}
-    {readonly}
-    {disabled}
     on:change
     on:blur
+    bind:value
+    {...$$restProps}
   >
+    {#if placeholder}
+      <option value="" readonly hidden selected>{placeholder}</option>
+    {/if}
     {#each options as option}
-      <option
-        value={option.value}
-        selected={option.value === value}
-        disabled={option.disabled}>{option.label}</option
+      <option value={option.value} disabled={option.disabled}
+        >{option.label}</option
       >
     {/each}
   </select>
 {/if}
 
 <style lang="scss" global>
   .resp-select {
-    display: block;
-    width: 100%;
+    display: inline-flex;
     border: 1px solid #f1f1f1;
     border-radius: var(--border-radius, 5px);
-    font-size: var(--font-size, 14px);
+    font-size: var(--font-size);
     font-family: var(--font-family, inherit);
-    height: var(--height, 34px);
+    height: var(--height, 30px);
+    min-width: 120px;
     color: #1a1b1c;
     padding: 0 10px;
-    background: #f1f1f1;
+    background: #fff;
     outline: none;
     box-sizing: border-box;
-    /* hide arrow */
-    -webkit-appearance: none;
-    -moz-appearance: none;
     appearance: none;
 
+    &:hover {
+      border-color: #fc4451;
+    }
+
+    &:focus {
+      border-color: #fc4451;
+      box-shadow: 0 0 0 3px rgba(252, 68, 81, 0.3);
+    }
+
     &::-ms-expand {
       display: none;
     }

diff --git a/components/select/types/index.d.ts b/components/select/types/index.d.ts
@@ -3,6 +3,7 @@ import type { SvelteComponentTyped } from "svelte/internal";
 export type SelectOption = {
   label: string;
   disabled?: boolean;
+  selected?: boolean;
   value: string;
 };
 
@@ -15,6 +16,7 @@ interface SelectProps {
   value?: string | string[];
   disabled?: boolean;
   readonly?: boolean;
+  placeholder?: string;
   options: SelectOption[];
   style?: string;
 }

diff --git a/components/upload/src/Upload.svelte b/components/upload/src/Upload.svelte
@@ -5,16 +5,16 @@
 
   let className = "";
   export { className as class };
+  export let id = "";
+  export let ref: null | HTMLInputElement;
   export let name = "file";
   export let url = "";
-  export let ref: null | HTMLInputElement;
   export let headers = {};
   export let accept = "image/*";
   export let withCredentials = true;
   export let directory = false;
   export let multiple = false;
   export let value = "";
-  export let style = "";
 
   let loading = false;
   onMount(() => {
@@ -78,44 +78,18 @@
   };
 </script>
 
-<label class="resp-upload {className}" on:change {...$$restProps}>
-  <slot {loading}>
-    <svg
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-      width="24px"
-      height="24px"
-      viewBox="0 0 512.056 512.056"
-      style="enable-background:new 0 0 512.056 512.056;"
-      xml:space="preserve"
-    >
-      <g>
-        <path
-          d="M426.635,188.224C402.969,93.946,307.358,36.704,213.08,60.37C139.404,78.865,85.907,142.542,80.395,218.303
-				C28.082,226.93-7.333,276.331,1.294,328.644c7.669,46.507,47.967,80.566,95.101,80.379h80v-32h-80c-35.346,0-64-28.654-64-64
-				c0-35.346,28.654-64,64-64c8.837,0,16-7.163,16-16c-0.08-79.529,64.327-144.065,143.856-144.144
-				c68.844-0.069,128.107,48.601,141.424,116.144c1.315,6.744,6.788,11.896,13.6,12.8c43.742,6.229,74.151,46.738,67.923,90.479
-				c-5.593,39.278-39.129,68.523-78.803,68.721h-64v32h64c61.856-0.187,111.848-50.483,111.66-112.339
-				C511.899,245.194,476.655,200.443,426.635,188.224z"
-        />
-        <path
-          d="M245.035,253.664l-64,64l22.56,22.56l36.8-36.64v153.44h32v-153.44l36.64,36.64l22.56-22.56l-64-64
-				C261.354,247.46,251.276,247.46,245.035,253.664z"
-        />
-      </g>
-    </svg>
-  </slot>
+<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"
-    style="display: none"
   />
 </label>