@dolanske/vui 1.4.0 → 1.4.2

package/src/components/Select/select.scss

@@ -1,82 +0,0 @@
-.vui-input-container {
-  &.vui-select {
-    width: auto;
-    min-width: 96px;
-
-    &.expand {
-      .vui-dropdown-trigger-wrap,
-      .vui-dropdown-trigger-content {
-        width: 100%;
-      }
-    }
-
-    &.disabled {
-      .vui-input-style {
-        cursor: not-allowed;
-
-        &:hover {
-          border-color: var(--color-border);
-        }
-      }
-    }
-
-    .vui-select-trigger-container {
-      &.has-value span {
-        color: var(--color-text);
-        font-weight: var(--font-weight-medium);
-      }
-
-      .vui-button {
-        border: none !important;
-      }
-
-      span {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow-x: hidden;
-      }
-    }
-
-    .vue-select-no-results {
-      text-align: center;
-      padding-block: var(--space-xs);
-    }
-
-    .vui-input-style {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: var(--space-s);
-
-      & > button {
-        margin-right: -6px;
-
-        .vui-button-slot svg {
-          color: var(--color-text-light);
-        }
-      }
-
-      &:hover {
-        border-color: var(--color-border-strong);
-      }
-    }
-  }
-}
-
-select {
-  display: block;
-  height: var(--interactive-el-height);
-  line-height: var(--interactive-el-height);
-  background-color: var(--color-bg);
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius-s);
-  padding-inline: var(--space-xs);
-  transition: var(--transition-fast);
-  z-index: var(--z-default);
-  font-size: var(--font-size-m);
-  color: var(--color-text);
-
-  &:hover {
-    border-color: var(--color-border-strong);
-  }
-}

package/src/components/Sheet/Sheet.vue

@@ -1,106 +0,0 @@
-<script setup lang='ts'>
-import { computed } from 'vue'
-import Backdrop from '../../internal/Backdrop/Backdrop.vue'
-import { formatUnitValue } from '../../shared/helpers'
-import Button from '../Button/Button.vue'
-import Divider from '../Divider/Divider.vue'
-import './sheet.scss'
-
-interface Props {
-  /**
-   * Controls the visibility of the sheet
-   */
-  open?: boolean
-  /**
-   * Controls the position of the sheet
-   */
-  position?: 'left' | 'right' | 'top' | 'bottom'
-  /**
-   * Sets the width of the sheet
-   */
-  size?: number | string
-  /**
-   * Wether to show a divider between header and content
-   */
-  separator?: boolean
-}
-
-const {
-  position = 'right',
-  size = 398,
-  separator,
-  open = false,
-} = defineProps<Props>()
-
-const emit = defineEmits<{ close: [] }>()
-
-const TRANSITION_OFFSET = 16
-
-const style = computed(() => {
-  if (position === 'left' || position === 'right') {
-    return { width: formatUnitValue(size) }
-  }
-
-  return undefined
-})
-
-// Used to compute base location so that sheet appears to animate form the edge of the screen
-const baseTransform = computed(() => {
-  switch (position) {
-    case 'left': return `translate(-${TRANSITION_OFFSET}px, 0)`
-    case 'top': return `translate(0, -${TRANSITION_OFFSET}px)`
-    case 'bottom': return `translate(0, ${TRANSITION_OFFSET}px)`
-    case 'right':
-    default: return `translate(${TRANSITION_OFFSET}px, 0)`
-  }
-})
-</script>
-
-<template>
-  <Teleport to="body">
-    <Transition appear name="sheet">
-      <Backdrop v-if="open" @close="emit('close')">
-        <div v-if="open" class="vui-sheet" :class="[`vui-sheet-position-${position}`]" :style>
-          <div class="vui-sheet-header">
-            <slot name="header" :close="() => emit('close')" />
-            <Button plain square icon="ph:x" @click="emit('close')" />
-          </div>
-
-          <Divider v-if="separator && $slots.header" :size="1" />
-
-          <div v-if="$slots.default" class="vui-sheet-content">
-            <slot :close="() => emit('close')" />
-          </div>
-
-          <Divider v-if="separator && $slots.footer" :size="1" />
-
-          <div class="vui-sheet-footer">
-            <slot name="footer" :close="() => emit('close')" />
-          </div>
-        </div>
-      </Backdrop>
-    </Transition>
-  </Teleport>
-</template>
-
-<style scoped lang="scss">
-.vui-backdrop {
-  padding: 0;
-}
-
-.sheet-enter-active,
-.sheet-leave-active {
-  transition: var(--transition);
-}
-
-.sheet-enter-to,
-.sheet-leave-from {
-  transform: translate(0, 0);
-}
-
-.sheet-enter-from,
-.sheet-leave-to {
-  opacity: 0;
-  transform: v-bind(baseTransform);
-}
-</style>

