@bagelink/vue 0.0.25 → 0.0.35

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

@@ -0,0 +1,63 @@
+<template>
+	<div
+		class="bagel-input"
+		:class="{ small }"
+		:title="field.description"
+		v-if="field.id"
+	>
+		<label :for="field.id">
+			{{ field.label }}
+			<input
+				:id="field.id"
+				v-model="inputVal"
+				type="text"
+				:placeholder="field.placeholder || field.label"
+				:class="{ 'no-edit': !editMode }"
+				:required="required"
+				:pattern="pattern"
+				v-bind="nativeInputAttrs"
+			>
+		</label>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue';
+import { BagelField } from '@/types/BagelField';
+
+const emit = defineEmits(['update:modelValue']);
+const props = withDefaults(
+	defineProps<{
+		field: BagelField;
+		modelValue: any;
+		editMode?: boolean;
+		small?: boolean;
+		required?: boolean;
+		pattern?: string;
+		nativeInputAttrs?: Record<string, any>;
+	}>(),
+	{
+		editMode: true,
+	},
+);
+let inputVal = $ref<string>();
+
+watch(
+	() => inputVal,
+	(newVal) => emit('update:modelValue', newVal),
+);
+
+watch(
+	() => props.modelValue,
+	(newVal) => {
+		if (newVal !== inputVal) inputVal = newVal;
+	},
+	{ immediate: true },
+);
+</script>
+
+<style scoped>
+.no-edit {
+	cursor: not-allowed;
+}
+</style>

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

@@ -0,0 +1,28 @@
+<template>
+	<div
+		class="bagel-input"
+		:title="field.description"
+		:class="{ small: small }"
+	>
+		<label v-if="field.label">
+			{{ field.label }}
+		</label>
+		{{ modelValue }}
+	</div>
+</template>
+
+<script setup lang="ts">
+import { BagelField } from '@/types/BagelField';
+
+defineProps<{
+	field: BagelField;
+	modelValue: any;
+	small?: boolean;
+}>();
+</script>
+
+<style scoped>
+.no-edit {
+	margin-bottom: 2px;
+}
+</style>

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

@@ -0,0 +1,56 @@
+<template>
+	<div
+		class="bagel-input"
+		:title="description"
+		:class="{ small: small }"
+	>
+		<label v-if="label">
+			<LangText :input="label" />
+		</label>
+		<textarea
+			:value="modelValue"
+			@input="handleInput"
+			:placeholder="placeholder"
+			:class="{ 'no-edit': !editMode }"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+const emits = defineEmits(['update:modelValue']);
+
+// const props =
+withDefaults(
+	defineProps<{
+		description?: string;
+		label?: string;
+		modelValue: any;
+		placeholder?: string;
+		editMode?: boolean;
+		small?: boolean;
+	}>(),
+	{
+		description: '',
+		editMode: true,
+		placeholder: '',
+		label: '',
+	},
+);
+const handleInput = (e: Event) => {
+	const el = e.target as HTMLInputElement;
+	emits('update:modelValue', el.value);
+};
+</script>
+
+<style scoped>
+.bagel-input {
+	height: 100%;
+	margin: 0;
+}
+
+.bagel-input textarea {
+	height: 100%;
+	resize: none;
+	background: transparent;
+}
+</style>

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

