@dolanske/vui 0.3.3 → 0.3.4

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,39 +1,42 @@
-<script setup lang='ts'>
-import type { Placement, PopoutMaybeElement } from '../../shared/types'
-import { autoPlacement, offset, 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),
-  ],
-})
-</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;
+}

package/src/components/Progress/Progress.vue

@@ -1,90 +1,90 @@
-<script setup lang='ts'>
-import { computed, onMounted, useTemplateRef, watchEffect } from 'vue'
-import { delay, formatUnitValue, isNil, randomMinMax } from '../../shared/helpers'
-import './progress.scss'
-
-interface Props {
-  /**
-   * Will randomly increment but never actually reach the end
-   */
-  fake?: boolean
-  /**
-   * Indicator color. Use CSS color values or variables
-   */
-  color?: string
-  /**
-   * Displays loader at the top of the page. It is only displayed when the
-   * progress is between 0 and 100 (exclusive).
-   */
-  fixed?: boolean
-  /**
-   * Height
-   */
-  height?: number | string
-}
-
-const {
-  fake,
-  color = 'var(--color-accent)',
-  fixed,
-  height,
-} = defineProps<Props>()
-
-const progressAmount = defineModel<number>({
-  default: 0,
-  set(value) {
-    return Math.min(value, 100)
-  },
-})
-
-// Set height programatically
-const progressRef = useTemplateRef('progress')
-
-watchEffect(() => {
-  if (progressRef.value && !isNil(height)) {
-    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 > 90) {
-      // Only in crement by the fraction of the remaining amount
-      progressAmount.value += (100 - progressAmount.value) * 0.05
-      await delay(randomMinMax(500, 3000))
-    }
-    else {
-      progressAmount.value += randomMinMax(1, 10)
-      await delay(randomMinMax(200, 1000))
-    }
-    fakeIncrement()
-  }
-}
-
-onMounted(fakeIncrement)
-
-const w = computed(() => `${progressAmount.value}%`)
-const bC = computed(() => color)
-</script>
-
-<template>
-  <div
-    ref="progress"
-    class="vui-progress"
-    :class="{
-      fixed,
-      'fixed-active': progressAmount > 0 && progressAmount < 100,
-    }"
-  >
-    <div
-      class="vui-progress-indicator" :style="{
-        width: w,
-        backgroundColor: bC,
-      }"
-    />
-  </div>
-</template>
+<script setup lang='ts'>
+import { computed, onMounted, useTemplateRef, watchEffect } from 'vue'
+import { delay, formatUnitValue, isNil, randomMinMax } from '../../shared/helpers'
+import './progress.scss'
+
+interface Props {
+  /**
+   * Will randomly increment but never actually reach the end
+   */
+  fake?: boolean
+  /**
+   * Indicator color. Use CSS color values or variables
+   */
+  color?: string
+  /**
+   * Displays loader at the top of the page. It is only displayed when the
+   * progress is between 0 and 100 (exclusive).
+   */
+  fixed?: boolean
+  /**
+   * Height
+   */
+  height?: number | string
+}
+
+const {
+  fake,
+  color = 'var(--color-accent)',
+  fixed,
+  height,
+} = defineProps<Props>()
+
+const progressAmount = defineModel<number>({
+  default: 0,
+  set(value) {
+    return Math.min(value, 100)
+  },
+})
+
+// Set height programatically
+const progressRef = useTemplateRef('progress')
+
+watchEffect(() => {
+  if (progressRef.value && !isNil(height)) {
+    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 > 90) {
+      // Only in crement by the fraction of the remaining amount
+      progressAmount.value += (100 - progressAmount.value) * 0.05
+      await delay(randomMinMax(500, 3000))
+    }
+    else {
+      progressAmount.value += randomMinMax(1, 10)
+      await delay(randomMinMax(200, 1000))
+    }
+    fakeIncrement()
+  }
+}
+
+onMounted(fakeIncrement)
+
+const w = computed(() => `${progressAmount.value}%`)
+const bC = computed(() => color)
+</script>
+
+<template>
+  <div
+    ref="progress"
+    class="vui-progress"
+    :class="{
+      fixed,
+      'fixed-active': progressAmount > 0 && progressAmount < 100,
+    }"
+  >
+    <div
+      class="vui-progress-indicator" :style="{
+        width: w,
+        backgroundColor: bC,
+      }"
+    />
+  </div>
+</template>

package/src/components/Progress/progress.scss

