@cenk1cenk2/md-printer 3.2.24 → 3.4.0

package/templates/invoice/Template.svelte

@@ -1,247 +0,0 @@
-<script>
-  import Client from './components/Client.svelte'
-  import Company from './components/Company.svelte'
-  import Items from './components/Items.svelte'
-  import Notes from './components/Notes.svelte'
-  import Payment from './components/Payment.svelte'
-  import Signature from './components/Signature.svelte'
-  import Totals from './components/Totals.svelte'
-  import { Page, PageNumber, TotalPages, Title } from '@cenk1cenk2/md-printer/components'
-
-  let { data, content, t, signature } = $props()
-
-  const { company = {}, client = {}, payment = {}, currency = '', date, id } = $derived(data)
-
-  const rows = $derived.by(() =>
-    (data.items ?? []).map((item) => {
-      const subtotal = item.quantity * item.price
-      const tax = (subtotal * item.tax) / 100
-
-      return {
-        item,
-        subtotal,
-        tax,
-        total: subtotal + tax
-      }
-    })
-  )
-  const calculatedSubtotal = $derived(rows.reduce((sum, row) => sum + row.subtotal, 0))
-  const calculatedTax = $derived(rows.reduce((sum, row) => sum + row.tax, 0))
-  const calculatedTotal = $derived(calculatedSubtotal + calculatedTax)
-
-  const title = $derived(
-    `${date} - Invoice from ${company.name}${company.tax_number ? ` (${company.tax_number})` : ''} to ${client.name}${client.tax_number ? ` (${client.tax_number})` : ''} - #${id}`
-  )
-</script>
-
-<svelte:head>
-  <title>{title}</title>
-</svelte:head>
-
-<Page>
-  {#snippet footer()}
-    <div style="margin: 0 auto; text-align: center; font-size: 8px; color: #38404b; width: 100%; padding-top: 8px; margin-bottom: -8px;">
-      <Title />
-      -
-      <b> <PageNumber />/<TotalPages /> </b>
-    </div>
-  {/snippet}
-
-  <div class="max-w-full leading-tight prose grid">
-    <section id="header" class="relative grid grid-cols-12">
-      <Company {company} {t} />
-    </section>
-    <section id="client" class="grid grid-cols-12">
-      <Client {client} {date} {id} {t} />
-    </section>
-    <section id="items" class="grid grid-cols-12">
-      <Items {rows} {currency} {t} />
-    </section>
-    <section id="payment" class="grid grid-cols-12">
-      <Payment {payment} {t} />
-      <div class="col-span-1"></div>
-      <Totals subtotal={calculatedSubtotal} tax={calculatedTax} total={calculatedTotal} {currency} {t} />
-    </section>
-    <section id="footer" class="grid grid-cols-12">
-      <Notes {content} {t} />
-      <div class="col-span-1"></div>
-      <Signature {signature} {t} />
-    </section>
-  </div>
-</Page>
-
-<style lang="postcss">
-  @import '@fontsource/montserrat/latin-400.css';
-  @import '@fontsource/montserrat/latin-ext-400.css';
-  @import '@fontsource/montserrat/latin-500.css';
-  @import '@fontsource/montserrat/latin-ext-500.css';
-  @import '@fontsource/montserrat/latin-700.css';
-  @import '@fontsource/montserrat/latin-ext-700.css';
-  @import '@fontsource/montserrat/latin-800.css';
-  @import '@fontsource/montserrat/latin-ext-800.css';
-  @import '@fontsource/montserrat/latin-900.css';
-  @import '@fontsource/montserrat/latin-ext-900.css';
-
-  @import 'tailwindcss';
-  @plugin '@tailwindcss/typography';
-
-  @theme {
-    --font-sans: 'Montserrat';
-    --font-serif: 'Montserrat';
-    --font-weight-semibold: 700;
-    --font-weight-bold: 800;
-    --font-weight-extrabold: 900;
-    --color-primary-500: #cd0043;
-    --color-gray-50: oklch(98.5% 0.002 247.839);
-    --color-gray-100: #abb2bf;
-    --color-gray-200: #979eab;
-    --color-gray-300: #7c8a9d;
-    --color-gray-400: #5c6370;
-    --color-gray-500: #4b5263;
-    --color-gray-600: #2c333d;
-    --color-gray-700: #22282f;
-    --color-gray-800: #1e2127;
-    --color-gray-900: #17191e;
-    --color-gray-950: oklch(13% 0.028 261.692);
-  }
-
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentcolor);
-  }
-
-  body {
-    font-family: var(--font-sans);
-  }
-
-  address {
-    @apply text-sm;
-    white-space: pre-line;
-  }
-
-  /* Typography styles converted from config */
-  .prose a {
-    text-decoration: none;
-  }
-
-  .prose h1 {
-    font-weight: 800;
-    padding-top: 0.1875rem;
-    /* 0.75 * 0.25rem */
-    padding-bottom: 0.1875rem;
-    margin-bottom: 0;
-    margin-top: 0;
-    border-width: 0;
-  }
-
-  .prose h2 {
-    font-weight: 800;
-    padding-top: 0.125rem;
-    /* 0.5 * 0.25rem */
-    padding-bottom: 0.125rem;
-    margin-bottom: 0;
-    margin-top: 0;
-    border-width: 0;
-  }
-
-  .prose h3 {
-    font-weight: 700;
-    padding-top: 0.0625rem;
-    /* 0.25 * 0.25rem */
-    padding-bottom: 0.0625rem;
-    margin-bottom: 0;
-    margin-top: 0;
-    border-width: 0;
-  }
-
-  p {
-    margin: 0.1em 0em;
-  }
-
-  .prose blockquote {
-    font-weight: 400;
-    color: var(--color-gray-600);
-    font-style: normal;
-    quotes: '\201C' '\201D' '\2018' '\2019';
-  }
-
-  .prose blockquote p:first-of-type::before {
-    content: '';
-  }
-
-  .prose blockquote p:last-of-type::after {
-    content: '';
-  }
-
-  .prose ul > li {
-    padding-left: 1em;
-    text-align: left;
-  }
-
-  .prose ol > li {
-    padding-left: 1em;
-    text-align: left;
-  }
-
-  .prose ol > li::before {
-    top: calc(0.875em - 0.1em);
-  }
-
-  .prose ul > li::before {
-    top: calc(0.875em - 0.1em);
-  }
-
-  html {
-    font-size: 12px;
-  }
-
-  .page-break {
-    page-break-after: always;
-  }
-
-  .text-vertical {
-    text-orientation: upright;
-    writing-mode: vertical-lr;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    @apply p-4;
-  }
-
-  /* md-to-pdf ships github-markdown-css, which sets `table { display: block }` for horizontal
-   * scrolling. That collapses rows into an anonymous max-content box, so column widths are ignored. */
-  table {
-    display: table;
-    width: 100%;
-  }
-
-  table th {
-    @apply bg-gray-700 text-white;
-  }
-
-  table tr {
-    border-top: 0;
-    break-inside: avoid;
-  }
-
-  /* zebra rows only pay off over many rows, so striping is opt-in; the short key/value
-   * tables use hairline row dividers instead and stay quieter beside the items table.
-   * The reset is needed because md-to-pdf's markdown.css stripes every table itself. */
-  table tr:nth-child(even) {
-    background-color: transparent;
-  }
-
-  table.striped tr:nth-child(even) {
-    @apply bg-gray-50;
-  }
-
-  table th,
-  table td,
-  table tr {
-    border: 0;
-    padding: 0.5em 0.5em;
-  }
-</style>

