@bagelink/vue 0.0.1147 → 0.0.1155

package/src/components/form/BglField.vue

@@ -1,132 +0,0 @@
-<script setup lang="ts" generic="T extends Record<string, any>">
-import type { Field, BagelFormState } from '@bagelink/vue'
-import {
-	CheckInput,
-	DateInput,
-	FieldArray,
-
-	FileUpload,
-	RichText,
-	SelectInput,
-	TextInput,
-	ToggleInput,
-	bindAttrs,
-	classify,
-	NumberInput,
-	UploadInput,
-
-	BglForm
-} from '@bagelink/vue'
-import { inject } from 'vue'
-import TabsNav from '../layout/TabsNav.vue'
-import { FORM_STATE_KEY, provideBagelFormState } from './useBagelFormState'
-
-const props = defineProps<{
-	field: Field<T>
-	fieldID?: string
-	modelValue?: any
-	parentPath?: string
-}>()
-
-const emit = defineEmits<{
-	'update:modelValue': [value: any]
-}>()
-
-const formState = inject<BagelFormState<T>>(FORM_STATE_KEY) ?? provideBagelFormState(props.modelValue)
-
-const customAttrs = $ref<{ [key: string]: any }>({})
-
-const is = $computed(() => {
-	if (props.field.$el === 'text') return TextInput
-	if (props.field.$el === 'textarea') {
-		customAttrs.multiline = true
-		return TextInput
-	}
-	if (props.field.$el === 'number') return NumberInput
-	if (props.field.$el === 'array') return FieldArray
-	if (props.field.$el === 'select') return SelectInput
-	if (props.field.$el === 'toggle') return ToggleInput
-	if (props.field.$el === 'check') return CheckInput
-	if (props.field.$el === 'richtext') return RichText
-	if (props.field.$el === 'upload') return UploadInput
-	if (props.field.$el === 'file') return FileUpload
-	if (props.field.$el === 'date') return DateInput
-	if (props.field.$el === 'tabs') return TabsNav
-	if (props.field.$el === 'bglform') return BglForm
-	return props.field.$el ?? 'div'
-})
-
-const fieldData = $computed({
-	get: () => {
-		if (!props.fieldID) return props.field.defaultValue ?? (props.field.$el === 'form' ? {} : '')
-		const value = formState.getFieldData(props.fieldID)
-		if (props.field.$el === 'form' && !value) return {}
-		return value ?? ''
-	},
-	set: (val: any) => {
-		if (!props.fieldID) return
-		const currentValue = formState.getFieldData(props.fieldID)
-		if (JSON.stringify(val) === JSON.stringify(currentValue)) return
-
-		emit('update:modelValue', val)
-		if (props.field.onUpdate) {
-			props.field.onUpdate(val, currentValue)
-		}
-		formState.updateField(props.fieldID, val)
-	}
-})
-
-const vIf = $computed(() => {
-	if (props.field['v-if'] === undefined && props.field.vIf === undefined) return true
-	if (typeof props.field['v-if'] === 'boolean' || typeof props.field.vIf === 'boolean') return props.field['v-if']
-	if (typeof props.field['v-if'] === 'string' || typeof props.field.vIf === 'string') return true
-	if (typeof props.field['v-if'] === 'function') return props.field['v-if'](fieldData, formState.data.value as T)
-	if (typeof props.field.vIf === 'function') return props.field.vIf(fieldData, formState.data.value as T)
-	return true
-})
-
-// const computedFieldData = $computed(
-// 	() => props.field.transform?.(fieldData, formState.data.value as T) ?? fieldData
-// )
-
-const computedOptions = $computed(
-	() => bindAttrs({ options: props.field.options }, fieldData, formState.data.value).options
-)
-
-const computedAttrs = $computed(() => {
-	const attrs = { ...customAttrs, ...props.field.attrs }
-	return bindAttrs(attrs, fieldData, formState.data.value)
-})
-
-const computedClass = $computed(
-	() => classify(fieldData, formState.data.value, props.field.class, props.field.attrs?.class)
-)
-</script>
-
-<template>
-	<component
-		v-bind="computedAttrs"
-		:is="is"
-		v-if="vIf"
-		v-model="fieldData"
-		:fieldID="props.fieldID"
-		:required="field.required"
-		:class="computedClass"
-		:label="field.label"
-		:placeholder="field.placeholder || field.label"
-		:defaultValue="field.defaultValue"
-		:disabled="field.disabled"
-		:options="computedOptions"
-		:helptext="field.helptext"
-	>
-		<template v-for="(child, ii) in field.children" :key="ii">
-			<BglField
-				v-if="(typeof child !== 'string')"
-				:fieldID="[props.fieldID, child.id].filter(Boolean).join('.')"
-				:field="child"
-				:parent-path="props.fieldID"
-			/>
-			<span v-else>{{ child }}</span>
-		</template>
-	</component>
-</template>

