@odoo/o-spreadsheet 14.0.0 → 14.0.1

package/src/components/color_picker.ts

@@ -0,0 +1,150 @@
+import * as owl from "@odoo/owl";
+import { SpreadsheetEnv } from "../types/env";
+const { Component } = owl;
+const { css, xml } = owl.tags;
+
+const COLORS = [
+  [
+    "#000000",
+    "#434343",
+    "#666666",
+    "#999999",
+    "#b7b7b7",
+    "#cccccc",
+    "#d9d9d9",
+    "#efefef",
+    "#f3f3f3",
+    "#ffffff",
+  ],
+  [
+    "#980000",
+    "#ff0000",
+    "#ff9900",
+    "#ffff00",
+    "#00ff00",
+    "#00ffff",
+    "#4a86e8",
+    "#0000ff",
+    "#9900ff",
+    "#ff00ff",
+  ],
+  [
+    "#e6b8af",
+    "#f4cccc",
+    "#fce5cd",
+    "#fff2cc",
+    "#d9ead3",
+    "#d0e0e3",
+    "#c9daf8",
+    "#cfe2f3",
+    "#d9d2e9",
+    "#ead1dc",
+  ],
+  [
+    "#dd7e6b",
+    "#ea9999",
+    "#f9cb9c",
+    "#ffe599",
+    "#b6d7a8",
+    "#a2c4c9",
+    "#a4c2f4",
+    "#9fc5e8",
+    "#b4a7d6",
+    "#d5a6bd",
+  ],
+  [
+    "#cc4125",
+    "#e06666",
+    "#f6b26b",
+    "#ffd966",
+    "#93c47d",
+    "#76a5af",
+    "#6d9eeb",
+    "#6fa8dc",
+    "#8e7cc3",
+    "#c27ba0",
+  ],
+  [
+    "#a61c00",
+    "#cc0000",
+    "#e69138",
+    "#f1c232",
+    "#6aa84f",
+    "#45818e",
+    "#3c78d8",
+    "#3d85c6",
+    "#674ea7",
+    "#a64d79",
+  ],
+  [
+    "#85200c",
+    "#990000",
+    "#b45f06",
+    "#bf9000",
+    "#38761d",
+    "#134f5c",
+    "#1155cc",
+    "#0b5394",
+    "#351c75",
+    "#741b47",
+  ],
+  [
+    "#5b0f00",
+    "#660000",
+    "#783f04",
+    "#7f6000",
+    "#274e13",
+    "#0c343d",
+    "#1c4587",
+    "#073763",
+    "#20124d",
+    "#4c1130",
+  ],
+];
+
+export class ColorPicker extends Component<any, SpreadsheetEnv> {
+  static template = xml/* xml */ `
+  <div class="o-color-picker" t-on-click="onColorClick">
+    <div class="o-color-picker-line" t-foreach="COLORS" t-as="colors" t-key="colors">
+      <t t-foreach="colors" t-as="color" t-key="color">
+        <div class="o-color-picker-line-item" t-att-data-color="color" t-attf-style="background-color:{{color}};"></div>
+      </t>
+    </div>
+  </div>`;
+
+  static style = css/* scss */ `
+    .o-color-picker {
+      position: absolute;
+      top: calc(100% + 5px);
+      left: 0;
+      z-index: 10;
+      box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
+      background-color: white;
+      padding: 6px 0px;
+
+      .o-color-picker-line {
+        display: flex;
+        padding: 3px 6px;
+        .o-color-picker-line-item {
+          width: 18px;
+          height: 18px;
+          margin: 0px 2px;
+          border-radius: 50px;
+          border: 1px solid #c0c0c0;
+          &:hover {
+            background-color: rgba(0, 0, 0, 0.08);
+            outline: 1px solid gray;
+          }
+        }
+      }
+    }
+  `;
+  COLORS = COLORS;
+
+  onColorClick(ev: MouseEvent) {
+    const color = (ev.target as HTMLElement).dataset.color;
+    if (color) {
+      this.trigger("color-picked", { color });
+    }
+  }
+}

package/src/components/composer/autocomplete_dropdown.ts

