@odoo/o-spreadsheet 19.1.0-alpha.7 → 19.1.0-alpha.9

package/dist/o_spreadsheet.xml

@@ -1,9 +1,9 @@
 <!--
  This file is generated by o-spreadsheet build tools. Do not edit it.
  @see https://github.com/odoo/o-spreadsheet
- @version 19.1.0-alpha.7
- @date 2025-10-17T11:10:28.649Z
- @hash a11279d
+ @version 19.1.0-alpha.9
+ @date 2025-10-23T11:13:50.088Z
+ @hash bd756dd
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -215,22 +215,20 @@
     </div>
   </t>
 
-  <div t-name="o-spreadsheet-TextInput" class="w-100">
+  <t t-name="o-spreadsheet-TextInput">
     <input
-      t-ref="input"
-      class="os-input w-100"
       type="text"
+      t-ref="{{refName}}"
       t-att-class="inputClass"
       t-att-id="props.id"
       t-att-placeholder="props.placeholder"
-      t-att-value="props.value"
       t-on-change="save"
       t-on-blur="save"
       t-on-pointerdown="onMouseDown"
       t-on-pointerup="onMouseUp"
       t-on-keydown="onKeyDown"
     />
-  </div>
+  </t>
 
   <t t-name="o-spreadsheet-TableStylesPopover">
     <Popover t-if="props.popoverProps" t-props="props.popoverProps">
@@ -514,12 +512,12 @@
                 value="tableConfig.numberOfHeaders > 0"
                 onChange.bind="this.updateHasHeaders"
               />
-              <input
+              <NumberInput
                 t-if="tableConfig.numberOfHeaders > 0"
-                t-att-value="tableConfig.numberOfHeaders"
-                type="number"
-                class="o-table-n-of-headers ms-2 o-input"
-                t-on-change="onChangeNumberOfHeaders"
+                value="tableConfig.numberOfHeaders"
+                class="'o-table-n-of-headers ms-2'"
+                min="0"
+                onChange.bind="onChangeNumberOfHeaders"
               />
             </div>
             <Checkbox
@@ -864,12 +862,43 @@
           <CogWheelMenu items="cogWheelMenuItems"/>
         </div>
       </t>
-      <TextInput class="'os-pivot-title'" value="name" onChange.bind="onNameChanged"/>
+      <TextInput
+        class="'os-pivot-title'"
+        value="name"
+        onChange.bind="onNameChanged"
+        selectContentOnFocus="true"
+      />
     </Section>
   </t>
 
   <t t-name="o-spreadsheet-PivotSidePanel">
-    <t t-component="sidePanelEditor" t-props="props"/>
+    <div class="d-flex flex-column h-100">
+      <div class="o-panel d-flex">
+        <div
+          class="o-sidePanel-tab o-panel-configuration d-flew flex-grow-1 text-center"
+          t-att-class="state.panel !== 'configuration' ? 'inactive' : ''"
+          t-on-click="switchPanel.bind(this, 'configuration')">
+          <i class="fa fa-sliders me-1"/>
+          Configuration
+        </div>
+        <div
+          class="o-sidePanel-tab o-panel-design d-flew flex-grow-1 text-center"
+          t-att-class="state.panel !== 'design' ? 'inactive' : ''"
+          t-on-click="switchPanel.bind(this, 'design')">
+          <i class="fa fa-paint-brush me-1"/>
+          Design
+        </div>
+      </div>
+
+      <div class="o-panel-content overflow-y-auto h-100" t-ref="panelContent">
+        <div class="h-100" t-att-class="{ 'd-none': state.panel !== 'configuration' }">
+          <t t-component="sidePanelEditor" t-props="props"/>
+        </div>
+        <div t-att-class="state.panel !== 'design' ? 'd-none' : ''">
+          <PivotDesignPanel pivotId="props.pivotId"/>
+        </div>
+      </div>
+    </div>
   </t>
 
   <t t-name="o-spreadsheet-PivotSpreadsheetSidePanel">
