@dolanske/vui 1.0.4 → 1.1.0

package/src/components/Drawer/Drawer.vue

@@ -1,97 +1,102 @@
-<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 (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="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 }">
-        <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 {
+  /**
+   * 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 +1,37 @@
-.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);
-  }
-}
+.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,135 +1,135 @@
-<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>
-
-  <!-- <Transition name="dropdown" mode="out-in"> -->
-  <Popout
-    v-if="showMenu"
-    ref="dropdown"
-    :anchor="anchorRef"
-    class="vui-dropdown"
-    :placement
-    :style="{
-      minWidth: expand ? w : mW,
-      width: w,
-      maxHeight: formatUnitValue(maxHeight),
-    }"
-  >
-    <slot :open :close :toggle :is-open="showMenu" />
-  </Popout>
-  <!-- </Transition> -->
-</template>
-
-<!-- <style scoped lang="scss">
-.dropdown-enter-active,
-.dropdown-leave-active {
-  transition: var(--transition-fast);
-}
-
-.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, 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>
+
+  <!-- <Transition name="dropdown" mode="out-in"> -->
+  <Popout
+    v-if="showMenu"
+    ref="dropdown"
+    :anchor="anchorRef"
+    class="vui-dropdown"
+    :placement
+    :style="{
+      minWidth: expand ? w : mW,
+      width: w,
+      maxHeight: formatUnitValue(maxHeight),
+    }"
+  >
+    <slot :open :close :toggle :is-open="showMenu" />
+  </Popout>
+  <!-- </Transition> -->
+</template>
+
+<!-- <style scoped lang="scss">
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: var(--transition-fast);
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+}
+</style> -->

package/src/components/Dropdown/DropdownItem.vue

@@ -1,33 +1,33 @@
-<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>
+<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 +1,14 @@
-<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>
+<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>