sprintify-ui 0.6.32 → 0.6.34

package/src/components/BaseColor.stories.js

@@ -2,10 +2,18 @@ import { createFieldStory } from '../../.storybook/utils';
 import BaseColor from './BaseColor.vue';
 import ShowValue from '../../.storybook/components/ShowValue.vue';
 
+const sizes = ['xs', 'sm', 'md'];
+
 export default {
   title: 'Form/BaseColor',
   component: BaseColor,
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: sizes,
+    },
+  },
 };
 
 const Template = (args) => ({
@@ -39,6 +47,20 @@ Disabled.args = {
   modelValue: '#16a34a',
 };
 
+export const Sizes = (args) => ({
+  components: { BaseColor },
+  setup() {
+    const value = ref(null);
+    return { args, sizes, value };
+  },
+  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>
+      <BaseColor v-bind="args" v-model="value" :size="size"></BaseColor>
+    </div>
+  `,
+});
+
 export const Field = createFieldStory({
   component: BaseColor,
   componentName: 'BaseColor',

package/src/components/BaseColor.vue

@@ -5,36 +5,28 @@
       :disabled="disabled"
       value-key="value"
       label-key="label"
+      :size="size"
       :required="required"
       :options="colorOptions"
       :multiple="multiple"
       :button-type="buttonType"
-      tw-button=""
-      tw-button-selected=""
-      tw-button-unselected=""
+      :button-color="buttonColor"
+      tw-button="p-0 aspect-1 justify-center items-center"
       @update:model-value="(value) => transformModelValue(value)"
     >
       <template #option="option">
         <div
-          :style="{ backgroundColor: option.option.value + '' }"
-          class="box-border rounded-md border p-3"
-          :class="[
-            option.selected.value
-              ? option.option.option.hasLowContrast
-                ? 'text-slate-700'
-                : 'text-white'
-              : 'text-transparent',
-            disabled ? ' cursor-not-allowed opacity-50' : '',
-            option.option.option.hasLowContrast
-              ? 'border-slate-400'
-              : 'border-transparent',
-          ]"
+          v-if="option.selected.value"
+          class="overflow-hidden flex h-full"
         >
           <BaseIcon
             icon="heroicons-solid:check-circle"
-            class="h-5 w-5"
+            class="block leading-none"
+            width="18"
+            height="18"
           />
         </div>
+        <div v-else />
       </template>
     </BaseButtonGroup>
   </div>
@@ -48,6 +40,7 @@ import { useField } from '@/composables/field';
 import { Option } from '@/types';
 import { palette } from '@/utils/colors';
 import { getContrast } from 'color2k';
+import { Size } from '@/utils/sizes';
 
 const props = defineProps({
   modelValue: {
@@ -64,6 +57,10 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  size: {
+    default: undefined,
+    type: String as PropType<Size>,
+  },
   buttonType: {
     default: 'button',
     type: String as PropType<'button' | 'submit'>,
@@ -74,6 +71,12 @@ const props = defineProps({
       return Object.values(palette).map((p) => p.high.backgroundColor);
     },
   },
+  buttonColor: {
+    default(option: Option, selected: boolean) {
+      return option.value;
+    },
+    type: Function as PropType<(option: Option, selected: boolean) => string>,
+  },
   multiple: {
     default: false,
     type: Boolean,
@@ -107,15 +110,15 @@ function hasLowContrast(color: string): boolean {
 const normalizeModelValue = computed(() => {
   return isArray(props.modelValue)
     ? props.modelValue?.map((m) => {
-        return {
-          label: m,
-          value: m,
-        };
-      })
-    : {
-        label: props.modelValue,
-        value: props.modelValue,
+      return {
+        label: m,
+        value: m,
       };
+    })
+    : {
+      label: props.modelValue,
+      value: props.modelValue,
+    };
 });
 
 const { emitUpdate } = useField({

package/src/components/BaseDataTable.vue

@@ -54,7 +54,7 @@
             >
               <template #button="{ open }">
                 <div
-                  class="flex h-10 px-4 items-center justify-center btn pl-3"
+                  class="flex pl-2 pr-4 items-center justify-center btn btn-sm"
                   :class="[
                     open ? 'ring-2 ring-primary-500 ring-offset-2' : false,
                   ]"
@@ -64,7 +64,7 @@
                     class="mr-2"
                   />
 
-                  <span class="font-semibold">
+                  <span>
                     {{ t('sui.bulk_actions') }}
                   </span>
                 </div>
@@ -122,8 +122,8 @@
                     :tw-button="[
                       'btn flex p-0 items-center justify-center',
                       {
-                        'py-1.5 px-2': size == 'sm',
-                        'p-2': size == 'md'
+                        'btn-xs py-1 px-2': size == 'sm',
+                        'btn-sm p-2': size == 'md'
                       }
                     ]"
                   >
@@ -131,7 +131,7 @@
                       <BaseIcon
                         icon="heroicons-solid:dots-vertical"
                         :class="{
-                          'h-3 w-3': size == 'sm'
+                          'h-3 w-3': size === 'sm',
                         }"
                       />
                     </template>

package/src/components/BaseDataTableRowAction.vue

@@ -4,8 +4,8 @@
     type="button"
     class="btn btn-white border border-slate-300 shadow-sm"
     :class="{
-      'py-1.5 px-2': size === 'sm',
-      'p-2': size === 'md',
+      'btn-xs px-1.5 py-1': size === 'sm',
+      'btn-sm px-2 py-1.5': size === 'md',
     }"
     :disabled="rowAction.disabled && rowAction.disabled(row)"
     @click="rowAction.action ? rowAction.action(row) : null"
@@ -14,7 +14,7 @@
       :icon="rowAction.icon"
       class="text-slate-500"
       :class="{
-        'h-3 w-3': size == 'sm'
+        'h-3 w-3': size === 'sm',
       }"
     />
   </button>
@@ -24,15 +24,15 @@
     :disabled="rowAction.disabled && rowAction.disabled(row)"
     class="btn btn-white border border-slate-300 shadow-sm hover:bg-slate-100"
     :class="{
-      'py-1.5 px-2': size === 'sm',
-      'p-2': size === 'md',
+      'btn-xs px-1.5 py-1': size === 'sm',
+      'btn-sm px-2 py-1.5': size === 'md',
     }"
   >
     <BaseIcon
       :icon="rowAction.icon"
       class="text-slate-500"
       :class="{
-        'h-3 w-3': size == 'sm'
+        'h-3 w-3': size === 'sm',
       }"
     />
   </RouterLink>

package/src/components/BaseDatePicker.vue

@@ -237,9 +237,12 @@ onMounted(() => {
 
 onUnmounted(() => {
   // Cause weird animation problems when using with BaseDropdown
-  // We assume the calendar will self destroy when the component is unmounted
-
-  // picker?.destroy();
+  // Added a timeout to make sure the animation is done before destroying the picker
+  setTimeout(() => {
+    if (picker) {
+      picker.destroy();
+    }
+  }, 300);
 });
 
 function init() {

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

@@ -93,7 +93,6 @@ export const WithAutocomplete = (args) => ({
             size="xs"
             :options="options"
             :inline="true"
-            :visibleFocus="false"
             dropdownShow="always"
             :showModelValue="false"
             focus-on-mount
@@ -143,14 +142,14 @@ export const ModalWithScroll = (args) => ({
   },
   template: `
   <BaseModalCenter v-model="open">
-    <div class="p-10 bg-white">
+    <div class="p-10">
       <BaseDropdown v-bind="args">
         <template #button>
           <div class="btn btn-primary">Click me</div>
         </template>
         <template #dropdown>
           <div 
-            class="bg-white shadow py-1 px-1 rounded" 
+            class="bg-white ring-1 shadow-xl ring-black ring-opacity-10 py-1 px-1 rounded-md" 
             style="max-height: 200px; overflow: auto;" 
             data-scroll-lock-scrollable>
             <button type="button" v-for="item in items" :key="item.label" class="block text-sm px-4 py-1.5">{{ item.label }}</button>

package/src/components/BaseDropdownAutocomplete.vue

@@ -13,7 +13,7 @@
     </template>
     <template #dropdown="{ close }">
       <div
-        class="inline-block w-[320px] overflow-hidden rounded-md ring-1 ring-black ring-opacity-10 bg-white px-2 pt-2 shadow-2xl"
+        class="inline-block w-[320px] overflow-hidden input-rounded ring-1 ring-black ring-opacity-10 bg-white px-2 pt-2 shadow-2xl"
       >
         <component
           :is="componentName"
@@ -33,7 +33,7 @@
           <template #option="optionProps">
             <div
               :class="[optionProps.active ? 'bg-slate-100' : 'bg-white']"
-              class="mb-px flex items-center rounded px-1 py-1"
+              class="mb-px flex items-center input-rounded px-1 py-1"
             >
               <div class="flex grow items-center">
                 <slot

package/src/components/BaseField.vue

@@ -4,7 +4,8 @@
       v-if="labelNormalized"
       :label="labelNormalized"
       :required="required"
-      :class="labelClassInternal"
+      :size="inputSize.size.value"
+      :class="labelClassInternalMerged"
       :help="help"
     />
 
@@ -19,6 +20,7 @@
     <template v-if="errorMessage">
       <BaseInputError
         v-if="errorTypeInternal == 'default'"
+        :size="inputSize.size.value"
         class="mt-1"
       >
         {{ errorMessage }}
@@ -40,6 +42,9 @@ import { PropType } from 'vue';
 import BaseAlert from './BaseAlert.vue';
 import BaseInputError from './BaseInputError.vue';
 import BaseInputLabel from './BaseInputLabel.vue';
+import { useInputSize } from '@/composables/inputSize';
+import { Size } from '@/utils/sizes';
+import { ClassNameValue, twMerge } from 'tailwind-merge';
 
 const props = defineProps({
   name: {
@@ -50,6 +55,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  size: {
+    default: undefined,
+    type: String as PropType<Size>,
+  },
   required: {
     type: Boolean,
     default: false,
@@ -68,25 +77,26 @@ const props = defineProps({
   },
   labelClass: {
     default: '',
-    type: [String, Array, Object] as PropType<
-      string | string[] | Record<string, boolean>
-    >,
+    type: [String, Array] as PropType<ClassNameValue>,
   },
 });
 
 const errorTypeInternal = ref(props.errorType);
 
+const inputSize = useInputSize(computed(() => props.size));
+
 function setErrorType(errorType: 'default' | 'alert' | null) {
   if (errorType != null) {
     errorTypeInternal.value = errorType;
   }
 }
 
-const labelClassInternal = ref(props.labelClass);
+const labelClassInternal = ref<any>('');
+const labelClassInternalMerged = computed(() => {
+  return twMerge(labelClassInternal.value, props.labelClass);
+});
 
-function setLabelClass(
-  labelClass: string | string[] | Record<string, boolean> | null
-) {
+function setLabelClass(labelClass: ClassNameValue) {
   if (labelClass != null) {
     labelClassInternal.value = labelClass;
   }
@@ -122,6 +132,7 @@ const errorMessage = computed((): string | null | undefined => {
 
 provide('field:name', readonly(ref(props.name)));
 provide('field:required', readonly(ref(props.required)));
+provide('field:size', readonly(inputSize.size));
 provide('field:onUpdate', fieldOnUpdate);
 provide('field:errorMessage', errorMessage);
 provide('field:setErrorType', setErrorType);

package/src/components/BaseInput.stories.js

@@ -19,6 +19,10 @@ export default {
     placeholder: 'Enter your name',
   },
   argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['xs', 'sm', 'md'],
+    },
     mask: {
       control: { type: 'select' },
       options: [
@@ -56,7 +60,7 @@ IconLeft.args = {
 
 export const IconRight = Template.bind({});
 IconRight.args = {
-  iconRight: 'mdi:email-outline',
+  iconRight: 'mdi:email',
   placeholder: 'Enter your email',
 };
 
@@ -144,12 +148,42 @@ CustomMask.args = {
   mask: (value) => (value.startsWith('1') ? '#-#' : '##-##'),
 };
 
+const CustomClassesT = (args) => ({
+  components: { BaseInput, ShowValue },
+  setup() {
+    const value = ref(null);
+    return { args, value };
+  },
+  template: `
+    <BaseInput v-model="value" v-bind="args" suffix="$$$" 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"></BaseInput>
+    <ShowValue :value="value" />
+  `,
+});
+
+export const CustomClasses = CustomClassesT.bind({});
+
 export const Field = createFieldStory({
   component: BaseInput,
   componentName: 'BaseInput',
   label: 'Name',
 });
 
+const TemplateSizes = (args) => ({
+  components: { BaseInput },
+  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>
+    <BaseInput v-model="value" v-bind="args" :size="size" class="w-full"></BaseInput>
+  </div>
+  `,
+});
+
+export const Sizes = TemplateSizes.bind({});
 
 const FocusTemplate = (args) => ({
   components: { BaseInput },
@@ -161,7 +195,7 @@ const FocusTemplate = (args) => ({
   template: `
     <BaseInput ref="input" v-model="value" v-bind="args" class="w-full"></BaseInput>
 
-    <button @click="input.focus()" class="mt-4 underline">Focus</button>
+    <button @click="input.focus()" class="mt-4 btn btn-sm">Focus</button>
   `,
 });