@odoo/o-spreadsheet 17.3.0-alpha.5 → 17.3.0-alpha.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/o-spreadsheet.cjs.js +942 -496
  2. package/dist/o-spreadsheet.d.ts +396 -269
  3. package/dist/o-spreadsheet.esm.js +942 -496
  4. package/dist/o-spreadsheet.iife.js +942 -496
  5. package/dist/o-spreadsheet.iife.min.js +381 -328
  6. package/dist/o_spreadsheet.xml +210 -216
  7. package/package.json +2 -2
package/dist/o_spreadsheet.xml CHANGED
@@ -1,9 +1,9 @@
1
1
  <!--
2
2
  This file is generated by o-spreadsheet build tools. Do not edit it.
3
3
  @see https://github.com/odoo/o-spreadsheet
4
- @version 17.3.0-alpha.5
5
- @date 2024-04-18T14:39:41.198Z
6
- @hash cff0ef9
4
+ @version 17.3.0-alpha.7
5
+ @date 2024-05-07T10:43:31.043Z
6
+ @hash 853c266
7
7
  -->
8
8
  <odoo>
9
9
  <t t-name="o-spreadsheet-ActionButton">
@@ -18,7 +18,7 @@
18
18
  <t t-call="{{iconTitle}}"/>
19
19
  </span>
20
20
  <t t-if="props.hasTriangleDownIcon">
21
- <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
21
+ <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
22
22
  </t>
23
23
  </span>
24
24
  </t>
@@ -103,7 +103,7 @@
103
103
  dropdownMaxHeight="this.props.dropdownMaxHeight"
104
104
  class="'o-dropdown-button o-border-picker-button'"
105
105
  />
106
- <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
106
+ <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
107
107
  </div>
108
108
  <div
109
109
  class="o-border-style-tool d-flex align-items-center justify-content-center o-hoverable-button"
@@ -111,7 +111,7 @@
111
111
  t-ref="lineStyleButton"
112
112
  t-on-click.stop="(ev) => this.toggleDropdownTool('borderTypeTool')">
113
113
  <t t-call="o-spreadsheet-Icon.BORDER_TYPE"/>
114
- <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
114
+ <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
115
115
  <Popover
116
116
  t-props="lineStylePickerPopoverProps"
117
117
  t-if="state.activeTool === 'borderTypeTool'">
@@ -279,7 +279,7 @@
279
279
  t-att-contenteditable="state.isEditing ? 'true': 'false'"
280
280
  />
281
281
  <span class="o-sheet-icon ms-1" t-on-click.stop="(ev) => this.onIconClick(ev)">
282
- <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
282
+ <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
283
283
  </span>
284
284
  </div>
285
285
  </Ripple>
@@ -289,11 +289,11 @@
289
289
  <t t-set="selectedStatistic" t-value="getSelectedStatistic()"/>
290
290
  <Ripple class="'ms-auto'" t-if="selectedStatistic !== undefined">
291
291
  <div
292
- class="o-selection-statistic text-truncate user-select-none me-4 bg-white rounded shadow"
292
+ class="o-selection-statistic text-truncate user-select-none me-4 bg-white rounded shadow d-flex align-items-center"
293
293
  t-on-click="listSelectionStatistics">
294
294
  <t t-esc="selectedStatistic"/>
295
295
  <span class="ms-2">
296
- <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
296
+ <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
297
297
  </span>
298
298
  </div>
299
299
  </Ripple>
@@ -365,7 +365,7 @@
365
365
  <div class="o-hue-container" t-on-pointerdown="dragHuePointer">
366
366
  <div class="o-hue-picker" t-on-click.stop=""/>
367
367
  <div class="o-hue-slider pe-none" t-att-style="sliderStyle">
368
- <t t-call="o-spreadsheet-Icon.TRIANGLE_UP"/>
368
+ <t t-call="o-spreadsheet-Icon.CARET_UP"/>
369
369
  </div>
370
370
  </div>
371
371
  <div class="o-custom-input-preview">
@@ -832,15 +832,17 @@
832
832
 
833
833
  <t t-name="o-spreadsheet-FilterMenu">
834
834
  <div class="o-filter-menu d-flex flex-column bg-white" t-on-wheel.stop="">
835
- <div t-if="!isReadonly">
836
- <div class="o-filter-menu-item" t-on-click="() => this.sortFilterZone('ascending')">
837
- Sort ascending (A ⟶ Z)
838
- </div>
839
- <div class="o-filter-menu-item" t-on-click="() => this.sortFilterZone('descending')">
840
- Sort descending (Z ⟶ A)
835
+ <t t-if="isSortable">
836
+ <div>
837
+ <div class="o-filter-menu-item" t-on-click="() => this.sortFilterZone('ascending')">
838
+ Sort ascending (A ⟶ Z)
839
+ </div>
840
+ <div class="o-filter-menu-item" t-on-click="() => this.sortFilterZone('descending')">
841
+ Sort descending (Z ⟶ A)
842
+ </div>
841
843
  </div>
842
- </div>
843
- <div class="o-separator" t-if="!isReadonly"/>
844
+ <div class="o-separator"/>
845
+ </t>
844
846
  <div class="o-filter-menu-actions">
845
847
  <div class="o-filter-menu-action-text" t-on-click="selectAll">Select all</div>
846
848
  <div class="o-filter-menu-action-text" t-on-click="clearAll">Clear</div>
@@ -929,7 +931,7 @@
929
931
  t-ref="inputFontSize"
930
932
  />
931
933
  <span>
932
- <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
934
+ <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
933
935
  </span>
934
936
  </div>
935
937
  <div
@@ -1228,14 +1230,14 @@
1228
1230
  t-att-class="{'invisible': hiddenItem.includes(0)}"
1229
1231
  t-att-data-index="hiddenItem_index"
1230
1232
  t-on-click="() => this.unhide(hiddenItem)">
1231
- <t t-call="o-spreadsheet-Icon.TRIANGLE_UP"/>
1233
+ <t t-call="o-spreadsheet-Icon.CARET_UP"/>
1232
1234
  </div>
1233
1235
  <div
1234
1236
  class="o-unhide rounded"
1235
1237
  t-att-class="{'invisible': hiddenItem.includes(env.model.getters.getNumberRows(env.model.getters.getActiveSheetId())-1)}"
1236
1238
  t-att-data-index="hiddenItem_index"
1237
1239
  t-on-click="() => this.unhide(hiddenItem)">
1238
- <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
1240
+ <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
1239
1241
  </div>
1240
1242
  </div>
1241
1243
  </t>
@@ -1284,14 +1286,14 @@
1284
1286
  t-att-class="{'invisible': hiddenItem.includes(0)}"
1285
1287
  t-att-data-index="hiddenItem_index"
1286
1288
  t-on-click="() => this.unhide(hiddenItem)">
1287
- <t t-call="o-spreadsheet-Icon.TRIANGLE_LEFT"/>
1289
+ <t t-call="o-spreadsheet-Icon.CARET_LEFT"/>
1288
1290
  </div>
1289
1291
  <div
1290
1292
  class="o-unhide rounded"
1291
1293
  t-att-class="{'invisible': hiddenItem.includes(env.model.getters.getNumberCols(env.model.getters.getActiveSheetId())-1)}"
1292
1294
  t-att-data-index="hiddenItem_index"
1293
1295
  t-on-click="() => this.unhide(hiddenItem)">
1294
- <t t-call="o-spreadsheet-Icon.TRIANGLE_RIGHT"/>
1296
+ <t t-call="o-spreadsheet-Icon.CARET_RIGHT"/>
1295
1297
  </div>
1296
1298
  </div>
1297
1299
  </t>
@@ -1440,12 +1442,9 @@
1440
1442
  </svg>
1441
1443
  </t>
1442
1444
  <t t-name="o-spreadsheet-Icon.COPY">
1443
- <svg class="o-icon">
1444
- <path
1445
- fill="currentColor"
1446
- d="M14.5 15.23v1.5H3a1 1 0 0 1-1-1V3.23h1.5v11a1 1 0 0 0 1 1h10m0-3.5a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1h6.5a1 1 0 0 1 1 1m-9-2.5a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1H15a1 1 0 0 0 1-1v-11a1 1 0 0 0-1-1"
1447
- />
1448
- </svg>
1445
+ <div class="o-icon">
1446
+ <i class="fa fa-clone"/>
1447
+ </div>
1449
1448
  </t>
1450
1449
  <t t-name="o-spreadsheet-Icon.CUT">
1451
1450
  <svg class="o-icon">
@@ -1463,22 +1462,6 @@
1463
1462
  />
1464
1463
  </svg>
1465
1464
  </t>
1466
- <t t-name="o-spreadsheet-Icon.FIND_AND_REPLACE">
1467
- <svg class="o-icon">
1468
- <path
1469
- fill="currentColor"
1470
- d="M10.75 11.25c-1 .75-2.25 1.25-3.5 1.25-3 0-5.5-2.5-5.5-5.5s2.5-5.5 5.5-5.5 5.5 2.5 5.5 5.5c0 1.25-.5 2.5-1.25 3.5l.25.25h.75l4 4-1.5 1.5-4-4v-.75l-.25-.25ZM7.25 11c2.25 0 4-1.75 4-4s-1.75-4-4-4-4 1.75-4 4 1.75 4 4 4"
1471
- />
1472
- </svg>
1473
- </t>
1474
- <t t-name="o-spreadsheet-Icon.DELETE">
1475
- <svg class="o-icon">
1476
- <path
1477
- fill="currentColor"
1478
- d="M12 1.75v-1H6v1H1.5v2h1v12a1.5 1.5 0 0 0 1.5 1.5h10a1.5 1.5 0 0 0 1.5-1.5v-12h1v-2M4 15.75v-12h10v12Zm2-10.5h2v9H6Zm4 0h2v9h-2"
1479
- />
1480
- </svg>
1481
- </t>
1482
1465
  <t t-name="o-spreadsheet-Icon.CLEAR">
