@dolanske/vui 1.4.0 → 1.4.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dolanske/vui",
   "type": "module",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "private": false,
   "description": "Brother in Christ there's a new UI library",
   "author": "dolanske",
@@ -36,7 +36,6 @@
   "types": "./dist/index.d.ts",
   "files": [
     "./dist/*",
-    "./src/*",
     "LICENSE",
     "README.md"
   ],

package/src/App.vue

@@ -1,103 +0,0 @@
-<script setup lang="ts">
-import Card from './components/Card/Card.vue'
-import Divider from './components/Divider/Divider.vue'
-import ExampleAccordions from './examples/ExampleAccordions.vue'
-import ExampleAlerts from './examples/ExampleAlerts.vue'
-import ExampleAvatars from './examples/ExampleAvatars.vue'
-import ExampleBadges from './examples/ExampleBadges.vue'
-import ExampleBreadcrumbs from './examples/ExampleBreadcrumbs.vue'
-import ExampleButtons from './examples/ExampleButtons.vue'
-import ExampleCalendars from './examples/ExampleCalendars.vue'
-import ExampleCards from './examples/ExampleCards.vue'
-import ExampleCheckboxes from './examples/ExampleCheckboxes.vue'
-import ExampleCopyClipboard from './examples/ExampleCopyClipboard.vue'
-import ExampleDividers from './examples/ExampleDividers.vue'
-import ExampleDrawers from './examples/ExampleDrawers.vue'
-import ExampleDropdowns from './examples/ExampleDropdowns.vue'
-import ExampleFlexGrid from './examples/ExampleFlexGrid.vue'
-import ExampleInputs from './examples/ExampleInputs.vue'
-import ExampleKBD from './examples/ExampleKBD.vue'
-import ExampleModals from './examples/ExampleModals.vue'
-import ExamplePalette from './examples/ExamplePalette.vue'
-import ExamplePopouts from './examples/ExamplePopouts.vue'
-import ExampleSheets from './examples/ExampleSheets.vue'
-import ExampleSidebars from './examples/ExampleSidebars.vue'
-import ExampleSkeletons from './examples/ExampleSkeletons.vue'
-import ExampleSpinners from './examples/ExampleSpinners.vue'
-import ExampleTables from './examples/ExampleTables.vue'
-import ExampleTabs from './examples/ExampleTabs.vue'
-import ExampleToasts from './examples/ExampleToasts.vue'
-import ExampleTooltips from './examples/ExampleTooltips.vue'
-</script>
-
-<template>
-  <main vaul-drawer-wrapper>
-    <div class="container container-l p-xl">
-      <h1 class="mb-l">
-        VUI
-      </h1>
-
-      <Card class="typeface">
-        <pre><code>export function removeColorPrefix(value: string): string {
-  return value.replace('--dark', '--').replace('--light', '--')
-}</code></pre>
-      </Card>
-
-      <p>The purpose of this page is to showcase and test every single component case</p>
-      <Divider :size="64" />
-      <ExamplePalette />
-      <Divider :size="64" />
-      <ExampleButtons />
-      <Divider :size="64" />
-      <ExampleCalendars />
-      <Divider :size="64" />
-      <ExampleBadges />
-      <Divider :size="64" />
-      <ExampleSpinners />
-      <Divider :size="64" />
-      <ExampleAvatars />
-      <Divider :size="64" />
-      <ExampleAlerts />
-      <Divider :size="64" />
-      <ExampleSkeletons />
-      <Divider :size="64" />
-      <ExampleAccordions />
-      <Divider :size="64" />
-      <ExampleBreadcrumbs />
-      <Divider :size="64" />
-      <ExampleCards />
-      <Divider :size="64" />
-      <ExampleCheckboxes />
-      <Divider :size="64" />
-      <ExampleCopyClipboard />
-      <Divider :size="64" />
-      <ExampleTabs />
-      <Divider :size="64" />
-      <ExampleInputs />
-      <Divider :size="64" />
-      <ExampleToasts />
-      <Divider :size="64" />
-      <ExampleTooltips />
-      <Divider :size="64" />
-      <ExampleSheets />
-      <Divider :size="64" />
-      <ExampleModals />
-      <Divider :size="64" />
-      <ExampleDrawers />
-      <Divider :size="64" />
-      <ExampleKBD />
-      <Divider :size="64" />
-      <ExamplePopouts />
-      <Divider :size="64" />
-      <ExampleDividers />
-      <Divider :size="64" />
-      <ExampleDropdowns />
-      <Divider :size="64" />
-      <ExampleFlexGrid />
-      <Divider :size="64" />
-      <ExampleTables />
-      <Divider :size="64" />
-      <ExampleSidebars />
-    </div>
-  </main>
-</template>

