chore(wip): demo logic and styles added

Author: Cathy Siller

docs/components/files/drop-zone-demo.js

@@ -2,8 +2,24 @@ if (document.getElementById('vue-dropZoneDemo')) {
     new Vue({
         el: '#vue-dropZoneDemo',
         methods: {
-            onDrop: function () {
-                alert('Unicorn pigeon puppy pop rainbows delight social pop!');
+            onDrop: function (evt) {
+                // Prevent default behavior (Prevent file from being opened)
+                evt.preventDefault();
+                if (evt.dataTransfer.items) {
+                    // Use DataTransferItemList interface to access the file(s)
+                    for (var i = 0; i < evt.dataTransfer.items.length; i++) {
+                        // If dropped items aren't files, reject them
+                        if (evt.dataTransfer.items[i].kind === 'file') {
+                            var file = evt.dataTransfer.items[i].getAsFile();
+                            alert('File Drop Successful! ' + file.name);
+                        }
+                    }
+                } else {
+                // Use DataTransfer interface to access the file(s)
+                    for (var i = 0; i < evt.dataTransfer.files.length; i++) {
+                        //alert('file drop successful! ' + evt.dataTransfer.files[i].name);
+                    }
+                }
             },
         },
     });

docs/components/files/index.html

@@ -19,25 +19,29 @@ <h2 id="drop-fence">Drop Fence</h2>
       <div>
         <div class="hxFence">
           <hx-file-icon type="paperclip"></hx-file-icon>
-          Drop a file here or 
-          <hx-file-input
-            class="hxTertiary" 
-            label="browse your files">
-            <input type="file" />
-          </hx-file-input>
+          <p>
+            Drop files here or
+            <hx-file-input
+              class="hxTertiary" 
+              label="browse your files">
+              <input type="file" />
+            </hx-file-input>
+          </p>
         </div>
       </div>
 
       <footer>
         {% code 'text' %}
           <div class="hxFence">
             <hx-file-icon type="paperclip"></hx-file-icon>
-            Drop a file here or 
-            <hx-file-input
-              class="hxTertiary" 
-              label="browse your files">
-              <input type="file" />
-            </hx-file-input>
+            <p>
+              Drop files here or
+              <hx-file-input
+                class="hxTertiary" 
+                label="browse your files">
+                <input type="file" />
+              </hx-file-input>
+            </p>
           </div>
         {% endcode %}
       </footer>
@@ -50,10 +54,10 @@ <h2 id="drop-zone">Drop Zone</h2>
     <div class="example" id="vue-dropZoneDemo">
       <div>
         <hx-drop-zone
-          @drop="onDrop">
+          @drop.prevent="onDrop">
           <div class="hxFence">
             <hx-file-icon type="paperclip"></hx-file-icon>
-            Drop a file here or
+            Drop files here or
             <hx-file-input
               class="hxTertiary" 
               label="browse your files">
@@ -65,10 +69,11 @@ <h2 id="drop-zone">Drop Zone</h2>
 
       <footer>
         {% code 'text' %}
-          <hx-drop-zone>
+          <hx-drop-zone
+            @drop.prevent="onDrop">
             <div class="hxFence">
               <hx-file-icon type="paperclip"></hx-file-icon>
-              Drop a file here or
+              Drop files here or
               <hx-file-input
                 class="hxTertiary" 
                 label="browse your files">

docs/elements/hx-drop-zone/index.html

@@ -1,6 +1,6 @@
 ---
 title: <hx-drop-zone>
-minver: 0.13.0
+minver: 0.14.0
 also:
   components/files: Files
 ---
@@ -27,14 +27,13 @@
       </div>
     </dl>
   </section>
-
-  <section>
-    <h2 id="methods">Methods</h2>
-  </section>
-{% endblock %}
-
-{% block attributes %}
 {% endblock %}
 
 {% block properties %}
+  <dt>drag {String}</dt>
+    <dd>
+      <p>
+        <i>(read-only)</i>
+      </p>
+    </dd>
 {% endblock %}

src/helix-ui/elements/HXDropZoneElement.js

@@ -86,18 +86,11 @@ export class HXDropZoneElement extends HXElement {
         window.clearTimeout(this._zoneDragLeaveTimeout);
     }
 
-    drop () {
-        if (this.$emit('drop')) {
-            this.remove();
-        }
-    }
-
     /** @private */
     _onDrop (evt) {
         //evt.preventDefault();
         this.removeAttribute('drag');
         this._isDragging = false;
         this._isZoneDragging = false;
-        this.drop();
     }
 }

src/helix-ui/styles/elements/hx-drop-zone.less

@@ -42,4 +42,8 @@ hx-drop-zone {
   hx-file-icon {
     display: block;
   }
+
+  > * + * {
+    margin-top: 0.5rem;
+  }
 }