@dolanske/vui 0.3.4 → 0.5.0

package/src/components/Breadcrumbs/Breadcrumbs.vue

@@ -1,33 +1,33 @@
-<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">
-      <component
-        :is="vnode"
-        v-bind="vnode.props"
-      />
-      <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">
+      <component
+        :is="vnode"
+        v-bind="vnode.props"
+      />
+      <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,30 +1,30 @@
-.vui-breadcrumbs {
-  display: flex;
-  gap: var(--space-m);
-  align-items: center;
-
-  .vui-breadcrumb-custom-separator {
-    color: var(--color-text-lighter);
-  }
-
-  li {
-    font-size: var(--font-size-s);
-    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-m);
+  align-items: center;
+
+  .vui-breadcrumb-custom-separator {
+    color: var(--color-text-lighter);
+  }
+
+  li {
+    font-size: var(--font-size-s);
+    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,90 +1,90 @@
-<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 = 'default' | 'danger' | 'success' | 'link' | 'blue' | 'accent'
-
-interface Props {
-  // Provide URL to turn button into anchor
-  // href?: string
-  // target?: string
-
-  // State props
-  loading?: boolean
-  expand?: boolean
-  square?: boolean
-  dashed?: boolean
-  disabled?: boolean
-  size?: Sizes
-  /**
-   * Sets the hover styling property
-   */
-  active?: boolean
-  /**
-   * No styling applied to the button unless hovered
-   */
-  plain?: boolean
-  variant?: Variants
-  /**
-   * The children will be set to an icon and the icon will become a square
-   */
-  icon?: string
-}
-
-const {
-  loading,
-  disabled,
-  expand,
-  size = 'm',
-  variant = 'default',
-  icon,
-  dashed,
-} = defineProps<Props>()
-
-const height = computed(() => {
-  switch (size) {
-    case Size.s: return '24px'
-    case Size.l: return '40px'
-    case Size.m:
-    default: return '34px'
-  }
-})
-
-const padding = computed(() => {
-  switch (size) {
-    case Size.s: return '5px'
-    case Size.l: return '16px'
-    case Size.m:
-    default: return '8px'
-  }
-})
-</script>
-
-<template>
-  <button
-    class="vui-button"
-    :class="[{ loading, expand, disabled, plain, active, icon, square, dashed }, `vui-button-variant-${variant}`]"
-    :disabled
-    role="button"
-    :style="{
-      '--button-height': height,
-      '--button-padding': padding,
-    }"
-  >
-    <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 = 'default' | 'danger' | 'success' | 'link' | 'blue' | 'accent'
+
+interface Props {
+  // Provide URL to turn button into anchor
+  // href?: string
+  // target?: string
+
+  // State props
+  loading?: boolean
+  expand?: boolean
+  square?: boolean
+  dashed?: boolean
+  disabled?: boolean
+  size?: Sizes
+  /**
+   * Sets the hover styling property
+   */
+  active?: boolean
+  /**
+   * No styling applied to the button unless hovered
+   */
+  plain?: boolean
+  variant?: Variants
+  /**
+   * The children will be set to an icon and the icon will become a square
+   */
+  icon?: string
+}
+
+const {
+  loading,
+  disabled,
+  expand,
+  size = 'm',
+  variant = 'default',
+  icon,
+  dashed,
+} = defineProps<Props>()
+
+const height = computed(() => {
+  switch (size) {
+    case Size.s: return '24px'
+    case Size.l: return '40px'
+    case Size.m:
+    default: return 'var(--interactive-el-height)'
+  }
+})
+
+const padding = computed(() => {
+  switch (size) {
+    case Size.s: return '5px'
+    case Size.l: return '16px'
+    case Size.m:
+    default: return '8px'
+  }
+})
+</script>
+
+<template>
+  <button
+    class="vui-button"
+    :class="[{ loading, expand, disabled, plain, active, icon, square, dashed }, `vui-button-variant-${variant}`]"
+    :disabled
+    role="button"
+    :style="{
+      '--button-height': height,
+      '--button-padding': padding,
+    }"
+  >
+    <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>

