@owdproject/core 3.1.3 → 3.1.4

package/runtime/components/Core/Explorer/CoreExplorerFile.vue

@@ -1,6 +1,16 @@
 <template>
-  <li :class="['owd-explorer-file', { 'owd-explorer-file--inactive': props.inactive }]">
-    <a :href="props.url" :target="props.target" :title="props.title" @click="props.fn">
+  <li
+    :class="[
+      'owd-explorer-file',
+      { 'owd-explorer-file--inactive': props.inactive },
+    ]"
+  >
+    <a
+      :href="props.url"
+      :target="props.target"
+      :title="props.title"
+      @click="props.fn"
+    >
       <img :src="props.icon" :alt="props.title" />
       <div class="owd-explorer-file__name" v-html="props.name" />
     </a>
@@ -19,49 +29,48 @@ const props = defineProps<{
 </script>
 
 <style scoped lang="scss">
-  li.file {
-    width: 100px;
-    margin: 0 5px 5px 0;
-    text-align: center;
-    float: left;
-    border-radius: 2px;
-    border: 1px solid rgba(0, 0, 0, 0);
+li.file {
+  width: 100px;
+  margin: 0 5px 5px 0;
+  text-align: center;
+  float: left;
+  border-radius: 2px;
+  border: 1px solid rgba(0, 0, 0, 0);
 
-    @media(max-width: 480px) {
-      margin-right: 0;
-    }
-
-    @media(min-width: 480px) {
-      &:not(.inactive):hover {
+  @media (max-width: 480px) {
+    margin-right: 0;
+  }
 
-      }
+  @media (min-width: 480px) {
+    &:not(.inactive):hover {
     }
+  }
 
-    &.inactive {
-      filter: grayscale(100%);
-      opacity: 0.2;
-    }
+  &.inactive {
+    filter: grayscale(100%);
+    opacity: 0.2;
+  }
 
-    a {
-      display: block;
-      color: #CCC;
-      text-decoration: none;
-      transition: color 0.15s ease-in-out;
-      padding: 10px 0;
+  a {
+    display: block;
+    color: #ccc;
+    text-decoration: none;
+    transition: color 0.15s ease-in-out;
+    padding: 10px 0;
 
-      img {
-        vertical-align: middle;
-        height: 32px;
-        border-radius: 2px;
-      }
+    img {
+      vertical-align: middle;
+      height: 32px;
+      border-radius: 2px;
+    }
 
-      div.name {
-        font-size: 12px;
-        letter-spacing: -0.2px;
-        line-height: 10px;
-        margin-top: 10px;
-        cursor: pointer;
-      }
+    div.name {
+      font-size: 12px;
+      letter-spacing: -0.2px;
+      line-height: 10px;
+      margin-top: 10px;
+      cursor: pointer;
     }
   }
+}
 </style>

package/runtime/components/Core/Explorer/CoreExplorerFolder.vue

@@ -6,6 +6,5 @@
 
 <style scoped lang="scss">
 .owd-explorer-folder {
-
 }
 </style>

package/runtime/components/Core/Time/CoreTime.vue

@@ -1,17 +1,18 @@
 <script setup lang="ts">
-import {ref, onMounted, onUnmounted} from 'vue'
-import {computed} from "@vue/reactivity"
-import {useI18n} from "vue-i18n"
+import { ref, onMounted, onUnmounted } from 'vue'
+import { computed } from '@vue/reactivity'
+import { useI18n } from 'vue-i18n'
 
 const date: Ref<Date> = ref(new Date())
-const {locale} = useI18n()
+const { locale } = useI18n()
 
 let minuteTimeout: any
 
 onMounted(() => {
   function scheduleNextMinute() {
     const now = new Date()
-    const millisecondsToNextMinute = (60 - now.getSeconds()) * 1000 - now.getMilliseconds()
+    const millisecondsToNextMinute =
+      (60 - now.getSeconds()) * 1000 - now.getMilliseconds()
     minuteTimeout = setTimeout(() => {
       date.value = new Date()
       scheduleNextMinute()
@@ -44,10 +45,12 @@ const time = computed(() => {
 
   if (minutes.length === 1) minutes = `0${minutes}`
 
-  return locale.value === 'it' ? `${hours}:${minutes}` : `${hours}:${minutes} ${period}`
+  return locale.value === 'it'
+    ? `${hours}:${minutes}`
+    : `${hours}:${minutes} ${period}`
 })
 </script>
 
 <template>
   <time class="owd-time" v-text="time" />
-</template>
+</template>

package/runtime/components/Core/Window/CoreWindow.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import {ref,provide} from 'vue'
-import {computed} from "@vue/reactivity"
-import {useDesktopManager} from "@owdproject/core/runtime/composables/useDesktopManager"
-import {handleWindowControllerProps} from "@owdproject/core/runtime/utils/utilWindow"
+import { ref, provide } from 'vue'
+import { computed } from '@vue/reactivity'
+import { useAppConfig } from 'nuxt/app'
+import { useDesktopManager } from '@owdproject/core/runtime/composables/useDesktopManager'
+import { handleWindowControllerProps } from '@owdproject/core/runtime/utils/utilWindow'
 
 const props = defineProps<{
   window?: IWindowController
@@ -24,11 +25,14 @@ const emit = defineEmits([
   'restore',
   'maximize',
   'unmaximize',
-  'toggle-maximize'
+  'toggle-maximize',
 ])
 
+const appConfig = useAppConfig()
 const desktopManager = useDesktopManager() // used in <style v-bind>
-const windowController: IWindowController = handleWindowControllerProps(props.window)
+const windowController: IWindowController = handleWindowControllerProps(
+  props.window,
+)
 
 provide<IWindowController>('windowController', windowController)
 provide<WindowContent>('windowContent', props.content ?? {})
@@ -54,7 +58,7 @@ function onWindowDragMove(data: any) {
 function onWindowDragEnd(data: { left: number; top: number }) {
   windowController?.actions?.setPosition({
     x: data.left,
-    y: data.top
+    y: data.top,
   })
 
   isDragging.value = false
@@ -75,17 +79,22 @@ function onWindowResizeMove(data: any) {
 /**
  * Window end resize event
  */
-function onWindowResizeEnd(data: { left: number; top: number, width: number, height: number }) {
+function onWindowResizeEnd(data: {
+  left: number
+  top: number
+  width: number
+  height: number
+}) {
   isResizing.value = false
 
   windowController?.actions?.setPosition({
     x: data.left,
-    y: data.top
+    y: data.top,
   })
 
   windowController?.actions?.setSize({
     width: data.width,
-    height: data.height
+    height: data.height,
   })
 
   emit('resize:end', data)
@@ -112,37 +121,42 @@ const classes = computed(() => {
 
 <template>
   <vue-resizable
-      ref="windowResizableController"
-      :class="classes"
-      :width="windowController?.size.width"
-      :height="windowController?.size.height"
-      :min-height="windowController?.size.minHeight"
-      :max-width="windowController?.size.maxWidth"
-      :max-height="windowController?.size.maxHeight"
-      :left="windowController?.position?.x"
-      :top="windowController?.position?.y"
-      :active="windowController?.isResizable ? undefined : []"
-      @drag:start="onWindowDragStart"
-      @drag:move="onWindowDragMove"
-      @drag:end="onWindowDragEnd"
-      @resize:start="onWindowResizeStart"
-      @resize:move="onWindowResizeMove"
-      @resize:end="onWindowResizeEnd"
-      :style="{zIndex: windowController?.position?.z}"
-      :drag-selector="windowController?.isDraggable ? '.owd-window-nav__draggable' : '.owd-window-nav__draggable-none'"
-      @pointerdown="onWindowPointerDown"
+    ref="windowResizableController"
+    :class="classes"
+    :width="windowController?.size.width"
+    :height="windowController?.size.height"
+    :min-width="windowController?.size.minWidth"
+    :min-height="windowController?.size.minHeight"
+    :max-width="windowController?.size.maxWidth"
+    :max-height="windowController?.size.maxHeight"
+    :left="windowController?.position?.x"
+    :top="windowController?.position?.y"
+    :active="windowController?.isResizable ? undefined : []"
+    fit-parent
+    @drag:start="onWindowDragStart"
+    @drag:move="onWindowDragMove"
+    @drag:end="onWindowDragEnd"
+    @resize:start="onWindowResizeStart"
+    @resize:move="onWindowResizeMove"
+    @resize:end="onWindowResizeEnd"
+    :style="{ zIndex: windowController?.position?.z }"
+    :drag-selector="
+      windowController?.isDraggable
+        ? '.owd-window-nav__draggable'
+        : '.owd-window-nav__draggable-none'
+    "
+    @pointerdown="onWindowPointerDown"
   >
-
-    <slot/>
-
+    <slot />
   </vue-resizable>
 </template>
 
 <style scoped lang="scss">
 .owd-window {
-  position: v-bind('desktopManager.config.windows.position');
+  position: v-bind('appConfig.desktop.windows.position');
 
-  &--dragging, &--resizing {
+  &--dragging,
+  &--resizing {
     :deep(.owd-window__content) {
       pointer-events: none;
     }
@@ -153,4 +167,4 @@ const classes = computed(() => {
     height: 100%;
   }
 }
-</style>
+</style>

package/runtime/components/Core/Window/CoreWindowContent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import {inject} from "vue"
-import {computed} from "@vue/reactivity"
+import { inject } from 'vue'
+import { computed } from '@vue/reactivity'
 
 const windowContent = inject<WindowContent>('windowContent')
 
@@ -25,6 +25,4 @@ const classes = computed(() => {
   </div>
 </template>
 
-<style scoped lang="scss">
-
-</style>
+<style scoped lang="scss"></style>

package/runtime/components/Core/Window/CoreWindowNav.vue

@@ -1,17 +1,23 @@
 <script setup lang="ts">
-import {inject} from "vue"
-import {computed} from "@vue/reactivity"
+import { inject } from 'vue'
+import { computed } from '@vue/reactivity'
 
 const windowController = inject<IWindowController>('windowController')
 
 const classes = computed(() => {
   const list = ['owd-window-nav']
 
-  if (typeof windowController?.state.active === 'undefined' || !!windowController?.state.active) {
+  if (
+    typeof windowController?.state.active === 'undefined' ||
+    !!windowController?.state.active
+  ) {
     list.push('owd-window-nav--active')
   }
 
-  if (typeof windowController?.state.focused === 'undefined' || !!windowController?.state.focused) {
+  if (
+    typeof windowController?.state.focused === 'undefined' ||
+    !!windowController?.state.focused
+  ) {
     list.push('owd-window-nav--focused')
   }
 
@@ -21,10 +27,9 @@ const classes = computed(() => {
 
 <template>
   <div :class="classes">
-    <div class="owd-window-nav__draggable"/>
-
-    <slot/>
+    <div class="owd-window-nav__draggable" />
 
+    <slot />
   </div>
 </template>
 

package/runtime/composables/useApplicationEntries.ts

@@ -0,0 +1,51 @@
+import { useApplicationManager } from './useApplicationManager'
+import { computed } from '@vue/reactivity'
+
+type SortBy =
+  | 'title'
+  | 'category'
+  | ((
+      a: ApplicationEntryWithInherited,
+      b: ApplicationEntryWithInherited,
+    ) => number)
+type Visibility =
+  | 'primary'
+  | 'all'
+  | ((entry: ApplicationEntryWithInherited) => boolean)
+
+export function useApplicationEntries() {
+  const applicationManager = useApplicationManager()
+
+  const sortedAppEntries = function (
+    sortBy: SortBy = 'title',
+    visibility: Visibility = 'primary',
+  ): Ref<ApplicationEntryWithInherited[]> {
+    return computed(() => {
+      const currentEntries = [...applicationManager.appsEntries.value]
+
+      // filtering
+      const filtered =
+        typeof visibility === 'function'
+          ? currentEntries.filter(visibility)
+          : visibility === 'primary'
+            ? currentEntries.filter((e) => e.visibility !== 'secondary')
+            : currentEntries
+
+      // sorting
+      const sorted =
+        typeof sortBy === 'function'
+          ? filtered.sort(sortBy)
+          : sortBy === 'title'
+            ? filtered.sort((a, b) =>
+                (a.title || '').localeCompare(b.title || ''),
+              )
+            : filtered.sort((a, b) =>
+                (a.category || '').localeCompare(b.category || ''),
+              )
+
+      return sorted
+    })
+  }
+
+  return { sortedAppEntries }
+}

package/runtime/composables/useApplicationManager.ts

@@ -1,7 +1,280 @@
-import {ApplicationManager} from "../core/managers/ApplicationManager";
+import { reactive, markRaw, computed } from 'vue'
+import { ApplicationController } from '../core/controllers/ApplicationController'
+import { normalizeApplicationConfig } from '../utils/utilApp'
+import { debugLog } from '../utils/utilDebug'
+import * as shellwords from 'shellwords'
+import getopts from "getopts"
 
-const applicationManager = new ApplicationManager()
+const apps = reactive(new Map<string, IApplicationController>())
 
-export function useApplicationManager(): IApplicationManager {
-    return applicationManager
-}
+/**
+ * Application Manager Composable (Singleton)
+ */
+export function useApplicationManager() {
+  /**
+   * Define new application
+   *
+   * @param id
+   * @param config
+   */
+  async function defineApp(id: string, config: ApplicationConfig) {
+    if (isAppDefined(id)) {
+      debugLog(`App "${id}" is already defined`)
+      return getAppById(id)!
+    }
+
+    const normalizedConfig = normalizeApplicationConfig(config)
+    const applicationConfig = markRaw(normalizedConfig)
+
+    const applicationController: IApplicationController = new ApplicationController(id, applicationConfig)
+    await applicationController.initApplication()
+
+    apps.set(id, applicationController)
+
+    return applicationController
+  }
+
+  /**
+   * Check if app has been defined
+   *
+   * @param {string} id
+   */
+  function isAppDefined(id: string) {
+    return getAppById(id)
+  }
+
+  /**
+   * Retrieves an app instance by its unique identifier
+   *
+   * @param {string} id
+   */
+  function getAppById(id: string) {
+    return apps.get(id)
+  }
+
+  /**
+   * Check if app is running
+   *
+   * @param {string} id
+   */
+  function isAppRunning(id: string) {
+    if (!isAppDefined(id)) {
+      throw Error(`App "${id}" is not defined`)
+    }
+
+    const applicationController = getAppById(id)!
+    return applicationController.isRunning
+  }
+
+  /**
+   * Launch app entry
+   *
+   * @param id
+   * @param entryKey
+   * @param argument
+   */
+  async function launchAppEntry(
+    id: string,
+    entryKey: string,
+    argument: string = ''
+  ): Promise<IApplicationController | undefined | void> {
+    if (!isAppDefined(id)) {
+      throw Error(`App "${id}" is not defined`)
+    }
+
+    const applicationController = getAppById(id)!
+
+    if (
+      applicationController.config.entries &&
+      !applicationController.config.entries.hasOwnProperty(entryKey)
+    ) {
+      throw Error(`App entry "${entryKey}" is not defined in ${id} application`)
+    }
+
+    const entry: ApplicationEntry = applicationController.config.entries[entryKey]!
+
+    if (argument) argument = ` ${argument}`
+
+    await execAppCommand(applicationController.id, entry.command + argument)
+  }
+
+  /**
+   * Run app command
+   *
+   * @param id
+   * @param rawCommand
+   */
+  async function execAppCommand(
+    id: string,
+    rawCommand: string,
+  ): Promise<CommandOutput> {
+    if (!isAppDefined(id)) {
+      throw Error(`App "${id}" is not defined`)
+    }
+
+    const applicationController = getAppById(id)!
+
+    const args = shellwords.split(rawCommand)
+    const parsed = getopts(args)
+    const command: string = parsed._[0]
+
+    if (
+      applicationController.config.commands &&
+      !applicationController.config.commands.hasOwnProperty(command)
+    ) {
+      throw Error(
+        `App command "${command}" is not defined in ${id} application`,
+      )
+    }
+
+    const commandFn: any = applicationController.config.commands![command]
+
+    const commandOutput = await commandFn(applicationController, parsed)
+
+    applicationController.setRunning(true)
+
+    return commandOutput
+  }
+
+  /**
+   * Close application
+   *
+   * @param id
+   */
+  function closeApp(id: string) {
+    if (!isAppDefined(id)) {
+      throw Error(`App "${id}" is not defined`)
+    }
+
+    const applicationController = getAppById(id)!
+
+    applicationController.closeAllWindows()
+    applicationController.setRunning(false)
+  }
+
+  /**
+   * Array of available menu entries for system bars, docks
+   */
+  const appsEntries = computed(() => {
+    const entries: ApplicationEntryWithInherited[] = []
+
+    for (const applicationController of apps.values()) {
+      if (!applicationController.config.entries) {
+        continue
+      }
+
+      for (const entryKey of Object.keys(applicationController.config.entries)) {
+        const entry = applicationController.config.entries[entryKey]!
+
+        entries.push({
+          application: applicationController,
+          title: entry.title ?? applicationController.config.title,
+          icon: entry.icon ?? applicationController.config.icon,
+          category: entry.category ?? applicationController.config.category,
+          visibility: entry.visibility ?? 'primary',
+          command: entry.command,
+        })
+      }
+    }
+
+    return entries
+  })
+
+  /**
+   * Array of opened windows for system bars, docks
+   */
+  const windowsOpened = computed(() => {
+    const windows: Map<string, IWindowController>[] = []
+
+    for (const applicationController of apps.values()) {
+      if (applicationController.isRunning) {
+        windows.push(...applicationController.windows)
+      }
+    }
+
+    return windows
+  })
+
+  /**
+   * Array of running applications
+   */
+  const appsRunning = computed(() => {
+    const runningApps: IApplicationController[] = []
+
+    for (const applicationController of apps.values()) {
+      if (applicationController.isRunning) {
+        runningApps.push(applicationController)
+      }
+    }
+
+    return runningApps
+  })
+
+  function getWindowOpenedId(windowId: string) {
+    const mapWindowFound = windowsOpened.value.find((window: any) => {
+      return window[1].state.id === windowId
+    })
+
+    if (mapWindowFound) {
+      // @ts-ignore
+      return mapWindowFound[1] as IWindowController
+    }
+  }
+
+  /**
+   * Gets all unique categories from the installed apps
+   */
+  const appCategories = computed(() => {
+    const categories = new Set<string>()
+
+    for (const applicationController of apps.values()) {
+      if (applicationController.config.category) {
+        categories.add(applicationController.config.category)
+      }
+    }
+
+    return Array.from(categories).sort()
+  })
+
+  /**
+   * Gets the apps ordered by category
+   */
+  const appsByCategory = computed(() => {
+    const categorizedApps: {
+      [category: string]: IApplicationController[]
+    } = {}
+
+    for (const applicationController of apps.values()) {
+      const category = applicationController.config.category || 'other'
+      if (!categorizedApps[category]) {
+        categorizedApps[category] = []
+      }
+      categorizedApps[category].push(applicationController)
+    }
+
+    for (const category in categorizedApps) {
+      categorizedApps[category].sort((a, b) =>
+        a.config.title.localeCompare(b.config.title),
+      )
+    }
+
+    return categorizedApps
+  })
+
+  return {
+    apps,
+    defineApp,
+    isAppDefined,
+    getAppById,
+    isAppRunning,
+    launchAppEntry,
+    execAppCommand,
+    closeApp,
+    getWindowOpenedId,
+    appsEntries,
+    appsRunning,
+    windowsOpened,
+    appCategories,
+    appsByCategory,
+  }
+}