npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

v-editor-suite

v0.1.0

Published

A complete editor suite based on v-simple-cms and v-supabase-data-iterator.

Downloads

10

Readme

v-editor-suite

A complete editor suite based on v-simple-cms and v-supabase-data-iterator.

Requirements

  • nuxt
  • nuxt-supabase (https://github.com/rotemrevivo91/nuxt-supabase)
  • vuex
  • v-simple-cms
  • If CMS is enabled then a EditorCms.vue component must be registered globally.

Inatallation

npm i v-editor-suite

As a nuxt plugin:

import Vue from "vue"
import { EditorSuite, SupabaseDataIterator } from "v-editor-suite"
import EditorCms from "@/components/editor/EditorCms.vue"

export default async ({ store }) => {
  const modules = ["supabase", "suite"]
  for (const module of modules) {
    const storeModule = await import(`v-editor-suite/store/${module}`)
    store.registerModule(module, storeModule.default)
  }
  Vue.component("EditorCms", EditorCms)
  Vue.component("VEditorSuite", EditorSuite)
  Vue.component("SupabaseDataIterator", SupabaseDataIterator)
}

Enable Vuetify treeshakable components

In nuxt.conf.js:

import { components as vesComponents, directives as vesDirectives } from "v-editor-suite/assets/treeshake"
import { components as vesComponents, directives as vesDirectives } from "v-editor-cms/assets/treeshake"

let treeShakeComponents = [...vscmsComponents, ...vlhComponents, ...vesComponents]
let treeShakeDirectives = [...vscmsDirectives, ...vlhDirectives, ...vesDirectives]

{
  ...
  vuetify: {
    ...
    treeShake: {
      components: vesComponents,
      directives: vesDirectives
    },
    ...
  }
  ...
}

Included components

<template>
  <v-editor-suite
    supabase="$supabase"
    :cms-props="{
      componentName: 'EditorCms',
      disableActions: ['publications', 'mails'],
      externalTemplateKeys: ['image', 'text', 'body', 'topics']
    }"
    :supabase-data-iterator-props="{
      menuItems: [{
        name: 'Fetch Publications',
        icon: 'mdi-reload',
        class: '',
        action: () => $store.dispatch('setAction', {name: 'fetchPublications', args: ['fetch_publications']}),
      }],
      transformations,
      sortItems,
      headers,
      defaultSortModel: sortModel,
      editable: true,
      serverTable: 'publications'
    }"
    :create-user-props="{
      name: 'bAIome',
      url: 'https://baiome-v3.netlify.app/user/signin',
      serviceUrl: '/services/mailer/send'
    }"
    :file-viewer-props="{
      baseUrl: 'https://files.ims.bio/',
      baseKey: 'baiome.org/images',
      serviceUrl: '/services/sftp',
    }"
  />
