@bagelink/vue 1.6.31 → 1.6.36

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.6.31",
+  "version": "1.6.36",
   "description": "Bagel core sdk packages",
   "author": {
-    "name": "Neveh Allon",
-    "email": "neveh@bagelstudio.co.il",
-    "url": "https://github.com/nevehallon"
+    "name": "Bagel Studio",
+    "email": "hi@bagelstudio.co.il"
   },
   "license": "MIT",
   "homepage": "https://github.com/bageldb/bagelink/tree/master/packages/vue#readme",

package/src/components/Menu.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { IconType } from '@bagelink/vue'
+import { Btn, Icon, Dropdown } from '@bagelink/vue'
+
+export interface MenuItem {
+	icon: IconType
+	value: string
+	to: string
+	items?: MenuItem[]
+}
+
+defineProps<{ items: MenuItem[] }>()
+</script>
+
+<template>
+	<div class="flex space-between m_w-100vw overflow m_-ms-1 m_px-05 m_py-025 bglTopMenu">
+		<div class="flex gap-025 m_gap-05">
+			<template v-for="item in items" :key="item.value">
+				<Dropdown v-if="item.items" :value="item.value" iconEnd="keyboard_arrow_down">
+					<template #trigger="{ show }">
+						<Btn thin flat @click="show()">
+							<Icon :name="item.icon" size="0.8" style="margin-bottom: -0.1rem" />
+							<p class="-ms-025">
+								{{ item.value }}
+							</p>
+							<Icon name="keyboard_arrow_down" size="0.8" style="margin-bottom: -0.1rem" />
+						</Btn>
+					</template>
+					<Btn
+						v-for="subItem in item.items" :key="subItem.value" thin flat :to="subItem.to"
+						class="block m_px-025"
+					>
+						<Icon :name="subItem.icon" size="0.8" style="margin-bottom: -0.1rem" />
+						<p class="-ms-025">
+							{{ subItem.value }}
+						</p>
+					</Btn>
+				</Dropdown>
+				<Btn v-else thin flat :to="item.to" class="m_px-025">
+					<Icon :name="item.icon" size="0.9" style="margin-bottom: -0.1rem" />
+					<p class="-ms-025">
+						{{ item.value }}
+					</p>
+				</Btn>
+			</template>
+		</div>
+		<slot name="end" />
+	</div>
+</template>
+
+<style scoped>
+.bgl_btn.router-link-active {
+	background-color: var(--bgl-gray-40);
+}
+</style>
+
+<style>
+@media (max-width: 910px) {
+	.bglTopMenu::-webkit-scrollbar {
+		height: 0px;
+	}
+
+	.bglTopMenu {
+		mask: linear-gradient(to right, transparent, black 10px, black calc(100% - 10px), transparent);
+	}
+}
+</style>

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

@@ -61,7 +61,7 @@ function getItemRef(i: number) {
 
 <template>
 	<div>
-		<label v-if="label" class="txt12 txt-gray-90 mb-025">
+		<label v-if="label" class="txt12 txt-gray-90 mb-025 block">
 			{{ label }}
 		</label>
 		<p v-if="helpText" class="txt12 txt-gray-50 mb-05">
@@ -72,7 +72,7 @@ function getItemRef(i: number) {
 			style="display: flex; align-items: center; gap: 0.5rem;"
 		>
 			<slot :item="getItemRef(i)" :index="i" />
-			<Btn v-if="allowDelete" v-tooltip="'Delete'" flat icon="delete" size="xs" @click="deleteItem(i)" />
+			<Btn v-if="allowDelete" v-tooltip="'Delete'" flat icon="delete" size="xs" class="mb-075" @click="deleteItem(i)" />
 		</div>
 		<Btn v-if="allowAdd" icon="add" size="small" value="Add" @click="addItem" />
 	</div>

package/src/components/form/inputs/Upload/upload.ts

@@ -33,6 +33,8 @@ export const files = {
 		options?: UploadOptions & { dirPath?: string, tags?: string[] }
 	): Promise<AxiosResponse<BglFile>> => {
 		const formData = new FormData()
+		// Backend expects multipart field name "file"
+		formData.append('file', file)
 		formData.append('upload', file)
 		return axios.post(`/${getFileVersion()}/upload`, formData, {
 			headers: { 'Content-Type': 'multipart/form-data' },

package/src/components/index.ts

@@ -30,6 +30,7 @@ export { default as ListItem } from './ListItem.vue'
 export { default as ListView } from './ListView.vue'
 export { default as Loading } from './Loading.vue'
 export { default as MapEmbed } from './MapEmbed/Index.vue'
+export { default as Menu } from './Menu.vue'
 export { default as Modal } from './Modal.vue'
 export { default as ModalConfirm } from './ModalConfirm.vue'
 export { default as ModalForm } from './ModalForm.vue'

package/src/components/layout/AppContent.vue

@@ -31,7 +31,7 @@ const sidebarCardStyle = inject('sidebarCardStyle', { value: false })
 const hasSidebarCard = computed(() => {
 	// Check if there's an AppSidebar with card class in the DOM
 	const sidebar = document.querySelector('.app-sidebar .card')
-	return null !== sidebar || sidebarCardStyle?.value
+	return sidebar !== null || sidebarCardStyle?.value
 })
 </script>
 
@@ -83,7 +83,7 @@ const hasSidebarCard = computed(() => {
 
 		<!-- Page Content -->
 		<main
-			class="pageContent flex-grow overflow pt-1 pb-05 w-100p m_p-05 m_scrollbar-gutter-stable-both m_vw100"
+			class="pageContent flex-grow overflow pt-1 pb-05 w-100p m_p-05 m_scrollbar-gutter-auto m_vw100"
 			:class="{
 				'px-1': !hasSidebarCard,
 			}"