@dcrackel/hematournamentui 1.0.708 → 1.0.710

package/dist/hematournamentui-tailwind.css

@@ -659,6 +659,9 @@
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
+  .min-h-5 {
+    min-height: calc(var(--spacing) * 5);
+  }
   .min-h-16 {
     min-height: calc(var(--spacing) * 16);
   }
@@ -927,6 +930,9 @@
   .scrollbar-thin {
     scrollbar-width: thin;
   }
+  .list-disc {
+    list-style-type: disc;
+  }
   .appearance-none {
     appearance: none;
   }
@@ -1125,6 +1131,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
   .border-2 {
     border-style: var(--tw-border-style);
     border-width: 2px;
@@ -1366,6 +1376,9 @@
   .object-cover {
     object-fit: cover;
   }
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
   .p-0\! {
     padding: calc(var(--spacing) * 0) !important;
   }
@@ -1510,6 +1523,9 @@
   .pl-4 {
     padding-left: calc(var(--spacing) * 4);
   }
+  .pl-5 {
+    padding-left: calc(var(--spacing) * 5);
+  }
   .text-center {
     text-align: center;
   }
@@ -1851,12 +1867,6 @@
     -webkit-user-select: none;
     user-select: none;
   }
-  .placeholder\:text-xs {
-    &::placeholder {
-      font-size: var(--text-xs);
-      line-height: var(--tw-leading, var(--text-xs--line-height));
-    }
-  }
   .last\:border-b-0 {
     &:last-child {
       border-bottom-style: var(--tw-border-style);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/hematournamentui",
   "private": false,
-  "version": "1.0.708",
+  "version": "1.0.710",
   "type": "module",
   "main": "dist/HemaTournamentUI-lib.umd.js",
   "module": "dist/HemaTournamentUI-lib.es.js",

package/src/stories/Atoms/Input/BaseInput.test.js

@@ -1,85 +1,97 @@
-import BaseInput from './BaseInput.vue';
-import { mount } from '@vue/test-utils';
-import { describe, expect, test, it } from 'vitest';
-
-describe('BaseInput.vue', () => {
-  it('renders with default props', () => {
-    const wrapper = mount(BaseInput);
-    const inputElement = wrapper.find('input');
-
-    expect(inputElement.attributes('placeholder')).toBe('');
-    expect(wrapper.vm.internalValue).toBe('');
-  });
-
-  it('initializes with the correct value prop', () => {
-    const initialValue = 'Hello, World!';
-    const wrapper = mount(BaseInput, {
-      props: {
-        value: initialValue
-      }
-    });
-
-    expect(wrapper.vm.internalValue).toBe(initialValue);
-  });
-
-  it('updates internalValue when value prop changes', async () => {
-    const wrapper = mount(BaseInput);
-    await wrapper.setProps({ value: 'New Value' });
-
-    expect(wrapper.vm.internalValue).toBe('New Value');
-  });
-
-  it('emits update:value with a delay upon input', async () => {
-    const wrapper = mount(BaseInput);
-    const inputElement = wrapper.find('input');
-
-    await inputElement.setValue('Test Input');
-
-    // TODO: Handle timer-related functionality with vitest
-    await new Promise(resolve => setTimeout(resolve, 350));
-
-    expect(wrapper.emitted('update:value')).toBeTruthy();
-    expect(wrapper.emitted('update:value')[0]).toEqual(['Test Input']);
-  });
-
-  it('applies formInput styles when type is formInput', () => {
-    const wrapper = mount(BaseInput, {
-      props: {
-        type: 'formInput',
-        invalid: false
-      }
-    });
-    const inputElement = wrapper.find('input');
-    expect(inputElement.classes()).toContain('border');
-    expect(inputElement.classes()).toContain('rounded-lg');
-    expect(inputElement.classes()).toContain('text-secondary');
-    expect(inputElement.classes()).toContain('placeholder:text-xs');
-    expect(inputElement.classes()).toContain('text-sm');
-    expect(inputElement.classes()).toContain('p-2');
-    expect(inputElement.classes()).toContain('w-full');
-    expect(inputElement.classes()).toContain('border-dropdownSelect');
-  });
-
-  it('applies border-alarm class when invalid is true', () => {
-    const wrapper = mount(BaseInput, {
-      props: {
-        type: 'formInput',
-        invalid: true
-      }
-    });
-    const inputElement = wrapper.find('input');
-    expect(inputElement.classes()).toContain('border-alarm');
-  });
-
-  it('does not apply border-alarm class when invalid is false', () => {
-    const wrapper = mount(BaseInput, {
-      props: {
-        type: 'formInput',
-        invalid: false
-      }
-    });
-    const inputElement = wrapper.find('input');
-    expect(inputElement.classes()).not.toContain('border-alarm');
-    expect(inputElement.classes()).toContain('border-dropdownSelect');
-  });
-});
+import BaseInput from './BaseInput.vue';
+import { mount } from '@vue/test-utils';
+import { describe, expect, test, it } from 'vitest';
+
+describe('BaseInput.vue', () => {
+  it('renders with default props', () => {
+    const wrapper = mount(BaseInput);
+    const inputElement = wrapper.find('input');
+
+    expect(inputElement.attributes('placeholder')).toBe('');
+    expect(wrapper.vm.internalValue).toBe('');
+  });
+
+  it('initializes with the correct value prop', () => {
+    const initialValue = 'Hello, World!';
+    const wrapper = mount(BaseInput, {
+      props: {
+        value: initialValue
+      }
+    });
+
+    expect(wrapper.vm.internalValue).toBe(initialValue);
+  });
+
+  it('updates internalValue when value prop changes', async () => {
+    const wrapper = mount(BaseInput);
+    await wrapper.setProps({ value: 'New Value' });
+
+    expect(wrapper.vm.internalValue).toBe('New Value');
+  });
+
+  it('emits the latest value synchronously before the next action', () => {
+    const wrapper = mount(BaseInput);
+    const inputElement = wrapper.find('input');
+
+    inputElement.element.value = 'Test Input';
+    inputElement.element.dispatchEvent(new Event('input', { bubbles: true }));
+    expect(wrapper.emitted('update:value')).toEqual([['Test Input']]);
+  });
+
+  it('applies input border styles when addBorder is enabled', () => {
+    const wrapper = mount(BaseInput, {
+      props: {
+        addBorder: true,
+        invalid: false
+      }
+    });
+    const inputElement = wrapper.find('input');
+    expect(inputElement.classes()).toContain('border');
+    expect(inputElement.classes()).toContain('rounded-lg');
+    expect(inputElement.classes()).toContain('text-quinary');
+    expect(inputElement.classes()).toContain('text-sm');
+    expect(inputElement.classes()).toContain('p-2');
+    expect(inputElement.classes()).toContain('w-full');
+    expect(inputElement.classes()).toContain('border-dropdownSelect');
+  });
+
+  it('applies border-alarm class when invalid is true', () => {
+    const wrapper = mount(BaseInput, {
+      props: {
+        addBorder: true,
+        invalid: true
+      }
+    });
+    const inputElement = wrapper.find('input');
+    expect(inputElement.classes()).toContain('border-alarm');
+  });
+
+  it('does not apply border-alarm class when invalid is false', () => {
+    const wrapper = mount(BaseInput, {
+      props: {
+        addBorder: true,
+        invalid: false
+      }
+    });
+    const inputElement = wrapper.find('input');
+    expect(inputElement.classes()).not.toContain('border-alarm');
+    expect(inputElement.classes()).toContain('border-dropdownSelect');
+  });
+
+  it('delivers a cleared value before the input is unmounted', () => {
+    const wrapper = mount(BaseInput, { props: { value: '123', inputType: 'number' } });
+    const input = wrapper.find('input');
+    input.element.value = '';
+    input.element.dispatchEvent(new Event('input', { bubbles: true }));
+    expect(wrapper.emitted('update:value')).toEqual([['']]);
+    wrapper.unmount();
+  });
+
+  it('does not emit edits while disabled', () => {
+    const wrapper = mount(BaseInput, { props: { disabled: true, value: 'original' } });
+    const input = wrapper.find('input');
+    input.element.value = 'changed';
+    input.element.dispatchEvent(new Event('input', { bubbles: true }));
+    expect(wrapper.emitted('update:value')).toBeUndefined();
+  });
+});

package/src/stories/Atoms/Input/BaseInput.vue

@@ -1,150 +1,149 @@
-<template>
-  <div :class="iconName ? '' : ''">
-    <input
-      ref="input"
-      v-model="internalValue"
-      :class="baseClasses"
-      :placeholder="placeholder"
-      :type="inputType"
-      :disabled="disabled"
-      @input="onInput"
-      @focus="onFocus"
-      @blur="onBlur"
-    />
-  </div>
-</template>
-
-<script>
-const sizeClasses = {
-  xs: ' text-xs',
-  sm: ' text-sm',
-  md: ' text-md',
-  lg: ' text-lg',
-  xl: ' text-xl',
-  '2xl': ' text-2xl',
-  '3xl': ' text-3xl',
-  '4xl': ' text-4xl',
-  '5xl': ' text-5xl'
-};
-
-export default {
-  name: 'BaseInput',
-  emits: ['update:value'],
-  props: {
-    placeholder: {
-      type: [String, Number],
-      default: ''
-    },
-    value: {
-      type: [String, Number],
-      default: ''
-    },
-    inputType: {
-      type: String,
-      default: 'text'
-    },
-    invalid: {
-      type: Boolean,
-      default: false
-    },
-    addBorder: {
-      type: Boolean,
-      default: false
-    },
-    iconName: {
-      type: String,
-      default: ''
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    iconStyle: {
-      type: String,
-      default: 'fa-solid',
-      validator: value => ['fa-solid', 'fa-regular', 'fa-light', 'fa-thing'].includes(value)
-    },
-    size: {
-      type: String,
-      default: 'sm',
-      validator: value => ['', ' ', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'].includes(value)
-    },
-    centerInput: {
-      type: Boolean,
-      default: false
-    },
-    iconColor: {
-      type: String,
-      default: 'primary',
-      validator: value =>
-        ['neutral', 'primary', 'secondary', 'tertiary', 'quaternary', 'quinary', 'bright', 'white', 'alarm'].includes(
-          value
-        )
-    },
-    allowPercent: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      internalValue: this.value,
-      currentPlaceholder: this.placeholder,
-      timeout: null
-    };
-  },
-  computed: {
-    baseClasses() {
-      let classes = 'appearance-none focus:outline-none w-full text-sm rounded-lg text-quinary';
-      if (this.addBorder) {
-        classes += this.invalid ? ' border border-alarm p-2' : ' border border-dropdownSelect p-2';
-      }
-
-      if (this.centerInput) classes += ' text-center';
-
-      classes += sizeClasses[this.size] || '';
-
-      return classes;
-    }
-  },
-  watch: {
-    value(newValue) {
-      this.internalValue = newValue;
-    }
-  },
-  methods: {
-    onInput(event) {
-      let sanitizedValue = event.target.value;
-
-      if (this.inputType === 'number') {
-        sanitizedValue = sanitizedValue.replace(/\D/g, '');
-      }
-      if (this.inputType === 'text') {
-        this.allowPercent
-          ? (sanitizedValue = sanitizedValue.replace(/[\\'"=*<>|#$^(){}\[\]]/g, ''))
-          : (sanitizedValue = sanitizedValue.replace(/[\\'"=*<>|#$%^(){}\[\]]/g, ''));
-      }
-
-      this.internalValue = sanitizedValue;
-
-      clearTimeout(this.timeout);
-      this.timeout = setTimeout(() => {
-        this.$emit('update:value', this.internalValue);
-      }, 300);
-    },
-    onFocus() {
-      this.currentPlaceholder = '';
-    },
-    onBlur() {
-      if (!this.internalValue) {
-        this.currentPlaceholder = this.placeholder;
-      }
-    },
-    focus() {
-      if (this.$refs.input) {
-        this.$refs.input.focus();
-      }
-    }
-  }
-};
-</script>
+<template>
+  <div :class="iconName ? '' : ''">
+    <input
+      ref="input"
+      :value="internalValue"
+      :class="baseClasses"
+      :placeholder="placeholder"
+      :type="inputType"
+      :disabled="disabled"
+      :aria-invalid="invalid"
+      @input="onInput"
+      @focus="onFocus"
+      @blur="onBlur"
+    />
+  </div>
+</template>
+
+<script>
+const sizeClasses = {
+  xs: ' text-xs',
+  sm: ' text-sm',
+  md: ' text-md',
+  lg: ' text-lg',
+  xl: ' text-xl',
+  '2xl': ' text-2xl',
+  '3xl': ' text-3xl',
+  '4xl': ' text-4xl',
+  '5xl': ' text-5xl'
+};
+
+export default {
+  name: 'BaseInput',
+  emits: ['update:value'],
+  props: {
+    placeholder: {
+      type: [String, Number],
+      default: ''
+    },
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    inputType: {
+      type: String,
+      default: 'text'
+    },
+    invalid: {
+      type: Boolean,
+      default: false
+    },
+    addBorder: {
+      type: Boolean,
+      default: false
+    },
+    iconName: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    iconStyle: {
+      type: String,
+      default: 'fa-solid',
+      validator: value => ['fa-solid', 'fa-regular', 'fa-light', 'fa-thing'].includes(value)
+    },
+    size: {
+      type: String,
+      default: 'sm',
+      validator: value => ['', ' ', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'].includes(value)
+    },
+    centerInput: {
+      type: Boolean,
+      default: false
+    },
+    iconColor: {
+      type: String,
+      default: 'primary',
+      validator: value =>
+        ['neutral', 'primary', 'secondary', 'tertiary', 'quaternary', 'quinary', 'bright', 'white', 'alarm'].includes(
+          value
+        )
+    },
+    allowPercent: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      internalValue: this.value,
+      currentPlaceholder: this.placeholder
+    };
+  },
+  computed: {
+    baseClasses() {
+      let classes = 'appearance-none focus:outline-none w-full text-sm rounded-lg text-quinary';
+      if (this.addBorder) {
+        classes += this.invalid ? ' border border-alarm p-2' : ' border border-dropdownSelect p-2';
+      }
+
+      if (this.centerInput) classes += ' text-center';
+
+      classes += sizeClasses[this.size] || '';
+
+      return classes;
+    }
+  },
+  watch: {
+    value(newValue) {
+      this.internalValue = newValue;
+    }
+  },
+  methods: {
+    onInput(event) {
+      if (this.disabled) return;
+      const input = event.target;
+      let sanitizedValue = input.value;
+
+      if (this.inputType === 'number') {
+        sanitizedValue = sanitizedValue.replace(/\D/g, '');
+      }
+      if (this.inputType === 'text') {
+        this.allowPercent
+          ? (sanitizedValue = sanitizedValue.replace(/[\\'"=*<>|#$^(){}\[\]]/g, ''))
+          : (sanitizedValue = sanitizedValue.replace(/[\\'"=*<>|#$%^(){}\[\]]/g, ''));
+      }
+
+      this.internalValue = sanitizedValue;
+      input.value = sanitizedValue;
+      this.$emit('update:value', sanitizedValue);
+    },
+    onFocus() {
+      this.currentPlaceholder = '';
+    },
+    onBlur() {
+      if (!this.internalValue) {
+        this.currentPlaceholder = this.placeholder;
+      }
+    },
+    focus() {
+      if (this.$refs.input) {
+        this.$refs.input.focus();
+      }
+    }
+  }
+};
+</script>

package/src/stories/Organisms/ComplexInputs/ImageCropper/ImageCropper.stories.js

@@ -1,20 +1,31 @@
-import GenericImageCropper from './ImageCropper.vue';
-
-export default {
-  title: 'Organisms/ComplexInputs/ImageCropper',
-  component: GenericImageCropper,
-  tags: ['autodocs'],
-  args: {},
-  argTypes: {
-    personID: {
-      control: 'number',
-      description: 'The ID of the person for the image cropper'
-    }
-  }
-};
-
-export const Default = {
-  args: {
-    personID: 1
-  }
-};
+import GenericImageCropper from './ImageCropper.vue';
+
+export default {
+  title: 'Organisms/ComplexInputs/ImageCropper',
+  component: GenericImageCropper,
+  tags: ['autodocs'],
+  args: { urlToImage: '', isProfile: true, disabled: false },
+  argTypes: {
+    urlToImage: { control: 'text' },
+    uploadImageName: { control: 'text' },
+    uploadServer: { control: 'text' },
+    imageServer: { control: 'text' },
+    isProfile: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    'update:url': { action: 'update:url' },
+    'update:uploading': { action: 'update:uploading' },
+    'error:load': { action: 'error:load' },
+    'error:upload': { action: 'error:upload' }
+  }
+};
+
+export const Default = {
+  args: {
+    urlToImage: '',
+    isProfile: true
+  }
+};
+
+export const Disabled = {
+  args: { urlToImage: '', isProfile: true, disabled: true }
+};