├── .env
├── favicon.ico
├── static
    ├── demo.gif
    ├── logo.png
    └── softdesk.png
├── styles
    ├── themes
    │   ├── soft.scss
    │   ├── dark.scss
    │   └── light.scss
    ├── _variables.scss
    ├── _normalize.scss
    └── global.scss
├── src
    ├── types.js
    ├── components
    │   ├── separator.vue
    │   ├── noResults.vue
    │   ├── noSelection.vue
    │   ├── total.vue
    │   ├── selectAll.vue
    │   ├── deselectAll.vue
    │   ├── search.vue
    │   └── list.vue
    ├── locales
    │   ├── tr_TR.json
    │   ├── en_US.json
    │   ├── cz_CZ.json
    │   ├── fr_FR.json
    │   ├── sk_SK.json
    │   ├── es_ES.json
    │   ├── pl_PL.json
    │   └── pt_BR.json
    ├── index.js
    ├── i18n.js
    ├── utils.js
    ├── mixin.js
    ├── sort-by.js
    ├── vue-select-sides.vue
    └── modules
    │   ├── mirror.vue
    │   └── grouped.vue
├── example
    ├── main.js
    ├── components
    │   ├── mirror-with-selecteds.vue
    │   ├── mirror-with-disabled.vue
    │   ├── mirror-placeholder-search.vue
    │   ├── mirror-only-list.vue
    │   ├── mirror-sort-list.vue
    │   ├── grouped-basic.vue
    │   ├── grouped-with-selecteds.vue
    │   ├── grouped-only-list.vue
    │   ├── grouped-sort-selected-first.vue
    │   ├── grouped-placeholder-search.vue
    │   ├── grouped-with-disabled.vue
    │   ├── grouped-sort-list.vue
    │   └── mirror-basic.vue
    └── App.vue
├── vue.config.js
├── .eslintrc.js
├── .gitignore
├── docs
    ├── index.html
    └── vueSelectSidesExample.css
├── .editorconfig
├── vite.serve.config.js
├── vite.npm.config.js
├── vite.example.config.js
├── package.json
├── dist
    └── css
    │   ├── soft.css
    │   ├── dark.css
    │   └── light.css
├── README.md
└── tests
    └── sort-by.test.js


/.env:
--------------------------------------------------------------------------------
1 | VUE_APP_I18N_LOCALE=en_US
2 | VUE_APP_I18N_FALLBACK_LOCALE=en_US
3 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/soft4ti/vue-select-sides/HEAD/favicon.ico


--------------------------------------------------------------------------------
/static/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/soft4ti/vue-select-sides/HEAD/static/demo.gif


--------------------------------------------------------------------------------
/static/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/soft4ti/vue-select-sides/HEAD/static/logo.png


--------------------------------------------------------------------------------
/static/softdesk.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/soft4ti/vue-select-sides/HEAD/static/softdesk.png


--------------------------------------------------------------------------------
/styles/themes/soft.scss:
--------------------------------------------------------------------------------
1 | @forward "../_variables.scss";
2 | @forward "../global.scss";
3 | @use "../global.scss" as *;
4 | 


--------------------------------------------------------------------------------
/src/types.js:
--------------------------------------------------------------------------------
1 | import mirror from "./modules/mirror.vue";
2 | import grouped from "./modules/grouped.vue";
3 | export default {
4 |   mirror: mirror,
5 |   grouped: grouped,
6 | };
7 | 


--------------------------------------------------------------------------------
/example/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from "vue";
2 | import App from "./App.vue";
3 | import vueSelectSides from "../src/index";
4 | 
5 | const app = createApp(App);
6 | app.use(vueSelectSides);
7 | app.mount("#app");
8 | 


--------------------------------------------------------------------------------
/src/components/separator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="vss-span">
 3 |     &lsaquo; &rsaquo;
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: "v-separator",
10 |   display: "Separator"
11 | };
12 | </script>
13 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   productionSourceMap: false,
 3 |   pluginOptions: {
 4 |     i18n: {
 5 |       locale: "en_US",
 6 |       fallbackLocale: "en_US",
 7 |       localeDir: "locales",
 8 |       enableInSFC: false,
 9 |     },
10 |   },
11 | };
12 | 


--------------------------------------------------------------------------------
/src/locales/tr_TR.json:
--------------------------------------------------------------------------------
1 | {
2 |   "selectAll": "Hepsini Seç",
3 |   "deselectAll": "Hepsini Çıkar",
4 |   "searchPlaceholder": "Ara...",
5 |   "searchNoResult": "Sonuç Bulunamadı...",
6 |   "searchParentSelected": "Hiçbiri Seçilmedi...",
7 |   "totalSelected": "Hepsi Seçildi"
8 | }
9 | 


--------------------------------------------------------------------------------
/src/locales/en_US.json:
--------------------------------------------------------------------------------
1 | {
2 |   "selectAll": "Select all",
3 |   "deselectAll": "Deselect all",
4 |   "searchPlaceholder": "Search...",
5 |   "searchNoResult": "No result...",
6 |   "searchParentSelected": "No items selected...",
7 |   "totalSelected": "Total items selected"
8 | }
9 | 


--------------------------------------------------------------------------------
/src/locales/cz_CZ.json:
--------------------------------------------------------------------------------
1 | {
2 |     "selectAll": "Vybrat vše ",
3 |     "deselectAll": "Odebrat vše ",
4 |     "searchPlaceholder": "Hledej...",
5 |     "searchNoResult": "Žádný výsledek...",
6 |     "searchParentSelected": "Nic není vybráno...",
7 |     "totalSelected": "Spolu vybrané"
8 | }


--------------------------------------------------------------------------------
/src/locales/fr_FR.json:
--------------------------------------------------------------------------------
1 | {
2 |   "selectAll": "Ajouter tout",
3 |   "deselectAll": "Supprimer tout",
4 |   "searchPlaceholder": "Recherche...",
5 |   "searchNoResult": "Pas de résultat...",
6 |   "searchParentSelected": "Sélection vide...",
7 |   "totalSelected": "Éléments sélectionnés"
8 | }
9 | 


--------------------------------------------------------------------------------
/src/locales/sk_SK.json:
--------------------------------------------------------------------------------
1 | {
2 |     "selectAll": "Vybrať všetko",
3 |     "deselectAll": "Odobrať všetko",
4 |     "searchPlaceholder": "Hľadaj...",
5 |     "searchNoResult": "Žiadny výsledok...",
6 |     "searchParentSelected": "Nič nie je vybrané...",
7 |     "totalSelected": "Spolu vybrané"
8 | }


--------------------------------------------------------------------------------
/src/components/noResults.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <li class="no-results">
 3 |     <span>{{ $t("searchNoResult") }}</span>
 4 |   </li>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: "v-no-results",
10 |   display: "No results",
11 |   methods: {},
12 | };
13 | </script>
14 | 


--------------------------------------------------------------------------------
/src/components/noSelection.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <li class="no-selection">
 3 |     <span>{{ $t("searchParentSelected") }}</span>
 4 |   </li>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: "v-no-selection",
10 |   display: "No selection",
11 |   methods: {}
12 | };
13 | </script>
14 | 


--------------------------------------------------------------------------------
/src/components/total.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <span :title="$t('totalSelected')">{{ value }}</span>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: "v-total",
 8 |   display: "Total",
 9 |   props: {
10 |     value: {
11 |       type: Number
12 |     }
13 |   }
14 | };
15 | </script>
16 | 


--------------------------------------------------------------------------------
/src/locales/es_ES.json:
--------------------------------------------------------------------------------
1 | {
2 |   "selectAll": "Seleccionar todos",
3 |   "deselectAll": "Deseleccionar todos",
4 |   "searchPlaceholder": "Buscar...",
5 |   "searchNoResult": "Sin resultados...",
6 |   "searchParentSelected": "Ningún elemento seleccionado...",
7 |   "totalSelected": "Elementos seleccionados"
8 | }
9 | 


--------------------------------------------------------------------------------
/src/locales/pl_PL.json:
--------------------------------------------------------------------------------
1 | {
2 |   "selectAll": "Wybierz wszystko",
3 |   "deselectAll": "Wyczyść zaznaczenie",
4 |   "searchPlaceholder": "Szukaj...",
5 |   "searchNoResult": "Brak wyników...",
6 |   "searchParentSelected": "Nie wybrano żadnych elementów...",
7 |   "totalSelected": "Liczba wybranych elementów"
8 | }
9 | 


--------------------------------------------------------------------------------
/src/locales/pt_BR.json:
--------------------------------------------------------------------------------
1 | {
2 |   "selectAll": "Selecionar todos",
3 |   "deselectAll": "Remover todos",
4 |   "searchPlaceholder": "Pesquisar...",
5 |   "searchNoResult": "Sem nenhum resultado...",
6 |   "searchParentSelected": "Nenhum item selecionado...",
7 |   "totalSelected": "Total de itens selecionados"
8 | }
9 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |   },
 6 |   extends: ["plugin:vue/essential", "eslint:recommended"],
 7 |   rules: {
 8 |     "no-console": import.meta.env.MODE === "production" ? "error" : "off",
 9 |     "no-debugger": import.meta.env.MODE === "production" ? "error" : "off",
10 |   },
11 | };
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | dist/core/demo.html
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 
23 | # Vitest
24 | coverage/
25 | 


--------------------------------------------------------------------------------
/src/components/selectAll.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <a href="javascript:void(0)" @click="$emit('update-select-all')">
 3 |     {{ $t("selectAll") }}
 4 |   </a>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: "v-select-all",
10 |   display: "Select all",
11 |   emits: ["update-select-all"],
12 |   props: {
13 |     items: Array,
14 |   },
15 | };
16 | </script>
17 | 


--------------------------------------------------------------------------------
/src/components/deselectAll.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <a href="javascript:void(0)" @click="$emit('update-deselect-all')">
 3 |     {{ $t("deselectAll") }}
 4 |   </a>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: "v-deselect-all",
10 |   display: "Deselect all",
11 |   emits: ["update-deselect-all"],
12 |   props: {
13 |     click: Function,
14 |     items: Array,
15 |   },
16 | };
17 | </script>
18 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>vueSelectSides demo</title>
 6 |     <link rel="stylesheet" href="./vueSelectSidesExample.css" />
 7 |   </head>
 8 | 
 9 |   <body>
10 |     <div id="app"></div>
11 | 
12 |     <script src="https://unpkg.com/vue"></script>
13 |     <script src="./vueSelectSidesExample.umd.js"></script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import vueSelectSides from "./vue-select-sides.vue";
 2 | import i18n from "./i18n";
 3 | 
 4 | const install = (app, options) => {
 5 |   app.config.globalProperties.defaultOptions =
 6 |     options && options.constructor.name === "Object" ? options : {};
 7 | 
 8 |   app.use(i18n);
 9 |   app.component("vueSelectSides", vueSelectSides);
10 | };
11 | 
12 | vueSelectSides.install = install;
13 | 
14 | export default vueSelectSides;
15 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | # The JSON files contain newlines inconsistently
13 | [*.json]
14 | insert_final_newline = ignore
15 | 
16 | # Minified JavaScript files shouldn't be changed
17 | [**.min.js]
18 | indent_style = ignore
19 | insert_final_newline = ignore
20 | 
21 | [*.md]
22 | trim_trailing_whitespace = false
23 | 


--------------------------------------------------------------------------------
/styles/_variables.scss:
--------------------------------------------------------------------------------
 1 | $font-size-base: 0.9rem !default;
 2 | $border-radius-base: 0.25rem !default;
 3 | 
 4 | $selected-color: #f57f1e !default;
 5 | 
 6 | $white: #fff !default;
 7 | $gray: #e1e1e1 !default;
 8 | $dark: #242934 !default;
 9 | 
10 | $default-item-background: #fafafa !default;
11 | $default-item-color-selected: $white !default;
12 | $default-item-background-selected: $selected-color !default;
13 | 
14 | $default-text-color: $dark !default;
15 | 
16 | $default-footer-text-color: $white !default;
17 | $default-footer-background: $dark !default;
18 | 
19 | $badge-background: rgba($dark, 0.15) !default;
20 | 


--------------------------------------------------------------------------------
/vite.serve.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "vite";
 2 | import vue from "@vitejs/plugin-vue";
 3 | import path from "path";
 4 | 
 5 | export default defineConfig({
 6 |   plugins: [vue()],
 7 |   build: {
 8 |     lib: {
 9 |       entry: path.resolve(__dirname, "example/main.js"),
10 |       name: "vueSelectSides",
11 |       fileName: (format) => `vueSelectSides.${format}.js`,
12 |       formats: ["umd"],
13 |     },
14 |     rollupOptions: {
15 |       external: ["vue"],
16 |       output: {
17 |         globals: {
18 |           vue: "Vue",
19 |         },
20 |       },
21 |     },
22 |   },
23 |   server: {
24 |     sourcemap: true,
25 |     open: "/docs/index.html", // Abre o navegador automaticamente
26 |   },
27 | });
28 | 


--------------------------------------------------------------------------------
/styles/themes/dark.scss:
--------------------------------------------------------------------------------
 1 | // dark.scss - Tema escuro
 2 | @use "sass:color";
 3 | 
 4 | // Define as cores base diretamente (valores hardcoded do _variables.scss)
 5 | $selected-color: #242934;
 6 | $default-item-background-selected: $selected-color;
 7 | $badge-background: color.adjust($selected-color, $lightness: 15%);
 8 | 
 9 | // Configura as variáveis ANTES de importar o global
10 | // Passa as configurações direto pro _variables.scss
11 | @forward "../_variables.scss" with (
12 |   $selected-color: $selected-color,
13 |   $default-item-background-selected: $default-item-background-selected,
14 |   $badge-background: $badge-background
15 | );
16 | 
17 | // Importa o global normalmente
18 | @forward "../global.scss";
19 | @use "../global.scss" as *;
20 | 


--------------------------------------------------------------------------------
/src/components/search.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <input type="text" v-model="inputVal" :placeholder="thePlaceholder" />
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: "v-search",
 8 |   display: "Search",
 9 |   props: ["modelValue", "placeholder"],
10 |   emits: ["update:modelValue"],
11 |   beforeMount() {
12 |     if (this.placeholder) {
13 |       this.thePlaceholder = this.placeholder;
14 |     } else {
15 |       this.thePlaceholder = this.$t("searchPlaceholder");
16 |     }
17 |   },
18 |   watch: {
19 |     inputVal(val) {
20 |       this.$emit("update:modelValue", val);
21 |     },
22 |   },
23 |   data() {
24 |     return {
25 |       inputVal: this.value,
26 |       thePlaceholder: "",
27 |     };
28 |   },
29 | };
30 | </script>
31 | 


--------------------------------------------------------------------------------
/src/i18n.js:
--------------------------------------------------------------------------------
 1 | import { createI18n } from "vue-i18n";
 2 | 
 3 | function loadLocaleMessages() {
 4 |   const locales = import.meta.glob("./locales/*.json", {
 5 |     eager: true,
 6 |     import: "default",
 7 |   });
 8 |   const messages = {};
 9 | 
10 |   for (const path in locales) {
11 |     const matched = path.match(/([A-Za-z0-9-_]+)(?=\.)/i)[0];
12 | 
13 |     if (matched && matched.length > 1) {
14 |       const locale = matched;
15 |       messages[locale] = locales[path];
16 |     }
17 |   }
18 |   return messages;
19 | }
20 | 
21 | const i18n = createI18n({
22 |   locale: import.meta.env.VUE_APP_I18N_LOCALE || "en_US",
23 |   fallbackLocale: import.meta.env.VUE_APP_I18N_FALLBACK_LOCALE || "en_US",
24 |   messages: loadLocaleMessages(),
25 | });
26 | 
27 | export default i18n;
28 | 


--------------------------------------------------------------------------------
/vite.npm.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "vite";
 2 | import vue from "@vitejs/plugin-vue";
 3 | import path from 'path';
 4 | 
 5 | // https://vitejs.dev/config/
 6 | export default defineConfig({
 7 |   plugins: [vue()],
 8 |   resolve: {
 9 |     alias: {
10 |       "@": path.resolve(__dirname, "./src"),
11 |     },
12 |   },
13 |   build: {
14 |     lib: {
15 |       entry: path.resolve(__dirname, "src/index.js"),
16 |       name: "vueSelectSides",
17 |       fileName: (format) => `vue-select-sides.${format}.js`,
18 |     },
19 |     rollupOptions: {
20 |       // Certifique-se de externalizar dependências que não devem ser incluídas no bundle
21 |       external: ["vue"],
22 |       output: {
23 |         // Forneça variáveis globais para usar no build UMD
24 |         globals: {
25 |           vue: "Vue",
26 |         },
27 |       },
28 |     },
29 |   }
30 | });
31 | 


--------------------------------------------------------------------------------
/example/components/mirror-with-selecteds.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="ex-lib">
 3 |     <vue-select-sides
 4 |       type="mirror"
 5 |       v-model="selected"
 6 |       :list="list"
 7 |     ></vue-select-sides>
 8 |     <div class="ex-result">
 9 |       <h4>Result</h4>
10 |       <pre>{{ selected }}</pre>
11 |     </div>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   data() {
18 |     return {
19 |       selected: ["sudeste", "centro-oeste"],
20 |       list: [
21 |         {
22 |           value: "sul",
23 |           label: "Sul",
24 |         },
25 |         {
26 |           value: "sudeste",
27 |           label: "Sudeste",
28 |         },
29 |         {
30 |           value: "norte",
31 |           label: "Norte",
32 |         },
33 |         {
34 |           value: "centro-oeste",
35 |           label: "Centro Oeste",
36 |         },
37 |         {
38 |           value: "nordeste",
39 |           label: "Nordeste",
40 |         },
41 |       ],
42 |     };
43 |   },
44 | };
45 | </script>
46 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
 1 | import sortBy from "./sort-by";
 2 | 
 3 | const clone = (json) => JSON.parse(JSON.stringify(json));
 4 | 
 5 | const normalizeText = (text) => {
 6 |   return text
 7 |     .normalize("NFD")
 8 |     .replace(/[\u0300-\u036f]/g, "")
 9 |     .toLowerCase();
10 | };
11 | 
12 | const reorder = (vm, data) => {
13 |   let orderBy = [];
14 | 
15 |   if (vm.sortSelectedUp) {
16 |     orderBy.push("-selectedDefault");
17 |   }
18 | 
19 |   if (vm.orderBy) {
20 |     if (vm.orderBy.toLowerCase() === "asc") {
21 |       orderBy.push("label");
22 |     }
23 | 
24 |     if (vm.orderBy.toLowerCase() === "desc") {
25 |       orderBy.push("-label");
26 |     }
27 |   }
28 | 
29 |   data.sort(sortBy(...orderBy)).map((item) => {
30 |     if (item.children) item.children.sort(sortBy(...orderBy));
31 |     return item;
32 |   });
33 | 
34 |   return data;
35 | };
36 | 
37 | const removeItemArray = (array, value) => {
38 |   return array.filter((e) => String(e) !== String(value));
39 | };
40 | 
41 | export { normalizeText, clone, reorder, removeItemArray };
42 | 


--------------------------------------------------------------------------------
/example/components/mirror-with-disabled.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="ex-lib">
 3 |     <vue-select-sides
 4 |       type="mirror"
 5 |       v-model="selected"
 6 |       :list="list"
 7 |     ></vue-select-sides>
 8 |     <div class="ex-result">
 9 |       <h4>Result</h4>
10 |       <pre>{{ selected }}</pre>
11 |     </div>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   data() {
18 |     return {
19 |       selected: ["sudeste", "centro-oeste"],
20 |       list: [
21 |         {
22 |           value: "sul",
23 |           label: "Sul",
24 |         },
25 |         {
26 |           value: "sudeste",
27 |           label: "Sudeste",
28 |           disabled: true,
29 |         },
30 |         {
31 |           value: "norte",
32 |           label: "Norte",
33 |         },
34 |         {
35 |           value: "centro-oeste",
36 |           label: "Centro Oeste",
37 |         },
38 |         {
39 |           value: "nordeste",
40 |           label: "Nordeste",
41 |           disabled: true,
42 |         },
43 |       ],
44 |     };
45 |   },
46 | };
47 | </script>
48 | 


--------------------------------------------------------------------------------
/example/components/mirror-placeholder-search.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="ex-lib">
 3 |     <vue-select-sides
 4 |       type="mirror"
 5 |       v-model="selected"
 6 |       :list="list"
 7 |       placeholder-search-left="Yay! Search items..."
 8 |       placeholder-search-right="Yay! Search selected items..."
 9 |     ></vue-select-sides>
10 |     <div class="ex-result">
11 |       <h4>Result</h4>
12 |       <pre>{{ selected }}</pre>
13 |     </div>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 |   data() {
20 |     return {
21 |       selected: ["sul", "sudeste"],
22 |       list: [
23 |         {
24 |           value: "sul",
25 |           label: "Sul",
26 |         },
27 |         {
28 |           value: "sudeste",
29 |           label: "Sudeste",
30 |         },
31 |         {
32 |           value: "norte",
33 |           label: "Norte",
34 |         },
35 |         {
36 |           value: "centro-oeste",
37 |           label: "Centro Oeste",
38 |         },
39 |         {
40 |           value: "nordeste",
41 |           label: "Nordeste",
42 |         },
43 |       ],
44 |     };
45 |   },
46 | };
47 | </script>
48 | 


--------------------------------------------------------------------------------
/example/components/mirror-only-list.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="ex-lib">
 3 |     <vue-select-sides
 4 |       type="mirror"
 5 |       v-model="selected"
 6 |       :list="list"
 7 |       :search="search"
 8 |       :total="total"
 9 |       :toggle-all="toggleAll"
10 |     ></vue-select-sides>
11 |     <div class="ex-result">
12 |       <h4>Result</h4>
13 |       <pre>{{ selected }}</pre>
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | export default {
20 |   data() {
21 |     return {
22 |       search: false,
23 |       toggleAll: false,
24 |       total: false,
25 |       selected: [],
26 |       list: [
27 |         {
28 |           value: "sul",
29 |           label: "Sul",
30 |         },
31 |         {
32 |           value: "sudeste",
33 |           label: "Sudeste",
34 |         },
35 |         {
36 |           value: "norte",
37 |           label: "Norte",
38 |         },
39 |         {
40 |           value: "centro-oeste",
41 |           label: "Centro Oeste",
42 |         },
43 |         {
44 |           value: "nordeste",
45 |           label: "Nordeste",
46 |         },
47 |       ],
48 |     };
49 |   },
50 | };
51 | </script>
52 | 


--------------------------------------------------------------------------------
/styles/themes/light.scss:
--------------------------------------------------------------------------------
 1 | // light.scss - Tema claro
 2 | @use "sass:color";
 3 | 
 4 | $selected-color: #e1e1e1;
 5 | 
 6 | $default-text-color: #222;
 7 | $default-item-background: #fafafa;
 8 | $default-item-color-selected: color.adjust(
 9 |   $default-text-color,
10 |   $lightness: 30%
11 | );
12 | $default-item-background-selected: color.adjust(
13 |   $selected-color,
14 |   $lightness: 3%
15 | );
16 | 
17 | $default-footer-text-color: color.adjust($default-text-color, $lightness: 15%);
18 | $default-footer-background: color.adjust(
19 |   $default-item-background,
20 |   $lightness: -5%
21 | );
22 | 
23 | // Configura o _variables.scss com os valores calculados
24 | @forward "../_variables.scss" with (
25 |   $selected-color: $selected-color,
26 |   $default-text-color: $default-text-color,
27 |   $default-item-background: $default-item-background,
28 |   $default-item-color-selected: $default-item-color-selected,
29 |   $default-item-background-selected: $default-item-background-selected,
30 |   $default-footer-text-color: $default-footer-text-color,
31 |   $default-footer-background: $default-footer-background
32 | );
33 | 
34 | // Importa o global normalmente
35 | @forward "../global.scss";
36 | @use "../global.scss" as *;
37 | 


