├── .bitmap ├── .browserslistrc ├── .eslintignore ├── .eslintrc.js ├── .github └── workflows │ └── deploy.yml ├── .gitignore ├── .package.json ├── .prettierignore ├── .prettierrc ├── README.md ├── babel.config.js ├── contributors.md ├── copy-md-files.js ├── jest.config.js ├── package-lock.json ├── package.json ├── pnpm-lock.yaml ├── postcss.config.js ├── public ├── README.md ├── favicon.ico ├── index.html └── tailwind │ ├── TIcon.vue │ ├── accoirdion │ ├── README.md │ └── TAccordion.vue │ ├── alert │ ├── README.md │ └── TAlert.vue │ ├── animate │ ├── README.md │ └── TAnimate.vue │ ├── badge │ ├── README.md │ └── TBadge.vue │ ├── bottomSheet │ ├── README.md │ └── TBottomSheet.vue │ ├── breadcrumb │ ├── README.md │ └── TBreadcrumb.vue │ ├── button │ ├── README.md │ └── TButton.vue │ ├── card │ ├── README.md │ └── TCard.vue │ ├── carousel │ ├── README.md │ └── TCarousel.vue │ ├── checkbox │ ├── README.md │ └── TCheckbox.vue │ ├── collapsable │ ├── README.md │ └── TCollapsable.vue │ ├── collapsible │ ├── README.md │ └── TCollapsible.vue │ ├── drawer │ ├── README.md │ └── TDrawer.vue │ ├── dropdown │ ├── README.md │ ├── README.txt │ └── TDropdown.vue │ ├── fade │ ├── README.md │ └── TFade.vue │ ├── icon │ ├── README.md │ └── TIcon.vue │ ├── image │ ├── README.md │ └── TImage.vue │ ├── index.ts │ ├── loading │ ├── README.md │ └── TLoading.vue │ ├── menu │ ├── README.md │ ├── README.txt │ └── TMenu.vue │ ├── modal │ ├── README.md │ └── TModal.vue │ ├── numberPicker │ ├── README.md │ └── TNumberPicker.vue │ ├── numberTransformer │ ├── README.md │ └── TNumberTransformer.vue │ ├── paginantion │ └── TPagination.vue │ ├── pagination │ ├── README.md │ └── TPagination.vue │ ├── progress │ ├── README.md │ └── TProgressBar.vue │ ├── radio │ ├── README.md │ └── TRadio.vue │ ├── rangeSlider │ ├── README.md │ └── TRangeSlider.vue │ ├── rate │ ├── README.md │ └── TRate.vue │ ├── searchable │ ├── README.md │ └── TSearchable.vue │ ├── skeleton │ ├── README.md │ └── TSkeleton.vue │ ├── slider │ ├── README.md │ └── TSlider.vue │ ├── stepper │ ├── README.md │ └── TStepper.vue │ ├── switch │ ├── README.md │ └── TSwitch.vue │ ├── tab │ ├── README.md │ ├── TTabItem.vue │ └── TTabs.vue │ ├── table │ ├── README.md │ ├── TTable.vue │ └── TTh.vue │ ├── text-input │ ├── README.md │ └── TTextInput.vue │ ├── timeline │ ├── README.md │ └── TTimeline.vue │ ├── timer │ ├── README.md │ └── TCountDownTimer.vue │ ├── toast │ ├── README.md │ └── TToast.vue │ ├── tooltip │ ├── README.md │ └── TTooltip.vue │ ├── triangle │ └── TTriangle.vue │ └── zoom │ ├── README.md │ └── TZoom.vue ├── src ├── App.vue ├── assets │ ├── css │ │ └── index.css │ └── logo.png ├── components │ ├── TabItemChildTest.vue │ └── tailwind │ │ ├── accoirdion │ │ ├── README.md │ │ └── TAccordion.vue │ │ ├── alert │ │ ├── README.md │ │ └── TAlert.vue │ │ ├── animate │ │ ├── README.md │ │ └── TAnimate.vue │ │ ├── badge │ │ ├── README.md │ │ └── TBadge.vue │ │ ├── bottomSheet │ │ ├── README.md │ │ └── TBottomSheet.vue │ │ ├── breadcrumb │ │ ├── README.md │ │ └── TBreadcrumb.vue │ │ ├── button │ │ ├── README.md │ │ └── TButton.vue │ │ ├── card │ │ ├── README.md │ │ └── TCard.vue │ │ ├── carousel │ │ ├── README.md │ │ └── TCarousel.vue │ │ ├── checkbox │ │ ├── README.md │ │ └── TCheckbox.vue │ │ ├── collapsible │ │ ├── README.md │ │ └── TCollapsible.vue │ │ ├── drawer │ │ ├── README.md │ │ └── TDrawer.vue │ │ ├── dropdown │ │ ├── README.md │ │ └── TDropdown.vue │ │ ├── fade │ │ ├── README.md │ │ └── TFade.vue │ │ ├── icon │ │ ├── README.md │ │ └── TIcon.vue │ │ ├── image │ │ ├── README.md │ │ └── TImage.vue │ │ ├── index.ts │ │ ├── loading │ │ ├── README.md │ │ └── TLoading.vue │ │ ├── menu │ │ ├── README.md │ │ └── TMenu.vue │ │ ├── modal │ │ ├── README.md │ │ └── TModal.vue │ │ ├── numberPicker │ │ ├── README.md │ │ └── TNumberPicker.vue │ │ ├── numberTransformer │ │ ├── README.md │ │ └── TNumberTransformer.vue │ │ ├── pagination │ │ ├── README.md │ │ └── TPagination.vue │ │ ├── progress │ │ ├── README.md │ │ └── TProgressBar.vue │ │ ├── radio │ │ ├── README.md │ │ └── TRadio.vue │ │ ├── rangeSlider │ │ ├── README.md │ │ └── TRangeSlider.vue │ │ ├── rate │ │ ├── README.md │ │ └── TRate.vue │ │ ├── searchable │ │ ├── README.md │ │ └── TSearchable.vue │ │ ├── skeleton │ │ ├── README.md │ │ └── TSkeleton.vue │ │ ├── slider │ │ ├── README.md │ │ └── TSlider.vue │ │ ├── stepper │ │ ├── README.md │ │ └── TStepper.vue │ │ ├── switch │ │ ├── README.md │ │ └── TSwitch.vue │ │ ├── tab │ │ ├── README.md │ │ ├── TTabItem.vue │ │ └── TTabs.vue │ │ ├── table │ │ ├── README.md │ │ ├── TTable.vue │ │ └── TTh.vue │ │ ├── text-input │ │ ├── README.md │ │ └── TTextInput.vue │ │ ├── timeline │ │ ├── README.md │ │ └── TTimeline.vue │ │ ├── timer │ │ ├── README.md │ │ └── TCountDownTimer.vue │ │ ├── toast │ │ ├── README.md │ │ └── TToast.vue │ │ ├── tooltip │ │ ├── README.md │ │ └── TTooltip.vue │ │ ├── triangle │ │ └── TTriangle.vue │ │ └── zoom │ │ ├── README.md │ │ └── TZoom.vue ├── compositionFunctions │ ├── clickEvents.ts │ ├── delayHandler.ts │ ├── expose │ │ ├── debounce.ts │ │ └── format.ts │ ├── image.ts │ ├── intersect.ts │ ├── interval.ts │ ├── isScrolling.ts │ ├── keyboardEvents.ts │ ├── maxSize.ts │ ├── offset.ts │ ├── rangeSlider.ts │ ├── scroll.ts │ ├── settings.ts │ ├── swipe.ts │ ├── switchAndCheckbox.ts │ ├── table.ts │ ├── useResize.ts │ └── visible.ts ├── helpers │ └── generalHelper.ts ├── index.ts ├── main.ts ├── router │ └── index.ts ├── shims-vue.d.ts ├── utility │ ├── commonProps │ │ └── SwitchAndCheckboxProps.ts │ ├── css-helper.ts │ ├── enums │ │ ├── ScrollDirections.ts │ │ └── SkeletonTypes.ts │ └── types │ │ ├── TSettings.ts │ │ └── base-component-types.ts └── views │ ├── Accordion.vue │ ├── Alert.vue │ ├── Ali.vue │ ├── Animate.vue │ ├── Badge.vue │ ├── BottomSheet.vue │ ├── Breadcrumb.vue │ ├── Button.vue │ ├── Card.vue │ ├── Carousel.vue │ ├── Checkbox.vue │ ├── Drawer.vue │ ├── Dropdown.vue │ ├── Fade.vue │ ├── Home.vue │ ├── Image.vue │ ├── Loading.vue │ ├── Menu.vue │ ├── Modal.vue │ ├── Mohammad.vue │ ├── NumberPicker.vue │ ├── NumberTransformer.vue │ ├── Pagination.vue │ ├── ProgressBar.vue │ ├── Radio.vue │ ├── RangeSlider.vue │ ├── Rating.vue │ ├── Searchable.vue │ ├── Skeleton.vue │ ├── Slider.vue │ ├── Stepper.vue │ ├── Switch.vue │ ├── Tab.vue │ ├── Table.vue │ ├── TextInput.vue │ ├── Timeline.vue │ ├── Timer.vue │ ├── Toast.vue │ ├── Tooltip.vue │ ├── Zia.vue │ └── Zoom.vue ├── tailwind.config.js ├── tests └── unit │ └── example.spec.ts ├── tsconfig.json ├── types └── index.d.ts ├── vue.config.js ├── webpack.config.js └── yarn.lock /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | copy-md-files.js -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | extends: [ 7 | "plugin:vue/vue3-essential", 8 | "eslint:recommended", 9 | "@vue/typescript/recommended", 10 | "@vue/prettier", 11 | "@vue/prettier/@typescript-eslint" 12 | ], 13 | parserOptions: { 14 | ecmaVersion: 2020 15 | }, 16 | rules: { 17 | "prettier/prettier": [ 18 | "warn", 19 | { 20 | singleQuote: false, 21 | semi: true 22 | } 23 | ], 24 | "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", 25 | "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", 26 | "@typescript-eslint/ban-ts-comment": "off", 27 | "@typescript-eslint/ban-ts-ignore": "off", 28 | "@typescript-eslint/no-namespace": "off", 29 | "@typescript-eslint/no-explicit-any": "off" 30 | }, 31 | overrides: [ 32 | { 33 | files: [ 34 | "**/__tests__/*.{j,t}s?(x)", 35 | "**/tests/unit/**/*.spec.{j,t}s?(x)" 36 | ], 37 | env: { 38 | jest: true 39 | } 40 | } 41 | ] 42 | }; 43 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Deploy to Github Pages 2 | on: 3 | push: 4 | branches: 5 | - master 6 | 7 | jobs: 8 | deploy: 9 | name: Deploy Application 10 | runs-on: ubuntu-latest 11 | steps: 12 | - name: Checkout Repo 13 | uses: actions/checkout@master 14 | - name: Create Node Environment 15 | uses: actions/setup-node@v1 16 | with: 17 | node-version: 14.x 18 | - name: Install Packages and Build Application 19 | run: | 20 | npm install -g @vue/cli yarn 21 | yarn install 22 | yarn build 23 | - name: Deploy 24 | uses: s0/git-publish-subdir-action@develop 25 | env: 26 | REPO: self 27 | BRANCH: gh-pages 28 | FOLDER: dist 29 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 30 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /.package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwind-vue3", 3 | "version": "0.4.9", 4 | "main": "./dist/tailwind-vue3.common.js", 5 | "files": [ 6 | "dist/*", 7 | "types/*", 8 | "src/*", 9 | "public/*", 10 | "*.json", 11 | "*.js" 12 | ], 13 | "types": "./types/index.d.ts", 14 | "scripts": { 15 | "serve": "vue-cli-service serve --open", 16 | "build": "vue-cli-service build", 17 | "build-bundle": "vue-cli-service build --target lib --name tailwind-vue3 ./src/index.js", 18 | "test:unit": "vue-cli-service test:unit", 19 | "lint": "vue-cli-service lint", 20 | "tailwind-config-viewer": "tailwind-config-viewer -o", 21 | "view": "serve -s dist", 22 | "publish-package": "npm publish --access public" 23 | }, 24 | "dependencies": { 25 | "core-js": "^3.6.5", 26 | "moment": "^2.29.1", 27 | "vue": "^3.0.0", 28 | "vue-router": "^4.0.2" 29 | }, 30 | "repository": { 31 | "type": "git", 32 | "url": "git+https://github.com/ziaadini/tailwind-vue" 33 | }, 34 | "keywords": [ 35 | "vue3", 36 | "tailwind", 37 | "tailwindvue3" 38 | ], 39 | "devDependencies": { 40 | "@tailwindcss/postcss7-compat": "^2.0.2", 41 | "@types/jest": "^24.0.19", 42 | "@typescript-eslint/eslint-plugin": "^2.33.0", 43 | "@typescript-eslint/parser": "^2.33.0", 44 | "@vue/cli-plugin-babel": "^4.5.11", 45 | "@vue/cli-plugin-eslint": "~4.5.0", 46 | "@vue/cli-plugin-router": "~4.5.0", 47 | "@vue/cli-plugin-typescript": "~4.5.0", 48 | "@vue/cli-plugin-unit-jest": "~4.5.0", 49 | "@vue/cli-service": "~4.5.0", 50 | "@vue/compiler-sfc": "^3.0.0", 51 | "@vue/eslint-config-prettier": "^6.0.0", 52 | "@vue/eslint-config-typescript": "^5.0.2", 53 | "@vue/test-utils": "^2.0.0-0", 54 | "autoprefixer": "^9.8.6", 55 | "eslint": "^6.7.2", 56 | "eslint-plugin-prettier": "^3.1.3", 57 | "eslint-plugin-vue": "^7.0.0-0", 58 | "node-sass": "^5.0.0", 59 | "postcss": "^7.0.35", 60 | "prettier": "^1.19.1", 61 | "sass-loader": "^10.1.0", 62 | "tailwind-config-viewer": "^1.4.0", 63 | "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2", 64 | "typescript": "~3.9.3", 65 | "vue-jest": "^5.0.0-0" 66 | } 67 | } -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | *.md -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": false, 3 | "semi": true 4 | } 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # tailwind-vue3 2 | 3 | ## Project setup 4 | ``` 5 | yarn install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | yarn serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | yarn build 16 | ``` 17 | 18 | ### Run your unit tests 19 | ``` 20 | yarn test:unit 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | yarn lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/cli-plugin-babel/preset"] 3 | }; 4 | -------------------------------------------------------------------------------- /contributors.md: -------------------------------------------------------------------------------- 1 | ###### Contributors 2 | [Ali Zangiabadi](https://github.com/alizangiabadicode) 3 | 236 Commits / 60693++ / 23528-- 4 | 60.36% ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

5 | [yadollah ziaadini](https://github.com/ziaadini) 6 | 152 Commits / 59380++ / 20219-- 7 | 38.87% ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

8 | [null](https://github.com/Tefoh) 9 | 2 Commits / 27227++ / 21-- 10 | 00.51% ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

11 | [Mohammad Amin Mokhtari](https://github.com/aminmokhtari94) 12 | 1 Commits / 50++ / 6-- 13 | 00.26% ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

14 | ###### [Generated](https://github.com/jakeleboeuf/contributor) on Sat Mar 27 2021 09:28:30 GMT+0430 (Iran Daylight Time) -------------------------------------------------------------------------------- /copy-md-files.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const fs = require("fs"); 3 | function copyFileSync(source, target) { 4 | let targetFile = target; 5 | 6 | // If target is a directory, a new file with the same name will be created 7 | if (fs.existsSync(target)) { 8 | if (fs.lstatSync(target).isDirectory()) { 9 | targetFile = path.join(target, path.basename(source)); 10 | } 11 | } 12 | fs.writeFileSync(targetFile, fs.readFileSync(source)); 13 | } 14 | 15 | function copyFolderRecursiveSync(source, target) { 16 | let files = []; 17 | 18 | // Check if folder needs to be created or integrated 19 | const targetFolder = path.join(target, path.basename(source)); 20 | if (!fs.existsSync(targetFolder)) { 21 | fs.mkdirSync(targetFolder); 22 | } 23 | 24 | // Copy 25 | if (fs.lstatSync(source).isDirectory()) { 26 | files = fs.readdirSync(source); 27 | files.forEach(function(file) { 28 | const curSource = path.join(source, file); 29 | if (fs.lstatSync(curSource).isDirectory()) { 30 | copyFolderRecursiveSync(curSource, targetFolder); 31 | } else { 32 | copyFileSync(curSource, targetFolder); 33 | } 34 | }); 35 | } 36 | } 37 | 38 | copyFolderRecursiveSync(`./src/components/tailwind/`, `./public/`); 39 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel", 3 | transform: { 4 | "^.+\\.vue$": "vue-jest" 5 | } 6 | }; 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwind-vue3", 3 | "version": "0.5.2", 4 | "main": "./dist/tailwind-vue3.common.js", 5 | "files": [ 6 | "dist/*", 7 | "types/*", 8 | "src/*", 9 | "public/*", 10 | "*.json", 11 | "*.js" 12 | ], 13 | "types": "./types/index.d.ts", 14 | "scripts": { 15 | "serve": "node ./copy-md-files && vue-cli-service serve --open", 16 | "build": "vue-cli-service build", 17 | "build-bundle": "vue-cli-service build --target lib --name tailwind-vue3 ./src/index.ts", 18 | "test:unit": "vue-cli-service test:unit", 19 | "lint": "vue-cli-service lint", 20 | "tailwind-config-viewer": "tailwind-config-viewer -o", 21 | "view": "serve -s dist", 22 | "publish-package": "npm publish --access public" 23 | }, 24 | "dependencies": { 25 | "core-js": "^3.6.5", 26 | "moment": "^2.29.1", 27 | "vue": "^3.0.0", 28 | "vue-router": "^4.0.2", 29 | "@tailwindcss/typography": "^0.4.0", 30 | "simple-syntax-highlighter": "^2.0.4", 31 | "vue3-markdown-it": "^1.0.7" 32 | }, 33 | "repository": { 34 | "type": "git", 35 | "url": "git+https://github.com/ziaadini/tailwind-vue" 36 | }, 37 | "keywords": [ 38 | "vue3", 39 | "tailwind", 40 | "tailwindvue3" 41 | ], 42 | "devDependencies": { 43 | "@tailwindcss/postcss7-compat": "^2.0.2", 44 | "@types/jest": "^24.0.19", 45 | "@typescript-eslint/eslint-plugin": "^2.33.0", 46 | "@typescript-eslint/parser": "^2.33.0", 47 | "@vue/cli-plugin-babel": "^4.5.11", 48 | "@vue/cli-plugin-eslint": "~4.5.0", 49 | "@vue/cli-plugin-router": "~4.5.0", 50 | "@vue/cli-plugin-typescript": "~4.5.0", 51 | "@vue/cli-plugin-unit-jest": "~4.5.0", 52 | "@vue/cli-service": "~4.5.0", 53 | "@vue/compiler-sfc": "^3.0.0", 54 | "@vue/eslint-config-prettier": "^6.0.0", 55 | "@vue/eslint-config-typescript": "^5.0.2", 56 | "@vue/test-utils": "^2.0.0-0", 57 | "autoprefixer": "^9.8.6", 58 | "eslint": "^6.7.2", 59 | "eslint-plugin-prettier": "^3.1.3", 60 | "eslint-plugin-vue": "^7.0.0-0", 61 | "node-sass": "^5.0.0", 62 | "postcss": "^7.0.35", 63 | "prettier": "^1.19.1", 64 | "sass-loader": "^10.1.0", 65 | "tailwind-config-viewer": "^1.4.0", 66 | "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.4", 67 | "typescript": "~3.9.3", 68 | "vue-jest": "^5.0.0-0" 69 | }, 70 | "contributors": [ 71 | { 72 | "name": null, 73 | "email": null, 74 | "url": "https://github.com/Tefoh", 75 | "contributions": 2, 76 | "additions": 27227, 77 | "deletions": 21, 78 | "hireable": null 79 | }, 80 | { 81 | "name": "yadollah ziaadini", 82 | "email": null, 83 | "url": "https://github.com/ziaadini", 84 | "contributions": 152, 85 | "additions": 59380, 86 | "deletions": 20219, 87 | "hireable": null 88 | }, 89 | { 90 | "name": "Ali Zangiabadi", 91 | "email": null, 92 | "url": "https://github.com/alizangiabadicode", 93 | "contributions": 236, 94 | "additions": 60693, 95 | "deletions": 23528, 96 | "hireable": null 97 | }, 98 | { 99 | "name": "Mohammad Amin Mokhtari", 100 | "email": null, 101 | "url": "https://github.com/aminmokhtari94", 102 | "contributions": 1, 103 | "additions": 50, 104 | "deletions": 6, 105 | "hireable": null 106 | } 107 | ] 108 | } 109 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {} 5 | } 6 | }; 7 | -------------------------------------------------------------------------------- /public/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | | name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | rounded | Boolean | false | make button rounded | 5 | | variant | string | primary | background color of the button | 6 | | icon | string | "" | right icon of button | 7 | | outline | boolean | false | outline color of button | 8 | | ripple | boolean | false | show a ripple effect when clicked | 9 | | to | object|string | "" | button as router link | 10 | | nuxt | boolean | false | `nuxt-link` instead of `router-link` when passing `to` prop | 11 | | full | boolean | false | full width button | 12 | | loading | boolean | false | to show a loading in button | 13 | | loadingProps | object | {} | props for loading component | 14 | 15 | ### slots 16 | | name | description 17 | | ------------ | ------------ | 18 | | default | inner text of button | 19 | | loading | for custom loading | 20 | 21 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ziaadini/tailwind-vue/b6fdb2d1944accde595be52aa1fb26db7d300a55/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 12 | 15 |
16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /public/tailwind/TIcon.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 44 | -------------------------------------------------------------------------------- /public/tailwind/accoirdion/README.md: -------------------------------------------------------------------------------- 1 | | Props | Type | Default | Description | 2 | | ------------ | ------------ | ------------ | ------------ | 3 | | items | Array of Object | - | for example : [{title:"my title",text:"text",selected:true},{ title:"my second title",text:"my second text",disabled:true}] | 4 | | collapse | boolean | false | convert accordion to collapse if `true` other items will not close | 5 | 6 | 7 | 8 | ### slots 9 | | name | description 10 | | ------------ | ------------ | 11 | | title | for custom styled title| 12 | | text | for custom styled text| 13 | 14 | component will pass any useful information to slots : 15 | 1. bind -> current item 16 | 2. show -> if item is showing 17 | 3. index -> current item index 18 | -------------------------------------------------------------------------------- /public/tailwind/alert/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | | Name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | v-model | number or boolean |0| state of alert (close or open) | 5 | | show | number or boolean |0| state of alert (close or open) when use show close button doesn't appear | 6 | | icon | string | "" | material icon name | 7 | | iconClass | string | "" | css class for icon | 8 | | variant | string | primary | background variant of alert | 9 | | allocateSpace | Boolean | false | reserve space | 10 | ### slots 11 | | name | description 12 | | ------------ | ------------ | 13 | | default | the content of alert | 14 | 15 | -------------------------------------------------------------------------------- /public/tailwind/animate/README.md: -------------------------------------------------------------------------------- 1 | | Props | Type | Default | Description | 2 | | ------------ | ------------ | ------------ | ------------ | 3 | | show | Number, Boolean | - | visible state | 4 | | duration | Number | 300 | milliSecond | 5 | | easeClass | String | ease-out | tailwind ease class | 6 | | start | String | opacity-0 | start state | 7 | | end | String | opacity-1 | end state | 8 | | transitionClass | String | transition-all | transition class | 9 | | allocateSpace | Boolean | false | reserve space | 10 | 11 | 12 | ### slots 13 | | name | description 14 | | ------------ | ------------ | 15 | | default | render children | 16 | 17 | ##### slot example 18 | 19 | ```vue 20 | 24 | ``` 25 | because component play around width and height when it's not visible, 26 | therefore className is useful when child container has fix position 27 | 28 | the `delayedShow` : when `show` prop is truly will be true synchronously but when 29 | `show` is falsy will not false until animation has been finished -------------------------------------------------------------------------------- /public/tailwind/animate/TAnimate.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /public/tailwind/badge/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | | name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | text | string | "" | inner text of badge | 5 | | variant | string | "primary" | background color of badge | 6 | | position | string | topRight | sets the position of badge on the container | 7 | | rounded | boolean | true | sets rounded to border of badge | 8 | | size | string | "md" | sets the size of badge contain(xs,sm,md,lg) | 9 | 10 | ### slots 11 | | name | description 12 | | ------------ | ------------ | 13 | | default | element you want show badge on it for example your button | 14 | | content | you can pass it instead of text prop | 15 | 16 | -------------------------------------------------------------------------------- /public/tailwind/badge/TBadge.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 104 | -------------------------------------------------------------------------------- /public/tailwind/bottomSheet/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | | name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | v-model | number or boolean |0| state of modal (close or open) | 5 | | title | string | "" | title for modal | 6 | | titleTag | string | h4 | which html tag use for title | 7 | | hasCloseButton | boolean | true | show close button to the user | 8 | | closeCallback | function | ()=>{} | if return truly value modal will close if not will not | 9 | | eager | boolean | false | mount content even when modal is close set to true when content is useful for seo 10 | | maxSize | string | full | set max size base on `xs, sm, md, lg, full` 11 | | teleportTo | string | - | for teleport modal content to specific selector for example `'#modal-content'` 12 | | backDrop | Boolean | true | show backdrop 13 | we strongly recommend use teleport 14 | 15 | ### slots 16 | | name | description 17 | | ------------ | ------------ | 18 | | title | for custom title | 19 | | closeButton | for custom close button | 20 | 21 | -------------------------------------------------------------------------------- /public/tailwind/breadcrumb/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | 3 | | name | Type | Default | Description | 4 | | -------------- | -------- | --------------- | ---------------------------------------------------------------------------------- | 5 | | items | | BreadCrumb.Root | input data for the bread crumb | 6 | | nuxt | boolean | false | if true nuxt link will be generated | 7 | 8 | we strongly recommend use teleport 9 | 10 | ### slots 11 | 12 | | name | description | 13 | | ----------- | ----------------------- | 14 | | default | for custom style on each item of breadcrumb | 15 | | beforeLink | for rendering before any item in the breadcrumb | 16 | | afterLink | for rendering after any item in the breadcrumb | 17 | -------------------------------------------------------------------------------- /public/tailwind/breadcrumb/TBreadcrumb.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 76 | -------------------------------------------------------------------------------- /public/tailwind/button/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | 3 | | name | Type | Default | Description | 4 | | ------------ | ------- | ------- | -------------------------------------------------------------------- | 5 | | rounded | Boolean | false | make button rounded | 6 | | fab | Boolean | false | add fab ability to button | 7 | | variant | string | white | background color of the button | 8 | | size | string | md | size of the button | 9 | | color | string | "" | when used default variant would be ignored and color is used instead | 10 | | icon | string | "" | right icon of button | 11 | | disabled | boolean | false | disable button | 12 | | outline | boolean | false | outline color of button | 13 | | ripple | boolean | false | show a ripple effect when clicked | 14 | | to | object | string | "" | 15 | | nuxt | boolean | false | `nuxt-link` instead of `router-link` when passing `to` prop | 16 | | full | boolean | false | full width button | 17 | | loading | boolean | false | to show a loading in button | 18 | | loadingProps | object | {} | loading component props | 19 | 20 | ### slots 21 | 22 | | name | description | 23 | | ------- | -------------------- | 24 | | default | inner text of button | 25 | | loading | for custom loading | 26 | -------------------------------------------------------------------------------- /public/tailwind/card/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | | name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | title | string | '' | card title | 5 | | description | string | '' | card description | 6 | 7 | ### slots 8 | | name | description 9 | | ------------ | ------------ | 10 | | default | show under description | 11 | 12 | -------------------------------------------------------------------------------- /public/tailwind/card/TCard.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /public/tailwind/carousel/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | 3 | | name | Type | Default | Description | 4 | | ----------------- | ------- | ------- | -------------------------------------------------- | 5 | | scale | boolean | true | when true scale animation gets added | 6 | | rotate | boolean | true | when true rotate animation gets rotate | 7 | | autoPlay | boolean | true | auto play in the carousel | 8 | | autoPlaceInterval | number | 2000 | interval between each image change in milliseconds | 9 | | modelValue | number | 0 | selected index of carousel | 10 | | items | array | [] | items of the carousel to show | 11 | | swipeThreshold | Number | 50 | number of the pixels needed for swipe | 12 | | swipeEnabled | boolean | true | when true carousel would change with swipe | 13 | | imageProps | object | {} | props to send to t-image | 14 | 15 | ### slots 16 | 17 | | name | description | 18 | | ----------- | --------------------------- | 19 | | default | slot for each carousel item | 20 | | rightButton | slot for right side button | 21 | | leftButton | slot for left side button | 22 | | caption | slot for the caption | 23 | | pagination | slot for the pagination | 24 | 25 | 26 | -------------------------------------------------------------------------------- /public/tailwind/checkbox/README.md: -------------------------------------------------------------------------------- 1 | | Props | Type | Default | Description | 2 | | ------------ | ------------ | ------------ | ------------ | 3 | | v-model | Array, String, Number, Boolean, Object | - | v-model supported with input | 4 | | value | Array, String, Number, Boolean, Object | - | pass it when initial of v-model is array | 5 | | trueValue | Array, String, Number, Boolean, Object | - | true value will emit when switch is on and initial of v-model is not an array | 6 | | falseValue | Array, String, Number, Boolean, Object | - | false value will emit when switch is off and initial of v-model is not an array | 7 | | variant | string | primary | pass a valid variant color | 8 | | disabled | boolean | false | to disable input | 9 | | hideInput | boolean | false | combine it with label slot is useful when you want have a custom radio style | 10 | | activeClass | string | '' | class when it is checked | 11 | | inActiveClass | string | '' | class when it is not checked | 12 | 13 | ### slots 14 | | name | description 15 | | ------------ | ------------ | 16 | | label | for custom styled label| 17 | 18 | **warning!** don't use block element like `div` inside label slot because component use `label` tag as a container 19 | and, it's wrong to use block elements inside non-block elements 20 | ##### slot example 21 | 22 | ```vue 23 | 28 | ``` -------------------------------------------------------------------------------- /public/tailwind/checkbox/TCheckbox.vue: -------------------------------------------------------------------------------- 1 | 55 | 56 | 91 | 92 | 97 | -------------------------------------------------------------------------------- /public/tailwind/collapsable/README.md: -------------------------------------------------------------------------------- 1 | | Props | Type | Default | Description | 2 | | ------------ | ------------ | ------------ | ------------ | 3 | | show | number, Boolean | - | visible state | 4 | | duration | number | 300 | milliSecond | 5 | | easeClass | string | ease-in-out | tailwind ease class | 6 | | tag | string | div | wrapper tag | 7 | 8 | 9 | ### slots 10 | | name | description 11 | | ------------ | ------------ | 12 | | default | render children | -------------------------------------------------------------------------------- /public/tailwind/collapsable/TCollapsable.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /public/tailwind/collapsible/README.md: -------------------------------------------------------------------------------- 1 | | Props | Type | Default | Description | 2 | | ------------ | ------------ | ------------ | ------------ | 3 | | show | number, Boolean | - | visible state | 4 | | duration | number | 300 | milliSecond | 5 | | easeClass | string | ease-in-out | tailwind ease class | 6 | | tag | string | div | wrapper tag | 7 | 8 | 9 | ### slots 10 | | name | description 11 | | ------------ | ------------ | 12 | | default | render children | -------------------------------------------------------------------------------- /public/tailwind/collapsible/TCollapsible.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /public/tailwind/drawer/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | | name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | v-model | number or boolean |0| state of modal (close or open) | 5 | | title | string | "" | title for modal | 6 | | titleTag | string | h4 | which html tag use for title | 7 | | hasCloseButton | boolean | true | show close button to the user | 8 | | closeCallback | function | ()=>{} | if return truly value modal will close if not will not | 9 | | eager | boolean | false | mount content even when modal is close set to true when content is useful for seo 10 | | maxSize | string | full | set max size base on `xs, sm, md, lg, full` 11 | | full | boolean | false | full-width drawer 12 | | left | boolean | false | open from left side 13 | | teleportTo | string | - | for teleport modal content to specific selector for example `'#modal-content'` 14 | | backDrop | Boolean | true | show backdrop 15 | 16 | we strongly recommend use teleport 17 | 18 | ### slots 19 | | name | description 20 | | ------------ | ------------ | 21 | | title | for custom title | 22 | | closeButton | for custom close button | 23 | 24 | -------------------------------------------------------------------------------- /public/tailwind/dropdown/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | 3 | | name | Type | Default | Description | 4 | | ------------------ | ------------------------------------ | ------- | --------------------------------------------------------------- | 5 | | variant | string | "white" | sets the bg color | 6 | | divide | boolean | true | adds border between items of dropdown | 7 | | outline | boolean | false | causes the component to have border and no background | 8 | | placeholder | string | "" | the placeholder when no item is selected | 9 | | rounded | boolean | false | causes the component to have a rounded border | 10 | | hover | boolean | false | open dropdown by hover | 11 | | top | boolean | false | open dropdown on the top | 12 | | items | array of objects or array of strings | - | items to show in dropdown | 13 | | opened | boolean | false | allows to control dropdown open or close state from outside | 14 | | searchKey | string | "" | input of the search element | 15 | | labelField | string | "label" | label field | 16 | | valueField | string | "value" | value field | 17 | | disabled | boolean | false | when passed caused the dropdown not to open, or close instantly | 18 | | toggleByHeader | boolean | true | if false clicking input will not toggle the dropdown | 19 | | parentColorClasses | string | "" | if passed default parent variant class would be ignored | 20 | | itemsColorClasses | string | "" | if passed default item variant class would be ignored | 21 | | animationDuration | string | "200" | changes duration of the animation in ms | 22 | | animationDelay | string | "0" | delay of the animation in ms | 23 | | animationDelayType | string | "" | delay of the animation in ms | 24 | | triangleProps | Object | {} | props to send to triangle | 25 | 26 | ### slots 27 | -------------------------------------------------------------------------------- /public/tailwind/dropdown/README.txt: -------------------------------------------------------------------------------- 1 | ### props 2 | | name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | variant | string | "primary" | sets the bg color | 5 | | disbaled | boolean | false | when passed caused the dropdown not to open, or close instantly | 6 | | outline | boolean | false | causes the component to have border and no background | 7 | | rounded | boolean | false | causes the component to have a rounded border | 8 | | opened | boolean | false | allows to control dropdown open or close state from outside | 9 | | placeholder | string | "" | the placeholder when no item is selected | 10 | | items | {label: string; value: any}[] OR string[] | - | items to show when dropdown clicked | 11 | 12 | ### slots 13 | -------------------------------------------------------------------------------- /public/tailwind/fade/README.md: -------------------------------------------------------------------------------- 1 | | Props | Type | Default | Description | 2 | | ------------ | ------------ | ------------ | ------------ | 3 | | show | Number, Boolean | - | visible state | 4 | | duration | Number | 300 | milliSecond | 5 | | easeClass | String | ease-out | tailwind ease class | 6 | | opacityClass | String | opacity-1 | final opacity | 7 | | allocateSpace | Boolean | false | reserve space | 8 | 9 | 10 | ### slots 11 | | name | description 12 | | ------------ | ------------ | 13 | | default | render children | 14 | 15 | ##### slot example 16 | 17 | ```vue 18 | 22 | ``` 23 | because component play around width and height when it's not visible, 24 | therefore className is useful when child container has fix position 25 | 26 | the `delayedShow` : when `show` prop is truly will be true synchronously but when 27 | `show` is falsy will not false until animation has been finished -------------------------------------------------------------------------------- /public/tailwind/fade/TFade.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /public/tailwind/icon/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | | name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | name | string | "" | material icon name | 5 | 6 | ### slots 7 | | name | description 8 | | ------------ | ------------ | 9 | 10 | -------------------------------------------------------------------------------- /public/tailwind/icon/TIcon.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 37 | -------------------------------------------------------------------------------- /public/tailwind/image/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | 3 | | name | Type | Default | Description | 4 | | ------- | ------- | ------- | -------------------------------------------------------------------------- | 5 | | src | string | "" | source of the image | 6 | | default | string | "" | source of the default image image | 7 | | lazy | boolean | false | when passed causes the images to lazy load(when the were seen in the page) | 8 | 9 | ### slots 10 | | loader | slot to show when image is loading | 11 | -------------------------------------------------------------------------------- /public/tailwind/image/TImage.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 118 | -------------------------------------------------------------------------------- /public/tailwind/index.ts: -------------------------------------------------------------------------------- 1 | export { default as TAccordion } from "./accoirdion/TAccordion.vue"; 2 | export { default as TAlert } from "./alert/TAlert.vue"; 3 | export { default as TAnimate } from "./animate/TAnimate.vue"; 4 | export { default as TBadge } from "./badge/TBadge.vue"; 5 | export { default as TBottomSheet } from "./bottomSheet/TBottomSheet.vue"; 6 | export { default as TBreadcrumb } from "./breadcrumb/TBreadcrumb.vue"; 7 | export { default as TButton } from "./button/TButton.vue"; 8 | export { default as TCard } from "./card/TCard.vue"; 9 | export { default as TCarousel } from "./carousel/TCarousel.vue"; 10 | export { default as TCheckbox } from "./checkbox/TCheckbox.vue"; 11 | export { default as TCollapsible } from "./collapsible/TCollapsible.vue"; 12 | export { default as TDrawer } from "./drawer/TDrawer.vue"; 13 | export { default as TDropdown } from "./dropdown/TDropdown.vue"; 14 | export { default as TFade } from "./fade/TFade.vue"; 15 | export { default as TIcon } from "./icon/TIcon.vue"; 16 | export { default as TImage } from "./image/TImage.vue"; 17 | export { default as TLoading } from "./loading/TLoading.vue"; 18 | export { default as TMenu } from "./menu/TMenu.vue"; 19 | export { default as TModal } from "./modal/TModal.vue"; 20 | export { default as TNumberPicker } from "./numberPicker/TNumberPicker.vue"; 21 | export { default as TNumberTransformer } from "./numberTransformer/TNumberTransformer.vue"; 22 | export { default as TPagination } from "./pagination/TPagination.vue"; 23 | export { default as TProgressBar } from "./progress/TProgressBar.vue"; 24 | export { default as TRadio } from "./radio/TRadio.vue"; 25 | export { default as TRangeSlider } from "./rangeSlider/TRangeSlider.vue"; 26 | export { default as TRate } from "./rate/TRate.vue"; 27 | export { default as TSearchable } from "./searchable/TSearchable.vue"; 28 | export { default as TSkeleton } from "./skeleton/TSkeleton.vue"; 29 | export { default as TSlider } from "./slider/TSlider.vue"; 30 | export { default as TStepper } from "./stepper/TStepper.vue"; 31 | export { default as TSwitch } from "./switch/TSwitch.vue"; 32 | export { default as TTabs } from "./tab/TTabs.vue"; 33 | export { default as TTabItem } from "./tab/TTabItem.vue"; 34 | export { default as TTh } from "./table/TTh.vue"; 35 | export { default as TTable } from "./table/TTable.vue"; 36 | export { default as TTextInput } from "./text-input/TTextInput.vue"; 37 | export { default as TTimeline } from "./timeline/TTimeline.vue"; 38 | export { default as TCountDownTimer } from "./timer/TCountDownTimer.vue"; 39 | export { default as TToast } from "./toast/TToast.vue"; 40 | export { default as TTooltip } from "./tooltip/TTooltip.vue"; 41 | export { default as TTriangle } from "./triangle/TTriangle.vue"; 42 | export { default as TZoom } from "./zoom/TZoom.vue"; 43 | -------------------------------------------------------------------------------- /public/tailwind/loading/README.md: -------------------------------------------------------------------------------- 1 | | Props | Type | Default | Description | 2 | | ------------ | ------------ | ------------ | ------------ | 3 | | variant | string | primary | pass a valid variant color | 4 | | size | string | sm | pass a valid size | 5 | | type | string | default | `default` or `spinner` | 6 | | colorClass | string | "" | pass class to replace variant for spinner should be border-* | -------------------------------------------------------------------------------- /public/tailwind/menu/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | 3 | | name | Type | Default | Description | 4 | | --------- | ------- | ------- | ---------------------------------------------------------------------------- | 5 | | placement | string | "right" | when full prop is not passed this prop makes the list to go to right or left | 6 | | disabled | boolean | false | when passed caused the dropdown not to open, or close instantly | 7 | | full | boolean | false | causes the list to fill the space | 8 | | hover | boolean | false | opens the list on hover | 9 | | avoidHeaderClose | boolean | false | avoids closing menu by header click | 10 | | avoidHeaderOpen | boolean | false | avoids opening menu by header click | 11 | | animate | boolean | false | animate the list on open | 12 | 13 | ### slots 14 | 15 | | name | description 16 | | button | the button which opens the list | 17 | | content | list of items to show in the list | 18 | -------------------------------------------------------------------------------- /public/tailwind/menu/README.txt: -------------------------------------------------------------------------------- 1 | ### props 2 | | name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | placement | string | "right" | when full prop is not passed this prop makes the list to go to right or left | 5 | | disbaled | boolean | false | when passed caused the dropdown not to open, or close instantly | 6 | | full | boolean | false | causes the list to fill the space | 7 | 8 | ### slots 9 | | name | description 10 | | button | the button which opens the list | 11 | | content | list of items to show in the list | 12 | 13 | -------------------------------------------------------------------------------- /public/tailwind/modal/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | | name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | v-model | number or boolean |0| state of modal (close or open) | 5 | | title | string | "" | title for modal | 6 | | titleTag | string | h4 | which html tag use for title | 7 | | hasCloseButton | boolean | true | show close button to the user | 8 | | closeCallback | function | ()=>{} | if return truly value, modal will close if not will not | 9 | | eager | boolean | false | mount content even when modal is close set to true when content is useful for seo 10 | | maxSize | string | full | set max size base on `xs, sm, md, lg, full` 11 | | full | boolean | false | full-width modal 12 | | teleportTo | string | - | for teleport modal content to specific selector for example `'#modal-content'` 13 | | backDrop | Boolean | true | show backdrop 14 | 15 | we strongly recommend use teleport 16 | 17 | ### slots 18 | | name | description 19 | | ------------ | ------------ | 20 | | title | for custom title | 21 | | closeButton | for custom close button | 22 | 23 | -------------------------------------------------------------------------------- /public/tailwind/numberPicker/README.md: -------------------------------------------------------------------------------- 1 | | Props | Type | Default | Description | 2 | | ------------ | ------------ | ------------ | ------------ | 3 | | v-model | number |1 | value for number picker | 4 | | min | number | 1 | min value for number picker | 5 | | max | number | - | max value for number picker | 6 | | buttonProps | object | { variant: "primary" } | props for t-button component | 7 | | loading | boolean | false | show loading | 8 | | loadingProps | object | { variant: "primary" } | props for t-loading component | 9 | 10 | ### slots 11 | | name | description 12 | | ------------ | ------------ | 13 | | plus | for custom plus button | 14 | | minus | for custom minus button | 15 | | text | for custom text number | 16 | | loading | for custom loading | 17 | 18 | -------------------------------------------------------------------------------- /public/tailwind/numberTransformer/README.md: -------------------------------------------------------------------------------- 1 | | Props | Type | Default | Description | 2 | | ------------ | ------------ | ------------ | ------------ | 3 | | number | number | - | number you want to animate after change | 4 | | maxDuration | number | 1000 | maximum duration time to done | 5 | | maxUpdate | number | 20 | max times update dom | 6 | | step | number | 0 | if set `step`, `maxUpdate` will ignore | 7 | 8 | -------------------------------------------------------------------------------- /public/tailwind/numberTransformer/TNumberTransformer.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 92 | -------------------------------------------------------------------------------- /public/tailwind/paginantion/TPagination.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /public/tailwind/pagination/README.md: -------------------------------------------------------------------------------- 1 | | Props | Type | Default | Description | 2 | | ------------ | ------------ | ------------ | ------------ | 3 | | v-model | number | 1 | active page | 4 | | totalCount | number | 0 | total records count | 5 | | perPage | number | 20 | number of items in each page | 6 | | pageRange | number | 2 | number of of page around active page | 7 | | variant | string | primary | background color for active item | 8 | | colorClass | string | "" | pass class to ignore variant | 9 | | nuxt | boolean | false | put `nuxt-link` instead normal link (v-model not working in this case) | 10 | | vue | boolean | false | put `router-link` instead normal link (v-model not working in this case) | 11 | | queryName | string | "page" | query name when using nuxt or vue link | 12 | | appendQuery | boolean | true | append query when using nuxt or vue link | 13 | | formName | string | "" | container key for query make sure using qs for stringify of parse your queries | 14 | 15 | ### slots 16 | | name | description 17 | | ------------ | ------------ | 18 | | prev | slot for prev button | 19 | | item | slot for item number pass page as -> value | 20 | | page | slot for page number pass page as -> value | 21 | | next | slot for next button | 22 | 23 | -------------------------------------------------------------------------------- /public/tailwind/progress/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | | name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | variant | string | primary | background color variant | 5 | | value | number | 0 | value for the progress bar | 6 | | max | number | 100 | max-value for the progress bar | 7 | | showPercent | boolean | false | show percent in the middle of progressbar | 8 | 9 | ### slots 10 | | name | description 11 | | ------------ | ------------ | 12 | | default | inner progressbar | 13 | 14 | -------------------------------------------------------------------------------- /public/tailwind/progress/TProgressBar.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 65 | -------------------------------------------------------------------------------- /public/tailwind/radio/README.md: -------------------------------------------------------------------------------- 1 | | Props | Type | Default | Description | 2 | | ------------ | ------------ | ------------ | ------------ | 3 | | v-model | Array, String, Number, Boolean, Object | - | v-model supported with input | 4 | | value | Array, String, Number, Boolean, Object | - | value of radio button | 5 | | variant | string | primary | pass a valid variant color | 6 | | disabled | boolean | false | to disable input | 7 | | hideInput | boolean | false | combine it with label slot is useful when you want have a custom radio style | 8 | | activeClass | string | '' | class when it is checked | 9 | | inActiveClass | string | '' | class when it is not checked | 10 | 11 | 12 | ### slots 13 | | name | description 14 | | ------------ | ------------ | 15 | | label | for custom styled label| 16 | 17 | ##### slot example 18 | 19 | ```vue 20 | 25 | ``` -------------------------------------------------------------------------------- /public/tailwind/rangeSlider/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | 3 | | name | Type | Default | Description | 4 | | ------------ | ------------ | ------------ | ------------ | 5 | | v-model:minValue | Number | 0 | v-model for min value | 6 | | v-model:maxValue | Number | 0 | v-model for max value | 7 | | min | Number | 0 | min value (range) | 8 | | max | Number | 0 | max value (range) | 9 | | disableMin | Boolean | false | don't show min circle | 10 | | disableMax | Boolean | false | don't show min circle | 11 | | variant | string | primary | background color variant | 12 | 13 | ### slots 14 | 15 | | name | description 16 | | ------------ | ------------ | 17 | | min-inner | if you want set any things inside min circle | 18 | | max-inner | if you want set any things inside max circle | 19 | 20 | inside core : 21 | ```vue 22 | 23 | 24 | ``` 25 | -------------------------------------------------------------------------------- /public/tailwind/rate/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | | name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | emptyIcon | string | "" | url of the empty icon | 5 | | fullIcon | string | "" | url of the full icon | 6 | | halfIcon | string | "" | url of the half icon | 7 | | hover | boolean | true | if icon hovered it gets selected | 8 | | length | number | 5 | sets the number of icon | 9 | | modelValue | number | "" | index of selected icon | 10 | 11 | ### slots 12 | 13 | | name | description 14 | | ------------ | ------------ | 15 | | before-star-{index of item} | slot before each star | 16 | | after-star-{index of item} | slot after each star | 17 | 18 | -------------------------------------------------------------------------------- /public/tailwind/searchable/README.md: -------------------------------------------------------------------------------- 1 | dropDown props, and these extra props 2 | ### props 3 | | name | Type | Default | Description | 4 | | ------------ | ------------ | ------------ | ------------ | 5 | | localSearch | boolean | true | search locally between data | 6 | | noResult | string | no result found | when search as no result | 7 | | delay | number | 200 | delay for debouncing when `localSearch` is `false` | 8 | 9 | ### slots 10 | 11 | -------------------------------------------------------------------------------- /public/tailwind/skeleton/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | | name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | type | string |avatar-list| type of skeleton shape | 5 | | border | boolean | true | add border around of skeleton shape | 6 | | shadow | boolean | true | add shadow around of skeleton shape | 7 | 8 | we strongly recommend use teleport 9 | 10 | ### slots 11 | | name | description 12 | | ------------ | ------------ | 13 | | footer | custom footer only for `card` shape | 14 | 15 | -------------------------------------------------------------------------------- /public/tailwind/slider/README.md: -------------------------------------------------------------------------------- 1 | ### t-tab slots 2 | | name | description 3 | | ------------ | ------------ | 4 | | default | default slot for v-for items | 5 | | leftButton | slot to place left button for the slider | 6 | | rightButton | slot to place right button for the slider | 7 | 8 | -------------------------------------------------------------------------------- /public/tailwind/stepper/README.md: -------------------------------------------------------------------------------- 1 | | Props | Type | Default | Description | 2 | | ------------ | ------------ | ------------ | ------------ | 3 | | v-model | String, Number, Boolean | - | v-model supported with stepper | 4 | | items | Array of Object | - | for example : [{label:"n",text:"nuxt",value:"N"},{ label: "v", text: "vue", locked: true}] | 5 | | label | string | label | witch key inside object use for label | 6 | | value | string | value | witch key inside object use for value | 7 | | text | string | text | witch key inside object use for text | 8 | | variant | string | primary | pass a valid variant color | 9 | | clickable | boolean | false | go to next step when user clicking on it | 10 | 11 | 12 | 13 | ### slots 14 | | name | description 15 | | ------------ | ------------ | 16 | | circle | for custom styled circle| 17 | | label | for custom styled label| 18 | | text | for custom styled text| 19 | 20 | component will pass any useful information to slots take a look at this lines from core 21 | 22 | ```vue 23 | 29 | ``` 30 | note that item is your current object you passed inside array 31 | and index is current index of array 32 | 33 | ##### slot example 34 | 35 | ```vue 36 | 37 | 46 | 47 | ``` -------------------------------------------------------------------------------- /public/tailwind/switch/README.md: -------------------------------------------------------------------------------- 1 | | Props | Type | Default | Description | 2 | | ------------ | ------------ | ------------ | ------------ | 3 | | v-model | Array, String, Number, Boolean, Object | - | v-model supported with input | 4 | | value | Array, String, Number, Boolean, Object | - | pass it when initial of v-model is array | 5 | | trueValue | Array, String, Number, Boolean, Object | - | true value will emit when switch is on and initial of v-model is not an array | 6 | | falseValue | Array, String, Number, Boolean, Object | - | false value will emit when switch is off and initial of v-model is not an array | 7 | | variant | string | primary | pass a valid variant color | 8 | | disabled | boolean | false | to disable input | -------------------------------------------------------------------------------- /public/tailwind/switch/TSwitch.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 65 | -------------------------------------------------------------------------------- /public/tailwind/tab/TTabItem.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 62 | -------------------------------------------------------------------------------- /public/tailwind/text-input/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | 3 | | name | Type | Default | Description | 4 | | -------------- | ------- | --------- | ------------------------------------------------------- | 5 | | variant | string | "primary" | variant is the color and background color of text input | 6 | | hover | boolean | false | adds simple background when hovered | 7 | | type | string | "text" | html input type | 8 | | inputmode | string | "text" | html input, inputmode | 9 | | label | string | "" | label of text input | 10 | | leftIcon | string | "" | left Icon of text input | 11 | | rightIcon | string | "" | right Icon of text input | 12 | | leftIconColor | string | "" | left Icon color of text input | 13 | | rightIconColor | string | "" | right Icon color of text input | 14 | | rounded | boolean | false | makes text input rounded | 15 | | align | string | right | aligns text inside text input | 16 | | disabled | boolean | false | disables the text input and avoid typing in it | 17 | | error | boolean | false | changes input element color for error state | 18 | | area | boolean | false | make the input element textarea | 19 | 20 | ### slots 21 | 22 | | name | description | 23 | | ---------- | ---------------------------- | 24 | | left slot | left slot of the text input | 25 | | right slot | right slot of the text input | 26 | 27 | ### model modifiers 28 | 29 | | name | description | arguments | 30 | | ------ | ----------------------------------- | -------------------------------------------------------------------------------------------- | 31 | | format | format numbers with given arguments | two arguments: 1- separator: a character, 2- number of characters to separate with separator | 32 | -------------------------------------------------------------------------------- /public/tailwind/timeline/README.md: -------------------------------------------------------------------------------- 1 | | Props | Type | Default | Description | 2 | | ------------ | ------------ | ------------ | ------------ | 3 | | v-model | String, Number, Boolean | - | v-model supported with timeline | 4 | | items | Array of Object | - | for example : [{label:"n",text:"nuxt",value:"N",title:"my title"},{ label: "v", text: "vue", locked: true}] | 5 | | label | string | label | witch key inside object use for label | 6 | | value | string | value | witch key inside object use for value | 7 | | text | string | text | witch key inside object use for text | 8 | | variant | string | primary | pass a valid variant color | 9 | | clickable | boolean | false | go to next step when user clicking on it | 10 | 11 | 12 | 13 | ### slots 14 | | name | description 15 | | ------------ | ------------ | 16 | | circle | for custom styled circle| 17 | | label | for custom styled label| 18 | | item | for custom styled item| 19 | 20 | component will pass any useful information to slots like T -------------------------------------------------------------------------------- /public/tailwind/timer/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | | name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | v-model | Number | - | pass second to count down | 5 | | countDown | Number | 1000 | interval millisecond | 6 | | duration | number | 3000 | showing duration default is 3seconds | 7 | | message | string | '' | message you want to show | 8 | 9 | ### slots 10 | | name | description 11 | | ------------ | ------------ | 12 | | default | useful for custom style | 13 | 14 | ```vue 15 | 26 | ``` 27 | 28 | -------------------------------------------------------------------------------- /public/tailwind/toast/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | | name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | v-model | Boolean | - | v-model supported with toast | 5 | | variant | string | success | background color variant | 6 | | duration | number | 3000 | showing duration default is 3seconds | 7 | | message | string | '' | message you want to show | 8 | 9 | ### slots 10 | | name | description 11 | | ------------ | ------------ | 12 | | default | if you need more than a simple message (also we will pass close method to it). | 13 | 14 | -------------------------------------------------------------------------------- /public/tailwind/toast/TToast.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /public/tailwind/tooltip/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | | name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | v-model | Boolean | - | v-model supported with tooltip | 5 | | variant | string | primary | background color variant | 6 | | position | string | top | show on witch side of element | 7 | | message | string | '' | message you want to show | 8 | | hover | boolean | true | set to false if you want to control with v-model | 9 | 10 | ### slots 11 | | name | description 12 | | ------------ | ------------ | 13 | | default | the trigger you want to show tooltip on it | 14 | | message | if you need more than a simple message (also we will pass close method to it). | 15 | 16 | -------------------------------------------------------------------------------- /public/tailwind/triangle/TTriangle.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /public/tailwind/zoom/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | 3 | | name | Type | Default | Description | 4 | | -------------- | ------- | ------- | ---------------------------------------------------------- | 5 | | src | string | "" | image source to show | 6 | | scale | number | 1.5 | scale number to scale the image by that number (1.5,2,3,4) | 7 | | maskSrc | string | "" | image mask source to show | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 18 | 103 | 125 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ziaadini/tailwind-vue/b6fdb2d1944accde595be52aa1fb26db7d300a55/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/TabItemChildTest.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/components/tailwind/accoirdion/README.md: -------------------------------------------------------------------------------- 1 | | Props | Type | Default | Description | 2 | | ------------ | ------------ | ------------ | ------------ | 3 | | items | Array of Object | - | for example : [{title:"my title",text:"text",selected:true},{ title:"my second title",text:"my second text",disabled:true}] | 4 | | collapse | boolean | false | convert accordion to collapse if `true` other items will not close | 5 | 6 | 7 | 8 | ### slots 9 | | name | description 10 | | ------------ | ------------ | 11 | | title | for custom styled title| 12 | | text | for custom styled text| 13 | 14 | component will pass any useful information to slots : 15 | 1. bind -> current item 16 | 2. show -> if item is showing 17 | 3. index -> current item index 18 | -------------------------------------------------------------------------------- /src/components/tailwind/alert/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | | Name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | v-model | number or boolean |0| state of alert (close or open) | 5 | | show | number or boolean |0| state of alert (close or open) when use show close button doesn't appear | 6 | | icon | string | "" | material icon name | 7 | | iconClass | string | "" | css class for icon | 8 | | variant | string | primary | background variant of alert | 9 | | allocateSpace | Boolean | false | reserve space | 10 | ### slots 11 | | name | description 12 | | ------------ | ------------ | 13 | | default | the content of alert | 14 | 15 | -------------------------------------------------------------------------------- /src/components/tailwind/animate/README.md: -------------------------------------------------------------------------------- 1 | | Props | Type | Default | Description | 2 | | ------------ | ------------ | ------------ | ------------ | 3 | | show | Number, Boolean | - | visible state | 4 | | duration | Number | 300 | milliSecond | 5 | | easeClass | String | ease-out | tailwind ease class | 6 | | start | String | opacity-0 | start state | 7 | | end | String | opacity-1 | end state | 8 | | transitionClass | String | transition-all | transition class | 9 | | allocateSpace | Boolean | false | reserve space | 10 | 11 | 12 | ### slots 13 | | name | description 14 | | ------------ | ------------ | 15 | | default | render children | 16 | 17 | ##### slot example 18 | 19 | ```vue 20 | 24 | ``` 25 | because component play around width and height when it's not visible, 26 | therefore className is useful when child container has fix position 27 | 28 | the `delayedShow` : when `show` prop is truly will be true synchronously but when 29 | `show` is falsy will not false until animation has been finished -------------------------------------------------------------------------------- /src/components/tailwind/animate/TAnimate.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /src/components/tailwind/badge/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | | name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | text | string | "" | inner text of badge | 5 | | variant | string | "primary" | background color of badge | 6 | | position | string | topRight | sets the position of badge on the container | 7 | | rounded | boolean | true | sets rounded to border of badge | 8 | | size | string | "md" | sets the size of badge contain(xs,sm,md,lg) | 9 | 10 | ### slots 11 | | name | description 12 | | ------------ | ------------ | 13 | | default | element you want show badge on it for example your button | 14 | | content | you can pass it instead of text prop | 15 | 16 | -------------------------------------------------------------------------------- /src/components/tailwind/badge/TBadge.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 104 | -------------------------------------------------------------------------------- /src/components/tailwind/bottomSheet/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | | name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | v-model | number or boolean |0| state of modal (close or open) | 5 | | title | string | "" | title for modal | 6 | | titleTag | string | h4 | which html tag use for title | 7 | | hasCloseButton | boolean | true | show close button to the user | 8 | | closeCallback | function | ()=>{} | if return truly value modal will close if not will not | 9 | | eager | boolean | false | mount content even when modal is close set to true when content is useful for seo 10 | | maxSize | string | full | set max size base on `xs, sm, md, lg, full` 11 | | teleportTo | string | - | for teleport modal content to specific selector for example `'#modal-content'` 12 | | backDrop | Boolean | true | show backdrop 13 | we strongly recommend use teleport 14 | 15 | ### slots 16 | | name | description 17 | | ------------ | ------------ | 18 | | title | for custom title | 19 | | closeButton | for custom close button | 20 | 21 | -------------------------------------------------------------------------------- /src/components/tailwind/breadcrumb/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | 3 | | name | Type | Default | Description | 4 | | -------------- | -------- | --------------- | ---------------------------------------------------------------------------------- | 5 | | items | | BreadCrumb.Root | input data for the bread crumb | 6 | | nuxt | boolean | false | if true nuxt link will be generated | 7 | 8 | we strongly recommend use teleport 9 | 10 | ### slots 11 | 12 | | name | description | 13 | | ----------- | ----------------------- | 14 | | default | for custom style on each item of breadcrumb | 15 | | beforeLink | for rendering before any item in the breadcrumb | 16 | | afterLink | for rendering after any item in the breadcrumb | 17 | -------------------------------------------------------------------------------- /src/components/tailwind/breadcrumb/TBreadcrumb.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 76 | -------------------------------------------------------------------------------- /src/components/tailwind/button/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | 3 | | name | Type | Default | Description | 4 | | ------------ | ------- | ------- | -------------------------------------------------------------------- | 5 | | rounded | Boolean | false | make button rounded | 6 | | fab | Boolean | false | add fab ability to button | 7 | | variant | string | white | background color of the button | 8 | | size | string | md | size of the button | 9 | | color | string | "" | when used default variant would be ignored and color is used instead | 10 | | icon | string | "" | right icon of button | 11 | | disabled | boolean | false | disable button | 12 | | outline | boolean | false | outline color of button | 13 | | ripple | boolean | false | show a ripple effect when clicked | 14 | | to | object | string | "" | 15 | | nuxt | boolean | false | `nuxt-link` instead of `router-link` when passing `to` prop | 16 | | full | boolean | false | full width button | 17 | | loading | boolean | false | to show a loading in button | 18 | | loadingProps | object | {} | loading component props | 19 | 20 | ### slots 21 | 22 | | name | description | 23 | | ------- | -------------------- | 24 | | default | inner text of button | 25 | | loading | for custom loading | 26 | -------------------------------------------------------------------------------- /src/components/tailwind/card/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | | name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | title | string | '' | card title | 5 | | description | string | '' | card description | 6 | 7 | ### slots 8 | | name | description 9 | | ------------ | ------------ | 10 | | default | show under description | 11 | 12 | -------------------------------------------------------------------------------- /src/components/tailwind/card/TCard.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /src/components/tailwind/carousel/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | 3 | | name | Type | Default | Description | 4 | | ----------------- | ------- | ------- | -------------------------------------------------- | 5 | | scale | boolean | true | when true scale animation gets added | 6 | | rotate | boolean | true | when true rotate animation gets rotate | 7 | | autoPlay | boolean | true | auto play in the carousel | 8 | | autoPlaceInterval | number | 2000 | interval between each image change in milliseconds | 9 | | modelValue | number | 0 | selected index of carousel | 10 | | items | array | [] | items of the carousel to show | 11 | | swipeThreshold | Number | 50 | number of the pixels needed for swipe | 12 | | swipeEnabled | boolean | true | when true carousel would change with swipe | 13 | | imageProps | object | {} | props to send to t-image | 14 | 15 | ### slots 16 | 17 | | name | description | 18 | | ----------- | --------------------------- | 19 | | default | slot for each carousel item | 20 | | rightButton | slot for right side button | 21 | | leftButton | slot for left side button | 22 | | caption | slot for the caption | 23 | | pagination | slot for the pagination | 24 | 25 | 26 | -------------------------------------------------------------------------------- /src/components/tailwind/checkbox/README.md: -------------------------------------------------------------------------------- 1 | | Props | Type | Default | Description | 2 | | ------------ | ------------ | ------------ | ------------ | 3 | | v-model | Array, String, Number, Boolean, Object | - | v-model supported with input | 4 | | value | Array, String, Number, Boolean, Object | - | pass it when initial of v-model is array | 5 | | trueValue | Array, String, Number, Boolean, Object | - | true value will emit when switch is on and initial of v-model is not an array | 6 | | falseValue | Array, String, Number, Boolean, Object | - | false value will emit when switch is off and initial of v-model is not an array | 7 | | variant | string | primary | pass a valid variant color | 8 | | disabled | boolean | false | to disable input | 9 | | hideInput | boolean | false | combine it with label slot is useful when you want have a custom radio style | 10 | | activeClass | string | '' | class when it is checked | 11 | | inActiveClass | string | '' | class when it is not checked | 12 | 13 | ### slots 14 | | name | description 15 | | ------------ | ------------ | 16 | | label | for custom styled label| 17 | 18 | **warning!** don't use block element like `div` inside label slot because component use `label` tag as a container 19 | and, it's wrong to use block elements inside non-block elements 20 | ##### slot example 21 | 22 | ```vue 23 | 28 | ``` -------------------------------------------------------------------------------- /src/components/tailwind/checkbox/TCheckbox.vue: -------------------------------------------------------------------------------- 1 | 55 | 56 | 91 | 92 | 97 | -------------------------------------------------------------------------------- /src/components/tailwind/collapsible/README.md: -------------------------------------------------------------------------------- 1 | | Props | Type | Default | Description | 2 | | ------------ | ------------ | ------------ | ------------ | 3 | | show | number, Boolean | - | visible state | 4 | | duration | number | 300 | milliSecond | 5 | | easeClass | string | ease-in-out | tailwind ease class | 6 | | tag | string | div | wrapper tag | 7 | 8 | 9 | ### slots 10 | | name | description 11 | | ------------ | ------------ | 12 | | default | render children | -------------------------------------------------------------------------------- /src/components/tailwind/collapsible/TCollapsible.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /src/components/tailwind/drawer/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | | name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | v-model | number or boolean |0| state of modal (close or open) | 5 | | title | string | "" | title for modal | 6 | | titleTag | string | h4 | which html tag use for title | 7 | | hasCloseButton | boolean | true | show close button to the user | 8 | | closeCallback | function | ()=>{} | if return truly value modal will close if not will not | 9 | | eager | boolean | false | mount content even when modal is close set to true when content is useful for seo 10 | | maxSize | string | full | set max size base on `xs, sm, md, lg, full` 11 | | full | boolean | false | full-width drawer 12 | | left | boolean | false | open from left side 13 | | teleportTo | string | - | for teleport modal content to specific selector for example `'#modal-content'` 14 | | backDrop | Boolean | true | show backdrop 15 | 16 | we strongly recommend use teleport 17 | 18 | ### slots 19 | | name | description 20 | | ------------ | ------------ | 21 | | title | for custom title | 22 | | closeButton | for custom close button | 23 | 24 | -------------------------------------------------------------------------------- /src/components/tailwind/dropdown/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | 3 | | name | Type | Default | Description | 4 | | ------------------ | ------------------------------------ | ------- | --------------------------------------------------------------- | 5 | | variant | string | "white" | sets the bg color | 6 | | divide | boolean | true | adds border between items of dropdown | 7 | | outline | boolean | false | causes the component to have border and no background | 8 | | placeholder | string | "" | the placeholder when no item is selected | 9 | | rounded | boolean | false | causes the component to have a rounded border | 10 | | hover | boolean | false | open dropdown by hover | 11 | | top | boolean | false | open dropdown on the top | 12 | | items | array of objects or array of strings | - | items to show in dropdown | 13 | | opened | boolean | false | allows to control dropdown open or close state from outside | 14 | | searchKey | string | "" | input of the search element | 15 | | labelField | string | "label" | label field | 16 | | valueField | string | "value" | value field | 17 | | disabled | boolean | false | when passed caused the dropdown not to open, or close instantly | 18 | | toggleByHeader | boolean | true | if false clicking input will not toggle the dropdown | 19 | | parentColorClasses | string | "" | if passed default parent variant class would be ignored | 20 | | itemsColorClasses | string | "" | if passed default item variant class would be ignored | 21 | | animationDuration | string | "200" | changes duration of the animation in ms | 22 | | animationDelay | string | "0" | delay of the animation in ms | 23 | | animationDelayType | string | "" | delay of the animation in ms | 24 | | triangleProps | Object | {} | props to send to triangle | 25 | 26 | ### slots 27 | -------------------------------------------------------------------------------- /src/components/tailwind/fade/README.md: -------------------------------------------------------------------------------- 1 | | Props | Type | Default | Description | 2 | | ------------ | ------------ | ------------ | ------------ | 3 | | show | Number, Boolean | - | visible state | 4 | | duration | Number | 300 | milliSecond | 5 | | easeClass | String | ease-out | tailwind ease class | 6 | | opacityClass | String | opacity-1 | final opacity | 7 | | allocateSpace | Boolean | false | reserve space | 8 | 9 | 10 | ### slots 11 | | name | description 12 | | ------------ | ------------ | 13 | | default | render children | 14 | 15 | ##### slot example 16 | 17 | ```vue 18 | 22 | ``` 23 | because component play around width and height when it's not visible, 24 | therefore className is useful when child container has fix position 25 | 26 | the `delayedShow` : when `show` prop is truly will be true synchronously but when 27 | `show` is falsy will not false until animation has been finished -------------------------------------------------------------------------------- /src/components/tailwind/fade/TFade.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /src/components/tailwind/icon/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | | name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | name | string | "" | material icon name | 5 | 6 | ### slots 7 | | name | description 8 | | ------------ | ------------ | 9 | 10 | -------------------------------------------------------------------------------- /src/components/tailwind/icon/TIcon.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 37 | -------------------------------------------------------------------------------- /src/components/tailwind/image/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | 3 | | name | Type | Default | Description | 4 | | ------- | ------- | ------- | -------------------------------------------------------------------------- | 5 | | src | string | "" | source of the image | 6 | | default | string | "" | source of the default image image | 7 | | lazy | boolean | false | when passed causes the images to lazy load(when the were seen in the page) | 8 | 9 | ### slots 10 | | loader | slot to show when image is loading | 11 | -------------------------------------------------------------------------------- /src/components/tailwind/image/TImage.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 118 | -------------------------------------------------------------------------------- /src/components/tailwind/index.ts: -------------------------------------------------------------------------------- 1 | export { default as TAccordion } from "./accoirdion/TAccordion.vue"; 2 | export { default as TAlert } from "./alert/TAlert.vue"; 3 | export { default as TAnimate } from "./animate/TAnimate.vue"; 4 | export { default as TBadge } from "./badge/TBadge.vue"; 5 | export { default as TBottomSheet } from "./bottomSheet/TBottomSheet.vue"; 6 | export { default as TBreadcrumb } from "./breadcrumb/TBreadcrumb.vue"; 7 | export { default as TButton } from "./button/TButton.vue"; 8 | export { default as TCard } from "./card/TCard.vue"; 9 | export { default as TCarousel } from "./carousel/TCarousel.vue"; 10 | export { default as TCheckbox } from "./checkbox/TCheckbox.vue"; 11 | export { default as TCollapsible } from "./collapsible/TCollapsible.vue"; 12 | export { default as TDrawer } from "./drawer/TDrawer.vue"; 13 | export { default as TDropdown } from "./dropdown/TDropdown.vue"; 14 | export { default as TFade } from "./fade/TFade.vue"; 15 | export { default as TIcon } from "./icon/TIcon.vue"; 16 | export { default as TImage } from "./image/TImage.vue"; 17 | export { default as TLoading } from "./loading/TLoading.vue"; 18 | export { default as TMenu } from "./menu/TMenu.vue"; 19 | export { default as TModal } from "./modal/TModal.vue"; 20 | export { default as TNumberPicker } from "./numberPicker/TNumberPicker.vue"; 21 | export { default as TNumberTransformer } from "./numberTransformer/TNumberTransformer.vue"; 22 | export { default as TPagination } from "./pagination/TPagination.vue"; 23 | export { default as TProgressBar } from "./progress/TProgressBar.vue"; 24 | export { default as TRadio } from "./radio/TRadio.vue"; 25 | export { default as TRangeSlider } from "./rangeSlider/TRangeSlider.vue"; 26 | export { default as TRate } from "./rate/TRate.vue"; 27 | export { default as TSearchable } from "./searchable/TSearchable.vue"; 28 | export { default as TSkeleton } from "./skeleton/TSkeleton.vue"; 29 | export { default as TSlider } from "./slider/TSlider.vue"; 30 | export { default as TStepper } from "./stepper/TStepper.vue"; 31 | export { default as TSwitch } from "./switch/TSwitch.vue"; 32 | export { default as TTabs } from "./tab/TTabs.vue"; 33 | export { default as TTabItem } from "./tab/TTabItem.vue"; 34 | export { default as TTh } from "./table/TTh.vue"; 35 | export { default as TTable } from "./table/TTable.vue"; 36 | export { default as TTextInput } from "./text-input/TTextInput.vue"; 37 | export { default as TTimeline } from "./timeline/TTimeline.vue"; 38 | export { default as TCountDownTimer } from "./timer/TCountDownTimer.vue"; 39 | export { default as TToast } from "./toast/TToast.vue"; 40 | export { default as TTooltip } from "./tooltip/TTooltip.vue"; 41 | export { default as TTriangle } from "./triangle/TTriangle.vue"; 42 | export { default as TZoom } from "./zoom/TZoom.vue"; 43 | -------------------------------------------------------------------------------- /src/components/tailwind/loading/README.md: -------------------------------------------------------------------------------- 1 | | Props | Type | Default | Description | 2 | | ------------ | ------------ | ------------ | ------------ | 3 | | variant | string | primary | pass a valid variant color | 4 | | size | string | sm | pass a valid size | 5 | | type | string | default | `default` or `spinner` | 6 | | colorClass | string | "" | pass class to replace variant for spinner should be border-* | -------------------------------------------------------------------------------- /src/components/tailwind/menu/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | 3 | | name | Type | Default | Description | 4 | | --------- | ------- | ------- | ---------------------------------------------------------------------------- | 5 | | placement | string | "right" | when full prop is not passed this prop makes the list to go to right or left | 6 | | disabled | boolean | false | when passed caused the dropdown not to open, or close instantly | 7 | | full | boolean | false | causes the list to fill the space | 8 | | hover | boolean | false | opens the list on hover | 9 | | avoidHeaderClose | boolean | false | avoids closing menu by header click | 10 | | avoidHeaderOpen | boolean | false | avoids opening menu by header click | 11 | | animate | boolean | false | animate the list on open | 12 | 13 | ### slots 14 | 15 | | name | description 16 | | button | the button which opens the list | 17 | | content | list of items to show in the list | 18 | -------------------------------------------------------------------------------- /src/components/tailwind/modal/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | | name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | v-model | number or boolean |0| state of modal (close or open) | 5 | | title | string | "" | title for modal | 6 | | titleTag | string | h4 | which html tag use for title | 7 | | hasCloseButton | boolean | true | show close button to the user | 8 | | closeCallback | function | ()=>{} | if return truly value, modal will close if not will not | 9 | | eager | boolean | false | mount content even when modal is close set to true when content is useful for seo 10 | | maxSize | string | full | set max size base on `xs, sm, md, lg, full` 11 | | full | boolean | false | full-width modal 12 | | teleportTo | string | - | for teleport modal content to specific selector for example `'#modal-content'` 13 | | backDrop | Boolean | true | show backdrop 14 | 15 | we strongly recommend use teleport 16 | 17 | ### slots 18 | | name | description 19 | | ------------ | ------------ | 20 | | title | for custom title | 21 | | closeButton | for custom close button | 22 | 23 | -------------------------------------------------------------------------------- /src/components/tailwind/numberPicker/README.md: -------------------------------------------------------------------------------- 1 | | Props | Type | Default | Description | 2 | | ------------ | ------------ | ------------ | ------------ | 3 | | v-model | number |1 | value for number picker | 4 | | min | number | 1 | min value for number picker | 5 | | max | number | - | max value for number picker | 6 | | buttonProps | object | { variant: "primary" } | props for t-button component | 7 | | loading | boolean | false | show loading | 8 | | loadingProps | object | { variant: "primary" } | props for t-loading component | 9 | 10 | ### slots 11 | | name | description 12 | | ------------ | ------------ | 13 | | plus | for custom plus button | 14 | | minus | for custom minus button | 15 | | text | for custom text number | 16 | | loading | for custom loading | 17 | 18 | -------------------------------------------------------------------------------- /src/components/tailwind/numberTransformer/README.md: -------------------------------------------------------------------------------- 1 | | Props | Type | Default | Description | 2 | | ------------ | ------------ | ------------ | ------------ | 3 | | number | number | - | number you want to animate after change | 4 | | maxDuration | number | 1000 | maximum duration time to done | 5 | | maxUpdate | number | 20 | max times update dom | 6 | | step | number | 0 | if set `step`, `maxUpdate` will ignore | 7 | 8 | -------------------------------------------------------------------------------- /src/components/tailwind/numberTransformer/TNumberTransformer.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 92 | -------------------------------------------------------------------------------- /src/components/tailwind/pagination/README.md: -------------------------------------------------------------------------------- 1 | | Props | Type | Default | Description | 2 | | ------------ | ------------ | ------------ | ------------ | 3 | | v-model | number | 1 | active page | 4 | | totalCount | number | 0 | total records count | 5 | | perPage | number | 20 | number of items in each page | 6 | | pageRange | number | 2 | number of of page around active page | 7 | | variant | string | primary | background color for active item | 8 | | colorClass | string | "" | pass class to ignore variant | 9 | | nuxt | boolean | false | put `nuxt-link` instead normal link (v-model not working in this case) | 10 | | vue | boolean | false | put `router-link` instead normal link (v-model not working in this case) | 11 | | queryName | string | "page" | query name when using nuxt or vue link | 12 | | appendQuery | boolean | true | append query when using nuxt or vue link | 13 | | formName | string | "" | container key for query make sure using qs for stringify of parse your queries | 14 | 15 | ### slots 16 | | name | description 17 | | ------------ | ------------ | 18 | | prev | slot for prev button | 19 | | item | slot for item number pass page as -> value | 20 | | page | slot for page number pass page as -> value | 21 | | next | slot for next button | 22 | 23 | -------------------------------------------------------------------------------- /src/components/tailwind/progress/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | | name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | variant | string | primary | background color variant | 5 | | value | number | 0 | value for the progress bar | 6 | | max | number | 100 | max-value for the progress bar | 7 | | showPercent | boolean | false | show percent in the middle of progressbar | 8 | 9 | ### slots 10 | | name | description 11 | | ------------ | ------------ | 12 | | default | inner progressbar | 13 | 14 | -------------------------------------------------------------------------------- /src/components/tailwind/progress/TProgressBar.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 65 | -------------------------------------------------------------------------------- /src/components/tailwind/radio/README.md: -------------------------------------------------------------------------------- 1 | | Props | Type | Default | Description | 2 | | ------------ | ------------ | ------------ | ------------ | 3 | | v-model | Array, String, Number, Boolean, Object | - | v-model supported with input | 4 | | value | Array, String, Number, Boolean, Object | - | value of radio button | 5 | | variant | string | primary | pass a valid variant color | 6 | | disabled | boolean | false | to disable input | 7 | | hideInput | boolean | false | combine it with label slot is useful when you want have a custom radio style | 8 | | activeClass | string | '' | class when it is checked | 9 | | inActiveClass | string | '' | class when it is not checked | 10 | 11 | 12 | ### slots 13 | | name | description 14 | | ------------ | ------------ | 15 | | label | for custom styled label| 16 | 17 | ##### slot example 18 | 19 | ```vue 20 | 25 | ``` -------------------------------------------------------------------------------- /src/components/tailwind/rangeSlider/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | 3 | | name | Type | Default | Description | 4 | | ------------ | ------------ | ------------ | ------------ | 5 | | v-model:minValue | Number | 0 | v-model for min value | 6 | | v-model:maxValue | Number | 0 | v-model for max value | 7 | | min | Number | 0 | min value (range) | 8 | | max | Number | 0 | max value (range) | 9 | | disableMin | Boolean | false | don't show min circle | 10 | | disableMax | Boolean | false | don't show min circle | 11 | | variant | string | primary | background color variant | 12 | 13 | ### slots 14 | 15 | | name | description 16 | | ------------ | ------------ | 17 | | min-inner | if you want set any things inside min circle | 18 | | max-inner | if you want set any things inside max circle | 19 | 20 | inside core : 21 | ```vue 22 | 23 | 24 | ``` 25 | -------------------------------------------------------------------------------- /src/components/tailwind/rate/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | | name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | emptyIcon | string | "" | url of the empty icon | 5 | | fullIcon | string | "" | url of the full icon | 6 | | halfIcon | string | "" | url of the half icon | 7 | | hover | boolean | true | if icon hovered it gets selected | 8 | | length | number | 5 | sets the number of icon | 9 | | modelValue | number | "" | index of selected icon | 10 | 11 | ### slots 12 | 13 | | name | description 14 | | ------------ | ------------ | 15 | | before-star-{index of item} | slot before each star | 16 | | after-star-{index of item} | slot after each star | 17 | 18 | -------------------------------------------------------------------------------- /src/components/tailwind/searchable/README.md: -------------------------------------------------------------------------------- 1 | dropDown props, and these extra props 2 | ### props 3 | | name | Type | Default | Description | 4 | | ------------ | ------------ | ------------ | ------------ | 5 | | localSearch | boolean | true | search locally between data | 6 | | noResult | string | no result found | when search as no result | 7 | | delay | number | 200 | delay for debouncing when `localSearch` is `false` | 8 | 9 | ### slots 10 | 11 | -------------------------------------------------------------------------------- /src/components/tailwind/skeleton/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | | name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | type | string |avatar-list| type of skeleton shape | 5 | | border | boolean | true | add border around of skeleton shape | 6 | | shadow | boolean | true | add shadow around of skeleton shape | 7 | 8 | we strongly recommend use teleport 9 | 10 | ### slots 11 | | name | description 12 | | ------------ | ------------ | 13 | | footer | custom footer only for `card` shape | 14 | 15 | -------------------------------------------------------------------------------- /src/components/tailwind/slider/README.md: -------------------------------------------------------------------------------- 1 | ### t-tab slots 2 | | name | description 3 | | ------------ | ------------ | 4 | | default | default slot for v-for items | 5 | | leftButton | slot to place left button for the slider | 6 | | rightButton | slot to place right button for the slider | 7 | 8 | -------------------------------------------------------------------------------- /src/components/tailwind/stepper/README.md: -------------------------------------------------------------------------------- 1 | | Props | Type | Default | Description | 2 | | ------------ | ------------ | ------------ | ------------ | 3 | | v-model | String, Number, Boolean | - | v-model supported with stepper | 4 | | items | Array of Object | - | for example : [{label:"n",text:"nuxt",value:"N"},{ label: "v", text: "vue", locked: true}] | 5 | | label | string | label | witch key inside object use for label | 6 | | value | string | value | witch key inside object use for value | 7 | | text | string | text | witch key inside object use for text | 8 | | variant | string | primary | pass a valid variant color | 9 | | clickable | boolean | false | go to next step when user clicking on it | 10 | 11 | 12 | 13 | ### slots 14 | | name | description 15 | | ------------ | ------------ | 16 | | circle | for custom styled circle| 17 | | label | for custom styled label| 18 | | text | for custom styled text| 19 | 20 | component will pass any useful information to slots take a look at this lines from core 21 | 22 | ```vue 23 | 29 | ``` 30 | note that item is your current object you passed inside array 31 | and index is current index of array 32 | 33 | ##### slot example 34 | 35 | ```vue 36 | 37 | 46 | 47 | ``` -------------------------------------------------------------------------------- /src/components/tailwind/switch/README.md: -------------------------------------------------------------------------------- 1 | | Props | Type | Default | Description | 2 | | ------------ | ------------ | ------------ | ------------ | 3 | | v-model | Array, String, Number, Boolean, Object | - | v-model supported with input | 4 | | value | Array, String, Number, Boolean, Object | - | pass it when initial of v-model is array | 5 | | trueValue | Array, String, Number, Boolean, Object | - | true value will emit when switch is on and initial of v-model is not an array | 6 | | falseValue | Array, String, Number, Boolean, Object | - | false value will emit when switch is off and initial of v-model is not an array | 7 | | variant | string | primary | pass a valid variant color | 8 | | disabled | boolean | false | to disable input | -------------------------------------------------------------------------------- /src/components/tailwind/switch/TSwitch.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 65 | -------------------------------------------------------------------------------- /src/components/tailwind/tab/TTabItem.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 62 | -------------------------------------------------------------------------------- /src/components/tailwind/text-input/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | 3 | | name | Type | Default | Description | 4 | | -------------- | ------- | --------- | ------------------------------------------------------- | 5 | | variant | string | "primary" | variant is the color and background color of text input | 6 | | hover | boolean | false | adds simple background when hovered | 7 | | type | string | "text" | html input type | 8 | | inputmode | string | "text" | html input, inputmode | 9 | | label | string | "" | label of text input | 10 | | leftIcon | string | "" | left Icon of text input | 11 | | rightIcon | string | "" | right Icon of text input | 12 | | leftIconColor | string | "" | left Icon color of text input | 13 | | rightIconColor | string | "" | right Icon color of text input | 14 | | rounded | boolean | false | makes text input rounded | 15 | | align | string | right | aligns text inside text input | 16 | | disabled | boolean | false | disables the text input and avoid typing in it | 17 | | error | boolean | false | changes input element color for error state | 18 | | area | boolean | false | make the input element textarea | 19 | 20 | ### slots 21 | 22 | | name | description | 23 | | ---------- | ---------------------------- | 24 | | left slot | left slot of the text input | 25 | | right slot | right slot of the text input | 26 | 27 | ### model modifiers 28 | 29 | | name | description | arguments | 30 | | ------ | ----------------------------------- | -------------------------------------------------------------------------------------------- | 31 | | format | format numbers with given arguments | two arguments: 1- separator: a character, 2- number of characters to separate with separator | 32 | -------------------------------------------------------------------------------- /src/components/tailwind/timeline/README.md: -------------------------------------------------------------------------------- 1 | | Props | Type | Default | Description | 2 | | ------------ | ------------ | ------------ | ------------ | 3 | | v-model | String, Number, Boolean | - | v-model supported with timeline | 4 | | items | Array of Object | - | for example : [{label:"n",text:"nuxt",value:"N",title:"my title"},{ label: "v", text: "vue", locked: true}] | 5 | | label | string | label | witch key inside object use for label | 6 | | value | string | value | witch key inside object use for value | 7 | | text | string | text | witch key inside object use for text | 8 | | variant | string | primary | pass a valid variant color | 9 | | clickable | boolean | false | go to next step when user clicking on it | 10 | 11 | 12 | 13 | ### slots 14 | | name | description 15 | | ------------ | ------------ | 16 | | circle | for custom styled circle| 17 | | label | for custom styled label| 18 | | item | for custom styled item| 19 | 20 | component will pass any useful information to slots like T -------------------------------------------------------------------------------- /src/components/tailwind/timer/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | | name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | v-model | Number | - | pass second to count down | 5 | | countDown | Number | 1000 | interval millisecond | 6 | | duration | number | 3000 | showing duration default is 3seconds | 7 | | message | string | '' | message you want to show | 8 | 9 | ### slots 10 | | name | description 11 | | ------------ | ------------ | 12 | | default | useful for custom style | 13 | 14 | ```vue 15 | 26 | ``` 27 | 28 | -------------------------------------------------------------------------------- /src/components/tailwind/toast/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | | name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | v-model | Boolean | - | v-model supported with toast | 5 | | variant | string | success | background color variant | 6 | | duration | number | 3000 | showing duration default is 3seconds | 7 | | message | string | '' | message you want to show | 8 | 9 | ### slots 10 | | name | description 11 | | ------------ | ------------ | 12 | | default | if you need more than a simple message (also we will pass close method to it). | 13 | 14 | -------------------------------------------------------------------------------- /src/components/tailwind/toast/TToast.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /src/components/tailwind/tooltip/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | | name | Type | Default | Description | 3 | | ------------ | ------------ | ------------ | ------------ | 4 | | v-model | Boolean | - | v-model supported with tooltip | 5 | | variant | string | primary | background color variant | 6 | | position | string | top | show on witch side of element | 7 | | message | string | '' | message you want to show | 8 | | hover | boolean | true | set to false if you want to control with v-model | 9 | 10 | ### slots 11 | | name | description 12 | | ------------ | ------------ | 13 | | default | the trigger you want to show tooltip on it | 14 | | message | if you need more than a simple message (also we will pass close method to it). | 15 | 16 | -------------------------------------------------------------------------------- /src/components/tailwind/triangle/TTriangle.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /src/components/tailwind/zoom/README.md: -------------------------------------------------------------------------------- 1 | ### props 2 | 3 | | name | Type | Default | Description | 4 | | -------------- | ------- | ------- | ---------------------------------------------------------- | 5 | | src | string | "" | image source to show | 6 | | scale | number | 1.5 | scale number to scale the image by that number (1.5,2,3,4) | 7 | | maskSrc | string | "" | image mask source to show | -------------------------------------------------------------------------------- /src/compositionFunctions/clickEvents.ts: -------------------------------------------------------------------------------- 1 | import { onUnmounted, ref } from "vue"; 2 | export const useClickOutside = (elementRef = ref(null)) => { 3 | const clickedOutside = ref(false); 4 | const eventHandler = function(event) { 5 | const isClickInside = (elementRef.value as any)?.contains(event.target); 6 | 7 | if (!isClickInside) { 8 | clickedOutside.value = true; 9 | return; 10 | } 11 | 12 | clickedOutside.value = false; 13 | }; 14 | 15 | const registerEvent = () => { 16 | setTimeout(() => { 17 | document.addEventListener("click", eventHandler); 18 | }, 0); 19 | }; 20 | const unRegisterEvent = () => { 21 | setTimeout(() => { 22 | document.removeEventListener("click", eventHandler); 23 | clickedOutside.value = false; 24 | }, 0); 25 | }; 26 | onUnmounted(() => { 27 | document.removeEventListener("click", eventHandler); 28 | }); 29 | return { 30 | elementRef, 31 | clickedOutside, 32 | registerEvent, 33 | unRegisterEvent 34 | }; 35 | }; 36 | -------------------------------------------------------------------------------- /src/compositionFunctions/delayHandler.ts: -------------------------------------------------------------------------------- 1 | import { delayType } from "./../utility/css-helper"; 2 | import { computed } from "vue"; 3 | 4 | export const useDelayHandler = ( 5 | type: delayType, 6 | animationDelay, 7 | isOpened, 8 | isClosed 9 | ) => { 10 | const getAnimationDelay = computed(() => { 11 | if ( 12 | type === delayType.both || 13 | (type === delayType.open && isOpened.value) || 14 | (type === delayType.close && isClosed.value) 15 | ) { 16 | return `delay-${animationDelay}`; 17 | } 18 | return ""; 19 | }); 20 | 21 | return { 22 | getAnimationDelay 23 | }; 24 | }; 25 | -------------------------------------------------------------------------------- /src/compositionFunctions/expose/debounce.ts: -------------------------------------------------------------------------------- 1 | import { customRef } from "vue"; 2 | export const useDebouncedRef = (value: any, delay = 200) => { 3 | let timeout; 4 | return customRef((track, trigger) => { 5 | return { 6 | get() { 7 | track(); 8 | return value; 9 | }, 10 | set(newValue) { 11 | clearTimeout(timeout); 12 | timeout = setTimeout(() => { 13 | value = newValue; 14 | trigger(); 15 | }, delay); 16 | } 17 | }; 18 | }); 19 | }; 20 | -------------------------------------------------------------------------------- /src/compositionFunctions/expose/format.ts: -------------------------------------------------------------------------------- 1 | import { customRef } from "vue"; 2 | import { numberFormat } from "@/helpers/generalHelper"; 3 | export const useFormatRef = ( 4 | value: string | number, 5 | separator = ",", 6 | digitLength = 3 7 | ) => { 8 | return customRef((track, trigger) => { 9 | return { 10 | get() { 11 | track(); 12 | return numberFormat(value, separator, digitLength); 13 | }, 14 | set(newValue: string | number) { 15 | value = newValue; 16 | trigger(); 17 | } 18 | }; 19 | }); 20 | }; 21 | -------------------------------------------------------------------------------- /src/compositionFunctions/image.ts: -------------------------------------------------------------------------------- 1 | import { ref } from "vue"; 2 | export const useImageDownloader = () => { 3 | const image = ref(null as any); 4 | const downloadingImage = new Image(); 5 | const downloadImage = src => { 6 | downloadingImage.onload = function() { 7 | // @ts-ignore 8 | image.value = src; 9 | }; 10 | downloadingImage.src = src; 11 | }; 12 | 13 | const setImage = (imageRef: any) => { 14 | imageRef.value.src = image.value; 15 | }; 16 | 17 | return { 18 | image, 19 | setImage, 20 | downloadImage 21 | }; 22 | }; 23 | -------------------------------------------------------------------------------- /src/compositionFunctions/intersect.ts: -------------------------------------------------------------------------------- 1 | import { onMounted, ref, watch, Ref, unref } from "vue"; 2 | interface IntersectionObserverConfig extends IntersectionObserverInit { 3 | passRef?: boolean; 4 | delay?: Ref | number; 5 | defaultValue?: boolean; 6 | enable?: Ref; 7 | } 8 | 9 | export const useIntersectElement = ( 10 | { 11 | passRef = true, 12 | delay = ref(0) as any, 13 | defaultValue = false, 14 | enable = ref(true), 15 | ...options 16 | }: IntersectionObserverConfig = {}, 17 | callbackFunction?: ( 18 | entry: IntersectionObserverEntry, 19 | observer: IntersectionObserver 20 | ) => void, 21 | elementRef = ref(null) as any, 22 | mounted = true 23 | ) => { 24 | const isIntersecting = ref(defaultValue); 25 | let observer; 26 | let timeout; 27 | const observeFunc = () => { 28 | const callback = (entries, observer) => { 29 | const callbackMethod = () => { 30 | if (passRef == true) { 31 | isIntersecting.value = entries[0].isIntersecting; 32 | } 33 | callbackFunction?.(entries[0], observer); 34 | }; 35 | if (unref(delay) && unref(delay) > 0) { 36 | clearTimeout(timeout); 37 | timeout = setTimeout(() => { 38 | callbackMethod(); 39 | }, unref(delay) as number); 40 | } else { 41 | callbackMethod(); 42 | } 43 | }; 44 | // @ts-ignore 45 | observer = new IntersectionObserver(callback, options); 46 | observer.observe(mounted ? elementRef.value : elementRef); 47 | }; 48 | if (mounted) 49 | onMounted(() => { 50 | observeFunc(); 51 | }); 52 | else observeFunc(); 53 | 54 | const destroyObserver = () => { 55 | observer?.disconnect(); 56 | }; 57 | watch(enable, value => { 58 | if (value) { 59 | observeFunc(); 60 | } else { 61 | destroyObserver(); 62 | } 63 | }); 64 | 65 | if (passRef) { 66 | return { 67 | elementRef, 68 | isIntersecting, 69 | destroyObserver, 70 | startObserver: observeFunc 71 | }; 72 | } 73 | return { elementRef, destroyObserver, startObserver: observeFunc }; 74 | }; 75 | -------------------------------------------------------------------------------- /src/compositionFunctions/interval.ts: -------------------------------------------------------------------------------- 1 | import { onBeforeUnmount, watch, onBeforeMount } from "vue"; 2 | 3 | export const useInterval = (callback: () => void, delay: number | null) => { 4 | let interval; 5 | const clear = () => { 6 | if (interval) { 7 | clearInterval(interval); 8 | } 9 | }; 10 | const start = (duration: number | null = null) => { 11 | if (duration !== null) { 12 | clear(); 13 | interval = setInterval(callback, duration); 14 | } else if (delay !== null) { 15 | clear(); 16 | interval = setInterval(callback, delay); 17 | } 18 | }; 19 | onBeforeMount(() => { 20 | start(); 21 | }); 22 | onBeforeUnmount(() => { 23 | clear(); 24 | }); 25 | watch( 26 | () => delay, 27 | value => { 28 | value && start(); 29 | } 30 | ); 31 | return { start, clear }; 32 | }; 33 | -------------------------------------------------------------------------------- /src/compositionFunctions/isScrolling.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-non-null-assertion */ 2 | import { onUnmounted, ref } from "vue"; 3 | import { onMounted } from "vue"; 4 | export const useIsScrolling = (onMount = false, element = ref(null)) => { 5 | const result = ref({}); 6 | const scrollDestroyed = ref(0); 7 | const handleScroll = e => { 8 | result.value = e; 9 | }; 10 | const initiateScroll = () => { 11 | if (element.value) { 12 | (element.value! as HTMLElement).addEventListener("scroll", handleScroll); 13 | } else document.addEventListener("scroll", handleScroll); 14 | }; 15 | const destroyScroll = () => { 16 | if (element.value) { 17 | (element.value! as HTMLElement).removeEventListener( 18 | "scroll", 19 | handleScroll 20 | ); 21 | } else document.removeEventListener("scroll", handleScroll); 22 | }; 23 | onMounted(() => { 24 | if (onMount) initiateScroll(); 25 | }); 26 | 27 | onUnmounted(() => { 28 | destroyScroll(); 29 | scrollDestroyed.value++; 30 | }); 31 | 32 | return { 33 | result, 34 | destroyScroll, 35 | scrollDestroyed, 36 | initiateScroll, 37 | element 38 | }; 39 | }; 40 | -------------------------------------------------------------------------------- /src/compositionFunctions/keyboardEvents.ts: -------------------------------------------------------------------------------- 1 | import { onMounted, onUnmounted } from "vue"; 2 | export const useKeyDown = (callback: (e: any) => void) => { 3 | onMounted(() => { 4 | document.addEventListener("keydown", callback); 5 | }); 6 | onUnmounted(() => { 7 | document.removeEventListener("keydown", callback); 8 | }); 9 | }; 10 | -------------------------------------------------------------------------------- /src/compositionFunctions/maxSize.ts: -------------------------------------------------------------------------------- 1 | import { computed } from "vue"; 2 | import { size } from "@/utility/css-helper"; 3 | 4 | export const useMaxWidth = maxSize => 5 | computed((): string => { 6 | switch (maxSize) { 7 | case size.xs: 8 | return "max-w-1/4"; 9 | case size.sm: 10 | return "max-w-1/2"; 11 | case size.md: 12 | return "max-w-3/4"; 13 | case size.lg: 14 | return "max-w-9/10"; 15 | case size.full: 16 | return "max-w-full"; 17 | } 18 | return ""; 19 | }); 20 | -------------------------------------------------------------------------------- /src/compositionFunctions/offset.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-non-null-assertion */ 2 | export const userOffsetFinder = () => { 3 | function findOffset($event: MouseEvent) { 4 | const leftOffset = 5 | // @ts-ignore 6 | $event.pageX - $event.target!.offsetLeft; 7 | const topOffset = 8 | // @ts-ignore 9 | $event.pageY - $event.target!.offsetTop; 10 | return { 11 | left: leftOffset, 12 | top: topOffset 13 | }; 14 | } 15 | 16 | return { findOffset }; 17 | }; 18 | -------------------------------------------------------------------------------- /src/compositionFunctions/rangeSlider.ts: -------------------------------------------------------------------------------- 1 | import { computed, watch } from "vue"; 2 | import { useSwipeElement } from "@/compositionFunctions/swipe"; 3 | 4 | export const useRangeMin = (containerWidth, rangeArea, props, { emit }) => { 5 | const minThumb = computed( 6 | () => ((props.minValue - props.min) * 100) / rangeArea 7 | ); 8 | const { 9 | bind: minEvents, 10 | state: minState, 11 | xDiff: minSwipeDiff 12 | } = useSwipeElement(); 13 | const emitByMinPercent = pMin => { 14 | //pMin 15 | const minValue = (pMin * rangeArea) / 100 + props.min; 16 | if (minValue <= props.min) { 17 | emit("update:minValue", props.min); 18 | } else if (minValue >= props.maxValue) { 19 | emit("update:minValue", props.maxValue); 20 | } else { 21 | emit("update:minValue", minValue); 22 | } 23 | }; 24 | let initialMin = minThumb.value; 25 | watch( 26 | () => minState.isTouching, 27 | () => { 28 | if (minState.isTouching) { 29 | initialMin = minThumb.value; 30 | } else { 31 | initialMin = 0; 32 | } 33 | } 34 | ); 35 | const getMinPercent = computed(() => { 36 | const percent = (minSwipeDiff.value * 100) / containerWidth.value; 37 | return percent + initialMin; 38 | }); 39 | 40 | watch( 41 | () => minSwipeDiff.value, 42 | () => { 43 | emitByMinPercent(getMinPercent.value); 44 | } 45 | ); 46 | return { minThumb, minEvents }; 47 | }; 48 | export const useRangeMax = (containerWidth, rangeArea, props, { emit }) => { 49 | const maxThumb = computed( 50 | () => ((props.max - props.maxValue) * 100) / rangeArea 51 | ); 52 | const { 53 | bind: maxEvents, 54 | state: maxState, 55 | xDiff: maxSwipeDiff 56 | } = useSwipeElement(); 57 | 58 | const emitByMaxPercent = pMax => { 59 | const maxValue = props.max - (pMax * rangeArea) / 100; 60 | 61 | if (maxValue >= props.max) { 62 | emit("update:maxValue", props.max); 63 | } else if (maxValue <= props.minValue) { 64 | emit("update:maxValue", props.minValue); 65 | } else { 66 | emit("update:maxValue", maxValue); 67 | } 68 | }; 69 | let initialMax = maxThumb.value; 70 | watch( 71 | () => maxState.isTouching, 72 | () => { 73 | if (maxState.isTouching) { 74 | initialMax = maxThumb.value; 75 | } else { 76 | initialMax = 0; 77 | } 78 | } 79 | ); 80 | const getMaxPercent = computed(() => { 81 | const percent = (maxSwipeDiff.value * -1 * 100) / containerWidth.value; 82 | return percent + initialMax; 83 | }); 84 | 85 | watch( 86 | () => maxSwipeDiff.value, 87 | () => { 88 | emitByMaxPercent(getMaxPercent.value); 89 | } 90 | ); 91 | return { maxThumb, maxEvents }; 92 | }; 93 | -------------------------------------------------------------------------------- /src/compositionFunctions/scroll.ts: -------------------------------------------------------------------------------- 1 | import { onMounted, ref } from "vue"; 2 | import { ScrollDirections } from "@/utility/enums/ScrollDirections"; 3 | 4 | export const useScrollElement = () => { 5 | const scrollTo = ( 6 | element, 7 | scrollPixels: number, 8 | duration: number, 9 | direction: ScrollDirections 10 | ) => { 11 | // element[direction] = scrollPixels; 12 | const scrollPos = element[direction]; 13 | // Get the start timestamp 14 | const startTime = 15 | "now" in window.performance ? performance.now() : new Date().getTime(); 16 | 17 | const scroll = timestamp => { 18 | //Calculate the timeelapsed 19 | const timeElapsed = timestamp - startTime; 20 | //Calculate progress 21 | const progress = Math.min(timeElapsed / duration, 1); 22 | //Set the scroll direction 23 | element[direction] = scrollPos + scrollPixels * progress; 24 | //Check if elapsed time is less then duration then call the requestAnimation, otherwise exit 25 | if (timeElapsed < duration) { 26 | //Request for animation 27 | window.requestAnimationFrame(scroll); 28 | } else { 29 | return; 30 | } 31 | }; 32 | //Call requestAnimationFrame on scroll function first time 33 | window.requestAnimationFrame(scroll); 34 | }; 35 | 36 | const elementRef = ref(null); 37 | 38 | const scrollLeft = (scrollPixels: number, duration = 200) => { 39 | scrollTo( 40 | elementRef.value, 41 | scrollPixels * -1, 42 | duration, 43 | ScrollDirections.left 44 | ); 45 | }; 46 | 47 | const scrollRight = (scrollPixels: number, duration = 200) => { 48 | scrollTo(elementRef.value, scrollPixels, duration, ScrollDirections.left); 49 | }; 50 | const hasHorizontalScrollbar = ref(false); 51 | onMounted(() => { 52 | // elementRef.value.addEventListener("resize", e => { 53 | // console.log("resize called", e); 54 | // }); 55 | hasHorizontalScrollbar.value = 56 | elementRef.value.scrollWidth > elementRef.value.clientWidth; 57 | }); 58 | 59 | return { elementRef, scrollLeft, scrollRight, hasHorizontalScrollbar }; 60 | }; 61 | -------------------------------------------------------------------------------- /src/compositionFunctions/settings.ts: -------------------------------------------------------------------------------- 1 | import { computed, inject, getCurrentInstance } from "vue"; 2 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 3 | import { TSettings, TSettingItem } from "@/utility/types/TSettings"; 4 | 5 | export const useRenderClass = (componentName: string) => { 6 | const TSettings = inject("TSettings"); 7 | const instance = getCurrentInstance(); 8 | const renderClass = computed( 9 | () => (className: string, elementName: string, objectBinding = {}) => { 10 | const getSettings = computed((): TSettingItem | null => { 11 | let s: TSettingItem | undefined = 12 | TSettings?.[componentName]?.[elementName]; 13 | const dataDelete = instance?.attrs?.[`data-${elementName}-delete`]; 14 | const dataAdd = instance?.attrs?.[`data-${elementName}-add`]; 15 | if (dataDelete && typeof dataDelete === "string") { 16 | if (!s) { 17 | s = {}; 18 | } 19 | if (!s.delete) { 20 | s.delete = []; 21 | } 22 | s.delete = [...s.delete, ...dataDelete.split(" ")]; 23 | } 24 | if (dataAdd) { 25 | if (!s) { 26 | s = {}; 27 | } 28 | if (!s.add) { 29 | s.add = ""; 30 | } 31 | s.add += " " + dataAdd; 32 | } 33 | return s || null; 34 | }); 35 | let result = className; 36 | for (const k in objectBinding) { 37 | if (objectBinding[k]) { 38 | result += " " + k + " "; 39 | } 40 | } 41 | const settings = getSettings.value; 42 | if (settings) { 43 | if (settings.add) { 44 | result += " " + settings.add; 45 | } 46 | if (settings.delete) { 47 | settings.delete.forEach(item => { 48 | result = result.replace(item, ""); 49 | }); 50 | } 51 | if (settings.replace) { 52 | for (const key in settings.replace) { 53 | result = result.replace(key, settings.replace[key]); 54 | } 55 | } 56 | } 57 | return result; 58 | } 59 | ); 60 | 61 | return { renderClass }; 62 | }; 63 | -------------------------------------------------------------------------------- /src/compositionFunctions/switchAndCheckbox.ts: -------------------------------------------------------------------------------- 1 | import { SwitchAndCheckbox } from "@/utility/types/base-component-types"; 2 | import { computed } from "vue"; 3 | 4 | export const useSwitchAndCheckbox = (props, { emit }) => { 5 | const compare = ( 6 | item1: SwitchAndCheckbox.Value | undefined, 7 | item2: SwitchAndCheckbox.Value | undefined 8 | ) => { 9 | if (typeof item1 === "object" && typeof item2 === "object") { 10 | return JSON.stringify(item1) === JSON.stringify(item2); 11 | } 12 | return item1 === item2; 13 | }; 14 | 15 | const isChecked = computed((): boolean => { 16 | if (Array.isArray(props.modelValue)) { 17 | return props.modelValue.some(item => compare(item, props.value)); 18 | } 19 | return compare(props.modelValue, props.trueValue); 20 | }); 21 | const updateInput = e => { 22 | if (!props.disabled) { 23 | const isActive = e?.target?.checked ?? !isChecked.value; 24 | if (Array.isArray(props.modelValue)) { 25 | const newValue = [...props.modelValue]; 26 | if (isActive) { 27 | newValue.push(props.value); 28 | } else { 29 | newValue.splice( 30 | newValue.findIndex(item => compare(item, props.value)), 31 | 1 32 | ); 33 | } 34 | emit("update:modelValue", newValue); 35 | } else { 36 | emit( 37 | "update:modelValue", 38 | isActive ? props.trueValue : props.falseValue 39 | ); 40 | } 41 | } 42 | }; 43 | 44 | return { isChecked, updateInput }; 45 | }; 46 | -------------------------------------------------------------------------------- /src/compositionFunctions/useResize.ts: -------------------------------------------------------------------------------- 1 | import { onUnmounted } from "vue"; 2 | import { onMounted } from "vue"; 3 | export const useResize = callback => { 4 | onMounted(() => { 5 | window.addEventListener("resize", callback); 6 | }); 7 | onUnmounted(() => { 8 | window.removeEventListener("resize", callback); 9 | }); 10 | }; 11 | -------------------------------------------------------------------------------- /src/compositionFunctions/visible.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-non-null-assertion */ 2 | import { useIsScrolling } from "./isScrolling"; 3 | import { onUnmounted, watch } from "vue"; 4 | import { ref } from "vue"; 5 | export enum visibilityOverflow { 6 | right = "right", 7 | left = "left", 8 | top = "top", 9 | bottom = "bottom" 10 | } 11 | 12 | let isScrolling = null as any; 13 | let scrollDestroyed = null as any; 14 | let destroyScroll = null as any; 15 | 16 | let observersCount = 0; 17 | export const useIsVisible = ( 18 | element = ref(null as any), 19 | parentElement = ref(null as any) 20 | ) => { 21 | observersCount++; 22 | 23 | const isOpen = ref(false); 24 | const placement = ref(null as null | visibilityOverflow[]); 25 | if (isScrolling === null) { 26 | const scrollInstance = useIsScrolling(); 27 | isScrolling = scrollInstance.result; 28 | scrollInstance.initiateScroll(); 29 | destroyScroll = scrollInstance.destroyScroll; 30 | scrollDestroyed = scrollInstance.scrollDestroyed; 31 | } 32 | 33 | const handlePlacement = () => { 34 | if (!isOpen.value) return; 35 | 36 | const childBounding = element.value!.getBoundingClientRect(); 37 | const parentBounding = parentElement.value!.getBoundingClientRect(); 38 | const windowHeight = 39 | window.innerHeight || document.documentElement.clientHeight; 40 | const placementTemporaryValue = [] as visibilityOverflow[] | null; 41 | const childWidth = childBounding.width; 42 | const childHeight = childBounding.height; 43 | if (parentBounding.top > childHeight) { 44 | placementTemporaryValue!.push(visibilityOverflow.top); 45 | } 46 | if (parentBounding.right > childWidth) { 47 | placementTemporaryValue!.push(visibilityOverflow.right); 48 | } 49 | if (parentBounding.left > childWidth) { 50 | placementTemporaryValue!.push(visibilityOverflow.left); 51 | } 52 | if (windowHeight - parentBounding.bottom > childHeight) { 53 | placementTemporaryValue!.push(visibilityOverflow.bottom); 54 | } 55 | 56 | if (placementTemporaryValue?.length) { 57 | placement.value = placementTemporaryValue; 58 | } else { 59 | placement.value = [ 60 | visibilityOverflow.bottom, 61 | visibilityOverflow.left, 62 | visibilityOverflow.right, 63 | visibilityOverflow.top 64 | ]; 65 | } 66 | }; 67 | 68 | watch(isScrolling, () => { 69 | handlePlacement(); 70 | }); 71 | 72 | onUnmounted(() => { 73 | observersCount--; 74 | if (observersCount === 0) { 75 | destroyScroll(); 76 | isScrolling = null; 77 | } 78 | }); 79 | watch(scrollDestroyed, () => { 80 | observersCount = 0; 81 | isScrolling = null; 82 | }); 83 | return { 84 | element, 85 | placement, 86 | parentElement, 87 | handlePlacement, 88 | isOpen 89 | }; 90 | }; 91 | -------------------------------------------------------------------------------- /src/helpers/generalHelper.ts: -------------------------------------------------------------------------------- 1 | import { modifierVariants } from "@/utility/css-helper"; 2 | 3 | export const numberFormat = (number, separator = ",", digitLength = 3) => { 4 | if (number === undefined) { 5 | return ""; 6 | } 7 | let num = number.toString(); 8 | num = num.replace(/[^\d]/g, ""); 9 | 10 | if (num.length > digitLength) { 11 | const expression = "\\B(?=(?:\\d{" + digitLength + "})+(?!\\d))"; 12 | num = num.replace(new RegExp(expression, "g"), separator); 13 | } 14 | 15 | return num; 16 | }; 17 | 18 | export function formatHandlerWrapper( 19 | modifierType: modifierVariants, 20 | modelModifiers 21 | ) { 22 | const keys = Object.keys(modelModifiers); 23 | const findKey = (type: modifierVariants) => 24 | keys.findIndex(e => e.includes(type)); 25 | const retArgs = (str: string) => { 26 | if (str.split(":").length > 1) { 27 | const tmp = str.split(":"); 28 | tmp.splice(0, 1); 29 | return tmp.length === 2 ? tmp : [...tmp, 3]; 30 | } 31 | return [",", 3]; 32 | }; 33 | const key = findKey(modifierType || ""); 34 | const args = retArgs(keys[key] || ""); 35 | 36 | return [key !== -1, args]; 37 | } 38 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import * as components from "@/components/tailwind"; 2 | 3 | export * from "@/components/tailwind"; 4 | export { useDebouncedRef } from "@/compositionFunctions/expose/debounce"; 5 | export { useFormatRef } from "@/compositionFunctions/expose/format"; 6 | export { TSettings, TSettingItem } from "@/utility/types/TSettings"; 7 | 8 | const install = app => { 9 | Object.keys(components).forEach(name => { 10 | app.component(name, components[name]); 11 | }); 12 | }; 13 | 14 | export default install; 15 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import App from "./App.vue"; 3 | import "./assets/css/index.css"; 4 | import router from "./router"; 5 | import VueMarkdownIt from "vue3-markdown-it"; 6 | 7 | createApp(App) 8 | .use(router) 9 | .use(VueMarkdownIt) 10 | .mount("#app"); 11 | -------------------------------------------------------------------------------- /src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | declare module '*.vue' { 3 | import type { DefineComponent } from 'vue' 4 | const component: DefineComponent<{}, {}, any> 5 | export default component 6 | } 7 | -------------------------------------------------------------------------------- /src/utility/commonProps/SwitchAndCheckboxProps.ts: -------------------------------------------------------------------------------- 1 | import { inject, PropType } from "vue"; 2 | import { SwitchAndCheckbox } from "@/utility/types/base-component-types"; 3 | import { variants } from "@/utility/css-helper"; 4 | 5 | export default (isCheckbox = true) => { 6 | const component = isCheckbox ? "t-checkbox" : "t-switch"; 7 | return { 8 | modelValue: { 9 | default: "", 10 | type: [Array, String, Number, Boolean, Object] as PropType< 11 | SwitchAndCheckbox.Value 12 | > 13 | }, 14 | value: { 15 | type: [Array, String, Number, Boolean, Object] as PropType< 16 | SwitchAndCheckbox.Value | undefined 17 | >, 18 | default: () => undefined 19 | }, 20 | label: { type: String, default: "" }, 21 | trueValue: { 22 | type: [Array, String, Number, Boolean, Object] as PropType< 23 | SwitchAndCheckbox.Value 24 | >, 25 | default: () => inject(`${component}-trueValue`, 1) 26 | }, 27 | falseValue: { 28 | type: [Array, String, Number, Boolean, Object] as PropType< 29 | SwitchAndCheckbox.Value 30 | >, 31 | default: () => inject(`${component}-falseValue`, 0) 32 | }, 33 | variant: { 34 | type: String, 35 | default: () => inject(`${component}-variant`, "primary"), 36 | validator: (propValue: string) => { 37 | // eslint-disable-next-line @typescript-eslint/ban-ts-ignore 38 | // @ts-ignore 39 | return !!variants[propValue]; 40 | } 41 | }, 42 | disabled: { 43 | type: Boolean, 44 | default: () => false 45 | } 46 | }; 47 | }; 48 | -------------------------------------------------------------------------------- /src/utility/css-helper.ts: -------------------------------------------------------------------------------- 1 | export enum variants { 2 | primary = "primary", 3 | success = "success", 4 | danger = "danger", 5 | warning = "warning", 6 | white = "white", 7 | secondary = "secondary" 8 | } 9 | 10 | export enum buttonSizes { 11 | normal = "normal", 12 | small = "small", 13 | large = "large" 14 | } 15 | 16 | export enum textInputVariants { 17 | number = "number", 18 | text = "text", 19 | tel = "tel" 20 | } 21 | 22 | export enum textInputAlignments { 23 | right = "right", 24 | center = "center", 25 | left = "left" 26 | } 27 | 28 | export enum modifierVariants { 29 | format = "format" 30 | } 31 | 32 | export enum size { 33 | xs = "xs", 34 | sm = "sm", 35 | md = "md", 36 | lg = "lg", 37 | full = "full" 38 | } 39 | 40 | export enum normalSizes { 41 | xs = "xs", 42 | sm = "sm", 43 | md = "md", 44 | lg = "lg" 45 | } 46 | 47 | export enum positionVariant { 48 | topLeft = "topLeft", 49 | topRight = "topRight", 50 | bottomLeft = "bottomLeft", 51 | bottomRight = "bottomRight" 52 | } 53 | 54 | export enum arrowDirections { 55 | "arrow-up" = "arrow-up", 56 | "arrow-down" = "arrow-down", 57 | "arrow-right" = "arrow-right", 58 | "arrow-left" = "arrow-left" 59 | } 60 | 61 | export enum delayType { 62 | open = "open", 63 | close = "close", 64 | both = "both" 65 | } 66 | -------------------------------------------------------------------------------- /src/utility/enums/ScrollDirections.ts: -------------------------------------------------------------------------------- 1 | export enum ScrollDirections { 2 | left = "scrollLeft", 3 | bottom = "scrollBottom" 4 | } 5 | -------------------------------------------------------------------------------- /src/utility/enums/SkeletonTypes.ts: -------------------------------------------------------------------------------- 1 | export enum SkeletonTypes { 2 | AVATAR_LIST = "avatar-list", 3 | CARD = "card", 4 | ONE_LINE = "one-line", 5 | THREE_LINE = "three-line", 6 | IMAGE = "image", 7 | CUSTOM = "custom" 8 | } 9 | export enum LoadingTypes { 10 | default = "default", 11 | spinner = "spinner" 12 | } 13 | -------------------------------------------------------------------------------- /src/utility/types/base-component-types.ts: -------------------------------------------------------------------------------- 1 | import { variants } from "@/utility/css-helper"; 2 | export namespace BreadCrumb { 3 | export type Root = { text?: string; url?: string; active?: boolean }[]; 4 | } 5 | export namespace SwitchAndCheckbox { 6 | export type Value = any[] | string | number | boolean | object; //also used in radio 7 | } 8 | 9 | export namespace DropDown { 10 | export type stringForm = string[]; 11 | export interface ObjectForm { 12 | label: string; 13 | value: any; 14 | } 15 | 16 | export type Root = stringForm | ObjectForm[]; 17 | } 18 | 19 | export namespace Table { 20 | export interface HeaderItem { 21 | key?: string; 22 | label?: string; 23 | sortable?: boolean; 24 | variant?: string; 25 | } 26 | export interface Item { 27 | _cellVariants?: { [key: string]: variants }; 28 | _rowVariant?: string; 29 | _showDetails?: boolean; 30 | [key: string]: any; 31 | } 32 | export enum SortEnum { 33 | ASC = "asc", 34 | DESC = "desc" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/views/Breadcrumb.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /src/views/Image.vue: -------------------------------------------------------------------------------- 1 | 73 | 74 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /src/views/Modal.vue: -------------------------------------------------------------------------------- 1 | 62 | 63 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /src/views/Mohammad.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 35 | -------------------------------------------------------------------------------- /src/views/Slider.vue: -------------------------------------------------------------------------------- 1 | 59 | 60 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /tests/unit/example.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from "@vue/test-utils"; 2 | import HelloWorld from "@/components/HelloWorld.vue"; 3 | 4 | describe("HelloWorld.vue", () => { 5 | it("renders props.msg when passed", () => { 6 | const msg = "new message"; 7 | const wrapper = shallowMount(HelloWorld, { 8 | props: { msg } 9 | }); 10 | expect(wrapper.text()).toMatch(msg); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "strict": true, 6 | "noImplicitAny": false, 7 | "jsx": "preserve", 8 | "importHelpers": true, 9 | "moduleResolution": "node", 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "sourceMap": true, 14 | "baseUrl": ".", 15 | "typeRoots": ["./node_modules/@types", "types"], 16 | "types": [ 17 | "webpack-env" 18 | ], 19 | "paths": { 20 | "@/*": [ 21 | "src/*" 22 | ] 23 | }, 24 | "lib": [ 25 | "esnext", 26 | "dom", 27 | "dom.iterable", 28 | "scripthost" 29 | ] 30 | }, 31 | "include": [ 32 | "src/**/*.ts", 33 | "src/**/*.tsx", 34 | "src/**/*.vue", 35 | "tests/**/*.ts", 36 | "tests/**/*.tsx" 37 | ], 38 | "exclude": [ 39 | "node_modules" 40 | ] 41 | } 42 | -------------------------------------------------------------------------------- /types/index.d.ts: -------------------------------------------------------------------------------- 1 | import { App, DefineComponent } from "vue"; 2 | export { TSettings } from "../src/utility/types/TSettings"; 3 | 4 | /** 5 | * Install entry point 6 | * 7 | * @param app - A target Vue app instance 8 | * @param options - An install options 9 | */ 10 | export declare function install(app: App, ...options: unknown[]): void; 11 | 12 | declare module "tailwind-vue3" { 13 | export const TAccordion: DefineComponent; 14 | export const TAlert: DefineComponent; 15 | export const TAnimate: DefineComponent; 16 | export const TBadge: DefineComponent; 17 | export const TButton: DefineComponent; 18 | export const TBottomSheet: DefineComponent; 19 | export const TBreadcrumb: DefineComponent; 20 | export const TCard: DefineComponent; 21 | export const TCarousel: DefineComponent; 22 | export const TCheckbox: DefineComponent; 23 | export const TCollapsible: DefineComponent; 24 | export const TDrawer: DefineComponent; 25 | export const TDropdown: DefineComponent; 26 | export const TFade: DefineComponent; 27 | export const TIcon: DefineComponent; 28 | export const TImage: DefineComponent; 29 | export const TLoading: DefineComponent; 30 | export const TMenu: DefineComponent; 31 | export const TModal: DefineComponent; 32 | export const TNumberPicker: DefineComponent; 33 | export const numberTransformer: DefineComponent; 34 | export const TPagination: DefineComponent; 35 | export const TProgressBar: DefineComponent; 36 | export const TRadio: DefineComponent; 37 | export const TRangeSlider: DefineComponent; 38 | export const TRate: DefineComponent; 39 | export const TSearchable: DefineComponent; 40 | export const TSkeleton: DefineComponent; 41 | export const TSlider: DefineComponent; 42 | export const TStepper: DefineComponent; 43 | export const TSwitch: DefineComponent; 44 | export const TTabs: DefineComponent; 45 | export const TTabItem: DefineComponent; 46 | export const TTh: DefineComponent; 47 | export const TTable: DefineComponent; 48 | export const TTextInput: DefineComponent; 49 | export const TTimeline: DefineComponent; 50 | export const TCountDownTimer: DefineComponent; 51 | export const TToast: DefineComponent; 52 | export const TTooltip: DefineComponent; 53 | export const TTriangle: DefineComponent; 54 | export const TZoom: DefineComponent; 55 | } 56 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | publicPath: process.env.NODE_ENV === "production" ? "/tailwind-vue/" : "/", 3 | css: { extract: false } 4 | }; 5 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | import CopyWebpackPlugin from "copy-webpack-plugin"; 2 | module.exports = { 3 | css: { 4 | sourceMap: true 5 | }, 6 | baseUrl: "/", 7 | outputDir: "src/client/dist", 8 | lintOnSave: false, 9 | configureWebpack: { 10 | performance: { 11 | maxAssetSize: 500000 12 | }, 13 | plugins: [ 14 | new CopyWebpackPlugin([ 15 | { from: "src/components/tailwind/", to: "public" } 16 | ]) 17 | ] 18 | }, 19 | devServer: { 20 | proxy: { 21 | ".*": { 22 | target: `http://localhost:${process.env.PORT}`, 23 | ws: true 24 | } 25 | } 26 | }, 27 | module: { 28 | rules: [ 29 | // ... other rules omitted 30 | 31 | // this will apply to both plain `.scss` files 32 | // AND `