@pisell/materials 3.0.62 → 6.0.2

package/lowcode/data-source-image/meta.ts

@@ -0,0 +1,74 @@
+import snippets from './snippets';
+import { genGeneralVariablesSetting } from '../_utils/defaultSchema';
+
+export default {
+  snippets,
+  componentName: 'DataSourceImage',
+  title: '图片',
+  category: '数据展示',
+  group: '无代码组件',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'DataSourceImage',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+
+  generalProps: [
+    genGeneralVariablesSetting({
+      name: 'src',
+      title: { label: '图片地址', tip: '图片地址' },
+    }),
+  ],
+  props: [
+    {
+      name: 'src',
+      title: { label: '图片地址', tip: '图片地址' },
+      propType: { type: 'string', isRequired: true },
+    },
+    {
+      name: 'alt',
+      title: { label: '替换文本', tip: '替换文本' },
+      propType: 'string',
+      setter: 'PisellI18nSetter',
+    },
+    {
+      name: 'preview',
+      title: { label: '支持预览', tip: '支持预览' },
+      defaultValue: true,
+      propType: 'bool',
+    },
+    {
+      name: 'fallback',
+      title: { label: '失败地址', tip: '加载失败容错地址' },
+      propType: 'string',
+    },
+    {
+      name: 'width',
+      title: { label: '宽度', tip: '宽度' },
+      propType: 'number',
+    },
+    {
+      name: 'height',
+      title: { label: '高度', tip: '高度' },
+      propType: 'number',
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onClick',
+          template:
+            "onClick(event,${extParams}){\n// 点击时的回调\nconsole.log('onClick', event);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/data-source-image/snippets.ts

@@ -0,0 +1,14 @@
+export default [
+  {
+    title: '图片',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/image-1.png',
+    schema: {
+      componentName: 'DataSourceImage',
+      props: {
+        src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+        height: 120,
+        width: 120,
+      },
+    },
+  },
+];

package/lowcode/data-source-qrcode/meta.ts

@@ -0,0 +1,158 @@
+import snippets from './snippets';
+import { genGeneralVariablesSetting } from '../_utils/defaultSchema';
+
+export default {
+  snippets,
+  componentName: 'DataSourceQRCode',
+  title: '二维码',
+  category: '数据展示',
+  group: '无代码组件',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "DataSourceQRCode",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  generalProps: [
+    genGeneralVariablesSetting({
+      name: 'value',
+      title: { label: '内容', tip: '内容' },
+    }),
+  ],
+  props: [
+    {
+      name: 'value',
+      title: { label: '内容', tip: '内容' },
+      propType: 'string',
+    },
+    {
+      name: 'type',
+      title: { label: '渲染类型', tip: '渲染类型' },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: 'Canvas',
+              value: 'canvas',
+            },
+            {
+              title: 'Svg',
+              value: 'svg',
+            },
+          ],
+        },
+      },
+    },
+    {
+      name: 'icon',
+      title: { label: '二维码中图片的地址', tip: '二维码中图片的地址（目前只支持图片地址）' },
+      propType: 'string',
+    },
+    {
+      name: 'size',
+      title: { label: '二维码大小', tip: '二维码大小' },
+      propType: 'number',
+    },
+    {
+      name: 'iconSize',
+      title: { label: '二维码中图片的大小', tip: '二维码中图片的大小' },
+      propType: 'number',
+    },
+    {
+      name: 'color',
+      description: '二维码颜色',
+      propType: 'string',
+      setter: 'ColorSetter',
+    },
+    {
+      name: 'bgColor',
+      description: '二维码背景颜色',
+      propType: 'string',
+      setter: 'ColorSetter',
+    },
+    {
+      name: 'bordered',
+      title: { label: '是否有边框', tip: '是否有边框' },
+      propType: 'bool',
+      setter: 'BoolSetter'
+    },
+    {
+      name: 'errorLevel',
+      title: { label: '二维码纠错等级', tip: '通常情况下二维码分为 4 个纠错级别：L级 可纠正约 7% 错误、M级 可纠正约 15% 错误、Q级 可纠正约 25% 错误、H级 可纠正约30% 错误。并不是所有位置都可以缺损，像最明显的三个角上的方框，直接影响初始定位。中间零散的部分是内容编码，可以容忍缺损。当二维码的内容编码携带信息比较少的时候，也就是链接比较短的时候，设置不同的纠错等级，生成的图片不会发生变化。' },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: 'L',
+              value: 'L',
+            },
+            {
+              title: 'M',
+              value: 'M',
+            },
+            {
+              title: 'Q',
+              value: 'Q',
+            },
+            {
+              title: 'H',
+              value: 'H',
+            },
+          ],
+        },
+      },
+    },
+    {
+      name: 'preview',
+      title: { label: '预览功能', tip: '是否开启预览功能,点击放大展示' },
+      propType: 'bool',
+      setter: 'BoolSetter'
+    },
+    {
+      name: 'status',
+      title: { label: '二维码状态', tip: '二维码状态' },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: 'active',
+              value: 'active',
+            },
+            {
+              title: 'expired',
+              value: 'expired',
+            },
+            {
+              title: 'loading',
+              value: 'loading',
+            },
+          ],
+        },
+      },
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onRefresh',
+          template: "onRefresh(event,${extParams}){\n// 刷新\nconsole.log('onClose',event);}",
+        },
+        {
+          name: "onClick",
+          template:
+            "onClick(event,${extParams}){\n// 点击时的回调\nconsole.log('onClick', event);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/data-source-qrcode/snippets.ts

@@ -0,0 +1,20 @@
+export default [
+  {
+    title: '二维码',
+    screenshot: 'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cJopQrf0ncwAAAAAAAAAAAAADrJ8AQ/original',
+    schema: {
+      componentName: 'DataSourceQRCode',
+      props: {
+        value: "pisell2",
+        size: 160,
+        iconSize: 40,
+        status: "active",
+        errorLevel: "L",
+        type: "canvas",
+        color: "#000",
+        bgColor: "transparent",
+        bordered: true,
+      },
+    },
+  },
+];