@tombcato/smart-ticker 1.0.0

package/dist/vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.cjs","sources":["../src/components/vue/Ticker.vue"],"sourcesContent":["<template>\r\n  <div class=\"ticker\" :class=\"className\">\r\n    <div\r\n      v-for=\"(col, i) in renderedColumns\"\r\n      :key=\"i\"\r\n      class=\"ticker-column\"\r\n      :style=\"{ width: `${col.width}em` }\"\r\n    >\r\n      <div\r\n        v-for=\"charObj in col.chars\"\r\n        :key=\"charObj.key\"\r\n        class=\"ticker-char\"\r\n        :style=\"{ transform: `translateY(${charObj.offset}em)` }\"\r\n      >\r\n        {{ charObj.char === EMPTY_CHAR ? '\\u00A0' : charObj.char }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, computed, watch, onUnmounted } from 'vue';\r\nimport {\r\n    TickerCharacterList,\r\n    ScrollingDirection,\r\n    ColumnState,\r\n    EMPTY_CHAR,\r\n    computeColumnActions,\r\n    createColumn,\r\n    setTarget,\r\n    applyProgress,\r\n    easingFunctions,\r\n    ACTION_INSERT,\r\n    ACTION_SAME,\r\n} from '../../core/TickerCore';\r\n\r\n// ============================================================================\r\n// Vue Component Setup\r\n// ============================================================================\r\n\r\nconst props = defineProps({\r\n  value: { type: String, required: true },\r\n  characterLists: { type: Array as () => string[], default: () => ['0123456789'] },\r\n  duration: { type: Number, default: 500 },\r\n  direction: { type: String as () => ScrollingDirection, default: 'ANY' },\r\n  easing: { type: String, default: 'easeInOut' },\r\n  className: { type: String, default: '' },\r\n});\r\n\r\nconst columns = ref<ColumnState[]>([]);\r\nconst progress = ref(1);\r\nlet animId: number | undefined;\r\n\r\n// Initialization\r\nconst lists = computed(() => props.characterLists.map(s => new TickerCharacterList(s)));\r\nconst supported = computed(() => {\r\n    const set = new Set<string>();\r\n    lists.value.forEach(l => l.getSupportedCharacters().forEach(c => set.add(c)));\r\n    return set;\r\n});\r\n\r\n// Watch for value changes\r\nwatch(() => props.value, (newValue, oldValue) => {\r\n    if (newValue === oldValue) return;\r\n\r\n    if (animId) {\r\n        cancelAnimationFrame(animId);\r\n        animId = undefined;\r\n    }\r\n\r\n    // Update current columns with current progress if mid-animation\r\n    let currentCols = columns.value;\r\n    if (progress.value < 1 && progress.value > 0) {\r\n        currentCols = currentCols.map(c => applyProgress(c, progress.value, true).col);\r\n    }\r\n\r\n    const targetChars = newValue.split('');\r\n    const sourceChars = currentCols.map(c => c.currentChar);\r\n    const actions = computeColumnActions(sourceChars, targetChars, supported.value);\r\n\r\n    let ci = 0, ti = 0;\r\n    const result: ColumnState[] = [];\r\n    const validCols = currentCols.filter(c => c.currentWidth > 0);\r\n\r\n    for (const action of actions) {\r\n        if (action === ACTION_INSERT) {\r\n            result.push(setTarget(createColumn(), targetChars[ti++], lists.value, props.direction));\r\n        } else if (action === ACTION_SAME) {\r\n            const existing = validCols[ci++] || createColumn();\r\n            result.push(setTarget(existing, targetChars[ti++], lists.value, props.direction));\r\n        } else {\r\n            const existing = validCols[ci++] || createColumn();\r\n            result.push(setTarget(existing, EMPTY_CHAR, lists.value, props.direction));\r\n        }\r\n    }\r\n\r\n    columns.value = result;\r\n\r\n    // Start Animation\r\n    progress.value = 0;\r\n    const start = performance.now();\r\n    const dur = props.duration;\r\n    const easeFn = easingFunctions[props.easing] || easingFunctions.linear;\r\n    let lastUpdate = 0;\r\n\r\n    const animate = (now: number) => {\r\n        const linearP = Math.min((now - start) / dur, 1);\r\n        const p = easeFn(linearP);\r\n        \r\n        // Throttled update\r\n        const shouldUpdate = now - lastUpdate >= 16 || linearP >= 1;\r\n        \r\n        if (shouldUpdate) {\r\n            lastUpdate = now;\r\n            progress.value = p;\r\n        }\r\n\r\n        if (linearP < 1) {\r\n            animId = requestAnimationFrame(animate);\r\n        } else {\r\n            const final = columns.value\r\n                .map(c => applyProgress(c, 1).col)\r\n                .filter(c => c.currentWidth > 0);\r\n            columns.value = final;\r\n            progress.value = 1;\r\n            animId = undefined;\r\n        }\r\n    };\r\n    animId = requestAnimationFrame(animate);\r\n\r\n}, { immediate: true }); \r\n\r\nonUnmounted(() => {\r\n    if (animId) cancelAnimationFrame(animId);\r\n});\r\n\r\n// Derived View Data\r\nconst charHeight = 1.2;\r\n\r\nconst renderedColumns = computed(() => {\r\n    return columns.value.map(col => {\r\n        const { charIdx, delta } = applyProgress(col, progress.value);\r\n        const width = col.sourceWidth + (col.targetWidth - col.sourceWidth) * progress.value;\r\n        if (width <= 0) return { width, chars: [] };\r\n\r\n        const chars: Array<{ key: string, char: string, offset: number }> = [];\r\n        const list = col.charList || [];\r\n        const deltaEm = delta * charHeight;\r\n\r\n        // Helper to add char\r\n        const add = (idx: number, offsetMod: number, keyPrefix: string) => {\r\n             if (idx >= 0 && idx < list.length) {\r\n                chars.push({\r\n                    key: `${keyPrefix}-${idx}`,\r\n                    char: list[idx],\r\n                    offset: deltaEm + offsetMod\r\n                });\r\n            }\r\n        };\r\n\r\n        add(charIdx, 0, 'c');\r\n        add(charIdx + 1, -charHeight, 'n');\r\n        add(charIdx - 1, charHeight, 'p');\r\n\r\n        return { width, chars };\r\n    }).filter(c => c.width > 0);\r\n});\r\n\r\n</script>\r\n\r\n<style scoped>\r\n.ticker {\r\n    display: inline-flex;\r\n    overflow: hidden;\r\n    font-family: 'JetBrains Mono', monospace;\r\n    font-weight: 600;\r\n    line-height: 1.2;\r\n}\r\n\r\n.ticker-column {\r\n    display: inline-block;\r\n    height: 1.2em;\r\n    overflow: hidden;\r\n    position: relative;\r\n    clip-path: inset(0);\r\n}\r\n\r\n.ticker-char {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    height: 1.2em;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    white-space: pre;\r\n}\r\n</style>\r\n"],"names":["ref","computed","TickerCharacterList","watch","applyProgress","computeColumnActions","ACTION_INSERT","setTarget","createColumn","ACTION_SAME","EMPTY_CHAR","easingFunctions","onUnmounted","_createElementBlock","_normalizeClass","_openBlock","_Fragment","_renderList","_normalizeStyle","_toDisplayString","_unref"],"mappings":";;;;AAyIA,MAAM,aAAa;;;;;;;;;;;;AAjGnB,UAAM,QAAQ;AASd,UAAM,UAAUA,IAAAA,IAAmB,EAAE;AACrC,UAAM,WAAWA,IAAAA,IAAI,CAAC;AACtB,QAAI;AAGJ,UAAM,QAAQC,IAAAA,SAAS,MAAM,MAAM,eAAe,IAAI,CAAA,MAAK,IAAIC,+BAAoB,CAAC,CAAC,CAAC;AACtF,UAAM,YAAYD,IAAAA,SAAS,MAAM;AAC7B,YAAM,0BAAU,IAAA;AAChB,YAAM,MAAM,QAAQ,CAAA,MAAK,EAAE,uBAAA,EAAyB,QAAQ,CAAA,MAAK,IAAI,IAAI,CAAC,CAAC,CAAC;AAC5E,aAAO;AAAA,IACX,CAAC;AAGDE,QAAAA,MAAM,MAAM,MAAM,OAAO,CAAC,UAAU,aAAa;AAC7C,UAAI,aAAa,SAAU;AAE3B,UAAI,QAAQ;AACR,6BAAqB,MAAM;AAC3B,iBAAS;AAAA,MACb;AAGA,UAAI,cAAc,QAAQ;AAC1B,UAAI,SAAS,QAAQ,KAAK,SAAS,QAAQ,GAAG;AAC1C,sBAAc,YAAY,IAAI,CAAA,MAAKC,WAAAA,cAAc,GAAG,SAAS,OAAO,IAAI,EAAE,GAAG;AAAA,MACjF;AAEA,YAAM,cAAc,SAAS,MAAM,EAAE;AACrC,YAAM,cAAc,YAAY,IAAI,CAAA,MAAK,EAAE,WAAW;AACtD,YAAM,UAAUC,WAAAA,qBAAqB,aAAa,aAAa,UAAU,KAAK;AAE9E,UAAI,KAAK,GAAG,KAAK;AACjB,YAAM,SAAwB,CAAA;AAC9B,YAAM,YAAY,YAAY,OAAO,CAAA,MAAK,EAAE,eAAe,CAAC;AAE5D,iBAAW,UAAU,SAAS;AAC1B,YAAI,WAAWC,WAAAA,eAAe;AAC1B,iBAAO,KAAKC,qBAAUC,WAAAA,aAAA,GAAgB,YAAY,IAAI,GAAG,MAAM,OAAO,MAAM,SAAS,CAAC;AAAA,QAC1F,WAAW,WAAWC,wBAAa;AAC/B,gBAAM,WAAW,UAAU,IAAI,KAAKD,WAAAA,aAAA;AACpC,iBAAO,KAAKD,qBAAU,UAAU,YAAY,IAAI,GAAG,MAAM,OAAO,MAAM,SAAS,CAAC;AAAA,QACpF,OAAO;AACH,gBAAM,WAAW,UAAU,IAAI,KAAKC,WAAAA,aAAA;AACpC,iBAAO,KAAKD,WAAAA,UAAU,UAAUG,WAAAA,YAAY,MAAM,OAAO,MAAM,SAAS,CAAC;AAAA,QAC7E;AAAA,MACJ;AAEA,cAAQ,QAAQ;AAGhB,eAAS,QAAQ;AACjB,YAAM,QAAQ,YAAY,IAAA;AAC1B,YAAM,MAAM,MAAM;AAClB,YAAM,SAASC,WAAAA,gBAAgB,MAAM,MAAM,KAAKA,WAAAA,gBAAgB;AAChE,UAAI,aAAa;AAEjB,YAAM,UAAU,CAAC,QAAgB;AAC7B,cAAM,UAAU,KAAK,KAAK,MAAM,SAAS,KAAK,CAAC;AAC/C,cAAM,IAAI,OAAO,OAAO;AAGxB,cAAM,eAAe,MAAM,cAAc,MAAM,WAAW;AAE1D,YAAI,cAAc;AACd,uBAAa;AACb,mBAAS,QAAQ;AAAA,QACrB;AAEA,YAAI,UAAU,GAAG;AACb,mBAAS,sBAAsB,OAAO;AAAA,QAC1C,OAAO;AACH,gBAAM,QAAQ,QAAQ,MACjB,IAAI,OAAKP,WAAAA,cAAc,GAAG,CAAC,EAAE,GAAG,EAChC,OAAO,CAAA,MAAK,EAAE,eAAe,CAAC;AACnC,kBAAQ,QAAQ;AAChB,mBAAS,QAAQ;AACjB,mBAAS;AAAA,QACb;AAAA,MACJ;AACA,eAAS,sBAAsB,OAAO;AAAA,IAE1C,GAAG,EAAE,WAAW,MAAM;AAEtBQ,QAAAA,YAAY,MAAM;AACd,UAAI,6BAA6B,MAAM;AAAA,IAC3C,CAAC;AAKD,UAAM,kBAAkBX,IAAAA,SAAS,MAAM;AACnC,aAAO,QAAQ,MAAM,IAAI,CAAA,QAAO;AAC5B,cAAM,EAAE,SAAS,MAAA,IAAUG,WAAAA,cAAc,KAAK,SAAS,KAAK;AAC5D,cAAM,QAAQ,IAAI,eAAe,IAAI,cAAc,IAAI,eAAe,SAAS;AAC/E,YAAI,SAAS,EAAG,QAAO,EAAE,OAAO,OAAO,CAAA,EAAC;AAExC,cAAM,QAA8D,CAAA;AACpE,cAAM,OAAO,IAAI,YAAY,CAAA;AAC7B,cAAM,UAAU,QAAQ;AAGxB,cAAM,MAAM,CAAC,KAAa,WAAmB,cAAsB;AAC9D,cAAI,OAAO,KAAK,MAAM,KAAK,QAAQ;AAChC,kBAAM,KAAK;AAAA,cACP,KAAK,GAAG,SAAS,IAAI,GAAG;AAAA,cACxB,MAAM,KAAK,GAAG;AAAA,cACd,QAAQ,UAAU;AAAA,YAAA,CACrB;AAAA,UACL;AAAA,QACJ;AAEA,YAAI,SAAS,GAAG,GAAG;AACnB,YAAI,UAAU,GAAG,CAAC,YAAY,GAAG;AACjC,YAAI,UAAU,GAAG,YAAY,GAAG;AAEhC,eAAO,EAAE,OAAO,MAAA;AAAA,MACpB,CAAC,EAAE,OAAO,CAAA,MAAK,EAAE,QAAQ,CAAC;AAAA,IAC9B,CAAC;;8BArKCS,IAAAA,mBAgBM,OAAA;AAAA,QAhBD,OAAKC,IAAAA,eAAA,CAAC,UAAiB,QAAA,SAAS,CAAA;AAAA,MAAA;SACnCC,IAAAA,UAAA,IAAA,GAAAF,IAAAA,mBAcMG,cAAA,MAAAC,IAAAA,WAbe,gBAAA,OAAe,CAA1B,KAAK,MAAC;kCADhBJ,IAAAA,mBAcM,OAAA;AAAA,YAZH,KAAK;AAAA,YACN,OAAM;AAAA,YACL,OAAKK,IAAAA,eAAA,EAAA,OAAA,GAAc,IAAI,KAAK,MAAA;AAAA,UAAA;aAE7BH,cAAA,IAAA,GAAAF,IAAAA,mBAOMG,IAAAA,UAAA,MAAAC,IAAAA,WANc,IAAI,QAAf,YAAO;sCADhBJ,IAAAA,mBAOM,OAAA;AAAA,gBALH,KAAK,QAAQ;AAAA,gBACd,OAAM;AAAA,gBACL,OAAKK,IAAAA,eAAA,EAAA,WAAA,cAA6B,QAAQ,MAAM,OAAA;AAAA,cAAA,GAE9CC,oBAAA,QAAQ,SAASC,mCAAU,MAAc,QAAQ,IAAI,GAAA,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue.d.ts

