@hanzo/ui 0.5.24 → 0.6.15

package/src/components/ProgressCircle.svelte

@@ -0,0 +1,71 @@
+<!--
+// 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 { themeStore } from '@hcengineering/theme'
+  import { getPlatformColor } from '../colors'
+  import { IconSize } from '../types'
+
+  export let value: number
+  export let min: number = 0
+  export let max: number = 100
+  export let color: number = 5
+  export let size: IconSize = 'small'
+  export let primary: boolean = false
+
+  if (value > max) value = max
+  if (value < min) value = min
+
+  const lenghtC: number = Math.PI * 14 - 1
+  $: procC = lenghtC / (max - min)
+  $: dashOffset = (value - min) * procC
+</script>
+
+<svg class="svg-{size}" fill="none" viewBox="0 0 16 16">
+  <circle
+    cx={8}
+    cy={8}
+    r={7}
+    class="progress-circle"
+    style:stroke={'var(--theme-divider-color)'}
+    style:opacity={'.5'}
+    style:transform={`rotate(${-78 + ((dashOffset + 1) * 360) / (lenghtC + 1)}deg)`}
+    style:stroke-dasharray={lenghtC}
+    style:stroke-dashoffset={dashOffset === 0 ? 0 : dashOffset + 3}
+  />
+  <circle
+    cx={8}
+    cy={8}
+    r={7}
+    class="progress-circle"
+    style:stroke={primary ? 'var(--primary-bg-color)' : getPlatformColor(color, $themeStore.dark)}
+    style:opacity={dashOffset === 0 ? 0 : 1}
+    style:transform={'rotate(-82deg)'}
+    style:stroke-dasharray={lenghtC}
+    style:stroke-dashoffset={dashOffset === 0 ? lenghtC : lenghtC - dashOffset + 1}
+  />
+</svg>
+
+<style lang="scss">
+  .progress-circle {
+    stroke-width: 2px;
+    stroke-linecap: round;
+    transform-origin: center;
+    transition:
+      transform 0.6s ease 0s,
+      stroke-dashoffset 0.6s ease 0s,
+      stroke-dasharray 0.6s ease 0s,
+      opacity 0.6s ease 0s;
+  }
+</style>

package/src/components/RadioButton.svelte

