Update dependencies
Migrate to Vue 3 + Vite + Pinia
- Vue 2 class components → Vue 3 defineComponent + Composition API
- Vuex + vuex-module-decorators → Pinia
- vue-cli/webpack → Vite 8 with vite-plugin-glsl
- vue-router@3 → vue-router@4, vue-i18n@8 → vue-i18n@9
- require.context → import.meta.glob
- require('./shader.glsl') → static import with vite-plugin-glsl
- vue-color → native <input type="color">
- All TSX components migrated, build passes with 0 TypeScript errors
main
Warinyourself
3 years ago
parent
23472d0279
commit
2099183f29
@ -1,3 +0,0 @@
|
||||
> 1%
|
||||
last 2 versions
|
||||
not dead
|
||||
@ -1,5 +0,0 @@
|
||||
[*.{js,jsx,ts,tsx,vue}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
@ -1,44 +0,0 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
|
||||
env: {
|
||||
node: true
|
||||
},
|
||||
|
||||
rules: {
|
||||
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
camelcase: 'off',
|
||||
indent: 'off',
|
||||
'multiline-ternary': 'off',
|
||||
'space-before-function-paren': [2, 'never'],
|
||||
'no-use-before-define': 'off',
|
||||
'@typescript-eslint/no-use-before-define': 'warn',
|
||||
'vue/array-bracket-spacing': 'error',
|
||||
'vue/arrow-spacing': 'error',
|
||||
'vue/block-spacing': 'error',
|
||||
'vue/brace-style': 'error',
|
||||
'vue/camelcase': 'error',
|
||||
'vue/comma-dangle': 'error',
|
||||
'vue/component-name-in-template-casing': 'error',
|
||||
'vue/eqeqeq': 'error',
|
||||
'vue/key-spacing': 'error',
|
||||
'vue/match-component-file-name': 'error',
|
||||
'vue/object-curly-spacing': 'error',
|
||||
'no-useless-constructor': 'off',
|
||||
'@typescript-eslint/no-this-alias': 'off',
|
||||
'@typescript-eslint/no-useless-constructor': 'error'
|
||||
},
|
||||
|
||||
parserOptions: {
|
||||
ecmaVersion: 2020
|
||||
},
|
||||
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:vue/recommended',
|
||||
'@vue/typescript',
|
||||
'plugin:vue/essential',
|
||||
'@vue/typescript/recommended'
|
||||
]
|
||||
}
|
||||
@ -1,24 +1,39 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
*.tar.gz
|
||||
|
||||
# local env files
|
||||
.env
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
*.tsbuildinfo
|
||||
|
||||
.eslintcache
|
||||
|
||||
# Cypress
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Vitest
|
||||
__screenshots__/
|
||||
|
||||
# Vite
|
||||
*.timestamp-*-*.mjs
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
@ -1,674 +0,0 @@
|
||||
GNU GENERAL PUBLIC LICENSE
|
||||
Version 3, 29 June 2007
|
||||
|
||||
Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
|
||||
Everyone is permitted to copy and distribute verbatim copies
|
||||
of this license document, but changing it is not allowed.
|
||||
|
||||
Preamble
|
||||
|
||||
The GNU General Public License is a free, copyleft license for
|
||||
software and other kinds of works.
|
||||
|
||||
The licenses for most software and other practical works are designed
|
||||
to take away your freedom to share and change the works. By contrast,
|
||||
the GNU General Public License is intended to guarantee your freedom to
|
||||
share and change all versions of a program--to make sure it remains free
|
||||
software for all its users. We, the Free Software Foundation, use the
|
||||
GNU General Public License for most of our software; it applies also to
|
||||
any other work released this way by its authors. You can apply it to
|
||||
your programs, too.
|
||||
|
||||
When we speak of free software, we are referring to freedom, not
|
||||
price. Our General Public Licenses are designed to make sure that you
|
||||
have the freedom to distribute copies of free software (and charge for
|
||||
them if you wish), that you receive source code or can get it if you
|
||||
want it, that you can change the software or use pieces of it in new
|
||||
free programs, and that you know you can do these things.
|
||||
|
||||
To protect your rights, we need to prevent others from denying you
|
||||
these rights or asking you to surrender the rights. Therefore, you have
|
||||
certain responsibilities if you distribute copies of the software, or if
|
||||
you modify it: responsibilities to respect the freedom of others.
|
||||
|
||||
For example, if you distribute copies of such a program, whether
|
||||
gratis or for a fee, you must pass on to the recipients the same
|
||||
freedoms that you received. You must make sure that they, too, receive
|
||||
or can get the source code. And you must show them these terms so they
|
||||
know their rights.
|
||||
|
||||
Developers that use the GNU GPL protect your rights with two steps:
|
||||
(1) assert copyright on the software, and (2) offer you this License
|
||||
giving you legal permission to copy, distribute and/or modify it.
|
||||
|
||||
For the developers' and authors' protection, the GPL clearly explains
|
||||
that there is no warranty for this free software. For both users' and
|
||||
authors' sake, the GPL requires that modified versions be marked as
|
||||
changed, so that their problems will not be attributed erroneously to
|
||||
authors of previous versions.
|
||||
|
||||
Some devices are designed to deny users access to install or run
|
||||
modified versions of the software inside them, although the manufacturer
|
||||
can do so. This is fundamentally incompatible with the aim of
|
||||
protecting users' freedom to change the software. The systematic
|
||||
pattern of such abuse occurs in the area of products for individuals to
|
||||
use, which is precisely where it is most unacceptable. Therefore, we
|
||||
have designed this version of the GPL to prohibit the practice for those
|
||||
products. If such problems arise substantially in other domains, we
|
||||
stand ready to extend this provision to those domains in future versions
|
||||
of the GPL, as needed to protect the freedom of users.
|
||||
|
||||
Finally, every program is threatened constantly by software patents.
|
||||
States should not allow patents to restrict development and use of
|
||||
software on general-purpose computers, but in those that do, we wish to
|
||||
avoid the special danger that patents applied to a free program could
|
||||
make it effectively proprietary. To prevent this, the GPL assures that
|
||||
patents cannot be used to render the program non-free.
|
||||
|
||||
The precise terms and conditions for copying, distribution and
|
||||
modification follow.
|
||||
|
||||
TERMS AND CONDITIONS
|
||||
|
||||
0. Definitions.
|
||||
|
||||
"This License" refers to version 3 of the GNU General Public License.
|
||||
|
||||
"Copyright" also means copyright-like laws that apply to other kinds of
|
||||
works, such as semiconductor masks.
|
||||
|
||||
"The Program" refers to any copyrightable work licensed under this
|
||||
License. Each licensee is addressed as "you". "Licensees" and
|
||||
"recipients" may be individuals or organizations.
|
||||
|
||||
To "modify" a work means to copy from or adapt all or part of the work
|
||||
in a fashion requiring copyright permission, other than the making of an
|
||||
exact copy. The resulting work is called a "modified version" of the
|
||||
earlier work or a work "based on" the earlier work.
|
||||
|
||||
A "covered work" means either the unmodified Program or a work based
|
||||
on the Program.
|
||||
|
||||
To "propagate" a work means to do anything with it that, without
|
||||
permission, would make you directly or secondarily liable for
|
||||
infringement under applicable copyright law, except executing it on a
|
||||
computer or modifying a private copy. Propagation includes copying,
|
||||
distribution (with or without modification), making available to the
|
||||
public, and in some countries other activities as well.
|
||||
|
||||
To "convey" a work means any kind of propagation that enables other
|
||||
parties to make or receive copies. Mere interaction with a user through
|
||||
a computer network, with no transfer of a copy, is not conveying.
|
||||
|
||||
An interactive user interface displays "Appropriate Legal Notices"
|
||||
to the extent that it includes a convenient and prominently visible
|
||||
feature that (1) displays an appropriate copyright notice, and (2)
|
||||
tells the user that there is no warranty for the work (except to the
|
||||
extent that warranties are provided), that licensees may convey the
|
||||
work under this License, and how to view a copy of this License. If
|
||||
the interface presents a list of user commands or options, such as a
|
||||
menu, a prominent item in the list meets this criterion.
|
||||
|
||||
1. Source Code.
|
||||
|
||||
The "source code" for a work means the preferred form of the work
|
||||
for making modifications to it. "Object code" means any non-source
|
||||
form of a work.
|
||||
|
||||
A "Standard Interface" means an interface that either is an official
|
||||
standard defined by a recognized standards body, or, in the case of
|
||||
interfaces specified for a particular programming language, one that
|
||||
is widely used among developers working in that language.
|
||||
|
||||
The "System Libraries" of an executable work include anything, other
|
||||
than the work as a whole, that (a) is included in the normal form of
|
||||
packaging a Major Component, but which is not part of that Major
|
||||
Component, and (b) serves only to enable use of the work with that
|
||||
Major Component, or to implement a Standard Interface for which an
|
||||
implementation is available to the public in source code form. A
|
||||
"Major Component", in this context, means a major essential component
|
||||
(kernel, window system, and so on) of the specific operating system
|
||||
(if any) on which the executable work runs, or a compiler used to
|
||||
produce the work, or an object code interpreter used to run it.
|
||||
|
||||
The "Corresponding Source" for a work in object code form means all
|
||||
the source code needed to generate, install, and (for an executable
|
||||
work) run the object code and to modify the work, including scripts to
|
||||
control those activities. However, it does not include the work's
|
||||
System Libraries, or general-purpose tools or generally available free
|
||||
programs which are used unmodified in performing those activities but
|
||||
which are not part of the work. For example, Corresponding Source
|
||||
includes interface definition files associated with source files for
|
||||
the work, and the source code for shared libraries and dynamically
|
||||
linked subprograms that the work is specifically designed to require,
|
||||
such as by intimate data communication or control flow between those
|
||||
subprograms and other parts of the work.
|
||||
|
||||
The Corresponding Source need not include anything that users
|
||||
can regenerate automatically from other parts of the Corresponding
|
||||
Source.
|
||||
|
||||
The Corresponding Source for a work in source code form is that
|
||||
same work.
|
||||
|
||||
2. Basic Permissions.
|
||||
|
||||
All rights granted under this License are granted for the term of
|
||||
copyright on the Program, and are irrevocable provided the stated
|
||||
conditions are met. This License explicitly affirms your unlimited
|
||||
permission to run the unmodified Program. The output from running a
|
||||
covered work is covered by this License only if the output, given its
|
||||
content, constitutes a covered work. This License acknowledges your
|
||||
rights of fair use or other equivalent, as provided by copyright law.
|
||||
|
||||
You may make, run and propagate covered works that you do not
|
||||
convey, without conditions so long as your license otherwise remains
|
||||
in force. You may convey covered works to others for the sole purpose
|
||||
of having them make modifications exclusively for you, or provide you
|
||||
with facilities for running those works, provided that you comply with
|
||||
the terms of this License in conveying all material for which you do
|
||||
not control copyright. Those thus making or running the covered works
|
||||
for you must do so exclusively on your behalf, under your direction
|
||||
and control, on terms that prohibit them from making any copies of
|
||||
your copyrighted material outside their relationship with you.
|
||||
|
||||
Conveying under any other circumstances is permitted solely under
|
||||
the conditions stated below. Sublicensing is not allowed; section 10
|
||||
makes it unnecessary.
|
||||
|
||||
3. Protecting Users' Legal Rights From Anti-Circumvention Law.
|
||||
|
||||
No covered work shall be deemed part of an effective technological
|
||||
measure under any applicable law fulfilling obligations under article
|
||||
11 of the WIPO copyright treaty adopted on 20 December 1996, or
|
||||
similar laws prohibiting or restricting circumvention of such
|
||||
measures.
|
||||
|
||||
When you convey a covered work, you waive any legal power to forbid
|
||||
circumvention of technological measures to the extent such circumvention
|
||||
is effected by exercising rights under this License with respect to
|
||||
the covered work, and you disclaim any intention to limit operation or
|
||||
modification of the work as a means of enforcing, against the work's
|
||||
users, your or third parties' legal rights to forbid circumvention of
|
||||
technological measures.
|
||||
|
||||
4. Conveying Verbatim Copies.
|
||||
|
||||
You may convey verbatim copies of the Program's source code as you
|
||||
receive it, in any medium, provided that you conspicuously and
|
||||
appropriately publish on each copy an appropriate copyright notice;
|
||||
keep intact all notices stating that this License and any
|
||||
non-permissive terms added in accord with section 7 apply to the code;
|
||||
keep intact all notices of the absence of any warranty; and give all
|
||||
recipients a copy of this License along with the Program.
|
||||
|
||||
You may charge any price or no price for each copy that you convey,
|
||||
and you may offer support or warranty protection for a fee.
|
||||
|
||||
5. Conveying Modified Source Versions.
|
||||
|
||||
You may convey a work based on the Program, or the modifications to
|
||||
produce it from the Program, in the form of source code under the
|
||||
terms of section 4, provided that you also meet all of these conditions:
|
||||
|
||||
a) The work must carry prominent notices stating that you modified
|
||||
it, and giving a relevant date.
|
||||
|
||||
b) The work must carry prominent notices stating that it is
|
||||
released under this License and any conditions added under section
|
||||
7. This requirement modifies the requirement in section 4 to
|
||||
"keep intact all notices".
|
||||
|
||||
c) You must license the entire work, as a whole, under this
|
||||
License to anyone who comes into possession of a copy. This
|
||||
License will therefore apply, along with any applicable section 7
|
||||
additional terms, to the whole of the work, and all its parts,
|
||||
regardless of how they are packaged. This License gives no
|
||||
permission to license the work in any other way, but it does not
|
||||
invalidate such permission if you have separately received it.
|
||||
|
||||
d) If the work has interactive user interfaces, each must display
|
||||
Appropriate Legal Notices; however, if the Program has interactive
|
||||
interfaces that do not display Appropriate Legal Notices, your
|
||||
work need not make them do so.
|
||||
|
||||
A compilation of a covered work with other separate and independent
|
||||
works, which are not by their nature extensions of the covered work,
|
||||
and which are not combined with it such as to form a larger program,
|
||||
in or on a volume of a storage or distribution medium, is called an
|
||||
"aggregate" if the compilation and its resulting copyright are not
|
||||
used to limit the access or legal rights of the compilation's users
|
||||
beyond what the individual works permit. Inclusion of a covered work
|
||||
in an aggregate does not cause this License to apply to the other
|
||||
parts of the aggregate.
|
||||
|
||||
6. Conveying Non-Source Forms.
|
||||
|
||||
You may convey a covered work in object code form under the terms
|
||||
of sections 4 and 5, provided that you also convey the
|
||||
machine-readable Corresponding Source under the terms of this License,
|
||||
in one of these ways:
|
||||
|
||||
a) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by the
|
||||
Corresponding Source fixed on a durable physical medium
|
||||
customarily used for software interchange.
|
||||
|
||||
b) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by a
|
||||
written offer, valid for at least three years and valid for as
|
||||
long as you offer spare parts or customer support for that product
|
||||
model, to give anyone who possesses the object code either (1) a
|
||||
copy of the Corresponding Source for all the software in the
|
||||
product that is covered by this License, on a durable physical
|
||||
medium customarily used for software interchange, for a price no
|
||||
more than your reasonable cost of physically performing this
|
||||
conveying of source, or (2) access to copy the
|
||||
Corresponding Source from a network server at no charge.
|
||||
|
||||
c) Convey individual copies of the object code with a copy of the
|
||||
written offer to provide the Corresponding Source. This
|
||||
alternative is allowed only occasionally and noncommercially, and
|
||||
only if you received the object code with such an offer, in accord
|
||||
with subsection 6b.
|
||||
|
||||
d) Convey the object code by offering access from a designated
|
||||
place (gratis or for a charge), and offer equivalent access to the
|
||||
Corresponding Source in the same way through the same place at no
|
||||
further charge. You need not require recipients to copy the
|
||||
Corresponding Source along with the object code. If the place to
|
||||
copy the object code is a network server, the Corresponding Source
|
||||
may be on a different server (operated by you or a third party)
|
||||
that supports equivalent copying facilities, provided you maintain
|
||||
clear directions next to the object code saying where to find the
|
||||
Corresponding Source. Regardless of what server hosts the
|
||||
Corresponding Source, you remain obligated to ensure that it is
|
||||
available for as long as needed to satisfy these requirements.
|
||||
|
||||
e) Convey the object code using peer-to-peer transmission, provided
|
||||
you inform other peers where the object code and Corresponding
|
||||
Source of the work are being offered to the general public at no
|
||||
charge under subsection 6d.
|
||||
|
||||
A separable portion of the object code, whose source code is excluded
|
||||
from the Corresponding Source as a System Library, need not be
|
||||
included in conveying the object code work.
|
||||
|
||||
A "User Product" is either (1) a "consumer product", which means any
|
||||
tangible personal property which is normally used for personal, family,
|
||||
or household purposes, or (2) anything designed or sold for incorporation
|
||||
into a dwelling. In determining whether a product is a consumer product,
|
||||
doubtful cases shall be resolved in favor of coverage. For a particular
|
||||
product received by a particular user, "normally used" refers to a
|
||||
typical or common use of that class of product, regardless of the status
|
||||
of the particular user or of the way in which the particular user
|
||||
actually uses, or expects or is expected to use, the product. A product
|
||||
is a consumer product regardless of whether the product has substantial
|
||||
commercial, industrial or non-consumer uses, unless such uses represent
|
||||
the only significant mode of use of the product.
|
||||
|
||||
"Installation Information" for a User Product means any methods,
|
||||
procedures, authorization keys, or other information required to install
|
||||
and execute modified versions of a covered work in that User Product from
|
||||
a modified version of its Corresponding Source. The information must
|
||||
suffice to ensure that the continued functioning of the modified object
|
||||
code is in no case prevented or interfered with solely because
|
||||
modification has been made.
|
||||
|
||||
If you convey an object code work under this section in, or with, or
|
||||
specifically for use in, a User Product, and the conveying occurs as
|
||||
part of a transaction in which the right of possession and use of the
|
||||
User Product is transferred to the recipient in perpetuity or for a
|
||||
fixed term (regardless of how the transaction is characterized), the
|
||||
Corresponding Source conveyed under this section must be accompanied
|
||||
by the Installation Information. But this requirement does not apply
|
||||
if neither you nor any third party retains the ability to install
|
||||
modified object code on the User Product (for example, the work has
|
||||
been installed in ROM).
|
||||
|
||||
The requirement to provide Installation Information does not include a
|
||||
requirement to continue to provide support service, warranty, or updates
|
||||
for a work that has been modified or installed by the recipient, or for
|
||||
the User Product in which it has been modified or installed. Access to a
|
||||
network may be denied when the modification itself materially and
|
||||
adversely affects the operation of the network or violates the rules and
|
||||
protocols for communication across the network.
|
||||
|
||||
Corresponding Source conveyed, and Installation Information provided,
|
||||
in accord with this section must be in a format that is publicly
|
||||
documented (and with an implementation available to the public in
|
||||
source code form), and must require no special password or key for
|
||||
unpacking, reading or copying.
|
||||
|
||||
7. Additional Terms.
|
||||
|
||||
"Additional permissions" are terms that supplement the terms of this
|
||||
License by making exceptions from one or more of its conditions.
|
||||
Additional permissions that are applicable to the entire Program shall
|
||||
be treated as though they were included in this License, to the extent
|
||||
that they are valid under applicable law. If additional permissions
|
||||
apply only to part of the Program, that part may be used separately
|
||||
under those permissions, but the entire Program remains governed by
|
||||
this License without regard to the additional permissions.
|
||||
|
||||
When you convey a copy of a covered work, you may at your option
|
||||
remove any additional permissions from that copy, or from any part of
|
||||
it. (Additional permissions may be written to require their own
|
||||
removal in certain cases when you modify the work.) You may place
|
||||
additional permissions on material, added by you to a covered work,
|
||||
for which you have or can give appropriate copyright permission.
|
||||
|
||||
Notwithstanding any other provision of this License, for material you
|
||||
add to a covered work, you may (if authorized by the copyright holders of
|
||||
that material) supplement the terms of this License with terms:
|
||||
|
||||
a) Disclaiming warranty or limiting liability differently from the
|
||||
terms of sections 15 and 16 of this License; or
|
||||
|
||||
b) Requiring preservation of specified reasonable legal notices or
|
||||
author attributions in that material or in the Appropriate Legal
|
||||
Notices displayed by works containing it; or
|
||||
|
||||
c) Prohibiting misrepresentation of the origin of that material, or
|
||||
requiring that modified versions of such material be marked in
|
||||
reasonable ways as different from the original version; or
|
||||
|
||||
d) Limiting the use for publicity purposes of names of licensors or
|
||||
authors of the material; or
|
||||
|
||||
e) Declining to grant rights under trademark law for use of some
|
||||
trade names, trademarks, or service marks; or
|
||||
|
||||
f) Requiring indemnification of licensors and authors of that
|
||||
material by anyone who conveys the material (or modified versions of
|
||||
it) with contractual assumptions of liability to the recipient, for
|
||||
any liability that these contractual assumptions directly impose on
|
||||
those licensors and authors.
|
||||
|
||||
All other non-permissive additional terms are considered "further
|
||||
restrictions" within the meaning of section 10. If the Program as you
|
||||
received it, or any part of it, contains a notice stating that it is
|
||||
governed by this License along with a term that is a further
|
||||
restriction, you may remove that term. If a license document contains
|
||||
a further restriction but permits relicensing or conveying under this
|
||||
License, you may add to a covered work material governed by the terms
|
||||
of that license document, provided that the further restriction does
|
||||
not survive such relicensing or conveying.
|
||||
|
||||
If you add terms to a covered work in accord with this section, you
|
||||
must place, in the relevant source files, a statement of the
|
||||
additional terms that apply to those files, or a notice indicating
|
||||
where to find the applicable terms.
|
||||
|
||||
Additional terms, permissive or non-permissive, may be stated in the
|
||||
form of a separately written license, or stated as exceptions;
|
||||
the above requirements apply either way.
|
||||
|
||||
8. Termination.
|
||||
|
||||
You may not propagate or modify a covered work except as expressly
|
||||
provided under this License. Any attempt otherwise to propagate or
|
||||
modify it is void, and will automatically terminate your rights under
|
||||
this License (including any patent licenses granted under the third
|
||||
paragraph of section 11).
|
||||
|
||||
However, if you cease all violation of this License, then your
|
||||
license from a particular copyright holder is reinstated (a)
|
||||
provisionally, unless and until the copyright holder explicitly and
|
||||
finally terminates your license, and (b) permanently, if the copyright
|
||||
holder fails to notify you of the violation by some reasonable means
|
||||
prior to 60 days after the cessation.
|
||||
|
||||
Moreover, your license from a particular copyright holder is
|
||||
reinstated permanently if the copyright holder notifies you of the
|
||||
violation by some reasonable means, this is the first time you have
|
||||
received notice of violation of this License (for any work) from that
|
||||
copyright holder, and you cure the violation prior to 30 days after
|
||||
your receipt of the notice.
|
||||
|
||||
Termination of your rights under this section does not terminate the
|
||||
licenses of parties who have received copies or rights from you under
|
||||
this License. If your rights have been terminated and not permanently
|
||||
reinstated, you do not qualify to receive new licenses for the same
|
||||
material under section 10.
|
||||
|
||||
9. Acceptance Not Required for Having Copies.
|
||||
|
||||
You are not required to accept this License in order to receive or
|
||||
run a copy of the Program. Ancillary propagation of a covered work
|
||||
occurring solely as a consequence of using peer-to-peer transmission
|
||||
to receive a copy likewise does not require acceptance. However,
|
||||
nothing other than this License grants you permission to propagate or
|
||||
modify any covered work. These actions infringe copyright if you do
|
||||
not accept this License. Therefore, by modifying or propagating a
|
||||
covered work, you indicate your acceptance of this License to do so.
|
||||
|
||||
10. Automatic Licensing of Downstream Recipients.
|
||||
|
||||
Each time you convey a covered work, the recipient automatically
|
||||
receives a license from the original licensors, to run, modify and
|
||||
propagate that work, subject to this License. You are not responsible
|
||||
for enforcing compliance by third parties with this License.
|
||||
|
||||
An "entity transaction" is a transaction transferring control of an
|
||||
organization, or substantially all assets of one, or subdividing an
|
||||
organization, or merging organizations. If propagation of a covered
|
||||
work results from an entity transaction, each party to that
|
||||
transaction who receives a copy of the work also receives whatever
|
||||
licenses to the work the party's predecessor in interest had or could
|
||||
give under the previous paragraph, plus a right to possession of the
|
||||
Corresponding Source of the work from the predecessor in interest, if
|
||||
the predecessor has it or can get it with reasonable efforts.
|
||||
|
||||
You may not impose any further restrictions on the exercise of the
|
||||
rights granted or affirmed under this License. For example, you may
|
||||
not impose a license fee, royalty, or other charge for exercise of
|
||||
rights granted under this License, and you may not initiate litigation
|
||||
(including a cross-claim or counterclaim in a lawsuit) alleging that
|
||||
any patent claim is infringed by making, using, selling, offering for
|
||||
sale, or importing the Program or any portion of it.
|
||||
|
||||
11. Patents.
|
||||
|
||||
A "contributor" is a copyright holder who authorizes use under this
|
||||
License of the Program or a work on which the Program is based. The
|
||||
work thus licensed is called the contributor's "contributor version".
|
||||
|
||||
A contributor's "essential patent claims" are all patent claims
|
||||
owned or controlled by the contributor, whether already acquired or
|
||||
hereafter acquired, that would be infringed by some manner, permitted
|
||||
by this License, of making, using, or selling its contributor version,
|
||||
but do not include claims that would be infringed only as a
|
||||
consequence of further modification of the contributor version. For
|
||||
purposes of this definition, "control" includes the right to grant
|
||||
patent sublicenses in a manner consistent with the requirements of
|
||||
this License.
|
||||
|
||||
Each contributor grants you a non-exclusive, worldwide, royalty-free
|
||||
patent license under the contributor's essential patent claims, to
|
||||
make, use, sell, offer for sale, import and otherwise run, modify and
|
||||
propagate the contents of its contributor version.
|
||||
|
||||
In the following three paragraphs, a "patent license" is any express
|
||||
agreement or commitment, however denominated, not to enforce a patent
|
||||
(such as an express permission to practice a patent or covenant not to
|
||||
sue for patent infringement). To "grant" such a patent license to a
|
||||
party means to make such an agreement or commitment not to enforce a
|
||||
patent against the party.
|
||||
|
||||
If you convey a covered work, knowingly relying on a patent license,
|
||||
and the Corresponding Source of the work is not available for anyone
|
||||
to copy, free of charge and under the terms of this License, through a
|
||||
publicly available network server or other readily accessible means,
|
||||
then you must either (1) cause the Corresponding Source to be so
|
||||
available, or (2) arrange to deprive yourself of the benefit of the
|
||||
patent license for this particular work, or (3) arrange, in a manner
|
||||
consistent with the requirements of this License, to extend the patent
|
||||
license to downstream recipients. "Knowingly relying" means you have
|
||||
actual knowledge that, but for the patent license, your conveying the
|
||||
covered work in a country, or your recipient's use of the covered work
|
||||
in a country, would infringe one or more identifiable patents in that
|
||||
country that you have reason to believe are valid.
|
||||
|
||||
If, pursuant to or in connection with a single transaction or
|
||||
arrangement, you convey, or propagate by procuring conveyance of, a
|
||||
covered work, and grant a patent license to some of the parties
|
||||
receiving the covered work authorizing them to use, propagate, modify
|
||||
or convey a specific copy of the covered work, then the patent license
|
||||
you grant is automatically extended to all recipients of the covered
|
||||
work and works based on it.
|
||||
|
||||
A patent license is "discriminatory" if it does not include within
|
||||
the scope of its coverage, prohibits the exercise of, or is
|
||||
conditioned on the non-exercise of one or more of the rights that are
|
||||
specifically granted under this License. You may not convey a covered
|
||||
work if you are a party to an arrangement with a third party that is
|
||||
in the business of distributing software, under which you make payment
|
||||
to the third party based on the extent of your activity of conveying
|
||||
the work, and under which the third party grants, to any of the
|
||||
parties who would receive the covered work from you, a discriminatory
|
||||
patent license (a) in connection with copies of the covered work
|
||||
conveyed by you (or copies made from those copies), or (b) primarily
|
||||
for and in connection with specific products or compilations that
|
||||
contain the covered work, unless you entered into that arrangement,
|
||||
or that patent license was granted, prior to 28 March 2007.
|
||||
|
||||
Nothing in this License shall be construed as excluding or limiting
|
||||
any implied license or other defenses to infringement that may
|
||||
otherwise be available to you under applicable patent law.
|
||||
|
||||
12. No Surrender of Others' Freedom.
|
||||
|
||||
If conditions are imposed on you (whether by court order, agreement or
|
||||
otherwise) that contradict the conditions of this License, they do not
|
||||
excuse you from the conditions of this License. If you cannot convey a
|
||||
covered work so as to satisfy simultaneously your obligations under this
|
||||
License and any other pertinent obligations, then as a consequence you may
|
||||
not convey it at all. For example, if you agree to terms that obligate you
|
||||
to collect a royalty for further conveying from those to whom you convey
|
||||
the Program, the only way you could satisfy both those terms and this
|
||||
License would be to refrain entirely from conveying the Program.
|
||||
|
||||
13. Use with the GNU Affero General Public License.
|
||||
|
||||
Notwithstanding any other provision of this License, you have
|
||||
permission to link or combine any covered work with a work licensed
|
||||
under version 3 of the GNU Affero General Public License into a single
|
||||
combined work, and to convey the resulting work. The terms of this
|
||||
License will continue to apply to the part which is the covered work,
|
||||
but the special requirements of the GNU Affero General Public License,
|
||||
section 13, concerning interaction through a network will apply to the
|
||||
combination as such.
|
||||
|
||||
14. Revised Versions of this License.
|
||||
|
||||
The Free Software Foundation may publish revised and/or new versions of
|
||||
the GNU General Public License from time to time. Such new versions will
|
||||
be similar in spirit to the present version, but may differ in detail to
|
||||
address new problems or concerns.
|
||||
|
||||
Each version is given a distinguishing version number. If the
|
||||
Program specifies that a certain numbered version of the GNU General
|
||||
Public License "or any later version" applies to it, you have the
|
||||
option of following the terms and conditions either of that numbered
|
||||
version or of any later version published by the Free Software
|
||||
Foundation. If the Program does not specify a version number of the
|
||||
GNU General Public License, you may choose any version ever published
|
||||
by the Free Software Foundation.
|
||||
|
||||
If the Program specifies that a proxy can decide which future
|
||||
versions of the GNU General Public License can be used, that proxy's
|
||||
public statement of acceptance of a version permanently authorizes you
|
||||
to choose that version for the Program.
|
||||
|
||||
Later license versions may give you additional or different
|
||||
permissions. However, no additional obligations are imposed on any
|
||||
author or copyright holder as a result of your choosing to follow a
|
||||
later version.
|
||||
|
||||
15. Disclaimer of Warranty.
|
||||
|
||||
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
|
||||
APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
|
||||
HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
|
||||
OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
|
||||
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
|
||||
PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
|
||||
IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
|
||||
ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
|
||||
|
||||
16. Limitation of Liability.
|
||||
|
||||
IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
|
||||
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
|
||||
THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
|
||||
GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
|
||||
USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
|
||||
DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
|
||||
PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
|
||||
EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
|
||||
SUCH DAMAGES.
|
||||
|
||||
17. Interpretation of Sections 15 and 16.
|
||||
|
||||
If the disclaimer of warranty and limitation of liability provided
|
||||
above cannot be given local legal effect according to their terms,
|
||||
reviewing courts shall apply local law that most closely approximates
|
||||
an absolute waiver of all civil liability in connection with the
|
||||
Program, unless a warranty or assumption of liability accompanies a
|
||||
copy of the Program in return for a fee.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
How to Apply These Terms to Your New Programs
|
||||
|
||||
If you develop a new program, and you want it to be of the greatest
|
||||
possible use to the public, the best way to achieve this is to make it
|
||||
free software which everyone can redistribute and change under these terms.
|
||||
|
||||
To do so, attach the following notices to the program. It is safest
|
||||
to attach them to the start of each source file to most effectively
|
||||
state the exclusion of warranty; and each file should have at least
|
||||
the "copyright" line and a pointer to where the full notice is found.
|
||||
|
||||
<one line to give the program's name and a brief idea of what it does.>
|
||||
Copyright (C) <year> <name of author>
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
Also add information on how to contact you by electronic and paper mail.
|
||||
|
||||
If the program does terminal interaction, make it output a short
|
||||
notice like this when it starts in an interactive mode:
|
||||
|
||||
<program> Copyright (C) <year> <name of author>
|
||||
This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
|
||||
This is free software, and you are welcome to redistribute it
|
||||
under certain conditions; type `show c' for details.
|
||||
|
||||
The hypothetical commands `show w' and `show c' should show the appropriate
|
||||
parts of the General Public License. Of course, your program's commands
|
||||
might be different; for a GUI interface, you would use an "about box".
|
||||
|
||||
You should also get your employer (if you work as a programmer) or school,
|
||||
if any, to sign a "copyright disclaimer" for the program, if necessary.
|
||||
For more information on this, and how to apply and follow the GNU GPL, see
|
||||
<https://www.gnu.org/licenses/>.
|
||||
|
||||
The GNU General Public License does not permit incorporating your program
|
||||
into proprietary programs. If your program is a subroutine library, you
|
||||
may consider it more useful to permit linking proprietary applications with
|
||||
the library. If this is what you want to do, use the GNU Lesser General
|
||||
Public License instead of this License. But first, please read
|
||||
<https://www.gnu.org/licenses/why-not-lgpl.html>.
|
||||
@ -1,83 +1,42 @@
|
||||
# [Osmos greeter theme](https://warinyourself.github.io/lightdm-webkit-theme-osmos/)
|
||||
# osmos-v3
|
||||
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite.
|
||||
|
||||
<br />
|
||||
## Recommended IDE Setup
|
||||
|
||||
## Installation
|
||||
[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||
|
||||
### Arch Linux:
|
||||
## Recommended Browser Setup
|
||||
|
||||
``` sh
|
||||
yay -S lightdm-webkit-theme-osmos
|
||||
```
|
||||
- Chromium-based browsers (Chrome, Edge, Brave, etc.):
|
||||
- [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
|
||||
- [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
|
||||
- Firefox:
|
||||
- [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
|
||||
- [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
|
||||
|
||||
### Manual installation:
|
||||
## Type Support for `.vue` Imports in TS
|
||||
|
||||
Set `greeter-session = lightdm-webkit2-greeter` in `/etc/lightdm/lightdm.conf`:
|
||||
```sh
|
||||
sudo sed -i 's/^\(#\?greeter\)-session\s*=\s*\(.*\)/greeter-session = lightdm-webkit2-greeter/g' /etc/lightdm/lightdm.conf
|
||||
```
|
||||
Then edit `/etc/lightdm/lightdm-webkit2-greeter.conf` to set `webkit_theme=osmos`.
|
||||
``` sh
|
||||
sudo sed -i 's/^webkit_theme\s*=\s*\(.*\)/webkit_theme = osmos/g' /etc/lightdm/lightdm-webkit2-greeter.conf
|
||||
```
|
||||
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
|
||||
|
||||
<br />
|
||||
## Customize configuration
|
||||
|
||||
## Control brightness and battery:
|
||||
|
||||
See [Vite Configuration Reference](https://vite.dev/config/).
|
||||
|
||||
If you want to control brightness and battery - install [node-greeter](https://github.com/JezerM/nody-greeter#installation).
|
||||
## Project Setup
|
||||
|
||||
Set `greeter-session = nody-greeter` in `/etc/lightdm/lightdm.conf`:
|
||||
``` sh
|
||||
sudo sed -i 's/^\(#\?greeter\)-session\s*=\s*\(.*\)/greeter-session = nody-greeter/g' /etc/lightdm/lightdm.conf
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
Then edit `/etc/lightdm/web-greeter.yml` to set `theme: osmos`:
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
``` sh
|
||||
sudo sed -i 's/\stheme:\s*\(.*\)/ theme: osmos/g' /etc/lightdm/web-greeter.yml
|
||||
```
|
||||
|
||||
Link webkit theme with nody greeter themes:
|
||||
```sh
|
||||
ln -s /usr/share/lightdm-webkit/themes/osmos /usr/share/web-greeter/themes/osmos
|
||||
```
|
||||
|
||||
To control battery install the [acpid](https://archlinux.org/packages/?name=acpid) package and enable/start acpid.service.
|
||||
``` sh
|
||||
sudo systemctl enable acpid
|
||||
sudo systemctl start acpid
|
||||
npm run dev
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
## Check the themes:
|
||||
[](https://warinyourself.github.io/lightdm-webkit-theme-osmos/?pxratio=0.8&animation-speed=5&symmetry=0.01&thickness=0.1&hue=360&brightness=1&invert=false&blur=false&no-transition=false&show-framerate=false&only-ui=true&themeName=Random)
|
||||
|
||||
[](https://warinyourself.github.io/lightdm-webkit-theme-osmos/?pxratio=0.8&invert=false&hue=21&brightness=1&animation-speed=7.32&size=1.75&blur=false&no-transition=false&show-framerate=false&only-ui=false&themeName=Sphere)
|
||||
### Type-Check, Compile and Minify for Production
|
||||
|
||||
[](https://warinyourself.github.io/lightdm-webkit-theme-osmos/?pxratio=0.8&animation-speed=5&position=7.02&blur=false&no-transition=false&show-framerate=false&only-ui=true&themeName=Planet)
|
||||
|
||||
[](https://warinyourself.github.io/lightdm-webkit-theme-osmos/?pxratio=0.8&position=1&perspective=0.02&animation-speed=10&blur=false&no-transition=false&show-framerate=false&only-ui=true&themeName=Destruction)
|
||||
|
||||
[](https://warinyourself.github.io/lightdm-webkit-theme-osmos/?animation-speed=5&blur=false&hue=0.03&no-transition=false&only-ui=true&pxratio=0.8&show-framerate=false&themeName=Rings&zoom=74.3)
|
||||
|
||||
[]((https://warinyourself.github.io/lightdm-webkit-theme-osmos/?pxratio=0.8&animation-speed=10&blur=false&no-transition=false&show-framerate=false&only-ui=false&themeName=Tenderness))
|
||||
|
||||
[](https://warinyourself.github.io/lightdm-webkit-theme-osmos/?pxratio=0.8&hue=81&animation-speed=10&blur=false&no-transition=false&show-framerate=false&only-ui=false&themeName=Plasma)
|
||||
|
||||
[](https://warinyourself.github.io/lightdm-webkit-theme-osmos/?pxratio=0.8&animation-speed=10&size=1&blur=false&no-transition=false&show-framerate=false&only-ui=false&themeName=Flow)
|
||||
|
||||
[](https://warinyourself.github.io/lightdm-webkit-theme-osmos/?palette=3&size=11&amount=50&animation-speed=20&blur=false&no-transition=false&show-framerate=false&only-ui=true&themeName=Infinity)
|
||||
|
||||
</br>
|
||||
|
||||
## ROADMAP
|
||||
- Integrates with nody-greeter [x]
|
||||
- Add possibility to guest login []
|
||||
- Add possibility to pick the wallpaper []
|
||||
- Add zoom slider (for hight DPI screens) [x]
|
||||
- Add CHANGELOG []
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
|
||||
@ -1,65 +0,0 @@
|
||||
const child_process = require('child_process')
|
||||
// import * as child_process from 'child_process'
|
||||
// import { logger } from '../logger'
|
||||
|
||||
const logger = {
|
||||
error: console.error,
|
||||
debug: console.log
|
||||
}
|
||||
|
||||
type Callback = (data: string) => void;
|
||||
|
||||
class ACPIController {
|
||||
public constructor() {
|
||||
if (this.checkAcpi()) this.listen()
|
||||
else logger.error('ACPI: acpi_listen does not exists')
|
||||
}
|
||||
|
||||
protected tries = 0;
|
||||
protected callbacks: Callback[] = [];
|
||||
|
||||
public connect(cb: Callback): void {
|
||||
this.callbacks.push(cb)
|
||||
}
|
||||
|
||||
public disconnect(cb: Callback): void {
|
||||
const ind = this.callbacks.findIndex((c) => {
|
||||
return c === cb
|
||||
})
|
||||
if (ind == -1) return
|
||||
this.callbacks.splice(ind, 1)
|
||||
}
|
||||
|
||||
private checkAcpi(): boolean {
|
||||
const res = child_process.spawnSync('which', ['acpi_listen'], {
|
||||
encoding: 'utf-8'
|
||||
})
|
||||
if (res.status == 0) return true
|
||||
else return false
|
||||
}
|
||||
|
||||
private listen(): void {
|
||||
const acpi = child_process.spawn('acpi_listen')
|
||||
acpi.on('error', (err) => {
|
||||
logger.error('ACPI: ' + err.message)
|
||||
})
|
||||
acpi.on('close', () => {
|
||||
if (this.tries < 5) {
|
||||
this.tries++
|
||||
logger.debug('Restarting acpi_listen')
|
||||
return this.listen()
|
||||
}
|
||||
})
|
||||
|
||||
acpi.stdout.addListener('data', (d: Buffer) => {
|
||||
const data = d.toString().trim()
|
||||
this.callbacks.forEach((cb) => {
|
||||
if (cb !== undefined) cb(data)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const ACPI = new ACPIController()
|
||||
|
||||
export { ACPI }
|
||||
@ -1,7 +0,0 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@babel/preset-env',
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
],
|
||||
plugins: ['transform-vue-jsx']
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
#!/bin/bash
|
||||
|
||||
echo Building LightDM Webkit theme Osmos v$(cat ./version)...
|
||||
echo
|
||||
|
||||
rm lightdm-webkit-theme-osmos*.tar.gz
|
||||
rm -r dist/
|
||||
yarn build
|
||||
pushd dist && tar zcvf ../lightdm-webkit-theme-osmos-$(cat ../version).tar.gz ./* && popd
|
||||
@ -0,0 +1,14 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
declare module '*.glsl' {
|
||||
const content: string
|
||||
export default content
|
||||
}
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
export interface GlobalComponents {
|
||||
AppIcon: typeof import('./src/components/app/AppIcon.vue')['default']
|
||||
}
|
||||
}
|
||||
|
||||
export {}
|
||||
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="lightdm">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<title>Osmos</title>
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<style>
|
||||
html { background-color: black !important; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,5 +0,0 @@
|
||||
# npm run build
|
||||
sudo chmod 777 -R dist
|
||||
rm -Rf /usr/share/lightdm-webkit/themes/osmos/*
|
||||
cp -r ./dist/* /usr/share/lightdm-webkit/themes/osmos
|
||||
# ls /usr/share/web-greeter/themes/
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,92 +1,44 @@
|
||||
{
|
||||
"name": "osmos",
|
||||
"version": "2.0.3",
|
||||
"description": "Lightdm greeter theme based on GLSL.",
|
||||
"private": false,
|
||||
"name": "osmos-v3",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"build:github": "VUE_APP_VIEW=github vue-cli-service build",
|
||||
"lint": "vue-cli-service lint",
|
||||
"dev": "vue-cli-service serve --open",
|
||||
"dev:github": "VUE_APP_VIEW=github vue-cli-service serve --open"
|
||||
},
|
||||
"author": {
|
||||
"name": "Warinyourself",
|
||||
"email": "warinyourself@gmail.com"
|
||||
"dev": "vite",
|
||||
"build": "run-p type-check \"build-only {@}\" --",
|
||||
"preview": "vite preview",
|
||||
"build-only": "vite build",
|
||||
"type-check": "vue-tsc --build"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.6.5",
|
||||
"css-doodle": "^0.12.0",
|
||||
"lodash": "^4.17.21",
|
||||
"css-doodle": "^0.51.0",
|
||||
"lodash": "^4.18.1",
|
||||
"mousetrap": "^1.6.5",
|
||||
"nody-greeter-types": "^1.0.7",
|
||||
"nouislider": "^15.0.0",
|
||||
"nody-greeter-types": "^1.1.0",
|
||||
"nouislider": "^15.8.1",
|
||||
"parallax-js": "^3.1.0",
|
||||
"vue": "2.7.14",
|
||||
"vue-color": "^2.8.1",
|
||||
"vue-i18n": "^8.22.2",
|
||||
"vue-router": "^3.2.0",
|
||||
"vuex": "^3.4.0"
|
||||
"pinia": "^3.0.4",
|
||||
"vue": "^3.5.32",
|
||||
"vue-i18n": "^11.4.5",
|
||||
"vue-router": "^5.0.4"
|
||||
},
|
||||
"license": "GPL-3.0",
|
||||
"devDependencies": {
|
||||
"@babel/helper-module-imports": "^7.16.0",
|
||||
"@types/lodash": "^4.14.178",
|
||||
"@types/mousetrap": "^1.6.9",
|
||||
"@types/node": "14.10.0",
|
||||
"@types/vue-color": "^2.4.4",
|
||||
"@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||
"@vue/cli-plugin-router": "~4.5.0",
|
||||
"@vue/cli-plugin-typescript": "~4.5.0",
|
||||
"@vue/cli-plugin-vuex": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"@vue/compiler-sfc": "^3.2.45",
|
||||
"@vue/eslint-config-airbnb": "7.0.0",
|
||||
"@vue/eslint-config-prettier": "7.0.0",
|
||||
"@vue/eslint-config-standard": "8.0.1",
|
||||
"@vue/eslint-config-typescript": "11.0.2",
|
||||
"babel-eslint": "^10.0.3",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.3",
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"babel-plugin-transform-vue-jsx": "3.3.0",
|
||||
"babel-preset-env": "^1.7.0",
|
||||
"eslint": "^7.1.0",
|
||||
"eslint-plugin-import": "2.26.0",
|
||||
"eslint-plugin-node": "^11.1.0",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"eslint-plugin-promise": "^4.2.1",
|
||||
"eslint-plugin-standard": "^5.0.0",
|
||||
"eslint-plugin-vue": "^9.7.0",
|
||||
"husky": "^4.2.5",
|
||||
"lint-staged": "^10.2.2",
|
||||
"prettier": "2.7.1",
|
||||
"stylus": "0.59.0",
|
||||
"stylus-loader": "3.0.2",
|
||||
"typescript": "4.8.4",
|
||||
"vue-class-component": "7.2.6",
|
||||
"vue-property-decorator": "9.1.2",
|
||||
"vue-template-compiler": "2.7.14",
|
||||
"vuex-module-decorators": "2.0.0",
|
||||
"webpack-glsl-loader": "1.0.1"
|
||||
},
|
||||
"gitHooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
}
|
||||
"@tsconfig/node24": "^24.0.4",
|
||||
"@types/lodash": "^4.17.24",
|
||||
"@types/mousetrap": "^1.6.15",
|
||||
"@types/node": "^24.12.2",
|
||||
"@vitejs/plugin-vue": "^6.0.6",
|
||||
"@vitejs/plugin-vue-jsx": "^5.1.5",
|
||||
"@vue/tsconfig": "^0.9.1",
|
||||
"npm-run-all2": "^8.0.4",
|
||||
"stylus": "^0.64.0",
|
||||
"typescript": "~6.0.0",
|
||||
"vite": "^8.0.8",
|
||||
"vite-plugin-glsl": "^1.6.0",
|
||||
"vite-plugin-vue-devtools": "^8.1.1",
|
||||
"vue-tsc": "^3.2.6"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,vue}": [
|
||||
"eslint --quiet"
|
||||
],
|
||||
"*.{js,jsx,vue,ts,tsx}": [
|
||||
"vue-cli-service lint",
|
||||
"git add"
|
||||
]
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@ -1,24 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="lightdm">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<title> Osmos </title>
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<style>
|
||||
html {
|
||||
background-color: black !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
@ -1,75 +1,64 @@
|
||||
import { Component, Vue, Watch } from 'vue-property-decorator'
|
||||
import { defineComponent, watch } from 'vue'
|
||||
import { debounce } from 'lodash'
|
||||
import Mousetrap from 'mousetrap'
|
||||
import { AppModule } from '@/store/app'
|
||||
import { PageModule } from '@/store/page'
|
||||
import { Debounce, focusInputPassword, setCSSVariable } from '@/utils/helper'
|
||||
import { useAppStore } from '@/store/app'
|
||||
import { usePageStore } from '@/store/page'
|
||||
import { focusInputPassword, setCSSVariable } from '@/utils/helper'
|
||||
import { hotkeys } from '@/utils/hotkeys'
|
||||
import { initTimer } from '@/utils/time'
|
||||
|
||||
@Component
|
||||
export default class MainApp extends Vue {
|
||||
get bodyClass() {
|
||||
return AppModule.bodyClass
|
||||
}
|
||||
export default defineComponent({
|
||||
name: 'MainApp',
|
||||
|
||||
get getMainSettings() {
|
||||
return AppModule.getMainSettings
|
||||
}
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
const pageStore = usePageStore()
|
||||
|
||||
@Debounce(100)
|
||||
@Watch('getMainSettings', { deep: true })
|
||||
handleSettingsThemes() {
|
||||
AppModule.syncSettingsWithCache()
|
||||
}
|
||||
const initZoom = () => {
|
||||
setCSSVariable('--zoom', appStore.zoom + '' || '1')
|
||||
}
|
||||
|
||||
/**
|
||||
* INFO: For High-DPI screens settings
|
||||
*/
|
||||
initZoom() {
|
||||
setCSSVariable('--zoom', AppModule.zoom + '' || '1')
|
||||
}
|
||||
const initKeybinds = () => {
|
||||
hotkeys.forEach(({ keys, callback }) => Mousetrap.bind(keys.join('+'), callback))
|
||||
|
||||
created() {
|
||||
AppModule.setUpSettings()
|
||||
this.initKeybinds()
|
||||
initTimer()
|
||||
this.initZoom()
|
||||
}
|
||||
Mousetrap.bind('escape', () => {
|
||||
const isFocusPassword = document.querySelector('#password:focus') as HTMLInputElement
|
||||
if (pageStore.dialog) {
|
||||
pageStore.closeDialog()
|
||||
} else if (pageStore.menu.view) {
|
||||
pageStore.assignMenu({ view: false })
|
||||
} else if (isFocusPassword) {
|
||||
isFocusPassword.blur()
|
||||
} else if (pageStore.activeBlock) {
|
||||
pageStore.closeBlock()
|
||||
}
|
||||
})
|
||||
|
||||
initKeybinds() {
|
||||
hotkeys.forEach(({ keys, callback }) => Mousetrap.bind(keys.join('+'), callback))
|
||||
Mousetrap.bind('enter', () => {
|
||||
const isFocusPassword = document.querySelector('#password:focus')
|
||||
if (isFocusPassword) {
|
||||
appStore.login()
|
||||
} else {
|
||||
focusInputPassword()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
Mousetrap.bind('escape', () => {
|
||||
const isFocusPassword = document.querySelector('#password:focus') as HTMLInputElement
|
||||
const isShowModal = !!PageModule.dialog
|
||||
|
||||
if (isShowModal) {
|
||||
PageModule.closeDialog()
|
||||
} else if (PageModule.menu.view) {
|
||||
PageModule.ASSIGN_MENU({ view: false })
|
||||
} else if (isFocusPassword) {
|
||||
isFocusPassword.blur()
|
||||
} else if (PageModule.activeBlock) {
|
||||
PageModule.closeBlock()
|
||||
}
|
||||
})
|
||||
|
||||
Mousetrap.bind('enter', () => {
|
||||
const isFocusPassword = document.querySelector('#password:focus')
|
||||
appStore.setUpSettings()
|
||||
initKeybinds()
|
||||
initTimer()
|
||||
initZoom()
|
||||
|
||||
if (isFocusPassword) {
|
||||
AppModule.login()
|
||||
} else {
|
||||
focusInputPassword()
|
||||
}
|
||||
})
|
||||
}
|
||||
watch(
|
||||
() => appStore.getMainSettings,
|
||||
debounce(() => appStore.syncSettingsWithCache(), 100),
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div id="app" class={ this.bodyClass }>
|
||||
return () => (
|
||||
<div id="app" class={appStore.bodyClass}>
|
||||
<router-view />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -0,0 +1,85 @@
|
||||
<script setup lang="ts">
|
||||
import { RouterLink, RouterView } from 'vue-router'
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
|
||||
|
||||
<div class="wrapper">
|
||||
<HelloWorld msg="You did it!" />
|
||||
|
||||
<nav>
|
||||
<RouterLink to="/">Home</RouterLink>
|
||||
<RouterLink to="/about">About</RouterLink>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<RouterView />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
header {
|
||||
line-height: 1.5;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
margin: 0 auto 2rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
nav a.router-link-exact-active {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
nav a.router-link-exact-active:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: inline-block;
|
||||
padding: 0 1rem;
|
||||
border-left: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
nav a:first-of-type {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
header {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
padding-right: calc(var(--section-gap) / 2);
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin: 0 2rem 0 0;
|
||||
}
|
||||
|
||||
header .wrapper {
|
||||
display: flex;
|
||||
place-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
nav {
|
||||
text-align: left;
|
||||
margin-left: -1rem;
|
||||
font-size: 1rem;
|
||||
|
||||
padding: 1rem 0;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,86 @@
|
||||
/* color palette from <https://github.com/vuejs/theme> */
|
||||
:root {
|
||||
--vt-c-white: #ffffff;
|
||||
--vt-c-white-soft: #f8f8f8;
|
||||
--vt-c-white-mute: #f2f2f2;
|
||||
|
||||
--vt-c-black: #181818;
|
||||
--vt-c-black-soft: #222222;
|
||||
--vt-c-black-mute: #282828;
|
||||
|
||||
--vt-c-indigo: #2c3e50;
|
||||
|
||||
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||
|
||||
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||
--vt-c-text-dark-1: var(--vt-c-white);
|
||||
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||
}
|
||||
|
||||
/* semantic color variables for this project */
|
||||
:root {
|
||||
--color-background: var(--vt-c-white);
|
||||
--color-background-soft: var(--vt-c-white-soft);
|
||||
--color-background-mute: var(--vt-c-white-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-light-2);
|
||||
--color-border-hover: var(--vt-c-divider-light-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-light-1);
|
||||
--color-text: var(--vt-c-text-light-1);
|
||||
|
||||
--section-gap: 160px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background: var(--vt-c-black);
|
||||
--color-background-soft: var(--vt-c-black-soft);
|
||||
--color-background-mute: var(--vt-c-black-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-dark-2);
|
||||
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-dark-1);
|
||||
--color-text: var(--vt-c-text-dark-2);
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
transition:
|
||||
color 0.5s,
|
||||
background-color 0.5s;
|
||||
line-height: 1.6;
|
||||
font-family:
|
||||
Inter,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
Oxygen,
|
||||
Ubuntu,
|
||||
Cantarell,
|
||||
'Fira Sans',
|
||||
'Droid Sans',
|
||||
'Helvetica Neue',
|
||||
sans-serif;
|
||||
font-size: 15px;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||
|
After Width: | Height: | Size: 276 B |
@ -0,0 +1,35 @@
|
||||
@import './base.css';
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a,
|
||||
.green {
|
||||
text-decoration: none;
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
transition: 0.4s;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
a:hover {
|
||||
background-color: hsla(160, 100%, 37%, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
body {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div class="item">
|
||||
<i>
|
||||
<slot name="icon"></slot>
|
||||
</i>
|
||||
<div class="details">
|
||||
<h3>
|
||||
<slot name="heading"></slot>
|
||||
</h3>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.item {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.details {
|
||||
flex: 1;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
i {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
place-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.4rem;
|
||||
color: var(--color-heading);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.item {
|
||||
margin-top: 0;
|
||||
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
|
||||
}
|
||||
|
||||
i {
|
||||
top: calc(50% - 25px);
|
||||
left: -26px;
|
||||
position: absolute;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-background);
|
||||
border-radius: 8px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.item:before {
|
||||
content: ' ';
|
||||
border-left: 1px solid var(--color-border);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: calc(50% + 25px);
|
||||
height: calc(50% - 25px);
|
||||
}
|
||||
|
||||
.item:after {
|
||||
content: ' ';
|
||||
border-left: 1px solid var(--color-border);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: calc(50% + 25px);
|
||||
height: calc(50% - 25px);
|
||||
}
|
||||
|
||||
.item:first-of-type:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item:last-of-type:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,33 +1,23 @@
|
||||
import { AppModule } from '@/store/app'
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import AppIcon from './AppIcon.vue'
|
||||
import { defineComponent } from 'vue'
|
||||
import { useAppStore } from '@/store/app'
|
||||
import timer from '@/utils/time'
|
||||
import BatteryIcon from '../base/BatteryIcon'
|
||||
import BrightIcon from '../base/BrightIcon'
|
||||
import BatteryIcon from '@/components/base/BatteryIcon'
|
||||
import BrightIcon from '@/components/base/BrightIcon'
|
||||
|
||||
@Component({
|
||||
components: { AppIcon, BatteryIcon, BrightIcon }
|
||||
})
|
||||
export default class AppBar extends Vue {
|
||||
get showBattery() {
|
||||
return AppModule.battery
|
||||
}
|
||||
|
||||
get showBright() {
|
||||
return !!AppModule.brightness
|
||||
}
|
||||
export default defineComponent({
|
||||
name: 'AppBar',
|
||||
|
||||
get currentTime() {
|
||||
return timer.longTime
|
||||
}
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
|
||||
render() {
|
||||
return <div class="app-bar active-interface">
|
||||
<div class="app-bar__time"> { timer.longTime } </div>
|
||||
<div class="app-bar__info">
|
||||
{ this.showBattery && <BatteryIcon /> }
|
||||
{ this.showBright && <BrightIcon /> }
|
||||
return () => (
|
||||
<div class="app-bar active-interface">
|
||||
<div class="app-bar__time">{timer.longTime}</div>
|
||||
<div class="app-bar__info">
|
||||
{appStore.battery && <BatteryIcon />}
|
||||
{!!appStore.brightness && <BrightIcon />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,109 +1,64 @@
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
import { defineComponent, computed, h } from 'vue'
|
||||
import AppIcon from '@/components/app/AppIcon.vue'
|
||||
import { Route } from 'vue-router'
|
||||
import { CreateElement, VNode, VNodeData } from 'vue'
|
||||
|
||||
const prefix = 'app-button'
|
||||
|
||||
interface AppButtonPropsInterface {
|
||||
label: string;
|
||||
icon?: string;
|
||||
fab?: boolean;
|
||||
tag?: string;
|
||||
link?: boolean;
|
||||
nuxt?: boolean;
|
||||
block?: boolean;
|
||||
target?: string;
|
||||
disabled?: boolean;
|
||||
loading?: boolean;
|
||||
type?: string;
|
||||
to?: Route | string;
|
||||
href?: Route | string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
components: { AppIcon }
|
||||
})
|
||||
export default class AppButton extends Vue implements AppButtonPropsInterface {
|
||||
@Prop({ type: String }) label!: string
|
||||
@Prop({ type: String }) icon!: string
|
||||
@Prop({ type: String }) type!: string
|
||||
@Prop({ type: Boolean }) fab!: boolean
|
||||
@Prop({ type: Boolean }) link!: boolean
|
||||
@Prop({ type: Boolean }) block!: boolean
|
||||
@Prop({ type: String }) target!: string
|
||||
@Prop({ type: Boolean }) loading!: boolean
|
||||
@Prop({ type: Boolean }) nuxt!: boolean
|
||||
@Prop({ type: String, default: 'transparent' }) color!: string
|
||||
@Prop({ type: Boolean }) disabled!: boolean
|
||||
@Prop({ type: String, default: 'button' }) tag!: string
|
||||
@Prop({ type: [Object, String] }) to!: Route | string
|
||||
@Prop({ type: [Object, String] }) href!: Route | string
|
||||
|
||||
get classes() {
|
||||
const classes: Record<string, boolean> = { [prefix]: true, [`${prefix}--${this.color}`]: true }
|
||||
const propertyList: Array<keyof AppButtonPropsInterface> = ['fab', 'block']
|
||||
|
||||
propertyList.forEach(property => {
|
||||
classes[`${prefix}--${property}`] = !!this[property]
|
||||
})
|
||||
|
||||
return classes
|
||||
}
|
||||
|
||||
get isLink() {
|
||||
return this.to || this.href || this.link
|
||||
}
|
||||
|
||||
generateRouteLink() {
|
||||
let tag
|
||||
|
||||
const data: VNodeData = {
|
||||
attrs: {
|
||||
tabindex: 'tabindex' in this.$attrs ? this.$attrs.tabindex : undefined
|
||||
},
|
||||
class: this.classes,
|
||||
[this.to ? 'nativeOn' : 'on']: {
|
||||
...this.$listeners
|
||||
},
|
||||
ref: 'link'
|
||||
}
|
||||
|
||||
if (this.to) {
|
||||
tag = this.nuxt ? 'nuxt-link' : 'router-link'
|
||||
} else {
|
||||
tag = (this.href && 'a') || this.tag || 'div'
|
||||
|
||||
if (tag === 'a' && this.href) data.attrs!.href = this.href
|
||||
export default defineComponent({
|
||||
name: 'AppButton',
|
||||
|
||||
emits: ['click'],
|
||||
|
||||
props: {
|
||||
label: String,
|
||||
icon: String,
|
||||
type: String,
|
||||
fab: Boolean,
|
||||
link: Boolean,
|
||||
block: Boolean,
|
||||
target: String,
|
||||
loading: Boolean,
|
||||
nuxt: Boolean,
|
||||
color: { type: String, default: 'transparent' },
|
||||
disabled: Boolean,
|
||||
tag: { type: String, default: 'button' },
|
||||
to: [Object, String],
|
||||
href: [Object, String]
|
||||
},
|
||||
|
||||
setup(props, { slots, attrs }) {
|
||||
const classes = computed(() => ({
|
||||
[prefix]: true,
|
||||
[`${prefix}--${props.color}`]: true,
|
||||
[`${prefix}--fab`]: !!props.fab,
|
||||
[`${prefix}--block`]: !!props.block
|
||||
}))
|
||||
|
||||
return () => {
|
||||
let tag = props.tag || 'button'
|
||||
if (props.to) tag = 'router-link'
|
||||
else if (props.href) tag = 'a'
|
||||
|
||||
const btnProps: Record<string, any> = {
|
||||
class: classes.value,
|
||||
...attrs
|
||||
}
|
||||
|
||||
if (tag === 'button') {
|
||||
btnProps.type = props.type
|
||||
btnProps.disabled = props.disabled
|
||||
}
|
||||
if (tag === 'router-link') btnProps.to = props.to
|
||||
if (tag === 'a') btnProps.href = props.href
|
||||
if (props.target) btnProps.target = props.target
|
||||
|
||||
const content = <span class={`${prefix}__content`}>{slots.default?.()}</span>
|
||||
const loader = props.loading && (
|
||||
<span class={`${prefix}__loader`}>
|
||||
{slots.loader?.() || <AppIcon name="loader" />}
|
||||
</span>
|
||||
)
|
||||
|
||||
return h(tag, btnProps, [content, loader])
|
||||
}
|
||||
|
||||
if (this.target) data.attrs!.target = this.target
|
||||
|
||||
return { tag, data }
|
||||
}
|
||||
|
||||
buildContent() {
|
||||
return <span class={ `${prefix}__content` }> { this.$slots.default } </span>
|
||||
}
|
||||
|
||||
buildLoader() {
|
||||
return <span class={ `${prefix}__loader` }>
|
||||
{ this.$slots.loader || <AppIcon name='loader' /> }
|
||||
</span>
|
||||
}
|
||||
|
||||
render(h: CreateElement): VNode {
|
||||
const children = [
|
||||
this.buildContent(),
|
||||
this.loading && this.buildLoader()
|
||||
]
|
||||
const { tag, data } = this.generateRouteLink()
|
||||
|
||||
if (tag === 'button') {
|
||||
data.attrs!.type = this.type
|
||||
data.attrs!.disabled = this.disabled
|
||||
}
|
||||
|
||||
return h(tag, data, children)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,45 +1,40 @@
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
import AppIcon from '@/components/app/AppIcon.vue'
|
||||
import { defineComponent, computed } from 'vue'
|
||||
|
||||
@Component({
|
||||
components: { AppIcon }
|
||||
})
|
||||
export default class AppCheckbox extends Vue {
|
||||
@Prop({ default: false }) value!: boolean
|
||||
@Prop({ default: '' }) label!: string
|
||||
export default defineComponent({
|
||||
name: 'AppCheckbox',
|
||||
|
||||
get classes(): Record<string, boolean> {
|
||||
return {
|
||||
checkbox: true,
|
||||
'checkbox--active': this.value
|
||||
}
|
||||
}
|
||||
props: {
|
||||
modelValue: { type: Boolean, default: false },
|
||||
label: { type: String, default: '' },
|
||||
inline: { type: Boolean, default: false }
|
||||
},
|
||||
|
||||
get idCheckbox(): string {
|
||||
return `input-${(this as any)._uid}`
|
||||
}
|
||||
emits: ['update:modelValue'],
|
||||
|
||||
changeState(): void {
|
||||
this.$emit('input', !this.value)
|
||||
}
|
||||
setup(props, { emit }) {
|
||||
const classes = computed(() => ({
|
||||
checkbox: true,
|
||||
'checkbox--active': props.modelValue
|
||||
}))
|
||||
|
||||
render() {
|
||||
return <label class={ this.classes }>
|
||||
<div class="checkbox-control">
|
||||
<div class="checkbox-control-box">
|
||||
<AppIcon name="checkbox"></AppIcon>
|
||||
const changeState = () => emit('update:modelValue', !props.modelValue)
|
||||
|
||||
return () => (
|
||||
<label class={classes.value}>
|
||||
<div class="checkbox-control">
|
||||
<div class="checkbox-control-box">
|
||||
<AppIcon name="checkbox" />
|
||||
</div>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={props.modelValue}
|
||||
aria-checked={props.modelValue}
|
||||
onInput={changeState}
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="checkbox"
|
||||
value={ this.value }
|
||||
aria-checked={ this.value }
|
||||
id={ this.idCheckbox }
|
||||
onInput={ this.changeState }
|
||||
/>
|
||||
</div>
|
||||
<p class="input-label">
|
||||
{ this.label }
|
||||
</p>
|
||||
</label>
|
||||
<p class="input-label">{props.label}</p>
|
||||
</label>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,33 +1,28 @@
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
import { Chrome } from 'vue-color'
|
||||
import { defineComponent } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
@Component({
|
||||
components: { Chrome }
|
||||
})
|
||||
export default class AppColorSelector extends Vue {
|
||||
@Prop({ type: String, default: '#fff' }) value!: string
|
||||
@Prop({ default: '' }) label!: string
|
||||
export default defineComponent({
|
||||
name: 'AppColorSelector',
|
||||
|
||||
changeState(event: Event) {
|
||||
event.stopPropagation()
|
||||
props: {
|
||||
modelValue: { type: String, default: '#fff' },
|
||||
label: { type: String, default: '' }
|
||||
},
|
||||
|
||||
this.$emit('input', !this.value)
|
||||
}
|
||||
emits: ['update:modelValue'],
|
||||
|
||||
render() {
|
||||
return <div class="color-selector">
|
||||
<p> { this.$t(this.label) } </p>
|
||||
<Chrome
|
||||
{ ...{
|
||||
props: {
|
||||
disableAlpha: true,
|
||||
disableFields: true,
|
||||
value: this.value
|
||||
},
|
||||
on: this.$listeners
|
||||
}}
|
||||
>
|
||||
</Chrome>
|
||||
</div>
|
||||
setup(props, { emit }) {
|
||||
const { t } = useI18n()
|
||||
|
||||
return () => (
|
||||
<div class="color-selector">
|
||||
<p>{t(props.label)}</p>
|
||||
<input
|
||||
type="color"
|
||||
value={props.modelValue}
|
||||
onInput={(e) => emit('update:modelValue', (e.target as HTMLInputElement).value)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,45 +1,32 @@
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
import { PageModule } from '@/store/page'
|
||||
import AppIcon from '@/components/app/AppIcon.vue'
|
||||
import AppButton from './AppButton'
|
||||
import { defineComponent } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { usePageStore } from '@/store/page'
|
||||
import { stopPropagation } from '@/utils/helper'
|
||||
import AppButton from './AppButton'
|
||||
|
||||
@Component({
|
||||
components: { AppIcon }
|
||||
})
|
||||
export default class AppDialog extends Vue {
|
||||
@Prop({ type: Boolean, default: false }) value!: boolean
|
||||
@Prop({ default: '' }) label!: string
|
||||
|
||||
get dialog() {
|
||||
return PageModule.dialog
|
||||
}
|
||||
|
||||
get showDialog() {
|
||||
return !!this.dialog
|
||||
}
|
||||
|
||||
generateDialog() {
|
||||
return <div class="dialog-overlay active-block" onClick={ PageModule.closeDialog }>
|
||||
<div class="dialog-body" onClick={ stopPropagation }>
|
||||
<h5 class="dialog-title"> { this.$t(this.dialog?.title + '') } </h5>
|
||||
<p class="dialog-text"> { this.$t(this.dialog?.text + '') } </p>
|
||||
{ this.generateButtons() }
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
generateButtons() {
|
||||
const buttons = this.dialog?.actions.map(({ title, callback }) => {
|
||||
return <AppButton onClick={ callback }> { this.$t(title + '') } </AppButton>
|
||||
})
|
||||
export default defineComponent({
|
||||
name: 'AppDialog',
|
||||
|
||||
return <div class="dialog-buttons"> { buttons } </div>
|
||||
}
|
||||
setup() {
|
||||
const pageStore = usePageStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
render() {
|
||||
return <transition name="fade">
|
||||
{ this.showDialog && this.generateDialog() }
|
||||
</transition>
|
||||
return () => (
|
||||
<transition name="fade">
|
||||
{pageStore.dialog && (
|
||||
<div class="dialog-overlay active-block" onClick={pageStore.closeDialog}>
|
||||
<div class="dialog-body" onClick={stopPropagation}>
|
||||
<h5 class="dialog-title">{t(pageStore.dialog.title)}</h5>
|
||||
<p class="dialog-text">{t(pageStore.dialog.text)}</p>
|
||||
<div class="dialog-buttons">
|
||||
{pageStore.dialog.actions.map(({ title, callback }) => (
|
||||
<AppButton onClick={callback}>{t(title)}</AppButton>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</transition>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,123 +1,97 @@
|
||||
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
|
||||
import { PageModule } from '@/store/page'
|
||||
import AppIcon from '@/components/app/AppIcon.vue'
|
||||
import { AppMenuItem, AppMenuPosition } from '@/models/page'
|
||||
import { AppModule } from '@/store/app'
|
||||
|
||||
@Component({
|
||||
components: { AppIcon }
|
||||
})
|
||||
export default class AppMenu extends Vue {
|
||||
innerPositioned: AppMenuPosition = { left: 0, top: 0, width: 199 }
|
||||
|
||||
get position() {
|
||||
return this.menu.position ?? this.innerPositioned
|
||||
}
|
||||
|
||||
get menu() {
|
||||
return PageModule.menu
|
||||
}
|
||||
|
||||
get isShow() {
|
||||
return this.menu.view
|
||||
}
|
||||
|
||||
@Watch('menu.view')
|
||||
updatePosition(isOpen: boolean) {
|
||||
if (isOpen) {
|
||||
this.calculatePosition()
|
||||
import { defineComponent, ref, watch, computed, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { usePageStore } from '@/store/page'
|
||||
import { useAppStore } from '@/store/app'
|
||||
import type { AppMenuItem, AppMenuPosition } from '@/models/page'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'AppMenu',
|
||||
|
||||
setup() {
|
||||
const pageStore = usePageStore()
|
||||
const appStore = useAppStore()
|
||||
const menuRef = ref<HTMLElement | null>(null)
|
||||
const innerPositioned = ref<AppMenuPosition>({ left: 0, top: 0, width: 199 })
|
||||
|
||||
const position = computed(() => (pageStore.menu as any).position ?? innerPositioned.value)
|
||||
|
||||
const style = computed(() =>
|
||||
Object.entries(position.value)
|
||||
.map(([prop, val]) => `${prop}: ${val}px`)
|
||||
.join(';')
|
||||
)
|
||||
|
||||
const calculatePosition = () => {
|
||||
const node = (pageStore.menu as any).node as HTMLElement | undefined
|
||||
if (!node || !pageStore.menu.view) return
|
||||
|
||||
const { bottom, left, top, height, width } = node.getBoundingClientRect()
|
||||
const { zoom } = appStore
|
||||
const pos: AppMenuPosition = { left: left * zoom, width: width * zoom }
|
||||
|
||||
if (bottom > top) {
|
||||
pos.top = (top + height) * zoom
|
||||
} else {
|
||||
pos.bottom = (window.innerHeight - bottom + height) * zoom
|
||||
}
|
||||
|
||||
innerPositioned.value = pos
|
||||
}
|
||||
}
|
||||
|
||||
get style() {
|
||||
return Object.entries(this.position).reduce((acc, [property, value]) => {
|
||||
acc += `${property}: ${value}px;`
|
||||
return acc
|
||||
}, '')
|
||||
}
|
||||
|
||||
get menuNode() {
|
||||
return this.$refs.menu as Element
|
||||
}
|
||||
|
||||
async handleCallback(event: MouseEvent, item: AppMenuItem | string) {
|
||||
if (this.menu.handler) {
|
||||
await this.menu.handler(item)
|
||||
}
|
||||
|
||||
this.closeMenu()
|
||||
}
|
||||
|
||||
handleClickOutside(event: MouseEvent) {
|
||||
if (!this.isShow) return false
|
||||
const closeMenu = () => pageStore.assignMenu({ view: false })
|
||||
|
||||
const clickOnMenu = this.$el.contains(event.target as Node)
|
||||
!clickOnMenu && this.closeMenu()
|
||||
}
|
||||
|
||||
mounted() {
|
||||
window.addEventListener('resize', this.handleResize, { passive: true })
|
||||
window.addEventListener('click', this.handleClickOutside)
|
||||
}
|
||||
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
window.removeEventListener('click', this.handleClickOutside)
|
||||
}
|
||||
|
||||
handleResize() {
|
||||
this.calculatePosition()
|
||||
}
|
||||
|
||||
calculatePosition() {
|
||||
const node = this.menu.node
|
||||
const { zoom } = AppModule
|
||||
|
||||
if (!node || !this.menu.view) return
|
||||
|
||||
const { bottom, left, top, height, width } = node.getBoundingClientRect()
|
||||
const allHeight = window.innerHeight
|
||||
|
||||
const positionY = bottom > top ? 'bottom' : 'top'
|
||||
const position: AppMenuPosition = {
|
||||
left: left * zoom,
|
||||
width: width * zoom
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (!pageStore.menu.view) return
|
||||
const clickOnMenu = menuRef.value?.contains(event.target as Node)
|
||||
if (!clickOnMenu) closeMenu()
|
||||
}
|
||||
|
||||
if (positionY === 'bottom') {
|
||||
position.top = (top + height) * zoom
|
||||
} else {
|
||||
position.bottom = (allHeight - bottom + height) * zoom
|
||||
const handleResize = () => calculatePosition()
|
||||
|
||||
watch(() => pageStore.menu.view, (isOpen) => {
|
||||
if (isOpen) calculatePosition()
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('resize', handleResize, { passive: true })
|
||||
window.addEventListener('click', handleClickOutside)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
window.removeEventListener('click', handleClickOutside)
|
||||
})
|
||||
|
||||
const buildItem = (item: AppMenuItem | string, index: number) => {
|
||||
const isStr = typeof item === 'string'
|
||||
const { text, icon } = isStr ? { text: item, icon: null } : (item as AppMenuItem)
|
||||
return (
|
||||
<li
|
||||
class="menu-list-item"
|
||||
key={index}
|
||||
onClick={async (event) => {
|
||||
if ((pageStore.menu as any).handler) {
|
||||
await (pageStore.menu as any).handler(item)
|
||||
}
|
||||
closeMenu()
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
{icon && <AppIcon class="menu-icon" name={icon} />}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
this.innerPositioned = position
|
||||
return () => (
|
||||
<div class="menu-wrapper" ref={menuRef}>
|
||||
<transition name="fade-menu">
|
||||
{pageStore.menu.view && (
|
||||
<ul class="menu-list active-block" id="menu" style={style.value}>
|
||||
{pageStore.menu.items.map(buildItem)}
|
||||
</ul>
|
||||
)}
|
||||
</transition>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
closeMenu() {
|
||||
PageModule.ASSIGN_MENU({ view: false })
|
||||
}
|
||||
|
||||
buildElementItem(item: AppMenuItem | string, index: number) {
|
||||
const isSting = typeof item === 'string'
|
||||
const { text, icon } = isSting ? { text: item, icon: null } : item
|
||||
return <li
|
||||
class='menu-list-item'
|
||||
key={index}
|
||||
onClick={(event) => { this.handleCallback(event, item) }}
|
||||
>
|
||||
{ text }
|
||||
{ icon && <AppIcon class='menu-icon' name={icon} /> }
|
||||
</li>
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div class='menu-wrapper' ref='menu'>
|
||||
<transition name='fade-menu'>
|
||||
{ this.menu.view && <ul class='menu-list active-block' id='menu' style={ this.style }>
|
||||
{ this.menu.items.map(this.buildElementItem) }
|
||||
</ul>
|
||||
}
|
||||
</transition>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,32 +1,30 @@
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
import AppIcon from '@/components/app/AppIcon.vue'
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
@Component({
|
||||
components: { AppIcon }
|
||||
})
|
||||
export default class AppPaletteSelector extends Vue {
|
||||
@Prop({ type: Number, default: 0 }) value!: number
|
||||
@Prop({ type: Array, required: true }) values!: string[][]
|
||||
@Prop({ default: '' }) label!: string
|
||||
|
||||
activatePalette(index: number) {
|
||||
this.$emit('input', index)
|
||||
}
|
||||
export default defineComponent({
|
||||
name: 'AppPaletteSelector',
|
||||
|
||||
generatePaletteItem(colors: string[], index: number) {
|
||||
const buildColor = (color: string) => <div class="palette-block-color" style={ `background-color: ${color}` }/>
|
||||
const classes = `palette-block ${index === this.value ? 'active' : ''}`
|
||||
props: {
|
||||
modelValue: { type: Number, default: 0 },
|
||||
values: { type: Array as () => string[][], required: true },
|
||||
label: { type: String, default: '' }
|
||||
},
|
||||
|
||||
return <div onClick={ () => this.activatePalette(index) } class={ classes }> { colors.map(buildColor) } </div>
|
||||
}
|
||||
emits: ['update:modelValue'],
|
||||
|
||||
generatePaletteItems() {
|
||||
return this.values.map(this.generatePaletteItem)
|
||||
setup(props, { emit }) {
|
||||
return () => (
|
||||
<div class="palette-blocks">
|
||||
{props.values.map((colors, index) => {
|
||||
const classes = `palette-block ${index === props.modelValue ? 'active' : ''}`
|
||||
return (
|
||||
<div onClick={() => emit('update:modelValue', index)} class={classes}>
|
||||
{colors.map((color) => (
|
||||
<div class="palette-block-color" style={`background-color: ${color}`} />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div class="palette-blocks">
|
||||
{ this.generatePaletteItems() }
|
||||
</div>
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,90 +1,83 @@
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
|
||||
import { PageModule } from '@/store/page'
|
||||
import AppIcon from '@/components/app/AppIcon.vue'
|
||||
import { AppMenuItem } from '@/models/page'
|
||||
import { defineComponent, computed, ref, type PropType } from 'vue'
|
||||
import { usePageStore } from '@/store/page'
|
||||
import type { AppMenuItem } from '@/models/page'
|
||||
|
||||
export interface AppSelectorProps {
|
||||
value: AppMenuItem | string | undefined;
|
||||
items: AppMenuItem[];
|
||||
label: string;
|
||||
}
|
||||
@Component({
|
||||
components: { AppIcon }
|
||||
})
|
||||
export default class AppSelector extends Vue implements AppSelectorProps {
|
||||
@Prop({ type: [Object, String], default: undefined }) value!: AppMenuItem | string | undefined
|
||||
@Prop({ type: [Array], default: () => [] }) items!: AppMenuItem[]
|
||||
@Prop({ default: '' }) label!: string
|
||||
export default defineComponent({
|
||||
name: 'AppSelector',
|
||||
|
||||
selectedValue: null | AppMenuItem | string = null
|
||||
props: {
|
||||
modelValue: { type: [Object, String, Number] as PropType<AppMenuItem | string | number | null | undefined>, default: null },
|
||||
items: { type: Array as PropType<(AppMenuItem | string)[]>, default: () => [] },
|
||||
label: { type: String, default: '' }
|
||||
},
|
||||
|
||||
get fullSelectedItem() {
|
||||
const selected = this.value !== null ? this.value : this.selectedValue
|
||||
const finalSelectedValue = typeof selected === 'object' ? selected?.value : selected
|
||||
emits: ['update:modelValue'],
|
||||
|
||||
return this.items.find((item) => {
|
||||
const finalValue = typeof item === 'object' ? item?.value : item
|
||||
return finalValue === finalSelectedValue
|
||||
})
|
||||
}
|
||||
setup(props, { emit }) {
|
||||
const pageStore = usePageStore()
|
||||
const selectorRef = ref<HTMLElement | null>(null)
|
||||
const selectedValue = ref<AppMenuItem | string | null>(null)
|
||||
|
||||
get menu() {
|
||||
return PageModule.menu
|
||||
}
|
||||
|
||||
get isActive() {
|
||||
return this.menu?.view && this.menu?.node === this.$refs.selector
|
||||
}
|
||||
const fullSelectedItem = computed(() => {
|
||||
const selected = props.modelValue !== null ? props.modelValue : selectedValue.value
|
||||
const finalSelectedValue = typeof selected === 'object' ? (selected as AppMenuItem)?.value : selected
|
||||
return props.items.find((item) => {
|
||||
const finalValue = typeof item === 'object' ? item?.value : item
|
||||
return finalValue === finalSelectedValue
|
||||
})
|
||||
})
|
||||
|
||||
get currentValueLabel() {
|
||||
const selected = this.fullSelectedItem ?? this.selectedValue
|
||||
return typeof selected === 'object' ? selected?.text : selected
|
||||
}
|
||||
const isActive = computed(
|
||||
() => pageStore.menu.view && (pageStore.menu as any).node === selectorRef.value
|
||||
)
|
||||
|
||||
openSelector(event: Event) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
const currentValueLabel = computed(() => {
|
||||
const selected = fullSelectedItem.value ?? selectedValue.value
|
||||
return typeof selected === 'object' ? (selected as AppMenuItem)?.text : selected
|
||||
})
|
||||
|
||||
if (this.menu.view) {
|
||||
return PageModule.ASSIGN_MENU({ view: false })
|
||||
const callback = (item: AppMenuItem | string) => {
|
||||
const finalValue = typeof item === 'object' ? item.value : item
|
||||
selectedValue.value = item
|
||||
emit('update:modelValue', finalValue)
|
||||
}
|
||||
|
||||
PageModule.ASSIGN_MENU({
|
||||
node: this.$refs.selector as HTMLElement,
|
||||
view: true,
|
||||
items: this.items,
|
||||
handler: this.callback
|
||||
})
|
||||
}
|
||||
const openSelector = (event: Event) => {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
|
||||
callback(item: AppMenuItem | string) {
|
||||
const finalValue = typeof item === 'object' ? item.value : item
|
||||
if (pageStore.menu.view) {
|
||||
return pageStore.assignMenu({ view: false })
|
||||
}
|
||||
|
||||
this.selectedValue = item
|
||||
this.$emit('input', finalValue)
|
||||
}
|
||||
pageStore.assignMenu({
|
||||
node: selectorRef.value as HTMLElement,
|
||||
view: true,
|
||||
items: props.items as AppMenuItem[],
|
||||
handler: callback
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const selectorIcon = this.fullSelectedItem?.icon ? <AppIcon {...{
|
||||
class: 'menu-icon selector-icon',
|
||||
props: {
|
||||
name: this.fullSelectedItem.icon
|
||||
}
|
||||
}}/> : null
|
||||
return () => {
|
||||
const iconName = (fullSelectedItem.value as AppMenuItem)?.icon
|
||||
const selectorIcon = iconName ? (
|
||||
<AppIcon class="menu-icon selector-icon" name={iconName} />
|
||||
) : null
|
||||
|
||||
return <div
|
||||
onClick={ this.openSelector }
|
||||
ref="selector"
|
||||
class={['selector', this.isActive ? 'active' : '']}
|
||||
>
|
||||
<h2 class='selector-label'>
|
||||
{ selectorIcon }
|
||||
<p class="selector-label-text">
|
||||
{ this.currentValueLabel || this.label }
|
||||
</p>
|
||||
</h2>
|
||||
<AppIcon name='arrow' class='icon selector-arrow' />
|
||||
</div>
|
||||
return (
|
||||
<div
|
||||
onClick={openSelector}
|
||||
ref={selectorRef}
|
||||
class={['selector', isActive.value ? 'active' : '']}
|
||||
>
|
||||
<h2 class="selector-label">
|
||||
{selectorIcon}
|
||||
<p class="selector-label-text">{currentValueLabel.value || props.label}</p>
|
||||
</h2>
|
||||
<AppIcon name="arrow" class="icon selector-arrow" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,68 +1,63 @@
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
import { defineComponent, onMounted, onUpdated, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import noUiSlider from 'nouislider'
|
||||
import { Debounce } from '@/utils/helper'
|
||||
|
||||
@Component
|
||||
export default class AppSlider extends Vue {
|
||||
@Prop({ type: [Number], default: '' }) value!: number | string
|
||||
@Prop({ default: '' }) label!: string
|
||||
@Prop({ type: Number, default: 0 }) from!: number
|
||||
@Prop({ type: Number, default: 100 }) to!: number
|
||||
@Prop({ type: Number, default: 1 }) step!: number
|
||||
@Prop({ type: Boolean, default: false }) changeOnUpdate!: boolean
|
||||
|
||||
preValue = 0
|
||||
|
||||
@Debounce(100)
|
||||
syncSliderValue() {
|
||||
const slider = (this.$refs.slider as any).noUiSlider
|
||||
const sliderValue = parseFloat(slider.get())
|
||||
const isDifferentValues = sliderValue !== this.value
|
||||
|
||||
if (isDifferentValues) {
|
||||
slider.set(this.value)
|
||||
}
|
||||
}
|
||||
|
||||
updated() {
|
||||
this.syncSliderValue()
|
||||
}
|
||||
|
||||
mounted() {
|
||||
const slider = this.$refs.slider as any
|
||||
const isValidValue = this.value !== 'undefined'
|
||||
|
||||
noUiSlider.create(slider, {
|
||||
start: isValidValue ? this.value : this.to,
|
||||
connect: 'lower',
|
||||
step: this.step,
|
||||
range: {
|
||||
min: this.from,
|
||||
max: this.to
|
||||
import { debounce } from 'lodash'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'AppSlider',
|
||||
|
||||
props: {
|
||||
modelValue: { type: Number, default: 0 },
|
||||
label: { type: String, default: '' },
|
||||
from: { type: Number, default: 0 },
|
||||
to: { type: Number, default: 100 },
|
||||
step: { type: Number, default: 1 },
|
||||
changeOnUpdate: { type: Boolean, default: false }
|
||||
},
|
||||
|
||||
emits: ['update:modelValue'],
|
||||
|
||||
setup(props, { emit }) {
|
||||
const { t } = useI18n()
|
||||
const sliderRef = ref<HTMLElement | null>(null)
|
||||
|
||||
const syncSliderValue = debounce(() => {
|
||||
const slider = sliderRef.value as any
|
||||
if (!slider?.noUiSlider) return
|
||||
const sliderValue = parseFloat(slider.noUiSlider.get())
|
||||
if (sliderValue !== props.modelValue) {
|
||||
slider.noUiSlider.set(props.modelValue)
|
||||
}
|
||||
}, 100)
|
||||
|
||||
onMounted(() => {
|
||||
const slider = sliderRef.value as any
|
||||
const isValidValue = props.modelValue !== undefined
|
||||
|
||||
noUiSlider.create(slider, {
|
||||
start: isValidValue ? props.modelValue : props.to,
|
||||
connect: 'lower',
|
||||
step: props.step,
|
||||
range: { min: props.from, max: props.to }
|
||||
})
|
||||
|
||||
const eventChange = props.changeOnUpdate ? 'update' : 'set'
|
||||
slider.noUiSlider.on(eventChange, (values: string[]) => {
|
||||
emit('update:modelValue', parseFloat(values[0] ?? '0'))
|
||||
})
|
||||
})
|
||||
|
||||
slider.noUiSlider.on('slide', (values: string[]) => {
|
||||
this.preValue = parseFloat(values[0])
|
||||
})
|
||||
|
||||
const eventChange = this.changeOnUpdate ? 'update' : 'set'
|
||||
|
||||
slider.noUiSlider.on(eventChange, (values: string[]) => {
|
||||
const value = parseFloat(values[0])
|
||||
onUpdated(syncSliderValue)
|
||||
|
||||
this.$emit('input', value)
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div class="app-slider">
|
||||
<div class="app-slider__content">
|
||||
<p class="mb-2"> { this.$t(this.label) } </p>
|
||||
</div>
|
||||
<div class="center-x">
|
||||
<div ref="slider" class="slider-input"></div>
|
||||
return () => (
|
||||
<div class="app-slider">
|
||||
<div class="app-slider__content">
|
||||
<p class="mb-2">{t(props.label)}</p>
|
||||
</div>
|
||||
<div class="center-x">
|
||||
<div ref={sliderRef} class="slider-input" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,29 +1,22 @@
|
||||
import { AppModule } from '@/store/app'
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import AppIcon from '@/components/app/AppIcon.vue'
|
||||
import { defineComponent } from 'vue'
|
||||
import { useAppStore } from '@/store/app'
|
||||
|
||||
@Component({
|
||||
components: { AppIcon }
|
||||
})
|
||||
export default class BatteryIcon extends Vue {
|
||||
get batteryLevel() {
|
||||
return AppModule.batteryLevel
|
||||
}
|
||||
|
||||
get isCharging() {
|
||||
return AppModule.isCharging
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div class="app-bar-battery">
|
||||
<div class="app-bar-battery-icon">
|
||||
<div
|
||||
class={`app-bar-battery-icon__fill ${this.isCharging ? 'charging' : ''}`}
|
||||
style={{ width: `${this.batteryLevel}%` }}
|
||||
/>
|
||||
{ this.isCharging && <AppIcon name="charge" class="app-bar-battery-icon__charge"/>}
|
||||
export default defineComponent({
|
||||
name: 'BatteryIcon',
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
return () => (
|
||||
<div class="app-bar-battery">
|
||||
<div class="app-bar-battery-icon">
|
||||
<div
|
||||
class={`app-bar-battery-icon__fill ${appStore.isCharging ? 'charging' : ''}`}
|
||||
style={{ width: `${appStore.batteryLevel}%` }}
|
||||
/>
|
||||
{appStore.isCharging && <AppIcon name="charge" class="app-bar-battery-icon__charge" />}
|
||||
</div>
|
||||
<span class="app-bar-battery__percent">{appStore.batteryLevel}%</span>
|
||||
</div>
|
||||
<span class="app-bar-battery__percent"> { this.batteryLevel }% </span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,19 +1,16 @@
|
||||
import { AppModule } from '@/store/app'
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import AppIcon from '@/components/app/AppIcon.vue'
|
||||
import { defineComponent } from 'vue'
|
||||
import { useAppStore } from '@/store/app'
|
||||
|
||||
@Component({
|
||||
components: { AppIcon }
|
||||
})
|
||||
export default class BrightIcon extends Vue {
|
||||
get brightLevel() {
|
||||
return AppModule.brightness
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div class="app-bar__bright">
|
||||
<AppIcon name="brightness" class="brightness-icon"/>
|
||||
{ this.brightLevel }
|
||||
</div>
|
||||
export default defineComponent({
|
||||
name: 'BrightIcon',
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
return () => (
|
||||
<div class="app-bar__bright">
|
||||
<AppIcon name="brightness" class="brightness-icon" />
|
||||
{appStore.brightness}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,46 +1,40 @@
|
||||
import { AppModule } from '@/store/app'
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { defineComponent, ref, computed, onMounted } from 'vue'
|
||||
import { useAppStore } from '@/store/app'
|
||||
|
||||
let elapsedTime = 0
|
||||
let frameCount = 0
|
||||
let lastTime = new Date().getTime()
|
||||
|
||||
@Component
|
||||
export default class FrameRateBlock extends Vue {
|
||||
FPS = 0
|
||||
|
||||
get isShow() {
|
||||
return AppModule.showFrameRate
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.FPS = 0
|
||||
this.drawScene()
|
||||
lastTime = new Date().getTime()
|
||||
}
|
||||
|
||||
drawScene() {
|
||||
const now = new Date().getTime()
|
||||
|
||||
frameCount++
|
||||
elapsedTime += (now - lastTime)
|
||||
|
||||
lastTime = now
|
||||
|
||||
if (elapsedTime >= 1000) {
|
||||
const fps = frameCount
|
||||
frameCount = 0
|
||||
elapsedTime -= 1000
|
||||
|
||||
this.FPS = fps
|
||||
export default defineComponent({
|
||||
name: 'FrameRateBlock',
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
const FPS = ref(0)
|
||||
const isShow = computed(() => appStore.showFrameRate)
|
||||
|
||||
const drawScene = () => {
|
||||
const now = new Date().getTime()
|
||||
frameCount++
|
||||
elapsedTime += now - lastTime
|
||||
lastTime = now
|
||||
|
||||
if (elapsedTime >= 1000) {
|
||||
FPS.value = frameCount
|
||||
frameCount = 0
|
||||
elapsedTime -= 1000
|
||||
}
|
||||
|
||||
if (isShow.value) {
|
||||
requestAnimationFrame(drawScene)
|
||||
}
|
||||
}
|
||||
|
||||
if (this.isShow) {
|
||||
requestAnimationFrame(this.drawScene)
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
FPS.value = 0
|
||||
drawScene()
|
||||
lastTime = new Date().getTime()
|
||||
})
|
||||
|
||||
render() {
|
||||
return <div class="frame-rate-block"> FPS: { this.FPS } </div>
|
||||
return () => <div class="frame-rate-block">FPS: {FPS.value}</div>
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
|
||||
import AppIcon from '@/components/app/AppIcon.vue'
|
||||
import { defineComponent } from 'vue'
|
||||
import AppButton from '@/components/app/AppButton'
|
||||
|
||||
@Component({
|
||||
components: { AppIcon, AppButton },
|
||||
funtional: true
|
||||
})
|
||||
export default class GithubButton extends Vue {
|
||||
render() {
|
||||
return <AppButton
|
||||
fab
|
||||
href="https://github.com/Warinyourself"
|
||||
class="github-link active-block"
|
||||
target="_blank"
|
||||
>
|
||||
<AppIcon name="github"/>
|
||||
</AppButton>
|
||||
export default defineComponent({
|
||||
name: 'GithubButton',
|
||||
setup() {
|
||||
return () => (
|
||||
<AppButton fab href="https://github.com/Warinyourself" class="github-link active-block" target="_blank">
|
||||
<AppIcon name="github" />
|
||||
</AppButton>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,84 +1,42 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
|
||||
import { AppModule } from '@/store/app'
|
||||
import { PageModule } from '@/store/page'
|
||||
|
||||
import AppIcon from '@/components/app/AppIcon.vue'
|
||||
import UserAvatar from '@/components/base/UserAvatar'
|
||||
import UserInput from '@/components/base/UserInput'
|
||||
import SettingsView from '@/components/base/settings/SettingsView'
|
||||
import { defineComponent, computed, onMounted } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAppStore } from '@/store/app'
|
||||
import { usePageStore } from '@/store/page'
|
||||
import UserAvatar from './UserAvatar'
|
||||
import UserInput from './UserInput'
|
||||
import SettingsView from './settings/SettingsView'
|
||||
import { focusInputPassword, getDesktopIcon } from '@/utils/helper'
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
AppIcon,
|
||||
UserInput,
|
||||
UserAvatar,
|
||||
SettingsView
|
||||
}
|
||||
})
|
||||
export default class LoginComponent extends Vue {
|
||||
get theme() {
|
||||
return AppModule.activeTheme
|
||||
}
|
||||
|
||||
get classObject() {
|
||||
return {
|
||||
'login-menu': true
|
||||
}
|
||||
}
|
||||
|
||||
get activeBlock() {
|
||||
return PageModule.activeBlock
|
||||
}
|
||||
|
||||
get currentDesktop() {
|
||||
return AppModule.currentDesktop
|
||||
}
|
||||
|
||||
get currentDesktopIcon() {
|
||||
return getDesktopIcon(this.currentDesktop?.key)
|
||||
}
|
||||
|
||||
get mainTabIndex() {
|
||||
return PageModule.mainTabIndex
|
||||
}
|
||||
export default defineComponent({
|
||||
name: 'LoginComponent',
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
const pageStore = usePageStore()
|
||||
|
||||
get tabs() {
|
||||
const tabs = [this.$t('settings.choice-themes'), this.$t('settings.general')]
|
||||
const hasThemeSettings = AppModule.activeTheme?.settings?.length !== undefined
|
||||
const activeBlock = computed(() => pageStore.activeBlock)
|
||||
const currentDesktopIcon = computed(() => getDesktopIcon(appStore.currentDesktop?.key))
|
||||
|
||||
if (hasThemeSettings) {
|
||||
tabs.splice(1, 0, this.$t('settings.customize-theme'))
|
||||
const openSettingsTab = (event: Event) => {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
pageStore.openBlock({ id: 'settings' })
|
||||
pageStore.openTab({ type: 'settings' })
|
||||
}
|
||||
|
||||
return tabs
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.$nextTick(focusInputPassword)
|
||||
}
|
||||
|
||||
activateTab(index: number) {
|
||||
PageModule.SET_STATE_PAGE({ key: 'mainTabIndex', value: index })
|
||||
}
|
||||
|
||||
openSettingsTab(event: Event) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
|
||||
PageModule.openBlock({ id: 'settings' })
|
||||
PageModule.openTab({ type: 'settings' })
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div class={ `block-${this.activeBlock?.id}` }>
|
||||
<div class={ `active-interface login-view login-view--${PageModule.loginPosition}` }>
|
||||
<AppIcon name={ this.currentDesktopIcon } onClick={ this.openSettingsTab } class='desktop-icon'/>
|
||||
<AppIcon name={ AppModule.currentOs } onClick={ this.openSettingsTab } class='system-icon'/>
|
||||
<UserAvatar />
|
||||
<UserInput />
|
||||
onMounted(() => {
|
||||
void Promise.resolve().then(focusInputPassword)
|
||||
})
|
||||
|
||||
return () => (
|
||||
<div class={`block-${activeBlock.value?.id}`}>
|
||||
<div class={`active-interface login-view login-view--${pageStore.loginPosition}`}>
|
||||
<AppIcon name={currentDesktopIcon.value} onClick={openSettingsTab} class="desktop-icon" />
|
||||
<AppIcon name={appStore.currentOs} onClick={openSettingsTab} class="system-icon" />
|
||||
<UserAvatar />
|
||||
<UserInput />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,89 +1,57 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
|
||||
import { AppModule } from '@/store/app'
|
||||
import { PageModule } from '@/store/page'
|
||||
|
||||
import AppIcon from '@/components/app/AppIcon.vue'
|
||||
import UserAvatar from '@/components/base/UserAvatar'
|
||||
import SettingsView from '@/components/base/settings/SettingsView'
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
AppIcon,
|
||||
UserAvatar,
|
||||
SettingsView
|
||||
}
|
||||
})
|
||||
export default class SettingsComponent extends Vue {
|
||||
get theme() {
|
||||
return AppModule.activeTheme
|
||||
}
|
||||
|
||||
get classObject() {
|
||||
return {
|
||||
'login-menu': true
|
||||
import { defineComponent, computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAppStore } from '@/store/app'
|
||||
import { usePageStore } from '@/store/page'
|
||||
import UserAvatar from './UserAvatar'
|
||||
import SettingsView from './settings/SettingsView'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'SettingsComponent',
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
const pageStore = usePageStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
const isViewThemeOnly = computed(() => appStore.viewThemeOnly)
|
||||
const mainTabIndex = computed(() => pageStore.mainTabIndex)
|
||||
|
||||
const tabs = computed(() => {
|
||||
const list = [t('settings.choice-themes'), t('settings.general')]
|
||||
if (appStore.activeTheme?.settings?.length !== undefined) {
|
||||
list.splice(1, 0, t('settings.customize-theme'))
|
||||
}
|
||||
return list
|
||||
})
|
||||
|
||||
const openLogin = (event: Event) => {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
pageStore.openBlock({ id: 'login' })
|
||||
}
|
||||
}
|
||||
|
||||
get activeBlock() {
|
||||
return PageModule.activeBlock
|
||||
}
|
||||
|
||||
get currentDesktop() {
|
||||
return AppModule.currentDesktop
|
||||
}
|
||||
|
||||
get mainTabIndex() {
|
||||
return PageModule.mainTabIndex
|
||||
}
|
||||
|
||||
get tabs() {
|
||||
const tabs = [this.$t('settings.choice-themes').toString(), this.$t('settings.general').toString()]
|
||||
const hasThemeSettings = AppModule.activeTheme?.settings?.length !== undefined
|
||||
|
||||
if (hasThemeSettings) {
|
||||
tabs.splice(1, 0, this.$t('settings.customize-theme').toString())
|
||||
const activateTab = (index: number) => {
|
||||
pageStore.mainTabIndex = index
|
||||
}
|
||||
|
||||
return tabs
|
||||
}
|
||||
|
||||
get isViewThemeOnly() {
|
||||
return AppModule.viewThemeOnly
|
||||
}
|
||||
|
||||
activateTab(index: number) {
|
||||
PageModule.SET_STATE_PAGE({ key: 'mainTabIndex', value: index })
|
||||
}
|
||||
|
||||
openLogin(event: Event) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
|
||||
PageModule.openBlock({ id: 'login' })
|
||||
}
|
||||
|
||||
generateTab(tab: string, index: number) {
|
||||
const classes = `user-settings-tab ${this.mainTabIndex === index ? 'active' : ''}`
|
||||
|
||||
return <div class={ classes } onClick={() => this.activateTab(index)}> { tab } </div>
|
||||
}
|
||||
|
||||
generateTabs() {
|
||||
return <div class='user-settings-tabs'>
|
||||
{ this.tabs.map(this.generateTab) }
|
||||
</div>
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div class="block-settings login-content-settings">
|
||||
<div class="login-view active-interface">
|
||||
<AppIcon onClick={ this.openLogin } name='collapse' class='system-icon' />
|
||||
const generateTab = (tab: string, index: number) => {
|
||||
const classes = `user-settings-tab ${mainTabIndex.value === index ? 'active' : ''}`
|
||||
return (
|
||||
<div class={classes} onClick={() => activateTab(index)}>
|
||||
{tab}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
{ !this.isViewThemeOnly && <UserAvatar /> }
|
||||
{ this.generateTabs() }
|
||||
<SettingsView />
|
||||
return () => (
|
||||
<div class="block-settings login-content-settings">
|
||||
<div class="login-view active-interface">
|
||||
<AppIcon onClick={openLogin} name="collapse" class="system-icon" />
|
||||
{!isViewThemeOnly.value && <UserAvatar />}
|
||||
<div class="user-settings-tabs">{tabs.value.map(generateTab)}</div>
|
||||
<SettingsView />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,19 +1,18 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { PageModule } from '@/store/page'
|
||||
import AppIcon from '@/components/app/AppIcon.vue'
|
||||
import ShutdownMenu from '@/components/base/ShutdownMenu'
|
||||
import { defineComponent } from 'vue'
|
||||
import { systemActionsObject } from '@/utils/helper'
|
||||
import ShutdownMenu from './ShutdownMenu'
|
||||
|
||||
@Component({
|
||||
components: { AppIcon, ShutdownMenu }
|
||||
})
|
||||
export default class ShutdownBlock extends Vue {
|
||||
render() {
|
||||
return <div class="shutdown-block active-block">
|
||||
<ShutdownMenu />
|
||||
<div class="shutdown-button active-interface" onClick={ systemActionsObject.shutdown }>
|
||||
<AppIcon name="shutdown" />
|
||||
export default defineComponent({
|
||||
name: 'ShutdownButton',
|
||||
setup() {
|
||||
return () => (
|
||||
<div class="shutdown-block active-block">
|
||||
<ShutdownMenu />
|
||||
<div class="shutdown-button active-interface" onClick={systemActionsObject.shutdown}>
|
||||
<AppIcon name="shutdown" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,40 +1,27 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
|
||||
import AppIcon from '@/components/app/AppIcon.vue'
|
||||
import { defineComponent, computed } from 'vue'
|
||||
import { systemActionsObject } from '@/utils/helper'
|
||||
import { LightdmHandler } from '@/utils/lightdm'
|
||||
|
||||
@Component({
|
||||
components: { AppIcon }
|
||||
})
|
||||
export default class ShutdownMenu extends Vue {
|
||||
get actions() {
|
||||
return [
|
||||
{
|
||||
icon: 'restart',
|
||||
show: LightdmHandler.canRestart,
|
||||
callback: systemActionsObject.restart
|
||||
},
|
||||
{
|
||||
icon: 'suspend',
|
||||
show: LightdmHandler.canSuspend,
|
||||
callback: systemActionsObject.suspend
|
||||
},
|
||||
{
|
||||
icon: 'hibernate',
|
||||
show: LightdmHandler.canHibernate,
|
||||
callback: systemActionsObject.hibernate
|
||||
}
|
||||
].filter(({ show }) => show)
|
||||
}
|
||||
export default defineComponent({
|
||||
name: 'ShutdownMenu',
|
||||
setup() {
|
||||
const actions = computed(() =>
|
||||
[
|
||||
{ icon: 'restart', show: LightdmHandler.canRestart, callback: systemActionsObject.restart },
|
||||
{ icon: 'suspend', show: LightdmHandler.canSuspend, callback: systemActionsObject.suspend },
|
||||
{ icon: 'hibernate', show: LightdmHandler.canHibernate, callback: systemActionsObject.hibernate }
|
||||
].filter(({ show }) => show)
|
||||
)
|
||||
|
||||
render() {
|
||||
return <div class="shutdown-menu active-interface">
|
||||
{ this.actions.map((action) => {
|
||||
return <div class="shutdown-item" onClick={ action.callback }>
|
||||
<AppIcon name={ action.icon } />
|
||||
</div>
|
||||
})}
|
||||
</div>
|
||||
return () => (
|
||||
<div class="shutdown-menu active-interface">
|
||||
{actions.value.map((action) => (
|
||||
<div class="shutdown-item" onClick={action.callback}>
|
||||
<AppIcon name={action.icon} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,57 +1,36 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
|
||||
import { AppModule } from '@/store/app'
|
||||
import AppIcon from '@/components/app/AppIcon.vue'
|
||||
import { LightdmUsers } from '@/models/lightdm'
|
||||
import { PageModule } from '@/store/page'
|
||||
import { defineComponent, computed } from 'vue'
|
||||
import { useAppStore } from '@/store/app'
|
||||
import { usePageStore } from '@/store/page'
|
||||
import timer from '@/utils/time'
|
||||
|
||||
@Component({
|
||||
components: { AppIcon }
|
||||
})
|
||||
export default class UserAvatar extends Vue {
|
||||
get currentTime() {
|
||||
return this.isOpenSettings ? timer.longTime : timer.shortTime
|
||||
}
|
||||
|
||||
get isOpenSettings() {
|
||||
return PageModule.isOpenBlock('settings')
|
||||
}
|
||||
|
||||
get isSupportFullApi() {
|
||||
return AppModule.isSupportFullApi
|
||||
}
|
||||
|
||||
get locale() {
|
||||
return PageModule.locale
|
||||
}
|
||||
|
||||
get user() {
|
||||
return AppModule.currentUser
|
||||
import type { LightdmUsers } from '@/models/lightdm'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserAvatar',
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
const pageStore = usePageStore()
|
||||
|
||||
const isOpenSettings = computed(() => pageStore.isOpenBlock('settings'))
|
||||
const currentTime = computed(() => isOpenSettings.value ? timer.longTime : timer.shortTime)
|
||||
|
||||
const buildUserAvatar = (image: string | undefined) =>
|
||||
image
|
||||
? <img class="user-avatar" src={image} />
|
||||
: <AppIcon name="user" />
|
||||
|
||||
const buildUser = (user: LightdmUsers) => (
|
||||
<div class="user-choice" key={user.username}>
|
||||
<p class="time">{appStore.isSupportFullApi ? '' : currentTime.value}</p>
|
||||
{buildUserAvatar(user?.image)}
|
||||
<div class="user-name">{user?.display_name}</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
return () => (
|
||||
<transition-group tag="div" name="fade-bottom" class="transition-group">
|
||||
{appStore.users.filter(({ username }) => username === appStore.currentUser?.username).map(buildUser)}
|
||||
</transition-group>
|
||||
)
|
||||
}
|
||||
|
||||
get users() {
|
||||
return AppModule.users
|
||||
}
|
||||
|
||||
buildUserAvatar(image: string | undefined) {
|
||||
const defaultAvatar = <AppIcon name='user'/>
|
||||
const userAvatar = <img class='user-avatar' src={image} />
|
||||
|
||||
return image ? userAvatar : defaultAvatar
|
||||
}
|
||||
|
||||
buildUser(user: LightdmUsers) {
|
||||
return <div class='user-choice' key={ user.username }>
|
||||
<p class='time'> { this.isSupportFullApi ? '' : this.currentTime } </p>
|
||||
{ this.buildUserAvatar(user?.image) }
|
||||
<div class='user-name'> { user?.display_name } </div>
|
||||
</div>
|
||||
}
|
||||
|
||||
render() {
|
||||
return <transition-group tag="div" name="fade-bottom" class="transition-group">
|
||||
{ this.users.filter(({ username }) => username === this.user?.username).map(this.buildUser) }
|
||||
</transition-group>
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,72 +1,52 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
|
||||
import { AppModule } from '@/store/app'
|
||||
import AppIcon from '@/components/app/AppIcon.vue'
|
||||
import { PageModule } from '@/store/page'
|
||||
|
||||
@Component({
|
||||
components: { AppIcon }
|
||||
})
|
||||
export default class UserInput extends Vue {
|
||||
logging = false
|
||||
|
||||
get user() {
|
||||
return AppModule.currentUser
|
||||
}
|
||||
|
||||
get passwordValue(): string {
|
||||
return AppModule.password
|
||||
import { defineComponent } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAppStore } from '@/store/app'
|
||||
import { usePageStore } from '@/store/page'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserInput',
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
const pageStore = usePageStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
const openSettings = (event: Event) => {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
pageStore.openBlock({ id: 'settings' })
|
||||
}
|
||||
|
||||
const handleKeyup = (event: KeyboardEvent) => {
|
||||
appStore.password = (event.target as HTMLInputElement)?.value || ''
|
||||
}
|
||||
|
||||
return () => (
|
||||
<div class="user-input">
|
||||
<AppIcon class="settings-button" name="settings" onClick={openSettings} />
|
||||
|
||||
<input
|
||||
id="password"
|
||||
type={appStore.showPassword ? 'text' : 'password'}
|
||||
name="password"
|
||||
autocomplete="on"
|
||||
autofocus
|
||||
class="mousetrap"
|
||||
placeholder={t('text.password')}
|
||||
onKeyup={handleKeyup}
|
||||
value={appStore.password}
|
||||
/>
|
||||
|
||||
<AppIcon
|
||||
class={['icon icon-eye', { hide: !appStore.showPassword }]}
|
||||
name="eye"
|
||||
onClick={() => appStore.toggleShowPassword()}
|
||||
/>
|
||||
|
||||
<button class="user-input-login" onClick={() => appStore.login()}>
|
||||
<AppIcon name="arrow" />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
get showPassword(): boolean {
|
||||
return AppModule.showPassword
|
||||
}
|
||||
|
||||
login(): void {
|
||||
AppModule.login()
|
||||
}
|
||||
|
||||
handleKeyup(event: KeyboardEvent): void {
|
||||
AppModule.SET_STATE_APP({ key: 'password', value: (event.target as HTMLInputElement)?.value || '' })
|
||||
}
|
||||
|
||||
openSettings(event: Event): void {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
|
||||
PageModule.openBlock({ id: 'settings' })
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div class='user-input'>
|
||||
<AppIcon class='settings-button' name='settings' onClick={ this.openSettings } />
|
||||
|
||||
<input
|
||||
id='password'
|
||||
type={ this.showPassword ? 'text' : 'password'}
|
||||
name='password'
|
||||
autocomplete='on'
|
||||
autofocus
|
||||
ref='password'
|
||||
class='mousetrap'
|
||||
placeholder={ this.$t('text.password').toString() }
|
||||
onKeyup={this.handleKeyup}
|
||||
value={this.passwordValue}
|
||||
readonly={this.logging}
|
||||
/>
|
||||
|
||||
<AppIcon
|
||||
class={ ['icon icon-eye', { hide: !this.showPassword }] }
|
||||
name='eye'
|
||||
onClick={ AppModule.toggleShowPassword }
|
||||
/>
|
||||
|
||||
<button
|
||||
class='user-input-login'
|
||||
onClick={this.login}
|
||||
>
|
||||
<AppIcon name='arrow' />
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,130 +1,128 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
|
||||
import { AppModule } from '@/store/app'
|
||||
import { AppInputButton, AppInputColor, AppInputThemeGeneral, AppInputThemePalette, AppInputThemeSelector, AppInputThemeSlider, AppTheme } from '@/models/app'
|
||||
|
||||
import { defineComponent, computed, onUpdated, type VNode } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAppStore } from '@/store/app'
|
||||
import AppSlider from '@/components/app/AppSlider'
|
||||
import AppButton from '@/components/app/AppButton'
|
||||
import AppCheckbox from '@/components/app/AppCheckbox'
|
||||
import AppSelector from '@/components/app/AppSelector'
|
||||
import AppColorSelector from '@/components/app/AppColorSelector'
|
||||
import AppPaletteSelector from '@/components/app/AppPaletteSelector'
|
||||
import { Debounce } from '@/utils/helper'
|
||||
import { Route } from 'vue-router/types/router'
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
AppSlider,
|
||||
AppButton,
|
||||
AppSelector,
|
||||
AppColorSelector,
|
||||
AppPaletteSelector
|
||||
}
|
||||
})
|
||||
export default class SettingsCustom extends Vue {
|
||||
syncThemeWithQuery = true
|
||||
|
||||
get theme() {
|
||||
return AppModule.activeTheme as AppTheme
|
||||
}
|
||||
|
||||
get inputs() {
|
||||
return this.theme.settings || []
|
||||
}
|
||||
|
||||
@Debounce()
|
||||
updateQuery() {
|
||||
if (this.syncThemeWithQuery) {
|
||||
AppModule.syncStoreWithQuery()
|
||||
import { createDebounce } from '@/utils/helper'
|
||||
import type {
|
||||
AppInputButton,
|
||||
AppInputColor,
|
||||
AppInputThemeGeneral,
|
||||
AppInputThemePalette,
|
||||
AppInputThemeSelector,
|
||||
AppInputThemeSlider
|
||||
} from '@/models/app'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'SettingsCustom',
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
const inputs = computed(() => appStore.activeTheme?.settings || [])
|
||||
const debouncedSync = createDebounce(() => appStore.syncStoreWithQuery(), 300)
|
||||
|
||||
onUpdated(() => debouncedSync())
|
||||
|
||||
const buildSlider = (input: AppInputThemeSlider) => {
|
||||
const { label, value, options: { step, min: from, max: to } } = input
|
||||
return (
|
||||
<AppSlider
|
||||
to={to}
|
||||
step={step}
|
||||
from={from}
|
||||
label={label}
|
||||
modelValue={value as number}
|
||||
onUpdate:modelValue={(v: number) => {
|
||||
appStore.changeSettingsThemeInput({ key: input.name, value: v })
|
||||
input.callback?.(v)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
buildSlider(input: AppInputThemeSlider) {
|
||||
const { label, value, options: { step, min: from, max: to, changeOnUpdate } } = input
|
||||
const props = { to, step, from, label, value, changeOnUpdate }
|
||||
const handler = (value: number) => {
|
||||
AppModule.changeSettingsThemeInput({ key: input.name, value })
|
||||
|
||||
if (input.callback) {
|
||||
input.callback(value)
|
||||
}
|
||||
const buildSelector = (input: AppInputThemeSelector) => {
|
||||
const { label, value, values } = input
|
||||
return (
|
||||
<AppSelector
|
||||
label={label}
|
||||
items={[...values]}
|
||||
modelValue={value as string}
|
||||
onUpdate:modelValue={(v: string) => {
|
||||
appStore.changeSettingsThemeInput({ key: input.name, value: v })
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return <AppSlider {...{ props, on: { input: handler } } } />
|
||||
}
|
||||
|
||||
buildSelector(input: AppInputThemeSelector) {
|
||||
const { label, value, values } = input
|
||||
const props = { label, value, items: values }
|
||||
const handler = (value: number) => {
|
||||
AppModule.changeSettingsThemeInput({ key: input.name, value })
|
||||
const buildColor = (input: AppInputThemeGeneral) => {
|
||||
const { label, value, options } = input
|
||||
return (
|
||||
<AppColorSelector
|
||||
class={options?.class}
|
||||
label={label}
|
||||
modelValue={value as string}
|
||||
onUpdate:modelValue={(color: AppInputColor) => {
|
||||
appStore.changeSettingsThemeInput({ key: input.name, value: color.hex })
|
||||
input.callback?.(color.hex)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return <AppSelector {...{ props, on: { input: handler } } } />
|
||||
}
|
||||
|
||||
buildColor(input: AppInputThemeGeneral) {
|
||||
const { label, value, options } = input
|
||||
const props = { label, value }
|
||||
const handler = (color: AppInputColor) => {
|
||||
AppModule.changeSettingsThemeInput({ key: input.name, value: color.hex })
|
||||
|
||||
if (input.callback) {
|
||||
input.callback(color.hex)
|
||||
}
|
||||
const buildCheckbox = (input: AppInputThemeGeneral) => {
|
||||
const { label, value } = input
|
||||
return (
|
||||
<AppCheckbox
|
||||
label={t(label)}
|
||||
modelValue={value as boolean}
|
||||
onUpdate:modelValue={(v: boolean) => {
|
||||
appStore.changeSettingsThemeInput({ key: input.name, value: v })
|
||||
input.callback?.(v)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return <AppColorSelector {...{ props, class: options?.class, on: { input: handler } } } />
|
||||
}
|
||||
|
||||
buildCheckbox(input: AppInputThemeGeneral) {
|
||||
const { label, value } = input
|
||||
const props = { label: this.$t(label), value }
|
||||
const handler = (value: boolean) => {
|
||||
AppModule.changeSettingsThemeInput({ key: input.name, value })
|
||||
|
||||
if (input.callback) {
|
||||
input.callback(value)
|
||||
}
|
||||
}
|
||||
|
||||
return <AppCheckbox {...{ props, on: { input: handler } } }/>
|
||||
}
|
||||
|
||||
buildPalette(input: AppInputThemePalette) {
|
||||
const { label, value, values } = input
|
||||
const props = { label, value, values }
|
||||
const handler = (value: boolean) => {
|
||||
AppModule.changeSettingsThemeInput({ key: input.name, value })
|
||||
const buildPalette = (input: AppInputThemePalette) => {
|
||||
const { label, value, values } = input
|
||||
return (
|
||||
<AppPaletteSelector
|
||||
label={label}
|
||||
modelValue={value as number}
|
||||
values={values}
|
||||
onUpdate:modelValue={(v: number) => {
|
||||
appStore.changeSettingsThemeInput({ key: input.name, value: v })
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return <AppPaletteSelector {...{ props, on: { input: handler } } } />
|
||||
}
|
||||
|
||||
buildButton(input: AppInputButton) {
|
||||
return <AppButton onClick={ input.callback }> { this.$t(input.label) } </AppButton>
|
||||
}
|
||||
|
||||
buildUnknown(input: AppInputThemeGeneral) {
|
||||
return <div> Doesn't exist input - { input.type } </div>
|
||||
}
|
||||
|
||||
updated() {
|
||||
this.updateQuery()
|
||||
}
|
||||
|
||||
render() {
|
||||
const builderObject = {
|
||||
color: this.buildColor,
|
||||
slider: this.buildSlider,
|
||||
checkbox: this.buildCheckbox,
|
||||
palette: this.buildPalette,
|
||||
button: this.buildButton,
|
||||
selector: this.buildSelector
|
||||
const buildButton = (input: AppInputButton) => (
|
||||
<AppButton onClick={input.callback}>{t(input.label)}</AppButton>
|
||||
)
|
||||
|
||||
const buildUnknown = (input: AppInputThemeGeneral) => (
|
||||
<div>Doesn't exist input - {input.type}</div>
|
||||
)
|
||||
|
||||
const builderObject: Record<string, (input: any) => VNode> = {
|
||||
color: buildColor,
|
||||
slider: buildSlider,
|
||||
checkbox: buildCheckbox,
|
||||
palette: buildPalette,
|
||||
button: buildButton,
|
||||
selector: buildSelector
|
||||
}
|
||||
|
||||
return <div class='user-settings-custom'>
|
||||
{ this.inputs.map((input) => (builderObject[input.type] || this.buildUnknown)(input as any)) }
|
||||
</div>
|
||||
return () => (
|
||||
<div class="user-settings-custom">
|
||||
{inputs.value.map((input) => (builderObject[input.type] || buildUnknown)(input))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,42 +1,33 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { defineComponent, computed } from 'vue'
|
||||
import { useAppStore } from '@/store/app'
|
||||
|
||||
import { AppModule } from '@/store/app'
|
||||
const themeImages = import.meta.glob('@/assets/images/themes/*/index.png', { eager: true, import: 'default' }) as Record<string, string>
|
||||
|
||||
@Component
|
||||
export default class SettingsThemes extends Vue {
|
||||
get themes() {
|
||||
return AppModule.themes
|
||||
}
|
||||
|
||||
get activeTheme() {
|
||||
return AppModule.activeTheme
|
||||
}
|
||||
|
||||
setImage(name: string) {
|
||||
let url
|
||||
|
||||
try {
|
||||
url = require(`@/assets/images/themes/${name}/index.png`)
|
||||
} catch {
|
||||
url = 'notFound'
|
||||
}
|
||||
|
||||
return url
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div class='user-settings-themes'>
|
||||
{
|
||||
this.themes.map(theme => {
|
||||
const isActiveTheme = theme.name === this.activeTheme.name
|
||||
function getThemeImage(name: string): string {
|
||||
const key = Object.keys(themeImages).find((k) => k.includes(`/${name.toLowerCase()}/`))
|
||||
return key ? (themeImages[key] ?? 'notFound') : 'notFound'
|
||||
}
|
||||
|
||||
return <img
|
||||
class={`user-settings-theme ${isActiveTheme ? 'active' : ''}`}
|
||||
onClick={() => AppModule.changeTheme(theme.name)}
|
||||
src={this.setImage(theme.name.toLowerCase())}
|
||||
/>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
export default defineComponent({
|
||||
name: 'SettingsThemes',
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
const themes = computed(() => appStore.themes)
|
||||
const activeTheme = computed(() => appStore.activeTheme)
|
||||
|
||||
return () => (
|
||||
<div class="user-settings-themes">
|
||||
{/* {themes.value.map((theme) => {
|
||||
const isActive = theme.name === activeTheme.value.name
|
||||
return (
|
||||
<img
|
||||
class={`user-settings-theme ${isActive ? 'active' : ''}`}
|
||||
onClick={() => appStore.changeTheme(theme.name)}
|
||||
src={getThemeImage(theme.name)}
|
||||
/>
|
||||
)
|
||||
})} */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,45 +1,30 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
|
||||
import { AppModule } from '@/store/app'
|
||||
import AppIcon from '@/components/app/AppIcon.vue'
|
||||
import SettingsThemes from '@/components/base/settings/SettingsThemes'
|
||||
import SettingsCustom from '@/components/base/settings/SettingsCustom'
|
||||
import SettingsGeneral from '@/components/base/settings/general/SettingsGeneral'
|
||||
import { PageModule } from '@/store/page'
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
AppIcon,
|
||||
SettingsThemes,
|
||||
SettingsCustom,
|
||||
SettingsGeneral
|
||||
}
|
||||
})
|
||||
export default class SettingsView extends Vue {
|
||||
get mainTabIndex() {
|
||||
return PageModule.mainTabIndex
|
||||
}
|
||||
|
||||
get user() {
|
||||
return AppModule.currentUser
|
||||
}
|
||||
|
||||
get users() {
|
||||
return AppModule.users
|
||||
}
|
||||
|
||||
render() {
|
||||
const mapTabs = [<SettingsThemes />, <SettingsGeneral />]
|
||||
const hasThemeSettings = AppModule.activeTheme?.settings?.length
|
||||
|
||||
if (hasThemeSettings) {
|
||||
mapTabs.splice(1, 0, <SettingsCustom />)
|
||||
import { defineComponent, computed } from 'vue'
|
||||
import { useAppStore } from '@/store/app'
|
||||
import { usePageStore } from '@/store/page'
|
||||
import SettingsThemes from './SettingsThemes'
|
||||
import SettingsCustom from './SettingsCustom'
|
||||
import SettingsGeneral from './general/SettingsGeneral'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'SettingsView',
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
const pageStore = usePageStore()
|
||||
const mainTabIndex = computed(() => pageStore.mainTabIndex)
|
||||
|
||||
return () => {
|
||||
const mapTabs = [<SettingsThemes />, <SettingsGeneral />]
|
||||
const hasThemeSettings = appStore.activeTheme?.settings?.length
|
||||
|
||||
if (hasThemeSettings) {
|
||||
mapTabs.splice(1, 0, <SettingsCustom />)
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="user-settings">
|
||||
<div key={mainTabIndex.value}>{mapTabs[mainTabIndex.value]}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const activeTab = <div key={this.mainTabIndex}> { mapTabs[this.mainTabIndex] } </div>
|
||||
|
||||
return <div class='user-settings'>
|
||||
{ activeTab }
|
||||
</div>
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,46 +1,39 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { defineComponent } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAppStore } from '@/store/app'
|
||||
import AppCheckbox from '@/components/app/AppCheckbox'
|
||||
import { AppModule } from '@/store/app'
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
AppCheckbox
|
||||
}
|
||||
})
|
||||
export default class SettingsCheckboxes extends Vue {
|
||||
get bodyClass() {
|
||||
return AppModule.bodyClass
|
||||
}
|
||||
|
||||
buildCheckbox(name: string) {
|
||||
return <AppCheckbox
|
||||
label={ this.$t(`settings.${name}`) }
|
||||
value={ this.bodyClass[name] }
|
||||
onInput={ (value: boolean) => {
|
||||
AppModule.CHANGE_BODY_CLASS({ key: name, value })
|
||||
AppModule.syncStoreWithQuery()
|
||||
}}
|
||||
/>
|
||||
}
|
||||
|
||||
generateRandomTheme(value: boolean) {
|
||||
AppModule.SET_STATE_APP({ key: 'generateRandomThemes', value })
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div class="grid-two">
|
||||
<h2 class="title"> { this.$t('settings.performance') } </h2>
|
||||
{ this.buildCheckbox('blur') }
|
||||
{ this.buildCheckbox('show-framerate') }
|
||||
{ this.buildCheckbox('no-transition') }
|
||||
{ this.buildCheckbox('only-ui') }
|
||||
export default defineComponent({
|
||||
name: 'SettingsCheckboxes',
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
const buildCheckbox = (name: string) => (
|
||||
<AppCheckbox
|
||||
inline={ true }
|
||||
label={ this.$t('settings.generate-random-theme') }
|
||||
value={ AppModule.generateRandomThemes }
|
||||
onInput={ this.generateRandomTheme }
|
||||
label={t(`settings.${name}`)}
|
||||
modelValue={appStore.bodyClass[name]}
|
||||
onUpdate:modelValue={(value: boolean) => {
|
||||
appStore.changeBodyClass({ key: name, value })
|
||||
appStore.syncStoreWithQuery()
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
return () => (
|
||||
<div class="grid-two">
|
||||
<h2 class="title">{t('settings.performance')}</h2>
|
||||
{buildCheckbox('blur')}
|
||||
{buildCheckbox('show-framerate')}
|
||||
{buildCheckbox('no-transition')}
|
||||
{buildCheckbox('only-ui')}
|
||||
<AppCheckbox
|
||||
inline={true}
|
||||
label={t('settings.generate-random-theme')}
|
||||
modelValue={appStore.generateRandomThemes}
|
||||
onUpdate:modelValue={(value: boolean) => { appStore.generateRandomThemes = value }}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,60 +1,44 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
|
||||
import { AppModule } from '@/store/app'
|
||||
import AppIcon from '@/components/app/AppIcon.vue'
|
||||
import { defineComponent, computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAppStore } from '@/store/app'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import AppButton from '@/components/app/AppButton'
|
||||
import SettingsUsers from './SettingsUsers'
|
||||
import SettingsHotkeys from './SettingsHotkeys'
|
||||
import SettingsSelectors from './SettingsSelectors'
|
||||
import SettingsCheckboxes from './SettingsCheckboxes'
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
AppIcon,
|
||||
SettingsUsers,
|
||||
SettingsHotkeys,
|
||||
SettingsSelectors,
|
||||
SettingsCheckboxes
|
||||
}
|
||||
})
|
||||
export default class SettingsGeneral extends Vue {
|
||||
get showFrameRate() {
|
||||
return AppModule.showFrameRate
|
||||
}
|
||||
|
||||
get isViewThemeOnly() {
|
||||
return AppModule.viewThemeOnly
|
||||
}
|
||||
|
||||
resetSettings() {
|
||||
localStorage.clear()
|
||||
AppModule.setUpSettings()
|
||||
|
||||
const hasQyery = Object.keys(this.$route.query).length
|
||||
if (hasQyery) { this.$router.replace({}) }
|
||||
window.location.reload()
|
||||
}
|
||||
|
||||
changeTheme() {
|
||||
throw Error('Change theme')
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div class='user-settings-general'>
|
||||
<SettingsCheckboxes />
|
||||
<SettingsSelectors />
|
||||
|
||||
{ !this.isViewThemeOnly && <SettingsUsers /> }
|
||||
<SettingsHotkeys />
|
||||
|
||||
<div class="help-block">
|
||||
<AppButton onClick={ this.resetSettings } block class="mb-2">
|
||||
{ this.$t('settings.reset-settings') }
|
||||
</AppButton>
|
||||
<AppButton onClick={ this.changeTheme } block>
|
||||
{ this.$t('settings.change-theme') }
|
||||
</AppButton>
|
||||
export default defineComponent({
|
||||
name: 'SettingsGeneral',
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const isViewThemeOnly = computed(() => appStore.viewThemeOnly)
|
||||
|
||||
const resetSettings = () => {
|
||||
localStorage.clear()
|
||||
appStore.setUpSettings()
|
||||
if (Object.keys(route.query).length) {
|
||||
router.replace({})
|
||||
}
|
||||
window.location.reload()
|
||||
}
|
||||
|
||||
return () => (
|
||||
<div class="user-settings-general">
|
||||
<SettingsCheckboxes />
|
||||
<SettingsSelectors />
|
||||
{!isViewThemeOnly.value && <SettingsUsers />}
|
||||
<SettingsHotkeys />
|
||||
<div class="help-block">
|
||||
<AppButton onClick={resetSettings} block class="mb-2">
|
||||
{t('settings.reset-settings')}
|
||||
</AppButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,21 +1,27 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { hotkeys, hotkeysType } from '@/utils/hotkeys'
|
||||
import { defineComponent } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { hotkeys } from '@/utils/hotkeys'
|
||||
import type { hotkeysType } from '@/utils/hotkeys'
|
||||
|
||||
@Component
|
||||
export default class SettingsHotkeys extends Vue {
|
||||
buildHotKeyBlock({ keys, title }: hotkeysType) {
|
||||
return <div class="settings-hotkey">
|
||||
<p class="settings-hotkey-title"> { this.$t(title) }: </p>
|
||||
<div class="settings-hotkey-blocks">
|
||||
{ keys.map((key) => <div class="settings-hotkey-block"> { key } </div>) }
|
||||
export default defineComponent({
|
||||
name: 'SettingsHotkeys',
|
||||
setup() {
|
||||
const { t } = useI18n()
|
||||
|
||||
const buildHotKeyBlock = ({ keys, title }: hotkeysType) => (
|
||||
<div class="settings-hotkey">
|
||||
<p class="settings-hotkey-title">{t(title)}:</p>
|
||||
<div class="settings-hotkey-blocks">
|
||||
{keys.map((key) => <div class="settings-hotkey-block">{key}</div>)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
)
|
||||
|
||||
render() {
|
||||
return <div class="hotkeys-section">
|
||||
<h2 class="title mb-3"> { this.$t('settings.keyboard.title') }: </h2>
|
||||
{ hotkeys.map(this.buildHotKeyBlock) }
|
||||
</div>
|
||||
return () => (
|
||||
<div class="hotkeys-section">
|
||||
<h2 class="title mb-3">{t('settings.keyboard.title')}:</h2>
|
||||
{hotkeys.map(buildHotKeyBlock)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,108 +1,107 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import AppSelector, { AppSelectorProps as SProps } from '@/components/app/AppSelector'
|
||||
import { defineComponent, computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAppStore } from '@/store/app'
|
||||
import { usePageStore } from '@/store/page'
|
||||
import { useRouter } from 'vue-router'
|
||||
import AppSelector from '@/components/app/AppSelector'
|
||||
import AppSlider from '@/components/app/AppSlider'
|
||||
import { Debounce, generateDesktopIcons, languageMap, setCSSVariable } from '@/utils/helper'
|
||||
import { AppModule } from '@/store/app'
|
||||
import { PageModule } from '@/store/page'
|
||||
import { createDebounce, generateDesktopIcons, languageMap, setCSSVariable } from '@/utils/helper'
|
||||
import { osList } from '@/utils/constant'
|
||||
import { LoginPosition } from '@/models/page'
|
||||
import { AppInputThemeSlider, AppInputThemeValue } from '@/models/app'
|
||||
import type { LoginPosition } from '@/models/page'
|
||||
|
||||
@Component
|
||||
export default class SettingsSelectors extends Vue {
|
||||
get isViewThemeOnly() {
|
||||
return AppModule.viewThemeOnly
|
||||
}
|
||||
export default defineComponent({
|
||||
name: 'SettingsSelectors',
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
const pageStore = usePageStore()
|
||||
const { t, locale } = useI18n()
|
||||
const router = useRouter()
|
||||
|
||||
get languageList() {
|
||||
return PageModule.languages.map((language) => ({
|
||||
text: languageMap[language],
|
||||
value: language
|
||||
}))
|
||||
}
|
||||
const isViewThemeOnly = computed(() => appStore.viewThemeOnly)
|
||||
const isSupportFullApi = computed(() => appStore.isSupportFullApi)
|
||||
|
||||
get menuPositionItems() {
|
||||
const positions = ['top', 'left', 'right', 'bottom', 'center']
|
||||
return positions.map(word => ({
|
||||
value: word,
|
||||
text: this.$t(`settings.login-position.${word}`).toString()
|
||||
}))
|
||||
}
|
||||
const languageList = computed(() =>
|
||||
pageStore.languages.map((lang) => ({ text: languageMap[lang] || lang, value: lang }))
|
||||
)
|
||||
|
||||
get menuPositionValue() {
|
||||
return {
|
||||
value: PageModule.loginPosition,
|
||||
text: this.$t(`settings.login-position.${PageModule.loginPosition}`).toString()
|
||||
}
|
||||
}
|
||||
|
||||
get isSupportFullApi() {
|
||||
return AppModule.isSupportFullApi
|
||||
}
|
||||
|
||||
get zoomSlider() {
|
||||
return this.buildSlider({
|
||||
label: this.$t('input.zoom-interface').toString(),
|
||||
value: AppModule.zoom,
|
||||
options: {
|
||||
min: 0.5,
|
||||
max: 2,
|
||||
step: 0.1
|
||||
},
|
||||
callback: this.updateZoom
|
||||
})
|
||||
}
|
||||
|
||||
changeLanguage(value: string) {
|
||||
this.$i18n.locale = value
|
||||
localStorage.setItem('language', value)
|
||||
PageModule.SET_STATE_PAGE({ key: 'language', value })
|
||||
}
|
||||
const menuPositionItems = computed(() =>
|
||||
['top', 'left', 'right', 'bottom', 'center'].map((word) => ({
|
||||
value: word,
|
||||
text: t(`settings.login-position.${word}`)
|
||||
}))
|
||||
)
|
||||
|
||||
changeLoginPosition(position: string) {
|
||||
localStorage.setItem('loginPosition', position)
|
||||
PageModule.SET_STATE_PAGE({ key: 'loginPosition', value: position as LoginPosition })
|
||||
}
|
||||
|
||||
changeDesktop(value: string) {
|
||||
AppModule.SAVE_STATE_APP({ key: 'desktop', value })
|
||||
}
|
||||
const menuPositionValue = computed(() => ({
|
||||
value: pageStore.loginPosition,
|
||||
text: t(`settings.login-position.${pageStore.loginPosition}`)
|
||||
}))
|
||||
|
||||
changeOs(value: string) {
|
||||
AppModule.SAVE_STATE_APP({ key: 'currentOs', value })
|
||||
}
|
||||
const changeLanguage = (value: string) => {
|
||||
locale.value = value
|
||||
localStorage.setItem('language', value)
|
||||
pageStore.language = value
|
||||
}
|
||||
|
||||
buildSelector(labelI18n: SProps['label'], items: SProps['items'], value: SProps['value'], callback: (value: string) => void) {
|
||||
const label = this.$t(`settings.${labelI18n}`)
|
||||
return <AppSelector
|
||||
label={ label }
|
||||
items={ items }
|
||||
value={ value }
|
||||
onInput={ callback }
|
||||
/>
|
||||
}
|
||||
const changeLoginPosition = (position: string) => {
|
||||
localStorage.setItem('loginPosition', position)
|
||||
pageStore.loginPosition = position as LoginPosition
|
||||
}
|
||||
|
||||
buildSlider(input: Omit<AppInputThemeSlider, 'type' | 'name' | 'icon'>) {
|
||||
const { label, value, callback, options: { step, min: from, max: to } } = input
|
||||
const props = { to, step, from, label, value }
|
||||
const changeDesktop = (value: string) => {
|
||||
appStore.saveStateApp({ key: 'desktop', value })
|
||||
}
|
||||
|
||||
return <AppSlider {...{ props, on: { input: callback } } } />
|
||||
}
|
||||
const changeOs = (value: string) => {
|
||||
appStore.saveStateApp({ key: 'currentOs', value })
|
||||
}
|
||||
|
||||
@Debounce(100)
|
||||
updateZoom(value: AppInputThemeValue) {
|
||||
setCSSVariable('--zoom', value + '' || '1')
|
||||
AppModule.SET_STATE_APP({ key: 'zoom', value: parseFloat(value + '') })
|
||||
}
|
||||
const updateZoom = createDebounce((value: number) => {
|
||||
setCSSVariable('--zoom', value + '' || '1')
|
||||
appStore.zoom = parseFloat(value + '')
|
||||
}, 100)
|
||||
|
||||
render() {
|
||||
return <div class="grid-two">
|
||||
<h2 class="title"> { this.$t('settings.title') } </h2>
|
||||
{ this.buildSelector('choice-language', this.languageList, PageModule.language, this.changeLanguage) }
|
||||
{ this.buildSelector('login-position.about', this.menuPositionItems, this.menuPositionValue, this.changeLoginPosition) }
|
||||
{ !this.isViewThemeOnly && this.buildSelector('choice-desktop', generateDesktopIcons(), AppModule.currentDesktop?.key, this.changeDesktop) }
|
||||
{ !this.isViewThemeOnly && this.buildSelector('choice-os', osList, AppModule.currentOs, this.changeOs) }
|
||||
{ !this.isViewThemeOnly && this.isSupportFullApi && this.zoomSlider }
|
||||
</div>
|
||||
return () => (
|
||||
<div class="grid-two">
|
||||
<h2 class="title">{t('settings.title')}</h2>
|
||||
<AppSelector
|
||||
label={t('settings.choice-language')}
|
||||
items={languageList.value}
|
||||
modelValue={pageStore.language}
|
||||
onUpdate:modelValue={changeLanguage}
|
||||
/>
|
||||
<AppSelector
|
||||
label={t('settings.login-position.about')}
|
||||
items={menuPositionItems.value}
|
||||
modelValue={menuPositionValue.value}
|
||||
onUpdate:modelValue={changeLoginPosition}
|
||||
/>
|
||||
{!isViewThemeOnly.value && (
|
||||
<AppSelector
|
||||
label={t('settings.choice-desktop')}
|
||||
items={generateDesktopIcons()}
|
||||
modelValue={appStore.currentDesktop?.key}
|
||||
onUpdate:modelValue={changeDesktop}
|
||||
/>
|
||||
)}
|
||||
{!isViewThemeOnly.value && (
|
||||
<AppSelector
|
||||
label={t('settings.choice-os')}
|
||||
items={osList}
|
||||
modelValue={appStore.currentOs}
|
||||
onUpdate:modelValue={changeOs}
|
||||
/>
|
||||
)}
|
||||
{!isViewThemeOnly.value && isSupportFullApi.value && (
|
||||
<AppSlider
|
||||
label={t('input.zoom-interface')}
|
||||
from={0.5}
|
||||
to={2}
|
||||
step={0.1}
|
||||
modelValue={appStore.zoom}
|
||||
onUpdate:modelValue={updateZoom}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,31 +1,32 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { AppModule } from '@/store/app'
|
||||
import AppIcon from '@/components/app/AppIcon.vue'
|
||||
import { LightdmUsers } from '@/models/lightdm'
|
||||
import { defineComponent } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAppStore } from '@/store/app'
|
||||
import type { LightdmUsers } from '@/models/lightdm'
|
||||
|
||||
@Component({ components: { AppIcon } })
|
||||
export default class SettingsUsers extends Vue {
|
||||
get users() {
|
||||
return AppModule.users
|
||||
}
|
||||
export default defineComponent({
|
||||
name: 'SettingsUsers',
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
buildUserBlock(user: LightdmUsers) {
|
||||
const isActive = user.username === AppModule.username
|
||||
const activateUser = () => AppModule.SAVE_STATE_APP({ key: 'username', value: user.username })
|
||||
const buildUserBlock = (user: LightdmUsers) => {
|
||||
const isActive = user.username === appStore.username
|
||||
const activateUser = () => { appStore.username = user.username }
|
||||
|
||||
return <div
|
||||
onClick={ activateUser }
|
||||
class={`settings-user-block ${isActive ? 'active' : ''}`}
|
||||
>
|
||||
<AppIcon class='settings-user-image' name={ user.image || 'user' } />
|
||||
<p class="settings-user-name"> { user.display_name } </p>
|
||||
</div>
|
||||
}
|
||||
return (
|
||||
<div onClick={activateUser} class={`settings-user-block ${isActive ? 'active' : ''}`}>
|
||||
<AppIcon class="settings-user-image" name={user.image || 'user'} />
|
||||
<p class="settings-user-name">{user.display_name}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div>
|
||||
<h2 class="title mb-1"> { this.$t('settings.users') } </h2>
|
||||
<div class="users-grid"> { this.users.map(this.buildUserBlock) } </div>
|
||||
</div>
|
||||
return () => (
|
||||
<div>
|
||||
<h2 class="title mb-1">{t('settings.users')}</h2>
|
||||
<div class="users-grid">{appStore.users.map(buildUserBlock)}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
|
||||
<path
|
||||
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@ -0,0 +1,19 @@
|
||||
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
aria-hidden="true"
|
||||
role="img"
|
||||
class="iconify iconify--mdi"
|
||||
width="24"
|
||||
height="24"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</template>
|
||||
@ -1,291 +0,0 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { AppModule } from '@/store/app'
|
||||
import { Wavery } from './lib/wave'
|
||||
import { Debounce } from '@/utils/helper'
|
||||
import { changeHsl, hexToRgb, rgbToHsl } from '@/utils/color'
|
||||
import { AppInputThemePalette } from '@/models/app'
|
||||
import { AgidaTypes } from '@/utils/constant'
|
||||
|
||||
export const OPACITY_ARR = [0.265, 0.4, 0.53, 1]
|
||||
export const topColors = ['#03C79C', '#00A5B2', '#0080A5', '#005A8D']
|
||||
export const bottomColors = ['#9C1EFF', '#8518E9', '#6F12D3', '#590ABD']
|
||||
export const MAX_WAVES = 4
|
||||
|
||||
@Component
|
||||
export default class AgidaTheme extends Vue {
|
||||
iconWidth = 667
|
||||
iconHeight = 684
|
||||
|
||||
wave = {
|
||||
height: 300,
|
||||
width: 1200,
|
||||
segmentCount: 5,
|
||||
layerCount: 4,
|
||||
variance: 1
|
||||
}
|
||||
|
||||
screen = {
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight
|
||||
}
|
||||
|
||||
get palette(): string[] {
|
||||
const input = AppModule.getThemeInput('palette') as AppInputThemePalette
|
||||
const index = input?.value as number || 0
|
||||
const values = input?.values || ['#00CC99', '#6600FF']
|
||||
|
||||
return values[index] as string[]
|
||||
}
|
||||
|
||||
get topColor(): string {
|
||||
return this.palette[0]
|
||||
}
|
||||
|
||||
get bottomColor(): string {
|
||||
return this.palette[1]
|
||||
}
|
||||
|
||||
get animationSpeed(): number {
|
||||
return AppModule.getThemeInput('animation-speed')?.value as number || 40
|
||||
}
|
||||
|
||||
get type(): AgidaTypes {
|
||||
return AppModule.getThemeInput('type')?.value as AgidaTypes || 'agida'
|
||||
}
|
||||
|
||||
get topColors(): string[] {
|
||||
const initHSL = rgbToHsl(hexToRgb(this.topColor))
|
||||
const second = changeHsl(initHSL, 10, -3, -5)
|
||||
const third = changeHsl(initHSL, 25, -3, -10)
|
||||
const fourth = changeHsl(initHSL, 33, -3, -20)
|
||||
|
||||
return [initHSL, second, third, fourth]
|
||||
}
|
||||
|
||||
get bottomColors(): string[] {
|
||||
const initHSL = rgbToHsl(hexToRgb(this.bottomColor))
|
||||
const second = changeHsl(initHSL, 5, -3, -5)
|
||||
const third = changeHsl(initHSL, 10, -3, -10)
|
||||
const fourth = changeHsl(initHSL, 15, -3, -20)
|
||||
|
||||
return [initHSL, second, third, fourth]
|
||||
}
|
||||
|
||||
get bottomActiveColor(): string {
|
||||
return this.bottomColor
|
||||
}
|
||||
|
||||
get knifeSVG(): JSX.Element {
|
||||
return <g style="transform: scale(0.7) translate(-27%, -7%);transform-origin: center">
|
||||
<path d="M1233.68 556.289L490.85 201.979L400.013 392.424C1142.84 746.735 1233.68 556.289 1233.68 556.289Z" fill="white"/>
|
||||
<path d="M432.556 293.998L479.117 196.382L74.764 3.5156C59.8095 -3.61734 41.904 2.72332 34.7711 17.6778L3.55143 83.1312C-3.58151 98.0857 2.75915 115.991 17.7137 123.124L52.0107 139.483C65.6195 145.974 81.9138 140.204 88.4048 126.595C88.4048 126.595 102.294 97.911 145.302 118.425C188.31 138.938 173.495 170.432 173.495 170.432C173.495 170.432 188.648 139.1 231.655 159.613C274.663 180.127 259.849 211.621 259.849 211.621C259.849 211.621 274.692 180.141 318.009 200.802C361.326 221.463 346.203 252.809 346.203 252.809C346.203 252.809 361.355 221.477 404.363 241.991C447.371 262.504 432.556 293.998 432.556 293.998Z" fill="white"/>
|
||||
</g>
|
||||
}
|
||||
|
||||
get agidaSVG(): JSX.Element {
|
||||
return <g>
|
||||
<path d="M236.522 618.424C214.225 622.652 204.614 620.602 184.495 607.788C175.291 601.813 166 593.101 166 593.101C223.5 607.788 267.5 566.618 293.675 571.01C312.903 574.236 339.52 591.001 339.52 591.001L340 607.531C329.492 607.531 303.286 631.11 289.19 653.664C284.577 660.968 278.81 669.041 276.247 671.604C268.687 679.165 253.309 685.059 244.98 683.522C243.8 683.241 243.063 682.984 242.673 682.537C242.173 681.963 242.241 681.076 242.673 679.421C245.364 667.76 258.947 648.282 274.197 633.545C285.217 623.037 288.293 620.987 305.464 612.273C329.171 600.099 330.068 599.586 327.633 596.639C325.968 594.717 324.174 594.46 314.819 595.101C306.105 595.742 301.364 596.895 291.496 600.996C274.709 607.916 249.208 615.989 236.522 618.424Z" fill="white"/>
|
||||
<path d="M442.401 618.362C464.698 622.591 474.309 620.54 494.428 607.726C503.632 601.752 512.923 593.039 512.923 593.039C455.423 607.726 411.423 566.557 385.248 570.948C366.02 574.174 339.403 590.939 339.403 590.939L338.923 607.47C349.431 607.47 375.637 631.048 389.733 653.602C394.346 660.906 400.113 668.98 402.676 671.542C410.236 679.103 425.614 684.998 433.943 683.46C435.123 683.179 435.86 682.923 436.25 682.475C436.75 681.902 436.682 681.014 436.25 679.359C433.559 667.698 419.975 648.22 404.726 633.483C393.706 622.975 390.63 620.925 373.459 612.211C349.752 600.037 348.855 599.525 351.289 596.577C352.955 594.655 354.749 594.399 364.104 595.039C372.818 595.68 377.559 596.833 387.426 600.934C404.213 607.854 429.714 615.927 442.401 618.362Z" fill="white"/>
|
||||
<path d="M327 90H302.361L289.29 68.1809L276.86 90H252.128L276.476 43.7891L252 0H276.348L289.29 21.1218L302.746 0H327L303.182 43.7891L327 90Z" fill="white"/>
|
||||
<path d="M402 90H377.361L364.29 68.1809L351.86 90H327.128L351.476 43.7891L327 0H351.348L364.29 21.1218L377.746 0H402L378.182 43.7891L402 90Z" fill="white"/>
|
||||
<path d="M426 90H402V0H426V90Z" fill="white"/>
|
||||
<path d="M336.52 422.712L316.424 445.056L265.131 387.972H305.054L336.52 422.712Z" fill="white"/>
|
||||
<path d="M371.661 388.636L318.894 447.306L372.412 506.811H412.458L358.939 447.306L411.707 388.636H371.661Z" fill="white"/>
|
||||
<path d="M336.52 472.217L316.424 449.873L265.131 506.957H305.054L336.52 472.217Z" fill="white"/>
|
||||
<path d="M428.98 234.452C428.98 210.159 442.862 190.464 473.076 190.464C526.972 190.464 524.818 169.224 524.818 169.224L521.588 210.444C521.588 234.738 501.845 254.432 477.491 254.432C423.596 254.432 426.827 271.175 426.827 271.175L428.98 234.452Z" fill="white"/>
|
||||
<path d="M249.02 234.452C249.02 210.159 235.138 190.464 204.924 190.464C151.028 190.464 153.182 169.224 153.182 169.224L156.412 210.444C156.412 234.738 176.155 254.432 200.509 254.432C254.404 254.432 251.173 271.175 251.173 271.175L249.02 234.452Z" fill="white"/>
|
||||
<path d="M175.251 499.349C175.251 499.349 204.006 522.632 220.283 535.811C236.559 548.99 226.17 577.893 226.17 577.893C226.17 577.893 195.851 553.344 182.769 542.751C169.687 532.158 175.251 499.349 175.251 499.349Z" fill="white"/>
|
||||
<path d="M129 542.962C129 542.962 157.756 566.246 174.032 579.425C190.308 592.604 216.418 576.43 216.418 576.43C216.418 576.43 186.099 551.881 173.016 541.288C159.934 530.695 129 542.962 129 542.962Z" fill="white"/>
|
||||
<path d="M118.91 444.189C118.91 444.189 144.144 471.249 158.427 486.566C172.71 501.882 158.399 529.057 158.399 529.057C158.399 529.057 131.793 500.526 120.313 488.215C108.832 475.904 118.91 444.189 118.91 444.189Z" fill="white"/>
|
||||
<path d="M67.038 480.938C67.038 480.938 92.2719 507.998 106.555 523.315C120.838 538.632 148.945 526.251 148.945 526.251C148.945 526.251 122.339 497.719 110.859 485.408C99.3787 473.097 67.038 480.938 67.038 480.938Z" fill="white"/>
|
||||
<path d="M83.639 377.825C83.639 377.825 100.437 410.792 109.945 429.452C119.453 448.112 98.205 470.29 98.205 470.29C98.205 470.29 80.4939 435.53 72.8519 420.532C65.2098 405.533 83.639 377.825 83.639 377.825Z" fill="white"/>
|
||||
<path d="M23.6467 398.852C23.6467 398.852 40.4444 431.82 49.9523 450.48C59.4602 469.14 89.8911 464.986 89.8911 464.986C89.8911 464.986 72.18 430.226 64.5379 415.228C56.8959 400.23 23.6467 398.852 23.6467 398.852Z" fill="white"/>
|
||||
<path d="M69.276 303.224C69.276 303.224 75.701 339.662 79.3377 360.287C82.9745 380.912 56.1713 395.908 56.1713 395.908C56.1713 395.908 49.3969 357.489 46.4739 340.911C43.5509 324.334 69.276 303.224 69.276 303.224Z" fill="white"/>
|
||||
<path d="M5.75718 305.793C5.75718 305.793 12.1821 342.231 15.8189 362.856C19.4556 383.481 49.7713 388.405 49.7713 388.405C49.7713 388.405 42.9969 349.986 40.0739 333.409C37.1508 316.831 5.75718 305.793 5.75718 305.793Z" fill="white"/>
|
||||
<path d="M74.8761 228.242C74.8761 228.242 69.7267 264.882 66.812 285.621C63.8973 306.361 33.7719 312.34 33.7719 312.34C33.7719 312.34 39.2013 273.708 41.544 257.038C43.8868 240.369 74.8761 228.242 74.8761 228.242Z" fill="white"/>
|
||||
<path d="M13.6722 211.057C13.6722 211.057 8.52276 247.697 5.60806 268.436C2.69336 289.175 30.0035 303.227 30.0035 303.227C30.0035 303.227 35.433 264.595 37.7757 247.925C40.1184 231.256 13.6722 211.057 13.6722 211.057Z" fill="white"/>
|
||||
<path d="M105.903 160.035C105.903 160.035 89.1059 193.002 79.5979 211.662C70.09 230.323 39.6592 226.169 39.6592 226.169C39.6592 226.169 57.3703 191.409 65.0123 176.41C72.6544 161.412 105.903 160.035 105.903 160.035Z" fill="white"/>
|
||||
<path d="M53.629 123.86C53.629 123.86 36.8314 156.827 27.3234 175.487C17.8155 194.148 39.063 216.325 39.063 216.325C39.063 216.325 56.7742 181.565 64.4162 166.567C72.0582 151.568 53.629 123.86 53.629 123.86Z" fill="white"/>
|
||||
<path d="M151.744 97.6303C151.744 97.6303 128.965 126.787 116.071 143.29C103.177 159.793 74.0978 149.909 74.0978 149.909C74.0978 149.909 98.116 119.167 108.479 105.903C118.843 92.6379 151.744 97.6303 151.744 97.6303Z" fill="white"/>
|
||||
<path d="M107.332 52.1456C107.332 52.1456 84.553 81.3019 71.6592 97.8052C58.7654 114.309 75.3909 140.133 75.3909 140.133C75.3909 140.133 99.4091 109.391 109.773 96.1261C120.136 82.8615 107.332 52.1456 107.332 52.1456Z" fill="white"/>
|
||||
<path d="M208.501 48.9768C208.501 48.9768 178.951 71.244 162.226 83.8478C145.5 96.4516 119.97 79.3779 119.97 79.3779C119.97 79.3779 151.126 55.8999 164.57 45.7695C178.013 35.6391 208.501 48.9768 208.501 48.9768Z" fill="white"/>
|
||||
<path d="M175.251 499.349C175.251 499.349 204.006 522.632 220.283 535.811C236.559 548.99 226.17 577.893 226.17 577.893C226.17 577.893 195.851 553.344 182.769 542.751C169.687 532.158 175.251 499.349 175.251 499.349Z" fill="white"/>
|
||||
<path d="M129 542.962C129 542.962 157.756 566.246 174.032 579.425C190.308 592.604 216.418 576.43 216.418 576.43C216.418 576.43 186.099 551.881 173.016 541.288C159.934 530.695 129 542.962 129 542.962Z" fill="white"/>
|
||||
<path d="M118.91 444.189C118.91 444.189 144.144 471.249 158.427 486.566C172.71 501.882 158.399 529.057 158.399 529.057C158.399 529.057 131.793 500.526 120.313 488.215C108.832 475.904 118.91 444.189 118.91 444.189Z" fill="white"/>
|
||||
<path d="M67.038 480.938C67.038 480.938 92.2719 507.998 106.555 523.315C120.838 538.632 148.945 526.251 148.945 526.251C148.945 526.251 122.339 497.719 110.859 485.408C99.3787 473.097 67.038 480.938 67.038 480.938Z" fill="white"/>
|
||||
<path d="M83.639 377.825C83.639 377.825 100.437 410.792 109.945 429.452C119.453 448.112 98.205 470.29 98.205 470.29C98.205 470.29 80.4939 435.53 72.8519 420.532C65.2098 405.533 83.639 377.825 83.639 377.825Z" fill="white"/>
|
||||
<path d="M23.6467 398.852C23.6467 398.852 40.4444 431.82 49.9523 450.48C59.4602 469.14 89.8911 464.986 89.8911 464.986C89.8911 464.986 72.18 430.226 64.5379 415.228C56.8959 400.23 23.6467 398.852 23.6467 398.852Z" fill="white"/>
|
||||
<path d="M69.276 303.224C69.276 303.224 75.701 339.662 79.3377 360.287C82.9745 380.912 56.1713 395.908 56.1713 395.908C56.1713 395.908 49.3969 357.489 46.4739 340.911C43.5509 324.334 69.276 303.224 69.276 303.224Z" fill="white"/>
|
||||
<path d="M5.75718 305.793C5.75718 305.793 12.1821 342.231 15.8189 362.856C19.4556 383.481 49.7713 388.405 49.7713 388.405C49.7713 388.405 42.9969 349.986 40.0739 333.409C37.1508 316.831 5.75718 305.793 5.75718 305.793Z" fill="white"/>
|
||||
<path d="M74.8761 228.242C74.8761 228.242 69.7267 264.882 66.812 285.621C63.8973 306.361 33.7719 312.34 33.7719 312.34C33.7719 312.34 39.2013 273.708 41.544 257.038C43.8868 240.369 74.8761 228.242 74.8761 228.242Z" fill="white"/>
|
||||
<path d="M13.6722 211.057C13.6722 211.057 8.52276 247.697 5.60806 268.436C2.69336 289.175 30.0035 303.227 30.0035 303.227C30.0035 303.227 35.433 264.595 37.7757 247.925C40.1184 231.256 13.6722 211.057 13.6722 211.057Z" fill="white"/>
|
||||
<path d="M105.903 160.035C105.903 160.035 89.1059 193.002 79.5979 211.662C70.09 230.323 39.6592 226.169 39.6592 226.169C39.6592 226.169 57.3703 191.409 65.0123 176.41C72.6544 161.412 105.903 160.035 105.903 160.035Z" fill="white"/>
|
||||
<path d="M53.629 123.86C53.629 123.86 36.8314 156.827 27.3234 175.487C17.8155 194.148 39.063 216.325 39.063 216.325C39.063 216.325 56.7742 181.565 64.4162 166.567C72.0582 151.568 53.629 123.86 53.629 123.86Z" fill="white"/>
|
||||
<path d="M151.744 97.6303C151.744 97.6303 128.965 126.787 116.071 143.29C103.177 159.793 74.0978 149.909 74.0978 149.909C74.0978 149.909 98.116 119.167 108.479 105.903C118.843 92.6379 151.744 97.6303 151.744 97.6303Z" fill="white"/>
|
||||
<path d="M107.332 52.1456C107.332 52.1456 84.553 81.3019 71.6592 97.8052C58.7654 114.309 75.3909 140.133 75.3909 140.133C75.3909 140.133 99.4091 109.391 109.773 96.1261C120.136 82.8615 107.332 52.1456 107.332 52.1456Z" fill="white"/>
|
||||
<path d="M208.501 48.9768C208.501 48.9768 178.951 71.244 162.226 83.8478C145.5 96.4516 119.97 79.3779 119.97 79.3779C119.97 79.3779 151.126 55.8999 164.57 45.7695C178.013 35.6391 208.501 48.9768 208.501 48.9768Z" fill="white"/>
|
||||
<path d="M503.169 499.349C503.169 499.349 474.413 522.632 458.137 535.811C441.86 548.99 452.249 577.893 452.249 577.893C452.249 577.893 482.569 553.344 495.651 542.751C508.733 532.158 503.169 499.349 503.169 499.349Z" fill="white"/>
|
||||
<path d="M549.42 542.962C549.42 542.962 520.664 566.246 504.388 579.425C488.111 592.604 462.002 576.43 462.002 576.43C462.002 576.43 492.321 551.881 505.403 541.288C518.485 530.695 549.42 542.962 549.42 542.962Z" fill="white"/>
|
||||
<path d="M559.509 444.189C559.509 444.189 534.275 471.249 519.992 486.566C505.709 501.882 520.021 529.057 520.021 529.057C520.021 529.057 546.627 500.526 558.107 488.215C569.587 475.904 559.509 444.189 559.509 444.189Z" fill="white"/>
|
||||
<path d="M611.382 480.938C611.382 480.938 586.148 507.998 571.865 523.315C557.581 538.632 529.474 526.251 529.474 526.251C529.474 526.251 556.081 497.719 567.561 485.408C579.041 473.097 611.382 480.938 611.382 480.938Z" fill="white"/>
|
||||
<path d="M594.781 377.825C594.781 377.825 577.983 410.792 568.475 429.452C558.967 448.112 580.215 470.29 580.215 470.29C580.215 470.29 597.926 435.53 605.568 420.532C613.21 405.533 594.781 377.825 594.781 377.825Z" fill="white"/>
|
||||
<path d="M654.773 398.852C654.773 398.852 637.975 431.82 628.467 450.48C618.959 469.14 588.528 464.986 588.528 464.986C588.528 464.986 606.24 430.226 613.882 415.228C621.524 400.23 654.773 398.852 654.773 398.852Z" fill="white"/>
|
||||
<path d="M609.144 303.224C609.144 303.224 602.719 339.662 599.082 360.287C595.445 380.912 622.248 395.908 622.248 395.908C622.248 395.908 629.023 357.489 631.946 340.911C634.869 324.334 609.144 303.224 609.144 303.224Z" fill="white"/>
|
||||
<path d="M672.662 305.793C672.662 305.793 666.237 342.231 662.601 362.856C658.964 383.481 628.648 388.405 628.648 388.405C628.648 388.405 635.423 349.986 638.346 333.409C641.269 316.831 672.662 305.793 672.662 305.793Z" fill="white"/>
|
||||
<path d="M603.544 228.242C603.544 228.242 608.693 264.882 611.608 285.621C614.522 306.361 644.648 312.34 644.648 312.34C644.648 312.34 639.218 273.708 636.876 257.038C634.533 240.369 603.544 228.242 603.544 228.242Z" fill="white"/>
|
||||
<path d="M664.747 211.057C664.747 211.057 669.897 247.697 672.812 268.436C675.726 289.175 648.416 303.227 648.416 303.227C648.416 303.227 642.987 264.595 640.644 247.925C638.301 231.256 664.747 211.057 664.747 211.057Z" fill="white"/>
|
||||
<path d="M572.516 160.035C572.516 160.035 589.314 193.002 598.822 211.662C608.33 230.323 638.76 226.169 638.76 226.169C638.76 226.169 621.049 191.409 613.407 176.41C605.765 161.412 572.516 160.035 572.516 160.035Z" fill="white"/>
|
||||
<path d="M624.791 123.86C624.791 123.86 641.588 156.827 651.096 175.487C660.604 194.148 639.356 216.325 639.356 216.325C639.356 216.325 621.645 181.565 614.003 166.567C606.361 151.568 624.791 123.86 624.791 123.86Z" fill="white"/>
|
||||
<path d="M526.676 97.6303C526.676 97.6303 549.455 126.787 562.349 143.29C575.243 159.793 604.322 149.909 604.322 149.909C604.322 149.909 580.304 119.167 569.94 105.903C559.577 92.6379 526.676 97.6303 526.676 97.6303Z" fill="white"/>
|
||||
<path d="M571.087 52.1456C571.087 52.1456 593.867 81.3019 606.76 97.8052C619.654 114.309 603.029 140.133 603.029 140.133C603.029 140.133 579.01 109.391 568.647 96.1261C558.284 82.8615 571.087 52.1456 571.087 52.1456Z" fill="white"/>
|
||||
<path d="M469.919 48.9768C469.919 48.9768 499.468 71.244 516.194 83.8478C532.92 96.4516 558.45 79.3779 558.45 79.3779C558.45 79.3779 527.293 55.8999 513.85 45.7695C500.406 35.6391 469.919 48.9768 469.919 48.9768Z" fill="white"/>
|
||||
<path d="M503.169 499.349C503.169 499.349 474.413 522.632 458.137 535.811C441.86 548.99 452.249 577.893 452.249 577.893C452.249 577.893 482.569 553.344 495.651 542.751C508.733 532.158 503.169 499.349 503.169 499.349Z" fill="white"/>
|
||||
<path d="M549.42 542.962C549.42 542.962 520.664 566.246 504.388 579.425C488.111 592.604 462.002 576.43 462.002 576.43C462.002 576.43 492.321 551.881 505.403 541.288C518.485 530.695 549.42 542.962 549.42 542.962Z" fill="white"/>
|
||||
<path d="M559.509 444.189C559.509 444.189 534.275 471.249 519.992 486.566C505.709 501.882 520.021 529.057 520.021 529.057C520.021 529.057 546.627 500.526 558.107 488.215C569.587 475.904 559.509 444.189 559.509 444.189Z" fill="white"/>
|
||||
<path d="M611.382 480.938C611.382 480.938 586.148 507.998 571.865 523.315C557.581 538.632 529.474 526.251 529.474 526.251C529.474 526.251 556.081 497.719 567.561 485.408C579.041 473.097 611.382 480.938 611.382 480.938Z" fill="white"/>
|
||||
<path d="M594.781 377.825C594.781 377.825 577.983 410.792 568.475 429.452C558.967 448.112 580.215 470.29 580.215 470.29C580.215 470.29 597.926 435.53 605.568 420.532C613.21 405.533 594.781 377.825 594.781 377.825Z" fill="white"/>
|
||||
<path d="M654.773 398.852C654.773 398.852 637.975 431.82 628.467 450.48C618.959 469.14 588.528 464.986 588.528 464.986C588.528 464.986 606.24 430.226 613.882 415.228C621.524 400.23 654.773 398.852 654.773 398.852Z" fill="white"/>
|
||||
<path d="M609.144 303.224C609.144 303.224 602.719 339.662 599.082 360.287C595.445 380.912 622.248 395.908 622.248 395.908C622.248 395.908 629.023 357.489 631.946 340.911C634.869 324.334 609.144 303.224 609.144 303.224Z" fill="white"/>
|
||||
<path d="M672.662 305.793C672.662 305.793 666.237 342.231 662.601 362.856C658.964 383.481 628.648 388.405 628.648 388.405C628.648 388.405 635.423 349.986 638.346 333.409C641.269 316.831 672.662 305.793 672.662 305.793Z" fill="white"/>
|
||||
<path d="M603.544 228.242C603.544 228.242 608.693 264.882 611.608 285.621C614.522 306.361 644.648 312.34 644.648 312.34C644.648 312.34 639.218 273.708 636.876 257.038C634.533 240.369 603.544 228.242 603.544 228.242Z" fill="white"/>
|
||||
<path d="M664.747 211.057C664.747 211.057 669.897 247.697 672.812 268.436C675.726 289.175 648.416 303.227 648.416 303.227C648.416 303.227 642.987 264.595 640.644 247.925C638.301 231.256 664.747 211.057 664.747 211.057Z" fill="white"/>
|
||||
<path d="M572.516 160.035C572.516 160.035 589.314 193.002 598.822 211.662C608.33 230.323 638.76 226.169 638.76 226.169C638.76 226.169 621.049 191.409 613.407 176.41C605.765 161.412 572.516 160.035 572.516 160.035Z" fill="white"/>
|
||||
<path d="M624.791 123.86C624.791 123.86 641.588 156.827 651.096 175.487C660.604 194.148 639.356 216.325 639.356 216.325C639.356 216.325 621.645 181.565 614.003 166.567C606.361 151.568 624.791 123.86 624.791 123.86Z" fill="white"/>
|
||||
<path d="M526.676 97.6303C526.676 97.6303 549.455 126.787 562.349 143.29C575.243 159.793 604.322 149.909 604.322 149.909C604.322 149.909 580.304 119.167 569.94 105.903C559.577 92.6379 526.676 97.6303 526.676 97.6303Z" fill="white"/>
|
||||
<path d="M571.087 52.1456C571.087 52.1456 593.867 81.3019 606.76 97.8052C619.654 114.309 603.029 140.133 603.029 140.133C603.029 140.133 579.01 109.391 568.647 96.1261C558.284 82.8615 571.087 52.1456 571.087 52.1456Z" fill="white"/>
|
||||
<path d="M469.919 48.9768C469.919 48.9768 499.468 71.244 516.194 83.8478C532.92 96.4516 558.45 79.3779 558.45 79.3779C558.45 79.3779 527.293 55.8999 513.85 45.7695C500.406 35.6391 469.919 48.9768 469.919 48.9768Z" fill="white"/>
|
||||
</g>
|
||||
}
|
||||
|
||||
get yinYangSVG(): JSX.Element {
|
||||
return <g style="transform: translate(30px, 30px);">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M289.088 578.175C448.746 578.175 578.175 448.746 578.175 289.088C578.175 129.429 448.746 0 289.088 0C129.429 0 0 129.429 0 289.088C0 448.746 129.429 578.175 289.088 578.175ZM289.087 570.763C214.383 570.763 142.737 541.086 89.9132 488.262C37.0889 435.437 7.41248 363.792 7.41248 289.087C7.41248 214.383 37.0889 142.737 89.9132 89.9132C142.737 37.0889 214.383 7.41248 289.087 7.41248C326.44 7.41248 362.262 22.2507 388.675 48.6628C415.087 75.075 429.925 110.898 429.925 148.25C429.925 185.602 415.087 221.425 388.675 247.837C362.262 274.249 326.44 289.087 289.087 289.087C251.735 289.087 215.912 303.926 189.5 330.338C163.088 356.75 148.25 392.573 148.25 429.925C148.25 467.277 163.088 503.1 189.5 529.512C215.912 555.924 251.735 570.763 289.087 570.763ZM326.15 429.925C326.15 450.394 309.557 466.988 289.088 466.988C268.618 466.988 252.025 450.394 252.025 429.925C252.025 409.456 268.618 392.863 289.088 392.863C309.557 392.863 326.15 409.456 326.15 429.925Z" fill="white"/>
|
||||
<path d="M289.088 185.312C309.557 185.312 326.15 168.719 326.15 148.25C326.15 127.781 309.557 111.188 289.088 111.188C268.618 111.188 252.025 127.781 252.025 148.25C252.025 168.719 268.618 185.312 289.088 185.312Z" fill="white"/>
|
||||
</g>
|
||||
}
|
||||
|
||||
get activeFragment() {
|
||||
const objectMap: Record<AgidaTypes, JSX.Element> = {
|
||||
agida: this.agidaSVG,
|
||||
knife: this.knifeSVG,
|
||||
'yin yang': this.yinYangSVG
|
||||
}
|
||||
|
||||
return objectMap[this.type] || this.agidaSVG
|
||||
}
|
||||
|
||||
get width(): number {
|
||||
return this.screen.width
|
||||
}
|
||||
|
||||
get height(): number {
|
||||
return this.screen.height
|
||||
}
|
||||
|
||||
get viewBox(): string {
|
||||
return `0 0 ${this.width} ${this.height}`
|
||||
}
|
||||
|
||||
get topWaves() {
|
||||
return this.generateWave('top')
|
||||
}
|
||||
|
||||
get bottomWaves() {
|
||||
return this.generateWave('bottom')
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.updateScreen()
|
||||
window.addEventListener('resize', this.updateScreen)
|
||||
}
|
||||
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.updateScreen)
|
||||
}
|
||||
|
||||
@Debounce(50)
|
||||
updateScreen() {
|
||||
this.screen = {
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight
|
||||
}
|
||||
}
|
||||
|
||||
generateWave(type: 'bottom' | 'top') {
|
||||
const wavery = new Wavery(this.wave)
|
||||
const waveSvg = wavery.generateSvg()
|
||||
|
||||
const { height, width, xmlns, paths } = waveSvg.svg
|
||||
const isTop = type === 'top'
|
||||
const colorsArray = isTop ? this.topColors : this.bottomColors
|
||||
const angle = Math.atan(window.innerHeight / window.innerWidth) * (180 / Math.PI) * 1.1
|
||||
|
||||
return <svg
|
||||
class={`waves--${type}`}
|
||||
style={`width: ${width}px; height: ${height}px; --angle: ${angle}deg`}
|
||||
viewBox={`0 0 ${width} ${height}`}
|
||||
xmlns={xmlns}
|
||||
>
|
||||
{paths.map((path, index) => {
|
||||
const pathProps = []
|
||||
|
||||
if (path.animatedPath) {
|
||||
pathProps.push(<style>{wavery.generateAnimationStyle(index)}</style>)
|
||||
}
|
||||
|
||||
pathProps.push(
|
||||
<path
|
||||
key={index}
|
||||
d={path.d}
|
||||
stroke={path.strokeColor}
|
||||
stroke-width={path.strokeWidth}
|
||||
fill={colorsArray[index]}
|
||||
class={`path-${index}`}
|
||||
transform={path.transform}
|
||||
></path>
|
||||
)
|
||||
|
||||
return pathProps
|
||||
})}
|
||||
</svg>
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div>
|
||||
{ this.topWaves }
|
||||
{ this.bottomWaves }
|
||||
<svg
|
||||
width={this.width}
|
||||
height={this.height}
|
||||
viewBox={this.viewBox}
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width={this.width} height={this.height} fill="#22233D"/>
|
||||
<mask id="mask-agida" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width={this.width} height={this.height}>
|
||||
<g id="main" style={`transform: translate(calc(${this.width / 2}px - ${this.iconWidth / 2}px), calc(${this.height / 2}px - ${this.iconHeight / 2 - 30}px))`}>
|
||||
{this.activeFragment}
|
||||
</g>
|
||||
</mask>
|
||||
<g mask="url(#mask-agida)">
|
||||
<path d="M1862.93 140.4H-57.0667V1220.4H1862.93V140.4Z" fill={this.bottomActiveColor}/>
|
||||
<g filter="url(#filter0_f_506_268)">
|
||||
<path d="M1512.07 1310.6C1932.69 1310.6 2273.67 1022.9 2273.67 668C2273.67 313.102 1932.69 25.4 1512.07 25.4C1091.45 25.4 750.467 313.102 750.467 668C750.467 1022.9 1091.45 1310.6 1512.07 1310.6Z" fill={this.topColor}/>
|
||||
<path d="M1646.47 889.4C2067.09 889.4 2408.07 601.698 2408.07 246.8C2408.07 -108.098 2067.09 -395.8 1646.47 -395.8C1225.85 -395.8 884.867 -108.098 884.867 246.8C884.867 601.698 1225.85 889.4 1646.47 889.4Z" fill={this.bottomActiveColor}/>
|
||||
<path d="M272.6 1112.6C693.22 1112.6 1034.2 824.898 1034.2 470C1034.2 115.102 693.22 -172.6 272.6 -172.6C-148.02 -172.6 -489 115.102 -489 470C-489 824.898 -148.02 1112.6 272.6 1112.6Z" fill={this.topColor}/>
|
||||
<path d="M1145.13 1514C1565.75 1514 1906.73 1226.3 1906.73 871.4C1906.73 516.502 1565.75 228.8 1145.13 228.8C724.513 228.8 383.533 516.502 383.533 871.4C383.533 1226.3 724.513 1514 1145.13 1514Z" fill={this.topColor}/>
|
||||
<path d="M690.733 855.2C1111.35 855.2 1452.33 567.498 1452.33 212.6C1452.33 -142.298 1111.35 -430 690.733 -430C270.113 -430 -70.8667 -142.298 -70.8667 212.6C-70.8667 567.498 270.113 855.2 690.733 855.2Z" fill={this.bottomActiveColor}/>
|
||||
<path d="M281.133 1447.4C701.753 1447.4 1042.73 1159.7 1042.73 804.8C1042.73 449.902 701.753 162.2 281.133 162.2C-139.487 162.2 -480.467 449.902 -480.467 804.8C-480.467 1159.7 -139.487 1447.4 281.133 1447.4Z" fill={this.topColor}/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_f_506_268" x="-811" y="-752" width="3541.07" height="2588" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="161" result="effect1_foregroundBlur_506_268"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@ -1,62 +0,0 @@
|
||||
/* bezier-spline.js
|
||||
*
|
||||
* computes cubic bezier coefficients to generate a smooth
|
||||
* line through specified points. couples with SVG graphics
|
||||
* for interactive processing.
|
||||
*
|
||||
* For more info see:
|
||||
* http://www.particleincell.com/2012/bezier-splines/
|
||||
*
|
||||
* Lubos Brieda, Particle In Cell Consulting LLC, 2012
|
||||
* you may freely use this algorithm in your codes however where feasible
|
||||
* please include a link/reference to the source article
|
||||
*/
|
||||
/* computes control points given knots K, this is the brain of the operation */
|
||||
export function computeControlPoints(K: number[]) {
|
||||
const p1 = []
|
||||
const p2 = []
|
||||
const n = K.length - 1
|
||||
|
||||
/* rhs vector */
|
||||
const a = []
|
||||
const b = []
|
||||
const c = []
|
||||
const r = []
|
||||
|
||||
/* left most segment */
|
||||
a[0] = 0
|
||||
b[0] = 2
|
||||
c[0] = 1
|
||||
r[0] = K[0] + 2 * K[1]
|
||||
|
||||
/* internal segments */
|
||||
for (let i = 1; i < n - 1; i++) {
|
||||
a[i] = 1
|
||||
b[i] = 4
|
||||
c[i] = 1
|
||||
r[i] = 4 * K[i] + 2 * K[i + 1]
|
||||
}
|
||||
|
||||
/* right segment */
|
||||
a[n - 1] = 2
|
||||
b[n - 1] = 7
|
||||
c[n - 1] = 0
|
||||
r[n - 1] = 8 * K[n - 1] + K[n]
|
||||
|
||||
/* solves Ax=b with the Thomas algorithm (from Wikipedia) */
|
||||
for (let i = 1; i < n; i++) {
|
||||
const m: number = a[i] / b[i - 1]
|
||||
b[i] = b[i] - m * c[i - 1]
|
||||
r[i] = r[i] - m * r[i - 1]
|
||||
}
|
||||
|
||||
p1[n - 1] = r[n - 1] / b[n - 1]
|
||||
for (let i = n - 2; i >= 0; --i) p1[i] = (r[i] - c[i] * p1[i + 1]) / b[i]
|
||||
|
||||
/* we have p1, now compute p2 */
|
||||
for (let i = 0; i < n - 1; i++) p2[i] = 2 * K[i + 1] - p1[i + 1]
|
||||
|
||||
p2[n - 1] = 0.5 * (K[n] + p1[n - 1])
|
||||
|
||||
return { p1, p2 }
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import { Wavery, WaveConfigInterface } from './wave'
|
||||
|
||||
export function waveInit(data: WaveConfigInterface) {
|
||||
const wavery = new Wavery(data)
|
||||
|
||||
return wavery.generateSvg()
|
||||
}
|
||||
@ -1,194 +0,0 @@
|
||||
import { computeControlPoints } from './bezier-spline'
|
||||
const svgns = 'http://www.w3.org/2000/svg'
|
||||
|
||||
export interface WaveConfigAnimationInterface {
|
||||
time?: number;
|
||||
steps?: number;
|
||||
}
|
||||
|
||||
export interface WaveConfigInterface {
|
||||
height: number;
|
||||
width: number;
|
||||
segmentCount: number;
|
||||
layerCount: number;
|
||||
variance: number;
|
||||
strokeWidth?: number;
|
||||
fillColor?: string;
|
||||
strokeColor?: string;
|
||||
transform?: string;
|
||||
animation?: boolean | WaveConfigAnimationInterface;
|
||||
}
|
||||
|
||||
interface Point {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
const defaultAnimationValues = {
|
||||
steps: 3,
|
||||
time: 40000,
|
||||
timingFunction: 'ease',
|
||||
iteration: 'infinite'
|
||||
}
|
||||
|
||||
export class Wavery {
|
||||
properties!: WaveConfigInterface
|
||||
points: Point[][] = []
|
||||
animationPoints: Point[][][] = [];
|
||||
|
||||
constructor(properties: WaveConfigInterface) {
|
||||
this.properties = properties
|
||||
this.points = this.generatePoints()
|
||||
|
||||
if (this.needAnimation) {
|
||||
const { steps } = this.animation
|
||||
|
||||
Array.from(Array(steps)).forEach(() => {
|
||||
this.animationPoints.push(this.generatePoints())
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
get animation() {
|
||||
const animation = this.properties.animation
|
||||
const isBoolean = typeof animation === 'boolean'
|
||||
|
||||
return isBoolean ? defaultAnimationValues : { ...defaultAnimationValues, ...animation }
|
||||
}
|
||||
|
||||
get cellWidth() {
|
||||
return this.properties.width / this.properties.segmentCount
|
||||
}
|
||||
|
||||
get cellHeight() {
|
||||
return this.properties.height / this.properties.layerCount
|
||||
}
|
||||
|
||||
get needAnimation() {
|
||||
return this.properties.animation
|
||||
}
|
||||
|
||||
get pathList() {
|
||||
const pathList = []
|
||||
|
||||
for (let i = 0; i < this.points.length; i++) {
|
||||
pathList.push(this.generateClosedPath(i))
|
||||
}
|
||||
|
||||
return pathList
|
||||
}
|
||||
|
||||
generatePoints(): Point[][] {
|
||||
const { cellWidth, cellHeight } = this
|
||||
const { width, height, variance } = this.properties
|
||||
const moveLimitX = cellWidth * variance * 0.2
|
||||
const moveLimitY = cellHeight * variance
|
||||
const points = []
|
||||
|
||||
for (let y = cellHeight; y <= height; y += cellHeight) {
|
||||
const pointsPerLayer = []
|
||||
pointsPerLayer.push({ x: 0, y: Math.floor(y) })
|
||||
|
||||
for (let x = cellWidth; x < width; x += cellWidth) {
|
||||
const varietalY = y - moveLimitY / 2 + Math.random() * moveLimitY
|
||||
const varietalX = x - moveLimitX / 2 + Math.random() * moveLimitX
|
||||
pointsPerLayer.push({
|
||||
x: Math.floor(varietalX),
|
||||
y: Math.floor(varietalY)
|
||||
})
|
||||
}
|
||||
pointsPerLayer.push({ x: width, y: Math.floor(y) })
|
||||
points.push(pointsPerLayer)
|
||||
}
|
||||
|
||||
return points
|
||||
}
|
||||
|
||||
generateClosedPath(index: number) {
|
||||
const animatedPathList: string[] = []
|
||||
|
||||
const { fillColor, strokeColor, strokeWidth, transform } = this.properties
|
||||
const style = { fillColor, strokeColor, strokeWidth, transform }
|
||||
|
||||
const path = this.generatePath(this.points[index])
|
||||
|
||||
if (this.needAnimation) {
|
||||
this.animationPoints.forEach((waves) => {
|
||||
animatedPathList.push(this.generatePath(waves[index]))
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
...style,
|
||||
d: path,
|
||||
animatedPath: animatedPathList
|
||||
}
|
||||
}
|
||||
|
||||
generatePath(points: Point[]) {
|
||||
const xPoints = points.map((p) => p.x)
|
||||
const yPoints = points.map((p) => p.y)
|
||||
|
||||
const leftCornerPoint = { x: 0, y: this.properties.height + this.cellHeight }
|
||||
const rightCornerPoint = { x: this.properties.width, y: this.properties.height + this.cellHeight }
|
||||
const xControlPoints = computeControlPoints(xPoints)
|
||||
const yControlPoints = computeControlPoints(yPoints)
|
||||
|
||||
let path =
|
||||
`M ${leftCornerPoint.x},${leftCornerPoint.y} ` +
|
||||
`C ${leftCornerPoint.x},${leftCornerPoint.y} ` +
|
||||
`${xPoints[0]},${yPoints[0]} ` +
|
||||
`${xPoints[0]},${yPoints[0]} `
|
||||
|
||||
for (let i = 0; i < xPoints.length - 1; i++) {
|
||||
path +=
|
||||
`C ${xControlPoints.p1[i]},${yControlPoints.p1[i]} ` +
|
||||
`${xControlPoints.p2[i]},${yControlPoints.p2[i]} ` +
|
||||
`${xPoints[i + 1]},${yPoints[i + 1]} `
|
||||
}
|
||||
|
||||
path +=
|
||||
`C ${xPoints[xPoints.length - 1]},${yPoints[xPoints.length - 1]} ` +
|
||||
`${rightCornerPoint.x},${rightCornerPoint.y} ` +
|
||||
`${rightCornerPoint.x},${rightCornerPoint.y} Z`
|
||||
|
||||
return path
|
||||
}
|
||||
|
||||
private generateKeyframe(percent: number, d: string) {
|
||||
return `${percent}% {d: path("${d}")}`
|
||||
}
|
||||
|
||||
generateAnimationStyle(index: number) {
|
||||
const path = this.pathList[index]
|
||||
const { steps } = this.animation
|
||||
if (!path) { return }
|
||||
|
||||
const animationList = Array.from(Array(steps + 2)).map((_, index, { length }) => {
|
||||
const isBound = index === 0 || index + 1 === length
|
||||
const percent = index * (100 / (steps + 1))
|
||||
return this.generateKeyframe(percent, isBound ? path.d : path.animatedPath[index - 1])
|
||||
})
|
||||
|
||||
return `.path-${index}{
|
||||
animation:pathAnim-${index} ${this.animation.time}ms;
|
||||
animation-timing-function: ${this.animation.timingFunction};
|
||||
animation-iteration-count: ${this.animation.iteration};
|
||||
}
|
||||
|
||||
@keyframes pathAnim-${index}{
|
||||
${animationList.join('')}
|
||||
}`
|
||||
}
|
||||
|
||||
generateSvg() {
|
||||
return {
|
||||
svg: {
|
||||
width: this.properties.width,
|
||||
height: this.properties.height + this.cellHeight,
|
||||
xmlns: svgns,
|
||||
paths: this.pathList
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,68 +1,56 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { defineComponent, ref, computed, onMounted, onBeforeUnmount } from 'vue'
|
||||
import GL from '@/utils/gl'
|
||||
import { AppModule } from '@/store/app'
|
||||
let render: GL
|
||||
|
||||
@Component
|
||||
export default class DestructionTheme extends Vue {
|
||||
get perspective() {
|
||||
return AppModule.getThemeInput('perspective')?.value as number || 0.2
|
||||
}
|
||||
|
||||
get position() {
|
||||
return AppModule.getThemeInput('position')?.value as number || 0.2
|
||||
}
|
||||
|
||||
get animationSpeed() {
|
||||
return AppModule.getThemeInput('animation-speed')?.value as number || 45
|
||||
}
|
||||
|
||||
get pxratio() {
|
||||
return AppModule.getThemeInput('pxratio')?.value as number || 0.8
|
||||
}
|
||||
import { useAppStore } from '@/store/app'
|
||||
import fragmentShader from './fragment.glsl'
|
||||
import vertexShader from './vertex.glsl'
|
||||
|
||||
mounted() {
|
||||
const vm = this
|
||||
|
||||
render = new GL(
|
||||
this.$refs.canvas as HTMLCanvasElement,
|
||||
document.querySelector('script#shader-vs')?.textContent || '',
|
||||
document.querySelector('script#shader-fs')?.textContent || '',
|
||||
window.innerWidth,
|
||||
window.innerHeight,
|
||||
{
|
||||
renderOptions: {
|
||||
externalTimeUse: true
|
||||
},
|
||||
renderHook() {
|
||||
const gl = this as unknown as GL
|
||||
let render: GL
|
||||
|
||||
if (!gl.programInfo.uniforms.position) {
|
||||
gl.programInfo.uniforms.position = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'position')
|
||||
gl.programInfo.uniforms.perspective = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'perspective')
|
||||
export default defineComponent({
|
||||
name: 'DestructionTheme',
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
const canvasRef = ref<HTMLCanvasElement | null>(null)
|
||||
|
||||
const perspective = computed(() => appStore.getThemeInput('perspective')?.value as number || 0.2)
|
||||
const position = computed(() => appStore.getThemeInput('position')?.value as number || 0.2)
|
||||
const animationSpeed = computed(() => appStore.getThemeInput('animation-speed')?.value as number || 45)
|
||||
const pxratio = computed(() => appStore.getThemeInput('pxratio')?.value as number || 0.8)
|
||||
|
||||
onMounted(() => {
|
||||
render = new GL(
|
||||
canvasRef.value!,
|
||||
vertexShader,
|
||||
fragmentShader,
|
||||
window.innerWidth,
|
||||
window.innerHeight,
|
||||
{
|
||||
renderOptions: { externalTimeUse: true },
|
||||
renderHook() {
|
||||
const gl = this as unknown as GL
|
||||
if (!gl.programInfo.uniforms.position) {
|
||||
gl.programInfo.uniforms.position = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'position')
|
||||
gl.programInfo.uniforms.perspective = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'perspective')
|
||||
}
|
||||
gl.pxratio = pxratio.value
|
||||
gl.time += animationSpeed.value / 500
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.time, gl.time)
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.position, position.value)
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.perspective, perspective.value)
|
||||
}
|
||||
|
||||
gl.pxratio = vm.pxratio
|
||||
gl.time += vm.animationSpeed / 500
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.time, gl.time)
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.position, vm.position)
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.perspective, vm.perspective)
|
||||
}
|
||||
}
|
||||
)
|
||||
render.running = true
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
render.running = false
|
||||
})
|
||||
|
||||
return () => (
|
||||
<div>
|
||||
<canvas ref={canvasRef} />
|
||||
</div>
|
||||
)
|
||||
|
||||
render.running = true
|
||||
}
|
||||
|
||||
beforeDestroy() {
|
||||
render.running = false
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div>
|
||||
<canvas ref='canvas' />
|
||||
<script id="shader-fs" type="x-shader/x-fragment"> { require('./fragment.glsl') } </script>
|
||||
<script id="shader-vs" type="x-shader/x-vertex"> { require('./vertex.glsl') } </script>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,84 +1,60 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { defineComponent, ref, computed, onMounted, onBeforeUnmount } from 'vue'
|
||||
import GL from '@/utils/gl'
|
||||
import { AppModule } from '@/store/app'
|
||||
let render: GL
|
||||
|
||||
@Component
|
||||
export default class FlowTheme extends Vue {
|
||||
get hue() {
|
||||
return AppModule.getThemeInput('hue')?.value as number || 0
|
||||
}
|
||||
|
||||
get brightness() {
|
||||
return AppModule.getThemeInput('brightness')?.value as number || 0
|
||||
}
|
||||
|
||||
get invert() {
|
||||
return AppModule.getThemeInput('invert')?.value as boolean || false
|
||||
}
|
||||
|
||||
get filter() {
|
||||
return `hue-rotate(${this.hue}deg) invert(${Number(this.invert)}) brightness(${this.brightness})`
|
||||
}
|
||||
|
||||
get styleCanvas() {
|
||||
return {
|
||||
filter: this.filter
|
||||
}
|
||||
}
|
||||
|
||||
get animationSpeed() {
|
||||
return AppModule.getThemeInput('animation-speed')?.value as number || 45
|
||||
}
|
||||
import { useAppStore } from '@/store/app'
|
||||
import fragmentShader from './fragment.glsl'
|
||||
import vertexShader from './vertex.glsl'
|
||||
|
||||
get size() {
|
||||
return AppModule.getThemeInput('size')?.value as number || 0.2
|
||||
}
|
||||
|
||||
get pxratio() {
|
||||
return AppModule.getThemeInput('pxratio')?.value as number || 0.8
|
||||
}
|
||||
|
||||
mounted() {
|
||||
const vm = this
|
||||
|
||||
render = new GL(
|
||||
this.$refs.canvas as HTMLCanvasElement,
|
||||
document.querySelector('script#shader-vs')?.textContent || '',
|
||||
document.querySelector('script#shader-fs')?.textContent || '',
|
||||
window.innerWidth,
|
||||
window.innerHeight,
|
||||
{
|
||||
renderOptions: {
|
||||
externalTimeUse: true
|
||||
},
|
||||
renderHook() {
|
||||
const gl = this as unknown as GL
|
||||
let render: GL
|
||||
|
||||
if (!gl.programInfo.uniforms.size) {
|
||||
gl.programInfo.uniforms.size = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'size')
|
||||
export default defineComponent({
|
||||
name: 'FlowTheme',
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
const canvasRef = ref<HTMLCanvasElement | null>(null)
|
||||
|
||||
const hue = computed(() => appStore.getThemeInput('hue')?.value as number || 0)
|
||||
const brightness = computed(() => appStore.getThemeInput('brightness')?.value as number || 0)
|
||||
const invert = computed(() => appStore.getThemeInput('invert')?.value as boolean || false)
|
||||
const animationSpeed = computed(() => appStore.getThemeInput('animation-speed')?.value as number || 45)
|
||||
const size = computed(() => appStore.getThemeInput('size')?.value as number || 0.2)
|
||||
const pxratio = computed(() => appStore.getThemeInput('pxratio')?.value as number || 0.8)
|
||||
|
||||
const styleCanvas = computed(() => ({
|
||||
filter: `hue-rotate(${hue.value}deg) invert(${Number(invert.value)}) brightness(${brightness.value})`
|
||||
}))
|
||||
|
||||
onMounted(() => {
|
||||
render = new GL(
|
||||
canvasRef.value!,
|
||||
vertexShader,
|
||||
fragmentShader,
|
||||
window.innerWidth,
|
||||
window.innerHeight,
|
||||
{
|
||||
renderOptions: { externalTimeUse: true },
|
||||
renderHook() {
|
||||
const gl = this as unknown as GL
|
||||
if (!gl.programInfo.uniforms.size) {
|
||||
gl.programInfo.uniforms.size = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'size')
|
||||
}
|
||||
gl.pxratio = pxratio.value
|
||||
gl.time += animationSpeed.value / 500
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.time, gl.time)
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.size, size.value)
|
||||
}
|
||||
|
||||
gl.pxratio = vm.pxratio
|
||||
gl.time += vm.animationSpeed / 500
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.time, gl.time)
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.size, vm.size)
|
||||
}
|
||||
}
|
||||
)
|
||||
render.running = true
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
render.running = false
|
||||
})
|
||||
|
||||
return () => (
|
||||
<div>
|
||||
<canvas ref={canvasRef} style={styleCanvas.value} />
|
||||
</div>
|
||||
)
|
||||
|
||||
render.running = true
|
||||
}
|
||||
|
||||
beforeDestroy() {
|
||||
render.running = false
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div>
|
||||
<canvas ref='canvas' style={ this.styleCanvas }/>
|
||||
<script id="shader-fs" type="x-shader/x-fragment"> { require('./fragment.glsl') } </script>
|
||||
<script id="shader-vs" type="x-shader/x-vertex"> { require('./vertex.glsl') } </script>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,90 +1,66 @@
|
||||
import { AppInputThemePalette, AppTheme } from '@/models/app'
|
||||
import { AppModule } from '@/store/app'
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { CreateElement } from 'vue/types/umd'
|
||||
import { defineComponent, computed } from 'vue'
|
||||
import { useAppStore } from '@/store/app'
|
||||
import type { AppInputThemePalette } from '@/models/app'
|
||||
|
||||
@Component
|
||||
export default class InfinityTheme extends Vue {
|
||||
get theme() {
|
||||
return AppModule.activeTheme as AppTheme
|
||||
}
|
||||
|
||||
get palette() {
|
||||
const input = AppModule.getThemeInput('palette') as AppInputThemePalette
|
||||
const index = input?.value as number || 0
|
||||
const values = input?.values || []
|
||||
|
||||
return values[index] as string[] || ['#51eaea', '#fffde1', '#ff9d76', '#FB3569']
|
||||
}
|
||||
|
||||
get amount() {
|
||||
return AppModule.getThemeInput('amount')?.value || 30 || 30
|
||||
}
|
||||
|
||||
get animationSpeed() {
|
||||
return AppModule.getThemeInput('animation-speed')?.value || 35 || 35
|
||||
}
|
||||
export default defineComponent({
|
||||
name: 'InfinityTheme',
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
|
||||
get depth() {
|
||||
return AppModule.getThemeInput('depth')?.value || 200
|
||||
}
|
||||
const palette = computed(() => {
|
||||
const input = appStore.getThemeInput('palette') as AppInputThemePalette
|
||||
const index = (input?.value as number) || 0
|
||||
const values = input?.values || []
|
||||
return (values[index] as string[]) || ['#51eaea', '#fffde1', '#ff9d76', '#FB3569']
|
||||
})
|
||||
|
||||
get size() {
|
||||
return AppModule.getThemeInput('size')?.value || 17 || 18
|
||||
}
|
||||
const amount = computed(() => appStore.getThemeInput('amount')?.value || 30)
|
||||
const animationSpeed = computed(() => appStore.getThemeInput('animation-speed')?.value || 35)
|
||||
const depth = computed(() => appStore.getThemeInput('depth')?.value || 200)
|
||||
const size = computed(() => appStore.getThemeInput('size')?.value || 17)
|
||||
|
||||
get color() {
|
||||
return `@p(${this.palette.join(', ')});`
|
||||
}
|
||||
const color = computed(() => `@p(${palette.value.join(', ')});`)
|
||||
|
||||
render(h: CreateElement) {
|
||||
return h('div', {
|
||||
class: 'position-center',
|
||||
domProps: {
|
||||
innerHTML: `<css-doodle>
|
||||
:doodle {
|
||||
@grid: ${this.amount}x1 / ${this.size}vmin;
|
||||
--deg: @p(-180deg, 180deg);
|
||||
return () => {
|
||||
const innerHTML = `<css-doodle>
|
||||
:doodle {
|
||||
@grid: ${amount.value}x1 / ${size.value}vmin;
|
||||
--deg: @p(-180deg, 180deg);
|
||||
}
|
||||
:container {
|
||||
perspective: 10vmin;
|
||||
}
|
||||
:after, :before {
|
||||
content: '';
|
||||
background: ${color.value};
|
||||
@place-cell: @r(100%) @r(100%);
|
||||
@size: @r(6px);
|
||||
@shape: heart;
|
||||
}
|
||||
@place-cell: center;
|
||||
@size: ${depth.value}%;
|
||||
box-shadow: @m200(0 0 50px ${color.value});
|
||||
background: @m100(
|
||||
radial-gradient(${color.value} 50%, transparent 0)
|
||||
@r(-20%, 120%) @r(-20%, 100%) / 1px 1px
|
||||
no-repeat
|
||||
);
|
||||
will-change: transform, opacity;
|
||||
animation: scale-up ${animationSpeed.value}s linear infinite;
|
||||
animation-delay: calc(-${animationSpeed.value}s / @size() * @i());
|
||||
@keyframes scale-up {
|
||||
0%, 95.01%, 100% {
|
||||
transform: translateZ(0) rotate(0);
|
||||
opacity: 0;
|
||||
}
|
||||
:container {
|
||||
perspective: 10vmin;
|
||||
10% { opacity: 1; }
|
||||
95% {
|
||||
transform: translateZ(12vmin) rotateZ(@var(--deg));
|
||||
}
|
||||
:after, :before {
|
||||
content: '';
|
||||
background: ${this.color};
|
||||
@place-cell: @r(100%) @r(100%);
|
||||
@size: @r(6px);
|
||||
@shape: heart;
|
||||
}
|
||||
|
||||
@place-cell: center;
|
||||
@size: ${this.depth}%;
|
||||
|
||||
box-shadow: @m200(0 0 50px ${this.color});
|
||||
background: @m100(
|
||||
radial-gradient(${this.color} 50%, transparent 0)
|
||||
@r(-20%, 120%) @r(-20%, 100%) / 1px 1px
|
||||
no-repeat
|
||||
);
|
||||
|
||||
will-change: transform, opacity;
|
||||
animation: scale-up ${this.animationSpeed}s linear infinite;
|
||||
animation-delay: calc(-${this.animationSpeed}s / @size() * @i());
|
||||
|
||||
@keyframes scale-up {
|
||||
0%, 95.01%, 100% {
|
||||
transform: translateZ(0) rotate(0);
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
95% {
|
||||
transform: translateZ(12vmin) rotateZ(@var(--deg));
|
||||
}
|
||||
}
|
||||
</css-doodle>`
|
||||
}
|
||||
})
|
||||
}
|
||||
</css-doodle>`
|
||||
|
||||
return <div class="position-center" innerHTML={innerHTML} />
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,62 +1,53 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { defineComponent, ref, computed, onMounted, onBeforeUnmount } from 'vue'
|
||||
import GL from '@/utils/gl'
|
||||
import { AppModule } from '@/store/app'
|
||||
let render: GL
|
||||
|
||||
@Component
|
||||
export default class PlanetTheme extends Vue {
|
||||
get animationSpeed() {
|
||||
return AppModule.getThemeInput('animation-speed')?.value as number || 45
|
||||
}
|
||||
|
||||
get position() {
|
||||
return AppModule.getThemeInput('position')?.value as number || 2.14
|
||||
}
|
||||
|
||||
get pxratio() {
|
||||
return AppModule.getThemeInput('pxratio')?.value as number || 0.8
|
||||
}
|
||||
|
||||
mounted() {
|
||||
const vm = this
|
||||
import { useAppStore } from '@/store/app'
|
||||
import fragmentShader from './fragment.glsl'
|
||||
import vertexShader from './vertex.glsl'
|
||||
|
||||
render = new GL(
|
||||
this.$refs.canvas as HTMLCanvasElement,
|
||||
document.querySelector('script#shader-vs')?.textContent || '',
|
||||
document.querySelector('script#shader-fs')?.textContent || '',
|
||||
window.innerWidth,
|
||||
window.innerHeight,
|
||||
{
|
||||
renderOptions: {
|
||||
externalTimeUse: true
|
||||
},
|
||||
renderHook() {
|
||||
const gl = this as unknown as GL
|
||||
let render: GL
|
||||
|
||||
if (!gl.programInfo.uniforms.position) {
|
||||
gl.programInfo.uniforms.position = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'camR')
|
||||
export default defineComponent({
|
||||
name: 'PlanetTheme',
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
const canvasRef = ref<HTMLCanvasElement | null>(null)
|
||||
|
||||
const animationSpeed = computed(() => appStore.getThemeInput('animation-speed')?.value as number || 45)
|
||||
const position = computed(() => appStore.getThemeInput('position')?.value as number || 2.14)
|
||||
const pxratio = computed(() => appStore.getThemeInput('pxratio')?.value as number || 0.8)
|
||||
|
||||
onMounted(() => {
|
||||
render = new GL(
|
||||
canvasRef.value!,
|
||||
vertexShader,
|
||||
fragmentShader,
|
||||
window.innerWidth,
|
||||
window.innerHeight,
|
||||
{
|
||||
renderOptions: { externalTimeUse: true },
|
||||
renderHook() {
|
||||
const gl = this as unknown as GL
|
||||
if (!gl.programInfo.uniforms.position) {
|
||||
gl.programInfo.uniforms.position = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'camR')
|
||||
}
|
||||
gl.pxratio = pxratio.value
|
||||
gl.time += animationSpeed.value / 500
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.time, gl.time + (gl.time * animationSpeed.value / 10))
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.position, position.value)
|
||||
}
|
||||
|
||||
gl.pxratio = vm.pxratio
|
||||
gl.time += vm.animationSpeed / 500
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.time, gl.time + (gl.time * vm.animationSpeed / 10))
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.position, vm.position)
|
||||
}
|
||||
}
|
||||
)
|
||||
render.running = true
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
render.running = false
|
||||
})
|
||||
|
||||
return () => (
|
||||
<div>
|
||||
<canvas ref={canvasRef} />
|
||||
</div>
|
||||
)
|
||||
|
||||
render.running = true
|
||||
}
|
||||
|
||||
beforeDestroy() {
|
||||
render.running = false
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div>
|
||||
<canvas ref='canvas' />
|
||||
<script id="shader-fs" type="x-shader/x-fragment"> { require('./fragment.glsl') } </script>
|
||||
<script id="shader-vs" type="x-shader/x-vertex"> { require('./vertex.glsl') } </script>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,67 +1,53 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { defineComponent, ref, computed, onMounted, onBeforeUnmount } from 'vue'
|
||||
import GL from '@/utils/gl'
|
||||
import { AppModule } from '@/store/app'
|
||||
let render: GL
|
||||
|
||||
@Component
|
||||
export default class PlasmaTheme extends Vue {
|
||||
get hue() {
|
||||
return AppModule.getThemeInput('hue')?.value as number || 0
|
||||
}
|
||||
|
||||
get filter() {
|
||||
return `hue-rotate(${this.hue}deg)`
|
||||
}
|
||||
|
||||
get styleCanvas() {
|
||||
return {
|
||||
filter: this.filter
|
||||
}
|
||||
}
|
||||
|
||||
get animationSpeed() {
|
||||
return AppModule.getThemeInput('animation-speed')?.value as number || 45
|
||||
}
|
||||
import { useAppStore } from '@/store/app'
|
||||
import fragmentShader from './fragment.glsl'
|
||||
import vertexShader from './vertex.glsl'
|
||||
|
||||
get pxratio() {
|
||||
return AppModule.getThemeInput('pxratio')?.value as number || 0.8
|
||||
}
|
||||
|
||||
mounted() {
|
||||
const vm = this
|
||||
|
||||
render = new GL(
|
||||
this.$refs.canvas as HTMLCanvasElement,
|
||||
document.querySelector('script#shader-vs')?.textContent || '',
|
||||
document.querySelector('script#shader-fs')?.textContent || '',
|
||||
window.innerWidth,
|
||||
window.innerHeight,
|
||||
{
|
||||
renderOptions: {
|
||||
externalTimeUse: true
|
||||
},
|
||||
renderHook() {
|
||||
const gl = this as unknown as GL
|
||||
let render: GL
|
||||
|
||||
gl.pxratio = vm.pxratio
|
||||
gl.time += vm.animationSpeed / 500
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.time, gl.time)
|
||||
export default defineComponent({
|
||||
name: 'PlasmaTheme',
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
const canvasRef = ref<HTMLCanvasElement | null>(null)
|
||||
|
||||
const hue = computed(() => appStore.getThemeInput('hue')?.value as number || 0)
|
||||
const animationSpeed = computed(() => appStore.getThemeInput('animation-speed')?.value as number || 45)
|
||||
const pxratio = computed(() => appStore.getThemeInput('pxratio')?.value as number || 0.8)
|
||||
|
||||
const styleCanvas = computed(() => ({
|
||||
filter: `hue-rotate(${hue.value}deg)`
|
||||
}))
|
||||
|
||||
onMounted(() => {
|
||||
render = new GL(
|
||||
canvasRef.value!,
|
||||
vertexShader,
|
||||
fragmentShader,
|
||||
window.innerWidth,
|
||||
window.innerHeight,
|
||||
{
|
||||
renderOptions: { externalTimeUse: true },
|
||||
renderHook() {
|
||||
const gl = this as unknown as GL
|
||||
gl.pxratio = pxratio.value
|
||||
gl.time += animationSpeed.value / 500
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.time, gl.time)
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
render.running = true
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
render.running = false
|
||||
})
|
||||
|
||||
return () => (
|
||||
<div>
|
||||
<canvas ref={canvasRef} style={styleCanvas.value} />
|
||||
</div>
|
||||
)
|
||||
|
||||
render.running = true
|
||||
}
|
||||
|
||||
beforeDestroy() {
|
||||
render.running = false
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div>
|
||||
<canvas ref='canvas' style={ this.styleCanvas }/>
|
||||
<script id="shader-fs" type="x-shader/x-fragment"> { require('./fragment.glsl') } </script>
|
||||
<script id="shader-vs" type="x-shader/x-vertex"> { require('./vertex.glsl') } </script>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,90 +1,63 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { defineComponent, ref, computed, onMounted, onBeforeUnmount } from 'vue'
|
||||
import GL from '@/utils/gl'
|
||||
import { AppModule } from '@/store/app'
|
||||
let render: GL
|
||||
|
||||
@Component
|
||||
export default class RandomTheme extends Vue {
|
||||
get animationSpeed() {
|
||||
return AppModule.getThemeInput('animation-speed')?.value as number || 45
|
||||
}
|
||||
|
||||
get pxratio() {
|
||||
return AppModule.getThemeInput('pxratio')?.value as number || 0.8
|
||||
}
|
||||
|
||||
get symmetry() {
|
||||
return AppModule.getThemeInput('symmetry')?.value as number || 64
|
||||
}
|
||||
import { useAppStore } from '@/store/app'
|
||||
import fragmentShader from './fragment.glsl'
|
||||
import vertexShader from './vertex.glsl'
|
||||
|
||||
get thickness() {
|
||||
return AppModule.getThemeInput('thickness')?.value as number || 64
|
||||
}
|
||||
|
||||
get hue() {
|
||||
return AppModule.getThemeInput('hue')?.value as number || 0
|
||||
}
|
||||
|
||||
get brightness() {
|
||||
return AppModule.getThemeInput('brightness')?.value as number || 0
|
||||
}
|
||||
|
||||
get invert() {
|
||||
return AppModule.getThemeInput('invert')?.value as boolean || false
|
||||
}
|
||||
|
||||
get filter() {
|
||||
return `hue-rotate(${this.hue}deg) invert(${Number(this.invert)}) brightness(${this.brightness})`
|
||||
}
|
||||
|
||||
get styleCanvas() {
|
||||
return {
|
||||
filter: this.filter
|
||||
}
|
||||
}
|
||||
|
||||
mounted() {
|
||||
const vm = this
|
||||
|
||||
render = new GL(
|
||||
this.$refs.canvas as HTMLCanvasElement,
|
||||
document.querySelector('script#shader-vs')?.textContent || '',
|
||||
document.querySelector('script#shader-fs')?.textContent || '',
|
||||
window.innerWidth,
|
||||
window.innerHeight,
|
||||
{
|
||||
renderOptions: {
|
||||
externalTimeUse: true
|
||||
},
|
||||
renderHook() {
|
||||
const gl = this as unknown as GL
|
||||
let render: GL
|
||||
|
||||
if (!gl.programInfo.uniforms.symmetry) {
|
||||
gl.programInfo.uniforms.symmetry = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'symmetry')
|
||||
gl.programInfo.uniforms.thickness = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'thickness')
|
||||
export default defineComponent({
|
||||
name: 'RandomTheme',
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
const canvasRef = ref<HTMLCanvasElement | null>(null)
|
||||
|
||||
const hue = computed(() => appStore.getThemeInput('hue')?.value as number || 0)
|
||||
const brightness = computed(() => appStore.getThemeInput('brightness')?.value as number || 0)
|
||||
const invert = computed(() => appStore.getThemeInput('invert')?.value as boolean || false)
|
||||
const animationSpeed = computed(() => appStore.getThemeInput('animation-speed')?.value as number || 45)
|
||||
const symmetry = computed(() => appStore.getThemeInput('symmetry')?.value as number || 64)
|
||||
const thickness = computed(() => appStore.getThemeInput('thickness')?.value as number || 64)
|
||||
const pxratio = computed(() => appStore.getThemeInput('pxratio')?.value as number || 0.8)
|
||||
|
||||
const styleCanvas = computed(() => ({
|
||||
filter: `hue-rotate(${hue.value}deg) invert(${Number(invert.value)}) brightness(${brightness.value})`
|
||||
}))
|
||||
|
||||
onMounted(() => {
|
||||
render = new GL(
|
||||
canvasRef.value!,
|
||||
vertexShader,
|
||||
fragmentShader,
|
||||
window.innerWidth,
|
||||
window.innerHeight,
|
||||
{
|
||||
renderOptions: { externalTimeUse: true },
|
||||
renderHook() {
|
||||
const gl = this as unknown as GL
|
||||
if (!gl.programInfo.uniforms.symmetry) {
|
||||
gl.programInfo.uniforms.symmetry = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'symmetry')
|
||||
gl.programInfo.uniforms.thickness = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'thickness')
|
||||
}
|
||||
gl.pxratio = pxratio.value
|
||||
gl.time += animationSpeed.value / 500
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.symmetry, symmetry.value)
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.thickness, thickness.value)
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.time, gl.time + (gl.time * animationSpeed.value / 10))
|
||||
}
|
||||
|
||||
gl.pxratio = vm.pxratio
|
||||
gl.time += vm.animationSpeed / 500
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.symmetry, vm.symmetry)
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.thickness, vm.thickness)
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.time, gl.time + (gl.time * vm.animationSpeed / 10))
|
||||
}
|
||||
}
|
||||
)
|
||||
render.running = true
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
render.running = false
|
||||
})
|
||||
|
||||
return () => (
|
||||
<div>
|
||||
<canvas ref={canvasRef} style={styleCanvas.value} />
|
||||
</div>
|
||||
)
|
||||
|
||||
render.running = true
|
||||
}
|
||||
|
||||
beforeDestroy() {
|
||||
render.running = false
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div>
|
||||
<canvas ref='canvas' style={ this.styleCanvas } />
|
||||
<script id="shader-fs" type="x-shader/x-fragment"> { require('./fragment.glsl') } </script>
|
||||
<script id="shader-vs" type="x-shader/x-vertex"> { require('./vertex.glsl') } </script>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,68 +1,56 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { defineComponent, ref, computed, onMounted, onBeforeUnmount } from 'vue'
|
||||
import GL from '@/utils/gl'
|
||||
import { AppModule } from '@/store/app'
|
||||
let render: GL
|
||||
|
||||
@Component
|
||||
export default class RingsTheme extends Vue {
|
||||
get animationSpeed() {
|
||||
return AppModule.getThemeInput('animation-speed')?.value as number || 45
|
||||
}
|
||||
|
||||
get hue() {
|
||||
return AppModule.getThemeInput('hue')?.value as number || 0
|
||||
}
|
||||
|
||||
get zoom() {
|
||||
return AppModule.getThemeInput('zoom')?.value as number || 32
|
||||
}
|
||||
|
||||
get pxratio() {
|
||||
return AppModule.getThemeInput('pxratio')?.value as number || 0.8
|
||||
}
|
||||
import { useAppStore } from '@/store/app'
|
||||
import fragmentShader from './fragment.glsl'
|
||||
import vertexShader from './vertex.glsl'
|
||||
|
||||
mounted() {
|
||||
const vm = this
|
||||
|
||||
render = new GL(
|
||||
this.$refs.canvas as HTMLCanvasElement,
|
||||
document.querySelector('script#shader-vs')?.textContent || '',
|
||||
document.querySelector('script#shader-fs')?.textContent || '',
|
||||
window.innerWidth,
|
||||
window.innerHeight,
|
||||
{
|
||||
renderOptions: {
|
||||
externalTimeUse: true
|
||||
},
|
||||
renderHook() {
|
||||
const gl = this as unknown as GL
|
||||
let render: GL
|
||||
|
||||
if (!gl.programInfo.uniforms.hue) {
|
||||
gl.programInfo.uniforms.hue = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'hue')
|
||||
gl.programInfo.uniforms.zoom = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'zoom')
|
||||
export default defineComponent({
|
||||
name: 'RingsTheme',
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
const canvasRef = ref<HTMLCanvasElement | null>(null)
|
||||
|
||||
const hue = computed(() => appStore.getThemeInput('hue')?.value as number || 0)
|
||||
const animationSpeed = computed(() => appStore.getThemeInput('animation-speed')?.value as number || 45)
|
||||
const zoom = computed(() => appStore.getThemeInput('zoom')?.value as number || 32)
|
||||
const pxratio = computed(() => appStore.getThemeInput('pxratio')?.value as number || 0.8)
|
||||
|
||||
onMounted(() => {
|
||||
render = new GL(
|
||||
canvasRef.value!,
|
||||
vertexShader,
|
||||
fragmentShader,
|
||||
window.innerWidth,
|
||||
window.innerHeight,
|
||||
{
|
||||
renderOptions: { externalTimeUse: true },
|
||||
renderHook() {
|
||||
const gl = this as unknown as GL
|
||||
if (!gl.programInfo.uniforms.hue) {
|
||||
gl.programInfo.uniforms.hue = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'hue')
|
||||
gl.programInfo.uniforms.zoom = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'zoom')
|
||||
}
|
||||
gl.time += animationSpeed.value / 500
|
||||
gl.pxratio = pxratio.value
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.time, gl.time)
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.hue, hue.value)
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.zoom, zoom.value)
|
||||
}
|
||||
|
||||
gl.time += vm.animationSpeed / 500
|
||||
gl.pxratio = vm.pxratio
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.time, gl.time)
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.hue, vm.hue)
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.zoom, vm.zoom)
|
||||
}
|
||||
}
|
||||
)
|
||||
render.running = true
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
render.running = false
|
||||
})
|
||||
|
||||
return () => (
|
||||
<div>
|
||||
<canvas ref={canvasRef} />
|
||||
</div>
|
||||
)
|
||||
|
||||
render.running = true
|
||||
}
|
||||
|
||||
beforeDestroy() {
|
||||
render.running = false
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div>
|
||||
<canvas ref='canvas' />
|
||||
<script id="shader-fs" type="x-shader/x-fragment"> { require('./fragment.glsl') } </script>
|
||||
<script id="shader-vs" type="x-shader/x-vertex"> { require('./vertex.glsl') } </script>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,37 +1,46 @@
|
||||
import { AppModule } from '@/store/app'
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import Parallax from 'parallax-js'
|
||||
|
||||
@Component
|
||||
export default class SpaceTheme extends Vue {
|
||||
parallax: null | Parallax = null
|
||||
export default defineComponent({
|
||||
name: 'SpaceTheme',
|
||||
setup() {
|
||||
const sceneRef = ref<HTMLElement | null>(null)
|
||||
let parallax: Parallax | null = null
|
||||
|
||||
render() {
|
||||
return <div class="space" ref="scene" data-hover-only="true" data-friction-x="0.1" data-friction-y="0.1" data-scalar-x="25" data-scalar-y="15">
|
||||
<li class="prllx-block" data-depth="0.0">
|
||||
<div class="main-planet position-center"></div>
|
||||
</li>
|
||||
<li class="prllx-block" data-depth="0.2">
|
||||
<div class="ufo"></div>
|
||||
</li>
|
||||
<li class="prllx-block" data-depth="0.1">
|
||||
<div class="meteor"></div>
|
||||
</li>
|
||||
<li class="prllx-block" data-depth="0.07">
|
||||
<div class="hole"></div>
|
||||
</li>
|
||||
<li class="prllx-block" data-depth="0.02">
|
||||
<div class="another-planet"></div>
|
||||
</li>
|
||||
</div>
|
||||
}
|
||||
onMounted(() => {
|
||||
if (sceneRef.value) parallax = new Parallax(sceneRef.value)
|
||||
})
|
||||
|
||||
mounted() {
|
||||
const scene = this.$refs.scene as HTMLElement
|
||||
if (scene) { this.parallax = new Parallax(scene) }
|
||||
}
|
||||
onBeforeUnmount(() => {
|
||||
parallax?.destroy()
|
||||
})
|
||||
|
||||
beforeDestroy() {
|
||||
if (this.parallax) this.parallax.destroy()
|
||||
return () => (
|
||||
<div
|
||||
class="space"
|
||||
ref={sceneRef}
|
||||
data-hover-only="true"
|
||||
data-friction-x="0.1"
|
||||
data-friction-y="0.1"
|
||||
data-scalar-x="25"
|
||||
data-scalar-y="15"
|
||||
>
|
||||
<li class="prllx-block" data-depth="0.0">
|
||||
<div class="main-planet position-center" />
|
||||
</li>
|
||||
<li class="prllx-block" data-depth="0.2">
|
||||
<div class="ufo" />
|
||||
</li>
|
||||
<li class="prllx-block" data-depth="0.1">
|
||||
<div class="meteor" />
|
||||
</li>
|
||||
<li class="prllx-block" data-depth="0.07">
|
||||
<div class="hole" />
|
||||
</li>
|
||||
<li class="prllx-block" data-depth="0.02">
|
||||
<div class="another-planet" />
|
||||
</li>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,84 +1,60 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { defineComponent, ref, computed, onMounted, onBeforeUnmount } from 'vue'
|
||||
import GL from '@/utils/gl'
|
||||
import { AppModule } from '@/store/app'
|
||||
let render: GL
|
||||
|
||||
@Component
|
||||
export default class SphereTheme extends Vue {
|
||||
get animationSpeed() {
|
||||
return AppModule.getThemeInput('animation-speed')?.value as number || 45
|
||||
}
|
||||
|
||||
get size() {
|
||||
return AppModule.getThemeInput('size')?.value as number || 0.2
|
||||
}
|
||||
|
||||
get pxratio() {
|
||||
return AppModule.getThemeInput('pxratio')?.value as number || 0.8
|
||||
}
|
||||
|
||||
get hue() {
|
||||
return AppModule.getThemeInput('hue')?.value as number || 0
|
||||
}
|
||||
|
||||
get invert() {
|
||||
return AppModule.getThemeInput('invert')?.value as boolean || false
|
||||
}
|
||||
|
||||
get brightness() {
|
||||
return AppModule.getThemeInput('brightness')?.value as number || 0
|
||||
}
|
||||
import { useAppStore } from '@/store/app'
|
||||
import fragmentShader from './fragment.glsl'
|
||||
import vertexShader from './vertex.glsl'
|
||||
|
||||
get filter() {
|
||||
return `hue-rotate(${this.hue}deg) invert(${Number(this.invert)}) brightness(${this.brightness})`
|
||||
}
|
||||
|
||||
get styleCanvas() {
|
||||
return {
|
||||
filter: this.filter
|
||||
}
|
||||
}
|
||||
|
||||
async mounted() {
|
||||
const vm = this
|
||||
|
||||
render = new GL(
|
||||
this.$refs.canvas as HTMLCanvasElement,
|
||||
document.querySelector('script#shader-vs')?.textContent || '',
|
||||
document.querySelector('script#shader-fs')?.textContent || '',
|
||||
window.innerWidth,
|
||||
window.innerHeight,
|
||||
{
|
||||
renderOptions: {
|
||||
externalTimeUse: true
|
||||
},
|
||||
renderHook() {
|
||||
const gl = this as unknown as GL
|
||||
let render: GL
|
||||
|
||||
if (!gl.programInfo.uniforms.size) {
|
||||
gl.programInfo.uniforms.size = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'size')
|
||||
export default defineComponent({
|
||||
name: 'SphereTheme',
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
const canvasRef = ref<HTMLCanvasElement | null>(null)
|
||||
|
||||
const hue = computed(() => appStore.getThemeInput('hue')?.value as number || 0)
|
||||
const brightness = computed(() => appStore.getThemeInput('brightness')?.value as number || 0)
|
||||
const invert = computed(() => appStore.getThemeInput('invert')?.value as boolean || false)
|
||||
const animationSpeed = computed(() => appStore.getThemeInput('animation-speed')?.value as number || 45)
|
||||
const size = computed(() => appStore.getThemeInput('size')?.value as number || 0.2)
|
||||
const pxratio = computed(() => appStore.getThemeInput('pxratio')?.value as number || 0.8)
|
||||
|
||||
const styleCanvas = computed(() => ({
|
||||
filter: `hue-rotate(${hue.value}deg) invert(${Number(invert.value)}) brightness(${brightness.value})`
|
||||
}))
|
||||
|
||||
onMounted(() => {
|
||||
render = new GL(
|
||||
canvasRef.value!,
|
||||
vertexShader,
|
||||
fragmentShader,
|
||||
window.innerWidth,
|
||||
window.innerHeight,
|
||||
{
|
||||
renderOptions: { externalTimeUse: true },
|
||||
renderHook() {
|
||||
const gl = this as unknown as GL
|
||||
if (!gl.programInfo.uniforms.size) {
|
||||
gl.programInfo.uniforms.size = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'size')
|
||||
}
|
||||
gl.pxratio = pxratio.value
|
||||
gl.time += animationSpeed.value / 500
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.time, gl.time)
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.size, size.value)
|
||||
}
|
||||
|
||||
gl.pxratio = vm.pxratio
|
||||
gl.time += vm.animationSpeed / 500
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.time, gl.time)
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.size, vm.size)
|
||||
}
|
||||
}
|
||||
)
|
||||
render.running = true
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
render.running = false
|
||||
})
|
||||
|
||||
return () => (
|
||||
<div>
|
||||
<canvas ref={canvasRef} style={styleCanvas.value} />
|
||||
</div>
|
||||
)
|
||||
|
||||
render.running = true
|
||||
}
|
||||
|
||||
beforeDestroy() {
|
||||
render.running = false
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div>
|
||||
<canvas ref='canvas' style={ this.styleCanvas }/>
|
||||
<script id="shader-fs" type="x-shader/x-fragment"> { require('./fragment.glsl') } </script>
|
||||
<script id="shader-vs" type="x-shader/x-vertex"> { require('./vertex.glsl') } </script>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,53 +1,59 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import Parallax from 'parallax-js'
|
||||
import AppIcon from '@/components/app/AppIcon.vue'
|
||||
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import Parallax from 'parallax-js'
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
AppIcon
|
||||
}
|
||||
})
|
||||
export default class SuprematismTheme extends Vue {
|
||||
parallax: null | Parallax = null
|
||||
export default defineComponent({
|
||||
name: 'SuprematismTheme',
|
||||
setup() {
|
||||
const sceneRef = ref<HTMLElement | null>(null)
|
||||
let parallax: Parallax | null = null
|
||||
|
||||
render() {
|
||||
return <div class="suprematism" ref="scene" data-hover-only="true" data-friction-x="0.1" data-friction-y="0.1" data-scalar-x="25" data-scalar-y="15">
|
||||
<li class="prllx-block" data-depth="0.0">
|
||||
<div class="parralax-item-cube position-center"></div>
|
||||
</li>
|
||||
<li class="prllx-block" data-depth="0.05">
|
||||
<div class="parralax-item-bottom-left">
|
||||
<AppIcon name="suprematism-bottom-left"/>
|
||||
</div>
|
||||
<div class="parralax-item-bottom-right">
|
||||
<AppIcon name="suprematism-bottom-right"/>
|
||||
</div>
|
||||
<div class="parralax-item-top-right">
|
||||
<AppIcon name="suprematism-top-right"/>
|
||||
</div>
|
||||
<div class="parralax-item-top-left">
|
||||
<AppIcon name="suprematism-top-left"/>
|
||||
</div>
|
||||
</li>
|
||||
<li class="prllx-block" data-depth=".1">
|
||||
<div class="parralax-item-bottom-right-triangle"></div>
|
||||
<div class="parralax-item-top-left-multi"></div>
|
||||
<div class="parralax-item-bottom-left-pattern">
|
||||
<AppIcon name="suprematism-bottom-left-pattern"/>
|
||||
</div>
|
||||
</li>
|
||||
<li class="prllx-block" data-depth=".2">
|
||||
<div class="ps-parralax-item-top-right-circle"></div>
|
||||
</li>
|
||||
</div>
|
||||
}
|
||||
onMounted(() => {
|
||||
if (sceneRef.value) parallax = new Parallax(sceneRef.value)
|
||||
})
|
||||
|
||||
mounted() {
|
||||
const scene = this.$refs.scene as HTMLElement
|
||||
if (scene) { this.parallax = new Parallax(scene) }
|
||||
}
|
||||
onBeforeUnmount(() => {
|
||||
parallax?.destroy()
|
||||
})
|
||||
|
||||
beforeDestroy() {
|
||||
if (this.parallax) this.parallax.destroy()
|
||||
return () => (
|
||||
<div
|
||||
class="suprematism"
|
||||
ref={sceneRef}
|
||||
data-hover-only="true"
|
||||
data-friction-x="0.1"
|
||||
data-friction-y="0.1"
|
||||
data-scalar-x="25"
|
||||
data-scalar-y="15"
|
||||
>
|
||||
<li class="prllx-block" data-depth="0.0">
|
||||
<div class="parralax-item-cube position-center" />
|
||||
</li>
|
||||
<li class="prllx-block" data-depth="0.05">
|
||||
<div class="parralax-item-bottom-left">
|
||||
<AppIcon name="suprematism-bottom-left" />
|
||||
</div>
|
||||
<div class="parralax-item-bottom-right">
|
||||
<AppIcon name="suprematism-bottom-right" />
|
||||
</div>
|
||||
<div class="parralax-item-top-right">
|
||||
<AppIcon name="suprematism-top-right" />
|
||||
</div>
|
||||
<div class="parralax-item-top-left">
|
||||
<AppIcon name="suprematism-top-left" />
|
||||
</div>
|
||||
</li>
|
||||
<li class="prllx-block" data-depth=".1">
|
||||
<div class="parralax-item-bottom-right-triangle" />
|
||||
<div class="parralax-item-top-left-multi" />
|
||||
<div class="parralax-item-bottom-left-pattern">
|
||||
<AppIcon name="suprematism-bottom-left-pattern" />
|
||||
</div>
|
||||
</li>
|
||||
<li class="prllx-block" data-depth=".2">
|
||||
<div class="ps-parralax-item-top-right-circle" />
|
||||
</li>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,53 +1,48 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { defineComponent, ref, computed, onMounted, onBeforeUnmount } from 'vue'
|
||||
import GL from '@/utils/gl'
|
||||
import { AppModule } from '@/store/app'
|
||||
let render: GL
|
||||
|
||||
@Component
|
||||
export default class TendernessTheme extends Vue {
|
||||
get animationSpeed() {
|
||||
return AppModule.getThemeInput('animation-speed')?.value as number || 45
|
||||
}
|
||||
|
||||
get pxratio() {
|
||||
return AppModule.getThemeInput('pxratio')?.value as number || 0.8
|
||||
}
|
||||
|
||||
mounted() {
|
||||
const vm = this
|
||||
import { useAppStore } from '@/store/app'
|
||||
import fragmentShader from './fragment.glsl'
|
||||
import vertexShader from './vertex.glsl'
|
||||
|
||||
render = new GL(
|
||||
this.$refs.canvas as HTMLCanvasElement,
|
||||
document.querySelector('script#shader-vs')?.textContent || '',
|
||||
document.querySelector('script#shader-fs')?.textContent || '',
|
||||
window.innerWidth,
|
||||
window.innerHeight,
|
||||
{
|
||||
renderOptions: {
|
||||
externalTimeUse: true
|
||||
},
|
||||
renderHook() {
|
||||
const gl = this as unknown as GL
|
||||
let render: GL
|
||||
|
||||
gl.time += vm.animationSpeed / 500
|
||||
gl.pxratio = vm.pxratio
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.time, gl.time)
|
||||
export default defineComponent({
|
||||
name: 'TendernessTheme',
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
const canvasRef = ref<HTMLCanvasElement | null>(null)
|
||||
|
||||
const animationSpeed = computed(() => appStore.getThemeInput('animation-speed')?.value as number || 45)
|
||||
const pxratio = computed(() => appStore.getThemeInput('pxratio')?.value as number || 0.8)
|
||||
|
||||
onMounted(() => {
|
||||
render = new GL(
|
||||
canvasRef.value!,
|
||||
vertexShader,
|
||||
fragmentShader,
|
||||
window.innerWidth,
|
||||
window.innerHeight,
|
||||
{
|
||||
renderOptions: { externalTimeUse: true },
|
||||
renderHook() {
|
||||
const gl = this as unknown as GL
|
||||
gl.time += animationSpeed.value / 500
|
||||
gl.pxratio = pxratio.value
|
||||
gl.ctx.uniform1f(gl.programInfo.uniforms.time, gl.time)
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
render.running = true
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
render.running = false
|
||||
})
|
||||
|
||||
return () => (
|
||||
<div>
|
||||
<canvas ref={canvasRef} />
|
||||
</div>
|
||||
)
|
||||
|
||||
render.running = true
|
||||
}
|
||||
|
||||
beforeDestroy() {
|
||||
render.running = false
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div>
|
||||
<canvas ref='canvas' />
|
||||
<script id="shader-fs" type="x-shader/x-fragment"> { require('./fragment.glsl') } </script>
|
||||
<script id="shader-vs" type="x-shader/x-vertex"> { require('./vertex.glsl') } </script>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import Vue from 'vue'
|
||||
|
||||
import type { App } from 'vue'
|
||||
import AppIcon from '@/components/app/AppIcon.vue'
|
||||
|
||||
Vue.component('AppIcon', AppIcon)
|
||||
export function registerComponents(app: App) {
|
||||
app.component('AppIcon', AppIcon)
|
||||
}
|
||||
|
||||
@ -1,26 +1,12 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter, { RouteConfig } from 'vue-router'
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import Home from '@/views/Home'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes: Array<RouteConfig> = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: Home
|
||||
},
|
||||
{
|
||||
path: '*',
|
||||
name: 'Undefined',
|
||||
component: Home
|
||||
}
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
base: process.env.BASE_URL,
|
||||
routes
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{ path: '/', name: 'Home', component: Home },
|
||||
{ path: '/:pathMatch(.*)*', name: 'Undefined', component: Home }
|
||||
]
|
||||
})
|
||||
|
||||
export default router
|
||||
|
||||
@ -0,0 +1,4 @@
|
||||
declare module '*.glsl' {
|
||||
const content: string
|
||||
export default content
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
|
||||
declare module 'vue/types/options' {
|
||||
interface ComponentOptions<V extends Vue> {
|
||||
[propName: string]: any;
|
||||
}
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import VueI18n, { IVueI18n } from 'vue-i18n'
|
||||
|
||||
declare module '*.vue' {
|
||||
|
||||
export default Vue
|
||||
}
|
||||
|
||||
declare module 'vue/types/vue' {
|
||||
export interface Vue {
|
||||
readonly $i18n: VueI18n & IVueI18n;
|
||||
$t: typeof VueI18n.prototype.t;
|
||||
$tc: typeof VueI18n.prototype.tc;
|
||||
$te: typeof VueI18n.prototype.te;
|
||||
$d: typeof VueI18n.prototype.d;
|
||||
$n: typeof VueI18n.prototype.n;
|
||||
}
|
||||
}
|
||||
@ -1,360 +1,248 @@
|
||||
import {
|
||||
Module,
|
||||
VuexModule,
|
||||
getModule,
|
||||
Mutation,
|
||||
Action
|
||||
} from 'vuex-module-decorators'
|
||||
import { Route } from 'vue-router'
|
||||
import router from '../router'
|
||||
import store from '@/store/index'
|
||||
|
||||
import {
|
||||
AppTheme,
|
||||
AppSettings,
|
||||
AppInputTheme,
|
||||
AppInputThemeValue,
|
||||
AppInputThemeGeneral
|
||||
} from '@/models/app'
|
||||
|
||||
import { LightdmSession, LightdmUsers } from '@/models/lightdm'
|
||||
import { defineStore } from 'pinia'
|
||||
import type { RouteLocationNormalized } from 'vue-router'
|
||||
import router from '@/router'
|
||||
|
||||
import type { AppTheme, AppSettings, AppInputTheme, AppInputThemeValue, AppInputThemeGeneral } from '@/models/app'
|
||||
import type { LightdmSession, LightdmUsers } from '@/models/lightdm'
|
||||
import type { LightDMBattery } from 'nody-greeter-types'
|
||||
|
||||
import { isDifferentRoute, parseQueryValue, randomize, randomizeSettingsTheme, setCSSVariable } from '@/utils/helper'
|
||||
import { AppThemes, defaultTheme } from '@/utils/constant'
|
||||
import { version } from '@/../package.json'
|
||||
import { LightdmHandler } from '@/utils/lightdm'
|
||||
import { LightDMBattery } from 'nody-greeter-types'
|
||||
|
||||
export interface AppState extends AppSettings {
|
||||
themes: AppTheme[];
|
||||
getMainSettings: AppSettings;
|
||||
activeTheme: AppTheme;
|
||||
battery: LightDMBattery | null;
|
||||
brightness?: number;
|
||||
username: string;
|
||||
desktops: LightdmSession[];
|
||||
users: LightdmUsers[];
|
||||
SET_STATE_APP: <S extends this, K extends keyof this>({ key, value }: { key: K; value: S[K] }) => void
|
||||
}
|
||||
|
||||
@Module({ dynamic: true, store, name: 'app' })
|
||||
class App extends VuexModule implements AppState {
|
||||
version = version
|
||||
currentTheme = ''
|
||||
currentOs = 'arch-linux'
|
||||
desktop = LightdmHandler.defaultSession
|
||||
username = LightdmHandler.username
|
||||
password = ''
|
||||
defaultColor = '#6BBBED'
|
||||
battery: LightDMBattery | null = null
|
||||
brightness = 0
|
||||
zoom = 1
|
||||
|
||||
users = LightdmHandler?.users
|
||||
desktops = LightdmHandler?.sessions
|
||||
showPassword = false
|
||||
generateRandomThemes = false
|
||||
themes = AppThemes
|
||||
|
||||
bodyClass: Record<string, boolean> = {
|
||||
blur: false,
|
||||
'no-transition': false,
|
||||
'show-framerate': false,
|
||||
'only-ui': false
|
||||
}
|
||||
|
||||
get isCharging() {
|
||||
return this.battery?.status === 'Charging'
|
||||
}
|
||||
|
||||
get batteryLevel() {
|
||||
return this.battery?.level || 0
|
||||
}
|
||||
|
||||
get isSupportFullApi() {
|
||||
return LightdmHandler.isSupportFullApi
|
||||
}
|
||||
|
||||
get getMainSettings(): AppSettings {
|
||||
const {
|
||||
zoom,
|
||||
themes,
|
||||
desktop,
|
||||
username,
|
||||
bodyClass,
|
||||
currentOs,
|
||||
currentTheme,
|
||||
defaultColor,
|
||||
generateRandomThemes
|
||||
} = this
|
||||
|
||||
return {
|
||||
zoom,
|
||||
themes,
|
||||
desktop,
|
||||
username,
|
||||
bodyClass,
|
||||
currentOs,
|
||||
currentTheme,
|
||||
defaultColor,
|
||||
generateRandomThemes
|
||||
}
|
||||
}
|
||||
|
||||
get showFrameRate() {
|
||||
return this.bodyClass['show-framerate']
|
||||
}
|
||||
|
||||
get activeTheme() {
|
||||
return this.themes.find(({ name }) => name === this.currentTheme) || defaultTheme
|
||||
}
|
||||
|
||||
get currentUser() {
|
||||
return this.users.find(({ username }) => username === this.username)
|
||||
}
|
||||
|
||||
get currentDesktop() {
|
||||
return this.desktops.find(({ key }) => key === this.desktop)
|
||||
}
|
||||
|
||||
get getThemeByName() {
|
||||
return (theme: string) => this.themes.find(({ name }) => name === theme)
|
||||
}
|
||||
|
||||
get getThemeInput() {
|
||||
return (name: string, theme?: AppTheme) => {
|
||||
return (theme || this.activeTheme as AppTheme).settings?.find(input => input.name === name)
|
||||
}
|
||||
}
|
||||
|
||||
get viewThemeOnly() {
|
||||
return this.bodyClass['only-ui']
|
||||
}
|
||||
|
||||
get isGithubMode() {
|
||||
return process.env.VUE_APP_VIEW === 'github'
|
||||
}
|
||||
|
||||
get personalInfo() {
|
||||
const { username, currentTheme, currentOs, desktop, version, defaultColor } = this
|
||||
|
||||
return { username, currentTheme, currentOs, desktop, version, defaultColor }
|
||||
}
|
||||
|
||||
get localStorageSettings() {
|
||||
const { personalInfo, bodyClass, themes } = this
|
||||
|
||||
return { personalInfo, bodyClass, themes }
|
||||
}
|
||||
|
||||
@Mutation
|
||||
SET_STATE_APP<S extends this, K extends keyof this>({ key, value }: { key: K; value: S[K] }) {
|
||||
this[key] = value
|
||||
}
|
||||
|
||||
@Mutation
|
||||
SAVE_STATE_APP<S extends this, K extends keyof this>({ key, value }: { key: K; value: S[K] }) {
|
||||
this[key] = value
|
||||
|
||||
const settings = JSON.parse(localStorage.getItem('settings') || '')
|
||||
settings[key] = value
|
||||
localStorage.setItem('settings', JSON.stringify(settings))
|
||||
}
|
||||
|
||||
@Mutation
|
||||
CHANGE_BODY_CLASS({ key, value }: { key: string; value: boolean }) {
|
||||
this.bodyClass[key] = value
|
||||
}
|
||||
|
||||
@Mutation
|
||||
CHANGE_THEME_INPUT({ input, value }: { input: AppInputTheme; value: AppInputThemeValue }) {
|
||||
input.value = value
|
||||
}
|
||||
|
||||
@Mutation
|
||||
CHANGE_SETTINGS_THEME({ theme, settings }: { theme: string; settings: AppTheme['settings'] }) {
|
||||
const currentTheme = this.themes.find(({ name }) => name === theme)
|
||||
|
||||
if (currentTheme) {
|
||||
currentTheme.settings = settings
|
||||
}
|
||||
}
|
||||
|
||||
@Action
|
||||
randomizeSettingsTheme() {
|
||||
const theme = this.activeTheme
|
||||
theme.settings = randomizeSettingsTheme(theme)
|
||||
|
||||
this.syncStoreWithQuery()
|
||||
}
|
||||
|
||||
@Action
|
||||
async changeTheme(themeName: string, themeSettings?: AppTheme['settings']) {
|
||||
const isExistTheme = this.getThemeByName(themeName)
|
||||
const finalTheme = isExistTheme ? themeName : this.themes[0].name
|
||||
|
||||
this.SET_STATE_APP({ key: 'currentTheme', value: finalTheme })
|
||||
|
||||
const needToChangeTheme = isExistTheme && themeSettings
|
||||
if (needToChangeTheme) {
|
||||
this.CHANGE_SETTINGS_THEME({ theme: finalTheme, settings: themeSettings })
|
||||
}
|
||||
|
||||
this.syncThemeColor()
|
||||
this.syncStoreWithQuery()
|
||||
}
|
||||
|
||||
@Action
|
||||
login() {
|
||||
LightdmHandler.login(this.username, this.password, this.currentDesktop?.key)
|
||||
}
|
||||
|
||||
@Action
|
||||
changeSettingsThemeInput({ key, value }: { key: string; value: AppInputThemeValue }) {
|
||||
const inputs = (this.activeTheme as AppTheme).settings || []
|
||||
const input = inputs?.find(input => input.name === key)
|
||||
|
||||
if (input) {
|
||||
this.CHANGE_THEME_INPUT({ input, value })
|
||||
}
|
||||
}
|
||||
|
||||
@Action
|
||||
toggleShowPassword() {
|
||||
this.SET_STATE_APP({ key: 'showPassword', value: !this.showPassword })
|
||||
}
|
||||
|
||||
@Action
|
||||
syncSettingsWithCache() {
|
||||
localStorage.setItem('settings', JSON.stringify(this.getMainSettings))
|
||||
}
|
||||
|
||||
@Action
|
||||
syncThemeColor() {
|
||||
const { color } = this.activeTheme
|
||||
let activeColor = color.active
|
||||
|
||||
if (this.activeTheme.settings) {
|
||||
const activeColorInput = this.activeTheme.settings.find(({ name }) => name === 'activeColor') as AppInputThemeGeneral
|
||||
if (activeColorInput) {
|
||||
activeColor = activeColorInput.value + ''
|
||||
import { version } from '../../package.json'
|
||||
|
||||
export const useAppStore = defineStore('app', {
|
||||
state: () => ({
|
||||
version: version as string,
|
||||
currentTheme: '',
|
||||
currentOs: 'arch-linux',
|
||||
desktop: LightdmHandler.defaultSession,
|
||||
username: LightdmHandler.username,
|
||||
password: '',
|
||||
defaultColor: '#6BBBED',
|
||||
battery: null as LightDMBattery | null,
|
||||
brightness: 0,
|
||||
zoom: 1,
|
||||
users: LightdmHandler.users as LightdmUsers[],
|
||||
desktops: LightdmHandler.sessions as LightdmSession[],
|
||||
showPassword: false,
|
||||
generateRandomThemes: false,
|
||||
themes: AppThemes as AppTheme[],
|
||||
bodyClass: {
|
||||
blur: false,
|
||||
'no-transition': false,
|
||||
'show-framerate': false,
|
||||
'only-ui': false
|
||||
} as Record<string, boolean>
|
||||
}),
|
||||
|
||||
getters: {
|
||||
isCharging: (state) => state.battery?.status === 'Charging',
|
||||
batteryLevel: (state) => state.battery?.level || 0,
|
||||
isSupportFullApi: () => LightdmHandler.isSupportFullApi,
|
||||
showFrameRate: (state) => state.bodyClass['show-framerate'],
|
||||
viewThemeOnly: (state) => state.bodyClass['only-ui'],
|
||||
isGithubMode: () => import.meta.env.VITE_APP_VIEW === 'github',
|
||||
|
||||
activeTheme: (state): AppTheme =>
|
||||
state.themes.find(({ name }) => name === state.currentTheme) || defaultTheme,
|
||||
|
||||
currentUser: (state) => state.users.find(({ username }) => username === state.username),
|
||||
currentDesktop: (state) => state.desktops.find(({ key }) => key === state.desktop),
|
||||
|
||||
getThemeByName: (state) => (theme: string) =>
|
||||
state.themes.find(({ name }) => name === theme),
|
||||
|
||||
getThemeInput: (state) => (name: string, theme?: AppTheme) => {
|
||||
const active = state.themes.find((t) => t.name === state.currentTheme) || defaultTheme
|
||||
return (theme || active).settings?.find((input) => input.name === name)
|
||||
},
|
||||
|
||||
getMainSettings: (state): AppSettings => ({
|
||||
zoom: state.zoom,
|
||||
themes: state.themes,
|
||||
desktop: state.desktop,
|
||||
username: state.username,
|
||||
bodyClass: state.bodyClass,
|
||||
currentOs: state.currentOs,
|
||||
currentTheme: state.currentTheme,
|
||||
defaultColor: state.defaultColor,
|
||||
generateRandomThemes: state.generateRandomThemes
|
||||
}),
|
||||
|
||||
personalInfo: (state) => ({
|
||||
username: state.username,
|
||||
currentTheme: state.currentTheme,
|
||||
currentOs: state.currentOs,
|
||||
desktop: state.desktop,
|
||||
version: state.version,
|
||||
defaultColor: state.defaultColor
|
||||
})
|
||||
},
|
||||
|
||||
actions: {
|
||||
randomizeSettingsTheme() {
|
||||
const theme = this.activeTheme
|
||||
theme.settings = randomizeSettingsTheme(theme as AppTheme)
|
||||
this.syncStoreWithQuery()
|
||||
},
|
||||
|
||||
async changeTheme(themeName: string, themeSettings?: AppTheme['settings']) {
|
||||
const isExistTheme = this.getThemeByName(themeName)
|
||||
const finalTheme = isExistTheme ? themeName : this.themes[0]!.name
|
||||
|
||||
this.currentTheme = finalTheme
|
||||
|
||||
if (isExistTheme && themeSettings) {
|
||||
this.changeSettingsTheme({ theme: finalTheme, settings: themeSettings })
|
||||
}
|
||||
}
|
||||
|
||||
setCSSVariable('--color-active', activeColor)
|
||||
setCSSVariable('--color-bg', color.background)
|
||||
}
|
||||
|
||||
@Action
|
||||
syncStoreWithQuery() {
|
||||
const { app: { $route, $router } } = router
|
||||
|
||||
const inputQuery = this.activeTheme.settings?.reduce<Record<string, string>>((query, input) => {
|
||||
query[input.name] = input.value + ''
|
||||
return query
|
||||
}, {})
|
||||
const bodyClassQuery = Object.entries(this.bodyClass).reduce<Record<string, string>>((query, [key, value]) => {
|
||||
query[key] = value + ''
|
||||
return query
|
||||
}, {})
|
||||
|
||||
const query = { ...inputQuery, ...bodyClassQuery, themeName: this.currentTheme }
|
||||
const routeTo = { name: $route.name || '/', query }
|
||||
const mayReplace = isDifferentRoute(routeTo)
|
||||
|
||||
if (mayReplace) {
|
||||
$router.replace(routeTo)
|
||||
}
|
||||
}
|
||||
this.syncThemeColor()
|
||||
this.syncStoreWithQuery()
|
||||
},
|
||||
|
||||
login() {
|
||||
LightdmHandler.login(this.username, this.password, this.currentDesktop?.key)
|
||||
},
|
||||
|
||||
changeSettingsTheme({ theme, settings }: { theme: string; settings: AppTheme['settings'] }) {
|
||||
const currentTheme = this.themes.find(({ name }) => name === theme)
|
||||
if (currentTheme) currentTheme.settings = settings
|
||||
},
|
||||
|
||||
changeThemeInput({ input, value }: { input: AppInputTheme; value: AppInputThemeValue }) {
|
||||
input.value = value
|
||||
},
|
||||
|
||||
changeSettingsThemeInput({ key, value }: { key: string; value: AppInputThemeValue }) {
|
||||
const input = (this.activeTheme as AppTheme).settings?.find((i) => i.name === key)
|
||||
if (input) input.value = value
|
||||
},
|
||||
|
||||
toggleShowPassword() {
|
||||
this.showPassword = !this.showPassword
|
||||
},
|
||||
|
||||
changeBodyClass({ key, value }: { key: string; value: boolean }) {
|
||||
this.bodyClass[key] = value
|
||||
this.syncBodyClassWithStore({ settings: this.getMainSettings, query: router.currentRoute.value.query })
|
||||
},
|
||||
|
||||
saveStateApp({ key, value }: { key: string; value: string }) {
|
||||
(this as any)[key] = value
|
||||
localStorage.setItem(key, value)
|
||||
this.syncStoreWithQuery()
|
||||
},
|
||||
|
||||
syncSettingsWithCache() {
|
||||
localStorage.setItem('settings', JSON.stringify(this.getMainSettings))
|
||||
},
|
||||
|
||||
syncThemeColor() {
|
||||
const { color } = this.activeTheme
|
||||
let activeColor = color.active
|
||||
|
||||
if (this.activeTheme.settings) {
|
||||
const colorInput = this.activeTheme.settings.find(({ name }) => name === 'activeColor') as AppInputThemeGeneral
|
||||
if (colorInput) activeColor = colorInput.value + ''
|
||||
}
|
||||
|
||||
@Action
|
||||
syncThemeWithStore({ settings, query }: { settings: AppSettings; query: Route['query'] }) {
|
||||
let themeName = query.themeName as string || settings.currentTheme
|
||||
const { generateRandomThemes } = settings
|
||||
const indexTheme = Math.floor(randomize(0, this.themes.length - 1))
|
||||
setCSSVariable('--color-active', activeColor)
|
||||
setCSSVariable('--color-bg', color.background)
|
||||
},
|
||||
|
||||
const syncTheme = this.themes.reduce((themes: AppTheme[], theme, index) => {
|
||||
const cachedTheme = settings.themes.find(({ name }) => name === theme.name)
|
||||
const isActiveTheme = generateRandomThemes ? indexTheme === index : theme.name === themeName
|
||||
const hasCachedTheme = cachedTheme && cachedTheme?.settings
|
||||
syncStoreWithQuery() {
|
||||
const route = router.currentRoute.value
|
||||
|
||||
if (hasCachedTheme) {
|
||||
const randomSettings = isActiveTheme && generateRandomThemes
|
||||
const inputQuery = this.activeTheme.settings?.reduce<Record<string, string>>((query, input) => {
|
||||
query[input.name] = input.value + ''
|
||||
return query
|
||||
}, {})
|
||||
|
||||
if (randomSettings) {
|
||||
themeName = theme.name
|
||||
}
|
||||
const bodyClassQuery = Object.entries(this.bodyClass).reduce<Record<string, string>>((query, [key, value]) => {
|
||||
query[key] = value + ''
|
||||
return query
|
||||
}, {})
|
||||
|
||||
theme.settings = randomSettings
|
||||
? randomizeSettingsTheme(theme)
|
||||
: theme.settings?.map(input => {
|
||||
const cachedThemeInput = this.getThemeInput(input.name, cachedTheme)
|
||||
let value = cachedThemeInput?.value ?? input.value
|
||||
const query = { ...inputQuery, ...bodyClassQuery, themeName: this.currentTheme }
|
||||
const routeTo = { name: route.name || '/', query }
|
||||
|
||||
if (isActiveTheme) {
|
||||
const queryThemeInput = input.name in query ? parseQueryValue(query[input.name] as string) : null
|
||||
value = queryThemeInput ?? value
|
||||
}
|
||||
|
||||
return Object.assign(input, { value })
|
||||
})
|
||||
if (isDifferentRoute(routeTo)) {
|
||||
router.replace(routeTo)
|
||||
}
|
||||
},
|
||||
|
||||
syncThemeWithStore({ settings, query }: { settings: AppSettings; query: RouteLocationNormalized['query'] }) {
|
||||
let themeName = (query.themeName as string) || settings.currentTheme
|
||||
const { generateRandomThemes } = settings
|
||||
const indexTheme = Math.floor(randomize(0, this.themes.length - 1))
|
||||
|
||||
const syncTheme = this.themes.reduce((themes: AppTheme[], theme, index) => {
|
||||
const cachedTheme = settings.themes.find(({ name }) => name === theme.name)
|
||||
const isActiveTheme = generateRandomThemes ? indexTheme === index : theme.name === themeName
|
||||
const hasCachedTheme = cachedTheme && cachedTheme.settings
|
||||
|
||||
if (hasCachedTheme) {
|
||||
if (isActiveTheme && generateRandomThemes) {
|
||||
themeName = theme.name
|
||||
theme.settings = randomizeSettingsTheme(theme)
|
||||
} else {
|
||||
theme.settings = theme.settings?.map((input) => {
|
||||
const cachedInput = this.getThemeInput(input.name, cachedTheme)
|
||||
let value = cachedInput?.value ?? input.value
|
||||
|
||||
if (isActiveTheme) {
|
||||
const queryInput = input.name in query ? parseQueryValue(query[input.name] as string) : null
|
||||
value = queryInput ?? value
|
||||
}
|
||||
|
||||
return { ...input, value }
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
themes.push(theme)
|
||||
themes.push(theme)
|
||||
if (isActiveTheme) this.currentTheme = themeName
|
||||
|
||||
if (isActiveTheme) { this.SAVE_STATE_APP({ key: 'currentTheme', value: themeName }) }
|
||||
return themes
|
||||
}, [])
|
||||
|
||||
return themes
|
||||
}, [])
|
||||
this.themes = syncTheme
|
||||
},
|
||||
|
||||
this.SET_STATE_APP({ key: 'themes', value: syncTheme })
|
||||
}
|
||||
syncBodyClassWithStore({ settings, query }: { settings: AppSettings; query: RouteLocationNormalized['query'] }) {
|
||||
const bodyClassKeys = Object.keys(this.bodyClass)
|
||||
const queryBodyClass = bodyClassKeys.reduce<Record<string, boolean>>((bodyClass, key) => {
|
||||
if (key in query) bodyClass[key] = query[key] === 'true'
|
||||
return bodyClass
|
||||
}, {})
|
||||
|
||||
@Action
|
||||
syncBodyClassWithStore({ settings, query }: { settings: AppSettings; query: Route['query'] }) {
|
||||
const bodyClassKeys = Object.keys(this.bodyClass)
|
||||
const queryBodyClass = bodyClassKeys.reduce<Record<string, boolean>>((bodyClass, key) => {
|
||||
if (key in query) { bodyClass[key] = query[key] === 'true' }
|
||||
return bodyClass
|
||||
}, {})
|
||||
|
||||
this.SET_STATE_APP({ key: 'bodyClass', value: { ...settings.bodyClass, ...queryBodyClass } })
|
||||
}
|
||||
this.bodyClass = { ...settings.bodyClass, ...queryBodyClass }
|
||||
},
|
||||
|
||||
@Action
|
||||
setUpSettings() {
|
||||
const { app: { $route } } = router
|
||||
const { query } = $route
|
||||
setUpSettings() {
|
||||
const query = router.currentRoute.value.query
|
||||
|
||||
try {
|
||||
const settings: AppSettings = JSON.parse(localStorage.getItem('settings') || '{}')
|
||||
this.SET_STATE_APP({ key: 'generateRandomThemes', value: settings.generateRandomThemes || false })
|
||||
try {
|
||||
const settings: AppSettings = JSON.parse(localStorage.getItem('settings') || '{}')
|
||||
this.generateRandomThemes = settings.generateRandomThemes || false
|
||||
|
||||
if (settings.themes) {
|
||||
this.syncThemeWithStore({ settings, query })
|
||||
}
|
||||
if (settings.themes) this.syncThemeWithStore({ settings, query })
|
||||
if (settings.bodyClass) this.syncBodyClassWithStore({ settings, query })
|
||||
|
||||
if (settings.bodyClass) {
|
||||
this.syncBodyClassWithStore({ settings, query })
|
||||
}
|
||||
const isExistDE = window.lightdm?.sessions.find(({ key }) => key === settings.desktop)
|
||||
if (!isExistDE) settings.desktop = window.lightdm?.sessions[0]?.key || 'openbox'
|
||||
|
||||
const isExistDE = window.lightdm?.sessions.find(({ key }) => key === settings.desktop)
|
||||
if (isExistDE === undefined) {
|
||||
settings.desktop = window.lightdm?.sessions[0].key || 'openbox'
|
||||
}
|
||||
const isExistUser = window.lightdm?.users.find(({ username }) => username === settings.username)
|
||||
if (!isExistUser) settings.username = window.lightdm?.users[0]?.username || 'Warinyourself'
|
||||
|
||||
const isExistUser = window.lightdm?.users.find(({ username }) => username === settings.username)
|
||||
if (isExistUser === undefined) {
|
||||
settings.username = window.lightdm?.users[0].username || 'Warinyourself'
|
||||
this.currentOs = settings.currentOs || 'arch-linux'
|
||||
this.desktop = settings.desktop
|
||||
this.username = settings.username
|
||||
this.zoom = settings.zoom || 1
|
||||
} catch {
|
||||
this.setUpSettings()
|
||||
}
|
||||
|
||||
this.SET_STATE_APP({ key: 'currentOs', value: settings.currentOs || 'arch-linux' })
|
||||
this.SET_STATE_APP({ key: 'desktop', value: settings.desktop })
|
||||
this.SET_STATE_APP({ key: 'username', value: settings.username })
|
||||
this.SET_STATE_APP({ key: 'zoom', value: settings.zoom || 1 })
|
||||
} catch (error) {
|
||||
this.setUpSettings()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const AppModule = getModule(App)
|
||||
})
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import { config } from 'vuex-module-decorators'
|
||||
|
||||
config.rawError = true
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({})
|
||||
@ -1,196 +1,150 @@
|
||||
import {
|
||||
Module,
|
||||
VuexModule,
|
||||
getModule,
|
||||
Mutation,
|
||||
Action
|
||||
} from 'vuex-module-decorators'
|
||||
import store from '@/store/index'
|
||||
import { InteractiveBlock, InteractiveBlockIds, AppMenu, LoginPosition, AppMenuMain, DialogInterface } from '@/models/page'
|
||||
import { AppModule } from './app'
|
||||
|
||||
@Module({ dynamic: true, store, name: 'page' })
|
||||
class Page extends VuexModule {
|
||||
menu: AppMenuMain | AppMenu = {
|
||||
view: false,
|
||||
items: []
|
||||
}
|
||||
|
||||
dialog: DialogInterface | null = null
|
||||
|
||||
mainTabIndex = 0
|
||||
language = ''
|
||||
loginPosition: LoginPosition = 'center'
|
||||
languages: string[] = []
|
||||
activeBlocks: InteractiveBlock[] = []
|
||||
interactiveBlocks: InteractiveBlock[] = [
|
||||
{
|
||||
id: 'login',
|
||||
closeBeforeMount: ['settings'],
|
||||
mayOpen: () => !AppModule.viewThemeOnly
|
||||
import { defineStore } from 'pinia'
|
||||
import { useAppStore } from '@/store/app'
|
||||
import type { InteractiveBlock, InteractiveBlockIds, AppMenu, LoginPosition, AppMenuMain, DialogInterface } from '@/models/page'
|
||||
|
||||
export const usePageStore = defineStore('page', {
|
||||
state: () => ({
|
||||
menu: {
|
||||
view: false,
|
||||
items: []
|
||||
} as AppMenuMain | AppMenu,
|
||||
|
||||
dialog: null as DialogInterface | null,
|
||||
|
||||
mainTabIndex: 0,
|
||||
language: '',
|
||||
loginPosition: 'center' as LoginPosition,
|
||||
languages: [] as string[],
|
||||
activeBlocks: [] as InteractiveBlock[],
|
||||
interactiveBlocks: [
|
||||
{
|
||||
id: 'login',
|
||||
closeBeforeMount: ['settings'],
|
||||
mayOpen: () => !useAppStore().viewThemeOnly
|
||||
},
|
||||
{
|
||||
id: 'settings',
|
||||
closeBeforeMount: ['login'],
|
||||
openAfterDestroy: ['login']
|
||||
}
|
||||
] as InteractiveBlock[]
|
||||
}),
|
||||
|
||||
getters: {
|
||||
locale: (state): string => {
|
||||
const localesMap: Record<string, string> = {
|
||||
ru: 'ru-RU',
|
||||
en: 'en-US',
|
||||
fr: 'fr-FR',
|
||||
de: 'de-DE',
|
||||
es: 'es-ES'
|
||||
}
|
||||
return localesMap[state.language] || 'en-US'
|
||||
},
|
||||
{
|
||||
id: 'settings',
|
||||
closeBeforeMount: ['login'],
|
||||
openAfterDestroy: ['login']
|
||||
}
|
||||
]
|
||||
|
||||
get locale() {
|
||||
const localesMap: Record<string, string> = {
|
||||
ru: 'ru-RU',
|
||||
en: 'en-US',
|
||||
fr: 'fr-FR',
|
||||
de: 'de-DE',
|
||||
es: 'es-ES'
|
||||
}
|
||||
|
||||
return localesMap[this.language] || 'en-US'
|
||||
}
|
||||
|
||||
get getBlock() {
|
||||
return (id: InteractiveBlockIds) => {
|
||||
return this.activeBlocks.find((activeBlock) => id === activeBlock.id)
|
||||
}
|
||||
}
|
||||
|
||||
get isOpenBlock() {
|
||||
return (id: InteractiveBlockIds) => {
|
||||
return !!this.getBlock(id)
|
||||
}
|
||||
}
|
||||
|
||||
get activeBlock(): InteractiveBlock | undefined {
|
||||
return this.activeBlocks.slice(-1)[0]
|
||||
}
|
||||
|
||||
@Mutation
|
||||
SET_STATE_PAGE<S extends this, K extends keyof this>({ key, value }: { key: K; value: S[K] }) {
|
||||
this[key] = value
|
||||
}
|
||||
getBlock: (state) => (id: InteractiveBlockIds) =>
|
||||
state.activeBlocks.find((b) => b.id === id),
|
||||
|
||||
@Mutation
|
||||
OPEN_ACTIVE_BLOCK(id: InteractiveBlockIds) {
|
||||
const activeBlock = this.interactiveBlocks.find((block) => block.id === id)
|
||||
if (!activeBlock) { return }
|
||||
|
||||
const canOpen = activeBlock?.mayOpen ? activeBlock?.mayOpen() : true
|
||||
if (!canOpen) { return }
|
||||
|
||||
this.activeBlocks.push(activeBlock)
|
||||
}
|
||||
isOpenBlock: (state) => (id: InteractiveBlockIds) =>
|
||||
!!state.activeBlocks.find((b) => b.id === id),
|
||||
|
||||
@Mutation
|
||||
CLOSE_ACTIVE_BLOCK(idBlock?: string) {
|
||||
const index = this.activeBlocks.findIndex(({ id }) => id === idBlock)
|
||||
activeBlock: (state): InteractiveBlock | undefined =>
|
||||
state.activeBlocks[state.activeBlocks.length - 1]
|
||||
},
|
||||
|
||||
if (index !== -1) {
|
||||
this.activeBlocks.splice(index, 1)
|
||||
} else if (!idBlock) {
|
||||
this.activeBlocks.pop()
|
||||
}
|
||||
}
|
||||
actions: {
|
||||
openFirstBlock() {
|
||||
for (const block of this.interactiveBlocks) {
|
||||
const canOpen = block.mayOpen ? block.mayOpen() : true
|
||||
if (canOpen) {
|
||||
this.openActiveBlock(block.id)
|
||||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@Mutation
|
||||
CLOSE_ALL_ACTIVE_BLOCK() {
|
||||
this.activeBlocks = []
|
||||
}
|
||||
openActiveBlock(id: InteractiveBlockIds) {
|
||||
const activeBlock = this.interactiveBlocks.find((b) => b.id === id)
|
||||
if (!activeBlock) return
|
||||
|
||||
@Mutation
|
||||
ASSIGN_MENU(menu: Partial<AppMenu>) {
|
||||
this.menu = Object.assign(this.menu, menu)
|
||||
}
|
||||
const canOpen = activeBlock.mayOpen ? activeBlock.mayOpen() : true
|
||||
if (!canOpen) return
|
||||
|
||||
@Action
|
||||
openTab({ type }: { type: 'settings' | 'themes' | 'custom' }) {
|
||||
const hasCustomCurrentTheme = AppModule.activeTheme?.settings?.length !== undefined
|
||||
let updatedTabIndex = this.mainTabIndex
|
||||
this.activeBlocks.push(activeBlock)
|
||||
},
|
||||
|
||||
switch (type) {
|
||||
case 'settings': {
|
||||
updatedTabIndex = hasCustomCurrentTheme ? 2 : 1
|
||||
break
|
||||
}
|
||||
case 'custom': {
|
||||
updatedTabIndex = hasCustomCurrentTheme ? 1 : updatedTabIndex
|
||||
break
|
||||
closeActiveBlock(idBlock?: string) {
|
||||
const index = this.activeBlocks.findIndex(({ id }) => id === idBlock)
|
||||
if (index !== -1) {
|
||||
this.activeBlocks.splice(index, 1)
|
||||
} else if (!idBlock) {
|
||||
this.activeBlocks.pop()
|
||||
}
|
||||
default: {
|
||||
updatedTabIndex = 0
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
this.SET_STATE_PAGE({ key: 'mainTabIndex', value: updatedTabIndex })
|
||||
}
|
||||
closeAllBlocks() {
|
||||
this.activeBlocks = []
|
||||
},
|
||||
|
||||
@Action
|
||||
openFirstBlock() {
|
||||
for (let i = 0; i < this.interactiveBlocks.length; i++) {
|
||||
const block = this.interactiveBlocks[i]
|
||||
const open = block.mayOpen ? block.mayOpen() : true
|
||||
assignMenu(menu: Partial<AppMenu>) {
|
||||
this.menu = Object.assign(this.menu, menu)
|
||||
},
|
||||
|
||||
if (open) {
|
||||
this.OPEN_ACTIVE_BLOCK(block.id)
|
||||
break
|
||||
openTab({ type }: { type: 'settings' | 'themes' | 'custom' }) {
|
||||
const hasCustomCurrentTheme = useAppStore().activeTheme?.settings?.length !== undefined
|
||||
let updatedTabIndex = this.mainTabIndex
|
||||
|
||||
switch (type) {
|
||||
case 'settings':
|
||||
updatedTabIndex = hasCustomCurrentTheme ? 2 : 1
|
||||
break
|
||||
case 'custom':
|
||||
updatedTabIndex = hasCustomCurrentTheme ? 1 : updatedTabIndex
|
||||
break
|
||||
default:
|
||||
updatedTabIndex = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Action
|
||||
async openBlock(settings: { id: InteractiveBlockIds }) {
|
||||
settings = settings || {}
|
||||
const { id } = settings
|
||||
if (!id) { return }
|
||||
this.mainTabIndex = updatedTabIndex
|
||||
},
|
||||
|
||||
// Already active block
|
||||
if (this.activeBlocks.find((block) => block.id === id)) { return }
|
||||
async openBlock(settings: { id: InteractiveBlockIds }) {
|
||||
const { id } = settings || {}
|
||||
if (!id) return
|
||||
|
||||
const block = this.interactiveBlocks.find((block) => block.id === id)
|
||||
if (!block) { return }
|
||||
if (this.activeBlocks.find((b) => b.id === id)) return
|
||||
|
||||
const closeBlocks = block.closeBeforeMount
|
||||
if (closeBlocks) {
|
||||
closeBlocks.forEach((id) => this.CLOSE_ACTIVE_BLOCK(id))
|
||||
}
|
||||
const block = this.interactiveBlocks.find((b) => b.id === id)
|
||||
if (!block) return
|
||||
|
||||
this.OPEN_ACTIVE_BLOCK(id)
|
||||
}
|
||||
|
||||
@Action
|
||||
async closeBlock(settings?: { id?: InteractiveBlockIds }) {
|
||||
settings = settings || {}
|
||||
const lastIdActiveBlock = this.activeBlocks.slice(-1)[0].id
|
||||
const id = settings.id || lastIdActiveBlock
|
||||
if (!id) { return }
|
||||
block.closeBeforeMount?.forEach((bid) => this.closeActiveBlock(bid))
|
||||
this.openActiveBlock(id)
|
||||
},
|
||||
|
||||
const block = this.activeBlocks.find((block) => block.id === id)
|
||||
if (!block) { return }
|
||||
async closeBlock(settings?: { id?: InteractiveBlockIds }) {
|
||||
const lastId = this.activeBlocks[this.activeBlocks.length - 1]?.id
|
||||
const id = settings?.id || lastId
|
||||
if (!id) return
|
||||
|
||||
const openBlocks = block.openAfterDestroy
|
||||
const block = this.activeBlocks.find((b) => b.id === id)
|
||||
if (!block) return
|
||||
|
||||
if (openBlocks) {
|
||||
openBlocks.forEach((id) => this.OPEN_ACTIVE_BLOCK(id))
|
||||
}
|
||||
block.openAfterDestroy?.forEach((bid) => this.openActiveBlock(bid))
|
||||
|
||||
let needToClose = true
|
||||
if (block.callbackBeforeClose) {
|
||||
needToClose = block.callbackBeforeClose?.map(callback => callback()).reduce((a, b) => a && b, true)
|
||||
}
|
||||
let needToClose = true
|
||||
if (block.callbackBeforeClose) {
|
||||
needToClose = block.callbackBeforeClose.map((cb) => cb()).every(Boolean)
|
||||
}
|
||||
|
||||
if (needToClose) {
|
||||
this.CLOSE_ACTIVE_BLOCK(id)
|
||||
}
|
||||
}
|
||||
if (needToClose) this.closeActiveBlock(id)
|
||||
},
|
||||
|
||||
@Action
|
||||
openDialog(dialog: DialogInterface) {
|
||||
this.SET_STATE_PAGE({ key: 'dialog', value: dialog })
|
||||
}
|
||||
openDialog(dialog: DialogInterface) {
|
||||
this.dialog = dialog
|
||||
},
|
||||
|
||||
@Action
|
||||
closeDialog() {
|
||||
this.SET_STATE_PAGE({ key: 'dialog', value: null })
|
||||
closeDialog() {
|
||||
this.dialog = null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const PageModule = getModule(Page)
|
||||
})
|
||||
|
||||
@ -0,0 +1,12 @@
|
||||
import { ref, computed } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useCounterStore = defineStore('counter', () => {
|
||||
const count = ref(0)
|
||||
const doubleCount = computed(() => count.value * 2)
|
||||
function increment() {
|
||||
count.value++
|
||||
}
|
||||
|
||||
return { count, doubleCount, increment }
|
||||
})
|
||||
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@media (min-width: 1024px) {
|
||||
.about {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import TheWelcome from '../components/TheWelcome.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<TheWelcome />
|
||||
</main>
|
||||
</template>
|
||||
@ -1,6 +0,0 @@
|
||||
#!/bin/bash
|
||||
|
||||
lightdm-webkit2-greeter
|
||||
# dm-tool add-nested-seat --screen 1366x768
|
||||
|
||||
# yarn build && sudo sh ./install.sh && nody-greeter --debug
|
||||
@ -0,0 +1,18 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||
"exclude": ["src/**/__tests__/*"],
|
||||
"compilerOptions": {
|
||||
// Extra safety for array and object lookups, but may have false positives.
|
||||
"noUncheckedIndexedAccess": true,
|
||||
|
||||
// Path mapping for cleaner imports.
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
},
|
||||
|
||||
// `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking.
|
||||
// Specified here to keep it out of the root directory.
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"
|
||||
}
|
||||
}
|
||||
@ -1,43 +1,11 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"module": "esnext",
|
||||
"strict": true,
|
||||
"jsx": "preserve",
|
||||
"importHelpers": true,
|
||||
"moduleResolution": "node",
|
||||
"experimentalDecorators": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"resolveJsonModule": true,
|
||||
"sourceMap": true,
|
||||
"baseUrl": ".",
|
||||
"types": [
|
||||
"webpack-env",
|
||||
"node",
|
||||
],
|
||||
"typeRoots": ["./node_modules/@types", "./types/application", "nody-greeter-types"],
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
]
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.vue",
|
||||
"tests/**/*.ts",
|
||||
"tests/**/*.tsx",
|
||||
"src/plugins/swiper.js"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
// TSConfig for modules that run in Node.js environment via either transpilation or type-stripping.
|
||||
{
|
||||
"extends": "@tsconfig/node24/tsconfig.json",
|
||||
"include": [
|
||||
"vite.config.*",
|
||||
"vitest.config.*",
|
||||
"cypress.config.*",
|
||||
"playwright.config.*",
|
||||
"eslint.config.*"
|
||||
],
|
||||
"compilerOptions": {
|
||||
// Most tools use transpilation instead of Node.js's native type-stripping.
|
||||
// Bundler mode provides a smoother developer experience.
|
||||
"module": "preserve",
|
||||
"moduleResolution": "bundler",
|
||||
|
||||
// Include Node.js types and avoid accidentally including other `@types/*` packages.
|
||||
"types": ["node"],
|
||||
|
||||
// Disable emitting output during `vue-tsc --build`, which is used for type-checking only.
|
||||
"noEmit": true,
|
||||
|
||||
// `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking.
|
||||
// Specified here to keep it out of the root directory.
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue