@bagelink/vue 0.0.394 → 0.0.400

package/dist/style.css

@@ -752,15 +752,25 @@ th[data-v-10808aad] {
 }
 
 .card_label {
+	font-size: 1rem;
+	position: relative;
+	top: -0.5rem;
+	padding: 0.75rem 0;
+	display: block;
+	border-bottom: 1px solid var(--border-color);
+	margin-bottom: 1rem;
+}
+.border .card_label {
 	font-size: 0.7rem;
 	font-weight: 300;
-	background: rgb(255, 255, 255);
-	padding: 0px 12px;
-	display: block;
+	background:var(--bgl-white);
+	padding: 0 0.75rem;
 	position: absolute;
-	border-radius: 100px;
-	top: -8px;
-	left: 10px;
+	top: -0.5rem;
+	inset-inline-start: 1rem;
+	border-left: 1px solid var(--border-color);
+	border-right: 1px solid var(--border-color);
+	border-bottom: unset;
 }
 .bgl_card {
 	border-radius: var(--card-border-radius);
@@ -1726,6 +1736,63 @@ img.preview[data-v-0dbacaa0] {
 	margin-bottom: 0.125rem;
 	border-radius: var(--input-border-radius);
 }
+.tiptap {
+table {
+		border-collapse: collapse;
+		table-layout: fixed;
+		width: 100%;
+		margin: 0;
+		overflow: hidden;
+td,
+		th {
+			min-width: 1em;
+			border: 2px solid #ced4da;
+			padding: 3px 5px;
+			vertical-align: top;
+			box-sizing: border-box;
+			position: relative;
+> * {
+				margin-bottom: 0;
+}
+}
+th {
+			font-weight: bold;
+			text-align: left;
+			background-color: #f1f3f5;
+}
+.selectedCell:after {
+			z-index: 2;
+			position: absolute;
+			content: '';
+			left: 0;
+			right: 0;
+			top: 0;
+			bottom: 0;
+			background: rgba(200, 200, 255, 0.4);
+			pointer-events: none;
+}
+.column-resize-handle {
+			position: absolute;
+			right: -2px;
+			top: 0;
+			bottom: -2px;
+			width: 4px;
+			background-color: #adf;
+			pointer-events: none;
+}
+p {
+			margin: 0;
+}
+}
+}
+.tableWrapper {
+	padding: 1rem 0;
+	overflow-x: auto;
+}
+.resize-cursor {
+	cursor: ew-resize;
+	cursor: col-resize;
+}
 
 .chart-line {
 	width: 100%;
@@ -1777,72 +1844,72 @@ img.preview[data-v-0dbacaa0] {
 }
 
 .v-popper--theme-tooltip .v-popper__inner {
-  background: rgb(255, 255, 255) !important;
-  color: var(--bgl-primary) !important;
-  font-size: 15px;
-  padding: 0.5rem 1rem;
-  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+	background: rgb(255, 255, 255) !important;
+	color: var(--bgl-primary) !important;
+	font-size: 15px;
+	padding: 0.5rem 1rem;
+	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
 }
 .wideNav .nav-button .bgl_btn-flex {
-  justify-content: flex-start !important;
+	justify-content: flex-start !important;
 }
 .nav-button.router-link-active {
-  background: var(--bgl-white) !important;
-  color: var(--bgl-primary);
+	background: var(--bgl-white) !important;
+	color: var(--bgl-primary);
 }
 
-.bgl_sidebar[data-v-65bec778] {
-  background-color: var(--bgl-primary);
-  color: var(--bgl-white);
-  overflow: hidden;
-  border-radius: var(--card-border-radius);
-  margin: 0.5rem;
-  width: calc(100% - 1rem);
-  padding: 0.5rem;
-  overflow-y: auto;
+.bgl_sidebar[data-v-3c893fb1] {
+	background-color: var(--bgl-primary);
+	color: var(--bgl-white);
+	overflow: hidden;
+	border-radius: var(--card-border-radius);
+	margin: 0.5rem;
+	width: calc(100% - 1rem);
+	padding: 0.5rem;
+	overflow-y: auto;
 }
-.toggleNav[data-v-65bec778]{
-  height: 22px !important;
-  width: 22px !important;
-  opacity: 0.4;
-  transition: var(--bgl-transition);
+.toggleNav[data-v-3c893fb1] {
+	height: 22px !important;
+	width: 22px !important;
+	opacity: 0.4;
+	transition: var(--bgl-transition);
 }
-.toggleNav[data-v-65bec778]:hover{
-  opacity: 1;
+.toggleNav[data-v-3c893fb1]:hover {
+	opacity: 1;
 }
-.wideNav .toggleNav[data-v-65bec778] {
-  transform: rotate(180deg);
+.wideNav .toggleNav[data-v-3c893fb1] {
+	transform: rotate(180deg);
 }
-.wideNav .nav-button[data-v-65bec778] {
-  padding-inline-start: 1rem !important;
-  width: 100%;
+.wideNav .nav-button[data-v-3c893fb1] {
+	padding-inline-start: 1rem !important;
+	width: 100%;
 }
-[dir="rtl"] .toggleNav[data-v-65bec778] {
-  transform: rotate(180deg);
+[dir='rtl'] .toggleNav[data-v-3c893fb1] {
+	transform: rotate(180deg);
 }
-[dir="rtl"] .wideNav .toggleNav[data-v-65bec778] {
-  transform: rotate(0deg);
+[dir='rtl'] .wideNav .toggleNav[data-v-3c893fb1] {
+	transform: rotate(0deg);
 }
-.nav-button.bgl_btn-icon[data-v-65bec778] {
-  border-radius: var(--btn-border-radius) !important;
+.nav-button.bgl_btn-icon[data-v-3c893fb1] {
+	border-radius: var(--btn-border-radius) !important;
 }
-.nav-button p[data-v-65bec778] {
-  transition: var(--nav-tran);
-  animation: fade-65bec778 2s;
-  animation-duration: 900ms;
+.nav-button p[data-v-3c893fb1] {
+	transition: var(--nav-tran);
+	animation: fade-3c893fb1 2s;
+	animation-duration: 900ms;
 }
-@keyframes fade-65bec778 {
+@keyframes fade-3c893fb1 {
 0% {
-    opacity: 0;
-    transform: translateX(-20px);
+		opacity: 0;
+		transform: translateX(-20px);
 }
 30% {
-    opacity: 0;
-    transform: translateX(-20px);
+		opacity: 0;
+		transform: translateX(-20px);
 }
 100% {
-    opacity: 1;
-    transform: translateX(0);
+		opacity: 1;
+		transform: translateX(0);
 }
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.394",
+  "version": "0.0.400",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -63,6 +63,10 @@
     "@tiptap/starter-kit": "^2.2.4",
     "@tiptap/extension-image": "^2.2.4",
     "@tiptap/extension-youtube": "^2.2.4",
+    "@tiptap/extension-table": "^2.2.4",
+    "@tiptap/extension-table-row": "^2.2.4",
+    "@tiptap/extension-table-header": "^2.2.4",
+    "@tiptap/extension-table-cell": "^2.2.4",
     "@tiptap/vue-3": "^2.2.4",
     "vue": "*",
     "vue-draggable-next": "^2.2.1",

package/src/components/Card.vue

@@ -8,8 +8,9 @@
 			[bg || '']: bg,
 			'overflow-x': overflowX,
 			'overflow-y': overflowY,
-		}">
-		<span class="card_label">
+		}"
+	>
+		<span v-if="label" class="card_label">
 			{{ label }}
 		</span>
 		<slot />
@@ -41,16 +42,29 @@ defineProps<{
 
 <style>
 .card_label {
+	font-size: 1rem;
+	position: relative;
+	top: -0.5rem;
+	padding: 0.75rem 0;
+	display: block;
+	border-bottom: 1px solid var(--border-color);
+	margin-bottom: 1rem;
+
+}
+.border .card_label {
 	font-size: 0.7rem;
 	font-weight: 300;
-	background: rgb(255, 255, 255);
-	padding: 0px 12px;
-	display: block;
+	background:var(--bgl-white);
+	padding: 0 0.75rem;
 	position: absolute;
-	border-radius: 100px;
-	top: -8px;
-	left: 10px;
+	top: -0.5rem;
+	inset-inline-start: 1rem;
+	border-left: 1px solid var(--border-color);
+	border-right: 1px solid var(--border-color);
+	border-bottom: unset;
+
 }
+
 .bgl_card {
 	border-radius: var(--card-border-radius);
 	background: var(--bgl-white);

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

@@ -29,6 +29,10 @@ import StarterKit from '@tiptap/starter-kit';
 import { Editor, EditorContent } from '@tiptap/vue-3';
 import Image from '@tiptap/extension-image';
 import YouTube from '@tiptap/extension-youtube';
+import Table from '@tiptap/extension-table';
+import TableRow from '@tiptap/extension-table-row';
+import TableCell from '@tiptap/extension-table-cell';
+import TableHeader from '@tiptap/extension-table-header';
 import type { MaterialIcons } from '@bagelink/vue';
 // import $el from './FileUploadURL.vue';
 const { txtField } = bagelFormUtils;
@@ -199,13 +203,31 @@ const config: {
 		icon: 'redo',
 		disabled: () => !editor?.can().chain().focus().redo().run(),
 	},
+	{
+		name: 'Table',
+		command: () =>
+			editor
+				.chain()
+				.focus()
+				.insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+				.run(),
+		icon: 'table',
+	},
 ];
 
 const emit = defineEmits(['update:modelValue']);
 
 function initEditor() {
 	editor = new Editor({
-		extensions: [StarterKit, Image, YouTube],
+		extensions: [
+			StarterKit,
+			Image,
+			YouTube,
+			Table,
+			TableRow,
+			TableCell,
+			TableHeader,
+		],
 		content: props.modelValue,
 		onUpdate: ({ editor }) => emit('update:modelValue', editor.getHTML()),
 	});
@@ -309,4 +331,70 @@ onBeforeUnmount(() => editor?.destroy());
 	margin-bottom: 0.125rem;
 	border-radius: var(--input-border-radius);
 }
+
+.tiptap {
+	table {
+		border-collapse: collapse;
+		table-layout: fixed;
+		width: 100%;
+		margin: 0;
+		overflow: hidden;
+
+		td,
+		th {
+			min-width: 1em;
+			border: 2px solid #ced4da;
+			padding: 3px 5px;
+			vertical-align: top;
+			box-sizing: border-box;
+			position: relative;
+
+			> * {
+				margin-bottom: 0;
+			}
+		}
+
+		th {
+			font-weight: bold;
+			text-align: left;
+			background-color: #f1f3f5;
+		}
+
+		.selectedCell:after {
+			z-index: 2;
+			position: absolute;
+			content: '';
+			left: 0;
+			right: 0;
+			top: 0;
+			bottom: 0;
+			background: rgba(200, 200, 255, 0.4);
+			pointer-events: none;
+		}
+
+		.column-resize-handle {
+			position: absolute;
+			right: -2px;
+			top: 0;
+			bottom: -2px;
+			width: 4px;
+			background-color: #adf;
+			pointer-events: none;
+		}
+
+		p {
+			margin: 0;
+		}
+	}
+}
+
+.tableWrapper {
+	padding: 1rem 0;
+	overflow-x: auto;
+}
+
+.resize-cursor {
+	cursor: ew-resize;
+	cursor: col-resize;
+}
 </style>

package/src/components/layout/SidebarMenu.vue

@@ -1,15 +1,28 @@
 <template>
-	<Card class="flex column gap-05 pt-1 bgl_sidebar" :class="{ 'wideNav': isOpen }">
+	<Card
+		class="flex column gap-05 pt-1 bgl_sidebar"
+		:class="{ wideNav: isOpen }">
 		<div class="w-100 px-075">
-			<Btn thin color="light" class="toggleNav mb-05" icon="keyboard_arrow_right" @click="toggleMenu" />
+			<Btn
+				thin
+				color="light"
+				class="toggleNav mb-05"
+				icon="keyboard_arrow_right"
+				@click="toggleMenu" />
 		</div>
 		<slot v-if="!isOpen || !slots['brand-open']" name="brand" />
 		<slot v-if="isOpen" name="brand-open" />
 		<slot v-if="!navLinks" />
 		<Btn
-			v-for="(nav, i) in navLinks" :key="i" :to="nav.to" class="nav-button px-075"
-			v-tooltip.right="{ content: nav.label, disabled: open, class: ['nav-tooltip'] }"
-		>
+			v-for="(nav, i) in navLinks"
+			:key="i"
+			:to="nav.to"
+			class="nav-button px-075"
+			v-tooltip.right="{
+				content: nav.label,
+				disabled: open,
+				class: ['nav-tooltip'],
+			}">
 			<template #default>
 				<Icon :icon="nav.icon" :size="1.4" />
 				<p v-if="open">
@@ -17,6 +30,7 @@
 				</p>
 			</template>
 		</Btn>
+		<div style="flex-grow: 1" />
 		<slot name="footer" />
 	</Card>
 </template>
@@ -28,7 +42,11 @@ import type { NavLink } from '@bagelink/vue';
 
 const slots = useSlots();
 
-const props = defineProps<{ navLinks?: NavLink[], expandable?: boolean, open: boolean }>();
+const props = defineProps<{
+	navLinks?: NavLink[];
+	expandable?: boolean;
+	open: boolean;
+}>();
 
 let isOpen = $ref(props.open);
 
@@ -41,85 +59,85 @@ function toggleMenu() {
 
 <style>
 .v-popper--theme-tooltip .v-popper__inner {
-  background: rgb(255, 255, 255) !important;
-  color: var(--bgl-primary) !important;
-  font-size: 15px;
-  padding: 0.5rem 1rem;
-  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+	background: rgb(255, 255, 255) !important;
+	color: var(--bgl-primary) !important;
+	font-size: 15px;
+	padding: 0.5rem 1rem;
+	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
 }
 
 .wideNav .nav-button .bgl_btn-flex {
-  justify-content: flex-start !important;
+	justify-content: flex-start !important;
 }
 
 .nav-button.router-link-active {
-  background: var(--bgl-white) !important;
-  color: var(--bgl-primary);
+	background: var(--bgl-white) !important;
+	color: var(--bgl-primary);
 }
 </style>
 
 <style scoped>
 .bgl_sidebar {
-  background-color: var(--bgl-primary);
-  color: var(--bgl-white);
-  overflow: hidden;
-  border-radius: var(--card-border-radius);
-  margin: 0.5rem;
-  width: calc(100% - 1rem);
-  padding: 0.5rem;
-  overflow-y: auto;
+	background-color: var(--bgl-primary);
+	color: var(--bgl-white);
+	overflow: hidden;
+	border-radius: var(--card-border-radius);
+	margin: 0.5rem;
+	width: calc(100% - 1rem);
+	padding: 0.5rem;
+	overflow-y: auto;
 }
-.toggleNav{
-  height: 22px !important;
-  width: 22px !important;
-  opacity: 0.4;
-  transition: var(--bgl-transition);
+.toggleNav {
+	height: 22px !important;
+	width: 22px !important;
+	opacity: 0.4;
+	transition: var(--bgl-transition);
 }
-.toggleNav:hover{
-  opacity: 1;
+.toggleNav:hover {
+	opacity: 1;
 }
 
 .wideNav .toggleNav {
-  transform: rotate(180deg);
+	transform: rotate(180deg);
 }
 
 .wideNav .nav-button {
-  padding-inline-start: 1rem !important;
-  width: 100%;
+	padding-inline-start: 1rem !important;
+	width: 100%;
 }
 
-[dir="rtl"] .toggleNav {
-  transform: rotate(180deg);
+[dir='rtl'] .toggleNav {
+	transform: rotate(180deg);
 }
 
-[dir="rtl"] .wideNav .toggleNav {
-  transform: rotate(0deg);
+[dir='rtl'] .wideNav .toggleNav {
+	transform: rotate(0deg);
 }
 
 .nav-button.bgl_btn-icon {
-  border-radius: var(--btn-border-radius) !important;
+	border-radius: var(--btn-border-radius) !important;
 }
 
 .nav-button p {
-  transition: var(--nav-tran);
-  animation: fade 2s;
-  animation-duration: 900ms;
+	transition: var(--nav-tran);
+	animation: fade 2s;
+	animation-duration: 900ms;
 }
 
 @keyframes fade {
-  0% {
-    opacity: 0;
-    transform: translateX(-20px);
-  }
-
-  30% {
-    opacity: 0;
-    transform: translateX(-20px);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
+	0% {
+		opacity: 0;
+		transform: translateX(-20px);
+	}
+
+	30% {
+		opacity: 0;
+		transform: translateX(-20px);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateX(0);
+	}
 }
 </style>