@odoo/o-spreadsheet 17.1.0-alpha.2 → 17.1.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 17.1.0-alpha.2
- @date 2023-11-03T12:25:57.535Z
- @hash 0595868
+ @version 17.1.0-alpha.4
+ @date 2023-11-24T13:12:58.738Z
+ @hash 255821b
 -->
 <odoo>
   <t t-name="o-spreadsheet-ActionButton">
@@ -1227,25 +1227,27 @@
         t-foreach="env.model.getters.getHiddenRowsGroups(env.model.getters.getActiveSheetId())"
         t-as="hiddenItem"
         t-key="hiddenItem_index">
-        <t t-if="!hiddenItem.includes(0)">
-          <div
-            class="o-unhide"
-            t-att-data-index="hiddenItem_index"
-            t-attf-style="top:{{unhideStyleValue(hiddenItem[0]) - 17}}px;"
-            t-on-click="() => this.unhide(hiddenItem)">
-            <t t-call="o-spreadsheet-Icon.TRIANGLE_UP"/>
-          </div>
-        </t>
-        <t
-          t-if="!hiddenItem.includes(env.model.getters.getNumberRows(env.model.getters.getActiveSheetId())-1)">
-          <div
-            class="o-unhide"
-            t-att-data-index="hiddenItem_index"
-            t-attf-style="top:{{unhideStyleValue(hiddenItem[0]) + 3}}px;"
-            t-on-click="() => this.unhide(hiddenItem)">
-            <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
-          </div>
-        </t>
+        <div
+          class="o-unhide-buttons position-relative float-end"
+          t-att-style="getUnhideButtonStyle(hiddenItem[0])">
+          <t t-if="!hiddenItem.includes(0)">
+            <div
+              class="o-unhide rounded mb-1"
+              t-att-data-index="hiddenItem_index"
+              t-on-click="() => this.unhide(hiddenItem)">
+              <t t-call="o-spreadsheet-Icon.TRIANGLE_UP"/>
+            </div>
+          </t>
+          <t
+            t-if="!hiddenItem.includes(env.model.getters.getNumberRows(env.model.getters.getActiveSheetId())-1)">
+            <div
+              class="o-unhide rounded"
+              t-att-data-index="hiddenItem_index"
+              t-on-click="() => this.unhide(hiddenItem)">
+              <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
+            </div>
+          </t>
+        </div>
       </t>
     </div>
   </t>
@@ -1284,25 +1286,27 @@
         t-foreach="env.model.getters.getHiddenColsGroups(env.model.getters.getActiveSheetId())"
         t-as="hiddenItem"
         t-key="hiddenItem_index">
-        <t t-if="!hiddenItem.includes(0)">
-          <div
-            class="o-unhide"
-            t-att-data-index="hiddenItem_index"
-            t-attf-style="left:{{unhideStyleValue(hiddenItem[0]) - 17}}px; margin-right:6px;"
-            t-on-click="() => this.unhide(hiddenItem)">
-            <t t-call="o-spreadsheet-Icon.TRIANGLE_LEFT"/>
-          </div>
-        </t>
-        <t
-          t-if="!hiddenItem.includes(env.model.getters.getNumberCols(env.model.getters.getActiveSheetId())-1)">
-          <div
-            class="o-unhide"
-            t-att-data-index="hiddenItem_index"
-            t-attf-style="left:{{unhideStyleValue(hiddenItem[0]) + 3}}px;"
-            t-on-click="() => this.unhide(hiddenItem)">
-            <t t-call="o-spreadsheet-Icon.TRIANGLE_RIGHT"/>
-          </div>
-        </t>
+        <div
+          class="o-unhide-buttons position-relative h-100 d-flex align-items-center"
+          t-att-style="getUnhideButtonStyle(hiddenItem[0])">
+          <t t-if="!hiddenItem.includes(0)">
+            <div
+              class="o-unhide rounded"
+              t-att-data-index="hiddenItem_index"
+              t-on-click="() => this.unhide(hiddenItem)">
+              <t t-call="o-spreadsheet-Icon.TRIANGLE_LEFT"/>
+            </div>
+          </t>
+          <t
+            t-if="!hiddenItem.includes(env.model.getters.getNumberCols(env.model.getters.getActiveSheetId())-1)">
+            <div
+              class="o-unhide rounded"
+              t-att-data-index="hiddenItem_index"
+              t-on-click="() => this.unhide(hiddenItem)">
+              <t t-call="o-spreadsheet-Icon.TRIANGLE_RIGHT"/>
+            </div>
+          </t>
+        </div>
       </t>
     </div>
   </t>
@@ -1687,23 +1691,23 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.TRIANGLE_DOWN">
-    <svg class="o-icon">
-      <polygon fill="currentColor" points="0 0 4 4 8 0" transform="translate(5 7)"/>
+    <svg class="o-icon" viewBox="0 0 18 18">
+      <polygon fill="currentColor" points="5 7 9 11 13 7"/>
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.TRIANGLE_UP">
-    <svg class="o-icon">
-      <polygon fill="currentColor" points="4 0 0 4 8 4" transform="translate(5 7)"/>
+    <svg class="o-icon" transform="rotate(180)">
+      <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.TRIANGLE_RIGHT">
-    <svg class="o-icon">
-      <polygon fill="currentColor" points="0 0 4 4 0 8" transform="translate(5 5)"/>
+    <svg class="o-icon" transform="rotate(-90)">
+      <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.TRIANGLE_LEFT">
-    <svg class="o-icon">
-      <polygon fill="currentColor" points="4 0 0 4 4 8" transform="translate(5 5)"/>
+    <svg class="o-icon" transform="rotate(90)" viewBox="0 0 18 18">
+      <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.BOLD">
@@ -1963,10 +1967,9 @@
       />
     </svg>
   </t>
