@pequity/squirrel 6.0.11 → 6.0.13

package/squirrel/utils/inputClassesMixin.ts

@@ -1,31 +1,14 @@
-import {
-  ERROR_MSG,
-  INPUT_BASE,
-  INPUT_ERROR,
-  INPUT_NORMAL,
-  INPUT_SIZES,
-  type InputSize,
-  LABEL_BASE,
-  LABEL_REQUIRED,
-  LABEL_SIZES,
-  SELECT_ARROW,
-  SELECT_BASE,
-  SELECT_SIZES,
-  SPACING_LEFT,
-  SPACING_PREFIX,
-  SPACING_RIGHT,
-  SPACING_SUFFIX,
-  TEXTAREA_BASE,
-} from '@squirrel/utils/inputClassesShared';
+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<InputSize>,
+      type: String as PropType<Size>,
       default: 'md',
-      validator(value: InputSize) {
-        return Object.keys(INPUT_SIZES).includes(value);
+      validator(value: Size) {
+        return SIZES.includes(value);
       },
     },
     errorMsg: {
@@ -41,37 +24,37 @@ export default defineComponent({
       default: false,
     },
   },
-  data() {
-    return {
-      errorMsgClasses: ERROR_MSG,
-    };
-  },
   computed: {
-    inputClasses() {
-      const base = `${INPUT_BASE} ${INPUT_SIZES[this.size]}`;
-      const spacingLeft = this.$slots.prefix ? SPACING_PREFIX[this.size] : SPACING_LEFT[this.size];
-      const spacingRight = this.$slots.suffix ? SPACING_SUFFIX[this.size] : SPACING_RIGHT[this.size];
-      const res = `${base} ${spacingLeft} ${spacingRight} ${this.errorMsg ? INPUT_ERROR : INPUT_NORMAL}${this.rounded ? ' rounded-full' : ''}`;
+    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 res;
+      return { input: input(), label: label(), errorMessage: errorMessage() };
+    },
+    inputClasses() {
+      return this.allClasses.input;
     },
     labelClasses() {
-      const base = `${LABEL_BASE} ${LABEL_SIZES[this.size]}`;
-      const res = this.required ? `${base} ${LABEL_REQUIRED}` : base;
-
-      return res;
+      return this.allClasses.label;
+    },
+    errorMsgClasses() {
+      return this.allClasses.errorMessage;
     },
     selectClasses() {
-      const res = `${this.inputClasses.replace(` ${SPACING_RIGHT[this.size]}`, '')} ${SELECT_BASE} ${SELECT_ARROW} ${
-        SELECT_SIZES[this.size]
-      }`;
+      const { input } = selectClasses({ size: this.size, required: this.required, error: !!this.errorMsg });
 
-      return res;
+      return input();
     },
     textareaClasses() {
-      const res = `${this.inputClasses} ${TEXTAREA_BASE}`;
+      const { input } = textareaClasses({ required: this.required, error: !!this.errorMsg });
 
-      return res;
+      return input();
     },
   },
 });

package/dist/cjs/inputClassesShared.js

