@odoo/o-spreadsheet 18.3.0-alpha.2 → 18.3.0-alpha.3

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.3.0-alpha.2
- @date 2025-02-27T06:31:45.929Z
- @hash 17e5bfa
+ @version 18.3.0-alpha.3
+ @date 2025-03-07T10:41:46.620Z
+ @hash f59f5f6
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -33,13 +33,13 @@
     <div
       class="o-spreadsheet-topbar o-two-columns d-flex flex-column user-select-none"
       t-on-click="props.onClick">
-      <div class="o-topbar-top d-flex justify-content-between">
+      <div class="o-topbar-top d-flex justify-content-between  flex-wrap">
         <!-- Menus -->
         <div class="o-topbar-topleft d-flex">
           <t t-foreach="menus" t-as="menu" t-key="menu_index">
             <div
               t-if="menu.children.length !== 0"
-              class="o-topbar-menu o-hoverable-button rounded"
+              class="o-topbar-menu o-hoverable-button text-nowrap rounded"
               t-att-class="{'active': state.menuState.parentMenu and state.menuState.parentMenu.id === menu.id}"
               t-on-click="(ev) => this.toggleContextMenu(menu, ev)"
               t-on-mouseover="(ev) => this.onMenuMouseOver(menu, ev)"
@@ -55,8 +55,8 @@
         </div>
       </div>
       <!-- Toolbar and Cell Content -->
-      <div class="d-flex">
-        <div class="o-topbar-toolbar d-flex flex-shrink-0">
+      <div class="d-flex o-topbar-responsive" t-ref="toolBarContainer">
+        <div class="o-topbar-toolbar d-flex">
           <!-- Toolbar -->
           <div
             t-if="env.model.getters.isReadonly()"
@@ -66,135 +66,31 @@
               Readonly Access
             </span>
           </div>
