@dolanske/vui 0.3.4 → 0.5.0

package/src/components/Checkbox/Checkbox.vue

@@ -1,52 +1,51 @@
-<script setup lang="ts">
-import { Icon } from '@iconify/vue'
-import { useId } from 'vue'
-import './checkbox.scss'
-
-interface Props {
-  label?: string
-  iconOn?: string
-  iconOff?: string
-  disabled?: boolean
-  checked?: boolean
-}
-
-const {
-  label,
-  iconOn = 'ph:check-square-fill',
-  iconOff = 'ph:square',
-  disabled,
-  checked: checkedProp,
-} = defineProps<Props>()
-const emit = defineEmits<{
-  change: [checked: boolean]
-}>()
-const slots = defineSlots()
-const checked = defineModel<boolean>()
-const id = useId()
-</script>
-
-<template>
-  <div class="vui-checkbox" :class="{ disabled: !!disabled, checked }">
-    <input
-      :id
-      v-model="checked"
-      type="checkbox"
-      :disabled
-      :checked="checkedProp"
-      @change="(e) => {
-        if (disabled) return
-        emit('change', (e.target as HTMLInputElement).checked)
-      }"
-    >
-    <label :for="id">
-      <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>
-    </label>
-  </div>
-</template>
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { useId } from 'vue'
+import './checkbox.scss'
+
+interface Props {
+  label?: string
+  iconOn?: string
+  iconOff?: string
+  disabled?: boolean
+  checked?: boolean
+}
+
+const {
+  label,
+  iconOn = 'ph:check-square-fill',
+  iconOff = 'ph:square',
+  disabled,
+  checked: checkedProp,
+} = defineProps<Props>()
+const emit = defineEmits<{
+  change: [checked: boolean]
+}>()
+const slots = defineSlots()
+const checked = defineModel<boolean>()
+const id = useId()
+</script>
+
+<template>
+  <div class="vui-checkbox" :class="{ disabled: !!disabled, checked }">
+    <input
+      :id
+      v-model="checked"
+      type="checkbox"
+      :disabled
+      :checked="checkedProp"
+      @change="(e) => {
+        if (disabled) return
+        emit('change', (e.target as HTMLInputElement).checked)
+      }"
+    >
+    <label :for="id">
+      <span class="vui-checkbox-icon">
+        <Icon :icon="checked ? iconOn : iconOff" />
+      </span>
+      <p v-if="label || slots.default" class="vui-checkbox-content">
+        <slot>{{ label }}</slot>
+      </p>
+    </label>
+  </div>
+</template>

package/src/components/Checkbox/checkbox.scss