1483
1466
  <svg class="o-icon">
1484
1467
  <path
@@ -1504,12 +1487,9 @@
1504
1487
  </svg>
1505
1488
  </t>
1506
1489
  <t t-name="o-spreadsheet-Icon.SHOW">
1507
- <svg class="o-icon" viewBox="0 0 24 24" fill="none" stroke="currentcolor">
1508
- <path stroke-width="1.35" d="M1,12 S11.5,0 23,12 M1,12 S11.5,24 23,12"/>
1509
- <path d="M1.26,11.7 A .4 .3 1 0 0 1.2,12.3"/>
1510
- <path d="M22.8,11.7 A .4 .3 1 0 1 22.75,12.3"/>
1511
- <circle stroke-width="1.35" stroke="currentcolor" cx="12" cy="12" r="3"/>
1512
- </svg>
1490
+ <div class="o-icon">
1491
+ <i class="fa fa-eye"/>
1492
+ </div>
1513
1493
  </t>
1514
1494
  <t t-name="o-spreadsheet-Icon.FORMULA">
1515
1495
  <svg class="o-icon">
@@ -1624,34 +1604,24 @@
1624
1604
  </svg>
1625
1605
  </t>
1626
1606
  <t t-name="o-spreadsheet-Icon.INSERT_CHART">
1627
- <svg class="o-icon">
1628
- <path
1629
- fill="currentColor"
1630
- d="M.5 2A1.5 1.5 0 0 1 2 .5h14A1.5 1.5 0 0 1 17.5 2v14a1.5 1.5 0 0 1-1.5 1.5H2A1.5 1.5 0 0 1 .5 16V2H2v14h14V2H2m1.5 12.5h2v-7h-2m3 7h2v-10h-2m3 10h2v-5h-2m3 5h2v-11h-2M2 14.5h14v1H2"
1631
- />
1632
- </svg>
1607
+ <div class="o-icon">
1608
+ <i class="fa fa-bar-chart"/>
1609
+ </div>
1633
1610
  </t>
1634
1611
  <t t-name="o-spreadsheet-Icon.INSERT_IMAGE">
1635
- <svg class="o-icon" fill="currentColor">
1636
- <path
1637
- d="M.5 2A1.5 1.5 0 0 1 2 .5h14A1.5 1.5 0 0 1 17.5 2v14a1.5 1.5 0 0 1-1.5 1.5H2A1.5 1.5 0 0 1 .5 16V2H2v14h14V2H2m10 4.5L10 11 8.5 9.5l-2 2.5L5 10.5l-2 3h12M3.5,5a1.5,1.5,0,0,1,3,0a1.5,1.5,0,0,1,-3,0"
1638
- />
1639
- </svg>
1612
+ <div class="o-icon">
1613
+ <i class="fa fa-file-image-o"/>
1614
+ </div>
1640
1615
  </t>
1641
1616
  <t t-name="o-spreadsheet-Icon.INSERT_LINK">
1642
- <svg class="o-icon" fill="currentColor">
1643
- <path
1644
- d="M6.88 13.69c.19-.19.41-.28.68-.28.27 0 .51.09.72.28.43.45.43.92 0 1.4l-.84.8c-.75.75-1.63 1.12-2.64 1.12-1.04 0-1.93-.37-2.68-1.12C1.37 15.14 1 14.26 1 13.25c0-1.04.37-1.93 1.12-2.68l2.96-2.96c.93-.9 1.89-1.42 2.88-1.54.98-.12 1.84.17 2.56.86.21.21.32.45.32.72 0 .26-.1.51-.32.72-.48.43-.95.43-1.4 0-.67-.64-1.55-.41-2.67.68l-2.93 2.92c-.35.35-.52.77-.52 1.28s.17.92.52 1.24c.35.35.76.52 1.26.52.49 0 .91-.17 1.26-.52l.84-.8m9-11.48c.75.75 1.12 1.63 1.12 2.64 0 1.04-.37 1.94-1.12 2.68l-3.16 3.16c-.99.96-1.99 1.44-3 1.44-.83 0-1.57-.33-2.24-1a.913.913 0 0 1-.28-.68c0-.27.09-.5.27-.72.19-.19.43-.28.71-.28.28 0 .51.09.7.28.66.64 1.48.48 2.44-.48l3.16-3.12c.37-.37.56-.8.56-1.28 0-.51-.19-.92-.56-1.24-.32-.35-.7-.56-1.12-.62-.43-.07-.83.07-1.2.42l-1 1c-.22.19-.45.28-.72.28-.26 0-.5-.09-.68-.28-.46-.45-.46-.92 0-1.4l1-1c.72-.72 1.56-1.06 2.54-1.02.97.04 1.83.45 2.58 1.22"
1645
- />
1646
- </svg>
1617
+ <div class="o-icon">
1618
+ <i class="fa fa-link"/>
1619
+ </div>
1647
1620
  </t>
