@dolanske/vui 0.5.0 → 1.0.0

package/src/components/Input/Dropzone.vue

@@ -48,7 +48,7 @@ onMounted(() => {
       <input :id="inputId" type="file">
       <label :for="inputId">
         <slot :dragging>
-          <Flex justify-center gap="s" align-baseline>
+          <Flex justify-center gap="xs" align-center>
             <template v-if="dragging">
               <Icon icon="ph:target" />
               Drop it

package/src/components/Input/File.vue

@@ -9,7 +9,7 @@ const emits = defineEmits<{ files: [FileList] }>()
 <template>
   <Input
     type="file"
-    v-bind="{ ...props }"
+    v-bind="props"
     @input="emits('files', $event.target.files)"
   />
 </template>

package/src/components/Input/Input.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, type InputTypeHTMLAttribute, useId, useTemplateRef, watchEffect } from 'vue'
+import { computed, useId, useTemplateRef, watchEffect } from 'vue'
 import { getMaybeRefLength } from '../../shared/helpers'
 import Flex from '../Flex/Flex.vue'
 import '../../style/core.scss'
@@ -7,8 +7,10 @@ import './input.scss'
 
 // FIXME: sometimes spamming inputs when limit is set, it will _just_ let me write one more letter
 
+export type InputType = 'text' | 'password' | 'color' | 'date' | 'email' | 'number' | 'range' | 'search' | 'tel' | 'time' | 'url' | 'file'
+
 export interface InputProps {
-  type?: InputTypeHTMLAttribute
+  type?: InputType
   label?: string
   hint?: string
   limit?: number | string
@@ -63,12 +65,12 @@ const inputRef = useTemplateRef('input')
 
 watchEffect(() => {
   if (focus)
-    inputRef.value?.focus()
+    inputRef.value?.focus({ preventScroll: true })
 })
 
 defineExpose({
   focus: () => {
-    inputRef.value?.focus()
+    inputRef.value?.focus({ preventScroll: true })
   },
 })
 
@@ -81,11 +83,11 @@ const renderLimit = computed(() => {
   <div class="vui-input-container" :class="{ expand, disabled, required, readonly, 'has-errors': errors.length > 0 }">
     <slot name="before" />
     <div class="vui-input">
-      <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>
-      <Flex class="vui-input-style" :gap="3" align-center>
+      <Flex class="vui-input-style" :gap="5" align-center>
         <slot name="start" />
         <slot name="__internal_replace_input" :input-id="id" />
         <input

package/src/components/Input/Password.vue

@@ -25,8 +25,7 @@ const show = ref(showPassword)
     <template #end>
       <Button
         square
-        size="s"
-        :data-title-top="show ? 'Hide password' : 'Show password'"
+        :data-title-top="show ? 'Hide' : 'Reveal'"
         @click="show = !show"
       >
         <Icon :width="18" :height="18" :icon="show ? 'ph:eye-slash' : 'ph:eye'" />
@@ -34,14 +33,3 @@ const show = ref(showPassword)
     </template>
   </Input>
 </template>
-
-<style scoped lang="scss">
-:deep(.vui-input-style) {
-  padding-right: 4px !important;
-  gap: 8px !important;
-}
-
-[data-title-top]:before {
-  min-width: 104px;
-}
-</style>

package/src/components/Input/Textarea.vue

@@ -20,6 +20,7 @@ const {
   resize = 'vertical',
   autoResize,
   errors = [] as string[],
+  disabled,
 } = defineProps<Props>()
 
 const model = defineModel<string>({
@@ -41,10 +42,10 @@ const fS = computed(() => autoResize ? 'content' : 'auto')
 </script>
 
 <template>
-  <div class="vui-input-container" :class="{ expand, required, readonly, 'has-errors': errors.length > 0 }">
+  <div class="vui-input-container" :class="{ expand, required, readonly, 'has-errors': errors.length > 0, disabled }">
     <slot name="before" />
     <div class="vui-input">
-      <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>
@@ -55,6 +56,7 @@ const fS = computed(() => autoResize ? 'content' : 'auto')
         name="id"
         :placeholder
         :required
+        :disabled
         :max="limit"
         :style="{
           resize: r,

package/src/components/Input/input.scss

@@ -17,9 +17,16 @@
 
   width: 224px;
 
-  &.disabled input,
-  &.disabled textarea {
-    cursor: not-allowed;
+  &.disabled {
+    .vui-input label {
+      color: var(--input-color-text-lighter);
+    }
+
+    input,
+    textarea {
+      cursor: not-allowed;
+      resize: none !important;
+    }
   }
 
   &.expand {
@@ -28,7 +35,9 @@
 
   &.required .vui-input > label:after {
     content: '*';
+    padding-left: 2px;
     color: var(--input-color-text-red);
+    font-size: var(--font-size-l);
   }
 
   &.readonly .vui-input {
@@ -38,6 +47,7 @@
       pointer-events: none;
       color: var(--input-color-text-light);
       border-color: var(--input-color-border-weak);
+      resize: none !important;
     }
   }
 
@@ -45,20 +55,33 @@
     .vui-input {
       .vui-input-style,
       textarea {
-        border-color: var(--color-text-red) !important;
+        outline: 1px solid var(--color-text-red) !important;
       }
     }
   }
 
+  &.vui-input-color {
+    .vui-input-style {
+      padding-left: 0 !important;
+      outline: none !important;
+    }
+  }
+
   .vui-input {
     label {
       display: block;
       text-align: left;
       margin-bottom: 8px;
-      font-size: var(--font-size-ms);
+      font-size: var(--font-size-m);
       color: var(--input-color-text);
     }
 
+    svg {
+      min-width: 16px;
+      min-height: 16px;
+      // font-size: var(--font-size-l);
+    }
+
     .vui-input-hint {
       margin-bottom: 8px;
       margin-top: -4px;
@@ -82,22 +105,42 @@
       background: transparent;
       height: var(--input-height);
       line-height: var(--input-height);
-      color: var(--color-text);
+      color: var(--color-text-lighter);
       outline: none;
-      padding-inline: var(--input-padding);
-      font-size: var(--font-size-ms);
+      font-size: var(--font-size-m);
       width: 100%;
-      transition: var(--transition);
+      transition: var(--transition-fast);
+      padding-inline: var(--input-padding);
+      z-index: 1;
 
-      &:has(input:focus-visible),
-      &:focus-visible {
-        outline: 2px solid var(--color-text);
+      &:has(input:focus),
+      &:focus {
+        // Override error outline
+        outline: 2px solid var(--color-text) !important;
+      }
+
+      .vui-button {
+        border: 1px solid var(--color-border);
+
+        &:first-child {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+          margin-left: calc(calc(var(--input-padding) + 1px) * -1);
+        }
+
+        &:last-child {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+          margin-right: calc(calc(var(--input-padding) + 1px) * -1);
+        }
       }
     }
 
     input,
     textarea {
+      color: var(--color-text);
       font-family: var(--global-font);
+      // padding-inline: 3px;
     }
 
     input[type='file']::file-selector-button {
@@ -114,6 +157,51 @@
       background-color: var(--color-border);
     }
 
+    input[type='color'] {
+      width: 1px;
+      height: 1px;
+      position: absolute;
+      overflow: hidden;
+      outline: none !important;
+      opacity: 0;
+
+      &:focus + label .vui-input-color-indicator {
+        outline: 2px solid var(--color-text);
+      }
+
+      & + label {
+        position: relative;
+        margin: 0;
+        padding-left: var(--input-height);
+
+        input {
+          padding-inline: var(--space-xs);
+          border-radius: var(--border-radius-s);
+
+          &:focus {
+            outline: 2px solid var(--color-text);
+          }
+        }
+
+        .vui-input-color-indicator {
+          position: absolute;
+          inset: 4px;
+          right: unset;
+          width: calc(var(--input-height) - 8px);
+          background-color: var(--color-border);
+          border-radius: var(--border-radius-s);
+          font-size: var(--font-size-l);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          &:hover {
+            opacity: 0.8;
+          }
+        }
+      }
+    }
+
     ::-moz-range-thumb,
     ::-webkit-slider-thumb {
       width: 16px;
@@ -130,7 +218,7 @@
       line-height: calc(var(--input-height) - 1px);
       background: transparent;
       outline: none;
-      font-size: var(--font-size-ms);
+      font-size: var(--font-size-m);
       color: var(--color-text);
 
       &:-webkit-autofill {
@@ -172,12 +260,13 @@
 
   &.vui-dropzone {
     &.dragging .vui-input .vui-input-style {
-      border-color: var(--color-border-accent);
+      border-color: var(--color-accent);
 
       &:hover {
         border-color: var(--color-border);
       }
     }
+
     .vui-input {
       .vui-input-style {
         height: unset;
@@ -187,11 +276,15 @@
         line-height: 1.2em;
 
         &:hover {
-          border-color: var(--color-border-strong);
+          border-color: var(--color-accent);
         }
 
         input {
-          display: none;
+          width: 1px;
+          height: 1px;
+          position: absolute;
+          outline: 0 !important;
+          opacity: 0 !important;
 
           & + label {
             display: flex;
@@ -199,6 +292,7 @@
             justify-content: center;
             width: 100%;
             min-height: 96px;
+            margin: 0;
             color: var(--color-text-light);
           }
         }

package/src/components/Kbd/KbdGroup.vue

@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import type { VNode } from 'vue'
+import type Kbd from './Kbd.vue'
 import { useMagicKeys, whenever } from '@vueuse/core'
 
 /**
@@ -12,11 +12,7 @@ const emits = defineEmits<{
 }>()
 
 const slots = defineSlots<{
-  default: () => Array<VNode & {
-    props: {
-      keys: string
-    }
-  }>
+  default: () => Array<typeof Kbd>
 }>()
 const keys = useMagicKeys()
 

package/src/components/Kbd/kbd.scss

@@ -4,15 +4,16 @@
   justify-content: center;
   height: 24px;
   border-radius: var(--border-radius-xs);
-  // border: 1px solid var(--color-border-strong);
   font-size: var(--font-size-s);
   padding: 0 4px;
-  transition: var(--transition);
+  transition: var(--transition-fast);
   font-weight: 600;
-  background-color: var(--color-text);
-  color: var(--color-text-invert);
+  background-color: var(--color-button-gray);
+  color: var(--color-text-accent);
 
   &.active {
-    background-color: var(--color-text-yellow);
+    transform: translateY(2px);
+    color: var(--color-text-invert);
+    background-color: var(--color-button-fill);
   }
 }

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);
+  }
+}