slicejs-web-framework 1.0.19 → 1.0.21

package/src/Components/AppComponents/TheSliceTeam/TheSliceTeam.css

@@ -1,208 +0,0 @@
-.slice_team {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-}
-
-.slice_team_hero {
-  position: relative;
-  width: 100%;
-  height: 300px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin-top: 60px;
-  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-  color: var(--primary-color-contrast);
-  text-align: center;
-  overflow: hidden;
-}
-
-.hero_overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-  opacity: 0.3;
-}
-
-.slice_team_hero h1 {
-  font-size: 2.5rem;
-  margin-bottom: 1rem;
-  z-index: 1;
-  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
-  animation: fadeIn 1s ease-in-out;
-}
-
-.slice_team_hero p {
-  font-size: 1.2rem;
-  z-index: 1;
-  max-width: 600px;
-  animation: fadeIn 1s ease-in-out 0.3s both;
-}
-
-.slice_team_content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 2rem;
-  width: 100%;
-  max-width: 1200px;
-}
-
-.slice_team_title {
-  font-size: 2rem;
-  color: var(--font-primary-color);
-  margin: 2rem 0;
-  text-align: center;
-  position: relative;
-}
-
-.slice_team_title::after {
-  content: '';
-  position: absolute;
-  width: 50px;
-  height: 3px;
-  background-color: var(--primary-color);
-  bottom: -10px;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.slice_team_container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2rem;
-  width: 100%;
-}
-
-slice-team-card {
-  opacity: 0;
-  animation: fadeInUp 0.8s ease-out forwards;
-  animation-delay: calc(var(--animation-order, 0) * 0.2s);
-}
-
-.slice_special_thanks {
-  margin: 4rem 0;
-  padding: 2rem;
-  background-color: var(--secondary-background-color);
-  border-radius: 10px;
-  width: 90%;
-  max-width: 800px;
-  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
-  transform: translateY(20px);
-  opacity: 0;
-  animation: fadeInUp 0.8s ease-out forwards;
-  animation-delay: 0.6s;
-}
-
-.special_thanks_content {
-  text-align: center;
-}
-
-.special_thanks_content h3 {
-  font-size: 1.8rem;
-  color: var(--primary-color);
-  margin-bottom: 1.5rem;
-}
-
-.special_thanks_content p {
-  color: var(--font-primary-color);
-  line-height: 1.7;
-  text-align: center;
-}
-
-.special_thanks_content strong {
-  color: var(--primary-color);
-  font-weight: bold;
-  position: relative;
-  display: inline-block;
-}
-
-.special_thanks_content strong::after {
-  content: '';
-  position: absolute;
-  width: 100%;
-  height: 2px;
-  background-color: var(--primary-color);
-  bottom: -2px;
-  left: 0;
-  transform: scaleX(0);
-  transform-origin: left;
-  transition: transform 0.3s ease;
-}
-
-.special_thanks_content:hover strong::after {
-  transform: scaleX(1);
-}
-
-.slice_team_footer {
-  margin-top: 2rem;
-  text-align: center;
-  padding: 1rem;
-  width: 100%;
-}
-
-.slice_team_footer a {
-  color: var(--primary-color);
-  text-decoration: none;
-  font-weight: bold;
-  transition: color 0.3s ease;
-}
-
-.slice_team_footer a:hover {
-  text-decoration: underline;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(30px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Responsive styling */
-@media only screen and (min-width: 768px) {
-  .slice_team_container {
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-  
-  slice-team-card {
-    width: 45%;
-  }
-}
-
-@media only screen and (max-width: 767px) {
-  .slice_team_hero {
-    height: 250px;
-    padding: 1rem;
-  }
-  
-  .slice_team_hero h1 {
-    font-size: 2rem;
-  }
-  
-  .slice_special_thanks {
-    padding: 1.5rem;
-  }
-}

package/src/Components/AppComponents/TheSliceTeam/TheSliceTeam.html

@@ -1,18 +0,0 @@
-<div class="slice_team">
-   <div class="slice_team_hero">
-      <div class="hero_overlay"></div>
-      <h1>The Minds Behind Slice.js</h1>
-      <p>Meet the passionate developers who created this framework</p>
-   </div>
-   
-   <div class="slice_team_content">
-      <h2 class="slice_team_title">Our Team</h2>
-      <div class="slice_team_container"></div>
-      
-      <div class="slice_special_thanks"></div>
-      
-      <div class="slice_team_footer">
-         <p>Want to contribute? Join us on <a href="https://github.com/VKneider/slice.js" target="_blank">GitHub</a></p>
-      </div>
-   </div>
-</div>

package/src/Components/AppComponents/TheSliceTeam/TheSliceTeam.js

@@ -1,111 +0,0 @@
-export default class TheSliceTeam extends HTMLElement {
-  constructor(props) {
-     super();
-     slice.attachTemplate(this);
-
-     this.$container = this.querySelector('.slice_team_container');
-     this.$title = this.querySelector('.slice_team_title');
-     this.$specialThanks = this.querySelector('.slice_special_thanks');
-
-     slice.controller.setComponentProps(this, props);
-     this.debuggerProps = ['members'];
-  }
-
-  async init() {
-     const navBar = await slice.build('Navbar', {
-        position: 'fixed',
-        logo: {
-           src: '/images/Slice.js-logo.png',
-           path: '/',
-        },
-        items: [
-           { text: 'Home', path: '/' },
-           { text: 'Documentation', path: '/Documentation' },
-           { text: 'Playground', path: '/Playground' },
-           { text: 'Our Team', path: '/Team' }
-        ],
-        buttons: [{
-           value: 'Change Theme',
-           onClickCallback: async () => {
-              let theme = slice.stylesManager.themeManager.currentTheme;
-              if (theme === 'Slice') await slice.setTheme('Light');
-              else if (theme === 'Light') await slice.setTheme('Dark');
-              else if (theme === 'Dark') await slice.setTheme('Slice');
-           },
-        }],
-     });
-
-     this.appendChild(navBar);
-     
-     // Team members data
-     const Victor = {
-        name: "Victor Kneider",
-        role: "Founder. Lead Developer. Software Architect.",
-        image: "https://avatars.githubusercontent.com/u/103617388?v=4",
-        description: "Computer Engineer and the principal creator of Slice.js. Victor architected the core framework, developed the structural components, implemented the router system, and designed the component lifecycle. He also created the documentation and maintains the repository, laying the groundwork for the entire framework ecosystem.",
-        links: [
-           {label: "Github", href: "https://github.com/VKneider" },
-           {label: "Linkedin", href: "https://www.linkedin.com/in/vkneider/"}
-        ]
-     };
-
-     const Julio = {
-        name: "Julio Graterol",
-        role: "Frontend Developer. Visual Components Library Creator and Designer",
-        image: "https://avatars.githubusercontent.com/u/99130732?v=4",
-        description: "Frontend Developer and Designer. He is the creator of the Visual Components Library and the designer of the Slice.js logo and website.",
-        links: [
-           {label: "Github", href: "https://github.com/juliograterol"},
-           {label: "Linkedin", href: "https://www.linkedin.com/in/julio-graterol-187589289/"}
-        ]
-     };
-
-     const members = [Victor, Julio];  
-     await this.addMembers(members);
-     
-     // Add special thanks section with animation
-     this.renderSpecialThanks();
-  }
-
-  async addMembers(members) {
-     for (let i = 0; i < members.length; i++) {
-        await this.addMember(members[i]);
-     }
-  }
-
-  async addMember(member) {
-     const card = await slice.build('SliceTeamCard', {
-        name: member.name,
-        role: member.role,
-        image: member.image,
-        description: member.description,
-        links: member.links
-     });
-     this.$container.appendChild(card);
-  }
-
-  renderSpecialThanks() {
-     const specialThanksContent = document.createElement('div');
-     specialThanksContent.className = 'special_thanks_content';
-     specialThanksContent.innerHTML = `
-        <h3>Special Thanks</h3>
-        <p>
-          Victor Kneider would like to express his deepest gratitude to <strong>Jubert Pérez</strong> 
-          for being a constant source of motivation, support, and encouragement throughout 
-          the development of the Slice.js framework. Your belief in this project and guidance 
-          have been invaluable to its creation.
-        </p>
-     `;
-     this.$specialThanks.appendChild(specialThanksContent);
-  }
-
-  get members() {
-     return this._members;
-  }
-
-  set members(values) {
-     this._members = values;
-  }
-}
-
-window.customElements.define('slice-team', TheSliceTeam);

package/src/Components/AppComponents/ThemesDocumentation/ThemesDocumentation.css

@@ -1,61 +0,0 @@
-slice-themesdocumentation {
-  color: var(--font-primary-color);
-  font-family: var(--font-family);
-}
-
-slice-themesdocumentation .theme-samples {
-  margin: 20px 0;
-}
-
-slice-themesdocumentation .theme-sample {
-  padding: 20px;
-  margin: 10px;
-  border-radius: var(--border-radius-slice);
-  border: 2px solid;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease;
-}
-
-slice-themesdocumentation .theme-sample:hover {
-  transform: translateY(-5px);
-}
-
-slice-themesdocumentation .theme-sample h3 {
-  margin-top: 0;
-  margin-bottom: 15px;
-}
-
-slice-themesdocumentation code {
-  background-color: var(--secondary-background-color);
-  padding: 2px 5px;
-  border-radius: 3px;
-  font-family: monospace;
-}
-
-slice-themesdocumentation .theme-config-example,
-slice-themesdocumentation .theme-apply-example,
-slice-themesdocumentation .css-vars-example,
-slice-themesdocumentation .custom-theme-example {
-  margin: 20px 0;
-}
-
-slice-themesdocumentation ul li {
-  margin-bottom: 10px;
-}
-
-slice-themesdocumentation h2 {
-  margin-top: 30px;
-  border-bottom: 1px solid var(--primary-color-shade);
-  padding-bottom: 8px;
-}
-
-slice-themesdocumentation .theme-transition-example {
-  background-color: var(--secondary-background-color);
-  padding: 15px;
-  border-radius: var(--border-radius-slice);
-  margin: 20px 0;
-}

package/src/Components/AppComponents/ThemesDocumentation/ThemesDocumentation.html

@@ -1,80 +0,0 @@
-<h1 id="themes">Themes in Slice.js</h1>
-<p>
-  Slice.js includes a powerful theming system that allows you to easily customize the appearance of your entire application.
-  Slice.js themes are based on CSS variables that control colors, fonts, borders, and other visual styles.
-</p>
-
-<h2 id="theme-system">How the Theme System Works</h2>
-<p>
-  The Slice.js theme system uses the ThemeManager, a structural component that manages the application
-  and runtime theme switching. Themes are defined as separate CSS files located in the
-  <code>/src/Themes/</code> folder.
-</p>
-
-<h2 id="default-themes">Default Themes</h2>
-<p>
-  Slice.js comes with three built-in themes:
-</p>
-<ul>
-  <li><strong>Light</strong>: A light theme with blue as the primary color.</li>
-  <li><strong>Dark</strong>: A dark theme that reduces eye strain.</li>
-  <li><strong>Slice</strong>: The default Slice.js theme.</li>
-</ul>
-
-<div class="theme-samples"></div>
-
-<h2 id="theme-configuration">Theme Configuration</h2>
-<p>
-  You can configure the theme behavior in the <code>sliceConfig.json</code> file:
-</p>
-<div class="theme-config-example"></div>
-
-<p>The configuration options are:</p>
-<ul>
-  <li><strong>enabled</strong>: Enables or disables the theme system.</li>
-  <li><strong>defaultTheme</strong>: Sets the default theme to be applied when the application starts.</li>
-  <li><strong>saveThemeLocally</strong>: If enabled, saves the user's theme preference in localStorage.</li>
-  <li><strong>useBrowserTheme</strong>: If enabled, uses the user's system preference (light/dark).</li>
-</ul>
-
-<h2 id="using-themes">Changing Themes at Runtime</h2>
-<p>
-  Slice.js allows you to change themes dynamically at runtime through its API:
-</p>
-<div class="theme-apply-example"></div>
-
-<h2 id="theme-variables">CSS Variables Used in Themes</h2>
-<p>
-  Slice.js themes use a consistent set of CSS variables to control appearance.
-  These are some of the main variables:
-</p>
-<div class="css-vars-example"></div>
-
-<h2 id="custom-themes">Creating Custom Themes</h2>
-<p>
-  To create your own custom theme, simply create a new CSS file in the <code>/src/Themes/</code> folder
-  and define the necessary CSS variables. For example:
-</p>
-<div class="custom-theme-example"></div>
-
-<h2 id="theme-best-practices">Best Practices for Using Themes</h2>
-<p>
-  When developing components for Slice.js, follow these practices to ensure they work correctly with the theme system:
-</p>
-<ul>
-  <li>Always use the CSS variables defined in the themes instead of hardcoded colors.</li>
-  <li>For elements with different states (hover, active, etc.), create CSS rules that respect the theme's color scheme.</li>
-  <li>Test your components with different themes to ensure they look good in all of them.</li>
-  <li>If your component needs specific styles based on the current theme, you can add classes based on the current theme.</li>
-</ul>
-
-<h2 id="theme-transitions">Theme Transitions</h2>
-<p>
-  When changing from one theme to another, styles are updated immediately. If you want to add smooth transitions
-  when changing themes, you can add CSS transition rules to your elements:
-</p>
-<div class="theme-transition-example">
-  <pre><code class="language-css">* {
-  transition: background-color 0.3s ease, color 0.3s ease;
-}</code></pre>
-</div>

package/src/Components/AppComponents/ThemesDocumentation/ThemesDocumentation.js

@@ -1,149 +0,0 @@
-export default class ThemesDocumentation extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = [];
-   }
-
-   async init() {
-      // Code examples to show in the documentation
-      const themeConfigExample = await slice.build("CodeVisualizer", {
-         language: "json",
-         value: `{
-  "themeManager": {
-    "enabled": true,
-    "defaultTheme": "Slice",
-    "saveThemeLocally": true,
-    "useBrowserTheme": false
-  }
-}`
-      });
-      this.querySelector(".theme-config-example").appendChild(themeConfigExample);
-
-      const themeApplyExample = await slice.build("CodeVisualizer", {
-         language: "javascript",
-         value: `// Change to a specific theme
-await slice.setTheme("Dark");
-
-// Get current theme
-const currentTheme = slice.theme; // Returns theme name, e.g. "Dark"
-
-// In a button or switch to toggle themes
-const themeToggleButton = await slice.build("Button", {
-   value: "Change Theme",
-   onClickCallback: async () => {
-      if (slice.theme === "Light") {
-         await slice.setTheme("Dark");
-      } else {
-         await slice.setTheme("Light");
-      }
-   }
-});`
-      });
-      this.querySelector(".theme-apply-example").appendChild(themeApplyExample);
-
-      const cssVarsExample = await slice.build("CodeVisualizer", {
-         language: "css",
-         value: `:root {
-  /* Main colors */
-  --primary-color: #0066ff;
-  --primary-color-rgb: rgb(0, 102, 255);
-  --primary-background-color: #fff;
-  --primary-color-contrast: #fff;
-  --primary-color-shade: #ddd;
-  
-  /* Secondary colors */
-  --secondary-color: #63ccfd;
-  --secondary-background-color: #ddd;
-  --secondary-color-contrast: #fff;
-  
-  /* State colors */
-  --success-color: #00ff40;
-  --warning-color: #ffff40;
-  --danger-color: #ff0000;
-  
-  /* Typography */
-  --font-primary-color: #000;
-  --font-secondary-color: #474747;
-  
-  /* Other styles */
-  --border-radius-slice: 5px;
-  --slice-border: 1px;
-  --font-family: system-ui, sans-serif;
-}`
-      });
-      this.querySelector(".css-vars-example").appendChild(cssVarsExample);
-
-      const customThemeExample = await slice.build("CodeVisualizer", {
-         language: "css",
-         value: `/* src/Themes/MyCustomTheme.css */
-:root {
-  /* Custom corporate theme */
-  --primary-color: #8e44ad;            /* Corporate purple */
-  --primary-color-rgb: rgb(142, 68, 173);
-  --primary-background-color: #f9f9f9; /* Light background */
-  --primary-color-contrast: #ffffff;   /* White text on purple */
-  --primary-color-shade: #7d3c98;      /* Darker purple for shadows */
-  
-  --secondary-color: #2ecc71;          /* Secondary green */
-  --secondary-background-color: #eee;
-  --secondary-color-contrast: #ffffff;
-  
-  --success-color: #27ae60;
-  --warning-color: #f39c12;
-  --danger-color: #e74c3c;
-  
-  --font-primary-color: #333333;
-  --font-secondary-color: #666666;
-}`
-      });
-      this.querySelector(".custom-theme-example").appendChild(customThemeExample);
-
-      // Create visual theme examples
-      const themeGrid = await slice.build("Grid", {
-         columns: 3,
-         rows: 1
-      });
-
-      // Create color samples for themes
-      const createThemeSample = async (themeName, primaryColor, bgColor, textColor) => {
-         const sample = document.createElement("div");
-         sample.classList.add("theme-sample");
-         sample.style.backgroundColor = bgColor;
-         sample.style.color = textColor;
-         sample.style.borderColor = primaryColor;
-         
-         const title = document.createElement("h3");
-         title.textContent = themeName;
-         
-         const button = await slice.build("Button", {
-            value: "Example Button",
-            customColor: {
-               button: primaryColor,
-               label: textColor
-            }
-         });
-         
-         sample.appendChild(title);
-         sample.appendChild(button);
-         
-         return sample;
-      };
-
-      const lightSample = await createThemeSample("Light Theme", "#0066ff", "#ffffff", "#000000");
-      const darkSample = await createThemeSample("Dark Theme", "#0066ff", "#282828", "#ffffff"); 
-      const sliceSample = await createThemeSample("Slice Theme", "#A31D1D", "#FEF9E1", "#6D2323");
-      
-      await themeGrid.setItem(lightSample);
-      await themeGrid.setItem(darkSample);
-      await themeGrid.setItem(sliceSample);
-
-      this.querySelector(".theme-samples").appendChild(themeGrid);
-   }
-}
-
-customElements.define("slice-themesdocumentation", ThemesDocumentation);
-
-

package/src/Components/AppComponents/VisualDocumentation/VisualDocumentation.css

@@ -1,70 +0,0 @@
-slice-visualdocumentation {
-  color: var(--font-primary-color);
-}
-
-slice-visualdocumentation h1,
-slice-visualdocumentation h2,
-slice-visualdocumentation h3 {
-  margin-top: 1.5em;
-  margin-bottom: 0.5em;
-}
-
-slice-visualdocumentation p {
-  line-height: 1.6;
-  margin: 1em 0;
-}
-
-slice-visualdocumentation ul,
-slice-visualdocumentation ol {
-  margin: 1em 0;
-  padding-left: 2em;
-}
-
-slice-visualdocumentation li {
-  margin-bottom: 0.5em;
-}
-
-slice-visualdocumentation code {
-  font-family: monospace;
-  background-color: var(--secondary-background-color);
-  padding: 0.2em 0.4em;
-  border-radius: 3px;
-  font-size: 0.9em;
-}
-
-slice-visualdocumentation .visual-build-example,
-slice-visualdocumentation .visual-lifecycle-example,
-slice-visualdocumentation .nested-components-example,
-slice-visualdocumentation .nested-components-usage {
-  margin: 1.5em 0;
-}
-
-slice-visualdocumentation strong {
-  color: var(--primary-color);
-}
-
-slice-visualdocumentation .faq-section {
-  margin: 2em 0;
-}
-
-slice-visualdocumentation .faq-section slice-details {
-  margin-bottom: 1em;
-}
-
-slice-visualdocumentation table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 1.5em 0;
-}
-
-slice-visualdocumentation th,
-slice-visualdocumentation td {
-  padding: 0.75em;
-  text-align: left;
-  border-bottom: 1px solid var(--primary-color-shade);
-}
-
-slice-visualdocumentation th {
-  background-color: var(--primary-color);
-  color: var(--primary-color-contrast);
-}