@bagelink/vue 0.0.988 → 0.0.996

package/src/components/formkit/FileUploader.vue

@@ -1,406 +0,0 @@
-<script setup lang="ts">
-interface UploadFile {
-	dataUrl: string
-	progress: number
-	uploading: boolean
-	file?: File
-	name: string
-	serverFile?: any
-	uploaded: boolean
-}
-
-import { Btn, Icon, useBagel } from '@bagelink/vue'
-
-import { onMounted, onUnmounted } from 'vue'
-
-const props = withDefaults(
-	defineProps<{
-		context: { [key: string]: any }
-		dragDropLabel?: string
-		browseLabel?: string
-		multiple?: boolean
-	}>(),
-	{
-		dragDropLabel: 'Drag and drop your files here',
-		browseLabel: 'or browse',
-		multiple: false,
-	},
-)
-
-const bagel = useBagel()
-
-let draggingOver = $ref(false)
-const dropCircle = $ref<HTMLElement>()
-const dropZoneEl = $ref<HTMLElement>()
-const fileInputEl = $ref<HTMLInputElement>()
-
-const files = $ref<UploadFile[]>([])
-
-const computedDragDropLabel = $computed(() => props.context.attrs?.dragDropLabel || props.dragDropLabel)
-const computedDrowseLabel = $computed(() => props.context.attrs?.browseLabel || props.browseLabel)
-const computedMultiple = $computed(() => !!(props.context.attrs?.multiple || props.multiple))
-
-const allowUpload = $computed(() => {
-	const tooManyFiles = !computedMultiple && files.length > 0
-	return !tooManyFiles
-})
-
-const openFileDialog = () => (allowUpload ? fileInputEl?.click() : '')
-
-function animateCircle(e: DragEvent) {
-	e.preventDefault()
-	const zoneRect = dropZoneEl?.getBoundingClientRect()
-	if (!zoneRect) return
-	draggingOver = true
-	const left = e.clientX - zoneRect.left
-	const top = e.clientY - zoneRect.top
-	dropCircle?.style.setProperty('left', `${left}px`)
-	dropCircle?.style.setProperty('top', `${top}px`)
-}
-
-function emitValue() {
-	// const fileValues = files.map((f) => f.serverFile?.id);
-	const relationshipObjKey = props.context.attrs?.relationshipObjKey
-	if (!computedMultiple) return props.context.node.input(relationshipObjKey ? files[0].serverFile.id : files[0].serverFile)
-
-	alert('not implemented')
-}
-
-function isImg(file: UploadFile) {
-	return file.file?.type.includes('image')
-		|| file.serverFile?.mimetype?.match(/image\/|jpg|png|gif|bmp|jpeg/i)
-		|| file.serverFile.extension?.match(/jpg|png|gif|bmp|jpeg/i)
-}
-
-function uploadFiles() {
-	files.forEach(async (file) => {
-		if (file.uploaded || file.uploading || !file.file) return
-		file.uploading = true
-		file.serverFile = await bagel.uploadFile(file.file, {
-			onUploadProgress: (e: any) => (file.progress = e.progress * 100 - 1),
-		})
-		file.progress += 1
-		emitValue()
-		file.uploaded = true
-		file.uploading = false
-	})
-}
-
-async function deleteImg(file: UploadFile) {
-	await bagel.delete(`files/${file.serverFile.id}`)
-	const index = files.indexOf(file)
-	files.splice(index, 1)
-	emitValue()
-}
-
-function readAsDataURL(file: File): Promise<any> {
-	return new Promise((resolve, reject) => {
-		const reader = new FileReader()
-		reader.onload = () => { resolve(reader.result) }
-		reader.onerror = reject
-		reader.readAsDataURL(file)
-	})
-}
-
-async function addFiles(addedFiles: FileList) {
-	if (!allowUpload) return
-	for (let i = 0; i < addedFiles.length; i++) {
-		const f = addedFiles[i]
-		const file: UploadFile = {
-			// eslint-disable-next-line no-await-in-loop
-			dataUrl: await readAsDataURL(f),
-			file: f,
-			name: f.name,
-			progress: 0,
-			uploading: false,
-			uploaded: false,
-		}
-		files.push(file)
-	}
-	uploadFiles()
-}
-
-onMounted(() => {
-	dropZoneEl?.addEventListener('dragover', animateCircle)
-	const relationshipObjKey = props.context.attrs?.relationshipObjKey
-	const imageObj = relationshipObjKey ? props.context.node?.parent?.value[relationshipObjKey] : props.context.node?.value
-	if (!computedMultiple && imageObj) {
-		files.push({
-			serverFile: imageObj,
-			uploaded: true,
-			uploading: false,
-			progress: 100,
-			dataUrl: imageObj?.url,
-			name: imageObj?.name,
-		})
-	}
-})
-onUnmounted(() => dropZoneEl?.removeEventListener('dragover', animateCircle))
-
-function handleFileInput(e: Event) {
-	const filesToAdd: FileList = (e.target as any).files
-	void addFiles(filesToAdd) // TODO: Nati: should be awaited?
-}
-
-function onDrop(e: DragEvent) {
-	draggingOver = false
-	e.preventDefault()
-	const filesToAdd = e.dataTransfer?.files
-	if (filesToAdd) void addFiles(filesToAdd) // TODO: Nati: should be awaited?
-}
-</script>
-
-<template>
-	<div class="files-wrapper flex">
-		<div
-			ref="dropZoneEl"
-			class="drop-zone flex-grow"
-			@click="openFileDialog"
-			@drop.prevent.stop="onDrop"
-			@dragleave="draggingOver = false"
-		>
-			<Transition name="pop">
-				<div
-					v-if="draggingOver"
-					ref="dropCircle"
-					class="drop-circle"
-				/>
-			</Transition>
-			<div
-				v-if="allowUpload"
-				class="img-label"
-			>
-				<p>
-					{{ computedDragDropLabel }} <span>{{ computedDrowseLabel }}</span>
-				</p>
-			</div>
-			<div class="uploading-wrap">
-				<div
-					v-for="(item, index) in files"
-					:key="index"
-					:class="{ uploading: item.uploading }"
-				>
-					<div class="load-file-bar">
-						<!-- Preview File if image -->
-						<img
-							v-if="isImg(item)"
-							width="40"
-							:src="item.dataUrl"
-							:alt="item.name"
-							style="margin-inline-end: 10px"
-						>
-						<p>
-							{{ item.name }}
-						</p>
-						<div class="flex">
-							<div
-								class="pie"
-								:style="`--p:${item.progress}`"
-								style="--b: 2px"
-								:class="{ complete: item.progress === 100 }"
-							>
-								<span
-									v-if="item.progress < 100"
-									class="progress"
-								>{{
-									`${item.progress.toFixed(0)}`
-								}}</span>
-								<Icon
-									class="success"
-									icon="check"
-								/>
-							</div>
-							<Btn
-								v-if="item.progress === 100"
-								thin
-								class="delete-btn"
-								icon="delete"
-								@click.stop="deleteImg(item)"
-							/>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<input
-			ref="fileInputEl"
-			class="file-input"
-			type="file"
-			:multiple="computedMultiple"
-			@change="handleFileInput"
-		>
-	</div>
-</template>
-
-<style>
-.uploading-wrap {
-	width: 100%;
-	padding-right: 5px;
-	padding-left: 5px;
-}
-
-/*
-.uploading {}
-*/
-
-.img-label .bgl_icon-font {
-	font-size: 30px;
-	margin-bottom: 10px;
-}
-
-.img-label span {
-	text-decoration: underline;
-}
-
-.file-input {
-	display: none;
-}
-
-.files-wrapper {
-	flex-direction: column;
-	border-radius: 10px;
-	/*overflow: hidden;*/
-	min-height: calc(var(--input-height) * 1.5);
-
-	font-size: var(--input-font-size);
-}
-
-.drop-zone {
-	background-color: var(--input-bg);
-	height: 100%;
-	width: 100%;
-	flex-grow: 1;
-	position: relative;
-	overflow: hidden;
-	cursor: pointer;
-	transition: var(--bgl-transition);
-	outline: dashed 1px var(--border-color);
-	border-radius: 10px;
-	padding: 1px;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	color: var(--input-color);
-}
-
-.drop-zone:hover {
-	color: var(--bgl-primary);
-	outline: dashed 1px var(--bgl-primary-tint);
-}
-
-.drop-circle {
-	pointer-events: none;
-	position: absolute;
-	width: 100px;
-	height: 100px;
-	border-radius: 50%;
-	background-color: var(--bgl-primary-tint);
-	display: flex;
-	transform: translate(-50%, -50%) scale(1);
-	transform-origin: left top;
-}
-
-.load-file-bar {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	background: var(--bgl-box-bg);
-	border-radius: var(--btn-border-radius);
-	width: 100%;
-	color: var(--input-color);
-	height: var(--btn-height);
-	padding: 0.5rem;
-	height: 46px;
-	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
-	white-space: nowrap;
-}
-
-.load-file-bar p {
-	width: calc(100% - 40px);
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.load-file-bar span {
-	font-size: 10px;
-}
-
-.pie {
-	width: 30px;
-	height: 30px;
-	position: relative;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.pie:before {
-	content: "";
-	position: absolute;
-	border-radius: 50%;
-	inset: 0;
-	transition: all 0.2s ease-in-out;
-	background: conic-gradient(var(--bgl-primary) calc(var(--p) * 1%), #0000 0);
-	-webkit-mask: radial-gradient(farthest-side,
-			#0000 calc(99% - var(--b)),
-			#000 calc(100% - var(--b)));
-	mask: radial-gradient(farthest-side,
-			#0000 calc(99% - var(--b)),
-			#000 calc(100% - var(--b)));
-}
-
-.pie .success {
-	transform: scale(0);
-	opacity: 0;
-	transition: all 0.3s ease-in-out;
-}
-
-.pie .progress {
-	position: absolute;
-	font-size: 10px;
-}
-
-.pie.complete .progress {
-	display: none;
-}
-
-.pie.complete .success {
-	transform: scale(1.3);
-	opacity: 1;
-}
-
-.pie.complete:before {
-	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
-}
-
-.pie.complete {
-	color: var(--bgl-green);
-}
-</style>
-
-<style>
-.pop-enter-active {
-	transition: scale 0.2s cubic-bezier(0.55, 0, 0.1, 1);
-}
-
-.pop-leave-active {
-	transition: scale 0.2s cubic-bezier(0.55, 0, 0.1, 1);
-}
-
-.pop-enter-from,
-.pop-leave-to {
-	scale: 0;
-}
-
-.delete-btn {
-	margin-inline-end: -30px;
-	opacity: 0;
-	margin-inline-start: 10px;
-}
-
-.uploading-wrap:hover .delete-btn {
-	opacity: 1;
-	margin-inline-end: 0;
-}
-</style>

package/src/components/formkit/MiscFields.vue

@@ -1,74 +0,0 @@
-<script lang="ts" setup>
-import { Btn } from '@bagelink/vue'
-
-const props = defineProps<{
-	context: { [key: string]: any }
-	addBtnLabel: string
-}>()
-
-const fields = $computed(() => props.context.node?.parent?.children || [])
-
-function addToField(field: any) {
-	field.input([{}])
-	console.log(fields)
-}
-</script>
-
-<template>
-	<div class="misc-wrap">
-		<Btn
-			v-for="(field, i) in fields.filter(
-				(field: any) => field.value?.length === 0,
-			)"
-			:key="i"
-			class="add-btn"
-			color="gray"
-			flat
-			thin
-			@click="addToField(field)"
-		>
-			{{ addBtnLabel }} {{ field.context?.label }}
-		</Btn>
-	</div>
-</template>
-
-<style scoped>
-.misc-wrap {
-	display: flex;
-	gap: 1rem;
-	border-top: 1px solid var(--border-color);
-	padding-top: 0.5rem;
-	margin-bottom: auto;
-}
-
-.gray.thin.bgl_flatBtn.bgl_btn.add-btn {
-	display: flex;
-	gap: 0.5rem;
-	align-items: center;
-	padding-left: 0;
-	padding-right: 0;
-	transition: var(--bgl-transition);
-}
-
-.add-btn:active {
-	background: none !important;
-}
-
-.add-btn::before {
-	content: "+";
-	font-size: 10px;
-	background: var(--bgl-gray-light);
-	border-radius: 100%;
-	height: 14px;
-	width: 14px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: var(--bgl-gray);
-}
-
-.add-btn:hover::before {
-	background: var(--bgl-primary);
-	color: var(--bgl-light-text);
-}
-</style>

package/src/components/formkit/Toggle.vue

@@ -1,149 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-	helpText?: string
-	id: string
-	label?: string
-}>()
-const inputVal = defineModel('modelValue', {
-	type: Boolean,
-	default: false,
-})
-</script>
-
-<template>
-	<div class="bagel-input checkbox" :title="label">
-		<label class="switch">
-			<input :id="id" v-model="inputVal" type="checkbox">
-			<span class="slider rounded" />
-		</label>
-	</div>
-</template>
-
-<style>
-.checkbox-label {
-	display: flex;
-	gap: 0.5rem;
-	flex-direction: row-reverse;
-	justify-content: flex-end;
-	align-items: center;
-	cursor: pointer;
-}
-</style>
-
-<style scoped>
-.no-edit {
-	pointer-events: none;
-}
-
-.radio-wrap p {
-	display: inline-block;
-	color: var(--input-bg);
-	font-size: var(--input-font-size);
-	margin-inline-end: 10px;
-}
-
-.radio-wrap label {
-	padding: 3px 5px;
-	display: inline-block;
-	border-radius: var(--input-border-radius);
-	font-size: var(--input-font-size);
-	background: var(--input-bg);
-	color: var(--bgl-text-color);
-	text-align: center;
-	margin: 8px 5px;
-	cursor: pointer;
-	user-select: none;
-}
-
-.bagel-input .radio-wrap label::after {
-	background: transparent;
-}
-
-.radio-wrap input {
-	display: none;
-}
-
-.radio-wrap input:checked:checked+label {
-	background: var(--bgl-primary);
-	color: var( --bgl-light-text);
-}
-
-.checkbox {
-	position: relative;
-}
-
-.switch {
-	position: relative;
-	display: inline-block;
-	height: calc(var(--input-height) / 2);
-	width: var(--input-height);
-	border-radius: var(--input-height);
-}
-
-.switch input {
-	opacity: 0;
-	width: 0;
-	height: 0;
-}
-
-.bagel-input.checkbox.check {
-	margin: 0;
-}
-
-.bagel-input.checkbox.check .switch {
-	width: calc(var(--input-height) / 2);
-	height: calc(var(--input-height) / 2);
-	transition: 0.2s;
-}
-
-.bagel-input.checkbox.check .slider:before {
-	position: absolute;
-	font-family: "Material Symbols Outlined", serif;
-	content: "";
-	color: var( --bgl-light-text);
-	background: transparent;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.bagel-input.checkbox.check input:checked+.slider:before {
-	transform: none;
-	content: "check";
-}
-
-.slider {
-	position: absolute;
-	cursor: pointer;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	background: var(--input-bg);
-	-webkit-transition: 0.4s;
-	transition: 0.4s;
-	border-radius: calc(var(--input-height) / 2);
-	box-shadow: inset 0 0 10px #00000020;
-}
-
-.slider:before {
-	position: absolute;
-	content: "";
-	height: calc(var(--input-height) / 2 - 4px);
-	width: calc(var(--input-height) / 2 - 4px);
-	left: 2px;
-	bottom: 2px;
-	border-radius: 50%;
-	background: var(--bgl-popup-bg);
-	-webkit-transition: 0.4s;
-	transition: 0.4s;
-}
-
-input:checked+.slider {
-	background: var(--bgl-primary);
-}
-
-input:checked+.slider:before {
-	transform: translateX(calc(var(--input-height) / 2));
-}
-</style>