slicejs-web-framework 1.0.19 → 1.0.21

package/src/Components/AppComponents/InputDocumentation/InputDocumentation.js

@@ -1,315 +0,0 @@
-export default class InputDocumentation extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = [];
-   }
-
-   async init() {
-      await this.createInput(this.querySelector('.myInput'), {});
-      //Props
-      await this.createInput(
-         this.querySelector('.inputPlaceholder'),
-         { placeholder: 'Enter text here' },
-         `{
-        placeholder: "Enter text here"
-      }`
-      );
-      await this.createInput(
-         this.querySelector('.requiredProp'),
-         {
-            placeholder: 'Enter text here',
-            required: true,
-         },
-         `{
-        placeholder: "Enter text here",
-        required: true
-      }`
-      );
-      await this.createInput(
-         this.querySelector('.disabledProp'),
-         {
-            placeholder: 'Enter text here',
-            disabled: true,
-         },
-         `{
-        placeholder: "Enter text here",
-        disabled: true
-      }`
-      );
-      //Types
-      await this.createInput(
-         this.querySelector('.typeText'),
-         {
-            placeholder: 'Enter text here',
-            type: 'text',
-         },
-         `{
-        placeholder: "Enter text here",
-        type: "text"
-      }`
-      );
-      await this.createInput(
-         this.querySelector('.typeNumber'),
-         {
-            placeholder: 'Enter numbers here',
-            type: 'number',
-         },
-         `{
-        placeholder: "Enter numbers here",
-        type: "number"
-      }`
-      );
-      await this.createInput(
-         this.querySelector('.typePassword'),
-         {
-            placeholder: 'Password',
-            type: 'password',
-         },
-         `{
-        placeholder: "Password",
-        type: "password"
-      }`
-      );
-      await this.createInput(
-         this.querySelector('.secretProp'),
-         {
-            placeholder: 'Password',
-            type: 'password',
-            secret: true,
-         },
-         `{
-        placeholder: "Password",
-        type: "password", 
-        secret: true
-      }`
-      );
-      await this.createInput(
-         this.querySelector('.emailType'),
-         { placeholder: 'Email', type: 'email' },
-         `{
-        placeholder: "Email",
-        type: "email"
-      }`
-      );
-      await this.createInput(
-         this.querySelector('.dateType'),
-         { placeholder: 'Date', type: 'date' },
-         `{
-        placeholder: "Date",
-        type: "date"
-      }`
-      );
-      const conditionsInput = await this.createInput(
-         this.querySelector('.inputConditions'),
-         {
-            placeholder: 'Password',
-            type: 'password',
-            secret: true,
-            conditions: {
-               // regex: "^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[\\W_]).{8,}$",
-               minLength: 8,
-               maxLength: 10,
-               minMinusc: 1,
-               maxMinusc: 4,
-               minMayusc: 1,
-               maxMayusc: 6,
-               minNumber: 1,
-               maxNumber: 6,
-               minSymbol: 1,
-               maxSymbol: 10,
-            },
-         },
-         `{
-        placeholder: "Password",
-        type: "password",
-        secret: true,
-        conditions: {
-          // regex: "^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[\\W_]).{8,}$",
-          minLength: 8,
-          maxLength: 10,
-          minMinusc: 1,
-          maxMinusc: 4,
-          minMayusc: 1,
-          maxMayusc: 6,
-          minNumber: 1,
-          maxNumber: 6,
-          minSymbol: 1,
-          maxSymbol: 10,
-        },
-      }`,
-         'Validate Conditions'
-      );
-      const regexInput = await this.createInput(
-         this.querySelector('.inputRegex'),
-         {
-            placeholder: 'Password with regex',
-            type: 'password',
-            secret: true,
-            conditions: {
-               // regex: "^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[\\W_]).{8,}$",
-               minLength: 8,
-               maxLength: 10,
-               minMinusc: 1,
-               maxMinusc: 4,
-               minMayusc: 1,
-               maxMayusc: 6,
-               minNumber: 1,
-               maxNumber: 6,
-               minSymbol: 1,
-               maxSymbol: 10,
-            },
-         },
-         `{
-        placeholder: "Password with regex",
-        type: "password",
-        secret: true,
-        conditions: {
-          regex: "^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[\\W_]).{8,}$",
-          // minLength: 8,
-          // maxLength: 10,
-          // minMinusc: 1,
-          // maxMinusc: 4,
-          // minMayusc: 1,
-          // maxMayusc: 6,
-          // minNumber: 1,
-          // maxNumber: 6,
-          // minSymbol: 1,
-          // maxSymbol: 10,
-        },
-      }`,
-         'Validate Regex'
-      );
-      await this.inputMethos(
-         this.querySelector('.inputMethods'),
-         {
-            placeholder: 'Methods',
-            conditions: {
-               minLength: 8,
-               minNumber: 1,
-               minSymbol: 1,
-            },
-         },
-         `{
-        placeholder: "Methods",
-        conditions: {
-          minLength: 8,
-          minNumber: 1,
-          minSymbol: 1,
-        }
-      }`
-      );
-   }
-
-   async createInput(appendTo, inputProps, codeProps, validate) {
-      if (!codeProps) {
-         codeProps = '{}';
-      }
-      const myInput = await slice.build('Input', inputProps);
-
-      const componentCode = await slice.build('CodeVisualizer', {
-         value: `const myInput = await slice.build("Input", ${codeProps});
-
-`,
-         language: 'javascript',
-      });
-
-      const div = document.createElement('div');
-      const inputDiv = document.createElement('div');
-      inputDiv.classList.add('inputs');
-      inputDiv.appendChild(myInput);
-
-      div.classList.add('inputsContainer');
-      div.appendChild(inputDiv);
-      if (validate) {
-         const validateButton = await slice.build('Button', {
-            value: validate,
-            onClickCallback: () => {
-               myInput.validateValue();
-            },
-         });
-         div.appendChild(validateButton);
-      }
-      div.appendChild(componentCode);
-
-      appendTo.appendChild(div);
-
-      return myInput;
-   }
-
-   async inputMethos(appendTo, inputProps, codeProps) {
-      if (!codeProps) {
-         codeProps = '{}';
-      }
-      const myInput = await slice.build('Input', inputProps);
-
-      const componentCode = await slice.build('CodeVisualizer', {
-         value: `const myInput = await slice.build("Input", ${codeProps});
-          
-myInput.validateValue();
-myInput.clear();
-myInput.triggerError();
-myInput.triggerSuccess();      
-
-`,
-         language: 'javascript',
-      });
-
-      const div = document.createElement('div');
-      const inputDiv = document.createElement('div');
-      inputDiv.classList.add('inputs');
-      inputDiv.appendChild(myInput);
-
-      div.classList.add('inputsContainer');
-      div.appendChild(inputDiv);
-      const buttons = document.createElement('div');
-      buttons.classList.add('inputButtons');
-      const validateButton = await slice.build('Button', {
-         value: 'Validate',
-         onClickCallback: () => {
-            myInput.validateValue();
-         },
-      });
-      const clearButton = await slice.build('Button', {
-         value: 'Clear',
-         customColor: {
-            button: 'var(--medium-color)',
-         },
-         onClickCallback: () => {
-            myInput.clear();
-         },
-      });
-      const errorButton = await slice.build('Button', {
-         value: 'Error',
-         customColor: {
-            button: 'var(--danger-color)',
-         },
-         onClickCallback: () => {
-            myInput.triggerError();
-         },
-      });
-      const successButton = await slice.build('Button', {
-         value: 'Success',
-         customColor: {
-            button: 'var(--success-color)',
-         },
-         onClickCallback: () => {
-            myInput.triggerSuccess();
-         },
-      });
-      buttons.appendChild(validateButton);
-      buttons.appendChild(clearButton);
-      buttons.appendChild(errorButton);
-      buttons.appendChild(successButton);
-      div.appendChild(buttons);
-      div.appendChild(componentCode);
-
-      appendTo.appendChild(div);
-
-      return myInput;
-   }
-}
-
-customElements.define('slice-inputdocumentation', InputDocumentation);

