@bagelink/vue 0.0.190 → 0.0.192

package/package.json

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

package/src/components/Btn.vue

@@ -1,233 +1,252 @@
 <template>
-  <component
-    :is="to ? 'router-link' : is"
-    :to="to"
-    :type="type"
-    :role="role"
-    :disabled="disabled"
-    :class="{
-      [props.color]: true,
-      'btn-icon': icon && !slots['default'] && !value,
-      btn: !icon || slots['default'] || value,
-      thin: thin,
-      round: round,
-      'btn-txt': flat,
-    }"
-  >
-    <div class="loading" v-if="loading" />
-    <div v-else class="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"
+		:type="type"
+		:role="role"
+		:disabled="disabled"
+		:class="{
+			'btn-icon': icon && !slots['default'] && !value,
+			btn: !icon || slots['default'] || value,
+			thin,
+			round,
+			'btn-txt': flat,
+			'btn-border': border
+		}"
+	>
+		<div
+			class="loading"
+			v-if="loading"
+		/>
+		<div
+			v-else
+			class="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">
-import { useSlots } from "vue";
+import { useSlots } from 'vue';
 
 const slots = useSlots();
-import type { MaterialIcons } from "@bagelink/vue";
-import { MaterialIcon } from "@bagelink/vue";
+import type { MaterialIcons } from '@bagelink/vue';
+import { MaterialIcon } from '@bagelink/vue';
+
+type ThemeTypes = 'light' | 'red' | 'gray' | 'gray-light' | 'black' | 'green';
 
 const props = withDefaults(
-  defineProps<{
-    disabled?: boolean;
-    icon?: MaterialIcons;
-    "icon.end"?: MaterialIcons;
-    color?:
-      | "light"
-      | "red"
-      | "gray"
-      | "gray-light"
-      | "black"
-      | "blue"
-      | "green";
-    flat?: boolean;
-    thin?: boolean;
-    type?: "button" | "submit" | "reset";
-    loading?: boolean;
-    role?: string;
-    value?: string;
-    to?: string;
-    round?: boolean;
-    is?: string;
-  }>(),
-  {
-    loading: false,
-    round: false,
-    color: "gray",
-    disabled: false,
-    type: "button",
-    role: "button",
-    is: "button",
-  }
+	defineProps<{
+		disabled?: boolean;
+		icon?: MaterialIcons;
+		'icon.end'?: MaterialIcons;
+		color?: ThemeTypes;
+		theme?: ThemeTypes;
+		flat?: boolean;
+		border?: boolean;
+		thin?: boolean;
+		type?: 'button' | 'submit' | 'reset';
+		loading?: boolean;
+		role?: string;
+		value?: string;
+		to?: string;
+		round?: boolean;
+		is?: string;
+		borderColor?: string
+	}>(),
+	{
+		loading: false,
+		round: false,
+		disabled: false,
+		type: 'button',
+		role: 'button',
+		is: 'button',
+	},
+);
+
+const computedTheme = $computed(() => (props?.color || props?.theme));
+
+const defaultColors = { backgroundColor: 'var(--bgl-primary)', color: 'var(--bgl-white)' };
+
+const themes: { [key in ThemeTypes]: typeof defaultColors } = {
+	red: { ...defaultColors, backgroundColor: 'var(--bgl-red)', },
+	black: { ...defaultColors, backgroundColor: 'var(--bgl-black)' },
+	green: { ...defaultColors, backgroundColor: 'var(--bgl-green)', color: 'var(--bgl-white)' },
+	gray: { ...defaultColors, backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-black)' },
+	light: { ...defaultColors, backgroundColor: 'var(--bgl-primary-light)', color: 'var(--bgl-primary)' },
+	'gray-light': { ...defaultColors, backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-gray)' },
+};
+
+const cumputedTextColor = $computed(
+	() => (themes?.[computedTheme as ThemeTypes]?.color || defaultColors.color),
+);
+
+const computedBackgroundColor = $computed(
+	() => (themes?.[computedTheme as ThemeTypes]?.backgroundColor || defaultColors.backgroundColor),
 );
 </script>
 
 <style scoped>
 .loading {
-  border: 1px solid var(--bgl-white);
-  border-bottom: 2px solid var(--bgl-white);
-  animation: spin 1s linear infinite;
-  border-radius: 100px;
-  width: 1rem;
-  height: 1rem;
-  margin: auto;
+	border: 1px solid var(--bgl-white);
+	border-bottom: 2px solid var(--bgl-white);
+	animation: spin 1s linear infinite;
+	border-radius: 100px;
+	width: 1rem;
+	height: 1rem;
+	margin: auto;
 }
 
 @keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
+	0% {
+		transform: rotate(0deg);
+	}
 
