@dolanske/vui 0.4.0 → 1.0.0

package/src/components/Calendar/Calendar.vue

@@ -2,6 +2,8 @@
 import type { VueDatePickerProps } from '@vuepic/vue-datepicker'
 import { Icon } from '@iconify/vue'
 import VueDatePicker from '@vuepic/vue-datepicker'
+import { useAttrs } from 'vue'
+import { theme } from '../../shared/theme'
 import '@vuepic/vue-datepicker/dist/main.css'
 import './calendar.scss'
 
@@ -10,21 +12,25 @@ const props = withDefaults(defineProps<VueDatePickerProps & {
 }>(), {
   autoApply: true,
   autoPosition: true,
-  dark: true,
   format: 'dd/MM/yyyy HH:mm',
+  monthNameFormat: 'long',
   expand: false,
 })
 
 const ICON_SIZE = 18
+const attrs = useAttrs()
 </script>
 
 <template>
   <VueDatePicker
-    v-bind="props"
-    :style="props.expand || !$slots.trigger
+    v-bind="{ ...props, ...attrs }"
+    class="vui-calendar"
+    :class="{ 'vui-calendar-inline': props.inline }"
+    :style="props.expand ?? !$slots.trigger
       ? undefined
       : { display: 'inline-block', width: 'auto' }
     "
+    :dark="theme === 'dark'"
   >
     <!-- Icon slots -->
     <template #input-icon>

package/src/components/Calendar/calendar.scss

