slim-select 1.27.1 → 2.0.1

package/src/docs/assets/scss/prism.scss

@@ -1,155 +1,157 @@
-@import "~prismjs/plugins/toolbar/prism-toolbar.css";
-
-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);
- }
- 
- /* Code blocks */
- pre[class*="language-"] {
-     padding: 1em;
-     margin: .5em 0;
-     overflow: auto;
- }
- 
- :not(pre) > code[class*="language-"],
- pre[class*="language-"] {
-     background: #2b2b2b;
- }
- 
- /* Inline code */
- :not(pre) > code[class*="language-"] {
-     padding: .1em;
-     border-radius: 2px;
- }
- 
- .token.comment,
- .token.prolog,
- .token.cdata {
-     color: #808080;
- }
- 
- .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: bold;
- }
- 
- .token.italic {
-     font-style: italic;
- }
- 
- .token.inserted {
-     background: #294436;
- }
- 
- .token.deleted {
-     background: #484a4a;
- }
- 
- /*code.language-css .token.punctuation {
+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, 0.85);
+}
+
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection,
+code[class*='language-']::selection,
+code[class*='language-'] ::selection {
+  color: inherit;
+  background: rgba(33, 66, 131, 0.85);
+}
+
+/* Code blocks */
+pre[class*='language-'] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+  background: #2b2b2b;
+}
+
+/* Inline code */
+:not(pre) > code[class*='language-'] {
+  padding: 0.1em;
+  border-radius: 2px;
+}
+
+.token.comment,
+.token.prolog,
+.token.cdata {
+  color: #808080;
+}
+
+.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: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.inserted {
+  background: #294436;
+}
+
+.token.deleted {
+  background: #484a4a;
+}
+
+/*code.language-css .token.punctuation {
      color: #cc7832;
  }*/
- 
- 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;
- }
+
+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;
+}

package/src/docs/env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+declare module 'chance'
+declare module 'prismjs'
+declare module 'prismjs/*'

package/src/docs/images/check-mark.svg

@@ -0,0 +1,6 @@
+<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/src/docs/images/chrome.svg

@@ -0,0 +1,22 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
+<path style="fill:#E16B5A;" d="M255.333,0.048c0,0,150.936-6.78,230.932,144.636c-42.26,0-243.764,0-243.764,0
+	s-46.036-1.512-85.28,54.244c-11.32,23.352-23.392,47.46-9.808,94.916C127.793,260.704,43.265,113.8,43.265,113.8
+	S102.889,6.072,255.333,0.048z"/>
+<path style="fill:#CC6152;" d="M255.333,0.048c-2.604,0.104-5.116,0.308-7.668,0.468c40.752,2.968,150.852,22.468,215.148,144.168
+	c9.928,0,18.016,0,23.444,0C406.265-6.736,255.333,0.048,255.333,0.048z"/>
+<path style="fill:#FFD464;" d="M478.409,384.488c0,0-69.6,133.852-240.968,127.268c21.14-36.524,121.912-210.704,121.912-210.704
+	s24.328-39.044-4.4-100.844c-14.604-21.464-58.844-43.96-106.812-55.952c38.576-0.384,237.644,0.024,237.644,0.024
+	S549.417,249.7,478.409,384.488z"/>
+<path style="fill:#F2C95F;" d="M485.781,144.284c0,0-101.54-0.208-173.636-0.184c69.164,0.016,152.012,0.184,152.012,0.184
+	s63.636,105.416-7.372,240.204c0,0-63.776,122.416-219.348,127.268l0,0c171.368,6.584,240.972-127.268,240.972-127.268
+	C549.417,249.7,485.781,144.284,485.781,144.284z"/>
+<path style="fill:#74B340;" d="M33.333,385.504c0,0-81.324-127.104,10.08-271.952c21.124,36.54,121.84,210.752,121.84,210.752
+	s21.696,40.552,89.684,46.616c25.916-1.888,52.876-3.492,87.264-38.952c-18.96,33.532-104.172,180.028-104.172,180.028
+	S114.757,514.292,33.333,385.504z"/>
+<circle style="fill:#FFFFFF;" cx="254.721" cy="258.08" r="116"/>
+<circle style="fill:#2995CC;" cx="254.681" cy="258.08" r="92"/>
+<path style="fill:#268CBF;" d="M254.705,166.1c-1.832,0-3.644,0.068-5.444,0.172c48.272,2.82,86.552,42.848,86.552,91.824
+	c0,48.984-38.28,89.016-86.552,91.836c1.804,0.1,3.616,0.172,5.444,0.172c50.804,0,92-41.196,92-92.008
+	C346.705,207.292,305.509,166.1,254.705,166.1z"/>
+</svg>