-  /** Font Awesome by Dave Gandy
- *  http://fontawesome.io/
- *  https://fontawesome.com/license
- */
+  <!-- Font Awesome by Dave Gandy
+http://fontawesome.io/
+https://fontawesome.com/license -->
   <t t-name="o-spreadsheet-Icon.CARET_UP">
     <svg class="caret-up" viewBox="0 0 320 512">
       <path
@@ -2433,7 +2436,7 @@
               t-att-data-name="menuItem.id"
               t-on-click="(ev) => this.onClickMenu(menuItem, menuItem_index, ev)"
               t-on-mouseover="(ev) => this.onMouseOver(menuItem, menuItem_index, ev)"
-              class="o-menu-item"
+              class="o-menu-item d-flex align-items-center"
               t-att-class="{ 'o-menu-root': isMenuRoot, 'disabled': !isMenuEnabled, 'o-menu-item-active': isParentMenu(subMenu, menuItem)}"
               t-att-style="getColor(menuItem)">
               <div class="d-flex w-100">
@@ -2447,11 +2450,17 @@
                   class="o-menu-item-description ms-auto text-truncate"
                   t-esc="description"
                 />
+                <t t-set="secondaryIcon" t-value="menuItem.secondaryIcon(env)"/>
                 <div
                   t-if="isMenuRoot"
                   class="o-menu-item-root align-middle ms-auto"
                   t-call="o-spreadsheet-Icon.TRIANGLE_RIGHT"
                 />
+                <div
+                  t-elif="secondaryIcon"
+                  class="o-menu-item-root align-middle ms-auto"
+                  t-call="{{secondaryIcon}}"
+                />
               </div>
             </div>
           </t>
@@ -3981,6 +3990,7 @@
             t-ref="searchInput"
             class="o-input o-input-with-count"
             t-on-input="onInput"
+            t-on-focus="onFocusSearch"
             t-on-keydown="onKeydownSearch"
           />
           <div class="o-input-count" t-if="hasSearchResult">
@@ -3988,35 +3998,62 @@
             /
             <t t-esc="env.model.getters.getSearchMatches().length"/>
           </div>
-          <div t-elif="!pendingSearch and state.toSearch !== ''" class="o-input-count">0 / 0</div>
+          <div t-elif="!pendingSearch and toSearch !== ''" class="o-input-count">0 / 0</div>
+        </div>
+        <select
+          class="o-input o-type-selector o-type-range-selector mt-3 mb-3"
+          t-on-change="changeSearchScope">
+          <option value="allSheets">All sheets</option>
+          <option value="activeSheet">Current sheet</option>
+          <option value="specificRange">Specific range</option>
+        </select>
+        <div t-if="searchOptions.searchScope === 'specificRange'">
+          <SelectionInput
+            ranges="() => [this.dataRange]"
+            onSelectionChanged="(ranges) => this.onSearchRangeChanged(ranges)"
+            onSelectionConfirmed.bind="updateDataRange"
+            hasSingleRange="true"
+            required="true"
+          />
         </div>
         <div>
           <!-- TODO: go through this css, the group misses a padding and could profit from BootStrap -->
           <label class="o-checkbox mt-1">
             <input
-              t-model="state.searchOptions.matchCase"
-              t-on-change="updateSearch"
+              t-att-checked="searchOptions.matchCase"
+              t-on-change="searchMatchCase"
               type="checkbox"
             />
             <span>Match case</span>
           </label>
           <label class="o-checkbox">
             <input
-              t-model="state.searchOptions.exactMatch"
-              t-on-change="updateSearch"
+              t-att-checked="searchOptions.exactMatch"
+              t-on-change="searchExactMatch"
               type="checkbox"
             />
             <span>Match entire cell content</span>
           </label>
           <label class="o-checkbox">
             <input
-              t-model="state.searchOptions.searchFormulas"
+              t-att-checked="searchOptions.searchFormulas"
               t-on-change="searchFormulas"
               type="checkbox"
             />
             <span>Search in formulas</span>
           </label>
         </div>
+        <div class="o-matches-count mt-4" t-if="toSearch !== ''">
+          <div t-if="searchOptions.searchScope === 'specificRange' and dataRange != ''">
+            <t t-esc="specificRangeMatchesCount"/>
+          </div>
+          <div>
+            <t t-esc="currentSheetMatchesCount"/>
+          </div>
+          <div>
+            <t t-esc="allSheetsMatchesCount"/>
+          </div>
+        </div>
       </div>
       <div class="o-sidePanelButtons">
         <button
@@ -4035,7 +4072,7 @@
           <input
             type="text"
             class="o-input o-input-without-count"
-            t-model="state.replaceWith"
+            t-ref="replaceInput"
             t-on-keydown="onKeydownReplace"
           />
         </div>
@@ -4254,6 +4291,7 @@
     <div
       class="o-spreadsheet"
       t-on-keydown="(ev) => !env.isDashboard() and this.onKeydown(ev)"
+      t-ref="spreadsheet"
       t-att-style="getStyle()">
       <t t-if="env.isDashboard()">
         <SpreadsheetDashboard/>

package/package.json

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