1648
1621
  <t t-name="o-spreadsheet-Icon.INSERT_CHECKBOX">
1649
- <svg class="o-icon">
1650
- <path
1651
- fill="currentColor"
1652
- d="M.5 2A1.5 1.5 0 0 1 2 .5h14A1.5 1.5 0 0 1 17.5 2v14a1.5 1.5 0 0 1-1.5 1.5H2A1.5 1.5 0 0 1 .5 16V2H2v14h14V2H2m13 4-1.4-1.4L7 11.2 4.4 8.6 3 10l4 4z"
1653
- />
1654
- </svg>
1622
+ <div class="o-icon">
1623
+ <i class="fa fa-check-square-o"/>
1624
+ </div>
1655
1625
  </t>
1656
1626
  <t t-name="o-spreadsheet-Icon.INSERT_DROPDOWN">
1657
1627
  <svg class="o-icon">
@@ -1693,26 +1663,6 @@
1693
1663
  />
1694
1664
  </svg>
1695
1665
  </t>
1696
- <t t-name="o-spreadsheet-Icon.TRIANGLE_DOWN">
1697
- <svg class="o-icon" viewBox="0 0 18 18">
1698
- <polygon fill="currentColor" points="5 7 9 11 13 7"/>
1699
- </svg>
1700
- </t>
1701
- <t t-name="o-spreadsheet-Icon.TRIANGLE_UP">
1702
- <svg class="o-icon" transform="rotate(180)">
1703
- <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
1704
- </svg>
1705
- </t>
1706
- <t t-name="o-spreadsheet-Icon.TRIANGLE_RIGHT">
1707
- <svg class="o-icon" transform="rotate(-90)">
1708
- <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
1709
- </svg>
1710
- </t>
1711
- <t t-name="o-spreadsheet-Icon.TRIANGLE_LEFT">
1712
- <svg class="o-icon" transform="rotate(90)" viewBox="0 0 18 18">
1713
- <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
1714
- </svg>
1715
- </t>
1716
1666
  <t t-name="o-spreadsheet-Icon.BOLD">
1717
1667
  <svg class="o-icon">
1718
1668
  <path
@@ -1955,70 +1905,44 @@
1955
1905
  </t>
1956
1906
 
1957
1907
  <t t-name="o-spreadsheet-Icon.EDIT">
1958
- <svg class="o-icon" viewBox="0 0 576 512">
1959
- <path
1960
- fill="currentColor"
1961
- d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"
1962
- />
1963
- </svg>
1908
+ <div class="o-icon">
1909
+ <i class="fa fa-pencil-square-o"/>
1910
+ </div>
1964
1911
  </t>
1965
1912
  <t t-name="o-spreadsheet-Icon.UNLINK">
1966
- <svg class="o-icon" viewBox="0 0 512 512">
1967
- <path
1968
- fill="currentColor"
1969
- d="M304.083 405.907c4.686 4.686 4.686 12.284 0 16.971l-44.674 44.674c-59.263 59.262-155.693 59.266-214.961 0-59.264-59.265-59.264-155.696 0-214.96l44.675-44.675c4.686-4.686 12.284-4.686 16.971 0l39.598 39.598c4.686 4.686 4.686 12.284 0 16.971l-44.675 44.674c-28.072 28.073-28.072 73.75 0 101.823 28.072 28.072 73.75 28.073 101.824 0l44.674-44.674c4.686-4.686 12.284-4.686 16.971 0l39.597 39.598zm-56.568-260.216c4.686 4.686 12.284 4.686 16.971 0l44.674-44.674c28.072-28.075 73.75-28.073 101.824 0 28.072 28.073 28.072 73.75 0 101.823l-44.675 44.674c-4.686 4.686-4.686 12.284 0 16.971l39.598 39.598c4.686 4.686 12.284 4.686 16.971 0l44.675-44.675c59.265-59.265 59.265-155.695 0-214.96-59.266-59.264-155.695-59.264-214.961 0l-44.674 44.674c-4.686 4.686-4.686 12.284 0 16.971l39.597 39.598zm234.828 359.28l22.627-22.627c9.373-9.373 9.373-24.569 0-33.941L63.598 7.029c-9.373-9.373-24.569-9.373-33.941 0L7.029 29.657c-9.373 9.373-9.373 24.569 0 33.941l441.373 441.373c9.373 9.372 24.569 9.372 33.941 0z"
1970
- />
1971
- </svg>
1913
+ <div class="o-icon">
1914
+ <i class="fa fa-chain-broken"/>
1915
+ </div>
1972
1916
  </t>
