@matta-trade/ui 0.0.0-stage → 0.2.2

package/src/calendar/CalendarCell.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { CalendarCellProps } from "reka-ui";
+import { CalendarCell, useForwardProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<CalendarCellProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <CalendarCell
+        :class="
+            cn(
+                'h-9 w-9 p-0 [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-view])]:bg-accent/50 relative text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md',
+                props.class,
+            )
+        "
+        v-bind="forwardedProps"
+    >
+        <slot />
+    </CalendarCell>
+</template>

package/src/calendar/CalendarCellTrigger.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { CalendarCellTriggerProps } from "reka-ui";
+import { CalendarCellTrigger, useForwardProps } from "reka-ui";
+import { buttonVariants } from "../button";
+import { cn } from "../lib/utils";
+
+const props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <CalendarCellTrigger
+        :class="
+            cn(
+                buttonVariants({ variant: 'ghost' }),
+                'h-9 w-9 p-0 font-normal',
+                '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+                // Selected
+                'data-[selected]:text-primary-foreground data-[selected]:hover:text-primary-foreground data-[selected]:focus:text-primary-foreground data-[selected]:bg-primary data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:focus:bg-primary',
+                // Disabled
+                'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+                // Unavailable
+                'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+                // Outside months
+                'data-[outside-view]:text-muted-foreground [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:opacity-30',
+                props.class,
+            )
+        "
+        v-bind="forwardedProps"
+    >
+        <slot />
+    </CalendarCellTrigger>
+</template>

package/src/calendar/CalendarGrid.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { CalendarGridProps } from "reka-ui";
+import { CalendarGrid, useForwardProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<CalendarGridProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <CalendarGrid :class="cn('space-y-1 w-full border-collapse', props.class)" v-bind="forwardedProps">
+        <slot />
+    </CalendarGrid>
+</template>

package/src/calendar/CalendarGridBody.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import type { CalendarGridBodyProps } from "reka-ui";
+import { CalendarGridBody } from "reka-ui";
+
+const props = defineProps<CalendarGridBodyProps>();
+</script>
+
+<template>
+    <CalendarGridBody v-bind="props">
+        <slot />
+    </CalendarGridBody>
+</template>

package/src/calendar/CalendarGridHead.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import type { CalendarGridHeadProps } from "reka-ui";
+import { CalendarGridHead } from "reka-ui";
+
+const props = defineProps<CalendarGridHeadProps>();
+</script>
+
+<template>
+    <CalendarGridHead v-bind="props">
+        <slot />
+    </CalendarGridHead>
+</template>

package/src/calendar/CalendarGridRow.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { CalendarGridRowProps } from "reka-ui";
+import { CalendarGridRow, useForwardProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <CalendarGridRow :class="cn('flex', props.class)" v-bind="forwardedProps">
+        <slot />
+    </CalendarGridRow>
+</template>

package/src/calendar/CalendarHeadCell.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { CalendarHeadCellProps } from "reka-ui";
+import { CalendarHeadCell, useForwardProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <CalendarHeadCell :class="cn('w-9 font-normal text-muted-foreground rounded-md text-[0.8rem]', props.class)" v-bind="forwardedProps">
+        <slot />
+    </CalendarHeadCell>
+</template>

package/src/calendar/CalendarHeader.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { CalendarHeaderProps } from "reka-ui";
+import { CalendarHeader, useForwardProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <CalendarHeader :class="cn('pt-1 relative flex w-full items-center justify-between', props.class)" v-bind="forwardedProps">
+        <slot />
+    </CalendarHeader>
+</template>

package/src/calendar/CalendarHeading.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { CalendarHeadingProps } from "reka-ui";
+import { CalendarHeading, useForwardProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes["class"] }>();
+
+defineSlots<{
+    default: (props: { headingValue: string }) => any;
+}>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <CalendarHeading v-slot="{ headingValue }" :class="cn('font-medium text-sm', props.class)" v-bind="forwardedProps">
+        <slot :heading-value>
+            {{ headingValue }}
+        </slot>
+    </CalendarHeading>
+</template>

package/src/calendar/CalendarNextButton.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ChevronRight } from "lucide-vue-next";
+import type { CalendarNextProps } from "reka-ui";
+import { CalendarNext, useForwardProps } from "reka-ui";
+import { buttonVariants } from "../button";
+import { cn } from "../lib/utils";
+
+const props = defineProps<CalendarNextProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <CalendarNext
+        :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 p-0 bg-transparent opacity-50 hover:opacity-100', props.class)"
+        v-bind="forwardedProps"
+    >
+        <slot>
+            <ChevronRight class="h-4 w-4" />
+        </slot>
+    </CalendarNext>
+</template>

package/src/calendar/CalendarPrevButton.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ChevronLeft } from "lucide-vue-next";
+import type { CalendarPrevProps } from "reka-ui";
+import { CalendarPrev, useForwardProps } from "reka-ui";
+import { buttonVariants } from "../button";
+import { cn } from "../lib/utils";
+
+const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <CalendarPrev
+        :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 p-0 bg-transparent opacity-50 hover:opacity-100', props.class)"
+        v-bind="forwardedProps"
+    >
+        <slot>
+            <ChevronLeft class="h-4 w-4" />
+        </slot>
+    </CalendarPrev>
+</template>

package/src/calendar/index.ts

@@ -0,0 +1,12 @@
+export { default as Calendar } from "./Calendar.vue";
+export { default as CalendarCell } from "./CalendarCell.vue";
+export { default as CalendarCellTrigger } from "./CalendarCellTrigger.vue";
+export { default as CalendarGrid } from "./CalendarGrid.vue";
+export { default as CalendarGridBody } from "./CalendarGridBody.vue";
+export { default as CalendarGridHead } from "./CalendarGridHead.vue";
+export { default as CalendarGridRow } from "./CalendarGridRow.vue";
+export { default as CalendarHeadCell } from "./CalendarHeadCell.vue";
+export { default as CalendarHeader } from "./CalendarHeader.vue";
+export { default as CalendarHeading } from "./CalendarHeading.vue";
+export { default as CalendarNextButton } from "./CalendarNextButton.vue";
+export { default as CalendarPrevButton } from "./CalendarPrevButton.vue";

package/src/card/Card.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <div :class="cn('bg-card text-card-foreground rounded-lg border shadow-sm', props.class)">
+        <slot />
+    </div>
+</template>

package/src/card/CardContent.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <div :class="cn('p-6 pt-0', props.class)">
+        <slot />
+    </div>
+</template>

package/src/card/CardDescription.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <p :class="cn('text-muted-foreground text-sm', props.class)">
+        <slot />
+    </p>
+</template>

package/src/card/CardFooter.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <div :class="cn('p-6 pt-0 flex items-center', props.class)">
+        <slot />
+    </div>
+</template>

package/src/card/CardHeader.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <div :class="cn('gap-y-1.5 p-6 flex flex-col', props.class)">
+        <slot />
+    </div>
+</template>

package/src/card/CardTitle.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <h3 :class="cn('text-2xl font-semibold tracking-tight leading-none', props.class)">
+        <slot />
+    </h3>
+</template>

package/src/card/index.ts

@@ -0,0 +1,6 @@
+export { default as Card } from "./Card.vue";
+export { default as CardContent } from "./CardContent.vue";
+export { default as CardDescription } from "./CardDescription.vue";
+export { default as CardFooter } from "./CardFooter.vue";
+export { default as CardHeader } from "./CardHeader.vue";
+export { default as CardTitle } from "./CardTitle.vue";

package/src/chart/ChartCrosshair.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ChartTooltip } from ".";
+import type { Component } from "vue";
+import { createApp } from "vue";
+import type { BulletLegendItemInterface } from "@unovis/ts";
+import { omit } from "@unovis/ts";
+import { VisCrosshair, VisTooltip } from "@unovis/vue";
+
+const props = withDefaults(
+    defineProps<{
+        colors: string[];
+        index: string;
+        items: BulletLegendItemInterface[];
+        customTooltip?: Component;
+    }>(),
+    {
+        colors: () => [],
+    },
+);
+
+// Use weakmap to store reference to each datapoint for Tooltip
+const wm = new WeakMap();
+function template(d: any) {
+    if (wm.has(d)) {
+        return wm.get(d);
+    } else {
+        const componentDiv = document.createElement("div");
+        const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {
+            const legendReference = props.items.find((i) => i.name === key);
+            return { ...legendReference, value };
+        });
+        const TooltipComponent = props.customTooltip ?? ChartTooltip;
+        createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv);
+        wm.set(d, componentDiv.innerHTML);
+        return componentDiv.innerHTML;
+    }
+}
+
+function color(d: unknown, i: number) {
+    return props.colors[i] ?? "transparent";
+}
+</script>
+
+<template>
+    <VisTooltip :horizontal-shift="20" :vertical-shift="20" />
+    <VisCrosshair :template="template" :color="color" />
+</template>

