@bagelink/vue 0.0.1016 → 0.0.1020

package/dist/style.css

@@ -605,8 +605,16 @@ data[data-v-6c27f163] {
 	transform: translateY(-2.6rem);
 }
 
-.itemBox[data-v-e8cf25b3]:hover {
-	outline: 1px solid var(--bgl-primary);
+.itemBox{
+	/* border-top: 2px solid var(--bgl-gray); */
+	/* border-bottom: 2px solid var(--bgl-gray); */
+	background: var(--input-bg);
+}
+.itemBox .bagel-input input,
+.itemBox .bagel-input textarea,
+.itemBox .bagel-input select,
+.itemBox .custom-select .input {
+	background: var(--bgl-white) !important;
 }
 
 .primary-checkbox input[data-v-73f1d9ad] {
@@ -1194,26 +1202,26 @@ pre code.hljs{
 line-height: 1.65;
 }
 
-.rich-text-editor[data-v-7a98aefd] {
+.rich-text-editor[data-v-8d91c8f8] {
 	background: var(--input-bg);
 	border: 1px solid var(--border-color);
 	transition: all 0.3s ease;
 }
-.editor-container[data-v-7a98aefd] {
+.editor-container[data-v-8d91c8f8] {
 	display: flex;
 	gap: 1rem;
 }
-.content-area[data-v-7a98aefd],
-.preview-area[data-v-7a98aefd] {
+.content-area[data-v-8d91c8f8],
+.preview-area[data-v-8d91c8f8] {
 	flex: 1;
 	min-height: 200px;
 	background: var(--bgl-richtext-color);
 }
-.split-view[data-v-7a98aefd] {
+.split-view[data-v-8d91c8f8] {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
 }
-.editableContent[data-v-7a98aefd] {
+.editableContent[data-v-8d91c8f8] {
 	width: 100%;
 	min-height: 240px;
 	height: 100%;
@@ -1221,7 +1229,7 @@ line-height: 1.65;
 	outline: none;
 	background: transparent;
 }
-.html-editor[data-v-7a98aefd] {
+.html-editor[data-v-8d91c8f8] {
 	width: 100%;
 	height: 100%;
 	min-height: 200px;
@@ -1232,12 +1240,12 @@ line-height: 1.65;
 	color: white;
 	background-color: var(--bgl-black);
 }
-.preview-area[data-v-7a98aefd] {
+.preview-area[data-v-8d91c8f8] {
 	font-family: monospace;
 	white-space: pre-wrap;
 	overflow-x: auto;
 }
-.fullscreen-mode[data-v-7a98aefd] {
+.fullscreen-mode[data-v-8d91c8f8] {
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -1246,15 +1254,15 @@ line-height: 1.65;
 	z-index: 9999;
 	padding: 2rem;
 }
-.fullscreen-mode .editor-container[data-v-7a98aefd] {
+.fullscreen-mode .editor-container[data-v-8d91c8f8] {
 	height: calc(100vh - 4rem);
 }
-.fullscreen-mode .content-area[data-v-7a98aefd],
-.fullscreen-mode .preview-area[data-v-7a98aefd] {
+.fullscreen-mode .content-area[data-v-8d91c8f8],
+.fullscreen-mode .preview-area[data-v-8d91c8f8] {
 	height: 100%;
 	overflow-y: auto;
 }
-.fullscreen-mode .code-editor[data-v-7a98aefd]{
+.fullscreen-mode .code-editor[data-v-8d91c8f8]{
 	height: 100% !important;
 }
 .resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.1016",
+  "version": "0.0.1020",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/form/BglField.vue

@@ -11,6 +11,7 @@ import {
 	ToggleInput,
 	bindAttrs,
 	classify,
+	BagelForm
 } from '@bagelink/vue'
 import TabsNav from '../layout/TabsNav.vue'
 
@@ -42,6 +43,7 @@ const is = $computed(() => {
 	if (props.field.$el === 'file') return FileUpload
 	if (props.field.$el === 'date') return DateInput
 	if (props.field.$el === 'tabs') return TabsNav
+	if (props.field.$el === 'form') return BagelForm
 	return props.field.$el ?? 'div'
 })
 
@@ -68,6 +70,8 @@ function setFieldData(key: string, val: any) {
 	return data
 }
 
+const isForm = $computed(() => props.field.$el === 'form' || props.field.$el === BagelForm)
+
 function getFieldData(obj: any, key: string) {
 	if (typeof obj !== 'object' || obj === null) return obj
 	const keys = key.split(objPathRegex)
@@ -84,12 +88,17 @@ function getFieldData(obj: any, key: string) {
 
 const fieldData = $computed({
 	set: (val: any) => {
+		if (isForm) {
+			emit('update:modelValue', val)
+			return
+		}
 		if (!props.field.id) return
 		const data = setFieldData(props.field.id, val)
 		emit('update:modelValue', data)
 	},
 	get: () => {
 		if (props.field.id) return getFieldData(props.modelValue, props.field.id)
+		if (isForm) return props.modelValue
 		return props.field.defaultValue ?? ''
 	},
 })

package/src/components/form/FieldArray.vue

@@ -54,21 +54,21 @@ function addItem() {
 	emitValue()
 }
 
-const computedField = $computed(
-	() => ({
-		label: props.label,
-		placeholder: props.placeholder,
-		children: props.children,
-		class: props.class,
-		attrs: props.attrs,
-		required: props.required,
-		disabled: props.disabled,
-		helptext: props.helptext,
-		options: props.options,
-		defaultValue: props.defaultValue,
-		$el: props.el,
-	}) as Field<T>
-) as Field<Record<string, any>>
+// const computedField = $computed(
+// 	() => ({
+// 		label: props.label,
+// 		placeholder: props.placeholder,
+// 		children: props.children,
+// 		class: props.class,
+// 		attrs: props.attrs,
+// 		required: props.required,
+// 		disabled: props.disabled,
+// 		helptext: props.helptext,
+// 		options: props.options,
+// 		defaultValue: props.defaultValue,
+// 		$el: props.el,
+// 	}) as Field<T>
+// ) as Field<Record<string, any>>
 </script>
 
 <template>
@@ -76,8 +76,8 @@ const computedField = $computed(
 		<p class="label mb-05">
 			{{ label }}
 		</p>
-		<div>
-			<Card v-for="(_, i) in data" :key="i" outline thin class="mb-05 itemBox bg-white transition">
+		<div class="ps-05 border-start">
+			<div v-for="(_, i) in data" :key="i" outline thin class="mb-05 itemBox transition p-05">
 				<BglForm v-if="schema" v-model="data[i]" :schema="schema" @update:model-value="emitValue" />
 				<Btn
 					v-if="props.delete"
@@ -88,16 +88,25 @@ const computedField = $computed(
 					flat
 					@click="deleteItem(i)"
 				/>
-			</Card>
-			<Btn v-if="add" icon="add" color="gray" class="w-100" @click="addItem">
+			</div>
+			<Btn v-if="add" thin icon="add" color="gray" class="txt12" @click="addItem">
 				<p>Add {{ label }}</p>
 			</Btn>
 		</div>
 	</div>
 </template>
 
-<style scoped>
-.itemBox:hover {
-	outline: 1px solid var(--bgl-primary);
+<style>
+.itemBox{
+	/* border-top: 2px solid var(--bgl-gray); */
+	/* border-bottom: 2px solid var(--bgl-gray); */
+	background: var(--input-bg);
+}
+
+.itemBox .bagel-input input,
+.itemBox .bagel-input textarea,
+.itemBox .bagel-input select,
+.itemBox .custom-select .input {
+	background: var(--bgl-white) !important;
 }
 </style>

package/src/components/form/inputs/RichText/index.vue

@@ -50,7 +50,7 @@ watch(() => editor.state.content, (newValue) => {
 </script>
 
 <template>
-	<div class="rich-text-editor rounded pt-05 px-05 pb-075" :class="{ 'fullscreen-mode': editor.state.isFullscreen }">
+	<div class="rich-text-editor rounded pt-05 px-05 pb-075 mb-05" :class="{ 'fullscreen-mode': editor.state.isFullscreen }">
 		<Toolbar
 			v-if="editor.state.hasInit" :config="toolbarConfig" :selectedStyles="editor.state.selectedStyles"
 			@action="editor.handleToolbarAction"
@@ -148,4 +148,4 @@ line-height: 1.65;
 .fullscreen-mode .code-editor{
 	height: 100% !important;
 }
-</style
+</style>

package/src/components/layout/TabsBody.vue

@@ -9,7 +9,7 @@ const { currentTab } = useTabs(props.group)
 </script>
 
 <template>
-	<div v-if="currentTab">
+	<template v-if="currentTab">
 		<slot :name="currentTab" />
-	</div>
+	</template>
 </template>

package/src/components/lightbox/index.ts

@@ -11,7 +11,6 @@ let clickHandler: ((e: MouseEvent) => any) = (_e: MouseEvent) => void 0
 
 const lightboxDirective: Directive = {
 	mounted(el: HTMLElement, binding) {
-		el.classList.add('hover')
 		const item = bindingToItem(binding, el)
 		groupHandler(item)
 		clickHandler = (e: MouseEvent) => { openClickHandler(e, el, binding) }