@bagelink/vue 0.0.160 → 0.0.162

package/src/components/RTXEditor.vue

@@ -1,151 +1,151 @@
 <template>
-	<!-- :class="{ editable: editable }" -->
-	<div
-		@click="focusEditor"
-		:id="`canvas-${elementId}`"
-		@keydown.meta.enter="$emit('keydown.meta.enter')"
-	/>
+  <!-- :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';
+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: '',
-	},
+  defineProps<{
+    elementId?: string;
+    modelValue: string;
+  }>(),
+  {
+    elementId: Math.random().toString(36).substr(2, 9),
+    modelValue: "",
+  }
 );
 
-const emit = defineEmits(['update:modelValue', 'keydown.meta.enter']);
+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;
+  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 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,
-	});
+  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);
+  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();
-	},
+  () => 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();
+  view.focus();
 }
 </script>
 
 <style>
 .new-comment .ProseMirror {
-	width: 100%;
-	height: 100%;
-	border-radius: 3px;
-	padding: 0.55rem;
-	min-height: 40px;
+  width: 100%;
+  height: 100%;
+  border-radius: 3px;
+  padding: 0.55rem;
+  min-height: 40px;
 }
 
 .new-comment .ProseMirror p {
-	margin: 0;
+  margin: 0;
 }
 
 .comment-input .ProseMirror {
-	background-color: var(--bgl-bg);
-	margin-inline-start: 0;
+  background-color: var(--input-bg);
+  margin-inline-start: 0;
 }
 
 .new-comment .editable {
-	background-color: var(--bgl-bg);
+  background-color: var(--input-bg);
 }
 
 .ProseMirror-focused {
-	outline: none;
-	border: none;
-	box-shadow: inset 0 0 10px #00000012;
+  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;
+  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;
+  margin: 0;
 }
 
 .editable .ProseMirror {
-	background-color: var(--bgl-bg);
+  background-color: var(--bgl-bg);
 }
 </style>

package/src/components/TableSchema.vue

@@ -1,246 +1,240 @@
 <template>
-	<div class="table-list-wrap h-100">
-		<table class="infinite-wrapper">
-			<thead class="row first-row">
-				<th
-					class="col"
-					v-for="field in columns"
-					:key="field.id"
-					@click="sort(field.id)"
-				>
-					<div class="flex">
-						{{ field?.label || field?.id }}
-						<div
-							class="list-arrows"
-							:class="{ sorted: sortField === field.id }"
-						>
-							<MaterialIcon
-								:class="{ desc: sortDirection === 'DESC' }"
-								icon="keyboard_arrow_up"
-							/>
-						</div>
-					</div>
-				</th>
-			</thead>
-			<tbody
-				ref="infinite"
-				class="rows infinite"
-				:class="{ loading }"
-			>
-				<tr
-					@click="selectElement(row)"
-					class="row row-item position-relative"
-					v-for="row in data"
-					:key="row.id"
-				>
-					<td
-						class="col"
-						v-for="field in columns"
-						:key="`${field.id}-${row.id}`"
-					>
-						<slot
-							v-if="slots[field.id]"
-							:name="field.id"
-							:row="row"
-							:field="field"
-						/>
-						<div v-else>
-							<component
-								:is="field.$el || field.$cmp || 'div'"
-								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 : ''"
-							>
-								{{ field?.transform?.(row[field.id], row) || row[field.id] || '' }}
-							</component>
-						</div>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-		<!-- </Transition> -->
-	</div>
+  <div class="table-list-wrap h-100">
+    <table class="infinite-wrapper">
+      <thead class="row first-row">
+        <th
+          class="col"
+          v-for="field in columns"
+          :key="field.id"
+          @click="sort(field.id)"
+        >
+          <div class="flex">
+            {{ field?.label || field?.id }}
+            <div
+              class="list-arrows"
+              :class="{ sorted: sortField === field.id }"
+            >
+              <MaterialIcon
+                :class="{ desc: sortDirection === 'DESC' }"
+                icon="keyboard_arrow_up"
+              />
+            </div>
+          </div>
+        </th>
+      </thead>
+      <tbody ref="infinite" class="rows infinite" :class="{ loading }">
+        <tr
+          @click="selectElement(row)"
+          class="row row-item position-relative"
+          v-for="row in data"
+          :key="row.id"
+        >
+          <td
+            class="col"
+            v-for="field in columns"
+            :key="`${field.id}-${row.id}`"
+          >
+            <slot
+              v-if="slots[field.id]"
+              :name="field.id"
+              :row="row"
+              :field="field"
+            />
+            <div v-else>
+              <component
+                :is="field.$el || field.$cmp || 'div'"
+                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 : ''"
+              >
+                {{
+                  field?.transform?.(row[field.id], row) || row[field.id] || ""
+                }}
+              </component>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <!-- </Transition> -->
+  </div>
 </template>
 
 <script setup lang="ts">
-import { useSlots } from 'vue';
-import { MaterialIcon } from '@bagelink/vue';
+import { useSlots } from "vue";
+import { MaterialIcon } from "@bagelink/vue";
 
 const slots = useSlots();
 const loading = $ref(true);
 
 const props = defineProps<{
-	data: any[];
-	schema?: () => any[];
+  data: any[];
+  schema?: () => any[];
 }>();
 
-const emit = defineEmits(['select']);
+const emit = defineEmits(["select"]);
 
 const selectElement = (data: Record<string, any>) => {
-	emit('select', data);
+  emit("select", data);
 };
 
 const bindAttrs = (attrs: Record<string, any>, field: any, row: any) => {
-	const arr = Object.entries(
-		attrs || {},
-	)
-		.map(
-			([key, value]) => [
-				key, typeof value === 'function' ? value(field, row) : value,
-			],
-		);
-	const resolvedAttrs = Object.fromEntries(arr);
-	return resolvedAttrs;
+  const arr = Object.entries(attrs || {}).map(([key, value]) => [
+    key,
+    typeof value === "function" ? value(field, row) : value,
+  ]);
+  const resolvedAttrs = Object.fromEntries(arr);
+  return resolvedAttrs;
 };
 
 // const sortList = () => {};
-let sortDirection = $ref('');
-let sortField = $ref('');
+let sortDirection = $ref("");
+let sortField = $ref("");
 
 const sort = (fieldname: string) => {
-	if (sortField === fieldname) {
-		if (sortDirection === 'ASC') sortDirection = 'DESC';
-		else sortField = '';
-	} else {
-		sortField = fieldname;
-		sortDirection = 'ASC';
-	}
+  if (sortField === fieldname) {
+    if (sortDirection === "ASC") sortDirection = "DESC";
+    else sortField = "";
+  } else {
+    sortField = fieldname;
+    sortDirection = "ASC";
+  }
 };
 
 const columns = $computed(
-	() => (
-		props.schema?.() ||
-		Object.keys(props.data[0]).map((k: string) => ({
-			id: k,
-			inputType: 'PlainText',
-		}))),
+  () =>
+    props.schema?.() ||
+    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-blue);
-	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>