slicejs-web-framework 1.0.19 → 1.0.21

package/src/Components/AppComponents/VisualDocumentation/VisualDocumentation.html

@@ -1,67 +0,0 @@
-<h1 id="visualComponents">Visual Components</h1>
-
-<p>
-  Visual components in Slice.js are the building blocks of your user interface. These components use the Web Components API, extending <code>HTMLElement</code> to create custom elements that can be used directly in your HTML markup.
-</p>
-
-<h2 id="visualComponentOverview">What are Visual Components?</h2>
-<p>
-  Visual components in Slice.js:
-</p>
-<ul>
-  <li>Render visible UI elements that users can interact with</li>
-  <li>Encapsulate HTML structure, CSS styling, and JavaScript behavior</li>
-  <li>Follow a consistent lifecycle pattern and property management</li>
-  <li>Can be composed together to build complex interfaces</li>
-</ul>
-
-<h2 id="buildingVisualComponents">Building Visual Components</h2>
-<p>
-  Visual components are created using the <code>slice.build()</code> method, which handles template loading, styling, and instance creation:
-</p>
-<div class="visual-build-example"></div>
-
-<h2 id="visualComponentStructure">Visual Component Structure</h2>
-<p>
-  Each visual component consists of three key files:
-</p>
-<ul>
-  <li><strong>ComponentName.js</strong> - The JavaScript class that defines behavior and properties</li>
-  <li><strong>ComponentName.html</strong> - The HTML template that defines structure</li>
-  <li><strong>ComponentName.css</strong> - The CSS styles specific to the component</li>
-</ul>
-
-<h2 id="visualComponentLifecycle">Component Lifecycle</h2>
-<p>
-  Visual components follow a standard lifecycle with two key async methods:
-</p>
-<ol>
-  <li><strong>constructor(props)</strong> - Initialize the component and set up event listeners</li>
-  <li><strong>async init()</strong> - Called once after construction to set default values and perform additional initialization</li>
-  <li><strong>async update()</strong> - Called every time the component is rendered, allowing you to refresh data and update the UI</li>
-  <li><strong>Property getters/setters</strong> - Manage the component's state and update the DOM accordingly</li>
-</ol>
-
-<p>Example component implementation with lifecycle methods:</p>
-<div class="visual-lifecycle-example"></div>
-
-<h2 id="nestedComponents">Creating Components Within Components</h2>
-<p>
-  One of the key advantages of Slice.js is the ability to compose complex UIs by nesting components within each other. Here's how to create and manage nested components:
-</p>
-<div class="nested-components-example"></div>
-
-<p>Usage example with nested components:</p>
-<div class="nested-components-usage"></div>
-
-<h3>Key concepts for nesting components:</h3>
-<ul>
-  <li><strong>Async initialization</strong>: Use async/await in the init() method to ensure child components are fully built</li>
-  <li><strong>Component communication</strong>: Pass data down to child components via props or use custom events for child-to-parent communication</li>
-  <li><strong>DOM management</strong>: Store references to child components for later access and manipulation</li>
-  <li><strong>Lifecycle coordination</strong>: Ensure parent updates trigger child updates when needed</li>
-</ul>
-
-<h2 id="visualComponentsFaq">Frequently Asked Questions</h2>
-<p>Common questions about working with Visual Components in Slice.js:</p>
-<div class="faq-section"></div>

package/src/Components/AppComponents/VisualDocumentation/VisualDocumentation.js