package/src/docs/images/firefox.svg

@@ -0,0 +1,58 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 511.719 511.719" style="enable-background:new 0 0 511.719 511.719;" xml:space="preserve">
+<path style="fill:#2179A6;" d="M255.044,503.909c135.492,0,245.332-112.728,245.332-251.768
+	c0-139.028-109.844-251.76-245.332-251.76c-135.508,0-245.352,112.732-245.352,251.76
+	C9.688,391.181,119.548,503.909,255.044,503.909z"/>
+<path style="fill:#195D80;" d="M498.216,285.105c-1.28,0.976-2.58,1.944-3.984,2.836c2.172-5.876,4.14-13.444,5.772-22.156
+	c0.236-4.52,0.376-9.068,0.376-13.652c0-52.572-15.732-101.364-42.584-141.744c-24.308-28.752-57.408-53.424-101.264-65.828
+	c47.196,31.912,64.828,59.024,75.984,83.148c-12.624-13.236-34.228-27.044-48.812-28.192c21.876,16.684,58.484,66.18,54.588,141.168
+	c-5.612-12.08-15.88-30.988-23.172-37.604c7.852,73.648,0.976,89.46-3.792,109.024c-1.048-8.992-4.204-15.744-6.024-19.848
+	c0,0-0.84,23.016-15.42,55.808c-11.048,24.836-22.448,32.508-27.492,31.64c-1.376-0.092-2.108-0.696-2.096-0.752
+	c0.36-3.216,0.684-6.584-0.148-8.732c0,0-4.66,1.648-7.668,5.984c-1.212,1.748-2.78,3.452-4.84,5.056
+	c-0.352,0.28,3.328-4.836,3.052-4.6c-1.812,1.516-3.752,3.28-5.708,5.36c-7.152,7.612-13.596,16.056-16.956,13.664
+	c3.128-0.976,5.624-5.06,6.3-9.06c-2.808,2.012-9.94,7.48-25.94,9.916c-6.544,1-34.38,6.188-71.4-12.796
+	c5.4-0.632,13.476-2.584,19.632,1.148c-6.156-6.892-21.032-5.46-31.696-8.916c-9.292-3.016-21.42-16.388-28.388-23.14
+	c28.492,7.156,58.748,1.992,76.24-10.272c17.676-12.4,28.148-21.452,37.544-19.308c9.38,2.144,15.632-7.508,8.324-16.088
+	c-7.28-8.584-24.944-20.124-48.98-13.944c-18.4,4.728-34.084,19.876-59.928,9.344c-1.564-0.632-3.176-1.368-4.832-2.204
+	c-1.652-0.844,5.404,1,3.664-0.048c-4.968-1.88-14-6.124-16.24-7.736c-0.364-0.28,3.74,0.764,3.312,0.492
+	c-24.532-14.884-22.924-26.788-22.924-34.16c0-5.896,3.492-13.868,10.044-17.604c3.536,1.292,5.732,2.476,5.732,2.476
+	s-1.632-2.576-2.668-3.824c0.24-0.088,0.488-0.156,0.736-0.228c2.888,1.004,13.16,5.316,18.644,9.804
+	c6.516-12.488,1.644-33.168,0.976-34.448c0-0.024,0.016-0.028,0.016-0.06c1.38-6.348,38.272-26.176,41.032-28.268
+	c3.82-2.9,7.712-7.372,10.148-12.52c1.768-3.288,3.04-7.968,2.696-14.712c-0.252-4.868-3.072-7.844-42.416-7.504
+	c-10.752,0.084-17.752-6.332-21.984-12.448c-0.852-1.332-1.616-2.596-2.296-3.74c-0.928-1.7-1.556-3.212-2.032-4.432
+	c4.7-17.492,20.368-42.356,34.52-49.936c-26.144-8.424-58.144,15.576-67.24,28.46c-0.028,0.044-0.064,0.08-0.088,0.116
+	c-22.996-5.86-42.512-4.44-58.832,0.924c-12.116-6.016-19.804-18.668-24.16-30.376c-11.108,12.236-21.064,25.584-29.64,39.904
+	c-0.992,8.112-1.52,17.692-0.752,28.752c-0.012,1.428,0.208,2.812,0.164,4.092c-6.188,8.74-10.224,16.26-11.796,19.968
+	c-7.548,15.096-15.28,38.308-21.52,74.36c0,0,4.192-13.588,12.572-28.976c-6,18.824-10.708,47.84-8.38,90.908
+	c0.14,0.612,0.272,1.24,0.416,1.848c0.488-4.148,1.84-13.936,4.492-26.32c1.6,30.064,8.56,67.024,31.396,107.1
+	c2.128,3.744,4.692,8.092,7.748,12.892c44.844,60.032,115.404,98.78,194.804,98.78C379.636,503.909,482.468,408.557,498.216,285.105
+	z"/>
+<path style="fill:#E78244;" d="M440.992,401.377c14.088-27.196,33.208-43.12,43.56-61.928c13.736-25.02,39.688-95.364,20.12-152.1
+	c8.968,35.524,6.168,71.616-22.44,89.744c9.252-25.028,15.052-79.94,5.516-129.412c-6.204-32.148-25.82-60.952-38.608-69.932
+	c11.772,9.056,21.244,41.488,20.98,56.372c-24.632-42.544-64.828-83.22-125.588-100.404c47.196,31.912,64.828,59.024,75.984,83.148
+	c-12.616-13.236-34.224-27.044-48.812-28.192c21.876,16.684,58.492,66.18,54.592,141.168c-5.608-12.08-15.884-30.988-23.172-37.604
+	c7.852,73.652,0.976,89.464-3.792,109.024c-1.048-8.992-4.204-15.744-6.024-19.848c0,0-0.84,23.016-15.424,55.808
+	c-11.044,24.836-22.444,32.508-27.492,31.64c-1.368-0.092-2.104-0.696-2.092-0.752c0.36-3.216,0.684-6.584-0.148-8.732
+	c0,0-4.66,1.648-7.668,5.984c-1.212,1.748-2.776,3.452-4.84,5.056c-0.352,0.28,3.328-4.836,3.056-4.6
+	c-1.82,1.516-3.752,3.28-5.712,5.36c-7.152,7.612-13.6,16.056-16.952,13.664c3.124-0.976,5.62-5.06,6.296-9.06
+	c-2.812,2.012-9.944,7.48-25.936,9.916c-6.548,1-34.384,6.188-71.404-12.796c5.4-0.632,13.476-2.584,19.632,1.148
+	c-6.156-6.892-21.032-5.46-31.696-8.916c-9.292-3.016-21.42-16.388-28.388-23.14c28.492,7.156,58.748,1.992,76.24-10.272
+	c17.676-12.4,28.152-21.452,37.544-19.308c9.376,2.144,15.632-7.512,8.324-16.088c-7.276-8.584-24.94-20.124-48.98-13.944
+	c-18.4,4.728-34.084,19.876-59.928,9.344c-1.564-0.632-3.176-1.368-4.832-2.204c-1.652-0.844,5.404,1,3.664-0.052
+	c-4.968-1.876-14-6.12-16.24-7.732c-0.364-0.28,3.74,0.764,3.312,0.492c-24.532-14.884-22.924-26.788-22.924-34.164
+	c0-5.896,3.492-13.868,10.044-17.604c3.536,1.292,5.732,2.476,5.732,2.476s-1.632-2.576-2.668-3.824
+	c0.24-0.088,0.488-0.156,0.736-0.228c2.888,1.004,13.16,5.316,18.644,9.804c6.516-12.488,1.644-33.168,0.976-34.448
+	c0-0.024,0.016-0.028,0.016-0.06c1.38-6.348,38.272-26.176,41.032-28.268c3.82-2.9,7.712-7.372,10.148-12.52
+	c1.768-3.288,3.04-7.968,2.696-14.712c-0.252-4.868-3.068-7.844-42.412-7.504c-10.752,0.084-17.752-6.332-21.984-12.448
+	c-0.852-1.332-1.616-2.596-2.296-3.74c-0.928-1.7-1.556-3.212-2.032-4.432c4.7-17.492,20.368-42.356,34.52-49.936
+	c-26.148-8.428-58.148,15.572-67.244,28.452c-0.028,0.044-0.064,0.084-0.088,0.116c-22.996-5.86-42.512-4.44-58.832,0.924
+	c-19.984-9.92-27.984-37.92-28.724-49.9c-11.26,7.98-21.632,40.168-23,46.588c-2,10.148-4.052,24.004-2.832,41.596
+	c-0.012,1.428,0.208,2.812,0.164,4.092c-6.188,8.74-10.224,16.26-11.796,19.968C13.972,177.553,6.24,200.765,0,236.817
+	c0,0,4.192-13.588,12.572-28.976c-6.18,19.384-11.008,49.532-8.172,94.752c0.112-1.492,1.404-12.916,4.7-28.312
+	c1.6,30.064,8.56,67.024,31.396,107.1c17.4,30.568,63.26,101.576,178.328,128.148c-12.632-3.736-20.484-11.22-20.484-11.22
+	s42.976,14.164,74.344,12.956c-9.82-1.74-11.78-6.612-11.78-6.612s111.516,6.468,150.076-47.476
+	c-13.18,15.812-46.56,20.276-59.188,20.416c19.22-18.112,61.708-17.688,107.732-64.14c25.248-25.488,27.972-44.876,30.728-63
+	C486.028,374.189,463.996,388.425,440.992,401.377z"/>
+<path style="fill:#144F66;" d="M248.94,160.637c1.78-4.464,3.804-14.952-2.028-17.152c-4.864-1.196-8.988-2.06-16.916-1.88
+	c2.612,0.668,10.112,2.184,12.06,5.772c3.716,6.864-5.064,23.312-6.34,26.812C239.716,174.193,247.188,165.029,248.94,160.637z"/>
+</svg>

