bkp

src/playground/App.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent } from "vue";
 import BotaoPlayground from "./botao.playground.vue";
 import IndicadorPlayground from "./indicador.playground.vue";
 import CartaoPlayground from "./cartao.playground.vue";
@@ -34,8 +34,37 @@ import DataHoraPlayground from "./data_hora.playground.vue";
 import TabelaPlayground from "./tabela.playground.vue";
 import OlaMundoPlayground from "./ola_mundo.playground.vue";
 
+type AbaPlayground =
+  | "botao"
+  | "indicador"
+  | "cartao"
+  | "campo"
+  | "data_hora"
+  | "tabela"
+  | "ola_mundo";
+
+const mapaHashParaAba: Record<string, AbaPlayground> = {
+  botao: "botao",
+  indicador: "indicador",
+  cartao: "cartao",
+  campo: "campo",
+  "data-hora": "data_hora",
+  tabela: "tabela",
+  demo: "ola_mundo",
+};
+
+const mapaAbaParaHash: Record<AbaPlayground, string> = {
+  botao: "botao",
+  indicador: "indicador",
+  cartao: "cartao",
+  campo: "campo",
+  data_hora: "data-hora",
+  tabela: "tabela",
+  ola_mundo: "demo",
+};
+
 export default defineComponent({
-  name: 'App',
+  name: "App",
   components: {
     BotaoPlayground,
     IndicadorPlayground,
@@ -47,15 +76,45 @@ export default defineComponent({
   },
   data() {
     return {
-      aba: "botao" as
-        | "botao"
-        | "indicador"
-        | "cartao"
-        | "campo"
-        | "data_hora"
-        | "tabela"
-        | "ola_mundo",
+      aba: "botao" as AbaPlayground,
     };
-  }
-})
+  },
+  mounted() {
+    this.sincronizarAbaComHash();
+    window.addEventListener("hashchange", this.sincronizarAbaComHash);
+  },
+  beforeUnmount() {
+    window.removeEventListener("hashchange", this.sincronizarAbaComHash);
+  },
+  watch: {
+    aba() {
+      this.sincronizarHashComAba();
+    },
+  },
+  methods: {
+    normalizarHash() {
+      const valor = window.location.hash.replace(/^#\/?/, "").trim();
+      return valor;
+    },
+    sincronizarAbaComHash() {
+      const hash = this.normalizarHash();
+
+      const aba = mapaHashParaAba[hash] ?? "botao";
+
+      if (this.aba !== aba) {
+        this.aba = aba;
+      }
+
+      // Se a URL estiver vazia/fora do padrão, normalizamos.
+      this.sincronizarHashComAba();
+    },
+    sincronizarHashComAba() {
+      const destino = `#/${mapaAbaParaHash[this.aba]}`;
+
+      if (window.location.hash !== destino) {
+        window.location.hash = destino;
+      }
+    },
+  },
+});
 </script>