1 |
|
2 | Oxe.component.define({
|
3 | name: 'o-optgroup',
|
4 | style: 'o-optgroup { display: block; } o-optgroup::before { content: attr(label); }',
|
5 | template: '<slot></slot>',
|
6 | properties: {
|
7 | disabled: {
|
8 | enumerable: true,
|
9 | get: function () {
|
10 | var disabled = this.getAttribute('disabled');
|
11 | return disabled !== null && disabled !== 'false' ? true : false;
|
12 | },
|
13 | set: function (data) {
|
14 | data = data ? true : false;
|
15 |
|
16 | if (data) {
|
17 | this.setAttribute('disabled', '');
|
18 | } else {
|
19 | this.removeAttribute('disabled');
|
20 | }
|
21 |
|
22 | return data;
|
23 | }
|
24 | }
|
25 | }
|
26 | });
|
27 |
|
28 | Oxe.component.define({
|
29 | name: 'o-option',
|
30 | template: '<slot></slot>',
|
31 | style: 'o-option { display: block; }',
|
32 | attributes: [ 'value' ],
|
33 | properties: {
|
34 | _valueDefaultLocked: {
|
35 | writable: true,
|
36 | value: false
|
37 | },
|
38 | _selectedDefaultLocked: {
|
39 | writable: true,
|
40 | value: false
|
41 | },
|
42 | _value: {
|
43 | writable: true,
|
44 | value: ''
|
45 | },
|
46 | _selected: {
|
47 | writable: true,
|
48 | value: false
|
49 | },
|
50 | value: {
|
51 | enumerable: true,
|
52 | get: function () {
|
53 | if (this._valueDefaultLocked) {
|
54 | return this._value || this.textContent || '';
|
55 | } else {
|
56 | var value = this.getAttribute('value');
|
57 | return value || this._value || this.textContent || '';
|
58 | }
|
59 | },
|
60 | set: function (data) {
|
61 | this._valueDefaultLocked = true;
|
62 | return this._value = data || '';
|
63 | }
|
64 | },
|
65 | selected: {
|
66 | enumerable: true,
|
67 | get: function () {
|
68 | if (this._selectedDefaultLocked) {
|
69 | return this._selected;
|
70 | } else {
|
71 | var selected = this.getAttribute('selected');
|
72 | return selected !== null && selected !== 'false' ? true : false;
|
73 | }
|
74 | },
|
75 | set: function (data) {
|
76 | this._selectedDefaultLocked = true;
|
77 | return this._selected = data ? true : false;
|
78 | }
|
79 | },
|
80 | disabled: {
|
81 | enumerable: true,
|
82 | get: function () {
|
83 | var disabled = this.getAttribute('disabled');
|
84 | return disabled !== null && disabled !== 'false' ? true : false;
|
85 | },
|
86 | set: function (data) {
|
87 | data = data ? true : false;
|
88 |
|
89 | if (data) {
|
90 | this.setAttribute('disabled', '');
|
91 | } else {
|
92 | this.removeAttribute('disabled');
|
93 | }
|
94 |
|
95 | return data;
|
96 | }
|
97 | },
|
98 | name: {
|
99 | enumerable: true,
|
100 | get: function () {
|
101 | return this.getAttribute('name') || '';
|
102 | },
|
103 | set: function (data) {
|
104 | this.setAttribute('name', data);
|
105 | return data;
|
106 | }
|
107 | }
|
108 | },
|
109 | attributed: function (name, _, data) {
|
110 | switch (name) {
|
111 | case 'value': this._value = data || ''; break;
|
112 | }
|
113 | }
|
114 | });
|
115 |
|
116 | export default {
|
117 | name: 'o-select',
|
118 | template: '<slot></slot>',
|
119 | style: 'o-select { display: block; }',
|
120 |
|
121 | properties: {
|
122 | update: {
|
123 | enumerable: true,
|
124 | value: function (element) {
|
125 | if (element.hasAttribute('o-value')) {
|
126 | var binder = Oxe.binder.get('attribute', element, 'o-value');
|
127 | var value = Oxe.utility.value(element, this.model);
|
128 | binder.data = value;
|
129 | }
|
130 | }
|
131 | },
|
132 | options: {
|
133 | enumerable: true,
|
134 | get: function () {
|
135 | return this.querySelectorAll('o-option');
|
136 | }
|
137 | },
|
138 | multiple: {
|
139 | enumerable: true,
|
140 | get: function () {
|
141 | var multiple = this.getAttribute('multiple');
|
142 | return multiple !== null && multiple !== 'false' ? true : false;
|
143 | },
|
144 | set: function (data) {
|
145 | data = data ? true : false;
|
146 |
|
147 | if (data) {
|
148 | this.setAttribute('multiple', '');
|
149 | } else {
|
150 | this.removeAttribute('multiple');
|
151 | }
|
152 |
|
153 | return data;
|
154 | }
|
155 | },
|
156 | name: {
|
157 | enumerable: true,
|
158 | get: function () {
|
159 | return this.getAttribute('name') || '';
|
160 | },
|
161 | set: function (data) {
|
162 | this.setAttribute('name', data);
|
163 | return data;
|
164 | }
|
165 | }
|
166 | },
|
167 | created: function () {
|
168 | var self = this;
|
169 |
|
170 |
|
171 |
|
172 | self.addEventListener('click', function (e) {
|
173 | var option = e.target;
|
174 |
|
175 | if (option.nodeName !== 'O-OPTION') {
|
176 | while (option = option.parentElement) {
|
177 | if (option === self) {
|
178 | return;
|
179 | } else if (option.nodeName === 'O-OPTION') {
|
180 | break;
|
181 | }
|
182 | }
|
183 | }
|
184 |
|
185 | var optgroup = option;
|
186 |
|
187 | while (optgroup = optgroup.parentElement) {
|
188 | if (optgroup === self) {
|
189 | break;
|
190 | } else if (optgroup.nodeName === 'O-OPTGROUP') {
|
191 | if (optgroup.disabled) {
|
192 | return;
|
193 | } else {
|
194 | break;
|
195 | }
|
196 | }
|
197 | }
|
198 |
|
199 | if (!self.multiple) {
|
200 | var options = self.options;
|
201 | for (var i = 0, l = options.length; i < l; i++) {
|
202 | options[i].selected = false;
|
203 | }
|
204 | }
|
205 |
|
206 | option.selected = !option.selected;
|
207 |
|
208 |
|
209 | var binder = Oxe.binder.get('attribute', self, 'o-value');
|
210 | Oxe.binder.render(binder, 'view');
|
211 |
|
212 |
|
213 | });
|
214 |
|
215 | }
|
216 | };
|