#156 added sortable styles

headwirecom · Aug 26, 2020 · c9eceb6 · c9eceb6
1 parent c0b1a49
commit c9eceb6
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 14 deletions.
diff --git a/fragments/datalist/hatch.js b/fragments/datalist/hatch.js
@@ -3,7 +3,17 @@ module.exports = {
         f.wrap($, 'themecleanflex-components-block')
         f.bindAttribute($.parent(),'model','model')
 
-        let heading = $.find('th').first()
+        let heading = $.find('th span').first()
+
+        let dropdownArrow = $.find('svg').first()
+        let dropdownArrowClasses = `{
+            'rotate-0': active,
+            'rotate-180': !active,
+            'hidden': !model.sortable
+        }`
+        f.bindAttribute(dropdownArrow, 'class', dropdownArrowClasses, false)
+        f.bindEvent(dropdownArrow, 'click', "toggleSort(i)");
+
         f.mapField(heading, 'storageData')
     }
 }
diff --git a/fragments/datalist/template.html b/fragments/datalist/template.html
@@ -1,9 +1,9 @@
 <div>
-    <table>
+    <table class="w-full border">
         <thead>
             <tr>
-                <th>
-                    <span>Column Header</span>
+                <th class="flex">
+                    <span>Column1 Header</span>
                     <svg width="16" height="16" viewBox="0 0 16 16" focusable="false" class="transition-transform duration-150 ease-in-out">
                         <path fill-rule="evenodd" clip-rule="evenodd" d="M13.293 4.29291L14.7072 5.70712L8.00008 12.4142L1.29297 5.70712L2.70718 4.29291L8.00008 9.5858L13.293 4.29291Z"/>
                     </svg>
@@ -12,8 +12,13 @@
         </thead>
         <tbody>
             <tr>
-                <td>Column item</td>
-                <td>Column item</td>
+                <td>Column1 item1</td>
+                <td>Column2 item1</td>
+            </tr>
+
+            <tr>
+                <td>Column1 item2</td>
+                <td>Column2 item2</td>
             </tr>
         </tbody>
         <caption></caption>

diff --git a/fragments/datalist/template.vue b/fragments/datalist/template.vue
@@ -1,16 +1,32 @@
 <template>
   <themecleanflex-components-block v-bind:model="model">
     <div>
-      <table>
+      <table class="w-full border">
         <thead>
           <tr>
-            <th data-per-inline="storageData">{{storageData}}</th>
+            <th class="flex">
+              <span data-per-inline="storageData">{{storageData}}</span>
+              <svg width="16" height="16" viewBox="0 0 16 16"
+              focusable="false" class="transition-transform duration-150 ease-in-out"
+              v-bind:class="{
+            'rotate-0': active,
+            'rotate-180': !active,
+            'hidden': !model.sortable
+        }" v-on:click="toggleSort(i)">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M13.293 4.29291L14.7072 5.70712L8.00008 12.4142L1.29297 5.70712L2.70718 4.29291L8.00008 9.5858L13.293 4.29291Z"
+                />
+              </svg>
+            </th>
           </tr>
         </thead>
         <tbody>
           <tr>
-            <td>Column item</td>
-            <td>Column item</td>
+            <td>Column1 item1</td>
+            <td>Column2 item1</td>
+          </tr>
+          <tr>
+            <td>Column1 item2</td>
+            <td>Column2 item2</td>
           </tr>
         </tbody>
         <caption></caption>
@@ -23,7 +39,9 @@
     export default {
         props: ['model'],
         data() {
+          const numElements = this.model.columns ? this.model.columns.length : 0;
           return {
+            active: new Array(numElements).fill(false),
             storageData: JSON.parse(localStorage.getItem('list'))
           }
         },
@@ -33,6 +51,13 @@
            window.addEventListener('storage', () => {
             this.storageData = JSON.parse(localStorage.getItem('list'))
            });
+        },
+        methods: {
+          toggleSort: function() {
+            this.active.forEach( (active,j) => {
+              Vue.set(this.active, j, j === i ? !this.active[j] : false);
+            })
+          },
         }
     }
 </script>
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/datalist/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/datalist/template.vue
@@ -1,16 +1,32 @@
 <template>
   <themecleanflex-components-block v-bind:model="model">
     <div>
-      <table>
+      <table class="w-full border">
         <thead>
           <tr>
-            <th data-per-inline="storageData">{{storageData}}</th>
+            <th class="flex">
+              <span data-per-inline="storageData">{{storageData}}</span>
+              <svg width="16" height="16" viewBox="0 0 16 16"
+              focusable="false" class="transition-transform duration-150 ease-in-out"
+              v-bind:class="{
+            'rotate-0': active,
+            'rotate-180': !active,
+            'hidden': !model.sortable
+        }" v-on:click="toggleSort(i)">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M13.293 4.29291L14.7072 5.70712L8.00008 12.4142L1.29297 5.70712L2.70718 4.29291L8.00008 9.5858L13.293 4.29291Z"
+                />
+              </svg>
+            </th>
           </tr>
         </thead>
         <tbody>
           <tr>
-            <td>Column item</td>
-            <td>Column item</td>
+            <td>Column1 item1</td>
+            <td>Column2 item1</td>
+          </tr>
+          <tr>
+            <td>Column1 item2</td>
+            <td>Column2 item2</td>
           </tr>
         </tbody>
         <caption></caption>
@@ -23,7 +39,9 @@
     export default {
         props: ['model'],
         data() {
+          const numElements = this.model.columns ? this.model.columns.length : 0;
           return {
+            active: new Array(numElements).fill(false),
             storageData: JSON.parse(localStorage.getItem('list'))
           }
         },
@@ -33,6 +51,13 @@
            window.addEventListener('storage', () => {
             this.storageData = JSON.parse(localStorage.getItem('list'))
            });
+        },
+        methods: {
+          toggleSort: function() {
+            this.active.forEach( (active,j) => {
+              Vue.set(this.active, j, j === i ? !this.active[j] : false);
+            })
+          },
         }
     }
 </script>
diff --git a/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/css/build.css b/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/css/build.css
@@ -467,6 +467,10 @@ button,
   cursor: pointer;
 }
 
+table {
+  border-collapse: collapse;
+}
+
 h1,
 h2,
 h3,
@@ -720,6 +724,10 @@ video {
   display: flex;
 }
 
+.table {
+  display: table;
+}
+
 .hidden {
   display: none;
 }
@@ -1297,6 +1305,14 @@ video {
   z-index: 10;
 }
 
+.rotate-0 {
+  --transform-rotate: 0;
+}
+
+.rotate-180 {
+  --transform-rotate: 180deg;
+}
+
 .transition {
   transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
 }