@dolanske/vui 1.3.0 → 1.4.0

package/LICENSE

@@ -671,4 +671,4 @@ into proprietary programs.  If your program is a subroutine library, you
 may consider it more useful to permit linking proprietary applications with
 the library.  If this is what you want to do, use the GNU Lesser General
 Public License instead of this License.  But first, please read
-<https://www.gnu.org/licenses/why-not-lgpl.html>.
+<https://www.gnu.org/licenses/why-not-lgpl.html>.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dolanske/vui",
   "type": "module",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "private": false,
   "description": "Brother in Christ there's a new UI library",
   "author": "dolanske",
@@ -9,7 +9,7 @@
   "sass": "src/index.scss",
   "repository": {
     "type": "git",
-    "url": "https://github.com/dolanske/vui.git"
+    "url": "git+https://github.com/dolanske/vui.git"
   },
   "keywords": [
     "vue",

package/src/App.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import Card from './components/Card/Card.vue'
 import Divider from './components/Divider/Divider.vue'
 import ExampleAccordions from './examples/ExampleAccordions.vue'
 import ExampleAlerts from './examples/ExampleAlerts.vue'
@@ -35,6 +36,13 @@ import ExampleTooltips from './examples/ExampleTooltips.vue'
       <h1 class="mb-l">
         VUI
       </h1>
+
+      <Card class="typeface">
+        <pre><code>export function removeColorPrefix(value: string): string {
+  return value.replace('--dark', '--').replace('--light', '--')
+}</code></pre>
+      </Card>
+
       <p>The purpose of this page is to showcase and test every single component case</p>
       <Divider :size="64" />
       <ExamplePalette />

package/src/components/Accordion/Accordion.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
 import { useResizeObserver } from '@vueuse/core'
-import { onMounted, ref, useTemplateRef, watch, watchEffect } from 'vue'
+import { onBeforeMount, onMounted, ref, useTemplateRef, watch, watchEffect } from 'vue'
 import './accordion.scss'
 
 export interface AccordionProps {
   open?: boolean
   label?: string
   card?: boolean
+  unstyled?: boolean
 }
 
 const props = defineProps<AccordionProps>()
@@ -58,6 +59,12 @@ defineExpose({
   isOpen,
 })
 
+onBeforeMount(() => {
+  if (props.card && props.unstyled) {
+    console.warn('[Accordion] Both \'card\' and \'unstyled\' props are selected. Unstyled will take precedence.')
+  }
+})
+
 onMounted(() => {
   useResizeObserver(contentRef, ([entry]) => {
     if (isOpen.value && contentMaxHeight.value !== entry.contentRect.height) {
@@ -68,14 +75,14 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="vui-accordion" :class="{ 'open': isOpen, 'is-card': !!props.card }">
+  <div class="vui-accordion" :class="{ 'open': isOpen, 'is-card': !!props.card && !props.unstyled, 'is-unstyled': !!props.unstyled }">
     <!-- Completely custom header which needs to be styled and implemented by the developer -->
     <slot v-if="$slots.trigger" name="trigger" :open :close :toggle :is-open />
     <button v-else class="vui-accordion-header" @click="isOpen = !isOpen">
       <slot name="header">
         {{ props.label }}
       </slot>
-      <Icon icon="ph:caret-down" />
+      <Icon v-if="!props.unstyled" icon="ph:caret-down" />
     </button>
 
     <div

package/src/components/Accordion/accordion.scss

@@ -4,6 +4,19 @@
   border-bottom: 1px solid var(--color-border);
   padding-bottom: 0;
 
+  &.is-unstyled {
+    border-bottom: none;
+
+    .vui-accordion-header {
+      padding: unset;
+      text-decoration: unset;
+
+      &:hover {
+        text-decoration: unset;
+      }
+    }
+  }
+
   &.is-card {
     border: 1px solid var(--color-border);
     border-radius: var(--border-radius-m);
@@ -37,10 +50,12 @@
   }
 
   &.open {
-    padding-bottom: var(--space-m);
+    &:not(.is-unstyled) {
+      padding-bottom: var(--space-m);
 
-    .vui-accordion-header svg {
-      transform: rotate(180deg);
+      .vui-accordion-header svg {
+        transform: rotate(180deg);
+      }
     }
 
     .vui-accordion-content {

package/src/components/Button/Button.vue

@@ -2,6 +2,7 @@
 import type { Sizes } from '../../shared/types'
 import { Icon } from '@iconify/vue'
 import { computed } from 'vue'
+import { isNil } from '../../shared/helpers'
 import { Size } from '../../shared/types'
 import Spinner from '../Spinner/Spinner.vue'
 import './button.scss'
@@ -42,7 +43,7 @@ const {
 const height = computed(() => {
   switch (size) {
     case Size.s: return '28px'
-    case Size.l: return '40px'
+    case Size.l: return '42px'
     case Size.m:
     default: return 'var(--interactive-el-height)'
   }
@@ -51,7 +52,7 @@ const height = computed(() => {
 const padding = computed(() => {
   switch (size) {
     case Size.s: return '4px'
-    case Size.l: return '16px'
+    case Size.l: return '18px'
     case Size.m:
     default: return '8px'
   }
@@ -61,7 +62,7 @@ const padding = computed(() => {
 <template>
   <button
     class="vui-button"
-    :class="[{ loading, expand, disabled, plain, icon, square, outline }, `vui-button-variant-${variant}`]"
+    :class="[{ loading, expand, disabled, plain, icon, square, outline }, `vui-button-variant-${variant}`, `vui-button-size-${size}`]"
     :disabled
     role="button"
     :style="{
@@ -70,7 +71,7 @@ const padding = computed(() => {
     }"
     :name="icon && !$slots.default ? icon.split(':')[1] : undefined"
   >
-    <Spinner size="s" />
+    <Spinner v-if="!isNil(loading)" size="s" />
     <div class="vui-button-slot">
       <div class="vui-button-slot-start">
         <slot name="start" />

package/src/components/Button/button.scss

@@ -1,6 +1,8 @@
 .vui-button {
   --button-height: var(--interactive-el-height);
   --button-padding: 8px;
+  --button-font-size: var(--font-size-s);
+  --button-font-size-l: 1.4rem;
 
   &.disabled {
     // color: var(--color-text-lighter) !important;
@@ -49,6 +51,10 @@
     border-style: dashed !important;
   }
 
+  &.vui-button-size-l {
+    font-size: var(--button-font-size-l);
+  }
+
   svg path {
     transition: var(--transition-fast);
   }
@@ -60,12 +66,13 @@
   border-radius: var(--border-radius-s);
   background: transparent;
   padding-inline: var(--button-padding);
-  font-size: var(--font-size-s);
+  font-size: var(--button-font-size);
   position: relative;
   transition: var(--transition-fast);
   border: 1px solid transparent;
   background-color: transparent;
   color: var(--color-text);
+  font-weight: var(--font-weight-medium);
 
   // Default gray
 
@@ -74,6 +81,7 @@
     place-items: center;
     transition: var(--transition-fast);
     opacity: 1;
+    font-weight: var(--font-weight-medium);
   }
 
   .vui-button-slot-start,

package/src/components/ButtonGroup/button-group.scss

@@ -1,9 +1,9 @@
 .vui-button-group {
   .vui-button {
-    z-index: 1;
+    z-index: var(--z-default);
 
     &:hover {
-      z-index: 2;
+      z-index: var(--z-active);
     }
 
     &:not(:first-child, :last-child) {

package/src/components/Calendar/calendar.scss

@@ -64,6 +64,11 @@
 
 .dp__main {
   font-size: var(--font-size-m);
+  font-weight: var(--font-weight);
+}
+
+.dp__btn {
+  font-weight: var(--font-medium);
 }
 
 .dp__outer_menu_wrap {

package/src/components/Card/Card.vue

@@ -27,7 +27,7 @@ const {
     }"
   >
     <div v-if="$slots.header || $slots['header-end']" class="vui-card-header">
-      <div>
+      <div class="flex-1">
         <slot name="header" />
       </div>
       <slot name="header-end" />

package/src/components/CopyClipboard/copy-clipboard.scss

@@ -10,7 +10,7 @@
   font-size: var(--font-size-m);
   color: var(--color-text);
   box-shadow: var(--box-shadow);
-  z-index: 1000;
+  z-index: var(--z-popout);
 
   svg path {
     color: var(--color-text);

package/src/components/Dropdown/dropdown-item.scss

@@ -33,7 +33,7 @@
     .vui-dropdown-item-hint {
       visibility: hidden;
       opacity: 0;
-      z-index: -1;
+      z-index: var(--z-behind);
     }
   }
 

package/src/components/Dropdown/dropdown.scss

@@ -27,7 +27,7 @@
   gap: var(--space-m);
   justify-content: space-between;
   background-color: var(--color-bg-medium);
-  z-index: 50;
+  z-index: var(--z-popout);
 
   &.sticky {
     position: sticky;
@@ -41,7 +41,7 @@
 
   .vui-dropdown-title-end {
     font-size: var(--font-size-s);
-    font-weight: 400;
+    font-weight: var(--font-weight);
     color: var(--color-text-lighter);
   }
 }

package/src/components/Grid/Grid.vue

@@ -19,6 +19,7 @@ interface Props {
   yStart?: boolean
   yEnd?: boolean
   yBaseline?: boolean
+  yStretch?: boolean
 
   expand?: boolean
 }
@@ -60,6 +61,8 @@ const aA = computed(() => {
     return 'center'
   else if (props.yBaseline)
     return 'baseline'
+  else if (props.yStretch)
+    return 'stretch'
   return 'flex-start'
 })
 

package/src/components/Input/input.scss

@@ -44,7 +44,7 @@
     input,
     textarea,
     .vui-input-style {
-      pointer-events: none;
+      // pointer-events: none;
       color: var(--input-color-text-light);
       border-color: var(--input-color-border-weak);
       resize: none !important;
@@ -92,7 +92,7 @@
     }
 
     ::placeholder {
-      font-weight: 400;
+      font-weight: var(--font-weight);
       color: var(--color-text-lighter);
       font-family: var(--global-font);
     }
@@ -111,7 +111,7 @@
       width: 100%;
       transition: var(--transition-fast);
       padding-inline: var(--input-padding);
-      z-index: 1;
+      z-index: var(--z-default);
 
       &:has(input:focus),
       &:focus {

package/src/components/OTP/otp.scss

@@ -14,7 +14,7 @@
       height: var(--interactive-el-height);
       border: 1px solid var(--color-border-strong);
       color: var(--color-text);
-      z-index: 1;
+      z-index: var(--z-default);
       font-size: var(--font-size-m);
       outline: 0 solid var(--color-text-light);
       transition: var(--transition-fast);
@@ -49,7 +49,7 @@
       }
 
       &.active {
-        z-index: 2;
+        z-index: var(--z-active);
         outline-width: 2px;
 
         .blinker {
@@ -79,6 +79,6 @@
     outline-width: 0px;
     opacity: 0;
     background: transparent;
-    z-index: 5;
+    z-index: var(--z-mask);
   }
 }

package/src/components/Popout/popout.scss

@@ -4,7 +4,7 @@
   min-width: 80px;
   background-color: var(--color-bg-medium);
   border-radius: var(--border-radius-m);
-  z-index: 1000;
+  z-index: var(--z-popout);
   position: fixed;
 }
 

package/src/components/Progress/progress.scss

@@ -30,7 +30,7 @@
 
   .vui-progress-indicator {
     position: absolute;
-    z-index: 4;
+    z-index: var(--z-active);
     inset: 0;
     right: unset;
     width: 0;

package/src/components/Select/Select.vue

@@ -186,6 +186,8 @@ const id = useId()
           :class="{ selected: selected?.find(v => v.value === option.value) }"
           :icon="selected?.find(v => v.value === option.value) ? 'ph:check-bold' : ''"
           @click="() => {
+            if (readonly) return
+
             setValue(option)
             // In single mode, close modal after clicking
             if (single && !(required && selected && selected[0].value === option.value)) {

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/table.scss

@@ -79,7 +79,7 @@
       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 {
@@ -115,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);

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/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/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/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/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