vue#h JavaScript Examples

numberTimeComponent = component => defineComponent({
    inheritAttrs: false,
    setup(props, { attrs, slots }) {

        return () => {
            const {
                isNumberValue, isRange, value, ...otherAttrs
            } = attrs;

            // antdv moment format 必须接受字符串时间戳
            const newValue = isNumberValue
                ? (isRange
                    ? (value || []).map(item => (typeof item === 'number' ? String(item) : item))
                    : typeof value === 'number' ? String(value) : value
                )
                : value;

            const trueAttrs = {
                ...attrs,
                value: newValue,
                'onUpdate:value': function updateValue(upValue) {
                    if (isNumberValue) {
                        upValue = isRange ? upValue.map(item => +item) : +upValue;
                    }
                    otherAttrs['onUpdate:value'].call(this, upValue);
                }
            };

            return h(resolveComponent(component), trueAttrs, slots);
        };
    }
})

baseComponent = {
    name: 'DatePickerWidget',
    inheritAttrs: false,
    setup(props, { attrs }) {
        return () => {
            const {
                isNumberValue, isRange, modelValue, 'onUpdate:modelValue': onUpdateFormattedValue, ...otherAttrs
            } = attrs;
            const trueValue = isRange ? (modelValue && modelValue.length === 0 ? null : modelValue) : modelValue;

            return h(resolveComponent('n-date-picker'), {
                type: isRange ? 'daterange' : 'date',
                ...otherAttrs,
                ...isNumberValue ? {
                    value: trueValue,
                    onUpdateValue: onUpdateFormattedValue
                } : {
                    valueFormat: isNumberValue ? 'T' : 'yyyy-MM-dd',
                    formattedValue: trueValue,
                    onUpdateFormattedValue,
                }
            });
        };
    }
}

baseComponent = {
    name: 'SelectWidget',
    props: {
        enumOptions: {
            default: () => [],
            type: [Array]
        }
    },
    setup(props, { attrs }) {
        return () => h(resolveComponent('a-select'), {
            ...(attrs.multiple ? {
                mode: 'multiple'
            } : {}),
            ...attrs,
        }, {
            default() {
                return props.enumOptions.map((item, index) => h(resolveComponent('a-select-option'), {
                    key: index,
                    value: item.value
                }, {
                    default: () => item.label
                }));
            }
        });
    }
}

baseComponent = {
    name: 'RadioWidget',
    props: {
        enumOptions: {
            default: () => [],
            type: [Array]
        }
    },
    setup(props, { attrs }) {
        return () => h(resolveComponent('a-radio-group'), attrs, {
            default() {
                return props.enumOptions.map((item, index) => h(resolveComponent('a-radio'), {
                    key: index,
                    value: item.value
                }, {
                    default: () => item.label
                }));
            }
        });
    }
}

baseComponent = {
    name: 'DatePickerWidget',
    inheritAttrs: false,
    setup(props, { attrs }) {
        return () => {
            const { isNumberValue, isRange, ...otherAttrs } = attrs;
            return h(resolveComponent(isRange ? 'a-range-picker' : 'a-date-picker'), {
                valueFormat: isNumberValue ? 'x' : 'YYYY-MM-DDTHH:mm:ssZ',
                showTime: true,
                ...otherAttrs
            });
        };
    }
}

baseComponent = {
    name: 'DatePickerWidget',
    inheritAttrs: false,
    setup(props, { attrs }) {
        return () => {
            const { isNumberValue, isRange, ...otherAttrs } = attrs;
            return h(resolveComponent(isRange ? 'a-range-picker' : 'a-date-picker'), {
                valueFormat: isNumberValue ? 'x' : 'YYYY-MM-DD',
                ...otherAttrs
            });
        };
    }
}

