54 |
55 | Open file and load rom.
56 |
57 | ### pressKey(code: string): void
58 |
59 | Press key.
60 |
61 | ### releaseKey(code: string): void
62 |
63 | Release key.
64 |
65 | ### reset(): void
66 |
67 | Reset game.
68 |
69 | ### toggleFullscreen(): void
70 |
71 | Toggle fullscreen.
72 |
--------------------------------------------------------------------------------
/src/retro-emulator/icon.json:
--------------------------------------------------------------------------------
1 | [
2 | "fullscreen.svg",
3 | "file.svg",
4 | "pause.svg",
5 | "play.svg",
6 | "volume.svg",
7 | "volume-off.svg",
8 | "step-backward.svg",
9 | "step-forward.svg"
10 | ]
11 |
--------------------------------------------------------------------------------
/src/retro-emulator/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "retro-emulator",
3 | "version": "0.1.1",
4 | "description": "Retro emulator using libretro",
5 | "luna": {
6 | "icon": true
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/src/retro-emulator/story.js:
--------------------------------------------------------------------------------
1 | import 'luna-retro-emulator.css'
2 | import story from '../share/story'
3 | import RetroEmulator from 'luna-retro-emulator.js'
4 | import $ from 'licia/$'
5 | import readme from './README.md'
6 | import { optionsKnob, button, text } from '@storybook/addon-knobs'
7 |
8 | const def = story(
9 | 'retro-emulator',
10 | (container) => {
11 | $(container).css({
12 | maxWidth: 640,
13 | width: '100%',
14 | margin: '0 auto',
15 | aspectRatio: '1024/768',
16 | })
17 |
18 | const fcCore = '/fceumm_libretro.js'
19 |
20 | const core = optionsKnob(
21 | 'Core',
22 | {
23 | FC: fcCore,
24 | SFC: '/snes9x_libretro.js',
25 | GBA: '/vba_next_libretro.js',
26 | },
27 | fcCore,
28 | {
29 | display: 'select',
30 | }
31 | )
32 |
33 | const config = text('RetroArch Config', 'fps_show = true')
34 | const coreConfig = text(
35 | 'RetroArch Core Options',
36 | core === fcCore ? 'fceumm_turbo_enable = "Player 1"' : ''
37 | )
38 |
39 | if (core === fcCore) {
40 | const rom = text('ROM', '/Contra.nes')
41 | button('Load', () => {
42 | retroEmulator.load(rom)
43 | return false
44 | })
45 | }
46 |
47 | const retroEmulator = new RetroEmulator(container, {
48 | core,
49 | coreConfig,
50 | browserFS: '/browserfs.min.js',
51 | config,
52 | })
53 |
54 | return retroEmulator
55 | },
56 | {
57 | readme,
58 | source: __STORY__,
59 | }
60 | )
61 |
62 | export default def
63 |
64 | export const { retroEmulator } = def
65 |
--------------------------------------------------------------------------------
/src/retro-emulator/style.scss:
--------------------------------------------------------------------------------
1 | @use '../share/mixin' as mixin;
2 |
3 | .luna-retro-emulator {
4 | width: 100%;
5 | height: 100%;
6 | user-select: none;
7 | position: relative;
8 | min-height: 150px;
9 | min-width: 300px;
10 | @include mixin.component();
11 | & {
12 | background: #000;
13 | }
14 | }
15 |
16 | @include mixin.controller('retro-emulator');
17 |
18 | .reset,
19 | .play,
20 | .fast-forward,
21 | .volume {
22 | margin-right: 8px;
23 | height: 100%;
24 | display: inline-block;
25 | vertical-align: top;
26 | }
27 |
28 | .iframe-container {
29 | width: 100%;
30 | height: 100%;
31 | iframe {
32 | width: 100%;
33 | height: 100%;
34 | border: 0;
35 | }
36 | }
37 |
38 | .iframe-mask {
39 | width: 100%;
40 | height: 100%;
41 | position: absolute;
42 | left: 0;
43 | top: 0;
44 | }
45 |
--------------------------------------------------------------------------------
/src/retro-emulator/test.js:
--------------------------------------------------------------------------------
1 | import RetroEmulator from './index'
2 | import test from '../share/test'
3 |
4 | test('retro-emulator', (container) => {
5 | const retroEmulator = new RetroEmulator(container, {
6 | core: 'https://luna.liriliri.io/fceumm_libretro.js',
7 | browserFS: 'https://luna.liriliri.io/browserfs.min.js',
8 | })
9 |
10 | it('basic', function () {
11 | retroEmulator.load('https://luna.liriliri.io/Contra.nes')
12 | })
13 |
14 | return retroEmulator
15 | })
16 |
--------------------------------------------------------------------------------
/src/retro-handheld/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "retro-handheld",
3 | "version": "0.1.1",
4 | "description": "Retro emulator with controls ui",
5 | "luna": {
6 | "dependencies": [
7 | "menu",
8 | "retro-emulator"
9 | ]
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/retro-handheld/story.js:
--------------------------------------------------------------------------------
1 | import 'luna-retro-handheld.css'
2 | import $ from 'licia/$'
3 | import story from '../share/story'
4 | import RetroHandheld from 'luna-retro-handheld.js'
5 | import readme from './README.md'
6 | import { optionsKnob, button, text } from '@storybook/addon-knobs'
7 |
8 | const def = story(
9 | 'retro-handheld',
10 | (container) => {
11 | $(container).css({
12 | maxWidth: 640,
13 | width: '100%',
14 | margin: '0 auto',
15 | })
16 |
17 | const fcCore = '/fceumm_libretro.js'
18 |
19 | const core = optionsKnob(
20 | 'Core',
21 | {
22 | FC: fcCore,
23 | SFC: '/snes9x_libretro.js',
24 | GBA: '/vba_next_libretro.js',
25 | },
26 | fcCore,
27 | {
28 | display: 'select',
29 | }
30 | )
31 |
32 | const config = text('RetroArch Config', 'fps_show = true')
33 | const coreConfig = text(
34 | 'RetroArch Core Options',
35 | core === fcCore ? 'fceumm_turbo_enable = "Player 1"' : ''
36 | )
37 |
38 | const retroHandheld = new RetroHandheld(container, {
39 | core,
40 | config,
41 | coreConfig,
42 | browserFS: '/browserfs.min.js',
43 | })
44 |
45 | if (core === fcCore) {
46 | const rom = text('ROM', '/Contra.nes')
47 | button('Load', () => {
48 | retroHandheld.load(rom)
49 | return false
50 | })
51 | }
52 |
53 | return retroHandheld
54 | },
55 | {
56 | readme,
57 | story: __STORY__,
58 | }
59 | )
60 |
61 | export default def
62 |
63 | export const { retroHandheld } = def
64 |
--------------------------------------------------------------------------------
/src/retro-handheld/test.js:
--------------------------------------------------------------------------------
1 | import RetroHandheld from './index'
2 | import test from '../share/test'
3 |
4 | test('retro-emulator', (container) => {
5 | const retroHandheld = new RetroHandheld(container, {
6 | core: 'https://luna.liriliri.io/fceumm_libretro.js',
7 | browserFS: 'https://luna.liriliri.io/browserfs.min.js',
8 | })
9 |
10 | it('basic', function () {
11 | retroHandheld.load('https://luna.liriliri.io/Contra.nes')
12 | })
13 |
14 | return retroHandheld
15 | })
16 |
--------------------------------------------------------------------------------
/src/scrollbar/README.md:
--------------------------------------------------------------------------------
1 | # Luna Scrollbar
2 |
3 | Custom scrollbar.
4 |
5 | ## Demo
6 |
7 | https://luna.liriliri.io/?path=/story/scrollbar
8 |
9 | ## Install
10 |
11 | Add the following script and style to your page.
12 |
13 | ```html
14 |
15 |
16 | ```
17 |
18 | You can also get it on npm.
19 |
20 | ```bash
21 | npm install luna-scrollbar --save
22 | ```
23 |
24 | ```javascript
25 | import 'luna-scrollbar/luna-scrollbar.css'
26 | import LunaScrollbar from 'luna-scrollbar'
27 | ```
28 |
29 | ## Usage
30 |
31 | ```javascript
32 | const scrollbar = new LunaScrollbar(container)
33 | scrollbar.getContent().innerHTML = 'test'
34 | ```
35 |
36 | ## Api
37 |
38 | ### getContent(): HTMLElement
39 |
40 | Get content element.
41 |
--------------------------------------------------------------------------------
/src/scrollbar/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "scrollbar",
3 | "version": "0.1.0",
4 | "description": "Custom scrollbar"
5 | }
6 |
--------------------------------------------------------------------------------
/src/scrollbar/story.js:
--------------------------------------------------------------------------------
1 | import 'luna-scrollbar.css'
2 | import Scrollbar from 'luna-scrollbar.js'
3 | import $ from 'licia/$'
4 | import escape from 'licia/escape'
5 | import story from '../share/story'
6 | import readme from './README.md'
7 |
8 | const def = story(
9 | 'scrollbar',
10 | (container) => {
11 | $(container)
12 | .css({
13 | maxWidth: 640,
14 | padding: '50px',
15 | width: '100%',
16 | aspectRatio: '4/3',
17 | margin: '0 auto',
18 | border: '1px solid black',
19 | })
20 | .html(
21 | `${escape(
22 | readme
23 | )}
`
24 | )
25 |
26 | const scrollbar = new Scrollbar(container)
27 |
28 | return scrollbar
29 | },
30 | {
31 | readme,
32 | source: __STORY__,
33 | }
34 | )
35 |
36 | export default def
37 |
38 | export const { scrollbar } = def
39 |
--------------------------------------------------------------------------------
/src/scrollbar/style.scss:
--------------------------------------------------------------------------------
1 | @use '../share/mixin' as mixin;
2 |
3 | .luna-scrollbar {
4 | position: relative;
5 | @include mixin.component();
6 | &:hover {
7 | .track {
8 | opacity: 1;
9 | }
10 | }
11 | }
12 |
13 | .wrapper {
14 | overflow: hidden;
15 | position: absolute;
16 | left: 0;
17 | right: 0;
18 | top: 0;
19 | bottom: 0;
20 | }
21 |
22 | .offset {
23 | position: absolute;
24 | top: 0;
25 | left: 0;
26 | }
27 |
28 | .content-wrapper {
29 | width: 100%;
30 | height: 100%;
31 | &::-webkit-scrollbar {
32 | display: none;
33 | width: 0;
34 | height: 0;
35 | }
36 | }
37 |
38 | .track {
39 | z-index: 1;
40 | position: absolute;
41 | overflow: hidden;
42 | opacity: 0;
43 | transition: opacity 0.3s;
44 | &.active {
45 | opacity: 1;
46 | }
47 | }
48 |
49 | .thumb {
50 | position: absolute;
51 | touch-action: none;
52 | background: rgba(0, 0, 0, 0.2);
53 | border-radius: 3px;
54 | }
55 |
56 | .horizontal {
57 | left: 2px;
58 | right: 2px;
59 | bottom: 2px;
60 | height: 6px;
61 | .thumb {
62 | top: 0;
63 | bottom: 0;
64 | }
65 | }
66 |
67 | .vertical {
68 | top: 2px;
69 | bottom: 2px;
70 | right: 2px;
71 | width: 6px;
72 | .thumb {
73 | left: 0;
74 | right: 0;
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/src/scrollbar/test.js:
--------------------------------------------------------------------------------
1 | import Scrollbar from './index'
2 | import test from '../share/test'
3 |
4 | test('scrollbar', (container) => {
5 | const scrollbar = new Scrollbar(container)
6 |
7 | it('basic', () => {
8 | expect(scrollbar.getContent().innerHTML).to.equal('')
9 | })
10 |
11 | return scrollbar
12 | })
13 |
--------------------------------------------------------------------------------
/src/setting/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ## 2.0.2 (27 Feb 2025)
2 |
3 | * refactor: theme
4 |
5 | ## 2.0.1 (11 Jun 2024)
6 |
7 | * fix: react custom className not working
8 |
9 | ## 2.0.0 (11 Jun 2024)
10 |
11 | * refactor: react implementation
12 |
13 | ## 1.0.1 (20 Apr 2024)
14 |
15 | * fix: react input value
16 |
17 | ## 1.0.0 (18 Dec 2023)
18 |
19 | * chore: rename setting text to input
20 |
--------------------------------------------------------------------------------
/src/setting/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "setting",
3 | "version": "2.0.2",
4 | "description": "Settings panel",
5 | "dependencies": {
6 | "micromark": "^3.1.0"
7 | },
8 | "luna": {
9 | "install": true,
10 | "react": true
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/setting/test.js:
--------------------------------------------------------------------------------
1 | import Setting from './index'
2 | import test from '../share/test'
3 |
4 | test('setting', (container) => {
5 | const setting = new Setting(container)
6 | it('basic', function () {
7 | setting.appendTitle('Test')
8 | })
9 | })
10 |
--------------------------------------------------------------------------------
/src/setting/util.ts:
--------------------------------------------------------------------------------
1 | export const progress = (val: number, min: number, max: number) => {
2 | return (((val - min) / (max - min)) * 100).toFixed(2)
3 | }
4 |
--------------------------------------------------------------------------------
/src/shader-toy-player/README.md:
--------------------------------------------------------------------------------
1 | # Luna Shader Toy Player
2 |
3 | Shader toy player.
4 |
5 | ## Demo
6 |
7 | https://luna.liriliri.io/?path=/story/shader-toy-player
8 |
9 | ## Install
10 |
11 | Add the following script and style to your page.
12 |
13 | ```html
14 |
15 |
16 | ```
17 |
18 | You can also get it on npm.
19 |
20 | ```bash
21 | npm install luna-shader-toy-player --save
22 | ```
23 |
24 | ```javascript
25 | import 'luna-shader-toy-player/luna-shader-toy-player.css'
26 | import LunaShaderToyPlayer from 'luna-shader-toy-player'
27 | ```
28 |
29 | ## Usage
30 |
31 | ```javascript
32 | const container = document.getElementById('container')
33 | const shaderToyPlayer = new LunaShaderToyPlayer(container)
34 |
35 | shaderToyPlayer.setOption('renderPass', [
36 | {
37 | inputs: [],
38 | outputs: [],
39 | code: `void mainImage( out vec4 fragColor, in vec2 fragCoord )
40 | {
41 | vec2 uv = fragCoord/iResolution.xy;
42 | vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));
43 | fragColor = vec4(col,1.0);
44 | }`,
45 | name: 'Image',
46 | description: '',
47 | type: 'image',
48 | },
49 | ])
50 | ```
51 |
52 | ## Configuration
53 |
54 | * controls(boolean): Player controls.
55 | * renderPass(any[]): Render pass.
56 |
--------------------------------------------------------------------------------
/src/shader-toy-player/icon.json:
--------------------------------------------------------------------------------
1 | [
2 | "fullscreen.svg",
3 | "pause.svg",
4 | "play.svg",
5 | "volume.svg",
6 | "volume-off.svg",
7 | "step-backward.svg"
8 | ]
9 |
--------------------------------------------------------------------------------
/src/shader-toy-player/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "shader-toy-player",
3 | "version": "0.5.1",
4 | "description": "Shader toy player",
5 | "luna": {
6 | "icon": true,
7 | "vue": true,
8 | "test": false
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/shader-toy-player/style.scss:
--------------------------------------------------------------------------------
1 | @use '../share/mixin' as mixin;
2 | @use '../share/theme' as theme;
3 |
4 | .luna-shader-toy-player {
5 | width: 100%;
6 | height: 100%;
7 | touch-action: none;
8 | position: relative;
9 | @include mixin.component();
10 | & {
11 | background: #000;
12 | }
13 | }
14 |
15 | @include mixin.controller('shader-toy-player');
16 |
17 | .canvas {
18 | width: 100%;
19 | height: 100%;
20 | canvas {
21 | width: 100%;
22 | height: 100%;
23 | }
24 | }
25 |
26 | .reset,
27 | .play,
28 | .volume {
29 | margin-right: 8px;
30 | height: 100%;
31 | display: inline-block;
32 | vertical-align: top;
33 | }
34 |
35 | .time,
36 | .fps-button,
37 | .resolution {
38 | color: #eee;
39 | font-size: #{theme.$font-size-s-m}px;
40 | line-height: 38px;
41 | }
42 |
43 | .fps-button {
44 | cursor: pointer;
45 | }
46 |
47 | .fps {
48 | opacity: 0;
49 | position: absolute;
50 | font-size: #{theme.$font-size-s-m}px;
51 | top: 0;
52 | right: 0;
53 | padding: 4px 8px;
54 | background: rgba(0, 0, 0, 0.5);
55 | color: theme.$color-white;
56 | transition: opacity 0.3s;
57 | &.active {
58 | opacity: 1;
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/shader-toy-player/test.js:
--------------------------------------------------------------------------------
1 | import ShaderToyPlayer from './index'
2 | import test from '../share/test'
3 |
4 | const code = `void mainImage( out vec4 fragColor, in vec2 fragCoord )
5 | {
6 | vec2 uv = fragCoord/iResolution.xy;
7 | vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));
8 | fragColor = vec4(col,1.0);
9 | }`
10 |
11 | test('shader-toy-player', (container) => {
12 | const shaderToyPlayer = new ShaderToyPlayer(container)
13 |
14 | it('basic', function () {
15 | shaderToyPlayer.setOption('renderPass', [
16 | {
17 | inputs: [],
18 | outputs: [],
19 | code,
20 | name: 'Image',
21 | description: '',
22 | type: 'image',
23 | },
24 | ])
25 | })
26 |
27 | return shaderToyPlayer
28 | })
29 |
--------------------------------------------------------------------------------
/src/shader-toy-player/vue.ts:
--------------------------------------------------------------------------------
1 | import { defineComponent, h, onBeforeUnmount, onMounted, shallowRef } from 'vue'
2 | import ShaderToyPlayer from './index'
3 |
4 | const LunaShaderToyPlayer = defineComponent({
5 | name: 'LunaShaderToyPlayer',
6 | props: {
7 | style: {
8 | type: Object,
9 | default: () => ({}),
10 | },
11 | controls: {
12 | type: Boolean,
13 | default: true,
14 | },
15 | renderPass: {
16 | type: Array,
17 | },
18 | },
19 | emits: ['create'],
20 | setup(props, context) {
21 | const container = shallowRef()
22 | const shaderToyPlayer = shallowRef()
23 |
24 | onMounted(() => {
25 | shaderToyPlayer.value = new ShaderToyPlayer(container.value!, {
26 | renderPass: props.renderPass,
27 | controls: props.controls,
28 | })
29 |
30 | context.emit('create', shaderToyPlayer.value)
31 | })
32 |
33 | onBeforeUnmount(() => {
34 | shaderToyPlayer.value?.destroy()
35 | })
36 |
37 | return () => {
38 | return h('div', {
39 | ref: container,
40 | style: props.style,
41 | })
42 | }
43 | },
44 | })
45 |
46 | export default LunaShaderToyPlayer
47 |
--------------------------------------------------------------------------------
/src/share/icon/add.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/arrow-left.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/share/icon/arrow-right.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/share/icon/bold.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/brush.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/camera.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/caret-down.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/caret-right.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/caret-up.svg:
--------------------------------------------------------------------------------
1 |
2 |
18 |
--------------------------------------------------------------------------------
/src/share/icon/check.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/close.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/copy.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/crosshair.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/delete.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/download.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/eraser.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/error.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/eye.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/eyedropper.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/fullscreen.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/hand.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/header.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/horizontal-rule.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/info.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/share/icon/input.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/italic.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/list.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/loop-all.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/loop-off.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/loop-one.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/maximize.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/maximized.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/minimize.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/output.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/paint-bucket.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/pause.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/pencil.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/pip.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/play.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/quote.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/reset-color.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/share/icon/shuffle-disabled.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/shuffle.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/step-backward.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/step-forward.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/strike-through.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/swap.svg:
--------------------------------------------------------------------------------
1 |
2 |
22 |
--------------------------------------------------------------------------------
/src/share/icon/underline.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/volume-down.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/volume-off.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/volume.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/warn.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/zoom-in.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/zoom-out.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/icon/zoom.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/share/react.tsx:
--------------------------------------------------------------------------------
1 | import { FC, PropsWithChildren } from 'react'
2 | import { classPrefix, getPlatform } from './util'
3 | import className from 'licia/className'
4 |
5 | interface IComponentProps {
6 | compName: string
7 | theme?: string
8 | className?: string
9 | }
10 |
11 | export const Component: FC> = (props) => {
12 | const c = classPrefix(props.compName)
13 |
14 | return (
15 |
23 | {props.children}
24 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/src/share/test.js:
--------------------------------------------------------------------------------
1 | import toArr from 'licia/toArr'
2 | import each from 'licia/each'
3 | import contain from 'licia/contain'
4 |
5 | /* eslint-disable no-undef */
6 | const karma = __karma__
7 |
8 | export default function (name, testFn) {
9 | const isHeadless = karma.config.headless
10 | if (!isHeadless && window.location.pathname === '/context.html') {
11 | window.open('/debug.html', 'debugTab')
12 | }
13 | describe(name, function () {
14 | const container = document.createElement('div')
15 | document.body.appendChild(container)
16 | let components = testFn(container)
17 | if (components) {
18 | components = toArr(components)
19 | window.components = components
20 | window.component = components[0]
21 | }
22 | if (isHeadless) {
23 | after(function () {
24 | if (window.components) {
25 | each(window.components, (component) => component.destroy())
26 | }
27 | })
28 | }
29 | })
30 | }
31 |
32 | export function getPublicPath(p) {
33 | let isMatch = false
34 | each(karma.files, (val, file) => {
35 | if (isMatch) {
36 | return
37 | }
38 | if (contain(file, `public/${p}`)) {
39 | p = file
40 | isMatch = true
41 | }
42 | })
43 | return p
44 | }
45 |
--------------------------------------------------------------------------------
/src/share/theme.json:
--------------------------------------------------------------------------------
1 | {
2 | "token": {
3 | "colorPrimary": "#1a73e8",
4 | "fontFamilyCode": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace"
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/src/share/types.ts:
--------------------------------------------------------------------------------
1 | // https://stackoverflow.com/questions/57835286/deep-recursive-requiredt-on-specific-properties
2 | export type DeepRequired = T extends object
3 | ? Omit> &
4 | Required<{
5 | [K in Extract]: NonNullable<
6 | DeepRequired>
7 | >
8 | }>
9 | : T
10 |
11 | type Shift = ((...t: T) => any) extends (
12 | first: any,
13 | ...rest: infer Rest
14 | ) => any
15 | ? Rest
16 | : never
17 |
18 | type ShiftUnion = T extends any[] ? Shift : never
19 |
--------------------------------------------------------------------------------
/src/syntax-highlighter/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ## 1.0.0 (6 Nov 2022)
2 |
3 | * fix: darkmode scrollbar color-scheme
--------------------------------------------------------------------------------
/src/syntax-highlighter/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "syntax-highlighter",
3 | "version": "1.0.0",
4 | "description": "Syntax highlighter using highlightjs",
5 | "dependencies": {
6 | "highlight.js": "^11.4.0"
7 | },
8 | "luna": {
9 | "install": true,
10 | "dependencies": [
11 | "text-viewer"
12 | ]
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/syntax-highlighter/story.js:
--------------------------------------------------------------------------------
1 | import 'luna-syntax-highlighter.css'
2 | import SyntaxHighlighter from 'luna-syntax-highlighter.js'
3 | import readme from './README.md'
4 | import changelog from './CHANGELOG.md'
5 | import story from '../share/story'
6 | import { text, boolean, optionsKnob, number } from '@storybook/addon-knobs'
7 | import componentCode from '!!raw-loader!./index'
8 |
9 | const def = story(
10 | 'syntax-highlighter',
11 | (container) => {
12 | const code = text('Code', componentCode)
13 | const language = optionsKnob(
14 | 'Language',
15 | {
16 | 'HTML, XML': 'xml',
17 | CSS: 'css',
18 | JavaScript: 'javascript',
19 | },
20 | 'javascript',
21 | { display: 'select' }
22 | )
23 | const showLineNumbers = boolean('Show Line Numbers', true)
24 | const wrapLongLines = boolean('Wrap Long Lines', true)
25 | const maxHeight = number('Max Height', 400, {
26 | range: true,
27 | min: 50,
28 | max: 2000,
29 | })
30 |
31 | const syntaxHighlighter = new SyntaxHighlighter(container, {
32 | code,
33 | language,
34 | showLineNumbers,
35 | wrapLongLines,
36 | maxHeight,
37 | })
38 |
39 | return syntaxHighlighter
40 | },
41 | {
42 | readme,
43 | changelog,
44 | source: __STORY__,
45 | themes: {
46 | 'Vs Dark': 'vs-dark',
47 | },
48 | }
49 | )
50 |
51 | export default def
52 |
53 | export const { syntaxHighlighter } = def
54 |
--------------------------------------------------------------------------------
/src/syntax-highlighter/test.js:
--------------------------------------------------------------------------------
1 | import SyntaxHighlighter from './index'
2 | import test from '../share/test'
3 |
4 | test('syntax-highlighter', (container) => {
5 | const syntaxHighlighter = new SyntaxHighlighter(container)
6 |
7 | it('basic', () => {
8 | syntaxHighlighter.setOption({
9 | code: 'const a = 1;',
10 | language: 'javascript',
11 | })
12 | })
13 |
14 | return syntaxHighlighter
15 | })
16 |
--------------------------------------------------------------------------------
/src/tab/README.md:
--------------------------------------------------------------------------------
1 | # Luna Tab
2 |
3 | Easy tabs.
4 |
5 | ## Demo
6 |
7 | https://luna.liriliri.io/?path=/story/tab
8 |
9 | ## Install
10 |
11 | Add the following script and style to your page.
12 |
13 | ```html
14 |
15 |
16 | ```
17 |
18 | You can also get it on npm.
19 |
20 | ```bash
21 | npm install luna-tab --save
22 | ```
23 |
24 | ```javascript
25 | import 'luna-tab/luna-tab.css'
26 | import LunaTab from 'luna-tab'
27 | ```
28 |
29 | ## Usage
30 |
31 | ```javascript
32 | const container = document.getElementById('container')
33 | const tab = new LunaTabs(container, {
34 | height: 30,
35 | })
36 | tab.append({
37 | id: 'console',
38 | title: 'Console',
39 | })
40 | tab.select('console')
41 | tab.on('select', id => {
42 | console.log(id)
43 | })
44 | ```
45 |
46 | ## Configuration
47 |
48 | * height(number): Tab height.
49 |
50 | ## Api
51 |
52 | ### append(tab: ITab): void
53 |
54 | Append tab.
55 |
56 | ### deselect(): void
57 |
58 | Deselect tabs.
59 |
60 | ### insert(pos: number, tab: ITab): void
61 |
62 | Insert tab at given position.
63 |
64 | ### remove(id: string): void
65 |
66 | Remove tab.
67 |
68 | ### select(id: string): void
69 |
70 | Select tab.
71 |
72 | ## Types
73 |
74 | ### ITab
75 |
76 | * closeable(boolean): Whether tab is closeable.
77 | * id(string): Tab id.
78 | * title(string): Tab title.
79 |
--------------------------------------------------------------------------------
/src/tab/icon.json:
--------------------------------------------------------------------------------
1 | ["close.svg"]
2 |
--------------------------------------------------------------------------------
/src/tab/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "tab",
3 | "version": "0.4.3",
4 | "description": "Easy tabs",
5 | "luna": {
6 | "react": true,
7 | "icon": true
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/src/tab/test.js:
--------------------------------------------------------------------------------
1 | import Tab from './index'
2 | import test from '../share/test'
3 |
4 | test('tab', (container) => {
5 | const tab = new Tab(container)
6 |
7 | it('basic', function () {
8 | tab.append({
9 | id: 'console',
10 | title: 'Console',
11 | })
12 | const $item = $(container).find(tab.c('.item'))
13 | expect($item.text()).to.equal('Console')
14 | })
15 |
16 | return tab
17 | })
18 |
--------------------------------------------------------------------------------
/src/tag-input/README.md:
--------------------------------------------------------------------------------
1 | # Luna Tag Input
2 |
3 | Lightweight tags input.
4 |
5 | ## Demo
6 |
7 | https://luna.liriliri.io/?path=/story/tag-input
8 |
9 | ## Install
10 |
11 | Add the following script and style to your page.
12 |
13 | ```html
14 |
15 |
16 | ```
17 |
18 | You can also get it on npm.
19 |
20 | ```bash
21 | npm install luna-tag-input --save
22 | ```
23 |
24 | ```javascript
25 | import 'luna-tag-input/luna-tag-input.css'
26 | import LunaTagInput from 'luna-tag-input'
27 | ```
28 |
--------------------------------------------------------------------------------
/src/tag-input/index.ts:
--------------------------------------------------------------------------------
1 | import { exportCjs } from '../share/util'
2 | import Component from '../share/Component'
3 |
4 | /**
5 | * Lightweight tags input.
6 | */
7 | export default class TagInput extends Component {
8 | constructor(container: HTMLInputElement) {
9 | super(container, { compName: 'tag-input' })
10 | }
11 | }
12 |
13 | if (typeof module !== 'undefined') {
14 | exportCjs(module, TagInput)
15 | }
16 |
--------------------------------------------------------------------------------
/src/tag-input/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "tag-input",
3 | "version": "0.1.0",
4 | "description": "Lightweight tags input",
5 | "luna": {
6 | "test": false
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/src/tag-input/story.js:
--------------------------------------------------------------------------------
1 | import 'luna-tag-input.css'
2 | import h from 'licia/h'
3 | import TagInput from 'luna-tag-input.js'
4 | import story from '../share/story'
5 | import readme from './README.md'
6 |
7 | const def = story(
8 | 'tag-input',
9 | (wrapper) => {
10 | const container = h('input')
11 | wrapper.appendChild(container)
12 | const tagInput = new TagInput(container)
13 |
14 | return tagInput
15 | },
16 | {
17 | readme,
18 | source: __STORY__,
19 | }
20 | )
21 |
22 | export default def
23 |
24 | export const { tagInput } = def
25 |
--------------------------------------------------------------------------------
/src/tag-input/style.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liriliri/luna/09cfb448f0e8646fb790feb6ca03e6799e5dc697/src/tag-input/style.scss
--------------------------------------------------------------------------------
/src/text-viewer/README.md:
--------------------------------------------------------------------------------
1 | # Luna Text Viewer
2 |
3 | Text viewer with line number.
4 |
5 | ## Demo
6 |
7 | https://luna.liriliri.io/?path=/story/text-viewer
8 |
9 | ## Install
10 |
11 | Add the following script and style to your page.
12 |
13 | ```html
14 |
15 |
16 | ```
17 |
18 | You can also get it on npm.
19 |
20 | ```bash
21 | npm install luna-text-viewer --save
22 | ```
23 |
24 | ```javascript
25 | import 'luna-text-viewer/luna-text-viewer.css'
26 | import LunaTextViewer from 'luna-text-viewer'
27 | ```
28 |
29 | ## Usage
30 |
31 | ```javascript
32 | const textViewer = new LunaTextViewer(container)
33 | textViewer.setOption({
34 | text: 'Luna Text Viewer',
35 | })
36 | ```
37 |
38 | ## Configuration
39 |
40 | * escape(boolean): Whether to escape text or not.
41 | * maxHeight(number): Max viewer height.
42 | * showLineNumbers(boolean): Show line numbers.
43 | * text(string): Text to view.
44 | * wrapLongLines(boolean): Wrap lone lines.
45 |
46 | ## Api
47 |
48 | ### append(text: string): undefined | $
49 |
50 | Append text.
51 |
--------------------------------------------------------------------------------
/src/text-viewer/icon.json:
--------------------------------------------------------------------------------
1 | ["check.svg", "copy.svg"]
2 |
--------------------------------------------------------------------------------
/src/text-viewer/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "text-viewer",
3 | "version": "0.2.1",
4 | "description": "Text viewer with line number",
5 | "luna": {
6 | "icon": true
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/src/text-viewer/story.js:
--------------------------------------------------------------------------------
1 | import 'luna-text-viewer.css'
2 | import TextViewer from 'luna-text-viewer.js'
3 | import readme from './README.md'
4 | import story from '../share/story'
5 | import { text, boolean, number, button } from '@storybook/addon-knobs'
6 |
7 | const def = story(
8 | 'text-viewer',
9 | (container) => {
10 | const txt = text('Text', readme)
11 | const showLineNumbers = boolean('Show Line Numbers', true)
12 | const wrapLongLines = boolean('Wrap Long Lines', true)
13 |
14 | const maxHeight = number('Max Height', 400, {
15 | range: true,
16 | min: 50,
17 | max: 1000,
18 | })
19 |
20 | const txtToAppend = text(
21 | 'Text to Append',
22 | '\n# Luna Text Viewer\n\nText viewer with line number.\n'
23 | )
24 | button('Append', () => {
25 | textViewer.append(txtToAppend)
26 | return false
27 | })
28 |
29 | const textViewer = new TextViewer(container, {
30 | text: txt,
31 | showLineNumbers,
32 | wrapLongLines,
33 | maxHeight,
34 | })
35 |
36 | return textViewer
37 | },
38 | {
39 | readme,
40 | source: __STORY__,
41 | }
42 | )
43 |
44 | export default def
45 |
46 | export const { textViewer } = def
47 |
--------------------------------------------------------------------------------
/src/text-viewer/test.js:
--------------------------------------------------------------------------------
1 | import TextViewer from './index'
2 | import test from '../share/test'
3 |
4 | test('text-viewer', (container) => {
5 | const textViewer = new TextViewer(container)
6 |
7 | it('basic', () => {
8 | textViewer.setOption({
9 | code: 'const a = 1;',
10 | })
11 | })
12 |
13 | return textViewer
14 | })
15 |
--------------------------------------------------------------------------------
/src/toolbar/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "toolbar",
3 | "version": "0.9.2",
4 | "description": "Application toolbar",
5 | "luna": {
6 | "react": true
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/src/toolbar/test.js:
--------------------------------------------------------------------------------
1 | import Toolbar from './index'
2 | import test from '../share/test'
3 |
4 | test('toolbar', (container) => {
5 | const toolbar = new Toolbar(container)
6 | it('basic', function () {
7 | toolbar.appendText('Test')
8 | })
9 | })
10 |
--------------------------------------------------------------------------------
/src/video-player/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ## 1.0.0 (25 Dec 2023)
2 |
3 | * feat: hotkey
4 |
--------------------------------------------------------------------------------
/src/video-player/README.md:
--------------------------------------------------------------------------------
1 | # Luna Video Player
2 |
3 | Elegant HTML5 video player.
4 |
5 | ## Demo
6 |
7 | https://luna.liriliri.io/?path=/story/video-player
8 |
9 | ## Install
10 |
11 | Add the following script and style to your page.
12 |
13 | ```html
14 |
15 |
16 | ```
17 |
18 | You can also get it on npm.
19 |
20 | ```bash
21 | npm install luna-video-player --save
22 | ```
23 |
24 | ```javascript
25 | import 'luna-video-player/luna-video-player.css'
26 | import LunaVideoPlayer from 'luna-video-player'
27 | ```
28 |
29 | ## Usage
30 |
31 | ```javascript
32 | const container = document.getElementById('container')
33 | const videoPlayer = new LunaVideoPlayer(container, {
34 | url: 'https://api.dogecloud.com/player/get.mp4?vcode=9dbb405e2141b5e8&userId=2096&flsign=1c02d5e60d2a0f29e1fd2ec0c0762b8b&ext=.mp4',
35 | })
36 |
37 | videoPlayer.play()
38 | ```
39 |
40 | ## Configuration
41 |
42 | * hotkey(boolean): Enable hotkey.
43 | * url(string): Video url.
44 |
45 | ## Api
46 |
47 | ### pause(): void
48 |
49 | Pause video.
50 |
51 | ### play(): undefined | Promise
52 |
53 | Play video.
54 |
55 | ### seek(time: number): void
56 |
57 | Seek to specified time.
58 |
59 | ### volume(percentage: number): void
60 |
61 | Set video volume.
62 |
--------------------------------------------------------------------------------
/src/video-player/icon.json:
--------------------------------------------------------------------------------
1 | [
2 | "fullscreen.svg",
3 | "pause.svg",
4 | "play.svg",
5 | "volume-off.svg",
6 | "volume.svg",
7 | "camera.svg",
8 | "pip.svg",
9 | "volume-down.svg"
10 | ]
11 |
--------------------------------------------------------------------------------
/src/video-player/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "video-player",
3 | "version": "1.0.0",
4 | "description": "Video player",
5 | "luna": {
6 | "icon": true
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/src/video-player/story.js:
--------------------------------------------------------------------------------
1 | import 'luna-video-player.css'
2 | import story from '../share/story'
3 | import VideoPlayer from 'luna-video-player.js'
4 | import $ from 'licia/$'
5 | import readme from './README.md'
6 | import changelog from './CHANGELOG.md'
7 | import { text } from '@storybook/addon-knobs'
8 |
9 | const def = story(
10 | 'video-player',
11 | (container) => {
12 | $(container).css({
13 | maxWidth: 640,
14 | width: '100%',
15 | margin: '0 auto',
16 | minHeight: 150,
17 | aspectRatio: '1280/720',
18 | })
19 |
20 | const url = text(
21 | 'Video Url',
22 | 'https://api.dogecloud.com/player/get.mp4?vcode=9dbb405e2141b5e8&userId=2096&flsign=1c02d5e60d2a0f29e1fd2ec0c0762b8b&ext=.mp4'
23 | )
24 |
25 | const videoPlayer = new VideoPlayer(container, {
26 | url,
27 | })
28 |
29 | return videoPlayer
30 | },
31 | {
32 | readme,
33 | changelog,
34 | source: __STORY__,
35 | }
36 | )
37 |
38 | export default def
39 |
40 | export const { videoPlayer } = def
41 |
--------------------------------------------------------------------------------
/src/video-player/test.js:
--------------------------------------------------------------------------------
1 | import VideoPlayer from './index'
2 | import test from '../share/test'
3 |
4 | test('video-player', (container) => {
5 | it('basic', () => {
6 | const videoPlayer = new VideoPlayer(container)
7 | videoPlayer.play()
8 | })
9 | })
10 |
--------------------------------------------------------------------------------
/src/virtual-list/README.md:
--------------------------------------------------------------------------------
1 | # Luna Virtual List
2 |
3 | Vertical list with virtual scrolling.
4 |
5 | ## Demo
6 |
7 | https://luna.liriliri.io/?path=/story/virtual-list
8 |
9 | ## Install
10 |
11 | Add the following script and style to your page.
12 |
13 | ```html
14 |
15 |
16 | ```
17 |
18 | You can also get it on npm.
19 |
20 | ```bash
21 | npm install luna-virtual-list --save
22 | ```
23 |
24 | ```javascript
25 | import 'luna-virtual-list/luna-virtual-list.css'
26 | import LunaVirtualList from 'luna-virtual-list'
27 | ```
28 |
29 | ## Usage
30 |
31 | ```javascript
32 | const virtualList = new VirtualList(container, {
33 | autoScroll: true,
34 | })
35 | virtualList.append(document.createElement('div'))
36 | ```
37 |
38 | ## Configuration
39 |
40 | * autoScroll(boolean): Auto scroll if at bottom.
41 |
42 | ## Api
43 |
44 | ### append(el: HTMLElement): void
45 |
46 | Append item.
47 |
48 | ### clear(): void
49 |
50 | Clear all items.
51 |
52 | ### remove(el: HTMLElement): void
53 |
54 | Remove item.
55 |
56 | ### scrollToEnd(): void
57 |
58 | Scroll to end.
59 |
60 | ### setItems(els: HTMLElement[]): void
61 |
62 | Set items.
63 |
64 | ### update(el?: HTMLElement): void
65 |
66 | Update heights.
67 |
--------------------------------------------------------------------------------
/src/virtual-list/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "virtual-list",
3 | "version": "0.1.1",
4 | "description": "Vertical list with virtual scrolling"
5 | }
6 |
--------------------------------------------------------------------------------
/src/virtual-list/style.scss:
--------------------------------------------------------------------------------
1 | @use '../share/mixin' as mixin;
2 |
3 | .luna-virtual-list {
4 | @include mixin.overflow-auto();
5 | height: 100%;
6 | position: relative;
7 | will-change: scroll-position;
8 | transform: translate3d(0, 0, 0);
9 | }
10 |
11 | .fake-items {
12 | position: absolute;
13 | top: 0;
14 | left: 0;
15 | pointer-events: none;
16 | visibility: hidden;
17 | }
18 |
19 | .items {
20 | position: absolute;
21 | top: 0;
22 | left: 0;
23 | }
24 |
--------------------------------------------------------------------------------
/src/virtual-list/test.js:
--------------------------------------------------------------------------------
1 | import VirtualList from './index'
2 | import test from '../share/test'
3 |
4 | test('virtual-list', (container) => {
5 | const virtualList = new VirtualList(container)
6 |
7 | it('basic', () => {
8 | virtualList.append(document.createElement('div'))
9 | })
10 |
11 | return virtualList
12 | })
13 |
--------------------------------------------------------------------------------
/src/window/README.md:
--------------------------------------------------------------------------------
1 | # Luna Window
2 |
3 | HTML5 window manager.
4 |
5 | ## Demo
6 |
7 | https://luna.liriliri.io/?path=/story/window
8 |
9 | ## Install
10 |
11 | Add the following script and style to your page.
12 |
13 | ```html
14 |
15 |
16 | ```
17 |
18 | You can also get it on npm.
19 |
20 | ```bash
21 | npm install luna-window --save
22 | ```
23 |
24 | ```javascript
25 | import 'luna-window/luna-window.css'
26 | import LunaWindow from 'luna-window'
27 | ```
28 |
29 | ## Usage
30 |
31 | ```javascript
32 | const win = new LunaWindow({
33 | title: 'Window Title',
34 | x: 50,
35 | y: 50,
36 | width: 800,
37 | height: 600,
38 | content: 'This is the content.'
39 | })
40 | win.show()
41 | ```
42 |
43 | ## Configuration
44 |
45 | * content(string|HTMLElement): Content to display, url is supported.
46 | * height(number): Height of the window.
47 | * minHeight(number): Minimum height of the window.
48 | * minWidth(number): Minimum width of the window.
49 | * title(string): Title of the window.
50 | * width(number): Width of the window.
51 | * x(number): Offset to the left of the viewport.
52 | * y(number): Offset to the top of the viewport.
53 |
54 | ## Api
55 |
56 | ### maximize(): void
57 |
58 | Maximize the window.
59 |
60 | ### minimize(): void
61 |
62 | Minimize the window.
63 |
64 | ### show(): void
65 |
66 | Show the window.
67 |
--------------------------------------------------------------------------------
/src/window/icon.json:
--------------------------------------------------------------------------------
1 | ["close.svg", "maximize.svg", "maximized.svg", "minimize.svg"]
2 |
--------------------------------------------------------------------------------
/src/window/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "window",
3 | "version": "0.1.1",
4 | "description": "HTML5 window manager",
5 | "luna": {
6 | "icon": true
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/src/window/test.js:
--------------------------------------------------------------------------------
1 | import Window from './index'
2 | import test from '../share/test'
3 |
4 | test('window', () => {
5 | const win = new Window({
6 | title: 'Window Title',
7 | x: 50,
8 | y: 50,
9 | width: 800,
10 | height: 600,
11 | content: 'This is the content.',
12 | })
13 |
14 | it('basic', function () {
15 | win.show()
16 | })
17 |
18 | return win
19 | })
20 |
--------------------------------------------------------------------------------