@bagelink/vue 0.0.378 → 0.0.390

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

@@ -1,19 +1,18 @@
 <template>
 	<div class="bagel-input">
-		<label class="pb-025" >
-			{{ label  }}
+		<label class="pb-025">
+			{{ label }}
 		</label>
 		<div class="flex gap-05 flex-wrap">
-			<div class="radio-pill" v-for="({optioId,label,value}, index) in cumputedOptions" :key="index">
+			<div class="radio-pill" v-for="(option, index) in options" :key="index">
 				<input
 					type="radio"
-					:id="optioId"
+					:id="getValue(option)"
 					:name="id"
-					:value="value"
-					:checked="selectedValue === value"
-					@change="handleSelect"
-				>
-				<label :for="optioId">{{ label }}</label>
+					:value="getValue(option)"
+					:checked="selectedValue === getValue(option)"
+					@change="handleSelect" />
+				<label :for="getValue(option)">{{ getLabel(option) }}</label>
 			</div>
 		</div>
 	</div>
@@ -22,27 +21,33 @@
 <script setup lang="ts">
 import { onMounted, watch } from 'vue';
 
-interface RadioOption {
-	optioId: string;
-	label: string;
-	value: any;
-}
+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;
+};
+
 const props = defineProps<{
-	options?: RadioOption[],
-	stringOptions: string[],
-	modelValue: any,
-	id?: string,
-	label?: string,
+	options?: Option[];
+	modelValue: any;
+	id?: string;
+	label?: string;
 }>();
 