package/src/Components/AppComponents/Installation/Installation.css

@@ -1,185 +0,0 @@
-slice-installation {
-  font-family: var(--font-family);
-  color: var(--font-primary-color);
-}
-
-slice-installation .installation-container {
-  width: 100%;
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 20px;
-}
-
-slice-installation h1 {
-  color: var(--primary-color);
-  margin-bottom: 30px;
-}
-
-slice-installation h2 {
-  color: var(--primary-color);
-  margin: 30px 0 15px 0;
-  padding-bottom: 8px;
-  border-bottom: 1px solid var(--secondary-background-color);
-}
-
-slice-installation .installation-intro {
-  font-size: 1.1em;
-  line-height: 1.6;
-  margin-bottom: 30px;
-}
-
-slice-installation .installation-step {
-  margin-bottom: 40px;
-  padding: 20px;
-  background-color: var(--secondary-background-color);
-  border-radius: var(--border-radius-slice);
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
-}
-
-slice-installation .installation-step-code {
-  position: relative;
-  margin: 15px 0;
-  background-color: var(--primary-background-color);
-  border-radius: var(--border-radius-slice);
-  border: 1px solid var(--primary-color-shade);
-  overflow: hidden;
-}
-
-slice-installation pre {
-  margin: 0;
-  padding: 15px;
-  overflow-x: auto;
-}
-
-slice-installation code {
-  font-family: 'Courier New', monospace;
-  color: var(--font-primary-color);
-}
-
-slice-installation .copy-button {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  background-color: var(--primary-color);
-  color: var(--primary-color-contrast);
-  border: none;
-  border-radius: var(--border-radius-slice);
-  padding: 5px 10px;
-  cursor: pointer;
-  font-size: 0.8em;
-  transition: all 0.3s ease;
-}
-
-slice-installation .copy-button:hover {
-  background-color: var(--secondary-color);
-}
-
-slice-installation .terminal {
-  background-color: #1e1e1e;
-  border-radius: var(--border-radius-slice);
-  margin: 15px 0;
-  overflow: hidden;
-}
-
-slice-installation .terminal-header {
-  background-color: #323232;
-  padding: 8px 15px;
-  display: flex;
-  align-items: center;
-}
-
-slice-installation .terminal-dot {
-  height: 12px;
-  width: 12px;
-  border-radius: 50%;
-  margin-right: 6px;
-}
-
-slice-installation .red {
-  background-color: #ff5f56;
-}
-
-slice-installation .yellow {
-  background-color: #ffbd2e;
-}
-
-slice-installation .green {
-  background-color: #27c93f;
-}
-
-slice-installation .terminal-title {
-  color: #cccccc;
-  margin-left: 10px;
-  font-size: 0.9em;
-}
-
-slice-installation .terminal-content {
-  padding: 15px;
-  color: #f8f8f2;
-  font-family: 'Courier New', monospace;
-  font-size: 0.9em;
-  line-height: 1.5;
-  min-height: 60px;
-}
-
-slice-installation .terminal-output {
-  white-space: pre-wrap;
-}
-
-slice-installation .note {
-  font-size: 0.9em;
-  font-style: italic;
-  color: var(--font-secondary-color);
-  margin-top: 10px;
-}
-
-slice-installation .installation-next-steps {
-  margin-top: 40px;
-  padding: 20px;
-  background-color: var(--primary-background-color);
-  border: 1px solid var(--primary-color);
-  border-radius: var(--border-radius-slice);
-}
-
-slice-installation .installation-next-steps ul {
-  list-style-type: none;
-  padding-left: 0;
-}
-
-slice-installation .installation-next-steps li {
-  margin-bottom: 10px;
-  padding-left: 24px;
-  position: relative;
-}
-
-slice-installation .installation-next-steps li:before {
-  content: "→";
-  position: absolute;
-  left: 0;
-  color: var(--primary-color);
-}
-
-slice-installation .installation-next-steps code {
-  background-color: var(--secondary-background-color);
-  padding: 2px 6px;
-  border-radius: 3px;
-}
-
-@media only screen and (max-width: 770px) {
-  slice-installation .installation-container {
-    padding: 10px;
-  }
-  
-  slice-installation .installation-step {
-    padding: 15px;
-  }
-  
-  slice-installation pre {
-    padding: 10px;
-    font-size: 0.9em;
-  }
-  
-  slice-installation .terminal-content {
-    font-size: 0.8em;
-  }
-}

