@odoo/o-spreadsheet 17.2.0-alpha.2 → 17.2.0-alpha.4

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 17.2.0-alpha.2
- @date 2024-01-29T13:56:33.355Z
- @hash 03c1335
+ @version 17.2.0-alpha.4
+ @date 2024-02-09T13:11:01.066Z
+ @hash 1b33cf4
 -->
 <odoo>
   <t t-name="o-spreadsheet-ActionButton">
@@ -467,7 +467,7 @@
         t-on-mousedown="onMousedown"
         t-on-click="onClick"
         t-on-keyup="onKeyup"
-        t-on-paste.stop=""
+        t-on-paste="onPaste"
         t-on-compositionstart="onCompositionStart"
         t-on-compositionend="onCompositionEnd"
         t-on-dblclick="onDblClick"
@@ -565,14 +565,7 @@
       t-esc="cellReference"
     />
     <div class="o-grid-composer" t-att-style="containerStyle" t-ref="gridComposer">
-      <Composer
-        focus="props.focus"
-        inputStyle="composerStyle"
-        rect="composerState.rect"
-        delimitation="composerState.delimitation"
-        onComposerUnmounted="props.onComposerUnmounted"
-        onComposerContentFocused="props.onComposerContentFocused"
-      />
+      <Composer t-props="composerProps"/>
     </div>
   </t>
 
@@ -581,11 +574,7 @@
       class="o-topbar-composer bg-white user-select-text"
       t-on-click.stop=""
       t-att-style="containerStyle">
-      <Composer
-        focus="props.focus"
-        inputStyle="composerStyle"
-        onComposerContentFocused="props.onComposerContentFocused"
-      />
+      <Composer focus="focus" inputStyle="composerStyle" onComposerContentFocused.bind="onFocus"/>
     </div>
   </t>
 
@@ -604,7 +593,6 @@
         />
         <canvas t-ref="canvas"/>
         <GridPopover
-          hoveredCell="hoveredCell"
           gridRect="getGridRect()"
           onMouseWheel.bind="onMouseWheel"
           onClosePopover.bind="onClosePopover"
@@ -953,9 +941,10 @@
     <div
       class="o-grid w-100 h-100"
       tabindex="-1"
-      t-on-click="focus"
+      t-on-click="focusDefaultElement"
       t-on-keydown="onKeydown"
       t-on-wheel="onMouseWheel"
+      t-on-contextmenu="onInputContextMenu"
       t-ref="grid">
       <GridOverlay
         onCellClicked.bind="onCellClicked"
@@ -965,27 +954,10 @@
         onGridResized.bind="onGridResized"
         onGridMoved.bind="moveCanvas"
         gridOverlayDimensions="gridOverlayDimensions"
-        onFigureDeleted.bind="focus"
+        onFigureDeleted.bind="focusDefaultElement"
       />
       <HeadersOverlay onOpenContextMenu="(type, x, y) => this.toggleContextMenu(type, x, y)"/>
-
-      <t t-if="env.model.getters.getEditionMode() !== 'inactive'">
-        <GridComposer
-          onComposerUnmounted="() => this.focus()"
-          onComposerContentFocused="props.onComposerContentFocused"
-          focus="props.focusComposer"
-          gridDims="env.model.getters.getSheetViewDimensionWithHeaders()"
-        />
-      </t>
-      <t else="1">
-        <input
-          class="position-absolute"
-          style="z-index:-1000;"
-          t-on-input="onInput"
-          t-on-contextmenu="onInputContextMenu"
-          t-ref="hiddenInput"
-        />
-      </t>
+      <GridComposer gridDims="env.model.getters.getSheetViewDimensionWithHeaders()"/>
       <canvas t-ref="canvas"/>
       <t
         t-foreach="env.model.getters.getClientsToDisplay()"
@@ -1001,7 +973,6 @@
       </t>
       <GridPopover
         t-if="!menuState.isOpen"
