@sonicjs-cms/core 2.0.0-alpha.9 → 2.0.0-beta.1

package/dist/chunk-LU6J53IX.js

@@ -0,0 +1,262 @@
+import { init_admin_layout_catalyst_template, init_logo_template } from './chunk-P3VS4DV3.js';
+
+// src/templates/form.template.ts
+function renderForm(data) {
+  return `
+    <form 
+      ${data.id ? `id="${data.id}"` : ""}
+      ${data.hxPost ? `hx-post="${data.hxPost}"` : data.hxPut ? `hx-put="${data.hxPut}"` : data.action ? `action="${data.action}"` : ""}
+      ${data.hxTarget ? `hx-target="${data.hxTarget}"` : ""}
+      method="${data.method || "POST"}"
+      class="${data.className || "space-y-6"}"
+      ${data.fields.some((f) => f.type === "file") ? 'enctype="multipart/form-data"' : ""}
+    >
+      ${data.title ? `
+        <div class="mb-6">
+          <h2 class="text-lg font-medium text-gray-1">${data.title}</h2>
+          ${data.description ? `<p class="mt-1 text-sm text-gray-4">${data.description}</p>` : ""}
+        </div>
+      ` : ""}
+      
+      <div id="form-messages"></div>
+      
+      ${data.fields.map((field) => renderFormField(field)).join("")}
+      
+      <div class="flex justify-between items-center pt-6 border-t border-gray-7">
+        <div class="flex space-x-4">
+          ${data.submitButtons.map((button) => `
+            <button 
+              type="${button.type || "submit"}"
+              ${button.name ? `name="${button.name}"` : ""}
+              ${button.value ? `value="${button.value}"` : ""}
+              ${button.onclick ? `onclick="${button.onclick}"` : ""}
+              class="btn ${button.className || "btn-primary"}"
+            >
+              ${button.label}
+            </button>
+          `).join("")}
+        </div>
+      </div>
+    </form>
+  `;
+}
+function renderFormField(field) {
+  const fieldId = `field-${field.name}`;
+  const required = field.required ? "required" : "";
+  const readonly = field.readonly ? "readonly" : "";
+  const placeholder = field.placeholder ? `placeholder="${field.placeholder}"` : "";
+  let fieldHTML = "";
+  switch (field.type) {
+    case "text":
+    case "email":
+    case "number":
+    case "date":
+      fieldHTML = `
+        <input
+          type="${field.type === "date" ? "datetime-local" : field.type}"
+          id="${fieldId}"
+          name="${field.name}"
+          value="${field.value || ""}"
+          class="form-input ${field.className || ""}"
+          ${placeholder}
+          ${required}
+          ${readonly}
+          ${field.validation?.min !== void 0 ? `min="${field.validation.min}"` : ""}
+          ${field.validation?.max !== void 0 ? `max="${field.validation.max}"` : ""}
+          ${field.validation?.pattern ? `pattern="${field.validation.pattern}"` : ""}
+        >
+      `;
+      break;
+    case "textarea":
+      fieldHTML = `
+        <textarea 
+          id="${fieldId}"
+          name="${field.name}" 
+          class="form-textarea ${field.className || ""}" 
+          rows="${field.rows || 4}"
+          ${placeholder}
+          ${required}
+        >${field.value || ""}</textarea>
+      `;
+      break;
+    case "rich_text":
+      const uniqueId = `${field.name}-${Date.now()}`;
+      fieldHTML = `
+        <div class="markdown-field">
+          <textarea id="${uniqueId}" name="${field.name}" class="form-textarea" rows="8">${field.value || ""}</textarea>
+          <script>
+            if (typeof EasyMDE !== 'undefined') {
+              new EasyMDE({
+                element: document.getElementById('${uniqueId}'),
+                minHeight: '300px',
+                spellChecker: false,
+                status: ['autosave', 'lines', 'words', 'cursor'],
+                autosave: {
+                  enabled: true,
+                  uniqueId: '${uniqueId}',
+                  delay: 1000
+                },
+                renderingConfig: {
+                  singleLineBreaks: false,
+                  codeSyntaxHighlighting: true
+                }
+              });
+            }
+          </script>
+        </div>
+      `;
+      break;
+    case "select":
+      fieldHTML = `
+        <select 
+          id="${fieldId}"
+          name="${field.name}" 
+          class="form-input ${field.className || ""}" 
+          ${required}
+        >
+          ${field.options ? field.options.map((option) => `
+            <option value="${option.value}" ${option.selected || field.value === option.value ? "selected" : ""}>
+              ${option.label}
+            </option>
+          `).join("") : ""}
+        </select>
+      `;
+      break;
+    case "multi_select":
+      fieldHTML = `
+        <select 
+          id="${fieldId}"
+          name="${field.name}" 
+          class="form-input ${field.className || ""}" 
+          multiple 
+          ${required}
+        >
+          ${field.options ? field.options.map((option) => `
+            <option value="${option.value}" ${option.selected ? "selected" : ""}>
+              ${option.label}
+            </option>
+          `).join("") : ""}
+        </select>
+      `;
+      break;
+    case "checkbox":
+      fieldHTML = `
+        <input
+          type="checkbox"
+          id="${fieldId}"
+          name="${field.name}"
+          value="1"
+          class="size-4 rounded border border-white/15 bg-white/5 checked:border-transparent checked:bg-white disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-white/20 focus:ring-offset-2 ${field.className || ""}"
+          ${field.value ? "checked" : ""}
+          ${required}
+        >
+        <label for="${fieldId}" class="ml-2 text-sm text-white">${field.label}</label>
+      `;
+      break;
+    default:
+      fieldHTML = `
+        <input 
+          type="text" 
+          id="${fieldId}"
+          name="${field.name}" 
+          value="${field.value || ""}"
+          class="form-input ${field.className || ""}" 
+          ${placeholder} 
+          ${required}
+        >
+      `;
+      break;
+  }
+  if (field.type === "checkbox") {
+    return `
+      <div class="form-group">
+        <div class="flex items-center">
+          ${fieldHTML}
+        </div>
+        ${field.helpText ? `<p class="text-sm text-zinc-500 dark:text-zinc-400 mt-1 ml-6">${field.helpText}</p>` : ""}
+      </div>
+    `;
+  }
+  return `
+    <div class="form-group">
+      <label for="${fieldId}" class="form-label">
+        ${field.label}${field.required ? " *" : ""}
+      </label>
+      ${fieldHTML}
+      ${field.helpText ? `<p class="text-sm text-zinc-500 dark:text-zinc-400 mt-1">${field.helpText}</p>` : ""}
+    </div>
+  `;
+}
+
+// src/templates/filter-bar.template.ts
+function renderFilterBar(data) {
+  return `
+    <div class="rounded-xl bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 p-6 mb-6">
+      <form id="filter-form" class="flex flex-wrap gap-4 items-center">
+        ${data.filters.map((filter) => `
+          <div class="flex items-center space-x-2">
+            <label class="text-sm font-medium text-zinc-500 dark:text-zinc-400">${filter.label}:</label>
+            <select
+              name="${filter.name}"
+              class="rounded-lg bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-950 dark:text-white ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500 focus:outline-none transition-colors"
+              onchange="updateFilters()"
+            >
+              ${filter.options.map((option) => `
+                <option value="${option.value}" ${option.selected ? "selected" : ""}>
+                  ${option.label}
+                </option>
+              `).join("")}
+            </select>
+          </div>
+        `).join("")}
+
+        ${data.actions && data.actions.length > 0 ? `
+          <div class="flex items-center space-x-2 ml-auto">
+            ${data.actions.map((action) => `
+              <button
+                type="button"
+                class="inline-flex items-center rounded-lg bg-white dark:bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-950 dark:text-white ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors"
+                ${action.onclick ? `onclick="${action.onclick}"` : ""}
+                ${action.hxGet ? `hx-get="${action.hxGet}"` : ""}
+                ${action.hxTarget ? `hx-target="${action.hxTarget}"` : ""}
+              >
+                ${action.label}
+              </button>
+            `).join("")}
+          </div>
+        ` : ""}
+      </form>
+
+      <script>
+        function updateFilters() {
+          const form = document.getElementById('filter-form');
+          const formData = new FormData(form);
+          const params = new URLSearchParams(window.location.search);
+
+          // Update params with form values
+          for (const [key, value] of formData.entries()) {
+            if (value) {
+              params.set(key, value);
+            } else {
+              params.delete(key);
+            }
+          }
+
+          // Reset to page 1 when filters change
+          params.set('page', '1');
+
+          // Update URL and reload
+          window.location.href = window.location.pathname + '?' + params.toString();
+        }
+      </script>
+    </div>
+  `;
+}
+
+// src/templates/index.ts
+init_admin_layout_catalyst_template();
+init_logo_template();
+
+export { renderFilterBar, renderForm, renderFormField };
+//# sourceMappingURL=chunk-LU6J53IX.js.map
+//# sourceMappingURL=chunk-LU6J53IX.js.map

