@dolanske/vui 1.4.1 → 1.4.2

package/src/components/Badge/Badge.vue

@@ -1,21 +0,0 @@
-<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,210 +0,0 @@
-.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);
-  }
-}

package/src/components/Breadcrumbs/BreadcrumbItem.vue

@@ -1,26 +0,0 @@
-<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,29 +0,0 @@
-<script setup lang='ts'>
-import { Icon } from '@iconify/vue'
-import { enforceSlotType, useFlattenedSlot } from '../../shared/slots'
-import './breadcrumbs.scss'
-
-interface Props {
-  separator?: string
-}
-
-const {
-  separator = 'ph:caret-right',
-} = defineProps<Props>()
-
-const slots = defineSlots()
-const flattened = useFlattenedSlot(slots.default)
-enforceSlotType(flattened, 'BreadcrumbItem')
-</script>
-
-<template>
-  <ul class="vui-breadcrumbs">
-    <template v-for="(vnode, index) of flattened" :key="vnode.props?.label || index">
-      <component :is="vnode" />
-      <template v-if="index !== flattened.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 +0,0 @@
-.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,86 +0,0 @@
-<script setup lang="ts">
-import type { Sizes } from '../../shared/types'
-import { Icon } from '@iconify/vue'
-import { computed } from 'vue'
-import { isNil } from '../../shared/helpers'
-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 '42px'
-    case Size.m:
-    default: return 'var(--interactive-el-height)'
-  }
-})
-
-const padding = computed(() => {
-  switch (size) {
-    case Size.s: return '4px'
-    case Size.l: return '18px'
-    case Size.m:
-    default: return '8px'
-  }
-})
-</script>
-
-<template>
-  <button
-    class="vui-button"
-    :class="[{ loading, expand, disabled, plain, icon, square, outline }, `vui-button-variant-${variant}`, `vui-button-size-${size}`]"
-    :disabled
-    role="button"
-    :style="{
-      '--button-height': height,
-      '--button-padding': padding,
-    }"
-    :name="icon && !$slots.default ? icon.split(':')[1] : undefined"
-  >
-    <Spinner v-if="!isNil(loading)" 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,292 +0,0 @@
-.vui-button {
-  --button-height: var(--interactive-el-height);
-  --button-padding: 8px;
-  --button-font-size: var(--font-size-s);
-  --button-font-size-l: 1.4rem;
-
-  &.disabled {
-    // color: var(--color-text-lighter) !important;
-    cursor: not-allowed !important;
-    filter: saturate(75%) opacity(50%);
-
-    svg path {
-      color: var(--color-text-light) !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 {
-    display: block;
-    color: var(--color-text);
-    width: 17px;
-    height: 17px;
-  }
-
-  &.square {
-    width: var(--button-height);
-    min-width: var(--button-height);
-    min-height: var(--button-height);
-    padding: 0;
-  }
-
-  &.dashed {
-    border-style: dashed !important;
-  }
-
-  &.vui-button-size-l {
-    font-size: var(--button-font-size-l);
-  }
-
-  svg path {
-    transition: var(--transition-fast);
-  }
-
-  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(--button-font-size);
-  position: relative;
-  transition: var(--transition-fast);
-  border: 1px solid transparent;
-  background-color: transparent;
-  color: var(--color-text);
-  font-weight: var(--font-weight-medium);
-
-  // Default gray
-
-  .vui-button-slot {
-    display: flex;
-    place-items: center;
-    transition: var(--transition-fast);
-    opacity: 1;
-    font-weight: var(--font-weight-medium);
-  }
-
-  .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-fast);
-    opacity: 0;
-    position: absolute;
-    pointer-events: none;
-    --spinner-color: var(--color-text);
-  }
-
-  // Variants
-  &.vui-button-variant-danger {
-    &:not(.plain):not(.outline) {
-      color: var(--color-text);
-      background-color: var(--color-bg-red-raised);
-
-      svg,
-      path {
-        color: var(--color-text);
-      }
-    }
-
-    &.outline {
-      border-color: var(--color-bg-red-lowered);
-    }
-
-    &:not(.plain):not(.disabled):not(.plain):hover,
-    &:hover:not(.disabled) {
-      background-color: var(--color-bg-red-lowered);
-    }
-  }
-
-  &.vui-button-variant-success {
-    &:not(.plain):not(.outline) {
-      color: var(--color-text);
-      background-color: var(--color-bg-green-raised);
-
-      svg,
-      path {
-        color: var(--color-text);
-      }
-    }
-
-    &.outline {
-      border-color: var(--color-bg-green-lowered);
-    }
-
-    &:not(.plain):not(.disabled):not(.plain):hover,
-    &:hover:not(.disabled) {
-      background-color: var(--color-bg-green-lowered);
-    }
-  }
-
-  &.vui-button-variant-gray {
-    &:not(.plain):not(.outline) {
-      color: var(--color-text);
-      background-color: var(--color-button-gray);
-
-      svg,
-      path {
-        color: var(--color-text);
-      }
-    }
-
-    &.outline {
-      border-color: var(--color-button-gray-hover);
-    }
-
-    &:not(.plain):not(.disabled):not(.plain):hover,
-    &:hover:not(.disabled) {
-      background-color: var(--color-button-gray-hover);
-    }
-  }
-
-  &.vui-button-variant-fill {
-    &:not(.plain):not(.outline) {
-      color: var(--color-text-invert);
-      background-color: var(--color-button-fill);
-
-      .vui-spinner {
-        --spinner-color: var(--color-text-invert);
-      }
-
-      svg,
-      path {
-        color: var(--color-text-invert);
-      }
-    }
-
-    &.outline {
-      border-color: var(--color-button-fill-hover);
-
-      &:hover {
-        color: var(--color-text-invert);
-
-        svg,
-        path {
-          color: var(--color-text-invert);
-        }
-      }
-    }
-
-    &:not(.plain):not(.disabled):not(.plain):hover,
-    &:hover:not(.disabled) {
-      background-color: var(--color-button-fill-hover);
-
-      &.plain {
-        color: var(--color-text-invert);
-
-        svg,
-        path {
-          color: var(--color-text-invert);
-        }
-      }
-    }
-  }
-
-  &.vui-button-variant-accent {
-    &:not(.plain):not(.outline) {
-      color: var(--color-text);
-      background-color: var(--color-bg-accent-raised);
-
-      svg,
-      path {
-        color: var(--color-text);
-      }
-    }
-
-    &.outline {
-      border-color: var(--color-bg-accent-lowered);
-    }
-
-    &:not(.plain):not(.disabled):not(.plain):hover,
-    &:hover:not(.disabled) {
-      background-color: var(--color-bg-accent-lowered);
-    }
-  }
-
-  &.vui-button-variant-link {
-    color: var(--color-text);
-    background: transparent;
-    text-underline-offset: 4px;
-    cursor: pointer;
-
-    &:not(:disabled).active,
-    &:not(:disabled):hover {
-      text-decoration: underline;
-    }
-  }
-}
-
-:root.light {
-  .vui-button {
-    &.vui-button-variant-danger {
-      &:not(.plain):not(.outline) {
-        color: var(--color-text-invert);
-
-        svg,
-        path {
-          color: var(--color-text-invert);
-        }
-      }
-
-      &.outline:hover {
-        color: var(--color-text-invert);
-
-        svg,
-        path {
-          color: var(--color-text-invert);
-        }
-      }
-    }
-
-    &.vui-button-variant-success {
-      &:not(.plain):not(.outline) {
-        color: var(--color-text-invert);
-
-        svg,
-        path {
-          color: var(--color-text-invert);
-        }
-      }
-
-      &.outline:hover {
-        color: var(--color-text-invert);
-
-        svg,
-        path {
-          color: var(--color-text-invert);
-        }
-      }
-    }
-  }
-}