@flightlesslabs/dodo-ui 0.9.1 → 0.10.0

package/dist/stories/components/Form/DatePicker/Events/Events.stories.svelte

@@ -0,0 +1,139 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import DatePicker from '../DatePicker.svelte';
+import { storyDatePickerArgTypes } from '../DatePicker.stories.svelte';
+import getMoment from '../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: DatePicker,
+    tags: ['autodocs'],
+    argTypes: storyDatePickerArgTypes,
+    parameters: {
+        docs: {
+            story: {
+                height: '400px',
+                inline: false,
+            },
+        },
+    },
+});
+let value = $state(getMoment().toDate());
+</script>
+
+<Story name="Select" asChild>
+  <DatePicker
+    {value}
+    onselect={(val) => {
+      value = val;
+    }}
+  />
+</Story>
+
+<Story name="MonthSelectorClick" asChild>
+  <DatePicker
+    {value}
+    onMonthSelectorClick={(option: CalendarMonthOption, e: ButtonClickEvent) => {
+      const target = e.target as HTMLButtonElement;
+
+      alert('Button Clicked');
+      console.log('Button Clicked', option, target);
+    }}
+  />
+</Story>
+
+<Story name="YearSelectorClick" asChild>
+  <DatePicker
+    {value}
+    onYearSelectorClick={(selectedYear: string, e: ButtonClickEvent) => {
+      const target = e.target as HTMLButtonElement;
+
+      alert('Button Clicked');
+      console.log('Button Clicked', selectedYear, target);
+    }}
+  />
+</Story>
+
+<Story name="CalendarNavigationNextClick" asChild>
+  <DatePicker
+    {value}
+    onCalendarNavigationNextClick={(e: ButtonClickEvent) => {
+      const target = e.target as HTMLButtonElement;
+
+      alert('Button Clicked');
+      console.log('Button Clicked', target);
+    }}
+  />
+</Story>
+
+<Story name="CalendarNavigationPrevClick" asChild>
+  <DatePicker
+    {value}
+    onCalendarNavigationPrevClick={(e: ButtonClickEvent) => {
+      const target = e.target as HTMLButtonElement;
+
+      alert('Button Clicked');
+      console.log('Button Clicked', target);
+    }}
+  />
+</Story>
+
+<Story name="SelectMonth" asChild>
+  <DatePicker
+    {value}
+    onselectMonth={(val: CalendarMonthNames, e: ButtonClickEvent) => {
+      const target = e.target as HTMLButtonElement;
+      console.log(val, target);
+    }}
+  />
+</Story>
+
+<Story name="CancelMonthSelection" asChild>
+  <DatePicker
+    {value}
+    oncancelMonth={(e: ButtonClickEvent) => {
+      const target = e.target as HTMLButtonElement;
+      console.log(target);
+    }}
+  />
+</Story>
+
+<Story name="SelectYear" asChild>
+  <DatePicker
+    {value}
+    onselectYear={(val: string, e: ButtonClickEvent) => {
+      const target = e.target as HTMLButtonElement;
+      console.log(val, target);
+    }}
+  />
+</Story>
+
+<Story name="CancelYearSelection" asChild>
+  <DatePicker
+    {value}
+    oncancelYear={(e: ButtonClickEvent) => {
+      const target = e.target as HTMLButtonElement;
+      console.log(target);
+    }}
+  />
+</Story>
+
+<Story name="Input" asChild>
+  <DatePicker
+    {value}
+    oninput={(e: Event) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('Input Event', target.value);
+    }}
+  />
+</Story>
+
+<Story name="Change" asChild>
+  <DatePicker
+    {value}
+    onchange={(e: Event) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onChange Event', target.value);
+    }}
+  />
+</Story>

package/dist/stories/components/Form/DatePicker/Events/Events.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Events: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Events = InstanceType<typeof Events>;
+export default Events;

package/dist/stories/components/Form/DatePicker/FilterDates/FilterDates.stories.svelte

