@bagelink/vue 0.0.528 → 0.0.538

package/package.json

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

package/src/components/Btn.vue

@@ -13,6 +13,7 @@ const props = withDefaults(
 		'theme'?: ThemeType
 		'flat'?: boolean
 		'border'?: boolean
+		'outline'?: boolean
 		'thin'?: boolean
 		'type'?: 'button' | 'submit' | 'reset'
 		'loading'?: boolean
@@ -33,6 +34,7 @@ const props = withDefaults(
 		role: 'button',
 		is: 'button',
 		border: false,
+		outline: false
 	},
 )
 
@@ -97,7 +99,7 @@ const computedBackgroundColor = $computed(
 			thin,
 			round,
 			'bgl_flatBtn': flat,
-			'bgl_btn-border': border,
+			'bgl_btn-border': border || outline,
 		}"
 		@click.stop="onClick"
 	>

package/src/components/MapEmbed.vue

@@ -1,31 +1,52 @@
 <script setup lang="ts">
+import type { LatLngExpression, Layer, Marker } from 'leaflet'
 import L from 'leaflet'
-import type { LatLngExpression, Marker } from 'leaflet'
 import 'leaflet/dist/leaflet.css'
+import type { PropType } from 'vue'
 import { onMounted, watch } from 'vue'
 
-interface MapProps {
-	center?: LatLngExpression
-	zoom?: number
-	height?: number
-	address?: string
-}
-
-const props = defineProps<MapProps>()
+const props = defineProps({
+	center: {
+		type: Object as PropType<LatLngExpression>,
+		default: [31.7683, 35.2137]
+	},
+	zoom: {
+		type: Number,
+		default: () => 13
+	},
+	height: {
+		type: Number,
+		default: () => 400
+	},
+	address: {
+		type: String,
+		default: () => ''
+	},
+	zoomControl: {
+		type: Boolean,
+		default: () => true
+	}
+})
 
 let map = $ref<L.Map>()
 const markers = $ref<Marker[]>([])
+const id = $ref(Math.random().toString(36).substring(2, 10))
 
 function initializeMap() {
-	map = L.map('map', {
-		center: props.center || [31.7683, 35.2137],
-		zoom: props.zoom || 13,
+	if (props.address) {
+		geocodeAddress(props.address).catch(console.error)
+	}
+	console.log(props.zoomControl, props.center)
+	map = L.map(id, {
+		center: props.center,
+		zoom: props.zoom,
+		zoomControl: props.zoomControl
 	})
 	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18 }).addTo(map)
 }
 
 onMounted(initializeMap)
