@bagelink/vue 0.0.738 → 0.0.742

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

@@ -97,7 +97,7 @@ const hours = Array.from({ length: 18 }, (_, index) => {
 
 .time-wrap input[type='radio']:checked + label {
 	background: var(--bgl-primary);
-	color: var(--bgl-white);
+	color: var(--bgl-light-text);
 }
 
 .time-wrap label:hover {
@@ -109,14 +109,14 @@ const hours = Array.from({ length: 18 }, (_, index) => {
 }
 
 .dp__theme_light {
-	--dp-background-color: var(--bgl-white);
-	--dp-text-color: var(--bgl-black);
+	--dp-background-color: var(--bgl-popup-bg);
+	--dp-text-color: var(--bgl-text-color);
 	--dp-hover-color: var(--input-bg);
-	--dp-hover-text-color: var(--bgl-black);
+	--dp-hover-text-color: var(--bgl-text-color);
 	--dp-hover-icon-color: var(--bgl-primary);
 	--dp-primary-color: var(--bgl-primary);
 	--dp-primary-disabled-color: var(--bgl-primary);
-	--dp-primary-text-color: var(--bgl-white);
+	--dp-primary-text-color: var(--bgl-light-text);
 	--dp-secondary-color: var(--bgl-gray);
 	--dp-border-color: transparent;
 	--dp-menu-border-color: transparent;

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

@@ -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

@@ -1,14 +1,17 @@
 <script setup lang="ts">
 import { Btn, TextInput } from '@bagelink/vue'
 
-type TextInputT = InstanceType<typeof TextInput>
+export type TextInputT = InstanceType<typeof TextInput>
 
-type TextInputPropT = Omit<TextInputT['$props'], (`${string}modelValue` | `ref${string}` | `onVnode${string}` | 'key')>
+export type TextInputProps = Omit<
+	TextInputT['$props'],
+	(`${string}modelValue` | `ref${string}` | `onVnode${string}` | 'key' | 'type')
+>
+// const props =
+defineProps<{ txtInputProps: TextInputProps }>()
 
-const props = defineProps<{ txtInputProps: TextInputPropT }>()
-
-const password = defineModel<string>('modelValue')
-const showPwd = defineModel<string>('showPwd', { default: false })
+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')
@@ -20,7 +23,3 @@ const inputType = $computed(() => showPwd.value ? 'text' : 'password')
 		<Btn flat thin class="m-05 position-bottom-end" :icon="toggleShowPwdIcon" @click="showPwd = !showPwd" />
 	</div>
 </template>
-
-<style scoped>
-
-</style>

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/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/TelInput.vue

@@ -102,7 +102,7 @@ const defaultInputOptions = {
 	'readonly': false,
 	'tabindex': 0,
 	'style': '' as Raw<StyleValue>,
-	'placeholder': 'Enter a phone number',
+	// 'placeholder': 'Enter a phone number',
 }
 
 const computedDropDownOptions = $computed(() => ({
@@ -388,7 +388,7 @@ function handleInput(e: KeyboardEvent) {
 					:id="id"
 					v-model="phone"
 					:required="required"
-					:placeholder="computedInputOptions.placeholder"
+					:placeholder="props.placeholder || 'Enter a phone number'"
 					:disabled="disabled"
 					type="tel"
 					:autocomplete="autocomplete"

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/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;