package/src/components/Accordion/Accordion.vue

@@ -1,98 +0,0 @@
-<script setup lang="ts">
-import { Icon } from '@iconify/vue'
-import { useResizeObserver } from '@vueuse/core'
-import { onBeforeMount, onMounted, ref, useTemplateRef, watch, watchEffect } from 'vue'
-import './accordion.scss'
-
-export interface AccordionProps {
-  open?: boolean
-  label?: string
-  card?: boolean
-  unstyled?: boolean
-}
-
-const props = defineProps<AccordionProps>()
-const emits = defineEmits<{
-  open: []
-  close: []
-}>()
-
-const isOpen = ref(false)
-const contentRef = useTemplateRef('content')
-const contentMaxHeight = ref(0)
-
-watchEffect(() => {
-  isOpen.value = props.open
-}, {
-  flush: 'post',
-})
-
-watch(isOpen, (value) => {
-  if (value) {
-    emits('open')
-    contentMaxHeight.value = contentRef.value?.scrollHeight || 0
-  }
-  else {
-    emits('close')
-  }
-}, {
-  flush: 'post',
-  immediate: true,
-})
-
-function open() {
-  isOpen.value = true
-}
-
-function close() {
-  isOpen.value = false
-}
-
-function toggle() {
-  isOpen.value = !isOpen.value
-}
-
-defineExpose({
-  open,
-  close,
-  toggle,
-  isOpen,
-})
-
-onBeforeMount(() => {
-  if (props.card && props.unstyled) {
-    console.warn('[Accordion] Both \'card\' and \'unstyled\' props are selected. Unstyled will take precedence.')
-  }
-})
-
-onMounted(() => {
-  useResizeObserver(contentRef, ([entry]) => {
-    if (isOpen.value && contentMaxHeight.value !== entry.contentRect.height) {
-      contentMaxHeight.value = entry.contentRect.height || 0
-    }
-  })
-})
-</script>
-
-<template>
-  <div class="vui-accordion" :class="{ 'open': isOpen, 'is-card': !!props.card && !props.unstyled, 'is-unstyled': !!props.unstyled }">
-    <!-- Completely custom header which needs to be styled and implemented by the developer -->
-    <slot v-if="$slots.trigger" name="trigger" :open :close :toggle :is-open />
-    <button v-else class="vui-accordion-header" @click="isOpen = !isOpen">
-      <slot name="header">
-        {{ props.label }}
-      </slot>
-      <Icon v-if="!props.unstyled" icon="ph:caret-down" />
-    </button>
-
-    <div
-      class="vui-accordion-content"
-      :aria-hidden="!isOpen"
-      :style="{ 'max-height': isOpen ? `${contentMaxHeight}px` : '0px' }"
-    >
-      <div ref="content" class="vui-accordtion-content-inner">
-        <slot />
-      </div>
-    </div>
-  </div>
-</template>

package/src/components/Accordion/AccordionGroup.vue

