@bagelink/vue 0.0.25 → 0.0.35

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.25",
+  "version": "0.0.35",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -42,22 +42,47 @@
     "dist",
     "src"
   ],
-  "dependencies": {
-    "vue": "^3.3.8"
-  },
+  "dependencies": {},
   "devDependencies": {
-    "@bagelink/sdk": "0.0.25"
+    "vue": "^3.3.8",
+    "vue-router": "^4.2.5",
+    "vue3-charts": "^1.1.33",
+    "@formkit/vue": "^1.3.0",
+    "@formkit/core": "1.3.0",
+    "vue-draggable-next": "^2.2.1",
+    "prosemirror-commands": "^1.5.2",
+    "prosemirror-history": "^1.3.2",
+    "prosemirror-keymap": "^1.2.2",
+    "prosemirror-model": "^1.19.3",
+    "prosemirror-schema-basic": "^1.2.2",
+    "prosemirror-state": "^1.4.3",
+    "prosemirror-view": "^1.32.4",
+    "@vue-macros/reactivity-transform": "^0.4.0",
+    "@bagelink/sdk": "0.0.35"
   },
   "peerDependencies": {
     "@bagelink/sdk": "*"
   },
+  "optionalDependencies": {
+    "vue-router": "^4.2.5",
+    "vue3-charts": "^1.1.33",
+    "@formkit/vue": "^1.3.0",
+    "@formkit/core": "1.3.0",
+    "vue-draggable-next": "^2.2.1",
+    "prosemirror-commands": "^1.5.2",
+    "prosemirror-history": "^1.3.2",
+    "prosemirror-keymap": "^1.2.2",
+    "prosemirror-model": "^1.19.3",
+    "prosemirror-schema-basic": "^1.2.2",
+    "prosemirror-state": "^1.4.3",
+    "prosemirror-view": "^1.32.4"
+  },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "dev": "unbuild --stub",
-    "build": "unbuild",
-    "start": "tsx src/index.ts",
-    "watch": "tsx watch src/index.ts"
+    "dev": "tsx watch src/index.ts",
+    "build": "tsc --noEmit && vite build",
+    "start": "tsx src/index.ts"
   }
 }

package/src/components/Btn.vue

@@ -0,0 +1,221 @@
+<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>
+</template>
+
+<script setup lang="ts">
+import { useSlots } from 'vue';
+
+const slots = useSlots();
+import { MaterialIcons } from '@/types/materialIcons';
+import { MaterialIcon } from '@/components';
+
+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',
+	},
+);
+</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;
+}
+
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+.btn-icon {
+	height: var(--btn-height);
+	width: var(--btn-height);
+	border-radius: 100%;
+	font-size: 1rem;
+	background: var(--bgl-blue);
+	color: var(--bgl-white);
+	flex-shrink: 0;
+	transition: var(--bgl-transition);
+}
+
+.btn {
+	background: var(--bgl-blue);
+	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;
+}
+
+.btn-flex {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	justify-content: center;
+}
+
+.btn .icon-font {
+	font-size: calc(var(--input-font-size) * 1.3);
+}
+
+.btn:hover,
+.btn-icon:hover {
+	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-blue);
+}
+
+.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.black,
+.btn-icon.black {
+	background: var(--bgl-black);
+}
+
+.btn.btn-txt {
+	color: var(--bgl-blue);
+	padding-left: var(--btn-padding);
+	padding-right: var(--btn-padding);
+	background: transparent;
+}
+
+.btn-icon.btn-txt {
+	color: var(--bgl-blue);
+	background: transparent;
+}
+
+.btn.btn-txt:hover,
+.btn-icon.btn-txt:hover {
+	filter: var(--bgl-active-filter);
+}
+
+.btn.btn-txt:active,
+.btn-icon.btn-txt:active {
+	background: var(--bgl-white);
+	filter: var(--bgl-hover-filter);
+}
+
+.btn.btn-txt.red,
+.btn-icon.btn-txt.red {
+	color: var(--bgl-red);
+}
+
+.btn.btn-txt.light,
+.btn-icon.btn-txt.light {
+	color: var(--bgl-blue-tint);
+}
+
+.btn.btn-txt.black,
+.btn-icon.btn-txt.black {
+	color: var(--bgl-black);
+}
+
+.btn.btn-txt.gray,
+.btn-icon.btn-txt.gray {
+	color: var(--bgl-gray);
+}
+
+.btn.thin {
+	padding-left: calc(var(--btn-padding) / 2);
+	padding-right: calc(var(--btn-padding) / 2);
+}
+
+.btn.round {
+	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;
+}
+
+[dir='rtl'] .icon-font {
+	transform: rotateY(180deg);
+}
+</style>

package/src/components/Comments.vue

