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

@fx-form/vue2-core

v0.0.5

Published

基于 Vue 、JsonSchema快速构建一个带完整校验的form表单,vue2版本基础框架

Downloads

5

Readme

@fx-form/vue2-core

vue2 版本核心,可以基于此适配不同的 vue2 ui库。

适配的核心就是对应类型为自己的组件库,且处理默认 props 与自己组件库 props 之间的转换

适配方案可参见 @lljj/vue-json-schema-form@lljj/vue2-form-iview3

兼容性

npm 包直接为 es6+ 源码,需要在构建 lib 时通过babe转义

如配置 rollup babel plugin:

babel({
    exclude: /node_modules\/(?!(@lljj)\/).*/, // 忽略跳过 @lljj
    extensions: ['.js', '.vue'],
})

安装

## npm
npm install --save @fx-form/vue2-core

## yarn
yarn add @fx-form/vue2-core

使用方法

按如下格式,配置对应组件在当前组件库中的映射关系,可以直接配置全局组件名或者组件构造函数,默认组件 props 为elementUi格式,如果props格式不同需要中间组件来做转换

import createVue2Core from '@fx-form/vue2-core';

const globalOptions = {
    // widget组件和现有组件库映射关系
    WIDGET_MAP: {
        // 默认按schema type 映射默认widget组件
        types: {
            // type  boolean
            boolean: 'el-switch',

            // type  string
            string: 'el-input',

            // type number
            number: 'el-input-number',

            // type integer
            integer: 'el-input-number',
        },

        // 按 schema format 映射默认widget组件,优先级高于 types
        formats: {
            // format: color
            color: 'el-color-picker',

            // format: time
            time: TimePickerWidget, // 格式 20:20:39+00:00

            // format: date
            date: DatePickerWidget, // 格式 2018-11-13

            // format: date-time
            'date-time': DateTimePickerWidget, // 格式 2018-11-13T20:20:39+00:00
        },

        // 一些公共常用类型
        common: {
            // select option
            select: SelectWidget,

            // radio
            radioGroup: RadioWidget,

            // checkout
            checkboxGroup: CheckboxesWidget,
        },

        // 这里配置一些 为当前ui库适配过的组件,会在运行时自动注册为全局组件,不注册为全局也可不配置
        // Vue2 会在调用 createVue2Core 时注册。
        widgetComponents: {
            CheckboxesWidget,
            RadioWidget,
            SelectWidget,
            TimePickerWidget,
            DatePickerWidget,
            DateTimePickerWidget
        }
    },

    // 其它表单相关组件映射关系
    COMPONENT_MAP: {
        // form组件
        form: 'el-form',

        // formItem 组件
        formItem: 'el-form-item',

        // button 组件
        button: 'el-button',

        // popover,用在formLable 左右布局时鼠标移入显示description
        popover: 'el-popover'
    },
    HELPERS: {
        // 是否mini显示 description
        isMiniDes(formProps) {
            return formProps && ['left', 'right'].includes(formProps.labselPosition);
        }
    }
};

// 为了性能也可 object.freeze globalOptions 配置数据
const mySchemaForm = createVue2Core(globalOptions);

适配一个新的ui框架只需要适配如上的组件即可

License

Apache-2.0