@flightlesslabs/dodo-ui 0.8.0 → 0.9.0

package/dist/index.d.ts

@@ -4,6 +4,14 @@ export type { ComponentRoundness } from './types/roundness.js';
 export type { ComponentSize } from './types/size.js';
 export type { ComponentWeight } from './types/weight.js';
 export type { PositionY, PositionX } from './types/position.js';
+/** developer tools: helpers: logger */
+export { default as createLogger } from './stories/developer tools/helpers/logger/logger.js';
+export type { LogLevel, LoggerOptions, } from './stories/developer tools/helpers/logger/logger.js';
+/** developer tools: helpers: Numbers: isValidNumberValue */
+export { default as isValidNumberValue } from './stories/developer tools/helpers/Numbers/isValidNumberValue/isValidNumberValue.js';
+export type { IsValidNumberValueSettings } from './stories/developer tools/helpers/Numbers/isValidNumberValue/isValidNumberValue.js';
+/** developer tools: helpers: Numbers: cleanNumericString */
+export { default as cleanNumericString } from './stories/developer tools/helpers/Numbers/cleanNumericString/cleanNumericString.js';
 /** developer tools: directives: clickOutside */
 export { clickOutside } from './stories/developer tools/directives/clickOutside/clickOutside.js';
 /** developer tools: components: UtilityButton */
@@ -14,7 +22,7 @@ export { default as InputEnclosure } from './stories/developer tools/components/
 export type { InputEnclosureProps } from './stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
 /** developer tools: components: DynamicInput */
 export { default as DynamicInput } from './stories/developer tools/components/DynamicInput/DynamicInput.svelte';
-export type { DynamicInputVariant, DynamicInputProps, DynamicInputClickEvent, DynamicInputFocusEvent, } from './stories/developer tools/components/DynamicInput/DynamicInput.svelte';
+export type { DynamicInputVariant, DynamicInputProps, DynamicInputClickEvent, DynamicInputFocusEvent, DynamicInputKeyboardEvent, } from './stories/developer tools/components/DynamicInput/DynamicInput.svelte';
 /** developer tools: components: Popper */
 export { default as Popper } from './stories/developer tools/components/Popper/Popper.svelte';
 export type { PopperProps } from './stories/developer tools/components/Popper/Popper.svelte';
@@ -25,7 +33,7 @@ export { default as Button } from './stories/components/Form/Button/Button.svelt
 export type { ButtonLinkTarget, ButtonLinkReferrerpolicy, ButtonType, ButtonProps, ButtonClickEvent, } from './stories/components/Form/Button/Button.svelte';
 /** Form: TextInput */
 export { default as TextInput } from './stories/components/Form/TextInput/TextInput.svelte';
-export type { TextInputType, TextInputFocusEvent, TextInputClipboardEvent, TextInputInputEvent, TextInputProps, } from './stories/components/Form/TextInput/TextInput.svelte';
+export type { TextInputType, TextInputFocusEvent, TextInputClipboardEvent, TextInputInputEvent, TextInputKeyboardEvent, TextInputProps, } from './stories/components/Form/TextInput/TextInput.svelte';
 /** Form: PasswordInput */
 export { default as PasswordInput } from './stories/components/Form/PasswordInput/PasswordInput.svelte';
 export type { PasswordInputToggleEvent, PasswordInputProps, } from './stories/components/Form/PasswordInput/PasswordInput.svelte';
@@ -41,6 +49,9 @@ export type { MessageProps } from './stories/components/Form/Message/Message.sve
 /** Form: Select */
 export { default as Select } from './stories/components/Form/Select/Select.svelte';
 export type { SelectOption, SelectDropdownArrowPosition, SelectProps, } from './stories/components/Form/Select/Select.svelte';