@@ -0,0 +1,258 @@
+<template>
+	<div
+		class="bagel-input"
+		:class="{ 'no-edit': !editMode, small: small }"
+		:title="description"
+	>
+		<label
+			v-if="label"
+			for="label"
+			:class="{ active: showList }"
+		>
+			<LangText :input="label" />
+		</label>
+
+		<div
+			class="custom-select"
+			ref="selectEl"
+			:class="{ 'open-select': showList && editMode }"
+		>
+			<div
+				@click.stop="toggleShowList"
+				class="input"
+				name="select-input"
+				:class="{ active: showList }"
+			>
+				<LangText :input="displayValue" />
+			</div>
+			<Teleport to="#app">
+				<div
+					ref="dropdown"
+					class="custom-select-drop"
+					:class="{ 'open-select': showList && editMode }"
+				>
+					<div
+						v-for="option in optionsRef"
+						:key="option.value"
+						@click="handleSelect(option)"
+					>
+						<LangText :input="option.label" />
+					</div>
+				</div>
+			</Teleport>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import {
+	onMounted, onUnmounted, ref, computed,
+	watch,
+} from 'vue';
+import { type SelectBagelField } from '@/types/BagelField';
+import LangText from '@/components/LangText.vue';
+
+const selectEl = ref<HTMLElement>();
+const dropdown = ref<HTMLElement>();
+const showList = ref(false);
+const props = withDefaults(
+	defineProps<
+		Omit<SelectBagelField, 'key'> & {
+			editMode?: boolean;
+			field: SelectBagelField;
+			modelValue: any;
+			small?: boolean;
+		}
+	>(),
+	{
+		description: '',
+		editMode: true,
+		label: '',
+		placeholder: '',
+	},
+);
+const left = ref('0');
+const top = ref(0);
+const width = ref('0');
+const selectedValue = ref('');
+const optionsRef = ref<{ label: string; value: string | number }[]>([]);
+const displayValue = computed(() => {
+	const option = optionsRef.value.find((o) => o.value === selectedValue.value);
+	return option?.label || '';
+});
+const emits = defineEmits(['update:modelValue', 'selected']);
+
+function handleSelect(option: any) {
+	emits('update:modelValue', option.value);
+	selectedValue.value = option.value;
+	showList.value = false;
+}
+
+function handleClick(e: any) {
+	const { target } = e;
+	if (target.name !== 'select-input' && showList.value === true) {
+		showList.value = false;
+		emits('update:modelValue', selectedValue);
+	}
+	// showList.value = false
+}
+
+function setPosition(e?: WheelEvent) {
+	const elInfo = selectEl.value?.getBoundingClientRect() || {
+		top: 0,
+		left: 0,
+		width: 0,
+		bottom: 0,
+	};
+	if (e?.deltaY) {
+		// top.value = top.value + e.deltaY * -1
+	} else {
+		//
+	}
+	top.value = elInfo.bottom;
+
+	left.value = `${elInfo.left}px`;
+	width.value = `${elInfo.width}px`;
+	const dropRect = dropdown.value?.getBoundingClientRect?.() || {
+		height: 0,
+	};
+
+	if (window.innerHeight - elInfo.bottom < dropRect.height) {
+		top.value = elInfo.top - dropRect.height;
+	}
+}
+
+function hideDrop(e: WheelEvent) {
+	const dropRect = dropdown.value?.getBoundingClientRect() || {
+		left: 0,
+		right: 0,
+	};
+	if (e.clientX < dropRect.left || e.clientX > dropRect.right) {
+		showList.value = false;
+	}
+}
+
+watch(
+	() => props.modelValue,
+	() => {
+		if (selectedValue.value !== props.modelValue) selectedValue.value = props.modelValue;
+	},
+	{ immediate: true },
+);
+
+onMounted(() => {
+	// scroll event listener
+	window.addEventListener('wheel', hideDrop);
+
+	selectedValue.value = props.modelValue;
+	if (typeof props.field.options === 'string') {
+		props.field.options.split('\n').forEach((option) => {
+			optionsRef.value?.push({ label: option, value: option });
+		});
+	} else {
+		props.field.options.forEach((option) => {
+			optionsRef.value?.push(option);
+		});
+	}
+	document.addEventListener('click', handleClick);
+});
+
+function toggleShowList() {
+	setPosition();
+	showList.value = !showList.value;
+}
+
+onUnmounted(() => {
+	document.removeEventListener('click', handleClick);
+	// window.removeEventListener('wheel', hideDrop);
+});
+</script>
+
+<style scoped>
+.custom-select {
+	position: relative;
+	font-size: var(--input-font-size);
+}
+
+.custom-select .input {
+	width: 100%;
+	cursor: pointer;
+	background: var(--input-bg);
+	min-height: var(--input-height);
+	border: none;
+	border-radius: var(--input-border-radius);
+	color: var(--input-color);
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	text-align: start;
+	margin-inline-end: 20px;
+	justify-content: center;
+	margin-bottom: 2px;
+}
+
+.custom-select .input:after {
+	content: 'keyboard_arrow_down';
+	font-family: 'Material Symbols Outlined', serif;
+	position: absolute;
+	top: calc(var(--input-height) / 2 - 10px);
+	font-size: calc(var(--input-font-size) * 1.5);
+	right: calc(var(--input-height) / 4);
+	height: 100%;
+}
+
+[dir='rtl'] .custom-select .input:after {
+	right: unset;
+	left: calc(var(--input-font-size) / 2);
+}
+
+[dir='rtl'] .custom-select-drop {
+	inset-inline-end: v-bind(left);
+	inset-inline-start: unset;
+}
+
+.custom-select-drop {
+	position: fixed;
+
+	cursor: pointer;
+	font-size: 12px;
+	top: v-bind('`${top}px`');
+	inset-inline-start: v-bind(left);
+	box-sizing: border-box;
+	min-width: 220px;
+	width: v-bind(width);
+	background: var(--bgl-white);
+	box-shadow: 0 0 10px 0 var(--bgl-shadow);
+	border-radius: 10px;
+	z-index: 10000;
+	overflow-y: auto;
+	opacity: 0;
+	pointer-events: none;
+	max-height: 0;
+	/*transition: var(--bgl-transition);*/
+}
+
+.open-select.custom-select-drop {
+	opacity: 1;
+	max-height: 150px;
+	pointer-events: all;
+	/*transition: var(--bgl-transition);*/
+}
+
+.custom-select-drop>* {
+	/*transition: var(--bgl-transition); */
+	padding: 0.5rem 0.75rem;
+}
+
+.custom-select-drop>*:hover {
+	background: var(--bgl-blue-light);
+}
+
+.custom-select-drop>*:active {
+	filter: var(--bgl-hover-filter);
+}
+
+.bagel-input label {
+	margin-bottom: 0;
+}
+</style>

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

