p-elements-core 2.1.0-rc8 → 2.1.0

package/src/sample/sample.tsx

@@ -1,450 +0,0 @@
-// @ts-nocheck
-import { Highlightable } from "./mixin/highlight";
-import "./animate";
-
-import { customElementConfig as CustomElementConfig } from "../decorators/custom-element-config";
-import {
-  property as Property,
-  AttributeConverter,
-} from "../decorators/property";
-import { propertyRenderOnSet as PropertyRenderOnSet } from "../decorators/render-property-on-set";
-import { query as Query } from "../decorators/query";
-import { CustomElement } from "../custom-element";
-import { CustomElementController } from "../custom-element-controller";
-import { has } from "underscore";
-import { dom } from "../maquette";
-
-@CustomElementConfig({
-  tagName: "my-button",
-})
-export class MyButton extends CustomElement {
-  static style = `.foo{background-color: red; color: white; border: 0px;}`;
-  static delegatesFocus = true;
-
-  render = () => {
-    return (
-      <button class="foo">
-        <slot></slot>
-      </button>
-    );
-  };
-  connectedCallback(): void {
-    super.connectedCallback();
-  }
-}
-
-@CustomElementConfig({
-  tagName: "my-greetings",
-})
-export class MyGreetings extends Highlightable(class extends CustomElement {}) {
-  static isFormAssociated = true;
-
-  private count: number = 1;
-
-  @PropertyRenderOnSet
-  private name: string = "";
-
-  @PropertyRenderOnSet
-  public foo: string = "foo";
-
-  private onInput = (e) => {
-    this.name = e.target.value;
-  };
-
-  @Query("#SlotContainer")
-  private slotContainer: HTMLDivElement;
-
-  private enterAnimation(domNode, properties) {
-    domNode.animate(
-      [
-        // keyframes
-        { transform: "translateY(800px)" },
-        { transform: "translateY(0px)" },
-      ],
-      {
-        // timing options
-        duration: 1000,
-        iterations: 1,
-      },
-    );
-  }
-
-  private exitAnimation(domNode, removeDomNodeFunction, properties) {
-    console.log("exit animation", { domNode, properties });
-
-    domNode
-      .animate(
-        [
-          // keyframes
-          { opacity: 1, scale: 1 },
-          { opacity: 0, scale: 0 },
-        ],
-        {
-          // timing options
-          duration: 1000,
-          iterations: 1,
-        },
-      )
-      .finished.then(() => {
-        removeDomNodeFunction(domNode);
-        console.log("removed");
-      });
-  }
-
-  private countUpdateAnimation(domNode, properties, previousProperties) {
-    const newspaperSpinning = [
-      { transform: "rotate(0) scale(0)" },
-      { transform: "rotate(360deg) scale(1)" },
-    ];
-
-    const newspaperTiming = {
-      duration: 1000,
-      iterations: 1,
-    };
-
-    domNode.animate(newspaperSpinning, newspaperTiming);
-  }
-
-  private onPeterClick = (e) => {
-    console.log({ e, p: this });
-  };
-
-  private render = () => {
-    return (
-      <div >
-        <input type="checkbox" checked={this.name === "Peter"} />
-        <h1 part="sample" on={{ click: (e) => console.log(e, this.slotContainer) }} id="Foo">
-          Hallo:
-        </h1>
-
-        <h1
-          data-force-event-handler="true"
-          onclick={() => console.log("click " + this.name)}
-          data-title={this.name && this.name.toLocaleUpperCase()}
-          class="title"
-        >
-          {this.foo} {this.name}
-        </h1>
-        <p data-count={this.count} updateAnimation={this.countUpdateAnimation}>
-          {this.count}
-        </p>
-        <div id="SlotContainer">
-          <slot></slot>
-        </div>
-        <p
-          eventListeners={[
-            ["mouseenter", () => console.log("enter"), { once: true }],
-            ["mouseleave", () => console.log("leave"), { once: true }],
-          ]}
-        >
-          Please enter your name (hint type{" "}
-          <em>
-            <strong>Peter</strong>
-          </em>
-          )<br />
-          <input type="text" value={this.name} oninput={this.onInput} />
-        </p>
-        <p>
-          <a is="super-a">Super a</a>
-        </p>
-        {this.name &&
-        this.name.toLowerCase &&
-        this.name.toLowerCase().indexOf("peter") > -1 ? (
-          <div
-            key="peter"
-            afterRemoved={this.peterRemoved}
-            afterCreate={this.peterCreate}
-            class="is-peter"
-            eventListeners={[["click", this.onPeterClick]]}
-            enterAnimation={this.enterAnimation}
-            exitAnimation={this.exitAnimation}
-          >
-            <p>Hello Peter</p>
-            <img
-              class="is-peter--image"
-              src="https://s-media-cache-ak0.pinimg.com/474x/ce/1d/07/ce1d07011c0afb8e0614a0ae42a8c861.jpg"
-              height="140"
-            />
-          </div>
-        ) : (
-          ""
-        )}
-      </div>
-    );
-  };
-
-  private peterRemoved() {
-    console.log("removed");
-  }
-
-  private peterCreate() {
-    console.log("create");
-  }
-
-  #initDone = false;
-
-  connectedCallback() {
-    if (!this.#initDone) {
-      this.#initDone = true;
-      let template = this.templateFromString(`
-      <style>
-
-        :host{
-          /* display: none; */
-        }
-
-        .root {
-          display: flex;
-          padding: 10px;
-          flex-direction: row;
-        }
-
-        #Foo {
-          text-decoration: underline;
-        }
-
-        #SlotContainer ::slotted(*) {
-          font-weight: bold;
-          color: green;
-          font-size: 1.5em;
-        }
-
-      </style>
-      <div class="root"></div>
-    `);
-
-      this.shadowRoot.appendChild(template);
-
-      this.createProjector(this.shadowRoot.querySelector(".root"), this.render);
-    }
-    setInterval(() => {
-      this.count++;
-      this.renderNow();
-    }, 5000);
-
-    window.addEventListener("foo", this.onFooEvent);
-  }
-
-  private onFooEvent = (e: CustomEvent) => {
-    this.foo = e.detail.foo;
-  };
-
-  static get observedAttributes() {
-    return ["name"];
-  }
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    super.attributeChangedCallback(name, oldValue, newValue);
-    if (name === "name") {
-      this.name = newValue;
-    }
-  }
-}
-
-const stringArrayConverter: AttributeConverter<string[]> = {
-  fromAttribute: (value) => {
-    if (!value) {
-      return null;
-    }
-    return value.split(",").map((v) => v.trim());
-  },
-  toAttribute: (value) => {
-    if (!value.join) {
-      return null;
-    }
-    return value.join(",");
-  },
-};
-
-class DisabledController extends CustomElementController {
-  #connected = false;
-
-  @Property({ type: "boolean" })
-  disabled = false;
-
-  #updateAttributes() {
-    if (!this.#connected) {
-      return;
-    }
-    if (this.disabled === true) {
-      this.hostElement.setAttribute("disabled", "!!");
-    } else {
-      this.hostElement.removeAttribute("disabled");
-    }
-  }
-
-  connected() {
-    console.log("connected");
-    this.#connected = true;
-    this.#updateAttributes();
-  }
-
-  disconnected() {
-    console.info("disconnected");
-    this.#connected = false;
-  }
-
-  shouldUpdate(property, oldValue, newValue) {
-    console.info("shouldUpdate", { property, oldValue, newValue });
-    return true;
-  }
-
-  updated(property, oldValue, newValue) {
-    console.info("updated", { property, oldValue, newValue });
-    this.#updateAttributes();
-  }
-
-  hostRenderStart(isFirstRender) {
-    console.info("hostRenderStart", { isFirstRender, controller: this });
-  }
-
-  hostRenderDone(isFirstRender) {
-    console.info("hostRenderDone", { isFirstRender, controller: this });
-  }
-}
-
-@CustomElementConfig({
-  tagName: "p-foo",
-})
-class PFoo extends CustomElement {
-  static style = `.foo{color: red} .foo__disabled{opacity: 0.5;}`;
-
-  init() {
-    console.info("init!!!!");
-  }
-
-  disabledController: DisabledController = new DisabledController(this);
-
-  @Property({ type: "string", attribute: "name", reflect: true })
-  name: string;
-
-  @Property({ type: "number", attribute: "age", reflect: true })
-  age: number;
-
-  @Property({ type: "object", attribute: "data", reflect: true })
-  data: any;
-
-  @Property({
-    attribute: "items",
-    type: "object",
-    reflect: true,
-    converter: stringArrayConverter,
-  })
-  items: string[] = ["foo", "bar"];
-
-  @Property({ type: "string", attribute: "nick-name", readonly: true })
-  nickName: string = "de prutser";
-
-  shouldUpdate(property, oldValue, newValue) {
-    if (
-      property === "name" &&
-      typeof newValue === "string" &&
-      newValue.toLocaleLowerCase() === "adolf"
-    ) {
-      return false;
-    }
-    return true;
-  }
-
-  updated(property, oldValue, newValue) {
-    console.info("PFoo", { name: property, old: oldValue, newValue });
-  }
-
-  static observedAttributes = ["disabled"];
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    super.attributeChangedCallback(name, oldValue, newValue);
-    if (name === "disabled") {
-      this.disabledController.disabled = newValue !== null;
-    }
-  }
-
-  renderStart(isFirstRender) {
-    console.info("renderStart", { isFirstRender, tag: this.tagName });
-  }
-
-  renderDone(isFirstRender) {
-    console.info("renderDone", { isFirstRender, tag: this.tagName });
-  }
-
-  render = () => {
-    return (
-      <div
-        classes={{ foo: true, foo__disabled: this.disabledController.disabled }}
-      >
-        <div>
-          Hello {this.name}{" "}
-          {this.nickName ? <span> ({this.nickName})</span> : null}
-        </div>
-        <div>age {this.age}</div>
-        {this.data ? <pre>{JSON.stringify(this.data, null, 2)}</pre> : null}
-        {this.items?.map((item, i) => (
-          <div key={`item${i}`}>{item}</div>
-        ))}
-      </div>
-    );
-  };
-}
-
-class SuperAnchorElement extends HTMLAnchorElement {
-  constructor() {
-    super();
-    this.onclick = (e) => {
-      e.preventDefault();
-      alert("super");
-    };
-  }
-  public connectedCallback() {
-    this.classList.add("super");
-    this.style.color = "red";
-  }
-}
-
-@CustomElementConfig({
-  tagName: "delegate-focus-demo",
-})
-class DelegateFocusDemo extends CustomElement {
-  static style = `
-    .root {
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-      background-color: #eee;
-      padding: 10px;
-    }`;
-
-  @Property({ type: "boolean", attribute: "has-p-foo" })
-  hasPFoo = false;
-
-  static delegatesFocus = true;
-
-  render = () => {
-    return (
-      <div class="root">
-        <span>
-          Delegate focus. The input should be focused when you click on me.
-        </span>
-        <input type="text" placeholder="I should be focused" />
-        <hr />
-        <span>Also p-foo should be rendered below when it is defined.</span>
-        {this.hasPFoo ? (
-          <p-foo
-            name="peter"
-            nick-name="web component freak"
-            age={123}
-            items={["baz", "bar"]}
-          ></p-foo>
-        ) : null}
-      </div>
-    );
-  };
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    customElements.whenDefined("p-foo").then(() => {
-      this.hasPFoo = true;
-    });
-  }
-}
-
-window.customElements.define("super-a", SuperAnchorElement, { extends: "a" });