package/src/chart/ChartLegend.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { nextTick, onMounted, ref } from "vue";
+import type { BulletLegendItemInterface } from "@unovis/ts";
+import { BulletLegend } from "@unovis/ts";
+import { VisBulletLegend } from "@unovis/vue";
+import { buttonVariants } from "../button";
+
+const props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {
+    items: () => [],
+});
+
+const emits = defineEmits<{
+    legendItemClick: [d: BulletLegendItemInterface, i: number];
+    "update:items": [payload: BulletLegendItemInterface[]];
+}>();
+
+const elRef = ref<HTMLElement>();
+
+function keepStyling() {
+    const selector = `.${BulletLegend.selectors.item}`;
+    nextTick(() => {
+        const elements = elRef.value?.querySelectorAll(selector);
+        const classes = buttonVariants({ variant: "ghost", size: "sm" }).split(" ");
+        elements?.forEach((el) => el.classList.add(...classes, "!inline-flex", "!mr-2"));
+    });
+}
+
+onMounted(() => {
+    keepStyling();
+});
+
+function onLegendItemClick(d: BulletLegendItemInterface, i: number) {
+    emits("legendItemClick", d, i);
+    const isBulletActive = !props.items[i].inactive;
+    const isFilterApplied = props.items.some((i) => i.inactive);
+    if (isFilterApplied && isBulletActive) {
+        // reset filter
+        emits(
+            "update:items",
+            props.items.map((item) => ({ ...item, inactive: false })),
+        );
+    } else {
+        // apply selection, set other item as inactive
+        emits(
+            "update:items",
+            props.items.map((item) => (item.name === d.name ? { ...d, inactive: false } : { ...item, inactive: true })),
+        );
+    }
+    keepStyling();
+}
+</script>
+
+<template>
+    <div
+        ref="elRef"
+        class="w-max"
+        :style="{
+            '--vis-legend-bullet-size': '16px',
+        }"
+    >
+        <VisBulletLegend :items="items" :on-legend-item-click="onLegendItemClick" />
+    </div>
+</template>