package/src/Components/AppComponents/Installation/Installation.html

@@ -1,102 +0,0 @@
-<div class="installation-container">
-  <h1 id="installation-title">Installation Guide</h1>
-  
-  <p class="installation-intro">
-    Getting started with Slice.js is easy! Follow these simple steps to create your first Slice.js project:
-  </p>
-  
-  <div class="installation-steps">
-    <div class="installation-step">
-      <h2 id="step1">Step 1: Initialize your project</h2>
-      <p>First, create a new directory for your project and initialize it with npm:</p>
-      <div class="installation-step-code">
-        <pre><code>npm init</code></pre>
-        <button class="copy-button">Copy</button>
-      </div>
-      <div class="terminal">
-        <div class="terminal-header">
-          <span class="terminal-dot red"></span>
-          <span class="terminal-dot yellow"></span>
-          <span class="terminal-dot green"></span>
-          <span class="terminal-title">Terminal</span>
-        </div>
-        <div class="terminal-content">
-          <div class="terminal-output">Follow the prompts to set up your package.json file. You can press Enter to accept the default values or customize as needed.</div>
-        </div>
-      </div>
-    </div>
-    
-    <div class="installation-step">
-      <h2 id="step2">Step 2: Install Slice.js CLI</h2>
-      <p>Next, install the Slice.js CLI tool which will help you create components and manage your project:</p>
-      <div class="installation-step-code">
-        <pre><code>npm i slicejs-cli</code></pre>
-        <button class="copy-button">Copy</button>
-      </div>
-      <div class="terminal">
-        <div class="terminal-header">
-          <span class="terminal-dot red"></span>
-          <span class="terminal-dot yellow"></span>
-          <span class="terminal-dot green"></span>
-          <span class="terminal-title">Terminal</span>
-        </div>
-        <div class="terminal-content">
-          <div class="terminal-output">added X packages, and audited Y packages in Zs</div>
-        </div>
-      </div>
-    </div>
-    
-    <div class="installation-step">
-      <h2 id="step3">Step 3: Initialize Slice.js</h2>
-      <p>Initialize the Slice.js folder structure in your project:</p>
-      <div class="installation-step-code">
-        <pre><code>npm run slice:init</code></pre>
-        <button class="copy-button">Copy</button>
-      </div>
-      <div class="terminal">
-        <div class="terminal-header">
-          <span class="terminal-dot red"></span>
-          <span class="terminal-dot yellow"></span>
-          <span class="terminal-dot green"></span>
-          <span class="terminal-title">Terminal</span>
-        </div>
-        <div class="terminal-content">
-          <div class="terminal-output">Creating folder structure...
-Slice framework initialized successfully!</div>
-        </div>
-      </div>
-      <p class="note">This command creates the necessary folder structure for your Slice.js project, including directories for components, styles, and themes.</p>
-    </div>
-    
-    <div class="installation-step">
-      <h2 id="step4">Step 4: Start the Server</h2>
-      <p>Finally, start the development server to see your Slice.js application in action:</p>
-      <div class="installation-step-code">
-        <pre><code>npm run slice:start</code></pre>
-        <button class="copy-button">Copy</button>
-      </div>
-      <div class="terminal">
-        <div class="terminal-header">
-          <span class="terminal-dot red"></span>
-          <span class="terminal-dot yellow"></span>
-          <span class="terminal-dot green"></span>
-          <span class="terminal-title">Terminal</span>
-        </div>
-        <div class="terminal-content">
-          <div class="terminal-output">Server is running on port 3001, http://localhost:3001</div>
-        </div>
-      </div>
-    </div>
-  </div>
-  
-  <div class="installation-next-steps">
-    <h2 id="next-steps">Next Steps</h2>
-    <p>Congratulations! You've successfully set up your Slice.js project. Here's what you can do next:</p>
-    <ul>
-      <li>Explore the documentation to learn about components</li>
-      <li>Create your first component with <code>npm run slice:create</code></li>
-      <li>Check out the built-in Visual components library</li>
-      <li>Build your application by adding routes and services</li>
-    </ul>
-  </div>
-</div>

