@next-bricks/form 0.4.6 → 0.6.0

package/docs/general-checkbox.md

@@ -0,0 +1,221 @@
+表单复选框构件。
+
+```yaml preview
+- brick: form.general-checkbox
+  properties:
+    options:
+      - Beijing
+      - Shanghai
+      - Guangzhou
+      - Shenzhen
+```
+
+## Examples
+
+### Label
+
+```yaml preview
+- brick: form.general-checkbox
+  properties:
+    label: city
+    options:
+      - Beijing
+      - Shanghai
+      - Guangzhou
+      - Shenzhen
+```
+
+### Value
+
+```yaml preview
+- brick: form.general-checkbox
+  properties:
+    value:
+      - Beijing
+      - Guangzhou
+    options:
+      - Beijing
+      - Shanghai
+      - Guangzhou
+      - Shenzhen
+```
+
+### Options
+
+```yaml preview
+- brick: form.general-checkbox
+  properties:
+    options:
+      - Beijing
+      - Shanghai
+      - Guangzhou
+      - Shenzhen
+    value:
+      - Guangzhou
+- brick: form.general-checkbox
+  properties:
+    options:
+      - label: Beijing
+        value: 0
+      - label: Shanghai
+        value: 1
+        icon:
+          icon: "bar-chart"
+          lib: "antd"
+      - label: Guangzhou
+        value: 2
+      - label: Shenzhen
+        value: 3
+    value:
+      - 2
+      - 3
+- brick: form.general-checkbox
+  properties:
+    options:
+      - true
+      - false
+    value:
+      - true
+```
+
+### Disabled
+
+```yaml preview
+- brick: form.general-checkbox
+  properties:
+    options:
+      - label: Beijing
+        value: 0
+        disabled: true
+      - label: Shanghai
+        value: 1
+      - label: Guangzhou
+        value: 2
+      - label: Shenzhen
+        value: 3
+- brick: div
+  properties:
+    style:
+      height: 20px
+- brick: form.general-checkbox
+  properties:
+    disabled: true
+    options:
+      - label: Beijing
+        value: 0
+      - label: Shanghai
+        value: 1
+      - label: Guangzhou
+        value: 2
+      - label: Shenzhen
+        value: 3
+```
+
+### Type
+
+```yaml preview
+- brick: form.general-checkbox
+  properties:
+    label: Default
+    type: default
+    options:
+      - label: Beijing
+        value: 0
+        icon:
+          icon: "search"
+          lib: "antd"
+      - label: Shanghai
+        value: 1
+        icon:
+          icon: "plus"
+          lib: "antd"
+      - label: Guangzhou
+        value: 2
+        icon:
+          icon: "edit"
+          lib: "antd"
+      - label: Shenzhen
+        value: 3
+        icon:
+          icon: "delete"
+          lib: "antd"
+- brick: div
+  properties:
+    style:
+      height: 20px
+- brick: form.general-checkbox
+  properties:
+    label: Icon
+    type: icon
+    options:
+      - label: Beijing
+        value: 0
+        icon:
+          icon: "search"
+          lib: "antd"
+      - label: Shanghai
+        value: 1
+        icon:
+          icon: "plus"
+          lib: "antd"
+      - label: Guangzhou
+        value: 2
+        icon:
+          icon: "edit"
+          lib: "antd"
+      - label: Shenzhen
+        value: 3
+        icon:
+          icon: "delete"
+          lib: "antd"
+```
+
+### Event
+
+```yaml preview
+- brick: form.general-checkbox
+  properties:
+    id: option-checkbox
+    options:
+      - label: Beijing
+        value: 0
+      - label: Shanghai
+        value: 1
+        icon:
+          icon: "bar-chart"
+          lib: "antd"
+      - label: Guangzhou
+        value: 2
+      - label: Shenzhen
+        value: 3
+  events:
+    change:
+      - action: message.success
+        args:
+          - <% JSON.stringify(EVENT.detail) %>
+    options.change:
+      - action: message.success
+        args:
+          - <% JSON.stringify(EVENT.detail) %>
+- brick: basic.general-button
+  properties:
+    textContent: Click to Change Radio Option
+  events:
+    click:
+      - target: "#option-checkbox"
+        properties:
+          options:
+            - label: Beijing
+              value: 0
+            - label: Shanghai
+              value: 1
+              icon:
+                icon: "bar-chart"
+                lib: "antd"
+            - label: Guangzhou
+              value: 2
+            - label: Shenzhen
+              value: 3
+            - label: Hangzhou
+              value: 4
+```

