sprintify-ui 0.0.102 → 0.0.104

package/src/components/BaseDropdownAutocomplete.vue

@@ -0,0 +1,225 @@
+<template>
+  <BaseDropdown
+    :animated="true"
+    :keep-alive="false"
+    :placement="placement"
+    :padding="padding"
+    @open="onOpen"
+    @close="onClose"
+  >
+    <template #button="buttonProps">
+      <slot name="button" v-bind="buttonProps" :new-value="newValue"></slot>
+    </template>
+    <template #dropdown="{ close }">
+      <div
+        class="inline-block w-[320px] overflow-hidden rounded-md border border-slate-300 bg-white px-1 pt-1 shadow-lg"
+      >
+        <component
+          :is="componentName"
+          ref="autocomplete"
+          :model-value="newValue"
+          :size="size"
+          v-bind="autocompleteProps"
+          :label-key="labelKey"
+          :value-key="valueKey"
+          :inline="true"
+          :required="required"
+          dropdown-show="always"
+          @update:model-value="onUpdate($event, close)"
+        >
+          <template #option="optionProps">
+            <div
+              :class="[optionProps.active ? 'bg-slate-100' : 'bg-white']"
+              class="mb-px flex items-center rounded py-1 px-1"
+            >
+              <div class="flex grow items-center">
+                <slot
+                  name="option"
+                  :option="optionProps.option"
+                  :active="optionProps.active"
+                  :size="size"
+                ></slot>
+              </div>
+              <div class="shrink-0">
+                <BaseIcon
+                  v-if="
+                    (optionProps.selected ?? false) ||
+                    (optionProps.option[valueKey] == null && newValue == null)
+                  "
+                  icon="mdi:check-bold"
+                  class="h-4 w-4 text-slate-500"
+                ></BaseIcon>
+              </div>
+            </div>
+          </template>
+        </component>
+      </div>
+    </template>
+  </BaseDropdown>
+</template>
+
+<script lang="ts" setup>
+import { isArray } from 'lodash';
+import { PropType, Ref } from 'vue';
+import { Option } from '@/types';
+import BaseDropdown from './BaseDropdown.vue';
+import BaseAutocomplete from './BaseAutocomplete.vue';
+import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
+import BaseTagAutocomplete from './BaseTagAutocomplete.vue';
+import BaseTagAutocompleteFetch from './BaseTagAutocompleteFetch.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: [Array, Object, null, undefined] as PropType<
+      Option[] | Option | null | undefined
+    >,
+    default: undefined,
+  },
+  multiple: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+  url: {
+    type: String as PropType<string>,
+    default: undefined,
+  },
+  options: {
+    type: Array as PropType<Option[] | undefined>,
+    default: undefined,
+  },
+  labelKey: {
+    default: 'name',
+    type: String,
+  },
+  valueKey: {
+    default: 'id',
+    type: String,
+  },
+  size: {
+    type: String as PropType<'xs' | 'sm' | 'base'>,
+    default: 'sm',
+  },
+  required: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+  emptyOptionLabel: {
+    default: undefined,
+    type: String,
+  },
+  placement: {
+    type: String as PropType<
+      'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'
+    >,
+    default: undefined,
+  },
+  padding: {
+    default: undefined,
+    type: Number,
+  },
+});
+
+const emit = defineEmits(['update:model-value', 'close']);
+
+const componentName = computed(() => {
+  if (props.multiple) {
+    if (props.url) {
+      return BaseTagAutocompleteFetch;
+    }
+    if (props.options) {
+      return BaseTagAutocomplete;
+    }
+    console.error('BaseDropdownAutocomplete: options or url is required');
+    return;
+  }
+
+  if (props.url) {
+    return BaseAutocompleteFetch;
+  }
+  if (props.options) {
+    return BaseAutocomplete;
+  }
+  console.error('BaseDropdownAutocomplete: options or url is required');
+});
+
+const autocomplete = ref(null) as Ref<any>;
+
+const newValue = ref(null) as Ref<any>;
+
+const autocompleteProps = computed(() => {
+  const newProps = {} as any;
+
+  if (props.url) {
+    newProps.url = props.url;
+  } else {
+    newProps.options = props.options ?? [];
+  }
+
+  if (!props.multiple) {
+    newProps.showModelValue = false;
+    newProps.showEmptyOption = true;
+    newProps.emptyOptionLabel = props.emptyOptionLabel;
+  }
+
+  return newProps;
+});
+
+watch(
+  () => props.modelValue,
+  (modelValue) => {
+    newValue.value = modelValue ?? null;
+  },
+  { immediate: true, deep: true }
+);
+
+function onOpen() {
+  nextTick(() => {
+    setTimeout(() => {
+      autocomplete.value?.open();
+    }, 1);
+  });
+}
+
+function onClose() {
+  nextTick(() => {
+    setTimeout(() => {
+      autocomplete.value?.setKeywords('');
+    }, 1);
+  });
+
+  emit('close');
+}
+
+function onUpdate(
+  value: Option | Option[] | null | undefined,
+  close: () => void
+) {
+  newValue.value = getNewValue(value);
+
+  update();
+
+  if (!props.multiple) {
+    close();
+  }
+}
+
+function getNewValue(value: Option | Option[] | null | undefined) {
+  if (isArray(value)) {
+    return value;
+  }
+
+  if (value == null) {
+    return null;
+  }
+
+  if (value[props.valueKey] ?? null) {
+    return value;
+  }
+
+  return null;
+}
+
+function update() {
+  emit('update:model-value', newValue.value);
+}
+</script>

