├── .browserslistrc
├── .gitignore
├── LICENSE
├── README.md
├── babel.config.js
├── build
    └── rollup.config.js
├── dev
    ├── serve.js
    └── serve.vue
├── package-lock.json
├── package.json
├── src
    ├── entry.esm.js
    ├── entry.js
    ├── index.css
    ├── input.css
    └── lib-components
    │   ├── Alert
    │       ├── Style.json
    │       └── TAlert.vue
    │   ├── Button
    │       ├── Button.md
    │       ├── Style.json
    │       └── TButton.vue
    │   ├── ContentCard
    │       ├── Style.json
    │       └── TContentCard.vue
    │   ├── GlobalStyles.json
    │   ├── Icons
    │       ├── ChevronDownIcon.vue
    │       ├── CircleCheckIcon.vue
    │       ├── CircleExclamationIcon.vue
    │       ├── CircleMinusIcon.vue
    │       ├── CircleXMark.vue
    │       ├── ExpandIcon.vue
    │       ├── MinimizeIcon.vue
    │       ├── TrashIcon.vue
    │       └── XMarkIcon.vue
    │   ├── Input
    │       ├── Style.json
    │       ├── TCheckboxInput.vue
    │       ├── TInputGroup.vue
    │       ├── TRadioButtonInput.vue
    │       ├── TSelectInput.vue
    │       ├── TSwitchInput.vue
    │       ├── TTextAreaInput.vue
    │       └── TTextInput.vue
    │   ├── LoadingAnimation
    │       └── TCircleLoadingAnimation.vue
    │   ├── Modal
    │       └── TModal.vue
    │   └── index.js
└── tailwind.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | current node
2 | last 2 versions and > 2%
3 | ie > 10
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Sinan AYDOĞAN
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # TailAdmin UI Kit
 2 | 
 3 | UI components library by VueJS and TailwindCSS.
 4 | 
 5 | <p align="center">
 6 |   <img src="https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white" />
 7 |   <img src="https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D" />
 8 | </p>
 9 | <p align="center">
