@odoo/o-spreadsheet 19.2.0-alpha.1 → 19.2.0-alpha.2

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.2.0-alpha.1
- @date 2025-12-26T10:21:23.225Z
- @hash 3296c7e
+ @version 19.2.0-alpha.2
+ @date 2026-01-07T16:22:28.451Z
+ @hash ac2fa3e
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -1647,38 +1647,29 @@
   </t>
 
   <t t-name="o-spreadsheet-DataValidationPanel">
-    <div class="o-data-validation">
-      <t t-if="state.mode === 'list'">
-        <div class="o-dv-preview-list">
-          <t t-foreach="validationRules" t-as="rule" t-key="rule.id">
-            <DataValidationPreview
-              rule="localizeDVRule(rule)"
-              onClick="() => this.onPreviewClick(rule.id)"
-            />
-          </t>
-        </div>
-        <div class="o-dv-add o-button-link p-4 float-end" t-on-click="addDataValidationRule">
-          + Add another rule
-        </div>
-      </t>
-      <t t-else="">
-        <DataValidationEditor rule="localizeDVRule(state.activeRule)" onExit.bind="onExitEditMode"/>
+    <div class="o-dv">
+      <t t-foreach="validationRules" t-as="rule" t-key="rule.id">
+        <DataValidationPreview rule="localizeDVRule(rule)"/>
       </t>
+      <div class="o-dv-add o-button-link p-4 float-end" t-on-click="addDataValidationRule">
+        + Add another rule
+      </div>
     </div>
   </t>
 
   <t t-name="o-spreadsheet-DataValidationPreview">
-    <div class="o-dv-preview p-3 border-bottom" t-on-click="props.onClick" t-ref="dvPreview">
-      <div class="d-flex justify-content-between">
-        <div class="o-dv-container d-flex flex-column">
-          <div class="o-dv-preview-description o-fw-bold text-truncate" t-esc="descriptionString"/>
-          <div class="o-dv-preview-ranges text-truncate" t-esc="rangesString"/>
-        </div>
-        <div
-          class="o-dv-preview-delete d-flex align-items-center o-button-icon px-3"
-          t-on-click.stop="deleteDataValidation">
-          <t t-call="o-spreadsheet-Icon.TRASH_FILLED"/>
-        </div>
+    <div
+      class="o-dv-preview d-flex justify-content-between p-3 border-bottom"
+      t-on-click="onPreviewClick"
+      t-ref="dvPreview">
+      <div>
+        <div class="o-dv-preview-description o-fw-bold text-truncate" t-esc="descriptionString"/>
+        <div class="o-dv-preview-ranges text-truncate" t-esc="rangesString"/>
+      </div>
+      <div
+        class="o-dv-delete-button d-flex align-items-center o-button-icon px-3"
+        t-on-click.stop="deleteDataValidation">
+        <t t-call="o-spreadsheet-Icon.TRASH_FILLED"/>
       </div>
     </div>
   </t>
@@ -1721,7 +1712,7 @@
 
       <Section>
         <div class="o-sidePanelButtons">
-          <button t-on-click="props.onExit" class="o-dv-cancel o-button">Cancel</button>
+          <button t-on-click="onCancel" class="o-dv-cancel o-button">Cancel</button>
           <button t-on-click="onSave" class="o-dv-save o-button primary">Save</button>
         </div>
       </Section>
@@ -1801,6 +1792,26 @@
     </select>
   </t>
 
+  <t t-name="o-spreadsheet-Top10CriterionForm">
+    <div class="o-top-10-criterion d-flex flex-row align-items-center gap-2 w-100 mt-2">
+      <select class="o-top-10-select-values o-input flex-shrink-0" t-on-change="updateIsBottom">
+        <option value="top" t-att-selected="!props.criterion.isBottom">Top</option>
+        <option value="bottom" t-att-selected="props.criterion.isBottom">Bottom</option>
+      </select>
+      <CriterionInput
+        value="props.criterion.values[0]"
+        onValueChanged.bind="onValueChanged"
+        criterionType="props.criterion.type"
+        disableFormulas="true"
+        focused="props.autofocus"
+      />
+      <select class="o-top-10-select-mode o-input flex-shrink-0" t-on-change="updateIsPercent">
+        <option value="values" t-att-selected="!props.criterion.isPercent">Values</option>
+        <option value="percent" t-att-selected="props.criterion.isPercent">Percent</option>
+      </select>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-SingleInputCriterionForm">
     <CriterionInput
       value="props.criterion.values[0]"
