@bagelink/vue 0.0.466 → 0.0.471

package/src/components/form/BglForm.vue

@@ -1,101 +1,75 @@
-<template>
-	<template v-if="id">
-		<BglField
-			v-for="(field, i) in schema"
-			:key="field.id || `${i}p`"
-			:field="field"
-			v-model="data"
-		/>
-	</template>
-	<form
-		v-else-if="!slots.success || status !== 'success'"
-		ref="form"
-		@submit.prevent="runSubmit"
-	>
-		<Title tag="h4" :label="label" v-if="label" />
-		<BglField
-			v-for="(field, i) in schema"
-			:key="field.id || `${i}p`"
-			:field="field"
-			v-model="data"
-		/>
-		<slot name="submit" :submit="runSubmit" :isDirty />
-	</form>
-	<slot v-if="status === 'success'" name="success" />
-	<slot v-if="status === 'error'" name="error" />
-</template>
-
 <script lang="ts" setup>
-import { useSlots, watch } from 'vue';
-import { useModal, BglField, Title } from '@bagelink/vue';
-
-import { type BglFormSchemaT } from '@bagelink/vue';
+import { useSlots, watch } from 'vue'
+import { BglField, Title, useModal } from '@bagelink/vue'
 
-const slots = useSlots();
-
-const { showModal } = useModal();
+import type { BglFormSchemaT } from '@bagelink/vue'
 
 const props = withDefaults(
 	defineProps<{
-		label?: string;
-		id?: string;
-		schema: BglFormSchemaT<any>;
-		modelValue?: Record<string, any>;
-		onDelete?: (id: string) => void;
-		onSubmit?: (data: any) => void;
-		status?: FormStatus;
+		label?: string
+		id?: string
+		schema: BglFormSchemaT<any>
+		modelValue?: Record<string, any>
+		onDelete?: (id: string) => void
+		onSubmit?: (data: any) => void
+		status?: FormStatus
 	}>(),
 	{
 		modelValue: () => ({}),
 	},
-);
+)
+
+const emit = defineEmits(['update:modelValue', 'submit', 'dirty'])
+
+const slots = useSlots()
 
-const instAt = new Date();
-const timeSinceInst = () => new Date().getTime() - instAt.getTime();
-let formData = $ref(props.modelValue || {});
-const emit = defineEmits(['update:modelValue', 'submit', 'dirty']);
-let isDirty = $ref(false);
+const { showModal } = useModal()
+
+const instAt = new Date()
+const timeSinceInst = () => new Date().getTime() - instAt.getTime()
+let formData = $ref(props.modelValue || {})
+let isDirty = $ref(false)
 let data = $computed({
 	set: (val: any) => {
 		if (timeSinceInst() > 100) {
-			emit('dirty');
-			isDirty = true;
+			emit('dirty')
+			isDirty = true
 		}
-		formData = val;
-		emit('update:modelValue', val);
+		formData = val
+		emit('update:modelValue', val)
 	},
 	get: () => formData,
-});
-const form = $ref<HTMLFormElement>();
+})
+const form = $ref<HTMLFormElement>()
 
-const validateForm = () => form?.reportValidity?.();
+const validateForm = () => form?.reportValidity()
 
-const clearForm = () => (data = {});
+const clearForm = () => (data = {})
 
-type FormStatus = 'idle' | 'loading' | 'success' | 'error';
+type FormStatus = 'idle' | 'loading' | 'success' | 'error'
 
 watch(
 	() => props.status,
 	(status) => {
 		if (status === 'success') {
-			isDirty = false;
-			clearForm();
+			isDirty = false
+			clearForm()
 		}
 	},
 	{ immediate: true },
-);
+)
 
-const runSubmit = () => {
-	const isValid = validateForm();
-	if (!isValid) return;
+function runSubmit() {
+	const isValid = validateForm()
+	if (!isValid) return
 	// props.onSubmit?.(data);
-	emit('submit', { ...formData });
-	isDirty = false;
-};
+	emit('submit', { ...formData })
+	isDirty = false
+}
 
