@bagelink/vue 0.0.172 → 0.0.182

package/src/components/DataPreview.vue

@@ -9,25 +9,34 @@
 		>
 			{{ title }}
 		</h3>
-		<div
+		<template
 			v-for="field in schema || []"
 			:key="field.id"
-			class="data-row"
 		>
-			<div class="key">
-				{{ field?.label || keyToLabel(field.id) }}
+			<div 	class="data-row" v-if="field['v-if'] ? field['v-if'](itemData[field.id], itemData) : true">
+				<div class="key">
+					{{ field?.label || keyToLabel(field.id) }}
+				</div>
+				<component
+					:is="field.$el || 'div'"
+					class="vlue"
+					v-model="itemData[field.id]"
+					@update:modelValue="($event:any)=>field?.onUpdate?.($event, data[field.id], itemData)"
+					v-bind="bindAttrs(field.attrs, itemData[field.id], itemData)"
+				>
+					{{
+						field?.transform?.(itemData[field.id]
+							|| field.defaultValue, itemData)
+							|| itemData[field.id]
+							|| ''
+					}}
+				</component>
 			</div>
-			<component
-				:is="field.$el || 'div'"
-				class="vlue"
-			>
-				{{ data[field.id] || field.defaultValue }}
-			</component>
-		</div>
+		</template>
 		<div v-if="!schema?.length">
 			<div
 				class="data-row"
-				v-for="[key, value] in Object.entries(data).filter(
+				v-for="[key, value] in Object.entries(itemData).filter(
 					([key]) => !keysToIgnore.includes(key),
 				)"
 				:key="key"
@@ -51,12 +60,22 @@ const i18nT = useI18nT();
 
 const keysToIgnore = ['id', 'person_id', 'person', 'created_at', 'updated_at'];
 
