sprintify-ui 0.1.17 → 0.2.0

package/src/components/BaseIconPicker.vue

@@ -1,215 +1,215 @@
-<template>
-  <div
-    class="w-full overflow-hidden rounded border bg-white"
-    :style="{
-      maxWidth: maxWidth,
-    }"
-  >
-    <div class="flex w-full min-w-0 overflow-hidden px-2 py-2">
-      <select
-        v-model="suffix"
-        class="max-w-[150px] shrink-0 rounded-l border-r-0 border-slate-300 py-1.5 pl-2 pr-6 focus:border-slate-300 focus:outline-none focus:ring-0 sm:text-sm"
-        @change="onSuffixChange"
-      >
-        <option v-for="(label, key) in suffixes" :key="key" :value="key">
-          {{ label }}
-        </option>
-      </select>
-
-      <input
-        v-model="keywords"
-        type="text"
-        :placeholder="t('sui.search') + '...'"
-        class="min-w-[40px] grow rounded-r border-slate-300 py-0 px-2 focus:border-blue-500 focus:ring-2 focus:ring-blue-300 sm:text-sm"
-      />
-    </div>
-
-    <div ref="drawer" class="h-44 overflow-y-auto px-2 pb-2">
-      <ul class="flex flex-wrap">
-        <li v-for="icon in filteredIcons" :key="icon">
-          <button
-            type="button"
-            :data-icon="icon"
-            :class="[
-              modelValue == icon
-                ? 'bg-primary-600 text-white'
-                : 'bg-white text-slate-800 hover:bg-slate-200',
-            ]"
-            class="flex items-center justify-center rounded p-1"
-            @click="onClick(icon)"
-          >
-            <BaseIcon :icon="icon" />
-          </button>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { Icon as BaseIcon } from '@iconify/vue';
-import { t } from '@/i18n';
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string | null;
-    collection?: string;
-    maxWidth?: string;
-  }>(),
-  {
-    modelValue: null,
-    collection: 'heroicons',
-    maxWidth: '300px',
-  }
-);
-
-const emit = defineEmits(['update:modelValue']);
-
-function onClick(icon: string) {
-  emit('update:modelValue', icon);
-}
-
-const icons = ref<string[]>([]);
-const suffixes = ref<Record<string, string>>({});
-const orderedSuffixKeys = computed(() => {
-  return Object.keys(suffixes.value).sort((a, b) => {
-    return b.length - a.length;
-  });
-});
-const suffix = ref<string | null>(null);
-const otherSuffixValue = computed(() => {
-  return Object.keys(suffixes.value).filter((s) => {
-    return s !== suffix.value;
-  });
-});
-
-const drawer = ref<HTMLElement | null>(null);
-
-const fullIcons = computed(() => {
-  return icons.value.map((icon) => {
-    return props.collection + ':' + icon;
-  });
-});
-
-const visibleIcons = computed(() => {
-  return fullIcons.value.filter((i) => {
-    const matchCurrent = i.endsWith(suffix.value ?? '');
-
-    if (!matchCurrent) {
-      return false;
-    }
-
-    const matches = otherSuffixValue.value.filter((s) => {
-      return i.endsWith(s);
-    });
-
-    const anotherMatchHasBiggerWeight = matches.some((m) => {
-      return m.length > (suffix.value ?? '').length;
-    });
-
-    if (anotherMatchHasBiggerWeight) {
-      return false;
-    }
-
-    return true;
-  });
-});
-
-const keywords = ref('');
-
-const filteredIcons = computed(() => {
-  if (!keywords.value) {
-    return visibleIcons.value;
-  }
-
-  return visibleIcons.value.filter((i) => {
-    return i.toLocaleLowerCase().includes(keywords.value.toLowerCase());
-  });
-});
-
-function fetchIcons() {
-  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();
-      });
-    });
-}
-
-function selectCurrentSuffix() {
-  if (!props.modelValue) {
-    return;
-  }
-
-  for (let i = 0; i < orderedSuffixKeys.value.length; i++) {
-    const s = orderedSuffixKeys.value[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;
-}
-
-function onSuffixChange() {
-  nextTick(() => {
-    let iconWithoutSuffix = props.modelValue ?? '';
-
-    orderedSuffixKeys.value.forEach((s) => {
-      let completeSuffix = s;
-
-      if (completeSuffix != '') {
-        completeSuffix = '-' + completeSuffix;
-      }
-
-      const regex = new RegExp(completeSuffix + '$');
-
-      iconWithoutSuffix = iconWithoutSuffix.replace(regex, '');
-    });
-
-    let suffixToAdd = suffix.value;
-    if (suffixToAdd != '') {
-      suffixToAdd = '-' + suffixToAdd;
-    }
-
-    emit('update:modelValue', iconWithoutSuffix + suffixToAdd);
-  });
-}
-
-onMounted(() => {
-  fetchIcons();
-});
-</script>
+<template>
+  <div
+    class="w-full overflow-hidden rounded border bg-white"
+    :style="{
+      maxWidth: maxWidth,
+    }"
+  >
+    <div class="flex w-full min-w-0 overflow-hidden px-2 py-2">
+      <select
+        v-model="suffix"
+        class="max-w-[150px] shrink-0 rounded-l border-r-0 border-slate-300 py-1.5 pl-2 pr-6 focus:border-slate-300 focus:outline-none focus:ring-0 sm:text-sm"
+        @change="onSuffixChange"
+      >
+        <option v-for="(label, key) in suffixes" :key="key" :value="key">
+          {{ label }}
+        </option>
+      </select>
+
+      <input
+        v-model="keywords"
+        type="text"
+        :placeholder="t('sui.search') + '...'"
+        class="min-w-[40px] grow rounded-r border-slate-300 py-0 px-2 focus:border-blue-500 focus:ring-2 focus:ring-blue-300 sm:text-sm"
+      />
+    </div>
+
+    <div ref="drawer" class="h-44 overflow-y-auto px-2 pb-2">
+      <ul class="flex flex-wrap">
+        <li v-for="icon in filteredIcons" :key="icon">
+          <button
+            type="button"
+            :data-icon="icon"
+            :class="[
+              modelValue == icon
+                ? 'bg-primary-600 text-white'
+                : 'bg-white text-slate-800 hover:bg-slate-200',
+            ]"
+            class="flex items-center justify-center rounded p-1"
+            @click="onClick(icon)"
+          >
+            <BaseIcon :icon="icon" />
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Icon as BaseIcon } from '@iconify/vue';
+import { t } from '@/i18n';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | null;
+    collection?: string;
+    maxWidth?: string;
+  }>(),
+  {
+    modelValue: null,
+    collection: 'heroicons',
+    maxWidth: '300px',
+  }
+);
+
+const emit = defineEmits(['update:modelValue']);
+
+function onClick(icon: string) {
+  emit('update:modelValue', icon);
+}
+
+const icons = ref<string[]>([]);
+const suffixes = ref<Record<string, string>>({});
+const orderedSuffixKeys = computed(() => {
+  return Object.keys(suffixes.value).sort((a, b) => {
+    return b.length - a.length;
+  });
+});
+const suffix = ref<string | null>(null);
+const otherSuffixValue = computed(() => {
+  return Object.keys(suffixes.value).filter((s) => {
+    return s !== suffix.value;
+  });
+});
+
+const drawer = ref<HTMLElement | null>(null);
+
+const fullIcons = computed(() => {
+  return icons.value.map((icon) => {
+    return props.collection + ':' + icon;
+  });
+});
+
+const visibleIcons = computed(() => {
+  return fullIcons.value.filter((i) => {
+    const matchCurrent = i.endsWith(suffix.value ?? '');
+
+    if (!matchCurrent) {
+      return false;
+    }
+
+    const matches = otherSuffixValue.value.filter((s) => {
+      return i.endsWith(s);
+    });
+
+    const anotherMatchHasBiggerWeight = matches.some((m) => {
+      return m.length > (suffix.value ?? '').length;
+    });
+
+    if (anotherMatchHasBiggerWeight) {
+      return false;
+    }
+
+    return true;
+  });
+});
+
+const keywords = ref('');
+
+const filteredIcons = computed(() => {
+  if (!keywords.value) {
+    return visibleIcons.value;
+  }
+
+  return visibleIcons.value.filter((i) => {
+    return i.toLocaleLowerCase().includes(keywords.value.toLowerCase());
+  });
+});
+
+function fetchIcons() {
+  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();
+      });
+    });
+}
+
+function selectCurrentSuffix() {
+  if (!props.modelValue) {
+    return;
+  }
+
+  for (let i = 0; i < orderedSuffixKeys.value.length; i++) {
+    const s = orderedSuffixKeys.value[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;
+}
+
+function onSuffixChange() {
+  nextTick(() => {
+    let iconWithoutSuffix = props.modelValue ?? '';
+
+    orderedSuffixKeys.value.forEach((s) => {
+      let completeSuffix = s;
+
+      if (completeSuffix != '') {
+        completeSuffix = '-' + completeSuffix;
+      }
+
+      const regex = new RegExp(completeSuffix + '$');
+
+      iconWithoutSuffix = iconWithoutSuffix.replace(regex, '');
+    });
+
+    let suffixToAdd = suffix.value;
+    if (suffixToAdd != '') {
+      suffixToAdd = '-' + suffixToAdd;
+    }
+
+    emit('update:modelValue', iconWithoutSuffix + suffixToAdd);
+  });
+}
+
+onMounted(() => {
+  fetchIcons();
+});
+</script>