@owdproject/nuxt-theme-paper 0.0.0-stage → 4.0.0-alpha.4

package/src/runtime/assets/styles/partials/menu.scss

@@ -0,0 +1,88 @@
+/* Popup / overlay menus (teleport to body) */
+.p-menu,
+.p-tieredmenu,
+.p-menubar .p-menubar-submenu {
+  font-family: var(--paper-font);
+  font-size: 0.8125rem;
+  color: var(--paper-text);
+  background-color: var(--paper-menu-bg);
+  border: 1px solid var(--paper-border);
+  border-radius: var(--paper-radius);
+  box-shadow: none;
+}
+
+.p-menu {
+  .p-menu-list {
+    padding: 0.25rem;
+  }
+
+  .p-menu-item-content {
+    border-radius: var(--paper-radius);
+    transition: background-color 0.12s ease, color 0.12s ease;
+  }
+
+  .p-menu-item:not(.p-disabled) > .p-menu-item-content:hover,
+  .p-menu-item.p-focus > .p-menu-item-content {
+    background: var(--paper-accent-soft);
+    color: var(--paper-accent);
+  }
+
+  .p-menu-separator {
+    margin: 0.25rem 0.375rem;
+    border-top: 1px solid var(--paper-border);
+  }
+}
+
+.p-tieredmenu {
+  .p-tieredmenu-root-list,
+  .p-tieredmenu-submenu {
+    padding: 0.25rem;
+  }
+
+  .p-tieredmenu-item-content {
+    border-radius: var(--paper-radius);
+    transition: background-color 0.12s ease, color 0.12s ease;
+  }
+
+  .p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover,
+  .p-tieredmenu-item.p-focus > .p-tieredmenu-item-content,
+  .p-tieredmenu-item-active > .p-tieredmenu-item-content {
+    background: var(--paper-accent-soft);
+    color: var(--paper-accent);
+  }
+
+  .p-tieredmenu-separator {
+    margin: 0.25rem 0.375rem;
+    border-top: 1px solid var(--paper-border);
+  }
+
+  .p-tieredmenu-submenu {
+    background-color: var(--paper-menu-bg);
+    border: 1px solid var(--paper-border);
+    border-radius: var(--paper-radius);
+    box-shadow: none;
+  }
+}
+
+.p-menubar {
+  .p-menubar-submenu {
+    padding: 0.25rem;
+    border-radius: var(--paper-radius);
+
+    .p-menubar-item-content {
+      border-radius: var(--paper-radius);
+      transition: background-color 0.12s ease, color 0.12s ease;
+    }
+
+    .p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover,
+    .p-menubar-item.p-focus > .p-menubar-item-content {
+      background: var(--paper-accent-soft);
+      color: var(--paper-accent);
+    }
+  }
+
+  .p-menubar-separator {
+    margin: 0.25rem 0.375rem;
+    border-top: 1px solid var(--paper-border);
+  }
+}

package/src/runtime/assets/styles/partials/scrollbar.scss

@@ -0,0 +1,35 @@
+@mixin paper-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--paper-scrollbar-thumb) var(--paper-scrollbar-track);
+
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--paper-scrollbar-track);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--paper-scrollbar-thumb);
+    border: 2px solid transparent;
+    border-radius: var(--paper-radius-pill);
+    background-clip: padding-box;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--paper-scrollbar-thumb-hover);
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+}
+
+/* Scroll only inside window content and app panels — not on body */
+.owd-desktop--paper {
+  .desktop-window__content {
+    @include paper-scrollbar;
+  }
+}

package/src/runtime/assets/styles/partials/tabs.scss

