@dolanske/vui 0.1.3 → 0.1.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dolanske/vui",
   "type": "module",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "private": false,
   "description": "Brother in Christ there's a new UI library ",
   "author": "dolanske",

package/src/App.vue

@@ -2,13 +2,14 @@
 import { ref } from 'vue'
 import Accordion from './components/Accordion/Accordion.vue'
 import Button from './components/Button/Button.vue'
-import Flex from './components/Flex/Flex.vue'
-import Input from './components/Input/Input.vue'
+
 import Tab from './components/Tabs/Tab.vue'
+
 import Tabs from './components/Tabs/Tabs.vue'
 
 const tab = ref('components')
-const value = ref('')
+
+const count = ref(10)
 </script>
 
 <template>
@@ -23,27 +24,20 @@ const value = ref('')
       home
     </div>
     <div v-if="tab === 'components'">
-      <Flex>
-        <Button variant="success">
-          Hello
-        </Button>
-        <Button variant="success" plain>
-          Hello
-        </Button>
-        <Button variant="success" active>
-          Hello
-        </Button>
+      <Button @click="count += 10">
+        Increase!!!
+      </Button>
 
-        {{ value }}
-
-        <Button variant="success" disabled>
-          Hello
-        </Button>
-      </Flex>
-
-      <Accordion label="Hi">
-        <Input v-model="value" />
+      <Accordion>
+        <template #header>
+          Hiiii
+        </template>
+        <p v-for="item in count" :key="item">
+          I am a bro
+        </p>
       </Accordion>
+
+      <br>
     </div>
     <div v-else-if="tab === 'typography'" class="typeset" :style="{ maxWidth: '688px', margin: 'auto' }">
       <h1>The Joke Tax Chronicles</h1>

package/src/components/Accordion/Accordion.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
+import { useResizeObserver } from '@vueuse/core'
 import { ref, useTemplateRef, watch, watchEffect } from 'vue'
 import './accordion.scss'
 
@@ -16,6 +17,7 @@ const emits = defineEmits<{
 
 const isOpen = ref(false)
 const contentRef = useTemplateRef('content')
+// const contentChild = useTemplateRef('content-child')
 const contentMaxHeight = ref(0)
 
 watchEffect(() => {
@@ -55,6 +57,12 @@ defineExpose({
   toggle,
   isOpen,
 })
+
+useResizeObserver(contentRef, ([entry]) => {
+  if (isOpen.value && contentMaxHeight.value !== entry.contentRect.height) {
+    contentMaxHeight.value = entry.contentRect.height || 0
+  }
+})
 </script>
 
 <template>
@@ -68,8 +76,10 @@ defineExpose({
       <Icon icon="ph:caret-down" />
     </button>
 
-    <div ref="content" class="vui-accordion-content" :style="{ 'max-height': isOpen ? `${contentMaxHeight}px` : '0px' }">
-      <slot />
+    <div class="vui-accordion-content" :style="{ 'max-height': isOpen ? `${contentMaxHeight}px` : '0px' }">
+      <div ref="content">
+        <slot />
+      </div>
     </div>
   </div>
 </template>

package/src/components/Button/button.scss

@@ -1,5 +1,5 @@
 .vui-button {
-  --button-height: 32px;
+  --button-height: 34px;
   --button-padding: 8px;
 
   &.disabled {

package/src/components/Dropdown/dropdown.scss

@@ -16,7 +16,7 @@
   width: fit-content;
   gap: var(--space-xs);
   width: 100%;
-  height: 32px;
+  height: 34px;
   border-radius: var(--border-radius-m);
   font-size: var(--font-size-s);
   cursor: default;

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/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,9 @@ 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)
+}