package/storybook/storybook-demo/.storybook/main.ts

@@ -1,30 +0,0 @@
-// This file has been automatically migrated to valid ESM format by Storybook.
-import { createRequire } from "node:module";
-import type { StorybookConfig } from 'storybook-p-element-vite';
-import { join, dirname } from "path";
-
-const require = createRequire(import.meta.url);
-
-/**
- * This function is used to resolve the absolute path of a package.
- * It is needed in projects that use Yarn PnP or are set up within a monorepo.
- */
-function getAbsolutePath(value: string): string {
-  return dirname(require.resolve(join(value, 'package.json')));
-}
-
-const config: StorybookConfig = {
-  stories: [
-    "../stories/**/*.mdx",
-    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"
-  ],
-  addons: [
-    getAbsolutePath('@storybook/addon-docs')
-  ],
-  framework: getAbsolutePath("storybook-p-element-vite"),
-  typescript: {
-    check: false,
-  },
-};
-
-export default config;

package/storybook/storybook-demo/.storybook/preview-head.html

@@ -1 +0,0 @@
-<script type="module" src="https://cdn.jsdelivr.net/npm/p-elements-core@^1.2.20/dist/p-elements-core-modern.js"></script>

package/storybook/storybook-demo/.storybook/preview.ts

@@ -1,20 +0,0 @@
-import type { Preview } from 'storybook-p-element-vite'
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-       color: /(background|color)$/i,
-       date: /Date$/i,
-      },
-    },
-    docs: {
-      codePanel: true
-    }
-    
-  },
-  
-  
-};
-
-export default preview;

