@odoo/o-spreadsheet 17.2.0-alpha.1 → 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.1
- @date 2024-01-17T10:28:01.208Z
- @hash 296f467
+ @version 17.2.0-alpha.4
+ @date 2024-02-09T13:11:01.066Z
+ @hash 1b33cf4
 -->
 <odoo>
   <t t-name="o-spreadsheet-ActionButton">
@@ -276,7 +276,7 @@
           t-on-dblclick="() => this.onDblClick()"
           t-on-focusout="() => this.onFocusOut()"
           t-on-keydown="(ev) => this.onKeyDown(ev)"
-          t-att-contenteditable="state.isEditing.toString()"
+          t-att-contenteditable="state.isEditing ? 'plaintext-only': 'false'"
         />
         <span class="o-sheet-icon ms-1" t-on-click.stop="(ev) => this.onIconClick(ev)">
           <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
@@ -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
@@ -1544,7 +1516,7 @@
     <svg class="o-icon">
       <path
         fill="currentColor"
-        d="M16 .5A1.5 1.5 0 0 1 17.5 2v14a1.5 1.5 0 0 1-1.5 1.5H2A1.5 1.5 0 0 1 .5 16V2A1.5 1.5 0 0 1 2 .5h14V2h-3.5v14H16V2H7v14h4V2H2v14h3.5V2M6 1l5 4v2L6 3m0 2 5 4v2L6 7m0 2 5 4v2l-5-4m0 2 5 4H"
+        d="M16 .5A1.5 1.5 0 0 1 17.5 2v14a1.5 1.5 0 0 1-1.5 1.5H2A1.5 1.5 0 0 1 .5 16V2A1.5 1.5 0 0 1 2 .5h14V2h-3.5v14H16V2H7v14h4V2H2v14h3.5V2M6 1l5 4v2L6 3m0 2 5 4v2L6 7m0 2 5 4v2l-5-4"
       />
     </svg>
   </t>
@@ -1658,6 +1630,22 @@
       />
     </svg>
   </t>
+  <t t-name="o-spreadsheet-Icon.INSERT_CHECKBOX">
+    <svg class="o-icon">
+      <path
+        fill="currentColor"
+        d="M.5 2A1.5 1.5 0 0 1 2 .5h14A1.5 1.5 0 0 1 17.5 2v14a1.5 1.5 0 0 1-1.5 1.5H2A1.5 1.5 0 0 1 .5 16V2H2v14h14V2H2m13 4-1.4-1.4L7 11.2 4.4 8.6 3 10l4 4z"
+      />
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-Icon.INSERT_DROPDOWN">
+    <svg class="o-icon">
+      <path
+        fill="currentColor"
+        d="M6 3.5a5 5.5 0 0 0 0 11h6a5 5.5 0 0 0 0-11H6V5h6a3.5 4 0 0 1 0 8H6a3.5 4 0 0 1 0-8m5 6 3-3H8"
+      />
+    </svg>
+  </t>
   <t t-name="o-spreadsheet-Icon.INSERT_SHEET">
     <svg class="o-icon" fill="currentColor">
       <path
@@ -2434,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)">
@@ -2588,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()"
@@ -2667,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)"
@@ -2686,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"
@@ -2721,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"
@@ -2860,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()"
@@ -2924,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()"
@@ -3040,12 +3029,40 @@ https://fontawesome.com/license -->
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-ScatterConfigPanel">
+    <div>
+      <ChartDataSeries
+        ranges="() => this.getDataSeriesRanges()"
+        onSelectionChanged="(ranges) => this.onDataSeriesRangesChanged(ranges)"
+        onSelectionConfirmed="() => this.onDataSeriesConfirmed()"
+      />
+      <ChartLabelRange
+        range="() => this.getLabelRange()"
+        isInvalid="isLabelInvalid"
+        onSelectionChanged="(ranges) => this.onLabelRangeChanged(ranges)"
+        onSelectionConfirmed="() => this.onLabelRangeConfirmed()"
+        options="this.getLabelRangeOptions()"
+      />
+
+      <Section class="'o-use-row-as-headers'" t-if="calculateHeaderPosition()">
+        <Checkbox
+          name="'dataSetsHaveTitle'"
+          label="dataSetsHaveTitleLabel"
+          value="props.definition.dataSetsHaveTitle"
+          onChange.bind="onUpdateDataSetsHaveTitle"
+        />
+      </Section>
+
+      <ChartErrorSection t-if="errorMessages.length" messages="errorMessages"/>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-ScorecardChartConfigPanel">
     <div>
       <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"
@@ -3057,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)"
@@ -3255,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)"
@@ -3527,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"/>
@@ -3586,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'">
@@ -3788,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"
@@ -3808,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"
         />
@@ -3852,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"/>
@@ -3876,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"
@@ -3896,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"
@@ -3924,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>
@@ -3939,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>
@@ -3953,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>
@@ -4168,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}"
@@ -4189,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>
@@ -4375,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.1",
+  "version": "17.2.0-alpha.4",
   "description": "A spreadsheet component",
   "type": "module",
   "main": "dist/o-spreadsheet.cjs.js",