@dolanske/vui 0.1.0 → 0.1.2

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>

package/src/components/Button/button.scss

@@ -0,0 +1,176 @@
+.vui-button {
+  --button-height: 32px;
+  --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;
+    }
+  }
+}

package/src/components/ButtonGroup/ButtonGroup.vue

@@ -0,0 +1,25 @@
+<script setup lang='ts'>
+import Flex from '../Flex/Flex.vue'
+import './button-group.scss'
+
+interface Props {
+  vertical?: boolean
+}
+
+const {
+  vertical,
+} = defineProps<Props>()
+</script>
+
+<template>
+  <Flex
+    :row="!vertical"
+    :column="vertical"
+    class="vui-button-group"
+    :class="{ vertical }"
+    :gap="0"
+    inline
+  >
+    <slot />
+  </Flex>
+</template>

package/src/components/ButtonGroup/button-group.scss

@@ -0,0 +1,51 @@
+.vui-button-group {
+  .vui-button {
+    z-index: 1;
+
+    &:hover {
+      z-index: 2;
+    }
+
+    &:not(:first-child, :last-child) {
+      border-radius: 0;
+    }
+
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &:not(:last-child) {
+      margin-right: -1px;
+    }
+  }
+
+  &.vertical {
+    .vui-button {
+      width: 100%;
+
+      &:not(:first-child, :last-child) {
+        border-radius: 0;
+      }
+
+      &:first-child {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      &:last-child {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+
+      &:not(:last-child) {
+        margin-bottom: -1px;
+      }
+    }
+  }
+}

package/src/components/Calendar/Calendar.vue

@@ -0,0 +1,58 @@
+<script setup lang='ts'>
+import type { VueDatePickerProps } from '@vuepic/vue-datepicker'
+import { Icon } from '@iconify/vue'
+import VueDatePicker from '@vuepic/vue-datepicker'
+import '@vuepic/vue-datepicker/dist/main.css'
+import './calendar.scss'
+
+const props = withDefaults(defineProps<VueDatePickerProps & {
+  expand?: boolean
+}>(), {
+  autoApply: true,
+  autoPosition: true,
+  dark: true,
+  format: 'dd/MM/yyyy HH:mm',
+  expand: false,
+})
+</script>
+
+<template>
+  <VueDatePicker
+    v-bind="props"
+    :style="props.expand || !$slots.trigger
+      ? undefined
+      : { display: 'inline-block', width: 'auto' }
+    "
+  >
+    <!-- Icon slots -->
+    <template #input-icon>
+      <Icon :width="18" :height="18" icon="ph:calendar-blank" />
+    </template>
+    <template #calendar-icon>
+      <Icon :width="18" :height="18" icon="ph:calendar-blank" />
+    </template>
+    <template #clear-icon>
+      <Icon :width="18" :height="18" icon="ph:x" />
+    </template>
+    <template #clock-icon>
+      <Icon :width="18" :height="18" icon="ph:clock" />
+    </template>
+    <template #arrow-left>
+      <Icon :width="18" :height="18" icon="ph:caret-left" />
+    </template>
+    <template #arrow-right>
+      <Icon :width="18" :height="18" icon="ph:caret-right" />
+    </template>
+    <template #arrow-up>
+      <Icon :width="18" :height="18" icon="ph:caret-up" />
+    </template>
+    <template #arrow-down>
+      <Icon :width="18" :height="18" icon="ph:caret-down" />
+    </template>
+
+    <!-- Content slots -->
+    <template v-if="$slots.trigger" #trigger>
+      <slot name="trigger" />
+    </template>
+  </VueDatePicker>
+</template>

package/src/components/Calendar/calendar.scss

@@ -0,0 +1,56 @@
+.dp__theme_dark {
+  --dp-background-color: var(--color-bg);
+  --dp-text-color: var(--color-text);
+  --dp-hover-color: var(--color-button-gray-hover);
+  --dp-hover-text-color: var(--color-text);
+  --dp-hover-icon-color: var(--color-text-lighter);
+  --dp-primary-color: var(--color-accent);
+  --dp-primary-disabled-color: var(--color-accent-disabled);
+  --dp-primary-text-color: var(--color-text-invert);
+  --dp-secondary-color: var(--color-border);
+  --dp-border-color: var(--color-border);
+  --dp-menu-border-color: var(--color-border);
+  --dp-border-color-hover: var(--color-border-strong);
+  --dp-border-color-focus: var(--color-border-strong);
+  --dp-disabled-color: var(--color-bg-raised);
+  --dp-disabled-color-text: var(--color-text-light);
+  --dp-scroll-bar-background: var(--color-bg-lowered);
+  --dp-scroll-bar-color: var(--color-border);
+  --dp-success-color: var(--color-green);
+  --dp-success-color-disabled: var(--color-green-disabled);
+  --dp-icon-color: var(--color-text-light);
+  --dp-danger-color: var(--color-red);
+  --dp-marker-color: var(--color-red);
+  --dp-tooltip-color: var(--color-bg-raised);
+  --dp-highlight-color: var(--color-bg-raised);
+  --dp-range-between-dates-background-color: var(--dp-hover-color, #484848);
+  --dp-range-between-dates-text-color: var(--dp-hover-text-color, #fff);
+  --dp-range-between-border-color: var(--dp-hover-color, #fff);
+}
+
+:root {
+  --dp-font-family: var(--global-font);
+  --dp-border-radius: var(--border-radius-s);
+  --dp-cell-border-radius: var(--border-radius-s);
+  --dp-common-transition: var(--transition);
+
+  --dp-font-size: var(--font-size-ms);
+  --dp-preview-font-size: var(--font-size-s);
+  --dp-time-font-size: var(--font-size-s);
+}
+
+.dp__main {
+  font-size: var(--n-font-size-m);
+}
+
+.dp__outer_menu_wrap {
+  box-shadow: var(--box-shadow-strong);
+}
+
+.dp__input_icon {
+  inset-inline-start: 8px;
+}
+
+.dp--clear-btn {
+  inset-inline-end: 8px;
+}

package/src/components/Card/Card.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import Divider from '../Divider/Divider.vue'
+import './card.scss'
+
+export interface Props {
+  separators?: boolean
+  headerSeparator?: boolean
+  footerSeparator?: boolean
+  padding?: boolean
+}
+
+const {
+  padding = true,
+  separators,
+  headerSeparator,
+  footerSeparator,
+} = defineProps<Props>()
+</script>
+
+<template>
+  <div
+    class="vui-card" :class="{
+      separators,
+      'header-separator': headerSeparator,
+      'footer-separator': footerSeparator,
+      'no-padding': !padding,
+    }"
+  >
+    <div v-if="$slots.header || $slots['header-end']" class="vui-card-header">
+      <div>
+        <slot name="header" />
+      </div>
+      <slot name="header-end" />
+    </div>
+
+    <Divider v-if="(separators || headerSeparator) && ($slots.header || $slots['header-end'])" :size="1" />
+
+    <div v-if="$slots.default" class="vui-card-content">
+      <slot />
+    </div>
+
+    <Divider v-if="(separators || footerSeparator) && $slots.footer" :size="1" />
+
+    <div v-if="$slots.footer" class="vui-card-footer">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>

package/src/components/Card/card.scss

@@ -0,0 +1,53 @@
+.vui-card {
+  background-color: var(--color-bg);
+  border-radius: var(--border-radius-m);
+  border: 1px solid var(--color-border);
+
+  &.no-padding {
+    .vui-card-header,
+    .vui-card-content,
+    .vui-card-footer {
+      padding: 0;
+    }
+  }
+
+  &:not(.separators) {
+    .vui-card-content:not(:first-child) {
+      padding-block: var(--space-xs);
+    }
+
+    &.header-separator {
+      .vui-card-content:not(:first-child) {
+        padding-top: var(--space-m);
+        // padding-block: var(--space-m);
+      }
+    }
+
+    &.footer-separator {
+      .vui-card-content {
+        padding-bottom: var(--space-m);
+      }
+    }
+  }
+
+  .vui-card-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: var(--space-s) var(--space-m);
+    background-color: var(--color-bg);
+    border-top-left-radius: var(--border-radius-m);
+    border-top-right-radius: var(--border-radius-m);
+  }
+
+  .vui-card-content {
+    padding: var(--space-m);
+  }
+
+  .vui-card-footer {
+    padding: var(--space-s) var(--space-m);
+    background-color: var(--color-bg);
+    border-bottom-left-radius: var(--border-radius-m);
+    border-bottom-right-radius: var(--border-radius-m);
+  }
+}

package/src/components/Checkbox/Checkbox.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { useId } from 'vue'
+import './checkbox.scss'
+
+interface Props {
+  label?: string
+  iconOn?: string
+  iconOff?: string
+  disabled?: boolean
+  checked?: boolean
+}
+
+const {
+  label,
+  iconOn = 'ph:check-square-fill',
+  iconOff = 'ph:square',
+  disabled,
+  checked: checkedProp,
+} = defineProps<Props>()
+const emit = defineEmits<{
+  change: [checked: boolean]
+}>()
+const slots = defineSlots()
+const checked = defineModel<boolean>()
+const id = useId()
+</script>
+
+<template>
+  <div class="vui-checkbox" :class="{ disabled: !!disabled, checked }">
+    <input
+      :id
+      v-model="checked"
+      type="checkbox"
+      :disabled
+      :checked="checkedProp"
+      @change="emit('change', ($event.target as HTMLInputElement).checked)"
+    >
+    <label :for="id">
+      <span class="vui-checkbox-icon">
+        <Icon :icon="checked ? iconOn : iconOff" />
+      </span>
+      <p v-if="label" class="vui-checkbox-content">{{ label }}</p>
+      <div v-else-if="slots.default" class="vui-checkbox-content">
+        <slot />
+      </div>
+    </label>
+  </div>
+</template>