@bagelink/vue 1.15.59 → 1.15.63

package/dist/utils/index.d.ts

@@ -44,7 +44,7 @@ export declare function normalizeDimension(value: string | number | undefined, d
 export type { NormalizedOption } from './options';
 export { getOptionIcon, getOptionLabel, getOptionValue, normalizeOption } from './options';
 export type { ComparisonOperator, FilterCondition, LogicalOperator, QueryConditions, QueryFilter } from './queryFilter';
-export { anyOf, parseQuery, queryFilter, range, search } from './queryFilter';
+export { anyOf, buildQuery, evaluateQuery, parseQuery, queryFilter, range, search } from './queryFilter';
 export type { ShowdownConverter, ShowdownOptions } from './showdown';
 export declare function pathKeyToURL(pathKey?: string | null): string | undefined;
 export declare function getNestedValue(obj: any, path?: string, defaultValue?: any): any;

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.59",
+  "version": "1.15.63",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/Avatar.vue

@@ -1,23 +1,39 @@
 <script setup lang="ts">
 defineOptions({ name: 'BglAvatar' })
-import type { IconType } from '@bagelink/vue'
+import type { IconType, ThemeType } from '@bagelink/vue'
 import { initials, Icon } from '@bagelink/vue'
+import { computed } from 'vue'
 import Image from './Image.vue'
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
 	fallback?: string
 	src?: string
 	name?: string
 	icon?: IconType
 	alt?: string
 	size?: number
+	/** Rounded-square instead of a circle. `true` = themed radius, or pass a px radius. */
+	square?: boolean | number
+	/** Theme color → tinted background + matching icon/text color (e.g. an icon chip). */
+	color?: ThemeType
 }>(), { size: 50 })
+
+const radius = computed(() => {
+	if (!props.square) { return '1000px' } // circle (default)
+	if (props.square === true) { return 'var(--bgl-btn-border-radius)' }
+	return `${props.square}px`
+})
+
+// When a theme color is given, tint the background and color the icon/initials.
+const themed = computed(() => props.color
+	? { background: `var(--bgl-${props.color}-tint, color-mix(in srgb, var(--bgl-${props.color}) 14%, transparent))`, color: `var(--bgl-${props.color})`, border: 'none' }
+	: {})
 </script>
 
 <template>
 	<div
-		class="round overflow-hidden txt-center p-0 avatar flex justify-content-center"
-		:style="{ width: `${size}px`, height: `${size}px` }"
+		class="overflow-hidden txt-center p-0 avatar flex justify-content-center align-items-center"
+		:style="{ width: `${size}px`, height: `${size}px`, borderRadius: radius, ...themed }"
 	>
 		<Image v-if="src" :src="src" :alt="alt || name" />
 		<Icon v-else-if="icon" :icon="icon" :size="size / 40" />

package/src/components/Badge.vue