@@ -0,0 +1,319 @@
+<template>
+	<div
+		class="table-field-wrap"
+		:title="description"
+	>
+		<div class="bagel-input">
+			<label>
+				{{ fieldMeta?.label }}
+			</label>
+		</div>
+		<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`"
+				>
+					{{ field.label }}
+				</div>
+			</div>
+			<VueDraggableNext
+				v-model="listRef"
+				animation="150"
+				handle=".table-reorder"
+				group="mainGroup"
+				easing="cubic-bezier(1, 0, 0, 1)"
+				ghost-class="ghost"
+				@end="ended"
+			>
+				<TransitionGroup>
+					<div
+						v-for="(row, index) in modelValue"
+						class="flex table-row"
+						:key="row.id"
+					>
+						<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}`"
+						>
+							<BagelInput
+								no-label
+								:field-meta="field"
+								:bagel-app="bagel"
+								@update:modelValue="(value: any) => handleUpdateModelValue(value, index, field.fieldname)"
+								:model-value="row[field.fieldname]"
+							/>
+						</div>
+
+						<div class="table-action">
+							<MaterialIcon
+								icon="delete"
+								@click="removeRow(index)"
+							/>
+						</div>
+					</div>
+				</TransitionGroup>
+			</VueDraggableNext>
+		</div>
+		<Btn
+			thin
+			flat
+			icon="add"
+			color="light"
+			@click="addRow"
+		>
+			New
+		</Btn>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { VueDraggableNext } from 'vue-draggable-next';
+// import { EntityMeta } from 'bagel-sdk/types';
+import { onMounted, ref } from 'vue';
+import { Btn } from '@/components';
+// import { bagelApp as api } from '../../../index';
+import MaterialIcon from '../MaterialIcon.vue';
+import { formatString } from '@/utils/strings';
+// import TransitionGroupPop from '../../transitions/TransitionGroupPop.vue';
+// import { formatString } from '../../../composables';
+// import { ButtonIcon } from 'src/components/buttons'
+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;
+	margin-inline-start: -1rem;
+	padding-inline-start: 1rem;
+	padding-bottom: 1rem;
+}
+
+.table-field-wrap {
+	margin-bottom: -1rem;
+}
+
+.table-cell {
+	border-inline-end: 1px solid var(--border-color);
+	border-bottom: 1px solid var(--border-color);
+}
+
+.table-row {
+	transition: var(--bgl-transition);
+	position: relative;
+	width: max-content;
+}
+
+.table-row:hover {
+	background: var(--bgl-gray-light);
+}
+
+.table-reorder {
+	opacity: 0;
+	width: 2rem;
+	text-align: center;
+	position: absolute;
+	margin-inline-start: -2rem;
+}
+
+.table-row:hover .table-reorder {
+	opacity: 1;
+	cursor: grab;
+}
+
+.table-reorder:active {
+	opacity: 1;
+	cursor: grab;
+}
+
+.btn.thin.btn-txt {
+	margin-inline-start: -1rem;
+	margin-top: 1rem;
+}
+
+.table-header {
+	display: flex;
+	width: max-content;
+}
+
+.header-col {
+	min-width: calc(var(--input-height) * 3);
+	font-size: 13px;
+	color: var(--input-color);
+	padding: 10px 0;
+	border-bottom: 1px solid var(--border-color);
+}
+
+.table-cell,
+.header-col {
+	width: 160px;
+}
+
+.table-cell.check,
+.header-col.check {
+	width: 100px;
+}
+
+.table-cell.date,
+.header-col.date {
+	width: 140px;
+}
+
+.header-col.small-text,
+.header-col.text,
+.header-col.long-text,
+.header-col.json,
+.table-cell.small-text,
+.table-cell.text,
+.table-cell.long-text,
+.table-cell.json {
+	width: 240px;
+}
+
+.table-cell.small-text .bagel-input,
+.table-cell.text .bagel-input,
+.table-cell.long-text .bagel-input,
+.table-cell.json .bagel-input {
+	height: 40px;
+	overflow: auto;
+}
+
+.table-action {
+	text-align: center;
+	position: sticky;
+	opacity: 0;
+	transition: var(--bgl-transition);
+	inset-inline-end: 0;
+	height: 100%;
+	margin-top: -1px;
+	background: var(--border-color);
+}
+
+.table-action>.icon-font {
+	padding: 11.4px;
+	cursor: pointer;
+	transition: var(--bgl-transition);
+}
+
+.table-action:hover>.icon-font {
+	background: var(--bgl-red);
+	color: var(--bgl-white);
+}
+
+.table-action:active>.icon-font {
+	filter: brightness(90%);
+}
+
+.table-row:hover .table-action {
+	opacity: 1;
+}
+</style>
+<style>
+.table-row .bagel-input input,
+.table-row .bagel-input textarea,
+.table-row .bagel-input .input {
+	border-radius: 0;
+	background: transparent;
+	color: var(--bgl-black);
+}
+
+.table-row .bagel-input textarea {
+	resize: none;
+	min-height: 40px;
+	overflow: auto;
+	margin: 0px;
+	padding: 0.64rem 0.7rem 0;
+}
+
+.table-row .bagel-input {
+	margin: 0;
+}
+
+.table-row .bagel-input input:focus-visible,
+.table-row .bagel-input textarea:focus-visible,
+.table-row .bagel-input .input:focus-visible {
+	background: var(--border-color);
+}
+
+.ghost {
+	opacity: 0;
+	background: #c8ebfb;
+}
+
+.sortable-chosen {
+	cursor: grabbing !important;
+	border-color: transparent;
+	background: var(--bgl-white);
+	border-radius: 10px;
+	box-shadow: 0 0 10px 0 rgb(0 0 0 /20%);
+}
+</style>