package/storybook/storybook-demo/package.json

@@ -1,23 +0,0 @@
-{
-  "name": "storybook-demo",
-  "private": true,
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "type": "module",
-  "devDependencies": {
-    "@storybook/addon-docs": "^10.2.7",
-    "@storybook/html-vite": "^10.2.7",
-    "storybook": "^10.2.7",
-    "storybook-p-element-vite": "2.0.0-rc1",
-    "p-elements-core": "2.1.0-rc6"
-  }
-}

package/storybook/storybook-demo/stories/bar.stories.tsx

@@ -1,27 +0,0 @@
-import "./foo";
-import type { Meta, StoryObj } from "storybook-p-element-vite";
-import type { ArgTypes } from "storybook/internal/csf";
-
-type Args = {
-  name: string;
-};
-
-const argTypes: ArgTypes = {
-  name: {
-    control: "text",
-  },
-};
-
-export default {
-  title: "Bar",
-  argTypes,
-  render: (args: Args) => `<my-foo name="${args.name}"></my-foo>`,
-} satisfies Meta<Args>;
-
-type Story = StoryObj<Args>;
-
-export const Default: Story = {
-  args: {
-    name: "Bar",
-  },
-} satisfies { args: Args };

package/storybook/storybook-demo/stories/baz.stories.tsx

