forked from extern/egroupware
Selectbox webcomponent
This commit is contained in:
nathan
parent
8d5f39b2d3
commit
f8ab5c521e
@ -1,3 +1,7 @@
|
||||
/**
|
||||
* Sharable date styles constant
|
||||
*/
|
||||
|
||||
import {css} from "@lion/core";
|
||||
|
||||
export const dateStyles = css`
|
||||
|
||||
447
api/js/etemplate/Et2Select/Et2Select.ts
Normal file
447
api/js/etemplate/Et2Select/Et2Select.ts
Normal file
@ -0,0 +1,447 @@
|
||||
/**
|
||||
* EGroupware eTemplate2 - Description WebComponent
|
||||
*
|
||||
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
|
||||
* @package api
|
||||
* @link https://www.egroupware.org
|
||||
* @author Nathan Gray
|
||||
*/
|
||||
|
||||
|
||||
import {LionSelect} from "@lion/select";
|
||||
import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
|
||||
import {et2_readAttrWithDefault} from "../et2_core_xml";
|
||||
import {css, html, repeat} from "@lion/core";
|
||||
import arrow_down from "../../../../pixelegg/images/arrow_down.svg";
|
||||
|
||||
export interface SelectOption
|
||||
{
|
||||
value : String;
|
||||
label : String;
|
||||
// Hover help text
|
||||
title? : String;
|
||||
};
|
||||
|
||||
|
||||
export class Et2Select extends Et2InputWidget(LionSelect)
|
||||
{
|
||||
|
||||
protected _value : string = "";
|
||||
protected _options : SelectOption[] = [];
|
||||
|
||||
static get styles()
|
||||
{
|
||||
return [
|
||||
...super.styles,
|
||||
css`
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
select {
|
||||
color: var(--input-text-color, #26537c);
|
||||
border-radius: 3px;
|
||||
flex: 1 0 auto;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
padding-right: 20px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #e6e6e6;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
margin: 0;
|
||||
background: #fff no-repeat center right;
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8P3htbC1zdHlsZXNoZWV0IHR5cGU9InRleHQvY3NzIiBocmVmPSIuLi9sZXNzL3N2Zy5jc3MiID8+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0icGl4ZWxlZ2dfYXJyb3dfZG93biIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSIzMnB4IiBoZWlnaHQ9IjMycHgiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBvbHlnb24gZmlsbD0iIzY5Njk2OSIgcG9pbnRzPSIxLjc1LDUgMS43NDksNSAxNiwyOC40OSAzMC4yNTEsNSAiLz4NCjwvc3ZnPg0K');
|
||||
background-size: 8px auto;
|
||||
background-position-x: calc(100% - 8px);
|
||||
text-indent: 5px;
|
||||
}
|
||||
|
||||
select:hover {
|
||||
box-shadow: 1px 1px 1px rgb(0 0 0 / 60%);
|
||||
}`
|
||||
];
|
||||
}
|
||||
|
||||
static get properties()
|
||||
{
|
||||
return {
|
||||
...super.properties,
|
||||
/**
|
||||
* Textual label for first row, eg: 'All' or 'None'. It's value will be ''
|
||||
*/
|
||||
empty_label: String,
|
||||
|
||||
select_options: Object
|
||||
}
|
||||
}
|
||||
|
||||
constructor()
|
||||
{
|
||||
super();
|
||||
|
||||
// Initialize properties
|
||||
this.value = "";
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Set the ID of the widget
|
||||
*
|
||||
* Overridden from parent to update select options
|
||||
*
|
||||
* @param {string} value
|
||||
*/
|
||||
set id(value)
|
||||
{
|
||||
let oldValue = this.id;
|
||||
super.id = value;
|
||||
if(value !== oldValue)
|
||||
{
|
||||
this.set_select_options(find_select_options(this));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the ID of the widget
|
||||
* Overridden from parent because we overrode setter
|
||||
*
|
||||
* @returns {string}
|
||||
*/
|
||||
get id()
|
||||
{
|
||||
return this._widget_id;
|
||||
}
|
||||
|
||||
set_value(value)
|
||||
{
|
||||
this.value = value;
|
||||
}
|
||||
|
||||
get value()
|
||||
{
|
||||
return this._value;
|
||||
}
|
||||
|
||||
set value(_value : string)
|
||||
{
|
||||
let oldValue = this.value;
|
||||
|
||||
this._value = _value;
|
||||
this.requestUpdate('value', oldValue);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the select options
|
||||
*
|
||||
* @param {SelectOption[]} new_options
|
||||
*/
|
||||
set_select_options(new_options : SelectOption[])
|
||||
{
|
||||
if(!Array.isArray(new_options))
|
||||
{
|
||||
let fixed_options = [];
|
||||
for(let key in new_options)
|
||||
{
|
||||
fixed_options.push({value: key, label: new_options[key]});
|
||||
}
|
||||
this._options = fixed_options;
|
||||
return;
|
||||
}
|
||||
this._options = new_options;
|
||||
}
|
||||
|
||||
get_select_options()
|
||||
{
|
||||
return this._options;
|
||||
}
|
||||
|
||||
get slots()
|
||||
{
|
||||
return {
|
||||
...super.slots,
|
||||
input: () =>
|
||||
{
|
||||
return document.createElement("select");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @return {TemplateResult}
|
||||
* @protected
|
||||
*/
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
_inputGroupInputTemplate()
|
||||
{
|
||||
return html`
|
||||
<div class="input-group__input">
|
||||
<select>
|
||||
${this._emptyLabelTemplate()}
|
||||
${repeat(this.get_select_options(), (option : SelectOption) => option.value, this._optionTemplate)}
|
||||
</select>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
_emptyLabelTemplate()
|
||||
{
|
||||
if(!this.empty_label)
|
||||
{
|
||||
return html``;
|
||||
}
|
||||
return html`
|
||||
<option value="">${this.empty_label}</option>`;
|
||||
}
|
||||
|
||||
_optionTemplate(option : SelectOption)
|
||||
{
|
||||
return html`
|
||||
<option value="${option.value}" title="${option.title}">${option.label}</option>`;
|
||||
}
|
||||
|
||||
loadFromXML(_node : Element)
|
||||
{
|
||||
// Read the option-tags
|
||||
let options = _node.querySelectorAll("option");
|
||||
let new_options = this._options;
|
||||
for(var i = 0; i < options.length; i++)
|
||||
{
|
||||
new_options.push({
|
||||
value: et2_readAttrWithDefault(options[i], "value", options[i].textContent),
|
||||
// allow options to contain multiple translated sub-strings eg: {Firstname}.{Lastname}
|
||||
label: options[i].textContent.replace(/{([^}]+)}/g, function(str, p1)
|
||||
{
|
||||
return this.egw().lang(p1);
|
||||
}),
|
||||
title: et2_readAttrWithDefault(options[i], "title", "")
|
||||
});
|
||||
}
|
||||
|
||||
this.set_select_options(new_options);
|
||||
}
|
||||
|
||||
transformAttributes(_attrs)
|
||||
{
|
||||
super.transformAttributes(_attrs);
|
||||
|
||||
// If select_options are already known, skip the rest
|
||||
if(this._options && this._options.length > 0 ||
|
||||
_attrs.select_options && Object.keys(_attrs.select_options).length > 0 ||
|
||||
// Allow children to skip select_options - check to make sure default got set to something (should be {})
|
||||
typeof _attrs.select_options == 'undefined' || _attrs.select_options === null
|
||||
)
|
||||
{
|
||||
// do not return inside nextmatch, as get_rows data might have changed select_options
|
||||
// for performance reasons we only do it for first row, which should have id "0[...]"
|
||||
if(this.getParent() && this.getParent().getType() != 'rowWidget' || !_attrs.id || _attrs.id[0] != '0')
|
||||
{
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
let sel_options = find_select_options(this, _attrs['select_options'], _attrs);
|
||||
if(sel_options.length > 0)
|
||||
{
|
||||
this.set_select_options(sel_options);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Find the select options for a widget, out of the many places they could be.
|
||||
* @param {Et2Widget} widget to check for. Should be some sort of select widget.
|
||||
* @param {object} attr_options Select options in attributes array
|
||||
* @param {object} attrs Widget attributes
|
||||
* @return {object} Select options, or empty object
|
||||
*/
|
||||
export function find_select_options(widget, attr_options?, attrs?)
|
||||
{
|
||||
let name_parts = widget.id.replace(/[/g, '[').replace(/]|]/g, '').split('[');
|
||||
|
||||
let type_options : SelectOption[] = [];
|
||||
let content_options : SelectOption[] = [];
|
||||
|
||||
// First check type, there may be static options.
|
||||
// TODO
|
||||
/*
|
||||
var type = widget._type;
|
||||
var type_function = type.replace('select-', '').replace('taglist-', '').replace('_ro', '') + '_options';
|
||||
if(typeof this[type_function] == 'function')
|
||||
{
|
||||
var old_type = widget._type;
|
||||
widget._type = type.replace('taglist-', 'select-');
|
||||
if(typeof attrs.other == 'string')
|
||||
{
|
||||
attrs.other = attrs.other.split(',');
|
||||
}
|
||||
// Copy, to avoid accidental modification
|
||||
//
|
||||
// type options used to use jQuery.extend deep copy to get a clone object of options
|
||||
// but as jQuery.extend deep copy is very expensive operation in MSIE (in this case almost 400ms)
|
||||
// we use JSON parsing instead to copy the options object
|
||||
type_options = this[type_function].call(this, widget, attrs);
|
||||
try
|
||||
{
|
||||
type_options = JSON.parse(JSON.stringify(type_options));
|
||||
}
|
||||
catch(e)
|
||||
{
|
||||
egw.debug(e);
|
||||
}
|
||||
|
||||
widget._type = old_type;
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
// Try to find the options inside the "sel-options"
|
||||
if(widget.getArrayMgr("sel_options"))
|
||||
{
|
||||
// Try first according to ID
|
||||
content_options = widget.getArrayMgr("sel_options").getEntry(widget.id);
|
||||
// ID can get set to an array with 0 => ' ' - not useful
|
||||
if(content_options && (content_options.length == 1 && typeof content_options[0] == 'string' && content_options[0].trim() == '' ||
|
||||
// eg. autorepeated id "cat[3]" would pick array element 3 from cat
|
||||
typeof content_options.value != 'undefined' && typeof content_options.label != 'undefined' && widget.id.match(/\[\d+\]$/)))
|
||||
{
|
||||
content_options = null;
|
||||
}
|
||||
// We could wind up too far inside options if label,title are defined
|
||||
if(content_options && !isNaN(name_parts[name_parts.length - 1]) && content_options.label && content_options.title)
|
||||
{
|
||||
name_parts.pop();
|
||||
content_options = widget.getArrayMgr("sel_options").getEntry(name_parts.join('['));
|
||||
delete content_options["$row"];
|
||||
}
|
||||
|
||||
// Select options tend to be defined once, at the top level, so try that
|
||||
if(!content_options || content_options.length == 0)
|
||||
{
|
||||
content_options = widget.getArrayMgr("sel_options").getRoot().getEntry(name_parts[name_parts.length - 1]);
|
||||
}
|
||||
|
||||
// Try in correct namespace (inside a grid or something)
|
||||
if(!content_options || content_options.length == 0)
|
||||
{
|
||||
content_options = widget.getArrayMgr("sel_options").getEntry(name_parts[name_parts.length - 1]);
|
||||
}
|
||||
|
||||
// Try name like widget[$row]
|
||||
if(name_parts.length > 1 && (!content_options || content_options.length == 0))
|
||||
{
|
||||
let pop_that = JSON.parse(JSON.stringify(name_parts));
|
||||
while(pop_that.length > 1 && (!content_options || content_options.length == 0))
|
||||
{
|
||||
var last = pop_that.pop();
|
||||
content_options = widget.getArrayMgr('sel_options').getEntry(pop_that.join('['));
|
||||
|
||||
// Double check, might have found a normal parent namespace ( eg subgrid in subgrid[selectbox] )
|
||||
// with an empty entry for the selectbox. If there were valid options here,
|
||||
// we would have found them already, and keeping this would result in the ID as an option
|
||||
if(content_options && !Array.isArray(content_options) && typeof content_options[last] != 'undefined' && content_options[last])
|
||||
{
|
||||
content_options = content_options[last];
|
||||
}
|
||||
else if(content_options)
|
||||
{
|
||||
// Check for real values
|
||||
for(var key in content_options)
|
||||
{
|
||||
if(!(isNaN(<number><unknown>key) && typeof content_options[key] === 'string' ||
|
||||
!isNaN(<number><unknown>key) && typeof content_options[key] === 'object' && typeof content_options[key]['value'] !== 'undefined'))
|
||||
{
|
||||
// Found a parent of some other namespace
|
||||
content_options = undefined;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Maybe in a row, and options got stuck in ${row} instead of top level
|
||||
// not sure this code is still needed, as server-side no longer creates ${row} or {$row} for select-options
|
||||
var row_stuck = ['${row}', '{$row}'];
|
||||
for(let i = 0; i < row_stuck.length && (!content_options || content_options.length == 0); i++)
|
||||
{
|
||||
// perspectiveData.row in nm, data["${row}"] in an auto-repeat grid
|
||||
if(widget.getArrayMgr("sel_options").perspectiveData.row || widget.getArrayMgr("sel_options").data[row_stuck[i]])
|
||||
{
|
||||
var row_id = widget.id.replace(/[0-9]+/, row_stuck[i]);
|
||||
content_options = widget.getArrayMgr("sel_options").getEntry(row_id);
|
||||
if(!content_options || content_options.length == 0)
|
||||
{
|
||||
content_options = widget.getArrayMgr("sel_options").getEntry(row_stuck[i] + '[' + widget.id + ']');
|
||||
}
|
||||
}
|
||||
}
|
||||
if(attr_options && Object.keys(attr_options).length > 0 && content_options)
|
||||
{
|
||||
//content_options = jQuery.extend(true, {}, attr_options, content_options);
|
||||
content_options = [...attr_options, ...content_options];
|
||||
}
|
||||
}
|
||||
|
||||
// Check whether the options entry was found, if not read it from the
|
||||
// content array.
|
||||
if(content_options && content_options.length > 0 && widget.getArrayMgr('content') != null)
|
||||
{
|
||||
if(content_options)
|
||||
{
|
||||
attr_options = content_options;
|
||||
}
|
||||
var content_mgr = widget.getArrayMgr('content');
|
||||
if(content_mgr)
|
||||
{
|
||||
// If that didn't work, check according to ID
|
||||
if(!content_options)
|
||||
{
|
||||
content_options = content_mgr.getEntry("options-" + widget.id);
|
||||
}
|
||||
// Again, try last name part at top level
|
||||
if(!content_options)
|
||||
{
|
||||
content_options = content_mgr.getRoot().getEntry("options-" + name_parts[name_parts.length - 1]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Default to an empty object
|
||||
if(content_options == null)
|
||||
{
|
||||
content_options = [];
|
||||
}
|
||||
|
||||
// Include type options, preferring any content options
|
||||
if(type_options.length || Object.keys(type_options).length > 0)
|
||||
{
|
||||
for(let i in content_options)
|
||||
{
|
||||
var value = typeof content_options[i] == 'object' && typeof content_options[i].value !== 'undefined' ? content_options[i].value : i;
|
||||
var added = false;
|
||||
|
||||
// Override any existing
|
||||
for(var j in type_options)
|
||||
{
|
||||
if('' + type_options[j].value === '' + value)
|
||||
{
|
||||
added = true;
|
||||
type_options[j] = content_options[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(!added)
|
||||
{
|
||||
type_options.splice(i, 0, content_options[i]);
|
||||
}
|
||||
}
|
||||
content_options = type_options;
|
||||
}
|
||||
return content_options;
|
||||
}
|
||||
|
||||
// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
|
||||
customElements.define("et2-select", Et2Select);
|
||||
115
api/js/etemplate/Et2Select/Et2SelectReadonly.ts
Normal file
115
api/js/etemplate/Et2Select/Et2SelectReadonly.ts
Normal file
@ -0,0 +1,115 @@
|
||||
/**
|
||||
* EGroupware eTemplate2 - Readonly select WebComponent
|
||||
*
|
||||
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
|
||||
* @package api
|
||||
* @link https://www.egroupware.org
|
||||
* @author Nathan Gray
|
||||
*/
|
||||
|
||||
|
||||
import {html, LitElement} from "@lion/core";
|
||||
import {et2_IDetachedDOM} from "../et2_core_interfaces";
|
||||
import {Et2Widget} from "../Et2Widget/Et2Widget";
|
||||
import {find_select_options, SelectOption} from "./Et2Select";
|
||||
|
||||
/**
|
||||
* This is a stripped-down read-only widget used in nextmatch
|
||||
* (and other read-only usages)
|
||||
*/
|
||||
export class Et2SelectReadonly extends Et2Widget(LitElement) implements et2_IDetachedDOM
|
||||
{
|
||||
protected value : any;
|
||||
protected _options : SelectOption[] = [];
|
||||
|
||||
static get styles()
|
||||
{
|
||||
return [
|
||||
...super.styles
|
||||
];
|
||||
}
|
||||
|
||||
static get properties()
|
||||
{
|
||||
return {
|
||||
...super.properties,
|
||||
value: String,
|
||||
select_options: Object
|
||||
}
|
||||
}
|
||||
|
||||
constructor()
|
||||
{
|
||||
super();
|
||||
}
|
||||
|
||||
transformAttributes(_attrs)
|
||||
{
|
||||
super.transformAttributes(_attrs);
|
||||
|
||||
let sel_options = find_select_options(this, _attrs['select_options'], _attrs);
|
||||
if(sel_options.length > 0)
|
||||
{
|
||||
this.set_select_options(sel_options);
|
||||
}
|
||||
}
|
||||
|
||||
set_value(value)
|
||||
{
|
||||
this.value = value;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the select options
|
||||
*
|
||||
* @param {SelectOption[]} new_options
|
||||
*/
|
||||
set_select_options(new_options : SelectOption[] | { [key : string] : string })
|
||||
{
|
||||
if(!Array.isArray(new_options))
|
||||
{
|
||||
let fixed_options : SelectOption[] = [];
|
||||
for(let key in new_options)
|
||||
{
|
||||
fixed_options.push(<SelectOption>{value: key, label: new_options[key]});
|
||||
}
|
||||
console.warn(this.id + " passed a key => value map instead of array");
|
||||
this._options = fixed_options;
|
||||
return;
|
||||
}
|
||||
this._options = new_options;
|
||||
}
|
||||
|
||||
render()
|
||||
{
|
||||
let current = this._options.find(option => option.value == this.value);
|
||||
let label = current ? current.label : "";
|
||||
|
||||
return html`
|
||||
<span>${label}</span>
|
||||
`;
|
||||
}
|
||||
|
||||
getDetachedAttributes(attrs)
|
||||
{
|
||||
attrs.push("id", "value", "class");
|
||||
}
|
||||
|
||||
getDetachedNodes() : HTMLElement[]
|
||||
{
|
||||
return [<HTMLElement><unknown>this];
|
||||
}
|
||||
|
||||
setDetachedAttributes(_nodes : HTMLElement[], _values : object, _data? : any) : void
|
||||
{
|
||||
// Do nothing, since we can't actually stop being a DOM node...
|
||||
}
|
||||
|
||||
loadFromXML()
|
||||
{
|
||||
// nope
|
||||
}
|
||||
}
|
||||
|
||||
// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
|
||||
customElements.define("et2-select_ro", Et2SelectReadonly);
|
||||
@ -30,6 +30,8 @@ import './Et2Date/Et2DateReadonly'
|
||||
import './Et2Date/Et2DateTime';
|
||||
import './Et2Date/Et2DateTimeReadonly';
|
||||
import './Et2Description/Et2Description';
|
||||
import './Et2Select/Et2Select';
|
||||
import './Et2Select/Et2SelectReadonly';
|
||||
import './Et2Textarea/Et2Textarea';
|
||||
import './Et2Textbox/Et2Textbox';
|
||||
import './Et2Colorpicker/Et2Colorpicker';
|
||||
|
||||
@ -59,6 +59,7 @@
|
||||
"@lion/input": "^0.15.4",
|
||||
"@lion/input-date": "^0.12.6",
|
||||
"@lion/input-datepicker": "^0.23.6",
|
||||
"@lion/select": "^0.14.7",
|
||||
"@lion/textarea": "^0.13.4",
|
||||
"jquery-ui-timepicker-addon": "^1.6.3",
|
||||
"sortablejs": "^1.14.0"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user