@dolanske/vui 0.3.4 → 0.5.0

package/src/components/Progress/Progress.vue

@@ -1,90 +1,90 @@
-<script setup lang='ts'>
-import { computed, onMounted, useTemplateRef, watchEffect } from 'vue'
-import { delay, formatUnitValue, isNil, randomMinMax } from '../../shared/helpers'
-import './progress.scss'
-
-interface Props {
-  /**
-   * Will randomly increment but never actually reach the end
-   */
-  fake?: boolean
-  /**
-   * Indicator color. Use CSS color values or variables
-   */
-  color?: string
-  /**
-   * Displays loader at the top of the page. It is only displayed when the
-   * progress is between 0 and 100 (exclusive).
-   */
-  fixed?: boolean
-  /**
-   * Height
-   */
-  height?: number | string
-}
-
-const {
-  fake,
-  color = 'var(--color-accent)',
-  fixed,
-  height,
-} = defineProps<Props>()
-
-const progressAmount = defineModel<number>({
-  default: 0,
-  set(value) {
-    return Math.min(value, 100)
-  },
-})
-
-// Set height programatically
-const progressRef = useTemplateRef('progress')
-
-watchEffect(() => {
-  if (progressRef.value && !isNil(height)) {
-    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 > 90) {
-      // Only in crement by the fraction of the remaining amount
-      progressAmount.value += (100 - progressAmount.value) * 0.05
-      await delay(randomMinMax(500, 3000))
-    }
-    else {
-      progressAmount.value += randomMinMax(1, 10)
-      await delay(randomMinMax(200, 1000))
-    }
-    fakeIncrement()
-  }
-}
-
-onMounted(fakeIncrement)
-
-const w = computed(() => `${progressAmount.value}%`)
-const bC = computed(() => color)
-</script>
-
-<template>
-  <div
-    ref="progress"
-    class="vui-progress"
-    :class="{
-      fixed,
-      'fixed-active': progressAmount > 0 && progressAmount < 100,
-    }"
-  >
-    <div
-      class="vui-progress-indicator" :style="{
-        width: w,
-        backgroundColor: bC,
-      }"
-    />
-  </div>
-</template>
+<script setup lang='ts'>
+import { computed, onMounted, useTemplateRef, watchEffect } from 'vue'
+import { delay, formatUnitValue, isNil, randomMinMax } from '../../shared/helpers'
+import './progress.scss'
+
+interface Props {
+  /**
+   * Will randomly increment but never actually reach the end
+   */
+  fake?: boolean
+  /**
+   * Indicator color. Use CSS color values or variables
+   */
+  color?: string
+  /**
+   * Displays loader at the top of the page. It is only displayed when the
+   * progress is between 0 and 100 (exclusive).
+   */
+  fixed?: boolean
+  /**
+   * Height
+   */
+  height?: number | string
+}
+
+const {
+  fake,
+  color = 'var(--color-accent)',
+  fixed,
+  height,
+} = defineProps<Props>()
+
+const progressAmount = defineModel<number>({
+  default: 0,
+  set(value) {
+    return Math.min(value, 100)
+  },
+})
+
+// Set height programatically
+const progressRef = useTemplateRef('progress')
+
+watchEffect(() => {
+  if (progressRef.value && !isNil(height)) {
+    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 > 90) {
+      // Only in crement by the fraction of the remaining amount
+      progressAmount.value += (100 - progressAmount.value) * 0.05
+      await delay(randomMinMax(500, 3000))
+    }
+    else {
+      progressAmount.value += randomMinMax(1, 10)
+      await delay(randomMinMax(200, 1000))
+    }
+    fakeIncrement()
+  }
+}
+
+onMounted(fakeIncrement)
+
+const w = computed(() => `${progressAmount.value}%`)
+const bC = computed(() => color)
+</script>
+
+<template>
+  <div
+    ref="progress"
+    class="vui-progress"
+    :class="{
+      fixed,
+      'fixed-active': progressAmount > 0 && progressAmount < 100,
+    }"
+  >
+    <div
+      class="vui-progress-indicator" :style="{
+        width: w,
+        backgroundColor: bC,
+      }"
+    />
+  </div>
+</template>

