add popout tables

majak_uistyleguide/templates/patterns/atoms/table/popout_table.html

+<div class="__js-root">
+  <ui-popout-table sizing-classes="max-w-[100ch] w-full" :open-by-default="false">
+    <template slot="head">
+      <tr class="bg-black [&_*]:!text-white [&_*]:!pt-2">
+        <th>Company</th>
+        <th>Contact</th>
+        <th>Country</th>
+      </tr>
+    </template>
+
+    <template slot="body">
+      <tr>
+        <td>Alfreds Futterkiste</td>
+        <td>Maria Anders</td>
+        <td>Germany</td>
+      </tr>
+      <tr>
+        <td>Centro comercial Moctezuma</td>
+        <td>Francisco Chang</td>
+        <td>Mexico</td>
+      </tr>
+    </template>
+  </ui-popout-table>
+</div>
\ No newline at end of file

majak_uistyleguide/templates/patterns/templates/uniweb/universal_page_with_progress.html

@@ -14,6 +14,7 @@
     {% include "patterns/atoms/text/prose.html" %}
     {% include "patterns/atoms/text/prose.html" %}
     {% include "patterns/atoms/table/table.html" %}
+    {% include "patterns/atoms/table/popout_table.html" %}
   </div>
 </main>
 

src/js/components/PopoutTable.vue

+<template>
+  <table :class="'duration-200 my-6 prose ' + $props.sizingClasses">
+    <thead class="relative w-full duration-200">
+      <slot name="head"></slot>
+
+      <div class="absolute top-0 right-[-60px]">
+        <button
+          ref="togglerButton"
+          class="w-12 h-12 rounded-full bg-white hover:bg-grey-125 duration-150 flex justify-center items-center"
+          @click="$data.isOpen = !$data.isOpen"
+        >
+          <i
+            :class="
+              ($data.isOpen) ?
+              'ico--chevron-up' :
+              'ico--chevron-down'
+            "
+            class="text-2xl"
+          ></i>
+        </button>
+      </div>
+    </thead>
+
+    <tbody
+      v-if="$data.isOpen"
+      class="w-full duration-200"
+    >
+      <slot name="body"></slot>
+    </tbody>
+  </table>
+</template>
+
+<script>
+  export default {
+    props: {
+      sizingClasses: {
+        type: String,
+        required: false
+      },
+      openByDefault: {
+        type: Boolean,
+        required: true
+      }
+    },
+    data () {
+      return {
+        isOpen: false,
+        isOpen: this.$props.openByDefault
+      }
+    }
+  }
+</script>
\ No newline at end of file

src/js/main.js

@@ -26,6 +26,7 @@ import CardProgram from "./components/card_program/CardProgram"
 import CandidatePrimaryBox from "./components/CandidatePrimaryBox";
 import CandidateSecondaryList from "./components/secondary_candidates/CandidateSecondaryList";
 import Countdown from "./components/countdown/Countdown";
+import PopoutTable from "./components/PopoutTable";
 
 import SlideUpDown from 'vue-slide-up-down';
 
@@ -50,6 +51,7 @@ Vue.component("ui-card-program", CardProgram);
 Vue.component("ui-slide-up-down", SlideUpDown);
 Vue.component("ui-candidate-secondary-list", CandidateSecondaryList);
 Vue.component("ui-countdown", Countdown);
+Vue.component("ui-popout-table", PopoutTable);
 
 
 Fancybox.bind("[data-fancybox]", {