@@ -1879,29 +1890,9 @@
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-ConditionalFormattingPanel">
-    <div class="o-cf h-100">
-      <t t-if="state.mode === 'list'">
-        <ConditionalFormatPreviewList
-          conditionalFormats="conditionalFormats"
-          onPreviewClick.bind="editConditionalFormat"
-          onAddConditionalFormat.bind="addConditionalFormat"
-        />
-      </t>
-      <t t-if="state.mode === 'edit'">
-        <ConditionalFormattingEditor
-          editedCf="editedCF"
-          onExit.bind="switchToList"
-          onCancel.bind="cancelEdition"
-          isNewCf="originalEditedCf === undefined"
-        />
-      </t>
-    </div>
-  </t>
-
   <t t-name="o-spreadsheet-ConditionalFormatPreviewList">
     <div class="o-cf-preview-list h-100 overflow-auto" t-ref="cfList">
-      <t t-foreach="props.conditionalFormats" t-as="cf" t-key="cf.id">
+      <t t-foreach="conditionalFormats" t-as="cf" t-key="cf.id">
         <div
           class="o-cf-preview-container d-flex position-relative"
           t-att-style="getPreviewDivStyle(cf)">
@@ -1909,13 +1900,12 @@
             conditionalFormat="cf"
             class="dragAndDrop.draggedItemId === cf.id ? 'o-cf-dragging' : ''"
             onMouseDown="(ev) => this.onPreviewMouseDown(cf, ev)"
-            onPreviewClick="() => props.onPreviewClick(cf)"
           />
         </div>
       </t>
       <div
         class="o-button-link p-4 o-cf-add float-end"
-        t-on-click.prevent.stop="props.onAddConditionalFormat">
+        t-on-click.prevent.stop="onAddConditionalFormat">
         + Add another rule
       </div>
     </div>
@@ -1928,8 +1918,8 @@
       t-ref="cfPreview"
       t-att-class="props.class"
       t-att-data-id="cf.id"
-      t-on-click="props.onPreviewClick"
-      t-on-pointerdown="(ev) => this.onMouseDown(ev)">
+      t-on-click="editConditionalFormat"
+      t-on-pointerdown="(ev) => props.onMouseDown(ev)">
       <div class="o-cf-drag-handle h-100 position-absolute d-flex align-items-center o-button-icon">
         <t t-call="o-spreadsheet-Icon.THIN_DRAG_HANDLE"/>
       </div>
@@ -1943,7 +1933,7 @@
       </t>
       <t t-else="">
         <div
-          t-att-style="getPreviewImageStyle(cf.rule)"
+          t-att-style="previewImageStyle"
           class="o-cf-preview-icon d-flex justify-content-around align-items-center me-3 flex-shrink-0 border">
           123
         </div>
@@ -1951,7 +1941,7 @@
       <div class="o-cf-preview-description me-3 overflow-auto">
         <div class="o-cf-preview-ruletype">
           <div class="o-cf-preview-description-rule o-fw-bold text-truncate">
-            <t t-esc="getDescription(cf)"/>
+            <t t-esc="description"/>
           </div>
         </div>
         <div class="o-cf-preview-range text-truncate" t-esc="cf.ranges"/>
@@ -1959,7 +1949,7 @@
       <div class="o-cf-delete ms-auto">
         <div
           class="o-cf-delete-button o-button-icon"
-          t-on-click.stop="(ev) => this.deleteConditionalFormat(cf, ev)"
+          t-on-click.stop="deleteConditionalFormat"
           title="Remove rule">
           <t t-call="o-spreadsheet-Icon.TRASH_FILLED"/>
         </div>
@@ -1976,7 +1966,7 @@
           t-foreach="['arrows', 'smiley', 'dots']"
           t-as="iconSet"
           t-key="iconSet"
-          t-on-click="(ev) => this.setIconSet(iconSet, ev)">
+          t-on-click="() => store.setIconSet(iconSet)">
           <div>
             <t t-call="o-spreadsheet-Icon.{{icons[iconSets[iconSet].good].template}}"/>
           </div>
@@ -1994,14 +1984,14 @@
   <t t-name="o-spreadsheet-IconSetInflexionPointRow">
     <tr>
       <td>
-        <div t-on-click.stop="(ev) => this.toggleMenu('iconSet-'+icon+'Icon', ev)">
+        <div t-on-click.stop="() => store.toggleMenu('iconSet-'+icon+'Icon')">
           <div class="o-cf-icon-button o-cf-clickable-icon me-3 border rounded">
             <t t-call="o-spreadsheet-Icon.{{icons[iconValue].template}}"/>
           </div>
         </div>
         <IconPicker
