@hanzo/ui 0.5.24 → 0.6.15

package/src/components/DropdownLabels.svelte

@@ -0,0 +1,156 @@
+<!--
+// Copyright © 2020, 2021 Hanzo <dev@hanzo.ai>.
+//
+// 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 '@hanzo/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}
+            <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>

package/src/components/DropdownLabelsIntl.svelte

@@ -0,0 +1,108 @@
+<!--
+// Copyright © 2022 Hardcore Engineering Inc.
+//
+// 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 '@hanzo/platform'
+  import { createEventDispatcher } from 'svelte'
+  import { deepEqual } from 'fast-equals'
+
+  import type { AnySvelteComponent, TooltipAlignment, ButtonKind, ButtonSize, DropdownIntlItem } from '../types'
+  import { showPopup, closePopup } from '../popups'
+  import Button from './Button.svelte'
+  import DropdownLabelsPopupIntl from './DropdownLabelsPopupIntl.svelte'
+  import Label from './Label.svelte'
+  import ui from '../plugin'
+  import DropdownIcon from './icons/Dropdown.svelte'
+
+  export let icon: Asset | AnySvelteComponent | undefined = undefined
+  export let iconProps: Record<string, any> = {}
+  export let label: IntlString = ui.string.DropdownDefaultLabel
+  export let params: Record<string, any> = {}
+  export let items: DropdownIntlItem[]
+  export let selected: DropdownIntlItem['id'] | undefined = undefined
+  export let disabled: boolean = false
+  export let kind: ButtonKind = 'regular'
+  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 shouldUpdateUndefined: boolean = true
+  export let minW0 = true
+  export let focusIndex: number = -1
+  export let dataId: string | undefined = undefined
+
+  let container: HTMLElement
+  let opened: boolean = false
+
+  $: selectedItem = items.find((x) => x.id === selected)
+  $: if (shouldUpdateUndefined && selected === undefined && items[0] !== undefined) {
+    selected = items[0].id
+    dispatch('selected', selected)
+  }
+
+  const dispatch = createEventDispatcher()
+
+  function openPopup () {
+    if (!opened) {
+      opened = true
+      showPopup(DropdownLabelsPopupIntl, { items, selected, params }, container, (result) => {
+        if (result) {
+          selected = result
+          dispatch('selected', result)
+        }
+        opened = false
+      })
+    }
+  }
+
+  let prevItems: DropdownIntlItem[]
+  $: if (!deepEqual(items, prevItems)) {
+    prevItems = items
+
+    if (opened) {
+      closePopup()
+      opened = false
+      openPopup()
+    }
+  }
+</script>
+
+<div bind:this={container} class:min-w-0={minW0}>
+  <Button
+    {focusIndex}
+    {dataId}
+    {icon}
+    {iconProps}
+    width={width ?? 'min-content'}
+    {size}
+    {kind}
+    {disabled}
+    {justify}
+    showTooltip={{ label, direction: labelDirection }}
+    on:click={openPopup}
+  >
+    <span slot="content" class="overflow-label disabled flex-grow text-left mr-2">
+      <Label
+        label={selectedItem ? selectedItem.label : label}
+        params={selectedItem ? selectedItem.params ?? params : params}
+      />
+    </span>
+    <svelte:fragment slot="iconRight">
+      <DropdownIcon
+        size={'small'}
+        fill={kind === 'primary' && !disabled ? 'var(--primary-button-content-color)' : 'var(--theme-dark-color)'}
+      />
+    </svelte:fragment>
+  </Button>
+</div>

package/src/components/DropdownLabelsPopup.svelte

