@dolanske/vui 0.3.4 → 0.5.0

package/src/components/Modal/Confirm.vue

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

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

@@ -1,49 +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);
-  }
-}
+.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/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>