@bagelink/vue 0.0.348 → 0.0.352

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.348",
+  "version": "0.0.352",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Btn.vue

@@ -1,23 +1,25 @@
 <template>
-  <component :is="to ? 'router-link' : is" :to="to" @click.stop="onClick" :type="type" :role="role" :disabled="disabled"
-    :class="{
-    'bgl_btn-icon': icon && !slots['default'] && !value,
-    bgl_btn: !icon || slots['default'] || value,
-    thin,
-    round,
-    'bgl_flatBtn': flat,
-    'bgl_btn-border': border
-  }">
-    <div class="loading" v-if="loading" />
-    <div v-else class="bgl_btn-flex">
-      <MaterialIcon v-if="icon" :icon="icon" />
-      <slot />
-      <template v-if="!slots['default'] && value">
-        {{ value }}
-      </template>
-      <MaterialIcon v-if="props['icon.end']" :icon="props['icon.end']" />
-    </div>
-  </component>
+	<component
+		:is="to ? 'router-link' : is" :to="to" @click.stop="onClick" :type="type" :role="role" :disabled="disabled"
+		:class="{
+			'bgl_btn-icon': icon && !slots['default'] && !value,
+			bgl_btn: !icon || slots['default'] || value,
+			thin,
+			round,
+			'bgl_flatBtn': flat,
+			'bgl_btn-border': border
+		}"
+	>
+		<div class="loading" v-if="loading" />
+		<div v-else class="bgl_btn-flex">
+			<MaterialIcon v-if="icon" :icon="icon" />
+			<slot />
+			<template v-if="!slots['default'] && value">
+				{{ value }}
+			</template>
+			<MaterialIcon v-if="props['icon.end']" :icon="props['icon.end']" />
+		</div>
+	</component>
 </template>
 
 <script setup lang="ts">
@@ -28,7 +30,7 @@ import type { MaterialIcons, ThemeType } from '@bagelink/vue';
 import { MaterialIcon } from '@bagelink/vue';
 
 const props = withDefaults(
-  defineProps<{
+	defineProps<{
     disabled?: boolean;
     icon?: MaterialIcons;
     'icon.end'?: MaterialIcons;
@@ -46,59 +48,60 @@ const props = withDefaults(
     is?: string;
     onClick?: (e: MouseEvent) => void;
   }>(),
-  {
-    onClick: () => '',
-    loading: false,
-    round: false,
-    disabled: false,
-    type: 'button',
-    role: 'button',
-    is: 'button',
-    border: false,
-  },
+	{
+		onClick: () => '',
+		loading: false,
+		round: false,
+		disabled: false,
+		type: 'button',
+		role: 'button',
+		is: 'button',
+		border: false,
+	},
 );
 
 const computedTheme = $computed(
-  () => {
-    if (props.disabled) return 'gray-light';
-    return (props?.color || props?.theme);
-  },
+	() => {
+		if (props.disabled) return 'gray-light';
+		return (props?.color || props?.theme);
+	},
 );
 
 const computedDefaultColors = $computed(
-  () => ({
-    backgroundColor: 'var(--bgl-primary)',
-    color: props.flat ? 'var(--bgl-black)' : 'var(--bgl-white)',
-  }),
+	() => ({
+		backgroundColor: 'var(--bgl-primary)',
+		color: props.flat ? 'var(--bgl-black)' : 'var(--bgl-white)',
+	}),
 );
 
 function getThemeColors(theme: Partial<typeof computedDefaultColors>): typeof computedDefaultColors {
-  return ({
-    ...computedDefaultColors,
-    ...theme,
-    color: props.flat
-      ? theme.backgroundColor as string
-      : theme.color as string,
-  });
+	return ({
+		...computedDefaultColors,
+		...theme,
+		color: props.flat
+			? theme.backgroundColor as string
+			: theme.color as string,
+	});
 }
 
 const themes: { [key in ThemeType]: typeof computedDefaultColors } = {
-  red: getThemeColors({ backgroundColor: 'var(--bgl-red)' }),
-  black: getThemeColors({ backgroundColor: 'var(--bgl-black)' }),
-  green: getThemeColors({ backgroundColor: 'var(--bgl-green)', color: 'var(--bgl-white)' }),
-  primary: getThemeColors({ backgroundColor: 'var(--bgl-primary)', color: 'var(--bgl-white)' }),
-  gray: getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-black)' }),
-  light: getThemeColors({ backgroundColor: 'var(--bgl-primary-light)', color: 'var(--bgl-primary)' }),
-  'gray-light': getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-gray)' }),
-  blue: getThemeColors({}),
+	red: getThemeColors({ backgroundColor: 'var(--bgl-red)' }),
+	white: getThemeColors({ backgroundColor: 'var(--bgl-white)' }),
+	black: getThemeColors({ backgroundColor: 'var(--bgl-black)' }),
+	green: getThemeColors({ backgroundColor: 'var(--bgl-green)', color: 'var(--bgl-white)' }),
+	primary: getThemeColors({ backgroundColor: 'var(--bgl-primary)', color: 'var(--bgl-white)' }),
+	gray: getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-black)' }),
+	light: getThemeColors({ backgroundColor: 'var(--bgl-primary-light)', color: 'var(--bgl-primary)' }),
+	'gray-light': getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-gray)' }),
+	blue: getThemeColors({}),
 };
 
 const cumputedTextColor = $computed(
-  () => (themes?.[computedTheme as ThemeType]?.color || computedDefaultColors.color),
+	() => (themes?.[computedTheme as ThemeType]?.color || computedDefaultColors.color),
 );
 
 const computedBackgroundColor = $computed(
-  () => (themes?.[computedTheme as ThemeType]?.backgroundColor || computedDefaultColors.backgroundColor),
+	() => (themes?.[computedTheme as ThemeType]?.backgroundColor || computedDefaultColors.backgroundColor),
 );
 </script>
 
