sprintify-ui 0.8.19 → 0.8.21

package/dist/types/components/BaseAppDialogs.vue.d.ts

@@ -5,10 +5,19 @@ declare const _default: import("vue").DefineComponent<{}, {
         title: string;
         message: string;
         html: boolean;
+        input: false | {
+            label?: string | undefined;
+            placeholder?: string | undefined;
+            name?: string | undefined;
+            type?: string | undefined;
+            size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+            required?: boolean | undefined;
+            disabled?: boolean | undefined;
+        };
         confirmText: string;
         cancelText: string;
         closeOnOutsideClick: boolean;
-        onConfirm: () => void;
+        onConfirm: (input?: string | undefined) => void;
         onCancel: () => void;
     }[]>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;

package/dist/types/components/BaseDialog.vue.d.ts

@@ -1,4 +1,5 @@
 import { PropType } from 'vue';
+import { InputConfigProps } from '@/types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     color: {
         required: true;
@@ -24,6 +25,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default(): string;
         type: StringConstructor;
     };
+    input: {
+        default: boolean;
+        type: PropType<boolean | InputConfigProps>;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     cancel: (...args: any[]) => void;
     confirm: (...args: any[]) => void;
@@ -52,6 +57,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default(): string;
         type: StringConstructor;
     };
+    input: {
+        default: boolean;
+        type: PropType<boolean | InputConfigProps>;
+    };
 }>> & {
     onConfirm?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
@@ -59,6 +68,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     title: string;
     message: string;
     html: boolean;
+    input: boolean | InputConfigProps;
     confirmText: string;
     cancelText: string;
 }, {}>, {

package/dist/types/components/BaseField.vue.d.ts

@@ -11,7 +11,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     size: {
         default: undefined;
-        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl" | undefined>;
     };
     required: {
         type: BooleanConstructor;
@@ -44,7 +44,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     size: {
         default: undefined;
-        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl" | undefined>;
     };
     required: {
         type: BooleanConstructor;
@@ -68,7 +68,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
 }>>, {
     required: boolean;
-    size: "xs" | "sm" | "md" | "lg" | "xl";
+    size: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
     name: string;
     label: string;
     help: string;

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

@@ -54,10 +54,10 @@ declare const _default: import("vue").DefineComponent<{
     focus: typeof focus;
     blur: typeof blur;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    input: (...args: any[]) => void;
     focus: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
     submit: (...args: any[]) => void;
-    input: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: string;
@@ -110,8 +110,8 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;
-    onSubmit?: ((...args: any[]) => any) | undefined;
     onInput?: ((...args: any[]) => any) | undefined;
+    onSubmit?: ((...args: any[]) => any) | undefined;
 }, {
     required: boolean;
     modelValue: string | null;

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

@@ -3,6 +3,7 @@ import { UploadedFile } from './UploadedFile';
 import { Notification } from './Notification';
 import { CropType, ResultOptions } from 'croppie';
 import { Media } from './Media';
+import { Size } from '@/utils/sizes';
 export type Locales = {
     [locale: string]: string;
 };
@@ -120,10 +121,11 @@ export interface DialogOptions {
     title: string;
     message: string;
     html?: boolean;
+    input?: InputConfigProps | false;
     confirmText?: string;
     cancelText?: string;
     closeOnOutsideClick?: boolean;
-    onConfirm?: () => void;
+    onConfirm?: (input?: string) => void;
     onCancel?: () => void;
 }
 export interface Dialog {
@@ -132,10 +134,11 @@ export interface Dialog {
     title: string;
     message: string;
     html: boolean;
+    input: InputConfigProps | false;
     confirmText: string;
     cancelText: string;
     closeOnOutsideClick: boolean;
-    onConfirm: () => void;
+    onConfirm: (input?: string) => void;
     onCancel: () => void;
 }
 /**
@@ -230,3 +233,12 @@ export type JsonDataItem = string | number | null | undefined | JsonData[] | Jso
 export interface JsonData {
     [key: string]: JsonDataItem;
 }
+export interface InputConfigProps {
+    label?: string;
+    placeholder?: string;
+    name?: string;
+    type?: string;
+    size?: Size;
+    required?: boolean;
+    disabled?: boolean;
+}

package/package.json

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

package/src/components/BaseAppDialogs.vue

@@ -48,9 +48,10 @@
             :message="dialog.message"
             :confirm-text="dialog.confirmText"
             :html="dialog.html"
+            :input="dialog.input"
             :cancel-text="dialog.cancelText"
             @cancel="cancel(dialog)"
-            @confirm="confirm(dialog)"
+            @confirm="event => confirm(dialog, event)"
           />
         </div>
       </div>
@@ -70,8 +71,8 @@ const dialogs = computed(() => {
   return dialogStore.dialogs;
 });
 
-function confirm(dialog: Dialog) {
-  dialog.onConfirm();
+function confirm(dialog: Dialog, input?: string) {
+  dialog.onConfirm(input);
   remove(dialog);
 }
 

package/src/components/BaseDialog.stories.js

@@ -21,10 +21,19 @@ export default {
 const Template = (args) => ({
   components: { BaseDialog },
   setup() {
-    return { args };
+
+    const confirm = () => {
+      alert('Confirmed');
+    }
+
+    const cancel = () => {
+      alert('Canceled');
+    }
+
+    return { args, confirm, cancel };
   },
   template: `
-    <BaseDialog v-bind="args">
+    <BaseDialog v-bind="args" @confirm="confirm" @cancel="cancel">
     </BaseDialog>
   `,
 });
@@ -59,3 +68,14 @@ export const Colors = ColorsTemplate.bind({});
 Colors.args = {
   title: 'Be careful',
 };
+
+export const WithInput = Template.bind({});
+WithInput.args = {
+  input: {
+    label: 'Enter your password',
+    type: 'password',
+    size: 'sm',
+    required: true,
+    placeholder: 'Password',
+  },
+};

package/src/components/BaseDialog.vue

@@ -54,9 +54,36 @@
               {{ message }}
             </p>
           </div>
+
+          <BaseField
+            v-if="inputConfig"
+            class="mt-5"
+            :label="inputConfig.label"
+            :size="inputConfig.size"
+            :required="inputConfig.required"
+          >
+            <BasePassword
+              v-if="inputConfig.type == 'password'"
+              ref="inputRef"
+              v-model="input"
+              name="input"
+              :placeholder="inputConfig.placeholder"
+              class="w-full"
+            />
+            <BaseInput
+              v-else
+              ref="inputRef"
+              v-model="input"
+              name="input"
+              :placeholder="inputConfig.placeholder"
+              :type="inputConfig.type"
+              class="w-full"
+            />
+          </BaseField>
         </slot>
       </div>
     </div>
+
     <div class="mt-5 || sm:mt-4 sm:flex sm:flex-row-reverse">
       <BaseButton
         ref="confirm"
@@ -64,7 +91,7 @@
         size="sm"
         class="mb-2 w-full sm:mb-0 sm:w-auto"
         :color="color"
-        @click="$emit('confirm')"
+        @click="confirm"
       >
         {{ confirmText ?? t('sui.confirm') }}
       </BaseButton>
@@ -85,8 +112,12 @@ import { PropType } from 'vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 import { t } from '@/i18n';
 import BaseButton from './BaseButton.vue';
+import BaseInput from './BaseInput.vue';
+import BaseField from './BaseField.vue';
+import BasePassword from './BasePassword.vue';
+import { InputConfigProps } from '@/types';
 
-defineProps({
+const props = defineProps({
   color: {
     required: true,
     type: String as PropType<'info' | 'success' | 'danger' | 'warning'>,
@@ -115,15 +146,58 @@ defineProps({
     },
     type: String,
   },
+  input: {
+    default: false,
+    type: [Boolean, Object] as PropType<boolean | InputConfigProps>,
+  },
 });
 
-defineEmits(['cancel', 'confirm']);
+const emit = defineEmits(['cancel', 'confirm']);
 
-const confirm = ref<HTMLButtonElement | null>(null);
+const confirmRef = ref<HTMLButtonElement | null>(null);
+const inputRef = ref<HTMLInputElement | null>(null);
 
 onMounted(() => {
-  if (confirm.value) {
-    confirm.value.focus();
+  if (inputRef.value) {
+    inputRef.value.focus();
+  } else {
+    if (confirmRef.value) {
+      confirmRef.value.focus();
+    }
+  }
+});
+
+const input = ref('');
+
+const inputConfig = computed(() => {
+
+  if (props.input === false) {
+    return null;
+  }
+
+  if (typeof props.input === 'object') {
+    return props.input;
   }
+
+  return {
+    label: '',
+    placeholder: '',
+  } as InputConfigProps;
 });
+
+function confirm() {
+  if (props.input === false) {
+    return emit('confirm');
+  }
+
+  if (input.value == '' && inputConfig.value?.required) {
+
+    inputRef.value?.focus();
+
+    return;
+  }
+
+  emit('confirm', input);
+}
+
 </script>

package/src/components/BaseField.vue

@@ -57,7 +57,7 @@ const props = defineProps({
   },
   size: {
     default: undefined,
-    type: String as PropType<Size>,
+    type: [String, undefined] as PropType<Size | undefined>,
   },
   required: {
     type: Boolean,

package/src/stores/dialogs.ts

@@ -21,6 +21,7 @@ export const useDialogsStore = defineStore('dialogs', {
         confirmText: options.confirmText ?? t('sui.confirm'),
         cancelText: options.cancelText ?? t('sui.cancel'),
         closeOnOutsideClick: options.closeOnOutsideClick ?? true,
+        input: options.input ?? false,
         onConfirm:
           options.onConfirm ??
           function () {

package/src/types/index.ts

@@ -5,6 +5,7 @@ import { UploadedFile } from './UploadedFile';
 import { Notification } from './Notification';
 import { CropType, ResultOptions } from 'croppie';
 import { Media } from './Media';
+import { Size } from '@/utils/sizes';
 
 export type Locales = { [locale: string]: string };
 
@@ -152,10 +153,11 @@ export interface DialogOptions {
   title: string;
   message: string;
   html?: boolean;
+  input?: InputConfigProps | false;
   confirmText?: string;
   cancelText?: string;
   closeOnOutsideClick?: boolean;
-  onConfirm?: () => void;
+  onConfirm?: (input?: string) => void;
   onCancel?: () => void;
 }
 
@@ -165,10 +167,11 @@ export interface Dialog {
   title: string;
   message: string;
   html: boolean;
+  input: InputConfigProps | false;
   confirmText: string;
   cancelText: string;
   closeOnOutsideClick: boolean;
-  onConfirm: () => void;
+  onConfirm: (input?: string) => void;
   onCancel: () => void;
 }
 
@@ -279,3 +282,13 @@ export type JsonDataItem = string | number | null | undefined | JsonData[] | Jso
 export interface JsonData {
   [key: string]: JsonDataItem;
 }
+
+export interface InputConfigProps {
+  label?: string;
+  placeholder?: string;
+  name?: string;
+  type?: string;
+  size?: Size;
+  required?: boolean;
+  disabled?: boolean;
+}