+ Photo Widget

Author: rtugeek

Diff for: .editorconfig

@@ -12,6 +12,8 @@ declare module '@vue/runtime-core' {
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
+    ElCarousel: typeof import('element-plus/es')['ElCarousel']
+    ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']

Diff for: components.d.ts

@@ -27,8 +27,9 @@
     "@vueuse/integrations": "^9.6.0",
     "@vueuse/motion": "2.0.0-beta.12",
     "@vueuse/router": "^9.9.0",
-    "@widget-js/core": "workspace:*",
-    "@widget-js/vue3": "workspace:*",
+    "@widget-js/cli": "^1.1.1",
+    "@widget-js/core": "^0.5.21",
+    "@widget-js/vue3": "^0.5.21",
     "animate.css": "^4.1.1",
     "axios": "^1.1.3",
     "color": "^4.2.3",
@@ -40,6 +41,7 @@
     "lodash": "^4.17.21",
     "lunar-typescript": "^1.2.27",
     "lyric-resolver": "^0.1.6",
+    "nanoid": "^4.0.2",
     "pinia": "^2.0.23",
     "vue": "^3.2.30",
     "vue-i18n": "^9.2.2",
@@ -58,8 +60,7 @@
     "@vue/cli-service": "~5.0.0",
     "@vue/compiler-sfc": "^3.2.45",
     "@vue/eslint-config-typescript": "^9.1.0",
-    "@widget-js/cli": "^1.0.7",
-    "@widget-js/vite-plugin-widget": "^1.0.3",
+    "@widget-js/vite-plugin-widget": "^1.0.4",
     "@widget-js/webpack-plugin": "^1.0.5",
     "autoprefixer": "^10.4.13",
     "css-loader": "^6.7.2",
@@ -84,4 +85,4 @@
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0"
   }
-}
+}

Diff for: package.json

@@ -0,0 +1,43 @@
+import { ref, watch } from 'vue'
+import { CubicBezierPoints, EasingFunction, useTransition } from '@vueuse/core'
+import { BrowserWindowApi } from '@widget-js/core'
+import { MaybeRef } from '@vueuse/shared'
+
+export interface UseBrowserWindowAnimationOptions {
+  transition?: MaybeRef<EasingFunction | CubicBezierPoints>
+  duration?: MaybeRef<number>
+  delay?: MaybeRef<number>
+  /**
+   * Disables the transition
+   */
+  disabled?: MaybeRef<boolean>
+}
+
+export function useBrowserWindowAnimation(options: UseBrowserWindowAnimationOptions) {
+  const x = ref(0)
+  const y = ref(0)
+  const width = ref(600)
+  const height = ref(800)
+  const ready = ref(false)
+
+  const animationX = useTransition(x, options)
+  const animationY = useTransition(y, options)
+  const animationWidth = useTransition(width, options)
+  const animationHeight = useTransition(height, options)
+
+  BrowserWindowApi.getBounds().then((bounds) => {
+    x.value = bounds.x
+    y.value = bounds.y
+    width.value = bounds.width
+    height.value = bounds.height
+    ready.value = true
+  })
+
+  watch([animationX, animationY, animationWidth, animationHeight], async ([x, y, width, height]) => {
+    if (ready.value) {
+      await BrowserWindowApi.setBounds({ x, y, width, height }, false)
+    }
+  })
+
+  return { ready, x, y, width, height }
+}

Diff for: public/images/photo1.jpg

@@ -1,25 +1,31 @@
 <template>
-  <widget-edit-dialog :widget-params="widgetParams" :widget-data="widgetData"
-                      :option="widgetConfigOption"
-                      @confirm="onSaveClick()"
-                      :enable-background="true">
+  <widget-edit-dialog
+    :widget-params="widgetParams"
+    :widget-data="widgetData"
+    :option="widgetConfigOption"
+    @confirm="onSaveClick()"
+    :enable-background="true">
     <template v-slot:widget>
       <!-- 组件配置内容   -->
-      <birthday-list-widget :style="{width:`${widgetParams.widthPx}px`,height:`${widgetParams.heightPx}px`}"
-                            :border-radius="widgetData.borderRadius"
-                            :birthday-list-data="widgetData"
-                            :background-color="widgetData.backgroundColor"/>
+      <birthday-list-widget
+        :style="{ width: `${widgetParams.widthPx}px`, height: `${widgetParams.heightPx}px` }"
+        :border-radius="widgetData.borderRadius"
+        :birthday-list-data="widgetData"
+        :background-color="widgetData.backgroundColor" />
     </template>
     <template v-slot:form>
       <el-form label-width="120px">
         <el-form-item label="左上角标题">
-          <el-input v-model="widgetData.title" maxlength="6"/>
+          <el-input v-model="widgetData.title" maxlength="6" />
         </el-form-item>
       </el-form>
       <!-- <div style="color: red">注意：目前农历暂不支持，等待后续开放</div> -->
