@odoo/o-spreadsheet 18.5.0-alpha.8 → 19.0.0

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.5.0-alpha.8
- @date 2025-08-18T08:18:48.925Z
- @hash 994f1cb
+ @version 19.0.0
+ @date 2025-09-11T07:19:39.737Z
+ @hash 0ac0e86
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -53,8 +53,13 @@
         </div>
       </div>
       <!-- Toolbar and Cell Content -->
-      <div class="d-flex o-topbar-responsive" t-ref="toolBarContainer">
-        <div class="o-topbar-toolbar d-flex">
+      <div
+        class="d-flex o-topbar-responsive"
+        t-att-class="{'o-topbar-responsive': !env.model.getters.isReadonly()}"
+        t-ref="toolBarContainer">
+        <div
+          class="o-topbar-toolbar d-flex"
+          t-att-class="{'flex-shrink-0': env.model.getters.isReadonly()}">
           <!-- Toolbar -->
           <div
             t-if="env.model.getters.isReadonly()"
@@ -215,7 +220,7 @@
       t-ref="input"
       class="os-input w-100"
       type="text"
-      t-att-class="props.class"
+      t-att-class="inputClass"
       t-att-id="props.id"
       t-att-placeholder="props.placeholder"
       t-att-value="props.value"
@@ -2410,6 +2415,9 @@
             className="'mb-2'"
           />
         </Section>
+        <Section class="'pt-1'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
       </t>
     </GeneralDesignEditor>
     <SidePanelCollapsible isInitiallyCollapsed="true" title.translate="Waterfall design">
@@ -2658,12 +2666,7 @@
     <GeneralDesignEditor t-props="props" defaultChartTitleFontSize="defaultScorecardTitleFontSize">
       <t t-set-slot="general-extension">
         <Section class="'pt-1'" title.translate="Number formatting">
-          <Checkbox
-            name="'humanizeNumbers'"
-            label="humanizeNumbersLabel"
-            value="props.definition.humanize"
-            onChange.bind="updateHumanizeNumbers"
-          />
+          <ChartHumanizeNumbers t-props="props"/>
         </Section>
       </t>
     </GeneralDesignEditor>
@@ -2776,6 +2779,9 @@
           <ChartShowValues t-props="props"/>
           <ChartShowDataMarkers t-props="props"/>
         </Section>
+        <Section class="'pt-1'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
       </t>
     </GeneralDesignEditor>
     <SeriesDesignEditor t-props="props"/>
@@ -2788,6 +2794,9 @@
         <Section class="'pt-0'" title.translate="Values">
           <ChartShowValues t-props="props"/>
         </Section>
+        <Section class="'pt-1'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
         <PieHoleSize
           t-if="props.definition.isDoughnut"
           value="props.definition.pieHolePercentage ?? this.defaultHoleSize"
@@ -2860,6 +2869,9 @@
             className="'mb-2'"
           />
         </Section>
+        <Section class="'pt-1'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
       </t>
     </GeneralDesignEditor>
     <SeriesWithAxisDesignEditor t-props="props"/>
@@ -2966,6 +2978,9 @@
             <option value="left">Bottom left</option>
           </select>
         </Section>
+        <Section class="'pt-1'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
       </t>
     </GeneralDesignEditor>
 
@@ -3054,7 +3069,13 @@
   </t>
 
   <t t-name="o-spreadsheet-GaugeChartDesignPanel">
-    <GeneralDesignEditor t-props="props"/>
+    <GeneralDesignEditor t-props="props">
+      <t t-set-slot="general-extension">
+        <Section class="'pt-1'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
+      </t>
+    </GeneralDesignEditor>
     <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Gauge Design">
       <t t-set-slot="content">
         <Section class="'pt-0'" title.translate="Range">
@@ -3196,6 +3217,9 @@
         <Section class="'pt-0'" title.translate="Values">
           <ChartShowValues t-props="props"/>
         </Section>
+        <Section class="'pt-1'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
       </t>
     </GeneralDesignEditor>
 
@@ -3233,6 +3257,9 @@
             className="'mb-2'"
           />
         </Section>
