@hanzo/ui 0.5.23 → 0.6.15

package/src/components/MultiProgress.svelte

@@ -0,0 +1,97 @@
+<!--
+// 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 { themeStore } from '@hcengineering/theme'
+  import { getPlatformColor } from '../colors'
+  export let values: Progress[]
+  export let min: number = 0
+  export let max: number = 100
+
+  interface Progress {
+    value: number
+    color: number
+  }
+
+  $: filtred = values.filter((p) => p.value > min)
+
+  $: proc = (max - min) / 100
+
+  const width: number[] = []
+  $: width.length = filtred.length
+
+  function getLeft (width: number[], i: number): number {
+    let res = 0
+    for (let index = 0; index < width.length; index++) {
+      if (index === i) break
+      res += width[index]
+    }
+    return res
+  }
+
+  function getWidth (values: Progress[], i: number): number {
+    let value = values[i].value
+    if (value > max) value = max
+    if (value < min) value = min
+
+    const res = Math.round((value - min) / proc)
+    width[i] = res
+    return res
+  }
+</script>
+
+<div class="container">
+  {#each filtred as item, i}
+    <div
+      class="bar fs-title"
+      class:first={i === 0}
+      class:last={i === filtred.length - 1}
+      style="background-color: {getPlatformColor(item.color, $themeStore.dark)}; left: {getLeft(
+        width,
+        i
+      )}%; width: calc(100% * {proc !== 0 ? getWidth(filtred, i) : 0} / 100);"
+    >
+      {item.value}
+    </div>
+  {/each}
+</div>
+
+<style lang="scss">
+  .container {
+    position: relative;
+    width: 100%;
+    height: 1.5rem;
+    background-color: var(--theme-list-row-color);
+    border: 1px solid var(--theme-list-divider-color);
+    border-radius: 0.25rem;
+
+    .bar {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      top: 0;
+      left: 0;
+      height: 100%;
+      padding-left: 0.5rem;
+      &.first {
+        border-top-left-radius: 0.25rem;
+        border-bottom-left-radius: 0.25rem;
+      }
+      &.last {
+        border-top-right-radius: 0.25rem;
+        border-bottom-right-radius: 0.25rem;
+      }
+    }
+  }
+</style>

package/src/components/NavGroup.svelte

