rich-core 0.0.1

package/styles/split-layout.scss

@@ -0,0 +1,167 @@
+@mixin triangle($width, $height, $color, $direction) {
+    $width: calc($width / 2);
+    $color-border-style: $height solid $color;
+    $transparent-border-style: $width solid transparent;
+    height: 0;
+    width: 0;
+
+    @if $direction==up {
+        border-bottom: $color-border-style;
+        border-left: $transparent-border-style;
+        border-right: $transparent-border-style;
+    }
+
+    @else if $direction==right {
+        border-left: $color-border-style;
+        border-top: $transparent-border-style;
+        border-bottom: $transparent-border-style;
+    }
+
+    @else if $direction==down {
+        border-top: $color-border-style;
+        border-left: $transparent-border-style;
+        border-right: $transparent-border-style;
+    }
+
+    @else if $direction==left {
+        border-right: $color-border-style;
+        border-top: $transparent-border-style;
+        border-bottom: $transparent-border-style;
+    }
+}
+
+$split-bar-bg-color: darken(#fbfbfb, 4%);
+$split-bar-ear-bg-color: darken(#fbfbfb, 7%);
+$split-bar-ear-border-color: #fbfbfb;
+$split-bar-ear-hover-color: #fff;
+
+.split-layout {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+
+    &.hori {
+        flex-direction: row;
+    }
+
+    &.vert {
+        flex-direction: column;
+    }
+
+    .center {
+        flex: 1;
+    }
+
+    .panel {
+        height: 100%;
+    }
+
+    .splitbar {
+        background: $split-bar-bg-color;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        // &.splitbar-border-right {
+        //   border-right: 1px solid $split-bar-ear-border-color;
+        // }
+
+        // &.splitbar-border-bottom {
+        //   border-bottom: 1px solid $split-bar-ear-border-color;
+        // }
+
+        // &.splitbar-border-left {
+        //   border-left: 1px solid $split-bar-ear-border-color;
+        // }
+
+        // &.splitbar-border-top {
+        //   border-top: 1px solid $split-bar-ear-border-color;
+        // }
+
+        &.hori {
+            height: 100%;
+            width: 8px;
+            cursor: e-resize;
+
+            >.vbg-ear {
+                height: 10%;
+                width: 100%;
+                cursor: pointer;
+                background: $split-bar-ear-bg-color;
+                position: relative;
+
+                &:hover {
+                    color: $split-bar-ear-hover-color;
+                }
+            }
+
+            >.triangle-dire-left {
+                &::before {
+                    content: "";
+                    width: 100%;
+                    height: 10px;
+                    position: absolute;
+                    right: 1px;
+                    top: 50%;
+                    @include triangle(10px, 5px, currentColor, left);
+                }
+            }
+
+            >.triangle-dire-right {
+                &::before {
+                    content: "";
+                    width: 100%;
+                    height: 10px;
+                    position: absolute;
+                    right: 1px;
+                    top: 50%;
+                    @include triangle(10px, 5px, currentColor, right);
+                }
+            }
+        }
+
+        &.vert {
+            width: 100%;
+            height: 8px;
+            cursor: s-resize;
+
+            >.vbg-ear {
+                width: 10%;
+                height: 8px;
+                cursor: pointer;
+                background: $split-bar-ear-bg-color;
+                position: relative;
+
+                &:hover {
+                    color: $split-bar-ear-hover-color;
+                }
+            }
+
+            >.triangle-dire-up {
+                &::before {
+                    content: "";
+                    width: 10px;
+                    height: 100%;
+                    position: absolute;
+                    right: 50%;
+                    bottom: 1px;
+                    @include triangle(10px, 5px, currentColor, up);
+                }
+            }
+
+            >.triangle-dire-down {
+                &::before {
+                    content: "";
+                    width: 10px;
+                    height: 100%;
+                    position: absolute;
+                    right: 50%;
+                    bottom: 1px;
+                    @include triangle(10px, 5px, currentColor, down);
+                }
+            }
+        }
+    }
+}

package/styles/variable.scss

@@ -0,0 +1,12 @@
+/*richform*/
+$form-background-color: #ffffff !default;
+$form-font-color: #303133 !default;
+$form-font-size: 13px !default;
+$form-border-color: #ddd !default;
+$form-primary-color: #409eff !default;
+$form-active-design-border-color: #4F9FFE !default;
+
+$form-field-title-color: #303133 !default;
+$form-field-value-color: #303133 !default;
+$form-field-question-bgcolor: #13ce66 !default;
+$form-field-error-font-color: #e83030 !default;

package/types/component.d.ts

@@ -0,0 +1,30 @@
+import { App } from 'vue'
+
+export type VComponent<
+    P = { [key: string]: any },
+    E = { [key: string]: any },
+    S = { [key: string]: (...args: any[]) => any }
+> = ({
+    new(): {
+        $props: P & E,
+        $slots: S
+    }
+} & {
+    install(app: App): void
+})
+
+export interface VComponentBase {
+    vID: string
+}
+
+export interface VEvent {
+
+}
+
+export interface VProps {
+
+}
+
+export interface VSlots {
+
+}

package/types/form-design.d.ts

@@ -0,0 +1,41 @@
+import { type } from 'ramda'
+import { VComponent, VProps, VEvent } from './component'
+
+export const FormDesign: VComponent<VProps, VEvent, FormDesignSlots>
+
+export interface FormDesignSlots {
+    headerLeft: () => any
+    headerRight: () => any
+}
+
+export const FD_METAS: {
+    button: object,
+    cascader: object,
+    checkbox: object,
+    colorpicker: object,
+    datetimepicker: object,
+    draggablelist: object,
+    expression: object,
+    icon: object,
+    input: object,
+    inputnumber: object,
+    ipinput: object,
+    multiexp: object,
+    radio: object,
+    rate: object,
+    select: object,
+    slider: object,
+    slot: object,
+    switch: object,
+    table: object,
+    text: object,
+    timepicker: object,
+    transfer: object,
+    tree: object,
+    treeselect: object,
+    upload: object,
+    layout: {
+        layout: any,
+        widgets: any
+    },
+}

package/types/index.d.ts

@@ -0,0 +1,17 @@
+import { Richform } from './richform'
+import { SplitLayout } from './split-layout'
+import { FormDesign } from './form-design'
+
+declare module '@vue/runtime-core' {
+    export interface GlobalComponents {
+        "Richform": typeof Richform,
+        "SplitLayout": typeof SplitLayout,
+        "FormDesign": typeof FormDesign,
+        "FD_METAS": Object,
+        "AJValidate": Function
+    }
+}
+
+export * from './richform'
+export * from './split-layout'
+export * from './form-design'

package/types/richform.d.ts

@@ -0,0 +1,184 @@
+import { Component } from 'vue'
+import { VComponent } from './component'
+
+export const Richform: VComponent<RichformProps, RichformEventProps, RichformSlots> & Plugin;
+
+export type SizeType = 'default' | 'large' | 'mini'
+
+declare function AJValidate(schema: object, values: object, errors: object): boolean
+
+export type FormType = {
+    border?: boolean
+    grid?: boolean
+    labelSuffix?: string
+    labelWidth?: string
+    labelAlign?: string
+    labelInline?: boolean
+    size?: SizeType
+    colors?: object
+    actions?: Array<any>
+    layout?: Array<any>
+    widget?: string
+    activeField?: boolean
+}
+
+export interface RichformConstructor { // extends RichformMethods 
+    id: string
+    props: RichformProps,
+    friendSchema?: SchemaType,
+    friendForm?: FormType,
+    topActions?: any,
+    buttomActions?: any,
+    noReady?: boolean,
+}
+
+export interface RichformProps {
+    values?: RichformProps.values,
+    form?: RichformProps.form,
+    schema?: RichformProps.schema,
+    isDesign?: RichformProps.isDesign,
+    showBtns?: RichformProps.showBtns,
+    deepValues?: RichformProps.deepValues,
+    isFriendValue?: RichformProps.isFriendValue,
+    authorization?: RichformProps.authorization,
+    item?: RichformPropsTypes.item,
+    fieldErrors?: RichformPropsTypes.fieldErrors,
+    language?: RichformPropsTypes.language,
+    theme?: RichformPropsTypes.theme,
+    _limitLoop?: RichformPropsTypes.limitLoop,
+}
+
+export namespace RichformPropsTypes {
+    export type values = object
+    export type form = FormType
+    export type schema = SchemaType
+    export type isDesign = boolean
+    export type showBtns = boolean
+    export type deepValues = boolean
+    export type isFriendValue = boolean
+    export type authorization = {
+        key?: string
+        value?: string
+        codeKey?: string
+        codeVal?: string
+        baseUrl?: string
+        msgkey?: string
+        expireCode?: string,
+    }
+    export type item = object
+    export type fieldErrors = object
+    export type language = string
+    export type theme = "dark" | "light" | ''
+    export type limitLoop = number
+}
+
+export interface RichformEventProps {
+
+}
+
+export interface RichformSlots {
+
+}
+
+export interface RichformMethods {
+    globalValidate(schema: object, values: object, fieldErrors?: object): boolean,
+    resetValues(): void
+    validateForm(schema: object, values: object): boolean
+    clickCanvas(event: Event): void
+    clickFormPs(event: Event): void
+    updateTheme(theme: any): void
+}
+
+export type SchemaType = {
+    $schema?: string
+    title?: string
+    description?: string
+    type?: string
+    properties?: object
+    errorMessage?: object
+    if?: object
+    then?: object
+    else?: object
+    required?: Array<any>
+}
+
+export type ButtonType = {
+    name: string
+    type: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
+    title: string
+    icon: string
+    tips: string
+    right: boolean
+    visible: boolean
+    top: boolean
+    size: SizeType
+    nativeType?: 'button' | 'submit' | 'reset'
+}
+
+export interface RichformReactData {
+    hideFields: object
+    dependencies: object
+    flatFields: object
+    requireds: Array<any>
+    context: ContextType
+    regExpFields: object
+    clickedField: any
+    fieldErrors: any
+}
+
+export type ContextType = {
+    loadDebounce: any,
+    loadCompleted: boolean,
+    deepValueKeys: Array<any>,
+    uploadCount: number,
+    uploadSuccess: number,
+}
+
+export type GroupType = {
+    name: string
+    title: string
+    widget: string
+}
+
+export type CollapseType = {
+    name: string
+    title: string
+    widget: string
+    expand: boolean
+    actions: Array<any>
+    fields: Array<any>
+    isClicked?: boolean
+    style?: object
+    activeDesign?: boolean
+}
+
+export type TabsType = {
+
+}
+
+/**子组件 */
+export const Button: DefineComponent<{}, {}, any>;
+export const Cascader: DefineComponent<{}, {}, any>;
+export const Checkbox: DefineComponent<{}, {}, any>;
+export const Colorpicker: DefineComponent<{}, {}, any>;
+export const Datetimepicker: DefineComponent<{}, {}, any>;
+export const Draggablelist: DefineComponent<{}, {}, any>;
+export const Expression: DefineComponent<{}, {}, any>;
+export const Icon: DefineComponent<{}, {}, any>;
+export const Input: DefineComponent<{}, {}, any>;
+export const Inputnumber: DefineComponent<{}, {}, any>;
+export const Ipinput: DefineComponent<{}, {}, any>;
+export const Multiexp: DefineComponent<{}, {}, any>;
+export const Radio: DefineComponent<{}, {}, any>;
+export const Rate: DefineComponent<{}, {}, any>;
+export const Select: DefineComponent<{}, {}, any>;
+export const Slider: DefineComponent<{}, {}, any>;
+export const Slot: DefineComponent<{}, {}, any>;
+export const Switch: DefineComponent<{}, {}, any>;
+export const Table: DefineComponent<{}, {}, any>;
+export const Text: DefineComponent<{}, {}, any>;
+export const Timepicker: DefineComponent<{}, {}, any>;
+export const Transfer: DefineComponent<{}, {}, any>;
+export const Tree: DefineComponent<{}, {}, any>;
+export const Treeselect: DefineComponent<{}, {}, any>;
+export const Upload: DefineComponent<{}, {}, any>;

package/types/split-layout.d.ts

@@ -0,0 +1,10 @@
+import { VComponent, VProps, VEvent, VSlots } from './component'
+
+export const SplitLayout: VComponent<VProps, VEvent, VSplitLayoutSlots & VSlots>
+
+export interface VSplitLayoutSlots {
+    default: () => any
+    first: () => any
+    center: () => any
+    last: () => any
+}