create-widget 24.1.1-beta.9 → 26.7.22

package/template/{src → vue/src}/widgets/clock/ClockWidgetView.vue

@@ -1,35 +1,38 @@
-<script lang="ts" setup>
-import { useWidget } from '@widget-js/vue3'
-import { ref } from 'vue'
-import { ClockModel } from '@/widgets/clock/model/ClockModel'
-
-const { widgetData } = useWidget(ClockModel)
-
-const time = ref(new Date().toLocaleTimeString())
-setInterval(() => {
-  time.value = new Date().toLocaleTimeString()
-}, 1000)
-</script>
-
-<template>
-  <widget-wrapper>
-    <div class="clock">
-      <span>{{ widgetData.title }}</span>
-      <span>{{ time }}</span>
-    </div>
-  </widget-wrapper>
-</template>
-
-<style scoped>
-.clock {
-  font-size: 16px;
-  font-weight: bold;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: var(--widget-background-color);
-  border-radius: var(--widget-border-radius);
-  color: var(--widget-color);
-  justify-content: center;
-}
-</style>
+<script lang="ts" setup>
+import { useStorage } from '@vueuse/core'
+import { useWidget } from '@widget-js/vue3'
+import { ref } from 'vue'
+
+useWidget({})
+const title = useStorage('title', 'Clock')
+const time = ref(new Date().toLocaleTimeString())
+setInterval(() => {
+  time.value = new Date().toLocaleTimeString()
+}, 1000)
+</script>
+
+<template>
+  <widget-wrapper>
+    <div class="clock">
+      <span>{{ title }}</span>
+      <span>{{ time }}</span>
+    </div>
+  </widget-wrapper>
+</template>
+
+<style scoped>
+*{
+  user-select: none;
+}
+.clock {
+  font-size: 16px;
+  font-weight: bold;
+  display: flex;
+  height: 100%;
+  gap: 0.5rem;
+  flex-direction: column;
+  align-items: center;
+  color: var(--widget-color);
+  justify-content: center;
+}
+</style>

package/template/{src → vue/src}/widgets/widget-router.ts

@@ -1,9 +1,9 @@
 import type { RouteRecordRaw } from 'vue-router'
-import ClockWidgetRoutes from './clock/ClockWidgetRoutes'
-
+import ClockWidgetRoutes from './clock/ClockWidgetRoutes'
+
 // FBI WANING! IMPORT PLACE, DONT DELETE THIS LINE
 const WidgetRouter: RouteRecordRaw[] = [
-  ...ClockWidgetRoutes,
+  ...ClockWidgetRoutes,
   // FBI WANING! ROUTE PLACE, DONT DELETE THIS LINE
 ]
 export default WidgetRouter

package/template/{tsconfig.app.json → vue/tsconfig.app.json}

@@ -1,13 +1,13 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "compilerOptions": {
-    "composite": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    },
-    "noEmit": true
-  },
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
-  "exclude": ["src/**/__tests__/*"]
-}
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "composite": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "noEmit": true
+  },
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"]
+}

package/template/{tsconfig.json → vue/tsconfig.json}

@@ -1,11 +1,11 @@
-{
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    },
-    {
-      "path": "./tsconfig.app.json"
-    }
-  ],
-  "files": []
-}
+{
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ],
+  "files": []
+}

package/template/{tsconfig.node.json → vue/tsconfig.node.json}

@@ -1,17 +1,17 @@
-{
-  "extends": "@tsconfig/node18/tsconfig.json",
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "types": ["node"],
-    "noEmit": true
-  },
-  "include": [
-    "vite.config.*",
-    "vitest.config.*",
-    "cypress.config.*",
-    "nightwatch.conf.*",
-    "playwright.config.*"
-  ]
-}
+{
+  "extends": "@tsconfig/node18/tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"],
+    "noEmit": true
+  },
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ]
+}

package/template/vue/vite.config.ts

@@ -0,0 +1,29 @@
+import { fileURLToPath, URL } from 'node:url'
+import vue from '@vitejs/plugin-vue'
+import widget from '@widget-js/vite-plugin-widget'
+import AutoImport from 'unplugin-auto-import/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import Components from 'unplugin-vue-components/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig((config) => {
+  const offlineMode = config.mode === 'offline'
+  const base = offlineMode ? './' : '/clock'
+  return {
+    base,
+    plugins: [
+      vue(),
+      widget({
+        zipName: 'test-widget',
+        generateZip: offlineMode,
+      }),
+      AutoImport({ resolvers: [ElementPlusResolver()] }),
+      Components({ resolvers: [ElementPlusResolver()] }),
+    ],
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url)),
+      },
+    },
+  }
+})

package/template/vue/widget.package.ts

@@ -0,0 +1,24 @@
+import { WidgetPackage } from '@widget-js/core'
+
+// TODO 完善组件包信息
+export default new WidgetPackage({
+  author: '修改成你的信息',
+  description: {
+    'zh-CN': '修改成你的组件描述',
+  },
+  entry: '/',
+  hash: true,
+  remote: {
+    base: '/',
+    hostname: '修改成你的域名',
+    hash: true,
+  },
+  homepage: '',
+  name: 'cn.example.widget',
+  title: {
+    'zh-CN': '修改成你的组件标题',
+  },
+  devOptions: {
+    folder: './src/widgets/',
+  },
+})

package/unocss/src/main.ts

@@ -0,0 +1,13 @@
+import 'virtual:uno.css'
+import { WidgetJsPlugin } from '@widget-js/vue3'
+import '@widget-js/vue3/dist/style.css'
+import '@/assets/main.css'
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(router)
+app.use(WidgetJsPlugin)
+app.mount('#app')

package/unocss/uno.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from 'unocss'
+
+export default defineConfig({
+  // ...UnoCSS options
+})

package/unocss/vite.config.ts

@@ -0,0 +1,31 @@
+import { fileURLToPath, URL } from 'node:url'
+import vue from '@vitejs/plugin-vue'
+import widget from '@widget-js/vite-plugin-widget'
+import UnoCSS from 'unocss/vite'
+import AutoImport from 'unplugin-auto-import/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import Components from 'unplugin-vue-components/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig((config) => {
+  const offlineMode = config.mode === 'offline'
+  const base = offlineMode ? './' : '/clock'
+  return {
+    base,
+    plugins: [
+      vue(),
+      UnoCSS(),
+      widget({
+        zipName: 'test-widget',
+        generateZip: offlineMode,
+      }),
+      AutoImport({ resolvers: [ElementPlusResolver()] }),
+      Components({ resolvers: [ElementPlusResolver()] }),
+    ],
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url)),
+      },
+    },
+  }
+})