@cicctencent/formily 0.0.0-stage → 0.0.1

package/docs/.vuepress/client.ts

@@ -0,0 +1,15 @@
+import { defineClientConfig } from "@vuepress/client";
+import CodePreview from "./components/code-preview.vue";
+import ElementPlus from "@jt/jtui";
+import "@jt/jtui/dist/index.css";
+import Formily from '../../dist/index'
+import '../../dist/index.css'
+export default defineClientConfig({
+  enhance({ app, router, siteData }) {
+    app.use(ElementPlus);
+    app.component("code-preview", CodePreview);
+    app.use(Formily);
+  },
+  setup() {},
+  rootComponents: [],
+});

package/docs/.vuepress/components/code-preview.vue

@@ -0,0 +1,203 @@
+<template>
+    <section class="code-preview">
+        <div class="code-preview-demo">
+            <template v-if="demoPath && demo">
+                <component :is="demo"/>
+            </template>
+            <template v-else>
+                <slot name="demo"/>
+            </template>
+        </div>
+        <div class="code-preview-actions">
+            <div>
+                <svg
+                v-if="copied"
+                class="code-preview-actions__icon"
+                style="fill: green"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                width="24"
+                height="24"
+                >
+                <path fill="none" d="M0 0h24v24H0z" />
+                <path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/>
+                </svg>
+
+        <svg
+          v-else
+          class="code-preview-actions__icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          width="24"
+          height="24"
+          @click="handleCopy"
+        >
+          <path fill="none" d="M0 0h24v24H0z" />
+          <path
+            d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"
+          />
+        </svg>
+
+        <svg
+          class="code-preview-actions__icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          width="24"
+          height="24"
+          @click="handleCollapse"
+        >
+          <path fill="none" d="M0 0h24v24H0z" />
+          <path
+            d="M24 12l-5.657 5.657-1.414-1.414L21.172 12l-4.243-4.243 1.414-1.414L24 12zM2.828 12l4.243 4.243-1.414 1.414L0 12l5.657-5.657L7.07 7.757 2.828 12zm6.96 9H7.66l6.552-18h2.128L9.788 21z"
+          />
+        </svg>
+      </div>
+    </div>
+    <div v-show="!innerCollapsed" class="code-preview-source">
+      <div v-html="highlightCode" class="language-vue extra-class" />
+    </div>
+    </section>
+</template>
+
+<script lang="ts" setup>
+// @ts-ignore
+import { ref, onMounted, computed } from 'vue';
+import highlight from './highlight';
+const demoModules = import.meta.glob('../../demos/**/*.vue')
+const rawModules = import.meta.glob('../../demos/**/*.vue', {
+  as: 'raw',
+});
+
+const props = defineProps({
+    code:{
+        type: String,
+        default: ''
+    },
+    demoPath:{
+        type: String,
+        default: ''
+    },
+    collapsed:{
+        type: Boolean,
+        default: false
+    }
+})
+const demo = ref();
+const copied = ref(false)
+const innerCollapsed = ref(props.collapsed)
+const demoStr = ref<string>('')
+const decodedCode = computed(() => props.code || demoStr.value)
+const highlightCode = computed(() => {
+    try{
+        return highlight(decodedCode.value, 'vue')
+    }catch(err){
+        return 'error:'+err
+    }
+})
+onMounted(async ()=>{
+    if(props.demoPath){
+        demoModules[`../../demos/${props.demoPath}.vue`]?.().then((module)=>{
+            demo.value = module.default
+            demoStr.value =module.default;
+        })
+        console.log('path:',`../../demos/${props.demoPath}.vue`)
+        rawModules[`../../demos/${props.demoPath}.vue`]?.().then((module2)=>{
+            demoStr.value = `${module2}`
+        })
+        console.log('demoStr:',)
+    }
+
+})
+
+function handleCopy(){
+
+}
+
+function handleCollapse(){
+    innerCollapsed.value = !innerCollapsed.value
+}
+
+</script>
+
+<style lang="stylus">
+.code-preview{
+    background-color: #fff;
+    border: 1px solid #ebedf1;
+    border-radius: 4px;
+    .code-preview-demo{
+        padding: 40px 24px;
+    }
+    .code-preview-actions{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-top: 1px dashed #ebedf1;
+        height: 40px;
+        padding: 0 1em;
+
+        .code-preview-actions__icon {
+            width: 16px;
+            height: 16px;
+            padding: 8px 4px;
+            opacity: 0.4;
+            cursor: pointer;
+            transition: opacity .3s;
+
+            &:hover {
+              opacity: 0.6;
+            }
+          }
+    }
+}
+
+.code-preview-source{
+    border-top: 1px dashed #ebedf1;
+    div[class*="language-"] {
+        background-color: #f9fafb;
+        border-radius: 0;
+    }
+    pre[class*="language-"] {
+        margin: 0 !important;
+    }
+    pre[class*="language-"] code {
+        color: #000 !important;
+      }
+
+      .token.cdata,.token.comment,.token.doctype,.token.prolog {
+        color: #708090
+      }
+
+      .token.punctuation {
+        color: #999
+      }
+
+      .token.namespace {
+        opacity: .7
+      }
+
+      .token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag {
+        color: #905
+      }
+
+      .token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string {
+        color: #690
+      }
+      .language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url {
+        color: #9a6e3a;
+        background: hsla(0,0%,100%,.5)
+      }
+
+      .token.atrule,.token.attr-value,.token.keyword {
+        color: #07a
+      }
+
+      .token.class-name,.token.function {
+        color: #dd4a68
+      }
+
+      .token.important,.token.regex,.token.variable {
+        color: #e90
+      }
+}
+
+</style>

