@bagelink/vue 0.0.466 → 0.0.471

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

@@ -1,48 +1,48 @@
+<script setup lang="ts">
+// const props =
+withDefaults(
+	defineProps<{
+		description?: string
+		label?: string
+		modelValue: any
+		placeholder?: string
+		editMode?: boolean
+		small?: boolean
+	}>(),
+	{
+		description: '',
+		editMode: true,
+		placeholder: '',
+		label: '',
+	},
+)
+// TODO: remove this Nati ?
+
+const emits = defineEmits(['update:modelValue'])
+function handleInput(e: Event) {
+	const el = e.target as HTMLInputElement
+	emits('update:modelValue', el.value)
+}
+</script>
+
 <template>
 	<div
 		class="bagel-input"
 		:title="description"
-		:class="{ small: small }"
+		:class="{ small }"
 	>
 		<label v-if="label">
 			<LangText :input="label" />
 		</label>
 		<textarea
 			:value="modelValue"
-			@input="handleInput"
 			:class="{ 'no-edit': !editMode }"
 			:placeholder="placeholder"
+			@input="handleInput"
 		/>
 	</div>
 </template>
 
-<script setup lang="ts">
-// TODO: remove this Nati ?
-
-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 textarea {
 	font-family: monospace;

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

@@ -1,81 +1,81 @@
-<template>
-	<div class="bagel-input">
-		<label class="pb-025"> {{ label }}</label>
-		<div class="flex gap-05 flex-wrap">
-			<div class="radio-pill" v-for="(option, index) in options" :key="index">
-				<input
-					type="radio"
-					:id="`${id}-${getValue(option)}`"
-					:name="id"
-					:value="getValue(option)"
-					:checked="selectedValue == getValue(option)"
-					@change="handleSelect"
-				/>
-				<label :for="`${id}-${getValue(option)}`">{{ getLabel(option) }}</label>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script setup lang="ts">
-import { onMounted, watch } from 'vue';
+import { onMounted, watch } from 'vue'
 
 type Option =
 	| string
 	| number
 	| Record<string, any>
-	| { label: string; value: string | number };
-
-const emits = defineEmits(['update:modelValue']);
-
-const getLabel = (option: Option) => {
-	if (typeof option === 'string') return option;
-	if (typeof option === 'number') return `${option}`;
-	return option.label;
-};
-
-const getValue = (option: Option) => {
-	if (typeof option === 'string') return option;
-	if (typeof option === 'number') return option;
-	return option.value;
-};
+	| { label: string, value: string | number }
 
 const props = withDefaults(
 	defineProps<{
-		options?: Option[];
-		modelValue?: any;
-		id?: string;
-		label?: string;
+		options?: Option[]
+		modelValue?: any
+		id?: string
+		label?: string
 	}>(),
 	{
 		modelValue: '',
 		id: () => `radio-pill-${Math.random().toString(36).substring(2, 9)}`,
 		label: '',
 	},
-);
+)
+
+const emits = defineEmits(['update:modelValue'])
 
-let selectedValue = $ref(props.modelValue);
+function getLabel(option: Option) {
+	if (typeof option === 'string') return option
+	if (typeof option === 'number') return `${option}`
+	return option.label
+}
+
+function getValue(option: Option) {
+	if (typeof option === 'string') return option
+	if (typeof option === 'number') return option
+	return option.value
+}
+
+let selectedValue = $ref(props.modelValue)
 
 function handleSelect(e: Event) {
-	const newVal = (e.target as any)?.value;
-	emits('update:modelValue', newVal);
-	selectedValue = newVal;
+	const newVal = (e.target as any)?.value
+	emits('update:modelValue', newVal)
+	selectedValue = newVal
 }
 
 watch(
 	() => props.modelValue,
 	(newVal, oldVal) => {
-		if (newVal === oldVal || oldVal === undefined) return;
-		if (selectedValue !== newVal) selectedValue = newVal;
+		if (newVal === oldVal || oldVal === undefined) return
+		if (selectedValue !== newVal) selectedValue = newVal
 	},
 	{ immediate: true },
-);
+)
 
 onMounted(() => {
-	selectedValue = props.modelValue;
-});
+	selectedValue = props.modelValue
+})
 </script>
 
