p-elements-core 1.2.27 → 1.2.28

package/docs/src/scripts/components/app-mobile-menu/app-mobile-menu.tsx

@@ -0,0 +1,112 @@
+import css from "./app-mobile-menu.css";
+@CustomElementConfig({
+  tagName: "app-mobile-menu",
+})
+export class AppMobileMenuElement extends CustomElement {
+  static readonly style = css;
+
+  @Property({ type: "boolean", attribute: "open", reflect: true })
+  open: boolean = false;
+
+  @Property({ type: "number", attribute: "width", reflect: true })
+  width: number = 300;
+
+  updated(propertyName: string, oldValue: any, newValue: any): void {
+    if (propertyName === "open") {
+      this.positionMenu(newValue === true);
+    } else if (propertyName === "width") {
+      requestAnimationFrame(() => {
+        this.#dialog?.style.setProperty(
+          "--app-mobile-menu-width",
+          newValue ? `${newValue}px` : "300px"
+        );
+      });
+    }
+  }
+
+  positionMenu(open: boolean) {
+    requestAnimationFrame(() => {
+      if (!this.#dialog) {
+        this.#dialog = Maquette.dom.create(
+          <dialog
+            on={{
+              close: (e: Event) => {
+                const dlg = e.target as HTMLDialogElement;
+                dlg.classList.remove("open");
+                this.open = false;
+              },
+            }}
+          >
+            <div class="dialog-content">
+              <button onclick={() => this.#dialog.close()} class="close-button">
+                <svg
+                  width="2rem"
+                  height="2rem"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                 <path d="M18 6L6 18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/>
+                 <path d="M6 6L18 18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/>
+                </svg>
+                <slot name="close"></slot>
+              </button>
+              <slot></slot>
+            </div>
+          </dialog>
+        ).domNode as HTMLDialogElement;
+        this.shadowRoot.appendChild(this.#dialog);
+      }
+      if (open) {
+        this.#dialog?.showModal();
+        requestAnimationFrame(() => {
+          this.#dialog.classList.add("open");
+        });
+      }
+    });
+  }
+
+  render(): VNode {
+    return (
+      <div class="mobile-menu">
+        <button onclick={() => (this.open = !this.open)}>
+          <svg
+            width="1.4rem"
+            height="1.4rem"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M4 18L20 18"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+            />
+            <path
+              d="M4 12L20 12"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+            />
+            <path
+              d="M4 6L20 6"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+            />
+          </svg>
+        </button>
+        <div>
+          <slot name="open"></slot>
+        </div>
+      </div>
+    );
+  }
+
+  #dialog: HTMLDialogElement | null = null;
+
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}

package/docs/src/scripts/components/app-mode-switch/app-mode-switch.css

@@ -0,0 +1,78 @@
+:host {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  display: inline-block;
+ 
+}
+
+:host > div{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: .5rem;
+}
+
+
+.sun-and-moon > :is(.moon, .sun, .sun-beams) {
+  transform-origin: center center;
+}
+
+
+svg {
+  margin: auto;
+  stroke-linecap: round;
+}
+
+svg + div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:host([mode="light"]) .sun-and-moon > .sun {
+  transform: scale(1.75);
+}
+
+:host([mode="light"]) .sun-and-moon > .sun-beams {
+  opacity: 0;
+}
+
+:host([mode="light"]) .sun-and-moon > .moon > circle {
+  transform: translate(-7px);
+}
+
+/* Animations */
+
+:host([mode="dark"]) .sun-and-moon > .sun {
+  transition: transform 0.5s cubic-bezier(0.5, 1.25, 0.75, 1.25);
+}
+
+:host([mode="dark"]) .sun-and-moon > .sun-beams {
+  transition:
+    transform 0.5s cubic-bezier(0.5, 1.5, 0.75, 1.25),
+    opacity 0.5s cubic-bezier(0.25, 0, 0.3, 1);
+}
+
+:host([mode="darkt"]) .sun-and-moon .moon > circle {
+  transition: transform 0.25s cubic-bezier(0, 0, 0, 1);
+}
+
+:host([mode="light"]) .sun-and-moon > .sun {
+  transform: scale(1.75);
+  transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1);
+  transition-duration: 0.25s;
+}
+
+:host([mode="light"]) .sun-and-moon > .sun-beams {
+  transform: rotate(-25deg);
+  transition-duration: 0.15s;
+}
+
+:host([mode="light"]) .sun-and-moon > .moon > circle {
+  transition-delay: 0.25s;
+  transition-duration: 0.5s;
+}

