sprintify-ui 0.0.194 → 0.0.196

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

@@ -56,7 +56,7 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
         type: NumberConstructor;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur")[], "update:modelValue" | "focus" | "blur", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "blur" | "focus")[], "update:modelValue" | "blur" | "focus", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * The value of the input. Can be a number or null.
      * 0.1 = 10%
@@ -122,11 +122,11 @@ declare const _default: import("vue").DefineComponent<{
     step: number;
     required: boolean;
     icon: string;
-    modelValue: string | number | null;
-    placeholder: string;
     disabled: boolean;
-    min: number;
     max: number;
+    min: number;
+    placeholder: string;
+    modelValue: string | number | null;
     hasError: boolean;
     preventSubmit: boolean;
 }>;

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

@@ -87,10 +87,10 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     iconClass: string;
-    modelValue: boolean;
     duration: string;
-    delay: number;
     size: "sm" | "lg";
+    delay: number;
+    modelValue: boolean;
     backdropClass: string;
 }>;
 export default _default;

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

@@ -115,13 +115,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     "onUpload:end"?: ((...args: any[]) => any) | undefined;
 }, {
     name: string;
-    modelValue: MediaLibraryPayload | null | undefined;
+    cropper: boolean | BaseCropperConfig | null;
+    accept: string;
     disabled: boolean;
-    min: number;
     max: number;
+    min: number;
+    modelValue: MediaLibraryPayload | null | undefined;
     hasError: boolean;
-    cropper: boolean | BaseCropperConfig | null;
-    accept: string;
     maxSize: number;
     acceptedExtensions: string[];
     currentMedia: Media[];

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

@@ -59,8 +59,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    modelValue: boolean;
     closeOnOutsideClick: boolean;
+    modelValue: boolean;
     clipped: boolean;
     maxWidth: string;
     backdropClass: string;

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

@@ -43,8 +43,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    modelValue: boolean;
     closeOnOutsideClick: boolean;
+    modelValue: boolean;
     clipped: boolean;
     maxWidth: string;
     backdropClass: string;

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

@@ -44,7 +44,7 @@ declare const _default: import("vue").DefineComponent<{
     label: string;
     active: boolean;
     icon: string;
-    count: number;
     dark: boolean;
+    count: number;
 }>;
 export default _default;

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

@@ -44,7 +44,7 @@ declare const _default: import("vue").DefineComponent<{
     label: string;
     active: boolean;
     icon: string;
-    count: number;
     dark: boolean;
+    count: number;
 }>;
 export default _default;

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

@@ -45,9 +45,13 @@ declare const _default: import("vue").DefineComponent<{
     };
     rounded: {
         default: string;
-        type: PropType<"full" | "left" | "right" | "none">;
+        type: PropType<"left" | "right" | "none" | "full">;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur" | "keydown")[], "update:modelValue" | "focus" | "blur" | "keydown", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    autoFix: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "blur" | "focus" | "keydown")[], "update:modelValue" | "blur" | "focus" | "keydown", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: undefined;
         type: PropType<number | null>;
@@ -93,7 +97,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     rounded: {
         default: string;
-        type: PropType<"full" | "left" | "right" | "none">;
+        type: PropType<"left" | "right" | "none" | "full">;
+    };
+    autoFix: {
+        default: boolean;
+        type: BooleanConstructor;
     };
 }>> & {
     onFocus?: ((...args: any[]) => any) | undefined;
@@ -104,13 +112,14 @@ declare const _default: import("vue").DefineComponent<{
     name: string;
     step: number;
     required: boolean;
-    modelValue: number | null;
-    placeholder: string;
     disabled: boolean;
-    min: number;
     max: number;
+    min: number;
+    placeholder: string;
+    modelValue: number | null;
     hasError: boolean;
+    rounded: "left" | "right" | "none" | "full";
     borderless: boolean;
-    rounded: "full" | "left" | "right" | "none";
+    autoFix: boolean;
 }>;
 export default _default;

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

@@ -54,9 +54,9 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     name: string;
     required: boolean;
-    modelValue: string | null;
-    placeholder: string;
     disabled: boolean;
+    placeholder: string;
+    modelValue: string | null;
     hasError: boolean;
 }>;
 export default _default;

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

@@ -88,8 +88,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     name: string;
     required: boolean;
     labelClass: string;
-    modelValue: OptionValue | undefined;
     disabled: boolean;
+    modelValue: OptionValue | undefined;
     hasError: boolean;
     inputClass: string;
 }>, {

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

@@ -81,9 +81,9 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     name: string;
     required: boolean;
-    modelValue: string | Delta | null | undefined;
-    placeholder: string;
     disabled: boolean;
+    placeholder: string;
+    modelValue: string | Delta | null | undefined;
     hasError: boolean;
     enable: boolean;
     toolbar: string | unknown[] | Record<string, any> | undefined;

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

@@ -79,13 +79,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, {
     name: string;
     required: boolean;
-    modelValue: (string | number | null) | undefined;
-    placeholder: string;
     disabled: boolean;
-    hasError: boolean;
+    placeholder: string;
     options: Option[];
+    modelValue: (string | number | null) | undefined;
     labelKey: string;
     valueKey: string;
+    hasError: boolean;
 }>, {
     default: (_: {}) => any;
 }>;

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

@@ -55,9 +55,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     name: string;
     color: "success" | "info" | "danger" | "warning" | "dark" | "light" | "primary";
     required: boolean;
+    size: "base" | "xs" | "sm" | "lg" | "xl";
     modelValue: string | number | boolean | null | undefined;
     hasError: boolean;
-    size: "base" | "xs" | "sm" | "lg" | "xl";
 }>, {
     default: (_: {}) => any;
 }>;

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