@@ -1,76 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const LABEL_BASE = `block mb-1 font-medium`;
-const LABEL_SIZES = {
-  sm: `text-xs`,
-  md: `text-sm`,
-  lg: `text-base`
-};
-const LABEL_REQUIRED = `after:content-['_*'] after:text-on-error`;
-const ERROR_MSG = `text-xs text-on-error mt-1`;
-const INPUT_BASE = [
-  "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"
-].join(" ");
-const INPUT_NORMAL = `ring-p-gray-30 hover:ring-primary focus:ring-primary`;
-const INPUT_ERROR = `ring-on-error hover:ring-on-error focus:ring-on-error`;
-const INPUT_SIZES = {
-  sm: `h-8 text-sm rounded`,
-  md: `h-10 text-base rounded`,
-  lg: `h-12 text-lg rounded`
-};
-const TEXTAREA_BASE = `resize-y px-3 py-3 overflow-auto h-auto`;
-const SELECT_BASE = "truncate";
-const SELECT_ARROW = `squirrel-bg-chevron-down bg-no-repeat appearance-none`;
-const SELECT_SIZES = {
-  sm: `bg-[right_0.675rem_center] pr-8`,
-  md: `bg-[right_1rem_center] pr-10`,
-  lg: `bg-[right_1.25rem_center] pr-12`
-};
-const SPACING_LEFT = {
-  sm: `pl-3`,
-  md: `pl-4`,
-  lg: `pl-5`
-};
-const SPACING_RIGHT = {
-  sm: `pr-3`,
-  md: `pr-4`,
-  lg: `pr-5`
-};
-const SPACING_PREFIX = {
-  sm: `pl-6`,
-  md: `pl-8`,
-  lg: `pl-12`
-};
-const SPACING_SUFFIX = {
-  sm: `pr-6`,
-  md: `pr-8`,
-  lg: `pr-12`
-};
-exports.ERROR_MSG = ERROR_MSG;
-exports.INPUT_BASE = INPUT_BASE;
-exports.INPUT_ERROR = INPUT_ERROR;
-exports.INPUT_NORMAL = INPUT_NORMAL;
-exports.INPUT_SIZES = INPUT_SIZES;
-exports.LABEL_BASE = LABEL_BASE;
-exports.LABEL_REQUIRED = LABEL_REQUIRED;
-exports.LABEL_SIZES = LABEL_SIZES;
-exports.SELECT_ARROW = SELECT_ARROW;
-exports.SELECT_BASE = SELECT_BASE;
-exports.SELECT_SIZES = SELECT_SIZES;
-exports.SPACING_LEFT = SPACING_LEFT;
-exports.SPACING_PREFIX = SPACING_PREFIX;
-exports.SPACING_RIGHT = SPACING_RIGHT;
-exports.SPACING_SUFFIX = SPACING_SUFFIX;
-exports.TEXTAREA_BASE = TEXTAREA_BASE;

package/dist/es/inputClassesShared.js

@@ -1,76 +0,0 @@
-const LABEL_BASE = `block mb-1 font-medium`;
-const LABEL_SIZES = {
-  sm: `text-xs`,
-  md: `text-sm`,
-  lg: `text-base`
-};
-const LABEL_REQUIRED = `after:content-['_*'] after:text-on-error`;
-const ERROR_MSG = `text-xs text-on-error mt-1`;
-const INPUT_BASE = [
-  "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"
-].join(" ");
-const INPUT_NORMAL = `ring-p-gray-30 hover:ring-primary focus:ring-primary`;
-const INPUT_ERROR = `ring-on-error hover:ring-on-error focus:ring-on-error`;
-const INPUT_SIZES = {
-  sm: `h-8 text-sm rounded`,
-  md: `h-10 text-base rounded`,
-  lg: `h-12 text-lg rounded`
-};
-const TEXTAREA_BASE = `resize-y px-3 py-3 overflow-auto h-auto`;
-const SELECT_BASE = "truncate";
-const SELECT_ARROW = `squirrel-bg-chevron-down bg-no-repeat appearance-none`;
-const SELECT_SIZES = {
-  sm: `bg-[right_0.675rem_center] pr-8`,
-  md: `bg-[right_1rem_center] pr-10`,
-  lg: `bg-[right_1.25rem_center] pr-12`
-};
-const SPACING_LEFT = {
-  sm: `pl-3`,
-  md: `pl-4`,
-  lg: `pl-5`
-};
-const SPACING_RIGHT = {
-  sm: `pr-3`,
-  md: `pr-4`,
-  lg: `pr-5`
-};
-const SPACING_PREFIX = {
-  sm: `pl-6`,
-  md: `pl-8`,
-  lg: `pl-12`
-};
-const SPACING_SUFFIX = {
-  sm: `pr-6`,
-  md: `pr-8`,
-  lg: `pr-12`
-};
-export {
-  ERROR_MSG,
-  INPUT_BASE,
-  INPUT_ERROR,
-  INPUT_NORMAL,
-  INPUT_SIZES,
-  LABEL_BASE,
-  LABEL_REQUIRED,
-  LABEL_SIZES,
-  SELECT_ARROW,
-  SELECT_BASE,
-  SELECT_SIZES,
-  SPACING_LEFT,
-  SPACING_PREFIX,
-  SPACING_RIGHT,
-  SPACING_SUFFIX,
-  TEXTAREA_BASE
-};

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

