@bagelink/vue 0.0.1220 → 0.0.1227

package/src/styles/theme.css

@@ -2,370 +2,381 @@
 
 /* TEHEME */
 :root {
-	--bgl-primary: var(--bgl-blue);
-	--bgl-primary-tint: #2e5bff80;
-	--bgl-primary-light: #eef6ff;
-	--bgl-black: #282929;
-	--bgl-black-tint: #28292980;
-	--bgl-white: #fff;
-	--bgl-gray: #b7b7b7;
-	--bgl-gray-light: #f5f8fa;
-	--bgl-gray-80: #e8ecef;
-	--bgl-gray-20: rgba(183, 183, 183, 0.2);
-	--bgl-gray-40: rgba(183, 183, 183, 0.4);
-	--bgl-accent-color: var(--bgl-primary);
-	--bgl-bg: #f4f6fa;
-	--bgl-shadow: #00000031;
-	--border-color: #00000020;
-	--placeholder-color: #00000040;
-	--label-color: #00000080;
-	--input-bg: #f5f8fa;
-	--input-color: #000000;
-	--bgl-box-bg: var(--bgl-white);
-	--bgl-popup-bg: var(--bgl-white);
-	--bgl-popup-text: var(--bgl-black);
-	--bgl-text-color: var(--bgl-black);
-	--bgl-light-text: var(--bgl-white);
-	--bgl-richtext-color: var(--bgl-white);
-	--bgl-code-bg: var(--bgl-black);
-	--bgl-code-color: var(--bgl-white);
-	--bgl-dark-bg: rgba(0, 0, 0, 0.7);
-	--bgl-selection-bg: var(--bgl-blue-dark);
-	--bgl-selection-color: var(--bgl-white);
-	--bgl-scrollbar-thumb: var(--bgl-gray);
-	--pill-btn-color: var(--bgl-white);
-	--pill-btn-bg: var(--placeholder-color);
-	--bgl-selected: var(--bgl-gray-light);
-	--skeleton-bg: #f0f0f0;
-	--skeleton-pulse: var(--bgl-bg);
-	--bgl-range-thumb-color: var(--bgl-white);
+    --bgl-primary: var(--bgl-blue);
+    --bgl-primary-tint: #2e5bff80;
+    --bgl-primary-light: #eef6ff;
+    --bgl-black: #282929;
+    --bgl-black-tint: #28292980;
+    --bgl-white: #fff;
+    --bgl-gray: #b7b7b7;
+    --bgl-gray-light: #f5f8fa;
+    --bgl-gray-80: #e8ecef;
+    --bgl-gray-20: rgba(183, 183, 183, 0.2);
+    --bgl-gray-40: rgba(183, 183, 183, 0.4);
+    --bgl-accent-color: var(--bgl-primary);
+    --bgl-bg: #f4f6fa;
+    --bgl-shadow: #00000031;
+    --border-color: #00000020;
+    --placeholder-color: #00000040;
+    --label-color: #00000080;
+    --input-bg: #f5f8fa;
+    --input-color: #000000;
+    --bgl-box-bg: var(--bgl-white);
+    --bgl-popup-bg: var(--bgl-white);
+    --bgl-popup-text: var(--bgl-black);
+    --bgl-text-color: var(--bgl-black);
+    --bgl-light-text: var(--bgl-white);
+    --bgl-richtext-color: var(--bgl-white);
+    --bgl-code-bg: var(--bgl-black);
+    --bgl-code-color: var(--bgl-white);
+    --bgl-dark-bg: rgba(0, 0, 0, 0.7);
+    --bgl-selection-bg: var(--bgl-blue-dark);
+    --bgl-selection-color: var(--bgl-white);
+    --bgl-scrollbar-thumb: var(--bgl-gray);
+    --pill-btn-color: var(--bgl-white);
+    --pill-btn-bg: var(--placeholder-color);
+    --bgl-selected: var(--bgl-gray-light);
+    --skeleton-bg: #f0f0f0;
+    --skeleton-pulse: var(--bgl-bg);
+    --bgl-range-thumb-color: var(--bgl-white);
 }
 
 /* TYPE */
 :root {
-	--bgl-font: 'Lexend', 'Ploni', sans-serif;
-	--input-font-size: 16px;
+    --bgl-font: 'Lexend', 'Ploni', sans-serif;
+    --input-font-size: 16px;
 }
 
 /* DIMENSIONS */
 :root {
-	--bgl-font-size: 16px;
-	--input-height: 40px;
-	--label-font-size: 12px;
-	--input-border-radius: 7px;
-	--card-border-radius: 12px;
-	--btn-border-radius: 10px;
-	--btn-padding: 30px;
-	--btn-height: 40px;
-	--pill-border-radius: 8px;
-	--pill-height: 30px;
-	--skeleton-radius: 0.25rem;
-	--skeleton-margin: 1rem;
-	--bgl-range-thumb-size: 20px;
-	--bgl-range-track-height: 8px;
+    --bgl-font-size: 16px;
+    --input-height: 40px;
+    --label-font-size: 12px;
+    --input-border-radius: 7px;
+    --card-border-radius: 12px;
+    --btn-border-radius: 10px;
+    --btn-padding: 30px;
+    --btn-height: 40px;
+    --pill-border-radius: 8px;
+    --pill-height: 30px;
+    --skeleton-radius: 0.25rem;
+    --skeleton-margin: 1rem;
+    --bgl-range-thumb-size: 20px;
+    --bgl-range-track-height: 8px;
 }
 
 /* MISC */
 :root {
-	--bgl-transition: all 200ms ease;
-	--bgl-transition-400: all 400ms ease;
-	--bgl-hover-filter: brightness(90%);
-	--bgl-active-filter: brightness(70%);
+    --bgl-transition: all 200ms ease;
+    --bgl-transition-400: all 400ms ease;
+    --bgl-hover-filter: brightness(90%);
+    --bgl-active-filter: brightness(70%);
 }
 
 /* OTHER COLORS */
 :root {
-	--bgl-blue: #2e5bff;
-	--bgl-blue-20: rgba(46, 91, 255, 20%);
-	--bgl-blue-dark: #191c30;
-	--bgl-blue-light: #eef6ff;
-	--bgl-pink: #f1416c;
-	--bgl-red: #ed6c6f;
-	--bgl-red-tint: #fbe2e2;
-	--bgl-yellow: #ffbb00;
-	--bgl-yellow-light: #fff6d5;
-	--bgl-green: #75c98f;
-	--whatsapp-gray: #89959f;
-	--whatsapp-green: #e0fcd6;
-	--whatsapp-blue: #71bce6;
+    --bgl-blue: #2e5bff;
+    --bgl-blue-20: rgba(46, 91, 255, 20%);
+    --bgl-blue-dark: #191c30;
+    --bgl-blue-light: #eef6ff;
+    --bgl-pink: #f1416c;
+    --bgl-pink-light: #fde8f0;
+    --bgl-red: #ed6c6f;
+    --bgl-red-tint: #fbe2e2;
+    --bgl-red-light: #fde8e8;
+    --bgl-yellow: #ffbb00;
+    --bgl-yellow-light: #fff6d5;
+    --bgl-green: #75c98f;
+    --bgl-green-light: #e8f7f0;
+    --bgl-purple: #8a4baf;
+    --bgl-purple-light: #f0e8f7;
+    --bgl-brown: #a67c52;
+    --bgl-brown-light: #f9f4f0;
+    --bgl-orange: #ff8c00;
+    --bgl-orange-light: #ffebd9;
+    --bgl-turquoise: #00d8c0;
+    --bgl-turquoise-light: #e8f9f7;
+    --whatsapp-gray: #89959f;
+    --whatsapp-green: #e0fcd6;
+    --whatsapp-blue: #71bce6;
 }
 
 .testMe * {
-	outline: 1px dotted red;
+    outline: 1px dotted red;
 }
 
 .Vue-Toastification__toast {
-	border-radius: var(--card-border-radius);
-	box-shadow: none;
+    border-radius: var(--card-border-radius);
+    box-shadow: none;
 }
 
 .Vue-Toastification__toast--default {
-	background: var(--bgl-primary);
+    background: var(--bgl-primary);
 }
 
 .Vue-Toastification__close-button {
-	height: 1.5rem;
-	line-height: 1rem;
+    height: 1.5rem;
+    line-height: 1rem;
 }
 
 ::-moz-selection {
-	color: var(--bgl-selection-color);
-	background: var(--bgl-selection-bg);
+    color: var(--bgl-selection-color);
+    background: var(--bgl-selection-bg);
 }
 
 ::selection {
-	color: var(--bgl-selection-color);
-	background: var(--bgl-selection-bg);
+    color: var(--bgl-selection-color);
+    background: var(--bgl-selection-bg);
 }
 
 .popup {
-	border-radius: 15px;
-	background: var(--bgl-popup-bg);
-	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
-	padding: 2rem;
-	min-width: 300px;
-	text-align: center;
+    border-radius: 15px;
+    background: var(--bgl-popup-bg);
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
+    padding: 2rem;
+    min-width: 300px;
+    text-align: center;
 }
 
 .tabs {
-	-moz-column-gap: 1rem;
-	column-gap: 1rem;
-	margin-top: 20px;
-	margin-bottom: -2rem;
-	border-top: 1px solid var(--border-color);
-	width: calc(100% + 4rem);
-	-webkit-margin-start: -2rem;
-	margin-inline-start: -2rem;
-	-webkit-padding-start: 2rem;
-	padding-inline-start: 2rem;
-	overflow: auto;
-	display: flex;
+    -moz-column-gap: 1rem;
+    column-gap: 1rem;
+    margin-top: 20px;
+    margin-bottom: -2rem;
+    border-top: 1px solid var(--border-color);
+    width: calc(100% + 4rem);
+    -webkit-margin-start: -2rem;
+    margin-inline-start: -2rem;
+    -webkit-padding-start: 2rem;
+    padding-inline-start: 2rem;
+    overflow: auto;
+    display: flex;
 }
 
 .tab {
-	font-size: 14px;
-	font-weight: 600;
-	line-height: 2.5;
-	cursor: pointer;
-	transition: var(--bgl-transition);
-	border-bottom: 2px solid transparent;
-	padding: 0 5px;
-	white-space: nowrap;
-	text-decoration: none;
-	color: inherit;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 2.5;
+    cursor: pointer;
+    transition: var(--bgl-transition);
+    border-bottom: 2px solid transparent;
+    padding: 0 5px;
+    white-space: nowrap;
+    text-decoration: none;
+    color: inherit;
 }
 
 .tab.active {
-	color: var(--bgl-primary);
-	border-bottom: 2px solid var(--bgl-primary);
+    color: var(--bgl-primary);
+    border-bottom: 2px solid var(--bgl-primary);
 }
 
 .tab:hover {
-	color: var(--bgl-primary);
+    color: var(--bgl-primary);
 }
 
 .tab:active {
-	-webkit-filter: brightness(70%);
-	filter: brightness(70%);
+    -webkit-filter: brightness(70%);
+    filter: brightness(70%);
 }
 
 .router-tab {
-	font-size: 14px;
-	font-weight: 600;
-	line-height: 2.5;
-	cursor: pointer;
-	transition: var(--bgl-transition);
-	border-bottom: 2px solid transparent;
-	padding: 0 5px;
-	white-space: nowrap;
-	text-decoration: none;
-	color: inherit;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 2.5;
+    cursor: pointer;
+    transition: var(--bgl-transition);
+    border-bottom: 2px solid transparent;
+    padding: 0 5px;
+    white-space: nowrap;
+    text-decoration: none;
+    color: inherit;
 }
 
 .router-tab.router-link-active {
-	color: var(--bgl-primary);
-	border-bottom: 2px solid var(--bgl-primary);
+    color: var(--bgl-primary);
+    border-bottom: 2px solid var(--bgl-primary);
 }
 
 .router-tab:hover {
-	color: var(--bgl-primary);
+    color: var(--bgl-primary);
 }
 
 .router-tab:active {
-	-webkit-filter: brightness(70%);
-	filter: brightness(70%);
+    -webkit-filter: brightness(70%);
+    filter: brightness(70%);
 }
 
 .entity-container {
-	display: grid;
-	height: 100%;
-	grid-template-columns: minmax(300px, 1fr) 3fr;
-	grid-gap: 1rem;
-	-moz-column-gap: 1rem;
-	column-gap: 1rem;
-	grid-template-rows: 1fr;
-	grid-template-areas: 'list-view detail-view';
-	transition: grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
-	transition:
-		grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99),
-		-ms-grid-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
-	transition: all 0.5s cubic-bezier(0.79, 0.01, 0.34, 0.99);
+    display: grid;
+    height: 100%;
+    grid-template-columns: minmax(300px, 1fr) 3fr;
+    grid-gap: 1rem;
+    -moz-column-gap: 1rem;
+    column-gap: 1rem;
+    grid-template-rows: 1fr;
+    grid-template-areas: 'list-view detail-view';
+    transition: grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
+    transition:
+        grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99),
+        -ms-grid-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
+    transition: all 0.5s cubic-bezier(0.79, 0.01, 0.34, 0.99);
 }
 
 .detail-main {
-	overflow-y: auto;
+    overflow-y: auto;
 }
 
 .content-row p {
-	margin: 0 0 10px 0;
+    margin: 0 0 10px 0;
 }
 
 .id {
-	color: var(--bgl-gray);
-	font-size: 9px;
+    color: var(--bgl-gray);
+    font-size: 9px;
 }
 
 .field {
-	--field-count: 1;
-	--width: calc(100% / var(--field-count));
-	grid-auto-columns: minmax(var(--width), var(--width));
-	font-size: 10px;
-	text-align: z;
+    --field-count: 1;
+    --width: calc(100% / var(--field-count));
+    grid-auto-columns: minmax(var(--width), var(--width));
+    font-size: 10px;
+    text-align: z;
 }
 
 .detail-view-inner {
-	display: grid;
-	height: 100%;
-	overflow: hidden;
-	grid-template-rows: -webkit-max-content 1fr;
-	grid-template-rows: max-content 1fr;
-	gap: 1rem;
+    display: grid;
+    height: 100%;
+    overflow: hidden;
+    grid-template-rows: -webkit-max-content 1fr;
+    grid-template-rows: max-content 1fr;
+    gap: 1rem;
 }
 
 .detail-view-inner-wrap {
-	height: 100%;
-	overflow: hidden;
-	transition: var(--bgl-transition);
+    height: 100%;
+    overflow: hidden;
+    transition: var(--bgl-transition);
 }
 
 .table-list-wrap {
-	overflow: auto;
+    overflow: auto;
 }
 
 .copy-url {
-	background-color: var(--bgl-gray-light);
-	border-radius: var(--btn-border-radius);
-	padding: 0.5rem 1rem;
-	align-items: center;
-	justify-content: flex-start;
-	margin-bottom: 1rem;
-	display: flex;
-	justify-content: space-between;
+    background-color: var(--bgl-gray-light);
+    border-radius: var(--btn-border-radius);
+    padding: 0.5rem 1rem;
+    align-items: center;
+    justify-content: flex-start;
+    margin-bottom: 1rem;
+    display: flex;
+    justify-content: space-between;
 }
 
 .copy-url a {
-	margin: 0;
-	font-size: 12px;
-	opacity: 0.8;
-	color: var(--bgl-text-color);
-	word-break: break-all;
+    margin: 0;
+    font-size: 12px;
+    opacity: 0.8;
+    color: var(--bgl-text-color);
+    word-break: break-all;
 }
 
 .list-view {
-	grid-area: list-view;
-	grid-template-areas: 'list-header' 'list-content';
-	grid-template-columns: 1fr;
-	overflow-y: auto;
-	grid-template-rows: -webkit-max-content 1fr;
-	grid-template-rows: max-content 1fr;
-	transition: var(--transition);
+    grid-area: list-view;
+    grid-template-areas: 'list-header''list-content';
+    grid-template-columns: 1fr;
+    overflow-y: auto;
+    grid-template-rows: -webkit-max-content 1fr;
+    grid-template-rows: max-content 1fr;
+    transition: var(--transition);
 }
 
 .shekel {
-	line-height: 0;
+    line-height: 0;
 }
 
 .view-wrapper {
-	height: 100%;
-	position: relative;
-	overflow: hidden;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
 }
 
 @media screen and (max-width: 1000px) {
-	.entity-container {
-		grid-template-columns: minmax(22vw, 1fr) 2fr;
-	}
+    .entity-container {
+        grid-template-columns: minmax(22vw, 1fr) 2fr;
+    }
 }
 
 @media screen and (max-width: 910px) {
-	.tab {
-		font-size: 12px;
-	}
-
-	.entity-container {
-		grid-template-columns: 1fr;
-		gap: 0;
-	}
-
-	.detail-view-inner {
-		border-radius: var(--card-border-radius);
-		background: var(--bgl-box-bg);
-	}
-
-	.detail-view-inner-wrap {
-		position: absolute;
-		height: 100%;
-		width: 100%;
-		background: var(--bgl-bg);
-	}
-
-	.detail-view-inner-wrap.bgl_card {
-		background: var(--bgl-box-bg);
-	}
-
-	.bgl_card {
-		padding: 1rem 1rem;
-	}
-
-	.tabs {
-		-moz-column-gap: 10px;
-		column-gap: 10px;
-		margin-top: 10px;
-		margin-bottom: -15px;
-		box-sizing: border-box;
-		-webkit-margin-start: -1rem;
-		margin-inline-start: -1rem;
-		-webkit-padding-start: 1rem;
-		padding-inline-start: 1rem;
-		max-width: calc(100vw - 2rem);
-	}
-
-	.popup {
-		border-radius: 15px;
-		background: var(--bgl-popup-bg);
-		box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
-		padding: 2rem;
-		min-width: 0;
-		max-width: 90%;
-		max-height: 90vh;
-		overflow-x: auto;
-		text-align: center;
-	}
-
-	.detail-main {
-		overflow-y: unset;
-	}
-
-	.detail-section {
-		height: -webkit-fit-content;
-		height: -moz-fit-content;
-		height: fit-content;
-	}
-
-	.field {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 0.5rem;
-		align-items: center;
-	}
-}
+    .tab {
+        font-size: 12px;
+    }
+
+    .entity-container {
+        grid-template-columns: 1fr;
+        gap: 0;
+    }
+
+    .detail-view-inner {
+        border-radius: var(--card-border-radius);
+        background: var(--bgl-box-bg);
+    }
+
+    .detail-view-inner-wrap {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        background: var(--bgl-bg);
+    }
+
+    .detail-view-inner-wrap.bgl_card {
+        background: var(--bgl-box-bg);
+    }
+
+    .bgl_card {
+        padding: 1rem 1rem;
+    }
+
+    .tabs {
+        -moz-column-gap: 10px;
+        column-gap: 10px;
+        margin-top: 10px;
+        margin-bottom: -15px;
+        box-sizing: border-box;
+        -webkit-margin-start: -1rem;
+        margin-inline-start: -1rem;
+        -webkit-padding-start: 1rem;
+        padding-inline-start: 1rem;
+        max-width: calc(100vw - 2rem);
+    }
+
+    .popup {
+        border-radius: 15px;
+        background: var(--bgl-popup-bg);
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
+        padding: 2rem;
+        min-width: 0;
+        max-width: 90%;
+        max-height: 90vh;
+        overflow-x: auto;
+        text-align: center;
+    }
+
+    .detail-main {
+        overflow-y: unset;
+    }
+
+    .detail-section {
+        height: -webkit-fit-content;
+        height: -moz-fit-content;
+        height: fit-content;
+    }
+
+    .field {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        align-items: center;
+    }
+}

