@owdproject/core 3.3.1 → 4.0.0-alpha.3

package/runtime/components/Desktop/Time/DesktopTime.vue

@@ -1,56 +0,0 @@
-<script setup lang="ts">
-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()
-
-let minuteTimeout: any
-
-onMounted(() => {
-  function scheduleNextMinute() {
-    const now = new Date()
-    const millisecondsToNextMinute =
-      (60 - now.getSeconds()) * 1000 - now.getMilliseconds()
-    minuteTimeout = setTimeout(() => {
-      date.value = new Date()
-      scheduleNextMinute()
-    }, millisecondsToNextMinute)
-  }
-  scheduleNextMinute()
-})
-
-onUnmounted(() => {
-  clearTimeout(minuteTimeout)
-})
-
-const time = computed(() => {
-  if (!date.value) {
-    return ''
-  }
-
-  let hours = date.value.getHours()
-  let minutes: string = date.value.getMinutes().toString()
-  let period = 'AM'
-
-  if (locale.value !== 'it') {
-    if (hours >= 12) {
-      period = 'PM'
-      if (hours > 12) hours -= 12
-    } else if (hours === 0) {
-      hours = 12
-    }
-  }
-
-  if (minutes.length === 1) minutes = `0${minutes}`
-
-  return locale.value === 'it'
-    ? `${hours}:${minutes}`
-    : `${hours}:${minutes} ${period}`
-})
-</script>
-
-<template>
-  <time class="owd-time" v-text="time" />
-</template>

package/runtime/components/Desktop/Window/DesktopWindow.vue

@@ -1,204 +0,0 @@
-<script setup lang="ts">
-import { ref, provide } from 'vue'
-import { computed } from '@vue/reactivity'
-import { useAppConfig } from 'nuxt/app'
-import { handleWindowControllerProps } from '@owdproject/core/runtime/utils/utilWindow'
-import { useDesktopWorkspaceStore } from '../../../stores/storeDesktopWorkspace'
-
-const props = defineProps<{
-  window?: IWindowController
-  content?: WindowContent
-}>()
-
-const desktopWorkspaceStore = useDesktopWorkspaceStore()
-
-const emit = defineEmits([
-  'resize:start',
-  'resize:move',
-  'resize:end',
-  'drag:start',
-  'drag:move',
-  'drag:end',
-  'close',
-  'open',
-  'blur',
-  'focus',
-  'minimize',
-  'restore',
-  'maximize',
-  'unmaximize',
-  'toggle-maximize',
-])
-
-const appConfig = useAppConfig()
-const windowController: IWindowController = handleWindowControllerProps(
-  props.window,
-)
-
-provide<IWindowController>('windowController', windowController)
-provide<WindowContent>('windowContent', props.content ?? {})
-
-const isDragging = ref(false)
-const isResizing = ref(false)
-
-function onWindowPointerDown() {
-  windowController?.actions?.setActive(true)
-  windowController?.actions?.bringToFront()
-}
-
-function onWindowDragStart(data: any) {
-  isDragging.value = true
-
-  emit('drag:start', data)
-}
-
-function onWindowDragMove(data: any) {
-  emit('drag:move', data)
-}
-
-function onWindowDragEnd(data: { left: number; top: number }) {
-  windowController?.actions?.setPosition({
-    x: data.left,
-    y: data.top,
-  })
-
-  isDragging.value = false
-
-  emit('drag:end', data)
-}
-
-function onWindowResizeStart(data: any) {
-  isResizing.value = true
-
-  emit('resize:start', data)
-}
-
-function onWindowResizeMove(data: any) {
-  emit('resize:move', data)
-}
-
-/**
- * Window end resize event
- */
-function onWindowResizeEnd(data: {
-  left: number
-  top: number
-  width: number
-  height: number
-}) {
-  isResizing.value = false
-
-  windowController?.actions?.setPosition({
-    x: data.left,
-    y: data.top,
-  })
-
-  windowController?.actions?.setSize({
-    width: data.width,
-    height: data.height,
-  })
-
-  emit('resize:end', data)
-}
-
-const classes = computed(() => {
-  const list = ['owd-window']
-
-  if (windowController?.state.focused) {
-    list.push('owd-window--focused')
-  }
-
-  if (isDragging.value) {
-    list.push('owd-window--dragging')
-  }
-
-  if (isResizing.value) {
-    list.push('owd-window--resizing')
-  }
-
-  return list
-})
-
-/** While workspace overview is open, disable vue-resizable chrome drag and use native HTML5 drag to move windows between desktops. */
-const workspaceChromeDragSelector = computed(() => {
-  if (desktopWorkspaceStore.overview) {
-    return '.owd-window-overview-drag-none'
-  }
-  return windowController?.isDraggable
-    ? '.owd-window-nav__draggable'
-    : '.owd-window-nav__draggable-none'
-})
-
-function onOverviewNativeDragStart(e: DragEvent) {
-  if (!desktopWorkspaceStore.overview || !windowController) return
-  e.stopPropagation()
-  e.dataTransfer?.setData('text/plain', windowController.state.id)
-  e.dataTransfer!.effectAllowed = 'move'
-  try {
-    const img = new Image()
-    img.src =
-      'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
-    e.dataTransfer?.setDragImage(img, 0, 0)
-  } catch {
-    /* noop */
-  }
-}
-
-/** `fit-parent` clamps drag/resize to the parent box — wrong for viewport-fixed shells (Win11, GNOME). */
-const shouldFitParent = computed(
-  () => appConfig.desktop.windows.position !== 'fixed',
-)
-</script>
-
-<template>
-  <vue-resizable
-    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="shouldFitParent"
-    @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="workspaceChromeDragSelector"
-    :draggable="desktopWorkspaceStore.overview"
-    @pointerdown="onWindowPointerDown"
-    @dragstart="onOverviewNativeDragStart"
-  >
-    <slot />
-  </vue-resizable>
-</template>
-
-<style scoped lang="scss">
-/* vue-resizable sets `.resizable-component { position: relative }` — override so desktop geometry stays consistent */
-.owd-window.resizable-component {
-  position: v-bind('appConfig.desktop.windows.position') !important;
-}
-
-.owd-window {
-  position: v-bind('appConfig.desktop.windows.position');
-
-  &--dragging,
-  &--resizing {
-    :deep(.owd-window__content) {
-      pointer-events: none;
-    }
-  }
-
-  :deep(.owd-window__content) {
-    overflow-y: auto;
-    height: 100%;
-  }
-}
-</style>

