@cicctencent/formily 0.0.0-stage → 0.0.1

package/src/components/row/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="formily-row" :style="styles">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue';
+
+export default defineComponent({
+  props: {
+    alignItems: {
+      type: String,
+      default: 'center',
+    },
+    justifyContent: {
+      type: String,
+      default: 'end',
+    },
+    position: {
+      type: String,
+      default: 'absolute',
+    },
+    zIndex: {
+      type: Number,
+      default: 30000,
+    },
+  },
+  setup(props) {
+    const styles = computed(() => {
+      return {
+        alignItems: props.alignItems,
+        justifyContent: props.justifyContent,
+        zIndex: props.zIndex,
+        position: props.position,
+      };
+    });
+
+    return { styles };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.formily-row {
+  display: flex;
+  width: 100%;
+
+  .formily-element-plus-form-item {
+    margin-bottom: 0px !important;
+  }
+}
+</style>

package/src/components/select/index.ts

@@ -0,0 +1,19 @@
+import { connect, mapProps } from '@formily/vue';
+import { transformComponent } from '../__builtins__';
+
+import JtSelect from '../base/Select/index.vue';
+export type SelectProps = typeof JtSelect;
+
+const TransformSelect = transformComponent<SelectProps>(JtSelect, {
+    change: 'update:modelValue',
+});
+
+export const Select = connect(
+    TransformSelect,
+    mapProps({
+        value: 'modelValue',
+        readOnly: 'readonly',
+    })
+);
+
+export default Select;

package/src/components/select/style.ts

@@ -0,0 +1,5 @@
+import "@cicctencent/jtui/theme-chalk/src/select.scss";
+
+import "@cicctencent/jtui/theme-chalk/src/option.scss";
+
+import "../preview-text/style";

package/src/components/space/index.ts

@@ -0,0 +1,98 @@
+import { defineComponent, SetupContext, h } from "vue";
+import type { VNode } from "vue";
+import { stylePrefix } from "../__builtins__";
+import { useFormLayout } from "../form-layout";
+
+export type SpaceProps = {
+  size: "small" | "middle" | "large" | number;
+  direction: "horizontal" | "vertical";
+  align: "start" | "end" | "center" | "baseline";
+};
+
+const spaceSize = {
+  small: 8,
+  middle: 16,
+  large: 24,
+};
+
+export const Space = defineComponent({
+  name: "FSpace",
+  props: ["size", "direction", "align"],
+  setup(props: SpaceProps, { slots }: SetupContext) {
+    const layout = useFormLayout();
+
+    return () => {
+      const {
+        align,
+        size = layout.value?.spaceGap ?? "small",
+        direction = "horizontal",
+      } = props;
+
+      const prefixCls = `${stylePrefix}-space`;
+      const children: any = slots.default?.();
+
+      // 获取子节点数量
+      let items: VNode[] = [];
+      if (Array.isArray(children)) {
+        if (children.length === 1) {
+          if ((children[0]["tag"] as string)?.endsWith("Fragment")) {
+            // Fragment hack
+            items = (children[0]["componentOptions"] as { children: VNode[] })
+              ?.children;
+          } else {
+            items = children;
+          }
+        } else {
+          items = children;
+        }
+      }
+      const len = items.length;
+
+      if (len === 0) {
+        return null;
+      }
+
+      const mergedAlign =
+        align === undefined && direction === "horizontal" ? "center" : align;
+      const marginDirection = "marginRight"; // directionConfig === 'rtl' ? 'marginLeft' : 'marginRight';
+
+      const someSpaceClass = {
+        [prefixCls]: true,
+        [`${prefixCls}-${direction}`]: true,
+        [`${prefixCls}-align-${mergedAlign}`]: mergedAlign,
+      };
+
+      const itemClassName = `${prefixCls}-item`;
+
+      const renderItems = items.map((child, i) =>
+        h(
+          "div",
+          {
+            class: itemClassName,
+            key: `${itemClassName}-${i}`,
+            style:
+              i === len - 1
+                ? {}
+                : {
+                    [direction === "vertical"
+                      ? "marginBottom"
+                      : marginDirection]:
+                      typeof size === "string"
+                        ? `${spaceSize[size]}px`
+                        : `${size}px`,
+                  },
+          },
+          { default: () => [child] }
+        )
+      );
+
+      return h(
+        "div",
+        { class: someSpaceClass },
+        { default: () => renderItems }
+      );
+    };
+  },
+});
+
+export default Space;

package/src/components/space/style.scss

@@ -0,0 +1,24 @@
+@import '../__builtins__/styles/common.scss';
+
+.#{$formily-prefix}-space {
+  display: inline-flex;
+
+  &-vertical {
+    flex-direction: column;
+  }
+
+  &-align {
+    &-center {
+      align-items: center;
+    }
+    &-start {
+      align-items: flex-start;
+    }
+    &-end {
+      align-items: flex-end;
+    }
+    &-baseline {
+      align-items: baseline;
+    }
+  }
+}

package/src/components/space/style.ts

@@ -0,0 +1 @@
+import './style.scss'

package/src/components/submit/index.ts

@@ -0,0 +1,59 @@
+import { defineComponent, SetupContext } from 'vue'
+import { h, useParentForm } from '@formily/vue'
+import { IFormFeedback } from '@formily/core'
+import { observer } from '@formily/reactive-vue'
+
+import type { ElButton as ElButtonProps } from '@cicctencent/jtui'
+import { ElButton } from '@cicctencent/jtui'
+
+export type ISubmitProps = {
+  onClick?: (e: MouseEvent) => any
+  onSubmit?: (values: any) => any
+  onSubmitSuccess?: (payload: any) => void
+  onSubmitFailed?: (feedbacks: IFormFeedback[]) => void
+} & typeof ElButtonProps
+
+export const Submit = observer(
+  defineComponent({
+    name: 'FSubmit',
+    props: ['onClick', 'onSubmit', 'onSubmitSuccess', 'onSubmitFailed'],
+    setup(props, { attrs, slots }: SetupContext) {
+      const formRef = useParentForm()
+
+      return () => {
+        const {
+          onClick = attrs?.onClick,
+          onSubmit = attrs?.onSubmit,
+          onSubmitSuccess = attrs?.onSubmitSuccess,
+          onSubmitFailed = attrs?.onSubmitFailed,
+        } = props
+
+        const form = formRef?.value
+        return h(
+          ElButton,
+          {
+            nativeType: attrs?.submit ? 'button' : 'submit',
+            type: 'primary',
+            ...attrs,
+            loading:
+              attrs.loading !== undefined ? attrs.loading : form?.submitting,
+            onClick: (e: any) => {
+              if (onClick) {
+                if (onClick(e) === false) return
+              }
+              if (onSubmit) {
+                form
+                  ?.submit(onSubmit as (e: any) => void)
+                  .then(onSubmitSuccess as (e: any) => void)
+                  .catch(onSubmitFailed as (e: any) => void)
+              }
+            },
+          },
+          slots
+        )
+      }
+    },
+  })
+)
+
+export default Submit

package/src/components/submit/style.ts

@@ -0,0 +1 @@
+import '@cicctencent/jtui/theme-chalk/src/button.scss'

package/src/components/switch/index.ts

@@ -0,0 +1,9 @@
+import { connect, mapProps } from '@formily/vue';
+
+import JtSwitch from '../base/Switch/index.vue';
+
+export type SwitchProps = typeof JtSwitch;
+
+export const Switch = connect(JtSwitch, mapProps({ value: 'modelValue' }));
+
+export default Switch;

package/src/components/switch/style.ts

@@ -0,0 +1 @@
+import '@cicctencent/jtui/theme-chalk/src/switch.scss'

package/src/components/text/index.ts

@@ -0,0 +1,21 @@
+import { transformComponent } from '../__builtins__';
+import { connect, mapProps } from '@formily/vue';
+
+import FormilyText from '../base/Text/index.vue';
+
+export type FormilyTextProps = typeof FormilyText;
+
+const TransformFormilyText = transformComponent<FormilyTextProps>(
+    FormilyText,
+    { change: 'update:modelValue' }
+);
+
+export const Text = connect(
+    TransformFormilyText,
+    mapProps({
+        value: 'modelValue',
+        readOnly: 'readonly',
+    })
+);
+
+export default Text;

package/src/components/time-picker/index.ts

@@ -0,0 +1,21 @@
+import { transformComponent } from '../__builtins__/shared';
+import { connect, mapProps, mapReadPretty } from '@formily/vue';
+import { PreviewText } from '../preview-text';
+import { ElTimePicker } from '@cicctencent/jtui';
+
+export type TimePickerProps = typeof ElTimePicker;
+
+const TransformElTimePicker = transformComponent<TimePickerProps>(
+    ElTimePicker,
+    {
+        change: 'update:modelValue',
+    }
+);
+
+export const TimePicker = connect(
+    TransformElTimePicker,
+    mapProps({ readOnly: 'readonly', value: 'modelValue' }),
+    mapReadPretty(PreviewText.TimePicker)
+);
+
+export default TimePicker;

package/src/components/time-picker/style.ts

@@ -0,0 +1,4 @@
+import '@cicctencent/jtui/theme-chalk/src/time-picker.scss'
+
+// 依赖
+import '../preview-text/style'

package/src/components/transfer/index.ts

@@ -0,0 +1,12 @@
+import { connect, mapProps } from '@formily/vue'
+
+import { ElTransfer } from '@cicctencent/jtui'
+
+export type TransferProps = typeof ElTransfer
+
+export const Transfer = connect(
+  ElTransfer,
+  mapProps({ dataSource: 'data', value: 'modelValue' })
+)
+
+export default Transfer

package/src/components/transfer/style.ts

@@ -0,0 +1 @@
+import '@cicctencent/jtui/theme-chalk/src/transfer.scss'

package/src/components/upload/index.ts

@@ -0,0 +1,136 @@
+import { Field } from '@formily/core'
+import { defineComponent, h } from 'vue'
+import { connect, mapProps, useField, FragmentComponent } from '@formily/vue'
+import {
+  UploadFilled,
+  Upload as UploadIcon,
+  Plus,
+} from '@cicctencent/icons-vue'
+import { ElUpload, ElButton, ElIcon } from '@cicctencent/jtui'
+import type { UploadFile } from '@cicctencent/jtui/es/components/upload/src/upload'
+
+export type UploadProps = typeof ElUpload & {
+  textContent?: string
+  errorAdaptor?: (error?: ErrorEvent) => string
+}
+
+const UploadWrapper = defineComponent({
+  name: 'FUpload',
+  props: {
+    textContent: {
+      type: String,
+      default: '',
+    },
+    errorAdaptor: {
+      type: Function,
+      default(error?: ErrorEvent) {
+        return error?.message || ''
+      },
+    },
+    fileList: {
+      type: Array,
+    },
+  },
+  setup(curProps: any, { slots, attrs, emit }) {
+    return () => {
+      const fieldRef = useField<Field>()
+      const setFeedBack = (error?: ErrorEvent) => {
+        const message = curProps.errorAdaptor!(error)
+
+        fieldRef.value.setFeedback({
+          type: 'error',
+          code: 'UploadError',
+          messages: message ? [message] : [],
+        })
+      }
+
+      type Fn = (...args: any[]) => any
+      const props = {
+        ...attrs,
+        onChange(file: UploadFile, fileList: UploadFile[]) {
+          !(attrs.onChange as Fn)?.(file, fileList)
+          setFeedBack()
+          emit('change', fileList)
+        },
+
+        onRemove(file: UploadFile, fileList: UploadFile[]) {
+          !(attrs.onRemove as Fn)?.(file, fileList)
+          setFeedBack()
+          emit('change', fileList)
+        },
+
+        onError(error: ErrorEvent, file: UploadFile, fileList: UploadFile[]) {
+          !(attrs.onError as Fn)?.(error, file, fileList)
+
+          setTimeout(() => {
+            setFeedBack(error)
+          }, 0)
+        },
+      }
+      const children = {
+        ...slots,
+      } as any
+      if (!slots.default) {
+        children.default = () => {
+          const listType = attrs.listType
+          const drag = attrs.drag
+
+          if (drag) {
+            return h(
+              FragmentComponent,
+              {},
+              {
+                default: () => [
+                  h(
+                    ElIcon,
+                    { style: { fontSize: '60px', margin: '40px 0 16px' } },
+                    { default: () => h(UploadFilled, { color: 'gray' }, {}) }
+                  ),
+                  h(
+                    'div',
+                    { staticClass: 'el-upload__text' },
+                    { default: () => [curProps.textContent] }
+                  ),
+                ],
+              }
+            )
+          }
+
+          if (listType === 'picture-card') {
+            return h(
+              Plus,
+              {
+                style: {
+                  width: '28px',
+                  height: '28px',
+                  marginTop: '60px',
+                  color: 'gray',
+                },
+              },
+              {}
+            )
+          }
+
+          return h(
+            ElButton,
+            {},
+            {
+              default: () => [
+                h(UploadIcon, { style: { width: '12px', height: '12px' } }),
+                curProps.textContent,
+              ],
+            }
+          )
+        }
+      }
+      return h(ElUpload as any, { ...props, ...attrs }, children)
+    }
+  },
+})
+
+export const Upload = connect(
+  UploadWrapper,
+  mapProps({ readOnly: 'readonly', value: 'fileList' })
+)
+
+export default Upload

package/src/components/upload/style.ts

@@ -0,0 +1,2 @@
+import '@cicctencent/jtui/theme-chalk/src/upload.scss'
+import '@cicctencent/jtui/theme-chalk/src/button.scss'

package/src/components/upload-button/index.ts

@@ -0,0 +1,21 @@
+import { transformComponent } from '../__builtins__';
+import { connect, mapProps } from '@formily/vue';
+
+import ElUploadButton from './index.vue';
+
+export type ElUploadButtonProps = typeof ElUploadButton;
+
+const TransformUploadButton = transformComponent<ElUploadButtonProps>(
+    ElUploadButton,
+    { change: 'update:modelValue' }
+);
+
+export const UploadButton = connect(
+    TransformUploadButton,
+    mapProps({
+        value: 'modelValue',
+        readOnly: 'readonly',
+    })
+);
+
+export default UploadButton;