1973
- <!-- Font Awesome by Dave Gandy
1974
- http://fontawesome.io/
1975
- https://fontawesome.com/license -->
1976
1917
  <t t-name="o-spreadsheet-Icon.CARET_UP">
1977
- <svg class="caret-up" viewBox="0 0 320 512">
1978
- <path
1979
- fill="currentColor"
1980
- d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"
1981
- />
1982
- </svg>
1918
+ <div class="o-icon fa-small">
1919
+ <i class="fa fa-caret-up"/>
1920
+ </div>
1983
1921
  </t>
1984
1922
  <t t-name="o-spreadsheet-Icon.CARET_DOWN">
1985
- <svg class="caret-down" viewBox="0 0 320 512">
1986
- <path
1987
- fill="currentColor"
1988
- d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
1989
- />
1990
- </svg>
1923
+ <div class="o-icon fa-small">
1924
+ <i class="fa fa-caret-down"/>
1925
+ </div>
1991
1926
  </t>
1992
1927
  <t t-name="o-spreadsheet-Icon.CARET_RIGHT">
1993
- <svg class="o-icon caret-right" viewBox="0 0 192 512">
1994
- <path
1995
- d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
1996
- />
1997
- </svg>
1928
+ <div class="o-icon fa-small">
1929
+ <i class="fa fa-caret-right"/>
1930
+ </div>
1998
1931
  </t>
1999
1932
  <t t-name="o-spreadsheet-Icon.CARET_LEFT">
2000
- <svg class="o-icon caret-left" viewBox="0 0 192 512">
2001
- <path
2002
- d="M192 127.338v257.324c0 17.818-21.543 26.741-34.142 14.142L29.196 270.142c-7.81-7.81-7.81-20.474 0-28.284l128.662-128.662c12.599-12.6 34.142-3.676 34.142 14.142z"
2003
- />
2004
- </svg>
1933
+ <div class="o-icon fa-small">
1934
+ <i class="fa fa-caret-left"/>
1935
+ </div>
2005
1936
  </t>
2006
-
2007
1937
  <t t-name="o-spreadsheet-Icon.TRASH">
2008
- <svg class="o-cf-icon trash" viewBox="0 0 448 512">
2009
- <path
2010
- fill="currentColor"
2011
- d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"
2012
- />
2013
- </svg>
1938
+ <div class="o-icon">
1939
+ <i class="fa fa-trash-o"/>
1940
+ </div>
2014
1941
  </t>
2015
1942
  <t t-name="o-spreadsheet-Icon.REFRESH">
2016
- <svg class="o-cf-icon refresh" viewBox="0 0 512 512">
2017
- <path
2018
- fill="currentColor"
2019
- d="M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z"
2020
- />
2021
- </svg>
1943
+ <div class="o-icon">
1944
+ <i class="fa fa-refresh"/>
1945
+ </div>
2022
1946
  </t>
2023
1947
 
2024
1948
  <t t-name="o-spreadsheet-Icon.ARROW_DOWN">
@@ -2121,25 +2045,19 @@ https://fontawesome.com/license -->
2121
2045
  </svg>
2122
2046
  </t>
2123
2047
  <t t-name="o-spreadsheet-Icon.SORT_ASCENDING">
2124
- <svg class="o-icon" fill="currentColor">
2125
- <path d="m3 13-1-1-1 1 3 3 3-3-1-1-1 1V0H3"/>
2126
- <text x="9" y="7" class="small-text">A</text>
2127
- <text x="9.3" y="15" class="small-text">Z</text>
2128
- </svg>
2048
+ <div class="o-icon">
2049
+ <i class="fa fa-sort-alpha-asc"/>
2050
+ </div>
2129
2051
  </t>
2130
2052
  <t t-name="o-spreadsheet-Icon.SORT_DESCENDING">
2131
- <svg class="o-icon" fill="currentColor">
2132
- <path d="m3 13.9-1-1-1 1 3 3 3-3-1-1-1 1V.9H3"/>
2133
- <text x="9.3" y="7.9" class="small-text">Z</text>
2134
- <text x="9" y="15.9" class="small-text">A</text>
2135
- </svg>
2053
+ <div class="o-icon">
2054
+ <i class="fa fa-sort-alpha-desc"/>
2055
+ </div>
2136
2056
  </t>
