@bagelink/vue 0.0.218 → 0.0.226-beta.0

package/src/components/RTXEditor.vue

@@ -1,105 +1,105 @@
 <template>
-  <!-- :class="{ editable: editable }" -->
-  <div
-    @click="focusEditor"
-    :id="`canvas-${elementId}`"
-    @keydown.meta.enter="$emit('keydown.meta.enter')"
-  />
+	<!-- :class="{ editable: editable }" -->
+	<div
+		@click="focusEditor"
+		:id="`canvas-${elementId}`"
+		@keydown.meta.enter="$emit('keydown.meta.enter')"
+	/>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
-import { DOMParser, DOMSerializer } from "prosemirror-model";
-import { EditorState } from "prosemirror-state";
-import { EditorView } from "prosemirror-view";
-import { keymap } from "prosemirror-keymap";
-import { baseKeymap } from "prosemirror-commands";
-import { undo, redo, history } from "prosemirror-history";
-import { schema } from "prosemirror-schema-basic";
+import { ref, onMounted, watch } from 'vue';
+import { DOMParser, DOMSerializer } from 'prosemirror-model';
+import { EditorState } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { keymap } from 'prosemirror-keymap';
+import { baseKeymap } from 'prosemirror-commands';
+import { undo, redo, history } from 'prosemirror-history';
+import { schema } from 'prosemirror-schema-basic';
 
 const props = withDefaults(
-  defineProps<{
+	defineProps<{
     elementId?: string;
     modelValue: string;
   }>(),
-  {
-    elementId: Math.random().toString(36).substr(2, 9),
-    modelValue: "",
-  }
+	{
+		elementId: Math.random().toString(36).substr(2, 9),
+		modelValue: '',
+	},
 );
 
-const emit = defineEmits(["update:modelValue", "keydown.meta.enter"]);
+const emit = defineEmits(['update:modelValue', 'keydown.meta.enter']);
 
 const html = ref<string>(props.modelValue);
 let view: EditorView;
 
 const createEditorStateFromHTML = (htmlContent: string) => {
-  let content = { type: "doc", content: [] };
-  try {
-    const dom = document.createElement("div");
-    dom.innerHTML = htmlContent || "";
-    content = DOMParser.fromSchema(schema)
-      .parse(dom, { preserveWhitespace: true })
-      .toJSON();
-  } catch (err) {
-    content = { type: "doc", content: [] };
-  }
-
-  const state = EditorState.create({
-    doc: DOMParser.fromSchema(schema).schema.nodeFromJSON(content),
-    plugins: [
-      history(),
-      keymap({ "Mod-z": undo, "Mod-y": redo }),
-      keymap(baseKeymap),
-    ],
-  });
-
-  return state;
+	let content = { type: 'doc', content: [] };
+	try {
+		const dom = document.createElement('div');
+		dom.innerHTML = htmlContent || '';
+		content = DOMParser.fromSchema(schema)
+			.parse(dom, { preserveWhitespace: true })
+			.toJSON();
+	} catch (err) {
+		content = { type: 'doc', content: [] };
+	}
+
+	const state = EditorState.create({
+		doc: DOMParser.fromSchema(schema).schema.nodeFromJSON(content),
+		plugins: [
+			history(),
+			keymap({ 'Mod-z': undo, 'Mod-y': redo }),
+			keymap(baseKeymap),
+		],
+	});
+
+	return state;
 };
 
 function handleChange(newState: any) {
-  const dom = document.createElement("div");
-  const node = DOMSerializer.fromSchema(schema).serializeFragment(newState);
-  dom.appendChild(node);
-  html.value = dom?.innerHTML || "";
-  emit("update:modelValue", html.value);
+	const dom = document.createElement('div');
+	const node = DOMSerializer.fromSchema(schema).serializeFragment(newState);
+	dom.appendChild(node);
+	html.value = dom?.innerHTML || '';
+	emit('update:modelValue', html.value);
 }
 
 const createEditorView = (state: EditorState) => {
-  const editorDiv = document.getElementById(`canvas-${props.elementId}`);
-  view = new EditorView(editorDiv, {
-    state,
-    // editable: () => props.editable,
-    dispatchTransaction(transaction) {
-      const newState = view.state.apply(transaction);
-      handleChange(newState.doc);
-      view.updateState(newState);
-    },
-  });
-  view.setProps({
-    // editable: () => props.editable,
-  });
+	const editorDiv = document.getElementById(`canvas-${props.elementId}`);
+	view = new EditorView(editorDiv, {
+		state,
+		// editable: () => props.editable,
+		dispatchTransaction(transaction) {
+			const newState = view.state.apply(transaction);
+			handleChange(newState.doc);
+			view.updateState(newState);
+		},
+	});
+	view.setProps({
+		// editable: () => props.editable,
+	});
 };
 
 function loadContent() {
-  const state = createEditorStateFromHTML(props.modelValue);
-  createEditorView(state);
+	const state = createEditorStateFromHTML(props.modelValue);
+	createEditorView(state);
 }
 
 watch(
-  () => props.modelValue,
-  (val: string) => {
-    if (val === html.value) return;
-    const el = document.getElementById(`canvas-${props.elementId}`);
-    if (el) el.innerHTML = "";
-    loadContent();
-  }
+	() => props.modelValue,
+	(val: string) => {
+		if (val === html.value) return;
+		const el = document.getElementById(`canvas-${props.elementId}`);
+		if (el) el.innerHTML = '';
+		loadContent();
+	},
 );
 
 onMounted(loadContent);
 
 function focusEditor() {
-  view.focus();
+	view.focus();
 }
 </script>
 

package/src/components/TableSchema.vue

@@ -2,59 +2,28 @@
 	<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)"