-const i18nT = (val: string) => val;
+const i18nT = (val: string) => val
 
-const deleteItem = () => {
+function deleteItem() {
 	showModal(
 		{
 			class: 'small-modal',
@@ -110,17 +84,44 @@ const deleteItem = () => {
 			],
 		},
 		{ default: i18nT('form.deleteMessage') },
-	);
-};
+	)
+}
 
 defineExpose({
 	validateForm,
 	deleteItem,
 	isDirty,
 	clearForm,
-});
+})
 </script>
 
+<template>
+	<template v-if="id">
+		<BglField
+			v-for="(field, i) in schema"
+			:key="field.id || `${i}p`"
+			v-model="data"
+			:field="field"
+		/>
+	</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 schema"
+			:key="field.id || `${i}p`"
+			v-model="data"
+			:field="field"
+		/>
+		<slot name="submit" :submit="runSubmit" :isDirty />
+	</form>
+	<slot v-if="status === 'success'" name="success" />
+	<slot v-if="status === 'error'" name="error" />
+</template>
+
 <style>
 .del-top {
 	transform: translateY(-2.6rem);

package/src/components/form/index.ts

@@ -1,4 +1,4 @@
-export { default as BglForm } from './BglForm.vue';
-export { default as BagelForm } from './BglForm.vue';
-export { default as BglField } from './BglField.vue';
-export * from './inputs';
+export { default as BglForm } from './BglForm.vue'
+export { default as BagelForm } from './BglForm.vue'
+export { default as BglField } from './BglField.vue'
+export * from './inputs'

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

@@ -1,30 +1,31 @@
-<template>
-  <div class="bagel-input bgl-checkbox" :title="title" :class="{ small: small }">
-    <div class="check-square" :class="{ checked: checked }" @click="checked = !checked">
-      <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>
-      <input :required="required" :id="id" type="checkbox" v-model="checked">
-      <slot name="label">
-        {{ label }}
-      </slot>
-    </label>
-  </div>
-</template>
-
 <script setup lang="ts">
 defineProps<{
-  label?: string;
-  id?: string;
-  title?: string;
-  small?: boolean;
-  required?: boolean
-}>();
+	label?: string
+	id?: string
+	title?: string
+	small?: boolean
+	required?: boolean
+}>()
 
-const checked = defineModel<boolean>('modelValue', { default: false });
+const checked = defineModel<boolean>('modelValue', { default: false })
 </script>
+
+<template>
+	<div class="bagel-input bgl-checkbox" :title="title" :class="{ small }">
+		<div class="check-square" :class="{ checked }" @click="checked = !checked">
+			<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>
+			<input :id="id" v-model="checked" :required="required" type="checkbox">
+			<slot name="label">
+				{{ label }}
+			</slot>
+		</label>
+	</div>
+</template>
+
 <style>
 :root {
   --bgl-white: #fff;
@@ -35,6 +36,7 @@ const checked = defineModel<boolean>('modelValue', { default: false });
 
 }
 </style>
