on-codemerge/dist/src/plugins/ChartsPlugin/components/DataRow.cjs

A WYSIWYG editor for on-codemerge is a user-friendly interface that allows users to edit and view their code in real time, exactly as it will appear in the final product

/*! on-codemerge v1.3.1 @author Pavel Kuzmin @license MIT @homepage https://s00d.github.io/on-codemerge/ @repository git+https://github.com/s00d/on-codemerge.git Copyright (c) 2026 Pavel Kuzmin - Built on 2026-07-02T13:39:17.947Z */
"use strict";var d=Object.defineProperty;var h=(r,e,t)=>e in r?d(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t;var l=(r,e,t)=>h(r,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../utils/colors.cjs"),s=require("../../../icons/delete.svg.cjs"),x=require("../../../utils/helpers.cjs");class b{constructor(e,t,o,n,i){l(this,"element");l(this,"requiresXY");l(this,"isScatter");l(this,"onChange");l(this,"onDelete");this.element=x.createContainer(),this.requiresXY=t,this.isScatter=o,this.onChange=n,this.onDelete=i,this.initialize(e)}initialize(e){this.element.className=`grid ${this.getGridCols()} gap-2 items-center`;const t=e.color||c.getRandomColor();this.element.innerHTML=this.requiresXY?this.createXYRowContent(e,t):this.createBasicRowContent(e,t),this.setupEventListeners()}getGridCols(){return this.requiresXY?this.isScatter?"grid-cols-[1fr,80px,80px,40px]":"grid-cols-[1fr,80px,80px,80px,40px,40px]":"grid-cols-[1fr,120px,40px,40px]"}createBasicRowContent(e,t){return`
      <input type="text" class="label-input px-2 py-1 border rounded text-sm" 
             value="${e.label||""}" placeholder="Label">
      <input type="number" class="value-input px-2 py-1 border rounded text-sm" 
             value="${e.value||""}" placeholder="Value">
      <input type="color" class="color-input w-8 h-8 rounded cursor-pointer" 
             value="${t}" title="Point Color">
      <button class="delete-row-btn p-1 text-red-500 hover:text-red-700" title="Delete Point">${s.default}</button>
    `}createXYRowContent(e,t){return this.isScatter?`
        <input type="text" class="label-input px-2 py-1 border rounded text-sm" 
               value="${e.label||""}" placeholder="Label">
        <input type="number" class="x-input px-2 py-1 border rounded text-sm" 
               value="${e.x||""}" placeholder="X">
        <input type="number" class="y-input px-2 py-1 border rounded text-sm" 
               value="${e.y||""}" placeholder="Y">
        <button class="delete-row-btn p-1 text-red-500 hover:text-red-700" title="Delete Point">${s.default}</button>
      `:`
      <input type="text" class="label-input px-2 py-1 border rounded text-sm" 
             value="${e.label||""}" placeholder="Label">
      <input type="number" class="x-input px-2 py-1 border rounded text-sm" 
             value="${e.x||""}" placeholder="X">
      <input type="number" class="y-input px-2 py-1 border rounded text-sm" 
             value="${e.y||""}" placeholder="Y">
      <input type="number" class="r-input px-2 py-1 border rounded text-sm" 
             value="${e.r||"5"}" placeholder="Size" min="1" max="100">
      <input type="color" class="color-input w-8 h-8 rounded cursor-pointer" 
             value="${t}" title="Point Color">
      <button class="delete-row-btn p-1 text-red-500 hover:text-red-700" title="Delete Point">${s.default}</button>
    `}setupEventListeners(){var e;this.element.addEventListener("input",this.onChange),(e=this.element.querySelector(".delete-row-btn"))==null||e.addEventListener("click",this.onDelete)}getData(){var t,o,n,i,u,p,a;const e={label:((t=this.element.querySelector(".label-input"))==null?void 0:t.value)||""};return this.requiresXY?(e.x=parseFloat(((o=this.element.querySelector(".x-input"))==null?void 0:o.value)||"0"),e.y=parseFloat(((n=this.element.querySelector(".y-input"))==null?void 0:n.value)||"0"),this.isScatter?(e.color=c.getRandomColor(),e.r=5):(e.r=parseFloat(((i=this.element.querySelector(".r-input"))==null?void 0:i.value)||"5"),e.color=(u=this.element.querySelector(".color-input"))==null?void 0:u.value),e.value=e.y):(e.value=parseFloat(((p=this.element.querySelector(".value-input"))==null?void 0:p.value)||"0"),e.color=(a=this.element.querySelector(".color-input"))==null?void 0:a.value),e}}exports.DataRow=b;