npm - @svgrid/grid - Versions diffs - 1.2.22 → 1.2.24 - Mend

@svgrid/grid 1.2.22 → 1.2.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (263) hide show

package/dist/GridFooter.svelte +34 -20
package/dist/GridFooter.svelte.d.ts +8 -0
package/dist/SvAutoComplete.svelte +89 -0
package/dist/SvAutoComplete.svelte.d.ts +16 -0
package/dist/SvButton.svelte +97 -0
package/dist/SvButton.svelte.d.ts +23 -0
package/dist/SvCalendar.svelte +409 -0
package/dist/SvCalendar.svelte.d.ts +52 -0
package/dist/SvCheckBox.svelte +82 -0
package/dist/SvCheckBox.svelte.d.ts +19 -0
package/dist/SvColorInput.svelte +160 -0
package/dist/SvColorInput.svelte.d.ts +15 -0
package/dist/SvComboBox.svelte +108 -0
package/dist/SvComboBox.svelte.d.ts +15 -0
package/dist/SvCountryInput.svelte +125 -0
package/dist/SvCountryInput.svelte.d.ts +14 -0
package/dist/SvDateTimePicker.svelte +265 -0
package/dist/SvDateTimePicker.svelte.d.ts +38 -0
package/dist/SvDropDownList.svelte +120 -0
package/dist/SvDropDownList.svelte.d.ts +15 -0
package/dist/SvForm.svelte +147 -0
package/dist/SvForm.svelte.d.ts +29 -0
package/dist/SvGauge.svelte +97 -0
package/dist/SvGauge.svelte.d.ts +26 -0
package/dist/SvGrid.controller.svelte.d.ts +16 -2
package/dist/SvGrid.controller.svelte.js +63 -8
package/dist/SvGrid.css +84 -31
package/dist/SvGrid.helpers.d.ts +4 -0
package/dist/SvGrid.helpers.js +40 -12
package/dist/SvGrid.svelte +84 -5
package/dist/SvGrid.types.d.ts +36 -0
package/dist/SvGridDropdown.svelte +16 -30
package/dist/SvGridDropdown.svelte.d.ts +4 -0
package/dist/SvListBox.svelte +89 -0
package/dist/SvListBox.svelte.d.ts +22 -0
package/dist/SvMaskedInput.svelte +66 -0
package/dist/SvMaskedInput.svelte.d.ts +15 -0
package/dist/SvNumberInput.svelte +116 -0
package/dist/SvNumberInput.svelte.d.ts +18 -0
package/dist/SvPasswordInput.svelte +100 -0
package/dist/SvPasswordInput.svelte.d.ts +18 -0
package/dist/SvPhoneInput.svelte +87 -0
package/dist/SvPhoneInput.svelte.d.ts +19 -0
package/dist/SvRadioGroup.svelte +85 -0
package/dist/SvRadioGroup.svelte.d.ts +20 -0
package/dist/SvRating.svelte +91 -0
package/dist/SvRating.svelte.d.ts +18 -0
package/dist/SvRepeatButton.svelte +89 -0
package/dist/SvRepeatButton.svelte.d.ts +21 -0
package/dist/SvSlider.svelte +155 -0
package/dist/SvSlider.svelte.d.ts +20 -0
package/dist/SvSwitchButton.svelte +87 -0
package/dist/SvSwitchButton.svelte.d.ts +14 -0
package/dist/SvTabs.svelte +109 -0
package/dist/SvTabs.svelte.d.ts +26 -0
package/dist/SvTagsInput.svelte +70 -0
package/dist/SvTagsInput.svelte.d.ts +14 -0
package/dist/SvTimePicker.svelte +201 -0
package/dist/SvTimePicker.svelte.d.ts +30 -0
package/dist/SvToggleButton.svelte +57 -0
package/dist/SvToggleButton.svelte.d.ts +16 -0
package/dist/SvTree.svelte +131 -0
package/dist/SvTree.svelte.d.ts +27 -0
package/dist/build-api.js +78 -1
package/dist/cdn/svgrid.js +11674 -5907
package/dist/cdn/svgrid.svelte-external.js +10436 -4671
package/dist/cell-render.d.ts +4 -0
package/dist/cell-render.js +35 -1
package/dist/clipboard.js +19 -1
package/dist/collaboration.d.ts +2 -0
package/dist/collaboration.js +4 -0
package/dist/core.d.ts +22 -1
package/dist/countries.d.ts +15 -0
package/dist/countries.js +61 -0
package/dist/createAutocomplete.svelte.d.ts +77 -0
package/dist/createAutocomplete.svelte.js +100 -0
package/dist/createCalendar.svelte.d.ts +192 -0
package/dist/createCalendar.svelte.js +402 -0
package/dist/createCheckbox.svelte.d.ts +45 -0
package/dist/createCheckbox.svelte.js +26 -0
package/dist/createColorInput.svelte.d.ts +67 -0
package/dist/createColorInput.svelte.js +100 -0
package/dist/createCombobox.svelte.d.ts +102 -0
package/dist/createCombobox.svelte.js +171 -0
package/dist/createCountryInput.svelte.d.ts +86 -0
package/dist/createCountryInput.svelte.js +126 -0
package/dist/createDateTimePicker.svelte.d.ts +83 -0
package/dist/createDateTimePicker.svelte.js +202 -0
package/dist/createDropdownList.svelte.d.ts +78 -0
package/dist/createDropdownList.svelte.js +117 -0
package/dist/createGauge.svelte.d.ts +56 -0
package/dist/createGauge.svelte.js +49 -0
package/dist/createListbox.svelte.d.ts +79 -0
package/dist/createListbox.svelte.js +117 -0
package/dist/createMaskedInput.svelte.d.ts +30 -0
package/dist/createMaskedInput.svelte.js +62 -0
package/dist/createNumberInput.svelte.d.ts +72 -0
package/dist/createNumberInput.svelte.js +167 -0
package/dist/createPasswordInput.svelte.d.ts +60 -0
package/dist/createPasswordInput.svelte.js +72 -0
package/dist/createPhoneInput.svelte.d.ts +46 -0
package/dist/createPhoneInput.svelte.js +105 -0
package/dist/createRadioGroup.svelte.d.ts +64 -0
package/dist/createRadioGroup.svelte.js +73 -0
package/dist/createRating.svelte.d.ts +70 -0
package/dist/createRating.svelte.js +85 -0
package/dist/createSlider.svelte.d.ts +71 -0
package/dist/createSlider.svelte.js +123 -0
package/dist/createSwitch.svelte.d.ts +43 -0
package/dist/createSwitch.svelte.js +41 -0
package/dist/createTabs.svelte.d.ts +78 -0
package/dist/createTabs.svelte.js +92 -0
package/dist/createTagsInput.svelte.d.ts +65 -0
package/dist/createTagsInput.svelte.js +93 -0
package/dist/createTimePicker.svelte.d.ts +106 -0
package/dist/createTimePicker.svelte.js +248 -0
package/dist/createToggle.svelte.d.ts +43 -0
package/dist/createToggle.svelte.js +39 -0
package/dist/createTree.svelte.d.ts +96 -0
package/dist/createTree.svelte.js +194 -0
package/dist/datetime/date-core.d.ts +88 -0
package/dist/datetime/date-core.js +165 -0
package/dist/datetime/date-format.d.ts +39 -0
package/dist/datetime/date-format.js +371 -0
package/dist/datetime/date-restrict.d.ts +23 -0
package/dist/datetime/date-restrict.js +50 -0
package/dist/datetime/date-selection.d.ts +25 -0
package/dist/datetime/date-selection.js +94 -0
package/dist/datetime/mask.d.ts +21 -0
package/dist/datetime/mask.js +90 -0
package/dist/editing.d.ts +1 -1
package/dist/editing.js +7 -0
package/dist/editor-contract.d.ts +48 -0
package/dist/editor-contract.js +26 -0
package/dist/editors/cell-editors.d.ts +2 -2
package/dist/editors/cell-editors.js +3 -1
package/dist/export-format.d.ts +178 -0
package/dist/export-format.js +419 -0
package/dist/hyperformula-adapter.d.ts +4 -0
package/dist/hyperformula-adapter.js +15 -6
package/dist/index.d.ts +60 -0
package/dist/index.js +72 -0
package/dist/list-option.d.ts +10 -0
package/dist/list-option.js +7 -0
package/dist/menus.js +18 -2
package/dist/popover.d.ts +48 -0
package/dist/popover.js +65 -0
package/dist/row-resize.d.ts +4 -4
package/dist/row-resize.js +8 -5
package/dist/selection.d.ts +6 -0
package/dist/selection.js +31 -5
package/dist/server-data-source.d.ts +43 -0
package/dist/server-data-source.js +100 -0
package/dist/sparkline.js +8 -4
package/dist/svgrid-wrapper.types.d.ts +26 -1
package/package.json +6 -1
package/src/GridFooter.svelte +34 -20
package/src/SvAutoComplete.svelte +89 -0
package/src/SvButton.svelte +97 -0
package/src/SvCalendar.svelte +409 -0
package/src/SvCalendar.test.ts +211 -0
package/src/SvCheckBox.svelte +82 -0
package/src/SvColorInput.svelte +160 -0
package/src/SvComboBox.svelte +108 -0
package/src/SvCountryInput.svelte +125 -0
package/src/SvDateTimePicker.svelte +265 -0
package/src/SvDateTimePicker.test.ts +136 -0
package/src/SvDropDownList.svelte +120 -0
package/src/SvForm.svelte +147 -0
package/src/SvGauge.svelte +97 -0
package/src/SvGrid.controller.svelte.ts +74 -8
package/src/SvGrid.css +84 -31
package/src/SvGrid.helpers.ts +41 -12
package/src/SvGrid.svelte +84 -5
package/src/SvGrid.types.ts +33 -0
package/src/SvGridDropdown.svelte +16 -30
package/src/SvListBox.svelte +89 -0
package/src/SvMaskedInput.svelte +66 -0
package/src/SvNumberInput.svelte +116 -0
package/src/SvPasswordInput.svelte +100 -0
package/src/SvPhoneInput.svelte +87 -0
package/src/SvRadioGroup.svelte +85 -0
package/src/SvRating.svelte +91 -0
package/src/SvRepeatButton.svelte +89 -0
package/src/SvSlider.svelte +155 -0
package/src/SvSwitchButton.svelte +87 -0
package/src/SvTabs.svelte +109 -0
package/src/SvTagsInput.svelte +70 -0
package/src/SvTimePicker.svelte +201 -0
package/src/SvTimePicker.test.ts +98 -0
package/src/SvToggleButton.svelte +57 -0
package/src/SvTree.svelte +131 -0
package/src/build-api.ts +115 -0
package/src/cell-render.test.ts +38 -0
package/src/cell-render.ts +43 -0
package/src/clipboard.test.ts +18 -0
package/src/clipboard.ts +24 -1
package/src/collaboration.test.ts +30 -0
package/src/collaboration.ts +6 -0
package/src/core.ts +27 -3
package/src/countries.ts +71 -0
package/src/createAutocomplete.svelte.ts +104 -0
package/src/createCalendar.svelte.ts +488 -0
package/src/createCheckbox.svelte.ts +74 -0
package/src/createColorInput.svelte.ts +115 -0
package/src/createCombobox.svelte.ts +158 -0
package/src/createCountryInput.svelte.ts +126 -0
package/src/createDateTimePicker.svelte.ts +216 -0
package/src/createDropdownList.svelte.ts +125 -0
package/src/createGauge.svelte.ts +86 -0
package/src/createListbox.svelte.ts +186 -0
package/src/createMaskedInput.svelte.ts +81 -0
package/src/createNumberInput.svelte.ts +193 -0
package/src/createPasswordInput.svelte.ts +87 -0
package/src/createPhoneInput.svelte.ts +119 -0
package/src/createRadioGroup.svelte.ts +132 -0
package/src/createRating.svelte.ts +145 -0
package/src/createSlider.svelte.ts +160 -0
package/src/createSwitch.svelte.ts +78 -0
package/src/createTabs.svelte.ts +129 -0
package/src/createTagsInput.svelte.ts +98 -0
package/src/createTimePicker.svelte.ts +289 -0
package/src/createToggle.svelte.ts +69 -0
package/src/createTree.svelte.ts +216 -0
package/src/datetime/date-core.test.ts +217 -0
package/src/datetime/date-core.ts +204 -0
package/src/datetime/date-format.test.ts +121 -0
package/src/datetime/date-format.ts +317 -0
package/src/datetime/date-restrict.ts +60 -0
package/src/datetime/date-selection.test.ts +129 -0
package/src/datetime/date-selection.ts +137 -0
package/src/datetime/mask.test.ts +36 -0
package/src/datetime/mask.ts +84 -0
package/src/editing.test.ts +22 -0
package/src/editing.ts +7 -1
package/src/editor-contract.test.ts +32 -0
package/src/editor-contract.ts +60 -0
package/src/editors/cell-editors.ts +7 -1
package/src/export-data-api.test.ts +126 -0
package/src/export-format.test.ts +107 -0
package/src/export-format.ts +598 -0
package/src/hyperformula-adapter.test.ts +35 -1
package/src/hyperformula-adapter.ts +18 -6
package/src/index.ts +110 -0
package/src/list-option.ts +15 -0
package/src/menus.ts +21 -2
package/src/popover.ts +79 -0
package/src/row-resize.test.ts +25 -0
package/src/row-resize.ts +8 -5
package/src/selection.test.ts +36 -4
package/src/selection.ts +30 -9
package/src/server-data-source.test.ts +201 -0
package/src/server-data-source.ts +148 -0
package/src/sparkline.test.ts +9 -0
package/src/sparkline.ts +9 -4
package/src/svgrid-wrapper.types.ts +28 -1
package/src/svgrid.behavior.test.ts +27 -0
package/src/svgrid.new-features.wrapper.test.ts +27 -1
package/src/ui-buttons.test.ts +105 -0
package/src/ui-composite.test.ts +89 -0
package/src/ui-inputs.test.ts +118 -0
package/src/ui-range.test.ts +61 -0
package/src/ui-selection.test.ts +119 -0

