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

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 +3117 -2743
  2. package/dist/o-spreadsheet.d.ts +141 -59
  3. package/dist/o-spreadsheet.esm.js +3117 -2743
  4. package/dist/o-spreadsheet.iife.js +3118 -2744
  5. package/dist/o-spreadsheet.iife.min.js +489 -472
  6. package/dist/o_spreadsheet.xml +119 -101
  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 18.1.0-alpha.2
5
- @date 2024-10-24T08:54:19.283Z
6
- @hash 2a01250
4
+ @version 18.1.0-alpha.3
5
+ @date 2024-11-08T12:19:23.924Z
6
+ @hash 96dcfab
7
7
  -->
8
8
  <odoo>
9
9
  <t t-name="o-spreadsheet-ActionButton">
@@ -2653,7 +2653,7 @@
2653
2653
  <Section class="'pt-0'">
2654
2654
  <Checkbox
2655
2655
  name="'stacked'"
2656
- label="chartTerms.StackedBarChart"
2656
+ label="stackedLabel"
2657
2657
  value="props.definition.stacked"
2658
2658
  onChange.bind="onUpdateStacked"
2659
2659
  />
@@ -2780,6 +2780,21 @@
2780
2780
  </Section>
2781
2781
  </t>
2782
2782
 
2783
+ <t t-name="o-spreadsheet-ChartLegend">
2784
+ <Section class="'pt-0'" title.translate="Legend position">
2785
+ <select
2786
+ t-att-value="props.definition.legendPosition ?? 'top'"
2787
+ class="o-input o-chart-legend-position"
2788
+ t-on-change="this.updateLegendPosition">
2789
+ <option value="none">None</option>
2790
+ <option value="top">Top</option>
2791
+ <option value="bottom">Bottom</option>
2792
+ <option value="left">Left</option>
2793
+ <option value="right">Right</option>
2794
+ </select>
2795
+ </Section>
2796
+ </t>
2797
+
2783
2798
  <t t-name="o-spreadsheet-SeriesDesignEditor">
2784
2799
  <SidePanelCollapsible collapsedAtInit="true" title.translate="Data Series">
2785
2800
  <t t-set-slot="content">
@@ -2884,13 +2899,16 @@
2884
2899
  </div>
2885
2900
  <div class="w-50 ms-3" t-if="trendType === 'polynomial'">
2886
2901
  <span class="o-section-subtitle">Degree</span>
2887
- <input
2902
+ <select
2888
2903
  t-att-value="trend.order"
2889
- type="number"
2890
- class="w-100 o-input trend-order-input"
2891
- t-on-change="(ev) => this.onChangePolynomialDegree(index, ev)"
2892
- min="1"
2893
- />
2904
+ class="o-input trend-order-input"
2905
+ t-on-change="(ev) => this.onChangePolynomialDegree(index, ev)">
2906
+ <t t-foreach="getPolynomialDegrees(index)" t-as="degree" t-key="degree">
2907
+ <option t-att-value="degree">
2908
+ <t t-esc="degree"/>
2909
+ </option>
2910
+ </t>
2911
+ </select>
2894
2912
  </div>
2895
2913
  </div>
2896
2914
  <div class="d-flex align-items-center">
@@ -3289,18 +3307,11 @@
3289
3307
  definition="props.definition"
3290
3308
  updateChart="props.updateChart">
3291
3309
  <t t-set-slot="general-extension">
3292
- <Section class="'pt-0'" title.translate="Legend position">
3293
- <select
3294
- t-att-value="props.definition.legendPosition ?? 'top'"
3295
- class="o-input"
3296
- t-on-change="this.updateLegendPosition">
3297
- <option value="none">None</option>
3298
- <option value="top">Top</option>
3299
- <option value="bottom">Bottom</option>
3300
- <option value="left">Left</option>
3301
- <option value="right">Right</option>
3302
- </select>
3303
- </Section>
3310
+ <ChartLegend
3311
+ figureId="props.figureId"
3312
+ definition="props.definition"
3313
+ updateChart="props.updateChart"
3314
+ />
3304
3315
  <Section class="'pt-0'" title.translate="Values">
3305
3316
  <Checkbox
3306
3317
  name="'showValues'"
@@ -3349,22 +3360,15 @@
3349
3360
  definition="props.definition"
3350
3361
  updateChart="props.updateChart">
3351
3362
  <t t-set-slot="general-extension">
3352
- <Section class="'pt-0'" title.translate="Legend position">
3353
- <select
3354
- t-att-value="props.definition.legendPosition ?? 'top'"
3355
- class="o-input"
3356
- t-on-change="this.updateLegendPosition">
3357
- <option value="none">None</option>
3358
- <option value="top">Top</option>
3359
- <option value="bottom">Bottom</option>
3360
- <option value="left">Left</option>
3361
- <option value="right">Right</option>
3362
- </select>
3363
- </Section>
3363
+ <ChartLegend
3364
+ figureId="props.figureId"
3365
+ definition="props.definition"
3366
+ updateChart="props.updateChart"
3367
+ />
3364
3368
  <Section class="'pt-0'" title.translate="Values">