package/src/chart/ChartSingleTooltip.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ChartTooltip } from ".";
+import type { Component } from "vue";
+import { createApp } from "vue";
+import type { BulletLegendItemInterface } from "@unovis/ts";
+import { omit } from "@unovis/ts";
+import { VisTooltip } from "@unovis/vue";
+
+const props = defineProps<{
+    selector: string;
+    index: string;
+    items?: BulletLegendItemInterface[];
+    valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string;
+    customTooltip?: Component;
+}>();
+
+// Use weakmap to store reference to each datapoint for Tooltip
+const wm = new WeakMap();
+function template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {
+    const valueFormatter = props.valueFormatter ?? ((tick: number) => `${tick}`);
+    if (props.index in d) {
+        if (wm.has(d)) {
+            return wm.get(d);
+        } else {
+            const componentDiv = document.createElement("div");
+            const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {
+                const legendReference = props.items?.find((i) => i.name === key);
+                return { ...legendReference, value: valueFormatter(value) };
+            });
+            const TooltipComponent = props.customTooltip ?? ChartTooltip;
+            createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv);
+            wm.set(d, componentDiv.innerHTML);
+            return componentDiv.innerHTML;
+        }
+    } else {
+        const data = d.data;
+
+        if (wm.has(data)) {
+            return wm.get(data);
+        } else {
+            const style = getComputedStyle(elements[i]);
+            const omittedData = [{ name: data.name, value: valueFormatter(data[props.index]), color: style.fill }];
+            const componentDiv = document.createElement("div");
+            const TooltipComponent = props.customTooltip ?? ChartTooltip;
+            createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv);
+            wm.set(d, componentDiv.innerHTML);
+            return componentDiv.innerHTML;
+        }
+    }
+}
+</script>
+
+<template>
+    <VisTooltip
+        :horizontal-shift="20"
+        :vertical-shift="20"
+        :triggers="{
+            [selector]: template,
+        }"
+    />
+</template>

