@bagelink/vue 1.4.79 → 1.4.85

package/src/components/Btn.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { IconType, ThemeType } from '@bagelink/vue'
+import type { IconType, ExtendedThemeType } from '@bagelink/vue'
 import type { SetupContext } from 'vue'
-import { Icon, Loading } from '@bagelink/vue'
+import { Icon, Loading, useModal } from '@bagelink/vue'
 import { useSlots, ref, onMounted, onUnmounted } from 'vue'
 import { RouterLink } from 'vue-router'
 
@@ -12,12 +12,13 @@ const props = withDefaults(
 		iconEnd?: IconType
 		iconSize?: number | string
 		iconMobileSize?: number | string
-		color?: ThemeType
-		theme?: ThemeType
+		color?: ExtendedThemeType
+		theme?: ExtendedThemeType
 		flat?: boolean
 		border?: boolean
 		outline?: boolean
 		thin?: boolean
+		size?: 'xs' | 's' | 'm' | 'l' | 'xl'
 		type?: 'button' | 'submit' | 'reset'
 		loading?: boolean
 		role?: string
@@ -28,6 +29,7 @@ const props = withDefaults(
 		is?: string
 		ripple?: boolean
 		onClick?: (e: MouseEvent) => void
+		confirm?: boolean | string
 	}>(),
 	{
 		onClick: () => '',
@@ -43,9 +45,15 @@ const props = withDefaults(
 	},
 )
 
+const emit = defineEmits<{
+	confirmed: [event: MouseEvent]
+}>()
+
+const { confirmModal } = useModal()
+
 const isMobileScreen = ref(false)
 
-const checkMobile = () => {
+function checkMobile() {
 	isMobileScreen.value = window.innerWidth <= 910
 }
 
@@ -58,6 +66,23 @@ onUnmounted(() => {
 	window.removeEventListener('resize', checkMobile)
 })
 
+async function handleClick(event: MouseEvent) {
+	if (props.confirm) {
+		const message = typeof props.confirm === 'string' ? props.confirm : 'Are you sure?'
+		const confirmed = await confirmModal({
+			title: 'Confirm',
+			message
+		})
+
+		if (!confirmed) return
+
+		props.onClick(event)
+		emit('confirmed', event)
+	} else {
+		props.onClick(event)
+	}
+}
+
 const iconSizeComputed = $computed(() => {
 	if (props.iconSize !== undefined) return props.iconSize
 	return isMobileScreen.value ? 1 : 1.2
@@ -94,7 +119,7 @@ const slots: SetupContext['slots'] = useSlots()
 	'bgl_btn-border': border || outline,
 	[`bgl_btn-${color}`]: color,
 	[`bgl_btn-${theme}`]: theme,
-}" :tabindex="disabled ? -1 : 0" @click.stop="onClick" @keydown.enter="onClick" @keydown.space="onClick">
+}" :tabindex="disabled ? -1 : 0" @click.stop="handleClick" @keydown.enter="handleClick" @keydown.space="handleClick">
 	<Loading v-if="loading" class="h-100p" size="15" />
 	<div v-else class="bgl_btn-flex">
 		<Icon v-if="icon" :icon="icon" class="transition-400" :size="iconSizeComputed" :mobile-size="iconMobileSize" />
@@ -108,174 +133,174 @@ const slots: SetupContext['slots'] = useSlots()
 </template>
 
 <style scoped>
-.bgl_btn {
-  --btn-bg: var(--bgl-primary);
-  --btn-color: var(--bgl-light-text);
-  --btn-flat-color: var(--bgl-text-color);
-}
+@import '../styles/btnColors.css';
 
 .bgl_btn-green {
-  --btn-bg: var(--bgl-green);
-  --btn-color: var(--bgl-light-text);
-  --btn-flat-color: var(--bgl-green);
+	--btn-bg: var(--bgl-green);
+	--btn-color: var(--bgl-light-text);
+	--btn-flat-color: var(--bgl-green);
 }
 
 .bgl_btn-yellow {
-  --btn-bg: var(--bgl-yellow);
-  --btn-color: var(--bgl-black);
-  --btn-flat-color: var(--bgl-yellow);
+	--btn-bg: var(--bgl-yellow);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-yellow);
 }
 
 .bgl_btn-blue {
-  --btn-bg: var(--bgl-blue);
-  --btn-color: var(--bgl-light-text);
-  --btn-flat-color: var(--bgl-blue);
+	--btn-bg: var(--bgl-blue);
+	--btn-color: var(--bgl-light-text);
+	--btn-flat-color: var(--bgl-blue);
 }
 
 .bgl_btn-primary {
-  --btn-bg: var(--bgl-primary);
-  --btn-color: var(--bgl-light-text);
-  --btn-flat-color: var(--bgl-primary);
+	--btn-bg: var(--bgl-primary);
+	--btn-color: var(--bgl-light-text);
+	--btn-flat-color: var(--bgl-primary);
 }
 
 .bgl_btn-red {
-  --btn-bg: var(--bgl-red);
-  --btn-color: var(--bgl-light-text);
-  --btn-flat-color: var(--bgl-red);
+	--btn-bg: var(--bgl-red);
+	--btn-color: var(--bgl-light-text);
+	--btn-flat-color: var(--bgl-red);
 }
 
 .bgl_btn-white {
-  --btn-bg: var(--bgl-white);
-  --btn-color: var(--bgl-black);
-  --btn-flat-color: var(--bgl-white);
+	--btn-bg: var(--bgl-white);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-white);
 }
 
 .bgl_btn-black {
-  --btn-bg: var(--bgl-black);
-  --btn-color: var(--bgl-light-text);
-  --btn-flat-color: var(--bgl-black);
+	--btn-bg: var(--bgl-black);
+	--btn-color: var(--bgl-light-text);
+	--btn-flat-color: var(--bgl-black);
 }
 
 .bgl_btn-gray {
-  --btn-bg: var(--bgl-gray-light);
-  --btn-color: var(--bgl-black);
-  --btn-flat-color: var(--bgl-gray);
+	--btn-bg: var(--bgl-gray-light);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-gray);
 }
 
 .bgl_btn-light {
-  --btn-bg: var(--bgl-primary-light);
-  --btn-color: var(--bgl-primary);
-  --btn-flat-color: var(--bgl-primary-light);
+	--btn-bg: var(--bgl-primary-light);
+	--btn-color: var(--bgl-primary);
+	--btn-flat-color: var(--bgl-primary-light);
 }
 
 .bgl_btn-gray-light {
-  --btn-bg: var(--bgl-gray-light);
-  --btn-color: var(--bgl-gray);
-  --btn-flat-color: var(--bgl-gray-light);
+	--btn-bg: var(--bgl-gray-light);
+	--btn-color: var(--bgl-gray);
+	--btn-flat-color: var(--bgl-gray-light);
 }
 
 .bgl_btn {
-  padding-left: var(--btn-padding);
-  padding-right: var(--btn-padding);
-  transition: var(--bgl-transition);
-  background: var(--btn-bg);
-  color: var(--btn-color);
-  text-decoration: none;
+	padding-left: var(--btn-padding);
+	padding-right: var(--btn-padding);
+	transition: var(--bgl-transition);
+	background: var(--btn-bg);
+	color: var(--btn-color);
+	text-decoration: none;
 }
 
 .bgl_btn.bgl_btn-icon {
-  padding-left: 0;
-  padding-right: 0;
-  height: var(--btn-height);
-  width: var(--btn-height);
-  border-radius: 100%;
-  font-size: 1rem;
-  flex-shrink: 0;
+	padding-left: 0;
+	padding-right: 0;
+	height: var(--btn-height);
+	width: var(--btn-height);
+	border-radius: 100%;
+	font-size: 1rem;
+	flex-shrink: 0;
 }
 
 a {
-  text-decoration: none;
+	text-decoration: none;
 }
 
 .bgl_btn-flex {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  justify-content: center;
-  height: 100%;
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	justify-content: center;
+	height: 100%;
 }
 
