@dolanske/vui 1.4.0 → 1.4.2

package/src/components/Drawer/Drawer.vue

@@ -1,102 +0,0 @@
-<script setup lang="ts">
-import type { DrawerPortalProps, DrawerRootProps } from 'vaul-vue'
-import type { Sizes, VueClass } from '../../shared/types'
-import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTitle } from 'vaul-vue'
-import { computed, onMounted, useId } from 'vue'
-import './drawer.scss'
-
-interface Props {
-  /**
-   * Controls the visibility of the drawer
-   */
-  open?: boolean
-  /**
-   * Title for accessibility.
-   */
-  title?: string
-  /**
-   * CSS class applied to the container of the drawer content. Accepts Vue's
-   * class conditional declaration, string, object or an array.
-   */
-  containerClass?: VueClass
-  /**
-   * Size of the container. Either use a preset size or number to specify
-   * max-width of the container.
-   */
-  containerSize?: Sizes | 'xl' | 'full' | number
-  /**
-   * Wether to display the handle symbol. It doesn't actually do anything, it's
-   * just for the visuals.
-   */
-  handle?: boolean
-  /**
-   * Control the underlying Vaul root component
-   */
-  rootProps?: DrawerRootProps
-  portalProps?: DrawerPortalProps
-}
-
-const {
-  title,
-  containerClass,
-  containerSize = 'm',
-  rootProps,
-  portalProps,
-  handle = true,
-  open = false,
-} = defineProps<Props>()
-
-const emit = defineEmits<{ close: [] }>()
-
-const mW = computed(() => {
-  if (typeof containerSize === 'string') {
-    if (containerSize === 'full') {
-      return '100%'
-    }
-    else {
-      return getComputedStyle(document.documentElement)
-        .getPropertyValue(`--container-${containerSize}`)
-    }
-  }
-  else {
-    return `${containerSize}px`
-  }
-})
-
-const id = useId()
-
-onMounted(() => {
-  if (!document.querySelector('[vaul-drawer-wrapper]')) {
-    console.error('Your root component is missing \'vaul-drawer-wrapper\' attribute. \n Without it the <Drawer /> component will not be functional.')
-  }
-})
-</script>
-
-<template>
-  <DrawerRoot
-    :open
-    v-bind="rootProps"
-    :aria-describedby="id"
-    @close=" emit('close')"
-    @update:open="(state) => state === false && emit('close')"
-  >
-    <DrawerPortal v-bind="portalProps">
-      <DrawerOverlay class="vui-drawer-overlay" />
-      <DrawerContent class="vui-drawer-content" :class="{ 'hide-handle': handle === false }">
-        <div :key="mW" class="vui-drawer-container container" :class="containerClass" :style="{ 'max-width': mW }">
-          <DrawerTitle class="visually-hidden" :name="id">
-            {{ title }}
-          </DrawerTitle>
-          <slot />
-        </div>
-      </DrawerContent>
-    </DrawerPortal>
-  </DrawerRoot>
-</template>
-
-<style lang="scss" scoped>
-:global(body) {
-  transition: var(--transition-fast);
-  background-color: var(--color-bg);
-}
-</style>

package/src/components/Drawer/drawer.scss

@@ -1,37 +0,0 @@
-.vui-drawer-content {
-  background-color: var(--color-bg-raised);
-  padding-inline: var(--space-l);
-  border-top: 1px solid var(--color-border);
-  border-top-left-radius: var(--border-radius-l);
-  border-top-right-radius: var(--border-radius-l);
-  padding-top: 30px;
-  padding-bottom: 64px;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  box-shadow: var(--box-shadow);
-
-  &.hide-handle:before {
-    display: none;
-  }
-
-  &.vaul-dragging {
-    &:before {
-      background-color: var(--color-text-lighter);
-    }
-  }
-
-  &:before {
-    content: '';
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 56px;
-    height: 6px;
-    top: 12px;
-    border-radius: 3px;
-    background-color: var(--color-border-strong);
-    transition: var(--transition-fast);
-  }
-}

package/src/components/Dropdown/Dropdown.vue