-          t-if="state.openedMenu === 'iconSet-'+icon+'Icon'"
-          onIconPicked="(i) => this.setIcon(icon, i)"
+          t-if="store.state.openedMenu === 'iconSet-'+icon+'Icon'"
+          onIconPicked="(i) => store.setIcon(icon, i)"
         />
       </td>
       <td>When value is</td>
@@ -2009,7 +1999,7 @@
         <select
           class="o-input"
           name="valueType"
-          t-on-change="(ev) => this.setInflectionOperator(inflectionPoint, ev.target.value)">
+          t-on-change="(ev) => store.setInflectionOperator(inflectionPoint, ev.target.value)">
           <option value="gt" t-att-selected="inflectionPointValue.operator === 'gt'">
             <span>&#62;</span>
           </option>
@@ -2026,7 +2016,7 @@
             class="o-input"
             t-att-class="{ 'o-invalid': isInflectionPointInvalid(inflectionPoint) }"
             t-att-value="rule[inflectionPoint].value"
-            t-on-change="(ev) => this.setInflectionValue(inflectionPoint, ev.target.value)"
+            t-on-change="(ev) => store.setInflectionValue(inflectionPoint, ev.target.value)"
           />
           <StandaloneComposer t-else="" t-props="getColorIconSetComposerProps(inflectionPoint)"/>
         </div>
@@ -2035,7 +2025,7 @@
         <select
           class="o-input"
           name="valueType"
-          t-on-change="(ev) => this.setInflectionType(inflectionPoint, ev.target.value, ev)">
+          t-on-change="(ev) => store.setInflectionType(inflectionPoint, ev.target.value)">
           <option value="number" t-att-selected="inflectionPointValue.type === 'number'">
             Number
           </option>
@@ -2077,14 +2067,14 @@
         </t>
         <tr>
           <td>
-            <div t-on-click.stop="(ev) => this.toggleMenu('iconSet-lowerIcon', ev)">
+            <div t-on-click.stop="() => store.toggleMenu('iconSet-lowerIcon')">
               <div class="o-cf-icon-button o-cf-clickable-icon me-3 border rounded">
                 <t t-call="o-spreadsheet-Icon.{{icons[rule.icons.lower].template}}"/>
               </div>
             </div>
             <IconPicker
-              t-if="state.openedMenu === 'iconSet-lowerIcon'"
-              onIconPicked="(icon) => this.setIcon('lower', icon)"
+              t-if="store.state.openedMenu === 'iconSet-lowerIcon'"
+              onIconPicked="(icon) => store.setIcon('lower', icon)"
             />
           </td>
           <td>Else</td>
@@ -2097,12 +2087,14 @@
   </t>
   <t t-name="o-spreadsheet-IconSetEditor">
     <div class="o-cf-iconset-rule">
+      <t t-set="icons" t-value="store.icons"/>
+      <t t-set="iconSets" t-value="store.iconSets"/>
       <t t-call="o-spreadsheet-IconSets"/>
       <t t-call="o-spreadsheet-IconSetInflexionPoints"/>
       <div class="d-flex flex-row">
         <div
           class="o-button-link py-1 ps-0 o-cf-iconset-reverse d-flex align-items-center"
-          t-on-click="reverseIcons">
+          t-on-click="() => store.reverseIcons()">
           <t t-call="o-spreadsheet-Icon.REFRESH"/>
           <div class="ms-1">Reverse icons</div>
         </div>
@@ -2115,17 +2107,17 @@
       <div class="o-section-subtitle">Color</div>
       <RoundColorPicker
         currentColor="colorNumberToHex(rule.color)"
-        onColorPicked.bind="updateDataBarColor"
+        onColorPicked="(color) => store.updateDataBarColor(color)"
         disableNoColor="true"
       />
       <div class="o-section-subtitle">Range of values</div>
       <SelectionInput
-        ranges="getRangeValues()"
+        ranges="store.rangeValues"
         class="'o-range'"
         isInvalid="false"
         hasSingleRange="true"
-        onSelectionChanged.bind="onDataBarRangeUpdate"
-        onSelectionConfirmed.bind="onDataBarRangeChange"
+        onSelectionChanged="(ranges) => store.onDataBarRangeUpdate(ranges)"
+        onSelectionConfirmed="() => store.onDataBarRangeChange()"
         required="false"
       />
     </div>
@@ -2140,9 +2132,9 @@
         <select
           class="o-input me-2"
           name="valueType"
-          t-on-change="onMidpointChange"
+          t-on-change="(ev) => store.onMidpointChange(ev.target.value)"
           t-att-class="{ 'o-select-with-input': threshold and threshold.type !== 'value' }"
