@dolanske/vui 0.3.2 → 0.3.4

package/src/components/Sheet/Sheet.vue

@@ -1,92 +1,92 @@
-<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'
-
-interface Props {
-  position?: 'left' | 'right' | 'top' | 'bottom'
-  size?: number | string
-  separator?: boolean
-}
-
-const {
-  position = 'right',
-  size = 398,
-  separator,
-} = defineProps<Props>()
-
-const TRANSITION_OFFSET = 16
-
-const open = defineModel<boolean>()
-
-function close() {
-  open.value = false
-}
-
-const style = computed(() => {
-  if (position === 'left' || position === 'right') {
-    return { width: formatUnitValue(size) }
-  }
-
-  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(-${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(${TRANSITION_OFFSET}px, 0)`
-  }
-})
-</script>
-
-<template>
-  <Teleport to="body">
-    <Transition appear name="sheet">
-      <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 class="flex-1">
-              <slot name="header" :close />
-            </div>
-            <Button square icon="ph:x" @click="open = false" />
-          </div>
-
-          <Divider v-if="separator && $slots.header" :space="1" />
-
-          <div v-if="$slots.default" class="vui-sheet-content">
-            <slot :close />
-          </div>
-        </div>
-      </Backdrop>
-    </Transition>
-  </Teleport>
-</template>
-
-<style scoped lang="scss">
-.vui-backdrop {
-  padding: 0;
-}
-
-.sheet-enter-active,
-.sheet-leave-active {
-  transition: var(--transition);
-}
-
-.sheet-enter-to,
-.sheet-leave-from {
-  transform: translate(0, 0);
-}
-
-.sheet-enter-from,
-.sheet-leave-to {
-  opacity: 0;
-  transform: v-bind(baseTransform);
-}
-</style>
+<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'
+
+interface Props {
+  position?: 'left' | 'right' | 'top' | 'bottom'
+  size?: number | string
+  separator?: boolean
+}
+
+const {
+  position = 'right',
+  size = 398,
+  separator,
+} = defineProps<Props>()
+
+const TRANSITION_OFFSET = 16
+
+const open = defineModel<boolean>()
+
+function close() {
+  open.value = false
+}
+
+const style = computed(() => {
+  if (position === 'left' || position === 'right') {
+    return { width: formatUnitValue(size) }
+  }
+
+  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(-${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(${TRANSITION_OFFSET}px, 0)`
+  }
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition appear name="sheet">
+      <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 class="flex-1">
+              <slot name="header" :close />
+            </div>
+            <Button square icon="ph:x" @click="open = false" />
+          </div>
+
+          <Divider v-if="separator && $slots.header" :space="1" />
+
+          <div v-if="$slots.default" class="vui-sheet-content">
+            <slot :close />
+          </div>
+        </div>
+      </Backdrop>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped lang="scss">
+.vui-backdrop {
+  padding: 0;
+}
+
+.sheet-enter-active,
+.sheet-leave-active {
+  transition: var(--transition);
+}
+
+.sheet-enter-to,
+.sheet-leave-from {
+  transform: translate(0, 0);
+}
+
+.sheet-enter-from,
+.sheet-leave-to {
+  opacity: 0;
+  transform: v-bind(baseTransform);
+}
+</style>

package/src/components/Sheet/sheet.scss

@@ -1,60 +1,60 @@
-.vui-sheet {
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  background-color: var(--color-bg);
-  border-color: var(--color-border);
-  height: 100dvh;
-
-  &.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);
-  }
-
-  &.vui-sheet-position-top,
-  &.vui-sheet-position-bottom {
-    max-height: 35dvh;
-    width: 100%;
-  }
-
-  .vui-sheet-header,
-  .vui-sheet-content {
-    width: 100%;
-    padding: var(--space-m);
-  }
-
-  .vui-sheet-content {
-    flex: 1 1 0%;
-    overflow-y: auto;
-    height: 100%;
-  }
-
-  .vui-sheet-header {
-    display: flex;
-    gap: var(--space-m);
-    align-self: flex-start;
-
-    & + .vui-sheet-content {
-      padding-top: var(--space-s);
-    }
-  }
-}
+.vui-sheet {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  background-color: var(--color-bg);
+  border-color: var(--color-border);
+  height: 100dvh;
+
+  &.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);
+  }
+
+  &.vui-sheet-position-top,
+  &.vui-sheet-position-bottom {
+    max-height: 35dvh;
+    width: 100%;
+  }
+
+  .vui-sheet-header,
+  .vui-sheet-content {
+    width: 100%;
+    padding: var(--space-m);
+  }
+
+  .vui-sheet-content {
+    flex: 1 1 0%;
+    overflow-y: auto;
+    height: 100%;
+  }
+
+  .vui-sheet-header {
+    display: flex;
+    gap: var(--space-m);
+    align-self: flex-start;
+
+    & + .vui-sheet-content {
+      padding-top: var(--space-s);
+    }
+  }
+}

