deploy: bfb218b

Author: MrEssex

assets/search.json

@@ -386,7 +386,7 @@ <h2>Components</h2>
           <ul>
             <li class="top"><a href="#">Data Select</a></li>
             <li data-level="2"><a href="#examples">Examples</a></li>
-            <li data-level="3"><a href="#show-prefix">Show Prefix</a></li>
+            <li data-level="3"><a href="#icon-position">Icon Position</a></li>
             <li data-level="3"><a href="#clearable">Clearable</a></li>
             <li data-level="3"><a href="#filtered">Filtered</a></li>
             <li data-level="2"><a href="#importing">Importing</a></li>
@@ -465,16 +465,16 @@ <h1>Data Select</h1>
           <h2 id="examples" class="anchor-heading">
             Examples<a href="#examples" aria-label='Direct link to "Examples"'></a>
           </h2>
-          <h3 id="show-prefix" class="anchor-heading">
-            Show Prefix<a href="#show-prefix" aria-label='Direct link to "Show Prefix"'></a>
+          <h3 id="icon-position" class="anchor-heading">
+            Icon Position<a href="#icon-position" aria-label='Direct link to "Icon Position"'></a>
           </h3>
+          <p>Icon position can be set to <code>start</code> or <code>end</code>. The default is <code>none</code>.</p>
 
           <div class="code-preview">
             <div class="code-preview__preview">
               <div class="form-spacing">
-                <zn-data-select provider="country" name="country" show-prefix=""></zn-data-select>
-                <zn-data-select provider="currency" name="currency" show-prefix=""></zn-data-select>
-                <zn-data-select provider="color" name="color" show-prefix=""></zn-data-select>
+                <zn-data-select provider="country" name="country" icon-position="start"></zn-data-select>
+                <zn-data-select provider="country" name="country" icon-position="end"></zn-data-select>
               </div>
 
               <div class="code-preview__resizer">
@@ -486,9 +486,8 @@ <h3 id="show-prefix" class="anchor-heading">
               <div class="code-preview__source code-preview__source--html">
                 <pre><code class="language-html" id="code-block-99">
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-spacing<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>zn-data-select</span> <span class="token attr-name">provider</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>country<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>country<span class="token punctuation">"</span></span> <span class="token attr-name">show-prefix</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>zn-data-select</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>zn-data-select</span> <span class="token attr-name">provider</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>currency<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>currency<span class="token punctuation">"</span></span> <span class="token attr-name">show-prefix</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>zn-data-select</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>zn-data-select</span> <span class="token attr-name">provider</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color<span class="token punctuation">"</span></span> <span class="token attr-name">show-prefix</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>zn-data-select</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>zn-data-select</span> <span class="token attr-name">provider</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>country<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>country<span class="token punctuation">"</span></span> <span class="token attr-name">icon-position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>start<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>zn-data-select</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>zn-data-select</span> <span class="token attr-name">provider</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>country<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>country<span class="token punctuation">"</span></span> <span class="token attr-name">icon-position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>end<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>zn-data-select</span><span class="token punctuation">&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
 </code><zn-copy-button class="copy-code-button" from="code-block-99"></zn-copy-button></pre>
               </div>
@@ -748,25 +747,6 @@ <h2 id="properties" class="anchor-heading">
                   <td>-</td>
                 </tr>
 
-                <tr>
-                  <td>
-                    <code class="nowrap">showPrefix</code>
-
-                    <br />
-                    <zn-tooltip content="This attribute is different from its property">
-                      <small>
-                        <code class="nowrap"> show-prefix </code>
-                      </small>
-                    </zn-tooltip>
-                  </td>
-                  <td>Whether we should show the prefix of the options, and the select.</td>
-                  <td style="text-align: center"></td>
-                  <td>
-                    <code>boolean</code>
-                  </td>
-                  <td>-</td>
-                </tr>
-
                 <tr>
                   <td>
                     <code class="nowrap">filter</code>