+
 <style scoped>
 .bgl-checkbox {
   position: relative;

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

@@ -1,21 +1,21 @@
+<script setup lang="ts">
+import { MaterialIcon } from '@bagelink/vue'
+
+const val = defineModel('modelValue', {
+	type: Boolean,
+	default: false,
+})
+</script>
+
 <template>
 	<label class="primary-checkbox">
-		<input type="checkbox" v-model="val" >
+		<input v-model="val" type="checkbox">
 		<span>
 			<MaterialIcon icon="check" />
 		</span>
 	</label>
 </template>
 
-<script setup lang="ts">
-import { MaterialIcon } from '@bagelink/vue';
-
-const val = defineModel('modelValue', {
-	type: Boolean,
-	default: false,
-});
-</script>
-
 <style scoped>
 .primary-checkbox input {
   display: none;

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

@@ -1,36 +1,38 @@
-<template>
-	<div class="bagel-input" :class="{ small }" :title="label" v-if="id">
-		<label>
-			{{ label }}
-			<input :id="id" v-model="inputVal" type="color" :placeholder="placeholder || label"
-				:class="{ 'no-edit': !editMode }" :required="required" v-bind="nativeInputAttrs">
-		</label>
-	</div>
-</template>
-
 <script setup lang="ts">
-import { watch } from 'vue';
+import { watch } from 'vue'
 
-const emits = defineEmits(['update:modelValue']);
 const props = withDefaults(
 	defineProps<{
-		label?: string;
-		id?: string;
-		placeholder?: string;
-		modelValue: any;
-		editMode?: boolean;
-		small?: boolean;
-		required?: boolean;
-		nativeInputAttrs?: Record<string, any>;
+		label?: string
+		id?: string
+		placeholder?: string
+		modelValue: any
+		editMode?: boolean
+		small?: boolean
+		required?: boolean
+		nativeInputAttrs?: Record<string, any>
 	}>(),
 	{
 		editMode: true,
 	},
-);
-const inputVal = $ref<string>(props.modelValue);
+)
+const emits = defineEmits(['update:modelValue'])
+const inputVal = $ref<string>(props.modelValue)
 
 watch(
 	() => inputVal,
-	(newVal) => emits('update:modelValue', newVal),
-);
+	(newVal) => { emits('update:modelValue', newVal) },
+)
 </script>
+
+<template>
+	<div v-if="id" class="bagel-input" :class="{ small }" :title="label">
+		<label>
+			{{ label }}
+			<input
+				:id="id" v-model="inputVal" type="color" :placeholder="placeholder || label"
+				:class="{ 'no-edit': !editMode }" :required="required" v-bind="nativeInputAttrs"
+			>
+		</label>
+	</div>
+</template>

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

@@ -1,69 +1,69 @@
-<template>
-	<div
-		class="bagel-input"
-		:title="label"
-		:class="{ small: small }"
-	>
-		<label v-if="label">
-			{{ label }}
-		</label>
-		<VDatepicker
-			ref="datePicker"
-			:auto-apply="true"
-			v-model="date"
-			:enable-time-picker="enableTime"
-			v-bind="extraProps"
-		/>
-	</div>
-</template>
-
 <script setup lang="ts">
-import VDatepicker, { type DatePickerInstance, type VueDatePickerProps } from '@vuepic/vue-datepicker';
-import '@vuepic/vue-datepicker/dist/main.css';
-import { onMounted } from 'vue';
-
-const datePicker = $ref<DatePickerInstance>();
+import VDatepicker, { type DatePickerInstance, type VueDatePickerProps } from '@vuepic/vue-datepicker'
+import '@vuepic/vue-datepicker/dist/main.css'
+import { onMounted } from 'vue'
 
 const props = withDefaults(
 	defineProps<{
-		label?: string;
-		editMode?: boolean;
-		small?: boolean;
-		enableTime?: boolean;
-		modelValue?: string | Date;
-		defaultValue?: string | Date;
-		extraProps?: VueDatePickerProps;
+		label?: string
+		editMode?: boolean
+		small?: boolean
+		enableTime?: boolean
+		modelValue?: string | Date
+		defaultValue?: string | Date
+		extraProps?: VueDatePickerProps
 	}>(),
 	{
 		enableTime: false,
 		editMode: true,
 		small: false,
 	},
-);
+)
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue'])
+
+const datePicker = $ref<DatePickerInstance>()
 
 const date = $computed<string | Date>({
 	get: () => props.modelValue || '',
 	set: (val) => {
-		const d = typeof val === 'string' ? new Date(val) : val;
+		const d = typeof val === 'string' ? new Date(val) : val
 		if (props.enableTime) {
-			emit('update:modelValue', d.toISOString());
+			emit('update:modelValue', d.toISOString())
 		} else {
-			emit('update:modelValue', d.toISOString().split('T')[0]);
+			emit('update:modelValue', d.toISOString().split('T')[0])
 		}
 	},
-});
+})
 
 onMounted(() => {
 	if (
 		props.defaultValue && date === ''
 	) {
-		Object.assign(date, { date: props.defaultValue });
+		Object.assign(date, { date: props.defaultValue })
 	}
-});
+})
 </script>
 