@@ -0,0 +1,68 @@
+@use './variables';
+
+/* PrimeVue Tabs inside paper theme */
+.owd-desktop--paper {
+  .p-tabs {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    .p-tablist {
+      background: transparent;
+      border-bottom: 1px solid var(--paper-border);
+    }
+
+    .p-tablist-tab-list {
+      display: flex;
+      flex-direction: row;
+      gap: 4px;
+      border: 0;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+
+      .p-tab {
+        font-family: var(--paper-font);
+        font-size: 12px;
+        font-weight: 500;
+        color: var(--paper-text-secondary);
+        background: transparent;
+        border: 1px solid transparent;
+        border-bottom: 0;
+        border-top-left-radius: var(--paper-radius);
+        border-top-right-radius: var(--paper-radius);
+        padding: 4px 10px;
+        cursor: pointer;
+        transition: all 0.15s ease-in-out;
+        margin-bottom: -1px;
+
+        &:hover {
+          color: var(--paper-text);
+          background: color-mix(in srgb, var(--paper-surface) 95%, var(--paper-text));
+          border-color: transparent;
+          border-bottom: 0;
+        }
+
+        &.p-tab-active {
+          color: var(--paper-accent);
+          background: var(--paper-surface);
+          border-color: var(--paper-border);
+          border-bottom: 1px solid var(--paper-surface);
+
+          &:hover {
+            border-color: var(--paper-border);
+            border-bottom: 1px solid var(--paper-surface);
+            background: var(--paper-surface);
+          }
+        }
+      }
+    }
+
+    .p-tabpanels {
+      background: transparent;
+      padding: 12px 0 0 0;
+      border: 0;
+      color: var(--paper-text);
+    }
+  }
+}

package/src/runtime/assets/styles/partials/window-chrome.scss

