@adcops/autocore-react 3.3.29 → 3.3.30

package/dist/components/ValueInput.css

@@ -0,0 +1,29 @@
+/*
+ * ValueInput sizing.
+ *
+ * Within a .p-inputgroup, PrimeReact gives .p-inputwrapper `flex: 1 1 auto`
+ * so the InputNumber stretches to fill all available space. Override that
+ * for our sized variants so only the input field is constrained — label,
+ * accept/cancel buttons keep their natural size.
+ */
+
+.value-input-field.p-inputwrapper {
+    flex: 0 0 auto;
+}
+
+.value-input-field.p-inputwrapper .p-inputtext {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.value-input-field.size-small.p-inputwrapper {
+    width: 30mm;
+}
+
+.value-input-field.size-normal.p-inputwrapper {
+    width: 55mm;
+}
+
+.value-input-field.size-large.p-inputwrapper {
+    width: 70mm;
+}

package/dist/components/ValueInput.d.ts

@@ -48,10 +48,12 @@
  */
 import React from 'react';
 import { type InputNumberProps } from 'primereact/inputnumber';
+import "./ValueInput.css";
+export type ValueInputSize = 'small' | 'normal' | 'large';
 /**
  * Properties of the ValueInput component.
  */
-interface ValueInputProps extends Omit<InputNumberProps, 'value'> {
+interface ValueInputProps extends Omit<InputNumberProps, 'value' | 'size'> {
     /**
      * The label for the ValueInput field.
      */
@@ -147,6 +149,13 @@ interface ValueInputProps extends Omit<InputNumberProps, 'value'> {
      * @param newValue New value accepted by the user.
      */
     onValueChanged?(newValue: number): void;
+    /**
+     * Width of the InputNumber field. The label addon and accept/cancel buttons
+     * keep their natural size; only the numeric input is constrained.
+     * Widths: small=30mm, normal=55mm, large=70mm.
+     * @default 'normal'
+     */
+    size?: ValueInputSize;
 }
 /**
  * A convenient field with all the usual features of inputing numbers.

package/dist/components/ValueInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ValueInput.d.ts","sourceRoot":"","sources":["../../src/components/ValueInput.tsx"],"names":[],"mappings":"AASA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAGH,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI5E;;GAEG;AACH,UAAU,eAAgB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IAE7D;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IAGnC;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAGlC;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAGlC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;IAG1C;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE5B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAG1B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE5B;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IAE1C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAE/B,uGAAuG;IACvG,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAEjC;;;OAGG;IACH,cAAc,CAAC,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3C;AAED;;;;GAIG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA2KhD,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ValueInput.d.ts","sourceRoot":"","sources":["../../src/components/ValueInput.tsx"],"names":[],"mappings":"AASA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAGH,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI5E,OAAO,kBAAkB,CAAC;AAE1B,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE1D;;GAEG;AACH,UAAU,eAAgB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,MAAM,CAAC;IAEtE;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IAGnC;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAGlC;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAGlC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;IAG1C;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE5B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAG1B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE5B;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IAE1C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAE/B,uGAAuG;IACvG,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAEjC;;;OAGG;IACH,cAAc,CAAC,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IAExC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;CACzB;AAED;;;;GAIG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA6KhD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/ValueInput.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import React,{useState,useRef,useEffect,useContext}from"react";import{InputNumber}from"primereact/inputnumber";import{EventEmitterContext}from"../core/EventEmitterContext";import{Button}from"primereact/button";export const ValueInput=({label:e="",value:t=null,min:s,max:n,minPrecision:i=0,maxPrecision:o=3,mode:a="decimal",currency:u="USD",prefix:r,suffix:l,showButtons:c=!1,step:p=1,locale:m="en-US",description:d,disabled:x=!1,dispatchTopic:f,placeholder:v,onValueChanged:b,...h})=>{const[j,C]=useState(t),[E,_]=useState(t),[S,g]=useState(t),[y,N]=useState(!1),[k,B]=useState(!1),D=useRef(null),F=useContext(EventEmitterContext);useEffect(()=>{null!==S?(_(S),g(null),B(!1)):t!==E&&(_(t),C(t),N(!1),B(!1))},[t,E]);const I=()=>{var e;y&&null!==j&&(e=j,void 0!==n&&e>n||void 0!==s&&e<s?B(!0):(_(j),N(!1),b?.(j),B(!1),f&&F.dispatch({topic:f,payload:j})))},w=()=>{y&&(C(null),_(null),N(!1),B(!1))};return _jsxs("div",{children:[_jsxs("div",{className:"p-inputgroup",children:[_jsx("span",{className:"p-inputgroup-addon",children:e}),_jsx(InputNumber,{...h,ref:D,invalid:k,min:s,max:n,minFractionDigits:i,maxFractionDigits:o,mode:a,prefix:r,suffix:l,showButtons:c,step:p,placeholder:v,value:E,onChange:e=>{return t=e.value,y||(g(E),N(!0)),void C(t);var t},locale:m,currency:u,onKeyDown:e=>{"Enter"===e.key?I():"Escape"===e.key&&w()},disabled:x}),_jsx(Button,{icon:"pi pi-check",disabled:x||!y,className:"p-button-success",onClick:()=>I(),visible:y,autoFocus:!1}),_jsx(Button,{icon:"pi pi-times",disabled:x||!y,className:"p-button-danger",onClickCapture:()=>w(),visible:y,autoFocus:!1})]}),d&&_jsx("small",{children:d})]})};export default ValueInput;
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import React,{useState,useRef,useEffect,useContext}from"react";import clsx from"clsx";import{InputNumber}from"primereact/inputnumber";import{EventEmitterContext}from"../core/EventEmitterContext";import{Button}from"primereact/button";import"./ValueInput.css";export const ValueInput=({label:e="",value:t=null,min:s,max:i,minPrecision:n=0,maxPrecision:a=3,mode:o="decimal",currency:u="USD",prefix:l,suffix:r,showButtons:c=!1,step:p=1,locale:m="en-US",description:d,disabled:x=!1,dispatchTopic:f,placeholder:v,onValueChanged:b,size:h="normal",...j})=>{const[C,E]=useState(t),[_,N]=useState(t),[S,g]=useState(t),[y,k]=useState(!1),[B,I]=useState(!1),D=useRef(null),F=useContext(EventEmitterContext);useEffect(()=>{null!==S?(N(S),g(null),I(!1)):t!==_&&(N(t),E(t),k(!1),I(!1))},[t,_]);const V=()=>{var e;y&&null!==C&&(e=C,void 0!==i&&e>i||void 0!==s&&e<s?I(!0):(N(C),k(!1),b?.(C),I(!1),f&&F.dispatch({topic:f,payload:C})))},w=()=>{y&&(E(null),N(null),k(!1),I(!1))};return _jsxs("div",{children:[_jsxs("div",{className:"p-inputgroup",children:[_jsx("span",{className:"p-inputgroup-addon",children:e}),_jsx(InputNumber,{...j,ref:D,className:clsx("value-input-field",`size-${h}`,j.className),invalid:B,min:s,max:i,minFractionDigits:n,maxFractionDigits:a,mode:o,prefix:l,suffix:r,showButtons:c,step:p,placeholder:v,value:_,onChange:e=>{return t=e.value,y||(g(_),k(!0)),void E(t);var t},locale:m,currency:u,onKeyDown:e=>{"Enter"===e.key?V():"Escape"===e.key&&w()},disabled:x}),_jsx(Button,{icon:"pi pi-check",disabled:x||!y,className:"p-button-success",onClick:()=>V(),visible:y,autoFocus:!1}),_jsx(Button,{icon:"pi pi-times",disabled:x||!y,className:"p-button-danger",onClickCapture:()=>w(),visible:y,autoFocus:!1})]}),d&&_jsx("small",{children:d})]})};export default ValueInput;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adcops/autocore-react",
-    "version": "3.3.29",
+    "version": "3.3.30",
     "description": "A React component library for industrial user interfaces.",
     "private": false,
     "type": "module",

package/src/components/ValueInput.css

@@ -0,0 +1,29 @@
+/*
+ * ValueInput sizing.
+ *
+ * Within a .p-inputgroup, PrimeReact gives .p-inputwrapper `flex: 1 1 auto`
+ * so the InputNumber stretches to fill all available space. Override that
+ * for our sized variants so only the input field is constrained — label,
+ * accept/cancel buttons keep their natural size.
+ */
+
+.value-input-field.p-inputwrapper {
+    flex: 0 0 auto;
+}
+
+.value-input-field.p-inputwrapper .p-inputtext {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.value-input-field.size-small.p-inputwrapper {
+    width: 30mm;
+}
+
+.value-input-field.size-normal.p-inputwrapper {
+    width: 55mm;
+}
+
+.value-input-field.size-large.p-inputwrapper {
+    width: 70mm;
+}

package/src/components/ValueInput.tsx

@@ -58,14 +58,19 @@
 
 
 import React, { useState, useRef, useEffect, useContext } from 'react';
+import clsx from 'clsx';
 import { InputNumber, type InputNumberProps } from 'primereact/inputnumber';
 import { EventEmitterContext } from "../core/EventEmitterContext";
 import { Button } from 'primereact/button';
 
+import "./ValueInput.css";
+
+export type ValueInputSize = 'small' | 'normal' | 'large';
+
 /**
  * Properties of the ValueInput component.
  */
-interface ValueInputProps extends Omit<InputNumberProps, 'value'>  {
+interface ValueInputProps extends Omit<InputNumberProps, 'value' | 'size'>  {
 
     /**
      * The label for the ValueInput field.
@@ -184,6 +189,14 @@ interface ValueInputProps extends Omit<InputNumberProps, 'value'>  {
      * @param newValue New value accepted by the user.
      */
     onValueChanged?(newValue: number): void;
+
+    /**
+     * Width of the InputNumber field. The label addon and accept/cancel buttons
+     * keep their natural size; only the numeric input is constrained.
+     * Widths: small=30mm, normal=55mm, large=70mm.
+     * @default 'normal'
+     */
+    size?: ValueInputSize;
 }
 
 /**
@@ -210,6 +223,7 @@ export const ValueInput: React.FC<ValueInputProps> = ({
     dispatchTopic = undefined,
     placeholder = undefined,
     onValueChanged = undefined,
+    size = 'normal',
     ...restProps
 }) => {
     const [entryValue, setEntryValue] = useState<number | null>(value);
@@ -314,6 +328,7 @@ export const ValueInput: React.FC<ValueInputProps> = ({
                 <InputNumber
                     {...restProps}
                     ref={inputRef}
+                    className={clsx('value-input-field', `size-${size}`, restProps.className)}
                     invalid={invalidValue}
                     min={min}
                     max={max}