@bagelink/vue 0.0.736 → 0.0.740

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

@@ -257,7 +257,7 @@ function drop(e: DragEvent) {
 					</div>
 				</div>
 
-				<div v-if="!multiple" class="bgl-single-preview">
+				<div v-if="!multiple && (storageFiles.length > 0 || fileQueue.length > 0)" class="bgl-single-preview">
 					<div
 						v-for="file in storageFiles"
 						:key="file.id"
@@ -297,7 +297,7 @@ function drop(e: DragEvent) {
 				:fileQueue
 				:browse
 			>
-				<p class="p-1 flex column hover fileUploadPlaceHolder">
+				<p class="p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05">
 					<Icon icon="upload_2" />
 					Drop files here or click to upload
 				</p>
@@ -341,7 +341,7 @@ function drop(e: DragEvent) {
 	border: 1px solid var(--border-color) !important;
 	border-radius: var(--input-border-radius);
 	margin: 0.5rem !important;
-	background: var(--bgl-white);
+	background: var(--bgl-popup-bg);
 	padding: 0;
 	padding-inline-end: 0.75rem;
 	text-align: start;

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { Btn, 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 }>()
+
+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')
+</script>
+
+<template>
+	<div class="relative">
+		<TextInput v-model="password" class="mb-0" :type="inputType" v-bind="txtInputProps" />
+		<Btn flat thin class="m-05 position-bottom-end" :icon="toggleShowPwdIcon" @click="showPwd = !showPwd" />
+	</div>
+</template>

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

@@ -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-white shadow-light py-025 rounded m_w40"
+					class="bg-popup shadow-light py-025 rounded m_w40"
 					width="60"
 					:src="opt.imgSrc"
 					:alt="opt.imgAlt"

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

@@ -84,7 +84,7 @@ onMounted(() => {
 	padding-bottom: calc(var(--btn-padding) / 6);
 	cursor: pointer;
 	transition: var(--bgl-transition);
-	background: var(--bgl-white);
+	background: var(--bgl-light-text);
 	user-select: none;
 }
 
@@ -98,6 +98,6 @@ onMounted(() => {
 
 .radio-pill input:checked ~ label {
 	background: var(--bgl-primary);
-	color: var(--bgl-white);
+	color: var(--bgl-light-text);
 }
 </style>

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

@@ -276,7 +276,7 @@ onBeforeUnmount(() => editor?.destroy())
 
 .tiptap pre {
 	background: #0d0d0d;
-	color: var(--bgl-white);
+	color: var(--bgl-light-text);
 	font-family: 'JetBrainsMono', monospace;
 	padding: 0.75rem 1rem;
 	border-radius: 0.5rem;
@@ -372,7 +372,7 @@ onBeforeUnmount(() => editor?.destroy())
 			pointer-events: none;
 		}
 		.selectedCell p::selection{
-			color: var(--bgl-black)
+			color: var(--bgl-popup-text)
 		}
 
 		.column-resize-handle {
@@ -401,7 +401,7 @@ onBeforeUnmount(() => editor?.destroy())
 	cursor: col-resize;
 }
 .RichText-tools [disabled]{
-	color: var(--bgl-black) !important;
+	color: var(--bgl-popup-text) !important;
 	opacity: 0.3;
 }
 .RichText iframe{

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

@@ -137,7 +137,7 @@ function handleKeyDown(event: KeyboardEvent) {
 	<div class="rich-text-editor round 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 bg-white shadow-light w-100 grid">
+			<div class="content-area rounded 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 bg-black color-white  w-100 rounded p-1">{{ contentHtml }}</code>
+			<code v-if="isSplitView" class="preview-area  w-100 rounded p-1">{{ contentHtml }}</code>
 		</div>
 	</div>
 </template>
@@ -183,6 +183,9 @@ function handleKeyDown(event: KeyboardEvent) {
 .preview-area{
 	font-family: "FontWithASyntaxHighlighter", monospace;
   	font-palette: --myCustomPalette;
+	background: var(--bgl-code-bg);
+	color: var(--bgl-code-color)
+
 }
 .rich-text-editor {
 	background: var(--input-bg);
@@ -194,6 +197,9 @@ function handleKeyDown(event: KeyboardEvent) {
 	white-space: pre-wrap;
 	outline: none;
 }
+.content-area{
+	background: var(--bgl-richtext-color);
+}
 .content-area, .preview-area{
 	min-height: 200px;
 }

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

@@ -243,7 +243,7 @@ onMounted(() => {
 					<div
 						v-for="(option, i) in filteredOptions"
 						:key="`${option}${i}`"
-						class="selectinput-option hover gap-1"
+						class="selectinput-option hover gap-1 align-items-center"
 						:class="{ selected: isSelected(option) }"
 						role="option"
 						tabindex="0"
@@ -252,14 +252,18 @@ onMounted(() => {
 						@keydown.enter="select(option)"
 					>
 						<template v-if="multiselect">
-							<Icon v-if="isSelected(option)" icon="select_check_box" />
+							<Icon
+								v-if="isSelected(option)" :size="1.1
+								" icon="select_check_box"
+							/>
 							<Icon
 								v-if="!isSelected(option)"
 								class="opacity-3"
 								icon="check_box_outline_blank"
+								:size="1.1"
 							/>
 						</template>
-						<span>
+						<span class="block">
 							{{ getLabel(option) }}
 						</span>
 					</div>
@@ -287,6 +291,9 @@ onMounted(() => {
 	font-size: var(--input-font-size);
 	margin-block: 0.15rem;
 }
+.selectinput-option .bgl_icon-font{
+	line-height: normal;
+}
 .selectinput-options.multiselect .selectinput-option {
 	grid-template-columns: 10px 1fr;
 
@@ -304,7 +311,7 @@ onMounted(() => {
 	opacity: 0.3;
 }
 .selected{
-	background: var(--input-bg);
+	background: var(--bgl-primary-tint);
 }
 </style>
 

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

@@ -260,7 +260,7 @@ onMounted(() => {
 
 .table-action:hover>.bgl_icon-font {
 	background: var(--bgl-red);
-	color: var(--bgl-white);
+	color: var(--bgl-box-bg);
 }
 
 .table-action:active>.bgl_icon-font {
@@ -278,7 +278,7 @@ onMounted(() => {
 .table-row .bagel-input .input {
 	border-radius: 0;
 	background: transparent;
-	color: var(--bgl-black);
+	color: var(--bgl-text-color);
 }
 
 .table-row .bagel-input textarea {
@@ -307,7 +307,7 @@ onMounted(() => {
 .sortable-chosen {
 	cursor: grabbing !important;
 	border-color: transparent;
-	background: var(--bgl-white);
+	background: var(--bgl-box-bg);
 	border-radius: 10px;
 	box-shadow: 0 0 10px 0 rgb(0 0 0 /20%);
 }

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

@@ -158,11 +158,11 @@ onMounted(() => {
 
 .code textarea {
 	font-family: 'Inconsolata', monospace;
-	background: var(--bgl-black) !important;
-	color: var(--bgl-white) !important;
+	background: var(--bgl-code-bg) !important;
+	color: var(--bgl-light-text) !important;
 }
 .code textarea::placeholder {
-	color: var(--bgl-white) !important;
+	color: var(--bgl-light-text) !important;
 	opacity: 0.3;
 }
 

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

@@ -77,7 +77,7 @@ onMounted(() => {
   inset-inline-start: 1px;
   bottom: 1px;
   border-radius: 50%;
-  background: var(--bgl-white);
+  background: var(--bgl-box-bg);
   -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);

package/src/components/form/inputs/index.ts

@@ -15,5 +15,6 @@ export { default as TelInput } from './TelInput.vue'
 export { default as SignaturePad } from './SignaturePad.vue'
 export { default as RichText2 } from './RichText2/index.vue'
 export { default as RadioGroup } from './RadioGroup.vue'
+export { default as PasswordInput } from './PasswordInput.vue'
 
 export { Dropdown } from 'floating-vue'

package/src/components/formkit/FileUploader.vue

@@ -305,7 +305,7 @@ function onDrop(e: DragEvent) {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	background: var(--bgl-white);
+	background: var(--bgl-box-bg);
 	border-radius: var(--btn-border-radius);
 	width: 100%;
 	color: var(--input-color);

package/src/components/formkit/MiscFields.vue

@@ -69,6 +69,6 @@ function addToField(field: any) {
 
 .add-btn:hover::before {
 	background: var(--bgl-primary);
-	color: var(--bgl-white);
+	color: var(--bgl-light-text);
 }
 </style>

package/src/components/formkit/Toggle.vue

@@ -48,7 +48,7 @@ const inputVal = defineModel('modelValue', {
 	border-radius: var(--input-border-radius);
 	font-size: var(--input-font-size);
 	background: var(--input-bg);
-	color: var(--bgl-black);
+	color: var(--bgl-text-color);
 	text-align: center;
 	margin: 8px 5px;
 	cursor: pointer;
@@ -65,7 +65,7 @@ const inputVal = defineModel('modelValue', {
 
 .radio-wrap input:checked:checked+label {
 	background: var(--bgl-primary);
-	color: var(--bgl-white);
+	color: var( --bgl-light-text);
 }
 
 .checkbox {
@@ -100,7 +100,7 @@ const inputVal = defineModel('modelValue', {
 	position: absolute;
 	font-family: "Material Symbols Outlined", serif;
 	content: "";
-	color: var(--bgl-white);
+	color: var( --bgl-light-text);
 	background: transparent;
 	display: flex;
 	align-items: center;
@@ -134,7 +134,7 @@ const inputVal = defineModel('modelValue', {
 	left: 2px;
 	bottom: 2px;
 	border-radius: 50%;
-	background: var(--bgl-white);
+	background: var(--bgl-popup-bg);
 	-webkit-transition: 0.4s;
 	transition: 0.4s;
 }

package/src/components/index.ts

@@ -23,6 +23,7 @@ export { default as Carousel } from './Carousel.vue'
 export { default as ModalConfirm } from './ModalConfirm.vue'
 export { default as MapEmbed } from './MapEmbed.vue'
 export { default as Flag } from './Flag.vue'
+export { default as AddressSearch } from './AddressSearch.vue'
 
 export * from './form'
 export * from './dashboard'

package/src/components/layout/BottomMenu.vue

@@ -40,7 +40,7 @@ defineProps<{
 <style scoped>
 .bgl_bottombar {
   background-color: var(--bgl-primary);
-  color: var(--bgl-white);
+  color: var(--bgl-light-text);
   grid-template-columns: repeat(auto-fill, var(--bgl_bottombar-btn-width));
   grid-auto-flow: column;
 	border-radius: 0;
@@ -62,7 +62,7 @@ defineProps<{
 }
 
 .bgl_bottombar .router-link-active {
-  background: var(--bgl-white);
+  background: var(--bgl-popup-bg);
   color: var(--bgl-primary) !important;
 }
 </style>

package/src/components/layout/SidebarMenu.vue

@@ -75,7 +75,7 @@ function toggleMenu() {
 }
 
 .nav-button.router-link-active {
-	background: var(--bgl-white) !important;
+	background: var(--bgl-popup-bg) !important;
 	color: var(--bgl-primary);
 }
 </style>

package/src/components/layout/TabsNav.vue

@@ -127,7 +127,7 @@ onBeforeUnmount(() => {
 	bottom: calc(var(--btn-padding) / 8);
 	left: var(--indicator-left, 0);
 	width: var(--indicator-width, 0);
-	background: var(--bgl-white);
+	background: var(--bgl-popup-bg);
 	border-radius: var(--input-border-radius);
 	transition: var(--bgl-transition);
 	z-index: 0;