@alekstar79/flip-combo

Vanilla TypeScript calculator + calendar + 3D flipper.

Live Demo

• No frameworks. No Vue, React, or Angular — pure DOM.
• No dependencies. Zero runtime dependencies.
• Strict TypeScript. strict: true, fully typed API.
• Easy integration. Vue 2/3, React, Svelte, vanilla — through a single HostEnvironment contract (4 adapters).

Installation

npm install @alekstar79/flip-combo

Quick start

Combo (Flipper + calc + calendar)

import {
  createFlipper,
  createCalc,
  createCalendar,
} from "@alekstar79/flip-combo";
import "@alekstar79/flip-combo/style.css";

const flipper = createFlipper({
  createFront: (opts) =>
    createCalc({
      onOff: opts.onOff,
      onFlip: opts.onFlip,
    }),
  createBack: (opts) =>
    createCalendar({
      locale: opts.locale === "en" ? "en" : "ru",
      onOff: opts.onOff,
      onFlip: opts.onFlip,
    }),
  backgroundColor: "#82b1ff",
});

flipper.mount(document.getElementById("app")!);

Calculator only

import { createCalc } from "@alekstar79/flip-combo/calc";
import "@alekstar79/flip-combo/style.css";

const calc = createCalc();
calc.mount(document.getElementById("calc-host")!);

Draggable panel

import { createCalc } from "@alekstar79/flip-combo/calc";
import "@alekstar79/flip-combo/style.css";

const calc = createCalc({
  draggable: true,
  storageKey: "my-app:calc",
});

calc.mount(document.body);

The panel appears in the center of the window and can be dragged with the mouse; the position is saved to localStorage with a 300 ms debounce. It is restored after a reload.

Calendar only

import { createCalendar } from "@alekstar79/flip-combo/calendar";
import "@alekstar79/flip-combo/style.css";

const calendar = createCalendar({
  locale: "ru",
  draggable: true,
});

calendar.mount(document.body);

What's inside

Framework integration

See INTEGRATION.md — ready-made examples for:

• Vanilla TypeScript
• Vue 2 (Options API)
• Vue 3 (Composition API)
• React (hooks)
• React + Redux / Zustand
• SSR / Next.js / Nuxt

API

createFlipper(props)

FlipperInstance methods

createCalc(props)

createCalendar(props)

State management

// Locale (passed to Calendar through host or explicitly)
flipper.setLocale("en");

// Background color (in hex format)
flipper.setBackgroundColor("#ffffff");

// Opacity (0.5..1)
flipper.setOpacity(0.85);

// Current state
flipper.getState();
// { rotated, left, top, opacity, entity }

License

MIT — see LICENSE.