@owdproject/core 3.4.0 → 4.0.0-alpha.4

package/runtime/components/core/DesktopCore.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { useAttrs, computed } from 'vue'
-import { useAppConfig } from 'nuxt/app'
-
-defineOptions({ inheritAttrs: false })
-
-defineProps<{
-  windows?: DesktopWindowsConfig
-  systemBar?: DesktopSystemBarConfig
-  dockBar?: DesktopDockBarConfig
-  workspaces?: DesktopWorkspacesConfig
-}>()
-
-const appConfig = useAppConfig()
-const attrs = useAttrs()
-
-const classes = computed(() => {
-  const list = ['owd-desktop']
-
-  if (appConfig.desktop?.name) {
-    list.push(`owd-desktop--${appConfig.desktop.name}`)
-  }
-
-  return list
-})
-
-const rootClass = computed(() => [classes.value, attrs.class])
-const rootStyle = computed(() => attrs.style)
-</script>
-
-<template>
-  <div :class="rootClass" :style="rootStyle">
-    <slot />
-  </div>
-</template>
-
-<style scoped lang="scss">
-.owd-desktop {
-  width: 100vw;
-  height: 100dvh;
-  user-select: none;
-}
-</style>

package/runtime/components/time/DesktopCoreTime.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/window/DesktopCoreWindow.vue

@@ -1,215 +0,0 @@
-<script setup lang="ts">
-import { ref, provide, onMounted } from 'vue'
-import { computed } from '@vue/reactivity'
-import { useAppConfig } from 'nuxt/app'
-import { handleWindowControllerProps } from '../../utils/utilWindowControllerAdapter'
-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)
-
-onMounted(() => {
-  if (windowController?.state?.focused) {
-    windowController.actions.bringToFront()
-  }
-})
-
-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 */
-  }
-}
-
-const windowPositionMode = computed(
-  () => appConfig.desktop?.windows?.position ?? 'fixed',
-)
-
-/** `fit-parent` clamps drag/resize to the parent box — wrong for viewport-fixed shells (Win11, GNOME). */
-const shouldFitParent = computed(
-  () => windowPositionMode.value !== '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('windowPositionMode') !important;
-}
-
-.owd-window {
-  position: v-bind('windowPositionMode');
-
-  &--dragging,
-  &--resizing {
-    :deep(.owd-window__content) {
-      pointer-events: none;
-    }
-  }
-
-  :deep(.owd-window__content) {
-    overflow-y: auto;
-    height: 100%;
-    min-height: 0;
-  }
-}
-</style>

package/runtime/components/window/DesktopCoreWindowContent.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/window/DesktopCoreWindowNav.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/components/window/DesktopCoreWindowSnapHintsBase.vue

@@ -1,74 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useDesktopWorkspaceStore } from '@owdproject/core/runtime/stores/storeDesktopWorkspace'
-import { useWindowSnapDrop } from '@owdproject/core/runtime/composables/useWindowSnapDrop'
-
-const props = defineProps<{
-  enabled?: boolean
-}>()
-
-const desktopWorkspaceStore = useDesktopWorkspaceStore()
-const { snapHint, snapHintRect, isSnapDragActive } = useWindowSnapDrop()
-
-const visible = computed(
-  () =>
-    props.enabled !== false &&
-    !desktopWorkspaceStore.overview &&
-    isSnapDragActive.value &&
-    snapHint.value !== null &&
-    snapHintRect.value !== null,
-)
-
-const hintStyle = computed(() => {
-  const rect = snapHintRect.value
-  if (!rect) return undefined
-
-  return {
-    left: `${rect.x}px`,
-    top: `${rect.y}px`,
-    width: `${rect.width}px`,
-    height: `${rect.height}px`,
-  }
-})
-</script>
-
-<template>
-  <div
-    v-if="visible"
-    class="owd-window-snap-hints"
-    aria-hidden="true"
-  >
-    <div
-      class="owd-window-snap-hints__zone"
-      :class="`owd-window-snap-hints__zone--${snapHint}`"
-      :style="hintStyle"
-    >
-      <slot
-        :zone="snapHint"
-        :rect="snapHintRect"
-      />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.owd-window-snap-hints {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: 999998;
-}
-
-.owd-window-snap-hints__zone {
-  position: fixed;
-  box-sizing: border-box;
-  border: 2px solid rgba(96, 165, 250, 0.85);
-  background: rgba(96, 165, 250, 0.18);
-  border-radius: 4px;
-  transition:
-    left 80ms ease,
-    top 80ms ease,
-    width 80ms ease,
-    height 80ms ease;
-}
-</style>

package/runtime/components/workspace/DesktopCoreWorkspaceEdgeHintsBase.vue

@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useWorkspaceEdgeDrop } from '@owdproject/core/runtime/composables/useWorkspaceEdgeDrop'
-import { useDesktopWorkspaceStore } from '@owdproject/core/runtime/stores/storeDesktopWorkspace'
-
-const props = defineProps<{
-  enabled?: boolean
-}>()
-
-const desktopWorkspaceStore = useDesktopWorkspaceStore()
-const { edgeHint, edgeTargetDesktopIndex } = useWorkspaceEdgeDrop()
-
-const visible = computed(
-  () =>
-    props.enabled !== false &&
-    !desktopWorkspaceStore.overview &&
-    desktopWorkspaceStore.list.length > 1 &&
-    edgeHint.value !== null &&
-    edgeTargetDesktopIndex.value !== null,
-)
-</script>
-
-<template>
-  <div
-    v-if="visible"
-    class="owd-workspace-edge-hints"
-    aria-hidden="true"
-  >
-    <div
-      class="owd-workspace-edge-hints__zone owd-workspace-edge-hints__zone--left"
-      :class="{
-        'owd-workspace-edge-hints__zone--active': edgeHint === 'left',
-      }"
-    >
-      <slot
-        name="left"
-        :desktop-index="edgeTargetDesktopIndex"
-        :side="'left' as const"
-      />
-    </div>
-    <div
-      class="owd-workspace-edge-hints__zone owd-workspace-edge-hints__zone--right"
-      :class="{
-        'owd-workspace-edge-hints__zone--active': edgeHint === 'right',
-      }"
-    >
-      <slot
-        name="right"
-        :desktop-index="edgeTargetDesktopIndex"
-        :side="'right' as const"
-      />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.owd-workspace-edge-hints {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: 999998;
-}
-
-.owd-workspace-edge-hints__zone {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  width: 72px;
-  opacity: 0;
-  transition: opacity 120ms ease;
-}
-
-.owd-workspace-edge-hints__zone--left {
-  left: 0;
-}
-
-.owd-workspace-edge-hints__zone--right {
-  right: 0;
-}
-
-.owd-workspace-edge-hints__zone--active {
-  opacity: 1;
-}
-</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 }
-}