@resee-movies/nuxt-ux 0.6.0 → 0.7.1

package/dist/module.json

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

package/dist/runtime/components/Image.vue

@@ -145,5 +145,5 @@ const altText = computed(() => {
 </script>
 
 <style scoped>
-@reference "tailwindcss";.image{background-color:#fff;max-width:-moz-fit-content;max-width:fit-content;overflow:clip;position:relative;width:100%;@variant dark{background-color:#000}}.image.bordered{border:2px solid var(--color-global-background-accent)}.image.beveled{border-bottom-left-radius:var(--radius-xl);border-top-right-radius:var(--radius-xl)}.image.raised{box-shadow:var(--shadow-heavy)}.image.glass:after{background-image:linear-gradient(110deg,transparent 25%,hsla(0,0%,100%,.15) 80%,transparent);content:var(--zero-width-space);inset:0;position:absolute}.image .icon{color:var(--color-global-background-accent);left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%)}
+@reference "tailwindcss";.image{background-color:#fff;max-width:-moz-fit-content;max-width:fit-content;overflow:clip;position:relative;width:100%;@variant dark{background-color:#000}}.image.bordered{border:2px solid var(--color-global-background-accent)}.image.beveled{border-bottom-left-radius:var(--radius-xl);border-top-right-radius:var(--radius-xl)}.image.raised{box-shadow:var(--shadow-heavy)}.image.glass:after{background-image:linear-gradient(110deg,transparent 25%,hsla(0,0%,100%,.15) 80%,transparent);content:var(--zero-width-space);inset:0;position:absolute}.image :deep(.icon){color:var(--color-global-background-accent);left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%)}
 </style>

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

@@ -7,7 +7,7 @@
     :validate-on-submit       = "true"
     :validate-on-value-update = "true"
     :validate-on-blur         = "false"
-    :initial-values           = "props.initialValues"
+    :initial-values           = "values"
     :aria-disabled            = "props.disabled"
     @submit                   = "handleFormSubmit"
   >
@@ -23,38 +23,44 @@ export * from "../../types/form";
 import PrimeForm, {} from "@primevue/forms/form";
 import { toNonNullableArray } from "@resee-movies/utilities/arrays/to-non-nullable-array";
 import { isPromiseLike } from "@resee-movies/utilities/objects/is-promise-like";
-import { syncRefs, watchDebounced } from "@vueuse/core";
-import { useTemplateRef, watchEffect } from "vue";
+import { syncRefs, useDebounceFn } from "@vueuse/core";
+import { useTemplateRef } from "vue";
+import { useReactiveObjectsSync } from "../../composables/use-reactive-objects-sync";
 import { provideFormInstance, getValuesFromFormState } from "../../utils/form";
 const props = defineProps({
   disabled: { type: Boolean, required: false },
-  initialValues: { type: Object, required: false },
   onSubmit: { type: [Function, Array], required: false },
-  onChange: { type: Function, required: false },
-  onChangeDebounce: { type: Number, required: false, default: 32 }
+  onChange: { type: Function, required: false }
 });
+const form = useTemplateRef("form");
+const values = defineModel("values", { type: null, ...{ default: void 0 } });
 defineEmits(["submit", "change"]);
 const formInstance = provideFormInstance();
 syncRefs(() => props.disabled, formInstance.isDisabled);
-const form = useTemplateRef("form");
-let oldValues = void 0;
-const changeHandles = watchDebounced(
-  () => form.value?.states,
-  (newState) => {
-    const newValues = newState ? getValuesFromFormState(newState) : null;
-    const stringify = JSON.stringify(newValues);
-    if (stringify !== oldValues) {
-      props.onChange?.(newValues);
-      oldValues = stringify;
+const emitOnChange = useDebounceFn(() => {
+  const state = form.value?.states;
+  if (state) {
+    props.onChange?.(getValuesFromFormState(state));
+  }
+}, 1);
+useReactiveObjectsSync({
+  left: () => form.value?.states,
+  right: () => values.value,
+  keySource: "left",
+  leftOptions: {
+    onChange: () => emitOnChange(),
+    getter(obj, key) {
+      return obj[key]?.value;
+    },
+    setter(obj, key, val) {
+      if (obj[key]) {
+        obj[key].value = val ?? null;
+      }
     }
   },
-  {
-    debounce: props.onChangeDebounce,
-    deep: 2
+  rightOptions: {
+    onChange: () => emitOnChange()
   }
-);
-watchEffect(() => {
-  changeHandles[props.onChange ? "resume" : "pause"]();
 });
 async function handleFormSubmit(event) {
   if (props.disabled) {
@@ -66,8 +72,8 @@ async function handleFormSubmit(event) {
   }
   if (props.onSubmit) {
     const handlers = toNonNullableArray(props.onSubmit);
-    const values = getValuesFromFormState(event.states);
-    const newEvent = { ...event, values };
+    const values2 = getValuesFromFormState(event.states);
+    const newEvent = { ...event, values: values2 };
     const results = handlers.map((handler) => handler(newEvent));
     if (!!results.find((result) => isPromiseLike(result))) {
       formInstance.isSubmitting.value = true;

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

@@ -2,16 +2,16 @@ import type { FormValues, FormSubmitHandler, FormSubmitEvent } from '../../types
 export * from '../../types/form.js';
 export interface FormProps<T extends FormValues = FormValues> {
     disabled?: boolean;
-    initialValues?: Record<string, unknown>;
     onSubmit?: FormSubmitHandler<T> | FormSubmitHandler<T>[];
     onChange?: (values: T | null) => void;
-    onChangeDebounce?: number;
 }
 declare const __VLS_export: <T extends FormValues>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<FormProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<{
+    props: __VLS_PrettifyLocal<(FormProps<T> & {
+        values?: Partial<T> | undefined;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<{
         (e: "submit", evt: FormSubmitEvent<T>): (void | Promise<void>);
         (e: "change", values: T): void;
-    }>>> & import("vue").PublicProps & (typeof globalThis extends {
+    } & ((evt: "update:values", value: Partial<T> | undefined) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -24,7 +24,7 @@ declare const __VLS_export: <T extends FormValues>(__VLS_props: NonNullable<Awai
     emit: {
         (e: "submit", evt: FormSubmitEvent<T>): (void | Promise<void>);
         (e: "change", values: T): void;
-    };
+    } & ((evt: "update:values", value: Partial<T> | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,11 +1,10 @@
 <template>
   <PrimeFormField
-    v-slot         = "$field"
-    :as            = "props.is"
-    :name          = "props.name"
-    :resolver      = "validatorFunction"
-    :initial-value = "props.initialValue"
-    :class         = "['input-field', props.class, { disabled: isDisabled, readonly: isReadonly, required: props.required }]"
+    v-slot    = "$field"
+    :as       = "props.is"
+    :name     = "props.name"
+    :resolver = "validatorFunction"
+    :class    = "['input-field', props.class, { disabled: isDisabled, readonly: isReadonly, required: props.required }]"
   >
     <FormLabelInputPair
       :input-id       = "inputId"
@@ -67,7 +66,6 @@ const props = defineProps({
   name: { type: String, required: true },
   label: { type: String, required: false, default: void 0 },
   is: { type: String, required: false, default: "div" },
-  initialValue: { type: null, required: false, default: void 0 },
   required: { type: Boolean, required: false, default: false },
   disabled: { type: Boolean, required: false, default: false },
   readonly: { type: Boolean, required: false, default: false },

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

@@ -5,7 +5,6 @@ export interface FormFieldProps {
     name: string;
     label?: string;
     is?: HintedString<'div'>;
-    initialValue?: unknown;
     required?: boolean;
     disabled?: boolean;
     readonly?: boolean;

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

@@ -41,7 +41,6 @@ const props = defineProps({
   name: { type: String, required: true },
   label: { type: String, required: false },
   is: { type: String, required: false },
-  initialValue: { type: null, required: false, default: () => false },
   required: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },

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

@@ -64,7 +64,6 @@ const props = defineProps({
   name: { type: String, required: true },
   label: { type: String, required: false },
   is: { type: String, required: false },
-  initialValue: { type: null, required: false },
   required: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },

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

@@ -44,7 +44,6 @@ const props = defineProps({
   name: { type: String, required: true },
   label: { type: String, required: false },
   is: { type: String, required: false },
-  initialValue: { type: null, required: false },
   required: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },

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

@@ -36,7 +36,6 @@ const props = defineProps({
   name: { type: String, required: true },
   label: { type: String, required: false },
   is: { type: String, required: false },
-  initialValue: { type: null, required: false },
   required: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },

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

@@ -32,7 +32,6 @@ const props = defineProps({
   name: { type: String, required: true },
   label: { type: String, required: false },
   is: { type: String, required: false },
-  initialValue: { type: null, required: false, default: () => false },
   required: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },

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

@@ -88,9 +88,9 @@ function getSelectedOptionIndex(option) {
   const equalityKey = props.optionValue ? void 0 : props.optionDataKey;
   const optionValue = getOptionValue(option);
   if (Array.isArray(value.value)) {
-    return value.value.findIndex((entry) => equals(getOptionValue(entry), optionValue, equalityKey));
+    return value.value.findIndex((entry) => equals(entry, optionValue, equalityKey));
   }
-  return equals(getOptionValue(value.value), optionValue, equalityKey) ? 0 : -1;
+  return equals(value.value, optionValue, equalityKey) ? 0 : -1;
 }
 function handleToggleChange(option, pressed) {
   if (props.multiple) {

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

@@ -21,8 +21,10 @@
     checkbox-icon       = "i-ph-check-bold"
   >
     <template #value="{ value, placeholder }">
-      <template v-if="value">
-        {{ toLabel(value) }}
+      <template v-if="value && (Array.isArray(value) ? value.length : true)">
+        <slot name="label">
+          {{ toLabel(value) || "\u200B" }}
+        </slot>
       </template>
 
       <span v-else class="placeholder">

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

@@ -9,6 +9,8 @@ export interface FormElementSelectOptionsProps extends Omit<PrimeSelectProps, 'i
     selectionLimit?: string | number;
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormElementSelectOptionsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormElementSelectOptionsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?: (props: {}) => any;
+} & {
     option?: (props: {
         option: any;
         selected: any;

package/dist/runtime/composables/use-reactive-objects-sync.d.ts

@@ -0,0 +1,18 @@
+import { type MaybeRefOrGetter } from 'vue';
+export type SyncObject = Record<string | number | symbol, unknown>;
+export type KeyOf<S extends SyncObject> = keyof S;
+export type Getter<S extends SyncObject> = <R>(obj: S, key: KeyOf<S>) => R;
+export type Setter<S extends SyncObject> = (obj: S, key: KeyOf<S>, value: unknown) => void;
+export type ComputedReadWriteOptions<S extends SyncObject> = {
+    getter?: Getter<S>;
+    setter?: Setter<S>;
+    onChange?: (key: KeyOf<S>, value: unknown) => void;
+};
+export type UseReactiveObjectsSyncOptions<L extends SyncObject, R extends SyncObject> = {
+    left: MaybeRefOrGetter<L | undefined>;
+    right: MaybeRefOrGetter<R | undefined>;
+    keySource?: 'left' | 'right' | (KeyOf<L> | KeyOf<R>)[];
+    leftOptions?: ComputedReadWriteOptions<L>;
+    rightOptions?: ComputedReadWriteOptions<R>;
+};
+export declare function useReactiveObjectsSync<L extends SyncObject, R extends SyncObject>(options: UseReactiveObjectsSyncOptions<L, R>): void;

package/dist/runtime/composables/use-reactive-objects-sync.js

@@ -0,0 +1,73 @@
+import { syncRef } from "@vueuse/core";
+import {
+  toValue,
+  watchEffect,
+  watch,
+  computed,
+  shallowRef
+} from "vue";
+export function useReactiveObjectsSync(options) {
+  const { left, right } = options;
+  const watchKeys = aggregateKeys(options);
+  const syncHandle = /* @__PURE__ */ new Map();
+  watch(watchKeys, (newKeys, oldKeys) => {
+    for (const key of oldKeys.difference(newKeys)) {
+      const handle = syncHandle.get(key);
+      if (handle) {
+        syncHandle.delete(key);
+        handle.stopSync();
+      }
+    }
+    for (const key of newKeys) {
+      if (syncHandle.has(key)) {
+        continue;
+      }
+      const leftRef = computedReadWrite(left, key, options?.leftOptions);
+      const rightRef = computedReadWrite(right, key, options?.rightOptions);
+      const stopSync = syncRef(leftRef, rightRef);
+      syncHandle.set(key, { leftRef, rightRef, stopSync });
+    }
+  });
+}
+function objectKeysRef(source) {
+  const keys = shallowRef([]);
+  watchEffect(() => {
+    const value = toValue(source);
+    keys.value = value ? Object.keys(value) : [];
+  });
+  return keys;
+}
+function aggregateKeys(options) {
+  const leftKeys = !options.keySource || options.keySource === "left" ? objectKeysRef(options.left) : void 0;
+  const rightKeys = !options.keySource || options.keySource === "right" ? objectKeysRef(options.right) : void 0;
+  return computed(() => {
+    if (Array.isArray(options.keySource)) {
+      return new Set(options.keySource);
+    }
+    return /* @__PURE__ */ new Set(
+      [...leftKeys?.value ?? [], ...rightKeys?.value ?? []]
+    );
+  });
+}
+function computedReadWrite(source, key, options) {
+  return computed({
+    get() {
+      const target = toValue(source);
+      if (target) {
+        return options?.getter ? options.getter(target, key) : target[key];
+      }
+      return void 0;
+    },
+    set(val) {
+      const target = toValue(source);
+      if (target) {
+        if (options?.setter) {
+          options.setter(target, key, val);
+        } else {
+          target[key] = val;
+        }
+        options?.onChange?.(key, val);
+      }
+    }
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@resee-movies/nuxt-ux",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "The next-gen user experience library for ReSee Movies - currently in development. ",
   "repository": {
     "url": "https://github.com/ReSee-Movies/nuxt-ux.git"
@@ -35,7 +35,7 @@
     "dist"
   ],
   "scripts": {
-    "dev": "npm run dev:prepare && nuxi dev playground",
+    "dev": "npm run dev:prepare && nuxi dev playground --local --port 3003",
     "dev:preview": "npm run dev:build && nuxi preview playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",