vue#computed JavaScript Examples

hasAccessByMenuItem = (item) => {
    const hasChild = item.children && item.children.length;
    if (item.path && !hasChild) {
        return useAccess(item.path);
    }
    if (hasChild) {
        return computed(() => item.children.some((child) => {
            const rst = hasAccessByMenuItem(child);
            return rst && rst.value;
        }));
    }
    return ref(true);
}

useThemeClasses = (props, classesObj) =>
  computed(() => {
    const context = inject('KonstaContext');
    let theme = context.value.theme || 'ios';
    if (props.ios) theme = 'ios';
    if (props.material) theme = 'material';
    return themeClasses(
      typeof classesObj === 'function' ? classesObj() : classesObj,
      theme
    );
  })

useTheme = (props = {}) =>
  computed(() => {
    const context = inject('KonstaContext');
    let theme = context.value.theme || 'ios';
    if (props.ios) theme = 'ios';
    if (props.material) theme = 'material';
    return theme;
  })

export default function () {
  const seriesData = ref([25, 39, 30, 15]);
  const categories = ref(['Jun', 'Jul', 'Aug', 'Sept']);

  const chartOptions = computed(() => ({
    chart: {
      type: 'line',
    },
    title: {
      text: 'Number of project stars',
    },
    xAxis: {
      categories: categories.value,
    },
    yAxis: {
      title: {
        text: 'Number of stars',
      },
    },
    series: [{
      name: 'New project stars',
      data: seriesData.value,
    }],
  }));

  const onRender = () => {
    console.log('Chart rendered');
  };

  const onUpdate = () => {
    console.log('Chart updated');
  };

  const onDestroy = () => {
    console.log('Chart destroyed');
  };

  return {
    seriesData,
    categories,
    chartOptions,
    onRender,
    onUpdate,
    onDestroy,
  };
}

export default function createForm(globalOptions = {}) {
    const Form = {
        name: 'VueForm',
        props: vueProps,
        emits: ['update:modelValue', 'change', 'cancel', 'submit', 'validation-failed', 'form-mounted'],
        setup(props, { slots, emit }) {
            // global components
            const internalInstance = getCurrentInstance();
            if (!Form.installed && globalOptions.WIDGET_MAP.widgetComponents) {
                Object.entries(globalOptions.WIDGET_MAP.widgetComponents).forEach(
                    ([componentName, component]) => internalInstance.appContext.app.component(componentName, component)
                );

                // 只注册一次
                Form.installed = true;
            }

            // 使用provide 传递跨组件数据
            provide('genFormProvide', computed(() => ({
                fallbackLabel: props.fallbackLabel
            })));

            // rootFormData
            const rootFormData = ref(getDefaultFormState(props.schema, props.modelValue, props.schema, props.strictMode));
            const footerParams = computed(() => ({
                show: true,
                okBtn: '保存',
                okBtnProps: {},
                cancelBtn: '取消',
                ...props.formFooter
            }));

            // form组件实例，不需要响应式
            let formRef = null;

            // 更新formData
            const emitFormDataChange = (newValue, oldValue) => {
                // 支持v-model ，引用类型
                emit('update:modelValue', newValue);

                // change 事件，引用类型修改属性 newValue
                emit('change', {
                    newValue,
                    oldValue
                });
            };

            // 更新props
            const willReceiveProps = (newVal, oldVal) => {
                if (!deepEquals(newVal, oldVal)) {
                    const tempVal = getDefaultFormState(props.schema, props.modelValue, props.schema, props.strictMode);
                    if (!deepEquals(rootFormData.value, tempVal)) {
                        rootFormData.value = tempVal;
                    }
                }
            };

            // emit v-model，同步值
            watch(rootFormData, (newValue, oldValue) => {
                emitFormDataChange(newValue, oldValue);
            }, {
                deep: true
            });

            // schema 被重新赋值
            watch(() => props.schema, (newVal, oldVal) => {
                willReceiveProps(newVal, oldVal);
            });

            // model value 变更
            watch(() => props.modelValue, (newVal, oldVal) => {
                willReceiveProps(newVal, oldVal);
            });

            // 保持v-model双向数据及时性
            emitFormDataChange(rootFormData.value, props.modelValue);

            const getDefaultSlot = () => {
                if (slots.default) {
                    return slots.default({
                        formData: rootFormData,
                        formRefFn: () => formRef
                    });
                }

                if (footerParams.value.show) {
                    return h(FormFooter, {
                        globalOptions,
                        okBtn: footerParams.value.okBtn,
                        okBtnProps: footerParams.value.okBtnProps,
                        cancelBtn: footerParams.value.cancelBtn,
                        formItemAttrs: footerParams.value.formItemAttrs,
                        onCancel() {
                            emit('cancel');
                        },
                        onSubmit() {
                            // 优先获取组件 $$validate 方法，方便对 validate方法转换
                            (formRef.$$validate || formRef.validate)((isValid, resData) => {
                                if (isValid) {
                                    return emit('submit', rootFormData);
                                }
                                console.warn(resData);
                                return emit('validation-failed', resData);
                            });
                        }
                    });
                }

                return [];
            };

            return () => {
                const {
                    // eslint-disable-next-line no-unused-vars
                    layoutColumn = 1, inlineFooter, labelSuffix, isMiniDes, defaultSelectFirstOption, ...uiFormProps
                } = props.formProps;

                const { inline = false, labelPosition = 'top' } = uiFormProps;

                const schemaProps = {
                    schema: props.schema,
                    uiSchema: props.uiSchema,
                    errorSchema: props.errorSchema,
                    customFormats: props.customFormats,
                    customRule: props.customRule,
                    rootSchema: props.schema,
                    rootFormData: rootFormData.value, // 根节点的数据
                    curNodePath: '', // 当前节点路径
                    globalOptions, // 全局配置，差异化ui框架
                    formProps: {
                        labelPosition,
                        labelSuffix: '：',
                        defaultSelectFirstOption: true,
                        inline,
                        ...props.formProps
                    }
                };

                return h(
                    resolveComponent(globalOptions.COMPONENT_MAP.form),
                    {
                        class: {
                            genFromComponent: true,
                            formInlineFooter: inlineFooter,
                            formInline: inline,
                            [`genFromComponent_${props.schema.id}Form`]: !!props.schema.id,
                            layoutColumn: !inline,
                            [`layoutColumn-${layoutColumn}`]: !inline
                        },
                        setFormRef: (form) => {
                            formRef = form;
                            internalInstance.ctx.$$uiFormRef = formRef;

                            emit('form-mounted', form, {
                                formData: rootFormData.value
                            });
                        },
                        // 阻止form默认submit
                        onSubmit(e) {
                            e.preventDefault();
                        },
                        model: rootFormData,
                        labelPosition,
                        inline,
                        ...uiFormProps
                    },
                    {
                        default: () => [
                            h(
                                SchemaField,
                                schemaProps
                            ),
                            getDefaultSlot(),
                        ]
                    }
                );
            };
        },
    };

    Form.install = (vueApp, options = {}) => {
        vueApp.component(options.name || Form.name, Form);
    };

    return Form;
}