slim-select 2.2.0 → 2.2.2

package/src/vue/slimselect.vue

@@ -3,11 +3,18 @@ import { defineComponent, PropType } from 'vue'
 
 import SlimSelect, { Config, Events } from '../slim-select'
 import Settings from '../slim-select/settings'
-import { DataArrayPartial } from '../slim-select/store'
+import { DataArrayPartial, Option } from '../slim-select/store'
 
 export default defineComponent({
   name: 'SlimSelect',
   props: {
+    modelValue: {
+      type: [String, Array, undefined] as PropType<string | string[] | undefined>,
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
     data: {
       type: Array as PropType<DataArrayPartial>,
     },
@@ -18,6 +25,7 @@ export default defineComponent({
       type: Object as PropType<Events>,
     },
   },
+  emits: ['update:modelValue'],
   data() {
     return {
       slim: null as SlimSelect | null,
@@ -42,9 +50,37 @@ export default defineComponent({
     if (this.events) {
       config.events = this.events
     }
+    if (!config.events) {
+      config.events = {}
+    }
+
+    // Wrap config.events.afterChange to run emitUpdateSelectedValues
+    const ogAfterChange = config.events.afterChange
+    config.events.afterChange = (newVal: Option[]) => {
+      const value = this.multiple ? newVal.map((option) => option.value) : newVal[0].value
+
+      // Check if value is different from modelValue
+      if (this.value !== value) {
+        this.value = value
+      }
+
+      // If they had an original afterChange, run it
+      if (config.events && ogAfterChange) {
+        ogAfterChange(newVal)
+      }
+    }
 
     // Initialize SlimSelect
     this.slim = new SlimSelect(config)
+
+    // Get SlimSelect selected values
+    let selected = this.$props.multiple ? this.slim.getSelected() : this.slim.getSelected()[0]
+
+    // Check if modelValue is the same as the value of the select
+    if (this.value !== selected) {
+      // If not, set the value of the select to the modelValue
+      this.value = selected
+    }
   },
   beforeUnmount() {
     if (this.slim) {
@@ -61,6 +97,34 @@ export default defineComponent({
       deep: true,
     },
   },
+  computed: {
+    value: {
+      get(): string | string[] {
+        const multi = this.$props.multiple
+        const val = this.$props.modelValue
+
+        // If modelValue is undefined, return empty string or array
+        if (val === undefined) {
+          return multi ? [] : ''
+        }
+
+        // If its multiple and the modelValue is a string, return an array with the string
+        if (multi && typeof val === 'string') {
+          return [val]
+        }
+
+        // If its not multiple and the modelValue is an array, return the first item
+        if (!multi && Array.isArray(val)) {
+          return val[0]
+        }
+
+        return multi ? [] : ''
+      },
+      set(value: string | string[]) {
+        this.$emit('update:modelValue', value)
+      },
+    },
+  },
   methods: {
     // This allows via a ref to call the SlimSelect methods
     getSlimSelect() {
@@ -71,7 +135,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <select ref="slim">
+  <select :multiple="multiple" ref="slim">
     <slot />
   </select>
 </template>

package/src/vue/tsconfig.json

@@ -4,11 +4,11 @@
     "module": "esnext",
     "moduleResolution": "node",
     "strict": true /* Enable all strict type-checking options. */,
-    "declaration": false /* Generates corresponding '.d.ts' file. */,
+    "declaration": true /* Generates corresponding '.d.ts' file. */,
     "outDir": "./dist", // Output to dist folder
     "removeComments": true /* Do not emit comments to output. */,
     "importHelpers": true /* Import emit helpers from 'tslib'. */
   },
-  "include": ["**/**.ts", "**/*.vue"],
-  "exclude": ["./dist", "../slim-select/*"]
+  "include": ["./*.ts", "./*.vue"],
+  "exclude": ["../slim-select/*"]
 }

package/tsconfig.json

@@ -1,5 +1,8 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": ".",
+    "outDir": "dist",
     "declaration": true,
     "target": "esnext",
     "useDefineForClassFields": true,
@@ -12,7 +15,11 @@
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "importHelpers": true,
-    "lib": ["esnext", "dom"]
+    "lib": ["esnext", "dom"],
+    "paths": {
+      "slim-select": ["src/slim-select"],
+      "@slim-select/vue": ["src/vue"]
+    }
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": ["dist/", "src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
 }

package/.github/FUNDING.yml

@@ -1,12 +0,0 @@
-# These are supported funding model platforms
-
-github: brianvoe
-patreon: brianvoe
-open_collective: # Replace with a single Open Collective username
-ko_fi: # Replace with a single Ko-fi username
-tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
-community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
-liberapay: # Replace with a single Liberapay username
-issuehunt: # Replace with a single IssueHunt username
-otechie: # Replace with a single Otechie username
-custom: # Replace with a single custom sponsorship URL

package/.github/ISSUE_TEMPLATE/issue-report.md

@@ -1,14 +0,0 @@
----
-name: Issue Report
-about: Create a report to help improve SlimSelect
-title: ''
-labels: ''
-assignees: ''
----
-
-**Describe the bug**
-A clear and concise description of what the issue is.
-
-**Screenshots**
-Please add screenshots to help explain your issue.
-If the issue is a visual issue and doesnt have a screenshot that will make me sad.

package/.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-  "recommendations": ["Vue.volar", "orta.vscode-jest"]
-}

package/.vscode/settings.json

@@ -1,17 +0,0 @@
-{
-  "editor.formatOnSave": true,
-  "editor.insertSpaces": true,
-  "editor.tabSize": 2,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "editor.codeActionsOnSave": {
-    "source.fixAll": true,
-    "source.organizeImports": false,
-    "source.sortMembers": true
-  }
-}

package/docs/404.html

@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <title>Slim Select</title>
-    <script type="text/javascript">
-      // Single Page Apps for GitHub Pages
-      // https://github.com/rafrex/spa-github-pages
-      // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
-      // ----------------------------------------------------------------------
-      // This script takes the current url and converts the path and query
-      // string into just a query string, and then redirects the browser
-      // to the new url with only a query string and hash fragment,
-      // e.g. http://www.foo.tld/one/two?a=b&c=d#qwe, becomes
-      // http://www.foo.tld/?p=/one/two&q=a=b~and~c=d#qwe
-      // Note: this 404.html file must be at least 512 bytes for it to work
-      // with Internet Explorer (it is currently > 512 bytes)
-      // If you're creating a Project Pages site and NOT using a custom domain,
-      // then set pathPrefix = true. This way the repo name will remain in the path:
-      // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
-      // https://username.github.io/repo-name/?p=/one/two&q=a=b~and~c=d#qwe
-      // Otherwise, leave pathPrefix as false.
-      var pathPrefix = false
-      var l = window.location
-      l.replace(
-        l.protocol +
-          '//' +
-          l.hostname +
-          (l.port ? ':' + l.port : '') +
-          l.pathname
-            .split('/')
-            .slice(0, 2 * pathPrefix)
-            .join('/') +
-          '/?p=/' +
-          l.pathname.slice(1).split('/').slice(pathPrefix).join('/').replace(/&/g, '~and~') +
-          (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
-          l.hash,
-      )
-    </script>
-  </head>
-  <body></body>
-</html>

package/docs/CNAME

@@ -1 +0,0 @@
-slimselectjs.com

package/docs/assets/check-mark.svg

@@ -1,6 +0,0 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="45.701px" height="45.7px" viewBox="0 0 45.701 45.7" style="enable-background:new 0 0 45.701 45.7;" xml:space="preserve">
-	<path fill="#5897fb" d="M20.687,38.332c-2.072,2.072-5.434,2.072-7.505,0L1.554,26.704c-2.072-2.071-2.072-5.433,0-7.504
-		c2.071-2.072,5.433-2.072,7.505,0l6.928,6.927c0.523,0.522,1.372,0.522,1.896,0L36.642,7.368c2.071-2.072,5.433-2.072,7.505,0
-		c0.995,0.995,1.554,2.345,1.554,3.752c0,1.407-0.559,2.757-1.554,3.752L20.687,38.332z"/>
-</svg>

package/docs/assets/data.js

@@ -1,63 +0,0 @@
-import{d as n,S as a,_ as l,o,c as s,a as e,f as t}from"./index.js";const i=n({name:"Data",mounted(){new a({select:this.$refs.dataSingle,data:[{placeholder:!0,text:"data placeholder"},{text:"Cat"},{text:"Dog"},{text:"Bird"}]}),new a({select:this.$refs.dataMultiple,data:[{placeholder:!0,text:"data placeholder"},{text:"Human"},{label:"Animals",options:[{text:"Cat"},{text:"Dog"},{text:"Bird"}]}]})}}),d={id:"data",class:"contents"},p=e("div",{id:"types",class:"content"},[e("h2",{class:"header"},"Data Types"),e("p",null," There are two types of data types. The option which consists of a variation of fields to customize the option. You can also provide an optgroup which has a label and an array of options. "),e("pre",null,[t("        "),e("code",{class:"language-javascript"},`
-          var optgroup = {
-            label: 'label', // Required
-            selectAll: false, // Optional - default false
-            closabel: 'off', // Optional - default 'off' - 'off', 'open', 'close'
-            options: [] // Required - value is an array of options
-          }
-
-          var option = {
-            text: 'text', // Required
-            value: 'value', // Optional - value will be set by text if not set
-            html: '<b>Html</b>', // Optional - will be used for display purposes if set
-            selected: false, // Optional - default is false
-            display: true, // Optional - default is true
-            disabled: false, // Optional - default is false
-            mandatory: false, // Optional - default is false
-            placeholder: false, // Optional - default is false
-            class: '', // Optional - default is not set
-            style: '', // Optional - default is not set
-            data: {} // Optional - If you have data attributes
-          }
-        `),t(`
-      `)])],-1),r={id:"field",class:"content"},c=e("h2",{class:"header"},"Data Field",-1),u=e("p",null," The data field is an array of options and optgroups. The data field can be used in place of the select element. The data field will also be used to update the options in the original select element. ",-1),f=e("p",null," The only required field is the text field. The value field will be set to the text field if not set. All other fields are optional and have default values if not set. ",-1),h={class:"row"},x={ref:"dataSingle"},_={ref:"dataMultiple",multiple:""},m=e("pre",null,[t("        "),e("code",{class:"language-javascript"},`
-          new SlimSelect({
-            select: '#selectElement',
-            
-            // Options
-            data: [
-              {text: 'Value 1'},
-              {text: 'Value 2'},
-              {text: 'Value 3'}
-            ],
-
-            // Optgroup
-            data: [
-              {
-                label: 'Animals',
-                options: [
-                  {text: 'Cat'},
-                  {text: 'Dog'},
-                  {text: 'Bird'}
-                ]
-              }
-            ]
-
-            // Mix - option and group options
-            data: [
-              {text: 'Human'}, // regular option
-              {
-                label: 'Animals',
-                options: [
-                  {text: 'Cat'},
-                  {text: 'Dog'},
-                  {text: 'Bird'}
-                ]
-              }
-            ]
-          })
-
-          // If you want to set a placeholder set the first object placeholder to true
-          {'placeholder': true, 'text': 'placeholder text'}
-        `),t(`
-      `)],-1);function b(v,g,y,O,w,T){return o(),s("div",d,[p,e("div",r,[c,u,f,e("div",h,[e("select",x,null,512),e("select",_,null,512)]),m])])}const D=l(i,[["render",b]]);export{D as default};

package/docs/assets/home.css

@@ -1 +0,0 @@
-#home .samples{display:flex;justify-content:space-between;gap:var(--spacing)}#home .samples .single,#home .samples .multi{flex:1 1 50%}#home .support .links{display:flex;flex-direction:row;gap:var(--spacing)}#home .features{flex:1 1 auto;display:flex;flex-direction:column}#home .features .header{padding:0 0 var(--spacing) 0}#home .features .row{justify-content:space-around}#home .features .row .list{display:flex;flex-direction:column;list-style:none;padding:0;width:200px;margin:0 auto}#home .features .row .list li{display:flex;align-items:center;padding:0 0 5px;font-weight:700;font-size:20px}#home .features .row .list li img{width:20px;padding:0 8px 0 0}

package/docs/assets/home.js

@@ -1 +0,0 @@
-import{d as o,S as s,_ as c,r as n,o as a,c as r,a as e,b as h,w as m,e as d,f as i}from"./index.js";const u=o({name:"Home",data(){return{single:null,multiple:null}},mounted(){this.single=new s({select:this.$refs.slimSingle}),this.multiple=new s({select:this.$refs.slimMulti}),setTimeout(()=>{this.single&&this.single.open(),setTimeout(()=>{this.single&&this.single.setSelected("best")},500),setTimeout(()=>{this.single&&this.single.setSelected("select")},1e3),setTimeout(()=>{this.single&&this.single.setSelected("ever")},1500),setTimeout(()=>{this.single&&this.single.close()},2e3),this.multiple&&this.multiple.open(),setTimeout(()=>{this.multiple&&this.multiple.setSelected(["best"])},500),setTimeout(()=>{this.multiple&&this.multiple.setSelected(["best","select"])},1e3),setTimeout(()=>{this.multiple&&this.multiple.setSelected(["best","select","ever"])},1500),setTimeout(()=>{this.multiple&&this.multiple.close()},2e3)},500)},unmounted(){this.single&&this.single.destroy(),this.multiple&&this.multiple.destroy()}}),t="/assets/check-mark.svg";const p={id:"home",class:"content"},_={class:"samples row"},g={class:"single"},f=e("h2",null,"Single Select",-1),v={ref:"slimSingle"},b=e("option",{"data-placeholder":"true"},null,-1),S=e("option",{value:"best"},"Best",-1),w=e("option",{value:"select"},"Select",-1),k=e("option",{value:"ever"},"Ever",-1),y=[b,S,w,k],T={class:"multi"},C=e("h2",null,"Multi Select",-1),x={ref:"slimMulti",multiple:""},B=e("option",{value:"best"},"Best",-1),L=e("option",{value:"select"},"Select",-1),M=e("option",{value:"ever"},"Ever",-1),H=[B,L,M],$=d('<br><div class="support"><h2 class="header">Support</h2><p>Help support creators that make development easier!</p><div class="links"><iframe src="https://github.com/sponsors/brianvoe/button" title="Sponsor brianvoe" height="35" width="116" style="border:0;"></iframe><a href="https://www.buymeacoffee.com/brianvoe" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height:auto !important;width:auto !important;"></a></div></div><br><div class="separator"></div><br><div class="features"><h2 class="header">Features</h2><div class="row"><ul class="list"><li><img src="'+t+'"> No Dependencies</li><li><img src="'+t+'"> ~30kb - ~5kb gzip</li><li><img src="'+t+'"> Single Select</li><li><img src="'+t+'"> Multiple Select</li><li><img src="'+t+'"> Addable Options</li><li><img src="'+t+'"> Html Options</li><li><img src="'+t+'"> Settable Data</li><li><img src="'+t+'"> Callback Events</li><li><img src="'+t+'"> Placeholders</li></ul><ul class="list"><li><img src="'+t+'"> Advanced Search</li><li><img src="'+t+'"> Tabbable</li><li><img src="'+t+'"> Disable Options</li><li><img src="'+t+'"> Light Css</li><li><img src="'+t+'"> Light Color Scheme</li><li><img src="'+t+'"> Style Inheritance</li><li><img src="'+t+'"> Clean Animations</li><li><img src="'+t+'"> Performant</li><li><img src="'+t+'"> Typescript</li></ul></div></div><br><div class="separator"></div><br>',9),N={class:"frameworks"},A=e("h2",{class:"header"},"Frameworks",-1),E=e("p",null,[i(" SlimSelect is in the process of adding a few framework integrations."),e("br"),i(" If you are an expert in any specific framework and would like to help out, please reach out! ")],-1),V={class:"row frameworks"},z=e("svg",{viewBox:"0 0 128 128",width:"100",height:"100"},[e("path",{fill:"#42b883",d:"M78.8,10L64,35.4L49.2,10H0l64,110l64-110C128,10,78.8,10,78.8,10z"}),e("path",{fill:"#35495e",d:"M78.8,10L64,35.4L49.2,10H25.6L64,76l38.4-66H78.8z"})],-1);function D(O,F,I,P,j,q){const l=n("router-link");return a(),r("div",p,[e("div",_,[e("div",g,[f,e("select",v,y,512)]),e("div",T,[C,e("select",x,H,512)])]),$,e("div",N,[A,E,e("div",V,[h(l,{to:"frameworks#vue"},{default:m(()=>[z]),_:1})])])])}const J=c(u,[["render",D]]);export{J as default};

package/docs/assets/index.css

@@ -1 +0,0 @@
-@import"https://fonts.googleapis.com/css?family=Montserrat:300,400,700";code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:none;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#a6e22e}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function,.token.class-name{color:#e6db74}.token.keyword{color:#66d9ef}.token.regex,.token.important{color:#fd971f}.token.important,.token.bold{font-weight:700}.token.entity{cursor:help}:root{--color-primary: #5897fb;--color-secondary: #666666;--color-header-bg: #ffffff;--color-border: #dcdee2;--color-font: #66666;--color-white: #ffffff;--color-alert-info: #cfe2ff;--color-alert-info-border: #b6d4fe;--width-max: 1000px;--height-header: 90px;--width-nav: 200px;--height-nav: 30px;--border-radius: 4px;--font-size: 14px;--spacing: 16px;--spacing-half: 8px;--spacing-quarter: 4px}html{height:100%;padding:0;margin:0;background-color:var(--color-primary)}body{font-family:Montserrat,sans-serif,Helvetica;font-size:var(--font-size);color:var(--color-font);width:100%;padding:0;margin:0}body #app{display:grid;grid-template-columns:var(--width-nav) 1fr;grid-template-rows:calc(var(--height-header) + var(--spacing-half)) 1fr;grid-template-areas:"header header" "nav    main";width:100%;max-width:var(--width-max);height:100%;padding:0;margin:0 auto;overflow-x:hidden;box-sizing:border-box}@media (max-width: 700px){body #app{grid-template-columns:1fr;grid-template-rows:calc(var(--height-header) - var(--height-nav) + var(--spacing-half)) var(--height-nav) 1fr;grid-template-areas:"header" "nav" "main"}}body #app>*{box-sizing:border-box}body #app header{position:fixed;top:0;grid-area:header;display:flex;flex-direction:column;justify-content:flex-end;color:var(--color-white);height:var(--height-header);width:100%;max-width:var(--width-max);margin:0;padding:var(--spacing-half) 0 0 0;z-index:100000;background-color:var(--color-primary)}@media (max-width: 700px){body #app header{height:calc(var(--height-header) - var(--height-nav))}}body #app header .top{display:flex;flex-direction:row;justify-content:space-between;padding:0 0 var(--spacing-half) 0}body #app header .top .text{flex:1 1 auto;color:var(--color-font)}body #app header .top .text .logo{line-height:1;font-size:40px;font-weight:300;padding:0;margin:0}body #app header .top .socials{flex:0 1 auto;display:flex;justify-content:flex-end;gap:var(--spacing-half);color:var(--color-font);margin:0 auto;padding:var(--spacing-half) 0 0 0}body #app header .top .socials a,body #app header .top .socials img{height:30px}body #app header .bar{display:flex;flex-direction:row;justify-content:space-between;height:var(--height-nav);border:solid 1.5px var(--color-white)}@media (max-width: 700px){body #app header .bar{display:none}}body #app header .bar .tagline{flex:1 1 auto;display:inline-flex;justify-content:flex-start;align-items:center;line-height:1;font-size:16px;padding:var(--spacing-quarter) var(--spacing-quarter) var(--spacing-quarter) var(--spacing-half);margin:0 auto}body #app header .bar .drop{display:flex;flex:0 1 auto;border-left:solid 1.5px var(--color-white);margin:auto var(--spacing-quarter) auto var(--spacing-quarter);padding:0 var(--spacing-quarter) 0 var(--spacing-half)}body #app header .bar .drop svg{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;height:12px;width:12px;margin:0 auto}body #app header .bar .drop svg path{fill:none;stroke:var(--color-white);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}body #app nav{position:fixed;grid-area:nav;display:flex;flex-direction:column;top:calc(var(--height-header) + var(--spacing-half));width:var(--width-nav);max-width:var(--width-max);height:calc(100vh - var(--height-header) - var(--spacing));overflow:hidden;z-index:100000}@media (max-width: 700px){body #app nav{top:calc(var(--height-header) - var(--height-nav));height:auto;width:100%}}body #app nav .ss-main{flex:0 1 auto;height:var(--height-nav);font-weight:700}body #app nav .nav-content{flex:1 1 auto;overflow:hidden}@media (max-width: 700px){body #app nav .nav-content{display:none}}body #app nav .nav-content .ss-content{max-height:calc(100vh - var(--height-header) - var(--height-nav) - var(--spacing))}body #app nav .nav-content .ss-content .label{font-weight:700}body #app main{grid-area:main;display:flex;flex-direction:column;gap:var(--spacing-half);padding:0 0 0 var(--spacing);overflow:auto}@media (max-width: 700px){body #app main{padding:0}}body #app main .contents{display:flex;flex-direction:column;gap:var(--spacing)}body #app main .content{flex:1 1 auto;padding:var(--spacing);background-color:var(--color-white);border-radius:var(--border-radius)}@media screen and (max-width: 700px){body #app main .content{box-shadow:none}}body #app main .content .row{display:flex;flex-direction:row;gap:var(--spacing-half)}body #app main .content .row>*{flex:1 1 auto}body #app main .content .row .btn{flex:0 1 auto}body #app main footer{grid-area:footer;color:var(--color-white);padding:var(--spacing-quarter) 0 var(--spacing-quarter) 0;line-height:1.2;font-size:calc(var(--font-size) - 2px);text-align:center}body #app main footer a{color:var(--color-font)}code[class*=language-],pre[class*=language-]{color:#a9b7c6;font-family:Consolas,Monaco,Andale Mono,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;border-radius:4px;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection{color:inherit;background:rgba(33,66,131,.85)}pre[class*=language-]::selection,pre[class*=language-] ::selection,code[class*=language-]::selection,code[class*=language-] ::selection{color:inherit;background:rgba(33,66,131,.85)}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2b2b2b}:not(pre)>code[class*=language-]{padding:.1em;border-radius:2px}.token.comment,.token.prolog,.token.cdata{color:gray}.token.delimiter,.token.boolean,.token.keyword,.token.selector,.token.important,.token.atrule{color:#cc7832}.token.operator,.token.punctuation,.token.attr-name{color:#a9b7c6}.token.tag,.token.tag .punctuation,.token.doctype,.token.builtin{color:#e8bf6a}.token.entity,.token.number,.token.symbol{color:#6897bb}.token.property,.token.constant,.token.variable{color:#9876aa}.token.string,.token.char{color:#6a8759}.token.attr-value,.token.attr-value .punctuation{color:#a5c261}.token.attr-value .punctuation:first-child{color:#a9b7c6}.token.url{color:#287bde;text-decoration:underline}.token.function{color:#ffc66d}.token.regex{background:#364135}.token.bold{font-weight:700}.token.italic{font-style:italic}.token.inserted{background:#294436}.token.deleted{background:#484a4a}code.language-css .token.property,code.language-css .token.property+.token.punctuation{color:#a9b7c6}code.language-css .token.id{color:#ffc66d}code.language-css .token.selector>.token.class,code.language-css .token.selector>.token.attribute,code.language-css .token.selector>.token.pseudo-class,code.language-css .token.selector>.token.pseudo-element{color:#ffc66d}h1{font-size:40px;margin:0 0 var(--spacing-half) 0;padding:0 0 var(--spacing-quarter) 0}h2{font-size:32px;margin:0 0 var(--spacing-half) 0;padding:0 0 var(--spacing-quarter) 0}h2 .header{border-bottom:solid 1px var(--color-border)}h3{font-size:24px;margin:0 0 var(--spacing-half) 0;padding:0 0 var(--spacing-quarter) 0}h4{font-size:20px;margin:0 0 var(--spacing-half) 0;padding:0 0 var(--spacing-quarter) 0}h5{font-size:16px;margin:0 0 var(--spacing-half) 0;padding:0 0 var(--spacing-quarter) 0}a{color:var(--primary-color)}a:hover{color:var(--color-secondary)}p{margin:0 0 var(--spacing-half) 0}.separator{height:1px;width:100%;margin:var(--spacing-half) 0 var(--spacing-half) 0;background-color:var(--color-border)}.bold{font-weight:700}.pad-s{padding:var(--spacing-quarter)}.pad-t-s{padding-top:var(--spacing-quarter)}.pad-r-s{padding-right:var(--spacing-quarter)}.pad-b-s{padding-bottom:var(--spacing-quarter)}.pad-l-s{padding-left:var(--spacing-quarter)}.pad-m{padding:var(--spacing-half)}.pad-t-m{padding-top:var(--spacing-half)}.pad-r-m{padding-right:var(--spacing-half)}.pad-b-m{padding-bottom:var(--spacing-half)}.pad-l-m{padding-left:var(--spacing-half)}.pad-l{padding:var(--spacing)}.pad-t-l{padding-top:var(--spacing)}.pad-r-l{padding-right:var(--spacing)}.pad-b-l{padding-bottom:var(--spacing)}.pad-l-l{padding-left:var(--spacing)}.mar-s{margin:var(--spacing-quarter)}.mar-t-s{margin-top:var(--spacing-quarter)}.mar-r-s{margin-right:var(--spacing-quarter)}.mar-b-s{margin-bottom:var(--spacing-quarter)}.mar-l-s{margin-left:var(--spacing-quarter)}.mar-m{margin:var(--spacing-half)}.mar-t-m{margin-top:var(--spacing-half)}.mar-r-m{margin-right:var(--spacing-half)}.mar-b-m{margin-bottom:var(--spacing-half)}.mar-l-m{margin-left:var(--spacing-half)}.mar-l{margin:var(--spacing)}.mar-t-l{margin-top:var(--spacing)}.mar-r-l{margin-right:var(--spacing)}.mar-b-l{margin-bottom:var(--spacing)}.mar-l-l{margin-left:var(--spacing)}.fade-enter-active,.fade-leave-active{transition:opacity .3s ease-in-out}.fade-enter,.fade-leave-to{opacity:0}button,.btn{display:inline-flex;align-items:center;color:var(--color-white);height:30px;width:auto;max-width:100%;min-width:auto;padding:0 var(--spacing-half) 0 var(--spacing-half);cursor:pointer;background-color:var(--color-primary);text-align:center;line-height:18px;user-select:none;white-space:nowrap;border-radius:var(--border-radius);vertical-align:middle;box-shadow:0 0 0 1px transparent inset,0 0 #22242626 inset;box-sizing:content-box}input{color:var(--color-font)}.alert{position:relative;color:var(--color-font);padding:var(--spacing-half) var(--spacing);margin:0 0 var(--spacing-half) 0;border-radius:var(--border-radius)}.alert.info{background-color:var(--color-alert-info);border-color:var(--color-alert-info-border)}:root{--ss-primary-color: #5897fb;--ss-bg-color: #ffffff;--ss-font-color: #4d4d4d;--ss-font-placeholder-color: #8d8d8d;--ss-disabled-color: #8a8a8a;--ss-border-color: #dcdee2;--ss-highlight-color: #fffb8c;--ss-success-color: #00b755;--ss-error-color: #dc3545;--ss-main-height: 30px;--ss-content-height: 300px;--ss-spacing-l: 7px;--ss-spacing-m: 5px;--ss-spacing-s: 3px;--ss-animation-timing: .2s;--ss-border-radius: 4px}@keyframes ss-valueIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes ss-valueOut{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:0}}.ss-hide{display:none!important}.ss-main{display:flex;flex-direction:row;position:relative;user-select:none;color:var(--ss-font-color);min-height:var(--ss-main-height);width:100%;padding:var(--ss-spacing-s);cursor:pointer;border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);outline:0;box-sizing:border-box;transition:background-color var(--ss-animation-timing)}.ss-main:focus{box-shadow:0 0 5px var(--ss-primary-color)}.ss-main.ss-disabled{background-color:var(--ss-border-color);cursor:not-allowed}.ss-main.ss-disabled .ss-values .ss-disabled{color:var(--ss-font-color)}.ss-main.ss-disabled .ss-values .ss-value .ss-value-delete{cursor:not-allowed}.ss-main.ss-open-above{border-top-left-radius:0;border-top-right-radius:0}.ss-main.ss-open-below{border-bottom-left-radius:0;border-bottom-right-radius:0}.ss-main .ss-values{display:inline-flex;flex-wrap:wrap;gap:var(--ss-spacing-m);flex:1 1 100%}.ss-main .ss-values .ss-placeholder{display:flex;padding:var(--ss-spacing-s) var(--ss-spacing-m) var(--ss-spacing-s) var(--ss-spacing-m);margin:auto 0;line-height:1em;align-items:center;width:100%;color:var(--ss-font-placeholder-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ss-main .ss-values .ss-single{display:flex;margin:auto 0px auto var(--ss-spacing-s)}.ss-main .ss-values .ss-value{display:flex;user-select:none;align-items:center;width:fit-content;background-color:var(--ss-primary-color);border-radius:var(--ss-border-radius);animation-name:ss-valueIn;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out;animation-fill-mode:both}.ss-main .ss-values .ss-value.ss-value-out{animation-name:ss-valueOut;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out}.ss-main .ss-values .ss-value .ss-value-text{font-size:12px;color:var(--ss-bg-color);line-height:1;padding:var(--ss-spacing-s) var(--ss-spacing-m)}.ss-main .ss-values .ss-value .ss-value-delete{display:flex;align-items:center;height:var(--ss-spacing-l);width:var(--ss-spacing-l);padding:var(--ss-spacing-s) var(--ss-spacing-m);cursor:pointer;border-left:solid 1px var(--ss-bg-color)}.ss-main .ss-values .ss-value .ss-value-delete svg{height:var(--ss-spacing-l);width:var(--ss-spacing-l)}.ss-main .ss-values .ss-value .ss-value-delete svg path{fill:none;stroke:var(--ss-bg-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-deselect{display:flex;align-self:center;justify-content:flex-end;flex:0 1 auto;width:8px;height:8px;margin:0 var(--ss-spacing-m) 0 var(--ss-spacing-m)}.ss-main .ss-deselect svg{width:8px;height:8px}.ss-main .ss-deselect svg path{fill:none;stroke:var(--ss-font-color);stroke-width:20;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-arrow{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;width:12px;height:12px;margin:auto var(--ss-spacing-m) auto var(--ss-spacing-m)}.ss-main .ss-arrow path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;transition-timing-function:ease-out;transition:var(--ss-animation-timing)}.ss-content{position:absolute;display:flex;height:auto;flex-direction:column;width:auto;max-height:var(--ss-content-height);box-sizing:border-box;border:solid 1px var(--ss-border-color);background-color:var(--ss-bg-color);transition:transform var(--ss-animation-timing),opacity var(--ss-animation-timing);opacity:0;transform:scaleY(0);overflow:hidden;z-index:10000}.ss-content.ss-relative{position:relative;height:100%}.ss-content.ss-open-above{opacity:1;transform:scaleY(1);transform-origin:center bottom;border-top-left-radius:var(--ss-border-radius);border-top-right-radius:var(--ss-border-radius)}.ss-content.ss-open-below{opacity:1;transform:scaleY(1);transform-origin:center top;border-bottom-left-radius:var(--ss-border-radius);border-bottom-right-radius:var(--ss-border-radius)}.ss-content .ss-search{flex:0 1 auto;display:flex;flex-direction:row;padding:var(--ss-spacing-l) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l)}.ss-content .ss-search input{display:inline-flex;font-size:inherit;line-height:inherit;flex:1 1 auto;width:100%;min-width:0px;padding:var(--ss-spacing-m) var(--ss-spacing-l);margin:0;border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);outline:0;text-align:left;box-sizing:border-box}.ss-content .ss-search input::placeholder{color:var(--ss-font-placeholder-color);vertical-align:middle}.ss-content .ss-search input:focus{box-shadow:0 0 5px var(--ss-primary-color)}.ss-content .ss-search .ss-addable{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;flex:0 0 auto;height:auto;margin:0 0 0 var(--ss-spacing-m);border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius)}.ss-content .ss-search .ss-addable svg{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;width:12px;height:12px;margin:auto var(--ss-spacing-m) auto var(--ss-spacing-m)}.ss-content .ss-search .ss-addable svg path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-content .ss-list{flex:1 1 auto;height:auto;overflow-x:hidden;overflow-y:auto}.ss-content .ss-list .ss-error{color:var(--ss-error-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-searching{color:var(--ss-font-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-optgroup.ss-close .ss-option{display:none!important}.ss-content .ss-list .ss-optgroup .ss-optgroup-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-label-text{flex:1 1 auto;font-weight:700;color:var(--ss-font-color)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label:has(.ss-arrow){cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions{flex:0 1 auto;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ss-spacing-m)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall{flex:0 0 auto;display:flex;flex-direction:row;cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall:hover{opacity:.5}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall.ss-selected svg path{stroke:var(--ss-error-color)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall span{flex:0 1 auto;display:flex;align-items:center;justify-content:center;font-size:60%;text-align:center;padding:0 var(--ss-spacing-s) 0 0}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg{flex:0 1 auto;width:13px;height:13px}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg path{fill:none;stroke:var(--ss-success-color);stroke-linecap:round;stroke-linejoin:round}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:first-child{stroke-width:5}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:last-child{stroke-width:11}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable{flex:0 1 auto;display:flex;flex-direction:row;cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow{flex:1 1 auto;width:10px;height:10px}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;transition-timing-function:ease-out;transition:var(--ss-animation-timing)}.ss-content .ss-list .ss-optgroup .ss-option{padding:var(--ss-spacing-s) var(--ss-spacing-s) var(--ss-spacing-s) calc(var(--ss-spacing-l) * 3)}.ss-content .ss-list .ss-option{display:flex;padding:var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);cursor:pointer;user-select:none}.ss-content .ss-list .ss-option:hover,.ss-content .ss-list .ss-option.ss-highlighted{color:var(--ss-bg-color);background-color:var(--ss-primary-color)}.ss-content .ss-list .ss-option.ss-disabled{cursor:not-allowed;color:var(--ss-disabled-color);background-color:var(--ss-bg-color)}.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected{color:var(--ss-font-color);background-color:var(--ss-highlight-color)}.ss-content .ss-list .ss-option .ss-search-highlight{background-color:var(--ss-highlight-color)}