From 85cac81f88cd6fb3acd77d3b0f91bd75edb59007 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Sat, 14 Aug 2021 15:41:38 +0300
Subject: [PATCH] #48 : Update custom h elements

---
 src/docs/Layouts/Main.svelte              |  3 +--
 src/docs/Layouts/custom/{ => H}/H.svelte  | 25 ++++++++++++++---------
 src/docs/Layouts/custom/H/H1/H1.svelte    | 14 +++++++++++++
 src/docs/Layouts/custom/H/H1/H1Dom.svelte |  3 +++
 src/docs/Layouts/custom/H/H2/H2.svelte    | 14 +++++++++++++
 src/docs/Layouts/custom/H/H2/H2Dom.svelte |  3 +++
 src/docs/Layouts/custom/H/index.js        |  7 +++++++
 src/docs/Layouts/custom/H1.svelte         |  8 --------
 src/docs/Layouts/custom/H2.svelte         |  8 --------
 src/docs/Layouts/custom/dom/H1.svelte     |  9 --------
 src/docs/Layouts/custom/dom/H2.svelte     |  9 --------
 11 files changed, 57 insertions(+), 46 deletions(-)
 rename src/docs/Layouts/custom/{ => H}/H.svelte (57%)
 create mode 100644 src/docs/Layouts/custom/H/H1/H1.svelte
 create mode 100644 src/docs/Layouts/custom/H/H1/H1Dom.svelte
 create mode 100644 src/docs/Layouts/custom/H/H2/H2.svelte
 create mode 100644 src/docs/Layouts/custom/H/H2/H2Dom.svelte
 create mode 100644 src/docs/Layouts/custom/H/index.js
 delete mode 100644 src/docs/Layouts/custom/H1.svelte
 delete mode 100644 src/docs/Layouts/custom/H2.svelte
 delete mode 100644 src/docs/Layouts/custom/dom/H1.svelte
 delete mode 100644 src/docs/Layouts/custom/dom/H2.svelte

diff --git a/src/docs/Layouts/Main.svelte b/src/docs/Layouts/Main.svelte
index 926628e..7565021 100644
--- a/src/docs/Layouts/Main.svelte
+++ b/src/docs/Layouts/Main.svelte
@@ -3,8 +3,7 @@
   import Th from './custom/Th.svelte';
   import Tr from './custom/Tr.svelte';
   import Td from './custom/Td.svelte';
-  import H1 from './custom/H1.svelte';
-  import H2 from './custom/H2.svelte';
+  import { H1, H2 } from './custom/H';
   export {
     Table as table,
     Th as th,
diff --git a/src/docs/Layouts/custom/H.svelte b/src/docs/Layouts/custom/H/H.svelte
similarity index 57%
rename from src/docs/Layouts/custom/H.svelte
rename to src/docs/Layouts/custom/H/H.svelte
index 46d6274..fed2c10 100644
--- a/src/docs/Layouts/custom/H.svelte
+++ b/src/docs/Layouts/custom/H/H.svelte
@@ -1,6 +1,6 @@
 <script>
   import { onMount } from 'svelte'
-  import { parseTitleStr } from '../../utils/string'
+  import { parseTitleStr } from '../../../utils/string'
 
   export let titleComponent
   let titleEl
@@ -14,17 +14,22 @@
   })
 </script>
 
