@bagelink/vue 0.0.755 → 0.0.761

package/package.json

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

package/src/components/Btn.vue

@@ -246,7 +246,7 @@ a {
 }
 
 .bgl_btn.round {
-  border-radius: calc(var(--btn-border-radius) * 2);
+  border-radius: 1000px;
 }
 
 .bgl_btn-icon.thin {

package/src/components/NavBar.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { MaterialIcon } from '@bagelink/vue'
+import { onMounted } from 'vue'
 import type { MaterialIcons, NavLink } from '@bagelink/vue'
 
 withDefaults(
@@ -19,8 +20,18 @@ withDefaults(
 	}
 )
 
-const isSmallScreen = $computed(() => window.innerWidth < 1100)
-const isOpen = $ref(!isSmallScreen)
+let isOpen = $ref(true)
+function calcIsOpen() {
+	isOpen =
+		window.innerWidth < 1100 ||
+		[null, 'true'].includes(localStorage.getItem('navOpen'))
+}
+
+function toggleMenu() {
+	isOpen = !isOpen
+	localStorage.setItem('navOpen', `${isOpen}`)
+}
+onMounted(calcIsOpen)
 </script>
 
 <template>
@@ -31,8 +42,8 @@ const isOpen = $ref(!isSmallScreen)
 			role="button"
 			aria-label="Toggle Navigation"
 			tabindex="0"
-			@click="isOpen = !isOpen"
-			@keypress.enter="isOpen = !isOpen"
+			@click="toggleMenu"
+			@keypress.enter="toggleMenu"
 		>
 			<MaterialIcon icon="chevron_right" class="top-arrow" />
 		</div>
@@ -365,7 +376,7 @@ const isOpen = $ref(!isSmallScreen)
 		display: none;
 	}
 }
