@dolanske/vui 0.3.4 → 0.5.0

package/src/components/Tooltip/Tooltip.vue

@@ -1,86 +1,86 @@
-<script setup lang='ts'>
-import type { Placement } from '../../shared/types'
-import { ref, useId, useTemplateRef, watch } from 'vue'
-import Popout from '../Popout/Popout.vue'
-import './tooltip.scss'
-
-interface Props {
-  /**
-   * Tooltip placement related to the anchor
-   */
-  placement?: Placement
-  /**
-   * Amount of time user should hover the anchor until the tooltip shows up
-   */
-  delay?: number
-}
-
-const {
-  placement = 'bottom',
-  delay = 0,
-} = defineProps<Props>()
-
-const popoutAnchorRef = useTemplateRef('popoutAnchor')
-// Track if user is hovering the anchor
-const hoverAnchor = ref(false)
-
-// Display tooltip
-const showTooltip = ref(false)
-
-let timeoutId: NodeJS.Timeout
-watch(hoverAnchor, (isHovering) => {
-  if (isHovering) {
-    if (!delay || delay <= 0) {
-      showTooltip.value = true
-      return
-    }
-
-    clearTimeout(timeoutId)
-
-    timeoutId = setTimeout(() => {
-      // Need to reference the ref itself as this will execute without the
-      // outside scope (as far as I know tbh)
-      if (hoverAnchor.value) {
-        showTooltip.value = true
-      }
-    }, delay)
-  }
-  else {
-    clearTimeout(timeoutId)
-    showTooltip.value = false
-  }
-})
-
-const id = useId()
-</script>
-
-<template>
-  <div
-    ref="popoutAnchor"
-    :style="{
-      width: 'fit-content',
-    }"
-    :aria-describedby="id"
-    @mouseenter="hoverAnchor = true"
-    @mouseleave="hoverAnchor = false"
-  >
-    <slot />
-  </div>
-  <Transition appear name="tooltip">
-    <Popout v-if="showTooltip" :id :anchor="popoutAnchorRef" class="vui-tooltip" :placement name="tooltip">
-      <slot name="tooltip" />
-    </Popout>
-  </Transition>
-</template>
-
-<style scoped>
-.tooltip-enter-active,
-.tooltip-leave-active {
-  transition: 0.1s opacity ease-in-out;
-}
-
-.tooltip-enter-from,
-.tooltip-leave-to {
-  opacity: 0;
-}
-</style>
+<script setup lang='ts'>
+import type { Placement } from '../../shared/types'
+import { ref, useId, useTemplateRef, watch } from 'vue'
+import Popout from '../Popout/Popout.vue'
+import './tooltip.scss'
+
+interface Props {
+  /**
+   * Tooltip placement related to the anchor
+   */
+  placement?: Placement
+  /**
+   * Amount of time user should hover the anchor until the tooltip shows up
+   */
+  delay?: number
+}
+
+const {
+  placement = 'bottom',
+  delay = 0,
+} = defineProps<Props>()
+
+const popoutAnchorRef = useTemplateRef('popoutAnchor')
+// Track if user is hovering the anchor
+const hoverAnchor = ref(false)
+
+// Display tooltip
+const showTooltip = ref(false)
+
+let timeoutId: NodeJS.Timeout
+watch(hoverAnchor, (isHovering) => {
+  if (isHovering) {
+    if (!delay || delay <= 0) {
+      showTooltip.value = true
+      return
+    }
+
+    clearTimeout(timeoutId)
+
+    timeoutId = setTimeout(() => {
+      // Need to reference the ref itself as this will execute without the
+      // outside scope (as far as I know tbh)
+      if (hoverAnchor.value) {
+        showTooltip.value = true
+      }
+    }, delay)
+  }
+  else {
+    clearTimeout(timeoutId)
+    showTooltip.value = false
+  }
+})
+
+const id = useId()
+</script>
+
+<template>
+  <div
+    ref="popoutAnchor"
+    :style="{
+      width: 'fit-content',
+    }"
+    :aria-describedby="id"
+    @mouseenter="hoverAnchor = true"
+    @mouseleave="hoverAnchor = false"
+  >
+    <slot />
+  </div>
+  <Transition appear name="tooltip">
+    <Popout v-if="showTooltip" :id :anchor="popoutAnchorRef" class="vui-tooltip" :placement name="tooltip">
+      <slot name="tooltip" />
+    </Popout>
+  </Transition>
+</template>
+
+<style scoped>
+.tooltip-enter-active,
+.tooltip-leave-active {
+  transition: 0.1s opacity ease-in-out;
+}
+
+.tooltip-enter-from,
+.tooltip-leave-to {
+  opacity: 0;
+}
+</style>