-          t-on-click="closeMenus">
+          t-on-click="() => store.closeMenus()">
           <option value="none" t-att-selected="threshold === undefined">None</option>
           <option value="number" t-att-selected="type === 'number'">Fixed Number</option>
           <option value="percentage" t-att-selected="type === 'percentage'">Percentage</option>
@@ -2154,8 +2146,8 @@
         <select
           class="o-input me-2"
           name="valueType"
-          t-on-change="(ev) => this.updateThresholdType(thresholdType, ev.target.value)"
-          t-on-click="closeMenus"
+          t-on-change="(ev) => store.updateThresholdType(thresholdType, ev.target.value)"
+          t-on-click="() => store.closeMenus()"
           t-att-class="{ 'o-select-with-input': threshold?.type !== 'value' }">
           <option value="value" t-att-selected="threshold.type === 'value'">Cell values</option>
           <option value="number" t-att-selected="threshold.type === 'number'">Number</option>
@@ -2174,7 +2166,7 @@
           type="text"
           class="o-input"
           t-att-value="threshold.value"
-          t-on-change="(ev) => this.updateThresholdValue(thresholdType, ev.target.value)"
+          t-on-change="(ev) => store.updateThresholdValue(thresholdType, ev.target.value)"
           t-att-class="{ 'o-invalid': isValueInvalid(thresholdType), 'invisible': threshold === undefined }"
         />
         <StandaloneComposer t-else="" t-props="getColorScaleComposerProps(thresholdType)"/>
@@ -2182,7 +2174,7 @@
       <div t-attf-class="flex-shrink-0 ms-1 {{ threshold === undefined ? 'invisible' : ''}}">
         <RoundColorPicker
           currentColor="getThresholdColor(threshold)"
-          onColorPicked="(color) => this.setColorScaleColor(thresholdType, color)"
+          onColorPicked="(color) => store.setColorScaleColor(thresholdType, color)"
           title="fill_color"
           disableNoColor="true"
         />
@@ -2193,7 +2185,7 @@
   <t t-name="o-spreadsheet-ColorScaleRuleEditor">
     <div class="o-cf-color-scale-editor">
       <div class="o-section-subtitle">Preview</div>
-      <div class="o-cf-preview-display mb-4" t-attf-style="{{getColorScalePreviewStyle()}}">
+      <div class="o-cf-preview-display mb-4" t-attf-style="{{store.previewGradient}}">
         Preview text
       </div>
       <div class="o-section-subtitle">Minpoint</div>
@@ -2215,15 +2207,16 @@
   </t>
 
   <t t-name="o-spreadsheet-ConditionalFormattingEditor">
-    <div class="o-cf-ruleEditor">
+    <div class="o-cf-editor">
+      <t t-set="state" t-value="store.state"/>
       <Section class="'o-cf-range pb-0'" title.translate="Apply to range">
         <div class="o-selection-cf">
           <SelectionInput
             ranges="state.ranges"
             class="'o-range'"
-            isInvalid="isRangeValid"
-            onSelectionChanged.bind="onRangeUpdate"
-            onSelectionConfirmed.bind="onRangeConfirmed"
+            isInvalid="store.isRangeValid"
+            onSelectionChanged="(ranges) => store.onRangeUpdate(ranges)"
+            onSelectionConfirmed="() => store.onRangeConfirmed()"
             required="true"
           />
         </div>
@@ -2232,12 +2225,12 @@
         <div class="o-cf-type-selector">
           <BadgeSelection
             choices="cfTypesValues"
-            onChange.bind="changeRuleType"
+            onChange="(ruleType) => store.changeRuleType(ruleType)"
             selectedValue="state.currentCFType"
           />
         </div>
       </Section>
-      <Section class="'o-cf-editor'">
+      <Section>
         <t t-if="state.currentCFType === 'CellIsRule'" t-call="o-spreadsheet-CellIsRuleEditor">
           <t t-set="rule" t-value="state.rules.cellIs"/>
         </t>
@@ -2265,7 +2258,7 @@
         </div>
       </Section>
       <Section>
-        <ValidationMessages messages="errorMessages" msgType="'error'"/>
+        <ValidationMessages messages="store.errorMessages" msgType="'error'"/>
       </Section>
     </div>
   </t>
@@ -2286,21 +2279,22 @@
   <t t-name="o-spreadsheet-CellIsRuleEditor">
     <t t-set="fill_color">Fill Color</t>
     <t t-set="text_color">Text Color</t>
+    <t t-set="state" t-value="store.state"/>
     <div class="o-cf-cell-is-rule">
       <div class="o-section-subtitle">Format cells if...</div>
       <SelectMenu
         class="'o-cell-is-operator o-input mb-2'"