-				>
+				<th class="col" v-for="field in schema" :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"
-							/>
+						{{ 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"
-						/>
+			<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 schema" :key="`${field.id}-${row.id}`">
+						<slot v-if="field.id && 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]"
-							>
+							<component :is="field.$el || 'div'" v-if="iffer(field, row)"
+								v-bind="bindAttrs(field.attrs, denullify(row, field.id), row)"
+								:class="classify(denullify(row, field.id), row, field.class, field.attrs?.class)"
+								:src="field.$el === 'img' && field.id ? row[field.id]?.url : ''"
+								:modelValue="field.id ? row[field.id] : ''"
+								@update:modelValue="($event: any) => field?.onUpdate?.($event, denullify(row, field.id), row)">
 								{{
-									field?.transform?.(row[field.id], row) || row[field.id] || ""
+									field?.transform?.(denullify(row, field.id), row) || denullify(row, field.id) || ""
 								}}
 							</component>
 						</div>
@@ -68,34 +37,27 @@
 
 <script setup lang="ts">
 import { useSlots } from 'vue';
-import { MaterialIcon } from '@bagelink/vue';
+import {
+	type BglFormSchemaT,
+	bindAttrs,
+	classify,
+	denullify,
+	MaterialIcon,
+	iffer,
+} from '@bagelink/vue';
 
 const slots = useSlots();
 const loading = $ref(true);
 
-const props = defineProps<{
+defineProps<{
 	data: any[];
-	schema?: () => any[];
+	schema: BglFormSchemaT;
 }>();
 
-
-
 const emit = defineEmits(['select']);
 
-const selectElement = (data: Record<string, any>) => {
-	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 selectElement = (data: Record<string, any>) => emit('select', data);
 
-// const sortList = () => {};
 let sortDirection = $ref('');
 let sortField = $ref('');
 
@@ -108,14 +70,6 @@ const sort = (fieldname: string) => {
 		sortDirection = 'ASC';
 	}
 };
-
-const columns = $computed(
-	() => props.schema?.()?.map((field) => ({
-		...field,
-		id: field?.relationshipObjKey || field.id,
-	})) ||
-		Object.keys(props.data[0]).map((k: string) => ({ id: k, inputType: 'PlainText' })),
-);
 </script>
 
 <style scoped>

package/src/components/Title.vue

@@ -0,0 +1,19 @@
+<template>
+	<component :is="tag">
+		<slot />
+		{{ label }}
+	</component>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+	label: {
+		type: String,
+		default: '',
+	},
+	tag: {
+		type: String,
+		default: 'h1',
+	},
+});
+</script>

package/src/components/form/BglField.vue

@@ -1,39 +1,42 @@
 <template>
-	<component
-		:required="field.required"
-		v-bind="bindAttrs(field?.attrs||{}, props.modelValue[field.id || ''], props.modelValue,)"
-		v-if="vIf"
-		:is="field.$el || 'div'"
-		:label="field.label"
-		:id="field.id"
-		:placeholder="field.placeholder || field.label"
-		:modelValue="props.modelValue[field.id || '']"
-		@update:modelValue="($event:any)=>emits('update:modelValue', $event)"
-	>
-		<BglField
-			:modelValue="modelValue"
-			@update:modelValue="($event:any)=>emits('update:modelValue', $event)"
-			v-for="(child,ii) in field.children" :key="child.id||ii"
-			:field="child"
-		/>
+	<component :required="field.required" v-bind="bindAttrs(field?.attrs || {}, fieldData, modelValue)"
+		:class="classify(fieldData, modelValue, field.class, field.attrs?.class)" v-if="vIf" :is="field.$el || 'div'"
+		:label="field.label" :id="field.id" :placeholder="field.placeholder || field.label" v-model="fieldData">
+		<BglField v-model="formData" v-for="(child, ii) in field.children" :key="child.id || ii" :field="child" />
 	</component>
 </template>
 
 <script lang="ts" setup>
-import { type Field, bindAttrs } from '@bagelink/vue';
+import { type Field, bindAttrs, classify } from '@bagelink/vue';
 
-const props = defineProps<{
-    modelValue: Record<string, any>;
-    field: Field
-  }>();
+const props = withDefaults(defineProps<{
+	field: Field
+	modelValue: Record<string, any>
+}>(), {
+	modelValue: () => ({}),
+});
+const emit = defineEmits(['update:modelValue']);
+
+const formData = $computed({
+	get: () => props.modelValue,
+	set: (val: any) => emit('update:modelValue', val),
+});
+
+const fieldData = $computed({
+	set: (val: any) => {
+		if (!props.field.id) return;
+		const data = { ...props.modelValue } || {};
+		data[props.field.id] = val;
+		emit('update:modelValue', data);
+	},
+	get: () => (props.field.id ? props.modelValue[props.field.id] : ''),
+});
 
 const vIf = $computed(() => {
 	if (props.field['v-if'] === undefined) return true;
 	if (typeof props.field['v-if'] === 'boolean') return props.field['v-if'];
-	if (typeof props.field['v-if'] === 'string') return !!props.modelValue[props.field['v-if']];
-	if (typeof props.field['v-if'] === 'function') return props.field['v-if']!(props.modelValue[props.field.id || ''], props.modelValue);
+	if (typeof props.field['v-if'] === 'string') return !!props.modelValue.value[props.field['v-if']];
+	if (typeof props.field['v-if'] === 'function') return props.field['v-if']!(fieldData.value, props.modelValue);
 	return true;
 });
-
-const emits = defineEmits(['update:modelValue']);
 </script>

package/src/components/form/BglForm.vue

@@ -1,8 +1,7 @@
 <template>
 	<form ref="form" @submit.prevent="runSubmit">
 		<BglField
-			v-for="(field, i) in schema" :key="field.id || `${i  }p`" :field="field" :modelValue="data"
-			@update:modelValue="($event)=>updateModelValue($event, field?.id || '')"
+			v-for="(field, i) in schema" :key="field.id || `${i}p`" :field="field" v-model="data"
 		/>
 		<Btn
 			class="del-top" v-if="data?.id && onDelete" @click="runDelete" value="Delete" flat icon="delete"
@@ -21,31 +20,37 @@ import { type BglFormSchemaT } from '@bagelink/vue';
 
 const { showModal } = useModal();
 
-const data = defineModel<Record<string, any>>('modelValue', { default: {} });
-
-const props = defineProps<{
+const props = withDefaults(
+	defineProps<{
 	schema: BglFormSchemaT;
+	modelValue?: Record<string, any>;
 	onDelete?: ((id: string) => void);
 	onSubmit?: ((data: any) => void);
-}>();
+}>(),
+	{
+		modelValue: () => ({}),
+	},
+);
+
+const emit = defineEmits(['update:modelValue', 'submit']);
 
+const data = $computed({
+	set: (val: any) => {
+		emit('update:modelValue', val);
+	},
+	get: () => props.modelValue || {},
+});
 const form = $ref<HTMLFormElement>();
 
 const validateForm = () => form?.reportValidity?.();
 
-const updateModelValue = (val: any, fieldID: string) => {
-	if (!fieldID || !data.value) return;
-	data.value[fieldID] = val;
-};
-
 defineExpose({ validateForm });
 
-const clearForm = () => Object.assign(data, {});
-const emits = defineEmits(['submit']);
+const clearForm = () => Object.assign(data.value, {});
 
 const runSubmit = () => {
 	validateForm();
-	emits('submit', data);
+	emit('submit', data.value);
 	clearForm();
 };
 

package/src/components/form/index.ts

@@ -1,6 +1,3 @@
-export { default as ItemRef } from './ItemRef.vue';
-export { default as MaterialIcon } from './MaterialIcon.vue';
-export { default as PlainInputField } from './PlainInputField.vue';
 export { default as BglForm } from './BglForm.vue';
 export { default as BagelForm } from './BglForm.vue';
 export { default as BglField } from './BglField.vue';

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

@@ -10,12 +10,14 @@
 			v-model="inputVal"
 			:class="{ 'no-edit': !editMode }"
 		>
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			height="24" viewBox="0 -960 960 960"
-			width="24"
-		>
-			<path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>
+		<div class="check-square">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				height="24" viewBox="0 -960 960 960"
+				width="24"
+			>
+				<path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>
+		</div>
 		<label :for="id">
 			{{ label }}
 		</label>
@@ -51,13 +53,16 @@ const inputVal = defineModel<boolean>('modelValue', { default: false });
 </style>
 <style scoped>
 .bgl-checkbox{
-position: relative;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 .bgl-checkbox input[type=checkbox]{
   display: none;
 }
 .bgl-checkbox label{
-  padding-inline-start: calc(var(--input-height) / 2 + 0.25rem);
+  padding-inline-start: 0.5rem;
   transition: var(--bgl-transition);
   cursor: pointer;
   user-select: none;
@@ -68,34 +73,31 @@ position: relative;
 .bgl-checkbox:active{
   filter: var(--bgl-active-filter);
 }
-.bgl-checkbox label::before{
-  content: "";
+.bgl-checkbox .check-square{
   width: calc(var(--input-height) / 2.5);
   height: calc(var(--input-height) / 2.5);
   background: var(--bgl-white);
-  display: inline-block;
-  position: absolute;
-  margin-top: 0.25rem;
-  inset-inline-start: 0;
   border-radius: calc(var(--input-border-radius) / 2) ;
   border: var(--bgl-primary) 1px solid;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-input:checked ~ label::before{
+input:checked ~ .check-square{
   background: var(--bgl-primary);
 }
 .bgl-checkbox svg{
   width: calc(var(--input-height) / 2.5);
   height: calc(var(--input-height) / 2.5);
   position: absolute;
-  inset-inline-start: 0.05rem;
-  margin-top: 0.3rem;
   z-index: 2;
   fill: var(--bgl-white);
   opacity: 0;
   pointer-events: none;
 }
-input:checked ~ svg{
+input:checked ~ .check-square svg{
   opacity: 1;
 }
 </style>

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

@@ -1,55 +1,37 @@
 <template>
-	<div
-		class="bagel-input"
-		:title="field.description"
-		:class="{ small: small }"
-	>
-		<label v-if="field.label">
-			{{ field.label }}
+	<div class="bagel-input" :title="label" :class="{ small: small }">
+		<label v-if="label">
+			{{ label }}
 		</label>
-		<input
-			type="date"
-			v-model="date"
-			@update:modelValue="handleInput"
-			:placeholder="field.placeholder || field.label"
-			class="date-picker"
-			:disabled="!editMode"
-			:enableTimePicker="false"
-			:textInputOptions="{ format: 'yyyy-MM-dd' }"
-		>
+		<VDatepicker ref="datePicker" :auto-apply="true" v-model="date" :enable-time-picker="enableTime"/>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import type { BagelField } from '@bagelink/vue';
+import VDatepicker, { DatePickerInstance } from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css';
 
-const props = withDefaults(
+const datePicker = $ref<DatePickerInstance>();
+
+withDefaults(
 	defineProps<{
-		field: BagelField;
-		modelValue: any;
+		label?: string;
 		editMode?: boolean;
 		small?: boolean;
+		enableTime?: boolean;
 	}>(),
 	{
+		enableTime: false,
 		editMode: true,
 		small: false,
 	},
 );
 
-const date = ref(props.modelValue);
-
-const emit = defineEmits(['update:modelValue']);
-
-const handleInput = () => {
-	emit('update:modelValue', date.value.toISOString().split('T').shift());
-};
+const date = defineModel<string | Date>('modelValue', { default: '' });
 </script>
 
-<style scoped>
-/*
-.date-picker {
-	padding-inline-start: 10px;
+<style>
+.dp__input_wrap input {
+	padding-inline-start: 2rem !important;
 }
-*/
 </style>