package/docs/.vuepress/components/highlight.ts

@@ -0,0 +1,53 @@
+import prism from 'prismjs'
+import escapeHtml from 'escape-html'
+import loadLanguages from 'prismjs/components/index'
+
+function wrap(code, lang) {
+  if (lang === 'text') {
+    code = escapeHtml(code)
+  }
+  return `<pre v-pre class="language-${lang}"><code>${code}</code></pre>`
+}
+
+function getLangCodeFromExtension(extension) {
+  const extensionMap = {
+    vue: 'markup',
+    html: 'markup',
+    md: 'markdown',
+    rb: 'ruby',
+    ts: 'typescript',
+    py: 'python',
+    sh: 'bash',
+    yml: 'yaml',
+    styl: 'stylus',
+    kt: 'kotlin',
+    rs: 'rust',
+  }
+
+  return extensionMap[extension] || extension
+}
+
+export default function (str, lang) {
+  if (!lang) {
+    return wrap(str, 'text')
+  }
+  lang = lang.toLowerCase()
+  const rawLang = lang
+
+  lang = getLangCodeFromExtension(lang)
+
+  if (!prism.languages[lang]) {
+    try {
+      loadLanguages([lang])
+    } catch (e) {
+      console.warn(
+        `[vuepress] Syntax highlight for language "${lang}" is not supported.`
+      )
+    }
+  }
+  if (prism.languages[lang]) {
+    const code = prism.highlight(str, prism.languages[lang], lang)
+    return wrap(code, rawLang)
+  }
+  return wrap(str, 'text')
+}

package/docs/.vuepress/config.ts

@@ -0,0 +1,39 @@
+import path from "path";
+import { defineUserConfig, defaultTheme } from "vuepress";
+import utils from "./util";
+const guideFiles = utils
+  .getFiles(path.resolve(__dirname, "../guide"))
+  .map((item) => item.replace(/(\.md)$/, ""))
+  .filter((item) => !["index"].includes(item));
+const componentsFiles = utils
+  .getFiles(path.resolve(__dirname, "../components"))
+  .map((item) => item.replace(/(\.md)$/, ""))
+  .filter((item) => !["index"].includes(item));
+export default defineUserConfig({
+  title: "Jtui Formily",
+  head: [
+    [
+      "link",
+      {
+        rel: "icon",
+        href: "https://jtcospublic.ciccten.com/low-code/files/c3c3pg/logo%20%281%291660803134226.png",
+      },
+    ],
+  ],
+  theme: defaultTheme({
+    logo: "https://jtcospublic.ciccten.com/low-code/files/c3c3pg/logo%20%281%291660803134226.png",
+    repo: "http://git.jintengoa.com/jvfe/base/ark/-/tree/master/packages/jt-formily",
+    repoLabel: "GitHub",
+    lastUpdatedText: "上次更新",
+    contributorsText: "贡献者",
+    navbar: [
+      { text: "指南", link: "/guide/schema" },
+      { text: "组件", link: "/components/" },
+    ],
+    sidebar: {
+      "/guide/": [...guideFiles],
+      "/components/": [...componentsFiles],
+    },
+    lastUpdated: true,
+  }),
+});