package/src/types/BagelForm.ts

@@ -1,4 +1,5 @@
 import type { SelectInput, TextInput } from '@bagelink/vue'
+import type { VNode } from 'vue'
 
 export type AttributeValue = string | number | boolean | undefined | undefined | { [key: string]: any }
 
@@ -29,7 +30,7 @@ export interface BaseBagelField<T = { [key: string]: any }> {
 	'id'?: keyof T extends string ? keyof T : string
 	'label'?: string
 	'placeholder'?: string
-	'children'?: (Field<T> | string)[]
+	'children'?: (Field<T> | string | VNode)[]
 	'class'?: AttributeValue | AttributeFn<T>
 	'attrs'?: Attributes<T>
 	'required'?: boolean

package/src/utils/BagelFormUtils.ts

@@ -235,7 +235,8 @@ export function findBglFieldById(id: string, _schema: BglFormSchemaT): Field | u
 	for (const field of _schema) {
 		if (field.id === id) return field
 		if (field.children && Number(field.children.length) > 0) {
-			const child = findBglFieldById(id, field.children.filter(c => typeof c !== 'string'))
+			const fieldChildren = field.children.filter((c): c is Field => typeof c === 'object' && '$el' in c)
+			const child = findBglFieldById(id, fieldChildren)
 			if (child) return child
 		}
 	}

package/src/components/Calendar/index.ts

@@ -1,4 +0,0 @@
-import DatePicker from './components/header/DatePicker.vue'
-import Qalendar from './Qalendar.vue'
-
-export { DatePicker, Qalendar }