--------------------------------------------------------------------------------
/styles/_normalize.scss:
--------------------------------------------------------------------------------
 1 | .vss,
 2 | .vss ul,
 3 | .vss ul li {
 4 |   list-style-type: none;
 5 |   margin: 0px;
 6 | }
 7 | 
 8 | .vss ul ul {
 9 |   padding: 0px;
10 | }
11 | 
12 | .vss,
13 | .vss *,
14 | .vss *::before,
15 | .vss *::after {
16 |   box-sizing: border-box;
17 | }
18 | 
19 | .vss {
20 |   display: flex;
21 |   align-items: stretch;
22 |   align-content: stretch;
23 |   justify-content: space-between;
24 | 
25 |   a {
26 |     text-decoration: none;
27 |   }
28 | 
29 |   .vss-span,
30 |   .vss-list-ul li {
31 |     user-select: none;
32 |   }
33 | 
34 |   .vss-span {
35 |     width: 15%;
36 |     display: flex;
37 |     align-items: center;
38 |     justify-content: center;
39 |   }
40 | 
41 |   .vss-list {
42 |     width: 100%;
43 |     .vss-inner-list {
44 |       height: 100%;
45 |       display: flex;
46 |       flex-direction: column;
47 | 
48 |       .vss-list-search {
49 |         width: 100%;
50 |       }
51 | 
52 |       .vss-list-ul {
53 |         overflow-y: auto;
54 | 
55 |         li {
56 |           line-height: 1.5;
57 | 
58 |           .vss-list-badge {
59 |             display: flex;
60 |             align-items: center;
61 |             justify-content: center;
62 |           }
63 |         }
64 |       }
65 |     }
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/vite.example.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "vite";
 2 | import vue from "@vitejs/plugin-vue";
 3 | import path from "path";
 4 | 
 5 | export default defineConfig({
 6 |   plugins: [vue()],
 7 |   define: {
 8 |     "process.env.NODE_ENV": JSON.stringify("production"),
 9 |     "process.env.VUE_APP_I18N_LOCALE": JSON.stringify("en_US"),
10 |     "process.env.VUE_APP_I18N_FALLBACK_LOCALE": JSON.stringify("en_US"),
11 |   },
12 |   build: {
13 |     sourcemap: false,
14 |     lib: {
15 |       entry: path.resolve(__dirname, "example/main.js"),
16 |       name: "vueSelectSidesExample",
17 |       fileName: (format) => `vueSelectSidesExample.${format}.js`,
18 |       formats: ["umd"],
19 |     },
20 |     outDir: "docs",
21 |     emptyOutDir: false,
22 |     rollupOptions: {
23 |       external: ["vue"],
24 |       output: {
25 |         globals: {
26 |           vue: "Vue",
27 |         },
28 |         assetFileNames: (assetInfo) => {
29 |           if (
30 |             assetInfo.names?.includes("style.css") ||
31 |             assetInfo.names?.includes("vue-select-sides.css")
32 |           ) {
33 |             return "vueSelectSidesExample.css";
34 |           }
35 |           return assetInfo.name;
36 |         },
37 |       },
38 |     },
39 |   },
40 | });
41 | 


--------------------------------------------------------------------------------
/src/mixin.js:
--------------------------------------------------------------------------------
 1 | import { reorder } from "./utils";
 2 | 
 3 | export default {
 4 |   emits: ["update-selected"],
 5 |   watch: {
 6 |     modelValue(newItems, oldItems) {
 7 |       if (JSON.stringify(newItems) !== JSON.stringify(oldItems)) {
 8 |         this.dataSelected = newItems;
 9 |       }
10 |     },
11 |     dataSelected(newItems, oldItems) {
12 |       this.$emit("update-selected", newItems, oldItems);
13 |     },
14 |     orderBy() {
15 |       this.listLeft = reorder(this, this.dataList);
16 |       this.listRight = reorder(this, this.dataList);
17 |     },
18 |     list(newItems) {
19 |       if (JSON.stringify(newItems) !== JSON.stringify(this.dataListOriginal)) {
20 |         this.prepareList();
21 |         this.prepareListLeft();
22 |       }
23 |     },
24 |   },
25 |   props: {
26 |     placeholderSearchLeft: {
27 |       type: [String, Boolean],
28 |     },
29 |     placeholderSearchRight: {
30 |       type: [String, Boolean],
31 |     },
32 |     type: {
33 |       type: String,
34 |     },
35 |     search: {
36 |       type: Boolean,
37 |     },
38 |     total: {
39 |       type: Boolean,
40 |     },
41 |     toggleAll: {
42 |       type: Boolean,
43 |     },
44 |     orderBy: {
45 |       type: String,
46 |     },
47 |     sortSelectedUp: {
48 |       type: Boolean,
49 |     },
50 |   },
51 | };
52 | 


--------------------------------------------------------------------------------
/example/components/mirror-sort-list.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="ex-lib">
 3 |     <vue-select-sides
 4 |       type="mirror"
 5 |       :order-by="order"
 6 |       v-model="selected"
 7 |       :list="list"
 8 |     ></vue-select-sides>
 9 |     <div class="ex-result">
10 |       <h4>Result</h4>
11 |       <div class="ex-label-radio">
12 |         <label>
13 |           <input type="radio" id="asc" value="asc" v-model="order" />
14 |           ASC
15 |         </label>
16 |         <label>
17 |           <input type="radio" id="desc" value="desc" v-model="order" />
18 |           DESC
19 |         </label>
20 |       </div>
21 |       <pre><b>Order</b>: {{ order }}.<br><br>{{ selected }}</pre>
22 |     </div>
23 |   </div>
24 | </template>
25 | 
26 | <script>
27 | export default {
28 |   data() {
29 |     return {
30 |       order: "asc",
31 |       selected: [],
32 |       list: [
33 |         {
34 |           value: "norte",
35 |           label: "Norte",
36 |         },
37 |         {
38 |           value: "sul",
39 |           label: "Sul",
40 |         },
41 |         {
42 |           value: "centro-oeste",
43 |           label: "Centro Oeste",
44 |         },
45 |         {
46 |           value: "sudeste",
47 |           label: "Sudeste",
48 |         },
49 |         {
50 |           value: "nordeste",
51 |           label: "Nordeste",
52 |         },
53 |       ],
54 |     };
55 |   },
56 | };
57 | </script>
58 | 
59 | <style lang="scss" scoped>
60 | .ex-label-radio {
61 |   padding: 10px 0px 2px;
62 |   display: flex;
63 |   align-items: center;
64 | 
65 |   label {
66 |     display: flex;
67 |     align-items: center;
68 |     font-size: 14px;
69 |     margin-right: 15px;
70 | 
71 |     input {
72 |       padding: 0px;
73 |       margin: 0px 5px 0px 0px;
74 |     }
75 |   }
76 | }
77 | 
78 | pre {
79 |   height: 322px !important;
80 | }
81 | </style>
82 | 


--------------------------------------------------------------------------------
/src/sort-by.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Função que replica o comportamento do sort-by
 3 |  * Suporta múltiplos critérios de ordenação e ordem reversa com "-"
 4 |  * Suporta função de mapeamento opcional (último parâmetro)
 5 |  */
 6 | const sortBy = (...args) => {
 7 |   // Separa propriedades (strings) da função de mapeamento (function)
 8 |   const properties = args.filter((arg) => typeof arg === "string");
 9 |   const mapFn = args.find((arg) => typeof arg === "function");
10 | 
11 |   return (a, b) => {
12 |     for (let property of properties) {
13 |       let sortOrder = 1;
14 | 
15 |       // Se começar com "-", ordena decrescente
16 |       if (property[0] === "-") {
17 |         sortOrder = -1;
18 |         property = property.substring(1);
19 |       }
20 | 
21 |       // Pega o valor da propriedade (suporta nested objects)
22 |       let valueA = getNestedValue(a, property);
23 |       let valueB = getNestedValue(b, property);
24 | 
25 |       // Aplica a função de mapeamento se existir
26 |       if (mapFn) {
27 |         valueA = mapFn(property, valueA);
28 |         valueB = mapFn(property, valueB);
29 |       }
30 | 
31 |       // Trata undefined/null: undefined vai pro final, null é menor que tudo
32 |       const aIsUndefined = valueA === undefined;
33 |       const bIsUndefined = valueB === undefined;
34 | 
35 |       if (aIsUndefined && bIsUndefined) continue; // ambos undefined, próximo critério
36 |       if (aIsUndefined) return 1; // A vai pro final
37 |       if (bIsUndefined) return -1; // B vai pro final
38 | 
39 |       // Compara os valores
40 |       if (valueA < valueB) return -1 * sortOrder;
41 |       if (valueA > valueB) return 1 * sortOrder;
42 | 
43 |       // Se forem iguais, continua pro próximo critério
44 |     }
45 |     return 0;
46 |   };
47 | };
48 | 
49 | /**
50 |  * Pega valores de propriedades aninhadas (ex: "user.name")
51 |  */
52 | const getNestedValue = (obj, path) => {
53 |   return path.split(".").reduce((current, prop) => {
54 |     return current?.[prop];
55 |   }, obj);
56 | };
57 | 
58 | export default sortBy;
59 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-select-sides",
 3 |   "version": "2.0.4",
 4 |   "description": "select sides component for vue",
 5 |   "license": "MIT",
 6 |   "private": false,
 7 |   "repository": {
 8 |     "type": "git",
 9 |     "url": "https://github.com/soft4ti/vue-select-sides"
10 |   },
11 |   "main": "dist/vue-select-sides.umd.js",
12 |   "module": "dist/vue-select-sides.es.js",
13 |   "exports": {
14 |     ".": {
15 |       "import": "./dist/vue-select-sides.es.js",
16 |       "require": "./dist/vue-select-sides.umd.js"
17 |     },
18 |     "./dist/css/*": "./dist/css/*",
19 |     "./styles/themes/*": "./styles/themes/*"
20 |   },
21 |   "unpkg": "dist/vue-select-sides.umd.js",
22 |   "scripts": {
23 |     "serve": "vite --config vite.serve.config.js",
24 |     "build": "yarn build:example && yarn build:npm && yarn build:scss",
25 |     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
26 |     "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'",
27 |     "build:example": "vite build --config vite.example.config.js",
28 |     "build:npm": "vite build --config vite.npm.config.js",
29 |     "build:scss": "sass styles/themes:dist/css --style=compressed --no-source-map",
30 |     "test": "vitest",
31 |     "test:coverage": "vitest run --coverage"
32 |   },
33 |   "files": [
34 |     "dist",
35 |     "styles"
36 |   ],
37 |   "keywords": [
38 |     "vue",
39 |     "vuejs",
40 |     "component",
41 |     "select list",
42 |     "multiselect",
43 |     "multipleselect",
44 |     "multiple",
45 |     "select",
46 |     "select 2 sides",
47 |     "multiselect 2 sides"
48 |   ],
49 |   "devDependencies": {
50 |     "@vitejs/plugin-vue": "^6.0.2",
51 |     "@vitest/coverage-v8": "4.0.14",
52 |     "@vue/compiler-sfc": "^3.5.25",
53 |     "babel-eslint": "^10.1.0",
54 |     "eslint": "^8.57.1",
55 |     "eslint-plugin-vue": "^8.7.1",
56 |     "sass-embedded": "^1.93.3",
57 |     "vite": "^7.2.4",
58 |     "vitest": "^4.0.14",
59 |     "vue": "^3.5.25",
60 |     "vue-i18n": "^9.14.5"
61 |   },
62 |   "eslintConfig": {
63 |     "root": true,
64 |     "env": {
65 |       "node": true
66 |     },
67 |     "extends": [
68 |       "plugin:vue/essential",
69 |       "eslint:recommended"
70 |     ],
71 |     "rules": {},
72 |     "parserOptions": {
73 |       "parser": "babel-eslint"
74 |     }
75 |   },
76 |   "browserslist": [
77 |     "> 1%",
78 |     "last 2 versions"
79 |   ],
80 |   "dependencies": {}
81 | }


--------------------------------------------------------------------------------
/dist/css/soft.css:
--------------------------------------------------------------------------------
1 | .vss,.vss ul,.vss ul li{list-style-type:none;margin:0px}.vss ul ul{padding:0px}.vss,.vss *,.vss *::before,.vss *::after{box-sizing:border-box}.vss{display:flex;align-items:stretch;align-content:stretch;justify-content:space-between}.vss a{text-decoration:none}.vss .vss-span,.vss .vss-list-ul li{user-select:none}.vss .vss-span{width:15%;display:flex;align-items:center;justify-content:center}.vss .vss-list{width:100%}.vss .vss-list .vss-inner-list{height:100%;display:flex;flex-direction:column}.vss .vss-list .vss-inner-list .vss-list-search{width:100%}.vss .vss-list .vss-inner-list .vss-list-ul{overflow-y:auto}.vss .vss-list .vss-inner-list .vss-list-ul li{line-height:1.5}.vss .vss-list .vss-inner-list .vss-list-ul li .vss-list-badge{display:flex;align-items:center;justify-content:center}.vss *{font-size:.9rem}.vss .vss-span{font-size:1.3rem;color:#e1e1e1}.vss .vss-list .vss-inner-list{box-shadow:0px 0px 10px #e1e1e1;border-radius:.25rem}.vss .vss-list .vss-inner-list .vss-list-search{border:none;padding:12px 14px;border-bottom:2px solid hsl(0,0%,95.2352941176%);border-top-left-radius:.25rem;border-top-right-radius:.25rem;outline:none}.vss .vss-list .vss-inner-list .vss-list-search:focus{border-color:#f57f1e}.vss .vss-list .vss-inner-list .vss-list-ul{padding:8px 10px 10px 10px}.vss .vss-list .vss-inner-list .vss-list-ul li span{display:flex;align-items:center;justify-content:space-between;border-radius:.25rem;color:#242934;padding:5px 12px;margin-top:2px}.vss .vss-list .vss-inner-list .vss-list-ul li span .vss-list-badge{font-size:.5rem;color:#fff;background-color:rgba(36,41,52,.15);padding:2px 4px 0px 4px;border-radius:20px;min-width:14px;height:14px;font-weight:bold}.vss .vss-list .vss-inner-list .vss-list-ul li.active:not(.is-parent)>span{background-color:#f57f1e;color:#fff;border-color:rgba(0,0,0,0)}.vss .vss-list .vss-inner-list .vss-list-ul li.is-disabled:not(.is-parent)>span{background-color:hsl(0,0%,83.2352941176%);color:#fff;color:#242934;cursor:default;border-color:rgba(0,0,0,0)}.vss .vss-list .vss-inner-list .vss-list-ul li.is-disabled.active:not(.is-parent)>span{background-color:hsl(27.0697674419,91.4893617021%,73.9215686275%);color:#fff}.vss .vss-list .vss-inner-list .vss-list-ul li:not(.is-parent)>span{cursor:pointer;background-color:#fafafa;border:1px solid rgb(244.9,244.9,244.9)}.vss .vss-list .vss-inner-list .vss-list-ul li.no-results>span,.vss .vss-list .vss-inner-list .vss-list-ul li.no-selection>span{cursor:default;background-color:#fafafa;border-color:rgba(0,0,0,0)}.vss .vss-list .vss-inner-list .vss-list-ul>li.is-parent>span{font-weight:bold;padding-left:0px}.vss .vss-list .vss-inner-list .vss-footer{align-items:flex-end;display:flex;flex:1 0 auto}.vss .vss-list .vss-inner-list .vss-footer .vss-footer-bg{display:flex;justify-content:space-between;align-items:center;padding:0px 12px;height:2rem;width:100%;background-color:#242934;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.vss .vss-list .vss-inner-list .vss-footer .vss-footer-bg *{color:#fff;font-size:.7rem}.vss .vss-list .vss-inner-list .vss-footer .vss-footer-bg>div{display:flex}.vss .vss-list .vss-inner-list .vss-footer .vss-footer-bg>div .vss-footer-separator{margin:0px 6px}.vss .vss-list .vss-inner-list .vss-footer .vss-footer-bg>span{font-size:.6rem;font-weight:bold;color:#fff;background-color:hsl(221.25,18.1818181818%,32.2549019608%);padding:1px 6px 0px 6px;border-radius:20px;min-width:14px;height:14px}.vss .vss-list .vss-total{font-size:.7rem}
2 | 


--------------------------------------------------------------------------------
/dist/css/dark.css:
--------------------------------------------------------------------------------
1 | .vss,.vss ul,.vss ul li{list-style-type:none;margin:0px}.vss ul ul{padding:0px}.vss,.vss *,.vss *::before,.vss *::after{box-sizing:border-box}.vss{display:flex;align-items:stretch;align-content:stretch;justify-content:space-between}.vss a{text-decoration:none}.vss .vss-span,.vss .vss-list-ul li{user-select:none}.vss .vss-span{width:15%;display:flex;align-items:center;justify-content:center}.vss .vss-list{width:100%}.vss .vss-list .vss-inner-list{height:100%;display:flex;flex-direction:column}.vss .vss-list .vss-inner-list .vss-list-search{width:100%}.vss .vss-list .vss-inner-list .vss-list-ul{overflow-y:auto}.vss .vss-list .vss-inner-list .vss-list-ul li{line-height:1.5}.vss .vss-list .vss-inner-list .vss-list-ul li .vss-list-badge{display:flex;align-items:center;justify-content:center}.vss *{font-size:.9rem}.vss .vss-span{font-size:1.3rem;color:#e1e1e1}.vss .vss-list .vss-inner-list{box-shadow:0px 0px 10px #e1e1e1;border-radius:.25rem}.vss .vss-list .vss-inner-list .vss-list-search{border:none;padding:12px 14px;border-bottom:2px solid hsl(0,0%,95.2352941176%);border-top-left-radius:.25rem;border-top-right-radius:.25rem;outline:none}.vss .vss-list .vss-inner-list .vss-list-search:focus{border-color:#242934}.vss .vss-list .vss-inner-list .vss-list-ul{padding:8px 10px 10px 10px}.vss .vss-list .vss-inner-list .vss-list-ul li span{display:flex;align-items:center;justify-content:space-between;border-radius:.25rem;color:#242934;padding:5px 12px;margin-top:2px}.vss .vss-list .vss-inner-list .vss-list-ul li span .vss-list-badge{font-size:.5rem;color:#fff;background-color:hsl(221.25,18.1818181818%,32.2549019608%);padding:2px 4px 0px 4px;border-radius:20px;min-width:14px;height:14px;font-weight:bold}.vss .vss-list .vss-inner-list .vss-list-ul li.active:not(.is-parent)>span{background-color:#242934;color:#fff;border-color:rgba(0,0,0,0)}.vss .vss-list .vss-inner-list .vss-list-ul li.is-disabled:not(.is-parent)>span{background-color:hsl(0,0%,83.2352941176%);color:#fff;color:#242934;cursor:default;border-color:rgba(0,0,0,0)}.vss .vss-list .vss-inner-list .vss-list-ul li.is-disabled.active:not(.is-parent)>span{background-color:hsl(221.25,18.1818181818%,37.2549019608%);color:#fff}.vss .vss-list .vss-inner-list .vss-list-ul li:not(.is-parent)>span{cursor:pointer;background-color:#fafafa;border:1px solid rgb(244.9,244.9,244.9)}.vss .vss-list .vss-inner-list .vss-list-ul li.no-results>span,.vss .vss-list .vss-inner-list .vss-list-ul li.no-selection>span{cursor:default;background-color:#fafafa;border-color:rgba(0,0,0,0)}.vss .vss-list .vss-inner-list .vss-list-ul>li.is-parent>span{font-weight:bold;padding-left:0px}.vss .vss-list .vss-inner-list .vss-footer{align-items:flex-end;display:flex;flex:1 0 auto}.vss .vss-list .vss-inner-list .vss-footer .vss-footer-bg{display:flex;justify-content:space-between;align-items:center;padding:0px 12px;height:2rem;width:100%;background-color:#242934;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.vss .vss-list .vss-inner-list .vss-footer .vss-footer-bg *{color:#fff;font-size:.7rem}.vss .vss-list .vss-inner-list .vss-footer .vss-footer-bg>div{display:flex}.vss .vss-list .vss-inner-list .vss-footer .vss-footer-bg>div .vss-footer-separator{margin:0px 6px}.vss .vss-list .vss-inner-list .vss-footer .vss-footer-bg>span{font-size:.6rem;font-weight:bold;color:#fff;background-color:hsl(221.25,18.1818181818%,32.2549019608%);padding:1px 6px 0px 6px;border-radius:20px;min-width:14px;height:14px}.vss .vss-list .vss-total{font-size:.7rem}
2 | 


--------------------------------------------------------------------------------
/dist/css/light.css:
--------------------------------------------------------------------------------
1 | .vss,.vss ul,.vss ul li{list-style-type:none;margin:0px}.vss ul ul{padding:0px}.vss,.vss *,.vss *::before,.vss *::after{box-sizing:border-box}.vss{display:flex;align-items:stretch;align-content:stretch;justify-content:space-between}.vss a{text-decoration:none}.vss .vss-span,.vss .vss-list-ul li{user-select:none}.vss .vss-span{width:15%;display:flex;align-items:center;justify-content:center}.vss .vss-list{width:100%}.vss .vss-list .vss-inner-list{height:100%;display:flex;flex-direction:column}.vss .vss-list .vss-inner-list .vss-list-search{width:100%}.vss .vss-list .vss-inner-list .vss-list-ul{overflow-y:auto}.vss .vss-list .vss-inner-list .vss-list-ul li{line-height:1.5}.vss .vss-list .vss-inner-list .vss-list-ul li .vss-list-badge{display:flex;align-items:center;justify-content:center}.vss *{font-size:.9rem}.vss .vss-span{font-size:1.3rem;color:#e1e1e1}.vss .vss-list .vss-inner-list{box-shadow:0px 0px 10px #e1e1e1;border-radius:.25rem}.vss .vss-list .vss-inner-list .vss-list-search{border:none;padding:12px 14px;border-bottom:2px solid hsl(0,0%,95.2352941176%);border-top-left-radius:.25rem;border-top-right-radius:.25rem;outline:none}.vss .vss-list .vss-inner-list .vss-list-search:focus{border-color:#e1e1e1}.vss .vss-list .vss-inner-list .vss-list-ul{padding:8px 10px 10px 10px}.vss .vss-list .vss-inner-list .vss-list-ul li span{display:flex;align-items:center;justify-content:space-between;border-radius:.25rem;color:#222;padding:5px 12px;margin-top:2px}.vss .vss-list .vss-inner-list .vss-list-ul li span .vss-list-badge{font-size:.5rem;color:#fff;background-color:rgba(36,41,52,.15);padding:2px 4px 0px 4px;border-radius:20px;min-width:14px;height:14px;font-weight:bold}.vss .vss-list .vss-inner-list .vss-list-ul li.active:not(.is-parent)>span{background-color:hsl(0,0%,91.2352941176%);color:rgb(110.5,110.5,110.5);border-color:rgba(0,0,0,0)}.vss .vss-list .vss-inner-list .vss-list-ul li.is-disabled:not(.is-parent)>span{background-color:hsl(0,0%,83.2352941176%);color:rgb(110.5,110.5,110.5);color:#222;cursor:default;border-color:rgba(0,0,0,0)}.vss .vss-list .vss-inner-list .vss-list-ul li.is-disabled.active:not(.is-parent)>span{background-color:hsl(0,0%,111.2352941176%);color:rgb(110.5,110.5,110.5)}.vss .vss-list .vss-inner-list .vss-list-ul li:not(.is-parent)>span{cursor:pointer;background-color:#fafafa;border:1px solid rgb(244.9,244.9,244.9)}.vss .vss-list .vss-inner-list .vss-list-ul li.no-results>span,.vss .vss-list .vss-inner-list .vss-list-ul li.no-selection>span{cursor:default;background-color:#fafafa;border-color:rgba(0,0,0,0)}.vss .vss-list .vss-inner-list .vss-list-ul>li.is-parent>span{font-weight:bold;padding-left:0px}.vss .vss-list .vss-inner-list .vss-footer{align-items:flex-end;display:flex;flex:1 0 auto}.vss .vss-list .vss-inner-list .vss-footer .vss-footer-bg{display:flex;justify-content:space-between;align-items:center;padding:0px 12px;height:2rem;width:100%;background-color:hsl(0,0%,93.0392156863%);border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.vss .vss-list .vss-inner-list .vss-footer .vss-footer-bg *{color:rgb(72.25,72.25,72.25);font-size:.7rem}.vss .vss-list .vss-inner-list .vss-footer .vss-footer-bg>div{display:flex}.vss .vss-list .vss-inner-list .vss-footer .vss-footer-bg>div .vss-footer-separator{margin:0px 6px}.vss .vss-list .vss-inner-list .vss-footer .vss-footer-bg>span{font-size:.6rem;font-weight:bold;color:rgb(72.25,72.25,72.25);background-color:hsl(0,0%,108.0392156863%);padding:1px 6px 0px 6px;border-radius:20px;min-width:14px;height:14px}.vss .vss-list .vss-total{font-size:.7rem}
2 | 


--------------------------------------------------------------------------------
/src/components/list.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <ul class="vss-list-ul">
  3 |     <li
  4 |       v-for="(item, index) in items"
  5 |       :key="index"
  6 |       v-show="showParent(item)"
  7 |       @click="!hasChildren ? toggleItem(item, {}, item.selected) : false"
  8 |       :class="liClass(item, hasChildren)"
  9 |     >
 10 |       <span style="">
 11 |         {{ item.label }}
 12 |         <small v-if="showCounter(item)" class="vss-list-badge">
 13 |           {{ item.totalChildrenSelected }}
 14 |         </small>
 15 |       </span>
 16 | 
 17 |       <ul v-if="hasChildren">
 18 |         <li
 19 |           v-for="(children, indexChild) in item.children"
 20 |           :key="`${index}-${indexChild}`"
 21 |           @click="toggleItem(children, item, children.selected)"
 22 |           v-show="children.visible"
 23 |           :class="liClass(children, false)"
 24 |         >
 25 |           <span>
 26 |             {{ children.label }}
 27 |           </span>
 28 |         </li>
 29 |         <v-no-results v-show="totalItems(item.children) === 0"></v-no-results>
 30 |       </ul>
 31 |     </li>
 32 |     <v-no-selection v-show="showNoSelection(items)"></v-no-selection>
 33 | 
 34 |     <v-no-results v-show="showNoResultParent(items)"></v-no-results>
 35 |   </ul>
 36 | </template>
 37 | 
 38 | <script>
 39 | import vNoResults from "./noResults.vue";
 40 | import vNoSelection from "./noSelection.vue";
 41 | 
 42 | export default {
 43 |   name: "v-list",
 44 |   display: "List",
 45 |   mounted() {},
 46 |   components: {
 47 |     "v-no-results": vNoResults,
 48 |     "v-no-selection": vNoSelection,
 49 |   },
 50 |   props: {
 51 |     hasChildren: {
 52 |       type: Boolean,
 53 |     },
 54 |     items: {
 55 |       type: Array,
 56 |     },
 57 |     enableCounter: {
 58 |       type: Boolean,
 59 |       default: true,
 60 |     },
 61 |     type: {
 62 |       type: String,
 63 |     },
 64 |     side: {
 65 |       type: String,
 66 |     },
 67 |   },
 68 |   emits: ["updated-item"],
 69 |   methods: {
 70 |     showNoResultParent(items) {
 71 |       if (this.type === "grouped") {
 72 |         return this.totalItems(items) === 0 && !this.hasChildren;
 73 |       } else {
 74 |         if (this.side === "left") {
 75 |           return (
 76 |             items.length === 0 ||
 77 |             this.totalParentSelected(items) === items.length ||
 78 |             (items.length > 0 && this.totalItems(items) === 0)
 79 |           );
 80 |         }
 81 |         if (this.side === "right") {
 82 |           return (
 83 |             items.length === 0 ||
 84 |             (this.totalParentSelected(items) !== 0 &&
 85 |               items.length > 0 &&
 86 |               this.totalItems(items) === 0)
 87 |           );
 88 |         }
 89 |       }
 90 |     },
 91 |     showNoSelection(items) {
 92 |       if (this.type === "grouped") {
 93 |         return (
 94 |           (this.totalParentSelected(items) === 0 && this.hasChildren) ||
 95 |           items.length === 0
 96 |         );
 97 |       } else {
 98 |         if (this.side === "left") {
 99 |           return false;
100 |         }
101 |         if (this.side === "right") {
102 |           return items.length !== 0 && this.totalParentSelected(items) === 0;
103 |         }
104 |       }
105 |     },
106 |     showCounter(item) {
107 |       if (!this.enableCounter) return false;
108 | 
109 |       return !this.hasChildren && item.totalChildrenSelected !== 0;
110 |     },
111 |     showParent(item) {
112 |       return this.hasChildren ? item.selected : item.visible;
113 |     },
114 |     liClass(item, hasChildren) {
115 |       let output = [];
116 | 
117 |       if (hasChildren) {
118 |         output.push("is-parent");
119 |       }
120 | 
121 |       if (item.selected) {
122 |         output.push("active");
123 |       }
124 | 
125 |       if (item.disabled) {
126 |         output.push("is-disabled");
127 |       }
128 | 
129 |       return output;
130 |     },
131 |     totalItems(o) {
132 |       return o.filter(function (a) {
133 |         return a.visible === true;
134 |       }).length;
135 |     },
136 |     totalParentSelected(o) {
137 |       return o.filter(function (a) {
138 |         return a.selected === true;
139 |       }).length;
140 |     },
141 |     toggleItem(item, parent, isSelected) {
142 |       if (item.disabled == true) {
143 |         return false;
144 |       }
145 | 
146 |       this.$emit("updated-item", item, parent, !isSelected);
147 |     },
148 |   },
149 |   data() {
150 |     return {};
151 |   },
152 | };
153 | </script>
154 | 


--------------------------------------------------------------------------------
/example/components/grouped-basic.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="ex-lib">
  3 |     <vue-select-sides
  4 |       type="grouped"
  5 |       v-model="selected"
  6 |       :list="list"
  7 |     ></vue-select-sides>
  8 |     <div class="ex-result">
  9 |       <h4>Result</h4>
 10 |       <pre>{{ selected }}</pre>
 11 |     </div>
 12 |   </div>
 13 | </template>
 14 | 
 15 | <script>
 16 | export default {
 17 |   data() {
 18 |     return {
 19 |       selected: {},
 20 |       list: [
 21 |         {
 22 |           value: "sul",
 23 |           label: "Sul",
 24 |           children: [
 25 |             {
 26 |               value: "santa-catarina",
 27 |               label: "Santa Catarina",
 28 |             },
 29 |             {
 30 |               value: "rio-grande-do-sul",
 31 |               label: "Rio Grande do Sul",
 32 |             },
 33 |             {
 34 |               value: "parana",
 35 |               label: "Paraná",
 36 |             },
 37 |           ],
 38 |         },
 39 |         {
 40 |           value: "sudeste",
 41 |           label: "Sudeste",
 42 |           children: [
 43 |             {
 44 |               value: "minas-gerais",
 45 |               label: "Minas Gerais",
 46 |             },
 47 |             {
 48 |               value: "sao-paulo",
 49 |               label: "São Paulo",
 50 |             },
 51 |             {
 52 |               value: "espirito-santo",
 53 |               label: "Espírito Santo",
 54 |             },
 55 |             {
 56 |               value: "rio-de-janeiro",
 57 |               label: "Rio de Janeiro",
 58 |             },
 59 |           ],
 60 |         },
 61 |         {
 62 |           value: "norte",
 63 |           label: "Norte",
 64 |           children: [
 65 |             {
 66 |               value: "acre",
 67 |               label: "Acre",
 68 |             },
 69 |             {
 70 |               value: "amapa",
 71 |               label: "Amapá",
 72 |             },
 73 |             {
 74 |               value: "roraima",
 75 |               label: "Roraima",
 76 |             },
 77 |             {
 78 |               value: "tocantins",
 79 |               label: "Tocantins",
 80 |             },
 81 |             {
 82 |               value: "para",
 83 |               label: "Pará",
 84 |             },
 85 |             {
 86 |               value: "rondonia",
 87 |               label: "Rondônia",
 88 |             },
 89 |             {
 90 |               value: "amazonas",
 91 |               label: "Amazonas",
 92 |             },
 93 |           ],
 94 |         },
 95 |         {
 96 |           value: "centro-oeste",
 97 |           label: "Centro Oeste",
 98 |           children: [
 99 |             {
100 |               value: "mato-grosso",
101 |               label: "Mato Grosso",
102 |             },
103 |             {
104 |               value: "mato-grosso-do-sul",
105 |               label: "Mato Grosso do Sul",
106 |             },
107 |             {
108 |               value: "goias",
109 |               label: "Goiás",
110 |             },
111 |             {
112 |               value: "distrito-federal",
113 |               label: "Distrito Federal",
114 |             },
115 |           ],
116 |         },
117 |         {
118 |           value: "nordeste",
119 |           label: "Nordeste",
120 |           children: [
121 |             {
122 |               value: "bahia",
123 |               label: "Bahia",
124 |             },
125 |             {
126 |               value: "sergipe",
127 |               label: "Sergipe",
128 |             },
129 |             {
130 |               value: "alagoas",
131 |               label: "Alagoas",
132 |             },
133 |             {
134 |               value: "paraiba",
135 |               label: "Paraíba",
136 |             },
137 |             {
138 |               value: "pernambuco",
139 |               label: "Pernambuco",
140 |             },
141 |             {
142 |               value: "rio-grande-do-norte",
143 |               label: "Rio Grande do Norte",
144 |             },
145 |             {
146 |               value: "ceara",
147 |               label: "Ceará",
148 |             },
149 |             {
150 |               value: "piaui",
151 |               label: "Piauí",
152 |             },
153 |             {
154 |               value: "maranhao",
155 |               label: "Maranhão",
156 |             },
157 |             {
158 |               value: "mato-grosso",
159 |               label: "Mato Grosso",
160 |             },
161 |             {
162 |               value: "mato-grosso-do-sul",
163 |               label: "Mato Grosso do Sul",
164 |             },
165 |             {
166 |               value: "goias",
167 |               label: "Goiás",
168 |             },
169 |             {
170 |               value: "distrito-federal",
171 |               label: "Distrito Federal",
172 |             },
173 |           ],
174 |         },
175 |       ],
176 |     };
177 |   },
178 | };
179 | </script>
180 | 


--------------------------------------------------------------------------------
/example/components/grouped-with-selecteds.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="ex-lib">
  3 |     <vue-select-sides
  4 |       type="grouped"
  5 |       v-model="selected"
  6 |       :list="list"
  7 |     ></vue-select-sides>
  8 |     <div class="ex-result">
  9 |       <h4>Result</h4>
 10 |       <pre>{{ selected }}</pre>
 11 |     </div>
 12 |   </div>
 13 | </template>
 14 | 
 15 | <script>
 16 | export default {
 17 |   data() {
 18 |     return {
 19 |       selected: {
 20 |         sudeste: ["minas-gerais"],
 21 |         norte: ["acre", "roraima"],
 22 |       },
 23 |       list: [
 24 |         {
 25 |           value: "sul",
 26 |           label: "Sul",
 27 |           children: [
 28 |             {
 29 |               value: "santa-catarina",
 30 |               label: "Santa Catarina",
 31 |             },
 32 |             {
 33 |               value: "rio-grande-do-sul",
 34 |               label: "Rio Grande do Sul",
 35 |             },
 36 |             {
 37 |               value: "parana",
 38 |               label: "Paraná",
 39 |             },
 40 |           ],
 41 |         },
 42 |         {
 43 |           value: "sudeste",
 44 |           label: "Sudeste",
 45 |           children: [
 46 |             {
 47 |               value: "minas-gerais",
 48 |               label: "Minas Gerais",
 49 |             },
 50 |             {
 51 |               value: "sao-paulo",
 52 |               label: "São Paulo",
 53 |             },
 54 |             {
 55 |               value: "espirito-santo",
 56 |               label: "Espírito Santo",
 57 |             },
 58 |             {
 59 |               value: "rio-de-janeiro",
 60 |               label: "Rio de Janeiro",
 61 |             },
 62 |           ],
 63 |         },
 64 |         {
 65 |           value: "norte",
 66 |           label: "Norte",
 67 |           children: [
 68 |             {
 69 |               value: "acre",
 70 |               label: "Acre",
 71 |             },
 72 |             {
 73 |               value: "amapa",
 74 |               label: "Amapá",
 75 |             },
 76 |             {
 77 |               value: "roraima",
 78 |               label: "Roraima",
 79 |             },
 80 |             {
 81 |               value: "tocantins",
 82 |               label: "Tocantins",
 83 |             },
 84 |             {
 85 |               value: "para",
 86 |               label: "Pará",
 87 |             },
 88 |             {
 89 |               value: "rondonia",
 90 |               label: "Rondônia",
 91 |             },
 92 |             {
 93 |               value: "amazonas",
 94 |               label: "Amazonas",
 95 |             },
 96 |           ],
 97 |         },
 98 |         {
 99 |           value: "centro-oeste",
100 |           label: "Centro Oeste",
101 |           children: [
102 |             {
103 |               value: "mato-grosso",
104 |               label: "Mato Grosso",
105 |             },
106 |             {
107 |               value: "mato-grosso-do-sul",
108 |               label: "Mato Grosso do Sul",
109 |             },
110 |             {
111 |               value: "goias",
112 |               label: "Goiás",
113 |             },
114 |             {
115 |               value: "distrito-federal",
116 |               label: "Distrito Federal",
117 |             },
118 |           ],
119 |         },
120 |         {
121 |           value: "nordeste",
122 |           label: "Nordeste",
123 |           children: [
124 |             {
125 |               value: "bahia",
126 |               label: "Bahia",
127 |             },
128 |             {
129 |               value: "sergipe",
130 |               label: "Sergipe",
131 |             },
132 |             {
133 |               value: "alagoas",
134 |               label: "Alagoas",
135 |             },
136 |             {
137 |               value: "paraiba",
138 |               label: "Paraíba",
139 |             },
140 |             {
141 |               value: "pernambuco",
142 |               label: "Pernambuco",
143 |             },
144 |             {
145 |               value: "rio-grande-do-norte",
146 |               label: "Rio Grande do Norte",
147 |             },
148 |             {
149 |               value: "ceara",
150 |               label: "Ceará",
151 |             },
152 |             {
153 |               value: "piaui",
154 |               label: "Piauí",
155 |             },
156 |             {
157 |               value: "maranhao",
158 |               label: "Maranhão",
159 |             },
160 |             {
161 |               value: "mato-grosso",
162 |               label: "Mato Grosso",
163 |             },
164 |             {
165 |               value: "mato-grosso-do-sul",
166 |               label: "Mato Grosso do Sul",
167 |             },
168 |             {
169 |               value: "goias",
170 |               label: "Goiás",
171 |             },
172 |             {
173 |               value: "distrito-federal",
174 |               label: "Distrito Federal",
175 |             },
176 |           ],
177 |         },
178 |       ],
179 |     };
180 |   },
181 | };
182 | </script>
183 | 


--------------------------------------------------------------------------------
/styles/global.scss:
--------------------------------------------------------------------------------
  1 | @use "sass:color";
  2 | @use "_normalize.scss";
  3 | @use "_variables.scss";
  4 | 
  5 | .vss {
  6 |   * {
  7 |     font-size: variables.$font-size-base;
  8 |   }
  9 | 
 10 |   .vss-span {
 11 |     font-size: variables.$font-size-base + 0.4rem;
 12 |     color: variables.$gray;
 13 |   }
 14 | 
 15 |   .vss-list {
 16 |     .vss-inner-list {
 17 |       box-shadow: 0px 0px 10px variables.$gray;
 18 |       border-radius: variables.$border-radius-base;
 19 | 
 20 |       .vss-list-search {
 21 |         border: none;
 22 |         padding: 12px 14px;
 23 |         border-bottom: 2px solid color.adjust(variables.$gray, $lightness: 7%);
 24 |         border-top-left-radius: variables.$border-radius-base;
 25 |         border-top-right-radius: variables.$border-radius-base;
 26 |         outline: none;
 27 | 
 28 |         &:focus {
 29 |           border-color: variables.$selected-color;
 30 |         }
 31 |       }
 32 | 
 33 |       .vss-list-ul {
 34 |         padding: 8px 10px 10px 10px;
 35 | 
 36 |         li {
 37 |           span {
 38 |             display: flex;
 39 |             align-items: center;
 40 |             justify-content: space-between;
 41 |             border-radius: variables.$border-radius-base;
 42 |             color: variables.$default-text-color;
 43 |             padding: 5px 12px;
 44 |             margin-top: 2px;
 45 | 
 46 |             .vss-list-badge {
 47 |               font-size: variables.$font-size-base - 0.4;
 48 |               color: variables.$white;
 49 |               background-color: variables.$badge-background;
 50 |               padding: 2px 4px 0px 4px;
 51 |               border-radius: 20px;
 52 |               min-width: 14px;
 53 |               height: 14px;
 54 |               font-weight: bold;
 55 |             }
 56 |           }
 57 | 
 58 |           &.active:not(.is-parent) > span {
 59 |             background-color: variables.$default-item-background-selected;
 60 |             color: variables.$default-item-color-selected;
 61 |             border-color: transparent;
 62 |           }
 63 | 
 64 |           &.is-disabled:not(.is-parent) > span {
 65 |             background-color: color.adjust(variables.$gray, $lightness: -5%);
 66 |             color: variables.$default-item-color-selected;
 67 |             color: variables.$default-text-color;
 68 |             cursor: default;
 69 |             border-color: transparent;
 70 |           }
 71 | 
 72 |           &.is-disabled.active:not(.is-parent) > span {
 73 |             background-color: color.adjust(
 74 |               variables.$default-item-background-selected,
 75 |               $lightness: 20%
 76 |             );
 77 |             color: variables.$default-item-color-selected;
 78 |           }
 79 | 
 80 |           &:not(.is-parent) > span {
 81 |             cursor: pointer;
 82 |             background-color: variables.$default-item-background;
 83 |             border: 1px solid
 84 |               color.adjust(variables.$default-item-background, $lightness: -2%);
 85 |           }
 86 | 
 87 |           &.no-results > span,
 88 |           &.no-selection > span {
 89 |             cursor: default;
 90 |             background-color: variables.$default-item-background;
 91 |             border-color: transparent;
 92 |           }
 93 |         }
 94 | 
 95 |         // > li:not(.is-parent) > span {
 96 |         //
 97 |         // }
 98 | 
 99 |         > li.is-parent > span {
100 |           font-weight: bold;
101 |           padding-left: 0px;
102 |         }
103 |       }
104 | 
105 |       .vss-footer {
106 |         align-items: flex-end;
107 |         display: flex;
108 |         flex: 1 0 auto;
109 | 
110 |         .vss-footer-bg {
111 |           display: flex;
112 |           justify-content: space-between;
113 |           align-items: center;
114 |           padding: 0px 12px;
115 |           height: 2rem;
116 |           width: 100%;
117 |           background-color: variables.$default-footer-background;
118 |           border-bottom-left-radius: variables.$border-radius-base;
119 |           border-bottom-right-radius: variables.$border-radius-base;
120 | 
121 |           * {
122 |             color: variables.$default-footer-text-color;
123 |             font-size: variables.$font-size-base - 0.2;
124 |           }
125 | 
126 |           > div {
127 |             display: flex;
128 | 
129 |             .vss-footer-separator {
130 |               margin: 0px 6px;
131 |             }
132 |           }
133 | 
134 |           > span {
135 |             font-size: variables.$font-size-base - 0.3;
136 |             font-weight: bold;
137 |             color: variables.$default-footer-text-color;
138 |             background-color: color.adjust(
139 |               variables.$default-footer-background,
140 |               $lightness: 15%
141 |             );
142 |             padding: 1px 6px 0px 6px;
143 |             border-radius: 20px;
144 |             min-width: 14px;
145 |             height: 14px;
146 |           }
147 |         }
148 |       }
149 |     }
150 | 
151 |     .vss-total {
152 |       font-size: variables.$font-size-base - 0.2rem;
153 |     }
154 |   }
155 | }
156 | 


--------------------------------------------------------------------------------
/example/components/grouped-only-list.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="ex-lib">
  3 |     <vue-select-sides
  4 |       type="grouped"
  5 |       v-model="selected"
  6 |       :list="list"
  7 |       :search="search"
  8 |       :total="total"
  9 |       :toggle-all="toggleAll"
 10 |     ></vue-select-sides>
 11 |     <div class="ex-result">
 12 |       <h4>Result</h4>
 13 |       <pre>{{ selected }}</pre>
 14 |     </div>
 15 |   </div>
 16 | </template>
 17 | 
 18 | <script>
 19 | export default {
 20 |   data() {
 21 |     return {
 22 |       search: false,
 23 |       toggleAll: false,
 24 |       total: false,
 25 |       selected: {},
 26 |       list: [
 27 |         {
 28 |           value: "sul",
 29 |           label: "Sul",
 30 |           children: [
 31 |             {
 32 |               value: "santa-catarina",
 33 |               label: "Santa Catarina",
 34 |             },
 35 |             {
 36 |               value: "rio-grande-do-sul",
 37 |               label: "Rio Grande do Sul",
 38 |             },
 39 |             {
 40 |               value: "parana",
 41 |               label: "Paraná",
 42 |             },
 43 |           ],
 44 |         },
 45 |         {
 46 |           value: "sudeste",
 47 |           label: "Sudeste",
 48 |           children: [
 49 |             {
 50 |               value: "minas-gerais",
 51 |               label: "Minas Gerais",
 52 |             },
 53 |             {
 54 |               value: "sao-paulo",
 55 |               label: "São Paulo",
 56 |             },
 57 |             {
 58 |               value: "espirito-santo",
 59 |               label: "Espírito Santo",
 60 |             },
 61 |             {
 62 |               value: "rio-de-janeiro",
 63 |               label: "Rio de Janeiro",
 64 |             },
 65 |           ],
 66 |         },
 67 |         {
 68 |           value: "norte",
 69 |           label: "Norte",
 70 |           children: [
 71 |             {
 72 |               value: "acre",
 73 |               label: "Acre",
 74 |             },
 75 |             {
 76 |               value: "amapa",
 77 |               label: "Amapá",
 78 |             },
 79 |             {
 80 |               value: "roraima",
 81 |               label: "Roraima",
 82 |             },
 83 |             {
 84 |               value: "tocantins",
 85 |               label: "Tocantins",
 86 |             },
 87 |             {
 88 |               value: "para",
 89 |               label: "Pará",
 90 |             },
 91 |             {
 92 |               value: "rondonia",
 93 |               label: "Rondônia",
 94 |             },
 95 |             {
 96 |               value: "amazonas",
 97 |               label: "Amazonas",
 98 |             },
 99 |           ],
100 |         },
101 |         {
102 |           value: "centro-oeste",
103 |           label: "Centro Oeste",
104 |           children: [
105 |             {
106 |               value: "mato-grosso",
107 |               label: "Mato Grosso",
108 |             },
109 |             {
110 |               value: "mato-grosso-do-sul",
111 |               label: "Mato Grosso do Sul",
112 |             },
113 |             {
114 |               value: "goias",
115 |               label: "Goiás",
116 |             },
117 |             {
118 |               value: "distrito-federal",
119 |               label: "Distrito Federal",
120 |             },
121 |           ],
122 |         },
123 |         {
124 |           value: "nordeste",
125 |           label: "Nordeste",
126 |           children: [
127 |             {
128 |               value: "bahia",
129 |               label: "Bahia",
130 |             },
131 |             {
132 |               value: "sergipe",
133 |               label: "Sergipe",
134 |             },
135 |             {
136 |               value: "alagoas",
137 |               label: "Alagoas",
138 |             },
139 |             {
140 |               value: "paraiba",
141 |               label: "Paraíba",
142 |             },
143 |             {
144 |               value: "pernambuco",
145 |               label: "Pernambuco",
146 |             },
147 |             {
148 |               value: "rio-grande-do-norte",
149 |               label: "Rio Grande do Norte",
150 |             },
151 |             {
152 |               value: "ceara",
153 |               label: "Ceará",
154 |             },
155 |             {
156 |               value: "piaui",
157 |               label: "Piauí",
158 |             },
159 |             {
160 |               value: "maranhao",
161 |               label: "Maranhão",
162 |             },
163 |             {
164 |               value: "mato-grosso",
165 |               label: "Mato Grosso",
166 |             },
167 |             {
168 |               value: "mato-grosso-do-sul",
169 |               label: "Mato Grosso do Sul",
170 |             },
171 |             {
172 |               value: "goias",
173 |               label: "Goiás",
174 |             },
175 |             {
176 |               value: "distrito-federal",
177 |               label: "Distrito Federal",
178 |             },
179 |           ],
180 |         },
181 |       ],
182 |     };
183 |   },
184 | };
185 | </script>
186 | 


--------------------------------------------------------------------------------
/example/components/grouped-sort-selected-first.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="ex-lib">
  3 |     <vue-select-sides
  4 |       type="grouped"
  5 |       :order-by="order"
  6 |       :sort-selected-up="sortSelectedUp"
  7 |       v-model="selected"
  8 |       :list="list"
  9 |     ></vue-select-sides>
 10 |     <div class="ex-result">
 11 |       <h4>Result</h4>
 12 |       <pre>{{ selected }}</pre>
 13 |     </div>
 14 |   </div>
 15 | </template>
 16 | 
 17 | <script>
 18 | export default {
 19 |   data() {
 20 |     return {
 21 |       sortSelectedUp: true,
 22 |       order: "asc",
 23 |       selected: {
 24 |         sudeste: ["minas-gerais"],
 25 |         norte: ["acre", "roraima"],
 26 |       },
 27 |       list: [
 28 |         {
 29 |           value: "sul",
 30 |           label: "Sul",
 31 |           children: [
 32 |             {
 33 |               value: "santa-catarina",
 34 |               label: "Santa Catarina",
 35 |             },
 36 |             {
 37 |               value: "rio-grande-do-sul",
 38 |               label: "Rio Grande do Sul",
 39 |             },
 40 |             {
 41 |               value: "parana",
 42 |               label: "Paraná",
 43 |             },
 44 |           ],
 45 |         },
 46 |         {
 47 |           value: "sudeste",
 48 |           label: "Sudeste",
 49 |           children: [
 50 |             {
 51 |               value: "minas-gerais",
 52 |               label: "Minas Gerais",
 53 |             },
 54 |             {
 55 |               value: "sao-paulo",
 56 |               label: "São Paulo",
 57 |             },
 58 |             {
 59 |               value: "espirito-santo",
 60 |               label: "Espírito Santo",
 61 |             },
 62 |             {
 63 |               value: "rio-de-janeiro",
 64 |               label: "Rio de Janeiro",
 65 |             },
 66 |           ],
 67 |         },
 68 |         {
 69 |           value: "norte",
 70 |           label: "Norte",
 71 |           children: [
 72 |             {
 73 |               value: "acre",
 74 |               label: "Acre",
 75 |             },
 76 |             {
 77 |               value: "amapa",
 78 |               label: "Amapá",
 79 |             },
 80 |             {
 81 |               value: "roraima",
 82 |               label: "Roraima",
 83 |             },
 84 |             {
 85 |               value: "tocantins",
 86 |               label: "Tocantins",
 87 |             },
 88 |             {
 89 |               value: "para",
 90 |               label: "Pará",
 91 |             },
 92 |             {
 93 |               value: "rondonia",
 94 |               label: "Rondônia",
 95 |             },
 96 |             {
 97 |               value: "amazonas",
 98 |               label: "Amazonas",
 99 |             },
100 |           ],
101 |         },
102 |         {
103 |           value: "centro-oeste",
104 |           label: "Centro Oeste",
105 |           children: [
106 |             {
107 |               value: "mato-grosso",
108 |               label: "Mato Grosso",
109 |             },
110 |             {
111 |               value: "mato-grosso-do-sul",
112 |               label: "Mato Grosso do Sul",
113 |             },
114 |             {
115 |               value: "goias",
116 |               label: "Goiás",
117 |             },
118 |             {
119 |               value: "distrito-federal",
120 |               label: "Distrito Federal",
121 |             },
122 |           ],
123 |         },
124 |         {
125 |           value: "nordeste",
126 |           label: "Nordeste",
127 |           children: [
128 |             {
129 |               value: "bahia",
130 |               label: "Bahia",
131 |             },
132 |             {
133 |               value: "sergipe",
134 |               label: "Sergipe",
135 |             },
136 |             {
137 |               value: "alagoas",
138 |               label: "Alagoas",
139 |             },
140 |             {
141 |               value: "paraiba",
142 |               label: "Paraíba",
143 |             },
144 |             {
145 |               value: "pernambuco",
146 |               label: "Pernambuco",
147 |             },
148 |             {
149 |               value: "rio-grande-do-norte",
150 |               label: "Rio Grande do Norte",
151 |             },
152 |             {
153 |               value: "ceara",
154 |               label: "Ceará",
155 |             },
156 |             {
157 |               value: "piaui",
158 |               label: "Piauí",
159 |             },
160 |             {
161 |               value: "maranhao",
162 |               label: "Maranhão",
163 |             },
164 |             {
165 |               value: "mato-grosso",
166 |               label: "Mato Grosso",
167 |             },
168 |             {
169 |               value: "mato-grosso-do-sul",
170 |               label: "Mato Grosso do Sul",
171 |             },
172 |             {
173 |               value: "goias",
174 |               label: "Goiás",
175 |             },
176 |             {
177 |               value: "distrito-federal",
178 |               label: "Distrito Federal",
179 |             },
180 |           ],
181 |         },
182 |       ],
183 |     };
184 |   },
185 | };
186 | </script>
187 | 


--------------------------------------------------------------------------------
/example/components/grouped-placeholder-search.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="ex-lib">
  3 |     <vue-select-sides
  4 |       type="grouped"
  5 |       v-model="selected"
  6 |       :list="list"
  7 |       placeholder-search-left="Yay! Search items..."
  8 |       placeholder-search-right="Yay! Search children items..."
  9 |     ></vue-select-sides>
 10 |     <div class="ex-result">
 11 |       <h4>Result</h4>
 12 |       <pre>{{ selected }}</pre>
 13 |     </div>
 14 |   </div>
 15 | </template>
 16 | 
 17 | <script>
 18 | // import vueSelectSides from "../../src/index";
 19 | 
 20 | // vueSelectSides.install({ locale: "en_US" });
 21 | 
 22 | export default {
 23 |   // components: {
 24 |   //   vueSelectSides,
 25 |   // },
 26 |   data() {
 27 |     return {
 28 |       selected: { sul: [], sudeste: [] },
 29 |       list: [
 30 |         {
 31 |           value: "sul",
 32 |           label: "Sul",
 33 |           children: [
 34 |             {
 35 |               value: "santa-catarina",
 36 |               label: "Santa Catarina",
 37 |             },
 38 |             {
 39 |               value: "rio-grande-do-sul",
 40 |               label: "Rio Grande do Sul",
 41 |             },
 42 |             {
 43 |               value: "parana",
 44 |               label: "Paraná",
 45 |             },
 46 |           ],
 47 |         },
 48 |         {
 49 |           value: "sudeste",
 50 |           label: "Sudeste",
 51 |           children: [
 52 |             {
 53 |               value: "minas-gerais",
 54 |               label: "Minas Gerais",
 55 |             },
 56 |             {
 57 |               value: "sao-paulo",
 58 |               label: "São Paulo",
 59 |             },
 60 |             {
 61 |               value: "espirito-santo",
 62 |               label: "Espírito Santo",
 63 |             },
 64 |             {
 65 |               value: "rio-de-janeiro",
 66 |               label: "Rio de Janeiro",
 67 |             },
 68 |           ],
 69 |         },
 70 |         {
 71 |           value: "norte",
 72 |           label: "Norte",
 73 |           children: [
 74 |             {
 75 |               value: "acre",
 76 |               label: "Acre",
 77 |             },
 78 |             {
 79 |               value: "amapa",
 80 |               label: "Amapá",
 81 |             },
 82 |             {
 83 |               value: "roraima",
 84 |               label: "Roraima",
 85 |             },
 86 |             {
 87 |               value: "tocantins",
 88 |               label: "Tocantins",
 89 |             },
 90 |             {
 91 |               value: "para",
 92 |               label: "Pará",
 93 |             },
 94 |             {
 95 |               value: "rondonia",
 96 |               label: "Rondônia",
 97 |             },
 98 |             {
 99 |               value: "amazonas",
100 |               label: "Amazonas",
101 |             },
102 |           ],
103 |         },
104 |         {
105 |           value: "centro-oeste",
106 |           label: "Centro Oeste",
107 |           children: [
108 |             {
109 |               value: "mato-grosso",
110 |               label: "Mato Grosso",
111 |             },
112 |             {
113 |               value: "mato-grosso-do-sul",
114 |               label: "Mato Grosso do Sul",
115 |             },
116 |             {
117 |               value: "goias",
118 |               label: "Goiás",
119 |             },
120 |             {
121 |               value: "distrito-federal",
122 |               label: "Distrito Federal",
123 |             },
124 |           ],
125 |         },
126 |         {
127 |           value: "nordeste",
128 |           label: "Nordeste",
129 |           children: [
130 |             {
131 |               value: "bahia",
132 |               label: "Bahia",
133 |             },
134 |             {
135 |               value: "sergipe",
136 |               label: "Sergipe",
137 |             },
138 |             {
139 |               value: "alagoas",
140 |               label: "Alagoas",
141 |             },
142 |             {
143 |               value: "paraiba",
144 |               label: "Paraíba",
145 |             },
146 |             {
147 |               value: "pernambuco",
148 |               label: "Pernambuco",
149 |             },
150 |             {
151 |               value: "rio-grande-do-norte",
152 |               label: "Rio Grande do Norte",
153 |             },
154 |             {
155 |               value: "ceara",
156 |               label: "Ceará",
157 |             },
158 |             {
159 |               value: "piaui",
160 |               label: "Piauí",
161 |             },
162 |             {
163 |               value: "maranhao",
164 |               label: "Maranhão",
165 |             },
166 |             {
167 |               value: "mato-grosso",
168 |               label: "Mato Grosso",
169 |             },
170 |             {
171 |               value: "mato-grosso-do-sul",
172 |               label: "Mato Grosso do Sul",
173 |             },
174 |             {
175 |               value: "goias",
176 |               label: "Goiás",
177 |             },
178 |             {
179 |               value: "distrito-federal",
180 |               label: "Distrito Federal",
181 |             },
182 |           ],
183 |         },
184 |       ],
185 |     };
186 |   },
187 | };
188 | </script>
189 | 


--------------------------------------------------------------------------------
/src/vue-select-sides.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <component
  3 |     class="vss"
  4 |     :is="getComponent()"
  5 |     :type="params.type"
  6 |     :list="listClone"
  7 |     :search="params.search"
  8 |     :total="params.total"
  9 |     :toggle-all="params.toggleAll"
 10 |     :order-by="params.orderBy"
 11 |     :placeholder-search-left="params.placeholderSearchLeft"
 12 |     :placeholder-search-right="params.placeholderSearchRight"
 13 |     :sort-selected-up="params.sortSelectedUp"
 14 |     v-model="modelProp"
 15 |     @update-selected="updateSelected"
 16 |   />
 17 | </template>
 18 | 
 19 | <script>
 20 | // import i18n from "./i18n";
 21 | import { clone } from "./utils";
 22 | import grouped from "./modules/grouped.vue";
 23 | import mirror from "./modules/mirror.vue";
 24 | 
 25 | export default {
 26 |   // i18n,
 27 |   name: "vue-select-sides",
 28 |   display: "Core select sides",
 29 |   components: {
 30 |     "mirror-select-sides": mirror,
 31 |     "grouped-select-sides": grouped,
 32 |   },
 33 |   props: {
 34 |     list: {
 35 |       required: true,
 36 |       type: [Array, Object],
 37 |     },
 38 |     type: {
 39 |       type: String,
 40 |       default: undefined, // "grouped"
 41 |     },
 42 |     orderBy: {
 43 |       type: String,
 44 |       default: undefined,
 45 |     },
 46 |     placeholderSearchLeft: {
 47 |       type: [String, Boolean],
 48 |       default: undefined, // false
 49 |     },
 50 |     placeholderSearchRight: {
 51 |       type: [String, Boolean],
 52 |       default: undefined, // false
 53 |     },
 54 |     sortSelectedUp: {
 55 |       type: Boolean,
 56 |       default: undefined, // false
 57 |     },
 58 |     search: {
 59 |       type: Boolean,
 60 |       default: undefined, // true
 61 |     },
 62 |     total: {
 63 |       type: Boolean,
 64 |       default: undefined, // true
 65 |     },
 66 |     toggleAll: {
 67 |       type: Boolean,
 68 |       default: undefined, // true
 69 |     },
 70 |     modelValue: {
 71 |       type: [Object, Array],
 72 |       default: undefined,
 73 |     },
 74 |   },
 75 |   emits: ["update:model-value"],
 76 |   watch: {
 77 |     list(newVal) {
 78 |       this.listClone = clone(newVal);
 79 |     },
 80 |     type(newVal) {
 81 |       this.params.type = newVal;
 82 |     },
 83 |     search(newVal) {
 84 |       this.params.search = newVal;
 85 |     },
 86 |     total(newVal) {
 87 |       this.params.total = newVal;
 88 |     },
 89 |     toggleAll(newVal) {
 90 |       this.params.toggleAll = newVal;
 91 |     },
 92 |     orderBy(newVal) {
 93 |       this.params.orderBy = newVal;
 94 |     },
 95 |     placeholderSearchLeft(newVal) {
 96 |       this.params.placeholderSearchLeft = newVal;
 97 |     },
 98 |     placeholderSearchRight(newVal) {
 99 |       this.params.placeholderSearchRight = newVal;
100 |     },
101 |     sortSelectedUp(newVal) {
102 |       this.params.sortSelectedUp = newVal;
103 |     },
104 |   },
105 |   methods: {
106 |     updateSelected(items) {
107 |       this.$emit("update:model-value", items);
108 |     },
109 |     getComponent() {
110 |       return this.params.type == "mirror"
111 |         ? "mirror-select-sides"
112 |         : "grouped-select-sides";
113 |     },
114 |     selectLocale(locale) {
115 |       if (this.enabledLocales.indexOf(locale) >= 0) {
116 |         this.$i18n.locale = locale;
117 |       }
118 |     },
119 |     setDefaultParams() {
120 |       let vm = this;
121 | 
122 |       let items = {
123 |         type: vm.type,
124 |         orderBy: vm.orderBy,
125 |         placeholderSearchLeft: vm.placeholderSearchLeft,
126 |         placeholderSearchRight: vm.placeholderSearchRight,
127 |         sortSelectedUp: vm.sortSelectedUp,
128 |         search: vm.search,
129 |         total: vm.total,
130 |         toggleAll: vm.toggleAll,
131 |       };
132 | 
133 |       Object.keys(items).forEach((key) => {
134 |         let value = items[key];
135 | 
136 |         if (value === undefined) {
137 |           if (vm.defaultOptions[key] !== undefined) {
138 |             vm.params[key] = vm.defaultOptions[key];
139 |           }
140 |         } else {
141 |           vm.params[key] = value;
142 |         }
143 |       });
144 | 
145 |       if (vm.defaultOptions.locale !== undefined) {
146 |         vm.selectLocale(vm.defaultOptions.locale);
147 |       }
148 |     },
149 |   },
150 |   computed: {
151 |     modelProp: {
152 |       get() {
153 |         return this.modelValue;
154 |       },
155 |       set(value) {
156 |         this.$emit("update:model-value", value);
157 |       },
158 |     },
159 |   },
160 |   beforeMount() {
161 |     this.setDefaultParams();
162 |     this.listClone = clone(this.list);
163 |   },
164 |   data() {
165 |     return {
166 |       listClone: [],
167 |       locale: "en_US",
168 |       enabledLocales: [
169 |         "pt_BR",
170 |         "en_US",
171 |         "es_ES",
172 |         "fr_FR",
173 |         "tr_TR",
174 |         "pl_PL",
175 |         "cz_CZ",
176 |         "sk_SK",
177 |       ],
178 |       params: {
179 |         type: "mirror",
180 |         orderBy: undefined,
181 |         placeholderSearchLeft: false,
182 |         placeholderSearchRight: false,
183 |         sortSelectedUp: false,
184 |         search: true,
185 |         total: true,
186 |         toggleAll: true,
187 |       },
188 |     };
189 |   },
190 | };
191 | </script>
192 | 


--------------------------------------------------------------------------------
/example/components/grouped-with-disabled.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="ex-lib">
  3 |     <vue-select-sides
  4 |       type="grouped"
  5 |       v-model="selected"
  6 |       :list="list"
  7 |     ></vue-select-sides>
  8 |     <div class="ex-result">
  9 |       <h4>Result</h4>
 10 |       <pre>{{ selected }}</pre>
 11 |     </div>
 12 |   </div>
 13 | </template>
 14 | 
 15 | <script>
 16 | export default {
 17 |   data() {
 18 |     return {
 19 |       selected: {
 20 |         sudeste: ["minas-gerais"],
 21 |         norte: ["acre", "roraima"],
 22 |       },
 23 |       list: [
 24 |         {
 25 |           value: "sul",
 26 |           label: "Sul",
 27 |           disabled: true,
 28 |           children: [
 29 |             {
 30 |               value: "santa-catarina",
 31 |               label: "Santa Catarina",
 32 |             },
 33 |             {
 34 |               value: "rio-grande-do-sul",
 35 |               label: "Rio Grande do Sul",
 36 |             },
 37 |             {
 38 |               value: "parana",
 39 |               label: "Paraná",
 40 |             },
 41 |           ],
 42 |         },
 43 |         {
 44 |           value: "sudeste",
 45 |           label: "Sudeste",
 46 |           children: [
 47 |             {
 48 |               value: "minas-gerais",
 49 |               label: "Minas Gerais",
 50 |             },
 51 |             {
 52 |               value: "sao-paulo",
 53 |               label: "São Paulo",
 54 |             },
 55 |             {
 56 |               value: "espirito-santo",
 57 |               label: "Espírito Santo",
 58 |             },
 59 |             {
 60 |               value: "rio-de-janeiro",
 61 |               label: "Rio de Janeiro",
 62 |             },
 63 |           ],
 64 |         },
 65 |         {
 66 |           value: "norte",
 67 |           label: "Norte",
 68 |           disabled: true,
 69 |           children: [
 70 |             {
 71 |               value: "acre",
 72 |               label: "Acre",
 73 |               disabled: true,
 74 |             },
 75 |             {
 76 |               value: "amapa",
 77 |               label: "Amapá",
 78 |               disabled: true,
 79 |             },
 80 |             {
 81 |               value: "roraima",
 82 |               label: "Roraima",
 83 |               disabled: true,
 84 |             },
 85 |             {
 86 |               value: "tocantins",
 87 |               label: "Tocantins",
 88 |               disabled: true,
 89 |             },
 90 |             {
 91 |               value: "para",
 92 |               label: "Pará",
 93 |               disabled: true,
 94 |             },
 95 |             {
 96 |               value: "rondonia",
 97 |               label: "Rondônia",
 98 |               disabled: true,
 99 |             },
100 |             {
101 |               value: "amazonas",
102 |               label: "Amazonas",
103 |               disabled: true,
104 |             },
105 |           ],
106 |         },
107 |         {
108 |           value: "centro-oeste",
109 |           label: "Centro Oeste",
110 |           children: [
111 |             {
112 |               value: "mato-grosso",
113 |               label: "Mato Grosso",
114 |             },
115 |             {
116 |               value: "mato-grosso-do-sul",
117 |               label: "Mato Grosso do Sul",
118 |             },
119 |             {
120 |               value: "goias",
121 |               label: "Goiás",
122 |             },
123 |             {
124 |               value: "distrito-federal",
125 |               label: "Distrito Federal",
126 |             },
127 |           ],
128 |         },
129 |         {
130 |           value: "nordeste",
131 |           label: "Nordeste",
132 |           children: [
133 |             {
134 |               value: "bahia",
135 |               label: "Bahia",
136 |             },
137 |             {
138 |               value: "sergipe",
139 |               label: "Sergipe",
140 |             },
141 |             {
142 |               value: "alagoas",
143 |               label: "Alagoas",
144 |             },
145 |             {
146 |               value: "paraiba",
147 |               label: "Paraíba",
148 |             },
149 |             {
150 |               value: "pernambuco",
151 |               label: "Pernambuco",
152 |             },
153 |             {
154 |               value: "rio-grande-do-norte",
155 |               label: "Rio Grande do Norte",
156 |             },
157 |             {
158 |               value: "ceara",
159 |               label: "Ceará",
160 |             },
161 |             {
162 |               value: "piaui",
163 |               label: "Piauí",
164 |             },
165 |             {
166 |               value: "maranhao",
167 |               label: "Maranhão",
168 |             },
169 |             {
170 |               value: "mato-grosso",
171 |               label: "Mato Grosso",
172 |             },
173 |             {
174 |               value: "mato-grosso-do-sul",
175 |               label: "Mato Grosso do Sul",
176 |             },
177 |             {
178 |               value: "goias",
179 |               label: "Goiás",
180 |             },
181 |             {
182 |               value: "distrito-federal",
183 |               label: "Distrito Federal",
184 |             },
185 |           ],
186 |         },
187 |       ],
188 |     };
189 |   },
190 | };
191 | </script>
192 | 


--------------------------------------------------------------------------------
/docs/vueSelectSidesExample.css:
--------------------------------------------------------------------------------
1 | .ex-label-radio[data-v-2c0073d3]{padding:10px 0 2px;display:flex;align-items:center}.ex-label-radio label[data-v-2c0073d3]{display:flex;align-items:center;font-size:14px;margin-right:15px}.ex-label-radio label input[data-v-2c0073d3]{padding:0;margin:0 5px 0 0}pre[data-v-2c0073d3]{height:322px!important}.ex-label-radio[data-v-fcfcfbd0]{padding:10px 0 2px;display:flex;align-items:center}.ex-label-radio label[data-v-fcfcfbd0]{display:flex;align-items:center;font-size:14px;margin-right:15px}.ex-label-radio label input[data-v-fcfcfbd0]{padding:0;margin:0 5px 0 0}pre[data-v-fcfcfbd0]{height:322px!important}.vss,.vss ul,.vss ul li{list-style-type:none;margin:0}.vss ul ul{padding:0}.vss,.vss *,.vss *:before,.vss *:after{box-sizing:border-box}.vss{display:flex;align-items:stretch;align-content:stretch;justify-content:space-between}.vss a{text-decoration:none}.vss .vss-span,.vss .vss-list-ul li{-webkit-user-select:none;user-select:none}.vss .vss-span{width:15%;display:flex;align-items:center;justify-content:center}.vss .vss-list{width:100%}.vss .vss-list .vss-inner-list{height:100%;display:flex;flex-direction:column}.vss .vss-list .vss-inner-list .vss-list-search{width:100%}.vss .vss-list .vss-inner-list .vss-list-ul{overflow-y:auto}.vss .vss-list .vss-inner-list .vss-list-ul li{line-height:1.5}.vss .vss-list .vss-inner-list .vss-list-ul li .vss-list-badge{display:flex;align-items:center;justify-content:center}.vss *{font-size:.9rem}.vss .vss-span{font-size:1.3rem;color:#e1e1e1}.vss .vss-list .vss-inner-list{box-shadow:0 0 10px #e1e1e1;border-radius:.25rem}.vss .vss-list .vss-inner-list .vss-list-search{border:none;padding:12px 14px;border-bottom:2px solid rgb(242.85,242.85,242.85);border-top-left-radius:.25rem;border-top-right-radius:.25rem;outline:none}.vss .vss-list .vss-inner-list .vss-list-search:focus{border-color:#f57f1e}.vss .vss-list .vss-inner-list .vss-list-ul{padding:8px 10px 10px}.vss .vss-list .vss-inner-list .vss-list-ul li span{display:flex;align-items:center;justify-content:space-between;border-radius:.25rem;color:#242934;padding:5px 12px;margin-top:2px}.vss .vss-list .vss-inner-list .vss-list-ul li span .vss-list-badge{font-size:.5rem;color:#fff;background-color:#24293426;padding:2px 4px 0;border-radius:20px;min-width:14px;height:14px;font-weight:700}.vss .vss-list .vss-inner-list .vss-list-ul li.active:not(.is-parent)>span{background-color:#f57f1e;color:#fff;border-color:transparent}.vss .vss-list .vss-inner-list .vss-list-ul li.is-disabled:not(.is-parent)>span{background-color:#d4d4d4;color:#fff;color:#242934;cursor:default;border-color:transparent}.vss .vss-list .vss-inner-list .vss-list-ul li.is-disabled.active:not(.is-parent)>span{background-color:#f9b780;color:#fff}.vss .vss-list .vss-inner-list .vss-list-ul li:not(.is-parent)>span{cursor:pointer;background-color:#fafafa;border:1px solid rgb(244.9,244.9,244.9)}.vss .vss-list .vss-inner-list .vss-list-ul li.no-results>span,.vss .vss-list .vss-inner-list .vss-list-ul li.no-selection>span{cursor:default;background-color:#fafafa;border-color:transparent}.vss .vss-list .vss-inner-list .vss-list-ul>li.is-parent>span{font-weight:700;padding-left:0}.vss .vss-list .vss-inner-list .vss-footer{align-items:flex-end;display:flex;flex:1 0 auto}.vss .vss-list .vss-inner-list .vss-footer .vss-footer-bg{display:flex;justify-content:space-between;align-items:center;padding:0 12px;height:2rem;width:100%;background-color:#242934;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.vss .vss-list .vss-inner-list .vss-footer .vss-footer-bg *{color:#fff;font-size:.7rem}.vss .vss-list .vss-inner-list .vss-footer .vss-footer-bg>div{display:flex}.vss .vss-list .vss-inner-list .vss-footer .vss-footer-bg>div .vss-footer-separator{margin:0 6px}.vss .vss-list .vss-inner-list .vss-footer .vss-footer-bg>span{font-size:.6rem;font-weight:700;color:#fff;background-color:#434d61;padding:1px 6px 0;border-radius:20px;min-width:14px;height:14px}.vss .vss-list .vss-total{font-size:.7rem}.vss{height:300px}header{margin:30px 0;width:100%;display:flex;align-items:center;flex-direction:column}header img{max-height:120px;margin-bottom:10px}header h2,header h3{margin:5px}header a{color:#f57f1e;text-decoration:none}.the-body{width:80%;margin:0 auto;display:flex}.the-body.affixed nav{margin-top:0;position:fixed;top:30px}.the-body.affixed section{margin-left:15rem}.the-body nav{margin-top:30px;background-color:#fafafa;border-radius:.25rem;width:15rem;height:calc(100vh - 60px);overflow-y:auto}.the-body nav>div{padding:25px 30px}.the-body nav ul{list-style:none;margin:0 0 15px;padding:0}.the-body nav ul li{line-height:1.5}.the-body nav ul li a{text-decoration:none;color:#242934}.the-body nav ul li a:hover{color:#f57f1e}.the-body nav ul>ul{padding-left:15px}.the-body section{padding-left:2rem;width:74%}.ex{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ex hr{border-style:solid;border-color:transparent;border-top-color:#f1f1f1;margin:35px 0 0}.ex .ex-section{padding-top:30px}.ex .ex-section .ex-section-title{display:flex;align-items:center;justify-content:space-between}.ex .ex-section .ex-section-title a{text-decoration:none;background-color:#f57f1e;padding:10px;border-radius:.25rem;color:#fff;font-size:.9rem}.ex .ex-section .ex-lib{display:flex}.ex .ex-section .ex-lib .vss{width:65%}.ex .ex-section .ex-lib .ex-result{margin-left:2.5rem;width:35%}.ex .ex-section .ex-lib .ex-result h4{margin:0}.ex .ex-section .ex-lib .ex-result pre{height:250px;overflow-y:auto;background:#f1f1f1;padding:10px;border-radius:5px}
2 | 


--------------------------------------------------------------------------------
/example/components/grouped-sort-list.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="ex-lib">
  3 |     <vue-select-sides
  4 |       type="grouped"
  5 |       :order-by="order"
  6 |       v-model="selected"
  7 |       :list="list"
  8 |     ></vue-select-sides>
  9 |     <div class="ex-result">
 10 |       <h4>Result</h4>
 11 |       <div class="ex-label-radio">
 12 |         <label>
 13 |           <input type="radio" id="asc" value="asc" v-model="order" />
 14 |           ASC
 15 |         </label>
 16 |         <label>
 17 |           <input type="radio" id="desc" value="desc" v-model="order" />
 18 |           DESC
 19 |         </label>
 20 |       </div>
 21 |       <pre><b>Order</b>: {{ order }}.<br><br>{{ selected }}</pre>
 22 |     </div>
 23 |   </div>
 24 | </template>
 25 | 
 26 | <script>
 27 | export default {
 28 |   data() {
 29 |     return {
 30 |       order: "asc",
 31 |       selected: {
 32 |         sudeste: ["minas-gerais"],
 33 |         norte: ["acre", "roraima"],
 34 |       },
 35 |       list: [
 36 |         {
 37 |           value: "sul",
 38 |           label: "Sul",
 39 |           children: [
 40 |             {
 41 |               value: "santa-catarina",
 42 |               label: "Santa Catarina",
 43 |             },
 44 |             {
 45 |               value: "rio-grande-do-sul",
 46 |               label: "Rio Grande do Sul",
 47 |             },
 48 |             {
 49 |               value: "parana",
 50 |               label: "Paraná",
 51 |             },
 52 |           ],
 53 |         },
 54 |         {
 55 |           value: "sudeste",
 56 |           label: "Sudeste",
 57 |           children: [
 58 |             {
 59 |               value: "minas-gerais",
 60 |               label: "Minas Gerais",
 61 |             },
 62 |             {
 63 |               value: "sao-paulo",
 64 |               label: "São Paulo",
 65 |             },
 66 |             {
 67 |               value: "espirito-santo",
 68 |               label: "Espírito Santo",
 69 |             },
 70 |             {
 71 |               value: "rio-de-janeiro",
 72 |               label: "Rio de Janeiro",
 73 |             },
 74 |           ],
 75 |         },
 76 |         {
 77 |           value: "norte",
 78 |           label: "Norte",
 79 |           children: [
 80 |             {
 81 |               value: "acre",
 82 |               label: "Acre",
 83 |             },
 84 |             {
 85 |               value: "amapa",
 86 |               label: "Amapá",
 87 |             },
 88 |             {
 89 |               value: "roraima",
 90 |               label: "Roraima",
 91 |             },
 92 |             {
 93 |               value: "tocantins",
 94 |               label: "Tocantins",
 95 |             },
 96 |             {
 97 |               value: "para",
 98 |               label: "Pará",
 99 |             },
100 |             {
101 |               value: "rondonia",
102 |               label: "Rondônia",
103 |             },
104 |             {
105 |               value: "amazonas",
106 |               label: "Amazonas",
107 |             },
108 |           ],
109 |         },
110 |         {
111 |           value: "centro-oeste",
112 |           label: "Centro Oeste",
113 |           children: [
114 |             {
115 |               value: "mato-grosso",
116 |               label: "Mato Grosso",
117 |             },
118 |             {
119 |               value: "mato-grosso-do-sul",
120 |               label: "Mato Grosso do Sul",
121 |             },
122 |             {
123 |               value: "goias",
124 |               label: "Goiás",
125 |             },
126 |             {
127 |               value: "distrito-federal",
128 |               label: "Distrito Federal",
129 |             },
130 |           ],
131 |         },
132 |         {
133 |           value: "nordeste",
134 |           label: "Nordeste",
135 |           children: [
136 |             {
137 |               value: "bahia",
138 |               label: "Bahia",
139 |             },
140 |             {
141 |               value: "sergipe",
142 |               label: "Sergipe",
143 |             },
144 |             {
145 |               value: "alagoas",
146 |               label: "Alagoas",
147 |             },
148 |             {
149 |               value: "paraiba",
150 |               label: "Paraíba",
151 |             },
152 |             {
153 |               value: "pernambuco",
154 |               label: "Pernambuco",
155 |             },
156 |             {
157 |               value: "rio-grande-do-norte",
158 |               label: "Rio Grande do Norte",
159 |             },
160 |             {
161 |               value: "ceara",
162 |               label: "Ceará",
163 |             },
164 |             {
165 |               value: "piaui",
166 |               label: "Piauí",
167 |             },
168 |             {
169 |               value: "maranhao",
170 |               label: "Maranhão",
171 |             },
172 |             {
173 |               value: "mato-grosso",
174 |               label: "Mato Grosso",
175 |             },
176 |             {
177 |               value: "mato-grosso-do-sul",
178 |               label: "Mato Grosso do Sul",
179 |             },
180 |             {
181 |               value: "goias",
182 |               label: "Goiás",
183 |             },
184 |             {
185 |               value: "distrito-federal",
186 |               label: "Distrito Federal",
187 |             },
188 |           ],
189 |         },
190 |       ],
191 |     };
192 |   },
193 | };
194 | </script>
195 | 
196 | <style lang="scss" scoped>
197 | .ex-label-radio {
198 |   padding: 10px 0px 2px;
199 |   display: flex;
200 |   align-items: center;
201 | 
202 |   label {
203 |     display: flex;
204 |     align-items: center;
205 |     font-size: 14px;
206 |     margin-right: 15px;
207 | 
208 |     input {
209 |       padding: 0px;
210 |       margin: 0px 5px 0px 0px;
211 |     }
212 |   }
213 | }
214 | 
215 | pre {
216 |   height: 322px !important;
217 | }
218 | </style>
219 | 


--------------------------------------------------------------------------------
/src/modules/mirror.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="vss-list">
  4 |       <div class="vss-inner-list">
  5 |         <v-search
  6 |           :placeholder="placeholderSearchLeft"
  7 |           class="vss-list-search"
  8 |           v-if="search"
  9 |           v-model="searchL"
 10 |         ></v-search>
 11 |         <v-list
 12 |           :enable-counter="false"
 13 |           :has-children="false"
 14 |           :type="type"
 15 |           side="left"
 16 |           :items="filteredListL"
 17 |           @updated-item="updateItem"
 18 |         ></v-list>
 19 |         <div class="vss-footer" v-show="toggleAll || total">
 20 |           <div class="vss-footer-bg">
 21 |             <div>
 22 |               <v-select-all
 23 |                 v-if="toggleAll"
 24 |                 :items="listLeft"
 25 |                 @update-select-all="updateLeftSelectAll"
 26 |               ></v-select-all>
 27 |             </div>
 28 |             <v-total :value="dataSelected.length" v-if="total"></v-total>
 29 |           </div>
 30 |         </div>
 31 |       </div>
 32 |     </div>
 33 |     <v-separator></v-separator>
 34 |     <div class="vss-list">
 35 |       <div class="vss-inner-list">
 36 |         <v-search
 37 |           :placeholder="placeholderSearchRight"
 38 |           class="vss-list-search"
 39 |           v-if="search"
 40 |           v-model="searchR"
 41 |         ></v-search>
 42 |         <v-list
 43 |           :enable-counter="false"
 44 |           :has-children="false"
 45 |           :type="type"
 46 |           side="right"
 47 |           :items="filteredListR"
 48 |           @updated-item="updateItem"
 49 |         ></v-list>
 50 |         <div class="vss-footer" v-show="toggleAll || total">
 51 |           <div class="vss-footer-bg">
 52 |             <div>
 53 |               <v-deselect-all
 54 |                 v-if="toggleAll"
 55 |                 :items="listRight"
 56 |                 @update-deselect-all="updateRightDeselectAll"
 57 |               ></v-deselect-all>
 58 |             </div>
 59 |           </div>
 60 |         </div>
 61 |       </div>
 62 |     </div>
 63 |   </div>
 64 | </template>
 65 | 
 66 | <script>
 67 | import { normalizeText, clone, reorder, removeItemArray } from "../utils";
 68 | import selectAll from "../components/selectAll.vue";
 69 | import deselectAll from "../components/deselectAll.vue";
 70 | import search from "../components/search.vue";
 71 | import list from "../components/list.vue";
 72 | import separator from "../components/separator.vue";
 73 | import total from "../components/total.vue";
 74 | import mixin from "../mixin";
 75 | 
 76 | export default {
 77 |   name: "mirror-select-sides",
 78 |   display: "Mirror select sides",
 79 |   mixins: [mixin],
 80 |   components: {
 81 |     "v-select-all": selectAll,
 82 |     "v-deselect-all": deselectAll,
 83 |     "v-search": search,
 84 |     "v-separator": separator,
 85 |     "v-list": list,
 86 |     "v-total": total,
 87 |   },
 88 |   props: {
 89 |     list: {
 90 |       required: true,
 91 |       type: [Array, Object],
 92 |     },
 93 |     modelValue: {
 94 |       type: Array,
 95 |       default: () => [],
 96 |     },
 97 |   },
 98 |   methods: {
 99 |     updateLeftSelectAll() {
100 |       let vm = this;
101 | 
102 |       vm.listLeft.map((item) => {
103 |         if (item.visible === true && !item.disabled) {
104 |           vm.updateItem(item, {}, true);
105 |         }
106 |       });
107 |     },
108 |     updateRightDeselectAll() {
109 |       let vm = this;
110 |       this.dataSelected = [];
111 |       vm.listRight.map((item) => {
112 |         if (item.visible === true && !item.disabled) {
113 |           vm.updateItem(item, {}, false);
114 |         }
115 |       });
116 |     },
117 |     updateItem(item, parent, selected) {
118 |       let dataSelected = clone(this.dataSelected);
119 | 
120 |       if (selected) {
121 |         dataSelected.push(item.value);
122 |       } else {
123 |         dataSelected = removeItemArray(dataSelected, item.value);
124 |       }
125 |       this.dataSelected = dataSelected;
126 |     },
127 | 
128 |     prepareList() {
129 |       this.dataListOriginal = clone(this.list);
130 | 
131 |       let vm = this;
132 |       let foundSelected = [];
133 |       let dataList = vm.list.filter((item) => {
134 |         let value = item.value;
135 | 
136 |         if (vm.modelValue.indexOf(value) >= 0) {
137 |           item.selectedDefault = true;
138 |           foundSelected.push(value);
139 |         } else {
140 |           item.selectedDefault = false;
141 |         }
142 | 
143 |         return item;
144 |       });
145 | 
146 |       vm.dataSelected = foundSelected;
147 |       vm.dataList = reorder(vm, dataList);
148 |     },
149 | 
150 |     prepareListLeft() {
151 |       this.listLeft = this.dataList.filter((item) => {
152 |         item.visible = true;
153 |         return item;
154 |       });
155 |     },
156 |   },
157 |   beforeMount() {
158 |     this.prepareList();
159 |   },
160 |   mounted() {
161 |     this.prepareListLeft();
162 |   },
163 |   computed: {
164 |     filteredListL() {
165 |       let search = normalizeText(this.searchL);
166 |       let selected = this.dataSelected;
167 |       let listLeft = clone(this.listLeft);
168 | 
169 |       listLeft = listLeft.filter((item) => {
170 |         let label = normalizeText(item.label);
171 | 
172 |         // Has selected
173 |         if (selected.indexOf(item.value) >= 0) {
174 |           item.selected = true;
175 |           item.visible = false;
176 |         } else {
177 |           item.selected = false;
178 |           item.visible = true;
179 |         }
180 | 
181 |         // Has search
182 |         if (label.includes(search) && item.visible === true) {
183 |           item.visible = true;
184 |         } else {
185 |           item.visible = false;
186 |         }
187 | 
188 |         return item;
189 |       });
190 | 
191 |       // this.listLeft = listLeft;
192 | 
193 |       return listLeft;
194 |     },
195 |     filteredListR() {
196 |       let vm = this;
197 |       let search = normalizeText(vm.searchR);
198 |       let selected = this.dataSelected;
199 |       let listRight = clone(vm.listLeft);
200 | 
201 |       listRight = listRight.filter((item) => {
202 |         let label = normalizeText(item.label);
203 | 
204 |         // Has selected
205 |         if (selected.indexOf(item.value) >= 0) {
206 |           item.selected = true;
207 |           item.visible = true;
208 |         } else {
209 |           item.selected = false;
210 |           item.visible = false;
211 |         }
212 | 
213 |         // Has search
214 |         if (label.includes(search) && item.visible === true) {
215 |           item.visible = true;
216 |         } else {
217 |           item.visible = false;
218 |         }
219 | 
220 |         return item;
221 |       });
222 | 
223 |       // this.listRight = listRight;
224 | 
225 |       return listRight;
226 |     },
227 |   },
228 |   data() {
229 |     return {
230 |       dataList: [],
231 |       dataListOriginal: [],
232 |       dataSelected: [],
233 |       listLeft: [],
234 |       listRight: [],
235 |       searchL: "",
236 |       searchR: "",
237 |     };
238 |   },
239 | };
240 | </script>
241 | 


--------------------------------------------------------------------------------
/src/modules/grouped.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="vss-list">
  4 |       <div class="vss-inner-list">
  5 |         <v-search
  6 |           :placeholder="placeholderSearchLeft"
  7 |           class="vss-list-search"
  8 |           v-if="search"
  9 |           v-model="searchL"
 10 |         ></v-search>
 11 |         <v-list
 12 |           :has-children="false"
 13 |           :type="type"
 14 |           :items="filteredListL"
 15 |           @updated-item="updateItem"
 16 |         ></v-list>
 17 |         <div class="vss-footer" v-show="toggleAll || total">
 18 |           <div class="vss-footer-bg">
 19 |             <div>
 20 |               <v-select-all
 21 |                 v-if="toggleAll"
 22 |                 :items="listLeft"
 23 |                 @update-select-all="updateLeftSelectAll"
 24 |               ></v-select-all>
 25 |               <div v-if="toggleAll" class="vss-footer-separator">/</div>
 26 |               <v-deselect-all
 27 |                 v-if="toggleAll"
 28 |                 :items="listLeft"
 29 |                 @update-deselect-all="updateLeftDeselectAll"
 30 |               ></v-deselect-all>
 31 |             </div>
 32 |             <v-total
 33 |               :value="Object.keys(dataSelected).length"
 34 |               v-if="total"
 35 |             ></v-total>
 36 |           </div>
 37 |         </div>
 38 |       </div>
 39 |     </div>
 40 |     <v-separator></v-separator>
 41 |     <div class="vss-list">
 42 |       <div class="vss-inner-list">
 43 |         <v-search
 44 |           :placeholder="placeholderSearchRight"
 45 |           class="vss-list-search"
 46 |           v-if="search"
 47 |           v-model="searchR"
 48 |         ></v-search>
 49 |         <v-list
 50 |           :has-children="true"
 51 |           :type="type"
 52 |           :items="filteredListR"
 53 |           @updated-item="updateItem"
 54 |         ></v-list>
 55 |         <div class="vss-footer" v-show="toggleAll || total">
 56 |           <div class="vss-footer-bg">
 57 |             <div>
 58 |               <v-select-all
 59 |                 v-if="toggleAll"
 60 |                 :items="listRight"
 61 |                 @update-select-all="updateRightSelectAll"
 62 |               ></v-select-all>
 63 |               <div v-if="toggleAll" class="vss-footer-separator">/</div>
 64 |               <v-deselect-all
 65 |                 v-if="toggleAll"
 66 |                 :items="listRight"
 67 |                 @update-deselect-all="updateRightDeselectAll"
 68 |               ></v-deselect-all>
 69 |             </div>
 70 |             <v-total :value="totalChildrenSelected" v-if="total"></v-total>
 71 |           </div>
 72 |         </div>
 73 |       </div>
 74 |     </div>
 75 |   </div>
 76 | </template>
 77 | 
 78 | <script>
 79 | import { normalizeText, clone, reorder, removeItemArray } from "../utils";
 80 | 
 81 | import selectAll from "../components/selectAll.vue";
 82 | import deselectAll from "../components/deselectAll.vue";
 83 | import search from "../components/search.vue";
 84 | import list from "../components/list.vue";
 85 | import separator from "../components/separator.vue";
 86 | import total from "../components/total.vue";
 87 | import mixin from "../mixin";
 88 | 
 89 | export default {
 90 |   name: "grouped-select-sides",
 91 |   display: "Grouped select sides",
 92 |   mixins: [mixin],
 93 |   components: {
 94 |     "v-select-all": selectAll,
 95 |     "v-deselect-all": deselectAll,
 96 |     "v-search": search,
 97 |     "v-separator": separator,
 98 |     "v-list": list,
 99 |     "v-total": total,
100 |   },
101 |   props: {
102 |     list: {
103 |       required: true,
104 |       type: [Array, Object],
105 |     },
106 |     modelValue: {
107 |       type: Object,
108 |       default: () => ({}),
109 |     },
110 |   },
111 |   methods: {
112 |     updateLeftSelectAll() {
113 |       let vm = this;
114 | 
115 |       vm.listLeft.map((item) => {
116 |         if (item.visible === true && !item.disabled) {
117 |           vm.updateItem(item, {}, true);
118 |         }
119 |       });
120 |     },
121 |     updateLeftDeselectAll() {
122 |       let vm = this;
123 | 
124 |       vm.listLeft.map((item) => {
125 |         if (item.visible === true && !item.disabled) {
126 |           vm.updateItem(item, {}, false);
127 |         }
128 |       });
129 |     },
130 |     updateRightSelectAll() {
131 |       let vm = this;
132 | 
133 |       vm.listRight.map((item) => {
134 |         item.children.map((children) => {
135 |           if (item.selected === true && !item.disabled) {
136 |             vm.updateItem(children, item, true);
137 |           }
138 |         });
139 |       });
140 |     },
141 |     updateRightDeselectAll() {
142 |       let vm = this;
143 |       vm.listRight.map((item) => {
144 |         item.children.map((children) => {
145 |           if (item.selected === true && !item.disabled) {
146 |             vm.updateItem(children, item, false);
147 |           }
148 |         });
149 |       });
150 |     },
151 |     updateItem(item, parent, selected) {
152 |       let dataSelected = clone(this.dataSelected);
153 |       if (Object.keys(parent).length > 0) {
154 |         if (dataSelected[parent.value] === undefined) {
155 |           if (parent.visible) {
156 |             dataSelected[parent.value] = [];
157 |           }
158 |         }
159 |         if (selected) {
160 |           if (item.visible) {
161 |             if (dataSelected[parent.value].indexOf(item.value) === -1) {
162 |               dataSelected[parent.value].push(item.value);
163 |             }
164 |           }
165 |         } else {
166 |           if (item.visible) {
167 |             dataSelected[parent.value] = removeItemArray(
168 |               dataSelected[parent.value],
169 |               item.value
170 |             );
171 |           }
172 |         }
173 |       } else {
174 |         if (selected) {
175 |           if (dataSelected[item.value] === undefined) {
176 |             dataSelected[item.value] = [];
177 |           }
178 |         } else {
179 |           delete dataSelected[item.value];
180 |         }
181 |       }
182 |       this.dataSelected = dataSelected;
183 |     },
184 | 
185 |     prepareList() {
186 |       let vm = this;
187 |       let foundSelected = {};
188 |       vm.dataListOriginal = clone(vm.list);
189 |       let keyParentsSelected = Object.keys(vm.modelValue);
190 |       let dataList = vm.list.filter((item) => {
191 |         let valueParent = item.value;
192 |         let existsParentSelected = keyParentsSelected.indexOf(valueParent) >= 0;
193 | 
194 |         if (existsParentSelected) {
195 |           item.selectedDefault = true;
196 |           foundSelected[valueParent] = [];
197 |         } else {
198 |           item.selectedDefault = false;
199 |         }
200 |         if (item.children) {
201 |           item.children.filter((item) => {
202 |             let valueChildren = item.value;
203 | 
204 |             // Has selected
205 |             if (existsParentSelected) {
206 |               let existsChildrenSelected =
207 |                 vm.modelValue[valueParent].indexOf(valueChildren) >= 0;
208 | 
209 |               if (existsChildrenSelected) {
210 |                 item.selectedDefault = true;
211 |                 foundSelected[valueParent].push(valueChildren);
212 |               } else {
213 |                 item.selectedDefault = false;
214 |               }
215 |             }
216 |           });
217 |         }
218 |         return item;
219 |       });
220 |       vm.dataSelected = foundSelected;
221 |       vm.dataList = reorder(vm, dataList);
222 |     },
223 |     prepareListLeft() {
224 |       let vm = this;
225 | 
226 |       // Organiza a listLeft
227 |       this.listLeft = this.dataList.filter((item) => {
228 |         item.visible = true;
229 |         if (item.children) {
230 |           item.children = item.children.map((children) => {
231 |             if (vm.dataSelected[item.value] !== undefined) {
232 |               if (vm.dataSelected[item.value].indexOf(children.value) >= 0) {
233 |                 children.selected = true;
234 |               } else {
235 |                 children.selected = false;
236 |               }
237 |             }
238 |             return children;
239 |           });
240 |           return item.children;
241 |         }
242 |         return item;
243 |       });
244 |     },
245 |   },
246 |   beforeMount() {
247 |     this.prepareList();
248 |   },
249 |   mounted() {
250 |     this.prepareListLeft();
251 |   },
252 |   computed: {
253 |     totalChildrenSelected() {
254 |       return Object.keys(this.dataSelected)
255 |         .map((ab) => {
256 |           return this.dataSelected[ab].length;
257 |         })
258 |         .reduce((a, b) => a + b, 0);
259 |     },
260 |     filteredListL() {
261 |       let vm = this;
262 |       let search = normalizeText(this.searchL);
263 |       let selected = Object.keys(this.dataSelected);
264 | 
265 |       let listLeft = clone(this.listLeft);
266 | 
267 |       listLeft = listLeft.filter((item) => {
268 |         let label = normalizeText(item.label);
269 | 
270 |         // Has selected
271 |         if (selected.indexOf(item.value) >= 0) {
272 |           item.selected = true;
273 |         } else {
274 |           item.selected = false;
275 |         }
276 | 
277 |         // Has search
278 |         if (label.includes(search)) {
279 |           item.visible = true;
280 |         } else {
281 |           item.visible = false;
282 |         }
283 | 
284 |         if (item.children) {
285 |           item.children = item.children.map((children) => {
286 |             children.selected = false;
287 |             if (vm.dataSelected[item.value] !== undefined) {
288 |               if (vm.dataSelected[item.value].indexOf(children.value) >= 0) {
289 |                 children.selected = true;
290 |               } else {
291 |                 children.selected = false;
292 |               }
293 |             }
294 |             return children;
295 |           });
296 |           item.totalChildrenSelected = item.children.filter(function (a) {
297 |             return a.selected === true;
298 |           }).length;
299 |           return item.children;
300 |         }
301 |         return item;
302 |       });
303 | 
304 |       return listLeft;
305 |     },
306 |     filteredListR() {
307 |       let vm = this;
308 |       let search = normalizeText(vm.searchR);
309 | 
310 |       let listRight = clone(this.listLeft);
311 | 
312 |       listRight = vm.listRight.filter(function sub(item) {
313 |         if (item.children) {
314 |           item.children = item.children.map((children) => {
315 |             let label = normalizeText(children.label);
316 | 
317 |             if (label.includes(search)) {
318 |               children.visible = true;
319 |             } else {
320 |               children.visible = false;
321 |             }
322 | 
323 |             if (vm.dataSelected[item.value] !== undefined) {
324 |               if (vm.dataSelected[item.value].indexOf(children.value) >= 0) {
325 |                 children.selected = true;
326 |               } else {
327 |                 children.selected = false;
328 |               }
329 |             }
330 |             return children;
331 |           });
332 |           return item.children;
333 |         }
334 | 
335 |         return item;
336 |       });
337 | 
338 |       return listRight;
339 |     },
340 |   },
341 |   watch: {
342 |     filteredListL(newValue) {
343 |       this.listRight = newValue;
344 |     },
345 |   },
346 |   data() {
347 |     return {
348 |       dataList: [],
349 |       dataListOriginal: [],
350 |       dataSelected: {},
351 |       listLeft: [],
352 |       listRight: [],
353 |       searchL: "",
354 |       searchR: "",
355 |     };
356 |   },
357 | };
358 | </script>
359 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <p align="center">
  2 |   <img alt="Vue Select Sides" src="https://raw.githubusercontent.com/soft4ti/vue-select-sides/master/static/logo.png" />
  3 | </p>
  4 | <h2 align="center">Vue Select Sides</h2>
  5 | 
  6 | <p align="center">
  7 |   <a href="https://www.npmjs.com/package/vue-select-sides" target="_blank">
  8 |     <img alt="npm" src="https://img.shields.io/npm/v/vue-select-sides?color=%23f57f1e">
  9 |   </a>
 10 |   <a href="https://www.npmjs.com/package/vue-select-sides" target="_blank">
 11 |     <img alt="npm" src="https://img.shields.io/bundlephobia/minzip/vue-select-sides?color=%23f57f1e">
 12 |   </a>
 13 |   <a href="https://www.npmjs.com/package/vue-select-sides" target="_blank">
 14 |     <img alt="npm" src="https://img.shields.io/npm/dw/vue-select-sides?color=%23f57f1e">
 15 |   </a>
 16 | </p>
 17 | 
 18 | A component for Vue.js to select double-sided data. The customer can select one or more items and ship them from side to side. Values can be displayed grouped or ungrouped.
 19 | 
 20 | **From version v2.0.0 it is only compatible with Vue 3.**  
 21 | For Vue 2, see version v1.1.6.
 22 | 
 23 | <p align="center">
 24 |   <img alt="Demo - Vue Select Sides" src="https://raw.githubusercontent.com/soft4ti/vue-select-sides/master/static/demo.gif" />
 25 | </p>
 26 | 
 27 | ## [Live DEMO](https://soft4ti.github.io/vue-select-sides/index.html?v=20201113113945)
 28 | 
 29 | ## Installation
 30 | 
 31 | First install it using:
 32 | 
 33 | ```bash
 34 | npm install --save vue-select-sides
 35 | ```
 36 | 
 37 | or
 38 | 
 39 | ```bash
 40 | yarn add vue-select-sides
 41 | ```
 42 | 
 43 | ## Usage with Vue 3
 44 | 
 45 | ### Component Registration
 46 | 
 47 | **Local component:**
 48 | 
 49 | ```js
 50 | <script setup>
 51 | import vueSelectSides from "vue-select-sides";
 52 | </script>
 53 | 
 54 | <template>
 55 |   <vue-select-sides
 56 |     type="mirror"
 57 |     v-model="selected"
 58 |     :list="list"
 59 |   ></vue-select-sides>
 60 | </template>
 61 | ```
 62 | 
 63 | Or using Options API:
 64 | 
 65 | ```js
 66 | import vueSelectSides from "vue-select-sides";
 67 | 
 68 | export default {
 69 |   components: {
 70 |     vueSelectSides,
 71 |   },
 72 | };
 73 | ```
 74 | 
 75 | **Global component:**
 76 | 
 77 | ```javascript
 78 | // main.js
 79 | import { createApp } from "vue";
 80 | import App from "./App.vue";
 81 | import vueSelectSides from "vue-select-sides";
 82 | 
 83 | const app = createApp(App);
 84 | 
 85 | // Optional: Set global locale
 86 | app.use(vueSelectSides, {
 87 |   locale: "en_US", // Default locale
 88 | });
 89 | 
 90 | app.component("vue-select-sides", vueSelectSides);
 91 | app.mount("#app");
 92 | ```
 93 | 
 94 | **Script tag (UMD):**
 95 | 
 96 | ```html
 97 | <script src="dist/vue-select-sides.umd.js"></script>
 98 | ```
 99 | 
100 | ### Import a Theme
101 | 
102 | You have three pre-built themes available:
103 | 
104 | **Using SCSS (recommended):**
105 | 
106 | ```scss
107 | // Soft theme (default - orange accent)
108 | @use "vue-select-sides/styles/themes/soft.scss" as *;
109 | 
110 | // Dark theme
111 | @use "vue-select-sides/styles/themes/dark.scss" as *;
112 | 
113 | // Light theme
114 | @use "vue-select-sides/styles/themes/light.scss" as *;
115 | ```
116 | 
117 | **Customizing the Soft theme:**
118 | 
119 | ```scss
120 | // Override default variables
121 | @use "vue-select-sides/styles/themes/soft.scss" with (
122 |   $selected-color: #ff0000,
123 |   $default-item-background: #f0f0f0,
124 |   $border-radius-base: 0.5rem
125 | ) as *;
126 | ```
127 | 
128 | **Using CSS (pre-compiled):**
129 | 
130 | ```js
131 | // In your main.js or component
132 | import "vue-select-sides/dist/css/soft.css";
133 | // or
134 | import "vue-select-sides/dist/css/dark.css";
135 | // or
136 | import "vue-select-sides/dist/css/light.css";
137 | ```
138 | 
139 | ## Component Types
140 | 
141 | The component has support for two types: `mirror` and `grouped`.
142 | 
143 | ### Grouped
144 | 
145 | Warning: `v-model` must be of type `Object`
146 | 
147 | ```js
148 | <template>
149 |   <vue-select-sides
150 |     type="grouped"
151 |     v-model="selected"
152 |     :list="list"
153 |   ></vue-select-sides>
154 | </template>
155 | 
156 | <script setup>
157 | import { ref } from "vue";
158 | import vueSelectSides from "vue-select-sides";
159 | 
160 | const selected = ref({});
161 | const list = ref([
162 |   {
163 |     value: "sul",
164 |     label: "Sul",
165 |     disabled: false,
166 |     children: [
167 |       {
168 |         value: "santa-catarina",
169 |         label: "Santa Catarina",
170 |         disabled: false,
171 |       },
172 |       {
173 |         value: "parana",
174 |         label: "Paraná",
175 |         disabled: false,
176 |       },
177 |     ],
178 |   },
179 |   {
180 |     value: "sudeste",
181 |     label: "Sudeste",
182 |     disabled: false,
183 |     children: [
184 |       {
185 |         value: "minas-gerais",
186 |         label: "Minas Gerais",
187 |         disabled: false,
188 |       },
189 |       {
190 |         value: "sao-paulo",
191 |         label: "São Paulo",
192 |         disabled: false,
193 |       },
194 |     ],
195 |   },
196 | ]);
197 | </script>
198 | ```
199 | 
200 | ### Mirror
201 | 
202 | Warning: `v-model` must be of type `Array`
203 | 
204 | ```js
205 | <template>
206 |   <vue-select-sides
207 |     type="mirror"
208 |     v-model="selected"
209 |     :list="list"
210 |   ></vue-select-sides>
211 | </template>
212 | 
213 | <script setup>
214 | import { ref } from "vue";
215 | import vueSelectSides from "vue-select-sides";
216 | 
217 | const selected = ref([]);
218 | const list = ref([
219 |   {
220 |     value: "afghanistan",
221 |     label: "Afghanistan",
222 |     disabled: true,
223 |   },
224 |   {
225 |     value: "brazil",
226 |     label: "Brazil",
227 |   },
228 |   {
229 |     value: "fiji",
230 |     label: "Fiji",
231 |     disabled: true,
232 |   },
233 |   {
234 |     value: "ghana",
235 |     label: "Ghana",
236 |   },
237 | ]);
238 | </script>
239 | ```
240 | 
241 | ## Language/Locales
242 | 
243 | List of locales available for the plugin:
244 | 
245 | - `en_US` - [English] - Default
246 | - `pt_BR` - [Portuguese] - Contributed by @juliorosseti
247 | - `es_ES` - [Spanish] - Contributed by @etrepat
248 | - `fr_FR` - [French] - Contributed by @MajuTo
249 | - `tr_TR` - [Turkish] - Contributed by @Abdulsametileri
250 | - `pl_PL` - [Polish] - Contributed by @jzapal
251 | - `cz_CZ` - [Czech] - Contributed by @DuchVladimir
252 | - `sk_SK` - [Slovak] - Contributed by @DuchVladimir
253 | 
254 | ### Set Global Locale
255 | 
256 | ```javascript
257 | // main.js
258 | import { createApp } from "vue";
259 | import vueSelectSides from "vue-select-sides";
260 | 
261 | const app = createApp(App);
262 | 
263 | app.use(vueSelectSides, {
264 |   locale: "pt_BR",
265 | });
266 | 
267 | app.component("vue-select-sides", vueSelectSides);
268 | ```
269 | 
270 | ## Props
271 | 
272 | These are all the props you can pass to the component:
273 | 
274 | | name                          | type                | example                                                           | notes                                                                                        |
275 | | ----------------------------- | ------------------- | ----------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
276 | | v-model                       | `Array` or `Object` | `["xyz"]` or `{xyz: ["abc", "def"]}`                              | Use **Object** if type is grouped else uses **Array**                                        |
277 | | type                          | `String`            | `grouped` or `mirror`                                             |                                                                                              |
278 | | list                          | `Array`             | `[{ value: "xyz", label: "Label xyz 01", disabled: true/false }]` | You can add the `children` key to type `grouped`                                             |
279 | | search                        | `Boolean`           | `true` or `false`                                                 | To show/hide search input. Default is visible (true)                                         |
280 | | total                         | `Boolean`           | `true` or `false`                                                 | To show/hide total selected in footer. Default is visible (true)                             |
281 | | toggle-all                    | `Boolean`           | `true` or `false`                                                 | To show/hide toggle in footer. Default is visible (true)                                     |
282 | | sort-selected-up              | `Boolean`           | `true` or `false`                                                 | Show first the pre-selected. Default does not visible (false). _Available only grouped type_ |
283 | | order-by                      | `String`            | `asc` or `desc`                                                   | Show first the pre-selected. Default is natural order                                        |
284 | | ~~lang~~ (deprecated in v1.1) | ~~`String`~~        | ~~`en_US`, `pt_BR`, `es_ES` or `fr_FR`~~                          | ~~Language default. Default is en_US~~<br>Use `Set Global Locale`                            |
285 | | placeholder-search-left       | `String`            | "Yay! Search items..."                                            | Placeholder on the left search field. Default is ""                                          |
286 | | placeholder-search-right      | `String`            | "Or search children items..."                                     | Placeholder on the right search field. Default is ""                                         |
287 | 
288 | ## Available SCSS Variables for Customization
289 | 
290 | When using `@use` with the soft theme, you can override these variables:
291 | 
292 | ```scss
293 | $font-size-base: 0.9rem;
294 | $border-radius-base: 0.25rem;
295 | $selected-color: #f57f1e;
296 | $white: #fff;
297 | $gray: #e1e1e1;
298 | $dark: #242934;
299 | $default-item-background: #fafafa;
300 | $default-item-color-selected: $white;
301 | $default-item-background-selected: $selected-color;
302 | $default-text-color: $dark;
303 | $default-footer-text-color: $white;
304 | $default-footer-background: $dark;
305 | $badge-background: rgba($dark, 0.15);
306 | ```
307 | 
308 | Example:
309 | 
310 | ```scss
311 | @use "vue-select-sides/styles/themes/soft.scss" with (
312 |   $selected-color: #3498db,
313 |   $border-radius-base: 8px,
314 |   $font-size-base: 1rem
315 | ) as *;
316 | ```
317 | 
318 | ## Bugs and Feature Requests
319 | 
320 | If your problem or idea is not <a href="https://github.com/juliorosseti/vue-select-sides/issues" target="_blank">addressed</a> yet, <a href="https://github.com/juliorosseti/vue-select-sides/issues/new" target="_blank">please open a new issue</a>.
321 | 
322 | ## Sponsor / Creator
323 | 
324 | <a href="http://softdesk.com.br/" target="_blank">
325 |   <img alt="Softdesk - Sponsor" src="https://raw.githubusercontent.com/juliorosseti/vue-select-sides/master/static/softdesk.png" />
326 | </a>
327 | 
328 | ## Contribution / Development
329 | 
330 | ### Install Dependencies
331 | 
332 | ```bash
333 | yarn install
334 | ```
335 | 
336 | ### Dev Server
337 | 
338 | ```bash
339 | yarn run serve
340 | ```
341 | 
342 | ### Build
343 | 
344 | ```bash
345 | yarn run build
346 | ```
347 | 
348 | ### Run Tests
349 | 
350 | ```bash
351 | yarn test
352 | ```
353 | 
354 | ## Donate
355 | 
356 | You can help with a donation on <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=E96JA5BH6XTHE&source=url" target="_blank">Paypal</a>
357 | 
358 | ## License
359 | 
360 | Vue select sides is open-sourced software licensed under the <a href="https://opensource.org/licenses/MIT" target="_blank">MIT license</a>.
361 | 


--------------------------------------------------------------------------------
/example/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="ex">
  3 |     <header>
  4 |       <div>
  5 |         <img src="../static/logo.png" />
  6 |       </div>
  7 |       <h2>Vue select sides</h2>
  8 |       <h3>Examples</h3>
  9 |       <br />
 10 |       <a :href="repo" target="_blank">{{ repo }}</a>
 11 |     </header>
 12 |     <hr />
 13 | 
 14 |     <div :class="`the-body ${affix}`">
 15 |       <nav>
 16 |         <div>
 17 |           <ul>
 18 |             <li><strong>Mirror</strong></li>
 19 |             <ul>
 20 |               <li><a href="#mirror-basic">01) Basic</a></li>
 21 |               <li><a href="#mirror-with-selecteds">02) With selecteds</a></li>
 22 |               <li><a href="#mirror-only-list">03) Only list</a></li>
 23 |               <li><a href="#mirror-sort-list">04) Sort list</a></li>
 24 |               <li>
 25 |                 <a href="#mirror-placeholder-search">
 26 |                   05) Placeholder search
 27 |                 </a>
 28 |               </li>
 29 |               <li>
 30 |                 <a href="#mirror-with-disabled"> 06) With disabled </a>
 31 |               </li>
 32 |             </ul>
 33 |           </ul>
 34 |           <ul>
 35 |             <li><strong>Grouped</strong></li>
 36 |             <ul>
 37 |               <li><a href="#grouped-basic">01) Basic</a></li>
 38 |               <li><a href="#grouped-with-selecteds">02) With selecteds</a></li>
 39 |               <li><a href="#grouped-only-list">03) Only list</a></li>
 40 |               <li><a href="#grouped-sort-list">04) Sort list</a></li>
 41 |               <li>
 42 |                 <a href="#grouped-sort-selected-first">
 43 |                   05) Sort selected first
 44 |                 </a>
 45 |               </li>
 46 |               <li>
 47 |                 <a href="#grouped-placeholder-search">
 48 |                   06) Placeholder search
 49 |                 </a>
 50 |               </li>
 51 |               <li><a href="#grouped-with-disabled">07) With disabled</a></li>
 52 |             </ul>
 53 |           </ul>
 54 |         </div>
 55 |       </nav>
 56 |       <section>
 57 |         <div id="mirror-basic" class="ex-section">
 58 |           <div class="ex-section-title">
 59 |             <h3>01) Mirror - basic</h3>
 60 |             <a :href="`${repoExamples}mirror-basic.vue`" target="_blank">
 61 |               View source
 62 |             </a>
 63 |           </div>
 64 |           <example-mirror-01></example-mirror-01>
 65 |         </div>
 66 |         <hr />
 67 |         <div id="mirror-with-selecteds" class="ex-section">
 68 |           <div class="ex-section-title">
 69 |             <h3>02) Mirror - with selecteds</h3>
 70 |             <a
 71 |               :href="`${repoExamples}mirror-with-selecteds.vue`"
 72 |               target="_blank"
 73 |             >
 74 |               View source
 75 |             </a>
 76 |           </div>
 77 |           <example-mirror-02></example-mirror-02>
 78 |         </div>
 79 |         <hr />
 80 | 
 81 |         <div id="mirror-only-list" class="ex-section">
 82 |           <div class="ex-section-title">
 83 |             <h3>03) Mirror - only list (search and footer removed)</h3>
 84 |             <a :href="`${repoExamples}mirror-only-list.vue`" target="_blank">
 85 |               View source
 86 |             </a>
 87 |           </div>
 88 |           <example-mirror-03></example-mirror-03>
 89 |         </div>
 90 |         <hr />
 91 | 
 92 |         <div id="mirror-sort-list" class="ex-section">
 93 |           <div class="ex-section-title">
 94 |             <h3>04) Mirror - sort list</h3>
 95 |             <a :href="`${repoExamples}mirror-sort-list.vue`" target="_blank">
 96 |               View source
 97 |             </a>
 98 |           </div>
 99 |           <example-mirror-04></example-mirror-04>