package/src/components/Tooltip/tooltip.scss

@@ -1,4 +1,4 @@
-.vui-tooltip {
-  padding: var(--space-s);
-  max-width: 512px;
-}
+.vui-tooltip {
+  padding: var(--space-s);
+  max-width: 512px;
+}

package/src/index.scss

@@ -1 +1 @@
-@import url(./style/core.scss);
+@import url(./style/core.scss);

package/src/index.ts

@@ -1,119 +1,119 @@
-import Accordion from './components/Accordion/Accordion.vue'
-import AccordionGroup from './components/Accordion/AccordionGroup.vue'
-import Alert from './components/Alert/Alert.vue'
-import Avatar from './components/Avatar/Avatar.vue'
-import Badge from './components/Badge/Badge.vue'
-import BreadcrumbItem from './components/Breadcrumbs/BreadcrumbItem.vue'
-import Breadcrumbs from './components/Breadcrumbs/Breadcrumbs.vue'
-import Button from './components/Button/Button.vue'
-import ButtonGroup from './components/ButtonGroup/ButtonGroup.vue'
-import Calendar from './components/Calendar/Calendar.vue'
-import Card from './components/Card/Card.vue'
-import Checkbox from './components/Checkbox/Checkbox.vue'
-import CopyClipboard from './components/CopyClipboard/CopyClipboard.vue'
-import Divider from './components/Divider/Divider.vue'
-import Drawer from './components/Drawer/Drawer.vue'
-import Dropdown from './components/Dropdown/Dropdown.vue'
-import DropdownItem from './components/Dropdown/DropdownItem.vue'
-import DropdownTitle from './components/Dropdown/DropdownTitle.vue'
-import Flex from './components/Flex/Flex.vue'
-import Grid from './components/Grid/Grid.vue'
-import Counter from './components/Input/Counter.vue'
-import Dropzone from './components/Input/Dropzone.vue'
-import File from './components/Input/File.vue'
-import Input from './components/Input/Input.vue'
-import Password from './components/Input/Password.vue'
-import Textarea from './components/Input/Textarea.vue'
-import Kbd from './components/Kbd/Kbd.vue'
-import KbdGroup from './components/Kbd/KbdGroup.vue'
-import Confirm from './components/Modal/Confirm.vue'
-import Modal from './components/Modal/Modal.vue'
-import OTP from './components/OTP/OTP.vue'
-import OTPItem from './components/OTP/OTPItem.vue'
-import { paginate } from './components/Pagination/pagination'
-import Pagination from './components/Pagination/Pagination.vue'
-import Popout from './components/Popout/Popout.vue'
-import Progress from './components/Progress/Progress.vue'
-import Radio from './components/Radio/Radio.vue'
-import RadioGroup from './components/Radio/RadioGroup.vue'
-import Select from './components/Select/Select.vue'
-import Sheet from './components/Sheet/Sheet.vue'
-import Skeleton from './components/Skeleton/Skeleton.vue'
-import Spinner from './components/Spinner/Spinner.vue'
-import Switch from './components/Switch/Switch.vue'
-import Cell from './components/Table/Cell.vue'
-import Header from './components/Table/Header.vue'
-import Row from './components/Table/Row.vue'
-import SelectAll from './components/Table/SelectAll.vue'
-import SelectRow from './components/Table/SelectRow.vue'
-import { defineTable } from './components/Table/table'
-import Table from './components/Table/Table.vue'
-import Tab from './components/Tabs/Tab.vue'
-import Tabs from './components/Tabs/Tabs.vue'
-import { pushToast, removeToast } from './components/Toast/toast'
-import Toasts from './components/Toast/Toasts.vue'
-import Tooltip from './components/Tooltip/Tooltip.vue'
-import Backdrop from './internal/Backdrop/Backdrop.vue'
-import { searchString } from './shared/helpers'
-import './index.scss'
-
-export {
-  Accordion,
-  AccordionGroup,
-  Alert,
-  Avatar,
-  Backdrop,
-  Badge,
-  BreadcrumbItem,
-  Breadcrumbs,
-  Button,
-  ButtonGroup,
-  Calendar,
-  Card,
-  Cell,
-  Checkbox,
-  Confirm,
-  CopyClipboard,
-  Counter,
-  defineTable,
-  Divider,
-  Drawer,
-  Dropdown,
-  DropdownItem,
-  DropdownTitle,
-  Dropzone,
-  File,
-  Flex,
-  Grid,
-  Header,
-  Input,
-  Kbd,
-  KbdGroup,
-  Modal,
-  OTP,
-  OTPItem,
-  paginate,
-  Pagination,
-  Password,
-  Popout,
-  Progress,
-  pushToast,
-  Radio,
-  RadioGroup,
-  removeToast,
-  Row,
-  searchString,
-  Select,
-  SelectAll,
-  SelectRow,
-  Sheet,
-  Skeleton,
-  Spinner,
-  Switch,
-  Tab,
-  Table,
-  Tabs,
-  Textarea,
-  Toasts,
-  Tooltip,
-}
+import Accordion from './components/Accordion/Accordion.vue'
+import AccordionGroup from './components/Accordion/AccordionGroup.vue'
+import Alert from './components/Alert/Alert.vue'
+import Avatar from './components/Avatar/Avatar.vue'
+import Badge from './components/Badge/Badge.vue'
+import BreadcrumbItem from './components/Breadcrumbs/BreadcrumbItem.vue'
+import Breadcrumbs from './components/Breadcrumbs/Breadcrumbs.vue'
+import Button from './components/Button/Button.vue'
+import ButtonGroup from './components/ButtonGroup/ButtonGroup.vue'
+import Calendar from './components/Calendar/Calendar.vue'
+import Card from './components/Card/Card.vue'
+import Checkbox from './components/Checkbox/Checkbox.vue'
+import CopyClipboard from './components/CopyClipboard/CopyClipboard.vue'
+import Divider from './components/Divider/Divider.vue'
+import Drawer from './components/Drawer/Drawer.vue'
+import Dropdown from './components/Dropdown/Dropdown.vue'
+import DropdownItem from './components/Dropdown/DropdownItem.vue'
+import DropdownTitle from './components/Dropdown/DropdownTitle.vue'
+import Flex from './components/Flex/Flex.vue'
+import Grid from './components/Grid/Grid.vue'
+import Counter from './components/Input/Counter.vue'
+import Dropzone from './components/Input/Dropzone.vue'
+import File from './components/Input/File.vue'
+import Input from './components/Input/Input.vue'
+import Password from './components/Input/Password.vue'
+import Textarea from './components/Input/Textarea.vue'
+import Kbd from './components/Kbd/Kbd.vue'
+import KbdGroup from './components/Kbd/KbdGroup.vue'
+import Confirm from './components/Modal/Confirm.vue'
+import Modal from './components/Modal/Modal.vue'
+import OTP from './components/OTP/OTP.vue'
+import OTPItem from './components/OTP/OTPItem.vue'
+import { paginate } from './components/Pagination/pagination'
+import Pagination from './components/Pagination/Pagination.vue'
+import Popout from './components/Popout/Popout.vue'
+import Progress from './components/Progress/Progress.vue'
+import Radio from './components/Radio/Radio.vue'
+import RadioGroup from './components/Radio/RadioGroup.vue'
+import Select from './components/Select/Select.vue'
+import Sheet from './components/Sheet/Sheet.vue'
+import Skeleton from './components/Skeleton/Skeleton.vue'
+import Spinner from './components/Spinner/Spinner.vue'
+import Switch from './components/Switch/Switch.vue'
+import Cell from './components/Table/Cell.vue'
+import Header from './components/Table/Header.vue'
+import Row from './components/Table/Row.vue'
+import SelectAll from './components/Table/SelectAll.vue'
+import SelectRow from './components/Table/SelectRow.vue'
+import { defineTable } from './components/Table/table'
+import Table from './components/Table/Table.vue'
+import Tab from './components/Tabs/Tab.vue'
+import Tabs from './components/Tabs/Tabs.vue'
+import { pushToast, removeToast } from './components/Toast/toast'
+import Toasts from './components/Toast/Toasts.vue'
+import Tooltip from './components/Tooltip/Tooltip.vue'
+import Backdrop from './internal/Backdrop/Backdrop.vue'
+import { searchString } from './shared/helpers'
+import './index.scss'
+
+export {
+  Accordion,
+  AccordionGroup,
+  Alert,
+  Avatar,
+  Backdrop,
+  Badge,
+  BreadcrumbItem,
+  Breadcrumbs,
+  Button,
+  ButtonGroup,
+  Calendar,
+  Card,
+  Cell,
+  Checkbox,
+  Confirm,
+  CopyClipboard,
+  Counter,
+  defineTable,
+  Divider,
+  Drawer,
+  Dropdown,
+  DropdownItem,
+  DropdownTitle,
+  Dropzone,
+  File,
+  Flex,
+  Grid,
+  Header,
+  Input,
+  Kbd,
+  KbdGroup,
+  Modal,
+  OTP,
+  OTPItem,
+  paginate,
+  Pagination,
+  Password,
+  Popout,
+  Progress,
+  pushToast,
+  Radio,
+  RadioGroup,
+  removeToast,
+  Row,
+  searchString,
+  Select,
+  SelectAll,
+  SelectRow,
+  Sheet,
+  Skeleton,
+  Spinner,
+  Switch,
+  Tab,
+  Table,
+  Tabs,
+  Textarea,
+  Toasts,
+  Tooltip,
+}

