@pequity/squirrel 6.0.12 → 6.0.14

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/assets/file-upload-drag-over-icon.svg

@@ -1,5 +0,0 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M33 12H14V44H42V21L33 12Z" stroke="#1A123B" stroke-width="3" />
-  <path d="M9 36H6V4H25L28 7" stroke="#1A123B" stroke-width="3" />
-  <path d="M37 30H19M28 21V39" stroke="#1A123B" stroke-width="3" />
-</svg>

package/squirrel/assets/file-upload-upload-icon.svg

@@ -1,5 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M5.8335 6.25016L10.0002 2.0835L14.1668 6.25016" stroke="#767189" stroke-width="1.25" />
-  <path d="M10 2.0835V13.7502" stroke="#767189" stroke-width="1.25" />
-  <path d="M2.91675 15V18.3333H17.0834V15" stroke="#767189" stroke-width="1.25" />
-</svg>

package/squirrel/assets/file-upload-x-icon-hover.svg

@@ -1,8 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M0 8C0 9.58225 0.469192 11.129 1.34824 12.4446C2.22729 13.7602 3.47672 14.7855 4.93853 15.391C6.40034 15.9965 8.00887 16.155 9.56072 15.8463C11.1126 15.5376 12.538 14.7757 13.6569 13.6569C14.7757 12.538 15.5376 11.1126 15.8463 9.56072C16.155 8.00887 15.9965 6.40034 15.391 4.93853C14.7855 3.47672 13.7602 2.22729 12.4446 1.34824C11.129 0.469192 9.58225 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8ZM14.3333 8C14.3333 9.25262 13.9619 10.4771 13.266 11.5186C12.5701 12.5601 11.5809 13.3719 10.4237 13.8512C9.2664 14.3306 7.99298 14.456 6.76443 14.2116C5.53588 13.9673 4.40739 13.3641 3.52166 12.4783C2.63592 11.5926 2.03273 10.4641 1.78836 9.23557C1.54399 8.00703 1.66941 6.7336 2.14876 5.57634C2.62812 4.41907 3.43988 3.42994 4.48139 2.73403C5.5229 2.03811 6.74739 1.66667 8 1.66667C9.67916 1.66843 11.289 2.33626 12.4764 3.52361C13.6637 4.71096 14.3316 6.32084 14.3333 8Z"
-    fill="#BB1410" />
-  <path
-    d="M5.88634 4.71322C5.73075 4.55763 5.51972 4.47021 5.29967 4.47021C5.07963 4.47021 4.8686 4.55763 4.71301 4.71322C4.55741 4.86881 4.47 5.07984 4.47 5.29989C4.47 5.51993 4.55741 5.73096 4.71301 5.88655L6.71301 7.88655C6.72914 7.9021 6.74197 7.92074 6.75073 7.94136C6.7595 7.96198 6.76401 7.98415 6.76401 8.00655C6.76401 8.02896 6.7595 8.05113 6.75073 8.07175C6.74197 8.09237 6.72914 8.11101 6.71301 8.12655L4.71301 10.1266C4.63561 10.2034 4.57417 10.2948 4.53225 10.3955C4.49033 10.4962 4.46875 10.6042 4.46875 10.7132C4.46875 10.8223 4.49033 10.9303 4.53225 11.031C4.57417 11.1317 4.63561 11.223 4.71301 11.2999C4.78939 11.3781 4.88063 11.4403 4.98138 11.4827C5.08213 11.5251 5.19035 11.547 5.29967 11.547C5.409 11.547 5.51721 11.5251 5.61796 11.4827C5.71871 11.4403 5.80996 11.3781 5.88634 11.2999L7.88634 9.29989C7.91934 9.27037 7.96207 9.25405 8.00634 9.25405C8.05062 9.25405 8.09334 9.27037 8.12634 9.29989L10.1263 11.2999C10.2027 11.3781 10.294 11.4403 10.3947 11.4827C10.4955 11.5251 10.6037 11.547 10.713 11.547C10.8223 11.547 10.9305 11.5251 11.0313 11.4827C11.132 11.4403 11.2233 11.3781 11.2997 11.2999C11.3771 11.223 11.4385 11.1317 11.4804 11.031C11.5224 10.9303 11.5439 10.8223 11.5439 10.7132C11.5439 10.6042 11.5224 10.4962 11.4804 10.3955C11.4385 10.2948 11.3771 10.2034 11.2997 10.1266L9.29967 8.12655C9.27016 8.09355 9.25384 8.05083 9.25384 8.00655C9.25384 7.96228 9.27016 7.91955 9.29967 7.88655L11.2997 5.88655C11.4553 5.73096 11.5427 5.51993 11.5427 5.29989C11.5427 5.07984 11.4553 4.86881 11.2997 4.71322C11.1441 4.55763 10.9331 4.47021 10.713 4.47021C10.493 4.47021 10.2819 4.55763 10.1263 4.71322L8.12634 6.71322C8.09334 6.74274 8.05062 6.75906 8.00634 6.75906C7.96207 6.75906 7.91934 6.74274 7.88634 6.71322L5.88634 4.71322Z"
-    fill="#BB1410" />
-</svg>

