@dolanske/vui 0.3.4 → 0.5.0

package/src/components/Accordion/Accordion.vue

@@ -1,91 +1,91 @@
-<script setup lang="ts">
-import { Icon } from '@iconify/vue'
-import { useResizeObserver } from '@vueuse/core'
-import { onMounted, ref, useTemplateRef, watch, watchEffect } from 'vue'
-import './accordion.scss'
-
-export interface AccordionProps {
-  open?: boolean
-  label?: string
-  card?: 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,
-})
-
-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 }">
-    <!-- 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 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>
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { useResizeObserver } from '@vueuse/core'
+import { onMounted, ref, useTemplateRef, watch, watchEffect } from 'vue'
+import './accordion.scss'
+
+export interface AccordionProps {
+  open?: boolean
+  label?: string
+  card?: 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,
+})
+
+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 }">
+    <!-- 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 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,43 +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>[]>('accordion')
-
-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="accordion"
-    :key="item"
-    @open="handleAccordionOpen(index)"
-  />
-</template>
+<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>[]>('accordion')
+
+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="accordion"
+    :key="item"
+    @open="handleAccordionOpen(index)"
+  />
+</template>

package/src/components/Accordion/accordion.scss

@@ -1,80 +1,81 @@
-.vui-accordion {
-  width: 100%;
-  transition: var(--transition);
-  border-bottom: 1px solid var(--color-border);
-  padding-bottom: 0;
-
-  &.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 {
-    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);
-
-    &: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;
-  }
-}
+.vui-accordion {
+  width: 100%;
+  transition: var(--transition);
+  border-bottom: 1px solid var(--color-border);
+  padding-bottom: 0;
+
+  &.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 {
+    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;
+  }
+}

package/src/components/Alert/Alert.vue

@@ -1,53 +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>
+<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>