@odoo/o-spreadsheet 18.4.0-alpha.8 → 18.4.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.4.0-alpha.8
- @date 2025-06-12T09:54:36.987Z
- @hash 9b7a8d0
+ @version 18.4.0
+ @date 2025-06-24T11:20:12.897Z
+ @hash a5b7cad
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -364,7 +364,7 @@
         </div>
         <div
           class="o-grid-container"
-          t-att-class="{'o-two-columns': !sidePanel.isOpen}"
+          t-att-class="{'o-two-columns': !sidePanel.isMainPanelOpen}"
           t-att-style="gridContainerStyle"
           t-on-click="this.focusGrid">
           <div class="o-top-left"/>
@@ -378,7 +378,7 @@
             <Grid exposeFocus="(focus) => this._focusGrid = focus" getGridSize.bind="getGridSize"/>
           </div>
         </div>
-        <SidePanel/>
+        <SidePanels/>
         <div class="o-spreadsheet-bottombar-wrapper o-two-columns overflow-hidden">
           <SmallBottomBar t-if="env.isSmall" onClick="() => this.focusGrid()"/>
           <BottomBar t-else="" onClick="() => this.focusGrid()"/>
@@ -648,36 +648,89 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-SidePanels" t-if="sidePanelStore.isMainPanelOpen">
+    <div class="o-sidePanels d-flex overflow-hidden">
+      <t t-foreach="panelList" t-as="panel" t-key="panel.key">
+        <div t-att-style="panel.style">
+          <SidePanel t-key="panel.key" t-props="panel.props"/>
+        </div>
+      </t>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-SidePanel">
-    <div class="o-sidePanel" t-if="sidePanelStore.isOpen">
-      <div class="o-sidePanelHeader">
-        <div class="o-sidePanelTitle o-fw-bold" t-esc="getTitle()"/>
-        <div class="o-sidePanelClose" t-on-click="close">✕</div>
+    <t t-if="props.isCollapsed" t-call="o-spreadsheet-SidePanelCollapsed"/>
+    <t t-else="" t-call="o-spreadsheet-SidePanelExtended"/>
+  </t>
+
+  <t t-name="o-spreadsheet-SidePanelExtended">
+    <div class="o-sidePanel h-100">
+      <div class="o-sidePanelHeader d-flex align-items-center justify-content-between">
+        <div
+          t-if="props.onToggleCollapsePanel"
+          class="o-collapse-panel o-sidePanelAction rounded"
+          t-on-click="props.onToggleCollapsePanel">
+          <i class="fa fa-angle-double-right"/>
+        </div>
+        <div class="o-sidePanelTitle o-fw-bold ms-2" t-esc="getTitle()"/>
+        <div
+          t-if="props.onTogglePinPanel"
+          class="o-pin-panel o-sidePanelAction ms-auto rounded"
+          t-att-class="{'active': props.isPinned}"
+          t-on-click="props.onTogglePinPanel"
+          t-att-title="pinInfoMessage">
+          <i class="fa fa-thumb-tack"/>
+        </div>
+        <div class="o-sidePanelClose o-sidePanelAction rounded" t-on-click="props.onCloseSidePanel">
+          ✕
+        </div>
       </div>
       <div class="o-sidePanelBody-container d-flex flex-grow-1 ">
         <div class="o-sidePanel-handle-container">
           <div
             class="o-sidePanel-handle"
-            t-on-pointerdown="startHandleDrag"
-            t-on-dblclick="sidePanelStore.resetPanelSize">
+            t-on-pointerdown="props.onStartHandleDrag"
+            t-on-dblclick="props.onResetPanelSize">
             <t t-call="o-spreadsheet-Icon.THIN_DRAG_HANDLE"/>
           </div>
         </div>
         <div class="o-sidePanelBody">
           <t
-            t-component="panel.Body"
-            t-props="sidePanelStore.panelProps"
-            onCloseSidePanel.bind="close"
-            t-key="'Body_' + sidePanelStore.componentTag + sidePanelStore.panelKey"
+            t-component="props.panelContent.Body"
+            t-props="props.panelProps"
+            onCloseSidePanel="props.onCloseSidePanel"
           />
         </div>
