sprintify-ui 0.0.97 → 0.0.99

package/src/components/BaseAutocompleteFetch.vue

@@ -2,6 +2,7 @@
   <BaseAutocomplete
     ref="input"
     :loading="showLoading && page == 1"
+    :loading-bottom="showLoading && page > 1"
     :model-value="modelValue"
     :disabled="disabled"
     :name="name"
@@ -46,7 +47,7 @@
 
 <script lang="ts" setup>
 import { config } from '@/index';
-import { debounce } from 'lodash';
+import { debounce, throttle } from 'lodash';
 import { PropType, Ref } from 'vue';
 import { Option } from '@/types';
 import BaseAutocomplete from './BaseAutocomplete.vue';
@@ -161,12 +162,16 @@ const onClear = () => {
   emit('clear');
 };
 
-const scrollBottom = () => {
+const scrollBottom = throttle(() => {
+  if (fetching.value) {
+    return;
+  }
+
   if (!reachedEnd.value) {
     page.value++;
     search();
   }
-};
+}, 500);
 
 function search() {
   if (fetching.value) {

package/src/components/BaseDropdown.vue

@@ -137,8 +137,8 @@ function deactivate() {
 
 useClickOutside(
   dropdown,
-  (outside: boolean) => {
-    if (outside && showDropdown.value) {
+  () => {
+    if (showDropdown.value) {
       close();
     }
   },

package/src/components/BaseModalSide.stories.js

@@ -5,9 +5,7 @@ import BaseAvatar from './BaseAvatar.vue';
 export default {
   title: 'Components/BaseModalSide',
   component: BaseModalSide,
-  args: {
-    position: 'bottom-right',
-  },
+  args: {},
 };
 
 const Template = (args) => ({

package/src/components/BaseModalSide.vue

@@ -96,14 +96,14 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue']);
 
-const modal = useModal(
-  computed(() => props.modelValue),
-  emit
-);
-
 const breakpoints = useBreakpoints();
 
 const realMaxWidth = computed((): string => {
   return breakpoints.greater('sm').value ? props.maxWidth : '100%';
 });
+
+const modal = useModal(
+  computed(() => props.modelValue),
+  emit
+);
 </script>

package/src/components/BaseTagAutocomplete.stories.js

@@ -3,10 +3,25 @@ import BaseTagAutocomplete from './BaseTagAutocomplete.vue';
 import ShowValue from '@/../.storybook/components/ShowValue.vue';
 import BaseAppNotifications from './BaseAppNotifications.vue';
 
+const sizes = ['xs', 'sm', 'base'];
+
 export default {
   title: 'Form/BaseTagAutocomplete',
   component: BaseTagAutocomplete,
-  argTypes: {},
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+        options: sizes,
+      },
+    },
+    dropdownShow: {
+      control: {
+        type: 'select',
+        options: ['always', 'focus'],
+      },
+    },
+  },
   args: {
     labelKey: 'label',
     valueKey: 'value',
@@ -30,6 +45,17 @@ const Template = (args) => ({
 export const Demo = Template.bind({});
 Demo.args = {};
 
+export const AlwaysShowDropdown = Template.bind({});
+AlwaysShowDropdown.args = {
+  inline: true,
+  dropdownShow: 'always',
+};
+
+export const NoFocus = Template.bind({});
+NoFocus.args = {
+  visibleFocus: false,
+};
+
 export const Disabled = Template.bind({});
 Disabled.args = {
   options: options,
@@ -42,6 +68,25 @@ Loading.args = {
   loading: true,
 };
 
+export const Inline = Template.bind({});
+Inline.args = {
+  inline: true,
+};
+
+export const Sizes = (args) => ({
+  components: { BaseTagAutocomplete },
+  setup() {
+    const value = ref([]);
+    return { args, sizes, value };
+  },
+  template: `
+  <div v-for="size in sizes" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight">{{ size }}</p>
+    <BaseTagAutocomplete v-model="value" v-bind="args" :size="size"></BaseTagAutocomplete>
+  </div>
+  `,
+});
+
 export const SlotOption = (args) => ({
   components: { BaseTagAutocomplete, ShowValue, BaseAppNotifications },
   setup() {