sprintify-ui 0.0.13 → 0.0.14

package/src/components/BaseInput.vue

@@ -1,23 +1,43 @@
 <template>
-  <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))"
-  />
+  <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>
 </template>
 
 <script lang="ts" setup>
 import { get, isNumber, isString, trim } from 'lodash';
 import { PropType } from 'vue';
+import { BaseIcon } from './index';
 
 const props = defineProps({
   modelValue: {
@@ -59,6 +79,14 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  icon: {
+    default: null,
+    type: String,
+  },
+  iconPosition: {
+    default: 'left',
+    type: String as PropType<'left' | 'right'>,
+  },
 });
 
 defineEmits(['update:modelValue']);

package/src/components/BaseSelect.vue

@@ -36,7 +36,7 @@ const EMPTY_VALUE_EXTERNAL = null;
 const props = defineProps({
   modelValue: {
     default: undefined,
-    type: [String, Number, null, undefined] as PropType<Option>,
+    type: [String, Number, null] as PropType<Option | undefined>,
   },
   name: {
     default: undefined,

package/src/components/BaseSystemAlert.vue

@@ -36,7 +36,7 @@ import { RouteLocationRaw } from 'vue-router';
 const props = defineProps({
   to: {
     default: undefined,
-    type: [Object, String, undefined] as PropType<RouteLocationRaw | undefined>,
+    type: [Object, String] as PropType<RouteLocationRaw | undefined>,
   },
   action: {
     default: undefined,

package/src/components/BaseTextarea.vue

@@ -18,8 +18,8 @@ import { PropType } from 'vue';
 
 defineProps({
   modelValue: {
-    required: true,
-    type: [String, undefined] as PropType<string | undefined>,
+    default: undefined,
+    type: String as PropType<string | undefined>,
   },
   type: {
     type: String,