package/src/components/Skeleton/Skeleton.vue

@@ -1,43 +1,43 @@
-<!-- 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 {
-  radius?: string | number
-  width?: string | number
-  height?: string | number
-  circle?: boolean
-}
-
-const {
-  // @ts-expect-error I can't get ESLint to STOP moving DEFAULT_RADIUS below
-  // this props declaration wtf
-  radius = DEFAULT_RADIUS,
-  width = '100%',
-  height = '32px',
-  circle,
-} = defineProps<Props>()
-
-const DEFAULT_RADIUS = 'var(--border-radius-s)'
-
-// 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="{
-      borderRadius: bR,
-      width: w,
-      height: h,
-    }"
-  />
-</template>
+<!-- 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 {
+  radius?: string | number
+  width?: string | number
+  height?: string | number
+  circle?: boolean
+}
+
+const {
+  // @ts-expect-error I can't get ESLint to STOP moving DEFAULT_RADIUS below
+  // this props declaration wtf
+  radius = DEFAULT_RADIUS,
+  width = '100%',
+  height = '32px',
+  circle,
+} = defineProps<Props>()
+
+const DEFAULT_RADIUS = 'var(--border-radius-s)'
+
+// 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="{
+      borderRadius: bR,
+      width: w,
+      height: h,
+    }"
+  />
+</template>

package/src/components/Skeleton/skeleton.scss

@@ -1,14 +1,14 @@
-.vui-skeleton {
-  animation: pulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  background-color: var(--color-border);
-
-  @keyframes pulse {
-    0%,
-    100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.5;
-    }
-  }
-}
+.vui-skeleton {
+  animation: pulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  background-color: var(--color-border);
+
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+}

package/src/components/Spinner/Spinner.vue

@@ -1,42 +1,42 @@
-<script setup lang="ts">
-import type { Sizes } from '../../shared/types'
-import { computed } from 'vue'
-import { Size } from '../../shared/types'
-import './spinner.scss'
-
-interface Props {
-  size?: Sizes
-}
-
-const {
-  size = 's',
-} = defineProps<Props>()
-
-const w = computed(() => {
-  switch (size) {
-    case Size.s: return '16px'
-    case Size.l: return '38px'
-    case Size.m:
-    default: return '26px'
-  }
-})
-
-const bW = computed(() => {
-  switch (size) {
-    case Size.s: return '3px'
-    case Size.l: return '5px'
-    case Size.m:
-    default: return '4px'
-  }
-})
-</script>
-
-<template>
-  <div
-    :class="{ size }" class="vui-spinner" :style="{
-      width: w,
-      height: w,
-      borderWidth: bW,
-    }"
-  />
-</template>
+<script setup lang="ts">
+import type { Sizes } from '../../shared/types'
+import { computed } from 'vue'
+import { Size } from '../../shared/types'
+import './spinner.scss'
+
+interface Props {
+  size?: Sizes
+}
+
+const {
+  size = 's',
+} = defineProps<Props>()
+
+const w = computed(() => {
+  switch (size) {
+    case Size.s: return '16px'
+    case Size.l: return '38px'
+    case Size.m:
+    default: return '26px'
+  }
+})
+
+const bW = computed(() => {
+  switch (size) {
+    case Size.s: return '3px'
+    case Size.l: return '5px'
+    case Size.m:
+    default: return '4px'
+  }
+})
+</script>
+
+<template>
+  <div
+    :class="{ size }" class="vui-spinner" :style="{
+      width: w,
+      height: w,
+      borderWidth: bW,
+    }"
+  />
+</template>