100 |         </div>
101 |         <hr />
102 | 
103 |         <div id="mirror-placeholder-search" class="ex-section">
104 |           <div class="ex-section-title">
105 |             <h3>05) Mirror - placeholder search</h3>
106 |             <a
107 |               :href="`${repoExamples}mirror-placeholder-search.vue`"
108 |               target="_blank"
109 |             >
110 |               View source
111 |             </a>
112 |           </div>
113 |           <example-mirror-05></example-mirror-05>
114 |         </div>
115 |         <hr />
116 | 
117 |         <div id="mirror-with-disabled" class="ex-section">
118 |           <div class="ex-section-title">
119 |             <h3>06) Mirror - with disabled</h3>
120 |             <a
121 |               :href="`${repoExamples}mirror-with-disabled.vue`"
122 |               target="_blank"
123 |             >
124 |               View source
125 |             </a>
126 |           </div>
127 |           <example-mirror-06></example-mirror-06>
128 |         </div>
129 |         <hr />
130 | 
131 |         <div id="grouped-basic" class="ex-section">
132 |           <div class="ex-section-title">
133 |             <h3>01) Grouped - basic</h3>
134 |             <a :href="`${repoExamples}grouped-basic.vue`" target="_blank">
135 |               View source
136 |             </a>
137 |           </div>
138 |           <example-grouped-01></example-grouped-01>
139 |         </div>
140 |         <hr />
141 | 
142 |         <div id="grouped-with-selecteds" class="ex-section">
143 |           <div class="ex-section-title">
144 |             <h3>02) Grouped - with selecteds</h3>
145 |             <a
146 |               :href="`${repoExamples}grouped-with-selecteds.vue`"
147 |               target="_blank"
148 |             >
149 |               View source
150 |             </a>
151 |           </div>
152 |           <example-grouped-02></example-grouped-02>
153 |         </div>
154 |         <hr />
155 | 
156 |         <div id="grouped-only-list" class="ex-section">
157 |           <div class="ex-section-title">
158 |             <h3>03) Grouped - only list (search and footer removed)</h3>
159 |             <a :href="`${repoExamples}grouped-only-list.vue`" target="_blank">
160 |               View source
161 |             </a>
162 |           </div>
163 |           <example-grouped-03></example-grouped-03>
164 |         </div>
165 |         <hr />
166 | 
167 |         <div id="grouped-sort-list" class="ex-section">
168 |           <div class="ex-section-title">
169 |             <h3>04) Grouped - sort list</h3>
170 |             <a :href="`${repoExamples}grouped-sort-list.vue`" target="_blank">
171 |               View source
172 |             </a>
173 |           </div>
174 |           <example-grouped-04></example-grouped-04>
175 |         </div>
176 |         <hr />
177 | 
178 |         <div id="grouped-sort-selected-first" class="ex-section">
179 |           <div class="ex-section-title">
180 |             <h3>05) Grouped - sort selected to top list</h3>
181 |             <a
182 |               :href="`${repoExamples}grouped-sort-selected-first.vue`"
183 |               target="_blank"
184 |             >
185 |               View source
186 |             </a>
187 |           </div>
188 |           <example-grouped-05></example-grouped-05>
189 |         </div>
190 |         <hr />
191 | 
192 |         <div id="grouped-placeholder-search" class="ex-section">
193 |           <div class="ex-section-title">
194 |             <h3>06) Grouped - placeholder search</h3>
195 |             <a
196 |               :href="`${repoExamples}grouped-placeholder-search.vue`"
197 |               target="_blank"
198 |             >
199 |               View source
200 |             </a>
201 |           </div>
202 |           <example-grouped-06></example-grouped-06>
203 |         </div>
204 |         <hr />
205 | 
206 |         <div id="grouped-with-disabled" class="ex-section">
207 |           <div class="ex-section-title">
208 |             <h3>07) Grouped - placeholder search</h3>
209 |             <a
210 |               :href="`${repoExamples}grouped-with-disabled.vue`"
211 |               target="_blank"
212 |             >
213 |               View source
214 |             </a>
215 |           </div>
216 |           <example-grouped-07></example-grouped-07>
217 |         </div>
218 |       </section>
219 |     </div>
220 |   </div>
221 | </template>
222 | 
223 | <script>
224 | import exampleMirror01 from "./components/mirror-basic.vue";
225 | import exampleMirror02 from "./components/mirror-with-selecteds.vue";
226 | import exampleMirror03 from "./components/mirror-only-list.vue";
227 | import exampleMirror04 from "./components/mirror-sort-list.vue";
228 | import exampleMirror05 from "./components/mirror-placeholder-search.vue";
229 | import exampleMirror06 from "./components/mirror-with-disabled.vue";
230 | 
231 | import exampleGrouped01 from "./components/grouped-basic.vue";
232 | import exampleGrouped02 from "./components/grouped-with-selecteds.vue";
233 | import exampleGrouped03 from "./components/grouped-only-list.vue";
234 | import exampleGrouped04 from "./components/grouped-sort-list.vue";
235 | import exampleGrouped05 from "./components/grouped-sort-selected-first.vue";
236 | import exampleGrouped06 from "./components/grouped-placeholder-search.vue";
237 | import exampleGrouped07 from "./components/grouped-with-disabled.vue";
238 | 
239 | import { repository } from "../package.json";
240 | 
241 | const repo = repository.url;
242 | const repoExamples = repo + `/blob/master/example/components/`;
243 | 
244 | export default {
245 |   components: {
246 |     exampleMirror01,
247 |     exampleMirror02,
248 |     exampleMirror03,
249 |     exampleMirror04,
250 |     exampleMirror05,
251 |     exampleMirror06,
252 |     exampleGrouped01,
253 |     exampleGrouped02,
254 |     exampleGrouped03,
255 |     exampleGrouped04,
256 |     exampleGrouped05,
257 |     exampleGrouped06,
258 |     exampleGrouped07,
259 |   },
260 |   methods: {
261 |     scrolling() {
262 |       if (window.scrollY >= 275) {
263 |         this.affix = "affixed";
264 |       } else {
265 |         this.affix = "";
266 |       }
267 |     },
268 |   },
269 |   data() {
270 |     return {
271 |       affix: "",
272 |       repoExamples: repoExamples,
273 |       repo: repo,
274 |     };
275 |   },
276 |   mounted() {
277 |     window.addEventListener("scroll", this.scrolling);
278 |   },
279 | };
280 | </script>
281 | 
282 | <style lang="scss">
283 | @use "../styles/themes/soft.scss" as *;
284 | 
285 | $default-height: 300px;
286 | 
287 | .vss {
288 |   height: $default-height;
289 | }
290 | 
291 | // Layout example
292 | header {
293 |   margin: 30px 0px;
294 |   width: 100%;
295 |   display: flex;
296 |   align-items: center;
297 |   flex-direction: column;
298 |   img {
299 |     max-height: 120px;
300 |     margin-bottom: 10px;
301 |   }
302 | 
303 |   h2,
304 |   h3 {
305 |     margin: 5px;
306 |   }
307 | 
308 |   a {
309 |     color: $selected-color;
310 |     text-decoration: none;
311 |   }
312 | }
313 | 
314 | .the-body {
315 |   width: 80%;
316 |   margin: 0 auto;
317 |   display: flex;
318 | 
319 |   &.affixed {
320 |     nav {
321 |       margin-top: 0px;
322 |       position: fixed;
323 |       top: 30px;
324 |     }
325 | 
326 |     section {
327 |       margin-left: 15rem;
328 |     }
329 |   }
330 | 
331 |   nav {
332 |     margin-top: 30px;
333 |     background-color: $default-item-background;
334 |     border-radius: $border-radius-base;
335 |     width: 15rem;
336 |     height: calc(100vh - 60px);
337 |     overflow-y: auto;
338 | 
339 |     > div {
340 |       padding: 25px 30px;
341 |     }
342 | 
343 |     ul {
344 |       list-style: none;
345 |       margin: 0px 0px 15px;
346 |       padding: 0px;
347 |       li {
348 |         line-height: 1.5;
349 | 
350 |         a {
351 |           text-decoration: none;
352 |           color: $dark;
353 | 
354 |           &:hover {
355 |             color: $selected-color;
356 |           }
357 |         }
358 |       }
359 |       > ul {
360 |         padding-left: 15px;
361 |       }
362 |     }
363 |   }
364 | 
365 |   section {
366 |     padding-left: 2rem;
367 |     width: 74%;
368 |   }
369 | }
370 | 
371 | .ex {
372 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
373 |   -webkit-font-smoothing: antialiased;
374 |   -moz-osx-font-smoothing: grayscale;
375 | 
376 |   hr {
377 |     border-style: solid;
378 |     border-color: transparent;
379 |     border-top-color: #f1f1f1;
380 |     margin: 35px 0px 0px;
381 |   }
382 | 
383 |   .ex-section {
384 |     // width: 70%;
385 |     // margin: 0 auto;
386 |     padding-top: 30px;
387 | 
388 |     .ex-section-title {
389 |       display: flex;
390 |       align-items: center;
391 |       justify-content: space-between;
392 | 
393 |       a {
394 |         text-decoration: none;
395 |         background-color: $selected-color;
396 |         padding: 10px;
397 |         border-radius: $border-radius-base;
398 |         color: $white;
399 |         font-size: $font-size-base;
400 |       }
401 |     }
402 | 
403 |     .ex-lib {
404 |       display: flex;
405 |       .vss {
406 |         width: 65%;
407 |       }
408 |       .ex-result {
409 |         margin-left: 2.5rem;
410 |         width: 35%;
411 | 
412 |         h4 {
413 |           margin: 0px;
414 |         }
415 | 
416 |         pre {
417 |           height: $default-height - 50px;
418 |           overflow-y: auto;
419 |           background: #f1f1f1;
420 |           padding: 10px;
421 |           border-radius: 5px;
422 |         }
423 |       }
424 |     }
425 |   }
426 | }
427 | </style>
428 | 


