@brumaombra/ui-vintage 0.7.8 → 0.7.10

package/src/components/ui/alert-dialog/AlertDialogAction.vue

@@ -1,18 +1,20 @@
 <script setup lang="ts">
-import type { AlertDialogActionProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { AlertDialogAction } from "reka-ui"
-import { cn } from "../../../lib/utils"
-import { buttonVariants } from '../button'
+import type { AlertDialogActionProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { AlertDialogAction } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+import { buttonVariants } from '../button';
 
-const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+// Omit local class from delegated props
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
-    <slot />
-  </AlertDialogAction>
-</template>
+    <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+        <slot />
+    </AlertDialogAction>
+</template>

package/src/components/ui/alert-dialog/AlertDialogCancel.vue

@@ -1,22 +1,20 @@
 <script setup lang="ts">
-import type { AlertDialogCancelProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { AlertDialogCancel } from "reka-ui"
-import { cn } from "../../../lib/utils"
-import { buttonVariants } from '../button'
+import type { AlertDialogCancelProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { AlertDialogCancel } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+import { buttonVariants } from '../button';
 
-const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+// Omit local class from delegated props
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <AlertDialogCancel v-bind="delegatedProps" :class="cn(
-    buttonVariants({ variant: 'secondary' }),
-    'mt-2 sm:mt-0',
-    props.class,
-  )">
-    <slot />
-  </AlertDialogCancel>
-</template>
+    <AlertDialogCancel v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'secondary' }), 'mt-2 sm:mt-0', props.class)">
+        <slot />
+    </AlertDialogCancel>
+</template>

package/src/components/ui/alert-dialog/AlertDialogContent.vue

@@ -1,36 +1,33 @@
 <script setup lang="ts">
-import type { AlertDialogContentEmits, AlertDialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  AlertDialogContent,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { AlertDialogContentEmits, AlertDialogContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { AlertDialogContent, AlertDialogOverlay, AlertDialogPortal, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
+// Keep attrs on the dialog content element
 defineOptions({
-  inheritAttrs: false,
-})
+    inheritAttrs: false
+});
 
-const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<AlertDialogContentEmits>()
+// Props
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+// Emits
+const emits = defineEmits<AlertDialogContentEmits>();
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+// Omit local class from delegated props
+const delegatedProps = reactiveOmit(props, 'class');
+
+// Forward props and emits
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <AlertDialogPortal>
-    <AlertDialogOverlay data-slot="alert-dialog-overlay" class="fixed inset-0 z-50 bg-black/45 backdrop-blur-[2px] transition-[opacity,backdrop-filter] ease-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
-    <AlertDialogContent data-slot="alert-dialog-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
-      'bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-[95%] max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-0 overflow-hidden rounded border border-border shadow-2xl duration-200 sm:max-w-lg',
-      props.class,
-    )
-      ">
-      <slot />
-    </AlertDialogContent>
-  </AlertDialogPortal>
-</template>
+    <AlertDialogPortal>
+        <AlertDialogOverlay data-slot="alert-dialog-overlay" class="fixed inset-0 z-50 bg-black/45 backdrop-blur-[2px] transition-[opacity,backdrop-filter] ease-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+        <AlertDialogContent data-slot="alert-dialog-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn('bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-[95%] max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-0 overflow-hidden rounded border border-border shadow-2xl duration-200 sm:max-w-lg', props.class)">
+            <slot />
+        </AlertDialogContent>
+    </AlertDialogPortal>
+</template>

package/src/components/ui/alert-dialog/AlertDialogDescription.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { AlertDialogDescriptionProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  AlertDialogDescription,
-} from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { AlertDialogDescriptionProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { AlertDialogDescription } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+// Omit local class from delegated props
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <AlertDialogDescription data-slot="alert-dialog-description" v-bind="delegatedProps" :class="cn('text-xs leading-6 text-muted-foreground sm:text-sm', props.class)">
-    <slot />
-  </AlertDialogDescription>
-</template>
+    <AlertDialogDescription data-slot="alert-dialog-description" v-bind="delegatedProps" :class="cn('text-xs leading-6 text-muted-foreground sm:text-sm', props.class)">
+        <slot />
+    </AlertDialogDescription>
+</template>

package/src/components/ui/alert-dialog/AlertDialogFooter.vue

@@ -1,18 +1,15 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <div data-slot="alert-dialog-footer" :class="cn(
-    'flex flex-col-reverse gap-3 border-t border-border px-5 py-4 sm:flex-row-reverse sm:px-6',
-    props.class,
-  )
-    ">
-    <slot />
-  </div>
-</template>
+    <div data-slot="alert-dialog-footer" :class="cn('flex flex-col-reverse gap-3 border-t border-border px-5 py-4 sm:flex-row-reverse sm:px-6', props.class)">
+        <slot />
+    </div>
+</template>