-      <el-table :data="widgetData.peopleList" max-height="250"
-                row-key="createdAt"
-                style="width: 100%;" table-layout="auto">
+      <el-table
+        :data="widgetData.peopleList"
+        max-height="250"
+        row-key="createdAt"
+        style="width: 100%"
+        table-layout="auto">
         <el-table-column align="center" width="100">
           <template #header>
             <el-button size="small" type="primary" @click="add">新增</el-button>
@@ -32,26 +38,26 @@
           <template #default="scope">{{ scope.$index + 1 }}</template>
         </el-table-column>
         <el-table-column label="姓名" prop="name" align="center">
-          <template #default="{row}">
-            <el-input v-model="row.name" maxlength="10"/>
+          <template #default="{ row }">
+            <el-input v-model="row.name" maxlength="10" />
           </template>
         </el-table-column>
         <el-table-column label="农历" prop="type" align="center">
-          <template #default="{row}">
+          <template #default="{ row }">
             <el-radio-group v-model="row.type">
               <el-radio label="Y" size="large">农历</el-radio>
               <el-radio label="N" size="large">公历</el-radio>
             </el-radio-group>
           </template>
         </el-table-column>
         <el-table-column label="月" prop="month" align="center">
-          <template #default="{row}">
-            <el-input-number v-model="row.month" :min="1" :max="12"/>
+          <template #default="{ row }">
+            <el-input-number v-model="row.month" :min="1" :max="12" />
           </template>
         </el-table-column>
         <el-table-column label="日" prop="day" align="center">
-          <template #default="{row}">
-            <el-input-number v-model="row.day" :min="1" :max="31"/>
+          <template #default="{ row }">
+            <el-input-number v-model="row.day" :min="1" :max="31" />
           </template>
         </el-table-column>
       </el-table>
@@ -60,61 +66,74 @@
 </template>
 
 <script lang="ts">
-import {NotificationApi, WidgetDataRepository} from "@widget-js/core";
-import BirthdayListWidget from "./BirthdayListWidget.vue";
-import BirthdayListData, {BirthdayPeople} from "@/widgets/birthday-list/model/BirthdayListData";
-import {useWidget, WidgetConfigOption, WidgetEditDialog} from "@widget-js/vue3";
-import {reactive} from "vue";
+import {NotificationApi, WidgetDataApi} from '@widget-js/core'
+import BirthdayListWidget from './BirthdayListWidget.vue'
+import BirthdayListData, { BirthdayPeople } from '@/widgets/birthday-list/model/BirthdayListData'
+import { useWidget, WidgetConfigOption, WidgetEditDialog } from '@widget-js/vue3'
 
 export default {
-  name: "BirthdayListConfigView",
-  components: {BirthdayListWidget, WidgetEditDialog},
+  name: 'BirthdayListConfigView',
+  components: { BirthdayListWidget, WidgetEditDialog },
   setup() {
-    const widgetConfigOption = new WidgetConfigOption({backgroundColor: true, borderRadius: false})
-    const {widgetData, widgetParams} = useWidget(BirthdayListData, {
-      loadDataByWidgetName: true    });
-    return {widgetData, widgetParams, widgetConfigOption}
+    const widgetConfigOption = new WidgetConfigOption({ backgroundColor: true, borderRadius: false })
+    const { widgetData, widgetParams } = useWidget(BirthdayListData, {
+      loadDataByWidgetName: true
+    })
+    return { widgetData, widgetParams, widgetConfigOption }
   },
   mounted() {
-    document.title = "组件设置"
+    document.title = '组件设置'
   },
   methods: {
     /**
      * 点击保存按钮
      */
     async onSaveClick() {
-      let that = this;
+      let that = this
       if (that.widgetData.peopleList && that.widgetData.peopleList.length > 0) {
-        var names = [] as any[];
+        var names = [] as any[]
         for (let index in that.widgetData.peopleList) {
           if (!that.widgetData.peopleList[index].name) {
             NotificationApi.error('第' + (parseInt(index) + 1) + '行【姓名】不能为空！')
-            return;
+            return
           }
           if (names.indexOf(that.widgetData.peopleList[index].name) >= 0) {
-            NotificationApi.error('第' + (parseInt(index) + 1) + '行与第' + (names.indexOf(that.widgetData.peopleList[index].name) + 1) + '行【姓名】名字重复！')
-            return;
+            NotificationApi.error(
+              '第' +
+                (parseInt(index) + 1) +
+                '行与第' +
+                (names.indexOf(that.widgetData.peopleList[index].name) + 1) +
+                '行【姓名】名字重复！'
+            )
+            return
           }
           if (!that.widgetData.peopleList[index].month) {
             NotificationApi.error('第' + (parseInt(index) + 1) + '行【月】不能为空！')
-            return;
+            return
           }
           if (!that.widgetData.peopleList[index].day) {
             NotificationApi.error('第' + (parseInt(index) + 1) + '行【日】不能为空！')
-            return;
+            return
           }
-          names.push(that.widgetData.peopleList[index].name);
+          names.push(that.widgetData.peopleList[index].name)
         }
       }
-      await WidgetDataRepository.saveByName(this.widgetData);
-      window.close();
+      await WidgetDataApi.saveByName(this.widgetData)
+      window.close()
     },
     add() {
-      const newPeople: BirthdayPeople = {name: '', type: 'N', month: 1, day: 1, qty: 0, createdAt: new Date().getTime()}
-      this.widgetData.peopleList.splice(0, 0, newPeople);
+      const newPeople: BirthdayPeople = {
+        name: '',
+        type: 'N',
+        month: 1,
+        day: 1,
+        qty: 0,
+        createdAt: new Date().getTime()
+      }
+      this.widgetData.peopleList.splice(0, 0, newPeople)
     },
     del(scope) {
-      this.widgetData.peopleList.splice(scope.$index, 1);
+      this.widgetData.peopleList.splice(scope.$index, 1)
     }
   },
   watch: {
@@ -126,10 +145,6 @@ export default {
     }
   }
 }
