@hanzo/ui 0.5.24 → 0.6.15

package/src/components/HotkeyGroup.svelte

@@ -0,0 +1,25 @@
+<!--
+// 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 Hotkey from './Hotkey.svelte'
+
+  export let keys: string[]
+</script>
+
+<div class="flex flex-gap-0-5">
+  {#each keys as key}
+    <Hotkey {key} />
+  {/each}
+</div>

package/src/components/Html.svelte

@@ -0,0 +1,24 @@
+<!--
+// 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 DOMPurify from 'dompurify'
+
+  export let value: string
+
+  $: sanitized = DOMPurify.sanitize(value)
+</script>
+
+<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+{@html sanitized}

package/src/components/Icon.svelte

@@ -0,0 +1,45 @@
+<!--
+// Copyright © 2020, 2021 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, getMetadata } from '@hanzo/platform'
+  import { AnySvelteComponent, IconSize } from '../types'
+  import { ComponentType } from 'svelte'
+
+  export let icon: Asset | AnySvelteComponent | ComponentType
+  export let size: IconSize
+  export let iconProps: any | undefined = undefined
+  export let fill: string | undefined = 'currentColor'
+
+  function isAsset (icon: Asset | AnySvelteComponent): boolean {
+    return typeof icon === 'string'
+  }
+
+  function toAsset (icon: AnySvelteComponent | Asset): Asset {
+    return icon as Asset
+  }
+
+  let url: string
+  $: url = isAsset(icon) ? getMetadata(toAsset(icon)) ?? 'https://anticrm.org/logo.svg' : ''
+
+  $: _fill = iconProps?.fill ?? fill
+</script>
+
+{#if isAsset(icon)}
+  <svg class="svg-{size}" fill={_fill} {...iconProps}>
+    <use href={url} />
+  </svg>
+{:else if typeof icon !== 'string'}
+  <svelte:component this={icon} {size} fill={_fill} {...iconProps} />
+{/if}

package/src/components/IconWithEmoji.svelte

@@ -0,0 +1,74 @@
+<!--
+// 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 { IconSize } from '../types'
+  import { fromCodePoint } from '../utils'
+
+  export let icon: number | number[]
+  export let size: IconSize
+
+  let value: string = ''
+  $: try {
+    value = Array.isArray(icon) ? fromCodePoint(...icon) : fromCodePoint(icon)
+  } catch (err) {}
+</script>
+
+<div class="emoji-{size} flex-row-center emoji">
+  {value}
+</div>
+
+<style lang="scss">
+  .emoji {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: black;
+  }
+  .emoji-inline {
+    width: 1em;
+    height: 1em;
+    font-size: 1rem;
+  }
+  .emoji-x-small {
+    width: 0.75rem;
+    height: 0.75rem;
+    font-size: 0.75rem;
+  }
+  .emoji-small {
+    width: 1rem;
+    height: 1rem;
+    font-size: 1rem;
+  }
+  .emoji-medium {
+    width: 1.25rem;
+    height: 1.25rem;
+    font-size: 1.25rem;
+  }
+  .emoji-large {
+    width: 1.5rem;
+    height: 1.5rem;
+    font-size: 1.5rem;
+  }
+  .emoji-full {
+    width: inherit;
+    height: inherit;
+  }
+  .emoji-x-small,
+  .emoji-small,
+  .emoji-medium,
+  .emoji-large {
+    flex-shrink: 0;
+  }
+</style>

package/src/components/Image.svelte

@@ -0,0 +1,71 @@
+<!--
+// Copyright © 2025 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'
+
+  export let src: string | undefined
+  export let srcset: string | undefined = undefined
+  export let alt: string | undefined = undefined
+  export let width: number | string
+  export let height: number | string
+  export let fit: string = 'contain'
+
+  const dispatch = createEventDispatcher()
+
+  let retry: number = 0
+
+  function handleLoad (): void {
+    retry = 0
+    dispatch('load')
+  }
+
+  function handleLoadStart (): void {
+    dispatch('loadstart')
+  }
+
+  $: if (src !== undefined) {
+    retry = 0
+    handleLoadStart()
+  }
+
+  function handleError (event: any): void {
+    if (retry > 3) {
+      event.target.src = undefined
+    } else if (retry > 0) {
+      event.target.src = `${src}#${Date.now()}`
+      retry -= 1
+    } else {
+      dispatch('error')
+    }
+  }
+</script>
+
+<img
+  {src}
+  {srcset}
+  alt={alt ?? ''}
+  {width}
+  {height}
+  style:object-fit={fit}
+  on:error={handleError}
+  on:loadstart={handleLoadStart}
+  on:load={handleLoad}
+/>
+
+<style lang="scss">
+  img {
+    border-radius: inherit;
+  }
+</style>

package/src/components/Label.svelte

@@ -0,0 +1,38 @@
+<!--
+// Copyright © 2020, 2021 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 { translateCB } from '@hanzo/platform'
+  import { themeStore } from '@hcengineering/theme'
+
+  export let label: IntlString
+  export let params: Record<string, any> = {}
+
+  let _value: string | undefined
+
+  $: if (label !== undefined) {
+    translateCB(label, params ?? {}, $themeStore.language, (r) => {
+      _value = r
+    })
+  } else {
+    _value = label
+  }
+</script>
+
+{#if _value !== undefined}
+  {_value}
+{:else}
+  {label}
+{/if}

package/src/components/Lazy.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+  const dispatch = createEventDispatcher()
+
+  import { lazyObserver, isLazyEnabled } from '../lazy'
+
+  let visible = !isLazyEnabled()
+</script>
+
+{#if !visible}
+  <div
+    use:lazyObserver={(val, unsubscribe) => {
+      if (val) {
+        visible = true
+        dispatch('visible')
+        unsubscribe?.()
+      }
+    }}
+  >
+    <!-- Zero-width space character -->
+    {#if $$slots.loading}
+      <slot name="loading" />
+    {:else}
+      &#8203;
+    {/if}
+  </div>
+{:else}
+  <slot />
+{/if}

package/src/components/Like.svelte

@@ -0,0 +1,73 @@
+<!--
+// 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 Like from './icons/Like.svelte'
+
+  export let value: number = Math.round(Math.random() * 100)
+  export let voted: boolean = !!Math.round(Math.random())
+
+  const vote = () => {
+    voted = !voted
+    value++
+  }
+</script>
+
+<div class="like-container" class:voted>
+  {#if value > 0}<span>{value}</span>{/if}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div class="icon" on:click={vote}>
+    <Like size={'small'} />
+  </div>
+</div>
+
+<style lang="scss">
+  .like-container {
+    display: flex;
+    align-items: center;
+    // line-height: 100%;
+
+    span {
+      text-align: right;
+      font-size: 0.8125rem;
+      color: var(--caption-color);
+    }
+    .icon {
+      margin-left: 0.25rem;
+      color: var(--theme-trans-color);
+      cursor: pointer;
+
+      &:hover {
+        color: var(--dark-color);
+      }
+      &:active {
+        color: var(--theme-darker-color);
+      }
+    }
+
+    &.voted {
+      .icon {
+        color: var(--primary-button-default);
+
+        &:hover {
+          color: var(--primary-button-hovered);
+        }
+        &:active {
+          color: var(--primary-button-pressed);
+        }
+      }
+    }
+  }
+</style>

package/src/components/Link.svelte

@@ -0,0 +1,75 @@
+<!--
+// 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 } from '@hanzo/platform'
+  import type { AnySvelteComponent } from '../types'
+  import Icon from './Icon.svelte'
+
+  export let label: string
+  export let icon: Asset | AnySvelteComponent | undefined = undefined
+  export let disabled: boolean = false
+  export let maxLenght: number = 26
+
+  const trimFilename = (fname: string): string =>
+    fname.length > maxLenght ? fname.substr(0, (maxLenght - 1) / 2) + '...' + fname.substr(-(maxLenght - 1) / 2) : fname
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<span class="container" class:disabled on:click>
+  {#if icon}
+    <span class="icon">
+      <Icon {icon} size={'small'} />
+    </span>
+  {/if}
+  {#if disabled}
+    {trimFilename(label)}
+  {:else}
+    <div class="over-underline">{trimFilename(label)}</div>
+  {/if}
+</span>
+
+<style lang="scss">
+  .container {
+    display: inline-flex;
+    align-items: center;
+    line-height: 100%;
+    cursor: pointer;
+
+    .icon {
+      margin-right: 0.25rem;
+      color: var(--content-color);
+    }
+    &:hover .icon {
+      color: var(--accent-color);
+    }
+    &:active .icon {
+      color: var(--caption-color);
+    }
+  }
+  .disabled {
+    cursor: not-allowed;
+    color: var(--dark-color);
+    .icon {
+      color: var(--dark-color);
+    }
+    &:hover .icon {
+      color: var(--dark-color);
+    }
+    &:active .icon {
+      color: var(--dark-color);
+    }
+  }
+</style>

package/src/components/LinkWrapper.svelte

@@ -0,0 +1,35 @@
+<!--
+// 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">
+  // This component converts all URLs from the provided string or IntlString to Links.
+
+  import { IntlString, translateCB } from '@hanzo/platform'
+  import { themeStore } from '@hcengineering/theme'
+  import { replaceURLs } from '../utils'
+
+  export let text: string | undefined = undefined
+  export let label: IntlString | undefined = undefined
+  export let params: Readonly<Record<string, any>> = {}
+
+  $: if (label) {
+    translateCB(label, params, $themeStore.language, (result) => (text = result))
+  }
+</script>
+
+{#if text}
+  <!-- "replaceURLs" produces sanitazed string -->
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+  {@html replaceURLs(text)}
+{/if}

package/src/components/ListView.svelte

@@ -0,0 +1,153 @@
+<!--
+// 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 { mouseAttractor, resizeObserver } from '..'
+  import ListViewItem from './ListViewItem.svelte'
+  import Lazy from './Lazy.svelte'
+
+  export let selection: number = 0
+  export let count: number
+  export let addClass: string | undefined = undefined
+  export let noScroll: boolean = false
+  export let kind: 'default' | 'thin' | 'full-size' = 'default'
+  export let colorsSchema: 'default' | 'lumia' = 'default'
+  export let updateOnMouse = true
+  export let lazy = false
+  export let minHeight: string | null = null
+  export let highlightIndex: number | undefined = undefined
+  export let items: any[] = []
+  export let getKey: (index: number) => string = (index) => index.toString()
+
+  const refs: HTMLElement[] = []
+
+  const dispatch = createEventDispatcher()
+
+  let oldSelection = Date.now()
+
+  function onRow (item: number): void {
+    if (updateSelection(item)) {
+      dispatch('on-select', item)
+    }
+  }
+
+  function updateSelection (item: number): boolean {
+    const now = Date.now()
+    if (now - oldSelection >= 25) {
+      selection = item
+      oldSelection = now
+      return true
+    }
+    return false
+  }
+
+  export function select (pos: number): void {
+    if (pos < 0) {
+      pos = 0
+    }
+    if (pos >= count) {
+      pos = count - 1
+    }
+    const r = refs[pos]
+    onRow(pos)
+    if (r !== undefined) {
+      r?.scrollIntoView({ behavior: 'auto', block: 'nearest' })
+    }
+  }
+
+  $: array = items.length > 0 ? items : Array(count)
+</script>
+
+{#if count}
+  <div
+    class="list-container flex-col flex-grow"
+    style:overflow={noScroll ? 'visible' : 'auto'}
+    use:resizeObserver={() => {
+      dispatch('changeContent')
+    }}
+  >
+    {#each array as _, row (getKey(row))}
+      {#if lazy}
+        <div style="min-height: {minHeight}">
+          <Lazy>
+            <ListViewItem
+              bind:element={refs[row]}
+              {colorsSchema}
+              {addClass}
+              {row}
+              {kind}
+              isHighlighted={row === highlightIndex}
+              selected={row === selection}
+              on:click={() => dispatch('click', row)}
+              on:mouseover={mouseAttractor(() => {
+                if (updateOnMouse) {
+                  onRow(row)
+                }
+              })}
+              on:mouseenter={mouseAttractor(() => {
+                if (updateOnMouse) {
+                  onRow(row)
+                }
+              })}
+            >
+              <svelte:fragment slot="category" let:item={itemIndex}>
+                <slot name="category" item={itemIndex} />
+              </svelte:fragment>
+              <svelte:fragment slot="item" let:item={itemIndex}>
+                <slot name="item" item={itemIndex} />
+              </svelte:fragment>
+            </ListViewItem>
+          </Lazy>
+        </div>
+      {:else}
+        <ListViewItem
+          bind:element={refs[row]}
+          {colorsSchema}
+          {addClass}
+          {row}
+          {kind}
+          selected={row === selection}
+          isHighlighted={row === highlightIndex}
+          on:click={() => dispatch('click', row)}
+          on:mouseover={mouseAttractor(() => {
+            if (updateOnMouse) {
+              onRow(row)
+            }
+          })}
+          on:mouseenter={mouseAttractor(() => {
+            if (updateOnMouse) {
+              onRow(row)
+            }
+          })}
+        >
+          <svelte:fragment slot="category" let:item={itemIndex}>
+            <slot name="category" item={itemIndex} />
+          </svelte:fragment>
+          <svelte:fragment slot="item" let:item={itemIndex}>
+            <slot name="item" item={itemIndex} />
+          </svelte:fragment>
+        </ListViewItem>
+      {/if}
+    {/each}
+  </div>
+{/if}
+
+<style lang="scss">
+  .list-container {
+    min-width: 0;
+    // border-radius: 0.25rem;
+    //user-select: none;
+  }
+</style>