baseComponent = {
    name: 'CheckboxesWidget',
    props: {
        enumOptions: {
            default: () => [],
            type: [Array]
        }
    },
    setup(props, { attrs }) {
        return () => h(resolveComponent('a-checkbox-group'), attrs, {
            default() {
                return props.enumOptions.map((item, index) => h(resolveComponent('a-checkbox'), {
                    key: index,
                    value: item.value
                }, {
                    default: () => item.label
                }));
            }
        });
    }
}

baseComponent = {
    name: 'TimePickerWidget',
    inheritAttrs: false,
    setup(props, { attrs }) {
        return () => h(resolveComponent('a-time-picker'), {
            'value-format': 'HH:mm:ss',
            ...attrs
        });
    }
}

modelValueComponent = (component, {
    model = 'value'
} = {}) => defineComponent({
    inheritAttrs: false,
    setup(props, { attrs, slots }) {
        return () => {
            const {
                modelValue: value,
                'onUpdate:modelValue': onUpdateValue,
                ...otherAttrs
            } = attrs;

            // eg: 'a-input'
            return h(resolveComponent(component), {
                [model]: value,
                [`onUpdate:${model}`]: onUpdateValue,
                ...otherAttrs
            }, slots);
        };
    }
})

function newInstance(options, callback) {
  const div = document.createElement('div')
  div.className = 'image-preview-wrapper-root'
  document.body.appendChild(div)
  const app = createApp({
    mounted() {
      const self = this // eslint-disable-line
      this.$nextTick(() => {
        callback({
          // eslint-disable-line
          open() {
            self.$refs.imageViewer.visible = true
          },
          close() {
            self.$refs.imageViewer.visible = false
          },
          destroy() {
            app && app.unmount(div)
            if (div.parentNode) {
              div.parentNode.removeChild(div)
            }
          }
        })
      })
    },
    render() {
      const props = {
        ...options,
        ref: 'imageViewer'
      }
      return h(ImageViewer, props)
    }
  })
  app.mount(div)
}

globalOptions = {
    WIDGET_MAP,
    COMPONENT_MAP: {
        form: defineComponent({
            inheritAttrs: false,
            setup(props, { attrs, slots }) {
                const formRef = ref(null);
                if (attrs.setFormRef) {
                    onMounted(() => {
                        attrs.setFormRef(formRef.value);
                    });
                }

                return () => {
                    // eslint-disable-next-line no-unused-vars
                    const { setFormRef, ...otherAttrs } = attrs;

                    return h(vueUtils.resolveComponent('el-form'), {
                        ref: formRef,
                        ...otherAttrs
                    }, slots);
                };
            }
        }),
        formItem: 'el-form-item',
        button: 'el-button',
        popover: 'el-popover'
    },
    HELPERS: {
        // 是否mini显示 description
        isMiniDes(formProps) {
            return formProps && ['left', 'right'].includes(formProps.labelPosition);
        }
    }
}

baseComponent = {
    name: 'CheckboxesWidget',
    props: {
        enumOptions: {
            default: () => [],
            type: [Array]
        }
    },
    setup(props, { attrs }) {
        return () => h(resolveComponent('n-checkbox-group'), attrs, {
            default() {
                return h(resolveComponent('n-space'), {
                    itemStyle: 'display: flex'
                }, {
                    default() {
                        return props.enumOptions.map((item, index) => h(resolveComponent('n-checkbox'), {
                            key: index,
                            value: item.value
                        }, {
                            default: () => item.label
                        }));
                    }
                });
            }
        });
    }
}

export default function createIcon({ name, content, width, height }) {
  return {
    name,
    inheritAttrs: false,
    props: {
      spin: Boolean,
    },
    setup(props, { attrs }) {
      const iconClasses = [baseClassName]

      if (props.spin) {
        iconClasses.push(`${baseClassName}-spin`)
      }

      return () =>
        h(
          'svg',
          mergeProps(
            {
              class: iconClasses,
              width,
              height,
              viewBox: `0 0 ${width} ${height}`,
              focusable: attrs.tabindex !== '0' ? 'false' : null,
              innerHTML:
                (attrs.title
                  ? `<title>${escapeHTML(attrs.title)}</title>`
                  : '') + content,
            },
            attrs
          )
        )
    },
  }
}

