@pequity/squirrel 6.1.1 → 7.0.1

package/squirrel/composables/useInputClasses.ts

@@ -4,16 +4,7 @@ import {
   selectClasses as tvSelectClasses,
   textareaClasses as tvTextareaClasses,
 } from '@squirrel/utils/inputClasses';
-import { computed, ref, toRefs } from 'vue';
-
-const defaults = {
-  size: ref<Size>('md'),
-  errorMsg: ref(''),
-  required: ref(false),
-  prefix: ref(false),
-  suffix: ref(false),
-  rounded: ref(false),
-};
+import { computed, type MaybeRefOrGetter, toValue } from 'vue';
 
 type Props = {
   size: Size;
@@ -24,21 +15,24 @@ type Props = {
   rounded: boolean;
 };
 
-type Defaults = typeof defaults;
+const defaults: Props = {
+  size: 'md',
+  errorMsg: '',
+  required: false,
+  prefix: false,
+  suffix: false,
+  rounded: false,
+} as const;
 
-export function useInputClasses(props: Partial<Props>) {
-  const opts = { ...defaults, ...toRefs(props) } as Defaults;
-  const { size, errorMsg, required, rounded, prefix, suffix } = opts;
+export function useInputClasses(props: MaybeRefOrGetter<Partial<Props>>) {
+  const opts = computed(() => {
+    const propsValue = toValue(props);
+
+    return { ...defaults, ...propsValue, error: !!propsValue.errorMsg };
+  });
 
   const allClasses = computed(() => {
-    const { input, label, errorMessage } = tvInputClasses({
-      size: size.value,
-      prefix: prefix.value,
-      suffix: suffix.value,
-      required: required.value,
-      error: !!errorMsg.value,
-      rounded: rounded.value,
-    });
+    const { input, label, errorMessage } = tvInputClasses(opts.value);
 
     return { input: input(), label: label(), errorMessage: errorMessage() };
   });
@@ -50,13 +44,13 @@ export function useInputClasses(props: Partial<Props>) {
   const errorMsgClasses = computed(() => allClasses.value.errorMessage);
 
   const selectClasses = computed(() => {
-    const { input } = tvSelectClasses({ size: size.value, required: required.value, error: !!errorMsg.value });
+    const { input } = tvSelectClasses(opts.value);
 
     return input();
   });
 
   const textareaClasses = computed(() => {
-    const { input } = tvTextareaClasses({ required: required.value, error: !!errorMsg.value });
+    const { input } = tvTextareaClasses(opts.value);
 
     return input();
   });

package/squirrel/utils/index.ts

@@ -1,25 +1,18 @@
 import { type Size, SIZES } from '@squirrel/components/p-btn/p-btn.types';
 import { CURRENCY_INPUT_DEFAULTS } from '@squirrel/utils/currency';
 import { getNextActiveElement, isElement, isVisible } from '@squirrel/utils/dom';
-import inputClassesMixin from '@squirrel/utils/inputClassesMixin';
 import { setupListKeyboardNavigation } from '@squirrel/utils/listKeyboardNavigation';
 import { toNumberOrNull } from '@squirrel/utils/number';
 import { isObject } from '@squirrel/utils/object';
 import { createPagingRange } from '@squirrel/utils/pagination';
 import { sanitizeUrl } from '@squirrel/utils/sanitization';
 import { toString } from '@squirrel/utils/string';
-import { type Color, getColor, getColorDeep, getScreen } from '@squirrel/utils/tailwind';
 import { splitStringForHighlight } from '@squirrel/utils/text';
 
 export {
-  Color,
   createPagingRange,
   CURRENCY_INPUT_DEFAULTS,
-  getColor,
-  getColorDeep,
   getNextActiveElement,
-  getScreen,
-  inputClassesMixin,
   isElement,
   isObject,
   isVisible,

package/squirrel/utils/inputClasses.ts

@@ -96,12 +96,18 @@ const inputClasses = tv({
 const textareaClasses = tv({
   extend: inputClasses,
   slots: {
-    input: 'resize-y overflow-auto px-3 py-3',
+    input: 'resize-y overflow-auto',
   },
   variants: {
     size: {
+      sm: {
+        input: 'h-auto py-2',
+      },
       md: {
-        input: 'h-auto',
+        input: 'h-auto py-3',
+      },
+      lg: {
+        input: 'h-auto py-4',
       },
     },
   },

package/dist/cjs/inputClassesMixin.js

@@ -1,58 +0,0 @@
-"use strict";
-const pBtn_types = require("./chunks/p-btn.types.js");
-const inputClasses = require("./inputClasses.js");
-const vue = require("vue");
-const inputClassesMixin = vue.defineComponent({
-  props: {
-    size: {
-      type: String,
-      default: "md",
-      validator(value) {
-        return pBtn_types.SIZES.includes(value);
-      }
-    },
-    errorMsg: {
-      type: String,
-      default: ""
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    rounded: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    allClasses() {
-      const { input, label, errorMessage } = inputClasses.inputClasses({
-        size: this.size,
-        prefix: !!this.$slots.prefix,
-        suffix: !!this.$slots.suffix,
-        required: this.required,
-        error: !!this.errorMsg,
-        rounded: this.rounded
-      });
-      return { input: input(), label: label(), errorMessage: errorMessage() };
-    },
-    inputClasses() {
-      return this.allClasses.input;
-    },
-    labelClasses() {
-      return this.allClasses.label;
-    },
-    errorMsgClasses() {
-      return this.allClasses.errorMessage;
-    },
-    selectClasses() {
-      const { input } = inputClasses.selectClasses({ size: this.size, required: this.required, error: !!this.errorMsg });
-      return input();
-    },
-    textareaClasses() {
-      const { input } = inputClasses.textareaClasses({ required: this.required, error: !!this.errorMsg });
-      return input();
-    }
-  }
-});
-module.exports = inputClassesMixin;

package/dist/cjs/tailwind.js

@@ -1,25 +0,0 @@
-"use strict";
-var _a;
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const config$1 = require("./config.js");
-const lodashEs = require("lodash-es");
-const resolveConfig = require("tailwindcss/resolveConfig");
-const config = resolveConfig(config$1.squirrelTailwindConfig);
-const theme = config.theme;
-const colors = theme == null ? void 0 : theme.colors;
-(_a = theme == null ? void 0 : theme.extend) == null ? void 0 : _a.colors;
-const screens = theme == null ? void 0 : theme.screens;
-const getColor = (name) => {
-  return colors == null ? void 0 : colors[name];
-};
-const getColorDeep = (color) => {
-  const baseColor = color.split("-").slice(0, -1).join("-");
-  const colorNumber = String(color.split("-").pop());
-  return lodashEs.get(getColor(baseColor), colorNumber);
-};
-const getScreen = (size) => {
-  return screens == null ? void 0 : screens[size];
-};
-exports.getColor = getColor;
-exports.getColorDeep = getColorDeep;
-exports.getScreen = getScreen;

package/dist/es/inputClassesMixin.js

@@ -1,59 +0,0 @@
-import { S as SIZES } from "./chunks/p-btn.types.js";
-import { textareaClasses, selectClasses, inputClasses } from "./inputClasses.js";
-import { defineComponent } from "vue";
-const inputClassesMixin = defineComponent({
-  props: {
-    size: {
-      type: String,
-      default: "md",
-      validator(value) {
-        return SIZES.includes(value);
-      }
-    },
-    errorMsg: {
-      type: String,
-      default: ""
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    rounded: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    allClasses() {
-      const { input, label, errorMessage } = inputClasses({
-        size: this.size,
-        prefix: !!this.$slots.prefix,
-        suffix: !!this.$slots.suffix,
-        required: this.required,
-        error: !!this.errorMsg,
-        rounded: this.rounded
-      });
-      return { input: input(), label: label(), errorMessage: errorMessage() };
-    },
-    inputClasses() {
-      return this.allClasses.input;
-    },
-    labelClasses() {
-      return this.allClasses.label;
-    },
-    errorMsgClasses() {
-      return this.allClasses.errorMessage;
-    },
-    selectClasses() {
-      const { input } = selectClasses({ size: this.size, required: this.required, error: !!this.errorMsg });
-      return input();
-    },
-    textareaClasses() {
-      const { input } = textareaClasses({ required: this.required, error: !!this.errorMsg });
-      return input();
-    }
-  }
-});
-export {
-  inputClassesMixin as default
-};

package/dist/es/tailwind.js

@@ -1,25 +0,0 @@
-var _a;
-import { squirrelTailwindConfig } from "./config.js";
-import { get } from "lodash-es";
-import resolveConfig from "tailwindcss/resolveConfig";
-const config = resolveConfig(squirrelTailwindConfig);
-const theme = config.theme;
-const colors = theme == null ? void 0 : theme.colors;
-(_a = theme == null ? void 0 : theme.extend) == null ? void 0 : _a.colors;
-const screens = theme == null ? void 0 : theme.screens;
-const getColor = (name) => {
-  return colors == null ? void 0 : colors[name];
-};
-const getColorDeep = (color) => {
-  const baseColor = color.split("-").slice(0, -1).join("-");
-  const colorNumber = String(color.split("-").pop());
-  return get(getColor(baseColor), colorNumber);
-};
-const getScreen = (size) => {
-  return screens == null ? void 0 : screens[size];
-};
-export {
-  getColor,
-  getColorDeep,
-  getScreen
-};

package/dist/squirrel/utils/inputClassesMixin.d.ts

@@ -1,56 +0,0 @@
-import { type Size } from '../components/p-btn/p-btn.types';
-import { type PropType } from 'vue';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    size: {
-        type: PropType<Size>;
-        default: string;
-        validator(value: Size): boolean;
-    };
-    errorMsg: {
-        type: StringConstructor;
-        default: string;
-    };
-    required: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    rounded: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {
-    allClasses(): {
-        input: string;
-        label: string;
-        errorMessage: string;
-    };
-    inputClasses(): string;
-    labelClasses(): string;
-    errorMsgClasses(): string;
-    selectClasses(): string;
-    textareaClasses(): string;
-}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    size: {
-        type: PropType<Size>;
-        default: string;
-        validator(value: Size): boolean;
-    };
-    errorMsg: {
-        type: StringConstructor;
-        default: string;
-    };
-    required: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    rounded: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    size: "sm" | "md" | "lg";
-    required: boolean;
-    rounded: boolean;
-    errorMsg: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/squirrel/utils/tailwind.d.ts

@@ -1,8 +0,0 @@
-declare const colors: import("tailwindcss/types/config").ResolvableTo<import("tailwindcss/types/config").RecursiveKeyValuePair<string, string>> | undefined;
-declare const extendedColors: import("tailwindcss/types/config").ResolvableTo<import("tailwindcss/types/config").RecursiveKeyValuePair<string, string>> | undefined;
-declare const screens: import("tailwindcss/types/config").ResolvableTo<import("tailwindcss/types/config").ScreensConfig> | undefined;
-export type Color = keyof typeof colors | keyof typeof extendedColors;
-export declare const getColor: (name: Color) => undefined;
-export declare const getColorDeep: (color: string) => undefined;
-export declare const getScreen: (size: keyof typeof screens) => undefined;
-export {};

package/squirrel/utils/inputClassesMixin.spec.js

@@ -1,241 +0,0 @@
-import inputClassesMixin from '@squirrel/utils/inputClassesMixin';
-import { shallowMount } from '@vue/test-utils';
-
-const baseInputClassesMd = () => [
-  'text-night',
-  'w-full',
-  'bg-surface',
-  'focus:outline-none',
-  'border-0',
-  'ring-1',
-  'ring-inset',
-  'focus:ring-2',
-  'disabled:ring-p-gray-30',
-  'disabled:hover:ring-p-gray-30',
-  'disabled:bg-p-blue-10',
-  'disabled:cursor-default',
-  'placeholder:text-p-gray-40',
-  'h-10',
-  'text-base',
-  'rounded',
-  'pl-4',
-  'pr-4',
-  'ring-p-gray-30',
-  'hover:ring-primary',
-  'focus:ring-primary',
-];
-
-const baseInputClassesSm = () => {
-  return baseInputClassesMd().map((item) => {
-    return (
-      {
-        'h-10': 'h-8',
-        'text-base': 'text-sm',
-        'pl-4': 'pl-3',
-        'pr-4': 'pr-3',
-      }[item] || item
-    );
-  });
-};
-
-const baseInputClassesLg = () => {
-  return baseInputClassesMd().map((item) => {
-    return (
-      {
-        'h-10': 'h-12',
-        'text-base': 'text-lg',
-        'pl-4': 'pl-5',
-        'pr-4': 'pr-5',
-      }[item] || item
-    );
-  });
-};
-
-const baseLabelClassesMd = ['block', 'mb-1', 'font-medium', 'text-sm'];
-
-const createWrapper = (opts) => {
-  const TestComponent = {
-    render() {
-      //
-    },
-    mixins: [inputClassesMixin],
-  };
-
-  return shallowMount(TestComponent, opts);
-};
-
-describe('inputClassesMixin', () => {
-  it('generates input classes md', () => {
-    const wrapper = createWrapper({ props: { size: 'md' } });
-
-    const inputClasses = wrapper.vm.inputClasses.split(' ');
-
-    expect(inputClasses).toEqual(expect.arrayContaining(baseInputClassesMd()));
-  });
-
-  it('generates input classes sm', () => {
-    const wrapper = createWrapper({ props: { size: 'sm' } });
-
-    const inputClasses = wrapper.vm.inputClasses.split(' ');
-
-    expect(inputClasses).toEqual(expect.arrayContaining(baseInputClassesSm()));
-  });
-
-  it('generates input classes lg', () => {
-    const wrapper = createWrapper({ props: { size: 'lg' } });
-
-    const inputClasses = wrapper.vm.inputClasses.split(' ');
-
-    expect(inputClasses).toEqual(expect.arrayContaining(baseInputClassesLg()));
-  });
-
-  it('generates label classes md', () => {
-    const wrapper = createWrapper({ props: { size: 'md' } });
-
-    const labelClasses = wrapper.vm.labelClasses.split(' ');
-
-    expect(labelClasses).toEqual(expect.arrayContaining(baseLabelClassesMd));
-  });
-
-  it('generates label classes sm', () => {
-    const wrapper = createWrapper({ props: { size: 'sm' } });
-
-    const labelClasses = wrapper.vm.labelClasses.split(' ');
-    const baseLabelClasses = baseLabelClassesMd.map((item) => {
-      return (
-        {
-          'text-sm': 'text-xs',
-        }[item] || item
-      );
-    });
-
-    expect(labelClasses).toEqual(expect.arrayContaining(baseLabelClasses));
-  });
-
-  it('generates label classes lg', () => {
-    const wrapper = createWrapper({ props: { size: 'lg' } });
-
-    const labelClasses = wrapper.vm.labelClasses.split(' ');
-    const baseLabelClassesLg = baseLabelClassesMd.map((item) => {
-      return (
-        {
-          'text-sm': 'text-base',
-        }[item] || item
-      );
-    });
-
-    expect(labelClasses).toEqual(expect.arrayContaining(baseLabelClassesLg));
-  });
-
-  it('generates select classes md', () => {
-    const wrapper = createWrapper({ props: { size: 'md' } });
-
-    const selectClasses = wrapper.vm.selectClasses.split(' ');
-    const baseInputClasses = baseInputClassesMd().filter((item) => {
-      return !['pr-4', 'bg-surface'].includes(item);
-    });
-    const baseSelectClasses = [
-      'appearance-none',
-      'bg-[position:right_1rem_center]',
-      'bg-no-repeat',
-      'pr-10',
-      'squirrel-bg-chevron-down',
-      'truncate',
-    ];
-
-    const res = baseInputClasses.concat(baseSelectClasses);
-
-    expect(selectClasses).toEqual(expect.arrayContaining(res));
-  });
-
-  it('generates select classes sm', () => {
-    const wrapper = createWrapper({ props: { size: 'sm' } });
-
-    const selectClasses = wrapper.vm.selectClasses.split(' ');
-    const baseInputClasses = baseInputClassesSm().filter((item) => {
-      return !['pr-3', 'bg-surface'].includes(item);
-    });
-    const baseSelectClasses = [
-      'appearance-none',
-      'bg-[position:right_0.675rem_center]',
-      'bg-no-repeat',
-      'pr-8',
-      'squirrel-bg-chevron-down',
-      'truncate',
-    ];
-    const res = baseInputClasses.concat(baseSelectClasses);
-
-    expect(selectClasses).toEqual(expect.arrayContaining(res));
-  });
-
-  it('generates select classes lg', () => {
-    const wrapper = createWrapper({ props: { size: 'lg' } });
-
-    const selectClasses = wrapper.vm.selectClasses.split(' ');
-    const baseInputClasses = baseInputClassesLg().filter((item) => {
-      return !['pr-5', 'bg-surface'].includes(item);
-    });
-    const baseSelectClasses = [
-      'appearance-none',
-      'bg-[position:right_1.25rem_center]',
-      'bg-no-repeat',
-      'pr-12',
-      'squirrel-bg-chevron-down',
-      'truncate',
-    ];
-    const res = baseInputClasses.concat(baseSelectClasses);
-
-    expect(selectClasses).toEqual(expect.arrayContaining(res));
-  });
-
-  it('generates textarea classes md', () => {
-    const wrapper = createWrapper({ props: { size: 'md' } });
-
-    const textareaClasses = wrapper.vm.textareaClasses.split(' ');
-    const baseInputClasses = baseInputClassesMd().filter((item) => {
-      return !['pl-3', 'pr-3', 'h-10'].includes(item);
-    });
-    const res = baseInputClasses.concat(['resize-y', 'px-3', 'py-3', 'overflow-auto', 'h-auto']);
-
-    expect(textareaClasses).toEqual(expect.arrayContaining(res));
-  });
-
-  it('generates textarea classes sm', () => {
-    const wrapper = createWrapper({ props: { size: 'sm' } });
-
-    const textareaClasses = wrapper.vm.textareaClasses.split(' ');
-    const baseInputClasses = baseInputClassesSm().filter((item) => {
-      return !['pr-3', 'pl-3', 'h-8', 'text-sm'].includes(item);
-    });
-    const res = baseInputClasses.concat(['resize-y', 'px-3', 'py-3', 'overflow-auto', 'h-auto', 'pr-4', 'pl-4']);
-
-    expect(textareaClasses).toEqual(expect.arrayContaining(res));
-  });
-
-  it('generates textarea classes lg', () => {
-    const wrapper = createWrapper({ props: { size: 'lg' } });
-
-    const textareaClasses = wrapper.vm.textareaClasses.split(' ');
-    const baseInputClasses = baseInputClassesLg().filter((item) => {
-      return !['pr-5', 'pl-5', 'h-12', 'text-lg'].includes(item);
-    });
-    const res = baseInputClasses.concat(['resize-y', 'px-3', 'py-3', 'overflow-auto', 'h-auto', 'pr-4', 'pl-4']);
-
-    expect(textareaClasses).toEqual(expect.arrayContaining(res));
-  });
-
-  it('generates error classes', () => {
-    const wrapper = createWrapper({ props: { size: 'md', errorMsg: 'Test error' } });
-
-    const inputClasses = wrapper.vm.inputClasses.split(' ');
-    const resInputClasses = baseInputClassesMd()
-      .filter((item) => {
-        return !['ring-p-gray-30', 'hover:ring-primary', 'focus:ring-primary'].includes(item);
-      })
-      .concat(['ring-on-error', 'hover:ring-on-error', 'focus:ring-on-error']);
-    const errorMsgClasses = wrapper.vm.errorMsgClasses.split(' ');
-
-    expect(inputClasses).toEqual(expect.arrayContaining(resInputClasses));
-    expect(errorMsgClasses).toEqual(expect.arrayContaining(['text-xs', 'text-on-error', 'mt-1']));
-  });
-});

package/squirrel/utils/inputClassesMixin.ts

@@ -1,60 +0,0 @@
-import { type Size, SIZES } from '@squirrel/components/p-btn/p-btn.types';
-import { inputClasses, selectClasses, textareaClasses } from '@squirrel/utils/inputClasses';
-import { defineComponent, type PropType } from 'vue';
-
-export default defineComponent({
-  props: {
-    size: {
-      type: String as PropType<Size>,
-      default: 'md',
-      validator(value: Size) {
-        return SIZES.includes(value);
-      },
-    },
-    errorMsg: {
-      type: String,
-      default: '',
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    rounded: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    allClasses() {
-      const { input, label, errorMessage } = inputClasses({
-        size: this.size,
-        prefix: !!this.$slots.prefix,
-        suffix: !!this.$slots.suffix,
-        required: this.required,
-        error: !!this.errorMsg,
-        rounded: this.rounded,
-      });
-
-      return { input: input(), label: label(), errorMessage: errorMessage() };
-    },
-    inputClasses() {
-      return this.allClasses.input;
-    },
-    labelClasses() {
-      return this.allClasses.label;
-    },
-    errorMsgClasses() {
-      return this.allClasses.errorMessage;
-    },
-    selectClasses() {
-      const { input } = selectClasses({ size: this.size, required: this.required, error: !!this.errorMsg });
-
-      return input();
-    },
-    textareaClasses() {
-      const { input } = textareaClasses({ required: this.required, error: !!this.errorMsg });
-
-      return input();
-    },
-  },
-});

package/squirrel/utils/tailwind.spec.js

@@ -1,27 +0,0 @@
-import { getScreen } from '@squirrel/utils/tailwind';
-import { cloneDeep } from 'lodash-es';
-
-const screens = { sm: '640px', md: '768px' };
-
-describe('tailwind', () => {
-  it('should return the correct screen size for a valid key', () => {
-    // Mock the theme.screens object
-    const originalScreens = global.screens;
-    global.screens = cloneDeep(screens);
-
-    expect(getScreen('sm')).toBe('640px');
-    expect(getScreen('md')).toBe('768px');
-
-    // Restore the original screens object
-    global.screens = originalScreens;
-  });
-
-  it('should return undefined for an invalid key', () => {
-    const originalScreens = global.screens;
-    global.screens = cloneDeep(screens);
-
-    expect(getScreen('xxl')).toBeUndefined();
-
-    global.screens = originalScreens;
-  });
-});