--------------------------------------------------------------------------------
/tests/sort-by.test.js:
--------------------------------------------------------------------------------
  1 | import { describe, it, expect } from "vitest";
  2 | import sortBy from "../src/sort-by"; // ajuste caso o path real seja outro
  3 | 
  4 | describe("Sort()", () => {
  5 |   it("returns a function", () => {
  6 |     expect(typeof sortBy()).toBe("function");
  7 |   });
  8 | });
  9 | 
 10 | describe("Sort(prop)", () => {
 11 |   it("sorts an array of objects using given property name", () => {
 12 |     const array = [
 13 |       { x: 4, y: 1, z: { a: 2 } },
 14 |       { x: 3, y: 1, z: { a: 3 } },
 15 |       { x: 2, y: 3, z: { a: 3 } },
 16 |       { x: 1, y: 2, z: { a: 1 } },
 17 |     ];
 18 | 
 19 |     array.sort(sortBy("x"));
 20 | 
 21 |     expect(array[0]).toEqual({ x: 1, y: 2, z: { a: 1 } });
 22 |     expect(array[3]).toEqual({ x: 4, y: 1, z: { a: 2 } });
 23 |   });
 24 | 
 25 |   it("sorts case-insensitively by applying a function", () => {
 26 |     const array = [
 27 |       { name: "Hummingbird" },
 28 |       { name: "swallow" },
 29 |       { name: "Finch" },
 30 |       { name: "Sparrow" },
 31 |       { name: "cuckoos" },
 32 |     ];
 33 | 
 34 |     array.sort(sortBy("name"));
 35 | 
 36 |     expect(array.map((a) => a.name)).toEqual([
 37 |       "Finch",
 38 |       "Hummingbird",
 39 |       "Sparrow",
 40 |       "cuckoos",
 41 |       "swallow",
 42 |     ]);
 43 | 
 44 |     array.sort(
 45 |       sortBy("name", (key, value) => {
 46 |         return key === "name" ? value.toLowerCase() : value;
 47 |       })
 48 |     );
 49 | 
 50 |     expect(array.map((a) => a.name)).toEqual([
 51 |       "cuckoos",
 52 |       "Finch",
 53 |       "Hummingbird",
 54 |       "Sparrow",
 55 |       "swallow",
 56 |     ]);
 57 |   });
 58 | });
 59 | 
 60 | describe("Sort(prop, prop)", () => {
 61 |   it("sorts using multiple properties", () => {
 62 |     const array = [
 63 |       { x: 4, y: 1 },
 64 |       { x: 3, y: 1 },
 65 |       { x: 2, y: 3 },
 66 |       { x: 1, y: 2 },
 67 |     ];
 68 | 
 69 |     array.sort(sortBy("y", "x"));
 70 | 
 71 |     expect(array[0]).toEqual({ x: 3, y: 1 });
 72 |     expect(array[3]).toEqual({ x: 2, y: 3 });
 73 |   });
 74 | });
 75 | 
 76 | describe("Sort(-prop)", () => {
 77 |   it("reverses sort order", () => {
 78 |     const array = [
 79 |       { x: 4, y: 1 },
 80 |       { x: 3, y: 1 },
 81 |       { x: 2, y: 3 },
 82 |       { x: 1, y: 2 },
 83 |     ];
 84 | 
 85 |     array.sort(sortBy("-y", "x"));
 86 | 
 87 |     expect(array[0]).toEqual({ x: 2, y: 3 });
 88 |     expect(array[3]).toEqual({ x: 4, y: 1 });
 89 |   });
 90 | });
 91 | 
 92 | describe("Sort(prop.prop)", () => {
 93 |   it("sorts nested properties", () => {
 94 |     const array = [
 95 |       { x: 4, y: 1, z: { a: 2 } },
 96 |       { x: 3, y: 1, z: { a: 3 } },
 97 |       { x: 2, y: 3, z: { a: 3 } },
 98 |       { x: 1, y: 2, z: { a: 1 } },
 99 |     ];
100 | 
101 |     array.sort(sortBy("z.a", "y"));
102 | 
103 |     expect(array[0]).toEqual({ x: 1, y: 2, z: { a: 1 } });
104 |     expect(array[3]).toEqual({ x: 2, y: 3, z: { a: 3 } });
105 |   });
106 | });
107 | 
108 | describe("Sort(-prop.prop)", () => {
109 |   it("reverse sorts nested properties", () => {
110 |     const array = [
111 |       { x: 4, y: 1, z: { a: 2 } },
112 |       { x: 3, y: 1, z: { a: 3 } },
113 |       { x: 2, y: 3, z: { a: 3 } },
114 |       { x: 1, y: 2, z: { a: 1 } },
115 |     ];
116 | 
117 |     array.sort(sortBy("-z.a", "y"));
118 | 
119 |     expect(array[0]).toEqual({ x: 3, y: 1, z: { a: 3 } });
120 |     expect(array[3]).toEqual({ x: 1, y: 2, z: { a: 1 } });
121 |   });
122 | });
123 | 
124 | describe("Edge Cases", () => {
125 |   it("handles empty arrays", () => {
126 |     const array = [];
127 |     array.sort(sortBy("x"));
128 |     expect(array).toEqual([]);
129 |   });
130 | 
131 |   it("handles arrays with one element", () => {
132 |     const array = [{ x: 1 }];
133 |     array.sort(sortBy("x"));
134 |     expect(array).toEqual([{ x: 1 }]);
135 |   });
136 | 
137 |   it("handles objects with all equal values", () => {
138 |     const array = [
139 |       { x: 1, id: "a" },
140 |       { x: 1, id: "b" },
141 |       { x: 1, id: "c" },
142 |     ];
143 | 
144 |     array.sort(sortBy("x"));
145 | 
146 |     // Deve manter a ordem original (stable sort)
147 |     expect(array[0].id).toBe("a");
148 |     expect(array[1].id).toBe("b");
149 |     expect(array[2].id).toBe("c");
150 |   });
151 | });
152 | 
153 | describe("Undefined and Null Values", () => {
154 |   it("handles undefined values in properties", () => {
155 |     const array = [
156 |       { x: 3, y: 2 },
157 |       { x: 1 }, // y é undefined
158 |       { x: 2, y: 1 },
159 |       { x: 4, y: 3 },
160 |     ];
161 | 
162 |     array.sort(sortBy("y", "x"));
163 | 
164 |     // undefined deve ser tratado como "maior" e ir pro final
165 |     expect(array[0]).toEqual({ x: 2, y: 1 });
166 |     expect(array[1]).toEqual({ x: 3, y: 2 });
167 |     expect(array[2]).toEqual({ x: 4, y: 3 });
168 |     expect(array[3]).toEqual({ x: 1 }); // undefined vai pro final
169 |   });
170 | 
171 |   it("handles null values in properties", () => {
172 |     const array = [
173 |       { x: 3, y: 2 },
174 |       { x: 1, y: null },
175 |       { x: 2, y: 1 },
176 |       { x: 4, y: 3 },
177 |     ];
178 | 
179 |     array.sort(sortBy("y", "x"));
180 | 
181 |     // null deve ser tratado como menor que qualquer número
182 |     expect(array[0]).toEqual({ x: 1, y: null });
183 |     expect(array[1]).toEqual({ x: 2, y: 1 });
184 |     expect(array[2]).toEqual({ x: 3, y: 2 });
185 |     expect(array[3]).toEqual({ x: 4, y: 3 });
186 |   });
187 | 
188 |   it("handles mix of null, undefined and values", () => {
189 |     const array = [{ x: 3 }, { x: 1, y: null }, { x: 2, y: 5 }, { x: 4 }];
190 | 
191 |     array.sort(sortBy("y", "x"));
192 | 
193 |     expect(array[0]).toEqual({ x: 1, y: null }); // null primeiro
194 |     expect(array[1]).toEqual({ x: 2, y: 5 }); // valor real
195 |     // undefined vai pro final
196 |     expect(array[2].x).toBe(3);
197 |     expect(array[3].x).toBe(4);
198 |   });
199 | });
200 | 
201 | describe("Mixed Data Types", () => {
202 |   it("handles mix of numbers and strings", () => {
203 |     const array = [{ x: "10" }, { x: 2 }, { x: "3" }, { x: 1 }];
204 | 
205 |     array.sort(sortBy("x"));
206 | 
207 |     // Comparação lexicográfica: 1 < 2 < "10" < "3"
208 |     expect(array[0]).toEqual({ x: 1 });
209 |     expect(array[1]).toEqual({ x: 2 });
210 |     expect(array[2]).toEqual({ x: "10" });
211 |     expect(array[3]).toEqual({ x: "3" });
212 |   });
213 | 
214 |   it("handles boolean values", () => {
215 |     const array = [
216 |       { x: true, name: "A" },
217 |       { x: false, name: "B" },
218 |       { x: true, name: "C" },
219 |       { x: false, name: "D" },
220 |     ];
221 | 
222 |     array.sort(sortBy("x", "name"));
223 | 
224 |     expect(array[0].name).toBe("B"); // false < true
225 |     expect(array[1].name).toBe("D");
226 |     expect(array[2].name).toBe("A");
227 |     expect(array[3].name).toBe("C");
228 |   });
229 | 
230 |   it("handles Date objects", () => {
231 |     const array = [
232 |       { date: new Date("2024-03-15") },
233 |       { date: new Date("2024-01-10") },
234 |       { date: new Date("2024-12-20") },
235 |     ];
236 | 
237 |     array.sort(sortBy("date"));
238 | 
239 |     expect(array[0].date.getMonth()).toBe(0); // Janeiro
240 |     expect(array[1].date.getMonth()).toBe(2); // Março
241 |     expect(array[2].date.getMonth()).toBe(11); // Dezembro
242 |   });
243 | });
244 | 
245 | describe("Deep Nested Properties", () => {
246 |   it("sorts deeply nested properties (3+ levels)", () => {
247 |     const array = [
248 |       { a: { b: { c: { d: 4 } } } },
249 |       { a: { b: { c: { d: 1 } } } },
250 |       { a: { b: { c: { d: 3 } } } },
251 |       { a: { b: { c: { d: 2 } } } },
252 |     ];
253 | 
254 |     array.sort(sortBy("a.b.c.d"));
255 | 
256 |     expect(array[0].a.b.c.d).toBe(1);
257 |     expect(array[3].a.b.c.d).toBe(4);
258 |   });
259 | 
260 |   it("handles missing intermediate nested properties", () => {
261 |     const array = [
262 |       { a: { b: { c: 3 } } },
263 |       { a: { b: null } }, // b existe mas é null
264 |       { a: {} }, // b não existe
265 |       { a: { b: { c: 1 } } },
266 |     ];
267 | 
268 |     array.sort(sortBy("a.b.c"));
269 | 
270 |     // Valores válidos devem vir primeiro
271 |     expect(array[0].a.b.c).toBe(1);
272 |     expect(array[1].a.b.c).toBe(3);
273 |   });
274 | });
275 | 
276 | describe("Multiple Properties with Mixed Order", () => {
277 |   it("sorts with alternating asc/desc orders", () => {
278 |     const array = [
279 |       { x: 1, y: 1, z: 1 },
280 |       { x: 2, y: 1, z: 2 },
281 |       { x: 1, y: 2, z: 1 },
282 |       { x: 2, y: 2, z: 2 },
283 |     ];
284 | 
285 |     array.sort(sortBy("-x", "y", "-z"));
286 | 
287 |     expect(array[0]).toEqual({ x: 2, y: 1, z: 2 }); // x=2(desc), y=1(asc), z=2(desc)
288 |     expect(array[1]).toEqual({ x: 2, y: 2, z: 2 }); // x=2(desc), y=2(asc), z=2(desc)
289 |     expect(array[2]).toEqual({ x: 1, y: 1, z: 1 });
290 |     expect(array[3]).toEqual({ x: 1, y: 2, z: 1 });
291 |   });
292 | });
293 | 
294 | describe("Map Function Advanced Cases", () => {
295 |   it("applies map function to multiple properties", () => {
296 |     const array = [
297 |       { first: "John", last: "DOE" },
298 |       { first: "jane", last: "Smith" },
299 |       { first: "Bob", last: "anderson" },
300 |     ];
301 | 
302 |     array.sort(
303 |       sortBy("last", "first", (key, value) => {
304 |         return value.toLowerCase();
305 |       })
306 |     );
307 | 
308 |     expect(array[0].last).toBe("anderson");
309 |     expect(array[1].last).toBe("DOE");
310 |     expect(array[2].last).toBe("Smith");
311 |   });
312 | 
313 |   it("map function with nested properties", () => {
314 |     const array = [
315 |       { user: { name: "CHARLIE" } },
316 |       { user: { name: "alice" } },
317 |       { user: { name: "Bob" } },
318 |     ];
319 | 
320 |     array.sort(
321 |       sortBy("user.name", (key, value) => {
322 |         return key === "user.name" ? value.toLowerCase() : value;
323 |       })
324 |     );
325 | 
326 |     expect(array[0].user.name).toBe("alice");
327 |     expect(array[1].user.name).toBe("Bob");
328 |     expect(array[2].user.name).toBe("CHARLIE");
329 |   });
330 | 
331 |   it("map function with numeric string conversion", () => {
332 |     const array = [{ version: "10.2" }, { version: "2.1" }, { version: "1.9" }];
333 | 
334 |     // Ordena como strings (lexicográfico)
335 |     const copy1 = [...array];
336 |     copy1.sort(sortBy("version"));
337 |     expect(copy1[0].version).toBe("1.9");
338 |     expect(copy1[1].version).toBe("10.2");
339 |     expect(copy1[2].version).toBe("2.1");
340 | 
341 |     // Ordena como números (com map function)
342 |     const copy2 = [...array];
343 |     copy2.sort(
344 |       sortBy("version", (key, value) => {
345 |         return parseFloat(value);
346 |       })
347 |     );
348 |     expect(copy2[0].version).toBe("1.9");
349 |     expect(copy2[1].version).toBe("2.1");
350 |     expect(copy2[2].version).toBe("10.2");
351 |   });
352 | });
353 | 
354 | describe("Special Characters and Unicode", () => {
355 |   it("sorts strings with accents and special characters", () => {
356 |     const array = [
357 |       { name: "Östberg" },
358 |       { name: "Ødegård" },
359 |       { name: "Öberg" },
360 |       { name: "Olsen" },
361 |     ];
362 | 
363 |     array.sort(sortBy("name"));
364 | 
365 |     // Ordem Unicode/lexicográfica
366 |     expect(array[0].name).toBe("Olsen");
367 |     // Os outros dependem da implementação Unicode
368 |   });
369 | 
370 |   it("sorts with emojis", () => {
371 |     const array = [{ icon: "🦊" }, { icon: "🐱" }, { icon: "🐶" }];
372 | 
373 |     // Não deve dar erro
374 |     expect(() => {
375 |       array.sort(sortBy("icon"));
376 |     }).not.toThrow();
377 |   });
378 | });
379 | 
380 | describe("Performance and Stability", () => {
381 |   it("handles large arrays efficiently", () => {
382 |     const array = Array.from({ length: 1000 }, (_, i) => ({
383 |       x: Math.floor(Math.random() * 100),
384 |       y: i,
385 |     }));
386 | 
387 |     const start = Date.now();
388 |     array.sort(sortBy("x", "y"));
389 |     const duration = Date.now() - start;
390 | 
391 |     // Deve completar em tempo razoável (< 100ms)
392 |     expect(duration).toBeLessThan(100);
393 | 
394 |     // Verifica que está ordenado
395 |     for (let i = 1; i < array.length; i++) {
396 |       expect(array[i].x).toBeGreaterThanOrEqual(array[i - 1].x);
397 |     }
398 |   });
399 | 
400 |   it("maintains stable sort for equal values", () => {
401 |     const array = [
402 |       { x: 1, id: 0 },
403 |       { x: 1, id: 1 },
404 |       { x: 1, id: 2 },
405 |       { x: 1, id: 3 },
406 |       { x: 1, id: 4 },
407 |     ];
408 | 
409 |     array.sort(sortBy("x"));
410 | 
411 |     // JavaScript Array.sort é stable desde ES2019
412 |     expect(array.map((item) => item.id)).toEqual([0, 1, 2, 3, 4]);
413 |   });
414 | });
415 | 
416 | describe("Edge Cases with sortBy() without arguments", () => {
417 |   it("returns a valid comparator even without arguments", () => {
418 |     const array = [3, 1, 2];
419 |     const comparator = sortBy();
420 | 
421 |     expect(typeof comparator).toBe("function");
422 | 
423 |     // Deve retornar 0 sempre (todos iguais)
424 |     expect(comparator({ x: 1 }, { x: 2 })).toBe(0);
425 |   });
426 | });
427 | 


