@bagelink/vue 1.14.13 → 1.14.15

package/bin/utils.ts

@@ -1,223 +0,0 @@
-import fs from 'node:fs'
-
-import { join } from 'node:path'
-import { cwd as _cwd, env, argv } from 'node:process'
-import { ESLint } from 'eslint'
-import * as prettier from 'prettier'
-import { loadEnv } from 'vite'
-
-const cwd = _cwd()
-
-export async function formatAndWriteCode(outPath: string, code: string) {
-	const prettyCode = await prettier.format(code, { parser: 'typescript' })
-	fs.writeFileSync(outPath, prettyCode)
-}
-
-export async function runEsLintOnDir(dir: string) {
-	// ! only run if eslint.config.js exists
-	if (!fs.existsSync(join(cwd, 'eslint.config.js'))) {
-		console.log('no eslint.config.js found, skipping eslint')
-		return
-	}
-
-	const eslint = new ESLint({ fix: true, overrideConfigFile: join(cwd, 'eslint.config.js'), cwd })
-	const results = await eslint.lintFiles(`${dir}/**/*.ts`)
-
-	await ESLint.outputFixes(results)
-}
-
-// =============================================================================
-// TYPES
-// =============================================================================
-
-interface ParsedConfig {
-	readonly baseUrl: string
-	readonly openApiUrl: string
-	readonly schemaId?: string
-	readonly outputFile?: string
-	readonly useUtilityFunctions?: boolean
-	readonly useTableSchema?: boolean
-	readonly verbose?: boolean
-	readonly cwd: string
-	env: Partial<Record<string, string>>
-}
-
-interface ConfigOptions {
-	readonly schemaId: string | undefined
-	readonly defaultOutputFile?: string
-	readonly allowedFlags?: readonly string[]
-}
-
-// =============================================================================
-// ARGUMENT PARSING UTILITIES
-// =============================================================================
-
-/**
- * Parse command line flags (arguments starting with --)
- */
-function parseFlags(args: string[]): Set<string> {
-	return new Set(
-		args
-			.filter(arg => arg.startsWith('--'))
-			.map(arg => arg.slice(2)) // Remove '--' prefix
-	)
-}
-
-/**
- * Parse command line arguments that are key-value pairs (--key=value)
- */
-function parseKeyValueArgs(args: string[]): Record<string, string> {
-	const keyValuePairs: Record<string, string> = {}
-
-	args
-		.filter(arg => arg.startsWith('--') && arg.includes('='))
-		.forEach((arg) => {
-			const [key, ...valueParts] = arg.slice(2).split('=')
-			if (key && valueParts.length > 0) {
-				keyValuePairs[key] = valueParts.join('=')
-			}
-		})
-
-	return keyValuePairs
-}
-
-// /**
-//  * Parse positional arguments (non-flag arguments)
-//  */
-// function parsePositionalArgs(args: string[]): string[] {
-// 	return args.filter(arg => !arg.startsWith('--'))
-// }
-
-// =============================================================================
-// MAIN PARSING FUNCTION
-// =============================================================================
-
-/**
- * Parse command line arguments and environment variables into a structured configuration
- *
- * @example
- * ```bash
- * # Basic usage
- * node script.js
- *
- * # With directory
- * node script.js
- *
- * # With flags
- * node script.js --verbose
- *
- * # With key-value pairs
- * node script.js --schema-id=UserResponse --output=src/forms/user.ts
- *
- * # Combined
- * node script.js --schema-id=UserResponse --output=src/forms/user.ts
- * ```
- */
-export function parseConfig(options: ConfigOptions): ParsedConfig {
-	const {
-		schemaId,
-		defaultOutputFile,
-		allowedFlags = [
-			'verbose',
-			'utility-functions',
-			'table-schema'
-		]
-	} = options
-
-	// Load environment variables
-	const currentCwd = cwd
-	const environment = loadEnv('', currentCwd)
-
-	// Parse command line arguments
-	const args = argv.slice(2) // Remove 'node' and script path
-	const flags = parseFlags(args)
-	const keyValueArgs = parseKeyValueArgs(args)
-	// const positionalArgs = parsePositionalArgs(args)
-
-	// Validate flags
-	const invalidFlags = Array.from(flags).filter(flag => !allowedFlags.includes(flag) && !flag.includes('=')
-	)
-
-	if (invalidFlags.length > 0) {
-		console.warn(`Warning: Unknown flags detected: ${invalidFlags.join(', ')}`)
-		console.warn(`Allowed flags: ${allowedFlags.join(', ')}`)
-	}
-
-	// Build configuration
-	const baseUrl = keyValueArgs.baseurl || keyValueArgs['base-url'] || 'http://localhost:8000'
-
-	const config: ParsedConfig = {
-		// URLs and paths
-		baseUrl,
-		openApiUrl: `${baseUrl}/openapi.json`,
-
-		// Flags
-		useUtilityFunctions: flags.has('utility-functions'),
-		useTableSchema: flags.has('table-schema'),
-		verbose: flags.has('verbose'),
-
-		// Key-value arguments with fallbacks
-		schemaId: keyValueArgs['schema-id'] || keyValueArgs.schemaId || keyValueArgs.schema || schemaId,
-		outputFile: keyValueArgs.output || keyValueArgs.out || defaultOutputFile,
-
-		// System info
-		cwd: currentCwd,
-		env: { ...environment, ...env } // Merge loaded env with process.env
-	} as const
-
-	// Log configuration if verbose
-	if (config.verbose) {
-		console.log('Parsed configuration:', {
-			...config,
-			env: '[hidden]' // Don't log environment variables
-		})
-	}
-
-	return config
-}
-
-// =============================================================================
-// UTILITY HELPERS
-// =============================================================================
-
-/**
- * Print help message for command line usage
- */
-export function printHelp(scriptName: string = 'script'): void {
-	console.log(`
-Usage: ${scriptName} [directory] [options]
-
-Arguments:
-  directory                Target directory (default: .bagelink)
-
-Options:
-  --verbose                Enable verbose logging
-  --utility-functions      Use utility functions in generated code
-  --table-schema           Generate table schema instead of form schema
-  --baseurl=<url>          Specify base URL (default: http://localhost:8000)
-  --schema-id=<id>         Specify schema ID to process
-  --output=<path>          Specify output file path
-
-Examples:
-  ${scriptName}                            # Use defaults
-  ${scriptName}                            # Custom directory
-  ${scriptName} --verbose                  # With flags
-  ${scriptName} --baseurl=https://api.example.com  # Custom base URL
-  ${scriptName} --schema-id=UserResponse   # With schema ID
-  ${scriptName} --output=forms.ts          # Combined usage
-`)
-}
-
-/**
- * Validate required configuration values
- */
-export function validateConfig(config: ParsedConfig, required: (keyof ParsedConfig)[] = []): void {
-	const missing = required.filter((key) => {
-		const value = config[key]
-		return value === undefined || value === null || value === ''
-	})
-
-	if (missing.length > 0) {
-		throw new Error(`Missing required configuration: ${missing.join(', ')}`)
-	}
-}

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/plugins/modalTypes.ts

