@bagelink/vue 0.0.170 → 0.0.182

package/dist/style.css

@@ -534,12 +534,12 @@
 .dropdown {
   position: relative;
   font-size: calc(var(--input-font-size) * 1.3);
-  width: 50px;
-  /* color: var(--bgl-primary); */
-  z-index: 1;
+  /* width: 50px; */
+  z-index: 9;
 }
 .dropdown-title {
   white-space: nowrap;
+  color: var(--bgl-primary);
   border-radius: var(--input-border-radius);
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
   padding-left: calc(var(--btn-padding) / 2);
@@ -574,7 +574,8 @@
   inset-inline-start: 0;
   inset-inline-end: 0;
   overflow: auto;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.20);
+  z-index: 99999999;
 }
 .dropdown-body * {
   display: block;
@@ -582,12 +583,11 @@
   padding: calc(var(--btn-padding) / 2);
   padding-bottom: calc(var(--btn-padding) / 4);
   padding-top: calc(var(--btn-padding) / 4);
+  margin: 0;
   color: inherit;
   text-decoration: none;
   line-height: 1;
   transition: var(--bgl-transition);
-  box-shadow: 0 -1px 0 0 rgb(0 0 0, 10%);
-  z-index: 99999999;
 }
 .dropdown-body *:hover {
   filter: var(--bgl-hover-filter);
@@ -753,37 +753,37 @@
 	transform: translateY(-2.6rem);
 }
 