-const markerSVG = '<svg width="199" height="284" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M29.859 29.266A99 99 0 0 1 198.862 99.27c0 74.25-99 183.857-99 183.857s-99-109.607-99-183.858A99 99 0 0 1 29.86 29.266Zm70.004 118.961c25.513 0 46.195-20.683 46.195-46.196 0-25.513-20.682-46.195-46.195-46.195S53.667 76.518 53.667 102.03s20.683 46.196 46.196 46.196Z" fill="#F04033"/></svg>'
+const markerSVG = '<svg width="284" height="284" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M29.859 29.266A99 99 0 0 1 198.862 99.27c0 74.25-99 183.857-99 183.857s-99-109.607-99-183.858A99 99 0 0 1 29.86 29.266Zm70.004 118.961c25.513 0 46.195-20.683 46.195-46.196 0-25.513-20.682-46.195-46.195-46.195S53.667 76.518 53.667 102.03s20.683 46.196 46.196 46.196Z" fill="#F04033"/></svg>'
 
 function addMarker(latlng: LatLngExpression) {
 	const customIcon = L.icon({
@@ -42,7 +63,10 @@ async function geocodeAddress(address: string) {
 	const geocodeUrl = `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(address)}`
 	const res = await fetch(geocodeUrl)
 	const data: any[] = await res.json() || []
-	data.forEach((element) => { addMarker([element.lat, element.lon]) })
+	data.forEach((element) => {
+		addMarker([element.lat, element.lon])
+	})
+	map?.fitBounds(L.featureGroup(markers as unknown as Layer[]).getBounds())
 }
 
 watch(() => props.address, (address) => {
@@ -52,7 +76,7 @@ watch(() => props.address, (address) => {
 
 <template>
 	<div class="map-test" />
-	<div id="map" class="map" :style="{ height: `${height || 400}px` }" />
+	<div :id class="map" :style="{ height: `${height || 400}px` }" />
 </template>
 
   <style>
@@ -78,7 +102,7 @@ watch(() => props.address, (address) => {
 	display: none;
   }
   .leaflet-pane.leaflet-marker-pane img{
-	filter: drop-shadow(0px 12px 3px rgba(0, 0, 0, 0.3));
+	filter: drop-shadow(0px 8px 3px rgba(0, 0, 0, 0.2));
   }
   .leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
     font-size: var(--input-font-size);

package/src/components/MaterialIcon.vue

@@ -4,7 +4,7 @@ import type { MaterialIcons } from '@bagelink/vue'
 defineProps<{
 	icon?: MaterialIcons
 	name?: MaterialIcons
-	size?: number
+	size?: number | string
 	color?: string
 }>()
 </script>

package/src/components/form/BglField.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import {
 	CheckInput,
+	DateInput,
 	type Field,
 	RichText,
 	SelectInput,
@@ -17,7 +18,7 @@ const props = withDefaults(
 	}>(),
 	{
 		modelValue: () => ({}),
-	},
+	}
 )
 
 const emit = defineEmits(['update:modelValue'])
@@ -28,18 +29,21 @@ const is = $computed(() => {
 	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 === 'date') return DateInput
 	return props.field.$el || 'div'
 })
 
 const formData = $computed({
 	get: () => props.modelValue,
-	set: (val: any) => { emit('update:modelValue', val) },
+	set: (val: any) => {
+		emit('update:modelValue', val)
+	},
 })
 
 const fieldData = $computed({
 	set: (val: any) => {
 		if (!props.field.id) return
-		const data = { ...props.modelValue } || {}
+		const data = { ...props.modelValue }
 		data[props.field.id] = val
 		emit('update:modelValue', data)
 	},

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

@@ -93,7 +93,7 @@ const filteredOptions = $computed(() =>	props.options.filter((option) => {
 	return (
 		Boolean(option)
 		&& (searchTerm.every(s => getLabel(option).match(s))
-		|| searchTerm.length === 0)
+		)
 	)
 }))
 

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

@@ -9,10 +9,10 @@ const props = withDefaults(defineProps<{
 	defaultValue?: boolean
 }>(), { defaultValue: false })
 
-const checked = defineModel<boolean>('modelValue', { default: false })
+const checked = defineModel<boolean>('modelValue')
 
 onMounted(() => {
-	if (props.defaultValue) checked.value = props.defaultValue
+	if (checked.value === undefined) checked.value = props.defaultValue
 })
 </script>
 

package/src/plugins/modal.ts

@@ -1,5 +1,4 @@
-import { defineComponent, h, inject,
-} from 'vue'
+import { defineComponent, h, inject } from 'vue'
 import type { InjectionKey,	Plugin } from 'vue'
 import type { BglFormSchemaT, BtnOptions } from '@bagelink/vue'
 import { Modal, ModalConfirm, ModalForm } from '@bagelink/vue'

package/src/styles/appearance.css

@@ -463,6 +463,38 @@
     border-inline-end: 1px solid var(--border-color)
 }
 
+.border-bottom-none {
+    border-bottom: none
+}
+
+.border-top-none {
+    border-top: none
+}
+
+.border-start-none {
+    border-inline-start: none
+}
+
+.border-end-none {
+    border-inline-end: none
+}
+
+.border-inner-bottom-none>* {
+    border-bottom: none
+}
+
+.border-inner-top-none>* {
+    border-top: none
+}
+
+.border-inner-start-none>* {
+    border-inline-start: none
+}
+
+.border-inner-end-none>* {
+    border-inline-end: none
+}
+
 
 
 @media screen and (max-width: 910px) {
@@ -927,5 +959,35 @@
         border-inline-end: 1px solid var(--border-color)
     }
 
+    .m_border-bottom-none {
+        border-bottom: none
+    }
+
+    .m_border-top-none {
+        border-top: none
+    }
+
+    .m_border-start-none {
+        border-inline-start: none
+    }
+
+    .m_border-end-none {
+        border-inline-end: none
+    }
 
+    .m_border-inner-bottom-none>* {
+        border-bottom: none
+    }
+
+    .m_border-inner-top-none>* {
+        border-top: none
+    }
+
+    .m_border-inner-start-none>* {
+        border-inline-start: none
+    }
+
+    .m_border-inner-end-none>* {
+        border-inline-end: none
+    }
 }

package/dist/components/Drop.vue.d.ts

@@ -1,34 +0,0 @@
-type Option = {
-    label: string;
-    value: string;
-} | string | number;
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
-    modelValue: string | number;
-    options: Option[];
-    placeholder?: string | undefined;
-    label?: string | undefined;
-    id: string;
-    required: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    modelValue: string | number;
-    options: Option[];
-    placeholder?: string | undefined;
-    label?: string | undefined;
-    id: string;
-    required: boolean;
-}>>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}, {}, {}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-//# sourceMappingURL=Drop.vue.d.ts.map

package/dist/components/Drop.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Drop.vue.d.ts","sourceRoot":"","sources":["../../src/components/Drop.vue"],"names":[],"mappings":"AAcA;AAMA,KAAK,MAAM,GAAG;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,MAAM,GAAG,MAAM,CAAC;;gBA8KN,MAAM,GAAG,MAAM;aAClB,MAAM,EAAE;;;QAGb,MAAM;cACA,OAAO;;;;gBALL,MAAM,GAAG,MAAM;aAClB,MAAM,EAAE;;;QAGb,MAAM;cACA,OAAO;;;;AAXnB,wBAcG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}

package/dist/components/FileUploader.vue.d.ts

@@ -1,60 +0,0 @@
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    id?: string | undefined;
-    private?: 0 | 1 | undefined;
-    singleFile?: boolean | undefined;
-    beforeUpload?: (() => Promise<any>) | undefined;
-    dragDropLabel?: string | undefined;
-    browseLabel?: string | undefined;
-}>, {
-    private: number;
-    entity: string;
-    id: string;
-    beforeUpload: () => Promise<void>;
-    dragDropLabel: string;
-    browseLabel: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    done: (...args: any[]) => void;
-    complete: (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    id?: string | undefined;
-    private?: 0 | 1 | undefined;
-    singleFile?: boolean | undefined;
-    beforeUpload?: (() => Promise<any>) | undefined;
-    dragDropLabel?: string | undefined;
-    browseLabel?: string | undefined;
-}>, {
-    private: number;
-    entity: string;
-    id: string;
-    beforeUpload: () => Promise<void>;
-    dragDropLabel: string;
-    browseLabel: string;
-}>>> & {
-    onDone?: ((...args: any[]) => any) | undefined;
-    onComplete?: ((...args: any[]) => any) | undefined;
-}, {
-    id: string;
-    private: 1 | 0;
-    beforeUpload: () => Promise<any>;
-    dragDropLabel: string;
-    browseLabel: string;
-}, {}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-//# sourceMappingURL=FileUploader.vue.d.ts.map

package/dist/components/FileUploader.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FileUploader.vue.d.ts","sourceRoot":"","sources":["../../src/components/FileUploader.vue"],"names":[],"mappings":"AAiDA;;;;;0BA6YuB,QAAQ,GAAG,CAAC;;;;;;;;;;;;;;;;;0BAAZ,QAAQ,GAAG,CAAC;;;;;;;;;;;;;;QAJ5B,MAAM;aAED,CAAC,GAAG,CAAC;kBAEA,MAAM,QAAQ,GAAG,CAAC;mBACjB,MAAM;iBACR,MAAM;;AARtB,wBAeG;AAGH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}