@dolanske/vui 0.1.0 → 0.1.2

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 contextRef = useTemplateRef<HTMLTableCellElement>('context')
+const computedStyle = computed(() => {
+  if (!slots.context)
+    return {}
+  const width = contextRef.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>

package/src/components/Table/SelectAll.vue

@@ -0,0 +1,23 @@
+<script setup lang='ts'>
+import type { TableSelectionProvide } from './table'
+import { inject } from 'vue'
+import Button from '../Button/Button.vue'
+import { TableSelectionProvideSymbol } from './table'
+
+const {
+  isSelectedAll,
+  enabled,
+  selectAllRows,
+} = inject(TableSelectionProvideSymbol) as TableSelectionProvide
+</script>
+
+<template>
+  <th v-if="enabled" class="vui-table-interactive-cell" :class="{ selected: isSelectedAll }">
+    <Button
+      square
+      plain
+      :icon="isSelectedAll ? 'ph:check-square-fill' : 'ph:square'"
+      @click="selectAllRows()"
+    />
+  </th>
+</template>

package/src/components/Table/SelectRow.vue

@@ -0,0 +1,29 @@
+<script setup lang='ts'>
+import type { BaseRow, TableSelectionProvide } from './table'
+import { computed, inject } from 'vue'
+import Button from '../Button/Button.vue'
+import { TableSelectionProvideSymbol } from './table'
+
+interface Props {
+  row: BaseRow
+}
+
+const props = defineProps<Props>()
+const {
+  enabled,
+  selectRow,
+  selectedRows,
+} = inject(TableSelectionProvideSymbol) as TableSelectionProvide
+const isSelected = computed(() => selectedRows.value.has(props.row))
+</script>
+
+<template>
+  <td v-if="enabled" class="vui-table-interactive-cell" :class="{ selected: isSelected }">
+    <Button
+      square
+      plain
+      :icon="isSelected ? 'ph:check-square-fill' : 'ph:square'"
+      @click="selectRow(props.row)"
+    />
+  </td>
+</template>

package/src/components/Table/Table.vue

@@ -0,0 +1,66 @@
+<script setup lang='ts'>
+import type { TableSelectionProvide } from './table'
+import { inject } from 'vue'
+import { TableSelectionProvideSymbol } from './table'
+import './table.scss'
+
+interface Props {
+  /**
+   * Sets the `table-layout` property
+   */
+  fixed?: boolean
+  /**
+   * Table cells with content overflowing on new line will be cropped
+   */
+  nowrap?: boolean
+  /**
+   * Add a visual separator between each row
+   */
+  separateRows?: boolean
+  /**
+   * Add a visual separator between each cell
+   */
+  separateCells?: boolean
+  /**
+   * Wrap table with a border
+   */
+  outerBorder?: boolean
+}
+
+const {
+  fixed,
+  nowrap,
+  separateRows = true,
+  separateCells = false,
+  outerBorder = true,
+} = defineProps<Props>()
+const selecting = inject(TableSelectionProvideSymbol) as TableSelectionProvide
+</script>
+
+<template>
+  <div
+    class="vui-table-container"
+    :class="{
+      fixed,
+      nowrap,
+      'selecting': selecting.enabled,
+      'separated-rows': separateRows,
+      'separated-cells': separateCells,
+      'outer-border': outerBorder,
+    }"
+  >
+    <table>
+      <thead>
+        <tr>
+          <slot name="header" />
+        </tr>
+      </thead>
+      <tbody>
+        <slot name="body" />
+      </tbody>
+    </table>
+    <div class="vui-table-pagination-wrap">
+      <slot name="pagination" />
+    </div>
+  </div>
+</template>

package/src/components/Table/table.scss

@@ -0,0 +1,134 @@
+.vui-table-container {
+  display: block;
+  width: 100%;
+  border-radius: var(--border-radius-m);
+
+  &.fixed table {
+    table-layout: fixed;
+  }
+
+  &.outer-border {
+    border: 1px solid var(--color-border);
+  }
+
+  &.nowrap table tr {
+    td {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &.separated-rows table {
+    th,
+    td {
+      border-bottom: 1px solid var(--color-border);
+    }
+  }
+
+  &.separated-cells table {
+    th,
+    td {
+      border-right: 1px solid var(--color-border);
+
+      &:last-of-type {
+        border-right: none;
+      }
+    }
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    text-indent: 0;
+    border: none;
+    overflow: unset;
+
+    tr {
+      border: none;
+
+      &:has(.vui-table-interactive-cell.selected) {
+        td {
+          background-color: var(--color-bg-raised);
+        }
+      }
+    }
+
+    th,
+    td {
+      font-size: var(--font-size-ms);
+      border: none;
+      border-left: none !important;
+      transition: var(--transition-quick);
+      position: relative;
+      z-index: 1;
+
+      // Fixed width, only houses a checkbox component
+      &.vui-table-interactive-cell {
+        --checkbox-cell-width: calc(calc(var(--space-xs) * 2) + 32px);
+        width: var(--checkbox-cell-width);
+        min-width: var(--checkbox-cell-width);
+        max-width: var(--checkbox-cell-width);
+        height: auto;
+        padding-inline: var(--space-xs);
+        padding-block: 0;
+
+        &.selected .vui-button.icon .vui-button-slot svg path {
+          color: var(--color-text) !important;
+        }
+
+        .vui-button {
+          vertical-align: middle;
+          display: inline-flex;
+
+          &.icon .vui-button-slot svg {
+            width: 22px !important;
+            height: 22px !important;
+
+            path {
+              color: var(--color-text-light);
+            }
+          }
+        }
+      }
+
+      .vui-cell-context {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 2;
+        position: absolute;
+        inset: 0;
+        padding: var(--space-xs);
+        background-color: var(--color-bg);
+        left: unset;
+      }
+    }
+
+    th {
+      .vui-table-th-content {
+        color: var(--color-text-light);
+        font-size: var(--font-size-xs);
+        text-transform: uppercase;
+        font-weight: 500;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        gap: var(--space-xs);
+
+        .vui-table-sort-button:not(.active) svg path {
+          color: var(--color-text-lighter);
+        }
+      }
+    }
+  }
+
+  .vui-table-pagination-wrap {
+    padding: var(--space-s) var(--space-m);
+
+    p {
+      font-size: var(--font-size-s);
+      color: var(--color-text-lighter);
+    }
+  }
+}