package/src/internal/Backdrop/Backdrop.vue

@@ -1,22 +1,22 @@
-<script setup lang="ts">
-import { onMounted } from 'vue'
-import './backdrop.scss'
-
-const emits = defineEmits<{
-  (e: 'close'): void
-}>()
-
-onMounted(() => {
-  window.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape') {
-      emits('close')
-    }
-  })
-})
-</script>
-
-<template>
-  <div class="vui-backdrop" @click.self="emits('close')">
-    <slot />
-  </div>
-</template>
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import './backdrop.scss'
+
+const emits = defineEmits<{
+  (e: 'close'): void
+}>()
+
+onMounted(() => {
+  window.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      emits('close')
+    }
+  })
+})
+</script>
+
+<template>
+  <div class="vui-backdrop" @click.self="emits('close')">
+    <slot />
+  </div>
+</template>

package/src/internal/Backdrop/backdrop.scss

@@ -1,28 +1,28 @@
-:root {
-  --backdrop-offset: 64px;
-}
-
-.vui-backdrop {
-  z-index: 1000;
-  position: fixed;
-  display: block;
-  width: 100dvw;
-  height: 100dvh;
-  top: 0;
-  left: 0;
-  padding: var(--backdrop-offset);
-  overflow-y: auto;
-
-  &:after {
-    content: '';
-    position: fixed;
-    z-index: -1;
-    inset: 0;
-    background-color: var(--color-bg-lowered);
-    opacity: 0.9;
-  }
-}
-
-html:has(.vui-backdrop) {
-  overflow: hidden;
-}
+:root {
+  --backdrop-offset: 64px;
+}
+
+.vui-backdrop {
+  z-index: 1000;
+  position: fixed;
+  display: block;
+  width: 100dvw;
+  height: 100dvh;
+  top: 0;
+  left: 0;
+  padding: var(--backdrop-offset);
+  overflow-y: auto;
+
+  &:after {
+    content: '';
+    position: fixed;
+    z-index: -1;
+    inset: 0;
+    background-color: var(--color-bg-lowered);
+    opacity: 0.9;
+  }
+}
+
+html:has(.vui-backdrop) {
+  overflow: hidden;
+}

package/src/main.ts

@@ -1,5 +1,5 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import './style/core.scss'
-
-createApp(App).mount('#app')
+import { createApp } from 'vue'
+import App from './App.vue'
+import './style/core.scss'
+
+createApp(App).mount('#app')