domma-cms 0.75.0 → 0.77.0

package/admin/js/templates/component-editor.html

@@ -1,148 +1,150 @@
-<div class="view-header">
-    <h1><span data-icon="component"></span> <span id="component-editor-title">New Component</span></h1>
-    <div style="display:flex;gap:.5rem;align-items:center;">
-        <select id="component-quick-switch" class="form-input form-input--sm"
-                title="Switch to another component"
-                style="display:none;max-width:260px;">
-            <option value="">Switch to…</option>
+<!-- Component editor. Bound with M.applyBindings - see admin/js/views/component-editor.js. No page
+     heading or Back button: the Tool banner ("Components › <name>") carries the title, Save (Ctrl+S),
+     Export and All components. Keep double-brace placeholders out of this file: the router renders it through _.render. -->
+<div class="cex">
+    <div class="cex-bar">
+        <span class="cex-status" data-bind-class="statusCls.value">
+            <span class="cex-dot" aria-hidden="true"></span><span data-bind-text="statusText.value">Compiling…</span>
+        </span>
+        <code class="cex-tag" data-bind-text="tagText.value"></code>
+        <span class="cex-chip is-warn" data-bind-hidden="!dirty.value">Unsaved</span>
+        <span class="cex-chip" data-bind-hidden="!readOnly.value">Read-only - from a plugin</span>
+        <span class="cex-spacer"></span>
+        <select id="component-quick-switch" class="form-input form-input--sm cex-switch" hidden
+                aria-label="Open another component" title="Open another component">
+            <option value="">Open another…</option>
         </select>
-        <a href="#/components" class="btn btn-ghost btn-sm">
-            <span data-icon="arrow-left"></span> All Components
-        </a>
-        <button id="export-component-btn" class="btn btn-ghost btn-sm" style="display:none;" title="Export as .dmcomponent.json">
-            <span data-icon="download"></span> Export
-        </button>
-        <button id="save-component-btn" class="btn btn-primary">
-            <span data-icon="save"></span> Save Component
-        </button>
     </div>
-</div>
 
-<!-- Name + meta -->
-<div class="card card-collapsible mb-3">
-    <div class="card-header">
-        <h2>Component Name</h2>
-        <span class="card-collapse-icon" data-icon="chevron-down"></span>
-    </div>
-    <div class="card-body" style="max-width:520px;">
-        <label class="form-label">Name <span style="color:var(--dm-danger,#f87171);">*</span></label>
-        <input id="component-name" type="text" class="form-input" placeholder="e.g. pricing-table">
-        <small class="text-muted">Registered as <code id="component-tag-hint">&lt;dm-…&gt;</code>. Lowercase letters, digits, and hyphens. Cannot be changed after creation.</small>
-        <div class="mt-3">
-            <label class="form-label">Project</label>
-            <select id="component-project" class="form-input">
-                <option value="">- none -</option>
-            </select>
-            <small class="text-muted">Tag this component to a project for grouping.</small>
-        </div>
-        <div class="mt-3">
-            <label class="form-check-label" title="Included in fresh installs via the seed script">
-                <input id="component-bundled" type="checkbox" class="form-check"> Bundled
-            </label>
-        </div>
-    </div>
-</div>
+    <p class="cex-alert" data-bind-hidden="!readOnly.value">
+        <span data-icon="lock" data-icon-size="14"></span>
+        This component comes from a plugin, so it cannot be changed here. <button type="button" class="btn btn-sm btn-ghost"
+        data-on-click="copyToNew">Copy to a new component</button> to make your own version.
+    </p>
 
-<!-- Editor body - tabs on the left, preview on the right -->
-<div class="card card-collapsible editor-card mb-3">
-    <div class="card-header">
-        <h2>Source</h2>
-        <span class="card-collapse-icon" data-icon="chevron-down"></span>
+    <div class="cex-unsaved" data-bind-hidden="!dirty.value">
+        <span>You have unsaved changes.</span>
+        <span class="cex-spacer"></span>
+        <button type="button" class="btn btn-sm btn-ghost" data-on-click="discard">Discard</button>
+        <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="saveBlocked.value">
+            <span data-icon="save" data-icon-size="13"></span> Save</button>
     </div>
-    <div class="card-body p-0">
 
-        <!-- Status / compile bar -->
-        <div id="component-status-bar" style="
-            display:flex;align-items:center;justify-content:space-between;gap:.75rem;
-            padding:.45rem .75rem;
-            border-bottom:1px solid var(--dm-border,rgba(255,255,255,.08));
-            background:var(--dm-background-alt,rgba(0,0,0,.05));
-            font-size:.78rem;">
+    <div class="cex-card">
+        <div class="cex-card-title">Details</div>
+        <div class="cex-grid">
             <div>
