@dolanske/vui 0.4.0 → 0.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dolanske/vui",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "private": false,
   "description": "Brother in Christ there's a new UI library ",
   "author": "dolanske",
@@ -48,7 +48,7 @@
   "dependencies": {
     "@floating-ui/vue": "^1.1.5",
     "@types/node": "^22.9.0",
-    "@vuepic/vue-datepicker": "^10.0.0",
+    "@vuepic/vue-datepicker": "^11.0.1",
     "@vueuse/core": "^11.2.0",
     "sass": "^1.80.6",
     "vaul-vue": "^0.2.0",

package/src/App.vue

@@ -1,20 +1,17 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import Avatar from './components/Avatar/Avatar.vue'
-import Button from './components/Button/Button.vue'
 
-import Divider from './components/Divider/Divider.vue'
-import Dropdown from './components/Dropdown/Dropdown.vue'
+import Button from './components/Button/Button.vue'
+import Calendar from './components/Calendar/Calendar.vue'
 import DropdownItem from './components/Dropdown/DropdownItem.vue'
-import Flex from './components/Flex/Flex.vue'
 import Sidebar from './components/Sidebar/Sidebar.vue'
 import Tab from './components/Tabs/Tab.vue'
-import Tabs from './components/Tabs/Tabs.vue'
 
-import Tooltip from './components/Tooltip/Tooltip.vue'
+import Tabs from './components/Tabs/Tabs.vue'
 
 const tab = ref('components')
 const sidebarOpen = ref(false)
+const date = ref(new Date())
 </script>
 
 <template>
@@ -37,48 +34,29 @@ const sidebarOpen = ref(false)
     </Sidebar>
 
     <main vaul-drawer-wrapper>
-      <Button icon="ph:sidebar-simple-bold" square @click="sidebarOpen = !sidebarOpen" />
       <Tabs v-model="tab" expand>
+        <template #start>
+          <Button icon="ph:sidebar-simple-bold" square @click="sidebarOpen = !sidebarOpen" />
+        </template>
+
         <Tab id="home" label="Home" icon="ph:house" />
         <Tab id="components" label="Components" />
         <Tab id="typography" label="Typography" />
       </Tabs>
       <div style="margin-bottom: 64px;" />
       <div v-if="tab === 'home'">
-        home
+        <div class="container container-xs">
+          <p class="text-overflow mb-m">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat deleniti alias a, non incidunt temporibus aperiam ducimus enim ut necessitatibus, id ab quod ex architecto, accusamus esse sed nostrum quae?
+          </p>
+          <p v-for="item in 10" :key="item" :class="`text-overflow-${item} mb-m`">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat deleniti alias a, non incidunt temporibus aperiam ducimus enim ut necessitatibus, id ab quod ex architecto, accusamus esse sed nostrum quae? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia ducimus perferendis, soluta molestias saepe incidunt officiis doloribus alias omnis id praesentium impedit possimus quibusdam? Laudantium porro fugiat eius. Voluptatum, id!
+          </p>
+        </div>
       </div>
 
       <div v-if="tab === 'components'">
-        <h1 class="mb-xl">
-          Hii
-          <span class="counter text-color-accent">129</span>
-        </h1>
-        <p>I am down</p>
-
-        <Flex>
-          <Avatar size="s" />
-          <Avatar size="m" />
-          <Avatar size="l" />
-          <Avatar :size="80" />
-        </Flex>
-
-        <Divider />
-
-        <Tooltip>
-          <span class="block mb-xl">Hello world</span>
-          <template #tooltip>
-            <p>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, animi! Nobis maxime neque cumque, in a amet voluptatibus tenetur dicta eos delectus illo soluta aliquam voluptatum nulla? In, incidunt asperiores?
-            </p>
-          </template>
-        </Tooltip>
-
-        <Dropdown>
-          <template #trigger="{ toggle }">
-            <Button aria-label="Dropdown menu trigger" square icon="ph:x" @click="toggle" />
-          </template>
-          <DropdownItem>Hiiii</DropdownItem>
-        </Dropdown>
+        <Calendar v-model="date" time />
       </div>
       <div v-else-if="tab === 'typography'" class="typeset" :style="{ maxWidth: '688px', margin: 'auto' }">
         <h1>The Joke Tax Chronicles</h1>

package/src/components/Accordion/accordion.scss

@@ -58,6 +58,7 @@
     font-size: var(--font-size-m);
     font-weight: 500;
     color: var(--color-text);
+    border-radius: var(--border-radius-m);
 
     &:hover {
       text-decoration: underline;

package/src/components/Button/Button.vue

@@ -50,7 +50,7 @@ const height = computed(() => {
     case Size.s: return '24px'
     case Size.l: return '40px'
     case Size.m:
-    default: return '34px'
+    default: return 'var(--interactive-el-height)'
   }
 })
 

package/src/components/Button/button.scss

@@ -1,5 +1,5 @@
 .vui-button {
-  --button-height: 34px;
+  --button-height: var(--interactive-el-height);
   --button-padding: 8px;
 
   &.disabled {
@@ -41,6 +41,8 @@
 
   &.square {
     width: var(--button-height);
+    min-width: var(--button-height);
+    min-height: var(--button-height);
     padding: 0;
   }
 

package/src/components/Calendar/Calendar.vue

@@ -2,6 +2,7 @@
 import type { VueDatePickerProps } from '@vuepic/vue-datepicker'
 import { Icon } from '@iconify/vue'
 import VueDatePicker from '@vuepic/vue-datepicker'
+import { useAttrs } from 'vue'
 import '@vuepic/vue-datepicker/dist/main.css'
 import './calendar.scss'
 
@@ -16,12 +17,14 @@ const props = withDefaults(defineProps<VueDatePickerProps & {
 })
 
 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"
+    :style="props.expand ?? !$slots.trigger
       ? undefined
       : { display: 'inline-block', width: 'auto' }
     "

package/src/components/Calendar/calendar.scss

@@ -54,3 +54,7 @@
 .dp--clear-btn {
   inset-inline-end: 8px;
 }
+
+.dp__input {
+  height: var(--interactive-el-height);
+}

package/src/components/Checkbox/Checkbox.vue

@@ -43,10 +43,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

@@ -38,7 +38,16 @@
   }
 
   input {
-    display: none;
+    width: 1px;
+    height: 1px;
+    position: absolute;
+    overflow: hidden;
+    outline: none !important;
+
+    &:focus-visible + label .vui-checkbox-icon {
+      outline: 2px solid var(--color-text);
+      border-radius: var(--border-radius-s);
+    }
 
     & + label {
       display: grid;

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

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

@@ -0,0 +1,77 @@
+.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-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);
+  }
+}

package/src/components/Dropdown/dropdown.scss

@@ -10,85 +10,6 @@
   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);