@@ -1,120 +0,0 @@
-<script setup lang='ts'>
-import type { MaybeElement } from '@vueuse/core'
-import type { Placement } from '../../shared/types'
-import { onClickOutside, useMagicKeys, whenever } from '@vueuse/core'
-import { computed, onMounted, ref, useTemplateRef, watch } from 'vue'
-import { formatUnitValue } from '../../shared/helpers'
-import Popout from '../Popout/Popout.vue'
-import './dropdown.scss'
-
-export interface Props {
-  /**
-   * Tooltip placement related to the anchor
-   */
-  placement?: Placement
-  /**
-   * Set the minimum width of the dropdown element
-   */
-  minWidth?: number | string
-  /**
-   * Sets the width of the dropdown to the width of its anchor
-   */
-  expand?: boolean
-
-  /**
-   * Set he max height of the dropdown element before it starts scrolling
-   */
-  maxHeight?: number | string
-}
-
-const {
-  placement = 'bottom-start',
-  maxHeight = 356,
-  expand,
-  minWidth = 156,
-} = defineProps<Props>()
-
-const emit = defineEmits<{
-  close: []
-}>()
-
-const anchorRef = useTemplateRef<HTMLDivElement>('anchor')
-const dropdownRef = useTemplateRef<MaybeElement>('dropdown')
-
-const showMenu = ref(false)
-
-function open() {
-  showMenu.value = true
-}
-
-function close() {
-  showMenu.value = false
-}
-
-function toggle() {
-  showMenu.value = !showMenu.value
-}
-
-onClickOutside(dropdownRef, (event) => {
-  // Hide dropdown when it is clicked outside EXCEPT when we click the trigger,
-  // as that is either by the slot itself
-  if (!anchorRef.value?.contains(event.target as Node | null))
-    showMenu.value = false
-})
-
-const anchorWidth = computed(() => {
-  if (!expand || !window)
-    return 0
-  return anchorRef.value?.getBoundingClientRect().width
-})
-
-defineExpose({
-  open,
-  close,
-  toggle,
-  isOpen: showMenu,
-})
-
-const mW = computed(() => formatUnitValue(minWidth))
-const w = computed(() => expand ? `${anchorWidth.value}px` : 'initial')
-
-const { escape } = useMagicKeys()
-whenever(escape, close)
-
-watch(showMenu, (v) => {
-  if (!v)
-    emit('close')
-})
-
-onMounted(() => {
-  if (expand && minWidth !== 156)
-    console.warn('[Dropdown] Dropdown: minWidth prop is ignored when expand is set to true')
-})
-</script>
-
-<template>
-  <div
-    ref="anchor"
-    class="vui-dropdown-trigger-wrap"
-    role="button"
-    :aria-expanded="showMenu"
-    :aria-haspopup="true"
-    name="Dropdown menu"
-  >
-    <slot name="trigger" :open :is-open="showMenu" :close :toggle />
-  </div>
-
-  <Popout
-    ref="dropdown"
-    :visible="showMenu"
-    :anchor="anchorRef"
-    class="vui-dropdown"
-    :placement
-    :style="{
-      minWidth: expand ? w : mW,
-      maxHeight: formatUnitValue(maxHeight),
-    }"
-  >
-    <slot :open :close :toggle :is-open="showMenu" />
-  </Popout>
-</template>

package/src/components/Dropdown/DropdownItem.vue

@@ -1,33 +0,0 @@
-<script setup lang='ts'>
-import { Icon } from '@iconify/vue'
-import './dropdown-item.scss'
-
-interface Props {
-  disabled?: boolean
-  icon?: string
-  iconEnd?: string
-}
-
-const props = defineProps<Props>()
-</script>
-
-<template>
-  <button class="vui-dropdown-item" :class="{ disabled }" :disabled>
-    <!-- This should always be here to offset items which dont have icons -->
-    <div v-if="props.icon" class="vui-dropdown-item-icon">
-      <Icon :icon="props.icon" />
-    </div>
-
-    <div class="vui-dropdown-item-slot">
-      <slot />
-    </div>
-
-    <div v-if="$slots.hint" class="vui-dropdown-item-hint">
-      <slot name="hint" />
-    </div>
-
-    <div v-if="props.iconEnd" class="vui-dropdown-item-icon">
-      <Icon :icon="props.iconEnd" />
-    </div>
-  </button>
-</template>

package/src/components/Dropdown/DropdownTitle.vue

@@ -1,14 +0,0 @@
-<script lang="ts" setup>
-const { sticky } = defineProps<{
-  sticky?: boolean
-}>()
-</script>
-
-<template>
-  <div class="vui-dropdown-title" :class="{ sticky }">
-    <slot />
-    <div v-if="$slots.end" class="vui-dropdown-title-end">
-      <slot name="end" />
-    </div>
-  </div>
-</template>

package/src/components/Dropdown/dropdown-item.scss