package/src/ui-range.test.ts ADDED Viewed

@@ -0,0 +1,61 @@
+/** Group E (slider + gauge) component tests. */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvSlider from './SvSlider.svelte'
+import SvGauge from './SvGauge.svelte'
+function mnt(Comp: any, props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(Comp, { target, props: props as any })
+  flushSync()
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+describe('SvSlider', () => {
+  it('single: arrow keys step within bounds', () => {
+    let got: any
+    const { target, destroy } = mnt(SvSlider, { value: 50, min: 0, max: 100, step: 5, onChange: (v: any) => (got = v) })
+    try {
+      const thumb = target.querySelector<HTMLElement>('[role="slider"]')!
+      expect(thumb.getAttribute('aria-valuenow')).toBe('50')
+      thumb.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))
+      flushSync()
+      expect(got).toBe(55)
+      thumb.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }))
+      flushSync()
+      expect(got).toBe(0)
+    } finally { destroy() }
+  })
+  it('range: two thumbs, low thumb capped at high value', () => {
+    let got: any
+    const { target, destroy } = mnt(SvSlider, { value: [20, 80], range: true, min: 0, max: 100, step: 10, onChange: (v: any) => (got = v) })
+    try {
+      const thumbs = target.querySelectorAll<HTMLElement>('[role="slider"]')
+      expect(thumbs.length).toBe(2)
+      thumbs[0]!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))
+      flushSync()
+      expect(got).toEqual([30, 80])
+    } finally { destroy() }
+  })
+})
+describe('SvGauge', () => {
+  it('exposes a meter role with clamped value + label', () => {
+    const { target, destroy } = mnt(SvGauge, { value: 150, min: 0, max: 100 })
+    try {
+      const meter = target.querySelector('[role="meter"]')!
+      expect(meter.getAttribute('aria-valuenow')).toBe('100') // clamped to max
+      expect(target.querySelector('.sv-gauge__label')!.textContent).toContain('100')
+    } finally { destroy() }
+  })
+  it('renders one path per band when bands are given', () => {
+    const { target, destroy } = mnt(SvGauge, {
+      value: 50, bands: [{ from: 0, to: 50, color: '#16a34a' }, { from: 50, to: 100, color: '#dc2626' }],
+    })
+    try {
+      // track + 2 bands = 3 paths, no value arc
+      expect(target.querySelectorAll('path').length).toBe(3)
+    } finally { destroy() }
+  })
+})

