diff --git a/src/lib/components/etiket/aztec.svelte b/src/lib/components/etiket/aztec.svelte new file mode 100644 index 00000000..5b5c2cd4 --- /dev/null +++ b/src/lib/components/etiket/aztec.svelte @@ -0,0 +1,43 @@ + + + + + diff --git a/src/lib/components/etiket/barcode.svelte b/src/lib/components/etiket/barcode.svelte new file mode 100644 index 00000000..d0f35d3a --- /dev/null +++ b/src/lib/components/etiket/barcode.svelte @@ -0,0 +1,81 @@ + + + + + diff --git a/src/lib/components/etiket/datamatrix.svelte b/src/lib/components/etiket/datamatrix.svelte new file mode 100644 index 00000000..b228f8b9 --- /dev/null +++ b/src/lib/components/etiket/datamatrix.svelte @@ -0,0 +1,38 @@ + + + + + diff --git a/src/lib/components/etiket/etiket.stories.svelte b/src/lib/components/etiket/etiket.stories.svelte new file mode 100644 index 00000000..3918d181 --- /dev/null +++ b/src/lib/components/etiket/etiket.stories.svelte @@ -0,0 +1,208 @@ + + + + + + + + +
+ {#each barcodeTypes as item (item.label)} +
+ {item.label} + +
+ {/each} +
+ + + +
+
+ Custom colors + +
+
+ No text + +
+
+ Text on top + +
+
+ Bearer bars + +
+
+ Rotated 90° + +
+
+ + + + + + + + +
+ {#each dotTypes as dotType (dotType)} +
+ + {dotType} +
+ {/each} +
+ + + +
+
+ + Solid color +
+
+ + Linear gradient +
+
+ + Radial gradient +
+
+ + Circle shape +
+
+ + + +
+ {#each ecLevels as item (item.ecLevel)} +
+ + {item.label} +
+ {/each} +
+ + + + + + + + +
+
+ + Standard +
+
+ + GS1 DataMatrix +
+
+ + Custom colors +
+
+ + + + + + + + +
+
+ Standard + +
+
+ Compact + +
+
+ Custom columns (4) + +
+
+ Custom colors + +
+
+ + + + + + + + +
+
+ + Standard +
+
+ + Compact +
+
+ + EC 50% +
+
+ + Custom colors +
+
+ diff --git a/src/lib/components/etiket/index.ts b/src/lib/components/etiket/index.ts new file mode 100644 index 00000000..b7c4fd28 --- /dev/null +++ b/src/lib/components/etiket/index.ts @@ -0,0 +1,7 @@ +export { default as EtiketBarcode } from './barcode.svelte'; +export { default as EtiketQRCode } from './qr-code.svelte'; +export { default as EtiketDataMatrix } from './datamatrix.svelte'; +export { default as EtiketPDF417 } from './pdf417.svelte'; +export { default as EtiketAztec } from './aztec.svelte'; +export { default as EtiketIrRenderer } from './ir-renderer.svelte'; +export * from './types'; diff --git a/src/lib/components/etiket/ir-renderer.svelte b/src/lib/components/etiket/ir-renderer.svelte new file mode 100644 index 00000000..a1266f05 --- /dev/null +++ b/src/lib/components/etiket/ir-renderer.svelte @@ -0,0 +1,173 @@ + + +{#snippet renderDef(def: DefNode)} + {#if def.type === 'linear-gradient'} + + {#each def.stops as stop, i (i)} + + {/each} + + {:else if def.type === 'radial-gradient'} + + {#each def.stops as stop, i (i)} + + {/each} + + {:else if def.type === 'clip-path'} + + {#each def.children as child, i (i)} + {@render renderNode(child)} + {/each} + + {/if} +{/snippet} + +{#snippet renderNode(node: RenderNode)} + {#if node.type === 'rect'} + {@render rectNode(node)} + {:else if node.type === 'path'} + {@render pathNode(node)} + {:else if node.type === 'circle'} + {@render circleNode(node)} + {:else if node.type === 'text'} + {@render textNode(node)} + {:else if node.type === 'group'} + {@render groupNode(node)} + {:else if node.type === 'image'} + {@render imageNode(node)} + {:else if node.type === 'embedded-svg'} + {@render embeddedSvgNode(node)} + {/if} +{/snippet} + +{#snippet rectNode(node: RectNode)} + +{/snippet} + +{#snippet pathNode(node: PathNode)} + +{/snippet} + +{#snippet circleNode(node: CircleNode)} + +{/snippet} + +{#snippet textNode(node: TextNode)} + {node.content} +{/snippet} + +{#snippet groupNode(node: GroupNode)} + + {#each node.children as child, i (i)} + {@render renderNode(child)} + {/each} + +{/snippet} + +{#snippet imageNode(node: ImageNode)} + +{/snippet} + +{#snippet embeddedSvgNode(node: EmbeddedSVGNode)} + + {@html node.content} + +{/snippet} + + + {#if tree.accessibility?.title} + {tree.accessibility.title} + {/if} + {#if tree.accessibility?.desc} + {tree.accessibility.desc} + {/if} + {#if tree.defs?.length} + + {#each tree.defs as def (def.id)} + {@render renderDef(def)} + {/each} + + {/if} + {#each tree.children as child, i (i)} + {@render renderNode(child)} + {/each} + diff --git a/src/lib/components/etiket/pdf417.svelte b/src/lib/components/etiket/pdf417.svelte new file mode 100644 index 00000000..576e9ba8 --- /dev/null +++ b/src/lib/components/etiket/pdf417.svelte @@ -0,0 +1,43 @@ + + + + + diff --git a/src/lib/components/etiket/qr-code.svelte b/src/lib/components/etiket/qr-code.svelte new file mode 100644 index 00000000..2d9fa57c --- /dev/null +++ b/src/lib/components/etiket/qr-code.svelte @@ -0,0 +1,61 @@ + + + + + diff --git a/src/lib/components/etiket/types.ts b/src/lib/components/etiket/types.ts new file mode 100644 index 00000000..9ff1a1c7 --- /dev/null +++ b/src/lib/components/etiket/types.ts @@ -0,0 +1,51 @@ +import type { BarcodeOptions, BarcodeType } from 'etiket'; +import type { + BarcodeIROptions, + QRCodeIROptions, + MatrixIROptions, + RootNode +} from 'etiket/ir'; +import type { QRCodeOptions } from 'etiket'; + +export type { BarcodeType, RootNode }; + +export interface BarcodeProps extends BarcodeOptions, BarcodeIROptions { + class?: string; + value: string; + type?: BarcodeType; +} + +export interface EtiketQRCodeProps extends QRCodeIROptions, QRCodeOptions { + class?: string; + value: string; +} + +export interface DataMatrixProps extends MatrixIROptions { + class?: string; + value: string; + /** Use GS1 DataMatrix encoding */ + gs1?: boolean; +} + +export interface PDF417Props extends MatrixIROptions { + class?: string; + value: string; + /** Error correction level (0-8) */ + ecLevel?: number; + /** Number of data columns (1-30) */ + columns?: number; + /** Use compact PDF417 variant */ + compact?: boolean; +} + +export interface AztecProps extends MatrixIROptions { + class?: string; + value: string; + /** Error correction percentage (5-95, default 23) */ + ecPercent?: number; + /** Number of layers (1-32, auto if omitted) */ + layers?: number; + /** Use compact Aztec variant */ + compact?: boolean; +} + diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts index 395e4f0b..fb508759 100644 --- a/src/lib/components/index.ts +++ b/src/lib/components/index.ts @@ -41,6 +41,7 @@ export * from './container'; export * from './calendar'; export * from './date-picker'; export * from './qr-code'; +export * from './etiket'; export * from './swatch'; export * from './lazy'; export * from './chip';