@@ -0,0 +1,122 @@
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PublicProps } from 'vue';
+
+export declare const ACTION_DELETE = 2;
+
+export declare const ACTION_INSERT = 1;
+
+export declare const ACTION_SAME = 0;
+
+export declare function applyProgress(col: ColumnState, progress: number, forceUpdate?: boolean): {
+    col: ColumnState;
+    charIdx: number;
+    delta: number;
+};
+
+export declare interface ColumnState {
+    currentChar: string;
+    targetChar: string;
+    charList: string[] | null;
+    startIndex: number;
+    endIndex: number;
+    sourceWidth: number;
+    currentWidth: number;
+    targetWidth: number;
+    directionAdj: number;
+    prevDelta: number;
+    currDelta: number;
+}
+
+export declare function computeColumnActions(source: string[], target: string[], supported: Set<string>): number[];
+
+export declare function createColumn(): ColumnState;
+
+export declare const easingFunctions: Record<string, (t: number) => number>;
+
+export declare const EMPTY_CHAR = "\0";
+
+export declare type ScrollingDirection = 'ANY' | 'UP' | 'DOWN';
+
+export declare function setTarget(col: ColumnState, target: string, lists: TickerCharacterList[], dir: ScrollingDirection): ColumnState;
+
+export declare const Ticker: DefineComponent<ExtractPropTypes<    {
+value: {
+type: StringConstructor;
+required: true;
+};
+characterLists: {
+type: () => string[];
+default: () => string[];
+};
+duration: {
+type: NumberConstructor;
+default: number;
+};
+direction: {
+type: () => ScrollingDirection;
+default: string;
+};
+easing: {
+type: StringConstructor;
+default: string;
+};
+className: {
+type: StringConstructor;
+default: string;
+};
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
+value: {
+type: StringConstructor;
+required: true;
+};
+characterLists: {
+type: () => string[];
+default: () => string[];
+};
+duration: {
+type: NumberConstructor;
+default: number;
+};
+direction: {
+type: () => ScrollingDirection;
+default: string;
+};
+easing: {
+type: StringConstructor;
+default: string;
+};
+className: {
+type: StringConstructor;
+default: string;
+};
+}>> & Readonly<{}>, {
+characterLists: string[];
+duration: number;
+direction: ScrollingDirection;
+easing: string;
+className: string;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+export declare class TickerCharacterList {
+    private numOriginalCharacters;
+    private characterList;
+    private characterIndicesMap;
+    constructor(characterList: string);
+    getCharacterIndices(start: string, end: string, direction: ScrollingDirection): {
+        startIndex: number;
+        endIndex: number;
+    } | null;
+    getSupportedCharacters(): Set<string>;
+    getCharacterList(): string[];
+    private getIndexOfChar;
+}
+
+export declare const TickerUtils: {
+    provideNumberList: () => string;
+    provideAlphabeticalList: () => string;
+};
+
+export { }

package/dist/vue.js

@@ -0,0 +1,149 @@
+import { defineComponent, ref, computed, watch, onUnmounted, createElementBlock, openBlock, normalizeClass, Fragment, renderList, normalizeStyle, toDisplayString, unref } from "vue";
+import { a as TickerCharacterList, b as applyProgress, c as computeColumnActions, A as ACTION_INSERT, s as setTarget, d as createColumn, e as ACTION_SAME, E as EMPTY_CHAR, f as easingFunctions } from "./TickerCore-DDdYkrsq.js";
+import { g, T } from "./TickerCore-DDdYkrsq.js";
+const charHeight = 1.2;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Ticker",
+  props: {
+    value: { type: String, required: true },
+    characterLists: { type: Array, default: () => ["0123456789"] },
+    duration: { type: Number, default: 500 },
+    direction: { type: String, default: "ANY" },
+    easing: { type: String, default: "easeInOut" },
+    className: { type: String, default: "" }
+  },
+  setup(__props) {
+    const props = __props;
+    const columns = ref([]);
+    const progress = ref(1);
+    let animId;
+    const lists = computed(() => props.characterLists.map((s) => new TickerCharacterList(s)));
+    const supported = computed(() => {
+      const set = /* @__PURE__ */ new Set();
+      lists.value.forEach((l) => l.getSupportedCharacters().forEach((c) => set.add(c)));
+      return set;
+    });
+    watch(() => props.value, (newValue, oldValue) => {
+      if (newValue === oldValue) return;
+      if (animId) {
+        cancelAnimationFrame(animId);
+        animId = void 0;
+      }
+      let currentCols = columns.value;
+      if (progress.value < 1 && progress.value > 0) {
+        currentCols = currentCols.map((c) => applyProgress(c, progress.value, true).col);
+      }
+      const targetChars = newValue.split("");
+      const sourceChars = currentCols.map((c) => c.currentChar);
+      const actions = computeColumnActions(sourceChars, targetChars, supported.value);
+      let ci = 0, ti = 0;
+      const result = [];
+      const validCols = currentCols.filter((c) => c.currentWidth > 0);
+      for (const action of actions) {
+        if (action === ACTION_INSERT) {
+          result.push(setTarget(createColumn(), targetChars[ti++], lists.value, props.direction));
+        } else if (action === ACTION_SAME) {
+          const existing = validCols[ci++] || createColumn();
+          result.push(setTarget(existing, targetChars[ti++], lists.value, props.direction));
+        } else {
+          const existing = validCols[ci++] || createColumn();
+          result.push(setTarget(existing, EMPTY_CHAR, lists.value, props.direction));
+        }
+      }
+      columns.value = result;
+      progress.value = 0;
+      const start = performance.now();
+      const dur = props.duration;
+      const easeFn = easingFunctions[props.easing] || easingFunctions.linear;
+      let lastUpdate = 0;
+      const animate = (now) => {
+        const linearP = Math.min((now - start) / dur, 1);
+        const p = easeFn(linearP);
+        const shouldUpdate = now - lastUpdate >= 16 || linearP >= 1;
+        if (shouldUpdate) {
+          lastUpdate = now;
+          progress.value = p;
+        }
+        if (linearP < 1) {
+          animId = requestAnimationFrame(animate);
+        } else {
+          const final = columns.value.map((c) => applyProgress(c, 1).col).filter((c) => c.currentWidth > 0);
+          columns.value = final;
+          progress.value = 1;
+          animId = void 0;
+        }
+      };
+      animId = requestAnimationFrame(animate);
+    }, { immediate: true });
+    onUnmounted(() => {
+      if (animId) cancelAnimationFrame(animId);
+    });
+    const renderedColumns = computed(() => {
+      return columns.value.map((col) => {
+        const { charIdx, delta } = applyProgress(col, progress.value);
+        const width = col.sourceWidth + (col.targetWidth - col.sourceWidth) * progress.value;
+        if (width <= 0) return { width, chars: [] };
+        const chars = [];
+        const list = col.charList || [];
+        const deltaEm = delta * charHeight;
+        const add = (idx, offsetMod, keyPrefix) => {
+          if (idx >= 0 && idx < list.length) {
+            chars.push({
+              key: `${keyPrefix}-${idx}`,
+              char: list[idx],
+              offset: deltaEm + offsetMod
+            });
+          }
+        };
+        add(charIdx, 0, "c");
+        add(charIdx + 1, -charHeight, "n");
+        add(charIdx - 1, charHeight, "p");
+        return { width, chars };
+      }).filter((c) => c.width > 0);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["ticker", __props.className])
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(renderedColumns.value, (col, i) => {
+          return openBlock(), createElementBlock("div", {
+            key: i,
+            class: "ticker-column",
+            style: normalizeStyle({ width: `${col.width}em` })
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(col.chars, (charObj) => {
+              return openBlock(), createElementBlock("div", {
+                key: charObj.key,
+                class: "ticker-char",
+                style: normalizeStyle({ transform: `translateY(${charObj.offset}em)` })
+              }, toDisplayString(charObj.char === unref(EMPTY_CHAR) ? " " : charObj.char), 5);
+            }), 128))
+          ], 4);
+        }), 128))
+      ], 2);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const Ticker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d7db53e5"]]);
+export {
+  g as ACTION_DELETE,
+  ACTION_INSERT,
+  ACTION_SAME,
+  EMPTY_CHAR,
+  Ticker,
+  TickerCharacterList,
+  T as TickerUtils,
+  applyProgress,
+  computeColumnActions,
+  createColumn,
+  easingFunctions,
+  setTarget
+};
+//# sourceMappingURL=vue.js.map