-        hoveredCell="hoveredCell"
         gridRect="getGridRect()"
         onMouseWheel.bind="onMouseWheel"
         onClosePopover.bind="onClosePopover"
@@ -1009,8 +980,9 @@
       <t t-if="env.model.getters.isGridSelectionActive()">
         <Autofill position="getAutofillPosition()" isVisible="isAutofillVisible"/>
       </t>
-      <t t-foreach="env.model.getters.getHighlights()" t-as="highlight" t-key="highlight_index">
-        <t t-if="highlight.sheetId === env.model.getters.getActiveSheetId()">
+      <t t-foreach="highlights" t-as="highlight" t-key="highlight_index">
+        <t
+          t-if="highlight.interactive and highlight.sheetId === env.model.getters.getActiveSheetId()">
           <Highlight zone="highlight.zone" color="highlight.color"/>
         </t>
       </t>
@@ -1065,7 +1037,7 @@
       t-att-style="style"
       t-on-mousedown="onMouseDown"
       t-on-dblclick.self="onDoubleClick"
-      t-on-contextmenu="onContextMenu">
+      t-on-contextmenu.stop.prevent="onContextMenu">
       <FiguresContainer onFigureDeleted="props.onFigureDeleted"/>
       <DataValidationOverlay/>
       <GridAddRowsFooter
@@ -2450,8 +2422,9 @@ https://fontawesome.com/license -->
             <div
               t-att-title="getName(menuItem)"
               t-att-data-name="menuItem.id"
-              t-on-click="(ev) => this.onClickMenu(menuItem, menuItem_index, ev)"
-              t-on-mouseover="(ev) => this.onMouseOver(menuItem, menuItem_index, ev)"
+              t-on-click="(ev) => this.onClickMenu(menuItem, ev)"
+              t-on-mouseenter="(ev) => this.onMouseEnter(menuItem, ev)"
+              t-on-mouseleave="(ev) => this.onMouseLeave(menuItem)"
               class="o-menu-item d-flex align-items-center"
               t-att-class="{ 'o-menu-root': isMenuRoot, 'disabled': !isMenuEnabled, 'o-menu-item-active': isParentMenu(subMenu, menuItem)}"
               t-att-style="getColor(menuItem)">
@@ -2604,12 +2577,12 @@ https://fontawesome.com/license -->
         />
       </Section>
       <ChartDataSeries
-        ranges="() => this.getDataSeriesRanges()"
+        ranges="this.getDataSeriesRanges()"
         onSelectionChanged="(ranges) => this.onDataSeriesRangesChanged(ranges)"
         onSelectionConfirmed="() => this.onDataSeriesConfirmed()"
       />
       <ChartLabelRange
-        range="() => this.getLabelRange()"
+        range="this.getLabelRange()"
         isInvalid="isLabelInvalid"
         onSelectionChanged="(ranges) => this.onLabelRangeChanged(ranges)"
         onSelectionConfirmed="() => this.onLabelRangeConfirmed()"
@@ -2683,7 +2656,7 @@ https://fontawesome.com/license -->
     <Section class="'o-data-series'">
       <t t-set-slot="title" t-esc="title"/>
       <SelectionInput
-        ranges="() => props.ranges()"
+        ranges="props.ranges"
         required="true"
         hasSingleRange="props.hasSingleRange"
         onSelectionChanged="(ranges) => props.onSelectionChanged(ranges)"
@@ -2702,7 +2675,7 @@ https://fontawesome.com/license -->
     <Section class="'o-data-labels'">
       <t t-set-slot="title" t-esc="props.title"/>
       <SelectionInput
-        ranges="() => [props.range()]"
+        ranges="[props.range]"
         isInvalid="props.isInvalid"
         hasSingleRange="true"
         required="props.required"
@@ -2737,7 +2710,7 @@ https://fontawesome.com/license -->
   <t t-name="o-spreadsheet-GaugeChartConfigPanel">
     <div>
       <ChartDataSeries