package/src/components/BaseHasMany.vue

@@ -104,10 +104,11 @@ function onUpdate(newModels: Option[]) {
 }
 
 defineExpose({
-  focus: tagAutocompleteFetch.value?.focus,
-  blur: tagAutocompleteFetch.value?.blur,
-  open: tagAutocompleteFetch.value?.open,
-  close: tagAutocompleteFetch.value?.close,
-  setKeywords: tagAutocompleteFetch.value?.setKeywords,
+  focus: () => tagAutocompleteFetch.value?.focus(),
+  blur: () => tagAutocompleteFetch.value?.blur(),
+  open: () => tagAutocompleteFetch.value?.open(),
+  close: () => tagAutocompleteFetch.value?.close(),
+  setKeywords: (input: string) =>
+    tagAutocompleteFetch.value?.setKeywords(input),
 });
 </script>

package/src/components/BaseRadioGroup.vue

@@ -1,7 +1,10 @@
 <template>
   <div>
     <ul class="space-y-3">
-      <li v-for="option in normalizedOptions" :key="option.value">
+      <li
+        v-for="option in normalizedOptions"
+        :key="option.value ? option.value : 'null'"
+      >
         <label
           :for="name + '-' + option.value"
           class="cursor-pointer"

package/src/components/BaseTable.vue

@@ -305,7 +305,7 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
-  /** Rows can be checked (multiple), checked rows will have a .is-checked class if you want to style */
+  /** Rows can be checked (multiple) */
   checkable: {
     default: false,
     type: Boolean,

package/src/components/BaseTagAutocomplete.vue

@@ -1,7 +1,7 @@
 <template>
   <div ref="autocomplete">
     <div
-      class="rounded border bg-white p-1"
+      class="relative z-[1] rounded border bg-white p-1"
       :class="[
         hasErrorInternal ? 'border-red-600' : 'border-slate-300',
         wrapperClass,
@@ -10,7 +10,7 @@
       <div class="-m-0.5 flex flex-wrap">
         <div
           v-for="selection in normalizedModelValue"
-          :key="selection.value"
+          :key="selection.value ? selection.value : 'null'"
           class="p-0.5"
         >
           <div
@@ -56,7 +56,7 @@
         v-if="opened || dropdownShow == 'always'"
         :class="[
           inline
-            ? 'relative mt-1'
+            ? 'relative'
             : 'absolute top-1 z-menu min-h-[110px] w-full overflow-hidden rounded border border-slate-300 bg-white shadow-md',
         ]"
       >