-                <span id="component-compile-indicator"
-                      style="display:inline-block;min-width:.7rem;height:.7rem;border-radius:50%;background:var(--dm-text-muted);margin-right:.4rem;"></span>
-                <span id="component-compile-status">Compiling…</span>
+                <label class="form-label" for="component-name">Name <span class="cex-req">*</span>
+                    <span data-help-title="Name" data-help="The component is used on a page as a tag made from its name - pricing-table becomes &lt;dm-pricing-table&gt;. Start with a letter; then lowercase letters, digits and hyphens. It cannot be changed once the component exists (every page that uses it names it)."></span></label>
+                <input id="component-name" type="text" class="form-input" placeholder="e.g. pricing-table" maxlength="64"
+                       data-model="name.value" data-bind-disabled="nameLocked.value">
+                <small class="cex-err" data-bind-hidden="!nameErr.value" data-bind-text="nameErr.value"></small>
+            </div>
+            <div>
+                <label class="form-label" for="component-project">Project
+                    <span data-help="File the component under a project - it then shows in that project's lists. Leave it on none for a site-wide one."></span></label>
+                <select id="component-project" class="form-input" data-model="project.value" data-bind-disabled="readOnly.value">
+                    <option value="">- none -</option>
+                </select>
+            </div>
+            <div class="cex-setting">
+                <label class="form-label" for="component-bundled">Bundled
+                    <span data-help="A bundled component is included in fresh installs by the seed script. Leave it off for one that belongs to this site only."></span></label>
+                <input id="component-bundled" type="checkbox" class="form-switch" data-model="bundled.value" data-bind-disabled="readOnly.value">
             </div>
-            <span id="component-cursor-pos" style="display:none;"></span>
         </div>
-        <pre id="component-compile-errors" hidden style="
-            margin:0;
-            padding:.75rem;
-            background:color-mix(in srgb, var(--dm-danger) 8%, transparent);
-            color:var(--dm-danger);
-            border-bottom:1px solid var(--dm-border,rgba(255,255,255,.08));
-            white-space:pre-wrap;
-            font-size:.78rem;
-            font-family:var(--dm-font-mono,monospace);"></pre>
-
-        <div style="display:flex;min-height:460px;">
-
-            <!-- Left: tabbed source editors -->
-            <div style="flex:1.4;display:flex;flex-direction:column;border-right:1px solid var(--dm-border,rgba(255,255,255,.08));">
+    </div>
 
-                <!-- Tab bar -->
-                <div id="component-tab-bar" role="tablist"
-                     style="display:flex;gap:.15rem;padding:.25rem .5rem 0;border-bottom:1px solid var(--dm-border,rgba(255,255,255,.08));">
-                    <button type="button" class="component-tab active" data-tab="template" role="tab" aria-selected="true">&lt;template&gt;</button>
-                    <button type="button" class="component-tab" data-tab="props" role="tab">&lt;props&gt;</button>
-                    <button type="button" class="component-tab" data-tab="script" role="tab">&lt;script&gt;</button>
-                    <button type="button" class="component-tab" data-tab="style" role="tab">&lt;style&gt;</button>
+    <div class="cex-card cex-source">
+        <div class="cex-card-title">Source
+            <span data-help-title="The four blocks" data-help="template: the markup, with a prop's name in double curly braces where its value goes. props: a JSON object - one entry per prop, each with a type (string, number, boolean, array, object), an optional default and a label. script: an optional export default with data() and methods. style: CSS scoped to the component. It recompiles as you type; a component that does not compile cannot be saved."></span>
+        </div>
+        <pre class="cex-errors" data-bind-hidden="!hasErrors.value" data-bind-text="compileErrors.value"></pre>
+        <div class="cex-split">
+            <div class="cex-editors">
+                <div class="cex-tabs" role="tablist" aria-label="Source blocks">
+                    <button type="button" class="cex-tab" role="tab" data-on-click="showTab('template')" data-bind-class="activeTab.value === 'template' && 'is-on'">&lt;template&gt;</button>
+                    <button type="button" class="cex-tab" role="tab" data-on-click="showTab('props')" data-bind-class="activeTab.value === 'props' && 'is-on'">&lt;props&gt;</button>
+                    <button type="button" class="cex-tab" role="tab" data-on-click="showTab('script')" data-bind-class="activeTab.value === 'script' && 'is-on'">&lt;script&gt;</button>
+                    <button type="button" class="cex-tab" role="tab" data-on-click="showTab('style')" data-bind-class="activeTab.value === 'style' && 'is-on'">&lt;style&gt;</button>
                 </div>
