@dolanske/vui 0.3.4 → 0.5.0

package/src/components/Drawer/Drawer.vue

@@ -1,97 +1,97 @@
-<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 {
-  /**
-   * 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 mW = computed(() => {
-  if (typeof containerSize === 'string') {
-    if (containerClass === '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
-    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-handle': handle === false }" :aria-describedby="id">
-        <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>
+<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 {
+  /**
+   * 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 mW = computed(() => {
+  if (typeof containerSize === 'string') {
+    if (containerClass === '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
+    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-handle': handle === false }" :aria-describedby="id">
+        <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,36 +1,36 @@
-.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-fast);
-  }
-}
+.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-fast);
+  }
+}

package/src/components/Dropdown/Dropdown.vue

@@ -1,111 +1,111 @@
-<script setup lang='ts'>
-import type { MaybeElement } from '@vueuse/core'
-import type { Placement } from '../../shared/types'
-import { onClickOutside } from '@vueuse/core'
-import { computed, ref, useTemplateRef } 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
-}
-
-const {
-  placement = 'bottom-start',
-  expand,
-  minWidth = 156,
-} = defineProps<Props>()
-
-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')
-</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>
-
-  <Transition appear name="dropdown">
-    <Popout
-      v-if="showMenu"
-      ref="dropdown"
-      :anchor="anchorRef"
-      class="vui-dropdown"
-      :placement
-      :style="{
-        minWidth: mW,
-        width: w,
-      }"
-    >
-      <slot :open :close :toggle :is-open="showMenu" />
-    </Popout>
-  </Transition>
-</template>
-
-<style scoped lang="scss">
-.dropdown-enter-active,
-.dropdown-leave-active {
-  transition: 0.1s opacity ease-in-out;
-}
-
-.dropdown-enter-from,
-.dropdown-leave-to {
-  opacity: 0;
-}
-</style>
+<script setup lang='ts'>
+import type { MaybeElement } from '@vueuse/core'
+import type { Placement } from '../../shared/types'
+import { onClickOutside } from '@vueuse/core'
+import { computed, ref, useTemplateRef } 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
+}
+
+const {
+  placement = 'bottom-start',
+  expand,
+  minWidth = 156,
+} = defineProps<Props>()
+
+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')
+</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>
+
+  <Transition appear name="dropdown">
+    <Popout
+      v-if="showMenu"
+      ref="dropdown"
+      :anchor="anchorRef"
+      class="vui-dropdown"
+      :placement
+      :style="{
+        minWidth: mW,
+        width: w,
+      }"
+    >
+      <slot :open :close :toggle :is-open="showMenu" />
+    </Popout>
+  </Transition>
+</template>
+
+<style scoped lang="scss">
+.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

@@ -1,29 +1,33 @@
-<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>
+<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 }">
+    <!-- This should always be here to offset items which dont have icons -->
+    <div class="vui-dropdown-item-icon">
+      <Icon v-if="props.icon" :icon="props.icon" />
+    </div>
+
+    <div class="vui-dropdown-item-slot">
+      <slot />
+    </div>
+
+    <div 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,8 +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>
+<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-item.scss

@@ -0,0 +1,77 @@
+.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-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;
+
+      path {
+        color: var(--color-text-light);
+      }
+    }
+  }
+
+  .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);
+  }
+}