vanilla-jui 1.5.4 → 1.5.6

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 (18) hide show
  1. package/README.md +0 -1
  2. package/dist/index.d.ts +4 -2
  3. package/dist/index.js +1 -1
  4. package/dist/index.umd.js +1 -1
  5. package/dist/style.css +1 -1
  6. package/package.json +5 -5
  7. package/src/components/accordion.ts +5 -4
  8. package/src/components/flow.ts +108 -93
  9. package/src/components/form.ts +183 -118
  10. package/src/components/modal.ts +63 -56
  11. package/src/components/offcanvas.ts +8 -6
  12. package/src/components/swiper.ts +45 -39
  13. package/src/components/tabs.ts +3 -3
  14. package/src/css/content.css +8 -3
  15. package/src/locales/index.ts +2 -0
  16. package/src/primitives/drop.ts +2 -1
  17. package/src/primitives/popup.ts +4 -4
  18. package/src/utilities/dom.ts +7 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vanilla-jui",
3
- "version": "1.5.4",
3
+ "version": "1.5.6",
4
4
  "private": false,
5
5
  "description": "A lightweight, reactive, and fully customizable vanilla JS UI library.",
6
6
  "keywords": [
@@ -53,7 +53,7 @@
53
53
  },
54
54
  "scripts": {
55
55
  "build": "vp pack",
56
- "pack": "vp pack",
56
+ "pack": "vp check --fix && vp pack",
57
57
  "dev": "vp dev",
58
58
  "test": "vp test",
59
59
  "check": "vp check",
@@ -61,9 +61,9 @@
61
61
  "prepublishOnly": "vp run build"
62
62
  },
63
63
  "dependencies": {
64
- "vanilla-create-storage": "latest",
65
- "vanilla-signal": "^1.1.4",
66
- "vanilla-signal-i18n": "latest"
64
+ "vanilla-create-storage": "^1.0.4",
65
+ "vanilla-signal": "^1.1.14",
66
+ "vanilla-signal-i18n": "^1.1.2"
67
67
  },
