Merge pull request #753 from exadel-inc/feature/select-multiple-values

feat(select-setting): ability to use more than one option value

Author: ala-n

site/src/examples/list.less

@@ -25,6 +25,16 @@
     &.aqua {
       background-color: aqua;
     }
+
+    &.top {
+      align-content: start;
+    }
+    &.center {
+      align-content: center;
+    }
+    &.bottom {
+      align-content: end;
+    }
   }
 
   &-circle {

site/views/examples/example/list.njk

@@ -106,7 +106,12 @@ title: Example with list of cards
     <uip-select-setting label="Card color:" target=".card-item" attribute="class" mode="append">
       <option value="red">Red</option>
       <option value="aqua">Aqua</option>
-      <option value="green">Green</option>
+      <option value="green green-clr">Green</option>
+    </uip-select-setting>
+    <uip-select-setting label="Text alignment:" target=".card-item" attribute="class" mode="append">
+      <option value="top">Top</option>
+      <option value="center">Center</option>
+      <option value="bottom bottom-alignment">Bottom</option>
     </uip-select-setting>
     <uip-bool-setting label="Wrap items" attribute="wrap-items"></uip-bool-setting>
   </uip-settings>

src/plugins/settings/select-setting/select-setting.ts

@@ -89,8 +89,9 @@ export class UIPSelectSetting extends UIPSetting {
   transformValue(value: string, attrValue: string | null): string | null {
     if (!attrValue) return value || null;
 
-    const attrTokens = this.settingOptions.reduce((tokens, option) =>
-      TokenListUtils.remove(tokens, option), TokenListUtils.split(attrValue));
+    const attrTokens = this.settingOptions.reduce((tokens, option) => {
+      return TokenListUtils.split(option).reduce((token, optionItem) => TokenListUtils.remove(token, optionItem), tokens);
+    }, TokenListUtils.split(attrValue));
     value && attrTokens.push(value);
 
     return TokenListUtils.join(attrTokens);
@@ -125,15 +126,18 @@ export class UIPSelectSetting extends UIPSetting {
   /** Updates setting's value for {@link mode} = "append" */
   protected appendFrom(attrValues: (string | null)[]): void {
     // array of each attribute's value intersection with select options
-    const valuesOptions = attrValues.map((val) => TokenListUtils.intersection(this.settingOptions, TokenListUtils.split(val)));
+    const valuesOptions: string[] = this.settingOptions.filter((option) => {
+      return TokenListUtils.split(option).length ===
+        TokenListUtils.intersection(TokenListUtils.split(option), TokenListUtils.split(attrValues[0])).length;
+    });
 
     // make empty option active if no options intersections among attribute values
     if (this.settingOptions.includes('') && valuesOptions.every((inter) => !inter.length)) {
       return this.setValue('');
     }
 
     // common options among all attribute values
-    const commonOptions = TokenListUtils.intersection(...valuesOptions);
+    const commonOptions = TokenListUtils.intersection(valuesOptions);
 
     if (this.multiple || commonOptions.length) return this.setValue(TokenListUtils.join(commonOptions));
 
@@ -146,7 +150,7 @@ export class UIPSelectSetting extends UIPSetting {
 
   protected setValue(value: string): void {
     this.$$off(this._onChange);
-    value.split(' ').forEach((opt) => this.$field.setSelected(opt, true));
+    this.$field.setSelected(value, true);
     this.$$on(this._onChange);
   }