sprintify-ui 0.6.33 → 0.6.35

package/src/components/BaseDateSelect.stories.js

@@ -2,10 +2,17 @@ import BaseDateSelect from './BaseDateSelect.vue';
 import ShowValue from '@/../.storybook/components/ShowValue.vue';
 import { createFieldStory } from '../../.storybook/utils';
 
+const sizes = ['xs', 'sm', 'md'];
+
 export default {
   title: 'Form/BaseDateSelect',
   component: BaseDateSelect,
-  argTypes: {},
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: sizes,
+    }
+  },
 };
 
 const Template = (args) => ({
@@ -40,6 +47,23 @@ Disabled.args = {
   disabled: true,
 };
 
+const TemplateSizes = (args) => ({
+  components: { BaseDateSelect },
+  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>
+    <BaseDateSelect v-model="value" v-bind="args" :size="size" class="w-full"></BaseDateSelect>
+  </div>
+  `,
+});
+
+export const Sizes = TemplateSizes.bind({});
+
 export const Field = createFieldStory({
   component: BaseDateSelect,
   componentName: 'BaseDateSelect',

package/src/components/BaseDateSelect.vue

@@ -1,114 +1,82 @@
 <template>
   <div>
-    <div class="-m-0.5 flex">
-      <div class="w-auto p-0.5">
-        <select
-          v-model="date.year"
-          :disabled="disabled"
-          :required="required"
-          data-cy="year"
-          class="w-full rounded"
-          :class="[
-            {
-              'cursor-not-allowed bg-slate-100 text-slate-500': disabled,
-            },
-            [hasErrorInternal ? 'border-red-500' : 'border-slate-300'],
-          ]"
-          :placeholder="t('sui.year')"
-          @change="update()"
+    <div
+      class="flex"
+      :class="[
+        sizeInternal === 'xs' ? 'gap-0.5' : '',
+        sizeInternal === 'sm' ? 'gap-0.5' : '',
+        sizeInternal === 'md' ? 'gap-1' : '',
+      ]"
+    >
+      <BaseSelect
+        v-model="date.year"
+        :disabled="disabled"
+        :required="requiredInternal"
+        data-cy="year"
+        :has-error="hasErrorInternal"
+        :placeholder="t('sui.year')"
+        :size="sizeInternal"
+        @update:model-value="update()"
+      >
+        <option
+          v-for="year in years"
+          :key="year"
+          :value="year"
         >
-          <option
-            disabled
-            selected
-            hidden
-            :value="null"
-          >
-            {{ t('sui.year') }}
-          </option>
-          <option
-            v-for="year in years"
-            :key="year"
-            :value="year"
-          >
-            {{ year }}
-          </option>
-        </select>
-      </div>
-
-      <div class="w-auto p-0.5">
-        <select
-          v-model="date.month"
-          :disabled="disabled"
-          :required="required"
-          data-cy="month"
-          class="w-full rounded capitalize"
-          :class="[
-            {
-              'cursor-not-allowed bg-slate-100 text-slate-500': disabled,
-            },
-            [hasErrorInternal ? 'border-red-500' : 'border-slate-300'],
-          ]"
-          :placeholder="t('sui.month')"
-          @change="update()"
+          {{ year }}
+        </option>
+      </BaseSelect>
+
+      <BaseSelect
+        v-model="date.month"
+        :disabled="disabled"
+        :required="requiredInternal"
+        data-cy="month"
+        class="capitalize"
+        :has-error="hasErrorInternal"
+        :placeholder="t('sui.month')"
+        :size="sizeInternal"
+        @update:model-value="update()"
+      >
+        <option
+          v-for="(month, i) in months"
+          :key="month"
+          :value="i + 1"
         >
-          <option
-            disabled
-            selected
-            hidden
-            :value="null"
-          >
-            {{ t('sui.month') }}
-          </option>
-          <option
-            v-for="(month, i) in months"
-            :key="month"
-            :value="i + 1"
-          >
-            {{ month }}
-          </option>
-        </select>
-      </div>
-
-      <div class="w-auto p-0.5">
-        <select
-          v-model="date.day"
-          :disabled="dayDisabled"
-          :required="required"
-          data-cy="day"
-          class="w-full rounded capitalize"
-          :class="[
-            {
-              'cursor-not-allowed bg-slate-100 text-slate-500': dayDisabled,
-            },
-            [hasErrorInternal ? 'border-red-500' : 'border-slate-300'],
-          ]"
-          :placeholder="t('sui.day')"
-          @change="update()"
+          {{ month }}
+        </option>
+      </BaseSelect>
+
+      <BaseSelect
+        v-model="date.day"
+        :disabled="dayDisabled"
+        :required="requiredInternal"
+        data-cy="day"
+        :has-error="hasErrorInternal"
+        :placeholder="t('sui.day')"
+        :size="sizeInternal"
+        @update:model-value="update()"
+      >
+        <option
+          v-for="day in days"
+          :key="day"
+          :value="day"
         >
-          <option
-            disabled
-            selected
-            hidden
-            :value="null"
-          >
-            {{ t('sui.day') }}
-          </option>
-          <option
-            v-for="day in days"
-            :key="day"
-            :value="day"
-          >
-            {{ day }}
-          </option>
-        </select>
-      </div>
+          {{ day }}
+        </option>
+      </BaseSelect>
     </div>
 
     <button
       v-if="clearable"
       type="button"
       :disabled="disabled"
-      class="mt-1 appearance-none border-transparent bg-transparent text-sm text-slate-700 underline outline-none disabled:cursor-not-allowed disabled:opacity-50"
+      class="mt-1 appearance-none border-transparent bg-transparent text-slate-700 underline outline-none disabled:cursor-not-allowed disabled:opacity-50"
+      :class="[
+        sizeInternal === 'xs' ? 'text-xs' : '',
+        sizeInternal === 'sm' ? 'text-xs' : '',
+        sizeInternal === 'md' ? 'text-sm' : '',
+      ]"
       @click="clear()"
     >
       <span>{{ t('sui.clear') }}</span>
@@ -123,6 +91,8 @@ import { DateTime, Info } from 'luxon';
 import { useField } from '@/composables/field';
 import { t } from '@/i18n';
 import { useI18nStore } from '@/stores/i18n';
+import BaseSelect from './BaseSelect.vue';
+import { Size } from '@/utils/sizes';
 
 const props = defineProps({
   modelValue: {
@@ -133,6 +103,10 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  size: {
+    default: undefined,
+    type: String as PropType<Size>,
+  },
   disabled: {
     default: false,
     type: Boolean,
@@ -161,15 +135,18 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue']);
 
-const { hasErrorInternal, emitUpdate } = useField({
+const { hasErrorInternal, emitUpdate, requiredInternal, sizeInternal } = useField({
   name: computed(() => props.name),
   required: computed(() => props.required),
+  size: computed(() => props.size),
   hasError: computed(() => props.hasError),
   emit: emit,
 });
 
 const years = range(props.maxYear, props.minYear) as number[];
+
 const months = Info.months('short', { locale: useI18nStore().locale });
+
 const days = computed(() => {
   if (!date.value.year) {
     return [];
@@ -197,6 +174,8 @@ watch(
       date.value.year = datetime.year;
       date.value.month = datetime.month;
       date.value.day = datetime.day;
+    } else {
+      clear();
     }
   },
   { immediate: true }

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

@@ -19,6 +19,35 @@ export default {
   },
 };
 
+const template = `<template #button="{ newValue }">
+      <div class="btn btn-sm">
+      <div v-if="newValue" class="flex items-center gap-2 text-sm">
+        <div class="h-2 w-2 bg-red-500 rounded-full"></div>
+        <span>
+          {{ newValue.label }}
+        </span>
+      </div>
+      <div v-else class="">
+        Select a character
+      </div>
+      </div>
+    </template>
+    <template #option="{ option }">
+      <div class="flex items-center gap-2 text-sm px-2">
+        <div 
+          class="h-2 w-2 rounded-full" 
+          :class="{
+            'bg-red-500': option?.type === 'sith',
+            'bg-green-500': option?.type === 'jedi',
+            'bg-slate-300': option?.type === undefined,
+          }"
+        ></div>
+        <span>
+          {{ option.label }}
+        </span>
+      </div>
+    </template>`
+
 export const Autocomplete = (args) => ({
   components: { BaseDropdownAutocomplete, BaseBadge, ShowValue },
   setup() {
@@ -30,21 +59,7 @@ export const Autocomplete = (args) => ({
     v-bind="args"
     v-model="value"
   >
-    <template #button="{ newValue }">
-      <BaseBadge v-if="newValue">
-        {{ newValue.label }}
-      </BaseBadge>
-      <div v-else>
-        <BaseBadge contrast="low">
-          Nothing
-        </BaseBadge>
-      </div>
-    </template>
-    <template #option="{ option }">
-      <BaseBadge :contrast="option?.value ? 'high' : 'low'">
-        {{ option.label }}
-      </BaseBadge>
-    </template>
+    ${template}
   </BaseDropdownAutocomplete>
   <ShowValue :value="value" />
   `,

package/src/components/BaseHasMany.stories.js

@@ -4,10 +4,17 @@ import { createFieldStory, options } from '../../.storybook/utils';
 import BaseAppNotifications from './BaseAppNotifications.vue';
 import QueryString from 'qs';
 
+const sizes = ['xs', 'sm', 'md'];
+
 export default {
   title: 'Form/BaseHasMany',
   component: BaseHasMany,
-  argTypes: {},
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: sizes,
+    },
+  },
   args: {
     url: 'https://effettandem.com/api/content/articles',
     field: 'title',
@@ -72,6 +79,20 @@ ShowRouteUrl.args = {
   },
 };
 
+export const Sizes = (args) => ({
+  components: { BaseHasMany },
+  setup() {
+    const value = ref([]);
+    return { args, sizes, value };
+  },
+  template: `
+  <div v-for="size in sizes" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight">{{ size }}</p>
+    <BaseHasMany v-model="value" v-bind="args" :size="size"></BaseHasMany>
+  </div>
+  `,
+});
+
 export const SlotOption = (args) => {
   return {
     components: { BaseHasMany },

package/src/components/BaseInput.stories.js

@@ -54,13 +54,13 @@ export const Demo = Template.bind({});
 
 export const IconLeft = Template.bind({});
 IconLeft.args = {
-  iconLeft: 'heroicons:phone-20-solid',
+  iconLeft: 'heroicons:calendar',
   placeholder: 'Enter your phone',
 };
 
 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 {
@@ -260,6 +284,7 @@ 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) {
@@ -287,9 +312,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' : 'pl-2', hasRightDecoration.value ? 'pr-0' : 'pr-2'],
+    sm: [hasLeftDecoration.value ? 'pl-0' : 'pl-2.5', hasRightDecoration.value ? 'pr-0' : 'pr-2.5'],
+    md: [hasLeftDecoration.value ? 'pl-0' : 'pl-3', hasRightDecoration.value ? 'pr-1' : 'pr-3'],
   }[sizeInternal.value];
 
   return [
@@ -301,11 +326,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 +340,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 +367,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/BaseMediaPicturesItem.vue

@@ -22,7 +22,7 @@
         v-if="url"
         :href="url"
         target="_blank"
-        class="btn btn-white rounded-full p-1 shadow-sm ring-1 ring-black ring-opacity-10"
+        class="btn btn-white btn-sm rounded-full aspect-1 p-0 shadow-sm ring-1 ring-black ring-opacity-[0.15]"
       >
         <BaseIcon
           class="h-4 w-4"
@@ -33,7 +33,7 @@
         v-if="showRemove"
         type="button"
         :disabled="disabled"
-        class="btn btn-white rounded-full p-1 shadow-sm ring-1 ring-black ring-opacity-10 disabled:bg-white disabled:opacity-70"
+        class="btn btn-white btn-sm rounded-full aspect-1 p-0 shadow-sm ring-1 ring-black ring-opacity-[0.15] disabled:bg-white disabled:opacity-70"
         @click="$emit('remove')"
       >
         <BaseIcon

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