@dolanske/vui 0.3.4 → 0.5.0

package/src/components/Alert/alert.scss

@@ -1,80 +1,80 @@
-.vui-alert {
-  display: flex;
-  gap: var(--space-s);
-  border-radius: var(--border-radius-m);
-  padding: var(--space-s);
-  font-size: var(--font-size-m);
-  flex-wrap: nowrap;
-  align-items: flex-start;
-
-  svg {
-    width: 22px;
-    height: 22px;
-  }
-
-  .vui-alert-content,
-  .vui-alert-default-content {
-    flex: 1;
-  }
-
-  .vui-alert-default-content {
-    padding-top: 3px;
-
-    strong {
-      display: block;
-      font-size: var(--font-size-m);
-      font-weight: 550;
-      margin-bottom: 6px;
-    }
-
-    p {
-      font-size: var(--font-size-ms);
-      color: var(--color-text-light);
-      font-weight: 350;
-    }
-  }
-
-  .vui-alert-content {
-    font-size: var(--font-size-m);
-  }
-
-  &.vui-alert-variant-neutral {
-    border: 1px solid var(--color-border);
-
-    svg path {
-      color: var(--color-text);
-    }
-  }
-
-  &.vui-alert-variant-info {
-    border: 1px solid var(--color-border-blue);
-
-    svg path {
-      color: var(--color-text-blue);
-    }
-  }
-
-  &.vui-alert-variant-success {
-    border: 1px solid var(--color-border-green);
-
-    svg path {
-      color: var(--color-text-green);
-    }
-  }
-
-  &.vui-alert-variant-warning {
-    border: 1px solid var(--color-border-yellow);
-
-    svg path {
-      color: var(--color-text-yellow);
-    }
-  }
-
-  &.vui-alert-variant-danger {
-    border: 1px solid var(--color-border-red);
-
-    svg path {
-      color: var(--color-text-red);
-    }
-  }
-}
+.vui-alert {
+  display: flex;
+  gap: var(--space-s);
+  border-radius: var(--border-radius-m);
+  padding: var(--space-s);
+  font-size: var(--font-size-m);
+  flex-wrap: nowrap;
+  align-items: flex-start;
+
+  svg {
+    width: 22px;
+    height: 22px;
+  }
+
+  .vui-alert-content,
+  .vui-alert-default-content {
+    flex: 1;
+  }
+
+  .vui-alert-default-content {
+    padding-top: 3px;
+
+    strong {
+      display: block;
+      font-size: var(--font-size-m);
+      font-weight: 550;
+      margin-bottom: 6px;
+    }
+
+    p {
+      font-size: var(--font-size-ms);
+      color: var(--color-text-light);
+      font-weight: 350;
+    }
+  }
+
+  .vui-alert-content {
+    font-size: var(--font-size-m);
+  }
+
+  &.vui-alert-variant-neutral {
+    border: 1px solid var(--color-border);
+
+    svg path {
+      color: var(--color-text);
+    }
+  }
+
+  &.vui-alert-variant-info {
+    border: 1px solid var(--color-border-blue);
+
+    svg path {
+      color: var(--color-text-blue);
+    }
+  }
+
+  &.vui-alert-variant-success {
+    border: 1px solid var(--color-border-green);
+
+    svg path {
+      color: var(--color-text-green);
+    }
+  }
+
+  &.vui-alert-variant-warning {
+    border: 1px solid var(--color-border-yellow);
+
+    svg path {
+      color: var(--color-text-yellow);
+    }
+  }
+
+  &.vui-alert-variant-danger {
+    border: 1px solid var(--color-border-red);
+
+    svg path {
+      color: var(--color-text-red);
+    }
+  }
+}

package/src/components/Avatar/Avatar.vue