--------------------------------------------------------------------------------
/example/components/mirror-basic.vue:
--------------------------------------------------------------------------------
   1 | <template>
   2 |   <div class="ex-lib">
   3 |     <vue-select-sides
   4 |       type="mirror"
   5 |       v-model="selected"
   6 |       :list="list"
   7 |     ></vue-select-sides>
   8 |     <div class="ex-result">
   9 |       <h4>Result</h4>
  10 |       <pre>{{ selected }}</pre>
  11 |     </div>
  12 |   </div>
  13 | </template>
  14 | 
  15 | <script>
  16 | import { defineComponent } from "vue";
  17 | 
  18 | export default defineComponent({
  19 |   data() {
  20 |     return {
  21 |       selected: [],
  22 |       list: [
  23 |         {
  24 |           value: "afghanistan",
  25 |           label: "Afghanistan",
  26 |         },
  27 |         {
  28 |           value: "akrotiri",
  29 |           label: "Akrotiri",
  30 |         },
  31 |         {
  32 |           value: "albania",
  33 |           label: "Albania",
  34 |         },
  35 |         {
  36 |           value: "algeria",
  37 |           label: "Algeria",
  38 |         },
  39 |         {
  40 |           value: "american-samoa",
  41 |           label: "American Samoa",
  42 |         },
  43 |         {
  44 |           value: "andorra",
  45 |           label: "Andorra",
  46 |         },
  47 |         {
  48 |           value: "angola",
  49 |           label: "Angola",
  50 |         },
  51 |         {
  52 |           value: "anguilla",
  53 |           label: "Anguilla",
  54 |         },
  55 |         {
  56 |           value: "antarctica",
  57 |           label: "Antarctica",
  58 |         },
  59 |         {
  60 |           value: "antigua-and-barbuda",
  61 |           label: "Antigua and Barbuda",
  62 |         },
  63 |         {
  64 |           value: "argentina",
  65 |           label: "Argentina",
  66 |         },
  67 |         {
  68 |           value: "armenia",
  69 |           label: "Armenia",
  70 |         },
  71 |         {
  72 |           value: "aruba",
  73 |           label: "Aruba",
  74 |         },
  75 |         {
  76 |           value: "ashmore-and-cartier-islands",
  77 |           label: "Ashmore and Cartier Islands",
  78 |         },
  79 |         {
  80 |           value: "australia",
  81 |           label: "Australia",
  82 |         },
  83 |         {
  84 |           value: "austria",
  85 |           label: "Austria",
  86 |         },
  87 |         {
  88 |           value: "azerbaijan",
  89 |           label: "Azerbaijan",
  90 |         },
  91 |         {
  92 |           value: "bahamas-the",
  93 |           label: "Bahamas, The",
  94 |         },
  95 |         {
  96 |           value: "bahrain",
  97 |           label: "Bahrain",
  98 |         },
  99 |         {
 100 |           value: "bangladesh",
 101 |           label: "Bangladesh",
 102 |         },
 103 |         {
 104 |           value: "barbados",
 105 |           label: "Barbados",
 106 |         },
 107 |         {
 108 |           value: "bassas-da-india",
 109 |           label: "Bassas da India",
 110 |         },
 111 |         {
 112 |           value: "belarus",
 113 |           label: "Belarus",
 114 |         },
 115 |         {
 116 |           value: "belgium",
 117 |           label: "Belgium",
 118 |         },
 119 |         {
 120 |           value: "belize",
 121 |           label: "Belize",
 122 |         },
 123 |         {
 124 |           value: "benin",
 125 |           label: "Benin",
 126 |         },
 127 |         {
 128 |           value: "bermuda",
 129 |           label: "Bermuda",
 130 |         },
 131 |         {
 132 |           value: "bhutan",
 133 |           label: "Bhutan",
 134 |         },
 135 |         {
 136 |           value: "bolivia",
 137 |           label: "Bolivia",
 138 |         },
 139 |         {
 140 |           value: "bosnia-and-herzegovina",
 141 |           label: "Bosnia and Herzegovina",
 142 |         },
 143 |         {
 144 |           value: "botswana",
 145 |           label: "Botswana",
 146 |         },
 147 |         {
 148 |           value: "bouvet-island",
 149 |           label: "Bouvet Island",
 150 |         },
 151 |         {
 152 |           value: "brazil",
 153 |           label: "Brazil",
 154 |         },
 155 |         {
 156 |           value: "british-indian-ocean-territory",
 157 |           label: "British Indian Ocean Territory",
 158 |         },
 159 |         {
 160 |           value: "british-virgin-islands",
 161 |           label: "British Virgin Islands",
 162 |         },
 163 |         {
 164 |           value: "brunei",
 165 |           label: "Brunei",
 166 |         },
 167 |         {
 168 |           value: "bulgaria",
 169 |           label: "Bulgaria",
 170 |         },
 171 |         {
 172 |           value: "burkina-faso",
 173 |           label: "Burkina Faso",
 174 |         },
 175 |         {
 176 |           value: "burma",
 177 |           label: "Burma",
 178 |         },
 179 |         {
 180 |           value: "burundi",
 181 |           label: "Burundi",
 182 |         },
 183 |         {
 184 |           value: "cambodia",
 185 |           label: "Cambodia",
 186 |         },
 187 |         {
 188 |           value: "cameroon",
 189 |           label: "Cameroon",
 190 |         },
 191 |         {
 192 |           value: "canada",
 193 |           label: "Canada",
 194 |         },
 195 |         {
 196 |           value: "cape-verde",
 197 |           label: "Cape Verde",
 198 |         },
 199 |         {
 200 |           value: "cayman-islands",
 201 |           label: "Cayman Islands",
 202 |         },
 203 |         {
 204 |           value: "central-african-republic",
 205 |           label: "Central African Republic",
 206 |         },
 207 |         {
 208 |           value: "chad",
 209 |           label: "Chad",
 210 |         },
 211 |         {
 212 |           value: "chile",
 213 |           label: "Chile",
 214 |         },
 215 |         {
 216 |           value: "china",
 217 |           label: "China",
 218 |         },
 219 |         {
 220 |           value: "christmas-island",
 221 |           label: "Christmas Island",
 222 |         },
 223 |         {
 224 |           value: "clipperton-island",
 225 |           label: "Clipperton Island",
 226 |         },
 227 |         {
 228 |           value: "cocos-(keeling)-islands",
 229 |           label: "Cocos (Keeling) Islands",
 230 |         },
 231 |         {
 232 |           value: "colombia",
 233 |           label: "Colombia",
 234 |         },
 235 |         {
 236 |           value: "comoros",
 237 |           label: "Comoros",
 238 |         },
 239 |         {
 240 |           value: "congo-democratic-republic-of-the",
 241 |           label: "Congo, Democratic Republic of the",
 242 |         },
 243 |         {
 244 |           value: "congo-republic-of-the",
 245 |           label: "Congo, Republic of the",
 246 |         },
 247 |         {
 248 |           value: "cook-islands",
 249 |           label: "Cook Islands",
 250 |         },
 251 |         {
 252 |           value: "coral-sea-islands",
 253 |           label: "Coral Sea Islands",
 254 |         },
 255 |         {
 256 |           value: "costa-rica",
 257 |           label: "Costa Rica",
 258 |         },
 259 |         {
 260 |           value: "cote-d'ivoire",
 261 |           label: "Cote d'Ivoire",
 262 |         },
 263 |         {
 264 |           value: "croatia",
 265 |           label: "Croatia",
 266 |         },
 267 |         {
 268 |           value: "cuba",
 269 |           label: "Cuba",
 270 |         },
 271 |         {
 272 |           value: "cyprus",
 273 |           label: "Cyprus",
 274 |         },
 275 |         {
 276 |           value: "czech-republic",
 277 |           label: "Czech Republic",
 278 |         },
 279 |         {
 280 |           value: "denmark",
 281 |           label: "Denmark",
 282 |         },
 283 |         {
 284 |           value: "dhekelia",
 285 |           label: "Dhekelia",
 286 |         },
 287 |         {
 288 |           value: "djibouti",
 289 |           label: "Djibouti",
 290 |         },
 291 |         {
 292 |           value: "dominica",
 293 |           label: "Dominica",
 294 |         },
 295 |         {
 296 |           value: "dominican-republic",
 297 |           label: "Dominican Republic",
 298 |         },
 299 |         {
 300 |           value: "ecuador",
 301 |           label: "Ecuador",
 302 |         },
 303 |         {
 304 |           value: "egypt",
 305 |           label: "Egypt",
 306 |         },
 307 |         {
 308 |           value: "el-salvador",
 309 |           label: "El Salvador",
 310 |         },
 311 |         {
 312 |           value: "equatorial-guinea",
 313 |           label: "Equatorial Guinea",
 314 |         },
 315 |         {
 316 |           value: "eritrea",
 317 |           label: "Eritrea",
 318 |         },
 319 |         {
 320 |           value: "estonia",
 321 |           label: "Estonia",
 322 |         },
 323 |         {
 324 |           value: "ethiopia",
 325 |           label: "Ethiopia",
 326 |         },
 327 |         {
 328 |           value: "europa-island",
 329 |           label: "Europa Island",
 330 |         },
 331 |         {
 332 |           value: "falkland-islands-(islas-malvinas)",
 333 |           label: "Falkland Islands (Islas Malvinas)",
 334 |         },
 335 |         {
 336 |           value: "faroe-islands",
 337 |           label: "Faroe Islands",
 338 |         },
 339 |         {
 340 |           value: "fiji",
 341 |           label: "Fiji",
 342 |         },
 343 |         {
 344 |           value: "finland",
 345 |           label: "Finland",
 346 |         },
 347 |         {
 348 |           value: "france",
 349 |           label: "France",
 350 |         },
 351 |         {
 352 |           value: "french-guiana",
 353 |           label: "French Guiana",
 354 |         },
 355 |         {
 356 |           value: "french-polynesia",
 357 |           label: "French Polynesia",
 358 |         },
 359 |         {
 360 |           value: "french-southern-and-antarctic-lands",
 361 |           label: "French Southern and Antarctic Lands",
 362 |         },
 363 |         {
 364 |           value: "gabon",
 365 |           label: "Gabon",
 366 |         },
 367 |         {
 368 |           value: "gambia-the",
 369 |           label: "Gambia, The",
 370 |         },
 371 |         {
 372 |           value: "gaza-strip",
 373 |           label: "Gaza Strip",
 374 |         },
 375 |         {
 376 |           value: "georgia",
 377 |           label: "Georgia",
 378 |         },
 379 |         {
 380 |           value: "germany",
 381 |           label: "Germany",
 382 |         },
 383 |         {
 384 |           value: "ghana",
 385 |           label: "Ghana",
 386 |         },
 387 |         {
 388 |           value: "gibraltar",
 389 |           label: "Gibraltar",
 390 |         },
 391 |         {
 392 |           value: "glorioso-islands",
 393 |           label: "Glorioso Islands",
 394 |         },
 395 |         {
 396 |           value: "greece",
 397 |           label: "Greece",
 398 |         },
 399 |         {
 400 |           value: "greenland",
 401 |           label: "Greenland",
 402 |         },
 403 |         {
 404 |           value: "grenada",
 405 |           label: "Grenada",
 406 |         },
 407 |         {
 408 |           value: "guadeloupe",
 409 |           label: "Guadeloupe",
 410 |         },
 411 |         {
 412 |           value: "guam",
 413 |           label: "Guam",
 414 |         },
 415 |         {
 416 |           value: "guatemala",
 417 |           label: "Guatemala",
 418 |         },
 419 |         {
 420 |           value: "guernsey",
 421 |           label: "Guernsey",
 422 |         },
 423 |         {
 424 |           value: "guinea",
 425 |           label: "Guinea",
 426 |         },
 427 |         {
 428 |           value: "guinea-bissau",
 429 |           label: "Guinea-Bissau",
 430 |         },
 431 |         {
 432 |           value: "guyana",
 433 |           label: "Guyana",
 434 |         },
 435 |         {
 436 |           value: "haiti",
 437 |           label: "Haiti",
 438 |         },
 439 |         {
 440 |           value: "heard-island-and-mcdonald-islands",
 441 |           label: "Heard Island and McDonald Islands",
 442 |         },
 443 |         {
 444 |           value: "holy-see-(vatican-city)",
 445 |           label: "Holy See (Vatican City)",
 446 |         },
 447 |         {
 448 |           value: "honduras",
 449 |           label: "Honduras",
 450 |         },
 451 |         {
 452 |           value: "hong-kong",
 453 |           label: "Hong Kong",
 454 |         },
 455 |         {
 456 |           value: "hungary",
 457 |           label: "Hungary",
 458 |         },
 459 |         {
 460 |           value: "iceland",
 461 |           label: "Iceland",
 462 |         },
 463 |         {
 464 |           value: "india",
 465 |           label: "India",
 466 |         },
 467 |         {
 468 |           value: "indonesia",
 469 |           label: "Indonesia",
 470 |         },
 471 |         {
 472 |           value: "iran",
 473 |           label: "Iran",
 474 |         },
 475 |         {
 476 |           value: "iraq",
 477 |           label: "Iraq",
 478 |         },
 479 |         {
 480 |           value: "ireland",
 481 |           label: "Ireland",
 482 |         },
 483 |         {
 484 |           value: "isle-of-man",
 485 |           label: "Isle of Man",
 486 |         },
 487 |         {
 488 |           value: "israel",
 489 |           label: "Israel",
 490 |         },
 491 |         {
 492 |           value: "italy",
 493 |           label: "Italy",
 494 |         },
 495 |         {
 496 |           value: "jamaica",
 497 |           label: "Jamaica",
 498 |         },
 499 |         {
 500 |           value: "jan-mayen",
 501 |           label: "Jan Mayen",
 502 |         },
 503 |         {
 504 |           value: "japan",
 505 |           label: "Japan",
 506 |         },
 507 |         {
 508 |           value: "jersey",
 509 |           label: "Jersey",
 510 |         },
 511 |         {
 512 |           value: "jordan",
 513 |           label: "Jordan",
 514 |         },
 515 |         {
 516 |           value: "juan-de-nova-island",
 517 |           label: "Juan de Nova Island",
 518 |         },
 519 |         {
 520 |           value: "kazakhstan",
 521 |           label: "Kazakhstan",
 522 |         },
 523 |         {
 524 |           value: "kenya",
 525 |           label: "Kenya",
 526 |         },
 527 |         {
 528 |           value: "kiribati",
 529 |           label: "Kiribati",
 530 |         },
 531 |         {
 532 |           value: "korea-north",
 533 |           label: "Korea, North",
 534 |         },
 535 |         {
 536 |           value: "korea-south",
 537 |           label: "Korea, South",
 538 |         },
 539 |         {
 540 |           value: "kuwait",
 541 |           label: "Kuwait",
 542 |         },
 543 |         {
 544 |           value: "kyrgyzstan",
 545 |           label: "Kyrgyzstan",
 546 |         },
 547 |         {
 548 |           value: "laos",
 549 |           label: "Laos",
 550 |         },
 551 |         {
 552 |           value: "latvia",
 553 |           label: "Latvia",
 554 |         },
 555 |         {
 556 |           value: "lebanon",
 557 |           label: "Lebanon",
 558 |         },
 559 |         {
 560 |           value: "lesotho",
 561 |           label: "Lesotho",
 562 |         },
 563 |         {
 564 |           value: "liberia",
 565 |           label: "Liberia",
 566 |         },
 567 |         {
 568 |           value: "libya",
 569 |           label: "Libya",
 570 |         },
 571 |         {
 572 |           value: "liechtenstein",
 573 |           label: "Liechtenstein",
 574 |         },
 575 |         {
 576 |           value: "lithuania",
 577 |           label: "Lithuania",
 578 |         },
 579 |         {
 580 |           value: "luxembourg",
 581 |           label: "Luxembourg",
 582 |         },
 583 |         {
 584 |           value: "macau",
 585 |           label: "Macau",
 586 |         },
 587 |         {
 588 |           value: "macedonia",
 589 |           label: "Macedonia",
 590 |         },
 591 |         {
 592 |           value: "madagascar",
 593 |           label: "Madagascar",
 594 |         },
 595 |         {
 596 |           value: "malawi",
 597 |           label: "Malawi",
 598 |         },
 599 |         {
 600 |           value: "malaysia",
 601 |           label: "Malaysia",
 602 |         },
 603 |         {
 604 |           value: "maldives",
 605 |           label: "Maldives",
 606 |         },
 607 |         {
 608 |           value: "mali",
 609 |           label: "Mali",
 610 |         },
 611 |         {
 612 |           value: "malta",
 613 |           label: "Malta",
 614 |         },
 615 |         {
 616 |           value: "marshall-islands",
 617 |           label: "Marshall Islands",
 618 |         },
 619 |         {
 620 |           value: "martinique",
 621 |           label: "Martinique",
 622 |         },
 623 |         {
 624 |           value: "mauritania",
 625 |           label: "Mauritania",
 626 |         },
 627 |         {
 628 |           value: "mauritius",
 629 |           label: "Mauritius",
 630 |         },
 631 |         {
 632 |           value: "mayotte",
 633 |           label: "Mayotte",
 634 |         },
 635 |         {
 636 |           value: "mexico",
 637 |           label: "Mexico",
 638 |         },
 639 |         {
 640 |           value: "micronesia-federated-states-of",
 641 |           label: "Micronesia, Federated States of",
 642 |         },
 643 |         {
 644 |           value: "moldova",
 645 |           label: "Moldova",
 646 |         },
 647 |         {
 648 |           value: "monaco",
 649 |           label: "Monaco",
 650 |         },
 651 |         {
 652 |           value: "mongolia",
 653 |           label: "Mongolia",
 654 |         },
 655 |         {
 656 |           value: "montserrat",
 657 |           label: "Montserrat",
 658 |         },
 659 |         {
 660 |           value: "morocco",
 661 |           label: "Morocco",
 662 |         },
 663 |         {
 664 |           value: "mozambique",
 665 |           label: "Mozambique",
 666 |         },
 667 |         {
 668 |           value: "namibia",
 669 |           label: "Namibia",
 670 |         },
 671 |         {
 672 |           value: "nauru",
 673 |           label: "Nauru",
 674 |         },
 675 |         {
 676 |           value: "navassa-island",
 677 |           label: "Navassa Island",
 678 |         },
 679 |         {
 680 |           value: "nepal",
 681 |           label: "Nepal",
 682 |         },
 683 |         {
 684 |           value: "netherlands",
 685 |           label: "Netherlands",
 686 |         },
 687 |         {
 688 |           value: "netherlands-antilles",
 689 |           label: "Netherlands Antilles",
 690 |         },
 691 |         {
 692 |           value: "new-caledonia",
 693 |           label: "New Caledonia",
 694 |         },
 695 |         {
 696 |           value: "new-zealand",
 697 |           label: "New Zealand",
 698 |         },
 699 |         {
 700 |           value: "nicaragua",
 701 |           label: "Nicaragua",
 702 |         },
 703 |         {
 704 |           value: "niger",
 705 |           label: "Niger",
 706 |         },
 707 |         {
 708 |           value: "nigeria",
 709 |           label: "Nigeria",
 710 |         },
 711 |         {
 712 |           value: "niue",
 713 |           label: "Niue",
 714 |         },
 715 |         {
 716 |           value: "norfolk-island",
 717 |           label: "Norfolk Island",
 718 |         },
 719 |         {
 720 |           value: "northern-mariana-islands",
 721 |           label: "Northern Mariana Islands",
 722 |         },
 723 |         {
 724 |           value: "norway",
 725 |           label: "Norway",
 726 |         },
 727 |         {
 728 |           value: "oman",
 729 |           label: "Oman",
 730 |         },
 731 |         {
 732 |           value: "pakistan",
 733 |           label: "Pakistan",
 734 |         },
 735 |         {
 736 |           value: "palau",
 737 |           label: "Palau",
 738 |         },
 739 |         {
 740 |           value: "panama",
 741 |           label: "Panama",
 742 |         },
 743 |         {
 744 |           value: "papua-new-guinea",
 745 |           label: "Papua New Guinea",
 746 |         },
 747 |         {
 748 |           value: "paracel-islands",
 749 |           label: "Paracel Islands",
 750 |         },
 751 |         {
 752 |           value: "paraguay",
 753 |           label: "Paraguay",
 754 |         },
 755 |         {
 756 |           value: "peru",
 757 |           label: "Peru",
 758 |         },
 759 |         {
 760 |           value: "philippines",
 761 |           label: "Philippines",
 762 |         },
 763 |         {
 764 |           value: "pitcairn-islands",
 765 |           label: "Pitcairn Islands",
 766 |         },
 767 |         {
 768 |           value: "poland",
 769 |           label: "Poland",
 770 |         },
 771 |         {
 772 |           value: "portugal",
 773 |           label: "Portugal",
 774 |         },
 775 |         {
 776 |           value: "puerto-rico",
 777 |           label: "Puerto Rico",
 778 |         },
 779 |         {
 780 |           value: "qatar",
 781 |           label: "Qatar",
 782 |         },
 783 |         {
 784 |           value: "reunion",
 785 |           label: "Reunion",
 786 |         },
 787 |         {
 788 |           value: "romania",
 789 |           label: "Romania",
 790 |         },
 791 |         {
 792 |           value: "russia",
 793 |           label: "Russia",
 794 |         },
 795 |         {
 796 |           value: "rwanda",
 797 |           label: "Rwanda",
 798 |         },
 799 |         {
 800 |           value: "saint-helena",
 801 |           label: "Saint Helena",
 802 |         },
 803 |         {
 804 |           value: "saint-kitts-and-nevis",
 805 |           label: "Saint Kitts and Nevis",
 806 |         },
 807 |         {
 808 |           value: "saint-lucia",
 809 |           label: "Saint Lucia",
 810 |         },
 811 |         {
 812 |           value: "saint-pierre-and-miquelon",
 813 |           label: "Saint Pierre and Miquelon",
 814 |         },
 815 |         {
 816 |           value: "saint-vincent-and-the-grenadines",
 817 |           label: "Saint Vincent and the Grenadines",
 818 |         },
 819 |         {
 820 |           value: "samoa",
 821 |           label: "Samoa",
 822 |         },
 823 |         {
 824 |           value: "san-marino",
 825 |           label: "San Marino",
 826 |         },
 827 |         {
 828 |           value: "sao-tome-and-principe",
 829 |           label: "Sao Tome and Principe",
 830 |         },
 831 |         {
 832 |           value: "saudi-arabia",
 833 |           label: "Saudi Arabia",
 834 |         },
 835 |         {
 836 |           value: "senegal",
 837 |           label: "Senegal",
 838 |         },
 839 |         {
 840 |           value: "serbia-and-montenegro",
 841 |           label: "Serbia and Montenegro",
 842 |         },
 843 |         {
 844 |           value: "seychelles",
 845 |           label: "Seychelles",
 846 |         },
 847 |         {
 848 |           value: "sierra-leone",
 849 |           label: "Sierra Leone",
 850 |         },
 851 |         {
 852 |           value: "singapore",
 853 |           label: "Singapore",
 854 |         },
 855 |         {
 856 |           value: "slovakia",
 857 |           label: "Slovakia",
 858 |         },
 859 |         {
 860 |           value: "slovenia",
 861 |           label: "Slovenia",
 862 |         },
 863 |         {
 864 |           value: "solomon-islands",
 865 |           label: "Solomon Islands",
 866 |         },
 867 |         {
 868 |           value: "somalia",
 869 |           label: "Somalia",
 870 |         },
 871 |         {
 872 |           value: "south-africa",
 873 |           label: "South Africa",
 874 |         },
 875 |         {
 876 |           value: "south-georgia-and-the-south",
 877 |           label: "South Georgia and the South Sandwich Islands",
 878 |         },
 879 |         {
 880 |           value: "spain",
 881 |           label: "Spain",
 882 |         },
 883 |         {
 884 |           value: "spratly-islands",
 885 |           label: "Spratly Islands",
 886 |         },
 887 |         {
 888 |           value: "sri-lanka",
 889 |           label: "Sri Lanka",
 890 |         },
 891 |         {
 892 |           value: "sudan",
 893 |           label: "Sudan",
 894 |         },
 895 |         {
 896 |           value: "suriname",
 897 |           label: "Suriname",
 898 |         },
 899 |         {
 900 |           value: "svalbard",
 901 |           label: "Svalbard",
 902 |         },
 903 |         {
 904 |           value: "swaziland",
 905 |           label: "Swaziland",
 906 |         },
 907 |         {
 908 |           value: "sweden",
 909 |           label: "Sweden",
 910 |         },
 911 |         {
 912 |           value: "switzerland",
 913 |           label: "Switzerland",
 914 |         },
 915 |         {
 916 |           value: "syria",
 917 |           label: "Syria",
 918 |         },
 919 |         {
 920 |           value: "taiwan",
 921 |           label: "Taiwan",
 922 |         },
 923 |         {
 924 |           value: "tajikistan",
 925 |           label: "Tajikistan",
 926 |         },
 927 |         {
 928 |           value: "tanzania",
 929 |           label: "Tanzania",
 930 |         },
 931 |         {
 932 |           value: "thailand",
 933 |           label: "Thailand",
 934 |         },
 935 |         {
 936 |           value: "timor-leste",
 937 |           label: "Timor-Leste",
 938 |         },
 939 |         {
 940 |           value: "togo",
 941 |           label: "Togo",
 942 |         },
 943 |         {
 944 |           value: "tokelau",
 945 |           label: "Tokelau",
 946 |         },
 947 |         {
 948 |           value: "tonga",
 949 |           label: "Tonga",
 950 |         },
 951 |         {
 952 |           value: "trinidad-and-tobago",
 953 |           label: "Trinidad and Tobago",
 954 |         },
 955 |         {
 956 |           value: "tromelin-island",
 957 |           label: "Tromelin Island",
 958 |         },
 959 |         {
 960 |           value: "tunisia",
 961 |           label: "Tunisia",
 962 |         },
 963 |         {
 964 |           value: "turkey",
 965 |           label: "Turkey",
 966 |         },
 967 |         {
 968 |           value: "turkmenistan",
 969 |           label: "Turkmenistan",
 970 |         },
 971 |         {
 972 |           value: "turks-and-caicos-islands",
 973 |           label: "Turks and Caicos Islands",
 974 |         },
 975 |         {
 976 |           value: "tuvalu",
 977 |           label: "Tuvalu",
 978 |         },
 979 |         {
 980 |           value: "uganda",
 981 |           label: "Uganda",
 982 |         },
 983 |         {
 984 |           value: "ukraine",
 985 |           label: "Ukraine",
 986 |         },
 987 |         {
 988 |           value: "united-arab-emirates",
 989 |           label: "United Arab Emirates",
 990 |         },
 991 |         {
 992 |           value: "united-kingdom",
 993 |           label: "United Kingdom",
 994 |         },
 995 |         {
 996 |           value: "united-states",
 997 |           label: "United States",
 998 |         },
 999 |         {
1000 |           value: "uruguay",
1001 |           label: "Uruguay",
1002 |         },
1003 |         {
1004 |           value: "uzbekistan",
1005 |           label: "Uzbekistan",
1006 |         },
1007 |         {
1008 |           value: "vanuatu",
1009 |           label: "Vanuatu",
1010 |         },
1011 |         {
1012 |           value: "venezuela",
1013 |           label: "Venezuela",
1014 |         },
1015 |         {
1016 |           value: "vietnam",
1017 |           label: "Vietnam",
1018 |         },
1019 |         {
1020 |           value: "virgin-islands",
1021 |           label: "Virgin Islands",
1022 |         },
1023 |         {
1024 |           value: "wake-island",
1025 |           label: "Wake Island",
1026 |         },
1027 |         {
1028 |           value: "wallis-and-futuna",
1029 |           label: "Wallis and Futuna",
1030 |         },
1031 |         {
1032 |           value: "west-bank",
1033 |           label: "West Bank",
1034 |         },
1035 |         {
1036 |           value: "western-sahara",
1037 |           label: "Western Sahara",
1038 |         },
1039 |         {
1040 |           value: "yemen",
1041 |           label: "Yemen",
1042 |         },
1043 |         {
1044 |           value: "zambia",
1045 |           label: "Zambia",
1046 |         },
1047 |         {
1048 |           value: "zimbabwe",
1049 |           label: "Zimbabwe",
1050 |         },
1051 |       ],
1052 |     };
1053 |   },
1054 | });
1055 | </script>
1056 | 


--------------------------------------------------------------------------------