10 | 
11 | <a href="https://ko-fi.com/sinanaydogan" target="_blank">
12 |     <img src="https://ko-fi.com/img/githubbutton_sm.svg">
13 | </a>
14 | 
15 | </p>
16 | 
17 | <p align="center">
18 | <a href="https://www.buymeacoffee.com/sinanaydogan">
19 |     <img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=sinanaydogan&button_colour=FFDD00&font_colour=000000&font_family=Lato&outline_colour=000000&coffee_colour=ffffff">
20 | </a>
21 | </p>
22 | 
23 | <p align="center">
24 | <a href="https://discord.gg/TnjA2GqYmw">
25 |     <img src="https://v2.tailadmin.dev/img/demo/discord.svg" height="40">
26 | </a>
27 | </p>
28 | 
29 | ## Installation
30 | 
31 | Use the package manager [npm](https://docs.npmjs.com/cli/v6/commands/npm-install) to install TailAdmin UI Kit.
32 | 
33 | ## Usage
34 | 
35 | Please follow my [YouTube channel](https://www.youtube.com/playlist?list=PLbdS49WKsrOXTo_X_Ja6P3zll1yyhoIYN) for usages.
36 | 
37 | ```bash
38 | npm install tailadmin-ui-kit
39 | ```
40 | 
41 | 
42 | ```javascript
43 | // Import a component if you want to use in script block
44 | import { TSwitchInput } from "tailadmin-ui-kit"
45 | import {defineComponent} from 'vue';
46 | 
47 | export default defineComponent({
48 |     name: 'Products',
49 |     components: {TSwitchInput},
50 |     setup() {
51 |         const form = ref({
52 |             name: '',
53 |             status: false
54 |         })
55 | 
56 |         return {
57 |             form
58 |         }
59 |     }
60 | });
61 | ```
62 | 
63 | ```html
64 | <!--Use component in template block-->
65 | <t-switch-input v-model="product.status" true-color="emerald" false-color="rose" loading/>
66 | ```
67 | 
68 | ## :rocket: Components
69 | - [Alert](https://youtu.be/BoGcU6olNsg)
70 | - [Button](https://youtu.be/A42a0Tcls5s)
71 | - [Content Card](https://youtu.be/NuYh3Dl7oXc)🚀
72 | - [Modal with Notification feature](https://youtu.be/iCJOApZVwQQ)
73 | - Form & Input Components
74 |   - [Input Group](https://youtu.be/EanH8XQNMU8)
75 |   - [Text Input](https://youtu.be/EanH8XQNMU8)
76 |   - [Text Area Input](https://youtu.be/cCQSoqIfJMM)
77 |   - [Switch Input](https://youtu.be/a5RpQl2cnEs)
78 |   - [Select Input](https://youtu.be/nJ4bQjdvxPM) 
79 | 
80 | > :telescope: Other components coming soon, please check [Github](https://github.com/sinan-aydogan/tailadmin-ui-kit)
81 | 
82 | ## Help
83 | 
84 | If you need to help more than this documentation:
85 | - You can join our [Discord Channel](https://discord.gg/TnjA2GqYmw) then ask your questions
86 | 
87 | ## Contributing
88 | 
89 | Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
90 | 
91 | Please make sure to update tests as appropriate.
92 | 
93 | ## License
94 | 
95 | The TailAdmin is open-sourced software licensed under the [MIT](https://opensource.org/licenses/MIT) license.
96 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | const devPresets = ['@vue/babel-preset-app'];
 2 | const buildPresets = [
 3 |   [
 4 |     '@babel/preset-env',
 5 |     // Config for @babel/preset-env
 6 |     {
 7 |       // Example: Always transpile optional chaining/nullish coalescing
 8 |       // include: [
 9 |       //   /(optional-chaining|nullish-coalescing)/
10 |       // ],
11 |     },
12 |   ],
13 | ];
14 | module.exports = {
15 |   presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets),
16 | };
17 | 


--------------------------------------------------------------------------------
/build/rollup.config.js:
--------------------------------------------------------------------------------
  1 | // rollup.config.js
  2 | import fs from 'fs';
  3 | import path from 'path';
  4 | import vue from 'rollup-plugin-vue';
  5 | import alias from '@rollup/plugin-alias';
  6 | import commonjs from '@rollup/plugin-commonjs';
  7 | import resolve from '@rollup/plugin-node-resolve';
  8 | import replace from '@rollup/plugin-replace';
  9 | import babel from '@rollup/plugin-babel';
 10 | import PostCSS from 'rollup-plugin-postcss';
 11 | import { terser } from 'rollup-plugin-terser';
 12 | import minimist from 'minimist';
 13 | import json from "@rollup/plugin-json";
 14 | import styles from "rollup-plugin-styles";
 15 | 
 16 | // Get browserslist config and remove ie from es build targets
 17 | const esbrowserslist = fs.readFileSync('./.browserslistrc')
 18 |   .toString()
 19 |   .split('\n')
 20 |   .filter((entry) => entry && entry.substring(0, 2) !== 'ie');
 21 | 
 22 | // Extract babel preset-env config, to combine with esbrowserslist
 23 | const babelPresetEnvConfig = require('../babel.config')
 24 |   .presets.filter((entry) => entry[0] === '@babel/preset-env')[0][1];
 25 | 
 26 | const argv = minimist(process.argv.slice(2));
 27 | 
 28 | const projectRoot = path.resolve(__dirname, '..');
 29 | 
 30 | const baseConfig = {
 31 |   input: 'src/entry.js',
 32 |   plugins: {
 33 |     preVue: [
 34 |       alias({
 35 |         entries: [
 36 |           {
 37 |             find: '@',
 38 |             replacement: `${path.resolve(projectRoot, 'src')}`,
 39 |           },
 40 |         ],
 41 |       }),
 42 |     ],
 43 |     replace: {
 44 |       'process.env.NODE_ENV': JSON.stringify('production'),
 45 |     },
 46 |     vue: {
 47 |     },
 48 |     postVue: [
 49 |       resolve({
 50 |         extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
 51 |       }),
 52 |       // Process only `<style module>` blocks.
 53 |       PostCSS({
 54 |         modules: {
 55 |           generateScopedName: '[local]___[hash:base64:5]',
 56 |         },
 57 |         include: /&module=.*\.css$/,
 58 |       }),
 59 |       // Process all `<style>` blocks except `<style module>`.
 60 |       PostCSS({ include: /(?<!&module=.*)\.css$/ }),
 61 |       commonjs(),
 62 |     ],
 63 |     babel: {
 64 |       exclude: 'node_modules/**',
 65 |       extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
 66 |       babelHelpers: 'bundled',
 67 |     },
 68 |   },
 69 | };
 70 | 
 71 | // ESM/UMD/IIFE shared settings: externals
 72 | // Refer to https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
 73 | const external = [
 74 |   // list external dependencies, exactly the way it is written in the import statement.
 75 |   // eg. 'jquery'
 76 |   'vue',
 77 | ];
 78 | 
 79 | // UMD/IIFE shared settings: output.globals
 80 | // Refer to https://rollupjs.org/guide/en#output-globals for details
 81 | const globals = {
 82 |   // Provide global variable names to replace your external imports
 83 |   // eg. jquery: '$'
 84 |   vue: 'Vue',
 85 | };
 86 | 
 87 | // Customize configs for individual targets
 88 | const buildFormats = [];
 89 | if (!argv.format || argv.format === 'es') {
 90 |   const esConfig = {
 91 |     ...baseConfig,
 92 |     input: 'src/entry.esm.js',
 93 |     external,
 94 |     output: {
 95 |       file: 'dist/tailadmin-ui-kit.esm.js',
 96 |       format: 'esm',
 97 |       exports: 'named',
 98 |       assetFileNames: "[name]-[hash][extname]",
 99 |     },
100 |     plugins: [
101 |       json(),
102 |       replace(baseConfig.plugins.replace),
103 |       ...baseConfig.plugins.preVue,
104 |       vue(baseConfig.plugins.vue),
105 |       ...baseConfig.plugins.postVue,
106 |       babel({
107 |         ...baseConfig.plugins.babel,
108 |         presets: [
109 |           [
110 |             '@babel/preset-env',
111 |             {
112 |               ...babelPresetEnvConfig,
113 |               targets: esbrowserslist,
114 |             },
115 |           ],
116 |         ],
117 |       }),
118 |       styles()
119 |     ],
120 |   };
121 |   buildFormats.push(esConfig);
122 | }
123 | 
124 | if (!argv.format || argv.format === 'cjs') {
125 |   const umdConfig = {
126 |     ...baseConfig,
127 |     external,
128 |     output: {
129 |       compact: true,
130 |       file: 'dist/tailadmin-ui-kit.ssr.js',
131 |       format: 'cjs',
132 |       name: 'TailadminUiKit',
133 |       exports: 'auto',
134 |       globals,
135 |       assetFileNames: "[name]-[hash][extname]",
136 |     },
137 |     plugins: [
138 |       json(),
139 |       replace(baseConfig.plugins.replace),
140 |       ...baseConfig.plugins.preVue,
141 |       vue(baseConfig.plugins.vue),
142 |       ...baseConfig.plugins.postVue,
143 |       babel(baseConfig.plugins.babel),
144 |       styles()
145 |     ],
146 |   };
147 |   buildFormats.push(umdConfig);
148 | }
149 | 
150 | if (!argv.format || argv.format === 'iife') {
151 |   const unpkgConfig = {
152 |     ...baseConfig,
153 |     external,
154 |     output: {
155 |       compact: true,
156 |       file: 'dist/tailadmin-ui-kit.min.js',
157 |       format: 'iife',
158 |       name: 'TailadminUiKit',
159 |       exports: 'auto',
160 |       globals,
161 |       assetFileNames: "[name]-[hash][extname]",
162 |     },
163 |     plugins: [
164 |       json(),
165 |       replace(baseConfig.plugins.replace),
166 |       ...baseConfig.plugins.preVue,
167 |       vue(baseConfig.plugins.vue),
168 |       ...baseConfig.plugins.postVue,
169 |       babel(baseConfig.plugins.babel),
170 |       terser({
171 |         output: {
172 |           ecma: 5,
173 |         },
174 |       }),
175 |       styles()
176 |     ],
177 |   };
178 |   buildFormats.push(unpkgConfig);
179 | }
180 | 
181 | // Export config
182 | export default buildFormats;
183 | 


--------------------------------------------------------------------------------
/dev/serve.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue';
 2 | import Dev from './serve.vue';
 3 | // To register individual components where they are used (serve.vue) instead of using the
 4 | // library as a whole, comment/remove this import and it's corresponding "app.use" call
 5 | import TailadminUiKit from '@/entry.esm';
 6 | 
 7 | const app = createApp(Dev);
 8 | app.use(TailadminUiKit);
 9 | 
10 | app.mount('#app');
11 | 


--------------------------------------------------------------------------------
/dev/serve.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import { defineComponent, ref } from "vue";
  3 | import "@/index.css";
  4 | 
  5 | import TContentCard from "@/lib-components/ContentCard/TContentCard";
  6 | import TInputGroup from "@/lib-components/Input/TInputGroup";
  7 | import TTextInput from "@/lib-components/Input/TTextInput";
  8 | import TSelectInput from "@/lib-components/Input/TSelectInput";
  9 | import TTextAreaInput from "@/lib-components/Input/TTextAreaInput";
 10 | import TButton from "@/lib-components/Button/TButton";
 11 | import TModal from "@/lib-components/Modal/TModal";
 12 | // import {TContentCard} from "tailadmin-ui-kit";
 13 | 
 14 | export default defineComponent({
 15 |   name: "ServeDev",
 16 |   components: {
 17 |     TModal,
 18 |     TButton,
 19 |     TTextAreaInput,
 20 |     TSelectInput,
 21 |     TTextInput,
 22 |     TInputGroup,
 23 |     TContentCard,
 24 |   },
 25 | 
 26 |   setup() {
 27 |     const showModal = ref(true);
 28 |     const saveForm = () => {
 29 |       alert("save form");
 30 |     };
 31 | 
 32 |     return {
 33 |       showModal,
 34 |       saveForm,
 35 |     };
 36 |   },
 37 | });
 38 | </script>
 39 | 
 40 | <style>
 41 | #app {
 42 |   background-color: rgb(229 231 235);
 43 |   height: 100vh;
 44 |   width: 100vw;
 45 |   display: flex;
 46 |   justify-content: center;
 47 |   align-items: center;
 48 | }
 49 | 
 50 | @media (prefers-color-scheme: dark) {
 51 |   #app {
 52 |     background-color: rgb(31 41 55);
 53 |   }
 54 | }
 55 | </style>
 56 | 
 57 | <template>
 58 |   <div id="app">
 59 |     <div
 60 |       style="
 61 |         margin-left: auto;
 62 |         margin-right: auto;
 63 |         display: flex;
 64 |         flex-direction: row;
 65 |         gap: 10px;
 66 |         padding: 50px;
 67 |         width: 750px;
 68 |       "
 69 |     >
 70 |       <t-content-card
 71 |         radius=""
 72 |         img-alt-text="Turning Red"
 73 |         design="horizontal-banner"
 74 |         title="Turning Red"
 75 |         subtitle="Growing up is a beast."
 76 |         img-src="https://www.themoviedb.org/t/p/w600_and_h900_bestv2/qsdjk9oAKSQMWs0Vt5Pyfh6O4GZ.jpg"
 77 |       >
 78 |         <template #default>
 79 |           <div class="h-full flex flex-col justify-between">
 80 |             <p>
 81 |               Thirteen-year-old Mei is experiencing the awkwardness of being a
 82 |               teenager with a twist – when she gets too excited, she transforms
 83 |               into a giant red panda.
 84 |             </p>
 85 | 
 86 |             <div>
 87 |               <span>Actors:</span>
 88 |               <div class="flex space-x-2">
 89 |                 <t-button>Rosalie Chiang</t-button>
 90 |                 <t-button>Jin Park</t-button>
 91 |                 <t-button>Sandra Oh</t-button>
 92 |               </div>
 93 |             </div>
 94 |           </div>
 95 |         </template>
 96 |       </t-content-card>
 97 | 
 98 |       <t-modal
 99 |         v-model="showModal"
100 |         :action-buttons="['submit', 'reset', 'cancel']"
101 |       ></t-modal>
102 |     </div>
103 |   </div>
104 | </template>
105 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "tailadmin-ui-kit",
  3 |   "author": "Sinan AYDOĞAN",
  4 |   "version": "1.0.23",
  5 |   "description": "VueJS UI Kit for Admin Panels",
  6 |   "license": "MIT",
  7 |   "main": "dist/tailadmin-ui-kit.ssr.js",
  8 |   "browser": "dist/tailadmin-ui-kit.esm.js",
  9 |   "module": "dist/tailadmin-ui-kit.esm.js",
 10 |   "unpkg": "dist/tailadmin-ui-kit.min.js",
 11 |   "style": "src/index.css",
 12 |   "repository": {
 13 |     "type": "git",
 14 |     "url": "git+https://github.com/sinan-aydogan/tailadmin-ui-kit.git"
 15 |   },
 16 |   "funding": [
 17 |     {
 18 |       "type": "github",
 19 |       "url": "https://github.com/sponsors/sinan-aydogan"
 20 |     },
 21 |     {
 22 |       "type": "kofi",
 23 |       "url": "https://ko-fi.com/sinanaydogan"
 24 |     }
 25 |   ],
 26 |   "keywords": [
 27 |     "css",
 28 |     "tailwindcss",
 29 |     "tailwind components",
 30 |     "vuejs",
 31 |     "component",
 32 |     "ui",
 33 |     "ui kit",
 34 |     "vue component",
 35 |     "table component",
 36 |     "button component",
 37 |     "avatar component",
 38 |     "tailwindcss-ui-kit",
 39 |     "vue-ui-kit",
 40 |     "responsive",
 41 |     "tailadmin",
 42 |     "front-end",
 43 |     "web",
 44 |     "opensource",
 45 |     "form component",
 46 |     "text input",
 47 |     "text area",
 48 |     "select component",
 49 |     "select input",
 50 |     "vue select",
 51 |     "switch component",
 52 |     "modal component",
 53 |     "content card",
 54 |     "showcase"
 55 |   ],
 56 |   "files": [
 57 |     "dist/*",
 58 |     "src/**/*.vue",
 59 |     "src/*.css"
 60 |   ],
 61 |   "sideEffects": true,
 62 |   "scripts": {
 63 |     "serve": "vue-cli-service serve dev/serve.js",
 64 |     "prebuild": "rimraf ./dist",
 65 |     "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
 66 |     "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
 67 |     "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
 68 |     "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
 69 |   },
 70 |   "devDependencies": {
 71 |     "@babel/core": "^7.14.6",
 72 |     "@babel/preset-env": "^7.14.7",
 73 |     "@rollup/plugin-alias": "^3.1.2",
 74 |     "@rollup/plugin-babel": "^5.3.0",
 75 |     "@rollup/plugin-commonjs": "^14.0.0",
 76 |     "@rollup/plugin-node-resolve": "^9.0.0",
 77 |     "@rollup/plugin-replace": "^2.4.2",
 78 |     "@vue/cli-plugin-babel": "^4.5.13",
 79 |     "@vue/cli-service": "^4.5.13",
 80 |     "@vue/compiler-sfc": "^3.0.11",
 81 |     "cross-env": "^7.0.3",
 82 |     "minimist": "^1.2.5",
 83 |     "or": "^0.2.0",
 84 |     "postcss": "^8.2.10",
 85 |     "prettier": "^2.6.2",
 86 |     "rimraf": "^3.0.2",
 87 |     "rollup": "^2.52.8",
 88 |     "rollup-plugin-postcss": "^4.0.0",
 89 |     "rollup-plugin-styles": "^4.0.0",
 90 |     "rollup-plugin-terser": "^7.0.2",
 91 |     "rollup-plugin-vue": "^6.0.0",
 92 |     "tailwindcss": "^3.0.24",
 93 |     "vue": "^3.0.5"
 94 |   },
 95 |   "peerDependencies": {
 96 |     "vue": "^3.0.5"
 97 |   },
 98 |   "engines": {
 99 |     "node": ">=12"
100 |   },
101 |   "dependencies": {
102 |     "@rollup/plugin-json": "^4.1.0",
103 |     "@tailwindcss/aspect-ratio": "^0.4.0",
104 |     "@vueuse/core": "^8.3.1",
105 |     "lodash": "^4.17.21",
106 |     "vuedraggable": "^4.1.0"
107 |   }
108 | }
109 | 


--------------------------------------------------------------------------------
/src/entry.esm.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // Import vue components
 3 | import * as components from '@/lib-components/index';
 4 | 
 5 | // install function executed by Vue.use()
 6 | const install = function installTailadminUiKit(app) {
 7 |   Object.entries(components).forEach(([componentName, component]) => {
 8 |     app.component(componentName, component);
 9 |   });
10 | };
11 | 
12 | // Create module definition for Vue.use()
13 | export default install;
14 | 
15 | // To allow individual component use, export components
16 | // each can be registered via Vue.component()
17 | export * from '@/lib-components/index';
18 | 


--------------------------------------------------------------------------------
/src/entry.js:
--------------------------------------------------------------------------------
 1 | // iife/cjs usage extends esm default export - so import it all
 2 | import plugin, * as components from '@/entry.esm';
 3 | import "./index.css"
 4 | 
 5 | // Attach named exports directly to plugin. IIFE/CJS will
 6 | // only expose one global var, with component exports exposed as properties of
 7 | // that global var (eg. plugin.component)
 8 | Object.entries(components).forEach(([componentName, component]) => {
 9 |   if (componentName !== 'default') {
10 |     plugin[componentName] = component;
11 |   }
12 | });
13 | 
14 | export default plugin;
15 | 


--------------------------------------------------------------------------------
/src/input.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss/base";
2 | @import "tailwindcss/components";
3 | @import "tailwindcss/utilities";


--------------------------------------------------------------------------------
/src/lib-components/Alert/Style.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "filled": {
  3 |     "base": "text-white py-1 px-4",
  4 |     "slate": {
  5 |       "container": "bg-slate-500",
  6 |       "cdLine": "bg-slate-700"
  7 |     },
  8 |     "gray": {
  9 |       "container":  "bg-gray-500",
 10 |       "cdLine": "bg-gray-700"
 11 |     },
 12 |     "zinc": {
 13 |       "container":  "bg-zinc-500",
 14 |       "cdLine": "bg-zinc-700"
 15 |     },
 16 |     "neutral": {
 17 |       "container":  "bg-neutral-500",
 18 |       "cdLine": "bg-neutral-700"
 19 |     },
 20 |     "stone": {
 21 |       "container":  "bg-stone-500",
 22 |       "cdLine": "bg-stone-700"
 23 |     },
 24 |     "red": {
 25 |       "container":  "bg-red-500",
 26 |       "cdLine": "bg-red-700"
 27 |     },
 28 |     "orange": {
 29 |       "container":  "bg-orange-500",
 30 |       "cdLine": "bg-orange-700"
 31 |     },
 32 |     "amber": {
 33 |       "container":  "bg-amber-500",
 34 |       "cdLine": "bg-amber-700"
 35 |     },
 36 |     "yellow": {
 37 |       "container":  "bg-yellow-500",
 38 |       "cdLine": "bg-yellow-700"
 39 |     },
 40 |     "lime": {
 41 |       "container":  "bg-lime-500",
 42 |       "cdLine": "bg-lime-700"
 43 |     },
 44 |     "green": {
 45 |       "container":  "bg-green-500",
 46 |       "cdLine": "bg-green-700"
 47 |     },
 48 |     "emerald": {
 49 |       "container":  "bg-emerald-500",
 50 |       "cdLine": "bg-emerald-700"
 51 |     },
 52 |     "teal": {
 53 |       "container":  "bg-teal-500",
 54 |       "cdLine": "bg-teal-700"
 55 |     },
 56 |     "cyan": {
 57 |       "container":  "bg-cyan-500",
 58 |       "cdLine": "bg-cyan-700"
 59 |     },
 60 |     "sky": {
 61 |       "container":  "bg-sky-500",
 62 |       "cdLine": "bg-sky-700"
 63 |     },
 64 |     "blue": {
 65 |       "container":  "bg-blue-500",
 66 |       "cdLine": "bg-blue-700"
 67 |     },
 68 |     "indigo": {
 69 |       "container":  "bg-indigo-500",
 70 |       "cdLine": "bg-indigo-700"
 71 |     },
 72 |     "violet": {
 73 |       "container":  "bg-violet-500",
 74 |       "cdLine": "bg-violet-700"
 75 |     },
 76 |     "purple": {
 77 |       "container":  "bg-purple-500",
 78 |       "cdLine": "bg-purple-700"
 79 |     },
 80 |     "fuchsia": {
 81 |       "container":  "bg-fuchsia-500",
 82 |       "cdLine": "bg-fuchsia-700"
 83 |     },
 84 |     "pink": {
 85 |       "container":  "bg-pink-500",
 86 |       "cdLine": "bg-pink-700"
 87 |     },
 88 |     "rose": {
 89 |       "container":  "bg-rose-500",
 90 |       "cdLine": "bg-rose-700"
 91 |     }
 92 |   },
 93 |   "light": {
 94 |     "base": "border py-1 px-4",
 95 |     "slate": {
 96 |       "container": "bg-slate-50 border-slate-500 text-slate-600 dark:bg-slate-700/10 dark:text-slate-100",
 97 |       "cdLine":  "bg-slate-500"
 98 |     },
 99 |     "gray": {
100 |       "container" : "bg-gray-50 border-gray-500 text-gray-600 dark:bg-gray-700/10 dark:text-gray-100",
101 |       "cdLine":  "bg-gray-500"
102 |     },
103 |     "zinc": {
104 |       "container" : "bg-zinc-50 border-zinc-500 text-zinc-600 dark:bg-zinc-700/10 dark:text-zinc-100",
105 |       "cdLine":  "bg-zinc-500"
106 |     },
107 |     "neutral": {
108 |       "container" : "bg-neutral-50 border-neutral-500 text-neutral-600 dark:bg-neutral-700/10 dark:text-neutral-100",
109 |       "cdLine":  "bg-neutral-500"
110 |     },
111 |     "stone": {
112 |       "container" : "bg-stone-50 border-stone-500 text-stone-600 dark:bg-stone-700/10 dark:text-stone-100",
113 |       "cdLine":  "bg-stone-500"
114 |     },
115 |     "red": {
116 |       "container" : "bg-red-50 border-red-500 text-red-600 dark:bg-red-700/10 dark:text-red-100",
117 |       "cdLine":  "bg-red-500"
118 |     },
119 |     "orange": {
120 |       "container" : "bg-orange-50 border-orange-500 text-orange-600 dark:bg-orange-700/10 dark:text-orange-100",
121 |       "cdLine":  "bg-orange-500"
122 |     },
123 |     "amber": {
124 |       "container" : "bg-amber-50 border-amber-500 text-amber-600 dark:bg-amber-700/10 dark:text-amber-100",
125 |       "cdLine":  "bg-amber-500"
126 |     },
127 |     "yellow": {
128 |       "container" : "bg-yellow-50 border-yellow-500 text-yellow-600 dark:bg-yellow-700/10 dark:text-yellow-100",
129 |       "cdLine":  "bg-yellow-500"
130 |     },
131 |     "lime": {
132 |       "container" : "bg-lime-50 border-lime-500 text-lime-600 dark:bg-lime-700/10 dark:text-lime-100",
133 |       "cdLine":  "bg-lime-500"
134 |     },
135 |     "green": {
136 |       "container" : "bg-green-50 border-green-500 text-green-600 dark:bg-green-700/10 dark:text-green-100",
137 |       "cdLine":  "bg-green-500"
138 |     },
139 |     "emerald": {
140 |       "container" : "bg-emerald-50 border-emerald-500 text-emerald-600 dark:bg-emerald-700/10 dark:text-emerald-100",
141 |       "cdLine":  "bg-emerald-500"
142 |     },
143 |     "teal": {
144 |       "container" : "bg-teal-50 border-teal-500 text-teal-600 dark:bg-teal-700/10 dark:text-teal-100",
145 |       "cdLine":  "bg-teal-500"
146 |     },
147 |     "cyan": {
148 |       "container" : "bg-cyan-50 border-cyan-500 text-cyan-600 dark:bg-cyan-700/10 dark:text-cyan-100",
149 |       "cdLine":  "bg-cyan-500"
150 |     },
151 |     "sky": {
152 |       "container" : "bg-sky-50 border-sky-500 text-sky-600 dark:bg-sky-700/10 dark:text-sky-100",
153 |       "cdLine":  "bg-sky-500"
154 |     },
155 |     "blue": {
156 |       "container" : "bg-blue-50 border-blue-500 text-blue-600 dark:bg-blue-700/10 dark:text-blue-100",
157 |       "cdLine":  "bg-blue-500"
158 |     },
159 |     "indigo": {
160 |       "container" : "bg-indigo-50 border-indigo-500 text-indigo-600 dark:bg-indigo-700/10 dark:text-indigo-100",
161 |       "cdLine":  "bg-indigo-500"
162 |     },
163 |     "violet": {
164 |       "container" : "bg-violet-50 border-violet-500 text-violet-600 dark:bg-violet-700/10 dark:text-violet-100",
165 |       "cdLine":  "bg-violet-500"
166 |     },
167 |     "purple": {
168 |       "container" : "bg-purple-50 border-purple-500 text-purple-600 dark:bg-purple-700/10 dark:text-purple-100",
169 |       "cdLine":  "bg-purple-500"
170 |     },
171 |     "fuchsia": {
172 |       "container" : "bg-fuchsia-50 border-fuchsia-500 text-fuchsia-600 dark:bg-fuchsia-700/10 dark:text-fuchsia-100",
173 |       "cdLine":  "bg-fuchsia-500"
174 |     },
175 |     "pink": {
176 |       "container" : "bg-pink-50 border-pink-500 text-pink-600 dark:bg-pink-700/10 dark:text-pink-100",
177 |       "cdLine":  "bg-pink-500"
178 |     },
179 |     "rose": {
180 |       "container" : "bg-rose-50 border-rose-500 text-rose-600 dark:bg-rose-700/10 dark:text-rose-100",
181 |       "cdLine":  "bg-rose-500"
182 |     }
183 |   },
184 |   "inline": {
185 |     "base": "border py-1 pl-6 pr-4 text-white",
186 |     "slate": {
187 |       "container": "bg-slate-500 border-slate-500 dark:bg-opacity-30",
188 |       "cdLine": "bg-slate-50"
189 |     },
190 |     "gray": {
191 |       "container":  "bg-gray-500 border-gray-500 dark:bg-opacity-30",
192 |       "cdLine": "bg-gray-50"
193 |     },
194 |     "zinc": {
195 |       "container":  "bg-zinc-500 border-zinc-500 dark:bg-opacity-30",
196 |       "cdLine": "bg-zinc-50"
197 |     },
198 |     "neutral": {
199 |       "container":  "bg-neutral-500 border-neutral-500 dark:bg-opacity-30",
200 |       "cdLine": "bg-neutral-50"
201 |     },
202 |     "stone": {
203 |       "container":  "bg-stone-500 border-stone-500 dark:bg-opacity-30",
204 |       "cdLine": "bg-stone-50"
205 |     },
206 |     "red": {
207 |       "container":  "bg-red-500 border-red-500 dark:bg-opacity-30",
208 |       "cdLine": "bg-red-50"
209 |     },
210 |     "orange": {
211 |       "container":  "bg-orange-500 border-orange-500 dark:bg-opacity-30",
212 |       "cdLine": "bg-orange-50"
213 |     },
214 |     "amber": {
215 |       "container":  "bg-amber-500 border-amber-500 dark:bg-opacity-30",
216 |       "cdLine": "bg-amber-50"
217 |     },
218 |     "yellow": {
219 |       "container":  "bg-yellow-500 border-yellow-500 dark:bg-opacity-30",
220 |       "cdLine": "bg-yellow-50"
221 |     },
222 |     "lime": {
223 |       "container":  "bg-lime-500 border-lime-500 dark:bg-opacity-30",
224 |       "cdLine": "bg-lime-50"
225 |     },
226 |     "green": {
227 |       "container":  "bg-green-500 border-green-500 dark:bg-opacity-30",
228 |       "cdLine": "bg-green-50"
229 |     },
230 |     "emerald": {
231 |       "container":  "bg-emerald-500 border-emerald-500 dark:bg-opacity-30",
232 |       "cdLine": "bg-emerald-50"
233 |     },
234 |     "teal": {
235 |       "container":  "bg-teal-500 border-teal-500 dark:bg-opacity-30",
236 |       "cdLine": "bg-teal-50"
237 |     },
238 |     "cyan": {
239 |       "container":  "bg-cyan-500 border-cyan-500 dark:bg-opacity-30",
240 |       "cdLine": "bg-cyan-50"
241 |     },
242 |     "sky": {
243 |       "container":  "bg-sky-500 border-sky-500 dark:bg-opacity-30",
244 |       "cdLine": "bg-sky-50"
245 |     },
246 |     "blue": {
247 |       "container":  "bg-blue-500 border-blue-500 dark:bg-opacity-30",
248 |       "cdLine": "bg-blue-50"
249 |     },
250 |     "indigo": {
251 |       "container":  "bg-indigo-500 border-indigo-500 dark:bg-opacity-30",
252 |       "cdLine": "bg-indigo-50"
253 |     },
254 |     "violet": {
255 |       "container":  "bg-violet-500 border-violet-500 dark:bg-opacity-30",
256 |       "cdLine": "bg-violet-50"
257 |     },
258 |     "purple": {
259 |       "container":  "bg-purple-500 border-purple-500 dark:bg-opacity-30",
260 |       "cdLine": "bg-purple-50"
261 |     },
262 |     "fuchsia": {
263 |       "container":  "bg-fuchsia-500 border-fuchsia-500 dark:bg-opacity-30",
264 |       "cdLine": "bg-fuchsia-50"
265 |     },
266 |     "pink": {
267 |       "container":  "bg-pink-500 border-pink-500 dark:bg-opacity-30",
268 |       "cdLine": "bg-pink-50"
269 |     },
270 |     "rose": {
271 |       "container":  "bg-rose-500 border-rose-500 dark:bg-opacity-30",
272 |       "cdLine": "bg-rose-50"
273 |     }
274 |   },
275 |   "outline": {
276 |     "base": "flex shadow px-4 text-slate-700 bg-white dark:bg-slate-700/10 dark:text-white overflow-hidden",
277 |     "slate": {
278 |       "container": "text-slate-500",
279 |       "cdLine":"bg-slate-500",
280 |       "icon": "text-slate-500"
281 |     },
282 |     "gray": {
283 |       "container": "text-gray-500",
284 |       "cdLine": "bg-gray-500",
285 |       "icon": "text-gray-500"
286 |     },
287 |     "zinc": {
288 |       "container": "text-zinc-500",
289 |       "cdLine": "bg-zinc-500",
290 |       "icon": "text-zinc-500"
291 |     },
292 |     "neutral": {
293 |       "container": "text-neutral-500",
294 |       "cdLine": "bg-neutral-500",
295 |       "icon": "text-neutral-500"
296 |     },
297 |     "stone": {
298 |       "container": "text-stone-500",
299 |       "cdLine": "bg-stone-500",
300 |       "icon": "text-stone-500"
301 |     },
302 |     "red": {
303 |       "container": "text-red-500",
304 |       "cdLine": "bg-red-500",
305 |       "icon": "text-red-500"
306 |     },
307 |     "orange": {
308 |       "container": "text-orange-500",
309 |       "cdLine": "bg-orange-500",
310 |       "icon": "text-orange-500"
311 |     },
312 |     "amber": {
313 |       "container": "text-amber-500",
314 |       "cdLine": "bg-amber-500",
315 |       "icon": "text-amber-500"
316 |     },
317 |     "yellow": {
318 |       "container": "text-yellow-500",
319 |       "cdLine": "bg-yellow-500",
320 |       "icon": "text-yellow-500"
321 |     },
322 |     "lime": {
323 |       "container": "text-lime-500",
324 |       "cdLine": "bg-lime-500",
325 |       "icon": "text-lime-500"
326 |     },
327 |     "green": {
328 |       "container": "text-green-500",
329 |       "cdLine": "bg-green-500",
330 |       "icon": "text-green-500"
331 |     },
332 |     "emerald": {
333 |       "container": "text-emerald-500",
334 |       "cdLine": "bg-emerald-500",
335 |       "icon": "text-emerald-500"
336 |     },
337 |     "teal": {
338 |       "container": "text-teal-500",
339 |       "cdLine": "bg-teal-500",
340 |       "icon": "text-teal-500"
341 |     },
342 |     "cyan": {
343 |       "container": "text-cyan-500",
344 |       "cdLine": "bg-cyan-500",
345 |       "icon": "text-cyan-500"
346 |     },
347 |     "sky": {
348 |       "container": "text-sky-500",
349 |       "cdLine": "bg-sky-500",
350 |       "icon": "text-sky-500"
351 |     },
352 |     "blue": {
353 |       "container": "text-blue-500",
354 |       "cdLine": "bg-blue-500",
355 |       "icon": "text-blue-500"
356 |     },
357 |     "indigo": {
358 |       "container": "text-indigo-500",
359 |       "cdLine": "bg-indigo-500",
360 |       "icon": "text-indigo-500"
361 |     },
362 |     "violet": {
363 |       "container": "text-violet-500",
364 |       "cdLine": "bg-violet-500",
365 |       "icon": "text-violet-500"
366 |     },
367 |     "purple": {
368 |       "container": "text-purple-500",
369 |       "cdLine": "bg-purple-500",
370 |       "icon": "text-purple-500"
371 |     },
372 |     "fuchsia": {
373 |       "container": "text-fuchsia-500",
374 |       "cdLine": "bg-fuchsia-500",
375 |       "icon": "text-fuchsia-500"
376 |     },
377 |     "pink": {
378 |       "container": "text-pink-500",
379 |       "cdLine": "bg-pink-500",
380 |       "icon": "text-pink-500"
381 |     },
382 |     "rose": {
383 |       "container": "text-rose-500",
384 |       "cdLine": "bg-rose-500",
385 |       "icon": "text-rose-500"
386 |     }
387 |   },
388 |   "elegant": {
389 |     "base": "flex flex-row justify-start items-center py-1 px-4 shadow text-slate-700 bg-white dark:bg-slate-700/10 dark:text-white overflow-hidden",
390 |     "slate": {
391 |       "container": "text-slate-600 dark:text-white bg-slate-50 border-slate-500 dark:bg-slate-700/10",
392 |       "cdLine":"bg-slate-500"
393 |     } ,
394 |     "gray": {
395 |       "container": "text-gray-600 dark:text-white bg-gray-50 border-gray-500 dark:bg-gray-700/10",
396 |       "cdLine": "bg-gray-500"
397 |     } ,
398 |     "zinc": {
399 |       "container": "text-zinc-600 dark:text-white bg-zinc-50 border-zinc-500 dark:bg-zinc-700/10",
400 |       "cdLine": "bg-zinc-500"
401 |     } ,
402 |     "neutral": {
403 |       "container": "text-neutral-600 dark:text-white bg-neutral-50 border-neutral-500 dark:bg-neutral-700/10",
404 |       "cdLine": "bg-neutral-500"
405 |     } ,
406 |     "stone": {
407 |       "container": "text-stone-600 dark:text-white bg-stone-50 border-stone-500 dark:bg-stone-700/10",
408 |       "cdLine": "bg-stone-500"
409 |     } ,
410 |     "red": {
411 |       "container": "text-red-600 dark:text-white bg-red-50 border-red-500 dark:bg-red-700/10",
412 |       "cdLine": "bg-red-500"
413 |     } ,
414 |     "orange": {
415 |       "container": "text-orange-600 dark:text-white bg-orange-50 border-orange-500 dark:bg-orange-700/10",
416 |       "cdLine": "bg-orange-500"
417 |     } ,
418 |     "amber": {
419 |       "container": "text-amber-600 dark:text-white bg-amber-50 border-amber-500 dark:bg-amber-700/10",
420 |       "cdLine": "bg-amber-500"
421 |     } ,
422 |     "yellow": {
423 |       "container": "text-yellow-600 dark:text-white bg-yellow-50 border-yellow-500 dark:bg-yellow-700/10",
424 |       "cdLine": "bg-yellow-500"
425 |     } ,
426 |     "lime": {
427 |       "container": "text-lime-600 dark:text-white bg-lime-50 border-lime-500 dark:bg-lime-700/10",
428 |       "cdLine": "bg-lime-500"
429 |     } ,
430 |     "green": {
431 |       "container": "text-green-600 dark:text-white bg-green-50 border-green-500 dark:bg-green-700/10",
432 |       "cdLine": "bg-green-500"
433 |     } ,
434 |     "emerald": {
435 |       "container": "text-emerald-600 dark:text-white bg-emerald-50 border-emerald-500 dark:bg-emerald-700/10",
436 |       "cdLine": "bg-emerald-500"
437 |     } ,
438 |     "teal": {
439 |       "container": "text-teal-600 dark:text-white bg-teal-50 border-teal-500 dark:bg-teal-700/10",
440 |       "cdLine": "bg-teal-500"
441 |     } ,
442 |     "cyan": {
443 |       "container": "text-cyan-600 dark:text-white bg-cyan-50 border-cyan-500 dark:bg-cyan-700/10",
444 |       "cdLine": "bg-cyan-500"
445 |     } ,
446 |     "sky": {
447 |       "container": "text-sky-600 dark:text-white bg-sky-50 border-sky-500 dark:bg-sky-700/10",
448 |       "cdLine": "bg-sky-500"
449 |     } ,
450 |     "blue": {
451 |       "container": "text-blue-600 dark:text-white bg-blue-50 border-blue-500 dark:bg-blue-700/10",
452 |       "cdLine": "bg-blue-500"
453 |     } ,
454 |     "indigo": {
455 |       "container": "text-indigo-600 dark:text-white bg-indigo-50 border-indigo-500 dark:bg-indigo-700/10",
456 |       "cdLine": "bg-indigo-500"
457 |     } ,
458 |     "violet": {
459 |       "container": "text-violet-600 dark:text-white bg-violet-50 border-violet-500 dark:bg-violet-700/10",
460 |       "cdLine": "bg-violet-500"
461 |     } ,
462 |     "purple": {
463 |       "container": "text-purple-600 dark:text-white bg-purple-50 border-purple-500 dark:bg-purple-700/10",
464 |       "cdLine": "bg-purple-500"
465 |     } ,
466 |     "fuchsia": {
467 |       "container": "text-fuchsia-600 dark:text-white bg-fuchsia-50 border-fuchsia-500 dark:bg-fuchsia-700/10",
468 |       "cdLine": "bg-fuchsia-500"
469 |     } ,
470 |     "pink": {
471 |       "container": "text-pink-600 dark:text-white bg-pink-50 border-pink-500 dark:bg-pink-700/10",
472 |       "cdLine": "bg-pink-500"
473 |     } ,
474 |     "rose": {
475 |       "container": "text-rose-600 dark:text-white bg-rose-50 border-rose-500 dark:bg-rose-700/10",
476 |       "cdLine": "bg-rose-500"
477 |     }
478 |   },
479 |   "block": {
480 |     "base": "shadow pl-1 pr-4 text-gray-700 bg-white dark:bg-slate-800 dark:text-white overflow-hidden",
481 |     "slate": {
482 |       "icon": "text-slate-600 bg-slate-200 border-slate-500 dark:bg-slate-500 dark:border-slate-700 dark:text-white",
483 |       "cdLine": "bg-slate-500"
484 |     },
485 |     "gray": {
486 |       "icon": "text-gray-600 bg-gray-200 border-gray-500 dark:bg-gray-500 dark:border-gray-700 dark:text-white",
487 |       "cdLine":  "bg-gray-500"
488 |     },
489 |     "zinc": {
490 |       "icon": "text-zinc-600 bg-zinc-200 border-zinc-500 dark:bg-zinc-500 dark:border-zinc-700 dark:text-white",
491 |       "cdLine":  "bg-zinc-500"
492 |     },
493 |     "neutral": {
494 |       "icon": "text-neutral-600 bg-neutral-200 border-neutral-500 dark:bg-neutral-500 dark:border-neutral-700 dark:text-white",
495 |       "cdLine":  "bg-neutral-500"
496 |     },
497 |     "stone": {
498 |       "icon": "text-stone-600 bg-stone-200 border-stone-500 dark:bg-stone-500 dark:border-stone-700 dark:text-white",
499 |       "cdLine":  "bg-stone-500"
500 |     },
501 |     "red": {
502 |       "icon": "text-red-600 bg-red-200 border-red-500 dark:bg-red-500 dark:border-red-700 dark:text-white",
503 |       "cdLine":  "bg-red-500"
504 |     },
505 |     "orange": {
506 |       "icon": "text-orange-600 bg-orange-200 border-orange-500 dark:bg-orange-500 dark:border-orange-700 dark:text-white",
507 |       "cdLine":  "bg-orange-500"
508 |     },
509 |     "amber": {
510 |       "icon": "text-amber-600 bg-amber-200 border-amber-500 dark:bg-amber-500 dark:border-amber-700 dark:text-white",
511 |       "cdLine":  "bg-amber-500"
512 |     },
513 |     "yellow": {
514 |       "icon": "text-yellow-600 bg-yellow-200 border-yellow-500 dark:bg-yellow-500 dark:border-yellow-700 dark:text-white",
515 |       "cdLine":  "bg-yellow-500"
516 |     },
517 |     "lime": {
518 |       "icon": "text-lime-600 bg-lime-200 border-lime-500 dark:bg-lime-500 dark:border-lime-700 dark:text-white",
519 |       "cdLine":  "bg-lime-500"
520 |     },
521 |     "green": {
522 |       "icon": "text-green-600 bg-green-200 border-green-500 dark:bg-green-500 dark:border-green-700 dark:text-white",
523 |       "cdLine":  "bg-green-500"
524 |     },
525 |     "emerald": {
526 |       "icon": "text-emerald-600 bg-emerald-200 border-emerald-500 dark:bg-emerald-500 dark:border-emerald-700 dark:text-white",
527 |       "cdLine":  "bg-emerald-500"
528 |     },
529 |     "teal": {
530 |       "icon": "text-teal-600 bg-teal-200 border-teal-500 dark:bg-teal-500 dark:border-teal-700 dark:text-white",
531 |       "cdLine":  "bg-teal-500"
532 |     },
533 |     "cyan": {
534 |       "icon": "text-cyan-600 bg-cyan-200 border-cyan-500 dark:bg-cyan-500 dark:border-cyan-700 dark:text-white",
535 |       "cdLine":  "bg-cyan-500"
536 |     },
537 |     "sky": {
538 |       "icon": "text-sky-600 bg-sky-200 border-sky-500 dark:bg-sky-500 dark:border-sky-700 dark:text-white",
539 |       "cdLine":  "bg-sky-500"
540 |     },
541 |     "blue": {
542 |       "icon": "text-blue-600 bg-blue-200 border-blue-500 dark:bg-blue-500 dark:border-blue-700 dark:text-white",
543 |       "cdLine":  "bg-blue-500"
544 |     },
545 |     "indigo": {
546 |       "icon": "text-indigo-600 bg-indigo-200 border-indigo-500 dark:bg-indigo-500 dark:border-indigo-700 dark:text-white",
547 |       "cdLine":  "bg-indigo-500"
548 |     },
549 |     "violet": {
550 |       "icon": "text-violet-600 bg-violet-200 border-violet-500 dark:bg-violet-500 dark:border-violet-700 dark:text-white",
551 |       "cdLine":  "bg-violet-500"
552 |     },
553 |     "purple": {
554 |       "icon": "text-purple-600 bg-purple-200 border-purple-500 dark:bg-purple-500 dark:border-purple-700 dark:text-white",
555 |       "cdLine":  "bg-purple-500"
556 |     },
557 |     "fuchsia": {
558 |       "icon": "text-fuchsia-600 bg-fuchsia-200 border-fuchsia-500 dark:bg-fuchsia-500 dark:border-fuchsia-700 dark:text-white",
559 |       "cdLine":  "bg-fuchsia-500"
560 |     },
561 |     "pink": {
562 |       "icon": "text-pink-600 bg-pink-200 border-pink-500 dark:bg-pink-500 dark:border-pink-700 dark:text-white",
563 |       "cdLine":  "bg-pink-500"
564 |     },
565 |     "rose": {
566 |       "icon": "text-rose-600 bg-rose-200 border-rose-500 dark:bg-rose-500 dark:border-rose-700 dark:text-white",
567 |       "cdLine":  "bg-rose-500"
568 |     }
569 |   }
570 | }


--------------------------------------------------------------------------------
/src/lib-components/Alert/TAlert.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <transition name="alert">
  3 |     <!--Alert Container-->
  4 |     <div
  5 |       v-if="showAlertBox"
  6 |       class="flex flex-shrink-0 items-center justify-start relative flex-grow-0 overflow-hidden"
  7 |       :class="[
  8 |         Style[design].base,
  9 |         !type
 10 |           ? Style[design][color].container
 11 |           : Style[design][
 12 |               type === 'success'
 13 |                 ? 'emerald'
 14 |                 : type === 'warning'
 15 |                 ? 'amber'
 16 |                 : type === 'error'
 17 |                 ? 'rose'
 18 |                 : type === 'info'
 19 |                 ? 'sky'
 20 |                 : 'slate'
 21 |             ].container,
 22 |         GlobalStyles.radius[radius],
 23 |         block ? 'w-full' : 'w-72',
 24 |       ]"
 25 |     >
 26 |       <!--Alert Line-->
 27 |       <div
 28 |         v-if="design.includes('line')"
 29 |         :class="[
 30 |           Style[design][color].cdLine,
 31 |           {
 32 |             'absolute h-[80%] w-1.5 left-2 rounded-full flex-shrink-0':
 33 |               design === 'inline',
 34 |           },
 35 |           {
 36 |             'absolute w-1.5 h-full left-0 flex-shrink-0 mr-4':
 37 |               design === 'outline',
 38 |           },
 39 |         ]"
 40 |       />
 41 | 
 42 |       <!--Alert Icon-->
 43 |       <div
 44 |         v-if="hasSlot('icon') && design !== 'elegant'"
 45 |         class="flex flex-shrink-0 justify-center items-center"
 46 |         :class="[
 47 |           {
 48 |             'mr-2': design.includes('line'),
 49 |             'mr-4': !design.includes('line'),
 50 |             'absolute h-full px-5 border-r-4 left-0': design === 'block',
 51 |           },
 52 |           Style[design][color].icon,
 53 |         ]"
 54 |       >
 55 |         <slot name="icon"></slot>
 56 |       </div>
 57 | 
 58 |       <!--Alert Content-->
 59 |       <div
 60 |         class="relative flex flex-grow py-2 text-sm"
 61 |         :class="[
 62 |           [
 63 |             design === 'elegant'
 64 |               ? 'flex-row justify-start items-center'
 65 |               : 'flex-col justify-center items-start',
 66 |           ],
 67 |           { 'py-3 ml-[5.5rem] pr-4': design === 'block' },
 68 |         ]"
 69 |       >
 70 |         <!--Title-->
 71 |         <p
 72 |           v-if="$slots.hasOwnProperty('title') || title"
 73 |           class="relative font-bold text-lg"
 74 |           :class="[
 75 |             {
 76 |               'rounded-full border mr-4 px-2 py-1 leading-5 text-xs font-normal whitespace-nowrap':
 77 |                 design === 'elegant',
 78 |             },
 79 |             [design === 'elegant' ? Style['elegant'][color].container : ''],
 80 |           ]"
 81 |         >
 82 |           <span v-if="title" v-text="title"></span>
 83 |           <slot v-else name="title"></slot>
 84 |         </p>
 85 | 
 86 |         <!--Content-->
 87 |         <div v-if="$slots.hasOwnProperty('default') || message">
 88 |           <span v-if="message" v-text="message"></span>
 89 |           <slot v-else></slot>
 90 |         </div>
 91 |       </div>
 92 | 
 93 |       <!--Close Icon-->
 94 |       <div
 95 |         v-if="closeable"
 96 |         @click="close"
 97 |         class="absolute flex z-10 h-full right-6 justify-center items-center"
 98 |       >
 99 |         <div
100 |           class="bg-slate-200 hover:bg-slate-200 dark:bg-slate-700 rounded-full dark:hover:bg-rose-600"
101 |         >
102 |           <CircleXMark
103 |             @click="$emit('update:modelValue', '')"
104 |             class="w-5 h-5 text-slate-600 hover:text-rose-600 dark:text-slate-200 hover:dark:text-slate-200 cursor-pointer -m-1"
105 |           />
106 |         </div>
107 |       </div>
108 | 
109 |       <!--Countdown Line-->
110 |       <div
111 |         v-if="timer"
112 |         class="absolute justify-center items-center bottom-0 left-0 h-[.3rem] px-2 w-full"
113 |       >
114 |         <div
115 |           class="h-[.3rem] mx-auto"
116 |           :class="[GlobalStyles.radius[radius], Style[design][color].cdLine]"
117 |           :style="{ width: countDownCounter + '%' }"
118 |         ></div>
119 |       </div>
120 |     </div>
121 |   </transition>
122 | </template>
123 | <script>
124 | /* Main Functions */
125 | import {
126 |   defineComponent,
127 |   inject,
128 |   onBeforeMount,
129 |   ref,
130 |   toRefs,
131 |   watch,
132 | } from "vue";
133 | 
134 | /*Components*/
135 | import CircleXMark from "@/lib-components/Icons/CircleXMark";
136 | 
137 | /*Sources*/
138 | import GlobalStyles from "@/lib-components/GlobalStyles.json";
139 | import Style from "./Style.json";
140 | 
141 | export default defineComponent({
142 |   name: "TAlert",
143 |   components: {
144 |     CircleXMark,
145 |   },
146 |   props: {
147 |     id: {
148 |       type: [Number, String, Array, Object, Date, Boolean],
149 |       default: function () {
150 |         return "alert-" + Number(new Date());
151 |       },
152 |     },
153 |     closeable: {
154 |       type: Boolean,
155 |       default: false,
156 |     },
157 |     timerStatus: {
158 |       type: Boolean,
159 |       default: false,
160 |     },
161 |     timer: {
162 |       type: Number,
163 |       default: null,
164 |     },
165 |     title: {
166 |       type: String,
167 |       default: "",
168 |     },
169 |     message: {
170 |       type: String,
171 |       default: "",
172 |     },
173 |     type: {
174 |       type: String,
175 |       default: null,
176 |     },
177 |     radius: {
178 |       type: String,
179 |       default: "md",
180 |     },
181 |     design: {
182 |       type: String,
183 |       default: "filled",
184 |     },
185 |     color: {
186 |       type: String,
187 |       default: "rose",
188 |     },
189 |     block: {
190 |       type: Boolean,
191 |       default: false,
192 |     },
193 |   },
194 |   emits: ["destroy"],
195 |   setup(props, { slots, emit }) {
196 |     /*Definitions*/
197 |     const { design, color, radius, closeable, timerStatus, timer, id } =
198 |       toRefs(props);
199 |     const showAlertBox = ref(true);
200 | 
201 |     /*Close Function*/
202 |     const close = () => {
203 |       showAlertBox.value = false;
204 |       emit("destroy", id.value);
205 |     };
206 |     /*Timer*/
207 |     const timerCounter = ref(0);
208 |     const countDownCounter = ref(0);
209 |     const timerFN = () => {
210 |       /*Timer Function*/
211 |       setTimeout(() => {
212 |         showAlertBox.value = false;
213 |         emit("destroy", id.value);
214 |       }, timer.value);
215 |       /*Count Down Function*/
216 |       let countDownFn = setInterval(() => {
217 |         if (timer.value >= timerCounter.value) {
218 |           countDownCounter.value =
219 |             100 - (timerCounter.value / timer.value) * 100;
220 |           timerCounter.value += 4;
221 |         } else {
222 |           clearInterval(countDownFn);
223 |         }
224 |       }, 1);
225 |     };
226 | 
227 |     onBeforeMount(() => {
228 |       if (timerStatus.value) {
229 |         timerFN();
230 |       }
231 |     });
232 | 
233 |     watch(timerStatus, (newValue, oldValue) => {
234 |       if (timerStatus.value && !oldValue && newValue > 0) {
235 |         timerFN();
236 |       }
237 |     });
238 | 
239 |     /*Slot Check*/
240 |     const hasSlot = (name) => !!slots[name];
241 |     return {
242 |       GlobalStyles,
243 |       Style,
244 |       showAlertBox,
245 |       countDownCounter,
246 |       timerCounter,
247 |       hasSlot,
248 |       close,
249 |     };
250 |   },
251 | });
252 | </script>
253 | 
254 | <style scoped>
255 | /* eslint-disable no-alert */
256 | .alert-enter-active,
257 | .alert-leave-active {
258 |   transition: all ease-in-out 1000ms;
259 | }
260 | 
261 | .alert-enter-from,
262 | .alert-leave-to {
263 |   opacity: 0;
264 | }
265 | 
266 | .alert-enter-to,
267 | .alert-leave-from {
268 |   opacity: 1;
269 | }
270 | 
271 | /* eslint-disable no-alert */
272 | </style>
273 | 


--------------------------------------------------------------------------------
/src/lib-components/Button/Button.md:
--------------------------------------------------------------------------------
 1 | # Button
 2 | 
 3 | | Prop         | Type    | Default | Options                                 | Description              |
 4 | |--------------|---------|---------|-----------------------------------------|--------------------------|
 5 | | title        | String  |         |                                         | Button text              |
 6 | | size         | String  | md      | sm, md, lg                              | Inactive yet             |
 7 | | design       | String  | filled  | filled, light, outline, link, link-plus | Button style             |
 8 | | color        | String  | blue    | All Colors of TailwindCSS V3            | Color schema             |
 9 | | radius       | String  | md      | sm, md, lg, xl, 2xl, full               | Radius of the corners    |
10 | | link         | String  |         | What If you want                        | Inactive yet             |
11 | | border       | Boolean | false   | true, false                             |                          |
12 | | disabled     | Boolean | false   | true, false                             |                          |
13 | | loading      | Boolean | false   | true, false                             | Show a loading animation |
14 | | type         | String  | submit  | submit, reset, button                   |                          |
15 | | animation    | Boolean | true    | true, false                             | Scale animation to click |
16 | | iconPosition | String  | left    | left, right                             |                          |
17 | | block        | Boolean | false   |                                         | Full width button        |
18 | 
19 | | Slot | Description                |
20 | |------|----------------------------|
21 | | icon | Showing icon in the button |


--------------------------------------------------------------------------------
/src/lib-components/Button/Style.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "base": "relative flex items-center py-2 text-sm font-medium duration-200",
  3 |   "filled" : {
  4 |     "base": "text-white active:text-white disabled:bg-gray-500 disabled:text-slate-300",
  5 |     "slate" : "bg-slate-500 hover:bg-slate-200 active:bg-slate-500 hover:text-slate-700 border-slate-500",
  6 |     "gray" : "bg-gray-500 hover:bg-gray-200 active:bg-gray-500 hover:text-gray-700 border-gray-500",
  7 |     "zinc" : "bg-zinc-500 hover:bg-zinc-200 active:bg-zinc-500 hover:text-zinc-700 border-zinc-500",
  8 |     "neutral" : "bg-neutral-500 hover:bg-neutral-200 active:bg-neutral-500 hover:text-neutral-700 border-neutral-500",
  9 |     "stone" : "bg-stone-500 hover:bg-stone-200 active:bg-stone-500 hover:text-stone-700 border-stone-500",
 10 |     "red" : "bg-red-500 hover:bg-red-200 active:bg-red-500 hover:text-red-700 border-red-500",
 11 |     "orange" : "bg-orange-500 hover:bg-orange-200 active:bg-orange-500 hover:text-orange-700 border-orange-500",
 12 |     "amber" : "bg-amber-500 hover:bg-amber-200 active:bg-amber-500 hover:text-amber-700 border-amber-500",
 13 |     "yellow" : "bg-yellow-500 hover:bg-yellow-200 active:bg-yellow-500  hover:text-yellow-700active:bg-yellow-500 border-yellow-500",
 14 |     "lime" : "bg-lime-500 hover:bg-lime-200 active:bg-lime-500 hover:text-lime-700 border-lime-500",
 15 |     "green" : "bg-green-500 hover:bg-green-200 active:bg-green-500 hover:text-green-700 border-green-500",
 16 |     "emerald" : "bg-emerald-500 hover:bg-emerald-200 active:bg-emerald-500 hover:text-emerald-700 border-emerald-500",
 17 |     "teal" : "bg-teal-500 hover:bg-teal-200 active:bg-teal-500 hover:text-teal-700 border-teal-500",
 18 |     "cyan" : "bg-cyan-500 hover:bg-cyan-200 active:bg-cyan-500 hover:text-cyan-700 border-cyan-500",
 19 |     "sky" : "bg-sky-500 hover:bg-sky-200 active:bg-sky-500 hover:text-sky-700 border-sky-500",
 20 |     "blue" : "bg-blue-500 hover:bg-blue-200 active:bg-blue-500 hover:text-blue-700 border-blue-500",
 21 |     "indigo" : "bg-indigo-500 hover:bg-indigo-200 active:bg-indigo-500 hover:text-indigo-700 border-indigo-500",
 22 |     "violet" : "bg-violet-500 hover:bg-violet-200 active:bg-violet-500 hover:text-violet-700 border-violet-500",
 23 |     "purple" : "bg-purple-500 hover:bg-purple-200 active:bg-purple-500 hover:text-purple-700 border-purple-500",
 24 |     "fuchsia" : "bg-fuchsia-500 hover:bg-fuchsia-200 active:bg-fuchsia-500 hover:text-fuchsia-700 border-fuchsia-500",
 25 |     "pink" : "bg-pink-500 hover:bg-pink-200 active:bg-pink-500 hover:text-pink-700 border-pink-500",
 26 |     "rose" : "bg-rose-500 hover:bg-rose-200 active:bg-rose-500 hover:text-rose-700 border-rose-500"
 27 |   },
 28 |   "light" : {
 29 |     "base": "hover:text-white disabled:bg-gray-400 disabled:text-slate-600",
 30 |     "slate" : "bg-slate-200 text-slate-700 hover:bg-slate-500 active:bg-slate-200 active:text-slate-700 border-slate-500",
 31 |     "gray" : "bg-gray-200 text-gray-700 hover:bg-gray-500 active:bg-gray-200 active:text-gray-700 border-gray-500",
 32 |     "zinc" : "bg-zinc-200 text-zinc-700 hover:bg-zinc-500 active:bg-zinc-200 active:text-zinc-700  border-zinc-500",
 33 |     "neutral" : "bg-neutral-200 text-neutral-700 hover:bg-neutral-500 active:bg-neutral-200 active:text-neutral-700 border-neutral-500",
 34 |     "stone" : "bg-stone-200 text-stone-700 hover:bg-stone-500 active:bg-stone-200 active:text-stone-700 border-stone-500",
 35 |     "red" : "bg-red-200 text-red-700 hover:bg-red-500 active:bg-red-200 active:text-red-700 border-red-500",
 36 |     "orange" : "bg-orange-200 text-orange-700 hover:bg-orange-500 active:bg-orange-200 active:text-orange-700 border-orange-500",
 37 |     "amber" : "bg-amber-200 text-amber-700 hover:bg-amber-500 active:bg-amber-200 active:text-amber-700 border-amber-500",
 38 |     "yellow" : "bg-yellow-200 text-yellow-700 hover:bg-yellow-500 active:bg-yellow-200 active:text-yellow-700 :bg-yellow-500 border-yellow-500",
 39 |     "lime" : "bg-lime-200 text-lime-700 hover:bg-lime-500 active:bg-lime-200 active:text-lime-700 border-lime-500",
 40 |     "green" : "bg-green-200 text-green-700 hover:bg-green-500 active:bg-green-200 active:text-green-700 border-green-500",
 41 |     "emerald" : "bg-emerald-200 text-emerald-700 hover:bg-emerald-500 active:bg-emerald-200 active:text-emerald-700 border-emerald-500",
 42 |     "teal" : "bg-teal-200 text-teal-700 hover:bg-teal-500 active:bg-teal-200 active:text-teal-700 border-teal-500",
 43 |     "cyan" : "bg-cyan-200 text-cyan-700 hover:bg-cyan-500 active:bg-cyan-200 active:text-cyan-700 border-cyan-500",
 44 |     "sky" : "bg-sky-200 text-sky-700 hover:bg-sky-500 active:bg-sky-200 active:text-sky-700 border-sky-500",
 45 |     "blue" : "bg-blue-200 text-blue-700 hover:bg-blue-500 active:bg-blue-200 active:text-blue-700 border-blue-500",
 46 |     "indigo" : "bg-indigo-200 text-indigo-700 hover:bg-indigo-500 active:bg-indigo-200 active:text-indigo-700 border-indigo-500",
 47 |     "violet" : "bg-violet-200 text-violet-700 hover:bg-violet-500 active:bg-violet-200 active:text-violet-700 border-violet-500",
 48 |     "purple" : "bg-purple-200 text-purple-700 hover:bg-purple-500 active:bg-purple-200 active:text-purple-700 border-purple-500",
 49 |     "fuchsia" : "bg-fuchsia-200 text-fuchsia-700 hover:bg-fuchsia-500 active:bg-fuchsia-200 active:text-fuchsia-700 border-fuchsia-500",
 50 |     "pink" : "bg-pink-200 text-pink-700 hover:bg-pink-500 active:bg-pink-200 active:text-pink-700 border-pink-500",
 51 |     "rose" : "bg-rose-200 text-rose-700 hover:bg-rose-500 active:bg-rose-200 active:text-rose-700 border-rose-500"
 52 |   },
 53 |   "outline" : {
 54 |     "base": "hover:text-white active:bg-transparent disabled:border-slate-500 disabled:text-slate-500",
 55 |     "slate" : "text-slate-500 hover:bg-slate-500 active:text-slate-500 border-slate-500",
 56 |     "gray" : "text-gray-500 hover:bg-gray-500 active:text-gray-500 border-gray-500",
 57 |     "zinc" : "text-zinc-500 hover:bg-zinc-500 active:text-zinc-500 border-zinc-500",
 58 |     "neutral" : "text-neutral-500 hover:bg-neutral-500 active:text-neutral-500 border-neutral-500",
 59 |     "stone" : "text-stone-500 hover:bg-stone-500 active:text-stone-500 border-stone-500",
 60 |     "red" : "text-red-500 hover:bg-red-500 active:text-red-500 border-red-500",
 61 |     "orange" : "text-orange-500 hover:bg-orange-500 active:text-orange-500 border-orange-500",
 62 |     "amber" : "text-amber-500 hover:bg-amber-500 active:text-amber-500 border-amber-500",
 63 |     "yellow" : "text-yellow-500 hover:bg-yellow-500 active:text-yellow-500 :bg-yellow-500 border-yellow-500",
 64 |     "lime" : "text-lime-500 hover:bg-lime-500 active:text-lime-500 border-lime-500",
 65 |     "green" : "text-green-500 hover:bg-green-500 active:text-green-500 border-green-500",
 66 |     "emerald" : "text-emerald-500 hover:bg-emerald-500 active:text-emerald-500 border-emerald-500",
 67 |     "teal" : "text-teal-500 hover:bg-teal-500 active:text-teal-500 border-teal-500",
 68 |     "cyan" : "text-cyan-500 hover:bg-cyan-500 active:text-cyan-500 border-cyan-500",
 69 |     "sky" : "text-sky-500 hover:bg-sky-500 active:text-sky-500 border-sky-500",
 70 |     "blue" : "text-blue-500 hover:bg-blue-500 active:text-blue-500 border-blue-500",
 71 |     "indigo" : "text-indigo-500 hover:bg-indigo-500 active:text-indigo-500 border-indigo-500",
 72 |     "violet" : "text-violet-500 hover:bg-violet-500 active:text-violet-500 border-violet-500",
 73 |     "purple" : "text-purple-500 hover:bg-purple-500 active:text-purple-500 border-purple-500",
 74 |     "fuchsia" : "text-fuchsia-500 hover:bg-fuchsia-500 active:text-fuchsia-500 border-fuchsia-500",
 75 |     "pink" : "text-pink-500 hover:bg-pink-500 active:text-pink-500 border-pink-500",
 76 |     "rose" : "text-rose-500 hover:bg-rose-500 active:text-rose-500 border-rose-500"
 77 |   },
 78 |   "link" : {
 79 |     "base": "text-slate-700 hover:underline dark:text-slate-200 disabled:text-slate-600",
 80 |     "slate" : "hover:text-slate-500 active:text-slate-700",
 81 |     "gray" : "hover:text-gray-500 active:text-gray-700",
 82 |     "zinc" : "hover:text-zinc-500 active:text-zinc-700",
 83 |     "neutral" : "hover:text-neutral-500 active:text-neutral-700",
 84 |     "stone" : "hover:text-stone-500 active:text-stone-700",
 85 |     "red" : "hover:text-red-500 active:text-red-700",
 86 |     "orange" : "hover:text-orange-500 active:text-orange-700",
 87 |     "amber" : "hover:text-amber-500 active:text-amber-700",
 88 |     "yellow" : "hover:text-yellow-500 active:text-yellow-700",
 89 |     "lime" : "hover:text-lime-500 active:text-lime-700",
 90 |     "green" : "hover:text-green-500 active:text-green-700",
 91 |     "emerald" : "hover:text-emerald-500 active:text-emerald-700",
 92 |     "teal" : "hover:text-teal-500 active:text-teal-700",
 93 |     "cyan" : "hover:text-cyan-500 active:text-cyan-700",
 94 |     "sky" : "hover:text-sky-500 active:text-sky-700",
 95 |     "blue" : "hover:text-blue-500 active:text-blue-700",
 96 |     "indigo" : "hover:text-indigo-500 active:text-indigo-700",
 97 |     "violet" : "hover:text-violet-500 active:text-violet-700",
 98 |     "purple" : "hover:text-purple-500 active:text-purple-700",
 99 |     "fuchsia" : "hover:text-fuchsia-500 active:text-fuchsia-700",
100 |     "pink" : "hover:text-pink-500 active:text-pink-700",
101 |     "rose" : "hover:text-rose-500 active:text-rose-700"
102 |   },
103 |   "link-plus" : {
104 |     "base": "text-slate-700 dark:text-slate-200 hover:text-white hover:underline active:bg-transparent disabled:text-slate-600",
105 |     "slate" : "hover:bg-slate-500 active:text-slate-700",
106 |     "gray" : "hover:bg-gray-500 active:text-gray-700",
107 |     "zinc" : "hover:bg-zinc-500 active:text-zinc-700",
108 |     "neutral" : "hover:bg-neutral-500 active:text-neutral-700",
109 |     "stone" : "hover:bg-stone-500 active:text-stone-700",
110 |     "red" : "hover:bg-red-500 active:text-red-700",
111 |     "orange" : "hover:bg-orange-500 active:text-orange-700",
112 |     "amber" : "hover:bg-amber-500 active:text-amber-700",
113 |     "yellow" : "hover:bg-yellow-500 active:text-yellow-700",
114 |     "lime" : "hover:bg-lime-500 active:text-lime-700",
115 |     "green" : "hover:bg-green-500 active:text-green-700",
116 |     "emerald" : "hover:bg-emerald-500 active:text-emerald-700",
117 |     "teal" : "hover:bg-teal-500 active:text-teal-700",
118 |     "cyan" : "hover:bg-cyan-500 active:text-cyan-700",
119 |     "sky" : "hover:bg-sky-500 active:text-sky-700",
120 |     "blue" : "hover:bg-blue-500 active:text-blue-700",
121 |     "indigo" : "hover:bg-indigo-500 active:text-indigo-700",
122 |     "violet" : "hover:bg-violet-500 active:text-violet-700",
123 |     "purple" : "hover:bg-purple-500 active:text-purple-700",
124 |     "fuchsia" : "hover:bg-fuchsia-500 active:text-fuchsia-700",
125 |     "pink" : "hover:bg-pink-500 active:text-pink-700",
126 |     "rose" : "hover:bg-rose-500 active:text-rose-700"
127 |   }
128 | }


--------------------------------------------------------------------------------
/src/lib-components/Button/TButton.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <!--Button-->
  3 |   <button
  4 |     :type="type"
  5 |     :disabled="disabled"
  6 |     :read-only="loading"
  7 |     :class="[
  8 |       TStyle.base,
  9 |       TStyle[design].base,
 10 |       TStyle[design][color],
 11 |       GlobalStyles.radius[radius],
 12 |       { border: border || design === 'outline' },
 13 |       { 'border-0': design.includes('link') },
 14 |       { 'opacity-75 pointer-events-none': loading || disabled },
 15 |       [$slots.default ? 'px-4' : 'px-2'],
 16 |       { 'active:scale-90': animation },
 17 |       [iconPosition === 'right' ? 'flex-row-reverse' : 'flex-row'],
 18 |       { 'w-full justify-center': block },
 19 |     ]"
 20 |   >
 21 |     <div class="flex flex-grow-0 flex-shrink-0">
 22 |       <!--Loading Animation-->
 23 |       <component
 24 |         :is="loadingComponent"
 25 |         v-if="loading"
 26 |         class="w-5 h-5"
 27 |         :class="
 28 |           $slots.default
 29 |             ? iconPosition === 'right'
 30 |               ? 'ml-2'
 31 |               : '-ml-2 mr-2'
 32 |             : null
 33 |         "
 34 |       />
 35 | 
 36 |       <!--Icon-->
 37 |       <span
 38 |         v-if="$slots.icon && !loading"
 39 |         :class="
 40 |           $slots.default ? (iconPosition === 'right' ? 'pl-2' : 'pr-2') : null
 41 |         "
 42 |       >
 43 |         <slot name="icon"></slot>
 44 |       </span>
 45 |     </div>
 46 | 
 47 |     <!--Content-->
 48 |     <div
 49 |       v-if="$slots.default || title"
 50 |       :class="[
 51 |         { 'text-2xl': size === '2xl' },
 52 |         { 'text-xl': size === 'xl' },
 53 |         { 'text-lg': size === 'lg' },
 54 |         { 'text-md': size === 'md' },
 55 |         { 'text-xs': size === 'sm' },
 56 |       ]"
 57 |     >
 58 |       <span v-if="title" v-text="title"></span>
 59 |       <slot v-else></slot>
 60 |     </div>
 61 |   </button>
 62 |   <!--Custom-->
 63 | </template>
 64 | 
 65 | <script>
 66 | import { toRefs, reactive, computed, shallowRef } from "vue";
 67 | import { default as Style } from "./Style.json";
 68 | import GlobalStyles from "../GlobalStyles.json";
 69 | import TCircleLoadingAnimation from "../LoadingAnimation/TCircleLoadingAnimation";
 70 | 
 71 | export default {
 72 |   name: "TButton",
 73 | 
 74 |   props: {
 75 |     title: {
 76 |       type: String,
 77 |       default: "",
 78 |     },
 79 |     size: {
 80 |       type: String,
 81 |       default: "md",
 82 |     },
 83 |     design: {
 84 |       type: String,
 85 |       default: "filled",
 86 |     },
 87 |     color: {
 88 |       type: String,
 89 |       default: "blue",
 90 |     },
 91 |     radius: {
 92 |       type: String,
 93 |       default: "md",
 94 |     },
 95 |     link: {
 96 |       type: String,
 97 |       default: "",
 98 |     },
 99 |     border: {
100 |       type: Boolean,
101 |       default: false,
102 |     },
103 |     disabled: {
104 |       type: Boolean,
105 |       default: false,
106 |     },
107 |     loading: {
108 |       type: Boolean,
109 |       default: false,
110 |     },
111 |     loadingDesign: {
112 |       type: String,
113 |       default: "three-bars",
114 |     },
115 |     type: {
116 |       type: String,
117 |       default: "submit",
118 |     },
119 |     animation: {
120 |       type: Boolean,
121 |       default: true,
122 |     },
123 |     iconPosition: {
124 |       type: String,
125 |       default: "left",
126 |     },
127 |     block: {
128 |       type: Boolean,
129 |       default: false,
130 |     },
131 |   },
132 | 
133 |   components: {
134 |     TCircleLoadingAnimation,
135 |   },
136 | 
137 |   setup(props) {
138 |     const TStyle = Style;
139 |     /*Definitions*/
140 |     const { loadingDesign } = toRefs(props);
141 | 
142 |     /*Loading Component*/
143 |     const loadingComponent = shallowRef();
144 |     switch (loadingDesign.value) {
145 |       case "circle":
146 |         loadingComponent.value = "TCircleLoadingAnimation";
147 |         break;
148 |       default:
149 |         loadingComponent.value = "TCircleLoadingAnimation";
150 |     }
151 | 
152 |     /*Return*/
153 |     return { TStyle, GlobalStyles, loadingComponent };
154 |   },
155 | };
156 | </script>
157 | 
158 | <style scoped>
159 | .btn {
160 |   @apply bg-red-500;
161 | }
162 | </style>
163 | 


--------------------------------------------------------------------------------
/src/lib-components/ContentCard/Style.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "vertical" : {
 3 |     "container" : "p-4"
 4 |   },
 5 |   "horizontal" : {
 6 |     "container" : "p-4"
 7 |   },
 8 | 
 9 |   "horizontal-banner" : {
10 |     "container" :  "flex-row overflow-hidden",
11 |     "header" : "px-4 py-2",
12 |     "content" : "px-4 pb-4",
13 |     "img" : "w-40 aspect-[9/16]"
14 |   },
15 |   "vertical-banner" : {
16 |     "container" :  "flex-col overflow-hidden",
17 |     "header" : "px-4 py-2",
18 |     "content" : "px-4 pb-4",
19 |     "img" : "w-full aspect-[16/9] h-[14rem] object-cover"
20 |   }
21 | }