+/** Form: NumericInput */
+export { default as NumericInput } from './stories/components/Form/NumericInput/NumericInput.svelte';
+export type { NumericInputProps } from './stories/components/Form/NumericInput/NumericInput.svelte';
 /** Layout: Paper */
 export { default as Paper } from './stories/components/Layout/Paper/Paper.svelte';
 export type { PaperColor, PaperProps } from './stories/components/Layout/Paper/Paper.svelte';

package/dist/index.js

@@ -1,4 +1,10 @@
 import './styles/global.css';
+/** developer tools: helpers: logger */
+export { default as createLogger } from './stories/developer tools/helpers/logger/logger.js';
+/** developer tools: helpers: Numbers: isValidNumberValue */
+export { default as isValidNumberValue } from './stories/developer tools/helpers/Numbers/isValidNumberValue/isValidNumberValue.js';
+/** developer tools: helpers: Numbers: cleanNumericString */
+export { default as cleanNumericString } from './stories/developer tools/helpers/Numbers/cleanNumericString/cleanNumericString.js';
 /** developer tools: directives: clickOutside */
 export { clickOutside } from './stories/developer tools/directives/clickOutside/clickOutside.js';
 /** developer tools: components: UtilityButton */
@@ -24,6 +30,8 @@ export { default as FormControl } from './stories/components/Form/FormControl/Fo
 export { default as Message } from './stories/components/Form/Message/Message.svelte';
 /** Form: Select */
 export { default as Select } from './stories/components/Form/Select/Select.svelte';
+/** Form: NumericInput */
+export { default as NumericInput } from './stories/components/Form/NumericInput/NumericInput.svelte';
 /** Layout: Paper */
 export { default as Paper } from './stories/components/Layout/Paper/Paper.svelte';
 /** Layout: Separator */

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

@@ -0,0 +1,126 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import { storyNumericInputArgTypes } from '../NumericInput.stories.svelte';
+import NumericInput from '../NumericInput.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: NumericInput,
+    tags: ['autodocs'],
+    argTypes: storyNumericInputArgTypes,
+});
+let value = $state(0);
+</script>
+
+<!-- Use this event to get filtered numeric value -->
+<Story
+  name="NumericValueChange"
+  args={{
+    value,
+    onValueChange: (val: number | undefined) => {
+      value = val;
+    },
+  }}
+/>
+
+<Story
+  name="Input"
+  args={{
+    oninput: (e: Event) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('Input Event', target.value);
+    },
+  }}
+/>
+
+<Story
+  name="Change"
+  args={{
+    onchange: (e: Event) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onChange Event', target.value);
+    },
+  }}
+/>
+
+<Story
+  name="Focus"
+  args={{
+    onfocus: (e: TextInputFocusEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onfocus Event', target);
+    },
+  }}
+/>
+
+<Story
+  name="Blur"
+  args={{
+    onblur: (e: TextInputFocusEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onblur Event', target);
+    },
+  }}
+/>
+
+<Story
+  name="Copy"
+  args={{
+    oncopy: (e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('oncopy Event', target);
+    },
+  }}
+/>
+
+<Story
+  name="Cut"
+  args={{
+    oncut: (e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('oncut Event', target);
+    },
+  }}
+/>
+
+<Story
+  name="Paste"
+  args={{
+    onpaste: (e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onpaste Event', target);
+    },
+  }}
+/>
+
+<Story
+  name="KeyDown"
+  args={{
+    onkeydown: (e: TextInputKeyboardEvent) => {
+      console.log('onkeydown Event', e.key);
+    },
+  }}
+/>
+
+<Story
+  name="KeyPress"
+  args={{
+    onkeypress: (e: TextInputKeyboardEvent) => {
+      console.log('onkeypress Event', e.key);
+    },
+  }}
+/>
+
+<Story
+  name="KeyUp"
+  args={{
+    onkeyup: (e: TextInputKeyboardEvent) => {
+      console.log('onkeyup Event', e.key);
+    },
+  }}
+/>

package/dist/stories/components/Form/NumericInput/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/NumericInput/NumericInput.stories.svelte

