vue-slim-tables 0.1.2 → 0.3.0

package/src/js/components/table.vue

@@ -1,151 +0,0 @@
-<template>
-  <table class="vst">
-    <thead v-if="columns.length">
-      <tr>
-        <th
-          v-for="column in columns"
-          :key="column.key"
-          :class="['vst-th', { 'vst-orderable': column.orderable }]"
-          @click.prevent="column.orderable ? onOrderClick(column.key) : null">
-          <slot
-            :name="`head:${column.key}`"
-            :column="column">
-            {{ column.title }}
-          </slot>
-          <a
-            v-if="column.orderable"
-            href="#"
-            :class="`vst-orderable-toggle ${orders[column.key] || ''}`" />
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <slot
-        v-for="(row, i) in rows"
-        name="row"
-        :row="row"
-        :index="i"
-        :columns="columns">
-        <tr :key="row.id || i">
-          <td
-            v-for="column in columns"
-            :key="column.key">
-            <slot
-              :name="`cell:${column.key}`"
-              :row="row"
-              :value="row[column.key]"
-              :column="column"
-              :index="i">
-              {{ row[column.key] }}
-            </slot>
-          </td>
-        </tr>
-      </slot>
-
-      <slot v-if="syncState === 'fetched' && rows.length === 0" name="row:empty">
-        <tr>
-          <td :colspan="columns.length">
-            No records found
-          </td>
-        </tr>
-      </slot>
-
-      <slot v-if="syncState === 'syncing'" name="row:loading">
-        <LoadingRow
-          v-for="(row, i) in perPage"
-          :key="`loadingRow${i}`"
-          :columns-length="columns.length" />
-      </slot>
-    </tbody>
-    <tfoot>
-      <tr>
-        <td :colspan="columns.length">
-          <slot name="pagination" :page="page" :rows="rows">
-            <ul v-if="page > 1 || rows.length === perPage" class="vst-pagination mt-3">
-              <li :class="['vst-page-item', { disabled: page === 1 }]">
-                <a class="vst-page-link" @click.prevent="page -= 1">←</a>
-              </li>
-
-              <li :class="['vst-page-item', { disabled: rows.length < perPage }]">
-                <a class="vst-page-link" @click.prevent="page += 1">→</a>
-              </li>
-            </ul>
-          </slot>
-        </td>
-      </tr>
-    </tfoot>
-  </table>
-</template>
-
-<script>
-import qs from 'qs'
-import LoadingRow from './loading_row.vue'
-
-export default {
-  components: { LoadingRow },
-  props: {
-    columns: { type: Array, required: true },
-    source: { type: [String, Function], required: true },
-    perPage: { type: Number, default: 25 },
-  },
-  data() {
-    return {
-      page: 1,
-      rows: [],
-      syncState: 'initial',
-      orders: {},
-    }
-  },
-  watch: {
-    page: 'fetchData',
-    orders: 'refetch',
-    perPage: 'refetch',
-  },
-  created() {
-    this.fetchData()
-  },
-  methods: {
-    reload() {
-      this.fetchData(this.page)
-    },
-    async fetchData(page = 1) {
-      const params = { per_page: this.perPage, page }
-
-      const orderKeys = Object.keys(this.orders)
-      if (orderKeys.length) {
-        params.order = orderKeys.map((key) => ({ field: key, direction: this.orders[key] }))
-      }
-
-      this.syncState = 'syncing'
-      this.rows = []
-
-      let data
-      if (typeof this.source === 'string') {
-        const response = await fetch(`${this.source}?${qs.stringify(params, { arrayFormat: 'brackets' })}`)
-        data = await response.json()
-      } else {
-        data = await this.source(params)
-      }
-
-      this.rows = data
-      this.syncState = 'fetched'
-    },
-    onOrderClick(key) {
-      if (this.orders[key] === 'asc') {
-        this.orders = { [key]: 'desc' }
-      } else if (this.orders[key] === 'desc') {
-        this.orders = {}
-      } else {
-        this.orders = { [key]: 'asc' }
-      }
-    },
-    refetch() {
-      if (this.page === 1) {
-        this.fetchData(1)
-      } else {
-        this.page = 1
-      }
-    },
-  },
-}
-</script>

package/src/js/index.js

@@ -1,5 +0,0 @@
-import '../stylesheets/index.scss'
-
-import VueSlimTable from './components/table.vue'
-
-export default VueSlimTable

package/src/stylesheets/index.scss

@@ -1,97 +0,0 @@
-@keyframes moving-gradient {
-  0% { background-position: -250px 0; }
-  100% { background-position: 250px 0; }
-}
-
-.vst {
-  &-th {
-    line-height: 20px;
-  }
-
-  &-orderable:hover {
-    cursor: pointer;
-
-    .vst-orderable-toggle {
-      color: #555 !important;
-    }
-  }
-
-  &-orderable-toggle {
-    font-size: 20px;
-    float: right;
-    color: #ccc !important;
-
-    &:after {
-      content: " \2194";
-      display: inline-block;
-      transform: rotate(-90deg);
-    }
-
-    &.desc:after {
-      content: " \2191";
-      transform: rotate(0);
-    }
-
-    &.asc:after {
-      content: " \2193";
-      transform: rotate(0);
-    }
-  }
-
-  &-loading-row div {
-    height: 20px;
-    background: linear-gradient(to right, #eee 20%, #ddd 50%, #eee 80%);
-    background-size: 500px 20px;
-    animation-name: moving-gradient;
-    animation-duration: 1s;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-    animation-fill-mode: forwards;
-  }
-
-  tr td.vst-loading-row {
-    @for $i from 1 through 10 {
-      &-#{$i} div {
-        animation-delay: #{($i - 11)*100}ms;
-      }
-    }
-  }
-
-  &-pagination {
-    display: flex;
-    padding-left: 0;
-    list-style: none;
-    border-radius: 0.25rem;
-
-    a {
-      position: relative;
-      display: block;
-      padding: 8px 12px;
-      padding: 0.5rem 0.75rem;
-      margin-left: -1px;
-      line-height: 1.25;
-      color: #007bff;
-      background-color: #fff;
-      border: 1px solid #dee2e6;
-
-      &:hover {
-        z-index: 2;
-        color: #0056b3;
-        text-decoration: none;
-        background-color: #e9ecef;
-        border-color: #dee2e6;
-      }
-    }
-  }
-
-  &-page-item.disabled .vst-page-link {
-    pointer-events: none;
-    color: #6c757d;
-    cursor: auto;
-    background-color: #fff;
-  }
-
-  &-page-item .vst-page-link {
-    cursor: pointer;
-  }
-}

package/webpack.config.js

@@ -1,48 +0,0 @@
-const path = require('path');
-const { VueLoaderPlugin } = require('vue-loader');
-const TerserPlugin = require('terser-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-module.exports = {
-  mode: 'production',
-  entry: {
-    bundle: './src/js/index.js'
-  },
-  output: {
-    filename: '[name].js',
-    library: 'VueSlimTable',
-    libraryTarget: 'umd'
-  },
-  module: {
-    rules: [
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader'
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        include: __dirname,
-        exclude: /node_modules/
-      },
-      {
-        test: /\.scss$/,
-        use: [
-          process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
-          'css-loader',
-          'sass-loader'
-        ],
-      }
-    ]
-  },
-  plugins: [
-    new VueLoaderPlugin(),
-    new MiniCssExtractPlugin({
-      filename: '[name].css'
-    })
-  ],
-  optimization: {
-    minimize: true,
-    minimizer: [new TerserPlugin()]
-  }
-};