2137
2057
  <t t-name="o-spreadsheet-Icon.DATA_CLEANUP">
2138
- <svg class="o-icon" fill="currentColor">
2139
- <path
2140
- d="m13.6 6.4-2.1-2.1c-.4-.4-1-.4-1.4 0l-8.8 8.9c-.4.4-.4 1 0 1.4l2.1 2.1c.4.4 1 .4 1.4 0l8.8-8.9c.4-.4.4-1 0-1.4M8 8.5 10.5 6l1.4 1.4-2.5 2.5m3-7 1.8.8.8 1.8.8-1.8 1.8-.8-1.8-.8L14.9.4l-.8 1.8M3.5 4l1.7.7.8 1.8.8-1.8 1.8-.8-1.8-.8-.8-1.8-.8 1.8zm13.5 7.7-1.8-.8-.8-1.8-.8 1.8-1.8.8 1.8.8.8 1.8.7-1.8"
2141
- />
2142
- </svg>
2058
+ <div class="o-icon">
2059
+ <i class="fa fa-magic"/>
2060
+ </div>
2143
2061
  </t>
2144
2062
  <t t-name="o-spreadsheet-Icon.FILTER_ICON">
2145
2063
  <svg class="o-cf-icon filter-icon" viewBox="0 0 850 850">
@@ -2150,20 +2068,14 @@ https://fontawesome.com/license -->
2150
2068
  </svg>
2151
2069
  </t>
2152
2070
  <t t-name="o-spreadsheet-Icon.FILTER_ICON_ACTIVE">
2153
- <svg class="o-cf-icon filter-icon-active" viewBox="0 0 18 18">
2154
- <path
2155
- fill="currentColor"
2156
- d="M16.6.5H1.29C.59.5.23 1.35.73 1.85l6.1 6.1v6.8c0 .26.13.5.34.65l2.64 1.85a.79.79 0 0 0 1.25-.65V7.96l6.1-6.1A.79.79 0 0 0 16.6.51"
2157
- />
2158
- </svg>
2071
+ <div class="o-icon filter-icon-active">
2072
+ <i class="fa fa-filter"/>
2073
+ </div>
2159
2074
  </t>
2160
2075
  <t t-name="o-spreadsheet-Icon.SEARCH">
2161
- <svg class="search-icon" width="10" height="10" focusable="false" viewBox="0 0 512 512">
2162
- <path
2163
- fill="currentColor"
2164
- d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"
2165
- />
2166
- </svg>
2076
+ <div class="o-icon">
2077
+ <i class="fa fa-search"/>
2078
+ </div>
2167
2079
  </t>
2168
2080
  <t t-name="o-spreadsheet-Icon.CHECK">
2169
2081
  <svg class="o-icon" viewBox="0 0 24 24">
@@ -2196,12 +2108,9 @@ https://fontawesome.com/license -->
2196
2108
  </svg>
2197
2109
  </t>
2198
2110
  <t t-name="o-spreadsheet-Icon.TRIANGLE_EXCLAMATION">
2199
- <svg class="o-icon" viewBox="0 0 512 512">
2200
- <path
2201
- fill="currentColor"
2202
- d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"
2203
- />
2204
- </svg>
2111
+ <div class="o-icon fa-small">
2112
+ <i class="fa fa-exclamation-triangle"/>
2113
+ </div>
2205
2114
  </t>
2206
2115
  <t t-name="o-spreadsheet-Icon.SPLIT_TEXT">
2207
2116
  <svg class="o-icon">
@@ -2212,12 +2121,9 @@ https://fontawesome.com/license -->
2212
2121
  </svg>
2213
2122
  </t>
2214
2123
  <t t-name="o-spreadsheet-Icon.ERROR">
2215
- <svg class="error-icon" width="14" height="14" viewBox="0 0 512 512">
2216
- <path
2217
- fill="currentColor"
2218
- d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
2219
- />
2220
- </svg>
2124
+ <div class="o-icon">
2125
+ <i class="fa fa-exclamation-circle"/>
2126
+ </div>
2221
2127
  </t>
2222
2128
  <t t-name="o-spreadsheet-Icon.DISPLAY_HEADER">
2223
2129
  <svg class="o-icon" width="18" height="18">
@@ -2460,7 +2366,9 @@ https://fontawesome.com/license -->
2460
2366
  t-att-class="{'disabled': !isMenuEnabled, 'o-menu-item-active': isActive(menuItem)}"
2461
2367
  t-att-style="getColor(menuItem)">
2462
2368
  <div class="d-flex w-100">
