@bagelink/vue 0.0.544 → 0.0.552

package/dist/types/BagelForm.d.ts

@@ -5,6 +5,10 @@ export type AttributeFn<T = Record<string, any>> = (field: any, row: T) => Attri
 export interface Attributes<T = any> {
     [key: string]: AttributeValue | AttributeFn<T>;
 }
+export type BagelFieldOptions = (string | ({
+    label?: string;
+    value: string | number;
+} | string | number | Record<string, any>)[] | ((val: any, rowData?: Record<string, any>) => void));
 export interface BaseBagelField<T = Record<string, any>> {
     '$el'?: any;
     'id'?: string;
@@ -16,10 +20,7 @@ export interface BaseBagelField<T = Record<string, any>> {
     'required'?: boolean;
     'disabled'?: boolean;
     'helptext'?: string;
-    'options'?: string | ({
-        label?: string;
-        value: string | number;
-    } | string | number | Record<string, any>)[] | ((val: any, rowData?: Record<string, any>) => void);
+    'options'?: BagelFieldOptions;
     'defaultValue'?: any;
     'transform'?: (val?: any, rowData?: Record<string, any>) => any;
     'onUpdate'?: (val: any, rowData?: Record<string, any>) => void;

package/dist/types/BagelForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BagelForm.d.ts","sourceRoot":"","sources":["../../src/types/BagelForm.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"BagelForm.d.ts","sourceRoot":"","sources":["../../src/types/BagelForm.ts"],"names":[],"mappings":"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"}

package/package.json

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

package/src/components/Btn.vue

@@ -207,7 +207,7 @@ a {
 
 .bgl_btn.bgl_flatBtn:active,
 .bgl_btn-icon.bgl_flatBtn:active {
-  background: var(--bgl-gray);
+  background: var(--bgl-gray-40);
   filter: var(--bgl-hover-filter);
 }
 

package/src/components/DataPreview.vue

@@ -15,12 +15,12 @@ const props = defineProps<{
 
 const itemData = defineModel<Record<string, any>>('data', { default: {} })
 const computedSchema = $computed(() => {
-	console.log(itemData.value)
+	// console.log(itemData.value)
 	const schema = Object.keys(itemData.value)
 	if (props.showFields && props.showFields.length) {
 		return schema.filter((field: any) => props.showFields?.includes(field))
 	}
-	console.log(schema)
+	// console.log(schema)
 	return schema
 })
 </script>
@@ -33,7 +33,7 @@ const computedSchema = $computed(() => {
 				<div class="key">
 					{{ field?.label || keyToLabel(field.id) }}
 				</div>
-				<BglField v-model="itemData" label="" style="width: min-content; min-width: 140px" :field="field" />
+				<BglField v-model="itemData" label="" style="width: min-content; min-width: 140px" :field />
 			</div>
 		</template>
 		<div v-if="!schema?.length">

package/src/components/TableSchema.vue

@@ -1,28 +1,28 @@
 <script setup lang="ts">
-import { useSlots } from 'vue'
 import {
 	BglField,
 	type BglFormSchemaT,
 	MaterialIcon,
 	keyToLabel,
 } from '@bagelink/vue'
+import { useSlots } from 'vue'
 
 const props = defineProps<{
-	selecteItems?: string[]
+	selectedItems?: string[]
 	data: any[]
 	schema?: BglFormSchemaT | (() => BglFormSchemaT)
 	showFields?: string[]
 }>()
-const emit = defineEmits(['update:selecteItems', 'orderBy', 'select'])
+const emit = defineEmits(['update:selectedItems', 'orderBy', 'select'])
 const slots = useSlots()
 const loading = $ref(true)
 
-let selecteItems = $ref<string[]>(props.selecteItems || [])
+let selectedItems = $ref<string[]>(props.selectedItems || [])
 let selected = $computed({
-	get: () => selecteItems,
+	get: () => selectedItems,
 	set: (value: string[]) => {
-		selecteItems = value
-		emit('update:selecteItems', value)
+		selectedItems = value
+		emit('update:selectedItems', value)
 	},
 })
 
@@ -160,13 +160,13 @@ function sort(fieldname: string) {
 						<slot
 							v-if="field.id && slots[field.id]"
 							:name="field.id"
-							:row="row"
-							:field="field"
+							:row
+							:field
 						/>
 						<div v-else>
 							<BglField
 								class="embedded-field"
-								:field="field"
+								:field
 								:modelValue="row"
 								label=""
 							/>

package/src/components/form/BglField.vue

@@ -49,7 +49,7 @@ const fieldData = $computed({
 	},
 	get: () => {
 		if (props.field.id) return props.modelValue[props.field.id]
-		return props.field.defaultValue || ''
+		return props.field.defaultValue ?? ''
 	},
 })
 
@@ -62,6 +62,23 @@ const vIf = $computed(() => {
 	}
 	return true
 })
+
+const badTransform = /undefined|NaN|Invalid Date/
+const computedFieldData = $computed(
+	() => {
+		// region AVOID_TRANSFORMING_DATA_MULTIPLE_TIMES
+		// const alreadyTransformed = props.modelValue[props.field.id ?? ''] === fieldData
+		// if (alreadyTransformed) return fieldData
+		// return props.field.transform?.(fieldData, props.modelValue)
+		// endregion AVOID_TRANSFORMING_DATA_MULTIPLE_TIMES
+
+		// region CHECK_FOR_BAD_TRANSFORMS
+		const transformedData = props.field.transform?.(fieldData, props.modelValue)
+		if (badTransform.test(transformedData)) return fieldData
+		return transformedData
+		// endregion CHECK_FOR_BAD_TRANSFORMS
+	}
+)
 </script>
 
 <template>
@@ -83,7 +100,7 @@ const vIf = $computed(() => {
 		:helptext="field.helptext"
 		@update:modelValue="($event: any) => field?.onUpdate?.($event, formData)"
 	>
-		{{ field.transform?.(fieldData, modelValue) || fieldData || '' }}
+		{{ computedFieldData }}
 		<BglField
 			v-for="(child, ii) in field.children"
 			:key="child.id || ii"

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

@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+import { Btn, type MaterialIcons } from '@bagelink/vue'
+import type { ToolbarConfig, ToolbarConfigOption } from './richtext-types'
+
+defineProps<{ config: ToolbarConfig }>()
+const emit = defineEmits(['action'])
+
+const colorPicker = $ref<HTMLInputElement | null>(null)
+const fontSizeInput = $ref<HTMLInputElement | null>(null)
+
+interface toolbarOption {
+	name: ToolbarConfigOption
+	icon: MaterialIcons
+}
+const toolbarOptions: toolbarOption[] = [
+	{ 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: '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' },
+]
+
+function handleColorPick(type: 'textColor' | 'backgroundColor') {
+	const color = colorPicker?.value
+	if (color) {
+		emit('action', type, color)
+	}
+}
+
+function handleFontSizeChange() {
+	const size = fontSizeInput?.value
+	if (size) {
+		emit('action', 'fontSize', size)
+	}
+}
+</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)"
+		/>
+		<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"
+		>
+	</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/formatting.ts

@@ -0,0 +1,194 @@
+export function applyFormatting(command: string, value: string = '') {
+	const selection = window.getSelection()
+	if (selection && selection.rangeCount > 0) {
+		const range = selection.getRangeAt(0)
+		const span = document.createElement('span')
+
+		switch (command) {
+			case 'bold':
+				span.style.fontWeight = 'bold'
+				break
+			case 'italic':
+				span.style.fontStyle = 'italic'
+				break
+			case 'underline':
+				span.style.textDecoration = 'underline'
+				break
+			case 'strikeThrough':
+				span.style.textDecoration = 'line-through'
+				break
+			case 'fontSize':
+				span.style.fontSize = value
+				break
+			case 'foreColor':
+				span.style.color = value
+				break
+			case 'backColor':
+				span.style.backgroundColor = value
+				break
+			case 'justifyLeft':
+				span.style.textAlign = 'left'
+				break
+			case 'justifyCenter':
+				span.style.textAlign = 'center'
+				break
+			case 'justifyRight':
+				span.style.textAlign = 'right'
+				break
+			case 'justifyFull':
+				span.style.textAlign = 'justify'
+				break
+			case 'insertOrderedList':
+				insertList('ol')
+				return
+			case 'insertUnorderedList':
+				insertList('ul')
+				return
+			case 'indent':
+				span.style.marginLeft = '40px'
+				break
+			case 'outdent':
+				span.style.marginLeft = '-40px'
+				break
+			case 'removeFormatting':
+				removeFormatting()
+				break
+			case 'insertHorizontalRule':
+				insertHorizontalRule()
+				break
+			case 'subscript':
+				span.style.verticalAlign = 'sub'
+				break
+			case 'superscript':
+				span.style.verticalAlign = 'super'
+				break
+			case 'fontName':
+				span.style.fontFamily = value
+				break
+			case 'increaseFontSize':
+				increaseFontSize()
+				break
+			case 'decreaseFontSize':
+				decreaseFontSize()
+				break
+			case 'insertLink':
+				insertLink()
+				break
+			case 'insertImage':
+				insertImage()
+				break
+			case 'createTable':
+				createTable()
+				break
+			default:
+				console.warn(`Command ${command} is not supported`)
+				return
+		}
+
+		range.surroundContents(span)
+	}
+}
+
+function increaseFontSize() {
+	const selection = window.getSelection()
+	if (selection && selection.rangeCount > 0) {
+		const range = selection.getRangeAt(0)
+		const span = document.createElement('span')
+		const currentFontSize = Number.parseInt((range.startContainer.parentNode as HTMLElement).style.fontSize || '16', 10)
+		const newFontSize = currentFontSize + 2
+		span.style.fontSize = `${newFontSize}px`
+		range.surroundContents(span)
+	}
+}
+
+function decreaseFontSize() {
+
+}
+
+function removeFormatting() {
+	const selection = window.getSelection()
+	if (selection && selection.rangeCount > 0) {
+		const range = selection.getRangeAt(0)
+		const span = document.createElement('span')
+		span.textContent = range.toString()
+		range.deleteContents()
+		range.insertNode(span)
+	}
+}
+
+function insertHorizontalRule() {
+	const selection = window.getSelection()
+	if (selection && selection.rangeCount > 0) {
+		const range = selection.getRangeAt(0)
+		const hr = document.createElement('hr')
+		range.deleteContents()
+		range.insertNode(hr)
+	}
+}
+
+function insertList(type: string) {
+	const selection = window.getSelection()
+	if (selection && selection.rangeCount > 0) {
+		const range = selection.getRangeAt(0)
+		const list = document.createElement(type)
+		const listItem = document.createElement('li')
+		listItem.textContent = range.toString()
+		list.appendChild(listItem)
+		range.deleteContents()
+		range.insertNode(list)
+	}
+}
+
+export function insertLink() {
+	const url = prompt('Enter the URL:')
+	if (url) {
+		const selection = window.getSelection()
+		if (selection && selection.rangeCount > 0) {
+			const range = selection.getRangeAt(0)
+			const anchor = document.createElement('a')
+			anchor.href = url
+			range.surroundContents(anchor)
+		}
+	}
+}
+
+export function insertImage() {
+	const url = prompt('Enter the image URL:')
+	if (url) {
+		const selection = window.getSelection()
+		if (selection && selection.rangeCount > 0) {
+			const range = selection.getRangeAt(0)
+			const img = document.createElement('img')
+			img.src = url
+			range.deleteContents()
+			range.insertNode(img)
+		}
+	}
+}
+
+export function createTable() {
+	const rows = prompt('Enter the number of rows:')
+	const cols = prompt('Enter the number of columns:')
+	if (rows && cols) {
+		const table = document.createElement('table')
+		table.style.border = '1px solid black'
+		table.style.borderCollapse = 'collapse'
+
+		for (let i = 0; i < Number.parseInt(rows); i++) {
+			const row = table.insertRow()
+			for (let j = 0; j < Number.parseInt(cols); j++) {
+				const cell = row.insertCell()
+				cell.style.border = '1px solid black'
+				cell.style.padding = '5px'
+				cell.textContent = `Cell ${i + 1},${j + 1}`
+			}
+		}
+
+		const selection = window.getSelection()
+		if (selection && selection.rangeCount > 0) {
+			const range = selection.getRangeAt(0)
+			range.deleteContents()
+			range.insertNode(table)
+		}
+	}
+}

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

@@ -0,0 +1,204 @@
+<script lang="ts" setup>
+import { onMounted, watch } from 'vue'
+import Toolbar from './Toolbar.vue'
+import type { ToolbarConfig } from './richtext-types'
+import { applyFormatting } from './formatting'
+
+const props = defineProps<{ modelValue: string, toolbarConfig?: ToolbarConfig }>()
+const emit = defineEmits(['update:modelValue'])
+
+const editableContent = $ref<HTMLElement | null>(null)
+const defaultConfig: ToolbarConfig = [
+	'bold',
+	'italic',
+	'underline',
+	'fontSize',
+	'fontFamily',
+	'textColor',
+	'backgroundColor',
+	'alignLeft',
+	'alignCenter',
+	'alignRight',
+	'alignJustify',
+	'orderedList',
+	'unorderedList',
+	'indent',
+	'outdent',
+	'link',
+	'image',
+	'table',
+	'blockquote',
+	'codeBlock',
+	'splitView',
+	'codeView'
+]
+const config = $ref<ToolbarConfig>(props.toolbarConfig || defaultConfig)
+let contentHtml = $ref(props.modelValue)
+let isCodeView = $ref(false)
+let isSplitView = $ref(false)
+
+function updateContent() {
+	if (!isCodeView) {
+		contentHtml = editableContent?.innerHTML ?? ''
+	}
+	emit('update:modelValue', contentHtml)
+}
+
+function handleToolbarAction(action: string, value?: string) {
+	if (!editableContent) return
+	if (['alignLeft', 'alignCenter', 'alignRight', 'alignJustify'].includes(action))
+		value = action.replace('align', '').toLowerCase()
+	switch (action) {
+		case 'orderedList':
+			applyFormatting('insertOrderedList')
+			break
+		case 'unorderedList':
+			applyFormatting('insertUnorderedList')
+			break
+		case 'blockquote':
+			applyFormatting('formatBlock', '<blockquote>')
+			break
+		case 'codeBlock':
+			applyFormatting('formatBlock', '<pre>')
+			break
+		case 'splitView':
+			isSplitView = !isSplitView
+			break
+		case 'codeView':
+			isCodeView = !isCodeView
+			break
+		default:
+			applyFormatting(action, value)
+			break
+	}
+	updateContent()
+}
+
+watch(() => props.modelValue, (newValue) => {
+	if (newValue !== contentHtml) {
+		contentHtml = newValue
+		if (editableContent) {
+			editableContent.innerHTML = newValue
+		}
+	}
+})
+
+onMounted(() => {
+	if (editableContent) {
+		editableContent.innerHTML = contentHtml
+	}
+})
+
+// Keyboard shortcuts
+function handleKeyDown(event: KeyboardEvent) {
+	if (event.ctrlKey || event.metaKey) {
+		switch (event.key.toLowerCase()) {
+			case 'b':
+				event.preventDefault()
+				handleToolbarAction('bold')
+				break
+			case 'i':
+				event.preventDefault()
+				handleToolbarAction('italic')
+				break
+			case 'u':
+				event.preventDefault()
+				handleToolbarAction('underline')
+				break
+			case 'k':
+				event.preventDefault()
+				handleToolbarAction('link')
+				break
+			case 'l':
+				event.preventDefault()
+				handleToolbarAction('orderedList')
+				break
+			default:
+				break
+		}
+	}
+}
+</script>
+
+<template>
+	<div class="rich-text-editor">
+		<Toolbar :config @action="handleToolbarAction" />
+		<div class="editor-container" :class="{ 'split-view': isSplitView }">
+			<div class="content-area" :class="{ 'code-view': isCodeView }">
+				<textarea v-if="isCodeView" v-model="contentHtml" @input="updateContent" />
+				<div
+					v-else
+					ref="editableContent"
+					contenteditable="true"
+					role="textbox"
+					aria-multiline="true"
+					tabindex="0"
+					@input="updateContent"
+					@keydown="handleKeyDown"
+				/>
+			</div>
+			<div v-if="isSplitView" class="preview-area" v-html="contentHtml" />
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.rich-text-editor {
+  font-family: Arial, sans-serif;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+[contenteditable='true'] {
+  	white-space: pre-wrap;
+  	word-wrap: break-word;
+	outline: none;
+	border: none;
+	height: 100%;
+}
+
+.editor-container {
+  display: flex;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.content-area,
+.preview-area {
+  flex: 1;
+  min-height: 300px;
+  padding: 10px;
+  overflow-y: auto;
+}
+
+.content-area:focus {
+  outline: none;
+}
+
+.split-view .content-area,
+.split-view .preview-area {
+  width: 50%;
+}
+
+.preview-area {
+  background-color: #f9f9f9;
+  border-left: 1px solid #ccc;
+}
+
+@media (max-width: 768px) {
+  .split-view {
+    flex-direction: column;
+  }
+
+  .split-view .content-area,
+  .split-view .preview-area {
+    width: 100%;
+  }
+
+  .preview-area {
+    border-left: none;
+    border-top: 1px solid #ccc;
+  }
+}
+</style>