package/src/components/ui/alert-dialog/AlertDialogHeader.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <div data-slot="alert-dialog-header" :class="cn('flex flex-col gap-1.5 text-center sm:text-left', props.class)">
-    <slot />
-  </div>
-</template>
+    <div data-slot="alert-dialog-header" :class="cn('flex flex-col gap-1.5 text-center sm:text-left', props.class)">
+        <slot />
+    </div>
+</template>

package/src/components/ui/alert-dialog/AlertDialogTitle.vue

@@ -1,17 +1,19 @@
 <script setup lang="ts">
-import type { AlertDialogTitleProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { AlertDialogTitle } from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { AlertDialogTitleProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { AlertDialogTitle } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+// Omit local class from delegated props
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <AlertDialogTitle data-slot="alert-dialog-title" v-bind="delegatedProps" :class="cn('text-base font-semibold', props.class)">
-    <slot />
-  </AlertDialogTitle>
-</template>
+    <AlertDialogTitle data-slot="alert-dialog-title" v-bind="delegatedProps" :class="cn('text-base font-semibold', props.class)">
+        <slot />
+    </AlertDialogTitle>
+</template>

package/src/components/ui/alert-dialog/AlertDialogTrigger.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type { AlertDialogTriggerProps } from "reka-ui"
-import { AlertDialogTrigger } from "reka-ui"
+import type { AlertDialogTriggerProps } from 'reka-ui';
+import { AlertDialogTrigger } from 'reka-ui';
 
-const props = defineProps<AlertDialogTriggerProps>()
+// Props
+const props = defineProps<AlertDialogTriggerProps>();
 </script>
 
 <template>
-  <AlertDialogTrigger data-slot="alert-dialog-trigger" v-bind="props">
-    <slot />
-  </AlertDialogTrigger>
-</template>
+    <AlertDialogTrigger data-slot="alert-dialog-trigger" v-bind="props">
+        <slot />
+    </AlertDialogTrigger>
+</template>

package/src/components/ui/alert-dialog/index.ts

@@ -1,9 +1,9 @@
-export { default as AlertDialog } from "./AlertDialog.vue"
-export { default as AlertDialogAction } from "./AlertDialogAction.vue"
-export { default as AlertDialogCancel } from "./AlertDialogCancel.vue"
-export { default as AlertDialogContent } from "./AlertDialogContent.vue"
-export { default as AlertDialogDescription } from "./AlertDialogDescription.vue"
-export { default as AlertDialogFooter } from "./AlertDialogFooter.vue"
-export { default as AlertDialogHeader } from "./AlertDialogHeader.vue"
-export { default as AlertDialogTitle } from "./AlertDialogTitle.vue"
-export { default as AlertDialogTrigger } from "./AlertDialogTrigger.vue"
+export { default as AlertDialog } from './AlertDialog.vue';
+export { default as AlertDialogAction } from './AlertDialogAction.vue';
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue';
+export { default as AlertDialogContent } from './AlertDialogContent.vue';
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue';
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue';
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue';
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue';
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue';

package/src/components/ui/badge/Badge.vue

@@ -1,21 +1,20 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { HugeiconsIcon } from "@hugeicons/vue"
-import { getSurfaceToneClasses, type ToneColor } from "../../../lib/color-tokens"
-import { cn } from "../../../lib/utils"
-
-type HugeiconsIconDefinition = readonly (readonly [string, { readonly [key: string]: string | number }])[]
+import type { HTMLAttributes } from 'vue';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { getSurfaceToneClasses, type ToneColor } from '../../../lib/color-tokens';
+import { cn } from '../../../lib/utils';
+import type { HugeiconsIconDefinition } from '../../../lib/common-types';
 
 // Props
 const props = withDefaults(defineProps<{
-    text: string
-    icon?: HugeiconsIconDefinition | null
-    color?: ToneColor
-    class?: HTMLAttributes["class"]
+    text: string;
+    icon?: HugeiconsIconDefinition | null;
+    color?: ToneColor;
+    class?: HTMLAttributes['class'];
 }>(), {
     icon: null,
-    color: "gray"
-})
+    color: 'gray'
+});
 </script>
 
 <template>

package/src/components/ui/badge/index.ts

@@ -1 +1 @@
-export { default as Badge } from "./Badge.vue"
+export { default as Badge } from './Badge.vue';

package/src/components/ui/breadcrumb/Breadcrumb.vue

@@ -1,17 +1,14 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <nav
-    aria-label="breadcrumb"
-    data-slot="breadcrumb"
-    :class="props.class"
-  >
-    <slot />
-  </nav>
-</template>
+    <nav aria-label="breadcrumb" data-slot="breadcrumb" :class="props.class">
+        <slot />
+    </nav>
+</template>