-	@media screen and (max-height: 550px) {
+@media screen and (max-height: 550px) {
 	.nav.open .nav-button {
 		margin-top: 4px;
 		margin-bottom: 4px;

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

@@ -1,31 +1,61 @@
 <script setup lang="ts">
-import { Btn, TextInput } from '@bagelink/vue'
+import { Btn, type MaterialIcons, TextInput } from '@bagelink/vue'
 
-export type TextInputT = InstanceType<typeof TextInput>
-
-export type TextInputProps = Omit<
-	TextInputT['$props'],
-	(`${string}modelValue` | `ref${string}` | `onVnode${string}` | 'key' | 'type')
->
-// const props =
-defineProps<{ txtInputProps: TextInputProps }>()
+export interface TextInputProps {
+	id?: string
+	title?: string
+	helptext?: string
+	placeholder?: string
+	label?: string
+	small?: boolean
+	dense?: boolean
+	required?: boolean
+	pattern?: string
+	shrink?: boolean
+	disabled?: boolean
+	nativeInputAttrs?: Record<string, any>
+	icon?: MaterialIcons
+	iconStart?: MaterialIcons
+	multiline?: boolean
+	autoheight?: boolean
+	code?: boolean
+	lines?: number
+	autofocus?: boolean
+	debounceDelay?: number
+	onFocusout?: (e: FocusEvent) => void
+}
+const props = defineProps<TextInputProps>()
 
-const password = defineModel< string>('modelValue')
+const password = defineModel<string>('modelValue')
 const showPwd = defineModel<boolean>('showPwd', { default: false })
 
-const toggleShowPwdIcon = $computed(() => showPwd.value ? 'visibility_off' : 'visibility')
-const inputType = $computed(() => showPwd.value ? 'text' : 'password')
+const toggleShowPwdIcon = $computed(() =>
+	showPwd.value ? 'visibility_off' : 'visibility'
+)
+const inputType = $computed(() => (showPwd.value ? 'text' : 'password'))
 </script>
 
 <template>
 	<div class="relative">
-		<TextInput v-model="password" class="mb-0" :type="inputType" v-bind="txtInputProps" />
-		<Btn flat thin class="mx-05 m-password position-bottom-end" :icon="toggleShowPwdIcon" @click="showPwd = !showPwd" />
+		<TextInput
+			v-model="password"
+			v-bind="props"
+			:type="inputType"
+			autocomplete="current-password"
+			class="mb-0"
+		/>
+		<Btn
+			flat
+			thin
+			class="mx-05 m-password position-bottom-end"
+			:icon="toggleShowPwdIcon"
+			@click="showPwd = !showPwd"
+		/>
 	</div>
 </template>
 
 <style>
-.m-password{
+.m-password {
 	margin-block: calc(var(--input-height) / 2 - 15px);
 }
 </style>

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

@@ -26,7 +26,7 @@ const selectedOption = defineModel('modelValue')
 		<label
 			v-for="opt in options"
 			:key="opt.id"
-			class="border round p-1 flex bg-gray-light mb-05 gap-075 active-list-item hover"
+			class="border rounded p-1 flex bg-gray-light mb-05 gap-075 active-list-item hover"
 			:for="opt.id"
 		>
 			<input
@@ -40,7 +40,7 @@ const selectedOption = defineModel('modelValue')
 			<div class="flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025">
 				<img
 					v-if="opt.imgSrc"
-					class="bg-popup shadow-light py-025 rounded m_w40"
+					class="bg-popup shadow-light py-025 radius-05 m_w40"
 					width="60"
 					:src="opt.imgSrc"
 					:alt="opt.imgAlt"

package/src/components/form/inputs/RichText2/Toolbar.vue

@@ -67,7 +67,7 @@ function handleSelectChange(selectedOption: string) {
 				thin
 				flat
 				:class="action.class"
-				class="rounded"
+				class="radius-05"
 				:aria-label="action.name"
 				:icon="action.icon"
 				@click="emit('action', action.name)"

package/src/components/form/inputs/RichText2/index.vue

@@ -134,10 +134,10 @@ function handleKeyDown(event: KeyboardEvent) {
 </script>
 
 <template>
-	<div class="rich-text-editor round pt-05 px-1 pb-1">
+	<div class="rich-text-editor rounded pt-05 px-1 pb-1">
 		<Toolbar :config @action="handleToolbarAction" />
 		<div class="editor-container flex flex-stretch gap-1 m_column">
-			<div class="content-area rounded p-1 shadow-light w-100 grid">
+			<div class="content-area radius-05 p-1 shadow-light w-100 grid">
 				<textarea v-if="isCodeView" v-model="contentHtml" @input="updateContent" />
 				<div
 					v-else
@@ -151,7 +151,7 @@ function handleKeyDown(event: KeyboardEvent) {
 					@keydown="handleKeyDown"
 				/>
 			</div>
-			<code v-if="isSplitView" class="preview-area  w-100 rounded p-1">{{ contentHtml }}</code>
+			<code v-if="isSplitView" class="preview-area  w-100 radius-05 p-1">{{ contentHtml }}</code>
 		</div>
 	</div>
 </template>

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

@@ -310,7 +310,8 @@ onMounted(() => {
 	opacity: 0.3;
 }
 .selected{
-	background: var(--bgl-primary-tint);
+	/* background: var(--bgl-primary-tint); */
+	background: var(--bgl-gray-light);
 }
 </style>
 

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

@@ -26,7 +26,7 @@ onMounted(() => {
 		:class="{ small }"
 	>
 		<div class="switch" :class="{ checked }">
-			<span class="slider round" />
+			<span class="slider rounded" />
 		</div>
 
 		<input

package/src/components/formkit/Toggle.vue

@@ -14,7 +14,7 @@ const inputVal = defineModel('modelValue', {
 	<div class="bagel-input checkbox" :title="label">
 		<label class="switch">
 			<input :id="id" v-model="inputVal" type="checkbox">
-			<span class="slider round" />
+			<span class="slider rounded" />
 		</label>
 	</div>
 </template>

package/src/components/layout/SidebarMenu.vue

@@ -32,7 +32,7 @@ function toggleMenu() {
 			@click="toggleMenu"
 		/>
 		<Card
-			class="py-1 px-05 h-100 flex column gap-05 round relative bg-primary font-light overflow-y "
+			class="py-1 px-05 h-100 flex column gap-05 rounded relative bg-primary font-light overflow-y "
 		>
 			<slot v-if="!isOpen || !slots['brand-open']" name="brand" />
 			<slot v-if="isOpen" name="brand-open" />

package/src/components/layout/Tabs.vue

@@ -8,6 +8,7 @@ import { useTabs } from './tabsManager'
 const props = defineProps<{
 	tabs: Tab[]
 	modelValue?: string
+	flat?: boolean
 }>()
 
 const emit = defineEmits(['update:modelValue'])
@@ -19,13 +20,15 @@ const tabValue = (tab: Tab) => (typeof tab === 'string' ? tab : tab.id)
 
 const slctTab = $computed({
 	get: () => props.modelValue || tabValue(props.tabs[0]),
-	set: (value) => { emit('update:modelValue', value) },
+	set: value => {
+		emit('update:modelValue', value)
+	},
 })
 
 const tabComponent = defineComponent({
 	render() {
 		const currentTabIndex = props.tabs.findIndex(
-			tab => tabValue(tab) === currentTab.value,
+			tab => tabValue(tab) === currentTab.value
 		)
 		if (currentTabIndex === -1) return null
 		const slotChildren = slots.default?.()[1]?.children
@@ -37,7 +40,7 @@ const tabComponent = defineComponent({
 
 z
 <template>
-	<TabsNav v-model="slctTab" :tabs :group class="mb-05" />
+	<TabsNav v-model="slctTab" :flat :tabs :group class="mb-05" />
 	<div v-if="currentTab">
 		<template v-if="slots[currentTab]">
 			<slot :name="currentTab" />

package/src/components/lightbox/Lightbox.vue

@@ -155,7 +155,7 @@ defineExpose({ open, close })
 						<img
 							v-if="item.type === 'image'"
 							class="thumbnail object-fit-cover hover
-							 opacity-5 round flex bg-popup justify-content-center align-items-center flex-shrink-0"
+							 opacity-5 rounded flex bg-popup justify-content-center align-items-center flex-shrink-0"
 							:src="item.src"
 							alt=""
 							:class="{ active: currentIndex === index }"
@@ -164,7 +164,7 @@ defineExpose({ open, close })
 						<Icon
 							v-else
 							class="thumbnail object-fit-cover hover
-							 opacity-5 round flex bg-popup justify-content-center align-items-center flex-shrink-0"
+							 opacity-5 ed flex bg-popup justify-content-center align-items-center flex-shrink-0"
 							icon="description"
 							:class="{ active: currentIndex === index }"
 							@click="selectItem(index)"

package/src/styles/layout.css

@@ -11,18 +11,34 @@
     height: 100vh;
 }
 
+
 .round {
+    border-radius: 1000px;
+}
+
+.rounded,
+.radius,
+.radius-1 {
     border-radius: var(--btn-border-radius) !important;
 }
 
-.rounded {
+.radius-05 {
     border-radius: calc(var(--btn-border-radius) / 2) !important;
 }
 
-.round-extra {
+.radius-2 {
     border-radius: calc(var(--btn-border-radius) * 2) !important;
 }
 
+.radius-3 {
+    border-radius: calc(var(--btn-border-radius) * 3) !important;
+}
+
+.radius-4 {
+    border-radius: calc(var(--btn-border-radius) * 4) !important;
+}
+
+
 .round-none {
     border-radius: 0;
 }

package/src/styles/mobilLayout.css

@@ -35,17 +35,31 @@
     }
 
     .m_round {
+        border-radius: 1000px;
+    }
+
+    .m_rounded,
+    .m_radius,
+    .m_radius-1 {
         border-radius: var(--btn-border-radius) !important;
     }
 
-    .m_rounded {
+    .m_radius-05 {
         border-radius: calc(var(--btn-border-radius) / 2) !important;
     }
 
-    .m_round-extra {
+    .m_radius-2 {
         border-radius: calc(var(--btn-border-radius) * 2) !important;
     }
 
+    .m_radius-3 {
+        border-radius: calc(var(--btn-border-radius) * 3) !important;
+    }
+
+    .m_radius-4 {
+        border-radius: calc(var(--btn-border-radius) * 4) !important;
+    }
+
     .m_round-none {
         border-radius: 0 !important;
     }

package/src/utils/BagelFormUtils.ts

@@ -160,7 +160,7 @@ export function numField(
 export function frmRow(...children: Field[]) {
 	return {
 		$el: 'div',
-		class: 'flex gap-1 m_block',
+		class: 'flex gap-1 m_block align-items-end',
 		children,
 	}
 }