@dolanske/vui 0.1.0 → 0.1.2

package/src/components/Input/input.scss

@@ -0,0 +1,199 @@
+.vui-input-container {
+  // Each component should have its own specification as it allows more granual
+  // modification via CSS variables if needed
+  --input-color-text-red: var(--color-text-red);
+  --input-color-text: var(--color-text);
+  --input-color-text-light: var(--color-text-light);
+  --input-color-text-lighter: var(--color-text-lighter);
+  --input-color-border: var(--color-border);
+  --input-color-border-strong: var(--color-border-strong);
+  --input-color-border-weak: var(--color-border-weak);
+
+  --input-height: 34px;
+  --input-padding: 8px;
+  --textarea-padding: 8px;
+
+  //
+
+  width: 224px;
+
+  &.expand {
+    width: 100%;
+  }
+
+  &.required .vui-input > label:after {
+    content: '*';
+    color: var(--input-color-text-red);
+  }
+
+  &.readonly .vui-input input {
+    pointer-events: none;
+    color: var(--input-color-text-light);
+    border-color: var(--input-color-border-weak);
+  }
+
+  &.has-errors {
+    .vui-input {
+      .vui-input-style,
+      textarea {
+        border-color: var(--color-text-red) !important;
+      }
+    }
+  }
+
+  .vui-input {
+    label {
+      display: block;
+      text-align: left;
+      margin-bottom: 8px;
+      font-size: var(--font-size-ms);
+      color: var(--input-color-text);
+    }
+
+    .vui-input-hint {
+      margin-bottom: 8px;
+      margin-top: -4px;
+      color: var(--input-color-text-lighter);
+      font-size: var(--font-size-s);
+      display: block;
+      text-align: left;
+    }
+
+    ::placeholder {
+      font-weight: 400;
+      color: var(--color-text-lighter);
+      font-family: var(--global-font);
+    }
+
+    .vui-input-style,
+    textarea {
+      display: block;
+      border-radius: var(--border-radius-s);
+      border: 1px solid var(--input-color-border);
+      background: transparent;
+      height: var(--input-height);
+      line-height: var(--input-height);
+      color: var(--color-text);
+      outline: none !important;
+      padding-inline: var(--input-padding);
+      font-size: var(--font-size-ms);
+      width: 100%;
+      transition: var(--transition);
+
+      &:has(input:focus-visible),
+      &:focus-visible {
+        border-color: var(--input-color-border-strong);
+      }
+    }
+
+    input,
+    textarea {
+      font-family: var(--global-font);
+    }
+
+    input[type='file']::file-selector-button {
+      background-color: var(--color-bg);
+      color: var(--color-text);
+      border: none;
+    }
+
+    input[type='range'] {
+      -webkit-appearance: none; /* Override default CSS styles */
+      appearance: none;
+      height: 4px;
+      border-radius: 2px;
+      background-color: var(--color-border);
+    }
+
+    ::-moz-range-thumb,
+    ::-webkit-slider-thumb {
+      width: 16px;
+      height: 16px;
+      background-color: var(--color-text-light);
+      border: none;
+    }
+
+    input {
+      display: block;
+      width: 100%;
+      border: none;
+      height: calc(var(--input-height) - 1px);
+      line-height: calc(var(--input-height) - 1px);
+      background: transparent;
+      outline: none;
+      font-size: var(--font-size-ms);
+      color: var(--color-text);
+
+      &:-webkit-autofill {
+        box-shadow: 0 0 0px 1000px var(--color-bg) inset;
+        -webkit-text-fill-color: var(--color-text);
+      }
+    }
+
+    textarea {
+      line-height: 1.3em;
+      height: auto;
+      min-height: 4lh;
+      field-sizing: content;
+      padding: var(--textarea-padding);
+      transition: none;
+    }
+  }
+
+  .vui-input-limit {
+    display: block;
+    margin-top: 6px;
+    text-align: left;
+    font-size: var(--font-size-xs);
+    color: var(--input-color-text-lighter);
+  }
+
+  .vui-input-errors {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding-top: 6px;
+
+    li {
+      display: block;
+      font-size: var(--font-size-s);
+      color: var(--color-text-red);
+    }
+  }
+
+  &.vui-dropzone {
+    &.dragging .vui-input .vui-input-style {
+      border-color: var(--color-border-accent);
+
+      &:hover {
+        border-color: var(--color-border);
+      }
+    }
+    .vui-input {
+      .vui-input-style {
+        height: unset;
+        border-width: 2px;
+        border-style: dashed;
+        border-radius: var(--border-radius-m);
+        line-height: 1.2em;
+
+        &:hover {
+          border-color: var(--color-border-strong);
+        }
+
+        input {
+          display: none;
+
+          & + label {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            min-height: 96px;
+            color: var(--color-text-light);
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/Kbd/Kbd.vue

@@ -0,0 +1,48 @@
+<script setup lang='ts'>
+import { useMagicKeys, whenever } from '@vueuse/core'
+import { computed } from 'vue'
+import './kbd.scss'
+
+interface Props {
+  /**
+   * Specify the key or the combination of keys connected with "+". Make sure
+   * there are no white spaces between letters.
+   *
+   * keys="Escape" keys="Ctrl+A"
+   */
+  keys: string
+  /**
+   * Display custom label instead of the automatically formatted keys.
+   */
+  label?: string
+  /**
+   * Show active state when this combination of keys is pressed.
+   */
+  highlight?: boolean
+}
+
+const props = defineProps<Props>()
+const emits = defineEmits<{
+  trigger: []
+}>()
+const keyHandler = useMagicKeys()
+
+whenever(keyHandler[props.keys], () => {
+  emits('trigger')
+})
+
+const isActive = computed(() => {
+  if (!props.highlight)
+    return false
+
+  return props.keys.split('+').every((key) => {
+    return keyHandler.current.has(key.toLowerCase())
+  })
+})
+</script>
+
+<template>
+  <kbd class="vui-kbd" :class="{ active: isActive }">
+    {{ props.label ?? props.keys.replaceAll("+", " + ") }}
+  </kbd>
+</template>

package/src/components/Kbd/KbdGroup.vue

@@ -0,0 +1,31 @@
+<script setup lang='ts'>
+import type { VNode } from 'vue'
+import { useMagicKeys, whenever } from '@vueuse/core'
+
+/**
+ * Can be used to wrap multiple <Kbd /> elements and triggers the callback when
+ * all of them are active
+ */
+
+const emits = defineEmits<{
+  trigger: []
+}>()
+
+const slots = defineSlots<{
+  default: () => Array<VNode & {
+    props: {
+      keys: string
+    }
+  }>
+}>()
+const keys = useMagicKeys()
+
+whenever(
+  keys[slots.default().map(vnode => vnode.props.keys).join('+')],
+  () => emits('trigger'),
+)
+</script>
+
+<template>
+  <slot />
+</template>

package/src/components/Kbd/kbd.scss

@@ -0,0 +1,18 @@
+.vui-kbd {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  border-radius: var(--border-radius-xs);
+  // border: 1px solid var(--color-border-strong);
+  font-size: var(--font-size-s);
+  padding: 0 4px;
+  transition: var(--transition);
+  font-weight: 600;
+  background-color: var(--color-text);
+  color: var(--color-text-invert);
+
+  &.active {
+    background-color: var(--color-text-yellow);
+  }
+}

package/src/components/Modal/Confirm.vue

@@ -0,0 +1,56 @@
+<script setup lang='ts'>
+import type { Variants } from '../Button/Button.vue'
+import type { ModalProps } from './Modal.vue'
+import Button from '../Button/Button.vue'
+import Flex from '../Flex/Flex.vue'
+import Modal from './Modal.vue'
+
+type Props = {
+  title?: string
+  content?: string
+  confirmText?: string
+  confirmVariant?: Variants
+  cancelText?: string
+  showCancel?: boolean
+} & Partial<ModalProps>
+
+const props = withDefaults(defineProps<Props>(), {
+  cancelText: 'Cancel',
+  confirmText: 'Ok',
+  size: 's',
+  canDismiss: true,
+  showCancel: true,
+  confirmVariant: 'default',
+})
+
+const emits = defineEmits<{
+  cancel: []
+  confirm: []
+}>()
+
+const open = defineModel<boolean>()
+</script>
+
+<template>
+  <pre>{{ $props }}</pre>
+  <Modal
+    v-bind="props"
+    v-model="open"
+  >
+    <template #default>
+      <div class="typeset">
+        <slot />
+      </div>
+    </template>
+    <template #footer>
+      <Flex justify-end>
+        <Button v-if="props.showCancel" plain @click="emits('cancel'), open = false">
+          {{ props.cancelText }}
+        </Button>
+        <Button :variant="props.confirmVariant" @click="emits('confirm'), open = false">
+          {{ props.confirmText }}
+        </Button>
+      </Flex>
+    </template>
+  </Modal>
+</template>

package/src/components/Modal/Modal.vue

@@ -0,0 +1,91 @@
+<script setup lang='ts'>
+import type { Sizes } from '../../shared/types'
+import type { Props as CardProps } from '../Card/Card.vue'
+import { useAttrs } from 'vue'
+import Backdrop from '../../internal/Backdrop/Backdrop.vue'
+import Button from '../Button/Button.vue'
+import Card from '../Card/Card.vue'
+import './modal.scss'
+
+export interface ModalProps {
+  size?: Sizes | 'full'
+  /**
+   * Modal wraps a floating card. You can optinally pass in any props you'd pass
+   * into the <Card /> component.
+   */
+  card?: CardProps
+  /**
+   * Modal will not overflow the screen, but its card's content will be scrollable instead.
+   */
+  scrollable?: boolean
+  /**
+   * Modal appears in the center of the screen
+   */
+  centered?: boolean
+  /**
+   * Wether modal can be closed by clicking the X button
+   */
+  canDismiss?: boolean
+}
+
+const {
+  size = 'm',
+  card = {},
+  scrollable,
+  centered,
+  canDismiss = true,
+} = defineProps<ModalProps>()
+
+const open = defineModel<boolean>()
+
+function close() {
+  open.value = false
+}
+
+const attrs = useAttrs()
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition appear name="modal">
+      <Backdrop v-if="open" @close="close">
+        <div class="vui-modal" :class="[`vui-modal-size-${size}`, { scrollable, centered }]" v-bind="attrs">
+          <Button
+            v-if="canDismiss"
+            class="vui-modal-close"
+            plain
+            square
+            icon="ph:x"
+            @click="open = false"
+          />
+          <Card v-bind="card">
+            <template v-if="$slots.header" #header>
+              <slot name="header" :close />
+            </template>
+            <template v-if="$slots.default" #default>
+              <div>
+                <slot name="default" :close />
+              </div>
+            </template>
+            <template v-if="$slots.footer" #footer>
+              <slot name="footer" :close />
+            </template>
+          </Card>
+        </div>
+      </Backdrop>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.modal-enter-active,
+.modal-leave-active {
+  transition: var(--transition);
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}
+</style>

package/src/components/Modal/modal.scss

@@ -0,0 +1,49 @@
+.vui-modal {
+  width: 100%;
+  margin-inline: auto;
+  height: 100%;
+  position: relative;
+
+  .vui-modal-close {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+  }
+
+  &.centered {
+    display: flex;
+    align-items: center;
+  }
+
+  &.vui-modal-size-s {
+    max-width: 440px;
+  }
+
+  &.vui-modal-size-m {
+    max-width: 620px;
+  }
+
+  &.vui-modal-size-l {
+    max-width: 728px;
+  }
+
+  &.scrollable {
+    & > .vui-card {
+      display: flex;
+      flex-direction: column;
+      inline-size: 100%;
+      max-height: 100%;
+
+      .vui-card-content {
+        flex: 1 1 0%;
+        overflow-y: auto;
+      }
+    }
+  }
+
+  & > .vui-card {
+    width: 100%;
+    margin-bottom: var(--backdrop-offset);
+    box-shadow: var(--box-shadow-strong);
+  }
+}

package/src/components/Pagination/Pagination.vue

@@ -0,0 +1,74 @@
+<script setup lang='ts'>
+import type { Pagination } from './pagination'
+import { computed } from 'vue'
+import Button from '../Button/Button.vue'
+import Flex from '../Flex/Flex.vue'
+
+interface Props {
+  numbers?: boolean
+  pagination: Pagination
+  prevNext?: boolean
+  firstLast?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  numbers: true,
+  prevNext: true,
+  firstLast: true,
+})
+
+const emit = defineEmits<{
+  change: [page: number]
+}>()
+
+const canNextPage = computed(() => props.pagination.currentPage < props.pagination.endPage)
+const canPrevPage = computed(() => props.pagination.currentPage > props.pagination.startPage)
+
+function setNext() {
+  emit('change', props.pagination.currentPage + 1)
+}
+
+function setPrev() {
+  emit('change', props.pagination.currentPage - 1)
+}
+</script>
+
+<template>
+  <Flex inline class="vui-pagination" gap="s">
+    <slot name="start">
+      <Button v-if="props.firstLast" data-title-top="First page" plain :disabled="props.pagination.startPage === props.pagination.currentPage" square icon="ph:caret-double-left" @click="emit('change', props.pagination.startPage)" />
+    </slot>
+
+    <slot name="prev" :disabled="canPrevPage" :set-page="setPrev">
+      <Button v-if="props.prevNext" data-title-top="Previous page" plain :disabled="!canPrevPage" square icon="ph:caret-left" @click="setPrev" />
+    </slot>
+
+    <template v-if="props.numbers">
+      <Flex gap="s">
+        <Button
+          v-for="page in props.pagination.pages"
+          :key="page"
+          square
+          :plain="props.pagination.currentPage !== page"
+          :variant="props.pagination.currentPage === page ? 'blue' : 'default'"
+          @click="emit('change', page)"
+        >
+          {{ page }}
+        </Button>
+      </Flex>
+    </template>
+    <slot name="next" :disabled="canNextPage" :set-page="setNext">
+      <Button v-if="props.prevNext" data-title-top="Next page" plain :disabled="!canNextPage" square icon="ph:caret-right" @click="setNext" />
+    </slot>
+
+    <slot name="end">
+      <Button v-if="props.firstLast" data-title-top="Last page" plain :disabled="props.pagination.endPage === props.pagination.currentPage" square icon="ph:caret-double-right" @click="emit('change', props.pagination.endPage)" />
+    </slot>
+  </Flex>
+</template>
+
+<style scoped>
+[data-title-top]:before {
+  white-space: nowrap;
+}
+</style>

package/src/components/Pagination/pagination.ts

@@ -0,0 +1,78 @@
+import { createArray } from '../../shared/helpers'
+
+export interface Pagination {
+  totalItems: number
+  currentPage: number
+  perPage: number
+  totalPages: number
+  startPage: number
+  endPage: number
+  startIndex: number
+  endIndex: number
+  pages: number[]
+}
+
+export function paginate(
+  totalItems: number,
+  currentPage: number = 1,
+  perPage: number = 15,
+  maxPages: number = 5,
+): Pagination {
+  // calculate total pages
+  const totalPages = Math.ceil(totalItems / perPage)
+
+  // ensure current page isn't out of range
+  if (currentPage < 1) {
+    currentPage = 1
+  }
+  else if (currentPage > totalPages) {
+    currentPage = totalPages
+  }
+
+  let startPage: number, endPage: number
+  if (totalPages <= maxPages) {
+    // total pages less than max so show all pages
+    startPage = 1
+    endPage = totalPages
+  }
+  else {
+    // total pages more than max so calculate start and end pages
+    const maxPagesBeforeCurrentPage = Math.floor(maxPages / 2)
+    const maxPagesAfterCurrentPage = Math.ceil(maxPages / 2) - 1
+    if (currentPage <= maxPagesBeforeCurrentPage) {
+      // current page near the start
+      startPage = 1
+      endPage = maxPages
+    }
+    else if (currentPage + maxPagesAfterCurrentPage >= totalPages) {
+      // current page near the end
+      startPage = totalPages - maxPages + 1
+      endPage = totalPages
+    }
+    else {
+      // current page somewhere in the middle
+      startPage = currentPage - maxPagesBeforeCurrentPage
+      endPage = currentPage + maxPagesAfterCurrentPage
+    }
+  }
+
+  // calculate start and end item indexes
+  const startIndex = (currentPage - 1) * perPage
+  const endIndex = Math.min(startIndex + perPage - 1, totalItems - 1)
+
+  // create an array of pages to ng-repeat in the pager control
+  const pages = createArray((endPage + 1) - startPage).map(i => startPage + i)
+
+  // return object with all pager properties required by the view
+  return {
+    totalItems,
+    currentPage,
+    perPage,
+    totalPages,
+    startPage,
+    endPage,
+    startIndex,
+    endIndex,
+    pages,
+  }
+}

package/src/components/Popout/Popout.vue

@@ -0,0 +1,39 @@
+<script setup lang='ts'>
+import type { MaybeElement, Placement } from '@floating-ui/vue'
+import { autoPlacement, offset, useFloating } from '@floating-ui/vue'
+import { toRef, useTemplateRef } from 'vue'
+import './popout.scss'
+
+interface Props {
+  anchor: MaybeElement<HTMLElement>
+  /**
+   * Override the autoPlacement option
+   */
+  placement?: Placement
+  /**
+   * Distance between the anchor and the rendered tooltip
+   */
+  offset?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  offset: 8,
+})
+
+const popoutRef = useTemplateRef('popout')
+const anchorRef = toRef(props.anchor)
+
+const { floatingStyles } = useFloating(anchorRef, popoutRef, {
+  placement: props.placement,
+  middleware: [
+    ...(props.placement ? [] : [autoPlacement()]),
+    offset(props.offset),
+  ],
+})
+</script>
+
+<template>
+  <div ref="popout" :style="floatingStyles" class="vui-popout">
+    <slot />
+  </div>
+</template>

package/src/components/Popout/popout.scss

@@ -0,0 +1,7 @@
+.vui-popout {
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  min-width: 80px;
+  background-color: var(--color-bg-raised);
+  border-radius: var(--border-radius-m);
+}