@hybridly/vue 0.4.4 → 0.5.0

package/dist/index.cjs

@@ -236,19 +236,25 @@ const wrapper = vue.defineComponent({
         renderDialog()
       ];
     }
-    function renderView() {
-      utils.debug.adapter("vue:render:view", "Rendering view.");
-      state.view.value.inheritAttrs = !!state.view.value.inheritAttrs;
-      const actual = state.view.value?.mounted;
-      state.view.value.mounted = () => {
+    function hijackOnMounted(component, type) {
+      if (!component) {
+        return;
+      }
+      const actual = component?.mounted;
+      component.mounted = () => {
         actual?.();
         vue.nextTick(() => {
-          utils.debug.adapter("vue:render:view", "Calling mounted callbacks.");
+          utils.debug.adapter(`vue:render:${type}`, "Calling mounted callbacks.");
           while (onMountedCallbacks.length) {
             onMountedCallbacks.shift()?.();
           }
         });
       };
+    }
+    function renderView() {
+      utils.debug.adapter("vue:render:view", "Rendering view.");
+      state.view.value.inheritAttrs = !!state.view.value.inheritAttrs;
+      hijackOnMounted(state.view.value, "view");
       return vue.h(state.view.value, {
         ...state.properties.value,
         key: state.viewKey.value
@@ -257,6 +263,7 @@ const wrapper = vue.defineComponent({
     function renderDialog() {
       if (dialogStore.state.component.value && dialogStore.state.properties.value) {
         utils.debug.adapter("vue:render:dialog", "Rendering dialog.");
+        hijackOnMounted(dialogStore.state.component.value, "dialog");
         return vue.h(dialogStore.state.component.value, {
           ...dialogStore.state.properties.value,
           key: dialogStore.state.key.value
@@ -310,6 +317,11 @@ function setupDevtools(app) {
         key: "component",
         value: state.context.value?.view.component
       });
+      payload.instanceData.state.push({
+        type: hybridlyStateType,
+        key: "deferred",
+        value: state.context.value?.view.deferred
+      });
       payload.instanceData.state.push({
         type: hybridlyStateType,
         key: "dialog",
@@ -404,8 +416,8 @@ function viewTransition() {
   let domUpdated;
   return {
     name: "view-transition",
-    navigating: async ({ isInitial }) => {
-      if (isInitial) {
+    navigating: async ({ type, hasDialog }) => {
+      if (type === "initial" || hasDialog) {
         return;
       }
       return new Promise((confirmTransitionStarted) => document.startViewTransition(() => {
@@ -416,6 +428,10 @@ function viewTransition() {
     mounted: () => {
       domUpdated?.();
       domUpdated = void 0;
+    },
+    navigated: () => {
+      domUpdated?.();
+      domUpdated = void 0;
     }
   };
 }
@@ -444,12 +460,16 @@ async function initializeHybridly(options = {}) {
         state.setContext(context);
       },
       onViewSwap: async (options2) => {
-        state.setView(options2.component);
+        if (options2.component) {
+          onMountedCallbacks.push(() => options2.onMounted?.({ isDialog: false }));
+          state.setView(options2.component);
+        }
         state.setProperties(options2.properties);
         if (!options2.preserveState && !options2.dialog) {
           state.setViewKey(utils.random());
         }
         if (options2.dialog) {
+          onMountedCallbacks.push(() => options2.onMounted?.({ isDialog: true }));
           dialogStore.setComponent(await resolve(options2.dialog.component));
           dialogStore.setProperties(options2.dialog.properties);
           dialogStore.setKey(options2.dialog.key);
@@ -524,8 +544,8 @@ async function resolveViewComponent(name, options) {
   const result = options.components.views.find((view) => name === view.identifier);
   const path = Object.keys(components).sort((a, b) => a.length - b.length).find((path2) => result ? path2.endsWith(result?.path) : false);
   if (!result || !path) {
-    console.warn(`Page component [${name}] not found. Available components: `, options.components.views.map(({ identifier }) => identifier));
-    utils.showPageComponentErrorModal(name);
+    console.warn(`View component [${name}] not found. Available components: `, options.components.views.map(({ identifier }) => identifier));
+    utils.showViewComponentErrorModal(name);
     return;
   }
   let component = typeof components[path] === "function" ? await components[path]() : components[path];
@@ -539,6 +559,8 @@ const RouterLink = vue.defineComponent({
     return (props) => {
       let data = props.data ?? {};
       const preloads = props.preload ?? false;
+      const preserveScroll = props.preserveScroll;
+      const preserveState = props.preserveState;
       const url = core.makeUrl(props.href ?? "");
       const method = props.method?.toUpperCase() ?? "GET";
       const as = typeof props.as === "object" ? props.as : props.as?.toLowerCase() ?? "a";
@@ -578,6 +600,8 @@ Please specify a more appropriate element using the "as" attribute. For example:
         }
         core.router.preload(url, {
           data,
+          preserveScroll,
+          preserveState,
           ...props.options
         });
       }
@@ -647,6 +671,14 @@ Please specify a more appropriate element using the "as" attribute. For example:
     preload: {
       type: [Boolean, String],
       default: false
+    },
+    preserveScroll: {
+      type: Boolean,
+      default: void 0
+    },
+    preserveState: {
+      type: Boolean,
+      default: void 0
     }
   }
 });
@@ -880,7 +912,7 @@ function useHistoryState(key, initial) {
 function useBackForward() {
   const callbacks = [];
   core.registerHook("navigated", (options) => {
-    if (options.isBackForward) {
+    if (options.type === "back-forward") {
       callbacks.forEach((fn) => fn(state.context.value));
       callbacks.splice(0, callbacks.length);
     }
@@ -897,33 +929,6 @@ function useBackForward() {
   };
 }
 
-function usePaginator(paginator) {
-  const meta = paginator.meta ?? paginator;
-  const links = meta.links ?? paginator.links;
-  const items = links.map((link, index) => {
-    return {
-      url: link.url,
-      label: link.label,
-      isPage: !isNaN(+link.label),
-      isPrevious: index === 0,
-      isNext: index === links.length - 1,
-      isCurrent: link.active,
-      isSeparator: link.label === "...",
-      isActive: !!link.url && !link.active
-    };
-  });
-  const pages = items.filter((item) => item.isPage || item.isSeparator);
-  const current = items.find((item) => item.isCurrent);
-  const previous = items.find((item) => item.isPrevious);
-  const next = items.find((item) => item.isNext);
-  const first = { ...items[1], isActive: items[1].url !== current?.url, label: "«" };
-  const last = { ...items[items.length - 1], isActive: items[items.length - 1].url !== current?.url, label: "»" };
-  const from = meta.from;
-  const to = meta.to;
-  const total = meta.total;
-  return { pages, items, previous, next, first, last, total, from, to };
-}
-
 function defineLayout(...args) {
   const layouts = args[0];
   const properties = args[1];
@@ -1035,9 +1040,9 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
   function currentFilters() {
     return refinements.value.filters.filter(({ is_active }) => is_active);
   }
-  function isSorting(name) {
+  function isSorting(name, direction) {
     if (name) {
-      return currentSorts().some((sort) => sort.name === name);
+      return currentSorts().some((sort) => sort.name === name && (direction ? sort.direction === direction : true));
     }
     return currentSorts().length !== 0;
   }
@@ -1080,11 +1085,35 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
     /**
      * Available filters.
      */
-    filters: toReactive(refinements.value.filters),
+    filters: toReactive(refinements.value.filters.map((filter) => ({
+      ...filter,
+      /**
+       * Applies this filter.
+       */
+      apply: (value, options) => applyFilter(filter.name, value, options),
+      /**
+       * Clears this filter.
+       */
+      clear: (options) => clearFilter(filter.name, options)
+    }))),
     /**
      * Available sorts.
      */
-    sorts: toReactive(refinements.value.sorts),
+    sorts: toReactive(refinements.value.sorts.map((sort) => ({
+      ...sort,
+      /**
+       * Toggles this sort.
+       */
+      toggle: (options) => toggleSort(sort.name, options),
+      /**
+       * Checks if this sort is active.
+       */
+      isSorting: (direction) => isSorting(sort.name, direction),
+      /**
+       * Clears this sort.
+       */
+      clear: (options) => clearSorts(options)
+    }))),
     /**
      * Gets a filter by name.
      */
@@ -1150,6 +1179,193 @@ function useRoute() {
   };
 }
 
+function useBulkSelect() {
+  const selection = vue.ref({
+    all: false,
+    only: /* @__PURE__ */ new Set(),
+    except: /* @__PURE__ */ new Set()
+  });
+  function selectAll() {
+    selection.value.all = true;
+    selection.value.only.clear();
+    selection.value.except.clear();
+  }
+  function deselectAll() {
+    selection.value.all = false;
+    selection.value.only.clear();
+    selection.value.except.clear();
+  }
+  function select(...records) {
+    records.forEach((record) => selection.value.except.delete(record));
+    records.forEach((record) => selection.value.only.add(record));
+  }
+  function deselect(...records) {
+    records.forEach((record) => selection.value.except.add(record));
+    records.forEach((record) => selection.value.only.delete(record));
+  }
+  function toggle(record, force) {
+    if (selected(record) || force === false) {
+      return deselect(record);
+    }
+    if (!selected(record) || force === true) {
+      return select(record);
+    }
+  }
+  function selected(record) {
+    if (selection.value.all) {
+      return !selection.value.except.has(record);
+    }
+    return selection.value.only.has(record);
+  }
+  const allSelected = vue.computed(() => {
+    return selection.value.all && selection.value.except.size === 0;
+  });
+  return {
+    allSelected,
+    selectAll,
+    deselectAll,
+    select,
+    deselect,
+    toggle,
+    selected,
+    selection
+  };
+}
+
+function useTable(props, key, defaultOptions = {}) {
+  const table = vue.computed(() => props[key]);
+  const bulk = useBulkSelect();
+  const refinements = useRefinements(toReactive(table), "refinements", defaultOptions);
+  function getRecordKey(record) {
+    if (typeof record !== "object") {
+      return record;
+    }
+    if (Reflect.has(record, "__hybridId")) {
+      return Reflect.get(record, "__hybridId");
+    }
+    return Reflect.get(record, table.value.keyName);
+  }
+  function getActionName(action) {
+    return typeof action === "string" ? action : action.name;
+  }
+  async function executeInlineAction(action, record) {
+    return await hybridly.router.navigate({
+      method: "post",
+      url: hybridly.route(table.value.endpoint),
+      preserveState: true,
+      data: {
+        type: "action:inline",
+        action: getActionName(action),
+        tableId: table.value.id,
+        recordId: getRecordKey(record)
+      }
+    });
+  }
+  async function executeBulkAction(action, options) {
+    const actionName = getActionName(action);
+    return await hybridly.router.navigate({
+      method: "post",
+      url: hybridly.route(table.value.endpoint),
+      preserveState: true,
+      data: {
+        type: "action:bulk",
+        action: actionName,
+        tableId: table.value.id,
+        all: bulk.selection.value.all,
+        only: [...bulk.selection.value.only],
+        except: [...bulk.selection.value.except]
+      },
+      hooks: {
+        after: () => {
+          if (options?.deselect === true || table.value.bulkActions.find(({ name }) => name === actionName)?.deselect !== false) {
+            bulk.deselectAll();
+          }
+        }
+      }
+    });
+  }
+  return vue.reactive({
+    /** Selects all records. */
+    selectAll: bulk.selectAll,
+    /** Deselects all records. */
+    deselectAll: bulk.deselectAll,
+    /** Checks if the given record is selected. */
+    isSelected: (record) => bulk.selected(getRecordKey(record)),
+    /** Whether all records are selected. */
+    allSelected: bulk.allSelected,
+    /** The current record selection. */
+    selection: bulk.selection,
+    /** Toggles selection for the given record. */
+    toggle: (record) => bulk.toggle(getRecordKey(record)),
+    /** Selects selection for the given record. */
+    select: (record) => bulk.select(getRecordKey(record)),
+    /** Deselects selection for the given record. */
+    deselect: (record) => bulk.deselect(getRecordKey(record)),
+    /** List of inline actions for this table. */
+    inlineActions: vue.computed(() => table.value.inlineActions.map((action) => ({
+      /** Executes the action. */
+      execute: (record) => executeInlineAction(action.name, record),
+      ...action
+    }))),
+    /** List of bulk actions for this table. */
+    bulkActions: vue.computed(() => table.value.bulkActions.map((action) => ({
+      /** Executes the action. */
+      execute: (options) => executeBulkAction(action.name, options),
+      ...action
+    }))),
+    /** Executes the given inline action for the given record. */
+    executeInlineAction,
+    /** Executes the given bulk action. */
+    executeBulkAction,
+    /** List of columns for this table. */
+    columns: vue.computed(() => table.value.columns.map((column) => ({
+      ...column,
+      /** Toggles sorting for this column. */
+      toggleSort: (options) => refinements.toggleSort(column.name, options),
+      /** Checks whether the column is being sorted. */
+      isSorting: (direction) => refinements.isSorting(column.name, direction),
+      /** Applies the filer for this column. */
+      applyFilter: (value, options) => refinements.applyFilter(column.name, value, options),
+      /** 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),
+      /** Checks whether the column is filterable. */
+      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,
+      /** The key of the record. Use this instead of `id`. */
+      key: getRecordKey(record),
+      /** Executes the given inline action. */
+      execute: (action) => executeInlineAction(getActionName(action), getRecordKey(record)),
+      /** Gets the available inline actions. */
+      actions: table.value.inlineActions.map((action) => ({
+        ...action,
+        /** Executes the action. */
+        execute: () => executeInlineAction(action.name, getRecordKey(record))
+      })),
+      /** Selects this record. */
+      select: () => bulk.select(getRecordKey(record)),
+      /** Deselects this record. */
+      deselect: () => bulk.deselect(getRecordKey(record)),
+      /** Toggles the selection for this record. */
+      toggle: (force) => bulk.toggle(getRecordKey(record), force),
+      /** 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]
+    }))),
+    /**
+     * Paginated meta and links.
+     */
+    paginator: vue.computed(() => table.value.paginator),
+    ...refinements
+  });
+}
+
 exports.can = core.can;
 exports.route = core.route;
 exports.router = core.router;
@@ -1160,12 +1376,13 @@ exports.initializeHybridly = initializeHybridly;
 exports.registerHook = registerHook;
 exports.setProperty = setProperty;
 exports.useBackForward = useBackForward;
+exports.useBulkSelect = useBulkSelect;
 exports.useContext = useContext;
 exports.useDialog = useDialog;
 exports.useForm = useForm;
 exports.useHistoryState = useHistoryState;
-exports.usePaginator = usePaginator;
 exports.useProperties = useProperties;
 exports.useProperty = useProperty;
 exports.useRefinements = useRefinements;
 exports.useRoute = useRoute;
+exports.useTable = useTable;