package/src/docs/images/ie.svg

@@ -0,0 +1,11 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
+<path style="fill:#2995CC;" d="M484.657,114.457C532.025-8.463,440.009,0.129,440.009,0.129c-59.032,0-132.82,53.768-132.82,53.768
+	s-88.028-23.72-176.056,29.516c-95.932,61.14-92.768,169.724-92.768,169.724C116.373,141.393,224.953,96.061,224.953,96.061v7.376
+	C64.721,213.013,26.769,373.313,17.277,405.993c-9.484,32.684-3.164,106.008,64.312,106.008c67.468,0,135.984-54.344,135.984-54.344
+	s14.756,3.16,54.82,3.16c168.672,0,208.736-148.64,208.736-148.64H331.421c0,0-10.54,48.496-64.296,48.496
+	c-73.792,0-69.584-76.952-69.584-76.952h285.684c13.712-198.192-159.18-226.656-159.18-226.656s61.096-43.22,113.856-43.22
+	c83.616,0,44.084,97.944,44.084,97.944L484.657,114.457z M209.209,455.461c0,0-102.956,62.484-149.176,19.192
+	c-24.756-43.3,15.472-104.612,15.472-104.612S109.557,433.173,209.209,455.461z M333.057,216.265H197.181
+	c0,0-1.72-66.216,69.656-66.216C335.765,150.049,333.057,216.265,333.057,216.265z"/>
+</svg>

