@hanzo/ui 0.5.24 → 0.6.15

package/src/components/Toggle.svelte

@@ -0,0 +1,116 @@
+<!--
+// 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 { createEventDispatcher } from 'svelte'
+  import { LabelAndProps } from '../types'
+  import { tooltip } from '../tooltips'
+
+  export let id: string | undefined = undefined
+  export let on: boolean = false
+  export let disabled: boolean = false
+  export let showTooltip: LabelAndProps | undefined = undefined
+
+  const dispatch = createEventDispatcher()
+</script>
+
+<label {id} class="toggle" use:tooltip={showTooltip} class:disabled>
+  <input
+    class="chBox"
+    type="checkbox"
+    {disabled}
+    bind:checked={on}
+    on:change={(e) => {
+      dispatch('change', on)
+    }}
+  />
+  <span class="toggle-switch" />
+</label>
+
+<style lang="scss">
+  .toggle {
+    display: inline-block;
+    width: 2.25rem;
+    min-width: 2.25rem;
+    height: 1.25rem;
+    // line-height: 1.75rem;
+    vertical-align: middle;
+    font-size: inherit;
+    user-select: none;
+    cursor: pointer;
+
+    &.disabled {
+      cursor: default;
+    }
+
+    .chBox {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      margin: -1px;
+      border: 0;
+      padding: 0;
+      clip: rect(0 0 0 0);
+      overflow: hidden;
+
+      &:checked + .toggle-switch {
+        background-color: var(--theme-toggle-on-bg-color);
+        &:hover {
+          background-color: var(--theme-toggle-on-bg-hover);
+        }
+        &:before {
+          left: 1.125rem;
+          background: var(--theme-toggle-on-sw-color);
+        }
+      }
+      &:disabled + .toggle-switch {
+        filter: grayscale(70%);
+        &:before {
+          background: #eee;
+        }
+      }
+      // &:focus-within + .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); }
+    }
+    // &:active > .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); }
+    .toggle-switch {
+      position: relative;
+      display: inline-block;
+      width: 2.25rem;
+      height: 1.25rem;
+      border-radius: 1.25rem;
+      background-color: var(--theme-toggle-bg-color);
+      transition:
+        left 0.2s,
+        background-color 0.2s;
+      &:before {
+        content: '';
+        position: absolute;
+        top: 0.125rem;
+        left: 0.125rem;
+        display: inline-block;
+        width: 1rem;
+        height: 1rem;
+        border-radius: 50%;
+        background: var(--theme-toggle-sw-color);
+        box-shadow:
+          0px 3px 8px rgba(0, 0, 0, 0.15),
+          0px 3px 1px rgba(0, 0, 0, 0.06);
+        transition: 0.15s;
+      }
+      &:hover {
+        background-color: var(--theme-toggle-bg-hover);
+      }
+    }
+  }
+</style>

package/src/components/ToggleButton.svelte

