@vyr/element-plus-browser 0.0.1

package/src/service/inspector/VueViewer.vue

@@ -0,0 +1,65 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get(`descriptor.type.${descriptor.type}` as any)" :scroll="true">
+        <BaseFragment :raw="raw" />
+        <HTMLFragment v-if="ignore.includes(descriptor.type) === false" :raw="raw" />
+        <component :is="PropsViewer" :raw="raw"></component>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { computed, defineAsyncComponent, ref, Ref, watch } from 'vue';
+import { VyrCard } from '@vyr/design';
+import { BaseFragment, HTMLFragment, providerDescriptor as builtinProviderDescriptor } from '@vyr/builtin'
+import { VueDescriptor } from '@vyr/vue'
+import { ElButtonDescriptor, ElCascaderDescriptor, ElCheckboxDescriptor, ElDatePickerDescriptor, ElFormDescriptor, ElInputDescriptor, ElInputNumberDescriptor, ElRadioDescriptor, ElColDescriptor, ElRowDescriptor, ElSelectDescriptor, ElSwitchDescriptor, ElTableColumnDescriptor, ElTableDescriptor, ElDialogDescriptor, ElPaginationDescriptor, ElMenuDescriptor, ElSubMenuDescriptor, ElMenuItemDescriptor } from '@vyr/element-plus';
+import { language } from '../../locale'
+import { providerDescriptor } from '../../common'
+
+const props = defineProps<{ raw: string, uuid: string }>()
+
+const ignore = [ElRowDescriptor.type, ElColDescriptor.type, ElTableColumnDescriptor.type, ElDialogDescriptor.type]
+const components = [
+    { type: ElButtonDescriptor.type, import: defineAsyncComponent(() => import('./ElButton.vue')) },
+    { type: ElRowDescriptor.type, import: defineAsyncComponent(() => import('./ElRow.vue')) },
+    { type: ElColDescriptor.type, import: defineAsyncComponent(() => import('./ElCol.vue')) },
+    { type: ElFormDescriptor.type, import: defineAsyncComponent(() => import('./ElForm.vue')) },
+    { type: ElCascaderDescriptor.type, import: defineAsyncComponent(() => import('./ElCascader.vue')) },
+    { type: ElCheckboxDescriptor.type, import: defineAsyncComponent(() => import('./ElCheckbox.vue')) },
+    { type: ElDatePickerDescriptor.type, import: defineAsyncComponent(() => import('./ElDatePicker.vue')) },
+    { type: ElInputDescriptor.type, import: defineAsyncComponent(() => import('./ElInput.vue')) },
+    { type: ElInputNumberDescriptor.type, import: defineAsyncComponent(() => import('./ElInputNumber.vue')) },
+    { type: ElRadioDescriptor.type, import: defineAsyncComponent(() => import('./ElRadio.vue')) },
+    { type: ElSelectDescriptor.type, import: defineAsyncComponent(() => import('./ElSelect.vue')) },
+    { type: ElSwitchDescriptor.type, import: defineAsyncComponent(() => import('./ElSwitch.vue')) },
+    { type: ElTableDescriptor.type, import: defineAsyncComponent(() => import('./ElTable.vue')) },
+    { type: ElTableColumnDescriptor.type, import: defineAsyncComponent(() => import('./ElTableColumn.vue')) },
+    { type: ElDialogDescriptor.type, import: defineAsyncComponent(() => import('./ElDialog.vue')) },
+    { type: ElPaginationDescriptor.type, import: defineAsyncComponent(() => import('./ElPagination.vue')) },
+    { type: ElMenuDescriptor.type, import: defineAsyncComponent(() => import('./ElMenu.vue')) },
+    { type: ElSubMenuDescriptor.type, import: defineAsyncComponent(() => import('./ElSubMenu.vue')) },
+    { type: ElMenuItemDescriptor.type, import: defineAsyncComponent(() => import('./ElMenuItem.vue')) },
+]
+
+const descriptor = ref(null) as Ref<VueDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = VueDescriptor.get<VueDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+
+const PropsViewer = computed(() => {
+    if (descriptor.value === null) return null
+
+    for (const component of components) {
+        if (component.type === descriptor.value.type) return component.import
+    }
+
+    return null
+})
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/index.ts

@@ -0,0 +1,23 @@
+import { ElButtonDescriptor, ElCascaderDescriptor, ElCheckboxDescriptor, ElColDescriptor, ElDatePickerDescriptor, ElDialogDescriptor, ElFormDescriptor, ElInputDescriptor, ElInputNumberDescriptor, ElMenuDescriptor, ElMenuItemDescriptor, ElPaginationDescriptor, ElRadioDescriptor, ElRowDescriptor, ElSelectDescriptor, ElSubMenuDescriptor, ElSwitchDescriptor, ElTableColumnDescriptor, ElTableDescriptor } from '@vyr/element-plus'
+
+export default [
+    { type: ElButtonDescriptor.type, import: () => import('./VueViewer.vue') },
+    { type: ElRowDescriptor.type, import: () => import('./VueViewer.vue') },
+    { type: ElColDescriptor.type, import: () => import('./VueViewer.vue') },
+    { type: ElFormDescriptor.type, import: () => import('./VueViewer.vue') },
+    { type: ElCascaderDescriptor.type, import: () => import('./VueViewer.vue') },
+    { type: ElCheckboxDescriptor.type, import: () => import('./VueViewer.vue') },
+    { type: ElDatePickerDescriptor.type, import: () => import('./VueViewer.vue') },
+    { type: ElInputDescriptor.type, import: () => import('./VueViewer.vue') },
+    { type: ElInputNumberDescriptor.type, import: () => import('./VueViewer.vue') },
+    { type: ElRadioDescriptor.type, import: () => import('./VueViewer.vue') },
+    { type: ElSelectDescriptor.type, import: () => import('./VueViewer.vue') },
+    { type: ElSwitchDescriptor.type, import: () => import('./VueViewer.vue') },
+    { type: ElTableDescriptor.type, import: () => import('./VueViewer.vue') },
+    { type: ElTableColumnDescriptor.type, import: () => import('./VueViewer.vue') },
+    { type: ElDialogDescriptor.type, import: () => import('./VueViewer.vue') },
+    { type: ElPaginationDescriptor.type, import: () => import('./VueViewer.vue') },
+    { type: ElMenuDescriptor.type, import: () => import('./VueViewer.vue') },
+    { type: ElSubMenuDescriptor.type, import: () => import('./VueViewer.vue') },
+    { type: ElMenuItemDescriptor.type, import: () => import('./VueViewer.vue') },
+]

package/src/shims-vue.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+declare module '*.vue' {
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+declare module '!!raw-loader!*' {
+  const v: string
+  export default v
+}