2463
- <div t-if="childrenHaveIcon" class="o-menu-item-icon align-middle flex-shrink-0">
2369
+ <div
2370
+ t-if="childrenHaveIcon"
2371
+ class="o-menu-item-icon d-flex align-items-center flex-shrink-0">
2464
2372
  <t t-if="getIconName(menuItem)" t-call="{{getIconName(menuItem)}}"/>
2465
2373
  </div>
2466
2374
  <div class="o-menu-item-name align-middle text-truncate" t-esc="getName(menuItem)"/>
@@ -2474,7 +2382,7 @@ https://fontawesome.com/license -->
2474
2382
  <div
2475
2383
  t-if="isMenuRoot"
2476
2384
  class="o-menu-item-root align-middle ms-auto"
2477
- t-call="o-spreadsheet-Icon.TRIANGLE_RIGHT"
2385
+ t-call="o-spreadsheet-Icon.CARET_RIGHT"
2478
2386
  />
2479
2387
  <div
2480
2388
  t-elif="secondaryIcon"
@@ -4727,6 +4635,48 @@ https://fontawesome.com/license -->
4727
4635
  </div>
4728
4636
  </t>
4729
4637
 
4638
+ <t t-name="o-spreadsheet-TableStyleEditorPanel">
4639
+ <div class="o-table-style-editor-panel">
4640
+ <Section>
4641
+ <t t-set-slot="title">Style name</t>
4642
+ <input type="text" class="o-input o-optional" t-model="state.styleName"/>
4643
+ </Section>
4644
+ <Section class="'pt-1'">
4645
+ <t t-set-slot="title">Style color</t>
4646
+ <div class="d-flex align-items-center">
4647
+ <span class="pe-2">Primary table style color</span>
4648
+ <RoundColorPicker currentColor="state.primaryColor" onColorPicked.bind="onColorPicked"/>
4649
+ </div>
4650
+ </Section>
4651
+ <Section class="'pt-1'">
4652
+ <t t-set-slot="title">Style template</t>
4653
+ <div class="d-flex flex-wrap">
4654
+ <t t-foreach="tableTemplates" t-as="templateName" t-key="templateName">
4655
+ <TableStylePreview
4656
+ class="'o-table-style-edit-template-preview'"
4657
+ selected="templateName === state.selectedTemplateName"
4658
+ tableConfig="previewTableConfig"
4659
+ tableStyle="computeTableStyle(templateName)"
4660
+ onClick="() => this.onTemplatePicked(templateName)"
4661
+ />
4662
+ </t>
4663
+ </div>
4664
+ <div class="o-sidePanelButtons">
4665
+ <button
4666
+ t-if="props.styleId"
4667
+ t-on-click="onDelete"
4668
+ class="o-delete o-button o-button-grey danger">
4669
+ Delete
4670
+ </button>
4671
+ <button t-on-click="onCancel" class="o-cancel o-button o-button-grey">Cancel</button>
4672
+ <button t-on-click="onConfirm" class="o-confirm o-button o-button-grey primary">
4673
+ Confirm
4674
+ </button>
4675
+ </div>
4676
+ </Section>
4677
+ </div>
4678
+ </t>
4679
+
4730
4680
  <t t-name="o-spreadsheet-Spreadsheet">
4731
4681
  <div
4732
4682
  class="o-spreadsheet"
@@ -4788,23 +4738,21 @@ https://fontawesome.com/license -->
4788
4738
  <t t-name="o-spreadsheet-TableStylePicker">
4789
4739
  <div class="o-table-style-picker d-flex flew-row justify-content-between ps-1">
4790
4740
  <div class="d-flex flex-row overflow-hidden">
4791
- <div
4792
- class="o-table-style-list-item"
4793
- t-att-class="{ 'selected': styleId === props.table.config.styleId }"
4794
- t-foreach="getDisplayedTableStyles()"
4795
- t-as="styleId"
4796
- t-key="styleId"
4797
- t-att-title="getStyleName(styleId)"
4798
- t-on-click="() => this.onStylePicked(styleId)">
4799
- <div class="o-table-style-picker-preview">
4800
- <TableStylePreview tableConfig="getTableConfig(styleId)"/>
4801
- </div>
4802
- </div>
4741
+ <t t-foreach="getDisplayedTableStyles()" t-as="styleId" t-key="styleId">
4742
+ <TableStylePreview
4743
+ class="'o-table-style-picker-preview'"
4744
+ selected="styleId === props.table.config.styleId"
4745
+ tableConfig="props.table.config"
4746
+ tableStyle="env.model.getters.getTableStyle(styleId)"
4747
+ styleId="styleId"
4748
+ onClick="() => this.onStylePicked(styleId)"
4749
+ />
4750
+ </t>
4803
4751
  </div>
4804
4752
  <div