@@ -1,193 +0,0 @@
-export default class VisualDocumentation extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = [];
-   }
-
-   async init() {
-      // Create code example for visual component
-      const buildExample = await slice.build("CodeVisualizer", {
-         value: `// Example: Building a visual component
-const myButton = await slice.build("Button", {
-   value: "Click me!",
-   onClickCallback: () => {
-      console.log("Button clicked");
-   }
-});
-
-// Add to the DOM
-document.getElementById("container").appendChild(myButton);`,
-         language: "javascript"
-      });
-      
-      this.querySelector(".visual-build-example").appendChild(buildExample);
-
-      // Create lifecycle example
-      const lifecycleExample = await slice.build("CodeVisualizer", {
-         value: `export default class CustomVisualComponent extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-      
-      // Get references to DOM elements
-      this.$button = this.querySelector(".my-button");
-      
-      // Set up event listeners
-      this.$button.addEventListener("click", this.handleClick.bind(this));
-      
-      // Register properties with controller
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = ["value", "color", "disabled"];
-   }
-
-   // Lifecycle method - runs once after construction
-   async init() {
-      // Initialize default values
-      if (!this.value) this.value = "Default Text";
-      if (!this.disabled) this.disabled = false;
-      
-      // Additional async initialization logic
-      await this.loadExternalData();
-   }
-   
-   // Lifecycle method - runs every time the component is rendered
-   async update() {
-      // Update component state based on current data
-      this.updateUI();
-      
-      // Refresh data or perform other operations needed on re-render
-      await this.refreshData();
-   }
-   
-   // Custom methods
-   handleClick() {
-      if (this.onClickCallback) this.onClickCallback();
-   }
-   
-   // Getters and setters for properties
-   get value() {
-      return this._value;
-   }
-   
-   set value(newValue) {
-      this._value = newValue;
-      this.$button.textContent = newValue;
-   }
-}
-
-customElements.define("my-visual-component", CustomVisualComponent);`,
-         language: "javascript"
-      });
-      
-      this.querySelector(".visual-lifecycle-example").appendChild(lifecycleExample);
-
-      // Create nested components example
-      const nestedComponentsExample = await slice.build("CodeVisualizer", {
-         value: `// Parent component: Form.js
-export default class Form extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-      this.$formContainer = this.querySelector(".form-container");
-      
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = ["title", "fields"];
-   }
-
-   async init() {
-      // Create form title
-      const formTitle = document.createElement("h2");
-      formTitle.textContent = this.title || "Form";
-      this.$formContainer.appendChild(formTitle);
-      
-      // Create child components (inputs)
-      for (const field of this.fields || []) {
-         const input = await slice.build("Input", {
-            placeholder: field.label,
-            type: field.type,
-            required: field.required
-         });
-         
-         this.$formContainer.appendChild(input);
-      }
-      
-      // Create submit button
-      const submitButton = await slice.build("Button", {
-         value: "Submit",
-         onClickCallback: () => this.handleSubmit()
-      });
-      
-      this.$formContainer.appendChild(submitButton);
-   }
-   
-   handleSubmit() {
-      // Form submission logic
-      console.log("Form submitted");
-   }
-}
-
-customElements.define("slice-form", Form);`,
-         language: "javascript"
-      });
-      
-      this.querySelector(".nested-components-example").appendChild(nestedComponentsExample);
-
-      // Usage example for nested components
-      const nestedComponentsUsageExample = await slice.build("CodeVisualizer", {
-         value: `// Using the Form component with nested components
-const myForm = await slice.build("Form", {
-   title: "Contact Form",
-   fields: [
-      { label: "Your Name", type: "text", required: true },
-      { label: "Email Address", type: "email", required: true },
-      { label: "Message", type: "text", required: false }
-   ]
-});
-
-document.getElementById("form-container").appendChild(myForm);`,
-         language: "javascript"
-      });
-      
-      this.querySelector(".nested-components-usage").appendChild(nestedComponentsUsageExample);
-
-      // Create details components for FAQs
-      const questions = [
-         {
-            title: "How do I pass data between components?",
-            text: "You can pass data between components in several ways: 1) Through props when building a component, 2) Using custom events with addEventListener and dispatchEvent, 3) Through a shared service component, or 4) Using the slice.controller to access other components directly via getComponent()."
-         },
-         {
-            title: "Can I create dynamic components at runtime?",
-            text: "Yes, you can dynamically create components at runtime using slice.build() and then append them to the DOM. This is useful for creating components based on user interactions or data received from an API."
-         },
-         {
-            title: "How do I handle component cleanup?",
-            text: "To properly clean up a component, you should remove all event listeners and cancel any pending operations when the component is no longer needed. You can create a custom destroy() method in your component class that handles cleanup tasks."
-         },
-         {
-            title: "Can I extend existing visual components?",
-            text: "Yes, you can extend existing components by creating a new class that inherits from the component you want to extend. This allows you to add new functionality while keeping the original behavior."
-         },
-         {
-            title: "How do I handle component loading states?",
-            text: "For components that need to load data asynchronously, you can use the built-in Loading component in Slice.js. Use slice.loading.start() to show the loading indicator and slice.loading.stop() to hide it when your data is ready."
-         }
-      ];
-
-      const faqContainer = this.querySelector(".faq-section");
-      
-      for (const question of questions) {
-         const detailsComponent = await slice.build("Details", {
-            title: question.title,
-            text: question.text
-         });
-         
-         faqContainer.appendChild(detailsComponent);
-      }
-   }
-}
-
-customElements.define("slice-visualdocumentation", VisualDocumentation);