@hcengineering/ui 0.7.0

package/src/components/Button.svelte

@@ -0,0 +1,196 @@
+<!--
+// Copyright © 2020 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 type { Asset, IntlString } from '@hcengineering/platform'
+  import { ComponentType, onMount } from 'svelte'
+  import { checkAdaptiveMatching, deviceOptionsStore as deviceInfo } from '..'
+  import { registerFocus } from '../focus'
+  import { tooltip } from '../tooltips'
+  import type {
+    AnySvelteComponent,
+    ButtonKind,
+    ButtonShape,
+    ButtonSize,
+    IconProps,
+    LabelAndProps,
+    WidthType
+  } from '../types'
+  import Icon from './Icon.svelte'
+  import Label from './Label.svelte'
+  import Spinner from './Spinner.svelte'
+  import { Analytics } from '@hcengineering/analytics'
+
+  export let label: IntlString | undefined = undefined
+  export let labelParams: Record<string, any> = {}
+  export let kind: ButtonKind = 'regular'
+  export let size: ButtonSize = 'medium'
+  export let shape: ButtonShape = undefined
+  export let icon: Asset | AnySvelteComponent | ComponentType | undefined = undefined
+  export let iconProps: IconProps = {}
+  export let iconRight: Asset | AnySvelteComponent | ComponentType | undefined = undefined
+  export let iconRightProps: IconProps = {}
+  export let justify: 'left' | 'center' = 'center'
+  export let padding: string = '0 .75rem'
+  export let disabled: boolean = false
+  export let loading: boolean = false
+  export let width: string | undefined = undefined
+  export let minWidth: string | undefined = undefined
+  export let height: string | undefined = undefined
+  export let resetIconSize: 'none' | 'icon' | 'full' = 'none'
+  export let highlight: boolean = false
+  export let pressed: boolean = false
+  export let selected: boolean = false
+  export let notSelected: boolean = false
+  export let focus: boolean = false
+  export let click: boolean = false
+  export let title: string | undefined = undefined
+  export let borderStyle: 'solid' | 'dashed' | 'none' = 'solid'
+  export let id: string | undefined = undefined
+  export let dataId: string | undefined = undefined
+  export let input: HTMLButtonElement | undefined = undefined
+  export let showTooltip: LabelAndProps | undefined = undefined
+  export let short: boolean = false
+  export let shrink: number = 0
+  export let flex: string | undefined = undefined
+  export let accent: boolean = false
+  export let noFocus: boolean = false
+  export let noPrint: boolean = false
+  export let adaptiveShrink: WidthType | null = null
+  export let gap: 'medium' | 'large' = 'medium'
+  export let stopPropagation: boolean = true
+  export let event: string | undefined = undefined
+
+  $: iconSize = iconProps?.size !== undefined ? iconProps.size : size && size === 'inline' ? 'inline' : 'small'
+  $: iconRightSize = iconRightProps?.size !== undefined ? iconRightProps.size : 'x-small'
+  let iconOnly: boolean = false
+  $: iconOnly =
+    label === undefined &&
+    $$slots.content === undefined &&
+    (icon !== undefined || iconRight !== undefined || $$slots.icon || $$slots.iconRight)
+  $: primary = ['primary', 'secondary', 'positive', 'negative'].some((p) => p === kind)
+
+  $: devSize = $deviceInfo.size
+  $: adaptive = adaptiveShrink !== null ? checkAdaptiveMatching(devSize, adaptiveShrink) : false
+
+  onMount(() => {
+    if (focus && input) {
+      input.focus()
+      focus = false
+    }
+    if (click && input) {
+      input.click()
+      click = false
+    }
+  })
+
+  // Focusable control with index
+  export let focusIndex = -1
+  const { idx, focusManager } = registerFocus(focusIndex, {
+    focus: () => {
+      if (!disabled) {
+        input?.focus()
+      }
+      return !disabled && input != null
+    },
+    isFocus: () => document.activeElement === input
+  })
+
+  $: if (idx !== -1 && focusManager) {
+    focusManager.updateFocus(idx, focusIndex)
+  }
+
+  const updateFocus = () => {
+    focusManager?.setFocus(idx)
+  }
+  $: if (input != null) {
+    input.addEventListener('focus', updateFocus, { once: true })
+  }
+
+  function preventHandler (e: MouseEvent) {
+    if (stopPropagation) {
+      e.preventDefault()
+      e.stopPropagation()
+    }
+  }
+</script>
+
+<!-- {focusIndex} -->
+<button
+  use:tooltip={showTooltip}
+  bind:this={input}
+  class="antiButton {kind} {size} jf-{justify} sh-{shape ?? 'no-shape'} bs-{borderStyle} gap-{gap}"
+  class:only-icon={iconOnly || adaptive}
+  class:no-focus={noFocus}
+  class:no-print={noPrint}
+  class:accent
+  class:highlight
+  class:pressed
+  class:selected
+  class:notSelected
+  class:iconL={(icon || $$slots.icon) && (label || $$slots.content)}
+  class:iconR={(iconRight || $$slots.iconRight) && (label || $$slots.content)}
+  disabled={disabled || loading}
+  class:short
+  class:resetIconSize={resetIconSize === 'full'}
+  style:min-width={minWidth}
+  style:width
+  style:height
+  style:flex
+  style:flex-shrink={shrink}
+  style:padding
+  {title}
+  type={kind === 'primary' ? 'submit' : 'button'}
+  on:click={preventHandler}
+  on:click={() => {
+    if (event) {
+      Analytics.handleEvent(event)
+    }
+  }}
+  on:click
+  on:focus
+  on:blur
+  on:mousemove
+  on:mouseleave
+  {id}
+  data-id={dataId}
+>
+  {#if icon && !loading}
+    <div class="btn-icon pointer-events-none" class:resetIconSize={resetIconSize === 'icon'}>
+      <Icon bind:icon size={iconSize} {iconProps} />
+    </div>
+  {/if}
+  {#if loading}
+    <div
+      class="btn-icon pointer-events-none spinner pl-2"
+      class:resetIconSize={resetIconSize === 'icon'}
+      style:color={primary ? 'var(--primary-button-color)' : 'var(--theme-caption-color)'}
+    >
+      <Spinner size={iconSize === 'inline' ? 'inline' : 'small'} />
+    </div>
+  {/if}
+  {#if label && !adaptive}
+    <span class="overflow-label label disabled pointer-events-none" class:ml-2={loading}>
+      <Label {label} params={labelParams} />
+    </span>
+  {/if}
+  {#if iconRight}
+    <div class="btn-right-icon pointer-events-none" class:resetIconSize={resetIconSize === 'icon'}>
+      <Icon bind:icon={iconRight} size={iconRightSize} iconProps={iconRightProps} />
+    </div>
+  {/if}
+  {#if $$slots.icon}<slot name="icon" />{/if}
+  {#if $$slots.content}<slot name="content" />{/if}
+  {#if $$slots.iconRight}<slot name="iconRight" />{/if}
+</button>

package/src/components/ButtonBase.svelte

@@ -0,0 +1,119 @@
+<!--
+// Copyright © 2023 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 type { Asset, IntlString } from '@hcengineering/platform'
+  import { AnySvelteComponent, ButtonBaseKind, ButtonBaseSize, ButtonBaseType, IconSize, LabelAndProps } from '../types'
+  import { tooltip as tp } from '../tooltips'
+  import { registerFocus } from '../focus'
+  import { ComponentType, onMount } from 'svelte'
+  import Spinner from './Spinner.svelte'
+  import Icon from './Icon.svelte'
+  import Label from './Label.svelte'
+
+  export let title: string | undefined = undefined
+  export let label: IntlString | undefined = undefined
+  export let labelParams: Record<string, any> = {}
+  export let icon: Asset | AnySvelteComponent | ComponentType | undefined = undefined
+  export let iconSize: IconSize | undefined = undefined
+  export let iconProps: any | undefined = undefined
+  export let kind: ButtonBaseKind
+  export let size: ButtonBaseSize
+  export let disabled: boolean = false
+  export let loading: boolean = false
+  export let pressed: boolean = false
+  export let hasMenu: boolean = false
+  export let noPrint: boolean = false
+  export let autoFocus: boolean = false
+  export let noFocus: boolean = false
+  export let type: ButtonBaseType
+  export let inheritColor: boolean = false
+  export let inheritFont: boolean = false
+  export let tooltip: LabelAndProps | undefined = undefined
+  export let element: HTMLButtonElement | undefined = undefined
+  export let shape: 'rectangle' | 'round' = 'rectangle'
+  export let id: string | undefined = undefined
+  export let dataId: string | undefined = undefined
+
+  let actualIconSize: IconSize = 'small'
+
+  $: if (iconSize) {
+    actualIconSize = iconSize
+  } else if (type === 'type-button' && !hasMenu && iconProps?.size === undefined) {
+    actualIconSize = 'medium'
+  }
+  $: iconOnly = title === undefined && label === undefined && $$slots.default === undefined && icon !== undefined
+
+  export function focus () {
+    element?.focus()
+  }
+
+  onMount(() => {
+    if (autoFocus && element) {
+      element.focus()
+      autoFocus = false
+    }
+  })
+
+  // Focusable control with index
+  export let focusIndex = -1
+  const { idx, focusManager } = registerFocus(focusIndex, {
+    focus: () => {
+      if (!disabled) {
+        element?.focus()
+      }
+      return !disabled && element != null
+    },
+    isFocus: () => document.activeElement === element
+  })
+
+  $: if (idx !== -1 && focusManager) {
+    focusManager.updateFocus(idx, focusIndex)
+  }
+
+  const updateFocus = () => {
+    focusManager?.setFocus(idx)
+  }
+  $: if (element != null) {
+    element.addEventListener('focus', updateFocus, { once: true })
+  }
+</script>
+
+<button
+  {id}
+  bind:this={element}
+  class="hulyButton font-medium-14 {kind} {size} {type} {shape}"
+  class:loading
+  class:pressed
+  class:inheritColor
+  class:inheritFont
+  class:menu={hasMenu}
+  class:iconOnly
+  class:no-print={noPrint}
+  class:no-focus={noFocus}
+  disabled={loading || disabled}
+  data-id={dataId}
+  use:tp={tooltip}
+  on:click|stopPropagation|preventDefault
+  on:keydown
+>
+  {#if loading}
+    <div class="icon no-gap"><Spinner size={'small'} /></div>
+  {:else if icon}
+    <div class="icon no-gap"><Icon {icon} {iconProps} size={actualIconSize} /></div>
+  {/if}
+  {#if label}<span><Label {label} params={labelParams} /></span>{/if}
+  {#if title}<span>{title}</span>{/if}
+  <slot />
+</button>

package/src/components/ButtonGroup.svelte

@@ -0,0 +1,48 @@
+<!--
+// Copyright © 2023 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 { ButtonItem } from '..'
+  import Button from './Button.svelte'
+
+  export let items: ButtonItem[]
+  export let selected: string | boolean = false
+  export let allowDeselected: boolean = true
+  export let mode: 'filled-icon' | 'highlighted' | 'selected' = 'selected'
+  export let props: any = {}
+
+  const dispatch = createEventDispatcher()
+
+  const select = (value: string | false): void => {
+    selected = value
+    dispatch('select', value)
+  }
+</script>
+
+{#each items as item}
+  {@const isSelect = selected === item.id}
+  <Button
+    {...item}
+    id={`btnGID-${item.id}`}
+    iconProps={mode === 'filled-icon' && isSelect ? { filled: true } : {}}
+    selected={mode === 'selected' ? isSelect : false}
+    highlight={mode === 'highlighted' ? isSelect : false}
+    {...props}
+    on:click={() => {
+      if (!isSelect) select(item.id)
+      else if (allowDeselected) select(false)
+    }}
+  />
+{/each}

package/src/components/ButtonIcon.svelte

@@ -0,0 +1,63 @@
+<!--
+// Copyright © 2023 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 type { Asset } from '@hcengineering/platform'
+  import { AnySvelteComponent, IconSize, LabelAndProps } from '../types'
+  import { ComponentType } from 'svelte'
+  import ButtonBase from './ButtonBase.svelte'
+
+  export let kind: 'primary' | 'secondary' | 'tertiary' | 'negative' = 'secondary'
+  export let size: 'large' | 'medium' | 'small' | 'extra-small' | 'min' = 'large'
+  export let icon: Asset | AnySvelteComponent | ComponentType
+  export let iconProps: any | undefined = undefined
+  export let iconSize: IconSize | undefined = undefined
+  export let disabled: boolean = false
+  export let pressed: boolean = false
+  export let hasMenu: boolean = false
+  export let noPrint: boolean = false
+  export let loading: boolean = false
+  export let inheritColor: boolean = false
+  export let tooltip: LabelAndProps | undefined = undefined
+  export let focusIndex = -1
+  export let id: string | undefined = undefined
+  export let dataId: string | undefined = undefined
+  export let element: HTMLButtonElement | undefined = undefined
+
+  export function focus () {
+    element?.focus()
+  }
+</script>
+
+<ButtonBase
+  bind:element
+  type={'type-button-icon'}
+  {kind}
+  {iconSize}
+  {size}
+  {icon}
+  {iconProps}
+  {disabled}
+  {loading}
+  {inheritColor}
+  {pressed}
+  {hasMenu}
+  {noPrint}
+  {tooltip}
+  {focusIndex}
+  {id}
+  {dataId}
+  on:click
+  on:keydown
+/>

package/src/components/ButtonMenu.svelte

@@ -0,0 +1,103 @@
+<!--
+// Copyright © 2023 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 type { Asset, IntlString } from '@hcengineering/platform'
+  import { deepEqual } from 'fast-equals'
+  import { ComponentType, createEventDispatcher } from 'svelte'
+  import { closePopup, showPopup, type LabelAndProps, closeTooltip } from '..'
+  import { AnySvelteComponent, DropdownIntlItem } from '../types'
+  import ButtonBase from './ButtonBase.svelte'
+  import ModernPopup from './ModernPopup.svelte'
+
+  export let title: string | undefined = undefined
+  export let label: IntlString | undefined = undefined
+  export let labelParams: Record<string, any> = {}
+  export let kind: 'primary' | 'secondary' | 'tertiary' | 'negative' = 'secondary'
+  export let size: 'large' | 'medium' | 'small' | 'extra-small' | 'min' = 'large'
+  export let icon: Asset | AnySvelteComponent | ComponentType | undefined = undefined
+  export let iconProps: any | undefined = undefined
+  export let disabled: boolean = false
+  export let loading: boolean = false
+  export let inheritColor: boolean = false
+  export let noSelection: boolean = false
+  export let noPrint: boolean = false
+  export let autoSelectionIfOne: boolean = false
+  export let tooltip: LabelAndProps | undefined = undefined
+
+  export let items: DropdownIntlItem[]
+  export let params: Record<string, any> = {}
+  export let selected: DropdownIntlItem['id'] | undefined = undefined
+  export let element: HTMLButtonElement | undefined = undefined
+  export let focusIndex = -1
+  export let id: string | undefined = undefined
+  export let dataId: string | undefined = undefined
+
+  let opened: boolean = false
+
+  const dispatch = createEventDispatcher()
+
+  function openPopup () {
+    if (!opened) {
+      if (autoSelectionIfOne && items.length === 1) {
+        selected = items[0].id
+        dispatch('selected', selected)
+        return
+      }
+      opened = true
+      closeTooltip()
+      showPopup(ModernPopup, { items, selected: noSelection ? undefined : selected, params }, element, (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>
+
+<ButtonBase
+  type={'type-button'}
+  hasMenu
+  bind:element
+  {kind}
+  {title}
+  {label}
+  {labelParams}
+  {size}
+  {icon}
+  {iconProps}
+  {disabled}
+  {noPrint}
+  {loading}
+  {inheritColor}
+  pressed={opened}
+  {focusIndex}
+  {id}
+  {dataId}
+  {tooltip}
+  on:click={openPopup}
+/>

package/src/components/ButtonWithDropdown.svelte

@@ -0,0 +1,123 @@
+<!--
+// Copyright © 2023 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 { Asset, IntlString } from '@hcengineering/platform'
+  import {
+    AnySvelteComponent,
+    Button,
+    ButtonKind,
+    Icon,
+    Label,
+    SelectPopup,
+    SelectPopupValueType,
+    eventToHTMLElement,
+    showPopup,
+    LabelAndProps,
+    ButtonSize
+  } from '../index'
+  import { createEventDispatcher } from 'svelte'
+
+  export let dropdownItems: SelectPopupValueType[]
+  export let label: IntlString | undefined = undefined
+  export let labelParams: Record<string, any> = {}
+  export let kind: ButtonKind = 'primary'
+  export let size: ButtonSize = 'medium'
+  export let justify: 'left' | 'center' = 'center'
+  export let icon: Asset | AnySvelteComponent | undefined = undefined
+  export let dropdownIcon: Asset | AnySvelteComponent | undefined = undefined
+  export let showTooltipMain: LabelAndProps | undefined = undefined
+  export let mainButtonId: string | undefined = undefined
+  export let disabled: boolean = false
+  export let loading: boolean = false
+  export let focusIndex: number | undefined = undefined
+  export let hasDropdown: boolean = true
+  export let noFocus: boolean = false
+
+  const dispatch = createEventDispatcher()
+
+  function openDropdown (ev: MouseEvent): void {
+    showPopup(SelectPopup, { value: dropdownItems }, eventToHTMLElement(ev), (res) => {
+      dispatch('dropdown-selected', res)
+    })
+  }
+</script>
+
+<div class="w-full flex-row-center">
+  <Button
+    {focusIndex}
+    width="100%"
+    {icon}
+    {size}
+    {kind}
+    disabled={disabled || loading}
+    shape={hasDropdown ? 'rectangle-right' : undefined}
+    {justify}
+    {noFocus}
+    shrink={1}
+    borderStyle="none"
+    on:click
+    showTooltip={showTooltipMain}
+    id={mainButtonId}
+  >
+    <svelte:fragment slot="content">
+      <div class="flex-row-center w-full flex-between relative">
+        {#if label}
+          <span class="overflow-label"><Label {label} params={labelParams} /></span>
+          <slot name="content" />
+          <div class="{kind} vertical-divider max-h-5 h-5" />
+        {/if}
+      </div>
+    </svelte:fragment>
+  </Button>
+  {#if hasDropdown}
+    <Button
+      width="1.75rem"
+      {kind}
+      shape="rectangle-left"
+      justify="center"
+      borderStyle="none"
+      on:click={openDropdown}
+      {size}
+      {disabled}
+      {loading}
+      {noFocus}
+    >
+      <div slot="icon">
+        {#if dropdownIcon}
+          <Icon icon={dropdownIcon} size="small" />
+        {/if}
+      </div>
+    </Button>
+  {/if}
+</div>
+
+<style lang="scss">
+  .vertical-divider {
+    position: absolute;
+    background-color: var(--theme-content-color);
+    min-width: 1px;
+    opacity: 0.25;
+    right: -0.75rem;
+
+    &.primary,
+    &.secondary,
+    &.positive,
+    &.negative,
+    &.dangerous,
+    &.contrast {
+      background-color: var(--primary-button-content-color);
+    }
+  }
+</style>