@dolanske/vui 1.0.3 → 1.1.0

package/src/components/Breadcrumbs/BreadcrumbItem.vue

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

package/src/components/Breadcrumbs/Breadcrumbs.vue

@@ -1,30 +1,30 @@
-<script setup lang='ts'>
-import type { VNode } from 'vue'
-import type { BreadcrumbItemProps } from './BreadcrumbItem.vue'
-import { Icon } from '@iconify/vue'
-import './breadcrumbs.scss'
-
-interface Props {
-  separator?: string
-}
-
-const {
-  separator = 'ph:caret-right',
-} = defineProps<Props>()
-
-const slots = defineSlots<{
-  default: () => Array<VNode & { props: BreadcrumbItemProps }>
-}>()
-</script>
-
-<template>
-  <ul class="vui-breadcrumbs">
-    <template v-for="(vnode, index) of slots.default()" :key="vnode.props?.label || index">
-      <component :is="vnode" />
-      <template v-if="index !== slots.default().length - 1">
-        <Icon v-if="separator.length > 1 && separator.includes(':')" class="vui-breadcrumb-custom-separator" :icon="separator" />
-        <span v-else class="vui-breadcrumb-custom-separator">{{ separator }}</span>
-      </template>
-    </template>
-  </ul>
-</template>
+<script setup lang='ts'>
+import type { VNode } from 'vue'
+import type { BreadcrumbItemProps } from './BreadcrumbItem.vue'
+import { Icon } from '@iconify/vue'
+import './breadcrumbs.scss'
+
+interface Props {
+  separator?: string
+}
+
+const {
+  separator = 'ph:caret-right',
+} = defineProps<Props>()
+
+const slots = defineSlots<{
+  default: () => Array<VNode & { props: BreadcrumbItemProps }>
+}>()
+</script>
+
+<template>
+  <ul class="vui-breadcrumbs">
+    <template v-for="(vnode, index) of slots.default()" :key="vnode.props?.label || index">
+      <component :is="vnode" />
+      <template v-if="index !== slots.default().length - 1">
+        <Icon v-if="separator.length > 1 && separator.includes(':')" class="vui-breadcrumb-custom-separator" :icon="separator" />
+        <span v-else class="vui-breadcrumb-custom-separator">{{ separator }}</span>
+      </template>
+    </template>
+  </ul>
+</template>

package/src/components/Breadcrumbs/breadcrumbs.scss

@@ -1,31 +1,31 @@
-.vui-breadcrumbs {
-  display: flex;
-  gap: var(--space-s);
-  align-items: center;
-
-  .vui-breadcrumb-custom-separator {
-    color: var(--color-text-lighter);
-    font-size: var(--font-size-m);
-  }
-
-  li {
-    font-size: var(--font-size-m);
-    color: var(--color-text-lighter);
-
-    .vui-breadcrumb-text-simple {
-      color: var(--color-text-lighter);
-    }
-
-    .vui-breadcrumb-link {
-      color: var(--color-text);
-      background: transparent;
-      text-underline-offset: 4px;
-      text-decoration: none;
-
-      &:hover {
-        text-decoration: underline;
-      }
-      // cursor: pointer;
-    }
-  }
-}
+.vui-breadcrumbs {
+  display: flex;
+  gap: var(--space-s);
+  align-items: center;
+
+  .vui-breadcrumb-custom-separator {
+    color: var(--color-text-lighter);
+    font-size: var(--font-size-m);
+  }
+
+  li {
+    font-size: var(--font-size-m);
+    color: var(--color-text-lighter);
+
+    .vui-breadcrumb-text-simple {
+      color: var(--color-text-lighter);
+    }
+
+    .vui-breadcrumb-link {
+      color: var(--color-text);
+      background: transparent;
+      text-underline-offset: 4px;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+      // cursor: pointer;
+    }
+  }
+}

package/src/components/Button/Button.vue

