sprintify-ui 0.6.33 → 0.6.35

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/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',

package/src/components/BaseTagAutocomplete.vue

@@ -1,63 +1,44 @@
 <template>
   <div ref="autocomplete">
-    <div
-      class="relative z-[1] rounded border bg-white p-1"
-      :class="[
-        hasErrorInternal ? 'border-red-600' : 'border-slate-300',
-        wrapperClass,
-      ]"
-    >
-      <div :class="twMerge('-m-0.5 flex flex-wrap', twContainer)">
-        <slot
-          name="items"
-          :items="normalizedModelValue"
-          :remove-option="removeOption"
-          :disabled="disabled"
+    <div :class="wrapperClass">
+      <slot
+        name="items"
+        :items="normalizedModelValue"
+        :remove-option="removeOption"
+        :disabled="disabled"
+      >
+        <div
+          v-for="selection in normalizedModelValue"
+          :key="selection.value ? selection.value : 'null'"
+          :class="selectionClass(selection)"
         >
-          <div
-            v-for="selection in normalizedModelValue"
-            :key="selection.value ? selection.value : 'null'"
-            class="p-0.5"
-          >
-            <div
-              class="flex items-stretch rounded border"
-              :class="[
-                disabled ? 'cursor-not-allowed opacity-60' : '',
-                selectionClass(selection),
-              ]"
-            >
-              <div :class="[selectionLabelClass]">
-                {{ selection.label }}
-              </div>
-
-              <button
-                v-if="!disabled"
-                type="button"
-                class="flex shrink-0 appearance-none items-center justify-center border-0 bg-transparent pl-1 pr-3 text-xs outline-none"
-                @click="removeOption(selection)"
-              >
-                ✕
-              </button>
-            </div>
+          <div>
+            {{ selection.label }}
           </div>
-        </slot>
-
-        <div class="grow p-0.5">
-          <input
-            ref="inputElement"
-            :value="keywords"
-            type="text"
-            :placeholder="placeholder ? placeholder : t('sui.select_an_item')"
-            class="w-full min-w-[50px] border-none p-0 pl-1 shadow-none outline-none focus:border-none focus:shadow-none focus:outline-none focus:ring-0 disabled:cursor-not-allowed"
-            :class="[inputClass]"
-            autocomplete="off"
-            :disabled="disabled"
-            @click="open"
-            @input="onTextInput"
-            @keydown="onTextKeydown"
+
+          <button
+            type="button"
+            tabindex="-1"
+            :class="selectionDeleteClasses"
+            @click="removeOption(selection)"
           >
+            ✕
+          </button>
         </div>
-      </div>
+      </slot>
+
+      <input
+        ref="inputElement"
+        :value="keywords"
+        type="text"
+        :placeholder="placeholder ? placeholder : t('sui.select_an_item')"
+        :class="inputClasses"
+        autocomplete="off"
+        :disabled="disabled"
+        @focus="open"
+        @input="onTextInput"
+        @keydown="onTextKeydown"
+      >
     </div>
 
     <div class="relative">
@@ -116,7 +97,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';
+import { Size, sizes } from '@/utils/sizes';
 
 const notifications = useNotificationsStore();
 