-          <div t-else="" class="o-toolbar-tools d-flex flex-shrink-0 ms-4">
-            <ActionButton action="EDIT.undo" class="'o-hoverable-button'"/>
-            <ActionButton action="EDIT.redo" class="'o-hoverable-button'"/>
-            <PaintFormatButton class="'o-hoverable-button'"/>
-            <ActionButton action="FORMAT.clearFormat" class="'o-hoverable-button'"/>
-
-            <div class="o-divider"/>
-
-            <ActionButton action="FORMAT.formatPercent" class="'o-hoverable-button'"/>
-            <ActionButton action="FORMAT.decraseDecimalPlaces" class="'o-hoverable-button'"/>
-            <ActionButton action="FORMAT.incraseDecimalPlaces" class="'o-hoverable-button'"/>
-            <ActionButton
-              action="formatNumberMenuItemSpec"
-              onClick="(ev) => this.toggleToolbarContextMenu(formatNumberMenuItemSpec, ev)"
-              hasTriangleDownIcon="true"
-              class="'o-hoverable-button'"
-            />
-
-            <div class="o-divider"/>
-            <FontSizeEditor
-              currentFontSize="currentFontSize"
-              onFontSizeChanged.bind="this.setFontSize"
-              class="'o-hoverable-button'"
-              onToggle.bind="this.onClick"
-            />
-            <div class="o-divider"/>
-
-            <ActionButton action="FORMAT.formatBold" class="'o-hoverable-button'"/>
-            <ActionButton action="FORMAT.formatItalic" class="'o-hoverable-button'"/>
-            <ActionButton action="FORMAT.formatStrikethrough" class="'o-hoverable-button'"/>
-
-            <ColorPickerWidget
-              currentColor="state.textColor"
-              toggleColorPicker="(ev) => this.toggleDropdownTool('textColorTool', ev)"
-              showColorPicker="state.activeTool === 'textColorTool'"
-              onColorPicked="(color) => this.setColor('textColor', color)"
-              title="text_color"
-              icon="'o-spreadsheet-Icon.TEXT_COLOR'"
-              dropdownMaxHeight="this.props.dropdownMaxHeight"
-              class="'o-hoverable-button o-menu-item-button'"
-            />
-
-            <div class="o-divider"/>
-
-            <ColorPickerWidget
-              currentColor="state.fillColor"
-              toggleColorPicker="(ev) => this.toggleDropdownTool('fillColorTool', ev)"
-              showColorPicker="state.activeTool === 'fillColorTool'"
-              onColorPicked="(color) => this.setColor('fillColor', color)"
-              title="fill_color"
-              icon="'o-spreadsheet-Icon.FILL_COLOR'"
-              dropdownMaxHeight="this.props.dropdownMaxHeight"
-              class="'o-hoverable-button o-menu-item-button'"
-            />
-
-            <BorderEditorWidget
-              class="'o-hoverable-button o-menu-item-button'"
-              toggleBorderEditor="(ev) => this.toggleDropdownTool('borderTool', ev)"
-              showBorderEditor="state.activeTool === 'borderTool'"
-              dropdownMaxHeight="this.props.dropdownMaxHeight"
-            />
-            <ActionButton action="EDIT.mergeCells" class="'o-hoverable-button'"/>
-            <div class="o-divider"/>
-
-            <div class="o-dropdown">
-              <ActionButton
-                action="FORMAT.formatAlignmentHorizontal"
-                hasTriangleDownIcon="true"
-                t-on-click="(ev) => this.toggleDropdownTool('horizontalAlignTool', ev)"
-                class="'o-hoverable-button'"
-              />
-              <div
-                class="o-dropdown-content"
-                t-if="state.activeTool === 'horizontalAlignTool'"
-                t-att-style="dropdownStyle"
-                t-on-click.stop="">
-                <div class="o-dropdown-line">
-                  <ActionButton action="FORMAT.formatAlignmentLeft" class="'o-hoverable-button'"/>
-                  <ActionButton action="FORMAT.formatAlignmentCenter" class="'o-hoverable-button'"/>
-                  <ActionButton action="FORMAT.formatAlignmentRight" class="'o-hoverable-button'"/>
-                </div>
-              </div>
-            </div>
-            <div class="o-dropdown">
-              <ActionButton
-                action="FORMAT.formatAlignmentVertical"
-                hasTriangleDownIcon="true"
-                t-on-click="(ev) => this.toggleDropdownTool('verticalAlignTool', ev)"
-                class="'o-hoverable-button'"
-              />
-              <div
-                class="o-dropdown-content"
-                t-att-style="dropdownStyle"
-                t-if="state.activeTool === 'verticalAlignTool'"
-                t-on-click.stop="">
-                <div class="o-dropdown-line">
-                  <ActionButton action="FORMAT.formatAlignmentTop" class="'o-hoverable-button'"/>
-                  <ActionButton action="FORMAT.formatAlignmentMiddle" class="'o-hoverable-button'"/>
-                  <ActionButton action="FORMAT.formatAlignmentBottom" class="'o-hoverable-button'"/>
-                </div>
-              </div>
+          <div t-else="" class="o-toolbar-tools d-flex ms-4 flex-grow-1" t-ref="toolBar">
+            <div
+              class="d-flex tool-container"
+              t-foreach="toolsCategories"
+              t-as="category"
+              t-key="category"
+              t-att-id="category">
+              <t
+                t-foreach="toolbarMenuRegistry.getEntries(category)"
+                t-as="toolbarAction"
+                t-key="toolbarAction_index">
+                <t t-component="toolbarAction.component" t-props="toolbarAction.props"/>
+              </t>
+              <div t-if="showDivider(category_index)" class="o-topbar-divider"/>
             </div>
-            <div class="o-dropdown">
-              <ActionButton
-                action="FORMAT.formatWrapping"
-                hasTriangleDownIcon="true"
-                t-on-click="(ev) => this.toggleDropdownTool('textWrappingTool', ev)"
-                class="'o-hoverable-button'"
-              />
-              <div
-                class="o-dropdown-content"
-                t-att-style="dropdownStyle"
-                t-if="state.activeTool === 'textWrappingTool'"
-                t-on-click.stop="">
-                <div class="o-dropdown-line">
-                  <ActionButton
-                    action="FORMAT.formatWrappingOverflow"
-                    class="'o-hoverable-button'"
-                  />
-                  <ActionButton action="FORMAT.formatWrappingWrap" class="'o-hoverable-button'"/>
-                  <ActionButton action="FORMAT.formatWrappingClip" class="'o-hoverable-button'"/>
-                </div>
-              </div>
+            <div
+              t-ref="moreToolsContainer"
+              class="d-flex align-items-center flex-grow-1 me-auto more-tools-container">
+              <span
+                class="o-toolbar-button o-menu-item-button o-hoverable-button  me-2 px-1 py-2 more-tools"
+                t-ref="moreToolsButton"
+                t-on-click.stop="toggleMoreTools">
+                <t t-call="o-spreadsheet-Icon.SHORT_THIN_DRAG_HANDLE"/>
+              </span>
             </div>
-
-            <div class="o-divider"/>
-
-            <TableDropdownButton/>
-            <ActionButton action="DATA.createRemoveFilterTool" class="'o-hoverable-button'"/>
           </div>
         </div>
         <TopBarComposer/>
@@ -211,11 +107,14 @@
           Irregularity map
         </div>
         <div
