OVCalculator

OVCalculator is a lightweight library for building dynamic calculators in SolidJS with runtime validation via Zod (mini). It allows you to create interfaces with sections, controls, and fields, supporting custom render functions and animations.

Installation

npm install ov-calculator

or

yarn add ov-calculator

Example Usage

import OVCalculator from 'ov-calculator'

const nodes = document.querySelectorAll('[data-ovcalc="card"]')

const calculator = new OVCalculator({
  fields: [
    {
      selector: 'price',
      render: (values, data) => data[values.section_1][values.section_2],
    },
    {
      selector: 'image',
      attribute: 'src',
      renderType: 'attribute',
      render: (values) => image[values.section_1],
    },
  ],
  sections: [
    {
      key: 'section_1',
      title: 'Section 1',
      controls: (_, data) =>
        Object.keys(data).map((value) => ({ value, label: value })),
    },
    {
      key: 'section_2',
      title: 'Section 2',
      depends: ['section_1'],
      dependsType: 'exists',
      controls: (values, data) =>
        Object.keys(data[values.section_1]).map((value) => ({
          value,
          label: value
        })),
    },
  ],
})

nodes.forEach((node) => calculator.process(node, data))

Props

CalculatorProps

Prop | Type | Required | Description --- | --- | --- | --- fields | Field[] | Yes | Array of fields for the calculator sections | Section[] | Yes | Array of sections with controls classPrefix | string | No | CSS class prefix dataPrefix | string | No | Prefix for data attributes

Field

Prop | Type | Required | Description --- | --- | --- | --- selector | string | Yes | CSS selector or @self animation | AnimationType | No | Animation type: false, 'number', or custom string render | RenderFunction | Yes | Render function (values, data) => string | number renderType | RenderType | No | 'content' (default) or 'attribute' attribute | string | No | Attribute to update if renderType='attribute' animationDuration | number | No | Animation duration in ms

Section

Prop | Type | Required | Description --- | --- | --- | --- key | string | Yes | Unique section identifier title | string | Yes | Section title controls | SectionControl[] | (values, data) => SectionControl[] | Yes | Controls for selection initialValue | string | (values) => string | No | Initial value depends | string[] | No | Keys of sections this one depends on dependsType | 'first' | 'exists' | No | Dependency type

SectionControl

Prop | Type | Required | Description --- | --- | --- | --- label | string | Yes | Control label value | string | Yes | Control value disabled | boolean | No | Disable control

Types

type AnimationType = false | 'number' | string
type RenderType = 'content' | 'attribute'
type Values = Record<string, string>
type Field = {...}
type SectionControl = {...}
type Section = {...}
type CalculatorProps = {...}

API

new OVCalculator(props: CalculatorProps)

Creates a calculator instance with the provided props.

calculator.process(node: HTMLElement, data: object)

Renders the calculator to a DOM node with the given data.

• node — container element with [data-ovcalc] attribute
• data — object containing values used in render functions

Features

• Full props validation using Zod at initialization
• Dependent sections (depends, dependsType) supported
• Animated numeric and text content updates
• Custom render functions for content and attributes
• Built with SolidJS (createSignal, For, render)