@@ -141,6 +122,7 @@ const props = defineProps({
     default: undefined,
     type: String,
   },
+
   placeholder: {
     default: undefined,
     type: String,
@@ -178,7 +160,7 @@ const props = defineProps({
     type: Boolean,
   },
   size: {
-    default: 'md',
+    default: undefined,
     type: String as PropType<Size>,
   },
   dropdownShow: {
@@ -193,6 +175,10 @@ const props = defineProps({
     default: '',
     type: [String, Array] as PropType<string | string[]>,
   },
+  visibleFocus: {
+    default: true,
+    type: Boolean,
+  },
 });
 
 const emit = defineEmits([
@@ -203,9 +189,10 @@ const emit = defineEmits([
   'scrollBottom',
 ]);
 
-const { hasErrorInternal, emitUpdate } = useField({
+const { hasErrorInternal, emitUpdate, sizeInternal } = useField({
   name: computed(() => props.name),
   required: computed(() => props.required),
+  size: computed(() => props.size),
   hasError: computed(() => props.hasError),
   emit: emit,
 });
@@ -218,6 +205,31 @@ const hasOptions = useHasOptions(
   computed(() => true)
 );
 
+onMounted(() => {
+  window.addEventListener('keydown', onWindowKeydown);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onWindowKeydown);
+});
+
+function onWindowKeydown(event: KeyboardEvent) {
+
+  if (!opened.value) {
+    return;
+  }
+
+  const key = event.key;
+
+  if (key === 'Tab') {
+    close();
+  }
+
+  if (key === 'Escape') {
+    close();
+  }
+}
+
 let openOfFocusTimeout = 0;
 
 onMounted(() => {
@@ -283,6 +295,7 @@ function open() {
 function close() {
   shouldFilter.value = false;
   opened.value = false;
+  selectionToDelete.value = null;
   blur();
   emit('close');
 }
@@ -392,6 +405,11 @@ const attemptRemoveLastSelection = () => {
 };
 
 const removeOption = (option: NormalizedOption) => {
+
+  if (props.disabled) {
+    return;
+  }
+
   focus();
   let newModelValue = cloneDeep(normalizedModelValue.value);
   newModelValue = newModelValue.filter((v) => v.value != option.value);
@@ -401,49 +419,86 @@ const removeOption = (option: NormalizedOption) => {
 // Element Classes
 
 const wrapperClass = computed(() => {
-  if (props.size == 'xs') {
-    return 'min-h-[34px]';
-  }
-  if (props.size == 'sm') {
-    return 'min-h-[38px]';
-  }
-  return 'min-h-[42px]';
+  const base = 'relative z-[1] input-rounded border bg-white flex flex-wrap';
+  const error = hasErrorInternal.value ? 'border-red-600' : 'border-slate-300'
+  const height = {
+    'xs': 'min-h-control-xs gap-0.5 p-0.5',
+    'sm': 'min-h-control-sm gap-0.5 p-0.5',
+    'md': 'min-h-control-md gap-1 p-1',
+  }[sizeInternal.value];
+
+  const focus = opened.value ? 'input-focus border-blue-300' : '';
+
+  return twMerge(base, error, height, focus, props.twContainer);
 });
 
-const inputClass = computed(() => {
-  const base = 'h-[32px] text-base';
-  if (props.size == 'xs') {
-    return base + ' xs:text-xs xs:h-[22px]';
-  }
-  if (props.size == 'sm') {
-    return base + ' xs:text-sm xs:h-[28px]';
-  }
-  return base;
+const innerHeight = computed(() => {
+  const height = {
+    'xs': 'h-[calc(theme(spacing.control-xs)_-_theme(spacing[0.5])_-_theme(spacing[0.5])_-_2px)]',
+    'sm': 'h-[calc(theme(spacing.control-sm)_-_theme(spacing[0.5])_-_theme(spacing[0.5])_-_2px)]',
+    'md': 'h-[calc(theme(spacing.control-md)_-_theme(spacing.1)_-_theme(spacing.1)_-_2px)]',
+  }[sizeInternal.value];
+
+  return height;
+});
+
+const inputClasses = computed(() => {
+  const base = 'grow min-w-[50px] py-0 border-none shadow-none outline-none bg-transparent';
+  const focus = 'focus:border-none focus:shadow-none focus:outline-none focus:ring-0';
+  const disabled = 'disabled:cursor-not-allowed';
+  const sizeConfig = sizes[sizeInternal.value];
+
+  const padding = {
+    'xs': 'pl-1.5',
+    'sm': 'pl-2',
+    'md': 'pl-2.5',
+  }[sizeInternal.value];
+
+  return [base, padding, innerHeight.value, focus, disabled, sizeConfig.fontSize];
 });
 
 const selectionClass = (selection: NormalizedOption): string => {
+
+  const base = 'flex items-center rounded border';
+
+  const fontSize = {
+    'xs': 'text-xs',
+    'sm': 'text-xs',
+    'md': 'text-sm',
+  }[sizeInternal.value];
+
+  const padding = {
+    'xs': 'pl-2',
+    'sm': 'pl-2',
+    'md': 'pl-3',
+  }[sizeInternal.value];
+
+  let color = 'bg-slate-200 border-slate-300';
+
   if (
     selectionToDelete.value &&
     selectionToDelete.value.value == selection.value
   ) {
-    return 'bg-red-200 border-red-300 text-red-800';
+    color = 'bg-red-200 border-red-300 text-red-800';
   }
-  return 'bg-slate-200 border-slate-300';
+
+  const disabled = props.disabled ? 'cursor-not-allowed opacity-60' : '';
+
+  return twMerge(base, innerHeight.value, padding, color, disabled, fontSize);
 };
 
-const selectionLabelClass = computed((): string => {
-  let base = 'py-[5px] pl-[0.75em] text-sm';
-  props.disabled ? (base += ' pr-[0.75em]') : (base += ' pr-1');
-  if (props.size == 'xs') {
-    const classes = base + ' xs:py-[3px] xs:pl-2 xs:text-xs';
-    return classes;
-  }
-  if (props.size == 'sm') {
-    const classes = base + ' xs:py-[3px] xs:pl-2 xs:text-sm';
-    return classes;
-  }
-  const classes = base;
-  return classes;
+const selectionDeleteClasses = computed(() => {
+  const base = 'flex shrink-0 appearance-none items-center justify-center border-0 bg-transparent outline-none';
+
+  const padding = {
+    'xs': 'pl-1 pr-2',
+    'sm': 'pl-1 pr-2',
+    'md': 'pl-1 pr-3',
+  }[sizeInternal.value];
+
+  const disabled = props.disabled ? 'cursor-not-allowed opacity-60' : '';
+
+  return twMerge(base, padding, disabled);
 });
 
 defineExpose({

package/src/components/BaseTagAutocompleteFetch.stories.js

@@ -3,10 +3,17 @@ import ShowValue from '@/../.storybook/components/ShowValue.vue';
 import { createFieldStory } from '../../.storybook/utils';
 import BaseAppNotifications from './BaseAppNotifications.vue';
 
+const sizes = ['xs', 'sm', 'md'];
+
 export default {
   title: 'Form/BaseTagAutocompleteFetch',
   component: BaseTagAutocompleteFetch,
-  argTypes: {},
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: sizes,
+    },
+  },
   args: {
     url: 'https://effettandem.com/api/content/articles',
     labelKey: 'title',
@@ -56,6 +63,20 @@ Maximum.args = {
   max: 3,
 };
 
+export const Sizes = (args) => ({
+  components: { BaseTagAutocompleteFetch },
+  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>
+    <BaseTagAutocompleteFetch v-model="value" v-bind="args" :size="size"></BaseTagAutocompleteFetch>
+  </div>
+  `,
+});
+
 export const SlotOption = (args) => {
   return {
     components: { BaseTagAutocompleteFetch },

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