├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .vscode ├── .vscode │ └── settings.json └── settings.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── exemple ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── README.md ├── assets │ └── README.md ├── components │ ├── Logo.vue │ └── README.md ├── dewib │ └── config.js ├── layouts │ ├── README.md │ └── default.vue ├── middleware │ └── README.md ├── nuxt.config.js ├── package.json ├── pages │ ├── README.md │ └── index.vue ├── plugins │ └── README.md ├── static │ ├── README.md │ └── favicon.ico ├── store │ └── README.md ├── tailwind.config.js └── yarn.lock ├── lib ├── components │ ├── basic │ │ ├── Container.props.js │ │ └── Container.vue │ ├── commons.props.js │ ├── config.mixin.js │ ├── confirm.mixin.js │ ├── data │ │ ├── Tag.stories.js │ │ └── Tag.vue │ ├── directives │ │ └── click-away.js │ ├── disabled.props.js │ ├── elements │ │ ├── Button.props.js │ │ ├── Button.stories.js │ │ └── Button.vue │ ├── form │ │ ├── DatePicker │ │ │ ├── DatePicker.props.js │ │ │ ├── DatePicker.stories.js │ │ │ └── DatePicker.vue │ │ ├── Form.mixin.js │ │ ├── Form.props.js │ │ ├── Form.stories.js │ │ ├── Form.vue │ │ ├── Input.mixin.js │ │ ├── Input.props.js │ │ ├── Input.vue │ │ ├── InputCheckbox.props.js │ │ ├── InputCheckbox.stories.js │ │ ├── InputCheckbox.vue │ │ ├── InputDate.stories.js │ │ ├── InputDate.vue │ │ ├── InputDatePicker.stories.js │ │ ├── InputDatePicker.vue │ │ ├── InputDateTime.stories.js │ │ ├── InputDateTime.vue │ │ ├── InputDatepicker.props.js │ │ ├── InputEmail.stories.js │ │ ├── InputEmail.vue │ │ ├── InputGroup.props.js │ │ ├── InputGroup.vue │ │ ├── InputGroupCheckbox.props.js │ │ ├── InputGroupCheckbox.stories.js │ │ ├── InputGroupCheckbox.vue │ │ ├── InputGroupRadio.props.js │ │ ├── InputGroupRadio.stories.js │ │ ├── InputGroupRadio.vue │ │ ├── InputNumber.props.js │ │ ├── InputNumber.vue │ │ ├── InputPassword.props.js │ │ ├── InputPassword.stories.js │ │ ├── InputPassword.vue │ │ ├── InputRadio.props.js │ │ ├── InputRadio.stories.js │ │ ├── InputRadio.vue │ │ ├── InputText.stories.js │ │ ├── InputText.vue │ │ ├── InputTime.stories.js │ │ ├── InputTime.vue │ │ ├── ItemQuantity.props.js │ │ ├── ItemQuantity.stories.js │ │ ├── ItemQuantity.vue │ │ ├── RichSelect.props.js │ │ ├── RichSelect.stories.js │ │ ├── RichSelect.vue │ │ ├── Select.props.js │ │ ├── Select.stories.js │ │ ├── Select.vue │ │ ├── TextArea.props.js │ │ ├── TextArea.stories.js │ │ ├── TextArea.vue │ │ ├── Toggle.stories.js │ │ ├── Toggle.vue │ │ └── tooltip.props.js │ ├── href.props.js │ ├── navigation │ │ ├── Breadcrumb.props.js │ │ ├── Breadcrumb.stories.js │ │ ├── Breadcrumb.vue │ │ ├── Steps │ │ │ ├── Step.vue │ │ │ ├── Steps.stories.js │ │ │ └── Steps.vue │ │ └── Tabs │ │ │ ├── Tabs.stories.js │ │ │ ├── Tabs.vue │ │ │ ├── TabsNav.vue │ │ │ ├── TabsNavItem.vue │ │ │ └── TabsPane.vue │ ├── others │ │ ├── Card.props.js │ │ ├── Card.stories.js │ │ ├── Card.vue │ │ ├── Modal.stories.js │ │ ├── Modal.vue │ │ ├── Rate.stories.js │ │ ├── Rate.vue │ │ ├── ScrollWrapper.stories.js │ │ ├── ScrollWrapper.vue │ │ ├── Tooltip.stories.js │ │ ├── Tooltip.vue │ │ ├── TruncateText.props.js │ │ ├── TruncateText.stories.js │ │ ├── TruncateText.vue │ │ ├── collapse │ │ │ ├── Collapse.props.js │ │ │ ├── Collapse.stories.js │ │ │ ├── Collapse.vue │ │ │ ├── CollapseItem.props.js │ │ │ ├── CollapseItem.stories.js │ │ │ └── CollapseItem.vue │ │ ├── dialog │ │ │ ├── Dialog.stories.js │ │ │ ├── Dialog.vue │ │ │ └── plugin.js │ │ └── notification │ │ │ ├── Notification.stories.js │ │ │ ├── Notification.vue │ │ │ ├── NotificationWrapper.vue │ │ │ └── plugin.js │ ├── rounded.props.js │ ├── size.props.js │ ├── target-link.props.js │ ├── to.props.js │ ├── transitions │ │ ├── CollapseTransition.vue │ │ ├── ConfigTransition.vue │ │ └── FadeTransition.vue │ └── utils │ │ ├── bindProps.js │ │ ├── dom.js │ │ ├── i18n.js │ │ ├── isEmpty.js │ │ ├── localProp.js │ │ ├── object.js │ │ ├── string.js │ │ ├── syncProps.js │ │ └── timer.js ├── index.js ├── plugins │ ├── i18n.js │ ├── index.js │ └── plugins.js └── utils │ ├── config.js │ ├── tailwind.js │ └── ui.css ├── package.json └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_size = 2 6 | indent_style = space 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parserOptions: { 4 | parser: 'babel-eslint', 5 | sourceType: 'module' 6 | }, 7 | extends: [ 8 | '@nuxtjs' 9 | ], 10 | rules: { 11 | curly: [2, 'multi'], 12 | 'vue/no-v-html': 0 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | 92 | # TODO List 93 | TODO.md 94 | -------------------------------------------------------------------------------- /.vscode/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.validate": [ 3 | { 4 | "language": "vue", 5 | "autoFix": true 6 | }, 7 | { 8 | "language": "html", 9 | "autoFix": true 10 | }, 11 | { 12 | "language": "vue-html", 13 | "autoFix": true 14 | }, 15 | { 16 | "language": "javascript", 17 | "autoFix": true 18 | } 19 | ], 20 | "eslint.autoFixOnSave": true, 21 | // Force using formating from eslint config 22 | "vetur.format.defaultFormatter.js": "none", 23 | "editor.codeActionsOnSave": { 24 | "source.fixAll.eslint": true 25 | }, 26 | "files.associations": { 27 | 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.validate": [ 3 | { 4 | "language": "vue", 5 | "autoFix": true 6 | }, 7 | { 8 | "language": "html", 9 | "autoFix": true 10 | }, 11 | { 12 | "language": "vue-html", 13 | "autoFix": true 14 | }, 15 | { 16 | "language": "javascript", 17 | "autoFix": true 18 | } 19 | ], 20 | "eslint.autoFixOnSave": true, 21 | // Force using formating from eslint config 22 | "vetur.format.defaultFormatter.js": "none", 23 | "editor.codeActionsOnSave": { 24 | "source.fixAll.eslint": true 25 | }, 26 | "files.associations": { 27 | 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Gaetan SENN 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # dw-ui 2 | Dewib ui is an open source ui library for developing HTML/CSS and JS websites. This package is developed with Vue.js and tailwindcss and to use with NuxtJS 3 | 4 | Get started with the [documentation](https://xhr-cache.dewib.com) 5 | 6 | ## Requirement 7 | Dewib ui provide @nuxtjs/tailwindcss by default so please remove it or use v4 version 8 | 9 | ## Setup 10 | ```sh 11 | yarn add @dewib/dw-ui # yarn 12 | npm i @dewib/dw-ui # npm 13 | ``` 14 | 15 | Edit `nuxt.config.js` 16 | 17 | ```js 18 | modules: [ 19 | '@dewib/dw-ui' 20 | ] 21 | ``` 22 | 23 | dw-ui using tailwindcss-forms plugin as recommanded by tailwindui 24 | If you want to overide default https://github.com/tailwindlabs/tailwindcss-forms config please overide the plugin 25 | An exemple is provided in `storybook/plugins/custom.form.js` 26 | 27 | ```js 28 | import forms from 'path/to/custom' 29 | 30 | modules: [ 31 | ['@dewib/dw-ui', { 32 | forms 33 | }] 34 | ] 35 | ``` 36 | 37 | ## Theme 38 | Dewib ui allows you to customize the default theme https://github.com/gaetansenn/dw-ui/blob/master/lib/utils/config.js 39 | To do so create this path `dewib/config.js` to the root of your project 40 | 41 | ```js 42 | export default { 43 | ui: { 44 | Button: { 45 | variants: { 46 | 'yellow-600': 'bg-yellow-600 hover:opacity-75 text-white border-yellow-600', 47 | 'red-50': 'bg-red-50 hover:opacity-75 text-red-600 border-red-50', 48 | }, 49 | size: (props) => { 50 | return ({ 51 | sm: 'px-3 py-1 text-sm leading-4', 52 | md: 'px-3 py-2 text-sm leading-4', 53 | lg: 'px-3 py-3 text-sm leading-4' 54 | })[props.size] 55 | } 56 | }, 57 | } 58 | } 59 | ``` 60 | -------------------------------------------------------------------------------- /exemple/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /exemple/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true 6 | }, 7 | parserOptions: { 8 | parser: 'babel-eslint' 9 | }, 10 | extends: [ 11 | '@nuxtjs', 12 | 'plugin:nuxt/recommended' 13 | ], 14 | plugins: [ 15 | ], 16 | // add your custom rules here 17 | rules: {} 18 | } 19 | -------------------------------------------------------------------------------- /exemple/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | -------------------------------------------------------------------------------- /exemple/README.md: -------------------------------------------------------------------------------- 1 | # dw-ui-exemple 2 | 3 | ## Build Setup 4 | 5 | ```bash 6 | # install dependencies 7 | $ yarn install 8 | 9 | # serve with hot reload at localhost:3000 10 | $ yarn dev 11 | 12 | # build for production and launch server 13 | $ yarn build 14 | $ yarn start 15 | 16 | # generate static project 17 | $ yarn generate 18 | ``` 19 | 20 | For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org). 21 | -------------------------------------------------------------------------------- /exemple/assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /exemple/components/Logo.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 30 | -------------------------------------------------------------------------------- /exemple/components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /exemple/dewib/config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | ui: { 3 | Input: { 4 | variants: { 5 | warning: 'border-red-400 disabled:bg-gray-100' 6 | } 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /exemple/layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /exemple/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 63 | -------------------------------------------------------------------------------- /exemple/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /exemple/nuxt.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | // Global page headers (https://go.nuxtjs.dev/config-head) 3 | head: { 4 | title: 'dw-ui-exemple', 5 | meta: [ 6 | { charset: 'utf-8' }, 7 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 8 | { hid: 'description', name: 'description', content: '' } 9 | ], 10 | link: [ 11 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } 12 | ] 13 | }, 14 | 15 | // Global CSS (https://go.nuxtjs.dev/config-css) 16 | css: [ 17 | ], 18 | 19 | // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins) 20 | plugins: [ 21 | ], 22 | 23 | // Auto import components (https://go.nuxtjs.dev/config-components) 24 | components: true, 25 | 26 | // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules) 27 | buildModules: [ 28 | // https://go.nuxtjs.dev/eslint 29 | '@nuxtjs/eslint-module', 30 | '@dewib/dw-ui', 31 | '@nuxtjs/tailwindcss' 32 | ], 33 | 34 | // Modules (https://go.nuxtjs.dev/config-modules) 35 | modules: [ 36 | ], 37 | 38 | // Build Configuration (https://go.nuxtjs.dev/config-build) 39 | build: { 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /exemple/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dw-ui-exemple", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "generate": "nuxt generate", 10 | "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .", 11 | "lint": "yarn lint:js" 12 | }, 13 | "dependencies": { 14 | "@dewib/dw-ui": "link:..", 15 | "@nuxtjs/tailwindcss": "^3.2.0", 16 | "core-js": "^3.6.5", 17 | "nuxt": "^2.14.6" 18 | }, 19 | "devDependencies": { 20 | "@nuxtjs/eslint-config": "^3.1.0", 21 | "@nuxtjs/eslint-module": "^2.0.0", 22 | "babel-eslint": "^10.1.0", 23 | "eslint": "^7.10.0", 24 | "eslint-plugin-nuxt": "^1.0.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /exemple/pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /exemple/pages/index.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 33 | -------------------------------------------------------------------------------- /exemple/plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /exemple/static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | Thus you'd want to delete this README.md before deploying to production. 8 | 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 10 | 11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 12 | -------------------------------------------------------------------------------- /exemple/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gaetansenn/dw-ui/8946e1c75e385dbfa5274ea15325c495405e6b36/exemple/static/favicon.ico -------------------------------------------------------------------------------- /exemple/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /exemple/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /* 2 | ** TailwindCSS Configuration File 3 | ** 4 | ** Docs: https://tailwindcss.com/docs/configuration 5 | ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js 6 | */ 7 | /* eslint-disable quote-props */ 8 | 9 | module.exports = { 10 | plugins: [ 11 | require('@tailwindcss/custom-forms') 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /lib/components/basic/Container.props.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /** 3 | * Attribute type 4 | */ 5 | attribute: { 6 | type: String, 7 | default: 'div' 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /lib/components/basic/Container.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /lib/components/commons.props.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /** 3 | * Selected variant 4 | */ 5 | variant: { 6 | type: String, 7 | default: 'default' 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /lib/components/config.mixin.js: -------------------------------------------------------------------------------- 1 | import defu from 'defu' 2 | import { set } from './utils/object' 3 | 4 | function loadStaticConfig (origin, target) { 5 | Object.keys(origin).forEach((key) => { 6 | if (typeof origin[key] === 'string') target[key] = origin[key] 7 | if (typeof origin[key] === 'object') target[key] = loadStaticConfig(origin[key], {}) 8 | if (typeof origin[key] === 'function') target[key] = '' 9 | if (typeof origin[key] === 'number') target[key] = origin[key] 10 | }) 11 | 12 | return target 13 | } 14 | 15 | function loadDynamicConfig (origin, target, path) { 16 | Object.keys(origin).forEach((key) => { 17 | if (typeof origin[key] === 'function') 18 | this.$watch(origin[key].bind(this), (newValue) => { 19 | set(this.config, `${path}${path !== '' ? '.' : ''}${key}`, newValue) 20 | }, { immediate: true }) 21 | 22 | if (typeof origin[key] === 'object') 23 | loadDynamicConfig.call(this, origin[key], target, `${path}${path !== '' ? '.' : ''}${key}`) 24 | }) 25 | } 26 | 27 | export default { 28 | props: { 29 | /** 30 | * Custom config 31 | * */ 32 | customConfig: { 33 | type: Object, 34 | default: undefined 35 | }, 36 | configPath: { 37 | type: String, 38 | default: null 39 | }, 40 | rootPath: { 41 | type: String, 42 | default: null 43 | } 44 | }, 45 | data () { 46 | const configPathProp = this.$vnode ? this.$vnode.componentOptions.propsData.configPath : false 47 | 48 | let path = configPathProp || this.$options.configPath || this.$vnode.componentOptions.Ctor.options.configPath 49 | 50 | if (this.rootPath) path = `${this.rootPath}.${path}` 51 | 52 | const config = defu({}, this.customConfig || {}, this.readPath(path)) 53 | 54 | return { 55 | path: config, 56 | config: loadStaticConfig(config, {}) 57 | } 58 | }, 59 | methods: { 60 | readPath (path) { 61 | return path.split('.').reduce((accu, value) => { 62 | return accu[value] 63 | }, this.$dewib.ui.config) 64 | } 65 | }, 66 | created () { 67 | loadDynamicConfig.call(this, this.path, {}, '') 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /lib/components/confirm.mixin.js: -------------------------------------------------------------------------------- 1 | export default { 2 | props: { 3 | /** 4 | * Compare with other InputPassword 5 | * Type: Reference of another InputPassword 6 | */ 7 | confirm: { 8 | type: Object, 9 | default: null 10 | } 11 | }, 12 | methods: { 13 | validateConfirm (label) { 14 | // Inject password confirm if present 15 | if (!this.confirm) return true 16 | 17 | if (this.confirm != null && this.confirm.value !== this.value) { 18 | this.localValidation = { 19 | type: 'error' 20 | } 21 | this.$nextTick(() => { 22 | this.confirm.setValidation({ 23 | type: 'error', 24 | // TODO: Handle i18n if provided 25 | description: this.translate(label) 26 | }) 27 | }) 28 | 29 | return false 30 | } else if (this.confirm && this.confirm.localValidation && this.confirm.localValidation.description === this.translate(label)) 31 | this.$nextTick(() => this.confirm.setValidation(undefined)) 32 | 33 | return true 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /lib/components/data/Tag.stories.js: -------------------------------------------------------------------------------- 1 | import config from '../../../lib/utils/config' 2 | import Tag from './Tag' 3 | 4 | const variants = Object.keys(config().Tag.variants) 5 | 6 | export default { 7 | component: Tag, 8 | title: 'Data / Tag', 9 | argTypes: { 10 | variant: { 11 | control: { 12 | type: 'select', 13 | options: variants 14 | } 15 | }, 16 | rounded: { 17 | control: { 18 | type: 'select', 19 | // TODO: Import it from global rounded prop 20 | options: ['xs', 'sm', 'md', 'lg', 'xl', 'full'] 21 | } 22 | }, 23 | size: { 24 | control: { 25 | type: 'select', 26 | // TODO: Import it from global size prop 27 | options: ['xs', 'sm', 'md', 'lg', 'xl'] 28 | } 29 | } 30 | } 31 | } 32 | 33 | const Template = (args, { argTypes }) => ({ 34 | props: Object.keys(argTypes), 35 | template: '#dewib' 36 | }) 37 | 38 | export const Default = Template.bind({}) 39 | 40 | Default.args = {} 41 | -------------------------------------------------------------------------------- /lib/components/data/Tag.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 23 | -------------------------------------------------------------------------------- /lib/components/directives/click-away.js: -------------------------------------------------------------------------------- 1 | let handleOutsideClick 2 | 3 | export default { 4 | bind (el, binding, vnode) { 5 | // Here's the click/touchstart handler 6 | // (it is registered below) 7 | handleOutsideClick = (e) => { 8 | e.stopPropagation() 9 | // Get the handler method name and the exclude array 10 | // from the object used in v-closable 11 | const { handler, exclude } = binding.value 12 | 13 | // This variable indicates if the clicked element is excluded 14 | let clickedOnExcludedEl = false 15 | exclude.forEach((refName) => { 16 | // We only run this code if we haven't detected 17 | // any excluded element yet 18 | if (!clickedOnExcludedEl) { 19 | // Get the element using the reference name 20 | const excludedEl = vnode.context.$refs[refName] 21 | // See if this excluded element 22 | // is the same element the user just clicked on 23 | clickedOnExcludedEl = excludedEl.contains(e.target) 24 | } 25 | }) 26 | 27 | // We check to see if the clicked element is not 28 | // the dialog element and not excluded 29 | if (!el.contains(e.target) && !clickedOnExcludedEl) 30 | // If the clicked element is outside the dialog 31 | // and not the button, then call the outside-click handler 32 | // from the same component this directive is used in 33 | vnode.context[handler]() 34 | } 35 | // Register click/touchstart event listeners on the whole page 36 | document.addEventListener('click', handleOutsideClick) 37 | document.addEventListener('touchstart', handleOutsideClick) 38 | }, 39 | 40 | unbind () { 41 | // If the element that has v-closable is removed, then 42 | // unbind click/touchstart listeners from the whole page 43 | document.removeEventListener('click', handleOutsideClick) 44 | document.removeEventListener('touchstart', handleOutsideClick) 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /lib/components/disabled.props.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /** 3 | * Disable the component 4 | */ 5 | disabled: { 6 | type: Boolean, 7 | default: false 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /lib/components/elements/Button.props.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /** 3 | * The default behavior of the button 4 | */ 5 | type: { 6 | type: String, 7 | default: 'button', 8 | validator (value) { 9 | return ['button', 'reset', 'submit'].includes(value) 10 | } 11 | }, 12 | /** 13 | * Display loading 14 | */ 15 | loading: { 16 | type: Boolean, 17 | default: false 18 | }, 19 | /** Display as block */ 20 | block: { 21 | type: Boolean, 22 | default: false 23 | }, 24 | 25 | /** Disabled button */ 26 | disabled: { 27 | type: Boolean, 28 | default: false 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /lib/components/elements/Button.stories.js: -------------------------------------------------------------------------------- 1 | import config from '../../../lib/utils/config' 2 | import Button from './Button' 3 | 4 | const variants = Object.keys(config().Button.variants) 5 | 6 | export default { 7 | component: Button, 8 | title: 'Elements / Button', 9 | argTypes: { 10 | type: { 11 | control: { 12 | type: 'select', 13 | // TODO: Import it from prop component 14 | options: ['button', 'reset', 'submit'] 15 | } 16 | }, 17 | variant: { 18 | control: { 19 | type: 'select', 20 | options: variants 21 | } 22 | }, 23 | size: { 24 | control: { 25 | type: 'select', 26 | // TODO: Import it from global size prop 27 | options: ['xs', 'sm', 'md', 'lg', 'xl'] 28 | } 29 | }, 30 | rounded: { 31 | control: { 32 | type: 'select', 33 | // TODO: Import it from global rounded prop 34 | options: ['xs', 'sm', 'md', 'lg', 'xl', 'full'] 35 | } 36 | } 37 | } 38 | } 39 | 40 | const Template = (args, { argTypes }) => ({ 41 | props: Object.keys(argTypes), 42 | template: 'My Button' 43 | }) 44 | 45 | const TemplateLoading = (args, { argTypes }) => ({ 46 | props: Object.keys(argTypes), 47 | template: '
Content to load
' 48 | }) 49 | 50 | export const Simple = Template.bind({}) 51 | export const Loading = TemplateLoading.bind({}) 52 | 53 | Simple.args = { 54 | variant: variants[0] 55 | } 56 | 57 | Loading.args = { 58 | ...Simple.args, 59 | loading: false 60 | } 61 | -------------------------------------------------------------------------------- /lib/components/elements/Button.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 63 | -------------------------------------------------------------------------------- /lib/components/form/DatePicker/DatePicker.props.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /* default selected value */ 3 | value: { 4 | type: [String, Date], 5 | default: undefined 6 | }, 7 | /** Used to display good period of time in the calendar */ 8 | initialDate: { 9 | type: [String, Date], 10 | default: null 11 | }, 12 | /** Current locale */ 13 | locale: { 14 | type: String, 15 | default: 'default' 16 | }, 17 | /** First day of the week displayed in the calendar */ 18 | weekStart: { 19 | type: Number, 20 | default: 0 21 | }, 22 | /** 23 | * Disabled dates 24 | * Accept array values as String, Date, Function 25 | * ['2012-12-23', new Date(), function (date) { date.getMonth() === 2 }] 26 | * */ 27 | disabledDates: { 28 | type: Array, 29 | default () { 30 | return [] 31 | } 32 | }, 33 | /** 34 | * Loader to refresh calendar 35 | * */ 36 | loading: { 37 | type: Boolean, 38 | default: false 39 | }, 40 | loadingLabel: { 41 | type: String, 42 | default: undefined 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /lib/components/form/DatePicker/DatePicker.stories.js: -------------------------------------------------------------------------------- 1 | import DatePicker from './DatePicker.vue' 2 | 3 | export default { 4 | component: DatePicker, 5 | title: 'Form elements / DatePicker', 6 | argTypes: { 7 | disabledDates: { 8 | control: { 9 | type: 'array' 10 | } 11 | } 12 | } 13 | } 14 | 15 | const Template = (args, { argTypes }) => ({ 16 | props: Object.keys(argTypes), 17 | template: '
{{ date }}
' 18 | }) 19 | 20 | export const Simple = Template.bind({}) 21 | export const Loading = Template.bind({}) 22 | 23 | Simple.args = { 24 | date: null, 25 | loading: false, 26 | disabledDates: ['2020-12-04'] 27 | } 28 | 29 | Loading.args = { 30 | ...Simple.args, 31 | loading: true 32 | } 33 | -------------------------------------------------------------------------------- /lib/components/form/Form.mixin.js: -------------------------------------------------------------------------------- 1 | // This mixin handle validation for children's 2 | export default { 3 | methods: { 4 | /** 5 | * Default reference is `this.form` 6 | */ 7 | validate (reference = 'form', scroll) { 8 | let validated = true 9 | 10 | if (!scroll) scroll = window 11 | 12 | /* eslint-disable-next-line */ 13 | if (!this[reference]) return console.warn(`Unable to find data from this.${reference}`) 14 | 15 | const iterate = Array.isArray(this[reference]) ? this[reference] : Object.keys(this[reference]) 16 | 17 | iterate.forEach((input) => { 18 | const component = (Array.isArray(this.$refs[input])) ? this.$refs[input][0] : this.$refs[input] 19 | 20 | if (component) { 21 | // Validate children 22 | const validation = component.validate() 23 | 24 | // Handle auto scroll to first component with failed validation 25 | // TODO: Fix scroll smooth after focus 26 | if (!validation && validated) component.$el ? component.$el.scrollTo(scroll) : component.scrollTo(scroll) 27 | 28 | if (!validation) validated = false 29 | } 30 | }) 31 | 32 | return validated 33 | }, 34 | 35 | getFields (reference = 'form') { 36 | /* eslint-disable-next-line */ 37 | if (!this[reference]) return console.warn(`Unable to find data from this.${reference}`) 38 | 39 | const result = {} 40 | 41 | this[reference].forEach((item) => { 42 | result[item.name] = item.value 43 | }) 44 | 45 | return result 46 | }, 47 | 48 | /** 49 | * Remove value key in form item 50 | */ 51 | resetValues (reference = 'form') { 52 | /* eslint-disable-next-line */ 53 | if (!this[reference]) return console.warn(`Unable to find data from this.${reference}`) 54 | 55 | this[reference].forEach(item => delete item.value) 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /lib/components/form/Form.props.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /** 3 | * Validation object to display 4 | * `{ type: 'error|warning|success', description: 'string' }` 5 | */ 6 | validation: { 7 | type: Object, 8 | default: null 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /lib/components/form/Form.stories.js: -------------------------------------------------------------------------------- 1 | import Form from './Form' 2 | 3 | export default { 4 | component: Form, 5 | title: 'Form / Form' 6 | } 7 | 8 | const Template = (args, { argTypes }) => ({ 9 | props: Object.keys(argTypes), 10 | template: ` 11 | 12 | Submit 13 | `, 14 | methods: { 15 | onSubmit () { 16 | this.$notification.success({ 17 | title: 'Form', 18 | description: 'Form is valid 🎉' 19 | }) 20 | } 21 | } 22 | }) 23 | 24 | const CustomFieldsTemplate = (args, { argTypes }) => ({ 25 | props: Object.keys(argTypes), 26 | template: ` 27 | 28 | Submit 29 | `, 30 | methods: { 31 | onSubmit () { 32 | this.$notification.success({ 33 | title: 'Form', 34 | description: 'Form is valid 🎉' 35 | }) 36 | } 37 | } 38 | }) 39 | 40 | export const Default = Template.bind({}) 41 | export const CustomFields = CustomFieldsTemplate.bind({}) 42 | 43 | Default.args = { 44 | form: { 45 | sameNameAsAttribute: '' 46 | } 47 | } 48 | 49 | CustomFields.args = { 50 | ...Default.args, 51 | fields: ['signupName'] 52 | } 53 | -------------------------------------------------------------------------------- /lib/components/form/Form.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 43 | -------------------------------------------------------------------------------- /lib/components/form/Input.mixin.js: -------------------------------------------------------------------------------- 1 | import isEmpty from '../utils/isEmpty' 2 | 3 | export const DEFAULT_VALIDATION = function (key = 'value') { 4 | // Reset validation 5 | this.localValidation = undefined 6 | 7 | // Case required but empty 8 | if (this.required && isEmpty(this[key])) { 9 | this.localValidation = { 10 | type: 'error', 11 | description: typeof this.required === 'string' ? this.required : this.translate('Input.required') 12 | } 13 | 14 | return false 15 | } 16 | 17 | return true 18 | } 19 | 20 | export const STOP_ON_EMPTY = function (key = 'value') { 21 | return !this.required && isEmpty(this[key]) 22 | } 23 | 24 | export default { 25 | data () { 26 | return { 27 | uuid: `${this.name}-${this._uid}` 28 | } 29 | }, 30 | methods: { 31 | setValidation (value) { 32 | this.localValidation = value 33 | }, 34 | validate () { 35 | return DEFAULT_VALIDATION.bind(this)() 36 | }, 37 | onFocus () { 38 | this.$children[0].localFocused = true 39 | 40 | this.$emit('focus') 41 | }, 42 | onBlur () { 43 | this.$children[0].localFocused = false 44 | 45 | this.$emit('blur') 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /lib/components/form/Input.props.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /** 3 | * Name of the form control 4 | */ 5 | name: { 6 | type: String, 7 | required: true 8 | }, 9 | /** 10 | * A value is required or must be check for the form to be submittable 11 | * If a string is provided the validation error will use it. 12 | */ 13 | required: { 14 | type: [Boolean, String], 15 | default: false 16 | }, 17 | /** 18 | * Short hint that describes the expected value of an input field 19 | */ 20 | placeholder: { 21 | type: [String, Boolean], 22 | default: null 23 | }, 24 | /** 25 | * Leading icon to display 26 | */ 27 | leading: { 28 | type: String, 29 | default: null 30 | }, 31 | /** 32 | * Trailing icon to display 33 | */ 34 | trailing: { 35 | type: String, 36 | default: null 37 | }, 38 | /** 39 | * Current checked value of element 40 | */ 41 | checked: { 42 | type: Boolean, 43 | default: null 44 | }, 45 | /** 46 | * When present, it specifies that an input field is read-only. 47 | */ 48 | readonly: { 49 | type: Boolean, 50 | default: false 51 | }, 52 | /** 53 | * Whether the form control is disabled 54 | */ 55 | disabled: { 56 | type: Boolean, 57 | default: false 58 | }, 59 | /** 60 | * Append help tooltip 61 | */ 62 | helpTooltip: { 63 | type: String, 64 | default: null 65 | }, 66 | autocomplete: { 67 | type: String, 68 | default: undefined 69 | }, 70 | /** 71 | * Limit maximum characters 72 | */ 73 | maxlength: { 74 | type: Number, 75 | default: undefined 76 | }, 77 | autofocus: { 78 | type: Boolean, 79 | default: false 80 | }, 81 | min: { 82 | type: [String, Number], 83 | default: undefined 84 | }, 85 | max: { 86 | type: [String, Number], 87 | default: undefined 88 | }, 89 | step: { 90 | type: Number, 91 | default: undefined 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /lib/components/form/Input.vue: -------------------------------------------------------------------------------- 1 | 179 | -------------------------------------------------------------------------------- /lib/components/form/InputCheckbox.props.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /** 3 | * Add label for checkbox 4 | */ 5 | label: { 6 | type: String, 7 | default: null 8 | }, 9 | /** 10 | * v-model binding of all selected elements 11 | */ 12 | value: { 13 | type: [String, Object, Number, Boolean], 14 | default: 'on' 15 | }, 16 | /** 17 | * v-model binding of checked checkbox 18 | */ 19 | selected: { 20 | type: [Boolean, String, Object, Number, Array], 21 | default: null 22 | }, 23 | /** 24 | * Boolean. A value is required or must be check for the form to be submittable 25 | */ 26 | required: { 27 | type: Boolean, 28 | default: false 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /lib/components/form/InputCheckbox.stories.js: -------------------------------------------------------------------------------- 1 | import InputCheckbox from './InputCheckbox' 2 | 3 | export default { 4 | component: InputCheckbox, 5 | title: 'Form elements / Input Checkbox', 6 | argTypes: { 7 | value: { 8 | control: { 9 | type: 'text' 10 | } 11 | }, 12 | size: { 13 | control: { 14 | type: 'select', 15 | options: ['xs', 'sm', 'md', 'lg', 'xl'] 16 | } 17 | } 18 | } 19 | } 20 | 21 | const Template = (args, { argTypes }) => ({ 22 | props: Object.keys(argTypes), 23 | template: '' 24 | }) 25 | 26 | const TemplateValidation = (args, { argTypes }) => ({ 27 | props: Object.keys(argTypes), 28 | template: '

Submit
' 29 | }) 30 | 31 | export const Simple = Template.bind({}) 32 | export const Disabled = Template.bind({}) 33 | export const WithValidation = TemplateValidation.bind({}) 34 | 35 | Simple.args = { 36 | value: '', 37 | required: false, 38 | disabled: false 39 | } 40 | 41 | Disabled.args = { 42 | ...Simple.args, 43 | disabled: true 44 | } 45 | 46 | WithValidation.args = { 47 | ...Simple.args, 48 | value: false 49 | } 50 | -------------------------------------------------------------------------------- /lib/components/form/InputCheckbox.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 82 | -------------------------------------------------------------------------------- /lib/components/form/InputDate.stories.js: -------------------------------------------------------------------------------- 1 | import config from '../../../lib/utils/config' 2 | import InputDate from './InputDate' 3 | 4 | const variants = Object.keys(config().Input.variants) 5 | 6 | export default { 7 | component: InputDate, 8 | title: 'Form elements / Input Date', 9 | argTypes: { 10 | value: { 11 | control: { 12 | type: 'text' 13 | } 14 | }, 15 | variant: { 16 | control: { 17 | type: 'select', 18 | options: variants 19 | } 20 | }, 21 | size: { 22 | control: { 23 | type: 'select', 24 | options: ['xs', 'sm', 'md', 'lg', 'xl'] 25 | } 26 | }, 27 | rounded: { 28 | control: { 29 | type: 'select', 30 | // TODO: Import it from global rounded prop 31 | options: ['xs', 'sm', 'md', 'lg', 'xl', 'full'] 32 | } 33 | } 34 | } 35 | } 36 | 37 | const Template = (args, { argTypes }) => ({ 38 | props: Object.keys(argTypes), 39 | template: '' 40 | }) 41 | 42 | const TemplateValidation = (args, { argTypes }) => ({ 43 | props: Object.keys(argTypes), 44 | template: '

Submit
' 45 | }) 46 | 47 | export const Simple = Template.bind({}) 48 | export const WithLabel = Template.bind({}) 49 | export const Required = Template.bind({}) 50 | export const WithHelp = Template.bind({}) 51 | export const WithTooltipHelp = Template.bind({}) 52 | export const WithValidation = TemplateValidation.bind({}) 53 | 54 | Simple.args = { 55 | variant: variants[0], 56 | placeholder: 'Type your date here', 57 | value: '', 58 | label: '', 59 | required: false, 60 | inline: false, 61 | help: '', 62 | validation: undefined, 63 | helpTooltip: undefined 64 | } 65 | 66 | WithLabel.args = { 67 | ...Simple.args, 68 | label: 'Input text' 69 | } 70 | 71 | Required.args = { 72 | ...WithLabel.args, 73 | required: true 74 | } 75 | 76 | WithHelp.args = { 77 | ...Simple.args, 78 | help: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec massa eros.' 79 | } 80 | 81 | WithTooltipHelp.args = { 82 | ...Simple.args, 83 | helpTooltip: 'Lorem ipsum dolor sit amet' 84 | } 85 | 86 | WithValidation.args = { 87 | ...Simple.args, 88 | required: true 89 | } 90 | -------------------------------------------------------------------------------- /lib/components/form/InputDate.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 101 | -------------------------------------------------------------------------------- /lib/components/form/InputDatePicker.stories.js: -------------------------------------------------------------------------------- 1 | import config from '../../../lib/utils/config' 2 | import InputDatePicker from './InputDatePicker' 3 | 4 | const variants = Object.keys(config().Input.variants) 5 | 6 | export default { 7 | component: InputDatePicker, 8 | title: 'Form elements / Input DatePicker', 9 | argTypes: { 10 | value: { 11 | control: { 12 | type: 'text' 13 | } 14 | }, 15 | variant: { 16 | control: { 17 | type: 'select', 18 | options: variants 19 | } 20 | }, 21 | size: { 22 | control: { 23 | type: 'select', 24 | options: ['xs', 'sm', 'md', 'lg', 'xl'] 25 | } 26 | }, 27 | rounded: { 28 | control: { 29 | type: 'select', 30 | // TODO: Import it from global rounded prop 31 | options: ['xs', 'sm', 'md', 'lg', 'xl', 'full'] 32 | } 33 | } 34 | } 35 | } 36 | 37 | const Template = (args, { argTypes }) => ({ 38 | props: Object.keys(argTypes), 39 | template: '' 40 | }) 41 | 42 | const TemplateValidation = (args, { argTypes }) => ({ 43 | props: Object.keys(argTypes), 44 | template: '

Submit
' 45 | }) 46 | 47 | export const Simple = Template.bind({}) 48 | export const WithLabel = Template.bind({}) 49 | export const Required = Template.bind({}) 50 | export const WithHelp = Template.bind({}) 51 | export const CustomFormat = Template.bind({}) 52 | export const InitialDate = Template.bind({}) 53 | export const WithValidation = TemplateValidation.bind({}) 54 | export const WithLoading = Template.bind({}) 55 | 56 | Simple.args = { 57 | initialDate: undefined, 58 | loading: false, 59 | variant: variants[0], 60 | placeholder: 'Select your date here', 61 | value: undefined, 62 | label: '', 63 | required: false, 64 | inline: false, 65 | help: '', 66 | validation: undefined, 67 | format: null 68 | } 69 | 70 | WithLabel.args = { 71 | ...Simple.args, 72 | label: 'Input date' 73 | } 74 | 75 | Required.args = { 76 | ...WithLabel.args, 77 | required: true 78 | } 79 | 80 | WithHelp.args = { 81 | ...Simple.args, 82 | help: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec massa eros.' 83 | } 84 | 85 | WithLoading.args = { 86 | ...Simple.args, 87 | loading: true 88 | } 89 | 90 | WithValidation.args = { 91 | ...Simple.args, 92 | required: true 93 | } 94 | CustomFormat.args = { 95 | ...Simple.args, 96 | format: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' } 97 | } 98 | 99 | InitialDate.args = { 100 | ...Simple.args, 101 | initialDate: new Date(2018, 8, 22) 102 | } 103 | -------------------------------------------------------------------------------- /lib/components/form/InputDatePicker.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 127 | -------------------------------------------------------------------------------- /lib/components/form/InputDateTime.stories.js: -------------------------------------------------------------------------------- 1 | import config from '../../utils/config' 2 | import InputDateTime from './InputDateTime' 3 | 4 | const variants = Object.keys(config().Input.variants) 5 | 6 | export default { 7 | component: InputDateTime, 8 | title: 'Form elements / Input Date Time', 9 | argTypes: { 10 | value: { 11 | control: { 12 | type: 'text' 13 | } 14 | }, 15 | variant: { 16 | control: { 17 | type: 'select', 18 | options: variants 19 | } 20 | }, 21 | size: { 22 | control: { 23 | type: 'select', 24 | options: ['xs', 'sm', 'md', 'lg', 'xl'] 25 | } 26 | }, 27 | rounded: { 28 | control: { 29 | type: 'select', 30 | // TODO: Import it from global rounded prop 31 | options: ['xs', 'sm', 'md', 'lg', 'xl', 'full'] 32 | } 33 | } 34 | } 35 | } 36 | 37 | const Template = (args, { argTypes }) => ({ 38 | props: Object.keys(argTypes), 39 | template: '' 40 | }) 41 | 42 | const TemplateValidation = (args, { argTypes }) => ({ 43 | props: Object.keys(argTypes), 44 | template: '

Submit
' 45 | }) 46 | 47 | export const Simple = Template.bind({}) 48 | export const WithLabel = Template.bind({}) 49 | export const Required = Template.bind({}) 50 | export const WithHelp = Template.bind({}) 51 | export const WithTooltipHelp = Template.bind({}) 52 | export const WithValidation = TemplateValidation.bind({}) 53 | 54 | Simple.args = { 55 | variant: variants[0], 56 | placeholder: 'Type your date time here', 57 | value: '', 58 | label: '', 59 | required: false, 60 | inline: false, 61 | help: '', 62 | validation: undefined, 63 | helpTooltip: undefined 64 | } 65 | 66 | WithLabel.args = { 67 | ...Simple.args, 68 | label: 'Input date time' 69 | } 70 | 71 | Required.args = { 72 | ...WithLabel.args, 73 | required: true 74 | } 75 | 76 | WithHelp.args = { 77 | ...Simple.args, 78 | help: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec massa eros.' 79 | } 80 | 81 | WithTooltipHelp.args = { 82 | ...Simple.args, 83 | helpTooltip: 'Lorem ipsum dolor sit amet' 84 | } 85 | 86 | WithValidation.args = { 87 | ...Simple.args, 88 | required: true 89 | } 90 | -------------------------------------------------------------------------------- /lib/components/form/InputDateTime.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 72 | -------------------------------------------------------------------------------- /lib/components/form/InputDatepicker.props.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /** 3 | * Format to display in input 4 | * https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date/toLocaleDateString 5 | */ 6 | format: { 7 | type: Object, 8 | default: null 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /lib/components/form/InputEmail.stories.js: -------------------------------------------------------------------------------- 1 | import config from '../../../lib/utils/config' 2 | import InputEmail from './InputEmail' 3 | 4 | const variants = Object.keys(config().Input.variants) 5 | 6 | export default { 7 | component: InputEmail, 8 | title: 'Form elements / Input Email', 9 | argTypes: { 10 | value: { 11 | control: { 12 | type: 'text' 13 | } 14 | }, 15 | variant: { 16 | control: { 17 | type: 'select', 18 | options: variants 19 | } 20 | }, 21 | size: { 22 | control: { 23 | type: 'select', 24 | options: ['xs', 'sm', 'md', 'lg', 'xl'] 25 | } 26 | }, 27 | rounded: { 28 | control: { 29 | type: 'select', 30 | // TODO: Import it from global rounded prop 31 | options: ['xs', 'sm', 'md', 'lg', 'xl', 'full'] 32 | } 33 | } 34 | } 35 | } 36 | 37 | const Template = (args, { argTypes }) => ({ 38 | props: Object.keys(argTypes), 39 | template: '' 40 | }) 41 | 42 | const TemplateValidation = (args, { argTypes }) => ({ 43 | props: Object.keys(argTypes), 44 | template: '

Submit
' 45 | }) 46 | 47 | const TemplateConfirm = (args, { argTypes }) => ({ 48 | props: Object.keys(argTypes), 49 | template: `
50 | 51 |
52 | Submit 53 |
` 54 | }) 55 | 56 | export const Simple = Template.bind({}) 57 | export const WithLabel = Template.bind({}) 58 | export const Required = Template.bind({}) 59 | export const WithHelp = Template.bind({}) 60 | export const WithTooltipHelp = Template.bind({}) 61 | export const WithValidation = TemplateValidation.bind({}) 62 | export const WithConfirm = TemplateConfirm.bind({}) 63 | 64 | Simple.args = { 65 | variant: variants[0], 66 | placeholder: 'Type your text here', 67 | value: '', 68 | label: '', 69 | required: false, 70 | inline: false, 71 | help: '', 72 | validation: undefined, 73 | helpTooltip: undefined 74 | } 75 | 76 | WithLabel.args = { 77 | ...Simple.args, 78 | label: 'Input text' 79 | } 80 | 81 | Required.args = { 82 | ...WithLabel.args, 83 | required: true 84 | } 85 | 86 | WithHelp.args = { 87 | ...Simple.args, 88 | help: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec massa eros.' 89 | } 90 | 91 | WithTooltipHelp.args = { 92 | ...Simple.args, 93 | helpTooltip: 'Lorem ipsum dolor sit amet' 94 | } 95 | 96 | WithValidation.args = { 97 | ...Simple.args 98 | } 99 | 100 | WithConfirm.args = { 101 | confirm: '', 102 | ...Simple.args 103 | } 104 | -------------------------------------------------------------------------------- /lib/components/form/InputEmail.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 104 | -------------------------------------------------------------------------------- /lib/components/form/InputGroup.props.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /** 3 | * Name of the form group 4 | */ 5 | name: { 6 | type: String, 7 | default: null 8 | }, 9 | /** 10 | * A value is required or must be check for the form to be submittable 11 | * If a string is provided the validation error will use it. 12 | */ 13 | required: { 14 | type: [Boolean, String], 15 | default: false 16 | }, 17 | inline: { 18 | type: Boolean, 19 | default: false 20 | }, 21 | inlineBlock: { 22 | type: Boolean, 23 | default: false 24 | }, 25 | label: { 26 | type: String, 27 | default: '' 28 | }, 29 | help: { 30 | type: String, 31 | default: null 32 | }, 33 | focused: { 34 | type: Boolean, 35 | default: false 36 | }, 37 | value: { 38 | type: [String, Number, Object, Boolean, Date, Array], 39 | default: undefined 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /lib/components/form/InputGroup.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 60 | -------------------------------------------------------------------------------- /lib/components/form/InputGroupCheckbox.props.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /** 3 | * v-model binding of all selected elements 4 | */ 5 | value: { 6 | type: [String, Object, Number, Boolean, Array], 7 | default: null 8 | }, 9 | /** 10 | * Commons name injected to checkbox 11 | */ 12 | name: { 13 | type: String, 14 | required: true 15 | }, 16 | /** 17 | * Label 18 | */ 19 | label: { 20 | type: String, 21 | default: null 22 | }, 23 | /** 24 | * Boolean. A value is required 25 | */ 26 | required: { 27 | type: Boolean, 28 | default: false 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /lib/components/form/InputGroupCheckbox.stories.js: -------------------------------------------------------------------------------- 1 | import InputGroupCheckbox from './InputGroupCheckbox' 2 | import InputCheckbox from './InputCheckbox' 3 | 4 | export default { 5 | component: InputGroupCheckbox, 6 | subcomponents: { InputCheckbox }, 7 | title: 'Form elements / Input Group Checkbox' 8 | } 9 | 10 | const Template = (args, { argTypes }) => ({ 11 | props: Object.keys(argTypes), 12 | template: '' 13 | }) 14 | 15 | const TemplateValidation = (args, { argTypes }) => ({ 16 | props: Object.keys(argTypes), 17 | template: '

Submit
' 18 | }) 19 | 20 | export const Simple = Template.bind({}) 21 | export const WithValidation = TemplateValidation.bind({}) 22 | 23 | Simple.args = { 24 | value: '', 25 | label: 'Label of checkbox', 26 | required: false 27 | } 28 | 29 | WithValidation.args = { 30 | ...Simple.args, 31 | value: false, 32 | required: true 33 | } 34 | -------------------------------------------------------------------------------- /lib/components/form/InputGroupCheckbox.vue: -------------------------------------------------------------------------------- 1 | 64 | -------------------------------------------------------------------------------- /lib/components/form/InputGroupRadio.props.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /** 3 | * v-model binding of all selected elements 4 | */ 5 | value: { 6 | type: [String, Object, Number, Boolean], 7 | default: null 8 | }, 9 | /** 10 | * Commons name injected to radio 11 | */ 12 | name: { 13 | type: String, 14 | required: true 15 | }, 16 | /** 17 | * Label 18 | */ 19 | label: { 20 | type: String, 21 | required: true 22 | }, 23 | /** 24 | * Boolean. A value is required 25 | */ 26 | required: { 27 | type: Boolean, 28 | default: false 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /lib/components/form/InputGroupRadio.stories.js: -------------------------------------------------------------------------------- 1 | import InputGroupRadio from './InputRadio' 2 | 3 | export default { 4 | component: InputGroupRadio, 5 | title: 'Form elements / Input Group Radio' 6 | } 7 | 8 | const Template = (args, { argTypes }) => ({ 9 | props: Object.keys(argTypes), 10 | template: '' 11 | }) 12 | 13 | const TemplateValidation = (args, { argTypes }) => ({ 14 | props: Object.keys(argTypes), 15 | template: '

Submit
' 16 | }) 17 | 18 | export const Simple = Template.bind({}) 19 | export const Disabled = Template.bind({}) 20 | export const WithValidation = TemplateValidation.bind({}) 21 | 22 | Simple.args = { 23 | value: '', 24 | label: 'Label of radio', 25 | required: false, 26 | disabled: false 27 | } 28 | 29 | Disabled.args = { 30 | ...Simple.args, 31 | disabled: true 32 | } 33 | 34 | WithValidation.args = { 35 | ...Simple.args, 36 | value: false, 37 | required: true 38 | } 39 | -------------------------------------------------------------------------------- /lib/components/form/InputGroupRadio.vue: -------------------------------------------------------------------------------- 1 | 55 | -------------------------------------------------------------------------------- /lib/components/form/InputNumber.props.js: -------------------------------------------------------------------------------- 1 | export default { 2 | min: { 3 | type: Number, 4 | default: undefined 5 | }, 6 | max: { 7 | type: Number, 8 | default: undefined 9 | }, 10 | step: { 11 | type: Number, 12 | default: undefined 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /lib/components/form/InputNumber.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 77 | -------------------------------------------------------------------------------- /lib/components/form/InputPassword.props.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /** Binded value */ 3 | value: { 4 | type: String, 5 | required: true 6 | }, 7 | /** Eye option to show password */ 8 | eye: { 9 | type: Boolean, 10 | default: false 11 | }, 12 | /** Enable or disable password regex validation */ 13 | validatePassword: { 14 | type: Boolean, 15 | default: true 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /lib/components/form/InputPassword.stories.js: -------------------------------------------------------------------------------- 1 | import config from '../../../lib/utils/config' 2 | import InputPassword from './InputPassword' 3 | 4 | const variants = Object.keys(config().Input.variants) 5 | 6 | export default { 7 | component: InputPassword, 8 | title: 'Form elements / Input Password', 9 | argTypes: { 10 | value: { 11 | control: { 12 | type: 'text' 13 | } 14 | }, 15 | variant: { 16 | control: { 17 | type: 'select', 18 | options: variants 19 | } 20 | }, 21 | size: { 22 | control: { 23 | type: 'select', 24 | options: ['xs', 'sm', 'md', 'lg', 'xl'] 25 | } 26 | }, 27 | rounded: { 28 | control: { 29 | type: 'select', 30 | // TODO: Import it from global rounded prop 31 | options: ['xs', 'sm', 'md', 'lg', 'xl', 'full'] 32 | } 33 | } 34 | } 35 | } 36 | 37 | const Template = (args, { argTypes }) => ({ 38 | props: Object.keys(argTypes), 39 | template: '
' 40 | }) 41 | 42 | const TemplateValidation = (args, { argTypes }) => ({ 43 | props: Object.keys(argTypes), 44 | template: '

Submit' 45 | }) 46 | 47 | const TemplateEye = (args, { argTypes }) => ({ 48 | props: Object.keys(argTypes), 49 | template: '
' 50 | }) 51 | 52 | const TemplateConfirm = (args, { argTypes }) => ({ 53 | props: Object.keys(argTypes), 54 | template: `
55 | 56 |
57 | Submit 58 | ` 59 | }) 60 | 61 | export const Simple = Template.bind({}) 62 | export const WithLabel = Template.bind({}) 63 | export const Required = Template.bind({}) 64 | export const WithHelp = Template.bind({}) 65 | export const WithTooltipHelp = Template.bind({}) 66 | export const WithValidation = TemplateValidation.bind({}) 67 | export const WithoutPasswordValidation = TemplateValidation.bind({}) 68 | export const WithEye = TemplateEye.bind({}) 69 | export const WithConfirm = TemplateConfirm.bind({}) 70 | 71 | Simple.args = { 72 | variant: variants[0], 73 | placeholder: 'Type your password here', 74 | value: '', 75 | label: '', 76 | required: false, 77 | inline: false, 78 | help: '', 79 | validation: undefined, 80 | helpTooltip: undefined, 81 | validatePassword: true 82 | } 83 | 84 | WithLabel.args = { 85 | ...Simple.args, 86 | label: 'Input text' 87 | } 88 | 89 | Required.args = { 90 | ...WithLabel.args, 91 | required: true 92 | } 93 | 94 | WithHelp.args = { 95 | ...Simple.args, 96 | help: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec massa eros.' 97 | } 98 | 99 | WithTooltipHelp.args = { 100 | ...Simple.args, 101 | helpTooltip: 'Lorem ipsum dolor sit amet' 102 | } 103 | 104 | WithValidation.args = { 105 | ...Simple.args 106 | } 107 | 108 | WithoutPasswordValidation.args = { 109 | ...Simple.args, 110 | validatePassword: false 111 | } 112 | 113 | WithEye.args = { 114 | ...Simple.args 115 | } 116 | 117 | WithConfirm.args = { 118 | confirm: '', 119 | ...Simple.args 120 | } 121 | -------------------------------------------------------------------------------- /lib/components/form/InputPassword.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 134 | -------------------------------------------------------------------------------- /lib/components/form/InputRadio.props.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /** 3 | * Add label for radio 4 | */ 5 | label: { 6 | type: String, 7 | default: null 8 | }, 9 | /** 10 | * v-model binding of all selected elements 11 | */ 12 | value: { 13 | type: [String, Object, Number, Boolean], 14 | default: 'on' 15 | }, 16 | /** 17 | * v-model binding of all selected elements 18 | */ 19 | selected: { 20 | type: [String, Object, Number, Boolean], 21 | default: 'on' 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /lib/components/form/InputRadio.stories.js: -------------------------------------------------------------------------------- 1 | import InputRadio from './InputRadio' 2 | 3 | export default { 4 | component: InputRadio, 5 | title: 'Form elements / Input Radio', 6 | argTypes: { 7 | value: { 8 | control: { 9 | type: 'text' 10 | } 11 | }, 12 | size: { 13 | control: { 14 | type: 'select', 15 | options: ['xs', 'sm', 'md', 'lg', 'xl'] 16 | } 17 | } 18 | } 19 | } 20 | 21 | const Template = (args, { argTypes }) => ({ 22 | props: Object.keys(argTypes), 23 | template: '' 24 | }) 25 | 26 | const TemplateValidation = (args, { argTypes }) => ({ 27 | props: Object.keys(argTypes), 28 | template: '

Submit
' 29 | }) 30 | 31 | export const Simple = Template.bind({}) 32 | export const Disabled = Template.bind({}) 33 | export const WithValidation = TemplateValidation.bind({}) 34 | 35 | Simple.args = { 36 | value: '', 37 | required: false, 38 | disabled: false 39 | } 40 | 41 | Disabled.args = { 42 | ...Simple.args, 43 | disabled: true 44 | } 45 | 46 | WithValidation.args = { 47 | ...Simple.args 48 | } 49 | -------------------------------------------------------------------------------- /lib/components/form/InputRadio.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 77 | -------------------------------------------------------------------------------- /lib/components/form/InputText.stories.js: -------------------------------------------------------------------------------- 1 | import config from '../../../lib/utils/config' 2 | import InputText from './InputText' 3 | 4 | const variants = Object.keys(config().Input.variants) 5 | 6 | export default { 7 | component: InputText, 8 | title: 'Form elements / Input Text', 9 | argTypes: { 10 | value: { 11 | control: { 12 | type: 'text' 13 | } 14 | }, 15 | variant: { 16 | control: { 17 | type: 'select', 18 | options: variants 19 | } 20 | }, 21 | size: { 22 | control: { 23 | type: 'select', 24 | options: ['xs', 'sm', 'md', 'lg', 'xl'] 25 | } 26 | }, 27 | rounded: { 28 | control: { 29 | type: 'select', 30 | // TODO: Import it from global rounded prop 31 | options: ['xs', 'sm', 'md', 'lg', 'xl', 'full'] 32 | } 33 | } 34 | } 35 | } 36 | 37 | const Template = (args, { argTypes }) => ({ 38 | props: Object.keys(argTypes), 39 | template: '' 40 | }) 41 | 42 | const TemplateIcons = (args, { argTypes }) => ({ 43 | props: Object.keys(argTypes), 44 | template: '' 45 | }) 46 | 47 | export const Simple = Template.bind({}) 48 | export const WithLabel = Template.bind({}) 49 | export const Required = Template.bind({}) 50 | export const WithHelp = Template.bind({}) 51 | export const WithTooltipHelp = Template.bind({}) 52 | export const WithError = Template.bind({}) 53 | export const Disabled = Template.bind({}) 54 | export const LeftIcon = TemplateIcons.bind({}) 55 | export const RightIcon = TemplateIcons.bind({}) 56 | export const BothSideIcon = TemplateIcons.bind({}) 57 | 58 | Simple.args = { 59 | variant: variants[0], 60 | placeholder: 'Type your text here', 61 | value: '', 62 | label: '', 63 | required: false, 64 | inline: false, 65 | help: '', 66 | validation: undefined, 67 | disabled: false, 68 | helpTooltip: undefined 69 | } 70 | 71 | WithLabel.args = { 72 | ...Simple.args, 73 | label: 'Input text' 74 | } 75 | 76 | Required.args = { 77 | ...WithLabel.args, 78 | required: true 79 | } 80 | 81 | Disabled.args = { 82 | ...WithLabel.args, 83 | disabled: true 84 | } 85 | 86 | WithHelp.args = { 87 | ...Simple.args, 88 | help: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec massa eros.' 89 | } 90 | 91 | WithTooltipHelp.args = { 92 | ...Simple.args, 93 | helpTooltip: 'Lorem ipsum dolor sit amet' 94 | } 95 | 96 | WithError.args = { 97 | ...Simple.args, 98 | validation: { 99 | type: 'error', 100 | description: 'Lorem ipsum dolor sit amet' 101 | } 102 | } 103 | 104 | LeftIcon.args = { 105 | ...Simple.args, 106 | leading: '', 107 | trailing: null 108 | } 109 | 110 | RightIcon.args = { 111 | ...Simple.args, 112 | leading: null, 113 | trailing: '' 114 | } 115 | 116 | BothSideIcon.args = { 117 | ...Simple.args, 118 | leading: '', 119 | trailing: '' 120 | } 121 | -------------------------------------------------------------------------------- /lib/components/form/InputText.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 73 | -------------------------------------------------------------------------------- /lib/components/form/InputTime.stories.js: -------------------------------------------------------------------------------- 1 | import config from '../../utils/config' 2 | import InputTime from './InputTime' 3 | 4 | const variants = Object.keys(config().Input.variants) 5 | 6 | export default { 7 | component: InputTime, 8 | title: 'Form elements / Input Time', 9 | argTypes: { 10 | value: { 11 | control: { 12 | type: 'text' 13 | } 14 | }, 15 | variant: { 16 | control: { 17 | type: 'select', 18 | options: variants 19 | } 20 | }, 21 | size: { 22 | control: { 23 | type: 'select', 24 | options: ['xs', 'sm', 'md', 'lg', 'xl'] 25 | } 26 | }, 27 | rounded: { 28 | control: { 29 | type: 'select', 30 | // TODO: Import it from global rounded prop 31 | options: ['xs', 'sm', 'md', 'lg', 'xl', 'full'] 32 | } 33 | } 34 | } 35 | } 36 | 37 | const Template = (args, { argTypes }) => ({ 38 | props: Object.keys(argTypes), 39 | template: '' 40 | }) 41 | 42 | const TemplateValidation = (args, { argTypes }) => ({ 43 | props: Object.keys(argTypes), 44 | template: '

Submit
' 45 | }) 46 | 47 | export const Simple = Template.bind({}) 48 | export const WithLabel = Template.bind({}) 49 | export const Required = Template.bind({}) 50 | export const WithHelp = Template.bind({}) 51 | export const WithTooltipHelp = Template.bind({}) 52 | export const WithValidation = TemplateValidation.bind({}) 53 | 54 | Simple.args = { 55 | variant: variants[0], 56 | placeholder: 'Type your time here', 57 | value: '', 58 | label: '', 59 | required: false, 60 | inline: false, 61 | help: '', 62 | validation: undefined, 63 | helpTooltip: undefined 64 | } 65 | 66 | WithLabel.args = { 67 | ...Simple.args, 68 | label: 'Input time' 69 | } 70 | 71 | Required.args = { 72 | ...WithLabel.args, 73 | required: true 74 | } 75 | 76 | WithHelp.args = { 77 | ...Simple.args, 78 | help: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec massa eros.' 79 | } 80 | 81 | WithTooltipHelp.args = { 82 | ...Simple.args, 83 | helpTooltip: 'Lorem ipsum dolor sit amet' 84 | } 85 | 86 | WithValidation.args = { 87 | ...Simple.args, 88 | required: true 89 | } 90 | -------------------------------------------------------------------------------- /lib/components/form/InputTime.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 72 | -------------------------------------------------------------------------------- /lib/components/form/ItemQuantity.props.js: -------------------------------------------------------------------------------- 1 | export default { 2 | value: { 3 | type: [Number, String], 4 | required: true 5 | }, 6 | /** The min quantity */ 7 | min: { 8 | type: Number, 9 | default: 0 10 | }, 11 | /** The max quantity */ 12 | max: { 13 | type: Number, 14 | default: null 15 | }, 16 | /** The add function */ 17 | add: { 18 | type: Function, 19 | default: null 20 | }, 21 | /** The remove function */ 22 | remove: { 23 | type: Function, 24 | default: null 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /lib/components/form/ItemQuantity.stories.js: -------------------------------------------------------------------------------- 1 | import ItemQuantity from './ItemQuantity' 2 | 3 | export default { 4 | component: ItemQuantity, 5 | title: 'Form elements / Item quantity' 6 | } 7 | 8 | const Template = (args, { argTypes }) => ({ 9 | props: Object.keys(argTypes), 10 | template: '' 11 | }) 12 | 13 | export const Default = Template.bind({}) 14 | export const WithLabel = Template.bind({}) 15 | 16 | Default.args = { 17 | value: 0, 18 | label: '' 19 | } 20 | 21 | WithLabel.args = { 22 | value: 0, 23 | label: 'Select your quantity' 24 | } 25 | -------------------------------------------------------------------------------- /lib/components/form/ItemQuantity.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 54 | -------------------------------------------------------------------------------- /lib/components/form/RichSelect.props.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /** 3 | * Display loading state 4 | */ 5 | loading: { 6 | type: Boolean, 7 | default: false 8 | }, 9 | /** 10 | * Label text to display 11 | */ 12 | loadingLabel: { 13 | type: String, 14 | default: null 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /lib/components/form/RichSelect.stories.js: -------------------------------------------------------------------------------- 1 | import config from '../../../lib/utils/config' 2 | import Select from './Select' 3 | 4 | const variants = Object.keys(config().Select.variants) 5 | 6 | const stringOptions = ['Option 1', 'Option 2', 'Option 3'] 7 | const objectOptions = [{ id: 'option-1', label: stringOptions[0], customLabel: 'Custom Option 1' }, { id: 'option-2', label: stringOptions[1], customLabel: 'Custom Option 2', disabled: true }, { id: 'option-3', label: stringOptions[2], customLabel: 'Custom Option 3' }] 8 | 9 | export default { 10 | component: Select, 11 | title: 'Form components / Rich Select', 12 | argTypes: { 13 | value: { 14 | control: { 15 | type: 'text' 16 | } 17 | }, 18 | variant: { 19 | control: { 20 | type: 'select', 21 | options: variants 22 | } 23 | }, 24 | size: { 25 | control: { 26 | type: 'select', 27 | options: ['xs', 'sm', 'md', 'lg', 'xl'] 28 | } 29 | }, 30 | options: { 31 | control: { 32 | type: 'select', 33 | options: ['Option 1', 'Option 2', 'Option 3'] 34 | } 35 | } 36 | } 37 | } 38 | 39 | const Template = (args, { argTypes }) => ({ 40 | props: Object.keys(argTypes), 41 | template: '
Select {{ value }}
' 42 | }) 43 | 44 | export const Simple = Template.bind({}) 45 | export const ObjectOptions = Template.bind({}) 46 | export const ObjectOptionsWithValueKey = Template.bind({}) 47 | export const ObjectOptionsWithLabelKey = Template.bind({}) 48 | 49 | Simple.args = { 50 | variant: variants[0], 51 | value: stringOptions[0], 52 | label: '', 53 | required: false, 54 | inline: false, 55 | help: '', 56 | validation: undefined, 57 | options: stringOptions, 58 | valueKey: undefined, 59 | labelKey: undefined, 60 | placeholder: '' 61 | } 62 | 63 | ObjectOptions.args = { 64 | ...Simple.args, 65 | value: objectOptions[0], 66 | options: objectOptions, 67 | valueKey: undefined 68 | } 69 | 70 | ObjectOptionsWithValueKey.args = { 71 | ...Simple.args, 72 | value: objectOptions[0], 73 | options: objectOptions, 74 | valueKey: 'id' 75 | } 76 | 77 | ObjectOptionsWithLabelKey.args = { 78 | ...Simple.args, 79 | value: objectOptions[0], 80 | options: objectOptions, 81 | labelKey: 'customLabel' 82 | } 83 | -------------------------------------------------------------------------------- /lib/components/form/Select.props.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /** 3 | * v-model default value 4 | */ 5 | value: { 6 | type: [Object, String, Number] 7 | }, 8 | /** 9 | * Options (items to iterate throw) 10 | * { id: identifier, label: value to display } or String 11 | */ 12 | options: { 13 | type: Array, 14 | required: true, 15 | default: () => [], 16 | validator (value) { 17 | if (!value.length) return true 18 | return typeof value[0] === 'object' || typeof value[0] === 'string' || typeof value[0] === 'number' // Check that we have an array of object or string 19 | } 20 | }, 21 | /** 22 | * Set identifier for value item selected 23 | * Use if options is an array of object 24 | */ 25 | valueKey: { 26 | type: String, 27 | default: undefined 28 | }, 29 | /** 30 | * Set key used to display value 31 | * Use if options is an array of object 32 | */ 33 | labelKey: { 34 | type: String, 35 | default: 'label' 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /lib/components/form/Select.stories.js: -------------------------------------------------------------------------------- 1 | import config from '../../../lib/utils/config' 2 | import Select from './Select' 3 | 4 | const variants = Object.keys(config().Select.variants) 5 | 6 | const stringOptions = ['Option 1', 'Option 2', 'Option 3'] 7 | const objectOptions = [{ id: 'option-1', label: stringOptions[0] }, { id: 'option-2', label: stringOptions[1], disabled: true }, { id: 'option-3', label: stringOptions[2] }] 8 | 9 | export default { 10 | component: Select, 11 | title: 'Form elements / Select', 12 | argTypes: { 13 | value: { 14 | control: { 15 | type: 'text' 16 | } 17 | }, 18 | variant: { 19 | control: { 20 | type: 'select', 21 | options: variants 22 | } 23 | }, 24 | size: { 25 | control: { 26 | type: 'select', 27 | options: ['xs', 'sm', 'md', 'lg', 'xl'] 28 | } 29 | }, 30 | rounded: { 31 | control: { 32 | type: 'select', 33 | // TODO: Import it from global rounded prop 34 | options: ['xs', 'sm', 'md', 'lg', 'xl', 'full'] 35 | } 36 | } 37 | } 38 | } 39 | 40 | const Template = (args, { argTypes }) => ({ 41 | props: Object.keys(argTypes), 42 | template: '
Selected : {{ value }}
' 43 | }) 44 | 45 | const ArrowSlot = (args, { argTypes }) => ({ 46 | props: Object.keys(argTypes), 47 | template: '' 48 | }) 49 | 50 | export const Simple = Template.bind({}) 51 | export const Disabled = Template.bind({}) 52 | export const ObjectOptions = Template.bind({}) 53 | export const WithPlaceholder = Template.bind({}) 54 | export const WithLabel = Template.bind({}) 55 | export const Required = Template.bind({}) 56 | export const WithHelp = Template.bind({}) 57 | export const WithError = Template.bind({}) 58 | export const WithArrowSlot = ArrowSlot.bind({}) 59 | 60 | Simple.args = { 61 | variant: variants[0], 62 | value: '', 63 | label: '', 64 | required: false, 65 | inline: false, 66 | help: '', 67 | validation: undefined, 68 | valueKey: undefined, 69 | options: stringOptions, 70 | placeholder: '', 71 | disabled: false 72 | } 73 | 74 | Disabled.args = { 75 | ...Simple.args, 76 | disabled: true 77 | } 78 | 79 | ObjectOptions.args = { 80 | ...Simple.args, 81 | options: objectOptions, 82 | valueKey: 'id' 83 | } 84 | 85 | WithArrowSlot.args = { 86 | ...Simple.args 87 | } 88 | 89 | WithPlaceholder.args = { 90 | ...Simple.args, 91 | placeholder: 'Custom placeholder' 92 | } 93 | 94 | WithLabel.args = { 95 | ...Simple.args, 96 | label: 'Input text' 97 | } 98 | 99 | Required.args = { 100 | ...WithLabel.args, 101 | required: true 102 | } 103 | 104 | WithHelp.args = { 105 | ...Simple.args, 106 | help: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec massa eros.' 107 | } 108 | 109 | WithError.args = { 110 | ...Simple.args, 111 | validation: { 112 | type: 'error', 113 | description: 'Lorem ipsum dolor sit amet' 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /lib/components/form/Select.vue: -------------------------------------------------------------------------------- 1 | 155 | -------------------------------------------------------------------------------- /lib/components/form/TextArea.props.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /** 3 | * Limit maximum characters 4 | */ 5 | maxlength: { 6 | type: Number, 7 | default: undefined 8 | }, 9 | /** 10 | * Display remaining characters 11 | */ 12 | remaining: { 13 | type: Boolean, 14 | default: false 15 | }, 16 | /** 17 | * Specifies the visible number of lines in a text area 18 | */ 19 | rows: { 20 | type: Number, 21 | default: undefined 22 | }, 23 | /** 24 | * Specifies the visible width of a text area 25 | */ 26 | cols: { 27 | type: Number, 28 | default: undefined 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /lib/components/form/TextArea.stories.js: -------------------------------------------------------------------------------- 1 | import TextArea from './TextArea' 2 | 3 | export default { 4 | component: TextArea, 5 | title: 'Form elements / TextArea', 6 | argTypes: { 7 | value: { 8 | control: { 9 | type: 'text' 10 | } 11 | }, 12 | size: { 13 | control: { 14 | type: 'select', 15 | options: ['xs', 'sm', 'md', 'lg', 'xl'] 16 | } 17 | }, 18 | rounded: { 19 | control: { 20 | type: 'select', 21 | // TODO: Import it from global rounded prop 22 | options: ['xs', 'sm', 'md', 'lg', 'xl', 'full'] 23 | } 24 | } 25 | } 26 | } 27 | 28 | const Template = (args, { argTypes }) => ({ 29 | props: Object.keys(argTypes), 30 | template: '' 31 | }) 32 | 33 | const TemplateValidation = (args, { argTypes }) => ({ 34 | props: Object.keys(argTypes), 35 | template: ` 36 | 37 | Submit 38 | `, 39 | methods: { 40 | onSubmit () { 41 | this.$notification.success({ 42 | title: 'Form', 43 | description: 'Form is valid 🎉' 44 | }) 45 | } 46 | } 47 | }) 48 | 49 | export const Simple = Template.bind({}) 50 | export const Remaining = Template.bind({}) 51 | export const WithLabel = Template.bind({}) 52 | export const Required = Template.bind({}) 53 | export const WithHelp = Template.bind({}) 54 | export const WithError = Template.bind({}) 55 | export const WithValidation = TemplateValidation.bind({}) 56 | export const Disabled = Template.bind({}) 57 | 58 | Simple.args = { 59 | placeholder: 'Type your text here', 60 | value: '', 61 | label: '', 62 | required: false, 63 | inline: false, 64 | help: '', 65 | validation: undefined, 66 | disabled: false, 67 | maxlength: undefined 68 | } 69 | 70 | Remaining.args = { 71 | ...Simple.args, 72 | maxlength: 100 73 | } 74 | 75 | WithLabel.args = { 76 | ...Simple.args, 77 | label: 'Textarea' 78 | } 79 | 80 | Required.args = { 81 | ...WithLabel.args, 82 | required: true 83 | } 84 | 85 | Disabled.args = { 86 | ...WithLabel.args, 87 | disabled: true 88 | } 89 | 90 | WithHelp.args = { 91 | ...Simple.args, 92 | help: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec massa eros.' 93 | } 94 | 95 | WithError.args = { 96 | ...Simple.args, 97 | validation: { 98 | type: 'error', 99 | description: 'Lorem ipsum dolor sit amet' 100 | } 101 | } 102 | 103 | WithValidation.args = { 104 | ...Simple.args, 105 | label: 'Textarea validation', 106 | required: true, 107 | form: { 108 | value: undefined 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /lib/components/form/TextArea.vue: -------------------------------------------------------------------------------- 1 |