package/src/ui-selection.test.ts ADDED Viewed

@@ -0,0 +1,119 @@
+/** Group D (selection overlays) component tests. Panels portal to <body>. */
+import { describe, expect, it, afterEach } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvListBox from './SvListBox.svelte'
+import SvDropDownList from './SvDropDownList.svelte'
+import SvComboBox from './SvComboBox.svelte'
+import SvTagsInput from './SvTagsInput.svelte'
+import SvCountryInput from './SvCountryInput.svelte'
+function mnt(Comp: any, props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(Comp, { target, props: props as any })
+  flushSync()
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+afterEach(() => {
+  document.querySelectorAll('.sv-ddl__panel, .sv-country__panel').forEach((n) => n.remove())
+})
+const OPTS = [
+  { value: 'a', label: 'Apple' },
+  { value: 'b', label: 'Banana' },
+  { value: 'c', label: 'Cherry' },
+]
+describe('SvListBox', () => {
+  it('single select emits scalar; multi toggles array', () => {
+    let got: any
+    const a = mnt(SvListBox, { options: OPTS, value: 'a', onChange: (v: any) => (got = v) })
+    try {
+      a.target.querySelectorAll<HTMLElement>('.sv-listbox__opt')[2]!.click(); flushSync()
+      expect(got).toBe('c')
+    } finally { a.destroy() }
+    const b = mnt(SvListBox, { options: OPTS, value: ['a'], multiple: true, onChange: (v: any) => (got = v) })
+    try {
+      b.target.querySelectorAll<HTMLElement>('.sv-listbox__opt')[1]!.click(); flushSync()
+      expect(got).toEqual(['a', 'b'])
+    } finally { b.destroy() }
+  })
+  it('posts its value(s) via hidden inputs when `name` is set (multi -> repeated name)', () => {
+    const m = mnt(SvListBox, { options: OPTS, value: ['a', 'c'], multiple: true, name: 'tags' })
+    try {
+      const hidden = Array.from(m.target.querySelectorAll<HTMLInputElement>('input[type="hidden"][name="tags"]'))
+      expect(hidden.map((h) => h.value)).toEqual(['a', 'c'])
+    } finally { m.destroy() }
+    const s = mnt(SvListBox, { options: OPTS, value: 'b', name: 'choice' })
+    try {
+      const hidden = Array.from(s.target.querySelectorAll<HTMLInputElement>('input[type="hidden"][name="choice"]'))
+      expect(hidden.map((h) => h.value)).toEqual(['b'])
+    } finally { s.destroy() }
+  })
+})
+describe('SvDropDownList', () => {
+  it('opens a portalled listbox and picks a value', () => {
+    let got: any
+    const { target, destroy } = mnt(SvDropDownList, { options: OPTS, value: null, onChange: (v: any) => (got = v) })
+    try {
+      target.querySelector<HTMLButtonElement>('.sv-ddl')!.click(); flushSync()
+      const panel = document.querySelector('.sv-ddl__panel')!
+      expect(panel).not.toBeNull()
+      panel.querySelectorAll<HTMLElement>('.sv-ddl__opt')[1]!.click(); flushSync()
+      expect(got).toBe('b')
+      expect(document.querySelector('.sv-ddl__panel')).toBeNull() // closed
+    } finally { destroy() }
+  })
+})
+describe('SvComboBox', () => {
+  it('filters as you type and picks a match', () => {
+    let got: any
+    const { target, destroy } = mnt(SvComboBox, { options: OPTS, value: null, onChange: (v: any) => (got = v) })
+    try {
+      const input = target.querySelector<HTMLInputElement>('.sv-combo__input')!
+      input.dispatchEvent(new FocusEvent('focus')); flushSync()
+      input.value = 'ban'
+      input.dispatchEvent(new Event('input', { bubbles: true })); flushSync()
+      const opts = document.querySelectorAll<HTMLElement>('.sv-ddl__opt')
+      expect(opts.length).toBe(1)
+      opts[0]!.click(); flushSync()
+      expect(got).toBe('b')
+    } finally { destroy() }
+  })
+})
+describe('SvTagsInput', () => {
+  it('adds on Enter and removes on Backspace', () => {
+    let tags: string[] = ['x']
+    const { target, destroy } = mnt(SvTagsInput, { value: tags, onChange: (t: string[]) => (tags = t) })
+    try {
+      const input = target.querySelector<HTMLInputElement>('.sv-tags__input')!
+      input.value = 'new'
+      // Svelte bind:value needs an input event before the keydown reads draft.
+      input.dispatchEvent(new Event('input', { bubbles: true })); flushSync()
+      input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })); flushSync()
+      expect(tags).toEqual(['x', 'new'])
+    } finally { destroy() }
+  })
+})
+describe('SvCountryInput', () => {
+  it('searches and selects a country code', () => {
+    let got: any
+    const { target, destroy } = mnt(SvCountryInput, { value: null, onChange: (v: any) => (got = v) })
+    try {
+      target.querySelector<HTMLButtonElement>('.sv-country')!.click(); flushSync()
+      const search = document.querySelector<HTMLInputElement>('.sv-country__search')!
+      search.value = 'germ'
+      search.dispatchEvent(new Event('input', { bubbles: true })); flushSync()
+      const opts = document.querySelectorAll<HTMLElement>('.sv-country__opt')
+      expect(opts.length).toBe(1)
+      opts[0]!.click(); flushSync()
+      expect(got).toBe('DE')
+    } finally { destroy() }
+  })
+})