@odoo/o-spreadsheet 18.1.0-alpha.2 → 18.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 18.1.0-alpha.2
- @date 2024-10-24T08:54:19.283Z
- @hash 2a01250
+ @version 18.1.0-alpha.4
+ @date 2024-11-13T15:07:31.403Z
+ @hash e1ad985
 -->
 <odoo>
   <t t-name="o-spreadsheet-ActionButton">
@@ -402,10 +402,12 @@
             </button>
           </div>
         </div>
-        <div class="o-separator"/>
-        <div class="o-buttons">
-          <button t-on-click="resetColor" class="o-cancel">No Color</button>
-        </div>
+        <t t-if="!props.disableNoColor">
+          <div class="o-separator"/>
+          <div class="o-buttons">
+            <button t-on-click="resetColor" class="o-cancel">No Color</button>
+          </div>
+        </t>
       </div>
     </Popover>
   </t>
@@ -1493,6 +1495,11 @@
       />
     </svg>
   </t>
+  <t t-name="o-spreadsheet-Icon.CLIPBOARD">
+    <div class="o-icon">
+      <i class="fa fa-clipboard"/>
+    </div>
+  </t>
   <t t-name="o-spreadsheet-Icon.COPY">
     <div class="o-icon">
       <i class="fa fa-clone"/>
@@ -2653,7 +2660,7 @@
       <Section class="'pt-0'">
         <Checkbox
           name="'stacked'"
-          label="chartTerms.StackedBarChart"
+          label="stackedLabel"
           value="props.definition.stacked"
           onChange.bind="onUpdateStacked"
         />
@@ -2780,6 +2787,21 @@
     </Section>
   </t>
 
+  <t t-name="o-spreadsheet-ChartLegend">
+    <Section class="'pt-0'" title.translate="Legend position">
+      <select
+        t-att-value="props.definition.legendPosition ?? 'top'"
+        class="o-input o-chart-legend-position"
+        t-on-change="this.updateLegendPosition">
+        <option value="none">None</option>
+        <option value="top">Top</option>
+        <option value="bottom">Bottom</option>
+        <option value="left">Left</option>
+        <option value="right">Right</option>
+      </select>
+    </Section>
+  </t>
+
   <t t-name="o-spreadsheet-SeriesDesignEditor">
     <SidePanelCollapsible collapsedAtInit="true" title.translate="Data Series">
       <t t-set-slot="content">
@@ -2884,13 +2906,16 @@
                 </div>
                 <div class="w-50 ms-3" t-if="trendType === 'polynomial'">
                   <span class="o-section-subtitle">Degree</span>
-                  <input
+                  <select
                     t-att-value="trend.order"
-                    type="number"
-                    class="w-100 o-input trend-order-input"
-                    t-on-change="(ev) => this.onChangePolynomialDegree(index, ev)"
-                    min="1"
-                  />
+                    class="o-input trend-order-input"
+                    t-on-change="(ev) => this.onChangePolynomialDegree(index, ev)">
+                    <t t-foreach="getPolynomialDegrees(index)" t-as="degree" t-key="degree">
+                      <option t-att-value="degree">
+                        <t t-esc="degree"/>
+                      </option>
+                    </t>
+                  </select>
                 </div>
               </div>
               <div class="d-flex align-items-center">
@@ -3289,24 +3314,17 @@
       definition="props.definition"
       updateChart="props.updateChart">
       <t t-set-slot="general-extension">
-        <Section class="'pt-0'" title.translate="Legend position">
-          <select
-            t-att-value="props.definition.legendPosition ?? 'top'"
-            class="o-input"
-            t-on-change="this.updateLegendPosition">
-            <option value="none">None</option>
-            <option value="top">Top</option>
-            <option value="bottom">Bottom</option>
-            <option value="left">Left</option>
-            <option value="right">Right</option>
-          </select>
-        </Section>
+        <ChartLegend
+          figureId="props.figureId"
+          definition="props.definition"
+          updateChart="props.updateChart"
+        />
         <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})"
+            onChange="(showValues) => props.updateChart(this.props.figureId, { showValues })"
           />
         </Section>
       </t>
@@ -3349,22 +3367,15 @@
       definition="props.definition"
       updateChart="props.updateChart">
       <t t-set-slot="general-extension">