+        <Section class="'pt-1'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
       </t>
     </GeneralDesignEditor>
     <SeriesWithAxisDesignEditor t-props="props">
@@ -3267,6 +3294,9 @@
         <Section class="'pt-0'" title.translate="Values">
           <ChartShowValues t-props="props"/>
         </Section>
+        <Section class="'pt-1'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
       </t>
     </GeneralDesignEditor>
     <SeriesWithAxisDesignEditor t-props="props"/>
@@ -3904,6 +3934,15 @@
     </Section>
   </t>
 
+  <t t-name="o-spreadsheet-ChartHumanizeNumbers">
+    <Checkbox
+      name="'humanizeNumbers'"
+      label.translate="Make numbers human-readable"
+      value="props.definition.humanize ?? true"
+      onChange="(humanize) => props.updateChart(this.props.chartId, { humanize })"
+    />
+  </t>
+
   <t t-name="o-spreadsheet-GenericChartConfigPanel">
     <div>
       <ChartDataSeries
@@ -4067,11 +4106,31 @@
 
   <t t-name="o-spreadsheet-CarouselPanel">
     <div class="o-carousel-panel h-100 overflow-auto">
+      <Section title.translate="Carousel Title" class="'o-carousel-title'">
+        <TextInput
+          value="title?.text ?? ''"
+          onChange.bind="updateTitleText"
+          placeholder.translate="Add a Title"
+          alwaysShowBorder="true"
+        />
+        <TextStyler
+          style="title ?? {}"
+          updateStyle.bind="updateTitleStyle"
+          defaultStyle="DEFAULT_CAROUSEL_TITLE_STYLE"
+          hasHorizontalAlign="false"
+        />
+      </Section>
+      <div class="o-section pb-1 pt-0">
+        <div class="o-section-title">Carousel Sections</div>
+      </div>
       <div class="o-carousel-preview-list overflow-auto" t-ref="previewList">
         <t t-foreach="carouselItems" t-as="item" t-key="getItemId(item)">
           <div
             class="o-carousel-preview border-bottom pe-2 position-relative w-100 d-flex align-items-center"
-            t-att-class="{ 'o-dragging': dragAndDrop.draggedItemId === getItemId(item) }"
+            t-att-class="{
+              'o-dragging': dragAndDrop.draggedItemId === getItemId(item),
+              'o-selected': isCarouselItemActive(item)
+            }"
             t-att-style="getPreviewDivStyle(item)">
             <div
               class="o-drag-handle h-100 position-absolute d-flex align-items-center o-button-icon ps-1 flex-shrink-0"
@@ -4089,33 +4148,23 @@
               />
             </div>
             <div class="ms-auto"/>
-            <div
-              t-if="item.type === 'chart'"
-              class="o-edit-button o-button-icon pe-2 ps-1 flex-shrink-0 fa fa-pencil"
-              t-on-click.stop="(ev) => this.editCarouselItem(item, ev)"
-              title="Edit chart"
-            />
-            <div
-              class="o-delete-button o-button-icon pe-2 ps-1 flex-shrink-0"
-              t-on-click.stop="(ev) => this.deleteCarouselItem(item, ev)"
-              title="Remove chart">
-              <t t-call="o-spreadsheet-Icon.TRASH_FILLED"/>
+            <div class="flex-shrink-0 d-flex align-self-start me-1">
+              <CogWheelMenu items="getCogWheelMenuItems(item)"/>
             </div>
           </div>
         </t>
       </div>
       <div
-        class="o-button-link o-carousel-add-chart float-end d-flex align-items-center pt-4 pe-4 gap-2"
-        t-on-click="addNewChartToCarousel">
+        class="o-button-link o-carousel-add-chart float-end d-flex align-items-center py-4 pe-4 gap-2"
+        t-on-click="addNewChartToCarousel"
+        t-att-title="carouselAddChartInfoMessage">
         + Add chart
-        <span t-att-title="carouselAddChartInfoMessage">
-          <t t-call="o-spreadsheet-Icon.CIRCLE_INFO"/>
-        </span>
       </div>
       <div
         t-if="!hasDataView"
