sprintify-ui 0.6.32 → 0.6.34

package/src/components/BaseInput.vue

@@ -1,27 +1,27 @@
 <template>
-  <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 :class="classes">
+    <div :class="decorationWrapClasses">
+      <component
+        :is="hasLeftListener ? 'button' : 'div'"
+        v-if="iconLeft"
+        :type="hasLeftListener ? 'button' : undefined"
+        :class="[decorationClasses, hasLeftListener ? 'hover:bg-slate-100' : '']"
+        @click="onIconLeftClickInternal"
+      >
+        <BaseIcon
+          :icon="iconLeft"
+          :class="iconClasses"
+        />
+      </component>
+      <div
+        v-if="prefix"
+        :class="decorationClasses"
+        @click="focusAction"
+      >
+        {{ prefix }}
+      </div>
     </div>
+
     <input
       v-if="maskOptions"
       ref="input"
@@ -30,12 +30,10 @@
       :value="modelValue"
       :type="type"
       :autocomplete="autocomplete ? 'on' : 'off'"
-      :class="{
-        'rounded-l': emptyLeft,
-        'rounded-r': emptyRight,
-        'w-full border-none bg-white outline-none focus:z-[1] focus:ring-2 focus:ring-primary-600 focus:ring-offset-1 disabled:cursor-not-allowed disabled:text-slate-300': true,
-      }"
-      @input="update"
+      :class="baseClasses"
+      @input="onInput"
+      @click="onClick"
+      @keydown="onKeydown"
     >
     <input
       v-else
@@ -44,31 +42,31 @@
       :value="modelValue"
       :type="type"
       :autocomplete="autocomplete ? 'on' : 'off'"
-      :class="{
-        'rounded-l': emptyLeft,
-        'rounded-r': emptyRight,
-        'w-full border-none bg-white outline-none focus:z-[1] focus:ring-2 focus:ring-primary-600 focus:ring-offset-1 disabled:cursor-not-allowed disabled:text-slate-300': true,
-      }"
-      @input="update"
-    >
-    <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]"
+      :class="baseClasses"
+      @input="onInput"
+      @click="onClick"
+      @keydown="onKeydown"
     >
-      <BaseIcon :icon="iconRight" />
+    <div :class="decorationWrapClasses">
+      <div
+        v-if="suffix"
+        :class="decorationClasses"
+        @click="focusAction"
+      >
+        {{ suffix }}
+      </div>
+      <component
+        :is="hasRightListener ? 'button' : 'div'"
+        v-if="iconRight"
+        :type="hasRightListener ? 'button' : undefined"
+        :class="[decorationClasses, hasRightListener ? 'hover:bg-slate-100' : '']"
+        @click="onIconRightClickInternal"
+      >
+        <BaseIcon
+          :icon="iconRight"
+          :class="iconClasses"
+        />
+      </component>
     </div>
   </div>
 </template>
@@ -79,12 +77,22 @@ import { PropType } from 'vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 import { useField } from '@/composables/field';
 import { vMaska } from 'maska';
