sprintify-ui 0.0.26 → 0.0.28

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>

package/src/components/BaseModalCenter.stories.js

@@ -32,9 +32,11 @@ const Template = (args) => ({
       <BaseModalCenter v-model="show" v-bind="args">
         <template #default="{close}">
           <div class="p-8">
-            <p class="mb-6">Hello!</p>
+            <h2 class="font-semibold text-lg mb-6">This is a center modal</h2>
 
-            <button @click="close" class="btn btn-sm">Close</button>
+            <p v-for="i in 10" :key="i" class="mb-3 text-slate-600">Ipsum magna irure aliquip aute adipisicing Lorem non commodo amet. Est labore dolor laboris sint est magna quis fugiat id cillum deserunt cupidatat veniam. Exercitation dolore consequat labore deserunt laboris id. In laborum ea irure amet esse commodo et deserunt do officia et. Nulla incididunt est laboris pariatur ad duis ad reprehenderit voluptate. Tempor consectetur magna eiusmod incididunt.</p>
+
+            <button @click="close" class="btn mt-4">Close</button>
           </div>
         </template>
       </BaseModalCenter>

package/src/components/BaseModalCenter.vue

@@ -61,7 +61,7 @@
           </div>
 
           <button
-            class="right absolute top-2 right-2 flex h-16 w-16 items-center justify-center rounded-full hover:bg-black hover:bg-opacity-20"
+            class="right fixed top-2 right-2 flex h-16 w-16 items-center justify-center rounded-full hover:bg-black hover:bg-opacity-20"
             type="button"
             @click="modal.close()"
           >

package/src/components/BaseModalSide.stories.js

@@ -26,9 +26,11 @@ const Template = (args) => ({
       <BaseModalSide v-model="show" v-bind="args">
         <template #default="{close}">
           <div class="p-8">
-            <p class="mb-6">Hello!</p>
+            <h2 class="font-semibold text-lg mb-6">This is a center modal</h2>
 
-            <button @click="close" class="btn btn-sm">Close</button>
+            <p v-for="i in 10" :key="i" class="mb-3 text-slate-600">Ipsum magna irure aliquip aute adipisicing Lorem non commodo amet. Est labore dolor laboris sint est magna quis fugiat id cillum deserunt cupidatat veniam. Exercitation dolore consequat labore deserunt laboris id. In laborum ea irure amet esse commodo et deserunt do officia et. Nulla incididunt est laboris pariatur ad duis ad reprehenderit voluptate. Tempor consectetur magna eiusmod incididunt.</p>
+
+            <button @click="close" class="btn mt-4">Close</button>
           </div>
         </template>
       </BaseModalSide>