@dolanske/vui 0.3.4 → 0.4.0

package/src/components/OTP/OTP.vue

@@ -1,133 +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>
+<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 +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>
+<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,83 +1,83 @@
-.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-m);
-      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;
-        }
-      }
-
-      &.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;
-  }
-}
+.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-m);
+      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;
+        }
+      }
+
+      &.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/Pagination/Pagination.vue

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