@dolanske/vui 1.4.0 → 1.4.2

package/src/components/Pagination/pagination.ts

@@ -1,78 +0,0 @@
-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,73 +0,0 @@
-<script setup lang='ts'>
-import type { Placement, PopoutMaybeElement } from '../../shared/types'
-import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
-import { onClickOutside } from '@vueuse/core'
-import { toRef, useTemplateRef, watch } from 'vue'
-import { getPlacementAnimationName } from '../../shared/helpers'
-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
-  /**
-   * Set the visibility of the dropdown
-   */
-  visible: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  offset: 8,
-  placement: 'top',
-})
-
-const emit = defineEmits<{
-  clickOutside: []
-}>()
-const popoutRef = useTemplateRef('popout')
-const anchorRef = toRef(props.anchor)
-
-const { floatingStyles, update } = useFloating(anchorRef, popoutRef, {
-  whileElementsMounted: autoUpdate,
-  strategy: 'fixed',
-  transform: false,
-  placement: props.placement,
-  middleware: [
-    shift({ padding: 8 }),
-    flip(),
-    offset(props.offset),
-  ],
-})
-
-// Make sure to update the popout when the anchor is mounted
-watch(() => props.anchor, (value) => {
-  if (value) {
-    anchorRef.value = value
-    update()
-  }
-})
-
-onClickOutside(popoutRef, () => emit('clickOutside'))
-</script>
-
-<template>
-  <Transition :name="getPlacementAnimationName(props.placement)">
-    <div
-      v-if="props.visible"
-      ref="popout"
-      :style="floatingStyles"
-      class="vui-popout"
-    >
-      <slot />
-    </div>
-  </Transition>
-</template>

package/src/components/Popout/popout.scss

@@ -1,16 +0,0 @@
-.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: var(--z-popout);
-  position: fixed;
-}
-
-:root.light {
-  .vui-popout {
-    background-color: var(--color-bg);
-    box-shadow: var(--box-shadow-strong);
-  }
-}

package/src/components/Progress/Progress.vue

@@ -1,103 +0,0 @@
-<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 +0,0 @@
-.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: var(--z-active);
-    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 +0,0 @@
-<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>

package/src/components/Radio/RadioGroup.vue

@@ -1,34 +0,0 @@
-<script setup lang='ts'>
-import type { FlexProps } from '../Flex/Flex.vue'
-import { enforceSlotType, useFlattenedSlot } from '../../shared/slots'
-import Flex from '../Flex/Flex.vue'
-
-interface Props extends FlexProps {
-  disabled?: boolean
-}
-
-const {
-  disabled,
-  ...flexProps
-} = defineProps<Props>()
-
-const slots = defineSlots()
-
-const checked = defineModel()
-
-const flattened = useFlattenedSlot(slots.default)
-enforceSlotType(flattened, 'Radio')
-</script>
-
-<template>
-  <Flex v-bind="flexProps">
-    <Component
-      :is="vnode"
-      v-for="vnode of flattened"
-      :key="vnode.props.value"
-      v-bind="vnode.props"
-      v-model="checked"
-      :class="{ disabled: disabled || vnode.props.disabled }"
-    />
-  </Flex>
-</template>

package/src/components/Radio/radio.scss

@@ -1,78 +0,0 @@
-.vui-radio {
-  --radio-size: 24px;
-
-  &.checked {
-    .vui-radio-icon svg {
-      color: var(--color-text);
-    }
-
-    &.accent .vui-radio-icon svg {
-      color: var(--color-accent);
-    }
-  }
-
-  &.disabled {
-    .vui-radio-icon {
-      opacity: 0.25;
-      cursor: not-allowed;
-    }
-
-    input + label .vui-radio-content {
-      opacity: 0.4;
-      cursor: not-allowed;
-    }
-  }
-
-  .vui-radio-icon {
-    cursor: pointer;
-    width: var(--radio-size);
-    height: var(--radio-size);
-
-    svg {
-      width: 100%;
-      height: 100%;
-      color: var(--color-text);
-    }
-  }
-
-  input {
-    width: 1px;
-    height: 1px;
-    position: absolute;
-    overflow: hidden;
-    outline: none !important;
-    opacity: 0;
-
-    &:focus-visible + label .vui-radio-icon {
-      outline: 2px solid var(--color-text);
-      border-radius: 999px;
-    }
-
-    & + label {
-      display: grid;
-      grid-template-columns: 20px 1fr;
-      gap: 10px;
-      font-size: var(--font-size-s);
-      color: var(--color-text);
-      user-select: none;
-
-      .vui-radio-content {
-        display: block;
-
-        &:is(p) {
-          display: flex;
-          align-items: center;
-          min-height: var(--radio-size);
-          font-size: var(--font-size-m);
-          // line-height: var(--radio-size);
-        }
-      }
-    }
-  }
-}
-
-:root.light {
-  .vui-radio.checked.accent .vui-radio-icon svg {
-    color: var(--color-accent);
-  }
-}

package/src/components/Select/Select.vue

