@bagelink/vue 0.0.712 → 0.0.716

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, watch } from 'vue'
-import { Btn, Icon, type StorageFile, useBagel } from '@bagelink/vue'
+import { Btn, IMAGE_FORMATS, IMAGE_FORMATS_REGEXP, Icon, type StorageFile, useBagel } from '@bagelink/vue'
 
 const props = defineProps<{
 	label?: string
@@ -9,7 +9,10 @@ const props = defineProps<{
 	bindkey?: StrKey
 	modelValue?: FSValue
 	width?: string
+	height?: string | 'auto'
 	topic?: string
+	fill?: boolean
+	oval?: boolean
 }>()
 
 const emit = defineEmits(['update:modelValue', 'addFileStart'])
@@ -30,6 +33,8 @@ type FSValue = string[] | string | number
 
 const bindKey: StrKey = props.bindkey || 'id'
 
+const isImage = (str: string) => IMAGE_FORMATS_REGEXP.test(str)
+
 let file_bindkeys = $ref<FSValue>(props.modelValue || [])
 const storageFiles = $ref<StorageFile[]>([])
 
@@ -174,25 +179,26 @@ function drop(e: DragEvent) {
 		<div
 			class="fileUploadWrap"
 			:class="{
-				fileDropZone: !storageFiles.length && !fileQueue.length,
-				dragover: isDragOver,
+				'fileDropZone': !storageFiles.length && !fileQueue.length,
+				'dragover': isDragOver,
+				'bgl_oval-upload': oval,
 			}"
+			:style="{ width: props.width, height: props.height || '215px' }"
 			@click="browse"
 			@dragover="dragover"
 			@drop="drop"
 			@dragleave="dragleave"
 		>
 			<slot name="files" :files="storageFiles" :fileQueue>
-				<template v-for="file in storageFiles" :key="file.id">
-					<div v-if="!multiple" class="single-image">
-						<img class="single preview" :src="file.url" alt="">
-						<!-- <p class="no-margin">
-						{{ file.name }}
-					</p> -->
-					</div>
-					<div v-if="multiple" class="multi-image-item previewName">
-						<img class="preview" :src="file.url" alt="">
-						<p class="no-margin">
+				<div v-if="multiple" class="bgl-multi-preview">
+					<div
+						v-for="file in storageFiles"
+						:key="file.id"
+						class="multi-image-item-preview"
+					>
+						<img v-if="isImage(file.extension || file.url)" class="multi-preview" :src="file.url" alt="">
+						<Icon v-else icon="draft" class="multi-preview" />
+						<p class="m-0">
 							{{ file.name }}
 						</p>
 						<Btn
@@ -203,20 +209,24 @@ function drop(e: DragEvent) {
 							@click.stop="removeFile(file)"
 						/>
 					</div>
-				</template>
-				<template v-for="fileQ in fileQueue" :key="fileQ.file">
-					<div v-if="!multiple" class="imagePreviewWrap">
-						<img class="preview" :src="fileToUrl(fileQ.file)" alt="">
-					</div>
-					<div class="previewName">
-						<img
-							v-if="multiple"
-							:width="width || '220'"
-							class="preview"
-							:src="fileToUrl(fileQ.file)"
-							alt=""
-						>
-						<p class="no-margin">
+					<div
+						v-for="fileQ in fileQueue"
+						:key="fileQ.file.name"
+						class="multi-image-item-preview"
+					>
+						<template v-if="isImage(fileQ.file.type)">
+							<img
+								v-if="multiple"
+								:width="width || '220'"
+								class="multi-preview"
+								:src="fileToUrl(fileQ.file)"
+								alt=""
+							>
+						</template>
+
+						<Icon v-else icon="draft" class="multi-preview" />
+
+						<p class="no-margin multi-preview-txt">
 							{{ fileQ.name }}
 						</p>
 						<div
@@ -231,7 +241,40 @@ function drop(e: DragEvent) {
 							<Icon class="success" icon="check" />
 						</div>
 					</div>
-				</template>
+				</div>
+
+				<div v-if="!multiple" class="bgl-single-preview">
+					<div
+						v-for="file in storageFiles"
+						:key="file.id"
+						class="single-image-item-preview"
+						:class="{ 'bgl_fill-image': fill }"
+					>
+						<img v-if="isImage(file.extension || file.url)" class="single-preview" :src="file.url" alt="">
+						<Icon v-else :size="4" weight="2" icon="draft" class="color-primary w-100" />
+					</div>
+
+					<div
+						v-for="fileQ in fileQueue"
+						:key="fileQ.file.name"
+						class="single-image-item-preview"
+						:class="{ 'bgl_fill-image': fill }"
+					>
+						<div
+							class="pie"
+							:style="`--p:${fileQ.progress}`"
+							style="--b: 2px"
+							:class="{ complete: fileQ.progress === 100 }"
+						>
+							<span v-if="fileQ.progress < 100" class="progress">
+								{{ `${fileQ.progress.toFixed(0)}` }}
+							</span>
+							<Icon class="success" icon="check" />
+						</div>
+						<img v-if="isImage(fileQ.file.type)" class="single-preview" :src="fileToUrl(fileQ.file)" alt="">
+						<!-- <Icon v-else :size="8" weight="2" icon="draft" class="color-primary" /> -->
+					</div>
+				</div>
 			</slot>
 			<slot
 				v-if="(!storageFiles.length && !fileQueue.length) || multiple"
@@ -240,85 +283,163 @@ function drop(e: DragEvent) {
 				:fileQueue
 				:browse
 			>
-				<p>Drop files here or click to upload</p>
+				<p class="p-1 flex column hover fileUploadPlaceHolder">
+					<Icon icon="upload_2" />
+					Drop files here or click to upload
+				</p>
 			</slot>
 		</div>
 	</div>
 </template>
 
 <style scoped>
-.bagel-input .fileUploadWrap {
-	--width: 320px;
+.fileUploadWrap {
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
 	text-align: center;
 	cursor: pointer;
 	transition: var(--bgl-transition);
 	position: relative;
-	height: calc(var(--width) / 1.5);
 	font-size: var(--input-font-size);
 	overflow-y: auto;
 	background: var(--input-bg);
+	height: 215px;
+}
+.bagel-input .fileUploadWrap.fileDropZone {
+	background: var(--input-bg);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--bgl-gray);
+	flex-direction: column;
+}
+
+.fileUploadWrap.dragover,
+.fileUploadWrap:hover {
+	box-shadow: inset 0 0 10px #00000012;
+}
+
+.fileUploadWrap[style*="height: auto;"] {
+	min-height: 215px;
 }
 
-.previewName {
-	padding: 0.5rem;
+.multi-image-item-preview {
+	border: 1px solid var(--border-color) !important;
+	border-radius: var(--input-border-radius);
+	margin: 0.5rem !important;
+	background: var(--bgl-white);
+	padding: 0;
+	padding-inline-end: 0.75rem;
 	text-align: start;
 	color: var(--input-color);
 	display: grid;
 	grid-template-columns: auto 1fr 22px;
 	gap: 1rem;
 	align-items: center;
-	padding-inline: 14px;
 }
-
-.previewName p {
+.multi-image-item-preview p {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-
-.imagePreviewWrap {
-	background: var(--input-bg);
-	border-radius: var(--input-border-radius);
-	padding: 5px;
-	min-height: 90px;
-}
-
-img.preview {
-	/* max-height: calc(var(--width) / 2); */
-	/* max-width: calc(var(--width) * 2); */
+.multi-preview{
 	width: 40px;
 	height: 40px;
 	border-radius: var(--input-border-radius);
 	object-fit: cover;
 	background: var(--bgl-gray-light);
-	box-shadow: 0 0 10px #00000012;
+	text-align: center !important;
+	justify-content: center;
+	align-items: center;
+	display: flex;
+}
+.bgl-single-preview{
+	height: 100%;
+	position: relative;
+}
+.bgl-single-preview + .fileUploadPlaceHolder{
+	position: absolute;
+	inset: 0;
+	margin: auto;
+	top: calc(50% - 2rem);
+}
+.single-image-item-preview {
+	height: 100%;
+	min-height: 100%;
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.fileUploadWrap[style*="height: auto"] .single-image-item-preview {
+	min-height: 215px;
 }
 
-img.preview.single {
-	max-width: var(--width);
-	width: calc(100% - 2.75rem);
-	object-fit: contain;
-	height: auto;
-	max-height: calc(var(--width) / 2);
+.fileUploadWrap[style*="height: auto"] .single-preview {
+	margin: 0rem !important;
+
+}
+.single-preview{
+	border-radius: var(--input-border-radius);
 	margin: 1rem;
+	padding: 0px;
+	min-height: calc(100% - 2rem);
+	height: calc(100% - 2rem);
+	object-fit: cover;
+	background: var(--bgl-gray-light);
+	box-shadow: 0 0 10px #00000012;
 }
-
-.fileUploadWrap.dragover,
-.fileUploadWrap:hover {
-	box-shadow: inset 0 0 10px #00000012;
+.bgl_fill-image.single-image-item-preview {
+	height: 100%;
+}
+.bgl_fill-image.single-image-item-preview .single-preview{
+	border-radius: unset;
+	object-fit: cover;
+	box-shadow: unset;
+	width: 100%;
+	height: auto;
 }
 
-.bagel-input .fileUploadWrap.fileDropZone {
-	background: var(--input-bg);
+.single-image-item-preview .pie {
+	transform-origin: top;
+	transform: scale(1.4);
+	position: absolute;
+	text-align: center;
+	inset: 0;
+	margin: auto;
 	display: flex;
-	align-items: center;
 	justify-content: center;
-	color: var(--bgl-gray);
-	flex-direction: column;
+	align-items: center;
+	background: transparent;
+	border: none !important;
+	padding: 0 !important;
 }
 
+.bgl_oval-upload {
+	border-radius: 100% !important;
+	overflow: hidden;
+	}
+.bgl_oval-upload p {
+		padding: 0.75rem !important;
+		font-size: 12px
+	}
+.bgl_oval-upload .fileUploadPlaceHolder{
+		top: 0;
+	}
+	.bgl_oval-upload .pie {
+		transform: scale(1);
+	}
+	.bgl_oval-upload span.bgl_icon-font.color-primary {
+		transform: scale(0.4) !important;
+	}
+	.bgl_oval-upload .single-image-item-preview{
+		height: 100%;
+	}
+	.bgl_oval-upload .single-preview {
+		margin: 0;
+		height: 100% !important;
+	}
+
 .pie {
 	width: 30px;
 	height: 30px;

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,40 @@ 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>
 .rich-text-editor {
-  font-family: Arial, sans-serif;
-  max-width: 800px;
-  margin: 0 auto;
+	background: var(--input-bg);
+	margin-bottom: 0.5rem;
+	width: 100%;
+	/* font-family: Arial, sans-serif; */
+	/* max-width: 800px; */
+	/* margin: 0 auto; */
 }
-
-[contenteditable='true'] {
-  	white-space: pre-wrap;
-  	word-wrap: break-word;
+.editableContent{
+	min-height: 100%;
+	white-space: pre-wrap;
+	outline: none;
+}
+/* [contenteditable='true'] {
+	  white-space: pre-wrap;
+	  word-wrap: break-word;
 	outline: none;
-	border: none;
 	height: 100%;
+} */
+.content-area{
+}
+.content-area, .preview-area{
+	min-height: 200px;
+
 }
+.preview-area{}
+
+/*
 
 .editor-container {
   display: flex;
@@ -184,9 +202,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 +218,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>

package/src/index.ts

@@ -12,4 +12,5 @@ export * from './types'
 export * from './composables'
 export * from './components'
 export * from './utils/allCountries'
+export * from './utils/constants'
 import './styles/bagel.css'