@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.
Files changed (186) hide show
  1. package/dist/focus-ui.js +10851 -0
  2. package/dist/focus-ui.umd.cjs +26 -0
  3. package/dist/style.css +1 -0
  4. package/package.json +11 -7
  5. package/src/build-utils/generate-component-meta.ts +5 -1
  6. package/src/build-utils/update-component-list.ts +1 -1
  7. package/src/components/Accordion/AccordionContent.vue +34 -5
  8. package/src/components/Accordion/AccordionItem.vue +5 -2
  9. package/src/components/Accordion/AccordionTrigger.vue +5 -2
  10. package/src/components/Accordion/README.md +1 -1
  11. package/src/components/ActionList/ActionList.vue +9 -0
  12. package/src/components/ActionList/ActionListBody.vue +11 -0
  13. package/src/components/ActionList/ActionListItem.vue +37 -0
  14. package/src/components/ActionList/ActionListSection.vue +7 -0
  15. package/src/components/ActionList/ActionListTrigger.vue +9 -0
  16. package/src/components/ActionList/README.md +113 -0
  17. package/src/components/ActionList/index.ts +5 -0
  18. package/src/components/Alert/Alert.vue +23 -10
  19. package/src/components/Alert/AlertDescription.vue +13 -1
  20. package/src/components/Alert/AlertTitle.vue +1 -1
  21. package/src/components/Alert/DismissableAlertButton.vue +6 -4
  22. package/src/components/Alert/README.md +31 -2
  23. package/src/components/Alert/index.ts +2 -0
  24. package/src/components/Alert/types.ts +1 -0
  25. package/src/components/AlertDialog/AlertDialog.vue +10 -1
  26. package/src/components/AlertDialog/AlertDialogActionButton.vue +9 -2
  27. package/src/components/AlertDialog/AlertDialogCancelButton.vue +1 -1
  28. package/src/components/AlertDialog/AlertDialogDescription.vue +7 -1
  29. package/src/components/AlertDialog/AlertDialogTitle.vue +11 -3
  30. package/src/components/AlertDialog/README.md +15 -16
  31. package/src/components/AspectRatio/AspectRatio.vue +19 -0
  32. package/src/components/AspectRatio/README.md +36 -0
  33. package/src/components/AspectRatio/index.ts +1 -0
  34. package/src/components/Avatar/Avatar.vue +57 -13
  35. package/src/components/Avatar/README.md +3 -9
  36. package/src/components/Badge/Badge.vue +1 -1
  37. package/src/components/Badge/README.md +9 -9
  38. package/src/components/BarChart/BarChart.vue +80 -0
  39. package/src/components/{MetricCard/MetricCardHeader.vue → BarChart/BarChartContainer.vue} +1 -1
  40. package/src/components/BarChart/BarChartStacked.vue +93 -0
  41. package/src/components/BarChart/README.md +83 -0
  42. package/src/components/BarChart/index.ts +3 -0
  43. package/src/components/Breadcrumbs/Breadcrumb.vue +7 -0
  44. package/src/components/Breadcrumbs/BreadcrumbEllipsis.vue +12 -0
  45. package/src/components/{MetricCard/MetricCardValue.vue → Breadcrumbs/BreadcrumbItem.vue} +2 -2
  46. package/src/components/Breadcrumbs/BreadcrumbLink.vue +13 -0
  47. package/src/components/Breadcrumbs/BreadcrumbList.vue +8 -0
  48. package/src/components/Breadcrumbs/BreadcrumbPage.vue +13 -0
  49. package/src/components/Breadcrumbs/BreadcrumbSeparator.vue +12 -0
  50. package/src/components/Breadcrumbs/README.md +91 -0
  51. package/src/components/Breadcrumbs/index.ts +7 -0
  52. package/src/components/Button/Button.vue +53 -41
  53. package/src/components/Button/ButtonContent.vue +1 -1
  54. package/src/components/Button/ButtonIcon.vue +28 -3
  55. package/src/components/Button/README.md +32 -29
  56. package/src/components/Button/index.ts +2 -0
  57. package/src/components/Button/types.ts +30 -0
  58. package/src/components/ButtonGroup/README.md +1 -1
  59. package/src/components/Card/CardHelp.vue +23 -0
  60. package/src/components/Card/CardSection.vue +17 -2
  61. package/src/components/Card/CardTitle.vue +6 -3
  62. package/src/components/Card/README.md +97 -10
  63. package/src/components/Card/index.ts +2 -1
  64. package/src/components/Checkbox/Checkbox.vue +29 -5
  65. package/src/components/Checkbox/README.md +34 -5
  66. package/src/components/DatePicker/DatePicker.vue +7 -27
  67. package/src/components/DatePicker/README.md +1 -1
  68. package/src/components/DescriptionList/DescriptionList.vue +1 -1
  69. package/src/components/DescriptionList/DescriptionListItem.vue +1 -1
  70. package/src/components/DescriptionList/README.md +2 -2
  71. package/src/components/Dialog/README.md +2 -0
  72. package/src/components/Dialog/index.ts +0 -0
  73. package/src/components/DropZone/DropZone.vue +105 -0
  74. package/src/components/DropZone/README.md +48 -0
  75. package/src/components/DropZone/index.ts +1 -0
  76. package/src/components/EmptyState/README.md +1 -1
  77. package/src/components/Feed/FeedItem.vue +4 -1
  78. package/src/components/Feed/FeedItemBlock.vue +4 -1
  79. package/src/components/Feed/README.md +1 -1
  80. package/src/components/FileUploadButton/FileUploadButton.vue +62 -0
  81. package/src/components/FileUploadButton/index.ts +1 -0
  82. package/src/components/Form/Form.vue +7 -2
  83. package/src/components/Form/README.md +1 -1
  84. package/src/components/FormLayout/FormLayout.vue +20 -2
  85. package/src/components/FormLayout/README.md +39 -1
  86. package/src/components/Heading/Heading.vue +32 -0
  87. package/src/components/Heading/index.ts +3 -0
  88. package/src/components/Heading/types.ts +3 -0
  89. package/src/components/Image/Image.vue +30 -0
  90. package/src/components/Image/index.ts +1 -0
  91. package/src/components/InertiaLink/InertiaLink.vue +11 -0
  92. package/src/components/InertiaLink/index.ts +1 -0
  93. package/src/components/InlineError/InlineError.vue +21 -0
  94. package/src/components/InlineError/README.md +63 -0
  95. package/src/components/InlineError/index.ts +1 -0
  96. package/src/components/KPICard/KPICard.vue +28 -0
  97. package/src/components/KPICard/KPICardSection.vue +30 -0
  98. package/src/components/KPICard/README.md +124 -0
  99. package/src/components/KPICard/index.ts +2 -0
  100. package/src/components/Legend/Legend.vue +7 -0
  101. package/src/components/Legend/LegendItem.vue +34 -0
  102. package/src/components/Legend/README.md +32 -0
  103. package/src/components/Legend/index.ts +2 -0
  104. package/src/components/Link/Link.vue +4 -4
  105. package/src/components/Link/README.md +1 -1
  106. package/src/components/Navigation/Navigation.vue +2 -2
  107. package/src/components/Navigation/NavigationItem.vue +14 -10
  108. package/src/components/Navigation/NavigationSecondarySection.vue +12 -0
  109. package/src/components/Navigation/NavigationSection.vue +1 -1
  110. package/src/components/Navigation/README.md +10 -15
  111. package/src/components/Navigation/index.ts +1 -0
  112. package/src/components/Page/Page.vue +2 -33
  113. package/src/components/Page/PageBody.vue +36 -0
  114. package/src/components/Page/PageTitle.vue +6 -3
  115. package/src/components/Page/README.md +45 -39
  116. package/src/components/Page/index.ts +1 -0
  117. package/src/components/Pagination/README.md +1 -1
  118. package/src/components/PinInput/README.md +1 -1
  119. package/src/components/Popover/Popover.vue +18 -0
  120. package/src/components/Popover/PopoverBody.vue +11 -0
  121. package/src/components/Popover/PopoverTrigger.vue +9 -0
  122. package/src/components/Popover/README.md +34 -6
  123. package/src/components/Popover/index.ts +3 -0
  124. package/src/components/Popper/Popper.vue +91 -0
  125. package/src/components/Popper/PopperBody.vue +19 -0
  126. package/src/components/Popper/PopperTrigger.vue +14 -0
  127. package/src/components/Popper/README.md +42 -0
  128. package/src/components/Popper/index.ts +3 -0
  129. package/src/components/ProgressBar/ProgressBar.vue +24 -6
  130. package/src/components/RadioButton/README.md +1 -1
  131. package/src/components/RadioButton/RadioButton.vue +3 -2
  132. package/src/components/ResourceList/README.md +160 -0
  133. package/src/components/ResourceList/ResourceList.vue +7 -0
  134. package/src/components/ResourceList/ResourceListItem.vue +7 -0
  135. package/src/components/ResourceList/ResourceListItemContent.vue +7 -0
  136. package/src/components/ResourceList/index.ts +3 -0
  137. package/src/components/Select/README.md +1 -1
  138. package/src/components/Select/Select.vue +1 -1
  139. package/src/components/Separator/README.md +5 -1
  140. package/src/components/Separator/Separator.vue +20 -3
  141. package/src/components/Spinner/README.md +1 -1
  142. package/src/components/Spinner/Spinner.vue +10 -4
  143. package/src/components/StatusIndicator/README.md +2 -2
  144. package/src/components/StatusIndicator/StatusIndicator.vue +11 -5
  145. package/src/components/Stepper/README.md +38 -0
  146. package/src/components/Stepper/Stepper.vue +104 -0
  147. package/src/components/Stepper/index.ts +1 -0
  148. package/src/components/Tabs/README.md +1 -1
  149. package/src/components/Tabs/TabTrigger.vue +5 -4
  150. package/src/components/Tabs/Tabs.vue +4 -1
  151. package/src/components/Tag/Tag.vue +45 -0
  152. package/src/components/Tag/index.ts +1 -0
  153. package/src/components/TextField/README.md +24 -6
  154. package/src/components/TextField/TextField.vue +25 -5
  155. package/src/components/TextField/TextFieldIcon.vue +19 -0
  156. package/src/components/TextStyle/README.md +1 -1
  157. package/src/components/TextStyle/TextStyle.vue +1 -1
  158. package/src/components/Toast/DismissToastAction.vue +1 -1
  159. package/src/components/Toast/README.md +1 -1
  160. package/src/components/Toggle/README.md +1 -1
  161. package/src/components/Toggle/Toggle.vue +8 -5
  162. package/src/components/Tooltip/README.md +1 -1
  163. package/src/components/Tooltip/Tooltip.vue +15 -41
  164. package/src/components/TopBar/TopBarSearch.vue +2 -2
  165. package/src/components/index.ts +68 -12
  166. package/src/components/types.ts +5 -0
  167. package/src/composables/useTheme.ts +13 -1
  168. package/src/composables/useToastNotifications.ts +1 -1
  169. package/src/composables/useUniqueId.ts +4 -3
  170. package/src/index.css +17 -13
  171. package/src/index.ts +0 -11
  172. package/dist/focus-ui.es.js +0 -33
  173. package/dist/types/components/Accordion/Accordion.vue.d.ts +0 -32
  174. package/dist/types/components/Accordion/AccordionItem.vue.d.ts +0 -2
  175. package/dist/types/components/Accordion/index.d.ts +0 -2
  176. package/dist/types/components/index.d.ts +0 -1
  177. package/dist/types/index.d.ts +0 -7
  178. package/src/components/CategoryBar/CategoryBar.vue +0 -25
  179. package/src/components/CategoryBar/CategoryBarItem.vue +0 -34
  180. package/src/components/CategoryBar/README.md +0 -17
  181. package/src/components/CategoryBar/index.ts +0 -2
  182. package/src/components/MetricCard/MetricCard.vue +0 -11
  183. package/src/components/MetricCard/MetricCardLabel.vue +0 -9
  184. package/src/components/MetricCard/MetricCardSection.vue +0 -11
  185. package/src/components/MetricCard/README.md +0 -53
  186. 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,2 +0,0 @@
