@dolanske/vui 1.4.0 → 1.4.2

package/src/components/Kbd/Kbd.vue

@@ -1,48 +0,0 @@
-<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

@@ -1,28 +0,0 @@
-<script setup lang='ts'>
-import { useMagicKeys, whenever } from '@vueuse/core'
-import { enforceSlotType, useFlattenedSlot } from '../../shared/slots'
-
-/**
- * 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()
-const keys = useMagicKeys()
-
-const flattened = useFlattenedSlot(slots.default)
-enforceSlotType(flattened, 'Kbd')
-
-whenever(
-  keys[flattened.value.map(vnode => vnode.props.keys).join('+')],
-  () => emits('trigger'),
-)
-</script>
-
-<template>
-  <slot />
-</template>

package/src/components/Kbd/kbd.scss

@@ -1,19 +0,0 @@
-.vui-kbd {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 24px;
-  border-radius: var(--border-radius-xs);
-  font-size: var(--font-size-s);
-  padding: 0 4px;
-  transition: var(--transition-fast);
-  font-weight: 600;
-  background-color: var(--color-button-gray);
-  color: var(--color-text-accent);
-
-  &.active {
-    transform: translateY(2px);
-    color: var(--color-text-invert);
-    background-color: var(--color-button-fill);
-  }
-}

package/src/components/Modal/Confirm.vue

@@ -1,56 +0,0 @@
-<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: 'gray',
-  open: false,
-})
-
-const emit = defineEmits<{
-  cancel: []
-  confirm: []
-  close: []
-}>()
-</script>
-
-<template>
-  <Modal
-    v-bind="props"
-    :open="props.open"
-    @close="emit('close')"
-  >
-    <template #default>
-      <div class="typeset">
-        <slot />
-      </div>
-    </template>
-    <template #footer>
-      <Flex x-end>
-        <Button v-if="props.showCancel" plain @click="emit('cancel'), emit('close')">
-          {{ props.cancelText }}
-        </Button>
-        <Button :variant="props.confirmVariant" @click="emit('confirm'), emit('close')">
-          {{ props.confirmText }}
-        </Button>
-      </Flex>
-    </template>
-  </Modal>
-</template>

package/src/components/Modal/Modal.vue

@@ -1,103 +0,0 @@
-<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 {
-  /**
-   * Controls the visibility of the modal
-   */
-  open?: boolean
-  /**
-   * Controls the width of the modal
-   */
-  size?: Sizes | 'full' | 'screen'
-  /**
-   * 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,
-  open = false,
-} = defineProps<ModalProps>()
-
-const emit = defineEmits<{ close: [] }>()
-
-const attrs = useAttrs()
-
-function tryClose() {
-  if (canDismiss) {
-    emit('close')
-  }
-}
-</script>
-
-<template>
-  <Teleport to="body">
-    <Transition appear name="modal">
-      <Backdrop v-if="open" :class="{ 'p-0': size === 'screen' }" @close="tryClose">
-        <div class="vui-modal" :class="[`vui-modal-size-${size}`, { scrollable: scrollable || size === 'screen', centered }]" v-bind="attrs" @click.self="tryClose">
-          <Card v-bind="card">
-            <template v-if="$slots.header" #header>
-              <slot name="header" :close="() => emit('close')" />
-            </template>
-            <template #header-end>
-              <Button
-                v-if="canDismiss"
-                class="vui-modal-close"
-                plain
-                square
-                icon="ph:x"
-                @click="emit('close')"
-              />
-            </template>
-            <template v-if="$slots.default" #default>
-              <div>
-                <slot name="default" :close="() => emit('close')" />
-              </div>
-            </template>
-            <template v-if="$slots.footer" #footer>
-              <slot name="footer" :close="() => emit('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(1.025);
-}
-</style>

package/src/components/Modal/modal.scss

@@ -1,54 +0,0 @@
-.vui-modal {
-  width: 100%;
-  margin-inline: auto;
-  height: 100%;
-  position: relative;
-
-  &.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;
-  }
-
-  &.vui-modal-size-screen {
-    position: fixed;
-    inset: 0;
-
-    & > .vui-card {
-      border-radius: 0;
-      border: none;
-      height: 100vh;
-    }
-  }
-
-  &.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/OTP/OTP.vue

@@ -1,133 +0,0 @@
-<script setup lang='ts'>
-import type { ModelRef, Ref } from 'vue'
-import { computed, provide, ref, toRef, useTemplateRef, watch } from 'vue'
-import { setCharAt } from '../../shared/helpers'
-import './otp.scss'
-
-export interface OtpContext {
-  otpValue: ModelRef<string>
-  cursorIndex: Ref<number>
-  redacted: Ref<boolean>
-  register: () => void
-}
-
-interface Props {
-  mode?: 'num' | 'char' | 'both'
-  redacted?: boolean
-}
-
-const {
-  mode = 'both',
-  redacted = false,
-} = defineProps<Props>()
-
-const emits = defineEmits<{
-  change: [value?: string]
-  complete: [value: string]
-}>()
-
-const otpValue = defineModel<string>({
-  default: '',
-})
-
-const cursorIndex = ref<number>(-1)
-const regexNumbers = '^\\d+$'
-const regexChars = '^[a-z]+$'
-const regexBoth = '^[a-z0-9]+$'
-
-const pattern = computed(() => {
-  if (mode === 'num')
-    return new RegExp(regexNumbers)
-  else if (mode === 'char')
-    return new RegExp(regexChars, 'i')
-  else return new RegExp(regexBoth, 'i')
-})
-
-const maxLen = ref(0)
-
-const input = useTemplateRef('inputRef')
-
-provide('otp-context', {
-  otpValue,
-  cursorIndex,
-  redacted: toRef(() => redacted),
-  // Called by all OTPItem child components to properly set max length of the input.
-  register: () => maxLen.value++,
-})
-
-watch(otpValue, value => emits('change', value))
-
-function setOtpValue(value: string) {
-  otpValue.value = value
-  if (input.value) {
-    input.value.value = value
-  }
-}
-
-function updateValue(e: KeyboardEvent) {
-  const key = e.key
-
-  // Capping at length 0 prevents all non-character keyboard inputs
-  if (pattern.value.test(key) && key.length === 1) {
-    const newValue = setCharAt(otpValue.value, key, cursorIndex.value)
-
-    if (newValue.length <= maxLen.value) {
-      setOtpValue(newValue)
-
-      if (cursorIndex.value < maxLen.value - 1)
-        cursorIndex.value++
-    }
-  }
-  else if (key === 'ArrowLeft' && cursorIndex.value > 0) {
-    cursorIndex.value--
-  }
-  else if (key === 'ArrowRight' && cursorIndex.value < otpValue.value.length) {
-    cursorIndex.value++
-  }
-  else if (key === 'Backspace') {
-    // If we press backspace multiple times make sure to traverse back by 1
-    if (otpValue.value.charAt(cursorIndex.value) === '' && cursorIndex.value > 0) {
-      cursorIndex.value--
-    }
-
-    const newValue = setCharAt(otpValue.value, '', cursorIndex.value)
-    setOtpValue(newValue)
-  }
-}
-
-function handlePaste(e: any) {
-  const clipboard = e.clipboardData?.getData('text/plain')
-  if (clipboard) {
-    const clipboardTrim = clipboard.trim().slice(0, maxLen.value - cursorIndex.value)
-
-    if (!pattern.value.test(clipboardTrim)) {
-      return
-    }
-
-    const currentTrimStart = otpValue.value.slice(0, cursorIndex.value)
-    const currentTrimEnd = otpValue.value.slice(cursorIndex.value + clipboardTrim.length)
-    const newValue = (currentTrimStart + clipboardTrim + currentTrimEnd).trim()
-    setOtpValue(newValue)
-    cursorIndex.value = Math.min(newValue.length, maxLen.value - 1)
-  }
-}
-</script>
-
-<template>
-  <div class="vui-otp">
-    <input
-      ref="inputRef"
-      type="text"
-      class="vui-otp-input"
-      contenteditable="true"
-      @keydown="updateValue"
-      @blur="cursorIndex = -1"
-      @focus="cursorIndex = Math.min(otpValue.length, maxLen - 1)"
-      @paste="handlePaste"
-    >
-
-    <div class="vui-otp-items">
-      <slot />
-    </div>
-  </div>
-</template>

package/src/components/OTP/OTPItem.vue

@@ -1,37 +0,0 @@
-<script setup lang='ts'>
-import type { OtpContext } from './OTP.vue'
-import { Icon } from '@iconify/vue'
-import { inject } from 'vue'
-
-interface Props {
-  i: number
-}
-
-const props = defineProps<Props>()
-
-const {
-  otpValue,
-  cursorIndex,
-  redacted,
-  register,
-} = inject('otp-context') as OtpContext
-
-register()
-</script>
-
-<template>
-  <div
-    class="vui-otp-item" :class="{
-      'active': props.i === cursorIndex,
-      'has-value': otpValue.trim().at(props.i),
-    }"
-  >
-    <div class="blinker" />
-    <template v-if="otpValue.trim().at(props.i)">
-      <Icon v-if="redacted" icon="ph:asterisk" />
-      <template v-else>
-        {{ otpValue.at(props.i) }}
-      </template>
-    </template>
-  </div>
-</template>

package/src/components/OTP/otp.scss

@@ -1,84 +0,0 @@
-.vui-otp {
-  display: inline-block;
-  position: relative;
-
-  .vui-otp-items {
-    display: inline-flex;
-    gap: 0;
-
-    .vui-otp-item {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: var(--interactive-el-height);
-      height: var(--interactive-el-height);
-      border: 1px solid var(--color-border-strong);
-      color: var(--color-text);
-      z-index: var(--z-default);
-      font-size: var(--font-size-m);
-      outline: 0 solid var(--color-text-light);
-      transition: var(--transition-fast);
-
-      .blinker {
-        display: block;
-        height: 16px;
-        width: 1px;
-        background-color: var(--color-text);
-        animation: blink 1s ease-out infinite;
-        visibility: hidden;
-      }
-
-      @keyframes blink {
-        0%,
-        70%,
-        100% {
-          opacity: 1;
-        }
-        20%,
-        50% {
-          opacity: 0;
-        }
-      }
-
-      &.has-value {
-        background-color: var(--color-bg-medium);
-
-        .blinker {
-          display: none !important;
-        }
-      }
-
-      &.active {
-        z-index: var(--z-active);
-        outline-width: 2px;
-
-        .blinker {
-          visibility: visible;
-        }
-      }
-
-      &:not(:first-child) {
-        margin-left: -1px;
-      }
-
-      &:first-child {
-        border-top-left-radius: var(--border-radius-m);
-        border-bottom-left-radius: var(--border-radius-m);
-      }
-
-      &:last-child {
-        border-top-right-radius: var(--border-radius-m);
-        border-bottom-right-radius: var(--border-radius-m);
-      }
-    }
-  }
-
-  .vui-otp-input {
-    position: absolute;
-    inset: 0;
-    outline-width: 0px;
-    opacity: 0;
-    background: transparent;
-    z-index: var(--z-mask);
-  }
-}

package/src/components/Pagination/Pagination.vue

@@ -1,92 +0,0 @@
-<script setup lang='ts'>
-import type { Variants } from '../Button/Button.vue'
-import type { Pagination } from './pagination'
-import { computed } from 'vue'
-import Button from '../Button/Button.vue'
-import Flex from '../Flex/Flex.vue'
-import Tooltip from '../Tooltip/Tooltip.vue'
-
-interface Props {
-  numbers?: boolean
-  pagination: Pagination
-  prevNext?: boolean
-  firstLast?: boolean
-  variant?: Variants
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  numbers: true,
-  prevNext: true,
-  firstLast: true,
-  variant: 'gray',
-})
-
-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="xxs">
-    <slot name="start">
-      <Tooltip v-if="props.firstLast">
-        <Button plain :disabled="props.pagination.startPage === props.pagination.currentPage" square icon="ph:caret-double-left" @click="emit('change', props.pagination.startPage)" />
-        <template #tooltip>
-          <p>First page</p>
-        </template>
-      </Tooltip>
-    </slot>
-
-    <slot name="prev" :disabled="canPrevPage" :set-page="setPrev">
-      <Tooltip v-if="props.prevNext">
-        <Button plain :disabled="!canPrevPage" square icon="ph:caret-left" @click="setPrev" />
-        <template #tooltip>
-          <p>Previous page</p>
-        </template>
-      </Tooltip>
-    </slot>
-
-    <template v-if="props.numbers">
-      <Flex gap="xxs">
-        <Button
-          v-for="page in props.pagination.pages"
-          :key="page"
-          square
-          :plain="props.pagination.currentPage !== page"
-          variant="gray"
-          @click="emit('change', page)"
-        >
-          {{ page }}
-        </Button>
-      </Flex>
-    </template>
-    <slot name="next" :disabled="canNextPage" :set-page="setNext">
-      <Tooltip v-if="props.prevNext">
-        <Button plain :disabled="!canNextPage" square icon="ph:caret-right" @click="setNext" />
-        <template #tooltip>
-          <p>Next page</p>
-        </template>
-      </Tooltip>
-    </slot>
-
-    <slot name="end">
-      <Tooltip v-if="props.firstLast">
-        <Button plain :disabled="props.pagination.endPage === props.pagination.currentPage" square icon="ph:caret-double-right" @click="emit('change', props.pagination.endPage)" />
-        <template #tooltip>
-          <p>Last page</p>
-        </template>
-      </Tooltip>
-    </slot>
-  </Flex>
-</template>