-        <Section class="'pt-0'" title.translate="Legend position">
-          <select
-            t-att-value="props.definition.legendPosition ?? 'top'"
-            class="o-input"
-            t-on-change="this.updateLegendPosition">
-            <option value="none">None</option>
-            <option value="top">Top</option>
-            <option value="bottom">Bottom</option>
-            <option value="left">Left</option>
-            <option value="right">Right</option>
-          </select>
-        </Section>
+        <ChartLegend
+          figureId="props.figureId"
+          definition="props.definition"
+          updateChart="props.updateChart"
+        />
         <Section class="'pt-0'" title.translate="Values">
           <Checkbox
             name="'showValues'"
-            label="showValuesLabel"
+            label.translate="Show values"
             value="props.definition.showValues"
             onChange="showValues => props.updateChart(this.props.figureId, {showValues})"
           />
@@ -3627,24 +3638,17 @@
       definition="props.definition"
       updateChart="props.updateChart">
       <t t-set-slot="general-extension">
-        <Section class="'pt-0'" title.translate="Legend position">
-          <select
-            t-att-value="props.definition.legendPosition ?? 'top'"
-            class="o-input"
-            t-on-change="(ev) => this.updateLegendPosition(ev)">
-            <option value="none">None</option>
-            <option value="top">Top</option>
-            <option value="bottom">Bottom</option>
-            <option value="left">Left</option>
-            <option value="right">Right</option>
-          </select>
-        </Section>
-        <Section title.translate="Values">
+        <ChartLegend
+          figureId="props.figureId"
+          definition="props.definition"
+          updateChart="props.updateChart"
+        />
+        <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})"
+            onChange="(showValues) => props.updateChart(this.props.figureId, { showValues })"
           />
         </Section>
       </t>
@@ -3657,17 +3661,18 @@
       definition="props.definition"
       updateChart="props.updateChart">
       <t t-set-slot="general-extension">
-        <Section class="'pt-0'" title.translate="Legend Position">
-          <select
-            t-att-value="props.definition.legendPosition ?? 'top'"
-            class="o-input"
-            t-on-change="this.updateLegendPosition">
-            <option value="none">None</option>
-            <option value="top">Top</option>
-            <option value="bottom">Bottom</option>
-            <option value="left">Left</option>
-            <option value="right">Right</option>
-          </select>
+        <ChartLegend
+          figureId="props.figureId"
+          definition="props.definition"
+          updateChart="props.updateChart"
+        />
+        <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>
@@ -3759,7 +3764,7 @@
             placeholder="Baseline description"
           />
         </Section>
-        <Section class="'o-chart-baseline-color'" title="colorsSectionTitle">
+        <Section class="'o-chart-baseline-color pt-0'" title="colorsSectionTitle">
           <div class="d-flex align-items-center mb-2">
             <RoundColorPicker
               currentColor="props.definition.baselineColorUp"
@@ -3787,7 +3792,7 @@
       definition="props.definition"
       updateChart="props.updateChart">
       <t t-set-slot="general-extension">
-        <Section class="'o-vertical-axis-selection'" title.translate="Vertical axis position">
+        <Section class="'o-vertical-axis-selection pt-0'" title.translate="Vertical axis position">
           <RadioSelection
             choices="axisChoices"
             selectedValue="props.definition.verticalAxisPosition"
@@ -3795,24 +3800,17 @@
             onChange.bind="updateVerticalAxisPosition"
           />
         </Section>
-        <Section title.translate="Legend position">
-          <select
-            t-att-value="props.definition.legendPosition"
-            class="o-input o-chart-legend-position"
-            t-on-change="(ev) => this.updateLegendPosition(ev)">
-            <option value="none">None</option>
-            <option value="top">Top</option>
-            <option value="bottom">Bottom</option>
-            <option value="left">Left</option>
-            <option value="right">Right</option>
-          </select>
-        </Section>
-        <Section title.translate="Values">
+        <ChartLegend
+          figureId="props.figureId"
+          definition="props.definition"
+          updateChart="props.updateChart"
+        />
+        <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})"
+            onChange="(showValues) => props.updateChart(this.props.figureId, { showValues })"
           />
         </Section>
       </t>