@@ -1,38 +1,41 @@
-import { PropType } from 'vue';
 import { RouteLocationRaw } from 'vue-router';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    to: {
-        required: true;
-        type: PropType<RouteLocationRaw>;
-    };
-    disabled: {
-        default: boolean;
-        type: BooleanConstructor;
-    };
-    activeStrategy: {
-        default: string;
-        type: PropType<"default" | "exact">;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    to: {
-        required: true;
-        type: PropType<RouteLocationRaw>;
-    };
-    disabled: {
-        default: boolean;
-        type: BooleanConstructor;
-    };
-    activeStrategy: {
-        default: string;
-        type: PropType<"default" | "exact">;
-    };
-}>>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    to: RouteLocationRaw;
+    disabled?: boolean | undefined;
+    activeStrategy?: "default" | "exact" | undefined;
+}>, {
+    disabled: boolean;
+    activeStrategy: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    to: RouteLocationRaw;
+    disabled?: boolean | undefined;
+    activeStrategy?: "default" | "exact" | undefined;
+}>, {
+    disabled: boolean;
+    activeStrategy: string;
+}>>>, {
     disabled: boolean;
-    activeStrategy: "default" | "exact";
+    activeStrategy: 'default' | 'exact';
 }>, {
-    default: (_: {}) => any;
+    default: (_: {
+        active: boolean;
+    }) => any;
 }>;
 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];
+};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,7 +1,31 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    size?: "xs" | "sm" | "lg" | "md" | undefined;
+}>, {
+    size: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    size?: "xs" | "sm" | "lg" | "md" | undefined;
+}>, {
+    size: string;
+}>>>, {
+    size: 'xs' | 'sm' | 'md' | 'lg';
+}>, {
     default: (_: {}) => any;
 }>;
 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];
+};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -137,8 +137,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<"focus" | "always">;
     };
 }>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onScrollBottom?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
     onTyping?: ((...args: any[]) => any) | undefined;
     onOpen?: ((...args: any[]) => any) | undefined;
@@ -146,13 +146,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     filter: (option: NormalizedOption) => boolean;
     name: string;
     required: boolean;
-    placeholder: string;
     disabled: boolean;
     max: number;
-    hasError: boolean;
+    placeholder: string;
+    size: "base" | "xs" | "sm";
     loading: boolean;
     loadingBottom: boolean;