package/docs/src/scripts/components/app-mode-switch/app-mode-switch.tsx

@@ -0,0 +1,166 @@
+import css from "./app-mode-switch.css";
+
+export enum ThemeMode {
+  Light = "light",
+  Dark = "dark",
+}
+
+interface AppModeSwitchEventMap {
+  modeChange: CustomEvent<{ mode: ThemeMode }>;
+  click: MouseEvent;
+}
+
+@CustomElementConfig({
+  tagName: "app-mode-switch",
+})
+export class AppModeSwitchElement extends CustomElement {
+  static readonly style = css;
+
+  @Property({ type: "string", attribute: "mode", reflect: true })
+  mode: ThemeMode = ThemeMode.Light;
+
+  render(): VNode {
+    return (
+      <div>
+        <svg
+          class="sun-and-moon"
+          aria-hidden="true"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+        >
+          <mask class="moon" id="moon-mask">
+            <rect x="0" y="0" width="100%" height="100%" fill="white"></rect>
+            <circle cx="24" cy="10" r="6" fill="black"></circle>
+          </mask>
+          <circle
+            class="sun"
+            cx="12"
+            cy="12"
+            r="6"
+            mask="url(#moon-mask)"
+            fill="currentColor"
+          ></circle>
+          <g class="sun-beams" stroke="currentColor">
+            <line x1="12" y1="1" x2="12" y2="3"></line>
+            <line x1="12" y1="21" x2="12" y2="23"></line>
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+            <line x1="1" y1="12" x2="3" y2="12"></line>
+            <line x1="21" y1="12" x2="23" y2="12"></line>
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+          </g>
+        </svg>
+        <div>
+          <slot name={this.mode === ThemeMode.Dark ? ThemeMode.Light : ThemeMode.Dark }></slot>
+        </div>
+      </div>
+    );
+  }
+
+  addEventListener<T extends keyof AppModeSwitchEventMap>(
+    type: T,
+    listener: (this: AppModeSwitchElement, ev: AppModeSwitchEventMap[T]) => any,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  addEventListener(
+    type: string,
+    listener: (this: AppModeSwitchElement, ev: Event) => any,
+    options?: boolean | AddEventListenerOptions
+  ): void {
+    super.addEventListener(type, listener, options);
+  }
+
+  private onClick = () => {
+    this.mode =
+      this.mode === ThemeMode.Light ? ThemeMode.Dark : ThemeMode.Light;
+  };
+
+  updated(propertyName: string, oldValue: any, newValue: any): void {
+    if (propertyName === "mode") {
+      this.dispatchEvent(
+        new CustomEvent("modeChange", { detail: { mode: newValue } })
+      );
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute("tabindex")) {
+      this.setAttribute("tabindex", "0");
+    }
+    this.setAttribute("role", "button");
+    this.addEventListener("click", this.onClick);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.onClick);
+  }
+}
+
+// init theme
+let currentTheme: ThemeMode;
+
+const darkSchemeMediaQueryList = window.matchMedia(
+  "(prefers-color-scheme: dark)"
+);
+
+function setTheme(theme: ThemeMode) {
+  if (currentTheme === theme) return;
+  currentTheme = theme;
+  document.documentElement.setAttribute("theme", theme);
+  if (systemTheme.startsWith(theme)) {
+    localStorage.removeItem("theme");
+  } else {
+    localStorage.setItem("theme", theme);
+  }
+}
+
+let systemTheme = darkSchemeMediaQueryList.matches
+  ? `${ThemeMode.Dark}-mode`
+  : `${ThemeMode.Light}-mode`;
+
+darkSchemeMediaQueryList.addEventListener("change", ({ matches }) => {
+  const modeSwitch =
+    document.querySelector<AppModeSwitchElement>("app-mode-switch");
+  if (matches) {
+    systemTheme = ThemeMode.Dark;
+    setTheme(ThemeMode.Dark);
+    if (modeSwitch){
+      modeSwitch.mode = ThemeMode.Dark;
+    }
+  } else {
+    systemTheme = ThemeMode.Light;
+    setTheme(ThemeMode.Light);
+    if (modeSwitch){
+      modeSwitch.mode = ThemeMode.Light;
+    }
+  }
+});
+
+const savedTheme = localStorage.getItem("theme") as ThemeMode;
+if (savedTheme) {
+  setTheme(savedTheme);
+} else {
+  setTheme(systemTheme.split("-")[0] as ThemeMode);
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  const modeSwitch =
+    document.querySelector<AppModeSwitchElement>("app-mode-switch");
+  if (!modeSwitch) return;
+  modeSwitch.mode = savedTheme
+    ? savedTheme
+    : (systemTheme.split("-")[0] as ThemeMode);
+  modeSwitch.addEventListener("modeChange", (e: CustomEventInit) => {
+    if (e.detail.mode === ThemeMode.Dark) {
+      setTheme(ThemeMode.Dark);
+    } else if (e.detail.mode === ThemeMode.Light) {
+      setTheme(ThemeMode.Light);
+    }
+  });
+});
+

