@bagelink/vue 0.0.170 → 0.0.182

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

@@ -1,36 +1,39 @@
 <template>
-  <label class="primary-checkbox">
-    <input type="checkbox" v-model="val" />
-    <span>
-      <MaterialIcon icon="check" />
-    </span>
-  </label>
+	<label class="primary-checkbox">
+		<input type="checkbox" v-model="val" >
+		<span>
+			<MaterialIcon icon="check" />
+		</span>
+	</label>
 </template>
 
 <script setup lang="ts">
-import { watch } from "vue";
-import { MaterialIcon } from "@bagelink/vue";
+import { watch } from 'vue';
+import { MaterialIcon } from '@bagelink/vue';
 
 const props = defineProps({
-  modelValue: Boolean,
+	modelValue: Boolean,
 });
 
-const emits = defineEmits(["update:modelValue"]);
+const emits = defineEmits(['update:modelValue']);
 
 let val = $ref<boolean>();
 
 watch(
-  () => props.modelValue,
-  (v: boolean) => {
-    if (v === undefined || v === val) return;
-    val = v;
-  },
-  { immediate: true }
+	() => props.modelValue,
+	(v: boolean) => {
+		if (v === undefined || v === val) return;
+		console.log('v', v);
+		val = v;
+	},
+	{ immediate: true },
 );
 
 watch(
-  () => val,
-  (v) => emits("update:modelValue", v)
+	() => val,
+	(v) => {
+		if (v !== props.modelValue) emits('update:modelValue', v);
+	},
 );
 </script>
 

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

@@ -1,7 +1,7 @@
 <template>
 	<div
 		class="bagel-input"
-		:class="{ small }"
+		:class="{ small, shrink, toggleEdit, editMode }"
 		:title="title"
 	>
 		<label :for="id">
@@ -9,20 +9,28 @@
 			<input
 				:id="id"
 				v-model="inputVal"
-				type="text"
+				:type="type"
+				ref="input"
 				:placeholder="placeholder || label"
-				:class="{ 'no-edit': !editMode }"
+				:disabled="!editMode"
 				:required="required"
 				:pattern="pattern"
 				v-bind="nativeInputAttrs"
+				@dblclick="toggleEditAction"
+				@keydown.enter="toggleEditAction"
 			>
 		</label>
+		<Btn
+			class="toggleEditBtn"
+			v-if="toggleEdit" thin @click="toggleEditAction" :icon="editMode?'check':'edit'"
+			flat
+		/>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { watch } from 'vue';
-import { debounce } from '@bagelink/vue';
+import { debounce, Btn } from '@bagelink/vue';
 
 const emit = defineEmits(['update:modelValue', 'debounce']);
 const props = withDefaults(
@@ -30,24 +38,43 @@ const props = withDefaults(
 		id?: string;
 		title?: string;
 		placeholder?: string;
-		modelValue?: string;
+		modelValue?: string | number;
 		label?: string;
-		editMode?: boolean;
 		small?: boolean;
 		required?: boolean;
 		pattern?: string;
+		shrink?: boolean;
+		toggleEdit?: boolean;
+		type?: string;
 		nativeInputAttrs?: Record<string, any>;
 	}>(),
 	{
-		editMode: true,
+		type: 'text',
+		toggleEdit: false,
 		modelValue: '',
 	},
 );
-let inputVal = $ref<string>();
+let inputVal = $ref<string|number>();
+let editMode = $ref<boolean>(!props.toggleEdit);
+
+const input = $ref<HTMLInputElement>();
+
+const toggleEditAction = () => {
+	if (editMode) {
+		editMode = false;
+		emit('debounce', inputVal);
+		emit('update:modelValue', inputVal as string);
+	} else {
+		editMode = true;
+		setTimeout(() => input?.focus(), 10);
+	}
+};
 
 watch(
 	() => inputVal,
 	(newVal) => {
+		if (props.toggleEdit) return;
+		if (newVal === props.modelValue) return;
 		emit('update:modelValue', newVal as string);
 		debounce(() => emit('debounce', newVal));
 	},
@@ -61,3 +88,38 @@ watch(
 	{ immediate: true },
 );
 </script>
+
+<style>
+.bagel-input.shrink, .bagel-input.shrink input{
+	min-width: unset !important;
+	/* width: auto; */
+}
+</style>
+
+<style scoped>
+.bagel-input input[disabled]{
+	background: none;
+}
+
+.bagel-input.toggleEdit:hover {
+	background-color: var(--input-bg);
+}
+.bagel-input.small{
+	margin-bottom:0;
+	height: 30px;
+}
+
+.toggleEditBtn{
+	position: absolute;
+	right: -24px;
+	top: 4;
+	opacity: 0;
+}
+.bagel-input:hover .toggleEditBtn, .bagel-input.editMode .toggleEditBtn{
+	opacity: 1;
+}
+
+.bagel-input.small input{
+	height: 30px;
+}
+</style>

package/src/components/formkit/FileUploader.vue

@@ -75,7 +75,7 @@
 			type="file"
 			@change="handleFileInput"
 			ref="fileInputEl"
-			:multiple="context?.attrs.multiple || false"
+			:multiple="computedMultiple"
 		>
 	</div>
 </template>
@@ -109,18 +109,21 @@ const props = withDefaults(
 		context: Record<string, any>;
 		dragDropLabel?: string;
 		browseLabel?: string;
+		multiple?: boolean;
 	}>(),
 	{
 		dragDropLabel: 'Drag and drop your files here',
 		browseLabel: 'or browse',
+		multiple: false,
 	},
 );
 
 const computedDragDropLabel = $computed(() => props?.context?.attrs?.dragDropLabel || props?.dragDropLabel);
 const computedDrowseLabel = $computed(() => props?.context?.attrs?.browseLabel || props?.browseLabel);
+const computedMultiple = $computed(() => !!(props?.context?.attrs?.multiple || props?.multiple));
 
 const allowUpload = $computed(() => {
-	const tooManyFiles = !props.context?.attrs.multiple && files.length > 0;
+	const tooManyFiles = !computedMultiple && files.length > 0;
 	return !tooManyFiles;
 });
 
@@ -140,7 +143,7 @@ function animateCircle(e: DragEvent) {
 function emitValue() {
 	// const fileValues = files.map((f) => f.serverFile?.id);
 	// console.log({ files });
-	if (!props.context?.attrs.multiple) return props.context?.node.input(files[0].serverFile);
+	if (!computedMultiple) return props.context?.node.input(files[0].serverFile);
 	// eslint-disable-next-line no-alert
 	return alert('not implemented');
 }
@@ -199,7 +202,7 @@ async function addFiles(addedFiles: FileList) {
 
 onMounted(() => {
 	dropZoneEl?.addEventListener('dragover', animateCircle);
-	if (!props.context?.attrs.multiple && props.context?.value) {
+	if (!computedMultiple && props.context?.value) {
 		files.push({
 			serverFile: props.context?.value,
 			uploaded: true,