package/squirrel/assets/file-upload-x-icon.svg

@@ -1,8 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M0 8C0 9.58225 0.469192 11.129 1.34824 12.4446C2.22729 13.7602 3.47672 14.7855 4.93853 15.391C6.40034 15.9965 8.00887 16.155 9.56072 15.8463C11.1126 15.5376 12.538 14.7757 13.6569 13.6569C14.7757 12.538 15.5376 11.1126 15.8463 9.56072C16.155 8.00887 15.9965 6.40034 15.391 4.93853C14.7855 3.47672 13.7602 2.22729 12.4446 1.34824C11.129 0.469192 9.58225 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8ZM14.3333 8C14.3333 9.25262 13.9619 10.4771 13.266 11.5186C12.5701 12.5601 11.5809 13.3719 10.4237 13.8512C9.2664 14.3306 7.99298 14.456 6.76443 14.2116C5.53588 13.9673 4.40739 13.3641 3.52166 12.4783C2.63592 11.5926 2.03273 10.4641 1.78836 9.23557C1.54399 8.00703 1.66941 6.7336 2.14876 5.57634C2.62812 4.41907 3.43988 3.42994 4.48139 2.73403C5.5229 2.03811 6.74739 1.66667 8 1.66667C9.67916 1.66843 11.289 2.33626 12.4764 3.52361C13.6637 4.71096 14.3316 6.32084 14.3333 8Z"
-    fill="#718096" />
-  <path
-    d="M5.88634 4.71322C5.73075 4.55763 5.51972 4.47021 5.29967 4.47021C5.07963 4.47021 4.8686 4.55763 4.71301 4.71322C4.55741 4.86881 4.47 5.07984 4.47 5.29989C4.47 5.51993 4.55741 5.73096 4.71301 5.88655L6.71301 7.88655C6.72914 7.9021 6.74197 7.92074 6.75073 7.94136C6.7595 7.96198 6.76401 7.98415 6.76401 8.00655C6.76401 8.02896 6.7595 8.05113 6.75073 8.07175C6.74197 8.09237 6.72914 8.11101 6.71301 8.12655L4.71301 10.1266C4.63561 10.2034 4.57417 10.2948 4.53225 10.3955C4.49033 10.4962 4.46875 10.6042 4.46875 10.7132C4.46875 10.8223 4.49033 10.9303 4.53225 11.031C4.57417 11.1317 4.63561 11.223 4.71301 11.2999C4.78939 11.3781 4.88063 11.4403 4.98138 11.4827C5.08213 11.5251 5.19035 11.547 5.29967 11.547C5.409 11.547 5.51721 11.5251 5.61796 11.4827C5.71871 11.4403 5.80996 11.3781 5.88634 11.2999L7.88634 9.29989C7.91934 9.27037 7.96207 9.25405 8.00634 9.25405C8.05062 9.25405 8.09334 9.27037 8.12634 9.29989L10.1263 11.2999C10.2027 11.3781 10.294 11.4403 10.3947 11.4827C10.4955 11.5251 10.6037 11.547 10.713 11.547C10.8223 11.547 10.9305 11.5251 11.0313 11.4827C11.132 11.4403 11.2233 11.3781 11.2997 11.2999C11.3771 11.223 11.4385 11.1317 11.4804 11.031C11.5224 10.9303 11.5439 10.8223 11.5439 10.7132C11.5439 10.6042 11.5224 10.4962 11.4804 10.3955C11.4385 10.2948 11.3771 10.2034 11.2997 10.1266L9.29967 8.12655C9.27016 8.09355 9.25384 8.05083 9.25384 8.00655C9.25384 7.96228 9.27016 7.91955 9.29967 7.88655L11.2997 5.88655C11.4553 5.73096 11.5427 5.51993 11.5427 5.29989C11.5427 5.07984 11.4553 4.86881 11.2997 4.71322C11.1441 4.55763 10.9331 4.47021 10.713 4.47021C10.493 4.47021 10.2819 4.55763 10.1263 4.71322L8.12634 6.71322C8.09334 6.74274 8.05062 6.75906 8.00634 6.75906C7.96207 6.75906 7.91934 6.74274 7.88634 6.71322L5.88634 4.71322Z"
-    fill="#718096" />
-</svg>

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`,
-};