Tag categories initial (#1030)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

packages/ui/src/components/Button.svelte

@@ -18,6 +18,7 @@
   import Spinner from './Spinner.svelte'
   import Label from './Label.svelte'
   import Icon from './Icon.svelte'
+import { onMount } from 'svelte'
 
   export let label: IntlString
   export let primary: boolean = false
@@ -27,9 +28,18 @@
   export let loading: boolean = false
   export let transparent: boolean = false
   export let width: string | undefined = undefined
+  export let focus: boolean = false
+
+  let input: HTMLButtonElement
+  onMount(() => {
+    if (focus) {
+      input.focus()
+      focus = false
+    }
+  })
 </script>
 
-<button class="button {size}" class:transparent class:primary disabled={disabled || loading} style={width ? 'width: ' + width : ''} on:click>
+<button bind:this={input} class="button {size}" class:transparent class:primary disabled={disabled || loading} style={width ? 'width: ' + width : ''} on:click>
   {#if icon && !loading}
     <div class="icon">
       <Icon {icon} size={'small'}/>

packages/ui/src/components/DropdownLabels.svelte

@@ -23,6 +23,7 @@
 
   import type { DropdownTextItem } from '../types'
   import { showPopup } from '..'
+import { createEventDispatcher } from 'svelte'
 
   export let title: IntlString
   export let caption: IntlString | undefined = undefined
@@ -42,6 +43,8 @@
   }
   
   const none = 'None' as IntlString
+
+  const dispatch = createEventDispatcher()
 </script>
 
 <div class="flex-col cursor-pointer"
@@ -50,7 +53,10 @@
     if (!opened) {
       opened = true
       showPopup(DropdownLabelsPopup, { title, caption, items, selected, header }, btn, (result) => {
-        if (result) selected = result
+        if (result) {
+          selected = result
+          dispatch('selected', result)
+        }
         opened = false
       })
     }