feat(FoRange): First implementation

packages/core/src/Lib/UseColor/Internal/Lib/UseColor.ts

@@ -112,6 +112,16 @@ export function useColor(
                 warning:   'radio-warning',
                 error:     'radio-error',
             },
+            FoRange: {
+                neutral:   '',
+                primary:   'range-primary',
+                secondary: 'range-secondary',
+                accent:    'range-accent',
+                info:      'range-info',
+                success:   'range-success',
+                warning:   'range-warning',
+                error:     'range-error',
+            },
             FoStatus: {
                 neutral:   '',
                 primary:   'status-primary',

packages/core/src/Lib/UseColor/Types/Color.ts

@@ -9,6 +9,7 @@ export type ColorableComponentName = Extract<
     | 'FoDivider'
     | 'FoModal'
     | 'FoRadio'
+    | 'FoRange'
     | 'FoStatus'
     | 'FoSwitch'
     | 'FoTooltip'

packages/core/src/Lib/UseFlyonUIVueAppConfig/Types/FlyonUIVueAppConfig.ts

@@ -16,6 +16,7 @@ import type { HeadingProps, KeyboardProps, LinkProps }
 import type { DividerProps }                                                           from '@/UI/Content/Divider';
 import type { IconProps }                                                              from '@/UI/Customization';
 import type { CheckboxProps, InputTextProps, SelectProps, SwitchProps, TextareaProps } from '@/UI/Forms';
+import type { RangeProps }                                                             from '@/UI/Forms/Range';
 import type { TabProps, TabsProps }                                                    from '@/UI/Navigations';
 import type { ModalProps, TooltipProps }                                               from '@/UI/Overlays';
 import type { TableProps }                                                             from '@/UI/Tables';
@@ -122,6 +123,7 @@ export interface ConfigurableComponentProps {
     FoModal:    ConfigurableProps<Omit<ModalProps, 'backdrop'> & Colorable>;
     /** Radio defaults */
     FoRadio:    ConfigurableProps<ButtonProps>; // todo: temporary
+    FoRange:    ConfigurableProps<RangeProps>;
     /** Select defaults */
     FoSelect:   ConfigurableProps<SelectProps> & LabelTypeComponentConfig & HorizontalPositionComponentConfig<HorizontalHelperTextPositionConfig>;
     FoStatus:   ConfigurableProps<StatusProps>;

packages/core/src/Lib/UseSize/Internal/Lib/UseSize.ts

@@ -75,6 +75,13 @@ export function useSize(
                 large:      'modal-dialog-lg',
                 extraLarge: 'modal-dialog-xl',
             },
+            FoRange: {
+                extraSmall: 'range-xs',
+                small:      'range-sm',
+                medium:     '',
+                large:      'range-lg',
+                extraLarge: 'range-xl',
+            },
             FoSelect: {
                 extraSmall: 'select-xs',
                 small:      'select-sm',

packages/core/src/Lib/UseSize/Types/Size.ts

@@ -11,6 +11,7 @@ export type SizableComponentName = Extract<
     | 'FoLoading'
     | 'FoMenu'
     | 'FoModal'
+    | 'FoRange'
     | 'FoSelect'
     | 'FoStatus'
     | 'FoSwitch'

packages/core/src/UI/Forms/Range/Types/Range.ts

@@ -0,0 +1,7 @@
+import type { Colorable, Disableable, Sizable } from '@/Lib';
+
+export interface RangeProps extends Colorable, Sizable, Disableable {
+    min?:  number;
+    max?:  number;
+    step?: number;
+}

packages/core/src/UI/Forms/Range/Types/index.ts

@@ -0,0 +1 @@
+export * from '@/UI/Forms/Range/Types/Range';

packages/core/src/UI/Forms/Range/UI/FoRange.vue

@@ -0,0 +1,62 @@
+<template>
+    <component :is="slots.steps ? 'div' : FoFragment"
+               :class="slots.steps && 'w-full'"
+               :style="slots.steps && $attrs.style"
+    >
+        <input v-model.number="input"
+               class="range"
+               :class="[colorClass, sizeClass, slots.steps && $attrs.class]"
+               type="range"
+               :min="min"
+               :max="max"
+               :step="step"
+               :disabled="isDisabled"
+               v-bind="slots.steps === undefined && $attrs"
+        >
+
+        <div v-if="slots.steps"
+             class="flex justify-between text-xs px-2"
+        >
+            <slot name="steps" />
+        </div>
+    </component>
+</template>
+
+<script setup lang="ts">
+import type { ComponentName }     from '@/Lib';
+import type { RangeProps }        from '@/UI/Forms/Range';
+import type { Slot }              from 'vue';
+import { useFlyonUIVueAppConfig } from '@/Lib';
+import { useColor }               from '@/Lib/UseColor/Internal';
+import { useSize }                from '@/Lib/UseSize/Internal';
+import { FoFragment }             from '@/UI/Components/Fragment/Internal';
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<RangeProps>(), {
+    min:        0,
+    max:        100,
+    step:       1,
+    isDisabled: false,
+});
+
+const slots = defineSlots<{
+    /** The step indicators to show for each step */
+    steps?: Slot;
+}>();
+
+const input = defineModel<number>({ required: true });
+
+const componentName: ComponentName = 'FoRange';
+const { config }                   = useFlyonUIVueAppConfig();
+
+const [
+    colorClass,
+    sizeClass,
+] = [
+    useColor(config, componentName, () => props.color),
+    useSize(config, componentName, () => props.size),
+];
+</script>

packages/core/src/UI/Forms/Range/UI/index.ts

@@ -0,0 +1 @@
+export { default as FoRange } from '@/UI/Forms/Range/UI/FoRange.vue';

packages/core/src/UI/Forms/Range/index.ts

@@ -0,0 +1,2 @@
+export * from '@/UI/Forms/Range/Types';
+export * from '@/UI/Forms/Range/UI';

packages/core/src/UI/Forms/index.ts

@@ -1,6 +1,7 @@
 export * from '@/UI/Forms/Checkbox';
 export * from '@/UI/Forms/InputText';
 export * from '@/UI/Forms/Join';
+export * from '@/UI/Forms/Range';
 export * from '@/UI/Forms/Select';
 export * from '@/UI/Forms/Switch';
 export * from '@/UI/Forms/Textarea';

packages/docs/.vitepress/theme/Components/Layout/Features/Sidebar/Lib/UseSidebarItems.ts

@@ -225,6 +225,13 @@ export function useSidebarItems(): ComputedRef<SidebarItem[]> {
                         icon:     'mdi:account-plus',
                         children: [],
                     },
+                    {
+                        text:     'Range',
+                        to:       `${flyonUIVueNextPath}/forms/range`,
+                        icon:     'radix-icons:slider',
+                        children: [],
+                        badge:    _unreleasedBadge,
+                    },
                     {
                         text:     'Select',
                         to:       '/forms/select',

packages/docs/.vitepress/theme/index.ts

@@ -36,6 +36,7 @@ import SkeletonDocs                                   from '@/Next/Components/Sk
 import StatusDocs                                     from '@/Next/Components/Status/StatusDocs.vue';
 import BlockQuoteDocs                                 from '@/Next/Content/BlockQuote/BlockQuoteDocs.vue';
 import DividerDocs                                    from '@/Next/Content/Divider/DividerDocs.vue';
+import RangeDocs                                      from '@/Next/Forms/Range/RangeDocs.vue';
 import DataTableDocs                                  from '@/Next/Tables/DataTable/DataTableDocs.vue';
 import ModalDocs                                      from '@/Overlays/Modal/ModalDocs.vue';
 import PopoverDocs                                    from '@/Overlays/Popover/PopoverDocs.vue';
@@ -109,6 +110,7 @@ export default {
             { name: 'NavbarDocs', instance: NavbarDocs },
             { name: 'PaginationDocs', instance: PaginationDocs },
             { name: 'PopoverDocs', instance: PopoverDocs },
+            { name: 'RangeDocs', instance: RangeDocs },
             { name: 'SkeletonDocs', instance: SkeletonDocs },
             { name: 'StatsDocs', instance: StatsDocs },
             { name: 'StatusDocs', instance: StatusDocs },

packages/docs/Next/Forms/Range.md

@@ -0,0 +1,43 @@
+# Range
+
+### Default
+
+<RangeDocs section="default" />
+
+### Sizes
+
+<RangeDocs section="size" />
+
+### Colors
+
+## Solid
+
+<RangeDocs section="color" />
+
+## Custom
+
+<RangeDocs section="custom-color" />
+
+## Illustrations
+
+### Disabled
+
+<RangeDocs section="disabled" />
+
+### Min, max and step
+
+<RangeDocs section="min-max-and-step" />
+
+### Steps
+
+<RangeDocs section="steps" />
+
+## Api
+
+### Props
+
+<RangeDocs section="props" />
+
+### Slots
+
+<RangeDocs section="slots" />

packages/docs/Next/Forms/Range/CustomColor.vue

@@ -0,0 +1,12 @@
+<template>
+    <FoRange v-model="value"
+             class="[--range-color:teal]!"
+    />
+</template>
+
+<script setup lang="ts">
+import { FoRange } from 'flyonui-vue';
+import { ref }     from 'vue';
+
+const value = ref<number>(50);
+</script>

packages/docs/Next/Forms/Range/DefaultRange.vue

@@ -0,0 +1,10 @@
+<template>
+    <FoRange v-model="value" />
+</template>
+
+<script setup lang="ts">
+import { FoRange } from 'flyonui-vue';
+import { ref }     from 'vue';
+
+const value = ref<number>(50);
+</script>

packages/docs/Next/Forms/Range/DisabledRange.vue

@@ -0,0 +1,13 @@
+<template>
+    <!--    todo: isDisabled to be changed on 3.x -->
+    <FoRange v-model="value"
+             is-disabled
+    />
+</template>
+
+<script setup lang="ts">
+import { FoRange } from 'flyonui-vue';
+import { ref }     from 'vue';
+
+const value = ref<number>(50);
+</script>

packages/docs/Next/Forms/Range/MinMaxAndStepRange.vue

@@ -0,0 +1,22 @@
+<template>
+    Min: 0, Max: 100, Step: 1, Value: {{ value1 }}
+    <FoRange v-model="value1"
+             :min="0"
+             :max="100"
+    />
+
+    Min: 50, Max: 100, Step: 5, Value: {{ value2 }}
+    <FoRange v-model="value2"
+             :min="50"
+             :max="100"
+             :step="5"
+    />
+</template>
+
+<script setup lang="ts">
+import { FoRange } from 'flyonui-vue';
+import { ref }     from 'vue';
+
+const value1 = ref<number>(50);
+const value2 = ref<number>(50);
+</script>

packages/docs/Next/Forms/Range/RangeColor.vue

@@ -0,0 +1,40 @@
+<template>
+    <FoRange v-model="value"
+             color="neutral"
+    />
+
+    <FoRange v-model="value"
+             color="primary"
+    />
+
+    <FoRange v-model="value"
+             color="secondary"
+    />
+
+    <FoRange v-model="value"
+             color="accent"
+    />
+
+    <FoRange v-model="value"
+             color="info"
+    />
+
+    <FoRange v-model="value"
+             color="success"
+    />
+
+    <FoRange v-model="value"
+             color="warning"
+    />
+
+    <FoRange v-model="value"
+             color="error"
+    />
+</template>
+
+<script setup lang="ts">
+import { FoRange } from 'flyonui-vue';
+import { ref }     from 'vue';
+
+const value = ref<number>(50);
+</script>