@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.
- package/dist/index.d.ts +3 -0
- package/dist/index.js +2 -0
- package/dist/stories/components/Form/Button/Button.svelte +1 -1
- package/dist/stories/components/Form/Button/Button.svelte.d.ts +1 -1
- package/{src/lib/stories/components/Form/RangeSlider → dist/stories/components/Form/Toggle}/Color/Color.stories.svelte +4 -4
- package/dist/stories/components/Form/Toggle/Color/Color.stories.svelte.d.ts +26 -0
- package/dist/stories/components/Form/Toggle/Events/Events.stories.svelte +35 -0
- package/dist/stories/components/Form/Toggle/Events/Events.stories.svelte.d.ts +18 -0
- package/{src/lib/stories/components/Form/NumericInput → dist/stories/components/Form/Toggle}/Roundness/Roundness.stories.svelte +8 -6
- package/dist/stories/components/Form/Toggle/Roundness/Roundness.stories.svelte.d.ts +26 -0
- package/{src/lib/stories/components/Form/RangeSlider → dist/stories/components/Form/Toggle}/Size/Size.stories.svelte +4 -4
- package/dist/stories/components/Form/Toggle/Size/Size.stories.svelte.d.ts +26 -0
- package/dist/stories/components/Form/Toggle/Toggle.stories.svelte +37 -0
- package/dist/stories/components/Form/Toggle/Toggle.stories.svelte.d.ts +21 -0
- package/dist/stories/components/Form/Toggle/Toggle.svelte +369 -0
- package/dist/stories/components/Form/Toggle/Toggle.svelte.d.ts +34 -0
- package/dist/stories/components/Form/Toggle/utils/scss/mixins.scss +81 -0
- package/package.json +15 -13
- package/src/lib/index.ts +4 -0
- package/src/lib/stories/components/Form/Button/Button.svelte +2 -2
- package/src/lib/stories/components/Form/Toggle/Toggle.svelte +262 -0
- package/src/lib/stories/components/Form/Toggle/utils/scss/mixins.scss +81 -0
- package/src/lib/stories/Home.mdx +0 -59
- package/src/lib/stories/assets/dark-theme-toggle.png +0 -0
- package/src/lib/stories/components/Form/Button/Button.stories.svelte +0 -61
- package/src/lib/stories/components/Form/Button/Color/Color.stories.svelte +0 -43
- package/src/lib/stories/components/Form/Button/Events/Events.stories.svelte +0 -36
- package/src/lib/stories/components/Form/Button/IconButton/IconButton.stories.svelte +0 -43
- package/src/lib/stories/components/Form/Button/Roundness/Roundness.stories.svelte +0 -23
- package/src/lib/stories/components/Form/Button/Size/Size.stories.svelte +0 -16
- package/src/lib/stories/components/Form/Button/Variant/Variant.stories.svelte +0 -18
- package/src/lib/stories/components/Form/DatePicker/Color/Color.stories.svelte +0 -47
- package/src/lib/stories/components/Form/DatePicker/Controls/Controls.stories.svelte +0 -58
- package/src/lib/stories/components/Form/DatePicker/Customize/Customize.stories.svelte +0 -167
- package/src/lib/stories/components/Form/DatePicker/DatePicker.stories.svelte +0 -107
- package/src/lib/stories/components/Form/DatePicker/Events/Events.stories.svelte +0 -147
- package/src/lib/stories/components/Form/DatePicker/FilterDates/FilterDates.stories.svelte +0 -61
- package/src/lib/stories/components/Form/DatePicker/Positions/AutoPosition/AutoPosition.stories.svelte +0 -46
- package/src/lib/stories/components/Form/DatePicker/Positions/Positions.stories.svelte +0 -57
- package/src/lib/stories/components/Form/DatePicker/Roundness/Roundness.stories.svelte +0 -38
- package/src/lib/stories/components/Form/DatePicker/Size/Size.stories.svelte +0 -41
- package/src/lib/stories/components/Form/DatePicker/WithIcon/WithIcon.stories.svelte +0 -41
- package/src/lib/stories/components/Form/FormControl/FormControl.stories.svelte +0 -28
- package/src/lib/stories/components/Form/Label/Label.stories.svelte +0 -13
- package/src/lib/stories/components/Form/Message/Color/Color.stories.svelte +0 -36
- package/src/lib/stories/components/Form/Message/Message.stories.svelte +0 -27
- package/src/lib/stories/components/Form/Message/Size/Size.stories.svelte +0 -22
- package/src/lib/stories/components/Form/NumericInput/Events/Events.stories.svelte +0 -134
- package/src/lib/stories/components/Form/NumericInput/NumericInput.stories.svelte +0 -84
- package/src/lib/stories/components/Form/NumericInput/Size/Size.stories.svelte +0 -16
- package/src/lib/stories/components/Form/NumericInput/Validation/Validation.stories.svelte +0 -87
- package/src/lib/stories/components/Form/NumericInput/WithIcon/WithIcon.stories.svelte +0 -31
- package/src/lib/stories/components/Form/PasswordInput/Events/Events.stories.svelte +0 -132
- package/src/lib/stories/components/Form/PasswordInput/PasswordInput.stories.svelte +0 -58
- package/src/lib/stories/components/Form/PasswordInput/Roundness/Roundness.stories.svelte +0 -20
- package/src/lib/stories/components/Form/PasswordInput/Size/Size.stories.svelte +0 -16
- package/src/lib/stories/components/Form/PasswordInput/WithIcon/WithIcon.stories.svelte +0 -31
- package/src/lib/stories/components/Form/RangeSlider/Events/Events.stories.svelte +0 -63
- package/src/lib/stories/components/Form/RangeSlider/RangeSlider.stories.svelte +0 -69
- package/src/lib/stories/components/Form/RangeSlider/Roundness/Roundness.stories.svelte +0 -30
- package/src/lib/stories/components/Form/RangeSlider/WithIcon/WithIcon.stories.svelte +0 -33
- package/src/lib/stories/components/Form/Select/Customize/Customize.stories.svelte +0 -139
- package/src/lib/stories/components/Form/Select/DropDownArrow/DropDownArrow.stories.svelte +0 -63
- package/src/lib/stories/components/Form/Select/Events/Events.stories.svelte +0 -174
- package/src/lib/stories/components/Form/Select/Options/OptionFormat.mdx +0 -40
- package/src/lib/stories/components/Form/Select/Positions/AutoPosition/AutoPosition.stories.svelte +0 -58
- package/src/lib/stories/components/Form/Select/Positions/Positions.stories.svelte +0 -87
- package/src/lib/stories/components/Form/Select/Roundness/Roundness.stories.svelte +0 -32
- package/src/lib/stories/components/Form/Select/Select.stories.svelte +0 -125
- package/src/lib/stories/components/Form/Select/Size/Size.stories.svelte +0 -28
- package/src/lib/stories/components/Form/Select/WithIcon/WithIcon.stories.svelte +0 -43
- package/src/lib/stories/components/Form/TextInput/Events/Events.stories.svelte +0 -125
- package/src/lib/stories/components/Form/TextInput/Roundness/Roundness.stories.svelte +0 -21
- package/src/lib/stories/components/Form/TextInput/Size/Size.stories.svelte +0 -17
- package/src/lib/stories/components/Form/TextInput/TextInput.stories.svelte +0 -43
- package/src/lib/stories/components/Form/TextInput/WithIcon/WithIcon.stories.svelte +0 -47
- package/src/lib/stories/components/Info/Calendar/Calendar.stories.svelte +0 -121
- package/src/lib/stories/components/Info/Calendar/Color/Color.stories.svelte +0 -23
- package/src/lib/stories/components/Info/Calendar/Controls/Controls.stories.svelte +0 -26
- package/src/lib/stories/components/Info/Calendar/Customize/Customize.stories.svelte +0 -160
- package/src/lib/stories/components/Info/Calendar/Events/Events.stories.svelte +0 -122
- package/src/lib/stories/components/Info/Calendar/FilterDates/FilterDates.stories.svelte +0 -70
- package/src/lib/stories/components/Info/Calendar/Size/Size.stories.svelte +0 -20
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarControls.stories.svelte +0 -36
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/CalendarMonthSelector.stories.svelte +0 -58
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Color/Color.stories.svelte +0 -23
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Customize/Customize.stories.svelte +0 -30
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Events/Events.stories.svelte +0 -25
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/NameTypes/NameTypes.stories.svelte +0 -25
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Roundness/Roundness.stories.svelte +0 -26
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Size/Size.stories.svelte +0 -20
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/CalendarNavigation.stories.svelte +0 -36
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/Color/Color.stories.svelte +0 -19
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/Customize/Customize.stories.svelte +0 -33
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/Events/Events.stories.svelte +0 -37
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/Size/Size.stories.svelte +0 -16
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/CalendarYearSelector.stories.svelte +0 -58
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Color/Color.stories.svelte +0 -23
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Customize/Customize.stories.svelte +0 -30
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Events/Events.stories.svelte +0 -25
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Roundness/Roundness.stories.svelte +0 -26
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Size/Size.stories.svelte +0 -20
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Color/Color.stories.svelte +0 -23
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Controls/Controls.stories.svelte +0 -21
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Customize/Customize.stories.svelte +0 -69
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Events/Events.stories.svelte +0 -61
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Size/Size.stories.svelte +0 -20
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/CalendarDateChip.stories.svelte +0 -75
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Color/Color.stories.svelte +0 -41
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Customize/Customize.stories.svelte +0 -45
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Events/Events.stories.svelte +0 -28
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Roundness/Roundness.stories.svelte +0 -31
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Size/Size.stories.svelte +0 -24
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/SpecialChips/SpecialChips.stories.svelte +0 -96
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDatesChart.stories.svelte +0 -104
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/CalendarWeek.stories.svelte +0 -38
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/Customize/Customize.stories.svelte +0 -32
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/NameTypes/NameTypes.stories.svelte +0 -28
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/Size/Size.stories.svelte +0 -16
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/Color/Color.stories.svelte +0 -23
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/Customize/Customize.stories.svelte +0 -68
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/Events/Events.stories.svelte +0 -24
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/Size/Size.stories.svelte +0 -20
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/CalendarMonthChip.stories.svelte +0 -40
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Color/Color.stories.svelte +0 -29
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Customize/Customize.stories.svelte +0 -33
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Events/Events.stories.svelte +0 -23
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Roundness/Roundness.stories.svelte +0 -26
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Size/Size.stories.svelte +0 -19
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthList.stories.svelte +0 -45
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/Color/Color.stories.svelte +0 -22
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/Customize/Customize.stories.svelte +0 -36
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/Events/Events.stories.svelte +0 -33
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/Size/Size.stories.svelte +0 -19
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/CalendarYearChip.stories.svelte +0 -41
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Color/Color.stories.svelte +0 -30
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Customize/Customize.stories.svelte +0 -33
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Events/Events.stories.svelte +0 -24
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Roundness/Roundness.stories.svelte +0 -27
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Size/Size.stories.svelte +0 -20
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearList.stories.svelte +0 -39
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/Color/Color.stories.svelte +0 -23
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/Customize/Customize.stories.svelte +0 -36
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/Events/Events.stories.svelte +0 -24
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/Size/Size.stories.svelte +0 -20
- package/src/lib/stories/components/Info/Calendar/utils/createDateOfMonth/index.mdx +0 -121
- package/src/lib/stories/components/Info/Calendar/utils/getDatesOfMonth/index.mdx +0 -37
- package/src/lib/stories/components/Layout/Menu/DynamicMenu/Customize/Customize.stories.svelte +0 -30
- package/src/lib/stories/components/Layout/Menu/DynamicMenu/DynamicMenu.stories.svelte +0 -56
- package/src/lib/stories/components/Layout/Menu/DynamicMenu/Events/Events.stories.svelte +0 -48
- package/src/lib/stories/components/Layout/Menu/DynamicMenu/KeybaordNavigation/KeybaordNavigation.stories.svelte +0 -29
- package/src/lib/stories/components/Layout/Menu/DynamicMenu/Options/OptionFormat.mdx +0 -72
- package/src/lib/stories/components/Layout/Menu/Menu.stories.svelte +0 -69
- package/src/lib/stories/components/Layout/Menu/MenuItem/MenuItem.stories.svelte +0 -34
- package/src/lib/stories/components/Layout/Menu/MenuItem/Size/Size.stories.svelte +0 -16
- package/src/lib/stories/components/Layout/Menu/MenuItem/Type/Type.stories.svelte +0 -21
- package/src/lib/stories/components/Layout/Menu/Size/Size.stories.svelte +0 -37
- package/src/lib/stories/components/Layout/Paper/Color/Color.stories.svelte +0 -63
- package/src/lib/stories/components/Layout/Paper/Paper.stories.svelte +0 -50
- package/src/lib/stories/components/Layout/Paper/Roundness/Roundness.stories.svelte +0 -25
- package/src/lib/stories/components/Layout/Paper/Shadow/Shadow.stories.svelte +0 -24
- package/src/lib/stories/components/Layout/Separator/Color/Color.stories.svelte +0 -19
- package/src/lib/stories/components/Layout/Separator/Separator.stories.svelte +0 -30
- package/src/lib/stories/developer tools/Intro.mdx +0 -9
- package/src/lib/stories/developer tools/components/DynamicInput/DynamicInput.stories.svelte +0 -53
- package/src/lib/stories/developer tools/components/DynamicInput/Events/Events.stories.svelte +0 -121
- package/src/lib/stories/developer tools/components/DynamicInput/Size/Size.stories.svelte +0 -17
- package/src/lib/stories/developer tools/components/InputEnclosure/InputEnclosure.stories.svelte +0 -38
- package/src/lib/stories/developer tools/components/InputEnclosure/Roundness/Roundness.stories.svelte +0 -20
- package/src/lib/stories/developer tools/components/InputEnclosure/Size/Size.stories.svelte +0 -16
- package/src/lib/stories/developer tools/components/InputEnclosure/WithIcon/WithIcon.stories.svelte +0 -47
- package/src/lib/stories/developer tools/components/Popper/Popper.stories.svelte +0 -140
- package/src/lib/stories/developer tools/components/Popper/PopperPopup/PopperPopup.stories.svelte +0 -64
- package/src/lib/stories/developer tools/components/Popper/Positions/AutoPosition/AutoPosition.stories.svelte +0 -92
- package/src/lib/stories/developer tools/components/Popper/Positions/Positions.stories.svelte +0 -114
- package/src/lib/stories/developer tools/components/UtilityButton/Size/Size.stories.svelte +0 -25
- package/src/lib/stories/developer tools/components/UtilityButton/UtilityButton.stories.svelte +0 -30
- package/src/lib/stories/developer tools/directives/clickOutside/index.mdx +0 -25
- package/src/lib/stories/developer tools/helpers/Numbers/cleanNumericString/index.mdx +0 -20
- package/src/lib/stories/developer tools/helpers/Numbers/isValidNumberValue/index.mdx +0 -71
- package/src/lib/stories/developer tools/helpers/Time/getMoment/index.mdx +0 -45
- package/src/lib/stories/developer tools/helpers/logger/index.mdx +0 -63
- package/src/lib/stories/developer tools/philosophy/Colors/Colors.mdx +0 -43
- package/src/lib/stories/developer tools/philosophy/Colors/Colors.stories.svelte +0 -22
- package/src/lib/stories/developer tools/philosophy/Colors/Opacity.stories.svelte +0 -11
- package/src/lib/stories/developer tools/philosophy/Themes.mdx +0 -23
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
<script module>
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import CalendarMonthChip from '../CalendarMonthChip.svelte';
|
|
4
|
-
import { storyCalendarMonthChipArgTypes } from '../CalendarMonthChip.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: CalendarMonthChip,
|
|
9
|
-
tags: ['autodocs'],
|
|
10
|
-
argTypes: storyCalendarMonthChipArgTypes,
|
|
11
|
-
args: {
|
|
12
|
-
value: 'jan',
|
|
13
|
-
},
|
|
14
|
-
});
|
|
15
|
-
</script>
|
|
16
|
-
|
|
17
|
-
<Story name="Normal" />
|
|
18
|
-
<Story name="Small" args={{ size: 'small' }} />
|
|
19
|
-
<Story name="Large" args={{ size: 'large' }} />
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
<script module lang="ts">
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import CalendarMonthList from './CalendarMonthList.svelte';
|
|
4
|
-
import type { StoryBookArgTypes } from '$lib/storybook-types.js';
|
|
5
|
-
import { componentColorArray } from '$lib/types/colors.js';
|
|
6
|
-
import { componentSizeArray } from '$lib/types/size.js';
|
|
7
|
-
|
|
8
|
-
export const storyCalendarMonthListArgTypes: StoryBookArgTypes = {
|
|
9
|
-
color: {
|
|
10
|
-
control: { type: 'select' },
|
|
11
|
-
options: componentColorArray,
|
|
12
|
-
},
|
|
13
|
-
size: {
|
|
14
|
-
control: { type: 'select' },
|
|
15
|
-
options: componentSizeArray,
|
|
16
|
-
},
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
|
20
|
-
const { Story } = defineMeta({
|
|
21
|
-
component: CalendarMonthList,
|
|
22
|
-
tags: ['autodocs'],
|
|
23
|
-
argTypes: storyCalendarMonthListArgTypes,
|
|
24
|
-
args: {
|
|
25
|
-
value: 'jan',
|
|
26
|
-
},
|
|
27
|
-
});
|
|
28
|
-
</script>
|
|
29
|
-
|
|
30
|
-
<!-- Default CalendarMonthList -->
|
|
31
|
-
<Story name="Default" />
|
|
32
|
-
|
|
33
|
-
<Story
|
|
34
|
-
name="DisabledMonths"
|
|
35
|
-
args={{
|
|
36
|
-
disabledMonths: ['feb', 'jul'],
|
|
37
|
-
}}
|
|
38
|
-
/>
|
|
39
|
-
|
|
40
|
-
<Story
|
|
41
|
-
name="HideControls"
|
|
42
|
-
args={{
|
|
43
|
-
showControls: false,
|
|
44
|
-
}}
|
|
45
|
-
/>
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
<script module>
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import CalendarMonthList from '../CalendarMonthList.svelte';
|
|
4
|
-
import { storyCalendarMonthListArgTypes } from '../CalendarMonthList.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: CalendarMonthList,
|
|
9
|
-
tags: ['autodocs'],
|
|
10
|
-
argTypes: storyCalendarMonthListArgTypes,
|
|
11
|
-
args: {
|
|
12
|
-
value: 'jan',
|
|
13
|
-
},
|
|
14
|
-
});
|
|
15
|
-
</script>
|
|
16
|
-
|
|
17
|
-
<Story name="Primary" />
|
|
18
|
-
<Story name="Secondary" args={{ color: 'secondary' }} />
|
|
19
|
-
<Story name="Neutral" args={{ color: 'neutral' }} />
|
|
20
|
-
<Story name="Safe" args={{ color: 'safe' }} />
|
|
21
|
-
<Story name="Warning" args={{ color: 'warning' }} />
|
|
22
|
-
<Story name="Danger" args={{ color: 'danger' }} />
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
<script module lang="ts">
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import CalendarMonthList from '../CalendarMonthList.svelte';
|
|
4
|
-
import { storyCalendarMonthListArgTypes } from '../CalendarMonthList.stories.svelte';
|
|
5
|
-
import { Button } 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: CalendarMonthList,
|
|
10
|
-
tags: ['autodocs'],
|
|
11
|
-
argTypes: storyCalendarMonthListArgTypes,
|
|
12
|
-
args: {
|
|
13
|
-
value: 'jan',
|
|
14
|
-
},
|
|
15
|
-
});
|
|
16
|
-
</script>
|
|
17
|
-
|
|
18
|
-
<Story name="Default" />
|
|
19
|
-
|
|
20
|
-
<Story name="customCalendarMonthChipContent" asChild>
|
|
21
|
-
<CalendarMonthList value="jan">
|
|
22
|
-
{#snippet customCalendarMonthChipContent(val)}
|
|
23
|
-
🗓️{val}
|
|
24
|
-
{/snippet}
|
|
25
|
-
</CalendarMonthList>
|
|
26
|
-
</Story>
|
|
27
|
-
|
|
28
|
-
<Story name="customCalendarMonthChip" asChild>
|
|
29
|
-
<CalendarMonthList value="jan">
|
|
30
|
-
{#snippet customCalendarMonthChip(val)}
|
|
31
|
-
<Button size="small" variant="text" outline>
|
|
32
|
-
{val}
|
|
33
|
-
</Button>
|
|
34
|
-
{/snippet}
|
|
35
|
-
</CalendarMonthList>
|
|
36
|
-
</Story>
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
<script module lang="ts">
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import CalendarMonthList from '../CalendarMonthList.svelte';
|
|
4
|
-
import { storyCalendarMonthListArgTypes } from '../CalendarMonthList.stories.svelte';
|
|
5
|
-
import type { CalendarMonthNames } from '../../CalendarControls/CalendarMonthSelector/CalendarMonthSelector.svelte';
|
|
6
|
-
|
|
7
|
-
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
|
8
|
-
const { Story } = defineMeta({
|
|
9
|
-
component: CalendarMonthList,
|
|
10
|
-
tags: ['autodocs'],
|
|
11
|
-
argTypes: storyCalendarMonthListArgTypes,
|
|
12
|
-
});
|
|
13
|
-
|
|
14
|
-
let value = $state<CalendarMonthNames>('jan');
|
|
15
|
-
</script>
|
|
16
|
-
|
|
17
|
-
<Story name="Select" asChild>
|
|
18
|
-
<CalendarMonthList
|
|
19
|
-
{value}
|
|
20
|
-
onselect={(val) => {
|
|
21
|
-
value = val;
|
|
22
|
-
}}
|
|
23
|
-
/>
|
|
24
|
-
</Story>
|
|
25
|
-
|
|
26
|
-
<Story name="Cancel" asChild>
|
|
27
|
-
<CalendarMonthList
|
|
28
|
-
{value}
|
|
29
|
-
oncancel={() => {
|
|
30
|
-
console.log('oncancel');
|
|
31
|
-
}}
|
|
32
|
-
/>
|
|
33
|
-
</Story>
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
<script module>
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import CalendarMonthList from '../CalendarMonthList.svelte';
|
|
4
|
-
import { storyCalendarMonthListArgTypes } from '../CalendarMonthList.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: CalendarMonthList,
|
|
9
|
-
tags: ['autodocs'],
|
|
10
|
-
argTypes: storyCalendarMonthListArgTypes,
|
|
11
|
-
args: {
|
|
12
|
-
value: 'jan',
|
|
13
|
-
},
|
|
14
|
-
});
|
|
15
|
-
</script>
|
|
16
|
-
|
|
17
|
-
<Story name="Normal" />
|
|
18
|
-
<Story name="Small" args={{ size: 'small' }} />
|
|
19
|
-
<Story name="Large" args={{ size: 'large' }} />
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
<script module lang="ts">
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import CalendarYearChip from './CalendarYearChip.svelte';
|
|
4
|
-
import type { StoryBookArgTypes } from '$lib/storybook-types.js';
|
|
5
|
-
import { componentColorArray } from '$lib/types/colors.js';
|
|
6
|
-
import { componentSizeArray } from '$lib/types/size.js';
|
|
7
|
-
import { componentRoundnessArray } from '$lib/types/roundness.js';
|
|
8
|
-
import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
|
|
9
|
-
|
|
10
|
-
export const storyCalendarYearChipArgTypes: 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: CalendarYearChip,
|
|
28
|
-
tags: ['autodocs'],
|
|
29
|
-
argTypes: storyCalendarYearChipArgTypes,
|
|
30
|
-
args: {
|
|
31
|
-
value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
|
|
32
|
-
},
|
|
33
|
-
});
|
|
34
|
-
</script>
|
|
35
|
-
|
|
36
|
-
<!-- Default CalendarYearChip -->
|
|
37
|
-
<Story name="Default" />
|
|
38
|
-
|
|
39
|
-
<Story name="Selected" args={{ selected: true }} />
|
|
40
|
-
|
|
41
|
-
<Story name="Disabled" args={{ disabled: true }} />
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
<script module>
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import CalendarYearChip from '../../CalendarYearChip/CalendarYearChip.svelte';
|
|
4
|
-
import { storyCalendarYearChipArgTypes } from '../../CalendarYearChip/CalendarYearChip.stories.svelte';
|
|
5
|
-
import { 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: CalendarYearChip,
|
|
10
|
-
tags: ['autodocs'],
|
|
11
|
-
argTypes: storyCalendarYearChipArgTypes,
|
|
12
|
-
args: {
|
|
13
|
-
value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
|
|
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' }} />
|
|
24
|
-
|
|
25
|
-
<Story name="Primary Selected" args={{ color: 'primary', selected: true }} />
|
|
26
|
-
<Story name="Secondary Selected" args={{ color: 'secondary', selected: true }} />
|
|
27
|
-
<Story name="Neutral Selected" args={{ color: 'neutral', selected: true }} />
|
|
28
|
-
<Story name="Safe Selected" args={{ color: 'safe', selected: true }} />
|
|
29
|
-
<Story name="Warning Selected" args={{ color: 'warning', selected: true }} />
|
|
30
|
-
<Story name="Danger Selected" args={{ color: 'danger', selected: true }} />
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
<script module lang="ts">
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import CalendarYearChip from '../CalendarYearChip.svelte';
|
|
4
|
-
import { storyCalendarYearChipArgTypes } from '../CalendarYearChip.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: CalendarYearChip,
|
|
10
|
-
tags: ['autodocs'],
|
|
11
|
-
argTypes: storyCalendarYearChipArgTypes,
|
|
12
|
-
});
|
|
13
|
-
</script>
|
|
14
|
-
|
|
15
|
-
<!-- Custom Content -->
|
|
16
|
-
<Story name="customCalendarYearChipContent" asChild>
|
|
17
|
-
<CalendarYearChip value={getMoment(undefined, undefined, { utc: true }).format('YYYY')}>
|
|
18
|
-
{#snippet customCalendarYearChipContent(val)}
|
|
19
|
-
🗓️{val}
|
|
20
|
-
{/snippet}
|
|
21
|
-
</CalendarYearChip>
|
|
22
|
-
</Story>
|
|
23
|
-
|
|
24
|
-
<!-- Custom Chip -->
|
|
25
|
-
<Story name="customCalendarYearChip" asChild>
|
|
26
|
-
<CalendarYearChip value={getMoment(undefined, undefined, { utc: true }).format('YYYY')}>
|
|
27
|
-
{#snippet customCalendarYearChip(val)}
|
|
28
|
-
<Button size="small" variant="text" outline>
|
|
29
|
-
{val}
|
|
30
|
-
</Button>
|
|
31
|
-
{/snippet}
|
|
32
|
-
</CalendarYearChip>
|
|
33
|
-
</Story>
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
<script module lang="ts">
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import CalendarYearChip from '../CalendarYearChip.svelte';
|
|
4
|
-
import { storyCalendarYearChipArgTypes } from '../CalendarYearChip.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: CalendarYearChip,
|
|
10
|
-
tags: ['autodocs'],
|
|
11
|
-
argTypes: storyCalendarYearChipArgTypes,
|
|
12
|
-
});
|
|
13
|
-
</script>
|
|
14
|
-
|
|
15
|
-
<Story name="Select" asChild>
|
|
16
|
-
<CalendarYearChip
|
|
17
|
-
value={getMoment(undefined, undefined, { utc: true }).format('YYYY')}
|
|
18
|
-
onselect={(value, e) => {
|
|
19
|
-
const target = e.target as HTMLButtonElement;
|
|
20
|
-
alert(`CalendarYearChip Select, ${value}`);
|
|
21
|
-
console.log('CalendarYearChip Select', value, target);
|
|
22
|
-
}}
|
|
23
|
-
/>
|
|
24
|
-
</Story>
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
<script module>
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import CalendarYearChip from '../CalendarYearChip.svelte';
|
|
4
|
-
import { storyCalendarYearChipArgTypes } from '../CalendarYearChip.stories.svelte';
|
|
5
|
-
import { 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: CalendarYearChip,
|
|
10
|
-
tags: ['autodocs'],
|
|
11
|
-
argTypes: storyCalendarYearChipArgTypes,
|
|
12
|
-
args: {
|
|
13
|
-
value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
|
|
14
|
-
},
|
|
15
|
-
});
|
|
16
|
-
</script>
|
|
17
|
-
|
|
18
|
-
<!-- Hover to see the result -->
|
|
19
|
-
<Story name="Roundness 1" />
|
|
20
|
-
|
|
21
|
-
<Story name="Roundness 2" args={{ roundness: 2 }} />
|
|
22
|
-
|
|
23
|
-
<Story name="Roundness 3" args={{ roundness: 3 }} />
|
|
24
|
-
|
|
25
|
-
<Story name="Roundness 0" args={{ roundness: 0 }} />
|
|
26
|
-
|
|
27
|
-
<Story name="Roundness Full" args={{ roundness: 'full', compact: true }} />
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
<script module>
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import CalendarYearChip from '../CalendarYearChip.svelte';
|
|
4
|
-
import { storyCalendarYearChipArgTypes } from '../CalendarYearChip.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: CalendarYearChip,
|
|
10
|
-
tags: ['autodocs'],
|
|
11
|
-
argTypes: storyCalendarYearChipArgTypes,
|
|
12
|
-
args: {
|
|
13
|
-
value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
|
|
14
|
-
},
|
|
15
|
-
});
|
|
16
|
-
</script>
|
|
17
|
-
|
|
18
|
-
<Story name="Normal" />
|
|
19
|
-
<Story name="Small" args={{ size: 'small' }} />
|
|
20
|
-
<Story name="Large" args={{ size: 'large' }} />
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
<script module lang="ts">
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import CalendarYearList from './CalendarYearList.svelte';
|
|
4
|
-
import type { StoryBookArgTypes } from '$lib/storybook-types.js';
|
|
5
|
-
import { componentColorArray } from '$lib/types/colors.js';
|
|
6
|
-
import { componentSizeArray } from '$lib/types/size.js';
|
|
7
|
-
import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
|
|
8
|
-
|
|
9
|
-
export const storyCalendarYearListArgTypes: StoryBookArgTypes = {
|
|
10
|
-
color: {
|
|
11
|
-
control: { type: 'select' },
|
|
12
|
-
options: componentColorArray,
|
|
13
|
-
},
|
|
14
|
-
size: {
|
|
15
|
-
control: { type: 'select' },
|
|
16
|
-
options: componentSizeArray,
|
|
17
|
-
},
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
|
21
|
-
const { Story } = defineMeta({
|
|
22
|
-
component: CalendarYearList,
|
|
23
|
-
tags: ['autodocs'],
|
|
24
|
-
argTypes: storyCalendarYearListArgTypes,
|
|
25
|
-
args: {
|
|
26
|
-
value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
|
|
27
|
-
},
|
|
28
|
-
});
|
|
29
|
-
</script>
|
|
30
|
-
|
|
31
|
-
<!-- Default CalendarYearList -->
|
|
32
|
-
<Story name="Default" />
|
|
33
|
-
|
|
34
|
-
<Story
|
|
35
|
-
name="HideControls"
|
|
36
|
-
args={{
|
|
37
|
-
showControls: false,
|
|
38
|
-
}}
|
|
39
|
-
/>
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
<script module>
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import CalendarYearList from '../CalendarYearList.svelte';
|
|
4
|
-
import { storyCalendarYearListArgTypes } from '../CalendarYearList.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: CalendarYearList,
|
|
10
|
-
tags: ['autodocs'],
|
|
11
|
-
argTypes: storyCalendarYearListArgTypes,
|
|
12
|
-
args: {
|
|
13
|
-
value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
|
|
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,36 +0,0 @@
|
|
|
1
|
-
<script module lang="ts">
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import CalendarYearList from '../CalendarYearList.svelte';
|
|
4
|
-
import { storyCalendarYearListArgTypes } from '../CalendarYearList.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: CalendarYearList,
|
|
10
|
-
tags: ['autodocs'],
|
|
11
|
-
argTypes: storyCalendarYearListArgTypes,
|
|
12
|
-
args: {
|
|
13
|
-
value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
|
|
14
|
-
},
|
|
15
|
-
});
|
|
16
|
-
</script>
|
|
17
|
-
|
|
18
|
-
<Story name="Default" />
|
|
19
|
-
|
|
20
|
-
<Story name="customCalendarYearChipContent" asChild>
|
|
21
|
-
<CalendarYearList value={getMoment(undefined, undefined, { utc: true }).format('YYYY')}>
|
|
22
|
-
{#snippet customCalendarYearChipContent(val)}
|
|
23
|
-
🗓️{val}
|
|
24
|
-
{/snippet}
|
|
25
|
-
</CalendarYearList>
|
|
26
|
-
</Story>
|
|
27
|
-
|
|
28
|
-
<Story name="customCalendarYearChip" asChild>
|
|
29
|
-
<CalendarYearList value={getMoment(undefined, undefined, { utc: true }).format('YYYY')}>
|
|
30
|
-
{#snippet customCalendarYearChip(val)}
|
|
31
|
-
<Button size="small" variant="text" outline>
|
|
32
|
-
{val}
|
|
33
|
-
</Button>
|
|
34
|
-
{/snippet}
|
|
35
|
-
</CalendarYearList>
|
|
36
|
-
</Story>
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
<script module lang="ts">
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import CalendarYearList from '../CalendarYearList.svelte';
|
|
4
|
-
import { storyCalendarYearListArgTypes } from '../CalendarYearList.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: CalendarYearList,
|
|
10
|
-
tags: ['autodocs'],
|
|
11
|
-
argTypes: storyCalendarYearListArgTypes,
|
|
12
|
-
});
|
|
13
|
-
|
|
14
|
-
let value = $state<string>(getMoment(undefined, undefined, { utc: true }).format('YYYY'));
|
|
15
|
-
</script>
|
|
16
|
-
|
|
17
|
-
<Story name="Select" asChild>
|
|
18
|
-
<CalendarYearList
|
|
19
|
-
{value}
|
|
20
|
-
onselect={(val) => {
|
|
21
|
-
value = val;
|
|
22
|
-
}}
|
|
23
|
-
/>
|
|
24
|
-
</Story>
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
<script module>
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import CalendarYearList from '../CalendarYearList.svelte';
|
|
4
|
-
import { storyCalendarYearListArgTypes } from '../CalendarYearList.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: CalendarYearList,
|
|
10
|
-
tags: ['autodocs'],
|
|
11
|
-
argTypes: storyCalendarYearListArgTypes,
|
|
12
|
-
args: {
|
|
13
|
-
value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
|
|
14
|
-
},
|
|
15
|
-
});
|
|
16
|
-
</script>
|
|
17
|
-
|
|
18
|
-
<Story name="Normal" />
|
|
19
|
-
<Story name="Small" args={{ size: 'small' }} />
|
|
20
|
-
<Story name="Large" args={{ size: 'large' }} />
|
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
import { Source } from '@storybook/addon-docs/blocks';
|
|
2
|
-
|
|
3
|
-
# `createDateOfMonth`
|
|
4
|
-
|
|
5
|
-
`createDateOfMonth(date, settings, monthType?, manipulateDate?)` creates a single `DateOfMonth` object representing one calendar cell. This is typically used internally by `getDatesOfMonth` but can be useful for custom logic.
|
|
6
|
-
|
|
7
|
-
## Usage
|
|
8
|
-
|
|
9
|
-
<Source
|
|
10
|
-
dark
|
|
11
|
-
language="ts"
|
|
12
|
-
code={`
|
|
13
|
-
// Manual usage for one day
|
|
14
|
-
import { createDateOfMonth } from '@flightlesslabs/dodo-ui';
|
|
15
|
-
|
|
16
|
-
const date = new Date();
|
|
17
|
-
const dateObj = createDateOfMonth(date, {
|
|
18
|
-
minDate: new Date('2025-01-01'),
|
|
19
|
-
timezone: 'UTC',
|
|
20
|
-
}, 'currentMonth');
|
|
21
|
-
`}
|
|
22
|
-
/>
|
|
23
|
-
|
|
24
|
-
---
|
|
25
|
-
|
|
26
|
-
# Types
|
|
27
|
-
|
|
28
|
-
## `DateOfMonth`
|
|
29
|
-
|
|
30
|
-
<Source
|
|
31
|
-
dark
|
|
32
|
-
language="ts"
|
|
33
|
-
code={`
|
|
34
|
-
// Represents a single calendar cell
|
|
35
|
-
type DateOfMonth = {
|
|
36
|
-
id: string;
|
|
37
|
-
date: Date;
|
|
38
|
-
isCurrentMonth: boolean;
|
|
39
|
-
isLastMonth?: boolean;
|
|
40
|
-
isNextMonth?: boolean;
|
|
41
|
-
disabled?: boolean;
|
|
42
|
-
today?: boolean;
|
|
43
|
-
};
|
|
44
|
-
`}
|
|
45
|
-
/>
|
|
46
|
-
|
|
47
|
-
## `CreateDatesOfMonthSettings`
|
|
48
|
-
|
|
49
|
-
<Source
|
|
50
|
-
dark
|
|
51
|
-
language="ts"
|
|
52
|
-
code={`
|
|
53
|
-
// Configuration for calendar generation
|
|
54
|
-
interface CreateDatesOfMonthSettings {
|
|
55
|
-
startOfWeek?: 'SUN' | 'MON' | 'TUE' | 'WED' | 'THU' | 'FRI' | 'SAT';
|
|
56
|
-
showLastMonth?: boolean;
|
|
57
|
-
showNextMonth?: boolean;
|
|
58
|
-
today?: Date;
|
|
59
|
-
minDate?: Date;
|
|
60
|
-
maxDate?: Date;
|
|
61
|
-
excludeDates?: Date[];
|
|
62
|
-
includeDates?: Date[];
|
|
63
|
-
timezone?: string;
|
|
64
|
-
utc?: boolean;
|
|
65
|
-
}
|
|
66
|
-
`}
|
|
67
|
-
/>
|
|
68
|
-
|
|
69
|
-
## `CreateDateOfMonthType`
|
|
70
|
-
|
|
71
|
-
<Source
|
|
72
|
-
dark
|
|
73
|
-
language="ts"
|
|
74
|
-
code={`
|
|
75
|
-
// Indicates the month context of the date
|
|
76
|
-
type CreateDateOfMonthType = 'currentMonth' | 'nextMonth' | 'lastMonth';
|
|
77
|
-
`}
|
|
78
|
-
/>
|
|
79
|
-
|
|
80
|
-
## `DAYS_OF_WEEK` Enum
|
|
81
|
-
|
|
82
|
-
<Source
|
|
83
|
-
dark
|
|
84
|
-
language="ts"
|
|
85
|
-
code={`
|
|
86
|
-
// Weekday constants (Sunday = 0)
|
|
87
|
-
export const enum DAYS_OF_WEEK {
|
|
88
|
-
SUN,
|
|
89
|
-
MON,
|
|
90
|
-
TUE,
|
|
91
|
-
WED,
|
|
92
|
-
THU,
|
|
93
|
-
FRI,
|
|
94
|
-
SAT,
|
|
95
|
-
}
|
|
96
|
-
`}
|
|
97
|
-
/>
|
|
98
|
-
|
|
99
|
-
## `MONTHS` Enum
|
|
100
|
-
|
|
101
|
-
<Source
|
|
102
|
-
dark
|
|
103
|
-
language="ts"
|
|
104
|
-
code={`
|
|
105
|
-
// Month constants (January = 0)
|
|
106
|
-
export const enum MONTHS {
|
|
107
|
-
JAN,
|
|
108
|
-
FEB,
|
|
109
|
-
MAR,
|
|
110
|
-
APR,
|
|
111
|
-
MAY,
|
|
112
|
-
JUN,
|
|
113
|
-
JUL,
|
|
114
|
-
AUG,
|
|
115
|
-
SEP,
|
|
116
|
-
OCT,
|
|
117
|
-
NOV,
|
|
118
|
-
DEC,
|
|
119
|
-
}
|
|
120
|
-
`}
|
|
121
|
-
/>
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { Source } from '@storybook/addon-docs/blocks';
|
|
2
|
-
|
|
3
|
-
# `getDatesOfMonth`
|
|
4
|
-
|
|
5
|
-
`getDatesOfMonth(date, settings, manipulateDate)` generates a 2D array of weeks, each containing `DateOfMonth` objects. It supports options via `CreateDatesOfMonthSettings` and allows injecting custom logic per date.
|
|
6
|
-
|
|
7
|
-
## Usage
|
|
8
|
-
|
|
9
|
-
<Source
|
|
10
|
-
dark
|
|
11
|
-
language="ts"
|
|
12
|
-
code={`
|
|
13
|
-
// Basic usage
|
|
14
|
-
import { getDatesOfMonth, getMoment } from '@flightlesslabs/dodo-ui';
|
|
15
|
-
|
|
16
|
-
const dates = getDatesOfMonth(new Date(), {
|
|
17
|
-
showLastMonth: false,
|
|
18
|
-
showNextMonth: false,
|
|
19
|
-
});
|
|
20
|
-
|
|
21
|
-
// Using a formatted date
|
|
22
|
-
const dates2 = getDatesOfMonth(
|
|
23
|
-
getMoment('01-02-2025', 'DD-MM-YYYY').toDate()
|
|
24
|
-
);
|
|
25
|
-
|
|
26
|
-
// With custom manipulation
|
|
27
|
-
const dates3 = getDatesOfMonth(new Date(), {
|
|
28
|
-
timezone: 'America/New_York',
|
|
29
|
-
startOfWeek: 'MON',
|
|
30
|
-
}, (date, settings) => {
|
|
31
|
-
return {
|
|
32
|
-
...date,
|
|
33
|
-
disabled: true,
|
|
34
|
-
};
|
|
35
|
-
});
|
|
36
|
-
`}
|
|
37
|
-
/>
|