-          class="ps-3 h-100 flex-fill d-flex justify-content-between align-items-center rounded-0 alert alert-info ps-0 py-0 my-0">
-          This tool analyzes formulas for patterns and highlights
-          inconsistencies. Irregularities may indicate potential errors in formula
-          structures, references or arguments.
-          <div class="btn btn-link align-self-end" t-on-click="() => this.fingerprints.disable()">
+          class="ps-3 h-100 flex-fill d-flex justify-content-between rounded-0 alert alert-info ps-0 py-0 my-0">
+          <span class="d-flex align-items-center">
+            This tool analyzes formulas for patterns and highlights inconsistencies. Irregularities
+            may indicate potential errors in formula structures, references or arguments.
+          </span>
+          <div
+            class="ps-3 btn btn-link flex-shrink-0"
+            t-on-click="() => this.fingerprints.disable()">
             Turn off
           </div>
         </div>
@@ -228,6 +127,83 @@
       onClose="() => this.closeMenus()"
       onMenuClicked="() => this.props.onClick()"
     />
+    <Popover t-if="state.toolsPopoverState.isOpen" t-props="toolsPopoverProps">
+      <div class="d-flex px-2 py-1 flex-wrap" style="background-color:white;">
+        <t
+          t-foreach="state.invisibleToolsCategories"
+          t-as="category"
+          t-key="category"
+          t-att-id="category">
+          <t
+            t-foreach="toolbarMenuRegistry.getEntries(category)"
+            t-as="toolbarAction"
+            t-key="toolbarAction_index">
+            <t t-component="toolbarAction.component" t-props="toolbarAction.props"/>
+          </t>
+          <div
+            t-if="category_index &lt; state.invisibleToolsCategories.length-1"
+            class="o-topbar-divider my-2"
+          />
+        </t>
+      </div>
+    </Popover>
+  </t>
+
+  <div t-name="o-spreadsheet-NumberFormatsTool" t-ref="buttonRef" t-on-click.stop="">
+    <ActionButton
+      action="formatNumberMenuItemSpec"
+      hasTriangleDownIcon="true"
+      onClick.bind="toggleMenu"
+      class="props.class"
+    />
+    <Menu t-if="isActive" position="state.position" menuItems="state.menuItems" onClose="() => {}"/>
+  </div>
+
+  <t t-name="o-spreadsheet-TopBarFontSizeEditor">
+    <FontSizeEditor
+      currentFontSize="currentFontSize"
+      onFontSizeChanged.bind="this.setFontSize"
+      class="props.class"
+      onToggle.bind="this.onToggle"
+      onFocusInput.bind="this.onFocusInput"
+    />
+  </t>
+
+  <div
+    t-name="o-spreadsheet-DropdownAction"
+    class="o-dropdown"
+    t-ref="actionRef"
+    t-on-click.stop="">
+    <ActionButton
+      action="props.parentAction"
+      hasTriangleDownIcon="true"
+      onClick.bind="toggleDropdown"
+      class="props.class"
+    />
+    <Popover t-if="isActive" t-props="popoverProps">
+      <div class="o-dropdown-content p-1" t-if="isActive" t-on-click.stop="">
+        <div class="o-dropdown-line">
+          <t t-foreach="props.childActions" t-as="action" t-key="action_index">
+            <ActionButton action="action" class="props.childClass"/>
+          </t>
+        </div>
+      </div>
+    </Popover>
+  </div>
+
+  <t t-name="o-spreadsheet-ColorEditor">
+    <div class="d-flex align-items-center">
+      <ColorPickerWidget
+        currentColor="currentColor"
+        toggleColorPicker.bind="onClick"
+        showColorPicker="isMenuOpen"
+        onColorPicked="(color) => this.setColor(color)"
+        title="props.title"
+        icon="props.icon"
+        dropdownMaxHeight="dropdownMaxHeight"
+        class="props.class"
+      />
+    </div>
   </t>
 
   <div t-name="o-spreadsheet-TextInput" class="w-100">
@@ -352,7 +328,7 @@
   </t>
 
   <t t-name="o-spreadsheet-TableDropdownButton">
-    <div class="o-table-widget d-flex align-item-center">
+    <div class="o-table-widget d-flex align-item-center" t-att-class="props.class">
       <ActionButton
         action="action"
         hasTriangleDownIcon="true"