@@ -1,50 +1,50 @@
-<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),
-      }),
-    }"
-  >
-    <img
-      v-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),
+      }),
+    }"
+  >
+    <img
+      v-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-ms);
-    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-ms);
+    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'
-  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'
+  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,89 +1,89 @@
-.vui-badge {
-  display: inline-flex;
-  gap: var(--space-s);
-  place-items: center;
-  height: 26px;
-  padding-inline: var(--space-s);
-  border-radius: 999px;
-  font-weight: 300;
-  font-size: var(--font-size-s);
-
-  &.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 {
-    &:not(.outline) {
-      background-color: var(--color-bg-blue-lowered);
-
-      &.filled {
-        background-color: var(--color-text-blue);
-        color: var(--color-text-invert);
-        border-color: transparent;
-      }
-    }
-
-    color: var(--color-text);
-    border: 1px solid var(--color-border-blue);
-  }
-
-  &.vui-badge-variant-success {
-    &:not(.outline) {
-      background-color: var(--color-bg-green-lowered);
-
-      &.filled {
-        background-color: var(--color-text-green);
-        color: var(--color-text-invert);
-        border-color: transparent;
-      }
-    }
-
-    color: var(--color-text);
-    border: 1px solid var(--color-border-green);
-  }
-
-  &.vui-badge-variant-warning {
-    &:not(.outline) {
-      background-color: var(--color-bg-yellow-lowered);
-
-      &.filled {
-        background-color: var(--color-text-yellow);
-        color: var(--color-text-invert);
-        border-color: transparent;
-      }
-    }
-
-    color: var(--color-text);
-    border: 1px solid var(--color-border-yellow);
-  }
-
-  &.vui-badge-variant-danger {
-    &:not(.outline) {
-      background-color: var(--color-bg-red-lowered);
-
-      &.filled {
-        background-color: var(--color-text-red);
-        color: var(--color-text-invert);
-        border-color: transparent;
-      }
-    }
-
-    color: var(--color-text);
-    border: 1px solid var(--color-border-red);
-  }
-}
+.vui-badge {
+  display: inline-flex;
+  gap: var(--space-s);
+  place-items: center;
+  height: 26px;
+  padding-inline: var(--space-s);
+  border-radius: 999px;
+  font-weight: 300;
+  font-size: var(--font-size-s);
+
+  &.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 {
+    &:not(.outline) {
+      background-color: var(--color-bg-blue-lowered);
+
+      &.filled {
+        background-color: var(--color-text-blue);
+        color: var(--color-text-invert);
+        border-color: transparent;
+      }
+    }
+
+    color: var(--color-text);
+    border: 1px solid var(--color-border-blue);
+  }
+
+  &.vui-badge-variant-success {
+    &:not(.outline) {
+      background-color: var(--color-bg-green-lowered);
+
+      &.filled {
+        background-color: var(--color-text-green);
+        color: var(--color-text-invert);
+        border-color: transparent;
+      }
+    }
+
+    color: var(--color-text);
+    border: 1px solid var(--color-border-green);
+  }
+
+  &.vui-badge-variant-warning {
+    &:not(.outline) {
+      background-color: var(--color-bg-yellow-lowered);
+
+      &.filled {
+        background-color: var(--color-text-yellow);
+        color: var(--color-text-invert);
+        border-color: transparent;
+      }
+    }
+
+    color: var(--color-text);
+    border: 1px solid var(--color-border-yellow);
+  }
+
+  &.vui-badge-variant-danger {
+    &:not(.outline) {
+      background-color: var(--color-bg-red-lowered);
+
+      &.filled {
+        background-color: var(--color-text-red);
+        color: var(--color-text-invert);
+        border-color: transparent;
+      }
+    }
+
+    color: var(--color-text);
+    border: 1px solid var(--color-border-red);
+  }
+}

package/src/components/Breadcrumbs/BreadcrumbItem.vue

@@ -1,26 +1,26 @@
-<script setup lang='ts'>
-import '../Button/button.scss'
-
-export interface BreadcrumbItemProps {
-  label?: string
-  path?: string
-}
-
-const props = defineProps<BreadcrumbItemProps>()
-</script>
-
-<template>
-  <li>
-    <a v-if="props.path" :href="props.path" class="vui-breadcrumb-link">
-      <slot>
-        {{ props.label }}
-      </slot>
-    </a>
-
-    <slot v-else>
-      <span class="vui-breadcrumb-text-simple">
-        {{ props.label }}
-      </span>
-    </slot>
-  </li>
-</template>
+<script setup lang='ts'>
+import '../Button/button.scss'
+
+export interface BreadcrumbItemProps {
+  label?: string
+  path?: string
+}
+
+const props = defineProps<BreadcrumbItemProps>()
+</script>
+
+<template>
+  <li>
+    <a v-if="props.path" :href="props.path" class="vui-breadcrumb-link">
+      <slot>
+        {{ props.label }}
+      </slot>
+    </a>
+
+    <slot v-else>
+      <span class="vui-breadcrumb-text-simple">
+        {{ props.label }}
+      </span>
+    </slot>
+  </li>
+</template>