@bagelink/vue 0.0.481 → 0.0.487

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAG1C,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,KAAK,SAAM,QAGnD;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAI3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAKpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,OAS7F;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAM9C;AAED,eAAO,MAAM,SAAS,cAAe,OAAO,MAAM,EAAE,GAAG,CAAC,YAAY,MAAM,QAAqD,CAAA;AAE/H,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAG1C,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,KAAK,SAAM,QAGnD;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAI3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAKpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,OAS7F;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAM9C;AAED,eAAO,MAAM,SAAS,cAAe,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,YAAY,MAAM,QAAqD,CAAA;AAE/H,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA"}

package/dist/utils/lang.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lang.d.ts","sourceRoot":"","sources":["../../src/utils/lang.ts"],"names":[],"mappings":"AAcA,wBAAgB,OAAO;;mBAMA,OAAO,MAAM,EAAE,GAAG,CAAC;;;EAkBzC"}
+{"version":3,"file":"lang.d.ts","sourceRoot":"","sources":["../../src/utils/lang.ts"],"names":[],"mappings":"AAcA,wBAAgB,OAAO;;mBAMA,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;;;EAkBzC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.481",
+  "version": "0.0.487",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -52,7 +52,7 @@
   ],
   "devDependencies": {
     "@vue-macros/reactivity-transform": "^0.4.6",
-    "vue": "^3.4.27",
+    "vue": "^3.4.30",
     "@types/leaflet": "^1.9.12",
     "@types/signature_pad": "^2.3.6"
   },
@@ -117,9 +117,9 @@
     "@tiptap/extension-table-cell": "^2.4.0",
     "@tiptap/vue-3": "^2.4.0",
     "leaflet": "^1.9.4",
-    "libphonenumber-js": "1.11.3",
+    "libphonenumber-js": "1.11.4",
     "floating-vue": "^5.2.2",