-    size: "base" | "xs" | "sm";
+    hasError: boolean;
     inline: boolean;
     dropdownShow: "focus" | "always";
 }>, {

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

@@ -90,14 +90,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
 }>> & {
     onFocus?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onScrollBottom?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onTyping?: ((...args: any[]) => any) | undefined;
 }, {
     required: boolean;
-    placeholder: string;
     disabled: boolean;
     max: number;
+    placeholder: string;
     hasError: boolean;
     queryKey: string;
 }>, {

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

@@ -87,11 +87,11 @@ declare const _default: import("vue").DefineComponent<{
     type: string;
     name: string;
     required: boolean;
-    modelValue: string | null | undefined;
-    placeholder: string;
+    autocomplete: boolean;
     disabled: boolean;
+    placeholder: string;
+    modelValue: string | null | undefined;
     hasError: boolean;
-    autocomplete: boolean;
     preventSubmit: boolean;
     rows: number;
 }>;

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

@@ -87,9 +87,9 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     required: boolean;
-    modelValue: string;
-    placeholder: string;
     disabled: boolean;
+    placeholder: string;
+    modelValue: string;
     hasError: boolean;
     maxHeight: number;
     rows: number;

package/package.json

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

package/src/components/BaseForm.stories.js

@@ -0,0 +1,48 @@
+import BaseForm from './BaseForm.vue';
+import BaseField from './BaseField.vue';
+import BaseNumber from './BaseNumber.vue';
+import BaseMediaLibrary from './BaseMediaLibrary.vue';
+import ShowValue from '../../.storybook/components/ShowValue.vue';
+
+export default {
+  title: 'Form/BaseForm',
+  component: BaseForm,
+};
+
+const Template = (args) => ({
+  components: {
+    ShowValue,
+    BaseForm,
+    BaseField,
+    BaseNumber,
+    BaseMediaLibrary,
+  },
+  setup() {
+    const form = ref({
+      number: 1.1,
+    });
+    return { args, form };
+  },
+  template: `
+  <BaseForm 
+    method="post" 
+    url="https://faker.witify.io/api/todos/422" 
+    :data="form" 
+    v-slot="{disabled}"
+  >
+    <BaseField class="mb-3" name="number" label="Number">
+      <BaseNumber v-model="form.number"></BaseNumber>
+    </BaseField>
+    
+    <BaseField class="mb-3" name="media" label="Media">
+      <BaseMediaLibrary v-model="form.media" upload-url="https://faker.witify.io/api/todos/upload"></BaseMediaLibrary>
+    </BaseField>
+
+    <button type="submit" class="btn btn-primary" :disabled="disabled">Submit</button>
+  </BaseForm>
+  <ShowValue :value="form" />
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseForm.vue

@@ -112,7 +112,6 @@ const emit = defineEmits(['error', 'success']);
 
 const form = ref<null | HTMLFormElement>(null);
 const loading = ref(false);
-const disabled = ref(false);
 const errors = ref<Record<string, string[]>>({});
 
 const httpClient = computed((): AxiosInstance => {
@@ -291,14 +290,20 @@ function clearErrors(name = null): void {
   }
 }
 
-function disabledForm() {
-  disabled.value = true;
+const disablingFields = reactive(new Set<string>());
+
+function disabledForm(uuid: string) {
+  disablingFields.add(uuid);
 }
 
-function enableForm() {
-  disabled.value = false;
+function enableForm(uuid: string) {
+  disablingFields.delete(uuid);
 }
 
+const disabled = computed((): boolean => {
+  return disablingFields.size > 0;
+});
+
 provide('form:errors', readonly(errors));
 provide('form:getErrorMessageByName', getErrorMessageByName);
 provide('form:clearErrors', clearErrors);

package/src/components/BaseNumber.stories.js

@@ -8,8 +8,6 @@ export default {
   args: {
     placeholder: 'Enter number',
     step: 0.1,
-    min: 0,
-    max: 100,
   },
 };
 
@@ -19,7 +17,7 @@ const Template = (args) => ({
     BaseNumber,
   },
   setup() {
-    const value = ref(12.1212);
+    const value = ref(null);
     return { args, value };
   },
   template: `
@@ -33,6 +31,24 @@ const Template = (args) => ({
 export const Demo = Template.bind({});
 Demo.args = {};
 
+export const Min = Template.bind({});
+Min.args = {
+  min: 10000,
+};
+
+export const Max = Template.bind({});
+Max.args = {
+  max: 10000,
+};
+
+export const AutoFix = Template.bind({});
+AutoFix.args = {
+  autoFix: true,
+  min: 10,
+  max: 20,
+  step: 0.01,
+};
+
 export const Disabled = Template.bind({});
 Disabled.args = {
   disabled: true,