-        class="o-button-link o-carousel-add-data-view float-end pt-4 pe-4"
-        t-on-click="addDataViewToCarousel">
+        class="o-button-link o-carousel-add-data-view float-end py-4 pe-4"
+        t-on-click="addDataViewToCarousel"
+        t-att-title="carouselDataViewMessage">
         + Add data view
       </div>
     </div>
@@ -4349,12 +4398,12 @@
               <t t-set="secondaryIcon" t-value="menuItem.secondaryIcon(env)"/>
               <div
                 t-if="isMenuRoot"
-                class="o-menu-item-root align-middle ms-auto"
+                class="o-menu-item-root ms-auto align-items-center d-flex"
                 t-call="o-spreadsheet-Icon.CARET_RIGHT"
               />
               <div
                 t-elif="secondaryIcon"
-                class="o-menu-item-root align-middle ms-auto"
+                class="o-menu-item-root ms-auto align-items-center d-flex"
                 t-call="{{secondaryIcon}}"
               />
             </div>
@@ -5045,6 +5094,11 @@
       <i class="fa fa-pencil-square-o"/>
     </div>
   </t>
+  <t t-name="o-spreadsheet-Icon.EXTERNAL">
+    <div class="o-icon">
+      <i class="fa fa-external-link"/>
+    </div>
+  </t>
   <t t-name="o-spreadsheet-Icon.UNLINK">
     <div class="o-icon">
       <i class="fa fa-chain-broken"/>
@@ -5485,6 +5539,14 @@
       />
     </svg>
   </t>
+  <t t-name="o-spreadsheet-Icon.DATA">
+    <svg class="o-icon" viewBox="0 0 18 18">
+      <path
+        fill="currentColor"
+        d="M.5 1.5a1 1 0 0 1 1-1h15a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1h-15a1 1 0 0 1-1-1zM6 6V1.5H1.5V6m10 0V1.5h-5V6m10 0V1.5H12V6m-6 5.5v-5H1.5v5m10 0v-5h-5v5m10 0v-5H12v5m-6 5V12H1.5v4.5m10 0V12h-5v4.5m10 0V12H12v4.5"
+      />
+    </svg>
+  </t>
 
   <t t-name="o-spreadsheet-IconPicker">
     <div class="o-icon-picker">
@@ -5963,18 +6025,20 @@
   </t>
 
   <t t-name="o-spreadsheet-FullScreenChart">
-    <div
-      class="position-absolute o-fullscreen-chart-overlay w-100 h-100 d-flex"
-      t-if="chartId"
-      t-on-click="exitFullScreen">
+    <div class="position-absolute o-fullscreen-chart-overlay w-100 h-100 d-flex" t-if="chartId">
+      <div
+        class="position-absolute top-0 start-0 end-0 bottom-0"
+        t-on-click="exitFullScreen"
+        aria-hidden="true"
+      />
       <button
-        class="o-exit top-0 end-0 position-absolute o-button primary m-1"
+        class="o-exit top-0 end-0 position-absolute o-button primary m-1 shadow"
         t-on-click="exitFullScreen">
         Exit fullscreen
       </button>
       <div class="flex-fill">
         <div
-          class="o-fullscreen-chart o-figure position-relative"
+          class="o-fullscreen-chart o-figure position-relative border rounded shadow"
           tabindex="1"
           t-ref="fullScreenChart"
           t-on-click.stop=""
@@ -6217,30 +6281,35 @@
   </t>
 
   <t t-name="o-spreadsheet-CarouselFigure">
-    <div class="o-carousel w-100 h-100" t-on-dblclick="onCarouselDoubleClick">
+    <div class="o-carousel w-100 h-100 d-flex flex-column" t-on-dblclick="onCarouselDoubleClick">
       <t t-set="selectedItem" t-value="selectedCarouselItem"/>
       <div
-        class="o-carousel-header position-absolute end-0 top-0 d-flex pe-1 rounded pe-auto"
+        class="o-carousel-header d-flex align-items-baseline flex-shrink-0 pe-1 pe-auto"
         t-att-class="{
+          'border-bottom': env.isDashboard(),
           'o-carousel-header-floating': !env.isDashboard() and selectedItem?.type === 'carouselDataView',
          }"
