@dolanske/vui 1.0.3 → 1.1.0

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,52 +1,52 @@
-<script setup lang='ts'>
-import type { Placement, PopoutMaybeElement } from '../../shared/types'
-import { flip, offset, shift, useFloating } from '@floating-ui/vue'
-import { onClickOutside } from '@vueuse/core'
-import { toRef, useTemplateRef } from 'vue'
-import './popout.scss'
-
-export interface Props {
-  /**
-   * Reference to the HTML element the Popout is anchored to
-   */
-  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 emit = defineEmits<{
-  clickOutside: []
-}>()
-const popoutRef = useTemplateRef('popout')
-const anchorRef = toRef(props.anchor)
-
-const { floatingStyles } = useFloating(anchorRef, popoutRef, {
-  placement: props.placement,
-  middleware: [
-    // ...(props.placement
-    //   ? []
-    //   : [autoPlacement()]),
-    shift({ padding: 8 }),
-    flip(),
-    offset(props.offset),
-  ],
-})
-
-onClickOutside(popoutRef, () => emit('clickOutside'))
-</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 { flip, offset, shift, useFloating } from '@floating-ui/vue'
+import { onClickOutside } from '@vueuse/core'
+import { toRef, useTemplateRef } from 'vue'
+import './popout.scss'
+
+export interface Props {
+  /**
+   * Reference to the HTML element the Popout is anchored to
+   */
+  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 emit = defineEmits<{
+  clickOutside: []
+}>()
+const popoutRef = useTemplateRef('popout')
+const anchorRef = toRef(props.anchor)
+
+const { floatingStyles } = useFloating(anchorRef, popoutRef, {
+  placement: props.placement,
+  middleware: [
+    // ...(props.placement
+    //   ? []
+    //   : [autoPlacement()]),
+    shift({ padding: 8 }),
+    flip(),
+    offset(props.offset),
+  ],
+})
+
+onClickOutside(popoutRef, () => emit('clickOutside'))
+</script>
+
+<template>
+  <div ref="popout" :style="floatingStyles" class="vui-popout">
+    <slot />
+  </div>
+</template>

package/src/components/Popout/popout.scss

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

package/src/components/Progress/Progress.vue

@@ -1,103 +1,103 @@
-<script setup lang='ts'>
-import { whenever } from '@vueuse/core'
-import { computed, onMounted, useTemplateRef, watch, watchEffect } from 'vue'
-import { clamp, 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 emit = defineEmits<{
-  done: []
-}>()
-
-const progressAmount = defineModel<number>({
-  default: 0,
-  set(value) {
-    return clamp(0, 100, value)
-  },
-})
-
-// Set height programatically
-const progressRef = useTemplateRef('progress')
-
-watchEffect(() => {
-  if (progressRef.value && !isNil(height)) {
-    progressRef.value.style.setProperty(
-      '--vui-progress-height',
-      formatUnitValue(height),
-    )
-  }
-})
-
-whenever(() => fake, fakeIncrement)
-
-// 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, 12000))
-    }
-    fakeIncrement()
-  }
-}
-
-watch(progressAmount, (v) => {
-  if (v >= 100) {
-    emit('done')
-  }
-})
-
-onMounted(fakeIncrement)
-
-const w = computed(() => `${clamp(0, 100, 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 { whenever } from '@vueuse/core'
+import { computed, onMounted, useTemplateRef, watch, watchEffect } from 'vue'
+import { clamp, 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 emit = defineEmits<{
+  done: []
+}>()
+
+const progressAmount = defineModel<number>({
+  default: 0,
+  set(value) {
+    return clamp(0, 100, value)
+  },
+})
+
+// Set height programatically
+const progressRef = useTemplateRef('progress')
+
+watchEffect(() => {
+  if (progressRef.value && !isNil(height)) {
+    progressRef.value.style.setProperty(
+      '--vui-progress-height',
+      formatUnitValue(height),
+    )
+  }
+})
+
+whenever(() => fake, fakeIncrement)
+
+// 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, 12000))
+    }
+    fakeIncrement()
+  }
+}
+
+watch(progressAmount, (v) => {
+  if (v >= 100) {
+    emit('done')
+  }
+})
+
+onMounted(fakeIncrement)
+
+const w = computed(() => `${clamp(0, 100, 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,47 +1,47 @@
-.vui-progress {
-  --vui-progress-height: 3px;
-
-  display: block;
-  width: 100%;
-  position: relative;
-  border-radius: 999px;
-  background-color: var(--color-bg-raised);
-  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);
-  }
-}
-
-:root.light {
-  .vui-progress-indicator {
-    background-color: var(--);
-  }
-}
+.vui-progress {
+  --vui-progress-height: 3px;
+
+  display: block;
+  width: 100%;
+  position: relative;
+  border-radius: 999px;
+  background-color: var(--color-bg-raised);
+  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);
+  }
+}
+
+:root.light {
+  .vui-progress-indicator {
+    background-color: var(--);
+  }
+}

package/src/components/Radio/Radio.vue

@@ -1,38 +1,38 @@
-<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
-  accent?: boolean
-}
-
-const {
-  label,
-  disabled,
-  value,
-  accent,
-} = 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, accent }">
-    <input :id v-model="checked" type="radio" :value :checked="isChecked" :disabled>
-    <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
+  accent?: boolean
+}
+
+const {
+  label,
+  disabled,
+  value,
+  accent,
+} = 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, accent }">
+    <input :id v-model="checked" type="radio" :value :checked="isChecked" :disabled>
+    <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>