@@ -17,10 +17,15 @@ const props = defineProps<{
 	icon?: IconType
 	iconEnd?: IconType
 	color?: ThemeType
-	variant?: 'solid' | 'flat' | 'outline'
+	variant?: 'solid' | 'flat' | 'outline' | 'glass'
 	/** Boolean variant shorthands: <Badge flat /> — same as variant="flat" */
 	flat?: boolean
 	outline?: boolean
+	/** Translucent frosted badge — readable on photos / gradients / dark heroes.
+	    Shorthand for variant="glass". */
+	glass?: boolean
+	/** Leading status dot in the theme color (e.g. ● Live, ● Active). */
+	dot?: boolean
 	/** @deprecated Use `outline` */
 	border?: boolean
 	loading?: boolean
@@ -50,6 +55,12 @@ const computedPairClass = computed(() => {
 	return `pair-${theme}`
 })
 
+// Dot uses the badge's theme color (strip any -light/-tint suffix for a solid dot).
+const dotColor = computed(() => {
+	const base = (computedTheme.value || 'primary').replace(/-(light|tint|10|20|30|40|50|60|70)$/, '')
+	return `var(--bgl-${base})`
+})
+
 const computedSize = computed(() => {
 	if (props.size) { return props.size }
 	if (props.sm) { return 'sm' }
@@ -59,6 +70,7 @@ const computedSize = computed(() => {
 
 const computedVariant = computed(() => {
 	if (props.variant) { return props.variant }
+	if (props.glass) { return 'glass' }
 	if (props.flat) { return 'flat' }
 	if (props.outline || props.border) { return 'outline' }
 	return 'solid'
@@ -70,6 +82,7 @@ const computedClasses = computed(() => {
 		'round': props.round,
 		'bgl_flatPill': computedVariant.value === 'flat',
 		'bgl_pill-border': computedVariant.value === 'outline',
+		'bgl_glassPill': computedVariant.value === 'glass',
 		'pillLarge': computedSize.value === 'lg',
 		'pillSmall': computedSize.value === 'sm',
 	}
@@ -90,8 +103,9 @@ const computedClasses = computed(() => {
 	>
 		<div class="flex h-100 justify-content-center relative ">
 			<div v-if="loading" class="loading absolute inset-0 mx-auto" />
-			<div class="px-025 flex gap-025 justify-content-center" :class="{ 'opacity-0': loading }">
+			<div class="px-025 flex gap-025 justify-content-center align-items-center" :class="{ 'opacity-0': loading }">
 				<Btn v-if="btn" class="bgl_pill-btn -ms-025" icon-size="0.8" round v-bind="btn" />
+				<span v-if="dot" class="bgl_pill-dot" :style="{ background: dotColor }" />
 				<Icon v-if="icon" class="line-height-0" :icon="icon" style="font-size: var(--bgl-pill-font-size)" />
 				<slot :class="{ uppercase }" />
 				<template v-if="!slots.default">
@@ -119,6 +133,12 @@ const computedClasses = computed(() => {
 .pillText{
 font-size: var(--bgl-pill-font-size);
 }
+.bgl_pill-dot{
+width: 6px;
+height: 6px;
+border-radius: 50%;
+flex-shrink: 0;
+}
 .bgl_pill-btn{
 color: var(--bgl-pill-btn-color);
 background: var(--bgl-pill-btn-bg);
@@ -166,4 +186,14 @@ vertical-align: middle;
 border-radius: 1000px;
 }
 
+/* Glass: frosted translucent badge for photos / gradients / dark heroes.
+   Defaults to light-on-dark; flip via --bgl-glass-bg / --bgl-glass-color. */
+.bgl_glassPill {
+background-color: var(--bgl-glass-bg, rgba(255, 255, 255, 0.18)) !important;
+color: var(--bgl-glass-color, #fff) !important;
+border: 1px solid var(--bgl-glass-border, rgba(255, 255, 255, 0.28));
+backdrop-filter: blur(8px);
+-webkit-backdrop-filter: blur(8px);
+}
+
 </style>

package/src/components/Dropdown.vue

@@ -403,7 +403,7 @@ defineExpose({ show, hide, shown })
 				@focus="onPopoverMouseenter" @blur="onPopoverMouseleave" @keydown="onPopoverKeydown"
 			>
 				<div class="bgl-dropdown__backdrop" />
-				<div class="bgl-dropdown__content overflow-hidden" :class="{ 'display-flex column': props.card }"
+				<div class="bgl-dropdown__content overflow-hidden" :class="{ 'display-flex column bgl-dropdown__content--card': props.card }"
 				style="border-radius: var(--bgl-card-border-radius);">
 					<slot :hide :show :shown />
 				</div>
@@ -482,6 +482,12 @@ animation: bgl-dropdown-enter 0.18s ease 0.04s both;
 transform-origin: top left;
 }
 
+/* Default menu breathing room so consumers don't wrap content in py-* just to
+   stop items touching the rounded edges. */
+.bgl-dropdown__content--card .bgl_card{
+padding-block: 0.375rem;
+}
+
 </style>
 <!-- prettier-ignore-end -->
 <!-- eslint-enable -->

package/src/components/ListItem.vue

@@ -22,25 +22,36 @@ const props = withDefaults(
 		fullWidth?: boolean
 		ellipsis?: boolean
 		ripple?: boolean
+		/** Make the whole row one hover/click target: the clickable button stretches
+		    to the trailing edge and the #end meta floats over it (still clickable).
+		    Great for simple rows with light trailing meta. Opt-in — the classic
+		    layout (only the text area clickable) remains the default so rows with
+		    wide trailing content aren't affected. Tune reserved room with the CSS
+		    var --bgl-list-item-end-space. */
+		fullRow?: boolean
+		/** Render as an interactive row (cursor + hover) without needing a handler.
+		    Implied when `to`, `href`, or `onClick` is set. */
+		clickable?: boolean
 		onClick?: () => void
 	}>(),
 	{
 		ellipsis: true,
-		ripple: true
+		ripple: false,
+		fullRow: false,
 	}
 )
 
+const hasTo = computed(() => props.to !== undefined && props.to !== '')
+const hasHref = computed(() => props.href !== undefined && props.href !== '')
+const isClickable = computed(() => hasTo.value || hasHref.value || props.onClick !== undefined || props.clickable === true)
+
 const isComponent = computed(() => {
-	if (props.to !== undefined && props.to !== '') { return 'router-link' }
-	if (props.href !== undefined && props.href !== '') { return 'a' }
-	if (props.onClick !== undefined) { return 'button' }
+	if (hasTo.value) { return 'router-link' }
+	if (hasHref.value) { return 'a' }
+	if (isClickable.value) { return 'button' }
 	return 'div'
 })
 
-const isClickable = computed(() => {
-	return (props.to !== undefined && props.to !== '') || (props.href !== undefined && props.href !== '') || (props.onClick !== undefined)
-})
-
 const bind = computed(() => {
 	const obj: { [key: string]: any } = {}
 	if (props.to !== undefined && props.to !== '') { obj.to = props.to }
@@ -48,7 +59,7 @@ const bind = computed(() => {
 	if (props.target !== undefined && props.target !== undefined && ((props.to !== undefined && props.to !== '') || (props.href !== undefined && props.href !== ''))) { obj.target = props.target }
 
 	obj.class = {
-		'notClickable': !((props.to !== undefined && props.to !== '') || (props.onClick !== undefined)),
+		'notClickable': !isClickable.value,
 		'no-border-list': props.flat,
 	}
 	if (props.disabled) { obj.disabled = true }
@@ -57,126 +68,190 @@ const bind = computed(() => {
 </script>
 
 <template>
-	<div class="flex space-between">
-		<!-- Content rendered before the clickable area (e.g. a drag handle). Lives
-		     outside the clickable component so interacting with it never triggers
-		     navigation/selection. -->
-		<slot name="start" />
+	<div
+		class="flex space-between list-item-row"
+		:class="{ 'no-border-list': props.flat, 'list-item-flush': props.fullWidth, 'list-item-fullrow': fullRow && isClickable }"
+	>
+		<!-- Content rendered before the clickable area (e.g. a drag handle, avatar
+		     or leading visual). Lives outside the clickable component so interacting
+		     with it never triggers navigation/selection. -->
+		<div v-if="$slots.start" class="list-item-start flex align-items-center flex-shrink-0">
+			<slot name="start" />
+		</div>
 		<component
 			:is="isComponent" v-bind="bind" v-ripple="ripple && isClickable"
-			class="flex flex-grow-1 gap-05 list-item" :class="{
-				'py-1': !props.thin,
+			class="flex flex-grow-1 gap-075 align-items-center list-item" :class="{
+				'py-075': !props.thin,
 				'py-05': props.thin,
 				'px-1': !props.fullWidth,
 				'px-0': props.fullWidth,
-			}" @click="onClick"
+			}" @click="typeof onClick === 'function' && onClick()"
 		>
-			<Avatar v-if="src || showAvatar" style="flex-basis: 1;" :name="title" :src="src" :size="40" />
-			<Icon v-if="icon" size="1.2" class="color-primary" :icon="icon" />
+			<!-- Leading visual INSIDE the clickable area. Use #media for custom art
+			     (covers, thumbnails); `src`/`showAvatar` and `icon` are shortcuts. -->
+			<slot name="media">
+				<Avatar v-if="src || showAvatar" :name="title" :src="src" :size="thin ? 30 : 38" class="flex-shrink-0" />
+				<span v-if="icon" class="list-item-icon flex-shrink-0">
+					<Icon size="1.2" :icon="icon" />
+				</span>
+			</slot>
 
-			<div class="txt-start">
-				<p v-if="lead" class="txt10 m-0 p-0 txt-gray " :class="{ ellipsis }">
+			<div class="txt-start flex-grow-1 list-item-body">
+				<p v-if="lead" class="list-item-lead" :class="{ ellipsis }">
 					{{ lead }}
 					<slot name="lead" />
 				</p>
-				<p class="m-0 p-0 line-height-14 pb-025 item-title" :class="{ 'ellipsis-1': ellipsis }">
+				<p class="list-item-title" :class="{ 'ellipsis-1': ellipsis }">
 					{{ title }}
 					<slot />
 				</p>
-				<p
-					v-if="subtitle" class="txt12 m-0 m-0 py-0 ps-0 pe-1-5 opacity-7 me-2"
-					:class="{ 'ellipsis-1': ellipsis }"
-				>
+				<p v-if="subtitle || $slots.subtitle" class="list-item-subtitle" :class="{ 'ellipsis-1': ellipsis }">
 					{{ subtitle }}
 					<slot name="subtitle" />
 				</p>
 			</div>
-			<div class="flex-grow-1" />
 		</component>
-		<slot name="end">
-			<Icon v-if="iconEnd" :icon="iconEnd" class="transition-400" />
-			<p
-				v-if="end" class="txt12 m-0 py-0 ps-0 pe-1-5 opacity-7 " :class="{ 'ellipsis-1': ellipsis }"
-				v-text="end"
-			/>
-		</slot>
+		<!-- Trailing meta. With fullRow, it overlaps the clickable button via a
+		     negative margin so the button spans the whole row underneath it; the
+		     end content itself stays on top and independently clickable. -->
+		<div class="list-item-end flex align-items-center gap-05 flex-shrink-0">
+			<slot name="end">
+				<span v-if="end" class="list-item-endtext" :class="{ 'ellipsis-1': ellipsis }" v-text="end" />
+				<Icon v-if="iconEnd" :icon="iconEnd" class="transition-400 opacity-4" />
+			</slot>
+		</div>
 	</div>
 </template>
 
 <style>
 
-button.list-item {
-cursor: pointer;
-display: flex;
+/* The row wraps the clickable area + start/end slots and owns the divider.
+   Center start/end slots against the (possibly taller) text block by default —
+   the common case for lists with a leading icon/handle and trailing meta. */
+.list-item-row {
+position: relative;
+align-items: center;
 gap: 0.5rem;
-border: none;
-background-color: unset;
-width: 100%;
-
 }
 
-.list-item:disabled {
-opacity: 0.5;
-pointer-events: none;
+/* Full-row click target: the clickable button stretches to the row's trailing
+   edge so hover/active read across the whole item. The trailing meta is lifted
+   out of flow and floated over the button's end — staying visible and
+   independently clickable. The button reserves matching room so text never sits
+   under the meta. Tune the reserved width with --bgl-list-item-end-space. */
+.list-item-fullrow {
+--bgl-list-item-end-space: 3rem;
 }
-
-.list-item {
-min-height: -webkit-fit-content;
-min-height: -moz-fit-content;
-min-height: fit-content;
-margin: 0rem 0;
-cursor: pointer;
-transition: var(--bgl-transition);
-color: var(--bgl-text-color);
-text-decoration: none;
-position: relative;
+.list-item-fullrow .list-item-end {
+position: absolute;
+inset-inline-end: 0.5rem;
+top: 50%;
+transform: translateY(-50%);
+z-index: 1;
+/* non-interactive meta lets clicks fall through to the row button… */
+pointer-events: none;
 }
-
-.list-item>* {
-margin-bottom: 0;
+/* …interactive trailing controls stay clickable on top of the row button. */
+.list-item-fullrow .list-item-end :where(button, a, input, select, label, [role="button"], [tabindex]) {
+pointer-events: auto;
 }
-
-.list-item::after {
+.list-item-fullrow .list-item:not(.px-0) { padding-inline-end: var(--bgl-list-item-end-space); }
+.list-item-fullrow.list-item-flush .list-item-end { inset-inline-end: 0; }
+.list-item-row::after {
 content: '';
 position: absolute;
-left: 0;
-right: 0;
+inset-inline: 0;
 bottom: 0;
 border-bottom: 1px solid var(--bgl-border-color);
 }
-
-.list-item:last-child::after {
-content: '';
-position: absolute;
-left: 0;
-right: 0;
-bottom: 0;
+.list-item-row:last-child::after,
+.list-item-row.no-border-list::after {
 border-bottom: none;
 }
 
+button.list-item {
+border: none;
+background-color: unset;
+width: 100%;
+font: inherit;
+text-align: inherit;
+}
+
+.list-item {
+min-height: fit-content;
+cursor: pointer;
+transition: background-color 0.15s ease;
+/* Inherit color so the component adapts to ANY surface (light, dark, a
+   hard-coded black panel) without per-consumer overrides. On a normal
+   Bagelink surface `currentColor` resolves to --bgl-text-color. */
+color: inherit;
+text-decoration: none;
+border-radius: var(--bgl-btn-border-radius);
+}
+
+.list-item:disabled {
+opacity: 0.5;
+pointer-events: none;
+}
+
+/* Hover/active use Bagelink's translucent gray tint, which already flips from
+   translucent-dark (light mode) to translucent-light (.bgl-dark-mode) — so it
+   reads correctly on any background. Override per-list with --bgl-list-item-hover. */
 .list-item:hover,
 .list-item.router-link-exact-active {
-background-color: var(--bgl-primary-tint);
+background-color: var(--bgl-list-item-hover, var(--bgl-gray-tint));
+}
+.list-item.router-link-exact-active {
+background-color: var(--bgl-list-item-active, var(--bgl-primary-tint));
 }
 
+.notClickable,
 .notClickable:hover {
 background-color: unset;
 cursor: default;
 }
 
 .list-item:active {
--webkit-filter: var(--bgl-hover-filter);
 filter: var(--bgl-hover-filter);
 }
 
-.no-border-list.list-item::after {
-border-bottom: none;
+/* Leading icon chip */
+.list-item-icon {
+display: grid;
+place-items: center;
+width: 34px;
+height: 34px;
+border-radius: 9px;
+background: color-mix(in srgb, var(--bgl-primary) 10%, transparent);
+color: var(--bgl-primary);
 }
 
-@media screen and (max-width: 910px) {
-.list-item {
-	padding: 0.5rem;
+/* Text block: tight, clear hierarchy */
+.list-item-body > p { margin: 0; padding: 0; }
+.list-item-lead {
+font-size: 0.6875rem;
+font-weight: 600;
+text-transform: uppercase;
+letter-spacing: 0.04em;
+opacity: 0.5;
+line-height: 1.3;
+}
+.list-item-title {
+font-size: 0.9375rem;
+font-weight: 500;
+line-height: 1.35;
+}
+.list-item-subtitle {
+font-size: 0.8125rem;
+opacity: 0.6;
+line-height: 1.35;
+margin-top: 1px;
 }
+.list-item-endtext {
+font-size: 0.8125rem;
+opacity: 0.6;
+white-space: nowrap;
 }
+.list-item-end:empty { display: none; }
 
 </style>

package/src/components/Progress.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+/**
+ * <Progress :value="68" />                      // linear bar
+ * <Progress :value="68" color="green" label />  // with % label
+ * <Progress :value="90" ring :size="86" color="pink">{{ v }}%</Progress>  // ring/donut
+ *
+ * Covers both the dashboard "track + fill" bar and the conic-gradient ring/donut
+ * that views previously hand-rolled. Animates fill on value change; the ring
+ * center is a free-form slot.
+ */
+defineOptions({ name: 'BglProgress' })
+import type { ThemeType } from '@bagelink/vue'
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+	/** 0–100. */
+	value?: number
+	color?: ThemeType
+	/** Render as a circular ring/donut instead of a bar. */
+	ring?: boolean
+	/** Bar thickness (px) or ring diameter (px). */
+	size?: number
+	/** Ring stroke width (px). Ignored for bars. */
+	thickness?: number
+	/** Show a trailing % label (bar only, when no default slot). */
+	label?: boolean
+}>(), { value: 0, color: 'primary', size: undefined, thickness: 9 })
+
+const pct = computed(() => Math.max(0, Math.min(100, props.value)))
+const accent = computed(() => `var(--bgl-${props.color})`)
+const ringSize = computed(() => props.size ?? 86)
+const barHeight = computed(() => props.size ?? 8)
+</script>
+
+<template>
+	<!-- RING / DONUT -->
+	<div
+		v-if="ring"
+		class="bgl-progress-ring grid place-items-center"
+		:style="{
+			width: `${ringSize}px`,
+			height: `${ringSize}px`,
+			'--bgl-progress-pct': `${pct}`,
+			background: `conic-gradient(${accent} calc(var(--bgl-progress-pct) * 1%), var(--bgl-progress-track, var(--bgl-border-color)) 0)`,
+		}"
+	>
+		<div
+			class="bgl-progress-ring-hole grid place-items-center txt-center"
+			:style="{ width: `calc(100% - ${thickness * 2}px)`, height: `calc(100% - ${thickness * 2}px)` }"
+		>
+			<slot />
+		</div>
+	</div>
+
+	<!-- LINEAR BAR -->
+	<div v-else class="flex gap-075 align-items-center">
+		<div class="bgl-progress-track flex-grow" :style="{ height: `${barHeight}px` }">
+			<div class="bgl-progress-fill" :style="{ width: `${pct}%`, background: accent }" />
+		</div>
+		<span v-if="label && !$slots.default" class="txt12 opacity-6 bgl-progress-label">{{ Math.round(pct) }}%</span>
+		<slot />
+	</div>
+</template>
+
+<style scoped>
+.bgl-progress-ring { border-radius: 50%; }
+.bgl-progress-ring-hole { border-radius: 50%; background: var(--bgl-box-bg); }
+
+.bgl-progress-track {
+	border-radius: 100px;
+	background: var(--bgl-progress-track, var(--bgl-border-color));
+	overflow: hidden;
+}
+.bgl-progress-fill {
+	height: 100%;
+	border-radius: 100px;
+	transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.bgl-progress-label { font-variant-numeric: tabular-nums; min-width: 2.5em; text-align: end; }
+</style>

package/src/components/Swiper.vue

@@ -464,6 +464,24 @@ width: 100%;
 --swiper-pagination-color: white;
 }
 
+/* Pagination: keep Swiper's own horizontal centering (left:50% + translateX),
+   just give the wrapper a sane bottom offset and consistent bullet sizing so
+   consumers don't need :deep() overrides to fix position. Override the bullet
+   look with --swiper-pagination-* vars. */
+.swi-wrap .swiper-pagination-bullets {
+bottom: 8px;
+}
+.swi-wrap .swiper-pagination-bullet {
+width: var(--swiper-pagination-bullet-width, 7px);
+height: var(--swiper-pagination-bullet-height, 7px);
+background: var(--swiper-pagination-bullet-inactive-color, #fff);
+opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.6);
+}
+.swi-wrap .swiper-pagination-bullet-active {
+opacity: 1;
+background: var(--swiper-pagination-color, #fff);
+}
+
 .swi-ctrl {
 position: absolute;
 top: 50%;
@@ -492,7 +510,7 @@ position: relative;
 
 .swi-prev,
 .swi-next {
-background: var(--blue);
+background: var(--bgl-primary);
 height: 40px;
 width: 40px;
 border-radius: 100%;

package/src/components/index.ts

@@ -37,6 +37,7 @@ export { default as Menu } from './Menu.vue'
 export { default as NavBar } from './NavBar.vue'
 export { default as PageTitle } from './PageTitle.vue'
 export { default as Pagination } from './Pagination.vue'
+export { default as Progress } from './Progress.vue'
 export { default as Rating } from './Rating.vue'
 export { default as RouterWrapper } from './RouterWrapper.vue'
 export { default as Spreadsheet } from './Spreadsheet/Index.vue'