@dolanske/vui 0.5.0 → 1.0.0

package/src/components/Calendar/Calendar.vue

@@ -3,6 +3,7 @@ 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'
 
@@ -11,8 +12,8 @@ const props = withDefaults(defineProps<VueDatePickerProps & {
 }>(), {
   autoApply: true,
   autoPosition: true,
-  dark: true,
   format: 'dd/MM/yyyy HH:mm',
+  monthNameFormat: 'long',
   expand: false,
 })
 
@@ -24,10 +25,12 @@ const attrs = useAttrs()
   <VueDatePicker
     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 {

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"

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);
-      }
     }
   }
 
@@ -43,10 +40,12 @@
     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 {
@@ -65,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);
         }
@@ -73,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

@@ -12,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

@@ -7,9 +7,9 @@
   width: 100%;
   height: var(--interactive-el-height);
   border-radius: var(--border-radius-m);
-  font-size: var(--font-size-s);
+  font-size: var(--font-size-m);
   cursor: default;
-  transition: var(--transition);
+  transition: var(--transition-fast);
   padding-inline: var(--space-s);
   white-space: nowrap;
   margin-bottom: 4px;
@@ -55,10 +55,17 @@
   }
 
   .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 {

package/src/components/Dropdown/dropdown.scss

@@ -1,6 +1,6 @@
 .vui-dropdown-trigger-wrap {
-  // display: inline-block;
-  width: fit-content;
+  // width: fit-content;
+  position: relative;
 }
 
 .vui-dropdown {
@@ -8,6 +8,7 @@
   border-radius: var(--border-radius-m);
   border: 1px solid var(--color-border);
   padding: 4px;
+  overflow-y: auto;
 }
 
 .vui-dropdown-title {
@@ -15,19 +16,26 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  padding-block: var(--space-s);
-  padding-inline: calc(var(--space-s) + 4px);
-  font-size: var(--font-size-ms);
+  padding-block: var(--space-xs);
+  padding-inline: calc(var(--space-xs) + 8px);
+  font-size: var(--font-size-m);
   border-bottom: 1px solid var(--color-border);
-  font-weight: 500;
-  // margin-block: 4px;
+  font-weight: var(--font-weight-semibold);
   margin-inline: -4px;
   margin-top: -4px;
   margin-bottom: 4px;
   gap: var(--space-m);
   justify-content: space-between;
+  background-color: var(--color-bg-medium);
+  z-index: 50;
+
+  &.sticky {
+    position: sticky;
+    top: -4px;
+  }
 
   &:not(:first-child) {
+    margin-top: 4px;
     border-top: 1px solid var(--color-border);
   }
 
@@ -37,3 +45,9 @@
     color: var(--color-text-lighter);
   }
 }
+
+:root.light {
+  .vui-dropdown-title {
+    background-color: var(--color-bg);
+  }
+}

package/src/components/Grid/Grid.vue

@@ -12,7 +12,13 @@ interface Props {
   gap?: Space | number
   rows?: number | string
   columns?: number | string
-  areas?: string[]
+  // areas?: string[]
+
+  // NOTE: Add more if needed
+  alignCenter?: boolean
+  alignStart?: boolean
+  alignEnd?: boolean
+  alignBaseline?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -43,6 +49,18 @@ const aTR = computed(() => {
   return props.rows ?? 'none'
 })
 
+const aA = computed(() => {
+  if (props.alignStart)
+    return 'flex-start'
+  else if (props.alignEnd)
+    return 'flex-end'
+  else if (props.alignCenter)
+    return 'center'
+  else if (props.alignBaseline)
+    return 'baseline'
+  return 'flex-start'
+})
+
 const aD = computed(() => props.inline ? 'inline-grid' : 'grid')
 </script>
 
@@ -53,6 +71,8 @@ const aD = computed(() => props.inline ? 'inline-grid' : 'grid')
       gap: ag,
       gridTemplateColumns: aTC,
       gridTemplateRows: aTR,
+      alignItems: aA,
+
     }"
   >
     <slot />

package/src/components/Input/Color.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { InputProps } from './Input.vue'
+import { Icon } from '@iconify/vue'
+import { useAttrs, useId } from 'vue'
+import Input from './Input.vue'
+
+const props = defineProps<InputProps>()
+
+const attrs = useAttrs()
+const color = defineModel<string>()
+const id = useId()
+</script>
+
+<template>
+  <Input v-bind="{ ...attrs, ...props }" type="color" class="vui-input-color">
+    <template #__internal_replace_input>
+      <input :id v-model="color" type="color" tabindex="0">
+      <label :for="id">
+        <div class="vui-input-color-indicator" :style="{ backgroundColor: color }">
+          <Icon v-if="!color" icon="ph:palette" />
+        </div>
+        <input v-model="color" type="text" :placeholder="props.placeholder">
+      </label>
+    </template>
+  </Input>
+</template>

package/src/components/Input/Counter.vue

@@ -2,6 +2,7 @@
 import type { InputProps } from './Input.vue'
 import { Icon } from '@iconify/vue'
 import Button from '../Button/Button.vue'
+import ButtonGroup from '../ButtonGroup/ButtonGroup.vue'
 import Input from './Input.vue'
 
 type Props = Omit<InputProps, 'type'> & {
@@ -30,33 +31,28 @@ const count = defineModel<number>({
 
 <template>
   <Input v-bind="inputProps" v-model.number="count" type="number">
-    <template v-if="!hideDecrement" #start>
-      <Button key="decrease" :disabled="!decrementEnabled" size="s" @click="count -= decrementBy">
-        <Icon icon="ph:minus" /> {{ decrementBy > 1 ? decrementBy : '' }}
-      </Button>
-    </template>
+    <!-- <template v-if="!hideDecrement" #start>
+    </template> -->
 
-    <template v-if="!hideIncrement" #end>
-      <Button key="increase" :disabled="!incrementEnabled" size="s" @click="count += incrementBy">
-        <Icon icon="ph:plus" /> {{ incrementBy > 1 ? incrementBy : '' }}
-      </Button>
+    <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">
+          <Icon icon="ph:minus" /> {{ decrementBy > 1 ? decrementBy : '' }}
+        </Button>
+        <Button v-if="!hideIncrement" key="increase" :disabled="!incrementEnabled" @click="count += incrementBy">
+          <Icon icon="ph:plus" /> {{ incrementBy > 1 ? incrementBy : '' }}
+        </Button>
+      </ButtonGroup>
     </template>
   </Input>
 </template>
 
 <style scoped lang="scss">
-:deep(.vui-input-style) {
-  padding-inline: 4px !important;
-  gap: 8px !important;
-}
-
 :deep(.vui-button) {
   padding-inline: 2px !important;
 }
 
 :deep(input) {
-  text-align: center;
-
   ::-webkit-outer-spin-button,
   ::-webkit-inner-spin-button {
     -webkit-appearance: none;