@bagelink/vue 0.0.363 → 0.0.378

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

@@ -1,16 +1,18 @@
 <template>
-	<div v-if="editor">
-		<Btn
-			:flat="!editor.isActive(item.name, item.option)"
-			@click="item.command"
-			thin
-			v-for="item in config"
-			v-tooltip="item.name"
-			:key="item.name"
-			:icon="item.icon"
-			:disabled="item.disabled?.()" />
+	<div class="RichText">
+		<div class="RichText-tools" v-if="editor">
+			<Btn
+				:flat="!editor.isActive(item.name, item.option)"
+				@click="item.command"
+				thin
+				v-for="item in config"
+				v-tooltip="item.name"
+				:key="item.name"
+				:icon="item.icon"
+				:disabled="item.disabled?.()" />
+		</div>
+		<editor-content :editor="editor" />
 	</div>
-	<editor-content :editor="editor" />
 </template>
 
 <script setup lang="ts">
@@ -37,117 +39,117 @@ const config: {
 	disabled?: () => boolean;
 }[] = [
 	{
-		name: 'bold',
+		name: 'Bold',
 		command: () => focus()?.toggleBold().run(),
 		icon: 'format_bold',
 		disabled: () => !editor?.can().chain().focus().toggleBold().run(),
 	},
 	{
-		name: 'italic',
+		name: 'Italic',
 		command: () => focus().toggleItalic().run(),
 		icon: 'format_italic',
 		disabled: () => !editor?.can().chain().focus().toggleItalic().run(),
 	},
 	{
-		name: 'strike',
+		name: 'Strike',
 		command: () => focus().toggleStrike().run(),
 		icon: 'format_strikethrough',
 		disabled: () => !editor?.can().chain().focus().toggleStrike().run(),
 	},
 	{
-		name: 'code',
+		name: 'Code Text',
 		command: () => focus().toggleCode().run(),
 		icon: 'code',
 	},
+	// {
+	// 	name: 'clearMarks',
+	// 	command: () => focus().unsetAllMarks(),
+	// 	icon: 'clear',
+	// },
 	{
-		name: 'clearMarks',
-		command: () => focus().unsetAllMarks(),
-		icon: 'clear',
-	},
-	{
-		name: 'clearNodes',
+		name: 'Clear',
 		command: () => focus().clearNodes().run(),
-		icon: 'clear',
+		icon: 'format_clear',
 	},
 	{
-		name: 'paragraph',
+		name: 'Paragraph',
 		command: () => focus().setParagraph().run(),
 		icon: 'format_paragraph',
 	},
 	{
-		name: 'heading',
+		name: 'Heading',
 		command: () => focus().toggleHeading({ level: 1 }).run(),
 		icon: 'format_h1',
 		option: { level: 1 },
 	},
 	{
-		name: 'heading',
+		name: 'Heading',
 		command: () => focus().toggleHeading({ level: 2 }).run(),
 		icon: 'format_h2',
 		option: { level: 2 },
 	},
 	{
-		name: 'heading',
+		name: 'Heading',
 		command: () => focus().toggleHeading({ level: 3 }).run(),
 		icon: 'format_h3',
 		option: { level: 3 },
 	},
 	{
-		name: 'heading',
+		name: 'Heading',
 		command: () => focus().toggleHeading({ level: 4 }).run(),
 		icon: 'format_h4',
 		option: { level: 4 },
 	},
 	{
-		name: 'heading',
+		name: 'Heading',
 		command: () => focus().toggleHeading({ level: 5 }).run(),
 		icon: 'format_h5',
 		option: { level: 5 },
 	},
 	{
-		name: 'heading',
+		name: 'Heading',
 		command: () => focus().toggleHeading({ level: 6 }).run(),
 		icon: 'format_h6',
 		option: { level: 6 },
 	},
 	{
-		name: 'bulletList',
+		name: 'Bullet List',
 		command: () => focus().toggleBulletList().run(),
 		icon: 'format_list_bulleted',
 	},
 	{
-		name: 'orderedList',
+		name: 'Ordered List',
 		command: () => focus().toggleOrderedList().run(),
 		icon: 'format_list_numbered',
 	},
 	{
-		name: 'codeBlock',
+		name: 'Code Block',
 		command: () => focus().toggleCodeBlock().run(),
-		icon: 'code',
+		icon: 'code_blocks',
 	},
 	{
-		name: 'blockquote',
+		name: 'Blockquote',
 		command: () => focus().toggleBlockquote().run(),
 		icon: 'format_quote',
 	},
 	{
-		name: 'horizontalRule',
+		name: 'Horizontal Rule',
 		command: () => focus().setHorizontalRule().run(),
 		icon: 'horizontal_rule',
 	},
 	{
-		name: 'hardBreak',
+		name: 'Hard Break',
 		command: () => focus().setHardBreak().run(),
 		icon: 'keyboard_return',
 	},
 	{
-		name: 'undo',
+		name: 'Undo',
 		command: () => focus().undo().run(),
 		icon: 'undo',
 		disabled: () => !editor?.can().chain().focus().undo().run(),
 	},
 	{
-		name: 'redo',
+		name: 'Redo',
 		command: () => focus().redo().run(),
 		icon: 'redo',
 		disabled: () => !editor?.can().chain().focus().redo().run(),
@@ -166,7 +168,10 @@ function initEditor() {
 
 watch(
 	() => props.modelValue,
-	(value) => editor?.commands.setContent(value),
+	(value) => {
+		if (editor?.getHTML() === value) return;
+		editor?.commands.setContent(value, false);
+	},
 	{ immediate: true }
 );
 
@@ -187,12 +192,17 @@ onBeforeUnmount(() => editor?.destroy());
 }
 
 .tiptap h1,
-.tiptap h2,
+.tiptap h2 {
+	line-height: 1;
+	margin-top: 0;
+}
+
 .tiptap h3,
 .tiptap h4,
 .tiptap h5,
 .tiptap h6 {
 	line-height: 1.1;
+	margin-top: 0;
 }
 
 .tiptap code {
@@ -228,13 +238,30 @@ onBeforeUnmount(() => editor?.destroy());
 .tiptap hr {
 	border: none;
 	border-top: 2px solid rgba(13, 13, 13, 0.1);
-	margin: 2rem 0;
+	margin: 1rem 0;
 }
 
 .tiptap {
-	min-height: 500px;
+	min-height: 200px;
 	background: var(--input-bg);
 	overflow: auto;
-	max-height: 600px;
+	max-height: 500px;
+	padding: 0.7rem;
+	color: var(--input-color);
+	border-radius: var(--input-border-radius);
+	font-size: var(--input-font-size);
+	line-height: 1.5;
+}
+.tiptap.ProseMirror-focused {
+	outline: none;
+	box-shadow: inset 0 0 10px #00000012;
+}
+.RichText {
+	margin-bottom: 0.5rem;
+}
+.RichText-tools {
+	background: var(--input-bg);
+	margin-bottom: 0.125rem;
+	border-radius: var(--input-border-radius);
 }
 </style>

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

@@ -266,7 +266,7 @@ watch(
 
 .v-popper--theme-dropdown .v-popper__inner {
 	border: none;
-	background: transparent;
+	/* background: transparent; if anyone is changing this please talk to me first*/
 	border-radius: var(--card-border-radius);
 	color: var(--input-color);
 }

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

@@ -180,6 +180,10 @@ onMounted(() => {
 	background: var(--bgl-black) !important;
 	color: var(--bgl-white) !important;
 }
+.code textarea::placeholder{
+	color: var(--bgl-white) !important;
+	opacity: 0.3;
+}
 
 .bagel-input.toggleEdit:hover {
 	background-color: var(--input-bg);

package/src/components/layout/SidebarMenu.vue

@@ -1,22 +1,24 @@
 <template>
-  <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" />
-    </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'] }">
-      <template #default>
-        <Icon :icon="nav.icon" :size="1.4" />
-        <p v-if="open">
-          {{ nav.label }}
-        </p>
-      </template>
-    </Btn>
-    <slot name="footer" />
-  </Card>
+	<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" />
+		</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'] }"
+		>
+			<template #default>
+				<Icon :icon="nav.icon" :size="1.4" />
+				<p v-if="open">
+					{{ nav.label }}
+				</p>
+			</template>
+		</Btn>
+		<slot name="footer" />
+	</Card>
 </template>
 
 <script lang="ts" setup>
@@ -32,8 +34,8 @@ let isOpen = $ref(props.open);
 
 const emit = defineEmits(['update:open']);
 function toggleMenu() {
-  isOpen = !isOpen;
-  emit('update:open', isOpen);
+	isOpen = !isOpen;
+	emit('update:open', isOpen);
 }
 </script>
 
@@ -67,6 +69,15 @@ function toggleMenu() {
   padding: 0.5rem;
   overflow-y: auto;
 }
+.toggleNav{
+  height: 22px !important;
+  width: 22px !important;
+  opacity: 0.4;
+  transition: var(--bgl-transition);
+}
+.toggleNav:hover{
+  opacity: 1;
+}
 
 .wideNav .toggleNav {
   transform: rotate(180deg);
@@ -77,6 +88,14 @@ function toggleMenu() {
   width: 100%;
 }
 
+[dir="rtl"] .toggleNav {
+  transform: rotate(180deg);
+}
+
+[dir="rtl"] .wideNav .toggleNav {
+  transform: rotate(0deg);
+}
+
 .nav-button.bgl_btn-icon {
   border-radius: var(--btn-border-radius) !important;
 }

package/src/styles/text.css

@@ -228,7 +228,7 @@
 }
 
 .bgl_icon-font {
-    font-family: "Material Symbols Outlined", serif;
+    font-family: "Material Symbols Outlined", serif !important;
 }
 
 .nowrap {

package/src/utils/BagelFormUtils.ts

@@ -25,6 +25,20 @@ interface NumFieldOptions extends InputOptions {
 	step?: number;
 }
 
+type RichTextOptions = InputOptions
+
+export function richText(id: string, label?: string, options?: RichTextOptions) {
+	return {
+		$el: 'richtext',
+		class: options?.class,
+		required: options?.required,
+		id,
+		label,
+		placeholder: options?.placeholder,
+		attrs: {},
+	};
+}
+
 export function txtField(id: string, label?: string, options?: TextInputOptions): Field {
 	return {
 		$el: 'text',