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

quasar-app-extension-json-logic-form

v1.0.4

Published

Quasar app extension provides a form builder that uses a JSON schema containing logic.

Downloads

5

Readme

Quasar App Extension json-logic-form

Quasar app extension provides a form builder that uses a JSON schema containing logic. Use form data, injection data and logical description in JSON schema to control form structure, field properties, and even produce graphql mutation for submission. This can be useful when you want to define a flexible form from data in a database.

The document is not finished yet.

npm npm

Install

quasar ext add json-logic-form

Quasar CLI will retrieve it from NPM and install the extension.

Uninstall

quasar ext remove json-logic-form

Basic Use

Once installed, it can be used directly in any position.

...
<json-logic-form :schema="schema"/>
...

However, it is more recommended to make a layer of packaging to facilitate the use of custom form components and custom validation rules.

<template>
  <json-logic-form
    v-bind="$attrs"
    :custom-components="customComponents"
    :custom-rules="customRules"
    :default-field-attrs="defaultFieldAttrs"
  >
    <template #action>
      <slot name="action" />
    </template>
    <template #actionPrepend>
      <slot name="actionPrepend" />
    </template>
    <template #actionAppend>
      <slot name="actionAppend" />
    </template>
  </json-logic-form>
</template>

<script>
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'MyJsonLogicForm',
    inheritAttrs: false,
    setup() {
      return {
        customComponents: {...},
        customRules: {...},
        defaultFieldAttrs: {...},
      };
    },
  });
</script>

API

Props

modelValue

modelValue: {
  type: Object,
  default: () => ({}),
}

Model of form data. Usually use v-model directive instead.

title

title: {
  type: String,
  default: null,
}

Form title.

comment

comment: {
  type: String,
  default: null,
}

Some comment text blow the form title.

Buttons

showSubmit: {
  type: Boolean,
  default: true,
},
submitText: {
  type: String,
  default: '提交',
},
submitConfirm: {
  type: Boolean,
  default: true,
},
submitConfirmText: {
  type: String,
  default: '确认提交表单?',
},
showReset: {
  type: Boolean,
  default: true,
},
resetText: {
  type: String,
  default: '重置',
},
resetConfirm: {
  type: Boolean,
  default: true,
},
resetConfirmText: {
  type: String,
  default: '确认清空表单?',
}

Control the behavior of form buttons.

schema

schema: {
  type: Array,
  default: () => ([]),
}

The most important thing: Form Schema. It's an array of Field Schema. It determines the structure of the form and form data at the same time.

injectKeys

injectKeys: {
  type: Array,
  default: () => ([]),
}

An array of string. Each item is a key of vue3 inject variable. This is a way to influence form logic through data outside the form. See the Logic section for details.

gqlSchema

gqlSchema: {
  type: Object,
}

See the GraphQL Schema section for details.

defaultFieldAttrs

defaultFieldAttrs: {
  type: Object,
  default: () => ({}),
}

See the Field Attrs section for details.

customComponents

customComponents: {
  type: Object,
  default: () => ({}),
}

See the Custom Component section for details.

customRules

customRules: {
  type: Object,
  default: () => ({}),
}

See the Validate section for details.

formValidate

formValidate: {
  type: Object,
}

Additional global validation.

Events

update:modelValue -> function(formData)

Update event of form data. Usually use v-model directive instead.

submit -> function(formData, [gql])

Submit event. If prop sqlSchema is set, the function has a second parameter of GraphQL mutation string.

reset -> function()

Reset event. Go for little.

Slots

action

Replace form button section.

actionPrepend

Prepend form button section.

actionAppend

Append form button section.

Logic

Field Schema

type: group | array | field

Optional, default: field.

component

Custom Component

Field Attrs

Validate

const rules = {
    required: (options) => (val) => !!val || options.message || '该项为必填项!',
    minValue: (options) => (val) => val >= options.value || options.message || `数值应不小于${options.value}!`,
    maxValue: (options) => (val) => val <= options.value || options.message || `数值应不大于${options.value}!`,
    minLength: (options) => (val) => (!!val && val.length >= options.value) || options.message || `内容应不少于${options.value}字符!`,
    maxLength: (options) => (val) => (!!val && val.length <= options.value) || options.message || `内容应不多于${options.value}字符!`,
    ...customRules, 
};

GraphQL Schema

Donate

If you appreciate the work that went into this App Extension, please consider donating to Quasar.

License

MIT (c) 十八亩地 [email protected]