@hanzo/ui 0.5.24 → 0.6.16

package/src/components/TabsControl.svelte

@@ -0,0 +1,113 @@
+<!--
+// 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 { Icon, TabBase } from '..'
+  import Label from './Label.svelte'
+
+  export let model: TabBase[]
+  export let selected = 0
+  export let padding: string | undefined = undefined
+  export let noMargin: boolean = false
+  export let size: 'small' | 'medium' | 'large' = 'medium'
+  export let gap: 'small' | 'medium' | 'large' = 'large'
+</script>
+
+<div class="flex-stretch tabs-container no-print {size} gap-{gap}" style:padding class:noMargin>
+  {#each model as tab, i}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div
+      class="flex-row-center tab"
+      class:selected={i === selected}
+      on:click={() => {
+        selected = i
+      }}
+    >
+      {#if tab.icon !== undefined}
+        <div class="mr-2" class:ml-2={tab.label === ''}>
+          <Icon icon={tab.icon} size={'small'} />
+        </div>
+      {/if}
+      {#if tab.label !== ''}
+        <Label label={tab.label} />
+      {/if}
+    </div>
+  {/each}
+  <div class="grow" />
+  <slot name="rightButtons" />
+</div>
+
+<slot name="content" {selected} />
+
+<style lang="scss">
+  .tabs-container {
+    flex-shrink: 0;
+    flex-wrap: nowrap;
+    align-items: center;
+    width: 100%;
+    height: 4.5rem;
+    min-width: 0;
+    min-height: 0;
+    border-bottom: 1px solid var(--theme-divider-color);
+
+    &.gap-small {
+      gap: 0.5rem;
+    }
+    &.gap-medium {
+      gap: 1.5rem;
+    }
+    &.gap-large {
+      gap: 2.5rem;
+    }
+    &:not(.noMargin) {
+      margin-bottom: 0.5rem;
+    }
+    &.small {
+      height: 3.25rem;
+
+      .tab {
+        height: 3.25rem;
+      }
+    }
+    &.large {
+      height: 3.5rem;
+
+      .tab {
+        height: 3.5rem;
+      }
+    }
+
+    .tab {
+      height: 4.5rem;
+      color: var(--theme-dark-color);
+      cursor: pointer;
+      user-select: none;
+
+      &.selected {
+        border-top: 0.125rem solid transparent;
+        border-bottom: 0.125rem solid var(--theme-tablist-plain-color);
+        color: var(--theme-caption-color);
+        cursor: default;
+      }
+      &:not(.selected):hover {
+        color: var(--theme-content-color);
+      }
+    }
+    .grow {
+      min-width: 2.5rem;
+      flex-grow: 1;
+    }
+  }
+</style>

package/src/components/TextArea.svelte

@@ -0,0 +1,110 @@
+<!--
+// 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 { translateCB } from '@hanzo/platform'
+  import { themeStore } from '@hanzo/theme'
+  import plugin from '../plugin'
+  import Label from './Label.svelte'
+
+  export let label: IntlString | undefined = undefined
+  export let width: string | undefined = undefined
+  export let height: string | undefined = undefined
+  export let margin: string | undefined = undefined
+  export let value: string | undefined = undefined
+  export let placeholder: IntlString = plugin.string.EditBoxPlaceholder
+  export let placeholderParam: any | undefined = undefined
+  export let noFocusBorder: boolean = false
+  export let disabled: boolean = false
+
+  let input: HTMLTextAreaElement
+  let phTranslate: string = ''
+
+  $: translateCB(placeholder, placeholderParam ?? {}, $themeStore.language, (res) => {
+    phTranslate = res
+  })
+
+  export function focus () {
+    input.focus()
+  }
+</script>
+
+<div class="textarea" class:no-focus-border={noFocusBorder} style:width style:height style:margin>
+  {#if label}<div class="label"><Label {label} /></div>{/if}
+  <textarea
+    bind:value
+    bind:this={input}
+    {disabled}
+    placeholder={phTranslate}
+    on:keydown
+    on:change
+    on:keydown
+    on:keypress
+    on:blur
+  />
+</div>
+
+<style lang="scss">
+  .textarea {
+    display: flex;
+    flex-direction: column;
+    min-width: 3.125rem;
+    min-height: 2.25rem;
+
+    .label {
+      margin-bottom: 0.25rem;
+      font-size: 0.75rem;
+      font-weight: 500;
+      color: var(--accent-color);
+      pointer-events: none;
+      user-select: none;
+    }
+
+    textarea {
+      width: auto;
+      min-height: 4.5rem;
+      margin: -4px;
+      padding: 2px;
+      font-family: inherit;
+      font-size: inherit;
+      line-height: 150%;
+      color: var(--caption-color);
+      background-color: transparent;
+      border: 2px solid transparent;
+      border-radius: 0.125rem;
+      outline: none;
+      overflow-y: scroll;
+      resize: none;
+
+      &:focus {
+        border-color: var(--primary-button-default);
+      }
+      &::placeholder {
+        color: var(--dark-color);
+      }
+    }
+  }
+
+  .no-focus-border {
+    textarea {
+      font-weight: 500;
+      font-size: 1rem;
+
+      &:focus {
+        border-color: transparent;
+      }
+    }
+  }
+</style>

package/src/components/TextAreaEditor.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import type { IntlString } from '@hanzo/platform'
+  import { createEventDispatcher } from 'svelte'
+  import ui from '../plugin'
+  import IconClose from './icons/Close.svelte'
+  import ActionIcon from './ActionIcon.svelte'
+  import Button from './Button.svelte'
+  import TextArea from './TextArea.svelte'
+
+  export let inputRef: TextArea | undefined = undefined
+  export let value: string = ''
+  export let width: string | undefined = undefined
+  export let height: string | undefined = undefined
+  export let submitLabel: IntlString = ui.string.Save
+  export let placeholder: IntlString | undefined = undefined
+  export let disabled: boolean = false
+
+  const dispatch = createEventDispatcher()
+  let isEditing = false
+  let openedContainerRef: HTMLDivElement
+
+  async function onClickOutside (e: any) {
+    if (openedContainerRef && !openedContainerRef.contains(e.target) && !e.defaultPrevented && isEditing) {
+      if (value) {
+        submit()
+      }
+    }
+  }
+
+  const submit = () => {
+    dispatch('submit', value)
+  }
+  const cancel = () => {
+    dispatch('cancel')
+  }
+  const onKeydown = (e: any) => {
+    if (e.detail.key !== 'Enter') {
+      return
+    }
+
+    e.detail.preventDefault()
+    submit()
+  }
+
+  $: if (inputRef && !value) {
+    isEditing = true
+    inputRef.focus()
+  }
+</script>
+
+<svelte:window on:click={onClickOutside} />
+<div bind:this={openedContainerRef}>
+  <div
+    class="flex-col background-accent-bg-color border-divider-color border-radius-1 pt-1 pb-1 pr-2 pl-2"
+    style:user-select="none"
+  >
+    <TextArea
+      {placeholder}
+      {height}
+      {width}
+      {disabled}
+      bind:this={inputRef}
+      bind:value
+      on:keydown={onKeydown}
+      noFocusBorder={true}
+    />
+  </div>
+  {#if !disabled}
+    <div class="flex-row-center mt-3">
+      <Button label={submitLabel} kind="no-border" size="medium" on:click={submit} />
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <div class="ml-2" on:click={cancel}>
+        <ActionIcon icon={IconClose} size="medium" action={cancel} />
+      </div>
+    </div>
+  {/if}
+</div>

package/src/components/TimeLeft.svelte

@@ -0,0 +1,66 @@
+<!--
+// 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, onDestroy } from 'svelte'
+  import { Timestamp } from '@hanzo/core'
+
+  export let time: Timestamp
+
+  const dispatch = createEventDispatcher()
+
+  let displayTime = time
+  let notified = false
+  let intervalId: any | undefined = undefined
+
+  function applyTimer (time: number): void {
+    if (intervalId !== undefined) {
+      clearInterval(intervalId)
+    }
+
+    displayTime = Math.max(0, time - Date.now())
+    notified = false
+    intervalId = setInterval(() => {
+      displayTime = Math.max(0, time - Date.now())
+
+      if (displayTime === 0 && !notified) {
+        notified = true
+        dispatch('timeout')
+      }
+    }, 1000)
+  }
+
+  export function restart (time: number): void {
+    applyTimer(time)
+  }
+
+  $: applyTimer(time)
+
+  onDestroy(() => {
+    if (intervalId !== undefined) {
+      clearInterval(intervalId)
+    }
+  })
+
+  function getDisplayTime (time: number): string {
+    const options: Intl.DateTimeFormatOptions = { minute: 'numeric', second: 'numeric' }
+
+    return new Date(time).toLocaleString('default', options)
+  }
+</script>
+
+{#if displayTime > 0}
+  {getDisplayTime(displayTime)}
+{/if}

package/src/components/TimeShiftPicker.svelte

@@ -0,0 +1,84 @@
+<!--
+// 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 { DateRangeMode } from '@hanzo/core'
+  import type { IntlString } from '@hanzo/platform'
+  import { createEventDispatcher, onMount } from 'svelte'
+  import { showPopup } from '../popups'
+  import { DateOrShift } from '../types'
+  import DateRangePresenter from './calendar/DateRangePresenter.svelte'
+  import Calendar from './icons/Calendar.svelte'
+  import Close from './icons/Close.svelte'
+  import Label from './Label.svelte'
+  import TimeShiftPopup from './TimeShiftPopup.svelte'
+  import TimeShiftPresenter from './TimeShiftPresenter.svelte'
+
+  export let title: IntlString
+  export let value: DateOrShift | undefined
+  export let show: boolean = false
+  export let direction: 'before' | 'after' = 'before'
+
+  const dispatch = createEventDispatcher()
+
+  let opened: boolean = false
+  let container: HTMLElement
+  let btn: HTMLElement
+
+  const changeValue = (result: DateOrShift): void => {
+    if (result !== undefined) {
+      value = result
+      dispatch('change', result)
+    }
+  }
+
+  onMount(() => {
+    if (btn && show) {
+      btn.click()
+      show = false
+    }
+  })
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class="antiSelect"
+  bind:this={container}
+  on:click|preventDefault={() => {
+    btn.focus()
+    if (!opened) {
+      opened = true
+      showPopup(TimeShiftPopup, { title, value, direction }, container, (ev) => {
+        changeValue(ev)
+        opened = false
+      })
+    }
+  }}
+>
+  <button bind:this={btn} class="button round-2" class:selected={value?.shift}>
+    <div class="icon">
+      {#if show}<Close size={'small'} />{:else}<Calendar size={'medium'} />{/if}
+    </div>
+  </button>
+
+  <div class="group">
+    <span class="label"><Label label={title} /></span>
+    {#if value?.shift !== undefined}
+      <TimeShiftPresenter value={value.shift} />
+    {:else}
+      <DateRangePresenter value={value?.date} mode={DateRangeMode.DATETIME} editable={false} />
+    {/if}
+  </div>
+</div>

package/src/components/TimeShiftPopup.svelte

@@ -0,0 +1,64 @@
+<!--
+// 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 { DateRangeMode } from '@hanzo/core'
+  import { createEventDispatcher } from 'svelte'
+  import ui from '../plugin'
+  import { DAY, DateOrShift, HOUR, MINUTE } from '../types'
+  import DateRangePresenter from './calendar/DateRangePresenter.svelte'
+  import TimeShiftPresenter from './TimeShiftPresenter.svelte'
+
+  export let direction: 'before' | 'after'
+  export let value: DateOrShift | undefined = undefined
+  export let minutes: number[] = [5, 15, 30]
+  export let hours: number[] = [1, 2, 4]
+  export let days: number[] = [1, 3, 7, 30]
+
+  let date = value?.date
+  const dispatch = createEventDispatcher()
+
+  $: base = direction === 'before' ? -1 : 1
+
+  $: values = [...minutes.map((m) => m * MINUTE), ...hours.map((m) => m * HOUR), ...days.map((m) => m * DAY)]
+</script>
+
+<div class="antiPopup">
+  <div class="flex-center mt-1 mb-1">
+    <DateRangePresenter
+      bind:value={date}
+      mode={DateRangeMode.DATETIME}
+      editable={true}
+      labelNull={ui.string.SelectDate}
+      on:change={() => {
+        if (date) {
+          dispatch('close', { date })
+        }
+      }}
+    />
+  </div>
+  <div class="bottom-divider mb-2" />
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  {#each values as value}
+    <div
+      class="ap-menuItem"
+      on:click={() => {
+        dispatch('close', { shift: value })
+      }}
+    >
+      <TimeShiftPresenter value={value * base} />
+    </div>
+  {/each}
+</div>

package/src/components/TimeShiftPresenter.svelte

@@ -0,0 +1,59 @@
+<!--
+// 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 { translate } from '@hanzo/platform'
+  import ui from '../plugin'
+  import { themeStore } from '@hanzo/theme'
+  import { DAY, HOUR, MINUTE } from '../types'
+
+  export let value: number
+  export let exact: boolean = false
+
+  let time: string = ''
+
+  async function formatTime (value: number) {
+    if (value > 0) {
+      if (exact) {
+        const d = Math.floor(value / DAY)
+        time = d ? await translate(ui.string.DaysShort, { value: d }, $themeStore.language) : ''
+        const h = Math.floor((value - d * DAY) / HOUR)
+        time += h ? ` ${await translate(ui.string.HoursShort, { value: h }, $themeStore.language)}` : ''
+        const m = Math.floor((value - d * DAY - h * HOUR) / MINUTE)
+        time += m ? ` ${await translate(ui.string.MinutesShort, { value: m }, $themeStore.language)}` : ''
+      } else {
+        if (value < HOUR) {
+          time = await translate(ui.string.MinutesAfter, { minutes: Math.floor(value / MINUTE) }, $themeStore.language)
+        } else if (value < DAY) {
+          time = await translate(ui.string.HoursAfter, { hours: Math.floor(value / HOUR) }, $themeStore.language)
+        } else {
+          time = await translate(ui.string.DaysAfter, { days: Math.floor(value / DAY) }, $themeStore.language)
+        }
+      }
+    } else {
+      const abs = Math.abs(value)
+      if (abs < HOUR) {
+        time = await translate(ui.string.MinutesBefore, { minutes: Math.floor(abs / MINUTE) }, $themeStore.language)
+      } else if (abs < DAY) {
+        time = await translate(ui.string.HoursBefore, { hours: Math.floor(abs / HOUR) }, $themeStore.language)
+      } else {
+        time = await translate(ui.string.DaysBefore, { days: Math.floor(abs / DAY) }, $themeStore.language)
+      }
+    }
+  }
+
+  $: formatTime(value)
+</script>
+
+<span style="white-space: nowrap;">{time}</span>

package/src/components/TimeSince.svelte

@@ -0,0 +1,86 @@
+<!--
+// 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 { translateCB } from '@hanzo/platform'
+  import { themeStore } from '@hanzo/theme'
+  import { ticker } from '..'
+  import ui from '../plugin'
+  import { tooltip } from '../tooltips'
+  import { DAY, HOUR, MINUTE, MONTH, YEAR } from '../types'
+
+  export let value: number | undefined
+  export let kind: 'no-border' | 'list' = 'no-border'
+
+  let time: string = ''
+
+  function calculateMonthsPassed (now: number, value: number): number {
+    const startDate: Date = new Date(value)
+    const endDate: Date = new Date(now)
+    const startYear = startDate.getFullYear()
+    const startMonth = startDate.getMonth()
+    const endYear = endDate.getFullYear()
+    const endMonth = endDate.getMonth()
+
+    return (endYear - startYear) * 12 + (endMonth - startMonth)
+  }
+
+  function formatTime (now: number, value: number): void {
+    let passed = now - value
+    if (passed < 0) passed = 0
+    if (passed < HOUR) {
+      translateCB(ui.string.MinutesAgo, { minutes: Math.floor(passed / MINUTE) }, $themeStore.language, (res) => {
+        time = res
+      })
+    } else if (passed < DAY) {
+      translateCB(ui.string.HoursAgo, { hours: Math.floor(passed / HOUR) }, $themeStore.language, (res) => {
+        time = res
+      })
+    } else if (passed < MONTH) {
+      translateCB(ui.string.DaysAgo, { days: Math.floor(passed / DAY) }, $themeStore.language, (res) => {
+        time = res
+      })
+    } else if (passed < YEAR) {
+      translateCB(ui.string.MonthsAgo, { months: calculateMonthsPassed(now, value) }, $themeStore.language, (res) => {
+        time = res
+      })
+    } else {
+      translateCB(ui.string.YearsAgo, { years: Math.floor(passed / YEAR) }, $themeStore.language, (res) => {
+        time = res
+      })
+    }
+  }
+
+  $: value && formatTime($ticker, value)
+
+  $: tooltipValue = value
+    ? new Date(value).toLocaleString('default', {
+      minute: '2-digit',
+      hour: 'numeric',
+      day: '2-digit',
+      month: 'short',
+      year: 'numeric'
+    })
+    : undefined
+</script>
+
+<span
+  use:tooltip={{ label: ui.string.TimeTooltip, props: { value: tooltipValue } }}
+  class="overflow-label"
+  class:text-sm={kind === 'list'}
+  class:content-dark-color={kind === 'list'}
+>
+  {time}
+</span>