+<template>
+	<div class="bagel-input">
+		<label class="pb-025"> {{ label }}</label>
+		<div class="flex gap-05 flex-wrap">
+			<div v-for="(option, index) in options" :key="index" class="radio-pill">
+				<input
+					:id="`${id}-${getValue(option)}`"
+					type="radio"
+					:name="id"
+					:value="getValue(option)"
+					:checked="selectedValue == getValue(option)"
+					@change="handleSelect"
+				>
+				<label :for="`${id}-${getValue(option)}`">{{ getLabel(option) }}</label>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style scoped>
 .radio-pill label {
 	color: var(--bgl-primary);

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

@@ -1,56 +1,38 @@
-<template>
-	<div class="RichText">
-		<div class="RichText-tools" v-if="editor">
-			<Btn
-				tabindex="-1"
-				: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>
-</template>
-
 <script setup lang="ts">
 import {
-	Btn,
-	useModal,
 	FileUpload as $el,
-	bagelFormUtils,
 	BglVideo,
-} from '@bagelink/vue';
-import { onMounted, onBeforeUnmount, watch } from 'vue';
-import StarterKit from '@tiptap/starter-kit';
-import { Editor, EditorContent } from '@tiptap/vue-3';
-import Image from '@tiptap/extension-image';
-import YouTube from '@tiptap/extension-youtube';
-import Table from '@tiptap/extension-table';
-import TableRow from '@tiptap/extension-table-row';
-import TableCell from '@tiptap/extension-table-cell';
-import TableHeader from '@tiptap/extension-table-header';
-import type { MaterialIcons } from '@bagelink/vue';
-// import $el from './FileUploadURL.vue';
-const { txtField } = bagelFormUtils;
-let editor = $ref<Editor>();
+	Btn,
+	bagelFormUtils,
+	useModal,
+} from '@bagelink/vue'
+import { onBeforeUnmount, onMounted, watch } from 'vue'
+import StarterKit from '@tiptap/starter-kit'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+import Image from '@tiptap/extension-image'
+import YouTube from '@tiptap/extension-youtube'
+import Table from '@tiptap/extension-table'
+import TableRow from '@tiptap/extension-table-row'
+import TableCell from '@tiptap/extension-table-cell'
+import TableHeader from '@tiptap/extension-table-header'
+import type { MaterialIcons } from '@bagelink/vue'
 
-const props = defineProps<{ modelValue: string }>();
+const props = defineProps<{ modelValue: string }>()
+const emit = defineEmits(['update:modelValue'])
+// import $el from './FileUploadURL.vue';
+const { txtField } = bagelFormUtils
+let editor = $ref<Editor>()
 
-const focus = () => {
-	if (!editor) throw new Error('editor is not defined');
-	return editor.chain().focus();
-};
-const { showModalForm } = useModal();
+function focus() {
+	if (!editor) throw new Error('editor is not defined')
+	return editor.chain().focus()
+}
+const { showModalForm } = useModal()
 
 Image.configure({
 	inline: true,
 	allowBase64: true,
-});
+})
 
 function addImage() {
 	showModalForm({
@@ -60,20 +42,20 @@ function addImage() {
 			{ $el, id: 'src', attrs: { bindkey: 'url' } },
 			txtField('alt', 'Alt Text'),
 		],
-		onSubmit: (imgObj) => focus().setImage(imgObj).run(),
-	});
+		onSubmit: imgObj => focus().setImage(imgObj).run(),
+	})
 }
 
 const config: {
-	name: string;
-	command: any;
-	icon: MaterialIcons;
-	option?: Record<string, any>;
-	disabled?: () => boolean;
+	name: string
+	command: any
+	icon: MaterialIcons
+	option?: Record<string, any>
+	disabled?: () => boolean
 }[] = [
 	{
 		name: 'Bold',
-		command: () => focus()?.toggleBold().run(),
+		command: () => focus().toggleBold().run(),
 		icon: 'format_bold',
 		disabled: () => !editor?.can().chain().focus().toggleBold()
 			.run(),
@@ -114,8 +96,8 @@ const config: {
 						attrs: { src: (_: any, { src }: { src: string }) => src || '' },
 					},
 				],
-				onSubmit: (videoObj) => editor?.commands.setYoutubeVideo(videoObj),
-			});
+				onSubmit: videoObj => editor?.commands.setYoutubeVideo(videoObj),
+			})
 		},
 		icon: 'youtube_activity',
 	},
@@ -218,9 +200,7 @@ const config: {
 		disabled: () => !editor?.can().chain().focus().redo()
 			.run(),
 	},
-];
-
-const emit = defineEmits(['update:modelValue']);
+]
 
 function initEditor() {
 	editor = new Editor({
@@ -234,24 +214,43 @@ function initEditor() {
 			TableHeader,
 		],
 		content: props.modelValue,
-		onUpdate: ({ editor }) => emit('update:modelValue', editor.getHTML()),
-	});
+		onUpdate: ({ editor }) => { emit('update:modelValue', editor.getHTML()) },
+	})
 }
 
 watch(
 	() => props.modelValue,
 	(value) => {
-		if (editor?.getHTML() === value) return;
-		editor?.commands.setContent(value, false);
+		if (editor?.getHTML() === value) return
+		editor?.commands.setContent(value, false)
 	},
 	{ immediate: true },
-);
+)
 
-onMounted(initEditor);
+onMounted(initEditor)
 
-onBeforeUnmount(() => editor?.destroy());
+onBeforeUnmount(() => editor?.destroy())
 </script>
 
+<template>
+	<div class="RichText">
+		<div v-if="editor" class="RichText-tools">
+			<Btn
+				v-for="item in config"
+				:key="item.name"
+				v-tooltip="item.name"
+				tabindex="-1"
+				:flat="!editor.isActive(item.name, item.option)"
+				thin
+				:icon="item.icon"
+				:disabled="item.disabled?.()"
+				@click="item.command"
+			/>
+		</div>
+		<EditorContent :editor="editor" />
+	</div>
+</template>
+
 <style>
 /* Basic editor styles */
 .tiptap > * + * {