package/src/components/form/BglForm.vue

@@ -1,157 +0,0 @@
-<script lang="ts" setup>
-import type { BglFormSchemaFnT } from '@bagelink/vue'
-import type { BagelFormState } from './useBagelFormState'
-import { BglField, Title, useBglSchema, useModal } from '@bagelink/vue'
-import { inject, useSlots, watch } from 'vue'
-import { FORM_STATE_KEY, provideBagelFormState } from './useBagelFormState'
-
-export type FormStatus = 'idle' | 'loading' | 'success' | 'error'
-
-const props = withDefaults(
-	defineProps<{
-		label?: string
-		fieldID?: string
-		schema: BglFormSchemaFnT<any>
-		modelValue?: { [key: string]: any }
-		onDelete?: (id: string) => void
-		onSubmit?: (data: any) => void
-		status?: FormStatus
-		tag?: 'template' | 'form'
-	}>(),
-	{
-		modelValue: () => ({}),
-		tag: 'form',
-	},
-)
-
-const emit = defineEmits(['update:modelValue', 'submit', 'dirty'])
-
-const slots = useSlots() as any
-const { showModal } = useModal()
-
-// Check if we're a nested form
-const existingFormState = inject<BagelFormState | undefined>(FORM_STATE_KEY)
-const isNested = Boolean(existingFormState && props.fieldID)
-
-// Only provide new form state if we're not nested
-const { data, isDirty } = isNested
-	? existingFormState!
-	: provideBagelFormState(props.modelValue)
-
-let emitDirty = $ref(false)
-
-if (!isNested) {
-	watch(() => props.modelValue, (newVal) => {
-		if (emitDirty) {
-			emitDirty = false
-			return
-		}
-		data.value = newVal
-	}, { deep: true, immediate: true })
-
-	watch(() => data.value, (newVal) => {
-		if (emitDirty) return
-		emitDirty = true
-		emit('dirty')
-		emit('update:modelValue', newVal)
-	}, { deep: true })
-}
-
-const form = $ref<HTMLFormElement>()
-
-function validateForm() {
-	setTimeout(() => form?.reportValidity(), 300)
-	if (!form) return false
-	return form.reportValidity()
-}
-
-function clearForm() {
-	if (!isNested) {
-		data.value = {}
-	}
-}
-
-watch(
-	() => props.status,
-	(status) => {
-		if (status === 'success' && !isNested) {
-			isDirty.value = false
-			clearForm()
-		}
-	},
-	{ immediate: true },
-)
-
-function runSubmit() {
-	const isValid = validateForm()
-	if (!isValid) return
-	emit('submit', { ...data.value })
-	if (!isNested) {
-		isDirty.value = false
-	}
-}
-
-const i18nT = (val: string) => val
-
-function deleteItem() {
-	showModal(
-		{
-			class: 'small-modal',
-			title: i18nT('Are you sure?'),
-			actions: [
-				{
-					value: 'Confirm',
-					color: 'red',
-					onClick: () => props.onDelete?.(data.value.id),
-				},
-				{ value: 'Cancel', color: 'gray' },
-			],
-		},
-		{ default: i18nT('form.deleteMessage') },
-	)
-}
-
-const computedSchema = $computed(() => useBglSchema({ schema: props.schema }))
-
-defineExpose({
-	submit: runSubmit,
-	validateForm,
-	deleteItem,
-	isDirty,
-	clearForm,
-})
-</script>
-
-<template>
-	<template v-if="tag === 'template'">
-		<BglField
-			v-for="(field, i) in computedSchema"
-			:key="field.id || `${i}p`"
-			:fieldID="field.id"
-			:field="field"
-		/>
-		<slot name="submit" :submit="runSubmit" :isDirty="isDirty" :validateForm="validateForm" />
-	</template>
-	<form
-		v-else-if="!slots.success || status !== 'success'"
-		ref="form"
-		@submit.prevent="runSubmit"
-	>
-		<Title v-if="label" tag="h4" :label="label" />
-		<BglField
-			v-for="(field, i) in computedSchema"
-			:key="field.id || `${i}p`"
-			:fieldID="field.id"
-			:field="field"
-		/>
-		<slot name="submit" :submit="runSubmit" :isDirty="isDirty" :validateForm="validateForm" />
-	</form>
-	<slot v-if="status === 'success'" name="success" />
-	<slot v-if="status === 'error'" name="error" />
-</template>
-
-<style>
-.del-top {
-	transform: translateY(-2.6rem);
-}
-</style>