@dolanske/vui 0.1.4 → 0.2.0

package/src/components/OTP/OTP.vue

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

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

@@ -0,0 +1,84 @@
+.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: 42px;
+      height: 42px;
+      border: 1px solid var(--color-border-strong);
+      color: var(--color-text);
+      z-index: 1;
+      font-size: var(--font-size-l);
+      outline: 0 solid var(--color-text-light);
+      transition: var(--transition);
+
+      .blinker {
+        display: none;
+        height: 16px;
+        width: 1px;
+        background-color: var(--color-text);
+        animation: blink 1.25s ease-out infinite;
+      }
+
+      @keyframes blink {
+        0%,
+        70%,
+        100% {
+          opacity: 1;
+        }
+        20%,
+        50% {
+          opacity: 0;
+        }
+      }
+
+      &.has-value {
+        background-color: var(--color-bg-raised);
+
+        .blinker {
+          display: none !important;
+        }
+      }
+
+      // TODO: animate blinking cursor
+      &.active {
+        z-index: 2;
+        outline-width: 2px;
+
+        .blinker {
+          display: block;
+        }
+      }
+
+      &: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: 5;
+  }
+}

package/src/components/Popout/Popout.vue

@@ -1,11 +1,11 @@
 <script setup lang='ts'>
-import type { MaybeElement, Placement } from '@floating-ui/vue'
+import type { Placement, PopoutMaybeElement } from '../../shared/types'
 import { autoPlacement, offset, useFloating } from '@floating-ui/vue'
 import { toRef, useTemplateRef } from 'vue'
 import './popout.scss'
 