@@ -0,0 +1,79 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import NumericInput from './NumericInput.svelte';
+import { componentRoundnessArray } from '../../../../types/roundness.js';
+import { componentSizeArray } from '../../../../types/size.js';
+export const storyNumericInputArgTypes = {
+    roundness: {
+        control: { type: 'select' },
+        options: componentRoundnessArray,
+    },
+    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: NumericInput,
+    tags: ['autodocs'],
+    argTypes: storyNumericInputArgTypes,
+});
+let value = $state(0);
+</script>
+
+<!-- NumericInput with default style -->
+<Story
+  name="Default"
+  args={{
+    value,
+    onValueChange: (val) => {
+      value = val;
+    },
+  }}
+/>
+
+<Story name="Placeholder" args={{ value: undefined, placeholder: 'Type something...' }} />
+
+<Story
+  name="No Outline"
+  args={{
+    outline: false,
+    value,
+    onValueChange: (val) => {
+      value = val;
+    },
+  }}
+/>
+
+<Story
+  name="Error"
+  args={{
+    error: true,
+    value,
+    onValueChange: (val) => {
+      value = val;
+    },
+  }}
+/>
+
+<Story
+  name="Disabled"
+  args={{
+    disabled: true,
+    value,
+    onValueChange: (val) => {
+      value = val;
+    },
+  }}
+/>
+
+<Story
+  name="Read only"
+  args={{
+    readonly: true,
+    value,
+    onValueChange: (val) => {
+      value = val;
+    },
+  }}
+/>

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

@@ -0,0 +1,21 @@
+import NumericInput from './NumericInput.svelte';
+import type { StoryBookArgTypes } from '../../../../storybook-types.js';
+export declare const storyNumericInputArgTypes: 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 NumericInput: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type NumericInput = InstanceType<typeof NumericInput>;
+export default NumericInput;

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

