From 63823d41addec00556a93eabffa455630d169ca6 Mon Sep 17 00:00:00 2001
From: Vidhu Kant Sharma <vidhukant@vidhukant.com>
Date: Sat, 6 Apr 2024 10:26:44 +0530
Subject: added basic (and incomplete) print preview template

---
 src/components/PrintPreviewItemsList.vue | 59 ++++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 src/components/PrintPreviewItemsList.vue

(limited to 'src/components/PrintPreviewItemsList.vue')

diff --git a/src/components/PrintPreviewItemsList.vue b/src/components/PrintPreviewItemsList.vue
new file mode 100644
index 0000000..72f0fc1
--- /dev/null
+++ b/src/components/PrintPreviewItemsList.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+  const props = defineProps(["items"])
+</script>
+
+<template>
+  <div class="items-list-wrapper">
+    <div class="items-list-header">
+      <div class="cell">#</div>
+      <div class="cell">Item Name</div>
+      <div class="cell">HSN</div>
+      <div class="cell">Qty</div>
+      <div class="cell">Unit Price</div>
+      <div class="cell">Discount</div>
+      <div class="cell">Taxable Value</div>
+      <div class="cell">GST</div>
+      <div class="cell">Total</div>
+    </div>
+    <div class="item-list">
+      <div v-for="(item, index) in props.items" :key="item['id']" class="item-list-row">
+        <div class="cell">{{ index + 1 }}</div>
+        <div class="cell">{{ item.Name }}</div>
+        <div class="cell">{{ item.HSN }}</div>
+        <div class="cell">1</div>
+        <div class="cell">100</div>
+        <div class="cell">0</div>
+        <div class="cell">10</div>
+        <div class="cell">18</div>
+        <div class="cell">1000</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.items-list-wrapper {
+  margin-top: 1em;
+  border-top: 1px solid gray;
+  border-left: 1px solid gray;
+}
+.cell {
+  border-right: 1px solid gray;
+  border-bottom: 1px solid gray;
+}
+.items-list-header, .item-list-row {
+  display: grid;
+  grid-template-columns: 0.3in 2in 0.5in 0.5in 0.5in 0.6in 0.77in 1.5in 0.6in;
+}
+.items-list-header .cell {
+  font-weight: bold;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.item-list {
+  display: flex;
+  flex-direction: column;
+}
+</style>
-- 
cgit v1.2.3