sprintify-ui 0.0.146 → 0.0.148

package/dist/types/src/components/BaseIconPicker.vue.d.ts

@@ -0,0 +1,33 @@
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    modelValue?: string | null | undefined;
+    collection?: string | undefined;
+}>, {
+    modelValue: null;
+    collection: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    modelValue?: string | null | undefined;
+    collection?: string | undefined;
+}>, {
+    modelValue: null;
+    collection: string;
+}>>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: string | null;
+    collection: string;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

package/dist/types/src/components/index.d.ts

@@ -39,6 +39,7 @@ import BaseFileUploader from './BaseFileUploader.vue';
 import BaseForm from './BaseForm.vue';
 import BaseHasMany from './BaseHasMany.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
+import BaseIconPicker from './BaseIconPicker.vue';
 import BaseInput from './BaseInput.vue';
 import BaseInputLabel from './BaseInputLabel.vue';
 import BaseInputPercent from './BaseInputPercent.vue';
@@ -83,4 +84,4 @@ import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
 import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
-export { BaseActionItem, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClickOutside, BaseClipboard, BaseColor, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDisplayRelativeTime, BaseDropdown, BaseDropdownAutocomplete, BaseEmptyState, BaseField, BaseFieldI18n, BaseFilePicker, BaseFileUploader, BaseForm, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseInputPercent, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BaseNumber, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };
+export { BaseActionItem, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClickOutside, BaseClipboard, BaseColor, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDisplayRelativeTime, BaseDropdown, BaseDropdownAutocomplete, BaseEmptyState, BaseField, BaseFieldI18n, BaseFilePicker, BaseFileUploader, BaseForm, BaseHasMany, BaseIcon, BaseIconPicker, BaseInput, BaseInputLabel, BaseInputPercent, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BaseNumber, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };

package/package.json

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

package/src/components/BaseIconPicker.stories.js

@@ -0,0 +1,22 @@
+import BaseIconPicker from './BaseIconPicker.vue';
+import ShowValue from '../../.storybook/components/ShowValue.vue';
+
+export default {
+  title: 'Components/BaseIconPicker',
+  component: BaseIconPicker,
+};
+
+const Template = (args) => ({
+  components: { BaseIconPicker, ShowValue },
+  setup() {
+    const value = ref(null);
+    return { args, value };
+  },
+  template: `
+    <BaseIconPicker v-bind="args" v-model="value"></BaseIconPicker>
+    <ShowValue :value="value" />
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseIconPicker.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="w-full max-w-[268px] overflow-hidden rounded border bg-white">
+    <div class="flex w-full min-w-0 overflow-hidden px-3 pt-3">
+      <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 }}
+        </option>
+      </select>
+
+      <input
+        v-model="keywords"
+        type="text"
+        :placeholder="$t('sui.autocomplete_placeholder')"
+        class="grow rounded-r border-slate-300 text-xs"
+      />
+    </div>
+
+    <div ref="drawer" class="h-44 overflow-y-auto py-2 px-3">
+      <ul class="flex flex-wrap">
+        <li v-for="icon in filteredIcons" :key="icon">
+          <button
+            type="button"
+            :class="[
+              modelValue == icon
+                ? 'bg-primary-600 text-white'
+                : 'bg-white text-slate-900 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 { BaseIcon, config } from '..';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | null;
+    collection?: string;
+  }>(),
+  {
+    modelValue: null,
+    collection: 'heroicons',
+  }
+);
+
+const emit = defineEmits(['update:modelValue']);
+
+function onClick(icon: string) {
+  emit('update:modelValue', icon);
+}
+
+const icons = ref<string[]>([]);
+const suffixes = ref<Record<string, string>>({});
+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) => {
+      icons.value = data.uncategorized;
+      suffixes.value = data.suffixes;
+      suffix.value = Object.keys(suffixes.value)[0] as string;
+    });
+}
+
+fetchIcons();
+
+function scrollTop() {
+  if (drawer.value) {
+    drawer.value.scrollTop = 0;
+  }
+}
+</script>

package/src/components/index.ts

@@ -39,6 +39,7 @@ import BaseFileUploader from './BaseFileUploader.vue';
 import BaseForm from './BaseForm.vue';
 import BaseHasMany from './BaseHasMany.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
+import BaseIconPicker from './BaseIconPicker.vue';
 import BaseInput from './BaseInput.vue';
 import BaseInputLabel from './BaseInputLabel.vue';
 import BaseInputPercent from './BaseInputPercent.vue';
@@ -127,6 +128,7 @@ export {
   BaseForm,
   BaseHasMany,
   BaseIcon,
+  BaseIconPicker,
   BaseInput,
   BaseInputLabel,
   BaseInputPercent,