@@ -3844,7 +3842,7 @@
             onChange.bind="onUpdateShowConnectorLines"
           />
         </Section>
-        <Section title.translate="Colors">
+        <Section class="'pt-0'" title.translate="Colors">
           <div class="o-waterfall-positive-color d-flex align-items-center mb-2">
             <RoundColorPicker
               currentColor="positiveValuesColor"
@@ -3992,6 +3990,7 @@
       anchorRect="colorPickerAnchorRect"
       onColorPicked.bind="onColorPicked"
       currentColor="props.currentColor"
+      disableNoColor="props.disableNoColor"
     />
   </t>
 
@@ -4025,9 +4024,15 @@
     <t t-set="text_color">Text Color</t>
     <div class="o-cf-cell-is-rule">
       <div class="o-section-subtitle">Format cells if...</div>
-      <select t-model="rule.operator" class="o-input o-cell-is-operator mb-3">
-        <t t-foreach="Object.keys(cellIsOperators)" t-as="op" t-key="op_index">
-          <option t-att-value="op" t-esc="cellIsOperators[op]"/>
+      <select
+        class="o-input o-cell-is-operator mb-3"
+        t-on-change="(ev) => this.editOperator(ev.target.value)">
+        <t t-foreach="cellIsOperators" t-as="op" t-key="op_index">
+          <option
+            t-att-value="op"
+            t-esc="cellIsOperators[op]"
+            t-att-selected="rule.operator === op"
+          />
         </t>
       </select>
       <t t-if="rule.operator !== 'IsEmpty' and rule.operator !== 'IsNotEmpty'">
@@ -4102,10 +4107,11 @@
       <Section class="'o-cf-range pb-0'" title.translate="Apply to range">
         <div class="o-selection-cf">
           <SelectionInput
-            ranges="state.currentCF.ranges"
+            ranges="state.ranges"
             class="'o-range'"
             isInvalid="isRangeValid"
-            onSelectionChanged="(ranges) => this.onRangesChanged(ranges)"
+            onSelectionChanged.bind="onRangeUpdate"
+            onSelectionConfirmed.bind="onRangeConfirmed"
             required="true"
           />
         </div>
@@ -4137,8 +4143,11 @@
       </Section>
       <Section class="'pt-1'">
         <div class="o-sidePanelButtons">
-          <button t-on-click="props.onExitEdition" class="o-button o-cf-cancel">Cancel</button>
-          <button t-on-click="saveConditionalFormat" class="o-button primary o-cf-save">
+          <button t-on-click="props.onCancel" class="o-button o-cf-cancel">Cancel</button>
+          <button
+            t-on-click="onSave"
+            class="o-button primary o-cf-save"
+            t-att-disabled="state.errors.length !== 0">
             Save
           </button>
         </div>
@@ -4172,14 +4181,18 @@
         <select
           class="o-input me-2"
           name="valueType"
-          t-model="threshold.type"
+          t-on-change="(ev) => this.updateThresholdType(thresholdType, ev.target.value)"
           t-on-click="closeMenus"
           t-att-class="{ 'o-select-with-input': threshold?.type !== 'value' }">
-          <option value="value">Cell values</option>
-          <option value="number">Number</option>
-          <option value="percentage">Percentage</option>
-          <option value="percentile">Percentile</option>
-          <option value="formula">Formula</option>
+          <option value="value" t-att-selected="threshold.type === 'value'">Cell values</option>
+          <option value="number" t-att-selected="threshold.type === 'number'">Number</option>
+          <option value="percentage" t-att-selected="threshold.type === 'percentage'">
+            Percentage
+          </option>
+          <option value="percentile" t-att-selected="threshold.type === 'percentile'">
+            Percentile
+          </option>
+          <option value="formula" t-att-selected="threshold.type === 'formula'">Formula</option>
         </select>
       </t>
       <div class="o-threshold-value me-2" t-if="threshold and threshold.type !== 'value'">
@@ -4187,7 +4200,8 @@
           t-if="threshold.type !== 'formula'"
           type="text"
           class="o-input"
