sprintify-ui 0.0.147 → 0.0.149

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.147",
+  "version": "0.0.149",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseIconPicker.stories.js

@@ -9,7 +9,7 @@ export default {
 const Template = (args) => ({
   components: { BaseIconPicker, ShowValue },
   setup() {
-    const value = ref(null);
+    const value = ref('heroicons:user-group-solid');
     return { args, value };
   },
   template: `

package/src/components/BaseIconPicker.vue

@@ -4,7 +4,6 @@
       <select
         v-model="suffix"
         class="max-w-[80px] shrink-0 rounded-l border-r-0 border-slate-300 text-xs focus:border-slate-300 focus:outline-none focus:ring-0"
-        @change="scrollTop"
       >
         <option v-for="(label, key) in suffixes" :key="key" :value="key">
           {{ label }}
@@ -24,6 +23,7 @@
         <li v-for="icon in filteredIcons" :key="icon">
           <button
             type="button"
+            :data-icon="icon"
             :class="[
               modelValue == icon
                 ? 'bg-primary-600 text-white'
@@ -41,7 +41,7 @@
 </template>
 
 <script lang="ts" setup>
-import { BaseIcon, config } from '..';
+import { BaseIcon } from '..';
 
 const props = withDefaults(
   defineProps<{
@@ -114,20 +114,67 @@ const filteredIcons = computed(() => {
 });
 
 function fetchIcons() {
-  config.http
-    .get('https://api.iconify.design/collection?prefix=' + props.collection)
-    .then((response) => {
-      icons.value = response.data.uncategorized;
-      suffixes.value = response.data.suffixes;
-      suffix.value = Object.keys(suffixes.value)[0] as string;
+  fetch('https://api.iconify.design/collection?prefix=' + props.collection)
+    .then((response) => response.json())
+    .then((data) => {
+      // Set icons
+      icons.value = data.uncategorized;
+
+      // Set suffix list
+      suffixes.value = data.suffixes;
+
+      // Set suffix
+      selectCurrentSuffix();
+
+      // Scroll to icon
+
+      nextTick(() => {
+        scrollToIcon();
+      });
     });
 }
 
-fetchIcons();
+function selectCurrentSuffix() {
+  if (!props.modelValue) {
+    return;
+  }
 
-function scrollTop() {
-  if (drawer.value) {
-    drawer.value.scrollTop = 0;
+  const suffixesOrderedByLength = Object.keys(suffixes.value).sort((a, b) => {
+    return b.length - a.length;
+  });
+
+  for (let i = 0; i < suffixesOrderedByLength.length; i++) {
+    const s = suffixesOrderedByLength[i];
+
+    if (props.modelValue.endsWith(s)) {
+      suffix.value = s;
+
+      return;
+    }
   }
 }
+
+function scrollToIcon() {
+  if (!drawer.value) {
+    return;
+  }
+
+  if (!props.modelValue) {
+    return;
+  }
+
+  const icon = drawer.value.querySelector(
+    'button[data-icon="' + props.modelValue + '"]'
+  ) as HTMLElement | null;
+
+  if (!icon) {
+    return;
+  }
+
+  drawer.value.scrollTop = icon.offsetTop - 10;
+}
+
+onMounted(() => {
+  fetchIcons();
+});
 </script>