@dolanske/vui 0.1.0 → 0.1.1

package/src/components/Modal/Modal.vue

@@ -0,0 +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>

package/src/components/Modal/modal.scss

@@ -0,0 +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);
+  }
+}

package/src/components/Pagination/Pagination.vue

@@ -0,0 +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>

package/src/components/Pagination/pagination.ts

@@ -0,0 +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,
+  }
+}

package/src/components/Popout/Popout.vue

@@ -0,0 +1,39 @@
+<script setup lang='ts'>
+import type { MaybeElement, Placement } from '@floating-ui/vue'
+import { autoPlacement, offset, useFloating } from '@floating-ui/vue'
+import { toRef, useTemplateRef } from 'vue'
+import './popout.scss'
+
+interface Props {
+  anchor: MaybeElement<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('popoutRef')
+const anchorRef = toRef(props.anchor)
+
+const { floatingStyles } = useFloating(anchorRef, popoutRef, {
+  placement: props.placement,
+  middleware: [
+    ...(props.placement ? [] : [autoPlacement()]),
+    offset(props.offset),
+  ],
+})
+</script>
+
+<template>
+  <div ref="popoutRef" :style="floatingStyles" class="vui-popout">
+    <slot />
+  </div>
+</template>

package/src/components/Popout/popout.scss

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

package/src/components/Progress/Progress.vue

@@ -0,0 +1,84 @@
+<script setup lang='ts'>
+import { onMounted, useTemplateRef, watchEffect } from 'vue'
+import { delay, 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('progressRef')
+
+watchEffect(() => {
+  if (progressRef.value && !isNil(height)) {
+    progressRef.value.style.setProperty('--vui-progress-height', `${height}px`)
+  }
+})
+
+// Automatically / randomly increment but never reach 100% until
+async function fakeIncrement() {
+  if (fake && progressAmount.value < 100) {
+    if (progressAmount.value > 95) {
+      // Only in crement by the fraction of the remaining amount
+      progressAmount.value += (100 - progressAmount.value) * 0.075
+      await delay(randomMinMax(500, 3000))
+    }
+    else {
+      progressAmount.value += randomMinMax(1, 10)
+      await delay(randomMinMax(200, 1000))
+    }
+    fakeIncrement()
+  }
+}
+
+onMounted(fakeIncrement)
+</script>
+
+<template>
+  <div
+    ref="progressRef"
+    class="vui-progress"
+    :class="{
+      fixed,
+      'fixed-active': progressAmount > 0 && progressAmount < 100,
+    }"
+  >
+    <div
+      class="vui-progress-indicator" :style="{
+        width: `${progressAmount}%`,
+        backgroundColor: color,
+      }"
+    />
+  </div>
+</template>

package/src/components/Progress/progress.scss

@@ -0,0 +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 {
+      // Some arbitrary value which should never happen to people with
+      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

@@ -0,0 +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: string
+}
+
+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

@@ -0,0 +1,35 @@
+<script setup lang='ts'>
+import type { VNode } from 'vue'
+import type { FlexProps } from '../Flex/Flex.vue'
+import type { RadioProps } from './Radio.vue'
+import Flex from '../Flex/Flex.vue'
+
+interface Props extends FlexProps {
+  disabled?: boolean
+}
+
+const {
+  disabled,
+  ...flexProps
+} = defineProps<Props>()
+
+const slots = defineSlots<{
+  default: () => { children: Array<VNode & { props: RadioProps }> }[]
+}>()
+
+const checked = defineModel()
+</script>
+
+<template>
+  <Flex v-bind="flexProps">
+    <Component
+      :is="vnode"
+      v-for="vnode of slots.default()[0].children"
+      :key="vnode.props.value"
+      v-bind="vnode.props"
+      v-model="checked"
+      :class="{ disabled: disabled || vnode.props.disabled }"
+    />
+  </Flex>
+  <!-- <div class="vui-radio-group" /> -->
+</template>

package/src/components/Radio/radio.scss

@@ -0,0 +1,59 @@
+.vui-radio {
+  --radio-size: 24px;
+
+  &.checked {
+    .vui-radio-icon svg {
+      color: var(--color-text);
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+
+    .vui-radio-icon svg path {
+      color: var(--color-text-lighter) !important;
+    }
+
+    input + label p {
+      color: var(--color-text-lighter);
+    }
+  }
+
+  .vui-radio-icon {
+    cursor: pointer;
+    width: var(--radio-size);
+    height: var(--radio-size);
+
+    svg {
+      width: 100%;
+      height: 100%;
+      color: var(--color-text);
+    }
+  }
+
+  input {
+    display: none;
+
+    & + 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-ms);
+          // line-height: var(--radio-size);
+        }
+      }
+    }
+  }
+}