@odoo/o-spreadsheet 18.4.0-alpha.3 → 18.4.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 18.4.0-alpha.3
- @date 2025-05-13T17:55:42.200Z
- @hash 70ad365
+ @version 18.4.0-alpha.4
+ @date 2025-05-20T05:58:32.778Z
+ @hash 5c28bca
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -352,6 +352,7 @@
     <div class="o-spreadsheet h-100 w-100" t-ref="spreadsheet" t-att-style="getStyle()">
       <t t-if="env.isDashboard()">
         <SpreadsheetDashboard/>
+        <FullScreenChart/>
       </t>
       <t t-else="">
         <TopBar onClick="() => this.focusGrid()" dropdownMaxHeight="gridHeight"/>
@@ -971,6 +972,7 @@
             defaultRangeSheetId="measure.computedBy.sheetId"
             contextualAutocomplete="getMeasureAutocomplete()"
             getContextualColoredSymbolToken.bind="getColoredSymbolToken"
+            invalid="isCalculatedMeasureInvalid"
           />
         </div>
       </div>
@@ -2449,17 +2451,24 @@
         </Section>
       </t>
     </GeneralDesignEditor>
+    <ChartTitle
+      title="this.props.definition.keyDescr?.text ?? ''"
+      updateTitle="(text) => this.setKeyText(text)"
+      name.translate="Key Value Style"
+      placeholder.translate="Add a key value description"
+      updateStyle.bind="updateKeyStyle"
+      style="keyStyle"
+    />
     <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Baseline">
       <t t-set-slot="content">
-        <Section class="'pt-0'" title.translate="Baseline description">
-          <input
-            type="text"
-            t-att-value="translate(props.definition.baselineDescr)"
-            t-on-change="updateBaselineDescr"
-            class="o-input"
-            placeholder="Baseline description"
-          />
-        </Section>
+        <ChartTitle
+          title="this.props.definition.baselineDescr?.text ?? ''"
+          updateTitle="(text) => this.setBaselineText(text)"
+          name.translate="Baseline Style"
+          placeholder.translate="Add a baseline description"
+          updateStyle.bind="updateBaselineStyle"
+          style="baselineStyle"
+        />
         <Section class="'o-chart-baseline-color pt-0'" title="colorsSectionTitle">
           <div class="d-flex align-items-center mb-2">
             <RoundColorPicker
@@ -3705,7 +3714,6 @@
   </t>
 
   <t t-name="o-spreadsheet-GeneralDesignEditor">
-    <t t-set="chart_title">Chart title</t>
     <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="General">
       <t t-set-slot="content">
         <Section class="'o-chart-background-color pt-0 pb-0'" title.translate="Background color">
@@ -3717,7 +3725,8 @@
         <ChartTitle
           title="title.text"
           updateTitle.bind="updateTitle"
-          name="chart_title"
+          name.translate="Chart title"
+          placeholder.translate="Add a Title"
           updateStyle.bind="updateChartTitleStyle"
           style="title"
           defaultStyle="{align: 'left', fontSize: this.props.defaultChartTitleFontSize}"
@@ -3772,18 +3781,13 @@
   </t>
 
   <t t-name="o-spreadsheet.ChartTitle">
-    <t t-set="placeholder">Add a title</t>
-    <t t-set="title">
-      <t t-if="props.name" t-esc="props.name"/>
-      <t t-else="">Title</t>
-    </t>
-    <Section class="'o-chart-title'" title="title.toString()">
+    <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="placeholder"
+        t-att-placeholder="props.placeholder"
       />
       <TextStyler
         style="props.style"
@@ -3991,6 +3995,15 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-PivotCollapseIcon">
+    <div
+      class="o-pivot-collapse-icon o-hoverable-button d-flex align-items-center justify-content-center"
+      t-on-click="onClick">
+      <t t-if="isCollapsed" t-call="o-spreadsheet-Icon.PLUS"/>
+      <t t-else="" t-call="o-spreadsheet-Icon.MINUS"/>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-PaintFormatButton">
     <span
       class="o-menu-item-button"
@@ -5538,8 +5551,7 @@
       t-on-pointerdown="onMouseDown"
       t-on-dblclick.self="onDoubleClick"
       t-on-contextmenu.stop.prevent="onContextMenu">
-      <DataValidationOverlay/>
-      <FilterIconsOverlay/>
+      <GridCellIconOverlay/>
       <GridAddRowsFooter
         t-if="!env.model.getters.isReadonly()"
         t-key="env.model.getters.getActiveSheetId()"
