@bagelink/vue 0.0.160 → 0.0.164

package/src/components/dashboard/Lineart.vue

@@ -1,113 +1,100 @@
 <template>
-	<div
-		ref="chartContainer"
-		class="chart-line"
-	>
-		<Chart
-			v-if="chartSize"
-			:size="chartSize"
-			:data="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>
+  <div ref="chartContainer" class="chart-line">
+    <Chart
+      v-if="chartSize"
+      :size="chartSize"
+      :data="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>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted } from 'vue';
-import {
-	Chart, Grid, Line, Area, Tooltip, Marker,
-} from 'vue3-charts';
-import type { ChartAxis, Data } from 'vue3-charts/dist/types';
+import { onMounted, onUnmounted } from "vue";
+import { Chart, Grid, Line, Area, Tooltip, Marker } from "vue3-charts";
+import type { ChartAxis, Data } from "vue3-charts/dist/types";
 
-const props = defineProps<{ data: Data[], locale: string }>();
+const props = defineProps<{ data: Data[]; locale: string }>();
 
-const data = $computed(() => (props.locale === 'he' ? [...props.data].reverse() : props.data));
+const data = $computed(() =>
+  props.locale === "he" ? [...props.data].reverse() : props.data
+);
 
 interface Size {
-	width: number;
-	height: number;
+  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 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,
-	},
+  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-blue)';
+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()}` },
+  date: { label: "תאריך" },
+  total_value: {
+    color: BRAND_COLOR,
+    label: "סכום",
+    format: (v: number) => `₪${v.toLocaleString()}`,
+  },
+  total_count: {
+    label: "מספר התרומות",
+    format: (v: number) => `${v.toLocaleString()}`,
+  },
 };
 
 // Refs
@@ -115,83 +102,83 @@ let chartSize = $ref<Size | null>(null);
 const chartContainer = $ref<HTMLElement>();
 const displayMarker = $ref(true);
 const chartMargin = $ref({
-	left: 0,
-	top: 0,
-	right: 0,
-	bottom: 0,
+  left: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
 });
 
 // Functions
 const adjustChartSize = () => {
-	chartSize = null;
-	const el = chartContainer;
-	if (!el) return;
-	const { width, height } = el.getBoundingClientRect();
-	chartSize = { width: width - 5, height: height - 10 };
-	console.log(chartSize);
+  chartSize = null;
+  const el = chartContainer;
+  if (!el) return;
+  const { width, height } = el.getBoundingClientRect();
+  chartSize = { width: width - 5, height: height - 10 };
+  console.log(chartSize);
 };
 
 const handleResize = () => {
-	setTimeout(adjustChartSize, 300);
+  setTimeout(adjustChartSize, 300);
 };
 
 // Lifecycle hooks
 onMounted(() => {
-	adjustChartSize();
-	window.addEventListener('resize', handleResize);
+  adjustChartSize();
+  window.addEventListener("resize", handleResize);
 });
 
 onUnmounted(() => {
-	window.removeEventListener('resize', handleResize);
+  window.removeEventListener("resize", handleResize);
 });
 
 // Style Configurations
 const dotStyling = (ctx: Record<string, any>) => ({
-	r: ctx.active ? 5 : 1,
-	fill: BRAND_COLOR,
+  r: ctx.active ? 5 : 1,
+  fill: BRAND_COLOR,
 });
 </script>
 
 <style>
 .chart-line {
-	width: 100%;
-	height: 300px;
+  width: 100%;
+  height: 300px;
 }
 
-[dir='rtl'] .chart-line {
-	direction: ltr;
+[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 {
+  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;
+.chart-line .v-tooltip-content > div b {
+  font-weight: 400;
 }
 
 .layer-grid g:last-child {
-	display: none;
+  display: none;
 }
 
 .layer-axis-x .tick:nth-child(2n + 1) {
-	opacity: 0;
+  opacity: 0;
 }
 
 @media screen and (max-width: 910px) {
-	.chart-line {
-		height: 140px;
-	}
-
-	.layer-axis-x .tick {
-		opacity: 0;
-		font-size: 0;
-	}
+  .chart-line {
+    height: 140px;
+  }
+
+  .layer-axis-x .tick {
+    opacity: 0;
+    font-size: 0;
+  }
 }
 </style>

package/src/components/form/inputs/CheckInput.vue

@@ -1,143 +1,143 @@
 <template>
-	<div
-		class="bagel-input checkbox"
-		:title="field.description"
-		:class="{ small: small, 'no-edit': !editMode }"
-	>
-		<label :for="field.id">
-			{{ field.label }}
-		</label>
-		<label class="switch">
-			<input
-				:id="field.id"
-				type="checkbox"
-				v-model="inputVal"
-				:class="{ 'no-edit': !editMode }"
-			>
-			<span class="slider round" />
-		</label>
-	</div>
+  <div
+    class="bagel-input checkbox"
+    :title="field.description"
+    :class="{ small: small, 'no-edit': !editMode }"
+  >
+    <label :for="field.id">
+      {{ field.label }}
+    </label>
+    <label class="switch">
+      <input
+        :id="field.id"
+        type="checkbox"
+        v-model="inputVal"
+        :class="{ 'no-edit': !editMode }"
+      />
+      <span class="slider round" />
+    </label>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { watch, ref, onMounted } from 'vue';
-import { BagelField } from '@bagelink/vue';
+import { watch, ref, onMounted } from "vue";
+import { BagelField } from "@bagelink/vue";
 
-const emits = defineEmits(['update:modelValue']);
+const emits = defineEmits(["update:modelValue"]);
 const props = withDefaults(
-	defineProps<{
-		field: BagelField;
-		modelValue: any;
-		editMode?: boolean;
-		small?: boolean;
-	}>(),
-	{
-		editMode: true,
-	},
+  defineProps<{
+    field: BagelField;
+    modelValue: any;
+    editMode?: boolean;
+    small?: boolean;
+  }>(),
+  {
+    editMode: true,
+  }
 );
 
 const inputVal = ref(false);
 watch(inputVal, (newVal) => {
-	if (newVal === undefined) return;
-	emits('update:modelValue', newVal);
+  if (newVal === undefined) return;
+  emits("update:modelValue", newVal);
 });
 watch(
-	() => props.modelValue,
-	(newVal) => {
-		if (inputVal.value !== newVal) inputVal.value = newVal;
-	},
+  () => props.modelValue,
+  (newVal) => {
+    if (inputVal.value !== newVal) inputVal.value = newVal;
+  }
 );
 onMounted(() => (inputVal.value = !!props.modelValue));
 </script>
 
 <style scoped>
 .no-edit {
-	pointer-events: none;
+  pointer-events: none;
 }
 
 .radio-wrap p {
-	display: inline-block;
-	color: var(--input-bg);
-	font-size: var(--input-font-size);
-	margin-inline-end: 10px;
+  display: inline-block;
+  color: var(--input-bg);
+  font-size: var(--input-font-size);
+  margin-inline-end: 10px;
 }
 
 .radio-wrap label {
-	padding: 3px 5px;
-	display: inline-block;
-	border-radius: var(--input-border-radius);
-	font-size: var(--input-font-size);
-	background: var(--input-bg);
-	color: var(--bgl-black);
-	text-align: center;
-	margin: 8px 5px;
-	cursor: pointer;
-	user-select: none;
+  padding: 3px 5px;
+  display: inline-block;
+  border-radius: var(--input-border-radius);
+  font-size: var(--input-font-size);
+  background: var(--input-bg);
+  color: var(--bgl-black);
+  text-align: center;
+  margin: 8px 5px;
+  cursor: pointer;
+  user-select: none;
 }
 
 .bagel-input .radio-wrap label::after {
-	background: transparent;
+  background: transparent;
 }
 
 .radio-wrap input {
-	display: none;
+  display: none;
 }
 
-.radio-wrap input:checked:checked+label {
-	background: var(--bgl-blue);
-	color: var(--bgl-white);
+.radio-wrap input:checked:checked + label {
+  background: var(--bgl-primary);
+  color: var(--bgl-white);
 }
 
 .checkbox {
-	position: relative;
+  position: relative;
 }
 
 .switch {
-	position: relative;
-	display: inline-block;
-	height: calc(var(--input-height) / 2);
-	width: var(--input-height);
-	border-radius: var(--input-height);
+  position: relative;
+  display: inline-block;
+  height: calc(var(--input-height) / 2);
+  width: var(--input-height);
+  border-radius: var(--input-height);
 }
 
 .switch input {
-	opacity: 0;
-	width: 0;
-	height: 0;
+  opacity: 0;
+  width: 0;
+  height: 0;
 }
 
 .slider {
-	position: absolute;
-	cursor: pointer;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	background: var(--input-bg);
-	-webkit-transition: 0.4s;
-	transition: 0.4s;
-	border-radius: calc(var(--input-height) / 2);
-	box-shadow: inset 0 0 10px #00000020;
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--input-bg);
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  border-radius: calc(var(--input-height) / 2);
+  box-shadow: inset 0 0 10px #00000020;
 }
 
 .slider:before {
-	position: absolute;
-	content: '';
-	height: calc(var(--input-height) / 2 - 4px);
-	width: calc(var(--input-height) / 2 - 4px);
-	left: 2px;
-	bottom: 2px;
-	border-radius: 50%;
-	background: var(--bgl-white);
-	-webkit-transition: 0.4s;
-	transition: 0.4s;
+  position: absolute;
+  content: "";
+  height: calc(var(--input-height) / 2 - 4px);
+  width: calc(var(--input-height) / 2 - 4px);
+  left: 2px;
+  bottom: 2px;
+  border-radius: 50%;
+  background: var(--bgl-white);
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
 }
 
-input:checked+.slider {
-	background: var(--bgl-blue);
+input:checked + .slider {
+  background: var(--bgl-primary);
 }
 
-input:checked+.slider:before {
-	transform: translateX(calc(var(--input-height) / 2));
+input:checked + .slider:before {
+  transform: translateX(calc(var(--input-height) / 2));
 }
 </style>

package/src/components/form/inputs/Checkbox.vue

@@ -1,77 +1,74 @@
 <template>
-	<label class="primary-checkbox">
-		<input
-			type="checkbox"
-			v-model="val"
-		>
-		<span>
-			<MaterialIcon icon="check" />
-		</span>
-	</label>
+  <label class="primary-checkbox">
+    <input type="checkbox" v-model="val" />
+    <span>
+      <MaterialIcon icon="check" />
+    </span>
+  </label>
 </template>
 
 <script setup lang="ts">
-import { watch } from 'vue';
-import { MaterialIcon } from '@bagelink/vue';
+import { watch } from "vue";
+import { MaterialIcon } from "@bagelink/vue";
 
 const props = defineProps({
-	modelValue: Boolean,
+  modelValue: Boolean,
 });
 
-const emits = defineEmits(['update:modelValue']);
+const emits = defineEmits(["update:modelValue"]);
 
 let val = $ref<boolean>();
 
 watch(
-	() => props.modelValue,
-	(v: boolean) => {
-		if (v === undefined || v === val) return;
-		val = v;
-	},
-	{ immediate: true },
+  () => props.modelValue,
+  (v: boolean) => {
+    if (v === undefined || v === val) return;
+    val = v;
+  },
+  { immediate: true }
 );
 
 watch(
-	() => val,
-	(v) => emits('update:modelValue', v),
+  () => val,
+  (v) => emits("update:modelValue", v)
 );
 </script>
 
 <style scoped>
 .primary-checkbox input {
-	display: none;
+  display: none;
 }
 
 .primary-checkbox {
-	margin-top: 8px;
+  margin-top: 8px;
 }
 
 .primary-checkbox span {
-	display: flex;
-	padding-top: 1px;
-	align-items: center;
-	justify-content: center;
-	color: var(--bgl-white);
-	border-radius: 100%;
-	width: 26px;
-	height: 26px;
-	background: white;
-	border: 4px solid var(--bgl-gray-light);
-	cursor: pointer;
-	transition: var(--bgl-transition);
-	user-select: none;
+  display: flex;
+  padding-top: 1px;
+  align-items: center;
+  justify-content: center;
+  color: var(--bgl-white);
+  border-radius: 100%;
+  width: 26px;
+  height: 26px;
+  background: white;
+  border: 4px solid var(--bgl-gray-light);
+  cursor: pointer;
+  transition: var(--bgl-transition);
+  user-select: none;
 }
 
 .primary-checkbox span:hover {
-	filter: brightness(90%);
+  filter: brightness(90%);
 }
 
 .primary-checkbox span:active {
-	filter: brightness(80%);
+  filter: brightness(80%);
 }
 
-.primary-checkbox input:checked+span {
-	background: var(--bgl-blue);
-	border: none;
+.primary-checkbox input:checked + span {
+  background: var(--bgl-primary);
+  border: none;
 }
 </style>