-          t-model="rule[thresholdType].value"
+          t-att-value="threshold.value"
+          t-on-change="(ev) => this.updateThresholdValue(thresholdType, ev.target.value)"
           t-att-class="{ 'o-invalid': isValueInvalid(thresholdType), 'invisible': threshold === undefined }"
         />
         <StandaloneComposer t-else="" t-props="getColorScaleComposerProps(thresholdType)"/>
@@ -4197,6 +4211,7 @@
           currentColor="getThresholdColor(threshold)"
           onColorPicked="(color) => this.setColorScaleColor(thresholdType, color)"
           title="fill_color"
+          disableNoColor="true"
         />
       </div>
     </div>
@@ -4239,7 +4254,8 @@
         class="'o-range'"
         isInvalid="false"
         hasSingleRange="true"
-        onSelectionChanged="(ranges) => this.onDataBarRangeUpdate(ranges)"
+        onSelectionChanged.bind="onDataBarRangeUpdate"
+        onSelectionConfirmed.bind="onDataBarRangeChange"
         required="false"
       />
     </div>
@@ -4284,11 +4300,14 @@
       </td>
       <td>When value is</td>
       <td>
-        <select class="o-input" name="valueType" t-model="inflectionPointValue.operator">
-          <option value="gt">
+        <select
+          class="o-input"
+          name="valueType"
+          t-on-change="(ev) => this.setInflectionOperator(inflectionPoint, ev.target.value)">
+          <option value="gt" t-att-selected="inflectionPointValue.operator === 'gt'">
             <span>&#62;</span>
           </option>
-          <option value="ge">
+          <option value="ge" t-att-selected="inflectionPointValue.operator === 'ge'">
             <span>&#8805;</span>
           </option>
         </select>
@@ -4300,17 +4319,29 @@
             t-if="inflectionPointValue.type !== 'formula'"
             class="o-input"
             t-att-class="{ 'o-invalid': isInflectionPointInvalid(inflectionPoint) }"
-            t-model="rule[inflectionPoint].value"
+            t-att-value="rule[inflectionPoint].value"
+            t-on-change="(ev) => this.setInflectionValue(inflectionPoint, ev.target.value)"
           />
           <StandaloneComposer t-else="" t-props="getColorIconSetComposerProps(inflectionPoint)"/>
         </div>
       </td>
       <td>
-        <select class="o-input" name="valueType" t-model="inflectionPointValue.type">
-          <option value="number">Number</option>
-          <option value="percentage">Percentage</option>
-          <option value="percentile">Percentile</option>
-          <option value="formula">Formula</option>
+        <select
+          class="o-input"
+          name="valueType"
+          t-on-change="(ev) => this.setInflectionType(inflectionPoint, ev.target.value, ev)">
+          <option value="number" t-att-selected="inflectionPointValue.type === 'number'">
+            Number
+          </option>
+          <option value="percentage" t-att-selected="inflectionPointValue.type === 'percentage'">
+            Percentage
+          </option>
+          <option value="percentile" t-att-selected="inflectionPointValue.type === 'percentile'">
+            Percentile
+          </option>
+          <option value="formula" t-att-selected="inflectionPointValue.type === 'formula'">
+            Formula
+          </option>
         </select>
       </td>
     </tr>
@@ -4453,7 +4484,11 @@
         />
       </t>
       <t t-if="state.mode === 'edit'">
-        <ConditionalFormattingEditor editedCf="state.editedCf" onExitEdition.bind="switchToList"/>
+        <ConditionalFormattingEditor
+          editedCf="editedCF"
+          onSave.bind="switchToList"
+          onCancel.bind="cancelEdition"
+        />
       </t>
     </div>
   </t>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/o-spreadsheet",
-  "version": "18.1.0-alpha.2",
+  "version": "18.1.0-alpha.4",
   "description": "A spreadsheet component",
   "type": "module",
   "main": "dist/o-spreadsheet.cjs.js",
@@ -64,7 +64,7 @@
     "@types/rbush": "^3.0.3",
     "babel-eslint": "^10.1.0",
     "body-parser": "^1.19.0",
-    "chart.js": "4.4.1",
+    "chart.js": "4.4.5",
     "chartjs-adapter-luxon": "^1.3.1",
     "cors": "^2.8.5",
     "eslint": "^6.8.0",