@vyr/vue-browser 0.0.1

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@vyr/vue-browser",
+  "version": "0.0.1",
+  "description": "",
+  "main": "./src/index.ts",
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@vyr/locale": "0.0.1",
+    "@vyr/runtime": "0.0.1",
+    "@vyr/engine": "0.0.1",
+    "@vyr/design": "0.0.1",
+    "@vyr/builtin": "0.0.1",
+    "@vyr/vue": "0.0.1",
+    "vue": "3.5.22"
+  },
+  "files": [
+    "package.json",
+    "src/"
+  ],
+  "vyr": {
+    "type": "browser",
+    "order": 1000
+  }
+}

package/src/common/index.ts

@@ -0,0 +1 @@
+export * from './provider'

package/src/common/provider.ts

@@ -0,0 +1,14 @@
+import { provide, inject, Ref } from "vue";
+import { Descriptor } from "@vyr/engine";
+
+const providerKey = Symbol()
+
+const providerDescriptor = (descriptor: Ref<Descriptor | null>) => {
+    provide(providerKey, descriptor)
+}
+
+const useDescriptor = <T extends Descriptor = Descriptor>() => {
+    return inject(providerKey) as Ref<T>
+}
+
+export { providerDescriptor, useDescriptor }

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './locale'
+export * from './common'
+export * from './service'

package/src/locale/Language.ts

@@ -0,0 +1,10 @@
+import { Locale } from "@vyr/locale";
+import { zhCnLanguageProvider, ZhCNLanguageProvider } from "./LanguageProvider";
+
+Locale.register(zhCnLanguageProvider)
+
+const language = Locale.getLanguage<ZhCNLanguageProvider>(zhCnLanguageProvider.name)
+
+export {
+    language
+}

package/src/locale/LanguageProvider.ts

@@ -0,0 +1,25 @@
+import { LanguageProvider } from '@vyr/locale'
+
+interface ZhCNLanguageProvider extends LanguageProvider {
+    'descriptor.type.Template': string
+
+    'sidebar.action.addComponent.label': string
+
+    'inspector.Template.slotName':string
+}
+
+const zhCnLanguageProvider: ZhCNLanguageProvider = {
+    id: 'zh_CN',
+    name: '@vyr/vue-browser',
+
+    'descriptor.type.Template': '插槽',
+
+    'sidebar.action.addComponent.label': '新增组件',
+
+    'inspector.Template.slotName':'插槽名称',
+}
+
+export {
+    ZhCNLanguageProvider,
+    zhCnLanguageProvider,
+}

package/src/locale/index.ts

@@ -0,0 +1,2 @@
+export * from './LanguageProvider'
+export * from './Language'

package/src/service/index.ts

@@ -0,0 +1,20 @@
+import { InspectorService, runtime, ShortcutkeyService, } from "@vyr/runtime";
+import sidebarAction from './sidebar/action'
+import inspectorViewer from './inspector'
+
+const setup = async () => {
+    const shortcutkeyService = runtime.get<ShortcutkeyService>('shortcutkey')
+    const inspectorService = runtime.get<InspectorService>('inspector')
+
+    const sidebar = shortcutkeyService.get('sidebar')
+    for (const Action of sidebarAction) {
+        const action = new Action()
+        sidebar.add(action)
+    }
+
+    for (const viewer of inspectorViewer) {
+        inspectorService.set(viewer.type, viewer.import)
+    }
+}
+
+export { setup }

package/src/service/inspector/TemplateViewer.vue

@@ -0,0 +1,34 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get(`descriptor.type.${descriptor.type}` as any)" :scroll="true">
+        <BaseFragment :raw="raw" />
+        <vyr-row>
+            <vyr-label :label="language.get('inspector.Template.slotName')">
+                <vyr-col>
+                    <vyr-input v-model="descriptor.slotName" trigger="blur"></vyr-input>
+                </vyr-col>
+            </vyr-label>
+        </vyr-row>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { ref, Ref, watch } from 'vue';
+import { VyrCard, VyrRow, VyrLabel, VyrCol, VyrInput } from '@vyr/design';
+import { BaseFragment, providerDescriptor as builtinProviderDescriptor } from '@vyr/builtin'
+import { TemplateDescriptor } from '@vyr/vue'
+import { language } from '../../locale'
+
+const props = defineProps<{ raw: string, uuid: string }>()
+
+const descriptor = ref(null) as Ref<TemplateDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = TemplateDescriptor.get<TemplateDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/index.ts

@@ -0,0 +1,5 @@
+import { TemplateDescriptor } from '@vyr/vue'
+
+export default [
+    { type: TemplateDescriptor.type, import: () => import('./TemplateViewer.vue') },
+]

package/src/service/sidebar/action/AddComponentAction.ts

@@ -0,0 +1,63 @@
+import { Descriptor } from "@vyr/engine"
+import { TemplateDescriptor } from '@vyr/vue'
+import { Action, DataService, runtime } from "@vyr/runtime"
+import { language as builtinLanguage } from '@vyr/builtin'
+import { language } from '../../../locale'
+
+class AddComponentAction extends Action {
+    static id = 'sidebar.addComponent'
+    static generate = (label: string, Class: typeof Descriptor) => {
+        class ClassAction extends Action {
+            static id = Class.type
+            label = label
+            update() {
+                this.show = true
+                this.disabled = false
+            }
+            validator() {
+                return false
+            }
+            execute() {
+
+                const dataService = runtime.get<DataService>('data')
+                const navigator = dataService.sidebar.get(dataService.sidebar.active)
+                if (navigator === null) return console.log(builtinLanguage.get('sidebar.action.active.notFound', { key: dataService.sidebar.active }))
+
+                navigator.status.modifyMode = 'add'
+                navigator.status.modifyContent = new Class()
+                navigator.status.modifyValue = navigator.status.mouseItem
+            }
+        }
+        return new ClassAction()
+    }
+    generate = AddComponentAction.generate
+    label = language.get('sidebar.action.addComponent.label')
+    order = 1
+
+    constructor() {
+        super()
+        this.children.push(
+            AddComponentAction.generate(language.get('descriptor.type.Template'), TemplateDescriptor)
+        )
+    }
+
+    update() {
+        const dataService = runtime.get<DataService>('data')
+        this.show = false
+        this.disabled = true
+
+        const navigator = dataService.sidebar.get(dataService.sidebar.active)
+        if (navigator === null) return console.log(builtinLanguage.get('sidebar.action.active.notFound', { key: dataService.sidebar.active }))
+        if (navigator.status.mouseItem === null) return
+
+        this.show = true
+
+        this.disabled = false
+    }
+    validator() {
+        return false
+    }
+    execute() { }
+}
+
+export { AddComponentAction }

package/src/service/sidebar/action/index.ts

@@ -0,0 +1,5 @@
+import { AddComponentAction } from './AddComponentAction'
+
+export default [
+    AddComponentAction,
+]

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
+}