support groups and options

plantain-00 · May 31, 2017 · c2705a4 · c2705a4
1 parent 5c700ec
commit c2705a4
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -75,7 +75,7 @@ the source code of the demo: https://github.com/plantain-00/select2-component/tr
 
 name | type | description
 --- | --- | ---
-data | [Select2Data](#select2-data-structure)[] | the data of the select2
+data | [Select2Data](#select2-data-structure) | the data of the select2
 
 #### select2 data structure
 

diff --git a/demo/common.ts b/demo/common.ts
@@ -1,15 +1,15 @@
 import * as common from "../dist/common";
 
-export const data: common.Select2Data[] = [
+export const data1: common.Select2Data = [
     {
-        groupLabel: "Alaskan/Hawaiian Time Zone",
+        label: "Alaskan/Hawaiian Time Zone",
         options: [
             { value: "AK", label: "Alaska" },
             { value: "HI", label: "Hawaii" },
         ],
     },
     {
-        groupLabel: "Pacific Time Zone",
+        label: "Pacific Time Zone",
         options: [
             { value: "CA", label: "California" },
             { value: "NV", label: "Nevada" },
@@ -18,7 +18,7 @@ export const data: common.Select2Data[] = [
         ],
     },
     {
-        groupLabel: "Mountain Time Zone",
+        label: "Mountain Time Zone",
         options: [
             { value: "AZ", label: "Arizona" },
             { value: "CO", label: "Colorado" },
@@ -32,7 +32,7 @@ export const data: common.Select2Data[] = [
         ],
     },
     {
-        groupLabel: "Central Time Zone",
+        label: "Central Time Zone",
         options: [
             { value: "AL", label: "Alabama" },
             { value: "AR", label: "Arkansas" },
@@ -52,7 +52,7 @@ export const data: common.Select2Data[] = [
         ],
     },
     {
-        groupLabel: "Eastern Time Zone",
+        label: "Eastern Time Zone",
         options: [
             { value: "CT", label: "Connecticut" },
             { value: "DE", label: "Delaware" },
@@ -77,3 +77,56 @@ export const data: common.Select2Data[] = [
         ],
     },
 ];
+
+export const data2: common.Select2Data = [
+    { value: "AK", label: "Alaska" },
+    { value: "HI", label: "Hawaii" },
+    { value: "CA", label: "California" },
+    { value: "NV", label: "Nevada" },
+    { value: "OR", label: "Oregon" },
+    { value: "WA", label: "Washington" },
+    { value: "AZ", label: "Arizona" },
+    { value: "CO", label: "Colorado" },
+    { value: "ID", label: "Idaho" },
+    { value: "MT", label: "Montana" },
+    { value: "NE", label: "Nebraska" },
+    { value: "NM", label: "New Mexico" },
+    { value: "ND", label: "North Dakota" },
+    { value: "UT", label: "Utah" },
+    { value: "WY", label: "Wyoming" },
+    { value: "AL", label: "Alabama" },
+    { value: "AR", label: "Arkansas" },
+    { value: "IL", label: "Illinois" },
+    { value: "IA", label: "Iowa" },
+    { value: "KS", label: "Kansas" },
+    { value: "KY", label: "Kentucky" },
+    { value: "LA", label: "Louisiana" },
+    { value: "MN", label: "Minnesota" },
+    { value: "MS", label: "Mississippi" },
+    { value: "MO", label: "Missouri" },
+    { value: "OK", label: "Oklahoma" },
+    { value: "SD", label: "South Dakota" },
+    { value: "TX", label: "Texas" },
+    { value: "TN", label: "Tennessee" },
+    { value: "WI", label: "Wisconsin" },
+    { value: "CT", label: "Connecticut" },
+    { value: "DE", label: "Delaware" },
+    { value: "FL", label: "Florida" },
+    { value: "GA", label: "Georgia" },
+    { value: "IN", label: "Indiana" },
+    { value: "ME", label: "Maine" },
+    { value: "MD", label: "Maryland" },
+    { value: "MA", label: "Massachusetts" },
+    { value: "MI", label: "Michigan" },
+    { value: "NH", label: "New Hampshire" },
+    { value: "NJ", label: "New Jersey" },
+    { value: "NY", label: "New York" },
+    { value: "NC", label: "North Carolina" },
+    { value: "OH", label: "Ohio" },
+    { value: "PA", label: "Pennsylvania" },
+    { value: "RI", label: "Rhode Island" },
+    { value: "SC", label: "South Carolina" },
+    { value: "VT", label: "Vermont" },
+    { value: "VA", label: "Virginia" },
+    { value: "WV", label: "West Virginia" },
+];
diff --git a/demo/vue/index.ts b/demo/vue/index.ts
@@ -1,17 +1,23 @@
 import * as Vue from "vue";
 import Component from "vue-class-component";
 import "../../dist/vue";
-import { data } from "../common";
+import { data1, data2 } from "../common";
 
 @Component({
     template: `
-    <select2 :data="data"
-        value="AK">
-    </select2>
+    <div>
+        <select2 :data="data1"
+            value="AK">
+        </select2>
+        <select2 :data="data2"
+            value="AK">
+        </select2>
+    </div>
     `,
 })
 class App extends Vue {
-    data = data;
+    data1 = data1;
+    data2 = data2;
 }
 
 /* tslint:disable:no-unused-expression */

diff --git a/src/common.ts b/src/common.ts
@@ -1,9 +1,11 @@
-export type Select2Data = {
-    groupLabel: string;
+export type Select2Group = {
+    label: string;
     options: Select2Option[];
 };
 
 export type Select2Option = {
     value: string;
     label: string;
 };
+
+export type Select2Data = (Select2Group | Select2Option)[];
diff --git a/src/vue-variables.ts b/src/vue-variables.ts
@@ -1 +1 @@
-export const srcVueTemplateHtml = `<p><span class="select2 select2-container select2-container--default select2-container--below select2-container--focus" style="width: 100%"><span class="selection" @click="toggleOpenAndClose()"><span class="select2-selection select2-selection--single" role="combobox"><span class="select2-selection__rendered" :title="optionLabel">{{optionLabel}}</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span><span :class="dropdownStyle" style="position: absolute"><span class="select2-dropdown select2-dropdown--below" style="width: 816px"><span class="select2-search select2-search--dropdown"><input class="select2-search__field" type="search" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox"></span><span class="select2-results"><ul class="select2-results__options" role="tree" aria-expanded="true" aria-hidden="false"><li v-for="group in data" class="select2-results__option" role="group" aria-label="Alaskan/Hawaiian Time Zone"><strong class="select2-results__group">{{group.groupLabel}}</strong><ul class="select2-results__options select2-results__options--nested"><li v-for="option in group.options" :class="getOptionStyle(option.value)" role="treeitem" :aria-selected="option.value === value ? 'true' : 'false'" @mouseenter="mouseenter(option.value)" @mouseleave="mouseleave()" @click="click(option)">{{option.label}}</li></ul></li></ul></span></span></span></span></p>`;
+export const srcVueTemplateHtml = `<p><span class="select2 select2-container select2-container--default select2-container--below select2-container--focus" style="width: 100%"><span class="selection" @click="toggleOpenAndClose()"><span class="select2-selection select2-selection--single" role="combobox"><span class="select2-selection__rendered" :title="optionLabel">{{optionLabel}}</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper"></span><span :class="dropdownStyle" style="position: absolute"><span class="select2-dropdown select2-dropdown--below" style="width: 816px"><span class="select2-search select2-search--dropdown"><input class="select2-search__field" type="search" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox"></span><span class="select2-results"><ul class="select2-results__options" role="tree"><template v-for="groupOrOption in data"><li v-if="groupOrOption.options" class="select2-results__option" role="group"><strong class="select2-results__group">{{groupOrOption.label}}</strong><ul class="select2-results__options select2-results__options--nested"><li v-for="option in groupOrOption.options" :class="getOptionStyle(option.value)" role="treeitem" :aria-selected="option.value === value ? 'true' : 'false'" @mouseenter="mouseenter(option.value)" @mouseleave="mouseleave()" @click="click(option)">{{option.label}}</li></ul></li><li v-else :class="getOptionStyle(groupOrOption.value)" role="treeitem" :aria-selected="groupOrOption.value === value ? 'true' : 'false'" @mouseenter="mouseenter(groupOrOption.value)" @mouseleave="mouseleave()" @click="click(groupOrOption)">{{groupOrOption.label}}</li></template></ul></span></span></span></span></p>`;
diff --git a/src/vue.template.html b/src/vue.template.html
@@ -9,29 +9,42 @@
                 </span>
             </span>
         </span>
-        <span class="dropdown-wrapper" aria-hidden="true"></span>
+        <span class="dropdown-wrapper"></span>
         <span :class="dropdownStyle"
             style="position: absolute;">
             <span class="select2-dropdown select2-dropdown--below" style="width: 816px;">
                 <span class="select2-search select2-search--dropdown">
                     <input class="select2-search__field" type="search" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox">
                 </span>
                 <span class="select2-results">
-                    <ul class="select2-results__options" role="tree" aria-expanded="true" aria-hidden="false">
-                        <li v-for="group in data" class="select2-results__option" role="group" aria-label="Alaskan/Hawaiian Time Zone">
-                            <strong class="select2-results__group">{{group.groupLabel}}</strong>
-                            <ul class="select2-results__options select2-results__options--nested">
-                                <li v-for="option in group.options"
-                                    :class="getOptionStyle(option.value)"
-                                    role="treeitem"
-                                    :aria-selected="option.value === value ? 'true' : 'false'"
-                                    @mouseenter="mouseenter(option.value)"
-                                    @mouseleave="mouseleave()"
-                                    @click="click(option)">
-                                    {{option.label}}
-                                </li>
-                            </ul>
-                        </li>
+                    <ul class="select2-results__options" role="tree">
+                        <template v-for="groupOrOption in data">
+                            <li v-if="groupOrOption.options"
+                                class="select2-results__option"
+                                role="group">
+                                <strong class="select2-results__group">{{groupOrOption.label}}</strong>
+                                <ul class="select2-results__options select2-results__options--nested">
+                                    <li v-for="option in groupOrOption.options"
+                                        :class="getOptionStyle(option.value)"
+                                        role="treeitem"
+                                        :aria-selected="option.value === value ? 'true' : 'false'"
+                                        @mouseenter="mouseenter(option.value)"
+                                        @mouseleave="mouseleave()"
+                                        @click="click(option)">
+                                        {{option.label}}
+                                    </li>
+                                </ul>
+                            </li>
+                            <li v-else
+                                :class="getOptionStyle(groupOrOption.value)"
+                                role="treeitem"
+                                :aria-selected="groupOrOption.value === value ? 'true' : 'false'"
+                                @mouseenter="mouseenter(groupOrOption.value)"
+                                @mouseleave="mouseleave()"
+                                @click="click(groupOrOption)">
+                                {{groupOrOption.label}}
+                            </li>
+                        </template>
                     </ul>
                 </span>
             </span>

diff --git a/src/vue.ts b/src/vue.ts
@@ -8,7 +8,7 @@ import { srcVueTemplateHtml } from "./vue-variables";
     props: ["data", "value"],
 })
 class Select2 extends Vue {
-    data: common.Select2Data[];
+    data: common.Select2Data;
     value: string;
 
     hoveringValue: string | null = null;
@@ -22,10 +22,17 @@ class Select2 extends Vue {
     }
 
     beforeMount() {
-        for (const group of this.data) {
-            for (const option of group.options) {
-                if (option.value === this.value) {
-                    this.optionLabel = option.label;
+        for (const groupOrOption of this.data) {
+            if ((groupOrOption as common.Select2Group).options) {
+                for (const option of (groupOrOption as common.Select2Group).options) {
+                    if (option.value === this.value) {
+                        this.optionLabel = option.label;
+                        return;
+                    }
+                }
+            } else {
+                if ((groupOrOption as common.Select2Option).value === this.value) {
+                    this.optionLabel = groupOrOption.label;
                     return;
                 }
             }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export const srcVueTemplateHtml = `<p><span class="select2 select2-container select2-container--default select2-container--below select2-container--focus" style="width: 100%"><span class="selection" @click="toggleOpenAndClose()"><span class="select2-selection select2-selection--single" role="combobox"><span class="select2-selection__rendered" :title="optionLabel">{{optionLabel}}</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span><span :class="dropdownStyle" style="position: absolute"><span class="select2-dropdown select2-dropdown--below" style="width: 816px"><span class="select2-search select2-search--dropdown"><input class="select2-search__field" type="search" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox"></span><span class="select2-results"><ul class="select2-results__options" role="tree" aria-expanded="true" aria-hidden="false"><li v-for="group in data" class="select2-results__option" role="group" aria-label="Alaskan/Hawaiian Time Zone"><strong class="select2-results__group">{{group.groupLabel}}</strong><ul class="select2-results__options select2-results__options--nested"><li v-for="option in group.options" :class="getOptionStyle(option.value)" role="treeitem" :aria-selected="option.value === value ? 'true' : 'false'" @mouseenter="mouseenter(option.value)" @mouseleave="mouseleave()" @click="click(option)">{{option.label}}</li></ul></li></ul></span></span></span></span></p>`;
		export const srcVueTemplateHtml = `<p><span class="select2 select2-container select2-container--default select2-container--below select2-container--focus" style="width: 100%"><span class="selection" @click="toggleOpenAndClose()"><span class="select2-selection select2-selection--single" role="combobox"><span class="select2-selection__rendered" :title="optionLabel">{{optionLabel}}</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper"></span><span :class="dropdownStyle" style="position: absolute"><span class="select2-dropdown select2-dropdown--below" style="width: 816px"><span class="select2-search select2-search--dropdown"><input class="select2-search__field" type="search" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox"></span><span class="select2-results"><ul class="select2-results__options" role="tree"><template v-for="groupOrOption in data"><li v-if="groupOrOption.options" class="select2-results__option" role="group"><strong class="select2-results__group">{{groupOrOption.label}}</strong><ul class="select2-results__options select2-results__options--nested"><li v-for="option in groupOrOption.options" :class="getOptionStyle(option.value)" role="treeitem" :aria-selected="option.value === value ? 'true' : 'false'" @mouseenter="mouseenter(option.value)" @mouseleave="mouseleave()" @click="click(option)">{{option.label}}</li></ul></li><li v-else :class="getOptionStyle(groupOrOption.value)" role="treeitem" :aria-selected="groupOrOption.value === value ? 'true' : 'false'" @mouseenter="mouseenter(groupOrOption.value)" @mouseleave="mouseleave()" @click="click(groupOrOption)">{{groupOrOption.label}}</li></template></ul></span></span></span></span></p>`;