@pequity/squirrel 6.1.0 → 7.0.0

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));
   });

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 {};