-        menuItems="cfCriterionMenuItems"
-        selectedValue="selectedCriterionName"
+        menuItems="store.cfCriterionMenuItems"
+        selectedValue="store.selectedCriterionName"
       />
 
       <t
-        t-if="criterionComponent"
-        t-component="criterionComponent"
+        t-if="store.criterionComponent"
+        t-component="store.criterionComponent"
         t-key="state.rules.cellIs.operator"
-        criterion="genericCriterion"
-        onCriterionChanged.bind="onRuleValuesChanged"
-        autofocus="this.state.hasEditedCf"
+        criterion="store.genericCriterion"
+        onCriterionChanged="(rule) => store.onRuleValuesChanged(rule)"
+        autofocus="store.state.hasEditedCf"
       />
 
       <div class="o-section-subtitle pt-3">Formatting style</div>
@@ -2313,35 +2307,35 @@
           class="o-hoverable-button o-menu-item-button"
           title="Bold"
           t-att-class="{active:rule.style.bold}"
-          t-on-click="() => this.toggleStyle('bold')">
+          t-on-click="() => store.toggleStyle('bold')">
           <t t-call="o-spreadsheet-Icon.BOLD"/>
         </div>
         <div
           class="o-hoverable-button o-menu-item-button"
           title="Italic"
           t-att-class="{active:rule.style.italic}"
-          t-on-click="() => this.toggleStyle('italic')">
+          t-on-click="() => store.toggleStyle('italic')">
           <t t-call="o-spreadsheet-Icon.ITALIC"/>
         </div>
         <div
           class="o-hoverable-button o-menu-item-button"
           title="Underline"
           t-att-class="{active:rule.style.underline}"
-          t-on-click="(ev) => this.toggleStyle('underline', ev)">
+          t-on-click="(ev) => store.toggleStyle('underline', ev)">
           <t t-call="o-spreadsheet-Icon.UNDERLINE"/>
         </div>
         <div
           class="o-hoverable-button o-menu-item-button"
           title="Strikethrough"
           t-att-class="{active:rule.style.strikethrough}"
-          t-on-click="(ev) => this.toggleStyle('strikethrough', ev)">
+          t-on-click="(ev) => store.toggleStyle('strikethrough', ev)">
           <t t-call="o-spreadsheet-Icon.STRIKE"/>
         </div>
         <ColorPickerWidget
           currentColor="rule.style.textColor || '#000000'"
-          toggleColorPicker="(ev) => this.toggleMenu('cellIsRule-textColor', ev)"
+          toggleColorPicker="() => store.toggleMenu('cellIsRule-textColor')"
           showColorPicker="state.openedMenu === 'cellIsRule-textColor'"
-          onColorPicked="(color) => this.setColor('textColor', color)"
+          onColorPicked="(color) => store.setColor('textColor', color)"
           title="text_color"
           icon="'o-spreadsheet-Icon.TEXT_COLOR'"
           class="'o-hoverable-button o-menu-item-button'"
@@ -2349,9 +2343,9 @@
         <div class="o-divider border-end"/>
         <ColorPickerWidget
           currentColor="rule.style.fillColor"
-          toggleColorPicker="(ev) => this.toggleMenu('cellIsRule-fillColor', ev)"
+          toggleColorPicker="() => store.toggleMenu('cellIsRule-fillColor')"
           showColorPicker="state.openedMenu === 'cellIsRule-fillColor'"
-          onColorPicked="(color) => this.setColor('fillColor', color)"
+          onColorPicked="(color) => store.setColor('fillColor', color)"
           title="fill_color"
           icon="'o-spreadsheet-Icon.FILL_COLOR'"
           class="'o-hoverable-button o-menu-item-button'"
@@ -6525,7 +6519,6 @@
         onGridResized.bind="onGridResized"
         onGridMoved.bind="moveCanvas"
         gridOverlayDimensions="gridOverlayDimensions"
-        getGridSize="props.getGridSize"
       />
       <HeadersOverlay onOpenContextMenu="(type, x, y) => this.toggleContextMenu(type, x, y)"/>
       <GridComposer
@@ -7108,8 +7101,7 @@
         <GridOverlay
           onGridResized.bind="onGridResized"
           onGridMoved.bind="moveCanvas"
-          gridOverlayDimensions="gridOverlayDimensions"
-          getGridSize="props.getGridSize">
+          gridOverlayDimensions="gridOverlayDimensions">
           <div
             t-foreach="getClickableCells()"
             t-as="clickableCell"

package/package.json

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