sprintify-ui 0.0.26 → 0.0.27

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

@@ -39,7 +39,35 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    iconLeft: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    iconRight: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    prefix: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    suffix: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    hasError: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    min: {
+        default: undefined;
+        type: NumberConstructor;
+    };
+    max: {
+        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<{
     modelValue: {
         default: string;
         type: PropType<string | number | null>;
@@ -79,7 +107,37 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    iconLeft: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    iconRight: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    prefix: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    suffix: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    hasError: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    min: {
+        default: undefined;
+        type: NumberConstructor;
+    };
+    max: {
+        default: undefined;
+        type: NumberConstructor;
+    };
 }>> & {
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     required: boolean;
@@ -89,7 +147,14 @@ declare const _default: import("vue").DefineComponent<{
     modelValue: string | number | null;
     placeholder: string;
     disabled: boolean;
+    min: number;
+    max: number;
     autocomplete: boolean;
     preventSubmit: boolean;
+    iconLeft: string;
+    iconRight: string;
+    prefix: string;
+    suffix: string;
+    hasError: boolean;
 }>;
 export default _default;

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

@@ -0,0 +1,133 @@
+import { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The value of the input. Can be a number or null.
+     * 0.1 = 10%
+     * 0.5 = 50%
+     * 1 = 100%
+     */
+    modelValue: {
+        default: undefined;
+        type: PropType<string | number | null>;
+    };
+    /**
+     * The step of the input. Can be a number or null.
+     */
+    step: {
+        default: number;
+        type: NumberConstructor;
+    };
+    /**
+     * Prevents submit when pressing 'Enter' while the input is focused.
+     */
+    preventSubmit: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    name: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    placeholder: {
+        default: string;
+        type: StringConstructor;
+    };
+    disabled: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    required: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    icon: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    hasError: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    min: {
+        default: undefined;
+        type: NumberConstructor;
+    };
+    max: {
+        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<{
+    /**
+     * The value of the input. Can be a number or null.
+     * 0.1 = 10%
+     * 0.5 = 50%
+     * 1 = 100%
+     */
+    modelValue: {
+        default: undefined;
+        type: PropType<string | number | null>;
+    };
+    /**
+     * The step of the input. Can be a number or null.
+     */
+    step: {
+        default: number;
+        type: NumberConstructor;
+    };
+    /**
+     * Prevents submit when pressing 'Enter' while the input is focused.
+     */
+    preventSubmit: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    name: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    placeholder: {
+        default: string;
+        type: StringConstructor;
+    };
+    disabled: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    required: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    icon: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    hasError: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    min: {
+        default: undefined;
+        type: NumberConstructor;
+    };
+    max: {
+        default: undefined;
+        type: NumberConstructor;
+    };
+}>> & {
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    required: boolean;
+    name: string;
+    step: number;
+    icon: string;
+    modelValue: string | number | null;
+    placeholder: string;
+    disabled: boolean;
+    min: number;
+    max: number;
+    preventSubmit: boolean;
+    hasError: boolean;
+}>;
+export default _default;

package/package.json

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

package/src/components/BaseInput.stories.js

@@ -7,7 +7,6 @@ export default {
     required: true,
     type: 'text',
     name: 'name',
-    class: 'w-full',
   },
 };
 
@@ -31,6 +30,39 @@ Demo.args = {
   placeholder: 'Enter your name',
 };
 
+export const IconLeft = Template.bind({});
+IconLeft.args = {
+  iconLeft: 'heroicons:phone-20-solid',
+  placeholder: 'Enter your phone',
+};
+
+export const IconRight = Template.bind({});
+IconRight.args = {
+  iconRight: 'mdi:email-outline',
+  placeholder: 'Enter your email',
+};
+
+export const Prefix = Template.bind({});
+Prefix.args = {
+  prefix: 'https://',
+  placeholder: 'website URL',
+};
+
+export const Suffix = Template.bind({});
+Suffix.args = {
+  suffix: '%',
+  placeholder: 'Percentage',
+};
+
+export const All = Template.bind({});
+All.args = {
+  iconLeft: 'heroicons:currency-dollar-20-solid',
+  prefix: 'Price',
+  iconRight: 'heroicons:document-magnifying-glass',
+  suffix: '$',
+  placeholder: 'Item price',
+};
+
 export const Number = Template.bind({});
 Number.args = {
   type: 'number',
@@ -44,3 +76,11 @@ Disabled.args = {
   disabled: true,
   placeholder: 'Enter your name',
 };
+
+export const Error = Template.bind({});
+Error.args = {
+  hasError: true,
+  prefix: 'Price',
+  iconRight: 'heroicons:currency-dollar',
+  placeholder: 'Enter your name',
+};

package/src/components/BaseInput.vue

@@ -1,23 +1,72 @@
 <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" :class="borderColor">
+    <div
+      v-if="iconLeft"
+      class="flex shrink-0 items-center justify-center rounded-l border-r px-3 transition-colors"
+      :class="[borderColor, backgroundColor, textColor]"
+    >
+      <BaseIcon :icon="iconLeft" />
+    </div>
+    <div
+      v-if="prefix"
+      class="flex shrink-0 items-center justify-center border-r px-4 transition-colors"
+      :class="[
+        iconLeft ? '' : 'rounded-l',
+        borderColor,
+        backgroundColor,
+        textColor,
+      ]"
+    >
+      {{ prefix }}
+    </div>
+    <input
+      ref="input"
+      :value="modelValue"
+      :type="type"
+      :name="name"
+      :step="step"
+      :min="min"
+      :max="max"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :required="required"
+      class="w-full 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-l': !iconLeft && !prefix,
+        'rounded-r': !iconRight && !suffix,
+      }"
+      :autocomplete="autocomplete ? 'on' : 'off'"
+      @keydown.enter="onEnter"
+      @input="$emit('update:modelValue', transformInputValue($event))"
+      @focus="$emit('focus', $event)"
+      @blur="$emit('blur', $event)"
+    />
+    <div
+      v-if="suffix"
+      class="flex shrink-0 items-center justify-center border-l px-4 transition-colors"
+      :class="[
+        iconRight ? '' : 'rounded-r',
+        borderColor,
+        backgroundColor,
+        textColor,
+      ]"
+    >
+      {{ suffix }}
+    </div>
+    <div
+      v-if="iconRight"
+      class="flex shrink-0 items-center justify-center rounded-r border-l px-3 transition-colors"
+      :class="[borderColor, backgroundColor, textColor]"
+    >
+      <BaseIcon :icon="iconRight" />
+    </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,9 +108,37 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  iconLeft: {
+    default: undefined,
+    type: String,
+  },
+  iconRight: {
+    default: undefined,
+    type: String,
+  },
+  prefix: {
+    default: undefined,
+    type: String,
+  },
+  suffix: {
+    default: undefined,
+    type: String,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+  min: {
+    default: undefined,
+    type: Number,
+  },
+  max: {
+    default: undefined,
+    type: Number,
+  },
 });
 
-defineEmits(['update:modelValue']);
+defineEmits(['update:modelValue', 'focus', 'blur']);
 
 function transformInputValue(event: Event | null): string | null {
   if (event === null) {
@@ -87,4 +164,16 @@ function onEnter(e: Event) {
     return;
   }
 }
+
+const borderColor = computed(() => {
+  return props.hasError ? 'border-red-500' : 'border-slate-300';
+});
+
+const backgroundColor = computed(() => {
+  return props.hasError ? 'bg-red-100' : 'bg-slate-100';
+});
+
+const textColor = computed(() => {
+  return props.hasError ? 'text-red-800' : 'text-slate-600';
+});
 </script>

package/src/components/BaseInputPercent.stories.js

@@ -0,0 +1,43 @@
+import BaseInputPercent from './BaseInputPercent.vue';
+
+export default {
+  title: 'Form/BaseInputPercent',
+  component: BaseInputPercent,
+  args: {
+    required: true,
+    name: 'rebate',
+    placeholder: 'Enter rebate, eg: 50%',
+    step: 0.1,
+    min: 0,
+    max: 100,
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseInputPercent,
+  },
+  setup() {
+    const value = ref(null);
+    return { args, value };
+  },
+  template: `
+  <form @submit.prevent="" class="border-none">
+    <BaseInputPercent v-model="value" v-bind="args" class="w-full"></BaseInputPercent>
+  </form>
+  <pre class="mt-4 bg-slate-800 font-light text-xs p-3 rounded text-white">{{ value }}</pre>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  hasError: true,
+};

package/src/components/BaseInputPercent.vue

@@ -0,0 +1,116 @@
+<template>
+  <BaseInput
+    :model-value="value"
+    suffix="%"
+    type="number"
+    :prevent-submit="preventSubmit"
+    :name="name"
+    :step="step"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :icon-left="icon"
+    :has-error="hasError"
+    :min="min"
+    :max="max"
+    @update:model-value="onUpdate"
+  ></BaseInput>
+</template>
+
+<script lang="ts" setup>
+import { round } from 'lodash';
+import { PropType } from 'vue';
+import { BaseInput } from '.';
+
+const props = defineProps({
+  /**
+   * The value of the input. Can be a number or null.
+   * 0.1 = 10%
+   * 0.5 = 50%
+   * 1 = 100%
+   */
+  modelValue: {
+    default: undefined,
+    type: [Number, String, null] as PropType<number | string | null>,
+  },
+  /**
+   * The step of the input. Can be a number or null.
+   */
+  step: {
+    default: 1,
+    type: Number,
+  },
+  /**
+   * Prevents submit when pressing 'Enter' while the input is focused.
+   */
+  preventSubmit: {
+    default: false,
+    type: Boolean,
+  },
+  name: {
+    default: undefined,
+    type: String,
+  },
+  placeholder: {
+    default: '',
+    type: String,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  icon: {
+    default: undefined,
+    type: String,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+  min: {
+    default: undefined,
+    type: Number,
+  },
+  max: {
+    default: undefined,
+    type: Number,
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur']);
+
+const precision = computed(() => {
+  if (props.step === undefined) return 0;
+  if (props.step === 0) return 0;
+  const parts = props.step.toString().split('.');
+  if (parts.length === 1) return 0;
+  return parts[1].length;
+});
+
+const value = computed(() => {
+  if (props.modelValue === undefined) return null;
+  if (props.modelValue === null) return null;
+  if (props.modelValue === '') return null;
+
+  const valueToNumber = parseFloat(props.modelValue as string);
+  if (Number.isNaN(valueToNumber)) {
+    return null;
+  }
+
+  return round(valueToNumber * 100, precision.value);
+});
+
+function onUpdate(value: string | number | null) {
+  const valueToNumber = parseFloat(value as string);
+
+  if (Number.isNaN(valueToNumber)) {
+    emit('update:modelValue', null);
+    return;
+  }
+
+  emit('update:modelValue', round(valueToNumber / 100, precision.value + 2));
+}
+</script>