package/src/components/Progress/progress.scss

@@ -1,41 +1,41 @@
-.vui-progress {
-  --vui-progress-height: 3px;
-
-  display: block;
-  width: 100%;
-  position: relative;
-  border-radius: 999px;
-  background-color: var(--color-bg-lowered);
-  overflow: hidden;
-  height: var(--vui-progress-height);
-
-  &.fixed {
-    transition: var(--transition-slow);
-    transition-property: height;
-    position: fixed;
-    inset: 0;
-    bottom: unset;
-    height: 0;
-    border-radius: none !important;
-
-    &.fixed-active {
-      height: var(--vui-progress-height);
-    }
-
-    .vui-progress-indicator {
-      border-top-left-radius: unset !important;
-      border-bottom-left-radius: unset !important;
-    }
-  }
-
-  .vui-progress-indicator {
-    position: absolute;
-    z-index: 4;
-    inset: 0;
-    right: unset;
-    width: 0;
-    border-radius: 999px;
-    background-color: var(--color-text-lighter);
-    transition: var(--transition-slow);
-  }
-}
+.vui-progress {
+  --vui-progress-height: 3px;
+
+  display: block;
+  width: 100%;
+  position: relative;
+  border-radius: 999px;
+  background-color: var(--color-bg-lowered);
+  overflow: hidden;
+  height: var(--vui-progress-height);
+
+  &.fixed {
+    transition: var(--transition-slow);
+    transition-property: height;
+    position: fixed;
+    inset: 0;
+    bottom: unset;
+    height: 0;
+    border-radius: none !important;
+
+    &.fixed-active {
+      height: var(--vui-progress-height);
+    }
+
+    .vui-progress-indicator {
+      border-top-left-radius: unset !important;
+      border-bottom-left-radius: unset !important;
+    }
+  }
+
+  .vui-progress-indicator {
+    position: absolute;
+    z-index: 4;
+    inset: 0;
+    right: unset;
+    width: 0;
+    border-radius: 999px;
+    background-color: var(--color-text-lighter);
+    transition: var(--transition-slow);
+  }
+}

package/src/components/Radio/Radio.vue

@@ -1,36 +1,36 @@
-<script setup lang='ts'>
-import { Icon } from '@iconify/vue'
-import { computed, useId } from 'vue'
-import './radio.scss'
-
-export interface RadioProps {
-  label?: string
-  disabled?: boolean
-  value: any
-}
-
-const {
-  label,
-  disabled,
-  value,
-} = defineProps<RadioProps>()
-const slots = defineSlots()
-const checked = defineModel()
-const id = useId()
-const isChecked = computed(() => value === checked.value)
-</script>
-
-<template>
-  <div class="vui-radio" :class="{ disabled: !!disabled, checked: isChecked }">
-    <input :id v-model="checked" type="radio" :value :checked="isChecked">
-    <label :for="id">
-      <span class="vui-radio-icon">
-        <Icon :icon="isChecked ? 'ph:radio-button-fill' : 'ph:circle'" />
-      </span>
-      <p v-if="!slots.default" class="vui-radio-content">{{ label || value }}</p>
-      <div v-else class="vui-radio-content">
-        <slot />
-      </div>
-    </label>
-  </div>
-</template>
+<script setup lang='ts'>
+import { Icon } from '@iconify/vue'
+import { computed, useId } from 'vue'
+import './radio.scss'
+
+export interface RadioProps {
+  label?: string
+  disabled?: boolean
+  value: any
+}
+
+const {
+  label,
+  disabled,
+  value,
+} = defineProps<RadioProps>()
+const slots = defineSlots()
+const checked = defineModel()
+const id = useId()
+const isChecked = computed(() => value === checked.value)
+</script>
+
+<template>
+  <div class="vui-radio" :class="{ disabled: !!disabled, checked: isChecked }">
+    <input :id v-model="checked" type="radio" :value :checked="isChecked">
+    <label :for="id">
+      <span class="vui-radio-icon">
+        <Icon :icon="isChecked ? 'ph:radio-button-fill' : 'ph:circle'" />
+      </span>
+      <p v-if="!slots.default" class="vui-radio-content">{{ label || value }}</p>
+      <div v-else class="vui-radio-content">
+        <slot />
+      </div>
+    </label>
+  </div>
+</template>

