feat: init

.editorconfig

@@ -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

.env.example

@@ -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......"

.gitignore

@@ -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

.node-version

@@ -0,0 +1 @@
+v20

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "vue.volar"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  // Enable ESlint flat config support
+  "eslint.experimental.useFlatConfig": true
+}

LICENSE

@@ -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/>.

README.md

@@ -0,0 +1,78 @@
+# ⚡ Sink
+
+**A Simple / Speedy / Secrue Link Shortener with Analytics, 100% run on Cloudflare.**
+
+![Hero](./public/image.png)
+
+----
+
+## ✨ 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).

app.config.ts

@@ -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',
+  ],
+})

app.vue

@@ -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>

assets/css/tailwind.css

@@ -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;
+  }
+}

components.json

@@ -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"
+  }
+}

components/dashboard/Breadcrumb.vue

@@ -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>

components/dashboard/Counters.vue

@@ -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>

components/dashboard/DatePicker.vue

@@ -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>

components/dashboard/Index.vue

@@ -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>

components/dashboard/Logout.vue

@@ -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>

components/dashboard/Nav.vue

@@ -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>

components/dashboard/Views.vue

@@ -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>

components/dashboard/links/Delete.vue

@@ -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>

components/dashboard/links/Editor.vue

@@ -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>

components/dashboard/links/Index.vue

@@ -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>

components/dashboard/links/Link.vue

@@ -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>

components/dashboard/links/QRCode.vue

@@ -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>

components/dashboard/metrics/Group.vue

@@ -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>

components/dashboard/metrics/Index.vue

@@ -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>

components/dashboard/metrics/List.vue

@@ -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>

components/dashboard/metrics/Locations.vue

@@ -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>

components/dashboard/metrics/Metric.vue

@@ -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>

components/dashboard/metrics/name/Icon.vue

@@ -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>

components/dashboard/metrics/name/Index.vue

@@ -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>

components/dashboard/metrics/name/Referer.vue

@@ -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>

components/dashboard/metrics/name/Slug.vue

@@ -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>

components/home/Cta.vue

@@ -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>

components/home/Features.vue

@@ -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>

components/home/Hero.vue

@@ -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>

components/home/Link.vue

@@ -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>

components/home/Logos.vue

@@ -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>

components/home/Twitter.vue

@@ -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>

components/layouts/Footer.vue

@@ -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"
+      >
+        &copy; {{ 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>

components/layouts/Header.vue

@@ -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>

components/login/index.vue

@@ -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>

components/ui/accordion/Accordion.vue

@@ -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>

components/ui/accordion/AccordionContent.vue

@@ -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>

components/ui/accordion/AccordionItem.vue

@@ -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>

components/ui/accordion/AccordionTrigger.vue

@@ -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>

components/ui/accordion/index.ts

@@ -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'

components/ui/alert-dialog/AlertDialog.vue

@@ -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>

components/ui/alert-dialog/AlertDialogAction.vue

@@ -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>

components/ui/alert-dialog/AlertDialogCancel.vue

@@ -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>

components/ui/alert-dialog/AlertDialogContent.vue

@@ -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>

components/ui/alert-dialog/AlertDialogDescription.vue

@@ -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>

components/ui/alert-dialog/AlertDialogFooter.vue

@@ -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>

components/ui/alert-dialog/AlertDialogHeader.vue

@@ -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>

components/ui/alert-dialog/AlertDialogTitle.vue

@@ -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>

components/ui/alert-dialog/AlertDialogTrigger.vue

@@ -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>

components/ui/alert-dialog/index.ts

@@ -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'

components/ui/alert/Alert.vue

@@ -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>

components/ui/alert/AlertDescription.vue

@@ -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>

components/ui/alert/AlertTitle.vue

@@ -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>

components/ui/alert/index.ts

@@ -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>

components/ui/aspect-ratio/AspectRatio.vue

@@ -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>

components/ui/aspect-ratio/index.ts

@@ -0,0 +1 @@
+export { default as AspectRatio } from './AspectRatio.vue'

components/ui/auto-form/AutoForm.vue

@@ -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>

components/ui/auto-form/AutoFormField.vue

@@ -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>

components/ui/auto-form/AutoFormFieldArray.vue

@@ -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>

components/ui/auto-form/AutoFormFieldBoolean.vue

@@ -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>

components/ui/auto-form/AutoFormFieldDate.vue

@@ -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>

components/ui/auto-form/AutoFormFieldEnum.vue

@@ -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>

components/ui/auto-form/AutoFormFieldFile.vue

@@ -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>

components/ui/auto-form/AutoFormFieldInput.vue

@@ -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>

components/ui/auto-form/AutoFormFieldNumber.vue

@@ -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>

components/ui/auto-form/AutoFormFieldObject.vue

@@ -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>

components/ui/auto-form/AutoFormLabel.vue

@@ -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>

components/ui/auto-form/constant.ts

@@ -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',
+}

components/ui/auto-form/dependencies.ts

@@ -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,
+  }
+}

components/ui/auto-form/index.ts

@@ -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'

components/ui/auto-form/interface.ts

@@ -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>

components/ui/auto-form/utils.ts

@@ -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
+}

components/ui/avatar/Avatar.vue

@@ -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>

components/ui/avatar/AvatarFallback.vue

@@ -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>

components/ui/avatar/AvatarImage.vue

@@ -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>

components/ui/avatar/index.ts

@@ -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>

components/ui/breadcrumb/Breadcrumb.vue

@@ -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>

components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -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>

components/ui/breadcrumb/BreadcrumbItem.vue

@@ -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>

components/ui/breadcrumb/BreadcrumbLink.vue

@@ -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>

components/ui/breadcrumb/BreadcrumbList.vue

@@ -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>

components/ui/breadcrumb/BreadcrumbPage.vue

@@ -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>

components/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -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>

components/ui/breadcrumb/index.ts

@@ -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'

components/ui/button/Button.vue

@@ -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>

components/ui/button/index.ts

@@ -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>

components/ui/calendar/Calendar.vue

@@ -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>