-// const props =
-defineProps<{
+const props = defineProps<{
 	data: Record<string, any>,
 	schema?: Record<string, any>[],
 	title?: string,
 }>();
+
+const itemData = $ref<Record<string, any>>(props.data);
+
+const bindAttrs = (attrs: Record<string, any>, field: any, row: any) => {
+	const arr = Object.entries(attrs || {}).map(([key, value]) => [
+		key,
+		typeof value === 'function' ? value(field, row) : value,
+	]);
+	const resolvedAttrs = Object.fromEntries(arr);
+	return resolvedAttrs;
+};
 </script>
 
 <style scoped>
@@ -71,7 +90,6 @@ defineProps<{
 	justify-content: space-between;
 	padding-bottom: 0.5rem;
 	margin-bottom: 0.5rem;
-	opacity: 0.8;
 	border-bottom: 1px solid var(--border-color);
 }
 

package/src/components/DropDown.vue

@@ -1,43 +1,44 @@
 <template>
-  <div class="dropdown" @click="toggleDropdown" :class="{ opendrop: isOpen }">
-    <div class="dropdown-title">
-      {{ selectedOption || placeholder }}
-      <MaterialIcon icon="keyboard_arrow_down" />
-    </div>
-    <div class="dropdown-body">
-      <p
-        v-for="(option, index) in options"
-        :key="index"
-        @click.stop="selectOption(option as string, index as number)"
-      >
-        {{ option }}
-      </p>
-    </div>
-  </div>
+	<div class="dropdown" @click="toggleDropdown" :class="{ opendrop: isOpen }">
+		<div class="dropdown-title">
+			{{ selectedOption || placeholder }}
+			<MaterialIcon icon="keyboard_arrow_down" />
+		</div>
+		<div
+			class="dropdown-body"
+		>
+			<p
+				v-for="(option, index) in options"
+				:key="index"
+				@click.stop="selectOption(option as string, index as number)"
+			>
+				{{ option }}
+			</p>
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import { MaterialIcon } from "@bagelink/vue";
+import { MaterialIcon } from '@bagelink/vue';
 
 const props = defineProps({
-  modelValue: String,
-  options: Array,
-  placeholder: String,
+	modelValue: String,
+	options: Array,
+	placeholder: String,
 });
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(['update:modelValue']);
 
-const isOpen = ref(false);
-const selectedOption = ref(props.modelValue);
+let isOpen = $ref(false);
+let selectedOption = $ref(props.modelValue);
 
 function toggleDropdown() {
-  isOpen.value = !isOpen.value;
+	isOpen = !isOpen;
 }
 
 function selectOption(option: string, index: number) {
-  selectedOption.value = option;
-  isOpen.value = false;
-  emit("update:modelValue", { option, index }); // Emit the selected option value with v-model
+	selectedOption = option;
+	isOpen = false;
+	emit('update:modelValue', { option, index }); // Emit the selected option value with v-model
 }
 </script>
 
@@ -45,13 +46,14 @@ function selectOption(option: string, index: number) {
 .dropdown {
   position: relative;
   font-size: calc(var(--input-font-size) * 1.3);
-  width: 50px;
-  /* color: var(--bgl-primary); */
-  z-index: 1;
+  /* width: 50px; */
+  z-index: 9;
+
 }
 
 .dropdown-title {
   white-space: nowrap;
+  color: var(--bgl-primary);
   border-radius: var(--input-border-radius);
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
   padding-left: calc(var(--btn-padding) / 2);
@@ -90,7 +92,8 @@ function selectOption(option: string, index: number) {
   inset-inline-start: 0;
   inset-inline-end: 0;
   overflow: auto;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.20);
+  z-index: 99999999;
 }
 
 .dropdown-body * {
@@ -99,12 +102,11 @@ function selectOption(option: string, index: number) {
   padding: calc(var(--btn-padding) / 2);
   padding-bottom: calc(var(--btn-padding) / 4);
   padding-top: calc(var(--btn-padding) / 4);
+  margin: 0;
   color: inherit;
   text-decoration: none;
   line-height: 1;
   transition: var(--bgl-transition);
-  box-shadow: 0 -1px 0 0 rgb(0 0 0, 10%);
-  z-index: 99999999;
 }
 
 .dropdown-body *:hover {

package/src/components/TableSchema.vue

@@ -1,68 +1,70 @@
 <template>
-  <div class="table-list-wrap h-100">
-    <table class="infinite-wrapper">
-      <thead class="row first-row">
-        <th
-          class="col"
-          v-for="field in columns"
-          :key="field.id"
-          @click="sort(field.id)"
-        >
-          <div class="flex">
-            {{ field?.label || field?.id }}
-            <div
-              class="list-arrows"
-              :class="{ sorted: sortField === field.id }"
-            >
-              <MaterialIcon
-                :class="{ desc: sortDirection === 'DESC' }"
-                icon="keyboard_arrow_up"
-              />
-            </div>
-          </div>
-        </th>
-      </thead>
-      <tbody ref="infinite" class="rows infinite" :class="{ loading }">
-        <tr
-          @click="selectElement(row)"
-          class="row row-item position-relative"
-          v-for="row in data"
-          :key="row.id"
-        >
-          <td
-            class="col"
-            v-for="field in columns"
-            :key="`${field.id}-${row.id}`"
-          >
-            <slot
-              v-if="slots[field.id]"
-              :name="field.id"
-              :row="row"
-              :field="field"
-            />
-            <div v-else>
-              <component
-                :is="field.$el || field.$cmp || 'div'"
-                v-if="field['v-if'] ? field['v-if'](row[field.id], row) : true"
-                v-bind="bindAttrs(field.attrs, row[field.id], row)"
-                :src="field.$el === 'img' ? row[field.id]?.url : ''"
-              >
-                {{
-                  field?.transform?.(row[field.id], row) || row[field.id] || ""
-                }}
-              </component>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <!-- </Transition> -->
-  </div>
+	<div class="table-list-wrap h-100">
+		<table class="infinite-wrapper">
+			<thead class="row first-row">
+				<th
+					class="col"
+					v-for="field in columns"
+					:key="field.id"
+					@click="sort(field.id)"
+				>
+					<div class="flex">
+						{{ field?.label || field?.id }}
+						<div
+							class="list-arrows"
+							:class="{ sorted: sortField === field.id }"
+						>
+							<MaterialIcon
+								:class="{ desc: sortDirection === 'DESC' }"
+								icon="keyboard_arrow_up"
+							/>
+						</div>
+					</div>
+				</th>
+			</thead>
+			<tbody ref="infinite" class="rows infinite" :class="{ loading }">
+				<tr
+					@click="selectElement(row)"
+					class="row row-item position-relative"
+					v-for="row in data"
+					:key="row.id"
+				>
+					<td
+						class="col"
+						v-for="field in columns"
+						:key="`${field.id}-${row.id}`"
+					>
+						<slot
+							v-if="slots[field.id]"
+							:name="field.id"
+							:row="row"
+							:field="field"
+						/>
+						<div v-else>
+							<component
+								:is="field.$el || field.$cmp || 'div'"
+								v-if="field['v-if'] ? field['v-if'](row[field.id], row) : true"
+								v-bind="bindAttrs(field.attrs, row[field.id], row)"
+								:src="field.$el === 'img' ? row[field.id]?.url : ''"
+								@update:modelValue="($event:any)=>field?.onUpdate?.($event, row[field.id], row)"
+								:modelValue="row[field.id]"
+							>
+								{{
+									field?.transform?.(row[field.id], row) || row[field.id] || ""
+								}}
+							</component>
+						</div>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+		<!-- </Transition> -->
+	</div>
 </template>
 
 <script setup lang="ts">
-import { useSlots } from "vue";
-import { MaterialIcon } from "@bagelink/vue";
+import { useSlots } from 'vue';
+import { MaterialIcon } from '@bagelink/vue';
 
 const slots = useSlots();
 const loading = $ref(true);
@@ -72,42 +74,38 @@ const props = defineProps<{
   schema?: () => any[];
 }>();
 
-const emit = defineEmits(["select"]);
+const emit = defineEmits(['select']);
 
 const selectElement = (data: Record<string, any>) => {
-  emit("select", data);
+	emit('select', data);
 };
 
 const bindAttrs = (attrs: Record<string, any>, field: any, row: any) => {
-  const arr = Object.entries(attrs || {}).map(([key, value]) => [
-    key,
-    typeof value === "function" ? value(field, row) : value,
-  ]);
-  const resolvedAttrs = Object.fromEntries(arr);
-  return resolvedAttrs;
+	const arr = Object.entries(attrs || {}).map(([key, value]) => [
+		key,
+		typeof value === 'function' ? value(field, row) : value,
+	]);
+	const resolvedAttrs = Object.fromEntries(arr);
+	return resolvedAttrs;
 };
 
 // const sortList = () => {};
-let sortDirection = $ref("");
-let sortField = $ref("");
+let sortDirection = $ref('');
+let sortField = $ref('');
 
 const sort = (fieldname: string) => {
-  if (sortField === fieldname) {
-    if (sortDirection === "ASC") sortDirection = "DESC";
-    else sortField = "";
-  } else {
-    sortField = fieldname;
-    sortDirection = "ASC";
-  }
+	if (sortField === fieldname) {
+		if (sortDirection === 'ASC') sortDirection = 'DESC';
+		else sortField = '';
+	} else {
+		sortField = fieldname;
+		sortDirection = 'ASC';
+	}
 };
 
 const columns = $computed(
-  () =>
-    props.schema?.() ||
-    Object.keys(props.data[0]).map((k: string) => ({
-      id: k,
-      inputType: "PlainText",
-    }))
+	() => props.schema?.() ||
+    Object.keys(props.data[0]).map((k: string) => ({ id: k, inputType: 'PlainText' })),
 );
 </script>
 

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>