@pequity/squirrel 6.1.1 → 7.0.0

package/squirrel/components/p-input-number/p-input-number.vue

@@ -18,12 +18,13 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { type Size, SIZES } from '@squirrel/components/p-btn/p-btn.types';
 import PInfoIcon from '@squirrel/components/p-info-icon/p-info-icon.vue';
-import inputClassesMixin from '@squirrel/utils/inputClassesMixin';
+import { useInputClasses } from '@squirrel/composables/useInputClasses';
 import { toNumberOrNull } from '@squirrel/utils/number';
 import { kebabCase } from 'lodash-es';
-import { computed, defineComponent, type PropType, type StyleValue, watch } from 'vue';
+import { computed, type PropType, type StyleValue, useAttrs, useSlots, watch } from 'vue';
 import { type CurrencyDisplay, type CurrencyInputOptions, useCurrencyInput } from 'vue-currency-input';
 
 const ALL_OPTIONS = [
@@ -40,93 +41,107 @@ const ALL_OPTIONS = [
   'valueScaling',
 ];
 
-export default defineComponent({
+defineOptions({
   name: 'PInputNumber',
-  components: {
-    PInfoIcon,
-  },
-  mixins: [inputClassesMixin],
   inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: [Number, String] as PropType<number | string | null | undefined>,
-      default: null,
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    errorMsg: {
-      type: String,
-      default: '',
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    selectOnClick: {
-      type: Boolean,
-      default: true,
-    },
-    tooltipText: {
-      type: String,
-      default: '',
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const props = defineProps({
+  modelValue: {
+    type: [Number, String] as PropType<number | string | null | undefined>,
+    default: null,
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  errorMsg: {
+    type: String,
+    default: '',
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String as PropType<Size>,
+    default: 'md',
+    validator(value: Size) {
+      return SIZES.includes(value);
     },
   },
-  emits: ['update:modelValue', 'change'],
-  setup(props, { attrs, emit, expose }) {
-    const DEFAULTS: CurrencyInputOptions & Record<string, unknown> = {
-      locale: 'en-US',
-      currency: 'USD',
-      precision: 0,
-      currencyDisplay: 'hidden' as CurrencyDisplay,
-    };
-
-    const inputCurrencyOptions = computed(() => {
-      ALL_OPTIONS.forEach((key) => {
-        const attr = attrs[kebabCase(key)];
-
-        if (attr && typeof attr !== 'undefined') {
-          DEFAULTS[key] = attr;
-        }
-      });
-
-      return DEFAULTS;
-    });
-
-    const { inputRef, numberValue, setValue } = useCurrencyInput(
-      inputCurrencyOptions.value as unknown as CurrencyInputOptions,
-      false
-    );
-
-    watch(numberValue, (value) => {
-      emit('update:modelValue', toNumberOrNull(value));
-    });
-
-    watch(
-      () => props.modelValue,
-      (value) => {
-        setValue(toNumberOrNull(value));
-      }
-    );
-
-    const computedAttrs = computed(() => {
-      const { class: classes, style, ...rest } = attrs;
-
-      return rest;
-    });
-
-    const style = computed(() => {
-      return attrs.style as StyleValue;
-    });
-
-    const focus = () => {
-      props.selectOnClick && inputRef.value.select();
-    };
-
-    expose({ setValue });
-
-    return { inputRef, computedAttrs, style, focus };
+  selectOnClick: {
+    type: Boolean,
+    default: true,
+  },
+  tooltipText: {
+    type: String,
+    default: '',
   },
 });
+
+const slots = useSlots();
+
+const { labelClasses, inputClasses, errorMsgClasses } = useInputClasses(
+  computed(() => ({
+    ...props,
+    prefix: !!slots.prefix,
+    suffix: !!slots.suffix,
+  }))
+);
+
+const attrs = useAttrs();
+
+const DEFAULTS: CurrencyInputOptions & Record<string, unknown> = {
+  locale: 'en-US',
+  currency: 'USD',
+  precision: 0,
+  currencyDisplay: 'hidden' as CurrencyDisplay,
+};
+
+const inputCurrencyOptions = computed(() => {
+  ALL_OPTIONS.forEach((key) => {
+    const attr = attrs[kebabCase(key)];
+
+    if (attr && typeof attr !== 'undefined') {
+      DEFAULTS[key] = attr;
+    }
+  });
+
+  return DEFAULTS;
+});
+
+const { inputRef, numberValue, setValue } = useCurrencyInput(
+  inputCurrencyOptions.value as unknown as CurrencyInputOptions,
+  false
+);
+
+watch(numberValue, (value) => {
+  emit('update:modelValue', toNumberOrNull(value));
+});
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    setValue(toNumberOrNull(value));
+  }
+);
+
+const computedAttrs = computed(() => {
+  const { class: classes, style, ...rest } = attrs;
+
+  return rest;
+});
+
+const style = computed(() => {
+  return attrs.style as StyleValue;
+});
+
+const focus = () => {
+  props.selectOnClick && inputRef.value.select();
+};
+
+defineExpose({ setValue });
 </script>

package/squirrel/components/p-progress-bar/p-progress-bar.vue

@@ -10,26 +10,21 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, type PropType } from 'vue';
-
+<script setup lang="ts">
 export type ProgressItem = {
   value: number;
   color: string;
   label?: string;
 };
 
-export default defineComponent({
+type Props = {
+  total: number;
+  items: ProgressItem[];
+};
+
+defineOptions({
   name: 'PProgressBar',
-  props: {
-    total: {
-      type: Number as PropType<number>,
-      required: true,
-    },
-    items: {
-      type: Array as PropType<ProgressItem[]>,
-      required: true,
-    },
-  },
 });
+
+defineProps<Props>();
 </script>

package/squirrel/components/p-table-header-cell/p-table-filter-icon.vue

@@ -2,17 +2,16 @@
   <div :class="['h-5 w-5 shrink-0 cursor-pointer filter', { active: active }]" v-bind="$attrs"></div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
+<script setup lang="ts">
+defineOptions({
   name: 'PTableFilterIcon',
   inheritAttrs: false,
-  props: {
-    active: {
-      type: Boolean,
-      default: false,
-    },
+});
+
+defineProps({
+  active: {
+    type: Boolean,
+    default: false,
   },
 });
 </script>

package/squirrel/components/p-table-sort/p-table-sort.vue

@@ -55,26 +55,23 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { SORTING_TYPES, type SortingType } from '@squirrel/components/p-table-sort/p-table-sort.config';
-import { defineComponent, type PropType } from 'vue';
+import { type PropType } from 'vue';
 
-export default defineComponent({
+defineOptions({
   name: 'PTableSort',
-  props: {
-    modelValue: {
-      type: String as PropType<SortingType>,
-      default: SORTING_TYPES.NO_SORTING,
-      validator(value: SortingType) {
-        return Object.values(SORTING_TYPES).includes(value);
-      },
+});
+
+defineEmits(['update:modelValue']);
+
+defineProps({
+  modelValue: {
+    type: String as PropType<SortingType>,
+    default: SORTING_TYPES.NO_SORTING,
+    validator(value: SortingType) {
+      return Object.values(SORTING_TYPES).includes(value);
     },
   },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      SORTING_TYPES,
-    };
-  },
 });
 </script>

package/squirrel/components/p-textarea/p-textarea.vue

@@ -10,49 +10,67 @@
   </div>
 </template>
 
-<script lang="ts">
-import inputClassesMixin from '@squirrel/utils/inputClassesMixin';
-import { defineComponent, type StyleValue } from 'vue';
+<script setup lang="ts">
+import { type Size, SIZES } from '@squirrel/components/p-btn/p-btn.types';
+import { useInputClasses } from '@squirrel/composables/useInputClasses';
+import { computed, type PropType, type StyleValue, useAttrs } from 'vue';
 
-export default defineComponent({
+defineOptions({
   name: 'PTextarea',
-  mixins: [inputClassesMixin],
   inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: [String, Number],
-      default: '',
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    errorMsg: {
-      type: String,
-      default: '',
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['update:modelValue'],
-  computed: {
-    attrs() {
-      const { class: classes, style, ...rest } = this.$attrs;
+});
 
-      return rest;
-    },
-    style() {
-      return this.$attrs.style as StyleValue;
-    },
-  },
-  methods: {
-    updateValue(e: Event): void {
-      const target = e.target as HTMLInputElement;
+const emit = defineEmits(['update:modelValue']);
 
-      this.$emit('update:modelValue', target.value);
+const props = defineProps({
+  modelValue: {
+    type: [String, Number, null] as PropType<string | number | null>,
+    default: '',
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  errorMsg: {
+    type: String,
+    default: '',
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String as PropType<Size>,
+    default: 'md',
+    validator(value: Size) {
+      return SIZES.includes(value);
     },
   },
 });
+
+const { labelClasses, textareaClasses, errorMsgClasses } = useInputClasses(
+  computed(() => ({
+    required: props.required,
+    errorMsg: props.errorMsg,
+    size: props.size,
+  }))
+);
+
+const allAttrs = useAttrs();
+
+const attrs = computed(() => {
+  const { class: classes, style, ...rest } = allAttrs;
+
+  return rest;
+});
+
+const style = computed(() => {
+  return allAttrs.style as StyleValue;
+});
+
+const updateValue = (e: Event) => {
+  const target = e.target as HTMLInputElement;
+
+  emit('update:modelValue', target.value);
+};
 </script>

package/squirrel/components/p-toggle/p-toggle.vue

@@ -25,8 +25,9 @@
 </template>
 
 <script lang="ts">
-import inputClassesMixin from '@squirrel/utils/inputClassesMixin';
-import { defineComponent, type StyleValue } from 'vue';
+import { type Size, SIZES } from '@squirrel/components/p-btn/p-btn.types';
+import { useInputClasses } from '@squirrel/composables/useInputClasses';
+import { computed, type PropType, type StyleValue, useAttrs } from 'vue';
 
 const TOGGLE_SIZES = {
   sm: `w-7 h-4 after:top-[2px] after:left-[2px] after:h-3 after:w-3`,
@@ -52,56 +53,71 @@ const TOGGLE_CLASSES = [
   'peer-disabled:bg-p-blue-10',
   'peer-disabled:after:border-p-blue-10',
 ].join(' ');
+</script>
 
-export default defineComponent({
+<script setup lang="ts">
+defineOptions({
   name: 'PToggle',
-  mixins: [inputClassesMixin],
   inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: false,
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    errorMsg: {
-      type: String,
-      default: '',
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['update:modelValue'],
-  computed: {
-    toggleClasses() {
-      const base = `${TOGGLE_CLASSES} ${TOGGLE_SIZES[this.size]}`;
-      const res = this.errorMsg ? `${base} border border-on-error` : base;
+});
 
-      return res;
-    },
-    toggleLabelClasses() {
-      return `${this.labelClasses.replace('mb-1', '')} ml-2`;
-    },
-    attrs() {
-      const { style, class: classes, 'data-testid': dataTestId, ...rest } = this.$attrs;
+const emit = defineEmits(['update:modelValue']);
 
-      return rest;
-    },
-    style() {
-      return this.$attrs.style as StyleValue;
-    },
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  errorMsg: {
+    type: String,
+    default: '',
+  },
+  required: {
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    change(e: Event) {
-      const target = e.target as HTMLInputElement;
-      this.$emit('update:modelValue', target.checked);
+  size: {
+    type: String as PropType<Size>,
+    default: 'md',
+    validator(value: Size) {
+      return SIZES.includes(value);
     },
   },
 });
+
+const allAttrs = useAttrs();
+const { labelClasses, errorMsgClasses } = useInputClasses(props);
+
+const toggleClasses = computed(() => {
+  const base = `${TOGGLE_CLASSES} ${TOGGLE_SIZES[props.size]}`;
+  const res = props.errorMsg ? `${base} border border-on-error` : base;
+
+  return res;
+});
+
+const toggleLabelClasses = computed(() => {
+  return `${labelClasses.value.replace('mb-1', '')} ml-2`;
+});
+
+const attrs = computed(() => {
+  const { style, class: classes, 'data-testid': dataTestId, ...rest } = allAttrs;
+
+  return rest;
+});
+
+const style = computed(() => {
+  return allAttrs.style as StyleValue;
+});
+
+const change = (e: Event) => {
+  const target = e.target as HTMLInputElement;
+
+  emit('update:modelValue', target.checked);
+};
 </script>
 
 <style scoped>

package/squirrel/composables/useInputClasses.spec.js

@@ -1,5 +1,6 @@
 import { useInputClasses } from '@squirrel/composables/useInputClasses';
-import { reactive } from 'vue';
+import { expect } from '@storybook/test';
+import { reactive, ref } from 'vue';
 
 const baseInputClassesMd = () => [
   'text-night',
@@ -54,6 +55,42 @@ const baseInputClassesLg = () => {
 const baseLabelClassesMd = ['block', 'mb-1', 'font-medium', 'text-sm'];
 
 describe('useInputClasses', () => {
+  it('accepts a non-reactive object', () => {
+    const props = { size: 'lg' };
+
+    const { inputClasses, labelClasses, selectClasses, textareaClasses, errorMsgClasses } = useInputClasses(props);
+
+    expect(inputClasses.value).toContain('text-lg');
+    expect(labelClasses.value).toContain('text-base');
+    expect(selectClasses.value).toContain('text-lg');
+    expect(textareaClasses.value).toContain('text-lg');
+    expect(errorMsgClasses.value).toContain('text-on-error');
+  });
+
+  it('reacts to changes when props is a reactive object', () => {
+    const props = reactive({ size: 'md' });
+
+    const { inputClasses } = useInputClasses(props);
+
+    expect(inputClasses.value).toContain('text-base');
+
+    props.size = 'lg';
+
+    expect(inputClasses.value).toContain('text-lg');
+  });
+
+  it('reacts to changes when props is a ref', () => {
+    const props = ref({ size: 'md' });
+
+    const { inputClasses } = useInputClasses(props);
+
+    expect(inputClasses.value).toContain('text-base');
+
+    props.value.size = 'lg';
+
+    expect(inputClasses.value).toContain('text-lg');
+  });
+
   it('generates input classes md', () => {
     const props = reactive({ size: 'md' });
 
@@ -177,26 +214,26 @@ describe('useInputClasses', () => {
     expect(selectClasses.value.split(' ')).toEqual(expect.arrayContaining(res));
   });
 
-  it('generates textarea classes md', () => {
-    const props = reactive({ size: 'md' });
+  it('generates textarea classes sm', () => {
+    const props = reactive({ size: 'sm' });
 
     const { textareaClasses } = useInputClasses(props);
-    const baseInputClasses = baseInputClassesMd().filter((item) => {
-      return !['pl-3', 'pr-3', 'h-10'].includes(item);
+    const baseInputClasses = baseInputClassesSm().filter((item) => {
+      return !['pl-3', 'pr-3', 'h-8'].includes(item);
     });
-    const res = baseInputClasses.concat(['resize-y', 'px-3', 'py-3', 'overflow-auto', 'h-auto']);
+    const res = baseInputClasses.concat(['resize-y', 'py-2', 'overflow-auto', 'h-auto']);
 
     expect(textareaClasses.value.split(' ')).toEqual(expect.arrayContaining(res));
   });
 
-  it('generates textarea classes sm', () => {
-    const props = reactive({ size: 'sm' });
+  it('generates textarea classes md', () => {
+    const props = reactive({ size: 'md' });
 
     const { textareaClasses } = useInputClasses(props);
-    const baseInputClasses = baseInputClassesSm().filter((item) => {
-      return !['pr-3', 'pl-3', 'h-8', 'text-sm'].includes(item);
+    const baseInputClasses = baseInputClassesMd().filter((item) => {
+      return !['pl-4', 'pr-4', 'h-10'].includes(item);
     });
-    const res = baseInputClasses.concat(['resize-y', 'px-3', 'py-3', 'overflow-auto', 'h-auto', 'pr-4', 'pl-4']);
+    const res = baseInputClasses.concat(['resize-y', 'py-3', 'overflow-auto', 'h-auto']);
 
     expect(textareaClasses.value.split(' ')).toEqual(expect.arrayContaining(res));
   });
@@ -206,9 +243,9 @@ describe('useInputClasses', () => {
 
     const { textareaClasses } = useInputClasses(props);
     const baseInputClasses = baseInputClassesLg().filter((item) => {
-      return !['pr-5', 'pl-5', 'h-12', 'text-lg'].includes(item);
+      return !['pr-5', 'pl-5', 'h-12'].includes(item);
     });
-    const res = baseInputClasses.concat(['resize-y', 'px-3', 'py-3', 'overflow-auto', 'h-auto', 'pr-4', 'pl-4']);
+    const res = baseInputClasses.concat(['resize-y', 'py-4', 'overflow-auto', 'h-auto']);
 
     expect(textareaClasses.value.split(' ')).toEqual(expect.arrayContaining(res));
   });