@typlog/ui 0.15.0 → 0.16.0

package/addons.css

@@ -1,40 +1,42 @@
 
+@layer components {
 .ui-SocialButton:where(.r-variant-classic) {
-  background-color: var(--social-button-background-color);
-  color: var(--social-button-text-color);
-  box-shadow: 0px 1px 2px 0px #0A0D120D, 0px -2px 0px 0px #0A0D120D inset, 0px 0px 0px 1px #0A0D122E inset;
-  --social-button-background-color: black;
-  --social-button-text-color: white;
-  --social-button-hover-filter: brightness(0.92) saturate(1.1);
+    background-color: var(--social-button-background-color);
+    color: var(--social-button-text-color);
+    box-shadow: 0px 1px 2px 0px #0A0D120D, 0px -2px 0px 0px #0A0D120D inset, 0px 0px 0px 1px #0A0D122E inset;
+    --social-button-background-color: black;
+    --social-button-text-color: white;
+    --social-button-hover-filter: brightness(0.92) saturate(1.1);
 }
 @media (hover: hover) {
 .ui-SocialButton:where(:hover) {
-    filter: var(--social-button-hover-filter);
+      filter: var(--social-button-hover-filter);
 }
 }
 .ui-SocialButton:where(.r-brand-google) {
-  --social-button-background-color: var(--color-background);
-  --social-button-text-color: var(--gray-12);
+    --social-button-background-color: var(--color-background);
+    --social-button-text-color: var(--gray-12);
 }
 .ui-SocialButton:where(.r-brand-facebook) {
-  --social-button-background-color: #1877F2;
+    --social-button-background-color: #1877F2;
 }
 .ui-SocialButton:where(.r-brand-github) {
-  --social-button-background-color: #333;
+    --social-button-background-color: #333;
 }
 .ui-SocialButton:where(.r-variant-classic):where(.r-brand-slack) {
-  --social-button-background-color: #611f69;
+    --social-button-background-color: #611f69;
 }
 .ui-SocialButton:where(.r-variant-classic):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: 2px;
+    outline: 2px solid var(--focus-8);
+    outline-offset: 2px;
 }
 .ui-SocialButton:where(.r-variant-classic):where(:active) {
-  box-shadow: var(--shadow-1);
+    box-shadow: var(--shadow-1);
 }
 .ui-SocialButton:where(.r-variant-classic):where([data-disabled]) {
-  color: var(--gray-a10);
-  background-color: var(--gray-a2);
+    color: var(--gray-a10);
+    background-color: var(--gray-a2);
+}
 }
 
 @layer components {
@@ -248,38 +250,40 @@
     color: var(--gray-a11);
     text-align: center;
 }
-}
 @container icon-collection (min-width: 768px) {
 .ui-IconCollectionToolbar {
-    flex-direction: row;
-    align-items: center;
+      flex-direction: row;
+      align-items: center;
 }
 .ui-IconCollectionFilter {
-    max-width: 28rem;
+      max-width: 28rem;
 }
 .ui-IconCollectionCards {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+      grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 }
 @container icon-collection (min-width: 1024px) {
 .ui-IconCollectionCards {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+      grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 }
 @container icon-collection (min-width: 1280px) {
 .ui-IconCollectionCards {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+}
 }
 }
 
+@layer components {
 .ui-Turnstile {
-  background: var(--gray-a3);
+    background: var(--gray-a3);
 }
 .ui-Turnstile:where(.r-size-normal) {
-  width: 300px;
-  height: 65px;
+    width: 300px;
+    height: 65px;
 }
 .ui-Turnstile:where(.r-size-compact) {
-  width: 150px;
-  height: 140px;
+    width: 150px;
+    height: 140px;
+}
 }

package/addons.d.ts

@@ -60,7 +60,11 @@ declare const __VLS_export_3: __VLS_WithSlots_2< DefineComponent<IconGridProps,
     'header-search'?: (props: {}) => any;
 }>;
 