@@ -1,85 +1,85 @@
-<script setup lang="ts">
-import type { Sizes } from '../../shared/types'
-import { Icon } from '@iconify/vue'
-import { computed } from 'vue'
-import { Size } from '../../shared/types'
-import Spinner from '../Spinner/Spinner.vue'
-import './button.scss'
-
-export type Variants = 'fill' | 'danger' | 'success' | 'link' | 'accent' | 'gray'
-
-interface Props {
-  // Provide URL to turn button into anchor
-  // href?: string
-  // target?: string
-
-  // State props
-  loading?: boolean
-
-  size?: Sizes
-  expand?: boolean
-  square?: boolean
-  icon?: string
-
-  variant?: Variants
-  outline?: boolean
-  // dashed?: boolean
-  // outlineDashed?: boolean
-  disabled?: boolean
-  plain?: boolean
-}
-
-const {
-  loading,
-  disabled,
-  expand,
-  size = 'm',
-  variant = 'gray',
-  icon,
-  // dashed,
-} = defineProps<Props>()
-
-const height = computed(() => {
-  switch (size) {
-    case Size.s: return '28px'
-    case Size.l: return '40px'
-    case Size.m:
-    default: return 'var(--interactive-el-height)'
-  }
-})
-
-const padding = computed(() => {
-  switch (size) {
-    case Size.s: return '4px'
-    case Size.l: return '16px'
-    case Size.m:
-    default: return '8px'
-  }
-})
-</script>
-
-<template>
-  <button
-    class="vui-button"
-    :class="[{ loading, expand, disabled, plain, icon, square, outline }, `vui-button-variant-${variant}`]"
-    :disabled
-    role="button"
-    :style="{
-      '--button-height': height,
-      '--button-padding': padding,
-    }"
-    :name="icon && !$slots.default ? icon.split(':')[1] : undefined"
-  >
-    <Spinner size="s" />
-    <div class="vui-button-slot">
-      <div class="vui-button-slot-start">
-        <slot name="start" />
-      </div>
-      <Icon v-if="icon" :icon="icon" />
-      <slot v-else />
-      <div class="vui-button-slot-end">
-        <slot name="end" />
-      </div>
-    </div>
-  </button>
-</template>
+<script setup lang="ts">
+import type { Sizes } from '../../shared/types'
+import { Icon } from '@iconify/vue'
+import { computed } from 'vue'
+import { Size } from '../../shared/types'
+import Spinner from '../Spinner/Spinner.vue'
+import './button.scss'
+
+export type Variants = 'fill' | 'danger' | 'success' | 'link' | 'accent' | 'gray'
+
+interface Props {
+  // Provide URL to turn button into anchor
+  // href?: string
+  // target?: string
+
+  // State props
+  loading?: boolean
+
+  size?: Sizes
+  expand?: boolean
+  square?: boolean
+  icon?: string
+
+  variant?: Variants
+  outline?: boolean
+  // dashed?: boolean
+  // outlineDashed?: boolean
+  disabled?: boolean
+  plain?: boolean
+}
+
+const {
+  loading,
+  disabled,
+  expand,
+  size = 'm',
+  variant = 'gray',
+  icon,
+  // dashed,
+} = defineProps<Props>()
+
+const height = computed(() => {
+  switch (size) {
+    case Size.s: return '28px'
+    case Size.l: return '40px'
+    case Size.m:
+    default: return 'var(--interactive-el-height)'
+  }
+})
+
+const padding = computed(() => {
+  switch (size) {
+    case Size.s: return '4px'
+    case Size.l: return '16px'
+    case Size.m:
+    default: return '8px'
+  }
+})
+</script>
+
+<template>
+  <button
+    class="vui-button"
+    :class="[{ loading, expand, disabled, plain, icon, square, outline }, `vui-button-variant-${variant}`]"
+    :disabled
+    role="button"
+    :style="{
+      '--button-height': height,
+      '--button-padding': padding,
+    }"
+    :name="icon && !$slots.default ? icon.split(':')[1] : undefined"
+  >
+    <Spinner size="s" />
+    <div class="vui-button-slot">
+      <div class="vui-button-slot-start">
+        <slot name="start" />
+      </div>
+      <Icon v-if="icon" :icon="icon" />
+      <slot v-else />
+      <div class="vui-button-slot-end">
+        <slot name="end" />
+      </div>
+    </div>
+  </button>
+</template>