baseComponent = {
    name: 'DatePickerWidget',
    inheritAttrs: false,
    setup(props, { attrs }) {
        return () => {
            const {
                isNumberValue, isRange, modelValue, 'onUpdate:modelValue': onUpdateFormattedValue, ...otherAttrs
            } = attrs;
            const trueValue = isRange ? (modelValue && modelValue.length === 0 ? null : modelValue) : modelValue;

            return h(resolveComponent('n-date-picker'), {
                type: isRange ? 'datetimerange' : 'datetime',
                ...otherAttrs,
                ...isNumberValue ? {
                    value: trueValue,
                    onUpdateValue: onUpdateFormattedValue
                } : {
                    valueFormat: isNumberValue ? 'T' : 'yyyy-MM-dd\'T\'HH:mm:ss.SSS\'Z\'',
                    formattedValue: trueValue,
                    onUpdateFormattedValue,
                }
            });
        };
    }
}

baseComponent = {
    name: 'RadioWidget',
    props: {
        enumOptions: {
            default: () => [],
            type: [Array]
        }
    },
    setup(props, { attrs }) {
        return () => h(resolveComponent('n-radio-group'), attrs, {
            default() {
                return props.enumOptions.map((item, index) => h(resolveComponent('n-radio'), {
                    key: index,
                    value: item.value
                }, {
                    default: () => item.label
                }));
            }
        });
    }
}

baseComponent = {
    name: 'SelectWidget',
    props: {
        enumOptions: {
            default: () => [],
            type: [Array]
        }
    },
    setup(props, { attrs }) {
        return () => h(resolveComponent('n-select'), {
            options: props.enumOptions,
            ...attrs,
        });
    }
}

baseComponent = {
    name: 'TimePickerWidget',
    inheritAttrs: false,
    setup(props, { attrs }) {
        return () => {
            const {
                modelValue, 'onUpdate:modelValue': onUpdateFormattedValue, ...otherAttrs
            } = attrs;

            return h(resolveComponent('n-time-picker'), {
                ...otherAttrs,
                valueFormat: 'HH:mm:ss',
                formattedValue: modelValue,
                onUpdateFormattedValue,
            });
        };
    }
}

describe.each([
  ["a", ["a", "b"]],
  ["n", [0, 1]],
  [({ a, n }) => `${a}-${n}`, ["a-0", "b-1"]]
])("when using %p as item-key", (itemKey, expected) => {
  beforeEach(() => {
    resetMocks();

    wrapper = mount(draggable, {
      props: {
        list: [
          { a: "a", n: 0 },
          { a: "b", n: 1 }
        ],
        itemKey
      },
      slots: {
        item: ({ element }) => {
          return h("div", null, element);
        }
      }
    });
    element = wrapper.element;
  });
  it("sets nodes keys accordingly", () => {
    const keys = [0, 1]
      .map(index => element.children.item(index))
      .map(el => el.__vnode.key);
    expect(keys).toEqual(expected);
  });
});

app = createApp({
    mixins: [
        socket,
        theme,
        mobile,
        datetime,
        publicMixin,
        lang,
    ],
    data() {
        return {
            appName: appName
        };
    },
    render: () => h(App),
})

button = {
  name: 'btn-component',
  render() {
    return h(
      'button',
      {
        id: 'btn-primary',
      },
      'Hello World',
    );
  },
}

createApp({
  myOption: 'hello!',
  render: () => h(App),
}).mount('#app');