package/runtime/components/Desktop/Window/DesktopWindowContent.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { inject } from 'vue'
-import { computed } from '@vue/reactivity'
-
-const windowContent = inject<WindowContent>('windowContent')
-
-const classes = computed(() => {
-  const list = ['owd-window__content']
-
-  if (windowContent?.centered) {
-    list.push('owd-window__content--centered')
-  }
-
-  if (windowContent?.padded) {
-    list.push('owd-window__content--padded')
-  }
-
-  return list
-})
-</script>
-
-<template>
-  <div :class="classes">
-    <slot />
-  </div>
-</template>
-
-<style scoped lang="scss"></style>

package/runtime/components/Desktop/Window/DesktopWindowNav.vue

@@ -1,66 +0,0 @@
-<script setup lang="ts">
-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
-  ) {
-    list.push('owd-window-nav--active')
-  }
-
-  if (windowController?.state.focused) {
-    list.push('owd-window-nav--focused')
-  }
-
-  return list
-})
-</script>
-
-<template>
-  <div :class="classes">
-    <div class="owd-window-nav__draggable" />
-
-    <slot />
-  </div>
-</template>
-
-<style lang="scss">
-/**
- * Title/icon sit above the drag layer in DOM order; use pointer-events so
- * mousedown reaches `.owd-window-nav__draggable` for vue-resizable. Window
- * controls stay clickable.
- */
-.owd-window-nav {
-  position: relative;
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  min-height: 0;
-
-  &__draggable {
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-  }
-
-  > :not(.owd-window-nav__draggable) {
-    position: relative;
-    z-index: 2;
-    pointer-events: none;
-  }
-
-  > .owd-window-nav__btn-group {
-    pointer-events: auto;
-  }
-
-  > .owd-window-nav__interactive {
-    pointer-events: auto;
-  }
-}
-</style>

package/runtime/composables/useApplicationEntries.ts

@@ -1,51 +0,0 @@
-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,285 +0,0 @@
-import { reactive, markRaw, computed } from 'vue'
-import { ApplicationController } from '../internal/controllers/ApplicationController'
-import { normalizeApplicationConfig } from '../utils/utilApp'
-import { debugLog } from '../utils/utilDebug'
-import * as shellwords from 'shellwords'
-import getopts from "getopts"
-
-const apps = reactive(new Map<string, IApplicationController>())
-
-/**
- * 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, markRaw(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 = new Map<string, IWindowController>()
-
-    for (const applicationController of apps.values()) {
-      if (
-        !applicationController.isRunning &&
-        applicationController.openWindowCount.value === 0
-      ) {
-        continue
-      }
-
-      for (const [windowId, window] of applicationController.windows) {
-        windows.set(windowId, window)
-      }
-    }
-
-    return windows
-  })
-
-  /**
-   * Array of running applications
-   */
-  const appsRunning = computed(() => {
-    const runningApps: IApplicationController[] = []
-
-    for (const applicationController of apps.values()) {
-      const openCount = applicationController.openWindowCount.value
-      if (applicationController.isRunning || openCount > 0) {
-        runningApps.push(applicationController)
-      }
-    }
-
-    return runningApps
-  })
-
-  function getWindowOpenedId(windowId: string) {
-    for (const window of windowsOpened.value.values()) {
-      if (window.state.id === windowId) {
-        return window
-      }
-    }
-  }
-
-  /**
-   * 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 {
-    defineApp,
-    isAppDefined,
-    getAppById,
-    isAppRunning,
-    launchAppEntry,
-    execAppCommand,
-    closeApp,
-    getWindowOpenedId,
-    apps,
-    appsEntries,
-    appsRunning,
-    windowsOpened,
-    appCategories,
-    appsByCategory,
-  }
-}