@@ -0,0 +1,176 @@
+<!--
+// Copyright © 2022 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, IntlString } from '@hanzo/platform'
+  import { createEventDispatcher, onMount } from 'svelte'
+  import { registerFocus } from '../focus'
+  import type { AnySvelteComponent, ButtonSize } from '../types'
+  import Icon from './Icon.svelte'
+  import Label from './Label.svelte'
+
+  export let value: boolean
+  export let label: IntlString | undefined = undefined
+  export let labelParams: Record<string, any> = {}
+  export let size: ButtonSize = 'medium'
+  export let icon: Asset | AnySvelteComponent | undefined = undefined
+  export let justify: 'left' | 'center' = 'center'
+  export let width: string | undefined = undefined
+  export let selected: boolean = false
+  export let focus: boolean = false
+  export let id: string | undefined = undefined
+  export let input: HTMLButtonElement | undefined = undefined
+  export let backgroundColor: string | undefined = undefined
+
+  $: iconOnly = label === undefined && $$slots.content === undefined
+
+  onMount(() => {
+    if (focus && input) {
+      input.focus()
+      focus = false
+    }
+  })
+
+  export let focusIndex = -1
+  const { idx, focusManager } = registerFocus(focusIndex, {
+    focus: () => {
+      input?.focus()
+      return input != null
+    },
+    isFocus: () => document.activeElement === input
+  })
+
+  $: if (idx !== -1 && focusManager) {
+    focusManager.updateFocus(idx, focusIndex)
+  }
+
+  const updateFocus = () => {
+    focusManager?.setFocus(idx)
+  }
+  $: if (input != null) {
+    input.addEventListener('focus', updateFocus, { once: true })
+  }
+
+  const dispatch = createEventDispatcher()
+
+  function getStyle (backgroundColor: string | undefined, width: string | undefined) {
+    let style = width ? `width: ${width};` : ''
+    if (backgroundColor) {
+      style += ` background: ${backgroundColor};`
+    }
+    return style
+  }
+</script>
+
+<button
+  bind:this={input}
+  class="button {size} jf-{justify}"
+  class:only-icon={iconOnly}
+  class:selected
+  class:disabled={!value}
+  style={getStyle(backgroundColor, width)}
+  on:click={() => {
+    value = !value
+    dispatch('change', value)
+  }}
+  {id}
+>
+  {#if icon}
+    <div class="btn-icon mr-2 pointer-events-none">
+      <Icon bind:icon size={'small'} />
+    </div>
+  {/if}
+  <span class="overflow-label pointer-events-none">
+    {#if label}
+      <Label {label} params={labelParams} />
+    {:else if $$slots.content}
+      <slot name="content" />
+    {/if}
+  </span>
+</button>
+
+<style lang="scss">
+  .small {
+    height: 1.5rem;
+    font-size: 0.75rem;
+    line-height: 0.75rem;
+    &.only-icon {
+      width: 1.5rem;
+    }
+  }
+  .medium {
+    height: 1.75rem;
+    &.only-icon {
+      width: 1.75rem;
+    }
+  }
+  .large {
+    height: 2rem;
+    &.only-icon {
+      width: 2rem;
+    }
+  }
+  .x-large {
+    height: 2.75rem;
+    &.only-icon {
+      width: 2.75rem;
+    }
+  }
+
+  .button {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding: 0 0.5rem;
+    font-weight: 500;
+    min-width: 1.5rem;
+    white-space: nowrap;
+    color: var(--accent-color);
+    background-color: transparent;
+    border: 1px solid transparent;
+    border-radius: 0.125rem;
+    transition-property: border, background-color, color, box-shadow;
+    transition-duration: 0.15s;
+
+    .btn-icon {
+      transition: color 0.15s;
+      pointer-events: none;
+    }
+    &.disabled {
+      color: rgb(var(--caption-color) / 40%);
+
+      .btn-icon {
+        opacity: 0.5;
+      }
+    }
+    &:hover {
+      color: var(--caption-color);
+      transition-duration: 0;
+
+      .btn-icon {
+        color: var(--caption-color);
+      }
+    }
+
+    &.jf-left {
+      justify-content: flex-start;
+    }
+    &.jf-center {
+      justify-content: center;
+    }
+    &.only-icon {
+      padding: 0;
+    }
+  }
+</style>

package/src/components/ToggleWithLabel.svelte

@@ -0,0 +1,58 @@
+<!--
+// 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 type { IntlString } from '@hanzo/platform'
+
+  import Toggle from './Toggle.svelte'
+  import Label from './Label.svelte'
+  import { createEventDispatcher } from 'svelte'
+
+  export let label: IntlString
+  export let description: IntlString | undefined = undefined
+  export let on: boolean = false
+  export let disabled: boolean = false
+
+  const dispatch = createEventDispatcher()
+</script>
+
+<div class="flex-between w-full">
+  <div class="caption">
+    <Label {label} />
+    {#if description}
+      <span><Label label={description} /></span>
+    {/if}
+  </div>
+  <Toggle
+    bind:on
+    {disabled}
+    on:change={() => {
+      dispatch('change', on)
+    }}
+  />
+</div>
+
+<style lang="scss">
+  .caption {
+    margin-right: 1rem;
+    color: var(--caption-color);
+    user-select: none;
+    span {
+      display: block;
+      font-size: 0.75rem;
+      color: var(--dark-color);
+    }
+  }
+</style>