package/src/components/Sheet/sheet.scss

@@ -1,71 +0,0 @@
-.vui-sheet {
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  background-color: var(--color-bg);
-  border-color: var(--color-border);
-  height: 100dvh;
-
-  &.vui-sheet-position-top {
-    top: 0;
-    border-bottom: 1px solid var(--color-border);
-    height: auto;
-    border-bottom-right-radius: var(--border-radius-l);
-    border-bottom-left-radius: var(--border-radius-l);
-  }
-
-  &.vui-sheet-position-bottom {
-    bottom: 0;
-    border-top: 1px solid var(--color-border);
-    height: auto;
-    border-top-right-radius: var(--border-radius-l);
-    border-top-left-radius: var(--border-radius-l);
-  }
-
-  &.vui-sheet-position-right {
-    right: 0;
-    top: 0;
-    border-left: 1px solid var(--color-border);
-    border-top-left-radius: var(--border-radius-l);
-    border-bottom-left-radius: var(--border-radius-l);
-  }
-
-  &.vui-sheet-position-left {
-    left: 0;
-    top: 0;
-    border-right: 1px solid var(--color-border);
-    border-top-right-radius: var(--border-radius-l);
-    border-bottom-right-radius: var(--border-radius-l);
-  }
-
-  &.vui-sheet-position-top,
-  &.vui-sheet-position-bottom {
-    max-height: 35dvh;
-    width: 100%;
-  }
-
-  .vui-sheet-footer,
-  .vui-sheet-header,
-  .vui-sheet-content {
-    width: 100%;
-    padding: var(--space-m);
-  }
-
-  .vui-sheet-content {
-    flex: 1 1 0%;
-    overflow-y: auto;
-    height: 100%;
-  }
-
-  .vui-sheet-header {
-    display: grid;
-    grid-template-columns: 1fr 34px;
-    gap: var(--space-m);
-    align-self: flex-start;
-    align-items: center;
-
-    & + .vui-sheet-content {
-      padding-top: var(--space-s);
-    }
-  }
-}

package/src/components/Sidebar/Sidebar.vue

@@ -1,116 +0,0 @@
-<script setup lang='ts'>
-import { useCssVar, useMouseInElement, useTimeoutFn, watchThrottled } from '@vueuse/core'
-import { computed, onBeforeMount, useSlots, useTemplateRef } from 'vue'
-import { isNil } from '../../shared/helpers'
-import './sidebar.scss'
-
-const props = withDefaults(defineProps<Props>(), {
-  width: 224,
-  mini: false,
-})
-
-interface Props {
-  width?: number
-  /**
-   * Controls wether the sidebar is displayed in full size, or a small version
-   */
-  mini?: boolean
-  /**
-   * Allow sidebar showing up, when user hovers at very left of the screen. The
-   * sidebar will apear over content, not pushing anything over
-   */
-  appear?: boolean
-  /**
-   * Add edges of background around sidebar
-   */
-  floaty?: boolean
-}
-
-const sidebarRef = useTemplateRef('sidebar')
-const open = defineModel<boolean>({
-  default: true,
-})
-const slots = useSlots()
-const offset = useCssVar('--vui-sidebar-float-offset', sidebarRef, {
-  initialValue: '8px',
-})
-
-const width = computed(() => {
-  if (props.mini) {
-    return props.floaty ? '73px' : `65px`
-  }
-  if (!props.floaty)
-    return `${props.width}px`
-  return `calc(${props.width}px + ${offset.value})`
-})
-
-const slotProps = computed(() => ({
-  mini: props.mini,
-  floaty: props.floaty,
-  width: props.width,
-  open,
-  close: () => open.value = false,
-}))
-
-// Sidebar `appear` implementation
-const { start, stop, isPending } = useTimeoutFn(() => {
-  if (props.appear) {
-    open.value = true
-  }
-}, 250)
-
-const APPEAR_OFFSET = 32
-
-const wrapEl = useTemplateRef('wrap')
-const { elementX } = useMouseInElement(wrapEl)
-
-onBeforeMount(() => {
-  if (props.appear && open.value) {
-    open.value = false
-  }
-})
-
-watchThrottled(elementX, (pos) => {
-  if (!props.appear || (pos <= APPEAR_OFFSET && pos >= 0 && isPending.value))
-    return
-
-  if (pos <= APPEAR_OFFSET && pos >= 0 && !open.value && !isPending.value) {
-    start()
-  }
-  else if (isPending.value) {
-    stop()
-  }
-
-  const openWidth = props.mini
-    ? 65
-    : props.floaty
-      ? props.width
-      : props.width - (isNil(offset.value) ? 0 : Number(offset.value?.replace('px', '')))
-
-  if ((pos > APPEAR_OFFSET + openWidth || pos < 0) && open.value) {
-    open.value = false
-  }
-}, {
-  throttle: 100,
-  immediate: true,
-})
-</script>
-
-<template>
-  <div ref="wrap" class="vui-sidebar-outer" :style="{ width }" :class="{ open }">
-    <aside ref="sidebar" class="vui-sidebar" :class="{ open, floaty: props.floaty, mini: props.mini }" :style="{ width: `${props.mini ? 65 : props.width}px` }">
-      <div v-if="slots.header" class="vui-sidebar-header">
-        <slot name="header" v-bind="slotProps" />
-      </div>
-      <div class="vui-sidebar-content">
-        <div class="vui-sidebar-content-wrap">
-          <slot v-bind="slotProps" />
-        </div>
-      </div>
-
-      <div v-if="slots.footer" class="vui-sidebar-footer">
-        <slot name="footer" v-bind="slotProps" />
-      </div>
-    </aside>
-  </div>
-</template>