-  100% {
-    transform: rotate(360deg);
-  }
+	100% {
+		transform: rotate(360deg);
+	}
 }
 
 .btn-icon {
-  height: var(--btn-height);
-  width: var(--btn-height);
-  border-radius: 100%;
-  font-size: 1rem;
-  background: var(--bgl-primary);
-  color: var(--bgl-white);
-  flex-shrink: 0;
-  transition: var(--bgl-transition);
+	height: var(--btn-height);
+	width: var(--btn-height);
+	border-radius: 100%;
+	font-size: 1rem;
+	background: var(--bgl-primary);
+	color: var(--bgl-white);
+	flex-shrink: 0;
+	transition: var(--bgl-transition);
 }
 
 .btn {
-  background: var(--bgl-primary);
-  color: var(--bgl-white);
-  padding-left: var(--btn-padding);
-  padding-right: var(--btn-padding);
-  transition: var(--bgl-transition);
-  text-decoration: none;
+	background: var(--bgl-primary);
+	color: var(--bgl-white);
+	padding-left: var(--btn-padding);
+	padding-right: var(--btn-padding);
+	transition: var(--bgl-transition);
+	text-decoration: none;
 }
 
 .btn[disabled="true"] {
-  opacity: 0.5;
-  cursor: not-allowed;
+	opacity: 0.5;
+	cursor: not-allowed;
 }
 
 .btn-flex {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  justify-content: center;
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	justify-content: center;
 }
 
 .btn .icon-font {
-  font-size: calc(var(--input-font-size) * 1.3);
+	font-size: calc(var(--input-font-size) * 1.3);
 }
 
 .btn:hover,
 .btn-icon:hover {
-  filter: var(--bgl-hover-filter);
+	filter: var(--bgl-hover-filter);
 }
 
 .btn:active,
 .btn-icon:active {
-  filter: var(--bgl-active-filter);
-}
-
-.btn.red,
-.btn-icon.red {
-  background: var(--bgl-red);
-}
-
-.btn.light,
-.btn-icon.light {
-  background: var(--bgl-blue-light);
-  color: var(--bgl-primary);
+	filter: var(--bgl-active-filter);
 }
 
