@bagelink/vue 0.0.1006 → 0.0.1010

package/dist/utils/timeAgo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timeAgo.d.ts","sourceRoot":"","sources":["../../src/utils/timeAgo.ts"],"names":[],"mappings":"AAAA,KAAK,sBAAsB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAmDvD,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,GAAE,sBAA6B,UA8B/E"}
+{"version":3,"file":"timeAgo.d.ts","sourceRoot":"","sources":["../../src/utils/timeAgo.ts"],"names":[],"mappings":"AAAA,KAAK,sBAAsB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAsDvD,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,GAAE,sBAA6B,UAmC/E"}

package/package.json

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

package/src/components/Btn.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { MaterialIcons, ThemeType } from '@bagelink/vue'
 import { MaterialIcon, Loading } from '@bagelink/vue'
-import { useSlots } from 'vue'
+import { useSlots, type SetupContext } from 'vue'
 import { RouterLink } from 'vue-router'
 
 const props = withDefaults(
@@ -54,7 +54,7 @@ const bind = $computed(() => {
 	}
 	return obj
 })
-const slots = useSlots()
+const slots: SetupContext["slots"] = useSlots()
 </script>
 
 <template>

package/src/components/Modal.vue

@@ -80,8 +80,8 @@ onUnmounted(() => {
 					:style="{ float: side ? 'left' : 'right' }"
 					flat
 					icon="close"
-					@click="closeModal"
 					thin
+					@click="closeModal"
 				/>
 				<Title v-if="title" class="modal-title" tag="h3" :label="title" />
 			</header>
@@ -113,6 +113,8 @@ onUnmounted(() => {
 <style>
 .modal{
 	color: var(--bgl-popup-text);
+	/* display: flex;
+	flex-direction: column; */
 }
 .modal-title {
 	text-align: center;

package/src/components/ModalForm.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import {
 	BagelForm,
-	type BglFormSchemaT,
+	type BglFormSchemaFnT,
 	Btn,
 	type BtnOptions,
 	Modal,
@@ -14,7 +14,7 @@ const props = defineProps<{
 	width?: string
 	dismissable?: boolean
 	actions?: BtnOptions[]
-	schema: BglFormSchemaT | (() => BglFormSchemaT)
+	schema: BglFormSchemaFnT<any>
 
 	onSubmit?: (formData: any) => Promise<void>
 

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

package/src/components/layout/SidebarMenu.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { NavLink } from '@bagelink/vue'
-import { Btn, Card, Icon } from '@bagelink/vue'
+import { Btn, Card, Icon, useDebounceFn } from '@bagelink/vue'
 import { useSlots } from 'vue'
 
 const props = defineProps<{
@@ -14,11 +14,10 @@ const emit = defineEmits(['update:open'])
 const slots = useSlots()
 
 let isOpen = $ref(props.open)
-
-function toggleMenu() {
+const toggleMenu = useDebounceFn(() => {
 	isOpen = !isOpen
 	emit('update:open', isOpen)
-}
+})
 </script>
 
 <template>

package/src/components/layout/Tabs.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { VNode } from 'vue'
+import type { SetupContext, VNode } from 'vue'
 import { type Tab, TabsNav } from '@bagelink/vue'
 import { defineComponent, h, useSlots } from 'vue'
 
@@ -12,7 +12,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits(['update:modelValue'])
-const slots = useSlots()
+const slots: SetupContext["slots"] = useSlots()
 const group = Math.random().toString(36).slice(7)
 const { currentTab } = useTabs(group)
 

package/src/components/layout/TabsNav.vue

@@ -34,7 +34,9 @@ function updateIndicator() {
 	if (activeTab && tabsWrap.value) {
 		const { offsetLeft, offsetWidth } = activeTab
 		tabsWrap.value.style.setProperty('--indicator-left', `${offsetLeft}px`)
-		tabsWrap.value.style.setProperty('--indicator-width', `${offsetWidth}px`)
+		if (tabsWrap.value) {
+			tabsWrap.value.style.setProperty('--indicator-width', `${offsetWidth}px`)
+		}
 	}
 }
 
@@ -75,7 +77,7 @@ onBeforeUnmount(() => {
 
 <template>
 	<div
-		ref="tabsWrap" class="grid auto-flow-columns relative fit-content bgl_tabs_wrap"
+		ref="tabsWrap" class="grid auto-flow-columns relative fit-content bgl_tabs_wrap overflow-hidden"
 		:class="{ 'bgl_flat-tabs': flat, 'bgl_vertical-tabs': vertical }"
 	>
 		<button

package/src/styles/layout.css

@@ -941,101 +941,451 @@
     max-width: 100px;
 }
 
+.w110,
+.w110px {
+    max-width: 110px;
+}
+
+.w120,
+.w120px {
+    max-width: 120px;
+}
+
+.w130,
+.w130px {
+    max-width: 130px;
+}
+
+.w140,
+.w140px {
+    max-width: 140px;
+}
+
 .w150,
 .w150px {
     max-width: 150px;
 }
 
+.w160,
+.w160px {
+    max-width: 160px;
+}
+
+.w170,
+.w170px {
+    max-width: 170px;
+}
+
+.w180,
+.w180px {
+    max-width: 180px;
+}
+
+.w190,
+.w190px {
+    max-width: 190px;
+}
+
 .w200,
 .w200px {
     max-width: 200px;
 }
 
+.w210,
+.w210px {
+    max-width: 210px;
+}
+
+.w220,
+.w220px {
+    max-width: 220px;
+}
+
+.w230,
+.w230px {
+    max-width: 230px;
+}
+
+.w240,
+.w240px {
+    max-width: 240px;
+}
+
 .w250,
 .w250px {
     max-width: 250px;
 }
 
+.w260,
+.w260px {
+    max-width: 260px;
+}
+
+.w270,
+.w270px {
+    max-width: 270px;
+}
+
+.w280,
+.w280px {
+    max-width: 280px;
+}
+
+.w290,
+.w290px {
+    max-width: 290px;
+}
+
 .w300,
 .w300px {
     max-width: 300px;
 }
 
+.w310,
+.w310px {
+    max-width: 310px;
+}
+
+.w320,
+.w320px {
+    max-width: 320px;
+}
+
+.w330,
+.w330px {
+    max-width: 330px;
+}
+
+.w340,
+.w340px {
+    max-width: 340px;
+}
+
 .w350,
 .w350px {
     max-width: 350px;
 }
 
+.w360,
+.w360px {
+    max-width: 360px;
+}
+
+.w370,
+.w370px {
+    max-width: 370px;
+}
+
+.w380,
+.w380px {
+    max-width: 380px;
+}
+
+.w390,
+.w390px {
+    max-width: 390px;
+}
+
 .w400,
 .w400px {
     max-width: 400px;
 }
 
+.w410,
+.w410px {
+    max-width: 410px;
+}
+
+.w420,
+.w420px {
+    max-width: 420px;
+}
+
+.w430,
+.w430px {
+    max-width: 430px;
+}
+
+.w440,
+.w440px {
+    max-width: 440px;
+}
+
 .w450,
 .w450px {
     max-width: 450px;
 }
 
+.w460,
+.w460px {
+    max-width: 460px;
+}
+
+.w470,
+.w470px {
+    max-width: 470px;
+}
+
+.w480,
+.w480px {
+    max-width: 480px;
+}
+
+.w490,
+.w490px {
+    max-width: 490px;
+}
+
 .w500,
 .w500px {
     max-width: 500px;
 }
 
+.w510,
+.w510px {
+    max-width: 510px;
+}
+
+.w520,
+.w520px {
+    max-width: 520px;
+}
+
+.w530,
+.w530px {
+    max-width: 530px;
+}
+
+.w540,
+.w540px {
+    max-width: 540px;
+}
+
 .w550,
 .w550px {
     max-width: 550px;
 }
 
+.w560,
+.w560px {
+    max-width: 560px;
+}
+
+.w570,
+.w570px {
+    max-width: 570px;
+}
+
+.w580,
+.w580px {
+    max-width: 580px;
+}
+
+.w590,
+.w590px {
+    max-width: 590px;
+}
+
 .w600,
 .w600px {
     max-width: 600px;
 }
 
+.w610,
+.w610px {
+    max-width: 610px;
+}
+
+.w620,
+.w620px {
+    max-width: 620px;
+}
+
+.w630,
+.w630px {
+    max-width: 630px;
+}
+
+.w640,
+.w640px {
+    max-width: 640px;
+}
+
 .w650,
 .w650px {
     max-width: 650px;
 }
 
+.w660,
+.w660px {
+    max-width: 660px;
+}
+
+.w670,
+.w670px {
+    max-width: 670px;
+}
+
+.w680,
+.w680px {
+    max-width: 680px;
+}
+
+.w690,
+.w690px {
+    max-width: 690px;
+}
+
 .w700,
 .w700px {
     max-width: 700px;
 }
 
+.w710,
+.w710px {
+    max-width: 710px;
+}
+
+.w720,
+.w720px {
+    max-width: 720px;
+}
+
+.w730,
+.w730px {
+    max-width: 730px;
+}
+
+.w740,
+.w740px {
+    max-width: 740px;
+}
+
 .w750,
 .w750px {
     max-width: 750px;
 }
 
+.w760,
+.w760px {
+    max-width: 760px;
+}
+
 .w770,
 .w770px {
     max-width: 770px;
 }
 
+.w780,
+.w780px {
+    max-width: 780px;
+}
+
+.w790,
+.w790px {
+    max-width: 790px;
+}
+
 .w800,
 .w800px {
     max-width: 800px;
 }
 
+.w810,
+.w810px {
+    max-width: 810px;
+}
+
+.w820,
+.w820px {
+    max-width: 820px;
+}
+
+.w830,
+.w830px {
+    max-width: 830px;
+}
+
+.w840,
+.w840px {
+    max-width: 840px;
+}
+
 .w850,
 .w850px {
     max-width: 850px;
 }
 
+.w860,
+.w860px {
+    max-width: 860px;
+}
+
+.w870,
+.w870px {
+    max-width: 870px;
+}
+
+.w880,
+.w880px {
+    max-width: 880px;
+}
+
+.w890,
+.w890px {
+    max-width: 890px;
+}
+
 .w900,
 .w900px {
     max-width: 900px;
 }
 
+.w910,
+.w910px {
+    max-width: 910px;
+}
+
+.w920,
+.w920px {
+    max-width: 920px;
+}
+
+.w930,
+.w930px {
+    max-width: 930px;
+}
+
+.w940,
+.w940px {
+    max-width: 940px;
+}
+
 .w950,
 .w950px {
     max-width: 950px;
 }
 
+.w960,
+.w960px {
+    max-width: 960px;
+}
+
 .w970,
 .w970px {
     max-width: 970px;
 }
 
+.w980,
+.w980px {
+    max-width: 980px;
+}
+
+.w990,
+.w990px {
+    max-width: 990px;
+}
+
 .w1000,
 .w1000px {
     max-width: 1000px;