-        ranges="() => [this.getDataRange()]"
+        ranges="[this.getDataRange()]"
         onSelectionChanged="(ranges) => this.onDataRangeChanged(ranges)"
         onSelectionConfirmed="() => this.updateDataRange()"
         hasSingleRange="true"
@@ -2876,12 +2849,12 @@ https://fontawesome.com/license -->
   <t t-name="o-spreadsheet-LineBarPieConfigPanel">
     <div>
       <ChartDataSeries
-        ranges="() => this.getDataSeriesRanges()"
+        ranges="this.getDataSeriesRanges()"
         onSelectionChanged="(ranges) => this.onDataSeriesRangesChanged(ranges)"
         onSelectionConfirmed="() => this.onDataSeriesConfirmed()"
       />
       <ChartLabelRange
-        range="() => this.getLabelRange()"
+        range="this.getLabelRange()"
         isInvalid="isLabelInvalid"
         onSelectionChanged="(ranges) => this.onLabelRangeChanged(ranges)"
         onSelectionConfirmed="() => this.onLabelRangeConfirmed()"
@@ -2940,12 +2913,12 @@ https://fontawesome.com/license -->
         />
       </Section>
       <ChartDataSeries
-        ranges="() => this.getDataSeriesRanges()"
+        ranges="this.getDataSeriesRanges()"
         onSelectionChanged="(ranges) => this.onDataSeriesRangesChanged(ranges)"
         onSelectionConfirmed="() => this.onDataSeriesConfirmed()"
       />
       <ChartLabelRange
-        range="() => this.getLabelRange()"
+        range="this.getLabelRange()"
         isInvalid="isLabelInvalid"
         onSelectionChanged="(ranges) => this.onLabelRangeChanged(ranges)"
         onSelectionConfirmed="() => this.onLabelRangeConfirmed()"
@@ -3089,7 +3062,7 @@ https://fontawesome.com/license -->
       <Section class="'o-data-series'">
         <t t-set-slot="title">Key value</t>
         <SelectionInput
-          ranges="() => [this.getKeyValueRange()]"
+          ranges="[this.getKeyValueRange()]"
           isInvalid="isKeyValueInvalid"
           hasSingleRange="true"
           required="true"
@@ -3101,7 +3074,7 @@ https://fontawesome.com/license -->
         <t t-set-slot="title">Baseline configuration</t>
         <div class="o-section-subtitle">Baseline value</div>
         <SelectionInput
-          ranges="() => [this.getBaselineRange()]"
+          ranges="[this.getBaselineRange()]"
           isInvalid="isBaselineInvalid"
           hasSingleRange="true"
           onSelectionChanged="(ranges) => this.onBaselineRangeChanged(ranges)"
@@ -3299,7 +3272,7 @@ https://fontawesome.com/license -->
         <t t-set-slot="title">Apply to range</t>
         <div class="o-selection-cf">
           <SelectionInput
-            ranges="() => state.currentCF.ranges"
+            ranges="state.currentCF.ranges"
             class="'o-range'"
             isInvalid="isRangeValid"
             onSelectionChanged="(ranges) => this.onRangesChanged(ranges)"
@@ -3571,27 +3544,15 @@ https://fontawesome.com/license -->
     </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-call="o-spreadsheet-ConditionalFormattingPanelPreview"/>
-      </t>
-      <div
-        class="btn btn-link o-sidePanel-btn-link o-cf-add float-end"
-        t-on-click.prevent.stop="props.onAddConditionalFormat">
-        + Add another rule
-      </div>
-    </div>
-  </t>
-
-  <t t-name="o-spreadsheet-ConditionalFormattingPanelPreview">
+  <t t-name="o-spreadsheet-ConditionalFormatPreview">
+    <t t-set="cf" t-value="props.conditionalFormat"/>
     <div
-      class="o-cf-preview d-flex position-relative"
-      t-att-class="{ 'o-cf-dragging': dragAndDrop.draggedItemId === cf.id }"
-      t-att-style="getPreviewDivStyle(cf)"
+      class="o-cf-preview w-100"
+      t-ref="cfPreview"
+      t-att-class="props.class"
       t-att-data-id="cf.id"
