@bagelink/vue 0.0.466 → 0.0.471

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

@@ -1,3 +1,73 @@
+<script setup lang="ts">
+import { VueDraggableNext } from 'vue-draggable-next'
+import { onMounted, ref } from 'vue'
+import { Btn, MaterialIcon, formatString } from '@bagelink/vue'
+
+const props = withDefaults(
+	defineProps<{
+		description?: string
+		meta: Record<string, any> /* EntityMeta */
+		fieldname: string
+		bagelApp?: any
+		modelValue: any
+	}>(),
+	{
+		description: '',
+		bagelApp: null,
+	},
+)
+const emits = defineEmits(['update:modelValue'])
+let bagel: any
+let api: any
+const listRef = ref(props.modelValue)
+const fieldMeta = props.meta.doc_meta.fields.find(
+	(field: Record<string, any>) => field.fieldname === props.fieldname,
+)
+const entityMeta = props.meta.links.find(
+	(link: Record<string, any>) => link.id === fieldMeta?.options,
+)
+
+function handleUpdateModelValue(value: any, index: number, fieldname: string) {
+	const rows = [...props.modelValue]
+	rows[index][fieldname] = value
+	emits('update:modelValue', rows)
+}
+
+function addRow() {
+	const rows = [...props.modelValue]
+	const entry = {
+		idx: rows.length,
+	} as { [key: string]: any }
+	entityMeta?.fields.forEach((field: any) => {
+		if (field.default) {
+			if (field.fieldtype === 'Check') {
+				entry[field.fieldname] = Number.parseInt(field.default)
+			} else {
+				entry[field.fieldname] = field.default
+			}
+		}
+	})
+	rows.push(entry)
+	emits('update:modelValue', rows)
+}
+
+function removeRow(idx: number) {
+	const rows = [...props.modelValue]
+	rows.splice(idx, 1)
+	emits('update:modelValue', rows)
+}
+
+function ended() {
+	listRef.value.forEach((item: Record<string, any>, index: number) => {
+		item.idx = index + 1
+	})
+	emits('update:modelValue', listRef.value)
+}
+onMounted(() => {
+	bagel = props.bagelApp || api
+})
+</script>
+
 <template>
 	<div
 		class="table-field-wrap"
@@ -11,10 +81,10 @@
 		<div class="table-side-scroll">
 			<div class="table-header">
 				<div
-					class="header-col"
-					:class="formatString(field.fieldtype, 'pascal')"
 					v-for="field in entityMeta?.fields"
 					:key="`${field.fieldname}header`"
+					class="header-col"
+					:class="formatString(field.fieldtype, 'pascal')"
 				>
 					{{ field.label }}
 				</div>
@@ -31,24 +101,24 @@
 				<TransitionGroup>
 					<div
 						v-for="(row, index) in modelValue"
-						class="flex table-row"
 						:key="row.id"
+						class="flex table-row"
 					>
 						<div class="table-reorder">
 							<MaterialIcon icon="more_vert" />
 						</div>
 						<div
-							class="table-cell"
-							:class="formatString(field.fieldtype, 'pascal')"
 							v-for="field in entityMeta?.fields"
 							:key="`${field.fieldname}${row.id}`"
+							class="table-cell"
+							:class="formatString(field.fieldtype, 'pascal')"
 						>
 							<BagelInput
 								no-label
 								:field-meta="field"
 								:bagel-app="bagel"
-								@update:modelValue="(value: any) => handleUpdateModelValue(value, index, field.fieldname)"
 								:model-value="row[field.fieldname]"
+								@update:modelValue="(value: any) => handleUpdateModelValue(value, index, field.fieldname)"
 							/>
 						</div>
 
@@ -74,76 +144,6 @@
 	</div>
 </template>
 
-<script setup lang="ts">
-import { VueDraggableNext } from 'vue-draggable-next';
-import { onMounted, ref } from 'vue';
-import { Btn, formatString, MaterialIcon } from '@bagelink/vue';
-
-let bagel: any;
-let api: any;
-const props = withDefaults(
-	defineProps<{
-		description?: string;
-		meta: Record<string, any> /* EntityMeta */;
-		fieldname: string;
-		bagelApp?: any;
-		modelValue: any;
-	}>(),
-	{
-		description: '',
-		bagelApp: null,
-	},
-);
-const listRef = ref(props.modelValue);
-const emits = defineEmits(['update:modelValue']);
-const fieldMeta = props.meta.doc_meta.fields.find(
-	(field: Record<string, any>) => field.fieldname === props.fieldname,
-);
-const entityMeta = props.meta.links.find(
-	(link: Record<string, any>) => link.id === fieldMeta?.options,
-);
-
-function handleUpdateModelValue(value: any, index: number, fieldname: string) {
-	const rows = [...props.modelValue];
-	rows[index][fieldname] = value;
-	emits('update:modelValue', rows);
-}
-
-function addRow() {
-	const rows = [...props.modelValue];
-	const entry = {
-		idx: rows.length,
-	} as { [key: string]: any };
-	entityMeta?.fields.forEach((field: any) => {
-		if (field.default) {
-			if (field.fieldtype === 'Check') {
-				entry[field.fieldname] = parseInt(field.default);
-			} else {
-				entry[field.fieldname] = field.default;
-			}
-		}
-	});
-	rows.push(entry);
-	emits('update:modelValue', rows);
-}
-
-function removeRow(idx: number) {
-	const rows = [...props.modelValue];
-	rows.splice(idx, 1);
-	emits('update:modelValue', rows);
-}
-
-function ended() {
-	listRef.value.forEach((item: Record<string, any>, index: number) => {
-		item.idx = index + 1;
-	});
-	emits('update:modelValue', listRef.value);
-}
-onMounted(() => {
-	bagel = props.bagelApp || api;
-});
-</script>
-
 <style scoped>
 .table-side-scroll {
 	overflow: auto;
@@ -271,6 +271,7 @@ onMounted(() => {
 	opacity: 1;
 }
 </style>
+
 <style>
 .table-row .bagel-input input,
 .table-row .bagel-input textarea,