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

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.3.0-alpha.6
- @date 2024-04-26T07:40:36.934Z
- @hash f58a0d5
+ @version 17.3.0-alpha.7
+ @date 2024-05-07T10:43:31.043Z
+ @hash 853c266
 -->
 <odoo>
   <t t-name="o-spreadsheet-ActionButton">
@@ -4644,42 +4644,34 @@
       <Section class="'pt-1'">
         <t t-set-slot="title">Style color</t>
         <div class="d-flex align-items-center">
-          <div
-            class="o-color-preview"
-            t-att-style="colorPreviewStyle"
-            t-on-click.stop="togglePicker"
-          />
-          <span class="pe-1">Primary table style color</span>
-          <ColorPickerWidget
-            currentColor="state.primaryColor"
-            showColorPicker="state.pickerOpened"
-            toggleColorPicker.bind="togglePicker"
-            onColorPicked.bind="onColorPicked"
-            icon="'o-spreadsheet-Icon.FILL_COLOR'"
-          />
+          <span class="pe-2">Primary table style color</span>
+          <RoundColorPicker currentColor="state.primaryColor" onColorPicked.bind="onColorPicked"/>
         </div>
       </Section>
       <Section class="'pt-1'">
         <t t-set-slot="title">Style template</t>
         <div class="d-flex flex-wrap">
-          <div
-            class="o-table-style-list-item"
-            t-foreach="tableTemplates"
-            t-as="templateName"
-            t-key="templateName"
-            t-att-class="{ 'selected': templateName === state.selectedTemplateName }"
-            t-on-click="() => this.onTemplatePicked(templateName)">
-            <div class="o-table-style-edit-template-preview">
-              <TableStylePreview
-                tableConfig="previewTableConfig"
-                tableStyle="computeTableStyle(templateName)"
-              />
-            </div>
-          </div>
+          <t t-foreach="tableTemplates" t-as="templateName" t-key="templateName">
+            <TableStylePreview
+              class="'o-table-style-edit-template-preview'"
+              selected="templateName === state.selectedTemplateName"
+              tableConfig="previewTableConfig"
+              tableStyle="computeTableStyle(templateName)"
+              onClick="() => this.onTemplatePicked(templateName)"
+            />
+          </t>
         </div>
         <div class="o-sidePanelButtons">
-          <button t-on-click="onCancel" class="o-cancel o-button">Cancel</button>
-          <button t-on-click="onConfirm" class="o-confirm o-button">Confirm</button>
+          <button
+            t-if="props.styleId"
+            t-on-click="onDelete"
+            class="o-delete o-button o-button-grey danger">
+            Delete
+          </button>
+          <button t-on-click="onCancel" class="o-cancel o-button o-button-grey">Cancel</button>
+          <button t-on-click="onConfirm" class="o-confirm o-button o-button-grey primary">
+            Confirm
+          </button>
         </div>
       </Section>
     </div>
@@ -4746,23 +4738,16 @@
   <t t-name="o-spreadsheet-TableStylePicker">
     <div class="o-table-style-picker d-flex flew-row justify-content-between ps-1">
       <div class="d-flex flex-row overflow-hidden">
-        <div
-          class="o-table-style-list-item"
-          t-att-class="{ 'selected': styleId === props.table.config.styleId }"
-          t-foreach="getDisplayedTableStyles()"
-          t-as="styleId"
-          t-key="styleId"
-          t-att-title="getStyleName(styleId)"
-          t-att-data-id="styleId"
-          t-on-click="() => this.onStylePicked(styleId)"
-          t-on-contextmenu.prevent="(ev) => this.onContextMenu(ev, styleId)">
-          <div class="o-table-style-picker-preview">
-            <TableStylePreview
-              tableConfig="props.table.config"
-              tableStyle="env.model.getters.getTableStyle(styleId)"
-            />
-          </div>
-        </div>
+        <t t-foreach="getDisplayedTableStyles()" t-as="styleId" t-key="styleId">
+          <TableStylePreview
+            class="'o-table-style-picker-preview'"
+            selected="styleId === props.table.config.styleId"
+            tableConfig="props.table.config"
+            tableStyle="env.model.getters.getTableStyle(styleId)"
+            styleId="styleId"
+            onClick="() => this.onStylePicked(styleId)"
+          />
+        </t>
       </div>
       <div
         class="o-table-style-picker-arrow d-flex align-items-center px-1"
