@dolanske/vui 1.2.1 → 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/README.md

@@ -6,37 +6,14 @@
 
 ---
 
-## 1.0 Checklist
-
-- [ ] Real life test
-  - [x] Might be useful to build this in the hivecom project
-  - [x] Build an example page with 100% of the components
-  - [x] Run accessibility tools on it
-  - [x] Run color contrast test
-  - [ ] Make sure it works on mobile down to 340px
-    - [ ] Components
-    - [ ] Scale down Typography
-- [x] Sidebar
-
----
-
-### Post 1.2 components
+## TODO
 
+- [ ] Bump target from ES2022 whenever vite-plugin-dts is fixed
 - [ ] Carousel (slider)
 - [ ] CodeBlock
   - [ ] Code highlighting
   - [ ] Copy code
   - [ ] Type, padding, etc
   - [ ] Use this https://shiki.style/guide/install
-- [ ] Command dropdown
-- [ ] Documentation
-  - [ ] Design my own documentation site (GENERIC?!)
-  - [ ] Pages
-    - [ ] CSS variable setup, accent, fonts
-    - [ ] CSS helpers
-    - [ ] Components
-    - [ ] Typography page
-
-### Whenever
-
-- [ ] Bump target from ES2022 whenever vite-plugin-dts is fixed
+- [ ] Command menu
+- [ ] Documentation site using my own template

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dolanske/vui",
   "type": "module",
-  "version": "1.2.1",
+  "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/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/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.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/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/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/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/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

@@ -4,7 +4,8 @@
   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;
 }
 
 :root.light {

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)) {