@bagelink/vue 1.4.32 → 1.4.40

package/src/styles/modal.css

@@ -1,140 +1,134 @@
 .bg-dark {
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    background-color: var(--bgl-dark-bg);
-    z-index: 999;
-    pointer-events: none;
-    opacity: 0;
-    transition: all ease-in-out 0.3s;
-    max-height: 100vh;
-    overflow: scroll;
-    margin: 0 auto;
-    width: 100%;
-    display: grid;
-    align-items: center;
-    overflow-x: hidden;
+	position: fixed;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+	background-color: var(--bgl-dark-bg);
+	pointer-events: none;
+	opacity: 0;
+	transition: all ease-in-out 0.3s;
+	max-height: 100vh;
+	overflow: scroll;
+	margin: 0 auto;
+	width: 100%;
+	display: grid;
+	align-items: center;
+	overflow-x: hidden;
 }
 
-
 .bg-lignt {
-    background-color: var(--bgl-white);
+	background-color: var(--bgl-white);
 }
 
 .modal {
-    width: 96%;
-    max-width: 720px;
-    /* transform: scale(0.5); */
-    /* opacity: 0; */
-    transition: all ease-in-out 0.18s;
-    margin-left: auto;
-    margin-right: auto;
-    height: fit-content;
+	width: 96%;
+	max-width: 720px;
+	/* transform: scale(0.5); */
+	/* opacity: 0; */
+	transition: all ease-in-out 0.18s;
+	margin-left: auto;
+	margin-right: auto;
+	height: fit-content;
 }
 
 .is-active .modal {
-    animation: 200ms ease bgl-modal-animation;
-
+	animation: 200ms ease bgl-modal-animation;
 }
 
 @keyframes bgl-modal-animation {
-    from {
-        scale: 0.7;
-        transform: translateY(2rem);
-    }
+	from {
+		scale: 0.7;
+		transform: translateY(2rem);
+	}
 
-    to {
-        scale: 1;
-        transform: translateY(0);
-
-    }
+	to {
+		scale: 1;
+		transform: translateY(0);
+	}
 }
 
 .small-modal .modal {
-    max-width: 300px;
-    text-align: center;
+	max-width: 300px;
+	text-align: center;
 }
 
 .tool-bar {
-    margin: -1rem -1rem 1rem;
-    display: flex;
-    justify-content: space-between;
-    position: -webkit-sticky;
-    position: sticky;
-    padding-top: 0rem;
-    top: 0rem;
-    z-index: 3;
-    background: var(--bgl-popup-bg);
-    border-radius: var(--card-border-radius);
+	margin: -1rem -1rem 1rem;
+	display: flex;
+	justify-content: space-between;
+	position: -webkit-sticky;
+	position: sticky;
+	padding-top: 0rem;
+	top: 0rem;
+	z-index: 3;
+	background: var(--bgl-popup-bg);
+	border-radius: var(--card-border-radius);
 }
 
 .modal-size {
-    cursor: pointer;
+	cursor: pointer;
 }
 
 .is-side .modal {
-    inset-inline-end: -1720px;
-    opacity: 1;
-    max-width: 600px;
-    width: 90%;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-    margin-inline-start: auto;
-    margin-inline-end: 20px;
-    min-height: calc(100vh - 40px);
-    transform: translateX(100%);
+	inset-inline-end: -1720px;
+	opacity: 1;
+	max-width: 600px;
+	width: 90%;
+	margin-top: 1rem;
+	margin-bottom: 1rem;
+	margin-inline-start: auto;
+	margin-inline-end: 20px;
+	min-height: calc(100vh - 40px);
+	transform: translateX(100%);
 }
 
 .is-active .modal {
-    opacity: 1;
-    box-shadow: 6px 6px 20px 20px #0000001c;
+	opacity: 1;
+	box-shadow: 6px 6px 20px 20px #0000001c;
 }
 
 .bg-lignt .modal {
-    border: 1px solid var(--border-color);
+	border: 1px solid var(--border-color);
 }
 
 .bg-lignt.is-active .modal {
-    box-shadow: none;
+	box-shadow: none;
 }
 
 .is-active.is-side .modal {
-    inset-inline-end: 0px;
-    transform: translateX(0%);
+	inset-inline-end: 0px;
+	transform: translateX(0%);
 }
 
 .bg-dark.is-active {
-    opacity: 1;
-    pointer-events: all;
+	opacity: 1;
+	pointer-events: all;
 }
 
 body:has(.bg-dark.is-active) {
-    overflow: hidden;
+	overflow: hidden;
 }
 
 .is-side.bg-dark.is-active {
-    opacity: 1;
-    align-items: stretch;
+	opacity: 1;
+	align-items: stretch;
 }
 
 .is-side.is-active .modal {
-    pointer-events: all;
+	pointer-events: all;
 }
 
 @media screen and (max-width: 910px) {
-    .tool-bar {
-        margin: -1rem 0rem 1rem;
-        padding-bottom: 1rem;
-        align-items: center;
-    }
-
-    .is-active.is-side .modal {
-        margin-inline-end: 2%;
-        margin-inline-start: 2%;
-        width: 98%;
-
-    }
-
-}
+	.tool-bar {
+		margin: -1rem 0rem 1rem;
+		padding-bottom: 1rem;
+		align-items: center;
+	}
+
+	.is-active.is-side .modal {
+		margin-inline-end: 2%;
+		margin-inline-start: 2%;
+		width: 98%;
+	}
+}