+<template>
+	<div
+		class="bagel-input"
+		:title="label"
+		:class="{ small }"
+	>
+		<label v-if="label">
+			{{ label }}
+		</label>
+		<VDatepicker
+			ref="datePicker"
+			v-model="date"
+			:auto-apply="true"
+			:enable-time-picker="enableTime"
+			v-bind="extraProps"
+		/>
+	</div>
+</template>
+
 <style>
 .dp__input_wrap input {
 	padding-inline-start: 2rem !important;

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

@@ -1,10 +1,42 @@
+<script setup lang="ts">
+import VDatepicker from '@vuepic/vue-datepicker'
+import '@vuepic/vue-datepicker/dist/main.css'
+
+const props = defineProps<{
+	label?: string
+	id?: string
+	options?: Record<string, any>
+	showTimeWrap?: boolean
+	modelValue?: Date
+	allowedDates?: string[] | Date[]
+	disabledDates?: string[] | Date[]
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const selectedDate = $computed({
+	get: () => props.modelValue || new Date(),
+	set: (value: Date) => {
+		console.log(value)
+		emit('update:modelValue', value)
+	},
+})
+const selectedHour = $ref()
+
+const hours = Array.from({ length: 18 }, (_, index) => {
+	const hour = Math.floor(index / 2) + 9
+	const minute = index % 2 === 0 ? '00' : '30'
+	return `${hour}:${minute}`
+})
+</script>
+
 <template>
 	<div class="datetime-wrap">
 		<div class="date-wrap">
 			<VDatepicker
+				v-model="selectedDate"
 				inline
 				week-start="0"
-				v-model="selectedDate"
 				:allowed-dates="allowedDates"
 				:disabled-dates="disabledDates"
 				:auto-apply="true"
@@ -17,52 +49,21 @@
 				<template #action-preview />
 			</VDatepicker>
 		</div>
-		<div class="time-wrap" v-if="showTimeWrap">
+		<div v-if="showTimeWrap" class="time-wrap">
 			<template v-for="hr in hours" :key="hr">
 				<input
-					type="radio"
 					:id="`${hr}_${id}`"
+					v-model="selectedHour"
+					type="radio"
 					:name="label"
 					:value="hr"
-					v-model="selectedHour"
-				/>
+				>
 				<label :for="`${hr}_${id}`">{{ hr }}</label>
 			</template>
 		</div>
 	</div>
 </template>
 
-<script setup lang="ts">
-import VDatepicker from '@vuepic/vue-datepicker';
-import '@vuepic/vue-datepicker/dist/main.css';
-
-const props = defineProps<{
-	label?: string;
-	id?: string;
-	options?: Record<string, any>;
-	showTimeWrap?: boolean;
-	modelValue?: Date;
-	allowedDates?: string[] | Date[];
-	disabledDates?: string[] | Date[];
-}>();
-
-const emit = defineEmits(['update:modelValue']);
-
-const selectedDate = $computed({
-	get: () => props.modelValue || new Date(),
-	set: (value: Date) => {
-		console.log(value);
-		emit('update:modelValue', value);
-	},
-});
-const selectedHour = $ref();
-
-const hours = Array.from({ length: 18 }, (_, index) => {
-	const hour = Math.floor(index / 2) + 9;
-	const minute = index % 2 === 0 ? '00' : '30';
-	return `${hour}:${minute}`;
-});
-</script>
 <style>
 .datetime-wrap {
 	display: flex;