-
-                <!-- One simple-editor mount per tab. CSS Grid stacks all four
-                     panes in the same 1×1 cell so switching tabs is just a
-                     `hidden` attribute flip. Vertical resize handle lets users
-                     drag the editor as tall as they want. -->
-                <div id="component-editor-surface"
-                     style="height:min(72vh, 860px);min-height:360px;resize:vertical;overflow:hidden;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;">
-                    <div id="component-src-template" class="component-tab-pane" data-pane="template"
-                         style="grid-column:1/2;grid-row:1/2;min-height:0;overflow:hidden;"></div>
-                    <div id="component-src-props"    class="component-tab-pane" data-pane="props"    hidden
-                         style="grid-column:1/2;grid-row:1/2;min-height:0;overflow:hidden;"></div>
-                    <div id="component-src-script"   class="component-tab-pane" data-pane="script"   hidden
-                         style="grid-column:1/2;grid-row:1/2;min-height:0;overflow:hidden;"></div>
-                    <div id="component-src-style"    class="component-tab-pane" data-pane="style"    hidden
-                         style="grid-column:1/2;grid-row:1/2;min-height:0;overflow:hidden;"></div>
+                <!-- Four simple-editors stacked in one grid cell; switching tabs flips `hidden`. -->
+                <div class="cex-surface">
+                    <div id="component-src-template" class="cex-pane" data-bind-hidden="activeTab.value !== 'template'"></div>
+                    <div id="component-src-props" class="cex-pane" data-bind-hidden="activeTab.value !== 'props'"></div>
+                    <div id="component-src-script" class="cex-pane" data-bind-hidden="activeTab.value !== 'script'"></div>
+                    <div id="component-src-style" class="cex-pane" data-bind-hidden="activeTab.value !== 'style'"></div>
                 </div>
             </div>
-
-            <!-- Right: iframe preview + props panel -->
-            <div style="flex:1;display:flex;flex-direction:column;min-width:260px;">
-
-                <div style="padding:.4rem .75rem;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--dm-text-muted,#888);border-bottom:1px solid var(--dm-border,rgba(255,255,255,.08));">
-                    Live preview
-                </div>
-                <iframe id="component-preview-iframe"
-                        src="/admin/preview/component-preview.html"
-                        style="flex:1;min-height:200px;border:0;background:var(--dm-surface,#fff);"></iframe>
-
-                <div style="padding:.4rem .75rem;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--dm-text-muted,#888);border-top:1px solid var(--dm-border,rgba(255,255,255,.08));border-bottom:1px solid var(--dm-border,rgba(255,255,255,.08));">
-                    Preview props
-                </div>
-                <div id="component-preview-props-panel" style="padding:.75rem;overflow-y:auto;max-height:260px;">
-                    <p class="text-muted" style="font-size:.8rem;margin:0;">Declare props in the <code>&lt;props&gt;</code> tab to populate this panel.</p>
+            <div class="cex-preview">
+                <div class="cex-head">Live preview
+                    <span data-help="The component as a page would show it, rebuilt after every change. Try props in the panel below without touching the source."></span></div>
+                <iframe id="component-preview-iframe" src="/admin/preview/component-preview.html" title="Live preview"></iframe>
+                <div class="cex-head">Preview props
+                    <span data-help="One row per prop from the props block. Change a value to see it in the preview - it is not saved. Right-click a row (or ⋮, or Shift+F10) to reset it, copy it as an attribute or as a whole tag, or jump to it in the props block."></span></div>
+                <div id="component-preview-props-panel" class="cex-props">
+                    <p class="cex-note">Declare props in the &lt;props&gt; tab to see them here.</p>
                 </div>
             </div>
-
         </div>
     </div>
 </div>
 
 <style>