package/docs/src/scripts/components/app-playground/app-playground.tsx

@@ -1,12 +1,36 @@
-import { forEach } from "underscore";
-
 @CustomElementConfig({
   tagName: "app-playground",
 })
 export class AppPlaygroundElement extends CustomElement {
+
+  static style = `
+  :host{
+    display: block;
+    height: 100%;
+  }
+  .app-playground{
+    height: 100%;
+  }
+  .app-playground-split-panel{
+    height: 100%;
+  }
+  playground-preview{
+    height: 100%;
+    position: unset;
+  }
+  .app-playground-editor-container{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+    .app-playground-editor{
+      height: 100%;
+      flex: 1;
+    }
+  `;
+
   constructor() {
     super();
-    this.#initDone = false;
     if (!this.id) {
       this.id = "app-playground-" + Math.floor(Math.random() * 1000);
     }
@@ -16,12 +40,6 @@ export class AppPlaygroundElement extends CustomElement {
 
   static readonly projectorMode = "replace";
 
-  #initDom() {
-    const div = document.createElement("div");
-    this.appendChild(div);
-    this.createProjector(div, this.render);
-  }
-
   #_playgroundLoaded = false;
 
   get #playgroundLoaded() {
@@ -42,6 +60,9 @@ export class AppPlaygroundElement extends CustomElement {
   @Property({ type: "object" })
   files: any = null;
 
+  @Property({ type: "string", attribute: "cdn-base-url", reflect: true })
+  cdnBaseUrl: string = null;
+
   updated(propertyName: string, oldValue: any, newValue: any): void {
     if (propertyName === "projectSrc" && newValue) {
       this.#loadProject(newValue);
@@ -116,52 +137,54 @@ export class AppPlaygroundElement extends CustomElement {
 
   render = () => {
     return (
-      <div afterCreate={this.#afterCreate}>
-        {this.#playgroundLoaded && (
-          <playground-project
-            cdn-base-url="https://cdn.jsdelivr.net/npm"
-            id={"project" + this.id}
-          >
-            {this.files?.map((file: any) => {
-              return (
-                <script
-                  key={file.name}
-                  type={this.#getType(file.name)}
-                  filename={file.name}
-                  innerHTML={file.content}
-                ></script>
-              );
-            })}
-          </playground-project>
-        )}
-        {this.#playgroundLoaded && (
-          <div>
-            <playground-tab-bar
-              id={"tab-bar" + this.id}
+      <div afterCreate={this.#afterCreate} class="app-playground">
+        
+        <app-split-panel class="app-playground-split-panel">
+          {this.#playgroundLoaded && (
+            [
+              <playground-project
+              class="app-playground-project"
+              cdn-base-url={
+                this.cdnBaseUrl ? this.cdnBaseUrl : "https://cdn.jsdelivr.net/npm"
+              }
+              id={"project" + this.id}
+            >
+              {this.files?.map((file: any) => {
+                return (
+                  <script
+                    key={file.name}
+                    type={this.#getType(file.name)}
+                    filename={file.name}
+                    innerHTML={file.content}
+                  ></script>
+                );
+              })}
+            </playground-project>,<playground-preview
+              slot="primary"
+              class="app-playground-preview"
               project={"project" + this.id}
-              editor={"editor" + this.id}
-            ></playground-tab-bar>
-          </div>
-        )}
-        {this.#playgroundLoaded && (
-          <playground-file-editor
-            id={"editor" + this.id}
-            project={"project" + this.id}
-          ></playground-file-editor>
-        )}
-        {this.#playgroundLoaded && (
-          <playground-preview
-            project={"project" + this.id}
-          ></playground-preview>
-        )}
+            ></playground-preview>]
+          )}
+            <div slot="secondary" class="app-playground-editor-container"> 
+            {this.#playgroundLoaded && (
+              <playground-tab-bar
+                class="app-playground-tab-bar"
+                id={"tab-bar" + this.id}
+                project={"project" + this.id}
+                editor={"editor" + this.id}
+              ></playground-tab-bar>
+            )}
+            {this.#playgroundLoaded && (
+              <playground-file-editor 
+                class="app-playground-editor"
+                id={"editor" + this.id}
+                project={"project" + this.id}
+              ></playground-file-editor>
+            )}
+            </div>
+          
+        </app-split-panel>
       </div>
     );
   };
-
-  connectedCallback(): void {
-    if (!this.#initDone) {
-      this.#initDom();
-      this.#initDone = true;
-    }
-  }
-}
+}

package/docs/src/scripts/components/app-split-panel/app-split-panel.css

@@ -0,0 +1,33 @@
+.split-panel {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  gap: 3px;
+}
+
+resize-bar {
+  background-color: var(--app-split-panel-resize-bar-color, #ccc);
+  z-index: 1;
+  flex: 0;
+  width: 4px;
+}
+
+#PrimaryPanel {
+  border-right: 1px solid var(--app-split-panel-border-color, #ccc);
+  /* padding-right: 1em; */
+}
+#SecondaryPanel {
+  border-left: 1px solid var(--app-split-panel-border-color, #ccc);
+  /* padding-left: 1em; */
+  overflow-x: auto;
+  flex: 1;
+}
+:host{
+  --resize-bar-touch-size: 6px;
+  --resize-bar-background-color: var(--app-split-panel-resize-bar-color, transparent);
+}
+
+.split-panel--horizontal #PrimaryPanel{
+  width: var(--primary-size);
+}

package/docs/src/scripts/components/app-split-panel/app-split-panel.tsx

@@ -0,0 +1,73 @@
+import css from "./app-split-panel.css";
+
+import "./resize-bar";
+
+@CustomElementConfig({
+  tagName: "app-split-panel",
+})
+export class AppSplitPanelElement extends CustomElement {
+  static readonly style = css;
+
+  
+  @Property({ type: "number", attribute: "min-width" })
+  minWidth = 300;
+
+  @Property({ type: "number", attribute: "primary-size" })
+  primarySize = 200;
+
+  @Property({ type: "number", attribute: "primary-min-size" })
+  primaryMinSize = 200;
+
+  updated(propertyName: string, oldValue: any, newValue: any): void {
+    if (propertyName === "primarySize") {
+      requestAnimationFrame(() => {
+        this.style.setProperty("--primary-size", `${newValue}px`);
+      });
+    } else if (propertyName === "primaryMinSize") {
+      requestAnimationFrame(() => {
+        this.shadowRoot.querySelector("resize-bar")?.setAttribute("min", `${newValue}`);
+      });
+    }
+  }
+
+  render(): VNode {
+    return (
+      <div classes={{"split-panel": true, "split-panel--horizontal": true}}>
+        <div id="PrimaryPanel">
+          <slot name="primary"></slot>
+        </div>
+        <resize-bar
+          property="width"
+          dimension="width"
+          target="PrimaryPanel" afterCreate={
+            (el: HTMLElement) => {
+              el.setAttribute("min", `${this.primaryMinSize}`);
+            }
+          }
+        ></resize-bar>
+        <div id="SecondaryPanel">
+          <slot name="secondary"></slot>
+        </div>
+      </div>
+    );
+  }
+
+  // connectedCallback(): void {
+  //   super.connectedCallback();
+    
+  //   const waitForPrimaryPanel = () => {
+  //     if (this.shadowRoot?.querySelector("#PrimaryPanel")) {
+  //       // PrimaryPanel exists, you can continue with any initialization here if needed
+  //       const resizeObserver = new ResizeObserver((entries) => {
+          
+  //       });
+  //       resizeObserver.observe(this.shadowRoot.querySelector("#PrimaryPanel"));
+  //     } else {
+  //       setTimeout(waitForPrimaryPanel, 50);
+  //     }
+  //   };
+  //   waitForPrimaryPanel();
+     
+  // }
+
+}