sprintify-ui 0.6.32 → 0.6.34

package/src/components/BaseAutocomplete.vue

@@ -1,17 +1,19 @@
 <template>
   <div ref="autocomplete">
     <div class="relative z-[1]">
-      <div class="flex">
-        <select
+      <div
+        class="flex"
+        :class="[select ? '-space-x-px' : '']"
+      >
+        <BaseSelect
           v-if="select"
           v-model="selection"
           :disabled="disabled"
-          class="rounded-l border-r-transparent focus:z-[1] focus:border-r-blue-500 disabled:cursor-not-allowed disabled:text-slate-300 disabled:opacity-100"
-          :class="[
-            hasErrorInternal ? 'border-red-600' : 'border-slate-300',
-            inputSelectClass,
-          ]"
-          @change="onSelectChange"
+          class="rounded-r-none border-r-transparent min-w-0"
+          :size="sizeInternal"
+          :has-error="hasErrorInternal"
+          required
+          @update:model-value="onSelectChange"
         >
           <option
             v-for="option in select.options"
@@ -20,60 +22,38 @@
           >
             {{ option.label }}
           </option>
-        </select>
-        <div class="relative grow">
-          <input
-            ref="inputElement"
-            :value="keywords"
-            type="text"
-            :placeholder="placeholder ? placeholder : t('sui.autocomplete_placeholder')"
-            class="relative w-full placeholder:text-slate-400 disabled:cursor-not-allowed disabled:text-slate-300"
-            :class="[
-              showDeleteButton ? 'pr-9' : '',
-              select ? '-left-px rounded-r' : 'rounded',
-              hasErrorInternal ? 'border-red-600' : 'border-slate-300',
-              inputSizeClass,
-              !visibleFocus
-                ? [
-                  'focus:ring-0',
-                  hasErrorInternal
-                    ? 'focus:border-red-600'
-                    : 'focus:border-slate-300',
-                ]
-                : '',
-            ]"
-            autocomplete="off"
-            :disabled="disabled"
-            @click="open"
-            @input="onTextInput"
-            @keydown="onTextKeydown"
-          >
-          <div
-            class="pointer-events-none absolute left-0 top-0 flex h-full items-center justify-center"
-            :class="[iconWrapClass]"
-          >
-            <BaseIcon
-              class="text-slate-400"
-              :class="[iconClass]"
-              icon="heroicons:magnifying-glass-solid"
-            />
-          </div>
-        </div>
+        </BaseSelect>
+        <BaseInput
+          ref="inputElement"
+          :model-value="keywords"
+          type="text"
+          :visible-focus="visibleFocus"
+          :placeholder="placeholder ? placeholder : t('sui.autocomplete_placeholder')"
+          class="w-full grow min-w-0"
+          :class="inputClasses"
+          :has-error="hasErrorInternal"
+          :size="sizeInternal"
+          :autocomplete="false"
+          :disabled="disabled"
+          icon-left="heroicons:magnifying-glass-solid"
+          @focus="open"
+          @update:model-value="onTextInput"
+          @keydown="onTextKeydown"
+        />
       </div>
 
       <div
         v-if="showDeleteButton"
-        class="absolute right-0 top-0 flex h-full items-center p-1"
+        class="absolute right-0 top-0 flex h-full p-1"
       >
         <button
           type="button"
-          class="group flex h-full items-center rounded p-1.5 enabled:hover:bg-slate-100"
+          class="group flex rounded items-center justify-center aspect-1 enabled:hover:bg-slate-200"
           @click="clear()"
         >
           <BaseIcon
             icon="heroicons:x-mark"
-            class="text-slate-500 group-hover:text-slate-700"
-            :class="[iconClass]"
+            :class="deleteButtonIconClasses"
           />
         </button>
       </div>
@@ -86,7 +66,7 @@
         :class="[
           inline
             ? 'relative'
