platform/packages/ui/src/components/DropdownLabels.svelte

<!--
// Copyright © 2020, 2021 Anticrm Platform Contributors.
//
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License. You may
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//
// See the License for the specific language governing permissions and
// limitations under the License.
-->
<script lang="ts">
  import { IntlString, Asset } from '@hcengineering/platform'
  import type { AnySvelteComponent, DropdownTextItem, TooltipAlignment, ButtonKind, ButtonSize } from '../types'
  import { createEventDispatcher } from 'svelte'
  import ui from '../plugin'
  import { showPopup } from '../popups'
  import { getFocusManager } from '../focus'
  import Button from './Button.svelte'
  import DropdownLabelsPopup from './DropdownLabelsPopup.svelte'
  import Label from './Label.svelte'
  import DropdownIcon from './icons/Dropdown.svelte'

  export let icon: Asset | AnySvelteComponent | undefined = undefined
  export let label: IntlString | undefined = undefined
  export let placeholder: IntlString | undefined = ui.string.SearchDots
  export let items: DropdownTextItem[]
  export let multiselect = false
  export let selected: DropdownTextItem['id'] | Array<DropdownTextItem['id']> | undefined = multiselect ? [] : undefined
  export let allowDeselect: boolean = false
  export let showDropdownIcon: boolean = false

  export let dataId: string | undefined = undefined
  export let kind: ButtonKind = 'no-border'
  export let size: ButtonSize = 'small'
  export let justify: 'left' | 'center' = 'center'
  export let width: string | undefined = undefined
  export let labelDirection: TooltipAlignment | undefined = undefined
  export let focusIndex = -1
  export let autoSelect: boolean = true
  export let useFlexGrow = false
  export let minW0 = true
  export let disabled: boolean = false

  export let enableSearch: boolean = true

  let container: HTMLElement
  let opened: boolean = false

  $: selectedItem = multiselect ? items.filter((p) => selected?.includes(p.id)) : items.find((x) => x.id === selected)
  $: if (autoSelect && selected === undefined && items[0] !== undefined) {
    selected = multiselect ? [items[0].id] : items[0].id
  }

  const dispatch = createEventDispatcher()
  const mgr = getFocusManager()
</script>

<div bind:this={container} class:min-w-0={minW0} class:flex-grow={useFlexGrow}>
  <Button
    {focusIndex}
    {icon}
    width={width ?? 'min-content'}
    {size}
    {kind}
    {justify}
    {disabled}
    pressed={opened}
    {dataId}
    showTooltip={{ label, direction: labelDirection }}
    on:click={() => {
      if (!opened) {
        opened = true
        showPopup(
          DropdownLabelsPopup,
          { placeholder, items, multiselect, selected, enableSearch },
          container,
          (result) => {
            if (result != null) {
              if (allowDeselect && selected === result) {
                selected = undefined
                dispatch('selected', undefined)
              } else {
                selected = result
                dispatch('selected', result)
              }
            }
            opened = false
            mgr?.setFocusPos(focusIndex)
          },
          (result) => {
            if (result != null) {
              selected = result
              dispatch('selected', result)
            }
          }
        )
      }
    }}
  >
    <span
      slot="content"
      class="overflow-label disabled"
      class:mr-2={showDropdownIcon}
      class:content-color={selectedItem === undefined}
    >
      {#if $$slots.content}
        <slot name="content" />
      {:else if Array.isArray(selectedItem)}
        {#if selectedItem.length > 0}
          {#each selectedItem as seleceted, i}
            <span class="step-row">{seleceted.label}</span>
          {/each}
        {:else}
          <Label label={label ?? ui.string.NotSelected} />
        {/if}
      {:else if selectedItem}
        {selectedItem.label}
      {:else}
        <Label label={label ?? ui.string.NotSelected} />
      {/if}
    </span>
    <svelte:fragment slot="iconRight">
      {#if showDropdownIcon}
        <DropdownIcon
          size={'small'}
          fill={kind === 'primary' && !disabled ? 'var(--primary-button-content-color)' : 'var(--theme-dark-color)'}
        />
      {/if}
    </svelte:fragment>
  </Button>
</div>

<style lang="scss">
  .step-row + .step-row {
    position: relative;
    margin-left: 0.75rem;

    &::before {
      position: absolute;
      content: '';
      top: 50%;
      left: -0.5rem;
      width: 0.25rem;
      height: 0.25rem;
      background-color: var(--dark-color);
      border-radius: 50%;
      transform: translateY(-50%);
    }
  }
</style>