1
- declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
2
- export default _default;
@@ -1,2 +0,0 @@
1
- export { default as Accordion } from './Accordion.vue';
2
- export { default as AccordionItem } from './AccordionItem.vue';
@@ -1 +0,0 @@
1
- export { Accordion, AccordionItem } from './Accordion';
@@ -1,7 +0,0 @@
1
- import { App } from 'vue';
2
- declare function install(app: App): void;
3
- declare const _default: {
4
- install: typeof install;
5
- };
6
- export default _default;
7
- export * from './components';
@@ -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,2 +0,0 @@
1
- export { default as CategoryBar } from './CategoryBar.vue';
2
- export { default as CategoryBarItem } from './CategoryBarItem.vue';
@@ -1,11 +0,0 @@
1
- <script lang="ts" setup>
2
- import { Card } from '../Card';
3
- </script>
4
-
5
- <template>
6
- <Card>
7
- <div class="divide-y">
8
- <slot />
9
- </div>
10
- </Card>
11
- </template>
@@ -1,9 +0,0 @@
1
- <script lang="ts" setup>
2
- import { TextStyle } from '../TextStyle';
3
- </script>
4
-
5
- <template>
6
- <TextStyle variant="subdued">
7
- <slot />
8
- </TextStyle>
9
- </template>
@@ -1,11 +0,0 @@
1
- <script lang="ts" setup>
2
- import { CardSection } from '../Card';
3
- </script>
4
-
5
- <template>
6
- <CardSection>
7
- <div class="space-y-8">
8
- <slot />
9
- </div>
10
- </CardSection>
11
- </template>
@@ -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>&euro; 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>&euro; 204,00</MetricCardValue>
43
- </MetricCardHeader>
44
- </MetricCardSection>
45
- <MetricCardSection>
46
- <MetricCardHeader>
47
- <MetricCardLabel>Estimated Lost Margin</MetricCardLabel>
48
- <MetricCardValue>&euro; 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';