@xy-planning-network/trees 0.11.0 → 0.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",
@@ -54,7 +54,7 @@
     "unplugin-vue-components": "^0.27.4",
     "unplugin-vue-markdown": "^0.25.2",
     "vite": "^5.4.10",
-    "vue-tsc": "^2.1.8"
+    "vue-tsc": "^2.1.10"
   },
   "dependencies": {
     "@floating-ui/vue": "^1.0.1",

package/src/index.css

@@ -77,6 +77,18 @@
     @apply inline-flex justify-center items-center px-5 py-2.5 border border-transparent text-base font-display font-semibold rounded-3xl shadow-sm text-white bg-xy-blue-600 hover:bg-xy-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:bg-xy-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors ease-linear duration-300;
   }
 
+  .xy-btn-alt-sm {
+    @apply inline-flex justify-center items-center px-2.5 py-1.5 border border-transparent text-xs font-display font-semibold rounded-3xl shadow-sm text-xy-black bg-xy-green-200 hover:bg-xy-green-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-green-100 disabled:bg-xy-green-200 disabled:opacity-50 disabled:cursor-not-allowed transition-colors ease-linear duration-300;
+  }
+
+  .xy-btn-alt {
+    @apply inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-display font-semibold rounded-3xl shadow-sm text-xy-black bg-xy-green-200 hover:bg-xy-green-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-green-100 disabled:bg-xy-green-200 disabled:opacity-50 disabled:cursor-not-allowed transition-colors ease-linear duration-300;
+  }
+
+  .xy-btn-alt-lg {
+    @apply inline-flex justify-center items-center px-5 py-2.5 border border-transparent text-base font-display font-semibold rounded-3xl shadow-sm text-xy-black bg-xy-green-200 hover:bg-xy-green-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-green-100 disabled:bg-xy-green-200 disabled:opacity-50 disabled:cursor-not-allowed transition-colors ease-linear duration-300;
+  }
+
   /* NOTE(spk): including .xy-btn-red alias for backwards compatibility */
   .xy-btn-danger-sm,
   .xy-btn-red-sm {
@@ -105,6 +117,18 @@
     @apply inline-flex justify-center items-center px-5 py-2.5 border border-transparent text-base font-display font-semibold rounded-3xl shadow-none text-neutral-800 bg-transparent hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:bg-transparent disabled:text-neutral-600 disabled:cursor-not-allowed transition-colors ease-linear duration-300;
   }
 
+  .xy-btn-neutral-inverse-sm {
+    @apply inline-flex justify-center items-center px-2.5 py-1.5 border border-transparent text-xs font-display font-semibold rounded-3xl shadow-none text-neutral-800 bg-white hover:bg-white/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:bg-white/90 disabled:text-neutral-700 disabled:cursor-not-allowed transition-colors ease-linear duration-300;
+  }
+
+  .xy-btn-neutral-inverse {
+    @apply inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-display font-semibold rounded-3xl shadow-none text-neutral-800 bg-white hover:bg-white/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:bg-white/90 disabled:disabled:text-neutral-700 disabled:cursor-not-allowed transition-colors ease-linear duration-300;
+  }
+
+  .xy-btn-neutral-inverse-lg {
+    @apply inline-flex justify-center items-center px-5 py-2.5 border border-transparent text-base font-display font-semibold rounded-3xl shadow-none text-neutral-800 bg-white hover:bg-white/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:bg-white/90 disabled:disabled:text-neutral-700 disabled:cursor-not-allowed transition-colors ease-linear duration-300;
+  }
+
   /* NOTE(spk): always consider the relative box-sizing between buttons with solid backgrounds and full borders vs secondary styles as they will commonly be laid out next to each other */
   /* NOTE(spk): there's no way to round a ring or outline in a focus state without rounding the entire button.  Avoid this as it causes odd shapes on the bottom border and using content hacks aren't worth the trouble */
   .xy-btn-secondary-sm {
@@ -155,11 +179,6 @@
     @apply inline-flex justify-center items-center py-2.5 border-b-2 border-b-red-700 text-base font-display font-semibold shadow-none text-neutral-800 hover:text-red-700 hover:border-b-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:text-neutral-800 disabled:border-b-red-700 disabled:opacity-70 disabled:cursor-not-allowed transition-colors ease-linear duration-150;
   }
 