--------------------------------------------------------------------------------
/src/lib-components/ContentCard/TContentCard.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <!--Container-->
  3 |   <div
  4 |     class="relative flex flex-grow bg-white dark:bg-slate-700/10 w-full border dark:border-slate-700"
  5 |     :class="[Style[design].container, GlobalStyle.radius[radius]]"
  6 |   >
  7 |     <!--Image-->
  8 | 
  9 |     <img
 10 |       v-if="design.includes('banner')"
 11 |       :src="imgSrc"
 12 |       :alt="imgAltText"
 13 |       :class="Style[design].img"
 14 |     />
 15 | 
 16 |     <div
 17 |       class="flex min-w-[10rem] w-full"
 18 |       :class="[
 19 |         {
 20 |           'flex-row': design === 'horizontal',
 21 |           'flex-col': design === 'vertical' || design.includes('banner'),
 22 |         },
 23 |       ]"
 24 |     >
 25 |       <!--Header-->
 26 |       <div
 27 |         class="flex w-full"
 28 |         :class="[
 29 |           Style[design].header,
 30 |           {
 31 |             'mb-2': showContent,
 32 |             'items-center text-center': titlePosition === 'center',
 33 |             'justify-between': titlePosition !== 'center',
 34 |             'flex-col w-1/2': design === 'horizontal',
 35 |           },
 36 |         ]"
 37 |       >
 38 |         <!--Titles-->
 39 |         <div class="flex flex-col flex-grow">
 40 |           <!--Title-->
 41 |           <div v-if="title || $slots.hasOwnProperty('title')">
 42 |             <h3
 43 |               v-if="title"
 44 |               class="font-bold mb-2 text-slate-700 dark:text-slate-200"
 45 |               :class="[GlobalStyle.textSize[titleSize]]"
 46 |             >
 47 |               {{ title }}
 48 |             </h3>
 49 |             <slot v-else name="title"></slot>
 50 |           </div>
 51 |           <!--Subtitle-->
 52 |           <div v-if="subtitle || $slots.hasOwnProperty('sub-title')">
 53 |             <p
 54 |               v-if="subtitle"
 55 |               class="-mt-1 text-slate-500 dark:text-slate-400 -mt-2"
 56 |               :class="[GlobalStyle.textSize[subtitleSize]]"
 57 |             >
 58 |               {{ subtitle }}
 59 |             </p>
 60 |             <slot v-else name="sub-title"></slot>
 61 |           </div>
 62 |         </div>
 63 |         <!--Top Actions Area-->
 64 |         <div
 65 |           class="flex items-center space-x-2 text-slate-700 dark:text-slate-200"
 66 |         >
 67 |           <slot v-if="titlePosition !== 'center'" name="top-actions" />
 68 | 
 69 |           <!--Show Hide Trigger-->
 70 |           <div
 71 |             v-if="collapsible"
 72 |             class="bg-slate-200 dark:bg-slate-700 rounded-full p-1 cursor-pointer"
 73 |             @click="showContent = !showContent"
 74 |             :class="[{ 'absolute right-6': titlePosition === 'center' }]"
 75 |           >
 76 |             <ChevronDownIcon
 77 |               class="w-4 h-4 transition-all"
 78 |               :class="[
 79 |                 {
 80 |                   'rotate-90': !showContent,
 81 |                 },
 82 |               ]"
 83 |             />
 84 |           </div>
 85 |         </div>
 86 |       </div>
 87 | 
 88 |       <!--Content Wrapper-->
 89 |       <transition name="content">
 90 |         <div v-show="showContent" class="flex flex-col w-full h-full">
 91 |           <!--Content-->
 92 |           <div
 93 |             :class="[Style[design].content]"
 94 |             class="flex flex-grow text-slate-700 dark:text-slate-200 transition-all duration-500 overflow-hidden"
 95 |           >
 96 |             <slot></slot>
 97 |           </div>
 98 | 
 99 |           <!--Footer-->
