@returnless/focus-ui 0.0.2 → 0.0.4

package/src/components/CategoryBar/CategoryBar.vue

@@ -1,25 +0,0 @@
-<script lang="ts" setup>
-import { computed, provide, useSlots, VNode } from 'vue';
-
-const slots = useSlots();
-
-const totalCategoryBarWidth = computed((): number => {
-  if (!slots.default) {
-    return 0;
-  }
-
-  const slotValues = slots.default().map((slot: VNode) => {
-    return slot.props!.value;
-  });
-
-  return slotValues.reduce((acc: number, value: number) => acc + value, 0);
-});
-
-provide('totalCategoryBarWidth', totalCategoryBarWidth);
-</script>
-
-<template>
-  <div class="flex w-full space-x-0.5">
-    <slot />
-  </div>
-</template>

package/src/components/CategoryBar/CategoryBarItem.vue

@@ -1,34 +0,0 @@
-<script lang="ts" setup>
-import { TextStyle } from '../TextStyle';
-import { computed, CSSProperties, inject, Ref } from 'vue';
-import { TailwindColor, useTailwindColor } from '../../composables';
-
-const props = defineProps<{
-  value: number;
-  color: TailwindColor;
-}>();
-
-const totalCategoryBarWidth = inject<Ref<number>>('totalCategoryBarWidth')!;
-
-const categoryBarItemStyle = computed((): CSSProperties => {
-  return {
-    backgroundColor: useTailwindColor(props.color, '500'),
-    width: (props.value / totalCategoryBarWidth.value * 100) + '%',
-  };
-});
-</script>
-
-<template>
-  <div
-    class="space-y-2"
-    :style="{ width: categoryBarItemStyle.width }"
-  >
-    <TextStyle variant="subdued">
-      {{ value }}
-    </TextStyle>
-    <div
-      class="rounded h-2"
-      :style="{ backgroundColor: categoryBarItemStyle.backgroundColor }"
-    />
-  </div>
-</template>

package/src/components/CategoryBar/README.md

@@ -1,17 +0,0 @@
-<script lang="ts" setup>
-import { CategoryBar } from '../../src/components'; 
-import api from '../component-meta/CategoryBar.json';
-</script>
-
-# Category Bar
-
-The Category Bar component is a horizontal bar that displays a list of categories. Each category is a button that can be
-clicked to filter the data displayed in the parent component.
-
-<ComponentApi :api="api" />
-
-## Usage
-
-<ComponentWrapper>
-  <CategoryBar />
-</ComponentWrapper>

package/src/components/CategoryBar/index.ts

@@ -1,2 +0,0 @@
-export { default as CategoryBar } from './CategoryBar.vue';
-export { default as CategoryBarItem } from './CategoryBarItem.vue';

package/src/components/MetricCard/MetricCard.vue

@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-import { Card } from '../Card';
-</script>
-
-<template>
-  <Card>
-    <div class="divide-y">
-      <slot />
-    </div>
-  </Card>
-</template>

package/src/components/MetricCard/MetricCardLabel.vue

@@ -1,9 +0,0 @@
-<script lang="ts" setup>
-import { TextStyle } from '../TextStyle';
-</script>
-
-<template>
-  <TextStyle variant="subdued">
-    <slot />
-  </TextStyle>
-</template>

package/src/components/MetricCard/MetricCardSection.vue

@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-import { CardSection } from '../Card';
-</script>
-
-<template>
-  <CardSection>
-    <div class="space-y-8">
-      <slot />
-    </div>
-  </CardSection>
-</template>

package/src/components/MetricCard/README.md

@@ -1,53 +0,0 @@
-<script lang="ts" setup>
-import {
-  Badge,
-  BadgeContent,
-  BadgeIcon,
-  MetricCard,
-  MetricCardHeader,
-  MetricCardLabel,
-  MetricCardSection,
-  MetricCardValue,
-} from '../../src/components'; 
-import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/vue/16/solid';
-import api from '../component-meta/MetricCard.json'; 
-</script>
-
-# Metric Card
-
-The Metric Card component is used to display a metric value with a label and an optional icon.
-
-<ComponentApi :api="api" />
-
-## Usage
-
-<ComponentWrapper>
-  <div style="max-width: 350px;">
-    <MetricCard>
-      <MetricCardSection>
-        <MetricCardHeader>
-          <MetricCardLabel>Missed Revenue</MetricCardLabel>
-          <MetricCardValue>&euro; 325,44</MetricCardValue>
-        </MetricCardHeader>
-        <Badge color="green">
-          <BadgetContent>+ 25%</BadgetContent>
-          <BadgeIcon>
-            <ArrowTrendingUpIcon />
-          </BadgeIcon>
-        </Badge>
-      </MetricCardSection>
-      <MetricCardSection>
-        <MetricCardHeader>
-          <MetricCardLabel>Product Costs</MetricCardLabel>
-          <MetricCardValue>&euro; 204,00</MetricCardValue>
-        </MetricCardHeader>
-      </MetricCardSection>
-      <MetricCardSection>
-        <MetricCardHeader>
-          <MetricCardLabel>Estimated Lost Margin</MetricCardLabel>
-          <MetricCardValue>&euro; 121,44</MetricCardValue>
-        </MetricCardHeader>
-      </MetricCardSection>
-    </MetricCard>
-  </div>
-</ComponentWrapper>

package/src/components/MetricCard/index.ts

@@ -1,5 +0,0 @@
-export { default as MetricCard } from './MetricCard.vue';
-export { default as MetricCardHeader } from './MetricCardHeader.vue';
-export { default as MetricCardLabel } from './MetricCardLabel.vue';
-export { default as MetricCardSection } from './MetricCardSection.vue';
-export { default as MetricCardValue } from './MetricCardValue.vue';