@dolanske/vui 0.1.0 → 0.1.1

package/src/components/Select/Select.vue

@@ -0,0 +1,180 @@
+<!-- eslint-disable ts/consistent-type-definitions -->
+<script setup lang='ts' generic="T">
+import { Icon } from '@iconify/vue'
+import { computed, onMounted, ref, useTemplateRef } from 'vue'
+import { searchString } from '../../shared/helpers'
+import Button from '../Button/Button.vue'
+import Dropdown from '../Dropdown/Dropdown.vue'
+import DropdownItem from '../Dropdown/DropdownItem.vue'
+import DropdownTitle from '../Dropdown/DropdownTitle.vue'
+import Input from '../Input/Input.vue'
+import '../Input/input.scss'
+import './select.scss'
+
+export type SelectOption = {
+  value: any
+  label: string
+}
+
+type Props = {
+  single?: boolean
+  readonly?: boolean
+  options: SelectOption[]
+  label?: string
+  placeholder?: string
+  required?: boolean
+  expand?: boolean
+  hint?: string
+  search?: boolean
+  maxActiveOptions?: number
+  showClear?: boolean
+}
+
+const {
+  expand,
+  readonly,
+  required,
+  hint,
+  placeholder,
+  options,
+  single = true,
+  search,
+  maxActiveOptions = 3,
+  showClear,
+} = defineProps<Props>()
+
+const selected = defineModel<SelectOption[] | undefined>()
+
+//
+function setValue(option: SelectOption) {
+  if (single) {
+    // Single
+    if (selected.value?.some(o => o.value === option.value) && !required) {
+      selected.value = undefined
+    }
+    else {
+      selected.value = [option]
+    }
+  }
+  else {
+    if (selected.value && selected.value?.some(o => o.value === option.value)) {
+      const values = selected.value.filter(o => o.value !== option.value)
+      // Cant remove the last value if it's required
+      if ((required && values.length > 0) || !required) {
+        selected.value = values.length > 0 ? values : undefined
+      }
+    }
+    else {
+      if (!selected.value) {
+        selected.value = [option]
+      }
+      else {
+        selected.value?.push(option)
+      }
+    }
+  }
+}
+
+// Search
+const searchStr = ref()
+const filteredOptions = computed(() => {
+  if (!searchStr.value || searchStr.value.length === 0)
+    return options
+
+  return options.filter((option) => {
+    return searchString(option.label, searchStr.value)
+  })
+})
+
+// Render text inside the button
+const renderPlaceholder = computed(() => {
+  // Render placeholder or a default select option
+  if (!selected.value || selected.value.length === 0)
+    return placeholder ?? 'Select an option'
+
+  // Selected values
+  if (single)
+    return selected.value[0].label
+
+  // If amount of selected exceeds the active capacity
+  if (selected.value.length > maxActiveOptions) {
+    return `${selected.value.length} selected`
+  }
+
+  // Just list ALL selected optionsx
+  return selected.value.map(o => o.label).join(', ')
+})
+
+onMounted(() => {
+  if (readonly && showClear) {
+    console.warn('[Select] readonly and showClear are mutually exclusive props. The clear button will not show up if required is present.')
+  }
+})
+
+const dropdownRef = useTemplateRef('dropdownRef')
+
+function clearValue() {
+  selected.value = undefined
+  dropdownRef.value?.close()
+}
+</script>
+
+<template>
+  <div class="vui-input-container vui-select" :class="{ expand, required, readonly }">
+    <Dropdown ref="dropdownRef" :expand>
+      <template #trigger="{ toggle, isOpen }">
+        <div class="vui-input vui-select-trigger-content">
+          <label v-if="label" for="id">{{ label }}</label>
+          <p v-if="hint" class="vui-input-hint">
+            {{ hint }}
+          </p>
+
+          <button class="vui-input-style vui-select-trigger-container" @click="toggle">
+            <span>
+              {{ renderPlaceholder }}
+            </span>
+            <Button
+              v-if="showClear && !required && selected"
+              plain
+              icon="ph:x"
+              square
+              size="s"
+              @click.stop="clearValue"
+            />
+            <Icon :icon="isOpen ? 'ph:caret-up' : 'ph:caret-down'" />
+          </button>
+        </div>
+      </template>
+
+      <template #default="{ close, isOpen }">
+        <DropdownTitle v-if="search">
+          <Input
+            v-model="searchStr"
+            placeholder="Search..."
+            :focus="isOpen"
+          />
+        </DropdownTitle>
+
+        <p v-if="filteredOptions.length === 0" class="vue-select-no-results">
+          No results...
+        </p>
+
+        <DropdownItem
+          v-for="option in filteredOptions"
+          :key="option.value"
+          :class="{ selected: selected?.find(v => v.value === option.value) }"
+          :icon="selected?.find(v => v.value === option.value) ? 'ph:check-bold' : ''"
+          @click="() => {
+            setValue(option)
+            // In single mode, close modal after clicking
+            if (single && !(required && selected && selected[0].value === option.value)) {
+              close()
+            }
+          }"
+        >
+          {{ option.label }}
+        </DropdownItem>
+      </template>
+    </Dropdown>
+  </div>
+</template>