package/docs/general-form.md

@@ -0,0 +1,245 @@
+表单构件。
+
+## Examples
+
+### Layout
+
+```yaml preview
+- brick: form.general-form
+  properties:
+    layout: inline
+  slots:
+    "":
+      bricks:
+        - brick: form.general-input
+          properties:
+            label: input
+        - brick: form.general-select
+          properties:
+            label: select
+- brick: form.general-form
+  properties:
+    layout: horizontal
+  slots:
+    "":
+      bricks:
+        - brick: form.general-input
+          properties:
+            label: input
+        - brick: form.general-select
+          properties:
+            label: select
+```
+
+### Values
+
+```yaml preview
+- brick: form.general-form
+  properties:
+    values:
+      input: This is default value
+      select: Beijing
+      radio: Guangzhou
+      checkbox:
+        - C
+        - D
+      textarea: "Hello World! \nNice to see you!"
+      dynamicForm:
+        - input: beijing
+          select: Guangzhou
+        - input: shenzhen
+          select: Shenzhen
+  slots:
+    "":
+      bricks:
+        - brick: form.general-input
+          properties:
+            label: input
+            name: input
+        - brick: form.general-select
+          properties:
+            label: select
+            name: select
+            options:
+              - Beijing
+              - Shanghai
+        - brick: form.general-radio
+          properties:
+            label: radio
+            name: radio
+            options:
+              - Guangzhou
+              - Shenzhen
+        - brick: form.general-checkbox
+          properties:
+            name: checkbox
+            label: checkbox
+            options:
+              - A
+              - B
+              - C
+              - D
+        - brick: form.general-textarea
+          properties:
+            name: textarea
+            label: textarea
+            autoSize:
+              minRows: 3
+        - brick: form.dynamic-form-item
+          properties:
+            label: dynamic-form
+            name: dynamicForm
+            useBrick:
+              - brick: form.general-input
+                properties:
+                  name: input
+              - brick: form.general-select
+                properties:
+                  name: select
+                  options:
+                    - Beijing
+                    - Shanghai
+                    - Guangzhou
+                    - Shenzhen
+```
+
+### Events
+
+```yaml preview
+- brick: form.general-form
+  events:
+    values.change:
+      - action: console.log
+    validate.success:
+      - action: message.success
+        args:
+          - 表单提交成功
+    validate.error:
+      - action: message.error
+        args:
+          - 表单校验失败
+  slots:
+    "":
+      bricks:
+        - brick: form.general-input
+          properties:
+            required: true
+            name: name
+            label: 姓名
+            max: 6
+            min: 2
+            message:
+              required: 一定要填写姓名哟
+              max: 不能超过 6 个字符哟
+              min: 最少填写 2 个字符哟
+        - brick: form.general-select
+          properties:
+            required: true
+            name: sex
+            label: 性别
+            options:
+              - label: 男
+                value: 0
+              - label: 女
+                value: 1
+        - brick: form.submit-buttons
+```
+
+### Method
+
+```yaml preview
+- brick: form.general-form
+  properties:
+    id: form
+  slots:
+    "":
+      bricks:
+        - brick: form.general-input
+          properties:
+            required: true
+            name: name
+            label: 姓名
+            max: 6
+            min: 2
+        - brick: form.general-select
+          properties:
+            required: true
+            name: sex
+            label: 性别
+            options:
+              - label: 男
+                value: 0
+              - label: 女
+                value: 1
+- brick: basic.general-button
+  properties:
+    textContent: validateFields
+  events:
+    click:
+      - target: "#form"
+        method: validate
+- brick: basic.general-button
+  properties:
+    textContent: setInitValue
+  events:
+    click:
+      - target: "#form"
+        method: setInitValue
+        args:
+          - name: Mike
+            sex: 0
+- brick: basic.general-button
+  properties:
+    textContent: resetFields
+  events:
+    click:
+      - target: "#form"
+        method: resetFields
+- brick: basic.general-button
+  properties:
+    textContent: resetFields(name)
+  events:
+    click:
+      - target: "#form"
+        method: resetFields
+        args:
+          - name
+- brick: basic.general-button
+  properties:
+    textContent: getFieldsValue
+  events:
+    click:
+      - target: "#form"
+        method: getFieldsValue
+        callback:
+          success:
+            - action: console.log
+- brick: basic.general-button
+  properties:
+    textContent: getFieldsValue(name)
+  events:
+    click:
+      - target: "#form"
+        method: getFieldsValue
+        args:
+          - name
+        callback:
+          success:
+            - action: console.log
+- brick: basic.general-button
+  properties:
+    textContent: validateField(name)
+  events:
+    click:
+      - target: "#form"
+        method: validateField
+        args:
+          - name
+- brick: basic.general-button
+  properties:
+    textContent: resetValidateState
+  events:
+    click:
+      - target: "#form"
+        method: resetValidateState
+```