@@ -1,37 +0,0 @@
-import "./foo";
-import type { Meta, StoryObj } from "storybook-p-element-vite";
-import type { ArgTypes } from "storybook/internal/csf";
-
-type Args = {
-  name: string;
-};
-
-const argTypes: ArgTypes = {
-  name: {
-    control: "text",
-  },
-};
-
-const fooElement = document.createElement("my-foo");
-
-const input = document.createElement("input");
-input.type = "text";
-input.value = "Hello";
-fooElement.appendChild(input);
-
-export default {
-  title: "Baz",
-  argTypes,
-  render: (args: Args) => {
-    fooElement.setAttribute("name", args.name);
-    return fooElement;
-  },
-} satisfies Meta<Args>;
-
-type Story = StoryObj<Args>;
-
-export const Default: Story = {
-  args: {
-    name: "Baz",
-  },
-} satisfies { args: Args };

package/storybook/storybook-demo/stories/foo.mdx

@@ -1,11 +0,0 @@
-import { Canvas, Meta } from '@storybook/addon-docs/blocks';
-
-import * as FooStories from './foo.stories';
- 
-<Meta of={FooStories} />
- 
-# Foo
-
-A foo is a customizable component that can be used to display content in a specific way.
-
-<Canvas of={FooStories.Default} />

package/storybook/storybook-demo/stories/foo.stories.tsx

@@ -1,27 +0,0 @@
-import "./foo";
-import type { Meta, StoryObj } from "storybook-p-element-vite";
-import type { ArgTypes } from "storybook/internal/csf";
-
-type Args = {
-  name: string;
-};
-
-const argTypes: ArgTypes = {
-  name: {
-    control: "text",
-  },
-};
-
-export default {
-  title: "Foo",
-  argTypes,
-  render: (args: Args) => <my-foo afterCreate={(e: HTMLElement)=>e.dataset.foo = "bar" } name={args.name}></my-foo>,
-} satisfies Meta<Args>;
-
-type Story = StoryObj<Args>;
-
-export const Default: Story = {
-  args: {
-    name: "Peter",
-  },
-} satisfies { args: Args };

package/storybook/storybook-demo/stories/foo.tsx

@@ -1,24 +0,0 @@
-@CustomElementConfig({
-  tagName: 'my-foo',
-})
-export class Foo  extends CustomElement { 
-
-  static readonly style = `
-    :host {
-      color: blue;
-      font-weight: bold;
-    }
-  `;
-
-  @Property({type: "string", attribute: "name"})
-  name: string = "World";
-
-  render() :VNode {
-    return (
-      <div>
-        Foo Component Hello {this.name}
-      </div>
-    );
-  }
-
-}

package/storybook/storybook-demo/tsconfig.json

@@ -1,30 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES6",
-    "experimentalDecorators": true,
-    "useDefineForClassFields": false,
-
-    "jsx": "preserve",
-    "jsxFactory": "Maquette.h",
-
-    "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
-
-   "moduleResolution": "node",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true,
-    "types": ["p-elements-core"]
-
-  },
-  "include": ["src", "**/*.ts", "**/*.tsx"]
-}