package/src/docs/images/opera.svg

@@ -0,0 +1,15 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#E16B5A;" d="M497.996,253.792C497.996,415.06,398.152,512,251.188,512c-137.384,0-237.184-97.628-237.184-252.304
+	C14.004,113.196,115.152,0,258.024,0C400.204,0,497.996,103.544,497.996,253.792z M253.208,79.392
+	c-67.92,0-104.388,67.696-104.388,166c0,71.828,23.748,187.216,113.796,187.216c72.36,0,100.564-75.344,100.564-170.72
+	C363.18,161.24,321.72,79.392,253.208,79.392z"/>
+<g>
+	<path style="fill:#BF5B4D;" d="M244.908,79.784c-2.532-0.236-5.084-0.392-7.7-0.392c-67.92,0-104.388,67.696-104.388,166
+		c0,71.828,23.748,187.216,113.796,187.216c2.656,0,5.236-0.128,7.764-0.328c-83.272-6.82-105.568-117.3-105.568-186.888
+		C148.82,151.18,182.328,85.124,244.908,79.784z"/>
+	<path style="fill:#BF5B4D;" d="M258.024,0c-2.584,0-5.116,0.116-7.672,0.188c137.64,3.984,231.644,106.316,231.644,253.604
+		c0,158.208-96.12,254.432-238.52,258.036c2.568,0.072,5.116,0.172,7.712,0.172c146.964,0,246.808-96.936,246.808-258.208
+		C497.996,103.544,400.204,0,258.024,0z"/>
+</g>
+</svg>

package/src/docs/images/safari.svg