@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import type { AccordionProps } from './Accordion.vue'
-import { useId } from 'vue'
-import { enforceSlotType, useFlattenedSlot } from '../../shared/slots'
-// 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()
-
-// Since accordions do not have a child parent, we need to group them by a
-// common id
-const id = useId()
-
-const flattened = useFlattenedSlot<AccordionProps>(slots.default)
-
-function handleAccordionOpen(newIndex: number) {
-  if (!props.single)
-    return
-
-  const grouped = document.querySelectorAll(`[data-accordion-group-id=${id}]`)
-
-  grouped.forEach((item, index) => {
-    if (index !== newIndex) {
-      // @ts-expect-error We do a little accessin'
-      item.__vnode.ctx.exposed.close()
-    }
-  })
-}
-
-enforceSlotType(flattened, 'Accordion')
-</script>
-
-<template>
-  <component
-    :is="item"
-    v-for="(item, index) of flattened"
-    :key="item"
-    :data-accordion-group-id="id"
-    @open="handleAccordionOpen(index)"
-  />
-</template>

package/src/components/Accordion/accordion.scss

@@ -1,97 +0,0 @@
-.vui-accordion {
-  width: 100%;
-  transition: var(--transition);
-  border-bottom: 1px solid var(--color-border);
-  padding-bottom: 0;
-
-  &.is-unstyled {
-    border-bottom: none;
-
-    .vui-accordion-header {
-      padding: unset;
-      text-decoration: unset;
-
-      &:hover {
-        text-decoration: unset;
-      }
-    }
-  }
-
-  &.is-card {
-    border: 1px solid var(--color-border);
-    border-radius: var(--border-radius-m);
-
-    &.open {
-      padding-bottom: 0;
-
-      .vui-accordion-header {
-        border-block-width: 1px;
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-    }
-
-    .vui-accordion-header {
-      padding-inline: var(--space-m);
-      border-bottom: 0px solid var(--color-border);
-      text-decoration: inherit;
-      border-radius: var(--border-radius-m);
-
-      &:hover {
-        text-decoration: inherit;
-        text-underline-offset: inherit;
-        background-color: var(--color-button-gray);
-      }
-    }
-
-    .vui-accordtion-content-inner {
-      padding: var(--space-m);
-    }
-  }
-
-  &.open {
-    &:not(.is-unstyled) {
-      padding-bottom: var(--space-m);
-
-      .vui-accordion-header svg {
-        transform: rotate(180deg);
-      }
-    }
-
-    .vui-accordion-content {
-      visibility: visible;
-    }
-  }
-
-  .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);
-    border-radius: var(--border-radius-m);
-
-    &:hover {
-      text-decoration: underline;
-      text-underline-offset: 4px;
-    }
-
-    svg {
-      transition: var(--transition);
-      color: var(--color-text-light);
-    }
-  }
-
-  .vui-accordion-content {
-    transition: var(--transition-slow);
-    width: 100%;
-    max-height: 0;
-    overflow: hidden;
-    visibility: hidden;
-    font-size: var(--font-size-m);
-  }
-}

package/src/components/Alert/Alert.vue

@@ -1,59 +0,0 @@
-<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
-  /**
-   * Use strong color
-   */
-  filled?: boolean
-  description?: string
-}
-
-const {
-  icon = 'ph:chat-teardrop',
-  variant = 'neutral',
-  title,
-  description,
-  filled,
-} = 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="[{ filled }, `vui-alert-variant-${variant}`]">
-    <Icon v-if="actualIcon" class="vui-alert-icon" :icon="actualIcon" />
-    <div v-if="$slots.default && !title" 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>
-      <slot v-else-if="$slots.default" />
-    </div>
-
-    <slot name="end" />
-  </div>
-</template>

package/src/components/Alert/alert.scss

