@dolanske/vui 0.4.0 → 1.0.0

package/src/components/Modal/Confirm.vue

@@ -20,7 +20,7 @@ const props = withDefaults(defineProps<Props>(), {
   size: 's',
   canDismiss: true,
   showCancel: true,
-  confirmVariant: 'default',
+  confirmVariant: 'gray',
 })
 
 const emits = defineEmits<{

package/src/components/Modal/Modal.vue

@@ -8,7 +8,7 @@ import Card from '../Card/Card.vue'
 import './modal.scss'
 
 export interface ModalProps {
-  size?: Sizes | 'full'
+  size?: Sizes | 'full' | 'screen'
   /**
    * Modal wraps a floating card. You can optinally pass in any props you'd pass
    * into the <Card /> component.
@@ -43,32 +43,40 @@ function close() {
 }
 
 const attrs = useAttrs()
+
+function tryClose() {
+  if (canDismiss) {
+    close()
+  }
+}
 </script>
 
 <template>
   <Teleport to="body">
     <Transition appear name="modal">
-      <Backdrop v-if="open" @close="close">
-        <div class="vui-modal" :class="[`vui-modal-size-${size}`, { scrollable, centered }]" v-bind="attrs">
-          <Button
-            v-if="canDismiss"
-            class="vui-modal-close"
-            plain
-            square
-            icon="ph:x"
-            @click="open = false"
-          />
+      <Backdrop v-if="open" :class="{ 'p-0': size === 'screen' }" @close="tryClose">
+        <div class="vui-modal" :class="[`vui-modal-size-${size}`, { scrollable: scrollable || size === 'screen', centered }]" v-bind="attrs" @click.self="tryClose">
           <Card v-bind="card">
             <template v-if="$slots.header" #header>
-              <slot name="header" :close />
+              <slot name="header" :close="close" />
+            </template>
+            <template #header-end>
+              <Button
+                v-if="canDismiss"
+                class="vui-modal-close"
+                plain
+                square
+                icon="ph:x"
+                @click="open = false"
+              />
             </template>
             <template v-if="$slots.default" #default>
               <div>
-                <slot name="default" :close />
+                <slot name="default" :close="close" />
               </div>
             </template>
             <template v-if="$slots.footer" #footer>
-              <slot name="footer" :close />
+              <slot name="footer" :close="close" />
             </template>
           </Card>
         </div>
@@ -86,6 +94,6 @@ const attrs = useAttrs()
 .modal-enter-from,
 .modal-leave-to {
   opacity: 0;
-  transform: scale(0.95);
+  transform: scale(1.025);
 }
 </style>

package/src/components/Modal/modal.scss

@@ -4,12 +4,6 @@
   height: 100%;
   position: relative;
 
-  .vui-modal-close {
-    position: absolute;
-    top: 16px;
-    right: 16px;
-  }
-
   &.centered {
     display: flex;
     align-items: center;
@@ -27,6 +21,17 @@
     max-width: 728px;
   }
 
+  &.vui-modal-size-screen {
+    position: fixed;
+    inset: 0;
+
+    & > .vui-card {
+      border-radius: 0;
+      border: none;
+      height: 100vh;
+    }
+  }
+
   &.scrollable {
     & > .vui-card {
       display: flex;

package/src/components/OTP/otp.scss

@@ -10,21 +10,22 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 42px;
-      height: 42px;
+      width: var(--interactive-el-height);
+      height: var(--interactive-el-height);
       border: 1px solid var(--color-border-strong);
       color: var(--color-text);
       z-index: 1;
       font-size: var(--font-size-m);
       outline: 0 solid var(--color-text-light);
-      transition: var(--transition);
+      transition: var(--transition-fast);
 
       .blinker {
-        display: none;
+        display: block;
         height: 16px;
         width: 1px;
         background-color: var(--color-text);
-        animation: blink 1.25s ease-out infinite;
+        animation: blink 1s ease-out infinite;
+        visibility: hidden;
       }
 
       @keyframes blink {
@@ -40,7 +41,7 @@
       }
 
       &.has-value {
-        background-color: var(--color-bg-raised);
+        background-color: var(--color-bg-medium);
 
         .blinker {
           display: none !important;
@@ -52,7 +53,7 @@
         outline-width: 2px;
 
         .blinker {
-          display: block;
+          visibility: visible;
         }
       }
 

package/src/components/Pagination/Pagination.vue

@@ -1,4 +1,5 @@
 <script setup lang='ts'>
+import type { Variants } from '../Button/Button.vue'
 import type { Pagination } from './pagination'
 import { computed } from 'vue'
 import Button from '../Button/Button.vue'
@@ -9,12 +10,14 @@ interface Props {
   pagination: Pagination
   prevNext?: boolean
   firstLast?: boolean
+  variant?: Variants
 }
 
 const props = withDefaults(defineProps<Props>(), {
   numbers: true,
   prevNext: true,
   firstLast: true,
+  variant: 'gray',
 })
 
 const emit = defineEmits<{
@@ -34,7 +37,7 @@ function setPrev() {
 </script>
 
 <template>
-  <Flex inline class="vui-pagination" gap="s">
+  <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)" />
     </slot>
@@ -44,13 +47,13 @@ function setPrev() {
     </slot>
 
     <template v-if="props.numbers">
-      <Flex gap="s">
+      <Flex gap="xxs">
         <Button
           v-for="page in props.pagination.pages"
           :key="page"
           square
           :plain="props.pagination.currentPage !== page"
-          :variant="props.pagination.currentPage === page ? 'blue' : 'default'"
+          variant="gray"
           @click="emit('change', page)"
         >
           {{ page }}

package/src/components/Popout/Popout.vue

@@ -1,10 +1,14 @@
 <script setup lang='ts'>
 import type { Placement, PopoutMaybeElement } from '../../shared/types'
-import { autoPlacement, offset, shift, useFloating } from '@floating-ui/vue'
+import { flip, offset, shift, useFloating } from '@floating-ui/vue'
+import { onClickOutside } from '@vueuse/core'
 import { toRef, useTemplateRef } from 'vue'
 import './popout.scss'
 
 export interface Props {
+  /**
+   * Reference to the HTML element the Popout is anchored to
+   */
   anchor: PopoutMaybeElement<HTMLElement>
   /**
    * Override the autoPlacement option
@@ -20,19 +24,25 @@ const props = withDefaults(defineProps<Props>(), {
   offset: 8,
 })
 
+const emit = defineEmits<{
+  clickOutside: []
+}>()
 const popoutRef = useTemplateRef('popout')
 const anchorRef = toRef(props.anchor)
 
 const { floatingStyles } = useFloating(anchorRef, popoutRef, {
   placement: props.placement,
   middleware: [
-    ...(props.placement ? [] : [autoPlacement()]),
+    // ...(props.placement
+    //   ? []
+    //   : [autoPlacement()]),
+    shift({ padding: 8 }),
+    flip(),
     offset(props.offset),
-    shift({
-      padding: 8,
-    }),
   ],
 })
+
+onClickOutside(popoutRef, () => emit('clickOutside'))
 </script>
 
 <template>

package/src/components/Popout/popout.scss

@@ -2,7 +2,14 @@
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow);
   min-width: 80px;
-  background-color: var(--color-bg-raised);
+  background-color: var(--color-bg-medium);
   border-radius: var(--border-radius-m);
   z-index: 1000;
 }
+
+:root.light {
+  .vui-popout {
+    background-color: var(--color-bg);
+    box-shadow: var(--box-shadow-strong);
+  }
+}

package/src/components/Progress/Progress.vue

@@ -1,6 +1,7 @@
 <script setup lang='ts'>
-import { computed, onMounted, useTemplateRef, watchEffect } from 'vue'
-import { delay, formatUnitValue, isNil, randomMinMax } from '../../shared/helpers'
+import { whenever } from '@vueuse/core'
+import { computed, onMounted, useTemplateRef, watch, watchEffect } from 'vue'
+import { clamp, delay, formatUnitValue, isNil, randomMinMax } from '../../shared/helpers'
 import './progress.scss'
 
 interface Props {
@@ -30,10 +31,14 @@ const {
   height,
 } = defineProps<Props>()
 
+const emit = defineEmits<{
+  done: []
+}>()
+
 const progressAmount = defineModel<number>({
   default: 0,
   set(value) {
-    return Math.min(value, 100)
+    return clamp(0, 100, value)
   },
 })
 
@@ -49,6 +54,8 @@ watchEffect(() => {
   }
 })
 
+whenever(() => fake, fakeIncrement)
+
 // Automatically / randomly increment but never reach 100% until
 async function fakeIncrement() {
   if (fake && progressAmount.value < 100) {
@@ -59,15 +66,21 @@ async function fakeIncrement() {
     }
     else {
       progressAmount.value += randomMinMax(1, 10)
-      await delay(randomMinMax(200, 1000))
+      await delay(randomMinMax(200, 12000))
     }
     fakeIncrement()
   }
 }
 
+watch(progressAmount, (v) => {
+  if (v >= 100) {
+    emit('done')
+  }
+})
+
 onMounted(fakeIncrement)
 
-const w = computed(() => `${progressAmount.value}%`)
+const w = computed(() => `${clamp(0, 100, progressAmount.value)}%`)
 const bC = computed(() => color)
 </script>
 

package/src/components/Progress/progress.scss

@@ -5,7 +5,7 @@
   width: 100%;
   position: relative;
   border-radius: 999px;
-  background-color: var(--color-bg-lowered);
+  background-color: var(--color-bg-raised);
   overflow: hidden;
   height: var(--vui-progress-height);
 
@@ -39,3 +39,9 @@
     transition: var(--transition-slow);
   }
 }
+
+:root.light {
+  .vui-progress-indicator {
+    background-color: var(--);
+  }
+}

package/src/components/Radio/Radio.vue

@@ -7,12 +7,14 @@ export interface RadioProps {
   label?: string
   disabled?: boolean
   value: any
+  accent?: boolean
 }
 
 const {
   label,
   disabled,
   value,
+  accent,
 } = defineProps<RadioProps>()
 const slots = defineSlots()
 const checked = defineModel()
@@ -21,8 +23,8 @@ const isChecked = computed(() => value === checked.value)
 </script>
 
 <template>
-  <div class="vui-radio" :class="{ disabled: !!disabled, checked: isChecked }">
-    <input :id v-model="checked" type="radio" :value :checked="isChecked">
+  <div class="vui-radio" :class="{ disabled: !!disabled, checked: isChecked, accent }">
+    <input :id v-model="checked" type="radio" :value :checked="isChecked" :disabled>
     <label :for="id">
       <span class="vui-radio-icon">
         <Icon :icon="isChecked ? 'ph:radio-button-fill' : 'ph:circle'" />

package/src/components/Radio/radio.scss

@@ -5,18 +5,21 @@
     .vui-radio-icon svg {
       color: var(--color-text);
     }
+
+    &.accent .vui-radio-icon svg {
+      color: var(--color-accent);
+    }
   }
 
   &.disabled {
-    cursor: not-allowed;
-    pointer-events: none;
-
-    .vui-radio-icon svg path {
-      color: var(--color-text-lighter) !important;
+    .vui-radio-icon {
+      opacity: 0.25;
+      cursor: not-allowed;
     }
 
-    input + label p {
-      color: var(--color-text-lighter);
+    input + label .vui-radio-content {
+      opacity: 0.4;
+      cursor: not-allowed;
     }
   }
 
@@ -33,7 +36,17 @@
   }
 
   input {
-    display: none;
+    width: 1px;
+    height: 1px;
+    position: absolute;
+    overflow: hidden;
+    outline: none !important;
+    opacity: 0;
+
+    &:focus-visible + label .vui-radio-icon {
+      outline: 2px solid var(--color-text);
+      border-radius: 999px;
+    }
 
     & + label {
       display: grid;
@@ -50,10 +63,16 @@
           display: flex;
           align-items: center;
           min-height: var(--radio-size);
-          font-size: var(--font-size-ms);
+          font-size: var(--font-size-m);
           // line-height: var(--radio-size);
         }
       }
     }
   }
 }
+
+:root.light {
+  .vui-radio.checked.accent .vui-radio-icon svg {
+    color: var(--color-accent);
+  }
+}

package/src/components/Select/Select.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable ts/consistent-type-definitions -->
 <script setup lang='ts' generic="T">
 import { Icon } from '@iconify/vue'
-import { computed, onMounted, ref, useTemplateRef } from 'vue'
+import { computed, onMounted, ref, useId, useTemplateRef } from 'vue'
 import { searchString } from '../../shared/helpers'
 import Button from '../Button/Button.vue'
 import Dropdown from '../Dropdown/Dropdown.vue'
@@ -28,6 +28,8 @@ type Props = {
   search?: boolean
   maxActiveOptions?: number
   showClear?: boolean
+  disabled?: boolean
+  errors?: string[]
 }
 
 const {
@@ -39,11 +41,14 @@ const {
   options,
   single = true,
   search,
-  maxActiveOptions = 3,
+  maxActiveOptions,
   showClear,
+  disabled,
+  errors = [] as string[],
 } = defineProps<Props>()
 
 const selected = defineModel<SelectOption[] | undefined>()
+const trigger = useTemplateRef('trigger')
 
 //
 function setValue(option: SelectOption) {
@@ -68,7 +73,7 @@ function setValue(option: SelectOption) {
       if (!selected.value) {
         selected.value = [option]
       }
-      else {
+      else if (!maxActiveOptions || (selected.value.length < maxActiveOptions)) {
         selected.value?.push(option)
       }
     }
@@ -97,7 +102,7 @@ const renderPlaceholder = computed(() => {
     return selected.value[0].label
 
   // If amount of selected exceeds the active capacity
-  if (selected.value.length > maxActiveOptions) {
+  if (selected.value.length > 3) {
     return `${selected.value.length} selected`
   }
 
@@ -117,42 +122,59 @@ function clearValue() {
   selected.value = undefined
   dropdownRef.value?.close()
 }
+
+const id = useId()
 </script>
 
 <template>
-  <div class="vui-input-container vui-select" :class="{ expand, required, readonly }">
-    <Dropdown ref="dropdown" :expand>
+  <div class="vui-input-container vui-select" :class="{ expand, required, readonly, disabled, 'has-errors': errors.length > 0 }">
+    <Dropdown ref="dropdown" :expand @close="trigger?.focus({ preventScroll: true })">
       <template #trigger="{ toggle, isOpen }">
         <div class="vui-input vui-select-trigger-content">
-          <label v-if="label" for="id">{{ label }}</label>
+          <label v-if="label" :for="id">{{ label }}</label>
           <p v-if="hint" class="vui-input-hint">
             {{ hint }}
           </p>
 
-          <button class="vui-input-style vui-select-trigger-container" @click="toggle">
+          <button
+            :id
+            ref="trigger"
+            class="vui-input-style vui-select-trigger-container"
+            :class="{ 'has-value': selected && selected.length > 0 }"
+            :disabled
+            @click="toggle"
+          >
             <span>
               {{ renderPlaceholder }}
             </span>
-            <Button
-              v-if="showClear && !required && selected"
-              plain
-              icon="ph:x"
-              square
-              size="s"
-              @click.stop="clearValue"
-            />
+            <template v-if="showClear && !required && selected">
+              <div class="flex-1" />
+              <Button
+                plain
+                icon="ph:x"
+                square
+                size="s"
+
+                @click.stop="clearValue"
+              />
+            </template>
             <Icon :icon="isOpen ? 'ph:caret-up' : 'ph:caret-down'" />
           </button>
         </div>
       </template>
 
       <template #default="{ close, isOpen }">
-        <DropdownTitle v-if="search">
+        <DropdownTitle v-if="search" sticky>
           <Input
             v-model="searchStr"
             placeholder="Search..."
             :focus="isOpen"
-          />
+            expand
+          >
+            <template #start>
+              <Icon icon="ph:magnifying-glass" />
+            </template>
+          </Input>
         </DropdownTitle>
 
         <p v-if="filteredOptions.length === 0" class="vue-select-no-results">
@@ -176,5 +198,14 @@ function clearValue() {
         </DropdownItem>
       </template>
     </Dropdown>
+
+    <p v-if="maxActiveOptions && !single" class="vui-input-limit">
+      {{ `${selected ? selected.length : 0}/${maxActiveOptions}` }}
+    </p>
+    <ul v-if="errors.length > 0" class="vui-input-errors">
+      <li v-for="err in errors" :key="err">
+        {{ err }}
+      </li>
+    </ul>
   </div>
 </template>

package/src/components/Select/select.scss

@@ -1,5 +1,7 @@
 .vui-input-container {
   &.vui-select {
+    width: auto;
+
     &.expand {
       .vui-dropdown-trigger-wrap,
       .vui-dropdown-trigger-content {
@@ -7,7 +9,22 @@
       }
     }
 
+    &.disabled {
+      .vui-input-style {
+        cursor: not-allowed;
+
+        &:hover {
+          border-color: var(--color-border);
+        }
+      }
+    }
+
     .vui-select-trigger-container {
+      &.has-value span {
+        color: var(--color-text);
+        font-weight: var(--font-weight-medium);
+      }
+
       span {
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -30,8 +47,6 @@
         margin-right: -6px;
 
         .vui-button-slot svg {
-          width: 14px;
-          height: 14px;
           color: var(--color-text-light);
         }
       }
@@ -42,3 +57,21 @@
     }
   }
 }
+
+select {
+  display: block;
+  height: var(--interactive-el-height);
+  line-height: var(--interactive-el-height);
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-s);
+  padding-inline: var(--space-xs);
+  transition: var(--transition-fast);
+  z-index: 1;
+  font-size: var(--font-size-m);
+  color: var(--color-text);
+
+  &:hover {
+    border-color: var(--color-border-strong);
+  }
+}

package/src/components/Sheet/Sheet.vue

@@ -55,14 +55,20 @@ const baseTransform = computed(() => {
             <div class="flex-1">
               <slot name="header" :close />
             </div>
-            <Button square icon="ph:x" @click="open = false" />
+            <Button plain square icon="ph:x" @click="open = false" />
           </div>
 
-          <Divider v-if="separator && $slots.header" :space="1" />
+          <Divider v-if="separator && $slots.header" :size="1" />
 
           <div v-if="$slots.default" class="vui-sheet-content">
             <slot :close />
           </div>
+
+          <Divider v-if="separator && $slots.footer" :size="1" />
+
+          <div class="vui-sheet-footer">
+            <slot name="footer" :close />
+          </div>
         </div>
       </Backdrop>
     </Transition>