@owdproject/nuxt-theme-paper 0.0.0-stage → 4.0.0-alpha.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +62 -2
- package/dist/module.d.mts +7 -0
- package/dist/module.json +9 -0
- package/dist/module.mjs +55 -0
- package/dist/runtime/assets/styles/index.css +533 -0
- package/dist/runtime/assets/styles/partials/checkbox.css +158 -0
- package/dist/runtime/assets/styles/partials/contextmenu.css +22 -0
- package/dist/runtime/assets/styles/partials/desktop.css +69 -0
- package/dist/runtime/assets/styles/partials/input.css +155 -0
- package/dist/runtime/assets/styles/partials/menu.css +72 -0
- package/dist/runtime/assets/styles/partials/scrollbar.css +25 -0
- package/dist/runtime/assets/styles/partials/tabs.css +163 -0
- package/dist/runtime/assets/styles/partials/window-chrome.css +45 -0
- package/dist/runtime/assets/styles/partials/window.css +30 -0
- package/dist/runtime/components/ButtonWindowNav.d.vue.ts +17 -0
- package/dist/runtime/components/ButtonWindowNav.vue +12 -0
- package/dist/runtime/components/ButtonWindowNav.vue.d.ts +17 -0
- package/dist/runtime/components/Desktop.d.vue.ts +13 -0
- package/dist/runtime/components/Desktop.vue +21 -0
- package/dist/runtime/components/Desktop.vue.d.ts +13 -0
- package/dist/runtime/components/DesktopContent.d.vue.ts +13 -0
- package/dist/runtime/components/DesktopContent.vue +9 -0
- package/dist/runtime/components/DesktopContent.vue.d.ts +13 -0
- package/dist/runtime/components/DesktopWindow.d.vue.ts +21 -0
- package/dist/runtime/components/DesktopWindow.vue +51 -0
- package/dist/runtime/components/DesktopWindow.vue.d.ts +21 -0
- package/dist/runtime/components/DesktopWindowContent.d.vue.ts +13 -0
- package/dist/runtime/components/DesktopWindowContent.vue +31 -0
- package/dist/runtime/components/DesktopWindowContent.vue.d.ts +13 -0
- package/dist/runtime/components/DesktopWindowIframe.d.vue.ts +20 -0
- package/dist/runtime/components/DesktopWindowIframe.vue +30 -0
- package/dist/runtime/components/DesktopWindowIframe.vue.d.ts +20 -0
- package/dist/runtime/components/DesktopWindowNav.d.vue.ts +15 -0
- package/dist/runtime/components/DesktopWindowNav.vue +113 -0
- package/dist/runtime/components/DesktopWindowNav.vue.d.ts +15 -0
- package/dist/runtime/components/DesktopWindowNavButton.d.vue.ts +17 -0
- package/dist/runtime/components/DesktopWindowNavButton.vue +54 -0
- package/dist/runtime/components/DesktopWindowNavButton.vue.d.ts +17 -0
- package/dist/runtime/components/PaperSystemBar.d.vue.ts +3 -0
- package/dist/runtime/components/PaperSystemBar.vue +808 -0
- package/dist/runtime/components/PaperSystemBar.vue.d.ts +3 -0
- package/dist/runtime/components/PaperWindowSnapHints.d.vue.ts +3 -0
- package/dist/runtime/components/PaperWindowSnapHints.vue +7 -0
- package/dist/runtime/components/PaperWindowSnapHints.vue.d.ts +3 -0
- package/dist/runtime/composables/usePaperAppearance.d.ts +8 -0
- package/dist/runtime/composables/usePaperAppearance.js +18 -0
- package/dist/runtime/plugins/paper-appearance.client.d.ts +6 -0
- package/dist/runtime/plugins/paper-appearance.client.js +17 -0
- package/dist/runtime/utils/paperAppearance.d.ts +10 -0
- package/dist/runtime/utils/paperAppearance.js +18 -0
- package/dist/types.d.mts +7 -0
- package/package.json +61 -4
- package/src/module.ts +71 -0
- package/src/runtime/assets/styles/index.scss +13 -0
- package/src/runtime/assets/styles/partials/_variables.scss +111 -0
- package/src/runtime/assets/styles/partials/checkbox.scss +64 -0
- package/src/runtime/assets/styles/partials/contextmenu.scss +25 -0
- package/src/runtime/assets/styles/partials/desktop.scss +70 -0
- package/src/runtime/assets/styles/partials/input.scss +55 -0
- package/src/runtime/assets/styles/partials/menu.scss +88 -0
- package/src/runtime/assets/styles/partials/scrollbar.scss +35 -0
- package/src/runtime/assets/styles/partials/tabs.scss +68 -0
- package/src/runtime/assets/styles/partials/window-chrome.scss +57 -0
- package/src/runtime/assets/styles/partials/window.scss +32 -0
- package/src/runtime/components/ButtonWindowNav.vue +12 -0
- package/src/runtime/components/Desktop.vue +22 -0
- package/src/runtime/components/DesktopContent.vue +14 -0
- package/src/runtime/components/DesktopWindow.vue +76 -0
- package/src/runtime/components/DesktopWindowContent.vue +31 -0
- package/src/runtime/components/DesktopWindowIframe.vue +30 -0
- package/src/runtime/components/DesktopWindowNav.vue +115 -0
- package/src/runtime/components/DesktopWindowNavButton.vue +55 -0
- package/src/runtime/components/PaperSystemBar.vue +1482 -0
- package/src/runtime/components/PaperWindowSnapHints.vue +7 -0
- package/src/runtime/composables/usePaperAppearance.ts +26 -0
- package/src/runtime/plugins/paper-appearance.client.ts +24 -0
- package/src/runtime/utils/paperAppearance.ts +31 -0
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Window titlebar chrome for Paper theme windows.
|
|
3
|
+
* Layout/sizing lives in Vue components; colors and hover states here.
|
|
4
|
+
*/
|
|
5
|
+
.owd-desktop--paper .paper-window.owd-window.resizable-component .paper-window-nav {
|
|
6
|
+
min-height: var(--paper-nav-height);
|
|
7
|
+
padding: 0 0.5rem;
|
|
8
|
+
border-bottom: 1px solid var(--paper-border-window);
|
|
9
|
+
background: var(--paper-surface);
|
|
10
|
+
color: var(--paper-text);
|
|
11
|
+
}
|
|
12
|
+
.owd-desktop--paper .paper-window.owd-window.resizable-component .paper-window-nav .owd-window-nav__btn-group--append {
|
|
13
|
+
align-self: stretch;
|
|
14
|
+
}
|
|
15
|
+
.owd-desktop--paper .paper-window.owd-window.resizable-component .paper-window-nav .owd-window-nav__btn-group--append-inner {
|
|
16
|
+
display: flex;
|
|
17
|
+
align-items: stretch;
|
|
18
|
+
}
|
|
19
|
+
.owd-desktop--paper .paper-window.owd-window.resizable-component .paper-window-nav .owd-window-nav__button {
|
|
20
|
+
color: var(--paper-text-secondary);
|
|
21
|
+
transition: background-color 0.12s ease, color 0.12s ease;
|
|
22
|
+
}
|
|
23
|
+
.owd-desktop--paper .paper-window.owd-window.resizable-component .paper-window-nav .owd-window-nav__button:hover {
|
|
24
|
+
background: var(--paper-bg);
|
|
25
|
+
color: var(--paper-text);
|
|
26
|
+
}
|
|
27
|
+
.owd-desktop--paper .paper-window.owd-window.resizable-component .paper-window-nav .owd-window-nav__button:active {
|
|
28
|
+
background: color-mix(in srgb, var(--paper-text) 8%, var(--paper-bg));
|
|
29
|
+
}
|
|
30
|
+
.owd-desktop--paper .paper-window.owd-window.resizable-component .paper-window-nav .owd-window-nav__button--close:hover {
|
|
31
|
+
background: color-mix(in srgb, #c0392b 88%, var(--paper-surface));
|
|
32
|
+
color: #fff;
|
|
33
|
+
}
|
|
34
|
+
.owd-desktop--paper .paper-window.owd-window.resizable-component .paper-window-nav .owd-window-nav__button--close:active {
|
|
35
|
+
background: color-mix(in srgb, #e74c3c 92%, var(--paper-surface));
|
|
36
|
+
color: #fff;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.owd-desktop--paper .owd-window.resizable-component:not(.paper-window) .owd-window-nav .owd-window-nav__button {
|
|
40
|
+
color: var(--paper-text-secondary);
|
|
41
|
+
}
|
|
42
|
+
.owd-desktop--paper .owd-window.resizable-component:not(.paper-window) .owd-window-nav .owd-window-nav__button:hover {
|
|
43
|
+
background: var(--paper-bg);
|
|
44
|
+
color: var(--paper-text);
|
|
45
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/* Theme Window chrome lives in Window*.vue (scoped). Globals only for fallbacks. */
|
|
2
|
+
.owd-desktop--paper .paper-window.owd-window.resizable-component {
|
|
3
|
+
overflow: hidden;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
/* Apps that use DesktopWindow without theme <Window> (e.g. kit-fs explorer) */
|
|
7
|
+
.owd-desktop--paper .owd-window.resizable-component:not(.paper-window) {
|
|
8
|
+
box-sizing: border-box;
|
|
9
|
+
overflow: hidden;
|
|
10
|
+
background: var(--paper-surface);
|
|
11
|
+
border: 1px solid var(--paper-border-window);
|
|
12
|
+
border-radius: var(--paper-radius);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.owd-desktop--paper .owd-window.resizable-component:not(.paper-window) .owd-window-nav {
|
|
16
|
+
min-height: var(--paper-nav-height);
|
|
17
|
+
padding: 0 0.625rem;
|
|
18
|
+
border-bottom: 1px solid var(--paper-border-window);
|
|
19
|
+
background: var(--paper-surface);
|
|
20
|
+
align-items: center;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.owd-desktop--paper .owd-window.resizable-component:not(.paper-window) .desktop-window__content {
|
|
24
|
+
background: var(--paper-surface);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.owd-desktop--paper .desktop-window__content--padded {
|
|
28
|
+
padding: 10px;
|
|
29
|
+
box-sizing: border-box;
|
|
30
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
title?: string;
|
|
3
|
+
disabled?: boolean;
|
|
4
|
+
};
|
|
5
|
+
declare var __VLS_7: {};
|
|
6
|
+
type __VLS_Slots = {} & {
|
|
7
|
+
default?: (props: typeof __VLS_7) => any;
|
|
8
|
+
};
|
|
9
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
10
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
11
|
+
declare const _default: typeof __VLS_export;
|
|
12
|
+
export default _default;
|
|
13
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
14
|
+
new (): {
|
|
15
|
+
$slots: S;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
defineProps({
|
|
3
|
+
title: { type: String, required: false },
|
|
4
|
+
disabled: { type: Boolean, required: false }
|
|
5
|
+
});
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<template>
|
|
9
|
+
<DesktopWindowNavButton :title="title" :disabled="disabled">
|
|
10
|
+
<slot />
|
|
11
|
+
</DesktopWindowNavButton>
|
|
12
|
+
</template>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
title?: string;
|
|
3
|
+
disabled?: boolean;
|
|
4
|
+
};
|
|
5
|
+
declare var __VLS_7: {};
|
|
6
|
+
type __VLS_Slots = {} & {
|
|
7
|
+
default?: (props: typeof __VLS_7) => any;
|
|
8
|
+
};
|
|
9
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
10
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
11
|
+
declare const _default: typeof __VLS_export;
|
|
12
|
+
export default _default;
|
|
13
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
14
|
+
new (): {
|
|
15
|
+
$slots: S;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
declare var __VLS_23: {};
|
|
2
|
+
type __VLS_Slots = {} & {
|
|
3
|
+
default?: (props: typeof __VLS_23) => any;
|
|
4
|
+
};
|
|
5
|
+
declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
6
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
7
|
+
declare const _default: typeof __VLS_export;
|
|
8
|
+
export default _default;
|
|
9
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
10
|
+
new (): {
|
|
11
|
+
$slots: S;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { ref } from "vue";
|
|
3
|
+
import PaperSystemBar from "./PaperSystemBar.vue";
|
|
4
|
+
import PaperWindowSnapHints from "./PaperWindowSnapHints.vue";
|
|
5
|
+
import { useDesktopWorkArea } from "@owdproject/nuxt/runtime/composables/useDesktopWorkArea";
|
|
6
|
+
const shellStageRef = ref(null);
|
|
7
|
+
useDesktopWorkArea(shellStageRef);
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<template>
|
|
11
|
+
<DesktopCore v-bind="$props" class="owd-desktop owd-desktop--paper">
|
|
12
|
+
<PaperSystemBar />
|
|
13
|
+
<PaperWindowSnapHints />
|
|
14
|
+
<div ref="shellStageRef" class="paper-shell__stage">
|
|
15
|
+
<DesktopContent>
|
|
16
|
+
<slot />
|
|
17
|
+
</DesktopContent>
|
|
18
|
+
<DesktopCoreApplicationRender />
|
|
19
|
+
</div>
|
|
20
|
+
</DesktopCore>
|
|
21
|
+
</template>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
declare var __VLS_23: {};
|
|
2
|
+
type __VLS_Slots = {} & {
|
|
3
|
+
default?: (props: typeof __VLS_23) => any;
|
|
4
|
+
};
|
|
5
|
+
declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
6
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
7
|
+
declare const _default: typeof __VLS_export;
|
|
8
|
+
export default _default;
|
|
9
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
10
|
+
new (): {
|
|
11
|
+
$slots: S;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
declare var __VLS_1: {};
|
|
2
|
+
type __VLS_Slots = {} & {
|
|
3
|
+
default?: (props: typeof __VLS_1) => any;
|
|
4
|
+
};
|
|
5
|
+
declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
6
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
7
|
+
declare const _default: typeof __VLS_export;
|
|
8
|
+
export default _default;
|
|
9
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
10
|
+
new (): {
|
|
11
|
+
$slots: S;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
declare var __VLS_1: {};
|
|
2
|
+
type __VLS_Slots = {} & {
|
|
3
|
+
default?: (props: typeof __VLS_1) => any;
|
|
4
|
+
};
|
|
5
|
+
declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
6
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
7
|
+
declare const _default: typeof __VLS_export;
|
|
8
|
+
export default _default;
|
|
9
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
10
|
+
new (): {
|
|
11
|
+
$slots: S;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
window?: IWindowController;
|
|
3
|
+
content?: WindowContent;
|
|
4
|
+
};
|
|
5
|
+
declare var __VLS_17: {}, __VLS_20: {}, __VLS_28: {};
|
|
6
|
+
type __VLS_Slots = {} & {
|
|
7
|
+
'nav-prepend'?: (props: typeof __VLS_17) => any;
|
|
8
|
+
} & {
|
|
9
|
+
'nav-append'?: (props: typeof __VLS_20) => any;
|
|
10
|
+
} & {
|
|
11
|
+
default?: (props: typeof __VLS_28) => any;
|
|
12
|
+
};
|
|
13
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
14
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
15
|
+
declare const _default: typeof __VLS_export;
|
|
16
|
+
export default _default;
|
|
17
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
18
|
+
new (): {
|
|
19
|
+
$slots: S;
|
|
20
|
+
};
|
|
21
|
+
};
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { computed, useAttrs } from "vue";
|
|
3
|
+
import { useWindowDragHandlers } from "@owdproject/nuxt/runtime/composables/useWindowDragHandlers";
|
|
4
|
+
const props = defineProps({
|
|
5
|
+
window: { type: null, required: false },
|
|
6
|
+
content: { type: null, required: false }
|
|
7
|
+
});
|
|
8
|
+
defineOptions({ inheritAttrs: false });
|
|
9
|
+
const attrs = useAttrs();
|
|
10
|
+
const windowRootClass = computed(() => {
|
|
11
|
+
return ["paper-window", attrs.class].filter(Boolean);
|
|
12
|
+
});
|
|
13
|
+
const windowRef = computed(
|
|
14
|
+
() => props.window ?? attrs.window
|
|
15
|
+
);
|
|
16
|
+
const contentRef = computed(
|
|
17
|
+
() => props.content ?? attrs.content
|
|
18
|
+
);
|
|
19
|
+
const { onDragStart, onDragEnd } = useWindowDragHandlers(
|
|
20
|
+
() => windowRef.value
|
|
21
|
+
);
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
<template>
|
|
25
|
+
<DesktopCoreWindow
|
|
26
|
+
:window="windowRef"
|
|
27
|
+
:content="contentRef"
|
|
28
|
+
v-show="windowRef?.state?.active !== false"
|
|
29
|
+
:class="windowRootClass"
|
|
30
|
+
@drag:start="onDragStart"
|
|
31
|
+
@drag:end="onDragEnd"
|
|
32
|
+
>
|
|
33
|
+
<div class="paper-window__frame">
|
|
34
|
+
<DesktopWindowNav>
|
|
35
|
+
<template v-slot:prepend>
|
|
36
|
+
<slot name="nav-prepend" />
|
|
37
|
+
</template>
|
|
38
|
+
<template v-slot:append>
|
|
39
|
+
<slot name="nav-append" />
|
|
40
|
+
</template>
|
|
41
|
+
</DesktopWindowNav>
|
|
42
|
+
<DesktopWindowContent>
|
|
43
|
+
<slot />
|
|
44
|
+
</DesktopWindowContent>
|
|
45
|
+
</div>
|
|
46
|
+
</DesktopCoreWindow>
|
|
47
|
+
</template>
|
|
48
|
+
|
|
49
|
+
<style scoped>
|
|
50
|
+
.paper-window{border-radius:var(--paper-radius);overflow:hidden}.paper-window__frame{background:var(--paper-surface);border:1px solid var(--paper-border-window);border-radius:var(--paper-radius);box-sizing:border-box;display:flex;flex-direction:column;height:100%;overflow:hidden}.paper-window :deep(.desktop-window__content){flex:1;min-height:0}
|
|
51
|
+
</style>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
window?: IWindowController;
|
|
3
|
+
content?: WindowContent;
|
|
4
|
+
};
|
|
5
|
+
declare var __VLS_17: {}, __VLS_20: {}, __VLS_28: {};
|
|
6
|
+
type __VLS_Slots = {} & {
|
|
7
|
+
'nav-prepend'?: (props: typeof __VLS_17) => any;
|
|
8
|
+
} & {
|
|
9
|
+
'nav-append'?: (props: typeof __VLS_20) => any;
|
|
10
|
+
} & {
|
|
11
|
+
default?: (props: typeof __VLS_28) => any;
|
|
12
|
+
};
|
|
13
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
14
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
15
|
+
declare const _default: typeof __VLS_export;
|
|
16
|
+
export default _default;
|
|
17
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
18
|
+
new (): {
|
|
19
|
+
$slots: S;
|
|
20
|
+
};
|
|
21
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
declare var __VLS_7: {};
|
|
2
|
+
type __VLS_Slots = {} & {
|
|
3
|
+
default?: (props: typeof __VLS_7) => any;
|
|
4
|
+
};
|
|
5
|
+
declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
6
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
7
|
+
declare const _default: typeof __VLS_export;
|
|
8
|
+
export default _default;
|
|
9
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
10
|
+
new (): {
|
|
11
|
+
$slots: S;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<DesktopCoreWindowContent class="paper-window__body">
|
|
3
|
+
<div class="paper-window-body">
|
|
4
|
+
<slot />
|
|
5
|
+
</div>
|
|
6
|
+
</DesktopCoreWindowContent>
|
|
7
|
+
</template>
|
|
8
|
+
|
|
9
|
+
<style scoped>
|
|
10
|
+
:deep(.desktop-window__content) {
|
|
11
|
+
flex: 1 1 auto;
|
|
12
|
+
display: flex;
|
|
13
|
+
flex-direction: column;
|
|
14
|
+
min-height: 0;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.paper-window__body {
|
|
18
|
+
flex: 1 1 auto;
|
|
19
|
+
min-height: 0;
|
|
20
|
+
overflow: auto;
|
|
21
|
+
background: var(--paper-surface);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.paper-window-body {
|
|
25
|
+
display: flex;
|
|
26
|
+
flex-direction: column;
|
|
27
|
+
flex: 1 1 auto;
|
|
28
|
+
min-height: 0;
|
|
29
|
+
height: 100%;
|
|
30
|
+
}
|
|
31
|
+
</style>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
declare var __VLS_7: {};
|
|
2
|
+
type __VLS_Slots = {} & {
|
|
3
|
+
default?: (props: typeof __VLS_7) => any;
|
|
4
|
+
};
|
|
5
|
+
declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
6
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
7
|
+
declare const _default: typeof __VLS_export;
|
|
8
|
+
export default _default;
|
|
9
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
10
|
+
new (): {
|
|
11
|
+
$slots: S;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
config?: WindowConfig;
|
|
3
|
+
window?: IWindowController;
|
|
4
|
+
src: string;
|
|
5
|
+
};
|
|
6
|
+
declare var __VLS_8: {}, __VLS_11: {};
|
|
7
|
+
type __VLS_Slots = {} & {
|
|
8
|
+
'nav-prepend'?: (props: typeof __VLS_8) => any;
|
|
9
|
+
} & {
|
|
10
|
+
'nav-append'?: (props: typeof __VLS_11) => any;
|
|
11
|
+
};
|
|
12
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
13
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
14
|
+
declare const _default: typeof __VLS_export;
|
|
15
|
+
export default _default;
|
|
16
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
17
|
+
new (): {
|
|
18
|
+
$slots: S;
|
|
19
|
+
};
|
|
20
|
+
};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
const props = defineProps({
|
|
3
|
+
config: { type: null, required: false },
|
|
4
|
+
window: { type: null, required: false },
|
|
5
|
+
src: { type: String, required: true }
|
|
6
|
+
});
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<template>
|
|
10
|
+
<DesktopWindow v-bind="$props">
|
|
11
|
+
<template #nav-prepend>
|
|
12
|
+
<slot name="nav-prepend" />
|
|
13
|
+
</template>
|
|
14
|
+
<template #nav-append>
|
|
15
|
+
<slot name="nav-append" />
|
|
16
|
+
</template>
|
|
17
|
+
<iframe :src="src" />
|
|
18
|
+
</DesktopWindow>
|
|
19
|
+
</template>
|
|
20
|
+
|
|
21
|
+
<style scoped>
|
|
22
|
+
iframe {
|
|
23
|
+
display: block;
|
|
24
|
+
flex: 1 1 auto;
|
|
25
|
+
min-height: 0;
|
|
26
|
+
border: 0;
|
|
27
|
+
width: 100%;
|
|
28
|
+
height: 100%;
|
|
29
|
+
}
|
|
30
|
+
</style>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
config?: WindowConfig;
|
|
3
|
+
window?: IWindowController;
|
|
4
|
+
src: string;
|
|
5
|
+
};
|
|
6
|
+
declare var __VLS_8: {}, __VLS_11: {};
|
|
7
|
+
type __VLS_Slots = {} & {
|
|
8
|
+
'nav-prepend'?: (props: typeof __VLS_8) => any;
|
|
9
|
+
} & {
|
|
10
|
+
'nav-append'?: (props: typeof __VLS_11) => any;
|
|
11
|
+
};
|
|
12
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
13
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
14
|
+
declare const _default: typeof __VLS_export;
|
|
15
|
+
export default _default;
|
|
16
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
17
|
+
new (): {
|
|
18
|
+
$slots: S;
|
|
19
|
+
};
|
|
20
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
declare var __VLS_7: {}, __VLS_14: {};
|
|
2
|
+
type __VLS_Slots = {} & {
|
|
3
|
+
prepend?: (props: typeof __VLS_7) => any;
|
|
4
|
+
} & {
|
|
5
|
+
append?: (props: typeof __VLS_14) => any;
|
|
6
|
+
};
|
|
7
|
+
declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
8
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
9
|
+
declare const _default: typeof __VLS_export;
|
|
10
|
+
export default _default;
|
|
11
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
12
|
+
new (): {
|
|
13
|
+
$slots: S;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { inject } from "vue";
|
|
3
|
+
const windowController = inject("windowController");
|
|
4
|
+
function onClose() {
|
|
5
|
+
if (!windowController?.instanced) return;
|
|
6
|
+
windowController.actions.destroy();
|
|
7
|
+
}
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<template>
|
|
11
|
+
<DesktopCoreWindowNav class="paper-window-nav">
|
|
12
|
+
<div
|
|
13
|
+
v-if="$slots.prepend"
|
|
14
|
+
class="owd-window-nav__btn-group owd-window-nav__btn-group--prepend"
|
|
15
|
+
>
|
|
16
|
+
<slot name="prepend" />
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
<div v-if="windowController?.windowTitle" class="paper-window-nav__title-container">
|
|
20
|
+
<Icon
|
|
21
|
+
v-if="windowController?.icon"
|
|
22
|
+
:name="windowController.icon"
|
|
23
|
+
class="paper-window-nav__icon"
|
|
24
|
+
/>
|
|
25
|
+
<span class="paper-window-nav__title">
|
|
26
|
+
{{ windowController.windowTitle }}
|
|
27
|
+
</span>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<div class="desktop-window-nav__btn-group owd-window-nav__btn-group owd-window-nav__btn-group--append">
|
|
31
|
+
<div
|
|
32
|
+
v-if="$slots.append"
|
|
33
|
+
class="owd-window-nav__btn-group owd-window-nav__btn-group--append-inner"
|
|
34
|
+
>
|
|
35
|
+
<slot name="append" />
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
<DesktopWindowNavButton
|
|
39
|
+
v-if="!windowController?.instanced || windowController?.isDestroyable"
|
|
40
|
+
class="owd-window-nav__button--close"
|
|
41
|
+
title="Close"
|
|
42
|
+
@mousedown.stop
|
|
43
|
+
@click.stop="onClose"
|
|
44
|
+
>
|
|
45
|
+
<svg width="9.5" height="9.5" viewBox="0 0 12 12" aria-hidden="true">
|
|
46
|
+
<path
|
|
47
|
+
d="M1 1l10 10M11 1L1 11"
|
|
48
|
+
fill="none"
|
|
49
|
+
stroke="currentColor"
|
|
50
|
+
stroke-width="1.6"
|
|
51
|
+
stroke-linecap="round"
|
|
52
|
+
/>
|
|
53
|
+
</svg>
|
|
54
|
+
</DesktopWindowNavButton>
|
|
55
|
+
</div>
|
|
56
|
+
</DesktopCoreWindowNav>
|
|
57
|
+
</template>
|
|
58
|
+
|
|
59
|
+
<style scoped>
|
|
60
|
+
.paper-window-nav {
|
|
61
|
+
display: flex;
|
|
62
|
+
align-items: center;
|
|
63
|
+
justify-content: space-between;
|
|
64
|
+
gap: 0.5rem;
|
|
65
|
+
flex-shrink: 0;
|
|
66
|
+
min-height: var(--paper-nav-height);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.paper-window-nav__title-container {
|
|
70
|
+
display: flex;
|
|
71
|
+
align-items: center;
|
|
72
|
+
gap: 6px;
|
|
73
|
+
flex: 1;
|
|
74
|
+
min-width: 0;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.paper-window-nav__icon {
|
|
78
|
+
width: 14px;
|
|
79
|
+
height: 14px;
|
|
80
|
+
flex-shrink: 0;
|
|
81
|
+
color: var(--paper-text-secondary);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.paper-window-nav__title {
|
|
85
|
+
overflow: hidden;
|
|
86
|
+
text-overflow: ellipsis;
|
|
87
|
+
white-space: nowrap;
|
|
88
|
+
pointer-events: none;
|
|
89
|
+
font-size: 0.75rem;
|
|
90
|
+
font-weight: 500;
|
|
91
|
+
line-height: 1.2;
|
|
92
|
+
color: var(--paper-text);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.owd-window-nav__btn-group {
|
|
96
|
+
display: flex;
|
|
97
|
+
align-items: stretch;
|
|
98
|
+
gap: 4px;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.owd-window-nav__btn-group--append {
|
|
102
|
+
margin-left: auto;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.owd-window-nav__btn-group--append-inner {
|
|
106
|
+
display: flex;
|
|
107
|
+
align-items: stretch;
|
|
108
|
+
gap: 4px;
|
|
109
|
+
margin: 0;
|
|
110
|
+
padding: 0;
|
|
111
|
+
border: 0;
|
|
112
|
+
}
|
|
113
|
+
</style>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
declare var __VLS_7: {}, __VLS_14: {};
|
|
2
|
+
type __VLS_Slots = {} & {
|
|
3
|
+
prepend?: (props: typeof __VLS_7) => any;
|
|
4
|
+
} & {
|
|
5
|
+
append?: (props: typeof __VLS_14) => any;
|
|
6
|
+
};
|
|
7
|
+
declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
8
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
9
|
+
declare const _default: typeof __VLS_export;
|
|
10
|
+
export default _default;
|
|
11
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
12
|
+
new (): {
|
|
13
|
+
$slots: S;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
title?: string;
|
|
3
|
+
disabled?: boolean;
|
|
4
|
+
};
|
|
5
|
+
declare var __VLS_1: {};
|
|
6
|
+
type __VLS_Slots = {} & {
|
|
7
|
+
default?: (props: typeof __VLS_1) => any;
|
|
8
|
+
};
|
|
9
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
10
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
11
|
+
declare const _default: typeof __VLS_export;
|
|
12
|
+
export default _default;
|
|
13
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
14
|
+
new (): {
|
|
15
|
+
$slots: S;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
defineProps({
|
|
3
|
+
title: { type: String, required: false },
|
|
4
|
+
disabled: { type: Boolean, required: false }
|
|
5
|
+
});
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<template>
|
|
9
|
+
<button
|
|
10
|
+
type="button"
|
|
11
|
+
class="owd-window-nav__button"
|
|
12
|
+
:title="title"
|
|
13
|
+
:aria-label="title"
|
|
14
|
+
:disabled="disabled"
|
|
15
|
+
@mousedown.stop
|
|
16
|
+
>
|
|
17
|
+
<slot />
|
|
18
|
+
</button>
|
|
19
|
+
</template>
|
|
20
|
+
|
|
21
|
+
<style scoped>
|
|
22
|
+
@charset "UTF-8";
|
|
23
|
+
/* Sizing only — colors/hover in window-chrome.scss */
|
|
24
|
+
.owd-window-nav__button {
|
|
25
|
+
position: relative;
|
|
26
|
+
display: inline-flex;
|
|
27
|
+
align-items: center;
|
|
28
|
+
justify-content: center;
|
|
29
|
+
flex-shrink: 0;
|
|
30
|
+
box-sizing: border-box;
|
|
31
|
+
width: var(--paper-nav-button-size);
|
|
32
|
+
min-width: var(--paper-nav-button-size);
|
|
33
|
+
height: var(--paper-nav-button-size);
|
|
34
|
+
min-height: var(--paper-nav-button-size);
|
|
35
|
+
margin: 0;
|
|
36
|
+
padding: 0;
|
|
37
|
+
border: none;
|
|
38
|
+
border-radius: var(--paper-radius);
|
|
39
|
+
background: transparent;
|
|
40
|
+
color: inherit;
|
|
41
|
+
cursor: pointer;
|
|
42
|
+
}
|
|
43
|
+
.owd-window-nav__button:disabled {
|
|
44
|
+
opacity: 0.45;
|
|
45
|
+
cursor: default;
|
|
46
|
+
pointer-events: none;
|
|
47
|
+
}
|
|
48
|
+
.owd-window-nav__button :deep(.iconify),
|
|
49
|
+
.owd-window-nav__button :deep(svg) {
|
|
50
|
+
width: 12px;
|
|
51
|
+
height: 12px;
|
|
52
|
+
pointer-events: none;
|
|
53
|
+
}
|
|
54
|
+
</style>
|