@@ -67,7 +67,7 @@
           :size="size"
           :loading="loading"
           :loading-bottom="loadingBottom"
-          :dropdown-class="inline ? '' : 'p-1'"
+          :dropdown-class="inline ? 'pt-1' : 'p-1'"
           :keywords="keywords"
           @select="onSelect"
           @scroll-bottom="emit('scrollBottom')"

package/src/components/BaseTagAutocompleteFetch.vue

@@ -174,10 +174,10 @@ const debouncedSearch = debounce(() => {
 }, 300);
 
 defineExpose({
-  focus: tagAutocomplete.value?.focus,
-  blur: tagAutocomplete.value?.blur,
-  open: tagAutocomplete.value?.open,
-  close: tagAutocomplete.value?.close,
-  setKeywords: tagAutocomplete.value?.setKeywords,
+  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/index.ts

@@ -28,6 +28,7 @@ import BaseDescriptionList from './BaseDescriptionList.vue';
 import BaseDescriptionListItem from './BaseDescriptionListItem.vue';
 import BaseDialog from './BaseDialog.vue';
 import BaseDropdown from './BaseDropdown.vue';
+import BaseDropdownAutocomplete from './BaseDropdownAutocomplete.vue';
 import BaseField from './BaseField.vue';
 import BaseFieldI18n from './BaseFieldI18n.vue';
 import BaseFilePicker from './BaseFilePicker.vue';
@@ -110,6 +111,7 @@ export {
   BaseDescriptionListItem,
   BaseDialog,
   BaseDropdown,
+  BaseDropdownAutocomplete,
   BaseField,
   BaseFieldI18n,
   BaseFilePicker,

package/src/types/index.ts

@@ -29,7 +29,7 @@ export interface DataTableQuery extends Record<string, any> {
   filter?: Record<string, any>;
 }
 
-export type OptionValue = string | number;
+export type OptionValue = string | number | null;
 
 export type Option = Record<string, any>;
 

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

@@ -1,81 +0,0 @@
-import BaseForm from './BaseForm.vue';
-declare const _default: import("vue").DefineComponent<{
-    name: {
-        required: true;
-        type: StringConstructor;
-    };
-    placeholder: {
-        default: string;
-        type: StringConstructor;
-    };
-    label: {
-        default: string;
-        type: StringConstructor;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    required: {
-        default: boolean;
-        type: BooleanConstructor;
-    };
-    autofocus: {
-        default: boolean;
-        type: BooleanConstructor;
-    };
-    preventSubmit: {
-        default: boolean;
-        type: BooleanConstructor;
-    };
-}, unknown, unknown, {
-    form(): typeof BaseForm | null;
-    errors(): any;
-    labelValue(): string;
-}, {
-    inputListener(payload: any): void;
-    errorMessage(name?: string | null): any;
-    hasError(name?: string | null): boolean;
-    clearErrors(name?: string | null): void;
-    disableForm(): void;
-    enableForm(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    name: {
-        required: true;
-        type: StringConstructor;
-    };
-    placeholder: {
-        default: string;
-        type: StringConstructor;
-    };
-    label: {
-        default: string;
-        type: StringConstructor;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    required: {
-        default: boolean;
-        type: BooleanConstructor;
-    };
-    autofocus: {
-        default: boolean;
-        type: BooleanConstructor;
-    };
-    preventSubmit: {
-        default: boolean;
-        type: BooleanConstructor;
-    };
-}>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}, {
-    required: boolean;
-    label: string;
-    disabled: boolean;
-    placeholder: string;
-    preventSubmit: boolean;
-    autofocus: boolean;
-}>;
-export default _default;