@hanzo/ui 0.5.24 → 0.6.16

package/src/components/ScrollerBar.svelte

@@ -0,0 +1,181 @@
+<!--
+// Copyright © 2020, 2021 Hanzo <dev@hanzo.ai>.
+// Copyright © 2021 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 { onMount } from 'svelte'
+  import { resizeObserver } from '..'
+
+  export let scroller: HTMLElement
+  export let gap: 'none' | 'small' | 'big' = 'small'
+  export let padding: string | undefined = undefined
+
+  let divBar: HTMLElement
+  let isScrolling: boolean = false
+  let dX: number
+  let timer: any
+
+  let maskLeft: boolean = false
+  let maskRight: boolean = false
+  let mask: 'left' | 'right' | 'both' | 'none' = 'none'
+  let stepStyle: string
+  $: stepStyle = gap === 'small' ? 'gap-1' : gap === 'big' ? 'gap-2' : ''
+
+  const checkBar = (): void => {
+    if (divBar !== undefined && scroller !== undefined) {
+      const trackW = scroller.clientWidth
+      const scrollW = scroller.scrollWidth
+      const proc = scrollW / trackW
+      divBar.style.width = scroller.clientWidth / proc + 'px'
+      divBar.style.left = scroller.scrollLeft / proc + 'px'
+      if (mask === 'none') divBar.style.visibility = 'hidden'
+      else {
+        divBar.style.visibility = 'visible'
+        if (divBar !== undefined) {
+          if (timer != null) {
+            clearTimeout(timer)
+            divBar.style.opacity = '1'
+          }
+          timer = setTimeout(() => {
+            if (divBar != null) divBar.style.opacity = '0'
+          }, 2000)
+        }
+      }
+      if (scroller.clientWidth >= scroller.scrollWidth) divBar.style.visibility = 'hidden'
+    }
+  }
+
+  const onScroll = (event: PointerEvent): void => {
+    if (isScrolling && divBar !== undefined && scroller !== undefined) {
+      const rectScroll = scroller.getBoundingClientRect()
+      let X = event.clientX - dX
+      if (X < rectScroll.left) X = rectScroll.left
+      if (X > rectScroll.right - divBar.clientWidth) X = rectScroll.right - divBar.clientWidth
+      divBar.style.left = X - rectScroll.x + 'px'
+      const leftBar = X - rectScroll.x
+      const widthScroll = rectScroll.width - divBar.clientWidth
+      const procBar = leftBar / widthScroll
+      scroller.scrollLeft = (scroller.scrollWidth - scroller.clientWidth) * procBar
+    }
+  }
+  const onScrollEnd = (event: PointerEvent): void => {
+    const el: HTMLElement = event.currentTarget as HTMLElement
+    if (el !== undefined && isScrolling) {
+      document.removeEventListener('pointermove', onScroll)
+      document.body.style.userSelect = 'auto'
+      document.body.style.webkitUserSelect = 'auto'
+    }
+    document.removeEventListener('pointerup', onScrollEnd)
+    isScrolling = false
+  }
+  const onScrollStart = (event: PointerEvent): void => {
+    const el: HTMLElement = event.currentTarget as HTMLElement
+    if (el !== undefined && scroller !== undefined) {
+      dX = event.clientX - el.getBoundingClientRect().x
+      document.addEventListener('pointerup', onScrollEnd)
+      document.addEventListener('pointermove', onScroll)
+      document.body.style.userSelect = 'none'
+      document.body.style.webkitUserSelect = 'none'
+      isScrolling = true
+    }
+  }
+
+  const checkMask = (): void => {
+    maskLeft = scroller !== undefined && scroller.scrollLeft > 1
+    maskRight = scroller !== undefined && scroller.scrollWidth - scroller.scrollLeft - scroller.clientWidth > 1
+    if (maskLeft || maskRight) {
+      if (maskLeft && maskRight) mask = 'both'
+      else if (maskLeft) mask = 'left'
+      else if (maskRight) mask = 'right'
+    } else mask = 'none'
+
+    if (!isScrolling) checkBar()
+  }
+
+  onMount(() => {
+    if (scroller !== undefined) checkMask()
+  })
+</script>
+
+<div class="scrollerbar-container" use:resizeObserver={checkMask}>
+  <div bind:this={scroller} class="antiStatesBar mask-{mask} {stepStyle}" style:padding on:scroll={checkMask}>
+    <slot />
+  </div>
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    class="bar"
+    class:hovered={isScrolling}
+    bind:this={divBar}
+    on:pointerdown={onScrollStart}
+    on:pointerleave={checkMask}
+  />
+  <div class="track" class:hovered={isScrolling} />
+</div>
+
+<style lang="scss">
+  .scrollerbar-container {
+    position: relative;
+    min-width: 0;
+  }
+
+  .track {
+    visibility: hidden;
+    position: absolute;
+    bottom: -8px;
+    left: 0;
+    height: 5px;
+    transform-origin: center;
+    transform: scaleX(0);
+    transition: all 0.1s ease-in-out;
+    background-color: var(--scrollbar-track-color);
+    border-radius: 0.25rem;
+  }
+
+  .bar {
+    visibility: hidden;
+    position: absolute;
+    bottom: -8px;
+    left: 0;
+    height: 5px;
+    min-width: 2rem;
+    max-width: calc(100% - 12px);
+    transform-origin: center;
+    transform: scaleY(0.5);
+    background-color: var(--scrollbar-bar-color);
+    border-radius: 0.125rem;
+    opacity: 0;
+    box-shadow: 0 0 1px 1px var(--theme-bg-accent-color);
+    cursor: pointer;
+    z-index: 1;
+    transition: all 0.15s;
+
+    &:hover,
+    &.hovered {
+      background-color: var(--scrollbar-bar-hover);
+      transform: scaleY(1);
+      border-radius: 0.25rem;
+      opacity: 1 !important;
+      box-shadow: 0 0 1px black;
+
+      & + .track {
+        visibility: visible;
+        left: 0;
+        transform: scaleY(1);
+      }
+    }
+    &.hovered {
+      transition: none;
+    }
+  }
+</style>