-      t-on-click="(ev) => props.onPreviewClick(cf)"
-      t-on-mousedown="(ev) => this.onMouseDown(cf, ev)">
+      t-on-click="props.onPreviewClick"
+      t-on-mousedown="(ev) => this.onMouseDown(ev)">
       <div class="position-relative h-100 w-100 d-flex align-items-center">
         <div class="o-cf-drag-handle h-100 position-absolute d-flex align-items-center text-muted">
           <t t-call="o-spreadsheet-Icon.THIN_DRAG_HANDLE"/>
@@ -3630,6 +3591,28 @@ https://fontawesome.com/license -->
     </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">
+        <div
+          class="o-cf-preview-container d-flex position-relative"
+          t-att-style="getPreviewDivStyle(cf)">
+          <ConditionalFormatPreview
+            conditionalFormat="cf"
+            class="dragAndDrop.draggedItemId === cf.id ? 'o-cf-dragging' : ''"
+            onMouseDown="(ev) => this.onPreviewMouseDown(cf, ev)"
+            onPreviewClick="() => props.onPreviewClick(cf)"
+          />
+        </div>
+      </t>
+      <div
+        class="btn btn-link o-sidePanel-btn-link o-cf-add float-end"
+        t-on-click.prevent.stop="props.onAddConditionalFormat">
+        + Add another rule
+      </div>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-ConditionalFormattingPanel">
     <div class="o-cf h-100">
       <t t-if="state.mode === 'list'">
@@ -3832,7 +3815,7 @@ https://fontawesome.com/license -->
 
   <t t-name="o-spreadsheet-DataValidationValueInRangeCriterionForm">
     <SelectionInput
-      ranges="() => [props.criterion.values[0] || '']"
+      ranges="[props.criterion.values[0] || '']"
       onSelectionChanged="(ranges) => this.onRangeChanged(ranges[0])"
       required="true"
       hasSingleRange="true"
@@ -3852,7 +3835,7 @@ https://fontawesome.com/license -->
       <Section class="'o-dv-range'">
         <t t-set-slot="title">Apply to range</t>
         <SelectionInput
-          ranges="() => state.rule.ranges"
+          ranges="state.rule.ranges"
           onSelectionChanged="(ranges) => this.onRangesChanged(ranges)"
           required="true"
         />
@@ -3896,7 +3879,7 @@ https://fontawesome.com/license -->
   </t>
 
   <t t-name="o-spreadsheet-DataValidationPreview">
-    <div class="o-dv-preview p-3" t-on-click="props.onClick">
+    <div class="o-dv-preview p-3" 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 fw-bold text-truncate" t-esc="descriptionString"/>
@@ -3920,16 +3903,18 @@ https://fontawesome.com/license -->
             type="text"
             t-ref="searchInput"
             class="o-input o-input-with-count"
-            t-on-input="onInput"
+            t-on-input="onSearchInput"
             t-on-focus="onFocusSearch"
             t-on-keydown="onKeydownSearch"
           />
           <div class="o-input-count" t-if="hasSearchResult">
-            <t t-esc="env.model.getters.getCurrentSelectedMatchIndex()+1"/>
+            <t t-esc="store.selectedMatchIndex+1"/>
             /
-            <t t-esc="env.model.getters.getSearchMatches().length"/>
+            <t t-esc="store.searchMatches.length"/>
+          </div>
+          <div t-elif="!store.pendingSearch and store.toSearch !== ''" class="o-input-count">
+            0 / 0
           </div>
-          <div t-elif="!pendingSearch and toSearch !== ''" class="o-input-count">0 / 0</div>
         </div>
         <select
           class="o-input o-type-selector o-type-range-selector mt-3 mb-3"
@@ -3940,7 +3925,7 @@ https://fontawesome.com/license -->
         </select>
         <div t-if="searchOptions.searchScope === 'specificRange'">
           <SelectionInput
