@bagelink/vue 0.0.160 → 0.0.164

package/src/components/Comments.vue

@@ -1,252 +1,238 @@
 <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>
+  <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 '..';
+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;
+  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;
+  ref_table: string;
+  ref_id: string;
+  sendBtnLabel: string;
 }>();
 
 const fetchData = async () => {
-	comments = [];
-	comments = (await bagel.get(
-		`comments/${props.ref_table}/${props.ref_id}`,
-	));
+  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;
+  if (!editComment) return;
+  await bagel.put(`comments/${editComment.id}`, editComment);
+  void fetchData(); // TODO: Nati: should be awaited?
+  editComment = null;
 };
 
-let bodyHtml = $ref('');
+let bodyHtml = $ref("");
 
 const deleteComment = async (id: string) => {
-	await bagel.delete(`comments/${id}`);
-	void fetchData(); // TODO: Nati: should be awaited?
+  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?
+  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;
+  display: grid;
+  grid-template-rows: 1fr 40px;
+  height: 100%;
+  position: relative;
+  gap: 0.5rem;
 }
 
 .comments-wrap p {
-	margin: 0;
+  margin: 0;
 }
 
 .comments-wrap::before {
-	content: '';
-	inset-inline-start: 10px;
-	top: 0px;
-	width: 1px;
-	background: var(--border-color);
-	position: absolute;
-	bottom: 10px;
+  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;
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  position: relative;
+  margin-inline-start: 1rem;
 }
 
 .comment-list {
-	padding: 0.5rem;
-	height: 100%;
-	overflow: auto;
+  padding: 0.5rem;
+  height: 100%;
+  overflow: auto;
 }
 
 .comment {
-	margin-bottom: 1rem;
+  margin-bottom: 1rem;
 }
 
 .comment-owner {
-	font-size: 14px;
-	margin-inline-end: 0.5rem;
-	color: var(--bgl-gray);
+  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;
+  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);
+  color: var(--bgl-primary);
 }
 
 .me .comment-owner::before {
-	background: var(--bgl-blue);
+  background: var(--bgl-primary);
 }
 
 .comment-time {
-	color: var(--bgl-gray);
-	font-size: 10px;
-	white-space: nowrap;
+  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;
+  background: red;
+  line-height: 0;
+  display: flex;
+  padding: 0 0.5rem;
+  flex-grow: 1;
+  gap: 0.25rem;
 }
 
 .comment .comment-actions .edit {
-	opacity: 0;
+  opacity: 0;
 }
 
 .comment-actions .edit {
-	margin-inline-end: auto;
+  margin-inline-end: auto;
 }
 
 .comment.me:hover .comment-actions .edit {
-	opacity: 0.4;
+  opacity: 0.4;
 }
 
-.comment-actions>div {
-	transition: all 200ms ease;
-	cursor: pointer;
-	opacity: 0.6;
+.comment-actions > div {
+  transition: all 200ms ease;
+  cursor: pointer;
+  opacity: 0.6;
 }
 
-.comment-actions>div:hover {
-	color: var(--bgl-blue);
+.comment-actions > div:hover {
+  color: var(--bgl-primary);
 }
 
 .comment-actions .delete:hover {
-	color: var(--bgl-red);
+  color: var(--bgl-red);
 }
 
-.comment-actions>div:active {
-	filter: brightness(70%);
+.comment-actions > div:active {
+  filter: brightness(70%);
 }
 
 .icon-font.delete,
 .icon-font.save {
-	display: none;
+  display: none;
 }
 
 .editable .icon-font.delete,
 .editable .icon-font.save {
-	display: block;
+  display: block;
 }
 
 /* .editor-wrapper { */
@@ -259,24 +245,24 @@ const newComment = async () => {
 /* border-radius: 10px; */
 /* } */
 .editable .editor-wrapper {
-	background-color: var(--bgl-bg);
+  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;
+  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);
+  max-height: 100px;
+  overflow: auto;
+  flex-grow: 1;
+  border-radius: var(--btn-border-radius);
 }
 </style>

package/src/components/DropDown.vue

@@ -1,126 +1,122 @@
 <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 { ref } from "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);
 
 function toggleDropdown() {
-	isOpen.value = !isOpen.value;
+  isOpen.value = !isOpen.value;
 }
 
 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.value = option;
+  isOpen.value = false;
+  emit("update:modelValue", { option, index }); // Emit the selected option value with v-model
 }
 </script>
 
 <style>
 .dropdown {
-	position: relative;
-	font-size: calc(var(--input-font-size) * 1.3);
-	width: 50px;
-	/* color: var(--bgl-blue); */
-	z-index: 1;
+  position: relative;
+  font-size: calc(var(--input-font-size) * 1.3);
+  width: 50px;
+  /* color: var(--bgl-primary); */
+  z-index: 1;
 }
 
 .dropdown-title {
-	white-space: nowrap;
-	border-radius: var(--input-border-radius);
-	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
-	padding-left: calc(var(--btn-padding) / 2);
-	padding-right: calc(var(--btn-padding) / 2);
-	display: flex;
-	align-items: center;
-	min-height: var(--input-height);
-	cursor: pointer;
-	transition: var(--bgl-transition);
-	background: var(--bgl-white);
-	justify-content: space-between;
-	user-select: none;
-	position: relative;
+  white-space: nowrap;
+  border-radius: var(--input-border-radius);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
+  padding-left: calc(var(--btn-padding) / 2);
+  padding-right: calc(var(--btn-padding) / 2);
+  display: flex;
+  align-items: center;
+  min-height: var(--input-height);
+  cursor: pointer;
+  transition: var(--bgl-transition);
+  background: var(--bgl-white);
+  justify-content: space-between;
+  user-select: none;
+  position: relative;
 }
 
 .open .dropdown {
-	min-width: 120px;
+  min-width: 120px;
 }
 
 .dropdown-title:hover {
-	filter: var(--bgl-hover-filter);
-	color: var(--bgl-blue);
+  filter: var(--bgl-hover-filter);
+  color: var(--bgl-primary);
 }
 
 .dropdown-title:active {
-	filter: var(--bgl-active-filter);
+  filter: var(--bgl-active-filter);
 }
 
 .dropdown-body {
-	border-radius: var(--input-border-radius);
-	position: absolute;
-	transition: var(--bgl-transition);
-	max-height: 0;
-	overflow: hidden;
-	background: var(--bgl-white);
-	inset-inline-start: 0;
-	inset-inline-end: 0;
-	overflow: auto;
-	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
+  border-radius: var(--input-border-radius);
+  position: absolute;
+  transition: var(--bgl-transition);
+  max-height: 0;
+  overflow: hidden;
+  background: var(--bgl-white);
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  overflow: auto;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
 }
 
 .dropdown-body * {
-	display: block;
-	cursor: pointer;
-	padding: calc(var(--btn-padding) / 2);
-	padding-bottom: calc(var(--btn-padding) / 4);
-	padding-top: calc(var(--btn-padding) / 4);
-	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;
+  display: block;
+  cursor: pointer;
+  padding: calc(var(--btn-padding) / 2);
+  padding-bottom: calc(var(--btn-padding) / 4);
+  padding-top: calc(var(--btn-padding) / 4);
+  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);
-	color: var(--bgl-blue);
+  filter: var(--bgl-hover-filter);
+  color: var(--bgl-primary);
 }
 
 .dropdown-body *:active {
-	filter: var(--bgl-active-filter);
+  filter: var(--bgl-active-filter);
 }
 
 .dropdown.opendrop .dropdown-body {
-	max-height: 150px;
+  max-height: 150px;
 }
 </style>