@bagelink/vue 0.0.188 → 0.0.192

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.188",
+  "version": "0.0.192",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -69,9 +69,13 @@
     "prosemirror-model": "^1.19.3",
     "prosemirror-schema-basic": "^1.2.2",
     "prosemirror-state": "^1.4.3",
-    "prosemirror-view": "^1.32.4"
+    "prosemirror-view": "^1.32.4",
+    "@vuepic/vue-datepicker": "^7.4.0"
   },
   "peerDependenciesMeta": {
+    "@vuepic/vue-datepicker": {
+      "optional": true
+    },
     "vue3-charts": {
       "optional": true
     },

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/TableSchema.vue

@@ -22,7 +22,11 @@
 					</div>
 				</th>
 			</thead>
-			<tbody ref="infinite" class="rows infinite" :class="{ loading }">
+			<tbody
+				ref="infinite"
+				class="rows infinite"
+				:class="{ loading }"
+			>
 				<tr
 					@click="selectElement(row)"
 					class="row row-item position-relative"
@@ -46,7 +50,7 @@
 								v-if="field['v-if'] ? field['v-if'](row[field.id], row) : true"
 								v-bind="bindAttrs(field.attrs, row[field.id], row)"
 								:src="field.$el === 'img' ? row[field.id]?.url : ''"
-								@update:modelValue="($event:any)=>field?.onUpdate?.($event, row[field.id], row)"
+								@update:modelValue="($event: any) => field?.onUpdate?.($event, row[field.id], row)"
 								:modelValue="row[field.id]"
 							>
 								{{
@@ -70,10 +74,12 @@ const slots = useSlots();
 const loading = $ref(true);
 
 const props = defineProps<{
-  data: any[];
-  schema?: () => any[];
+	data: any[];
+	schema?: () => any[];
 }>();
 
+
+
 const emit = defineEmits(['select']);
 
 const selectElement = (data: Record<string, any>) => {
@@ -104,135 +110,138 @@ const sort = (fieldname: string) => {
 };
 
 const columns = $computed(
-	() => props.schema?.() ||
-    Object.keys(props.data[0]).map((k: string) => ({ id: k, inputType: 'PlainText' })),
+	() => props.schema?.()?.map((field) => ({
+		...field,
+		id: field?.relationshipObjKey || field.id,
+	})) ||
+		Object.keys(props.data[0]).map((k: string) => ({ id: k, inputType: 'PlainText' })),
 );
 </script>
 
 <style scoped>
 .list-arrows {
-  opacity: 0;
+	opacity: 0;
 }
 
 .list-arrows .icon-font {
-  transition: all ease-in-out 0.2s;
+	transition: all ease-in-out 0.2s;
 }
 
 .list-arrows.sorted {
-  opacity: 1;
+	opacity: 1;
 }
 
 .col img {
-  height: 35px;
-  margin-top: -14px;
-  margin-bottom: -14px;
-  border-radius: 5px;
+	height: 35px;
+	margin-top: -14px;
+	margin-bottom: -14px;
+	border-radius: 5px;
 }
 
 .list-arrows.sorted .desc {
-  transform: rotate(180deg);
+	transform: rotate(180deg);
 }
 
 table {
-  border-collapse: separate;
-  border-spacing: 0 15px;
-  border-collapse: collapse;
+	border-collapse: separate;
+	border-spacing: 0 15px;
+	border-collapse: collapse;
 }
 
 th {
-  font-weight: 400;
+	font-weight: 400;
 }
 
 .row {
-  border-bottom: 1px solid var(--border-color);
-  cursor: pointer;
+	border-bottom: 1px solid var(--border-color);
+	cursor: pointer;
 }
 
 .row.first-row {
-  font-size: 0.8rem;
-  color: var(--bgl-black-tint);
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  background: var(--bgl-white);
-  height: 50px;
-  vertical-align: bottom;
+	font-size: 0.8rem;
+	color: var(--bgl-black-tint);
+	position: sticky;
+	top: 0;
+	z-index: 2;
+	background: var(--bgl-white);
+	height: 50px;
+	vertical-align: bottom;
 }
 
 .row.first-row::after {
-  content: "";
-  border-bottom: 1px solid var(--border-color);
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: -1px;
+	content: "";
+	border-bottom: 1px solid var(--border-color);
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: -1px;
 }
 
 .first-row .col {
-  cursor: pointer;
-  background: var(--bgl-white);
+	cursor: pointer;
+	background: var(--bgl-white);
 }
 
 .col {
-  white-space: nowrap;
-  padding: 14px;
-  transition: var(--bgl-transition);
-  line-height: 1;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  align-items: center;
+	white-space: nowrap;
+	padding: 14px;
+	transition: var(--bgl-transition);
+	line-height: 1;
+	padding-left: 1rem;
+	padding-right: 1rem;
+	align-items: center;
 }
 
-.col > div {
-  display: flex;
-  gap: 0.5rem;
+.col>div {
+	display: flex;
+	gap: 0.5rem;
 }
 
 .max-col-width {
-  max-width: 30vw;
-  overflow: hidden;
-  text-overflow: ellipsis;
+	max-width: 30vw;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .col.check .icon-font {
-  border-radius: 100%;
-  background: var(--bgl-blue-20);
-  color: var(--bgl-primary);
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: -2px;
+	border-radius: 100%;
+	background: var(--bgl-blue-20);
+	color: var(--bgl-primary);
+	width: 20px;
+	height: 20px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-top: -2px;
 }
 
 .rows {
-  font-size: 0.8125em;
+	font-size: 0.8125em;
 }
 
 .table-list {
-  height: 100%;
-  position: relative;
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-  overflow: auto;
+	height: 100%;
+	position: relative;
+	padding-left: 0 !important;
+	padding-right: 0 !important;
+	overflow: auto;
 }
 
 .BagelTable .table-list {
-  overflow: unset;
+	overflow: unset;
 }
 
 .row-item {
-  height: 50px;
-  transition: all 200ms ease;
+	height: 50px;
+	transition: all 200ms ease;
 }
 
 .row-item:hover {
-  background: var(--bgl-gray-light);
+	background: var(--bgl-gray-light);
 }
 
 .infinite-wrapper {
-  overflow-y: auto;
-  width: 100%;
+	overflow-y: auto;
+	width: 100%;
 }
 </style>