@@ -0,0 +1,284 @@
+<template>
+	<div class="comments-wrap">
+		<div class="comment-list">
+			<div
+				:class="{
+					editable: editComment?.id === comment.id,
+					me: comment.sender.id === bagel.auth.user?.id,
+				}"
+				class="comment"
+				v-for="comment in comments"
+				:key="comment.id"
+			>
+				<div class="comment-top">
+					<div class="comment-owner">
+						{{ comment.sender.first_name }} {{ comment.sender.last_name }}
+					</div>
+					<div class="comment-time">
+						{{ comment.updated_at.split('T')[0] }}
+					</div>
+					<div class="comment-actions">
+						<MaterialIcon
+							:size="1"
+							class="edit"
+							icon="edit"
+							@click="editComment = comment"
+						/>
+						<MaterialIcon
+							:size="1.2"
+							class="delete"
+							icon="delete"
+							@click="deleteComment(comment.id)"
+						/>
+						<MaterialIcon
+							:size="1.2"
+							class="save"
+							icon="save"
+							@click="save"
+						/>
+					</div>
+				</div>
+				<RTXEditor
+					v-model="editComment.body_html"
+					@keydown.meta.enter="save"
+					v-if="editComment !== null && editComment?.id === comment.id"
+				/>
+				<div
+					class="editor-wrapper"
+					v-html="comment.body_html"
+					v-else
+				/>
+			</div>
+		</div>
+		<div class="new-comment">
+			<RTXEditor
+				class="comment-input"
+				v-model="bodyHtml"
+				@keydown.meta.enter="newComment"
+			/>
+			<Btn
+				icon="send"
+				@click="newComment"
+			>
+				{{ form.send }}
+			</Btn>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, watch } from 'vue';
+import { useBagel } from 'src/plugins/bagel';
+import { Btn, MaterialIcon, RTXEditor } from '@/components';
+
+const bagel = useBagel();
+let comments = $ref<Record<string, any>>([]);
+
+interface Comment {
+	id: string;
+	ref_table: string;
+	ref_id: string;
+	body_html: string;
+	type: 'Comment';
+	created_at: string;
+	updated_at: string;
+}
+let editComment = $ref<Comment | null>(null);
+
+const props = defineProps<{
+	ref_table: string;
+	ref_id: string;
+	form: {
+		send: string;
+	}
+}>();
+
+const fetchData = async () => {
+	comments = [];
+	comments = (await bagel.get(
+		`comments/${props.ref_table}/${props.ref_id}`,
+	));
+};
+
+onMounted(fetchData);
+watch(() => props.ref_id, fetchData);
+
+const save = async () => {
+	if (!editComment) return;
+	await bagel.put(`comments/${editComment.id}`, editComment);
+	void fetchData(); // TODO: Nati: should be awaited?
+	editComment = null;
+};
+
+let bodyHtml = $ref('');
+
+const deleteComment = async (id: string) => {
+	await bagel.delete(`comments/${id}`);
+	void fetchData(); // TODO: Nati: should be awaited?
+};
+
+const newComment = async () => {
+	if (!bodyHtml) return;
+	await bagel.post('comments', {
+		ref_table: props.ref_table,
+		ref_id: props.ref_id,
+		body_html: bodyHtml,
+		type: 'Comment',
+	});
+	bodyHtml = '';
+	void fetchData(); // TODO: Nati: should be awaited?
+};
+</script>
+
+<style scoped>
+.comments-wrap {
+	display: grid;
+	grid-template-rows: 1fr 40px;
+	height: 100%;
+	position: relative;
+	gap: 0.5rem;
+}
+
+.comments-wrap p {
+	margin: 0;
+}
+
+.comments-wrap::before {
+	content: '';
+	inset-inline-start: 10px;
+	top: 0px;
+	width: 1px;
+	background: var(--border-color);
+	position: absolute;
+	bottom: 10px;
+}
+
+.comment-top {
+	display: flex;
+	align-items: baseline;
+	flex-wrap: wrap;
+	position: relative;
+	margin-inline-start: 1rem;
+}
+
+.comment-list {
+	padding: 0.5rem;
+	height: 100%;
+	overflow: auto;
+}
+
+.comment {
+	margin-bottom: 1rem;
+}
+
+.comment-owner {
+	font-size: 14px;
+	margin-inline-end: 0.5rem;
+	color: var(--bgl-gray);
+}
+
+.comment-owner::before {
+	content: '';
+	height: 12px;
+	width: 12px;
+	border-radius: 100%;
+	position: absolute;
+	background: var(--bgl-gray);
+	inset-inline-start: -1.2rem;
+	top: 0.2rem;
+}
+
+.me .comment-owner {
+	color: var(--bgl-blue);
+}
+
+.me .comment-owner::before {
+	background: var(--bgl-blue);
+}
+
+.comment-time {
+	color: var(--bgl-gray);
+	font-size: 10px;
+	white-space: nowrap;
+}
+
+.comment-actions {
+	background: red;
+	line-height: 0;
+	display: flex;
+	padding: 0 0.5rem;
+	flex-grow: 1;
+	gap: 0.25rem;
+}
+
+.comment .comment-actions .edit {
+	opacity: 0;
+}
+
+.comment-actions .edit {
+	margin-inline-end: auto;
+}
+
+.comment.me:hover .comment-actions .edit {
+	opacity: 0.4;
+}
+
+.comment-actions>div {
+	transition: all 200ms ease;
+	cursor: pointer;
+	opacity: 0.6;
+}
+
+.comment-actions>div:hover {
+	color: var(--bgl-blue);
+}
+
+.comment-actions .delete:hover {
+	color: var(--bgl-red);
+}
+
+.comment-actions>div:active {
+	filter: brightness(70%);
+}
+
+.icon-font.delete,
+.icon-font.save {
+	display: none;
+}
+
+.editable .icon-font.delete,
+.editable .icon-font.save {
+	display: block;
+}
+
+/* .editor-wrapper { */
+/* margin-inline-start: 0.5rem; */
+/* margin-top: 0.05em; */
+/* margin-bottom: 0.05em; */
+/* height: 100%; */
+/* padding: 0.05em 0.5em; */
+/* overflow: hidden; */
+/* border-radius: 10px; */
+/* } */
+.editable .editor-wrapper {
+	background-color: var(--bgl-bg);
+}
+
+.new-comment {
+	display: flex;
+	align-items: flex-end;
+	position: relative;
+	z-index: 2;
+	gap: 0.5rem;
+	font-size: 12px;
+	color: var(--input-color);
+	line-height: 1.6;
+}
+
+.comment-input {
+	max-height: 100px;
+	overflow: auto;
+	flex-grow: 1;
+	border-radius: var(--btn-border-radius);
+}
+</style>

