@kubex/zinc 1.1.178 → 1.1.179

package/docs/pages/components/chart.md

@@ -187,6 +187,19 @@ Use the `xaxis` attribute to specify the x-axis type. Common values include `dat
 When using `xaxis="datetime"`, provide data in the format `[{x: timestamp, y: value}]` where `x` is a Unix timestamp in milliseconds. The chart will automatically format the dates on the x-axis.
 :::
 
+### Expected Range Bands
+
+Each series accepts optional `stack`, `areaStyle`, `lineStyle`, `symbol`, `silent` and `z` settings, which apply to that series only. Draw a shaded band with two series sharing a `stack`: an invisible base holding the lower bound, then a filled series holding the band's height. Giving both the same `name` lets the legend toggle the band as one. `silent` series ignore the mouse and stay out of tooltips.
+
+```html:preview
+<zn-chart
+  type="line"
+  xaxis="datetime"
+  data="[{&quot;name&quot;:&quot;Expected range&quot;,&quot;data&quot;:[[1609459200000,20],[1609462800000,25],[1609466400000,28],[1609470000000,30],[1609473600000,26],[1609477200000,22]],&quot;stack&quot;:&quot;band&quot;,&quot;areaStyle&quot;:{&quot;opacity&quot;:0},&quot;lineStyle&quot;:{&quot;opacity&quot;:0},&quot;symbol&quot;:&quot;none&quot;,&quot;silent&quot;:true,&quot;color&quot;:&quot;#93c5fd&quot;},{&quot;name&quot;:&quot;Expected range&quot;,&quot;data&quot;:[[1609459200000,20],[1609462800000,20],[1609466400000,22],[1609470000000,24],[1609473600000,22],[1609477200000,20]],&quot;stack&quot;:&quot;band&quot;,&quot;areaStyle&quot;:{&quot;opacity&quot;:0.25},&quot;lineStyle&quot;:{&quot;opacity&quot;:0},&quot;symbol&quot;:&quot;none&quot;,&quot;silent&quot;:true,&quot;color&quot;:&quot;#93c5fd&quot;},{&quot;name&quot;:&quot;Traffic&quot;,&quot;data&quot;:[[1609459200000,30],[1609462800000,38],[1609466400000,70],[1609470000000,44],[1609473600000,40],[1609477200000,33]],&quot;color&quot;:&quot;#2563eb&quot;}]"
+  height="300">
+</zn-chart>
+```
+
 ### Enable Animations
 
 By default, animations are disabled for better performance. Add the `enable-animations` attribute to animate on first render — bars grow from the baseline and lines draw in. Pass a number (milliseconds) to control the duration; bare `enable-animations` defaults to `1500`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.178",
+  "version": "1.1.179",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/chart/builders.test.ts

@@ -123,6 +123,38 @@ describe('buildLineOption', () => {
   });
 });
 
+describe('per-series options', () => {
+  const band = (overrides: Partial<BuilderProps> = {}) => buildLineOption({
+    ...baseProps,
+    xAxisType: 'datetime',
+    data: [
+      { name: 'Expected range', data: [[1, 10], [2, 12]], stack: 'band', areaStyle: { opacity: 0 }, lineStyle: { opacity: 0 }, symbol: 'none', silent: true },
+      { name: 'Expected range', data: [[1, 5], [2, 6]], stack: 'band', areaStyle: { opacity: 0.15 }, lineStyle: { opacity: 0 }, symbol: 'none', silent: true },
+      { name: 'Events', data: [[1, 12], [2, 30]] },
+    ],
+    ...overrides,
+  });
+
+  it('draws a band from stacked series without styling other series', () => {
+    const series = band().series as any[];
+    expect(series[0].stack).to.equal('band');
+    expect(series[1].stack).to.equal('band');
+    expect(series[1].areaStyle).to.deep.equal({ opacity: 0.15 });
+    expect(series[0].symbol).to.equal('none');
+    expect(series[0].silent).to.equal(true);
+    expect(series[0].tooltip).to.deep.equal({ show: false });
+    expect(series[2].stack).to.be.undefined;
+    expect(series[2].areaStyle).to.be.undefined;
+    expect(series[2].silent).to.be.undefined;
+  });
+
+  it('keeps a per-series stack when the chart is stacked', () => {
+    const series = band({ stacked: true }).series as any[];
+    expect(series[0].stack).to.equal('band');
+    expect(series[2].stack).to.equal('total');
+  });
+});
+
 describe('buildAreaOption', () => {
   const baseAreaProps: BuilderProps = {
     type: 'area',

package/src/components/chart/builders.ts

@@ -20,6 +20,15 @@ export interface SeriesItem {
   name: string;
   data: any[];
   color?: string;
+  /** Series sharing a stack ID are stacked, overriding the chart-wide `stacked` setting. */
+  stack?: string;
+  /** Fill below a line, for example `{ opacity: 0.15 }`; `{ opacity: 0 }` keeps a stacked base invisible. */
+  areaStyle?: Record<string, unknown>;
+  lineStyle?: Record<string, unknown>;
+  symbol?: string;
+  /** Excludes the series from mouse interaction and tooltips. */
+  silent?: boolean;
+  z?: number;
 }
 
 export interface SankeyEdge {
@@ -168,14 +177,28 @@ function seriesFromProps(
     name: s.name,
     data: normalizeData(s.data),
     ...(s.color ? { itemStyle: { color: s.color } } : {}),
-    ...(props.stacked ? { stack: 'total' } : {}),
+    ...(s.stack ? { stack: s.stack } : props.stacked ? { stack: 'total' } : {}),
     ...(props.enableAnimations !== false && props.enableAnimations !== 0 && seriesType === 'bar'
       ? { animationDelay: (idx: number) => idx * 50 }
       : {}),
     ...extra(s),
+    ...seriesStyle(s),
   }));
 }
 
+// seriesStyle applies a series' own display options, which take precedence
+// over chart-wide defaults. Bands are drawn as an invisible stacked base
+// followed by a filled series holding the band's height.
+function seriesStyle(s: SeriesItem): Record<string, unknown> {
+  return {
+    ...(s.areaStyle ? { areaStyle: s.areaStyle } : {}),
+    ...(s.lineStyle ? { lineStyle: s.lineStyle } : {}),
+    ...(s.symbol ? { symbol: s.symbol } : {}),
+    ...(s.silent ? { silent: true, tooltip: { show: false } } : {}),
+    ...(s.z !== undefined ? { z: s.z } : {}),
+  };
+}
+
 export function buildBarOption(props: BuilderProps): EChartsOption {
   return {
     ...commonOption(props),

package/src/components/input/input.test.ts

@@ -11,6 +11,28 @@ describe('<zn-input>', () => {
     expect(el).to.exist;
   });
 
+  describe('form data', () => {
+    it('trims surrounding whitespace, except for passwords', async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <zn-input name="search" value="  foo bar  "></zn-input>
+          <zn-input name="pass" type="password" value=" secret "></zn-input>
+        </form>
+      `);
+      const [search, pass] = form.querySelectorAll<ZnInput>('zn-input');
+      await search.updateComplete;
+
+      const data = new FormData(form);
+      expect(data.get('search')).to.equal('foo bar');
+      expect(data.get('pass')).to.equal(' secret ');
+
+      await search.updateComplete;
+      expect(search.value).to.equal('foo bar');
+      expect(search.input.value).to.equal('foo bar');
+      expect(pass.value).to.equal(' secret ');
+    });
+  });
+
   describe('Escape key', () => {
     it('blurs the inner input and stops propagation when focused', async () => {
       const wrapper = await fixture<HTMLDivElement>(html`

package/src/internal/form.ts

@@ -429,8 +429,10 @@ export class FormControlController implements ReactiveController {
       name.length > 0 &&
       typeof value !== 'undefined'
     ) {
+      const isPassword = (this.host as HTMLElement & { type?: string }).type === 'password';
       const appendPrimitive = (val: string | number | boolean) => {
-        event.formData.append(name, val.toString());
+        const str = val.toString();
+        event.formData.append(name, isPassword ? str : str.trim());
       };
       const appendFile = (file: Blob, filename?: string) => {
         // If a filename is provided or it's a File (has name), FormData will use it properly
@@ -473,6 +475,11 @@ export class FormControlController implements ReactiveController {
         });
       } else {
         appendPrimitive(value as string | number | boolean);
+
+        const host = this.host as HTMLElement & { value?: unknown };
+        if (!isPassword && typeof value === 'string' && host.value === value && value.trim() !== value) {
+          host.value = value.trim();
+        }
       }
 
       this.host.dispatchEvent(new CustomEvent('zn-formdata', {bubbles: true, composed: true}));