@hybridly/vue 0.7.7 → 0.7.9

package/dist/index.cjs

@@ -412,6 +412,16 @@ function viewTransition() {
   };
 }
 
+const formStore = {
+  defaultConfig: {},
+  setDefaultConfig: (config) => {
+    formStore.defaultConfig = config;
+  },
+  getDefaultConfig: () => {
+    return utils.clone(formStore.defaultConfig);
+  }
+};
+
 async function initializeHybridly(options = {}) {
   const resolved = options;
   const { element, payload, resolve } = prepare(resolved);
@@ -472,7 +482,7 @@ async function initializeHybridly(options = {}) {
   if (resolved.devtools !== false) {
     app.use(devtools);
   }
-  await options.enhanceVue?.(app);
+  await options.enhanceVue?.(app, payload);
   return app.mount(element);
 }
 function prepare(options) {
@@ -503,6 +513,9 @@ function prepare(options) {
   if (options.viewTransition !== false) {
     options.plugins.push(viewTransition());
   }
+  if (options.defaultFormOptions) {
+    formStore.setDefaultConfig(options.defaultFormOptions);
+  }
   return {
     isServer,
     element,
@@ -768,7 +781,8 @@ function useForm(options) {
   }
   function submit(optionsOverrides) {
     const { fields: _f, key: _k, ...optionsWithoutFields } = options;
-    const optionsWithOverrides = optionsOverrides ? utils.merge(optionsWithoutFields, optionsOverrides, { mergePlainObjects: true }) : optionsWithoutFields;
+    const resolvedOptions = optionsOverrides ? utils.merge(optionsWithoutFields, optionsOverrides, { mergePlainObjects: true }) : optionsWithoutFields;
+    const optionsWithOverrides = utils.merge(formStore.getDefaultConfig(), resolvedOptions, { mergePlainObjects: true });
     const url = typeof optionsWithOverrides.url === "function" ? optionsWithOverrides.url() : optionsWithOverrides.url;
     const data = typeof optionsWithOverrides.transform === "function" ? optionsWithOverrides.transform(fields) : fields;
     const preserveState = optionsWithOverrides.preserveState ?? optionsWithOverrides.method !== "GET";
@@ -1047,27 +1061,38 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
     });
   }
   function bindFilter(name, options = {}) {
-    const debounce = options.debounce ?? 250;
-    const refDebounce = options.syncDebounce ?? 250;
     const transform = options?.transformValue ?? ((value) => value);
     const watchFn = options?.watch ?? vue.watch;
     const getFilterValue = () => transform(refinements.value.filters.find((f) => f.name === name)?.value);
-    const _ref = vue.ref(getFilterValue());
-    let _filterTimeout;
-    let _refTimeout;
-    vue.watch(() => refinements.value.filters.find((f) => f.name === name), (filter) => {
-      clearTimeout(_refTimeout);
-      _refTimeout = setTimeout(() => _ref.value = transform(filter?.value), refDebounce);
+    const _proxy = vue.ref(getFilterValue());
+    let filterIsBeingApplied = false;
+    let proxyIsBeingUpdated = false;
+    const debouncedApplyFilter = utils.debounce(options.debounce ?? 250, async (value) => {
+      await applyFilter(name, transform(value), options);
+      vue.nextTick(() => filterIsBeingApplied = false);
+    });
+    const debounceUpdateProxyValue = utils.debounce(options.syncDebounce ?? 250, () => {
+      const filter = refinements.value.filters.find((f) => f.name === name);
+      if (filter) {
+        _proxy.value = transform(filter?.value);
+      }
+      vue.nextTick(() => proxyIsBeingUpdated = false);
+    }, { atBegin: true });
+    vue.watch(() => refinements.value.filters.find((f) => f.name === name)?.value, () => {
+      if (filterIsBeingApplied === true) {
+        return;
+      }
+      proxyIsBeingUpdated = true;
+      debounceUpdateProxyValue();
     }, { deep: true });
-    watchFn(_ref, (value) => {
-      clearTimeout(_refTimeout);
-      clearTimeout(_filterTimeout);
-      _filterTimeout = setTimeout(() => {
-        clearTimeout(_refTimeout);
-        applyFilter(name, transform(value), options);
-      }, debounce);
+    watchFn(_proxy, async (value) => {
+      if (proxyIsBeingUpdated === true) {
+        return;
+      }
+      filterIsBeingApplied = true;
+      debouncedApplyFilter(value);
     });
-    return _ref;
+    return _proxy;
   }
   return {
     /**
@@ -1237,9 +1262,9 @@ function useTable(props, key, defaultOptions = {}) {
       return record;
     }
     if (Reflect.has(record, "__hybridId")) {
-      return Reflect.get(record, "__hybridId");
+      return Reflect.get(record, "__hybridId").value;
     }
-    return Reflect.get(record, table.value.keyName);
+    return Reflect.get(record, table.value.keyName).value;
   }
   function getActionName(action) {
     return typeof action === "string" ? action : action.name;
@@ -1332,14 +1357,14 @@ function useTable(props, key, defaultOptions = {}) {
       /** Clears the filter for this column. */
       clearFilter: (options) => refinements.clearFilter(column.name, options),
       /** Checks whether the column is sortable. */
-      isSortable: refinements.sorts.find((sort) => sort.name === column.name),
+      isSortable: !!refinements.sorts.find((sort) => sort.name === column.name),
       /** Checks whether the column is filterable. */
-      isFilterable: refinements.filters.find((filters) => filters.name === column.name)
+      isFilterable: !!refinements.filters.find((filters) => filters.name === column.name)
     }))),
     /** List of records for this table. */
     records: vue.computed(() => table.value.records.map((record) => ({
       /** The actual record. */
-      record,
+      record: Object.values(record).map((record2) => record2.value),
       /** The key of the record. Use this instead of `id`. */
       key: getRecordKey(record),
       /** Executes the given inline action. */
@@ -1359,7 +1384,9 @@ function useTable(props, key, defaultOptions = {}) {
       /** Checks whether this record is selected. */
       selected: bulk.selected(getRecordKey(record)),
       /** Gets the value of the record for the specified column. */
-      value: (column) => record[typeof column === "string" ? column : column.name]
+      value: (column) => record[typeof column === "string" ? column : column.name].value,
+      /** Gets the extra object of the record for the specified column. */
+      extra: (column, path) => dotDiver.getByPath(record[typeof column === "string" ? column : column.name].extra, path)
     }))),
     /**
      * Paginated meta and links.