sprintify-ui 0.6.34 → 0.6.36

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/BaseTextareaAutoresize.vue

@@ -55,7 +55,7 @@ const props = defineProps({
     type: String,
   },
   name: {
-    required: true,
+    default: undefined,
     type: String,
   },
   required: {
@@ -145,17 +145,17 @@ 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 base = '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',
+  const sizeClasses = {
+    xs: 'px-2 py-[0.26rem] min-h-control-xs',
+    sm: 'px-2.5 py-[0.31rem] min-h-control-sm',
+    md: 'px-3 py-[0.43rem] min-h-control-md',
   }[sizeInternal.value];
 
   return twMerge(
@@ -165,7 +165,7 @@ const textareaClasses = computed(() => {
     placeholder,
     focus,
     sizeConfig.fontSize,
-    padding,
+    sizeClasses,
     props.twTextarea
   );
 });

package/src/components/BaseTimeline.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts" setup>
-import { TimelineItem } from '../types/TimelineItem';
+import { TimelineItem } from '../types';
 import { PropType } from 'vue';
 import BaseTimelineItem from './BaseTimelineItem.vue';
 

package/src/components/BaseTimelineItem.vue

@@ -60,7 +60,7 @@
 </template>
 
 <script lang="ts" setup>
-import { TimelineItem } from '../types/TimelineItem';
+import { TimelineItem } from '../types';
 import { PropType } from 'vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 import { getColorConfig } from '@/utils/colors';

package/src/composables/inputSize.ts

@@ -1,5 +1,5 @@
 import { useBreakpoints } from "./breakpoints";
-import { Size } from "@/utils/sizes";
+import { Size, sizes } from "@/utils/sizes";
 import { MaybeRef } from "vue";
 
 function useInputSize(size: MaybeRef<Size | '' | undefined | null>) {
@@ -18,6 +18,10 @@ function useInputSize(size: MaybeRef<Size | '' | undefined | null>) {
             s = 'md';
         }
 
+        if (!Object.keys(sizes).includes(s)) {
+            s = 'md';
+        }
+
         return s;
     });
 

package/src/stories/InputSizes.stories.js

@@ -0,0 +1,22 @@
+import InputSizes from './PageInputSizes.vue';
+
+export default {
+    title: 'Pages/InputSize',
+    component: InputSizes,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+
+
+const Template = (args) => ({
+    components: {
+        InputSizes
+    },
+    template: `<InputSizes></InputSizes>`,
+    setup() {
+        return { args };
+    },
+});
+
+export const Demo = Template.bind({});

package/src/stories/PageInputSizes.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="p-5 flex flex-col gap-4 overflow-x-scroll overflow-y-visible pb-[400px]">
+    <div
+      v-for="size in sizes"
+      :key="size"
+    >
+      <div class="flex gap-1">
+        <BaseField :size="size">
+          <BaseInput
+            v-model="text"
+            placeholder="Name"
+            icon-left="heroicons:calendar"
+          />
+        </BaseField>
+        <BaseField :size="size">
+          <BaseSelect
+            v-model="valueId"
+            placeholder="Name"
+            label-key="label"
+            value-key="value"
+            :options="options"
+          />
+        </BaseField>
+        <BaseField
+          :size="size"
+          class="min-w-[200px]"
+        >
+          <BaseDatePicker v-model="date" />
+        </BaseField>
+        <BaseField
+          :size="size"
+        >
+          <BaseDateSelect v-model="date" />
+        </BaseField>
+        <BaseField :size="size">
+          <BaseAutocomplete
+            v-model="valueObject"
+            label-key="label"
+            value-key="value"
+            :options="options"
+          />
+        </BaseField>
+        <BaseField
+          v-if="false"
+          :size="size"
+        >
+          <BaseAutocompleteFetch
+            v-model="valueObjectFetch"
+            label-key="name"
+            value-key="id"
+            url="https://jsonplaceholder.typicode.com/users"
+          />
+        </BaseField>
+        <BaseField
+          v-if="false"
+          :size="size"
+        >
+          <BaseBelongsTo
+            v-model="valueId"
+            field="label"
+            primary-key="value"
+            :options="options"
+          />
+        </BaseField>
+        <BaseField
+          v-if="false"
+          :size="size"
+        >
+          <BaseBelongsToFetch
+            v-model="valueIdFetch"
+            field="name"
+            primary-key="id"
+            url="https://jsonplaceholder.typicode.com/users"
+          />
+        </BaseField>
+        <BaseField :size="size">
+          <BaseTagAutocomplete
+            v-model="valueArrayOfObjects"
+            label-key="label"
+            value-key="value"
+            :options="options"
+          />
+        </BaseField>
+        <BaseField
+          v-if="false"
+          :size="size"
+        >
+          <BaseTagAutocompleteFetch
+            v-model="valueArrayOfObjectFetch"
+            label-key="name"
+            value-key="id"
+            url="https://jsonplaceholder.typicode.com/users"
+          />
+        </BaseField>
+        <BaseField :size="size">
+          <BasePassword
+            v-model="text"
+            placeholder="Password"
+          />
+        </BaseField>
+        <BaseField :size="size">
+          <BaseInputPercent
+            v-model="number"
+            placeholder="Enter a value"
+          />
+        </BaseField>
+        <BaseField
+          :size="size"
+          class="min-w-[200px]"
+        >
+          <BaseTextareaAutoresize
+            v-model="text"
+            placeholder="Tell me a story"
+          />
+        </BaseField>
+        <BaseField :size="size">
+          <BaseButtonGroup
+            v-model="valueArrayOfObjects"
+            label-key="label"
+            value-key="value"
+            spacing="none"
+            :options="options.slice(0, 3)"
+          />
+        </BaseField>
+        <BaseField :size="size">
+          <BaseColor
+            v-model="colors"
+            class="flex-nowrap"
+          />
+        </BaseField>
+      </div>
+    </div>
+
+    <div
+      v-for="size in sizes"
+      :key="size"
+      class="flex flex-col gap-3"
+    >
+      <BaseInput
+        v-model="text"
+        :size="size"
+        placeholder="Name"
+        icon-left="heroicons:calendar"
+      />
+      <BaseDatePicker
+        v-model="date"
+        :size="size"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Size } from '@/utils/sizes';
+import BaseField from '@/components/BaseField.vue';
+import BaseSelect from '@/components/BaseSelect.vue';
+import BaseAutocomplete from '@/components/BaseAutocomplete.vue';
+import BaseInput from '@/components/BaseInput.vue';
+import BaseAutocompleteFetch from '@/components/BaseAutocompleteFetch.vue';
+import BaseBelongsTo from '@/components/BaseBelongsTo.vue';
+import BaseBelongsToFetch from '@/components/BaseBelongsToFetch.vue';
+import BaseTagAutocomplete from '@/components/BaseTagAutocomplete.vue';
+import BaseTagAutocompleteFetch from '@/components/BaseTagAutocompleteFetch.vue';
+import BaseButtonGroup from '@/components/BaseButtonGroup.vue';
+import BaseColor from '@/components/BaseColor.vue';
+import BasePassword from '@/components/BasePassword.vue';
+import BaseInputPercent from '@/components/BaseInputPercent.vue';
+import BaseTextareaAutoresize from '@/components/BaseTextareaAutoresize.vue';
+import BaseDatePicker from '@/components/BaseDatePicker.vue';
+import BaseDateSelect from '@/components/BaseDateSelect.vue';
+
+const sizes = ref<Size[]>(['xs', 'sm', 'md']);
+
+const text = ref('');
+const number = ref('');
+
+const valueObject = ref(null);
+const valueObjectFetch = ref(null);
+
+const valueId = ref(null);
+const valueIdFetch = ref(null);
+
+const valueArrayOfObjects = ref([]);
+const valueArrayOfObjectFetch = ref([]);
+
+const colors = ref([]);
+
+const date = ref(null);
+
+const options = [
+    { label: 'Dark Vader', value: 'dark_vader', type: 'sith' },
+    { label: 'Darth Maul', value: 'darth_maul', type: 'sith' },
+    { label: 'Dark Sidious', value: 'dark_sidious', type: 'sith' },
+    { label: 'Obi Wan Kenobi', value: 'obiwan', type: 'jedi' },
+    { label: 'Anakin Skywalker', value: 'anakin', type: 'jedi' },
+    { label: 'Mace Windu', value: 'windu', type: 'jedi' },
+    { label: 'Padme Amidala', value: 'padme', type: 'jedi' },
+    { label: 'Princesse Leila', value: 'leila', type: 'jedi' },
+    { label: 'Qui Gon Gin', value: 'quigon', type: 'jedi' },
+    { label: 'Chewbaca', value: 'chewbaca', type: 'jedi' },
+    { label: 'C3P0', value: 'c3p0', type: 'jedi' },
+    { label: 'R2D2', value: 'r2d2', type: 'jedi' },
+];
+
+</script>

package/src/types/TimelineItem.ts

@@ -1,9 +0,0 @@
-export interface TimelineItem {
-  title: string;
-  icon: string;
-  description?: null | string;
-  date?: string | null;
-  color?: string | null;
-  onEdit?: () => void | Promise<void>;
-  onDelete?: () => void | Promise<void>;
-}

package/src/types/index.ts

@@ -255,4 +255,14 @@ export interface BaseCropperConfig {
   preset?: CropperPreset;
   presetOptions?: Record<string, any>;
   saveOptions?: ResultOptions;
-}
+}
+
+export interface TimelineItem {
+  title: string;
+  icon: string;
+  description?: null | string;
+  date?: string | null;
+  color?: string | null;
+  onEdit?: () => void | Promise<void>;
+  onDelete?: () => void | Promise<void>;
+}