@@ -5549,10 +5561,18 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-GridCellIconOverlay">
+    <t t-foreach="icons" t-as="icon" t-key="icon_index">
+      <GridCellIcon icon="icon">
+        <t t-component="icon.component" cellPosition="icon.position"/>
+      </GridCellIcon>
+    </t>
+  </t>
+
   <t t-name="o-spreadsheet-GridCellIcon">
     <div
       class="o-grid-cell-icon position-absolute overflow-hidden"
-      t-if="isPositionVisible(this.props.cellPosition)"
+      t-if="isPositionVisible(this.props.icon.position)"
       t-att-style="iconStyle">
       <t t-slot="default"/>
     </div>
@@ -5608,6 +5628,7 @@
         onInputContextMenu.bind="onInputContextMenu"
       />
       <canvas t-ref="canvas"/>
+      <t t-set="focused" t-value="focusedClients"/>
       <t
         t-foreach="env.model.getters.getClientsToDisplay()"
         t-as="client"
@@ -5617,7 +5638,7 @@
           color="client.color"
           col="client.position.col"
           row="client.position.row"
-          active="isCellHovered(client.position.col, client.position.row)"
+          active="isCellHovered(client.position.col, client.position.row) || focused.has(client.id)"
         />
       </t>
       <GridPopover
@@ -5650,6 +5671,37 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-FullScreenChart">
+    <div
+      class="position-absolute o-fullscreen-chart-overlay w-100 h-100 d-flex"
+      t-if="figureUI"
+      t-on-click="exitFullScreen">
+      <button
+        class="o-exit top-0 end-0 position-absolute o-button primary m-1"
+        t-on-click="exitFullScreen">
+        Exit fullscreen
+      </button>
+      <div class="flex-fill">
+        <div
+          class="o-fullscreen-chart o-figure position-relative"
+          tabindex="1"
+          t-ref="fullScreenChart"
+          t-on-click.stop=""
+          t-on-keydown="(ev) => this.onKeyDown(ev)">
+          <t
+            t-component="chartComponent"
+            figureUI="this.figureUI"
+            isFullScreen="true"
+            t-key="this.figureUI.id"
+          />
+          <div class="position-absolute top-0 end-0">
+            <ChartDashboardMenu figureUI="figureUI"/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-FontSizeEditor">
     <div class="o-dropdown" t-ref="FontSizeEditor">
       <div
@@ -5819,17 +5871,6 @@
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-FilterIconsOverlay">
-    <t
-      t-foreach="getFilterHeadersPositions()"
-      t-as="position"
-      t-key="'filter'+position.col + '_' + position.row">
-      <GridCellIcon cellPosition="position" horizontalAlign="'right'">
-        <FilterIcon cellPosition="position"/>
-      </GridCellIcon>
-    </t>
-  </t>
-
   <t t-name="o-spreadsheet-FilterIcon">
     <div class="o-filter-icon" t-att-class="iconClass" t-on-click="onClick">
       <t t-if="isFilterActive" t-call="o-spreadsheet-Icon.FILTER_ICON_ACTIVE"/>
@@ -5989,13 +6030,13 @@
   <t t-name="spreadsheet.ChartDashboardMenu">
     <div class="o-dashboard-chart-select position-absolute top-0 end-0" t-on-click.stop="">
       <div class="d-flex flex-row px-1" t-att-style="backgroundColor">
-        <t t-foreach="getAvailableTypes()" t-as="type" t-key="type.chartSubtype">
+        <t t-foreach="getMenuItems()" t-as="item" t-key="item.id">
           <button
-            t-attf-class=" {{type.icon}} {{type.chartType === selectedChartType ? 'active' : ''}}"
+            t-attf-class=" {{item.iconClass}} {{item.isSelected ? 'active' : ''}}"
             class="o-chart-dashboard-item btn mt-1 me-1 p-1 "
-            t-att-title="type.displayName"
-            t-on-click="() => this.onTypeChange(type.chartSubtype)"
-            t-att-data-id="type.chartSubtype"
+            t-att-title="item.label"
+            t-on-click="item.onClick"
+            t-att-data-id="item.id"
           />
         </t>
         <button
@@ -6042,20 +6083,6 @@
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-DataValidationOverlay">
-    <t t-foreach="checkBoxCellPositions" t-as="position" t-key="'checkbox'+position_index">
-      <GridCellIcon cellPosition="position">
-        <DataValidationCheckbox cellPosition="position"/>
-      </GridCellIcon>
-    </t>
-
-    <t t-foreach="listIconsCellPositions" t-as="position" t-key="'list'+position_index">
-      <GridCellIcon cellPosition="position" horizontalAlign="'right'">
-        <DataValidationListIcon cellPosition="position"/>
-      </GridCellIcon>
-    </t>
-  </t>
-
   <t t-name="o-spreadsheet-DataValidationListIcon">
     <div
       class="o-dv-list-icon d-flex align-items-center justify-content-center"

package/package.json

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