vccs 0.0.1 → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Rick-hup
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/animation/Animate.d.ts

@@ -0,0 +1,72 @@
+import { PropType } from 'vue';
+import { AnimationOptions } from 'motion-v';
+declare const Animate: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    isActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    transition: {
+        type: PropType<AnimationOptions>;
+        default: any;
+    };
+    onAnimationStart: {
+        type: PropType<() => void>;
+        default: any;
+    };
+    onAnimationEnd: {
+        type: PropType<() => void>;
+        default: any;
+    };
+    onUpdate: {
+        type: PropType<(latest: any) => void>;
+        default: any;
+    };
+    from: {
+        type: NumberConstructor;
+        default: number;
+    };
+    to: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>[], {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    isActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    transition: {
+        type: PropType<AnimationOptions>;
+        default: any;
+    };
+    onAnimationStart: {
+        type: PropType<() => void>;
+        default: any;
+    };
+    onAnimationEnd: {
+        type: PropType<() => void>;
+        default: any;
+    };
+    onUpdate: {
+        type: PropType<(latest: any) => void>;
+        default: any;
+    };
+    from: {
+        type: NumberConstructor;
+        default: number;
+    };
+    to: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    from: number;
+    to: number;
+    onUpdate: (latest: any) => void;
+    transition: AnimationOptions;
+    onAnimationStart: () => void;
+    onAnimationEnd: () => void;
+    isActive: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { Animate };

package/dist/cartesian/GraphicalItemClipPath.d.ts

@@ -0,0 +1,31 @@
+import { PropType } from 'vue';
+export declare const GraphicalItemClipPath: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    xAxisId: {
+        type: PropType<string | number>;
+        default: number;
+    };
+    yAxisId: {
+        type: PropType<string | number>;
+        default: number;
+    };
+    clipPathId: {
+        type: PropType<string>;
+        required: true;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    xAxisId: {
+        type: PropType<string | number>;
+        default: number;
+    };
+    yAxisId: {
+        type: PropType<string | number>;
+        default: number;
+    };
+    clipPathId: {
+        type: PropType<string>;
+        required: true;
+    };
+}>> & Readonly<{}>, {
+    yAxisId: string | number;
+    xAxisId: string | number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/cartesian/area/ActivePoints.d.ts

@@ -0,0 +1,77 @@
+import { PropType, SlotsType, VNode } from 'vue';
+import { DataKey, VuePropsToType } from '../../types';
+import { Point } from '../../shape/Curve';
+export interface PointType {
+    readonly x: number;
+    readonly y: number;
+    readonly value?: any;
+    readonly payload?: any;
+}
+declare const ActivePointsVueProps: {
+    points: {
+        type: PropType<ReadonlyArray<Point>>;
+        required: boolean;
+    };
+    mainColor: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    itemDataKey: {
+        type: PropType<DataKey<any>>;
+        required: boolean;
+    };
+    activeDot: {
+        type: PropType<any>;
+        required: boolean;
+    };
+};
+export type ActivePointsProps = VuePropsToType<typeof ActivePointsVueProps>;
+export type ActivePointSlotProps = ActivePointsProps & {
+    'cx': number;
+    'cy': number;
+    'r': 4;
+    'fill': string;
+    'stroke-width': number;
+    'stroke': string;
+    'payload': any;
+    'value': PointType;
+};
+export type ActivePointsSlots = {
+    activeDot?: (props: ActivePointSlotProps) => VNode;
+};
+export declare const ActivePoints: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    points: {
+        type: PropType<ReadonlyArray<Point>>;
+        required: boolean;
+    };
+    mainColor: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    itemDataKey: {
+        type: PropType<DataKey<any>>;
+        required: boolean;
+    };
+    activeDot: {
+        type: PropType<any>;
+        required: boolean;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    points: {
+        type: PropType<ReadonlyArray<Point>>;
+        required: boolean;
+    };
+    mainColor: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    itemDataKey: {
+        type: PropType<DataKey<any>>;
+        required: boolean;
+    };
+    activeDot: {
+        type: PropType<any>;
+        required: boolean;
+    };
+}>> & Readonly<{}>, {}, SlotsType<ActivePointsSlots>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export {};

package/dist/cartesian/area/Area.d.ts

@@ -0,0 +1,17 @@
+import { AreaDotSlotProps, AreaPropsWithSVG } from './type';
+import { ActivePointsSlots } from './ActivePoints';
+export type AreaSlots = ActivePointsSlots & {
+    dot?: (props: AreaDotSlotProps) => any;
+};
+declare const _Area: import('vue').DefineComponent<AreaPropsWithSVG, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AreaPropsWithSVG> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+/**
+ * Type-safe Area component with slot types preserved in .d.ts output.
+ * The `new () => { $slots }` pattern ensures Volar picks up slot types
+ * even when consuming from compiled declarations.
+ */
+export declare const Area: typeof _Area & {
+    new (): {
+        $slots: AreaSlots;
+    };
+};
+export {};

package/dist/cartesian/area/ClipRect.d.ts

@@ -0,0 +1 @@
+export declare const ClipRect: import('vue').DefineComponent<{}, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/cartesian/area/RenderArea.d.ts

@@ -0,0 +1,16 @@
+import { PropType } from 'vue';
+import { Point } from '../../shape/Curve';
+export declare const Dots: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    points: {
+        type: PropType<ReadonlyArray<Point>>;
+        default: () => any[];
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    points: {
+        type: PropType<ReadonlyArray<Point>>;
+        default: () => any[];
+    };
+}>> & Readonly<{}>, {
+    points: readonly Point[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const StaticArea: import('vue').DefineComponent<{}, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/cartesian/area/__stories__/config.d.ts

@@ -0,0 +1,31 @@
+export type PageDataType = {
+    name: string;
+    uv: number;
+    pv: number;
+    amt: number;
+};
+export declare const rangeData: {
+    day: string;
+    temperature: number[];
+}[];
+declare const pageData: PageDataType[];
+export declare const pageDataWithNegativeNumbers: PageDataType[];
+declare const numberData: {
+    name: string;
+    uv: number;
+    pv: number;
+}[];
+declare const subjectData: {
+    subject: string;
+    A: number;
+    B: number;
+    fullMark: number;
+}[];
+declare const pageDataWithFillColor: {
+    name: string;
+    uv: number;
+    pv: number;
+    amt: number;
+    fill: string;
+}[];
+export { pageData, numberData, subjectData, pageDataWithFillColor };

package/dist/cartesian/area/hooks/useArea.d.ts

@@ -0,0 +1,27 @@
+import { AreaDotSlotProps, AreaProps } from '../type';
+import { InjectionKey, Ref, SVGAttributes, ShallowRef } from 'vue';
+import { AreaPointItem, ComputedArea } from '../../../state/selectors/areaSelectors';
+export interface AreaContext {
+    clipPathId: Ref<string>;
+    layout: Ref<'horizontal' | 'vertical' | 'centric' | 'radial'>;
+    points: Ref<ReadonlyArray<AreaPointItem> | undefined>;
+    props: AreaProps;
+    attrs: SVGAttributes;
+    dot: any;
+    clipDot: boolean;
+    dotSize: number;
+    dotSlot?: (props: AreaDotSlotProps) => any;
+    areaData: Readonly<ShallowRef<ComputedArea | undefined>>;
+    isAnimating: Ref<boolean>;
+    isClipRectAnimating: Ref<boolean>;
+}
+export declare const AreaContextKey: InjectionKey<AreaContext>;
+export declare function provideAreaContext(context: AreaContext): void;
+export declare function useAreaContext(): AreaContext;
+export declare function useArea(props: AreaProps, attrs?: SVGAttributes, dotSlot?: (props: AreaDotSlotProps) => any): {
+    shouldRender: import('vue').ComputedRef<boolean>;
+    areaData: Readonly<ShallowRef<ComputedArea>>;
+    points: Ref<readonly AreaPointItem[], readonly AreaPointItem[]>;
+    clipPathId: import('vue').ComputedRef<string>;
+    shouldShowAnimation: import('vue').ComputedRef<boolean>;
+};

package/dist/cartesian/area/index.d.ts

@@ -0,0 +1,2 @@
+export type { AreaProps, AreaDotSlotProps } from './type';
+export * from './Area';

package/dist/cartesian/area/type.d.ts

@@ -0,0 +1,173 @@
+import { ChartData } from '../../state/chartDataSlice';
+import { DataKey, TooltipType, VuePropsToType, WithSVGProps } from '../../types';
+import { AnimationOptions } from 'motion-v';
+import { BaseValue } from '../../types/area';
+import { AxisId } from '../../types/axis';
+import { LegendType } from '../../types/legend';
+import { PropType } from 'vue';
+export declare const AreaVueProps: {
+    activeDot: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    baseValue: {
+        type: PropType<BaseValue>;
+        default: any;
+    };
+    connectNulls: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    data: {
+        type: PropType<ChartData>;
+        default: any;
+    };
+    dataKey: {
+        type: PropType<DataKey<any>>;
+        required: boolean;
+    };
+    dot: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fill: {
+        type: StringConstructor;
+        default: string;
+    };
+    fillOpacity: {
+        type: NumberConstructor;
+        default: number;
+    };
+    strokeWidth: {
+        type: NumberConstructor;
+    };
+    stroke: {
+        type: StringConstructor;
+        default: string;
+    };
+    hide: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isAnimationActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Label for each data point.
+     * - boolean: true for default label rendering
+     * - object: config object for label style/behavior
+     * - function: custom render function
+     * - VNode: custom Vue element
+     */
+    label: {
+        type: PropType<boolean | Record<string, any>>;
+        default: any;
+    };
+    legendType: {
+        type: PropType<LegendType>;
+        default: string;
+    };
+    onAnimationEnd: {
+        type: PropType<() => void>;
+        default: any;
+    };
+    onAnimationStart: {
+        type: PropType<() => void>;
+        default: any;
+    };
+    transition: {
+        type: PropType<AnimationOptions>;
+        default: {
+            duration: number;
+            ease: string;
+        };
+    };
+    needClip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stackId: {
+        type: PropType<string | number>;
+        default: any;
+    };
+    tooltipType: {
+        type: PropType<TooltipType>;
+        default: any;
+    };
+    unit: {
+        type: PropType<string | number>;
+        default: any;
+    };
+    xAxisId: {
+        type: PropType<AxisId>;
+        default: number;
+    };
+    yAxisId: {
+        type: PropType<AxisId>;
+        default: number;
+    };
+    activeIndex: {
+        type: NumberConstructor;
+        default: any;
+    };
+    activePoint: {
+        type: PropType<any>;
+        default: any;
+    };
+    id: {
+        type: StringConstructor;
+        default: any;
+    };
+    left: {
+        type: NumberConstructor;
+        default: number;
+    };
+    top: {
+        type: NumberConstructor;
+        default: number;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    name: {
+        type: PropType<string | number>;
+    };
+    class: {
+        type: StringConstructor;
+        default: any;
+    };
+    type: {
+        type: PropType<import('../../shape/Curve').CurveType | import('victory-vendor/d3-shape').CurveFactory>;
+    };
+    layout: {
+        type: PropType<import('../../types').LayoutType>;
+    };
+    baseLine: {
+        type: PropType<number | ReadonlyArray<import('../../shape/Curve').Point>>;
+    };
+    points: {
+        type: PropType<ReadonlyArray<import('../../shape/Curve').Point>>;
+    };
+    path: {
+        type: StringConstructor;
+    };
+};
+export type AreaProps = VuePropsToType<typeof AreaVueProps>;
+export type AreaPropsWithSVG = WithSVGProps<typeof AreaVueProps>;
+export interface AreaDotSlotProps {
+    cx: number;
+    cy: number;
+    r: number;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    fillOpacity?: number;
+    clipDot?: boolean;
+    class?: string;
+}

package/dist/cartesian/area/utils.d.ts

@@ -0,0 +1,19 @@
+import { ChartData } from '../../state/chartDataSlice';
+import { AreaSettings, ComputedArea } from '../../state/selectors/areaSelectors';
+import { BaseAxisWithScale } from '../../state/selectors/axisSelectors';
+import { TickItem } from '../../types';
+import { BaseValue } from '../../types/area';
+export declare function getBaseValue(layout: 'horizontal' | 'vertical', chartBaseValue: BaseValue | undefined, itemBaseValue: BaseValue | undefined, xAxis: BaseAxisWithScale, yAxis: BaseAxisWithScale): number;
+export declare function computeArea({ areaSettings: { connectNulls, baseValue: itemBaseValue, dataKey }, stackedData, layout, chartBaseValue, xAxis, yAxis, displayedData, dataStartIndex, xAxisTicks, yAxisTicks, bandSize, }: {
+    areaSettings: AreaSettings;
+    stackedData: number[][];
+    layout: 'horizontal' | 'vertical';
+    chartBaseValue: BaseValue | undefined;
+    xAxis: BaseAxisWithScale;
+    yAxis: BaseAxisWithScale;
+    displayedData: ChartData;
+    dataStartIndex: number;
+    xAxisTicks: TickItem[];
+    yAxisTicks: TickItem[];
+    bandSize: number;
+}): ComputedArea;

package/dist/cartesian/axis/XAxis.d.ts

@@ -0,0 +1,189 @@
+import { PropType } from 'vue';
+import { DataKey } from '../../types';
+import { AxisDomain, AxisInterval } from '../../types/axis';
+import { AxisTick, TickFormatter } from '../../types/tick';
+export declare const XAxis: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    allowDataOverflow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    allowDecimals: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    allowDuplicatedCategory: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    hide: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    mirror: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    orientation: {
+        type: StringConstructor;
+        default: import('../../state/cartesianAxisSlice').XAxisOrientation;
+    };
+    padding: {
+        type: ObjectConstructor;
+        default: import('../../state/cartesianAxisSlice').XAxisPadding;
+    };
+    reversed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    scale: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: import('../../types/scale').ScaleType | import('../../types/scale').RechartsScale;
+    };
+    tickCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    type: {
+        type: StringConstructor;
+        default: import('../../types/axis').AxisDomainType;
+    };
+    xAxisId: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    dataKey: {
+        type: PropType<DataKey<any>>;
+        default: any;
+    };
+    domain: {
+        type: PropType<AxisDomain>;
+    };
+    axisLine: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    ticks: {
+        type: PropType<AxisTick[]>;
+    };
+    interval: {
+        type: PropType<AxisInterval>;
+    };
+    unit: {
+        type: StringConstructor;
+    };
+    tickLine: {
+        type: (ObjectConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
+    tickMargin: NumberConstructor;
+    minTickGap: {
+        type: NumberConstructor;
+        default: number;
+    };
+    tickFormatter: PropType<TickFormatter>;
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    allowDataOverflow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    allowDecimals: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    allowDuplicatedCategory: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    hide: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    mirror: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    orientation: {
+        type: StringConstructor;
+        default: import('../../state/cartesianAxisSlice').XAxisOrientation;
+    };
+    padding: {
+        type: ObjectConstructor;
+        default: import('../../state/cartesianAxisSlice').XAxisPadding;
+    };
+    reversed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    scale: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: import('../../types/scale').ScaleType | import('../../types/scale').RechartsScale;
+    };
+    tickCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    type: {
+        type: StringConstructor;
+        default: import('../../types/axis').AxisDomainType;
+    };
+    xAxisId: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    dataKey: {
+        type: PropType<DataKey<any>>;
+        default: any;
+    };
+    domain: {
+        type: PropType<AxisDomain>;
+    };
+    axisLine: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    ticks: {
+        type: PropType<AxisTick[]>;
+    };
+    interval: {
+        type: PropType<AxisInterval>;
+    };
+    unit: {
+        type: StringConstructor;
+    };
+    tickLine: {
+        type: (ObjectConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
+    tickMargin: NumberConstructor;
+    minTickGap: {
+        type: NumberConstructor;
+        default: number;
+    };
+    tickFormatter: PropType<TickFormatter>;
+}>> & Readonly<{}>, {
+    height: number;
+    scale: string | Function;
+    padding: Record<string, any>;
+    xAxisId: string | number;
+    type: string;
+    dataKey: DataKey<any>;
+    orientation: string;
+    tickCount: number;
+    hide: boolean;
+    allowDuplicatedCategory: boolean;
+    allowDataOverflow: boolean;
+    reversed: boolean;
+    allowDecimals: boolean;
+    mirror: boolean;
+    minTickGap: number;
+    axisLine: boolean;
+    tickLine: boolean | Record<string, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;