Fixed a bug relating to custom-elements's first vnode where render(){ return <div class="example" /> } would set the example-class on the custom-element itself.

Added support for className and style similar to react Cleaned up some comments Reworked how tests are built in order to add a new test "pdf" which was a small side-project where previous mentioned bug showed up, it's an example using HTML to create a PDF for printing
2019-12-21 21:48:38 +01:00
parent 93fb6927ca
commit 4ca54727f1
56 changed files with 2397 additions and 381 deletions
--- a/tests/pdf/index.pcss
+++ b/tests/pdf/index.pcss
@@ -0,0 +1,158 @@
+@import "./fonts.pcss";
+
+@page {
+    size: A4 landscape;
+    margin: 0;
+}
+
+@media print {
+    html {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        background: none !important;
+    }
+
+    body {
+        width: 297mm;
+        height: 210mm;
+        size: landscape A4;
+        border: none !important;
+        background: none !important;
+        padding: 0 !important;
+    }
+}
+
+html{
+    background: #aeaeae;
+    font-family: 'DINPro';
+    font-size: 10.5pt;
+}
+body{
+    background: white;
+    margin: 0;
+    display: flex;
+    width: 289mm;
+    height: 202mm;
+    border: 1px solid black;
+    padding: 4mm;
+}
+
+.kaarten-print{
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+}
+
+.kaarten-pair{
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    justify-content: space-evenly;
+}
+
+.kaart{
+    display: flex;
+    flex-direction: column;
+    max-width: 148mm;
+    padding: 1em;
+
+    & .header{
+        display: flex;
+        flex-direction: row;
+
+        & .logo{
+            flex: 0 1 35%;
+            max-width: 35%;
+        }
+
+        & .header-info{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            flex: 1 1 auto;
+
+            & .title{
+                font-size: 200%;
+                font-weight: bold;
+            }
+
+            & .sub-title{
+               font-weight: 700;
+                color: #666;
+            }
+        }
+    }
+
+    & .content{
+        display: flex;
+        flex-direction: column;
+
+        & table{
+            margin-bottom: .75em;
+        }
+
+        & .order >tr >td{
+            padding-bottom: .25em;
+        }
+
+        & .product-name{
+            font-weight: 600;
+            width: 6em;
+        }
+        & .product-multiplier{
+            font-weight: 600;
+            width: 1em;
+        }
+        & .product-price, & .total-label{
+            font-weight: 600;
+            text-align: right;
+            width: 4em;
+        }
+
+        & .payment-options{
+            display: flex;
+            flex-direction: row;
+            justify-content: space-evenly;
+
+            & .option{
+                padding: 0 0 1em;
+            }
+        }
+
+    }
+
+    & .footer{
+        align-self: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        & .form-for{
+            font-weight: bold;
+        }
+        & .contact{
+            font-size: 90%;
+        }
+
+    }
+}
+
+input[type=text]{
+    border: none;
+    border-bottom: 1px dashed darkgray;
+
+    width: calc(100% - 1em);
+}
+
+input[type=checkbox]{
+    -webkit-appearance: none;
+    border: 1px solid #999;
+    padding: 9px;
+    display: inline-block;
+    position: relative;
+    top: 6px;
+    margin: 3px 6px;
+}