@hanzo/ui 0.5.24 → 0.6.16

package/src/components/StylishEdit.svelte

@@ -0,0 +1,127 @@
+<!--
+// 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 Label from './Label.svelte'
+
+  export let label: IntlString | undefined = undefined
+  export let width: string | undefined = undefined
+  export let value: string | undefined = undefined
+  export let error: string | undefined = undefined
+  export let password: boolean | undefined = undefined
+  export let id: string | undefined = undefined
+  export let name: string | undefined = undefined
+  export let disabled: boolean = false
+</script>
+
+<div class="editbox{error ? ' error' : ''}" style={width ? 'width: ' + width : ''}>
+  {#if password}
+    <input
+      type="password"
+      class:nolabel={!label}
+      {id}
+      {name}
+      bind:value
+      on:blur
+      on:change
+      on:keyup
+      on:input
+      autocomplete="off"
+      placeholder=" "
+      spellcheck="false"
+      autocapitalize="off"
+      {disabled}
+    />
+  {:else}
+    <input
+      type="text"
+      class:nolabel={!label}
+      {id}
+      {name}
+      bind:value
+      on:blur
+      on:change
+      on:keyup
+      on:input
+      autocomplete="off"
+      placeholder=" "
+      spellcheck="false"
+      autocapitalize="off"
+      {disabled}
+    />
+  {/if}
+  {#if label}
+    <div class="label"><Label {label} /></div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .editbox {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    min-width: 3rem;
+    height: 3.25rem;
+    background-color: var(--theme-button-default);
+    border: 1px solid var(--theme-button-border);
+    border-radius: 0.75rem;
+    caret-color: var(--theme-caret-color);
+
+    &:focus-within {
+      background-color: var(--theme-button-focused);
+      border-color: var(--theme-list-divider-color);
+    }
+
+    input {
+      height: 3.25rem;
+      margin: 0;
+      padding: 0.875rem 1.25rem 0px;
+      background-color: transparent;
+      border: none;
+      border-radius: 0.75rem;
+
+      &:disabled {
+        background-color: var(--theme-button-pressed);
+      }
+    }
+
+    .nolabel {
+      padding-top: 0;
+    }
+
+    .label {
+      position: absolute;
+      top: 1rem;
+      left: 1.25rem;
+      font-size: 0.75rem;
+      color: var(--theme-caption-color);
+      opacity: 0.8;
+      transition: top 200ms;
+      pointer-events: none;
+      user-select: none;
+    }
+    input:focus + .label,
+    input:not(:placeholder-shown) + .label {
+      top: 0.5rem;
+    }
+  }
+  .error {
+    border: 1px solid var(--system-error-60-color);
+    &:focus-within {
+      border-color: var(--system-error-color);
+    }
+  }
+</style>

package/src/components/Submenu.svelte

@@ -0,0 +1,68 @@
+<!--
+// 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 { Asset, IntlString } from '@hanzo/platform'
+  import { tooltip } from '../tooltips'
+  import type { LabelAndProps, AnySvelteComponent, AnyComponent } from '../types'
+  import Component from './Component.svelte'
+  import Icon from './Icon.svelte'
+  import Label from './Label.svelte'
+  import Menu from './Menu.svelte'
+
+  export let component: AnySvelteComponent | AnyComponent | undefined = undefined
+  export let props: any = {}
+  export let options: LabelAndProps = { kind: 'submenu' }
+  export let focusIndex = -1
+
+  export let icon: Asset | AnySvelteComponent | undefined = undefined
+  export let text: string | undefined = undefined
+  export let label: IntlString | undefined = undefined
+  export let labelProps: Record<string, any> = {}
+  export let withHover: boolean = false
+  export let element: HTMLElement | undefined = undefined
+
+  let optionsMod: LabelAndProps
+  $: optionsMod = { component: options.component ?? Menu, props, element, kind: 'submenu' }
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  bind:this={element}
+  on:keydown
+  on:mouseover
+  on:click
+  use:tooltip={optionsMod}
+  class="antiPopup-submenu"
+  class:withHover
+  tabindex={focusIndex}
+>
+  {#if component}
+    {#if typeof component === 'string'}
+      <Component is={component} {props} />
+    {:else}
+      <svelte:component this={component} {...props} />
+    {/if}
+  {:else}
+    {#if icon}
+      <div class="icon"><Icon {icon} size={'small'} /></div>
+    {/if}
+    <span class="overflow-label pr-1">
+      {#if label}<Label {label} params={labelProps} />
+      {:else if text}{text}{/if}
+    </span>
+  {/if}
+</div>

package/src/components/Switcher.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  //
+  // © 2023 Hardcore Engineering, Inc. All Rights Reserved.
+  // Licensed under the Eclipse Public License v2.0 (SPDX: EPL-2.0).
+  //
+
+  import { createEventDispatcher } from 'svelte'
+  import type { TabItem } from '../types'
+  import SwitcherBase from './SwitcherBase.svelte'
+
+  export let items: TabItem[]
+  export let selected: string | number = ''
+  export let kind: 'nuance' | 'subtle' = 'nuance'
+  export let name: string
+  export let onlyIcons: boolean = false
+
+  const dispatch = createEventDispatcher()
+</script>
+
+<div class="switcher-container {kind}">
+  {#each items as item}
+    <SwitcherBase
+      id={item.id}
+      {name}
+      {kind}
+      checked={selected === item.id}
+      icon={item.icon}
+      color={item.color}
+      title={onlyIcons ? undefined : item.label}
+      label={onlyIcons ? undefined : item.labelIntl}
+      labelParams={onlyIcons ? undefined : item.labelParams}
+      tooltip={item.tooltip ? { label: item.tooltip } : undefined}
+      on:change={() => {
+        dispatch('select', item)
+        if (item.action !== undefined) item.action()
+      }}
+    />
+  {/each}
+</div>
+
+<style lang="scss">
+  .switcher-container {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    flex-shrink: 0;
+    min-width: 0;
+    gap: var(--spacing-0_5);
+    border-radius: var(--small-BorderRadius);
+
+    &.subtle {
+      background-color: var(--selector-BackgroundColor);
+    }
+  }
+</style>

package/src/components/SwitcherBase.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  //
+  // © 2023 Hardcore Engineering, Inc. All Rights Reserved.
+  // Licensed under the Eclipse Public License v2.0 (SPDX: EPL-2.0).
+  //
+
+  import type { Asset, IntlString } from '@hanzo/platform'
+  import type { AnySvelteComponent, LabelAndProps } from '../types'
+  import type { ComponentType } from 'svelte'
+  import Icon from './Icon.svelte'
+  import Label from './Label.svelte'
+  import { tooltip as tp } from '..'
+
+  export let id: string | number
+  export let icon: Asset | AnySvelteComponent | ComponentType | undefined = undefined
+  export let color: string | undefined = undefined
+  export let label: IntlString | undefined = undefined
+  export let labelParams: Record<string, any> = {}
+  export let title: string | undefined = undefined
+  export let kind: 'nuance' | 'subtle' = 'nuance'
+  export let name: string
+  export let checked: boolean = false
+  export let tooltip: LabelAndProps | undefined = undefined
+
+  $: woTitle = title === undefined && label === undefined
+</script>
+
+<label use:tp={tooltip} class="switcher-element__wrapper" data-view={tooltip?.label} data-id={`tab-${id}`}>
+  <input type="radio" class="switcher" {name} {checked} on:change />
+  <div class="switcher-element {kind}" class:woTitle>
+    {#if icon}<div class="icon"><Icon {icon} size={'small'} fill={color} /></div>{/if}
+    {#if label}<span><Label {label} params={labelParams} /></span>{/if}
+    {#if title}<span>{title}</span>{/if}
+  </div>
+</label>
+
+<style lang="scss">
+  .switcher-element,
+  .switcher-element__wrapper {
+    display: flex;
+    min-width: var(--global-small-Size);
+    min-height: var(--global-small-Size);
+  }
+  .switcher-element {
+    justify-content: center;
+    align-items: center;
+    flex-wrap: nowrap;
+    flex-shrink: 0;
+    gap: var(--spacing-0_75);
+    border-radius: var(--small-BorderRadius);
+
+    &:not(.woTitle) {
+      padding: 0 var(--spacing-1_5);
+    }
+    &.woTitle {
+      padding: 0 var(--spacing-1);
+    }
+    .icon {
+      width: var(--spacing-2);
+      height: var(--spacing-2);
+      color: var(--global-secondary-IconColor);
+    }
+    span {
+      text-wrap: nowrap;
+      color: var(--global-secondary-TextColor);
+      user-select: none;
+    }
+  }
+  .switcher {
+    overflow: hidden;
+    position: absolute;
+    margin: -1px;
+    padding: 0;
+    width: 1px;
+    height: 1px;
+    border: 0;
+    clip: rect(0 0 0 0);
+
+    &:checked + .switcher-element.nuance {
+      background-color: var(--global-accent-BackgroundColor);
+
+      .icon {
+        color: var(--global-on-nuance-TextColor);
+      }
+      span {
+        color: var(--global-on-nuance-TextColor);
+      }
+    }
+    &:checked + .switcher-element.subtle {
+      background-color: var(--global-ui-active-BackgroundColor);
+
+      .icon {
+        color: var(--global-primary-IconColor);
+      }
+      span {
+        color: var(--global-primary-TextColor);
+      }
+    }
+    &:focus + .switcher-element {
+      box-shadow: 0 0 0 var(--spacing-0_25) var(--global-focus-inset-BorderColor);
+      outline: var(--spacing-0_25) solid var(--global-focus-BorderColor);
+      outline-offset: var(--spacing-0_25);
+    }
+  }
+  .switcher-element__wrapper:hover .switcher-element {
+    background-color: var(--selector-BackgroundColor);
+    cursor: pointer;
+
+    .icon {
+      color: var(--global-primary-IconColor);
+    }
+    span {
+      color: var(--global-primary-TextColor);
+    }
+  }
+</style>

package/src/components/TabList.svelte

@@ -0,0 +1,290 @@
+<!--
+// 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 { tooltip } from '../tooltips'
+  import type { TabItem, IconSize, WidthType, DropdownIntlItem } from '../types'
+  import Icon from './Icon.svelte'
+  import Label from './Label.svelte'
+  import DropdownLabelsIntl from './DropdownLabelsIntl.svelte'
+  import { Scroller, checkAdaptiveMatching, deviceOptionsStore as deviceInfo } from '..'
+
+  export let selected: string | number | Array<string | number> = ''
+  export let multiselect: boolean = false
+  export let items: TabItem[]
+  export let kind: 'normal' | 'regular' | 'plain' | 'separated' | 'separated-free' = 'normal'
+  export let expansion: 'stretch' | 'default' = 'default'
+  export let onlyIcons: boolean = false
+  export let size: 'small' | 'medium' = 'medium'
+  export let adaptiveShrink: WidthType | null = null
+  export let padding: string | undefined = undefined
+  export let bottomPadding: string | undefined = undefined
+
+  const dispatch = createEventDispatcher()
+
+  if (multiselect && selected === '') selected = []
+  if (selected === '') selected = items[0].id
+
+  const getSelected = (id: string | number, selected: string | number | Array<string | number>): boolean => {
+    let res: boolean = false
+    if (multiselect && Array.isArray(selected)) res = selected.filter((it) => it === id).length > 0
+    else if (selected === id) res = true
+    return res
+  }
+  const tabs: HTMLElement[] = []
+
+  let iconSize: IconSize
+  $: iconSize = onlyIcons ? (size === 'small' ? 'small' : 'medium') : size === 'small' ? 'x-small' : 'small'
+
+  $: devSize = $deviceInfo.size
+  $: adaptive = adaptiveShrink !== null ? checkAdaptiveMatching(devSize, adaptiveShrink) : false
+
+  let ddItems: DropdownIntlItem[]
+  $: ddItems = items.map((it) => ({ id: it.id, label: it.labelIntl, params: it.labelParams })) as DropdownIntlItem[]
+</script>
+
+{#if items.length > 0}
+  {#if adaptive}
+    <DropdownLabelsIntl
+      items={ddItems}
+      {size}
+      selected={Array.isArray(selected) ? selected[0] : selected}
+      on:selected={(e) => {
+        const item = items.filter((it) => it.id === e.detail)[0]
+        if (Array.isArray(selected)) selected[0] = item.id
+        else selected = item.id
+        dispatch('select', item)
+      }}
+    />
+  {:else}
+    <Scroller horizontal stickedScrollBars {padding} {bottomPadding}>
+      <div class="tablist-container {kind} {size} {expansion}">
+        {#each items as item, i}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y-no-static-element-interactions -->
+          <div
+            bind:this={tabs[i]}
+            class={kind === 'normal' || kind === 'regular' ? 'button' : 'plain'}
+            class:separated={kind === 'separated' || kind === 'separated-free'}
+            class:free={kind === 'separated-free'}
+            class:onlyIcons
+            class:selected={getSelected(item.id, selected)}
+            class:stretch={expansion === 'stretch'}
+            data-view={item.tooltip}
+            data-id={`tab-${item.id}`}
+            use:tooltip={{ label: item.tooltip ?? undefined, element: tabs[i] ?? undefined }}
+            on:click={() => {
+              if (multiselect) {
+                if (Array.isArray(selected)) {
+                  if (selected.includes(item.id)) selected = selected.filter((it) => it !== item.id)
+                  else selected.push(item.id)
+                }
+              } else selected = item.id
+              dispatch('select', item)
+              items = items
+            }}
+          >
+            {#if item.icon}
+              <div class="icon">
+                <Icon icon={item.icon} size={iconSize} fill={item.color ?? 'currentColor'} />
+              </div>
+            {:else if item.color}
+              <div class="color" style:background-color={item.color} />
+            {/if}
+            {#if item.label || item.labelIntl}
+              <span class="overflow-label" class:ml-1-5={item.icon || item.color}>
+                {#if item.label}
+                  {item.label}
+                {:else if item.labelIntl}
+                  <Label label={item.labelIntl} params={item.labelParams} />
+                {/if}
+              </span>
+            {/if}
+          </div>
+        {/each}
+      </div>
+    </Scroller>
+  {/if}
+{/if}
+
+<style lang="scss">
+  .tablist-container {
+    display: flex;
+    align-items: center;
+    width: fit-content;
+
+    &.stretch {
+      width: 100%;
+    }
+
+    .button {
+      position: relative;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      width: fit-content;
+      min-height: 1.375rem;
+      max-width: 12.5rem;
+      font-size: 0.8125rem;
+      transition-property: background-color, color;
+      transition-duration: 0.15s;
+
+      &:not(.selected) {
+        cursor: pointer;
+      }
+      .color {
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 0.25rem;
+      }
+      &::before {
+        position: absolute;
+        top: 50%;
+        left: -1.5px;
+        height: 70%;
+        border-left: 1px solid var(--button-border-color);
+        transform: translateY(-50%);
+      }
+    }
+    .button:not(.selected) + .button:not(.selected)::before {
+      content: '';
+    }
+
+    &.small {
+      .button {
+        padding: 0 0.5rem;
+
+        &.onlyIcons {
+          padding: 0.375rem;
+        }
+      }
+      &.normal .button {
+        height: 1.5rem;
+      }
+      &.regular .button {
+        height: 1.375rem;
+      }
+    }
+    &.medium .button {
+      height: 2rem;
+      padding: 0.25rem 0.75rem;
+
+      &.onlyIcons {
+        padding: 0.375rem;
+      }
+    }
+    &.normal {
+      background-color: var(--theme-tablist-color);
+      border-radius: 0.25rem;
+
+      &.stretch {
+        flex-grow: 1;
+      }
+
+      .button {
+        color: var(--theme-trans-color);
+        border: 1px solid transparent;
+        border-radius: 0.25rem;
+
+        &.selected {
+          color: var(--theme-caption-color);
+          background-color: var(--theme-button-default);
+          border-color: var(--theme-button-border);
+
+          &:hover {
+            background-color: var(--theme-button-hovered);
+          }
+        }
+      }
+    }
+    &.regular {
+      background-color: var(--theme-button-default);
+      border: 1px solid var(--theme-button-border);
+      border-radius: 0.25rem;
+
+      &.stretch {
+        flex-grow: 1;
+      }
+
+      .button {
+        background-color: transparent;
+        border-radius: calc(0.25rem - 1px);
+
+        &:hover {
+          color: var(--theme-caption-color);
+        }
+        &.selected {
+          color: var(--theme-caption-color);
+          background-color: var(--theme-button-pressed);
+        }
+        &:not(:first-child) {
+          margin-left: 0.125rem;
+        }
+      }
+    }
+
+    &.plain,
+    &.separated {
+      margin-bottom: -1px;
+      height: 100%;
+    }
+    .plain {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      flex-shrink: 0;
+      width: fit-content;
+      height: 100%;
+      max-width: 12.5rem;
+      min-height: 3.25rem;
+      color: var(--theme-dark-color);
+      border-top: 2px solid transparent;
+      border-bottom: 2px solid transparent;
+
+      &.stretch {
+        flex-grow: 1;
+      }
+
+      &:not(.selected) {
+        cursor: pointer;
+      }
+      &.selected {
+        color: var(--theme-caption-color);
+        border-bottom-color: var(--theme-tablist-plain-color);
+      }
+      &:not(:first-child, .separated) {
+        margin-left: 2rem;
+      }
+      &.separated {
+        position: relative;
+        margin: 0 1.25rem;
+
+        &::before {
+          position: absolute;
+          content: '';
+          top: 50%;
+          left: -1.25rem;
+          width: 1px;
+          height: 2rem;
+          background-color: var(--theme-tablist-plain-divider);
+          transform: translateY(-50%);
+        }
+        &.free:first-child::before {
+          content: none;
+        }
+      }
+    }
+  }
+</style>

package/src/components/Tabs.svelte

@@ -0,0 +1,45 @@
+<!--
+// 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 { TabModel } from '../types'
+  import Component from './Component.svelte'
+  import TabsControl from './TabsControl.svelte'
+
+  export let model: TabModel
+  export let selected = 0
+  export let padding: string | undefined = undefined
+  export let noMargin: boolean = false
+  export let size: 'small' | 'medium' | 'large' = 'medium'
+</script>
+
+<TabsControl {model} {padding} {noMargin} {size} bind:selected>
+  <svelte:fragment slot="rightButtons">
+    {#if $$slots.rightButtons}
+      <div class="flex">
+        <slot name="rightButtons" />
+      </div>
+    {/if}
+  </svelte:fragment>
+  <svelte:fragment slot="content" let:selected>
+    {@const tab = model[selected]}
+    {#if tab}
+      {#if typeof tab.component === 'string'}
+        <Component is={tab.component} props={tab.props} on:change on:open />
+      {:else}
+        <svelte:component this={tab.component} {...tab.props} on:change on:open />
+      {/if}
+    {/if}
+  </svelte:fragment>
+</TabsControl>