package/docs/.vuepress/util.ts

@@ -0,0 +1,7 @@
+import fs from 'fs'
+
+export default {
+  getFiles(dir: string): Array<string> {
+    return fs.readdirSync(dir)
+  },
+}

package/docs/README.md

@@ -0,0 +1,30 @@
+---
+home: true
+heroText: JtUi Formily
+tagline: 基于 JtUi 封装的Formily2.x组件库
+features:
+  - title: 更易用
+    details: 开箱即用，案例丰富
+  - title: 更高效
+    details: 傻瓜写法，超高性能
+  - title: 更专业
+    details: 完备，灵活，优雅
+---
+
+## 安装
+``` bash
+ npm i @jv/formily --save
+```
+
+## 全局引用
+``` ts
+ import { createApp } from 'vue';
+
+ import App from './App.vue';
+
+ import JvFormily from '@jv/formily';
+
+ createApp(App).use(JvFormily);
+```
+## 示例
+<code-preview  demoPath="index" :collapsed="false"/>

package/docs/components/anyOf.md

@@ -0,0 +1,26 @@
+---
+title: AnyOf
+lang: zh-cn
+---
+# AnyOf
+::: danger
+    该组件主要是兼容VJSF, 新的业务场景下不推荐使用。请使用x-reactions联动的方式
+:::
+<!-- ## 示例 -->
+<!-- <code-preview  demoPath="any-of/index" :collapsed="true"/> -->
+
+## 属性
+| 属性         | 说明       | 类型    | 可选值   | 默认值  |
+| ------------ | ---------- | ------- | -------- | ------- |
+| list         | schema列表 | string  | -        | '[]'    |
+| modelValue   | 绑定值     | object  | -        | {}      |
+| title        | 标题       | string  | -        |         |
+| defaultValue | 默认值     | string  | -        |         |
+| required     | 是否必填   | boolean | -        | true    |
+| type         | 类型       | string  | 'switch' | 'radio' |
+| readOnly     | 是否只读   | boolean | -        | false   |
+
+## 事件
+| 事件名 | 说明               | 参数          |
+| ------ | ------------------ | ------------- |
+| change | 内容修改时触发事件 | val: 修改的值 |

package/docs/components/array-cards.md

@@ -0,0 +1,12 @@
+---
+title: ArrayCards
+lang: zh-cn
+---
+::: tip
+卡片列表，对于每行字段数量较多，联动较多的场景比较适合使用 ArrayCards
+:::
+
+# ArrayCards
+
+## 示例
+<code-preview  demoPath="array-cards/index" :collapsed="true"/>

package/docs/components/array-collapse.md

@@ -0,0 +1,12 @@
+---
+title: ArrayCollapse
+lang: zh-cn
+---
+::: tip
+折叠面板，对于每行字段数量较多，联动较多的场景比较适合使用 ArrayCollapse
+:::
+
+# ArrayCollapse
+
+## 示例
+<code-preview  demoPath="array-collapse/index" :collapsed="true"/>

package/docs/components/array-items.md

@@ -0,0 +1,12 @@
+---
+title: ArrayItems
+lang: zh-cn
+---
+::: tip
+自增列表，对于简单的自增编辑场景比较适合，或者对于空间要求高的场景比较适合
+:::
+
+# ArrayItems
+
+## 示例
+<code-preview  demoPath="array-items/index" :collapsed="true"/>

package/docs/components/array-table.md

@@ -0,0 +1,12 @@
+---
+title: ArrayTable
+lang: zh-cn
+---
+::: tip
+自增表格，对于数据量超大的场景比较适合使用该组件，虽然数据量大到一定程度会有些许卡顿，但是不会影响基本操作
+:::
+
+# ArrayTable
+
+## 示例
+<code-preview  demoPath="array-table/index" :collapsed="true"/>