+import { Size, sizes } from '@/utils/sizes';
+import { twMerge } from 'tailwind-merge';
+
+defineOptions({
+  inheritAttrs: false,
+})
 
 const props = defineProps({
   modelValue: {
     default: '',
     type: [String, Number, null] as PropType<string | number | null>,
   },
+  class: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
+  },
   type: {
     type: String,
     default: 'text',
@@ -140,6 +148,10 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  size: {
+    default: undefined,
+    type: String as PropType<Size>,
+  },
   min: {
     default: undefined,
     type: [null, Number] as PropType<undefined | null | number>,
@@ -154,9 +166,38 @@ const props = defineProps({
       return null;
     },
   },
+  visibleFocus: {
+    default: true,
+    type: Boolean,
+  },
+  onIconLeftClick: {
+    default: undefined,
+    type: Function as PropType<() => void>,
+  },
+  onIconRightClick: {
+    default: undefined,
+    type: Function as PropType<() => void>,
+  },
 });
 
 const input = ref<HTMLInputElement | null>(null);
+const focus = ref(false);
+
+const hasLeftDecoration = computed(() => {
+  return props.iconLeft || props.prefix;
+});
+
+const hasRightDecoration = computed(() => {
+  return props.iconRight || props.suffix;
+});
+
+const hasLeftListener = computed(() => {
+  return props.onIconLeftClick !== undefined;
+});
+
+const hasRightListener = computed(() => {
+  return props.onIconRightClick !== undefined;
+});
 
 const maskOptions = computed(() => {
   if (props.mask) {
@@ -167,14 +208,6 @@ const maskOptions = computed(() => {
   return undefined;
 });
 
-const emptyLeft = computed(() => {
-  return !props.iconLeft && !props.prefix;
-});
-
-const emptyRight = computed(() => {
-  return !props.iconRight && !props.suffix;
-});
-
 const bindings = computed<any>(() => {
   return {
     name: nameInternal.value,
@@ -184,7 +217,6 @@ const bindings = computed<any>(() => {
     disabled: props.disabled,
     placeholder: props.placeholder,
     required: requiredInternal.value,
-
     onKeydown(event: KeyboardEvent) {
       if (event.code == 'Enter' && props.preventSubmit) {
         event.preventDefault();
@@ -192,9 +224,11 @@ const bindings = computed<any>(() => {
     },
     onFocus: (e: Event) => {
       emit('focus', e);
+      focus.value = true;
     },
     onBlur: (e: Event) => {
       emit('blur', e);
+      focus.value = false;
     },
   };
 });
@@ -219,17 +253,18 @@ const maskInternal = computed(() => {
   return props.mask;
 });
 
-const emit = defineEmits(['update:modelValue', 'focus', 'blur']);
+const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'click', 'keydown']);
 
-const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate } =
+const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate, sizeInternal } =
   useField({
     name: computed(() => props.name),
     required: computed(() => props.required),
     hasError: computed(() => props.hasError),
+    size: computed(() => props.size),
     emit: emit,
   });
 
-function update(event: any | null) {
+function onInput(event: any | null) {
   if (event === null) {
     emitUpdate(null);
   }
@@ -237,28 +272,118 @@ function update(event: any | null) {
   return emitUpdate(get(event, 'target.value', ''));
 }
 
-const borderColor = computed(() => {
-  return hasErrorInternal.value ? 'border-red-500' : 'border-slate-300';
+function onClick(event: MouseEvent) {
+  emit('click', event);
+}
+
+function onKeydown(event: KeyboardEvent) {
+  emit('keydown', event);
+}
+
+const classes = computed(() => {
+  const base = `inline-flex bg-white input-rounded border transition-colors duration-200`;
+  const border = hasErrorInternal.value ? 'border-red-500' : 'border-slate-300';
+  const disabled = props.disabled ? 'cursor-not-allowed text-slate-300' : '';
+  const sizeConfig = sizes[sizeInternal.value];
+  let focusClass = '';
+  if (props.visibleFocus) {
+    if (hasErrorInternal.value) {
+      focusClass = 'focus-within:input-focus-error';
+    } else {
+      focusClass = 'focus-within:input-focus';
+    }
+  }
+
+  return twMerge([
+    base,
+    border,
+    disabled,
+    sizeConfig.height,
+    sizeConfig.fontSize,
+    focusClass,
+    props.class,
+  ]);
+});
+
+const baseClasses = computed(() => {
+  const base = `border-none outline-none bg-transparent grow min-w-0 focus:border-none focus:outline-none focus:ring-0`;
+  const sizeConfig = sizes[sizeInternal.value];
+  const disabled = props.disabled ? 'cursor-not-allowed text-slate-300' : '';
+
+  const paddingX = {
+    xs: [hasLeftDecoration.value ? 'pl-0.5' : 'pl-2', hasRightDecoration.value ? 'pr-0' : 'pr-2'],
+    sm: [hasLeftDecoration.value ? 'pl-0.5' : 'pl-2.5', hasRightDecoration.value ? 'pr-0' : 'pr-2.5'],
+    md: [hasLeftDecoration.value ? 'pl-1' : 'pl-3', hasRightDecoration.value ? 'pr-1' : 'pr-3'],
+  }[sizeInternal.value];
+
+  return [
+    base,
+    disabled,
+    paddingX,
+    sizeConfig.fontSize,
+  ];
 });
 
-const backgroundColor = computed(() => {
-  return hasErrorInternal.value ? 'bg-red-100' : 'bg-slate-100';
+const decorationWrapClasses = computed(() => {
+  const base = `flex justify-center empty:hidden`;
+  const spacing = {
+    xs: 'first:pl-0.5 last:pr-0.5 py-0.5',
+    sm: 'first:pl-1 last:pr-1 py-1',
+    md: 'first:pl-1 last:pr-1 py-1',
+  }[sizeInternal.value];
+
+  return [
+    base,
+    spacing,
+  ];
 });
 
-const textColor = computed(() => {
-  return hasErrorInternal.value ? 'text-red-800' : 'text-slate-600';
+const decorationClasses = computed(() => {
+  const base = `flex items-center justify-center rounded-md`;
+  const textColor = hasErrorInternal.value ? 'text-red-800' : 'text-slate-500';
+  const padding = {
+    xs: 'p-1',
+    sm: 'p-1.5',
+    md: 'p-2',
+  }[sizeInternal.value];
+
+  return `${base} ${textColor} ${padding}`;
+});
+
+const iconClasses = computed(() => {
+  const sizeConfig = sizes[sizeInternal.value];
+
+  return [
+    sizeConfig.iconSize,
+  ];
 });
 
-function focus() {
+function focusAction() {
   input.value?.focus();
 }
 
-function blur() {
+function blurAction() {
   input.value?.blur();
 }
 
+function onIconLeftClickInternal() {
+  if (props.onIconLeftClick) {
+    props.onIconLeftClick();
+  } else {
+    focusAction();
+  }
+}
+
+function onIconRightClickInternal() {
+  if (props.onIconRightClick) {
+    props.onIconRightClick();
+  } else {
+    blurAction();
+  }
+}
+
 defineExpose({
-  focus,
-  blur,
+  focus: focusAction,
+  blur: blurAction,
 });
 </script>

package/src/components/BaseInputError.vue

@@ -1,7 +1,37 @@
 <template>
-  <p class="block text-sm font-medium leading-tight text-red-600">
+  <p :class="classes">
     <slot />
   </p>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { useInputSize } from '@/composables/inputSize';
+import { Size } from '@/utils/sizes';
+import { PropType } from 'vue';
+
+
+const props = defineProps({
+  size: {
+    default: undefined,
+    type: String as PropType<Size>,
+  },
+});
+
+const { size } = useInputSize(computed(() => props.size));
+
+const classes = computed(() => {
+  const base = 'block font-medium leading-tight text-red-600';
+
+  const responsive = {
+    'xs': 'text-xs mb-0.5',
+    'sm': 'text-xs mb-1',
+    'md': 'text-sm mb-1',
+  }[size.value];
+
+  return [
+    base,
+    responsive,
+  ]
+});
+
+</script>

package/src/components/BaseInputLabel.vue

@@ -2,25 +2,27 @@
   <label :class="classes">
     <div
       ref="labelRef"
-      class="relative inline-flex"
+      class="relative inline-flex items-center flex-wrap"
       :class="[help ? 'cursor-help' : 'cursor-default']"
     >
       <div> {{ label }}</div>
 
+      <div
+        v-if="required"
+        class="ml-0.5 text-red-600"
+      > *</div>
+
       <BaseTooltip
         v-if="help"
         :text="help"
       >
         <BaseIcon
-          class="block relative text-slate-900 -bottom-[3px] ml-1 mr-1 h-[13px] w-[13px]"
+          class="block relative text-slate-900 ml-1 mr-1 h-[13px] w-[13px]"
           icon="mdi:information-outline"
         />
       </BaseTooltip>
 
-      <div
-        v-if="required"
-        class="ml-0.5 text-red-600"
-      > *</div>
+      
     </div>
   </label>
 </template>
@@ -29,8 +31,15 @@
 import { PropType } from 'vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 import BaseTooltip from './BaseTooltip.vue';
+import { Size } from '@/utils/sizes';
+import { useInputSize } from '@/composables/inputSize';
+import { ClassNameValue, twMerge } from 'tailwind-merge';
 
-defineProps({
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps({
   required: {
     default: false,
     type: Boolean,
@@ -39,16 +48,34 @@ defineProps({
     required: true,
     type: String,
   },
-  classes: {
+  class: {
     default: 'mb-1 block text-sm',
-    type: String,
+    type: [String, Array] as PropType<ClassNameValue>,
   },
   help: {
     default: null,
     type: [String, null] as PropType<string | null>,
   },
+  size: {
+    default: undefined,
+    type: String as PropType<Size>,
+  },
 });
 
 const labelRef = ref();
 
+const { size } = useInputSize(computed(() => props.size));
+
+const classes = computed(() => {
+  const base = 'mb-1 block text-sm';
+
+  const responsive = {
+    'xs': 'text-xs mb-[0.2rem]',
+    'sm': 'text-sm mb-1',
+    'md': 'text-sm mb-1',
+  }[size.value];
+
+  return twMerge(base, responsive, props.class);
+});
+
 </script>

package/src/components/BasePassword.stories.js

@@ -1,10 +1,18 @@
 import BasePassword from './BasePassword.vue';
 import { createFieldStory } from '@/../.storybook/utils';
 
+const sizes = ['xs', 'sm', 'md'];
+
 export default {
   title: 'Form/BasePassword',
   component: BasePassword,
   args: {},
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: sizes,
+    },
+  },
 };
 
 const Template = (args) => ({
@@ -55,4 +63,21 @@ const FocusTemplate = (args) => ({
   `,
 });
 
+const TemplateSizes = (args) => ({
+  components: { BasePassword },
+  setup() {
+    const value = ref(null);
+    const sizes = ['xs', 'sm', 'md'];
+    return { args, value, sizes };
+  },
+  template: `
+  <div v-for="size in sizes" :key="size" class="mb-4">
+    <p class="text-xs text-slate-600 leading-tight mb-1">{{ size }}</p>
+    <BasePassword v-model="value" v-bind="args" :size="size" class="w-full"></BasePassword>
+  </div>
+  `,
+});
+
+export const Sizes = TemplateSizes.bind({});
+
 export const Focus = FocusTemplate.bind({});

package/src/components/BasePassword.vue

@@ -1,50 +1,25 @@
 <template>
-  <div
-    class="flex rounded border bg-white"
-    :class="[
-      disabled ? 'cursor-not-allowed text-slate-300' : '',
-      hasErrorInternal ? 'border-red-500' : 'border-slate-300',
-    ]"
-  >
-    <input
-      ref="input"
-      :value="modelValue"
-      :type="showPassword ? 'text' : 'password'"
-      :name="nameInternal"
-      :disabled="disabled"
-      :placeholder="placeholder"
-      :required="requiredInternal"
-      class="grow rounded-l rounded-r-none border-none focus:ring-2 focus:ring-primary-500 disabled:cursor-not-allowed"
-      @input="onInput"
-    >
-    <div class="flex shrink-0 pl-3">
-      <button
-        tabindex="-1"
-        type="button"
-        class="pr-3 text-slate-500 disabled:cursor-not-allowed disabled:text-slate-300"
-        :disabled="disabled"
-        @click="showPassword = !showPassword"
-      >
-        <BaseIcon
-          v-if="!showPassword"
-          icon="heroicons:eye-slash-20-solid"
-          class="h-5 w-5"
-        />
-        <BaseIcon
-          v-else
-          icon="heroicons:eye-20-solid"
-          class="h-5 w-5"
-        />
-      </button>
-    </div>
-  </div>
+  <BaseInput
+    ref="input"
+    :model-value="modelValue"
+    :type="showPassword ? 'text' : 'password'"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :size="size"
+    :icon-right="showPassword ? 'heroicons:eye-20-solid' : 'heroicons:eye-slash-20-solid'"
+    @icon-right-click="onIconRightClick"
+    @update:model-value="onUpdateModelValue"
+    @focus="onFocus"
+    @blur="onBlur"
+  />
 </template>
 
 <script lang="ts" setup>
-import { trim } from 'lodash';
-import { Icon as BaseIcon } from '@iconify/vue';
 import { PropType } from 'vue';
-import { useField } from '@/composables/field';
+import { Size } from '@/utils/sizes';
+import BaseInput from './BaseInput.vue';
+
+const emit = defineEmits(['update:modelValue', 'blur', 'focus']);
 
 const props = defineProps({
   modelValue: {
@@ -55,6 +30,10 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  size: {
+    default: undefined,
+    type: String as PropType<Size>,
+  },
   name: {
     default: undefined,
     type: String,
@@ -75,21 +54,10 @@ const props = defineProps({
 
 const input = ref<HTMLInputElement | null>(null);
 
-const emit = defineEmits(['update:modelValue']);
-
-const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate } =
-  useField({
-    name: computed(() => props.name),
-    required: computed(() => props.required),
-    hasError: computed(() => props.hasError),
-    emit: emit,
-  });
-
 const showPassword = ref(false);
 
-function onInput(event: any) {
-  const value = event.target.value + '';
-  emitUpdate(trim(value));
+function onIconRightClick() {
+  showPassword.value = !showPassword.value;
 }
 
 function focus() {
@@ -100,6 +68,18 @@ function blur() {
   input.value?.blur();
 }
 
+function onUpdateModelValue(value: string) {
+  emit('update:modelValue', value);
+}
+
+function onBlur() {
+  emit('blur');
+}
+
+function onFocus() {
+  emit('focus');
+}
+
 defineExpose({
   focus,
   blur,