@@ -0,0 +1,148 @@
+<!--
+// Copyright © 2020 Hanzo <dev@hanzo.ai>.
+//
+// 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 type { IntlString } from '@hanzo/platform'
+  import { createEventDispatcher } from 'svelte'
+  import { deviceOptionsStore, resizeObserver } from '..'
+  import plugin from '../plugin'
+  import type { DropdownTextItem } from '../types'
+  import IconCheck from './icons/Check.svelte'
+  import IconSearch from './icons/Search.svelte'
+  import ListView from './ListView.svelte'
+  import Icon from './Icon.svelte'
+  import EditWithIcon from './EditWithIcon.svelte'
+
+  export let placeholder: IntlString = plugin.string.SearchDots
+  export let placeholderParam: any | undefined = undefined
+  export let items: DropdownTextItem[]
+  export let selected: DropdownTextItem['id'] | Array<DropdownTextItem['id']> | undefined = undefined
+  export let multiselect: boolean = false
+  export let enableSearch = true
+
+  let search: string = ''
+  const dispatch = createEventDispatcher()
+
+  let selection = 0
+  let list: ListView
+
+  $: objects = items.filter((x) => x.label.toLowerCase().includes(search.toLowerCase()))
+
+  async function handleSelection (evt: Event | undefined, selection: number): Promise<void> {
+    const item = objects[selection]
+    if (item == null) {
+      return
+    }
+    if (multiselect && Array.isArray(selected)) {
+      const set = new Set(selected)
+      if (set.has(item.id)) {
+        set.delete(item.id)
+      } else {
+        set.add(item.id)
+      }
+      selected = Array.from(set)
+      dispatch('update', selected)
+    } else {
+      dispatch('close', item.id)
+    }
+  }
+
+  function onKeydown (key: KeyboardEvent): void {
+    if (key.code === 'ArrowUp') {
+      key.stopPropagation()
+      key.preventDefault()
+      list.select(selection - 1)
+    }
+    if (key.code === 'ArrowDown') {
+      key.stopPropagation()
+      key.preventDefault()
+      list.select(selection + 1)
+    }
+    if (key.code === 'Enter') {
+      key.preventDefault()
+      key.stopPropagation()
+      handleSelection(key, selection)
+    }
+  }
+
+  function isSelected (
+    selected: DropdownTextItem['id'] | Array<DropdownTextItem['id']> | undefined,
+    item: DropdownTextItem
+  ): boolean {
+    if (Array.isArray(selected)) {
+      return selected.includes(item.id)
+    } else {
+      return item.id === selected
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class="selectPopup"
+  on:keydown={onKeydown}
+  use:resizeObserver={() => {
+    dispatch('changeContent')
+  }}
+>
+  {#if enableSearch}
+    <div class="header">
+      <EditWithIcon
+        icon={IconSearch}
+        size={'large'}
+        width={'100%'}
+        autoFocus={!$deviceOptionsStore.isMobile}
+        bind:value={search}
+        {placeholder}
+        {placeholderParam}
+        on:change
+      />
+    </div>
+  {/if}
+  <div class="scroll" class:mt-2={!enableSearch}>
+    <div class="box">
+      <ListView bind:this={list} count={objects.length} bind:selection>
+        <svelte:fragment slot="item" let:item={idx}>
+          {@const item = objects[idx]}
+
+          <button
+            class="menu-item withList w-full"
+            on:click={() => {
+              if (multiselect && Array.isArray(selected)) {
+                const index = selected.indexOf(item.id)
+                if (index !== -1) {
+                  selected.splice(index, 1)
+                  selected = selected
+                } else {
+                  selected = selected === undefined ? [item.id] : [...selected, item.id]
+                }
+                dispatch('update', selected)
+              } else {
+                dispatch('close', item.id)
+              }
+            }}
+          >
+            <div class="label overflow-label flex-grow">{item.label}</div>
+            <div class="check">
+              {#if isSelected(selected, item)}
+                <Icon icon={IconCheck} size={'small'} />
+              {/if}
+            </div>
+          </button>
+        </svelte:fragment>
+      </ListView>
+    </div>
+  </div>
+  <div class="menu-space" />
+</div>

package/src/components/DropdownLabelsPopupIntl.svelte

@@ -0,0 +1,72 @@
+<!--
+// Copyright © 2022 Hardcore Engineering Inc.
+//
+// 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 { createEventDispatcher } from 'svelte'
+  import type { DropdownIntlItem } from '../types'
+  import IconCheck from './icons/Check.svelte'
+  import Label from './Label.svelte'
+  import { Icon, resizeObserver } from '..'
+
+  export let items: DropdownIntlItem[]
+  export let selected: DropdownIntlItem['id'] | undefined = undefined
+  export let params: Record<string, any> = {}
+
+  const dispatch = createEventDispatcher()
+  const btns: HTMLButtonElement[] = []
+
+  const keyDown = (ev: KeyboardEvent, n: number): void => {
+    if (ev.key === 'ArrowDown') {
+      if (n === btns.length - 1) btns[0].focus()
+      else btns[n + 1].focus()
+    } else if (ev.key === 'ArrowUp') {
+      if (n === 0) btns[btns.length - 1].focus()
+      else btns[n - 1].focus()
+    }
+  }
+</script>
+
+<div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
+  <div class="menu-space" />
+  <div class="scroll">
+    <div class="box">
+      {#each items as item, i}
+        <!-- svelte-ignore a11y-mouse-events-have-key-events -->
+        <button
+          class="menu-item flex-between"
+          on:mouseover={(ev) => {
+            ev.currentTarget.focus()
+          }}
+          on:keydown={(ev) => {
+            keyDown(ev, i)
+          }}
+          on:click={() => {
+            dispatch('close', item.id)
+          }}
+        >
+          <div class="flex-grow caption-color nowrap flex-presenter flex-gap-2">
+            {#if item.icon}
+              <Icon size="small" icon={item.icon} iconProps={item.iconProps} />
+            {/if}
+            <Label label={item.label} params={item.params ?? params} />
+          </div>
+          <div class="check">
+            {#if item.id === selected}<IconCheck size={'small'} />{/if}
+          </div>
+        </button>
+      {/each}
+    </div>
+  </div>
+  <div class="menu-space" />
+</div>

package/src/components/DropdownPopup.svelte

@@ -0,0 +1,146 @@
+<!--
+// Copyright © 2020 Hanzo <dev@hanzo.ai>.
+//
+// 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 type { Asset, IntlString } from '@hanzo/platform'
+  import { translateCB } from '@hanzo/platform'
+  import { themeStore } from '@hcengineering/theme'
+  import { createEventDispatcher, onMount } from 'svelte'
+  import { deviceOptionsStore, resizeObserver } from '..'
+  import plugin from '../plugin'
+  import type { AnySvelteComponent, ListItem } from '../types'
+  import Icon from './Icon.svelte'
+  import ListView from './ListView.svelte'
+
+  export let icon: Asset | AnySvelteComponent
+  export let placeholder: IntlString = plugin.string.SearchDots
+  export let items: ListItem[]
+  export let withSearch: boolean = true
+
+  let search: string = ''
+  let phTranslate: string = ''
+  $: if (placeholder) {
+    translateCB(placeholder, {}, $themeStore.language, (res) => {
+      phTranslate = res
+    })
+  }
+  const dispatch = createEventDispatcher()
+  let searchInput: HTMLInputElement
+
+  onMount(() => {
+    if (searchInput && !$deviceOptionsStore.isMobile) searchInput.focus()
+  })
+
+  let selection = 0
+  let list: ListView
+
+  $: objects = items.filter((x) => x.label.toLowerCase().includes(search.toLowerCase()))
+
+  async function handleSelection (evt: Event | undefined, selection: number): Promise<void> {
+    const item = objects[selection]
+
+    if (item.isSelectable ?? true) {
+      dispatch('close', item)
+    }
+  }
+
+  function onKeydown (key: KeyboardEvent): void {
+    if (key.code === 'ArrowUp') {
+      key.stopPropagation()
+      key.preventDefault()
+      list.select(selection - 1)
+    }
+    if (key.code === 'ArrowDown') {
+      key.stopPropagation()
+      key.preventDefault()
+      list.select(selection + 1)
+    }
+    if (key.code === 'Enter') {
+      key.preventDefault()
+      key.stopPropagation()
+      handleSelection(key, selection)
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class="selectPopup popup" use:resizeObserver={() => dispatch('changeContent')} on:keydown={onKeydown}>
+  {#if withSearch}
+    <div class="header">
+      <input
+        bind:this={searchInput}
+        type="text"
+        bind:value={search}
+        placeholder={phTranslate}
+        on:input={(ev) => {}}
+        on:change
+      />
+    </div>
+  {/if}
+  <div class="scroll">
+    <div class="box">
+      <ListView bind:this={list} count={objects.length} bind:selection>
+        <svelte:fragment slot="item" let:item={idx}>
+          {@const item = objects[idx]}
+
+          <button
+            class="flex-between menu-item withList w-full"
+            disabled={item.isSelectable === false}
+            on:click={(evt) => {
+              handleSelection(evt, idx)
+            }}
+          >
+            {#if item.image || item.icon || icon}
+              <div class="flex-center img" class:image={item.image}>
+                {#if item.image}
+                  <img src={item.image} alt={item.label} />
+                {:else if item.icon}
+                  <Icon icon={item.icon} size={'medium'} iconProps={item.iconProps} />
+                {:else if typeof icon === 'string'}
+                  <Icon {icon} size={'small'} />
+                {:else}
+                  <svelte:component this={icon} size={'small'} />
+                {/if}
+              </div>
+            {/if}
+            <div class="flex-grow caption-color font-{item.fontWeight} pl-{item.paddingLeft}">{item.label}</div>
+          </button>
+        </svelte:fragment>
+      </ListView>
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  .img {
+    margin-right: 0.75rem;
+    width: 1.5rem;
+    height: 1.5rem;
+    flex-shrink: 0;
+  }
+  .image {
+    border-color: transparent;
+    color: var(--caption-color);
+    background-color: var(--popup-bg-hover);
+    border-radius: 50%;
+    outline: none;
+    overflow: hidden;
+    img {
+      max-width: fit-content;
+    }
+  }
+  .popup {
+    padding: 0.5rem 0;
+  }
+</style>

package/src/components/DropdownRecord.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { IntlString } from '@hanzo/platform'
+  import { createEventDispatcher } from 'svelte'
+  import ui from '../plugin'
+  import { showPopup } from '../popups'
+  import type { ButtonKind, ButtonSize } from '../types'
+  import IconDownOutline from './icons/DownOutline.svelte'
+  import Button from './Button.svelte'
+  import DropdownRecordPopup from './DropdownRecordPopup.svelte'
+  import Label from './Label.svelte'
+
+  export let items: Record<any, IntlString>
+  export let selected: any | undefined = undefined
+
+  export let kind: ButtonKind = 'no-border'
+  export let size: ButtonSize = 'small'
+  export let width: string | undefined = '10rem'
+
+  const dispatch = createEventDispatcher()
+
+  let tool: HTMLElement
+  let opened: boolean = false
+  $: selectedLabel = selected ? items[selected] : ui.string.NotSelected
+</script>
+
+<div class="clear-mins" bind:this={tool}>
+  <Button
+    {kind}
+    {size}
+    {width}
+    on:click={() => {
+      if (!opened) {
+        opened = true
+        showPopup(DropdownRecordPopup, { items, selected }, tool, (result) => {
+          if (result != null) {
+            dispatch('select', result)
+          }
+          opened = false
+        })
+      }
+    }}
+  >
+    <svelte:fragment slot="content">
+      <div class="flex-between clear-mins pointer-events-none" style:width style:max-width={'12rem'}>
+        <span class="overflow-label"><Label label={selectedLabel} /></span>
+        <div class="ml-2"><IconDownOutline size={'small'} /></div>
+      </div>
+    </svelte:fragment>
+  </Button>
+</div>