@@ -0,0 +1,58 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import DatePicker from '../DatePicker.svelte';
+import { storyDatePickerArgTypes } from '../DatePicker.stories.svelte';
+import getMoment from '../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: DatePicker,
+    tags: ['autodocs'],
+    argTypes: storyDatePickerArgTypes,
+    parameters: {
+        docs: {
+            story: {
+                height: '400px',
+                inline: false,
+            },
+        },
+    },
+});
+let value = $state(getMoment('01-02-2025', 'DD-MM-YYYY').toDate());
+</script>
+
+<Story name="Default" asChild>
+  <DatePicker {value} />
+</Story>
+
+<Story name="MinDate" asChild>
+  <DatePicker {value} minDate={getMoment('06-02-2025', 'DD-MM-YYYY').toDate()} />
+</Story>
+
+<Story name="MaxDate" asChild>
+  <DatePicker {value} maxDate={getMoment('10-02-2025', 'DD-MM-YYYY').toDate()} />
+</Story>
+
+<Story name="ExcludeDates" asChild>
+  <DatePicker
+    {value}
+    excludeDates={[
+      getMoment('10-02-2025', 'DD-MM-YYYY').toDate(),
+      getMoment('15-02-2025', 'DD-MM-YYYY').toDate(),
+      getMoment('20-02-2025', 'DD-MM-YYYY').toDate(),
+    ]}
+  />
+</Story>
+
+<Story name="IncludeDates" asChild>
+  <DatePicker
+    {value}
+    includeDates={[
+      getMoment('10-02-2025', 'DD-MM-YYYY').toDate(),
+      getMoment('15-02-2025', 'DD-MM-YYYY').toDate(),
+      getMoment('20-02-2025', 'DD-MM-YYYY').toDate(),
+    ]}
+  />
+</Story>
+
+<Story name="DisabledMonths" asChild>
+  <DatePicker {value} disabledMonths={['jan', 'feb', 'mar']} />
+</Story>

package/dist/stories/components/Form/DatePicker/FilterDates/FilterDates.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FilterDates: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FilterDates = InstanceType<typeof FilterDates>;
+export default FilterDates;

package/dist/stories/components/Form/DatePicker/Roundness/Roundness.stories.svelte

@@ -0,0 +1,35 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import DatePicker from '../DatePicker.svelte';
+import { storyDatePickerArgTypes } from '../DatePicker.stories.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: DatePicker,
+    tags: ['autodocs'],
+    argTypes: storyDatePickerArgTypes,
+    parameters: {
+        docs: {
+            story: {
+                height: '400px',
+                inline: false,
+            },
+        },
+    },
+});
+let value = $state(new Date());
+</script>
+
+<Story name="Roundness 1" asChild>
+  <DatePicker {value} />
+</Story>
+
+<Story name="Roundness 2" asChild>
+  <DatePicker {value} roundness={2} />
+</Story>
+
+<Story name="Roundness 3" asChild>
+  <DatePicker {value} roundness={3} />
+</Story>
+
+<Story name="Roundness 0" asChild>
+  <DatePicker {value} roundness={0} />
+</Story>

package/dist/stories/components/Form/DatePicker/Roundness/Roundness.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Roundness: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Roundness = InstanceType<typeof Roundness>;
+export default Roundness;

package/dist/stories/components/Form/DatePicker/Size/Size.stories.svelte

@@ -0,0 +1,38 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import DatePicker from '../DatePicker.svelte';
+import { storyDatePickerArgTypes } from '../DatePicker.stories.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: DatePicker,
+    tags: ['autodocs'],
+    argTypes: storyDatePickerArgTypes,
+    parameters: {
+        docs: {
+            story: {
+                height: '400px',
+                inline: false,
+            },
+        },
+    },
+});
+let value = $state(new Date());
+</script>
+
+<Story name="Normal" asChild>
+  <DatePicker {value} onselect={(val: Date) => (value = val)} />
+</Story>
+<Story name="Small" asChild>
+  <DatePicker {value} onselect={(val: Date) => (value = val)} size="small" />
+</Story>
+<Story name="Large" asChild>
+  <DatePicker {value} onselect={(val: Date) => (value = val)} size="large" />
+</Story>
+<Story name="SmallCalendar" asChild>
+  <DatePicker
+    {value}
+    onselect={(val: Date) => (value = val)}
+    calendarProps={{
+      size: 'small',
+    }}
+  />
+</Story>

package/dist/stories/components/Form/DatePicker/Size/Size.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Size: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Size = InstanceType<typeof Size>;
+export default Size;

package/dist/stories/components/Form/DatePicker/WithIcon/WithIcon.stories.svelte