-    "type-fest": "^4.19.0",
+    "type-fest": "^4.20.1",
     "axios": "^1.7.2"
   },
   "scripts": {

package/src/components/AccordionItem.vue

@@ -24,7 +24,8 @@ onMounted(() => {
 	if (props.open) isOpen = true
 })
 
-const accordionState = inject('accordionState') as { openItem: string | null }
+const accordionState
+	= (inject('accordionState') as { openItem: string | null }) || {}
 const id = props.id || Math.random().toString(36).substring(7)
 
 watch(
@@ -32,7 +33,7 @@ watch(
 	(currentOpenId) => {
 		if (currentOpenId !== id) isOpen = false
 	},
-	{ immediate: true },
+	{ immediate: true }
 )
 
 function toggle() {

package/src/components/Btn.vue

@@ -227,8 +227,9 @@ a {
 }
 
 .bgl_btn.thin {
-  padding-left: calc(var(--btn-padding) / 2);
-  padding-right: calc(var(--btn-padding) / 2);
+  padding-inline: calc(var(--btn-padding) / 3);
+  border-radius: calc(var(--btn-border-radius) / 1.5);
+
 }
 
 .bgl_btn.round {

package/src/components/Card.vue

@@ -75,6 +75,7 @@ const is = $computed(() => (props.to ? 'router-link' : 'div'))
 	background: var(--bgl-white);
 	padding: 2rem 2rem;
 	position: relative;
+	box-shadow:0 1px 5px 0 rgba(0,0,0,.05), 0 1px 2px -1px rgba(0,0,0,.05);
 }
 
 .bgl_card.gray {

package/src/components/ListItem.vue

@@ -14,7 +14,7 @@ defineProps<{
 	<component :is="to ? 'RouterLink' : 'div'" :to="to" class="flex list-item gap-1">
 		<Avatar v-if="src || showAvatar" style="flex-basis: 1;" :name="title" :src="src" :size="40" />
 		<div>
-			<p class="txt16 no-margin ellipsis">
+			<p class="txt16 no-margin ellipsis line-height-14">
 				{{ title }}
 				<slot />
 			</p>

package/src/components/NavBar.vue

@@ -24,7 +24,7 @@ const isOpen = $ref(true)
 
 <template>
 	<div :class="{ open: isOpen, closed: !isOpen }">
-		<slot name="top" />
+		<slot name="top" :isOpen />
 		<div
 			class="nav-expend"
 			role="button"

package/src/components/TableSchema.vue

@@ -258,7 +258,7 @@ th {
 	align-items: center;
 }
 .col:has(.bagel-input) {
-	padding: 0rem;
+	padding: 0rem 0.25rem;
 }
 
 .col > div {

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

@@ -39,7 +39,8 @@ const compareIds = (v1?: FSValue, v2?: FSValue) => [v1].flat().join(',') === [v2
 
 onMounted(() => {
 	if (!props.files && [file_bindkeys.value].flat().length) {
-		const ids = [file_bindkeys.value].flat()
+		const ids = [file_bindkeys.value].flat().filter(Boolean)
+		if (!ids.length) return
 		if (props.multiple) {
 			ids.forEach((id) => {
 				void bagel.get<StorageFile>(`/files/${id}`).then((file) => {

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

@@ -72,7 +72,7 @@ const defaultInputOptions = {
 	'id': '',
 	'maxlength': 25,
 	'minlength': 9,
-	'pattern': undefined,
+	'pattern': undefined as string | undefined,
 	'name': '',
 	'readonly': false,
 	'tabindex': 0,

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

@@ -24,6 +24,7 @@ const checked = defineModel<boolean>('modelValue', { default: false })
 <style scoped>
 .bgl-checkbox {
   position: relative;
+  transition: var(--bgl-transition);
 }
 
 .bgl-checkbox input[type=checkbox] {
@@ -50,7 +51,7 @@ const checked = defineModel<boolean>('modelValue', { default: false })
   position: absolute;
   display: inline-block;
   height: calc(var(--input-height) / 2);
-  width: var(--input-height);
+  width: calc(var(--input-height) - 2px);
   border-radius: var(--input-height);
   background: var(--bgl-gray);
   outline: 1px solid var(--border-color);
@@ -72,23 +73,25 @@ const checked = defineModel<boolean>('modelValue', { default: false })
   right: 0;
   bottom: 0;
   background: var(--input-bg);
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
   border-radius: calc(var(--input-height) / 2);
   box-shadow: inset 0 0 10px #00000020;
+  background: var(--input-bg);
 }
 
 .slider:before {
   position: absolute;
   content: "";
-  height: calc(var(--input-height) / 2 - 4px);
-  width: calc(var(--input-height) / 2 - 4px);
-  left: 2px;
-  bottom: 2px;
+  height: calc(var(--input-height) / 2 - 2px);
+  width: calc(var(--input-height) / 2 - 2px);
+  inset-inline-start: 1px;
+  bottom: 1px;
   border-radius: 50%;
   background: var(--bgl-white);
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
+  box-shadow:0 1px 5px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
 }
 
 .checked .slider {
@@ -96,6 +99,6 @@ const checked = defineModel<boolean>('modelValue', { default: false })
 }
 
 .checked .slider:before {
-  transform: translateX(calc(var(--input-height) / 2));
+  margin-inline-start:calc(var(--input-height) / 2 - 2px) ;
 }
 </style>

package/src/components/layout/TabsNav.vue

@@ -1,11 +1,17 @@
 <script setup lang="ts">
-import { Icon, type Tab } from '@bagelink/vue'
-import { watch } from 'vue'
+import { Icon } from '@bagelink/vue'
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useTabs } from './tabsManager'
 
+interface TabType {
+	id?: string
+	label?: string
+	icon?: string
+}
+
 const props = defineProps<{
 	title?: string
-	tabs: Tab[]
+	tabs: (TabType | string)[]
 	modelValue?: string
 	sideTabs?: boolean
 	group: string
@@ -14,21 +20,34 @@ const props = defineProps<{
 const emit = defineEmits(['update:modelValue'])
 const { currentTab } = useTabs(props.group)
 currentTab.value
-	= props.modelValue || typeof props.tabs[0] === 'string'
-		? props.tabs[0]
-		: props.tabs[0].id
+  = props.modelValue || typeof props.tabs[0] === 'string'
+  	? props.tabs[0]
+  	: props.tabs[0].id
+
+const tabsWrap = ref<HTMLElement | null>(null)
+const tabs = ref<HTMLElement[]>([])
+
+function updateIndicator() {
+	const activeTab = tabs.value.find(tab => tab.classList.contains('active'))
+	if (activeTab && tabsWrap.value) {
+		const { offsetLeft, offsetWidth } = activeTab
+		tabsWrap.value.style.setProperty('--indicator-left', `${offsetLeft}px`)
+		tabsWrap.value.style.setProperty('--indicator-width', `${offsetWidth}px`)
+	}
+}
 
-function selectTab(tab: Tab) {
+function selectTab(tab: TabType | string) {
 	currentTab.value = typeof tab === 'string' ? tab : tab.id
 	emit('update:modelValue', currentTab.value)
+	nextTick(() => { updateIndicator() })
 }
 
-function isActive(tab: Tab) {
+function isActive(tab: TabType | string) {
 	if (typeof tab === 'string') return currentTab.value === tab
 	return currentTab.value === tab.id
 }
 
-function tabLabel(tab: Tab) {
+function tabLabel(tab: TabType | string) {
 	if (typeof tab === 'string') return tab
 	return tab.label
 }
@@ -37,19 +56,29 @@ watch(
 	() => props.modelValue,
 	(value) => {
 		if (value && !isActive(value)) currentTab.value = value
+		nextTick(() => { updateIndicator() })
 	},
-	{ immediate: true },
+	{ immediate: true }
 )
+
+onMounted(() => {
+	tabs.value = Array.from(tabsWrap.value?.querySelectorAll('.bgl_tab') || [])
+	updateIndicator()
+	window.addEventListener('resize', updateIndicator)
+})
+onBeforeUnmount(() => {
+	window.removeEventListener('resize', updateIndicator)
+})
 </script>
 
 <template>
-	<div class="grid auto-flow-columns fit-content bgl_tabs_wrap">
+	<div ref="tabsWrap" class="grid auto-flow-columns relative fit-content bgl_tabs_wrap">
 		<button
-			v-for="(tab, i) in tabs"
+			v-for="(tab, i) in props.tabs"
 			:key="i"
 			type="button"
 			:class="{ active: isActive(tab) }"
-			class="bgl_tab"
+			class="bgl_tab relative z-1"
 			@click="selectTab(tab)"
 		>
 			<Icon v-if="typeof tab !== 'string' && tab.icon" :icon="tab.icon" />
@@ -67,37 +96,33 @@ watch(
 	box-shadow: inset 0 0 10px #00000012;
 	gap: 0.25rem;
 }
+
 .bgl_tab {
 	border: none;
 	background: transparent;
 	cursor: pointer;
 	font-size: var(--input-font-size);
 	font-family: inherit;
-	transition: var(--bgl-transition);
 	padding-inline: calc(var(--btn-padding) / 2);
 	padding-block: calc(var(--btn-padding) / 8);
 	border-radius: var(--input-border-radius);
-}
-.bgl_tab.currentTab,
-.bgl_tab.active {
-	background: var(--bgl-white);
-	box-shadow: 0 0 10px #00000011;
-	position: relative;
+	transition: var(--bgl-transition);
 }
 
 .bgl_tab:hover {
-	background: var(--input-bg);
-	filter: brightness(95%);
-}
-.bgl_tab.currentTab:hover,
-.bgl_tab.active:hover {
-	background: var(--bgl-white);
-	filter: brightness(100%);
-	box-shadow: 0 0 10px #00000022;
+	background: rgba(255, 255, 255, .4);
 }
 
-.bgl_tab:active {
-	-webkit-filter: brightness(70%);
-	filter: brightness(70%);
+.bgl_tabs_wrap::before {
+	content: '';
+	position: absolute;
+	top: calc(var(--btn-padding) / 8);
+	bottom: calc(var(--btn-padding) / 8);
+	left: var(--indicator-left, 0);
+	width: var(--indicator-width, 0);
+	background: var(--bgl-white);
+	border-radius: var(--input-border-radius);
+	transition: var(--bgl-transition);
+	z-index: 0;
 }
 </style>

package/src/styles/appearance.css

@@ -427,6 +427,9 @@
     object-fit: scale-down;
 }
 
+.shadow-light {
+    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1) !important;
+}
 
 
 @media screen and (max-width: 910px) {
@@ -854,4 +857,9 @@
     .m_object-fit-scale-down {
         object-fit: scale-down;
     }
+
+    .m_shadow-light {
+        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1) !important;
+    }
+
 }

package/src/styles/inputs.css

@@ -50,6 +50,7 @@ select {
     width: 100%;
 }
 
+
 .bagel-input input::placeholder,
 .bagel-input textarea::placeholder,
 .bagel-input select::placeholder,
@@ -100,6 +101,7 @@ select {
 .bagel-input .switch.no-edit {
     pointer-events: none;
     outline: none;
+    opacity: .7;
 }
 
 .bagel-input label.active {
@@ -150,6 +152,22 @@ select {
     box-shadow: inset 0 0 10px #00000012;
 }
 
+.bagel-input.light-input input,
+.bagel-input.light-input textarea,
+.bagel-input.light-input select,
+.custom-select.light-input .input {
+    background: var(--bgl-white) !important;
+    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1) !important;
+    outline: 1px solid var(--border-color) !important;
+}
+
+.input.active.light-input,
+.bagel-input.light-input input:focus-visible,
+.bagel-input.light-input select:focus-visible,
+.bagel-input.light-input textarea:focus-visible {
+    box-shadow: inset 0 0 2px var(--bgl-black) !important;
+}
+
 .bagel-input input[type="number"]::-webkit-inner-spin-button,
 .bagel-input input[type="number"]::-webkit-outer-spin-button {
     -webkit-appearance: none;

package/src/styles/layout.css

@@ -576,6 +576,10 @@
     margin-bottom: 1rem !important;
 }
 
+.mb-1-5 {
+    margin-bottom: 1.5rem !important;
+}
+
 .mb-2 {
     margin-bottom: 2rem !important;
 }
@@ -612,6 +616,10 @@
     margin-top: 1rem !important;
 }
 
+.mt-1-5 {
+    margin-top: 1.5rem !important;
+}
+
 .mt-2 {
     margin-top: 2rem !important;
 }
@@ -654,6 +662,11 @@
     margin-bottom: 1rem !important;
 }
 
+.my-1-5 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+}
+
 .my-2 {
     margin-top: 2rem !important;
     margin-bottom: 2rem !important;
@@ -693,6 +706,10 @@
     margin-inline-start: 1rem !important;
 }
 
+.ms-1-5 {
+    margin-inline-start: 1.5rem !important;
+}
+
 .ms-2 {
     margin-inline-start: 2rem !important;
 }
@@ -729,6 +746,10 @@
     margin-inline-end: 1rem !important;
 }
 
+.me-1-5 {
+    margin-inline-end: 1.5rem !important;
+}
+
 .me-2 {
     margin-inline-end: 2rem !important;
 }
@@ -772,6 +793,11 @@
     margin-inline-end: 1rem !important;
 }
 
+.mx-1-5 {
+    margin-inline-start: 1.5rem !important;
+    margin-inline-end: 1.5rem !important;
+}
+
 .mx-2 {
     margin-inline-start: 2rem !important;
     margin-inline-end: 2rem !important;
@@ -811,6 +837,10 @@
     margin: 1rem !important;
 }
 
+.m-1-5 {
+    margin: 1.5rem !important;
+}
+
 .m-2 {
     margin: 2rem !important;
 }
@@ -839,6 +869,10 @@
     margin-bottom: -1rem !important;
 }
 
+.-mb-1-5 {
+    margin-bottom: -1.5rem !important;
+}
+
 .-mb-2 {
     margin-bottom: -2rem !important;
 }
@@ -867,6 +901,10 @@
     margin-top: -1rem !important;
 }
 
+.-mt-1-5 {
+    margin-top: -1.5rem !important;
+}
+
 .-mt-2 {
     margin-top: -2rem !important;
 }
@@ -899,6 +937,11 @@
     margin-bottom: -1rem !important;
 }
 
+.-my-1-5 {
+    margin-top: -1.5rem !important;
+    margin-bottom: -1.5rem !important;
+}
+
 .-my-2 {
     margin-top: -2rem !important;
     margin-bottom: -2rem !important;
@@ -930,6 +973,10 @@
     margin-inline-start: -1rem !important;
 }
 
+.-ms-1-5 {
+    margin-inline-start: -1.5rem !important;
+}
+
 .-ms-2 {
     margin-inline-start: -2rem !important;
 }
@@ -958,6 +1005,10 @@
     margin-inline-end: -1rem !important;
 }
 
+.-me-1-5 {
+    margin-inline-end: -1.5rem !important;
+}
+
 .-me-2 {
     margin-inline-end: -2rem !important;
 }
@@ -978,6 +1029,10 @@
     padding-bottom: 1rem !important;
 }
 
+.pb-1-5 {
+    padding-bottom: 1.5rem !important;
+}
+
 .pb-2 {
     padding-bottom: 2rem !important;
 }
@@ -1010,6 +1065,10 @@
     padding-top: 1rem !important;
 }
 
+.pt-1-5 {
+    padding-top: 1.5rem !important;
+}
+
 .pt-2 {
     padding-top: 2rem !important;
 }
@@ -1042,6 +1101,10 @@
     padding-inline-start: 1rem !important;
 }
 
+.ps-1-5 {
+    padding-inline-start: 1.5rem !important;
+}
+
 .ps-2 {
     padding-inline-start: 2rem !important;
 }
@@ -1074,6 +1137,10 @@
     padding-inline-end: 1rem !important;
 }
 
+.pe-1-5 {
+    padding-inline-end: 1.5rem !important;
+}
+
 .pe-2 {
     padding-inline-end: 2rem !important;
 }
@@ -1108,6 +1175,11 @@
     padding-inline-start: 1rem !important;
 }
 
+.px-1-5 {
+    padding-inline-end: 1.5rem !important;
+    padding-inline-start: 1.5rem !important;
+}
+
 .px-2 {
     padding-inline-end: 2rem !important;
     padding-inline-start: 2rem !important;
@@ -1148,6 +1220,11 @@
     padding-bottom: 1rem !important;
 }
 
+.py-1-5 {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
+}
+
 .py-2 {
     padding-top: 2rem !important;
     padding-bottom: 2rem !important;
@@ -1186,6 +1263,10 @@
     padding: 1rem !important;
 }
 
+.p-1-5 {
+    padding: 1.5rem !important;
+}
+
 .p-2 {
     padding: 2rem !important;
 }
@@ -1663,6 +1744,18 @@
     overflow: unset;
 }
 
+.overflow-scroll {
+    overflow: scroll;
+}
+
+.overflow-x-scroll {
+    overflow-x: scroll;
+}
+
+.overflow-y-scroll {
+    overflow-y: scroll;
+}
+
 .overflow-x {
     overflow-x: auto;
 }