@bagelink/vue 0.0.360 → 0.0.374

package/src/components/form/BglForm.vue

@@ -1,21 +1,30 @@
 <template>
-  <template v-if="id">
-    <BglField v-for="(field, i) in schema" :key="field.id || `${i}p`" :field="field" v-model="data" />
-  </template>
-  <form v-else-if="(!slots.success || formStatus !== 'success')" ref="form" @submit.prevent="runSubmit">
-    <Title tag="h4" :label="label" v-if="label" />
-    <BglField v-for="(field, i) in schema" :key="field.id || `${i}p`" :field="field" v-model="data" />
-    <slot name="submit" />
-  </form>
-  <slot v-if="formStatus === 'success'" name="success" />
-  <slot v-if="formStatus === 'error'" name="error" />
+	<template v-if="id">
+		<BglField
+			v-for="(field, i) in schema"
+			:key="field.id || `${i}p`"
+			:field="field"
+			v-model="data" />
+	</template>
+	<form
+		v-else-if="!slots.success || status !== 'success'"
+		ref="form"
+		@submit.prevent="runSubmit">
+		<Title tag="h4" :label="label" v-if="label" />
+		<BglField
+			v-for="(field, i) in schema"
+			:key="field.id || `${i}p`"
+			:field="field"
+			v-model="data" />
+		<slot name="submit" />
+	</form>
+	<slot v-if="status === 'success'" name="success" />
+	<slot v-if="status === 'error'" name="error" />
 </template>
 
 <script lang="ts" setup>
 import { useSlots } from 'vue';
-import {
-  useModal, BglField, Title,
-} from '@bagelink/vue';
+import { useModal, BglField, Title } from '@bagelink/vue';
 
 import { type BglFormSchemaT } from '@bagelink/vue';
 
@@ -24,17 +33,18 @@ const slots = useSlots();
 const { showModal } = useModal();
 
 const props = withDefaults(
-  defineProps<{
-    label?: string;
-    id?: string;
-    schema: BglFormSchemaT<any>;
-    modelValue?: Record<string, any>;
-    onDelete?: ((id: string) => void);
-    onSubmit?: ((data: any) => void);
-  }>(),
-  {
-    modelValue: () => ({}),
-  },
+	defineProps<{
+		label?: string;
+		id?: string;
+		schema: BglFormSchemaT<any>;
+		modelValue?: Record<string, any>;
+		onDelete?: (id: string) => void;
+		onSubmit?: (data: any) => void;
+		status?: FormStatus;
+	}>(),
+	{
+		modelValue: () => ({}),
+	}
 );
 
 const instAt = new Date();
@@ -43,15 +53,15 @@ let formData = $ref(props.modelValue);
 const emit = defineEmits(['update:modelValue', 'submit', 'dirty']);
 let isDirty = $ref(false);
 const data = $computed({
-  set: (val: any) => {
-    if (timeSinceInst() > 100) {
-      emit('dirty');
-      isDirty = true;
-    }
-    formData = val;
-    emit('update:modelValue', val);
-  },
-  get: () => props.modelValue || formData,
+	set: (val: any) => {
+		if (timeSinceInst() > 100) {
+			emit('dirty');
+			isDirty = true;
+		}
+		formData = val;
+		emit('update:modelValue', val);
+	},
+	get: () => props.modelValue || formData,
 });
 const form = $ref<HTMLFormElement>();
 
@@ -61,38 +71,32 @@ const clearForm = () => Object.assign(data, {});
 
 type FormStatus = 'idle' | 'loading' | 'success' | 'error';
 
