@bagelink/vue 0.0.1100 → 0.0.1104

package/dist/style.css

@@ -755,6 +755,182 @@ pre code.hljs{
  direction: ltr;
 }
 
+.bagel-input[data-v-e36ecd8c] {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	position: relative;
+}
+.date-picker-container[data-v-e36ecd8c] {
+	position: relative;
+}
+.date-input[data-v-e36ecd8c] {
+	padding: 0.5rem;
+	border: 1px solid #ddd;
+	border-radius: 4px;
+	font-size: 1rem;
+	width: 100%;
+	background: white;
+}
+.date-input[data-v-e36ecd8c]:focus {
+	outline: none;
+	border-color: #4a90e2;
+	box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
+}
+.date-input[data-v-e36ecd8c]:disabled {
+	background-color: #f5f5f5;
+	cursor: not-allowed;
+}
+.small .date-input[data-v-e36ecd8c] {
+	padding: 0.25rem;
+	font-size: 0.875rem;
+}
+.required[data-v-e36ecd8c] {
+	color: #ff4d4f;
+	margin-left: 4px;
+}
+.calendar-popup[data-v-e36ecd8c] {
+	background: white;
+	border: 1px solid #ddd;
+	border-radius: 4px;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+	padding: 1rem;
+}
+.calendar-container[data-v-e36ecd8c] {
+	display: flex;
+	gap: 1rem;
+}
+.calendar-section[data-v-e36ecd8c] {
+	width: 300px;
+}
+.calendar-header[data-v-e36ecd8c] {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 1rem;
+}
+.month-year-selector[data-v-e36ecd8c] {
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+}
+.month-btn[data-v-e36ecd8c],
+.year-btn[data-v-e36ecd8c] {
+	background: none;
+	border: none;
+	font-weight: 500;
+	cursor: pointer;
+	padding: 0.25rem 0.5rem;
+	border-radius: 4px;
+}
+.month-btn[data-v-e36ecd8c]:hover,
+.year-btn[data-v-e36ecd8c]:hover {
+	background-color: #f5f5f5;
+}
+.calendar-grid[data-v-e36ecd8c] {
+	display: grid;
+	grid-template-columns: repeat(7, 1fr);
+	gap: 0.25rem;
+}
+.month-grid[data-v-e36ecd8c] {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	grid-template-rows: repeat(4, 1fr);
+	gap: 0.5rem;
+	padding: 0.5rem;
+}
+.year-grid[data-v-e36ecd8c] {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	grid-template-rows: repeat(7, 1fr);
+	gap: 0.5rem;
+	padding: 0.5rem;
+}
+.month-item[data-v-e36ecd8c],
+.year-item[data-v-e36ecd8c] {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: none;
+	background: none;
+	cursor: pointer;
+	border-radius: 4px;
+	font-size: 0.875rem;
+	color: #333;
+	padding: 0.5rem;
+	min-height: 2.5rem;
+}
+.month-item[data-v-e36ecd8c]:hover:not(.disabled),
+.year-item[data-v-e36ecd8c]:hover:not(.disabled) {
+	background-color: #f5f5f5;
+}
+.month-item.selected[data-v-e36ecd8c],
+.year-item.selected[data-v-e36ecd8c] {
+	background-color: #4a90e2;
+	color: white;
+}
+.month-item.disabled[data-v-e36ecd8c],
+.year-item.disabled[data-v-e36ecd8c] {
+	color: #ccc;
+	cursor: not-allowed;
+}
+.weekday[data-v-e36ecd8c] {
+	text-align: center;
+	font-size: 0.875rem;
+	color: #666;
+	padding: 0.5rem 0;
+}
+.day[data-v-e36ecd8c] {
+	aspect-ratio: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: none;
+	background: none;
+	cursor: pointer;
+	border-radius: 50%;
+	font-size: 0.875rem;
+	color: #333;
+	padding: 0;
+}
+.day[data-v-e36ecd8c]:hover:not(.disabled) {
+	background-color: #f5f5f5;
+}
+.day.selected[data-v-e36ecd8c] {
+	background-color: #4a90e2;
+	color: white;
+}
+.day.today[data-v-e36ecd8c]:not(.selected) {
+	border: 1px solid #4a90e2;
+}
+.day.disabled[data-v-e36ecd8c] {
+	color: #ccc;
+	cursor: not-allowed;
+}
+.timezone-display[data-v-e36ecd8c] {
+	color: #666;
+	font-size: 0.875rem;
+	text-align: center;
+}
+.time-picker[data-v-e36ecd8c] {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	border-left: 1px solid #ddd;
+	width: 100px;
+	align-items: center;
+}
+.time-input-group[data-v-e36ecd8c] {
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+}
+.time-input-group span[data-v-e36ecd8c] {
+	font-size: 1.25rem;
+	color: #666;
+	padding: 0 0.25rem;
+}
+
 .datetime-wrap {
 	display: flex;
 	gap: 3rem;
@@ -1075,30 +1251,35 @@ pre code.hljs{
 	direction: ltr;
 }
 
-.txtInputIconStart .iconStart[data-v-a6e0446d] {
+.txtInputIconStart .iconStart[data-v-3a20cf4a] {
 	color: var(--input-color);
 	position: absolute;
     inset-inline-start:calc(var(--input-height) / 3 - 0.25rem);
 	margin-top: calc(var(--input-height) / 2 );
 	line-height: 0;
 }
-.textInputSpinnerWrap .spinner[data-v-a6e0446d] {
+.textInputSpinnerWrap .spinner[data-v-3a20cf4a] {
 	color: var(--input-color);
 	position: absolute;
 	inset-inline-end: 0;
 	margin-top: calc(var(--input-height) / -1);
 	line-height: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 0;
 }
-.top-bgl-ctrl-num-btn[data-v-a6e0446d]{
+.top-bgl-ctrl-num-btn[data-v-3a20cf4a]{
 	margin-top: calc(var(--input-height) / 10) !important;
 }
-.bgl-ctrl-num-btn[data-v-a6e0446d]{
+.bgl-ctrl-num-btn[data-v-3a20cf4a]{
 	height: calc(var(--input-height) / 2.5) !important;
+	isolation: isolate;
 }
-.bgl-big-ctrl-num-btn[data-v-a6e0446d]{
+.bgl-big-ctrl-num-btn[data-v-3a20cf4a]{
 	width: 100% !important;
+	isolation: isolate;
 }
-.bgl-number-input[data-v-a6e0446d]{
+.bgl-number-input[data-v-3a20cf4a]{
 	padding-inline-end: 1.75rem !important;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.1100",
+  "version": "0.0.1104",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Dropdown.vue

@@ -56,12 +56,18 @@ defineProps<{
 const emit = defineEmits(['show', 'hide'])
 
 const ddownRef = $ref<typeof DDown>()
+const triggerRef = $ref<HTMLElement>()
 const shown = defineModel('shown', {
 	type: Boolean,
 	default: false,
 })
+
 const show = () => ddownRef?.show()
-const hide = () => ddownRef?.hide()
+function hide() {
+	// Return focus to trigger element before hiding
+	triggerRef?.focus()
+	ddownRef?.hide()
+}
 
 defineExpose({ show, hide, shown })
 </script>
@@ -75,8 +81,16 @@ defineExpose({ show, hide, shown })
 		@hide="emit('hide')"
 		@show="emit('show')"
 	>
+		<div ref="triggerRef" />
 		<slot name="trigger">
-			<Btn :class="triggerClass" :iconEnd="iconEnd" :icon="icon" :value="value" :thin="thin" :flat="flat" />
+			<Btn
+				:class="triggerClass"
+				:iconEnd="iconEnd"
+				:icon="icon"
+				:value="value"
+				:thin="thin"
+				:flat="flat"
+			/>
 		</slot>
 		<template #popper="{ hide, show }">
 			<slot :hide="hide" :show="show" />

package/src/components/form/BglField.vue

@@ -13,12 +13,10 @@ import {
 	classify,
 	NumberInput,
 	UploadInput,
-	type BagelFormState,
 	BglForm
 } from '@bagelink/vue'
-import { inject } from 'vue'
+import { useFormField } from '../../composables/useFormField'
 import TabsNav from '../layout/TabsNav.vue'
-import { FORM_STATE_KEY, provideBagelFormState } from './useBagelFormState'
 
 const props = defineProps<{
 	field: Field<T>
@@ -31,7 +29,7 @@ const emit = defineEmits<{
 	'update:modelValue': [value: any]
 }>()
 
-const formState = inject<BagelFormState<T>>(FORM_STATE_KEY) ?? provideBagelFormState(props.modelValue)
+const { fieldData } = useFormField(props)
 
 const customAttrs = $ref<{ [key: string]: any }>({})
 
@@ -55,50 +53,17 @@ const is = $computed(() => {
 	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
+	() => bindAttrs({ options: props.field.options }, fieldData, props.modelValue).options
 )
 
 const computedAttrs = $computed(() => {
 	const attrs = { ...customAttrs, ...props.field.attrs }
-	return bindAttrs(attrs, fieldData, formState.data.value)
+	return bindAttrs(attrs, fieldData, props.modelValue)
 })
 
 const computedClass = $computed(
-	() => classify(fieldData, formState.data.value, props.field.class, props.field.attrs?.class)
+	() => classify(fieldData, props.modelValue, props.field.class, props.field.attrs?.class)
 )
 </script>
 
@@ -106,7 +71,7 @@ const computedClass = $computed(
 	<component
 		v-bind="computedAttrs"
 		:is="is"
-		v-if="vIf"
+		v-if="field.vIf === undefined || field.vIf"
 		v-model="fieldData"
 		:fieldID="props.fieldID"
 		:required="field.required"

package/src/components/form/BglForm.vue

@@ -47,7 +47,7 @@ if (!isNested) {
 		data.value = newVal
 	}, { deep: true, immediate: true })
 
-	watch(() => data, (newVal) => {
+	watch(() => data.value, (newVal) => {
 		if (emitDirty) return
 		emitDirty = true
 		emit('dirty')