4805
4753
  class="o-table-style-picker-arrow d-flex align-items-center px-1"
4806
4754
  t-on-click.stop="onArrowButtonClick">
4807
- <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
4755
+ <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
4808
4756
  </div>
4809
4757
  </div>
4810
4758
  <TableStylesPopover
@@ -4817,31 +4765,77 @@ https://fontawesome.com/license -->
4817
4765
  </t>
4818
4766
 
4819
4767
  <t t-name="o-spreadsheet-TableStylePreview">
4820
- <canvas t-ref="canvas" class="w-100 h-100"/>
4768
+ <div
4769
+ class="o-table-style-list-item position-relative"
4770
+ t-att-class="{ 'selected': props.selected }"
4771
+ t-att-data-id="props.styleId"
4772
+ t-att-title="styleName"
4773
+ t-on-click="props.onClick"
4774
+ t-on-contextmenu.prevent="(ev) => this.onContextMenu(ev)">
4775
+ <div t-att-class="props.class">
4776
+ <canvas t-ref="canvas" class="w-100 h-100"/>
4777
+ </div>
4778
+ <div
4779
+ class="o-table-style-edit-button position-absolute d-none"
4780
+ t-if="isStyleEditable"
4781
+ t-on-click="this.editTableStyle"
4782
+ title="Edit custom table style">
4783
+ <t t-call="o-spreadsheet-Icon.EDIT"/>
4784
+ </div>
4785
+ </div>
4786
+ <Menu
4787
+ t-if="menu.isOpen"
4788
+ menuItems="menu.menuItems"
4789
+ position="menu.position"
4790
+ onClose.bind="this.closeMenu"
4791
+ />
4821
4792
  </t>
4822
4793
 
4823
4794
  <t t-name="o-spreadsheet-TableStylesPopover">
4824
4795
  <Popover t-if="props.popoverProps" t-props="props.popoverProps">
4825
- <div class="o-table-style-popover d-flex flex-column px-4 py-1" t-ref="tableStyleList">
4826
- <div t-foreach="categories" t-as="category" t-key="category">
4827
- <div class="mt-2 mb-1">
4828
- <b t-esc="category_value"/>
4796
+ <div
4797
+ class="o-table-style-popover d-flex flex-column px-4 py-3"
4798
+ t-ref="tableStyleList"
4799
+ t-on-contextmenu.prevent="">
4800
+ <div class="d-flex">
4801
+ <div
4802
+ t-foreach="Object.keys(categories)"
4803
+ t-as="category"
4804
+ t-key="category"
4805
+ class="form-check d-flex align-items-center">
4806
+ <input
4807
+ class="form-check-input me-1"
4808
+ type="radio"
4809
+ t-att-id="category_value"
4810
+ t-att-value="category_value"
4811
+ name="category"
4812
+ t-model="state.selectedCategory"
4813
+ />
4814
+ <label
4815
+ class="form-check-label pe-4"
4816
+ t-att-for="category_value"
4817
+ t-esc="categories[category_value]"
4818
+ />
4829
4819
  </div>
4830
- <div class="d-flex flex-wrap">
4831
- <div
4832
- class="o-table-style-list-item"
4833
- t-att-class="{ 'selected': styleId === props.selectedStyleId }"
4834
- t-foreach="getPresetsByCategory(category)"
4835
- t-as="styleId"
4836
- t-key="styleId"
4837
- t-att-title="getStyleName(styleId)"
4838
- t-on-click="() => this.props.onStylePicked(styleId)">
4839
- <div class="o-table-style-popover-preview">
4840
- <TableStylePreview tableConfig="getTableConfig(styleId)"/>
4841
- </div>
4842
- </div>
4820
+ </div>
4821
+ <hr class="hr my-2"/>
4822
+ <div class="d-flex flex-wrap">
4823
+ <t t-foreach="displayedStyles" t-as="styleId" t-key="styleId">
4824
+ <TableStylePreview
4825
+ class="'o-table-style-popover-preview'"
4826
+ styleId="styleId"
4827
+ selected="styleId === props.selectedStyleId"
4828
+ tableConfig="props.tableConfig"
4829
+ tableStyle="env.model.getters.getTableStyle(styleId)"
4830
+ onClick="() => this.props.onStylePicked(styleId)"
4831
+ />
4832
+ </t>
4833
+ <div
4834
+ t-if="state.selectedCategory === 'custom'"
4835
+ class="o-new-table-style o-table-style-list-item o-table-style-popover-preview d-flex justify-content-center align-items-center"
4836
+ t-on-click="newTableStyle">
4837
+ +
4843
4838
  </div>
4844
- <hr t-if="!category_last" class="hr mt-2 mb-0"/>
4845
4839
  </div>
4846
4840
  </div>
4847
4841
  </Popover>