@bagelink/vue 0.0.1008 → 0.0.1014

package/dist/style.css

@@ -1,14 +1,14 @@
 @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap');
-.accordion-item[data-v-3a286d21] {
+.accordion-item[data-v-1e73ca3e] {
 	border-bottom: 1px solid var(--border-color);
 	transition: all 0.2s;
 	cursor: pointer;
 	overflow: hidden;
 }
-.accordion-item button[data-v-3a286d21] {
+.accordion-item button[data-v-1e73ca3e] {
 	cursor: pointer;
 }
-.accordion-head[data-v-3a286d21] {
+.accordion-head[data-v-1e73ca3e] {
 	height: var(--input-height);
 	background: transparent;
 	display: flex;
@@ -18,7 +18,7 @@
 	border: none;
 	color: inherit !important;
 }
-.accordion-icon[data-v-3a286d21] {
+.accordion-icon[data-v-1e73ca3e] {
 	transition: all 0.2s ease;
 	display: flex;
 	align-items: center;
@@ -28,16 +28,16 @@
 	padding-inline: calc(var(--btn-padding) / 3);
 	justify-content: center;
 }
-[aria-expanded="true"] .accordion-icon[data-v-3a286d21]  {
+[aria-expanded="true"] .accordion-icon[data-v-1e73ca3e]  {
     transform: rotate(180deg);
 }
-.accordion-label[data-v-3a286d21] {
+.accordion-label[data-v-1e73ca3e] {
 	font-weight: bold;
 }
-.flat.accordion-item[data-v-3a286d21] {
+.flat.accordion-item[data-v-1e73ca3e] {
 	border-bottom: none
 }
-.accordion-head:hover .accordion-label[data-v-3a286d21] {
+.accordion-head:hover .accordion-label[data-v-1e73ca3e] {
 	text-decoration: underline;
 }
 
@@ -605,6 +605,10 @@ data[data-v-6c27f163] {
 	transform: translateY(-2.6rem);
 }
 
+.itemBox[data-v-e8cf25b3]:hover {
+	outline: 1px solid var(--bgl-primary);
+}
+
 .primary-checkbox input[data-v-73f1d9ad] {
   appearance: none;
   accent-color: var(--bgl-accent-color);
@@ -1184,26 +1188,32 @@ pre code.hljs{
 	color: white;
 }
 
-.rich-text-editor[data-v-e274dd3b] {
+.content-area p,
+.content-area span,
+.content-area li{
+line-height: 1.65;
+}
+
+.rich-text-editor[data-v-7a98aefd] {
 	background: var(--input-bg);
 	border: 1px solid var(--border-color);
 	transition: all 0.3s ease;
 }
-.editor-container[data-v-e274dd3b] {
+.editor-container[data-v-7a98aefd] {
 	display: flex;
 	gap: 1rem;
 }
-.content-area[data-v-e274dd3b],
-.preview-area[data-v-e274dd3b] {
+.content-area[data-v-7a98aefd],
+.preview-area[data-v-7a98aefd] {
 	flex: 1;
 	min-height: 200px;
 	background: var(--bgl-richtext-color);
 }
-.split-view[data-v-e274dd3b] {
+.split-view[data-v-7a98aefd] {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
 }
-.editableContent[data-v-e274dd3b] {
+.editableContent[data-v-7a98aefd] {
 	width: 100%;
 	min-height: 240px;
 	height: 100%;
@@ -1211,7 +1221,7 @@ pre code.hljs{
 	outline: none;
 	background: transparent;
 }
-.html-editor[data-v-e274dd3b] {
+.html-editor[data-v-7a98aefd] {
 	width: 100%;
 	height: 100%;
 	min-height: 200px;
@@ -1222,12 +1232,12 @@ pre code.hljs{
 	color: white;
 	background-color: var(--bgl-black);
 }
-.preview-area[data-v-e274dd3b] {
+.preview-area[data-v-7a98aefd] {
 	font-family: monospace;
 	white-space: pre-wrap;
 	overflow-x: auto;
 }
-.fullscreen-mode[data-v-e274dd3b] {
+.fullscreen-mode[data-v-7a98aefd] {
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -1236,15 +1246,15 @@ pre code.hljs{
 	z-index: 9999;
 	padding: 2rem;
 }
-.fullscreen-mode .editor-container[data-v-e274dd3b] {
+.fullscreen-mode .editor-container[data-v-7a98aefd] {
 	height: calc(100vh - 4rem);
 }
-.fullscreen-mode .content-area[data-v-e274dd3b],
-.fullscreen-mode .preview-area[data-v-e274dd3b] {
+.fullscreen-mode .content-area[data-v-7a98aefd],
+.fullscreen-mode .preview-area[data-v-7a98aefd] {
 	height: 100%;
 	overflow-y: auto;
 }
-.fullscreen-mode .code-editor[data-v-e274dd3b]{
+.fullscreen-mode .code-editor[data-v-7a98aefd]{
 	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.1008",
+  "version": "0.0.1014",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/AccordionItem.vue

@@ -14,7 +14,7 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:open'])
 
-let openVal = $ref(false)
+let openVal = $ref(!!props.open)
 
 let isOpen = $computed({
 	get: () => openVal,
@@ -28,7 +28,7 @@ interface AccordionState {
 	openItem?: string
 }
 
-const accordionState = inject<AccordionState>('accordionState', { openItem: undefined })
+const accordionState = inject<AccordionState>('accordionState')
 const id = props.id || Math.random().toString(36).slice(7)
 
 const computedIcon = computed(() => {
@@ -38,7 +38,7 @@ const computedIcon = computed(() => {
 })
 const iconPosition = computed(() => props.iconPosition || 'end')
 
-watch(() => props.open, val => isOpen = !!val, { immediate: true })
+watch(() => props.open, () => isOpen = props.open, { immediate: true })
 
 if (accordionState) {
 	watch(

package/src/components/form/BglField.vue

@@ -2,6 +2,7 @@
 import {
 	CheckInput,
 	DateInput,
+	FieldArray,
 	type Field,
 	FileUpload,
 	RichText,
@@ -33,6 +34,7 @@ const is = $computed(() => {
 		customAttrs.multiline = true
 		return TextInput
 	}
+	if (props.field.$el === 'array') return FieldArray
 	if (props.field.$el === 'select') return SelectInput
 	if (props.field.$el === 'toggle') return ToggleInput
 	if (props.field.$el === 'check') return CheckInput

package/src/components/form/FieldArray.vue

@@ -0,0 +1,103 @@
+<script lang="ts" setup generic="T extends Record<string, any>">
+import type {
+	AttributeFn,
+	AttributeValue,
+	Attributes,
+	BagelFieldOptions,
+	BglFormSchemaFnT,
+	Field,
+} from '@bagelink/vue'
+import { BglForm, Btn } from '@bagelink/vue'
+import Card from '../Card.vue'
+
+const props = withDefaults(
+	defineProps<{
+		el?: any
+		id: string
+		label?: string
+		placeholder?: string
+		children?: Field<T>[]
+		class?: AttributeValue | AttributeFn<T>
+		attrs?: Attributes<T>
+		required?: boolean
+		disabled?: boolean
+		helptext?: string
+		options?: BagelFieldOptions<T>
+		defaultValue?: any
+		add?: boolean
+		delete?: boolean
+		schema: BglFormSchemaFnT
+		modelValue: T[]
+	}>(),
+	{
+		delete: true,
+		add: true,
+		el: 'div',
+	}
+)
+
+const emit = defineEmits(['update:modelValue'])
+
+const data = $ref<T[]>(props.modelValue || [])
+
+function emitValue() {
+	emit('update:modelValue', data)
+}
+
+function deleteItem(i: number) {
+	data.splice(i, 1)
+	emitValue()
+}
+
+function addItem() {
+	data.push({} as any)
+	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>>
+</script>
+
+<template>
+	<div>
+		<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">
+				<BglForm v-if="schema" v-model="data[i]" :schema="schema" @update:model-value="emitValue" />
+				<Btn
+					v-if="props.delete"
+					icon="delete"
+					value="Delete"
+					class="txt10 opacity-7 color-red"
+					thin
+					flat
+					@click="deleteItem(i)"
+				/>
+			</Card>
+			<Btn v-if="add" icon="add" color="gray" class="w-100" @click="addItem">
+				<p>Add {{ label }}</p>
+			</Btn>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.itemBox:hover {
+	outline: 1px solid var(--bgl-primary);
+}
+</style>

package/src/components/form/index.ts

@@ -2,4 +2,5 @@ export { default as BglField } from './BglField.vue'
 export { default as BglForm } from './BglForm.vue'
 export { default as BagelForm } from './BglForm.vue'
 export { default as BglMultiStepForm } from './BglMultiStepForm.vue'
+export { default as FieldArray } from './FieldArray.vue'
 export * from './inputs'

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

@@ -67,6 +67,14 @@ watch(() => editor.state.content, (newValue) => {
 	</div>
 </template>
 
+<style>
+.content-area p,
+.content-area span,
+.content-area li{
+line-height: 1.65;
+}
+</style>
+
 <style scoped>
 .rich-text-editor {
 	background: var(--input-bg);
@@ -140,4 +148,4 @@ watch(() => editor.state.content, (newValue) => {
 .fullscreen-mode .code-editor{
 	height: 100% !important;
 }
-</style>
+</style