-        t-att-style="headerStyle"
-        t-on-pointerdown.stop="">
-        <t t-foreach="carousel.items" t-as="item" t-key="item_index">
-          <div
-            class="o-carousel-tab text-truncate px-2 mt-1 mb-1 flex-shrink-0"
-            t-att-class="{ 'selected': isItemSelected(item) }"
-            t-esc="getItemTitle(item)"
-            t-on-click.stop="() => this.onCarouselTabClick(item)"
-          />
-        </t>
+        t-att-style="headerStyle">
+        <div class="o-carousel-title text-truncate" t-esc="title" t-att-style="titleStyle"/>
+        <div class="ms-auto d-flex">
+          <t t-foreach="carousel.items" t-as="item" t-key="item_index">
+            <div
+              class="o-carousel-tab text-truncate px-2 mt-1 flex-shrink-0"
+              t-att-class="{ 'selected': isItemSelected(item) }"
+              t-esc="getItemTitle(item)"
+              t-on-click.stop="() => this.onCarouselTabClick(item)"
+            />
+          </t>
+        </div>
       </div>
       <div
         t-if="!selectedItem"
-        class="o-carousel-empty w-100 h-100 d-flex align-items-center justify-content-center">
+        class="o-carousel-empty w-100 flex-fill d-flex align-items-center justify-content-center">
         <t t-call="o-spreadsheet-Icon.CAROUSEL"/>
       </div>
-      <div t-elif="selectedItem.type === 'chart'" class="o-carousel-content w-100 h-100">
+      <div
+        t-elif="selectedItem.type === 'chart'"
+        class="o-carousel-content w-100 flex-fill position-relative">
         <div class="o-chart-container w-100 h-100">
           <t
             t-component="chartComponent"
@@ -6248,6 +6317,11 @@
             t-key="selectedItem.chartId"
           />
         </div>
+        <ChartDashboardMenu
+          t-if="env.isDashboard()"
+          chartId="selectedItem.chartId"
+          t-key="selectedItem.chartId"
+        />
       </div>
     </div>
   </t>
@@ -6275,7 +6349,7 @@
         />
         <div class="o-figure-menu position-absolute m-2" t-if="!env.isDashboard()">
           <div
-            class="o-figure-menu-item"
+            class="o-figure-menu-item d-flex-align-items-center"
             t-if="!env.model.getters.isReadonly() and props.figureUI.tag !== 'carousel'"
             t-on-click="showMenu"
             t-ref="menuButton"
@@ -6289,46 +6363,63 @@
             onClose="() => this.menuState.isOpen=false"
           />
         </div>
+        <div t-if="!env.isDashboard()" class="position-absolute top-0 start-0 pe-none w-100 h-100">
+          <div
+            class="o-figure-border pe-auto w-100 h-0 position-absolute pb-2"
+            t-att-style="getBorderStyle('top')"
+          />
+          <div
+            class="o-figure-border pe-auto h-100 position-absolute start-0 ps-2"
+            t-att-style="getBorderStyle('left')"
+          />
+          <div
+            class="o-figure-border pe-auto w-100 position-absolute bottom-0 pt-2"
+            t-att-style="getBorderStyle('bottom')"
+          />
+          <div
+            class="o-figure-border pe-auto h-100 position-absolute end-0 pe-2"
+            t-att-style="getBorderStyle('right')"
+          />
+        </div>
       </div>
-      <div class="o-figure-border w-100 h-100 position-absolute pe-none" t-att-style="borderStyle"/>
       <t t-if="isSelected and !env.isMobile()">
         <div
-          class="o-fig-anchor o-top"
+          class="o-fig-anchor o-top pe-auto"
           t-att-style="this.getResizerPosition('top')"
           t-on-pointerdown="(ev) => this.clickAnchor(0,-1, ev)"
         />
         <div
-          class="o-fig-anchor o-topRight"
+          class="o-fig-anchor o-topRight pe-auto"
           t-att-style="this.getResizerPosition('top right')"
           t-on-pointerdown="(ev) => this.clickAnchor(1,-1, ev)"
         />
         <div
