sprintify-ui 0.6.34 → 0.6.35

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/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,7 +54,7 @@ export const Demo = Template.bind({});
 
 export const IconLeft = Template.bind({});
 IconLeft.args = {
-  iconLeft: 'heroicons:phone-20-solid',
+  iconLeft: 'heroicons:calendar',
   placeholder: 'Enter your phone',
 };
 

package/src/components/BaseInput.vue

@@ -284,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) {
@@ -311,9 +312,9 @@ const baseClasses = computed(() => {
   const disabled = props.disabled ? 'cursor-not-allowed text-slate-300' : '';
 
   const paddingX = {
-    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'],
+    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 [

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

@@ -2,6 +2,8 @@ import BaseRichText from './BaseRichText.vue';
 import ShowValue from '@/../.storybook/components/ShowValue.vue';
 import { createFieldStory } from '@/../.storybook/utils';
 
+const sizes = ['xs', 'sm', 'md'];
+
 const toolbarOptions = [
   'full',
   'essential',
@@ -28,6 +30,10 @@ export default {
     placeholder: 'Describe your complete life in 4 sentences...',
   },
   argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: sizes,
+    },
     theme: {
       control: { type: 'select' },
       options: ['snow', 'bubble', ''],

package/src/components/BaseRichText.vue

@@ -1,7 +1,11 @@
 <template>
   <div
     class="base-rich-text relative"
-    :class="[hasErrorInternal ? 'error' : '']"
+    :class="[
+      hasErrorInternal ? 'error' : '',
+      sizeInternal == 'sm' ? 'base-rich-text-sm' : '',
+      sizeInternal == 'xs' ? 'base-rich-text-xs' : '',
+    ]"
   >
     <quill-editor
       :name="nameInternal"
@@ -25,6 +29,7 @@ import { useField } from '@/composables/field';
 
 import { QuillEditor } from '@vueup/vue-quill';
 import Delta from 'quill-delta';
+import { Size } from '@/utils/sizes';
 
 
 const props = defineProps({
@@ -38,6 +43,10 @@ const props = defineProps({
     type: String as PropType<'' | 'snow' | 'bubble'>,
     default: 'snow',
   },
+  size: {
+    default: undefined,
+    type: String as PropType<Size>,
+  },
   toolbar: {
     type: [String, Array, Object] as PropType<
       string | unknown[] | Record<string, any> | undefined
@@ -74,10 +83,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,
   });

package/src/components/BaseSelect.vue

@@ -209,6 +209,10 @@ const classes = computed(() => {
     }
   }
 
+  // For placeholder
+
+  const fontWeight = props.modelValue ? 'font-normal' : 'font-light';
+
   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' : '';
@@ -222,6 +226,7 @@ const classes = computed(() => {
   return twMerge([
     base,
     focusClass,
+    fontWeight,
     disabled,
     error,
     textColor,

package/src/components/BaseTable.vue

@@ -286,6 +286,7 @@ import SlotComponent from './SlotComponent';
 import { useResizeObserver, useScroll } from '@vueuse/core';
 import { debounce, isArray } from 'lodash';
 import BaseSpinnerLarge from '../svg/BaseSpinnerLarge.vue';
+import { Size } from '@/utils/sizes';
 
 const checkboxStyle =
   'disabled:bg-slate-100 group-hover:shadow-md  disabled:border-slate-300 disabled:cursor-not-allowed duration-300 cursor-pointer focus:ring-blue-300 border border-slate-300 shadow h-[18px] w-[18px] rounded';
@@ -371,7 +372,7 @@ const props = defineProps({
     type: Number,
   },
   size: {
-    type: String as PropType<'sm' | 'md'>,
+    type: String as PropType<Size>,
     default: 'md',
   },
 });

package/src/components/BaseTagAutocomplete.stories.js

@@ -3,7 +3,7 @@ import BaseTagAutocomplete from './BaseTagAutocomplete.vue';
 import ShowValue from '@/../.storybook/components/ShowValue.vue';
 import BaseAppNotifications from './BaseAppNotifications.vue';
 
-const sizes = ['xs', 'sm', 'base'];
+const sizes = ['xs', 'sm', 'md'];
 
 export default {
   title: 'Form/BaseTagAutocomplete',