@hybridly/vue 0.7.7 → 0.7.9

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { shallowRef, ref, unref, triggerRef, defineComponent, toRaw, h, nextTick, createApp, isRef, reactive, readonly, computed, toValue, watch, getCurrentInstance, onUnmounted } from 'vue';
 import { definePlugin, registerHook as registerHook$1, createRouter, makeUrl, router, route } from '@hybridly/core';
 export { can, route, router } from '@hybridly/core';
-import { debug, random, showViewComponentErrorModal, merge, clone, unsetPropertyAtPath, setValueAtPath } from '@hybridly/utils';
+import { debug, clone, random, showViewComponentErrorModal, merge, unsetPropertyAtPath, setValueAtPath, debounce } from '@hybridly/utils';
 import nprogress from 'nprogress';
 import { setupDevtoolsPlugin } from '@vue/devtools-api';
 import qs from 'qs';
@@ -405,6 +405,16 @@ function viewTransition() {
   };
 }
 
+const formStore = {
+  defaultConfig: {},
+  setDefaultConfig: (config) => {
+    formStore.defaultConfig = config;
+  },
+  getDefaultConfig: () => {
+    return clone(formStore.defaultConfig);
+  }
+};
+
 async function initializeHybridly(options = {}) {
   const resolved = options;
   const { element, payload, resolve } = prepare(resolved);
@@ -465,7 +475,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) {
@@ -496,6 +506,9 @@ function prepare(options) {
   if (options.viewTransition !== false) {
     options.plugins.push(viewTransition());
   }
+  if (options.defaultFormOptions) {
+    formStore.setDefaultConfig(options.defaultFormOptions);
+  }
   return {
     isServer,
     element,
@@ -761,7 +774,8 @@ function useForm(options) {
   }
   function submit(optionsOverrides) {
     const { fields: _f, key: _k, ...optionsWithoutFields } = options;
-    const optionsWithOverrides = optionsOverrides ? merge(optionsWithoutFields, optionsOverrides, { mergePlainObjects: true }) : optionsWithoutFields;
+    const resolvedOptions = optionsOverrides ? merge(optionsWithoutFields, optionsOverrides, { mergePlainObjects: true }) : optionsWithoutFields;
+    const optionsWithOverrides = 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";
@@ -1040,27 +1054,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 ?? watch;
     const getFilterValue = () => transform(refinements.value.filters.find((f) => f.name === name)?.value);
-    const _ref = ref(getFilterValue());
-    let _filterTimeout;
-    let _refTimeout;
-    watch(() => refinements.value.filters.find((f) => f.name === name), (filter) => {
-      clearTimeout(_refTimeout);
-      _refTimeout = setTimeout(() => _ref.value = transform(filter?.value), refDebounce);
+    const _proxy = ref(getFilterValue());
+    let filterIsBeingApplied = false;
+    let proxyIsBeingUpdated = false;
+    const debouncedApplyFilter = debounce(options.debounce ?? 250, async (value) => {
+      await applyFilter(name, transform(value), options);
+      nextTick(() => filterIsBeingApplied = false);
+    });
+    const debounceUpdateProxyValue = debounce(options.syncDebounce ?? 250, () => {
+      const filter = refinements.value.filters.find((f) => f.name === name);
+      if (filter) {
+        _proxy.value = transform(filter?.value);
+      }
+      nextTick(() => proxyIsBeingUpdated = false);
+    }, { atBegin: true });
+    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 {
     /**
@@ -1230,9 +1255,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;
@@ -1325,14 +1350,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: 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. */
@@ -1352,7 +1377,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) => getByPath(record[typeof column === "string" ? column : column.name].extra, path)
     }))),
     /**
      * Paginated meta and links.

package/package.json

@@ -1,63 +1,64 @@
 {
   "name": "@hybridly/vue",
-  "version": "0.7.7",
+  "type": "module",
+  "version": "0.7.9",
   "description": "Vue adapter for Hybridly",
-  "keywords": [
-    "hybridly",
-    "inertiajs",
-    "vue",
-    "vue-plugin"
-  ],
-  "homepage": "https://github.com/hybridly/hybridly/tree/main/packages/vue#readme",
-  "bugs": {
-    "url": "https://github.com/hybridly/hybridly/issues"
-  },
+  "author": "Enzo Innocenzi <enzo@innocenzi.dev>",
   "license": "MIT",
+  "funding": "https://github.com/sponsors/innocenzi",
+  "homepage": "https://github.com/hybridly/hybridly/tree/main/packages/vue#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/hybridly/hybridly.git",
     "directory": "packages/vue"
   },
-  "funding": "https://github.com/sponsors/innocenzi",
-  "author": "Enzo Innocenzi <enzo@innocenzi.dev>",
+  "bugs": {
+    "url": "https://github.com/hybridly/hybridly/issues"
+  },
+  "keywords": [
+    "hybridly",
+    "inertiajs",
+    "vue",
+    "vue-plugin"
+  ],
   "publishConfig": {
     "provenance": true,
     "access": "public"
   },
   "sideEffects": false,
-  "type": "module",
-  "files": [
-    "dist"
-  ],
   "exports": {
     ".": {
-      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.cjs"
     }
   },
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "peerDependencies": {
     "vue": "^3.2.45"
   },
   "dependencies": {
     "@clickbar/dot-diver": "^1.0.6",
-    "@vue/devtools-api": "^6.6.1",
+    "@vue/devtools-api": "^7.3.5",
     "defu": "^6.1.4",
     "lodash.isequal": "^4.5.0",
     "nprogress": "^0.2.0",
     "qs": "^6.12.1",
-    "@hybridly/core": "0.7.7",
-    "@hybridly/utils": "0.7.7"
+    "@hybridly/core": "0.7.9",
+    "@hybridly/utils": "0.7.9"
   },
   "devDependencies": {
-    "@types/lodash": "^4.17.0",
+    "@types/lodash": "^4.17.6",
     "@types/lodash.isequal": "^4.5.8",
     "@types/nprogress": "^0.2.3",
-    "@vue/test-utils": "^2.4.5",
-    "vue": "^3.4.23"
+    "@vue/test-utils": "^2.4.6",
+    "axios": "^1.7.2",
+    "vue": "^3.4.31"
   },
   "scripts": {
     "build": "unbuild",