@@ -921,6 +950,69 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-PivotDesignPanel">
+    <Section class="'o-pivot-design'" title.translate="Display options">
+      <div>
+        <div class="container-fluid p-0 pt-2">
+          <div class="row mb-2 align-items-center">
+            <div class="col-6">Max rows:</div>
+            <div class="col-6 d-flex align-items-center">
+              <input
+                t-att-value="pivotStyle.numberOfRows ?? ''"
+                type="number"
+                class="o-pivot-n-of-rows o-input"
+                placeholder="e.g. 10"
+                t-on-change="(ev) => this.updatePivotStyleProperty('numberOfRows', ev.target.valueAsNumber)"
+              />
+            </div>
+          </div>
+          <div class="row mb-2 align-items-center">
+            <div class="col-6">Max columns:</div>
+            <div class="col-6 d-flex align-items-center">
+              <input
+                t-att-value="pivotStyle.numberOfColumns ?? ''"
+                type="number"
+                class="o-pivot-n-of-columns o-input"
+                placeholder="e.g. 5"
+                t-on-change="(ev) => this.updatePivotStyleProperty('numberOfColumns', ev.target.valueAsNumber)"
+              />
+            </div>
+          </div>
+          <div class="row mb-2 align-items-center">
+            <div class="col-6">Show totals:</div>
+            <div class="col-6 d-flex align-items-center">
+              <Checkbox
+                name="'displayTotals'"
+                value="pivotStyle.displayTotals ?? defaultStyle.displayTotals"
+                onChange="(val) => this.updatePivotStyleProperty('displayTotals', val)"
+              />
+            </div>
+          </div>
+          <div class="row mb-2 align-items-center">
+            <div class="col-6">Show column titles:</div>
+            <div class="col-6 d-flex align-items-center">
+              <Checkbox
+                name="'displayColumnHeaders'"
+                value="pivotStyle.displayColumnHeaders ?? defaultStyle.displayColumnHeaders"
+                onChange="(val) => this.updatePivotStyleProperty('displayColumnHeaders', val)"
+              />
+            </div>
+          </div>
+          <div class="row mb-2 align-items-center">
+            <div class="col-6">Show measure titles:</div>
+            <div class="col-6 d-flex align-items-center">
+              <Checkbox
+                name="'displayMeasuresRow'"
+                value="pivotStyle.displayMeasuresRow ?? defaultStyle.displayMeasuresRow"
+                onChange="(val) => this.updatePivotStyleProperty('displayMeasuresRow', val)"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Section>
+  </t>
+
   <t t-name="o-spreadsheet-PivotMeasureDisplayPanel">
     <Section title.translate="Show measure as:">
       <select
@@ -1226,6 +1318,7 @@
             value="props.dimension.displayName"
             onChange.bind="updateName"
             class="'o-fw-bold'"
+            selectContentOnFocus="true"
           />
           <span t-else="1" class="o-fw-bold" t-esc="props.dimension.displayName"/>
         </div>
@@ -1310,6 +1403,7 @@
               <TextInput
                 value="group.name"
                 onChange="(newName) => this.onRenameGroup(group_index, newName)"
+                selectContentOnFocus="true"
               />
               <i
                 class="o-button-icon ps-3 fa fa-trash"
@@ -2822,19 +2916,19 @@
 
   <t t-name="o-spreadsheet-ChartPanel">
     <div class="o-chart d-flex flex-column h-100" t-if="chartId">
-      <div class="o-panel">
+      <div class="o-panel d-flex">
         <div
-          class="o-panel-element o-panel-configuration"
+          class="o-sidePanel-tab o-panel-configuration d-flew flex-grow-1 text-center"
           t-att-class="store.panel !== 'configuration' ? 'inactive' : ''"
           t-on-click="switchPanel.bind(this, 'configuration')">
-          <i class="fa fa-sliders"/>
+          <i class="fa fa-sliders me-1"/>
           Configuration
         </div>
         <div
-          class="o-panel-element o-panel-design"
+          class="o-sidePanel-tab o-panel-design d-flew flex-grow-1 text-center"
           t-att-class="store.panel !== 'design' ? 'inactive' : ''"
           t-on-click="switchPanel.bind(this, 'design')">