-            : 'absolute top-1 z-menu min-h-[110px] w-full overflow-hidden rounded border border-slate-300 bg-white shadow-md',
+            : 'absolute top-0.5 z-menu min-h-[110px] w-full overflow-hidden input-rounded border border-slate-300 bg-white shadow-2xl',
         ]"
       >
         <BaseAutocompleteDrawer
@@ -136,6 +116,8 @@ import { useClickOutside } from '@/composables/clickOutside';
 import BaseAutocompleteDrawer from './BaseAutocompleteDrawer.vue';
 import { SelectConfiguration } from '@/types';
 import { t } from '@/i18n';
+import { Size, sizes } from '@/utils/sizes';
+import { BaseInput, BaseSelect } from '.';
 
 const props = defineProps({
   modelValue: {
@@ -158,6 +140,10 @@ const props = defineProps({
     default: undefined,
     type: String,
   },
+  size: {
+    default: undefined,
+    type: String as PropType<Size>,
+  },
   placeholder: {
     default: undefined,
     type: String,
@@ -190,10 +176,6 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
-  size: {
-    default: 'base',
-    type: String as PropType<'xs' | 'sm' | 'base'>,
-  },
   dropdownShow: {
     default: 'focus',
     type: String as PropType<'focus' | 'always'>,
@@ -237,10 +219,11 @@ const emit = defineEmits([
   'select',
 ]);
 
-const { hasErrorInternal, emitUpdate } = useField({
+const { hasErrorInternal, emitUpdate, sizeInternal } = useField({
   name: computed(() => props.name),
   required: computed(() => props.required),
   hasError: computed(() => props.hasError),
+  size: computed(() => props.size),
   emit: emit,
 });
 
@@ -335,6 +318,31 @@ useClickOutside(autocomplete, () => {
   close();
 });
 
+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();
+  }
+}
+
 function open() {
   clearInterval(timerId);
   // Always focus as a safety
@@ -368,10 +376,10 @@ function close() {
   emit('close');
 }
 
-const onTextInput = (event: Event) => {
+const onTextInput = (text: string) => {
   open();
   shouldFilter.value = true;
-  setKeywords(get(event, 'target.value') + '');
+  setKeywords(text);
   emit('typing', keywords.value);
 
   // If keywords is empty, emit null
@@ -463,8 +471,7 @@ watch(
   { immediate: true }
 );
 
-function onSelectChange(event: Event) {
-  const value = get(event, 'target.value', null);
+function onSelectChange(value: string | number | null | undefined) {
   const option = props.select?.options.find((option) => option.value == value);
 
   if (props.select && props.select.onChange) {
@@ -491,45 +498,28 @@ const slotProps = {
 
 // Element Classes
 
-const inputSizeClass = computed(() => {
-  if (props.size == 'xs') {
-    return 'xs:text-xs xs:pl-7 text-base pl-9';
-  }
-  if (props.size == 'sm') {
-    return 'xs:text-sm xs:pl-8 text-base pl-9';
-  }
-  return 'text-base pl-9';
-});
+const deleteButtonIconClasses = computed(() => {
+  const base = 'text-slate-500 group-hover:text-slate-700';
 
-const inputSelectClass = computed(() => {
-  if (props.size == 'xs') {
-    return 'xs:text-xs text-base';
-  }
-  if (props.size == 'sm') {
-    return 'xs:text-sm text-base';
-  }
-  return 'text-base';
-});
+  const sizeConfig = sizes[sizeInternal.value];
 
-const iconClass = computed(() => {
-  if (props.size == 'xs') {
-    return 'xs:h-4 xs:w-4 h-5 w-5';
-  }
-  if (props.size == 'sm') {
-    return 'xs:h-5 xs:w-5 h-5 w-5';
-  }
-  return 'h-5 w-5';
+  return [
+    base,
+    sizeConfig.iconSize,
+  ];
 });
 
-const iconWrapClass = computed(() => {
-  if (props.size == 'xs') {
-    return 'xs:pl-2 pl-2.5';
-  }
-  if (props.size == 'sm') {
-    return 'xs:pl-2 pl-2.5';
-  }
-  return 'pl-2.5';
-});
+const inputClasses = computed(() => {
+  const base = 'w-full';
+  const paddingRight = showDeleteButton.value ? 'pr-5' : '';
+  const withSelect = props.select ? 'rounded-l-none' : '';
+
+  return [
+    base,
+    withSelect,
+    paddingRight
+  ];
+})
 
 const showDeleteButton = computed(() => {
   return normalizedModelValue.value && !props.disabled && props.showModelValue;

package/src/components/BaseAutocompleteDrawer.vue

@@ -121,6 +121,7 @@ import BaseSkeleton from './BaseSkeleton.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 import BaseSpinnerSmall from '../svg/BaseSpinnerSmall.vue';
 import { t } from '@/i18n';
+import { Size } from '@/utils/sizes';
 
 const props = defineProps({
   selected: {
@@ -148,8 +149,8 @@ const props = defineProps({
     default: false,
   },
   size: {
-    type: String as PropType<'xs' | 'sm' | 'base'>,
-    default: 'base',
+    type: String as PropType<Size>,
+    default: 'md',
   },
   twDrawer: {
     type: String,

package/src/components/BaseAutocompleteFetch.stories.js

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

package/src/components/BaseAutocompleteFetch.vue

@@ -74,6 +74,7 @@ import {
 import BaseAutocomplete from './BaseAutocomplete.vue';
 import { useHasPaginatedData } from '@/composables/paginatedData';
 import { t } from '@/i18n';
+import { Size } from '@/utils/sizes';
 
 /**
  * Behavior notes
@@ -130,8 +131,8 @@ const props = defineProps({
     type: Boolean,
   },
   size: {
-    default: 'base',
-    type: String as PropType<'xs' | 'sm' | 'base'>,
+    default: undefined,
+    type: String as PropType<Size>,
   },
   dropdownShow: {
     default: 'focus',

package/src/components/BaseBelongsTo.stories.js

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

package/src/components/BaseBelongsTo.vue

@@ -46,6 +46,7 @@
 import { PropType } from 'vue';
 import BaseAutocomplete from './BaseAutocomplete.vue';
 import { Option, SelectConfiguration } from '@/types';
+import { Size } from '@/utils/sizes';
 
 const props = defineProps({
   modelValue: {
@@ -91,8 +92,8 @@ const props = defineProps({
     type: Boolean,
   },
   size: {
-    default: 'base',
-    type: String as PropType<'xs' | 'sm' | 'base'>,
+    default: undefined,
+    type: String as PropType<Size>,
   },
   dropdownShow: {
     default: 'focus',

package/src/components/BaseBelongsToFetch.vue

@@ -48,6 +48,7 @@ import { AxiosResponse } from 'axios';
 import { config } from '@/index';
 import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
 import { Option, SelectConfiguration } from '@/types';
+import { Size } from '@/utils/sizes';
 
 const props = defineProps({
   modelValue: {
@@ -101,8 +102,8 @@ const props = defineProps({
     type: Boolean,
   },
   size: {
-    default: 'base',
-    type: String as PropType<'xs' | 'sm' | 'base'>,
+    default: undefined,
+    type: String as PropType<Size>,
   },
   dropdownShow: {
     default: 'focus',

package/src/components/BaseButton.stories.js

@@ -1,6 +1,10 @@
 import BaseButton from './BaseButton.vue';
 
 const colors = [
+  '#6fc3fc',
+  '#ff00ff',
+  '#111111',
+  '#f1f1f1',
   'primary',
   'secondary',
   'secondary-outline',
@@ -109,3 +113,20 @@ export const Sizes = (args) => ({
     </div>
   `,
 });
+
+const IconTemplate = (args) => ({
+  components: { BaseButton },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseButton v-bind="args">
+    </BaseButton>
+  `,
+});
+
+export const Icon = IconTemplate.bind({});
+Icon.args = {
+  icon: 'mdi:plus',
+  color: 'primary',
+};

package/src/components/BaseButton.vue

@@ -3,6 +3,7 @@
     :is="as"
     ref="button"
     :class="classes"
+    :style="styles"
     :to="to"
     :disabled="disabled"
     :type="type"
@@ -46,11 +47,14 @@
 import { ClassNameValue, twMerge } from 'tailwind-merge';
 import { RouteLocationRaw } from 'vue-router';
 import { BaseIcon } from '.';
+import { getColorConfig } from '@/utils/colors';
 
 defineOptions({
   inheritAttrs: false,
 });
 
+const slots = useSlots();
+
 const sizes = {
   'xs': 'btn-xs',
   'sm': 'btn-sm',
@@ -89,7 +93,7 @@ const props = withDefaults(defineProps<{
   type?: 'button' | 'submit' | 'reset';
   iconPosition?: 'start' | 'end';
   size?: keyof typeof sizes;
-  color?: keyof typeof colors;
+  color?: keyof typeof colors | string;
   to?: RouteLocationRaw;
 }>(), {
   as: 'button',
@@ -106,20 +110,50 @@ const props = withDefaults(defineProps<{
 
 defineEmits(['click']);
 
+const iconOnly = computed(() => {
+  return props.icon && !slots.default;
+});
+
 const classes = computed(() => {
   const classes = ['btn'];
 
   if (props.color) {
-    classes.push(colors[props.color]);
+
+    if (props.color in colors) {
+      classes.push(colors[props.color as keyof typeof colors]);
+    } else {
+      classes.push('hover:opacity-80');
+    }
+
   }
 
   if (props.size) {
     classes.push(sizes[props.size]);
   }
 
+  if (iconOnly.value) {
+    classes.push('p-0 aspect-1 justify-center');
+  }
+
   return twMerge(classes, props.class);
 });
 
+const styles = computed(() => {
+  if (props.color && !(props.color in colors)) {
+    const config = getColorConfig(props.color);
+
+    return {
+      backgroundColor: config.backgroundColor,
+      color: config.textColor,
+      borderColor: config.borderColor,
+      borderWidth: '1px',
+      borderStyle: 'solid',
+    };
+  }
+
+  return {};
+});
+
 const containerClass = computed(() => {
   const classes = ['flex items-center justify-center'];
 
@@ -147,10 +181,12 @@ const containerClass = computed(() => {
 const iconClass = computed(() => {
   const classes = [''];
 
-  if (props.iconPosition === 'start') {
-    classes.push('-translate-x-[20%]');
-  } else if (props.iconPosition === 'end') {
-    classes.push('translate-x-[20%]');
+  if (!iconOnly.value) {
+    if (props.iconPosition === 'start') {
+      classes.push('-translate-x-[20%]');
+    } else if (props.iconPosition === 'end') {
+      classes.push('translate-x-[20%]');
+    }
   }
 
   if (props.size === 'xs') {

package/src/components/BaseButtonGroup.stories.js

@@ -2,10 +2,21 @@ import { createFieldStory, options } from '../../.storybook/utils';
 import BaseButtonGroup from './BaseButtonGroup.vue';
 import ShowValue from '../../.storybook/components/ShowValue.vue';
 
+const sizes = ['xs', 'sm', 'md'];
+
 export default {
   title: 'Form/BaseButtonGroup',
   component: BaseButtonGroup,
-  argTypes: {},
+  argTypes: {
+    spacing: {
+      control: { type: 'select' },
+      options: ['none', 'default'],
+    },
+    size: {
+      control: { type: 'select' },
+      options: sizes,
+    },
+  },
   args: {
     labelKey: 'label',
     valueKey: 'value',
@@ -45,6 +56,11 @@ Disabled.args = {
   modelValue: { label: 'Dark Maul', value: 'darth_maul' },
 };
 
+export const NoSpace = Template.bind({});
+NoSpace.args = {
+  spacing: 'none',
+};
+
 export const SlotOption = (args) => ({
   components: { BaseButtonGroup },
   setup() {
@@ -79,6 +95,20 @@ export const SlotOption = (args) => ({
   `,
 });
 
+export const Sizes = (args) => ({
+  components: { BaseButtonGroup },
+  setup() {
+    const value = ref(null);
+    return { value, args, 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>
+      <BaseButtonGroup v-bind="args" v-model="value" :size="size"></BaseButtonGroup>
+    </div>
+  `,
+});
+
 export const Field = createFieldStory({
   component: BaseButtonGroup,
   componentName: 'BaseButtonGroup',

package/src/components/BaseButtonGroup.vue

@@ -1,32 +1,27 @@
 <template>
   <div
-    class="flex flex-wrap"
-    :style="{ margin: '-' + spacing }"
+    class="flex items-center flex-wrap"
+    :class="wrapperClasses"
   >
-    <div
+    <BaseButton
       v-for="option in normalizedOptions"
       :key="option.value ? option.value : 'null'"
-      :style="{ padding: spacing }"
+      :type="buttonType"
+      :disabled="disabled"
+      :size="sizeInternal"
+      :class="twButton"
+      :color="buttonColor(option, isSelected(option))"
+      @click="onSelect(option)"
     >
-      <button
-        :type="buttonType"
+      <slot
+        name="option"
+        :selected="computed(() => isSelected(option))"
+        :option="option"
         :disabled="disabled"
-        :class="[
-          twButton,
-          isSelected(option) ? twButtonSelected : twButtonUnselected,
-        ]"
-        @click="onSelect(option)"
       >
-        <slot
-          name="option"
-          :selected="computed(() => isSelected(option))"
-          :option="option"
-          :disabled="disabled"
-        >
-          {{ option.label }}
-        </slot>
-      </button>
-    </div>
+        {{ option.label }}
+      </slot>
+    </BaseButton>
   </div>
 </template>
 
@@ -36,6 +31,8 @@ import { NormalizedOption, Option } from '@/types';
 import { cloneDeep, isArray } from 'lodash';
 import { useHasOptions } from '@/composables/hasOptions';
 import { useField } from '@/composables/field';
+import BaseButton from '@/components/BaseButton.vue';
+import { Size } from '@/utils/sizes';
 
 const props = defineProps({
   modelValue: {
@@ -52,25 +49,27 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  size: {
+    default: undefined,
+    type: String as PropType<Size>,
+  },
   buttonType: {
     default: 'button',
     type: String as PropType<'button' | 'submit'>,
   },
-  twButton: {
-    default: 'btn btn-sm',
-    type: String,
+  buttonColor: {
+    default(option: Option, selected: boolean) {
+      return selected ? 'primary' : ''
+    },
+    type: Function as PropType<(option: Option, selected: boolean) => string>,
   },
-  twButtonSelected: {
-    default: 'btn-primary',
-    type: String,
-  },
-  twButtonUnselected: {
+  twButton: {
     default: '',
-    type: String,
+    type: [String, Array] as PropType<string | string[]>,
   },
   spacing: {
-    default: '0.15rem',
-    type: String,
+    default: 'default',
+    type: String as PropType<'none' | 'default'>,
   },
   options: {
     required: true,
@@ -100,9 +99,10 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue']);
 
-const { requiredInternal, emitUpdate } = useField({
+const { requiredInternal, emitUpdate, sizeInternal } = useField({
   name: computed(() => props.name),
   required: computed(() => props.required),
+  size: computed(() => props.size),
   hasError: computed(() => props.hasError),
   emit: emit,
 });
@@ -147,4 +147,17 @@ function onSelect(option: NormalizedOption) {
     emitUpdate(newOption);
   }
 }
+
+const wrapperClasses = computed(() => {
+
+  if (props.spacing == 'none') {
+    return 'btn-group';
+  }
+
+  return {
+    "xs": "gap-0.5",
+    "sm": "gap-1",
+    "md": "gap-1.5",
+  }[sizeInternal.value];
+});
 </script>