@@ -0,0 +1,38 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import DatePicker from '../DatePicker.svelte';
+import { storyDatePickerArgTypes } from '../DatePicker.stories.svelte';
+import Icon from '@iconify/svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: DatePicker,
+    tags: ['autodocs'],
+    argTypes: storyDatePickerArgTypes,
+    parameters: {
+        docs: {
+            story: {
+                height: '400px',
+                inline: false,
+            },
+        },
+    },
+});
+let value = $state(new Date());
+</script>
+
+<!-- DatePicker icon in front. -->
+<Story name="Icon Before" asChild>
+  <DatePicker {value}>
+    {#snippet before()}
+      <Icon icon="material-symbols:content-copy" />
+    {/snippet}
+  </DatePicker>
+</Story>
+
+<!-- DatePicker icon in front. -->
+<Story name="Icon After" asChild>
+  <DatePicker {value}>
+    {#snippet after()}
+      <Icon icon="material-symbols:download-2" />
+    {/snippet}
+  </DatePicker>
+</Story>

package/dist/stories/components/Form/DatePicker/WithIcon/WithIcon.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const WithIcon: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type WithIcon = InstanceType<typeof WithIcon>;
+export default WithIcon;

package/dist/stories/components/Form/PasswordInput/PasswordInput.stories.svelte

@@ -41,7 +41,6 @@ const { Story } = defineMeta({
 
 <Story name="Read only" args={{ readonly: true }} />
 
-<!-- Show Password by default -->
 <Story name="Custom toggle icon" asChild>
   <PasswordInput value="Hello world!">
     {#snippet customPasswordToggleIcon(toggle)}

package/dist/stories/components/Form/PasswordInput/PasswordInput.svelte

@@ -72,7 +72,13 @@ function ontoggleMod(e) {
           {#if customPasswordToggleIcon}
             {@render customPasswordToggleIconTyped(toggle)}
           {:else if toggle}
-            <Icon icon="mdi:eye-off" width="24" height="24" />
+            {#if size === 'small'}
+              <Icon icon="mdi:eye-off" width="19" height="19" />
+            {:else}
+              <Icon icon="mdi:eye-off" width="24" height="24" />
+            {/if}
+          {:else if size === 'small'}
+            <Icon icon="mdi:eye" width="19" height="19" />
           {:else}
             <Icon icon="mdi:eye" width="24" height="24" />
           {/if}

package/dist/stories/components/Form/Select/Select.stories.svelte

@@ -104,6 +104,10 @@ let value = $state(options[0]);
   />
 </Story>
 
+<Story name="OpenByDefault" asChild>
+  <Select {options} {value} onselect={(val: SelectOption) => (value = val)} open={true} />
+</Story>
+
 <!-- Format look and feel of input content. [More Customizations](?path=/docs/components-form-select-customize--docs)  -->
 <Story name="CustomInputContent" asChild>
   <Select {options} {value} onselect={(val: SelectOption) => (value = val)}>

package/dist/stories/components/Form/Select/Select.svelte

@@ -5,7 +5,7 @@
 import UtilityButton from '../../../developer tools/components/UtilityButton/UtilityButton.svelte';
 import Icon from '@iconify/svelte';
 import { DynamicInput, DynamicMenu, Popper, } from '../../../../index.js';
-let { size = 'normal', roundness = 1, outline = true, name, id, class: className = '', disabled = false, onchange, oninput, onselect, onblur, onfocus, onpaste, oncopy, oncut, onkeydown, onkeypress, onkeyup, before, after, error = false, value, placeholder, ref = $bindable(), readonly = false, searchable = false, clearable = false, onclear, options: optionsRaw, customInputContent: customInputContentInternal, customMenuItemContent: customMenuItemContentInternal, customPopupContent: customPopupContentInternal, customPlaceholderMenuItemContent: customPlaceholderMenuItemContentInternal, customDropdownArrowIcon: customDropdownArrowIconInternal, popupMaxHeight = '300px', paperProps, popperProps, menuProps, menuItemProps, optionsPlaceholder = 'No Options', dropdownArrowPosition = 'after', popupPositionX, popupPositionY, lockPoistions, popperHeightForVerticalPosition, } = $props();
+let { size = 'normal', roundness = 1, outline = true, name, id, class: className = '', disabled = false, onchange, oninput, onselect, onblur, onfocus, onpaste, oncopy, oncut, onkeydown, onkeypress, onkeyup, before, after, error = false, value, placeholder, ref = $bindable(), readonly = false, searchable = false, clearable = false, onclear, options: optionsRaw, customInputContent: customInputContentInternal, customMenuItemContent: customMenuItemContentInternal, customPopupContent: customPopupContentInternal, customPlaceholderMenuItemContent: customPlaceholderMenuItemContentInternal, customDropdownArrowIcon: customDropdownArrowIconInternal, popupMaxHeight = '300px', paperProps, popperProps, menuProps, menuItemProps, optionsPlaceholder = 'No Options', dropdownArrowPosition = 'after', popupPositionX, popupPositionY, lockPoistions, popperHeightForVerticalPosition, open = $bindable(false), } = $props();
 function convertOptionsToDynamicMenuItemOptions(options) {
     const newOptions = options.map((option) => ({
         id: `opt-${option.value}`,
@@ -16,7 +16,6 @@ function convertOptionsToDynamicMenuItemOptions(options) {
     }));
     return newOptions;
 }
-let open = $state(false);
 let onInputStart = $state(false);
 const selectedOption = $derived(value);
 let searchTerm = $state(value?.label.trim() || '');

package/dist/stories/components/Form/Select/Select.svelte.d.ts

@@ -99,8 +99,10 @@ export interface SelectProps {
     lockPoistions?: boolean;
     /** Popper Height For Vertical Position, default 300 */
     popperHeightForVerticalPosition?: number;
+    /** Control Popup Open state */
+    open?: boolean;
 }
 import { type MenuItemProps, type MenuProps, type PaperProps, type PopperProps, type PositionX, type PositionY } from '../../../../index.js';
-declare const Select: import("svelte").Component<SelectProps, {}, "ref">;
+declare const Select: import("svelte").Component<SelectProps, {}, "ref" | "open">;
 type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/stories/components/Info/Calendar/Calendar.stories.svelte

@@ -0,0 +1,101 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Calendar from './Calendar.svelte';
+import getMoment from '../../../developer tools/helpers/Time/getMoment/getMoment.js';
+import { componentColorArray } from '../../../../types/colors.js';
+import { componentSizeArray } from '../../../../types/size.js';
+import { calendarWeekNamesArray } from './SubComponents/CalendarDatesChart/CalendarWeek/CalendarWeek.svelte';
+export const storyCalendarArgTypes = {
+    startOfWeek: {
+        control: { type: 'select' },
+        options: calendarWeekNamesArray,
+    },
+    color: {
+        control: { type: 'select' },
+        options: componentColorArray,
+    },
+    size: {
+        control: { type: 'select' },
+        options: componentSizeArray,
+    },
+};
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Calendar,
+    tags: ['autodocs'],
+    argTypes: storyCalendarArgTypes,
+});
+let value = $state(getMoment().toDate());
+</script>
+
+<!-- Default Calendar -->
+<Story
+  name="Default"
+  args={{
+    value,
+  }}
+/>
+
+<Story
+  name="StartOfWeek"
+  args={{
+    value,
+    startOfWeek: 'mon',
+  }}
+/>
+
+<Story
+  name="ActiveMonth"
+  args={{
+    activeMonth: getMoment('01-02-2025', 'DD-MM-YYYY').toDate(),
+    value,
+  }}
+/>
+
+<Story
+  name="WeekendDays"
+  args={{
+    weekendDays: ['sun'],
+    value,
+  }}
+/>
+
+<Story
+  name="WeekHeadingColorOnly"
+  args={{
+    weekendDays: ['sun'],
+    value,
+    weekendDaysColorDays: false,
+  }}
+/>
+
+<Story
+  name="HideSelected"
+  args={{
+    showSelected: false,
+    value,
+  }}
+/>
+
+<Story
+  name="HideLastMonth"
+  args={{
+    value: getMoment('01-03-2025', 'DD-MM-YYYY').toDate(),
+    showLastMonth: false,
+  }}
+/>
+
+<Story
+  name="HideNextMonth"
+  args={{
+    value: getMoment('01-03-2025', 'DD-MM-YYYY').toDate(),
+    showNextMonth: false,
+  }}
+/>
+
+<Story
+  name="HideCalendarControls"
+  args={{
+    value: getMoment('01-03-2025', 'DD-MM-YYYY').toDate(),
+    showCalendarControls: false,
+  }}
+/>

package/dist/stories/components/Info/Calendar/Calendar.stories.svelte.d.ts

@@ -0,0 +1,21 @@
+import Calendar from './Calendar.svelte';
+import type { StoryBookArgTypes } from '../../../../storybook-types.js';
+export declare const storyCalendarArgTypes: StoryBookArgTypes;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Calendar: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Calendar = InstanceType<typeof Calendar>;
+export default Calendar;