@bagelink/vue 1.14.13 → 1.15.0

package/src/components/Modal.vue

@@ -1,184 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<script lang="ts" setup>
-import type { BtnOptions } from '@bagelink/vue'
-import type { SetupContext } from 'vue'
-import {
-	Btn,
-	Card,
-	Title
-} from '@bagelink/vue'
-import {
-	computed,
-	ref,
-	useSlots,
-	watch
-} from 'vue'
-import '../styles/modal.css'
-
-interface ModalProps {
-	thin?: boolean
-	mobileThin?: boolean
-	side?: boolean
-	title?: string
-	width?: string
-	dismissable?: boolean
-	actions?: BtnOptions[]
-	visible?: boolean
-	zIndex?: number
-	closePlacement?: 'header' | 'header-end' | 'overlay' | 'overlay-end' | 'none' | 'footer'
-}
-const props = withDefaults(defineProps<ModalProps>(), {
-	thin: false,
-	side: false,
-	dismissable: true,
-	visible: false,
-	zIndex: 100,
-	closePlacement: 'header'
-})
-
-const emit = defineEmits(['update:visible'])
-
-const slots: SetupContext['slots'] = useSlots()
-
-const isVisible = ref<boolean>(false)
-
-watch(
-	() => props.visible,
-	(val) => {
-		if (val === isVisible.value || val === undefined) { return }
-		if (val) { openModal() }
-		else { closeModal() }
-	},
-	{ immediate: true },
-)
-
-const maxWidth = computed(() => {
-	const { width } = props
-	if (width?.match(/px|em|rem|vw|vh|%/)) { return { 'max-width': width } }
-	if (width?.match(/\d+/)) { return { 'max-width': `${width}px` } }
-	return { 'max-width': '720px' }
-})
-
-// Computed properties for close button placement
-const isOverlay = computed(() => props.closePlacement === 'overlay' || props.closePlacement === 'overlay-end')
-const isHeader = computed(() => props.closePlacement === 'header' || props.closePlacement === 'header-end')
-const isFooter = computed(() => props.closePlacement === 'footer')
-
-const overlayCloseClass = computed(() => {
-	if (props.closePlacement === 'overlay-end') { return 'top-1 end-1' }
-	return 'top-1 start-1'
-})
-
-function closeModal() {
-	isVisible.value = false
-	setTimeout(() => { emit('update:visible', false) }, 200)
-}
-
-defineExpose({ closeModal })
-
-function openModal() {
-	setTimeout(() => (isVisible.value = true), 1)
-}
-
-// Note: ESC key handling is now done centrally in ModalPlugin for proper stacking behavior
-</script>
-
-<template>
-	<div
-		class="bg-dark" :style="{ zIndex }" :class="{ 'is-side': side, 'is-active': isVisible, 'bg-lignt': false }"
-		@click="() => (dismissable ? closeModal() : '')" @keydown.esc="closeModal"
-	>
-		<!-- Overlay close button -->
-		<Btn
-			v-if="dismissable && isOverlay" icon="close" icon-mobile-size="1.4" class="fixed"
-			:class="overlayCloseClass" @click="closeModal"
-		/>
-
-		<Card
-			class="modal m_pt-0" :style="{ ...maxWidth, '--bgl-box-bg': 'var(--bgl-popup-bg)' }" :thin="thin"
-			:class="{ 'pt-0': thin, 'pt-1': !thin, 'm_mt-5': isOverlay, 'display-flex column': side, 'm_px-1 m_pb-1': mobileThin }" @click.stop
-		>
-			<header v-if="slots.toolbar || title" class="tool-bar w-100p flex space-between sticky z-3 py-1">
-				<!-- Header close button -->
-				<Btn
-					v-if="dismissable && isHeader && closePlacement === 'header'" :style="{ float: side ? '' : '' }"
-					flat icon="close" thin icon-mobile-size="1.4" @click="closeModal"
-				/>
-				<slot name="toolbar" />
-				<Title
-					v-if="title" class="modal-title txt-center txt20 medium my-0 w-100p ellipsis-1" tag="h3"
-					:label="title"
-					:class="{ 'me-1-5': isHeader && dismissable && closePlacement === 'header', 'ms-1-5': isHeader && dismissable && closePlacement === 'header-end' }"
-				/>
-				<!-- Header-end close button -->
-				<Btn
-					v-if="dismissable && isHeader && closePlacement === 'header-end'"
-					:style="{ float: side ? '' : '' }" flat icon="close" thin icon-mobile-size="1.4"
-					@click="closeModal"
-				/>
-			</header>
-
-			<header
-				v-else class="tool-bar w-100p flex space-between sticky z-3"
-				:class="{ 'py-1': !isOverlay, 'pt-1': isOverlay }"
-			>
-				<!-- Header close button (no title) -->
-				<Btn
-					v-if="dismissable && isHeader && closePlacement === 'header'" :style="{ float: side ? '' : '' }"
-					flat icon="close" thin icon-mobile-size="1.4" @click="closeModal"
-				/>
-				<slot name="toolbar" />
-				<!-- Header-end close button (no title) -->
-				<Btn
-					v-if="dismissable && isHeader && closePlacement === 'header-end'"
-					:style="{ float: side ? '' : '' }" flat icon="close" thin icon-mobile-size="1.4" class="ms-auto"
-					@click="closeModal"
-				/>
-			</header>
-
-			<slot />
-			<footer
-				v-if="slots.footer || actions?.length" class="modal-footer gap-1 flex space-between"
-				:class="{ 'mt-1': !side, 'mt-auto': side }"
-			>
-				<Btn v-for="(action, i) in actions" :key="i" color="gray" v-bind="action" @click="closeModal" />
-				<slot name="footer" />
-				<!-- Footer close button -->
-			</footer>
-			<Btn
-				v-if="dismissable && isFooter" icon="close" label="Close"
-				class="mx-auto absolute start-0 end-0 modalFooterBtn" @click="closeModal"
-			/>
-		</Card>
-	</div>
-</template>
-
-<style>
-.modal {
-	color: var(--bgl-popup-text);
-}
-
-.modal .bgl_btn.bgl_btn_flat {
-	color: var(--bgl-popup-text) !important;
-}
-
-.modal .rich-text-editor .bgl_btn.bgl_btn_flat.active {
-	color: var(--bgl-white) !important;
-}
-.modal-footer>div {
-	gap: 1rem;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-
-.modal-no-title {
-	width: calc(100% + 2rem);
-	border-radius: var(--card-border-radius);
-}
-
-.modalFooterBtn {
-	bottom: calc(var(--btn-height) / 2 * -1);
-
-}
-</style>

package/src/components/ModalConfirm.vue

@@ -1,42 +0,0 @@
-<script lang="ts" setup>
-import type { ThemeType } from '@bagelink/vue'
-import { Btn, Modal, useI18n } from '@bagelink/vue'
-import { computed } from 'vue'
-
-const props = defineProps<{
-	title?: string
-	message?: string
-	confirmText?: string
-	confirmBtnColor?: ThemeType
-	cancelBtnColor?: ThemeType
-	cancelText?: string
-	resolve: (value: boolean) => void
-}>()
-
-const emit = defineEmits(['update:visible'])
-const { $t } = useI18n()
-
-function select(val: boolean) {
-	props.resolve(val)
-	emit('update:visible')
-}
-
-const title = computed(() => props.title || $t('modalConfirm.title'))
-const message = computed(() => props.message || $t('modalConfirm.message'))
-const confirmText = computed(() => props.confirmText || $t('modalConfirm.confirm'))
-const cancelText = computed(() => props.cancelText || $t('modalConfirm.cancel'))
-const confirmBtnColor = computed((): ThemeType => props.confirmBtnColor || 'green')
-const cancelBtnColor = computed((): ThemeType => props.cancelBtnColor || 'gray')
-</script>
-
-<template>
-	<Modal :title="title" width="380px" :dismissable="false" class="txt-center" :zIndex="9999">
-		<p class="pb-05 pretty">
-			{{ message }}
-		</p>
-		<template #footer>
-			<Btn :color="cancelBtnColor" :value="cancelText" @click="select(false)" />
-			<Btn :color="confirmBtnColor" :value="confirmText" @click="select(true)" />
-		</template>
-	</Modal>
-</template>

package/src/components/ModalForm.vue

@@ -1,102 +0,0 @@
-<script lang="ts" setup generic="T extends {[key:string]:any}, P extends Path<T>">
-import type { Path } from '@bagelink/vue'
-import type { ComponentExposed } from 'vue-component-type-helpers'
-import type { ModalFormOptions } from '../plugins/modalTypes'
-import { Btn, Modal, BagelForm } from '@bagelink/vue'
-import { ref } from 'vue'
-
-// eslint-disable-next-line vue/prop-name-casing
-const props = withDefaults(defineProps<ModalFormOptions<T>>(), {
-	visible: true,
-	dismissable: true,
-})
-
-const emit = defineEmits<{
-	'update:modelValue': [value: T]
-	'update:visible': [value: boolean]
-}>()
-
-const modal = ref<ComponentExposed<typeof Modal>>()
-
-const formData = defineModel<T>('modelValue', {
-	default: {} as Partial<T>,
-})
-
-type BagelFormT = ComponentExposed<typeof BagelForm<T, P>>
-
-const form = ref<BagelFormT>()
-const closeModal = () => modal.value?.closeModal()
-
-const submitting = ref(false)
-
-async function runSubmit() {
-	if (submitting.value) { return }
-	if (form.value?.validateForm() === false) { return }
-	submitting.value = true
-	try {
-		await props.onSubmit?.(formData.value)
-		closeModal()
-	} catch (err: any) {
-		submitting.value = false
-		if (props.onError) {
-			props.onError(err)
-		} else {
-			console.error('[ModalForm] Submit error:', err)
-		}
-	}
-}
-
-function runDelete() {
-	props.onDelete?.(formData.value)
-	closeModal()
-}
-
-function setFormValues(values: { [key: string]: any }) {
-	Object.assign(formData, values)
-}
-
-defineExpose({ setFormValues })
-</script>
-
-<template>
-	<Modal
-		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"
-		/>
-		<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"
-					@click="runDelete"
-				/>
-			</div>
-			<div class="flex gap-05">
-				<Btn
-					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" />
-			</div>
-		</template>
-	</Modal>
-</template>
-
-<style scoped>
-.modal-title {
-	margin-top: 0.5rem;
-}
-
-@media screen and (max-width: 910px) {
-	.modal-title {
-		margin-top: 1rem;
-	}
-}
-</style>

package/src/components/Pill.vue

@@ -1,149 +0,0 @@
-<script setup lang="ts">
-import type { IconType, ThemeType } from '@bagelink/vue'
-import type { SetupContext } from 'vue'
-import { Btn, Icon } from '@bagelink/vue'
-import { computed, useSlots } from 'vue'
-import '../styles/base-colors.css'
-
-interface BtnProp {
-	icon?: IconType
-	onClick: () => void
-	value?: string
-}
-
-const props = defineProps<{
-	disabled?: boolean
-	icon?: IconType
-	iconEnd?: IconType
-	color?: ThemeType
-	theme?: ThemeType
-	flat?: boolean
-	border?: boolean
-	outline?: boolean
-	loading?: boolean
-	value?: string
-	modelValue?: string
-	round?: boolean
-	btn?: BtnProp
-	btnEnd?: BtnProp
-	large?: boolean
-	small?: boolean
-	uppercase?: boolean
-}>()
-
-const slots: SetupContext['slots'] = useSlots()
-
-const computedTheme = computed(
-	() => {
-		if (props.disabled) { return 'gray-light' }
-		return (props.color || props.theme) as ThemeType
-	},
-)
-
-const computedPairClass = computed(() => {
-	const theme = computedTheme.value
-	if (!theme) return 'pair-primary'
-	return `pair-${theme}`
-})
-
-const computedClasses = computed(() => {
-	const classes: Record<string, boolean> = {
-		'bgl_pill': !props.icon || !!slots.default || !!props.value,
-		'round': props.round,
-		'bgl_flatPill': props.flat,
-		'bgl_pill-border': props.border || props.outline,
-		'pillLarge': props.large,
-		'pillSmall': props.small,
-	}
-
-	// Add the pair class
-	classes[computedPairClass.value] = true
-
-	return classes
-})
-</script>
-
-<template>
-	<div
-		class="bgl_pill"
-		style="height: var(--pill-height);"
-		:disabled="disabled"
-		:class="computedClasses"
-	>
-		<div class="flex h-100 justify-content-center relative ">
-			<div v-if="loading" class="loading absolute inset-0 mx-auto" />
-			<div class="px-025 flex gap-025 justify-content-center" :class="{ 'opacity-0': loading }">
-				<Btn v-if="btn" class="bgl_pill-btn -ms-025" icon-size="0.8" round v-bind="btn" />
-				<Icon v-if="icon" class="line-height-0" :icon="icon" style="font-size: var(--pill-font-size)" />
-				<slot :class="{ uppercase }" />
-				<template v-if="!slots.default">
-					<p class="pillText inline" :class="{ uppercase }">
-						{{ slots.default ? slots.default : value || modelValue }}
-					</p>
-				</template>
-				<Icon v-if="iconEnd" class="line-height-0" :icon="iconEnd" style="font-size: var(--pill-font-size)" />
-				<Btn v-if="btnEnd" class="bgl_pill-btn -me-025" icon-size="0.8" round v-bind="btnEnd" />
-			</div>
-		</div>
-	</div>
-</template>
-
-<style scoped>
-.pillLarge{
-	--pill-font-size: var(--bgl-font-size);
-	--pill-height:auto;
-}
-.pillSmall{
-	--pill-font-size: 9px;
-	--pill-height:15px;
-}
-.pillText{
-	font-size: var(--pill-font-size);
-}
-.bgl_pill-btn{
-	color: var(--pill-btn-color);
-	background: var(--pill-btn-bg);
-	width: calc(var(--pill-height) / 1.25)!important;
-	height: calc(var(--pill-height) / 1.25)!important;
-}
-.loading {
-  border: 1px solid var(--bgl-light-text);
-  border-bottom: 2px solid var(--bgl-light-text);
-  animation: spin 1s linear infinite;
-  border-radius: 100px;
-  width: 1rem;
-  height: 1rem;
-  margin: auto;
-}
-.bgl_flatPill .loading {
-	border-bottom: 2px solid var(--bgl-text-color);
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.bgl_pill {
-  padding-inline: calc(var(--pill-font-size) / 6);
-  padding-block: calc(var(--pill-font-size) / 24);
-transition: var(--bgl-transition);
-  display: inline-block;
-  margin-inline-end: 0.25rem;
-  border-radius: var(--pill-border-radius);
-  min-height: var(--pill-height);
-vertical-align: middle;
-}
-
-.bgl_pill[disabled="true"] {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.bgl_pill.round {
-	border-radius: 1000px;
-}
-</style>