@dolanske/vui 1.2.1 → 1.4.0

package/src/components/Select/select.scss

@@ -72,7 +72,7 @@ select {
   border-radius: var(--border-radius-s);
   padding-inline: var(--space-xs);
   transition: var(--transition-fast);
-  z-index: 1;
+  z-index: var(--z-default);
   font-size: var(--font-size-m);
   color: var(--color-text);
 

package/src/components/Sidebar/sidebar.scss

@@ -28,7 +28,7 @@
   width: 224px;
   position: absolute;
   top: 0;
-  z-index: 50;
+  z-index: var(--z-nav);
   background-color: var(--color-bg);
   border-right: 1px solid var(--color-border);
   transition: var(--transition-slow);

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,12 +75,11 @@
 
     th,
     td {
-      font-size: var(--font-size-m);
       border: none;
       border-left: none !important;
       transition: var(--transition-fast);
       position: relative;
-      z-index: 1;
+      z-index: var(--z-default);
 
       // Fixed width, only houses a checkbox component
       &.vui-table-interactive-cell {
@@ -109,7 +115,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        z-index: 2;
+        z-index: var(--z-active);
         position: absolute;
         inset: 0;
         padding: var(--space-xs);
@@ -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/Tabs/Tabs.vue

@@ -84,7 +84,7 @@ enforceSlotType(flattened, 'Tab')
     </template>
 
     <Transition name="fade" appear>
-      <div ref="underline" class="vui-tab-underline" />
+      <div v-if="active" ref="underline" class="vui-tab-underline" />
     </Transition>
   </div>
 </template>

package/src/components/Tabs/tabs.scss

@@ -9,7 +9,7 @@
   &.vui-tabs-variant-filled {
     background-color: var(--color-bg-raised);
     border-bottom: none;
-    z-index: 1;
+    z-index: var(--z-default);
     border-radius: var(--border-radius-m);
     padding-inline: 4px;
 
@@ -18,7 +18,7 @@
       background-color: var(--color-bg-lowered);
       top: 3px;
       bottom: 3px;
-      z-index: -1;
+      z-index: var(--z-behind);
       border-radius: var(--border-radius-m);
     }
   }

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/ExampleAccordions.vue

@@ -19,7 +19,7 @@ const dynamicAccordions = ref([
 
     <Grid :columns="2" gap="xl">
       <div>
-        <strong class="block mb-s">Base</strong>
+        <strong class="block mb-s text-semibold">Base</strong>
         <Accordion label="Open details" class="mb-xl">
           <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi nostrum aspernatur nam earum vitae deleniti, odio atque esse sequi, in harum! Sint dolorum quis excepturi odio eum aspernatur aliquid harum.</p>
         </Accordion>
@@ -29,7 +29,7 @@ const dynamicAccordions = ref([
 
         <div class="mb-xl" />
 
-        <strong class="block mb-s">Group</strong>
+        <strong class="block mb-s text-semibold">Group</strong>
         <AccordionGroup>
           <Accordion v-for="item in dynamicAccordions" :key="item" :label="item">
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum aliquam ad dicta nesciunt exercitationem? Quas vitae suscipit aliquam numquam incidunt corporis ullam, nihil dolores perferendis ipsa velit tempora accusantium cupiditate.
@@ -37,20 +37,33 @@ const dynamicAccordions = ref([
         </AccordionGroup>
       </div>
       <div>
-        <strong class="block mb-s">Card</strong>
+        <strong class="block mb-s text-semibold">Card</strong>
         <Accordion label="Open details" card>
           <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi nostrum aspernatur nam earum vitae deleniti, odio atque esse sequi, in harum! Sint dolorum quis excepturi odio eum aspernatur aliquid harum.</p>
         </Accordion>
 
         <div class="mb-xl" />
 
-        <strong class="block mb-s">Card group</strong>
+        <strong class="block mb-s text-semibold">Card group</strong>
         <AccordionGroup single>
           <Accordion v-for="item in dynamicAccordions" :key="item" :label="item" card class="mb-xs">
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum aliquam ad dicta nesciunt exercitationem? Quas vitae suscipit aliquam numquam incidunt corporis ullam, nihil dolores perferendis ipsa velit tempora accusantium cupiditate.
           </Accordion>
         </AccordionGroup>
       </div>
+
+      <div>
+        <strong class="block mb-s text-semibold">Unstyled</strong>
+        <p class="mb-m">
+          In some cases, we need a fully custom animated component which hides content.
+        </p>
+        <Accordion class="mb-xl" unstyled>
+          <template #header>
+            <p>Open details</p>
+          </template>
+          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi nostrum aspernatur nam earum vitae deleniti, odio atque esse sequi, in harum! Sint dolorum quis excepturi odio eum aspernatur aliquid harum.</p>
+        </Accordion>
+      </div>
     </Grid>
   </div>
 </template>

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/ExamplePalette.vue

@@ -75,6 +75,9 @@ import ExampleColor from './shared/ExampleColor.vue'
         <ExampleColor name="Accent" color="--light-color-accent" />
         <ExampleColor name="Bg Accent Lowered" color="--light-color-bg-accent-lowered" />
         <ExampleColor name="Bg Accent Raised" color="--light-color-bg-accent-raised" />
+        <!-- <div class="padder" />
+        <div class="w-50 block my-m mx-auto" style="height:64px;box-shadow:var(--light-box-shadow)" />
+        <div class="w-50 block my-m mx-auto" style="height:64px;box-shadow:var(--light-box-shadow-strong)" /> -->
       </Flex>
 
       <Flex class="theme-wrap dark" gap="xxs" column>
@@ -124,6 +127,9 @@ import ExampleColor from './shared/ExampleColor.vue'
         <ExampleColor name="Accent" color="--dark-color-accent" />
         <ExampleColor name="Bg Accent Lowered" color="--dark-color-bg-accent-lowered" />
         <ExampleColor name="Bg Accent Raised" color="--dark-color-bg-accent-raised" />
+        <!-- <div class="padder" />
+        <div class="w-50 block my-m mx-auto" style="height:64px;box-shadow:var(--dark-box-shadow)" />
+        <div class="w-50 block my-m mx-auto" style="height:64px;box-shadow:var(--dark-box-shadow-strong)" /> -->
       </Flex>
     </Grid>
   </div>

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/examples/ExampleTabs.vue

@@ -8,6 +8,7 @@ import Tabs from '../components/Tabs/Tabs.vue'
 // import Flex from '../components/Flex/Flex.vue'
 
 const activeTab = ref('Home')
+const noActiveNow = ref('')
 
 // Dynamic test
 const dynamicTabs = ref(['First', 'Second', 'Third'])
@@ -22,9 +23,9 @@ const activeDynamic = ref(dynamicTabs.value[0])
     <table>
       <tbody>
         <tr>
-          <th>Base</th>
+          <th>Base + nothing active at first</th>
           <td>
-            <Tabs v-model="activeTab">
+            <Tabs v-model="noActiveNow">
               <Tab value="Home" />
               <Tab value="About" />
               <Tab value="You" />

package/src/internal/Backdrop/backdrop.scss

@@ -3,7 +3,7 @@
 }
 
 .vui-backdrop {
-  z-index: 1000;
+  z-index: var(--z-overlay);
   position: fixed;
   display: block;
   width: 100dvw;
@@ -16,7 +16,7 @@
   &:after {
     content: '';
     position: fixed;
-    z-index: -1;
+    z-index: var(--z-behind);
     inset: 0;
     background-color: var(--color-bg-lowered);
     opacity: 0.75;

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}`
+}

package/src/style/animation.scss

@@ -1,6 +1,6 @@
 .fade-enter-active,
 .fade-leave-active {
-  transition: var(--transition);
+  transition: opacity 0.15s cubic-bezier(0.65, 0, 0.35, 1);
   will-change: opacity;
 }
 
@@ -9,14 +9,42 @@
   opacity: 0;
 }
 
-.fade-up-enter-active,
-.fade-up-leave-active {
+// Positioned fade-ins
+
+// Defaults
+.fade-top-enter-active,
+.fade-top-leave-active,
+.fade-bottom-enter-active,
+.fade-bottom-leave-active,
+.fade-right-enter-active,
+.fade-right-leave-active,
+.fade-left-enter-active,
+.fade-left-leave-active {
   transition: var(--transition);
   transition-property: transform, opacity;
 }
 
-.fade-up-enter-from,
-.fade-up-leave-to {
+// Specifics
+.fade-top-enter-from,
+.fade-top-leave-to {
+  opacity: 0;
+  transform: translateY(8px);
+}
+
+.fade-bottom-enter-from,
+.fade-bottom-leave-to {
   opacity: 0;
   transform: translateY(8px);
 }
+
+.fade-right-enter-from,
+.fade-right-leave-to {
+  opacity: 0;
+  transform: translateX(8px);
+}
+
+.fade-left-enter-from,
+.fade-left-leave-to {
+  opacity: 0;
+  transform: translateX(-8px);
+}

package/src/style/core.scss

@@ -5,6 +5,7 @@
 // To overwrite any of these styles, simply create a style file and import it
 // after this one
 @use './reset.scss';
+@use './fonts.scss';
 @use './theme.scss';
 
 :root {
@@ -25,7 +26,6 @@
   --font-size-xxs: 1rem;
   --font-size-xs: 1.15rem;
   --font-size-s: 1.3rem;
-  --font-size-m: 1.45rem;
   --font-size-m: 1.5rem;
   --font-size-l: 1.8rem;
   --font-size-xl: 2rem;
@@ -42,23 +42,37 @@
   --space-xxl: 48px;
   --space-xxxl: 64px;
 
-  --transition-fast: 0.075s all ease-in-out;
-  --transition: 0.15s all cubic-bezier(0.65, 0, 0.35, 1);
-  --transition-slow: 0.3s all cubic-bezier(0.65, 0, 0.35, 1);
+  --transition-fast: 0.055s all ease-in-out;
+  --transition: 0.1s all cubic-bezier(0.65, 0, 0.35, 1);
+  --transition-slow: 0.25s all cubic-bezier(0.65, 0, 0.35, 1);
 
-  --global-font: Inter, sans-serif;
-  --global-font-mono: 'Geist Mono', 'Courier New', Courier, monospace;
+  --global-font: 'Inter', sans-serif;
+  --global-font-mono: 'Geist Mono', 'Courier New', 'Courier', monospace;
 
-  --font-weight-thin: 200;
-  --font-weight-light: 300;
+  --font-weight: 300;
   --font-weight: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
-  --font-weight-extrabold: 700;
+  --font-weight-extrabold: 800;
   --font-weight-black: 900;
 
-  --interactive-el-height: 34px;
+  --line-height-tight: 1.125em;
+  --line-height-title: 1.25em;
+  --line-height-base: 1.4em;
+
+  --z-behind: -1;
+  --z-default: 1;
+  --z-active: 50;
+  --z-mask: 75;
+  --z-sticky: 100;
+  --z-nav: 200;
+  --z-overlay: 300;
+  --z-popout: 400;
+  --z-toast: 500;
+  --z-modal: 600;
+
+  --interactive-el-height: 36px;
 }
 
 // Disable motion for users who have requested it