@dolanske/vui 0.4.0 → 1.0.0

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,85 +8,7 @@
   border-radius: var(--border-radius-m);
   border: 1px solid var(--color-border);
   padding: 4px;
-}
-
-.vui-dropdown-item {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  width: fit-content;
-  gap: var(--space-xs);
-  width: 100%;
-  // TODO: make button-height variable global and use it here and everywhere else
-  height: 34px;
-  border-radius: var(--border-radius-m);
-  font-size: var(--font-size-s);
-  cursor: default;
-  transition: var(--transition);
-  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 {
-    margin-left: 8px;
-    font-size: 0.9rem;
-    // white-space: nowrap;
-    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);
-  }
+  overflow-y: auto;
 }
 
 .vui-dropdown-title {
@@ -94,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);
   }
 
@@ -116,3 +45,9 @@
     color: var(--color-text-lighter);
   }
 }
+
+:root.light {
+  .vui-dropdown-title {
+    background-color: var(--color-bg);
+  }
+}

package/src/components/Flex/Flex.vue

@@ -32,7 +32,10 @@ export interface FlexProps {
   expand?: boolean
 }
 
-const props = defineProps<FlexProps>()
+const props = withDefaults(defineProps<FlexProps>(), {
+  // eslint-disable-next-line vue/require-valid-default-prop
+  gap: 's',
+})
 
 // Flex gap
 const ag = computed(() => typeof props.gap === 'number'

package/src/components/Grid/Grid.vue

@@ -12,10 +12,19 @@ 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 = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  // eslint-disable-next-line vue/require-valid-default-prop
+  gap: 's',
+})
 
 const ag = computed(() => typeof props.gap === 'number'
   ? formatUnitValue(props.gap)
@@ -40,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>
 
@@ -50,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;

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

@@ -9,7 +9,7 @@
   --input-color-border-strong: var(--color-border-strong);
   --input-color-border-weak: var(--color-border-weak);
 
-  --input-height: 34px;
+  --input-height: var(--interactive-el-height);
   --input-padding: 8px;
   --textarea-padding: 8px;
 
@@ -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);
-      outline: none !important;
-      padding-inline: var(--input-padding);
-      font-size: var(--font-size-ms);
+      color: var(--color-text-lighter);
+      outline: none;
+      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 {
-        border-color: var(--input-color-border-strong);
+      &: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 {
@@ -142,7 +230,7 @@
     textarea {
       line-height: 1.3em;
       height: auto;
-      min-height: 4lh;
+      min-height: 5lh;
       field-sizing: content;
       padding: var(--textarea-padding);
       transition: none;
@@ -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

@@ -1,18 +1,19 @@
 .vui-kbd {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   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);
   }
 }