@bagelink/vue 0.0.714 → 0.0.724

package/dist/utils/BagelFormUtils.d.ts

@@ -50,10 +50,13 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
                 type: import('vue').PropType<import('..').BglFormSchemaFnT<any>>;
                 required: true;
             };
-            id: {
+            label: {
                 type: import('vue').PropType<string>;
             };
-            label: {
+            onSubmit: {
+                type: import('vue').PropType<(data: any) => void>;
+            };
+            id: {
                 type: import('vue').PropType<string>;
             };
             modelValue: {
@@ -63,15 +66,12 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             onDelete: {
                 type: import('vue').PropType<(id: string) => void>;
             };
-            onSubmit: {
-                type: import('vue').PropType<(data: any) => void>;
-            };
             status: {
                 type: import('vue').PropType<import('../components/form/BglForm.vue').FormStatus>;
             };
         }>> & {
-            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onSubmit?: ((...args: any[]) => any) | undefined;
+            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onDirty?: ((...args: any[]) => any) | undefined;
         }, {
             submit: () => void;
@@ -88,10 +88,13 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
                 type: import('vue').PropType<import('..').BglFormSchemaFnT<any>>;
                 required: true;
             };
-            id: {
+            label: {
                 type: import('vue').PropType<string>;
             };
-            label: {
+            onSubmit: {
+                type: import('vue').PropType<(data: any) => void>;
+            };
+            id: {
                 type: import('vue').PropType<string>;
             };
             modelValue: {
@@ -101,15 +104,12 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             onDelete: {
                 type: import('vue').PropType<(id: string) => void>;
             };
-            onSubmit: {
-                type: import('vue').PropType<(data: any) => void>;
-            };
             status: {
                 type: import('vue').PropType<import('../components/form/BglForm.vue').FormStatus>;
             };
         }>> & {
-            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onSubmit?: ((...args: any[]) => any) | undefined;
+            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onDirty?: ((...args: any[]) => any) | undefined;
         }, {
             modelValue: Record<string, any>;
@@ -125,10 +125,13 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
                 type: import('vue').PropType<import('..').BglFormSchemaFnT<any>>;
                 required: true;
             };
-            id: {
+            label: {
                 type: import('vue').PropType<string>;
             };
-            label: {
+            onSubmit: {
+                type: import('vue').PropType<(data: any) => void>;
+            };
+            id: {
                 type: import('vue').PropType<string>;
             };
             modelValue: {
@@ -138,15 +141,12 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             onDelete: {
                 type: import('vue').PropType<(id: string) => void>;
             };
-            onSubmit: {
-                type: import('vue').PropType<(data: any) => void>;
-            };
             status: {
                 type: import('vue').PropType<import('../components/form/BglForm.vue').FormStatus>;
             };
         }>> & {
-            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onSubmit?: ((...args: any[]) => any) | undefined;
+            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onDirty?: ((...args: any[]) => any) | undefined;
         }, {
             submit: () => void;
@@ -165,10 +165,13 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             type: import('vue').PropType<import('..').BglFormSchemaFnT<any>>;
             required: true;
         };
-        id: {
+        label: {
             type: import('vue').PropType<string>;
         };
-        label: {
+        onSubmit: {
+            type: import('vue').PropType<(data: any) => void>;
+        };
+        id: {
             type: import('vue').PropType<string>;
         };
         modelValue: {
@@ -178,15 +181,12 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
         onDelete: {
             type: import('vue').PropType<(id: string) => void>;
         };
-        onSubmit: {
-            type: import('vue').PropType<(data: any) => void>;
-        };
         status: {
             type: import('vue').PropType<import('../components/form/BglForm.vue').FormStatus>;
         };
     }>> & {
-        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
         onSubmit?: ((...args: any[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
         onDirty?: ((...args: any[]) => any) | undefined;
     }, {
         submit: () => void;
@@ -227,10 +227,13 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
                 type: import('vue').PropType<import('..').BglFormSchemaFnT<any>>;
                 required: true;
             };
-            id: {
+            label: {
                 type: import('vue').PropType<string>;
             };
-            label: {
+            onSubmit: {
+                type: import('vue').PropType<(data: any) => void>;
+            };
+            id: {
                 type: import('vue').PropType<string>;
             };
             modelValue: {
@@ -240,15 +243,12 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             onDelete: {
                 type: import('vue').PropType<(id: string) => void>;
             };
-            onSubmit: {
-                type: import('vue').PropType<(data: any) => void>;
-            };
             status: {
                 type: import('vue').PropType<import('../components/form/BglForm.vue').FormStatus>;
             };
         }>> & {
-            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onSubmit?: ((...args: any[]) => any) | undefined;
+            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onDirty?: ((...args: any[]) => any) | undefined;
         }, {
             submit: () => void;
@@ -265,10 +265,13 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
                 type: import('vue').PropType<import('..').BglFormSchemaFnT<any>>;
                 required: true;
             };
-            id: {
+            label: {
                 type: import('vue').PropType<string>;
             };
-            label: {
+            onSubmit: {
+                type: import('vue').PropType<(data: any) => void>;
+            };
+            id: {
                 type: import('vue').PropType<string>;
             };
             modelValue: {
@@ -278,15 +281,12 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             onDelete: {
                 type: import('vue').PropType<(id: string) => void>;
             };
-            onSubmit: {
-                type: import('vue').PropType<(data: any) => void>;
-            };
             status: {
                 type: import('vue').PropType<import('../components/form/BglForm.vue').FormStatus>;
             };
         }>> & {
-            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onSubmit?: ((...args: any[]) => any) | undefined;
+            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onDirty?: ((...args: any[]) => any) | undefined;
         }, {
             modelValue: Record<string, any>;
@@ -302,10 +302,13 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
                 type: import('vue').PropType<import('..').BglFormSchemaFnT<any>>;
                 required: true;
             };
-            id: {
+            label: {
                 type: import('vue').PropType<string>;
             };
-            label: {
+            onSubmit: {
+                type: import('vue').PropType<(data: any) => void>;
+            };
+            id: {
                 type: import('vue').PropType<string>;
             };
             modelValue: {
@@ -315,15 +318,12 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             onDelete: {
                 type: import('vue').PropType<(id: string) => void>;
             };
-            onSubmit: {
-                type: import('vue').PropType<(data: any) => void>;
-            };
             status: {
                 type: import('vue').PropType<import('../components/form/BglForm.vue').FormStatus>;
             };
         }>> & {
-            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onSubmit?: ((...args: any[]) => any) | undefined;
+            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onDirty?: ((...args: any[]) => any) | undefined;
         }, {
             submit: () => void;
@@ -342,10 +342,13 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             type: import('vue').PropType<import('..').BglFormSchemaFnT<any>>;
             required: true;
         };
-        id: {
+        label: {
             type: import('vue').PropType<string>;
         };
-        label: {
+        onSubmit: {
+            type: import('vue').PropType<(data: any) => void>;
+        };
+        id: {
             type: import('vue').PropType<string>;
         };
         modelValue: {
@@ -355,15 +358,12 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
         onDelete: {
             type: import('vue').PropType<(id: string) => void>;
         };
-        onSubmit: {
-            type: import('vue').PropType<(data: any) => void>;
-        };
         status: {
             type: import('vue').PropType<import('../components/form/BglForm.vue').FormStatus>;
         };
     }>> & {
-        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
         onSubmit?: ((...args: any[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
         onDirty?: ((...args: any[]) => any) | undefined;
     }, {
         submit: () => void;

package/dist/utils/objects.d.ts

@@ -1,5 +1,4 @@
 import { BagelField } from '..';
-
 export declare function getPropByPath(obj: Record<string, any>, propPath?: string, bagelField?: BagelField): {};
 export declare function setPropByPath(obj: Record<string, any>, path?: string, value?: any): void;
 //# sourceMappingURL=objects.d.ts.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.714",
+  "version": "0.0.724",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/form/inputs/RichText2/Toolbar.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { Btn, type MaterialIcons } from '@bagelink/vue'
+import SelectInput from '../SelectInput.vue'
 import type { ToolbarConfig, ToolbarConfigOption } from './richtext-types'
 
 defineProps<{ config: ToolbarConfig }>()
@@ -9,33 +10,26 @@ const colorPicker = $ref<HTMLInputElement | null>(null)
 const fontSizeInput = $ref<HTMLInputElement | null>(null)
 
 interface toolbarOption {
-	name: ToolbarConfigOption
+	name: ToolbarConfigOption | 'separator'
 	icon: MaterialIcons
 }
 
 const toolbarOptions: toolbarOption[] = [
+	{ name: 'separator' },
 	{ name: 'bold', icon: 'format_bold' },
 	{ name: 'italic', icon: 'format_italic' },
 	{ name: 'underline', icon: 'format_underlined' },
-	{ name: 'fontSize', icon: 'format_size' },
-	{ name: 'fontFamily', icon: 'font_download' },
-	{ name: 'textColor', icon: 'text_format' },
-	{ name: 'backgroundColor', icon: 'format_color_fill' },
-	{ name: 'alignLeft', icon: 'format_align_left' },
-	{ name: 'alignCenter', icon: 'format_align_center' },
-	{ name: 'alignRight', icon: 'format_align_right' },
-	{ name: 'alignJustify', icon: 'format_align_justify' },
+	{ name: 'separator' },
 	{ name: 'orderedList', icon: 'format_list_numbered' },
 	{ name: 'unorderedList', icon: 'format_list_bulleted' },
-	{ name: 'indent', icon: 'format_indent_increase' },
-	{ name: 'outdent', icon: 'format_indent_decrease' },
-	{ name: 'link', icon: 'link' },
-	{ name: 'image', icon: 'image' },
-	{ name: 'table', icon: 'table_chart' },
-	{ name: 'blockquote', icon: 'format_quote' },
-	{ name: 'codeBlock', icon: 'code' },
-	{ name: 'splitView', icon: 'splitscreen_right' },
-	{ name: 'codeView', icon: 'code' },
+	{ name: 'separator' },
+	{ name: 'link', icon: 'add_link' },
+	{ name: 'image', icon: 'add_photo_alternate' },
+	{ name: 'youtube', icon: 'youtube_activity' },
+	{ name: 'separator' },
+	{ name: 'splitView', icon: 'code' },
+	{ name: 'clear', icon: 'format_clear' },
+
 ]
 
 function handleColorPick(type: 'textColor' | 'backgroundColor') {
@@ -51,57 +45,40 @@ function handleFontSizeChange() {
 		emit('action', 'fontSize', size)
 	}
 }
+function handleSelectChange(selectedOption: string) {
+	emit('action', 'formatBlock', selectedOption)
+}
 </script>
 
 <template>
-	<div class="toolbar" role="toolbar">
-		<Btn
-			v-for="action in toolbarOptions.filter(t => config.includes(t.name))"
-			:key="action.name"
-			v-tooltip="action.name"
-			thin
-			color="light"
-			:aria-label="action.name"
-			:icon="action.icon"
-			@click="emit('action', action.name)"
+	<div class="toolbar flex gap-025 pb-05 flex-wrap" role="toolbar">
+		<SelectInput
+			class="m-0 w150"
+			:options="['Text', 'Heading 1', 'Heading 2', 'Heading 3', 'Heading 4', 'Heading 5', 'Heading 6', 'Blockquote', 'Code']"
+			@change="handleSelectChange"
 		/>
-		<input
-			v-if="config.includes('textColor') || config.includes('backgroundColor')"
-			ref="colorPicker"
-			type="color"
-			@change="handleColorPick(config.includes('textColor') ? 'textColor' : 'backgroundColor')"
-		>
-		<input
-			v-if="config.includes('fontSize')"
-			ref="fontSizeInput"
-			type="number"
-			min="1"
-			max="7"
-			@change="handleFontSizeChange"
-		>
+
+		<template v-for="(action, index) in toolbarOptions">
+			<Btn
+				v-if="action.name !== 'separator' && config.includes(action.name)"
+				:key="action.name"
+				v-tooltip="action.name"
+				thin
+				flat
+				class="rounded"
+				:aria-label="action.name"
+				:icon="action.icon"
+				@click="emit('action', action.name)"
+			/>
+			<span
+				v-if="action.name === 'separator'"
+				:key="`separator-${index}`"
+				class=" opacity-2 mb-025"
+			>|</span>
+		</template>
 	</div>
 </template>
 
 <style scoped>
-.toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 5px;
-  padding: 10px;
-  background-color: #f0f0f0;
-  border-bottom: 1px solid #ccc;
-}
 
-button:hover {
-  background-color: #e0e0e0;
-}
-
-input[type="color"],
-input[type="number"] {
-  width: 40px;
-  height: 30px;
-  padding: 0;
-  border: 1px solid #ccc;
-  border-radius: 3px;
-}
 </style>

package/src/components/form/inputs/RichText2/index.vue

@@ -30,7 +30,9 @@ const defaultConfig: ToolbarConfig = [
 	'blockquote',
 	'codeBlock',
 	'splitView',
-	'codeView'
+	'youtube',
+	'codeView',
+	'clear',
 ]
 const config = $ref<ToolbarConfig>(props.toolbarConfig || defaultConfig)
 let contentHtml = $ref(props.modelValue)
@@ -121,15 +123,16 @@ function handleKeyDown(event: KeyboardEvent) {
 </script>
 
 <template>
-	<div class="rich-text-editor">
+	<div class="rich-text-editor round pt-05 px-1 pb-1">
 		<Toolbar :config @action="handleToolbarAction" />
-		<div class="editor-container" :class="{ 'split-view': isSplitView }">
-			<div class="content-area" :class="{ 'code-view': isCodeView }">
+		<div class="editor-container flex flex-stretch" :class="{ 'split-view': isSplitView }">
+			<div class="content-area rounded p-1 bg-white shadow-light w-100 grid" :class="{ 'code-view': isCodeView }">
 				<textarea v-if="isCodeView" v-model="contentHtml" @input="updateContent" />
 				<div
 					v-else
 					ref="editableContent"
 					contenteditable="true"
+					class="editableContent"
 					role="textbox"
 					aria-multiline="true"
 					tabindex="0"
@@ -137,25 +140,60 @@ function handleKeyDown(event: KeyboardEvent) {
 					@keydown="handleKeyDown"
 				/>
 			</div>
-			<div v-if="isSplitView" class="preview-area" v-html="contentHtml" />
+			<code v-if="isSplitView" class="preview-area bg-black color-white  w-100 rounded p-1">{{ contentHtml }}</code>
 		</div>
 	</div>
 </template>
 
 <style scoped>
+@font-face {
+    font-family: 'FontWithASyntaxHighlighter';
+    font-style: normal;
+    font-weight: 400;
+    font-stretch: 100%;
+    font-display: swap;
+    src: url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/FontWithASyntaxHighlighter-Regular.woff2) format('woff2')
+}
+
+@font-palette-values --myCustomPalette {
+  font-family: 'FontWithASyntaxHighlighter';
+  override-colors:
+    0 #6191c2, /* keywords, {} */
+    1 #75975d, /* comments */
+    2 yellow, /* literals */
+    3 #a3c19a, /* numbers */
+    4 blue, /* functions, [] */
+    5 orange, /* js others */
+    6 black, /* not in use */
+    7 #bc8abd, /* inside quotes, css properties, few chars */
+    8 #818181 /* few chars */
+  ;
+}
+.preview-area{
+	font-family: "FontWithASyntaxHighlighter", monospace;
+  	font-palette: --myCustomPalette;
+}
 .rich-text-editor {
-  font-family: Arial, sans-serif;
-  max-width: 800px;
-  margin: 0 auto;
+	background: var(--input-bg);
+	margin-bottom: 0.5rem;
+	width: 100%;
+}
+.editableContent{
+	min-height: 100%;
+	white-space: pre-wrap;
+	outline: none;
+}
+.content-area, .preview-area{
+	min-height: 200px;
 }
 
-[contenteditable='true'] {
-  	white-space: pre-wrap;
-  	word-wrap: break-word;
+/* [contenteditable='true'] {
+	  white-space: pre-wrap;
+	  word-wrap: break-word;
 	outline: none;
-	border: none;
 	height: 100%;
-}
+} */
+/*
 
 .editor-container {
   display: flex;
@@ -184,9 +222,9 @@ function handleKeyDown(event: KeyboardEvent) {
 .preview-area {
   background-color: #f9f9f9;
   border-left: 1px solid #ccc;
-}
+} */
 
-@media (max-width: 768px) {
+/* @media (max-width: 768px) {
   .split-view {
     flex-direction: column;
   }
@@ -200,5 +238,5 @@ function handleKeyDown(event: KeyboardEvent) {
     border-left: none;
     border-top: 1px solid #ccc;
   }
-}
+} */
 </style>

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

@@ -203,9 +203,10 @@ onMounted(() => {
 
 					<div v-if="clearable && selectedItemCount > 0" class="ms-auto ps-05 me-05">
 						<Btn
+							flat
 							thin
 							icon="clear"
-							class="color-primary bg-gray-20"
+							class="color-gray"
 							@click="selectedItems = []; emitUpdate()"
 						/>
 					</div>
@@ -238,7 +239,7 @@ onMounted(() => {
 					placeholder="Search"
 					icon="search"
 				/>
-				<div class="selectinput-options">
+				<div class="selectinput-options" :class="{ multiselect }">
 					<div
 						v-for="(option, i) in filteredOptions"
 						:key="`${option}${i}`"
@@ -250,12 +251,14 @@ onMounted(() => {
 						@click="select(option)"
 						@keydown.enter="select(option)"
 					>
-						<Icon v-if="isSelected(option)" icon="check" />
-						<Icon
-							v-if="!isSelected(option)"
-							class="opacity-3"
-							icon="fiber_manual_record"
-						/>
+						<template v-if="multiselect">
+							<Icon v-if="isSelected(option)" icon="select_check_box" />
+							<Icon
+								v-if="!isSelected(option)"
+								class="opacity-3"
+								icon="check_box_outline_blank"
+							/>
+						</template>
 						<span>
 							{{ getLabel(option) }}
 						</span>
@@ -278,10 +281,15 @@ onMounted(() => {
 	border-radius: 5px;
 	transition: all 0.2s;
 	display: grid;
-	grid-template-columns: 10px 1fr;
+	grid-template-columns:1fr;
 	justify-content: space-between;
 	width: 100%;
 	font-size: var(--input-font-size);
+	margin-block: 0.15rem;
+}
+.selectinput-options.multiselect .selectinput-option {
+	grid-template-columns: 10px 1fr;
+
 }
 
 .selectinput-options {
@@ -295,6 +303,9 @@ onMounted(() => {
 .isEmpty p {
 	opacity: 0.3;
 }
+.selected{
+	background: var(--input-bg);
+}
 </style>
 
 <style>