@resee-movies/nuxt-ux 0.7.1 → 0.8.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@resee-movies/nuxt-ux",
   "configKey": "ux",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.0"

package/dist/module.mjs

@@ -135,6 +135,7 @@ function importModules(nuxt) {
       "ProgressSpinner",
       "Select",
       "Tag",
+      "Textarea",
       "Toast",
       "ToggleSwitch",
       ...primeOptions?.includeComponents ?? []

package/dist/runtime/components/form/FormField.vue

@@ -30,6 +30,7 @@
           :message-id = "$field.error ? messageId : void 0"
           :disabled   = "isDisabled"
           :readonly   = "isReadonly"
+          :value      = "$field.value"
           :invalid    = "$field.invalid"
           :on-blur    = "$field.props.onBlur"
           :on-change  = "$field.props.onChange"

package/dist/runtime/components/form/FormField.vue.d.ts

@@ -25,6 +25,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFi
         messageId: any;
         disabled: any;
         readonly: any;
+        value: any;
         invalid: any;
         onBlur: any;
         onChange: any;

package/dist/runtime/components/form/FormFieldSelectButton.vue

@@ -4,8 +4,9 @@
       <slot name="label" />
     </template>
 
-    <template #default="{ labelId, messageId, invalid, disabled, readonly, onChange, onBlur }">
+    <template #default="{ value, labelId, messageId, invalid, disabled, readonly, onChange, onBlur }">
       <FormElementSelectButton
+        :value            = "value"
         :aria-labelledby  = "labelId"
         :aria-describedby = "messageId"
         :aria-invalid     = "invalid"

package/dist/runtime/components/form/FormFieldTextarea.vue

@@ -0,0 +1,58 @@
+<template>
+  <FormField v-bind="props" :validator="validatorFunction">
+    <template #label>
+      <slot name="label" />
+    </template>
+
+    <template #default="{ inputId, messageId, disabled, readonly }">
+      <PrimeInputTextarea
+        :id               = "inputId"
+        :placeholder      = "props.placeholder"
+        :rows             = "props.rows"
+        :auto-resize      = "props.autoResize"
+        :aria-describedby = "messageId"
+        :disabled         = "disabled"
+        :readonly         = "readonly"
+        :required         = "props.required"
+        :minlength        = "props.minLength"
+        :maxlength        = "props.maxLength"
+        class             = "input-control"
+      />
+    </template>
+  </FormField>
+</template>
+
+<script>
+import {} from "./FormField.vue";
+</script>
+
+<script setup>
+import PrimeInputTextarea from "primevue/textarea";
+import { computed } from "vue";
+import FormField from "./FormField.vue";
+import { createTextValidator } from "../../utils/validation";
+const props = defineProps({
+  placeholder: { type: String, required: false, default: void 0 },
+  rows: { type: [String, Number], required: false, default: 5 },
+  autoResize: { type: Boolean, required: false, default: true },
+  minLength: { type: [String, Number], required: false, default: void 0 },
+  maxLength: { type: [String, Number], required: false, default: void 0 },
+  name: { type: String, required: true },
+  label: { type: String, required: false },
+  is: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  fauxLabel: { type: Boolean, required: false },
+  labelSrOnly: { type: Boolean, required: false },
+  labelPosition: { type: String, required: false },
+  class: { type: null, required: false }
+});
+const validatorFunction = computed(() => {
+  return () => createTextValidator({
+    required: props.required,
+    minLength: props.minLength,
+    maxLength: props.maxLength
+  });
+});
+</script>

package/dist/runtime/components/form/FormFieldTextarea.vue.d.ts

@@ -0,0 +1,18 @@
+import { type FormFieldProps } from './FormField.vue.js';
+export interface FormFieldTextareaProps extends Omit<FormFieldProps, 'validator'> {
+    placeholder?: string;
+    rows?: string | number;
+    autoResize?: boolean;
+    minLength?: string | number;
+    maxLength?: string | number;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldTextareaProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldTextareaProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/form/FormFieldTurnstile.vue

@@ -0,0 +1,37 @@
+<template>
+  <FormField v-bind="props" :validator="() => createTextValidator({ required: true })">
+    <template #label>
+      <slot name="label" />
+    </template>
+
+    <template #default="{ inputName, onChange }">
+      <FormElementTurnstile
+        :sitekey             = "props.sitekey"
+        :response-field-name = "inputName"
+        :callback            = "(token) => onChange({ value: token })"
+      />
+    </template>
+  </FormField>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+import { createTextValidator } from "../../utils/validation";
+import FormField from "./FormField.vue";
+import FormElementTurnstile from "./element/FormElementTurnstile.vue";
+const props = defineProps({
+  sitekey: { type: String, required: true },
+  name: { type: String, required: false, default: "cf-turnstile-response" },
+  label: { type: String, required: false },
+  is: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  fauxLabel: { type: Boolean, required: false, default: true },
+  labelSrOnly: { type: Boolean, required: false, default: true },
+  labelPosition: { type: String, required: false },
+  class: { type: null, required: false }
+});
+</script>

package/dist/runtime/components/form/FormFieldTurnstile.vue.d.ts

@@ -0,0 +1,15 @@
+import type { FormFieldProps } from './FormField.vue.js';
+export interface FormFieldTurnstileProps extends Omit<FormFieldProps, 'validator' | 'required' | 'name'> {
+    sitekey: string;
+    name?: string;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldTurnstileProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldTurnstileProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/form/element/FormElementTurnstile.vue

@@ -0,0 +1,53 @@
+<template>
+  <div
+    :id    = "widgetId"
+    :class = "[
+  'w-fit',
+  props.size === 'compact' ? 'h-[140px]' : 'h-[65px]'
+]"
+  />
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+import { onUnmounted, useId } from "#imports";
+import { useCloudflareTurnstile } from "../../../composables/use-cloudflare-turnstile";
+const props = defineProps({
+  sitekey: { type: String, required: true },
+  action: { type: String, required: false },
+  cData: { type: String, required: false },
+  callback: { type: Function, required: false },
+  "error-callback": { type: Function, required: false },
+  execution: { type: String, required: false, default: "render" },
+  "expired-callback": { type: Function, required: false },
+  "before-interactive-callback": { type: Function, required: false },
+  "after-interactive-callback": { type: Function, required: false },
+  "unsupported-callback": { type: Function, required: false },
+  theme: { type: String, required: false, default: "auto" },
+  language: { type: String, required: false },
+  tabindex: { type: Number, required: false },
+  "timeout-callback": { type: Function, required: false },
+  "response-field": { type: Boolean, required: false },
+  "response-field-name": { type: String, required: false },
+  size: { type: String, required: false, default: "flexible" },
+  retry: { type: String, required: false, default: "auto" },
+  "retry-interval": { type: Number, required: false, default: 8e3 },
+  "refresh-expired": { type: String, required: false, default: "auto" },
+  "refresh-timeout": { type: String, required: false, default: "auto" },
+  appearance: { type: String, required: false, default: "always" },
+  "feedback-enabled": { type: Boolean, required: false }
+});
+const widgetId = useId();
+const { onReady } = useCloudflareTurnstile();
+let turnstile = void 0;
+onReady((ts) => {
+  ts.render(`#${widgetId}`, { ...props });
+  turnstile = ts;
+});
+onUnmounted(() => {
+  turnstile?.remove(`#${widgetId}`);
+});
+</script>

package/dist/runtime/components/form/element/FormElementTurnstile.vue.d.ts

@@ -0,0 +1,6 @@
+import type { TurnstileRenderOptions } from '../../../composables/use-cloudflare-turnstile.js';
+export interface FormFieldTurnstileProps extends TurnstileRenderOptions {
+}
+declare const __VLS_export: import("vue").DefineComponent<FormFieldTurnstileProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldTurnstileProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/composables/use-cloudflare-turnstile.d.ts

@@ -0,0 +1,55 @@
+declare global {
+    interface Window {
+        turnstile?: Turnstile;
+    }
+}
+/**
+ * Configurable options for Turnstile's `render` function.
+ * @see https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/widget-configurations/#complete-configuration-reference
+ */
+export interface TurnstileRenderOptions {
+    'sitekey': string;
+    'action'?: string;
+    'cData'?: string;
+    'callback'?: (token: string) => void;
+    'error-callback'?: () => void;
+    'execution'?: 'render' | 'execute';
+    'expired-callback'?: () => void;
+    'before-interactive-callback'?: () => void;
+    'after-interactive-callback'?: () => void;
+    'unsupported-callback'?: () => void;
+    'theme'?: 'auto' | 'light' | 'dark';
+    'language'?: string;
+    'tabindex'?: number;
+    'timeout-callback'?: () => void;
+    'response-field'?: boolean;
+    'response-field-name'?: string;
+    'size'?: 'normal' | 'flexible' | 'compact';
+    'retry'?: 'auto' | 'never';
+    'retry-interval'?: number;
+    'refresh-expired'?: 'auto' | 'manual' | 'never';
+    'refresh-timeout'?: 'auto' | 'manual' | 'never';
+    'appearance'?: 'always' | 'execute' | 'interaction-only';
+    'feedback-enabled'?: boolean;
+}
+/**
+ * The Cloudflare Turnstile global instance.
+ * @see https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#explicit-rendering
+ */
+export interface Turnstile {
+    render: (widgetId: string, options: TurnstileRenderOptions) => void;
+    reset: (widgetId: string) => void;
+    remove: (widgetId: string) => void;
+    getResponse: (widgetId: string) => string;
+}
+/**
+ * The return type of the {@link useCloudflareTurnstile} composable.
+ */
+export interface UseCloudflareTurnstileReturn {
+    onReady: (callback: (turnstile: Turnstile) => void) => void;
+    onError: (callback: (error: unknown) => void) => void;
+}
+/**
+ * Utilize Cloudflare's Turnstile widget via the returned `onReady` and `onError` methods.
+ */
+export declare function useCloudflareTurnstile(): UseCloudflareTurnstileReturn;

package/dist/runtime/composables/use-cloudflare-turnstile.js

@@ -0,0 +1,62 @@
+import { useHead } from "#imports";
+export function useCloudflareTurnstile() {
+  if (import.meta.server) {
+    useHead({
+      link: [{ href: "https://challenges.cloudflare.com", rel: "preconnect" }]
+    });
+  }
+  const onReady = function onTurnstileReady(callback) {
+    if (import.meta.client) {
+      readyTurnstile().then((turnstile) => callback(turnstile));
+    }
+  };
+  const onError = function onTurnstileError(callback) {
+    if (import.meta.client) {
+      readyTurnstile().catch((e) => callback(e));
+    }
+  };
+  return { onReady, onError };
+}
+let pending = void 0;
+function readyTurnstile() {
+  if (window.turnstile) {
+    return Promise.resolve(window.turnstile);
+  }
+  if (pending) {
+    return pending;
+  }
+  pending = new Promise((resolve, reject) => {
+    const onScriptLoad = () => {
+      pending = void 0;
+      try {
+        if (window.turnstile) {
+          return resolve(window.turnstile);
+        }
+        reject(new Error("Turnstile script loaded, but global is not available."));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    const onScriptError = (e) => {
+      pending = void 0;
+      reject(e);
+    };
+    try {
+      useHead({
+        script: [{
+          src: "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit",
+          async: true,
+          defer: true,
+          fetchpriority: "low",
+          crossorigin: "anonymous",
+          referrerpolicy: "no-referrer",
+          onload: onScriptLoad,
+          onerror: onScriptError
+        }]
+      });
+    } catch (e) {
+      reject(e);
+    }
+  });
+  return pending;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@resee-movies/nuxt-ux",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "The next-gen user experience library for ReSee Movies - currently in development. ",
   "repository": {
     "url": "https://github.com/ReSee-Movies/nuxt-ux.git"