package/dist/vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.js","sources":["../src/components/vue/Ticker.vue"],"sourcesContent":["<template>\r\n  <div class=\"ticker\" :class=\"className\">\r\n    <div\r\n      v-for=\"(col, i) in renderedColumns\"\r\n      :key=\"i\"\r\n      class=\"ticker-column\"\r\n      :style=\"{ width: `${col.width}em` }\"\r\n    >\r\n      <div\r\n        v-for=\"charObj in col.chars\"\r\n        :key=\"charObj.key\"\r\n        class=\"ticker-char\"\r\n        :style=\"{ transform: `translateY(${charObj.offset}em)` }\"\r\n      >\r\n        {{ charObj.char === EMPTY_CHAR ? '\\u00A0' : charObj.char }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, computed, watch, onUnmounted } from 'vue';\r\nimport {\r\n    TickerCharacterList,\r\n    ScrollingDirection,\r\n    ColumnState,\r\n    EMPTY_CHAR,\r\n    computeColumnActions,\r\n    createColumn,\r\n    setTarget,\r\n    applyProgress,\r\n    easingFunctions,\r\n    ACTION_INSERT,\r\n    ACTION_SAME,\r\n} from '../../core/TickerCore';\r\n\r\n// ============================================================================\r\n// Vue Component Setup\r\n// ============================================================================\r\n\r\nconst props = defineProps({\r\n  value: { type: String, required: true },\r\n  characterLists: { type: Array as () => string[], default: () => ['0123456789'] },\r\n  duration: { type: Number, default: 500 },\r\n  direction: { type: String as () => ScrollingDirection, default: 'ANY' },\r\n  easing: { type: String, default: 'easeInOut' },\r\n  className: { type: String, default: '' },\r\n});\r\n\r\nconst columns = ref<ColumnState[]>([]);\r\nconst progress = ref(1);\r\nlet animId: number | undefined;\r\n\r\n// Initialization\r\nconst lists = computed(() => props.characterLists.map(s => new TickerCharacterList(s)));\r\nconst supported = computed(() => {\r\n    const set = new Set<string>();\r\n    lists.value.forEach(l => l.getSupportedCharacters().forEach(c => set.add(c)));\r\n    return set;\r\n});\r\n\r\n// Watch for value changes\r\nwatch(() => props.value, (newValue, oldValue) => {\r\n    if (newValue === oldValue) return;\r\n\r\n    if (animId) {\r\n        cancelAnimationFrame(animId);\r\n        animId = undefined;\r\n    }\r\n\r\n    // Update current columns with current progress if mid-animation\r\n    let currentCols = columns.value;\r\n    if (progress.value < 1 && progress.value > 0) {\r\n        currentCols = currentCols.map(c => applyProgress(c, progress.value, true).col);\r\n    }\r\n\r\n    const targetChars = newValue.split('');\r\n    const sourceChars = currentCols.map(c => c.currentChar);\r\n    const actions = computeColumnActions(sourceChars, targetChars, supported.value);\r\n\r\n    let ci = 0, ti = 0;\r\n    const result: ColumnState[] = [];\r\n    const validCols = currentCols.filter(c => c.currentWidth > 0);\r\n\r\n    for (const action of actions) {\r\n        if (action === ACTION_INSERT) {\r\n            result.push(setTarget(createColumn(), targetChars[ti++], lists.value, props.direction));\r\n        } else if (action === ACTION_SAME) {\r\n            const existing = validCols[ci++] || createColumn();\r\n            result.push(setTarget(existing, targetChars[ti++], lists.value, props.direction));\r\n        } else {\r\n            const existing = validCols[ci++] || createColumn();\r\n            result.push(setTarget(existing, EMPTY_CHAR, lists.value, props.direction));\r\n        }\r\n    }\r\n\r\n    columns.value = result;\r\n\r\n    // Start Animation\r\n    progress.value = 0;\r\n    const start = performance.now();\r\n    const dur = props.duration;\r\n    const easeFn = easingFunctions[props.easing] || easingFunctions.linear;\r\n    let lastUpdate = 0;\r\n\r\n    const animate = (now: number) => {\r\n        const linearP = Math.min((now - start) / dur, 1);\r\n        const p = easeFn(linearP);\r\n        \r\n        // Throttled update\r\n        const shouldUpdate = now - lastUpdate >= 16 || linearP >= 1;\r\n        \r\n        if (shouldUpdate) {\r\n            lastUpdate = now;\r\n            progress.value = p;\r\n        }\r\n\r\n        if (linearP < 1) {\r\n            animId = requestAnimationFrame(animate);\r\n        } else {\r\n            const final = columns.value\r\n                .map(c => applyProgress(c, 1).col)\r\n                .filter(c => c.currentWidth > 0);\r\n            columns.value = final;\r\n            progress.value = 1;\r\n            animId = undefined;\r\n        }\r\n    };\r\n    animId = requestAnimationFrame(animate);\r\n\r\n}, { immediate: true }); \r\n\r\nonUnmounted(() => {\r\n    if (animId) cancelAnimationFrame(animId);\r\n});\r\n\r\n// Derived View Data\r\nconst charHeight = 1.2;\r\n\r\nconst renderedColumns = computed(() => {\r\n    return columns.value.map(col => {\r\n        const { charIdx, delta } = applyProgress(col, progress.value);\r\n        const width = col.sourceWidth + (col.targetWidth - col.sourceWidth) * progress.value;\r\n        if (width <= 0) return { width, chars: [] };\r\n\r\n        const chars: Array<{ key: string, char: string, offset: number }> = [];\r\n        const list = col.charList || [];\r\n        const deltaEm = delta * charHeight;\r\n\r\n        // Helper to add char\r\n        const add = (idx: number, offsetMod: number, keyPrefix: string) => {\r\n             if (idx >= 0 && idx < list.length) {\r\n                chars.push({\r\n                    key: `${keyPrefix}-${idx}`,\r\n                    char: list[idx],\r\n                    offset: deltaEm + offsetMod\r\n                });\r\n            }\r\n        };\r\n\r\n        add(charIdx, 0, 'c');\r\n        add(charIdx + 1, -charHeight, 'n');\r\n        add(charIdx - 1, charHeight, 'p');\r\n\r\n        return { width, chars };\r\n    }).filter(c => c.width > 0);\r\n});\r\n\r\n</script>\r\n\r\n<style scoped>\r\n.ticker {\r\n    display: inline-flex;\r\n    overflow: hidden;\r\n    font-family: 'JetBrains Mono', monospace;\r\n    font-weight: 600;\r\n    line-height: 1.2;\r\n}\r\n\r\n.ticker-column {\r\n    display: inline-block;\r\n    height: 1.2em;\r\n    overflow: hidden;\r\n    position: relative;\r\n    clip-path: inset(0);\r\n}\r\n\r\n.ticker-char {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    height: 1.2em;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    white-space: pre;\r\n}\r\n</style>\r\n"],"names":["_createElementBlock","_normalizeClass","_openBlock","_Fragment","_renderList","_normalizeStyle","_toDisplayString","_unref"],"mappings":"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"}

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@tombcato/smart-ticker",
+  "version": "1.0.0",
+  "description": "Smart text animation component with diff-based character scrollin",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./vue": {
+      "import": "./dist/vue.js",
+      "require": "./dist/vue.cjs",
+      "types": "./dist/vue.d.ts"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:lib": "vite build --config vite.lib.config.ts",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "keywords": [
+    "ticker",
+    "animation",
+    "react",
+    "vue",
+    "text-animation",
+    "counter",
+    "odometer",
+    "flip-clock"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tombcato/smart-ticker"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0",
+    "vue": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.3",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.9.1"
+  }
+}