-.list-arrows[data-v-fb5b163a] {
+.list-arrows[data-v-8cd8ab82] {
   opacity: 0;
 }
-.list-arrows .icon-font[data-v-fb5b163a] {
+.list-arrows .icon-font[data-v-8cd8ab82] {
   transition: all ease-in-out 0.2s;
 }
-.list-arrows.sorted[data-v-fb5b163a] {
+.list-arrows.sorted[data-v-8cd8ab82] {
   opacity: 1;
 }
-.col img[data-v-fb5b163a] {
+.col img[data-v-8cd8ab82] {
   height: 35px;
   margin-top: -14px;
   margin-bottom: -14px;
   border-radius: 5px;
 }
-.list-arrows.sorted .desc[data-v-fb5b163a] {
+.list-arrows.sorted .desc[data-v-8cd8ab82] {
   transform: rotate(180deg);
 }
-table[data-v-fb5b163a] {
+table[data-v-8cd8ab82] {
   border-collapse: separate;
   border-spacing: 0 15px;
   border-collapse: collapse;
 }
-th[data-v-fb5b163a] {
+th[data-v-8cd8ab82] {
   font-weight: 400;
 }
-.row[data-v-fb5b163a] {
+.row[data-v-8cd8ab82] {
   border-bottom: 1px solid var(--border-color);
   cursor: pointer;
 }
-.row.first-row[data-v-fb5b163a] {
+.row.first-row[data-v-8cd8ab82] {
   font-size: 0.8rem;
   color: var(--bgl-black-tint);
   position: sticky;
@@ -793,7 +793,7 @@ th[data-v-fb5b163a] {
   height: 50px;
   vertical-align: bottom;
 }
-.row.first-row[data-v-fb5b163a]::after {
+.row.first-row[data-v-8cd8ab82]::after {
   content: "";
   border-bottom: 1px solid var(--border-color);
   position: absolute;
@@ -801,11 +801,11 @@ th[data-v-fb5b163a] {
   right: 0;
   bottom: -1px;
 }
-.first-row .col[data-v-fb5b163a] {
+.first-row .col[data-v-8cd8ab82] {
   cursor: pointer;
   background: var(--bgl-white);
 }
-.col[data-v-fb5b163a] {
+.col[data-v-8cd8ab82] {
   white-space: nowrap;
   padding: 14px;
   transition: var(--bgl-transition);
@@ -814,16 +814,16 @@ th[data-v-fb5b163a] {
   padding-right: 1rem;
   align-items: center;
 }
-.col > div[data-v-fb5b163a] {
+.col > div[data-v-8cd8ab82] {
   display: flex;
   gap: 0.5rem;
 }
-.max-col-width[data-v-fb5b163a] {
+.max-col-width[data-v-8cd8ab82] {
   max-width: 30vw;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.col.check .icon-font[data-v-fb5b163a] {
+.col.check .icon-font[data-v-8cd8ab82] {
   border-radius: 100%;
   background: var(--bgl-blue-20);
   color: var(--bgl-primary);
@@ -834,27 +834,27 @@ th[data-v-fb5b163a] {
   justify-content: center;
   margin-top: -2px;
 }
-.rows[data-v-fb5b163a] {
+.rows[data-v-8cd8ab82] {
   font-size: 0.8125em;
 }
-.table-list[data-v-fb5b163a] {
+.table-list[data-v-8cd8ab82] {
   height: 100%;
   position: relative;
   padding-left: 0 !important;
   padding-right: 0 !important;
   overflow: auto;
 }
-.BagelTable .table-list[data-v-fb5b163a] {
+.BagelTable .table-list[data-v-8cd8ab82] {
   overflow: unset;
 }
-.row-item[data-v-fb5b163a] {
+.row-item[data-v-8cd8ab82] {
   height: 50px;
   transition: all 200ms ease;
 }
-.row-item[data-v-fb5b163a]:hover {
+.row-item[data-v-8cd8ab82]:hover {
   background: var(--bgl-gray-light);
 }
-.infinite-wrapper[data-v-fb5b163a] {
+.infinite-wrapper[data-v-8cd8ab82] {
   overflow-y: auto;
   width: 100%;
 }
@@ -938,20 +938,19 @@ th[data-v-fb5b163a] {
 }
 }
 
-.data[data-v-86e783b9] {
+.data[data-v-dc2757c4] {
 	border: 1.1px solid var(--border-color);
 	padding: 20px;
 	border-radius: var(--input-border-radius);
 }
-.data-row[data-v-86e783b9] {
+.data-row[data-v-dc2757c4] {
 	display: flex;
 	justify-content: space-between;
 	padding-bottom: 0.5rem;
 	margin-bottom: 0.5rem;
-	opacity: 0.8;
 	border-bottom: 1px solid var(--border-color);
 }
-.data-link[data-v-86e783b9] {
+.data-link[data-v-dc2757c4] {
 	display: block;
 	font-size: var(--input-font-size);
 	margin-bottom: 2px;
@@ -1119,13 +1118,13 @@ th[data-v-fb5b163a] {
 }
 }
 
-.primary-checkbox input[data-v-fe72d553] {
+.primary-checkbox input[data-v-6b168ea9] {
   display: none;
 }
-.primary-checkbox[data-v-fe72d553] {
+.primary-checkbox[data-v-6b168ea9] {
   margin-top: 8px;
 }
-.primary-checkbox span[data-v-fe72d553] {
+.primary-checkbox span[data-v-6b168ea9] {
   display: flex;
   padding-top: 1px;
   align-items: center;
@@ -1140,13 +1139,13 @@ th[data-v-fb5b163a] {
   transition: var(--bgl-transition);
   user-select: none;
 }
-.primary-checkbox span[data-v-fe72d553]:hover {
+.primary-checkbox span[data-v-6b168ea9]:hover {
   filter: brightness(90%);
 }
-.primary-checkbox span[data-v-fe72d553]:active {
+.primary-checkbox span[data-v-6b168ea9]:active {
   filter: brightness(80%);
 }
-.primary-checkbox input:checked + span[data-v-fe72d553] {
+.primary-checkbox input:checked + span[data-v-6b168ea9] {
   background: var(--bgl-primary);
   border: none;
 }
@@ -2182,6 +2181,34 @@ input[type='email'][data-v-ed81a514] {
 	box-shadow: 0 0 10px 0 rgb(0 0 0 /20%);
 }
 
+.bagel-input.shrink, .bagel-input.shrink input{
+	min-width: unset !important;
+	/* width: auto; */
+}
+
+.bagel-input input[disabled][data-v-7b082166]{
+	background: none;
+}
+.bagel-input.toggleEdit[data-v-7b082166]:hover {
+	background-color: var(--input-bg);
+}
+.bagel-input.small[data-v-7b082166]{
+	margin-bottom:0;
+	height: 30px;
+}
+.toggleEditBtn[data-v-7b082166]{
+	position: absolute;
+	right: -24px;
+	top: 4;
+	opacity: 0;
+}
+.bagel-input:hover .toggleEditBtn[data-v-7b082166], .bagel-input.editMode .toggleEditBtn[data-v-7b082166]{
+	opacity: 1;
+}
+.bagel-input.small input[data-v-7b082166]{
+	height: 30px;
+}
+
 .bagel-input[data-v-a5b28c58] {
 	height: 100%;
 	margin: 0;

package/package.json

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

package/src/components/DataPreview.vue

@@ -9,25 +9,34 @@
 		>
 			{{ title }}
 		</h3>
-		<div
+		<template
 			v-for="field in schema || []"
 			:key="field.id"
-			class="data-row"
 		>
-			<div class="key">
-				{{ field?.label || keyToLabel(field.id) }}
+			<div 	class="data-row" v-if="field['v-if'] ? field['v-if'](itemData[field.id], itemData) : true">
+				<div class="key">
+					{{ field?.label || keyToLabel(field.id) }}
+				</div>
+				<component
+					:is="field.$el || 'div'"
+					class="vlue"
+					v-model="itemData[field.id]"
+					@update:modelValue="($event:any)=>field?.onUpdate?.($event, data[field.id], itemData)"
+					v-bind="bindAttrs(field.attrs, itemData[field.id], itemData)"
+				>
+					{{
+						field?.transform?.(itemData[field.id]
+							|| field.defaultValue, itemData)
+							|| itemData[field.id]
+							|| ''
+					}}
+				</component>
 			</div>
-			<component
-				:is="field.$el || 'div'"
-				class="vlue"
-			>
-				{{ data[field.id] || field.defaultValue }}
-			</component>
-		</div>
+		</template>
 		<div v-if="!schema?.length">
 			<div
 				class="data-row"
-				v-for="[key, value] in Object.entries(data).filter(
+				v-for="[key, value] in Object.entries(itemData).filter(
 					([key]) => !keysToIgnore.includes(key),
 				)"
 				:key="key"
@@ -51,12 +60,22 @@ const i18nT = useI18nT();
 
 const keysToIgnore = ['id', 'person_id', 'person', 'created_at', 'updated_at'];
 
-// const props =
-defineProps<{
+const props = defineProps<{
 	data: Record<string, any>,
 	schema?: Record<string, any>[],
 	title?: string,
 }>();
+
+const itemData = $ref<Record<string, any>>(props.data);
+
+const bindAttrs = (attrs: Record<string, any>, field: any, row: any) => {
+	const arr = Object.entries(attrs || {}).map(([key, value]) => [
+		key,
+		typeof value === 'function' ? value(field, row) : value,
+	]);
+	const resolvedAttrs = Object.fromEntries(arr);
+	return resolvedAttrs;
+};
 </script>
 
 <style scoped>
@@ -71,7 +90,6 @@ defineProps<{
 	justify-content: space-between;
 	padding-bottom: 0.5rem;
 	margin-bottom: 0.5rem;
-	opacity: 0.8;
 	border-bottom: 1px solid var(--border-color);
 }
 

package/src/components/DropDown.vue

@@ -1,43 +1,44 @@
 <template>
-  <div class="dropdown" @click="toggleDropdown" :class="{ opendrop: isOpen }">
-    <div class="dropdown-title">
-      {{ selectedOption || placeholder }}
-      <MaterialIcon icon="keyboard_arrow_down" />
-    </div>
-    <div class="dropdown-body">
-      <p
-        v-for="(option, index) in options"
-        :key="index"
-        @click.stop="selectOption(option as string, index as number)"
-      >
-        {{ option }}
-      </p>
-    </div>
-  </div>
+	<div class="dropdown" @click="toggleDropdown" :class="{ opendrop: isOpen }">
+		<div class="dropdown-title">
+			{{ selectedOption || placeholder }}
+			<MaterialIcon icon="keyboard_arrow_down" />
+		</div>
+		<div
+			class="dropdown-body"
+		>
+			<p
+				v-for="(option, index) in options"
+				:key="index"
+				@click.stop="selectOption(option as string, index as number)"
+			>
+				{{ option }}
+			</p>
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import { MaterialIcon } from "@bagelink/vue";
+import { MaterialIcon } from '@bagelink/vue';
 
 const props = defineProps({
-  modelValue: String,
-  options: Array,
-  placeholder: String,
+	modelValue: String,
+	options: Array,
+	placeholder: String,
 });
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(['update:modelValue']);
 
-const isOpen = ref(false);
-const selectedOption = ref(props.modelValue);
+let isOpen = $ref(false);
+let selectedOption = $ref(props.modelValue);
 
 function toggleDropdown() {
-  isOpen.value = !isOpen.value;
+	isOpen = !isOpen;
 }
 
 function selectOption(option: string, index: number) {
-  selectedOption.value = option;
-  isOpen.value = false;
-  emit("update:modelValue", { option, index }); // Emit the selected option value with v-model
+	selectedOption = option;
+	isOpen = false;
+	emit('update:modelValue', { option, index }); // Emit the selected option value with v-model
 }
 </script>
 
@@ -45,13 +46,14 @@ function selectOption(option: string, index: number) {
 .dropdown {
   position: relative;
   font-size: calc(var(--input-font-size) * 1.3);
-  width: 50px;
-  /* color: var(--bgl-primary); */
-  z-index: 1;
+  /* width: 50px; */
+  z-index: 9;
+
 }
 
 .dropdown-title {
   white-space: nowrap;
+  color: var(--bgl-primary);
   border-radius: var(--input-border-radius);
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
   padding-left: calc(var(--btn-padding) / 2);
@@ -90,7 +92,8 @@ function selectOption(option: string, index: number) {
   inset-inline-start: 0;
   inset-inline-end: 0;
   overflow: auto;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.20);
+  z-index: 99999999;
 }
 
 .dropdown-body * {
@@ -99,12 +102,11 @@ function selectOption(option: string, index: number) {
   padding: calc(var(--btn-padding) / 2);
   padding-bottom: calc(var(--btn-padding) / 4);
   padding-top: calc(var(--btn-padding) / 4);
+  margin: 0;
   color: inherit;
   text-decoration: none;
   line-height: 1;
   transition: var(--bgl-transition);
-  box-shadow: 0 -1px 0 0 rgb(0 0 0, 10%);
-  z-index: 99999999;
 }
 
 .dropdown-body *:hover {

package/src/components/TableSchema.vue

@@ -1,68 +1,70 @@
 <template>
-  <div class="table-list-wrap h-100">
-    <table class="infinite-wrapper">
-      <thead class="row first-row">
-        <th
-          class="col"
-          v-for="field in columns"
-          :key="field.id"
-          @click="sort(field.id)"
-        >
-          <div class="flex">
-            {{ field?.label || field?.id }}
-            <div
-              class="list-arrows"
-              :class="{ sorted: sortField === field.id }"
-            >
-              <MaterialIcon
-                :class="{ desc: sortDirection === 'DESC' }"
-                icon="keyboard_arrow_up"
-              />
-            </div>
-          </div>
-        </th>
-      </thead>
-      <tbody ref="infinite" class="rows infinite" :class="{ loading }">
-        <tr
-          @click="selectElement(row)"
-          class="row row-item position-relative"
-          v-for="row in data"
-          :key="row.id"
-        >
-          <td
-            class="col"
-            v-for="field in columns"
-            :key="`${field.id}-${row.id}`"
-          >
-            <slot
-              v-if="slots[field.id]"
-              :name="field.id"
-              :row="row"
-              :field="field"
-            />
-            <div v-else>
-              <component
-                :is="field.$el || field.$cmp || 'div'"
-                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 : ''"
-              >
-                {{
-                  field?.transform?.(row[field.id], row) || row[field.id] || ""
-                }}
-              </component>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <!-- </Transition> -->
-  </div>
+	<div class="table-list-wrap h-100">
+		<table class="infinite-wrapper">
+			<thead class="row first-row">
+				<th
+					class="col"
+					v-for="field in columns"
+					:key="field.id"
+					@click="sort(field.id)"
+				>
+					<div class="flex">
+						{{ field?.label || field?.id }}
+						<div
+							class="list-arrows"
+							:class="{ sorted: sortField === field.id }"
+						>
+							<MaterialIcon
+								:class="{ desc: sortDirection === 'DESC' }"
+								icon="keyboard_arrow_up"
+							/>
+						</div>
+					</div>
+				</th>
+			</thead>
+			<tbody ref="infinite" class="rows infinite" :class="{ loading }">
+				<tr
+					@click="selectElement(row)"
+					class="row row-item position-relative"
+					v-for="row in data"
+					:key="row.id"
+				>
+					<td
+						class="col"
+						v-for="field in columns"
+						:key="`${field.id}-${row.id}`"
+					>
+						<slot
+							v-if="slots[field.id]"
+							:name="field.id"
+							:row="row"
+							:field="field"
+						/>
+						<div v-else>
+							<component
+								:is="field.$el || field.$cmp || 'div'"
+								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)"
+								:modelValue="row[field.id]"
+							>
+								{{
+									field?.transform?.(row[field.id], row) || row[field.id] || ""
+								}}
+							</component>
+						</div>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+		<!-- </Transition> -->
+	</div>
 </template>
 
 <script setup lang="ts">
-import { useSlots } from "vue";
-import { MaterialIcon } from "@bagelink/vue";
+import { useSlots } from 'vue';
+import { MaterialIcon } from '@bagelink/vue';
 
 const slots = useSlots();
 const loading = $ref(true);
@@ -72,42 +74,38 @@ const props = defineProps<{
   schema?: () => any[];
 }>();
 
-const emit = defineEmits(["select"]);
+const emit = defineEmits(['select']);
 
 const selectElement = (data: Record<string, any>) => {
-  emit("select", data);
+	emit('select', data);
 };
 
 const bindAttrs = (attrs: Record<string, any>, field: any, row: any) => {
-  const arr = Object.entries(attrs || {}).map(([key, value]) => [
-    key,
-    typeof value === "function" ? value(field, row) : value,
-  ]);
-  const resolvedAttrs = Object.fromEntries(arr);
-  return resolvedAttrs;
+	const arr = Object.entries(attrs || {}).map(([key, value]) => [
+		key,
+		typeof value === 'function' ? value(field, row) : value,
+	]);
+	const resolvedAttrs = Object.fromEntries(arr);
+	return resolvedAttrs;
 };
 
 // const sortList = () => {};
-let sortDirection = $ref("");
-let sortField = $ref("");
+let sortDirection = $ref('');
+let sortField = $ref('');
 
 const sort = (fieldname: string) => {
-  if (sortField === fieldname) {
-    if (sortDirection === "ASC") sortDirection = "DESC";
-    else sortField = "";
-  } else {
-    sortField = fieldname;
-    sortDirection = "ASC";
-  }
+	if (sortField === fieldname) {
+		if (sortDirection === 'ASC') sortDirection = 'DESC';
+		else sortField = '';
+	} else {
+		sortField = fieldname;
+		sortDirection = 'ASC';
+	}
 };
 
 const columns = $computed(
-  () =>
-    props.schema?.() ||
-    Object.keys(props.data[0]).map((k: string) => ({
-      id: k,
-      inputType: "PlainText",
-    }))
+	() => props.schema?.() ||
+    Object.keys(props.data[0]).map((k: string) => ({ id: k, inputType: 'PlainText' })),
 );
 </script>