package/src/components/SearchEdit.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { createEventDispatcher, onDestroy } from 'svelte'
+  import EditWithIcon from './EditWithIcon.svelte'
+  import IconSearch from './icons/Search.svelte'
+  import plugin from '../plugin'
+
+  export let value: string = ''
+  export let width: string = '12rem'
+  export let kind: 'ghost' | 'secondary' = 'ghost'
+
+  $: _search = value
+  const dispatch = createEventDispatcher()
+  let timer: any
+
+  function restartTimer (): void {
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      value = _search
+      dispatch('change', _search)
+    }, 500)
+  }
+  onDestroy(() => {
+    clearTimeout(timer)
+  })
+</script>
+
+<EditWithIcon
+  icon={IconSearch}
+  {width}
+  placeholder={plugin.string.Search}
+  {kind}
+  bind:value={_search}
+  on:change={() => {
+    restartTimer()
+  }}
+  on:input={() => {
+    restartTimer()
+  }}
+  on:keydown={(evt) => {
+    if (evt.key === 'Enter') {
+      clearTimeout(timer)
+      value = _search
+      dispatch('change', _search)
+    }
+  }}
+/>

package/src/components/SearchInput.svelte

@@ -0,0 +1,213 @@
+<!--
+// 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 { translateCB } from '@hanzo/platform'
+  import { themeStore } from '@hanzo/theme'
+  import { createEventDispatcher, onDestroy, onMount } from 'svelte'
+  import plugin from '../plugin'
+  import IconClose from './icons/Close.svelte'
+  import IconSearch from './icons/Search.svelte'
+
+  export let value: string | undefined = undefined
+  export let placeholder: IntlString = plugin.string.Search
+  export let placeholderParam: any | undefined = undefined
+  export let collapsed: boolean = false
+  export let autoFocus: boolean = false
+  export let width: string | undefined = undefined
+  export let delay: number = 500
+
+  let input: HTMLInputElement
+  let phTranslate: string = ''
+
+  $: translateCB(placeholder, placeholderParam ?? {}, $themeStore.language, (res) => {
+    phTranslate = res
+  })
+
+  $: _search = value
+  const dispatch = createEventDispatcher()
+  let timer: any
+
+  function restartTimer (): void {
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      value = _search
+      dispatch('change', _search)
+    }, delay)
+  }
+  onDestroy(() => {
+    clearTimeout(timer)
+  })
+  onMount(() => {
+    if (autoFocus && input) {
+      autoFocus = false
+      input.focus()
+    }
+  })
+</script>
+
+<label class="searchInput-wrapper" class:collapsed class:filled={value && value !== ''} style:width>
+  <div class="searchInput-icon">
+    <IconSearch size={'small'} />
+  </div>
+  <input
+    bind:this={input}
+    type="text"
+    class="font-regular-14"
+    bind:value={_search}
+    placeholder={phTranslate}
+    autocomplete="off"
+    spellcheck="false"
+    on:change={() => {
+      restartTimer()
+    }}
+    on:input={() => {
+      restartTimer()
+    }}
+    on:keydown={(evt) => {
+      if (evt.key === 'Enter') {
+        clearTimeout(timer)
+        value = _search
+        dispatch('change', _search)
+      }
+    }}
+  />
+  <button
+    class="searchInput-button"
+    on:click={() => {
+      value = ''
+      dispatch('change', '')
+      input.focus()
+    }}
+  >
+    <IconClose size={'small'} />
+  </button>
+</label>
+
+<style lang="scss">
+  .searchInput-wrapper {
+    display: flex;
+    justify-content: stretch;
+    align-items: center;
+    align-self: stretch;
+    padding: 0 var(--spacing-0_5) 0 0;
+    height: var(--global-small-Size);
+    min-width: var(--global-small-Size);
+    background-color: var(--theme-button-default); // var(--input-BackgroundColor);
+    border-radius: var(--small-BorderRadius);
+    box-shadow: inset 0 0 0 1px var(--theme-button-border); // var(--input-BorderColor);
+    transition: max-width 0.2s;
+    cursor: text;
+
+    .searchInput-icon,
+    .searchInput-button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-shrink: 0;
+      padding: 0;
+      background-color: transparent;
+      border: none;
+
+      div {
+        width: var(--global-min-Size);
+        height: var(--global-min-Size);
+      }
+    }
+    .searchInput-icon {
+      margin: 0 var(--spacing-0_5) 0 0;
+      width: var(--global-small-Size);
+      height: var(--global-small-Size);
+      color: var(--input-search-IconColor);
+      border-radius: var(--small-BorderRadius);
+      outline: none;
+      cursor: text;
+
+      &:active,
+      &:focus {
+        background-color: transparent;
+      }
+    }
+    .searchInput-button {
+      visibility: hidden;
+      width: var(--global-extra-small-Size);
+      height: var(--global-extra-small-Size);
+      color: var(--global-primary-TextColor);
+      border-radius: var(--extra-small-BorderRadius);
+      cursor: pointer;
+
+      &:hover {
+        background-color: var(--button-tertiary-hover-BackgroundColor);
+      }
+      &:active {
+        background-color: var(--button-tertiary-active-BackgroundColor);
+        border-color: var(--button-menu-active-BorderColor);
+      }
+    }
+
+    input {
+      margin: 0;
+      margin-right: var(--spacing-1_5);
+      padding: 0;
+      width: 100%;
+      height: 100%;
+      color: var(--input-TextColor);
+      caret-color: var(--global-focus-BorderColor);
+      background-color: transparent;
+      border: none;
+      outline: none;
+      appearance: none;
+
+      &::placeholder {
+        color: var(--theme-trans-color); // var(--input-PlaceholderColor);
+      }
+      &:not(:placeholder-shown) + .searchInput-button {
+        visibility: visible;
+      }
+    }
+
+    &:hover {
+      background-color: var(--input-hover-BackgroundColor);
+
+      input::placeholder {
+        color: var(--theme-darker-color); // var(--input-hover-PlaceholderColor);
+      }
+    }
+    &:active,
+    &:focus-within {
+      padding: 0 var(--spacing-0_5) 0 0;
+      // max-width: 15rem;
+      background-color: var(--input-BackgroundColor);
+      outline: 2px solid var(--global-focus-BorderColor);
+      outline-offset: 2px;
+
+      input::placeholder {
+        color: var(--theme-darker-color); // var(--input-focus-PlaceholderColor);
+      }
+    }
+
+    &.collapsed:not(:focus-within, :active, .filled) {
+      padding: 0;
+      max-width: var(--global-small-Size);
+
+      .searchInput-icon {
+        cursor: pointer;
+      }
+      input:not(:placeholder-shown) + .searchInput-button {
+        visibility: hidden;
+      }
+    }
+  }
+</style>