100 |           <div
101 |             v-if="$slots.hasOwnProperty('footer')"
102 |             class="flex space-x-2 mt-4 transition-all duration-500"
103 |             :class="[
104 |               {
105 |                 'justify-end': footerPosition === 'right',
106 |                 'justify-start': footerPosition === 'left',
107 |                 'justify-center': footerPosition === 'center',
108 |               },
109 |             ]"
110 |           >
111 |             <slot name="footer"></slot>
112 |           </div>
113 |         </div>
114 |       </transition>
115 |     </div>
116 |   </div>
117 | </template>
118 | 
119 | <script>
120 | /*Functions*/
121 | import { ref } from "vue";
122 | import { useFullscreen } from "@vueuse/core";
123 | 
124 | /*Sources*/
125 | import GlobalStyle from "@/lib-components/GlobalStyles.json";
126 | import Style from "./Style.json";
127 | import ChevronDownIcon from "@/lib-components/Icons/ChevronDownIcon";
128 | 
129 | export default {
130 |   name: "TContentCard",
131 |   components: { ChevronDownIcon },
132 |   props: {
133 |     title: {
134 |       type: String,
135 |       default: "",
136 |     },
137 |     subtitle: {
138 |       type: String,
139 |       default: "",
140 |     },
141 |     titlePosition: {
142 |       type: String,
143 |       default: "left",
144 |     },
145 |     titleSize: {
146 |       type: String,
147 |       default: "xl",
148 |     },
149 |     subtitleSize: {
150 |       type: String,
151 |       default: "sm",
152 |     },
153 |     design: {
154 |       type: String,
155 |       default: "vertical",
156 |     },
157 |     radius: {
158 |       type: String,
159 |       default: "md",
160 |     },
161 |     imgSrc: {
162 |       type: String,
163 |       default: "",
164 |     },
165 |     imgAltText: {
166 |       type: String,
167 |       default: "",
168 |     },
169 |     collapsible: {
170 |       type: Boolean,
171 |       default: false,
172 |     },
173 |     footerPosition: {
174 |       type: String,
175 |       default: "right",
176 |     },
177 |   },
178 | 
179 |   setup() {
180 |     /*Show Content*/
181 |     const showContent = ref(true);
182 | 
183 |     /*Fullscreen*/
184 |     const { isFullscreen, toggle } = useFullscreen();
185 | 
186 |     return {
187 |       GlobalStyle,
188 |       Style,
189 |       showContent,
190 |       isFullscreen,
191 |       toggle,
192 |     };
193 |   },
194 | };
195 | </script>
196 | 
197 | <style scoped>
198 | .content-enter-active,
199 | .content-leave-active {
200 |   transition: all 0.3s linear;
201 | }
202 | 
203 | .content-enter-from,
204 | .content-leave-to {
205 |   opacity: 0;
206 |   max-height: 0;
207 | }
208 | 
209 | .content-enter-to,
210 | .content-leave-from {
211 |   opacity: 1;
212 |   max-height: 100vh;
213 | }
214 | </style>
215 | 