@@ -0,0 +1,135 @@
+import * as owl from "@odoo/owl";
+import { functionRegistry } from "../../functions/index";
+import { Registry } from "../../registry";
+
+const { Component, useState } = owl;
+const { xml, css } = owl.tags;
+const functions = functionRegistry.content;
+
+// -----------------------------------------------------------------------------
+// Autocomplete Value Providers
+// -----------------------------------------------------------------------------
+
+interface AutocompleteValue {
+  text: string;
+  description: string;
+}
+
+type AutocompleteProvider = () => Promise<AutocompleteValue[]>;
+
+const providerRegistry = new Registry<AutocompleteProvider>();
+
+providerRegistry.add("functions", async function () {
+  return Object.keys(functions).map((key) => {
+    return {
+      text: key,
+      description: functions[key].description,
+    };
+  });
+});
+
+// -----------------------------------------------------------------------------
+// Autocomplete DropDown component
+// -----------------------------------------------------------------------------
+
+const TEMPLATE = xml/* xml */ `
+  <div t-att-class="{'o-autocomplete-dropdown':state.values.length}" >
+    <t t-foreach="state.values" t-as="v" t-key="v.text">
+        <div t-att-class="{'o-autocomplete-value-focus': state.selectedIndex === v_index}" t-on-click.stop.prevent="fillValue(v_index)">
+             <div class="o-autocomplete-value" t-esc="v.text"/>
+             <div class="o-autocomplete-description" t-esc="v.description" t-if="state.selectedIndex === v_index"/>
+        </div>
+    </t>
+  </div>`;
+
+const CSS = css/* scss */ `
+  .o-autocomplete-dropdown {
+    width: 260px;
+    margin: 4px;
+    background-color: #fff;
+    box-shadow: 0 1px 4px 3px rgba(60, 64, 67, 0.15);
+
+    & > div:hover {
+      background-color: #f2f2f2;
+    }
+    .o-autocomplete-value-focus {
+      background-color: rgba(0, 0, 0, 0.08);
+    }
+
+    & > div {
+      display: flex;
+      flex-direction: column;
+      padding: 1px 0 5px 5px;
+      .o-autocomplete-description {
+        padding: 0 0 0 5px;
+        font-size: 11px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+`;
+
+interface Props {
+  provider: string;
+  filter?: (searchTerm: string, vals: AutocompleteValue[]) => AutocompleteValue[];
+  search: string;
+}
+
+export abstract class TextValueProvider extends Component<Props> {
+  static template = TEMPLATE;
+  static style = CSS;
+
+  state = useState({
+    values: <AutocompleteValue[]>[],
+    selectedIndex: 0,
+  });
+
+  mounted() {
+    this.filter(this.props.search);
+  }
+
+  willUpdateProps(nextProps: any): Promise<void> {
+    if (nextProps.search !== this.props.search) {
+      this.filter(nextProps.search);
+    }
+    return super.willUpdateProps(nextProps);
+  }
+
+  async filter(searchTerm: string) {
+    const provider = providerRegistry.get(this.props.provider);
+    let values = await provider();
+    if (this.props.filter) {
+      values = this.props.filter(searchTerm, values);
+    } else {
+      values = values
+        .filter((t) => t.text.toUpperCase().startsWith(searchTerm.toUpperCase()))
+        .sort((l, r) => (l.text < r.text ? -1 : l.text > r.text ? 1 : 0));
+    }
+    this.state.values = values.slice(0, 10);
+    this.state.selectedIndex = 0;
+  }
+
+  fillValue(index) {
+    this.state.selectedIndex = index;
+    this.trigger("completed", { text: this.getValueToFill() });
+  }
+
+  moveDown() {
+    this.state.selectedIndex = (this.state.selectedIndex + 1) % this.state.values.length;
+  }
+
+  moveUp() {
+    this.state.selectedIndex--;
+    if (this.state.selectedIndex < 0) {
+      this.state.selectedIndex = this.state.values.length - 1;
+    }
+  }
+
+  getValueToFill(): string | void {
+    if (this.state.values.length) {
+      return this.state.values[this.state.selectedIndex].text;
+    }
+  }
+}