-.component-tab {
-    background:transparent;border:none;padding:.4rem .75rem;
-    font-size:.8rem;color:var(--dm-text-muted,#aaa);cursor:pointer;
-    border-bottom:2px solid transparent;margin-bottom:-1px;
-    font-family:var(--dm-font-mono,monospace);
+.cex { display: flex; flex-direction: column; gap: .75rem; }
+.cex [hidden] { display: none !important; }
+.cex-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
+.cex-spacer { flex: 1; }
+.cex-status { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--dm-text-sm); color: var(--dm-text-muted); }
+.cex-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--dm-text-muted); }
+.cex-status.is-ok .cex-dot { background: var(--dm-success); }
+.cex-status.is-error { color: var(--dm-danger); }
+.cex-status.is-error .cex-dot { background: var(--dm-danger); }
+.cex-tag { font-size: var(--dm-text-sm); }
+.cex-chip { display: inline-flex; align-items: center; font-size: var(--dm-text-xs); font-weight: 600; padding: .1rem .5rem; border-radius: 999px;
+    background: color-mix(in srgb, var(--dm-text) 10%, transparent); color: var(--dm-text-muted); white-space: nowrap; }
+.cex-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.cex-switch { width: auto; max-width: 16rem; }
+.cex-alert { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .55rem .8rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-info, var(--dm-primary)) 12%, transparent); color: var(--dm-text); font-size: var(--dm-text-sm); }
+.cex-unsaved { display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-warning) 14%, transparent); color: var(--dm-text); font-size: var(--dm-text-sm); }
+.cex-unsaved .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.cex-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.cex-card-title { display: flex; align-items: center; gap: .3rem; font-weight: 600; }
+.cex-grid { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 1fr) auto; gap: .85rem; align-items: start; }
+.cex-grid .form-label { display: flex; align-items: center; gap: .3rem; }
+.cex-req { color: var(--dm-danger); }
+.cex-err { display: block; margin-top: .25rem; color: var(--dm-danger); font-size: var(--dm-text-xs); }
+.cex-setting { display: flex; flex-direction: column; gap: .35rem; }
+.cex-errors { margin: 0; padding: .6rem .75rem; border-radius: var(--dm-radius-sm); white-space: pre-wrap; font-size: var(--dm-text-xs);
+    font-family: var(--dm-font-mono, monospace); background: color-mix(in srgb, var(--dm-danger) 10%, transparent); color: var(--dm-danger); }
+.cex-split { display: flex; min-height: 460px; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm); overflow: hidden; }
+.cex-editors { flex: 1.4; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--dm-border); }
+.cex-tabs { display: flex; gap: .15rem; padding: .25rem .5rem 0; border-bottom: 1px solid var(--dm-border); }
+.cex-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: .4rem .75rem; cursor: pointer;
+    font: inherit; font-size: var(--dm-text-sm); font-family: var(--dm-font-mono, monospace); color: var(--dm-text-muted); }
+.cex-tab:hover { color: var(--dm-text); }
+.cex-tab.is-on { color: var(--dm-text); border-bottom-color: var(--dm-primary); font-weight: 600; }
+.cex-surface { height: min(72vh, 860px); min-height: 360px; resize: vertical; overflow: hidden; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; }
+.cex-pane { grid-column: 1 / 2; grid-row: 1 / 2; min-height: 0; overflow: hidden; }
+.cex-preview { flex: 1; display: flex; flex-direction: column; min-width: 260px; }
+.cex-head { display: flex; align-items: center; gap: .3rem; padding: .4rem .75rem; font-size: var(--dm-text-xs); letter-spacing: .05em; text-transform: uppercase;
+    color: var(--dm-text-muted); border-bottom: 1px solid var(--dm-border); }
+.cex-head + iframe + .cex-head { border-top: 1px solid var(--dm-border); }
+.cex-preview iframe { flex: 1; min-height: 200px; border: 0; background: var(--dm-surface); }
+.cex-props { padding: .5rem .5rem .75rem; overflow-y: auto; max-height: 260px; }
+.cex-note { margin: 0; padding: .25rem; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.cex-prop { display: flex; align-items: center; gap: .5rem; padding: .3rem .25rem; border-radius: var(--dm-radius-sm); }
+.cex-prop:hover, .cex-prop:focus-within, .cex-prop:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.cex-prop-label { min-width: 7.5rem; font-size: var(--dm-text-xs); color: var(--dm-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cex-prop-input { flex: 1; font-family: inherit; }
+textarea.cex-prop-input { font-family: var(--dm-font-mono, monospace); }
+.cex-kebab { border: 0; background: none; cursor: pointer; font-size: var(--dm-text-lg); color: var(--dm-text-muted); border-radius: var(--dm-radius-sm); padding: 0 .3rem; }
+.cex-kebab:hover { color: var(--dm-primary); }
+@media (max-width: 900px) {
+    .cex-split { flex-direction: column; }
+    .cex-editors { border-right: 0; border-bottom: 1px solid var(--dm-border); }
+    .cex-grid { grid-template-columns: 1fr; }
 }
-.component-tab.active {
-    color:var(--dm-text,inherit);
-    border-bottom-color:var(--dm-primary,#5aa8ff);
-    font-weight:600;
-}
-.component-tab:hover:not(.active) { color:var(--dm-text,inherit); }
-
-/* Layout-critical rules are inline on the elements above so they survive any
-   templater/sanitiser that may swallow <style> blocks. This one is cosmetic. */
-.component-tab-pane[hidden] { display:none; }
 </style>