@@ -1,66 +1,75 @@
-.vui-checkbox {
-  --checkbox-size: 24px;
-
-  &.checked {
-    .vui-checkbox-icon svg {
-      color: var(--color-text);
-    }
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-
-    .vui-checkbox-icon {
-      pointer-events: none;
-      svg path {
-        color: var(--color-text-lighter);
-      }
-    }
-
-    input + label {
-      cursor: not-allowed;
-
-      p {
-        color: var(--color-text-lighter);
-      }
-    }
-  }
-
-  .vui-checkbox-icon {
-    width: var(--checkbox-size);
-    height: var(--checkbox-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-m);
-      color: var(--color-text);
-      user-select: none;
-      align-items: baseline;
-
-      .vui-checkbox-content {
-        display: block;
-
-        &:is(p) {
-          display: flex;
-          align-items: center;
-          min-height: var(--checkbox-size);
-          font-size: var(--font-size-ms);
-          align-self: flex-start;
-          // line-height: var(--checkbox-size);
-        }
-      }
-    }
-  }
-}
+.vui-checkbox {
+  --checkbox-size: 24px;
+
+  &.checked {
+    .vui-checkbox-icon svg {
+      color: var(--color-text);
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+
+    .vui-checkbox-icon {
+      pointer-events: none;
+      svg path {
+        color: var(--color-text-lighter);
+      }
+    }
+
+    input + label {
+      cursor: not-allowed;
+
+      p {
+        color: var(--color-text-lighter);
+      }
+    }
+  }
+
+  .vui-checkbox-icon {
+    width: var(--checkbox-size);
+    height: var(--checkbox-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-checkbox-icon {
+      outline: 2px solid var(--color-text);
+      border-radius: var(--border-radius-s);
+    }
+
+    & + label {
+      display: grid;
+      grid-template-columns: 20px 1fr;
+      gap: 10px;
+      font-size: var(--font-size-m);
+      color: var(--color-text);
+      user-select: none;
+      align-items: baseline;
+
+      .vui-checkbox-content {
+        display: block;
+
+        &:is(p) {
+          display: flex;
+          align-items: center;
+          min-height: var(--checkbox-size);
+          font-size: var(--font-size-ms);
+          align-self: flex-start;
+          // line-height: var(--checkbox-size);
+        }
+      }
+    }
+  }
+}

package/src/components/CopyClipboard/CopyClipboard.vue

@@ -1,82 +1,82 @@
-<script setup lang='ts'>
-import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
-import { Icon } from '@iconify/vue'
-import { useClipboard } from '@vueuse/core'
-import { onMounted, useSlots, useTemplateRef } from 'vue'
-import Flex from '../Flex/Flex.vue'
-import './copy-clipboard.scss'
-
-interface Props {
-  /**
-   * Text to copy
-   */
-  text: string
-  /**
-   * Wether to show a tooltip after successful copy
-   */
-  confirm?: string | boolean
-  /**
-   * How long will the copy confirmation tooltip be visible in milliseconds.
-   */
-  confirmTime?: number
-}
-
-const {
-  text,
-  confirm,
-  confirmTime,
-} = defineProps<Props>()
-
-const {
-  copy,
-  copied,
-  isSupported,
-} = useClipboard({
-  copiedDuring: confirmTime,
-})
-const slots = useSlots()
-
-onMounted(() => {
-  if (!isSupported.value) {
-    console.error('Clipboard API is not supported. This component will not work')
-  }
-
-  if (confirm && slots.confirm) {
-    console.warn('You are using the \'confirm\' prop and slot. The slot will take precedence.')
-  }
-})
-
-const anchorRef = useTemplateRef('anchor')
-const tooltipRef = useTemplateRef('tooltip')
-
-const { floatingStyles } = useFloating(anchorRef, tooltipRef, {
-  whileElementsMounted: autoUpdate,
-  transform: false,
-  placement: 'top',
-  middleware: [
-    offset(8),
-    shift(),
-    flip(),
-  ],
-})
-</script>
-
-<template>
-  <div ref="anchor" class="vui-clipboard-copy-wrap" role="button" @click="copy(text)">
-    <slot :copy :copied />
-  </div>
-
-  <Transition name="fade-up" mode="in-out">
-    <div v-if="copied && (confirm || $slots.confirm)" ref="tooltip" class="vui-clipboard-tooltip" :style="floatingStyles">
-      <slot name="confirm">
-        <template v-if="confirm">
-          {{ confirm }}
-        </template>
-        <Flex v-else align-center justify-center>
-          <Icon width="16" height="16" icon="ph:check-bold" />
-          Copied to clipboard
-        </Flex>
-      </slot>
-    </div>
-  </Transition>
-</template>
+<script setup lang='ts'>
+import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
+import { Icon } from '@iconify/vue'
+import { useClipboard } from '@vueuse/core'
+import { onMounted, useSlots, useTemplateRef } from 'vue'
+import Flex from '../Flex/Flex.vue'
+import './copy-clipboard.scss'
+
+interface Props {
+  /**
+   * Text to copy
+   */
+  text: string
+  /**
+   * Wether to show a tooltip after successful copy
+   */
+  confirm?: string | boolean
+  /**
+   * How long will the copy confirmation tooltip be visible in milliseconds.
+   */
+  confirmTime?: number
+}
+
+const {
+  text,
+  confirm,
+  confirmTime,
+} = defineProps<Props>()
+
+const {
+  copy,
+  copied,
+  isSupported,
+} = useClipboard({
+  copiedDuring: confirmTime,
+})
+const slots = useSlots()
+
+onMounted(() => {
+  if (!isSupported.value) {
+    console.error('Clipboard API is not supported. This component will not work')
+  }
+
+  if (confirm && slots.confirm) {
+    console.warn('You are using the \'confirm\' prop and slot. The slot will take precedence.')
+  }
+})
+
+const anchorRef = useTemplateRef('anchor')
+const tooltipRef = useTemplateRef('tooltip')
+
+const { floatingStyles } = useFloating(anchorRef, tooltipRef, {
+  whileElementsMounted: autoUpdate,
+  transform: false,
+  placement: 'top',
+  middleware: [
+    offset(8),
+    shift(),
+    flip(),
+  ],
+})
+</script>
+
+<template>
+  <div ref="anchor" class="vui-clipboard-copy-wrap" role="button" @click="copy(text)">
+    <slot :copy :copied />
+  </div>
+
+  <Transition name="fade-up" mode="in-out">
+    <div v-if="copied && (confirm || $slots.confirm)" ref="tooltip" class="vui-clipboard-tooltip" :style="floatingStyles">
+      <slot name="confirm">
+        <template v-if="confirm">
+          {{ confirm }}
+        </template>
+        <Flex v-else align-center justify-center>
+          <Icon width="16" height="16" icon="ph:check-bold" />
+          Copied to clipboard
+        </Flex>
+      </slot>
+    </div>
+  </Transition>
+</template>

package/src/components/CopyClipboard/copy-clipboard.scss

@@ -1,17 +1,17 @@
-.vui-clipboard-copy-wrap {
-  display: inline-block;
-  position: relative;
-}
-
-.vui-clipboard-tooltip {
-  padding: 6px 8px;
-  border-radius: var(--border-radius-s);
-  background-color: var(--color-bg-raised);
-  font-size: var(--font-size-s);
-  color: var(--color-text-light);
-  box-shadow: var(--box-shadow);
-
-  svg path {
-    color: var(--color-text);
-  }
-}
+.vui-clipboard-copy-wrap {
+  display: inline-block;
+  position: relative;
+}
+
+.vui-clipboard-tooltip {
+  padding: 6px 8px;
+  border-radius: var(--border-radius-s);
+  background-color: var(--color-bg-raised);
+  font-size: var(--font-size-s);
+  color: var(--color-text-light);
+  box-shadow: var(--box-shadow);
+
+  svg path {
+    color: var(--color-text);
+  }
+}

package/src/components/Divider/Divider.vue

@@ -1,44 +1,44 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { formatUnitValue } from '../../shared/helpers'
-import './divider.scss'
-
-interface Props {
-  thickness?: number
-  size?: number | string
-  vertical?: boolean
-  margin?: string | number
-}
-
-const {
-  thickness = 1,
-  size = 32,
-  vertical,
-  margin = '0',
-} = defineProps<Props>()
-
-const h = computed(() => formatUnitValue(size))
-const w = computed(() => vertical ? h.value : 'initial')
-const bW = computed(() => `${thickness}px`)
-const m = computed(() => formatUnitValue(margin))
-</script>
-
-<template>
-  <div
-    class="vui-divider" :class="{ vertical }" :style="{
-      margin: m,
-      width: w,
-      height: h,
-    }"
-  >
-    <div v-if="$slots.default" class="vui-divider-slot">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.vui-divider:before {
-  border-width: v-bind(bW);
-}
-</style>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { formatUnitValue } from '../../shared/helpers'
+import './divider.scss'
+
+interface Props {
+  thickness?: number
+  size?: number | string
+  vertical?: boolean
+  margin?: string | number
+}
+
+const {
+  thickness = 1,
+  size = 32,
+  vertical,
+  margin = '0',
+} = defineProps<Props>()
+
+const h = computed(() => formatUnitValue(size))
+const w = computed(() => vertical ? h.value : 'initial')
+const bW = computed(() => `${thickness}px`)
+const m = computed(() => formatUnitValue(margin))
+</script>
+
+<template>
+  <div
+    class="vui-divider" :class="{ vertical }" :style="{
+      margin: m,
+      width: w,
+      height: h,
+    }"
+  >
+    <div v-if="$slots.default" class="vui-divider-slot">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.vui-divider:before {
+  border-width: v-bind(bW);
+}
+</style>

package/src/components/Divider/divider.scss

@@ -1,35 +1,35 @@
-.vui-divider {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  height: 32px;
-  width: 100%;
-
-  &.vertical:before {
-    border-bottom: none;
-    border-right: 1px solid var(--color-border);
-    transform: translateX(-50%);
-    width: 1px;
-    height: 100%;
-  }
-
-  &:before {
-    content: '';
-    display: block;
-    transform: translateY(-50%);
-    width: 100%;
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .vui-divider-slot {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-
-    & > *:first-child {
-      outline: 3px solid var(--color-bg);
-    }
-  }
-}
+.vui-divider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  height: 32px;
+  width: 100%;
+
+  &.vertical:before {
+    border-bottom: none;
+    border-right: 1px solid var(--color-border);
+    transform: translateX(-50%);
+    width: 1px;
+    height: 100%;
+  }
+
+  &:before {
+    content: '';
+    display: block;
+    transform: translateY(-50%);
+    width: 100%;
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .vui-divider-slot {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    & > *:first-child {
+      outline: 3px solid var(--color-bg);
+    }
+  }
+}