package/templates/invoice/components/Client.svelte

@@ -1,42 +0,0 @@
-<!--
-  @component
-  Recipient details and the date/id table of the invoice.
--->
-<script>
-  /**
-   * @type {{
-   *   client: { name?: string, tax_number?: string, address?: string },
-   *   date: string,
-   *   id: string | number,
-   *   t: (key: string) => string
-   * }}
-   */
-  let { client, date, id, t } = $props()
-</script>
-
-<div class="col-span-1 flex flex-col justify-center text-lg font-extrabold text-gray-100">
-  <p class="text-vertical">{t('sections.to')}</p>
-</div>
-<div class="col-span-5 flex flex-col justify-start p-4">
-  <h2>{client.name}</h2>
-  {#if client.tax_number}
-    <h3>{client.tax_number}</h3>
-  {/if}
-  <address>{(client.address ?? '').trim()}</address>
-</div>
-<div class="col-span-6 flex items-center justify-center text-xs py-4 pl-4 pr-16">
-  <div class="w-full overflow-hidden rounded-xl border-y-2 shadow-md shadow-gray-300 border-gray-900!">
-    <table class="w-full table-auto my-0!">
-      <tbody>
-        <tr>
-          <td class="w-[30%] text-left align-middle text-sm font-bold">{t('fields.date')}</td>
-          <td class="w-[70%] text-right align-middle text-sm font-semibold whitespace-nowrap">{date}</td>
-        </tr>
-        <tr>
-          <td class="w-[30%] text-left align-middle text-sm font-bold border-t! border-t-gray-100/30!">{t('fields.id')}</td>
-          <td class="w-[70%] text-right align-middle text-sm font-semibold whitespace-nowrap border-t! border-t-gray-100/30!">{id}</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>

package/templates/invoice/components/Company.svelte

@@ -1,41 +0,0 @@
-<!--
-  @component
-  Logo, sender details and invoice title cells of the invoice header.
--->
-<script>
-  /**
-   * @type {{
-   *   company: { name?: string, tax_number?: string, address?: string, phone?: string, email?: string, website?: string },
-   *   t: (key: string) => string
-   * }}
-   */
-  let { company, t } = $props()
-</script>
-
-<img
-  src="https://main.s3.kilic.dev/html/icon.png"
-  alt="logo"
-  class="absolute h-40 top-1/2 left-1/2 -translate-x-1/2 -translate-y-[62%] drop-shadow-lg drop-shadow-gray-900 z-10"
-/>
-<div class="col-span-1 flex flex-col justify-center text-lg font-extrabold text-gray-100">
-  <p class="text-vertical">{t('sections.from')}</p>
-</div>
-<div class="col-start-2 col-span-5 flex flex-col justify-start p-4 pt-10 mr-12">
-  <h1>{company.name}</h1>
-  <h3>{company.tax_number}</h3>
-  <address>{(company.address ?? '').trim()}</address>
-  <div class="flex flex-col text-sm">
-    {#if company.phone}
-      <a href="tel:{company.phone}">{company.phone}</a>
-    {/if}
-    {#if company.email}
-      <a href="mailto:{company.email}">{company.email}</a>
-    {/if}
-    {#if company.website}
-      <a href={company.website}>{company.website}</a>
-    {/if}
-  </div>
-</div>
-<div class="col-span-6 bg-gray-900 rounded-bl-4xl flex flex-col justify-center text-center">
-  <p class="p-4 font-bold text-white text-6xl">{t('invoice')}</p>
-</div>

package/templates/invoice/components/Items.svelte

@@ -1,66 +0,0 @@
-<!--
-  @component
-  Table of invoice line items with their subtotal, tax and total.
--->
-<script>
-  import { round } from '../round.js'
-
-  /**
-   * @type {{
-   *   rows: { item: { description?: string, quantity: number, unit?: string, price: number, tax: number }, subtotal: number, tax: number, total: number }[],
-   *   currency: string,
-   *   t: (key: string) => string
-   * }}
-   */
-  let { rows, currency, t } = $props()
-</script>
-
-<div class="col-span-12 px-16 py-4">
-  <div class="overflow-hidden rounded-xl border-y-2 shadow-md shadow-gray-300 border-gray-900!">
-    <table class="striped w-full table-auto my-0!">
-      <thead class="border-b-1 border-b-gray-900! border-x-2 border-x-gray-900!">
-        <tr>
-          <th scope="col" class="w-md text-center">
-            {t('table.description')}
-          </th>
-          <th scope="col" class="w-[10%] text-center">
-            {t('table.quantity')}
-          </th>
-          <th scope="col" class="w-[10%] text-center">
-            {t('table.price')}
-          </th>
-          <th scope="col" class="w-[10%] text-center">
-            {t('table.subtotal')}
-          </th>
-          <th scope="col" class="w-[10%] text-center">
-            {t('table.tax')}
-          </th>
-          <th scope="col" class="w-[14%] font-semibold text-center">
-            {t('table.total')}
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        {#each rows as row, index (index)}
-          <tr>
-            <td class="text-left align-middle">{row.item.description}</td>
-            <td class="text-center align-middle">{row.item.quantity} {row.item.unit}</td>
-            <td class="text-center align-middle">{row.item.price}{currency}</td>
-            <td class="text-center align-middle">{round(row.subtotal)}{currency}</td>
-            <td class="text-center align-middle">
-              {#if row.tax > 0}
-                <div class="flex flex-row items-center">
-                  <span class="w-8 shrink-0 mr-1 py-px rounded-full text-center text-[0.50rem] font-semibold bg-gray-700 text-white">{row.item.tax}%</span>
-                  <span>{round(row.tax)}{currency}</span>
-                </div>
-              {:else}
-                <span class="font-semibold">—</span>
-              {/if}
-            </td>
-            <td class="font-semibold text-right align-middle">{round(row.total)}{currency}</td>
-          </tr>
-        {/each}
-      </tbody>
-    </table>
-  </div>
-</div>

package/templates/invoice/components/Notes.svelte

@@ -1,21 +0,0 @@
-<!--
-  @component
-  Rendered markdown body of the document as the invoice notes.
--->
-<script>
-  /**
-   * @type {{
-   *   content: string,
-   *   t: (key: string) => string
-   * }}
-   */
-  let { content, t } = $props()
-</script>
-
-<div class="col-span-1 flex flex-col justify-center text-lg font-extrabold text-gray-100">
-  <p class="text-vertical">{t('sections.notes')}</p>
-</div>
-<div class="col-span-5 flex flex-col p-4 text-sm leading-tight prose">
-  <!-- eslint-disable-next-line svelte/no-at-html-tags -- markdown input is trusted, same as the document itself -->
-  {@html content}<br />
-</div>

package/templates/invoice/components/Payment.svelte

@@ -1,25 +0,0 @@
-<!--
-  @component
-  Bank details of the payee, shown beside the totals.
--->
-<script>
-  /**
-   * @type {{
-   *   payment: { bank?: string, address?: string, bic?: string, routing?: string, name?: string, iban?: string },
-   *   t: (key: string) => string
-   * }}
-   */
-  let { payment, t } = $props()
-</script>
-
-<div class="col-span-1 flex flex-col justify-center text-lg font-extrabold text-gray-100 bg-gray-900">
-  <p class="text-vertical">{t('sections.payment')}</p>
-</div>
-<div class="col-span-5 flex flex-col p-4 ml-[-1px] pl-5 justify-center bg-gray-700 rounded-r-4xl text-white">
-  <span>{payment.bank}</span>
-  <address>{(payment.address ?? '').trim()}</address>
-  <span>{payment.bic}</span>
-  <span>{payment.routing}</span>
-  <span class="mt-4 font-semibold">{payment.name}</span>
-  <span class="font-semibold">{payment.iban}</span>
-</div>

package/templates/invoice/components/Signature.svelte

@@ -1,34 +0,0 @@
-<!--
-  @component
-  Signature block of the invoice: the digital signature when signing is enabled, an empty box otherwise.
--->
-<script>
-  import { SignatureBlock } from '@cenk1cenk2/md-printer/components'
-
-  /**
-   * @type {{
-   *   signature?: { date: string, name?: string, issuer?: string, serial?: string },
-   *   t: (key: string) => string
-   * }}
-   */
-  let { signature, t } = $props()
-</script>
-
-{#if signature}
-  <div class="col-span-5 flex flex-col justify-center m-8 mr-16">
-    <SignatureBlock
-      {signature}
-      labels={{
-        title: t('signed.title'),
-        by: t('signed.by'),
-        date: t('signed.date'),
-        issuer: t('signed.issuer'),
-        verify: t('signed.verify')
-      }}
-    />
-  </div>
-{:else}
-  <div class="col-span-5 flex flex-col justify-end text-center m-8 mr-16 p-4 pb-0 border-2 border-gray-50! rounded-xl text-xs text-gray-100 h-36">
-    <p>{t('signature')}</p>
-  </div>
-{/if}

package/templates/invoice/components/Totals.svelte

@@ -1,47 +0,0 @@
-<!--
-  @component
-  Subtotal, tax and total summary of the invoice.
--->
-<script>
-  import { round } from '../round.js'
-
-  /**
-   * @type {{
-   *   subtotal: number,
-   *   tax: number,
-   *   total: number,
-   *   currency: string,
-   *   t: (key: string) => string
-   * }}
-   */
-  let { subtotal, tax, total, currency, t } = $props()
-</script>
-
-<div class="col-span-5 flex flex-col justify-center m-8 mr-16">
-  <div class="w-full overflow-hidden rounded-xl border-y-2 shadow-md shadow-gray-300 border-gray-900!">
-    <table class="w-full table-auto my-0!">
-      <tbody>
-        <tr>
-          <td class="w-[55%] text-left align-middle font-semibold">{t('summary.subtotal')}</td>
-          <td class="w-[45%] text-right align-middle font-semibold">{round(subtotal)}{currency}</td>
-        </tr>
-        <tr>
-          <td class="w-[55%] text-left align-middle font-semibold border-t! border-t-gray-100/30!">{t('summary.tax')}</td>
-          <td class="w-[45%] text-right align-middle font-semibold border-t! border-t-gray-100/30!">
-            {#if tax > 0}
-              {round(tax)}{currency}
-            {:else}
-              —
-            {/if}
-          </td>
-        </tr>
-        <tr>
-          <td class="w-[55%] text-left align-middle font-bold text-primary-500 border-t-2! border-t-primary-500!">{t('summary.total')}</td>
-          <td class="w-[45%] text-right align-middle font-bold text-primary-500 border-t-2! border-t-primary-500!">
-            {round(total)}{currency}
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>

package/templates/invoice/i18n/de.yaml

@@ -1,30 +0,0 @@
----
-meta:
-  title: Rechnung
-sections:
-  from: VON
-  to: AN
-  payment: ZAHLUNG
-  notes: NOTIZEN
-invoice: RECHNUNG
-signature: UNTERSCHRIFT
-signed:
-  title: Digital signiert
-  by: Unterzeichner
-  date: Datum
-  issuer: Zertifikat
-  verify: Dieses Dokument ist qualifiziert elektronisch signiert. Prüfung unter
-fields:
-  date: Datum
-  id: Rechnungsnr.
-table:
-  description: Beschreibung
-  quantity: Menge
-  price: Preis
-  subtotal: Zwischensumme
-  tax: MwSt.
-  total: Gesamt
-summary:
-  subtotal: Zwischensumme
-  tax: MwSt.
-  total: Gesamt

package/templates/invoice/i18n/en.yaml

@@ -1,30 +0,0 @@
----
-meta:
-  title: Invoice
-sections:
-  from: FROM
-  to: TO
-  payment: PAYMENT
-  notes: NOTES
-invoice: INVOICE
-signature: SIGNATURE
-signed:
-  title: Digitally signed
-  by: Signed by
-  date: Date
-  issuer: Certificate
-  verify: This document carries a qualified electronic signature. Verify it at
-fields:
-  date: Date
-  id: Invoice#
-table:
-  description: Description
-  quantity: Qty
-  price: Price
-  subtotal: Subtotal
-  tax: Tax
-  total: Total
-summary:
-  subtotal: Subtotal
-  tax: Tax
-  total: Total

package/templates/invoice/round.js

@@ -1,2 +0,0 @@
-// two decimals at most, printed without trailing zeros
-export const round = (value) => Math.round(Number(value) * 100) / 100

package/templates/invoice/settings.json

@@ -1,11 +0,0 @@
-{
-  "i18n": {
-    "language": "en",
-    "fallback": "en"
-  },
-  "pdfOptions": {
-    "format": "A4",
-    "margin": "0mm 0mm 12mm 0mm",
-    "printBackground": true
-  }
-}