@@ -0,0 +1,161 @@
+<script lang="ts" module>import {} from 'svelte';
+</script>
+
+<script lang="ts">import InputEnclosure from '../../../developer tools/components/InputEnclosure/InputEnclosure.svelte';
+import DynamicInput, {} from '../../../developer tools/components/DynamicInput/DynamicInput.svelte';
+import isValidNumberValue from '../../../developer tools/helpers/Numbers/isValidNumberValue/isValidNumberValue.js';
+let { size = 'normal', roundness = 1, outline = true, name, id, class: className = '', disabled = false, oninput, onchange, onblur, onfocus, onpaste, oncopy, oncut, onkeydown, onkeypress, onkeyup, before, after, error = false, value: valueRaw, placeholder, ref = $bindable(), readonly = false, decimalPlaces = 0, allowNegativeValues = false, min, max, log = false, onValueChange, } = $props();
+let value = $state('');
+let cachedValue = $state('');
+let focused = $state(false);
+function onfocusMod(e) {
+    const eTyped = e;
+    if (onfocus) {
+        onfocus(eTyped);
+    }
+}
+function onblurMod(e) {
+    const eTyped = e;
+    const isValidWithoutMinMax = isValidNumberValue(`${value}`, {
+        decimalPlaces,
+        allowNegativeValues,
+        log,
+    });
+    const isValid = isValidNumberValue(`${value}`, {
+        decimalPlaces,
+        allowNegativeValues,
+        log,
+        min,
+        max,
+    });
+    if (isValid) {
+        if (onValueChange) {
+            onValueChange(Number(value));
+        }
+        value = `${Number(value)}`;
+        cachedValue = `${Number(value)}`;
+    }
+    else if (isValidWithoutMinMax) {
+        if (min && Number(value) < min) {
+            if (onValueChange) {
+                onValueChange(min);
+            }
+            value = `${min}`;
+            cachedValue = `${min}`;
+        }
+        else if (max && Number(value) > max) {
+            if (onValueChange) {
+                onValueChange(max);
+            }
+            value = `${max}`;
+            cachedValue = `${max}`;
+        }
+    }
+    else if (value.trim() === '') {
+        if (onValueChange) {
+            onValueChange(undefined);
+        }
+        value = '';
+        cachedValue = '';
+    }
+    else if (valueRaw || valueRaw === 0) {
+        if (onValueChange) {
+            onValueChange(valueRaw);
+        }
+        value = `${valueRaw}`;
+        cachedValue = `${valueRaw}`;
+    }
+    else {
+        if (onValueChange) {
+            onValueChange(undefined);
+        }
+        value = '';
+        cachedValue = '';
+    }
+    if (onblur) {
+        onblur(eTyped);
+    }
+}
+function onkeydownMod(e) {
+    if (onkeydown) {
+        onkeydown(e);
+    }
+    if (e.ctrlKey && e.key.toLocaleLowerCase() === 'c') {
+        return;
+    }
+    else if (e.ctrlKey && e.key.toLocaleLowerCase() === 'v') {
+        return;
+    }
+    else if (e.ctrlKey && e.key.toLocaleLowerCase() === 'x') {
+        return;
+    }
+    const valueToCheck = `${value}${e.key.length === 1 ? e.key : ''}`;
+    const isValid = isValidNumberValue(valueToCheck, {
+        decimalPlaces,
+        allowNegativeValues,
+        log,
+        strict: false,
+    });
+    if (!isValid) {
+        e.preventDefault();
+        value = cachedValue;
+    }
+    else {
+        cachedValue = valueToCheck;
+    }
+}
+$effect(() => {
+    let updatedValue = '';
+    const isValid = isValidNumberValue(`${valueRaw}`, {
+        decimalPlaces,
+        allowNegativeValues,
+        min,
+        max,
+        log,
+    });
+    if (valueRaw === undefined) {
+        updatedValue = '';
+    }
+    else if (!isValid) {
+        updatedValue = '';
+    }
+    else {
+        updatedValue = `${valueRaw}`;
+    }
+    value = updatedValue;
+    cachedValue = updatedValue;
+});
+</script>
+
+<div
+  class:outline
+  class:disabled
+  class:error
+  class:focused
+  class={['dodo-ui-NumericInput', `size--${size}`, `roundness--${roundness}`, className].join(' ')}
+>
+  <InputEnclosure {outline} {disabled} {error} {focused} {size} {roundness} {before} {after}>
+    <DynamicInput
+      type="text"
+      {name}
+      {id}
+      {disabled}
+      bind:ref
+      bind:focused
+      {oninput}
+      {onchange}
+      onfocus={onfocusMod}
+      onblur={onblurMod}
+      {onpaste}
+      {oncopy}
+      {oncut}
+      onkeydown={onkeydownMod}
+      onkeypress={onkeypress ? (e) => onkeypress(e as TextInputKeyboardEvent) : undefined}
+      onkeyup={onkeyup ? (e) => onkeyup(e as TextInputKeyboardEvent) : undefined}
+      {placeholder}
+      {readonly}
+      variant="input"
+      bind:value
+    />
+  </InputEnclosure>
+</div>

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