3365
3369
  <Checkbox
3366
3370
  name="'showValues'"
3367
- label="showValuesLabel"
3371
+ label.translate="Show values"
3368
3372
  value="props.definition.showValues"
3369
3373
  onChange="showValues => props.updateChart(this.props.figureId, {showValues})"
3370
3374
  />
@@ -3627,19 +3631,12 @@
3627
3631
  definition="props.definition"
3628
3632
  updateChart="props.updateChart">
3629
3633
  <t t-set-slot="general-extension">
3630
- <Section class="'pt-0'" title.translate="Legend position">
3631
- <select
3632
- t-att-value="props.definition.legendPosition ?? 'top'"
3633
- class="o-input"
3634
- t-on-change="(ev) => this.updateLegendPosition(ev)">
3635
- <option value="none">None</option>
3636
- <option value="top">Top</option>
3637
- <option value="bottom">Bottom</option>
3638
- <option value="left">Left</option>
3639
- <option value="right">Right</option>
3640
- </select>
3641
- </Section>
3642
- <Section title.translate="Values">
3634
+ <ChartLegend
3635
+ figureId="props.figureId"
3636
+ definition="props.definition"
3637
+ updateChart="props.updateChart"
3638
+ />
3639
+ <Section class="'pt-0'" title.translate="Values">
3643
3640
  <Checkbox
3644
3641
  name="'showValues'"
3645
3642
  label.translate="Show values"
@@ -3657,18 +3654,11 @@
3657
3654
  definition="props.definition"
3658
3655
  updateChart="props.updateChart">
3659
3656
  <t t-set-slot="general-extension">
3660
- <Section class="'pt-0'" title.translate="Legend Position">
3661
- <select
3662
- t-att-value="props.definition.legendPosition ?? 'top'"
3663
- class="o-input"
3664
- t-on-change="this.updateLegendPosition">
3665
- <option value="none">None</option>
3666
- <option value="top">Top</option>
3667
- <option value="bottom">Bottom</option>
3668
- <option value="left">Left</option>
3669
- <option value="right">Right</option>
3670
- </select>
3671
- </Section>
3657
+ <ChartLegend
3658
+ figureId="props.figureId"
3659
+ definition="props.definition"
3660
+ updateChart="props.updateChart"
3661
+ />
3672
3662
  </t>
3673
3663
  </GeneralDesignEditor>
3674
3664
  <SeriesDesignEditor t-props="props"/>
@@ -3759,7 +3749,7 @@
3759
3749
  placeholder="Baseline description"
3760
3750
  />
3761
3751
  </Section>
3762
- <Section class="'o-chart-baseline-color'" title="colorsSectionTitle">
3752
+ <Section class="'o-chart-baseline-color pt-0'" title="colorsSectionTitle">
3763
3753
  <div class="d-flex align-items-center mb-2">
3764
3754
  <RoundColorPicker
3765
3755
  currentColor="props.definition.baselineColorUp"
@@ -3787,7 +3777,7 @@
3787
3777
  definition="props.definition"
3788
3778
  updateChart="props.updateChart">
3789
3779
  <t t-set-slot="general-extension">
3790
- <Section class="'o-vertical-axis-selection'" title.translate="Vertical axis position">
3780
+ <Section class="'o-vertical-axis-selection pt-0'" title.translate="Vertical axis position">
3791
3781
  <RadioSelection
3792
3782
  choices="axisChoices"
3793
3783
  selectedValue="props.definition.verticalAxisPosition"
@@ -3795,19 +3785,12 @@
3795
3785
  onChange.bind="updateVerticalAxisPosition"
3796
3786
  />
3797
3787
  </Section>
3798
- <Section title.translate="Legend position">
3799
- <select
3800
- t-att-value="props.definition.legendPosition"
3801
- class="o-input o-chart-legend-position"
3802
- t-on-change="(ev) => this.updateLegendPosition(ev)">
3803
- <option value="none">None</option>
3804
- <option value="top">Top</option>
3805
- <option value="bottom">Bottom</option>
3806
- <option value="left">Left</option>
3807
- <option value="right">Right</option>
3808
- </select>
3809
- </Section>
3810
- <Section title.translate="Values">
3788
+ <ChartLegend
3789
+ figureId="props.figureId"
3790
+ definition="props.definition"
3791
+ updateChart="props.updateChart"
3792
+ />
3793
+ <Section class="'pt-0'" title.translate="Values">
3811
3794
  <Checkbox
3812
3795
  name="'showValues'"
