@pequity/squirrel 6.1.0 → 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-select-btn/p-select-btn.spec.js

@@ -134,7 +134,7 @@ describe('PSelectBtn.vue', () => {
       },
     });
 
-    const buttonDivs = await wrapper.findAll('div.inline-flex');
+    const buttonDivs = wrapper.findAll('div.inline-flex');
 
     buttonDivs.forEach((buttonDiv, i) => {
       expect(buttonDiv.attributes()['data-tooltip']).toBe(items[i].textCustom);
@@ -213,6 +213,25 @@ describe('PSelectBtn.vue', () => {
     });
   });
 
+  it('renders auto-width buttons', async () => {
+    const wrapper = createWrapperFor(PSelectBtn, {
+      props: {
+        items,
+        itemValue: 'valueCustom',
+        itemText: 'textCustom',
+        modelValue: 2,
+        grow: false,
+      },
+    });
+
+    const buttons = await wrapper.findAll('button');
+
+    expect(wrapper.classes()).toContain('flex');
+    buttons.forEach((button) => {
+      expect(button.classes()).not.toContain('flex-1');
+    });
+  });
+
   it('removes padding from buttons', async () => {
     const wrapper = createWrapperFor(PSelectBtn, {
       props: {
@@ -224,11 +243,11 @@ describe('PSelectBtn.vue', () => {
       },
     });
 
-    const buttonContainers = wrapper.findAll('div.inline-flex');
+    const buttonDivs = wrapper.findAll('div.inline-flex');
 
-    buttonContainers.forEach((buttonContainer) => {
-      expect(buttonContainer.classes()).toContain('*:px-0');
-      expect(buttonContainer.classes()).toContain('*:py-0');
+    buttonDivs.forEach((buttonDiv) => {
+      expect(buttonDiv.classes()).toContain('*:px-0');
+      expect(buttonDiv.classes()).toContain('*:py-0');
     });
   });
 

package/squirrel/components/p-select-btn/p-select-btn.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="{ flex: grow }">
+  <div class="flex">
     <div
       v-for="(item, index) in items"
       :key="String(item[itemValue])"

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>