@dolanske/vui 0.1.5 → 0.2.0

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>
@@ -74,11 +80,13 @@ onMounted(fakeIncrement)
       'fixed-active': progressAmount > 0 && progressAmount < 100,
     }"
   >
-    <div
-      class="vui-progress-indicator" :style="{
-        width: `${progressAmount}%`,
-        backgroundColor: color,
-      }"
-    />
+    <div class="vui-progress-indicator" />
   </div>
 </template>
+
+<style scoped lang="scss">
+.vui-progress-indicator {
+  width: v-bind(w);
+  background-color: v-bind(bC);
+}
+</style>

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,24 @@ 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),
-    }"
-  />
+  <div class="vui-skeleton" />
 </template>
+
+<style lang="scss" scoped>
+.vui-skeleton {
+  border-radius: v-bind(bR);
+  width: v-bind(w);
+  height: v-bind(h);
+}
+</style>

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'
@@ -37,8 +37,8 @@ const actualBorderWidth = computed(() => {
 
 <style lang="scss">
 .vui-spinner {
-  width: v-bind(actualSize);
-  height: v-bind(actualSize);
-  border-width: v-bind(actualBorderWidth);
+  width: v-bind(w);
+  height: v-bind(w);
+  border-width: v-bind(bW);
 }
 </style>

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/Tooltip/Tooltip.vue

@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import type { Placement } from '@floating-ui/vue'
+import type { Placement } from '../../shared/types'
 import { ref, useTemplateRef, watch } from 'vue'
 import Popout from '../Popout/Popout.vue'
 import './tooltip.scss'

package/src/shared/helpers.ts

@@ -57,3 +57,18 @@ export function setCharAt(str: string, char: string | number, index: number): st
     return char.toString()
   return str.substring(0, index) + char + str.substring(index + 1)
 }
+
+/**
+ * Takes in a value and if it is a number, appends "px" to it, otherwise returns
+ * the original value.
+ *
+ */
+export function formatUnitValue(value: string | number, unit: string = 'px'): string {
+  return typeof value === 'number'
+    ? `${value}${unit}`
+  // 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}${unit}`
+}

package/src/shared/types.ts

@@ -1,3 +1,5 @@
+import type { ComponentPublicInstance } from 'vue'
+
 export enum Size {
   s = 's',
   m = 'm',
@@ -9,3 +11,7 @@ export type Sizes = 's' | 'm' | 'l'
 export type DeepRequired<T> = { [K in keyof T]: DeepRequired<T[K]> } & Required<T>
 
 export type VueClass = string | Record<string, | boolean> | Array<string | Record<string, string | boolean>>
+
+// FLoating UI imported types were ruining the build so here we go
+export type PopoutMaybeElement<T> = T | ComponentPublicInstance | null | undefined
+export type Placement = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'

package/src/style/core.scss

@@ -23,15 +23,17 @@
   --font-size-m: 1.6rem;
   --font-size-l: 1.65rem;
 
+  --space-xxs: 4px;
   --space-xs: 8px;
   --space-s: 12px;
   --space-m: 18px;
   --space-l: 26px;
   --space-xl: 40px;
   --space-xxl: 52px;
+  --space-xxxl: 64px;
 
   --transition-quick: 0.08s all ease-in-out;
-  --transition: 0.1s all ease-in-out;
+  --transition: 0.14s all ease-in-out;
   --transition-slow: 0.3s all ease-in-out;
 
   --color-bg: rgb(18, 18, 18);
@@ -117,6 +119,7 @@
 
 body {
   color: var(--color-text);
+  min-height: 100dvh;
 }
 
 @import './typography.scss';

package/src/style/layout.scss

@@ -7,3 +7,7 @@
   padding-inline: var(--space-m);
   max-width: var(--container-l);
 }
+
+.flex-1 {
+  flex: 1;
+}