widgetComponents = {
    CheckboxesWidget,
    RadioWidget,
    SelectWidget,
    TimePickerWidget,
    DatePickerWidget,
    DateTimePickerWidget,
    UploadWidget,
    InputWidget: modelValueComponent('a-input'),
    ColorWidget: {
        setup(props, { attrs }) {
            return () => h(widgetComponents.InputWidget, {
                ...attrs,
                style: {
                    ...attrs.style || {},
                    maxWidth: '180px'
                }
            }, {
                addonAfter: () => h('input', {
                    disabled: attrs.disabled,
                    readonly: attrs.readonly,
                    value: attrs.modelValue,
                    onInput(e) {
                        attrs['onUpdate:modelValue'](e.target.value);
                    },
                    onChange(e) {
                        attrs['onUpdate:modelValue'](e.target.value);
                    },
                    type: 'color',
                    style: {
                        padding: '0',
                        width: '50px'
                    }
                })
            });
        }
    },
    TextAreaWidget: modelValueComponent('a-textarea'),
    InputNumberWidget: modelValueComponent('a-input-number'),
    AutoCompleteWidget: modelValueComponent('a-auto-complete'),
    SliderWidget: modelValueComponent('a-slider'),
    RateWidget: modelValueComponent('a-rate'),
    SwitchWidget: modelValueComponent('a-switch', {
        model: 'checked'
    }),
}

test('it can create an instance with children', () => {
  const comp = createComponent()
  const children = () => h('span', 'hello')
  const { el } = createComponentInstance(comp, { children })
  assert.is(el.querySelector('h1').textContent, 'Hello hello')
})

test('it can create an instance with props and children', () => {
  const comp = createComponent()
  const props = { name: 'there ' }
  const children = () => h('span', 'world')
  const { el } = createComponentInstance(comp, { props, children })
  assert.is(el.querySelector('h1').textContent, 'Hello there world')
})

vueHighcharts = defineComponent({
  name: 'VueHighchart',
  props: {
    type: {
      type: String,
      default: 'chart',
    },

    options: {
      type: Object,
      required: true,
    },

    redrawOnUpdate: {
      type: Boolean,
      default: true,
    },

    oneToOneUpdate: {
      type: Boolean,
      default: false,
    },

    animateOnUpdate: {
      type: Boolean,
      default: true,
    },
  },

  setup(props, { emit }) {
    const chartRef = ref(null);
    const chart = ref(null);

    const { options } = toRefs(props);

    if (options.value && Highcharts[props.type]) {
      watch(options, (newValue) => {
        if (chart.value) {
          chart.value.update(newValue, props.redrawOnUpdate, props.oneToOneOnUpdate, props.animateOnUpdate);
          emit('updated');
        }
      }, { deep: true });

      onMounted(() => {
        chart.value = Highcharts[props.type](chartRef.value, options.value, () => {
          emit('rendered');
        });
      });

      onUnmounted(() => {
        if (chart.value) chart.value.destroy();
        emit('destroyed');
      });
    } else if (!props.options) {
      console.warn('The "options" parameter is required.');
    } else {
      console.warn(`${props.type} is not a valid highcharts type or has not been imported`);
    }

    // Rather than returning a render function here. We'll return the chart ref and highcharts
    // instance so there exposed.
    return {
      chartRef,
      chart,
    };
  },

  render() {
    return h('div', {
      class: 'vue-highcharts',
      ref: 'chartRef',
    });
  },
})

function createInstance() {
  const comp = {
    setup() {
      const visible = ref(false)

      let attrs = {}
      const open = opts => {
        visible.value = true
        attrs = opts
      }

      const close = () => {
        visible.value = false
      }

      const toggle = val => {
        visible.value = val
      }

      const render = () => {
        attrs = {
          ...attrs,
          visible: visible.value,
          'onUpdate:visible': toggle
        }

        return h(ContextMenu, attrs)
      }

      // rewrite render function
      getCurrentInstance().render = render

      return {
        open,
        close
      }
    }
  }
  const { instance } = mountComponent(comp, 'context-menu-wrapper-root')

  return instance
}