package/src/chart/ChartTooltip.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { Card, CardContent, CardHeader, CardTitle } from "../card";
+
+defineProps<{
+    title?: string;
+    data: {
+        name: string;
+        color: string;
+        value: any;
+    }[];
+}>();
+</script>
+
+<template>
+    <Card class="text-sm">
+        <CardHeader v-if="title" class="p-3 border-b">
+            <CardTitle>
+                {{ title }}
+            </CardTitle>
+        </CardHeader>
+        <CardContent class="p-3 gap-1 flex min-w-[180px] flex-col">
+            <div v-for="(item, key) in data" :key="key" class="flex justify-between">
+                <div class="flex items-center">
+                    <span class="w-2.5 h-2.5 mr-2">
+                        <svg width="100%" height="100%" viewBox="0 0 30 30">
+                            <path d=" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0" :stroke="item.color" :fill="item.color" stroke-width="1" />
+                        </svg>
+                    </span>
+                    <span>{{ item.name }}</span>
+                </div>
+                <span class="font-semibold ml-4">{{ item.value }}</span>
+            </div>
+        </CardContent>
+    </Card>
+</template>

package/src/chart/index.ts

@@ -0,0 +1,18 @@
+export { default as ChartCrosshair } from "./ChartCrosshair.vue";
+export { default as ChartLegend } from "./ChartLegend.vue";
+export { default as ChartSingleTooltip } from "./ChartSingleTooltip.vue";
+export { default as ChartTooltip } from "./ChartTooltip.vue";
+
+export function defaultColors(count: number = 3) {
+    const quotient = Math.floor(count / 2);
+    const remainder = count % 2;
+
+    const primaryCount = quotient + remainder;
+    const secondaryCount = quotient;
+    return [
+        ...Array.from(new Array(primaryCount).keys()).map((i) => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),
+        ...Array.from(new Array(secondaryCount).keys()).map((i) => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),
+    ];
+}
+
+export * from "./interface";

package/src/chart/interface.ts

@@ -0,0 +1,64 @@
+import type { Spacing } from "@unovis/ts";
+
+type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>;
+
+export interface BaseChartProps<T extends Record<string, any>> {
+    /**
+     * The source data, in which each entry is a dictionary.
+     */
+    data: T[];
+    /**
+     * Select the categories from your data. Used to populate the legend and tooltip.
+     */
+    categories: KeyOf<T>[];
+    /**
+     * Sets the key to map the data to the axis.
+     */
+    index: KeyOf<T>;
+    /**
+     * Change the default colors.
+     */
+    colors?: string[];
+    /**
+     * Margin of each the container
+     */
+    margin?: Spacing;
+    /**
+     * Change the opacity of the non-selected field
+     * @default 0.2
+     */
+    filterOpacity?: number;
+    /**
+     * Function to format X label
+     */
+    xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string;
+    /**
+     * Function to format Y label
+     */
+    yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string;
+    /**
+     * Controls the visibility of the X axis.
+     * @default true
+     */
+    showXAxis?: boolean;
+    /**
+     * Controls the visibility of the Y axis.
+     * @default true
+     */
+    showYAxis?: boolean;
+    /**
+     * Controls the visibility of tooltip.
+     * @default true
+     */
+    showTooltip?: boolean;
+    /**
+     * Controls the visibility of legend.
+     * @default true
+     */
+    showLegend?: boolean;
+    /**
+     * Controls the visibility of gridline.
+     * @default true
+     */
+    showGridLine?: boolean;
+}