@odoo/o-spreadsheet 18.5.0-alpha.9 → 19.0.1

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.9
- @date 2025-08-19T16:55:34.562Z
- @hash 0e0d850
+ @version 19.0.1
+ @date 2025-09-11T08:46:39.072Z
+ @hash bd79eea
 -->
 <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()"
@@ -2341,30 +2346,6 @@
     </label>
   </t>
 
-  <t t-name="o-spreadsheet-CarouselItemTitleCollapsible">
-    <SidePanelCollapsible
-      class="'o-carousel-item-title'"
-      isInitiallyCollapsed="true"
-      title.translate="Carousel Title">
-      <t t-set-slot="content">
-        <div class="ps-4">
-          <TextInput
-            value="title"
-            onChange.bind="updateTitle"
-            placeholder.translate="Title"
-            alwaysShowBorder="true"
-          />
-          <TextStyler
-            style="style"
-            updateStyle.bind="updateStyle"
-            defaultStyle="defaultStyle"
-            hasHorizontalAlign="false"
-          />
-        </div>
-      </t>
-    </SidePanelCollapsible>
-  </t>
-
   <t t-name="o-spreadsheet.BadgeSelection">
     <div class="d-flex w-100 o-badge-selection">
       <t t-foreach="props.choices" t-as="choice" t-key="choice.value">
@@ -4125,66 +4106,65 @@
 
   <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">
-        <div
-          t-foreach="carouselItems"
-          t-as="item"
-          t-key="getItemId(item)"
-          class="o-carousel-preview position-relative d-flex align-items-center border-bottom ps-1 pe-2 pt-3 pb-2 w-100"
-          t-att-class="{ 'o-dragging': dragAndDrop.draggedItemId === getItemId(item) }"
-          t-att-style="getPreviewDivStyle(item)">
+        <t t-foreach="carouselItems" t-as="item" t-key="getItemId(item)">
           <div
-            class="o-drag-handle position-absolute ps-1 flex-shrink-0"
-            t-on-pointerdown.stop.prevent="(ev) => this.onDragHandleMouseDown(item, ev)">
-            <t t-call="o-spreadsheet-Icon.THIN_DRAG_HANDLE"/>
-          </div>
-          <div class="flex-grow-1">
-            <div class="d-flex align-items-center">
-              <div
-                class="o-carousel-preview-icon ms-3 flex-shrink-0 d-flex align-items-center justify-content-center">
-                <t t-call="{{getItemPreview(item)}}"/>
-              </div>
-              <div class="o-carousel-preview-title text-truncate ms-2">
-                <TextInput
-                  value="getItemTitle(item)"
-                  onChange="(newName) => this.renameCarouselItem(item, newName)"
-                />
-              </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="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),
+              '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"
+              t-on-pointerdown.stop.prevent="(ev) => this.onDragHandleMouseDown(item, ev)">
+              <t t-call="o-spreadsheet-Icon.THIN_DRAG_HANDLE"/>
             </div>
-            <div class="ms-3">
-              <CarouselItemTitleCollapsible
-                carouselTitle="item.carouselTitle"
-                onUpdateCarouselTitle="(style) => this.onUpdateCarouselTitle(item_index, style)"
+            <div
+              class="o-carousel-preview-icon ms-3 flex-shrink-0 d-flex align-items-center justify-content-center">
+              <t t-call="{{getItemPreview(item)}}"/>
+            </div>
+            <div class="o-carousel-preview-title text-truncate ms-2">
+              <TextInput
+                value="getItemTitle(item)"
+                onChange="(newName) => this.renameCarouselItem(item, newName)"
               />
             </div>
+            <div class="ms-auto"/>
+            <div class="flex-shrink-0 d-flex align-self-start me-1">
+              <CogWheelMenu items="getCogWheelMenuItems(item)"/>
+            </div>
           </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>
@@ -4418,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>
@@ -5114,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"/>
@@ -5554,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">
@@ -6032,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=""
@@ -6289,20 +6284,17 @@
     <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 d-flex flex-shrink-0 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">
-        <div
-          class="o-carousel-title d-flex align-items-center"
-          t-esc="title"
-          t-att-style="titleStyle"
-        />
+        <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 mb-1 flex-shrink-0"
+              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)"
@@ -6315,7 +6307,9 @@
         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 flex-fill">
+      <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"
@@ -6323,6 +6317,11 @@
             t-key="selectedItem.chartId"
           />
         </div>
+        <ChartDashboardMenu
+          t-if="env.isDashboard()"
+          chartId="selectedItem.chartId"
+          t-key="selectedItem.chartId"
+        />
       </div>
     </div>
   </t>
@@ -6350,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"
@@ -6364,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)"
         />
@@ -6425,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>
@@ -6514,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
@@ -6530,6 +6552,17 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-ClickableCellSortIcon">
+    <div class="w-100 h-100 d-flex flex-column align-items-end" t-att-class="verticalJustifyClass">
+      <span
+        t-if="props.sortDirection === 'none'"
+        class="o-icon sorting-icon pb-1"
+        t-att-style="style">
+        <i class="fa fa-small fa-sort"/>
+      </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.9",
+  "version": "19.0.1",
   "description": "A spreadsheet component",
   "type": "module",
   "main": "dist/o-spreadsheet.cjs.js",
@@ -147,6 +147,6 @@
     ]
   },
   "publishConfig": {
-    "tag": "alpha"
+    "tag": "latest"
   }
 }