package/src/components/Sidebar/sidebar.scss

@@ -1,124 +0,0 @@
-// TODO: flesh out better
-.vui-sidebar-layout {
-  display: flex;
-  flex-wrap: nowrap;
-  gap: 0;
-  height: 100vh;
-  position: relative;
-
-  main {
-    flex: 1;
-  }
-
-  .vui-sidebar-outer {
-    transition: var(--transition-slow);
-
-    &:not(.open) {
-      width: 0px !important;
-    }
-  }
-}
-
-.vui-sidebar {
-  --vui-sidebar-float-offset: 8px;
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-  gap: var(--space-sm);
-  width: 224px;
-  position: absolute;
-  top: 0;
-  z-index: var(--z-nav);
-  background-color: var(--color-bg);
-  border-right: 1px solid var(--color-border);
-  transition: var(--transition-slow);
-  transform: translateX(-100%);
-  will-change: transform;
-
-  &.open {
-    transform: translateX(0);
-
-    &.floaty {
-      transform: translateX(0);
-    }
-  }
-
-  &.floaty {
-    top: var(--vui-sidebar-float-offset);
-    left: var(--vui-sidebar-float-offset);
-    bottom: var(--vui-sidebar-float-offset);
-    height: calc(100% - calc(var(--vui-sidebar-float-offset) * 2));
-    border-radius: var(--border-radius-m);
-    border: 1px solid var(--color-border);
-    transform: translateX(calc(-100% - calc(var(--vui-sidebar-float-offset) * 2)));
-    box-shadow: var(--box-shadow);
-  }
-
-  .vui-sidebar-header,
-  .vui-sidebar-footer,
-  .vui-sidebar-content .vui-sidebar-content-wrap {
-    padding: var(--space-s);
-  }
-
-  .vui-sidebar-header:not(:only-child) {
-    padding-bottom: 0;
-  }
-
-  .vui-sidebar-footer:not(:only-child) {
-    padding-top: 0;
-  }
-
-  .vui-sidebar-content {
-    flex: 1;
-    position: relative;
-
-    .vui-sidebar-content-wrap {
-      position: absolute;
-      inset: 0;
-      overflow-y: auto;
-      overflow-x: hidden;
-    }
-  }
-
-  // Note: elements in sidebar (& mini) should have a slight modification
-
-  // Accordion
-  // Does not have a border under content
-  .vui-accordion {
-    border-bottom: 0;
-  }
-
-  // DropdownItems (sidebar items
-  // Should have a bit less spacing between slots
-  .vui-dropdown-item {
-    padding-inline: var(--space-xs);
-  }
-
-  &.mini {
-    .vui-dropdown-item .vui-dropdown-item-icon {
-      width: 20px;
-      height: 20px;
-    }
-
-    .vui-dropdown-item,
-    .vui-button {
-      --button-height: 40px;
-      width: var(--button-height) !important;
-      height: var(--button-height) !important;
-      justify-content: center;
-      align-items: center;
-
-      svg {
-        width: 20px;
-        height: 20px;
-      }
-
-      .vui-dropdown-item-slot,
-      .vui-dropdown-item-hint,
-      .vui-button-slot-end,
-      .vui-button-slot-start {
-        display: none;
-      }
-    }
-  }
-}