-let formStatus = $ref<FormStatus>('idle');
-
 const runSubmit = () => {
-  try {
-    validateForm();
-    props.onSubmit?.(data);
-    // emit('submit', data);
-    clearForm();
-    formStatus = 'success';
-  } catch (e) {
-    formStatus = 'error';
-  }
+	const isValid = validateForm();
+	if (!isValid) return;
+	props.onSubmit?.(data);
+	// emit('submit', data);
+	clearForm();
 };
 
 const i18nT = (val: string) => val;
 
 const deleteItem = () => {
-  showModal(
-    {
-      class: 'small-modal',
-      title: i18nT('Are you sure?'),
-      actions: [
-        {
-          value: 'Confirm',
-          color: 'red',
-          onClick: () => props.onDelete?.(data.value.id),
-        },
-        { value: 'Cancel', color: 'gray' },
-      ],
-    },
-    { default: i18nT('form.deleteMessage') },
-  );
+	showModal(
+		{
+			class: 'small-modal',
+			title: i18nT('Are you sure?'),
+			actions: [
+				{
+					value: 'Confirm',
+					color: 'red',
+					onClick: () => props.onDelete?.(data.value.id),
+				},
+				{ value: 'Cancel', color: 'gray' },
+			],
+		},
+		{ default: i18nT('form.deleteMessage') }
+	);
 };
 
 defineExpose({ validateForm, deleteItem, isDirty });
@@ -100,6 +104,6 @@ defineExpose({ validateForm, deleteItem, isDirty });
 
 <style>
 .del-top {
-  transform: translateY(-2.6rem);
+	transform: translateY(-2.6rem);
 }
 </style>

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

@@ -8,28 +8,20 @@
 				:highlight-week-days="[6]"
 				:enable-time-picker="false"
 				:month-change-on-scroll="false"
-				v-bind="options"
-			>
+				v-bind="options">
 				<template #action-buttons />
 				<template #action-preview />
 			</VDatepicker>
 		</div>
-		<div
-			class="time-wrap"
-			v-if="showTimeWrap"
-		>
-			<template
-				v-for="hr in hours"
-				:key="hr"
-			>
+		<div class="time-wrap" v-if="showTimeWrap">
+			<template v-for="hr in hours" :key="hr">
 				<input
 					type="radio"
-					:id="`${hr}_${name}`"
-					:name="name"
+					:id="`${hr}_${id}`"
+					:name="label"
 					:value="hr"
-					v-model="selectedHour"
-				>
-				<label :for="`${hr}_${name}`">{{ hr }}</label>
+					v-model="selectedHour" />
+				<label :for="`${hr}_${id}`">{{ hr }}</label>
 			</template>
 		</div>
 	</div>
@@ -39,7 +31,12 @@
 import VDatepicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
 
-defineProps<{ name: string, options?: Record<string, any>, showTimeWrap?: boolean }>();
+defineProps<{
+	label?: string;
+	id?: string;
+	options?: Record<string, any>;
+	showTimeWrap?: boolean;
+}>();
 const selectedDate = $ref(null);
 const selectedHour = $ref();
 
@@ -80,7 +77,7 @@ const hours = Array.from({ length: 18 }, (_, index) => {
 	border: 1px solid var(--bgl-primary);
 }
 
-.time-wrap input[type="radio"]:checked+label {
+.time-wrap input[type='radio']:checked + label {
 	background: var(--bgl-primary);
 	color: var(--bgl-white);
 }
@@ -130,7 +127,7 @@ const hours = Array.from({ length: 18 }, (_, index) => {
 	margin-bottom: -10px;
 }
 
-.dp__calendar_row>div:last-child {
+.dp__calendar_row > div:last-child {
 	pointer-events: none;
 }
 

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,7 +238,7 @@ onBeforeUnmount(() => editor?.destroy());
 .tiptap hr {
 	border: none;
 	border-top: 2px solid rgba(13, 13, 13, 0.1);
-	margin: 2rem 0;
+	margin: 1rem 0;
 }
 
 .tiptap {
@@ -236,5 +246,22 @@ onBeforeUnmount(() => editor?.destroy());
 	background: var(--input-bg);
 	overflow: auto;
 	max-height: 600px;
+	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/styles/theme.css

@@ -142,6 +142,7 @@
     color: var(--bgl-primary);
     border-bottom: 2px solid var(--bgl-primary);
 }
+
 .router-tab:hover {
     color: var(--bgl-primary);
 }

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',