@bagelink/vue 0.0.342 → 0.0.348

package/src/components/Comments.vue

@@ -1,268 +0,0 @@
-<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">
-				{{ sendBtnLabel }}
-			</Btn>
-		</div>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, watch } from 'vue';
-import { Btn, MaterialIcon, RTXEditor } from '@bagelink/vue';
-import { useBagel } from '..';
-
-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;
-  sendBtnLabel: 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-primary);
-}
-
-.me .comment-owner::before {
-  background: var(--bgl-primary);
-}
-
-.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-primary);
-}
-
-.comment-actions .delete:hover {
-  color: var(--bgl-red);
-}
-
-.comment-actions > div:active {
-  filter: brightness(70%);
-}
-
-.bgl_icon-font.delete,
-.bgl_icon-font.save {
-  display: none;
-}
-
-.editable .bgl_icon-font.delete,
-.editable .bgl_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(--input-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/RTXEditor.vue

@@ -1,151 +0,0 @@
-<template>
-	<!-- :class="{ editable: editable }" -->
-	<div
-		@click="focusEditor"
-		:id="`canvas-${elementId}`"
-		@keydown.meta.enter="$emit('keydown.meta.enter')"
-	/>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, watch } from 'vue';
-import { DOMParser, DOMSerializer } from 'prosemirror-model';
-import { EditorState } from 'prosemirror-state';
-import { EditorView } from 'prosemirror-view';
-import { keymap } from 'prosemirror-keymap';
-import { baseKeymap } from 'prosemirror-commands';
-import { undo, redo, history } from 'prosemirror-history';
-import { schema } from 'prosemirror-schema-basic';
-
-const props = withDefaults(
-	defineProps<{
-    elementId?: string;
-    modelValue: string;
-  }>(),
-	{
-		elementId: Math.random().toString(36).substr(2, 9),
-		modelValue: '',
-	},
-);
-
-const emit = defineEmits(['update:modelValue', 'keydown.meta.enter']);
-
-const html = ref<string>(props.modelValue);
-let view: EditorView;
-
-const createEditorStateFromHTML = (htmlContent: string) => {
-	let content = { type: 'doc', content: [] };
-	try {
-		const dom = document.createElement('div');
-		dom.innerHTML = htmlContent || '';
-		content = DOMParser.fromSchema(schema)
-			.parse(dom, { preserveWhitespace: true })
-			.toJSON();
-	} catch (err) {
-		content = { type: 'doc', content: [] };
-	}
-
-	const state = EditorState.create({
-		doc: DOMParser.fromSchema(schema).schema.nodeFromJSON(content),
-		plugins: [
-			history(),
-			keymap({ 'Mod-z': undo, 'Mod-y': redo }),
-			keymap(baseKeymap),
-		],
-	});
-
-	return state;
-};
-
-function handleChange(newState: any) {
-	const dom = document.createElement('div');
-	const node = DOMSerializer.fromSchema(schema).serializeFragment(newState);
-	dom.appendChild(node);
-	html.value = dom?.innerHTML || '';
-	emit('update:modelValue', html.value);
-}
-
-const createEditorView = (state: EditorState) => {
-	const editorDiv = document.getElementById(`canvas-${props.elementId}`);
-	view = new EditorView(editorDiv, {
-		state,
-		// editable: () => props.editable,
-		dispatchTransaction(transaction) {
-			const newState = view.state.apply(transaction);
-			handleChange(newState.doc);
-			view.updateState(newState);
-		},
-	});
-	view.setProps({
-		// editable: () => props.editable,
-	});
-};
-
-function loadContent() {
-	const state = createEditorStateFromHTML(props.modelValue);
-	createEditorView(state);
-}
-
-watch(
-	() => props.modelValue,
-	(val: string) => {
-		if (val === html.value) return;
-		const el = document.getElementById(`canvas-${props.elementId}`);
-		if (el) el.innerHTML = '';
-		loadContent();
-	},
-);
-
-onMounted(loadContent);
-
-function focusEditor() {
-	view.focus();
-}
-</script>
-
-<style>
-.new-comment .ProseMirror {
-  width: 100%;
-  height: 100%;
-  border-radius: 3px;
-  padding: 0.55rem;
-  min-height: 40px;
-}
-
-.new-comment .ProseMirror p {
-  margin: 0;
-}
-
-.comment-input .ProseMirror {
-  background-color: var(--input-bg);
-  margin-inline-start: 0;
-}
-
-.new-comment .editable {
-  background-color: var(--input-bg);
-}
-
-.ProseMirror-focused {
-  outline: none;
-  border: none;
-  box-shadow: inset 0 0 10px #00000012;
-}
-
-.ProseMirror,
-.editor-wrapper {
-  height: 100%;
-  border-radius: 3px;
-  padding: 0.55rem;
-  border-radius: var(--btn-border-radius);
-  margin-inline-start: 1rem;
-}
-
-.ProseMirror p,
-.editor-wrapper p {
-  margin: 0;
-}
-
-.editable .ProseMirror {
-  background-color: var(--bgl-bg);
-}
-</style>

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

@@ -1,56 +0,0 @@
-<template>
-	<div
-		class="bagel-input"
-		:title="description"
-		:class="{ small: small }"
-	>
-		<label v-if="label">
-			<LangText :input="label" />
-		</label>
-		<textarea
-			:value="modelValue"
-			@input="handleInput"
-			:placeholder="placeholder"
-			:class="{ 'no-edit': !editMode }"
-		/>
-	</div>
-</template>
-
-<script setup lang="ts">
-const emits = defineEmits(['update:modelValue']);
-
-// const props =
-withDefaults(
-	defineProps<{
-		description?: string;
-		label?: string;
-		modelValue: any;
-		placeholder?: string;
-		editMode?: boolean;
-		small?: boolean;
-	}>(),
-	{
-		description: '',
-		editMode: true,
-		placeholder: '',
-		label: '',
-	},
-);
-const handleInput = (e: Event) => {
-	const el = e.target as HTMLInputElement;
-	emits('update:modelValue', el.value);
-};
-</script>
-
-<style scoped>
-.bagel-input {
-	height: 100%;
-	margin: 0;
-}
-
-.bagel-input textarea {
-	height: 100%;
-	resize: none;
-	background: transparent;
-}
-</style>