@@ -1,84 +0,0 @@
-.vui-dropdown-item {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  width: fit-content;
-  gap: var(--space-xs);
-  width: 100%;
-  height: var(--interactive-el-height);
-  border-radius: var(--border-radius-m);
-  font-size: var(--font-size-m);
-  cursor: default;
-  transition: var(--transition-fast);
-  padding-inline: var(--space-s);
-  white-space: nowrap;
-  margin-bottom: 4px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  &.disabled {
-    pointer-events: none;
-
-    &:hover {
-      background-color: transparent;
-    }
-
-    .vui-dropdown-item-slot,
-    .vui-dropdown-item-icon svg path {
-      color: var(--color-text-lighter);
-    }
-
-    .vui-dropdown-item-hint {
-      visibility: hidden;
-      opacity: 0;
-      z-index: var(--z-behind);
-    }
-  }
-
-  .vui-dropdown-item-icon {
-    width: 16px;
-    height: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    svg {
-      width: 16px;
-      height: 16px;
-
-      path {
-        color: var(--color-text-light);
-      }
-    }
-  }
-
-  .vui-dropdown-item-hint {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-    margin-left: 8px;
-    font-size: 0.9rem;
-    // white-space: nowrap;
-    color: var(--color-text-lighter);
-
-    svg {
-      color: var(--color-text-lighter);
-    }
-  }
-
-  .vui-dropdown-item-slot {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    color: var(--color-text);
-    flex-wrap: nowrap;
-  }
-
-  &.selected,
-  &:hover {
-    background-color: var(--color-button-gray-hover);
-  }
-}

package/src/components/Dropdown/dropdown.scss

@@ -1,53 +0,0 @@
-.vui-dropdown-trigger-wrap {
-  // width: fit-content;
-  position: relative;
-}
-
-.vui-dropdown {
-  min-width: 156px;
-  border-radius: var(--border-radius-m);
-  border: 1px solid var(--color-border);
-  padding: 4px;
-  overflow-y: auto;
-}
-
-.vui-dropdown-title {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding-block: var(--space-xs);
-  padding-inline: calc(var(--space-xs) + 8px);
-  font-size: var(--font-size-m);
-  border-bottom: 1px solid var(--color-border);
-  font-weight: var(--font-weight-semibold);
-  margin-inline: -4px;
-  margin-top: -4px;
-  margin-bottom: 4px;
-  gap: var(--space-m);
-  justify-content: space-between;
-  background-color: var(--color-bg-medium);
-  z-index: var(--z-popout);
-
-  &.sticky {
-    position: sticky;
-    top: -4px;
-  }
-
-  &:not(:first-child) {
-    margin-top: 4px;
-    border-top: 1px solid var(--color-border);
-  }
-
-  .vui-dropdown-title-end {
-    font-size: var(--font-size-s);
-    font-weight: var(--font-weight);
-    color: var(--color-text-lighter);
-  }
-}
-
-:root.light {
-  .vui-dropdown-title {
-    background-color: var(--color-bg);
-  }
-}

package/src/components/Flex/Flex.vue

@@ -1,113 +0,0 @@
-<script setup lang="ts">
-import type { Space } from '../../shared/types'
-import { computed } from 'vue'
-import { formatUnitValue } from '../../shared/helpers'
-
-export interface FlexProps {
-  inline?: boolean
-  wrap?: boolean
-  wrapReverse?: boolean
-
-  row?: boolean
-  column?: boolean
-  rowReverse?: boolean
-  columnReverse?: boolean
-
-  gap?: Space | number
-
-  // NOTE: Add more if needed
-  xStart?: boolean
-  xEnd?: boolean
-  xCenter?: boolean
-  xBetween?: boolean
-  xAround?: boolean
-  xEvenly?: boolean
-
-  // NOTE: Add more if needed
-  yCenter?: boolean
-  yStart?: boolean
-  yEnd?: boolean
-  yBaseline?: boolean
-
-  expand?: boolean
-}
-
-const props = withDefaults(defineProps<FlexProps>(), {
-  // eslint-disable-next-line vue/require-valid-default-prop
-  gap: 's',
-})
-
-// Flex gap
-const ag = computed(() => typeof props.gap === 'number'
-  ? formatUnitValue(props.gap)
-  : `var(--space-${props.gap})`,
-)
-
-// Flex direction
-const ad = computed(() => {
-  if (props.row)
-    return 'row'
-  else if (props.column)
-    return 'column'
-  else if (props.rowReverse)
-    return 'row-reverse'
-  else if (props.columnReverse)
-    return 'column-reverse'
-  else return 'row'
-})
-
-// Justify content
-const aj = computed(() => {
-  if (props.xStart)
-    return 'flex-start'
-  else if (props.xEnd)
-    return 'flex-end'
-  else if (props.xCenter)
-    return 'center'
-  else if (props.xBetween)
-    return 'space-between'
-  else if (props.xEvenly)
-    return 'space-evenly'
-  else if (props.xAround)
-    return 'space-around'
-  else return 'flex-start'
-})
-
-// Align items
-const aA = computed(() => {
-  if (props.yStart)
-    return 'flex-start'
-  else if (props.yEnd)
-    return 'flex-end'
-  else if (props.yCenter)
-    return 'center'
-  else if (props.yBaseline)
-    return 'baseline'
-  return 'flex-start'
-})
-
-const aY = computed(() => props.inline ? 'inline-flex' : 'flex')
-const aW = computed(() => props.wrap
-  ? 'wrap'
-  : props.wrapReverse
-    ? 'wrap-reverse'
-    : 'nowrap')
-
-const aH = computed(() => props.expand ? '100%' : 'auto')
-</script>
-
-<template>
-  <div
-    class="vui-flex" :style="{
-      display: aY,
-      flexWrap: aW,
-      flexDirection: ad,
-      justifyContent: aj,
-      gap: ag,
-      alignItems: aA,
-      width: aH,
-    }"
-  >
-    <slot />
-  </div>
-</template>

