@pequity/squirrel 6.0.12 → 6.0.14

package/dist/es/p-btn.js

@@ -1,57 +1,59 @@
+import { S as SIZES } from "./chunks/p-btn.types.js";
 import { _ as _sfc_main$1 } from "./chunks/p-ring-loader.js";
 import { isExternalLink } from "./link.js";
 import { sanitizeUrl } from "./sanitization.js";
+import { c as ce } from "./chunks/index.js";
 import { defineComponent, resolveComponent, createElementBlock, createBlock, openBlock, mergeProps, renderSlot, resolveDynamicComponent, withCtx, createElementVNode, createCommentVNode, normalizeClass } from "vue";
 import { RouterLink } from "vue-router";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
-const BUTTON_TYPES = {
-  PRIMARY: "primary",
-  SECONDARY: "secondary",
-  PRIMARY_OUTLINE: "primary-outline",
-  SECONDARY_OUTLINE: "secondary-outline",
-  SECONDARY_OUTLINE_BLUE: "secondary-outline-blue",
-  ERROR: "error",
-  SUCCESS: "success",
-  PRIMARY_LINK: "primary-link",
-  SECONDARY_GHOST: "secondary-ghost",
-  SECONDARY_GHOST_DARK: "secondary-ghost-dark"
+const btnClasses = {
+  slots: {
+    button: "relative inline-block rounded font-medium outline-none disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-default aria-disabled:opacity-50",
+    loader: "absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center font-medium"
+  },
+  variants: {
+    type: {
+      primary: {
+        button: "bg-primary text-surface hover:bg-accent active:bg-p-blue-80",
+        loader: "text-surface"
+      },
+      secondary: {
+        button: "bg-p-gray-20 hover:bg-p-gray-30 active:bg-p-gray-40",
+        loader: "text-p-purple-60"
+      },
+      "primary-outline": {
+        button: "bg-p-blue-10 text-p-purple-60 ring-1 ring-inset ring-p-purple-60 hover:bg-p-gray-20",
+        loader: "text-p-purple-60"
+      },
+      "secondary-outline": {
+        button: "bg-surface text-p-purple-60 ring-1 ring-inset ring-p-gray-30 hover:bg-p-blue-10 aria-selected:bg-p-blue-10",
+        loader: "text-p-purple-60"
+      },
+      "secondary-outline-blue": {
+        button: "bg-surface text-p-purple-60 ring-1 ring-inset ring-p-gray-30 hover:bg-p-blue-10 aria-selected:bg-p-blue-15 aria-selected:text-p-blue-60",
+        loader: "text-p-purple-60"
+      },
+      error: { button: "bg-p-red-40 text-white hover:bg-p-red-50", loader: "text-white" },
+      success: { button: "bg-p-green-40 text-white hover:bg-p-green-50", loader: "text-white" },
+      "primary-link": { button: "bg-transparent text-primary underline hover:text-accent", loader: "text-p-blue-60" },
+      "secondary-ghost": { button: "text-on-surface hover:bg-p-gray-20", loader: "text-p-purple-60" },
+      "secondary-ghost-dark": { button: "text-white hover:bg-p-purple-50", loader: "text-p-blue-15" }
+    },
+    size: {
+      sm: { button: "px-2 py-1 text-sm" },
+      md: { button: "px-6 py-2 text-base" },
+      lg: { button: "px-6 py-2.5 text-lg" }
+    }
+  },
+  defaultVariants: {
+    type: "primary",
+    size: "md"
+  }
 };
+const btn = ce(btnClasses);
+const BUTTON_TYPES = Object.keys(btnClasses.variants.type);
 const BUTTON_NATIVE_TYPES = ["button", "submit", "reset"];
-const DEFAULT_CLASSES = `relative inline-block outline-none disabled:opacity-50 disabled:cursor-default disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-default aria-disabled:pointer-events-none`;
-const BUTTON_CLASSES = {
-  [BUTTON_TYPES.PRIMARY]: "text-surface bg-primary hover:bg-accent active:bg-p-blue-80",
-  [BUTTON_TYPES.SECONDARY]: "bg-p-gray-20 hover:bg-p-gray-30 active:bg-p-gray-40",
-  [BUTTON_TYPES.PRIMARY_OUTLINE]: "text-p-purple-60 bg-p-blue-10 ring-1 ring-inset ring-p-purple-60 hover:bg-p-gray-20",
-  [BUTTON_TYPES.SECONDARY_OUTLINE]: "text-p-purple-60 bg-surface ring-1 ring-inset ring-p-gray-30 hover:bg-p-blue-10 aria-selected:bg-p-blue-10",
-  [BUTTON_TYPES.SECONDARY_OUTLINE_BLUE]: "text-p-purple-60 bg-surface ring-1 ring-inset ring-p-gray-30 hover:bg-p-blue-10 aria-selected:bg-p-blue-15 aria-selected:text-p-blue-60",
-  [BUTTON_TYPES.ERROR]: "text-white bg-p-red-40 hover:bg-p-red-50",
-  [BUTTON_TYPES.SUCCESS]: "text-white bg-p-green-40 hover:bg-p-green-50",
-  [BUTTON_TYPES.PRIMARY_LINK]: "text-primary bg-transparent hover:text-accent underline",
-  [BUTTON_TYPES.SECONDARY_GHOST]: "text-on-surface hover:bg-p-gray-20",
-  [BUTTON_TYPES.SECONDARY_GHOST_DARK]: "text-white hover:bg-p-purple-50"
-};
-const BUTTON_SIZES = {
-  sm: "py-1 px-2 rounded font-medium text-sm",
-  md: "py-2 px-6 rounded font-medium text-base",
-  lg: "py-3 px-6 rounded font-medium text-lg"
-};
-const LOADER_SIZES = {
-  sm: 24,
-  md: 30,
-  lg: 40
-};
-const LOADER_COLORS = {
-  [BUTTON_TYPES.PRIMARY]: "var(--color-p-blue-15)",
-  [BUTTON_TYPES.SECONDARY]: "var(--color-p-purple-60)",
-  [BUTTON_TYPES.PRIMARY_OUTLINE]: "var(--color-p-blue-60)",
-  [BUTTON_TYPES.SECONDARY_OUTLINE]: "var(--color-p-purple-60)",
-  [BUTTON_TYPES.SECONDARY_OUTLINE_BLUE]: "var(--color-p-purple-60)",
-  [BUTTON_TYPES.ERROR]: "var(--color-p-blue-15)",
-  [BUTTON_TYPES.SUCCESS]: "var(--color-p-blue-15)",
-  [BUTTON_TYPES.PRIMARY_LINK]: "var(--color-p-blue-60)",
-  [BUTTON_TYPES.SECONDARY_GHOST]: "var(--color-p-purple-60)",
-  [BUTTON_TYPES.SECONDARY_GHOST_DARK]: "var(--color-p-blue-15)"
-};
+const LOADER_SIZES = { sm: 24, md: 30, lg: 40 };
 const _sfc_main = defineComponent({
   name: "PBtn",
   components: {
@@ -67,7 +69,7 @@ const _sfc_main = defineComponent({
       type: String,
       default: "primary",
       validator(value) {
-        return Object.values(BUTTON_TYPES).includes(value);
+        return BUTTON_TYPES.includes(value);
       }
     },
     /**
@@ -87,7 +89,7 @@ const _sfc_main = defineComponent({
       type: String,
       default: "md",
       validator(value) {
-        return Object.keys(BUTTON_SIZES).includes(value);
+        return SIZES.includes(value);
       }
     },
     /**
@@ -115,13 +117,11 @@ const _sfc_main = defineComponent({
   },
   computed: {
     classes() {
-      return `${DEFAULT_CLASSES} ${BUTTON_SIZES[this.size]} ${BUTTON_CLASSES[this.type]}`;
+      const { button, loader } = btn({ type: this.type, size: this.size });
+      return { button: button(), loader: loader() };
     },
     loaderSize() {
       return Number(`${LOADER_SIZES[this.size]}`);
-    },
-    loaderColor() {
-      return LOADER_COLORS[this.type];
     }
   },
   methods: {
@@ -135,7 +135,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return typeof _ctx.to === "string" && _ctx.isExternalLink(_ctx.to) ? (openBlock(), createElementBlock("a", mergeProps({ key: 0 }, _ctx.$attrs, {
     href: _ctx.sanitizeUrl(_ctx.to),
     target: "_blank",
-    class: _ctx.classes,
+    class: _ctx.classes.button,
     disabled: !!_ctx.$attrs.disabled ? true : null,
     "aria-disabled": !!_ctx.$attrs.disabled
   }), [
@@ -145,7 +145,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     type: _ctx.to ? null : _ctx.nativeType,
     to: _ctx.to ? _ctx.to : null,
     "aria-selected": _ctx.selected,
-    class: _ctx.classes
+    class: _ctx.classes.button
   }, _ctx.$attrs, {
     disabled: !!_ctx.$attrs.disabled || _ctx.loading ? true : null,
     "aria-disabled": _ctx.$attrs.disabled
@@ -158,10 +158,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       ], 2),
       _ctx.loading ? (openBlock(), createBlock(_component_PRingLoader, {
         key: 0,
-        color: _ctx.loaderColor,
         size: _ctx.loaderSize,
-        class: "absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center"
-      }, null, 8, ["color", "size"])) : createCommentVNode("", true)
+        class: normalizeClass(_ctx.classes.loader)
+      }, null, 8, ["size", "class"])) : createCommentVNode("", true)
     ]),
     _: 3
   }, 16, ["type", "to", "aria-selected", "class", "disabled", "aria-disabled"]));

package/dist/es/p-input-search.js

@@ -1,5 +1,5 @@
+import { S as SIZES } from "./chunks/p-btn.types.js";
 import PInput from "./p-input.js";
-import { INPUT_SIZES } from "./inputClassesShared.js";
 import { defineComponent, resolveComponent, resolveDirective, createBlock, openBlock, mergeProps, withKeys, withCtx, withDirectives, createCommentVNode, createElementBlock, normalizeClass, createElementVNode } from "vue";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = defineComponent({
@@ -17,7 +17,7 @@ const _sfc_main = defineComponent({
       type: String,
       default: "md",
       validator(value) {
-        return Object.keys(INPUT_SIZES).includes(value);
+        return SIZES.includes(value);
       }
     },
     showEnterIcon: {
@@ -107,7 +107,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 16, ["modelValue", "size", "onKeydown"]);
 }
-const PInputSearch = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-2674242c"]]);
+const PInputSearch = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-78b7a6f8"]]);
 export {
   PInputSearch as default
 };

package/dist/es/useInputClasses.js

@@ -1,4 +1,4 @@
-import { INPUT_BASE, INPUT_SIZES, SPACING_PREFIX, SPACING_LEFT, SPACING_SUFFIX, SPACING_RIGHT, INPUT_ERROR, INPUT_NORMAL, LABEL_BASE, LABEL_SIZES, LABEL_REQUIRED, SELECT_BASE, SELECT_ARROW, SELECT_SIZES, TEXTAREA_BASE, ERROR_MSG } from "./inputClassesShared.js";
+import { inputClasses, selectClasses, textareaClasses } from "./inputClasses.js";
 import { ref, toRefs, computed } from "vue";
 const defaults = {
   size: ref("md"),
@@ -11,32 +11,33 @@ const defaults = {
 function useInputClasses(props) {
   const opts = { ...defaults, ...toRefs(props) };
   const { size, errorMsg, required, rounded, prefix, suffix } = opts;
-  const inputClasses = computed(() => {
-    const base = `${INPUT_BASE} ${INPUT_SIZES[size.value]}`;
-    const spacingLeft = prefix.value ? SPACING_PREFIX[size.value] : SPACING_LEFT[size.value];
-    const spacingRight = suffix.value ? SPACING_SUFFIX[size.value] : SPACING_RIGHT[size.value];
-    const res = `${base} ${spacingLeft} ${spacingRight} ${errorMsg.value ? INPUT_ERROR : INPUT_NORMAL}${rounded.value ? " rounded-full" : ""}`;
-    return res;
+  const allClasses = computed(() => {
+    const { input, label, errorMessage } = inputClasses({
+      size: size.value,
+      prefix: prefix.value,
+      suffix: suffix.value,
+      required: required.value,
+      error: !!errorMsg.value,
+      rounded: rounded.value
+    });
+    return { input: input(), label: label(), errorMessage: errorMessage() };
   });
-  const labelClasses = computed(() => {
-    const base = `${LABEL_BASE} ${LABEL_SIZES[size.value]}`;
-    const res = required.value ? `${base} ${LABEL_REQUIRED}` : base;
-    return res;
+  const inputClasses$1 = computed(() => allClasses.value.input);
+  const labelClasses = computed(() => allClasses.value.label);
+  const errorMsgClasses = computed(() => allClasses.value.errorMessage);
+  const selectClasses$1 = computed(() => {
+    const { input } = selectClasses({ size: size.value, required: required.value, error: !!errorMsg.value });
+    return input();
   });
-  const selectClasses = computed(() => {
-    const res = `${inputClasses.value.replace(` ${SPACING_RIGHT[size.value]}`, "")} ${SELECT_BASE} ${SELECT_ARROW} ${SELECT_SIZES[size.value]}`;
-    return res;
+  const textareaClasses$1 = computed(() => {
+    const { input } = textareaClasses({ required: required.value, error: !!errorMsg.value });
+    return input();
   });
-  const textareaClasses = computed(() => {
-    const res = `${inputClasses.value} ${TEXTAREA_BASE}`;
-    return res;
-  });
-  const errorMsgClasses = ref(ERROR_MSG);
   return {
-    inputClasses,
+    inputClasses: inputClasses$1,
     labelClasses,
-    selectClasses,
-    textareaClasses,
+    selectClasses: selectClasses$1,
+    textareaClasses: textareaClasses$1,
     errorMsgClasses
   };
 }

package/dist/squirrel/components/p-btn/p-btn.types.d.ts

@@ -1 +1,2 @@
-export type Size = 'sm' | 'md' | 'lg';
+export declare const SIZES: readonly ["sm", "md", "lg"];
+export type Size = (typeof SIZES)[number];