@@ -1,3 +1,4 @@
+.dp__theme_light,
 .dp__theme_dark {
   --dp-background-color: var(--color-bg);
   --dp-text-color: var(--color-text);
@@ -28,19 +29,41 @@
   --dp-range-between-border-color: var(--dp-hover-color, #fff);
 }
 
+// TODO: dp theme light
+
+.dp__theme_light {
+  --dp-primary-text-color: var(--color-text);
+}
+
 :root {
   --dp-font-family: var(--global-font);
   --dp-border-radius: var(--border-radius-s);
   --dp-cell-border-radius: var(--border-radius-s);
   --dp-common-transition: var(--transition);
 
-  --dp-font-size: var(--font-size-ms);
+  --dp-font-size: var(--font-size-m);
   --dp-preview-font-size: var(--font-size-s);
   --dp-time-font-size: var(--font-size-s);
 }
 
+.vui-calendar-inline {
+  .dp__outer_menu_wrap {
+    box-shadow: none;
+  }
+
+  .dp__menu {
+    border: none;
+  }
+}
+
+.dp__overlay_cell_pad {
+  font-size: var(--font-size-m);
+  text-transform: capitalize;
+  font-weight: var(--font-weight-medium);
+}
+
 .dp__main {
-  font-size: var(--n-font-size-m);
+  font-size: var(--font-size-m);
 }
 
 .dp__outer_menu_wrap {
@@ -54,3 +77,7 @@
 .dp--clear-btn {
   inset-inline-end: 8px;
 }
+
+.dp__input {
+  height: var(--interactive-el-height);
+}

package/src/components/Card/Card.vue

@@ -33,13 +33,13 @@ const {
       <slot name="header-end" />
     </div>
 
-    <Divider v-if="(separators || headerSeparator) && ($slots.header || $slots['header-end'])" :space="1" />
+    <Divider v-if="(separators || headerSeparator) && ($slots.header || $slots['header-end'])" :size="1" />
 
     <div v-if="$slots.default" class="vui-card-content">
       <slot />
     </div>
 
-    <Divider v-if="(separators || footerSeparator) && $slots.footer" :space="1" />
+    <Divider v-if="(separators || footerSeparator) && $slots.footer" :size="1" />
 
     <div v-if="$slots.footer" class="vui-card-footer">
       <slot name="footer" />

package/src/components/Card/card.scss

@@ -12,9 +12,9 @@
   }
 
   &:not(.separators) {
-    .vui-card-content:not(:first-child) {
-      padding-block: var(--space-xs);
-    }
+    // &:not(.header-separator) .vui-card-content:first-child {
+    //   padding-bottom: var(--space-xs);
+    // }
 
     &.header-separator {
       .vui-card-content:not(:first-child) {
@@ -32,7 +32,7 @@
 
   .vui-card-header {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     justify-content: space-between;
     padding: var(--space-s) var(--space-m);
     background-color: var(--color-bg);

package/src/components/Checkbox/Checkbox.vue

@@ -9,14 +9,17 @@ interface Props {
   iconOff?: string
   disabled?: boolean
   checked?: boolean
+  accent?: boolean
 }
 
 const {
   label,
+  // iconOn = theme.value === 'light' ? 'ph:check-square-fill' : 'ph:check-square',
   iconOn = 'ph:check-square-fill',
   iconOff = 'ph:square',
   disabled,
   checked: checkedProp,
+  accent,
 } = defineProps<Props>()
 const emit = defineEmits<{
   change: [checked: boolean]
@@ -27,7 +30,7 @@ const id = useId()
 </script>
 
 <template>
-  <div class="vui-checkbox" :class="{ disabled: !!disabled, checked }">
+  <div class="vui-checkbox" :class="{ disabled: !!disabled, checked, accent }">
     <input
       :id
       v-model="checked"
@@ -43,10 +46,9 @@ const id = useId()
       <span class="vui-checkbox-icon">
         <Icon :icon="checked ? iconOn : iconOff" />
       </span>
-      <p v-if="label" class="vui-checkbox-content">{{ label }}</p>
-      <div v-else-if="slots.default" class="vui-checkbox-content">
-        <slot />
-      </div>
+      <p v-if="label || slots.default" class="vui-checkbox-content">
+        <slot>{{ label }}</slot>
+      </p>
     </label>
   </div>
 </template>

package/src/components/Checkbox/checkbox.scss

@@ -5,24 +5,21 @@
     .vui-checkbox-icon svg {
       color: var(--color-text);
     }
+
+    &.accent .vui-checkbox-icon svg {
+      color: var(--color-accent);
+    }
   }
 
   &.disabled {
-    cursor: not-allowed;
-
     .vui-checkbox-icon {
-      pointer-events: none;
-      svg path {
-        color: var(--color-text-lighter);
-      }
+      opacity: 0.25;
+      cursor: not-allowed;
     }
 
-    input + label {
+    input + label .vui-checkbox-content {
+      opacity: 0.4;
       cursor: not-allowed;
-
-      p {
-        color: var(--color-text-lighter);
-      }
     }
   }
 
@@ -38,7 +35,18 @@
   }
 
   input {
-    display: none;
+    width: 1px;
+    height: 1px;
+    position: absolute;
+    overflow: hidden;
+    outline: none !important;
+    opacity: 0;
+
+    &:focus-visible + label .vui-checkbox-icon {
+      outline: 2px solid var(--color-text);
+      border-radius: var(--border-radius-s);
+      cursor: default;
+    }
 
     & + label {
       display: grid;
@@ -56,7 +64,7 @@
           display: flex;
           align-items: center;
           min-height: var(--checkbox-size);
-          font-size: var(--font-size-ms);
+          font-size: var(--font-size-m);
           align-self: flex-start;
           // line-height: var(--checkbox-size);
         }
@@ -64,3 +72,9 @@
     }
   }
 }
+
+:root.light {
+  .vui-checkbox.checked.accent .vui-checkbox-icon svg {
+    color: var(--color-accent);
+  }
+}

package/src/components/CopyClipboard/CopyClipboard.vue

@@ -2,7 +2,8 @@
 import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
 import { Icon } from '@iconify/vue'
 import { useClipboard } from '@vueuse/core'
-import { onMounted, useSlots, useTemplateRef } from 'vue'
+import { computed, onMounted, useSlots, useTemplateRef } from 'vue'
+import { isNil } from '../../shared/helpers'
 import Flex from '../Flex/Flex.vue'
 import './copy-clipboard.scss'
 
@@ -36,13 +37,21 @@ const {
 })
 const slots = useSlots()
 
+const parsedConfirm = computed(() => {
+  if (isNil(confirm))
+    return false
+  if (confirm === '')
+    return true
+  else return confirm
+})
+
 onMounted(() => {
   if (!isSupported.value) {
     console.error('Clipboard API is not supported. This component will not work')
   }
 
-  if (confirm && slots.confirm) {
-    console.warn('You are using the \'confirm\' prop and slot. The slot will take precedence.')
+  if (typeof parsedConfirm.value === 'string' && slots.confirm) {
+    console.warn('[ClipBoard] You are using the \'confirm\' prop and slot. The slot will take precedence.')
   }
 })
 
@@ -67,10 +76,10 @@ const { floatingStyles } = useFloating(anchorRef, tooltipRef, {
   </div>
 
   <Transition name="fade-up" mode="in-out">
-    <div v-if="copied && (confirm || $slots.confirm)" ref="tooltip" class="vui-clipboard-tooltip" :style="floatingStyles">
+    <div v-if="copied && (!!parsedConfirm || $slots.confirm)" ref="tooltip" class="vui-clipboard-tooltip" :style="floatingStyles">
       <slot name="confirm">
-        <template v-if="confirm">
-          {{ confirm }}
+        <template v-if="typeof parsedConfirm === 'string'">
+          {{ parsedConfirm }}
         </template>
         <Flex v-else align-center justify-center>
           <Icon width="16" height="16" icon="ph:check-bold" />

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

@@ -7,11 +7,19 @@
   padding: 6px 8px;
   border-radius: var(--border-radius-s);
   background-color: var(--color-bg-raised);
-  font-size: var(--font-size-s);
-  color: var(--color-text-light);
+  font-size: var(--font-size-m);
+  color: var(--color-text);
   box-shadow: var(--box-shadow);
+  z-index: 1000;
 
   svg path {
     color: var(--color-text);
   }
 }
+
+:root.light {
+  .vui-clipboard-tooltip {
+    background-color: var(--color-bg);
+    box-shadow: var(--box-shadow-strong);
+  }
+}

package/src/components/Drawer/Drawer.vue

@@ -45,7 +45,7 @@ const open = defineModel<boolean>()
 
 const mW = computed(() => {
   if (typeof containerSize === 'string') {
-    if (containerClass === 'full') {
+    if (containerSize === 'full') {
       return '100%'
     }
     else {
@@ -61,7 +61,7 @@ const mW = computed(() => {
 const id = useId()
 
 onMounted(() => {
-  if (!document.querySelector('vaul-drawer-wrapper')) {
+  if (!document.querySelector('[vaul-drawer-wrapper]')) {
     console.error('Your root component is missing \'vaul-drawer-wrapper\' attribute. \n Without it the <Drawer /> component will not be functional.')
   }
 })
@@ -70,14 +70,14 @@ onMounted(() => {
 <template>
   <DrawerRoot
     :open
-    should-scale-background
     v-bind="rootProps"
+    :aria-describedby="id"
     @close="open = false"
     @update:open="(state) => open = state"
   >
     <DrawerPortal v-bind="portalProps">
       <DrawerOverlay class="vui-drawer-overlay" />
-      <DrawerContent class="vui-drawer-content" :class="{ 'hide-handle': handle === false }" :aria-describedby="id">
+      <DrawerContent class="vui-drawer-content" :class="{ 'hide-handle': handle === false }">
         <div :key="mW" class="vui-drawer-container container" :class="containerClass" :style="{ 'max-width': mW }">
           <DrawerTitle class="visually-hidden" :name="id">
             {{ title }}

package/src/components/Drawer/drawer.scss

@@ -10,6 +10,7 @@
   bottom: 0;
   left: 0;
   right: 0;
+  box-shadow: var(--box-shadow);
 
   &.hide-handle:before {
     display: none;

package/src/components/Dropdown/Dropdown.vue

@@ -1,8 +1,8 @@
 <script setup lang='ts'>
 import type { MaybeElement } from '@vueuse/core'
 import type { Placement } from '../../shared/types'
-import { onClickOutside } from '@vueuse/core'
-import { computed, ref, useTemplateRef } from 'vue'
+import { onClickOutside, useMagicKeys, whenever } from '@vueuse/core'
+import { computed, onMounted, ref, useTemplateRef, watch } from 'vue'
 import { formatUnitValue } from '../../shared/helpers'
 import Popout from '../Popout/Popout.vue'
 import './dropdown.scss'
@@ -20,14 +20,24 @@ export interface Props {
    * Sets the width of the dropdown to the width of its anchor
    */
   expand?: boolean
+
+  /**
+   * Set he max height of the dropdown element before it starts scrolling
+   */
+  maxHeight?: number | string
 }
 
 const {
   placement = 'bottom-start',
+  maxHeight = 356,
   expand,
   minWidth = 156,
 } = defineProps<Props>()
 
+const emit = defineEmits<{
+  close: []
+}>()
+
 const anchorRef = useTemplateRef<HTMLDivElement>('anchor')
 const dropdownRef = useTemplateRef<MaybeElement>('dropdown')
 
@@ -67,6 +77,19 @@ defineExpose({
 
 const mW = computed(() => formatUnitValue(minWidth))
 const w = computed(() => expand ? `${anchorWidth.value}px` : 'initial')
+
+const { escape } = useMagicKeys()
+whenever(escape, close)
+
+watch(showMenu, (v) => {
+  if (!v)
+    emit('close')
+})
+
+onMounted(() => {
+  if (expand && minWidth !== 156)
+    console.warn('[Dropdown] Dropdown: minWidth prop is ignored when expand is set to true')
+})
 </script>
 
 <template>
@@ -81,31 +104,32 @@ const w = computed(() => expand ? `${anchorWidth.value}px` : 'initial')
     <slot name="trigger" :open :is-open="showMenu" :close :toggle />
   </div>
 
-  <Transition appear name="dropdown">
-    <Popout
-      v-if="showMenu"
-      ref="dropdown"
-      :anchor="anchorRef"
-      class="vui-dropdown"
-      :placement
-      :style="{
-        minWidth: mW,
-        width: w,
-      }"
-    >
-      <slot :open :close :toggle :is-open="showMenu" />
-    </Popout>
-  </Transition>
+  <!-- <Transition name="dropdown" mode="out-in"> -->
+  <Popout
+    v-if="showMenu"
+    ref="dropdown"
+    :anchor="anchorRef"
+    class="vui-dropdown"
+    :placement
+    :style="{
+      minWidth: expand ? w : mW,
+      width: w,
+      maxHeight: formatUnitValue(maxHeight),
+    }"
+  >
+    <slot :open :close :toggle :is-open="showMenu" />
+  </Popout>
+  <!-- </Transition> -->
 </template>
 
-<style scoped lang="scss">
+<!-- <style scoped lang="scss">
 .dropdown-enter-active,
 .dropdown-leave-active {
-  transition: 0.1s opacity ease-in-out;
+  transition: var(--transition-fast);
 }
 
 .dropdown-enter-from,
 .dropdown-leave-to {
   opacity: 0;
 }
-</style>
+</style> -->

package/src/components/Dropdown/DropdownItem.vue

@@ -1,5 +1,6 @@
 <script setup lang='ts'>
 import { Icon } from '@iconify/vue'
+import './dropdown-item.scss'
 
 interface Props {
   disabled?: boolean
@@ -11,17 +12,17 @@ const props = defineProps<Props>()
 </script>
 
 <template>
-  <button class="vui-dropdown-item" :class="{ disabled }">
+  <button class="vui-dropdown-item" :class="{ disabled }" :disabled>
     <!-- This should always be here to offset items which dont have icons -->
-    <div class="vui-dropdown-item-icon">
-      <Icon v-if="props.icon" :icon="props.icon" />
+    <div v-if="props.icon" class="vui-dropdown-item-icon">
+      <Icon :icon="props.icon" />
     </div>
 
     <div class="vui-dropdown-item-slot">
       <slot />
     </div>
 
-    <div class="vui-dropdown-item-hint">
+    <div v-if="$slots.hint" class="vui-dropdown-item-hint">
       <slot name="hint" />
     </div>
 

package/src/components/Dropdown/DropdownTitle.vue

@@ -1,5 +1,11 @@
+<script lang="ts" setup>
+const { sticky } = defineProps<{
+  sticky?: boolean
+}>()
+</script>
+
 <template>
-  <div class="vui-dropdown-title">
+  <div class="vui-dropdown-title" :class="{ sticky }">
     <slot />
     <div v-if="$slots.end" class="vui-dropdown-title-end">
       <slot name="end" />

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

@@ -0,0 +1,84 @@
+.vui-dropdown-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: fit-content;
+  gap: var(--space-xs);
+  width: 100%;
+  height: var(--interactive-el-height);
+  border-radius: var(--border-radius-m);
+  font-size: var(--font-size-m);
+  cursor: default;
+  transition: var(--transition-fast);
+  padding-inline: var(--space-s);
+  white-space: nowrap;
+  margin-bottom: 4px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &.disabled {
+    pointer-events: none;
+
+    &:hover {
+      background-color: transparent;
+    }
+
+    .vui-dropdown-item-slot,
+    .vui-dropdown-item-icon svg path {
+      color: var(--color-text-lighter);
+    }
+
+    .vui-dropdown-item-hint {
+      visibility: hidden;
+      opacity: 0;
+      z-index: -1;
+    }
+  }
+
+  .vui-dropdown-item-icon {
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      width: 16px;
+      height: 16px;
+
+      path {
+        color: var(--color-text-light);
+      }
+    }
+  }
+
+  .vui-dropdown-item-hint {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    margin-left: 8px;
+    font-size: 0.9rem;
+    // white-space: nowrap;
+    color: var(--color-text-lighter);
+
+    svg {
+      color: var(--color-text-lighter);
+    }
+  }
+
+  .vui-dropdown-item-slot {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    color: var(--color-text);
+    flex-wrap: nowrap;
+  }
+
+  &.selected,
+  &:hover {
+    background-color: var(--color-button-gray-hover);
+  }
+}