-
-
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

Diff for: public/images/photo2.jpg

@@ -1,39 +1,45 @@
 <template>
-  <widget-edit-dialog :widget-params="widgetParams" :option="widgetConfigOption"
-                      :widget-data="widgetData"
-                      @confirm="onSaveClick()">
+  <widget-edit-dialog
+    :widget-params="widgetParams"
+    :option="widgetConfigOption"
+    :widget-data="widgetData"
+    @confirm="onSaveClick()">
     <template v-slot:widget>
-      <clock-widget :width="widgetParams.widthPx" :height="widgetParams.heightPx"
-                    :background-color="widgetData.backgroundColor"></clock-widget>
+      <clock-widget
+        :width="widgetParams.widthPx"
+        :height="widgetParams.heightPx"
+        :background-color="widgetData.backgroundColor"></clock-widget>
     </template>
   </widget-edit-dialog>
 </template>
 
 <script lang="ts">
-import {useWidget, WidgetConfigOption} from "@widget-js/vue3";
-import {WidgetData, WidgetDataRepository} from "@widget-js/core";
-import {reactive} from "vue";
-import ClockWidget from "@/widgets/clock/ClockWidget.vue";
+import { useWidget, WidgetConfigOption } from '@widget-js/vue3'
+import { WidgetData, WidgetDataApi } from '@widget-js/core'
+import { reactive } from 'vue'
+import ClockWidget from '@/widgets/clock/ClockWidget.vue'
 
 export default {
-  name: "",
-  components: {ClockWidget},
+  name: '',
+  components: { ClockWidget },
   setup() {
-    const {widgetData, widgetParams} = useWidget(WidgetData)
+    const { widgetData, widgetParams } = useWidget(WidgetData)
 
     //修改成需要设置组件参数配置
-    const widgetConfigOption = reactive(new WidgetConfigOption({
-      custom: false,
-      backgroundColor: true,
-      borderRadius: true
-    }));
+    const widgetConfigOption = reactive(
+      new WidgetConfigOption({
+        custom: false,
+        backgroundColor: true,
+        borderRadius: true
+      })
+    )
 
-    return {widgetData, widgetParams, widgetConfigOption}
+    return { widgetData, widgetParams, widgetConfigOption }
   },
   methods: {
     async onSaveClick() {
-      await WidgetDataRepository.save(this.widgetData);
-      window.close();
+      await WidgetDataApi.save(this.widgetData)
+      window.close()
     }
   },
   mounted() {
@@ -42,6 +48,4 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
-
-</style>
+<style scoped lang="scss"></style>

Diff for: public/images/photo3.jpg

@@ -0,0 +1,41 @@
+import {Widget, WidgetKeyword} from "@widget-js/core";
+//TODO 修改组件信息，标题，描述，关键词
+const name = "cn.widgetjs.widgets.collection";
+//组件标题
+const title = {"zh": "分组"};
+//组件描述
+const description = {"zh": ""};
+//组件关键词
+const keywords = [WidgetKeyword.RECOMMEND];
+//组件路由地址
+const url = "/widget/collection";
+//配置页路由地址
+const configUrl = "/widget/config/collection";
+//组件关键词
+const CollectionWidgetDefine = new Widget({
+    name: name,
+    title: title,
+    description: description,
+    keywords: keywords,
+    lang: "zh",
+    width: 4,
+    height: 4,
+    minWidth: 2,
+    maxWidth: 6,
+    minHeight: 2,
+    maxHeight: 6,
+    routes: [
+        {
+            url: url,
+            name: 'index'
+        },
+
+        {
+            url: configUrl,
+            name: 'config'
+        },
+
+    ]
+})
+
+export default CollectionWidgetDefine;