@@ -0,0 +1,69 @@
+import type { ComponentRoundness } from '../../../../types/roundness.js';
+import type { ComponentSize } from '../../../../types/size.js';
+import { type Snippet } from 'svelte';
+import type { ChangeEventHandler, ClipboardEventHandler, FocusEventHandler, FormEventHandler, KeyboardEventHandler } from 'svelte/elements';
+export interface NumericInputProps {
+    /** min */
+    min?: number;
+    /** max */
+    max?: number;
+    /** Allow Negative Values */
+    allowNegativeValues?: boolean;
+    /** Decimal Places */
+    decimalPlaces?: number;
+    /** Log number validations */
+    log?: boolean;
+    /** Input ref */
+    ref?: HTMLInputElement;
+    /** How large should the button be? */
+    size?: ComponentSize;
+    /** How round should the border radius be? */
+    roundness?: ComponentRoundness;
+    /** Add a border around the button. Default True */
+    outline?: boolean;
+    /** Input value */
+    value?: number;
+    /** How round should the border radius be? */
+    placeholder?: string;
+    /** disabled state */
+    disabled?: boolean;
+    /** Read only ? */
+    readonly?: boolean;
+    /** is there any associated Error ? */
+    error?: boolean;
+    /** Name */
+    name?: string;
+    /** Id */
+    id?: string;
+    /** Icon before button content */
+    before?: Snippet;
+    /** Icon after button content */
+    after?: Snippet;
+    /** Custom css class*/
+    class?: string;
+    /** on Numeric Value Change */
+    onValueChange?: (value: number | undefined) => void;
+    /** oninput event handler */
+    oninput?: FormEventHandler<HTMLInputElement>;
+    /** onchange event handler */
+    onchange?: ChangeEventHandler<HTMLInputElement>;
+    /** onblur event handler */
+    onblur?: FocusEventHandler<HTMLInputElement>;
+    /** onfocus event handler */
+    onfocus?: FocusEventHandler<HTMLInputElement>;
+    /** onpaste event handler */
+    onpaste?: ClipboardEventHandler<HTMLInputElement>;
+    /** oncopy event handler */
+    oncopy?: ClipboardEventHandler<HTMLInputElement>;
+    /** oncut event handler */
+    oncut?: ClipboardEventHandler<HTMLInputElement>;
+    /** onkeydown event handler */
+    onkeydown?: KeyboardEventHandler<HTMLInputElement>;
+    /** onkeypress event handler */
+    onkeypress?: KeyboardEventHandler<HTMLInputElement>;
+    /** onkeyup event handler */
+    onkeyup?: KeyboardEventHandler<HTMLInputElement>;
+}
+declare const NumericInput: import("svelte").Component<NumericInputProps, {}, "ref">;
+type NumericInput = ReturnType<typeof NumericInput>;
+export default NumericInput;

package/dist/stories/components/Form/NumericInput/Validation/Validation.stories.svelte

@@ -0,0 +1,84 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import NumericInput from '../NumericInput.svelte';
+import { storyNumericInputArgTypes } from '../NumericInput.stories.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: NumericInput,
+    tags: ['autodocs'],
+    argTypes: storyNumericInputArgTypes,
+});
+let value = $state(0);
+</script>
+
+<!-- NumericInput with default style -->
+<Story
+  name="Default"
+  args={{
+    value,
+    onValueChange: (val) => {
+      value = val;
+    },
+  }}
+/>
+
+<!-- Min, In this case min is set to 25 -->
+<Story
+  name="Min"
+  args={{
+    value,
+    onValueChange: (val) => {
+      console.log(val);
+
+      value = val;
+    },
+    min: 25,
+  }}
+/>
+
+<!-- Max, In this case max is set to 25 -->
+<Story
+  name="Max"
+  args={{
+    value,
+    onValueChange: (val) => {
+      value = val;
+    },
+    max: 25,
+  }}
+/>
+
+<!-- Allow Negative values -->
+<Story
+  name="AllowNegativeValues"
+  args={{
+    value,
+    onValueChange: (val) => {
+      value = val;
+    },
+    allowNegativeValues: true,
+  }}
+/>
+
+<!-- Decimal Places -->
+<Story
+  name="DecimalPlaces"
+  args={{
+    value,
+    onValueChange: (val) => {
+      value = val;
+    },
+    decimalPlaces: 2,
+  }}
+/>
+
+<!-- Log validations, check console -->
+<Story
+  name="LogValidations"
+  args={{
+    value,
+    onValueChange: (val) => {
+      value = val;
+    },
+    log: true,
+  }}
+/>

package/dist/stories/components/Form/NumericInput/Validation/Validation.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 Validation: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Validation = InstanceType<typeof Validation>;
+export default Validation;