-.btn.gray,
-.btn-icon.gray {
-  background: var(--bgl-gray-light);
-  color: var(--bgl-black);
-}
-
-.btn.green,
-.btn-icon.green {
-  background: var(--bgl-green);
-  color: var(--bgl-white);
-}
-
-.btn.gray-light,
-.btn-icon.gray-light {
-  background: var(--bgl-gray-light);
-  color: var(--bgl-gray);
-}
+.btn,
+.btn-icon {
+	background-color: v-bind(computedBackgroundColor);
+	color: v-bind(cumputedTextColor);
 
-.btn.black,
-.btn-icon.black {
-  background: var(--bgl-black);
 }
 
 .btn.btn-txt {
-  color: var(--bgl-primary);
-  padding-left: var(--btn-padding);
-  padding-right: var(--btn-padding);
-  background: transparent;
+	color: var(--bgl-primary);
+	padding-left: var(--btn-padding);
+	padding-right: var(--btn-padding);
+	background: transparent;
 }
 
 .btn-icon.btn-txt {
-  color: var(--bgl-primary);
-  background: transparent;
+	color: var(--bgl-primary);
+	background: transparent;
 }
 
 .btn.btn-txt:hover,
 .btn-icon.btn-txt:hover {
-  filter: var(--bgl-active-filter);
+	filter: var(--bgl-active-filter);
 }
 
 .btn.btn-txt:active,
 .btn-icon.btn-txt:active {
-  background: var(--bgl-white);
-  filter: var(--bgl-hover-filter);
+	background: var(--bgl-white);
+	filter: var(--bgl-hover-filter);
 }
 
 .btn.btn-txt.red,
 .btn-icon.btn-txt.red {
-  color: var(--bgl-red);
+	color: var(--bgl-red);
 }
 
 .btn.btn-txt.light,
 .btn-icon.btn-txt.light {
-  color: var(--bgl-primary-tint);
+	color: var(--bgl-primary-tint);
 }
 
 .btn.btn-txt.black,
 .btn-icon.btn-txt.black {
-  color: var(--bgl-black);
+	color: var(--bgl-black);
 }
 
 .btn.btn-txt.gray,
 .btn-icon.btn-txt.gray {
-  color: var(--bgl-gray);
+	color: var(--bgl-gray);
 }
 
 .btn.thin {
-  padding-left: calc(var(--btn-padding) / 2);
-  padding-right: calc(var(--btn-padding) / 2);
+	padding-left: calc(var(--btn-padding) / 2);
+	padding-right: calc(var(--btn-padding) / 2);
 }
 
 .btn.round {
-  border-radius: calc(var(--btn-border-radius) * 2);
+	border-radius: calc(var(--btn-border-radius) * 2);
 }
 
 .btn-icon.thin {
-  height: calc(var(--btn-height) / 1.5);
-  width: calc(var(--btn-height) / 1.5);
-  line-height: 1;
+	height: calc(var(--btn-height) / 1.5);
+	width: calc(var(--btn-height) / 1.5);
+	line-height: 1;
 }
 
 [dir="rtl"] .icon-font {
-  transform: rotateY(180deg);
+	transform: rotateY(180deg);
+}
+
+.btn-border {
+	outline: 1px solid v-bind(computedBackgroundColor);
+	color: v-bind(computedBackgroundColor);
+	background: var(--bgl-white);
+}
+
+.btn-border:hover {
+	color: v-bind(cumputedTextColor);
+	background: v-bind(computedBackgroundColor);
+	filter: brightness(100%);
+}
+
+.btn-border:active {
+	filter: brightness(80%);
 }
 </style>

package/src/components/ListView.vue

@@ -16,7 +16,6 @@
 				/>
 			</div>
 			<Btn
-				color="blue"
 				v-if="enableAdd"
 				icon="add"
 				@click="emit('add')"

package/src/components/PersonPreview.vue

@@ -91,7 +91,7 @@ const props = defineProps<{
 	personSchema: () => FormKitSchemaDefinition;
 }>();
 
-const showEditForm = async () => {
+const showEditForm = () => {
 	const { first_name, last_name } = props.person;
 	modalForm({
 		side: true,

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

@@ -10,13 +10,25 @@
 				:month-change-on-scroll="false"
 				v-bind="options"
 			>
-				<template #action-buttons/>
-				<template #action-preview/>
+				<template #action-buttons />
+				<template #action-preview />
 			</VDatepicker>
 		</div>
-		<div class="time-wrap" v-if="showTimeWrap">
-			<template v-for="hr in hours" :key="hr">
-				<input type="radio" :id="`${hr}_${name}`" :name="name" :value="hr" v-model="selectedHour" >
+		<div
+			class="time-wrap"
+			v-if="showTimeWrap"
+		>
+			<template
+				v-for="hr in hours"
+				:key="hr"
+			>
+				<input
+					type="radio"
+					:id="`${hr}_${name}`"
+					:name="name"
+					:value="hr"
+					v-model="selectedHour"
+				>
 				<label :for="`${hr}_${name}`">{{ hr }}</label>
 			</template>
 		</div>
@@ -27,7 +39,7 @@
 import VDatepicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
 
-defineProps<{ name: string, options: Record<string, any>, showTimeWrap: boolean}>();
+defineProps<{ name: string, options?: Record<string, any>, showTimeWrap?: boolean }>();
 const selectedDate = $ref(null);
 const selectedHour = $ref();
 
@@ -39,115 +51,119 @@ const hours = Array.from({ length: 18 }, (_, index) => {
 </script>
 <style>
 .datetime-wrap {
-  display: flex;
-  gap: 3rem;
-  padding: 1rem;
+	display: flex;
+	gap: 3rem;
+	padding: 1rem;
 }
 
 .time-wrap {
-  display: grid;
-  gap: 0.5rem;
-  grid-template-columns: 1fr 1fr;
-  width: 100%;
+	display: grid;
+	gap: 0.5rem;
+	grid-template-columns: 1fr 1fr;
+	width: 100%;
 }
 
 .time-wrap input {
-  display: none;
+	display: none;
 }
 
 .time-wrap label {
-  background: var(--input-bg);
-  border-radius: var(--btn-border-radius);
-  line-height: calc(var(--btn-height) * 0.9);
-  display: block;
-  cursor: pointer;
-  transition: var(--bgl-transition);
-  text-align: center;
-  font-size: 16px;
-  color: var(--bgl-primary);
-  border: 1px solid var(--bgl-primary);
+	background: var(--input-bg);
+	border-radius: var(--btn-border-radius);
+	line-height: calc(var(--btn-height) * 0.9);
+	display: block;
+	cursor: pointer;
+	transition: var(--bgl-transition);
+	text-align: center;
+	font-size: 16px;
+	color: var(--bgl-primary);
+	border: 1px solid var(--bgl-primary);
 }
 
 .time-wrap input[type="radio"]:checked+label {
-  background: var(--bgl-primary);
-  color: var(--bgl-white);
+	background: var(--bgl-primary);
+	color: var(--bgl-white);
 }
 
 .time-wrap label:hover {
-  filter: var(--bgl-hover-filter);
+	filter: var(--bgl-hover-filter);
 }
 
 .time-wrap label:active {
-  filter: var(--bgl-active-filter);
+	filter: var(--bgl-active-filter);
 }
 
 .dp__theme_light {
-  --dp-background-color: var(--bgl-white);
-  --dp-text-color: var(--bgl-black);
-  --dp-hover-color: var(--input-bg);
-  --dp-hover-text-color: var(--bgl-black);
-  --dp-hover-icon-color: var(--bgl-primary);
-  --dp-primary-color: var(--bgl-primary);
-  --dp-primary-disabled-color: var(--bgl-primary);
-  --dp-primary-text-color: var(--bgl-white);
-  --dp-secondary-color: var(--bgl-gray);
-  --dp-border-color: transparent;
-  --dp-menu-border-color: transparent;
-  --dp-scroll-bar-background: transparent;
-  --dp-scroll-bar-color: var(--bgl-gray);
-  --dp-icon-color: var(--bgl-gray);
-  --dp-highlight-color: var(--bgl-gray-light);
+	--dp-background-color: var(--bgl-white);
+	--dp-text-color: var(--bgl-black);
+	--dp-hover-color: var(--input-bg);
+	--dp-hover-text-color: var(--bgl-black);
+	--dp-hover-icon-color: var(--bgl-primary);
+	--dp-primary-color: var(--bgl-primary);
+	--dp-primary-disabled-color: var(--bgl-primary);
+	--dp-primary-text-color: var(--bgl-white);
+	--dp-secondary-color: var(--bgl-gray);
+	--dp-border-color: transparent;
+	--dp-menu-border-color: transparent;
+	--dp-scroll-bar-background: transparent;
+	--dp-scroll-bar-color: var(--bgl-gray);
+	--dp-icon-color: var(--bgl-gray);
+	--dp-highlight-color: var(--bgl-gray-light);
 }
 
 :root {
-  --dp-font-family: inherit;
-  --dp-cell-border-radius: 100%;
-  --dp-common-transition: all 200s ease-in;
-
-  --dp-cell-size: 40px;
-  /*Width and height of calendar cell*/
-  --dp-menu-min-width: 280px;
-  /*Adjust the min width of the menu*/
-  --dp-row-margin: 8px 0;
-  /*Adjust the spacing between rows in the calendar*/
+	--dp-font-family: inherit;
+	--dp-cell-border-radius: 100%;
+	--dp-common-transition: all 200s ease-in;
+
+	--dp-cell-size: 40px;
+	/*Width and height of calendar cell*/
+	--dp-menu-min-width: 280px;
+	/*Adjust the min width of the menu*/
+	--dp-row-margin: 8px 0;
+	/*Adjust the spacing between rows in the calendar*/
 }
 
 .dp__calendar_header {
-  font-weight: 400;
-  padding: 10px 0 0;
-  margin-bottom: -10px;
+	font-weight: 400;
+	padding: 10px 0 0;
+	margin-bottom: -10px;
 }
 
 .dp__calendar_row>div:last-child {
-  pointer-events: none;
+	pointer-events: none;
 }
-.dp__outer_menu_wrap.dp--menu-wrapper{
-filter: drop-shadow(0 0 20px var(--bgl-shadow));
+
+.dp__outer_menu_wrap.dp--menu-wrapper {
+	filter: drop-shadow(0 0 20px var(--bgl-shadow));
 }
-.dp__input{
-  background: var(--input-bg);
-    border: none;
-    padding: 0.7rem;
-    border-radius: var(--input-border-radius);
-    color: var(--input-color);
-    min-width: calc(var(--input-height) * 3);
-    width: 100%;
+
+.dp__input {
+	background: var(--input-bg);
+	border: none;
+	padding: 0.7rem;
+	border-radius: var(--input-border-radius);
+	color: var(--input-color);
+	min-width: calc(var(--input-height) * 3);
+	width: 100%;
 }
+
 .dp__input:focus-visible {
-    outline: none;
-    box-shadow: inset 0 0 10px #00000012;
+	outline: none;
+	box-shadow: inset 0 0 10px #00000012;
 }
+
 @media screen and (max-width: 767px) {
-  .datetime-wrap {
-    flex-wrap: wrap;
-    padding: 0rem;
-    gap: 1rem;
-    justify-content: center;
-  }
-
-  :root {
-    --dp-menu-min-width: 200px;
-    --dp-cell-size: 35px;
-  }
+	.datetime-wrap {
+		flex-wrap: wrap;
+		padding: 0rem;
+		gap: 1rem;
+		justify-content: center;
+	}
+
+	:root {
+		--dp-menu-min-width: 200px;
+		--dp-cell-size: 35px;
+	}
 }
 </style>