@@ -4777,6 +4762,27 @@
       popoverProps="state.popoverProps"
       closePopover.bind="closePopover"
     />
+  </t>
+
+  <t t-name="o-spreadsheet-TableStylePreview">
+    <div
+      class="o-table-style-list-item position-relative"
+      t-att-class="{ 'selected': props.selected }"
+      t-att-data-id="props.styleId"
+      t-att-title="styleName"
+      t-on-click="props.onClick"
+      t-on-contextmenu.prevent="(ev) => this.onContextMenu(ev)">
+      <div t-att-class="props.class">
+        <canvas t-ref="canvas" class="w-100 h-100"/>
+      </div>
+      <div
+        class="o-table-style-edit-button position-absolute d-none"
+        t-if="isStyleEditable"
+        t-on-click="this.editTableStyle"
+        title="Edit custom table style">
+        <t t-call="o-spreadsheet-Icon.EDIT"/>
+      </div>
+    </div>
     <Menu
       t-if="menu.isOpen"
       menuItems="menu.menuItems"
@@ -4785,10 +4791,6 @@
     />
   </t>
 
-  <t t-name="o-spreadsheet-TableStylePreview">
-    <canvas t-ref="canvas" class="w-100 h-100"/>
-  </t>
-
   <t t-name="o-spreadsheet-TableStylesPopover">
     <Popover t-if="props.popoverProps" t-props="props.popoverProps">
       <div
@@ -4818,22 +4820,16 @@
         </div>
         <hr class="hr my-2"/>
         <div class="d-flex flex-wrap">
-          <div
-            class="o-table-style-list-item"
-            t-att-class="{ 'selected': styleId === props.selectedStyleId }"
-            t-foreach="displayedStyles"
-            t-as="styleId"
-            t-key="styleId"
-            t-att-title="getStyleName(styleId)"
-            t-on-click="() => this.props.onStylePicked(styleId)"
-            t-on-contextmenu.prevent="(ev) => this.onContextMenu(ev, styleId)">
-            <div class="o-table-style-popover-preview">
-              <TableStylePreview
-                tableConfig="props.tableConfig"
-                tableStyle="env.model.getters.getTableStyle(styleId)"
-              />
-            </div>
-          </div>
+          <t t-foreach="displayedStyles" t-as="styleId" t-key="styleId">
+            <TableStylePreview
+              class="'o-table-style-popover-preview'"
+              styleId="styleId"
+              selected="styleId === props.selectedStyleId"
+              tableConfig="props.tableConfig"
+              tableStyle="env.model.getters.getTableStyle(styleId)"
+              onClick="() => this.props.onStylePicked(styleId)"
+            />
+          </t>
           <div
             t-if="state.selectedCategory === 'custom'"
             class="o-new-table-style o-table-style-list-item o-table-style-popover-preview d-flex justify-content-center align-items-center"
@@ -4842,12 +4838,6 @@
           </div>
         </div>
       </div>
-      <Menu
-        t-if="menu.isOpen"
-        menuItems="menu.menuItems"
-        position="menu.position"
-        onClose.bind="this.closeMenu"
-      />
     </Popover>
   </t>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/o-spreadsheet",
-  "version": "17.3.0-alpha.6",
+  "version": "17.3.0-alpha.7",
   "description": "A spreadsheet component",
   "type": "module",
   "main": "dist/o-spreadsheet.cjs.js",
@@ -101,7 +101,7 @@
   },
   "dependencies": {
     "@odoo/owl": "2.2.10",
-    "bootstrap": "^5.1.3",
+    "bootstrap": "^5.3.3",
     "font-awesome": "^4.7.0",
     "rbush": "^3.0.1"
   },