feat: add default value and clear action

pixelinfinito · Aug 21, 2023 · 54d63fd · 54d63fd
1 parent 81085a9
commit 54d63fd
Show file tree

Hide file tree

Showing 3 changed files with 237 additions and 222 deletions.
diff --git a/schema.json b/schema.json
@@ -24,6 +24,11 @@
         "key": "label",
         "label": "Label column name"
       },
+      {
+        "type": "text",
+        "key": "defaultValue",
+        "label": "Default value"
+      },
       {
         "type": "boolean",
         "key": "multiple",
@@ -54,6 +59,18 @@
             "type": "object"
           }
         ]
+      },
+      {
+        "type": "event",
+        "label": "On Clear select",
+        "key": "onClear",
+        "context": [
+          {
+            "label": "Item removed",
+            "key": "data",
+            "type": "object"
+          }
+        ]
       }
     ]
   }

diff --git a/src/Component.svelte b/src/Component.svelte
@@ -1,26 +1,29 @@
 <script>
-  import { getContext } from "svelte";
-  import Select from 'svelte-select';
-  import { onMount } from "svelte";
+  import { getContext } from "svelte"
+  import Select from 'svelte-select'
+  import { onMount } from "svelte"
  
-  const { styleable } = getContext("sdk"); 
-  const component = getContext("component");
+  const { styleable } = getContext("sdk")
+  const component = getContext("component")
 
-  
   export let multiple;
   export let dataProvider
   export let label = ''
   export let disable
   export let selectEvent
   export let placeholder 
   export let placeholderAlwaysShow
+  export let defaultValue
+  export let onClear
 
   let items = []
+
   async function fetchData() {
     try {
       const response = dataProvider;
       
       items = response?.rows?.map((item, index)=>{
+        console.log(item)
         return {
           value: item[label],
           label: item[label],
@@ -36,7 +39,6 @@
     console.log(label, 'changed value', placeholder)
     fetchData()
   }
-
  
   onMount(()=>{
    fetchData()
@@ -46,28 +48,37 @@
     
     const selectedValue = event.detail    
     let itemSend = []
-    console.log(multiple)
 
     if(multiple){
+      
       const result = selectedValue?.map((item)=>{
         return {
           ...item?.item
         }
       })
+
       itemSend = result
-      console.log(result, 'result values')
     }else{
       itemSend = selectedValue?.item
     }
     const dataSend = JSON.parse(JSON.stringify(itemSend))
-    console.log(dataSend)
+
     await selectEvent({
       data: dataSend
     })
   }
 
+  async function handleClear(item){
+    console.log(item.detail)
+    const dataSend = JSON.parse(JSON.stringify(item.detail))
+
+    await onClear({
+      data: dataSend
+    })
+  }
+
 </script>
 
 <div use:styleable={$component.styles}>
-  <Select disabled={disable} placeholderAlwaysShow={placeholderAlwaysShow}  {items} placeholder={placeholder} multiple={multiple} class="foo bar" on:change={handleSelectChange} />
-</div>
+  <Select on:clear={handleClear} value={defaultValue}  disabled={disable} placeholderAlwaysShow={placeholderAlwaysShow}  {items} placeholder={placeholder} multiple={multiple} class="foo bar" on:change={handleSelectChange} />
+</div>