package/src/components/Grid/Grid.vue

@@ -1,87 +0,0 @@
-<script setup lang="ts">
-import type { Space } from '../../shared/types'
-import { computed } from 'vue'
-import { createArray, formatUnitValue } from '../../shared/helpers'
-
-/**
- * This component is not meant for complex grids
- */
-
-interface Props {
-  inline?: boolean
-  gap?: Space | number
-  rows?: number | string
-  columns?: number | string
-  // areas?: string[]
-
-  // NOTE: Add more if needed
-  yCenter?: boolean
-  yStart?: boolean
-  yEnd?: boolean
-  yBaseline?: boolean
-  yStretch?: boolean
-
-  expand?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  // eslint-disable-next-line vue/require-valid-default-prop
-  gap: 's',
-})
-
-const ag = computed(() => typeof props.gap === 'number'
-  ? formatUnitValue(props.gap)
-  : `var(--space-${props.gap})`,
-)
-
-const aTC = computed(() => {
-  if (typeof props.columns === 'number') {
-    return createArray(props.columns)
-      .map(() => '1fr')
-      .join(' ')
-  }
-  return props.columns ?? 'none'
-})
-
-const aTR = computed(() => {
-  if (typeof props.rows === 'number') {
-    return createArray(props.rows || 1)
-      .map(() => '')
-      .join('1fr')
-  }
-  return props.rows ?? 'none'
-})
-
-const aA = computed(() => {
-  if (props.yStart)
-    return 'flex-start'
-  else if (props.yEnd)
-    return 'flex-end'
-  else if (props.yCenter)
-    return 'center'
-  else if (props.yBaseline)
-    return 'baseline'
-  else if (props.yStretch)
-    return 'stretch'
-  return 'flex-start'
-})
-
-const aD = computed(() => props.inline ? 'inline-grid' : 'grid')
-
-const aH = computed(() => props.expand ? '100%' : 'auto')
-</script>
-
-<template>
-  <div
-    class="vui-grid" :style="{
-      display: aD,
-      gap: ag,
-      gridTemplateColumns: aTC,
-      gridTemplateRows: aTR,
-      alignItems: aA,
-      width: aH,
-    }"
-  >
-    <slot />
-  </div>
-</template>

package/src/components/Input/Color.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import type { InputProps } from './Input.vue'
-import { Icon } from '@iconify/vue'
-import { useAttrs, useId } from 'vue'
-import Input from './Input.vue'
-
-const props = defineProps<InputProps>()
-
-const attrs = useAttrs()
-const color = defineModel<string>()
-const id = useId()
-</script>
-
-<template>
-  <Input v-bind="{ ...attrs, ...props }" type="color" class="vui-input-color">
-    <template #__internal_replace_input>
-      <input :id v-model="color" type="color" tabindex="0">
-      <label :for="id">
-        <div class="vui-input-color-indicator" :style="{ backgroundColor: color }">
-          <Icon v-if="!color" icon="ph:palette" />
-        </div>
-        <input v-model="color" type="text" :placeholder="props.placeholder">
-      </label>
-    </template>
-  </Input>
-</template>