sprintify-ui 0.0.14 → 0.0.15

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

@@ -6,7 +6,6 @@ declare const _default: {
         $props: Partial<{
             required: boolean;
             type: string;
-            icon: string;
             name: string;
             modelValue: string | number | null;
             placeholder: string;
@@ -14,7 +13,6 @@ declare const _default: {
             autocomplete: boolean;
             step: number;
             preventSubmit: boolean;
-            iconPosition: "left" | "right";
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             modelValue: {
                 default: string;
@@ -55,17 +53,9 @@ declare const _default: {
                 default: boolean;
                 type: BooleanConstructor;
             };
-            icon: {
-                default: null;
-                type: StringConstructor;
-            };
-            iconPosition: {
-                default: string;
-                type: PropType<"left" | "right">;
-            };
         }>> & {
             "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "required" | "type" | "icon" | "name" | "modelValue" | "placeholder" | "disabled" | "autocomplete" | "step" | "preventSubmit" | "iconPosition">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "required" | "type" | "name" | "modelValue" | "placeholder" | "disabled" | "autocomplete" | "step" | "preventSubmit">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -119,20 +109,11 @@ declare const _default: {
                 default: boolean;
                 type: BooleanConstructor;
             };
-            icon: {
-                default: null;
-                type: StringConstructor;
-            };
-            iconPosition: {
-                default: string;
-                type: PropType<"left" | "right">;
-            };
         }>> & {
             "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
         }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], string, {
             required: boolean;
             type: string;
-            icon: string;
             name: string;
             modelValue: string | number | null;
             placeholder: string;
@@ -140,7 +121,6 @@ declare const _default: {
             autocomplete: boolean;
             step: number;
             preventSubmit: boolean;
-            iconPosition: "left" | "right";
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -201,14 +181,6 @@ declare const _default: {
             default: boolean;
             type: BooleanConstructor;
         };
-        icon: {
-            default: null;
-            type: StringConstructor;
-        };
-        iconPosition: {
-            default: string;
-            type: PropType<"left" | "right">;
-        };
     }>> & {
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
@@ -255,20 +227,11 @@ declare const _default: {
         default: boolean;
         type: BooleanConstructor;
     };
-    icon: {
-        default: null;
-        type: StringConstructor;
-    };
-    iconPosition: {
-        default: string;
-        type: PropType<"left" | "right">;
-    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", {
     required: boolean;
     type: string;
-    icon: string;
     name: string;
     modelValue: string | number | null;
     placeholder: string;
@@ -276,6 +239,5 @@ declare const _default: {
     autocomplete: boolean;
     step: number;
     preventSubmit: boolean;
-    iconPosition: "left" | "right";
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "docs:dev": "vitepress dev docs",

package/src/components/BaseInput.stories.js

@@ -7,12 +7,7 @@ export default {
     required: true,
     type: 'text',
     name: 'name',
-  },
-  argTypes: {
-    iconPosition: {
-      type: 'select',
-      options: ['left', 'right'],
-    },
+    class: 'w-full',
   },
 };
 
@@ -36,20 +31,6 @@ Demo.args = {
   placeholder: 'Enter your name',
 };
 
-export const IconLeft = Template.bind({});
-IconLeft.args = {
-  icon: 'heroicons:phone-20-solid',
-  iconPosition: 'left',
-  placeholder: 'Enter your phone',
-};
-
-export const IconRight = Template.bind({});
-IconRight.args = {
-  icon: 'heroicons:phone-20-solid',
-  iconPosition: 'right',
-  placeholder: 'Enter your phone',
-};
-
 export const Number = Template.bind({});
 Number.args = {
   type: 'number',

package/src/components/BaseInput.vue

@@ -1,43 +1,23 @@
 <template>
-  <div class="inline-flex rounded border border-slate-300">
-    <div
-      v-if="icon && iconPosition == 'left'"
-      class="flex shrink-0 items-center justify-center rounded-l border-r border-slate-300 bg-slate-100 px-3 text-slate-600"
-    >
-      <BaseIcon icon="heroicons:phone-20-solid" />
-    </div>
-    <input
-      ref="input"
-      :value="modelValue"
-      :type="type"
-      :name="name"
-      :step="step"
-      :disabled="disabled"
-      :placeholder="placeholder"
-      :required="required"
-      class="border-none bg-transparent outline-none focus:z-[1] focus:ring-2 focus:ring-primary-600 focus:ring-offset-1 disabled:cursor-not-allowed disabled:text-slate-300"
-      :class="{
-        'rounded-r': icon && iconPosition == 'left',
-        'rounded-l': icon && iconPosition == 'right',
-        rounded: !icon,
-      }"
-      :autocomplete="autocomplete ? 'on' : 'off'"
-      @keydown.enter="onEnter"
-      @input="$emit('update:modelValue', transformInputValue($event))"
-    />
-    <div
-      v-if="icon && iconPosition == 'right'"
-      class="flex shrink-0 items-center justify-center rounded-r border-l border-slate-300 bg-slate-100 px-3 text-slate-600"
-    >
-      <BaseIcon icon="heroicons:phone-20-solid" />
-    </div>
-  </div>
+  <input
+    ref="input"
+    :value="modelValue"
+    :type="type"
+    :name="name"
+    :step="step"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :required="required"
+    class="rounded border-slate-300 disabled:cursor-not-allowed disabled:text-slate-300"
+    :autocomplete="autocomplete ? 'on' : 'off'"
+    @keydown.enter="onEnter"
+    @input="$emit('update:modelValue', transformInputValue($event))"
+  />
 </template>
 
 <script lang="ts" setup>
 import { get, isNumber, isString, trim } from 'lodash';
 import { PropType } from 'vue';
-import { BaseIcon } from './index';
 
 const props = defineProps({
   modelValue: {
@@ -79,14 +59,6 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
-  icon: {
-    default: null,
-    type: String,
-  },
-  iconPosition: {
-    default: 'left',
-    type: String as PropType<'left' | 'right'>,
-  },
 });
 
 defineEmits(['update:modelValue']);