Component Manifest

As you can see all the entries of the launcher have the same name in the tooltip and icon. This is because we did never specify the well known option $manifest in our components.

We will now add this option into every component we have written. For the mockup application we will set a different icon as set in the component registry to demonstrate that it will be overwritten and not shown:

src/demo/apps/component-basics/index.js

import { Application } from "@codecoupler/cc-ui";
import Content from "./content.js";
export default class extends Application {
  static defaults = {
    $manifest: {
      name: "Component Basics (JS)",
      iconHtml: '<i class="fab fa-js-square fa-fw"></i>'
    },
    "@codecoupler": {
      panel: {
        panelSize: "640 510",
        headerTitle: "Test Component Features"
      }
    }
  };
  async start() {
    let widget = await this.stage.load(Content, {
      myOption1: "Value 1"
    });
    let interval = setInterval(() => {
      if (!widget.isDestroyed) {
        widget.options = {
          myOption1: `Random Value ${Math.floor(Math.random() * 100)}`
        };
      } else {
        clearInterval(interval);
      }
    }, 2000);
  }
}

src/demo/apps/component-basics-vue/index.js

import { Application, Mixin, Widget, Vue } from "@codecoupler/cc-ui";
import Content from "./content.vue";
export default class extends Application {
  static defaults = {
    $manifest: {
      name: "Component Basics (Vue)",
      iconHtml: '<i class="fab fa-vuejs fa-fw"></i>'
    },
    "@codecoupler": {
      panel: {
        panelSize: "640 510",
        headerTitle: "Test Vue Features"
      }
    }
  };
  async start() {
    let widget = await this.stage.load(Mixin(Widget, Vue), {
      vue: Content,
      props: {
        myOption1: "Value 1"
      }
    });
    let interval = setInterval(() => {
      if (!widget.isDestroyed) {
        widget.options = {
          props: {
            myOption1: `Random Value ${Math.floor(Math.random() * 100)}`
          }
        };
      } else {
        clearInterval(interval);
      }
    }, 2000);
  }
}

src/demo/apps/stages-flexbox/index.js

import { Application, Message } from "@codecoupler/cc-ui";
import Content from "./content.js";
import Child from "./child.js";
import Header from "./header.js";
export default class extends Application {
  static defaults = {
    $manifest: {
      name: "Testing Stages",
      iconHtml: '<i class="fas fa-columns fa-fw"></i>'
    },
    "@codecoupler": {
      panel: {
        panelSize: "580 580",
        headerTitle: "Test Stage Features"
      }
    }
  };
  async start() {
    await this.stage.load(Header, "header-canvas");
    this.getStage("main/header-canvas/top").load(Message);
    await this.stage.load(Content, "flexbox-canvas");
    await Promise.all([
      this.getStage("mario").load(Child, "child-of-mario"),
      this.getStage("**/luigi").load(Child, "child-of-luigi"),
      this.getStage("main/*/peach").load(Child, "child-of-peach"),
      this.getStage("main/flexbox-canvas/daisy").load(Child, "child-of-daisy")
    ]);
    await Promise.all([
      this.getStage("**/child-of-mario/child-stage").load(
        Message,
        "message-of-mario"
      ),
      this.getStage("**/child-of-luigi/child-stage").load(
        Message,
        "message-of-luigi"
      ),
      this.getStage("**/child-of-peach/child-stage").load(
        Message,
        "message-of-peach"
      ),
      this.getStage("**/child-of-daisy/child-stage").load(
        Message,
        "message-of-daisy"
      )
    ]);
    this.getStage("**/child-of-luigi/child-stage").getComponent(
      "message-of-luigi"
    ).options = {
      text: "Message of Luigi!",
      class: "bg-success text-white"
    };
    this.getComponent("message-of-mario").options = {
      text: "Message of Mario!",
      class: "bg-success text-white"
    };
    console.info(this.getStages());
    console.info(this.getComponents());
    console.info(this.getStagesDebug());
  }
}

src/demo/apps/stage-levels/index.js

import { Application } from "@codecoupler/cc-ui";
import Content from "./content.js";
export default class extends Application {
  static defaults = {
    $manifest: {
      name: "Testing Levels",
      iconHtml: '<i class="fas fa-layer-group fa-fw"></i>'
    },
    "@codecoupler": {
      panel: {
        panelSize: "800 600",
        headerTitle: "Test Stage Levels"
      }
    }
  };
  async start() {
    await this.stage.load(Content);
  }
}