@@ -0,0 +1,22 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<circle style="fill:#F5F5F5;" cx="256" cy="256" r="256"/>
+<path style="fill:#E6E6E6;" d="M256,0c-1.34,0-2.664,0.08-4,0.1C391.532,2.248,504,115.956,504,256S391.532,509.752,252,511.9
+	c1.336,0.024,2.66,0.1,4,0.1c141.384,0,256-114.616,256-256S397.384,0,256,0z"/>
+<path style="fill:#88C5CC;" d="M256,489.244C127.392,489.244,22.752,384.608,22.752,256c0-128.612,104.64-233.244,233.248-233.244
+	S489.252,127.388,489.252,256C489.252,384.608,384.608,489.244,256,489.244z"/>
+<path style="fill:#80B9BF;" d="M45.508,256c0-124.796,98.524-227,221.868-232.956c-3.768-0.18-7.56-0.288-11.376-0.288
+	C127.392,22.756,22.752,127.388,22.752,256c0,128.608,104.64,233.244,233.252,233.244c3.816,0,7.6-0.104,11.376-0.284
+	C144.032,483,45.508,380.796,45.508,256z"/>
+<g>
+	<path style="fill:#F5F5F5;" d="M256,170.668c-47.056,0-85.332,38.28-85.332,85.332c0,47.056,38.276,85.332,85.332,85.332
+		s85.332-38.276,85.332-85.332C341.332,208.948,303.056,170.668,256,170.668z M256,318.58c-34.504,0-62.58-28.072-62.58-62.58
+		s28.076-62.58,62.58-62.58s62.58,28.072,62.58,62.58S290.504,318.58,256,318.58z"/>
+	<polygon style="fill:#F5F5F5;" points="256,108.088 238.928,176.356 256,176.356 273.072,176.356 	"/>
+	<polygon style="fill:#F5F5F5;" points="256,403.916 238.928,335.644 256,335.644 273.072,335.644 	"/>
+	<polygon style="fill:#F5F5F5;" points="108.084,256 176.356,273.072 176.356,256 176.356,238.932 	"/>
+	<polygon style="fill:#F5F5F5;" points="403.916,256 335.644,273.072 335.644,256 335.644,238.932 	"/>
+</g>
+<polygon style="fill:#E16B5A;" points="396.792,115.204 235.892,235.888 256,256 276.116,276.108 "/>
+<polygon style="fill:#E6E6E6;" points="115.208,396.792 235.892,235.888 256,256 276.116,276.108 "/>
+</svg>

package/src/docs/main.ts

@@ -0,0 +1,27 @@
+import '../../node_modules/prismjs/themes/prism-okaidia.css'
+import './assets/scss/index.scss'
+import '../slim-select/slimselect.scss'
+
+import { createApp } from 'vue'
+import router from './router'
+
+import App from './app.vue'
+import Prism from 'prismjs'
+import Normalizer from 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace'
+import 'prismjs/plugins/toolbar/prism-toolbar'
+
+new Normalizer({
+  'remove-trailing': true,
+  'remove-indent': true,
+  'left-trim': true,
+  'right-trim': true,
+})
+
+const app = createApp(App)
+app.use(router)
+app.mixin({
+  updated() {
+    Prism.highlightAll()
+  },
+})
+app.mount('#app')

package/src/docs/pages/data.vue

@@ -0,0 +1,130 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import SlimSelect from '../../slim-select'
+
+export default defineComponent({
+  name: 'Data',
+  mounted() {
+    new SlimSelect({
+      select: this.$refs.dataSingle as HTMLSelectElement,
+      data: [
+        {
+          placeholder: true,
+          text: 'data placeholder',
+        },
+        { text: 'Cat' },
+        { text: 'Dog' },
+        { text: 'Bird' },
+      ],
+    })
+
+    new SlimSelect({
+      select: this.$refs.dataMultiple as HTMLSelectElement,
+      data: [
+        {
+          placeholder: true,
+          text: 'data placeholder',
+        },
+        { text: 'Human' },
+        {
+          label: 'Animals',
+          options: [{ text: 'Cat' }, { text: 'Dog' }, { text: 'Bird' }],
+        },
+      ],
+    })
+  },
+})
+</script>
+
+<template>
+  <div id="data" class="contents">
+    <div id="types" class="content">
+      <h2 class="header">Data Types</h2>
+      <p>
+        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.
+      </p>
+      <pre>
+        <code class="language-javascript">
+          var optgroup = {
+            label: 'label', // Required
+            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: '&lt;b&gt;Html&lt;/b&gt;', // Optional - will be used for display purposes if set
+            selected: false, // Optional - default is false
+            disabled: 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
+          }
+        </code>
+      </pre>
+    </div>
+
+    <div id="field" class="content">
+      <h2 class="header">Data Field</h2>
+      <p>
+        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.
+      </p>
+      <p>
+        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.
+      </p>
+
+      <div class="row">
+        <select ref="dataSingle"></select>
+        <select ref="dataMultiple" multiple></select>
+      </div>
+
+      <pre>
+        <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'}
+        </code>
+      </pre>
+    </div>
+  </div>
+</template>