@dolanske/vui 0.1.0 → 0.1.1

package/src/components/Divider/Divider.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import './divider.scss'
+
+interface Props {
+  thickness?: number
+  size?: number
+  vertical?: boolean
+  width?: number
+  height?: number
+  margin?: string
+}
+
+const {
+  thickness = 1,
+  size = 32,
+  vertical,
+  margin = '0',
+} = defineProps<Props>()
+</script>
+
+<template>
+  <div
+    class="vui-divider" :class="{ vertical }" :style="{
+      ...(vertical && { width: `${size}px` }),
+      height: `${size}px`,
+      borderWidth: `${thickness}px`,
+      margin,
+    }"
+  >
+    <div v-if="$slots.default" class="vui-divider-slot">
+      <slot />
+    </div>
+  </div>
+</template>

package/src/components/Divider/divider.scss

@@ -0,0 +1,35 @@
+.vui-divider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  height: 32px;
+  width: 100%;
+
+  &.vertical:before {
+    border-bottom: none;
+    border-right: 1px solid var(--color-border);
+    transform: translateX(-50%);
+    width: 1px;
+    height: 100%;
+  }
+
+  &:before {
+    content: '';
+    display: block;
+    transform: translateY(-50%);
+    width: 100%;
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .vui-divider-slot {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    & > *:first-child {
+      outline: 3px solid var(--color-bg);
+    }
+  }
+}

package/src/components/Drawer/Drawer.vue