-declare const __VLS_export_4: DefineComponent<TurnstileProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+declare const __VLS_export_4: DefineComponent<TurnstileProps, {
+    render: () => Promise<void>;
+    reset: () => void;
+    remove: () => void;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     "update:modelValue": (args_0: string) => any;
 }, string, PublicProps, Readonly<TurnstileProps> & Readonly<{
     "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
@@ -198,7 +202,7 @@ export declare interface IconifyCollectionItem {
     [key: string]: unknown;
 }
 
-declare type RadiusType = 'none' | 'small' | 'medium' | 'large' | 'full'
+declare type RadiusType = 'none' | 'small' | 'medium' | 'large' | 'full';
 
 export declare const SocialButton: typeof __VLS_export;
 
@@ -232,7 +236,7 @@ export { }
 
 declare global {
     interface Window {
-        turnstile: any;
-        [turnstileLoadFunction]: any;
+        turnstile?: TurnstileApi;
+        cfTurnstileOnLoad?: () => void;
     }
 }

package/addons.js

@@ -1720,10 +1720,31 @@ var IconCollection_default = /* @__PURE__ */ defineComponent({
 //#region src/addons/turnstile/Turnstile.vue?vue&type=script&setup=true&lang.ts
 var turnstileSrc = "https://challenges.cloudflare.com/turnstile/v0/api.js";
 var turnstileLoadFunction = "cfTurnstileOnLoad";
-var turnstileState = typeof window !== "undefined" ? window.turnstile !== void 0 ? "ready" : "unloaded" : "unloaded";
-var turnstileLoad;
-var widgetId;
-var resetTimeout;
+var turnstileLoadPromise;
+var loadTurnstile = () => {
+	if (typeof window === "undefined") return Promise.reject(/* @__PURE__ */ new Error("Turnstile is only available in a browser."));
+	if (window.turnstile) return Promise.resolve();
+	if (turnstileLoadPromise) return turnstileLoadPromise;
+	turnstileLoadPromise = new Promise((resolve, reject) => {
+		const onLoad = () => {
+			if (window.turnstile) resolve();
+			else reject(/* @__PURE__ */ new Error("Turnstile loaded without exposing its API."));
+		};
+		window[turnstileLoadFunction] = onLoad;
+		const script = document.createElement("script");
+		script.src = `${turnstileSrc}?onload=${turnstileLoadFunction}&render=explicit`;
+		script.async = true;
+		script.addEventListener("error", () => {
+			reject(/* @__PURE__ */ new Error("Failed to load Turnstile."));
+		}, { once: true });
+		document.head.appendChild(script);
+	}).catch((error) => {
+		turnstileLoadPromise = void 0;
+		if (window.cfTurnstileOnLoad) delete window.cfTurnstileOnLoad;
+		throw error;
+	});
+	return turnstileLoadPromise;
+};
 //#endregion
 //#region src/addons/turnstile/Turnstile.vue
 var Turnstile_default = /* @__PURE__ */ defineComponent({
@@ -1742,29 +1763,48 @@ var Turnstile_default = /* @__PURE__ */ defineComponent({
 		}
 	},
 	emits: ["update:modelValue"],
-	setup(__props, { emit: __emit }) {
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
 		const element = useTemplateRef("element");
+		const mounted = ref(false);
+		let widgetId;
+		let resetTimeout;
+		const clearResetTimeout = () => {
+			if (resetTimeout !== void 0) {
+				clearTimeout(resetTimeout);
+				resetTimeout = void 0;
+			}
+		};
 		const resetTurnstile = () => {
-			if (window.turnstile) {
+			if (widgetId !== void 0 && window.turnstile) {
+				clearResetTimeout();
 				emit("update:modelValue", "");
-				window.turnstile.reset();
+				window.turnstile.reset(widgetId);
 			}
 		};
 		const removeTurnstile = () => {
-			if (widgetId) {
-				window.turnstile.remove(widgetId);
+			clearResetTimeout();
+			if (widgetId !== void 0) {
+				if (window.turnstile) window.turnstile.remove(widgetId);
 				widgetId = void 0;
 			}
 		};
 		const callbackTurnstile = (token) => {
 			emit("update:modelValue", token);
+			clearResetTimeout();
 			resetTimeout = setTimeout(() => {
 				resetTurnstile();
 			}, props.resetInterval);
 		};
-		const renderTurnstile = () => {
+		const renderTurnstile = async () => {
+			if (!mounted.value || widgetId !== void 0 || !element.value) return;
+			if (!window.turnstile) try {
+				await loadTurnstile();
+			} catch {
+				return;
+			}
+			if (!mounted.value || widgetId !== void 0 || !element.value || !window.turnstile) return;
 			widgetId = window.turnstile.render(element.value, {
 				sitekey: props.sitekey,
 				theme: props.theme,
@@ -1774,38 +1814,18 @@ var Turnstile_default = /* @__PURE__ */ defineComponent({
 				appearance: props.appearance
 			});
 		};
-		onMounted(async () => {
-			const turnstileLoadPromise = new Promise((resolve, reject) => {
-				turnstileLoad = {
-					resolve,
-					reject
-				};
-				if (turnstileState === "ready") resolve(void 0);
-			});
-			window[turnstileLoadFunction] = () => {
-				turnstileLoad.resolve();
-				turnstileState = "ready";
-			};
-			const ensureTurnstile = () => {
-				if (turnstileState === "unloaded") {
-					turnstileState = "loading";
-					const url = `${turnstileSrc}?onload=${turnstileLoadFunction}&render=explicit`;
-					const script = document.createElement("script");
-					script.src = url;
-					script.async = true;
-					script.addEventListener("error", () => {
-						turnstileLoad.reject("Failed to load Turnstile.");
-					});
-					document.head.appendChild(script);
-				}
-				return turnstileLoadPromise;
-			};
-			await ensureTurnstile();
+		__expose({
+			render: renderTurnstile,
+			reset: resetTurnstile,
+			remove: removeTurnstile
+		});
+		onMounted(() => {
+			mounted.value = true;
 			if (props.renderOnMount) renderTurnstile();
 		});
 		onBeforeUnmount(() => {
+			mounted.value = false;
 			removeTurnstile();
-			clearTimeout(resetTimeout);
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {

package/charts.d.ts

@@ -227,7 +227,7 @@ export { }
 
 declare global {
     interface Window {
-        turnstile: any;
-        [turnstileLoadFunction]: any;
+        turnstile?: TurnstileApi;
+        cfTurnstileOnLoad?: () => void;
     }
 }