package/src/components/Select/select.scss

@@ -0,0 +1,43 @@
+.vui-input-container {
+  &.vui-select {
+    &.expand {
+      .vui-dropdown-trigger-wrap,
+      .vui-dropdown-trigger-content {
+        width: 100%;
+      }
+    }
+
+    .vui-select-trigger-container {
+      span {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow-x: hidden;
+      }
+    }
+
+    .vue-select-no-results {
+      text-align: center;
+      padding-block: var(--space-xs);
+    }
+
+    .vui-input-style {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--space-s);
+
+      & > button {
+        margin-right: -6px;
+
+        .vui-button-slot svg {
+          width: 14px;
+          height: 14px;
+        }
+      }
+
+      &:hover {
+        border-color: var(--color-border-strong);
+      }
+    }
+  }
+}

package/src/components/Sheet/Sheet.vue

@@ -0,0 +1,91 @@
+<script setup lang='ts'>
+import { computed } from 'vue'
+import Backdrop from '../../internal/Backdrop/Backdrop.vue'
+import Button from '../Button/Button.vue'
+import Divider from '../Divider/Divider.vue'
+import './sheet.scss'
+
+interface Props {
+  position?: 'left' | 'right' | 'top' | 'bottom'
+  size?: number | string
+  separator?: boolean
+}
+
+const {
+  position = 'right',
+  size = 398,
+  separator,
+} = defineProps<Props>()
+
+const open = defineModel<boolean>()
+
+function close() {
+  open.value = false
+}
+
+const style = computed(() => {
+  const formattedSizeValue = typeof size === 'number' ? `${size}px` : size
+  let style
+
+  if (position === 'left' || position === 'right') {
+    style = { width: formattedSizeValue }
+  }
+  else {
+    style = { minHeight: formattedSizeValue }
+  }
+
+  return style
+})
+
+// Used to compute base location so that sheet appears to animate form the edge of the screen
+const baseTransform = computed(() => {
+  switch (position) {
+    case 'left': return `translate(-16px, 0)`
+    case 'top': return `translate(0, -16px)`
+    case 'bottom': return `translate(0, 16px)`
+    case 'right':
+    default: return `translate(16px, 0)`
+  }
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition appear name="sheet">
+      <Backdrop v-if="open" :style="{ padding: 0 }" @close="open = false">
+        <div v-if="open" class="vui-sheet" :class="[`vui-sheet-position-${position}`]" :style>
+          <div class="vui-sheet-header">
+            <div :style="{ flex: 1 }">
+              <slot name="header" :close />
+            </div>
+            <Button square icon="ph:x" @click="open = false" />
+          </div>
+
+          <Divider v-if="separator && $slots.header" :size="1" />
+
+          <div v-if="$slots.default" class="vui-sheet-content">
+            <slot :close />
+          </div>
+        </div>
+      </Backdrop>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped lang="scss">
+.sheet-enter-active,
+.sheet-leave-active {
+  transition: var(--transition);
+}
+
+.sheet-enter-to,
+.sheet-leave-from {
+  transform: translate(0, 0);
+}
+
+.sheet-enter-from,
+.sheet-leave-to {
+  opacity: 0;
+  transform: v-bind(baseTransform);
+}
+</style>

package/src/components/Sheet/sheet.scss

@@ -0,0 +1,56 @@
+.vui-sheet {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  background-color: var(--color-bg);
+  border-color: var(--color-border);
+  height: 100dvh;
+
+  &.vui-sheet-position-top {
+    top: 0;
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  &.vui-sheet-position-bottom {
+    bottom: 0;
+    border-top: 1px solid var(--color-border);
+  }
+
+  &.vui-sheet-position-right {
+    right: 0;
+    border-left: 1px solid var(--color-border);
+  }
+
+  &.vui-sheet-position-left {
+    left: 0;
+    border-right: 1px solid var(--color-border);
+  }
+
+  &.vui-sheet-position-top,
+  &.vui-sheet-position-bottom {
+    max-height: 35dvh;
+    width: 100%;
+  }
+
+  .vui-sheet-header,
+  .vui-sheet-content {
+    width: 100%;
+    padding: var(--space-m);
+  }
+
+  .vui-sheet-content {
+    flex: 1 1 0%;
+    overflow-y: auto;
+    height: 100%;
+  }
+
+  .vui-sheet-header {
+    display: flex;
+    gap: var(--space-m);
+    align-self: flex-start;
+
+    & + .vui-sheet-content {
+      padding-top: var(--space-s);
+    }
+  }
+}

package/src/components/Skeleton/Skeleton.vue

@@ -0,0 +1,46 @@
+<!-- eslint-disable ts/no-use-before-define -->
+<script setup lang='ts'>
+import './skeleton.scss'
+
+interface Props {
+  radius?: string | number
+  width?: string | number
+  height?: string | number
+  circle?: boolean
+}
+
+const {
+  // @ts-expect-error I can't get ESLint to STOP moving DEFAULT_RADIUS below
+  // this props declaration wtf
+  radius = DEFAULT_RADIUS,
+  width = '100%',
+  height = '32px',
+  circle,
+} = defineProps<Props>()
+
+const DEFAULT_RADIUS = 'var(--border-radius-s)'
+
+function valueToPixels(value: string | number) {
+  return typeof value === 'number'
+    ? `${value}px`
+    // If last value of string is NOT a number, do not add "px" at the end
+    // eslint-disable-next-line unicorn/prefer-number-properties
+    : isNaN(Number(value[value.length - 1]))
+      ? value
+      : `${value}px`
+}
+</script>
+
+<template>
+  <div
+    class="vui-skeleton" :style="{
+      // Give priority to radius, if it is NOT set to default
+      borderRadius: valueToPixels(circle && radius === DEFAULT_RADIUS ? 9999 : radius),
+      // When using `circle` prop, we want to use the same
+      // value for both height and width, but we can't
+      // know which one will be defined
+      width: valueToPixels(circle ? (width || height) : width),
+      height: valueToPixels(circle ? (width || height) : height),
+    }"
+  />
+</template>

package/src/components/Skeleton/skeleton.scss

@@ -0,0 +1,14 @@
+.vui-skeleton {
+  animation: pulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  background-color: var(--color-border);
+
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+}

package/src/components/Spinner/Spinner.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { Sizes } from '../../shared/types'
+import { computed } from 'vue'
+import { Size } from '../../shared/types'
+import './spinner.scss'
+
+interface Props {
+  size?: Sizes
+}
+
+const {
+  size = 's',
+} = defineProps<Props>()
+
+const actualSize = computed(() => {
+  switch (size) {
+    case Size.s: return '16px'
+    case Size.l: return '38px'
+    case Size.m:
+    default: return '26px'
+  }
+})
+
+const actualBorderWidth = computed(() => {
+  switch (size) {
+    case Size.s: return '3px'
+    case Size.l: return '5px'
+    case Size.m:
+    default: return '4px'
+  }
+})
+</script>
+
+<template>
+  <div :class="{ size }" class="vui-spinner" />
+</template>
+
+<style lang="scss">
+.vui-spinner {
+  width: v-bind(actualSize);
+  height: v-bind(actualSize);
+  border-width: v-bind(actualBorderWidth);
+}
+</style>

package/src/components/Spinner/spinner.scss

@@ -0,0 +1,46 @@
+.vui-spinner {
+  --spinner-color: var(--color-text);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  border: 3px solid var(--spinner-color);
+  animation:
+    l20-1 0.8s infinite linear alternate,
+    l20-2 1.6s infinite linear;
+}
+@keyframes l20-1 {
+  0% {
+    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
+  }
+  12.5% {
+    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
+  }
+  25% {
+    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
+  }
+  50% {
+    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
+  }
+  62.5% {
+    clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
+  }
+  75% {
+    clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
+  }
+  100% {
+    clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
+  }
+}
+@keyframes l20-2 {
+  0% {
+    transform: scaleY(1) rotate(0deg);
+  }
+  49.99% {
+    transform: scaleY(1) rotate(135deg);
+  }
+  50% {
+    transform: scaleY(-1) rotate(0deg);
+  }
+  100% {
+    transform: scaleY(-1) rotate(-135deg);
+  }
+}

package/src/components/Switch/Switch.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useId } from 'vue'
+import './switch.scss'
+
+interface Props {
+  label?: string
+  disabled?: boolean
+}
+
+const { label, disabled } = defineProps<Props>()
+const slots = defineSlots()
+const checked = defineModel<boolean>()
+const id = useId()
+</script>
+
+<template>
+  <div class="vui-switch" :class="{ disabled, checked }">
+    <input :id v-model="checked" type="checkbox">
+    <label :for="id">
+      <div class="vui-switch-icon">
+        <span class="vui-switch-indicator" />
+      </div>
+
+      <p v-if="!slots.default" class="vui-switch-content">{{ label }}</p>
+      <div v-else class="vui-switch-content">
+        <slot />
+      </div>
+    </label>
+  </div>
+</template>

package/src/components/Switch/switch.scss

@@ -0,0 +1,52 @@
+.vui-switch {
+  --switch-size: 24px;
+
+  &.checked .vui-switch-icon .vui-switch-indicator {
+    left: calc(100% - 24px);
+    background-color: var(--color-text);
+  }
+
+  .vui-switch-icon {
+    width: 44px;
+    height: var(--switch-size);
+    border-radius: 22px;
+    background-color: var(--color-bg-raised);
+    position: relative;
+    cursor: pointer;
+
+    .vui-switch-indicator {
+      display: block;
+      position: absolute;
+      left: 2px;
+      top: 2px;
+      width: 20px;
+      height: 20px;
+      border-radius: 100%;
+      background-color: var(--color-bg);
+      transition: var(--transition);
+    }
+  }
+
+  input {
+    display: none;
+
+    & + label {
+      display: grid;
+      grid-template-columns: 44px 1fr;
+      gap: 10px;
+      font-size: var(--font-size-m);
+      color: var(--color-text);
+      user-select: none;
+
+      .vui-switch-content {
+        display: block;
+
+        &:is(p) {
+          height: var(--switch-size);
+          line-height: var(--switch-size);
+          font-size: var(--font-size-ms);
+        }
+      }
+    }
+  }
+}

package/src/components/Table/Cell.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { computed, useSlots, useTemplateRef } from 'vue'
+
+const slots = useSlots()
+const context = useTemplateRef<HTMLTableCellElement>('context')
+const computedStyle = computed(() => {
+  if (!slots.context)
+    return {}
+  const width = context.value?.getBoundingClientRect().width ?? 0
+  return {
+    paddingRight: `${width}px`,
+  }
+})
+</script>
+
+<template>
+  <td :style="computedStyle">
+    <slot />
+    <div v-if="$slots.context" ref="context" class="vui-cell-context">
+      <slot name="context" />
+    </div>
+  </td>
+</template>

package/src/components/Table/Header.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { Header } from './table'
+import { computed } from 'vue'
+import Button from '../Button/Button.vue'
+
+interface Props {
+  /**
+   * Main header data. This can be empty in case we are just adding an empty
+   * padder. It is recommended to just use <th> instead, but this shouldn't fail
+   * anyway
+   */
+  header?: Header
+  /**
+   * Enable sorting on this column
+   */
+  sort?: boolean
+}
+
+const props = defineProps<Props>()
+
+const sortStateBind = computed(() => {
+  if (!props.header)
+    return
+  switch (props.header.sortKey) {
+    case 'asc': return {
+      'icon': 'ph:sort-ascending',
+      'data-title-top': 'Ascending',
+    }
+    case 'desc': return {
+      'icon': 'ph:sort-descending',
+      'data-title-top': 'Descending',
+    }
+    default: return {
+      'icon': 'ph:arrows-down-up',
+      'data-title-top': 'Sort column',
+    }
+  }
+})
+</script>
+
+<template>
+  <th>
+    <div v-if="props.header" class="vui-table-th-content">
+      <slot>
+        {{ props.header.label }}
+      </slot>
+      <Button
+        v-if="props.sort"
+        class="vui-table-sort-button"
+        v-bind="sortStateBind"
+        :class="{ active: !!props.header.sortKey }"
+        size="s"
+        plain
+        square
+        @click="props.header.sortToggle"
+      />
+    </div>
+  </th>
+</template>

package/src/components/Table/Row.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+//
+</script>
+
+<template>
+  <tr class="vui-table-row">
+    <slot />
+  </tr>
+</template>