@kubex/zinc 1.0.104 → 1.0.105

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.0.104",
+  "version": "1.0.105",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/markdown-editor/markdown-editor.component.ts

@@ -3,18 +3,19 @@ import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {defaultValue} from "../../internal/default-value";
 import {FormControlController} from "../../internal/form";
 import {HasSlotController} from "../../internal/slot";
+import {ifDefined} from "lit/directives/if-defined.js";
 import {marked} from "marked";
-import {property, query, state} from 'lit/decorators.js';
+import {property, query} from 'lit/decorators.js';
 import {watch} from "../../internal/watch";
-import ZincElement from '../../internal/zinc-element';
 import type {ZincFormControl} from '../../internal/zinc-element';
 import type ZnTextarea from "../textarea";
 
 import styles from './markdown-editor.scss';
+import ZnPanel from "../panel/panel.component";
 
 type ViewMode = 'editor' | 'split' | 'preview';
 
-const VIEW_MODES: {mode: ViewMode; icon: string; label: string}[] = [
+const VIEW_MODES: { mode: ViewMode; icon: string; label: string }[] = [
   {mode: 'editor', icon: 'edit_note', label: 'Editor'},
   {mode: 'split', icon: 'vertical_split', label: 'Split'},
   {mode: 'preview', icon: 'visibility', label: 'Preview'},
@@ -42,13 +43,13 @@ const VIEW_MODES: {mode: ViewMode; icon: string; label: string}[] = [
  * @csspart editor - The textarea wrapper.
  * @csspart preview - The rendered markdown preview.
  */
-export default class ZnMarkdownEditor extends ZincElement implements ZincFormControl {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+export default class ZnMarkdownEditor extends ZnPanel implements ZincFormControl {
+  static styles: CSSResultGroup = [ZnPanel.styles as CSSResultGroup, unsafeCSS(styles)];
 
   private readonly formControlController = new FormControlController(this, {
     assumeInteractionOn: ['zn-input', 'zn-change'],
   });
-  private readonly hasSlotController = new HasSlotController(this, 'label', 'help-text');
+  private readonly markdownSlotController = new HasSlotController(this, 'label', 'help-text', 'actions', 'footer');
 
   private debounceTimer: ReturnType<typeof setTimeout> | null = null;
 
@@ -95,7 +96,7 @@ export default class ZnMarkdownEditor extends ZincElement implements ZincFormCon
   @property({type: Boolean, reflect: true}) disabled = false;
 
   /** Whether the editor is currently expanded to cover its containing positioned ancestor. */
-  @state() expanded = false;
+  @property({type: Boolean, reflect: true}) expanded = false;
 
   get validity(): ValidityState {
     return this.textarea?.validity;
@@ -151,15 +152,18 @@ export default class ZnMarkdownEditor extends ZincElement implements ZincFormCon
 
     const stored = this.readStoredViewMode();
     if (stored) this.viewMode = stored;
+
+    this.addEventListener('toggle', this.handleExpandToggle as EventListener);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     if (this.debounceTimer) clearTimeout(this.debounceTimer);
+    this.removeEventListener('toggle', this.handleExpandToggle as EventListener);
   }
 
   protected firstUpdated(_changedProperties: PropertyValues) {
-    void _changedProperties;
+    super.firstUpdated(_changedProperties);
     this.formControlController.updateValidity();
     if (this.viewMode !== 'editor') this.renderPreview();
   }
@@ -240,70 +244,109 @@ export default class ZnMarkdownEditor extends ZincElement implements ZincFormCon
   }
 
   render() {
-    const hasLabelSlot = this.hasSlotController.test('label');
-    const hasHelpSlot = this.hasSlotController.test('help-text');
+    const hasLabelSlot = this.markdownSlotController.test('label');
+    const hasHelpSlot = this.markdownSlotController.test('help-text');
+    const hasActionSlot = this.markdownSlotController.test('actions');
+    const hasFooterSlot = this.markdownSlotController.test('footer');
     const hasLabel = !!this.label || hasLabelSlot;
     const hasHelpText = !!this.helpText || hasHelpSlot;
+    const hasHeader = !!this.caption || hasActionSlot;
     const showEditor = this.viewMode === 'editor' || this.viewMode === 'split';
     const showPreview = this.viewMode === 'preview' || this.viewMode === 'split';
 
     return html`
-      <div part="base"
-           class=${classMap({
-             'markdown-editor': true,
-             'markdown-editor--expanded': this.expanded,
-             'markdown-editor--split': this.viewMode === 'split',
-             'markdown-editor--preview-only': this.viewMode === 'preview',
-           })}>
-        ${hasLabel ? html`
-          <label class="markdown-editor__label">
-            <slot name="label">${this.label}</slot>
-          </label>` : ''}
-
-        <div part="toolbar" class="markdown-editor__toolbar">
-          <zn-button-group class="markdown-editor__view-toggle" @click=${this.handleViewToggle}>
-            ${VIEW_MODES.map(v => this.renderViewButton(v.mode, v.icon, v.label))}
-          </zn-button-group>
-          <zn-button
-            class="markdown-editor__expand-btn"
-            type="button"
-            size="medium"
-            color="secondary"
-            icon=${this.expanded ? 'close_fullscreen' : 'open_in_full'}
-            icon-size="18"
-            tooltip=${this.expanded ? 'Collapse' : 'Expand'}
-            @click=${this.handleExpandToggle}
-          ></zn-button>
-        </div>
-
-        <div class="markdown-editor__body">
-          <div part="editor"
-               class="markdown-editor__editor"
-               ?hidden=${!showEditor}>
-            <zn-textarea
-              .value=${this.value}
-              name=${this.name || ''}
-              placeholder=${this.placeholder}
-              rows=${this.rows}
-              resize="auto"
-              ?required=${this.required}
-              ?readonly=${this.readonly}
-              ?disabled=${this.disabled}
-              @zn-input=${this.handleInput}
-              @zn-change=${this.handleChange}
-            ></zn-textarea>
+      <div part="base" class=${classMap({
+        panel: true,
+        'panel--flush': this.flush || this.tabbed,
+        'panel--flush-x': this.flushX,
+        'panel--flush-y': this.flushY,
+        'panel--flush-footer': this.flushFooter,
+        'panel--tabbed': this.tabbed,
+        'panel--transparent': this.transparent,
+        'panel--has-actions': hasActionSlot,
+        'panel--has-footer': hasFooterSlot,
+        'panel--has-header': hasHeader,
+        'panel--cosmic': this.cosmic,
+        'panel--shadow': this.shadow,
+      })}>
+        <div class="panel__inner">
+          ${hasHeader ? html`
+            <zn-header class=${classMap({
+              panel__header: true,
+              'panel__header--underline': this.underlineHeader,
+            })}
+                       icon=${this.icon}
+                       caption=${this.caption}
+                       description=${ifDefined(this.description)}
+                       transparent>
+              ${hasActionSlot ? html`
+                <slot name="actions" slot="actions" class="panel__header__actions"></slot>` : null}
+            </zn-header>` : null}
+
+          <div class="panel__content">
+            <div class="panel__body">
+              <div class=${classMap({
+                'markdown-editor': true,
+                'markdown-editor--split': this.viewMode === 'split',
+                'markdown-editor--preview-only': this.viewMode === 'preview',
+                'markdown-editor--expanded': this.expanded,
+              })}>
+                ${hasLabel ? html`
+                  <label class="markdown-editor__label">
+                    <slot name="label">${this.label}</slot>
+                  </label>` : ''}
+
+                <div part="toolbar" class="markdown-editor__toolbar">
+                  <zn-button-group class="markdown-editor__view-toggle" @click=${this.handleViewToggle}>
+                    ${VIEW_MODES.map(v => this.renderViewButton(v.mode, v.icon, v.label))}
+                  </zn-button-group>
+                  <zn-button
+                    class="markdown-editor__expand-btn"
+                    type="button"
+                    size="medium"
+                    color="secondary"
+                    icon=${this.expanded ? 'close_fullscreen' : 'open_in_full'}
+                    icon-size="18"
+                    tooltip=${this.expanded ? 'Collapse' : 'Expand'}
+                    @click=${this.handleExpandToggle}
+                  ></zn-button>
+                </div>
+
+                <div class="markdown-editor__body">
+                  <div part="editor"
+                       class="markdown-editor__editor"
+                       ?hidden=${!showEditor}>
+                    <zn-textarea
+                      .value=${this.value}
+                      name=${this.name || ''}
+                      placeholder=${this.placeholder}
+                      rows=${this.rows}
+                      resize="auto"
+                      ?required=${this.required}
+                      ?readonly=${this.readonly}
+                      ?disabled=${this.disabled}
+                      @zn-input=${this.handleInput}
+                      @zn-change=${this.handleChange}
+                    ></zn-textarea>
+                  </div>
+                  <div part="preview"
+                       class="markdown-editor__preview-wrapper"
+                       ?hidden=${!showPreview}>
+                    <div class="markdown-editor__preview"></div>
+                  </div>
+                </div>
+
+                ${hasHelpText ? html`
+                  <div class="markdown-editor__help-text">
+                    <slot name="help-text">${this.helpText}</slot>
+                  </div>` : ''}
+              </div>
+            </div>
           </div>
-          <div part="preview"
-               class="markdown-editor__preview-wrapper"
-               ?hidden=${!showPreview}>
-            <div class="markdown-editor__preview"></div>
-          </div>
-        </div>
 
-        ${hasHelpText ? html`
-          <div class="markdown-editor__help-text">
-            <slot name="help-text">${this.helpText}</slot>
-          </div>` : ''}
+          ${hasFooterSlot ? html`
+            <slot name="footer" class="panel__footer"></slot>` : null}
+        </div>
       </div>
     `;
   }

package/src/components/markdown-editor/markdown-editor.scss

@@ -1,10 +1,9 @@
 @use "../../wc";
 
-:host {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-height: 0;
+.panel {
+  border: 1px solid rgb(var(--zn-border-color));
+  background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
+  border-radius: var(--zn-border-radius-large);
 }
 
 .markdown-editor {
@@ -16,15 +15,25 @@
   min-height: 0;
 }
 
-.markdown-editor--expanded {
-  position: fixed;
-  inset: 10px;
-  z-index: 9999;
-  background: var(--zn-panel-background-color, var(--zn-color-neutral-0, #fff));
-  border: 1px solid var(--zn-color-neutral-300);
-  border-radius: var(--zn-border-radius-medium);
-  padding: var(--zn-spacing-medium);
-  box-shadow: var(--zn-shadow-large);
+:host([expanded]) {
+  position: absolute;
+  top: 10px;
+  bottom: 10px;
+  left: var(--zn-sp-padding);
+  right: var(--zn-sp-padding);
+  z-index: var(--zn-z-index-editor-action, 1000000);
+}
+
+:host([expanded]) .panel,
+:host([expanded]) .panel__inner,
+:host([expanded]) .panel__content,
+:host([expanded]) .panel__body {
+  height: 100%;
+  max-height: 100%;
+}
+
+:host([expanded]) .markdown-editor {
+  height: 100%;
 }
 
 .markdown-editor__label {
@@ -200,13 +209,3 @@
   font-size: var(--zn-input-help-text-font-size-medium);
   color: var(--zn-input-help-text-color);
 }
-
-.markdown-editor--expanded .markdown-editor__body {
-  min-height: 0;
-  flex: 1;
-}
-
-.markdown-editor--expanded .markdown-editor__editor zn-textarea,
-.markdown-editor--expanded .markdown-editor__preview {
-  min-height: calc(100vh - 200px);
-}