@bagelink/vue 0.0.186 → 0.0.190

package/dist/style.css

@@ -753,110 +753,110 @@
 	transform: translateY(-2.6rem);
 }
 
-.list-arrows[data-v-8cd8ab82] {
-  opacity: 0;
+.list-arrows[data-v-f3a410c2] {
+	opacity: 0;
 }
-.list-arrows .icon-font[data-v-8cd8ab82] {
-  transition: all ease-in-out 0.2s;
+.list-arrows .icon-font[data-v-f3a410c2] {
+	transition: all ease-in-out 0.2s;
 }
-.list-arrows.sorted[data-v-8cd8ab82] {
-  opacity: 1;
+.list-arrows.sorted[data-v-f3a410c2] {
+	opacity: 1;
 }
-.col img[data-v-8cd8ab82] {
-  height: 35px;
-  margin-top: -14px;
-  margin-bottom: -14px;
-  border-radius: 5px;
+.col img[data-v-f3a410c2] {
+	height: 35px;
+	margin-top: -14px;
+	margin-bottom: -14px;
+	border-radius: 5px;
 }
-.list-arrows.sorted .desc[data-v-8cd8ab82] {
-  transform: rotate(180deg);
+.list-arrows.sorted .desc[data-v-f3a410c2] {
+	transform: rotate(180deg);
 }
-table[data-v-8cd8ab82] {
-  border-collapse: separate;
-  border-spacing: 0 15px;
-  border-collapse: collapse;
+table[data-v-f3a410c2] {
+	border-collapse: separate;
+	border-spacing: 0 15px;
+	border-collapse: collapse;
 }
-th[data-v-8cd8ab82] {
-  font-weight: 400;
+th[data-v-f3a410c2] {
+	font-weight: 400;
 }
-.row[data-v-8cd8ab82] {
-  border-bottom: 1px solid var(--border-color);
-  cursor: pointer;
+.row[data-v-f3a410c2] {
+	border-bottom: 1px solid var(--border-color);
+	cursor: pointer;
 }
-.row.first-row[data-v-8cd8ab82] {
-  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[data-v-f3a410c2] {
+	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[data-v-8cd8ab82]::after {
-  content: "";
-  border-bottom: 1px solid var(--border-color);
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: -1px;
+.row.first-row[data-v-f3a410c2]::after {
+	content: "";
+	border-bottom: 1px solid var(--border-color);
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: -1px;
 }
-.first-row .col[data-v-8cd8ab82] {
-  cursor: pointer;
-  background: var(--bgl-white);
+.first-row .col[data-v-f3a410c2] {
+	cursor: pointer;
+	background: var(--bgl-white);
 }
-.col[data-v-8cd8ab82] {
-  white-space: nowrap;
-  padding: 14px;
-  transition: var(--bgl-transition);
-  line-height: 1;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  align-items: center;
+.col[data-v-f3a410c2] {
+	white-space: nowrap;
+	padding: 14px;
+	transition: var(--bgl-transition);
+	line-height: 1;
+	padding-left: 1rem;
+	padding-right: 1rem;
+	align-items: center;
 }
-.col > div[data-v-8cd8ab82] {
-  display: flex;
-  gap: 0.5rem;
+.col>div[data-v-f3a410c2] {
+	display: flex;
+	gap: 0.5rem;
 }
-.max-col-width[data-v-8cd8ab82] {
-  max-width: 30vw;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.max-col-width[data-v-f3a410c2] {
+	max-width: 30vw;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
-.col.check .icon-font[data-v-8cd8ab82] {
-  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;
+.col.check .icon-font[data-v-f3a410c2] {
+	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[data-v-8cd8ab82] {
-  font-size: 0.8125em;
+.rows[data-v-f3a410c2] {
+	font-size: 0.8125em;
 }
-.table-list[data-v-8cd8ab82] {
-  height: 100%;
-  position: relative;
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-  overflow: auto;
+.table-list[data-v-f3a410c2] {
+	height: 100%;
+	position: relative;
+	padding-left: 0 !important;
+	padding-right: 0 !important;
+	overflow: auto;
 }
-.BagelTable .table-list[data-v-8cd8ab82] {
-  overflow: unset;
+.BagelTable .table-list[data-v-f3a410c2] {
+	overflow: unset;
 }
-.row-item[data-v-8cd8ab82] {
-  height: 50px;
-  transition: all 200ms ease;
+.row-item[data-v-f3a410c2] {
+	height: 50px;
+	transition: all 200ms ease;
 }
-.row-item[data-v-8cd8ab82]:hover {
-  background: var(--bgl-gray-light);
+.row-item[data-v-f3a410c2]:hover {
+	background: var(--bgl-gray-light);
 }
-.infinite-wrapper[data-v-8cd8ab82] {
-  overflow-y: auto;
-  width: 100%;
+.infinite-wrapper[data-v-f3a410c2] {
+	overflow-y: auto;
+	width: 100%;
 }
 
 .person-card {
@@ -2234,38 +2234,140 @@ input[type='email'][data-v-ed81a514] {
 	cursor: not-allowed;
 }
 
-.chart-line {
+.datetime-wrap {
+  display: flex;
+  gap: 3rem;
+  padding: 1rem;
+}
+.time-wrap {
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: 1fr 1fr;
   width: 100%;
-  height: 300px;
 }
-[dir="rtl"] .chart-line {
-  direction: ltr;
+.time-wrap input {
+  display: none;
 }
-.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;
+.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);
+}
+.time-wrap input[type="radio"]:checked+label {
+  background: var(--bgl-primary);
+  color: var(--bgl-white);
 }
-.chart-line .v-tooltip-content > div b {
+.time-wrap label:hover {
+  filter: var(--bgl-hover-filter);
+}
+.time-wrap label:active {
+  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);
+}
+: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__calendar_header {
   font-weight: 400;
+  padding: 10px 0 0;
+  margin-bottom: -10px;
+}
+.dp__calendar_row>div:last-child {
+  pointer-events: none;
+}
+.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:focus-visible {
+    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;
+}
+}
+
+.chart-line {
+	width: 100%;
+	height: 300px;
+}
+[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 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;
+		height: 140px;
 }
 .layer-axis-x .tick {
-    opacity: 0;
-    font-size: 0;
+		opacity: 0;
+		font-size: 0;
 }
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.186",
+  "version": "0.0.190",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -50,11 +50,10 @@
     "./tsconfig.json",
     "./vite.config.ts"
   ],
-  "dependencies": {
-    "vue": "^3.3.11"
-  },
+  "dependencies": {},
   "devDependencies": {
-    "@vue-macros/reactivity-transform": "^0.4.0"
+    "vue": "^3.4.3",
+    "@vue-macros/reactivity-transform": "^0.4.1"
   },
   "peerDependencies": {
     "@bagelink/sdk": "*",
@@ -70,41 +69,45 @@
     "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": {
-      "option": true
+      "optional": true
     },
     "@formkit/vue": {
-      "option": true
+      "optional": true
     },
     "@formkit/core": {
-      "option": true
+      "optional": true
     },
     "vue-draggable-next": {
-      "option": true
+      "optional": true
     },
     "prosemirror-commands": {
-      "option": true
+      "optional": true
     },
     "prosemirror-history": {
-      "option": true
+      "optional": true
     },
     "prosemirror-keymap": {
-      "option": true
+      "optional": true
     },
     "prosemirror-model": {
-      "option": true
+      "optional": true
     },
     "prosemirror-schema-basic": {
-      "option": true
+      "optional": true
     },
     "prosemirror-state": {
-      "option": true
+      "optional": true
     },
     "prosemirror-view": {
-      "option": true
+      "optional": true
     }
   },
   "publishConfig": {

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>