feat: init
This commit is contained in:
ccbikai
commit
bd47e755d5
13
.editorconfig
Executable file
13
.editorconfig
Executable file
@ -0,0 +1,13 @@
|
||||
# editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_size = 2
|
||||
indent_style = space
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
10
.env.example
Normal file
10
.env.example
Normal file
@ -0,0 +1,10 @@
|
||||
NUXT_PUBLIC_PREVIEW_MODE=true
|
||||
NUXT_PUBLIC_SLUG_DEFAULT_LENGTH=5
|
||||
NUXT_SITE_TOKEN=SinkCool
|
||||
NUXT_REDIRECT_STATUS_CODE=308
|
||||
NUXT_HOME_URL="https://sink.cool"
|
||||
NUXT_CF_ACCOUNT_ID=123456
|
||||
NUXT_CF_API_TOKEN=CloudflareAPIToken
|
||||
NUXT_DATASET=sink_v0
|
||||
NUXT_AI_MODEL="@cf/meta/llama-3-8b-instruct"
|
||||
NUXT_AI_PROMPT="You are a URL shortening assistant......"
|
||||
27
.gitignore
vendored
Normal file
27
.gitignore
vendored
Normal file
@ -0,0 +1,27 @@
|
||||
# Nuxt dev/build outputs
|
||||
.output
|
||||
.data
|
||||
.nuxt
|
||||
.nitro
|
||||
.cache
|
||||
dist
|
||||
|
||||
# Node dependencies
|
||||
node_modules
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Misc
|
||||
.DS_Store
|
||||
.fleet
|
||||
.idea
|
||||
|
||||
# Local env files
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
.wrangler
|
||||
site
|
||||
cache
|
||||
1
.node-version
Normal file
1
.node-version
Normal file
@ -0,0 +1 @@
|
||||
v20
|
||||
5
.vscode/extensions.json
vendored
Normal file
5
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"recommendations": [
|
||||
"vue.volar"
|
||||
]
|
||||
}
|
||||
4
.vscode/settings.json
vendored
Normal file
4
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
// Enable ESlint flat config support
|
||||
"eslint.experimental.useFlatConfig": true
|
||||
}
|
||||
661
LICENSE
Normal file
661
LICENSE
Normal file
@ -0,0 +1,661 @@
|
||||
GNU AFFERO GENERAL PUBLIC LICENSE
|
||||
Version 3, 19 November 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 Affero General Public License is a free, copyleft license for
|
||||
software and other kinds of works, specifically designed to ensure
|
||||
cooperation with the community in the case of network server software.
|
||||
|
||||
The licenses for most software and other practical works are designed
|
||||
to take away your freedom to share and change the works. By contrast,
|
||||
our General Public Licenses are 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.
|
||||
|
||||
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.
|
||||
|
||||
Developers that use our General Public Licenses protect your rights
|
||||
with two steps: (1) assert copyright on the software, and (2) offer
|
||||
you this License which gives you legal permission to copy, distribute
|
||||
and/or modify the software.
|
||||
|
||||
A secondary benefit of defending all users' freedom is that
|
||||
improvements made in alternate versions of the program, if they
|
||||
receive widespread use, become available for other developers to
|
||||
incorporate. Many developers of free software are heartened and
|
||||
encouraged by the resulting cooperation. However, in the case of
|
||||
software used on network servers, this result may fail to come about.
|
||||
The GNU General Public License permits making a modified version and
|
||||
letting the public access it on a server without ever releasing its
|
||||
source code to the public.
|
||||
|
||||
The GNU Affero General Public License is designed specifically to
|
||||
ensure that, in such cases, the modified source code becomes available
|
||||
to the community. It requires the operator of a network server to
|
||||
provide the source code of the modified version running there to the
|
||||
users of that server. Therefore, public use of a modified version, on
|
||||
a publicly accessible server, gives the public access to the source
|
||||
code of the modified version.
|
||||
|
||||
An older license, called the Affero General Public License and
|
||||
published by Affero, was designed to accomplish similar goals. This is
|
||||
a different license, not a version of the Affero GPL, but Affero has
|
||||
released a new version of the Affero GPL which permits relicensing under
|
||||
this license.
|
||||
|
||||
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 Affero 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. Remote Network Interaction; Use with the GNU General Public License.
|
||||
|
||||
Notwithstanding any other provision of this License, if you modify the
|
||||
Program, your modified version must prominently offer all users
|
||||
interacting with it remotely through a computer network (if your version
|
||||
supports such interaction) an opportunity to receive the Corresponding
|
||||
Source of your version by providing access to the Corresponding Source
|
||||
from a network server at no charge, through some standard or customary
|
||||
means of facilitating copying of software. This Corresponding Source
|
||||
shall include the Corresponding Source for any work covered by version 3
|
||||
of the GNU General Public License that is incorporated pursuant to the
|
||||
following paragraph.
|
||||
|
||||
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 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 work with which it is combined will remain governed by version
|
||||
3 of the GNU General Public License.
|
||||
|
||||
14. Revised Versions of this License.
|
||||
|
||||
The Free Software Foundation may publish revised and/or new versions of
|
||||
the GNU Affero 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 Affero 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 Affero 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 Affero 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 Affero 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 Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero 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 your software can interact with users remotely through a computer
|
||||
network, you should also make sure that it provides a way for users to
|
||||
get its source. For example, if your program is a web application, its
|
||||
interface could display a "Source" link that leads users to an archive
|
||||
of the code. There are many ways you could offer source, and different
|
||||
solutions will be better for different programs; see section 13 for the
|
||||
specific requirements.
|
||||
|
||||
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 AGPL, see
|
||||
<https://www.gnu.org/licenses/>.
|
||||
78
README.md
Normal file
78
README.md
Normal file
@ -0,0 +1,78 @@
|
||||
# ⚡ Sink
|
||||
|
||||
**A Simple / Speedy / Secrue Link Shortener with Analytics, 100% run on Cloudflare.**
|
||||
|
||||
|
||||
|
||||
----
|
||||
|
||||
## ✨ Features
|
||||
|
||||
- **URL Shortening:** Compress your URLs to their minimal length.
|
||||
- **Analytics:** Monitor link analytics and gather insightful statistics.
|
||||
- **Serverless:** Deploy without the need for traditional servers.
|
||||
- **Customizable Slug:** Support for personalized slugs.
|
||||
- **🪄 AI Slug:** Leverage AI to generate slugs.
|
||||
- **Link Expiration:** Set expiration dates for your links.
|
||||
|
||||
## 🪧 Demo
|
||||
|
||||
Experience the demo at [Sink.Cool](https://sink.cool/dashboard). Log in using the Site Token below:
|
||||
|
||||
```txt
|
||||
Site Token: SinkCool
|
||||
```
|
||||
|
||||
## 🧱 Technologies Used
|
||||
|
||||
- **Framework**: [Nuxt](https://nuxt.com/)
|
||||
- **Database**: [Cloudflare Workers KV](https://developers.cloudflare.com/kv/)
|
||||
- **Analytics Engine**: [Cloudflare Workers Analytics Engine](https://developers.cloudflare.com/analytics/)
|
||||
- **UI Components**: [Shadcn-vue](https://www.shadcn-vue.com/)
|
||||
- **Styling:** [Tailwind CSS](https://tailwindcss.com/)
|
||||
- **Deployment**: [Cloudflare](https://www.cloudflare.com/)
|
||||
|
||||
## 🚗 Roadmap [WIP]
|
||||
|
||||
We welcome your contributions and PRs.
|
||||
|
||||
- [ ] Browser Extension
|
||||
- [ ] Raycast Extension
|
||||
- [ ] Apple Shortcuts
|
||||
- [ ] Enhanced Link Management (with Cloudflare D1)
|
||||
- [ ] Analytics Enhancements (Support for merging filter conditions)
|
||||
- [ ] Dashboard Performance Optimization (Infinite loading)
|
||||
- [ ] Units Test
|
||||
- [ ] Support for Other Deployment Platforms
|
||||
|
||||
## 🏗️ Deployment
|
||||
|
||||
1. [Fork](https://github.com/ccbikai/Sink/fork) the repository to your GitHub account.
|
||||
2. Create a [Cloudflare Pages](https://developers.cloudflare.com/pages/) project.
|
||||
3. Select the `Sink` repository and the `Nuxt.js` preset.
|
||||
4. Configure environment variables.
|
||||
1. `NUXT_SITE_TOKEN` length must exceed **8**.
|
||||
2. `NUXT_CF_ACCOUNT_ID` [find your account ID](https://developers.cloudflare.com/fundamentals/setup/find-account-and-zone-ids/).
|
||||
3. `NUXT_CF_API_TOKEN` Create a [Cloudflare API token](https://developers.cloudflare.com/fundamentals/api/get-started/create-token/). This token requires `Account.Account Analytics` permissions at the very least. [Reference.](https://developers.cloudflare.com/analytics/analytics-engine/sql-api/#authentication).
|
||||
|
||||
5. Save and deploy.
|
||||
6. Cancel the deployment, navigate to `Settings` -> `Functions`.
|
||||
1. KV namespace bindings. Bind the variable name `KV` to a KV namespace.
|
||||
2. Workers AI Bindings. Bind the variable name `AI` to the Workers AI Catalog. _Optional_
|
||||
3. Analytics Engine bindings. Bind the variable name `ANALYTICS` to the `sink` dataset, and enable [Cloudflare Analytics Engine beta](https://developers.cloudflare.com/analytics/analytics-engine/get-started/) for your account.
|
||||
7. Redeploy.
|
||||
|
||||
## ⚒️ Configuration
|
||||
|
||||
[Configuration Docs](./docs/configuration.md)
|
||||
|
||||
## 💖 Credits
|
||||
|
||||
1. [**Cloudflare**](https://www.cloudflare.com/)
|
||||
2. [**NuxtHub**](https://hub.nuxt.com/)
|
||||
3. [**Astroship**](https://astroship.web3templates.com/)
|
||||
|
||||
## ☕ Sponsor
|
||||
|
||||
1. [Follow Me on X(Twitter)](https://x.com/ccbikai).
|
||||
2. [Become a sponsor to on GitHub](https://github.com/sponsors/ccbikai).
|
||||
10
app.config.ts
Normal file
10
app.config.ts
Normal file
@ -0,0 +1,10 @@
|
||||
export default defineAppConfig({
|
||||
title: 'Sink',
|
||||
description: 'A Simple / Speedy / Secrue Link Shortener with Analytics, 100% run on Cloudflare.',
|
||||
image: 'https://sink.cool/banner.png',
|
||||
previewTTL: 24 * 3600, // 24h
|
||||
slugRegex: /^[a-z0-9]+(?:-[a-z0-9]+)*$/i,
|
||||
reserveSlug: [
|
||||
'dashboard',
|
||||
],
|
||||
})
|
||||
35
app.vue
Normal file
35
app.vue
Normal file
@ -0,0 +1,35 @@
|
||||
<script setup>
|
||||
const { title, description, image } = useAppConfig()
|
||||
useSeoMeta({
|
||||
title,
|
||||
description,
|
||||
ogTitle: title,
|
||||
ogDescription: description,
|
||||
ogImage: image,
|
||||
twitterTitle: title,
|
||||
twitterDescription: description,
|
||||
twitterImage: image,
|
||||
twitterCard: 'summary_large_image',
|
||||
})
|
||||
|
||||
useHead({
|
||||
htmlAttrs: {
|
||||
lang: 'en',
|
||||
},
|
||||
link: [
|
||||
{
|
||||
rel: 'icon',
|
||||
type: 'image/png',
|
||||
href: '/sink.png',
|
||||
},
|
||||
],
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLayout>
|
||||
<NuxtLoadingIndicator color="#000" />
|
||||
<NuxtPage />
|
||||
<Toaster />
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
91
assets/css/tailwind.css
Normal file
91
assets/css/tailwind.css
Normal file
@ -0,0 +1,91 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 240 10% 3.9%;
|
||||
|
||||
--muted: 240 4.8% 95.9%;
|
||||
--muted-foreground: 240 3.8% 46.1%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 240 10% 3.9%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 240 10% 3.9%;
|
||||
|
||||
--border: 240 5.9% 90%;
|
||||
--input: 240 5.9% 90%;
|
||||
|
||||
--primary: 240 5.9% 10%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
|
||||
--secondary: 240 4.8% 95.9%;
|
||||
--secondary-foreground: 240 5.9% 10%;
|
||||
|
||||
--accent: 240 4.8% 95.9%;
|
||||
--accent-foreground: 240 5.9% 10%;
|
||||
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
|
||||
--ring: 240 10% 3.9%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
|
||||
--vis-tooltip-background-color: none !important;
|
||||
--vis-tooltip-border-color: none !important;
|
||||
--vis-tooltip-text-color: none !important;
|
||||
--vis-tooltip-shadow-color: none !important;
|
||||
--vis-tooltip-backdrop-filter: none !important;
|
||||
--vis-tooltip-padding: none !important;
|
||||
|
||||
--vis-primary-color: 198 93% 60%;
|
||||
--vis-secondary-color: 158 64% 52%;
|
||||
/* --vis-secondary-color: 160 81% 40%; */
|
||||
/* --vis-secondary-color: var(--primary); */
|
||||
--vis-text-color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 240 10% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
|
||||
--muted: 240 3.7% 15.9%;
|
||||
--muted-foreground: 240 5% 64.9%;
|
||||
|
||||
--popover: 240 10% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
|
||||
--card: 240 10% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
|
||||
--border: 240 3.7% 15.9%;
|
||||
--input: 240 3.7% 15.9%;
|
||||
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 240 5.9% 10%;
|
||||
|
||||
--secondary: 240 3.7% 15.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
|
||||
--accent: 240 3.7% 15.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
|
||||
--ring: 240 4.9% 83.9%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
1
assets/images/404.svg
Normal file
1
assets/images/404.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 42 KiB |
BIN
assets/images/cloudflare.png
Normal file
BIN
assets/images/cloudflare.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
1
assets/images/hero.svg
Normal file
1
assets/images/hero.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 57 KiB |
BIN
assets/images/nuxtjs.png
Normal file
BIN
assets/images/nuxtjs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
1
assets/location/world-topo.json
Normal file
1
assets/location/world-topo.json
Normal file
File diff suppressed because one or more lines are too long
16
components.json
Normal file
16
components.json
Normal file
@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://shadcn-vue.com/schema.json",
|
||||
"style": "default",
|
||||
"typescript": true,
|
||||
"tailwind": {
|
||||
"config": "tailwind.config.js",
|
||||
"css": "assets/css/tailwind.css",
|
||||
"baseColor": "zinc",
|
||||
"cssVariables": true
|
||||
},
|
||||
"framework": "nuxt",
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/utils"
|
||||
}
|
||||
}
|
||||
37
components/dashboard/Breadcrumb.vue
Normal file
37
components/dashboard/Breadcrumb.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<script setup>
|
||||
import { NuxtLink } from '#components'
|
||||
|
||||
defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Breadcrumb class="flex justify-between">
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbLink href="/">
|
||||
Sink
|
||||
</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbLink
|
||||
:as="NuxtLink"
|
||||
to="/dashboard"
|
||||
>
|
||||
Dashboard
|
||||
</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage>{{ title }}</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
</BreadcrumbList>
|
||||
|
||||
<DashboardLogout />
|
||||
</Breadcrumb>
|
||||
</template>
|
||||
99
components/dashboard/Counters.vue
Normal file
99
components/dashboard/Counters.vue
Normal file
@ -0,0 +1,99 @@
|
||||
<script setup>
|
||||
import { Flame, MousePointerClick, Users } from 'lucide-vue-next'
|
||||
|
||||
const defaultData = Object.freeze({
|
||||
visits: 0,
|
||||
visitors: 0,
|
||||
referers: 0,
|
||||
})
|
||||
|
||||
const counters = ref(defaultData)
|
||||
|
||||
const id = inject('id')
|
||||
const startAt = inject('startAt')
|
||||
const endAt = inject('endAt')
|
||||
|
||||
async function getLinkCounters() {
|
||||
counters.value = defaultData
|
||||
const { data } = await useAPI('/api/stats/counters', {
|
||||
query: {
|
||||
id: id.value,
|
||||
startAt: startAt.value,
|
||||
endAt: endAt.value,
|
||||
},
|
||||
})
|
||||
counters.value = data?.[0]
|
||||
}
|
||||
|
||||
const stopWatchTime = watch([startAt, endAt], getLinkCounters)
|
||||
|
||||
onMounted(async () => {
|
||||
getLinkCounters()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
stopWatchTime()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid gap-4 sm:gap-3 lg:gap-4 sm:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
|
||||
<CardTitle class="text-sm font-medium">
|
||||
Visits
|
||||
</CardTitle>
|
||||
<MousePointerClick class="w-4 h-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div
|
||||
class="text-2xl font-bold"
|
||||
:class="{ 'blur-lg': !counters.visits }"
|
||||
>
|
||||
{{ formatNumber(counters.visits) }}
|
||||
</div>
|
||||
<!-- <p class="text-xs text-muted-foreground">
|
||||
+90
|
||||
</p> -->
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
|
||||
<CardTitle class="text-sm font-medium">
|
||||
Visitors
|
||||
</CardTitle>
|
||||
<Users class="w-4 h-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div
|
||||
class="text-2xl font-bold"
|
||||
:class="{ 'blur-lg': !counters.visitors }"
|
||||
>
|
||||
{{ formatNumber(counters.visitors) }}
|
||||
</div>
|
||||
<!-- <p class="text-xs text-muted-foreground">
|
||||
+90
|
||||
</p> -->
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
|
||||
<CardTitle class="text-sm font-medium">
|
||||
Referers
|
||||
</CardTitle>
|
||||
<Flame class="w-4 h-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div
|
||||
class="text-2xl font-bold"
|
||||
:class="{ 'blur-lg': !counters.referers }"
|
||||
>
|
||||
{{ formatNumber(counters.referers) }}
|
||||
</div>
|
||||
<!-- <p class="text-xs text-muted-foreground">
|
||||
-20
|
||||
</p> -->
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
152
components/dashboard/DatePicker.vue
Normal file
152
components/dashboard/DatePicker.vue
Normal file
@ -0,0 +1,152 @@
|
||||
<script setup>
|
||||
import { now, startOfMonth, startOfWeek } from '@internationalized/date'
|
||||
|
||||
const emit = defineEmits(['update:dateRange'])
|
||||
|
||||
const startAt = inject('startAt')
|
||||
const endAt = inject('endAt')
|
||||
|
||||
const dateRange = ref('last-7d')
|
||||
const openCustomDateRange = ref(false)
|
||||
const customDate = ref()
|
||||
const customDateRange = ref()
|
||||
|
||||
const locale = getLocale()
|
||||
|
||||
function updateCustomDate(customDateValue) {
|
||||
emit('update:dateRange', [date2unix(customDateValue, 'start'), date2unix(customDateValue, 'end')])
|
||||
openCustomDateRange.value = false
|
||||
customDate.value = undefined
|
||||
}
|
||||
|
||||
function updateCustomDateRange(customDateRangeValue) {
|
||||
if (customDateRangeValue.start && customDateRangeValue.end) {
|
||||
emit('update:dateRange', [date2unix(customDateRangeValue.start, 'start'), date2unix(customDateRangeValue.end, 'end')])
|
||||
openCustomDateRange.value = false
|
||||
customDateRange.value = undefined
|
||||
}
|
||||
}
|
||||
|
||||
function isDateDisabled(dateValue) {
|
||||
return dateValue.toDate() > new Date()
|
||||
}
|
||||
|
||||
watch(dateRange, (newValue) => {
|
||||
switch (newValue) {
|
||||
case 'today':
|
||||
emit('update:dateRange', [date2unix(now(), 'start'), date2unix(now())])
|
||||
break
|
||||
case 'last-24h':
|
||||
emit('update:dateRange', [date2unix(now().subtract({ hours: 24 })), date2unix(now())])
|
||||
break
|
||||
case 'this-week':
|
||||
emit('update:dateRange', [date2unix(startOfWeek(now(), locale), 'start'), date2unix(now())])
|
||||
break
|
||||
case 'last-7d':
|
||||
emit('update:dateRange', [date2unix(now().subtract({ days: 7 })), date2unix(now())])
|
||||
break
|
||||
case 'this-month':
|
||||
emit('update:dateRange', [date2unix(startOfMonth(now()), 'start'), date2unix(now())])
|
||||
break
|
||||
case 'last-30d':
|
||||
emit('update:dateRange', [date2unix(now().subtract({ days: 30 })), date2unix(now())])
|
||||
break
|
||||
case 'last-90d':
|
||||
emit('update:dateRange', [date2unix(now().subtract({ days: 90 })), date2unix(now())])
|
||||
break
|
||||
case 'custom':
|
||||
openCustomDateRange.value = true
|
||||
dateRange.value = null
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Select v-model="dateRange">
|
||||
<SelectTrigger>
|
||||
<SelectValue v-if="dateRange" />
|
||||
<div v-else>
|
||||
{{ shortDate(startAt) }} - {{ shortDate(endAt) }}
|
||||
</div>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="today">
|
||||
Today
|
||||
</SelectItem>
|
||||
<SelectItem value="last-24h">
|
||||
Last 24 hours
|
||||
</SelectItem>
|
||||
<SelectSeparator />
|
||||
<SelectItem value="this-week">
|
||||
This week
|
||||
</SelectItem>
|
||||
<SelectItem value="last-7d">
|
||||
Last 7 days
|
||||
</SelectItem>
|
||||
<SelectSeparator />
|
||||
<SelectItem value="this-month">
|
||||
This month
|
||||
</SelectItem>
|
||||
<SelectItem value="last-30d">
|
||||
Last 30 days
|
||||
</SelectItem>
|
||||
<SelectSeparator />
|
||||
<SelectItem value="last-90d">
|
||||
Last 90 days
|
||||
</SelectItem>
|
||||
<SelectSeparator />
|
||||
<SelectItem value="custom">
|
||||
Custom
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Dialog v-model:open="openCustomDateRange">
|
||||
<DialogContent class="w-auto max-w-[95svw] max-h-[95svh] md:max-w-screen-md grid-rows-[auto_minmax(0,1fr)_auto]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Custom Date</DialogTitle>
|
||||
</DialogHeader>
|
||||
<Tabs
|
||||
default-value="range"
|
||||
>
|
||||
<div class="flex justify-center">
|
||||
<TabsList>
|
||||
<TabsTrigger value="date">
|
||||
Date
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="range">
|
||||
Date Range
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</div>
|
||||
<TabsContent
|
||||
value="date"
|
||||
class="overflow-y-auto h-80"
|
||||
>
|
||||
<Calendar
|
||||
:model-value="customDate"
|
||||
weekday-format="short"
|
||||
:is-date-disabled="isDateDisabled"
|
||||
@update:model-value="updateCustomDate"
|
||||
/>
|
||||
</TabsContent>
|
||||
<TabsContent
|
||||
value="range"
|
||||
class="overflow-y-auto h-80"
|
||||
>
|
||||
<RangeCalendar
|
||||
:model-value="customDateRange"
|
||||
initial-focus
|
||||
weekday-format="short"
|
||||
:number-of-months="2"
|
||||
:is-date-disabled="isDateDisabled"
|
||||
@update:model-value="updateCustomDateRange"
|
||||
/>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
41
components/dashboard/Index.vue
Normal file
41
components/dashboard/Index.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<script setup>
|
||||
import { now } from '@internationalized/date'
|
||||
|
||||
defineProps({
|
||||
link: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
})
|
||||
|
||||
const startAt = ref(date2unix(now().subtract({ days: 7 })))
|
||||
const endAt = ref(date2unix(now()))
|
||||
|
||||
provide('startAt', startAt)
|
||||
provide('endAt', endAt)
|
||||
|
||||
function changeDate(time) {
|
||||
// console.log('dashboard date', new Date(time[0] * 1000), new Date(time[1] * 1000))
|
||||
startAt.value = time[0]
|
||||
endAt.value = time[1]
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="space-y-6">
|
||||
<DashboardNav>
|
||||
<template
|
||||
v-if="link"
|
||||
#left
|
||||
>
|
||||
<h3 class="text-xl font-bold leading-10">
|
||||
{{ link.slug }}'s Stats
|
||||
</h3>
|
||||
</template>
|
||||
<DashboardDatePicker @update:date-range="changeDate" />
|
||||
</DashboardNav>
|
||||
<DashboardCounters />
|
||||
<DashboardViews />
|
||||
<DashboardMetrics />
|
||||
</main>
|
||||
</template>
|
||||
32
components/dashboard/Logout.vue
Normal file
32
components/dashboard/Logout.vue
Normal file
@ -0,0 +1,32 @@
|
||||
<script setup>
|
||||
import { LogOut } from 'lucide-vue-next'
|
||||
|
||||
function logOut() {
|
||||
localStorage.removeItem('SinkSiteToken')
|
||||
navigateTo('/dashboard/login')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger as-child>
|
||||
<LogOut
|
||||
class="w-4 h-4 cursor-pointer"
|
||||
/>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent class="max-w-[95svw] max-h-[95svh] md:max-w-lg grid-rows-[auto_minmax(0,1fr)_auto]">
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>LogOut ?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Are you sure you want to log out ?
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction @click="logOut">
|
||||
LogOut
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</template>
|
||||
28
components/dashboard/Nav.vue
Normal file
28
components/dashboard/Nav.vue
Normal file
@ -0,0 +1,28 @@
|
||||
<script setup>
|
||||
const route = useRoute()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="flex justify-between">
|
||||
<Tabs
|
||||
v-if="route.path !== '/dashboard/link'"
|
||||
:default-value="route.path"
|
||||
@update:model-value="navigateTo"
|
||||
>
|
||||
<TabsList>
|
||||
<TabsTrigger value="/dashboard">
|
||||
Analysis
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="/dashboard/links"
|
||||
>
|
||||
Links
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
<slot name="left" />
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
73
components/dashboard/Views.vue
Normal file
73
components/dashboard/Views.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<script setup>
|
||||
import { AreaChart } from '@/components/ui/chart-area'
|
||||
import { BarChart } from '@/components/ui/chart-bar'
|
||||
|
||||
const views = ref([])
|
||||
const chart = computed(() => views.value.length > 1 ? AreaChart : BarChart)
|
||||
|
||||
const id = inject('id')
|
||||
const startAt = inject('startAt')
|
||||
const endAt = inject('endAt')
|
||||
|
||||
const OneDay = 24 * 60 * 60 // 1 day in seconds
|
||||
function getUnit(startAt, endAt) {
|
||||
if (startAt && endAt && endAt - startAt <= OneDay)
|
||||
return 'hour'
|
||||
|
||||
return 'day'
|
||||
}
|
||||
|
||||
async function getLinkViews() {
|
||||
views.value = []
|
||||
const { data } = await useAPI('/api/stats/views', {
|
||||
query: {
|
||||
id: id.value,
|
||||
unit: getUnit(startAt.value, endAt.value),
|
||||
clientTimezone: getTimeZone(),
|
||||
startAt: startAt.value,
|
||||
endAt: endAt.value,
|
||||
},
|
||||
})
|
||||
views.value = (data || []).map((item) => {
|
||||
item.visitors = +item.visitors
|
||||
item.visits = +item.visits
|
||||
return item
|
||||
})
|
||||
}
|
||||
|
||||
const stopWatchTime = watch([startAt, endAt], getLinkViews)
|
||||
|
||||
onMounted(async () => {
|
||||
getLinkViews()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
stopWatchTime()
|
||||
})
|
||||
|
||||
function formatTime(tick) {
|
||||
if (Number.isInteger(tick) && views.value[tick]) {
|
||||
if (getUnit(startAt.value, endAt.value) === 'hour')
|
||||
return views.value[tick].time.split(' ')[1] || ''
|
||||
|
||||
return views.value[tick].time
|
||||
}
|
||||
return ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card class="px-0 py-6 md:px-6">
|
||||
<CardTitle class="px-6 md:px-0">
|
||||
Views
|
||||
</CardTitle>
|
||||
<component
|
||||
:is="chart"
|
||||
:data="views"
|
||||
index="time"
|
||||
:categories="['visitors', 'visits']"
|
||||
:x-formatter="formatTime"
|
||||
:y-formatter="formatNumber"
|
||||
/>
|
||||
</Card>
|
||||
</template>
|
||||
45
components/dashboard/links/Delete.vue
Normal file
45
components/dashboard/links/Delete.vue
Normal file
@ -0,0 +1,45 @@
|
||||
<script setup>
|
||||
import { toast } from 'vue-sonner'
|
||||
|
||||
const props = defineProps({
|
||||
link: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:link'])
|
||||
|
||||
async function deleteLink() {
|
||||
await useAPI('/api/link/delete', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
slug: props.link.slug,
|
||||
},
|
||||
})
|
||||
emit('update:link', props.link, 'delete')
|
||||
toast('Delete successful!')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger as-child>
|
||||
<slot />
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent class="max-w-[95svw] max-h-[95svh] md:max-w-lg grid-rows-[auto_minmax(0,1fr)_auto]">
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This action cannot be undone. This will really delete your link from servers.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction @click="deleteLink">
|
||||
Continue
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</template>
|
||||
193
components/dashboard/links/Editor.vue
Normal file
193
components/dashboard/links/Editor.vue
Normal file
@ -0,0 +1,193 @@
|
||||
<script setup>
|
||||
import { z } from 'zod'
|
||||
import { useForm } from 'vee-validate'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import { Shuffle, Sparkles } from 'lucide-vue-next'
|
||||
import { toast } from 'vue-sonner'
|
||||
import { DependencyType } from '@/components/ui/auto-form/interface'
|
||||
import { LinkSchema, nanoid } from '@/schemas/link'
|
||||
|
||||
const props = defineProps({
|
||||
link: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:link'])
|
||||
|
||||
const link = ref(props.link)
|
||||
const dialogOpen = ref(false)
|
||||
|
||||
const isEdit = !!props.link.id
|
||||
|
||||
const EditLinkSchema = LinkSchema.pick({
|
||||
url: true,
|
||||
slug: true,
|
||||
}).extend({
|
||||
optional: LinkSchema.omit({
|
||||
id: true,
|
||||
url: true,
|
||||
slug: true,
|
||||
createdAt: true,
|
||||
updatedAt: true,
|
||||
title: true,
|
||||
description: true,
|
||||
image: true,
|
||||
}).extend({
|
||||
expiration: z.coerce.date().optional(),
|
||||
}).optional(),
|
||||
})
|
||||
|
||||
const fieldConfig = {
|
||||
slug: {
|
||||
disabled: isEdit,
|
||||
},
|
||||
optional: {
|
||||
comment: {
|
||||
component: 'textarea',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const dependencies = [
|
||||
{
|
||||
sourceField: 'slug',
|
||||
type: DependencyType.DISABLES,
|
||||
targetField: 'slug',
|
||||
when: () => isEdit,
|
||||
},
|
||||
]
|
||||
|
||||
const form = useForm({
|
||||
validationSchema: toTypedSchema(EditLinkSchema),
|
||||
initialValues: {
|
||||
slug: link.value.slug,
|
||||
url: link.value.url,
|
||||
optional: {
|
||||
comment: link.value.comment,
|
||||
},
|
||||
},
|
||||
validateOnMount: isEdit,
|
||||
keepValuesOnUnmount: isEdit,
|
||||
})
|
||||
|
||||
function randomSlug() {
|
||||
form.setFieldValue('slug', nanoid()())
|
||||
}
|
||||
|
||||
const aiSlugPending = ref(false)
|
||||
async function aiSlug() {
|
||||
if (!form.values.url)
|
||||
return
|
||||
|
||||
aiSlugPending.value = true
|
||||
try {
|
||||
const { slug } = await useAPI('/api/link/ai', {
|
||||
query: {
|
||||
url: form.values.url,
|
||||
},
|
||||
})
|
||||
form.setFieldValue('slug', slug)
|
||||
}
|
||||
catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
aiSlugPending.value = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (link.value.expiration) {
|
||||
form.setFieldValue('optional.expiration', unix2date(link.value.expiration))
|
||||
}
|
||||
})
|
||||
|
||||
async function onSubmit(formData) {
|
||||
const link = {
|
||||
url: formData.url,
|
||||
slug: formData.slug,
|
||||
...(formData.optional || []),
|
||||
expiration: formData.optional?.expiration ? date2unix(formData.optional?.expiration, 'end') : undefined,
|
||||
}
|
||||
const { link: newLink } = await useAPI(isEdit ? '/api/link/edit' : '/api/link/create', {
|
||||
method: isEdit ? 'PUT' : 'POST',
|
||||
body: link,
|
||||
})
|
||||
dialogOpen.value = false
|
||||
emit('update:link', newLink, isEdit ? 'edit' : 'create')
|
||||
isEdit ? toast('Link updated successfully') : toast('Link created successfully')
|
||||
}
|
||||
|
||||
const { previewMode } = useRuntimeConfig().public
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog v-model:open="dialogOpen">
|
||||
<DialogTrigger as-child>
|
||||
<slot>
|
||||
<Button
|
||||
class="ml-2"
|
||||
variant="outline"
|
||||
@click="randomSlug"
|
||||
>
|
||||
Create Link
|
||||
</Button>
|
||||
</slot>
|
||||
</DialogTrigger>
|
||||
<DialogContent class="max-w-[95svw] max-h-[95svh] md:max-w-lg grid-rows-[auto_minmax(0,1fr)_auto]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{{ link.id ? 'Edit Link' : 'Create Link' }}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<p
|
||||
v-if="previewMode"
|
||||
class="text-sm text-muted-foreground"
|
||||
>
|
||||
The preview mode link is valid for up to 24 hours.
|
||||
</p>
|
||||
<AutoForm
|
||||
class="px-2 space-y-2 overflow-y-auto"
|
||||
:schema="EditLinkSchema"
|
||||
:form="form"
|
||||
:field-config="fieldConfig"
|
||||
:dependencies="dependencies"
|
||||
@submit="onSubmit"
|
||||
>
|
||||
<template #slug="slotProps">
|
||||
<div
|
||||
v-if="!isEdit"
|
||||
class="relative"
|
||||
>
|
||||
<div class="absolute right-0 flex space-x-3 top-1">
|
||||
<Shuffle
|
||||
class="w-4 h-4 cursor-pointer"
|
||||
@click="randomSlug"
|
||||
/>
|
||||
<Sparkles
|
||||
class="w-4 h-4 cursor-pointer"
|
||||
:class="{ 'animate-bounce': aiSlugPending }"
|
||||
@click="aiSlug"
|
||||
/>
|
||||
</div>
|
||||
<AutoFormField
|
||||
v-bind="slotProps"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<DialogFooter>
|
||||
<DialogClose as-child>
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
class="mt-2 sm:mt-0"
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<Button type="submit">
|
||||
Save
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</AutoForm>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
63
components/dashboard/links/Index.vue
Normal file
63
components/dashboard/links/Index.vue
Normal file
@ -0,0 +1,63 @@
|
||||
<script setup>
|
||||
import { Loader } from 'lucide-vue-next'
|
||||
import { useInfiniteScroll } from '@vueuse/core'
|
||||
|
||||
const links = ref([])
|
||||
const limit = 24
|
||||
let cursor = ''
|
||||
let listComplete = false
|
||||
|
||||
async function getLinks() {
|
||||
const data = await useAPI('/api/link/list', {
|
||||
query: {
|
||||
limit,
|
||||
cursor,
|
||||
},
|
||||
})
|
||||
links.value = links.value.concat(data.links)
|
||||
cursor = data.cursor
|
||||
listComplete = data.list_complete
|
||||
}
|
||||
|
||||
const { isLoading } = useInfiniteScroll(
|
||||
document,
|
||||
getLinks,
|
||||
{ distance: 10, interval: 1000, canLoadMore: () => !listComplete },
|
||||
)
|
||||
|
||||
function updateLinkList(link, type) {
|
||||
if (type === 'edit') {
|
||||
const index = links.value.findIndex(l => l.id === link.id)
|
||||
links.value[index] = link
|
||||
}
|
||||
else if (type === 'delete') {
|
||||
const index = links.value.findIndex(l => l.id === link.id)
|
||||
links.value.splice(index, 1)
|
||||
}
|
||||
else {
|
||||
links.value.unshift(link)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="space-y-6">
|
||||
<DashboardNav>
|
||||
<DashboardLinksEditor @update:link="updateLinkList" />
|
||||
</DashboardNav>
|
||||
<section class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<DashboardLinksLink
|
||||
v-for="link in links"
|
||||
:key="link.id"
|
||||
:link="link"
|
||||
@update:link="updateLinkList"
|
||||
/>
|
||||
</section>
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="flex items-center justify-center"
|
||||
>
|
||||
<Loader class="animate-spin" />
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
186
components/dashboard/links/Link.vue
Normal file
186
components/dashboard/links/Link.vue
Normal file
@ -0,0 +1,186 @@
|
||||
<script setup>
|
||||
import { CalendarPlus2, Copy, CopyCheck, Eraser, Hourglass, Link as LinkIcon, QrCode, SquareChevronDown, SquarePen } from 'lucide-vue-next'
|
||||
import { useClipboard } from '@vueuse/core'
|
||||
import { toast } from 'vue-sonner'
|
||||
import { parseURL } from 'ufo'
|
||||
import QRCode from './QRCode.vue'
|
||||
|
||||
const props = defineProps({
|
||||
link: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
const emit = defineEmits(['update:link'])
|
||||
|
||||
const editPopoverOpen = ref(false)
|
||||
|
||||
const { host, origin } = location
|
||||
|
||||
function getLinkHost(url) {
|
||||
const { host } = parseURL(url)
|
||||
return host
|
||||
}
|
||||
|
||||
const shortLink = computed(() => `${origin}/${props.link.slug}`)
|
||||
const linkIcon = computed(() => `https://unavatar.io/${getLinkHost(props.link.url)}?fallback=https://sink.cool/sink.png`)
|
||||
|
||||
const { copy, copied } = useClipboard({ source: shortLink.value, copiedDuring: 400 })
|
||||
|
||||
function updateLink(link, type) {
|
||||
emit('update:link', link, type)
|
||||
editPopoverOpen.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card>
|
||||
<NuxtLink
|
||||
class="flex flex-col p-4 space-y-3"
|
||||
:to="`/dashboard/link?slug=${link.slug}`"
|
||||
>
|
||||
<div class="flex items-center justify-center space-x-3">
|
||||
<Avatar>
|
||||
<AvatarImage
|
||||
:src="linkIcon"
|
||||
alt="@radix-vue"
|
||||
/>
|
||||
<AvatarFallback>
|
||||
<img
|
||||
src="/sink.png"
|
||||
alt="Sink"
|
||||
>
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<div class="flex items-center">
|
||||
<div class="font-bold leading-5 truncate text-md">
|
||||
{{ host }}/{{ link.slug }}
|
||||
</div>
|
||||
|
||||
<CopyCheck
|
||||
v-if="copied"
|
||||
class="w-4 h-4 ml-1 shrink-0"
|
||||
@click.prevent
|
||||
/>
|
||||
<Copy
|
||||
v-else
|
||||
class="w-4 h-4 ml-1 shrink-0"
|
||||
@click.prevent="copy(shortLink);toast('Copy successful!')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<p class="text-sm truncate">
|
||||
{{ link.comment || link.title || link.description }}
|
||||
</p>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p class="max-w-[90svw] break-all">
|
||||
{{ link.comment || link.title || link.description }}
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
|
||||
<a
|
||||
:href="link.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
@click.stop
|
||||
>
|
||||
<LinkIcon class="w-5 h-5" />
|
||||
</a>
|
||||
|
||||
<Popover>
|
||||
<PopoverTrigger>
|
||||
<QrCode
|
||||
class="w-5 h-5"
|
||||
@click.prevent
|
||||
/>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent>
|
||||
<QRCode
|
||||
:data="shortLink"
|
||||
:image="linkIcon"
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<Popover v-model:open="editPopoverOpen">
|
||||
<PopoverTrigger>
|
||||
<SquareChevronDown
|
||||
class="w-5 h-5"
|
||||
@click.prevent
|
||||
/>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
class="w-auto p-0"
|
||||
:hide-when-detached="false"
|
||||
>
|
||||
<DashboardLinksEditor
|
||||
:link="link"
|
||||
@update:link="updateLink"
|
||||
>
|
||||
<div
|
||||
class="cursor-pointer flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
<SquarePen
|
||||
class="w-5 h-5 mr-2"
|
||||
/>
|
||||
Edit
|
||||
</div>
|
||||
</DashboardLinksEditor>
|
||||
|
||||
<Separator />
|
||||
|
||||
<DashboardLinksDelete
|
||||
:link="link"
|
||||
@update:link="updateLink"
|
||||
>
|
||||
<div
|
||||
class="cursor-pointer flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
<Eraser
|
||||
class="w-5 h-5 mr-2"
|
||||
/> Delete
|
||||
</div>
|
||||
</DashboardLinksDelete>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div class="flex w-full h-5 space-x-2 text-sm">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<span class="inline-flex items-center leading-5"><CalendarPlus2 class="w-4 h-4 mr-1" /> {{ shortDate(link.createdAt) }}</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Created At: {{ longDate(link.createdAt) }}</p>
|
||||
<p>Updated At: {{ longDate(link.updatedAt) }}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<template v-if="link.expiration">
|
||||
<Separator orientation="vertical" />
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<span class="inline-flex items-center leading-5"><Hourglass class="w-4 h-4 mr-1" /> {{ shortDate(link.expiration) }}</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Expires At: {{ longDate(link.expiration) }}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</template>
|
||||
<Separator orientation="vertical" />
|
||||
<span class="truncate">{{ link.url }}</span>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</Card>
|
||||
</template>
|
||||
81
components/dashboard/links/QRCode.vue
Normal file
81
components/dashboard/links/QRCode.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<script setup>
|
||||
import QRCodeStyling from 'qr-code-styling'
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
image: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
const options = {
|
||||
width: 256,
|
||||
height: 256,
|
||||
data: props.data,
|
||||
margin: 10,
|
||||
qrOptions: { typeNumber: '0', mode: 'Byte', errorCorrectionLevel: 'Q' },
|
||||
imageOptions: { hideBackgroundDots: true, imageSize: 0.4, margin: 2 },
|
||||
dotsOptions: { type: 'dots', color: '#000000', gradient: null },
|
||||
backgroundOptions: { color: '#ffffff', gradient: null },
|
||||
image: props.image,
|
||||
dotsOptionsHelper: {
|
||||
colorType: { single: true, gradient: false },
|
||||
gradient: {
|
||||
linear: true,
|
||||
radial: false,
|
||||
color1: '#6a1a4c',
|
||||
color2: '#6a1a4c',
|
||||
rotation: '0',
|
||||
},
|
||||
},
|
||||
cornersSquareOptions: { type: 'extra-rounded', color: '#000000' },
|
||||
cornersSquareOptionsHelper: {
|
||||
colorType: { single: true, gradient: false },
|
||||
gradient: {
|
||||
linear: true,
|
||||
radial: false,
|
||||
color1: '#000000',
|
||||
color2: '#000000',
|
||||
rotation: '0',
|
||||
},
|
||||
},
|
||||
cornersDotOptions: { type: 'dot', color: '#000000' },
|
||||
cornersDotOptionsHelper: {
|
||||
colorType: { single: true, gradient: false },
|
||||
gradient: {
|
||||
linear: true,
|
||||
radial: false,
|
||||
color1: '#000000',
|
||||
color2: '#000000',
|
||||
rotation: '0',
|
||||
},
|
||||
},
|
||||
backgroundOptionsHelper: {
|
||||
colorType: { single: true, gradient: false },
|
||||
gradient: {
|
||||
linear: true,
|
||||
radial: false,
|
||||
color1: '#ffffff',
|
||||
color2: '#ffffff',
|
||||
rotation: '0',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const qrCode = new QRCodeStyling(options)
|
||||
const qrCodeEl = ref(null)
|
||||
|
||||
onMounted(() => {
|
||||
qrCode.append(qrCodeEl.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
ref="qrCodeEl"
|
||||
:data-text="data"
|
||||
/>
|
||||
</template>
|
||||
46
components/dashboard/metrics/Group.vue
Normal file
46
components/dashboard/metrics/Group.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<script setup>
|
||||
import pluralize from 'pluralize'
|
||||
|
||||
defineProps({
|
||||
tabs: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
function type2name(type) {
|
||||
if (['os'].includes(type))
|
||||
return type.toUpperCase()
|
||||
|
||||
return pluralize(type.replace(type[0], type[0].toUpperCase()))
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Tabs
|
||||
:default-value="tabs[0]"
|
||||
class="flex flex-col"
|
||||
>
|
||||
<TabsList class="w-fit">
|
||||
<TabsTrigger
|
||||
v-for="tab in tabs"
|
||||
:key="tab"
|
||||
:value="tab"
|
||||
>
|
||||
{{ type2name(tab) }}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent
|
||||
v-for="tab in tabs"
|
||||
:key="tab"
|
||||
:value="tab"
|
||||
class="flex-1"
|
||||
>
|
||||
<DashboardMetricsMetric
|
||||
:type="tab"
|
||||
:name="type2name(tab)"
|
||||
class="h-full"
|
||||
/>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</template>
|
||||
25
components/dashboard/metrics/Index.vue
Normal file
25
components/dashboard/metrics/Index.vue
Normal file
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<main class="grid gap-8 lg:grid-cols-12">
|
||||
<DashboardMetricsLocations class="col-span-1 lg:col-span-8" />
|
||||
<DashboardMetricsGroup
|
||||
class="lg:col-span-4"
|
||||
:tabs="['country', 'region', 'city']"
|
||||
/>
|
||||
<DashboardMetricsGroup
|
||||
class="lg:col-span-6"
|
||||
:tabs="['referer', 'slug']"
|
||||
/>
|
||||
<DashboardMetricsGroup
|
||||
class="lg:col-span-6"
|
||||
:tabs="['language', 'timezone']"
|
||||
/>
|
||||
<DashboardMetricsGroup
|
||||
class="lg:col-span-6"
|
||||
:tabs="['device', 'deviceType']"
|
||||
/>
|
||||
<DashboardMetricsGroup
|
||||
class="lg:col-span-6"
|
||||
:tabs="['os', 'browser', 'browserType']"
|
||||
/>
|
||||
</main>
|
||||
</template>
|
||||
75
components/dashboard/metrics/List.vue
Normal file
75
components/dashboard/metrics/List.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<script setup>
|
||||
import { VList } from 'virtua/vue'
|
||||
|
||||
defineProps({
|
||||
metrics: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full text-sm">
|
||||
<div
|
||||
class="flex justify-between transition-colors border-b hover:bg-muted/50 leading-[48px]"
|
||||
>
|
||||
<div
|
||||
class="h-12 px-4 font-medium text-left align-middle text-muted-foreground "
|
||||
>
|
||||
Name
|
||||
</div>
|
||||
<div
|
||||
class="h-12 px-4 font-medium text-right align-middle text-muted-foreground"
|
||||
>
|
||||
Count
|
||||
</div>
|
||||
</div>
|
||||
<VList
|
||||
v-slot="metric"
|
||||
:data="metrics"
|
||||
:style="{ height: '342px' }"
|
||||
>
|
||||
<div class="px-4 py-2 transition-colors border-b hover:bg-muted/50">
|
||||
<div class="flex justify-between">
|
||||
<div
|
||||
class="flex-1 leading-5 truncate font-mediums"
|
||||
>
|
||||
<DashboardMetricsName
|
||||
:name="metric.name"
|
||||
:type="type"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="text-right"
|
||||
>
|
||||
{{ formatNumber(metric.count) }}
|
||||
<span class="text-xs text-gray-500">({{ metric.percent }}%)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex-1"
|
||||
>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger class="w-full">
|
||||
<Progress
|
||||
v-model="metric.percent"
|
||||
class="h-2"
|
||||
:color="metric.color"
|
||||
/>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{{ metric.percent }}%</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</div>
|
||||
</VList>
|
||||
</div>
|
||||
</template>
|
||||
93
components/dashboard/metrics/Locations.vue
Normal file
93
components/dashboard/metrics/Locations.vue
Normal file
@ -0,0 +1,93 @@
|
||||
<script setup>
|
||||
import { VisSingleContainer, VisTopoJSONMap, VisTopoJSONMapSelectors } from '@unovis/vue'
|
||||
import { WorldMapSimplestTopoJSON } from '@unovis/ts/maps'
|
||||
import WorldMapTopoJSON from '@/assets/location/world-topo.json' // https://github.com/apache/echarts/blob/master/test/data/map/json/world.json
|
||||
import { ChartTooltip } from '@/components/ui/chart'
|
||||
|
||||
WorldMapTopoJSON.objects.states.geometries.map((state) => {
|
||||
const name = state.properties.name
|
||||
const country = WorldMapSimplestTopoJSON.objects.countries.geometries.find(country => country.properties.name === name)
|
||||
state.id = state.name || ''
|
||||
if (country) {
|
||||
state.id = country.id || ''
|
||||
state.properties = country.properties
|
||||
}
|
||||
return state
|
||||
})
|
||||
|
||||
const id = inject('id')
|
||||
const startAt = inject('startAt')
|
||||
const endAt = inject('endAt')
|
||||
|
||||
const areaData = ref([])
|
||||
|
||||
async function getMapData() {
|
||||
areaData.value = []
|
||||
const { data } = await useAPI('/api/stats/metrics', {
|
||||
query: {
|
||||
type: 'country',
|
||||
id: id.value,
|
||||
startAt: startAt.value,
|
||||
endAt: endAt.value,
|
||||
},
|
||||
})
|
||||
if (Array.isArray(data)) {
|
||||
areaData.value = data.map((country) => {
|
||||
country.id = country.name
|
||||
return country
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const stopWatchTime = watch([startAt, endAt], getMapData)
|
||||
|
||||
onMounted(() => {
|
||||
getMapData()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
stopWatchTime()
|
||||
})
|
||||
|
||||
const valueFormatter = v => v
|
||||
const Tooltip = {
|
||||
props: ['title', 'data'],
|
||||
setup(props) {
|
||||
const title = props.data[1]?.value?.name
|
||||
const data = [{
|
||||
name: props.title,
|
||||
value: props.data[3]?.value?.count,
|
||||
color: 'black',
|
||||
}]
|
||||
return () => h(ChartTooltip, { title, data })
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card class="flex flex-col md:h-[500px]">
|
||||
<CardHeader>
|
||||
<CardTitle>Locations</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="flex-1 flex [&_[data-radix-aspect-ratio-wrapper]]:flex-1">
|
||||
<AspectRatio :ratio="65 / 30">
|
||||
<VisSingleContainer
|
||||
:data="{ areas: areaData }"
|
||||
class="h-full"
|
||||
>
|
||||
<VisTopoJSONMap
|
||||
:topojson="WorldMapTopoJSON"
|
||||
map-feature-name="states"
|
||||
/>
|
||||
<ChartSingleTooltip
|
||||
index="id"
|
||||
:selector="VisTopoJSONMapSelectors.feature"
|
||||
:items="areaData"
|
||||
:value-formatter="valueFormatter"
|
||||
:custom-tooltip="Tooltip"
|
||||
/>
|
||||
</VisSingleContainer>
|
||||
</AspectRatio>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</template>
|
||||
113
components/dashboard/metrics/Metric.vue
Normal file
113
components/dashboard/metrics/Metric.vue
Normal file
@ -0,0 +1,113 @@
|
||||
<script setup>
|
||||
import { Maximize } from 'lucide-vue-next'
|
||||
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const id = inject('id')
|
||||
const startAt = inject('startAt')
|
||||
const endAt = inject('endAt')
|
||||
|
||||
const total = ref(0)
|
||||
const metrics = ref([])
|
||||
const top6 = ref([])
|
||||
|
||||
async function getLinkMetrics() {
|
||||
total.value = 0
|
||||
metrics.value = []
|
||||
top6.value = []
|
||||
const { data } = await useAPI('/api/stats/metrics', {
|
||||
query: {
|
||||
type: props.type,
|
||||
id: id.value,
|
||||
startAt: startAt.value,
|
||||
endAt: endAt.value,
|
||||
},
|
||||
})
|
||||
if (Array.isArray(data)) {
|
||||
const colors = colorGradation(data.length)
|
||||
total.value = data.reduce((acc, cur) => acc + Number(cur.count), 0)
|
||||
metrics.value = data.map((item, i) => {
|
||||
item.color = colors[i]
|
||||
item.percent = Math.floor(item.count / total.value * 100) || (item.count ? 1 : 0)
|
||||
return item
|
||||
})
|
||||
top6.value = metrics.value.slice(0, 6)
|
||||
}
|
||||
}
|
||||
|
||||
const stopWatchTime = watch([startAt, endAt], getLinkMetrics)
|
||||
|
||||
onMounted(() => {
|
||||
getLinkMetrics()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
stopWatchTime()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card class="flex flex-col">
|
||||
<template v-if="metrics.length">
|
||||
<DashboardMetricsList
|
||||
class="flex-1"
|
||||
:metrics="top6"
|
||||
:type="type"
|
||||
/>
|
||||
<CardFooter class="py-2">
|
||||
<Dialog>
|
||||
<DialogTrigger
|
||||
as-child
|
||||
class="w-full"
|
||||
>
|
||||
<Button
|
||||
variant="link"
|
||||
>
|
||||
<Maximize
|
||||
class="w-4 h-4 mr-2"
|
||||
/> DETAILS
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent class="max-w-[95svw] max-h-[95svh] md:max-w-screen-md grid-rows-[auto_minmax(0,1fr)_auto]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{{ name }}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<DashboardMetricsList
|
||||
class="overflow-y-auto"
|
||||
:metrics="metrics"
|
||||
:type="type"
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</CardFooter>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="flex items-center justify-between h-12 px-4">
|
||||
<Skeleton
|
||||
class="w-32 h-4 rounded-full"
|
||||
/>
|
||||
<Skeleton
|
||||
class="w-20 h-4 rounded-full"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-for="i in 3"
|
||||
:key="i"
|
||||
class="px-4 py-4"
|
||||
>
|
||||
<Skeleton
|
||||
class="w-full h-4 rounded-full"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</template>
|
||||
101
components/dashboard/metrics/name/Icon.vue
Normal file
101
components/dashboard/metrics/name/Icon.vue
Normal file
@ -0,0 +1,101 @@
|
||||
<script setup>
|
||||
// https://vue3-simple-icons.wyatt-herkamp.dev/
|
||||
import {
|
||||
AppleIcon,
|
||||
AndroidIcon,
|
||||
DebianIcon,
|
||||
FacebookIcon,
|
||||
FirefoxBrowserIcon,
|
||||
GoogleChromeIcon,
|
||||
GoogleIcon,
|
||||
HuaweiIcon,
|
||||
IOsIcon,
|
||||
InternetExplorerIcon,
|
||||
LinuxIcon,
|
||||
MacOsIcon,
|
||||
MicrosoftEdgeIcon,
|
||||
OperaIcon,
|
||||
SafariIcon,
|
||||
SamsungIcon,
|
||||
UbuntuIcon,
|
||||
VivoIcon,
|
||||
WeChatIcon,
|
||||
WindowsIcon,
|
||||
XiaomiIcon,
|
||||
YandexCloudIcon,
|
||||
} from 'vue3-simple-icons'
|
||||
|
||||
import {
|
||||
Globe,
|
||||
Laptop,
|
||||
MonitorCheck,
|
||||
Smartphone,
|
||||
Tablet,
|
||||
Terminal,
|
||||
} from 'lucide-vue-next'
|
||||
|
||||
defineProps({
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'browser',
|
||||
},
|
||||
})
|
||||
|
||||
const iconMaps = {
|
||||
'android': AndroidIcon,
|
||||
'browser': Globe,
|
||||
'chrome': GoogleChromeIcon,
|
||||
'chrome headless': GoogleChromeIcon,
|
||||
'chrome webview': GoogleChromeIcon,
|
||||
'chromium': GoogleChromeIcon,
|
||||
'curl': Terminal,
|
||||
'debian': DebianIcon,
|
||||
'desktop': MonitorCheck,
|
||||
'edge': MicrosoftEdgeIcon,
|
||||
'facebook': FacebookIcon,
|
||||
'facebookexternalhit': FacebookIcon,
|
||||
'firefox': FirefoxBrowserIcon,
|
||||
'googlebot': GoogleIcon,
|
||||
'googlebot-image': GoogleIcon,
|
||||
'harmonyos': HuaweiIcon,
|
||||
'huawei browser': HuaweiIcon,
|
||||
'ie': InternetExplorerIcon,
|
||||
'ios': IOsIcon,
|
||||
'ipad': AppleIcon,
|
||||
'iphone': AppleIcon,
|
||||
'ipod': AppleIcon,
|
||||
'laptop': Laptop,
|
||||
'linux': LinuxIcon,
|
||||
'macintosh': AppleIcon,
|
||||
'macos': MacOsIcon,
|
||||
'miui browser': XiaomiIcon,
|
||||
'mobile': Smartphone,
|
||||
'mobile chrome': GoogleChromeIcon,
|
||||
'mobile firefox': FirefoxBrowserIcon,
|
||||
'mobile safari': SafariIcon,
|
||||
'opera': OperaIcon,
|
||||
'os': MonitorCheck,
|
||||
'safari': SafariIcon,
|
||||
'samsung internet': SamsungIcon,
|
||||
'tablet': Tablet,
|
||||
'ubuntu': UbuntuIcon,
|
||||
'vivo browser': VivoIcon,
|
||||
'wechat': WeChatIcon,
|
||||
'windows': WindowsIcon,
|
||||
'yandex': YandexCloudIcon,
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full truncate">
|
||||
<component
|
||||
:is="iconMaps[name.toLowerCase()] || iconMaps[type]"
|
||||
class="w-5 h-5 py-0.5 float-left"
|
||||
/>
|
||||
<span>{{ name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
66
components/dashboard/metrics/name/Index.vue
Normal file
66
components/dashboard/metrics/name/Index.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
function formatName(name, type) {
|
||||
if (!name || typeof Intl === 'undefined')
|
||||
return name
|
||||
|
||||
try {
|
||||
if (type === 'country') {
|
||||
const regionNames = new Intl.DisplayNames(['en'], { type: 'region' })
|
||||
return `${getFlag(name)} ${regionNames.of(name)}`
|
||||
}
|
||||
if (type === 'language') {
|
||||
const languageNames = new Intl.DisplayNames(['en'], { type: 'language' })
|
||||
return languageNames.of(name)
|
||||
}
|
||||
return name
|
||||
}
|
||||
catch (e) {
|
||||
console.error(e)
|
||||
return name
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger class="w-full text-left">
|
||||
<DashboardMetricsNameReferer
|
||||
v-if="name && type === 'referer'"
|
||||
:name="name"
|
||||
/>
|
||||
<DashboardMetricsNameSlug
|
||||
v-else-if="name && type === 'slug'"
|
||||
:name="name"
|
||||
/>
|
||||
<DashboardMetricsNameIcon
|
||||
v-else-if="name && ['os', 'browser', 'browserType', 'device', 'deviceType'].includes(type)"
|
||||
:name="name"
|
||||
:type="type"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="w-full truncate"
|
||||
>
|
||||
{{ formatName(name, type) || '(None)' }}
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent v-if="name">
|
||||
<p>
|
||||
{{ formatName(name, type) }}
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</template>
|
||||
30
components/dashboard/metrics/name/Referer.vue
Normal file
30
components/dashboard/metrics/name/Referer.vue
Normal file
@ -0,0 +1,30 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
name: String,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a
|
||||
:href="`http://${name}`"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="block w-full truncate"
|
||||
>
|
||||
<Avatar
|
||||
class="w-5 h-5 p-0.5 float-left"
|
||||
>
|
||||
<AvatarImage
|
||||
:src="`https://unavatar.io/${name}?fallback=false`"
|
||||
alt="@radix-vue"
|
||||
/>
|
||||
<AvatarFallback>
|
||||
<img
|
||||
src="/sink.png"
|
||||
alt="Sink"
|
||||
>
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<span>{{ name }}</span>
|
||||
</a>
|
||||
</template>
|
||||
14
components/dashboard/metrics/name/Slug.vue
Normal file
14
components/dashboard/metrics/name/Slug.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
name: String,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink
|
||||
:to="`/dashboard/link?slug=${name}`"
|
||||
class="inline-flex items-center justify-start w-full"
|
||||
>
|
||||
<span class="w-full truncate">{{ name }}</span>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
20
components/home/Cta.vue
Normal file
20
components/home/Cta.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col items-center max-w-4xl p-8 mx-auto my-12 text-center bg-black rounded-lg md:px-20 md:py-20"
|
||||
>
|
||||
<h2 class="text-4xl tracking-tight text-white md:text-6xl">
|
||||
Deployment immediately.
|
||||
</h2>
|
||||
<p class="mt-4 text-lg text-slate-400 md:text-xl">
|
||||
With just a few simple clicks, you can start deploying without any expenses.
|
||||
</p>
|
||||
<div class="flex mt-5">
|
||||
<HomeLink
|
||||
href="https://github.com/ccbikai/sink?tab=readme-ov-file#%EF%B8%8F-deployment"
|
||||
type="inverted"
|
||||
>
|
||||
Start Deploy
|
||||
</HomeLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
78
components/home/Features.vue
Normal file
78
components/home/Features.vue
Normal file
@ -0,0 +1,78 @@
|
||||
<script setup>
|
||||
import { Link, AreaChart, ServerOff, Paintbrush, Sparkles, Hourglass } from 'lucide-vue-next'
|
||||
|
||||
const features = ref([
|
||||
{
|
||||
title: 'URL Shortening',
|
||||
description:
|
||||
'Compress your URLs to their minimal length.',
|
||||
icon: Link,
|
||||
},
|
||||
{
|
||||
title: 'Analytics',
|
||||
description:
|
||||
'Monitor link analytics and gather insightful statistics.',
|
||||
icon: AreaChart,
|
||||
},
|
||||
{
|
||||
title: 'Serverless',
|
||||
description:
|
||||
'Deploy without the need for traditional servers.',
|
||||
icon: ServerOff,
|
||||
},
|
||||
{
|
||||
title: 'Customizable Slug',
|
||||
description:
|
||||
'Support for personalized slugs.',
|
||||
icon: Paintbrush,
|
||||
},
|
||||
{
|
||||
title: 'AI Slug',
|
||||
description:
|
||||
'Leverage AI to generate slugs.',
|
||||
icon: Sparkles,
|
||||
},
|
||||
{
|
||||
title: 'Link Expiration',
|
||||
description:
|
||||
'Set expiration dates for your links.',
|
||||
icon: Hourglass,
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="pt-16 md:py-12">
|
||||
<div class="md:pb-12">
|
||||
<h2 class="text-4xl font-bold lg:text-5xl lg:tracking-tight">
|
||||
Features
|
||||
</h2>
|
||||
<p class="my-8 text-lg md:mb-0 text-slate-600">
|
||||
Simple and sufficient functionality
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-8 md:gap-16 sm:grid-cols-2 md:grid-cols-3">
|
||||
<div
|
||||
v-for="item in features"
|
||||
:key="item.title"
|
||||
class="flex items-start gap-4"
|
||||
>
|
||||
<div class="w-8 h-8 p-2 mt-1 bg-black rounded-full shrink-0">
|
||||
<component
|
||||
:is="item.icon"
|
||||
class="w-4 h-4 text-white"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">
|
||||
{{ item.title }}
|
||||
</h3>
|
||||
<p class="mt-2 leading-relaxed text-slate-500">
|
||||
{{ item.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
56
components/home/Hero.vue
Normal file
56
components/home/Hero.vue
Normal file
@ -0,0 +1,56 @@
|
||||
<script setup>
|
||||
import { AreaChart } from 'lucide-vue-next'
|
||||
import { GitHubIcon } from 'vue3-simple-icons'
|
||||
import heroImg from '@/assets/images/hero.svg?raw'
|
||||
|
||||
const { title, description } = useAppConfig()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main
|
||||
class="grid pt-8 pb-8 lg:grid-cols-2 place-items-center md:py-12"
|
||||
>
|
||||
<div class="hidden py-6 md:order-1 md:block">
|
||||
<div
|
||||
class="w-[512px]"
|
||||
v-html="heroImg"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h1
|
||||
class="text-5xl font-bold lg:text-6xl xl:text-7xl lg:tracking-tight xl:tracking-tighter"
|
||||
>
|
||||
{{ title }}
|
||||
</h1>
|
||||
<p class="max-w-xl mt-4 text-lg text-slate-600">
|
||||
{{ description }}
|
||||
</p>
|
||||
<div class="flex flex-col gap-3 mt-6 sm:flex-row">
|
||||
<HomeLink
|
||||
href="/dashboard"
|
||||
target="_blank"
|
||||
class="flex items-center justify-center gap-1"
|
||||
rel="noopener"
|
||||
>
|
||||
<AreaChart
|
||||
class="w-5 h-5"
|
||||
/>
|
||||
Dashboard
|
||||
</HomeLink>
|
||||
<HomeLink
|
||||
size="lg"
|
||||
type="outline"
|
||||
rel="noopener"
|
||||
href="https://github.com/ccbikai/sink"
|
||||
class="flex items-center justify-center gap-1"
|
||||
target="_blank"
|
||||
>
|
||||
<GitHubIcon
|
||||
class="w-5 h-5"
|
||||
/>
|
||||
GitHub Repo
|
||||
</HomeLink>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
52
components/home/Link.vue
Normal file
52
components/home/Link.vue
Normal file
@ -0,0 +1,52 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
href: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
block: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'md',
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
const sizes = {
|
||||
lg: 'px-5 py-2.5',
|
||||
md: 'px-4 py-2',
|
||||
}
|
||||
|
||||
const styles = {
|
||||
outline: 'bg-white border-2 border-black hover:bg-gray-100 text-black',
|
||||
primary: 'bg-black text-white hover:bg-gray-800 border-2 border-transparent',
|
||||
inverted: 'bg-white text-black border-2 border-transparent',
|
||||
muted: 'bg-gray-100 hover:bg-gray-200 border-2 border-transparent',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a
|
||||
:href="href"
|
||||
class="rounded text-center transition focus-visible:ring-2 ring-offset-2 ring-gray-200"
|
||||
:class="[
|
||||
block && 'w-full',
|
||||
sizes[size],
|
||||
styles[type],
|
||||
className,
|
||||
]"
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<slot />
|
||||
</a>
|
||||
</template>
|
||||
19
components/home/Logos.vue
Normal file
19
components/home/Logos.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div class="md:py-12">
|
||||
<h2 class="text-center text-slate-500">
|
||||
Built with awesome technologies
|
||||
</h2>
|
||||
<div class="flex flex-wrap items-center justify-center gap-8 mt-10 md:gap-20">
|
||||
<img
|
||||
class="w-64 aspect-[1256/632]"
|
||||
alt="Cloudflare"
|
||||
src="@/assets/images/cloudflare.png"
|
||||
>
|
||||
<img
|
||||
class="w-64 aspect-[1256/632]"
|
||||
alt="Nuxt.js"
|
||||
src="@/assets/images/nuxtjs.png"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
20
components/home/Twitter.vue
Normal file
20
components/home/Twitter.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<script setup>
|
||||
import { XIcon } from 'vue3-simple-icons'
|
||||
import { ArrowRight } from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a
|
||||
href="https://x.com/ccbikai"
|
||||
target="_blank"
|
||||
class="inline-flex items-center px-3 py-1 mx-auto my-4 space-x-1 text-sm font-medium rounded-lg bg-muted"
|
||||
>
|
||||
<XIcon class="w-4 h-4" />
|
||||
<Separator
|
||||
orientation="vertical"
|
||||
class="h-4"
|
||||
/>
|
||||
<span>Follow me on X(Twitter)</span>
|
||||
<ArrowRight class="w-4 h-4" />
|
||||
</a>
|
||||
</template>
|
||||
99
components/layouts/Footer.vue
Normal file
99
components/layouts/Footer.vue
Normal file
@ -0,0 +1,99 @@
|
||||
<script setup>
|
||||
import { GmailIcon, TelegramIcon, BloggerIcon, XIcon, MastodonIcon, GitHubIcon } from 'vue3-simple-icons'
|
||||
|
||||
const email = ref(null)
|
||||
onMounted(() => {
|
||||
email.value.href = email.value.href.replace('$', '@')
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="text-gray-700 bg-white md:pt-6">
|
||||
<div class="container flex flex-col items-center py-8 mx-auto sm:flex-row">
|
||||
<a
|
||||
href="/"
|
||||
class="text-xl font-black leading-none text-gray-900 select-none logo"
|
||||
>Sink</a>
|
||||
<a
|
||||
class="mt-4 text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l sm:border-gray-200 sm:mt-0"
|
||||
href="https://html.zone"
|
||||
target="_blank"
|
||||
>
|
||||
© {{ new Date().getFullYear() }} Products of HTML.ZONE
|
||||
</a>
|
||||
<span
|
||||
class="inline-flex justify-center mt-4 space-x-5 sm:ml-auto sm:mt-0 sm:justify-start"
|
||||
>
|
||||
<a
|
||||
ref="email"
|
||||
href="mailto:sink.cool$miantiao.me"
|
||||
title="Email"
|
||||
class="text-gray-400 hover:text-gray-500"
|
||||
>
|
||||
<span class="sr-only">Email</span>
|
||||
<GmailIcon
|
||||
class="w-6 h-6"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://t.me/htmlzone"
|
||||
target="_blank"
|
||||
title="Telegram"
|
||||
class="text-gray-400 hover:text-gray-500"
|
||||
>
|
||||
<span class="sr-only">Telegram</span>
|
||||
<TelegramIcon
|
||||
class="w-6 h-6"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://mt.ci"
|
||||
target="_blank"
|
||||
title="Blog"
|
||||
class="text-gray-400 hover:text-gray-500"
|
||||
>
|
||||
<span class="sr-only">Blog</span>
|
||||
<BloggerIcon
|
||||
class="w-6 h-6"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://x.com/ccbikai"
|
||||
target="_blank"
|
||||
title="Twitter"
|
||||
class="text-gray-400 hover:text-gray-500"
|
||||
>
|
||||
<span class="sr-only">Twitter</span>
|
||||
<XIcon
|
||||
class="w-6 h-6"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://miantiao.me/@chi"
|
||||
target="_blank"
|
||||
title="Mastodon"
|
||||
class="text-gray-400 hover:text-gray-500"
|
||||
>
|
||||
<span class="sr-only">Mastodon</span>
|
||||
<MastodonIcon
|
||||
class="w-6 h-6"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://github.com/ccbikai"
|
||||
target="_blank"
|
||||
title="GitHub"
|
||||
class="text-gray-400 hover:text-gray-500"
|
||||
>
|
||||
<span class="sr-only">GitHub</span>
|
||||
<GitHubIcon
|
||||
class="w-6 h-6"
|
||||
/>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
93
components/layouts/Header.vue
Normal file
93
components/layouts/Header.vue
Normal file
@ -0,0 +1,93 @@
|
||||
<script setup>
|
||||
import { Ellipsis, X } from 'lucide-vue-next'
|
||||
import { GitHubIcon } from 'vue3-simple-icons'
|
||||
|
||||
const showMenu = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="pb-6 bg-white">
|
||||
<nav class="container relative z-50 h-24 select-none">
|
||||
<div
|
||||
class="container relative flex flex-wrap items-center justify-between h-24 px-0 mx-auto overflow-hidden font-medium border-b border-gray-200 md:overflow-visible lg:justify-center"
|
||||
>
|
||||
<div class="flex items-center justify-start w-1/4 h-full pr-4">
|
||||
<a
|
||||
href="/"
|
||||
class="flex items-center py-4 space-x-2 text-xl font-extrabold text-gray-900 md:py-0"
|
||||
>
|
||||
<span
|
||||
class="flex items-center justify-center w-8 h-8 text-white bg-gray-900 rounded-full"
|
||||
>
|
||||
<img
|
||||
src="/sink.png"
|
||||
alt="Sink"
|
||||
class="w-full h-full rounded-full"
|
||||
>
|
||||
</span>
|
||||
<span class="mx-2">Sink</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="top-0 left-0 items-start w-full h-full p-4 text-sm bg-gray-900 bg-opacity-50 md:items-center md:w-3/4 md:absolute lg:text-base md:bg-transparent md:p-0 md:relative md:flex"
|
||||
:class="{ 'flex fixed': showMenu, 'hidden': !showMenu }"
|
||||
@touchmove.prevent
|
||||
>
|
||||
<div
|
||||
class="flex-col w-full h-auto overflow-hidden bg-white rounded-lg md:bg-transparent md:overflow-visible md:rounded-none md:relative md:flex md:flex-row"
|
||||
>
|
||||
<a
|
||||
href="/"
|
||||
target="_blank"
|
||||
class="inline-flex items-center w-auto h-16 px-6 text-xl font-black leading-none text-gray-900 md:hidden"
|
||||
>
|
||||
<span
|
||||
class="flex items-center justify-center w-8 h-8 text-white bg-gray-900 rounded-full"
|
||||
>
|
||||
<img
|
||||
src="/sink.png"
|
||||
alt="Sink"
|
||||
class="w-full h-full rounded-full"
|
||||
>
|
||||
</span>
|
||||
<span class="mx-2">Sink</span>
|
||||
</a>
|
||||
<div class="w-full mx-4" />
|
||||
<div
|
||||
class="flex flex-col items-start justify-end w-full pt-4 md:items-center md:w-1/3 md:flex-row md:py-0"
|
||||
>
|
||||
<a
|
||||
class="w-full px-6 py-2 mr-0 text-gray-700 cursor-pointer md:px-3 md:mr-2 lg:mr-3 md:w-auto"
|
||||
href="/dashboard"
|
||||
>Dashboard</a>
|
||||
<a
|
||||
href="https://github.com/ccbikai/sink"
|
||||
target="_blank"
|
||||
class="inline-flex items-center w-full px-6 py-3 text-sm font-medium leading-4 text-white bg-gray-900 md:w-auto md:rounded-full hover:bg-gray-800 focus:outline-none md:focus:ring-2 focus:ring-0 focus:ring-offset-2 focus:ring-gray-800"
|
||||
>
|
||||
<GitHubIcon
|
||||
class="w-5 h-5 mr-1"
|
||||
/>
|
||||
GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="absolute right-0 flex flex-col items-center justify-center w-10 h-10 bg-white rounded-full cursor-pointer md:hidden hover:bg-gray-100"
|
||||
@click="showMenu = !showMenu"
|
||||
>
|
||||
<Ellipsis
|
||||
v-show="!showMenu"
|
||||
class="w-6 h-6"
|
||||
/>
|
||||
<X
|
||||
v-show="showMenu"
|
||||
class="w-6 h-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
</template>
|
||||
65
components/login/index.vue
Normal file
65
components/login/index.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<script setup>
|
||||
import { AlertCircle } from 'lucide-vue-next'
|
||||
import { z } from 'zod'
|
||||
import { toast } from 'vue-sonner'
|
||||
|
||||
const LoginSchema = z.object({
|
||||
token: z.string().describe('SiteToken'),
|
||||
})
|
||||
const loginFieldConfig = {
|
||||
token: {
|
||||
inputProps: {
|
||||
type: 'password',
|
||||
placeholder: '********',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const { previewMode } = useRuntimeConfig().public
|
||||
|
||||
async function onSubmit(form) {
|
||||
try {
|
||||
localStorage.setItem('SinkSiteToken', form.token)
|
||||
await useAPI('/api/verify')
|
||||
navigateTo('/dashboard')
|
||||
}
|
||||
catch (e) {
|
||||
console.error(e)
|
||||
toast.error('Login failed, please try again.', {
|
||||
description: e.message,
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card class="w-full max-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle class="text-2xl">
|
||||
Login
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Enter your site token to login.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-4">
|
||||
<AutoForm
|
||||
class="space-y-6"
|
||||
:schema="LoginSchema"
|
||||
:field-config="loginFieldConfig"
|
||||
@submit="onSubmit"
|
||||
>
|
||||
<Alert v-if="previewMode">
|
||||
<AlertCircle class="w-4 h-4" />
|
||||
<AlertTitle>Tips</AlertTitle>
|
||||
<AlertDescription>
|
||||
The site token for preview mode is <code class="font-mono text-green-500">SinkCool</code> .
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
<Button class="w-full">
|
||||
Login
|
||||
</Button>
|
||||
</AutoForm>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</template>
|
||||
19
components/ui/accordion/Accordion.vue
Normal file
19
components/ui/accordion/Accordion.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
AccordionRoot,
|
||||
type AccordionRootEmits,
|
||||
type AccordionRootProps,
|
||||
useForwardPropsEmits,
|
||||
} from 'radix-vue'
|
||||
|
||||
const props = defineProps<AccordionRootProps>()
|
||||
const emits = defineEmits<AccordionRootEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AccordionRoot v-bind="forwarded">
|
||||
<slot />
|
||||
</AccordionRoot>
|
||||
</template>
|
||||
24
components/ui/accordion/AccordionContent.vue
Normal file
24
components/ui/accordion/AccordionContent.vue
Normal file
@ -0,0 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
import { type HTMLAttributes, computed } from 'vue'
|
||||
import { AccordionContent, type AccordionContentProps } from 'radix-vue'
|
||||
import { cn } from '@/utils'
|
||||
|
||||
const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, ...delegated } = props
|
||||
|
||||
return delegated
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AccordionContent
|
||||
v-bind="delegatedProps"
|
||||
class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
|
||||
>
|
||||
<div :class="cn('pb-4 pt-0', props.class)">
|
||||
<slot />
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</template>
|
||||
24
components/ui/accordion/AccordionItem.vue
Normal file
24
components/ui/accordion/AccordionItem.vue
Normal file
@ -0,0 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
import { type HTMLAttributes, computed } from 'vue'
|
||||
import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'
|
||||
import { cn } from '@/utils'
|
||||
|
||||
const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, ...delegated } = props
|
||||
|
||||
return delegated
|
||||
})
|
||||
|
||||
const forwardedProps = useForwardProps(delegatedProps)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AccordionItem
|
||||
v-bind="forwardedProps"
|
||||
:class="cn('border-b', props.class)"
|
||||
>
|
||||
<slot />
|
||||
</AccordionItem>
|
||||
</template>
|
||||
39
components/ui/accordion/AccordionTrigger.vue
Normal file
39
components/ui/accordion/AccordionTrigger.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<script setup lang="ts">
|
||||
import { type HTMLAttributes, computed } from 'vue'
|
||||
import {
|
||||
AccordionHeader,
|
||||
AccordionTrigger,
|
||||
type AccordionTriggerProps,
|
||||
} from 'radix-vue'
|
||||
import { ChevronDown } from 'lucide-vue-next'
|
||||
import { cn } from '@/utils'
|
||||
|
||||
const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, ...delegated } = props
|
||||
|
||||
return delegated
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AccordionHeader class="flex">
|
||||
<AccordionTrigger
|
||||
v-bind="delegatedProps"
|
||||
:class="
|
||||
cn(
|
||||
'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
>
|
||||
<slot />
|
||||
<slot name="icon">
|
||||
<ChevronDown
|
||||
class="h-4 w-4 shrink-0 transition-transform duration-200"
|
||||
/>
|
||||
</slot>
|
||||
</AccordionTrigger>
|
||||
</AccordionHeader>
|
||||
</template>
|
||||
4
components/ui/accordion/index.ts
Normal file
4
components/ui/accordion/index.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export { default as Accordion } from './Accordion.vue'
|
||||
export { default as AccordionContent } from './AccordionContent.vue'
|
||||
export { default as AccordionItem } from './AccordionItem.vue'
|
||||
export { default as AccordionTrigger } from './AccordionTrigger.vue'
|
||||
14
components/ui/alert-dialog/AlertDialog.vue
Normal file
14
components/ui/alert-dialog/AlertDialog.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
|
||||
|
||||
const props = defineProps<AlertDialogProps>()
|
||||
const emits = defineEmits<AlertDialogEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AlertDialogRoot v-bind="forwarded">
|
||||
<slot />
|
||||
</AlertDialogRoot>
|
||||
</template>
|
||||
20
components/ui/alert-dialog/AlertDialogAction.vue
Normal file
20
components/ui/alert-dialog/AlertDialogAction.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
import { type HTMLAttributes, computed } from 'vue'
|
||||
import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
|
||||
import { cn } from '@/utils'
|
||||
import { buttonVariants } from '@/components/ui/button'
|
||||
|
||||
const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, ...delegated } = props
|
||||
|
||||
return delegated
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
|
||||
<slot />
|
||||
</AlertDialogAction>
|
||||
</template>
|
||||
20
components/ui/alert-dialog/AlertDialogCancel.vue
Normal file
20
components/ui/alert-dialog/AlertDialogCancel.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
import { type HTMLAttributes, computed } from 'vue'
|
||||
import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
|
||||
import { cn } from '@/utils'
|
||||
import { buttonVariants } from '@/components/ui/button'
|
||||
|
||||
const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, ...delegated } = props
|
||||
|
||||
return delegated
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AlertDialogCancel v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)">
|
||||
<slot />
|
||||
</AlertDialogCancel>
|
||||
</template>
|
||||
42
components/ui/alert-dialog/AlertDialogContent.vue
Normal file
42
components/ui/alert-dialog/AlertDialogContent.vue
Normal file
@ -0,0 +1,42 @@
|
||||
<script setup lang="ts">
|
||||
import { type HTMLAttributes, computed } from 'vue'
|
||||
import {
|
||||
AlertDialogContent,
|
||||
type AlertDialogContentEmits,
|
||||
type AlertDialogContentProps,
|
||||
AlertDialogOverlay,
|
||||
AlertDialogPortal,
|
||||
useForwardPropsEmits,
|
||||
} from 'radix-vue'
|
||||
import { cn } from '@/utils'
|
||||
|
||||
const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
|
||||
const emits = defineEmits<AlertDialogContentEmits>()
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, ...delegated } = props
|
||||
|
||||
return delegated
|
||||
})
|
||||
|
||||
const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AlertDialogPortal>
|
||||
<AlertDialogOverlay
|
||||
class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
|
||||
/>
|
||||
<AlertDialogContent
|
||||
v-bind="forwarded"
|
||||
:class="
|
||||
cn(
|
||||
'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
>
|
||||
<slot />
|
||||
</AlertDialogContent>
|
||||
</AlertDialogPortal>
|
||||
</template>
|
||||
25
components/ui/alert-dialog/AlertDialogDescription.vue
Normal file
25
components/ui/alert-dialog/AlertDialogDescription.vue
Normal file
@ -0,0 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import { type HTMLAttributes, computed } from 'vue'
|
||||
import {
|
||||
AlertDialogDescription,
|
||||
type AlertDialogDescriptionProps,
|
||||
} from 'radix-vue'
|
||||
import { cn } from '@/utils'
|
||||
|
||||
const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, ...delegated } = props
|
||||
|
||||
return delegated
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AlertDialogDescription
|
||||
v-bind="delegatedProps"
|
||||
:class="cn('text-sm text-muted-foreground', props.class)"
|
||||
>
|
||||
<slot />
|
||||
</AlertDialogDescription>
|
||||
</template>
|
||||
21
components/ui/alert-dialog/AlertDialogFooter.vue
Normal file
21
components/ui/alert-dialog/AlertDialogFooter.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { cn } from '@/utils'
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes['class']
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="
|
||||
cn(
|
||||
'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
16
components/ui/alert-dialog/AlertDialogHeader.vue
Normal file
16
components/ui/alert-dialog/AlertDialogHeader.vue
Normal file
@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { cn } from '@/utils'
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes['class']
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
22
components/ui/alert-dialog/AlertDialogTitle.vue
Normal file
22
components/ui/alert-dialog/AlertDialogTitle.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import { type HTMLAttributes, computed } from 'vue'
|
||||
import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
|
||||
import { cn } from '@/utils'
|
||||
|
||||
const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, ...delegated } = props
|
||||
|
||||
return delegated
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AlertDialogTitle
|
||||
v-bind="delegatedProps"
|
||||
:class="cn('text-lg font-semibold', props.class)"
|
||||
>
|
||||
<slot />
|
||||
</AlertDialogTitle>
|
||||
</template>
|
||||
11
components/ui/alert-dialog/AlertDialogTrigger.vue
Normal file
11
components/ui/alert-dialog/AlertDialogTrigger.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'radix-vue'
|
||||
|
||||
const props = defineProps<AlertDialogTriggerProps>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AlertDialogTrigger v-bind="props">
|
||||
<slot />
|
||||
</AlertDialogTrigger>
|
||||
</template>
|
||||
9
components/ui/alert-dialog/index.ts
Normal file
9
components/ui/alert-dialog/index.ts
Normal file
@ -0,0 +1,9 @@
|
||||
export { default as AlertDialog } from './AlertDialog.vue'
|
||||
export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'
|
||||
export { default as AlertDialogContent } from './AlertDialogContent.vue'
|
||||
export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
|
||||
export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
|
||||
export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
|
||||
export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
|
||||
export { default as AlertDialogAction } from './AlertDialogAction.vue'
|
||||
export { default as AlertDialogCancel } from './AlertDialogCancel.vue'
|
||||
16
components/ui/alert/Alert.vue
Normal file
16
components/ui/alert/Alert.vue
Normal file
@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { type AlertVariants, alertVariants } from '.'
|
||||
import { cn } from '@/utils'
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes['class']
|
||||
variant?: AlertVariants['variant']
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn(alertVariants({ variant }), props.class)" role="alert">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
14
components/ui/alert/AlertDescription.vue
Normal file
14
components/ui/alert/AlertDescription.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { cn } from '@/utils'
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes['class']
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
14
components/ui/alert/AlertTitle.vue
Normal file
14
components/ui/alert/AlertTitle.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { cn } from '@/utils'
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes['class']
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
|
||||
<slot />
|
||||
</h5>
|
||||
</template>
|
||||
23
components/ui/alert/index.ts
Normal file
23
components/ui/alert/index.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { type VariantProps, cva } from 'class-variance-authority'
|
||||
|
||||
export { default as Alert } from './Alert.vue'
|
||||
export { default as AlertTitle } from './AlertTitle.vue'
|
||||
export { default as AlertDescription } from './AlertDescription.vue'
|
||||
|
||||
export const alertVariants = cva(
|
||||
'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'bg-background text-foreground',
|
||||
destructive:
|
||||
'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'default',
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
export type AlertVariants = VariantProps<typeof alertVariants>
|
||||
11
components/ui/aspect-ratio/AspectRatio.vue
Normal file
11
components/ui/aspect-ratio/AspectRatio.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { AspectRatio, type AspectRatioProps } from 'radix-vue'
|
||||
|
||||
const props = defineProps<AspectRatioProps>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AspectRatio v-bind="props">
|
||||
<slot />
|
||||
</AspectRatio>
|
||||
</template>
|
||||
1
components/ui/aspect-ratio/index.ts
Normal file
1
components/ui/aspect-ratio/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default as AspectRatio } from './AspectRatio.vue'
|
||||
105
components/ui/auto-form/AutoForm.vue
Normal file
105
components/ui/auto-form/AutoForm.vue
Normal file
@ -0,0 +1,105 @@
|
||||
<script setup lang="ts" generic="T extends ZodObjectOrWrapped">
|
||||
import { computed, toRefs } from 'vue'
|
||||
import type { ZodAny, z } from 'zod'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import type { FormContext, GenericObject } from 'vee-validate'
|
||||
import { type ZodObjectOrWrapped, getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema } from './utils'
|
||||
import type { Config, ConfigItem, Dependency, Shape } from './interface'
|
||||
import AutoFormField from './AutoFormField.vue'
|
||||
import { provideDependencies } from './dependencies'
|
||||
import { Form } from '@/components/ui/form'
|
||||
|
||||
const props = defineProps<{
|
||||
schema: T
|
||||
form?: FormContext<GenericObject>
|
||||
fieldConfig?: Config<z.infer<T>>
|
||||
dependencies?: Dependency<z.infer<T>>[]
|
||||
}>()
|
||||
|
||||
const emits = defineEmits<{
|
||||
submit: [event: GenericObject]
|
||||
}>()
|
||||
|
||||
const { dependencies } = toRefs(props)
|
||||
provideDependencies(dependencies)
|
||||
|
||||
const shapes = computed(() => {
|
||||
// @ts-expect-error ignore {} not assignable to object
|
||||
const val: { [key in keyof T]: Shape } = {}
|
||||
const baseSchema = getObjectFormSchema(props.schema)
|
||||
const shape = baseSchema.shape
|
||||
Object.keys(shape).forEach((name) => {
|
||||
const item = shape[name] as ZodAny
|
||||
const baseItem = getBaseSchema(item) as ZodAny
|
||||
let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined
|
||||
if (!Array.isArray(options) && typeof options === 'object')
|
||||
options = Object.values(options)
|
||||
|
||||
val[name as keyof T] = {
|
||||
type: getBaseType(item),
|
||||
default: getDefaultValueInZodStack(item),
|
||||
options,
|
||||
required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),
|
||||
schema: baseItem,
|
||||
}
|
||||
})
|
||||
return val
|
||||
})
|
||||
|
||||
const fields = computed(() => {
|
||||
// @ts-expect-error ignore {} not assignable to object
|
||||
const val: { [key in keyof z.infer<T>]: { shape: Shape, fieldName: string, config: ConfigItem } } = {}
|
||||
for (const key in shapes.value) {
|
||||
const shape = shapes.value[key]
|
||||
val[key as keyof z.infer<T>] = {
|
||||
shape,
|
||||
config: props.fieldConfig?.[key] as ConfigItem,
|
||||
fieldName: key,
|
||||
}
|
||||
}
|
||||
return val
|
||||
})
|
||||
|
||||
const formComponent = computed(() => props.form ? 'form' : Form)
|
||||
const formComponentProps = computed(() => {
|
||||
if (props.form) {
|
||||
return {
|
||||
onSubmit: props.form.handleSubmit(val => emits('submit', val)),
|
||||
}
|
||||
}
|
||||
else {
|
||||
const formSchema = toTypedSchema(props.schema)
|
||||
return {
|
||||
keepValues: true,
|
||||
validationSchema: formSchema,
|
||||
onSubmit: (val: GenericObject) => emits('submit', val),
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component
|
||||
:is="formComponent"
|
||||
v-bind="formComponentProps"
|
||||
>
|
||||
<slot name="customAutoForm" :fields="fields">
|
||||
<template v-for="(shape, key) of shapes" :key="key">
|
||||
<slot
|
||||
:shape="shape"
|
||||
:name="key.toString() as keyof z.infer<T>"
|
||||
:field-name="key.toString()"
|
||||
:config="fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem"
|
||||
>
|
||||
<AutoFormField
|
||||
:config="fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem"
|
||||
:field-name="key.toString()"
|
||||
:shape="shape"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
</slot>
|
||||
|
||||
<slot :shapes="shapes" />
|
||||
</component>
|
||||
</template>
|
||||
45
components/ui/auto-form/AutoFormField.vue
Normal file
45
components/ui/auto-form/AutoFormField.vue
Normal file
@ -0,0 +1,45 @@
|
||||
<script setup lang="ts" generic="U extends ZodAny">
|
||||
import type { ZodAny } from 'zod'
|
||||
import { computed } from 'vue'
|
||||
import type { Config, ConfigItem, Shape } from './interface'
|
||||
import { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from './constant'
|
||||
import useDependencies from './dependencies'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName: string
|
||||
shape: Shape
|
||||
config?: ConfigItem | Config<U>
|
||||
}>()
|
||||
|
||||
function isValidConfig(config: any): config is ConfigItem {
|
||||
return !!config?.component
|
||||
}
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
if (['ZodObject', 'ZodArray'].includes(props.shape?.type))
|
||||
return { schema: props.shape?.schema }
|
||||
return undefined
|
||||
})
|
||||
|
||||
const { isDisabled, isHidden, isRequired, overrideOptions } = useDependencies(props.fieldName)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component
|
||||
:is="isValidConfig(config)
|
||||
? typeof config.component === 'string'
|
||||
? INPUT_COMPONENTS[config.component!]
|
||||
: config.component
|
||||
: INPUT_COMPONENTS[DEFAULT_ZOD_HANDLERS[shape.type]] "
|
||||
v-if="!isHidden"
|
||||
:field-name="fieldName"
|
||||
:label="shape.schema?.description"
|
||||
:required="isRequired || shape.required"
|
||||
:options="overrideOptions || shape.options"
|
||||
:disabled="isDisabled"
|
||||
:config="config"
|
||||
v-bind="delegatedProps"
|
||||
>
|
||||
<slot />
|
||||
</component>
|
||||
</template>
|
||||
110
components/ui/auto-form/AutoFormFieldArray.vue
Normal file
110
components/ui/auto-form/AutoFormFieldArray.vue
Normal file
@ -0,0 +1,110 @@
|
||||
<script setup lang="ts" generic="T extends z.ZodAny">
|
||||
import * as z from 'zod'
|
||||
import { computed, provide } from 'vue'
|
||||
import { PlusIcon, TrashIcon } from 'lucide-vue-next'
|
||||
import { FieldArray, FieldContextKey, useField } from 'vee-validate'
|
||||
import type { Config, ConfigItem } from './interface'
|
||||
import { beautifyObjectName, getBaseType } from './utils'
|
||||
import AutoFormField from './AutoFormField.vue'
|
||||
import AutoFormLabel from './AutoFormLabel.vue'
|
||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { FormItem, FormMessage } from '@/components/ui/form'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName: string
|
||||
required?: boolean
|
||||
config?: Config<T>
|
||||
schema?: z.ZodArray<T>
|
||||
disabled?: boolean
|
||||
}>()
|
||||
|
||||
function isZodArray(
|
||||
item: z.ZodArray<any> | z.ZodDefault<any>,
|
||||
): item is z.ZodArray<any> {
|
||||
return item instanceof z.ZodArray
|
||||
}
|
||||
|
||||
function isZodDefault(
|
||||
item: z.ZodArray<any> | z.ZodDefault<any>,
|
||||
): item is z.ZodDefault<any> {
|
||||
return item instanceof z.ZodDefault
|
||||
}
|
||||
|
||||
const itemShape = computed(() => {
|
||||
if (!props.schema)
|
||||
return
|
||||
|
||||
const schema: z.ZodAny = isZodArray(props.schema)
|
||||
? props.schema._def.type
|
||||
: isZodDefault(props.schema)
|
||||
// @ts-expect-error missing schema
|
||||
? props.schema._def.innerType._def.type
|
||||
: null
|
||||
|
||||
return {
|
||||
type: getBaseType(schema),
|
||||
schema,
|
||||
}
|
||||
})
|
||||
|
||||
const fieldContext = useField(props.fieldName)
|
||||
// @ts-expect-error ignore missing `id`
|
||||
provide(FieldContextKey, fieldContext)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FieldArray v-slot="{ fields, remove, push }" as="section" :name="fieldName">
|
||||
<slot v-bind="props">
|
||||
<Accordion type="multiple" class="w-full" collapsible :disabled="disabled" as-child>
|
||||
<FormItem>
|
||||
<AccordionItem :value="fieldName" class="border-none">
|
||||
<AccordionTrigger>
|
||||
<AutoFormLabel class="text-base" :required="required">
|
||||
{{ schema?.description || beautifyObjectName(fieldName) }}
|
||||
</AutoFormLabel>
|
||||
</AccordionTrigger>
|
||||
|
||||
<AccordionContent>
|
||||
<template v-for="(field, index) of fields" :key="field.key">
|
||||
<div class="mb-4 p-1">
|
||||
<AutoFormField
|
||||
:field-name="`${fieldName}[${index}]`"
|
||||
:label="fieldName"
|
||||
:shape="itemShape!"
|
||||
:config="config as ConfigItem"
|
||||
/>
|
||||
|
||||
<div class="!my-4 flex justify-end">
|
||||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
variant="secondary"
|
||||
@click="remove(index)"
|
||||
>
|
||||
<TrashIcon :size="16" />
|
||||
</Button>
|
||||
</div>
|
||||
<Separator v-if="!field.isLast" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
class="mt-4 flex items-center"
|
||||
@click="push(null)"
|
||||
>
|
||||
<PlusIcon class="mr-2" :size="16" />
|
||||
Add
|
||||
</Button>
|
||||
</AccordionContent>
|
||||
|
||||
<FormMessage />
|
||||
</AccordionItem>
|
||||
</FormItem>
|
||||
</Accordion>
|
||||
</slot>
|
||||
</FieldArray>
|
||||
</template>
|
||||
41
components/ui/auto-form/AutoFormFieldBoolean.vue
Normal file
41
components/ui/auto-form/AutoFormFieldBoolean.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { beautifyObjectName } from './utils'
|
||||
import type { FieldProps } from './interface'
|
||||
import AutoFormLabel from './AutoFormLabel.vue'
|
||||
import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/components/ui/form'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
|
||||
const props = defineProps<FieldProps>()
|
||||
|
||||
const booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormField v-slot="slotProps" :name="fieldName">
|
||||
<FormItem>
|
||||
<div class="space-y-0 mb-3 flex items-center gap-3">
|
||||
<FormControl>
|
||||
<slot v-bind="slotProps">
|
||||
<component
|
||||
:is="booleanComponent"
|
||||
v-bind="{ ...slotProps.componentField }"
|
||||
:disabled="disabled"
|
||||
:checked="slotProps.componentField.modelValue"
|
||||
@update:checked="slotProps.componentField['onUpdate:modelValue']"
|
||||
/>
|
||||
</slot>
|
||||
</FormControl>
|
||||
<AutoFormLabel v-if="!config?.hideLabel" :required="required">
|
||||
{{ config?.label || beautifyObjectName(label ?? fieldName) }}
|
||||
</AutoFormLabel>
|
||||
</div>
|
||||
|
||||
<FormDescription v-if="config?.description">
|
||||
{{ config.description }}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</template>
|
||||
57
components/ui/auto-form/AutoFormFieldDate.vue
Normal file
57
components/ui/auto-form/AutoFormFieldDate.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<script setup lang="ts">
|
||||
import { DateFormatter, getLocalTimeZone } from '@internationalized/date'
|
||||
import { CalendarIcon } from 'lucide-vue-next'
|
||||
import { beautifyObjectName } from './utils'
|
||||
import AutoFormLabel from './AutoFormLabel.vue'
|
||||
import type { FieldProps } from './interface'
|
||||
import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/components/ui/form'
|
||||
|
||||
import { Calendar } from '@/components/ui/calendar'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
|
||||
import { cn } from '@/utils'
|
||||
|
||||
defineProps<FieldProps>()
|
||||
|
||||
const df = new DateFormatter('en-US', {
|
||||
dateStyle: 'long',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormField v-slot="slotProps" :name="fieldName">
|
||||
<FormItem>
|
||||
<AutoFormLabel v-if="!config?.hideLabel" :required="required">
|
||||
{{ config?.label || beautifyObjectName(label ?? fieldName) }}
|
||||
</AutoFormLabel>
|
||||
<FormControl>
|
||||
<slot v-bind="slotProps">
|
||||
<div>
|
||||
<Popover>
|
||||
<PopoverTrigger as-child :disabled="disabled">
|
||||
<Button
|
||||
variant="outline"
|
||||
:class="cn(
|
||||
'w-full justify-start text-left font-normal',
|
||||
!slotProps.componentField.modelValue && 'text-muted-foreground',
|
||||
)"
|
||||
>
|
||||
<CalendarIcon class="mr-2 h-4 w-4" :size="16" />
|
||||
{{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : "Pick a date" }}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="w-auto p-0">
|
||||
<Calendar initial-focus v-bind="slotProps.componentField" />
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</slot>
|
||||
</FormControl>
|
||||
|
||||
<FormDescription v-if="config?.description">
|
||||
{{ config.description }}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</template>
|
||||
49
components/ui/auto-form/AutoFormFieldEnum.vue
Normal file
49
components/ui/auto-form/AutoFormFieldEnum.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
import AutoFormLabel from './AutoFormLabel.vue'
|
||||
import { beautifyObjectName } from './utils'
|
||||
import type { FieldProps } from './interface'
|
||||
import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/components/ui/form'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
|
||||
|
||||
defineProps<FieldProps & {
|
||||
options?: string[]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormField v-slot="slotProps" :name="fieldName">
|
||||
<FormItem>
|
||||
<AutoFormLabel v-if="!config?.hideLabel" :required="required">
|
||||
{{ config?.label || beautifyObjectName(label ?? fieldName) }}
|
||||
</AutoFormLabel>
|
||||
<FormControl>
|
||||
<slot v-bind="slotProps">
|
||||
<RadioGroup v-if="config?.component === 'radio'" :disabled="disabled" :orientation="'vertical'" v-bind="{ ...slotProps.componentField }">
|
||||
<div v-for="(option, index) in options" :key="option" class="mb-2 flex items-center gap-3 space-y-0">
|
||||
<RadioGroupItem :id="`${option}-${index}`" :value="option" />
|
||||
<Label :for="`${option}-${index}`">{{ beautifyObjectName(option) }}</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
|
||||
<Select v-else :disabled="disabled" v-bind="{ ...slotProps.componentField }">
|
||||
<SelectTrigger class="w-full">
|
||||
<SelectValue :placeholder="config?.inputProps?.placeholder" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem v-for="option in options" :key="option" :value="option">
|
||||
{{ beautifyObjectName(option) }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</slot>
|
||||
</FormControl>
|
||||
|
||||
<FormDescription v-if="config?.description">
|
||||
{{ config.description }}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</template>
|
||||
74
components/ui/auto-form/AutoFormFieldFile.vue
Normal file
74
components/ui/auto-form/AutoFormFieldFile.vue
Normal file
@ -0,0 +1,74 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { TrashIcon } from 'lucide-vue-next'
|
||||
import AutoFormLabel from './AutoFormLabel.vue'
|
||||
import { beautifyObjectName } from './utils'
|
||||
import type { FieldProps } from './interface'
|
||||
import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/components/ui/form'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Button } from '@/components/ui/button'
|
||||
|
||||
defineProps<FieldProps>()
|
||||
|
||||
const inputFile = ref<File>()
|
||||
async function parseFileAsString(file: File | undefined): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (file) {
|
||||
const reader = new FileReader()
|
||||
reader.onloadend = () => {
|
||||
resolve(reader.result as string)
|
||||
}
|
||||
reader.onerror = (err) => {
|
||||
reject(err)
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormField v-slot="slotProps" :name="fieldName">
|
||||
<FormItem v-bind="$attrs">
|
||||
<AutoFormLabel v-if="!config?.hideLabel" :required="required">
|
||||
{{ config?.label || beautifyObjectName(label ?? fieldName) }}
|
||||
</AutoFormLabel>
|
||||
<FormControl>
|
||||
<slot v-bind="slotProps">
|
||||
<Input
|
||||
v-if="!inputFile"
|
||||
type="file"
|
||||
v-bind="{ ...config?.inputProps }"
|
||||
:disabled="disabled"
|
||||
@change="async (ev: InputEvent) => {
|
||||
const file = (ev.target as HTMLInputElement).files?.[0]
|
||||
inputFile = file
|
||||
const parsed = await parseFileAsString(file)
|
||||
slotProps.componentField.onInput(parsed)
|
||||
}"
|
||||
/>
|
||||
<div v-else class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent pl-3 pr-1 py-1 text-sm shadow-sm transition-colors">
|
||||
<p>{{ inputFile?.name }}</p>
|
||||
<Button
|
||||
:size="'icon'"
|
||||
:variant="'ghost'"
|
||||
class="h-[26px] w-[26px]"
|
||||
aria-label="Remove file"
|
||||
type="button"
|
||||
@click="() => {
|
||||
inputFile = undefined
|
||||
slotProps.componentField.onInput(undefined)
|
||||
}"
|
||||
>
|
||||
<TrashIcon :size="16" />
|
||||
</Button>
|
||||
</div>
|
||||
</slot>
|
||||
</FormControl>
|
||||
<FormDescription v-if="config?.description">
|
||||
{{ config.description }}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</template>
|
||||
36
components/ui/auto-form/AutoFormFieldInput.vue
Normal file
36
components/ui/auto-form/AutoFormFieldInput.vue
Normal file
@ -0,0 +1,36 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import AutoFormLabel from './AutoFormLabel.vue'
|
||||
import { beautifyObjectName } from './utils'
|
||||
import type { FieldProps } from './interface'
|
||||
import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/components/ui/form'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
|
||||
const props = defineProps<FieldProps>()
|
||||
const inputComponent = computed(() => props.config?.component === 'textarea' ? Textarea : Input)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormField v-slot="slotProps" :name="fieldName">
|
||||
<FormItem v-bind="$attrs">
|
||||
<AutoFormLabel v-if="!config?.hideLabel" :required="required">
|
||||
{{ config?.label || beautifyObjectName(label ?? fieldName) }}
|
||||
</AutoFormLabel>
|
||||
<FormControl>
|
||||
<slot v-bind="slotProps">
|
||||
<component
|
||||
:is="inputComponent"
|
||||
type="text"
|
||||
v-bind="{ ...slotProps.componentField, ...config?.inputProps }"
|
||||
:disabled="disabled"
|
||||
/>
|
||||
</slot>
|
||||
</FormControl>
|
||||
<FormDescription v-if="config?.description">
|
||||
{{ config.description }}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</template>
|
||||
32
components/ui/auto-form/AutoFormFieldNumber.vue
Normal file
32
components/ui/auto-form/AutoFormFieldNumber.vue
Normal file
@ -0,0 +1,32 @@
|
||||
<script setup lang="ts">
|
||||
import AutoFormLabel from './AutoFormLabel.vue'
|
||||
import { beautifyObjectName } from './utils'
|
||||
import type { FieldProps } from './interface'
|
||||
import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/components/ui/form'
|
||||
import { Input } from '@/components/ui/input'
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
defineProps<FieldProps>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormField v-slot="slotProps" :name="fieldName">
|
||||
<FormItem>
|
||||
<AutoFormLabel v-if="!config?.hideLabel" :required="required">
|
||||
{{ config?.label || beautifyObjectName(label ?? fieldName) }}
|
||||
</AutoFormLabel>
|
||||
<FormControl>
|
||||
<slot v-bind="slotProps">
|
||||
<Input type="number" v-bind="{ ...slotProps.componentField, ...config?.inputProps }" :disabled="disabled" />
|
||||
</slot>
|
||||
</FormControl>
|
||||
<FormDescription v-if="config?.description">
|
||||
{{ config.description }}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</template>
|
||||
78
components/ui/auto-form/AutoFormFieldObject.vue
Normal file
78
components/ui/auto-form/AutoFormFieldObject.vue
Normal file
@ -0,0 +1,78 @@
|
||||
<script setup lang="ts" generic="T extends ZodRawShape">
|
||||
import type { ZodAny, ZodObject, ZodRawShape } from 'zod'
|
||||
import { computed, provide } from 'vue'
|
||||
import { FieldContextKey, useField } from 'vee-validate'
|
||||
import AutoFormField from './AutoFormField.vue'
|
||||
import type { Config, ConfigItem, Shape } from './interface'
|
||||
import { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'
|
||||
import AutoFormLabel from './AutoFormLabel.vue'
|
||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
|
||||
import { FormItem } from '@/components/ui/form'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName: string
|
||||
required?: boolean
|
||||
config?: Config<T>
|
||||
schema?: ZodObject<T>
|
||||
disabled?: boolean
|
||||
}>()
|
||||
|
||||
const shapes = computed(() => {
|
||||
// @ts-expect-error ignore {} not assignable to object
|
||||
const val: { [key in keyof T]: Shape } = {}
|
||||
|
||||
if (!props.schema)
|
||||
return
|
||||
const shape = getBaseSchema(props.schema)?.shape
|
||||
if (!shape)
|
||||
return
|
||||
Object.keys(shape).forEach((name) => {
|
||||
const item = shape[name] as ZodAny
|
||||
const baseItem = getBaseSchema(item) as ZodAny
|
||||
let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined
|
||||
if (!Array.isArray(options) && typeof options === 'object')
|
||||
options = Object.values(options)
|
||||
|
||||
val[name as keyof T] = {
|
||||
type: getBaseType(item),
|
||||
default: getDefaultValueInZodStack(item),
|
||||
options,
|
||||
required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),
|
||||
schema: item,
|
||||
}
|
||||
})
|
||||
return val
|
||||
})
|
||||
|
||||
const fieldContext = useField(props.fieldName)
|
||||
// @ts-expect-error ignore missing `id`
|
||||
provide(FieldContextKey, fieldContext)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<slot v-bind="props">
|
||||
<Accordion type="single" as-child class="w-full" collapsible :disabled="disabled">
|
||||
<FormItem>
|
||||
<AccordionItem :value="fieldName" class="border-none">
|
||||
<AccordionTrigger>
|
||||
<AutoFormLabel class="text-base" :required="required">
|
||||
{{ schema?.description || beautifyObjectName(fieldName) }}
|
||||
</AutoFormLabel>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="p-1 space-y-5">
|
||||
<template v-for="(shape, key) in shapes" :key="key">
|
||||
<AutoFormField
|
||||
:config="config?.[key as keyof typeof config] as ConfigItem"
|
||||
:field-name="`${fieldName}.${key.toString()}`"
|
||||
:label="key.toString()"
|
||||
:shape="shape"
|
||||
/>
|
||||
</template>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</FormItem>
|
||||
</Accordion>
|
||||
</slot>
|
||||
</section>
|
||||
</template>
|
||||
14
components/ui/auto-form/AutoFormLabel.vue
Normal file
14
components/ui/auto-form/AutoFormLabel.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import { FormLabel } from '@/components/ui/form'
|
||||
|
||||
defineProps<{
|
||||
required?: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormLabel>
|
||||
<slot />
|
||||
<span v-if="required" class="text-destructive"> *</span>
|
||||
</FormLabel>
|
||||
</template>
|
||||
39
components/ui/auto-form/constant.ts
Normal file
39
components/ui/auto-form/constant.ts
Normal file
@ -0,0 +1,39 @@
|
||||
import AutoFormFieldArray from './AutoFormFieldArray.vue'
|
||||
import AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'
|
||||
import AutoFormFieldDate from './AutoFormFieldDate.vue'
|
||||
import AutoFormFieldEnum from './AutoFormFieldEnum.vue'
|
||||
import AutoFormFieldFile from './AutoFormFieldFile.vue'
|
||||
import AutoFormFieldInput from './AutoFormFieldInput.vue'
|
||||
import AutoFormFieldNumber from './AutoFormFieldNumber.vue'
|
||||
import AutoFormFieldObject from './AutoFormFieldObject.vue'
|
||||
|
||||
export const INPUT_COMPONENTS = {
|
||||
date: AutoFormFieldDate,
|
||||
select: AutoFormFieldEnum,
|
||||
radio: AutoFormFieldEnum,
|
||||
checkbox: AutoFormFieldBoolean,
|
||||
switch: AutoFormFieldBoolean,
|
||||
textarea: AutoFormFieldInput,
|
||||
number: AutoFormFieldNumber,
|
||||
string: AutoFormFieldInput,
|
||||
file: AutoFormFieldFile,
|
||||
array: AutoFormFieldArray,
|
||||
object: AutoFormFieldObject,
|
||||
}
|
||||
|
||||
/**
|
||||
* Define handlers for specific Zod types.
|
||||
* You can expand this object to support more types.
|
||||
*/
|
||||
export const DEFAULT_ZOD_HANDLERS: {
|
||||
[key: string]: keyof typeof INPUT_COMPONENTS
|
||||
} = {
|
||||
ZodString: 'string',
|
||||
ZodBoolean: 'checkbox',
|
||||
ZodDate: 'date',
|
||||
ZodEnum: 'select',
|
||||
ZodNativeEnum: 'select',
|
||||
ZodNumber: 'number',
|
||||
ZodArray: 'array',
|
||||
ZodObject: 'object',
|
||||
}
|
||||
92
components/ui/auto-form/dependencies.ts
Normal file
92
components/ui/auto-form/dependencies.ts
Normal file
@ -0,0 +1,92 @@
|
||||
import type * as z from 'zod'
|
||||
import type { Ref } from 'vue'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useFieldValue, useFormValues } from 'vee-validate'
|
||||
import { createContext } from 'radix-vue'
|
||||
import { type Dependency, DependencyType, type EnumValues } from './interface'
|
||||
import { getFromPath, getIndexIfArray } from './utils'
|
||||
|
||||
export const [injectDependencies, provideDependencies] = createContext<Ref<Dependency<z.infer<z.ZodObject<any>>>[] | undefined>>('AutoFormDependencies')
|
||||
|
||||
export default function useDependencies(
|
||||
fieldName: string,
|
||||
) {
|
||||
const form = useFormValues()
|
||||
// parsed test[0].age => test.age
|
||||
const currentFieldName = fieldName.replace(/\[\d+\]/g, '')
|
||||
const currentFieldValue = useFieldValue<any>(fieldName)
|
||||
|
||||
if (!form)
|
||||
throw new Error('useDependencies should be used within <AutoForm>')
|
||||
|
||||
const dependencies = injectDependencies()
|
||||
const isDisabled = ref(false)
|
||||
const isHidden = ref(false)
|
||||
const isRequired = ref(false)
|
||||
const overrideOptions = ref<EnumValues | undefined>()
|
||||
|
||||
const currentFieldDependencies = computed(() => dependencies.value?.filter(
|
||||
dependency => dependency.targetField === currentFieldName,
|
||||
))
|
||||
|
||||
function getSourceValue(dep: Dependency<any>) {
|
||||
const source = dep.sourceField as string
|
||||
const index = getIndexIfArray(fieldName) ?? -1
|
||||
const [sourceLast, ...sourceInitial] = source.split('.').toReversed()
|
||||
const [_targetLast, ...targetInitial] = (dep.targetField as string).split('.').toReversed()
|
||||
|
||||
if (index >= 0 && sourceInitial.join(',') === targetInitial.join(',')) {
|
||||
const [_currentLast, ...currentInitial] = fieldName.split('.').toReversed()
|
||||
return getFromPath(form.value, currentInitial.join('.') + sourceLast)
|
||||
}
|
||||
|
||||
return getFromPath(form.value, source)
|
||||
}
|
||||
|
||||
const sourceFieldValues = computed(() => currentFieldDependencies.value?.map(dep => getSourceValue(dep)))
|
||||
|
||||
const resetConditionState = () => {
|
||||
isDisabled.value = false
|
||||
isHidden.value = false
|
||||
isRequired.value = false
|
||||
overrideOptions.value = undefined
|
||||
}
|
||||
|
||||
watch([sourceFieldValues, dependencies], () => {
|
||||
resetConditionState()
|
||||
currentFieldDependencies.value?.forEach((dep) => {
|
||||
const sourceValue = getSourceValue(dep)
|
||||
const conditionMet = dep.when(sourceValue, currentFieldValue.value)
|
||||
|
||||
switch (dep.type) {
|
||||
case DependencyType.DISABLES:
|
||||
if (conditionMet)
|
||||
isDisabled.value = true
|
||||
|
||||
break
|
||||
case DependencyType.REQUIRES:
|
||||
if (conditionMet)
|
||||
isRequired.value = true
|
||||
|
||||
break
|
||||
case DependencyType.HIDES:
|
||||
if (conditionMet)
|
||||
isHidden.value = true
|
||||
|
||||
break
|
||||
case DependencyType.SETS_OPTIONS:
|
||||
if (conditionMet)
|
||||
overrideOptions.value = dep.options
|
||||
|
||||
break
|
||||
}
|
||||
})
|
||||
}, { immediate: true, deep: true })
|
||||
|
||||
return {
|
||||
isDisabled,
|
||||
isHidden,
|
||||
isRequired,
|
||||
overrideOptions,
|
||||
}
|
||||
}
|
||||
15
components/ui/auto-form/index.ts
Normal file
15
components/ui/auto-form/index.ts
Normal file
@ -0,0 +1,15 @@
|
||||
export { getObjectFormSchema, getBaseSchema, getBaseType } from './utils'
|
||||
export type { Config, ConfigItem, FieldProps } from './interface'
|
||||
|
||||
export { default as AutoForm } from './AutoForm.vue'
|
||||
export { default as AutoFormField } from './AutoFormField.vue'
|
||||
export { default as AutoFormLabel } from './AutoFormLabel.vue'
|
||||
|
||||
export { default as AutoFormFieldArray } from './AutoFormFieldArray.vue'
|
||||
export { default as AutoFormFieldBoolean } from './AutoFormFieldBoolean.vue'
|
||||
export { default as AutoFormFieldDate } from './AutoFormFieldDate.vue'
|
||||
export { default as AutoFormFieldEnum } from './AutoFormFieldEnum.vue'
|
||||
export { default as AutoFormFieldFile } from './AutoFormFieldFile.vue'
|
||||
export { default as AutoFormFieldInput } from './AutoFormFieldInput.vue'
|
||||
export { default as AutoFormFieldNumber } from './AutoFormFieldNumber.vue'
|
||||
export { default as AutoFormFieldObject } from './AutoFormFieldObject.vue'
|
||||
81
components/ui/auto-form/interface.ts
Normal file
81
components/ui/auto-form/interface.ts
Normal file
@ -0,0 +1,81 @@
|
||||
import type { Component, InputHTMLAttributes } from 'vue'
|
||||
import type { ZodAny, z } from 'zod'
|
||||
import type { INPUT_COMPONENTS } from './constant'
|
||||
|
||||
export interface FieldProps {
|
||||
fieldName: string
|
||||
label?: string
|
||||
required?: boolean
|
||||
config?: ConfigItem
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
export interface Shape {
|
||||
type: string
|
||||
default?: any
|
||||
required?: boolean
|
||||
options?: string[]
|
||||
schema?: ZodAny
|
||||
}
|
||||
|
||||
export interface ConfigItem {
|
||||
/** Value for the `FormLabel` */
|
||||
label?: string
|
||||
/** Value for the `FormDescription` */
|
||||
description?: string
|
||||
/** Pick which component to be rendered. */
|
||||
component?: keyof typeof INPUT_COMPONENTS | Component
|
||||
/** Hide `FormLabel`. */
|
||||
hideLabel?: boolean
|
||||
inputProps?: InputHTMLAttributes
|
||||
}
|
||||
|
||||
// Define a type to unwrap an array
|
||||
type UnwrapArray<T> = T extends (infer U)[] ? U : never
|
||||
|
||||
export type Config<SchemaType extends object> = {
|
||||
// If SchemaType.key is an object, create a nested Config, otherwise ConfigItem
|
||||
[Key in keyof SchemaType]?:
|
||||
SchemaType[Key] extends any[]
|
||||
? UnwrapArray<Config<SchemaType[Key]>>
|
||||
: SchemaType[Key] extends object
|
||||
? Config<SchemaType[Key]>
|
||||
: ConfigItem;
|
||||
}
|
||||
|
||||
export enum DependencyType {
|
||||
DISABLES,
|
||||
REQUIRES,
|
||||
HIDES,
|
||||
SETS_OPTIONS,
|
||||
}
|
||||
|
||||
interface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {
|
||||
sourceField: keyof SchemaType
|
||||
type: DependencyType
|
||||
targetField: keyof SchemaType
|
||||
when: (sourceFieldValue: any, targetFieldValue: any) => boolean
|
||||
}
|
||||
|
||||
export type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =
|
||||
BaseDependency<SchemaType> & {
|
||||
type:
|
||||
| DependencyType.DISABLES
|
||||
| DependencyType.REQUIRES
|
||||
| DependencyType.HIDES
|
||||
}
|
||||
|
||||
export type EnumValues = readonly [string, ...string[]]
|
||||
|
||||
export type OptionsDependency<
|
||||
SchemaType extends z.infer<z.ZodObject<any, any>>,
|
||||
> = BaseDependency<SchemaType> & {
|
||||
type: DependencyType.SETS_OPTIONS
|
||||
|
||||
// Partial array of values from sourceField that will trigger the dependency
|
||||
options: EnumValues
|
||||
}
|
||||
|
||||
export type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =
|
||||
| ValueDependency<SchemaType>
|
||||
| OptionsDependency<SchemaType>
|
||||
171
components/ui/auto-form/utils.ts
Normal file
171
components/ui/auto-form/utils.ts
Normal file
@ -0,0 +1,171 @@
|
||||
import type { z } from 'zod'
|
||||
|
||||
// TODO: This should support recursive ZodEffects but TypeScript doesn't allow circular type definitions.
|
||||
export type ZodObjectOrWrapped =
|
||||
| z.ZodObject<any, any>
|
||||
| z.ZodEffects<z.ZodObject<any, any>>
|
||||
|
||||
/**
|
||||
* Beautify a camelCase string.
|
||||
* e.g. "myString" -> "My String"
|
||||
*/
|
||||
export function beautifyObjectName(string: string) {
|
||||
// Remove bracketed indices
|
||||
// if numbers only return the string
|
||||
let output = string.replace(/\[\d+\]/g, '').replace(/([A-Z])/g, ' $1')
|
||||
output = output.charAt(0).toUpperCase() + output.slice(1)
|
||||
return output
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse string and extract the index
|
||||
* @param string
|
||||
* @returns index or undefined
|
||||
*/
|
||||
export function getIndexIfArray(string: string) {
|
||||
const indexRegex = /\[(\d+)\]/
|
||||
// Match the index
|
||||
const match = string.match(indexRegex)
|
||||
// Extract the index (number)
|
||||
const index = match ? Number.parseInt(match[1]) : undefined
|
||||
return index
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the lowest level Zod type.
|
||||
* This will unpack optionals, refinements, etc.
|
||||
*/
|
||||
export function getBaseSchema<
|
||||
ChildType extends z.ZodAny | z.AnyZodObject = z.ZodAny,
|
||||
>(schema: ChildType | z.ZodEffects<ChildType>): ChildType | null {
|
||||
if (!schema)
|
||||
return null
|
||||
if ('innerType' in schema._def)
|
||||
return getBaseSchema(schema._def.innerType as ChildType)
|
||||
|
||||
if ('schema' in schema._def)
|
||||
return getBaseSchema(schema._def.schema as ChildType)
|
||||
|
||||
return schema as ChildType
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the type name of the lowest level Zod type.
|
||||
* This will unpack optionals, refinements, etc.
|
||||
*/
|
||||
export function getBaseType(schema: z.ZodAny) {
|
||||
const baseSchema = getBaseSchema(schema)
|
||||
return baseSchema ? baseSchema._def.typeName : ''
|
||||
}
|
||||
|
||||
/**
|
||||
* Search for a "ZodDefault" in the Zod stack and return its value.
|
||||
*/
|
||||
export function getDefaultValueInZodStack(schema: z.ZodAny): any {
|
||||
const typedSchema = schema as unknown as z.ZodDefault<
|
||||
z.ZodNumber | z.ZodString
|
||||
>
|
||||
|
||||
if (typedSchema._def.typeName === 'ZodDefault')
|
||||
return typedSchema._def.defaultValue()
|
||||
|
||||
if ('innerType' in typedSchema._def) {
|
||||
return getDefaultValueInZodStack(
|
||||
typedSchema._def.innerType as unknown as z.ZodAny,
|
||||
)
|
||||
}
|
||||
if ('schema' in typedSchema._def) {
|
||||
return getDefaultValueInZodStack(
|
||||
(typedSchema._def as any).schema as z.ZodAny,
|
||||
)
|
||||
}
|
||||
|
||||
return undefined
|
||||
}
|
||||
|
||||
export function getObjectFormSchema(
|
||||
schema: ZodObjectOrWrapped,
|
||||
): z.ZodObject<any, any> {
|
||||
if (schema?._def.typeName === 'ZodEffects') {
|
||||
const typedSchema = schema as z.ZodEffects<z.ZodObject<any, any>>
|
||||
return getObjectFormSchema(typedSchema._def.schema)
|
||||
}
|
||||
return schema as z.ZodObject<any, any>
|
||||
}
|
||||
|
||||
function isIndex(value: unknown): value is number {
|
||||
return Number(value) >= 0
|
||||
}
|
||||
/**
|
||||
* Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax
|
||||
*/
|
||||
export function normalizeFormPath(path: string): string {
|
||||
const pathArr = path.split('.')
|
||||
if (!pathArr.length)
|
||||
return ''
|
||||
|
||||
let fullPath = String(pathArr[0])
|
||||
for (let i = 1; i < pathArr.length; i++) {
|
||||
if (isIndex(pathArr[i])) {
|
||||
fullPath += `[${pathArr[i]}]`
|
||||
continue
|
||||
}
|
||||
|
||||
fullPath += `.${pathArr[i]}`
|
||||
}
|
||||
|
||||
return fullPath
|
||||
}
|
||||
|
||||
type NestedRecord = Record<string, unknown> | { [k: string]: NestedRecord }
|
||||
/**
|
||||
* Checks if the path opted out of nested fields using `[fieldName]` syntax
|
||||
*/
|
||||
export function isNotNestedPath(path: string) {
|
||||
return /^\[.+\]$/i.test(path)
|
||||
}
|
||||
function isObject(obj: unknown): obj is Record<string, unknown> {
|
||||
return obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)
|
||||
}
|
||||
function isContainerValue(value: unknown): value is Record<string, unknown> {
|
||||
return isObject(value) || Array.isArray(value)
|
||||
}
|
||||
function cleanupNonNestedPath(path: string) {
|
||||
if (isNotNestedPath(path))
|
||||
return path.replace(/\[|\]/gi, '')
|
||||
|
||||
return path
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets a nested property value from an object
|
||||
*/
|
||||
export function getFromPath<TValue = unknown>(object: NestedRecord | undefined, path: string): TValue | undefined
|
||||
export function getFromPath<TValue = unknown, TFallback = TValue>(
|
||||
object: NestedRecord | undefined,
|
||||
path: string,
|
||||
fallback?: TFallback,
|
||||
): TValue | TFallback
|
||||
export function getFromPath<TValue = unknown, TFallback = TValue>(
|
||||
object: NestedRecord | undefined,
|
||||
path: string,
|
||||
fallback?: TFallback,
|
||||
): TValue | TFallback | undefined {
|
||||
if (!object)
|
||||
return fallback
|
||||
|
||||
if (isNotNestedPath(path))
|
||||
return object[cleanupNonNestedPath(path)] as TValue | undefined
|
||||
|
||||
const resolvedValue = (path || '')
|
||||
.split(/\.|\[(\d+)\]/)
|
||||
.filter(Boolean)
|
||||
.reduce((acc, propKey) => {
|
||||
if (isContainerValue(acc) && propKey in acc)
|
||||
return acc[propKey]
|
||||
|
||||
return fallback
|
||||
}, object as unknown)
|
||||
|
||||
return resolvedValue as TValue | undefined
|
||||
}
|
||||
21
components/ui/avatar/Avatar.vue
Normal file
21
components/ui/avatar/Avatar.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { AvatarRoot } from 'radix-vue'
|
||||
import { type AvatarVariants, avatarVariant } from '.'
|
||||
import { cn } from '@/utils'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
class?: HTMLAttributes['class']
|
||||
size?: AvatarVariants['size']
|
||||
shape?: AvatarVariants['shape']
|
||||
}>(), {
|
||||
size: 'sm',
|
||||
shape: 'circle',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
|
||||
<slot />
|
||||
</AvatarRoot>
|
||||
</template>
|
||||
11
components/ui/avatar/AvatarFallback.vue
Normal file
11
components/ui/avatar/AvatarFallback.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue'
|
||||
|
||||
const props = defineProps<AvatarFallbackProps>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AvatarFallback v-bind="props">
|
||||
<slot />
|
||||
</AvatarFallback>
|
||||
</template>
|
||||
9
components/ui/avatar/AvatarImage.vue
Normal file
9
components/ui/avatar/AvatarImage.vue
Normal file
@ -0,0 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import { AvatarImage, type AvatarImageProps } from 'radix-vue'
|
||||
|
||||
const props = defineProps<AvatarImageProps>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AvatarImage v-bind="props" class="h-full w-full object-cover" />
|
||||
</template>
|
||||
24
components/ui/avatar/index.ts
Normal file
24
components/ui/avatar/index.ts
Normal file
@ -0,0 +1,24 @@
|
||||
import { type VariantProps, cva } from 'class-variance-authority'
|
||||
|
||||
export { default as Avatar } from './Avatar.vue'
|
||||
export { default as AvatarImage } from './AvatarImage.vue'
|
||||
export { default as AvatarFallback } from './AvatarFallback.vue'
|
||||
|
||||
export const avatarVariant = cva(
|
||||
'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
|
||||
{
|
||||
variants: {
|
||||
size: {
|
||||
sm: 'h-10 w-10 text-xs',
|
||||
base: 'h-16 w-16 text-2xl',
|
||||
lg: 'h-32 w-32 text-5xl',
|
||||
},
|
||||
shape: {
|
||||
circle: 'rounded-full',
|
||||
square: 'rounded-md',
|
||||
},
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
export type AvatarVariants = VariantProps<typeof avatarVariant>
|
||||
13
components/ui/breadcrumb/Breadcrumb.vue
Normal file
13
components/ui/breadcrumb/Breadcrumb.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<script lang="ts" setup>
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes['class']
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav aria-label="breadcrumb" :class="props.class">
|
||||
<slot />
|
||||
</nav>
|
||||
</template>
|
||||
22
components/ui/breadcrumb/BreadcrumbEllipsis.vue
Normal file
22
components/ui/breadcrumb/BreadcrumbEllipsis.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<script lang="ts" setup>
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { MoreHorizontal } from 'lucide-vue-next'
|
||||
import { cn } from '@/utils'
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes['class']
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
:class="cn('flex h-9 w-9 items-center justify-center', props.class)"
|
||||
>
|
||||
<slot>
|
||||
<MoreHorizontal class="h-4 w-4" />
|
||||
</slot>
|
||||
<span class="sr-only">More</span>
|
||||
</span>
|
||||
</template>
|
||||
16
components/ui/breadcrumb/BreadcrumbItem.vue
Normal file
16
components/ui/breadcrumb/BreadcrumbItem.vue
Normal file
@ -0,0 +1,16 @@
|
||||
<script lang="ts" setup>
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { cn } from '@/utils'
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes['class']
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li
|
||||
:class="cn('inline-flex items-center gap-1.5', props.class)"
|
||||
>
|
||||
<slot />
|
||||
</li>
|
||||
</template>
|
||||
19
components/ui/breadcrumb/BreadcrumbLink.vue
Normal file
19
components/ui/breadcrumb/BreadcrumbLink.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<script lang="ts" setup>
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { Primitive, type PrimitiveProps } from 'radix-vue'
|
||||
import { cn } from '@/utils'
|
||||
|
||||
const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
|
||||
as: 'a',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Primitive
|
||||
:as="as"
|
||||
:as-child="asChild"
|
||||
:class="cn('transition-colors hover:text-foreground', props.class)"
|
||||
>
|
||||
<slot />
|
||||
</Primitive>
|
||||
</template>
|
||||
16
components/ui/breadcrumb/BreadcrumbList.vue
Normal file
16
components/ui/breadcrumb/BreadcrumbList.vue
Normal file
@ -0,0 +1,16 @@
|
||||
<script lang="ts" setup>
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { cn } from '@/utils'
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes['class']
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ol
|
||||
:class="cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)"
|
||||
>
|
||||
<slot />
|
||||
</ol>
|
||||
</template>
|
||||
19
components/ui/breadcrumb/BreadcrumbPage.vue
Normal file
19
components/ui/breadcrumb/BreadcrumbPage.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<script lang="ts" setup>
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { cn } from '@/utils'
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes['class']
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span
|
||||
role="link"
|
||||
aria-disabled="true"
|
||||
aria-current="page"
|
||||
:class="cn('font-normal text-foreground', props.class)"
|
||||
>
|
||||
<slot />
|
||||
</span>
|
||||
</template>
|
||||
21
components/ui/breadcrumb/BreadcrumbSeparator.vue
Normal file
21
components/ui/breadcrumb/BreadcrumbSeparator.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<script lang="ts" setup>
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { ChevronRight } from 'lucide-vue-next'
|
||||
import { cn } from '@/utils'
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes['class']
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
:class="cn('[&>svg]:size-3.5', props.class)"
|
||||
>
|
||||
<slot>
|
||||
<ChevronRight />
|
||||
</slot>
|
||||
</li>
|
||||
</template>
|
||||
7
components/ui/breadcrumb/index.ts
Normal file
7
components/ui/breadcrumb/index.ts
Normal file
@ -0,0 +1,7 @@
|
||||
export { default as Breadcrumb } from './Breadcrumb.vue'
|
||||
export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'
|
||||
export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
|
||||
export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
|
||||
export { default as BreadcrumbList } from './BreadcrumbList.vue'
|
||||
export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
|
||||
export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'
|
||||
26
components/ui/button/Button.vue
Normal file
26
components/ui/button/Button.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { Primitive, type PrimitiveProps } from 'radix-vue'
|
||||
import { type ButtonVariants, buttonVariants } from '.'
|
||||
import { cn } from '@/utils'
|
||||
|
||||
interface Props extends PrimitiveProps {
|
||||
variant?: ButtonVariants['variant']
|
||||
size?: ButtonVariants['size']
|
||||
class?: HTMLAttributes['class']
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
as: 'button',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Primitive
|
||||
:as="as"
|
||||
:as-child="asChild"
|
||||
:class="cn(buttonVariants({ variant, size }), props.class)"
|
||||
>
|
||||
<slot />
|
||||
</Primitive>
|
||||
</template>
|
||||
35
components/ui/button/index.ts
Normal file
35
components/ui/button/index.ts
Normal file
@ -0,0 +1,35 @@
|
||||
import { type VariantProps, cva } from 'class-variance-authority'
|
||||
|
||||
export { default as Button } from './Button.vue'
|
||||
|
||||
export const buttonVariants = cva(
|
||||
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
|
||||
destructive:
|
||||
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
|
||||
outline:
|
||||
'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
|
||||
secondary:
|
||||
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
||||
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
||||
link: 'text-primary underline-offset-4 hover:underline',
|
||||
},
|
||||
size: {
|
||||
default: 'h-10 px-4 py-2',
|
||||
xs: 'h-7 rounded px-2',
|
||||
sm: 'h-9 rounded-md px-3',
|
||||
lg: 'h-11 rounded-md px-8',
|
||||
icon: 'h-10 w-10',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'default',
|
||||
size: 'default',
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
export type ButtonVariants = VariantProps<typeof buttonVariants>
|
||||
60
components/ui/calendar/Calendar.vue
Normal file
60
components/ui/calendar/Calendar.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<script lang="ts" setup>
|
||||
import { type HTMLAttributes, computed } from 'vue'
|
||||
import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'radix-vue'
|
||||
import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'
|
||||
import { cn } from '@/utils'
|
||||
|
||||
const props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()
|
||||
|
||||
const emits = defineEmits<CalendarRootEmits>()
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, ...delegated } = props
|
||||
|
||||
return delegated
|
||||
})
|
||||
|
||||
const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CalendarRoot
|
||||
v-slot="{ grid, weekDays }"
|
||||
:class="cn('p-3', props.class)"
|
||||
v-bind="forwarded"
|
||||
>
|
||||
<CalendarHeader>
|
||||
<CalendarPrevButton />
|
||||
<CalendarHeading />
|
||||
<CalendarNextButton />
|
||||
</CalendarHeader>
|
||||
|
||||
<div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
|
||||
<CalendarGrid v-for="month in grid" :key="month.value.toString()">
|
||||
<CalendarGridHead>
|
||||
<CalendarGridRow>
|
||||
<CalendarHeadCell
|
||||
v-for="day in weekDays" :key="day"
|
||||
>
|
||||
{{ day }}
|
||||
</CalendarHeadCell>
|
||||
</CalendarGridRow>
|
||||
</CalendarGridHead>
|
||||
<CalendarGridBody>
|
||||
<CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
|
||||
<CalendarCell
|
||||
v-for="weekDate in weekDates"
|
||||
:key="weekDate.toString()"
|
||||
:date="weekDate"
|
||||
>
|
||||
<CalendarCellTrigger
|
||||
:day="weekDate"
|
||||
:month="month.value"
|
||||
/>
|
||||
</CalendarCell>
|
||||
</CalendarGridRow>
|
||||
</CalendarGridBody>
|
||||
</CalendarGrid>
|
||||
</div>
|
||||
</CalendarRoot>
|
||||
</template>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user