chore: Merge 2.x into 3.x

packages/core/package.json

@@ -69,7 +69,7 @@
         "@vueuse/core": "^14.2.1",
         "@vueuse/motion": "^3.0.3",
         "deepmerge": "^4.3.1",
-        "unhead": "^2.1.4"
+        "unhead": "^2.1.12"
     },
     "devDependencies": {
         "@iconify/vue": "^4.3.0",

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

@@ -15,6 +15,11 @@ export function useAlignment(
     return useComponentClass<AlignableComponentName, Alignment>(
         componentName,
         {
+            FoBlockQuote: {
+                left:   '',
+                center: 'mx-auto text-center',
+                right:  'ms-auto text-end',
+            },
             FoDivider: {
                 left:   'divider-start',
                 center: '',

packages/core/src/Lib/UseAlignment/Types/Alignment.ts

@@ -1,6 +1,6 @@
 import type { ComponentName } from '@/Lib';
 
-export type AlignableComponentName = Extract<ComponentName, 'FoDivider' | 'FoPagination' | 'FoTabs'>;
+export type AlignableComponentName = Extract<ComponentName, 'FoBlockQuote' | 'FoDivider' | 'FoPagination' | 'FoTabs'>;
 
 export type Alignment = 'left' | 'center' | 'right';
 

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

@@ -9,6 +9,17 @@ export function useColor(
     componentName: MaybeRefOrGetter<ColorableComponentName>,
     color: MaybeRefOrGetter<Color | undefined>,
 ): ComputedRef<string> {
+    const textClasses: Record<Color, string> = {
+        neutral:   'text-neutral',
+        primary:   'text-primary',
+        secondary: 'text-secondary',
+        accent:    'text-accent',
+        info:      'text-info',
+        success:   'text-success',
+        warning:   'text-warning',
+        error:     'text-error',
+    };
+
     return useComponentClass<ColorableComponentName, Color>(
         componentName,
         {
@@ -62,17 +73,8 @@ export function useColor(
                 warning:   'divider-warning',
                 error:     'divider-error',
             },
-            FoHeading: {
-                neutral:   'text-neutral',
-                primary:   'text-primary',
-                secondary: 'text-secondary',
-                accent:    'text-accent',
-                info:      'text-info',
-                success:   'text-success',
-                warning:   'text-warning',
-                error:     'text-error',
-            },
-            FoLink: {
+            FoHeading: textClasses,
+            FoLink:    {
                 neutral:   'link-neutral',
                 primary:   'link-primary',
                 secondary: 'link-secondary',
@@ -92,17 +94,9 @@ export function useColor(
                 warning:   'bg-warning/30',
                 error:     'bg-error/30',
             },
-            FoLoading: {
-                neutral:   'text-neutral',
-                primary:   'text-primary',
-                secondary: 'text-secondary',
-                accent:    'text-accent',
-                info:      'text-info',
-                success:   'text-success',
-                warning:   'text-warning',
-                error:     'text-error',
-            },
-            FoRadio: {
+            FoLoading:        textClasses,
+            FoRadialProgress: textClasses,
+            FoRadio:          {
                 neutral:   '',
                 primary:   'radio-primary',
                 secondary: 'radio-secondary',
@@ -112,6 +106,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

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

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

@@ -5,18 +5,19 @@ import { useClass }                           from '@/Lib/UseClass/Internal';
 import { computed, toValue }                  from 'vue';
 
 export function useFloatingLabel(
-    elementName: MaybeRefOrGetter<FloatingLabelComponentName>,
+    componentName: MaybeRefOrGetter<FloatingLabelComponentName>,
     labelType: MaybeRefOrGetter<LabelType | undefined>,
 ): ComputedRef<string> {
     return computed(() => {
         const isFloating = toValue(labelType) === 'floating';
 
         const classes: Record<FloatingLabelComponentName, ComputedRef<string>> = {
+            FoInputFile: useClass(isFloating, 'input-floating'),
             FoInputText: useClass(isFloating, 'input-floating'),
             FoSelect:    useClass(isFloating, 'select-floating'),
             FoTextarea:  useClass(isFloating, 'textarea-floating'),
         };
 
-        return classes[toValue(elementName)].value;
+        return classes[toValue(componentName)].value;
     });
 }

packages/core/src/Lib/UseFloatingLabel/Types/FloatingLabel.ts

@@ -1,3 +1,4 @@
 import type { ComponentName } from '@/Lib';
 
-export type FloatingLabelComponentName = Extract<ComponentName, 'FoInputText' | 'FoSelect' | 'FoTextarea'>;
+// todo: there is a mismatch between configurable and floating, this should be checked
+export type FloatingLabelComponentName = Extract<ComponentName, 'FoInputFile' | 'FoInputText' | 'FoSelect' | 'FoTextarea'>;

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

@@ -1,19 +1,24 @@
 import type { ConfigurableComponentProps } from '@/Lib';
 
-type NonConfigurableComponentName = 'FoJoin'
+type NonConfigurableComponentName = 'FoAvatarGroup'
+    | 'FoBlockQuote'
     | 'FoCheckboxGroup'
     | 'FoDatalist'
     | 'FoDataTable'
     | 'FoDiff'
     | 'FoDotStyleBadge'
+    | 'FoJoin'
+    | 'FoImageRadio'
     | 'FoLabel'
     | 'FoListGroup'
     | 'FoListGroupItem'
     | 'FoLoadingButton'
     | 'FoMenuItem'
     | 'FoModalTitle'
+    | 'FoMultipleSelect'
     | 'FoPagination'
     | 'FoPopover'
+    | 'FoSkeleton'
     | 'FoSocialButton'
     | 'FoStat'
     | 'FoStatDescription'

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

@@ -1,13 +1,21 @@
-import type { Color, Colorable, ConfigurableComponentName, Preset, Shape, Size }       from '@/Lib';
-import type { PickIfExists, Prettify }                                                 from '@/Lib/Utils/Internal';
+import type { Color, Colorable, ConfigurableComponentName, Preset, Shape, Size } from '@/Lib';
+import type { PickIfExists, Prettify }                                           from '@/Lib/Utils/Internal';
 import type { HorizontalPosition, TextDirection }                                      from '@/Types';
-import type { BadgeProps, ButtonProps, LabelType, LoadingProps, MenuProps }            from '@/UI/Components';
-import type { AlertProps }                                                             from '@/UI/Components/Alert';
+import type { BadgeProps, ButtonProps, LabelType, LoadingProps, MenuProps ,
+} from '@/UI/Components';
+import type { AlertProps }  from '@/UI/Components/Alert';
+import type { AvatarProps } from '@/UI/Components/Avatar';
+import type {
+    RadialProgressProps,
+} from '@/UI/Components/RadialProgress';
 import type { StatusProps }                                                            from '@/UI/Components/Status';
 import type { HeadingProps, KeyboardProps, LinkProps }                                 from '@/UI/Content';
 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 { InputFileProps }                                                         from '@/UI/Forms/InputFile';
+import type { RadioProps }                                                             from '@/UI/Forms/Radio';
+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';
@@ -86,6 +94,7 @@ type ConfigurableProps<MaybeProps extends object> = Prettify<
 /** Configurable props for each component */
 export interface ConfigurableComponentProps {
     FoAlert:     ConfigurableProps<AlertProps>;
+    FoAvatar:    ConfigurableProps<AvatarProps>;
     /** Badge defaults */
     FoBadge:     ConfigurableProps<BadgeProps & HorizontalPositionComponentConfig<HorizontalIconPositionConfig>>;
     /** Button defaults */
@@ -95,28 +104,34 @@ export interface ConfigurableComponentProps {
     FoDivider:   ConfigurableProps<DividerProps>;
     FoHeading:   ConfigurableProps<HeadingProps>;
     FoIcon:      ConfigurableProps<IconProps>;
+    FoInputFile: ConfigurableProps<
+        InputFileProps
+        & HorizontalPositionComponentConfig<HorizontalHelperTextPositionConfig>
+        & LabelTypeComponentConfig
+    >;
     FoInputText: ConfigurableProps<
         InputTextProps
         & HorizontalPositionComponentConfig<HorizontalPositionGlobalConfig>
         & LabelTypeComponentConfig
     >;
-    FoKeyboard: ConfigurableProps<KeyboardProps>;
+    FoKeyboard:       ConfigurableProps<KeyboardProps>;
     /** Link defaults */
-    FoLink:     ConfigurableProps<LinkProps>;
+    FoLink:           ConfigurableProps<LinkProps>;
     /** Loading defaults */
-    FoLoading:  ConfigurableProps<LoadingProps>;
+    FoLoading:        ConfigurableProps<LoadingProps>;
     /** Menu defaults */
-    FoMenu:     ConfigurableProps<MenuProps>;
-    FoModal:    ConfigurableProps<Omit<ModalProps, 'backdrop'> & Colorable>;
-    /** Radio defaults */
-    FoRadio:    ConfigurableProps<ButtonProps>; // todo: temporary
+    FoMenu:           ConfigurableProps<MenuProps>;
+    FoModal:          ConfigurableProps<Omit<ModalProps, 'backdrop'> & Colorable>;
+    FoRadialProgress: ConfigurableProps<RadialProgressProps>;
+    FoRadio:          ConfigurableProps<RadioProps>;
+    FoRange:          ConfigurableProps<RangeProps>;
     /** Select defaults */
-    FoSelect:   ConfigurableProps<SelectProps> & LabelTypeComponentConfig & HorizontalPositionComponentConfig<HorizontalHelperTextPositionConfig>;
-    FoStatus:   ConfigurableProps<StatusProps>;
-    FoSwitch:   ConfigurableProps<SwitchProps> & HorizontalPositionComponentConfig<HorizontalIconPositionConfig>;
+    FoSelect:         ConfigurableProps<SelectProps> & LabelTypeComponentConfig & HorizontalPositionComponentConfig<HorizontalHelperTextPositionConfig>;
+    FoStatus:         ConfigurableProps<StatusProps>;
+    FoSwitch:         ConfigurableProps<SwitchProps> & HorizontalPositionComponentConfig<HorizontalIconPositionConfig>;
     /** Table defaults */
-    FoTable:    ConfigurableProps<TableProps>;
-    FoTabs:     ConfigurableProps<TabsProps<TabProps>>;
+    FoTable:          ConfigurableProps<TableProps>;
+    FoTabs:           ConfigurableProps<TabsProps<TabProps>>;
     FoTextarea: ConfigurableProps<
         TextareaProps
         & HorizontalPositionComponentConfig<HorizontalPositionGlobalConfig>

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

@@ -11,6 +11,12 @@ export function useShape(
     return useComponentClass<ShapeableComponentName, Shape>(
         componentName,
         {
+            FoAvatar: {
+                rounded: 'rounded-md',
+                circle:  'rounded-full',
+                pilled:  '',
+                square:  '',
+            },
             FoBadge: {
                 rounded: '',
                 circle:  'rounded-full',

packages/core/src/Lib/UseShape/Types/Shape.ts

@@ -1,6 +1,13 @@
 import type { ComponentName } from '@/Lib';
 
-export type ShapeableComponentName = Extract<ComponentName, 'FoBadge' | 'FoButton' | 'FoInputText' | 'FoSelect'>;
+export type ShapeableComponentName = Extract<
+    ComponentName,
+    'FoAvatar'
+    | 'FoBadge'
+    | 'FoButton'
+    | 'FoInputText'
+    | 'FoSelect'
+>;
 
 export type Shape = 'rounded' | 'pilled' | 'square' | 'circle';
 

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

@@ -12,6 +12,13 @@ export function useSize(
     return useComponentClass<SizableComponentName, Size>(
         componentName,
         {
+            FoAvatar: {
+                extraSmall: 'text-xs size-6',
+                small:      'text-sm size-8',
+                medium:     'text-base size-10',
+                large:      'text-lg size-12',
+                extraLarge: 'text-xl size-14',
+            },
             FoButton: {
                 extraSmall: 'btn-xs',
                 small:      'btn-sm',
@@ -33,6 +40,13 @@ export function useSize(
                 large:      'checkbox-lg',
                 extraLarge: 'checkbox-xl',
             },
+            FoInputFile: {
+                extraSmall: 'input-xs',
+                small:      'input-sm',
+                medium:     '',
+                large:      'input-lg',
+                extraLarge: 'input-xl',
+            },
             FoInputText: {
                 extraSmall: 'input-xs',
                 small:      'input-sm',
@@ -68,6 +82,20 @@ export function useSize(
                 large:      'modal-dialog-lg',
                 extraLarge: 'modal-dialog-xl',
             },
+            FoRadio: {
+                extraSmall: 'radio-xs',
+                small:      'radio-sm',
+                medium:     '',
+                large:      'radio-lg',
+                extraLarge: 'radio-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

@@ -2,14 +2,18 @@ import type { ComponentName } from '@/Lib';
 
 export type SizableComponentName = Extract<
     ComponentName,
-    'FoBadge'
+    'FoAvatar'
+    | 'FoBadge'
     | 'FoButton'
     | 'FoCheckbox'
+    | 'FoInputFile'
     | 'FoInputText'
     | 'FoKeyboard'
     | 'FoLoading'
     | 'FoMenu'
     | 'FoModal'
+    | 'FoRadio'
+    | 'FoRange'
     | 'FoSelect'
     | 'FoStatus'
     | 'FoSwitch'

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

@@ -11,6 +11,7 @@ export function useStripes(
     const classes: Record<StripedComponentName, ComputedRef<string>> = {
         FoListGroup:     useClass(isStriped, '*:odd:bg-base-200'),
         FoListGroupItem: useClass(isStriped, 'bg-base-200'),
+        FoSkeleton:      useClass(isStriped, 'skeleton-striped border-base-content/20 rounded-box border'),
     };
 
     return classes[toValue(elementName)];

packages/core/src/Lib/UseStripes/Types/Stripes.ts

@@ -1,6 +1,6 @@
 import type { ComponentName } from '@/Lib';
 
-export type StripedComponentName = Extract<ComponentName, 'FoListGroup' | 'FoListGroupItem'>;
+export type StripedComponentName = Extract<ComponentName, 'FoListGroup' | 'FoListGroupItem' | 'FoSkeleton'>;
 
 export interface Striped {
     /** If true, the component will be shown with alternate stripes */

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

@@ -0,0 +1,17 @@
+import type { TailwindAnimation }             from '@/Lib/UseTailwindAnimation/Types';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+import { computed, toValue }                  from 'vue';
+
+export function useTailwindAnimation(animation: MaybeRefOrGetter<TailwindAnimation>): ComputedRef<string> {
+    return computed((): string => {
+        const animations: Record<TailwindAnimation, string> = {
+            none:   'animate-none',
+            bounce: 'animate-bounce',
+            spin:   'animate-spin',
+            ping:   'animate-ping',
+            pulse:  'animate-pulse',
+        };
+
+        return animations[toValue(animation)];
+    });
+}

packages/core/src/Lib/UseTailwindAnimation/Internal/Lib/index.ts

@@ -0,0 +1 @@
+export * from '@/Lib/UseTailwindAnimation/Internal/Lib/UseTailwindAnimation';

packages/core/src/Lib/UseTailwindAnimation/Internal/index.ts

@@ -0,0 +1 @@
+export * from '@/Lib/UseTailwindAnimation/Internal/Lib';

packages/core/src/Lib/UseTailwindAnimation/Types/TailwindAnimation.ts

@@ -0,0 +1 @@
+export type TailwindAnimation = 'none' | 'bounce' | 'spin' | 'ping' | 'pulse';

packages/core/src/Lib/UseTailwindAnimation/Types/index.ts

@@ -0,0 +1 @@
+export * from '@/Lib/UseTailwindAnimation/Types/TailwindAnimation';

packages/core/src/Lib/UseTailwindAnimation/index.ts

@@ -0,0 +1 @@
+export * from '@/Lib/UseTailwindAnimation/Types';