@bagelink/vue 1.2.45 → 1.2.48

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.2.45",
+  "version": "1.2.48",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -81,7 +81,7 @@
   },
   "dependencies": {
     "date-fns": "^4.1.0",
-    "@vueuse/core": "^13.0.0",
+    "@vueuse/core": "^13.1.0",
     "axios": "^1.8.4",
     "floating-vue": "^5.2.2",
     "libphonenumber-js": "1.12.6",

package/src/components/ListItem.vue

@@ -15,6 +15,8 @@ const props = defineProps<{
 	lead?: string
 	iconEnd?: IconType
 	target?: '_blank' | '_self'
+	thin?: boolean
+	fullWidth?: boolean
 	onClick?: () => void
 }>()
 
@@ -25,6 +27,10 @@ const isComponent = $computed(() => {
 	return 'div'
 })
 
+const isClickable = $computed(() => {
+	return props.to || props.href || props.onClick
+})
+
 const bind = $computed(() => {
 	const obj: { [key: string]: any } = {}
 	if (props.to) obj.to = props.to
@@ -44,27 +50,36 @@ const bind = $computed(() => {
 	<component
 		:is="isComponent"
 		v-bind="bind"
+		v-ripple="isClickable"
 		class="flex gap-05 list-item"
+		:class="{ 'py-1': !props.thin,
+			'py-05': props.thin,
+			'px-1': !props.fullWidth,
+			'px-0': props.fullWidth,
+		}"
 		@click="onClick"
 	>
 		<Avatar v-if="src || showAvatar" style="flex-basis: 1;" :name="title" :src="src" :size="40" />
 		<Icon v-if="icon" size="1.2" class="color-primary" :icon="icon" />
 
-		<div>
-			<p v-if="lead" class="txt10 no-margin txt-gray ellipsis txt-start">
+		<div class="txt-start">
+			<p v-if="lead" class="txt10 m-0 p-0 txt-gray ellipsis">
 				{{ lead }}
 				<slot name="lead" />
 			</p>
-			<p class="no-margin ellipsis line-height-14 pb-025 txt-start">
+			<p class="m-0 p-0 ellipsis-1 line-height-14 pb-025">
 				{{ title }}
 				<slot />
 			</p>
-			<p v-if="subtitle" class="txt12 no-margin txt-gray ellipsis">
+			<p v-if="subtitle" class="txt12 m-0 p-0 opacity-7 ellipsis-1">
 				{{ subtitle }}
 				<slot name="subtitle" />
 			</p>
 		</div>
-		<Icon v-if="iconEnd" :icon="iconEnd" class="transition-400" />
+		<div class="flex-grow-1" />
+		<slot name="action">
+			<Icon v-if="iconEnd" :icon="iconEnd" class="transition-400" />
+		</slot>
 	</component>
 </template>
 
@@ -83,7 +98,6 @@ button.list-item {
 	pointer-events: none;
 }
 .list-item {
-	padding: 0.6rem 1rem;
 	min-height: -webkit-fit-content;
 	min-height: -moz-fit-content;
 	min-height: fit-content;
@@ -94,6 +108,9 @@ button.list-item {
 	text-decoration: none;
 	position: relative;
 }
+.list-item > *{
+	margiin-bottom: 0;
+}
 
 .list-item::after {
 	content: '';
@@ -114,7 +131,7 @@ button.list-item {
 
 .list-item:hover,
 .list-item.router-link-active {
-	background-color: var(--bgl-primary-light);
+	background-color: var(--bgl-primary-tint);
 }
 .notClickable:hover{
 	background-color:unset;

package/src/components/Modal.vue

@@ -70,7 +70,7 @@ onUnmounted(() => {
 
 <template>
 	<div
-		class="bg-dark"
+		class="bg-dark-modal"
 		:class="{ 'is-side': side, 'is-active': isVisible, 'bg-lignt': false }"
 		@click="() => (dismissable ? closeModal() : '')"
 		@keydown.esc="closeModal"

package/src/components/form/FieldArray.vue

@@ -4,6 +4,7 @@ import type {
 	AttributeValue,
 	Attributes,
 	BagelFieldOptions,
+	BaseBagelField,
 	BglFormSchemaFnT,
 	Field,
 	Path
@@ -11,27 +12,33 @@ import type {
 import { BagelForm, Btn, Loading, Icon } from '@bagelink/vue'
 import { ref, onMounted, computed, watch } from 'vue'
 
+export interface FieldArrayProps<T, P extends Path<T>> {
+	el?: any
+	id: string
+	label?: string
+	placeholder?: string
+	children?: Field<T>[]
+	class?: AttributeValue | AttributeFn<T, P>
+	attrs?: Attributes<T, P>
+	required?: boolean
+	disabled?: boolean
+	helptext?: string
+	options?: BagelFieldOptions<T>
+	defaultValue?: any
+	add?: boolean
+	delete?: boolean
+	transform?: (value: T) => T
+	schema?: BglFormSchemaFnT<T>
+	modelValue: T[]
+	type?: 'object' | 'number' | 'text'
+}
+
+export interface PrimitiveArrFieldT extends BaseBagelField<{ value: string }, 'value'> {
+	type: FieldArrayProps<{ value: string }, 'value'>['type']
+}
+
 const props = withDefaults(
-	defineProps<{
-		el?: any
-		id: string
-		label?: string
-		placeholder?: string
-		children?: Field<T>[]
-		class?: AttributeValue | AttributeFn<T, P>
-		attrs?: Attributes<T, P>
-		required?: boolean
-		disabled?: boolean
-		helptext?: string
-		options?: BagelFieldOptions<T>
-		defaultValue?: any
-		add?: boolean
-		delete?: boolean
-		transform?: (value: T) => T
-		schema?: BglFormSchemaFnT<T>
-		modelValue: T[]
-		type?: 'object' | 'number' | 'text'
-	}>(),
+	defineProps<FieldArrayProps<T, P>>(),
 	{
 		delete: true,
 		add: true,
@@ -54,18 +61,18 @@ watch(() => props.modelValue, (newValue) => {
 }, { deep: true })
 
 // Generate schema for primitive types
-const primitiveSchema = computed(() => {
+const primitiveSchema = computed<PrimitiveArrFieldT[]>(() => {
 	if (props.type === 'text') {
-		return [{ id: 'value', type: 'text', label: '' }]
+		return [{ id: 'value', type: 'text', label: '', $el: 'text' }]
 	} else if (props.type === 'number') {
-		return [{ id: 'value', type: 'number', label: '' }]
+		return [{ id: 'value', type: 'number', label: '', $el: 'number' }]
 	}
 	return []
 })
 
 // Resolve schema
 async function resolveSchema() {
-	// For primitive types, use the predefined schema
+	// For primitive types, use the predefined schemaks
 	if (props.type !== 'object') {
 		resolvedSchemaData.value = primitiveSchema.value
 		schemaState.value = 'loaded'

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

@@ -2,7 +2,7 @@
 import { onMounted } from 'vue'
 
 const props = withDefaults(defineProps<{
-	label: string
+	label?: string
 	id?: string
 	title?: string
 	small?: boolean

package/src/styles/appearance.css

@@ -173,6 +173,10 @@
     background: var(--bgl-bg) !important;
 }
 
+.bg-dark {
+    background: var(--bgl-dark-bg);
+}
+
 .color-bg {
     color: var(--bgl-bg) !important;
 }
@@ -1015,6 +1019,14 @@
         background: var(--label-color) !important;
     }
 
+    .m_bg-bg {
+        background: var(--bgl-bg) !important;
+    }
+
+    .m_bg-dark {
+        background: var(--bgl-dark-bg);
+    }
+
     .m_bg-gray-light {
         background: var(--bgl-gray-light) !important;
     }

package/src/styles/modal.css

@@ -1,4 +1,4 @@
-.bg-dark {
+.bg-dark-modal {
     position: fixed;
     top: 0;
     right: 0;
@@ -105,16 +105,16 @@
     transform: translateX(0%);
 }
 
-.bg-dark.is-active {
+.bg-dark-modal.is-active {
     opacity: 1;
     pointer-events: all;
 }
 
-body:has(.bg-dark.is-active) {
+body:has(.bg-dark-modal.is-active) {
     overflow: hidden;
 }
 
-.is-side.bg-dark.is-active {
+.is-side.bg-dark-modal.is-active {
     opacity: 1;
     align-items: stretch;
 }