package/src/components/Radio/RadioGroup.vue

@@ -1,40 +1,40 @@
-<script setup lang='ts'>
-import type { FlexProps } from '../Flex/Flex.vue'
-import type Radio from './Radio.vue'
-import { watchEffect } from 'vue'
-import Flex from '../Flex/Flex.vue'
-
-interface Props extends FlexProps {
-  disabled?: boolean
-}
-
-const {
-  disabled,
-  ...flexProps
-} = defineProps<Props>()
-
-const slots = defineSlots<{
-  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()"
-      :key="vnode.props.value"
-      v-bind="vnode.props"
-      v-model="checked"
-      :class="{ disabled: disabled || vnode.props.disabled }"
-    />
-  </Flex>
-</template>
+<script setup lang='ts'>
+import type { FlexProps } from '../Flex/Flex.vue'
+import type Radio from './Radio.vue'
+import { watchEffect } from 'vue'
+import Flex from '../Flex/Flex.vue'
+
+interface Props extends FlexProps {
+  disabled?: boolean
+}
+
+const {
+  disabled,
+  ...flexProps
+} = defineProps<Props>()
+
+const slots = defineSlots<{
+  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()"
+      :key="vnode.props.value"
+      v-bind="vnode.props"
+      v-model="checked"
+      :class="{ disabled: disabled || vnode.props.disabled }"
+    />
+  </Flex>
+</template>

package/src/components/Radio/radio.scss

@@ -1,59 +1,68 @@
-.vui-radio {
-  --radio-size: 24px;
-
-  &.checked {
-    .vui-radio-icon svg {
-      color: var(--color-text);
-    }
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    pointer-events: none;
-
-    .vui-radio-icon svg path {
-      color: var(--color-text-lighter) !important;
-    }
-
-    input + label p {
-      color: var(--color-text-lighter);
-    }
-  }
-
-  .vui-radio-icon {
-    cursor: pointer;
-    width: var(--radio-size);
-    height: var(--radio-size);
-
-    svg {
-      width: 100%;
-      height: 100%;
-      color: var(--color-text);
-    }
-  }
-
-  input {
-    display: none;
-
-    & + label {
-      display: grid;
-      grid-template-columns: 20px 1fr;
-      gap: 10px;
-      font-size: var(--font-size-s);
-      color: var(--color-text);
-      user-select: none;
-
-      .vui-radio-content {
-        display: block;
-
-        &:is(p) {
-          display: flex;
-          align-items: center;
-          min-height: var(--radio-size);
-          font-size: var(--font-size-ms);
-          // line-height: var(--radio-size);
-        }
-      }
-    }
-  }
-}
+.vui-radio {
+  --radio-size: 24px;
+
+  &.checked {
+    .vui-radio-icon svg {
+      color: var(--color-text);
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+
+    .vui-radio-icon svg path {
+      color: var(--color-text-lighter) !important;
+    }
+
+    input + label p {
+      color: var(--color-text-lighter);
+    }
+  }
+
+  .vui-radio-icon {
+    cursor: pointer;
+    width: var(--radio-size);
+    height: var(--radio-size);
+
+    svg {
+      width: 100%;
+      height: 100%;
+      color: var(--color-text);
+    }
+  }
+
+  input {
+    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;
+      grid-template-columns: 20px 1fr;
+      gap: 10px;
+      font-size: var(--font-size-s);
+      color: var(--color-text);
+      user-select: none;
+
+      .vui-radio-content {
+        display: block;
+
+        &:is(p) {
+          display: flex;
+          align-items: center;
+          min-height: var(--radio-size);
+          font-size: var(--font-size-ms);
+          // line-height: var(--radio-size);
+        }
+      }
+    }
+  }
+}