package/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -1,24 +1,20 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { MoreHorizontalIcon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/vue"
-import { cn } from "../../../lib/utils"
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { MoreHorizontalIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <span
-    data-slot="breadcrumb-ellipsis"
-    role="presentation"
-    aria-hidden="true"
-    :class="cn('flex size-9 items-center justify-center', props.class)"
-  >
-    <slot>
-      <HugeiconsIcon :icon="MoreHorizontalIcon" class="size-4" />
-    </slot>
-    <span class="sr-only">More</span>
-  </span>
-</template>
+    <span data-slot="breadcrumb-ellipsis" role="presentation" aria-hidden="true" :class="cn('flex size-9 items-center justify-center', props.class)">
+        <slot>
+            <HugeiconsIcon :icon="MoreHorizontalIcon" class="size-4" />
+        </slot>
+        <span class="sr-only">More</span>
+    </span>
+</template>

package/src/components/ui/breadcrumb/BreadcrumbItem.vue

@@ -1,17 +1,15 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <li
-    data-slot="breadcrumb-item"
-    :class="cn('inline-flex items-center gap-1.5', props.class)"
-  >
-    <slot />
-  </li>
-</template>
+    <li data-slot="breadcrumb-item" :class="cn('inline-flex items-center gap-1.5', props.class)">
+        <slot />
+    </li>
+</template>

package/src/components/ui/breadcrumb/BreadcrumbLink.vue

@@ -1,21 +1,17 @@
-<script lang="ts" setup>
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Primitive } from "reka-ui"
-import { cn } from "../../../lib/utils"
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { Primitive } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(), {
-  as: "a",
-})
+// Props
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
+    as: 'a'
+});
 </script>
 
 <template>
-  <Primitive
-    data-slot="breadcrumb-link"
-    :as="as"
-    :as-child="asChild"
-    :class="cn('text-muted-foreground hover:underline', props.class)"
-  >
-    <slot />
-  </Primitive>
-</template>
+    <Primitive data-slot="breadcrumb-link" :as="as" :as-child="asChild" :class="cn('text-muted-foreground hover:underline', props.class)">
+        <slot />
+    </Primitive>
+</template>

package/src/components/ui/breadcrumb/BreadcrumbList.vue

@@ -1,17 +1,15 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <ol
-    data-slot="breadcrumb-list"
-    :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)"
-  >
-    <slot />
-  </ol>
-</template>
+    <ol data-slot="breadcrumb-list" :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word sm:gap-2.5', props.class)">
+        <slot />
+    </ol>
+</template>

package/src/components/ui/breadcrumb/BreadcrumbPage.vue

@@ -1,20 +1,15 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <span
-    data-slot="breadcrumb-page"
-    role="link"
-    aria-disabled="true"
-    aria-current="page"
-    :class="cn('text-foreground font-normal', props.class)"
-  >
-    <slot />
-  </span>
-</template>
+    <span data-slot="breadcrumb-page" role="link" aria-disabled="true" aria-current="page" :class="cn('text-foreground font-normal', props.class)">
+        <slot />
+    </span>
+</template>

package/src/components/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -1,23 +1,19 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { ArrowRight01Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/vue"
-import { cn } from "../../../lib/utils"
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <li
-    data-slot="breadcrumb-separator"
-    role="presentation"
-    aria-hidden="true"
-    :class="cn('[&>svg]:size-3.5', props.class)"
-  >
-    <slot>
-      <HugeiconsIcon :icon="ArrowRight01Icon" class="size-3.5" />
-    </slot>
-  </li>
-</template>
+    <li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" :class="cn('[&>svg]:size-3.5', props.class)">
+        <slot>
+            <HugeiconsIcon :icon="ArrowRight01Icon" class="size-3.5" />
+        </slot>
+    </li>
+</template>

package/src/components/ui/breadcrumb/index.ts

@@ -1,7 +1,7 @@
-export { default as Breadcrumb } from "./Breadcrumb.vue"
-export { default as BreadcrumbEllipsis } from "./BreadcrumbEllipsis.vue"
-export { default as BreadcrumbItem } from "./BreadcrumbItem.vue"
-export { default as BreadcrumbLink } from "./BreadcrumbLink.vue"
-export { default as BreadcrumbList } from "./BreadcrumbList.vue"
-export { default as BreadcrumbPage } from "./BreadcrumbPage.vue"
-export { default as BreadcrumbSeparator } from "./BreadcrumbSeparator.vue"
+export { default as Breadcrumb } from './Breadcrumb.vue';
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue';
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue';
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue';
+export { default as BreadcrumbList } from './BreadcrumbList.vue';
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue';
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue';