@dolanske/vui 1.0.4 → 1.1.1

package/src/components/Avatar/Avatar.vue

@@ -1,53 +1,53 @@
-<script setup lang="ts">
-import type { Sizes } from '../../shared/types'
-import { Icon } from '@iconify/vue'
-import { ref } from 'vue'
-import { formatUnitValue } from '../../shared/helpers'
-import { Size } from '../../shared/types'
-import './avatar.scss'
-
-interface Props {
-  size?: Sizes | number
-  url?: string
-  fallback?: string
-  icon?: string
-  alt?: string
-}
-
-const {
-  size = Size.m,
-  url,
-  fallback,
-  alt = 'avatar',
-} = defineProps<Props>()
-
-const showFallback = ref(false)
-</script>
-
-<template>
-  <div
-    class="vui-avatar"
-    :class="[`vui-avatar-size-${typeof size === 'number' ? 'l' : size}`]"
-    :style="{
-      ...(typeof size === 'number' && {
-        '--avatar-size': formatUnitValue(size),
-      }),
-    }"
-  >
-    <span v-if="$slots.default">
-      <slot />
-    </span>
-    <img
-      v-else-if="url && !showFallback"
-      :alt
-      :src="url"
-      @error="showFallback = true"
-    >
-    <strong v-else>
-      <template v-if="showFallback">
-        {{ fallback }}
-      </template>
-      <Icon v-else :icon="icon ?? 'ph:user'" />
-    </strong>
-  </div>
-</template>
+<script setup lang="ts">
+import type { Sizes } from '../../shared/types'
+import { Icon } from '@iconify/vue'
+import { ref } from 'vue'
+import { formatUnitValue } from '../../shared/helpers'
+import { Size } from '../../shared/types'
+import './avatar.scss'
+
+interface Props {
+  size?: Sizes | number
+  url?: string
+  fallback?: string
+  icon?: string
+  alt?: string
+}
+
+const {
+  size = Size.m,
+  url,
+  fallback,
+  alt = 'avatar',
+} = defineProps<Props>()
+
+const showFallback = ref(false)
+</script>
+
+<template>
+  <div
+    class="vui-avatar"
+    :class="[`vui-avatar-size-${typeof size === 'number' ? 'l' : size}`]"
+    :style="{
+      ...(typeof size === 'number' && {
+        '--avatar-size': formatUnitValue(size),
+      }),
+    }"
+  >
+    <span v-if="$slots.default">
+      <slot />
+    </span>
+    <img
+      v-else-if="url && !showFallback"
+      :alt
+      :src="url"
+      @error="showFallback = true"
+    >
+    <strong v-else>
+      <template v-if="showFallback">
+        {{ fallback }}
+      </template>
+      <Icon v-else :icon="icon ?? 'ph:user'" />
+    </strong>
+  </div>
+</template>

package/src/components/Avatar/avatar.scss

@@ -1,52 +1,52 @@
-.vui-avatar {
-  --avatar-size: 36px;
-
-  &.vui-avatar-size-s {
-    --avatar-size: 28px;
-
-    strong {
-      font-size: var(--font-size-xs);
-    }
-  }
-
-  &.vui-avatar-size-l {
-    --avatar-size: 48px;
-
-    strong {
-      font-size: var(--font-size-l);
-    }
-  }
-
-  width: var(--avatar-size);
-  height: var(--avatar-size);
-  border-radius: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  background-color: var(--color-bg-raised);
-  font-weight: 500;
-
-  svg {
-    color: var(--color-text-light);
-    font-size: inherit;
-  }
-
-  strong {
-    display: block;
-    font-size: var(--font-size-m);
-    line-height: 1;
-  }
-
-  img {
-    display: block;
-    height: 100%;
-    width: 100%;
-    object-position: center;
-    object-fit: cover;
-  }
-
-  img[src=''] {
-    display: none;
-  }
-}
+.vui-avatar {
+  --avatar-size: 36px;
+
+  &.vui-avatar-size-s {
+    --avatar-size: 28px;
+
+    strong {
+      font-size: var(--font-size-xs);
+    }
+  }
+
+  &.vui-avatar-size-l {
+    --avatar-size: 48px;
+
+    strong {
+      font-size: var(--font-size-l);
+    }
+  }
+
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background-color: var(--color-bg-raised);
+  font-weight: 500;
+
+  svg {
+    color: var(--color-text-light);
+    font-size: inherit;
+  }
+
+  strong {
+    display: block;
+    font-size: var(--font-size-m);
+    line-height: 1;
+  }
+
+  img {
+    display: block;
+    height: 100%;
+    width: 100%;
+    object-position: center;
+    object-fit: cover;
+  }
+
+  img[src=''] {
+    display: none;
+  }
+}

package/src/components/Badge/Badge.vue

@@ -1,21 +1,21 @@
-<script setup lang="ts">
-import './badge.scss'
-
-interface Props {
-  variant?: 'neutral' | 'danger' | 'warning' | 'success' | 'info' | 'accent'
-  outline?: boolean
-  filled?: boolean
-}
-
-const {
-  variant = 'neutral',
-  outline,
-  filled,
-} = defineProps<Props>()
-</script>
-
-<template>
-  <div class="vui-badge" :class="[{ outline, filled }, `vui-badge-variant-${variant}`]">
-    <slot />
-  </div>
-</template>
+<script setup lang="ts">
+import './badge.scss'
+
+interface Props {
+  variant?: 'neutral' | 'danger' | 'warning' | 'success' | 'info' | 'accent'
+  outline?: boolean
+  filled?: boolean
+}
+
+const {
+  variant = 'neutral',
+  outline,
+  filled,
+} = defineProps<Props>()
+</script>
+
+<template>
+  <div class="vui-badge" :class="[{ outline, filled }, `vui-badge-variant-${variant}`]">
+    <slot />
+  </div>
+</template>

package/src/components/Badge/badge.scss

@@ -1,206 +1,210 @@
-.vui-badge {
-  display: inline-flex;
-  gap: var(--space-s);
-  place-items: center;
-  height: 26px;
-  padding-inline: var(--space-s);
-  border-radius: 999px;
-  font-size: var(--font-size-s);
-  color: var(--color-text);
-  border: 1px solid transparent;
-
-  svg,
-  path {
-    color: var(--color-text);
-  }
-
-  &.filled {
-    font-weight: 500;
-  }
-
-  &.vui-badge-variant-neutral {
-    &:not(.outline) {
-      background-color: var(--color-bg-raised);
-
-      &.filled {
-        background-color: var(--color-text);
-        color: var(--color-text-invert);
-        border-color: transparent;
-      }
-    }
-
-    color: var(--color-text);
-    // border: 1px solid var(--color-border);
-  }
-
-  &.vui-badge-variant-info {
-    color: var(--color-text-blue);
-
-    svg,
-    path {
-      color: var(--color-text-blue);
-    }
-
-    &:not(.outline) {
-      background-color: hsla(from var(--color-bg-blue-raised) h s l / 0.2);
-
-      &.filled {
-        background-color: var(--color-text-blue);
-        color: var(--color-text-invert);
-
-        svg,
-        path {
-          color: var(--color-text-invert);
-        }
-      }
-    }
-
-    &.outline {
-      border-color: var(--color-text-blue);
-    }
-  }
-
-  &.vui-badge-variant-success {
-    color: var(--color-text-green);
-
-    svg,
-    path {
-      color: var(--color-text-green);
-    }
-
-    &:not(.outline) {
-      background-color: hsla(from var(--color-bg-green-raised) h s l / 0.15);
-
-      &.filled {
-        background-color: var(--color-text-green);
-        color: var(--color-text-invert);
-
-        svg,
-        path {
-          color: var(--color-text-invert);
-        }
-      }
-    }
-
-    &.outline {
-      border-color: var(--color-text-green);
-    }
-  }
-
-  &.vui-badge-variant-warning {
-    color: var(--color-text-yellow);
-
-    svg,
-    path {
-      color: var(--color-text-yellow);
-    }
-
-    &:not(.outline) {
-      background-color: hsla(from var(--color-bg-yellow-raised) h s l / 0.15);
-
-      &.filled {
-        background-color: var(--color-text-yellow);
-        color: var(--color-text-invert);
-
-        svg,
-        path {
-          color: var(--color-text-invert);
-        }
-      }
-    }
-
-    &.outline {
-      border-color: var(--color-text-yellow);
-    }
-  }
-
-  &.vui-badge-variant-danger {
-    color: var(--color-text-red);
-
-    svg,
-    path {
-      color: var(--color-text-red);
-    }
-
-    &:not(.outline) {
-      background-color: hsla(from var(--color-bg-red-raised) h s l / 0.15);
-
-      &.filled {
-        background-color: var(--color-text-red);
-        color: var(--color-text-invert);
-
-        svg,
-        path {
-          color: var(--color-text-yellow);
-        }
-      }
-    }
-
-    &.outline {
-      border-color: var(--color-text-red);
-    }
-
-    color: var(--color-text-red);
-  }
-
-  &.vui-badge-variant-accent {
-    color: var(--color-accent);
-
-    svg,
-    path {
-      color: var(--color-accent);
-    }
-
-    &:not(.outline) {
-      background-color: hsla(from var(--color-bg-accent-raised) h s l / 0.15);
-
-      &.filled {
-        background-color: var(--color-accent);
-        color: var(--color-text-invert);
-
-        svg,
-        path {
-          color: var(--color-text-invert);
-        }
-      }
-    }
-
-    &.outline {
-      border-color: var(--color-accent);
-    }
-  }
-}
-
-:root.light {
-  .vui-badge.vui-badge-variant-accent:not(.outline).filled,
-  .vui-badge.vui-badge-variant-warning:not(.outline).filled {
-    color: var(--color-text);
-
-    svg,
-    path {
-      color: var(--color-text);
-    }
-  }
-
-  .vui-badge.vui-badge-variant-success:not(.filled, .outline) {
-    background-color: hsla(from var(--color-text-green) h s l / 0.15);
-  }
-
-  .vui-badge.vui-badge-variant-warning:not(.outline).filled {
-    background-color: var(--color-bg-yellow-raised);
-  }
-
-  .vui-badge.vui-badge-variant-success:not(.outline).filled {
-    color: var(--color-text-invert);
-    background-color: var(--color-text-green);
-
-    svg,
-    path {
-      color: var(--color-text-invert);
-    }
-  }
-
-  .vui-badge:not(.filled) {
-    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
-  }
-}
+.vui-badge {
+  --vui-badge-padding-block: 2px;
+  --vui-badge-padding-inline: var(--space-s);
+  --vui-badge-font-size: var(--font-size-s);
+
+  display: inline-flex;
+  gap: var(--space-xxs);
+  place-items: center;
+  padding-inline: var(--vui-badge-padding-inline);
+  padding-block: var(--vui-badge-padding-block);
+  border-radius: 999px;
+  font-size: var(--vui-badge-font-size);
+  color: var(--color-text);
+  border: 1px solid transparent;
+
+  svg,
+  path {
+    color: var(--color-text);
+  }
+
+  &.filled {
+    font-weight: 500;
+  }
+
+  &.vui-badge-variant-neutral {
+    &:not(.outline) {
+      background-color: var(--color-bg-raised);
+
+      &.filled {
+        background-color: var(--color-text);
+        color: var(--color-text-invert);
+        border-color: transparent;
+      }
+    }
+
+    color: var(--color-text);
+    // border: 1px solid var(--color-border);
+  }
+
+  &.vui-badge-variant-info {
+    color: var(--color-text-blue);
+
+    svg,
+    path {
+      color: var(--color-text-blue);
+    }
+
+    &:not(.outline) {
+      background-color: hsla(from var(--color-bg-blue-raised) h s l / 0.2);
+
+      &.filled {
+        background-color: var(--color-text-blue);
+        color: var(--color-text-invert);
+
+        svg,
+        path {
+          color: var(--color-text-invert);
+        }
+      }
+    }
+
+    &.outline {
+      border-color: var(--color-text-blue);
+    }
+  }
+
+  &.vui-badge-variant-success {
+    color: var(--color-text-green);
+
+    svg,
+    path {
+      color: var(--color-text-green);
+    }
+
+    &:not(.outline) {
+      background-color: hsla(from var(--color-bg-green-raised) h s l / 0.15);
+
+      &.filled {
+        background-color: var(--color-text-green);
+        color: var(--color-text-invert);
+
+        svg,
+        path {
+          color: var(--color-text-invert);
+        }
+      }
+    }
+
+    &.outline {
+      border-color: var(--color-text-green);
+    }
+  }
+
+  &.vui-badge-variant-warning {
+    color: var(--color-text-yellow);
+
+    svg,
+    path {
+      color: var(--color-text-yellow);
+    }
+
+    &:not(.outline) {
+      background-color: hsla(from var(--color-bg-yellow-raised) h s l / 0.15);
+
+      &.filled {
+        background-color: var(--color-text-yellow);
+        color: var(--color-text-invert);
+
+        svg,
+        path {
+          color: var(--color-text-invert);
+        }
+      }
+    }
+
+    &.outline {
+      border-color: var(--color-text-yellow);
+    }
+  }
+
+  &.vui-badge-variant-danger {
+    color: var(--color-text-red);
+
+    svg,
+    path {
+      color: var(--color-text-red);
+    }
+
+    &:not(.outline) {
+      background-color: hsla(from var(--color-bg-red-raised) h s l / 0.15);
+
+      &.filled {
+        background-color: var(--color-text-red);
+        color: var(--color-text-invert);
+
+        svg,
+        path {
+          color: var(--color-text-yellow);
+        }
+      }
+    }
+
+    &.outline {
+      border-color: var(--color-text-red);
+    }
+
+    color: var(--color-text-red);
+  }
+
+  &.vui-badge-variant-accent {
+    color: var(--color-accent);
+
+    svg,
+    path {
+      color: var(--color-accent);
+    }
+
+    &:not(.outline) {
+      background-color: hsla(from var(--color-bg-accent-raised) h s l / 0.15);
+
+      &.filled {
+        background-color: var(--color-accent);
+        color: var(--color-text-invert);
+
+        svg,
+        path {
+          color: var(--color-text-invert);
+        }
+      }
+    }
+
+    &.outline {
+      border-color: var(--color-accent);
+    }
+  }
+}
+
+:root.light {
+  .vui-badge.vui-badge-variant-accent:not(.outline).filled,
+  .vui-badge.vui-badge-variant-warning:not(.outline).filled {
+    color: var(--color-text);
+
+    svg,
+    path {
+      color: var(--color-text);
+    }
+  }
+
+  .vui-badge.vui-badge-variant-success:not(.filled, .outline) {
+    background-color: hsla(from var(--color-text-green) h s l / 0.15);
+  }
+
+  .vui-badge.vui-badge-variant-warning:not(.outline).filled {
+    background-color: var(--color-bg-yellow-raised);
+  }
+
+  .vui-badge.vui-badge-variant-success:not(.outline).filled {
+    color: var(--color-text-invert);
+    background-color: var(--color-text-green);
+
+    svg,
+    path {
+      color: var(--color-text-invert);
+    }
+  }
+
+  .vui-badge:not(.filled) {
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+  }
+}