sprintify-ui 0.8.18 → 0.8.20

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;
@@ -61,6 +70,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     html: boolean;
     confirmText: string;
     cancelText: string;
+    input: boolean | InputConfigProps;
 }, {}>, {
     default?(_: {}): any;
 }>;

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/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;
 };
@@ -230,3 +231,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.18",
+  "version": "0.8.20",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

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/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 };
 
@@ -279,3 +280,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;
+}