+ Photo Widget

Author: rtugeek

package.json

@@ -29,7 +29,7 @@
     "@vueuse/router": "^9.9.0",
     "@widget-js/cli": "^1.1.1",
     "@widget-js/core": "^0.5.21",
-    "@widget-js/vue3": "^0.5.21",
+    "@widget-js/vue3": "workspace:*",
     "animate.css": "^4.1.1",
     "axios": "^1.1.3",
     "color": "^4.2.3",
@@ -85,4 +85,4 @@
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0"
   }
-}
+}

src/common/useBrowserWindowAnimation.ts

@@ -1,43 +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 }
-}
+// 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 }
+// }

src/widgets/dynamic-island/DynamicIslandWidgetView.vue

@@ -8,7 +8,14 @@
 </template>
 
 <script lang="ts">
-import {AppNotification, BrowserWindowApi, ElectronUtils, NotificationApi, WidgetApi, WidgetData} from '@widget-js/core'
+import {
+  AppNotification,
+  BrowserWindowApi,
+  ElectronUtils,
+  NotificationApi,
+  WidgetApi,
+  WidgetData
+} from '@widget-js/core'
 import DynamicIslandWidget from './DynamicIslandWidget.vue'
 import { useNotification, useWidget } from '@widget-js/vue3'
 import { computed, reactive, ref, watch } from 'vue'
@@ -40,7 +47,7 @@ export default {
     useNotification((newNotification) => {
       if (newNotification) {
         BrowserWindowApi.showInactive()
-        BrowserWindowApi.moveTop()
+        BrowserWindowApi.setAlwaysOnTop(true)
         Object.assign(notification, newNotification)
         setState()
         startHideTimeout()

src/widgets/photo/PhotoConfigView.vue

@@ -21,11 +21,11 @@ import { useWidget, WidgetConfigOption, WidgetEditDialog } from '@widget-js/vue3
 import { DialogApi, WidgetDataApi } from '@widget-js/core'
 import { reactive, ref } from 'vue'
 import { PhotoData } from '@/widgets/photo/PhotoData'
-
+import PhotoWidget from "@/widgets/photo/Photo.widget";
+const defaultData = new PhotoData(PhotoWidget.name)
+defaultData.borderRadius = 22
 const { widgetData, widgetParams } = useWidget(PhotoData, {
-  defaultData: {
-    borderRadius: 22
-  },
+  defaultData,
   onDataLoaded: () => {
     directory.value = widgetData.value.directory
   }

src/widgets/photo/PhotoWidget.vue

@@ -3,12 +3,12 @@
     <el-carousel :height="`${widgetParams.heightPx}px`" indicator-position="none" :interval="5000">
       <template v-if="widgetParams.preview">
         <el-carousel-item v-for="item in defaultPhotos" :key="item">
-          <img class="photo-item" :src="item" alt=""/>
+          <img class="photo-item" :src="item" alt="" />
         </el-carousel-item>
       </template>
       <template v-else>
         <el-carousel-item v-for="item in photos" :key="item">
-          <img class="photo-item" :src="item" alt=""/>
+          <img class="photo-item" :src="item" alt="" />
         </el-carousel-item>
         <el-carousel-item v-if="showGuide" @click="showConfig">
           <h4 class="justify-center">点击设置图片文件</h4>
@@ -22,18 +22,22 @@
 </template>
 
 <script lang="ts" setup>
-import {useWidget} from '@widget-js/vue3'
-import {PhotoData} from '@/widgets/photo/PhotoData'
-import {ref} from 'vue'
-import {BrowserWindowApi, FileApi, HostedWidgetApi, WidgetApi} from '@widget-js/core'
+import { useWidget } from '@widget-js/vue3'
+import { PhotoData } from '@/widgets/photo/PhotoData'
+import { ref } from 'vue'
+import { FileApi, HostedWidgetApi } from '@widget-js/core'
+import photo1 from './assets/photo1.jpg'
+import photo2 from './assets/photo2.jpg'
+import photo3 from './assets/photo3.jpg'
+import PhotoWidget from "@/widgets/photo/Photo.widget";
 
-const defaultPhotos = ['/images/photo1.jpg', '/images/photo2.jpg', '/images/photo3.jpg']
+const defaultPhotos = [photo1, photo2, photo3]
 const photos = ref<string[]>([])
 const showGuide = ref(false)
-const {widgetData, widgetParams, sizeStyle} = useWidget(PhotoData, {
-  defaultData: {
-    borderRadius: 22
-  },
+const defaultData = new PhotoData(PhotoWidget.name)
+defaultData.borderRadius = 22
+const { widgetData, widgetParams, sizeStyle } = useWidget(PhotoData, {
+  defaultData,
   onDataLoaded: (data) => {
     if (data && data.directory) {
       // photos.value
@@ -59,7 +63,7 @@ const {widgetData, widgetParams, sizeStyle} = useWidget(PhotoData, {
 const showConfig = async () => {
   // const widgetConfigUrl = await WidgetApi.getWidgetConfigUrl(widgetParams.name, widgetParams);
   // await BrowserWindowApi.openUrl(widgetConfigUrl!);
-  HostedWidgetApi.openConfigRoute(widgetParams.id, widgetParams)
+  HostedWidgetApi.openConfigRoute(widgetParams.id!, widgetParams)
 }
 </script>