Skip to content

Commit bade25d

Browse files
michaelcozzolinomichaelcozzolino
authored
Merge pull request #135 from michaelcozzolino/feat/radial-progress
feat(FoRadialProgress): First implementation
2 parents ec7d498 + 663a50c commit bade25d

28 files changed

+520
-39
lines changed

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

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,17 @@ export function useColor(
99
componentName: MaybeRefOrGetter<ColorableComponentName>,
1010
color: MaybeRefOrGetter<Color | undefined>,
1111
): ComputedRef<string> {
12+
const textClasses: Record<Color, string> = {
13+
neutral: 'text-neutral',
14+
primary: 'text-primary',
15+
secondary: 'text-secondary',
16+
accent: 'text-accent',
17+
info: 'text-info',
18+
success: 'text-success',
19+
warning: 'text-warning',
20+
error: 'text-error',
21+
};
22+
1223
return useComponentClass<ColorableComponentName, Color>(
1324
componentName,
1425
{
@@ -62,17 +73,8 @@ export function useColor(
6273
warning: 'divider-warning',
6374
error: 'divider-error',
6475
},
65-
FoHeading: {
66-
neutral: 'text-neutral',
67-
primary: 'text-primary',
68-
secondary: 'text-secondary',
69-
accent: 'text-accent',
70-
info: 'text-info',
71-
success: 'text-success',
72-
warning: 'text-warning',
73-
error: 'text-error',
74-
},
75-
FoLink: {
76+
FoHeading: textClasses,
77+
FoLink: {
7678
neutral: 'link-neutral',
7779
primary: 'link-primary',
7880
secondary: 'link-secondary',
@@ -92,17 +94,9 @@ export function useColor(
9294
warning: 'bg-warning/30',
9395
error: 'bg-error/30',
9496
},
95-
FoLoading: {
96-
neutral: 'text-neutral',
97-
primary: 'text-primary',
98-
secondary: 'text-secondary',
99-
accent: 'text-accent',
100-
info: 'text-info',
101-
success: 'text-success',
102-
warning: 'text-warning',
103-
error: 'text-error',
104-
},
105-
FoRadio: {
97+
FoLoading: textClasses,
98+
FoRadialProgress: textClasses,
99+
FoRadio: {
106100
neutral: '',
107101
primary: 'radio-primary',
108102
secondary: 'radio-secondary',

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export type ColorableComponentName = Extract<
88
| 'FoCheckbox'
99
| 'FoDivider'
1010
| 'FoModal'
11+
| 'FoRadialProgress'
1112
| 'FoRadio'
1213
| 'FoRange'
1314
| 'FoStatus'

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

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,12 @@ import type {
99
LoadingProps,
1010
MenuProps,
1111
} from '@/UI/Components';
12-
import type { AlertProps } from '@/UI/Components/Alert';
13-
import type { AvatarProps } from '@/UI/Components/Avatar';
12+
import type { AlertProps } from '@/UI/Components/Alert';
13+
import type { AvatarProps } from '@/UI/Components/Avatar';
14+
import type {
15+
RadialProgressBackgroundProps,
16+
RadialProgressProps,
17+
} from '@/UI/Components/RadialProgress';
1418
import type { StatusProps } from '@/UI/Components/Status';
1519
import type { HeadingProps, KeyboardProps, LinkProps } from '@/UI/Content';
1620
import type { DividerProps } from '@/UI/Content/Divider';
@@ -113,24 +117,24 @@ export interface ConfigurableComponentProps {
113117
& HorizontalPositionComponentConfig<HorizontalPositionGlobalConfig>
114118
& LabelTypeComponentConfig
115119
>;
116-
FoKeyboard: ConfigurableProps<KeyboardProps>;
120+
FoKeyboard: ConfigurableProps<KeyboardProps>;
117121
/** Link defaults */
118-
FoLink: ConfigurableProps<LinkProps>;
122+
FoLink: ConfigurableProps<LinkProps>;
119123
/** Loading defaults */
120-
FoLoading: ConfigurableProps<LoadingProps>;
124+
FoLoading: ConfigurableProps<LoadingProps>;
121125
/** Menu defaults */
122-
FoMenu: ConfigurableProps<MenuProps>;
123-
FoModal: ConfigurableProps<Omit<ModalProps, 'backdrop'> & Colorable>;
124-
/** Radio defaults */
125-
FoRadio: ConfigurableProps<ButtonProps>; // todo: temporary
126-
FoRange: ConfigurableProps<RangeProps>;
126+
FoMenu: ConfigurableProps<MenuProps>;
127+
FoModal: ConfigurableProps<Omit<ModalProps, 'backdrop'> & Colorable>;
128+
FoRadialProgress: ConfigurableProps<RadialProgressProps & RadialProgressBackgroundProps>;
129+
FoRadio: ConfigurableProps<ButtonProps>; // todo: temporary
130+
FoRange: ConfigurableProps<RangeProps>;
127131
/** Select defaults */
128-
FoSelect: ConfigurableProps<SelectProps> & LabelTypeComponentConfig & HorizontalPositionComponentConfig<HorizontalHelperTextPositionConfig>;
129-
FoStatus: ConfigurableProps<StatusProps>;
130-
FoSwitch: ConfigurableProps<SwitchProps> & HorizontalPositionComponentConfig<HorizontalIconPositionConfig>;
132+
FoSelect: ConfigurableProps<SelectProps> & LabelTypeComponentConfig & HorizontalPositionComponentConfig<HorizontalHelperTextPositionConfig>;
133+
FoStatus: ConfigurableProps<StatusProps>;
134+
FoSwitch: ConfigurableProps<SwitchProps> & HorizontalPositionComponentConfig<HorizontalIconPositionConfig>;
131135
/** Table defaults */
132-
FoTable: ConfigurableProps<TableProps>;
133-
FoTabs: ConfigurableProps<TabsProps<TabProps>>;
136+
FoTable: ConfigurableProps<TableProps>;
137+
FoTabs: ConfigurableProps<TabsProps<TabProps>>;
134138
FoTextarea: ConfigurableProps<
135139
TextareaProps
136140
& HorizontalPositionComponentConfig<HorizontalPositionGlobalConfig>

‎packages/core/src/UI/Components/RadialProgress/Types/RadialProgress.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import type { Colorable, Preset, Presettable } from '@/Lib';
2+
3+
export type RadialProgressBackgroundPreset = Extract<Preset, 'solid' | 'soft'>;
4+
5+
export type RadialProgressBackgroundProps = Colorable & Presettable<RadialProgressBackgroundPreset>;
6+
7+
export interface RadialProgressProps extends Colorable {
8+
/** The progress' value */
9+
value: number;
10+
11+
/** The progress' background style, if this is set, the color prop will be ignored */
12+
background?: RadialProgressBackgroundProps;
13+
}

‎packages/core/src/UI/Components/RadialProgress/Types/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from '@/UI/Components/RadialProgress/Types/RadialProgress';

‎packages/core/src/UI/Components/RadialProgress/UI/FoRadialProgress.vue‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<template>
2+
<div class="radial-progress"
3+
:class="background === undefined ? colorClass : backgroundClass"
4+
:style="`--value:${value};`"
5+
role="progressbar"
6+
:aria-valuenow="value"
7+
>
8+
<slot />
9+
</div>
10+
</template>
11+
12+
<script setup lang="ts">
13+
import type { Color, ComponentName, Preset } from '@/Lib';
14+
import type { RadialProgressProps } from '@/UI/Components/RadialProgress';
15+
import { useFlyonUIVueAppConfig } from '@/Lib';
16+
import { useColor } from '@/Lib/UseColor/Internal';
17+
import { useFlyonUIVueAppConfigProperty } from '@/Lib/UseFlyonUIVueAppConfig/Internal';
18+
import { computed } from 'vue';
19+
20+
const props = defineProps<RadialProgressProps>();
21+
22+
const componentName: ComponentName = 'FoRadialProgress';
23+
const { config } = useFlyonUIVueAppConfig();
24+
25+
const colorClass = useColor(config, componentName, () => props.color);
26+
27+
const backgroundClass = computed((): string => {
28+
const emptyColorClasses: Record<Color, ''> = {
29+
neutral: '',
30+
primary: '',
31+
secondary: '',
32+
accent: '',
33+
info: '',
34+
success: '',
35+
warning: '',
36+
error: '',
37+
};
38+
39+
const colorClasses: Record<Preset, Record<Color, string>> = {
40+
solid: {
41+
neutral: 'bg-neutral text-neutral-content border-4 border-transparent',
42+
primary: 'bg-primary text-primary-content border-4 border-transparent',
43+
secondary: 'bg-secondary text-secondary-content border-4 border-transparent',
44+
accent: 'bg-accent text-accent-content border-4 border-transparent',
45+
info: 'bg-info text-info-content border-4 border-transparent',
46+
success: 'bg-success text-success-content border-4 border-transparent',
47+
warning: 'bg-warning text-warning-content border-4 border-transparent',
48+
error: 'bg-error text-error-content border-4 border-transparent',
49+
},
50+
outline: emptyColorClasses,
51+
dash: emptyColorClasses,
52+
soft: {
53+
neutral: 'bg-neutral/10 text-neutral border-4 border-transparent',
54+
primary: 'bg-primary/10 text-primary border-4 border-transparent',
55+
secondary: 'bg-secondary/10 text-secondary border-4 border-transparent',
56+
accent: 'bg-accent/10 text-accent border-4 border-transparent',
57+
info: 'bg-info/10 text-info border-4 border-transparent',
58+
success: 'bg-success/10 text-success border-4 border-transparent',
59+
warning: 'bg-warning/10 text-warning border-4 border-transparent',
60+
error: 'bg-error/10 text-error border-4 border-transparent',
61+
},
62+
gradient: emptyColorClasses,
63+
text: emptyColorClasses,
64+
dot: emptyColorClasses,
65+
};
66+
67+
const defaultPreset = useFlyonUIVueAppConfigProperty(config, componentName, 'preset', props.background?.preset).value;
68+
const defaultColor = useFlyonUIVueAppConfigProperty(config, componentName, 'color', props.background?.color).value;
69+
70+
return colorClasses[defaultPreset][defaultColor];
71+
});
72+
</script>

‎packages/core/src/UI/Components/RadialProgress/UI/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as FoRadialProgress } from '@/UI/Components/RadialProgress/UI/FoRadialProgress.vue';

‎packages/core/src/UI/Components/RadialProgress/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from '@/UI/Components/RadialProgress/Types';
2+
export * from '@/UI/Components/RadialProgress/UI';

‎packages/core/src/UI/Components/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ export * from '@/UI/Components/ListGroup';
99
export * from '@/UI/Components/Loading';
1010
export * from '@/UI/Components/Menu';
1111
export * from '@/UI/Components/Navbar';
12+
export * from '@/UI/Components/RadialProgress';
1213
export * from '@/UI/Components/Skeleton';
1314
export * from '@/UI/Components/Stats';
1415
export * from '@/UI/Components/Status';
1516
export * from '@/UI/Components/Swap';
16-
1717
export * from '@/UI/Components/ThemeController';
1818
// export * from '@/Components/Radio';

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,13 @@ export function useSidebarItems(): ComputedRef<SidebarItem[]> {
124124
icon: 'line-md:loading-twotone-loop',
125125
children: [],
126126
},
127+
{
128+
text: 'Radial Progress',
129+
to: `${flyonUIVueNextPath}/components/radial-progress`,
130+
icon: 'tabler:progress',
131+
children: [],
132+
badge: _unreleasedBadge,
133+
},
127134
{
128135
text: 'Skeleton',
129136
to: `${flyonUIVueNextPath}/components/skeleton`,

0 commit comments

Comments
 (0)