Merge pull request #137 from michaelcozzolino/feat/input-file

feat(FoInputFile): First implementation

Author: michaelcozzolino

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

@@ -8,6 +8,7 @@ type NonConfigurableComponentName = 'FoAvatarGroup'
     | 'FoDiff'
     | 'FoDotStyleBadge'
     | 'FoJoin'
+    | 'FoImageRadio'
     | 'FoLabel'
     | 'FoListGroup'
     | 'FoListGroupItem'

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

@@ -20,6 +20,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 { 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';
@@ -113,6 +114,11 @@ export interface ConfigurableComponentProps {
     FoDivider:   ConfigurableProps<DividerProps>;
     FoHeading:   ConfigurableProps<HeadingProps>;
     FoIcon:      ConfigurableProps<IconProps>;
+    FoInputFile: ConfigurableProps<
+        InputFileProps
+        & HorizontalPositionComponentConfig<HorizontalHelperTextPositionConfig>
+        & LabelTypeComponentConfig
+    >;
     FoInputText: ConfigurableProps<
         InputTextProps
         & HorizontalPositionComponentConfig<HorizontalPositionGlobalConfig>

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

@@ -40,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',

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

@@ -6,6 +6,7 @@ export type SizableComponentName = Extract<
     | 'FoBadge'
     | 'FoButton'
     | 'FoCheckbox'
+    | 'FoInputFile'
     | 'FoInputText'
     | 'FoKeyboard'
     | 'FoLoading'

packages/core/src/UI/Components/HelperText/Types/HelperText.ts

@@ -1,7 +1,7 @@
 import type { ComponentName }      from '@/Lib';
 import type { HorizontalPosition } from '@/Types';
 
-export type PositionableHelperTextComponentName = Extract<ComponentName, 'FoInputText' | 'FoSelect' | 'FoTextarea'>;
+export type PositionableHelperTextComponentName = Extract<ComponentName, 'FoInputFile' | 'FoInputText' | 'FoSelect' | 'FoTextarea'>;
 
 export type HelperText = string;
 

packages/core/src/UI/Components/Label/Internal/Types/Label.ts

@@ -1,7 +1,13 @@
 import type { ComponentName, FloatingLabelComponentName, MaybeStringId } from '@/Lib';
 import type { LabelType }                                                from '@/UI/Components';
 
-export type ConfigurableLabelComponentName = Extract<ComponentName, 'FoInputText' | 'FoSelect' | 'FoTextarea'>;
+export type ConfigurableLabelComponentName = Extract<
+    ComponentName,
+    'FoInputFile'
+    | 'FoInputText'
+    | 'FoSelect'
+    | 'FoTextarea'
+>;
 
 export interface LabelProps<T extends LabelType = LabelType> extends MaybeStringId {
     componentName?: FloatingLabelComponentName;

packages/core/src/UI/Components/Label/Internal/UI/FoLabel.vue

@@ -46,6 +46,11 @@ const labelClass = computed((): string => {
     }
 
     const classes: Record<FloatingLabelComponentName, Record<LabelType, string>> = {
+        FoInputFile: {
+            text:     'label-text',
+            floating: 'input-floating-label',
+            inline:   '',
+        },
         FoInputText: {
             text:     'label-text',
             floating: 'input-floating-label',

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

@@ -0,0 +1,11 @@
+import type { Disableable, MaybeStringId, Sizable, Validity }                     from '@/Lib';
+import type { LabelType, WithConfigurableHelperText, WithConfigurableInputLabel } from '@/UI/Components';
+
+export type InputFileLabelType = Extract<LabelType, 'text' | 'floating'>;
+
+export type InputFileProps = MaybeStringId
+    & Disableable
+    & Sizable
+    & WithConfigurableInputLabel<InputFileLabelType>
+    & Validity
+    & WithConfigurableHelperText;