{ "pages": [ { "slug": "todo-list", "title": "Todo List", "description": "A page to create and view todo items.", "components": [ { "component_name": "Loading Bar", "component_description": "A thin animated loading bar shown at the top of the page during SDK requests.", "component_code": "

\n", "component_script": "let _loadingCount = 0;\n\nfunction showLoading() {\n _loadingCount++;\n const container = document.getElementById('loading-bar-container');\n const bar = document.getElementById('loading-bar');\n if (container) {\n container.classList.remove('hidden');\n bar.classList.remove('animate-loading-fade');\n bar.style.width = '0%';\n bar.offsetHeight;\n bar.classList.add('animate-loading-bar');\n }\n}\n\nfunction hideLoading() {\n _loadingCount = Math.max(0, _loadingCount - 1);\n if (_loadingCount > 0) return;\n const container = document.getElementById('loading-bar-container');\n const bar = document.getElementById('loading-bar');\n if (container && bar) {\n bar.style.width = '100%';\n bar.classList.remove('animate-loading-bar');\n bar.classList.add('animate-loading-fade');\n setTimeout(() => {\n if (_loadingCount === 0) {\n container.classList.add('hidden');\n bar.classList.remove('animate-loading-fade');\n bar.style.width = '0%';\n }\n }, 300);\n }\n}" }, { "component_name": "Todo List", "component_description": "Displays a list of todo items with styled cards, including mark as done, edit and delete functionality.", "component_code": "

My Todos

No todos yet. Add one below!

", "component_script": "let _todosCache = [];\n\nfunction isDone(todo) {\n return todo.done === true || todo.done === 'true' || todo.done === 1;\n}\n\nfunction escapeAttr(str) {\n return String(str).replace(/&/g, '&').replace(/\"/g, '"').replace(/'/g, ''').replace(//g, '>');\n}\n\nasync function fetchTodos() {\n showLoading();\n try {\n _todosCache = await sdk.getRecords('todos');\n renderTodos();\n } catch (error) {\n console.error(error);\n } finally {\n hideLoading();\n }\n}\n\nfunction renderTodos() {\n const listEl = document.getElementById('todo-list');\n const emptyEl = document.getElementById('empty-state');\n listEl.innerHTML = '';\n if (_todosCache.length === 0) {\n emptyEl.classList.remove('hidden');\n } else {\n emptyEl.classList.add('hidden');\n _todosCache.forEach(todo => {\n const done = isDone(todo);\n const nameClass = done ? 'line-through text-gray-400 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100';\n const cardClass = done ? 'bg-gray-50 dark:bg-gray-800/50 border-gray-100 dark:border-gray-700/50' : 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700';\n const checkBtnClass = done\n ? 'bg-emerald-500 dark:bg-emerald-400 border-emerald-500 dark:border-emerald-400'\n : 'border-gray-300 dark:border-gray-500 hover:border-emerald-400 dark:hover:border-emerald-400';\n const checkSvg = done\n ? ''\n : '';\n const safeName = escapeAttr(todo.name);\n const todoId = todo.id;\n\n const div = document.createElement('div');\n div.id = 'todo-item-' + todoId;\n div.className = 'flex items-center justify-between ' + cardClass + ' border rounded-lg px-4 py-3 shadow-sm hover:shadow-md transition-shadow';\n div.innerHTML = `\n

\n \n ${todo.name}\n

\n \n \n

\n \n \n \n

\n `;\n listEl.appendChild(div);\n\n document.getElementById('todo-check-' + todoId).addEventListener('click', function() {\n toggleDone(todoId);\n });\n document.getElementById('todo-edit-btn-' + todoId).addEventListener('click', function() {\n startEdit(todoId, todo.name);\n });\n document.getElementById('todo-delete-btn-' + todoId).addEventListener('click', function() {\n deleteTodo(todoId);\n });\n document.getElementById('todo-save-btn-' + todoId).addEventListener('click', function() {\n saveEdit(todoId);\n });\n document.getElementById('todo-cancel-btn-' + todoId).addEventListener('click', function() {\n cancelEdit(todoId);\n });\n document.getElementById('todo-edit-input-' + todoId).addEventListener('keydown', function(e) {\n handleEditKey(e, todoId);\n });\n });\n }\n}\n\nasync function toggleDone(id) {\n const todo = _todosCache.find(t => t.id === id);\n if (!todo) return;\n const newDone = !isDone(todo);\n showLoading();\n try {\n await sdk.updateRecord('todos', id, { done: newDone });\n fetchTodos();\n } catch (error) {\n console.error(error);\n hideLoading();\n }\n}\n\nfunction startEdit(id, currentName) {\n const viewEl = document.getElementById('todo-view-' + id);\n const editEl = document.getElementById('todo-edit-' + id);\n const inputEl = document.getElementById('todo-edit-input-' + id);\n viewEl.classList.add('hidden');\n editEl.classList.remove('hidden');\n inputEl.value = currentName;\n inputEl.focus();\n inputEl.select();\n}\n\nfunction cancelEdit(id) {\n const viewEl = document.getElementById('todo-view-' + id);\n const editEl = document.getElementById('todo-edit-' + id);\n viewEl.classList.remove('hidden');\n editEl.classList.add('hidden');\n}\n\nfunction handleEditKey(event, id) {\n if (event.key === 'Enter') {\n saveEdit(id);\n } else if (event.key === 'Escape') {\n cancelEdit(id);\n }\n}\n\nasync function saveEdit(id) {\n try {\n const inputEl = document.getElementById('todo-edit-input-' + id);\n const value = inputEl.value.trim();\n if (!value) return;\n showLoading();\n await sdk.updateRecord('todos', id, { name: value });\n fetchTodos();\n } catch (error) {\n console.error(error);\n hideLoading();\n }\n}\n\nasync function deleteTodo(id) {\n showLoading();\n try {\n await sdk.deleteRecord('todos', id);\n fetchTodos();\n } catch (error) {\n console.error(error);\n hideLoading();\n }\n}\n\nfetchTodos();\nsdk.on('todo:created', () => fetchTodos());" }, { "component_name": "Add Todo", "component_description": "A styled form to add new todo items.", "component_code": "

\n \n

", "component_script": "document.getElementById('add-todo-form').addEventListener('submit', async function(event) {\n event.preventDefault();\n try {\n const todoInput = document.getElementById('todo-input');\n const value = todoInput.value.trim();\n if (!value) return;\n showLoading();\n await sdk.createRecord('todos', { name: value, done: false });\n todoInput.value = '';\n sdk.emit('todo:created');\n } catch (error) {\n console.error(error);\n } finally {\n hideLoading();\n }\n});" } ] } ], "tables": [ { "slug": "todos", "name": "Todos", "description": "A table to store todo items.", "fields": [ { "slug": "name", "name": "Name", "type": "String" }, { "slug": "done", "name": "Done", "type": "Boolean" } ] } ] }

Todo List

Components (3)

Loading Bar

Todo List

Add Todo