describe("when using only footer slot with an empty list", () => {
  beforeEach(async () => {
    resetMocks();

    wrapper = mount(draggable, {
      props: {
        tag: "ul",
        list: [],
        itemKey: k => k
      },
      slots: {
        item: ({ element }) => h("li", null, element),
        footer: () => h("footer", null, "I am the footer")
      }
    });
    vm = wrapper.vm;
    element = wrapper.element;
  });

  it("renders correctly", () => {
    const expectedDOM = `<ul><footer>I am the footer</footer></ul>`;
    expectHTML(wrapper, expectedDOM);
  });

  describe("when add is called", () => {
    let newItem;
    const expectedDOMAfterUpdate = `<ul><li data-draggable="true">1</li><footer>I am the footer</footer></ul>`;
    beforeEach(async () => {
      await nextTick();

      newItem = document.createElement("li");
      const newContent = document.createTextNode("1");
      newItem.appendChild(newContent);
      newItem._underlying_vm_ = "1";
      const last = element.children[0];
      element.insertBefore(newItem, last);

      const add = getEvent("onAdd");
      add({
        item: newItem,
        newIndex: 0
      });
    });

    it("DOM changes should be performed", async () => {
      await nextTick();
      expectHTML(wrapper, expectedDOMAfterUpdate);
    });

    it("list should be updated", async () => {
      await nextTick();
      expect(vm.list).toEqual(["1"]);
    });

    it("sends a update event", async () => {
      await nextTick();
      const expectedEvt = {
        item: newItem,
        newIndex: 0
      };
      expect(wrapper.emitted().add).toEqual([[expectedEvt]]);
    });

    it("sends a change event", async () => {
      await nextTick();
      const expectedEvt = { added: { element: "1", newIndex: 0 } };
      expect(wrapper.emitted().change).toEqual([[expectedEvt]]);
    });
  });
});

describe("when using only footer slot with an none-empty list", () => {
  beforeEach(async () => {
    resetMocks();

    wrapper = mount(draggable, {
      props: {
        tag: "ul",
        list: ["first"],
        itemKey: k => k
      },
      slots: {
        item: ({ element }) => h("li", null, element),
        footer: () => h("footer", null, "I am the footer")
      }
    });
    vm = wrapper.vm;
    element = wrapper.element;
  });

  it("renders correctly", () => {
    const expectedDOM = `<ul><li data-draggable="true">first</li><footer>I am the footer</footer></ul>`;
    expectHTML(wrapper, expectedDOM);
  });

  describe("when add is called", () => {
    let newItem;
    const expectedDOMAfterUpdate = `<ul><li data-draggable="true">first</li><li data-draggable="true">last</li><footer>I am the footer</footer></ul>`;
    beforeEach(async () => {
      await nextTick();

      newItem = document.createElement("li");
      const newContent = document.createTextNode("1");
      newItem.appendChild(newContent);
      newItem._underlying_vm_ = "last";
      const last = element.children[1];
      element.insertBefore(newItem, last);

      const add = getEvent("onAdd");
      add({
        item: newItem,
        newIndex: 1
      });
    });

    it("DOM changes should be performed", async () => {
      await nextTick();
      expectHTML(wrapper, expectedDOMAfterUpdate);
    });

    it("list should be updated", async () => {
      await nextTick();
      expect(vm.list).toEqual(["first", "last"]);
    });

    it("sends a update event", async () => {
      await nextTick();
      const expectedEvt = {
        item: newItem,
        newIndex: 1
      };
      expect(wrapper.emitted().add).toEqual([[expectedEvt]]);
    });

    it("sends a change event", async () => {
      await nextTick();
      const expectedEvt = { added: { element: "last", newIndex: 1 } };
      expect(wrapper.emitted().change).toEqual([[expectedEvt]]);
    });
  });
});

app.use(Fragment.Plugin, { h })