-<svelte:component this={titleComponent} id={anchorId} class="title">
-  <a class="anchor" href={`#${anchorId}`}>
-    {title}
-    {#if !title}
-      <span bind:this={titleEl}><slot /></span>
-    {/if}
-  </a>
-</svelte:component>
+<div>
+  <svelte:component this={titleComponent} id={anchorId} class="title">
+    <a class="anchor" href={`#${anchorId}`}>
+      {title}
+      {#if !title}
+        <span bind:this={titleEl}><slot /></span>
+      {/if}
+    </a>
+  </svelte:component>
+</div>
 
 <style>
-  :global(.title):hover .anchor::before {
+  :global(.title) {
+    display: inline-block;
+  }
+  :global(.title:hover .anchor::before) {
     visibility: visible;
   }
   .anchor {
diff --git a/src/docs/Layouts/custom/H/H1/H1.svelte b/src/docs/Layouts/custom/H/H1/H1.svelte
new file mode 100644
index 0000000..aa4c679
--- /dev/null
+++ b/src/docs/Layouts/custom/H/H1/H1.svelte
@@ -0,0 +1,14 @@
+<script>
+  import H from '../H.svelte'
+  import H1 from './H1Dom.svelte'
+</script>
+
+<H titleComponent={H1}>
+  <slot />
+</H>
+
+<style>
+  :global(h1.title .anchor::before) {
+    top: 15px;
+  }
+</style>
diff --git a/src/docs/Layouts/custom/H/H1/H1Dom.svelte b/src/docs/Layouts/custom/H/H1/H1Dom.svelte
new file mode 100644
index 0000000..20888ba
--- /dev/null
+++ b/src/docs/Layouts/custom/H/H1/H1Dom.svelte
@@ -0,0 +1,3 @@
+<h1 {...$$props}>
+  <slot />
+</h1>
diff --git a/src/docs/Layouts/custom/H/H2/H2.svelte b/src/docs/Layouts/custom/H/H2/H2.svelte
new file mode 100644
index 0000000..e774fe0
--- /dev/null
+++ b/src/docs/Layouts/custom/H/H2/H2.svelte
@@ -0,0 +1,14 @@
+<script>
+  import H from '../H.svelte'
+  import H2 from './H2Dom.svelte'
+</script>
+
+<H titleComponent={H2}>
+  <slot />
+</H>
+
+<style>
+  :global(h2.title .anchor::before) {
+    top: 8px;
+  }
+</style>
diff --git a/src/docs/Layouts/custom/H/H2/H2Dom.svelte b/src/docs/Layouts/custom/H/H2/H2Dom.svelte
new file mode 100644
index 0000000..8a99575
--- /dev/null
+++ b/src/docs/Layouts/custom/H/H2/H2Dom.svelte
@@ -0,0 +1,3 @@
+<h2 {...$$props}>
+  <slot />
+</h2>
diff --git a/src/docs/Layouts/custom/H/index.js b/src/docs/Layouts/custom/H/index.js
new file mode 100644
index 0000000..3562458
--- /dev/null
+++ b/src/docs/Layouts/custom/H/index.js
@@ -0,0 +1,7 @@
+import H1 from './H1/H1.svelte'
+import H2 from './H2/H2.svelte'
+
+export {
+  H1,
+  H2
+}
diff --git a/src/docs/Layouts/custom/H1.svelte b/src/docs/Layouts/custom/H1.svelte
deleted file mode 100644
index 329c9fb..0000000
--- a/src/docs/Layouts/custom/H1.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script>
-  import H from './H.svelte'
-  import H1 from './dom/H1.svelte'
-</script>
-
-<H titleComponent={H1}>
-  <slot />
-</H>
diff --git a/src/docs/Layouts/custom/H2.svelte b/src/docs/Layouts/custom/H2.svelte
deleted file mode 100644
index ee3940e..0000000
--- a/src/docs/Layouts/custom/H2.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script>
-  import H from './H.svelte'
-  import H2 from './dom/H2.svelte'
-</script>
-
-<H titleComponent={H2}>
-  <slot />
-</H>
diff --git a/src/docs/Layouts/custom/dom/H1.svelte b/src/docs/Layouts/custom/dom/H1.svelte
deleted file mode 100644
index b444148..0000000
--- a/src/docs/Layouts/custom/dom/H1.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<h1 {...$$props}>
-  <slot />
-</h1>
-
-<style>
-  :global(h1 .anchor::before) {
-    top: 15px;
-  }
-</style>
diff --git a/src/docs/Layouts/custom/dom/H2.svelte b/src/docs/Layouts/custom/dom/H2.svelte
deleted file mode 100644
index 6b10d49..0000000
--- a/src/docs/Layouts/custom/dom/H2.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<h2 {...$$props}>
-  <slot />
-</h2>
-
-<style>
-  :global(h2 .anchor::before) {
-    top: 8px;
-  }
-</style>