@@ -194,7 +197,7 @@ a {
 
 .bgl_btn.bgl_flatBtn:active,
 .bgl_btn-icon.bgl_flatBtn:active {
-  background: var(--bgl-white);
+  background: var(--bgl-gray);
   filter: var(--bgl-hover-filter);
 }
 
@@ -202,6 +205,10 @@ a {
 .bgl_btn-icon.bgl_flatBtn.red {
   color: var(--bgl-red);
 }
+.bgl_btn.bgl_flatBtn.white,
+.bgl_btn-icon.bgl_flatBtn.white {
+  color: var(--bgl-white);
+}
 
 .bgl_btn.bgl_flatBtn.light,
 .bgl_btn-icon.bgl_flatBtn.light {

package/src/components/Carousel.vue

@@ -1,19 +1,28 @@
 <template>
-  <div class="BglCarousel" :style="{ height: yHeight }" :class="{ autoHeight }">
-    <div :class="{ dragging: isDragging, clicking: isPressed, [`slides-${items}`]: true, allowScroll }"
-      @scrollend="scrollEnd" @mousedown="startDragging" class="bgl-slider" ref="bglSlider">
-      <div v-if="isDragging" class="blocker" />
-      <slot />
-    </div>
-    <div class="Handlers">
-      <span @click="prev">
-        <slot name="prev" />
-      </span>
-      <span @click="next">
-        <slot name="next" />
-      </span>
-    </div>
-  </div>
+	<div class="BglCarousel" :style="{ height: yHeight }" :class="{ autoHeight }">
+		<div
+			:class="{
+				dragging: isDragging,
+				clicking: isPressed,
+				[`slides-${items}`]: true,
+				allowScroll,
+			}"
+			@scrollend="scrollEnd"
+			@mousedown="startDragging"
+			class="bgl-slider"
+			ref="bglSlider">
+			<div v-if="isDragging" class="blocker" />
+			<slot />
+		</div>
+		<div class="Handlers">
+			<span @click="prev">
+				<slot name="prev" />
+			</span>
+			<span @click="next">
+				<slot name="next" />
+			</span>
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -29,130 +38,137 @@ let isPressed = $ref(false);
 const emit = defineEmits(['update:index']);
 
 const props = defineProps({
-  autoHeight: {
-    type: Boolean,
-    default: false,
-  },
-  allowScroll: {
-    type: Boolean,
-    default: true,
-  },
-  freeDrag: {
-    type: Boolean,
-    default: true,
-  },
-  items: {
-    type: Number,
-    default: 4,
-  },
-  index: {
-    type: Number,
-    default: 0,
-  },
+	autoHeight: {
+		type: Boolean,
+		default: false,
+	},
+	allowScroll: {
+		type: Boolean,
+		default: true,
+	},
+	freeDrag: {
+		type: Boolean,
+		default: true,
+	},
+	items: {
+		type: Number,
+		default: 4,
+	},
+	index: {
+		type: Number,
+		default: 0,
+	},
 });
 
 const disableDrag = () => {
-  bglSlider?.querySelectorAll('img').forEach((e) => e.setAttribute('draggable', 'false'));
-
-  for (const e of bglSlider?.children as any[] | undefined || []) {
-    e.setAttribute('draggable', 'false');
-    e.addEventListener('click', (e: any) => e.preventDefault());
-  }
+	bglSlider
+		?.querySelectorAll('img')
+		.forEach((e) => e.setAttribute('draggable', 'false'));
+
+	for (const e of (bglSlider?.children as any[] | undefined) || []) {
+		e.setAttribute('draggable', 'false');
+		e.addEventListener('click', (e: any) => e.preventDefault());
+	}
 };
 
 let yHeight = $ref('auto');
 const evalHeight = () => {
-  if (!props.autoHeight || !bglSlider) return;
-  const slidChildren = bglSlider.children[activeSlideIndex].children;
-  const height = Array.from(slidChildren).map((el) => el.clientHeight).reduce((a, b) => a + b, 0);
+	if (!props.autoHeight || !bglSlider) return;
+	const slidChildren = bglSlider.children[activeSlideIndex].children;
+	const height = Array.from(slidChildren)
+		.map((el) => el.clientHeight)
+		.reduce((a, b) => a + b, 0);
 
-  yHeight = `${height}px`;
+	yHeight = `${height}px`;
 };
 
 const goToSlide = (index: number) => {
-  if (!bglSlider || index < 0 || index > bglSlider.children.length - 1) return;
-
-  const slider = bglSlider;
-  const scrollX = slider.offsetWidth * index;
-  slider.scrollTo({ left: scrollX, behavior: 'smooth' });
-
-  activeSlideIndex = index;
-  evalHeight();
+	if (!bglSlider || index < 0 || index > bglSlider.children.length - 1) return;
+	const slider = bglSlider;
+	const isRTL = getComputedStyle(bglSlider).direction === 'rtl';
+	const scrollX = slider.offsetWidth * index * (isRTL ? -1 : 1);
+	slider.scrollTo({ left: scrollX, behavior: 'smooth' });
+	activeSlideIndex = index;
+	evalHeight();
 };
 
 watch(() => props.index, goToSlide);
 
-watch(activeSlideIndex, (index) => emit('update:index', index));
+watch(
+	() => activeSlideIndex,
+	(index) => emit('update:index', index)
+);
 
 const scrollEnd = () => {
-  const slider = bglSlider;
-  if (!slider || props.items !== 1) return;
-  const nextSlide = Math.round(slider.scrollLeft / slider.offsetWidth);
-  goToSlide(nextSlide);
+	const slider = bglSlider;
+	if (!slider || props.items !== 1) return;
+	const nextSlide = Math.round(slider.scrollLeft / slider.offsetWidth);
+	goToSlide(nextSlide);
 };
 
 const stopDragging = (e: MouseEvent) => {
-  isPressed = false;
-  const slider = bglSlider;
-  if (!slider) return;
-  const isDragForward = startX > (e.pageX + slider.offsetLeft);
-  if (isDragForward) activeSlideIndex = Math.ceil(slider.scrollLeft / slider.offsetWidth);
-  else activeSlideIndex = Math.floor(slider.scrollLeft / slider.offsetWidth);
-  if (props.items === 1) goToSlide(activeSlideIndex);
-  startX = 0;
-  document.removeEventListener('mousemove', move);
-  document.removeEventListener('mouseup', stopDragging);
-  document.removeEventListener('dragend', stopDragging);
-  setTimeout(() => isDragging = false, 100);
+	isPressed = false;
+	const slider = bglSlider;
+	if (!slider) return;
+	const isDragForward = startX > e.pageX + slider.offsetLeft;
+	if (isDragForward)
+		activeSlideIndex = Math.ceil(slider.scrollLeft / slider.offsetWidth);
+	else activeSlideIndex = Math.floor(slider.scrollLeft / slider.offsetWidth);
+	if (props.items === 1) goToSlide(activeSlideIndex);
+	startX = 0;
+	document.removeEventListener('mousemove', move);
+	document.removeEventListener('mouseup', stopDragging);
+	document.removeEventListener('dragend', stopDragging);
+	setTimeout(() => (isDragging = false), 100);
 };
 
 const move = (e: MouseEvent) => {
-  if (!bglSlider) return;
-  const x = e.pageX - bglSlider.offsetLeft;
-  const walk = x - startX;
-  if (walk > 20 || walk < -20) isDragging = true;
-  if (!isDragging) return;
-  const scroll = x - startX;
-  bglSlider.scrollLeft = scrollLeft - scroll;
+	if (!bglSlider) return;
+	const x = e.pageX - bglSlider.offsetLeft;
+	const walk = x - startX;
+	if (walk > 20 || walk < -20) isDragging = true;
+	if (!isDragging) return;
+	const scroll = x - startX;
+	bglSlider.scrollLeft = scrollLeft - scroll;
 };
 
 // eslint-disable-next-line no-unused-vars
 const startDragging = (e: MouseEvent) => {
-  if (e.button !== 0 || !props.freeDrag || !bglSlider) return;
-  startX = e.pageX - bglSlider.offsetLeft;
-  scrollLeft = bglSlider.scrollLeft;
-  isPressed = true;
-  document.addEventListener('mousemove', move);
-  document.addEventListener('mouseup', stopDragging);
-  document.addEventListener('dragend', stopDragging);
+	if (e.button !== 0 || !props.freeDrag || !bglSlider) return;
+	startX = e.pageX - bglSlider.offsetLeft;
+	scrollLeft = bglSlider.scrollLeft;
+	isPressed = true;
+	document.addEventListener('mousemove', move);
+	document.addEventListener('mouseup', stopDragging);
+	document.addEventListener('dragend', stopDragging);
 };
 
 // eslint-disable-next-line no-unused-vars
 const next = () => {
-  if (!bglSlider) return;
-  const slideCount = bglSlider.children.length;
-  const isLastSlide = activeSlideIndex >= slideCount - 1;
-  if (isLastSlide) goToSlide(0);
-  else goToSlide(activeSlideIndex + 1);
+	if (!bglSlider) return;
+	const slideCount = bglSlider.children.length;
+	const isLastSlide = activeSlideIndex >= slideCount - 1;
+	if (isLastSlide) goToSlide(0);
+	else goToSlide(activeSlideIndex + 1);
 };
 
 // eslint-disable-next-line no-unused-vars
 const prev = () => {
-  if (!bglSlider) return;
-  const slideCount = bglSlider.children.length;
-  if (activeSlideIndex === 0) goToSlide(slideCount - 1);
-  else goToSlide(activeSlideIndex - 1);
+	if (!bglSlider) return;
+	const slideCount = bglSlider.children.length;
+	if (activeSlideIndex === 0) goToSlide(slideCount - 1);
+	else goToSlide(activeSlideIndex - 1);
 };
 
 const evalWidth = () => {
-  if (!bglSlider) return;
-  goToSlide(activeSlideIndex);
+	if (!bglSlider) return;
+	goToSlide(activeSlideIndex);
 };
 
 onMounted(() => {
-  window.addEventListener('resize', evalWidth);
-  evalHeight();
-  disableDrag();
+	window.addEventListener('resize', evalWidth);
+	evalHeight();
+	disableDrag();
 });
 
 onUnmounted(() => window.removeEventListener('resize', evalWidth));
@@ -160,99 +176,99 @@ onUnmounted(() => window.removeEventListener('resize', evalWidth));
 
 <style scoped>
 .blocker {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 100;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 100;
 }
 
 .bgl-slider {
-  display: grid;
-  position: relative;
-  scroll-behavior: smooth;
-  grid-auto-flow: column;
-  grid-auto-columns: 100%;
-  scroll-snap-type: x mandatory;
-  overflow-x: hidden;
+	display: grid;
+	position: relative;
+	scroll-behavior: smooth;
+	grid-auto-flow: column;
+	grid-auto-columns: 100%;
+	scroll-snap-type: x mandatory;
+	overflow-x: hidden;
 }
 
 .autoHeight {
-  transition: height ease 0.7s;
+	transition: height ease 0.7s;
 }
 
 .bgl-slider.allowScroll {
-  overflow-x: scroll;
+	overflow-x: scroll;
 }
 
 .bgl-slider.slides-6 {
-  grid-auto-columns: 15.9%;
-  gap: 1%;
+	grid-auto-columns: 15.9%;
+	gap: 1%;
 }
 
 .bgl-slider.slides-5 {
-  grid-auto-columns: 19.3%;
-  gap: 1%;
+	grid-auto-columns: 19.3%;
+	gap: 1%;
 }
 
 .bgl-slider.slides-4 {
-  grid-auto-columns: 24.3%;
-  gap: 1%;
+	grid-auto-columns: 24.3%;
+	gap: 1%;
 }
 
 .bgl-slider.slides-3 {
-  grid-auto-columns: 33%;
-  gap: 1%;
+	grid-auto-columns: 33%;
+	gap: 1%;
 }
 
 .bgl-slider.slides-2 {
-  grid-auto-columns: 50%;
-  gap: 1%;
+	grid-auto-columns: 50%;
+	gap: 1%;
 }
 
 .bgl-slider.slides-1 {
-  grid-auto-columns: 100%;
+	grid-auto-columns: 100%;
 }
 
 .bgl-slider::-webkit-scrollbar {
-  display: none;
+	display: none;
 }
 
 .bgl-slider * {
-  scroll-snap-align: start;
+	scroll-snap-align: start;
 }
 
 .dragging.bgl-slider {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-  scroll-snap-type: unset;
+	cursor: grabbing;
+	cursor: -webkit-grabbing;
+	scroll-snap-type: unset;
 }
 
 .clicking.bgl-slider {
-  scroll-behavior: unset;
+	scroll-behavior: unset;
 }
 
 .dragging.bgl-slider * {
-  scroll-snap-align: unset;
-  user-select: none;
+	scroll-snap-align: unset;
+	user-select: none;
 }
 
 @media screen and (max-width: 1280px) {
-  .bgl-slider.slides-4 {
-    grid-auto-columns: 33%;
-  }
+	.bgl-slider.slides-4 {
+		grid-auto-columns: 33%;
+	}
 }
 
 @media screen and (max-width: 991px) {
-  .bgl-slider.slides-4 {
-    grid-auto-columns: 50%;
-  }
+	.bgl-slider.slides-4 {
+		grid-auto-columns: 50%;
+	}
 }
 
 @media screen and (max-width: 600px) {
-  .bgl-slider.slides-4 {
-    grid-auto-columns: 100%;
-  }
+	.bgl-slider.slides-4 {
+		grid-auto-columns: 100%;
+	}
 }
 </style>

package/src/components/RouterWrapper.vue

@@ -6,12 +6,12 @@
 			mode="out-in"
 			appear
 		>
-		<div class="m_overflow-hidden-x">
+			<div class="m_overflow-hidden-x">
 				<component
 					:is="Component"
 					:key="route?.params.itemID"
 				/>
-		</div>
+			</div>
 		</transition>
 	</router-view>
 </template>