@@ -1,61 +0,0 @@
-import type { MaybeRefOrGetter } from 'vue'
-import type { BtnOptions, ThemeType } from '../types'
-import type { BglFormSchemaT } from '../types/BagelForm'
-
-export interface ModalOptions {
-	title?: string
-	dismissable?: boolean
-	side?: boolean
-	width?: string
-	actions?: BtnOptions[]
-	class?: string
-	visible?: boolean
-	zIndex?: number
-}
-
-export interface ModalConfirmOptions {
-	'title': string
-	'message': string
-	'confirmText'?: string
-	'confirmBtnColor'?: ThemeType
-	'cancelText'?: string
-	'cancelBtnColor'?: ThemeType
-	'resolve': (val: boolean) => void
-	'onUpdate:visible': () => void
-	'visible': boolean
-}
-
-export type ModalType = 'modal' | 'modalForm' | 'confirmModal'
-export type ConfirmModalUserOptions = string | {
-	title: string
-	message: string
-	confirmText?: string
-	cancelText?: string
-	confirmBtnColor?: string
-	cancelBtnColor?: string
-}
-
-export interface ModalComponentProps<T extends { [key: string]: any }> {
-	componentSlots: { [key: string]: any }
-	modalType: ModalType
-	modalOptions: ModalOptions | ModalFormOptions<T> | ModalConfirmOptions
-}
-
-export interface ModalFormComponentProps<T extends { [key: string]: any }> extends ModalComponentProps<T> {
-	modalType: 'modalForm'
-	modalOptions: ModalFormOptions<T>
-}
-
-export interface ModalFormOptions<T> extends ModalOptions {
-	'schema': MaybeRefOrGetter<BglFormSchemaT<T>>
-	'modelValue'?: T
-	'onUpdate:modelValue'?: (val: T) => void
-	'onSubmit'?: (formData: T) => any
-	'onDelete'?: (formData: T) => Promise<void>
-	'onDuplicate'?: (formData: T) => Promise<void>
-	'submitText'?: string
-	'cancelText'?: string
-	'deleteText'?: string
-	'duplicateText'?: string
-	'onError'?: (err: any) => void
-}