package/docs/components/array-tabs.md

@@ -0,0 +1,16 @@
+---
+title: ArrayTabs
+lang: zh-cn
+---
+::: tip
+自增选项卡，对于纵向空间要求较高的场景可以考虑使用该组件
+:::
+
+# ArrayTabs
+
+## 示例
+<code-preview  demoPath="array-tabs/index" :collapsed="true"/>
+
+
+## API
+参考 [https://element-plus.gitee.io/zh-CN/component/tabs.html](https://element-plus.gitee.io/zh-CN/component/tabs.html)

package/docs/components/cascader.md

@@ -0,0 +1,12 @@
+---
+title: Cascader
+lang: zh-cn
+---
+
+# Cascader
+
+## 示例
+<code-preview  demoPath="cascader/index" :collapsed="true"/>
+
+## API
+参考 [https://element-plus.gitee.io/zh-CN/component/cascader.html](https://element-plus.gitee.io/zh-CN/component/cascader.html)

package/docs/components/checkbox.md

@@ -0,0 +1,12 @@
+---
+title: Checkbox
+lang: zh-cn
+---
+
+# Checkbox
+
+## 示例
+<code-preview  demoPath="checkbox/index" :collapsed="true"/>
+
+## API
+参考 [https://element-plus.gitee.io/zh-CN/component/radio.html](https://element-plus.gitee.io/zh-CN/component/radio.html)

package/docs/components/event.md

@@ -0,0 +1,27 @@
+---
+title: Event
+lang: zh-cn
+---
+# 事件组件
+
+::: tip
+当前应用在可视化创作系统事件编辑
+:::
+<code-preview  demoPath="event/index" :collapsed="true"/>
+
+## 属性
+
+| 属性       | 说明       | 类型    | 可选值 | 默认值 |
+| ---------- | ---------- | ------- | ------ | ------ |
+| modelValue | 绑定值     | object  | —      | {}     |
+| schema     | schema配置 | string  | —      | '{}'   |
+| readOnly   | 是否只读   | boolean | —      | false  |
+
+::: warning
+schema传字符串是因为配置里面可能包含联动表达式 `{{$deps[0] === '1'}}`，vue会去执行这个表达式,由于没有找到$deps[0]会导致Error
+:::
+
+## 事件
+| 事件名 | 说明               | 参数                |
+| ------ | ------------------ | ------------------- |
+| change | 内容修改时触发事件 | —     val: 修改的值 |

package/docs/components/hotArea.md

@@ -0,0 +1,25 @@
+---
+title: HotArea
+lang: zh-cn
+---
+# 热区组件
+
+::: tip
+当前应用在可视化创作系统图片热区编辑
+:::
+<code-preview  demoPath="hotArea/index" :collapsed="true"/>
+
+## 属性
+
+| 属性     | 说明       | 类型    | 可选值 | 默认值 |
+| -------- | ---------- | ------- | ------ | ------ |
+| value    | 绑定值     | array   | —      | []     |
+| event    | schema配置 | string  | —      | '{}'   |
+| readOnly | 是否只读   | boolean | —      | false  |
+::: warning
+event 传字符串是因为配置里面可能包含联动表达式 `{{$deps[0] === '1'}}`，vue会去执行这个表达式,由于没有找到$deps[0]会导致Error
+:::
+## 事件
+| 事件名   | 说明                | 参数   |
+| ---------- | -------------------------- | ---------- |
+|   change    | 内容修改时触发事件 | —     val: 修改的值      |

package/docs/components/index.md

@@ -0,0 +1,4 @@
+---
+title: 快速入额 [输入框]
+lang: zh-cn
+---

package/docs/components/input.md

@@ -0,0 +1,30 @@
+---
+title: Input
+lang: zh-cn
+---
+# Input
+
+## 示例
+<!--  -->
+<code-preview  demoPath="input/index" :collapsed="true"/>
+
+## 属性
+
+| 属性        | 说明                                              | 类型    | 可选值  | 默认值 |
+| ----------- | ------------------------------------------------- | ------- | ------- | ------ |
+| modelValue  | 绑定值                                            | string  | —       | —      |
+| inputType   | 输入框类型                                        | string  | 'color' | ''     |
+| toolTip     | tip提示                                           | string  | —       | ''     |
+| placeholder | 输入框占位文本                                    | string  | —       | —      |
+| type        | 类型                                              | string  | —       | 'text' |
+| rows        | 输入框行数，仅 type 为 'textarea' 时有效          | number  | —       | 4      |
+| readOnly    | 是否只读                                          | boolean | —       | false  |
+| maxlength   | 最大输入长度                                      | string  | number  | —      | null |
+| clearable   | 是否显示清除按钮，只有当 type 不是 textarea时生效 | boolean | —       | false  |
+| autofocus   | 原生属性，自动获取焦点                            | boolean | —       | false  |
+| disabled    | 是否禁用                                          | boolean | —       | false  |
+
+## 事件
+| 事件名   | 说明                | 参数   |
+| ---------- | -------------------------- | ---------- |
+|   change    | 内容修改时触发事件 | —     val: 修改的值      |

package/docs/components/layout-group.md

@@ -0,0 +1,19 @@
+---
+title: LayoutGroup
+lang: zh-cn
+---
+
+
+# LayoutGroup
+
+用于对配置项进行分组，可以对该分组设置标题、样式、底部边框
+## 示例
+<code-preview  demoPath="layout-group/index" :collapsed="true"/>
+
+## 属性
+
+| 属性         | 说明       | 类型    | 可选值   | 默认值  |
+| ------------ | ---------- | ------- | -------- | ------- |
+| title         | 标题 | string  | -        | ''    |
+| style   |样式     | object/string  | -        | ''      |
+| borderBottom        | 是否显示底部边框       | boolean  | -        |   true      |

package/docs/components/link.md

@@ -0,0 +1,22 @@
+---
+title: Link
+lang: zh-cn
+---
+# Link
+
+## 示例
+<code-preview  demoPath="link/index" :collapsed="true"/>
+
+## 属性
+| 属性   | 说明       | 类型       | 可选值                                                       | 默认值    |
+| ------ | ---------- | ---------- | ------------------------------------------------------------ | --------- |
+| links  | 链接列表   | LinkType[] | —                                                            | —         |
+| target | 原生target | string     | —                                                            | '_blank'  |
+| type   | 类型       | string     | 'primary'  'success'  'warning'  'danger'  'info'  'default' | 'primary' |
+
+```ts
+interface LinkType{
+    href: string,
+    label: string
+}
+```

package/docs/components/oneOf.md

@@ -0,0 +1,8 @@
+---
+title: OneOf
+lang: zh-cn
+---
+# OneOf
+::: warning
+已停止维护，请使用联动 x-reactions方案
+:::

package/docs/components/radio.md

@@ -0,0 +1,12 @@
+---
+title: Radio
+lang: zh-cn
+---
+
+# Radio
+
+## 示例
+<code-preview  demoPath="radio/index" :collapsed="true"/>
+
+## API
+参考 [https://element-plus.gitee.io/zh-CN/component/checkbox.html](https://element-plus.gitee.io/zh-CN/component/checkbox.html)

package/docs/components/rich-editor.md

@@ -0,0 +1,21 @@
+---
+title: RichEditor
+lang: zh-cn
+---
+# RichEditor
+## 示例
+<code-preview  demoPath="rich-editor/index" :collapsed="true"/>
+
+## 属性
+| 属性       | 说明       | 类型       | 可选值 | 默认值 |
+| ---------- | ---------- | ---------- | ------ | ------ |
+| modelValue | 绑定值     | LinkType[] | —      | —      |
+| cmdname    | 命令字     | string     | —      | —      |
+| cmdParams  | 命令字参数 | object     | —      |        |
+| readOnly   | 是否只读   | boolean    |        | false  |
+
+## 事件
+| 事件名  | 说明               | 参数                         |
+| ------- | ------------------ | ---------------------------- |
+| change  | 内容修改时触发事件 | val: 修改的值                |
+| getData | 远程导入           | cmdname: 命令字,params: 参数 |