@pisell/materials 3.0.62 → 6.0.1

package/lowcode/form-item-color-picker/meta.ts

@@ -0,0 +1,314 @@
+import snippets from './snippets';
+import { formItemGeneralDataGroup, getFormItemGeneralInfoGroup, generalItemMap, getFormItemValidateGroup } from '../_utils/defaultSchema';
+export default {
+  snippets,
+  componentName: 'FormItemColorPicker',
+  title: '颜色选择器',
+  category: '表单',
+  group: '无代码组件',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'FormItemColorPicker',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  generalProps: [
+    // 数据分组
+    formItemGeneralDataGroup,
+    // 信息分组
+    getFormItemGeneralInfoGroup([
+      generalItemMap['label'],
+      generalItemMap['tooltip'],
+      generalItemMap['extra'],
+      generalItemMap['hideLabel'],
+      generalItemMap['renderMode'],
+    ]),
+     // 校验分组
+     getFormItemValidateGroup([generalItemMap['requiredobj']]),
+  ],
+  props: [
+    {
+      name: 'allowClear',
+      title: { label: '清除', tip: '允许清除选择的颜色' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'arrow',
+      title: { label: '箭头', tip: '配置弹出的箭头' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'children',
+      title: { label: '触发器', tip: '颜色选择器的触发器' },
+      setter: 'SlotSetter',
+    },
+    {
+      name: 'defaultValue',
+      title: { label: '默认值', tip: '默认内容' },
+      propType: 'string',
+      setter: 'StringSetter',
+    },
+    {
+      name: 'defaultFormat',
+      title: { label: '格式', tip: '颜色格式默认的值' },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: 'rgb',
+              value: 'rgb',
+            },
+            {
+              title: 'hex',
+              value: 'hex',
+            },
+            {
+              title: 'hsb',
+              value: 'hsb',
+            },
+          ],
+        },
+      },
+      propType: { type: 'oneOf', value: ['rgb', 'hex', 'hsb'] },
+    },
+    {
+      name: 'disabled',
+      title: { label: '是否禁用', tip: '是否为禁用状态' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'disabledAlpha',
+      title: { label: '禁用透明度', tip: '禁用透明度' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'disabledFormat',
+      title: { label: '禁用选择颜色格式', tip: '禁用选择颜色格式' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'destroyTooltipOnHide',
+      title: { label: '关闭后是否销毁弹窗', tip: '关闭后是否销毁弹窗' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'format',
+      title: { label: '颜色格式', tip: '颜色格式' },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: 'rgb',
+              value: 'rgb',
+            },
+            {
+              title: 'hex',
+              value: 'hex',
+            },
+            {
+              title: 'hsb',
+              value: 'hsb',
+            },
+          ],
+        },
+      },
+      propType: { type: 'oneOf', value: ['rgb', 'hex', 'hsb'] },
+    },
+    {
+      name: 'open',
+      title: { label: '是否显示弹出窗口', tip: '是否显示弹出窗口' },
+      propType: 'bool',
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'presets',
+      title: { label: '预设的颜色', tip: '预设的颜色' },
+      setter: 'JsonSetter',
+    },
+    {
+      name: 'placement',
+      title: { label: '弹出窗口的位置', tip: '弹出窗口的位置' },
+      propType: {
+        type: 'oneOf',
+        value: [
+          'top',
+          'left',
+          'right',
+          'bottom',
+          'topLeft',
+          'topRight',
+          'bottomLeft',
+          'bottomRight',
+          'leftTop',
+          'leftBottom',
+          'rightTop',
+          'rightBottom',
+        ],
+      },
+      defaultValue: 'top',
+      setter: {
+        componentName: 'SelectSetter',
+        props: {
+          options: [
+            {
+              title: '上',
+              value: 'top',
+            },
+            {
+              title: '左',
+              value: 'left',
+            },
+            {
+              title: '右',
+              value: 'right',
+            },
+            {
+              title: '下',
+              value: 'bottom',
+            },
+            {
+              title: '上左',
+              value: 'topLeft',
+            },
+            {
+              title: '上右',
+              value: 'topRight',
+            },
+            {
+              title: '下左',
+              value: 'bottomLeft',
+            },
+            {
+              title: '下右',
+              value: 'bottomRight',
+            },
+            {
+              title: '左上',
+              value: 'leftTop',
+            },
+            {
+              title: '左下',
+              value: 'leftBottom',
+            },
+            {
+              title: '右上',
+              value: 'rightTop',
+            },
+            {
+              title: '右下',
+              value: 'rightBottom',
+            },
+          ],
+        },
+      },
+    },
+    {
+      name: 'value',
+      title: { label: '当前值', tip: '当前值' },
+      propType: 'string',
+      setter: 'StringSetter',
+    },
+    {
+      name: 'showText',
+      title: { label: '是否显示弹出窗口', tip: '是否显示弹出窗口' },
+      propType: 'bool',
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'size',
+      title: { label: '控件大小', tip: '控件大小' },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: '大',
+              value: 'large',
+            },
+            {
+              title: '中',
+              value: 'middle',
+            },
+            {
+              title: '小',
+              value: 'small',
+            },
+          ],
+        },
+      },
+      propType: { type: 'oneOf', value: ['large', 'middle', 'small'] },
+      defaultValue: 'middle',
+    },
+    {
+      name: 'trigger',
+      title: { label: '触发模式', tip: '颜色选择器的触发模式' },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: 'hover',
+              value: 'hover',
+            },
+            {
+              title: 'click',
+              value: 'click',
+            },
+          ],
+        },
+      },
+      propType: { type: 'oneOf', value: ['hover', 'click'] },
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            "onChange(event, css,${extParams}){\n// 颜色变化的回调\nconsole.log('onChange',event, css);}",
+        },
+        {
+          name: 'onChangeComplete',
+          template:
+            "onChangeComplete(event,${extParams}){\n// 颜色选择完成的回调，通过 onChangeComplete 对 value 受控时拖拽不会改变展示颜色\nconsole.log('onChangeComplete',event);}",
+        },
+        {
+          name: 'onFormatChange',
+          template:
+            "onFormatChange(event,${extParams}){\n// 颜色格式变化的回调\nconsole.log('onFormatChange',event);}",
+        },
+        {
+          name: 'onOpenChange',
+          template:
+            "onOpenChange(event,${extParams}){\n// 当 open 被改变时的回调\nconsole.log('onOpenChange',event);}",
+        },
+        {
+          name: 'onClear',
+          template:
+            "onClear(event,${extParams}){\n// 清除的回调\nconsole.log('onClear',event);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/form-item-color-picker/snippets.ts

@@ -0,0 +1,11 @@
+export default [
+  {
+    title: '颜色选择器',
+    screenshot: 'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PpY4RYNM8UcAAAAAAAAAAAAADrJ8AQ/original',
+    schema: {
+      title: '颜色选择器',
+      componentName: 'FormItemColorPicker',
+      props: {},
+    },
+  },
+];