Merge pull request #39 from vadimkorr/feature/#38_Use-custom-elements-to-customize-tables-in-mdsvex

feature/#38 Use custom elements in mdsvex to customize table

docs/index.css

@@ -1,13 +1,17 @@
 html,body{position:relative;width:100%;height:100%;margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;}
 code[class*="language-"],pre[class*="language-"] {color:#ccc;background:none;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}pre[class*="language-"] {padding:1em;margin:.5em 0;overflow:auto;}:not(pre) > code[class*="language-"],pre[class*="language-"] {background:#2d2d2d;}:not(pre) > code[class*="language-"] {padding:.1em;border-radius:.3em;white-space:normal;}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata {color:#999;}.token.punctuation {color:#ccc;}.token.tag,.token.attr-name,.token.namespace,.token.deleted {color:#e2777a;}.token.function-name {color:#6196cc;}.token.boolean,.token.number,.token.function {color:#f08d49;}.token.property,.token.class-name,.token.constant,.token.symbol {color:#f8c555;}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin {color:#cc99cd;}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable {color:#7ec699;}.token.operator,.token.entity,.token.url {color:#67cdcc;}.token.important,.token.bold {font-weight:bold;}.token.italic {font-style:italic;}.token.entity {cursor:help;}.token.inserted {color:green;}
-.img-container.svelte-14lrqxf.svelte-14lrqxf{display:block;width:100%;height:200px}.img-container.svelte-14lrqxf>img.svelte-14lrqxf{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}.table-wrapper.svelte-14lrqxf.svelte-14lrqxf{max-width:100%;overflow-x:auto}table.svelte-14lrqxf.svelte-14lrqxf{border-collapse:collapse}tr.svelte-14lrqxf.svelte-14lrqxf{border-bottom:2px solid #009800}td.svelte-14lrqxf.svelte-14lrqxf{padding:2px 10px}th.svelte-14lrqxf.svelte-14lrqxf{padding:5px 10px}.custom-arrow.svelte-14lrqxf.svelte-14lrqxf{width:20px;background-color:#000000;opacity:0.3;position:absolute;top:0;bottom:0;z-index:1;transition:opacity 150ms ease;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}.custom-arrow.svelte-14lrqxf.svelte-14lrqxf:hover{opacity:0.5}.custom-arrow.svelte-14lrqxf>i.svelte-14lrqxf{border:solid #1e1e1e;border-width:0 5px 5px 0;padding:5px;position:relative}.custom-arrow-prev.svelte-14lrqxf.svelte-14lrqxf{left:0}.custom-arrow-prev.svelte-14lrqxf>i.svelte-14lrqxf{transform:rotate(135deg);right:-4px}.custom-arrow-next.svelte-14lrqxf.svelte-14lrqxf{right:0}.custom-arrow-next.svelte-14lrqxf>i.svelte-14lrqxf{transform:rotate(-45deg);left:-4px}.custom-dots.svelte-14lrqxf.svelte-14lrqxf{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;padding:0 20px}
+.img-container.svelte-4bw00n.svelte-4bw00n{display:block;width:100%;height:200px}.img-container.svelte-4bw00n>img.svelte-4bw00n{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}.custom-arrow.svelte-4bw00n.svelte-4bw00n{width:20px;background-color:#000000;opacity:0.3;position:absolute;top:0;bottom:0;z-index:1;transition:opacity 150ms ease;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}.custom-arrow.svelte-4bw00n.svelte-4bw00n:hover{opacity:0.5}.custom-arrow.svelte-4bw00n>i.svelte-4bw00n{border:solid #1e1e1e;border-width:0 5px 5px 0;padding:5px;position:relative}.custom-arrow-prev.svelte-4bw00n.svelte-4bw00n{left:0}.custom-arrow-prev.svelte-4bw00n>i.svelte-4bw00n{transform:rotate(135deg);right:-4px}.custom-arrow-next.svelte-4bw00n.svelte-4bw00n{right:0}.custom-arrow-next.svelte-4bw00n>i.svelte-4bw00n{transform:rotate(-45deg);left:-4px}.custom-dots.svelte-4bw00n.svelte-4bw00n{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;padding:0 20px}
-.color-container.svelte-1bsdhrs.svelte-1bsdhrs{height:150px;width:100%;display:flex;align-items:center;justify-content:center;user-select:none}.color-container.svelte-1bsdhrs>p.svelte-1bsdhrs{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;font-style:italic;font-size:18px}
-.divider.svelte-1dny3ln{margin-top:30px;margin-bottom:30px;height:1px}
 .custom-dot__dot-container.svelte-1ufq367{height:25px;width:25px;background-color:#727272;border-radius:50%;opacity:0.7;display:flex;align-items:center;justify-content:center;margin:5px;cursor:pointer;-webkit-tap-highlight-color:transparent}.custom-dot__dot-container.svelte-1ufq367:hover{opacity:0.9}.custom-dot__dot-container_active.svelte-1ufq367{background-color:#009800}.custom-dot__symbol.svelte-1ufq367{font-size:14px;font-weight:bold;color:#eaeaea}
+.divider.svelte-1dny3ln{margin-top:30px;margin-bottom:30px;height:1px}
+.color-container.svelte-1bsdhrs.svelte-1bsdhrs{height:150px;width:100%;display:flex;align-items:center;justify-content:center;user-select:none}.color-container.svelte-1bsdhrs>p.svelte-1bsdhrs{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;font-style:italic;font-size:18px}
 .sc-carousel__carousel-container.svelte-1pac7rj{display:flex;width:100%;flex-direction:column;align-items:center}.sc-carousel__content-container.svelte-1pac7rj{position:relative;display:flex;width:100%}.sc-carousel__pages-window.svelte-1pac7rj{flex:1;display:flex;overflow:hidden;box-sizing:border-box}.sc-carousel__pages-container.svelte-1pac7rj{width:100%;display:flex;transition-property:transform}.sc-carousel__arrow-container.svelte-1pac7rj{padding:5px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}
 .albums-container.svelte-tqqkfc.svelte-tqqkfc{display:flex;justify-content:center;flex-wrap:wrap}.album-container.svelte-tqqkfc.svelte-tqqkfc{width:250px;padding:10px;background-color:#c6c6c6;border-radius:5px;margin:5px}.album-title.svelte-tqqkfc.svelte-tqqkfc{font-size:16px}.album-size.svelte-tqqkfc.svelte-tqqkfc{font-size:10px;color:#585858}.album-tag.svelte-tqqkfc.svelte-tqqkfc{background-color:#8f8f8f;border-radius:5px;padding:1px 5px;color:#ffffff;margin-top:3px;margin-bottom:3px;display:inline-block;font-size:10px}.album-tag.svelte-tqqkfc.svelte-tqqkfc:not(:last-child){margin-right:3px}.album-arrow.svelte-tqqkfc.svelte-tqqkfc{width:20px;background-color:#000000;opacity:0;position:absolute;top:0;bottom:0;z-index:1;transition:opacity 150ms ease;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}.album-arrow.svelte-tqqkfc>i.svelte-tqqkfc{border:solid #1e1e1e;border-width:0 5px 5px 0;padding:5px;position:relative}.album-container.svelte-tqqkfc:hover .album-arrow.svelte-tqqkfc{opacity:0.5}.album-arrow-prev.svelte-tqqkfc.svelte-tqqkfc{left:0}.album-arrow-prev.svelte-tqqkfc>i.svelte-tqqkfc{transform:rotate(135deg);right:-4px}.album-arrow-next.svelte-tqqkfc.svelte-tqqkfc{right:0}.album-arrow-next.svelte-tqqkfc>i.svelte-tqqkfc{transform:rotate(-45deg);left:-4px}
 .docs__main-layout__main-container.svelte-17evj66.svelte-17evj66{background-color:#eaeaea}.docs__main-layout__header-container.svelte-17evj66.svelte-17evj66{display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px;padding:10px;box-sizing:border-box;background-color:#f0e68c}.docs__main-layout__logo.svelte-17evj66.svelte-17evj66{height:80%;max-width:100%;object-fit:contain}.docs__main-layout__links-container.svelte-17evj66.svelte-17evj66{display:flex;justify-content:center;padding:10px}.docs__main-layout__links-container.svelte-17evj66>a.svelte-17evj66{text-decoration:none;color:#009800;font-size:18px}.docs__main-layout__links-container.svelte-17evj66>a.svelte-17evj66:not(:last-child){margin-right:10px}.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{margin:0 auto}@media screen and (min-width:0px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:95%}}@media screen and (min-width:768px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:70%}}@media screen and (min-width:992px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:60%}}@media screen and (min-width:1200px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:50%}}
 :root{--dot-size:10px}.sc-carousel-dots__container.svelte-ru127d{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;padding:0 30px}.sc-carousel-dots__dot-container.svelte-ru127d{height:calc(var(--dot-size) + 10px);width:calc(var(--dot-size) + 10x);display:flex;align-items:center;justify-content:center}
 :root{--size:2px }.sc-carousel-arrow__circle.svelte-tycflj{width:20px;height:20px;border-radius:50%;background-color:rgba(93,93,93,0.5);display:flex;align-items:center;justify-content:center;transition:opacity 100ms ease;cursor:pointer;-webkit-tap-highlight-color:transparent}.sc-carousel-arrow__circle.svelte-tycflj:hover{opacity:0.9}.sc-carousel-arrow__arrow.svelte-tycflj{border:solid #1e1e1e;border-width:0 var(--size) var(--size) 0;padding:var(--size);position:relative}.sc-carousel-arrow__arrow-next.svelte-tycflj{transform:rotate(-45deg);left:calc(var(--size) / -2)}.sc-carousel-arrow__arrow-prev.svelte-tycflj{transform:rotate(135deg);right:calc(var(--size) / -2)}.sc-carousel-arrow__circle_disabled.svelte-tycflj,.sc-carousel-arrow__circle_disabled.svelte-tycflj:hover{opacity:0.5}
 .image-container.svelte-1cv82er{display:block;width:100%;height:150px}img.svelte-1cv82er{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
+tr.svelte-yxhgu7{border-bottom:2px solid #009800}
+td.svelte-17sscyq{padding:2px 10px}
+th.svelte-1w3aa8v{padding:5px 10px}
+.table-wrapper.svelte-1kq2472{max-width:100%;overflow-x:auto}table.svelte-1kq2472{border-collapse:collapse}
 .sc-carousel-dot__container.svelte-18q6rl6{display:flex;align-items:center;justify-content:center;height:16px;width:16px}.sc-carousel-dot__dot.svelte-18q6rl6{background-color:#5d5d5d;border-radius:50%;display:inline-block;opacity:0.5;transition:opacity 100ms ease;cursor:pointer;-webkit-tap-highlight-color:transparent}.sc-carousel-dot__dot.svelte-18q6rl6:hover{opacity:0.9}.sc-carousel-dot__dot_active.svelte-18q6rl6{opacity:0.7}

src/docs/Carousel.svx

@@ -208,8 +208,6 @@ Import component
 
 # Props
 
-<div class="table-wrapper">
-
 | Prop                 | Type       | Default         | Description                                   | 
 |----------------------|------------|-----------------|-----------------------------------------------|
 | `arrows`             | `boolean`  | `true`          | Enable Next/Prev arrows                       |
@@ -223,8 +221,6 @@ Import component
 | `pauseOnFocus`       | `boolean`  | `false`         | Pause autoplay on focus                       |
 | `timingFunction`     | `string`   | `'ease-in-out'` | CSS animation timing function                 |
 
-</div>
-
 <Divider />
 
 # Events
@@ -232,14 +228,10 @@ Import component
 ## `pageChange`
 Is dispatched on page change
 
-<div class="table-wrapper">
-
 | Payload field      | Type        | Description                           | 
 |--------------------|-------------|---------------------------------------|
 | `event.detail`     | `number`    | Current page index                    |
 
-</div>
-
 ```jsx
 <Carousel
   on:pageChange={
@@ -259,15 +251,11 @@ They are used for customizing prev and next buttons.
 
 Slot props:
 
-<div class="table-wrapper">
-
 | Prop               | Type        | Description                           | 
 |--------------------|-------------|---------------------------------------|
 | `showPrevPage`     | `function`  | Call it to switch to the previos page |
 | `showNextPage`     | `function`  | Call it to switch to the next page    |
 
-</div>
-
 ```jsx
 <Carousel
   let:showPrevPage
@@ -288,7 +276,6 @@ Slot props:
 This slot is used for customizing dots appearance.
 
 Slot props:
-<div class="table-wrapper">
 
 | Prop                | Type         | Description                                  | 
 |---------------------|----------  --|----------------------------------------------|
@@ -296,8 +283,6 @@ Slot props:
 | `pagesCount`        | `number`     | Total pages amount                           |
 | `showPage`          | `function`   | Takes index as page to be shown              |
 
-</div>
-
 ```jsx
 <Carousel
   let:currentPageIndex
@@ -317,14 +302,10 @@ This slot takes content for the carousel.
 
 Slot props:
 
-<div class="table-wrapper">
-
 | Prop              | Type       | Description                                                          | 
 |-------------------|------------|----------------------------------------------------------------------|
 | `loaded`          | `number[]` | Contains indexes of pages to be loaded. Can be used for lazy loading |
 
-</div>
-
 ```jsx
 <Carousel
   let:loaded
@@ -345,15 +326,11 @@ Navigates to a page by index
 
 Arguments:
 
-<div class="table-wrapper">
-
 | Argument           | Type        | Default | Description                           | 
 |--------------------|-------------|---------|---------------------------------------|
 | `pageIndex`        | `number`    |         | Page number                           |
 | `options.animated` | `boolean`   | `true`  | Should it be animated or not          |
 
-</div>
-
 ```jsx
 <script>
   // ...
@@ -376,14 +353,10 @@ Navigates to the previous page
 
 Arguments:
 
-<div class="table-wrapper">
-
 | Argument           | Type        | Default | Description                           | 
 |--------------------|-------------|---------|---------------------------------------|
 | `options.animated` | `boolean`   | `true`  | Should it be animated or not          |
 
-</div>
-
 ```jsx
 <script>
   // ...
@@ -406,14 +379,10 @@ Navigates to the next page
 
 Arguments:
 
-<div class="table-wrapper">
-
 | Argument           | Type        | Default | Description                           | 
 |--------------------|-------------|---------|---------------------------------------|
 | `options.animated` | `boolean`   | `true`  | Should it be animated or not          |
 
-</div>
-
 ```jsx
 <script>
   // ...
@@ -446,24 +415,6 @@ Arguments:
     -webkit-user-drag: none;
   }
 
-  /* table */
-  .table-wrapper {
-    max-width: 100%;
-    overflow-x: auto;
-  }
-  table {
-    border-collapse: collapse;
-  }
-  tr {
-    border-bottom: 2px solid #009800;
-  }
-  td {
-    padding: 2px 10px;
-  }
-  th {
-    padding: 5px 10px;
-  }
-
   /* custom arrows */
   .custom-arrow {
     width: 20px;

src/docs/Layouts/Main.svelte

@@ -1,3 +1,16 @@
+<script context="module">
+  import Table from './custom/Table.svelte';
+  import Th from './custom/Th.svelte';
+  import Tr from './custom/Tr.svelte';
+  import Td from './custom/Td.svelte';
+  export {
+    Table as table,
+    Th as th,
+    Tr as tr,
+    Td as td
+  };
+</script>
+
 <script>
   const links = [{
     title: 'github',

src/docs/Layouts/custom/Table.svelte

@@ -0,0 +1,15 @@
+<div class="table-wrapper">
+  <table>
+    <slot></slot>
+  </table>
+</div>
+
+<style>
+  .table-wrapper {
+    max-width: 100%;
+    overflow-x: auto;
+  }
+  table {
+    border-collapse: collapse;
+  }
+</style>

src/docs/Layouts/custom/Td.svelte

@@ -0,0 +1,9 @@
+<td>
+  <slot></slot>
+</td>
+
+<style>
+  td {
+    padding: 2px 10px;
+  }
+</style>

src/docs/Layouts/custom/Th.svelte

@@ -0,0 +1,9 @@
+<th>
+  <slot></slot>
+</th>
+
+<style>
+  th {
+    padding: 5px 10px;
+  }
+</style>

src/docs/Layouts/custom/Tr.svelte

@@ -0,0 +1,9 @@
+<tr>
+  <slot></slot>
+</tr>
+
+<style>
+  tr {
+    border-bottom: 2px solid #009800;
+  }
+</style>