@@ -0,0 +1,160 @@
+<!--
+// 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 { Doc, Ref } from '@hanzo/core'
+  import { createEventDispatcher } from 'svelte'
+  import type { Asset, IntlString } from '@hanzo/platform'
+  import { getEmbeddedLabel } from '@hanzo/platform'
+  import type { AnyComponent, IconSize, AnySvelteComponent } from '..'
+  import {
+    showPopup,
+    Menu,
+    Action,
+    Label,
+    Component,
+    IconDown,
+    IconDownOutline,
+    IconOpenedArrow,
+    IconFolderCollapsed,
+    IconFolderExpanded,
+    Icon,
+    getTreeCollapsed,
+    setTreeCollapsed,
+    tooltip
+  } from '..'
+
+  export let icon: Asset | AnySvelteComponent | undefined = undefined
+  export let folderIcon: boolean = false
+  export let iconProps: any | undefined = undefined
+  export let iconSize: IconSize = 'small'
+  export let label: IntlString | undefined = undefined
+  export let title: string | undefined = undefined
+  export let categoryName: string
+  export let tools: AnyComponent | undefined = undefined
+  export let isOpen: boolean = true
+  export let isFold: boolean = false
+  export let empty: boolean = false
+  export let collapsedPrefix: string = ''
+  export let visible: boolean = false
+  export let highlighted: boolean = false
+  export let selected: boolean = false
+  export let type: 'default' | 'nested' | 'nested-selectable' = 'default'
+  export let noDivider: boolean = false
+  export let showMenu: boolean = false
+  export let shouldTooltip: boolean = false
+  export let forciblyСollapsed: boolean = false
+  export let draggable: boolean = false
+  export let actions: Action[] = []
+  export let _id: Ref<Doc> | string | undefined = undefined
+
+  const dispatch = createEventDispatcher()
+
+  $: id = `navGroup-${categoryName}`
+  let pressed: boolean = false
+
+  const toggle = (): void => {
+    if ((!selected || empty) && type === 'nested-selectable') dispatch('click')
+    else if (!empty) {
+      isOpen = !isOpen
+      dispatch('toggle', isOpen)
+    }
+  }
+
+  function handleMenuClicked (ev: MouseEvent): void {
+    if (actions.length === 0) return
+    ev.stopPropagation()
+    pressed = true
+    showPopup(Menu, { actions }, ev.target as HTMLElement, () => {
+      pressed = false
+    })
+  }
+  $: isOpen = !getTreeCollapsed(_id, collapsedPrefix)
+  $: setTreeCollapsed(_id, !isOpen, collapsedPrefix)
+  $: visibleIcon = folderIcon ? (isOpen && !empty ? IconFolderExpanded : IconFolderCollapsed) : icon
+</script>
+
+<div
+  class="hulyNavGroup-container"
+  class:nested={type === 'nested' || type === 'nested-selectable'}
+  class:selectable={type === 'nested-selectable'}
+  class:noDivider
+>
+  <button
+    class="hulyNavGroup-header"
+    class:isOpen={(isOpen || visible) && !empty}
+    class:highlighted
+    class:selected
+    class:showMenu={showMenu || pressed}
+    on:click={toggle}
+    {draggable}
+    on:dragstart
+    on:dragover
+    on:dragend
+    on:drop
+  >
+    {#if isFold && !empty}
+      <button class="hulyNavGroup-header__chevron" class:collapsed={!isOpen}>
+        <IconDown size={'small'} />
+      </button>
+    {/if}
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <div class="hulyNavGroup-header__label font-medium-12" on:click={handleMenuClicked}>
+      {#if visibleIcon}
+        <div class="hulyNavGroup-header__icon" class:folder={folderIcon}>
+          <Icon icon={visibleIcon} size={iconSize} {iconProps} />
+        </div>
+      {/if}
+      <span
+        use:tooltip={shouldTooltip ? { label: label ?? getEmbeddedLabel(title ?? ''), direction: 'top' } : undefined}
+        class="overflow-label"
+      >
+        {#if label}<Label {label} />{/if}
+        {#if title}{title}{/if}
+      </span>
+      {#if actions.length > 0}
+        <IconDownOutline size={'tiny'} />
+      {/if}
+    </div>
+    <div class="flex-grow" />
+    {#if $$slots.extra}<slot name="extra" />{/if}
+    {#if tools || $$slots.tools}
+      <div class="hulyNavGroup-header__tools">
+        {#if tools}
+          <Component
+            is={tools}
+            props={{
+              kind: 'tools',
+              categoryName
+            }}
+          />
+        {/if}
+        <slot name="tools" />
+      </div>
+    {/if}
+    {#if selected && type === 'nested-selectable'}
+      <div class="hulyNavGroup-header__arrow"><IconOpenedArrow size={'small'} /></div>
+    {/if}
+  </button>
+  {#if !empty}
+    <div {id} class="hulyNavGroup-content">
+      {#if (!isOpen && visible) || forciblyСollapsed}
+        <slot name="visible" {isOpen} />
+      {:else}
+        <slot />
+      {/if}
+    </div>
+  {/if}
+</div>

package/src/components/NavItem.svelte

@@ -0,0 +1,346 @@
+<!--
+// Copyright © 2021, 2023 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 { getEmbeddedLabel } from '@hanzo/platform'
+  import {
+    Icon,
+    Label,
+    IconDown,
+    AnySvelteComponent,
+    IconSize,
+    getTreeCollapsed,
+    setTreeCollapsed,
+    tooltip,
+    IconFolderExpanded,
+    IconFolderCollapsed
+  } from '..'
+
+  export let icon: Asset | AnySvelteComponent | undefined = undefined
+  export let folderIcon: boolean = false
+  export let iconProps: any | undefined = undefined
+  export let iconSize: IconSize = 'small'
+  export let label: IntlString | undefined = undefined
+  export let title: string | undefined = undefined
+  export let description: string | undefined = undefined
+  export let type: 'type-link' | 'type-tag' | 'type-anchor-link' | 'type-object' = 'type-link'
+  export let color: string | null = null
+  export let count: number | null = null
+  export let selected: boolean = false
+  export let indent: boolean = false
+  export let bold: boolean = false
+  export let disabled: boolean = false
+  export let isFold: boolean = false
+  export let isOpen: boolean = false
+  export let withBackground: boolean = false
+  export let showMenu: boolean = false
+  export let shouldTooltip: boolean = false
+  export let empty: boolean = false
+  export let collapsedPrefix: string = ''
+  export let visible: boolean = false
+  export let forciblyСollapsed: boolean = false
+  export let level: number = 0
+  export let _id: any = undefined
+
+  export let draggable: boolean = false
+
+  let labelEl: HTMLSpanElement
+  let labelWidth: number
+  let levelReset: boolean = false
+  let hovered: boolean = false
+
+  $: if (!showMenu && levelReset && !hovered) levelReset = false
+  $: isOpen = !getTreeCollapsed(_id, collapsedPrefix)
+  $: setTreeCollapsed(_id, !isOpen, collapsedPrefix)
+  $: visibleIcon = folderIcon ? (isOpen && !empty ? IconFolderExpanded : IconFolderCollapsed) : icon
+
+  const mouseOver = () => {
+    if (!hovered) {
+      labelWidth = labelEl.getBoundingClientRect().width
+      hovered = true
+    }
+    if (!levelReset && labelWidth < 16 && level > 0) levelReset = true
+  }
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<button
+  class="hulyNavItem-container line-height-auto {type} {type === 'type-anchor-link'
+    ? 'font-regular-12'
+    : 'font-regular-14'}"
+  class:selected
+  class:bold
+  class:indent
+  class:disabled
+  class:showMenu
+  {draggable}
+  class:noActions={$$slots.actions === undefined}
+  on:dragstart
+  on:dragover
+  on:dragend
+  on:drop
+  on:mouseover={mouseOver}
+  on:mouseleave={() => {
+    if (levelReset && !showMenu) levelReset = false
+    hovered = false
+  }}
+  on:click={() => {
+    if (selected && isFold) isOpen = !isOpen
+  }}
+  on:click
+  on:contextmenu
+>
+  {#if isFold}
+    <button
+      class="hulyNavItem-chevron"
+      class:isOpen
+      style:margin-left={`${(levelReset ? 0 : level) * 1.25}rem`}
+      disabled={empty}
+      on:click|stopPropagation={() => {
+        if (!empty) isOpen = !isOpen
+      }}
+    >
+      {#if !empty}<IconDown size={'x-small'} />{/if}
+    </button>
+  {/if}
+  {#if visibleIcon || (type === 'type-tag' && color)}
+    <div class="hulyNavItem-icon" class:withBackground class:w-auto={iconSize === 'x-small'}>
+      {#if type !== 'type-tag' && visibleIcon}
+        <Icon icon={visibleIcon} size={iconSize} {iconProps} />
+      {:else if type === 'type-tag'}
+        <div style:background-color={color} class="hulyNavItem-icon__tag" />
+      {/if}
+    </div>
+  {/if}
+  <span
+    bind:this={labelEl}
+    use:tooltip={shouldTooltip ? { label: label ?? getEmbeddedLabel(title ?? ''), direction: 'top' } : undefined}
+    class="{description ? 'hulyNavItem-wideLabel' : 'hulyNavItem-label'} overflow-label"
+    class:flex-grow={!(type === 'type-anchor-link')}
+    style:color={type === 'type-tag' && selected ? color : null}
+  >
+    {#if description}
+      <span class="hulyNavItem-label font-medium-12 line-height-auto mr-0-5">
+        {#if label}<Label {label} />{/if}
+        {#if title}{title}{/if}
+        <slot />
+      </span>
+      {description}
+    {:else}
+      {#if label}<Label {label} />{/if}
+      {#if title}{title}{/if}
+      <slot />
+    {/if}
+  </span>
+  {#if $$slots.extra}<slot name="extra" />{/if}
+  {#if showMenu || $$slots.actions}
+    <div class="hulyNavItem-actions">
+      <slot name="actions" />
+    </div>
+  {/if}
+  {#if count !== null}
+    <span class="hulyNavItem-count font-bold-12">
+      {count}
+    </span>
+  {/if}
+  <slot name="notify" />
+</button>
+{#if (isFold && (isOpen || (!isOpen && visible)) && !empty) || forciblyСollapsed}
+  <div class="hulyNavItem-dropbox">
+    {#if (!isOpen && visible) || forciblyСollapsed}
+      <slot name="visible" {isOpen} />
+    {:else}
+      <slot name="dropbox" />
+    {/if}
+  </div>
+{/if}
+
+<style lang="scss">
+  .hulyNavItem-container {
+    overflow: hidden;
+    display: flex;
+    justify-content: stretch;
+    align-items: center;
+    padding: 0;
+    min-width: 0;
+    min-height: var(--global-small-Size);
+    border: none;
+    border-radius: var(--small-BorderRadius);
+    outline: none;
+
+    .hulyNavItem-chevron,
+    .hulyNavItem-icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-shrink: 0;
+    }
+    .hulyNavItem-chevron {
+      margin: 0;
+      margin-right: var(--spacing-0_75);
+      padding: 0;
+      width: 0.75rem;
+      height: 0.75rem;
+      color: var(--global-tertiary-TextColor);
+      border: none;
+      border-radius: var(--min-BorderRadius);
+      outline: none;
+
+      &:disabled {
+        pointer-events: none;
+      }
+    }
+    .hulyNavItem-icon {
+      margin-right: var(--spacing-1);
+      width: var(--global-min-Size);
+      height: var(--global-min-Size);
+      color: var(--global-primary-TextColor);
+
+      &__tag {
+        flex-shrink: 0;
+        width: 0.625rem;
+        height: 0.625rem;
+        border-radius: var(--min-BorderRadius);
+      }
+      &.withBackground {
+        width: var(--global-extra-small-Size);
+        height: var(--global-extra-small-Size);
+        background: var(--global-ui-BackgroundColor);
+        border: 1px solid var(--global-subtle-ui-BorderColor);
+        border-radius: var(--extra-small-BorderRadius);
+      }
+    }
+    .hulyNavItem-label,
+    .hulyNavItem-wideLabel {
+      text-align: left;
+      color: var(--global-primary-TextColor);
+    }
+    .hulyNavItem-wideLabel {
+      font-size: 0.875rem;
+    }
+    .hulyNavItem-actions {
+      display: none;
+      align-items: center;
+      flex-shrink: 0;
+      min-width: 0;
+      min-height: 0;
+      gap: var(--spacing-0_25);
+    }
+    .hulyNavItem-count {
+      margin: 0 var(--spacing-1);
+      color: var(--global-tertiary-TextColor);
+    }
+    &:not(.selected):hover,
+    &:not(.selected).showMenu {
+      background-color: var(--global-ui-hover-highlight-BackgroundColor);
+    }
+    &.selected {
+      cursor: default;
+      background-color: var(--global-ui-highlight-BackgroundColor);
+
+      .hulyNavItem-count {
+        color: var(--global-secondary-TextColor);
+      }
+    }
+
+    &.type-link {
+      padding: 0 var(--spacing-0_5) 0 var(--spacing-1_25);
+
+      &.selected {
+        &.indent {
+          padding-left: var(--spacing-4);
+        }
+        .hulyNavItem-icon {
+          color: var(--global-accent-TextColor);
+        }
+        .hulyNavItem-label:not(.description) {
+          color: var(--global-accent-TextColor);
+        }
+      }
+    }
+    &.type-tag {
+      padding: 0 var(--spacing-1_25);
+
+      .hulyNavItem-icon {
+        width: 0.75rem;
+        margin-right: 0.625rem;
+      }
+    }
+    &.type-object {
+      padding: 0 var(--spacing-0_5);
+
+      .hulyNavItem-icon {
+        margin-right: var(--spacing-0_75);
+        width: var(--global-extra-small-Size);
+        height: var(--global-extra-small-Size);
+        background-color: var(--global-ui-BackgroundColor);
+        border-radius: var(--extra-small-BorderRadius);
+      }
+      &.selected {
+        .hulyNavItem-label:not(.description) {
+          color: var(--global-accent-TextColor);
+        }
+        .hulyNavItem-icon {
+          color: var(--global-accent-TextColor);
+        }
+      }
+    }
+    &.type-anchor-link {
+      padding: 0 var(--spacing-1_5) 0 var(--spacing-1_25);
+      width: fit-content;
+      min-height: 1.75rem;
+
+      .hulyNavItem-icon,
+      .hulyNavItem-label {
+        color: var(--global-secondary-TextColor);
+      }
+      .hulyNavItem-label {
+        font-weight: 500;
+      }
+      &.selected .hulyNavItem-icon,
+      &.selected .hulyNavItem-label {
+        color: var(--global-primary-TextColor);
+      }
+    }
+    &.indent {
+      padding-left: var(--spacing-4);
+    }
+    &:hover .hulyNavItem-chevron:enabled {
+      color: var(--global-secondary-TextColor);
+      background-color: var(--button-tertiary-hover-BackgroundColor);
+    }
+
+    &:not(.noActions):hover .hulyNavItem-actions,
+    &:not(.noActions).showMenu .hulyNavItem-actions {
+      display: flex;
+    }
+    &.disabled {
+      cursor: not-allowed;
+
+      .hulyNavItem-icon {
+        opacity: 0.5;
+      }
+      .hulyNavItem-label {
+        color: rgb(var(--theme-caption-color) / 40%);
+      }
+    }
+  }
+  .hulyNavItem-dropbox {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+  }
+</style>

package/src/components/NestedDropdown.svelte

@@ -0,0 +1,62 @@
+<!--
+// 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 } from '@hanzo/platform'
+  import { createEventDispatcher } from 'svelte'
+  import ui from '../plugin'
+  import { showPopup } from '../popups'
+  import type { DropdownIntlItem } from '../types'
+  import Button from './Button.svelte'
+  import DropdownIcon from './icons/Dropdown.svelte'
+  import NestedMenu from './NestedMenu.svelte'
+  import Label from './Label.svelte'
+
+  export let items: [DropdownIntlItem, DropdownIntlItem[]][]
+  export let label: IntlString = ui.string.DropdownDefaultLabel
+  export let disabled: boolean = false
+  export let selected: DropdownIntlItem | undefined = undefined
+
+  let container: HTMLElement
+  let opened: boolean = false
+
+  const dispatch = createEventDispatcher()
+
+  function openPopup (): void {
+    if (!opened) {
+      opened = true
+      showPopup(NestedMenu, { items }, container, (result) => {
+        if (result !== undefined) {
+          selected = result
+          dispatch('selected', result.id)
+        }
+        opened = false
+      })
+    }
+  }
+</script>
+
+<div bind:this={container}>
+  <Button width={'min-content'} {disabled} on:click={openPopup}>
+    <span slot="content" class="overflow-label disabled flex-grow text-left mr-2">
+      <Label label={selected !== undefined ? selected.label : label} />
+    </span>
+    <svelte:fragment slot="iconRight">
+      <DropdownIcon
+        size={'small'}
+        fill={!disabled ? 'var(--primary-button-content-color)' : 'var(--theme-dark-color)'}
+      />
+    </svelte:fragment>
+  </Button>
+</div>