sprintify-ui 0.6.31 → 0.6.33

package/src/components/BaseInput.vue

@@ -1,27 +1,23 @@
 <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">
+      <div
+        v-if="iconLeft"
+        :class="decorationClasses"
+      >
+        <BaseIcon
+          :icon="iconLeft"
+          :class="iconClasses"
+        />
+      </div>
+      <div
+        v-if="prefix"
+        :class="decorationClasses"
+      >
+        {{ prefix }}
+      </div>
     </div>
+
     <input
       v-if="maskOptions"
       ref="input"
@@ -30,12 +26,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 +38,27 @@
       :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,
-      ]"
+      :class="baseClasses"
+      @input="onInput"
+      @click="onClick"
+      @keydown="onKeydown"
     >
-      {{ 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 :class="decorationWrapClasses">
+      <div
+        v-if="suffix"
+        :class="decorationClasses"
+      >
+        {{ suffix }}
+      </div>
+      <div
+        v-if="iconRight"
+        :class="decorationClasses"
+      >
+        <BaseIcon
+          :icon="iconRight"
+          :class="iconClasses"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -79,12 +69,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 +140,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 +158,22 @@ const props = defineProps({
       return null;
     },
   },
+  visibleFocus: {
+    default: true,
+    type: Boolean,
+  },
 });
 
 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 maskOptions = computed(() => {
   if (props.mask) {
@@ -167,14 +184,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 +193,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 +200,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 +229,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 +248,97 @@ 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 backgroundColor = computed(() => {
-  return hasErrorInternal.value ? 'bg-red-100' : 'bg-slate-100';
+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-1.5' : 'pl-2', hasRightDecoration.value ? 'pr-1.5' : 'pr-2'],
+    sm: [hasLeftDecoration.value ? 'pl-2' : 'pl-2.5', hasRightDecoration.value ? 'pr-2' : 'pr-2.5'],
+    md: [hasLeftDecoration.value ? 'pl-2.5' : 'pl-3', hasRightDecoration.value ? 'pr-2.5' : 'pr-3'],
+  }[sizeInternal.value];
+
+  return [
+    base,
+    disabled,
+    paddingX,
+    sizeConfig.fontSize,
+  ];
+});
+
+const decorationWrapClasses = computed(() => {
+  const base = `flex items-center justify-center empty:hidden`;
+  const spacing = {
+    xs: 'first:pl-2 last:pr-2 gap-1',
+    sm: 'first:pl-2.5 last:pr-2.5 gap-2',
+    md: 'first:pl-3 last:pr-3 gap-3',
+  }[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`;
+  const textColor = hasErrorInternal.value ? 'text-red-800' : 'text-slate-500';
+
+  return `${base} ${textColor}`;
+});
+
+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();
 }
 
 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/BaseSelect.stories.js

@@ -78,6 +78,23 @@ Disabled.args = {
   disabled: true,
 };
 
+const TemplateSizes = (args) => ({
+  components: { BaseSelect },
+  setup() {
+    const value = ref(null);
+    const sizes = ['xs', 'sm', 'md'];
+    return { args, value, sizes, options };
+  },
+  template: `
+  <div v-for="size in sizes" :key="size" class="mb-4">
+    <p class="text-xs text-slate-600 leading-tight mb-1">btn {{ size }}</p>
+    <BaseSelect v-model="value" v-bind="args" :options="options" label-key="label" value-key="value" :size="size" class="w-full"></BaseSelect>
+  </div>
+  `,
+});
+
+export const Sizes = TemplateSizes.bind({});
+
 export const OptionsAsProps = (args) => ({
   components: { BaseSelect, ShowValue },
   setup() {
@@ -106,6 +123,23 @@ OptionsAsProps.args = {
   valueKey: 'label',
 };
 
+const CustomClassesT = (args) => ({
+  components: { BaseSelect },
+  setup() {
+    const value = ref(null);
+    return { args, value };
+  },
+  template: `
+    <BaseSelect 
+      v-model="value"
+      v-bind="args"
+      class="w-full bg-green-100 text-green-700 border-green-700 focus-within:border-red-500 focus-within:ring-red-800 placeholder:text-green-400 shadow-xl"
+    ></BaseSelect>
+  `,
+});
+
+export const CustomClasses = CustomClassesT.bind({});
+
 export const Field = createFieldStory({
   component: BaseSelect,
   componentName: 'BaseSelect',

package/src/components/BaseSelect.vue

@@ -5,11 +5,7 @@
     :name="nameInternal"
     :disabled="disabled"
     :required="requiredInternal"
-    class="rounded border disabled:cursor-not-allowed disabled:text-slate-300 disabled:opacity-100"
-    :class="[
-      !modelValue && requiredInternal ? 'text-slate-400' : '',
-      hasErrorInternal ? 'border-red-600' : 'border-slate-300',
-    ]"
+    :class="classes"
     @change="onChange($event)"
   >
     <template v-if="requiredInternal">
@@ -43,17 +39,22 @@
 
 <script lang="ts" setup>
 import { PropType } from 'vue';
-import { get, isArray, isEqual } from 'lodash';
-import { useMutationObserver } from '@vueuse/core';
+import { get, isArray } from 'lodash';
 import { useField } from '@/composables/field';
 import { NormalizedOption, OptionValue, Option } from '@/types';
 import { t } from '@/i18n';
+import { twMerge } from 'tailwind-merge';
+import { Size, sizes } from '@/utils/sizes';
 
 type SelectOption = string | number | null;
 
 const EMPTY_VALUE_INTERNAL = '';
 const EMPTY_VALUE_EXTERNAL = null;
 
+defineOptions({
+  inheritAttrs: false,
+});
+
 const props = defineProps({
   modelValue: {
     default: undefined,
@@ -63,6 +64,14 @@ const props = defineProps({
     default: undefined,
     type: String,
   },
+  class: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
+  },
+  size: {
+    default: undefined,
+    type: String as PropType<Size>,
+  },
   placeholder: {
     default: '',
     type: String,
@@ -91,16 +100,21 @@ const props = defineProps({
     default: undefined,
     type: String,
   },
+  visibleFocus: {
+    default: true,
+    type: Boolean,
+  },
 });
 
 const select = ref<HTMLSelectElement | null>(null);
 
 const emit = defineEmits(['update:modelValue']);
 
-const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate } =
+const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate, sizeInternal } =
   useField({
     name: computed(() => props.name),
     required: computed(() => props.required),
+    size: computed(() => props.size),
     hasError: computed(() => props.hasError),
     emit: emit,
   });
@@ -182,4 +196,39 @@ const normalizedOptions = computed<NormalizedOption[] | undefined>(() => {
     } as NormalizedOption;
   });
 });
+
+const classes = computed(() => {
+  const base = 'input-rounded border transition-colors duration-200 py-0';
+
+  let focusClass = '';
+  if (props.visibleFocus) {
+    if (hasErrorInternal.value) {
+      focusClass = 'focus-within:input-focus-error';
+    } else {
+      focusClass = 'focus-within:input-focus';
+    }
+  }
+
+  const disabled = 'disabled:cursor-not-allowed disabled:text-slate-300 disabled:opacity-100';
+  const error = hasErrorInternal.value ? 'border-red-600' : 'border-slate-300';
+  const textColor = !props.modelValue && requiredInternal ? 'text-slate-400' : '';
+  const sizeConfig = sizes[sizeInternal.value];
+  const padding = {
+    xs: 'pl-2 pr-7',
+    sm: 'pl-2.5 pr-8',
+    md: 'pl-3 pr-10',
+  }[sizeInternal.value];
+
+  return twMerge([
+    base,
+    focusClass,
+    disabled,
+    error,
+    textColor,
+    sizeConfig.height,
+    sizeConfig.fontSize,
+    padding,
+    props.class,
+  ]);
+});
 </script>

package/src/components/BaseTagAutocomplete.vue

@@ -116,6 +116,7 @@ import { useNotificationsStore } from '@/stores/notifications';
 import BaseAutocompleteDrawer from './BaseAutocompleteDrawer.vue';
 import { twMerge } from 'tailwind-merge';
 import { t } from '@/i18n';
+import { Size } from '@/utils/sizes';
 
 const notifications = useNotificationsStore();
 
@@ -177,8 +178,8 @@ const props = defineProps({
     type: Boolean,
   },
   size: {
-    default: 'base',
-    type: String as PropType<'xs' | 'sm' | 'base'>,
+    default: 'md',
+    type: String as PropType<Size>,
   },
   dropdownShow: {
     default: 'focus',

package/src/components/BaseTimelineItem.stories.js

@@ -68,9 +68,7 @@ WithDescription.args = {
   item: {
     title: 'Advanced to phone screening by Bethany Blake',
     icon: 'heroicons:shield-check-20-solid',
-    description:
-      'Lorem nostrud quis aute elit ea Lorem magna eiusmod ipsum. Eu ipsum eiusmod ad minim adipisicing irure. Fugiat ut adipisicing consequat dolor.',
-    color: 'primary',
+    description: 'Lorem nostrud quis aute elit ea Lorem magna eiusmod ipsum. Eu ipsum eiusmod ad minim adipisicing irure. Fugiat ut adipisicing consequat dolor.',
     date: '15 Jan',
   },
 };