@dolanske/vui 0.1.5 → 0.3.0

package/src/components/Flex/Flex.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import type { Sizes } from '../../shared/types'
+import type { Space } from '../../shared/types'
 import { computed } from 'vue'
-import { useActualGap } from '../../shared/composables'
 
 export interface FlexProps {
   inline?: boolean
@@ -13,7 +12,7 @@ export interface FlexProps {
   rowReverse?: boolean
   columnReverse?: boolean
 
-  gap?: Sizes | number
+  gap?: Space | number
 
   // NOTE: Add more if needed
   justifyStart?: boolean
@@ -35,7 +34,7 @@ export interface FlexProps {
 const props = defineProps<FlexProps>()
 
 // Flex gap
-const ag = useActualGap(props.gap)
+const ag = computed(() => `var(--space-${props.gap})`)
 
 // Flex direction
 const ad = computed(() => {
@@ -91,19 +90,17 @@ const aH = computed(() => props.expand ? '100%' : 'auto')
 </script>
 
 <template>
-  <div class="vui-flex">
+  <div
+    class="vui-flex" :style="{
+      display: aY,
+      flexWrap: aW,
+      flexDirection: ad,
+      justifyContent: aj,
+      gap: ag,
+      alignItems: aA,
+      width: aH,
+    }"
+  >
     <slot />
   </div>
 </template>
-
-<style scoped lang="scss">
-.vui-flex {
-  display: v-bind(aY);
-  flex-wrap: v-bind(aW);
-  flex-direction: v-bind(ad);
-  justify-content: v-bind(aj);
-  gap: v-bind(ag);
-  align-items: v-bind(aA);
-  width: v-bind(aH);
-}
-</style>

package/src/components/Grid/Grid.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import type { Sizes } from '../../shared/types'
+import type { Space } from '../../shared/types'
 import { computed } from 'vue'
-import { useActualGap } from '../../shared/composables'
 import { createArray } from '../../shared/helpers'
 
 /**
@@ -10,7 +9,7 @@ import { createArray } from '../../shared/helpers'
 
 interface Props {
   inline?: boolean
-  gap?: Sizes | number
+  gap?: Space | number
   rows?: number | string
   columns?: number | string
   areas?: string[]
@@ -18,7 +17,7 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const aG = useActualGap(props.gap)
+const ag = computed(() => `var(--space-${props.gap})`)
 
 const aTC = computed(() => {
   if (typeof props.columns === 'number') {
@@ -43,17 +42,13 @@ const aD = computed(() => props.inline ? 'inline-grid' : 'grid')
 
 <template>
   <div
-    class="vui-grid"
+    class="vui-grid" :style="{
+      display: aD,
+      gap: ag,
+      gridTemplateColumns: aTC,
+      gridTemplateRows: aTR,
+    }"
   >
     <slot />
   </div>
 </template>
-
-<style scoped lang="scss">
-.vui-grid {
-  display: v-bind(aD);
-  gap: v-bind(aG);
-  grid-template-columns: v-bind(aTC);
-  grid-template-rows: v-bind(aTR);
-}
-</style>

package/src/components/Input/Input.vue

@@ -23,6 +23,7 @@ export interface InputProps {
   multiple?: boolean
   min?: number
   max?: number
+  disabled?: boolean
 }
 
 const {
@@ -40,6 +41,7 @@ const {
   min,
   max,
   errors = [] as string[],
+  disabled,
 } = defineProps<InputProps>()
 
 const model = defineModel<string | number>({
@@ -76,7 +78,7 @@ const renderLimit = computed(() => {
 </script>
 
 <template>
-  <div class="vui-input-container" :class="{ expand, required, readonly, 'has-errors': errors.length > 0 }">
+  <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>
@@ -100,6 +102,7 @@ const renderLimit = computed(() => {
           :accept
           :multiple
           :min
+          :disabled
         >
         <slot name="end" />
       </Flex>

package/src/components/Input/Textarea.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { InputProps } from './Input.vue'
-import { useId } from 'vue'
+import { computed, useId } from 'vue'
 import '../Input/input.scss'
 
 type Props = Omit<InputProps, 'type'> & {
@@ -35,6 +35,9 @@ const model = defineModel<string>({
   },
 })
 const id = useId()
+
+const r = computed(() => resize === true ? 'both' : (resize || 'initial'))
+const fS = computed(() => autoResize ? 'content' : 'auto')
 </script>
 
 <template>
@@ -54,9 +57,9 @@ const id = useId()
         :required
         :max="limit"
         :style="{
-          'resize': resize === true ? 'both' : (resize || 'initial'),
-          // @ts-expect-error This is only supported in chrome for now
-          'field-sizing': autoResize ? 'content' : 'auto',
+          resize: r,
+          // @ts-expect-error Early-adoption CSS attribute
+          fieldSizing: fS,
         }"
       />
     </div>

package/src/components/Input/input.scss

@@ -17,6 +17,11 @@
 
   width: 224px;
 
+  &.disabled input,
+  &.disabled textarea {
+    cursor: not-allowed;
+  }
+
   &.expand {
     width: 100%;
   }
@@ -26,10 +31,14 @@
     color: var(--input-color-text-red);
   }
 
-  &.readonly .vui-input input {
-    pointer-events: none;
-    color: var(--input-color-text-light);
-    border-color: var(--input-color-border-weak);
+  &.readonly .vui-input {
+    input,
+    textarea,
+    .vui-input-style {
+      pointer-events: none;
+      color: var(--input-color-text-light);
+      border-color: var(--input-color-border-weak);
+    }
   }
 
   &.has-errors {

package/src/components/OTP/otp.scss

@@ -15,7 +15,7 @@
       border: 1px solid var(--color-border-strong);
       color: var(--color-text);
       z-index: 1;
-      font-size: var(--font-size-l);
+      font-size: var(--font-size-m);
       outline: 0 solid var(--color-text-light);
       transition: var(--transition);
 
@@ -47,7 +47,6 @@
         }
       }
 
-      // TODO: animate blinking cursor
       &.active {
         z-index: 2;
         outline-width: 2px;

package/src/components/Popout/Popout.vue

@@ -1,11 +1,11 @@
 <script setup lang='ts'>
-import type { MaybeElement, Placement } from '@floating-ui/vue'
+import type { Placement, PopoutMaybeElement } from '../../shared/types'
 import { autoPlacement, offset, useFloating } from '@floating-ui/vue'
 import { toRef, useTemplateRef } from 'vue'
 import './popout.scss'
 
-interface Props {
-  anchor: MaybeElement<HTMLElement>
+export interface Props {
+  anchor: PopoutMaybeElement<HTMLElement>
   /**
    * Override the autoPlacement option
    */

package/src/components/Progress/Progress.vue

@@ -1,6 +1,6 @@
 <script setup lang='ts'>
-import { onMounted, useTemplateRef, watchEffect } from 'vue'
-import { delay, isNil, randomMinMax } from '../../shared/helpers'
+import { computed, onMounted, useTemplateRef, watchEffect } from 'vue'
+import { delay, formatUnitValue, isNil, randomMinMax } from '../../shared/helpers'
 import './progress.scss'
 
 interface Props {
@@ -42,16 +42,19 @@ const progressRef = useTemplateRef('progress')
 
 watchEffect(() => {
   if (progressRef.value && !isNil(height)) {
-    progressRef.value.style.setProperty('--vui-progress-height', `${height}px`)
+    progressRef.value.style.setProperty(
+      '--vui-progress-height',
+      formatUnitValue(height),
+    )
   }
 })
 
 // Automatically / randomly increment but never reach 100% until
 async function fakeIncrement() {
   if (fake && progressAmount.value < 100) {
-    if (progressAmount.value > 95) {
+    if (progressAmount.value > 90) {
       // Only in crement by the fraction of the remaining amount
-      progressAmount.value += (100 - progressAmount.value) * 0.075
+      progressAmount.value += (100 - progressAmount.value) * 0.05
       await delay(randomMinMax(500, 3000))
     }
     else {
@@ -63,6 +66,9 @@ async function fakeIncrement() {
 }
 
 onMounted(fakeIncrement)
+
+const w = computed(() => `${progressAmount.value}%`)
+const bC = computed(() => color)
 </script>
 
 <template>
@@ -76,8 +82,8 @@ onMounted(fakeIncrement)
   >
     <div
       class="vui-progress-indicator" :style="{
-        width: `${progressAmount}%`,
-        backgroundColor: color,
+        width: w,
+        backgroundColor: bC,
       }"
     />
   </div>

package/src/components/Progress/progress.scss

@@ -1,5 +1,6 @@
 .vui-progress {
   --vui-progress-height: 3px;
+
   display: block;
   width: 100%;
   position: relative;
@@ -18,7 +19,6 @@
     border-radius: none !important;
 
     &.fixed-active {
-      // Some arbitrary value which should never happen to people with
       height: var(--vui-progress-height);
     }
 

package/src/components/Radio/Radio.vue

@@ -6,7 +6,7 @@ import './radio.scss'
 export interface RadioProps {
   label?: string
   disabled?: boolean
-  value: string
+  value: any
 }
 
 const {

package/src/components/Radio/RadioGroup.vue

@@ -1,7 +1,7 @@
 <script setup lang='ts'>
-import type { VNode } from 'vue'
 import type { FlexProps } from '../Flex/Flex.vue'
-import type { RadioProps } from './Radio.vue'
+import type Radio from './Radio.vue'
+import { watchEffect } from 'vue'
 import Flex from '../Flex/Flex.vue'
 
 interface Props extends FlexProps {
@@ -14,22 +14,27 @@ const {
 } = defineProps<Props>()
 
 const slots = defineSlots<{
-  default: () => { children: Array<VNode & { props: RadioProps }> }[]
+  default: () => Array<typeof Radio>
 }>()
 
 const checked = defineModel()
+
+watchEffect(() => {
+  if (slots.default().some(s => s.type.__name !== 'Radio')) {
+    console.error('You can only pass `<Radio />` components as children.')
+  }
+})
 </script>
 
 <template>
   <Flex v-bind="flexProps">
     <Component
       :is="vnode"
-      v-for="vnode of slots.default()[0].children"
+      v-for="vnode of slots.default()"
       :key="vnode.props.value"
       v-bind="vnode.props"
       v-model="checked"
       :class="{ disabled: disabled || vnode.props.disabled }"
     />
   </Flex>
-  <!-- <div class="vui-radio-group" /> -->
 </template>

package/src/components/Sheet/Sheet.vue

@@ -1,6 +1,7 @@
 <script setup lang='ts'>
 import { computed } from 'vue'
 import Backdrop from '../../internal/Backdrop/Backdrop.vue'
+import { formatUnitValue } from '../../shared/helpers'
 import Button from '../Button/Button.vue'
 import Divider from '../Divider/Divider.vue'
 import './sheet.scss'
@@ -17,6 +18,8 @@ const {
   separator,
 } = defineProps<Props>()
 
+const TRANSITION_OFFSET = 16
+
 const open = defineModel<boolean>()
 
 function close() {
@@ -24,27 +27,21 @@ function close() {
 }
 
 const style = computed(() => {
-  const formattedSizeValue = typeof size === 'number' ? `${size}px` : size
-  let style
-
   if (position === 'left' || position === 'right') {
-    style = { width: formattedSizeValue }
-  }
-  else {
-    style = { minHeight: formattedSizeValue }
+    return { width: formatUnitValue(size) }
   }
 
-  return style
+  return undefined
 })
 
 // Used to compute base location so that sheet appears to animate form the edge of the screen
 const baseTransform = computed(() => {
   switch (position) {
-    case 'left': return `translate(-16px, 0)`
-    case 'top': return `translate(0, -16px)`
-    case 'bottom': return `translate(0, 16px)`
+    case 'left': return `translate(-${TRANSITION_OFFSET}px, 0)`
+    case 'top': return `translate(0, -${TRANSITION_OFFSET}px)`
+    case 'bottom': return `translate(0, ${TRANSITION_OFFSET}px)`
     case 'right':
-    default: return `translate(16px, 0)`
+    default: return `translate(${TRANSITION_OFFSET}px, 0)`
   }
 })
 </script>
@@ -52,16 +49,16 @@ const baseTransform = computed(() => {
 <template>
   <Teleport to="body">
     <Transition appear name="sheet">
-      <Backdrop v-if="open" :style="{ padding: 0 }" @close="open = false">
+      <Backdrop v-if="open" @close="open = false">
         <div v-if="open" class="vui-sheet" :class="[`vui-sheet-position-${position}`]" :style>
           <div class="vui-sheet-header">
-            <div :style="{ flex: 1 }">
+            <div class="flex-1">
               <slot name="header" :close />
             </div>
             <Button square icon="ph:x" @click="open = false" />
           </div>
 
-          <Divider v-if="separator && $slots.header" :size="1" />
+          <Divider v-if="separator && $slots.header" :space="1" />
 
           <div v-if="$slots.default" class="vui-sheet-content">
             <slot :close />
@@ -73,6 +70,10 @@ const baseTransform = computed(() => {
 </template>
 
 <style scoped lang="scss">
+.vui-backdrop {
+  padding: 0;
+}
+
 .sheet-enter-active,
 .sheet-leave-active {
   transition: var(--transition);

package/src/components/Sheet/sheet.scss

@@ -9,20 +9,24 @@
   &.vui-sheet-position-top {
     top: 0;
     border-bottom: 1px solid var(--color-border);
+    height: auto;
   }
 
   &.vui-sheet-position-bottom {
     bottom: 0;
     border-top: 1px solid var(--color-border);
+    height: auto;
   }
 
   &.vui-sheet-position-right {
     right: 0;
+    top: 0;
     border-left: 1px solid var(--color-border);
   }
 
   &.vui-sheet-position-left {
     left: 0;
+    top: 0;
     border-right: 1px solid var(--color-border);
   }
 

package/src/components/Skeleton/Skeleton.vue

@@ -1,5 +1,7 @@
 <!-- eslint-disable ts/no-use-before-define -->
 <script setup lang='ts'>
+import { computed } from 'vue'
+import { formatUnitValue } from '../../shared/helpers'
 import './skeleton.scss'
 
 interface Props {
@@ -20,27 +22,22 @@ const {
 
 const DEFAULT_RADIUS = 'var(--border-radius-s)'
 
-function valueToPixels(value: string | number) {
-  return typeof value === 'number'
-    ? `${value}px`
-    // If last value of string is NOT a number, do not add "px" at the end
-    // eslint-disable-next-line unicorn/prefer-number-properties
-    : isNaN(Number(value[value.length - 1]))
-      ? value
-      : `${value}px`
-}
+// Give priority to radius, if it is NOT set to default
+const bR = computed(() => formatUnitValue(circle && radius === DEFAULT_RADIUS ? 9999 : radius))
+
+// When using `circle` prop, we want to use the same
+// value for both height and width, but we can't
+// know which one will be defined
+const w = computed(() => formatUnitValue(circle ? (width || height) : width))
+const h = computed(() => formatUnitValue(circle ? (width || height) : height))
 </script>
 
 <template>
   <div
     class="vui-skeleton" :style="{
-      // Give priority to radius, if it is NOT set to default
-      borderRadius: valueToPixels(circle && radius === DEFAULT_RADIUS ? 9999 : radius),
-      // When using `circle` prop, we want to use the same
-      // value for both height and width, but we can't
-      // know which one will be defined
-      width: valueToPixels(circle ? (width || height) : width),
-      height: valueToPixels(circle ? (width || height) : height),
+      borderRadius: bR,
+      width: w,
+      height: h,
     }"
   />
 </template>

package/src/components/Spinner/Spinner.vue

@@ -12,7 +12,7 @@ const {
   size = 's',
 } = defineProps<Props>()
 
-const actualSize = computed(() => {
+const w = computed(() => {
   switch (size) {
     case Size.s: return '16px'
     case Size.l: return '38px'
@@ -21,7 +21,7 @@ const actualSize = computed(() => {
   }
 })
 
-const actualBorderWidth = computed(() => {
+const bW = computed(() => {
   switch (size) {
     case Size.s: return '3px'
     case Size.l: return '5px'
@@ -32,13 +32,11 @@ const actualBorderWidth = computed(() => {
 </script>
 
 <template>
-  <div :class="{ size }" class="vui-spinner" />
+  <div
+    :class="{ size }" class="vui-spinner" :style="{
+      width: w,
+      height: w,
+      borderWidth: bW,
+    }"
+  />
 </template>
-
-<style lang="scss">
-.vui-spinner {
-  width: v-bind(actualSize);
-  height: v-bind(actualSize);
-  border-width: v-bind(actualBorderWidth);
-}
-</style>

package/src/components/Table/table.scss

@@ -59,7 +59,7 @@
       font-size: var(--font-size-ms);
       border: none;
       border-left: none !important;
-      transition: var(--transition-quick);
+      transition: var(--transition-fast);
       position: relative;
       z-index: 1;
 

package/src/components/Table/table.ts

@@ -125,7 +125,8 @@ export function defineTable<const Dataset extends Array<BaseRow>>(
     const key = sorting.value.key
 
     if (key) {
-      final = final.toSorted((a: Dataset[number], b: Dataset[number]) => {
+      // FIXME: change to `toSorted` when typescript is ok
+      final = [...final].sort((a: Dataset[number], b: Dataset[number]) => {
         const aValue = a[key]
         const bValue = b[key]
         return sorting.value.type === 'asc'

package/src/components/Tabs/Tab.vue

@@ -14,7 +14,7 @@ const id = computed(() => props.id ?? props.label)
 </script>
 
 <template>
-  <button class="vui-tab" :data-tab-id="id" :class="{ disabled: props.disabled }">
+  <button class="vui-tab" :data-tab-id="id" :class="{ disabled: props.disabled }" role="tab">
     <Icon v-if="props.icon" :icon="props.icon" />
     {{ props.label }}
   </button>

package/src/components/Tabs/Tabs.vue

@@ -56,6 +56,7 @@ useEventListener(window, 'resize', computeUnderlinePosition)
   <div
     ref="tabs"
     class="vui-tabs"
+    role="tablist"
     :class="[
       { expand, disabled },
       variant === 'default'

package/src/components/Toast/toast.ts

@@ -1,5 +1,3 @@
-// share some tiny global state
-
 import { ref } from 'vue'
 
 interface ToastAction {
@@ -68,25 +66,3 @@ export function pushToast(title: string, options?: ToastOptions): Toast {
 export function removeToast(id: number): void {
   toasts.value.delete(id)
 }
-
-//////
-
-// export const toastError: NewToastFn = (title, options) => {
-//   return pushToast('error', title, options)
-// }
-
-// export const toastSuccess: NewToastFn = (title, options) => {
-//   return pushToast('success', title, options)
-// }
-
-// export const toastInfo: NewToastFn = (title, options) => {
-//   return pushToast('info', title, options)
-// }
-
-// export const toastNeutral: NewToastFn = (title, options) => {
-//   return pushToast('neutral', title, options)
-// }
-
-// export const toastWarning: NewToastFn = (title, options) => {
-//   return pushToast('warning', title, options)
-// }

package/src/components/Tooltip/Tooltip.vue

@@ -1,6 +1,6 @@
 <script setup lang='ts'>
-import type { Placement } from '@floating-ui/vue'
-import { ref, useTemplateRef, watch } from 'vue'
+import type { Placement } from '../../shared/types'
+import { ref, useId, useTemplateRef, watch } from 'vue'
 import Popout from '../Popout/Popout.vue'
 import './tooltip.scss'
 
@@ -50,18 +50,21 @@ watch(hoverAnchor, (isHovering) => {
     showTooltip.value = false
   }
 })
+
+const id = useId()
 </script>
 
 <template>
   <div
     ref="popoutAnchor"
+    :aria-describedby="id"
     @mouseenter="hoverAnchor = true"
     @mouseleave="hoverAnchor = false"
   >
     <slot />
   </div>
   <Transition appear name="tooltip">
-    <Popout v-if="showTooltip" :anchor="popoutAnchorRef" class="vui-tooltip" :placement>
+    <Popout v-if="showTooltip" :id :anchor="popoutAnchorRef" class="vui-tooltip" :placement name="tooltip">
       <slot name="tooltip" />
     </Popout>
   </Transition>