@@ -2745,6 +2721,40 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-FunnelChartDesignPanel">
+    <GeneralDesignEditor
+      figureId="props.figureId"
+      definition="props.definition"
+      updateChart="props.updateChart">
+      <t t-set-slot="general-extension">
+        <Section class="'pt-0'" title.translate="Values">
+          <Checkbox
+            name="'showValues'"
+            label.translate="Show values"
+            value="props.definition.showValues"
+            onChange="(showValues) => props.updateChart(this.props.figureId, { showValues })"
+          />
+        </Section>
+      </t>
+    </GeneralDesignEditor>
+
+    <SidePanelCollapsible collapsedAtInit="false" title.translate="Funnel options">
+      <t t-set-slot="content">
+        <Section class="'o-funnel-colors pt-0'" title.translate="Funnel colors">
+          <t t-foreach="getFunnelColorItems()" t-as="item" t-key="item_index">
+            <div class="d-flex align-items-center mb-2" t-att-data-id="item_index">
+              <RoundColorPicker
+                currentColor="item.color"
+                onColorPicked="(color) => this.updateFunnelItemColor(item_index, color)"
+              />
+              <span class="ps-2" t-esc="item.label"/>
+            </div>
+          </t>
+        </Section>
+      </t>
+    </SidePanelCollapsible>
+  </t>
+
   <t t-name="o-spreadsheet-ComboChartDesignPanel">
     <GeneralDesignEditor
       figureId="props.figureId"
@@ -3134,6 +3144,14 @@
       <circle cx="16" cy="16" r="13" stroke="#444"/>
     </svg>
   </t>
+  <t t-name="o-spreadsheet-ChartPreview.FUNNEL_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <path stroke="#0074d9" fill="#c4e4ff" d="M2.5,6.5 h44 l-5,7 h-34 l-5,-7 h1"/>
+      <path stroke="#eb6d00" fill="#ffe1c8" d="M9.5,16.5 h30 l-3,7 h-25 l-3,-7 h1"/>
+      <path stroke="#0074d9" fill="#c4e4ff" d="M12.5,26.5 h23 l-8,7 h-7 l-8,-7 h1"/>
+      <path stroke="#eb6d00" fill="#ffe1c8" d="M21.5,35.5 h5 l-2.5,7 l-2.5,-7 h1"/>
+    </svg>
+  </t>
 
   <t t-name="o-spreadsheet.ChartTitle">
     <t t-set="placeholder">Add a title</t>
@@ -3598,6 +3616,7 @@
     <t t-portal="'.o-spreadsheet'">
       <div
         class="o-popover"
+        t-att-class="props.class"
         t-ref="popover"
         t-on-wheel="props.onMouseWheel"
         t-att-style="popoverStyle"
@@ -3680,6 +3699,7 @@
       </div>
       <Menu
         t-if="subMenu.isOpen"
+        t-key="subMenu.parentMenu.id"
         position="subMenuPosition"
         menuItems="subMenu.menuItems"
         depth="props.depth + 1"
@@ -3882,6 +3902,19 @@
       />
     </svg>
   </t>
+  <t t-name="o-spreadsheet-Icon.COPY_AS_IMAGE">
+    <svg class="o-icon">
+      <path
+        fill="currentColor"
+        d="m 14,15 v 1.5 H 2.5147386 c -0.5522847,0 -1,-0.447715 -1,-1 V 3 H 3 V 14 c 0,0.552285 0.4477153,1 1,1 h 10"
+      />
+      <path
+        fill="currentColor"
+        d="M 3.8194506,2.0480809 A 1.1084934,1.1763958 0 0 1 4.927944,0.87168505 H 15.273882 A 1.1084934,1.1763958 0 0 1 16.382375,2.0480809 V 13.027775 a 1.1084934,1.1763958 0 0 1 -1.108493,1.176396 H 4.927944 A 1.1084934,1.1763958 0 0 1 3.8194506,13.027775 V 2.0480809 H 4.927944 V 13.027775 H 15.273882 V 2.0480809 H 4.927944 M 12.3179,5.5772683 10.839908,9.1064553 9.7314149,7.93006 8.2534245,9.8907193 7.1449309,8.7143233 5.6669395,11.067114 H 14.534886 M 6.0364374,4.4008725 a 1.1084936,1.176396 0 0 1 2.2169871,0 1.1084936,1.176396 0 0 1 -2.2169871,0"
+        id="path1-5"
+      />
+    </svg>
+  </t>
   <t t-name="o-spreadsheet-Icon.PASTE">
     <svg class="o-icon">
       <path
@@ -4771,6 +4804,11 @@
       <i class="fa fa-eye-slash"/>
     </div>
   </t>
+  <t t-name="o-spreadsheet-Icon.DOWNLOAD">
+    <div class="o-icon">
+      <i class="fa fa-download"/>
+    </div>
+  </t>
 
   <t t-name="o-spreadsheet-IconPicker">
     <div class="o-icon-picker">