package/docs/general-input.md

@@ -0,0 +1,163 @@
+表单输入框构件。
+
+```yaml preview
+- brick: form.general-input
+```
+
+## Examples
+
+### Label
+
+```yaml preview
+- brick: form.general-input
+  properties:
+    label: 输入框
+```
+
+### Value
+
+```yaml preview
+- brick: form.general-input
+  properties:
+    value: Default Value
+```
+
+### Disabled
+
+```yaml preview
+- brick: form.general-input
+  properties:
+    value: Default Value
+    disabled: true
+```
+
+### Clearable
+
+```yaml preview
+- brick: form.general-input
+  properties:
+    value: Default Value
+    clearable: true
+```
+
+### Placeholder
+
+```yaml preview
+- brick: form.general-input
+  properties:
+    placeholder: This is placeholder...
+```
+
+### max length
+
+```yaml preview
+- brick: form.general-input
+  properties:
+    placeholder: max length = 5
+    maxLength: 5
+```
+
+### Type
+
+```yaml preview
+- brick: form.general-input
+  properties:
+    label: password
+    type: password
+- brick: form.general-input
+  properties:
+    label: date
+    type: date
+- brick: form.general-input
+  properties:
+    label: color
+    type: color
+- brick: form.general-input
+  properties:
+    label: search
+    type: search
+```
+
+### Size
+
+```yaml preview
+- brick: form.general-input
+  properties:
+    size: large
+    placeholder: large
+- brick: form.general-input
+  properties:
+    size: medium
+    placeholder: medium
+- brick: form.general-input
+  properties:
+    size: small
+    placeholder: small
+```
+
+### Input Style
+
+```yaml preview
+- brick: form.general-input
+  properties:
+    placeholder: "width: 180px"
+    inputStyle:
+      width: 180px
+- brick: form.general-input
+  properties:
+    placeholder: "width: 250px"
+    inputStyle:
+      width: 250px
+- brick: form.general-input
+  properties:
+    placeholder: "border style"
+    inputStyle:
+      border: "1px solid #8b2121"
+```
+
+### Event
+
+```yaml preview
+- brick: form.general-input
+  events:
+    label: Event
+    change:
+      action: message.success
+      args:
+        - <% EVENT.detail %>
+    focus:
+      action: message.success
+      args:
+        - focus
+    blur:
+      action: message.success
+      args:
+        - blur
+```
+
+### Slot
+
+```yaml preview
+- brick: form.general-input
+  properties:
+    placeholder: prefix slot
+  slots:
+    prefix:
+      bricks:
+        - brick: icons.general-icon
+          properties:
+            icon: search
+            lib: antd
+            theme: outlined
+- brick: form.general-input
+  properties:
+    placeholder: suffix slot
+  slots:
+    suffix:
+      bricks:
+        - brick: icons.general-icon
+          properties:
+            icon: search
+            lib: antd
+            theme: outlined
+```