-interface Props {
-  anchor: MaybeElement<HTMLElement>
+export interface Props {
+  anchor: PopoutMaybeElement<HTMLElement>
   /**
    * Override the autoPlacement option
    */

package/src/components/Progress/Progress.vue

@@ -1,6 +1,6 @@
 <script setup lang='ts'>
-import { onMounted, useTemplateRef, watchEffect } from 'vue'
-import { delay, isNil, randomMinMax } from '../../shared/helpers'
+import { computed, onMounted, useTemplateRef, watchEffect } from 'vue'
+import { delay, formatUnitValue, isNil, randomMinMax } from '../../shared/helpers'
 import './progress.scss'
 
 interface Props {
@@ -42,16 +42,19 @@ const progressRef = useTemplateRef('progress')
 
 watchEffect(() => {
   if (progressRef.value && !isNil(height)) {
-    progressRef.value.style.setProperty('--vui-progress-height', `${height}px`)
+    progressRef.value.style.setProperty(
+      '--vui-progress-height',
+      formatUnitValue(height),
+    )
   }
 })
 
 // Automatically / randomly increment but never reach 100% until
 async function fakeIncrement() {
   if (fake && progressAmount.value < 100) {
-    if (progressAmount.value > 95) {
+    if (progressAmount.value > 90) {
       // Only in crement by the fraction of the remaining amount
-      progressAmount.value += (100 - progressAmount.value) * 0.075
+      progressAmount.value += (100 - progressAmount.value) * 0.05
       await delay(randomMinMax(500, 3000))
     }
     else {
@@ -63,6 +66,9 @@ async function fakeIncrement() {
 }
 
 onMounted(fakeIncrement)
+
+const w = computed(() => `${progressAmount.value}%`)
+const bC = computed(() => color)
 </script>
 
 <template>
@@ -74,11 +80,13 @@ onMounted(fakeIncrement)
       'fixed-active': progressAmount > 0 && progressAmount < 100,
     }"
   >
-    <div
-      class="vui-progress-indicator" :style="{
-        width: `${progressAmount}%`,
-        backgroundColor: color,
-      }"
-    />
+    <div class="vui-progress-indicator" />
   </div>
 </template>
+
+<style scoped lang="scss">
+.vui-progress-indicator {
+  width: v-bind(w);
+  background-color: v-bind(bC);
+}
+</style>

package/src/components/Progress/progress.scss

@@ -1,5 +1,6 @@
 .vui-progress {
   --vui-progress-height: 3px;
+
   display: block;
   width: 100%;
   position: relative;
@@ -18,7 +19,6 @@
     border-radius: none !important;
 
     &.fixed-active {
-      // Some arbitrary value which should never happen to people with
       height: var(--vui-progress-height);
     }
 

package/src/components/Radio/Radio.vue

@@ -6,7 +6,7 @@ import './radio.scss'
 export interface RadioProps {
   label?: string
   disabled?: boolean
-  value: string
+  value: any
 }
 
 const {

package/src/components/Radio/RadioGroup.vue

@@ -1,7 +1,7 @@
 <script setup lang='ts'>
-import type { VNode } from 'vue'
 import type { FlexProps } from '../Flex/Flex.vue'
-import type { RadioProps } from './Radio.vue'
+import type Radio from './Radio.vue'
+import { watchEffect } from 'vue'
 import Flex from '../Flex/Flex.vue'
 
 interface Props extends FlexProps {
@@ -14,22 +14,27 @@ const {
 } = defineProps<Props>()
 
 const slots = defineSlots<{
-  default: () => { children: Array<VNode & { props: RadioProps }> }[]
+  default: () => Array<typeof Radio>
 }>()
 
 const checked = defineModel()
+
+watchEffect(() => {
+  if (slots.default().some(s => s.type.__name !== 'Radio')) {
+    console.error('You can only pass `<Radio />` components as children.')
+  }
+})
 </script>
 
 <template>
   <Flex v-bind="flexProps">
     <Component
       :is="vnode"
-      v-for="vnode of slots.default()[0].children"
+      v-for="vnode of slots.default()"
       :key="vnode.props.value"
       v-bind="vnode.props"
       v-model="checked"
       :class="{ disabled: disabled || vnode.props.disabled }"
     />
   </Flex>
-  <!-- <div class="vui-radio-group" /> -->
 </template>

package/src/components/Sheet/Sheet.vue

@@ -1,6 +1,7 @@
 <script setup lang='ts'>
 import { computed } from 'vue'
 import Backdrop from '../../internal/Backdrop/Backdrop.vue'
+import { formatUnitValue } from '../../shared/helpers'
 import Button from '../Button/Button.vue'
 import Divider from '../Divider/Divider.vue'
 import './sheet.scss'
@@ -17,6 +18,8 @@ const {
   separator,
 } = defineProps<Props>()
 
+const TRANSITION_OFFSET = 16
+
 const open = defineModel<boolean>()
 
 function close() {
@@ -24,27 +27,21 @@ function close() {
 }
 
 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 { width: formatUnitValue(size) }
   }
 
-  return style
+  return undefined
 })
 
 // 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 'left': return `translate(-${TRANSITION_OFFSET}px, 0)`
+    case 'top': return `translate(0, -${TRANSITION_OFFSET}px)`
+    case 'bottom': return `translate(0, ${TRANSITION_OFFSET}px)`
     case 'right':
-    default: return `translate(16px, 0)`
+    default: return `translate(${TRANSITION_OFFSET}px, 0)`
   }
 })
 </script>
@@ -52,16 +49,16 @@ const baseTransform = computed(() => {
 <template>
   <Teleport to="body">
     <Transition appear name="sheet">
-      <Backdrop v-if="open" :style="{ padding: 0 }" @close="open = false">
+      <Backdrop v-if="open" @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 }">
+            <div class="flex-1">
               <slot name="header" :close />
             </div>
             <Button square icon="ph:x" @click="open = false" />
           </div>
 
-          <Divider v-if="separator && $slots.header" :size="1" />
+          <Divider v-if="separator && $slots.header" :space="1" />
 
           <div v-if="$slots.default" class="vui-sheet-content">
             <slot :close />
@@ -73,6 +70,10 @@ const baseTransform = computed(() => {
 </template>
 
 <style scoped lang="scss">
+.vui-backdrop {
+  padding: 0;
+}
+
 .sheet-enter-active,
 .sheet-leave-active {
   transition: var(--transition);

package/src/components/Sheet/sheet.scss

@@ -9,20 +9,24 @@
   &.vui-sheet-position-top {
     top: 0;
     border-bottom: 1px solid var(--color-border);
+    height: auto;
   }
 
   &.vui-sheet-position-bottom {
     bottom: 0;
     border-top: 1px solid var(--color-border);
+    height: auto;
   }
 
   &.vui-sheet-position-right {
     right: 0;
+    top: 0;
     border-left: 1px solid var(--color-border);
   }
 
   &.vui-sheet-position-left {
     left: 0;
+    top: 0;
     border-right: 1px solid var(--color-border);
   }
 

package/src/components/Skeleton/Skeleton.vue

@@ -1,5 +1,7 @@
 <!-- eslint-disable ts/no-use-before-define -->
 <script setup lang='ts'>
+import { computed } from 'vue'
+import { formatUnitValue } from '../../shared/helpers'
 import './skeleton.scss'
 
 interface Props {
@@ -20,27 +22,24 @@ const {
 
 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`
-}
+// Give priority to radius, if it is NOT set to default
+const bR = computed(() => formatUnitValue(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
+const w = computed(() => formatUnitValue(circle ? (width || height) : width))
+const h = computed(() => formatUnitValue(circle ? (width || height) : height))
 </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),
-    }"
-  />
+  <div class="vui-skeleton" />
 </template>
+
+<style lang="scss" scoped>
+.vui-skeleton {
+  border-radius: v-bind(bR);
+  width: v-bind(w);
+  height: v-bind(h);
+}
+</style>

package/src/components/Spinner/Spinner.vue

@@ -12,7 +12,7 @@ const {
   size = 's',
 } = defineProps<Props>()
 
-const actualSize = computed(() => {
+const w = computed(() => {
   switch (size) {
     case Size.s: return '16px'
     case Size.l: return '38px'
@@ -21,7 +21,7 @@ const actualSize = computed(() => {
   }
 })
 
-const actualBorderWidth = computed(() => {
+const bW = computed(() => {
   switch (size) {
     case Size.s: return '3px'
     case Size.l: return '5px'
@@ -37,8 +37,8 @@ const actualBorderWidth = computed(() => {
 
 <style lang="scss">
 .vui-spinner {
-  width: v-bind(actualSize);
-  height: v-bind(actualSize);
-  border-width: v-bind(actualBorderWidth);
+  width: v-bind(w);
+  height: v-bind(w);
+  border-width: v-bind(bW);
 }
 </style>

package/src/components/Table/table.ts

@@ -125,7 +125,8 @@ export function defineTable<const Dataset extends Array<BaseRow>>(
     const key = sorting.value.key
 
     if (key) {
-      final = final.toSorted((a: Dataset[number], b: Dataset[number]) => {
+      // FIXME: change to `toSorted` when typescript is ok
+      final = [...final].sort((a: Dataset[number], b: Dataset[number]) => {
         const aValue = a[key]
         const bValue = b[key]
         return sorting.value.type === 'asc'

package/src/components/Tooltip/Tooltip.vue

@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import type { Placement } from '@floating-ui/vue'
+import type { Placement } from '../../shared/types'
 import { ref, useTemplateRef, watch } from 'vue'
 import Popout from '../Popout/Popout.vue'
 import './tooltip.scss'

package/src/index.ts

@@ -28,6 +28,8 @@ import Kbd from './components/Kbd/Kbd.vue'
 import KbdGroup from './components/Kbd/KbdGroup.vue'
 import Confirm from './components/Modal/Confirm.vue'
 import Modal from './components/Modal/Modal.vue'
+import OTP from './components/OTP/OTP.vue'
+import OTPItem from './components/OTP/OTPItem.vue'
 import Pagination from './components/Pagination/Pagination.vue'
 import Popout from './components/Popout/Popout.vue'
 import Progress from './components/Progress/Progress.vue'
@@ -85,6 +87,8 @@ export {
   Kbd,
   KbdGroup,
   Modal,
+  OTP,
+  OTPItem,
   Pagination,
   Password,
   Popout,

package/src/shared/helpers.ts

@@ -21,7 +21,7 @@ export function getMaybeRefLength(value: string | number): number {
   return typeof value === 'number' ? value : value.length
 }
 
-export function isNil(value: any): value is undefined {
+export function isNil(value: any): value is undefined | null {
   return value === undefined || value === null
 }
 
@@ -51,3 +51,24 @@ export function randomMinMax(min: number, max: number): number {
 export function delay(amount: number): Promise<any> {
   return new Promise(r => setTimeout(r, amount))
 }
+
+export function setCharAt(str: string, char: string | number, index: number): string {
+  if (str.length === 0)
+    return char.toString()
+  return str.substring(0, index) + char + str.substring(index + 1)
+}
+
+/**
+ * Takes in a value and if it is a number, appends "px" to it, otherwise returns
+ * the original value.
+ *
+ */
+export function formatUnitValue(value: string | number, unit: string = 'px'): string {
+  return typeof value === 'number'
+    ? `${value}${unit}`
+  // 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}${unit}`
+}

package/src/shared/types.ts

@@ -1,3 +1,5 @@
+import type { ComponentPublicInstance } from 'vue'
+
 export enum Size {
   s = 's',
   m = 'm',
@@ -9,3 +11,7 @@ export type Sizes = 's' | 'm' | 'l'
 export type DeepRequired<T> = { [K in keyof T]: DeepRequired<T[K]> } & Required<T>
 
 export type VueClass = string | Record<string, | boolean> | Array<string | Record<string, string | boolean>>
+
+// FLoating UI imported types were ruining the build so here we go
+export type PopoutMaybeElement<T> = T | ComponentPublicInstance | null | undefined
+export type Placement = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'