sprintify-ui 0.1.15 → 0.1.17

package/src/components/BaseTagAutocompleteFetch.vue

@@ -1,201 +1,206 @@
-<template>
-  <BaseTagAutocomplete
-    ref="tagAutocomplete"
-    :loading="showLoading && page == 1"
-    :loading-bottom="showLoading && page > 1"
-    :model-value="modelValue"
-    :disabled="disabled"
-    :placeholder="placeholder"
-    :options="options"
-    :value-key="valueKey"
-    :label-key="labelKey"
-    :has-error="hasError"
-    :max="max"
-    :filter="() => true"
-    @open="onOpen"
-    @typing="onTyping"
-    @scroll-bottom="scrollBottom"
-    @update:model-value="$emit('update:modelValue', $event)"
-  >
-    <template #option="optionProps">
-      <slot name="option" v-bind="optionProps" />
-    </template>
-
-    <template #footer="footerProps">
-      <slot name="footer" v-bind="footerProps" :keywords="keywords"> </slot>
-    </template>
-
-    <template #empty="emptyProps">
-      <slot name="empty" v-bind="emptyProps" :first-search="firstSearch">
-        <div
-          v-if="firstSearch"
-          class="flex h-[80px] items-center justify-center px-3 text-center text-base leading-tight text-slate-600"
-        >
-          {{ $t('sui.nothing_found') }}
-        </div>
-      </slot>
-    </template>
-  </BaseTagAutocomplete>
-</template>
-
-<script lang="ts" setup>
-import { debounce, isArray, throttle } from 'lodash';
-import { config } from '@/index';
-import { PropType } from 'vue';
-import {
-  Collection,
-  Option,
-  PaginatedCollection,
-  ResourceCollection,
-} from '@/types';
-import BaseTagAutocomplete from './BaseTagAutocomplete.vue';
-import { useHasPaginatedData } from '@/composables/paginatedData';
-
-const props = defineProps({
-  modelValue: {
-    required: true,
-    type: Array as PropType<Option[]>,
-  },
-  url: {
-    required: true,
-    type: String,
-  },
-  labelKey: {
-    required: true,
-    type: String,
-  },
-  valueKey: {
-    required: true,
-    type: String,
-  },
-  placeholder: {
-    default: undefined,
-    type: String,
-  },
-  required: {
-    default: false,
-    type: Boolean,
-  },
-  disabled: {
-    default: false,
-    type: Boolean,
-  },
-  max: {
-    default: undefined,
-    type: Number,
-  },
-  queryKey: {
-    default: 'search',
-    type: String,
-  },
-  hasError: {
-    default: false,
-    type: Boolean,
-  },
-});
-
-defineEmits(['update:modelValue', 'typing', 'focus', 'scrollBottom']);
-
-const tagAutocomplete = ref<InstanceType<typeof BaseTagAutocomplete> | null>(
-  null
-);
-
-const http = config.http;
-
-const showLoading = ref(false);
-const fetching = ref(false);
-const firstSearch = ref(false);
-const keywords = ref('');
-const page = ref(1);
-const options = ref<Option[]>([]);
-
-const data = ref<null | ResourceCollection | PaginatedCollection | Collection>(
-  null
-);
-
-const { items, lastPage } = useHasPaginatedData(data);
-
-const onTyping = (query: string) => {
-  page.value = 1;
-
-  if (keywords.value != query) {
-    keywords.value = query;
-    showLoading.value = true;
-    debouncedSearch();
-  }
-};
-
-const onOpen = () => {
-  if (!firstSearch.value) {
-    search();
-  }
-};
-
-const scrollBottom = throttle(() => {
-  if (page.value >= lastPage.value) {
-    return;
-  }
-  if (fetching.value) {
-    return;
-  }
-
-  page.value++;
-  search();
-}, 500);
-
-watch(
-  () => props.url,
-  () => {
-    page.value = 1;
-    search();
-  }
-);
-
-const search = () => {
-  if (fetching.value) {
-    return;
-  }
-
-  fetching.value = true;
-  showLoading.value = true;
-  firstSearch.value = true;
-
-  http
-    .get(props.url, {
-      params: {
-        [props.queryKey]: keywords.value,
-        page: page.value,
-      },
-    })
-    .then((response: any) => {
-      data.value = response.data as
-        | ResourceCollection
-        | PaginatedCollection
-        | Collection;
-
-      if (page.value == 1) {
-        options.value = items.value;
-      } else {
-        options.value.push(...items.value);
-      }
-
-      firstSearch.value = true;
-    })
-    .finally(() => {
-      fetching.value = false;
-      showLoading.value = false;
-    });
-};
-
-const debouncedSearch = debounce(() => {
-  search();
-}, 300);
-
-defineExpose({
-  focus: () => tagAutocomplete.value?.focus(),
-  blur: () => tagAutocomplete.value?.blur(),
-  open: () => tagAutocomplete.value?.open(),
-  close: () => tagAutocomplete.value?.close(),
-  setKeywords: (input: string) => tagAutocomplete.value?.setKeywords(input),
-});
-</script>
+<template>
+  <BaseTagAutocomplete
+    ref="tagAutocomplete"
+    :loading="showLoading && page == 1"
+    :loading-bottom="showLoading && page > 1"
+    :model-value="modelValue"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :options="options"
+    :value-key="valueKey"
+    :label-key="labelKey"
+    :has-error="hasError"
+    :max="max"
+    :filter="() => true"
+    @open="onOpen"
+    @typing="onTyping"
+    @scroll-bottom="scrollBottom"
+    @update:model-value="$emit('update:modelValue', $event)"
+  >
+    <template #items="itemProps">
+      <slot name="items" v-bind="itemProps" />
+    </template>
+
+    <template #option="optionProps">
+      <slot name="option" v-bind="optionProps" />
+    </template>
+
+    <template #footer="footerProps">
+      <slot name="footer" v-bind="footerProps" :keywords="keywords"> </slot>
+    </template>
+
+    <template #empty="emptyProps">
+      <slot name="empty" v-bind="emptyProps" :first-search="firstSearch">
+        <div
+          v-if="firstSearch"
+          class="flex h-[80px] items-center justify-center px-3 text-center text-base leading-tight text-slate-600"
+        >
+          {{ t('sui.nothing_found') }}
+        </div>
+      </slot>
+    </template>
+  </BaseTagAutocomplete>
+</template>
+
+<script lang="ts" setup>
+import { debounce, throttle } from 'lodash';
+import { config } from '@/index';
+import { PropType } from 'vue';
+import {
+  Collection,
+  Option,
+  PaginatedCollection,
+  ResourceCollection,
+} from '@/types';
+import BaseTagAutocomplete from './BaseTagAutocomplete.vue';
+import { useHasPaginatedData } from '@/composables/paginatedData';
+import { t } from '@/i18n';
+
+const props = defineProps({
+  modelValue: {
+    required: true,
+    type: Array as PropType<Option[]>,
+  },
+  url: {
+    required: true,
+    type: String,
+  },
+  labelKey: {
+    required: true,
+    type: String,
+  },
+  valueKey: {
+    required: true,
+    type: String,
+  },
+  placeholder: {
+    default: undefined,
+    type: String,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  max: {
+    default: undefined,
+    type: Number,
+  },
+  queryKey: {
+    default: 'search',
+    type: String,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+defineEmits(['update:modelValue', 'typing', 'focus', 'scrollBottom']);
+
+const tagAutocomplete = ref<InstanceType<typeof BaseTagAutocomplete> | null>(
+  null
+);
+
+const http = config.http;
+
+const showLoading = ref(false);
+const fetching = ref(false);
+const firstSearch = ref(false);
+const keywords = ref('');
+const page = ref(1);
+const options = ref<Option[]>([]);
+
+const data = ref<null | ResourceCollection | PaginatedCollection | Collection>(
+  null
+);
+
+const { items, lastPage } = useHasPaginatedData(data);
+
+const onTyping = (query: string) => {
+  page.value = 1;
+
+  if (keywords.value != query) {
+    keywords.value = query;
+    showLoading.value = true;
+    debouncedSearch();
+  }
+};
+
+const onOpen = () => {
+  if (!firstSearch.value) {
+    search();
+  }
+};
+
+const scrollBottom = throttle(() => {
+  if (page.value >= lastPage.value) {
+    return;
+  }
+  if (fetching.value) {
+    return;
+  }
+
+  page.value++;
+  search();
+}, 500);
+
+watch(
+  () => props.url,
+  () => {
+    page.value = 1;
+    search();
+  }
+);
+
+const search = () => {
+  if (fetching.value) {
+    return;
+  }
+
+  fetching.value = true;
+  showLoading.value = true;
+  firstSearch.value = true;
+
+  http
+    .get(props.url, {
+      params: {
+        [props.queryKey]: keywords.value,
+        page: page.value,
+      },
+    })
+    .then((response: any) => {
+      data.value = response.data as
+        | ResourceCollection
+        | PaginatedCollection
+        | Collection;
+
+      if (page.value == 1) {
+        options.value = items.value;
+      } else {
+        options.value.push(...items.value);
+      }
+
+      firstSearch.value = true;
+    })
+    .finally(() => {
+      fetching.value = false;
+      showLoading.value = false;
+    });
+};
+
+const debouncedSearch = debounce(() => {
+  search();
+}, 300);
+
+defineExpose({
+  focus: () => tagAutocomplete.value?.focus(),
+  blur: () => tagAutocomplete.value?.blur(),
+  open: () => tagAutocomplete.value?.open(),
+  close: () => tagAutocomplete.value?.close(),
+  setKeywords: (input: string) => tagAutocomplete.value?.setKeywords(input),
+});
+</script>

package/src/components/BaseTextarea.stories.js

@@ -1,43 +1,43 @@
-import { createFieldStory } from '../../.storybook/utils';
-import BaseTextarea from './BaseTextarea.vue';
-
-export default {
-  title: 'Form/BaseTextarea',
-  component: BaseTextarea,
-  args: {
-    placeholder: 'Describe your complete life in 4 sentences...',
-  },
-};
-
-const Template = (args) => ({
-  components: {
-    BaseTextarea,
-  },
-  setup() {
-    const value = ref('');
-    return { args, value };
-  },
-  template: `
-  <form @submit.prevent="" class="border-none">
-    <BaseTextarea v-model="value" v-bind="args" class="w-full"></BaseTextarea>
-    <button type="submit" class="btn btn-primary mt-4">Submit</button>
-  </form>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {
-  required: true,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  modelValue: 'Lorem ipsum...',
-  disabled: true,
-};
-
-export const Field = createFieldStory({
-  component: BaseTextarea,
-  componentName: 'BaseTextarea',
-  label: 'Biography',
-});
+import { createFieldStory } from '../../.storybook/utils';
+import BaseTextarea from './BaseTextarea.vue';
+
+export default {
+  title: 'Form/BaseTextarea',
+  component: BaseTextarea,
+  args: {
+    placeholder: 'Describe your complete life in 4 sentences...',
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseTextarea,
+  },
+  setup() {
+    const value = ref('');
+    return { args, value };
+  },
+  template: `
+  <form @submit.prevent="" class="border-none">
+    <BaseTextarea v-model="value" v-bind="args" class="w-full"></BaseTextarea>
+    <button type="submit" class="btn btn-primary mt-4">Submit</button>
+  </form>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  required: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  modelValue: 'Lorem ipsum...',
+  disabled: true,
+};
+
+export const Field = createFieldStory({
+  component: BaseTextarea,
+  componentName: 'BaseTextarea',
+  label: 'Biography',
+});

package/src/components/BaseTextarea.vue

@@ -1,87 +1,87 @@
-<template>
-  <textarea
-    :value="modelValue ?? undefined"
-    :type="type"
-    :name="nameInternal"
-    :placeholder="placeholder"
-    :disabled="disabled"
-    :required="requiredInternal"
-    :rows="rows"
-    :class="[hasErrorInternal ? 'border-red-500' : 'border-slate-300']"
-    class="block mb-0 rounded disabled:cursor-not-allowed disabled:text-slate-300"
-    @input="emitUpdate(transformInputValue($event))"
-  />
-</template>
-
-<script lang="ts" setup>
-import { useField } from '@/composables/field';
-import { get, isString, trim } from 'lodash';
-import { PropType } from 'vue';
-
-const props = defineProps({
-  modelValue: {
-    default: undefined,
-    type: [String, null, undefined] as PropType<string | null | undefined>,
-  },
-  type: {
-    type: String,
-    default: 'text',
-  },
-  autocomplete: {
-    default: true,
-    type: Boolean,
-  },
-  preventSubmit: {
-    default: false,
-    type: Boolean,
-  },
-  name: {
-    default: undefined,
-    type: String,
-  },
-  placeholder: {
-    default: '',
-    type: String,
-  },
-  disabled: {
-    default: false,
-    type: Boolean,
-  },
-  required: {
-    default: false,
-    type: Boolean,
-  },
-  rows: {
-    default: undefined,
-    type: Number,
-  },
-  hasError: {
-    default: false,
-    type: Boolean,
-  },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate } =
-  useField({
-    name: computed(() => props.name),
-    required: computed(() => props.required),
-    hasError: computed(() => props.hasError),
-    emit: emit,
-  });
-
-function transformInputValue(event: Event | null): string | null {
-  if (event === null) {
-    return null;
-  }
-
-  const value = get(event, 'target.value', null);
-
-  if (isString(value)) {
-    return value;
-  }
-
-  return '';
-}
-</script>
+<template>
+  <textarea
+    :value="modelValue ?? undefined"
+    :type="type"
+    :name="nameInternal"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :required="requiredInternal"
+    :rows="rows"
+    :class="[hasErrorInternal ? 'border-red-500' : 'border-slate-300']"
+    class="block mb-0 rounded disabled:cursor-not-allowed disabled:text-slate-300"
+    @input="emitUpdate(transformInputValue($event))"
+  />
+</template>
+
+<script lang="ts" setup>
+import { useField } from '@/composables/field';
+import { get, isString, trim } from 'lodash';
+import { PropType } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    default: undefined,
+    type: [String, null, undefined] as PropType<string | null | undefined>,
+  },
+  type: {
+    type: String,
+    default: 'text',
+  },
+  autocomplete: {
+    default: true,
+    type: Boolean,
+  },
+  preventSubmit: {
+    default: false,
+    type: Boolean,
+  },
+  name: {
+    default: undefined,
+    type: String,
+  },
+  placeholder: {
+    default: '',
+    type: String,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  rows: {
+    default: undefined,
+    type: Number,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate } =
+  useField({
+    name: computed(() => props.name),
+    required: computed(() => props.required),
+    hasError: computed(() => props.hasError),
+    emit: emit,
+  });
+
+function transformInputValue(event: Event | null): string | null {
+  if (event === null) {
+    return null;
+  }
+
+  const value = get(event, 'target.value', null);
+
+  if (isString(value)) {
+    return value;
+  }
+
+  return '';
+}
+</script>