--------------------------------------------------------------------------------
/src/lib-components/GlobalStyles.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "grid": {
 3 |     "gridSm": {
 4 |       "null": null,
 5 |       "1": "grid-cols-1",
 6 |       "2": "grid-cols-2",
 7 |       "3": "grid-cols-3",
 8 |       "4": "grid-cols-4",
 9 |       "5": "grid-cols-5",
10 |       "6": "grid-cols-6",
11 |       "7": "grid-cols-7",
12 |       "8": "grid-cols-8",
13 |       "9": "grid-cols-9",
14 |       "10": "grid-cols-10",
15 |       "11": "grid-cols-11",
16 |       "12": "grid-cols-12"
17 |     },
18 |     "gridMd": {
19 |       "null": null,
20 |       "1": "md:grid-cols-1",
21 |       "2": "md:grid-cols-2",
22 |       "3": "md:grid-cols-3",
23 |       "4": "md:grid-cols-4",
24 |       "5": "md:grid-cols-5",
25 |       "6": "md:grid-cols-6",
26 |       "7": "md:grid-cols-7",
27 |       "8": "md:grid-cols-8",
28 |       "9": "md:grid-cols-9",
29 |       "10": "md:grid-cols-10",
30 |       "11": "md:grid-cols-11",
31 |       "12": "md:grid-cols-12"
32 |     },
33 |     "gridLg": {
34 |       "null": null,
35 |       "1": "lg:grid-cols-1",
36 |       "2": "lg:grid-cols-2",
37 |       "3": "lg:grid-cols-3",
38 |       "4": "lg:grid-cols-4",
39 |       "5": "lg:grid-cols-5",
40 |       "6": "lg:grid-cols-6",
41 |       "7": "lg:grid-cols-7",
42 |       "8": "lg:grid-cols-8",
43 |       "9": "lg:grid-cols-9",
44 |       "10": "lg:grid-cols-10",
45 |       "11": "lg:grid-cols-11",
46 |       "12": "lg:grid-cols-12"
47 |     },
48 |     "gridXl": {
49 |       "null": null,
50 |       "1": "xl:grid-cols-1",
51 |       "2": "xl:grid-cols-2",
52 |       "3": "xl:grid-cols-3",
53 |       "4": "xl:grid-cols-4",
54 |       "5": "xl:grid-cols-5",
55 |       "6": "xl:grid-cols-6",
56 |       "7": "xl:grid-cols-7",
57 |       "8": "xl:grid-cols-8",
58 |       "9": "xl:grid-cols-9",
59 |       "10": "xl:grid-cols-10",
60 |       "11": "xl:grid-cols-11",
61 |       "12": "xl:grid-cols-12"
62 |     }
63 |   },
64 |   "radius": {
65 |     "sm": "rounded-sm",
66 |     "md": "rounded-md",
67 |     "lg": "rounded-lg",
68 |     "xl": "rounded-xl",
69 |     "2xl": "rounded-2xl",
70 |     "full": "rounded-full"
71 |   },
72 |   "textSize": {
73 |     "sm": "text-sm",
74 |     "md": "text-md",
75 |     "lg": "text-lg",
76 |     "xl": "text-xl",
77 |     "2xl": "text-2xl",
78 |     "3xl": "text-3xl",
79 |     "4xl": "text-4xl",
80 |     "5xl": "text-5xl",
81 |     "6xl": "text-6xl",
82 |     "7xl": "text-7xl"
83 |   }
84 | }


--------------------------------------------------------------------------------
/src/lib-components/Icons/ChevronDownIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: "ChevronDownIcon"
 8 | };
 9 | </script>
10 | 
11 | <style scoped>
12 | 
13 | </style>


--------------------------------------------------------------------------------
/src/lib-components/Icons/CircleCheckIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM371.8 211.8C382.7 200.9 382.7 183.1 371.8 172.2C360.9 161.3 343.1 161.3 332.2 172.2L224 280.4L179.8 236.2C168.9 225.3 151.1 225.3 140.2 236.2C129.3 247.1 129.3 264.9 140.2 275.8L204.2 339.8C215.1 350.7 232.9 350.7 243.8 339.8L371.8 211.8z"/></svg>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: "CircleCheckIcon"
 8 | };
 9 | </script>
10 | 
11 | <style scoped>
12 | 
13 | </style>


--------------------------------------------------------------------------------
/src/lib-components/Icons/CircleExclamationIcon.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM232 152C232 138.8 242.8 128 256 128s24 10.75 24 24v128c0 13.25-10.75 24-24 24S232 293.3 232 280V152zM256 400c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 385.9 273.4 400 256 400z"/></svg>
3 | </template>
4 | 
5 | <script>
6 | export default {
7 |   name: "CircleExclamationIcon"
8 | }
9 | </script>


--------------------------------------------------------------------------------
/src/lib-components/Icons/CircleMinusIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM168 232C154.7 232 144 242.7 144 256C144 269.3 154.7 280 168 280H344C357.3 280 368 269.3 368 256C368 242.7 357.3 232 344 232H168z"/></svg>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: "CircleMinusIcon"
 8 | };
 9 | </script>
10 | 
11 | <style scoped>
12 | 
13 | </style>


--------------------------------------------------------------------------------
/src/lib-components/Icons/CircleXMark.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     fill="currentColor"
 4 |     xmlns="http://www.w3.org/2000/svg"
 5 |     viewBox="0 0 512 512"
 6 |   >
 7 |     <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
 8 |     <path
 9 |       d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM175 208.1L222.1 255.1L175 303C165.7 312.4 165.7 327.6 175 336.1C184.4 346.3 199.6 346.3 208.1 336.1L255.1 289.9L303 336.1C312.4 346.3 327.6 346.3 336.1 336.1C346.3 327.6 346.3 312.4 336.1 303L289.9 255.1L336.1 208.1C346.3 199.6 346.3 184.4 336.1 175C327.6 165.7 312.4 165.7 303 175L255.1 222.1L208.1 175C199.6 165.7 184.4 165.7 175 175C165.7 184.4 165.7 199.6 175 208.1V208.1z"
10 |     />
11 |   </svg>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   name: "CircleXMark",
17 | };
18 | </script>
19 | 


--------------------------------------------------------------------------------
/src/lib-components/Icons/ExpandIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     fill="currentColor"
 4 |     xmlns="http://www.w3.org/2000/svg"
 5 |     viewBox="0 0 448 512"
 6 |   >
 7 |     <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
 8 |     <path
 9 |       d="M128 32H32C14.31 32 0 46.31 0 64v96c0 17.69 14.31 32 32 32s32-14.31 32-32V96h64c17.69 0 32-14.31 32-32S145.7 32 128 32zM416 32h-96c-17.69 0-32 14.31-32 32s14.31 32 32 32h64v64c0 17.69 14.31 32 32 32s32-14.31 32-32V64C448 46.31 433.7 32 416 32zM128 416H64v-64c0-17.69-14.31-32-32-32s-32 14.31-32 32v96c0 17.69 14.31 32 32 32h96c17.69 0 32-14.31 32-32S145.7 416 128 416zM416 320c-17.69 0-32 14.31-32 32v64h-64c-17.69 0-32 14.31-32 32s14.31 32 32 32h96c17.69 0 32-14.31 32-32v-96C448 334.3 433.7 320 416 320z"
10 |     />
11 |   </svg>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   name: "ExpandIcon",
17 | };
18 | </script>
19 | 
20 | <style scoped></style>
21 | 


--------------------------------------------------------------------------------
/src/lib-components/Icons/MinimizeIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     fill="currentColor"
 4 |     xmlns="http://www.w3.org/2000/svg"
 5 |     viewBox="0 0 512 512"
 6 |   >
 7 |     <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
 8 |     <path
 9 |       d="M200 287.1H64c-12.94 0-24.62 7.797-29.56 19.75c-4.969 11.97-2.219 25.72 6.937 34.87l30.06 30.06l-62.06 62.07c-12.49 12.5-12.5 32.75-.0012 45.25l22.62 22.62c12.5 12.5 32.76 12.5 45.26 .0012l62.06-62.07l30.06 30.06c6.125 6.125 14.31 9.375 22.62 9.375c4.125 0 8.281-.7969 12.25-2.437c11.97-4.953 19.75-16.62 19.75-29.56V311.1C224 298.7 213.3 287.1 200 287.1zM312 224h135.1c12.94 0 24.62-7.797 29.56-19.75c4.969-11.97 2.219-25.72-6.937-34.87l-30.06-30.06l62.06-62.07c12.5-12.5 12.5-32.76 .0003-45.26l-22.62-22.62c-12.5-12.5-32.76-12.5-45.26-.0003l-62.06 62.07l-30.06-30.06c-9.156-9.141-22.87-11.84-34.87-6.937C295.8 39.39 288 51.06 288 64v135.1C288 213.3 298.7 224 312 224zM204.3 34.44C192.3 29.47 178.5 32.22 169.4 41.38L139.3 71.44L77.25 9.374C64.75-3.123 44.49-3.123 31.1 9.374l-22.63 22.63c-12.49 12.49-12.49 32.75 .0018 45.25l62.07 62.06L41.38 169.4C35.25 175.5 32 183.7 32 192c0 4.125 .7969 8.281 2.438 12.25C39.39 216.2 51.07 224 64 224h135.1c13.25 0 23.1-10.75 23.1-23.1V64C224 51.06 216.2 39.38 204.3 34.44zM440.6 372.7l30.06-30.06c9.141-9.156 11.84-22.88 6.938-34.87C472.6 295.8 460.9 287.1 448 287.1h-135.1c-13.25 0-23.1 10.75-23.1 23.1v135.1c0 12.94 7.797 24.62 19.75 29.56c11.97 4.969 25.72 2.219 34.87-6.937l30.06-30.06l62.06 62.06c12.5 12.5 32.76 12.5 45.26 .0002l22.62-22.62c12.5-12.5 12.5-32.76 .0002-45.26L440.6 372.7z"
10 |     />
11 |   </svg>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   name: "MinimizeIcon",
17 | };
18 | </script>
19 | 
20 | <style scoped></style>
21 | 


--------------------------------------------------------------------------------
/src/lib-components/Icons/TrashIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z"/></svg>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: "TrashIcon"
 8 | };
 9 | </script>
10 | 
11 | <style scoped>
12 | 
13 | </style>


--------------------------------------------------------------------------------
/src/lib-components/Icons/XMarkIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     fill="currentColor"
 4 |     xmlns="http://www.w3.org/2000/svg"
 5 |     viewBox="0 0 384 512"
 6 |   >
 7 |     <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
 8 |     <path
 9 |       d="M376.6 427.5c11.31 13.58 9.484 33.75-4.094 45.06c-5.984 4.984-13.25 7.422-20.47 7.422c-9.172 0-18.27-3.922-24.59-11.52L192 305.1l-135.4 162.5c-6.328 7.594-15.42 11.52-24.59 11.52c-7.219 0-14.48-2.438-20.47-7.422c-13.58-11.31-15.41-31.48-4.094-45.06l142.9-171.5L7.422 84.5C-3.891 70.92-2.063 50.75 11.52 39.44c13.56-11.34 33.73-9.516 45.06 4.094L192 206l135.4-162.5c11.3-13.58 31.48-15.42 45.06-4.094c13.58 11.31 15.41 31.48 4.094 45.06l-142.9 171.5L376.6 427.5z"
10 |     />
11 |   </svg>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   name: "XMarkIcon",
17 | };
18 | </script>
19 | 
20 | <style scoped></style>
21 | 


