@returnless/focus-ui 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/focus-ui.js +10851 -0
- package/dist/focus-ui.umd.cjs +26 -0
- package/dist/style.css +1 -0
- package/package.json +11 -7
- package/src/build-utils/generate-component-meta.ts +5 -1
- package/src/build-utils/update-component-list.ts +1 -1
- package/src/components/Accordion/AccordionContent.vue +34 -5
- package/src/components/Accordion/AccordionItem.vue +5 -2
- package/src/components/Accordion/AccordionTrigger.vue +5 -2
- package/src/components/Accordion/README.md +1 -1
- package/src/components/ActionList/ActionList.vue +9 -0
- package/src/components/ActionList/ActionListBody.vue +11 -0
- package/src/components/ActionList/ActionListItem.vue +37 -0
- package/src/components/ActionList/ActionListSection.vue +7 -0
- package/src/components/ActionList/ActionListTrigger.vue +9 -0
- package/src/components/ActionList/README.md +113 -0
- package/src/components/ActionList/index.ts +5 -0
- package/src/components/Alert/Alert.vue +23 -10
- package/src/components/Alert/AlertDescription.vue +13 -1
- package/src/components/Alert/AlertTitle.vue +1 -1
- package/src/components/Alert/DismissableAlertButton.vue +6 -4
- package/src/components/Alert/README.md +31 -2
- package/src/components/Alert/index.ts +2 -0
- package/src/components/Alert/types.ts +1 -0
- package/src/components/AlertDialog/AlertDialog.vue +10 -1
- package/src/components/AlertDialog/AlertDialogActionButton.vue +9 -2
- package/src/components/AlertDialog/AlertDialogCancelButton.vue +1 -1
- package/src/components/AlertDialog/AlertDialogDescription.vue +7 -1
- package/src/components/AlertDialog/AlertDialogTitle.vue +11 -3
- package/src/components/AlertDialog/README.md +15 -16
- package/src/components/AspectRatio/AspectRatio.vue +19 -0
- package/src/components/AspectRatio/README.md +36 -0
- package/src/components/AspectRatio/index.ts +1 -0
- package/src/components/Avatar/Avatar.vue +57 -13
- package/src/components/Avatar/README.md +3 -9
- package/src/components/Badge/Badge.vue +1 -1
- package/src/components/Badge/README.md +9 -9
- package/src/components/BarChart/BarChart.vue +80 -0
- package/src/components/{MetricCard/MetricCardHeader.vue → BarChart/BarChartContainer.vue} +1 -1
- package/src/components/BarChart/BarChartStacked.vue +93 -0
- package/src/components/BarChart/README.md +83 -0
- package/src/components/BarChart/index.ts +3 -0
- package/src/components/Breadcrumbs/Breadcrumb.vue +7 -0
- package/src/components/Breadcrumbs/BreadcrumbEllipsis.vue +12 -0
- package/src/components/{MetricCard/MetricCardValue.vue → Breadcrumbs/BreadcrumbItem.vue} +2 -2
- package/src/components/Breadcrumbs/BreadcrumbLink.vue +13 -0
- package/src/components/Breadcrumbs/BreadcrumbList.vue +8 -0
- package/src/components/Breadcrumbs/BreadcrumbPage.vue +13 -0
- package/src/components/Breadcrumbs/BreadcrumbSeparator.vue +12 -0
- package/src/components/Breadcrumbs/README.md +91 -0
- package/src/components/Breadcrumbs/index.ts +7 -0
- package/src/components/Button/Button.vue +53 -41
- package/src/components/Button/ButtonContent.vue +1 -1
- package/src/components/Button/ButtonIcon.vue +28 -3
- package/src/components/Button/README.md +32 -29
- package/src/components/Button/index.ts +2 -0
- package/src/components/Button/types.ts +30 -0
- package/src/components/ButtonGroup/README.md +1 -1
- package/src/components/Card/CardHelp.vue +23 -0
- package/src/components/Card/CardSection.vue +17 -2
- package/src/components/Card/CardTitle.vue +6 -3
- package/src/components/Card/README.md +97 -10
- package/src/components/Card/index.ts +2 -1
- package/src/components/Checkbox/Checkbox.vue +29 -5
- package/src/components/Checkbox/README.md +34 -5
- package/src/components/DatePicker/DatePicker.vue +7 -27
- package/src/components/DatePicker/README.md +1 -1
- package/src/components/DescriptionList/DescriptionList.vue +1 -1
- package/src/components/DescriptionList/DescriptionListItem.vue +1 -1
- package/src/components/DescriptionList/README.md +2 -2
- package/src/components/Dialog/README.md +2 -0
- package/src/components/Dialog/index.ts +0 -0
- package/src/components/DropZone/DropZone.vue +105 -0
- package/src/components/DropZone/README.md +48 -0
- package/src/components/DropZone/index.ts +1 -0
- package/src/components/EmptyState/README.md +1 -1
- package/src/components/Feed/FeedItem.vue +4 -1
- package/src/components/Feed/FeedItemBlock.vue +4 -1
- package/src/components/Feed/README.md +1 -1
- package/src/components/FileUploadButton/FileUploadButton.vue +62 -0
- package/src/components/FileUploadButton/index.ts +1 -0
- package/src/components/Form/Form.vue +7 -2
- package/src/components/Form/README.md +1 -1
- package/src/components/FormLayout/FormLayout.vue +20 -2
- package/src/components/FormLayout/README.md +39 -1
- package/src/components/Heading/Heading.vue +32 -0
- package/src/components/Heading/index.ts +3 -0
- package/src/components/Heading/types.ts +3 -0
- package/src/components/Image/Image.vue +30 -0
- package/src/components/Image/index.ts +1 -0
- package/src/components/InertiaLink/InertiaLink.vue +11 -0
- package/src/components/InertiaLink/index.ts +1 -0
- package/src/components/InlineError/InlineError.vue +21 -0
- package/src/components/InlineError/README.md +63 -0
- package/src/components/InlineError/index.ts +1 -0
- package/src/components/KPICard/KPICard.vue +28 -0
- package/src/components/KPICard/KPICardSection.vue +30 -0
- package/src/components/KPICard/README.md +124 -0
- package/src/components/KPICard/index.ts +2 -0
- package/src/components/Legend/Legend.vue +7 -0
- package/src/components/Legend/LegendItem.vue +34 -0
- package/src/components/Legend/README.md +32 -0
- package/src/components/Legend/index.ts +2 -0
- package/src/components/Link/Link.vue +4 -4
- package/src/components/Link/README.md +1 -1
- package/src/components/Navigation/Navigation.vue +2 -2
- package/src/components/Navigation/NavigationItem.vue +14 -10
- package/src/components/Navigation/NavigationSecondarySection.vue +12 -0
- package/src/components/Navigation/NavigationSection.vue +1 -1
- package/src/components/Navigation/README.md +10 -15
- package/src/components/Navigation/index.ts +1 -0
- package/src/components/Page/Page.vue +2 -33
- package/src/components/Page/PageBody.vue +36 -0
- package/src/components/Page/PageTitle.vue +6 -3
- package/src/components/Page/README.md +45 -39
- package/src/components/Page/index.ts +1 -0
- package/src/components/Pagination/README.md +1 -1
- package/src/components/PinInput/README.md +1 -1
- package/src/components/Popover/Popover.vue +18 -0
- package/src/components/Popover/PopoverBody.vue +11 -0
- package/src/components/Popover/PopoverTrigger.vue +9 -0
- package/src/components/Popover/README.md +34 -6
- package/src/components/Popover/index.ts +3 -0
- package/src/components/Popper/Popper.vue +91 -0
- package/src/components/Popper/PopperBody.vue +19 -0
- package/src/components/Popper/PopperTrigger.vue +14 -0
- package/src/components/Popper/README.md +42 -0
- package/src/components/Popper/index.ts +3 -0
- package/src/components/ProgressBar/ProgressBar.vue +24 -6
- package/src/components/RadioButton/README.md +1 -1
- package/src/components/RadioButton/RadioButton.vue +3 -2
- package/src/components/ResourceList/README.md +160 -0
- package/src/components/ResourceList/ResourceList.vue +7 -0
- package/src/components/ResourceList/ResourceListItem.vue +7 -0
- package/src/components/ResourceList/ResourceListItemContent.vue +7 -0
- package/src/components/ResourceList/index.ts +3 -0
- package/src/components/Select/README.md +1 -1
- package/src/components/Select/Select.vue +1 -1
- package/src/components/Separator/README.md +5 -1
- package/src/components/Separator/Separator.vue +20 -3
- package/src/components/Spinner/README.md +1 -1
- package/src/components/Spinner/Spinner.vue +10 -4
- package/src/components/StatusIndicator/README.md +2 -2
- package/src/components/StatusIndicator/StatusIndicator.vue +11 -5
- package/src/components/Stepper/README.md +38 -0
- package/src/components/Stepper/Stepper.vue +104 -0
- package/src/components/Stepper/index.ts +1 -0
- package/src/components/Tabs/README.md +1 -1
- package/src/components/Tabs/TabTrigger.vue +5 -4
- package/src/components/Tabs/Tabs.vue +4 -1
- package/src/components/Tag/Tag.vue +45 -0
- package/src/components/Tag/index.ts +1 -0
- package/src/components/TextField/README.md +24 -6
- package/src/components/TextField/TextField.vue +25 -5
- package/src/components/TextField/TextFieldIcon.vue +19 -0
- package/src/components/TextStyle/README.md +1 -1
- package/src/components/TextStyle/TextStyle.vue +1 -1
- package/src/components/Toast/DismissToastAction.vue +1 -1
- package/src/components/Toast/README.md +1 -1
- package/src/components/Toggle/README.md +1 -1
- package/src/components/Toggle/Toggle.vue +8 -5
- package/src/components/Tooltip/README.md +1 -1
- package/src/components/Tooltip/Tooltip.vue +15 -41
- package/src/components/TopBar/TopBarSearch.vue +2 -2
- package/src/components/index.ts +68 -12
- package/src/components/types.ts +5 -0
- package/src/composables/useTheme.ts +13 -1
- package/src/composables/useToastNotifications.ts +1 -1
- package/src/composables/useUniqueId.ts +4 -3
- package/src/index.css +17 -13
- package/src/index.ts +0 -11
- package/dist/focus-ui.es.js +0 -33
- package/dist/types/components/Accordion/Accordion.vue.d.ts +0 -32
- package/dist/types/components/Accordion/AccordionItem.vue.d.ts +0 -2
- package/dist/types/components/Accordion/index.d.ts +0 -2
- package/dist/types/components/index.d.ts +0 -1
- package/dist/types/index.d.ts +0 -7
- package/src/components/CategoryBar/CategoryBar.vue +0 -25
- package/src/components/CategoryBar/CategoryBarItem.vue +0 -34
- package/src/components/CategoryBar/README.md +0 -17
- package/src/components/CategoryBar/index.ts +0 -2
- package/src/components/MetricCard/MetricCard.vue +0 -11
- package/src/components/MetricCard/MetricCardLabel.vue +0 -9
- package/src/components/MetricCard/MetricCardSection.vue +0 -11
- package/src/components/MetricCard/README.md +0 -53
- package/src/components/MetricCard/index.ts +0 -5
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
|
|
2
|
-
/** The orientation of the accordion. */
|
|
3
|
-
orientation: "horizontal" | "vertical";
|
|
4
|
-
}>, {
|
|
5
|
-
orientation: string;
|
|
6
|
-
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
|
|
7
|
-
/** The orientation of the accordion. */
|
|
8
|
-
orientation: "horizontal" | "vertical";
|
|
9
|
-
}>, {
|
|
10
|
-
orientation: string;
|
|
11
|
-
}>>>, {
|
|
12
|
-
orientation: "horizontal" | "vertical";
|
|
13
|
-
}, {}>;
|
|
14
|
-
export default _default;
|
|
15
|
-
|
|
16
|
-
type __VLS_WithDefaults<P, D> = {
|
|
17
|
-
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
18
|
-
default: D[K];
|
|
19
|
-
}> : P[K];
|
|
20
|
-
};
|
|
21
|
-
type __VLS_Prettify<T> = {
|
|
22
|
-
[K in keyof T]: T[K];
|
|
23
|
-
} & {};
|
|
24
|
-
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
25
|
-
type __VLS_TypePropsToOption<T> = {
|
|
26
|
-
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
27
|
-
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
28
|
-
} : {
|
|
29
|
-
type: import('vue').PropType<T[K]>;
|
|
30
|
-
required: true;
|
|
31
|
-
};
|
|
32
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Accordion, AccordionItem } from './Accordion';
|
package/dist/types/index.d.ts
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
<script lang="ts" setup>
|
|
2
|
-
import { computed, provide, useSlots, VNode } from 'vue';
|
|
3
|
-
|
|
4
|
-
const slots = useSlots();
|
|
5
|
-
|
|
6
|
-
const totalCategoryBarWidth = computed((): number => {
|
|
7
|
-
if (!slots.default) {
|
|
8
|
-
return 0;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
const slotValues = slots.default().map((slot: VNode) => {
|
|
12
|
-
return slot.props!.value;
|
|
13
|
-
});
|
|
14
|
-
|
|
15
|
-
return slotValues.reduce((acc: number, value: number) => acc + value, 0);
|
|
16
|
-
});
|
|
17
|
-
|
|
18
|
-
provide('totalCategoryBarWidth', totalCategoryBarWidth);
|
|
19
|
-
</script>
|
|
20
|
-
|
|
21
|
-
<template>
|
|
22
|
-
<div class="flex w-full space-x-0.5">
|
|
23
|
-
<slot />
|
|
24
|
-
</div>
|
|
25
|
-
</template>
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
<script lang="ts" setup>
|
|
2
|
-
import { TextStyle } from '../TextStyle';
|
|
3
|
-
import { computed, CSSProperties, inject, Ref } from 'vue';
|
|
4
|
-
import { TailwindColor, useTailwindColor } from '../../composables';
|
|
5
|
-
|
|
6
|
-
const props = defineProps<{
|
|
7
|
-
value: number;
|
|
8
|
-
color: TailwindColor;
|
|
9
|
-
}>();
|
|
10
|
-
|
|
11
|
-
const totalCategoryBarWidth = inject<Ref<number>>('totalCategoryBarWidth')!;
|
|
12
|
-
|
|
13
|
-
const categoryBarItemStyle = computed((): CSSProperties => {
|
|
14
|
-
return {
|
|
15
|
-
backgroundColor: useTailwindColor(props.color, '500'),
|
|
16
|
-
width: (props.value / totalCategoryBarWidth.value * 100) + '%',
|
|
17
|
-
};
|
|
18
|
-
});
|
|
19
|
-
</script>
|
|
20
|
-
|
|
21
|
-
<template>
|
|
22
|
-
<div
|
|
23
|
-
class="space-y-2"
|
|
24
|
-
:style="{ width: categoryBarItemStyle.width }"
|
|
25
|
-
>
|
|
26
|
-
<TextStyle variant="subdued">
|
|
27
|
-
{{ value }}
|
|
28
|
-
</TextStyle>
|
|
29
|
-
<div
|
|
30
|
-
class="rounded h-2"
|
|
31
|
-
:style="{ backgroundColor: categoryBarItemStyle.backgroundColor }"
|
|
32
|
-
/>
|
|
33
|
-
</div>
|
|
34
|
-
</template>
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
<script lang="ts" setup>
|
|
2
|
-
import { CategoryBar } from '../../src/components';
|
|
3
|
-
import api from '../component-meta/CategoryBar.json';
|
|
4
|
-
</script>
|
|
5
|
-
|
|
6
|
-
# Category Bar
|
|
7
|
-
|
|
8
|
-
The Category Bar component is a horizontal bar that displays a list of categories. Each category is a button that can be
|
|
9
|
-
clicked to filter the data displayed in the parent component.
|
|
10
|
-
|
|
11
|
-
<ComponentApi :api="api" />
|
|
12
|
-
|
|
13
|
-
## Usage
|
|
14
|
-
|
|
15
|
-
<ComponentWrapper>
|
|
16
|
-
<CategoryBar />
|
|
17
|
-
</ComponentWrapper>
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
<script lang="ts" setup>
|
|
2
|
-
import {
|
|
3
|
-
Badge,
|
|
4
|
-
BadgeContent,
|
|
5
|
-
BadgeIcon,
|
|
6
|
-
MetricCard,
|
|
7
|
-
MetricCardHeader,
|
|
8
|
-
MetricCardLabel,
|
|
9
|
-
MetricCardSection,
|
|
10
|
-
MetricCardValue,
|
|
11
|
-
} from '../../src/components';
|
|
12
|
-
import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/vue/16/solid';
|
|
13
|
-
import api from '../component-meta/MetricCard.json';
|
|
14
|
-
</script>
|
|
15
|
-
|
|
16
|
-
# Metric Card
|
|
17
|
-
|
|
18
|
-
The Metric Card component is used to display a metric value with a label and an optional icon.
|
|
19
|
-
|
|
20
|
-
<ComponentApi :api="api" />
|
|
21
|
-
|
|
22
|
-
## Usage
|
|
23
|
-
|
|
24
|
-
<ComponentWrapper>
|
|
25
|
-
<div style="max-width: 350px;">
|
|
26
|
-
<MetricCard>
|
|
27
|
-
<MetricCardSection>
|
|
28
|
-
<MetricCardHeader>
|
|
29
|
-
<MetricCardLabel>Missed Revenue</MetricCardLabel>
|
|
30
|
-
<MetricCardValue>€ 325,44</MetricCardValue>
|
|
31
|
-
</MetricCardHeader>
|
|
32
|
-
<Badge color="green">
|
|
33
|
-
<BadgetContent>+ 25%</BadgetContent>
|
|
34
|
-
<BadgeIcon>
|
|
35
|
-
<ArrowTrendingUpIcon />
|
|
36
|
-
</BadgeIcon>
|
|
37
|
-
</Badge>
|
|
38
|
-
</MetricCardSection>
|
|
39
|
-
<MetricCardSection>
|
|
40
|
-
<MetricCardHeader>
|
|
41
|
-
<MetricCardLabel>Product Costs</MetricCardLabel>
|
|
42
|
-
<MetricCardValue>€ 204,00</MetricCardValue>
|
|
43
|
-
</MetricCardHeader>
|
|
44
|
-
</MetricCardSection>
|
|
45
|
-
<MetricCardSection>
|
|
46
|
-
<MetricCardHeader>
|
|
47
|
-
<MetricCardLabel>Estimated Lost Margin</MetricCardLabel>
|
|
48
|
-
<MetricCardValue>€ 121,44</MetricCardValue>
|
|
49
|
-
</MetricCardHeader>
|
|
50
|
-
</MetricCardSection>
|
|
51
|
-
</MetricCard>
|
|
52
|
-
</div>
|
|
53
|
-
</ComponentWrapper>
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
export { default as MetricCard } from './MetricCard.vue';
|
|
2
|
-
export { default as MetricCardHeader } from './MetricCardHeader.vue';
|
|
3
|
-
export { default as MetricCardLabel } from './MetricCardLabel.vue';
|
|
4
|
-
export { default as MetricCardSection } from './MetricCardSection.vue';
|
|
5
|
-
export { default as MetricCardValue } from './MetricCardValue.vue';
|