@bagelink/vue 0.0.1145 → 0.0.1147

package/package.json

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

package/src/components/form/FieldArray.vue

@@ -78,21 +78,22 @@ const computedField = $computed(
 			{{ label }}
 		</p>
 
-		<div v-if="schema" class="-ms-05 ps-05 border-start">
-			<div v-for="(_, i) in data" :key="i" outline thin class="mb-05 itemBox transition p-05">
+		<div v-if="schema" class="ps-025 border-start">
+			<div v-for="(_, i) in data" :key="i" outline thin class="mb-05 itemBox transition ps-05 pb-025 pt-025 radius-05 gap-05 overflow-hidden">
 				<BglForm v-model="data[i]" :schema="schema" @update:model-value="emitValue" />
-				<Btn
-					v-if="props.delete"
-					icon="delete"
-					value="Delete"
-					class="txt10 opacity-7 color-red"
-					thin
-					flat
-					@click="deleteItem(i)"
-				/>
+				<div class="bg-gray-80 -my-05 px-025 pt-065 txt-center">
+					<Btn
+						v-if="props.delete"
+						icon="delete"
+						class="txt10 opacity-7"
+						thin
+						flat
+						@click="deleteItem(i)"
+					/>
+				</div>
 			</div>
 			<Btn v-if="add" thin icon="add" color="gray" class="txt12" @click="addItem">
-				<p>Add {{ label }}</p>
+				<p>{{ label }}</p>
 			</Btn>
 		</div>
 		<template v-else>
@@ -103,9 +104,15 @@ const computedField = $computed(
 
 <style>
 .itemBox{
-	/* border-top: 2px solid var(--bgl-gray); */
-	/* border-bottom: 2px solid var(--bgl-gray); */
 	background: var(--input-bg);
+	grid-template-columns: 1fr auto;
+	display: grid;
+	--label-font-size: 0.6rem;
+	--input-height: 30px;
+	--input-font-size: 14px;
+}
+.pt-065{
+	padding-top: 0.65rem;
 }
 
 .itemBox .bagel-input input,
@@ -114,4 +121,7 @@ const computedField = $computed(
 .itemBox .custom-select .input {
 	background: var(--bgl-white) !important;
 }
+.itemBox .bagel-input{
+	margin-bottom: 0.15rem !important;
+}
 </style>

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

@@ -43,6 +43,9 @@ const {
 	accept?: string
 	required?: boolean
 	disabled?: boolean
+	dropPlaceholder?: string
+	noFilePlaceholder?: string
+	btnPlaceholder?: string
 }>()
 
 const emit = defineEmits(['update:modelValue', 'addFileStart'])
@@ -258,10 +261,9 @@ function drop(e: DragEvent) {
 				class="px-1-5"
 				icon="upload"
 				outline
+				:value="btnPlaceholder || 'Upload'"
 				@click="browse"
-			>
-				Upload
-			</Btn>
+			/>
 
 			<div
 				v-for="file in storageFiles"
@@ -304,7 +306,7 @@ function drop(e: DragEvent) {
 						<Icon icon="draft" :size="1.5" />
 						<p
 							v-lightbox="{ src: file.url, download: true }"
-							class="ellipsis-1 word-break-all h-20 m-0 color-black txt18"
+							class="ellipsis-1 word-break-all h-20 m-0 color-black txt16"
 						>
 							{{ file.name }}
 						</p>
@@ -323,7 +325,7 @@ function drop(e: DragEvent) {
 				v-if="!storageFiles.length && !fileQueue.length"
 				class="txt-gray txt-12"
 			>
-				No file selected
+				{{ noFilePlaceholder || 'No file selected' }}
 			</span>
 		</Card>
 		<div
@@ -493,7 +495,9 @@ function drop(e: DragEvent) {
 					class="p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05"
 				>
 					<Icon icon="upload_2" />
-					Drop files here or click to upload
+					<span class=" pretty balance">
+						{{ dropPlaceholder || 'Drag and Drop files here or click to upload' }}
+					</span>
 				</p>
 			</slot>
 		</div>

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

@@ -103,7 +103,9 @@ watch(() => modelValue, (newVal) => {
 		}"
 	>
 		<div :for="id">
-			{{ label }}
+			<label>
+				{{ label }}
+			</label>
 			<div class="gap-025" :class="{ 'column flex': layout === 'vertical', 'flex': layout === 'horizontal' }">
 				<Btn v-if="layout && btnLayouts.includes(layout)" flat icon="add" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" tabindex="-1" @click="increment" />
 

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

@@ -88,7 +88,7 @@ watch(() => editor.state.content, (newValue) => {
 <template>
 	<div class="bagel-input">
 		<label>{{ label }}</label>
-		<div class="rich-text-editor rounded pt-05 px-05 pb-075 mb-05" :class="{ 'fullscreen-mode': editor.state.isFullscreen }">
+		<div class="rich-text-editor rounded pt-05 px-05 pb-075" :class="{ 'fullscreen-mode': editor.state.isFullscreen }">
 			<EditorToolbar
 				v-if="editor.state.hasInit" :config="toolbarConfig" :selectedStyles="editor.state.selectedStyles"
 				@action="commands.execute"

package/src/components/form/inputs/Upload/UploadInput.vue

@@ -18,6 +18,10 @@ const props = withDefaults(defineProps<{
 	required?: boolean
 	disabled?: boolean
 	baseURL?: string
+	dropPlaceholder?: string
+	noFilePlaceholder?: string
+	btnPlaceholder?: string
+
 }>(), {
 	height: '215px',
 	theme: 'dropzone',
@@ -155,10 +159,9 @@ watch(() => props.dirPath, () => {
 				class="px-1-5"
 				icon="upload"
 				outline
+				:value="btnPlaceholder || 'Upload'"
 				@click="browse"
-			>
-				Upload
-			</Btn>
+			/>
 
 			<template v-for="path_key in pathKeys" :key="path_key">
 				<div class="txt-gray txt-12 flex">
@@ -188,7 +191,7 @@ watch(() => props.dirPath, () => {
 							<Icon icon="draft" :size="1.5" />
 							<p
 								v-lightbox="{ src: pathToUrl(path_key), download: true }"
-								class="ellipsis-1 word-break-all h-20 m-0 color-black txt18"
+								class="ellipsis-1 word-break-all h-20 m-0 color-black txt16"
 							>
 								{{ path_key.split('/').pop() }}
 							</p>
@@ -201,7 +204,7 @@ watch(() => props.dirPath, () => {
 				v-if="!pathKeys.length && !fileQueue.length"
 				class="txt-gray txt-12"
 			>
-				No file selected
+				{{ noFilePlaceholder || 'No file selected' }}
 			</span>
 		</Card>
 
@@ -363,9 +366,11 @@ watch(() => props.dirPath, () => {
 				:fileQueue
 				:browse
 			>
-				<p class="p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05">
+				<p class="p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05 ">
 					<Icon icon="upload_2" />
-					Drop files here or click to upload
+					<span class=" pretty balance">
+						{{ dropPlaceholder || 'Drag and Drop files here or click to upload' }}
+					</span>
 				</p>
 			</slot>
 		</div>