--------------------------------------------------------------------------------
/src/lib-components/Input/Style.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "inputGroup" : {
  3 |     "subLabelColors": {
  4 |       "base": "",
  5 |       "slate" : "text-slate-600",
  6 |       "gray" : "text-gray-600",
  7 |       "zinc" : "text-zinc-600",
  8 |       "neutral" : "text-neutral-600",
  9 |       "stone" : "text-stone-600",
 10 |       "red" : "text-red-600",
 11 |       "orange" : "text-orange-600",
 12 |       "amber" : "text-amber-600",
 13 |       "yellow" : "text-yellow-600",
 14 |       "lime" : "text-lime-600",
 15 |       "green" : "text-green-600",
 16 |       "emerald" : "text-emerald-600",
 17 |       "teal" : "text-teal-600",
 18 |       "cyan" : "text-cyan-600",
 19 |       "sky" : "text-sky-600",
 20 |       "blue" : "text-blue-600",
 21 |       "indigo" : "text-indigo-600",
 22 |       "violet" : "text-violet-600",
 23 |       "purple" : "text-purple-600",
 24 |       "fuchsia" : "text-fuchsia-600",
 25 |       "pink" : "text-pink-600",
 26 |       "rose" : "text-rose-600"
 27 |     },
 28 |     "messageColors": {
 29 |       "error": "text-red-600 border-red-500",
 30 |       "warning": "text-yellow-600 border-yellow-500",
 31 |       "success": "text-green-600 border-green-500",
 32 |       "info": "text-blue-600 border-blue-500",
 33 |       "default": "text-slate-600 dark:text-slate-200 border-slate-500"
 34 |     }
 35 |   },
 36 |   "textInput": {
 37 | 
 38 |   },
 39 |   "textAreaInput": {
 40 | 
 41 |   },
 42 |   "selectInput": {
 43 | 
 44 |   },
 45 |   "checkboxInput": {
 46 | 
 47 |   },
 48 |   "radioInput": {
 49 | 
 50 |   },
 51 |   "switchInput": {
 52 |     "outsideColors": {
 53 |       "slate" : "bg-slate-300",
 54 |       "gray" : "bg-gray-300",
 55 |       "zinc" : "bg-zinc-300",
 56 |       "neutral" : "bg-neutral-300",
 57 |       "stone" : "bg-stone-300",
 58 |       "red" : "bg-red-300",
 59 |       "orange" : "bg-orange-300",
 60 |       "amber" : "bg-amber-300",
 61 |       "yellow" : "bg-yellow-300",
 62 |       "lime" : "bg-lime-300",
 63 |       "green" : "bg-green-300",
 64 |       "emerald" : "bg-emerald-300",
 65 |       "teal" : "bg-teal-300",
 66 |       "cyan" : "bg-cyan-300",
 67 |       "sky" : "bg-sky-300",
 68 |       "blue" : "bg-blue-300",
 69 |       "indigo" : "bg-indigo-300",
 70 |       "violet" : "bg-violet-300",
 71 |       "purple" : "bg-purple-300",
 72 |       "fuchsia" : "bg-fuchsia-300",
 73 |       "pink" : "bg-pink-300",
 74 |       "rose" : "bg-rose-300"
 75 |     },
 76 |     "buttonColors" : {
 77 |       "slate" : "bg-slate-600 hover:bg-slate-200 active:bg-slate-600 hover:text-slate-700 border-slate-600",
 78 |       "gray" : "bg-gray-600 hover:bg-gray-200 active:bg-gray-600 hover:text-gray-700 border-gray-600",
 79 |       "zinc" : "bg-zinc-600 hover:bg-zinc-200 active:bg-zinc-600 hover:text-zinc-700 border-zinc-600",
 80 |       "neutral" : "bg-neutral-600 hover:bg-neutral-200 active:bg-neutral-600 hover:text-neutral-700 border-neutral-600",
 81 |       "stone" : "bg-stone-600 hover:bg-stone-200 active:bg-stone-600 hover:text-stone-700 border-stone-600",
 82 |       "red" : "bg-red-600 hover:bg-red-600 active:bg-red-600 hover:text-red-700 border-red-600",
 83 |       "orange" : "bg-orange-600 hover:bg-orange-200 active:bg-orange-600 hover:text-orange-700 border-orange-600",
 84 |       "amber" : "bg-amber-600 hover:bg-amber-200 active:bg-amber-600 hover:text-amber-700 border-amber-600",
 85 |       "yellow" : "bg-yellow-600 hover:bg-yellow-200 active:bg-yellow-600  hover:text-yellow-700active:bg-yellow-600 border-yellow-600",
 86 |       "lime" : "bg-lime-600 hover:bg-lime-200 active:bg-lime-600 hover:text-lime-700 border-lime-600",
 87 |       "green" : "bg-green-600 hover:bg-green-200 active:bg-green-600 hover:text-green-700 border-green-600",
 88 |       "emerald" : "bg-emerald-600 hover:ring-8 hover:ring-emerald-100 active:bg-emerald-600 hover:text-emerald-700 border-emerald-600",
 89 |       "teal" : "bg-teal-600 hover:bg-teal-200 active:bg-teal-600 hover:text-teal-700 border-teal-600",
 90 |       "cyan" : "bg-cyan-600 hover:bg-cyan-200 active:bg-cyan-600 hover:text-cyan-700 border-cyan-600",
 91 |       "sky" : "bg-sky-600 hover:bg-sky-200 active:bg-sky-600 hover:text-sky-700 border-sky-600",
 92 |       "blue" : "bg-blue-600 hover:bg-blue-200 active:bg-blue-600 hover:text-blue-700 border-blue-600",
 93 |       "indigo" : "bg-indigo-600 hover:bg-indigo-200 active:bg-indigo-600 hover:text-indigo-700 border-indigo-600",
 94 |       "violet" : "bg-violet-600 hover:bg-violet-200 active:bg-violet-600 hover:text-violet-700 border-violet-600",
 95 |       "purple" : "bg-purple-600 hover:bg-purple-200 active:bg-purple-600 hover:text-purple-700 border-purple-600",
 96 |       "fuchsia" : "bg-fuchsia-600 hover:bg-fuchsia-200 active:bg-fuchsia-600 hover:text-fuchsia-700 border-fuchsia-600",
 97 |       "pink" : "bg-pink-600 hover:bg-pink-200 active:bg-pink-600 hover:text-pink-700 border-pink-600",
 98 |       "rose" : "bg-rose-600 hover:bg-rose-200 active:bg-rose-600 hover:text-rose-700 border-rose-600"
 99 |     }
100 |   }
101 | }


--------------------------------------------------------------------------------
/src/lib-components/Input/TCheckboxInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: "TCheckboxInput"
 8 | }
 9 | </script>
10 | 
11 | <style scoped>
12 | 
13 | </style>


--------------------------------------------------------------------------------
/src/lib-components/Input/TInputGroup.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="flex flex-col mt-1"
  4 |     :class="[
  5 |       GlobalStyles.grid.gridSm[phoneWidth],
  6 |       GlobalStyles.grid.gridMd[tabletWidth],
  7 |       GlobalStyles.grid.gridLg[laptopWidth],
  8 |       GlobalStyles.grid.gridXl[desktopWidth],
  9 |     ]"
 10 |   >
 11 |     <!--Label-->
 12 |     <label
 13 |       :for="labelFor"
 14 |       class="flex flex-row gap-1 ml-1 mb-2 items-center font-medium text-sm whitespace-normal dark:text-gray-200"
 15 |     >
 16 |       <!--Label-->
 17 |       <span v-if="label" v-text="label"></span>
 18 |       <!--Label Prop-->
 19 |       <span v-else class="inline-flex items-center">
 20 |         <!--Label Slot-->
 21 |         <slot name="label" />
 22 |       </span>
 23 | 
 24 |       <!--Sub Label-->
 25 |       <span
 26 |         v-if="subLabel"
 27 |         :class="[
 28 |           'text-xs italic mt-1',
 29 |           Style.inputGroup.subLabelColors[subLabelColor],
 30 |         ]"
 31 |         v-text="subLabel"
 32 |       ></span>
 33 |     </label>
 34 | 
 35 |     <!--Input Content-->
 36 |     <slot></slot>
 37 | 
 38 |     <!--Message Area-->
 39 |     <div v-if="messages.length > 0 || message" class="mt-1 ml-1">
 40 |       <!--Message-->
 41 |       <p
 42 |         v-if="message"
 43 |         class="text-xs whitespace-nowrap"
 44 |         :class="Style.inputGroup.messageColors[messageType]"
 45 |         v-text="message"
 46 |       ></p>
 47 | 
 48 |       <!--Messages-->
 49 |       <template
 50 |         v-else-if="messages.length > 0 && !message"
 51 |         v-for="msg in messages"
 52 |         :key="msg"
 53 |       >
 54 |         <p
 55 |           class="text-xs whitespace-nowrap"
 56 |           :class="
 57 |             Style.inputGroup.messageColors[
 58 |               messageTypeKey
 59 |                 ? msg[messageTypeKey]
 60 |                   ? msg[messageTypeKey]
 61 |                   : 'default'
 62 |                 : messageType
 63 |             ]
 64 |           "
 65 |         >
 66 |           <span v-if="messageLabelKey" v-text="msg[messageLabelKey]"></span>
 67 |           <span v-else v-text="msg"></span>
 68 |         </p>
 69 |       </template>
 70 | 
 71 |       <!--Message Slot-->
 72 |       <slot v-else name="message"></slot>
 73 |     </div>
 74 |   </div>
 75 | </template>
 76 | 
 77 | <script>
 78 | import { computed, defineComponent, provide, toRefs } from "vue";
 79 | import Style from "./Style.json";
 80 | import GlobalStyles from "../GlobalStyles.json";
 81 | 
 82 | export default defineComponent({
 83 |   name: "TInputGroup",
 84 |   props: {
 85 |     label: {
 86 |       type: String,
 87 |       default: null,
 88 |     },
 89 |     subLabel: {
 90 |       type: String,
 91 |       default: null,
 92 |     },
 93 |     subLabelColor: {
 94 |       type: String,
 95 |       default: "yellow",
 96 |     },
 97 |     labelFor: {
 98 |       type: String,
 99 |       default: null,
100 |     },
101 |     message: {
102 |       type: String,
103 |       default: "",
104 |     },
105 |     messages: {
106 |       type: [Array, Object],
107 |       default() {
108 |         return [];
109 |       },
110 |     },
111 |     messagesInputAlertType: {
112 |       type: String,
113 |       default: "",
114 |     },
115 |     messageType: {
116 |       type: String,
117 |       default: "default",
118 |     },
119 |     messageLabelKey: {
120 |       type: String,
121 |       default: "",
122 |     },
123 |     messageTypeKey: {
124 |       type: String,
125 |       default: "type",
126 |     },
127 |     phoneWidth: {
128 |       type: Number,
129 |       default: 12,
130 |     },
131 |     tabletWidth: {
132 |       type: Number,
133 |       default: null,
134 |     },
135 |     laptopWidth: {
136 |       type: Number,
137 |       default: 6,
138 |     },
139 |     desktopWidth: {
140 |       type: Number,
141 |       default: null,
142 |     },
143 |   },
144 |   setup(props) {
145 |     /*Error Status Provide to Input Component*/
146 |     const { messageType, messagesInputAlertType } = toRefs(props);
147 | 
148 |     /*Error Management*/
149 |     const gnMessageType = computed(() => {
150 |       /*If there is a message type*/
151 |       if (messageType.value && messageType.value !== "default") {
152 |         return messageType.value;
153 |       } else {
154 |         return messagesInputAlertType.value;
155 |       }
156 |     });
157 | 
158 |     provide("messageType", gnMessageType);
159 | 
160 |     return {
161 |       Style,
162 |       GlobalStyles,
163 |     };
164 |   },
165 | });
166 | </script>
167 | 


--------------------------------------------------------------------------------
/src/lib-components/Input/TRadioButtonInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: "TRadioButtonInput"
 8 | }
 9 | </script>
10 | 
11 | <style scoped>
12 | 
13 | </style>


--------------------------------------------------------------------------------
/src/lib-components/Input/TSelectInput.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="relative space-y-1 gap-1 min-w-[15rem] text-slate-700 dark:text-slate-200" ref="target">
  3 |     <!--Place holder-->
  4 |     <div @click="toggle"
  5 |          tabindex="0"
  6 |          class="flex bg-white dark:bg-slate-800/50 overflow-hidden justify-between items-center space-x-2 min-h-[2.5rem] border p-4 py-2 cursor-pointer select-none outline-none focus:ring-2"
  7 |          :class="[
  8 |       GlobalStyle.radius[radius],
  9 |       messageType
 10 |         ? Style.inputGroup.messageColors[messageType] + ' focus:border-none'
 11 |         : 'border-slate-300 dark:border-slate-600 focus:ring-indigo-500 focus:border-indigo-500',
 12 |         ]"
 13 |     >
 14 |       <div class="block overflow-hidden whitespace-nowrap text-slate-700 dark:text-slate-200">
 15 |         <!--Placeholder-->
 16 |         <span v-if="!modelValue || modelValue.length === 0" v-text="placeHolder" class="text-slate-500"></span>
 17 |         <!--Selected Item-->
 18 |         <div v-if="modelValue && !multi">
 19 |           <slot v-if="$slots.hasOwnProperty('label')" name="label" :props="selected"></slot>
 20 |           <span v-else>{{ selected[optionLabel] }}</span>
 21 |         </div>
 22 | 
 23 |         <!-- Count-->
 24 |         <div v-if="multi && !multiShowLabels &&selected.length>0" >
 25 |           {{selected.length}} {{selected.length>1? multiSelectedTextPlural : multiSelectedTextSingular}} {{multiSelectedTextSelected}}
 26 |         </div>
 27 | 
 28 |         <!--Labels of the Selected Items-->
 29 |         <div v-if="multi && multiShowLabels &&selected.length>0" class="flex flex-wrap">
 30 |           <template v-for="option in selected">
 31 |             <span @click.stop="select(option[optionKey])"
 32 |                   class="inline-flex items-center whitespace-nowrap group text-sm after:content-[',\00a0'] last:after:content-[''] hover:after:content-['']">
 33 | 
 34 |               <slot v-if="$slots.hasOwnProperty('label')" name="label" :props="option"></slot>
 35 |           <span v-else>{{ option[optionLabel] }}</span>
 36 | 
 37 |               <span class="hidden group-hover:block ml-1 mr-2">
 38 |                 <circle-minus-icon class="w-4 h-4 hover:text-rose-500" />
 39 |               </span>
 40 |             </span>
 41 |           </template>
 42 |         </div>
 43 |       </div>
 44 | 
 45 |       <!--Trigger Icons-->
 46 |       <div class="flex items-center space-x-4 -mr-4">
 47 |         <!--Clear Button-->
 48 |         <div v-if="(!multi && selected && clearButton)|| (multi && selected.length>0 && clearButton)"
 49 |              @click.stop="clear"
 50 |              class="flex h-full justify-center items-center">
 51 |           <div class="bg-slate-200 hover:bg-slate-200 dark:bg-slate-700 rounded-full dark:hover:bg-rose-600">
 52 |             <CircleXMark
 53 |               @click="$emit('update:modelValue', '')"
 54 |               class="w-5 h-5 text-slate-600 hover:text-rose-600 dark:text-slate-200 hover:dark:text-slate-200 cursor-pointer -m-1"
 55 |             />
 56 |           </div>
 57 |         </div>
 58 | 
 59 |         <!--Trigger-->
 60 |         <chevron-down-icon class="w-5 h-5 transition-all duration-300 text-slate-700 dark:text-slate-200" :class="[
 61 |           {'rotate-90': showOptions},
 62 |           {'rotate-0': !showOptions},
 63 |         ]" />
 64 |       </div>
 65 |     </div>
 66 | 
 67 |     <!--Selected Content-->
 68 | 
 69 |     <!--Options-->
 70 |     <div v-if="showOptions"
 71 |          class="absolute z-50 bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-200 border dark:border-slate-500 shadow-lg w-full"
 72 |          :class="GlobalStyle.radius[radius]">
 73 |       <!--Search-->
 74 |       <div v-if="search" class="p-2">
 75 |         <t-input-group label-for="search" message="" message-type="">
 76 |           <t-text-input v-model="searchText" clear-button :placeholder="searchPlaceHolder"/>
 77 |         </t-input-group>
 78 |       </div>
 79 | 
 80 |       <!--Options-->
 81 |       <template v-for="(option,index) in searchedList" :key="option">
 82 | 
 83 |         <div v-if="showingMaxOptions> index" @click="select(option[optionKey])"
 84 |              class="flex group justify-between items-center border-b dark:border-slate-500 dark:hover:bg-slate-600 last:border-b-0 last:rounded-b first:rounded-t py-1 px-2 hover:bg-slate-100 cursor-pointer">
 85 |           <!--Label-->
 86 |           <div>
 87 |             <slot v-if="$slots.hasOwnProperty('label')" name="label" :props="option"></slot>
 88 |             <span v-else v-text="option[optionLabel]"></span>
 89 |           </div>
 90 | 
 91 |           <!--Selected Indicator-->
 92 | 
 93 |           <circle-check-icon v-if="option[optionKey] === modelValue ||(multi &&  modelValue.includes(option[optionKey]))"
 94 |                              class="group-hover:hidden w-5 h-5 text-emerald-500" />
 95 |           <trash-icon v-if="option[optionKey] === modelValue || (multi && modelValue.includes(option[optionKey]))"
 96 |                       class="hidden group-hover:block w-4 h-4 text-rose-500" />
 97 |         </div>
 98 |       </template>
 99 | 
100 |       <!--No results found-->
101 |       <p v-text="noResultsFoundText" v-if="searchedList.length === 0" class="px-2 mb-1">
102 |       </p>
103 | 
104 |       <!--Too Many Results Message-->
105 |       <p v-text="tooManyResultsText" v-if="options.length > showingMaxOptions"
106 |          class="flex p-2 text-xs w-full justify-center"></p>
107 |     </div>
108 |   </div>
109 | </template>
110 | 
111 | <script>
112 | /*Functions*/
113 | import { computed, ref, toRefs, inject } from "vue";
114 | import { onClickOutside } from "@vueuse/core";
115 | 
116 | /*Components*/
117 | import ChevronDownIcon from "@/lib-components/Icons/ChevronDownIcon";
118 | import CircleCheckIcon from "@/lib-components/Icons/CircleCheckIcon";
119 | import CircleXMark from "@/lib-components/Icons/CircleXMark";
120 | import TTextInput from "@/lib-components/Input/TTextInput";
121 | import TInputGroup from "@/lib-components/Input/TInputGroup";
122 | 
123 | /*Sources*/
124 | import GlobalStyle from "@/lib-components/GlobalStyles.json";
125 | import Style from "@/lib-components/Input/Style.json";
126 | import TrashIcon from "@/lib-components/Icons/TrashIcon";
127 | import CircleMinusIcon from "@/lib-components/Icons/CircleMinusIcon";
128 | 
129 | export default {
130 |   name: "TSelectInput",
131 |   components: { CircleMinusIcon, TrashIcon, CircleXMark, CircleCheckIcon, ChevronDownIcon, TTextInput, TInputGroup },
132 |   props: {
133 |     modelValue: {
134 |       type: [String, Number, Date],
135 |       default: null
136 |     },
137 |     options: {
138 |       type: [String, Date, Number, Object, Array, Boolean],
139 |       default: () => []
140 |     },
141 |     optionKey: {
142 |       type: String,
143 |       default: "id"
144 |     },
145 |     optionLabel: {
146 |       type: String,
147 |       default: "label"
148 |     },
149 |     disabled: {
150 |       type: Boolean,
151 |       default: false
152 |     },
153 |     placeHolder: {
154 |       type: String,
155 |       default: "Select"
156 |     },
157 |     searchPlaceHolder: {
158 |       type: String,
159 |       default: "Search"
160 |     },
161 |     readOnly: {
162 |       type: Boolean,
163 |       default: false
164 |     },
165 |     clearButton: {
166 |       type: Boolean,
167 |       default: false
168 |     },
169 |     search: {
170 |       type: Boolean,
171 |       default: false
172 |     },
173 |     showingMaxOptions: {
174 |       type: Number,
175 |       default: 10
176 |     },
177 |     radius: {
178 |       type: String,
179 |       default: "md"
180 |     },
181 |     multi: {
182 |       type: Boolean,
183 |       default: false
184 |     },
185 |     multiShowLabels: {
186 |       type: Boolean,
187 |       default: false
188 |     },
189 |     multiSelectedTextSingular: {
190 |       type: String,
191 |       default: "item"
192 |     },
193 |     multiSelectedTextPlural: {
194 |       type: String,
195 |       default: "items"
196 |     },
197 |     multiSelectedTextSelected:{
198 |       type: String,
199 |       default: "selected"
200 |     },
201 |     noResultsFoundText: {
202 |       type: String,
203 |       default: "No results found"
204 |     },
205 |     tooManyResultsText: {
206 |       type: String,
207 |       default: "Too many results found, refine search"
208 |     }
209 |   },
210 | 
211 |   emits: ["update:modelValue"],
212 | 
213 |   setup(props, { emit }) {
214 |     const { modelValue, disabled, readOnly, options, optionKey, optionLabel, multi } = toRefs(props);
215 | 
216 |     /*Outside click*/
217 |     const target = ref();
218 |     onClickOutside(target, (event) => showOptions.value = false);
219 | 
220 |     /*Error Management*/
221 |     const messageType = inject("messageType");
222 | 
223 |     /*Show Options*/
224 |     const showOptions = ref();
225 |     const toggle = () => {
226 |       if (disabled.value || readOnly.value) {
227 |         showOptions.value = false;
228 |       } else {
229 |         showOptions.value = !showOptions.value;
230 |       }
231 |     };
232 | 
233 |     /*Select*/
234 |     const select = (value) => {
235 |       if (multi.value) {
236 |         /*Multi*/
237 |         if (modelValue.value.includes(value)) {
238 |           /*Remove*/
239 |           modelValue.value.splice(modelValue.value.indexOf(value), 1);
240 |         } else {
241 |           /*Add*/
242 |           modelValue.value.push(value);
243 |         }
244 | 
245 |       } else {
246 |         /*Simple*/
247 |         if (value === modelValue.value) {
248 |           emit("update:modelValue", null);
249 |         } else {
250 |           emit("update:modelValue", value);
251 |         }
252 |         showOptions.value = false;
253 |         searchText.value = "";
254 |       }
255 |     };
256 | 
257 | 
258 |     /*Add Selected List*/
259 |     const addSelectedList = (value) => {
260 |       if (modelValue.value.includes(value)) {
261 |         modelValue.value.splice(modelValue.value.indexOf(value), 1);
262 |       }
263 |     };
264 | 
265 |     /*Selected*/
266 |     const selected = computed(() => {
267 | 
268 |       if (multi.value) {
269 |         /*Multi*/
270 |         if (modelValue.value === [] || modelValue.value === null) {
271 |           /*Multi Null*/
272 |           return [];
273 |         }
274 |         /*Selected Items*/
275 |         let multiSelected = [];
276 |         modelValue.value.forEach(i => {
277 |           multiSelected.push(options.value.find(option => option[optionKey.value] === i));
278 |         });
279 | 
280 |         return multiSelected;
281 |       } else {
282 |         /*Simple*/
283 |         if (modelValue.value === null || modelValue.value === "" || modelValue.value === undefined) {
284 |           /*Simple Null*/
285 |           return null;
286 |         }
287 |         /*Simple Item*/
288 |         return options.value.find(option => option[optionKey.value] === modelValue.value);
289 |       }
290 |     });
291 | 
292 |     /*Search*/
293 |     const searchText = ref("");
294 |     const searchedList = computed(() => {
295 |       if (searchText.value === "") {
296 |         return options.value;
297 |       }
298 |       return options.value.filter(option => option[optionLabel.value].toLowerCase().replace(/[^a-zA-Z ]/g, "").includes(searchText.value.toLowerCase().replace(/[^a-zA-Z ]/g, "")));
299 |     });
300 | 
301 |     /*Clear*/
302 |     const clear = () => {
303 |       showOptions.value = false;
304 |       selected.value = multi.value ? [] : null;
305 |       emit("update:modelValue", multi.value ? [] : null);
306 |     };
307 | 
308 |     return {
309 |       GlobalStyle,
310 |       Style,
311 |       select,
312 |       searchText,
313 |       searchedList,
314 |       clear,
315 |       toggle,
316 |       selected,
317 |       messageType,
318 |       showOptions,
319 |       target,
320 |       addSelectedList
321 |     };
322 |   }
323 | };
324 | </script>
325 | 
326 | <style scoped>
327 | 
328 | </style>
329 | 