-        <div class="o-sidePanelFooter" t-if="panel?.Footer">
-          <t
-            t-component="panel.Footer"
-            t-props="sidePanelStore.panelProps"
-            t-key="'Footer_' + sidePanelStore.componentTag"
-          />
+        <div class="o-sidePanelFooter" t-if="props.panelContent?.Footer">
+          <t t-component="props.panelContent.Footer" t-props="props.panelProps"/>
+        </div>
+      </div>
+    </div>
+  </t>
+
+  <t t-name="o-spreadsheet-SidePanelCollapsed">
+    <div class="o-sidePanel collapsed w-100 h-100" t-on-click="props.onToggleCollapsePanel">
+      <div class="d-flex flex-column align-items-center">
+        <div
+          t-if="props.onToggleCollapsePanel"
+          class="o-collapse-panel o-sidePanelAction rounded mb-1">
+          <i class="fa fa-angle-double-left"/>
+        </div>
+        <div
+          t-if="props.onTogglePinPanel"
+          class="o-pin-panel o-sidePanelAction rounded mb-1"
+          t-att-class="{'active': props.isPinned}"
+          t-on-click.stop="props.onTogglePinPanel"
+          t-att-title="pinInfoMessage">
+          <i class="fa fa-thumb-tack"/>
         </div>
+        <div
+          class="o-sidePanelClose o-sidePanelAction rounded mb-1"
+          t-on-click.stop="props.onCloseSidePanel">
+          ✕
+        </div>
+
+        <div class="o-sidePanelTitle o-fw-bold" t-esc="getTitle()"/>
       </div>
     </div>
   </t>
@@ -714,8 +767,9 @@
           </div>
         </div>
       </Section>
+
       <Section class="'pt-0'">
-        <t t-set="message">This setting affects all users.</t>
+        <t t-set="message">Those settings affect all users.</t>
         <ValidationMessages messages="[message]" msgType="'info'"/>
       </Section>
     </div>
@@ -1485,9 +1539,21 @@
       required="true"
       hasSingleRange="true"
     />
+    <t t-foreach="values" t-as="value" t-key="value_index">
+      <div class="o-dv-list-values p-1 d-flex align-items-center">
+        <div class="me-2">
+          <RoundColorPicker
+            currentColor="props.criterion.colors?.[value] || '#E7E9ED'"
+            onColorPicked="(c) => this.onColorChanged(c, value)"
+          />
+        </div>
+        <input type="text" class="o-input" t-att-value="value" disabled="1"/>
+      </div>
+    </t>
 
     <div class="o-section-subtitle mt-4">Display style</div>
     <select class="o-dv-display-style o-input" t-on-change="onChangedDisplayStyle">
+      <option t-att-selected="props.criterion.displayStyle === 'chip'" value="chip">Chip</option>
       <option t-att-selected="props.criterion.displayStyle === 'arrow'" value="arrow">Arrow</option>
       <option t-att-selected="props.criterion.displayStyle === 'plainText'" value="plainText">
         Plain text
@@ -1498,6 +1564,12 @@
   <t t-name="o-spreadsheet-ListCriterionForm">
     <t t-foreach="displayedValues" t-as="value" t-key="value_index">
       <div class="o-dv-list-values d-flex align-items-center">
+        <div class="me-1">
+          <RoundColorPicker
+            currentColor="props.criterion.colors?.[value] || '#E7E9ED'"
+            onColorPicked="(c) => this.onColorChanged(c, value)"
+          />
+        </div>
         <CriterionInput
           value="props.criterion.values[value_index]"
           onValueChanged="(v) => this.onValueChanged(v, value_index)"
@@ -1521,6 +1593,7 @@
 
     <div class="o-section-subtitle">Display style</div>
     <select class="o-dv-display-style o-input" t-on-change="onChangedDisplayStyle">
+      <option t-att-selected="props.criterion.displayStyle === 'chip'" value="chip">Chip</option>
       <option t-att-selected="props.criterion.displayStyle === 'arrow'" value="arrow">Arrow</option>
       <option t-att-selected="props.criterion.displayStyle === 'plainText'" value="plainText">
         Plain text
@@ -4067,8 +4140,8 @@
           <div
             t-att-title="getName(menuItem)"
             t-att-data-name="menuItem.id"
-            t-on-click="(ev) => this.props.onClickMenu?.(menuItem, ev)"
-            t-on-auxclick="(ev) => this.props.onClickMenu?.(menuItem, ev)"
+            t-on-click="(ev) => this.onClickMenu(menuItem, ev)"
+            t-on-auxclick="(ev) => this.onClickMenu(menuItem, ev)"
             t-on-mouseover="(ev) => this.props.onMouseOver?.(menuItem, ev)"
             t-on-mouseenter="(ev) => this.onMouseEnter?.(menuItem, ev)"
             t-on-mouseleave="(ev) => this.onMouseLeave?.(menuItem)"
@@ -6351,7 +6424,7 @@
               t-as="content"
               t-key="content_index"
               t-att-class="content.classes?.join(' ')"
-              t-attf-style="color: {{content.color || '#000000'}};"
+              t-att-style="getCss(content)"
               t-esc="content.value"
             />
           </div>

package/package.json

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