package/src/components/SearchPicker.svelte

@@ -0,0 +1,114 @@
+<!--
+// Copyright © 2024 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 Chip from './Chip.svelte'
+
+  interface Item {
+    id: string
+    label: string
+  }
+
+  export let autoFocus: boolean = false
+  export let placeholder = ''
+  export let value = ''
+  export let items: Item[] = []
+
+  const dispatch = createEventDispatcher()
+
+  let inputRef: HTMLInputElement | undefined
+  const itemsRef: Chip[] = []
+
+  function handleBackspace (event: KeyboardEvent) {
+    if (event.key === 'Backspace' && value === '' && items.length > 0) {
+      itemsRef[items.length - 1].focus()
+    }
+    dispatch('keydown', event)
+  }
+
+  function handleItemRemove (id: string) {
+    dispatch('item-remove', id)
+    inputRef?.focus()
+  }
+
+  export function focus () {
+    inputRef?.focus()
+    autoFocus = false
+  }
+
+  $: if (inputRef !== undefined && autoFocus) {
+    focus()
+  }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class="flex flex-gap-1 flex-wrap search-picker" on:click={() => inputRef?.focus()}>
+  {#each items as item, i}
+    <Chip
+      bind:this={itemsRef[i]}
+      label={item.label}
+      on:remove={() => {
+        handleItemRemove(item.id)
+      }}
+    />
+  {/each}
+  <input
+    bind:this={inputRef}
+    class="flex-grow font-regular-14"
+    type="text"
+    autocomplete="off"
+    spellcheck="false"
+    {placeholder}
+    bind:value
+    on:change
+    on:input
+    on:keydown={handleBackspace}
+  />
+</div>
+
+<style lang="scss">
+  .search-picker {
+    position: relative;
+    width: 100%;
+    padding: var(--spacing-0_5);
+    border-radius: var(--small-focus-BorderRadius);
+    box-shadow: inset 0 0 0 0.0625rem var(--input-BorderColor);
+    cursor: text;
+
+    &:focus-within {
+      box-shadow:
+        inset 0 0 0 0.0625rem var(--input-BorderColor),
+        0 0 0 0.125rem var(--global-focus-inset-BorderColor);
+      outline: 0.125rem solid var(--global-focus-BorderColor);
+      outline-offset: 0.125rem;
+    }
+
+    input {
+      height: var(--global-small-Size);
+      padding: 0;
+      border: none;
+      caret-color: var(--input-search-IconColor);
+
+      &::placeholder {
+        color: var(--global-disabled-TextColor);
+      }
+
+      &:only-child {
+        padding: var(--spacing-0_5) var(--spacing-1_25);
+      }
+    }
+  }
+</style>

package/src/components/Section.svelte

@@ -0,0 +1,49 @@
+<!--
+// 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 type { AnySvelteComponent } from '../types'
+
+  import Icon from './Icon.svelte'
+  import Label from './Label.svelte'
+
+  export let id: string | undefined = undefined
+  export let label: IntlString
+  export let icon: Asset | AnySvelteComponent | undefined = undefined
+
+  export let showHeader: boolean = true
+  export let high: boolean = false
+  export let invisible: boolean = false
+</script>
+
+<div class="antiSection" {id}>
+  {#if showHeader}
+    <div class="antiSection-header" class:high class:invisible>
+      {#if icon}
+        <div class="antiSection-header__icon">
+          <Icon {icon} size={'small'} />
+        </div>
+      {/if}
+
+      <span class="antiSection-header__title flex-row-center">
+        <Label {label} />
+      </span>
+
+      <slot name="header" />
+    </div>
+  {/if}
+
+  <slot name="content" />
+</div>

package/src/components/SectionEmpty.svelte

@@ -0,0 +1,38 @@
+<!--
+//
+// Copyright © 2024 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 type { ComponentProps } from 'svelte'
+
+  import Icon from './Icon.svelte'
+  import Label from './Label.svelte'
+
+  export let icon: ComponentProps<Icon>['icon']
+  export let label: IntlString
+  export let labelParams: Record<string, any> = {}
+</script>
+
+<div class="antiSection-empty solid flex-col-center mt-3">
+  <div class="flex-center caption-color">
+    <Icon {icon} size="large" />
+  </div>
+  <span class="text-sm content-dark-color mt-2">
+    <Label {label} params={labelParams} />
+  </span>
+  <slot />
+</div>