@@ -0,0 +1,93 @@
+<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, useId } from 'vue'
+import './drawer.scss'
+
+interface Props {
+  /**
+   * 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,
+} = defineProps<Props>()
+const open = defineModel<boolean>()
+
+const containerMaxWidth = computed(() => {
+  if (typeof containerSize === 'string') {
+    if (containerClass === 'full') {
+      return '100%'
+    }
+    else {
+      return `var(--container-${containerSize})`
+    }
+  }
+  else {
+    return `${containerSize}px`
+  }
+})
+
+const id = useId()
+</script>
+
+<template>
+  <DrawerRoot
+    :open
+    should-scale-background
+    v-bind="rootProps"
+    @close="open = false"
+    @update:open="(state) => open = state"
+  >
+    <DrawerPortal v-bind="portalProps">
+      <DrawerOverlay class="vui-drawer-overlay" />
+      <DrawerContent class="vui-drawer-content" :class="{ 'hide-handlk': handle === false }" :aria-describedby="id">
+        <div
+          class="vui-drawer-container container" :class="containerClass" :style="{
+            maxWidth: containerMaxWidth,
+          }"
+        >
+          <DrawerTitle class="visually-hidden" :name="id">
+            {{ title }}
+          </DrawerTitle>
+          <slot />
+        </div>
+      </DrawerContent>
+    </DrawerPortal>
+  </DrawerRoot>
+</template>
+
+<style lang="scss" scoped>
+:global(body) {
+  transition: var(--transition-quick);
+  background-color: var(--color-bg);
+}
+</style>

package/src/components/Drawer/drawer.scss

@@ -0,0 +1,49 @@
+.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;
+
+  &.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-quick);
+  }
+
+  // .vui-drawer-container {
+  //   width: 100%;
+  //   max-width: 756px;
+  //   margin-inline: auto;
+  // }
+}
+
+.vui-drawer-overlay {
+  // opacity: 0.4;
+  // position: fixed;
+  // inset: 0;
+  // background-color: var(--color-bg-lowered);
+}

package/src/components/Dropdown/Dropdown.vue

@@ -0,0 +1,100 @@
+<script setup lang='ts'>
+import type { Placement } from '@floating-ui/vue'
+import type { MaybeElement } from '@vueuse/core'
+import { onClickOutside } from '@vueuse/core'
+import { computed, ref, useTemplateRef } from 'vue'
+import Popout from '../Popout/Popout.vue'
+import './dropdown.scss'
+
+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
+}
+
+const {
+  placement = 'bottom-start',
+  expand,
+  minWidth,
+} = defineProps<Props>()
+
+const anchorRef = useTemplateRef<HTMLDivElement>('anchorRef')
+const dropdownRef = useTemplateRef<MaybeElement>('dropdownRef')
+
+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)
+    return 0
+  return anchorRef.value?.getBoundingClientRect().width
+})
+
+defineExpose({
+  open,
+  close,
+  toggle,
+  isOpen: showMenu,
+})
+</script>
+
+<template>
+  <div ref="anchorRef" class="vui-dropdown-trigger-wrap">
+    <slot name="trigger" :open :is-open="showMenu" :close :toggle />
+  </div>
+
+  <Transition appear name="dropdown">
+    <Popout
+      v-if="showMenu"
+      ref="dropdownRef"
+      :anchor="anchorRef"
+      class="vui-dropdown"
+      :placement
+      :style="{
+        minWidth: `${minWidth ?? 156}px`,
+        ...(expand && { width: `${anchorWidth}px` }),
+      }"
+    >
+      <slot :open :close :toggle :is-open="showMenu" />
+    </Popout>
+  </Transition>
+</template>
+
+<style scoped>
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: 0.1s opacity ease-in-out;
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+}
+</style>

package/src/components/Dropdown/DropdownItem.vue

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

package/src/components/Dropdown/DropdownTitle.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="vui-dropdown-title">
+    <slot />
+    <div v-if="$slots.end" class="vui-dropdown-title-end">
+      <slot name="end" />
+    </div>
+  </div>
+</template>

package/src/components/Dropdown/dropdown.scss

@@ -0,0 +1,112 @@
+.vui-dropdown-trigger-wrap {
+  display: inline-block;
+}
+
+.vui-dropdown {
+  min-width: 156px;
+  border-radius: var(--border-radius-m);
+  border: 1px solid var(--color-border);
+  padding: 4px;
+}
+
+.vui-dropdown-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: fit-content;
+  gap: var(--space-xs);
+  width: 100%;
+  height: 32px;
+  border-radius: var(--border-radius-m);
+  font-size: var(--font-size-s);
+  cursor: default;
+  transition: var(--transition);
+  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: -1;
+    }
+  }
+
+  .vui-dropdown-item-icon {
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  .vui-dropdown-item-hint {
+    margin-left: 8px;
+    font-size: 0.9rem;
+    // white-space: nowrap;
+    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);
+  }
+}
+
+.vui-dropdown-title {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-block: var(--space-s);
+  padding-inline: calc(var(--space-s) + 4px);
+  font-size: var(--font-size-ms);
+  border-bottom: 1px solid var(--color-border);
+  font-weight: 500;
+  // margin-block: 4px;
+  margin-inline: -4px;
+  margin-top: -4px;
+  margin-bottom: 4px;
+  gap: var(--space-m);
+  justify-content: space-between;
+
+  &:not(:first-child) {
+    border-top: 1px solid var(--color-border);
+  }
+
+  .vui-dropdown-title-end {
+    font-size: var(--font-size-s);
+    font-weight: 400;
+    color: var(--color-text-lighter);
+  }
+}

package/src/components/Flex/Flex.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import type { Sizes } from '../../shared/types'
+import { computed } from 'vue'
+import { useActualGap } from '../../shared/composables'
+
+export interface FlexProps {
+  inline?: boolean
+  wrap?: boolean
+  wrapReverse?: boolean
+
+  row?: boolean
+  column?: boolean
+  rowReverse?: boolean
+  columnReverse?: boolean
+
+  gap?: Sizes | number
+
+  // NOTE: Add more if needed
+  justifyStart?: boolean
+  justifyEnd?: boolean
+  justifyCenter?: boolean
+  spaceBetween?: boolean
+  spaceAround?: boolean
+  spaceEvenly?: boolean
+
+  // NOTE: Add more if needed
+  alignCenter?: boolean
+  alignStart?: boolean
+  alignEnd?: boolean
+  alignBaseline?: boolean
+
+  expand?: boolean
+}
+
+const props = defineProps<FlexProps>()
+
+// Flex gap
+const ag = useActualGap(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.justifyStart)
+    return 'flex-start'
+  else if (props.justifyEnd)
+    return 'flex-end'
+  else if (props.justifyCenter)
+    return 'center'
+  else if (props.spaceBetween)
+    return 'space-between'
+  else if (props.spaceEvenly)
+    return 'space-evenly'
+  else if (props.spaceAround)
+    return 'space-around'
+  else return 'flex-start'
+})
+
+// Align items
+const aA = computed(() => {
+  if (props.alignStart)
+    return 'flex-start'
+  else if (props.alignEnd)
+    return 'flex-end'
+  else if (props.alignCenter)
+    return 'center'
+  else if (props.alignBaseline)
+    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">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.vui-flex {
+  display: v-bind(aY);
+  flex-wrap: v-bind(aW);
+  flex-direction: v-bind(ad);
+  justify-content: v-bind(aj);
+  gap: v-bind(ag);
+  align-items: v-bind(aA);
+  width: v-bind(aH);
+}
+</style>

package/src/components/Grid/Grid.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { Sizes } from '../../shared/types'
+import { computed } from 'vue'
+import { useActualGap } from '../../shared/composables'
+import { createArray } from '../../shared/helpers'
+
+/**
+ * This component is not meant for complex grids
+ */
+
+interface Props {
+  inline?: boolean
+  gap?: Sizes | number
+  rows?: number | string
+  columns?: number | string
+  areas?: string[]
+}
+
+const props = defineProps<Props>()
+
+const aG = useActualGap(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 aD = computed(() => props.inline ? 'inline-grid' : 'grid')
+</script>
+
+<template>
+  <div
+    class="vui-grid"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.vui-grid {
+  display: v-bind(aD);
+  gap: v-bind(aG);
+  grid-template-columns: v-bind(aTC);
+  grid-template-rows: v-bind(aTR);
+}
+</style>

package/src/components/Input/Counter.vue

@@ -0,0 +1,70 @@
+<script setup lang='ts'>
+import type { InputProps } from './Input.vue'
+import { Icon } from '@iconify/vue'
+import Button from '../Button/Button.vue'
+import Input from './Input.vue'
+
+type Props = Omit<InputProps, 'type'> & {
+  incrementBy?: number
+  incrementEnabled?: boolean
+  hideIncrement?: boolean
+  decrementBy?: number
+  decrementEnabled?: boolean
+  hideDecrement?: boolean
+}
+
+const {
+  incrementBy = 1,
+  incrementEnabled = true,
+  hideIncrement = false,
+  decrementBy = 1,
+  decrementEnabled = true,
+  hideDecrement = false,
+  ...inputProps
+} = defineProps<Props>()
+
+const count = defineModel<number>({
+  default: 0,
+})
+</script>
+
+<template>
+  <Input v-bind="inputProps" v-model.number="count" type="number">
+    <template v-if="!hideDecrement" #start>
+      <Button key="decrease" :disabled="!decrementEnabled" size="s" @click="count -= decrementBy">
+        <Icon icon="ph:minus" /> {{ decrementBy > 1 ? decrementBy : '' }}
+      </Button>
+    </template>
+
+    <template v-if="!hideIncrement" #end>
+      <Button key="increase" :disabled="!incrementEnabled" size="s" @click="count += incrementBy">
+        <Icon icon="ph:plus" /> {{ incrementBy > 1 ? incrementBy : '' }}
+      </Button>
+    </template>
+  </Input>
+</template>
+
+<style scoped lang="scss">
+:deep(.vui-input-style) {
+  padding-inline: 4px !important;
+  gap: 8px !important;
+}
+
+:deep(.vui-button) {
+  padding-inline: 2px !important;
+}
+
+:deep(input) {
+  text-align: center;
+
+  ::-webkit-outer-spin-button,
+  ::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Firefox */
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+</style>