--------------------------------------------------------------------------------
/src/lib-components/Input/TSwitchInput.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="relative flex items-center select-none border dark:border-transparent p-2 border rounded-full"
  4 |     :class="[
  5 |       coloredBg
  6 |         ? Style.switchInput.outsideColors[status ? trueColor : falseColor]
  7 |         : 'bg-slate-300 dark:bg-slate-700',
  8 |       design === 'higher' ? 'h-10 w-16' : 'h-4 w-12 mx-1',
  9 |       hasSlot ? 'w-auto' : '',
 10 |     ]"
 11 |   >
 12 |     <!--Button-->
 13 |     <div
 14 |       class="flex items-center justify-center rounded-full whitespace-nowrap cursor-pointer transform transition-all duration-300"
 15 |       :class="[
 16 |         !hasSlot
 17 |           ? Style.switchInput.buttonColors[status ? trueColor : falseColor]
 18 |           : '',
 19 |         hasSlot ? 'p-1' : 'w-6 h-6 absolute',
 20 |         {
 21 |           'left-0': design !== 'higher' && !modelValue,
 22 |           'left-2': design === 'higher' && !modelValue,
 23 |           'left-6': design !== 'higher' && modelValue,
 24 |           'left-8': design === 'higher' && modelValue,
 25 |           'pointer-events-none opacity-50': disabled,
 26 |           'pointer-events-none': loading,
 27 |         },
 28 |       ]"
 29 |       @click="!disabled && select(id)"
 30 |     >
 31 |       <!--Loading Icon-->
 32 |       <t-circle-loading-animation
 33 |         v-if="loading"
 34 |         class="w-5 h-5 text-white"
 35 |         :class="
 36 |           hasSlot
 37 |             ? 'absolute bg-slate-500 rounded-full w-7 h-7 ring-4 ring-slate-700/75'
 38 |             : ''
 39 |         "
 40 |       />
 41 | 
 42 |       <!--Slot-->
 43 |       <div
 44 |         v-if="hasSlot"
 45 |         class="flex text-slate-700 dark:text-slate-200 -mx-2 space-x-2"
 46 |       >
 47 |         <template v-for="item in [true, false]">
 48 |           <div
 49 |             class="py-1 px-2"
 50 |             :class="[
 51 |               item === status
 52 |                 ? Style.switchInput.buttonColors[
 53 |                     status ? trueColor : falseColor
 54 |                   ]
 55 |                 : '',
 56 |               {
 57 |                 'rounded-l-full': status === item && item === true,
 58 |                 'rounded-r-full': status === item && item === false,
 59 |               },
 60 |             ]"
 61 |           >
 62 |             <slot :name="item"></slot>
 63 |           </div>
 64 |         </template>
 65 |       </div>
 66 |     </div>
 67 |   </div>
 68 | </template>
 69 | 
 70 | <script>
 71 | import Style from "./Style.json";
 72 | import TCircleLoadingAnimation from "@/lib-components/LoadingAnimation/TCircleLoadingAnimation";
 73 | import { computed, ref, toRefs, watch } from "vue";
 74 | 
 75 | export default {
 76 |   name: "TSwitchInput",
 77 |   components: { TCircleLoadingAnimation },
 78 |   props: {
 79 |     modelValue: {
 80 |       type: [Array, Object, Boolean],
 81 |       default: false,
 82 |     },
 83 |     trueColor: {
 84 |       type: String,
 85 |       default: "green",
 86 |     },
 87 |     id: {
 88 |       type: String,
 89 |       default: "",
 90 |     },
 91 |     falseColor: {
 92 |       type: String,
 93 |       default: "red",
 94 |     },
 95 |     indeterminateColor: {
 96 |       type: String,
 97 |       default: "slate",
 98 |     },
 99 |     design: {
100 |       type: String,
101 |       default: "higher",
102 |     },
103 |     coloredBg: {
104 |       type: Boolean,
105 |       default: false,
106 |     },
107 |     disabled: {
108 |       type: Boolean,
109 |       default: false,
110 |     },
111 |     loading: {
112 |       type: Boolean,
113 |       default: false,
114 |     },
115 |     multi: {
116 |       type: Boolean,
117 |       default: false,
118 |     },
119 |   },
120 | 
121 |   emits: ["update:modelValue"],
122 | 
123 |   setup(props, { emit, slots }) {
124 |     const { modelValue, multi, id } = toRefs(props);
125 |     const status = ref(
126 |       multi.value ? modelValue.value.includes(id.value) : modelValue.value
127 |     );
128 | 
129 |     const hasSlot = computed(() => {
130 |       if (slots.hasOwnProperty("true") && slots.hasOwnProperty("false")) {
131 |         return true;
132 |       }
133 |       return false;
134 |     });
135 | 
136 |     /*Multi options*/
137 |     const select = (id) => {
138 |       if (multi.value && typeof modelValue.value === "object") {
139 |         /*Add*/
140 |         if (modelValue.value.includes(id) && status.value) {
141 |           modelValue.value.splice(modelValue.value.indexOf(id), 1);
142 |           status.value = false;
143 |         } else if (modelValue.value.includes(id) === false && !status.value) {
144 |           modelValue.value.push(id);
145 |           status.value = true;
146 |         }
147 |       } else {
148 |         status.value = !status.value;
149 |         emit("update:modelValue", status.value);
150 |       }
151 |     };
152 | 
153 |     return {
154 |       hasSlot,
155 |       Style,
156 |       select,
157 |       status,
158 |     };
159 |   },
160 | };
161 | </script>
162 | 
163 | <style scoped></style>
164 | 


--------------------------------------------------------------------------------
/src/lib-components/Input/TTextAreaInput.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="relative" :class="{ 'opacity-50 cursor-not-allowed': disabled }">
  3 |     <!--Clear Button-->
  4 | 
  5 | 
  6 |     <div v-if="modelValue && clearButton && !disabled"
  7 |          class="absolute -top-1 -right-1 flex z-10 justify-center items-center">
  8 |       <div class="bg-slate-200 hover:bg-slate-200 dark:bg-slate-700 rounded-full dark:hover:bg-rose-600">
  9 |         <CircleXMark
 10 |           @click="
 11 |           $emit('update:modelValue', '');
 12 |           textLength = 0;
 13 |         "
 14 |           class="w-5 h-5 text-slate-600 hover:text-rose-600 dark:text-slate-200 hover:dark:text-slate-200 cursor-pointer -m-1"
 15 |         />
 16 |       </div>
 17 |     </div>
 18 | 
 19 |     <!--Icons-->
 20 |     <div class="absolute top-2 right-2">
 21 |       <!--Message Info-->
 22 |       <circle-exclamation-icon
 23 |         v-if="messageType"
 24 |         class="w-5 h-5 mr-0.5"
 25 |         :class="[Style.inputGroup.messageColors[messageType]]"
 26 |       />
 27 |     </div>
 28 | 
 29 |     <!--Input-->
 30 |     <textarea
 31 |       :class="[
 32 |         'border whitespace-normal min-h-[3.565rem] bg-white dark:bg-slate-800/50 dark:text-slate-200 p-4 h-auto w-full outline-none focus:ring-2',
 33 |         GlobalStyles.radius[radius],
 34 |         { 'cursor-not-allowed': disabled || readOnly },
 35 |         messageType
 36 |           ? Style.inputGroup.messageColors[messageType] + ' focus:border-none'
 37 |           : 'border-slate-300 dark:border-slate-600 focus:ring-indigo-500',
 38 |       ]"
 39 |       :rows="rows"
 40 |       :id="id"
 41 |       :placeholder="placeholder"
 42 |       :value="modelValue"
 43 |       @input="$emit('update:modelValue', $event.target.value)"
 44 |       ref="input"
 45 |       :disabled="disabled"
 46 |       :readonly="readOnly"
 47 |     />
 48 |     <span
 49 |       class="float-right text-xs -mt-0.5 min-w-[1.5rem] text-center text-slate-700 dark:text-slate-200"
 50 |       v-show="counter"
 51 |     >
 52 |       {{ textLength }}
 53 |     </span>
 54 |   </div>
 55 | </template>
 56 | 
 57 | <script>
 58 | import { toRefs, watch, inject, ref } from "vue";
 59 | import Style from "./Style.json";
 60 | import GlobalStyles from "../GlobalStyles.json";
 61 | import CircleXMark from "@/lib-components/Icons/CircleXMark";
 62 | import CircleExclamationIcon from "@/lib-components/Icons/CircleExclamationIcon";
 63 | 
 64 | export default {
 65 |   name: "TTextAreaInput",
 66 |   components: { CircleExclamationIcon, CircleXMark },
 67 |   props: {
 68 |     modelValue: {
 69 |       type: String
 70 |     },
 71 |     id: {
 72 |       type: String
 73 |     },
 74 |     rows: {
 75 |       type: Number,
 76 |       default: 3
 77 |     },
 78 |     placeholder: {
 79 |       type: String
 80 |     },
 81 |     clearButton: {
 82 |       type: Boolean,
 83 |       default: false
 84 |     },
 85 |     counter: {
 86 |       type: Boolean,
 87 |       default: false
 88 |     },
 89 |     disabled: {
 90 |       default: false
 91 |     },
 92 |     readOnly: {
 93 |       default: false
 94 |     },
 95 |     radius: {
 96 |       type: String,
 97 |       default: "md"
 98 |     }
 99 |   },
100 |   setup(props) {
101 |     /*Definitions*/
102 |     const { modelValue } = toRefs(props);
103 |     /*Watch Text Length*/
104 |     const textLength = ref();
105 |     watch(modelValue, () => {
106 |       if (modelValue.value) {
107 |         textLength.value = modelValue.value.length;
108 |       }
109 |     });
110 |     /*Get Error Status*/
111 |     const messageType = inject("messageType");
112 |     return { GlobalStyles, Style, messageType, textLength };
113 |   }
114 | };
115 | </script>
116 | 


--------------------------------------------------------------------------------
/src/lib-components/Input/TTextInput.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     @click="input.focus()"
  4 |     class="relative h-10 flex flex-grow-0 border bg-white dark:bg-slate-800/50 outline-none"
  5 |     :class="[
  6 |       GlobalStyles.radius[radius],
  7 |       { '': !messageType },
  8 |       messageType
  9 |         ? Style.inputGroup.messageColors[messageType]
 10 |         : 'border-slate-300 dark:border-slate-600 focus:ring-indigo-500 focus:border-indigo-500',
 11 |       { 'opacity-50 cursor-not-allowed': disabled },
 12 |     ]"
 13 |   >
 14 |     <!--Prepend-->
 15 |     <div class="min-w-[.5rem] flex items-center pointer-events-none">
 16 |       <div
 17 |         v-if="$slots.prepend || prepend"
 18 |         class="px-2 text-gray-500 sm:text-sm"
 19 |       >
 20 |         <span v-if="prepend" v-text="prepend"></span>
 21 |         <slot v-else name="prepend"></slot>
 22 |       </div>
 23 |     </div>
 24 | 
 25 |     <!--Input-->
 26 |     <div class="relative flex flex-grow">
 27 |       <input
 28 |         :value="modelValue"
 29 |         :type="type"
 30 |         :id="id"
 31 |         :name="id"
 32 |         :disabled="disabled"
 33 |         :readonly="readOnly"
 34 |         :placeholder="placeholder"
 35 |         @input="$emit('update:modelValue', $event.target.value)"
 36 |         class="flex z-0 my-1 px-2 w-full border-0 text-slate-700 dark:text-slate-200 bg-transparent outline-none focus:ring-2"
 37 |         :class="{ 'cursor-not-allowed': disabled }"
 38 |         ref="input"
 39 |       />
 40 | 
 41 |       <!--Clear Button-->
 42 |       <div
 43 |         v-if="modelValue && clearButton"
 44 |         class="absolute flex z-10 h-full right-2 justify-center items-center"
 45 |       >
 46 |         <div
 47 |           class="bg-slate-200 hover:bg-slate-200 dark:bg-slate-700 rounded-full dark:hover:bg-rose-600"
 48 |         >
 49 |           <CircleXMark
 50 |             @click="$emit('update:modelValue', '')"
 51 |             class="w-5 h-5 text-slate-600 hover:text-rose-600 dark:text-slate-200 hover:dark:text-slate-200 cursor-pointer -m-1"
 52 |           />
 53 |         </div>
 54 |       </div>
 55 |     </div>
 56 | 
 57 |     <!--Append-->
 58 |     <div class="min-w-[.5rem]">
 59 |       <div
 60 |         v-if="messageType || $slots.append || append"
 61 |         class="flex px-2 text-gray-500 sm:text-sm h-full items-center justify-center pointer-events-none whitespace-nowrap"
 62 |       >
 63 |         <span v-if="append" v-text="append"></span>
 64 |         <slot v-else name="append"></slot>
 65 |         <!--Icons-->
 66 |         <div
 67 |           v-if="messageType"
 68 |           class="flex h-full justify-center items-center"
 69 |           :class="[{ 'ml-2': append || $slots.append }]"
 70 |         >
 71 |           <!--Message Info-->
 72 |           <circle-exclamation-icon
 73 |             class="w-5 h-5"
 74 |             :class="[Style.inputGroup.messageColors[messageType]]"
 75 |           />
 76 |         </div>
 77 |       </div>
 78 |     </div>
 79 |   </div>
 80 | </template>
 81 | 
 82 | <script>
 83 | import { inject, ref } from "vue";
 84 | import GlobalStyles from "../GlobalStyles.json";
 85 | import Style from "./Style.json";
 86 | import CircleExclamationIcon from "@/lib-components/Icons/CircleExclamationIcon";
 87 | import CircleXMark from "@/lib-components/Icons/CircleXMark";
 88 | 
 89 | export default {
 90 |   name: "TTextInput",
 91 |   components: { CircleExclamationIcon, CircleXMark },
 92 |   props: {
 93 |     modelValue: {
 94 |       type: [String, Date, Number],
 95 |       default: "",
 96 |     },
 97 |     selectValue: {
 98 |       type: [String, Date, Number, Object, Array],
 99 |       default: null,
100 |     },
101 |     id: {
102 |       type: String,
103 |       default() {
104 |         return "text-input-" + Number(new Date());
105 |       },
106 |     },
107 |     type: {
108 |       type: String,
109 |       default: "text",
110 |     },
111 |     placeholder: {
112 |       type: String,
113 |       default: null,
114 |     },
115 |     disabled: {
116 |       type: Boolean,
117 |       default: false,
118 |     },
119 |     readOnly: {
120 |       type: Boolean,
121 |       default: false,
122 |     },
123 |     clearButton: {
124 |       type: Boolean,
125 |       default: false,
126 |     },
127 |     radius: {
128 |       type: String,
129 |       default: "md",
130 |     },
131 |     prepend: {
132 |       type: String,
133 |       default: "",
134 |     },
135 |     append: {
136 |       type: String,
137 |       default: "",
138 |     },
139 |     select: {
140 |       type: Boolean,
141 |       default: false,
142 |     },
143 |     selectOptions: {
144 |       type: [Object, Array],
145 |       default() {
146 |         return [{ key: "", label: "Please add a options source" }];
147 |       },
148 |     },
149 |     selectLabelKey: {
150 |       type: String,
151 |       default: "label",
152 |     },
153 |     selectValueKey: {
154 |       type: String,
155 |       default: "key",
156 |     },
157 |     selectType: {
158 |       type: String,
159 |       default: "outside",
160 |     },
161 |   },
162 | 
163 |   emits: ["update:modelValue", "update:selectValue"],
164 | 
165 |   setup() {
166 |     const input = ref();
167 | 
168 |     const messageType = inject("messageType");
169 | 
170 |     return {
171 |       GlobalStyles,
172 |       Style,
173 |       messageType,
174 |       input,
175 |     };
176 |   },
177 | };
178 | </script>
179 | 
180 | <style scoped></style>
181 | 


--------------------------------------------------------------------------------
/src/lib-components/LoadingAnimation/TCircleLoadingAnimation.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     stroke="currentColor"
 4 |     viewBox="0 0 100 100"
 5 |     xmlns="http://www.w3.org/2000/svg"
 6 |   >
 7 |     <circle cx="50%" cy="50%" r="45" />
 8 |   </svg>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   name: "TCircleLoadingAnimation",