3813
3796
  label.translate="Show values"
@@ -3844,7 +3827,7 @@
3844
3827
  onChange.bind="onUpdateShowConnectorLines"
3845
3828
  />
3846
3829
  </Section>
3847
- <Section title.translate="Colors">
3830
+ <Section class="'pt-0'" title.translate="Colors">
3848
3831
  <div class="o-waterfall-positive-color d-flex align-items-center mb-2">
3849
3832
  <RoundColorPicker
3850
3833
  currentColor="positiveValuesColor"
@@ -4025,9 +4008,15 @@
4025
4008
  <t t-set="text_color">Text Color</t>
4026
4009
  <div class="o-cf-cell-is-rule">
4027
4010
  <div class="o-section-subtitle">Format cells if...</div>
4028
- <select t-model="rule.operator" class="o-input o-cell-is-operator mb-3">
4029
- <t t-foreach="Object.keys(cellIsOperators)" t-as="op" t-key="op_index">
4030
- <option t-att-value="op" t-esc="cellIsOperators[op]"/>
4011
+ <select
4012
+ class="o-input o-cell-is-operator mb-3"
4013
+ t-on-change="(ev) => this.editOperator(ev.target.value)">
4014
+ <t t-foreach="cellIsOperators" t-as="op" t-key="op_index">
4015
+ <option
4016
+ t-att-value="op"
4017
+ t-esc="cellIsOperators[op]"
4018
+ t-att-selected="rule.operator === op"
4019
+ />
4031
4020
  </t>
4032
4021
  </select>
4033
4022
  <t t-if="rule.operator !== 'IsEmpty' and rule.operator !== 'IsNotEmpty'">
@@ -4102,10 +4091,11 @@
4102
4091
  <Section class="'o-cf-range pb-0'" title.translate="Apply to range">
4103
4092
  <div class="o-selection-cf">
4104
4093
  <SelectionInput
4105
- ranges="state.currentCF.ranges"
4094
+ ranges="state.ranges"
4106
4095
  class="'o-range'"
4107
4096
  isInvalid="isRangeValid"
4108
- onSelectionChanged="(ranges) => this.onRangesChanged(ranges)"
4097
+ onSelectionChanged.bind="onRangeUpdate"
4098
+ onSelectionConfirmed.bind="onRangeConfirmed"
4109
4099
  required="true"
4110
4100
  />
4111
4101
  </div>
@@ -4137,8 +4127,11 @@
4137
4127
  </Section>
4138
4128
  <Section class="'pt-1'">
4139
4129
  <div class="o-sidePanelButtons">
4140
- <button t-on-click="props.onExitEdition" class="o-button o-cf-cancel">Cancel</button>
4141
- <button t-on-click="saveConditionalFormat" class="o-button primary o-cf-save">
4130
+ <button t-on-click="props.onCancel" class="o-button o-cf-cancel">Cancel</button>
4131
+ <button
4132
+ t-on-click="onSave"
4133
+ class="o-button primary o-cf-save"
4134
+ t-att-disabled="state.errors.length !== 0">
4142
4135
  Save
4143
4136
  </button>
4144
4137
  </div>
@@ -4172,14 +4165,18 @@
4172
4165
  <select
4173
4166
  class="o-input me-2"
4174
4167
  name="valueType"
4175
- t-model="threshold.type"
4168
+ t-on-change="(ev) => this.updateThresholdType(thresholdType, ev.target.value)"
4176
4169
  t-on-click="closeMenus"
4177
4170
  t-att-class="{ 'o-select-with-input': threshold?.type !== 'value' }">
4178
- <option value="value">Cell values</option>
4179
- <option value="number">Number</option>
4180
- <option value="percentage">Percentage</option>
4181
- <option value="percentile">Percentile</option>
4182
- <option value="formula">Formula</option>
4171
+ <option value="value" t-att-selected="threshold.type === 'value'">Cell values</option>
4172
+ <option value="number" t-att-selected="threshold.type === 'number'">Number</option>
4173
+ <option value="percentage" t-att-selected="threshold.type === 'percentage'">
4174
+ Percentage
4175
+ </option>
4176
+ <option value="percentile" t-att-selected="threshold.type === 'percentile'">
4177
+ Percentile
4178
+ </option>
4179
+ <option value="formula" t-att-selected="threshold.type === 'formula'">Formula</option>
4183
4180
  </select>
4184
4181
  </t>
4185
4182
  <div class="o-threshold-value me-2" t-if="threshold and threshold.type !== 'value'">
@@ -4187,7 +4184,8 @@
4187
4184
  t-if="threshold.type !== 'formula'"
4188
4185
  type="text"
4189
4186
  class="o-input"