-.bgl_btn .bgl_btn-icon{
-  font-size: calc(var(--input-font-size) * 1.3);
+.bgl_btn .bgl_btn-icon {
+	font-size: calc(var(--input-font-size) * 1.3);
 }
 
 .bgl_btn:hover,
 .bgl_btn-icon:hover {
-  filter: var(--bgl-hover-filter);
+	filter: var(--bgl-hover-filter);
 }
 
 .bgl_btn:active:not(:disabled),
 .bgl_btn-icon:active:not(:disabled) {
-  filter: var(--bgl-active-filter);
+	filter: var(--bgl-active-filter);
 }
 
 .bgl_btn.bgl_btn_flat {
-  background: transparent;
-  color: var(--btn-flat-color);
+	background: transparent;
+	color: var(--btn-flat-color);
 }
 
 .bgl_btn_flat:hover:not(:disabled),
 .bgl_btn-icon.bgl_btn_flat:hover:not(:disabled) {
-  background: var(--bgl-gray-20);
+	background: var(--bgl-gray-tint);
 }
 
 .bgl_btn.bgl_btn_flat:active:not(:disabled),
 .bgl_btn-icon.bgl_btn_flat:active:not(:disabled) {
-  background: var(--bgl-gray-40);
+	background: var(--bgl-gray-tint-dark);
 }
 
 .bgl_btn.thin {
-  padding-inline: calc(var(--btn-padding) / 3);
-  border-radius: calc(var(--btn-border-radius) / 1.5);
+	padding-inline: calc(var(--btn-padding) / 3);
+	border-radius: calc(var(--btn-border-radius) / 1.5);
 }
 
 .bgl_btn.round {
-  border-radius: 1000px;
+	border-radius: 1000px;
 }
 
 .bgl_btn-icon.thin {
-  height: calc(var(--btn-height) / 1.5);
-  width: calc(var(--btn-height) / 1.5);
-  line-height: normal;
+	height: calc(var(--btn-height) / 1.5);
+	width: calc(var(--btn-height) / 1.5);
+	line-height: normal;
 }
+
 .bgl_btn-icon.thin .bgl_btn-flex {
 	height: 100%;
 }
 
-[dir="rtl"] .bgl_btn-icon{
-  transform: rotateY(180deg);
+[dir="rtl"] .bgl_btn-icon {
+	transform: rotateY(180deg);
 }
-[dir="rtl"] .ltr .bgl_btn-icon{
-  transform: rotateY(0deg);
+
+[dir="rtl"] .ltr .bgl_btn-icon {
+	transform: rotateY(0deg);
 }
 
-.bgl_btn-border, .bgl_btn-icon.bgl_btn_flat.bgl_btn-border {
-	  border: 1px solid var(--btn-flat-color);
-	  background: transparent;
-	  color: var(--btn-flat-color);
+.bgl_btn-border,
+.bgl_btn-icon.bgl_btn_flat.bgl_btn-border {
+	border: 1px solid var(--btn-flat-color);
+	background: transparent;
+	color: var(--btn-flat-color);
 }
 
 .bgl_btn-border:hover {
-	  color: var(--btn-flat-color);
+	color: var(--btn-flat-color);
 }
 
 .bgl_btn-border:active:not(:disabled) {
-  filter: brightness(80%);
+	filter: brightness(80%);
 }
 
-.bgl_btn:disabled, .bgl_btn[disabled=true] {
-  opacity: 0.7;
-  filter: grayscale(0.3);
-  cursor: not-allowed;
+.bgl_btn:disabled,
+.bgl_btn[disabled=true] {
+	opacity: 0.7;
+	filter: grayscale(0.3);
+	cursor: not-allowed;
 }
 </style>

package/src/components/Card.vue

@@ -87,7 +87,7 @@ const is = $computed(() => {
 }
 
 .bgl_card.gray {
-	background: var(--bgl-gray-20);
+	background: var(--bgl-gray-tint);
 }
 
 .bgl_card.border {

package/src/components/Modal.vue

@@ -78,22 +78,14 @@ onUnmounted(() => {
 
 <template>
 	<div
-		class="bg-dark"
-		:style="{ zIndex }"
-		:class="{ 'is-side': side, 'is-active': isVisible, 'bg-lignt': false }"
-		@click="() => (dismissable ? closeModal() : '')"
-		@keydown.esc="closeModal"
+		class="bg-dark" :style="{ zIndex }" :class="{ 'is-side': side, 'is-active': isVisible, 'bg-lignt': false }"
+		@click="() => (dismissable ? closeModal() : '')" @keydown.esc="closeModal"
 	>
 		<Card class="modal" :style="{ ...maxWidth }" :thin="thin" @click.stop>
 			<header v-if="slots.toolbar || title" class="tool-bar">
 				<slot name="toolbar" />
 				<Btn
-					v-if="dismissable"
-					:style="{ float: side ? 'left' : 'right' }"
-					flat
-					icon="close"
-					thin
-					icon-mobile-size="1.4"
+					v-if="dismissable" :style="{ float: side ? '' : '' }" flat icon="close" thin icon-mobile-size="1.4"
 					@click="closeModal"
 				/>
 				<Title v-if="title" class="modal-title" tag="h3" :label="title" />
@@ -101,25 +93,13 @@ onUnmounted(() => {
 
 			<div v-else class="sticky z-index-999 -mt-1 -ms-1 px-025 h-30px pt-025 modal-no-title">
 				<Btn
-					v-if="dismissable"
-					class="position-start"
-					icon="close"
-					thin
-					round
-					color="white"
-					icon-mobile-size="1.4"
-					@click="closeModal"
+					v-if="dismissable" class="position-start" icon="close" thin round color="white"
+					icon-mobile-size="1.4" @click="closeModal"
 				/>
 			</div>
 			<slot />
 			<footer v-if="slots.footer || actions?.length" class="modal-footer mt-1">
-				<Btn
-					v-for="(action, i) in actions"
-					:key="i"
-					color="gray"
-					v-bind="action"
-					@click="closeModal"
-				/>
+				<Btn v-for="(action, i) in actions" :key="i" color="gray" v-bind="action" @click="closeModal" />
 				<slot name="footer" />
 			</footer>
 		</Card>
@@ -127,11 +107,12 @@ onUnmounted(() => {
 </template>
 
 <style>
-.modal{
+.modal {
 	color: var(--bgl-popup-text);
 	/* display: flex;
 	flex-direction: column; */
 }
+
 .modal-title {
 	text-align: center;
 	font-weight: 600;
@@ -156,13 +137,14 @@ onUnmounted(() => {
 	align-items: center;
 }
 
-.modal-footer > div {
+.modal-footer>div {
 	gap: 1rem;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 }
-.modal-no-title{
+
+.modal-no-title {
 	width: calc(100% + 2rem);
 	border-radius: var(--card-border-radius);
 

package/src/components/ModalForm.vue

@@ -55,43 +55,27 @@ defineExpose({ setFormValues })
 
 <template>
 	<Modal
-		ref="modal"
-		:side
-		:width
-		:visible="visible"
-		:dismissable
-		:title
+		ref="modal" :side :width :visible="visible" :dismissable :title
 		@update:visible="($event: boolean) => emit('update:visible', $event)"
 	>
+		<template #toolbar>
+			<slot name="toolbar" />
+		</template>
 		<BagelForm
-			v-if="visible"
-			ref="form"
-			v-model="formData"
-			:schema="schema"
-			@update:modelValue="emit('update:modelValue', $event)"
-			@submit="runSubmit"
+			v-if="visible" ref="form" v-model="formData" :schema="schema"
+			@update:modelValue="emit('update:modelValue', $event)" @submit="runSubmit"
 		/>
 		<template v-if="onDelete || onSubmit" #footer>
 			<div class="flex gap-0">
 				<Btn thin flat :value="cancelText || 'Cancel'" @click="closeModal" />
 				<Btn
-					v-if="onDelete"
-					thin
-					icon="delete"
-					flat
-					:value="deleteText || 'Delete'"
-					color="red"
+					v-if="onDelete" thin icon="delete" flat :value="deleteText || 'Delete'" color="red"
 					@click="runDelete"
 				/>
 			</div>
 			<div class="flex gap-05">
 				<Btn
-					v-if="onDuplicate"
-					outline
-					class="px-1"
-					icon="copy_all"
-					flat
-					:value="duplicateText || 'Duplicate'"
+					v-if="onDuplicate" outline class="px-1" icon="copy_all" flat :value="duplicateText || 'Duplicate'"
 					@click="onDuplicate?.(formData)"
 				/>
 				<Btn v-if="onSubmit" :value="submitText || 'Submit'" @click="runSubmit" />