-            ranges="() => [this.dataRange]"
+            ranges="[this.dataRange]"
             onSelectionChanged="(ranges) => this.onSearchRangeChanged(ranges)"
             onSelectionConfirmed.bind="updateDataRange"
             hasSingleRange="true"
@@ -3968,7 +3953,7 @@ https://fontawesome.com/license -->
             onChange.bind="searchFormulas"
           />
         </div>
-        <div class="o-matches-count mt-4" t-if="toSearch !== ''">
+        <div class="o-matches-count mt-4" t-if="store.toSearch !== ''">
           <div t-if="searchOptions.searchScope === 'specificRange' and dataRange != ''">
             <t t-esc="specificRangeMatchesCount"/>
           </div>
@@ -3983,11 +3968,14 @@ https://fontawesome.com/license -->
       <div class="o-sidePanelButtons">
         <button
           t-att-disabled="!hasSearchResult"
-          t-on-click="onSelectPreviousCell"
+          t-on-click="() => store.selectPreviousMatch()"
           class="o-button">
           Previous
         </button>
-        <button t-att-disabled="!hasSearchResult" t-on-click="onSelectNextCell" class="o-button">
+        <button
+          t-att-disabled="!hasSearchResult"
+          t-on-click="() => store.selectNextMatch()"
+          class="o-button">
           Next
         </button>
       </div>
@@ -3997,22 +3985,22 @@ https://fontawesome.com/license -->
           <input
             type="text"
             class="o-input o-input-without-count"
-            t-ref="replaceInput"
             t-on-keydown="onKeydownReplace"
+            t-model="store.toReplace"
           />
         </div>
       </Section>
 
       <div class="o-sidePanelButtons" t-if="!env.model.getters.isReadonly()">
         <button
-          t-att-disabled="env.model.getters.getCurrentSelectedMatchIndex() === null"
-          t-on-click="replace"
+          t-att-disabled="store.selectedMatchIndex === null"
+          t-on-click="() => store.replace()"
           class="o-button">
           Replace
         </button>
         <button
-          t-att-disabled="env.model.getters.getCurrentSelectedMatchIndex() === null"
-          t-on-click="replaceAll"
+          t-att-disabled="store.selectedMatchIndex === null"
+          t-on-click="() => store.replaceAll()"
           class="o-button">
           Replace all
         </button>
@@ -4212,12 +4200,7 @@ https://fontawesome.com/license -->
         <SpreadsheetDashboard/>
       </t>
       <t t-else="">
-        <TopBar
-          onClick="() => this.focusGrid()"
-          onComposerContentFocused="(selection) => this.onTopBarComposerFocused(selection)"
-          focusComposer="focusTopBarComposer"
-          dropdownMaxHeight="gridHeight"
-        />
+        <TopBar onClick="() => this.focusGrid()" dropdownMaxHeight="gridHeight"/>
         <div
           class="o-grid-container"
           t-att-class="{'o-two-columns': !sidePanel.isOpen}"
@@ -4233,10 +4216,7 @@ https://fontawesome.com/license -->
           <div class="o-group-grid overflow-hidden">
             <Grid
               sidePanelIsOpen="sidePanel.isOpen"
-              focusComposer="focusGridComposer"
               exposeFocus="(focus) => this._focusGrid = focus"
-              onComposerContentFocused="() => this.onGridComposerContentFocused()"
-              onGridComposerCellFocused="(content, selection) => this.onGridComposerCellFocused(content, selection)"
             />
           </div>
         </div>
@@ -4419,10 +4399,7 @@ https://fontawesome.com/license -->
             <ActionButton action="VIEW.createRemoveFilter" class="'o-hoverable-button'"/>
           </div>
         </div>
-        <TopBarComposer
-          focus="props.focusComposer"
-          onComposerContentFocused="props.onComposerContentFocused"
-        />
+        <TopBarComposer/>
       </div>
     </div>
     <Menu

package/package.json

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