package/src/Components/AppComponents/Installation/Installation.js

@@ -1,61 +0,0 @@
-export default class Installation extends HTMLElement {
-  constructor(props) {
-    super();
-    slice.attachTemplate(this);
-
-    slice.controller.setComponentProps(this, props);
-    this.debuggerProps = [];
-  }
-
-  async init() {
-    // Add code for installation steps visualization
-    
-    // Get all code blocks with copy buttons
-    const codeBlocks = this.querySelectorAll('.installation-step-code');
-    
-    // Add copy functionality to each code block
-    codeBlocks.forEach(block => {
-      const copyButton = block.querySelector('.copy-button');
-      const codeText = block.querySelector('code');
-      
-      copyButton.addEventListener('click', () => {
-        navigator.clipboard.writeText(codeText.textContent.trim());
-        copyButton.textContent = 'Copied!';
-        
-        setTimeout(() => {
-          copyButton.textContent = 'Copy';
-        }, 2000);
-      });
-    });
-
-    // Add animation for terminal output
-    const terminals = this.querySelectorAll('.terminal-output');
-    terminals.forEach(terminal => {
-      const text = terminal.textContent;
-      terminal.textContent = '';
-      let i = 0;
-      
-      const typeEffect = () => {
-        if (i < text.length) {
-          terminal.textContent += text.charAt(i);
-          i++;
-          setTimeout(typeEffect, 10);
-        }
-      };
-      
-      // Start the typing effect when element is in view
-      const observer = new IntersectionObserver(entries => {
-        entries.forEach(entry => {
-          if (entry.isIntersecting) {
-            typeEffect();
-            observer.unobserve(entry.target);
-          }
-        });
-      });
-      
-      observer.observe(terminal);
-    });
-  }
-}
-
-customElements.define('slice-installation', Installation);