package/dist/chunk-LU6J53IX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/templates/form.template.ts","../src/templates/filter-bar.template.ts","../src/templates/index.ts"],"names":[],"mappings":"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","file":"chunk-LU6J53IX.js","sourcesContent":["export interface FormField {\n  name: string\n  label: string\n  type: 'text' | 'email' | 'textarea' | 'select' | 'checkbox' | 'rich_text' | 'number' | 'date' | 'multi_select' | 'file'\n  value?: any\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  helpText?: string\n  options?: Array<{ value: string; label: string; selected?: boolean }>\n  rows?: number\n  className?: string\n  validation?: {\n    min?: number\n    max?: number\n    pattern?: string\n  }\n}\n\nexport interface FormData {\n  id?: string\n  action?: string\n  method?: string\n  hxPost?: string\n  hxPut?: string\n  hxTarget?: string\n  fields: FormField[]\n  submitButtons: Array<{\n    label: string\n    type?: 'submit' | 'button'\n    value?: string\n    name?: string\n    className?: string\n    onclick?: string\n  }>\n  title?: string\n  description?: string\n  className?: string\n}\n\nexport function renderForm(data: FormData): string {\n  return `\n    <form \n      ${data.id ? `id=\"${data.id}\"` : ''}\n      ${data.hxPost ? `hx-post=\"${data.hxPost}\"` : data.hxPut ? `hx-put=\"${data.hxPut}\"` : data.action ? `action=\"${data.action}\"` : ''}\n      ${data.hxTarget ? `hx-target=\"${data.hxTarget}\"` : ''}\n      method=\"${data.method || 'POST'}\"\n      class=\"${data.className || 'space-y-6'}\"\n      ${data.fields.some(f => f.type === 'file') ? 'enctype=\"multipart/form-data\"' : ''}\n    >\n      ${data.title ? `\n        <div class=\"mb-6\">\n          <h2 class=\"text-lg font-medium text-gray-1\">${data.title}</h2>\n          ${data.description ? `<p class=\"mt-1 text-sm text-gray-4\">${data.description}</p>` : ''}\n        </div>\n      ` : ''}\n      \n      <div id=\"form-messages\"></div>\n      \n      ${data.fields.map(field => renderFormField(field)).join('')}\n      \n      <div class=\"flex justify-between items-center pt-6 border-t border-gray-7\">\n        <div class=\"flex space-x-4\">\n          ${data.submitButtons.map(button => `\n            <button \n              type=\"${button.type || 'submit'}\"\n              ${button.name ? `name=\"${button.name}\"` : ''}\n              ${button.value ? `value=\"${button.value}\"` : ''}\n              ${button.onclick ? `onclick=\"${button.onclick}\"` : ''}\n              class=\"btn ${button.className || 'btn-primary'}\"\n            >\n              ${button.label}\n            </button>\n          `).join('')}\n        </div>\n      </div>\n    </form>\n  `\n}\n\nexport function renderFormField(field: FormField): string {\n  const fieldId = `field-${field.name}`\n  const required = field.required ? 'required' : ''\n  const readonly = field.readonly ? 'readonly' : ''\n  const placeholder = field.placeholder ? `placeholder=\"${field.placeholder}\"` : ''\n\n  let fieldHTML = ''\n\n  switch (field.type) {\n    case 'text':\n    case 'email':\n    case 'number':\n    case 'date':\n      fieldHTML = `\n        <input\n          type=\"${field.type === 'date' ? 'datetime-local' : field.type}\"\n          id=\"${fieldId}\"\n          name=\"${field.name}\"\n          value=\"${field.value || ''}\"\n          class=\"form-input ${field.className || ''}\"\n          ${placeholder}\n          ${required}\n          ${readonly}\n          ${field.validation?.min !== undefined ? `min=\"${field.validation.min}\"` : ''}\n          ${field.validation?.max !== undefined ? `max=\"${field.validation.max}\"` : ''}\n          ${field.validation?.pattern ? `pattern=\"${field.validation.pattern}\"` : ''}\n        >\n      `\n      break\n      \n    case 'textarea':\n      fieldHTML = `\n        <textarea \n          id=\"${fieldId}\"\n          name=\"${field.name}\" \n          class=\"form-textarea ${field.className || ''}\" \n          rows=\"${field.rows || 4}\"\n          ${placeholder}\n          ${required}\n        >${field.value || ''}</textarea>\n      `\n      break\n      \n    case 'rich_text':\n      const uniqueId = `${field.name}-${Date.now()}`\n      fieldHTML = `\n        <div class=\"markdown-field\">\n          <textarea id=\"${uniqueId}\" name=\"${field.name}\" class=\"form-textarea\" rows=\"8\">${field.value || ''}</textarea>\n          <script>\n            if (typeof EasyMDE !== 'undefined') {\n              new EasyMDE({\n                element: document.getElementById('${uniqueId}'),\n                minHeight: '300px',\n                spellChecker: false,\n                status: ['autosave', 'lines', 'words', 'cursor'],\n                autosave: {\n                  enabled: true,\n                  uniqueId: '${uniqueId}',\n                  delay: 1000\n                },\n                renderingConfig: {\n                  singleLineBreaks: false,\n                  codeSyntaxHighlighting: true\n                }\n              });\n            }\n          </script>\n        </div>\n      `\n      break\n      \n    case 'select':\n      fieldHTML = `\n        <select \n          id=\"${fieldId}\"\n          name=\"${field.name}\" \n          class=\"form-input ${field.className || ''}\" \n          ${required}\n        >\n          ${field.options ? field.options.map(option => `\n            <option value=\"${option.value}\" ${option.selected || field.value === option.value ? 'selected' : ''}>\n              ${option.label}\n            </option>\n          `).join('') : ''}\n        </select>\n      `\n      break\n      \n    case 'multi_select':\n      fieldHTML = `\n        <select \n          id=\"${fieldId}\"\n          name=\"${field.name}\" \n          class=\"form-input ${field.className || ''}\" \n          multiple \n          ${required}\n        >\n          ${field.options ? field.options.map(option => `\n            <option value=\"${option.value}\" ${option.selected ? 'selected' : ''}>\n              ${option.label}\n            </option>\n          `).join('') : ''}\n        </select>\n      `\n      break\n      \n    case 'checkbox':\n      fieldHTML = `\n        <input\n          type=\"checkbox\"\n          id=\"${fieldId}\"\n          name=\"${field.name}\"\n          value=\"1\"\n          class=\"size-4 rounded border border-white/15 bg-white/5 checked:border-transparent checked:bg-white disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-white/20 focus:ring-offset-2 ${field.className || ''}\"\n          ${field.value ? 'checked' : ''}\n          ${required}\n        >\n        <label for=\"${fieldId}\" class=\"ml-2 text-sm text-white\">${field.label}</label>\n      `\n      break\n      \n    default:\n      fieldHTML = `\n        <input \n          type=\"text\" \n          id=\"${fieldId}\"\n          name=\"${field.name}\" \n          value=\"${field.value || ''}\"\n          class=\"form-input ${field.className || ''}\" \n          ${placeholder} \n          ${required}\n        >\n      `\n      break\n  }\n  \n  // For checkbox, we handle the label differently\n  if (field.type === 'checkbox') {\n    return `\n      <div class=\"form-group\">\n        <div class=\"flex items-center\">\n          ${fieldHTML}\n        </div>\n        ${field.helpText ? `<p class=\"text-sm text-zinc-500 dark:text-zinc-400 mt-1 ml-6\">${field.helpText}</p>` : ''}\n      </div>\n    `\n  }\n\n  return `\n    <div class=\"form-group\">\n      <label for=\"${fieldId}\" class=\"form-label\">\n        ${field.label}${field.required ? ' *' : ''}\n      </label>\n      ${fieldHTML}\n      ${field.helpText ? `<p class=\"text-sm text-zinc-500 dark:text-zinc-400 mt-1\">${field.helpText}</p>` : ''}\n    </div>\n  `\n}","export interface FilterOption {\n  value: string\n  label: string\n  selected?: boolean\n  color?: string\n}\n\nexport interface Filter {\n  name: string\n  label: string\n  options: FilterOption[]\n}\n\nexport interface FilterBarData {\n  filters: Filter[]\n  actions?: Array<{\n    label: string\n    className?: string\n    onclick?: string\n    hxGet?: string\n    hxTarget?: string\n  }>\n  bulkActions?: Array<{\n    label: string\n    value: string\n    icon?: string\n    className?: string\n  }>\n}\n\nexport function renderFilterBar(data: FilterBarData): string {\n  return `\n    <div class=\"rounded-xl bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 p-6 mb-6\">\n      <form id=\"filter-form\" class=\"flex flex-wrap gap-4 items-center\">\n        ${data.filters.map(filter => `\n          <div class=\"flex items-center space-x-2\">\n            <label class=\"text-sm font-medium text-zinc-500 dark:text-zinc-400\">${filter.label}:</label>\n            <select\n              name=\"${filter.name}\"\n              class=\"rounded-lg bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-950 dark:text-white ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500 focus:outline-none transition-colors\"\n              onchange=\"updateFilters()\"\n            >\n              ${filter.options.map(option => `\n                <option value=\"${option.value}\" ${option.selected ? 'selected' : ''}>\n                  ${option.label}\n                </option>\n              `).join('')}\n            </select>\n          </div>\n        `).join('')}\n\n        ${data.actions && data.actions.length > 0 ? `\n          <div class=\"flex items-center space-x-2 ml-auto\">\n            ${data.actions.map(action => `\n              <button\n                type=\"button\"\n                class=\"inline-flex items-center rounded-lg bg-white dark:bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-950 dark:text-white ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors\"\n                ${action.onclick ? `onclick=\"${action.onclick}\"` : ''}\n                ${action.hxGet ? `hx-get=\"${action.hxGet}\"` : ''}\n                ${action.hxTarget ? `hx-target=\"${action.hxTarget}\"` : ''}\n              >\n                ${action.label}\n              </button>\n            `).join('')}\n          </div>\n        ` : ''}\n      </form>\n\n      <script>\n        function updateFilters() {\n          const form = document.getElementById('filter-form');\n          const formData = new FormData(form);\n          const params = new URLSearchParams(window.location.search);\n\n          // Update params with form values\n          for (const [key, value] of formData.entries()) {\n            if (value) {\n              params.set(key, value);\n            } else {\n              params.delete(key);\n            }\n          }\n\n          // Reset to page 1 when filters change\n          params.set('page', '1');\n\n          // Update URL and reload\n          window.location.href = window.location.pathname + '?' + params.toString();\n        }\n      </script>\n    </div>\n  `\n}","/**\n * Templates Module Exports\n *\n * Reusable HTML template components for SonicJS\n */\n\n// Form templates\nexport { renderForm, renderFormField } from './form.template'\nexport type { FormField, FormData } from './form.template'\n\n// Table templates\nexport { renderTable } from './table.template'\nexport type { TableColumn, TableData } from './table.template'\n\n// Pagination templates\nexport { renderPagination } from './pagination.template'\nexport type { PaginationData } from './pagination.template'\n\n// Alert templates\nexport { renderAlert } from './alert.template'\nexport type { AlertData } from './alert.template'\n\n// Confirmation dialog templates\nexport { renderConfirmationDialog, getConfirmationDialogScript } from './confirmation-dialog.template'\nexport type { ConfirmationDialogOptions } from './confirmation-dialog.template'\n\n// Filter bar templates\nexport { renderFilterBar } from './filter-bar.template'\nexport type { FilterBarData, Filter, FilterOption } from './filter-bar.template'\n\n// Layout templates\nexport { renderAdminLayout } from './layouts/admin-layout-v2.template'\nexport { renderAdminLayoutCatalyst } from './layouts/admin-layout-catalyst.template'\nexport type { AdminLayoutData } from './layouts/admin-layout-v2.template'\nexport type { AdminLayoutCatalystData } from './layouts/admin-layout-catalyst.template'\n\n// Component templates\nexport { renderLogo } from './components/logo.template'\n\n// Page templates - Admin\nexport { renderDesignPage } from './pages/admin-design.template'\nexport type { DesignPageData } from './pages/admin-design.template'\nexport { renderCheckboxPage } from './pages/admin-checkboxes.template'\nexport type { CheckboxPageData } from './pages/admin-checkboxes.template'\nexport { renderFAQList } from './pages/admin-faq-list.template'\nexport { renderTestimonialsList } from './pages/admin-testimonials-list.template'\nexport { renderCodeExamplesList } from './pages/admin-code-examples-list.template'\n"]}