src/demo/apps/canvas-vs-widget-layout/index.js

import { Application } from "@codecoupler/cc-ui";
import Content from "./content.js";
export default class extends Application {
  static defaults = {
    $manifest: {
      name: "Widget and Layouts",
      iconHtml: '<i class="fas fa-car-crash fa-fw"></i>'
    },
    "@codecoupler": {
      panel: {
        panelSize: "640 510",
        headerTitle: "Compare Canvas vs. Widget"
      }
    }
  };
  async start() {
    await this.stage.load(Content);
  }
}

src/demo/apps/canvas-vs-widget-scroll/index.js

import { Application } from "@codecoupler/cc-ui";
import Content from "./content.js";
export default class extends Application {
  static defaults = {
    $manifest: {
      name: "Canvas and Scrolling",
      iconHtml: '<i class="fas fa-heart-broken fa-fw"></i>'
    },
    "@codecoupler": {
      panel: {
        panelSize: "640 510",
        headerTitle: "Compare Canvas vs. Widget"
      }
    }
  };
  async start() {
    await this.stage.load(Content);
  }
}

src/demo/apps/flexbox-component/index.js

import { Application, Buttons, Flexbox } from "@codecoupler/cc-ui";
import LoadingComponents from "../../components/loading-components";
import Content from "./content.js";
export default class extends Application {
  static defaults = {
    $manifest: {
      name: "Flexbox Component",
      iconHtml: '<i class="fas fa-th fa-fw"></i>'
    },
    "@codecoupler": {
      panel: {
        panelSize: "1000 510",
        headerTitle: "Test Flexbox Features",
        footerToolbar: true
      }
    }
  };
  async start() {
    await this.stage.load(Content);
    await this.getStage("footer").load(Flexbox, {
      "@codecoupler": {
        flexbox: {
          root: {
            type: "row",
            content: [
              { type: "stage", id: "ftr-left", grow: true },
              { type: "stage", id: "$" }
            ]
          }
        }
      }
    });
    await this.getStage("ftr-left").load(LoadingComponents, { target: this });
    await this.getStage("footer").load(Buttons, {
      buttons: "close",
      context: this
    });
  }
}

src/demo/apps/layout-component/index.js

import { Application, Layout, Message } from "@codecoupler/cc-ui";
export default class extends Application {
  static defaults = {
    $manifest: {
      name: "Layout Component",
      iconHtml: '<i class="far fa-object-group fa-fw"></i>'
    },
    "@codecoupler": {
      panel: {
        panelSize: "900 500",
        headerTitle: "Test Layout Features"
      }
    }
  };
  async start() {
    await this.stage.load(Layout, {
      reordable: true,
      resizable: true,
      root: {
        type: "row",
        content: [
          { id: "first", type: "stage", size: "60%", title: "First" },
          {
            type: "column",
            content: [
              { id: "second", type: "stage", title: "Second" },
              {
                type: "stack",
                size: "60%",
                content: [
                  { id: "third", type: "stage", title: "Third" },
                  { id: "fourth", type: "stage", title: "Fourth" }
                ]
              }
            ]
          }
        ]
      }
    });
    await Promise.all([
      this.getStage("first").load(Message, { text: "First" }),
      this.getStage("second").load(Message, { text: "Second" }),
      this.getStage("third").load(Message, { text: "Third" }),
      this.getStage("fourth").load(Message, { text: "Fourth" })
    ]);
  }
}

src/demo/apps/mockup/index.js

import { Application, Message } from "@codecoupler/cc-ui";
export default class extends Application {
  static defaults = {
    $manifest: {
      name: "Mockup Application",
      iconHtml: '<i class="fas fa-box-open fa-fw"></i>'
    },
    "@codecoupler": {
      panel: {
        panelSize: "250 120",
        headerTitle: "Mockup"
      }
    }
  };
  async start() {
    let centeredMessage = await this.stage.load(Message, {
      text: `ID of the Application:\n${this.id}`,
      style: { color: "#fff", textDecoration: "underline" },
      class: `bg-secondary`
    });
    setTimeout(() => {
      centeredMessage.options = {
        text: `<b>ID of the Application</b>:\n${this.id}`,
        style: { color: "#000", textDecoration: "" },
        class: `bg-white`
      };
    }, 1000);
  }
}