@@ -1,45 +0,0 @@
-export declare const LABEL_BASE = "block mb-1 font-medium";
-export declare const LABEL_SIZES: {
-    sm: string;
-    md: string;
-    lg: string;
-};
-export declare const LABEL_REQUIRED = "after:content-['_*'] after:text-on-error";
-export declare const ERROR_MSG = "text-xs text-on-error mt-1";
-export declare const INPUT_BASE: string;
-export declare const INPUT_NORMAL = "ring-p-gray-30 hover:ring-primary focus:ring-primary";
-export declare const INPUT_ERROR = "ring-on-error hover:ring-on-error focus:ring-on-error";
-export declare const INPUT_SIZES: {
-    readonly sm: "h-8 text-sm rounded";
-    readonly md: "h-10 text-base rounded";
-    readonly lg: "h-12 text-lg rounded";
-};
-export type InputSize = keyof typeof INPUT_SIZES;
-export declare const TEXTAREA_BASE = "resize-y px-3 py-3 overflow-auto h-auto";
-export declare const SELECT_BASE = "truncate";
-export declare const SELECT_ARROW = "squirrel-bg-chevron-down bg-no-repeat appearance-none";
-export declare const SELECT_SIZES: {
-    sm: string;
-    md: string;
-    lg: string;
-};
-export declare const SPACING_LEFT: {
-    sm: string;
-    md: string;
-    lg: string;
-};
-export declare const SPACING_RIGHT: {
-    sm: string;
-    md: string;
-    lg: string;
-};
-export declare const SPACING_PREFIX: {
-    sm: string;
-    md: string;
-    lg: string;
-};
-export declare const SPACING_SUFFIX: {
-    sm: string;
-    md: string;
-    lg: string;
-};

package/squirrel/utils/inputClassesShared.ts

@@ -1,75 +0,0 @@
-export const LABEL_BASE = `block mb-1 font-medium`;
-
-export const LABEL_SIZES = {
-  sm: `text-xs`,
-  md: `text-sm`,
-  lg: `text-base`,
-};
-
-export const LABEL_REQUIRED = `after:content-['_*'] after:text-on-error`;
-
-export const ERROR_MSG = `text-xs text-on-error mt-1`;
-
-export const INPUT_BASE = [
-  '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',
-].join(' ');
-
-export const INPUT_NORMAL = `ring-p-gray-30 hover:ring-primary focus:ring-primary`;
-
-export const INPUT_ERROR = `ring-on-error hover:ring-on-error focus:ring-on-error`;
-
-export const INPUT_SIZES = {
-  sm: `h-8 text-sm rounded`,
-  md: `h-10 text-base rounded`,
-  lg: `h-12 text-lg rounded`,
-} as const;
-
-export type InputSize = keyof typeof INPUT_SIZES;
-
-export const TEXTAREA_BASE = `resize-y px-3 py-3 overflow-auto h-auto`;
-
-export const SELECT_BASE = 'truncate';
-
-export const SELECT_ARROW = `squirrel-bg-chevron-down bg-no-repeat appearance-none`;
-
-export const SELECT_SIZES = {
-  sm: `bg-[right_0.675rem_center] pr-8`,
-  md: `bg-[right_1rem_center] pr-10`,
-  lg: `bg-[right_1.25rem_center] pr-12`,
-};
-
-export const SPACING_LEFT = {
-  sm: `pl-3`,
-  md: `pl-4`,
-  lg: `pl-5`,
-};
-
-export const SPACING_RIGHT = {
-  sm: `pr-3`,
-  md: `pr-4`,
-  lg: `pr-5`,
-};
-
-export const SPACING_PREFIX = {
-  sm: `pl-6`,
-  md: `pl-8`,
-  lg: `pl-12`,
-};
-
-export const SPACING_SUFFIX = {
-  sm: `pr-6`,
-  md: `pr-8`,
-  lg: `pr-12`,
-};