-          class="o-fig-anchor o-right"
+          class="o-fig-anchor o-right pe-auto"
           t-att-style="this.getResizerPosition('right')"
           t-on-pointerdown="(ev) => this.clickAnchor(1,0, ev)"
         />
         <div
-          class="o-fig-anchor o-bottomRight"
+          class="o-fig-anchor o-bottomRight pe-auto"
           t-att-style="this.getResizerPosition('bottom right')"
           t-on-pointerdown="(ev) => this.clickAnchor(1,1, ev)"
         />
         <div
-          class="o-fig-anchor o-bottom"
+          class="o-fig-anchor o-bottom pe-auto"
           t-att-style="this.getResizerPosition('bottom')"
           t-on-pointerdown="(ev) => this.clickAnchor(0,1, ev)"
         />
         <div
-          class="o-fig-anchor o-bottomLeft"
+          class="o-fig-anchor o-bottomLeft pe-auto"
           t-att-style="this.getResizerPosition('bottom left')"
           t-on-pointerdown="(ev) => this.clickAnchor(-1,1, ev)"
         />
         <div
-          class="o-fig-anchor o-left"
+          class="o-fig-anchor o-left pe-auto"
           t-att-style="this.getResizerPosition('left')"
           t-on-pointerdown="(ev) => this.clickAnchor(-1,0, ev)"
         />
         <div
-          class="o-fig-anchor o-topLeft"
+          class="o-fig-anchor o-topLeft pe-auto"
           t-att-style="this.getResizerPosition('top left')"
           t-on-pointerdown="(ev) => this.clickAnchor(-1,-1, ev)"
         />
@@ -6350,18 +6441,19 @@
 
   <t t-name="o-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">
+      <div class="d-flex align-items-center gap-1 p-1 rounded" t-att-style="backgroundColor">
         <t t-foreach="getMenuItems()" t-as="item" t-key="item.id">
-          <button
-            t-attf-class=" {{item.iconClass}} {{item.isSelected ? 'active' : ''}}"
-            class="o-chart-dashboard-item btn mt-1 me-1 p-1 "
+          <div
+            t-attf-class=" {{item.class}}"
+            class="o-chart-dashboard-item btn border-0 lh-1 p-1 d-flex align-items-center justify-content-center"
             t-att-title="item.label"
             t-on-click="item.onClick"
-            t-att-data-id="item.id"
-          />
+            t-att-data-id="item.id">
+            <t t-if="item.preview" t-call="{{item.preview}}"/>
+          </div>
         </t>
         <button
-          class="o-chart-dashboard-item btn mt-1 p-1 fa fa-ellipsis-v"
+          class="o-chart-dashboard-item btn text-muted lh-1 p-1 fa fa-ellipsis-v"
           t-on-click="openContextMenu"
         />
       </div>
@@ -6439,8 +6531,13 @@
             t-on-click="(ev) => this.selectClickableCell(ev, clickableCell)"
             t-on-auxclick="(ev) => this.selectClickableCell(ev, clickableCell)"
             t-on-contextmenu.prevent=""
-            t-att-style="getCellClickableStyle(clickableCell.coordinates)"
-          />
+            t-att-style="getCellClickableStyle(clickableCell.coordinates)">
+            <t
+              t-if="clickableCell.component"
+              t-component="clickableCell.component"
+              t-props="clickableCell.componentProps"
+            />
+          </div>
         </GridOverlay>
         <canvas t-ref="canvas"/>
         <GridPopover
@@ -6455,6 +6552,14 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-ClickableCellSortIcon">
+    <div class="w-100 h-100 d-flex flex-column align-items-end justify-content-end">
+      <span class="o-icon h-100 sorting-icon pb-1" t-att-style="style">
+        <i class="fa fa-small" t-att-class="icon"/>
+      </span>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-TopBarComposer">
     <div class="o-topbar-composer-container w-100">
       <div

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/o-spreadsheet",
-  "version": "18.5.0-alpha.8",
+  "version": "19.0.0",
   "description": "A spreadsheet component",
   "type": "module",
   "main": "dist/o-spreadsheet.cjs.js",
@@ -147,6 +147,6 @@
     ]
   },
   "publishConfig": {
-    "tag": "alpha"
+    "tag": "latest"
   }
 }