r3shaper-vue v0.0.2

Note: Proper documentation coming soon.

Installation

1. Install the package.

npm install r3shaper r3shaper-vue --save

or

yarn add r3shaper r3shaper-vue

2. Import the component globally:

import Vue from 'vue';
import { R3shaper } from 'r3shaper-vue';

Vue.component('r3shaper', R3shaper);

or locally where needed:

import { R3shaper } from 'r3shaper-vue';

export default {
  components: {
    R3shaper,
  },
};

Props

Default Slot - Scope

Example

Let's assume we have the following R3shaper resource.

import apiClient from './';

export const usersResource = {
  list: apiClient.get('/users'),
  delete: apiClient.delete('/users/{id}'),
};

Now we can consume the resource:

<template>
  <r3shaper
    v-slot:default="{ loading, result, dispatch, error }"
    :resource="require('@/api/users').usersResource.list"
  >
    <!-- Loading state -->
    <span v-if="loading && !result">Loading</span>

    <!-- Error state -->
    <span v-else-if="error">{{ error }}</span>

    <!-- Request result. Example: { "data": [], "page": 1 } -->
    <ul v-else>
      <li v-for="item in result.data" :key="item.id">
        {{ item }}
        <!-- Delete Mutation Example -->
        <r3shaper
          v-slot:default="{ dispatch: deleteItem }"
          :resource="require('@/api/users').usersResource.delete"
          :debounce="2000"
          manual
          @success="result.data = result.data.filter(i => i.id !== item.id)"
        >
          <button @click="deleteItem({ params: { id: item.id } })">❌</button>
        </r3shaper>
      </li>
    </ul>

    <!-- Basic Pagination Example -->
    <button @click="dispatch({ queryParams: { page: result.page + 1 } })">Next Page</button>

    <!-- Load More Pagination Example. Same as "Basic Pagination" but with custom reducer -->
    <button
      @click="dispatch(
        {
          queryParams: {
            page: result.page + 1,
          },
        },
        (oldResult, newResult) => ({
          ...newResult,
          data: [...oldResult.data, ...newResult.data],
        })
      )"
    >Load More</button>
  </r3shaper>
</template>

Dependencies

• r3shaper ^0.1.6
• vue ^2.6.10

Credits

Created by Stratulat Alexandru.