@flightlesslabs/dodo-ui 0.13.0 → 0.14.0

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 (186) hide show
  1. package/dist/index.d.ts +3 -0
  2. package/dist/index.js +2 -0
  3. package/dist/stories/components/Form/Button/Button.svelte +1 -1
  4. package/dist/stories/components/Form/Button/Button.svelte.d.ts +1 -1
  5. package/{src/lib/stories/components/Form/RangeSlider → dist/stories/components/Form/Toggle}/Color/Color.stories.svelte +4 -4
  6. package/dist/stories/components/Form/Toggle/Color/Color.stories.svelte.d.ts +26 -0
  7. package/dist/stories/components/Form/Toggle/Events/Events.stories.svelte +35 -0
  8. package/dist/stories/components/Form/Toggle/Events/Events.stories.svelte.d.ts +18 -0
  9. package/{src/lib/stories/components/Form/NumericInput → dist/stories/components/Form/Toggle}/Roundness/Roundness.stories.svelte +8 -6
  10. package/dist/stories/components/Form/Toggle/Roundness/Roundness.stories.svelte.d.ts +26 -0
  11. package/{src/lib/stories/components/Form/RangeSlider → dist/stories/components/Form/Toggle}/Size/Size.stories.svelte +4 -4
  12. package/dist/stories/components/Form/Toggle/Size/Size.stories.svelte.d.ts +26 -0
  13. package/dist/stories/components/Form/Toggle/Toggle.stories.svelte +37 -0
  14. package/dist/stories/components/Form/Toggle/Toggle.stories.svelte.d.ts +21 -0
  15. package/dist/stories/components/Form/Toggle/Toggle.svelte +369 -0
  16. package/dist/stories/components/Form/Toggle/Toggle.svelte.d.ts +34 -0
  17. package/dist/stories/components/Form/Toggle/utils/scss/mixins.scss +81 -0
  18. package/package.json +15 -13
  19. package/src/lib/index.ts +4 -0
  20. package/src/lib/stories/components/Form/Button/Button.svelte +2 -2
  21. package/src/lib/stories/components/Form/Toggle/Toggle.svelte +262 -0
  22. package/src/lib/stories/components/Form/Toggle/utils/scss/mixins.scss +81 -0
  23. package/src/lib/stories/Home.mdx +0 -59
  24. package/src/lib/stories/assets/dark-theme-toggle.png +0 -0
  25. package/src/lib/stories/components/Form/Button/Button.stories.svelte +0 -61
  26. package/src/lib/stories/components/Form/Button/Color/Color.stories.svelte +0 -43
  27. package/src/lib/stories/components/Form/Button/Events/Events.stories.svelte +0 -36
  28. package/src/lib/stories/components/Form/Button/IconButton/IconButton.stories.svelte +0 -43
  29. package/src/lib/stories/components/Form/Button/Roundness/Roundness.stories.svelte +0 -23
  30. package/src/lib/stories/components/Form/Button/Size/Size.stories.svelte +0 -16
  31. package/src/lib/stories/components/Form/Button/Variant/Variant.stories.svelte +0 -18
  32. package/src/lib/stories/components/Form/DatePicker/Color/Color.stories.svelte +0 -47
  33. package/src/lib/stories/components/Form/DatePicker/Controls/Controls.stories.svelte +0 -58
  34. package/src/lib/stories/components/Form/DatePicker/Customize/Customize.stories.svelte +0 -167
  35. package/src/lib/stories/components/Form/DatePicker/DatePicker.stories.svelte +0 -107
  36. package/src/lib/stories/components/Form/DatePicker/Events/Events.stories.svelte +0 -147
  37. package/src/lib/stories/components/Form/DatePicker/FilterDates/FilterDates.stories.svelte +0 -61
  38. package/src/lib/stories/components/Form/DatePicker/Positions/AutoPosition/AutoPosition.stories.svelte +0 -46
  39. package/src/lib/stories/components/Form/DatePicker/Positions/Positions.stories.svelte +0 -57
  40. package/src/lib/stories/components/Form/DatePicker/Roundness/Roundness.stories.svelte +0 -38
  41. package/src/lib/stories/components/Form/DatePicker/Size/Size.stories.svelte +0 -41
  42. package/src/lib/stories/components/Form/DatePicker/WithIcon/WithIcon.stories.svelte +0 -41
  43. package/src/lib/stories/components/Form/FormControl/FormControl.stories.svelte +0 -28
  44. package/src/lib/stories/components/Form/Label/Label.stories.svelte +0 -13
  45. package/src/lib/stories/components/Form/Message/Color/Color.stories.svelte +0 -36
  46. package/src/lib/stories/components/Form/Message/Message.stories.svelte +0 -27
  47. package/src/lib/stories/components/Form/Message/Size/Size.stories.svelte +0 -22
  48. package/src/lib/stories/components/Form/NumericInput/Events/Events.stories.svelte +0 -134
  49. package/src/lib/stories/components/Form/NumericInput/NumericInput.stories.svelte +0 -84
  50. package/src/lib/stories/components/Form/NumericInput/Size/Size.stories.svelte +0 -16
  51. package/src/lib/stories/components/Form/NumericInput/Validation/Validation.stories.svelte +0 -87
  52. package/src/lib/stories/components/Form/NumericInput/WithIcon/WithIcon.stories.svelte +0 -31
  53. package/src/lib/stories/components/Form/PasswordInput/Events/Events.stories.svelte +0 -132
  54. package/src/lib/stories/components/Form/PasswordInput/PasswordInput.stories.svelte +0 -58
  55. package/src/lib/stories/components/Form/PasswordInput/Roundness/Roundness.stories.svelte +0 -20
  56. package/src/lib/stories/components/Form/PasswordInput/Size/Size.stories.svelte +0 -16
  57. package/src/lib/stories/components/Form/PasswordInput/WithIcon/WithIcon.stories.svelte +0 -31
  58. package/src/lib/stories/components/Form/RangeSlider/Events/Events.stories.svelte +0 -63
  59. package/src/lib/stories/components/Form/RangeSlider/RangeSlider.stories.svelte +0 -69
  60. package/src/lib/stories/components/Form/RangeSlider/Roundness/Roundness.stories.svelte +0 -30
  61. package/src/lib/stories/components/Form/RangeSlider/WithIcon/WithIcon.stories.svelte +0 -33
  62. package/src/lib/stories/components/Form/Select/Customize/Customize.stories.svelte +0 -139
  63. package/src/lib/stories/components/Form/Select/DropDownArrow/DropDownArrow.stories.svelte +0 -63
  64. package/src/lib/stories/components/Form/Select/Events/Events.stories.svelte +0 -174
  65. package/src/lib/stories/components/Form/Select/Options/OptionFormat.mdx +0 -40
  66. package/src/lib/stories/components/Form/Select/Positions/AutoPosition/AutoPosition.stories.svelte +0 -58
  67. package/src/lib/stories/components/Form/Select/Positions/Positions.stories.svelte +0 -87
  68. package/src/lib/stories/components/Form/Select/Roundness/Roundness.stories.svelte +0 -32
  69. package/src/lib/stories/components/Form/Select/Select.stories.svelte +0 -125
  70. package/src/lib/stories/components/Form/Select/Size/Size.stories.svelte +0 -28
  71. package/src/lib/stories/components/Form/Select/WithIcon/WithIcon.stories.svelte +0 -43
  72. package/src/lib/stories/components/Form/TextInput/Events/Events.stories.svelte +0 -125
  73. package/src/lib/stories/components/Form/TextInput/Roundness/Roundness.stories.svelte +0 -21
  74. package/src/lib/stories/components/Form/TextInput/Size/Size.stories.svelte +0 -17
  75. package/src/lib/stories/components/Form/TextInput/TextInput.stories.svelte +0 -43
  76. package/src/lib/stories/components/Form/TextInput/WithIcon/WithIcon.stories.svelte +0 -47
  77. package/src/lib/stories/components/Info/Calendar/Calendar.stories.svelte +0 -121
  78. package/src/lib/stories/components/Info/Calendar/Color/Color.stories.svelte +0 -23
  79. package/src/lib/stories/components/Info/Calendar/Controls/Controls.stories.svelte +0 -26
  80. package/src/lib/stories/components/Info/Calendar/Customize/Customize.stories.svelte +0 -160
  81. package/src/lib/stories/components/Info/Calendar/Events/Events.stories.svelte +0 -122
  82. package/src/lib/stories/components/Info/Calendar/FilterDates/FilterDates.stories.svelte +0 -70
  83. package/src/lib/stories/components/Info/Calendar/Size/Size.stories.svelte +0 -20
  84. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarControls.stories.svelte +0 -36
  85. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/CalendarMonthSelector.stories.svelte +0 -58
  86. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Color/Color.stories.svelte +0 -23
  87. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Customize/Customize.stories.svelte +0 -30
  88. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Events/Events.stories.svelte +0 -25
  89. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/NameTypes/NameTypes.stories.svelte +0 -25
  90. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Roundness/Roundness.stories.svelte +0 -26
  91. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Size/Size.stories.svelte +0 -20
  92. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/CalendarNavigation.stories.svelte +0 -36
  93. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/Color/Color.stories.svelte +0 -19
  94. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/Customize/Customize.stories.svelte +0 -33
  95. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/Events/Events.stories.svelte +0 -37
  96. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/Size/Size.stories.svelte +0 -16
  97. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/CalendarYearSelector.stories.svelte +0 -58
  98. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Color/Color.stories.svelte +0 -23
  99. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Customize/Customize.stories.svelte +0 -30
  100. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Events/Events.stories.svelte +0 -25
  101. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Roundness/Roundness.stories.svelte +0 -26
  102. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Size/Size.stories.svelte +0 -20
  103. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Color/Color.stories.svelte +0 -23
  104. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Controls/Controls.stories.svelte +0 -21
  105. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Customize/Customize.stories.svelte +0 -69
  106. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Events/Events.stories.svelte +0 -61
  107. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Size/Size.stories.svelte +0 -20
  108. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/CalendarDateChip.stories.svelte +0 -75
  109. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Color/Color.stories.svelte +0 -41
  110. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Customize/Customize.stories.svelte +0 -45
  111. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Events/Events.stories.svelte +0 -28
  112. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Roundness/Roundness.stories.svelte +0 -31
  113. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Size/Size.stories.svelte +0 -24
  114. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/SpecialChips/SpecialChips.stories.svelte +0 -96
  115. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDatesChart.stories.svelte +0 -104
  116. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/CalendarWeek.stories.svelte +0 -38
  117. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/Customize/Customize.stories.svelte +0 -32
  118. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/NameTypes/NameTypes.stories.svelte +0 -28
  119. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/Size/Size.stories.svelte +0 -16
  120. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/Color/Color.stories.svelte +0 -23
  121. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/Customize/Customize.stories.svelte +0 -68
  122. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/Events/Events.stories.svelte +0 -24
  123. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/Size/Size.stories.svelte +0 -20
  124. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/CalendarMonthChip.stories.svelte +0 -40
  125. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Color/Color.stories.svelte +0 -29
  126. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Customize/Customize.stories.svelte +0 -33
  127. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Events/Events.stories.svelte +0 -23
  128. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Roundness/Roundness.stories.svelte +0 -26
  129. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Size/Size.stories.svelte +0 -19
  130. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthList.stories.svelte +0 -45
  131. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/Color/Color.stories.svelte +0 -22
  132. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/Customize/Customize.stories.svelte +0 -36
  133. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/Events/Events.stories.svelte +0 -33
  134. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/Size/Size.stories.svelte +0 -19
  135. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/CalendarYearChip.stories.svelte +0 -41
  136. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Color/Color.stories.svelte +0 -30
  137. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Customize/Customize.stories.svelte +0 -33
  138. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Events/Events.stories.svelte +0 -24
  139. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Roundness/Roundness.stories.svelte +0 -27
  140. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Size/Size.stories.svelte +0 -20
  141. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearList.stories.svelte +0 -39
  142. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/Color/Color.stories.svelte +0 -23
  143. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/Customize/Customize.stories.svelte +0 -36
  144. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/Events/Events.stories.svelte +0 -24
  145. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/Size/Size.stories.svelte +0 -20
  146. package/src/lib/stories/components/Info/Calendar/utils/createDateOfMonth/index.mdx +0 -121
  147. package/src/lib/stories/components/Info/Calendar/utils/getDatesOfMonth/index.mdx +0 -37
  148. package/src/lib/stories/components/Layout/Menu/DynamicMenu/Customize/Customize.stories.svelte +0 -30
  149. package/src/lib/stories/components/Layout/Menu/DynamicMenu/DynamicMenu.stories.svelte +0 -56
  150. package/src/lib/stories/components/Layout/Menu/DynamicMenu/Events/Events.stories.svelte +0 -48
  151. package/src/lib/stories/components/Layout/Menu/DynamicMenu/KeybaordNavigation/KeybaordNavigation.stories.svelte +0 -29
  152. package/src/lib/stories/components/Layout/Menu/DynamicMenu/Options/OptionFormat.mdx +0 -72
  153. package/src/lib/stories/components/Layout/Menu/Menu.stories.svelte +0 -69
  154. package/src/lib/stories/components/Layout/Menu/MenuItem/MenuItem.stories.svelte +0 -34
  155. package/src/lib/stories/components/Layout/Menu/MenuItem/Size/Size.stories.svelte +0 -16
  156. package/src/lib/stories/components/Layout/Menu/MenuItem/Type/Type.stories.svelte +0 -21
  157. package/src/lib/stories/components/Layout/Menu/Size/Size.stories.svelte +0 -37
  158. package/src/lib/stories/components/Layout/Paper/Color/Color.stories.svelte +0 -63
  159. package/src/lib/stories/components/Layout/Paper/Paper.stories.svelte +0 -50
  160. package/src/lib/stories/components/Layout/Paper/Roundness/Roundness.stories.svelte +0 -25
  161. package/src/lib/stories/components/Layout/Paper/Shadow/Shadow.stories.svelte +0 -24
  162. package/src/lib/stories/components/Layout/Separator/Color/Color.stories.svelte +0 -19
  163. package/src/lib/stories/components/Layout/Separator/Separator.stories.svelte +0 -30
  164. package/src/lib/stories/developer tools/Intro.mdx +0 -9
  165. package/src/lib/stories/developer tools/components/DynamicInput/DynamicInput.stories.svelte +0 -53
  166. package/src/lib/stories/developer tools/components/DynamicInput/Events/Events.stories.svelte +0 -121
  167. package/src/lib/stories/developer tools/components/DynamicInput/Size/Size.stories.svelte +0 -17
  168. package/src/lib/stories/developer tools/components/InputEnclosure/InputEnclosure.stories.svelte +0 -38
  169. package/src/lib/stories/developer tools/components/InputEnclosure/Roundness/Roundness.stories.svelte +0 -20
  170. package/src/lib/stories/developer tools/components/InputEnclosure/Size/Size.stories.svelte +0 -16
  171. package/src/lib/stories/developer tools/components/InputEnclosure/WithIcon/WithIcon.stories.svelte +0 -47
  172. package/src/lib/stories/developer tools/components/Popper/Popper.stories.svelte +0 -140
  173. package/src/lib/stories/developer tools/components/Popper/PopperPopup/PopperPopup.stories.svelte +0 -64
  174. package/src/lib/stories/developer tools/components/Popper/Positions/AutoPosition/AutoPosition.stories.svelte +0 -92
  175. package/src/lib/stories/developer tools/components/Popper/Positions/Positions.stories.svelte +0 -114
  176. package/src/lib/stories/developer tools/components/UtilityButton/Size/Size.stories.svelte +0 -25
  177. package/src/lib/stories/developer tools/components/UtilityButton/UtilityButton.stories.svelte +0 -30
  178. package/src/lib/stories/developer tools/directives/clickOutside/index.mdx +0 -25
  179. package/src/lib/stories/developer tools/helpers/Numbers/cleanNumericString/index.mdx +0 -20
  180. package/src/lib/stories/developer tools/helpers/Numbers/isValidNumberValue/index.mdx +0 -71
  181. package/src/lib/stories/developer tools/helpers/Time/getMoment/index.mdx +0 -45
  182. package/src/lib/stories/developer tools/helpers/logger/index.mdx +0 -63
  183. package/src/lib/stories/developer tools/philosophy/Colors/Colors.mdx +0 -43
  184. package/src/lib/stories/developer tools/philosophy/Colors/Colors.stories.svelte +0 -22
  185. package/src/lib/stories/developer tools/philosophy/Colors/Opacity.stories.svelte +0 -11
  186. package/src/lib/stories/developer tools/philosophy/Themes.mdx +0 -23