14 | };
15 | </script>
16 | 
17 | <style scoped>
18 | svg {
19 |   animation: 2s linear infinite svg-animation;
20 | }
21 | 
22 | @keyframes svg-animation {
23 |   0% {
24 |     transform: rotateZ(0deg);
25 |   }
26 |   100% {
27 |     transform: rotateZ(360deg);
28 |   }
29 | }
30 | 
31 | circle {
32 |   animation: 1.4s ease-in-out infinite both circle-animation;
33 |   display: block;
34 |   fill: transparent;
35 |   stroke-linecap: round;
36 |   stroke-dasharray: 283;
37 |   stroke-dashoffset: 280;
38 |   stroke-width: 10px;
39 |   transform-origin: 50% 50%;
40 | }
41 | 
42 | @keyframes circle-animation {
43 |   0%,
44 |   25% {
45 |     stroke-dashoffset: 280;
46 |     transform: rotate(0);
47 |   }
48 | 
49 |   50%,
50 |   75% {
51 |     stroke-dashoffset: 75;
52 |     transform: rotate(45deg);
53 |   }
54 | 
55 |   100% {
56 |     stroke-dashoffset: 280;
57 |     transform: rotate(360deg);
58 |   }
59 | }
60 | </style>
61 | 


--------------------------------------------------------------------------------
/src/lib-components/Modal/TModal.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <teleport to="body">
  3 |     <transition leave-active-class="duration-200">
  4 |       <div
  5 |         v-show="modelValue"
  6 |         class="fixed flex inset-0 overflow-y-auto sm:px-0 z-50"
  7 |         :class="[
  8 |           {
  9 |             'items-center justify-center': position === 'center',
 10 |           },
 11 |         ]"
 12 |         scroll-region
 13 |       >
 14 |         <transition
 15 |           enter-active-class="ease-out duration-300"
 16 |           enter-from-class="opacity-0"
 17 |           enter-to-class="opacity-100"
 18 |           leave-active-class="ease-in duration-300"
 19 |           leave-from-class="opacity-100"
 20 |           leave-to-class="opacity-0"
 21 |         >
 22 |           <div
 23 |             v-show="modelValue"
 24 |             class="fixed inset-0 transform transition-all"
 25 |             @click="closeable ? close() : ''"
 26 |           >
 27 |             <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
 28 |           </div>
 29 |         </transition>
 30 | 
 31 |         <transition
 32 |           enter-active-class="ease-out duration-300"
 33 |           enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 34 |           enter-to-class="opacity-100 translate-y-0 sm:scale-100"
 35 |           leave-active-class="ease-in duration-300"
 36 |           leave-from-class="opacity-100 translate-y-0 sm:scale-100"
 37 |           leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 38 |         >
 39 |           <div
 40 |             id="draggable"
 41 |             v-if="modelValue"
 42 |             class="relative flex h-min max-h-[calc(100%-25px)] max-w-[calc(100%-25px)] flex-col mx-auto transform transition-all w-full"
 43 |             :class="[!isExpanded ? maxWidthClass + ' m-6' : '']"
 44 |             :draggable="draggable"
 45 |             @dragstart="dragStart($event)"
 46 |             @dragend="dragEnd($event)"
 47 |             ref="modalContainer"
 48 |           >
 49 |             <!--Header-->
 50 |             <div
 51 |               class="flex space-y-1 items-center px-4 py-1 bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-200 first:rounded-t-lg select-none"
 52 |               :class="[{ 'cursor-move': draggable }]"
 53 |             >
 54 |               <div>
 55 |                 <!--Header-->
 56 |                 <div v-if="header || $slots.header">
 57 |                   <span
 58 |                     v-if="header"
 59 |                     v-text="header"
 60 |                     class="text-xl font-semibold"
 61 |                   ></span>
 62 |                   <slot v-else name="header"></slot>
 63 |                 </div>
 64 |                 <!--Sub-header-->
 65 |                 <div v-if="subHeader || $slots.subHeader" class="text-xs">
 66 |                   <span v-if="subHeader" v-text="subHeader"></span>
 67 |                   <slot v-else name="subHeader"></slot>
 68 |                 </div>
 69 |               </div>
 70 | 
 71 |               <!--Top Action Icons-->
 72 |               <div
 73 |                 class="absolute flex justify-center items-center z-10 right-4 top-2 items-center space-x-2"
 74 |                 :class="[{ 'pr-2 pt-2': isExpanded }]"
 75 |               >
 76 |                 <!--Maximize Icon-->
 77 |                 <div
 78 |                   v-if="expandable"
 79 |                   @click="
 80 |                     isExpanded = !isExpanded;
 81 |                     updateSize();
 82 |                   "
 83 |                   class="flex justify-center items-center cursor-pointer"
 84 |                 >
 85 |                   <minimize-icon
 86 |                     v-if="isExpanded"
 87 |                     class="w-4 h-4 text-slate-600"
 88 |                   />
 89 |                   <expand-icon v-else class="w-4 h-4 text-slate-600" />
 90 |                 </div>
 91 | 
 92 |                 <!--Close Button-->
 93 |                 <div
 94 |                   v-if="modelValue && closeButton"
 95 |                   @click="close()"
 96 |                   class="flex justify-center items-center w-6 h-6 hover:bg-slate-200 rounded-full dark:hover:bg-rose-600 cursor-pointer"
 97 |                 >
 98 |                   <XMarkIcon
 99 |                     @click="$emit('update:modelValue', '')"
100 |                     class="w-4 h-4 text-slate-600 hover:text-rose-600 dark:text-slate-200 hover:dark:text-slate-200"
101 |                   />
102 |                 </div>
103 |               </div>
104 |             </div>
105 | 
106 |             <!--Body-->
107 |             <div
108 |               class="flex p-4 first:rounded-t-lg last:rounded-b-lg bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-200 overflow-y-auto"
109 |               :class="[
110 |                 {
111 |                   'flex-grow': isExpanded,
112 |                 },
113 |               ]"
114 |             >
115 |               <!--Special Content for Type-->
116 |               <div
117 |                 v-if="notification"
118 |                 class="flex flex-col w-full justify-center items-center"
119 |               >
120 |                 <!--Icon-->
121 |                 <div
122 |                   v-if="notificationType || $slots.hasOwnProperty('icon')"
123 |                   class="flex justify-center items-center rounded-full p-2 mb-2"
124 |                   :class="
125 |                     notificationType
126 |                       ? iconList.find((i) => i.key === notificationType).border
127 |                       : ''
128 |                   "
129 |                 >
130 |                   <svg
131 |                     v-if="notificationType"
132 |                     v-html="
133 |                       iconList.find((i) => i.key === notificationType).content
134 |                     "
135 |                     :class="[
136 |                       iconList.find((i) => i.key === notificationType).color,
137 |                     ]"
138 |                     class="w-24 h-24 iconAnimation"
139 |                   />
140 |                   <slot v-else name="icon" />
141 |                 </div>
142 | 
143 |                 <!--Title-->
144 |                 <p
145 |                   v-if="notificationTitle"
146 |                   v-text="notificationTitle"
147 |                   class="text-2xl font-semibold mb-2"
148 |                 ></p>
149 |                 <!--Message-->
150 |                 <span
151 |                   v-if="notificationMessage"
152 |                   v-text="notificationMessage"
153 |                 ></span>
154 |               </div>
155 | 
156 |               <!--Common Content-->
157 |               <div v-else class="w-full h-full">
158 |                 <slot></slot>
159 |               </div>
160 |             </div>
161 | 
162 |             <!--Footer-->
163 |             <div
164 |               v-if="$slots.footer || actionButtons.length > 0"
165 |               class="flex flex-row justify-end px-4 py-2 border-t bg-white dark:bg-slate-700 border-slate-300/75 dark:border-slate-500/75 text-right last:rounded-b-lg"
166 |             >
167 |               <slot v-if="$slots.footer" name="footer"></slot>
168 |               <div v-else class="flex justify-between items-center w-full">
169 |                 <t-button
170 |                   v-if="
171 |                     actionButtons.includes('cancel') &&
172 |                     actionButtonsDef.hasOwnProperty('cancel')
173 |                   "
174 |                   :design="actionButtonsDef.cancel.design"
175 |                   :color="actionButtonsDef.cancel.color"
176 |                   @click="close()"
177 |                 >
178 |                   <span
179 |                     v-if="actionButtonsDef.cancel.title"
180 |                     v-text="actionButtonsDef.cancel.title"
181 |                   ></span>
182 |                   <slot v-else name="action-cancel-button"></slot>
183 |                 </t-button>
184 |                 <div class="flex space-x-2">
185 |                   <t-button
186 |                     v-if="
187 |                       actionButtons.includes('reset') &&
188 |                       actionButtonsDef.hasOwnProperty('reset')
189 |                     "
190 |                     :design="actionButtonsDef.reset.design"
191 |                     :color="actionButtonsDef.reset.color"
192 |                     @click="$emit('reset')"
193 |                   >
194 |                     <span
195 |                       v-if="actionButtonsDef.reset.title"
196 |                       v-text="actionButtonsDef.reset.title"
197 |                     ></span>
198 |                     <slot v-else name="action-reset-button"></slot>
199 |                   </t-button>
200 |                   <t-button
201 |                     v-if="
202 |                       actionButtons.includes('submit') &&
203 |                       actionButtonsDef.hasOwnProperty('submit')
204 |                     "
205 |                     :design="actionButtonsDef.submit.design"
206 |                     :color="actionButtonsDef.submit.color"
207 |                     @click="$emit('save')"
208 |                   >
209 |                     <span
210 |                       v-if="actionButtonsDef.submit.title"
211 |                       v-text="actionButtonsDef.submit.title"
212 |                     ></span>
213 |                     <slot v-else name="action-submit-button"></slot>
214 |                   </t-button>
215 |                 </div>
216 |               </div>
217 |             </div>
218 |           </div>
219 |         </transition>
220 |       </div>
221 |     </transition>
222 |   </teleport>
223 | </template>
224 | 
225 | <script>
226 | /*Functions*/
227 | import {
228 |   computed,
229 |   defineComponent,
230 |   onMounted,
231 |   onUnmounted,
232 |   ref,
233 |   toRefs,
234 |   watch,
235 | } from "vue";
236 | 
237 | /*Component*/
238 | import TButton from "@/lib-components/Button/TButton";
239 | import XMarkIcon from "@/lib-components/Icons/XMarkIcon";
240 | import ExpandIcon from "@/lib-components/Icons/ExpandIcon";
241 | import MinimizeIcon from "@/lib-components/Icons/MinimizeIcon";
242 | 
243 | export default defineComponent({
244 |   name: "TModal",
245 |   components: { MinimizeIcon, ExpandIcon, XMarkIcon, TButton },
246 |   emits: ["close"],
247 | 
248 |   props: {
249 |     modelValue: {
250 |       type: Boolean,
251 |       default: false,
252 |     },
253 |     maxWidth: {
254 |       default: "2xl",
255 |     },
256 |     closeable: {
257 |       type: Boolean,
258 |       default: false,
259 |     },
260 |     closeButton: {
261 |       type: Boolean,
262 |       default: false,
263 |     },
264 |     header: {
265 |       type: String,
266 |       default: "",
267 |     },
268 |     subHeader: {
269 |       type: String,
270 |       default: "",
271 |     },
272 |     actionButtons: {
273 |       type: Array,
274 |       default: () => [],
275 |     },
276 |     draggable: {
277 |       type: Boolean,
278 |       default: false,
279 |     },
280 |     expandable: {
281 |       type: Boolean,
282 |       default: false,
283 |     },
284 |     position: {
285 |       type: String,
286 |       default: "top",
287 |     },
288 |     notification: {
289 |       type: Boolean,
290 |       default: false,
291 |     },
292 |     notificationType: {
293 |       type: String,
294 |       default: "",
295 |     },
296 |     notificationTitle: {
297 |       type: String,
298 |       default: "",
299 |     },
300 |     notificationMessage: {
301 |       type: String,
302 |       default: "",
303 |     },
304 |     actionButtonsDef: {
305 |       type: Object,
306 |       default: {
307 |         reset: {
308 |           color: "amber",
309 |           style: "filled",
310 |           title: "Reset",
311 |         },
312 |         submit: {
313 |           color: "emerald",
314 |           style: "filled",
315 |           title: "Submit",
316 |         },
317 |         cancel: {
318 |           color: "gray",
319 |           style: "link-plus",
320 |           title: "Cancel",
321 |         },
322 |       },
323 |     },
324 |   },
325 | 
326 |   setup(props, { emit }) {
327 |     /*Showing Status*/
328 |     const { closeable, modelValue, maxWidth } = toRefs(props);
329 |     const close = () => {
330 |       if (closeable.value) {
331 |         emit("update:modelValue", false);
332 |         emit("reset");
333 |         isExpanded.value = false;
334 |       }
335 |     };
336 | 
337 |     const closeOnEscape = (e) => {
338 |       if (e.key === "Escape" && modelValue.value && closeable.value) {
339 |         close();
340 |       }
341 |     };
342 | 
343 |     onMounted(() => document.addEventListener("keydown", closeOnEscape));
344 |     onUnmounted(() => {
345 |       document.removeEventListener("keydown", closeOnEscape);
346 |       document.body.style.overflow = null;
347 |     });
348 | 
349 |     watch(
350 |       modelValue,
351 |       () => {
352 |         if (modelValue.value) {
353 |           document.body.style.overflow = "hidden";
354 |         } else {
355 |           document.body.style.overflow = null;
356 |         }
357 |       },
358 |       { immediate: true }
359 |     );
360 | 
361 |     /*Icon List*/
362 |     const iconList = [
363 |       {
364 |         key: "success",
365 |         content:
366 |           '<svg fill="transparent" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" stroke="currentColor">\n' +
367 |           '  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />\n' +
368 |           "</svg>",
369 |         color: "text-green-500",
370 |         border: "border-green-500",
371 |       },
372 |       {
373 |         key: "warning",
374 |         content:
375 |           '<svg fill="transparent" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" stroke="currentColor">\n' +
376 |           '  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />\n' +
377 |           "</svg>",
378 |         color: "text-yellow-500",
379 |         border: "border-yellow-500",
380 |       },
381 |       {
382 |         key: "error",
383 |         content:
384 |           '<svg fill="transparent" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" stroke="currentColor">\n' +
385 |           '  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />\n' +
386 |           "</svg>",
387 |         color: "text-red-500",
388 |         border: "border-red-500",
389 |       },
390 |       {
391 |         key: "info",
392 |         content:
393 |           '<svg fill="transparent" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" stroke="currentColor">\n' +
394 |           '  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />\n' +
395 |           "</svg>",
396 |         color: "text-blue-500",
397 |         border: "border-blue-500",
398 |       },
399 |       {
400 |         key: "question",
401 |         content:
402 |           '<svg fill="transparent" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" stroke="currentColor">\n' +
403 |           '  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />\n' +
404 |           "</svg>",
405 |         color: "text-indigo-500",
406 |         border: "border-indigo-500",
407 |       },
408 |     ];
409 | 
410 |     /*Style*/
411 |     const maxWidthClass = computed(() => {
412 |       return {
413 |         sm: "sm:max-w-sm",
414 |         md: "sm:max-w-md",
415 |         lg: "sm:max-w-lg",
416 |         xl: "sm:max-w-xl",
417 |         "2xl": "sm:max-w-2xl",
418 |       }[maxWidth.value];
419 |     });
420 | 
421 |     /*Drag*/
422 |     const width = ref(window.innerWidth);
423 |     const height = ref(window.innerHeight);
424 | 
425 |     window.onresize = () => {
426 |       width.value = window.innerWidth;
427 |       height.value = window.innerHeight;
428 |     };
429 | 
430 |     const modalContainer = ref(null);
431 |     const clickDiff = ref({ x: 0, y: 0 });
432 | 
433 |     const dragStart = (e) => {
434 |       let modal = modalContainer.value.getBoundingClientRect();
435 |       clickDiff.value = {
436 |         x: e.clientX - modal.left,
437 |         y: e.clientY - modal.top,
438 |       };
439 |     };
440 | 
441 |     const dragEnd = (e) => {
442 |       let diff = { x: 0, y: 0 };
443 |       let modal = modalContainer.value.getBoundingClientRect();
444 |       /*X origin*/
445 |       if (e.clientX - clickDiff.value.x < 0) {
446 |         diff.x = 0;
447 |       } else if (e.clientX > width.value - (modal.width - clickDiff.value.x)) {
448 |         diff.x = width.value - modal.width;
449 |       } else {
450 |         diff.x = e.clientX - clickDiff.value.x;
451 |       }
452 | 
453 |       /*Y origin*/
454 |       if (e.clientY - clickDiff.value.y < 0) {
455 |         diff.y = 0;
456 |       } else if (
457 |         e.clientY >
458 |         height.value - (modal.height + clickDiff.value.y)
459 |       ) {
460 |         diff.y = height.value - (modal.height + clickDiff.value.y + 10);
461 |       } else {
462 |         diff.y = e.clientY - clickDiff.value.y;
463 |       }
464 | 
465 |       modalContainer.value.style.left = diff.x + "px";
466 |       modalContainer.value.style.top = diff.y + "px";
467 |     };
468 | 
469 |     /*Fullscreen*/
470 |     const isExpanded = ref(false);
471 |     const defaultStyle = ref(null);
472 |     const updateSize = () => {
473 |       if (!isExpanded) {
474 |         defaultStyle.value = modelValue.value.style;
475 |       }
476 |       if (modalContainer.value) {
477 |         if (isExpanded.value) {
478 |           modalContainer.value.style.width = width.value + "px";
479 |           modalContainer.value.style.height = height.value + "px";
480 |           modalContainer.value.style.padding = "10px";
481 |         } else {
482 |           modalContainer.value.style = defaultStyle.value
483 |             ? defaultStyle.value
484 |             : "";
485 |         }
486 |       }
487 |     };
488 | 
489 |     watch(
490 |       [width, height],
491 |       () => {
492 |         updateSize();
493 |       },
494 |       { immediate: true }
495 |     );
496 | 
497 |     return {
498 |       width,
499 |       height,
500 |       dragStart,
501 |       dragEnd,
502 |       modalContainer,
503 |       maxWidthClass,
504 |       isExpanded,
505 |       close,
506 |       updateSize,
507 |       iconList,
508 |     };
509 |   },
510 | });
511 | </script>
512 | 
513 | <style scoped>
514 | .iconAnimation {
515 |   animation: iconAnimation 700ms ease-in-out;
516 | }
517 | 
518 | @keyframes iconAnimation {
519 |   0% {
520 |     transform: scale(0.5) rotateY(0);
521 |   }
522 |   50% {
523 |     transform: scale(1.2);
524 |   }
525 |   100% {
526 |     transform: scale(1) rotateY(180deg);
527 |   }
528 | }
529 | </style>
530 | 


--------------------------------------------------------------------------------
/src/lib-components/index.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable import/prefer-default-export */
 2 | import "./../index.css";
 3 | 
 4 | export { default as TButton } from "./Button/TButton.vue";
 5 | export { default as TAlert } from "./Alert/TAlert.vue";
 6 | export { default as TContentCard } from "./ContentCard/TContentCard.vue";
 7 | export { default as TModal } from "./Modal/TModal.vue";
 8 | 
 9 | /*Form Components*/
10 | export { default as TTextInput } from "./Input/TTextInput.vue";
11 | export { default as TTextAreaInput } from "./Input/TTextAreaInput.vue";
12 | export { default as TSelectInput } from "./Input/TSelectInput.vue";
13 | export { default as TSwitchInput } from "./Input/TSwitchInput.vue";
14 | export { default as TInputGroup } from "./Input/TInputGroup.vue";
15 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   content: ["./src/**/**/*.{vue,js,ts,jsx,json,tsx}"],
 3 |   theme: {
 4 |     extend: {
 5 |       aspectRatio: {
 6 |         "4/3": "4 / 3",
 7 |         "16/9": "16 / 9",
 8 |       },
 9 |     },
10 |   },
11 |   plugins: [require("@tailwindcss/aspect-ratio")],
12 | };
13 | 


--------------------------------------------------------------------------------