@@ -0,0 +1,57 @@
+/*
+ * Window titlebar chrome for Paper theme windows.
+ * Layout/sizing lives in Vue components; colors and hover states here.
+ */
+.owd-desktop--paper .paper-window.owd-window.resizable-component {
+  .paper-window-nav {
+    min-height: var(--paper-nav-height);
+    padding: 0 0.5rem;
+    border-bottom: 1px solid var(--paper-border-window);
+    background: var(--paper-surface);
+    color: var(--paper-text);
+
+    .owd-window-nav__btn-group--append {
+      align-self: stretch;
+    }
+
+    .owd-window-nav__btn-group--append-inner {
+      display: flex;
+      align-items: stretch;
+    }
+
+    .owd-window-nav__button {
+      color: var(--paper-text-secondary);
+      transition: background-color 0.12s ease, color 0.12s ease;
+
+      &:hover {
+        background: var(--paper-bg);
+        color: var(--paper-text);
+      }
+
+      &:active {
+        background: color-mix(in srgb, var(--paper-text) 8%, var(--paper-bg));
+      }
+
+      &--close:hover {
+        background: color-mix(in srgb, #c0392b 88%, var(--paper-surface));
+        color: #fff;
+      }
+
+      &--close:active {
+        background: color-mix(in srgb, #e74c3c 92%, var(--paper-surface));
+        color: #fff;
+      }
+    }
+  }
+}
+
+.owd-desktop--paper .owd-window.resizable-component:not(.paper-window) .owd-window-nav {
+  .owd-window-nav__button {
+    color: var(--paper-text-secondary);
+
+    &:hover {
+      background: var(--paper-bg);
+      color: var(--paper-text);
+    }
+  }
+}

package/src/runtime/assets/styles/partials/window.scss

@@ -0,0 +1,32 @@
+/* Theme Window chrome lives in Window*.vue (scoped). Globals only for fallbacks. */
+
+.owd-desktop--paper .paper-window.owd-window.resizable-component {
+  overflow: hidden;
+}
+
+/* Apps that use DesktopWindow without theme <Window> (e.g. kit-fs explorer) */
+.owd-desktop--paper .owd-window.resizable-component:not(.paper-window) {
+  box-sizing: border-box;
+  overflow: hidden;
+  background: var(--paper-surface);
+  border: 1px solid var(--paper-border-window);
+  border-radius: var(--paper-radius);
+}
+
+.owd-desktop--paper .owd-window.resizable-component:not(.paper-window) .owd-window-nav {
+  min-height: var(--paper-nav-height);
+  padding: 0 0.625rem;
+  border-bottom: 1px solid var(--paper-border-window);
+  background: var(--paper-surface);
+  align-items: center;
+}
+
+.owd-desktop--paper .owd-window.resizable-component:not(.paper-window) .desktop-window__content {
+  background: var(--paper-surface);
+}
+
+.owd-desktop--paper .desktop-window__content--padded {
+  padding: 10px;
+  box-sizing: border-box;
+}
+

package/src/runtime/components/ButtonWindowNav.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+defineProps<{
+  title?: string
+  disabled?: boolean
+}>()
+</script>
+
+<template>
+  <DesktopWindowNavButton :title="title" :disabled="disabled">
+    <slot />
+  </DesktopWindowNavButton>
+</template>

package/src/runtime/components/Desktop.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import PaperSystemBar from './PaperSystemBar.vue'
+import PaperWindowSnapHints from './PaperWindowSnapHints.vue'
+import { useDesktopWorkArea } from '@owdproject/nuxt/runtime/composables/useDesktopWorkArea'
+
+const shellStageRef = ref<HTMLElement | null>(null)
+useDesktopWorkArea(shellStageRef)
+</script>
+
+<template>
+  <DesktopCore v-bind="$props" class="owd-desktop owd-desktop--paper">
+    <PaperSystemBar />
+    <PaperWindowSnapHints />
+    <div ref="shellStageRef" class="paper-shell__stage">
+      <DesktopContent>
+        <slot />
+      </DesktopContent>
+      <DesktopCoreApplicationRender />
+    </div>
+  </DesktopCore>
+</template>

package/src/runtime/components/DesktopContent.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="paper-desktop__content">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.paper-desktop__content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>

package/src/runtime/components/DesktopWindow.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+import { useWindowDragHandlers } from '@owdproject/nuxt/runtime/composables/useWindowDragHandlers'
+
+const props = defineProps<{
+  window?: IWindowController
+  content?: WindowContent
+}>()
+
+defineOptions({ inheritAttrs: false })
+
+const attrs = useAttrs()
+
+const windowRootClass = computed(() => {
+  return ['paper-window', attrs.class].filter(Boolean)
+})
+
+const windowRef = computed(
+  () => (props.window ?? attrs.window) as IWindowController | undefined,
+)
+const contentRef = computed(
+  () => (props.content ?? attrs.content) as WindowContent | undefined,
+)
+
+const { onDragStart, onDragEnd } = useWindowDragHandlers(
+  () => windowRef.value,
+)
+</script>
+
+<template>
+  <DesktopCoreWindow
+    :window="windowRef"
+    :content="contentRef"
+    v-show="windowRef?.state?.active !== false"
+    :class="windowRootClass"
+    @drag:start="onDragStart"
+    @drag:end="onDragEnd"
+  >
+    <div class="paper-window__frame">
+      <DesktopWindowNav>
+        <template v-slot:prepend>
+          <slot name="nav-prepend" />
+        </template>
+        <template v-slot:append>
+          <slot name="nav-append" />
+        </template>
+      </DesktopWindowNav>
+      <DesktopWindowContent>
+        <slot />
+      </DesktopWindowContent>
+    </div>
+  </DesktopCoreWindow>
+</template>
+
+<style scoped>
+.paper-window {
+  border-radius: var(--paper-radius);
+  overflow: hidden;
+}
+
+.paper-window__frame {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  background: var(--paper-surface);
+  border: 1px solid var(--paper-border-window);
+  border-radius: var(--paper-radius);
+}
+
+.paper-window :deep(.desktop-window__content) {
+  flex: 1;
+  min-height: 0;
+}
+</style>

package/src/runtime/components/DesktopWindowContent.vue

@@ -0,0 +1,31 @@
+<template>
+  <DesktopCoreWindowContent class="paper-window__body">
+    <div class="paper-window-body">
+      <slot />
+    </div>
+  </DesktopCoreWindowContent>
+</template>
+
+<style scoped lang="scss">
+:deep(.desktop-window__content) {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.paper-window__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  background: var(--paper-surface);
+}
+
+.paper-window-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+}
+</style>

package/src/runtime/components/DesktopWindowIframe.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const props = defineProps<{
+  config?: WindowConfig
+  window?: IWindowController
+  src: string
+}>()
+</script>
+
+<template>
+  <DesktopWindow v-bind="$props">
+    <template #nav-prepend>
+      <slot name="nav-prepend" />
+    </template>
+    <template #nav-append>
+      <slot name="nav-append" />
+    </template>
+    <iframe :src="src" />
+  </DesktopWindow>
+</template>
+
+<style scoped lang="scss">
+iframe {
+  display: block;
+  flex: 1 1 auto;
+  min-height: 0;
+  border: 0;
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/runtime/components/DesktopWindowNav.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+
+const windowController = inject<IWindowController>('windowController')
+
+function onClose() {
+  if (!windowController?.instanced) return
+  windowController.actions.destroy()
+}
+</script>
+
+<template>
+  <DesktopCoreWindowNav class="paper-window-nav">
+    <div
+      v-if="$slots.prepend"
+      class="owd-window-nav__btn-group owd-window-nav__btn-group--prepend"
+    >
+      <slot name="prepend" />
+    </div>
+
+    <div v-if="windowController?.windowTitle" class="paper-window-nav__title-container">
+      <Icon
+        v-if="windowController?.icon"
+        :name="windowController.icon"
+        class="paper-window-nav__icon"
+      />
+      <span class="paper-window-nav__title">
+        {{ windowController.windowTitle }}
+      </span>
+    </div>
+
+    <div class="desktop-window-nav__btn-group owd-window-nav__btn-group owd-window-nav__btn-group--append">
+      <div
+        v-if="$slots.append"
+        class="owd-window-nav__btn-group owd-window-nav__btn-group--append-inner"
+      >
+        <slot name="append" />
+      </div>
+
+      <DesktopWindowNavButton
+        v-if="!windowController?.instanced || windowController?.isDestroyable"
+        class="owd-window-nav__button--close"
+        title="Close"
+        @mousedown.stop
+        @click.stop="onClose"
+      >
+        <svg width="9.5" height="9.5" viewBox="0 0 12 12" aria-hidden="true">
+          <path
+            d="M1 1l10 10M11 1L1 11"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.6"
+            stroke-linecap="round"
+          />
+        </svg>
+      </DesktopWindowNavButton>
+    </div>
+  </DesktopCoreWindowNav>
+</template>
+
+<style scoped lang="scss">
+.paper-window-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  flex-shrink: 0;
+  min-height: var(--paper-nav-height);
+}
+
+.paper-window-nav__title-container {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+}
+
+.paper-window-nav__icon {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  color: var(--paper-text-secondary);
+}
+
+.paper-window-nav__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.2;
+  color: var(--paper-text);
+}
+
+.owd-window-nav__btn-group {
+  display: flex;
+  align-items: stretch;
+  gap: 4px;
+}
+
+.owd-window-nav__btn-group--append {
+  margin-left: auto;
+}
+
+.owd-window-nav__btn-group--append-inner {
+  display: flex;
+  align-items: stretch;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+</style>

package/src/runtime/components/DesktopWindowNavButton.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+defineProps<{
+  title?: string
+  disabled?: boolean
+}>()
+</script>
+
+<template>
+  <button
+    type="button"
+    class="owd-window-nav__button"
+    :title="title"
+    :aria-label="title"
+    :disabled="disabled"
+    @mousedown.stop
+  >
+    <slot />
+  </button>
+</template>
+
+<style scoped lang="scss">
+/* Sizing only — colors/hover in window-chrome.scss */
+.owd-window-nav__button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: var(--paper-nav-button-size);
+  min-width: var(--paper-nav-button-size);
+  height: var(--paper-nav-button-size);
+  min-height: var(--paper-nav-button-size);
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: var(--paper-radius);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.45;
+    cursor: default;
+    pointer-events: none;
+  }
+
+  :deep(.iconify),
+  :deep(svg) {
+    width: 12px;
+    height: 12px;
+    pointer-events: none;
+  }
+}
+</style>