sprintify-ui 0.6.32 → 0.6.34

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/BaseTextarea.stories.js

@@ -1,12 +1,20 @@
 import { createFieldStory } from '../../.storybook/utils';
 import BaseTextarea from './BaseTextarea.vue';
 
+const sizes = ['xs', 'sm', 'md'];
+
 export default {
   title: 'Form/BaseTextarea',
   component: BaseTextarea,
   args: {
     placeholder: 'Describe your complete life in 4 sentences...',
   },
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: sizes,
+    },
+  },
 };
 
 const Template = (args) => ({
@@ -42,6 +50,23 @@ export const Field = createFieldStory({
   label: 'Biography',
 });
 
+const TemplateSizes = (args) => ({
+  components: { BaseTextarea },
+  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>
+    <BaseTextarea v-model="value" v-bind="args" :size="size" class="w-full"></BaseTextarea>
+  </div>
+  `,
+});
+
+export const Sizes = TemplateSizes.bind({});
+
 const FocusTemplate = (args) => ({
   components: { BaseTextarea },
   setup() {

package/src/components/BaseTextarea.vue

@@ -8,17 +8,23 @@
     :disabled="disabled"
     :required="requiredInternal"
     :rows="rows"
-    :class="[hasErrorInternal ? 'border-red-500' : 'border-slate-300']"
-    class="mb-0 block rounded disabled:cursor-not-allowed disabled:text-slate-300"
+    :autocomplete="autocomplete ? 'on' : 'off'"
+    :class="classes"
     @input="emitUpdate(transformInputValue($event))"
   />
 </template>
 
 <script lang="ts" setup>
 import { useField } from '@/composables/field';
+import { Size, sizes } from '@/utils/sizes';
 import { get, isString } from 'lodash';
+import { twMerge } from 'tailwind-merge';
 import { PropType } from 'vue';
 
+defineOptions({
+  inheritAttrs: false,
+});
+
 const props = defineProps({
   modelValue: {
     default: undefined,
@@ -28,6 +34,14 @@ const props = defineProps({
     type: String,
     default: 'text',
   },
+  size: {
+    default: undefined,
+    type: String as PropType<Size>,
+  },
+  class: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
+  },
   autocomplete: {
     default: true,
     type: Boolean,
@@ -64,10 +78,11 @@ const props = defineProps({
 
 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,
   });
@@ -96,6 +111,22 @@ function blur() {
   textareaRef.value?.blur();
 }
 
+const classes = computed(() => {
+  const base = 'mb-0 block input-rounded transition-colors duration-200';
+  const disabled = 'disabled:cursor-not-allowed disabled:text-slate-300';
+  const focus = 'focus:input-focus';
+  const error = hasErrorInternal.value ? 'border-red-500 focus:input-focus-error' : 'border-slate-300';
+  const sizeConfig = sizes[sizeInternal.value];
+
+  const padding = {
+    xs: 'p-2',
+    sm: 'p-2.5',
+    md: 'p-3',
+  }[sizeInternal.value];
+
+  return twMerge(base, disabled, error, focus, sizeConfig.fontSize, padding, props.class);
+});
+
 defineExpose({
   focus,
   blur,

package/src/components/BaseTextareaAutoresize.stories.js

@@ -2,6 +2,8 @@ import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
 import ShowValue from '@/../.storybook/components/ShowValue.vue';
 import { createFieldStory } from '../../.storybook/utils';
 
+const sizes = ['xs', 'sm', 'md'];
+
 export default {
   title: 'Form/BaseTextareaAutoresize',
   component: BaseTextareaAutoresize,
@@ -9,6 +11,12 @@ export default {
     name: 'name',
     placeholder: 'Describe your complete life in 4 sentences...',
   },
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: sizes,
+    },
+  },
 };
 
 const Template = (args) => ({
@@ -68,8 +76,8 @@ const TemplateTWTextarea = (args) => ({
     <BaseTextareaAutoresize 
       v-model="value" 
       v-bind="args" 
-      class="w-full shadow rounded" 
-      tw-textarea="p-5 bg-slate-100 text-slate-700 focus:ring-blue-200 focus:ring-4 text-sm"
+      class="w-full" 
+      tw-textarea="shadow-xl rounded-none p-5 duration-500 transition-all bg-slate-100 text-slate-900 ring-2 ring-purple-700 border-none ring-opacity-60 focus:ring-pink-500 focus:ring-4 focus:bg-pink-100"
       @submit="onSubmit"
     ></BaseTextareaAutoresize>
   </form>
@@ -86,6 +94,23 @@ export const Field = createFieldStory({
   label: 'Biography',
 });
 
+const TemplateSizes = (args) => ({
+  components: { BaseTextareaAutoresize },
+  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>
+    <BaseTextareaAutoresize v-model="value" v-bind="args" :size="size" class="w-full"></BaseTextareaAutoresize>
+  </div>
+  `,
+});
+
+export const Sizes = TemplateSizes.bind({});
+
 const FocusTemplate = (args) => ({
   components: { BaseTextareaAutoresize },
   setup() {

package/src/components/BaseTextareaAutoresize.vue

@@ -36,12 +36,10 @@
 
 <script lang="ts" setup>
 import { useField } from '@/composables/field';
+import { sizes, Size } from '@/utils/sizes';
 import { twMerge } from 'tailwind-merge';
 import { PropType } from 'vue';
 
-const BASE_TEXTAREA_CLASSES =
-  'py-2 px-3 font-normal text-base disabled:cursor-not-allowed disabled:text-slate-300 font-sans rounded leading-normal tracking-normal border placeholder:text-slate-400 placeholder:font-light';
-
 const BASE_GRID_AREA = '1 / 1 / 2 / 2';
 
 /* Note the weird space! Needed to prevent jumpy behavior */
@@ -64,6 +62,10 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  size: {
+    default: undefined,
+    type: String as PropType<Size>,
+  },
   maxHeight: {
     default: 100,
     type: Number,
@@ -98,10 +100,11 @@ const emit = defineEmits(['update:modelValue', 'submit', 'focus', 'input']);
 
 const textareaRef = ref<null | HTMLTextAreaElement>(null);
 
-const { nameInternal, requiredInternal, hasErrorInternal } =
+const { nameInternal, requiredInternal, hasErrorInternal, sizeInternal } =
   useField({
     name: computed(() => props.name),
     required: computed(() => props.required),
+    size: computed(() => props.size),
     hasError: computed(() => props.hasError),
     emit: emit,
   });
@@ -142,11 +145,27 @@ function onFocus(event: FocusEvent) {
 }
 
 const textareaClasses = computed(() => {
+  const base = 'py-2 px-3 input-rounded leading-normal tracking-normal border transition-colors duration-200';
+  const disabled = 'disabled:cursor-not-allowed disabled:text-slate-300';
+  const focus = 'focus:input-focus';
+  const error = hasErrorInternal.value ? 'border-red-500 focus:input-focus-error' : 'border-slate-300';
+  const placeholder = 'placeholder:text-slate-400 placeholder:font-light';
+  const sizeConfig = sizes[sizeInternal.value];
+
+  const padding = {
+    xs: 'px-2',
+    sm: 'px-2.5',
+    md: 'px-3',
+  }[sizeInternal.value];
+
   return twMerge(
-    [
-      BASE_TEXTAREA_CLASSES,
-      hasErrorInternal.value ? 'border-red-500' : 'border-slate-300',
-    ],
+    base,
+    disabled,
+    error,
+    placeholder,
+    focus,
+    sizeConfig.fontSize,
+    padding,
     props.twTextarea
   );
 });

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',
   },
 };

package/src/composables/field.ts

@@ -1,21 +1,26 @@
+import { Size } from '@/utils/sizes';
 import { uniqueId } from 'lodash';
 import { Ref } from 'vue';
+import { useInputSize } from './inputSize';
 
 interface Config {
   name: Ref<string | null | undefined>;
   required: Ref<boolean>;
   hasError: Ref<boolean | undefined>;
   emit: any;
+  size?: Ref<Size | undefined>;
   errorType?: string;
   labelClass?: string;
 }
 
 export function useField(config: Config) {
+
   const uuid = uniqueId();
   const name = config.name;
   const required = config.required;
   const hasError = config.hasError;
   const emit = config.emit;
+  const size = config.size;
   const errorType = config.errorType ?? null;
   const labelClass = config.labelClass ?? null;
 
@@ -23,6 +28,7 @@ export function useField(config: Config) {
 
   const fieldRequired = inject('field:required', ref(false)) as Ref<boolean>;
   const fieldName = inject('field:name', ref('')) as Ref<string>;
+  const fieldSize = inject('field:size', ref('md')) as Ref<Size>;
 
   const fieldOnUpdate = inject('field:onUpdate', () => {
     return;
@@ -88,6 +94,19 @@ export function useField(config: Config) {
     return fieldName.value;
   });
 
+  const sizeInternal = computed((): Size => {
+
+    let s = size?.value ?? null;
+
+    if (!s) {
+      s = fieldSize.value;
+    }
+
+    const inputSize = useInputSize(s);
+
+    return inputSize.size.value;
+  });
+
   const errorMessageInternal = computed((): string | null | undefined => {
     return getErrorMessageByName(nameInternal.value);
   });
@@ -110,6 +129,7 @@ export function useField(config: Config) {
     nameInternal,
     hasErrorInternal,
     errorMessageInternal,
+    sizeInternal,
     emitUpdate,
     enableForm: () => enableForm(uuid),
     disableForm: () => disableForm(uuid),

package/src/composables/inputSize.ts

@@ -0,0 +1,29 @@
+import { useBreakpoints } from "./breakpoints";
+import { Size } from "@/utils/sizes";
+import { MaybeRef } from "vue";
+
+function useInputSize(size: MaybeRef<Size | '' | undefined | null>) {
+
+    const bp = useBreakpoints();
+
+    const sizeInternal = computed(() => {
+
+        if (bp.smaller('sm').value) {
+            return 'md';
+        }
+
+        let s = unref(size);
+
+        if (!s) {
+            s = 'md';
+        }
+
+        return s;
+    });
+
+    return {
+        size: sizeInternal,
+    };
+}
+
+export { useInputSize };

package/src/utils/sizes.ts

@@ -0,0 +1,21 @@
+const sizes = {
+    xs: {
+        fontSize: 'text-xs',
+        height: 'h-control-xs',
+        iconSize: 'h-[0.9rem] w-[0.9rem]'
+    },
+    sm: {
+        fontSize: 'text-sm',
+        height: 'h-control-sm',
+        iconSize: 'h-[1.125rem] w-[1.125rem]'
+    },
+    md: {
+        fontSize: 'text-base',
+        height: 'h-control-md',
+        iconSize: 'h-5 w-5'
+    },
+};
+
+type Size = keyof typeof sizes;
+
+export { sizes, Size }