-  }
-}
-
 .vui-dropdown-title {
   position: relative;
   display: flex;

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

@@ -15,7 +15,10 @@ interface Props {
   areas?: string[]
 }
 
-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)

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;
 
@@ -83,7 +83,7 @@
       height: var(--input-height);
       line-height: var(--input-height);
       color: var(--color-text);
-      outline: none !important;
+      outline: none;
       padding-inline: var(--input-padding);
       font-size: var(--font-size-ms);
       width: 100%;
@@ -91,7 +91,7 @@
 
       &:has(input:focus-visible),
       &:focus-visible {
-        border-color: var(--input-color-border-strong);
+        outline: 2px solid var(--color-text);
       }
     }
 
@@ -142,7 +142,7 @@
     textarea {
       line-height: 1.3em;
       height: auto;
-      min-height: 4lh;
+      min-height: 5lh;
       field-sizing: content;
       padding: var(--textarea-padding);
       transition: none;

package/src/components/Kbd/kbd.scss

@@ -1,5 +1,5 @@
 .vui-kbd {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 24px;

package/src/components/Radio/radio.scss

@@ -33,7 +33,16 @@
   }
 
   input {
-    display: none;
+    width: 1px;
+    height: 1px;
+    position: absolute;
+    overflow: hidden;
+    outline: none !important;
+
+    &:focus-visible + label .vui-radio-icon {
+      outline: 2px solid var(--color-text);
+      border-radius: 999px;
+    }
 
     & + label {
       display: grid;

package/src/components/Sidebar/Sidebar.vue

@@ -1,6 +1,7 @@
 <script setup lang='ts'>
-import { useCssVar, useMouse } from '@vueuse/core'
-import { computed, useSlots, useTemplateRef, watch } from 'vue'
+import { useCssVar, useMouse, useTimeoutFn, watchThrottled } from '@vueuse/core'
+import { computed, useSlots, useTemplateRef } from 'vue'
+import { isNil } from '../../shared/helpers'
 import './sidebar.scss'
 
 const props = withDefaults(defineProps<Props>(), {
@@ -47,21 +48,37 @@ const slotProps = computed(() => ({
   open,
 }))
 
+// Sidebar `appear` implementation
+const { start, stop, isPending } = useTimeoutFn(() => {
+  open.value = true
+}, 250)
+
+const APPEAR_OFFSET = 32
+
 const { x } = useMouse()
 
-let appearActive = true
-watch(x, (pos) => {
+watchThrottled(x, (pos) => {
   if (!props.appear)
     return
 
-  if (pos < 20 && !open.value) {
-    open.value = true
-    appearActive = true
+  if (pos <= APPEAR_OFFSET && pos >= 0 && !open.value && !isPending.value) {
+    start()
+  }
+  else if (isPending.value) {
+    stop()
   }
-  else if (appearActive && pos > props.width) {
+
+  const openWidth = props.mini
+    ? 65
+    : props.floaty
+      ? props.width
+      : props.width - (isNil(offset.value) ? 0 : Number(offset.value?.replace('px', '')))
+
+  if ((pos > APPEAR_OFFSET + openWidth || pos < 0) && open.value) {
     open.value = false
-    appearActive = false
   }
+}, {
+  throttle: 100,
 })
 </script>
 

package/src/components/Switch/switch.scss

@@ -28,7 +28,15 @@
   }
 
   input {
-    display: none;
+    width: 1px;
+    height: 1px;
+    position: absolute;
+    overflow: hidden;
+    outline: none !important;
+
+    &:focus-visible + label .vui-switch-icon {
+      outline: 2px solid var(--color-text);
+    }
 
     & + label {
       display: grid;

package/src/components/Tabs/Tabs.vue

@@ -18,6 +18,8 @@ const {
 
 const slots = defineSlots<{
   default: () => Array<VNode & { props: TabProps }>
+  start: unknown
+  end: unknown
 }>()
 
 const active = defineModel()
@@ -67,6 +69,7 @@ onMounted(() => {
         : `vui-tabs-variant-${variant}`,
     ]"
   >
+    <slot name="start" />
     <Component
       :is="vnode"
       v-for="vnode of slots.default()"
@@ -74,6 +77,10 @@ onMounted(() => {
       :class="{ active: vnode.props.id === active }"
       @click="active = vnode.props.id"
     />
+    <template v-if="slots.end">
+      <div v-if="!!!expand" class="flex-1" />
+      <slot name="end" />
+    </template>
 
     <Transition name="fade" appear>
       <div ref="underline" class="vui-tab-underline" />

package/src/components/Tabs/tabs.scss

@@ -2,6 +2,7 @@
   display: flex;
   width: 100%;
   gap: 4px;
+  align-items: center;
   border-bottom: 1px solid var(--color-border);
   position: relative;
 

package/src/style/core.scss

@@ -5,7 +5,7 @@
 // To overwrite any of these styles, simply create a style file and import it
 // after this one
 @use './reset.scss';
-@use './fonts.scss';
+// @use './text.scss';
 
 :root {
   color-scheme: dark;
@@ -80,27 +80,29 @@
   --color-bg-blue-raised: rgb(26, 59, 119);
   --color-border-blue: rgb(20, 45, 112);
 
-  --color-border: rgb(38, 38, 38);
+  --color-border: rgb(40, 40, 40);
   --color-border-strong: rgb(54, 54, 54);
   --color-border-weak: rgb(36, 36, 36);
 
-  --color-accent: rgb(56, 214, 219);
+  --color-accent: rgb(238, 120, 17);
   --color-accent-disabled: hsl(from var(--color-accent) calc(h) calc(s * 0.4) calc(l));
   --color-bg-accent-lowered: hsl(from var(--color-accent) calc(h) s calc(l * 0.2));
-  --color-bg-accent-raised: hsl(from var(--color-accent) calc(h) s calc(l * 0.5));
-  --color-border-accent: hsl(from var(--color-accent) calc(h) s calc(l * 0.4));
+  --color-bg-accent-raised: hsl(from var(--color-accent) calc(h) s calc(l * 0.45));
+  --color-border-accent: hsl(from var(--color-accent) calc(h) s calc(l * 0.3));
 
   --box-shadow: 0 2px 12px rgba(8, 8, 8, 0.2);
   --box-shadow-strong: 0 4px 15px rgba(8, 8, 8, 0.4);
 
   --global-font: Geist, sans-serif;
   --global-font-mono: 'Geist Mono', 'Courier New', Courier, monospace;
+
+  --interactive-el-height: 34px;
 }
 
 :root {
   font-family: var(--global-font);
   font-size: 63.5%;
-  // TODO remove
+  // TODO remove - should remove?
   position: relative;
   background-color: var(--color-bg);
 
@@ -143,6 +145,6 @@ body {
 @include meta.load-css('animation.scss');
 @include meta.load-css('tooltip.scss');
 @include meta.load-css('utils.scss');
-@include meta.load-css('fonts.scss');
+@include meta.load-css('text.scss');
 
 @include meta.load-css('media-query.scss');

package/src/style/layout.scss

@@ -24,6 +24,10 @@ $containers: 'xs', 's', 'm', 'l', 'xl', 'xxl';
   display: flex;
 }
 
+.flex-1 {
+  flex: 1;
+}
+
 .inline-flex {
   display: inline-flex;
 }
@@ -36,6 +40,34 @@ $containers: 'xs', 's', 'm', 'l', 'xl', 'xxl';
   display: inline-block;
 }
 
+.inline {
+  display: inline;
+}
+
+.x-center {
+  justify-content: center;
+}
+
+.x-start {
+  justify-content: flex-start;
+}
+
+.x-end {
+  justify-content: flex-end;
+}
+
+.y-start {
+  align-items: center;
+}
+
+.y-end {
+  align-self: flex-end;
+}
+
+.y-center {
+  align-items: center;
+}
+
 // Sizes
 // Paddings & margins
 .mx-auto {