@hanzo/ui 0.5.24 → 0.6.16

package/src/components/calendar/MonthSquare.svelte

@@ -0,0 +1,315 @@
+<!--
+// 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, createEventDispatcher } from 'svelte'
+  import { capitalizeFirstLetter } from '../../utils'
+  import Button from '../Button.svelte'
+  import IconArrowLeft from '../icons/ArrowLeft.svelte'
+  import IconArrowRight from '../icons/ArrowRight.svelte'
+  import {
+    areDatesEqual,
+    day,
+    firstDay,
+    fromCurrentToTz,
+    getMonthName,
+    getUserTimezone,
+    getWeekDayName,
+    isWeekend,
+    weekday
+  } from './internal/DateUtils'
+  import { deviceOptionsStore as deviceInfo } from '../..'
+
+  export let currentDate: Date | null
+  export let viewDate: Date
+  export let hideNavigator: 'all' | 'left' | 'right' | 'none' = 'none'
+  export let viewUpdate: boolean = true
+  export let noPadding: boolean = false
+  export let displayedWeeksCount = 6
+  export let timeZone: string = getUserTimezone()
+  export let selectedTo: Date | null | undefined = undefined
+
+  const dispatch = createEventDispatcher()
+
+  $: firstDayOfCurrentMonth = firstDay(viewDate, $deviceInfo.firstDayOfWeek)
+  let monthYear: string
+  const today: Date = new Date(Date.now())
+
+  afterUpdate(() => {
+    monthYear = capitalizeFirstLetter(getMonthName(viewDate)) + ' ' + viewDate.getFullYear()
+    firstDayOfCurrentMonth = firstDay(viewDate, $deviceInfo.firstDayOfWeek)
+  })
+
+  function inRange (currentDate: Date | null, selectedTo: Date | null | undefined, target: Date): boolean {
+    if (currentDate == null || selectedTo == null) return false
+    if (areDatesEqual(currentDate, selectedTo)) return false
+    const startDate = currentDate < selectedTo ? currentDate : selectedTo
+    const endDate = currentDate > selectedTo ? currentDate : selectedTo
+    return target > startDate && target < endDate
+  }
+
+  function isSelected (currentDate: Date | null, selectedTo: Date | null | undefined, target: Date): boolean {
+    if (currentDate != null) {
+      const zonedTime = fromCurrentToTz(currentDate, timeZone)
+      if (areDatesEqual(zonedTime, target)) {
+        return true
+      }
+    }
+    if (selectedTo != null) {
+      const zonedTime = fromCurrentToTz(selectedTo, timeZone)
+      if (areDatesEqual(zonedTime, target)) {
+        return true
+      }
+    }
+    return false
+  }
+
+  function getNextDate (date: Date, shift: 1 | -1): Date {
+    return new Date(new Date(date).setDate(date.getDate() + shift))
+  }
+
+  function isPreviosDateWrong (date: Date): boolean {
+    return getNextDate(date, -1).getMonth() !== viewDate.getMonth()
+  }
+
+  function isNextDateWrong (date: Date): boolean {
+    return getNextDate(date, 1).getMonth() !== viewDate.getMonth()
+  }
+
+  function isStart (currentDate: Date | null, selectedTo: Date | null | undefined, target: Date): boolean {
+    if (currentDate == null || selectedTo == null) return false
+    const startDate = currentDate < selectedTo ? currentDate : selectedTo
+    return areDatesEqual(startDate, target)
+  }
+
+  function isEnd (currentDate: Date | null, selectedTo: Date | null | undefined, target: Date): boolean {
+    if (currentDate == null || selectedTo == null) return false
+    const endDate = currentDate > selectedTo ? currentDate : selectedTo
+    return areDatesEqual(endDate, target)
+  }
+</script>
+
+<div class="month-container">
+  <div class="header">
+    {#if viewDate}
+      <div class="monthYear">{monthYear}</div>
+      <div class="flex-row-center gap-1-5 mr-1">
+        {#if !(hideNavigator === 'left' || hideNavigator === 'all')}
+          <Button
+            kind={'ghost'}
+            size={'medium'}
+            icon={IconArrowLeft}
+            on:click={() => {
+              if (viewUpdate) {
+                viewDate.setDate(1)
+                viewDate.setMonth(viewDate.getMonth() - 1)
+              }
+              dispatch('navigation', -1)
+            }}
+          />
+        {/if}
+        {#if !(hideNavigator === 'right' || hideNavigator === 'all')}
+          <Button
+            kind={'ghost'}
+            size={'medium'}
+            icon={IconArrowRight}
+            on:click={() => {
+              if (viewUpdate) {
+                viewDate.setDate(1)
+                viewDate.setMonth(viewDate.getMonth() + 1)
+              }
+              dispatch('navigation', 1)
+            }}
+          />
+        {/if}
+      </div>
+    {/if}
+  </div>
+
+  {#if viewDate}
+    <div class="calendar" class:noPadding>
+      {#each [...Array(7).keys()] as dayOfWeek}
+        <span class="caption">
+          {capitalizeFirstLetter(getWeekDayName(day(firstDayOfCurrentMonth, dayOfWeek), 'short'))}
+        </span>
+      {/each}
+
+      {#each [...Array(displayedWeeksCount).keys()] as weekIndex}
+        {#each [...Array(7).keys()] as dayOfWeek}
+          {@const date = weekday(firstDayOfCurrentMonth, weekIndex, dayOfWeek)}
+          {@const wrongM = date.getMonth() !== viewDate.getMonth()}
+          <div
+            class="container"
+            class:range={inRange(currentDate, selectedTo, date)}
+            class:selected={isSelected(currentDate, selectedTo, date)}
+            class:startRow={dayOfWeek === 0 || isPreviosDateWrong(date) || isStart(currentDate, selectedTo, date)}
+            class:endRow={dayOfWeek === 6 || isNextDateWrong(date) || isEnd(currentDate, selectedTo, date)}
+            class:wrongMonth={wrongM}
+          >
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
+            <div
+              class="day"
+              class:weekend={isWeekend(date)}
+              class:today={areDatesEqual(today, date)}
+              class:range={inRange(currentDate, selectedTo, date)}
+              class:selected={isSelected(currentDate, selectedTo, date)}
+              class:wrongMonth={wrongM}
+              style={`grid-column-start: ${dayOfWeek + 1}; grid-row-start: ${weekIndex + 2};`}
+              on:click|stopPropagation={(ev) => {
+                if (wrongM) {
+                  ev.preventDefault()
+                  return
+                }
+                viewDate = new Date(date)
+                if (currentDate) {
+                  viewDate.setHours(currentDate.getHours())
+                  viewDate.setMinutes(currentDate.getMinutes())
+                }
+                dispatch('update', viewDate)
+              }}
+            >
+              {date.getDate()}
+            </div>
+          </div>
+        {/each}
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .month-container {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    height: 100%;
+    color: var(--theme-caption-color);
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-shrink: 0;
+      margin-bottom: 0.25rem;
+      height: 2.25rem;
+      color: var(--theme-caption-color);
+
+      .monthYear {
+        font-weight: 500;
+        font-size: 1rem;
+        &::first-letter {
+          text-transform: capitalize;
+        }
+      }
+    }
+  }
+
+  .calendar {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+
+    .caption,
+    .day {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 2rem;
+      height: 2rem;
+      font-size: 1rem;
+      color: var(--theme-content-color);
+    }
+    .caption {
+      margin-bottom: 0.5rem;
+      height: 2.25rem;
+      color: var(--theme-dark-color);
+      &::first-letter {
+        text-transform: capitalize;
+      }
+    }
+    &:not(.noPadding) {
+      padding: 0 1rem 1rem;
+
+      .caption {
+        padding: 0.25rem;
+      }
+    }
+
+    .container {
+      border: 0px solid transparent;
+      margin: 0.125rem 0;
+      padding: 0 0.125rem;
+
+      &.range:not(.wrongMonth),
+      &.selected:not(.wrongMonth) {
+        color: var(--theme-caption-color);
+      }
+      &.startRow:not(.wrongMonth) {
+        border-top-left-radius: 0.25rem;
+        border-bottom-left-radius: 0.25rem;
+        padding-left: 0;
+        margin-left: 0.125rem;
+      }
+      &.endRow:not(.wrongMonth) {
+        border-top-right-radius: 0.25rem;
+        border-bottom-right-radius: 0.25rem;
+        padding-right: 0;
+        margin-right: 0.125rem;
+      }
+    }
+
+    .day {
+      position: relative;
+      color: var(--theme-content-color);
+      // background-color: rgba(var(--theme-content-color), 0.05);
+      border: 1px solid transparent;
+      border-radius: 0.25rem;
+
+      cursor: pointer;
+
+      &.weekend {
+        color: var(--theme-content-color);
+      }
+      &.wrongMonth {
+        color: var(--theme-trans-color);
+        cursor: default;
+      }
+      &.today:not(.worngMonth, .selected, .range) {
+        font-weight: 500;
+        background-color: var(--theme-button-focused);
+        border-color: var(--theme-button-border);
+      }
+      &.selected:not(.wrongMonth) {
+        color: var(--primary-button-color);
+        background-color: var(--primary-button-default);
+      }
+
+      &:not(.wrongMonth):hover {
+        color: var(--theme-caption-color);
+        background-color: var(--primary-button-transparent);
+      }
+    }
+
+    &::before {
+      position: absolute;
+      content: '';
+      top: 2.25rem;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background-color: var(--theme-divider-color);
+    }
+  }
+</style>

package/src/components/calendar/RangeDatePopup.svelte

@@ -0,0 +1,231 @@
+<!--
+// 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 { IntlString } from '@hanzo/platform'
+  import { createEventDispatcher } from 'svelte'
+  import ui from '../../plugin'
+  import ActionIcon from '../ActionIcon.svelte'
+  import Button from '../Button.svelte'
+  import Label from '../Label.svelte'
+  import IconClose from '../icons/Close.svelte'
+  import DateInputBox from './DateInputBox.svelte'
+  import MonthSquare from './MonthSquare.svelte'
+
+  export let startDate: Date | null
+  export let endDate: Date | null
+  export let label: IntlString
+
+  const dispatch = createEventDispatcher()
+
+  const today: Date = new Date(Date.now())
+
+  let viewDate: Date = startDate ?? today
+  let dateInput: DateInputBox
+  let endDateInput: DateInputBox
+
+  const saveDate = (): void => {
+    if (startDate) {
+      startDate.setHours(0, 0, 0, 0)
+      if (endDate) {
+        endDate.setHours(0, 0, 0, 0)
+        if (endDate < startDate) {
+          const swap = endDate
+          endDate = startDate
+          startDate = swap
+        }
+      }
+      viewDate = startDate
+      dispatch('update', {
+        startDate,
+        endDate
+      })
+    } else if (endDate) {
+      startDate = endDate
+      startDate.setHours(0, 0, 0, 0)
+      endDate = null
+      viewDate = startDate
+      dispatch('update', {
+        startDate,
+        endDate
+      })
+    }
+    viewDateSec = changeMonth(startDate, endDate)
+  }
+  const closeDP = (): void => {
+    if (!dateInput.isNull(startDate, false)) saveDate()
+    else {
+      startDate = null
+      endDate = null
+      dispatch('update', {
+        startDate,
+        endDate
+      })
+    }
+    dispatch('close', {
+      startDate,
+      endDate
+    })
+  }
+
+  const updateDate = (date: Date | null): void => {
+    if (date) {
+      if (startDate == null) {
+        startDate = date
+      } else if (endDate == null) {
+        if (date < startDate) {
+          endDate = startDate
+          startDate = date
+        } else {
+          endDate = date
+        }
+      } else {
+        startDate = date
+        endDate = null
+      }
+    }
+  }
+  const navigateMonth = (result: any): void => {
+    if (result) {
+      viewDate.setDate(1)
+      viewDate.setMonth(viewDate.getMonth() + result)
+      viewDate = viewDate
+      viewDateSec.setDate(1)
+      viewDateSec.setMonth(viewDateSec.getMonth() + result)
+      viewDateSec = viewDateSec
+    }
+  }
+  const changeMonth = (date: Date | null, endDate: Date | null): Date => {
+    if (date == null) {
+      date = new Date()
+    }
+    if (endDate == null || (date.getMonth() === endDate.getMonth() && date.getFullYear() === endDate.getFullYear())) {
+      return new Date(date.getFullYear(), date.getMonth() + 1, 1)
+    }
+    return new Date(endDate)
+  }
+
+  let viewDateSec: Date = changeMonth(startDate, endDate)
+</script>
+
+<div class="date-popup-container">
+  <div class="header">
+    <span class="fs-title overflow-label"><Label {label} /></span>
+    <ActionIcon
+      icon={IconClose}
+      size={'small'}
+      action={() => {
+        dispatch('close', {})
+      }}
+    />
+  </div>
+  <div class="content">
+    <div class="flex-between">
+      <div class="input">
+        <DateInputBox bind:this={dateInput} bind:currentDate={startDate} on:close={closeDP} on:save={saveDate} />
+      </div>
+      <div class="input">
+        <DateInputBox bind:this={endDateInput} bind:currentDate={endDate} on:close={closeDP} on:save={saveDate} />
+      </div>
+    </div>
+
+    <div class="month-group flex-between">
+      <MonthSquare
+        bind:currentDate={startDate}
+        selectedTo={endDate}
+        {viewDate}
+        viewUpdate={false}
+        hideNavigator="right"
+        on:update={(result) => {
+          updateDate(result.detail)
+        }}
+        on:navigation={(result) => {
+          navigateMonth(result.detail)
+        }}
+      />
+      <MonthSquare
+        bind:currentDate={endDate}
+        selectedTo={startDate}
+        viewDate={viewDateSec}
+        viewUpdate={false}
+        hideNavigator="left"
+        on:update={(result) => {
+          updateDate(result.detail)
+        }}
+        on:navigation={(result) => {
+          navigateMonth(result.detail)
+        }}
+      />
+    </div>
+  </div>
+  <div class="footer">
+    <Button
+      kind={'primary'}
+      label={ui.string.Save}
+      size={'x-large'}
+      on:click={() => {
+        closeDP()
+      }}
+    />
+  </div>
+</div>
+
+<style lang="scss">
+  .date-popup-container {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    max-width: calc(100vw - 2rem);
+    max-height: calc(100vh - 2rem);
+    width: 40rem;
+    height: max-content;
+    color: var(--caption-color);
+    background: var(--theme-popup-color);
+    border-radius: 0.5rem;
+    box-shadow: var(--theme-popup-shadow);
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 1rem 1.5rem 1rem 2rem;
+      border-bottom: 1px solid var(--theme-popup-divider);
+    }
+
+    .content {
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      padding: 1.5rem 1.75rem;
+      min-height: 0;
+
+      .input {
+        width: 16.25rem;
+      }
+
+      .month-group {
+        display: flex;
+        flex-wrap: nowrap;
+        margin: 0.5rem -0.5rem 0;
+      }
+    }
+
+    .footer {
+      padding: 1rem 1.75rem;
+      display: flex;
+      flex-direction: row-reverse;
+      border-top: 1px solid var(--theme-popup-divider);
+    }
+  }
+</style>

package/src/components/calendar/Shifts.svelte

@@ -0,0 +1,114 @@
+<!--
+// 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 { DateRangeMode } from '@hanzo/core'
+  import { createEventDispatcher } from 'svelte'
+  import Scroller from '../Scroller.svelte'
+  import TimeShiftPresenter from '../TimeShiftPresenter.svelte'
+  import { DAY, HOUR, MINUTE } from '../../types'
+
+  export let currentDate: Date | null
+  export let direction: 'before' | 'after' = 'after'
+  export let minutes: number[] = [5, 15, 30]
+  export let hours: number[] = [1, 2, 4, 8, 12]
+  export let days: number[] = [1, 3, 7, 30]
+  export let shift: boolean = false
+  export let mode: DateRangeMode = DateRangeMode.DATE
+
+  $: withTime = mode !== DateRangeMode.DATE
+  $: withDate = mode !== DateRangeMode.TIME
+
+  const dispatch = createEventDispatcher()
+
+  $: base = direction === 'before' ? -1 : 1
+
+  const shiftValues: Array<number | string> = []
+
+  $: {
+    if (withTime) {
+      shiftValues.push(...minutes.map((m) => m * MINUTE), 'divider', ...hours.map((m) => m * HOUR))
+    }
+    if (withDate) {
+      shiftValues.push('divider', ...days.map((m) => m * DAY))
+    }
+  }
+</script>
+
+{#if shift && currentDate}
+  <div class="shift-container">
+    <Scroller>
+      {#each shiftValues as value}
+        {#if typeof value === 'number'}
+          {@const numValue = value}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y-no-static-element-interactions -->
+          <div
+            class="btn"
+            on:click={() => {
+              const curr = new Date().setSeconds(0, 0)
+              const shiftedDate = new Date(curr + numValue * base)
+              dispatch('change', shiftedDate)
+            }}
+          >
+            <TimeShiftPresenter value={value * base} />
+          </div>
+        {:else if value === 'divider'}
+          <div class="divider" />
+        {/if}
+      {/each}
+    </Scroller>
+  </div>
+{/if}
+
+<style lang="scss">
+  .shift-container {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem;
+    top: 1rem;
+    right: calc(100% - 0.5rem);
+    bottom: 1rem;
+    width: fit-content;
+    width: 12rem;
+    min-width: 12rem;
+    background: var(--theme-navpanel-color);
+    border: 1px solid var(--theme-divider-color);
+    border-radius: 0.5rem;
+    box-shadow: var(--theme-popup-shadow);
+    z-index: -1;
+
+    .btn {
+      flex-shrink: 0;
+      margin-right: 0.75rem;
+      padding: 0.25rem 0.5rem;
+      background-color: transparent;
+      border-radius: 0.25rem;
+      cursor: pointer;
+
+      &:hover {
+        color: var(--theme-caption-color);
+        background-color: var(--theme-navpanel-hovered);
+      }
+    }
+
+    .divider {
+      margin: 0.25rem 0.75rem 0.25rem 0;
+      height: 1px;
+      min-height: 1px;
+      background-color: var(--theme-divider-color);
+    }
+  }
+</style>

package/src/components/calendar/SimpleDatePopup.svelte

@@ -0,0 +1,42 @@
+<!--
+// 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 { createEventDispatcher } from 'svelte'
+  import Month from './Month.svelte'
+  import { getUserTimezone } from './internal/DateUtils'
+
+  export let currentDate: Date | null
+  export let timeZone: string = getUserTimezone()
+
+  const dispatch = createEventDispatcher()
+</script>
+
+<div class="antiPopup popup">
+  <Month
+    bind:currentDate
+    {timeZone}
+    on:update={(result) => {
+      if (result.detail !== undefined) {
+        dispatch('close', result.detail)
+      }
+    }}
+  />
+</div>
+
+<style lang="scss">
+  .popup {
+    border-radius: 0.5rem;
+  }
+</style>