@dartbot/segment

{ "schemaVersion": "1.0.0", "readme": "", "modules": [ { "kind": "javascript-module", "path": "src/SevenSegment.ts", "declarations": [ { "kind": "class", "description": "", "name": "SevenSegment", "members": [ { "kind": "field", "name": "#canvas", "privacy": "private", "type": { "text": "HTMLCanvasElement" }, "default": "this.#shadow.querySelector('canvas')!" }, { "kind": "field", "name": "#style", "privacy": "private", "type": { "text": "HTMLStyleElement" }, "default": "this.#shadow.querySelector('style')!" }, { "kind": "field", "name": "#shadow", "privacy": "private", "type": { "text": "ShadowRoot" } }, { "kind": "field", "name": "#format", "privacy": "private", "type": { "text": "string" }, "default": "'#####'" }, { "kind": "field", "name": "#mask", "privacy": "private", "type": { "text": "number[]" }, "default": "[]" }, { "kind": "field", "name": "RESIZE_DEBOUNCE_MS", "type": { "text": "number" }, "static": true, "default": "100" }, { "kind": "field", "name": "count", "readonly": true }, { "kind": "method", "name": "render", "privacy": "private" }, { "kind": "method", "name": "setMask", "parameters": [ { "name": "mask", "type": { "text": "number[]" } } ] }, { "kind": "method", "name": "setText", "parameters": [ { "name": "val", "type": { "text": "string" } } ] }, { "kind": "method", "name": "setNumber", "parameters": [ { "name": "val", "type": { "text": "number" } } ] }, { "kind": "method", "name": "toDataURL", "return": { "type": { "text": "string" } }, "parameters": [ { "name": "type", "optional": true, "type": { "text": "string" }, "description": "The image format. Default is `image/png`." }, { "name": "quality", "optional": true, "type": { "text": "number" }, "description": "The image quality. Default is `1.0`." } ], "description": "Return the image data encoded as a data URL." }, { "kind": "method", "name": "toBlob", "return": { "type": { "text": "Promise<Blob>" } }, "parameters": [ { "name": "type", "optional": true, "type": { "text": "string" }, "description": "The image format. Default is `image/png`." }, { "name": "quality", "optional": true, "type": { "text": "number" }, "description": "The image quality. Default is `1.0`." } ], "description": "Return the image data as a Blob." }, { "kind": "field", "name": "innerHTML", "default": "` <style> :host { display: flex; width: 100%; aspect-ratio: ${this.count} / 1.75; box-sizing: border-box; user-select: none; background: var(${Token.segmentBackground}, ${tokenDefaults[Token.segmentBackground]}); } canvas { width: 100%; height: 100%; background: var(${Token.segmentBackground}, ${tokenDefaults[Token.segmentBackground]}); } </style> <canvas></canvas> `" } ], "superclass": { "name": "HTMLElement" }, "tagName": "seven-segment", "customElement": true } ], "exports": [ { "kind": "js", "name": "SevenSegment", "declaration": { "name": "SevenSegment", "module": "src/SevenSegment.ts" } } ] }, { "kind": "javascript-module", "path": "src/index.ts", "declarations": [], "exports": [ { "kind": "js", "name": "SevenSegment", "declaration": { "name": "SevenSegment", "module": "./SevenSegment.js" } }, { "kind": "js", "name": "*", "declaration": { "name": "*", "package": "./utils" } } ] }, { "kind": "javascript-module", "path": "src/seven-segment.ts", "declarations": [], "exports": [ { "kind": "custom-element-definition", "name": "seven-segment", "declaration": { "name": "SevenSegment", "module": "/src/SevenSegment" } } ] }, { "kind": "javascript-module", "path": "stories/_s1_playground.stories.ts", "declarations": [ { "kind": "variable", "name": "meta", "default": "{ title: 'Playground', render: () => `<seven-segment></seven-segment>`, args: {}, } satisfies Meta<DartboardProps>" }, { "kind": "variable", "name": "Playground", "type": { "text": "Story" }, "default": "{ name: 'Playground', args: { format: '########', displayText: 'hello', [Token.align]: tokenDefaults[Token.align], [Token.segmentBackground]: tokenDefaults[Token.segmentBackground], [Token.fillOn]: tokenDefaults[Token.fillOn], [Token.fillOff]: tokenDefaults[Token.fillOff], [Token.strokeWidth]: parseFloat(tokenDefaults[Token.strokeWidth]), [Token.strokeOn]: null, [Token.strokeOff]: tokenDefaults[Token.strokeOff], [Token.shear]: parseFloat(tokenDefaults[Token.shear]), [Token.elementPadding]: parseFloat(tokenDefaults[Token.elementPadding]), [Token.elementSpacing]: parseFloat(tokenDefaults[Token.elementSpacing]), [Token.segmentWidth]: parseFloat(tokenDefaults[Token.segmentWidth]), [Token.segmentInterval]: parseFloat(tokenDefaults[Token.segmentInterval]), [Token.bevelWidth]: parseFloat(tokenDefaults[Token.bevelWidth]), [Token.sideBevelEnabled]: tokenDefaults[Token.sideBevelEnabled] === '1', [Token.glowInner]: parseFloat(tokenDefaults[Token.glowInner]), [Token.glowOuter]: parseFloat(tokenDefaults[Token.glowOuter]), }, argTypes: { [Token.fillOn]: { description: 'Color of the segment when turned on', control: { type: 'color' }, defaultValue: tokenDefaults[Token.fillOn], }, [Token.fillOff]: { description: 'Color of the segment when turned off', control: { type: 'color' }, defaultValue: tokenDefaults[Token.fillOff], }, [Token.shear]: { description: 'Shear angle of the segments', control: { type: 'range', min: -180, max: 180, step: 1 }, defaultValue: tokenDefaults[Token.shear], }, [Token.elementPadding]: { description: 'Padding around the segments', control: { type: 'range', min: 0, max: 20, step: 0.5 }, defaultValue: tokenDefaults[Token.elementPadding], }, [Token.elementSpacing]: { description: 'Spacing between the segments', control: { type: 'range', min: 0, max: 20, step: 0.5 }, defaultValue: tokenDefaults[Token.elementSpacing], }, [Token.strokeOn]: { description: 'Stroke color of the segment when turned on', control: { type: 'color' }, defaultValue: tokenDefaults[Token.strokeOn], }, [Token.strokeOff]: { description: 'Stroke color of the segment when turned off', control: { type: 'color' }, defaultValue: tokenDefaults[Token.strokeOff], }, [Token.strokeWidth]: { description: 'Stroke width of the segments', control: { type: 'range', min: 0, max: 40, step: 1 }, defaultValue: tokenDefaults[Token.strokeWidth], }, [Token.segmentBackground]: { description: 'Background color of the segments', control: { type: 'color' }, defaultValue: tokenDefaults[Token.segmentBackground], }, [Token.segmentWidth]: { description: 'Width of the segments', control: { type: 'range', min: 0, max: 100, step: 1 }, defaultValue: tokenDefaults[Token.segmentWidth], }, [Token.segmentInterval]: { description: 'Interval between the segments', control: { type: 'range', min: 0, max: 10, step: 0.1 }, defaultValue: tokenDefaults[Token.segmentInterval], }, [Token.bevelWidth]: { description: 'Width of the bevel on the segments', control: { type: 'range', min: 0, max: 1, step: 0.01 }, defaultValue: tokenDefaults[Token.bevelWidth], }, [Token.sideBevelEnabled]: { description: 'Enable or disable side bevel on the segments', control: { type: 'boolean' }, defaultValue: tokenDefaults[Token.sideBevelEnabled] === '1', }, format: { description: 'Format of the display', control: { type: 'text' }, defaultValue: '########', }, displayText: { description: 'Text to display on the segments', control: { type: 'text' }, defaultValue: 'hello', }, [Token.align]: { description: 'Alignment of the segments', options: ['left', 'right'], control: { type: 'radio' }, }, [Token.glowInner]: { description: 'Glow effect inside the segments', control: { type: 'range', min: 0, max: 1, step: 0.01 }, defaultValue: tokenDefaults[Token.glowInner], }, [Token.glowOuter]: { description: 'Glow effect outside the segments', control: { type: 'range', min: 0, max: 1, step: 0.01 }, defaultValue: tokenDefaults[Token.glowOuter], }, }, render: (params, { id }) => { const style = ` .story-playground { seven-segment { ${Token.fillOn}: ${params[Token.fillOn]}; ${Token.fillOff}: ${params[Token.fillOff]}; ${Token.shear}: ${params[Token.shear]}; ${Token.elementPadding}: ${params[Token.elementPadding]}; ${Token.elementSpacing}: ${params[Token.elementSpacing]}; ${Token.strokeOn}: ${params[Token.strokeOn]}; ${Token.strokeOff}: ${params[Token.strokeOff]}; ${Token.strokeWidth}: ${params[Token.strokeWidth]}; ${Token.segmentBackground}: ${params[Token.segmentBackground]}; ${Token.segmentWidth}: ${params[Token.segmentWidth]}; ${Token.segmentInterval}: ${params[Token.segmentInterval]}; ${Token.bevelWidth}: ${params[Token.bevelWidth]}; ${Token.sideBevelEnabled}: ${params[Token.sideBevelEnabled] ? '1' : '0'}; ${Token.align}: ${params[Token.align]}; ${Token.glowInner}: ${params[Token.glowInner]}; ${Token.glowOuter}: ${params[Token.glowOuter]}; } } `; const template = ` <style> ${style} </style> <div id=\"${id}\" class=\"story-playground\"> <seven-segment displayText=\"${params.displayText}\" format=\"${params.format}\"></seven-segment> </div> `; return template; }, }" }, { "kind": "variable", "name": "Increment", "type": { "text": "Story" }, "default": "{ name: 'Increment', decorators: [], tags: ['hidden'], render: (_, { id }) => ` <style> #${id} > seven-segment { ${Token.align}: right; ${Token.elementPadding}: 2; ${Token.elementSpacing}: 3; ${Token.segmentWidth}: 6; } </style> <div id=\"${id}\"> <seven-segment></seven-segment> </div> <script> (() => { const count = 5; const max = Math.pow(10, count) - 1; const segments = document.querySelectorAll('#${id} seven-segment')[0]; segments.setAttribute('format', '#'.repeat(count)); let i = performance.now(); function update(){ const now = performance.now(); const interval = (Math.floor((now - i) / 10) % max); const value = max - interval; segments.setText((value).toString()); requestAnimationFrame(update); }; requestAnimationFrame(update); })(); </script> `, }" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "meta", "module": "stories/_s1_playground.stories.ts" } }, { "kind": "js", "name": "Playground", "declaration": { "name": "Playground", "module": "stories/_s1_playground.stories.ts" } }, { "kind": "js", "name": "Increment", "declaration": { "name": "Increment", "module": "stories/_s1_playground.stories.ts" } } ] }, { "kind": "javascript-module", "path": "stories/_s2_resize.stories.ts", "declarations": [ { "kind": "variable", "name": "meta", "default": "{ title: 'Resize', decorators: [baseDecorator, themeDecorator], parameters: { docs: { source: { transform } }, }, } satisfies Meta" }, { "kind": "variable", "name": "Dimensions", "type": { "text": "Story" }, "default": "{ name: 'story-dimensions', tags: ['hidden'], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { seven-segment { border: .1em dashed #0002; } } </style> <style> #${id} { seven-segment:nth-child(1) { width: 10em; height: 18em; } seven-segment:nth-child(2) { width: 18em; height: 4em; } seven-segment:nth-child(3) { width: 22em; height: 12em; } } </style> <div id=\"${id}\"> <seven-segment displayText=\"hello\"></seven-segment> <seven-segment displayText=\"hello\"></seven-segment> <seven-segment displayText=\"hello\"></seven-segment> </div> `, }" }, { "kind": "variable", "name": "Dynamic", "type": { "text": "Story" }, "default": "{ name: 'Resize', tags: ['hidden'], decorators: [], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { border: 2px dashed #0002; display: flex; width: 100%; overflow: auto; seven-segment { width 100%; height: 100%; --dartbot-element-spacing: 1; --dartbot-element-padding: 1; --dartbot-segment-width: 6; } } </style> <style> #${id} { resize: both; } </style> <pre>Click and drag the bottom right corner to resize</pre> <div id=\"${id}\"> <seven-segment format=\"###############\" displayText=\"Havana Oh Na Na\"></seven-segment> </div> `, }" }, { "kind": "variable", "name": "Width", "type": { "text": "Story" }, "default": "{ name: 'story-width', tags: ['hidden'], decorators: [], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { seven-segment { border: 2px dashed #0002; } } </style> <style> #${id} { seven-segment:nth-child(1) { width: 30em; } seven-segment:nth-child(2) { width: 20em; } seven-segment:nth-child(3) { width: 10em; } } </style> <div id=\"${id}\"> <seven-segment displayText=\"size\" format=\"######\"></seven-segment> <seven-segment displayText=\"size\" format=\"######\"></seven-segment> <seven-segment displayText=\"size\" format=\"######\"></seven-segment> </div> `, }" }, { "kind": "variable", "name": "AspectRatio", "type": { "text": "Story" }, "default": "{ name: 'story-aspect', tags: ['hidden'], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { seven-segment { border: 2px dashed #0002; } } </style> <style> #${id} { seven-segment:nth-child(1) { aspect-ratio: 1 / 1; width: 20em; } seven-segment:nth-child(2) { aspect-ratio: 21 / 9; width: 20em; } } </style> <div id=\"${id}\"> <seven-segment displayText=\"aspect\" format=\"######\"></seven-segment> <seven-segment displayText=\"aspect\" format=\"######\"></seven-segment> </div> `, }" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "meta", "module": "stories/_s2_resize.stories.ts" } }, { "kind": "js", "name": "Dimensions", "declaration": { "name": "Dimensions", "module": "stories/_s2_resize.stories.ts" } }, { "kind": "js", "name": "Dynamic", "declaration": { "name": "Dynamic", "module": "stories/_s2_resize.stories.ts" } }, { "kind": "js", "name": "Width", "declaration": { "name": "Width", "module": "stories/_s2_resize.stories.ts" } }, { "kind": "js", "name": "AspectRatio", "declaration": { "name": "AspectRatio", "module": "stories/_s2_resize.stories.ts" } } ] }, { "kind": "javascript-module", "path": "stories/colors.stories.ts", "declarations": [ { "kind": "variable", "name": "meta", "default": "{ title: 'Components/Colors', decorators: [baseDecorator], parameters: { docs: { source: { transform } }, }, } satisfies Meta<DartboardProps>" }, { "kind": "variable", "name": "Default", "type": { "text": "Story" }, "default": "{ name: 'color-pallets', tags: ['hidden'], render: () => `<seven-segment></seven-segment>`, }" }, { "kind": "variable", "name": "SegmentColor", "type": { "text": "Story" }, "default": "{ name: 'segment-color', tags: ['hidden'], render: (_, { id }) => ` <style> #${id} { seven-segment:nth-child(1) { --dartbot-fill-on: #f00; --dartbot-fill-off: #322; } seven-segment:nth-child(2) { --dartbot-fill-on: #ddd; --dartbot-fill-off: #444; } seven-segment:nth-child(3) { --dartbot-fill-on: #f0f; --dartbot-fill-off: #154; } } </style> <div id=\"${id}\"> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> </div> `, }" }, { "kind": "variable", "name": "StrokeColors", "type": { "text": "Story" }, "default": "{ name: 'stroke-colors', tags: ['hidden'], render: (_, { id }) => ` <style> #${id} { seven-segment { ${Token.fillOn}: transparent; ${Token.fillOff}: transparent; ${Token.strokeWidth}: 4; ${Token.segmentInterval}: 2; } seven-segment:nth-child(1) { ${Token.strokeOn}:rgb(255, 255, 255); ${Token.strokeOff}:rgb(48, 48, 48); } seven-segment:nth-child(2) { ${Token.strokeOn}: gold; ${Token.strokeOff}: orangered; } seven-segment:nth-child(3) { ${Token.strokeOn}: #00f0ff; ${Token.strokeOff}: #5b5b5b; } } </style> <div id=\"${id}\"> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> </div> `, }" }, { "kind": "variable", "name": "BackgroundColors", "type": { "text": "Story" }, "default": "{ name: 'background-colors', tags: ['hidden'], render: (_, { id }) => ` <style> #${id} { seven-segment { ${Token.fillOn}: red; ${Token.fillOff}: #500; } seven-segment:nth-child(1) { ${Token.segmentBackground}: #000; } seven-segment:nth-child(2) { ${Token.segmentBackground}: orange; } seven-segment:nth-child(3) { ${Token.segmentBackground}: transparent; } } </style> <div id=\"${id}\"> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> </div> `, }" }, { "kind": "variable", "name": "GlowInner", "type": { "text": "Story" }, "default": "{ name: 'glow-inner', tags: ['hidden'], render: (_, { id }) => ` <style> #${id} { seven-segment { ${Token.fillOn}:rgb(0, 213, 255); ${Token.fillOff}: #0d191d; } seven-segment:nth-child(1) { ${Token.glowInner}: 0; } seven-segment:nth-child(2) { ${Token.glowInner}: .5; } seven-segment:nth-child(3) { ${Token.glowInner}: .8; } } </style> <div id=\"${id}\"> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> </div> `, }" }, { "kind": "variable", "name": "GlowOuter", "type": { "text": "Story" }, "default": "{ name: 'glow-outer', tags: ['hidden'], render: (_, { id }) => ` <style> #${id} { seven-segment { ${Token.fillOn}: #65e6ff; ${Token.fillOff}: #0d191d; } seven-segment:nth-child(1) { ${Token.glowOuter}: 0; } seven-segment:nth-child(2) { ${Token.glowOuter}: .15; } seven-segment:nth-child(3) { ${Token.glowOuter}: .7; } } </style> <div id=\"${id}\"> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> </div> `, }" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "meta", "module": "stories/colors.stories.ts" } }, { "kind": "js", "name": "Default", "declaration": { "name": "Default", "module": "stories/colors.stories.ts" } }, { "kind": "js", "name": "SegmentColor", "declaration": { "name": "SegmentColor", "module": "stories/colors.stories.ts" } }, { "kind": "js", "name": "StrokeColors", "declaration": { "name": "StrokeColors", "module": "stories/colors.stories.ts" } }, { "kind": "js", "name": "BackgroundColors", "declaration": { "name": "BackgroundColors", "module": "stories/colors.stories.ts" } }, { "kind": "js", "name": "GlowInner", "declaration": { "name": "GlowInner", "module": "stories/colors.stories.ts" } }, { "kind": "js", "name": "GlowOuter", "declaration": { "name": "GlowOuter", "module": "stories/colors.stories.ts" } } ] }, { "kind": "javascript-module", "path": "stories/css.stories.ts", "declarations": [ { "kind": "variable", "name": "meta", "default": "{ title: 'Components/Dartboard', decorators: [baseDecorator, themeDecorator], parameters: { docs: { source: { transform } }, }, } satisfies Meta" }, { "kind": "variable", "name": "Padding", "type": { "text": "Story" }, "default": "{ name: 'story-padding', tags: ['hidden'], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { column-gap: 2px; seven-segment { border: 2px dashed #0002; background: #d0e2cc; --dartbot-element-spacing:1; } } </style> <style> #${id} { seven-segment:nth-child(1) { padding: 0em; } seven-segment:nth-child(2) { padding: .5em; } seven-segment:nth-child(3) { padding: 1em; } } </style> <div id=\"${id}\"> <seven-segment displayText=\"pad 1\"></seven-segment> <seven-segment displayText=\"pad 2\"></seven-segment> <seven-segment displayText=\"pad 3\"></seven-segment> </div> `, }" }, { "kind": "variable", "name": "Margin", "type": { "text": "Story" }, "default": "{ name: 'story-margin', tags: ['hidden'], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { background: #f443; seven-segment { background: #d0e2cc; --dartbot-canvas-bg: #fff; } } </style> <style> #${id} { seven-segment:nth-child(1) { margin: 0em; } seven-segment:nth-child(2) { margin: .5em; } seven-segment:nth-child(3) { margin: 1em; } } </style> <div id=\"${id}\"> <seven-segment displayText=\"mar 1\"></seven-segment> <seven-segment displayText=\"mar 2\"></seven-segment> <seven-segment displayText=\"mar 3\"></seven-segment> </div> `, }" }, { "kind": "variable", "name": "Border", "type": { "text": "Story" }, "default": "{ name: 'story-border', tags: ['hidden'], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { column-gap: .25em; } </style> <style> #${id} { seven-segment { border: 0 dashed orange; } seven-segment:nth-child(1) { border-width: 0em; } seven-segment:nth-child(2) { border-width: .5em; } seven-segment:nth-child(3) { border-width: 1em; } } </style> <div id=\"${id}\"> <seven-segment displayText=\"b1\"></seven-segment> <seven-segment displayText=\"b2\"></seven-segment> <seven-segment displayText=\"b3\"></seven-segment> </div> `, }" }, { "kind": "variable", "name": "Filters", "type": { "text": "Story" }, "default": "{ name: 'story-filters', tags: ['hidden'], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { seven-segment { transition: filter .5s; } } </style> <style> #${id} { seven-segment { --dartbot-element-spacing:1 } seven-segment:hover { filter: unset!important; } seven-segment:nth-child(1) { filter: drop-shadow(2px 2px 10px black); } seven-segment:nth-child(2) { filter: opacity(.2); } seven-segment:nth-child(3) { filter: invert(1); } } </style> <div id=\"${id}\"> <seven-segment displayText=\"1234\"></seven-segment> <seven-segment displayText=\"1234\"></seven-segment> <seven-segment displayText=\"1234\"></seven-segment> </div> `, }" }, { "kind": "variable", "name": "Transform", "type": { "text": "Story" }, "default": "{ name: 'story-transform', tags: ['hidden'], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { overflow: hidden; seven-segment { transition: transform .5s ease-out; } } </style> <style> #${id} { seven-segment:hover { transform: unset!important; } seven-segment:nth-child(1) { transform: rotate(10deg); } seven-segment:nth-child(2) { transform: rotate3d(1, 0, 0, 45deg) } seven-segment:nth-child(3) { transform: skew(10deg, 5deg); } } </style> <div id=\"${id}\"> <seven-segment displayText=\"1234\"></seven-segment> <seven-segment displayText=\"1234\"></seven-segment> <seven-segment displayText=\"1234\"></seven-segment> </div> `, }" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "meta", "module": "stories/css.stories.ts" } }, { "kind": "js", "name": "Padding", "declaration": { "name": "Padding", "module": "stories/css.stories.ts" } }, { "kind": "js", "name": "Margin", "declaration": { "name": "Margin", "module": "stories/css.stories.ts" } }, { "kind": "js", "name": "Border", "declaration": { "name": "Border", "module": "stories/css.stories.ts" } }, { "kind": "js", "name": "Filters", "declaration": { "name": "Filters", "module": "stories/css.stories.ts" } }, { "kind": "js", "name": "Transform", "declaration": { "name": "Transform", "module": "stories/css.stories.ts" } } ] }, { "kind": "javascript-module", "path": "stories/export.stories.ts", "declarations": [ { "kind": "variable", "name": "meta", "default": "{ title: 'Components/Dartboard', } satisfies Meta<DartboardProps>" }, { "kind": "variable", "name": "ExportUrl", "type": { "text": "Story" }, "default": "{ name: 'extract-url', tags: ['hidden'], render: (_, { id }) => ` <div id=\"${id}\"> <div style=\"margin-bottom: 1em;\"> <a href=\"#\" download onclick=\"click\">Click to Download Image</a> </div> <div> <seven-segment displayText=\"hello\"></seven-segment> </div> </div> <script defer> (() => { const segments = document.querySelectorAll('#${id} seven-segment')[0]; const link = document.querySelectorAll('#${id} a')[0]; setTimeout(() => { link.href = segments.toDataURL('image/png'); }, 10); })(); </script> `, }" }, { "kind": "variable", "name": "ExportBlob", "type": { "text": "Story" }, "default": "{ name: 'extract-blob', tags: ['hidden'], render: (_, { id }) => ` <div id=\"${id}\"> <div style=\"margin-bottom: 1em;\"> <button>Click to Download From Blob</button> </div> <div> <seven-segment displayText=\"hello\"></seven-segment> </div> </div> <script defer> (() => { const link = document.querySelectorAll('#${id} button')[0]; link.addEventListener('click', click); async function click(e) { e.preventDefault(); const segments = document.querySelectorAll('#${id} seven-segment')[0]; const link = document.querySelectorAll('#${id} a')[0]; const blob = await segments.toBlob('image/png'); const anchor = document.createElement('a'); anchor.download = 'segment.png'; anchor.href = URL.createObjectURL(blob); anchor.click(); URL.revokeObjectURL(anchor.href); } })(); </script> `, }" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "meta", "module": "stories/export.stories.ts" } }, { "kind": "js", "name": "ExportUrl", "declaration": { "name": "ExportUrl", "module": "stories/export.stories.ts" } }, { "kind": "js", "name": "ExportBlob", "declaration": { "name": "ExportBlob", "module": "stories/export.stories.ts" } } ] }, { "kind": "javascript-module", "path": "stories/styles.stories.ts", "declarations": [ { "kind": "variable", "name": "meta", "default": "{ title: 'Components/Dartboard', decorators: [zoomDecorator, baseDecorator], parameters: { docs: { source: { transform } }, }, } satisfies Meta<DartboardProps>" }, { "kind": "variable", "name": "Default", "type": { "text": "Story" }, "default": "{ name: 'color-pallets', tags: ['hidden'], render: () => `<seven-segment></seven-segment>`, }" }, { "kind": "variable", "name": "Align", "type": { "text": "Story" }, "default": "{ name: 'segment-align', tags: ['hidden'], render: (_, { id }) => ` <style> #${id} { seven-segment:nth-child(1) { --dartbot-align: left; } seven-segment:nth-child(2) { --dartbot-align: right; } } </style> <div id=\"${id}\"> <seven-segment displaytext=\"left\" format=\"#######\"></seven-segment> <seven-segment displaytext=\"right\" format=\"#######\"></seven-segment> </div> `, }" }, { "kind": "variable", "name": "AlignOver", "type": { "text": "Story" }, "default": "{ name: 'segment-align-over', tags: ['hidden'], render: (_, { id }) => ` <style> #${id} { seven-segment:nth-child(1) { --dartbot-align: left; } seven-segment:nth-child(2) { --dartbot-align: right; } } </style> <div id=\"${id}\"> <seven-segment displaytext=\"1234567890\" format=\"#######\"></seven-segment> <seven-segment displaytext=\"1234567890\" format=\"#######\"></seven-segment> </div> `, }" }, { "kind": "variable", "name": "SegmentWidth", "type": { "text": "Story" }, "default": "{ name: 'segment-width', tags: ['hidden'], render: (_, { id }) => ` <style> #${id} { seven-segment:nth-child(1) { --dartbot-segment-width: 1; } seven-segment:nth-child(2) { --dartbot-segment-width: 4; } seven-segment:nth-child(3) { --dartbot-segment-width: 8; } } </style> <div id=\"${id}\"> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> </div> `, }" }, { "kind": "variable", "name": "StrokeWidth", "type": { "text": "Story" }, "default": "{ name: 'stroke-width', tags: ['hidden'], render: (_, { id }) => ` <style> #${id} { seven-segment { ${Token.fillOn}: transparent; ${Token.fillOff}: transparent; ${Token.strokeOn}:rgb(255, 255, 255); ${Token.strokeOff}:rgb(48, 48, 48); ${Token.strokeWidth}: 4; ${Token.segmentInterval}: 3; } seven-segment:nth-child(1) { ${Token.strokeWidth}: 1; } seven-segment:nth-child(2) { ${Token.strokeWidth}: 5; } seven-segment:nth-child(3) { ${Token.strokeWidth}: 8; } } </style> <div id=\"${id}\"> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> </div> `, }" }, { "kind": "variable", "name": "SegmentInterval", "type": { "text": "Story" }, "default": "{ name: 'segment-interval', tags: ['hidden'], render: (_, { id }) => ` <style> #${id} { seven-segment:nth-child(1) { --dartbot-segment-interval: 0; } seven-segment:nth-child(2) { --dartbot-segment-interval: 2; } seven-segment:nth-child(3) { --dartbot-segment-interval: 5; } } </style> <div id=\"${id}\"> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> </div> `, }" }, { "kind": "variable", "name": "SegmentBevelWidth", "type": { "text": "Story" }, "default": "{ name: 'segment-bevel-width', tags: ['hidden'], render: (_, { id }) => ` <style> #${id} { seven-segment:nth-child(1) { ${Token.bevelWidth}: 0; } seven-segment:nth-child(2) { ${Token.bevelWidth}: .25; } seven-segment:nth-child(3) { ${Token.bevelWidth}: .7; } } </style> <div id=\"${id}\"> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> </div> `, }" }, { "kind": "variable", "name": "ElementShear", "type": { "text": "Story" }, "default": "{ name: 'element-shear', tags: ['hidden'], render: (_, { id }) => ` <style> #${id} { seven-segment:nth-child(1) { ${Token.shear}: 0; } seven-segment:nth-child(2) { ${Token.shear}: 20; } seven-segment:nth-child(3) { ${Token.shear}: -20; } } </style> <div id=\"${id}\"> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> </div> `, }" }, { "kind": "variable", "name": "ElementSpacing", "type": { "text": "Story" }, "default": "{ name: 'element-spacing', tags: ['hidden'], render: (_, { id }) => ` <style> #${id} { seven-segment { ${Token.bevelWidth}: 0; } seven-segment:nth-child(1) { ${Token.elementSpacing}: 0; } seven-segment:nth-child(2) { ${Token.elementSpacing}: 2; } seven-segment:nth-child(3) { ${Token.elementSpacing}: 5; } } </style> <div id=\"${id}\"> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> </div> `, }" }, { "kind": "variable", "name": "ElementPadding", "type": { "text": "Story" }, "default": "{ name: 'element-padding', tags: ['hidden'], render: (_, { id }) => ` <style> #${id} { seven-segment:nth-child(1) { ${Token.elementPadding}: 0; } seven-segment:nth-child(2) { ${Token.elementPadding}: 2; } seven-segment:nth-child(3) { ${Token.elementPadding}: 5; } } </style> <div id=\"${id}\"> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> </div> `, }" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "meta", "module": "stories/styles.stories.ts" } }, { "kind": "js", "name": "Default", "declaration": { "name": "Default", "module": "stories/styles.stories.ts" } }, { "kind": "js", "name": "Align", "declaration": { "name": "Align", "module": "stories/styles.stories.ts" } }, { "kind": "js", "name": "AlignOver", "declaration": { "name": "AlignOver", "module": "stories/styles.stories.ts" } }, { "kind": "js", "name": "SegmentWidth", "declaration": { "name": "SegmentWidth", "module": "stories/styles.stories.ts" } }, { "kind": "js", "name": "StrokeWidth", "declaration": { "name": "StrokeWidth", "module": "stories/styles.stories.ts" } }, { "kind": "js", "name": "SegmentInterval", "declaration": { "name": "SegmentInterval", "module": "stories/styles.stories.ts" } }, { "kind": "js", "name": "SegmentBevelWidth", "declaration": { "name": "SegmentBevelWidth", "module": "stories/styles.stories.ts" } }, { "kind": "js", "name": "ElementShear", "declaration": { "name": "ElementShear", "module": "stories/styles.stories.ts" } }, { "kind": "js", "name": "ElementSpacing", "declaration": { "name": "ElementSpacing", "module": "stories/styles.stories.ts" } }, { "kind": "js", "name": "ElementPadding", "declaration": { "name": "ElementPadding", "module": "stories/styles.stories.ts" } } ] }, { "kind": "javascript-module", "path": "stories/values.stories.ts", "declarations": [ { "kind": "variable", "name": "meta", "default": "{ title: 'Components/Dartboard', } satisfies Meta<DartboardProps>" }, { "kind": "variable", "name": "AttributeText", "type": { "text": "Story" }, "default": "{ name: 'attribute-text', tags: ['hidden'], render: (_, { id }) => ` <div id=\"${id}\"> <seven-segment displayText=\"hello\"></seven-segment> </div> `, }" }, { "kind": "variable", "name": "ApiText", "type": { "text": "Story" }, "default": "{ name: 'api-text', tags: ['hidden'], render: (_, { id }) => ` <div id=\"${id}\"> <seven-segment></seven-segment> </div> <script defer> (() => { const segments = document.querySelectorAll('#${id} seven-segment'); segments[0].setText('hello'); })(); </script> `, }" }, { "kind": "variable", "name": "ApiMask", "type": { "text": "Story" }, "default": "{ name: 'api-mask', tags: ['hidden'], render: (_, { id }) => ` <div id=\"${id}\"> <seven-segment></seven-segment> </div> <script defer> (() => { const segments = document.querySelectorAll('#${id} seven-segment'); segments[0].setMask([ 0b1110110, 0b1111001, 0b0111000, 0b0111000, 0b0111111 ]); })(); </script> `, }" }, { "kind": "variable", "name": "ApiSegment", "type": { "text": "Story" }, "default": "{ name: 'api-segment', tags: ['hidden'], render: (_, { id }) => ` <div id=\"${id}\"> <seven-segment format=\"#######\"></seven-segment> </div> <script defer> (() => { const segments = document.querySelectorAll('#${id} seven-segment'); segments[0].setMask([ 0b0000001, 0b0000010, 0b0000100, 0b0001000, 0b0010000, 0b0100000, 0b1000000 ]); })(); </script> `, }" }, { "kind": "variable", "name": "Format", "type": { "text": "Story" }, "default": "{ name: 'format', tags: ['hidden'], render: (_, { id }) => ` <div id=\"${id}\"> <seven-segment format=\"#######\" displayText=\"1234567890\"></seven-segment> <seven-segment format=\"##############\" displayText=\"1234567890\"></seven-segment> </div> `, }" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "meta", "module": "stories/values.stories.ts" } }, { "kind": "js", "name": "AttributeText", "declaration": { "name": "AttributeText", "module": "stories/values.stories.ts" } }, { "kind": "js", "name": "ApiText", "declaration": { "name": "ApiText", "module": "stories/values.stories.ts" } }, { "kind": "js", "name": "ApiMask", "declaration": { "name": "ApiMask", "module": "stories/values.stories.ts" } }, { "kind": "js", "name": "ApiSegment", "declaration": { "name": "ApiSegment", "module": "stories/values.stories.ts" } }, { "kind": "js", "name": "Format", "declaration": { "name": "Format", "module": "stories/values.stories.ts" } } ] }, { "kind": "javascript-module", "path": "src/render-segment/calc-points.ts", "declarations": [ { "kind": "function", "name": "calcPoints", "parameters": [ { "name": "theme", "type": { "text": "Theme" } }, { "name": "width", "type": { "text": "number" } }, { "name": "height", "type": { "text": "number" } } ] }, { "kind": "function", "name": "findPolygonCenter", "return": { "type": { "text": "Point" } }, "parameters": [ { "name": "points", "type": { "text": "Point[]" } } ] } ], "exports": [ { "kind": "js", "name": "calcPoints", "declaration": { "name": "calcPoints", "module": "src/render-segment/calc-points.ts" } }, { "kind": "js", "name": "findPolygonCenter", "declaration": { "name": "findPolygonCenter", "module": "src/render-segment/calc-points.ts" } } ] }, { "kind": "javascript-module", "path": "src/render-segment/char-masks.ts", "declarations": [ { "kind": "variable", "name": "charMasks", "type": { "text": "{ [key: string]: number }" }, "default": "{ ' ': 0b0000000, '': 0b0000000, '0': 0b0111111, '1': 0b0000110, '2': 0b1011011, '3': 0b1001111, '4': 0b1100110, '5': 0b1101101, '6': 0b1111101, '7': 0b0000111, '8': 0b1111111, '9': 0b1100111, A: 0b1110111, B: 0b1111111, C: 0b0111001, D: 0b0111111, E: 0b1111001, F: 0b1110001, G: 0b1111101, H: 0b1110110, I: 0b0000110, J: 0b0011110, K: 0b1110000, L: 0b0111000, M: 0b0110111, N: 0b0110111, O: 0b0111111, P: 0b1110011, Q: 0b0111111, R: 0b1110111, S: 0b1101101, T: 0b0000111, U: 0b0111110, V: 0b0111110, W: 0b0111110, X: 0b1110000, Y: 0b1110010, Z: 0b1011011, '-': 0b1000000, }" } ], "exports": [ { "kind": "js", "name": "charMasks", "declaration": { "name": "charMasks", "module": "src/render-segment/char-masks.ts" } } ] }, { "kind": "javascript-module", "path": "src/render-segment/render-segment.ts", "declarations": [ { "kind": "function", "name": "render", "parameters": [ { "name": "theme", "type": { "text": "Theme" } }, { "name": "props", "type": { "text": "SegmentProps" } }, { "name": "context", "type": { "text": "CanvasRenderingContext2D" } }, { "name": "mask", "type": { "text": "number[]" } } ] }, { "kind": "function", "name": "drawSegments", "parameters": [ { "name": "theme", "type": { "text": "Theme" } }, { "name": "props", "type": { "text": "SegmentProps" } }, { "name": "context", "type": { "text": "CanvasRenderingContext2D" } }, { "name": "mask", "type": { "text": "number[]" } } ] }, { "kind": "function", "name": "drawSegment", "parameters": [ { "name": "theme", "type": { "text": "Theme" } }, { "name": "width", "type": { "text": "number" } }, { "name": "height", "type": { "text": "number" } }, { "name": "context", "type": { "text": "CanvasRenderingContext2D" } }, { "name": "mask", "type": { "text": "number" } } ] } ], "exports": [ { "kind": "js", "name": "render", "declaration": { "name": "render", "module": "src/render-segment/render-segment.ts" } }, { "kind": "js", "name": "drawSegments", "declaration": { "name": "drawSegments", "module": "src/render-segment/render-segment.ts" } }, { "kind": "js", "name": "drawSegment", "declaration": { "name": "drawSegment", "module": "src/render-segment/render-segment.ts" } } ] }, { "kind": "javascript-module", "path": "src/render-segment/token.ts", "declarations": [ { "kind": "variable", "name": "tokenDefaults", "type": { "text": "object" }, "default": "{ [Token.elementSpacing]: '2', [Token.elementPadding]: '2', [Token.segmentBackground]: '#000', [Token.segmentWidth]: '6', [Token.segmentInterval]: '.75', [Token.bevelWidth]: '.1', [Token.sideBevelEnabled]: '1', [Token.fillOn]: '#7f0', [Token.fillOff]: '#030', [Token.strokeOn]: 'black', [Token.strokeOff]: 'black', [Token.strokeWidth]: '0', [Token.shear]: '0', [Token.align]: Align.Left, [Token.glowInner]: '0', [Token.glowOuter]: '0', }" }, { "kind": "function", "name