@@ -1,212 +0,0 @@
-<!-- eslint-disable ts/consistent-type-definitions -->
-<script setup lang='ts' generic="T">
-import { Icon } from '@iconify/vue'
-import { computed, onMounted, ref, useId, useTemplateRef } from 'vue'
-import { searchString } from '../../shared/helpers'
-import Button from '../Button/Button.vue'
-import Dropdown from '../Dropdown/Dropdown.vue'
-import DropdownItem from '../Dropdown/DropdownItem.vue'
-import DropdownTitle from '../Dropdown/DropdownTitle.vue'
-import Input from '../Input/Input.vue'
-import '../Input/input.scss'
-import './select.scss'
-
-export type SelectOption = {
-  value: any
-  label: string
-}
-
-type Props = {
-  single?: boolean
-  readonly?: boolean
-  options: SelectOption[]
-  label?: string
-  placeholder?: string
-  required?: boolean
-  expand?: boolean
-  hint?: string
-  search?: boolean
-  maxActiveOptions?: number
-  showClear?: boolean
-  disabled?: boolean
-  errors?: string[]
-}
-
-const {
-  expand,
-  readonly,
-  required,
-  hint,
-  placeholder,
-  options,
-  single = true,
-  search,
-  maxActiveOptions,
-  showClear,
-  disabled,
-  errors = [] as string[],
-} = defineProps<Props>()
-
-const selected = defineModel<SelectOption[] | undefined>()
-const triggerRef = useTemplateRef('trigger')
-
-//
-function setValue(option: SelectOption) {
-  if (single) {
-    // Single
-    if (selected.value?.some(o => o.value === option.value) && !required) {
-      selected.value = undefined
-    }
-    else {
-      selected.value = [option]
-    }
-  }
-  else {
-    if (selected.value && selected.value?.some(o => o.value === option.value)) {
-      const values = selected.value.filter(o => o.value !== option.value)
-      // Cant remove the last value if it's required
-      if ((required && values.length > 0) || !required) {
-        selected.value = values.length > 0 ? values : undefined
-      }
-    }
-    else {
-      if (!selected.value) {
-        selected.value = [option]
-      }
-      else if (!maxActiveOptions || (selected.value.length < maxActiveOptions)) {
-        selected.value?.push(option)
-      }
-    }
-  }
-}
-
-// Search
-const searchStr = ref()
-const filteredOptions = computed(() => {
-  if (!searchStr.value || searchStr.value.length === 0)
-    return options
-
-  return options.filter((option) => {
-    return searchString(option.label, searchStr.value)
-  })
-})
-
-// Render text inside the button
-const renderPlaceholder = computed(() => {
-  // Render placeholder or a default select option
-  if (!selected.value || selected.value.length === 0)
-    return placeholder ?? 'Select an option'
-
-  // Selected values
-  if (single)
-    return selected.value[0].label
-
-  // If amount of selected exceeds the active capacity
-  if (selected.value.length > 3) {
-    return `${selected.value.length} selected`
-  }
-
-  // Just list ALL selected optionsx
-  return selected.value.map(o => o.label).join(', ')
-})
-
-onMounted(() => {
-  if (readonly && showClear) {
-    console.warn('[Select] readonly and showClear are mutually exclusive props. The clear button will not show up if required is present.')
-  }
-})
-
-const dropdownRef = useTemplateRef('dropdown')
-
-function clearValue() {
-  selected.value = undefined
-  dropdownRef.value?.close()
-}
-
-const id = useId()
-</script>
-
-<template>
-  <div class="vui-input-container vui-select" :class="{ expand, required, readonly, disabled, 'has-errors': errors.length > 0 }">
-    <Dropdown ref="dropdown" :expand @close="triggerRef?.focus({ preventScroll: true })">
-      <template #trigger="{ toggle, isOpen }">
-        <div class="vui-input vui-select-trigger-content">
-          <label v-if="label" :for="id">{{ label }}</label>
-          <p v-if="hint" class="vui-input-hint">
-            {{ hint }}
-          </p>
-
-          <button
-            :id
-            ref="trigger"
-            class="vui-input-style vui-select-trigger-container"
-            :class="{ 'has-value': selected && selected.length > 0 }"
-            :disabled
-            @click="toggle"
-          >
-            <span>
-              {{ renderPlaceholder }}
-            </span>
-            <template v-if="showClear && !required && (selected && selected.length > 0)">
-              <div class="flex-1" />
-              <Button
-                plain
-                icon="ph:x"
-                square
-                size="s"
-                @click.stop="clearValue"
-              />
-            </template>
-            <Icon :icon="isOpen ? 'ph:caret-up' : 'ph:caret-down'" />
-          </button>
-        </div>
-      </template>
-
-      <template #default="{ close, isOpen }">
-        <DropdownTitle v-if="search" sticky>
-          <Input
-            v-model="searchStr"
-            placeholder="Search..."
-            :focus="isOpen"
-            expand
-          >
-            <template #start>
-              <Icon icon="ph:magnifying-glass" />
-            </template>
-          </Input>
-        </DropdownTitle>
-
-        <p v-if="filteredOptions.length === 0" class="vue-select-no-results">
-          No results...
-        </p>
-
-        <DropdownItem
-          v-for="option in filteredOptions"
-          :key="option.value"
-          :class="{ selected: selected?.find(v => v.value === option.value) }"
-          :icon="selected?.find(v => v.value === option.value) ? 'ph:check-bold' : ''"
-          @click="() => {
-            if (readonly) return
-
-            setValue(option)
-            // In single mode, close modal after clicking
-            if (single && !(required && selected && selected[0].value === option.value)) {
-              close()
-            }
-          }"
-        >
-          {{ option.label }}
-        </DropdownItem>
-      </template>
-    </Dropdown>
-
-    <p v-if="maxActiveOptions && !single" class="vui-input-limit">
-      {{ `${selected ? selected.length : 0}/${maxActiveOptions}` }}
-    </p>
-    <ul v-if="errors.length > 0" class="vui-input-errors">
-      <li v-for="err in errors" :key="err">
-        {{ err }}
-      </li>
-    </ul>
-  </div>
-</template>