-  /* Deprecated */
-  .xy-btn-white {
-    @apply inline-flex justify-center items-center px-4 py-2 border border-xy-blue shadow-sm text-sm font-semibold rounded-3xl text-xy-blue bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:opacity-50 disabled:cursor-not-allowed;
-  }
-
   /* Header classes */
   .h1 {
     @apply text-3xl leading-9 font-semibold;

package/src/lib-components/forms/BaseInput.vue

@@ -9,6 +9,7 @@ import {
   emailPattern,
   looseToNumber,
   phonePattern,
+  urlPattern,
 } from "@/composables/forms"
 import type { TextLikeInput } from "@/composables/forms"
 import { computed, useTemplateRef } from "vue"
@@ -61,6 +62,10 @@ const typeAttributes = computed(() => {
       return {
         pattern: phonePattern,
       }
+    case "url":
+      return {
+        pattern: urlPattern,
+      }
     default:
       return {}
   }

package/types/composables/forms.d.ts

@@ -110,6 +110,19 @@ export declare const emailPattern: string;
  * used with input type="tel" in the pattern attribute for html5 validation
  */
 export declare const phonePattern: string;
+/**
+ * url validation regex pattern
+ * used with input type="url" in the pattern attribute for html5
+ *
+ * The pattern is conservative and focuses on ensuring the protocol is valid
+ * and the remainder of the url does not include empty spaces.  If additional protocols
+ * need to be supported, they can be added to the first group (?:https|http|ftp).
+ *
+ * Reference: https://regex101.com/r/P5dlas/3
+ *
+ * NOTE(spk): not all JavaScript regular expression characters are not supported in input patterns.
+ */
+export declare const urlPattern: string;
 /**
  * This is used for the .number modifier in v-model
  */

package/types/entry.d.ts

@@ -1,7 +1,7 @@
 import { Plugin } from "vue";
 import BaseAPI, { isHttpCancel, isHttpError, setBaseAPIDefaults } from "./api/base";
 import type { HttpPromise, HttpError, QueryParams, ReqOptions, ReqPayload, TrailsPromise, TrailsPromisePaged, TrailsResp, TrailsRespPaged } from "./api/client";
-import { emailPattern, looseToNumber, phonePattern, textInputTypes, useInputField } from "./composables/forms";
+import { emailPattern, looseToNumber, phonePattern, urlPattern, textInputTypes, useInputField } from "./composables/forms";
 import { debounce as debounceFn, debounceLeading } from "./helpers/Debounce";
 import { throttle as throttleFn } from "./helpers/Throttle";
 declare const install: Exclude<Plugin["install"], undefined>;
@@ -11,5 +11,5 @@ export * from "./lib-components/index";
 export { BaseAPI, isHttpCancel, isHttpError, setBaseAPIDefaults };
 export type { HttpPromise, HttpError, QueryParams, ReqOptions, ReqPayload, TrailsPromise, TrailsPromisePaged, TrailsResp, TrailsRespPaged, };
 export type * from "./composables/forms";
-export { emailPattern, looseToNumber, phonePattern, textInputTypes, useInputField, };
+export { emailPattern, looseToNumber, phonePattern, urlPattern, textInputTypes, useInputField, };
 export { debounceFn, debounceLeading, throttleFn };

package/types/lib-components/forms/RadioCards.vue.d.ts

@@ -13,7 +13,7 @@ declare const _default: <T extends InputOption>(__VLS_props: {
             active: boolean;
             checked: boolean;
             disabled: boolean;
-            option: import("vue").Reactive<T>;
+            option: T;
         }): any;
     };
     attrs: any;
@@ -35,7 +35,7 @@ declare const _default: <T extends InputOption>(__VLS_props: {
             active: boolean;
             checked: boolean;
             disabled: boolean;
-            option: import("vue").Reactive<T>;
+            option: T;
         }): any;
     };
     emit: (evt: "update:modelValue", value: string | number | null | undefined) => void;
@@ -59,7 +59,7 @@ declare const _default: <T extends InputOption>(__VLS_props: {
                 active: boolean;
                 checked: boolean;
                 disabled: boolean;
-                option: import("vue").Reactive<T>;
+                option: T;
             }): any;
         };
         emit: (evt: "update:modelValue", value: string | number | null | undefined) => void;