@dolanske/vui 0.3.4 → 0.5.0

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>

package/src/components/Pagination/pagination.ts

@@ -1,78 +1,78 @@
-import { createArray } from '../../shared/helpers'
-
-export interface Pagination {
-  totalItems: number
-  currentPage: number
-  perPage: number
-  totalPages: number
-  startPage: number
-  endPage: number
-  startIndex: number
-  endIndex: number
-  pages: number[]
-}
-
-export function paginate(
-  totalItems: number,
-  currentPage: number = 1,
-  perPage: number = 15,
-  maxPages: number = 5,
-): Pagination {
-  // calculate total pages
-  const totalPages = Math.ceil(totalItems / perPage)
-
-  // ensure current page isn't out of range
-  if (currentPage < 1) {
-    currentPage = 1
-  }
-  else if (currentPage > totalPages) {
-    currentPage = totalPages
-  }
-
-  let startPage: number, endPage: number
-  if (totalPages <= maxPages) {
-    // total pages less than max so show all pages
-    startPage = 1
-    endPage = totalPages
-  }
-  else {
-    // total pages more than max so calculate start and end pages
-    const maxPagesBeforeCurrentPage = Math.floor(maxPages / 2)
-    const maxPagesAfterCurrentPage = Math.ceil(maxPages / 2) - 1
-    if (currentPage <= maxPagesBeforeCurrentPage) {
-      // current page near the start
-      startPage = 1
-      endPage = maxPages
-    }
-    else if (currentPage + maxPagesAfterCurrentPage >= totalPages) {
-      // current page near the end
-      startPage = totalPages - maxPages + 1
-      endPage = totalPages
-    }
-    else {
-      // current page somewhere in the middle
-      startPage = currentPage - maxPagesBeforeCurrentPage
-      endPage = currentPage + maxPagesAfterCurrentPage
-    }
-  }
-
-  // calculate start and end item indexes
-  const startIndex = (currentPage - 1) * perPage
-  const endIndex = Math.min(startIndex + perPage - 1, totalItems - 1)
-
-  // create an array of pages to ng-repeat in the pager control
-  const pages = createArray((endPage + 1) - startPage).map(i => startPage + i)
-
-  // return object with all pager properties required by the view
-  return {
-    totalItems,
-    currentPage,
-    perPage,
-    totalPages,
-    startPage,
-    endPage,
-    startIndex,
-    endIndex,
-    pages,
-  }
-}
+import { createArray } from '../../shared/helpers'
+
+export interface Pagination {
+  totalItems: number
+  currentPage: number
+  perPage: number
+  totalPages: number
+  startPage: number
+  endPage: number
+  startIndex: number
+  endIndex: number
+  pages: number[]
+}
+
+export function paginate(
+  totalItems: number,
+  currentPage: number = 1,
+  perPage: number = 15,
+  maxPages: number = 5,
+): Pagination {
+  // calculate total pages
+  const totalPages = Math.ceil(totalItems / perPage)
+
+  // ensure current page isn't out of range
+  if (currentPage < 1) {
+    currentPage = 1
+  }
+  else if (currentPage > totalPages) {
+    currentPage = totalPages
+  }
+
+  let startPage: number, endPage: number
+  if (totalPages <= maxPages) {
+    // total pages less than max so show all pages
+    startPage = 1
+    endPage = totalPages
+  }
+  else {
+    // total pages more than max so calculate start and end pages
+    const maxPagesBeforeCurrentPage = Math.floor(maxPages / 2)
+    const maxPagesAfterCurrentPage = Math.ceil(maxPages / 2) - 1
+    if (currentPage <= maxPagesBeforeCurrentPage) {
+      // current page near the start
+      startPage = 1
+      endPage = maxPages
+    }
+    else if (currentPage + maxPagesAfterCurrentPage >= totalPages) {
+      // current page near the end
+      startPage = totalPages - maxPages + 1
+      endPage = totalPages
+    }
+    else {
+      // current page somewhere in the middle
+      startPage = currentPage - maxPagesBeforeCurrentPage
+      endPage = currentPage + maxPagesAfterCurrentPage
+    }
+  }
+
+  // calculate start and end item indexes
+  const startIndex = (currentPage - 1) * perPage
+  const endIndex = Math.min(startIndex + perPage - 1, totalItems - 1)
+
+  // create an array of pages to ng-repeat in the pager control
+  const pages = createArray((endPage + 1) - startPage).map(i => startPage + i)
+
+  // return object with all pager properties required by the view
+  return {
+    totalItems,
+    currentPage,
+    perPage,
+    totalPages,
+    startPage,
+    endPage,
+    startIndex,
+    endIndex,
+    pages,
+  }
+}

package/src/components/Popout/Popout.vue

@@ -1,42 +1,42 @@
-<script setup lang='ts'>
-import type { Placement, PopoutMaybeElement } from '../../shared/types'
-import { autoPlacement, offset, shift, useFloating } from '@floating-ui/vue'
-import { toRef, useTemplateRef } from 'vue'
-import './popout.scss'
-
-export interface Props {
-  anchor: PopoutMaybeElement<HTMLElement>
-  /**
-   * Override the autoPlacement option
-   */
-  placement?: Placement
-  /**
-   * Distance between the anchor and the rendered tooltip
-   */
-  offset?: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  offset: 8,
-})
-
-const popoutRef = useTemplateRef('popout')
-const anchorRef = toRef(props.anchor)
-
-const { floatingStyles } = useFloating(anchorRef, popoutRef, {
-  placement: props.placement,
-  middleware: [
-    ...(props.placement ? [] : [autoPlacement()]),
-    offset(props.offset),
-    shift({
-      padding: 8,
-    }),
-  ],
-})
-</script>
-
-<template>
-  <div ref="popout" :style="floatingStyles" class="vui-popout">
-    <slot />
-  </div>
-</template>
+<script setup lang='ts'>
+import type { Placement, PopoutMaybeElement } from '../../shared/types'
+import { autoPlacement, offset, shift, useFloating } from '@floating-ui/vue'
+import { toRef, useTemplateRef } from 'vue'
+import './popout.scss'
+
+export interface Props {
+  anchor: PopoutMaybeElement<HTMLElement>
+  /**
+   * Override the autoPlacement option
+   */
+  placement?: Placement
+  /**
+   * Distance between the anchor and the rendered tooltip
+   */
+  offset?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  offset: 8,
+})
+
+const popoutRef = useTemplateRef('popout')
+const anchorRef = toRef(props.anchor)
+
+const { floatingStyles } = useFloating(anchorRef, popoutRef, {
+  placement: props.placement,
+  middleware: [
+    ...(props.placement ? [] : [autoPlacement()]),
+    offset(props.offset),
+    shift({
+      padding: 8,
+    }),
+  ],
+})
+</script>
+
+<template>
+  <div ref="popout" :style="floatingStyles" class="vui-popout">
+    <slot />
+  </div>
+</template>

package/src/components/Popout/popout.scss

@@ -1,8 +1,8 @@
-.vui-popout {
-  border-radius: var(--border-radius);
-  box-shadow: var(--box-shadow);
-  min-width: 80px;
-  background-color: var(--color-bg-raised);
-  border-radius: var(--border-radius-m);
-  z-index: 1000;
-}
+.vui-popout {
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  min-width: 80px;
+  background-color: var(--color-bg-raised);
+  border-radius: var(--border-radius-m);
+  z-index: 1000;
+}