package/src/components/Spinner/spinner.scss

@@ -1,46 +1,46 @@
-.vui-spinner {
-  --spinner-color: var(--color-text);
-  aspect-ratio: 1;
-  border-radius: 50%;
-  border: 3px solid var(--spinner-color);
-  animation:
-    l20-1 0.8s infinite linear alternate,
-    l20-2 1.6s infinite linear;
-}
-@keyframes l20-1 {
-  0% {
-    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
-  }
-  12.5% {
-    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
-  }
-  25% {
-    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
-  }
-  50% {
-    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
-  }
-  62.5% {
-    clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
-  }
-  75% {
-    clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
-  }
-  100% {
-    clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
-  }
-}
-@keyframes l20-2 {
-  0% {
-    transform: scaleY(1) rotate(0deg);
-  }
-  49.99% {
-    transform: scaleY(1) rotate(135deg);
-  }
-  50% {
-    transform: scaleY(-1) rotate(0deg);
-  }
-  100% {
-    transform: scaleY(-1) rotate(-135deg);
-  }
-}
+.vui-spinner {
+  --spinner-color: var(--color-text);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  border: 3px solid var(--spinner-color);
+  animation:
+    l20-1 0.8s infinite linear alternate,
+    l20-2 1.6s infinite linear;
+}
+@keyframes l20-1 {
+  0% {
+    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
+  }
+  12.5% {
+    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
+  }
+  25% {
+    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
+  }
+  50% {
+    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
+  }
+  62.5% {
+    clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
+  }
+  75% {
+    clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
+  }
+  100% {
+    clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
+  }
+}
+@keyframes l20-2 {
+  0% {
+    transform: scaleY(1) rotate(0deg);
+  }
+  49.99% {
+    transform: scaleY(1) rotate(135deg);
+  }
+  50% {
+    transform: scaleY(-1) rotate(0deg);
+  }
+  100% {
+    transform: scaleY(-1) rotate(-135deg);
+  }
+}

package/src/components/Switch/Switch.vue

@@ -1,30 +1,30 @@
-<script setup lang="ts">
-import { useId } from 'vue'
-import './switch.scss'
-
-interface Props {
-  label?: string
-  disabled?: boolean
-}
-
-const { label, disabled } = defineProps<Props>()
-const slots = defineSlots()
-const checked = defineModel<boolean>()
-const id = useId()
-</script>
-
-<template>
-  <div class="vui-switch" :class="{ disabled, checked }">
-    <input :id v-model="checked" type="checkbox">
-    <label :for="id">
-      <div class="vui-switch-icon">
-        <span class="vui-switch-indicator" />
-      </div>
-
-      <p v-if="!slots.default" class="vui-switch-content">{{ label }}</p>
-      <div v-else class="vui-switch-content">
-        <slot />
-      </div>
-    </label>
-  </div>
-</template>
+<script setup lang="ts">
+import { useId } from 'vue'
+import './switch.scss'
+
+interface Props {
+  label?: string
+  disabled?: boolean
+}
+
+const { label, disabled } = defineProps<Props>()
+const slots = defineSlots()
+const checked = defineModel<boolean>()
+const id = useId()
+</script>
+
+<template>
+  <div class="vui-switch" :class="{ disabled, checked }">
+    <input :id v-model="checked" type="checkbox">
+    <label :for="id">
+      <div class="vui-switch-icon">
+        <span class="vui-switch-indicator" />
+      </div>
+
+      <p v-if="!slots.default" class="vui-switch-content">{{ label }}</p>
+      <div v-else class="vui-switch-content">
+        <slot />
+      </div>
+    </label>
+  </div>
+</template>