@@ -0,0 +1,69 @@
+<!--
+// 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 { generateId } from '@hanzo/core'
+  import { Label } from '..'
+
+  export let id: string = generateId()
+  export let group: any
+  export let value: any
+  export let disabled: boolean = false
+  export let labelOverflow: boolean = false
+  export let label: string | undefined = undefined
+  export let labelSize: 'medium' | 'large' = 'medium'
+  export let labelIntl: IntlString | undefined = undefined
+  export let labelParams: Record<string, any> | undefined = undefined
+  export let action: (() => void) | (() => Promise<void>) = () => {}
+  export let gap: 'large' | 'small' | 'medium' | 'none' = 'none'
+  export let labelGap: 'large' | 'medium' = 'medium'
+  export let kind: 'primary' | 'positive' | 'negative' | 'default' = 'default'
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class="antiRadio gap-{gap}"
+  class:disabled
+  class:checked={group === value}
+  class:kind-primary={kind === 'primary'}
+  class:kind-positive={kind === 'positive'}
+  class:kind-negative={kind === 'negative'}
+  tabindex="-1"
+  on:click={() => {
+    if (!disabled && group !== value) action()
+  }}
+>
+  <input
+    {id}
+    type="radio"
+    bind:group
+    {value}
+    {disabled}
+    on:click={() => {
+      if (!disabled && group !== value) action()
+    }}
+  />
+  <div class="marker" />
+  <label for={id} class="{labelSize} gap-{labelGap}" class:overflow-label={labelOverflow}>
+    <slot>
+      {#if labelIntl}
+        <Label label={labelIntl} params={labelParams} />
+      {:else}
+        {label ?? ''}
+      {/if}
+    </slot>
+  </label>
+</div>

package/src/components/RadioGroup.svelte

@@ -0,0 +1,42 @@
+<!--
+// 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 { RadioItem } from '..'
+  import { RadioButton } from '..'
+
+  export let items: RadioItem[]
+  export let selected: any | undefined = undefined
+  export let disabled: boolean = false
+  export let gap: 'large' | 'small' | 'medium' | 'none' = 'small'
+</script>
+
+{#if items && items.length > 0}
+  <div class="flex-col">
+    {#each items as item, i}
+      <RadioButton
+        bind:group={selected}
+        id={item.id}
+        label={item.label}
+        labelGap={item.labelGap}
+        labelIntl={item.labelIntl}
+        labelParams={item.labelParams}
+        value={item.value}
+        disabled={disabled ? true : item.disabled}
+        action={item.action}
+        gap={i < items.length - 1 ? gap : 'none'}
+      />
+    {/each}
+  </div>
+{/if}

package/src/components/RootStatusComponent.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import type { IntlString } from '@hanzo/platform'
+  import { createEventDispatcher, onMount } from 'svelte'
+  import { IconClose } from '..'
+  import Button from './Button.svelte'
+  import Label from './Label.svelte'
+
+  export let onProgress: (props?: Record<string, any>) => number
+  export let onCancel: ((props?: Record<string, any>) => void) | undefined
+
+  export let interval: number
+
+  export let props: Record<string, any> | undefined
+  export let label: IntlString
+  export let labelProps: Record<string, any> | undefined
+
+  let currentProgress = onProgress(props)
+
+  onMount(() => {
+    const timer = setInterval(() => {
+      currentProgress = onProgress(props)
+      if (currentProgress >= 100) {
+        setTimeout(() => {
+          dispatch('close')
+        }, 1000)
+      }
+    }, interval)
+    return () => {
+      clearInterval(timer)
+    }
+  })
+
+  const dispatch = createEventDispatcher()
+</script>
+
+<div class="flex-row-center container">
+  <Label {label} params={labelProps ?? {}} />
+  {currentProgress}%
+  {#if onCancel !== undefined}
+    <Button
+      icon={IconClose}
+      size={'small'}
+      kind={'ghost'}
+      on:click={() => {
+        if (onCancel !== undefined) {
+          onCancel?.(props)
+        } else {
+          dispatch('close')
+        }
+      }}
+    />
+  {/if}
+</div>
+
+<style lang="scss">
+  .container {
+    padding: 0.125rem 0.125rem 0.125rem 0.5rem;
+    height: 1.625rem;
+    font-weight: 500;
+    background-color: var(--theme-button-pressed);
+    border: 1px solid transparent;
+    border-radius: 0.25rem;
+    cursor: pointer;
+  }
+</style>

package/src/components/Row.svelte

@@ -0,0 +1,25 @@
+<!--
+// 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">
+</script>
+
+<div class="row"><slot /></div>
+
+<style lang="scss">
+  .row {
+    grid-column-start: 1;
+    grid-column-end: -1;
+  }
+</style>

package/src/components/ScrollBox.svelte

@@ -0,0 +1,98 @@
+<!--
+// 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 { afterUpdate } from 'svelte'
+  import { closeTooltip } from '..'
+
+  export let vertical: boolean = false
+  export let stretch: boolean = false
+  export let bothScroll: boolean = false
+  export let noShift: boolean = false
+  export let autoscrollable: boolean = false
+
+  let div: HTMLElement
+  let autoscroll: boolean = true
+
+  afterUpdate(async () => {
+    if (autoscrollable && autoscroll) div.scrollTo(0, div.scrollHeight)
+  })
+
+  function setAutoscroll () {
+    closeTooltip()
+    autoscroll = div.scrollTop > div.scrollHeight - div.clientHeight - 50
+  }
+</script>
+
+<div class="scroll" bind:this={div} class:vertical class:bothScroll class:noShift on:scroll={setAutoscroll}>
+  <div class="box" class:stretch>
+    <slot />
+  </div>
+</div>
+
+<style lang="scss">
+  .scroll {
+    position: relative;
+    width: auto;
+    height: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    margin-right: 0;
+    margin-bottom: -0.75rem;
+    scrollbar-width: thin;
+
+    .box {
+      position: absolute;
+      display: flex;
+      padding: 0 0 0.375rem 0;
+      top: 0;
+      left: 0;
+      width: auto;
+      height: 100%;
+      &.stretch {
+        width: 100%;
+      }
+    }
+
+    &.vertical {
+      margin: 0 -0.5rem 0 -0.5rem;
+      overflow-x: hidden;
+      overflow-y: auto;
+      .box {
+        flex-direction: column;
+        padding: 0 0.5rem 0 0.5rem;
+        width: 100%;
+        height: auto;
+        &.stretch {
+          height: 100%;
+        }
+      }
+    }
+
+    &.bothScroll {
+      margin: 0 -0.375rem -0.375rem 0;
+      overflow: auto;
+      .box {
+        padding: 0 0.375rem 0.375rem 0;
+      }
+    }
+
+    &.noShift {
+      margin: 0;
+      .box {
+        padding: 0;
+      }
+    }
+  }
+</style>