-const cumputedOptions = $computed(() => props.options || props.stringOptions.map((v) => ({
-	optioId: v,
-	label: v,
-	value: v,
-})));
-
 let selectedValue = $ref('');
 
 function handleSelect(e: Event) {
@@ -56,7 +61,7 @@ watch(
 		if (newVal === oldVal || oldVal === undefined) return;
 		if (selectedValue !== newVal) selectedValue = newVal;
 	},
-	{ immediate: true },
+	{ immediate: true }
 );
 
 onMounted(() => {
@@ -66,30 +71,30 @@ onMounted(() => {
 
 <style scoped>
 .radio-pill label {
-  color: var(--bgl-primary);
-  white-space: nowrap;
-  border-radius: calc(var(--btn-border-radius) * 2);
-  outline: 1px solid var(--bgl-primary);
-  padding-left: calc(var(--btn-padding) / 2);
-  padding-right: calc(var(--btn-padding) / 2);
-  padding-top: calc(var(--btn-padding) / 6);
-  padding-bottom: calc(var(--btn-padding) / 6);
-  cursor: pointer;
-  transition: var(--bgl-transition);
-  background: var(--bgl-white);
-  user-select: none;
+	color: var(--bgl-primary);
+	white-space: nowrap;
+	border-radius: calc(var(--btn-border-radius) * 2);
+	outline: 1px solid var(--bgl-primary);
+	padding-left: calc(var(--btn-padding) / 2);
+	padding-right: calc(var(--btn-padding) / 2);
+	padding-top: calc(var(--btn-padding) / 6);
+	padding-bottom: calc(var(--btn-padding) / 6);
+	cursor: pointer;
+	transition: var(--bgl-transition);
+	background: var(--bgl-white);
+	user-select: none;
 }
 
 .radio-pill label:hover {
-  filter: var(--bgl-hover-filter);
+	filter: var(--bgl-hover-filter);
 }
 
 .radio-pill input {
-  display: none;
+	display: none;
 }
 
-.radio-pill input:checked~label {
-  background: var(--bgl-primary);
-  color: var(--bgl-white);
+.radio-pill input:checked ~ label {
+	background: var(--bgl-primary);
+	color: var(--bgl-white);
 }
 </style>

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

@@ -2,6 +2,7 @@
 	<div class="RichText">
 		<div class="RichText-tools" v-if="editor">
 			<Btn
+				tabindex="-1"
 				:flat="!editor.isActive(item.name, item.option)"
 				@click="item.command"
 				thin
@@ -16,12 +17,21 @@
 </template>
 
 <script setup lang="ts">
-import { Btn } from '@bagelink/vue';
+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 type { MaterialIcons } from '@bagelink/vue';
-
+// import $el from './FileUploadURL.vue';
+const { txtField } = bagelFormUtils;
 let editor = $ref<Editor>();
 
 const props = defineProps<{ modelValue: string }>();
@@ -30,6 +40,19 @@ const focus = () => {
 	if (!editor) throw new Error('editor is not defined');
 	return editor.chain().focus();
 };
+const { showModalForm } = useModal();
+
+function addImage() {
+	showModalForm({
+		title: 'Add Image',
+		schema: [
+			txtField('title', 'Title'),
+			{ $el, id: 'src', attrs: { bindkey: 'url' } },
+			txtField('alt', 'Alt Text'),
+		],
+		onSubmit: (imgObj) => focus().setImage(imgObj).run(),
+	});
+}
 
 const config: {
 	name: string;
@@ -61,11 +84,28 @@ const config: {
 		command: () => focus().toggleCode().run(),
 		icon: 'code',
 	},
-	// {
-	// 	name: 'clearMarks',
-	// 	command: () => focus().unsetAllMarks(),
-	// 	icon: 'clear',
-	// },
+	{
+		name: 'Image',
+		command: addImage,
+		icon: 'image',
+	},
+	{
+		name: 'YouTube',
+		command: () => {
+			showModalForm({
+				title: 'Add YouTube Video',
+				schema: [
+					txtField('src', 'YouTube URL'),
+					{
+						$el: BglVideo,
+						attrs: { src: (_, { src }: { src: string }) => src || '' },
+					},
+				],
+				onSubmit: (videoObj) => editor?.commands.setYoutubeVideo(videoObj),
+			});
+		},
+		icon: 'youtube_activity',
+	},
 	{
 		name: 'Clear',
 		command: () => focus().clearNodes().run(),
@@ -160,7 +200,7 @@ const emit = defineEmits(['update:modelValue']);
 
 function initEditor() {
 	editor = new Editor({
-		extensions: [StarterKit],
+		extensions: [StarterKit, Image, YouTube],
 		content: props.modelValue,
 		onUpdate: ({ editor }) => emit('update:modelValue', editor.getHTML()),
 	});

package/src/plugins/modal.ts

@@ -9,6 +9,7 @@ export interface ModalOptions {
 	title?: string;
 	dismissable?: boolean;
 	side?: boolean;
+	width?: string;
 	actions?: BtnOptions[];
 	class?: string;
 	visible?: boolean;
@@ -18,6 +19,7 @@ export interface ModalFormOptions {
 	side?: boolean;
 	title?: string;
 	visible?: boolean;
+	width?: string;
 	dismissable?: boolean;
 	schema: BglFormSchemaT<any> | (() => BglFormSchemaT) | BglFormSchemaT
 	onSubmit?: (formData: any) => any;

package/src/styles/modal.css

@@ -1,119 +1,119 @@
 .bg-dark {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.7);
-  z-index: 999;
-  pointer-events: none;
-  opacity: 0;
-  transition: all ease-in-out 0.3s;
-  max-height: 100vh;
-  overflow: auto;
-  margin: 0 auto;
-  width: 100%;
-  text-align: center;
-  display: grid;
-  align-items: center;
+	position: fixed;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.7);
+	z-index: 999;
+	pointer-events: none;
+	opacity: 0;
+	transition: all ease-in-out 0.3s;
+	max-height: 100vh;
+	overflow: auto;
+	margin: 0 auto;
+	width: 100%;
+	text-align: center;
+	display: grid;
+	align-items: center;
 }
 
 .bg-lignt {
-  background-color: var(--bgl-white);
+	background-color: var(--bgl-white);
 }
 
 .modal {
-  width: 96%;
-  max-width: 680px;
-  transform: scale(0.5);
-  opacity: 0;
-  transition: all ease-in-out 0.15s;
-  margin-left: auto;
-  margin-right: auto;
-  height: fit-content;
+	width: 96%;
+	max-width: 720px;
+	/* transform: scale(0.5); */
+	/* opacity: 0; */
+	transition: all ease-in-out 0.18s;
+	margin-left: auto;
+	margin-right: auto;
+	height: fit-content;
 }
 
 .small-modal .modal {
-  max-width: 300px;
-  text-align: center;
+	max-width: 300px;
+	text-align: center;
 }
 
 .tool-bar {
-  margin: -2rem -1rem 1rem;
-  display: flex;
-  justify-content: space-between;
-  position: -webkit-sticky;
-  position: sticky;
-  padding-top: 1rem;
-  top: 0rem;
-  z-index: 3;
-  background: var(--bgl-white);
+	margin: -2rem -1rem 1rem;
+	display: flex;
+	justify-content: space-between;
+	position: -webkit-sticky;
+	position: sticky;
+	padding-top: 1rem;
+	top: 0rem;
+	z-index: 3;
+	background: var(--bgl-white);
 }
 
 .modal-size {
-  cursor: pointer;
+	cursor: pointer;
 }
 
 .is-side .modal {
-  inset-inline-end: -600px;
-  transform: scale(1);
-  opacity: 1;
-  /* position: fixed; */
-  /* top: 20px; */
-  /* bottom: 20px; */
-  max-width: 600px;
-  width: 90%;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  margin-inline-start: auto;
-  margin-inline-end: 20px;
-  min-height: calc(100vh - 40px);
-  transform: translateX(100%);
+	inset-inline-end: -1720px;
+	transform: scale(1);
+	opacity: 1;
+	/* position: fixed; */
+	/* top: 20px; */
+	/* bottom: 20px; */
+	max-width: 600px;
+	width: 90%;
+	margin-top: 20px;
+	margin-bottom: 20px;
+	margin-inline-start: auto;
+	margin-inline-end: 20px;
+	min-height: calc(100vh - 40px);
+	transform: translateX(100%);
 }
 
 .is-active .modal {
-  transform: scale(1);
-  opacity: 1;
-  box-shadow: 6px 6px 20px 20px #0000001c;
+	transform: scale(1);
+	opacity: 1;
+	box-shadow: 6px 6px 20px 20px #0000001c;
 }
 
 .bg-lignt .modal {
-  transform: scale(1);
-  border: 1px solid var(--border-color);
+	transform: scale(1);
+	border: 1px solid var(--border-color);
 }
 
 .bg-lignt.is-active .modal {
-  box-shadow: none;
+	box-shadow: none;
 }
 
 .is-active.is-side .modal {
-  inset-inline-end: 20px;
-  transform: translateX(0%);
+	inset-inline-end: 0px;
+	transform: translateX(0%);
 }
 
 .bg-dark.is-active {
-  opacity: 1;
-  pointer-events: all;
+	opacity: 1;
+	pointer-events: all;
 }
 
 .is-side.bg-dark.is-active {
-  opacity: 1;
-  align-items: stretch;
+	opacity: 1;
+	align-items: stretch;
 }
 
 .is-side.is-active .modal {
-  pointer-events: all;
+	pointer-events: all;
 }
 
 @media screen and (max-width: 910px) {
-  .tool-bar {
-    margin: -1rem 0rem 1rem;
-    padding-bottom: 1rem;
-    align-items: center;
-  }
+	.tool-bar {
+		margin: -1rem 0rem 1rem;
+		padding-bottom: 1rem;
+		align-items: center;
+	}
 
-  .is-active.is-side .modal {
-    margin-inline-end: 5%;
-    margin-inline-start: 5%;
-  }
+	.is-active.is-side .modal {
+		margin-inline-end: 5%;
+		margin-inline-start: 5%;
+	}
 }