package/src/components/Skeleton/Skeleton.vue

@@ -1,43 +0,0 @@
-<!-- eslint-disable ts/no-use-before-define -->
-<script setup lang='ts'>
-import { computed } from 'vue'
-import { formatUnitValue } from '../../shared/helpers'
-import './skeleton.scss'
-
-interface Props {
-  radius?: string | number
-  width?: string | number
-  height?: string | number
-  circle?: boolean
-}
-
-const {
-  // @ts-expect-error I can't get ESLint to STOP moving DEFAULT_RADIUS below
-  // this props declaration wtf
-  radius = DEFAULT_RADIUS,
-  width = '100%',
-  height = '32px',
-  circle,
-} = defineProps<Props>()
-
-const DEFAULT_RADIUS = 'var(--border-radius-s)'
-
-// Give priority to radius, if it is NOT set to default
-const bR = computed(() => formatUnitValue(circle && radius === DEFAULT_RADIUS ? 9999 : radius))
-
-// When using `circle` prop, we want to use the same
-// value for both height and width, but we can't
-// know which one will be defined
-const w = computed(() => formatUnitValue(circle ? (width || height) : width))
-const h = computed(() => formatUnitValue(circle ? (width || height) : height))
-</script>
-
-<template>
-  <div
-    class="vui-skeleton" :style="{
-      borderRadius: bR,
-      width: w,
-      height: h,
-    }"
-  />
-</template>

package/src/components/Skeleton/skeleton.scss

@@ -1,14 +0,0 @@
-.vui-skeleton {
-  animation: pulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  background-color: var(--color-border);
-
-  @keyframes pulse {
-    0%,
-    100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.5;
-    }
-  }
-}

package/src/components/Spinner/Spinner.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import type { Sizes } from '../../shared/types'
-import { computed } from 'vue'
-import { Size } from '../../shared/types'
-import './spinner.scss'
-
-interface Props {
-  size?: Sizes
-}
-
-const {
-  size = 's',
-} = defineProps<Props>()
-
-const w = computed(() => {
-  switch (size) {
-    case Size.s: return '16px'
-    case Size.l: return '38px'
-    case Size.m:
-    default: return '26px'
-  }
-})
-
-const bW = computed(() => {
-  switch (size) {
-    case Size.s: return '3px'
-    case Size.l: return '5px'
-    case Size.m:
-    default: return '4px'
-  }
-})
-</script>
-
-<template>
-  <div
-    :class="{ size }" class="vui-spinner" :style="{
-      width: w,
-      height: w,
-      borderWidth: bW,
-    }"
-  />
-</template>

package/src/components/Spinner/spinner.scss

@@ -1,47 +0,0 @@
-.vui-spinner {
-  --spinner-color: var(--color-accent);
-
-  aspect-ratio: 1;
-  border-radius: 50%;
-  border: 3px solid var(--spinner-color);
-  animation:
-    l20-1 0.8s infinite linear alternate,
-    l20-2 1.6s infinite linear;
-}
-@keyframes l20-1 {
-  0% {
-    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
-  }
-  12.5% {
-    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
-  }
-  25% {
-    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
-  }
-  50% {
-    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
-  }
-  62.5% {
-    clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
-  }
-  75% {
-    clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
-  }
-  100% {
-    clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
-  }
-}
-@keyframes l20-2 {
-  0% {
-    transform: scaleY(1) rotate(0deg);
-  }
-  49.99% {
-    transform: scaleY(1) rotate(135deg);
-  }
-  50% {
-    transform: scaleY(-1) rotate(0deg);
-  }
-  100% {
-    transform: scaleY(-1) rotate(-135deg);
-  }
-}

package/src/components/Switch/Switch.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { useId } from 'vue'
-import './switch.scss'
-
-interface Props {
-  label?: string
-  disabled?: boolean
-  accent?: boolean
-}
-
-const { label, disabled, accent } = defineProps<Props>()
-const slots = defineSlots()
-const checked = defineModel<boolean>()
-const id = useId()
-</script>
-
-<template>
-  <div class="vui-switch" :class="{ disabled, checked, accent }">
-    <input :id v-model="checked" type="checkbox" :disabled>
-    <label :for="id">
-      <div class="vui-switch-icon">
-        <span class="vui-switch-indicator" />
-      </div>
-
-      <p v-if="!slots.default" class="vui-switch-content">{{ label }}</p>
-      <div v-else class="vui-switch-content">
-        <slot />
-      </div>
-    </label>
-  </div>
-</template>