68
68
  "devDependencies": {
69
69
  "@tsdown/css": "latest",
package/src/components/accordion.ts CHANGED
@@ -14,7 +14,7 @@ import {
14
14
  } from '../core/component.ts';
15
15
  import { createLoading } from '../primitives/loading.ts';
16
16
  import { icon } from '../primitives/icons.ts';
17
- import { type RenderableContent } from '../utilities/dom.ts';
17
+ import { asRenderable, type RenderableContent } from '../utilities/dom.ts';
18
18
  import { randomId } from '../utilities/id.ts';
19
19
  import {
20
20
  type CollapseMotionController,
@@ -599,7 +599,8 @@ export function createAccordion(props: AccordionProps): AccordionInstance {
599
599
  const content = createContentRenderer(itemAccessor, indexAccessor, name);
600
600
  const headerId = `${resolvedProps.id}_header_${name}`;
601
601
  const panelId = `${resolvedProps.id}_panel_${name}`;
602
- const handleKeyDown = (event: KeyboardEvent): void => {
602
+ const handleKeyDown = (event: Event): void => {
603
+ if (!(event instanceof KeyboardEvent)) return;
603
604
  if (event.key !== 'Enter' && event.key !== ' ') return;
604
605
  event.preventDefault();
605
606
  void activate(name);
@@ -624,7 +625,7 @@ export function createAccordion(props: AccordionProps): AccordionInstance {
624
625
  role: 'heading',
625
626
  children: () => {
626
627
  const item = itemAccessor();
627
- return titleView(item.title, item, indexAccessor());
628
+ return asRenderable(titleView(item.title, item, indexAccessor()));
628
629
  },
629
630
  }),
630
631
  jsx('span', {
@@ -649,7 +650,7 @@ export function createAccordion(props: AccordionProps): AccordionInstance {
649
650
  children: jsx('div', {
650
651
  className: resolvedProps.className.content,
651
652
  'data-accordion-content': name,
652
- children: content.render,
653
+ children: () => asRenderable(content.render()),
653
654
  }),
654
655
  }),
655
656
  ];
package/src/components/flow.ts CHANGED
@@ -4,7 +4,7 @@ import {
4
4
  type FunctionalComponent,
5
5
  defineComponent,
6
6
  } from '../core/component.ts';
7
- import { type RenderableContent } from '../utilities/dom.ts';
7
+ import { asRenderable, type RenderableContent } from '../utilities/dom.ts';
8
8
  import { randomId } from '../utilities/id.ts';
9
9
  import { isPlainObject } from '../utilities/object.ts';
10
10
  import {
@@ -906,57 +906,59 @@ export function createFlow(input: FlowProps = {}): Flow {
906
906
  jsx('div', {
907
907
  className: props.className.header,
908
908
  'data-flow-header': '',
909
- children: renderSlot('renderHeader', () =>
910
- jsx('ol', {
911
- className: props.className.steps,
912
- 'data-flow-steps': '',
913
- role: 'list',
914
- 'aria-label': 'Flow steps',
915
- children: steps.map((step, index) =>
916
- jsx('li', {
917
- className: () =>
918
- [
919
- props.className.step,
920
- index === state.currentIndex
921
- ? props.className.active
922
- : '',
923
- index < state.currentIndex
924
- ? props.className.complete
925
- : '',
926
- ]
927
- .filter(Boolean)
928
- .join(' '),
929
- 'data-flow-step': step.id,
930
- 'data-flow-step-index': String(index),
931
- 'aria-current': () =>
932
- index === state.currentIndex ? 'step' : null,
933
- children: jsx('button', {
934
- type: 'button',
935
- className: props.className.stepButton,
936
- disabled: () =>
937
- props.linear && index > state.currentIndex,
909
+ children: asRenderable(
910
+ renderSlot('renderHeader', () =>
911
+ jsx('ol', {
912
+ className: props.className.steps,
913
+ 'data-flow-steps': '',
914
+ role: 'list',
915
+ 'aria-label': 'Flow steps',
916
+ children: steps.map((step, index) =>
917
+ jsx('li', {
918
+ className: () =>
919
+ [
920
+ props.className.step,
921
+ index === state.currentIndex
922
+ ? props.className.active
923
+ : '',
924
+ index < state.currentIndex
925
+ ? props.className.complete
926
+ : '',
927
+ ]
928
+ .filter(Boolean)
929
+ .join(' '),
930
+ 'data-flow-step': step.id,
931
+ 'data-flow-step-index': String(index),
938
932
  'aria-current': () =>
939
933
  index === state.currentIndex ? 'step' : null,
940
- onClick: () => {
941
- if (index !== state.currentIndex)
942
- void flow.goTo(index);
943
- },
944
- children: [
945
- jsx('span', {
946
- className: props.className.stepIndex,
947
- 'data-flow-step-number': '',
948
- children: index + 1,
949
- }),
950
- jsx('span', {
951
- className: props.className.stepTitle,
952
- 'data-flow-step-title': '',
953
- children: step.title || step.id,
954
- }),
955
- ],
956
- }),
957
- })
958
- ),
959
- })
934
+ children: jsx('button', {
935
+ type: 'button',
936
+ className: props.className.stepButton,
937
+ disabled: () =>
938
+ props.linear && index > state.currentIndex,
939
+ 'aria-current': () =>
940
+ index === state.currentIndex ? 'step' : null,
941
+ onClick: () => {
942
+ if (index !== state.currentIndex)
943
+ void flow.goTo(index);
944
+ },
945
+ children: [
946
+ jsx('span', {
947
+ className: props.className.stepIndex,
948
+ 'data-flow-step-number': '',
949
+ children: index + 1,
950
+ }),
951
+ jsx('span', {
952
+ className: props.className.stepTitle,
953
+ 'data-flow-step-title': '',
954
+ children: step.title || step.id,
955
+ }),
956
+ ],
957
+ }),
958
+ })
959
+ ),
960
+ })
961
+ )
960
962
  ),
961
963
  }),
962
964
  jsx('div', {
@@ -965,53 +967,66 @@ export function createFlow(input: FlowProps = {}): Flow {
965
967
  role: 'region',
966
968
  'aria-live': 'polite',
967
969
  'aria-busy': () => (state.loading ? 'true' : 'false'),
968
- children: renderSlot('renderBody', () => () => {
969
- const version = state.version;
970
- return version >= 0 ? contentView() : null;
971
- }),
970
+ children: asRenderable(
971
+ renderSlot('renderBody', () => () => {
972
+ const version = state.version;
973
+ return version >= 0 ? contentView() : null;
974
+ })
975
+ ),
972
976
  }),
973
977
  jsx('div', {
974
978
  className: props.className.footer,
975
979
  'data-flow-footer': '',
976
- children: renderSlot('renderFooter', () => [
977
- props.showReset
978
- ? jsx('button', {
979
- type: 'button',
980
- className: [props.className.button, props.className.reset]
981
- .filter(Boolean)
982
- .join(' '),
983
- 'data-action': 'reset',
984
- onClick: () => flow.reset(),
985
- disabled: () => state.loading,
986
- children: props.text.reset,
987
- })
988
- : null,
989
- props.showBack
990
- ? jsx('button', {
991
- type: 'button',
992
- className: [props.className.button, props.className.back]
993
- .filter(Boolean)
994
- .join(' '),
995
- 'data-action': 'back',
996
- onClick: () => void flow.back(),
997
- disabled: () => !flow.canBack,
998
- children: props.text.back,
999
- })
1000
- : null,
1001
- props.showNext
1002
- ? jsx('button', {
1003
- type: 'button',
1004
- className: [props.className.button, props.className.next]
1005
- .filter(Boolean)
1006
- .join(' '),
1007
- 'data-action': 'next',
1008
- onClick: () => void flow.next(),
1009
- disabled: () => state.loading,
1010
- children: () =>
1011
- flow.isLast ? props.text.finish : props.text.next,
1012
- })
1013
- : null,
1014
- ]),
980
+ children: asRenderable(
981
+ renderSlot('renderFooter', () => [
982
+ props.showReset
983
+ ? jsx('button', {
984
+ type: 'button',
985
+ className: [
986
+ props.className.button,
987
+ props.className.reset,
988
+ ]
989
+ .filter(Boolean)
990
+ .join(' '),
991
+ 'data-action': 'reset',
992
+ onClick: () => flow.reset(),
993
+ disabled: () => state.loading,
994
+ children: props.text.reset,
995
+ })
996
+ : null,
997
+ props.showBack
998
+ ? jsx('button', {
999
+ type: 'button',
1000
+ className: [
1001
+ props.className.button,
1002
+ props.className.back,
1003
+ ]
1004
+ .filter(Boolean)
1005
+ .join(' '),
1006
+ 'data-action': 'back',
1007
+ onClick: () => void flow.back(),
1008
+ disabled: () => !flow.canBack,
1009
+ children: props.text.back,
1010
+ })
1011
+ : null,
1012
+ props.showNext
1013
+ ? jsx('button', {
1014
+ type: 'button',
1015
+ className: [
1016
+ props.className.button,
1017
+ props.className.next,
1018
+ ]
1019
+ .filter(Boolean)
1020
+ .join(' '),
1021
+ 'data-action': 'next',
1022
+ onClick: () => void flow.next(),
1023
+ disabled: () => state.loading,
1024
+ children: () =>
1025
+ flow.isLast ? props.text.finish : props.text.next,
1026
+ })
1027
+ : null,
1028
+ ])
1029
+ ),
1015
1030
  }),
1016
1031
  ],
1017
1032
  }) as HTMLElement,