@@ -1,41 +1,41 @@
-.vui-progress {
-  --vui-progress-height: 3px;
-
-  display: block;
-  width: 100%;
-  position: relative;
-  border-radius: 999px;
-  background-color: var(--color-bg-lowered);
-  overflow: hidden;
-  height: var(--vui-progress-height);
-
-  &.fixed {
-    transition: var(--transition-slow);
-    transition-property: height;
-    position: fixed;
-    inset: 0;
-    bottom: unset;
-    height: 0;
-    border-radius: none !important;
-
-    &.fixed-active {
-      height: var(--vui-progress-height);
-    }
-
-    .vui-progress-indicator {
-      border-top-left-radius: unset !important;
-      border-bottom-left-radius: unset !important;
-    }
-  }
-
-  .vui-progress-indicator {
-    position: absolute;
-    z-index: 4;
-    inset: 0;
-    right: unset;
-    width: 0;
-    border-radius: 999px;
-    background-color: var(--color-text-lighter);
-    transition: var(--transition-slow);
-  }
-}
+.vui-progress {
+  --vui-progress-height: 3px;
+
+  display: block;
+  width: 100%;
+  position: relative;
+  border-radius: 999px;
+  background-color: var(--color-bg-lowered);
+  overflow: hidden;
+  height: var(--vui-progress-height);
+
+  &.fixed {
+    transition: var(--transition-slow);
+    transition-property: height;
+    position: fixed;
+    inset: 0;
+    bottom: unset;
+    height: 0;
+    border-radius: none !important;
+
+    &.fixed-active {
+      height: var(--vui-progress-height);
+    }
+
+    .vui-progress-indicator {
+      border-top-left-radius: unset !important;
+      border-bottom-left-radius: unset !important;
+    }
+  }
+
+  .vui-progress-indicator {
+    position: absolute;
+    z-index: 4;
+    inset: 0;
+    right: unset;
+    width: 0;
+    border-radius: 999px;
+    background-color: var(--color-text-lighter);
+    transition: var(--transition-slow);
+  }
+}

package/src/components/Radio/Radio.vue

@@ -1,36 +1,36 @@
-<script setup lang='ts'>
-import { Icon } from '@iconify/vue'
-import { computed, useId } from 'vue'
-import './radio.scss'
-
-export interface RadioProps {
-  label?: string
-  disabled?: boolean
-  value: any
-}
-
-const {
-  label,
-  disabled,
-  value,
-} = defineProps<RadioProps>()
-const slots = defineSlots()
-const checked = defineModel()
-const id = useId()
-const isChecked = computed(() => value === checked.value)
-</script>
-
-<template>
-  <div class="vui-radio" :class="{ disabled: !!disabled, checked: isChecked }">
-    <input :id v-model="checked" type="radio" :value :checked="isChecked">
-    <label :for="id">
-      <span class="vui-radio-icon">
-        <Icon :icon="isChecked ? 'ph:radio-button-fill' : 'ph:circle'" />
-      </span>
-      <p v-if="!slots.default" class="vui-radio-content">{{ label || value }}</p>
-      <div v-else class="vui-radio-content">
-        <slot />
-      </div>
-    </label>
-  </div>
-</template>
+<script setup lang='ts'>
+import { Icon } from '@iconify/vue'
+import { computed, useId } from 'vue'
+import './radio.scss'
+
+export interface RadioProps {
+  label?: string
+  disabled?: boolean
+  value: any
+}
+
+const {
+  label,
+  disabled,
+  value,
+} = defineProps<RadioProps>()
+const slots = defineSlots()
+const checked = defineModel()
+const id = useId()
+const isChecked = computed(() => value === checked.value)
+</script>
+
+<template>
+  <div class="vui-radio" :class="{ disabled: !!disabled, checked: isChecked }">
+    <input :id v-model="checked" type="radio" :value :checked="isChecked">
+    <label :for="id">
+      <span class="vui-radio-icon">
+        <Icon :icon="isChecked ? 'ph:radio-button-fill' : 'ph:circle'" />
+      </span>
+      <p v-if="!slots.default" class="vui-radio-content">{{ label || value }}</p>
+      <div v-else class="vui-radio-content">
+        <slot />
+      </div>
+    </label>
+  </div>
+</template>

package/src/components/Radio/RadioGroup.vue

@@ -1,40 +1,40 @@
-<script setup lang='ts'>
-import type { FlexProps } from '../Flex/Flex.vue'
-import type Radio from './Radio.vue'
-import { watchEffect } from 'vue'
-import Flex from '../Flex/Flex.vue'
-
-interface Props extends FlexProps {
-  disabled?: boolean
-}
-
-const {
-  disabled,
-  ...flexProps
-} = defineProps<Props>()
-
-const slots = defineSlots<{
-  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()"
-      :key="vnode.props.value"
-      v-bind="vnode.props"
-      v-model="checked"
-      :class="{ disabled: disabled || vnode.props.disabled }"
-    />
-  </Flex>
-</template>
+<script setup lang='ts'>
+import type { FlexProps } from '../Flex/Flex.vue'
+import type Radio from './Radio.vue'
+import { watchEffect } from 'vue'
+import Flex from '../Flex/Flex.vue'
+
+interface Props extends FlexProps {
+  disabled?: boolean
+}
+
+const {
+  disabled,
+  ...flexProps
+} = defineProps<Props>()
+
+const slots = defineSlots<{
+  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()"
+      :key="vnode.props.value"
+      v-bind="vnode.props"
+      v-model="checked"
+      :class="{ disabled: disabled || vnode.props.disabled }"
+    />
+  </Flex>
+</template>