package/src/components/ContactArray.vue

@@ -0,0 +1,142 @@
+<template>
+	<div class="bagel-input mt-2">
+		{{ field.label }}
+		<div class="mb-2 mt-1">
+			<div
+				class="bglform-contact"
+				v-for="(contact, i) in val"
+				:key="i"
+			>
+				<input
+					v-model="contact.email"
+					:placeholder="placeholders.email"
+					type="email"
+					v-if="field.id === 'email'"
+				>
+				<input
+					v-model="contact.phone"
+					:placeholder="placeholders.phone"
+					type="tel"
+					v-if="field.id === 'phone'"
+				>
+				<input
+					v-if="contact.email || contact.phone"
+					v-model="contact.label"
+					type="text"
+					:placeholder="placeholders.label"
+				>
+				<div class="bglform-contact-opt">
+					<!-- <input v-model="contact.primary" id="primary" type="checkbox" > -->
+					<CheckInput
+						:field="{
+							id: 'primary',
+							inputType: 'CheckInput',
+							label: 'primary',
+						}"
+						v-model="contact.primary"
+					/>
+					<MaterialIcon
+						@click="del(i)"
+						icon="delete"
+						class="btn-float"
+					/>
+				</div>
+			</div>
+			<Btn
+				color="light"
+				thin
+				@click="val.push({})"
+				icon="add"
+			>
+				Add
+			</Btn>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import type { BagelField } from '@/types/BagelField';
+import MaterialIcon from './MaterialIcon.vue';
+import Btn from './Btn.vue';
+import CheckInput from '@/components/form/inputs/CheckInput.vue';
+
+const props = withDefaults(
+	defineProps<{
+		field: BagelField;
+		modelValue: any;
+		editMode?: boolean;
+		small?: boolean;
+		placeholders: {
+
+			email: string
+			phone: string
+			label: string
+		}
+	}>(),
+	{
+		editMode: true,
+		small: false,
+	},
+);
+
+const val = ref<any[]>([]);
+
+const del = (i: number) => {
+	val.value.splice(i, 1);
+};
+
+const emit = defineEmits(['update:modelValue']);
+
+watch(
+	() => props.modelValue,
+	() => {
+		val.value = [...props.modelValue];
+	},
+	{ immediate: true },
+);
+
+watch(
+	() => val,
+	() => {
+		emit('update:modelValue', val.value);
+	},
+);
+</script>
+<!--
+<style>
+.bglform-contact {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+
+	gap: 1rem;
+	position: relative;
+}
+.bglform-contact-opt {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+	justify-content: start;
+	width: 80px;
+}
+.bglform-contact-opt:after {
+	content: '';
+	grid-column: span 2;
+}
+.bagel-input.checkbox {
+	width: auto;
+	padding: 0;
+	min-width: 0;
+}
+.btn-float {
+	cursor: pointer;
+	color: var(--bgl-gray);
+	transition: var(--bgl-transition);
+}
+.btn-float:hover {
+	color: var(--bgl-red);
+}
+.btn-float:active {
+	filter: brightness(0.8);
+}
+</style> -->