@dolanske/vui 1.2.0 → 1.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dolanske/vui",
   "type": "module",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": false,
   "description": "Brother in Christ there's a new UI library",
   "author": "dolanske",

package/src/components/CopyClipboard/CopyClipboard.vue

@@ -1,9 +1,10 @@
 <script setup lang='ts'>
+import type { Placement } from '@floating-ui/vue'
 import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
 import { Icon } from '@iconify/vue'
 import { useClipboard } from '@vueuse/core'
 import { computed, onMounted, useSlots, useTemplateRef } from 'vue'
-import { isNil } from '../../shared/helpers'
+import { getPlacementAnimationName, isNil } from '../../shared/helpers'
 import Flex from '../Flex/Flex.vue'
 import './copy-clipboard.scss'
 
@@ -20,12 +21,17 @@ interface Props {
    * How long will the copy confirmation tooltip be visible in milliseconds.
    */
   confirmTime?: number
+  /**
+   * Tooltip position. Default is top
+   */
+  confirmPlacement?: Placement
 }
 
 const {
   text,
   confirm,
   confirmTime,
+  confirmPlacement = 'top',
 } = defineProps<Props>()
 
 const {
@@ -61,7 +67,8 @@ const tooltipRef = useTemplateRef('tooltip')
 const { floatingStyles } = useFloating(anchorRef, tooltipRef, {
   whileElementsMounted: autoUpdate,
   transform: false,
-  placement: 'top',
+  strategy: 'fixed',
+  placement: confirmPlacement,
   middleware: [
     offset(8),
     shift(),
@@ -75,7 +82,7 @@ const { floatingStyles } = useFloating(anchorRef, tooltipRef, {
     <slot :copy :copied />
   </div>
 
-  <Transition name="fade-up" mode="in-out">
+  <Transition :name="getPlacementAnimationName(confirmPlacement)" mode="in-out">
     <div v-if="copied && (!!parsedConfirm || $slots.confirm)" ref="tooltip" class="vui-clipboard-tooltip" :style="floatingStyles">
       <slot name="confirm">
         <template v-if="typeof parsedConfirm === 'string'">

package/src/components/Dropdown/Dropdown.vue

@@ -104,10 +104,9 @@ onMounted(() => {
     <slot name="trigger" :open :is-open="showMenu" :close :toggle />
   </div>
 
-  <!-- <Transition name="dropdown" mode="out-in"> -->
   <Popout
-    v-if="showMenu"
     ref="dropdown"
+    :visible="showMenu"
     :anchor="anchorRef"
     class="vui-dropdown"
     :placement
@@ -118,17 +117,4 @@ onMounted(() => {
   >
     <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/Input/Counter.vue

@@ -36,7 +36,7 @@ const count = defineModel<number>({
 
     <template #end>
       <ButtonGroup>
-        <Button v-if="!hideDecrement" key="decrease" :disabled="!decrementEnabled" :style="{ 'border-top-left-radius': 0, 'border-bottom-left-radius': 0 }" @click="count -= decrementBy">
+        <Button v-if="!hideDecrement" key="decrease" :disabled="!decrementEnabled" :style="{ 'border-top-left-radius': 0, 'border-bottom-left-radius': 0, 'marginRight': '-1px' }" @click="count -= decrementBy">
           <Icon icon="ph:minus" /> {{ decrementBy > 1 ? decrementBy : '' }}
         </Button>
         <Button v-if="!hideIncrement" key="increase" :disabled="!incrementEnabled" @click="count += incrementBy">

package/src/components/Input/Password.vue

@@ -25,7 +25,7 @@ const show = ref(showPassword)
     <template #end>
       <Button
         square
-        :data-title-top="show ? 'Hide' : 'Reveal'"
+        :aria-label="show ? 'Hide' : 'Reveal'"
         @click="show = !show"
       >
         <Icon :width="18" :height="18" :icon="show ? 'ph:eye-slash' : 'ph:eye'" />

package/src/components/Pagination/Pagination.vue

@@ -4,6 +4,7 @@ import type { Pagination } from './pagination'
 import { computed } from 'vue'
 import Button from '../Button/Button.vue'
 import Flex from '../Flex/Flex.vue'
+import Tooltip from '../Tooltip/Tooltip.vue'
 
 interface Props {
   numbers?: boolean
@@ -39,11 +40,21 @@ function setPrev() {
 <template>
   <Flex inline class="vui-pagination" gap="xxs">
     <slot name="start">
-      <Button v-if="props.firstLast" data-title-top="First page" plain :disabled="props.pagination.startPage === props.pagination.currentPage" square icon="ph:caret-double-left" @click="emit('change', props.pagination.startPage)" />
+      <Tooltip v-if="props.firstLast">
+        <Button plain :disabled="props.pagination.startPage === props.pagination.currentPage" square icon="ph:caret-double-left" @click="emit('change', props.pagination.startPage)" />
+        <template #tooltip>
+          <p>First page</p>
+        </template>
+      </Tooltip>
     </slot>
 
     <slot name="prev" :disabled="canPrevPage" :set-page="setPrev">
-      <Button v-if="props.prevNext" data-title-top="Previous page" plain :disabled="!canPrevPage" square icon="ph:caret-left" @click="setPrev" />
+      <Tooltip v-if="props.prevNext">
+        <Button plain :disabled="!canPrevPage" square icon="ph:caret-left" @click="setPrev" />
+        <template #tooltip>
+          <p>Previous page</p>
+        </template>
+      </Tooltip>
     </slot>
 
     <template v-if="props.numbers">
@@ -61,17 +72,21 @@ function setPrev() {
       </Flex>
     </template>
     <slot name="next" :disabled="canNextPage" :set-page="setNext">
-      <Button v-if="props.prevNext" data-title-top="Next page" plain :disabled="!canNextPage" square icon="ph:caret-right" @click="setNext" />
+      <Tooltip v-if="props.prevNext">
+        <Button plain :disabled="!canNextPage" square icon="ph:caret-right" @click="setNext" />
+        <template #tooltip>
+          <p>Next page</p>
+        </template>
+      </Tooltip>
     </slot>
 
     <slot name="end">
-      <Button v-if="props.firstLast" data-title-top="Last page" plain :disabled="props.pagination.endPage === props.pagination.currentPage" square icon="ph:caret-double-right" @click="emit('change', props.pagination.endPage)" />
+      <Tooltip v-if="props.firstLast">
+        <Button plain :disabled="props.pagination.endPage === props.pagination.currentPage" square icon="ph:caret-double-right" @click="emit('change', props.pagination.endPage)" />
+        <template #tooltip>
+          <p>Last page</p>
+        </template>
+      </Tooltip>
     </slot>
   </Flex>
 </template>
-
-<style scoped>
-[data-title-top]:before {
-  white-space: nowrap;
-}
-</style>

package/src/components/Popout/Popout.vue

@@ -1,8 +1,9 @@
 <script setup lang='ts'>
 import type { Placement, PopoutMaybeElement } from '../../shared/types'
-import { flip, offset, shift, useFloating } from '@floating-ui/vue'
+import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
 import { onClickOutside } from '@vueuse/core'
-import { toRef, useTemplateRef } from 'vue'
+import { toRef, useTemplateRef, watch } from 'vue'
+import { getPlacementAnimationName } from '../../shared/helpers'
 import './popout.scss'
 
 export interface Props {
@@ -18,10 +19,15 @@ export interface Props {
    * Distance between the anchor and the rendered tooltip
    */
   offset?: number
+  /**
+   * Set the visibility of the dropdown
+   */
+  visible: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   offset: 8,
+  placement: 'top',
 })
 
 const emit = defineEmits<{
@@ -30,23 +36,38 @@ const emit = defineEmits<{
 const popoutRef = useTemplateRef('popout')
 const anchorRef = toRef(props.anchor)
 
-const { floatingStyles } = useFloating(anchorRef, popoutRef, {
+const { floatingStyles, update } = useFloating(anchorRef, popoutRef, {
+  whileElementsMounted: autoUpdate,
+  strategy: 'fixed',
+  transform: false,
   placement: props.placement,
   middleware: [
-    // ...(props.placement
-    //   ? []
-    //   : [autoPlacement()]),
     shift({ padding: 8 }),
     flip(),
     offset(props.offset),
   ],
 })
 
+// Make sure to update the popout when the anchor is mounted
+watch(() => props.anchor, (value) => {
+  if (value) {
+    anchorRef.value = value
+    update()
+  }
+})
+
 onClickOutside(popoutRef, () => emit('clickOutside'))
 </script>
 
 <template>
-  <div ref="popout" :style="floatingStyles" class="vui-popout">
-    <slot />
-  </div>
+  <Transition :name="getPlacementAnimationName(props.placement)">
+    <div
+      v-if="props.visible"
+      ref="popout"
+      :style="floatingStyles"
+      class="vui-popout"
+    >
+      <slot />
+    </div>
+  </Transition>
 </template>

package/src/components/Popout/popout.scss

@@ -5,6 +5,7 @@
   background-color: var(--color-bg-medium);
   border-radius: var(--border-radius-m);
   z-index: 1000;
+  position: fixed;
 }
 
 :root.light {

package/src/components/Sheet/Sheet.vue

@@ -62,9 +62,7 @@ const baseTransform = computed(() => {
       <Backdrop v-if="open" @close="emit('close')">
         <div v-if="open" class="vui-sheet" :class="[`vui-sheet-position-${position}`]" :style>
           <div class="vui-sheet-header">
-            <div class="flex-1">
-              <slot name="header" :close="() => emit('close')" />
-            </div>
+            <slot name="header" :close="() => emit('close')" />
             <Button plain square icon="ph:x" @click="emit('close')" />
           </div>
 

package/src/components/Sheet/sheet.scss

@@ -58,9 +58,11 @@
   }
 
   .vui-sheet-header {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 34px;
     gap: var(--space-m);
     align-self: flex-start;
+    align-items: center;
 
     & + .vui-sheet-content {
       padding-top: var(--space-s);

package/src/components/Table/Head.vue

@@ -2,6 +2,7 @@
 import type { Header } from './table'
 import { computed } from 'vue'
 import Button from '../Button/Button.vue'
+import Tooltip from '../Tooltip/Tooltip.vue'
 
 interface Props {
   /**
@@ -23,16 +24,16 @@ const sortStateBind = computed(() => {
     return
   switch (props.header.sortKey) {
     case 'asc': return {
-      'icon': 'ph:sort-ascending',
-      'data-title-top': 'Ascending',
+      icon: 'ph:sort-ascending',
+      tooltipText: 'Ascending',
     }
     case 'desc': return {
-      'icon': 'ph:sort-descending',
-      'data-title-top': 'Descending',
+      icon: 'ph:sort-descending',
+      tooltipText: 'Descending',
     }
     default: return {
-      'icon': 'ph:arrows-down-up',
-      'data-title-top': 'Sort column',
+      icon: 'ph:arrows-down-up',
+      tooltipText: 'Sort column',
     }
   }
 })
@@ -44,16 +45,22 @@ const sortStateBind = computed(() => {
       <slot>
         {{ props.header?.label }}
       </slot>
-      <Button
-        v-if="props.sort && props.header"
-        class="vui-table-sort-button"
-        v-bind="sortStateBind"
-        size="s"
-        :plain="!!!props.header.sortKey"
-        square
-        variant="gray"
-        @click="props.header.sortToggle"
-      />
+      <template v-if="props.sort && props.header">
+        <Tooltip placement="top">
+          <Button
+            :icon="sortStateBind?.icon"
+            class="vui-table-sort-button"
+            size="s"
+            :plain="!!!props.header.sortKey"
+            square
+            variant="gray"
+            @click="props.header.sortToggle"
+          />
+          <template #tooltip>
+            {{ sortStateBind?.tooltipText }}
+          </template>
+        </Tooltip>
+      </template>
     </div>
   </th>
 </template>

package/src/components/Table/table.scss

@@ -1,3 +1,10 @@
+.vui-table-overflow {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: visible;
+}
+
 .vui-table-container {
   display: block;
   width: 100%;
@@ -68,7 +75,6 @@
 
     th,
     td {
-      font-size: var(--font-size-m);
       border: none;
       border-left: none !important;
       transition: var(--transition-fast);
@@ -139,11 +145,6 @@
   .vui-table-pagination-wrap {
     padding: var(--space-xs) var(--space-m);
     border-top: 1px solid var(--color-border);
-
-    p {
-      font-size: var(--font-size-s);
-      color: var(--color-text-lighter);
-    }
   }
 }
 

package/src/components/Tooltip/Tooltip.vue

@@ -1,6 +1,6 @@
 <script setup lang='ts'>
 import type { Placement } from '../../shared/types'
-import { ref, useId, useTemplateRef, watch } from 'vue'
+import { computed, ref, useId, useTemplateRef, watch } from 'vue'
 import Popout from '../Popout/Popout.vue'
 import './tooltip.scss'
 
@@ -52,35 +52,27 @@ watch(hoverAnchor, (isHovering) => {
 })
 
 const id = useId()
+const anchor = computed(() => popoutAnchorRef.value?.children[0] as HTMLElement | null)
 </script>
 
 <template>
   <div
     ref="popoutAnchor"
-    :style="{
-      width: 'fit-content',
-    }"
+    class="popout-anchor"
     :aria-describedby="id"
     @mouseenter="hoverAnchor = true"
     @mouseleave="hoverAnchor = false"
   >
     <slot />
   </div>
-  <!-- <Transition name="tooltip"> -->
-  <Popout v-if="showTooltip" :id :anchor="popoutAnchorRef" class="vui-tooltip" :placement>
+  <Popout :id :visible="showTooltip" :anchor class="vui-tooltip" :placement>
     <slot name="tooltip" />
   </Popout>
-  <!-- </Transition> -->
 </template>
 
-<!-- <style scoped>
-.tooltip-enter-active,
-.tooltip-leave-active {
-  transition: var(--transition-fast);
+<style scoped lang="scss">
+.popout-anchor {
+  display: contents;
+  width: fit-content;
 }
-
-.tooltip-enter-from,
-.tooltip-leave-to {
-  opacity: 0;
-}
-</style> -->
+</style>

package/src/components/Tooltip/tooltip.scss

@@ -1,8 +1,5 @@
 .vui-tooltip {
-  padding: var(--space-s);
+  padding: var(--space-xs) var(--space-s);
   max-width: 512px;
   background-color: var(--color-bg-raised);
 }
-
-// :root.light {
-// }

package/src/examples/ExampleCopyClipboard.vue

@@ -28,9 +28,9 @@ import Flex from '../components/Flex/Flex.vue'
           </td>
         </tr>
         <tr>
-          <th>Custom confirm popup</th>
+          <th>Custom confirm popup & positioned at the right</th>
           <td>
-            <CopyClipboard text="Copy me!" confirm>
+            <CopyClipboard text="Copy me!" confirm confirm-placement="right">
               <Button>Copy me!</Button>
               <template #confirm>
                 <Flex column gap="s" y-center>

package/src/examples/ExamplePopouts.vue

@@ -26,7 +26,7 @@ const open = ref(false)
         This popout has offset of <code>32</code> and its placement is <code>bottom-start</code>. It also has an attached event to <code>clickOutside</code> which is fired when user clicks outside of the popout. In that case, we manually close it.
       </p>
     </Flex>
-    <Popout v-if="open" :anchor="anchRef" class="test-popout" :offset="32" placement="bottom-start" @click-outside="open = false">
+    <Popout :visible="open" :anchor="anchRef" class="test-popout" :offset="32" placement="bottom-start" @click-outside="open = false">
       <h3>Popout content</h3>
       <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem facere eligendi ex, alias itaque molestiae, vero animi, vitae vel fuga corporis aut consectetur temporibus ipsum placeat dolores perferendis. Deleniti, et!</p>
     </Popout>

package/src/examples/ExampleTables.vue

@@ -6,6 +6,7 @@ import { paginate } from '../components/Pagination/pagination'
 import Pagination from '../components/Pagination/Pagination.vue'
 import * as Table from '../components/Table/index'
 import { defineTable } from '../components/Table/table'
+import Tooltip from '../components/Tooltip/Tooltip.vue'
 
 interface Item {
   'ID Nation': string
@@ -191,5 +192,168 @@ const exampleToRender = computed(() => testData.slice(paginationExample.value.st
     <Divider :size="40" class="w-40" />
 
     <p>The <code>defineTable</code> hook can also be used with other UI components. Not just tables. That's why all the table interactivity is not within the component, but in a hook. It's very flexible and allows custom functionality.</p>
+
+    <Divider :size="40" />
+
+    <h5 class="mb-s">
+      Responsitivity
+    </h5>
+
+    <p class="mb-m">
+      Table can be made responsible if they overflow their width and are wrapped in a <code>.vui-table-container</code> element.
+    </p>
+
+    <div class="container container-m">
+      <div class="vui-table-overflow">
+        <table>
+          <thead>
+            <tr>
+              <th>
+                <Tooltip placement="top">
+                  ID
+                  <template #tooltip>
+                    <p>ID</p>
+                  </template>
+                </Tooltip>
+              </th>
+              <th>
+                <Tooltip placement="top">
+                  Name
+                  <template #tooltip>
+                    <p>Name</p>
+                  </template>
+                </Tooltip>
+              </th>
+              <th>
+                <Tooltip placement="top">
+                  Email
+                  <template #tooltip>
+                    <p>Email</p>
+                  </template>
+                </Tooltip>
+              </th>
+              <th>
+                <Tooltip placement="top">
+                  Phone
+                  <template #tooltip>
+                    <p>Phone</p>
+                  </template>
+                </Tooltip>
+              </th>
+              <th>
+                <Tooltip placement="top">
+                  Address
+                  <template #tooltip>
+                    <p>Address</p>
+                  </template>
+                </Tooltip>
+              </th>
+              <th>
+                <Tooltip placement="top">
+                  City
+                  <template #tooltip>
+                    <p>City</p>
+                  </template>
+                </Tooltip>
+              </th>
+              <th>
+                <Tooltip placement="top">
+                  State
+                  <template #tooltip>
+                    <p>State</p>
+                  </template>
+                </Tooltip>
+              </th>
+              <th>
+                <Tooltip placement="top">
+                  Zip
+                  <template #tooltip>
+                    <p>Zip</p>
+                  </template>
+                </Tooltip>
+              </th>
+              <th>
+                <Tooltip placement="top">
+                  Country
+                  <template #tooltip>
+                    <p>Country</p>
+                  </template>
+                </Tooltip>
+              </th>
+              <th>
+                <Tooltip placement="top">
+                  Status
+                  <template #tooltip>
+                    <p>Status</p>
+                  </template>
+                </Tooltip>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>001</td>
+              <td>John Doe</td>
+              <td>john.doe@example.com</td>
+              <td>(555) 123-4567</td>
+              <td>123 Main St</td>
+              <td>New York</td>
+              <td>NY</td>
+              <td>10001</td>
+              <td>USA</td>
+              <td>Active</td>
+            </tr>
+            <tr>
+              <td>002</td>
+              <td>Jane Smith</td>
+              <td>jane.smith@example.com</td>
+              <td>(555) 987-6543</td>
+              <td>456 Oak Ave</td>
+              <td>Los Angeles</td>
+              <td>CA</td>
+              <td>90001</td>
+              <td>USA</td>
+              <td>Inactive</td>
+            </tr>
+            <tr>
+              <td>003</td>
+              <td>Robert Johnson</td>
+              <td>robert.j@example.com</td>
+              <td>(555) 456-7890</td>
+              <td>789 Pine Blvd</td>
+              <td>Chicago</td>
+              <td>IL</td>
+              <td>60601</td>
+              <td>USA</td>
+              <td>Active</td>
+            </tr>
+            <tr>
+              <td>004</td>
+              <td>Emily Davis</td>
+              <td>emily.d@example.com</td>
+              <td>(555) 234-5678</td>
+              <td>321 Cedar Ln</td>
+              <td>Houston</td>
+              <td>TX</td>
+              <td>77001</td>
+              <td>USA</td>
+              <td>Pending</td>
+            </tr>
+            <tr>
+              <td>005</td>
+              <td>Michael Wilson</td>
+              <td>michael.w@example.com</td>
+              <td>(555) 876-5432</td>
+              <td>654 Maple Dr</td>
+              <td>Miami</td>
+              <td>FL</td>
+              <td>33101</td>
+              <td>USA</td>
+              <td>Active</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
   </div>
 </template>

package/src/shared/helpers.ts

@@ -1,3 +1,5 @@
+import type { Placement } from '@floating-ui/vue'
+
 export function createArray(length: number, startOffset: number = 0): number[] {
   return Array
     .from({ length })
@@ -115,3 +117,8 @@ export function isObjectInSet(set: Set<any>, obj: any): boolean {
 
   return false
 }
+
+export function getPlacementAnimationName(position: Placement): string {
+  const suffix = position.includes('-') ? position.split('-')[0] : position
+  return `fade-${suffix}`
+}