@@ -5213,7 +5251,7 @@
           class="o-font-size o-number-input bg-transparent border-0"
           t-on-keydown="onInputKeydown"
           t-on-wheel.prevent.stop=""
-          t-on-click.stop=""
+          t-on-click.stop="props.onFocusInput"
           t-on-focus.stop="onInputFocused"
           t-att-value="props.currentFontSize"
           t-on-change="setSizeFromInput"
@@ -5577,7 +5615,7 @@
   <t t-name="o-spreadsheet-TopBarComposer">
     <div class="o-topbar-composer-container w-100">
       <div
-        class="o-topbar-composer position-relative bg-white user-select-text"
+        class="o-topbar-composer position-relative bg-white user-select-text d-flex"
         t-on-click.stop=""
         t-att-style="containerStyle">
         <Composer
@@ -5722,13 +5760,9 @@
         />
       </div>
       <div
-        t-if="props.focus !== 'inactive' and !assistant.forcedClosed and assistantIsAvailable"
-        class="o-composer-assistant shadow"
-        t-att-style="assistantStyle"
-        t-on-wheel.stop=""
-        t-on-pointerdown.prevent.stop=""
-        t-on-click.prevent.stop=""
-        t-on-pointerup.prevent.stop="">
+        class="o-composer-assistant-container shadow position-absolute"
+        t-att-style="assistantContainerStyle"
+        t-if="props.focus !== 'inactive' and !assistant.forcedClosed and assistantIsAvailable">
         <span
           role="button"
           t-on-click="closeAssistant"
@@ -5736,23 +5770,31 @@
           <i class="fa fa-circle fa-stack-1x fa-inverse"/>
           <i class="fa fa-times-circle fa-stack-1x text-muted"/>
         </span>
-        <FunctionDescriptionProvider
-          t-if="functionDescriptionState.showDescription"
-          functionName="functionDescriptionState.functionName"
-          functionDescription="functionDescriptionState.functionDescription"
-          argToFocus="functionDescriptionState.argToFocus"
-        />
         <div
-          t-if="functionDescriptionState.showDescription and autoCompleteState.provider"
-          class="border-top"
-        />
-        <TextValueProvider
-          t-if="autoCompleteState.provider"
-          proposals="autoCompleteState.provider.proposals"
-          selectedIndex="autoCompleteState.selectedIndex"
-          onValueSelected.bind="this.autoComplete"
-          onValueHovered.bind="this.updateAutoCompleteIndex"
-        />
+          class="o-composer-assistant overflow-auto"
+          t-att-style="assistantStyle"
+          t-on-wheel.stop=""
+          t-on-pointerdown.prevent.stop=""
+          t-on-click.prevent.stop=""
+          t-on-pointerup.prevent.stop="">
+          <FunctionDescriptionProvider
+            t-if="functionDescriptionState.showDescription"
+            functionName="functionDescriptionState.functionName"
+            functionDescription="functionDescriptionState.functionDescription"
+            argToFocus="functionDescriptionState.argToFocus"
+          />
+          <div
+            t-if="functionDescriptionState.showDescription and autoCompleteState.provider"
+            class="border-top"
+          />
+          <TextValueProvider
+            t-if="autoCompleteState.provider"
+            proposals="autoCompleteState.provider.proposals"
+            selectedIndex="autoCompleteState.selectedIndex"
+            onValueSelected.bind="this.autoComplete"
+            onValueHovered.bind="this.updateAutoCompleteIndex"
+          />
+        </div>
       </div>
     </div>
   </t>
@@ -6064,7 +6106,7 @@
     <div class="d-flex position-relative" title="Borders">
       <span
         t-ref="borderEditorButton"
-        t-on-click.stop="props.toggleBorderEditor"
+        t-on-click.stop="toggleBorderEditor"
         t-att-class="props.class ? props.class : ''"
         t-att-disabled="props.disabled">
         <span t-att-style="iconStyle">
@@ -6072,14 +6114,14 @@
         </span>
       </span>
       <BorderEditor
-        t-if="props.showBorderEditor"
+        t-if="isActive"
         onBorderColorPicked.bind="onBorderColorPicked"
         onBorderStylePicked.bind="onBorderStylePicked"
         onBorderPositionPicked.bind="onBorderPositionPicked"
         currentBorderColor="state.currentColor"
         currentBorderStyle="state.currentStyle"
         currentBorderPosition="state.currentPosition"
-        maxHeight="props.dropdownMaxHeight"
+        maxHeight="dropdownMaxHeight"
         anchorRect="borderEditorAnchorRect"
       />
     </div>

package/package.json

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