create-widget 0.0.1 → 0.0.3

package/widget-test/src/assets/main.css

@@ -1,3 +0,0 @@
-body{
-    margin: 0;
-}

package/widget-test/src/main.ts

@@ -1,12 +0,0 @@
-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/widget-test/src/router/index.ts

@@ -1,11 +0,0 @@
-import WidgetRouter from '../widgets/widget-router';
-import {createRouter, createWebHashHistory} from 'vue-router';
-
-const router = createRouter({
-  history: createWebHashHistory(import.meta.env.BASE_URL),
-  routes: [
-    ...WidgetRouter,
-  ],
-});
-
-export default router;

package/widget-test/src/widgets/clock/Clock.widget.ts

@@ -1,32 +0,0 @@
-import { Widget, WidgetKeyword } from '@widget-js/core';
-//TODO 修改组件信息，标题，描述，关键词
-const name = 'cn.test.widget.clock';
-//组件标题
-const title = { 'zh-CN': '时钟' };
-//组件描述
-const description = { 'zh-CN': 'Hello world!' };
-//组件关键词
-const keywords = [WidgetKeyword.RECOMMEND];
-//组件路由地址
-const path = '/widget/clock';
-//配置页路由地址
-const configPagePath = '/widget/config/clock';
-//组件关键词
-const ClockWidget = new Widget({
-  name: name,
-  title: title,
-  description: description,
-  keywords: keywords,
-  lang: 'zh-CN',
-  width: 2,
-  height: 2,
-  minWidth: 2,
-  maxWidth: 6,
-  minHeight: 2,
-  maxHeight: 6,
-  previewImage: '/preview_clock.png',
-  path,
-  configPagePath,
-});
-
-export default ClockWidget;

package/widget-test/src/widgets/clock/ClockConfigView.vue

@@ -1,38 +0,0 @@
-<template>
-  <widget-edit-dialog
-      :widget-params="widgetParams"
-      :option="widgetConfigOption"
-      v-model="widgetData"
-      @apply="save()"
-      @confirm="save({ closeWindow: true })"
-  >
-    <template #custom>
-      标题 <input v-model="widgetData.title"/>
-    </template>
-  </widget-edit-dialog>
-</template>
-
-<script lang="ts" setup>
-import {
-  useWidget,
-  WidgetConfigOption,
-  WidgetEditDialog,
-} from '@widget-js/vue3';
-import {BrowserWindowApi} from '@widget-js/core';
-import {ClockModel} from "@/widgets/clock/model/ClockModel";
-
-const {widgetData, widgetParams, save} = useWidget(ClockModel);
-BrowserWindowApi.setup({width: 600, height: 400});
-//修改成需要设置组件参数配置
-const widgetConfigOption = new WidgetConfigOption({
-  title:'时钟设置',
-  theme: {
-    backgroundColor: true,
-    borderRadius: true,
-  }
-});
-</script>
-
-<style scoped>
-
-</style>

package/widget-test/src/widgets/clock/ClockWidgetRoutes.ts

@@ -1,28 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router';
-import ClockWidget from './Clock.widget';
-
-const path = ClockWidget.path;
-const name = ClockWidget.name;
-
-const configPagePath = ClockWidget.configPagePath!;
-
-const ClockWidgetRoutes: RouteRecordRaw[] = [
-  {
-    path: path,
-    name: `${name}`,
-    component: () =>
-      import(
-        /* webpackChunkName: "cn.test.widget.clock" */ './ClockWidgetView.vue'
-      ),
-  },
-  {
-    path: configPagePath,
-    name: `${name}.config`,
-    component: () =>
-      import(
-        /* webpackChunkName: "cn.test.widget.clock.config" */ './ClockConfigView.vue'
-      ),
-  },
-];
-
-export default ClockWidgetRoutes;

package/widget-test/src/widgets/clock/ClockWidgetView.vue

@@ -1,34 +0,0 @@
-<template>
-  <widget-wrapper>
-    <div class="clock">
-      <span>{{ widgetData.title }}</span>
-      <span>{{ time }}</span>
-    </div>
-  </widget-wrapper>
-</template>
-<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>
-
-<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>

package/widget-test/src/widgets/clock/model/ClockModel.ts

@@ -1,5 +0,0 @@
-import {WidgetData} from "@widget-js/core";
-
-export class ClockModel extends WidgetData {
-    title: string = 'Hello world!';
-}

package/widget-test/src/widgets/widget-router.ts

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

package/widget-test/tsconfig.app.json

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

package/widget-test/tsconfig.json

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

package/widget-test/tsconfig.node.json

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

package/widget-test/vite.config.ts

@@ -1,14 +0,0 @@
-import widget from '@widget-js/vite-plugin-widget';
-import { fileURLToPath, URL } from 'node:url';
-
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [vue(), widget()],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
-    },
-  },
-});

package/widget-test/widget.package.ts

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