added tabs

resources/assets/js/components/home/debugger/ModalDebugger.vue

@@ -0,0 +1,233 @@
+<template>
+  <b-modal ref="modal-debugger" hide-footer size="xl">
+    <tabs>
+      <tab name="Variables">
+        <div
+          class="btn-toolbar justify-content-between"
+          role="toolbar"
+          aria-label="Toolbar with button groups"
+        >
+          <div
+            class="btn-group"
+            role="group"
+            aria-label="Basic radio toggle button group"
+          >
+            <input
+              type="radio"
+              class="btn-check"
+              name="btnradio"
+              id="btnradio1"
+              autocomplete="off"
+              checked
+            />
+            <label class="btn btn-outline-secondary" for="btnradio1"
+              >Radio 1</label
+            >
+
+            <input
+              type="radio"
+              class="btn-check"
+              name="btnradio"
+              id="btnradio2"
+              autocomplete="off"
+            />
+            <label class="btn btn-outline-secondary" for="btnradio2"
+              >Radio 2</label
+            >
+
+            <input
+              type="radio"
+              class="btn-check"
+              name="btnradio"
+              id="btnradio3"
+              autocomplete="off"
+            />
+            <label class="btn btn-outline-secondary" for="btnradio3"
+              >Radio 3</label
+            >
+          </div>
+          <div class="input-group">
+            <div class="input-group-text" id="btnGroupAddon2">@</div>
+            <input
+              type="text"
+              class="form-control"
+              placeholder="Input group example"
+              aria-label="Input group example"
+              aria-describedby="btnGroupAddon2"
+            />
+          </div>
+        </div>
+      </tab>
+      <tab name="Triggers"> </tab>
+    </tabs>
+  </b-modal>
+</template>
+
+<script>
+import Tabs from "../../../components/tabs/Tabs.vue";
+import Tab from "../../../components/tabs/Tab.vue";
+export default {
+  name: "ModalDebugger",
+  components: {
+    Tabs,
+    Tab,
+  },
+  props: {},
+  mounted() {
+    this.initializeDebugTab();
+  },
+  data() {
+    return {
+      data: null,
+      debugFullPage: false,
+      debugTabs: [],
+      activetab: 1,
+      variableTabs: [],
+      debugSearch: "",
+      isRTL: false,
+    };
+  },
+  methods: {
+    classBtn(cls) {
+      return "btn v-btn-request " + cls;
+    },
+    show() {
+      this.$refs["modal-debugger"].show();
+    },
+    cancel() {
+      this.$refs["modal-debugger"].hide();
+    },
+    unpauseCase() {},
+    /**
+     * Initializate debug menu
+     */
+    initializeDebugTab() {
+      this.debugTabs = [
+        {
+          id: "this.language.ID_VARIABLES",
+          title: "this.language.ID_VARIABLES",
+          function: "",
+        },
+        {
+          id: "this.language.ID_TRIGGERS",
+          title: "this.language.ID_TRIGGERS",
+          function: "",
+        },
+      ];
+      this.variableTabs = [
+        {
+          id: "this.language.ID_ALL",
+          title: "this.language.ID_ALL",
+          function: "",
+        },
+        {
+          id: "this.language.ID_DYNAFORMS",
+          title: "this.language.ID_DYNAFORMS",
+          function: "",
+        },
+        {
+          id: "this.language.ID_SYSTEM",
+          title: "this.language.ID_SYSTEM",
+          function: "",
+        },
+      ];
+    },
+  },
+};
+</script>
+
+<style>
+.tabs-component {
+  margin: 0 0;
+}
+
+.tabs-component-tabs {
+  border: solid 1px #ddd;
+  border-radius: 6px;
+  margin-bottom: 5px;
+}
+
+@media (min-width: 700px) {
+  .tabs-component-tabs {
+    border: 0;
+    align-items: stretch;
+    display: flex;
+    justify-content: flex-start;
+    margin-bottom: -1px;
+  }
+}
+
+.tabs-component-tab {
+  color: #999;
+  font-size: 14px;
+  font-weight: 600;
+  margin-right: 0;
+  list-style: none;
+}
+
+.tabs-component-tab:not(:last-child) {
+  border-bottom: dotted 1px #ddd;
+}
+
+.tabs-component-tab:hover {
+  color: #666;
+}
+
+.tabs-component-tab.is-active {
+  color: #000;
+}
+
+.tabs-component-tab.is-disabled * {
+  color: #cdcdcd;
+  cursor: not-allowed !important;
+}
+
+@media (min-width: 700px) {
+  .tabs-component-tab {
+    background-color: #fff;
+    border: solid 1px #ddd;
+    border-radius: 3px 3px 0 0;
+    margin-right: 0.5em;
+    transform: translateY(2px);
+    transition: transform 0.3s ease;
+  }
+
+  .tabs-component-tab.is-active {
+    border-bottom: solid 1px #fff;
+    z-index: 2;
+    transform: translateY(0);
+  }
+}
+
+.tabs-component-tab-a {
+  align-items: center;
+  color: inherit;
+  display: flex;
+  padding: 0.75em 1em;
+  text-decoration: none;
+}
+
+.tabs-component-panels {
+  padding: 4em 0;
+}
+
+@media (min-width: 700px) {
+  .tabs-component-panels {
+    border-top-left-radius: 0;
+    background-color: #fff;
+    border: solid 1px #ddd;
+    border-radius: 0 6px 6px 6px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
+    padding: 0.5em 0.5em;
+  }
+}
+
+.btn-group > input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+  display: none;
+}
+</style>
+
+