-          <i class="fa fa-paint-brush"/>
+          <i class="fa fa-paint-brush me-1"/>
           Design
         </div>
       </div>
@@ -3821,11 +3915,11 @@
                 </div>
                 <div class="w-50 ms-3" t-if="trendType === 'trailingMovingAverage'">
                   <span class="o-section-subtitle">Window</span>
-                  <input
-                    t-att-value="trend.window || this.defaultWindowSize"
-                    type="number"
-                    class="w-100 o-input trend-window-input"
-                    t-on-change="(ev) => this.onChangeMovingAverageWindow(index, ev)"
+                  <NumberInput
+                    value="trend.window || this.defaultWindowSize"
+                    class="'w-100 trend-window-input'"
+                    min="2"
+                    onChange="(value) => this.onChangeMovingAverageWindow(index, value)"
                   />
                 </div>
                 <div class="w-50 ms-3" t-if="trendType === 'polynomial'">
@@ -3898,13 +3992,12 @@
   <t t-name="o-spreadsheet.PieHoleSize">
     <Section class="'pt-0'" title.translate="Center radius">
       <div class="d-flex flex-row">
-        <input
-          t-att-value="props.value"
-          type="number"
-          class="o-input o-pie-hole-size-input"
+        <NumberInput
+          value="props.value"
+          class="'o-pie-hole-size-input'"
           min="0"
           max="95"
-          t-on-change="(ev) => debouncedOnChange(ev.target.value)"
+          onChange.bind="onChange"
         />
         %
       </div>
@@ -4051,12 +4144,11 @@
 
   <t t-name="o-spreadsheet.ChartTitle">
     <Section class="'o-chart-title'" title="props.name">
-      <input
-        type="text"
-        class="o-input"
-        t-att-value="props.title"
-        t-on-change="updateTitle"
-        t-att-placeholder="props.placeholder"
+      <TextInput
+        value="props.title"
+        onChange.bind="updateTitle"
+        placeholder="props.placeholder"
+        alwaysShowBorder="true"
       />
       <TextStyler
         style="props.style"
@@ -4126,6 +4218,7 @@
           onChange.bind="updateTitleText"
           placeholder.translate="Add a Title"
           alwaysShowBorder="true"
+          selectContentOnFocus="true"
         />
         <TextStyler
           style="title ?? {}"
@@ -4159,6 +4252,7 @@
               <TextInput
                 value="getItemTitle(item)"
                 onChange="(newName) => this.renameCarouselItem(item, newName)"
+                selectContentOnFocus="true"
               />
             </div>
             <div class="ms-auto"/>
@@ -4347,6 +4441,23 @@
     </span>
   </t>
 
+  <t t-name="o-spreadsheet-NumberInput">
+    <input
+      type="number"
+      t-ref="{{refName}}"
+      t-att-class="inputClass"
+      t-att-id="props.id"
+      t-att-placeholder="props.placeholder"
+      t-on-change="save"
+      t-on-blur="save"
+      t-on-pointerdown="onMouseDown"
+      t-on-pointerup="onMouseUp"
+      t-on-keydown="onKeyDown"
+      t-att-min="props.min"
+      t-att-max="props.max"
+    />
+  </t>
+
   <t t-name="o-spreadsheet-Menu-Popover">
     <Popover t-if="props.menuItems" t-props="popoverProps">
       <div t-ref="menu" class="o-menu-wrapper" t-on-mouseover="() => this.onMouseOverMainMenu()">
@@ -6110,7 +6221,6 @@
           t-on-wheel.prevent.stop=""
           t-on-click.stop="props.onFocusInput"
           t-on-focus.stop="onInputFocused"
-          t-att-value="props.currentFontSize"
           t-on-change="setSizeFromInput"
           t-ref="inputFontSize"
         />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/o-spreadsheet",
-  "version": "19.1.0-alpha.7",
+  "version": "19.1.0-alpha.9",
   "description": "A spreadsheet component",
   "type": "module",
   "main": "dist/o-spreadsheet.cjs.js",