package/src/components/Button/button.scss

@@ -1,176 +1,178 @@
-.vui-button {
-  --button-height: 34px;
-  --button-padding: 8px;
-
-  &.disabled {
-    pointer-events: none;
-    color: var(--color-text-lighter) !important;
-    cursor: not-allowed !important;
-    filter: saturate(50%) opacity(0.65);
-
-    svg path {
-      color: var(--color-text-lighter) !important;
-    }
-  }
-
-  &.expand {
-    width: 100%;
-  }
-
-  &.loading {
-    .vui-spinner {
-      opacity: 1;
-    }
-
-    .vui-button-slot {
-      opacity: 0;
-    }
-  }
-
-  &.icon {
-    width: var(--button-height);
-    padding: 0;
-
-    .vui-button-slot {
-      svg {
-        width: 18px;
-        height: 18px;
-      }
-    }
-  }
-
-  &.square {
-    width: var(--button-height);
-    padding: 0;
-  }
-
-  &.dashed {
-    border-style: dashed;
-  }
-
-  height: var(--button-height);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--border-radius-s);
-  background: transparent;
-  padding-inline: var(--button-padding);
-  font-size: var(--font-size-s);
-  position: relative;
-  transition: var(--transition);
-  border: 1px solid transparent;
-  background-color: transparent;
-  color: var(--color-text);
-
-  // Default gray
-
-  .vui-button-slot {
-    display: flex;
-    place-items: center;
-    transition: var(--transition);
-    opacity: 1;
-  }
-
-  .vui-button-slot-start,
-  .vui-button-slot-end {
-    display: flex;
-    place-items: center;
-  }
-
-  .vui-button-slot-start {
-    margin-right: 6px;
-  }
-
-  .vui-button-slot-end {
-    margin-left: 6px;
-  }
-
-  .vui-spinner {
-    transition: var(--transition);
-    opacity: 0;
-    position: absolute;
-    pointer-events: none;
-  }
-
-  // Variants
-  &.vui-button-variant-default {
-    &:not(.plain) {
-      color: var(--color-text);
-      background-color: var(--color-button-gray);
-      border: 1px solid var(--color-border);
-    }
-
-    &.active,
-    &:hover {
-      background-color: var(--color-button-gray-hover);
-    }
-  }
-
-  &.vui-button-variant-danger {
-    &:not(.plain) {
-      color: var(--color-text);
-      background-color: var(--color-bg-red-lowered);
-      border: 1px solid var(--color-border-red);
-    }
-
-    &.active,
-    &:hover {
-      border: 1px solid var(--color-bg-red-raised);
-      background-color: var(--color-bg-red-raised);
-    }
-  }
-
-  &.vui-button-variant-success {
-    &:not(.plain) {
-      color: var(--color-text);
-      background-color: var(--color-bg-green-lowered);
-      border: 1px solid var(--color-border-green);
-    }
-
-    &.active,
-    &:hover {
-      border: 1px solid var(--color-bg-green-raised);
-      background-color: var(--color-bg-green-raised);
-    }
-  }
-
-  &.vui-button-variant-blue {
-    &:not(.plain) {
-      color: var(--color-text);
-      background-color: var(--color-bg-blue-lowered);
-      border: 1px solid var(--color-border-blue);
-    }
-
-    &.active,
-    &:hover {
-      border: 1px solid var(--color-bg-blue-raised);
-      background-color: var(--color-bg-blue-raised);
-    }
-  }
-
-  &.vui-button-variant-accent {
-    &:not(.plain) {
-      color: var(--color-text);
-      background-color: var(--color-bg-accent-lowered);
-      border: 1px solid var(--color-border-accent);
-    }
-
-    &.active,
-    &:hover {
-      border: 1px solid var(--color-bg-accent-raised);
-      background-color: var(--color-bg-accent-raised);
-    }
-  }
-
-  &.vui-button-variant-link {
-    color: var(--color-text);
-    background: transparent;
-    text-underline-offset: 4px;
-    cursor: pointer;
-
-    &.active,
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-}
+.vui-button {
+  --button-height: var(--interactive-el-height);
+  --button-padding: 8px;
+
+  &.disabled {
+    pointer-events: none;
+    color: var(--color-text-lighter) !important;
+    cursor: not-allowed !important;
+    filter: saturate(50%) opacity(0.65);
+
+    svg path {
+      color: var(--color-text-lighter) !important;
+    }
+  }
+
+  &.expand {
+    width: 100%;
+  }
+
+  &.loading {
+    .vui-spinner {
+      opacity: 1;
+    }
+
+    .vui-button-slot {
+      opacity: 0;
+    }
+  }
+
+  &.icon {
+    width: var(--button-height);
+    padding: 0;
+
+    .vui-button-slot {
+      svg {
+        width: 18px;
+        height: 18px;
+      }
+    }
+  }
+
+  &.square {
+    width: var(--button-height);
+    min-width: var(--button-height);
+    min-height: var(--button-height);
+    padding: 0;
+  }
+
+  &.dashed {
+    border-style: dashed;
+  }
+
+  height: var(--button-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--border-radius-s);
+  background: transparent;
+  padding-inline: var(--button-padding);
+  font-size: var(--font-size-s);
+  position: relative;
+  transition: var(--transition);
+  border: 1px solid transparent;
+  background-color: transparent;
+  color: var(--color-text);
+
+  // Default gray
+
+  .vui-button-slot {
+    display: flex;
+    place-items: center;
+    transition: var(--transition);
+    opacity: 1;
+  }
+
+  .vui-button-slot-start,
+  .vui-button-slot-end {
+    display: flex;
+    place-items: center;
+  }
+
+  .vui-button-slot-start {
+    margin-right: 6px;
+  }
+
+  .vui-button-slot-end {
+    margin-left: 6px;
+  }
+
+  .vui-spinner {
+    transition: var(--transition);
+    opacity: 0;
+    position: absolute;
+    pointer-events: none;
+  }
+
+  // Variants
+  &.vui-button-variant-default {
+    &:not(.plain) {
+      color: var(--color-text);
+      background-color: var(--color-button-gray);
+      border: 1px solid var(--color-border);
+    }
+
+    &.active,
+    &:hover {
+      background-color: var(--color-button-gray-hover);
+    }
+  }
+
+  &.vui-button-variant-danger {
+    &:not(.plain) {
+      color: var(--color-text);
+      background-color: var(--color-bg-red-lowered);
+      border: 1px solid var(--color-border-red);
+    }
+
+    &.active,
+    &:hover {
+      border: 1px solid var(--color-bg-red-raised);
+      background-color: var(--color-bg-red-raised);
+    }
+  }
+
+  &.vui-button-variant-success {
+    &:not(.plain) {
+      color: var(--color-text);
+      background-color: var(--color-bg-green-lowered);
+      border: 1px solid var(--color-border-green);
+    }
+
+    &.active,
+    &:hover {
+      border: 1px solid var(--color-bg-green-raised);
+      background-color: var(--color-bg-green-raised);
+    }
+  }
+
+  &.vui-button-variant-blue {
+    &:not(.plain) {
+      color: var(--color-text);
+      background-color: var(--color-bg-blue-lowered);
+      border: 1px solid var(--color-border-blue);
+    }
+
+    &.active,
+    &:hover {
+      border: 1px solid var(--color-bg-blue-raised);
+      background-color: var(--color-bg-blue-raised);
+    }
+  }
+
+  &.vui-button-variant-accent {
+    &:not(.plain) {
+      color: var(--color-text);
+      background-color: var(--color-bg-accent-lowered);
+      border: 1px solid var(--color-border-accent);
+    }
+
+    &.active,
+    &:hover {
+      border: 1px solid var(--color-bg-accent-raised);
+      background-color: var(--color-bg-accent-raised);
+    }
+  }
+
+  &.vui-button-variant-link {
+    color: var(--color-text);
+    background: transparent;
+    text-underline-offset: 4px;
+    cursor: pointer;
+
+    &.active,
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}