fix: sequence of restProps and amend AppBar component

wetix · Nov 16, 2021 · 81e52ff · 81e52ff
1 parent 2614407
commit 81e52ff
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 58 deletions.
diff --git a/components/app-bar/src/AppBar.svelte b/components/app-bar/src/AppBar.svelte
@@ -7,14 +7,13 @@
   import Dropdown from "../components/Dropdown.svelte";
   import type { NavItem } from "../types";
 
+  export let logoSrc = "";
   export let tabItems: NavItem[] = [];
   export let selecteTabIndex = 0;
   export let navItems: NavItem[] = [];
   export let dropdownItems: NavItem[] = [];
 
-  let logoSrc = "https://asset.wetix.my/images/logo/wetix.png";
-
-  let showDropdown = false;
+  let showDropdown = true;
   let openDrawer = false;
 
   const dispatch = createEventDispatcher();
@@ -68,19 +67,11 @@
 
     <!-- dropdown -->
     <div class="resp-app-bar__right">
-      <div class="resp-app-bar__right-dropdown">
-        <a
-          href="/me"
-          on:click|preventDefault|stopPropagation={toggleShowDropdown}
-        >
-          <Icon
-            type="profile"
-            stroke="#fc4451"
-            style="width:40px; height:40px;"
-          />
-        </a>
-        <Dropdown show={showDropdown} items={dropdownItems} />
-      </div>
+      <slot name="right">
+        {#each dropdownItems as item}
+          <a href={item.link}><Icon useHref={item.icon} /></a>
+        {/each}
+      </slot>
     </div>
   </div>
 </nav>

diff --git a/components/app-bar/types/index.d.ts b/components/app-bar/types/index.d.ts
@@ -1,14 +1,16 @@
 import type { SvelteComponentTyped } from "svelte/internal";
 
 export type NavItem = {
-  title?: string;
+  label?: string;
   icon?: string;
   value: string;
   link: string;
 };
 
 export interface AppBarProps {
+  id?: string;
   class?: string;
+  logoSrc?: string;
   title?: string;
   navItems: Array<any>;
   hasBg?: boolean;
@@ -18,6 +20,7 @@ export interface AppBarProps {
 export interface AppBarEvents {}
 
 export interface AppBarSlots {
+  logo: {};
   left: {};
   right: {};
 }

diff --git a/components/badge/src/Badge.svelte b/components/badge/src/Badge.svelte
@@ -6,9 +6,9 @@
 </script>
 
 <span
-  {...$$restProps}
   class="resp-badge {className}"
   data-count={count > max ? `${max}+` : count}
+  {...$$restProps}
 >
   <slot />
 </span>

diff --git a/components/button/src/Button.svelte b/components/button/src/Button.svelte
@@ -11,14 +11,14 @@
 </script>
 
 <button
-  {...$$restProps}
   class="resp-button resp-button--{variant} resp-button--{size} {className}"
   class:resp-button--outline={outline}
   role="button"
   {type}
   {disabled}
   bind:this={ref}
   on:click
+  {...$$restProps}
 >
   <slot>{label}</slot>
 </button>

diff --git a/components/icon/src/Icon.svelte b/components/icon/src/Icon.svelte
@@ -1,11 +1,16 @@
 <script lang="ts">
   export let stroke = "#000";
+  export let size = "medium";
+  export let useHref = "";
   export let type = "";
-  export let style = "";
 </script>
 
-<span class="responsive-ui-icon" on:click {style}>
-  {#if type === "x"}
+<span class="resp-icon resp-icon--{size}" on:click {...$$restProps}>
+  {#if useHref}
+    <svg>
+      <use xlink:href={useHref} />
+    </svg>
+  {:else if type === "x"}
     <svg
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -18,10 +23,10 @@
       <g>
         <path
           d="M228.929,205.01L404.596,29.343c6.78-6.548,6.968-17.352,0.42-24.132c-6.548-6.78-17.352-6.968-24.132-0.42
-     c-0.142,0.137-0.282,0.277-0.42,0.42L204.796,180.878L29.129,5.21c-6.78-6.548-17.584-6.36-24.132,0.42
-     c-6.388,6.614-6.388,17.099,0,23.713L180.664,205.01L4.997,380.677c-6.663,6.664-6.663,17.468,0,24.132
-     c6.664,6.662,17.468,6.662,24.132,0l175.667-175.667l175.667,175.667c6.78,6.548,17.584,6.36,24.132-0.42
-     c6.387-6.614,6.387-17.099,0-23.712L228.929,205.01z"
+       c-0.142,0.137-0.282,0.277-0.42,0.42L204.796,180.878L29.129,5.21c-6.78-6.548-17.584-6.36-24.132,0.42
+       c-6.388,6.614-6.388,17.099,0,23.713L180.664,205.01L4.997,380.677c-6.663,6.664-6.663,17.468,0,24.132
+       c6.664,6.662,17.468,6.662,24.132,0l175.667-175.667l175.667,175.667c6.78,6.548,17.584,6.36,24.132-0.42
+       c6.387-6.614,6.387-17.099,0-23.712L228.929,205.01z"
         />
       </g>
     </svg>
@@ -78,8 +83,8 @@
       <g>
         <path
           d="M617.858,370.896L221.513,9.705c-13.006-12.94-34.099-12.94-47.105,0c-13.006,12.939-13.006,33.934,0,46.874
-         l372.447,339.438L174.441,735.454c-13.006,12.94-13.006,33.935,0,46.874s34.099,12.939,47.104,0l396.346-361.191
-         c6.932-6.898,9.904-16.043,9.441-25.087C627.763,386.972,624.792,377.828,617.858,370.896z"
+           l372.447,339.438L174.441,735.454c-13.006,12.94-13.006,33.935,0,46.874s34.099,12.939,47.104,0l396.346-361.191
+           c6.932-6.898,9.904-16.043,9.441-25.087C627.763,386.972,624.792,377.828,617.858,370.896z"
         />
       </g>
     </svg>
@@ -96,8 +101,8 @@
     >
       <path
         d="M1.111 16.832A1.117 1.117 0 010 15.706c0-.619.492-1.111
-    1.111-1.111H30.3c.619 0 1.127.492 1.127 1.111s-.508 1.127-1.127
-    1.127H1.111z"
+      1.111-1.111H30.3c.619 0 1.127.492 1.127 1.111s-.508 1.127-1.127
+      1.127H1.111z"
         fill={stroke}
       />
     </svg>
@@ -114,10 +119,10 @@
     >
       <path
         d="M1.119 16.841a1.118 1.118 0 01-1.111-1.127c0-.619.492-1.111
-      1.111-1.111h13.475V1.127A1.133 1.133 0 0115.722 0c.619 0 1.111.508 1.111
-      1.127v13.476h13.475c.619 0 1.127.492 1.127 1.111s-.508 1.127-1.127
-      1.127H16.833v13.476c0 .619-.492 1.127-1.111 1.127a1.131 1.131 0
-      01-1.127-1.127V16.841H1.119z"
+        1.111-1.111h13.475V1.127A1.133 1.133 0 0115.722 0c.619 0 1.111.508 1.111
+        1.127v13.476h13.475c.619 0 1.127.492 1.127 1.111s-.508 1.127-1.127
+        1.127H16.833v13.476c0 .619-.492 1.127-1.111 1.127a1.131 1.131 0
+        01-1.127-1.127V16.841H1.119z"
         fill={stroke}
       />
     </svg>
@@ -142,36 +147,38 @@
   {:else if type === "profile"}
     <svg on:click xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
       <g fill="none" fill-rule="evenodd">
-        <g>
-          <g>
-            <g>
-              <g>
-                <path
-                  fill={stroke}
-                  d="M20 12.105c2.22 0 4.026 1.807 4.026 4.026 0 2.22-1.806 4.026-4.026 4.026-2.22 0-4.025-1.806-4.025-4.026 0-2.22 1.805-4.026 4.025-4.026m4.117 8.557c1.234-1.123 2.014-2.735 2.014-4.53C26.131 12.75 23.381 10 20 10c-3.38 0-6.13 2.75-6.13 6.131 0 1.796.78 3.408 2.014 4.53C12.463 21.865 10 25.12 10 28.947c0 .581.472 1.053 1.053 1.053.58 0 1.052-.472 1.052-1.053 0-3.686 3-6.685 6.686-6.685h2.419c3.686 0 6.685 3 6.685 6.685 0 .581.471 1.053 1.052 1.053.581 0 1.053-.472 1.053-1.053 0-3.826-2.463-7.082-5.883-8.285"
-                  transform="translate(-157.000000, -232.000000) translate(151.000000, 158.000000) translate(6.000000, 70.000000) translate(0.000000, 4.000000)"
-                />
-                <path
-                  d="M0 0H40V40H0z"
-                  transform="translate(-157.000000, -232.000000) translate(151.000000, 158.000000) translate(6.000000, 70.000000) translate(0.000000, 4.000000)"
-                />
-              </g>
-            </g>
-          </g>
-        </g>
+        <path
+          fill={stroke}
+          d="M20 12.105c2.22 0 4.026 1.807 4.026 4.026 0 2.22-1.806 4.026-4.026 4.026-2.22 0-4.025-1.806-4.025-4.026 0-2.22 1.805-4.026 4.025-4.026m4.117 8.557c1.234-1.123 2.014-2.735 2.014-4.53C26.131 12.75 23.381 10 20 10c-3.38 0-6.13 2.75-6.13 6.131 0 1.796.78 3.408 2.014 4.53C12.463 21.865 10 25.12 10 28.947c0 .581.472 1.053 1.053 1.053.58 0 1.052-.472 1.052-1.053 0-3.686 3-6.685 6.686-6.685h2.419c3.686 0 6.685 3 6.685 6.685 0 .581.471 1.053 1.052 1.053.581 0 1.053-.472 1.053-1.053 0-3.826-2.463-7.082-5.883-8.285"
+          transform="translate(-157.000000, -232.000000) translate(151.000000, 158.000000) translate(6.000000, 70.000000) translate(0.000000, 4.000000)"
+        />
+        <path
+          d="M0 0H40V40H0z"
+          transform="translate(-157.000000, -232.000000) translate(151.000000, 158.000000) translate(6.000000, 70.000000) translate(0.000000, 4.000000)"
+        />
       </g>
     </svg>
   {/if}
 </span>
 
 <style lang="scss">
-  .responsive-ui-icon {
+  .resp-icon {
     cursor: pointer;
     display: inline-block;
     width: 16px;
     height: 16px;
     vertical-align: middle;
 
+    &--medium {
+      width: 32px;
+      height: 32px;
+    }
+
+    &--big {
+      width: 48px;
+      height: 48px;
+    }
+
     svg {
       display: block;
       width: 100%;

diff --git a/components/row/src/Row.svelte b/components/row/src/Row.svelte
@@ -13,12 +13,12 @@
   cssStyle += `;${style}`;
 </script>
 
-<div class="responsive-ui-row {className}" style={cssStyle}>
+<div class="resp-row {className}" style={cssStyle}>
   <slot />
 </div>
 
 <style lang="scss">
-  .responsive-ui-row {
+  .resp-row {
     display: flex;
     flex-wrap: wrap;
     margin: 6px 0;

diff --git a/components/tag/src/Tag.svelte b/components/tag/src/Tag.svelte
@@ -9,20 +9,20 @@
   export let color = "blue";
   export let value = "";
 
-  const onClick = () => {
+  const handleClose = () => {
     dispatch("close");
   };
 </script>
 
-<span class="responsive-ui-tag responsive-ui-tag--{color} {className}">
+<span class="resp-tag resp-tag--{color} {className}" {...$$restProps}>
   <slot>{value}</slot>
   {#if closable}
-    <span class="responsive-ui-tag__close" on:click={onClick}>&#10005;</span>
+    <span class="resp-tag__close" on:click={handleClose}>&#10005;</span>
   {/if}
 </span>
 
 <style lang="scss">
-  .responsive-ui-tag {
+  .resp-tag {
     position: relative;
     display: inline-flex;
     align-items: center;

diff --git a/components/tag/types/index.d.ts b/components/tag/types/index.d.ts
@@ -1,10 +1,13 @@
 import type { SvelteComponentTyped } from "svelte/internal";
 
 export interface TagProps {
+  id?: string;
+  title?: string;
   class?: string;
   closable?: boolean;
   color?: string;
   value: string;
+  style?: string;
 }
 
 export interface TagEvents {