@@ -1,162 +0,0 @@
-.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: center;
-  border: 1px solid var(--color-border);
-  width: 100%;
-
-  .vui-alert-icon {
-    width: 22px;
-    height: 22px;
-  }
-
-  .vui-alert-content,
-  .vui-alert-default-content {
-    flex: 1;
-  }
-
-  .vui-alert-default-content {
-    strong {
-      display: block;
-      font-size: var(--font-size-m);
-      margin-bottom: 2px;
-    }
-
-    p {
-      font-size: var(--font-size-s);
-      color: var(--color-text-light);
-    }
-  }
-
-  .vui-alert-content {
-    font-size: var(--font-size-m);
-    font-weight: 400;
-  }
-
-  &.filled {
-    border: none !important;
-  }
-
-  &.vui-alert-variant-neutral {
-    .vui-alert-icon path {
-      color: var(--color-text-light);
-    }
-
-    &.filled {
-      background-color: var(--color-bg-raised);
-    }
-  }
-
-  &.vui-alert-variant-info {
-    .vui-alert-icon path {
-      color: var(--color-text-blue);
-    }
-
-    &.filled {
-      background-color: hsla(from var(--color-bg-blue-lowered) h s l / 0.5);
-    }
-  }
-
-  &.vui-alert-variant-success {
-    .vui-alert-icon path {
-      color: var(--color-text-green);
-    }
-
-    &.filled {
-      background-color: hsla(from var(--color-bg-green-lowered) h s l / 0.4);
-    }
-  }
-
-  &.vui-alert-variant-warning {
-    .vui-alert-icon path {
-      color: var(--color-text-yellow);
-    }
-
-    &.filled {
-      background-color: hsla(from var(--color-bg-yellow-lowered) h s l / 0.6);
-    }
-  }
-
-  &.vui-alert-variant-danger {
-    .vui-alert-icon path {
-      color: var(--color-text-red);
-    }
-
-    &.filled {
-      background-color: hsla(from var(--color-bg-red-lowered) h s l / 0.5);
-    }
-  }
-}
-
-:root.light {
-  .vui-alert.filled {
-    border: none;
-
-    &.vui-alert-variant-neutral {
-      background-color: var(--color-bg-medium);
-    }
-
-    &.vui-alert-variant-danger {
-      background-color: hsla(from var(--color-bg-red-raised) h s l / 0.15);
-    }
-
-    &.vui-alert-variant-warning {
-      background-color: hsla(from var(--color-bg-yellow-raised) h s l / 0.2);
-    }
-
-    &.vui-alert-variant-success {
-      background-color: hsla(from var(--color-bg-green-raised) h s l / 0.15);
-    }
-
-    &.vui-alert-variant-info {
-      background-color: hsla(from var(--color-bg-blue-raised) h s l / 0.15);
-    }
-  }
-
-  // .vui-alert.vui-alert-variant-success:not(.filled, .outline) {
-  //   background-color: hsla(from var(--color-text-green) h s l / 0.15);
-  // }
-
-  // .vui-alert.vui-alert-variant-danger .vui-alert-icon path {
-  //   color: var(--color-border-red);
-  // }
-
-  // .vui-alert.vui-alert-variant-warning .vui-alert-icon path {
-  //   color: var(--color-border-yellow);
-  // }
-
-  // .vui-alert.vui-alert-variant-success .vui-alert-icon path {
-  //   color: var(--color-border-green);
-  // }
-
-  // .vui-alert.vui-alert-variant-info .vui-alert-icon path {
-  //   color: var(--color-border-blue);
-  // }
-
-  // .vui-alert {
-  //   &.filled {
-  //     &.vui-alert-variant-danger .vui-alert-icon path,
-  //     &.vui-alert-variant-warning .vui-alert-icon path,
-  //     &.vui-alert-variant-success .vui-alert-icon path,
-  //     &.vui-alert-variant-info .vui-alert-icon path {
-  //       color: var(--color-text-light);
-  //     }
-
-  //     strong,
-  //     p {
-  //       color: var(--color-text);
-  //     }
-  //   }
-  // }
-
-  // .vui-alert.filled.vui-alert-variant-danger .vui-alert-icon path,
-  // .vui-alert.filled.vui-alert-variant-warning .vui-alert-icon path,
-  // .vui-alert.filled.vui-alert-variant-success .vui-alert-icon path,
-  // .vui-alert.filled.vui-alert-variant-info .vui-alert-icon path {
-  //   color: var(--color-text-light);
-  // }
-}

package/src/components/Avatar/Avatar.vue

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

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