4190
- t-model="rule[thresholdType].value"
4187
+ t-att-value="threshold.value"
4188
+ t-on-change="(ev) => this.updateThresholdValue(thresholdType, ev.target.value)"
4191
4189
  t-att-class="{ 'o-invalid': isValueInvalid(thresholdType), 'invisible': threshold === undefined }"
4192
4190
  />
4193
4191
  <StandaloneComposer t-else="" t-props="getColorScaleComposerProps(thresholdType)"/>
@@ -4239,7 +4237,8 @@
4239
4237
  class="'o-range'"
4240
4238
  isInvalid="false"
4241
4239
  hasSingleRange="true"
4242
- onSelectionChanged="(ranges) => this.onDataBarRangeUpdate(ranges)"
4240
+ onSelectionChanged.bind="onDataBarRangeUpdate"
4241
+ onSelectionConfirmed.bind="onDataBarRangeChange"
4243
4242
  required="false"
4244
4243
  />
4245
4244
  </div>
@@ -4284,11 +4283,14 @@
4284
4283
  </td>
4285
4284
  <td>When value is</td>
4286
4285
  <td>
4287
- <select class="o-input" name="valueType" t-model="inflectionPointValue.operator">
4288
- <option value="gt">
4286
+ <select
4287
+ class="o-input"
4288
+ name="valueType"
4289
+ t-on-change="(ev) => this.setInflectionOperator(inflectionPoint, ev.target.value)">
4290
+ <option value="gt" t-att-selected="inflectionPointValue.operator === 'gt'">
4289
4291
  <span>&#62;</span>
4290
4292
  </option>
4291
- <option value="ge">
4293
+ <option value="ge" t-att-selected="inflectionPointValue.operator === 'ge'">
4292
4294
  <span>&#8805;</span>
4293
4295
  </option>
4294
4296
  </select>
@@ -4300,17 +4302,29 @@
4300
4302
  t-if="inflectionPointValue.type !== 'formula'"
4301
4303
  class="o-input"
4302
4304
  t-att-class="{ 'o-invalid': isInflectionPointInvalid(inflectionPoint) }"
4303
- t-model="rule[inflectionPoint].value"
4305
+ t-att-value="rule[inflectionPoint].value"
4306
+ t-on-change="(ev) => this.setInflectionValue(inflectionPoint, ev.target.value)"
4304
4307
  />
4305
4308
  <StandaloneComposer t-else="" t-props="getColorIconSetComposerProps(inflectionPoint)"/>
4306
4309
  </div>
4307
4310
  </td>
4308
4311
  <td>
4309
- <select class="o-input" name="valueType" t-model="inflectionPointValue.type">
4310
- <option value="number">Number</option>
4311
- <option value="percentage">Percentage</option>
4312
- <option value="percentile">Percentile</option>
4313
- <option value="formula">Formula</option>
4312
+ <select
4313
+ class="o-input"
4314
+ name="valueType"
4315
+ t-on-change="(ev) => this.setInflectionType(inflectionPoint, ev.target.value, ev)">
4316
+ <option value="number" t-att-selected="inflectionPointValue.type === 'number'">
4317
+ Number
4318
+ </option>
4319
+ <option value="percentage" t-att-selected="inflectionPointValue.type === 'percentage'">
4320
+ Percentage
4321
+ </option>
4322
+ <option value="percentile" t-att-selected="inflectionPointValue.type === 'percentile'">
4323
+ Percentile
4324
+ </option>
4325
+ <option value="formula" t-att-selected="inflectionPointValue.type === 'formula'">
4326
+ Formula
4327
+ </option>
4314
4328
  </select>
4315
4329
  </td>
4316
4330
  </tr>
@@ -4453,7 +4467,11 @@
4453
4467
  />
4454
4468
  </t>
4455
4469
  <t t-if="state.mode === 'edit'">
4456
- <ConditionalFormattingEditor editedCf="state.editedCf" onExitEdition.bind="switchToList"/>
4470
+ <ConditionalFormattingEditor
4471
+ editedCf="editedCF"
4472
+ onSave.bind="switchToList"
4473
+ onCancel.bind="cancelEdition"
4474
+ />
4457
4475
  </t>
4458
4476
  </div>
4459
4477
  </t>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@odoo/o-spreadsheet",
3
- "version": "18.1.0-alpha.2",
3
+ "version": "18.1.0-alpha.3",
4
4
  "description": "A spreadsheet component",
5
5
  "type": "module",
6
6
  "main": "dist/o-spreadsheet.cjs.js",
@@ -64,7 +64,7 @@
64
64
  "@types/rbush": "^3.0.3",
65
65
  "babel-eslint": "^10.1.0",
66
66
  "body-parser": "^1.19.0",
67
- "chart.js": "4.4.1",
67
+ "chart.js": "4.4.5",
68
68
  "chartjs-adapter-luxon": "^1.3.1",
69
69
  "cors": "^2.8.5",
70
70
  "eslint": "^6.8.0",