docs: add icon search input (#6828)

* docs: add icon search input

* docs: add affix for search input

Author: kovsu

site/src/layouts/header/SearchBox.vue

@@ -5,7 +5,7 @@
       ref="inputRef"
       :placeholder="searchPlaceholder"
       @focus="triggerFocus(true)"
-      @blue="triggerFocus(false)"
+      @blur="triggerFocus(false)"
     ></a-input>
   </div>
 </template>

site/src/theme/static/common.less

@@ -46,11 +46,6 @@ a {
   &:hover &-inner {
     overflow-y: auto;
   }
-
-  > div,
-  > div > div {
-    height: 100%;
-  }
 }
 
 .aside-container {

site/src/theme/static/icons.less

@@ -86,3 +86,17 @@ ul.anticons-list {
   background: #f5f5f5;
   border-radius: 2px;
 }
+
+.icons-affix {
+  display: flex;
+  justify-content: space-between;
+  transition: all 0.25s;
+}
+
+.icons-affixed {
+  padding: 12px;
+  margin: -8px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color-base);
+  background-color: var(--body-background);
+}

site/src/theme/template/IconDisplay/CopyableIcon.vue

@@ -22,8 +22,8 @@ const allIcons = AntdIcons;
 const kebabCase = function kebabCase(str) {
   return str
     .split(/(?=[A-Z])/)
-    .join('-')
-    .toLowerCase();
+    .map(s => s.replace(s[0], s[0].toUpperCase()))
+    .join('');
 };
 
 export default defineComponent({

site/src/theme/template/IconDisplay/index.jsx

@@ -24,13 +24,17 @@ const IconDisplay = defineComponent({
   data() {
     return {
       theme: ThemeType.Outlined,
+      searchVal: '',
+      searchBarAffixed: false,
     };
   },
   methods: {
     handleChangeTheme(e) {
       this.theme = e.target.value;
     },
-
+    handleAffixChange(affixed) {
+      this.searchBarAffixed = affixed;
+    },
     renderCategories() {
       const { theme } = this;
 
@@ -42,7 +46,10 @@ const IconDisplay = defineComponent({
             category: key,
             icons: iconList
               .map(iconName => iconName + theme)
-              .filter(iconName => allIcons[iconName]),
+              .filter(iconName => {
+                if (iconName.toLowerCase().includes(this.searchVal.trim().toLowerCase()))
+                  return allIcons[iconName];
+              }),
           };
         })
         .filter(({ icons }) => !!icons.length)
@@ -62,18 +69,31 @@ const IconDisplay = defineComponent({
     return (
       <div>
         <h3 style="margin: 1.6em 0 .6em;">{this.$t('app.docs.components.icon.pick-theme')}</h3>
-        <a-radio-group value={this.theme} onChange={this.handleChangeTheme}>
-          <a-radio-button value={ThemeType.Outlined}>
-            <Icon component={OutlinedIcon} /> {this.$t('app.docs.components.icon.outlined')}
-          </a-radio-button>
-          <a-radio-button value={ThemeType.Filled}>
-            <Icon component={FilledIcon} /> {this.$t('app.docs.components.icon.filled')}
-          </a-radio-button>
-          <a-radio-button value={ThemeType.TwoTone}>
-            <Icon component={TwoToneIcon} /> {this.$t('app.docs.components.icon.two-tone')}
-          </a-radio-button>
-        </a-radio-group>
-        {this.renderCategories()}
+        <a-affix offset-top={32} onChange={this.handleAffixChange}>
+          <div class={this.searchBarAffixed ? 'icons-affix icons-affixed' : 'icons-affix'}>
+            <a-radio-group value={this.theme} onChange={this.handleChangeTheme}>
+              <a-radio-button value={ThemeType.Outlined}>
+                <Icon component={OutlinedIcon} /> {this.$t('app.docs.components.icon.outlined')}
+              </a-radio-button>
+              <a-radio-button value={ThemeType.Filled}>
+                <Icon component={FilledIcon} /> {this.$t('app.docs.components.icon.filled')}
+              </a-radio-button>
+              <a-radio-button value={ThemeType.TwoTone}>
+                <Icon component={TwoToneIcon} /> {this.$t('app.docs.components.icon.two-tone')}
+              </a-radio-button>
+            </a-radio-group>
+            <a-input-search
+              style="flex: 1 1 0%; margin-inline-start: 16px;"
+              placeholder={this.$t('app.docs.components.icon.search.placeholder')}
+              v-model:value={this.searchVal}
+            />
+          </div>
+        </a-affix>
+        {this.renderCategories().length === 0 ? (
+          <a-empty style="padding: 12px 0;" />
+        ) : (
+          this.renderCategories()
+        )}
       </div>
     );
   },