package/vite.config.ts

@@ -22,8 +22,9 @@ export default defineConfig(() => ({
 			'@bagelink/vue': indexDir,
 		},
 	},
+	experimental: { enableNativePlugin: true },
 	build: {
-		minify: false,
+		minify: 'oxc',
 		lib: {
 			entry: resolve(indexDir, 'index.ts'),
 			formats: ['es', 'cjs'],

package/dist/components/Carousel2.vue.d.ts

@@ -1,89 +0,0 @@
-type Easing = 'ease-in-out' | 'ease-in' | 'ease-out' | 'linear';
-type AutoplayMode = 'disabled' | 'standard' | 'linear';
-type AutoplayValue = boolean | AutoplayMode;
-interface CarouselOptions {
-    duration?: number;
-    easing?: Easing;
-    perPage?: number | {
-        [key: number]: number;
-    };
-    startIndex?: number;
-    draggable?: boolean;
-    multipleDrag?: boolean;
-    threshold?: number;
-    loop?: boolean;
-    rtl?: boolean;
-    autoplay?: AutoplayValue;
-    autoplayInterval?: number;
-    autoplaySpeed?: number;
-    pauseOnHover?: boolean;
-    dots?: boolean;
-    slideWidth?: number;
-    onInit?: () => void;
-    onChange?: () => void;
-}
-declare function prev(howManySlides?: number): void;
-declare function next(howManySlides?: number): void;
-declare function goTo(index: number): void;
-declare function remove(index: number): void;
-declare function insert(item: Element, index: number): void;
-declare function prepend(item: Element): void;
-declare function append(item: Element): void;
-declare function destroy(restoreMarkup?: boolean): void;
-declare function pauseAutoplay(): void;
-declare function resumeAutoplay(): void;
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {
-        carouselRef: HTMLDivElement;
-    };
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<CarouselOptions, {
-    prev: typeof prev;
-    next: typeof next;
-    goTo: typeof goTo;
-    remove: typeof remove;
-    insert: typeof insert;
-    prepend: typeof prepend;
-    append: typeof append;
-    destroy: typeof destroy;
-    currentSlide: import('vue').Ref<number, number>;
-    pauseAutoplay: typeof pauseAutoplay;
-    resumeAutoplay: typeof resumeAutoplay;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    change: () => any;
-    init: () => any;
-}, string, import('vue').PublicProps, Readonly<CarouselOptions> & Readonly<{
-    onChange?: (() => any) | undefined;
-    onInit?: (() => any) | undefined;
-}>, {
-    autoplay: AutoplayValue;
-    loop: boolean;
-    duration: number;
-    easing: Easing;
-    startIndex: number;
-    draggable: boolean;
-    multipleDrag: boolean;
-    threshold: number;
-    rtl: boolean;
-    autoplayInterval: number;
-    autoplaySpeed: number;
-    pauseOnHover: boolean;
-    dots: boolean;
-    slideWidth: number;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    carouselRef: HTMLDivElement;
-}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
-//# sourceMappingURL=Carousel2.vue.d.ts.map

package/dist/components/Carousel2.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Carousel2.vue.d.ts","sourceRoot":"","sources":["../../src/components/Carousel2.vue"],"names":[],"mappings":"AAy/BA,KAAK,MAAM,GAAG,aAAa,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAA;AAC/D,KAAK,YAAY,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAA;AACtD,KAAK,aAAa,GAAG,OAAO,GAAG,YAAY,CAAA;AAE3C,UAAU,eAAe;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,GAAG;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAA;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,QAAQ,CAAC,EAAE,aAAa,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAkWD,iBAAS,IAAI,CAAC,aAAa,GAAE,MAAU,GAAG,IAAI,CAmC7C;AAED,iBAAS,IAAI,CAAC,aAAa,GAAE,MAAU,GAAG,IAAI,CAmC7C;AAED,iBAAS,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAejC;AA+SD,iBAAS,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAenC;AAED,iBAAS,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAkBlD;AAED,iBAAS,OAAO,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAEpC;AAED,iBAAS,MAAM,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAEnC;AAED,iBAAS,OAAO,CAAC,aAAa,GAAE,OAAe,GAAG,IAAI,CAkBrD;AAqGD,iBAAS,aAAa,IAAI,IAAI,CAE7B;AAED,iBAAS,cAAc,IAAI,IAAI,CAI9B;AAgDD,iBAAS,cAAc;WAyDT,OAAO,IAA6B;;yBAXrB,GAAG;;;;;;EAgB/B;AAcD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;cA3hCT,aAAa;UAFjB,OAAO;cAPH,MAAM;YACR,MAAM;gBAEF,MAAM;eACP,OAAO;kBACJ,OAAO;eACV,MAAM;SAEZ,OAAO;sBAEM,MAAM;mBACT,MAAM;kBACP,OAAO;UACf,OAAO;gBACD,MAAM;;;kBAiiClB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/src/components/dashboard/Lineart.vue

@@ -1,212 +0,0 @@
-<script lang="ts" setup>
-import type { ChartAxis, Data } from 'vue3-charts/dist/types'
-import { onMounted, onUnmounted } from 'vue'
-import {
-	Area,
-	Chart,
-	Grid,
-	Line,
-	Marker,
-	Tooltip,
-} from 'vue3-charts'
-
-const props = defineProps<{ data: Data[], locale: string }>()
-
-const data = $computed(() => (props.locale === 'he' ? [...props.data].reverse() : props.data))
-
-interface Size {
-	width: number
-	height: number
-}
-
-// Computed properties
-const meanValue = $computed(() => {
-	const sum = props.data.reduce((acc, curr) => acc + +curr.total_value, 0)
-	return sum / props.data.length
-})
-
-const axisConfig = $computed<ChartAxis>(() => ({
-	primary: {
-		type: 'band',
-		rotate: true,
-		ticks: 5,
-		domain: ['dataMin', 'dataMax'],
-		tickValues:
-			 props.data.length > 100 ? [''] : props.data.map((d: any) => d.date),
-	},
-	secondary: {
-		domain: ['dataMin', 'dataMax * 1.05'],
-		type: 'linear',
-		ticks: 8,
-	},
-}))
-
-// Constants
-const BRAND_COLOR = 'var(--bgl-primary)'
-
-const tooltipConfiguration = {
-	date: { label: 'תאריך' },
-	total_value: {
-		color: BRAND_COLOR,
-		label: 'סכום',
-		format: (v: number) => `₪${v.toLocaleString() || ''}`,
-	},
-	total_count: {
-		label: 'מספר התרומות',
-		format: (v: number) => `${v.toLocaleString() || ''}`,
-	},
-}
-
-// Refs
-let chartSize = $ref<Size | undefined>()
-const chartContainer = $ref<HTMLElement>()
-const displayMarker = $ref(true)
-const chartMargin = $ref({
-	left: 0,
-	top: 0,
-	right: 0,
-	bottom: 0,
-})
-
-// Functions
-function adjustChartSize() {
-	chartSize = undefined
-	const el = chartContainer
-	if (!el) return
-	const { width, height } = el.getBoundingClientRect()
-	chartSize = { width: width - 5, height: height - 10 }
-	// console.log(chartSize)
-}
-
-function handleResize() {
-	setTimeout(adjustChartSize, 300)
-}
-
-// Lifecycle hooks
-onMounted(() => {
-	adjustChartSize()
-	window.addEventListener('resize', handleResize)
-})
-
-onUnmounted(() => {
-	window.removeEventListener('resize', handleResize)
-})
-
-// Style Configurations
-function dotStyling(ctx: { [key: string]: any }) {
-	return {
-		r: ctx.active ? 5 : 1,
-		fill: BRAND_COLOR,
-	}
-}
-</script>
-
-<template>
-	<div
-		ref="chartContainer"
-		class="chart-line"
-	>
-		<Chart
-			v-if="chartSize"
-			:size="chartSize"
-			:data
-			:margin="chartMargin"
-			:axis="axisConfig"
-		>
-			<template #layers>
-				<Grid
-					:center="true"
-					strokeDasharray="2,2"
-					:hideY="true"
-				/>
-				<Area
-					aria-label="Profit/Loss"
-					:dataKeys="['date', 'total_value']"
-					type="monotone"
-					:areaStyle="{ fill: 'url(#grad)' }"
-				/>
-				<Line
-					:dataKeys="['date', 'total_value']"
-					type="monotone"
-					:dotStyle="dotStyling"
-					:lineStyle="{ stroke: BRAND_COLOR, r: 2 }"
-				/>
-				<Marker
-					v-if="displayMarker"
-					:value="meanValue"
-					label="ממוצע"
-					:color="BRAND_COLOR"
-					:strokeWidth="2"
-					strokeDasharray="6 6"
-				/>
-				<defs>
-					<linearGradient
-						id="grad"
-						gradientTransform="rotate(90)"
-					>
-						<stop
-							offset="0%"
-							:stop-color="BRAND_COLOR"
-							stop-opacity="1"
-						/>
-						<stop
-							offset="100%"
-							stop-color="white"
-							stop-opacity="0.4"
-						/>
-					</linearGradient>
-				</defs>
-			</template>
-			<template #widgets>
-				<Tooltip
-					color="white"
-					:config="tooltipConfiguration"
-				/>
-			</template>
-		</Chart>
-	</div>
-</template>
-
-<style>
-.chart-line {
-	width: 100%;
-	height: 300px;
-}
-
-[dir="rtl"] .chart-line {
-	direction: ltr;
-}
-
-.chart-line .v-tooltip-content>div {
-	border: none !important;
-	border-radius: 6px !important;
-	background-color: black !important;
-	opacity: 0.7;
-	padding: 0.5rem 1rem !important;
-	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
-	font-weight: 300;
-}
-
-.chart-line .v-tooltip-content>div b {
-	font-weight: 400;
-}
-
-.layer-grid g:last-child {
-	display: none;
-}
-
-.layer-axis-x .tick:nth-child(2n + 1) {
-	opacity: 0;
-}
-
-@media screen and (max-width: 910px) {
-	.chart-line {
-		height: 140px;
-	}
-
-	.layer-axis-x .tick {
-		opacity: 0;
-		font-size: 0;
-	}
-}
-</style>

package/src/components/dashboard/index.ts

@@ -1 +0,0 @@
-export { default as Lineart } from './Lineart.vue'