feat: name attribute and variable renamed to key

Author: frankpagan

docs/index.html

@@ -11,10 +11,10 @@
             sizes="32x32"
             href="https://cocreate.app/images/favicon.ico" />
         <meta
-            name="description"
+            key="description"
             content="A simple HTML5 and pure javascript component. Easy configuration using HTML5 attributes or Javscript api and highly styleable." />
         <meta
-            name="keywords"
+            key="keywords"
             content="helper classes, utility classes, css framework, css library, inline style classes" />
         <meta name="robots" content="index,follow" />
         <meta
@@ -31,7 +31,7 @@
             href="/docs/index.css"
             array="files"
             object="60888216117c640e7596303f"
-            name="src"
+            key="src"
             type="text/css"
             save="true" />
         <link rel="manifest" href="/manifest.webmanifest" />
@@ -46,7 +46,7 @@
             scroll-down="10"
             array="files"
             object="60395ef42b3ac232657040fd"
-            name="src"></nav>
+            key="src"></nav>
         <sidenav
             id="menuL"
             class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
@@ -57,7 +57,7 @@
             <menu
                 array="files"
                 object="603717b07de7fb350ae9fec8"
-                name="src"></menu>
+                key="src"></menu>
             <div resize="right"></div>
         </sidenav>
         <main
@@ -283,7 +283,7 @@ <h2 class="padding:5px_0px">Demo</h2>
                                     lang="html"
                                     array="demos"
                                     object=""
-                                    name="demo"
+                                    key="demo"
                                     save="false"
                                     id="demo"
                                     input-selector=".demopreview"

src/dashboard.html

@@ -109,14 +109,14 @@
         </div>
 
         <div content_id="content">
-            <!--<div class="domEditor main-height" name="cards1" array="test" object="5f075add24d24a175fca5490" pass_id="me1234" >-->
+            <!--<div class="domEditor main-height" key="cards1" array="test" object="5f075add24d24a175fca5490" pass_id="me1234" >-->
             <div
                 class="domEditor main-height"
-                name="cards1"
+                key="cards1"
                 array="test"
                 pass_id="me1234">
                 <div
-                    dnd-group-name="dashboard"
+                    dnd-group-key="dashboard"
                     droppable="true"
                     class="dnd"
                     resizable="true"
@@ -210,13 +210,13 @@ <h2>$500</h2>
                 <!--<div id="card" class="card margin:5px border-radius-2px flex-grow-1 template " style="width:calc( 20% - 10px )">-->
                 <!--  <div class="margin:15px font-size:18px color-dark-gray">-->
                 <!--    <span class="display:inline-block">-->
-                <!--      <input array="module_activity" pass_id="form-fields" object="" name="clone-name" id="stage-name" class="input_field" placeholder="card">-->
+                <!--      <input array="module_activity" pass_id="form-fields" object="" key="clone-name" id="stage-name" class="input_field" placeholder="card">-->
                 <!--    </span>-->
                 <!--    <span class="float:right display:inline-block"><a clone_id="card" class="deleteBtn reset-layout"><i class="height:18px fill:#505050" src="/assets/svg/times.svg"></i></a></span>-->
                 <!--  </div>-->
                 <!--  <div class="border:bottom border-color-extra-medium-gray">-->
                 <!--    <div class="display:flex align-items:center margin:0px_15px">-->
-                <!--      <form array="module_activity" sortable dnd-group-name="task-items" id="testForm">-->
+                <!--      <form array="module_activity" sortable dnd-group-key="task-items" id="testForm">-->
                 <!-- sortable task item -->
                 <!--        <div id="task-item" class="display:flex flex-wrap-nowrap align-items:center margin:0px_15px padding:10px_0px template">-->
                 <!--          <h3>Something...</h3>-->