</template>
  1. EditorSuite - The main component of the package. It organizes a left-panel navigator with currently enabled functionallity:
    1. CreateUser - Generate new supabase user by entering an email and automatically generating a random password. An email is sent to the user with their credentials and instructions.

    2. RuntimeConfig - Allows manipulation of complex JSON runtime configuratiom. The configuration JSON must be present in supabase (defined by default when baiome/imsb supabase instance is built) and to have following structure:

      {
        "title": "Dirmon Frontend",
        "pages": [{
          "class": "",
          "file": "",
          "hidden": false,
          "icon": "mdi-file-delimited",
          "name": "Csv",
          "path": "/csv",
          "short": "csv",
          "style": ""
        }],
        "adminTemplates": [],
        "editorTemplates": [],
        "userTemplates": [],
        "footer": {
          "text": "Dirmon",
          "links": [],
          "chips": [
            {
              "refName": "baiome",
              "href": "https://baiome-v3.ntelify.app",
              "imgSrc": "https://files.ims.bio/baiome.org/images/favicon.ico",
              "text": "bAIome",
              "condition": true
            },
            {
              "refName": "imsb",
              "href": "https://ims.bio/",
              "imgSrc": "I",
              "text": "IMSB",
              "condition": true
            }
          ],
          "infoIcons": []
        },
        "mode": "header"
      }
      • pages - could by dynamic pages or static vue pages. Static vue pages can link to a markdown file that can be renderd as follows:

        <template>
          <v-md-preview v-if="markdown" :text="markdown" />
        </template>
        <script lang="ts">
        import Vue from "vue"
        export default Vue.extend({
          async created () {
            const data = await this.$axios.get("pages/csv.md")
            this.markdown = data.data
          },
          data: () => ({
            markdown: null
          })
        })
        </script>
      • adminTemplates - user defined v-simple-cms configuration template that can be used only by an admin user.

      • editorTemplates - user defined v-simple-cms configuration template that can be used only by an editor user.

      • userTemplates - user defined v-simple-cms configuration template that can be used only by any user.

      • footer - user defined v-layout-helpers footer configuration.

      • mode - control how pages and tags are showen and where:

        • header - top view header. Only (automatically scrapped h1 tags) tags are shown. Pages are (to be)linked in the footer extension template.
        • header+treeview - top view header. Only (automatically scrapped h1 tags) tags are shown. And a right-side navigation menu where pages are linked.
        • header+extension - top view double row header. In the first row, pages links are shown and in the second, only (automatically scrapped h1 tags) tags are shown.
        • treeview - left side navigation menu with pages and their respectful links (automatically scrapped h1 tags) in a tree view.
    3. FileViewer - Allows an admin user to show, upload, delete, move files on a file-server.

    4. SupabaseDataIterator - A table component to view supabase table data with server-side sorting, filtering and pagination. Full description:

      Setting up

      <supabase-data-iterator
        :headers="headers"
        :sort-items="sortItems"
        :default-sort-model="sortModel"
        :items-per-page="itemsPerPage"
        :transformations="transformations"
        editable
        supabase="$supabase"
        server-table="folders"
      />

      0. serverless

      Default: false

      A boolean determining if supabase and serverTable props are required. When set to true filtering and pagination is handeled by the v-data-table or the user.

      1. supabase [REQUIRED (serverless is false)]

      A string representing the global supabase variable. When using nuxt-supabase this variable is $supabase.

      2. server-table [REQUIRED (serverless is false)]

      A string representing the supabase table to be fetched.

      3. Headers [REQUIRED]

      A list of all viewable columns of a supabase table. It's not necessarily a full representation of all columns in the table.

      headers: [
        {
          text: "#",
          value: "index"
        },
        {
          text: "Name",
          value: "name",
          justify: "end",
          align: "start",
          width: "250px",
          filterable: false
        },
        ..
      ]

      The two most common attributes of each header item is the text that will show up in the table header and value which is the eaxct name of a column in the table. Other attributes can be found here: https://vuetifyjs.com/en/components/data-tables/#header Remark: Index does not have to be a column in the table.

      4. sort-items [REQUIRED]

      An object of filterable and sortable columns:

      sortItems: {
        Name: "name",
        Owner: "owner"
      }

      The key is used as text in the sort selection and the value is the eaxct name of a column in the table.

      5. default-sort-model [REQUIRED]

      A string which is used to fetch the data initially and sort it accordingly.

      6. items-per-page [OPTIONAL]

      Default: 20

      A number determining how many rows to show per page.

      7. transformations [OPTIONAL]

      default: {}

      An object of column names as keys that allows transforming the input by passing a rendering component, a transformation function and its arguments. Remark: The arguments do not include the text itself.

      transformations: {
        name: {
          component: "div",
          func: boldText,
          args: []
        },
          created: {
          component: "div",
          func: formatDate,
          args: [true]
        },
        tags: {
          component: "v-textarea"
          func: null,
          args: []
        },
        ..
      }

      Ex: boldText

      const boldText = (text) => {
        return `<b>${text}</b>`
      }

      Ex: formatDate

      const formatDate = (dateTime: {seconds: number, nanoseconds: number} | string, time = false): string => {
        let options = {
          year: "numeric",
          month: "long",
          day: "numeric",
          timeZone: "UTC"
        }
        const extend = { hour: "2-digit", minute: "2-digit" }
        let dateArr
        if (typeof dateTime === "string") {
          if (time) {
            options = { ...options, ...extend }
          }
          // @ts-ignore
          dateArr = new Date(dateTime as string).toLocaleString("en-GB", options).split(" ")
        }
        const day = dayFormatter(dateArr.shift() as number)
        return `${day} ${dateArr.join(" ")}`.replace(/,/, "")
      }

      8. editable [OPTIONAL]

      default: false

      A boolean that allows the user to interact with a table cell, edit it and save it back to the database. Requirements: A matching entry in the transformations object must be present with func set to null and the rendering component must be an input component. For example tags.

      9. disable-search [OPTIONAL]

      default: false

      A boolean that allows to disable search on the database.

      10. filters [OPTIONAL]

      default: [[], {}]

      A list of size 2 where:

      1. The first item is a list of strings representing supabase filter functions. Legal values: "eq", "gt", "gte", "lt", "lte", "ilike"
      2. The second item is an object of key-value pairs where the key is a string present in the first item (see 1) and the value is a list of arguments for that filter function.

      Ex: [["eq","gt"], {eq: [COLUMN_NAME, VALUE], gt: [COLUMN_NAME, value]}]

      Remark: These filters will always apply to each search, pagination and future filters.

      11. default-sort-desc [OPTIONAL]

      default: false

      A boolean that determines in which direction sorting is done.

      12. cards [OPTIONAL]

      default: false

      A boolean that when set to true will use v-data-iterator instead of v-data-table and a custom component must be passed as a template.

      <supabase-data-iterator
      ..
      >
        <template #default="{item}">
          ..
        </template>
      </supabase-data-iterator>

      13. cols [OPTIONAL]

      default: false

      A boolean used in conjunction with the cards prop to set the amount of cards in a row dynamically.

    5. CsvDataIterator - A wrapper component to SupabaseDataIterator which allows it to work in serverless mode process csv files.