@dolanske/vui 0.1.0 → 0.1.1

package/src/components/Accordion/AccordionGroup.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { VNode } from 'vue'
+import type { AccordionProps } from './Accordion.vue'
+import type Accordion from './Accordion.vue'
+import { useTemplateRef } from 'vue'
+// Renderless component which is used to house multiple accordions which can be triggered together in some way
+
+interface Props {
+  /**
+   * If set to true, if an accordion opens, all other close
+   */
+  single?: boolean
+}
+
+const props = defineProps<Props>()
+
+const slots = defineSlots<{
+  default: () => Array<VNode & { props: AccordionProps }>
+}>()
+
+const accordionRefs = useTemplateRef<InstanceType<typeof Accordion>[]>('accordionRefs')
+
+function handleAccordionOpen(newIndex: number) {
+  if (!accordionRefs.value || !props.single)
+    return
+
+  accordionRefs.value.forEach((item, index) => {
+    if (index !== newIndex) {
+      item.close()
+    }
+  })
+}
+</script>
+
+<template>
+  <component
+    :is="item"
+    v-for="(item, index) of slots.default()"
+    ref="accordionRefs"
+    :key="item"
+    @open="handleAccordionOpen(index)"
+  />
+</template>

package/src/components/Accordion/accordion.scss

@@ -0,0 +1,44 @@
+.vui-accordion {
+  width: 100%;
+  transition: var(--transition);
+  border-bottom: 1px solid var(--color-border);
+  padding-bottom: 0;
+
+  &.open {
+    padding-bottom: var(--space-m);
+
+    .vui-accordion-header svg {
+      transform: rotate(180deg);
+    }
+  }
+
+  .vui-accordion-header {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--space-m) 0;
+    color: pointer;
+    font-size: var(--font-size-m);
+    font-weight: 500;
+    color: var(--color-text);
+
+    &:hover {
+      text-decoration: underline;
+      text-underline-offset: 4px;
+    }
+
+    svg {
+      transition: var(--transition);
+    }
+
+    // padding-bottom: var(--w);
+  }
+
+  .vui-accordion-content {
+    transition: var(--transition-slow);
+    width: 100%;
+    max-height: 0;
+    overflow: hidden;
+  }
+}

package/src/components/Alert/Alert.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { computed } from 'vue'
+import './alert.scss'
+
+interface Props {
+  variant?: 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+  /**
+   * Override the variant's default icon
+   */
+  icon?: string
+
+  /**
+   * Setting a title and description will use slightly different styling other than slots.
+   */
+  title?: string
+  description?: string
+}
+
+const {
+  icon = 'ph:circle-light',
+  variant = 'neutral',
+  title,
+  description,
+} = defineProps<Props>()
+
+const actualIcon = computed(() => {
+  switch (variant) {
+    case 'info': return 'ph:info'
+    case 'success': return 'ph:check-circle'
+    case 'warning': return 'ph:warning'
+    case 'danger': return 'ph:warning-diamond'
+    default: return icon
+  }
+})
+</script>
+
+<template>
+  <div class="vui-alert" :class="[`vui-alert-variant-${variant}`]">
+    <Icon v-if="actualIcon" class="vui-alert-icon" :icon="actualIcon" />
+    <div v-if="$slots.default" class="vui-alert-content">
+      <slot />
+    </div>
+    <div v-else class="vui-alert-default-content">
+      <strong v-if="title">{{ title }}</strong>
+      <p v-if="description">
+        {{ description }}
+      </p>
+    </div>
+
+    <slot name="end" />
+  </div>
+</template>

package/src/components/Alert/alert.scss

@@ -0,0 +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-l);
+      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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { Sizes } from '../../shared/types'
+import { Icon } from '@iconify/vue'
+import { ref } from 'vue'
+import './avatar.scss'
+
+interface Props {
+  size?: Sizes
+  url?: string
+  fallback?: string
+  icon?: string
+}
+
+const {
+  size = 'm',
+  url,
+  fallback,
+} = defineProps<Props>()
+
+const showFallback = ref(false)
+</script>
+
+<template>
+  <div
+    class="vui-avatar"
+    :class="[`vui-avatar-size-${size}`]"
+  >
+    <img v-if="url && !showFallback" :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

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

package/src/components/Badge/Badge.vue

@@ -0,0 +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>

package/src/components/Badge/badge.scss

@@ -0,0 +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);
+  }
+}

package/src/components/Breadcrumbs/BreadcrumbItem.vue

@@ -0,0 +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>

package/src/components/Breadcrumbs/Breadcrumbs.vue

@@ -0,0 +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>

package/src/components/Breadcrumbs/breadcrumbs.scss

@@ -0,0 +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;
+    }
+  }
+}

package/src/components/Button/Button.vue

@@ -0,0 +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
+  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 actualHeight = computed(() => {
+  switch (size) {
+    case Size.s: return '24px'
+    case Size.l: return '40px'
+    case Size.m:
+    default: return '32px'
+  }
+})
+
+const actualPadding = 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
+  >
+    <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>
+
+<style scoped>
+.vui-button {
+  --button-height: v-bind(actualHeight);
+  --button-padding: v-bind(actualPadding);
+}
+</style>