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

v3-json-canvas

v0.1.13

Published

UI Components built on Vue3, Generating HTML 5 pages through JSON

Downloads

62

Readme

v3-json-canvas

demo

http://kgm0515.gitee.io/v3-json-canvas

introduce

Generating pages by dragging and dropping based on vue3.0

install

npm install v3-json-canvas -S

Use in Vue

Introducing local components

import { createApp } from 'vue'
import App from './App.vue'
import KButton from 'v3-json-canvas/dist/lib/button'
import KIcon from 'v3-json-canvas/dist/lib/icon'
import KInput from 'v3-json-canvas/dist/lib/input'
import 'v3-json-canvas/dist/kui.css'
createApp(App).use(KButton).use(KIcon).use(KInput).mount('#app')

Global introduction

import { createApp } from 'vue'
import App from './App.vue'
import Kui from 'v3-json-canvas'
import 'v3-json-canvas/dist/kui.css'
createApp(App).use(Kui).mount('#app')

About component

KJsonEdit

Used to drag and drop edit pages

The internal "KJsonParse" component is used to display the page effect in real time

  • Property: "layout" - > generate page layout

  • Property: "mock" - > static simulation data used in the page

  • Method: "closecanvas" - > called when the editor page is closed

  • Method: "submitoption" - > called when submitting editor data

    You can also pass in other attributes, such as "someattr". In the editor, you can use the "_ctx.attrs.someattr "got the attribute value

<KJsonEdit :layout="layout" :mock="mock" @close-canvas="closeCanvas" @submit-option="submitOption" />

KJsonParse

This component can generate pages by parsing configuration

  • Property: "layout" - > generate page layout

  • Property: "mock" - > static simulation data used in the page

  • Property: "editor" - > Whether it is in editing state or not. The default is false

    You can also pass in other attributes, such as "someattr". In the editor, you can use the "_ctx.attrs.someattr "got the attribute value

<KJsonParse :layout="layout" :mock="mock" :editor="false" />

About api

registerLayout

Register additional components or labels that can be dragged by configuration

import Kui from 'v3-json-canvas'
const registerObj = Kui.registerLayout()
registerObj.register(key: srting, obj:IContainerMenuitem)

// Components registered in the left menu
interface IContainerMenuitem {
  compLabel: string
  dropedInfo: IContainer
}

// Interface description of dropedinfo
interface IContainer {
  tag: string // Component or tag name
  isroot?: boolean // Root node (a page can only have one root node)
  isfixed?: boolean // Can the initial state be dragged
  iscontainer: string | boolean // Can other components or labels be included
  children?: Array<IContainer> | null // Child node
  styleConfig?: IStyleConfig // Style configuration will appear in the operation bar on the right side of the editor
  attrsConfig?: string[] // Other properties will appear in the operation bar on the right side of the editor
  vmodel?: string // Binding data, For input
  text?: string // Text node
  style?: string // Style configuration
  className?: string // Element class name
  placeholder?: string // For input
  vfor?: string // Cyclic element,Similar to v-for
  vif?: string // Display,Similar to v-if
  eventConfig?: string[] // Does the right side of the editor display an array of event attribute keys['onClick', 'onChange', ...]
  onClick?: string // Click event
  [propName: string]: any
}
// Style configuration will appear in the operation bar on the right side of the editor
interface IStyleConfig {
  width?: number | string
  height?: number | string
  left?: number | string
  right?: number | string
  position?: number | string
  [prop: string]: any
}

getBasicLayout

Get a basic page "layout" configuration

const layout = Kui.getBasicLayout()

disposeConfig

Configuration that might be used in the generated page

// You can also configure APIs related to axios or router here
Kui.disposeConfig.set('key', 'value')

Use examples

如果使用 TS 开发,项目提示类型错误,请拷贝 node_modules/v3-json-canvas/v3-json-canvas.d.ts 到根目录

entrance

/** main.js **/
import { createApp } from 'vue'
import App from './App.vue'
import Kui from 'v3-json-canvas'
import 'v3-json-canvas/dist/kui.css'
import router from './router'
createApp(App).use(Kui).mount('#app')

// Configure additional objects that need to be used in the editor
// You can also configure APIs related to axios or router here
Kui.disposeConfig.set('router', router)
Kui.disposeConfig.set('store', store)

// Register additional components or labels that can be dragged by configuration
const registerObj = Kui.registerLayout()
registerObj.register('b', {
  compLabel: 'b 用户注册标签',
  dropedInfo: {
    tag: 'b',
    iscontainer: false,
    styleConfig: { position: 'absolute', 'z-index': 200, color: '#333', 'font-size': 14, width: 'auto', height: 'auto' },
    attrsConfig: ['text'],
    text: '这是一个用户注册b标签',
    eventConfig: ['onClick']
  }
})

Build a separate page or component

<template>
  <div>
    <div v-if="!isEdit && screenWidth >= 480" style="margin: 0px; position: fixed; right: 30px; top: 10px; z-index: 1000">
      <KButton @Click="closeCanvas">edit</KButton>
    </div>
    <KJsonEdit :layout="layout" :mock="mock" @close-canvas="closeCanvas" @submit-option="submitOption" v-if="isEdit" />
    <KJsonParse :layout="layout" :mock="mock" :editor="false" v-else />
  </div>
</template>

<script lang="ts">
  import { defineComponent, onBeforeMount, reactive, toRefs } from 'vue'
  import Kui from 'v3-json-canvas'

  export default defineComponent({
    name: 'JsonTest',
    setup() {
      const state = reactive({
        isEdit: true, // Is it in editing state
        layout: Kui.getBasicLayout(), // Get basic layout configuration
        mock: {} // Initial mock data
      })
      onBeforeMount(async () => {
        // Simulate remote data acquisition
        try {
          state.layout = await require('./layout.json')
          state.mock = await require('./data.json')
        } catch (error) {
          // ...
        }
      })
      // Close canvas
      function closeCanvas() {
        console.log(state)
        state.isEdit = !state.isEdit
      }
      // Submit editing results
      function submitOption(arg: { mock: any; layout: any }) {
        state.mock = arg.mock || {}
        state.layout = arg.layout
        console.log('submit data:', arg)
      }
      return {
        closeCanvas,
        submitOption,
        ...toRefs(state),
        screenWidth: window.innerWidth
      }
    }
  })
</script>