res_levis_frontend/jsonic/modules/daisyui.json

{
	"parts": {
		"daisyui": {
			"appTitle": {
				"do": [
					{
						"browser:title": "{arguments}"
					},
					{
						"html": {
							"empty": true,
							"selector": ".navbar-center",
							"span text-xl": "{arguments}"
						}
					}
				]
			},	 
			"menu": {
				"do": [
					{
						"html": [
							{
								"selector": "{arguments:selector}",
								"ul": {
									"attr": {
										"class": "{arguments:class}"
									},
									"for": {
										"name": "menuItem",
										"of": "{arguments:items}",
										"do": [
											{
												"html": [
													{
														"li": {
															"a": {
																"attr": {
																	"class": "menuItem {menuItem class}",
																	"data-id": "{menuItem id}",
																	"href": "{menuItem link}"
																},
																"html": [
																	{
																		"ui:icon": {
																			"name": "{menuItem icon}",
																			"size": 20,
																			"margin": 0
																		}
																	},
																	{
																		"span": "{menuItem title}"
																	},
																	{
																		"if": "'{menuItem badge}' !== ''",
																		"span badge badge-xs badge-secondary indicator-item text-white": "{menuItem badge}"
																	}
																],
																"on": {
																	"mousedown": [
																		{
																			"attr": {
																				"selector": ".{arguments:selectClass}",
																				"removeClass": "{arguments:selectClass}"
																			}
																		},
																		{
																			"attr": {
																				"selector": ".menuItem[data-id='{menuItem id}']",
																				"addClass": "{arguments:selectClass}"
																			}
																		}
																	]
																}				
															}
														}
													}
												]
											}
										]
									}
								}							
							}
						]
					}
				]
			},
			"drawler": {
				"html": [
					{
						"div": {
							"attr": {
								"class": "drawer drawer-end z-[999]"
							},
							"input": {
								"attr": {
									"id": "my-drawer-4",
									"type": "checkbox",
									"class": "drawer-toggle"
								}
							},
							"div": [
								{
									"attr": {
										"class": "drawer-side"
									},
									"html": [
										{
											"label": {
												"attr": {
													"for": "my-drawer-4",
													"aria-label": "close sidebar",
													"class": "drawer-overlay"
												}
											}
										},
										{
											"daisyui:menu": {
												"class": "menu bg-base-200 text-base-content min-h-full w-80 p-4",
												"selectClass": "{arguments:selectClass}",
												"items": "{arguments:menu}"
											}
										}
									]
								}
							]
						}
					}
				]
			},
			"navbar": {
				"do": {
					"html": [
						{
							"daisyui:drawler": {
								"menu": "{arguments:menu}"
							}
						},
						{
							"selector": "{arguments:selector}",
							"div navbar bg-base-100 shadow-sm": {
								"html": [
									{
										"div navbar-start": {
											"div": {
												"text": "{arguments:logo}"
											}
										}
									},
									{
										"div navbar-center": {
											"html": [
												{
													"span text-xl": "{arguments:title}"
												}
											]
										}
									},
									{
										"div navbar-end": {
											"html": [
												{
													"div hidden md:flex": {
														"html": [
															{
																"daisyui:menu": {
																	"class": "menu menu-horizontal rounded-box",
																	"selectClass": "{arguments:selectClass}",
																	"items": "{arguments:menu}"
																}
															}
														]
													}
												},
												{
													"html": "{arguments:html}"
												},
												{
													"label": {
														"attr": {
															"for": "my-drawer-4",
															"class": "drawer-button md:hidden"
														},
														"ui:icon": {
															"name": "heroicons:bars-3",
															"size": 24,
															"margin": 8
														},
														"on": {
															"mousedown": [
															]
														}
													}
												}
											]
										}
									}
								]
							}
						}
					]
				}
			},
			"dock": {
				"do": [
					{
						"html": {
						"selector": "{arguments:selector}",
						"div": {
							"attr": {
								"class": "dock z-[998]"
							},
							"for": {
								"name": "dockButton",
								"of": "{arguments:buttons}",
								"do": [
									{
										"set": {
											"var dockActive": "(Boolean({dockButton active})) ? 'dock-active' : ''"
										}
									},
									{
										"html": [
											{
												"button": {
													"attr": {
														"class": "{var dockActive}",
														"data-id": "{dockButton id}"
													},
													"html": [
														{
															"ui:icon": {
																"name": "{dockButton icon}",
																"size": 20,
																"margin": 2
															}
														},
														{
															"span": {
																"attr": {
																	"class": "dock-label"
																},
																"text": "{dockButton title}"
															}
														}
													],
													"on": {
														"mousedown": [
															{
																"do": "{dockButton do}"
															}
														]
													}
												}
											}
										]
									}
								]
							}
						}
						}
					}
				],
				"comment": {
					"dock": {
						"daisyui:dock": {
							"selector": "dock",
							"buttons": [
							{
								"title": "Home",
								"icon": "heroicons:home",
								"do": [
									{
										"link": "#home"
									}
								]
							},
							{
								"title": "Inbox",
								"icon": "heroicons:inbox-arrow-down",
								"active": true,
								"do": [
									{
										"link": "#inbox"
									}
								]
							},
							{
								"title": "Settings",
								"icon": "heroicons:adjustments-horizontal",
								"do": [
									{
										"link": "#settings"
									}
								]
							}
							]
						}
					}
				}	
			},
			"dockSelect": {
				"do": [
					{
						"attr": {
						"selector": ".dock-active",
						"removeClass": "dock-active"
						}
					},
					{
						"attr": {
						"selector": ".dock > button[data-id='{arguments:id}']",
						"addClass": "dock-active"
						}
					}
				]
			},
			"calendar": {
				"html": [
					{
						"selector": "{arguments:selector}",
						"html": [
							{
								"button": {
									"attr": {
										"popovertarget": "cally-popover1",
										"class": "input input-border",
										"id": "cally1",
										"style": "anchor-name:--cally1"
									},
									"text": "\n  Pick a date\n"
								}
							},
							{
								"div": {
									"comment": "how to include parameters without value? null?",
									"attr": {
										"popover": true,
										"id": "cally-popover1",
										"class": "dropdown bg-base-100 rounded-box shadow-lg",
										"style": "position-anchor:--cally1"
									},
									"calendar-date": {
										"attr": {
											"class": "cally",
											"onchange": "document.getElementById('cally1').innerText = this.value"
										},
										"svg": [
											{
												"attr": {
													"xmlns": "http://www.w3.org/2000/svg",
													"aria-label": "Previous",
													"class": "fill-current size-4",
													"slot": "previous",
													"viewBox": "0 0 24 24"
												},
												"path": {
													"attr": {
														"d": "M15.75 19.5 8.25 12l7.5-7.5"
													}
												}
											},
											{
												"attr": {
													"xmlns": "http://www.w3.org/2000/svg",
													"aria-label": "Next",
													"class": "fill-current size-4",
													"slot": "next",
													"viewBox": "0 0 24 24"
												},
												"path": {
													"attr": {
														"d": "m8.25 4.5 7.5 7.5-7.5 7.5"
													}
												}
											}
										],
										"calendar-month": {}
									}
								}
							}
						]
					}
				]
			},
			"themeController": {
				"arguments": {
					"type": "object",
					"properties": {
						"selector": {
							"type": "string"
						},
						"theme": {
							"type": "string"
						}
					},
					"required": [
						"selector",
						"theme"
					]
				},
				"do": {
					"html": [
						{
							"selector": "{setup:selector}",
							"html": "<input type=\"checkbox\" value=\"{setup:theme}\" class=\"toggle theme-controller\" />"
						}
					],
					"note": {
						"daisyui:themeController": {
							"selector": "body",
							"theme": "synthwave"
						}
					}
				}
			},
			"fieldset": {
				"html": [
					{
						"selector": "{setup:selector}",
						"fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box": {
							"html": [
								{
									"legend fieldset-legend": "{setup:legend}"
								},
								{
									"for": {
										"name": "field",
										"of": "{setup:fields}",
										"do": [
											{
												"html": "<label class=\"fieldset-label\">{field:name}</label><input class=\"input validator\" type=\"{field:type}\" placeholder=\"{field:placeholder}\" minlength=\"{field:minlength}\" /><div class=\"validator-hint\">{field:hint}</div>"
											}
										]
									}
								},
								{
									"button btn btn-neutral mt-4": "Login"
								}
							]
						}
					}
				],
				"note": {
					"daisyui:fieldset": {
						"selector": "body",
						"legend": "Login",
						"fields": [
							{
							"name": "Email",
							"placeolder": "Email input",
							"type": "email",
							"required": true,
							"pattern": "",
							"hint": "Enter valid email address"
							},
							{
							"name": "Password",
							"placeolder": "Password input",
							"type": "password",
							"minlength": 8,
							"pattern": "(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])",
							"required": true,
							"title": "Must be more than 8 characters, including number, lowercase letter, uppercase letter",
							"hint": "Must be more than 8 characters, including <br/>At least one number<br/>At least one lowercase letter<br/>At least one uppercase letter"
							}
						],
						"buttons": [
							{
							"name": "Login",
							"onclick": [
							]
							}
						]
					}
				}
			},
			"button": {
				"button btn {setup:class}": {
					"text": "{setup:text}",
					"on": "{setup:on}"
				}
			},
			"modal": {
				"do": [
					{
						"if": {
							"is": "document.querySelector('#dialog')",
							"then": [
								{
									"js": "dialog.showModal()"
								}
							],
							"else": [
								{
									"dialog id=dialog modal": {
										"selector": "body"
									}
								},
								{
									"js": "dialog.showModal()"
								}
							]
						}
					},
					{
						"html": {
							"selector": "#dialog",
							"form modal-box": {
								"html": [
									{
										"h3 font-bold text-lg": "{setup:title}"
									},
									{
										"p py-4": "{setup:text}"
									},
									{
										"set": {
											"var onAlert": "{setup:on}"
										}
									},
									{
										"div modal-action": {
											"div btn btn-primary": {
												"if": "{setup:showConfirmButton} !== false",
												"cancelButtonText": "Cancel",
												"text": "{setup:confirmButtonText}",
												"on": {
													"mousedown": [
														{
															"js": "dialog.close()"
														},
														{
															"do": "{var onAlert isConfirmed}"
														}
													]
												}
											}
										}
									}
								]
							}
						}
					}
				]
			},
			"form": {
				"div card bg-base-200 w-80": {
					"div card-body": {
						"html": [
							{
								"input placeholder=Email input input-bordered": ""
							},
							{
								"label label cursor-pointer": {
									"text": "Accept terms of use",
									"input type=checkbox toggle": ""
								}
							},
							{
								"label label cursor-pointer": {
									"text": "Submit to newsletter",
									"input type=checkbox toggle": ""
								}
							},
							{
								"button btn btn-neutral": "Save"
							}
						]
					}
				}
			}
		}
	},
	"plugins": [
		{
			"name": "tailwindcss",
			"description": "A utility-first CSS framework for rapidly building custom user interfaces",
			"type": "script", 
			"version": "4.1.12",
			"ondemand": false,
			"url": "assets/plugins/tailwindcss.min.js",
			"cdn": "https://unpkg.com/@tailwindcss/browser@4"
		},
		{
			"name": "daisyui",
			"description": "The most popular, free and open-source component library for Tailwind CSS",
			"type": "link",
			"version": "5.0.5",
			"ondemand": false,
			"url": "assets/plugins/daisyui.css",
			"cdn": "https://cdn.jsdelivr.net/npm/daisyui@5"
		}
	]
}