@hanzo/ui 0.5.23 → 0.6.15

package/src/components/ActionIcon.svelte

@@ -0,0 +1,88 @@
+<!--
+// 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 { ComponentType } from 'svelte'
+  import type { AnySvelteComponent, TooltipAlignment } from '../types'
+
+  import { tooltip } from '../tooltips'
+  import Icon from './Icon.svelte'
+
+  export let label: IntlString = '' as IntlString
+  export let labelProps: any = undefined
+  export let direction: TooltipAlignment | undefined = undefined
+  export let icon: Asset | AnySvelteComponent | ComponentType
+  export let iconProps: any | undefined = undefined
+  export let size: 'x-small' | 'small' | 'medium' | 'large'
+  export let action: (ev: MouseEvent) => Promise<void> | void = async () => {}
+  export let invisible: boolean = false
+  export let disabled: boolean = false
+  export let keys: string[] | undefined = undefined
+</script>
+
+<button
+  class="button {size}"
+  use:tooltip={{ label, direction, props: labelProps, keys }}
+  tabindex="0"
+  on:click|stopPropagation|preventDefault={action}
+  on:contextmenu
+  {disabled}
+>
+  <div class="icon {size}" class:invisible>
+    <Icon {icon} {size} {iconProps} />
+  </div>
+</button>
+
+<style lang="scss">
+  .button {
+    color: inherit;
+    border: none;
+    border-radius: 0.125rem;
+    cursor: pointer;
+
+    .icon {
+      color: var(--theme-halfcontent-color);
+      &.invisible {
+        opacity: 0;
+      }
+    }
+    &:not(:disabled):hover .icon {
+      color: var(--theme-caption-color);
+      opacity: 1;
+    }
+    &:focus-visible {
+      box-shadow: 0 0 0 2px var(--primary-button-outline);
+      .icon {
+        color: var(--theme-caption-color);
+        opacity: 1;
+      }
+    }
+    &:disabled {
+      cursor: default;
+    }
+  }
+  .small {
+    width: 1rem;
+    height: 1rem;
+  }
+  .medium {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+  .large {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+</style>

package/src/components/BarDashboard.svelte

@@ -0,0 +1,47 @@
+<!--
+// 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 { DashboardItem } from '../types'
+  import MultiProgress from './MultiProgress.svelte'
+
+  export let items: DashboardItem[] = []
+
+  $: max = Math.max(...items.map((p) => p.values.reduce((acc, val) => (acc += val.value), 0)))
+</script>
+
+<div class="grid">
+  {#each items as item (item._id)}
+    <div>
+      {item.label}
+    </div>
+    <div class="w-full max-w-240">
+      <MultiProgress {max} values={item.values} />
+    </div>
+  {/each}
+</div>
+
+<style lang="scss">
+  .grid {
+    display: grid;
+    grid-auto-flow: column;
+    justify-content: flex-start;
+    align-items: center;
+    row-gap: 1rem;
+    column-gap: 1rem;
+
+    grid-template-columns: 1fr 5fr;
+    grid-auto-flow: row;
+  }
+</style>

package/src/components/BooleanIcon.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  export let value: any
+</script>
+
+<div class="container" class:yes={value === true} class:no={value === false}>
+  <svg class="svg-small" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <circle class:yes={value === true} class:no={value === false} cx="8" cy="8" r="6" />
+    {#if value === true}
+      <polygon fill="#fff" points="7.4,10.9 4.9,8.4 5.7,7.6 7.3,9.1 10.2,5.6 11.1,6.4 " />
+    {:else if value === false}
+      <polygon fill="#fff" points="10.7,6 10,5.3 8,7.3 6,5.3 5.3,6 7.3,8 5.3,10 6,10.7 8,8.7 10,10.7 10.7,10 8.7,8 " />
+    {:else}
+      <path
+        fill="#fff"
+        d="M7.3,9.3h1.3V9c0.1-0.5,0.6-0.9,1.1-1.4c0.4-0.4,0.8-0.9,0.8-1.6c0-1.1-0.8-1.8-2.2-1.8c-1.4,0-2.4,0.8-2.5,2.2 h1.4c0.1-0.6,0.4-1,1-1C8.8,5.4,9,5.7,9,6.2c0,0.4-0.3,0.7-0.7,1.1c-0.5,0.5-1,0.9-1,1.7V9.3z M8,11.6c0.5,0,0.9-0.4,0.9-0.9 c0-0.5-0.4-0.9-0.9-0.9c-0.5,0-0.9,0.4-0.9,0.9C7.1,11.2,7.5,11.6,8,11.6z"
+      />
+    {/if}
+  </svg>
+</div>
+
+<style lang="scss">
+  .container {
+    fill: #77818e;
+    &.yes {
+      fill: #77c07b;
+    }
+    &.no {
+      fill: #f96e50;
+    }
+  }
+</style>

package/src/components/Breadcrumb.svelte

@@ -0,0 +1,102 @@
+<!--
+// 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 '@hanzo/platform'
+  import { AnySvelteComponent } from '../types'
+  import { ComponentType } from 'svelte'
+  import Icon from './Icon.svelte'
+  import Label from './Label.svelte'
+
+  export let icon: Asset | AnySvelteComponent | ComponentType | undefined = undefined
+  export let iconProps: any | undefined = undefined
+  export let iconWidth: string | undefined = undefined
+  export let iconMargin: string | undefined = undefined
+  export let withoutIconBackground = false
+  export let label: IntlString | undefined = undefined
+  export let title: string | undefined = undefined
+  export let size: 'large' | 'small'
+  export let isCurrent: boolean = false
+</script>
+
+<button class="hulyBreadcrumb-container {size}" class:current={isCurrent} on:click>
+  {#if size === 'large' && icon}
+    <div
+      class="hulyBreadcrumb-avatar"
+      style:width={iconWidth ?? null}
+      style:margin={iconMargin}
+      class:withoutIconBackground
+    >
+      <Icon {icon} size={'small'} {iconProps} />
+    </div>
+  {/if}
+  <span
+    class="{size === 'large'
+      ? 'heading-medium-16'
+      : 'font-regular-14'} line-height-auto hulyBreadcrumb-label overflow-label"
+  >
+    {#if label}<Label {label} />{/if}
+    {#if title}{title}{/if}
+  </span>
+</button>
+
+<style lang="scss">
+  .hulyBreadcrumb-container {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-0_75);
+    margin: 0;
+    padding: 0 var(--spacing-1);
+    min-width: 0;
+    border: none;
+    outline: none;
+    cursor: default;
+
+    .hulyBreadcrumb-avatar {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-shrink: 0;
+      padding: var(--spacing-0_5);
+      width: var(--global-extra-small-Size);
+      height: var(--global-extra-small-Size);
+      color: var(--global-secondary-TextColor);
+      background-color: var(--global-ui-BackgroundColor);
+      border-radius: var(--extra-small-BorderRadius);
+
+      &.withoutIconBackground {
+        background-color: transparent;
+      }
+    }
+    .hulyBreadcrumb-label {
+      padding: var(--spacing-0_5) 0;
+      color: var(--global-secondary-TextColor);
+    }
+    &.current .hulyBreadcrumb-label {
+      font-weight: 700;
+    }
+    &:not(.current) {
+      cursor: pointer;
+
+      &:hover {
+        .hulyBreadcrumb-avatar {
+          background-color: var(--global-ui-hover-BackgroundColor);
+        }
+        .hulyBreadcrumb-label {
+          color: var(--global-primary-LinkColor);
+        }
+      }
+    }
+  }
+</style>

package/src/components/Breadcrumbs.svelte

@@ -0,0 +1,73 @@
+<!--
+// 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 { IntlString } from '@hanzo/platform'
+  import { createEventDispatcher } from 'svelte'
+  import { BreadcrumbItem } from '../types'
+  import Breadcrumb from './Breadcrumb.svelte'
+  import ChevronRight from './icons/ChevronRight.svelte'
+  import Label from './Label.svelte'
+
+  export let items: BreadcrumbItem[]
+  export let afterLabel: IntlString | undefined = undefined
+  export let size: 'large' | 'small' = 'large'
+  export let selected: number | null = null
+  export let currentOnly: boolean = false
+  export let hideAfter: boolean = false
+
+  const dispatch = createEventDispatcher()
+</script>
+
+<div class="hulyBreadcrumbs-container {size}">
+  {#each items as item, i}
+    {#if i !== 0}<ChevronRight size={'small'} />{/if}
+    <Breadcrumb
+      {...item}
+      {size}
+      isCurrent={selected === i || currentOnly}
+      on:click={() => {
+        if (selected !== i) dispatch('select', i)
+      }}
+    />
+  {/each}
+  {#if (afterLabel || $$slots.afterLabel) && !hideAfter}
+    <span class="hulyBreadcrumbs-afterLabel font-medium-12">
+      {#if afterLabel}<Label label={afterLabel} />{/if}
+      <slot name="afterLabel" />
+    </span>
+  {/if}
+</div>
+
+<style lang="scss">
+  .hulyBreadcrumbs-container {
+    display: flex;
+    align-items: center;
+    height: var(--global-small-Size);
+    min-width: 0;
+
+    .hulyBreadcrumbs-afterLabel {
+      max-width: 10rem;
+      white-space: nowrap;
+      word-break: break-all;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      padding: var(--spacing-0_25) var(--spacing-0_5);
+      text-transform: uppercase;
+      background-color: var(--global-ui-hover-BackgroundColor);
+      color: var(--global-secondary-TextColor);
+      border-radius: 0.25rem;
+    }
+  }
+</style>

package/src/components/Button.svelte

@@ -0,0 +1,196 @@
+<!--
+// 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 { 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 '@hanzo/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"
+      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,117 @@
+<!--
+// 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 '@hanzo/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 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}
+  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>