sprintify-ui 0.6.33 → 0.6.34

package/src/components/BaseDraggable.vue

@@ -2,7 +2,7 @@
   <div ref="elementsRef">
     <slot
       v-for="(element, index) in modelValue"
-      :key="element[itemKey]"
+      :key="getKey(element, index)"
       name="item"
       :element="element"
       :index="index"
@@ -25,6 +25,10 @@ const emit = defineEmits(['update:modelValue']);
 
 const elementsRef = ref<HTMLElement | null>(null);
 
+function getKey(element: any, index: number) {
+  return element[props.itemKey] ?? index;
+}
+
 let sortable = null as Sortable | null;
 
 onMounted(() => {

package/src/components/BaseInput.stories.js

@@ -60,7 +60,7 @@ IconLeft.args = {
 
 export const IconRight = Template.bind({});
 IconRight.args = {
-  iconRight: 'mdi:email-outline',
+  iconRight: 'mdi:email',
   placeholder: 'Enter your email',
 };
 
@@ -169,7 +169,7 @@ export const Field = createFieldStory({
 });
 
 const TemplateSizes = (args) => ({
-  components: { BaseInput, ShowValue },
+  components: { BaseInput },
   setup() {
     const value = ref(null);
     const sizes = ['xs', 'sm', 'md'];
@@ -177,7 +177,7 @@ const TemplateSizes = (args) => ({
   },
   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>
+    <p class="text-xs text-slate-600 leading-tight mb-1">{{ size }}</p>
     <BaseInput v-model="value" v-bind="args" :size="size" class="w-full"></BaseInput>
   </div>
   `,

package/src/components/BaseInput.vue

@@ -1,18 +1,22 @@
 <template>
   <div :class="classes">
     <div :class="decorationWrapClasses">
-      <div
+      <component
+        :is="hasLeftListener ? 'button' : 'div'"
         v-if="iconLeft"
-        :class="decorationClasses"
+        :type="hasLeftListener ? 'button' : undefined"
+        :class="[decorationClasses, hasLeftListener ? 'hover:bg-slate-100' : '']"
+        @click="onIconLeftClickInternal"
       >
         <BaseIcon
           :icon="iconLeft"
           :class="iconClasses"
         />
-      </div>
+      </component>
       <div
         v-if="prefix"
         :class="decorationClasses"
+        @click="focusAction"
       >
         {{ prefix }}
       </div>
@@ -47,18 +51,22 @@
       <div
         v-if="suffix"
         :class="decorationClasses"
+        @click="focusAction"
       >
         {{ suffix }}
       </div>
-      <div
+      <component
+        :is="hasRightListener ? 'button' : 'div'"
         v-if="iconRight"
-        :class="decorationClasses"
+        :type="hasRightListener ? 'button' : undefined"
+        :class="[decorationClasses, hasRightListener ? 'hover:bg-slate-100' : '']"
+        @click="onIconRightClickInternal"
       >
         <BaseIcon
           :icon="iconRight"
           :class="iconClasses"
         />
-      </div>
+      </component>
     </div>
   </div>
 </template>
@@ -162,6 +170,14 @@ const props = defineProps({
     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);
@@ -175,6 +191,14 @@ 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) {
     return {
@@ -287,9 +311,9 @@ const baseClasses = computed(() => {
   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'],
+    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 [
@@ -301,11 +325,11 @@ const baseClasses = computed(() => {
 });
 
 const decorationWrapClasses = computed(() => {
-  const base = `flex items-center justify-center empty:hidden`;
+  const base = `flex 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',
+    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 [
@@ -315,10 +339,15 @@ const decorationWrapClasses = computed(() => {
 });
 
 const decorationClasses = computed(() => {
-  const base = `flex items-center justify-center`;
+  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}`;
+  return `${base} ${textColor} ${padding}`;
 });
 
 const iconClasses = computed(() => {
@@ -337,6 +366,22 @@ 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: focusAction,
   blur: blurAction,

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,

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
   );
 });