@@ -1,33 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarNavigation from '../CalendarNavigation.svelte';
4
- import { storyCalendarNavigationArgTypes } from '../CalendarNavigation.stories.svelte';
5
- import { Button } from '$lib/index.js';
6
- import Icon from '@iconify/svelte';
7
-
8
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
9
- const { Story } = defineMeta({
10
- component: CalendarNavigation,
11
- tags: ['autodocs'],
12
- argTypes: storyCalendarNavigationArgTypes,
13
- });
14
- </script>
15
-
16
- <Story name="customCalendarNavigationContent" asChild>
17
- <CalendarNavigation>
18
- {#snippet customCalendarNavigationPrevContent()}
19
- <Icon icon="carbon:previous-filled" width="32" height="32" />
20
- {/snippet}
21
- {#snippet customCalendarNavigationNextContent()}
22
- <Icon icon="carbon:next-outline" width="32" height="32" />
23
- {/snippet}
24
- </CalendarNavigation>
25
- </Story>
26
-
27
- <Story name="customCalendarNavigation" asChild>
28
- <CalendarNavigation>
29
- {#snippet customCalendarNavigation()}
30
- <Button>Control</Button>
31
- {/snippet}
32
- </CalendarNavigation>
33
- </Story>
@@ -1,37 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarNavigation from '../CalendarNavigation.svelte';
4
- import { storyCalendarNavigationArgTypes } from '../CalendarNavigation.stories.svelte';
5
- import type { ButtonClickEvent } from '$lib/index.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarNavigation,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarNavigationArgTypes,
12
- });
13
- </script>
14
-
15
- <Story
16
- name="CalendarNavigationNextClick"
17
- args={{
18
- onCalendarNavigationNextClick: (e: ButtonClickEvent) => {
19
- const target = e.target as HTMLButtonElement;
20
-
21
- alert('Button Clicked');
22
- console.log('Button Clicked', target);
23
- },
24
- }}
25
- />
26
-
27
- <Story
28
- name="CalendarNavigationPrevClick"
29
- args={{
30
- onCalendarNavigationPrevClick: (e: ButtonClickEvent) => {
31
- const target = e.target as HTMLButtonElement;
32
-
33
- alert('Button Clicked');
34
- console.log('Button Clicked', target);
35
- },
36
- }}
37
- />
@@ -1,16 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarNavigation from '../CalendarNavigation.svelte';
4
- import { storyCalendarNavigationArgTypes } from '../CalendarNavigation.stories.svelte';
5
-
6
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
7
- const { Story } = defineMeta({
8
- component: CalendarNavigation,
9
- tags: ['autodocs'],
10
- argTypes: storyCalendarNavigationArgTypes,
11
- });
12
- </script>
13
-
14
- <Story name="Normal" />
15
- <Story name="Small" args={{ size: 'small' }} />
16
- <Story name="Large" args={{ size: 'large' }} />
@@ -1,58 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarYearSelector from './CalendarYearSelector.svelte';
4
- import type { StoryBookArgTypes } from '$lib/storybook-types.js';
5
- import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
6
- import { componentColorArray } from '$lib/types/colors.js';
7
- import { componentSizeArray } from '$lib/types/size.js';
8
- import { componentRoundnessArray } from '$lib/types/roundness.js';
9
-
10
- export const storyCalendarYearSelectorArgTypes: StoryBookArgTypes = {
11
- color: {
12
- control: { type: 'select' },
13
- options: componentColorArray,
14
- },
15
- size: {
16
- control: { type: 'select' },
17
- options: componentSizeArray,
18
- },
19
- roundness: {
20
- control: { type: 'select' },
21
- options: componentRoundnessArray,
22
- },
23
- };
24
-
25
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
26
- const { Story } = defineMeta({
27
- component: CalendarYearSelector,
28
- tags: ['autodocs'],
29
- argTypes: storyCalendarYearSelectorArgTypes,
30
- });
31
-
32
- let value = $state(getMoment().toDate());
33
- </script>
34
-
35
- <!-- Default CalendarYearSelector -->
36
- <Story
37
- name="Default"
38
- args={{
39
- value,
40
- }}
41
- />
42
-
43
- <!-- Override year -->
44
- <Story
45
- name="ActiveMonth"
46
- args={{
47
- value,
48
- activeMonth: getMoment().add(2, 'years').toDate(),
49
- }}
50
- />
51
-
52
- <Story
53
- name="Disabled"
54
- args={{
55
- value,
56
- disabled: true,
57
- }}
58
- />
@@ -1,23 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarYearSelector from '../../CalendarYearSelector/CalendarYearSelector.svelte';
4
- import { storyCalendarYearSelectorArgTypes } from '../../CalendarYearSelector/CalendarYearSelector.stories.svelte';
5
- import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarYearSelector,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarYearSelectorArgTypes,
12
- args: {
13
- value: getMoment().toDate(),
14
- },
15
- });
16
- </script>
17
-
18
- <Story name="Primary" />
19
- <Story name="Secondary" args={{ color: 'secondary' }} />
20
- <Story name="Neutral" args={{ color: 'neutral' }} />
21
- <Story name="Safe" args={{ color: 'safe' }} />
22
- <Story name="Warning" args={{ color: 'warning' }} />
23
- <Story name="Danger" args={{ color: 'danger' }} />
@@ -1,30 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarYearSelector from '../CalendarYearSelector.svelte';
4
- import { storyCalendarYearSelectorArgTypes } from '../CalendarYearSelector.stories.svelte';
5
-
6
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
7
- const { Story } = defineMeta({
8
- component: CalendarYearSelector,
9
- tags: ['autodocs'],
10
- argTypes: storyCalendarYearSelectorArgTypes,
11
- });
12
- </script>
13
-
14
- <Story name="customCalendarYearSelectorContent" asChild>
15
- <CalendarYearSelector>
16
- {#snippet customCalendarYearSelectorContent(selectedYear)}
17
- 🗓️{selectedYear}
18
- {/snippet}
19
- </CalendarYearSelector>
20
- </Story>
21
-
22
- <Story name="customCalendarYearSelector" asChild>
23
- <CalendarYearSelector>
24
- {#snippet customCalendarYearSelector(selectedYear)}
25
- <span style="color: blue; display: block;">
26
- {selectedYear}
27
- </span>
28
- {/snippet}
29
- </CalendarYearSelector>
30
- </Story>
@@ -1,25 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarYearSelector from '../CalendarYearSelector.svelte';
4
- import { storyCalendarYearSelectorArgTypes } from '../CalendarYearSelector.stories.svelte';
5
- import type { ButtonClickEvent } from '$lib/index.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarYearSelector,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarYearSelectorArgTypes,
12
- });
13
- </script>
14
-
15
- <Story
16
- name="Click"
17
- args={{
18
- onclick: (selectedYear: string, e: ButtonClickEvent) => {
19
- const target = e.target as HTMLButtonElement;
20
-
21
- alert('Button Clicked');
22
- console.log('Button Clicked', selectedYear, target);
23
- },
24
- }}
25
- />
@@ -1,26 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarYearSelector from '../CalendarYearSelector.svelte';
4
- import { storyCalendarYearSelectorArgTypes } from '../CalendarYearSelector.stories.svelte';
5
- import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarYearSelector,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarYearSelectorArgTypes,
12
- args: {
13
- value: getMoment().toDate(),
14
- },
15
- });
16
- </script>
17
-
18
- <Story name="Roundness Default" />
19
-
20
- <Story name="Roundness 1" args={{ roundness: 1 }} />
21
-
22
- <Story name="Roundness 2" args={{ roundness: 2 }} />
23
-
24
- <Story name="Roundness 3" args={{ roundness: 3 }} />
25
-
26
- <Story name="Roundness 0" args={{ roundness: 0 }} />
@@ -1,20 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarYearSelector from '../CalendarYearSelector.svelte';
4
- import { storyCalendarYearSelectorArgTypes } from '../CalendarYearSelector.stories.svelte';
5
- import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarYearSelector,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarYearSelectorArgTypes,
12
- args: {
13
- value: getMoment().toDate(),
14
- },
15
- });
16
- </script>
17
-
18
- <Story name="Normal" />
19
- <Story name="Small" args={{ size: 'small' }} />
20
- <Story name="Large" args={{ size: 'large' }} />
@@ -1,23 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarControls from '../../CalendarControls/CalendarControls.svelte';
4
- import { storyCalendarControlsArgTypes } from '../../CalendarControls/CalendarControls.stories.svelte';
5
- import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarControls,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarControlsArgTypes,
12
- args: {
13
- value: getMoment().toDate(),
14
- },
15
- });
16
- </script>
17
-
18
- <Story name="Primary" />
19
- <Story name="Secondary" args={{ color: 'secondary' }} />
20
- <Story name="Neutral" args={{ color: 'neutral' }} />
21
- <Story name="Safe" args={{ color: 'safe' }} />
22
- <Story name="Warning" args={{ color: 'warning' }} />
23
- <Story name="Danger" args={{ color: 'danger' }} />
@@ -1,21 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarControls from '../CalendarControls.svelte';
4
- import { storyCalendarControlsArgTypes } from '../CalendarControls.stories.svelte';
5
- import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarControls,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarControlsArgTypes,
12
- args: {
13
- value: getMoment().toDate(),
14
- },
15
- });
16
- </script>
17
-
18
- <Story name="Normal" />
19
- <Story name="HideCalendarMonthSelector" args={{ showCalendarMonthSelector: false }} />
20
- <Story name="HideCalendarYearSelector" args={{ showCalendarYearSelector: false }} />
21
- <Story name="HideCalendarNavigator" args={{ showCalendarNavigator: false }} />
@@ -1,69 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarControls from '../CalendarControls.svelte';
4
- import { storyCalendarControlsArgTypes } from '../CalendarControls.stories.svelte';
5
- import { Button } from '$lib/index.js';
6
- import Icon from '@iconify/svelte';
7
-
8
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
9
- const { Story } = defineMeta({
10
- component: CalendarControls,
11
- tags: ['autodocs'],
12
- argTypes: storyCalendarControlsArgTypes,
13
- });
14
- </script>
15
-
16
- <Story name="customCalendarMonthSelectorContent" asChild>
17
- <CalendarControls>
18
- {#snippet customCalendarMonthSelectorContent(option)}
19
- 🗓️{option.abr3}
20
- {/snippet}
21
- </CalendarControls>
22
- </Story>
23
-
24
- <Story name="customCalendarMonthSelector" asChild>
25
- <CalendarControls>
26
- {#snippet customCalendarMonthSelector(option)}
27
- <span style="color: blue; display: block;">
28
- {option.abr3}
29
- </span>
30
- {/snippet}
31
- </CalendarControls>
32
- </Story>
33
-
34
- <Story name="customCalendarYearSelectorContent" asChild>
35
- <CalendarControls>
36
- {#snippet customCalendarYearSelectorContent(selectedYear)}
37
- 🗓️{selectedYear}
38
- {/snippet}
39
- </CalendarControls>
40
- </Story>
41
-
42
- <Story name="customCalendarYearSelector" asChild>
43
- <CalendarControls>
44
- {#snippet customCalendarYearSelector(selectedYear)}
45
- <span style="color: blue; display: block;">
46
- {selectedYear}
47
- </span>
48
- {/snippet}
49
- </CalendarControls>
50
- </Story>
51
-
52
- <Story name="customCalendarNavigationContent" asChild>
53
- <CalendarControls>
54
- {#snippet customCalendarNavigationPrevContent()}
55
- <Icon icon="carbon:previous-filled" width="32" height="32" />
56
- {/snippet}
57
- {#snippet customCalendarNavigationNextContent()}
58
- <Icon icon="carbon:next-outline" width="32" height="32" />
59
- {/snippet}
60
- </CalendarControls>
61
- </Story>
62
-
63
- <Story name="customCalendarNavigation" asChild>
64
- <CalendarControls>
65
- {#snippet customCalendarNavigation()}
66
- <Button>Control</Button>
67
- {/snippet}
68
- </CalendarControls>
69
- </Story>
@@ -1,61 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarControls from '../CalendarControls.svelte';
4
- import { storyCalendarControlsArgTypes } from '../CalendarControls.stories.svelte';
5
- import type { ButtonClickEvent, CalendarMonthOption } from '$lib/index.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarControls,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarControlsArgTypes,
12
- });
13
- </script>
14
-
15
- <Story
16
- name="MonthSelectorClick"
17
- args={{
18
- onMonthSelectorClick: (option: CalendarMonthOption, e: ButtonClickEvent) => {
19
- const target = e.target as HTMLButtonElement;
20
-
21
- alert('Button Clicked');
22
- console.log('Button Clicked', option, target);
23
- },
24
- }}
25
- />
26
-
27
- <Story
28
- name="YearSelectorClick"
29
- args={{
30
- onYearSelectorClick: (selectedYear: string, e: ButtonClickEvent) => {
31
- const target = e.target as HTMLButtonElement;
32
-
33
- alert('Button Clicked');
34
- console.log('Button Clicked', selectedYear, target);
35
- },
36
- }}
37
- />
38
-
39
- <Story
40
- name="CalendarNavigationNextClick"
41
- args={{
42
- onCalendarNavigationNextClick: (e: ButtonClickEvent) => {
43
- const target = e.target as HTMLButtonElement;
44
-
45
- alert('Button Clicked');
46
- console.log('Button Clicked', target);
47
- },
48
- }}
49
- />
50
-
51
- <Story
52
- name="CalendarNavigationPrevClick"
53
- args={{
54
- onCalendarNavigationPrevClick: (e: ButtonClickEvent) => {
55
- const target = e.target as HTMLButtonElement;
56
-
57
- alert('Button Clicked');
58
- console.log('Button Clicked', target);
59
- },
60
- }}
61
- />
@@ -1,20 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarControls from '../CalendarControls.svelte';
4
- import { storyCalendarControlsArgTypes } from '../CalendarControls.stories.svelte';
5
- import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarControls,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarControlsArgTypes,
12
- args: {
13
- value: getMoment().toDate(),
14
- },
15
- });
16
- </script>
17
-
18
- <Story name="Normal" />
19
- <Story name="Small" args={{ size: 'small' }} />
20
- <Story name="Large" args={{ size: 'large' }} />
@@ -1,75 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarDateChip from './CalendarDateChip.svelte';
4
- import type { StoryBookArgTypes } from '$lib/storybook-types.js';
5
- import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
6
- import { componentRoundnessArray } from '$lib/types/roundness.js';
7
- import { componentColorArray } from '$lib/types/colors.js';
8
- import { componentSizeArray } from '$lib/types/size.js';
9
-
10
- export const storyCalendarDateChipArgTypes: StoryBookArgTypes = {
11
- color: {
12
- control: { type: 'select' },
13
- options: componentColorArray,
14
- },
15
- roundness: {
16
- control: { type: 'select' },
17
- options: componentRoundnessArray,
18
- },
19
- size: {
20
- control: { type: 'select' },
21
- options: componentSizeArray,
22
- },
23
- };
24
-
25
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
26
- const { Story } = defineMeta({
27
- component: CalendarDateChip,
28
- tags: ['autodocs'],
29
- argTypes: storyCalendarDateChipArgTypes,
30
- args: {
31
- dayOfMonth: {
32
- id: '1',
33
- date: getMoment().toDate(),
34
- isCurrentMonth: true,
35
- },
36
- },
37
- });
38
- </script>
39
-
40
- <!-- Default CalendarDateChip -->
41
- <Story name="Default" />
42
-
43
- <Story name="Selected" args={{ selected: true }} />
44
-
45
- <Story
46
- name="Disabled"
47
- args={{
48
- dayOfMonth: {
49
- id: '1',
50
- date: getMoment().toDate(),
51
- isCurrentMonth: true,
52
- disabled: true,
53
- },
54
- }}
55
- />
56
-
57
- <!-- Today marker. Checkout more [Special Chips](?path=/docs/components-info-calendar-calendardateschart-calendardatechip-specialchips--docs) -->
58
- <Story
59
- name="Today"
60
- args={{
61
- dayOfMonth: {
62
- id: '1',
63
- date: getMoment().toDate(),
64
- isCurrentMonth: true,
65
- today: true,
66
- },
67
- }}
68
- />
69
-
70
- <Story
71
- name="Weekend"
72
- args={{
73
- weekend: true,
74
- }}
75
- />
@@ -1,41 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarDateChip from '../CalendarDateChip.svelte';
4
- import { storyCalendarDateChipArgTypes } from '../CalendarDateChip.stories.svelte';
5
- import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarDateChip,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarDateChipArgTypes,
12
- args: {
13
- dayOfMonth: {
14
- id: '1',
15
- date: getMoment().toDate(),
16
- isCurrentMonth: true,
17
- },
18
- },
19
- });
20
- </script>
21
-
22
- <Story name="Primary" />
23
- <Story name="Secondary" args={{ color: 'secondary' }} />
24
- <Story name="Neutral" args={{ color: 'neutral' }} />
25
- <Story name="Safe" args={{ color: 'safe' }} />
26
- <Story name="Warning" args={{ color: 'warning' }} />
27
- <Story name="Danger" args={{ color: 'danger' }} />
28
-
29
- <Story name="Primary Selected" args={{ color: 'primary', selected: true }} />
30
- <Story name="Secondary Selected" args={{ color: 'secondary', selected: true }} />
31
- <Story name="Neutral Selected" args={{ color: 'neutral', selected: true }} />
32
- <Story name="Safe Selected" args={{ color: 'safe', selected: true }} />
33
- <Story name="Warning Selected" args={{ color: 'warning', selected: true }} />
34
- <Story name="Danger Selected" args={{ color: 'danger', selected: true }} />
35
-
36
- <Story name="Primary Today" args={{ color: 'primary', today: true }} />
37
- <Story name="Secondary Today" args={{ color: 'secondary', today: true }} />
38
- <Story name="Neutral Today" args={{ color: 'neutral', today: true }} />
39
- <Story name="Safe Today" args={{ color: 'safe', today: true }} />
40
- <Story name="Warning Today" args={{ color: 'warning', today: true }} />
41
- <Story name="Danger Today" args={{ color: 'danger', today: true }} />
@@ -1,45 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarDateChip from '../CalendarDateChip.svelte';
4
- import { storyCalendarDateChipArgTypes } from '../CalendarDateChip.stories.svelte';
5
- import { Button, getMoment } from '$lib/index.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarDateChip,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarDateChipArgTypes,
12
- });
13
- </script>
14
-
15
- <!-- Custom Content -->
16
- <Story name="customCalendarDateChipContent" asChild>
17
- <CalendarDateChip
18
- dayOfMonth={{
19
- id: '1',
20
- date: getMoment().toDate(),
21
- isCurrentMonth: true,
22
- }}
23
- >
24
- {#snippet customCalendarDateChipContent(dayOfMonth)}
25
- 🗓️{Number(getMoment(dayOfMonth.date).format('D'))}
26
- {/snippet}
27
- </CalendarDateChip>
28
- </Story>
29
-
30
- <!-- Custom Chip -->
31
- <Story name="customCalendarDateChip" asChild>
32
- <CalendarDateChip
33
- dayOfMonth={{
34
- id: '1',
35
- date: getMoment().toDate(),
36
- isCurrentMonth: true,
37
- }}
38
- >
39
- {#snippet customCalendarDateChip(dayOfMonth)}
40
- <Button size="small" variant="text" outline>
41
- {Number(getMoment(dayOfMonth.date).format('D'))}
42
- </Button>
43
- {/snippet}
44
- </CalendarDateChip>
45
- </Story>
@@ -1,28 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarDateChip from '../CalendarDateChip.svelte';
4
- import { storyCalendarDateChipArgTypes } from '../CalendarDateChip.stories.svelte';
5
- import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarDateChip,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarDateChipArgTypes,
12
- });
13
- </script>
14
-
15
- <Story name="Select" asChild>
16
- <CalendarDateChip
17
- dayOfMonth={{
18
- id: '1',
19
- date: getMoment().toDate(),
20
- isCurrentMonth: true,
21
- }}
22
- onselect={(value, dayOfMonth, e) => {
23
- const target = e.target as HTMLButtonElement;
24
- alert(`CalendarDateChip Select, ${getMoment(value).format('DD-MM-YYYY')}`);
25
- console.log('CalendarDateChip Select', dayOfMonth, target);
26
- }}
27
- />
28
- </Story>