diff --git a/CHANGELOG.md b/CHANGELOG.md index e38ae527..964362bb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,10 +5,11 @@ If you import Keen UI components from the source folder (e.g. `import UiButton from 'keen-ui/src/UiButton.vue`), this release might break your project due to the switch from `node-sass` to `sass`. There are a few options to fix this: 1. If you don't need [Sass customisation](./Customization.md#sass-customization), import from the compiled components instead of the source components. The compiled components come with plain CSS instead of Sass. Here's an example of changing from a source component import to a compiled component import: - ```diff + + ```diff -import UiButton from 'keen-ui/src/UiButton.vue' +import { UiButton } from 'keen-ui' - ``` + ``` 2. Upgrade to `sass` in your project, and replace all usage of `/` for division in your Sass files with the new [`math.div()` function](https://sass-lang.com/documentation/breaking-changes/slash-div). @@ -174,11 +175,11 @@ There are breaking changes in this release. Read through and update your usage w - Make focus ring transition to fill the button. Previously, it stopped halfway. Fixes [#205](https://github.com/JosephusPaye/Keen-UI/issues/205). - Remove UiProgressCircular from the DOM when `loading` is false. Previously, it was hidden with `display: none`. - Remove pointer cursor, to match default HTML buttons. If you want the hand pointer on buttons by default, add: - ```css - .ui-button { - cursor: pointer; - } - ``` + ```css + .ui-button { + cursor: pointer; + } + ``` - For secondary buttons, use button color as background for hover and focus. - Add new prop `href`. Setting this prop will render an anchor tag. @@ -234,17 +235,17 @@ There are breaking changes in this release. Read through and update your usage w ### UiPopover - **Breaking**: Switch positioning library to Tippy.js, which uses Popper.js. -- **Breaking**: `trigger` prop is now a DOM Element, VueComponent instance, or selector string. If no trigger is provided or the selector doesn't match any element, the popover's immediate parent element is used as the trigger. - ```html - - - My Popover - - - - ``` +- **Breaking**: `trigger` prop is now a DOM Element, VueComponent instance, or selector string. If no trigger is provided or the selector doesn't match any element, the popover's immediate parent element is used as the trigger. + + ```html + + + My Popover + + + + ``` + - **Breaking**: Rename `dropdownPosition` prop to `position`, to match UiTooltip. Accepted values have changed to match Tippy.js. See docs for new values. - Remove prop `removeOnClose`, no longer needed. All popovers are now removed from the DOM on close. - Add new prop `animation` to choose animation style. @@ -284,17 +285,18 @@ There are breaking changes in this release. Read through and update your usage w ### UiTabs and UiTab - UiTabs - - **Breaking**: argument passed to `tab-change` event handler is now the tab instance, not the id. To get the id, use `tab.id`. - - **Breaking**: Remove `refreshIndicator` method, no longer needed. - - Change active tab indicator animation, to fix issues related to window resizing and initially hidden tabs. Fixes [#328](https://github.com/JosephusPaye/Keen-UI/issues/328). - - Add new event `tab-click`, emitted when a tab is clicked, whether or not the tab is selected. - - Add new prop `confirmTabChange`, A function that will be called for confirmation when the user attempts to change tabs. + + - **Breaking**: argument passed to `tab-change` event handler is now the tab instance, not the id. To get the id, use `tab.id`. + - **Breaking**: Remove `refreshIndicator` method, no longer needed. + - Change active tab indicator animation, to fix issues related to window resizing and initially hidden tabs. Fixes [#328](https://github.com/JosephusPaye/Keen-UI/issues/328). + - Add new event `tab-click`, emitted when a tab is clicked, whether or not the tab is selected. + - Add new prop `confirmTabChange`, A function that will be called for confirmation when the user attempts to change tabs. - UiTab - - **Breaking**: Remove `show` prop, use `v-for` with a filtered array of tabs instead. - - **Breaking**: Remove `icon` (string) and `iconProps` (object) props, use the `header` slot instead. - - Tabs can now be created using `v-for`. Fixes [#349](https://github.com/JosephusPaye/Keen-UI/issues/349). - - HTML can now be used in tab headers, using the `header` slot. + - **Breaking**: Remove `show` prop, use `v-for` with a filtered array of tabs instead. + - **Breaking**: Remove `icon` (string) and `iconProps` (object) props, use the `header` slot instead. + - Tabs can now be created using `v-for`. Fixes [#349](https://github.com/JosephusPaye/Keen-UI/issues/349). + - HTML can now be used in tab headers, using the `header` slot. ### UiTextbox @@ -303,33 +305,33 @@ There are breaking changes in this release. Read through and update your usage w ### UiTooltip - **Breaking**: Switch positioning library to Tippy.js, which uses Popper.js. -- **Breaking**: `trigger` prop is now a DOM Element, VueComponent instance, or selector string. If no trigger is provided or the selector doesn't match any element, the tooltip's immediate parent element is used as the trigger. - ```html - - - My Tooltip - - - - ``` +- **Breaking**: `trigger` prop is now a DOM Element, VueComponent instance, or selector string. If no trigger is provided or the selector doesn't match any element, the tooltip's immediate parent element is used as the trigger. + + ```html + + + My Tooltip + + + + ``` + - **Breaking**: `position` prop accepted values have changed to match Tippy.js. See docs for new values. - Add new prop `animation` to choose animation style. - Add new prop `appendToBody`, to choose between appending tooltip to `document.body` or the local parent element. ## v1.0.1 -* Upgrade Vue to `v2.4.2` and fix template warnings. See [#268](https://github.com/JosephusPaye/Keen-UI/issues/268). -* Add `aria-describedby` attribute to UiTooltip. -* Fix bug where help and error content provided via slot isn't shown unless the `help` or `error` props are set. Affects UiAutocomplete, UiCheckboxGroup, UiDatepicker, UiRadioGroup, UiSelect, and UiTextbox. See [#204](https://github.com/JosephusPaye/Keen-UI/issues/301). -* Allow `null` for UiAutocomplete and UiTextbox `value` prop. See [#253](https://github.com/JosephusPaye/Keen-UI/issues/253). -* Allow UiTooltip `trigger` prop to be a VueComponent instance. See [#204](https://github.com/JosephusPaye/Keen-UI/issues/204). -* Add `checked` attribute to the `input` element for UiRadio. See [#207](https://github.com/JosephusPaye/Keen-UI/issues/207). -* Fix error being thrown when using UiRippleInk with SVG elements on touch devices. See [#236](https://github.com/JosephusPaye/Keen-UI/issues/236). -* Fix minor errors and dead links in the docs. -* Remove Material Icons webfont and use inline SVG icons in the docs. -* Update [contributing guidelines](https://github.com/JosephusPaye/Keen-UI/blob/v1.0.1/CONTRIBUTING.md) with information about linting, BEM and using the `next` branch. +- Upgrade Vue to `v2.4.2` and fix template warnings. See [#268](https://github.com/JosephusPaye/Keen-UI/issues/268). +- Add `aria-describedby` attribute to UiTooltip. +- Fix bug where help and error content provided via slot isn't shown unless the `help` or `error` props are set. Affects UiAutocomplete, UiCheckboxGroup, UiDatepicker, UiRadioGroup, UiSelect, and UiTextbox. See [#204](https://github.com/JosephusPaye/Keen-UI/issues/301). +- Allow `null` for UiAutocomplete and UiTextbox `value` prop. See [#253](https://github.com/JosephusPaye/Keen-UI/issues/253). +- Allow UiTooltip `trigger` prop to be a VueComponent instance. See [#204](https://github.com/JosephusPaye/Keen-UI/issues/204). +- Add `checked` attribute to the `input` element for UiRadio. See [#207](https://github.com/JosephusPaye/Keen-UI/issues/207). +- Fix error being thrown when using UiRippleInk with SVG elements on touch devices. See [#236](https://github.com/JosephusPaye/Keen-UI/issues/236). +- Fix minor errors and dead links in the docs. +- Remove Material Icons webfont and use inline SVG icons in the docs. +- Update [contributing guidelines](https://github.com/JosephusPaye/Keen-UI/blob/v1.0.1/CONTRIBUTING.md) with information about linting, BEM and using the `next` branch. ## v1.0.0 @@ -339,12 +341,12 @@ Please consult the [docs](https://josephuspaye.github.io/Keen-UI/1.0.0/) for com ### Highlights -* New components: [UiCheckboxGroup](https://josephuspaye.github.io/Keen-UI/1.0.0/#/ui-checkbox-group), [UiDatepicker](https://josephuspaye.github.io/Keen-UI/1.0.0/#/ui-datepicker) and [UiFileupload](https://josephuspaye.github.io/Keen-UI/1.0.0/#/ui-fileupload) -* [Documentation](https://github.com/JosephusPaye/Keen-UI/blob/master/Customization.md) for customizing the components -* [Global configuration](https://github.com/JosephusPaye/Keen-UI/blob/master/Customization.md#global-config) now available for certain component props -* CSS switched from Stylus to Sass, adopting the [BEM](http://getbem.com/naming/) naming convention -* Component sizing switched from `px` to `rem`, using a root font size of `16px`. [Changing](https://github.com/JosephusPaye/Keen-UI/blob/master/Customization.md#component-sizing) this font size will scale the components up/down appropriately. -* Component event names switched from past tense to present to be more in line with the native DOM events -* Remove [validatorjs](https://github.com/skaterdav85/validatorjs) and [draggabilly](http://draggabilly.desandro.com) dependencies -* Now shipping both minified and unminified versions of standalone component files in `lib/` -* Fix several issues and unnecessary API limitations +- New components: [UiCheckboxGroup](https://josephuspaye.github.io/Keen-UI/1.0.0/#/ui-checkbox-group), [UiDatepicker](https://josephuspaye.github.io/Keen-UI/1.0.0/#/ui-datepicker) and [UiFileupload](https://josephuspaye.github.io/Keen-UI/1.0.0/#/ui-fileupload) +- [Documentation](https://github.com/JosephusPaye/Keen-UI/blob/master/Customization.md) for customizing the components +- [Global configuration](https://github.com/JosephusPaye/Keen-UI/blob/master/Customization.md#global-config) now available for certain component props +- CSS switched from Stylus to Sass, adopting the [BEM](http://getbem.com/naming/) naming convention +- Component sizing switched from `px` to `rem`, using a root font size of `16px`. [Changing](https://github.com/JosephusPaye/Keen-UI/blob/master/Customization.md#component-sizing) this font size will scale the components up/down appropriately. +- Component event names switched from past tense to present to be more in line with the native DOM events +- Remove [validatorjs](https://github.com/skaterdav85/validatorjs) and [draggabilly](http://draggabilly.desandro.com) dependencies +- Now shipping both minified and unminified versions of standalone component files in `lib/` +- Fix several issues and unnecessary API limitations diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index fb8f792a..ed654c05 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -12,19 +12,19 @@ Please take care to observe the following when you contribute code to Keen UI: 5. For HTML, use the following formatting guide: - For tags that cross the max line limit (100 characters), open the tag, then drop down to an indented line and place each attribute on a new line, sorted alphabetically and grouped (new line separating groups) according to the following order: + For tags that cross the max line limit (100 characters), open the tag, then drop down to an indented line and place each attribute on a new line, sorted alphabetically and grouped (new line separating groups) according to the following order: - - normal attributes - - `v-bind` attributes (`:` shorthand only) - - `v-on` attributes (`@` shorthand only) - - directives + - normal attributes + - `v-bind` attributes (`:` shorthand only) + - `v-on` attributes (`@` shorthand only) + - directives - After all attributes, drop down to a new line with the same indent as opening tag, add the closing `>` and then close the tag. + After all attributes, drop down to a new line with the same indent as opening tag, add the closing `>` and then close the tag. - **Note**: This doesn't apply to content (e.g. text inside `div`, `p`, `span`, etc.) and tags that don't cross the 100 character per line limit. + **Note**: This doesn't apply to content (e.g. text inside `div`, `p`, `span`, etc.) and tags that don't cross the 100 character per line limit. - **Example**: + **Example**: - ![Example of HTML formatting](https://i.imgur.com/8v4vkRK.png) + ![Example of HTML formatting](https://i.imgur.com/8v4vkRK.png) 6. For CSS, all selectors must follow the [BEM naming guidelines](http://getbem.com/naming/). diff --git a/Customization.md b/Customization.md index 74c6e05f..99456339 100644 --- a/Customization.md +++ b/Customization.md @@ -8,38 +8,40 @@ If you use Sass with [`webpack`](https://webpack.js.org) and [`vue-loader`](http 1. Create a `variables.scss` file somewhere in your project, for example, at `src/styles/variables.scss`. - **Note**: since this file will be imported into every Sass file, make sure it doesn't contain any CSS rules. It should contain only Sass variables, functions or mixins. + **Note**: since this file will be imported into every Sass file, make sure it doesn't contain any CSS rules. It should contain only Sass variables, functions or mixins. 2. If you are **not** using Vue CLI: - - Install [`sass-resources-loader`](https://github.com/shakacode/sass-resources-loader). - - ``` - npm install sass-resources-loader --save-dev - ``` - - - Add the following rule to your webpack config file: - - ```js - { - loader: 'sass-resources-loader', - options: { - resources: path.resolve(__dirname, './src/styles/variables.scss') - } - } - ``` + + - Install [`sass-resources-loader`](https://github.com/shakacode/sass-resources-loader). + + ``` + npm install sass-resources-loader --save-dev + ``` + + - Add the following rule to your webpack config file: + + ```js + { + loader: 'sass-resources-loader', + options: { + resources: path.resolve(__dirname, './src/styles/variables.scss') + } + } + ``` + 3. If you are using Vue CLI, add the following to `vue.config.js` ([details](https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders)): - ```js - module.exports = { - css: { - loaderOptions: { - sass: { - data: `@import "@/styles/variables.scss";` - } - } - } - } - ``` + ```js + module.exports = { + css: { + loaderOptions: { + sass: { + data: `@import "@/styles/variables.scss";`, + }, + }, + }, + }; + ``` 4. Now you can customize the component styles by overriding Keen UI variables in the `variables.scss` file you created. @@ -49,33 +51,33 @@ The `primary` and `accent` theme colors can be customized using the `$brand-prim 1. Add the following to your `variables.scss` file: - ```scss - $brand-primary-color: #673AB7; - $brand-accent-color: #FF4081; - ``` + ```scss + $brand-primary-color: #673ab7; + $brand-accent-color: #ff4081; + ``` 2. Import and use the components from `keen-ui/src`. Example: - ```html - - - - - ``` + ```html + + + + + ``` ### Other variables @@ -95,7 +97,7 @@ To scale the size of components up, set a font size higher than `100%` on the ro ```css html { - font-size: 110%; + font-size: 110%; } ``` @@ -103,7 +105,7 @@ To scale the size of components down, set a font size lower than `100%` on the r ```css html { - font-size: 90%; + font-size: 90%; } ``` @@ -114,28 +116,28 @@ Component props which have default values can be changed globally when installin ### Configure all components ```js -import { createApp } from 'vue'; -import KeenUI from 'keen-ui'; +import { createApp } from "vue"; +import KeenUI from "keen-ui"; const app = createApp(); app.use(KeenUI, { - UiButton: { - disableRipple: true - }, - UiTooltip: { - position: 'top' - } + UiButton: { + disableRipple: true, + }, + UiTooltip: { + position: "top", + }, }); ``` ### Configure individual components ```js -import { UiButton } from 'keen-ui'; -import configure from 'keen-ui/src/configure' +import { UiButton } from "keen-ui"; +import configure from "keen-ui/src/configure"; configure(UiButton, { - disableRipple: true + disableRipple: true, }); // UiButton's disableRipple prop is now true by default diff --git a/README.md b/README.md index 103d79c4..9f864e19 100644 --- a/README.md +++ b/README.md @@ -10,11 +10,11 @@ Keen UI is a [Vue.js](http://vuejs.org) UI library with a simple API, inspired b ## Requirements -* [Vue.js](http://vuejs.org/) (^v2.1.4) - use [keen-ui@0.8.9](http://josephuspaye.github.io/Keen-UI/0.8.9/) for Vue 1.x support. +- [Vue.js](http://vuejs.org/) (^v2.1.4) - use [keen-ui@0.8.9](http://josephuspaye.github.io/Keen-UI/0.8.9/) for Vue 1.x support. Optional -* [Material Icons font](http://google.github.io/material-design-icons/#icon-font-for-the-web) +- [Material Icons font](http://google.github.io/material-design-icons/#icon-font-for-the-web) ## Browser support @@ -36,11 +36,11 @@ Before using Keen UI, ensure that the following CSS resets are applied to your s *, *::before, *::after { - box-sizing: border-box; + box-sizing: border-box; } html { - font-size: 100%; + font-size: 100%; } ``` @@ -51,9 +51,9 @@ You can add the reset to your stylesheet (before other styles). If you are using Use as a Vue plugin (globally registers all components): ```js -import { createApp } from 'vue'; -import KeenUI from 'keen-ui'; -import 'keen-ui/dist/keen-ui.css'; +import { createApp } from "vue"; +import KeenUI from "keen-ui"; +import "keen-ui/dist/keen-ui.css"; const app = createApp(); app.use(KeenUI); @@ -62,14 +62,14 @@ app.use(KeenUI); Use individual components: ```js -import { createApp } from 'vue'; -import { UiAlert, UiButton } from 'keen-ui'; +import { createApp } from "vue"; +import { UiAlert, UiButton } from "keen-ui"; const app = createApp({ - components: { - UiAlert, - UiButton - } + components: { + UiAlert, + UiButton, + }, }); ``` @@ -83,25 +83,25 @@ Example: ```html - +
- {{ message }} + {{ message }}
``` @@ -118,14 +118,14 @@ Each component is built into a standalone file with the necessary CSS included. **NOTE**: Standalone component files each contain their own dependencies, and many contain overlapping dependencies. As a result, using multiple standalone files may increase the size of your bundle due to duplicate code. ```js -import { createApp } from 'vue'; -import 'keen-ui/src/bootstrap'; // Required when using standalone components, should be imported only once in your project -import UiButton from 'keen-ui/lib/UiButton'; +import { createApp } from "vue"; +import "keen-ui/src/bootstrap"; // Required when using standalone components, should be imported only once in your project +import UiButton from "keen-ui/lib/UiButton"; const app = createApp({ - components: { - UiButton - } + components: { + UiButton, + }, }); ``` @@ -135,4 +135,4 @@ Keen UI is open source and released under the [MIT Licence](LICENCE). Copyright (c) 2019 [Josephus Paye II](https://twitter.com/JosephusPaye). -> *PS: Made something cool with Keen UI? I would love to know! Tweet to me at [@JosephusPaye](https://twitter.com/JosephusPaye)*. +> _PS: Made something cool with Keen UI? I would love to know! Tweet to me at [@JosephusPaye](https://twitter.com/JosephusPaye)_. diff --git a/build/build.lib.js b/build/build.lib.js index 8fd34801..c47f24bf 100644 --- a/build/build.lib.js +++ b/build/build.lib.js @@ -1,43 +1,43 @@ -const { build } = require('vite'); -const getLibConfig = require('./vite.config.lib.provider'); +const { build } = require("vite"); +const getLibConfig = require("./vite.config.lib.provider"); const entries = [ - 'UiAlert', - 'UiAutocomplete', - 'UiButton', - 'UiCalendar', - 'UiCheckbox', - 'UiCheckboxGroup', - 'UiCloseButton', - 'UiCollapsible', - 'UiConfirm', - 'UiDatepicker', - 'UiDatepickerCalendar', - 'UiFab', - 'UiFileupload', - 'UiIcon', - 'UiIconButton', - 'UiMenu', - 'UiModal', - 'UiPopover', - 'UiPreloader', - 'UiProgressCircular', - 'UiProgressLinear', - 'UiRadio', - 'UiRadioGroup', - 'UiRippleInk', - 'UiSelect', - 'UiSlider', - 'UiSnackbar', - 'UiSnackbarContainer', - 'UiSwitch', - 'UiTab', - 'UiTabs', - 'UiTextbox', - 'UiToolbar', - 'UiTooltip' + "UiAlert", + "UiAutocomplete", + "UiButton", + "UiCalendar", + "UiCheckbox", + "UiCheckboxGroup", + "UiCloseButton", + "UiCollapsible", + "UiConfirm", + "UiDatepicker", + "UiDatepickerCalendar", + "UiFab", + "UiFileupload", + "UiIcon", + "UiIconButton", + "UiMenu", + "UiModal", + "UiPopover", + "UiPreloader", + "UiProgressCircular", + "UiProgressLinear", + "UiRadio", + "UiRadioGroup", + "UiRippleInk", + "UiSelect", + "UiSlider", + "UiSnackbar", + "UiSnackbarContainer", + "UiSwitch", + "UiTab", + "UiTabs", + "UiTextbox", + "UiToolbar", + "UiTooltip", ]; -entries.forEach(async entry => { - await build(getLibConfig({ entry, mode: process.env.NODE_ENV || 'production' })); +entries.forEach(async (entry) => { + await build(getLibConfig({ entry, mode: process.env.NODE_ENV || "production" })); }); diff --git a/build/options.js b/build/options.js index b87af3e2..279e10e1 100644 --- a/build/options.js +++ b/build/options.js @@ -1,33 +1,37 @@ -const path = require('path'); +const path = require("path"); // Hardcoding here (and not reading from package.json) as the files are built // before the version is updated in package.json -const version = '1.4.0'; +const version = "1.4.0"; const banner = - '/*!\n' + - ' * Keen UI v' + version + ' (https://github.com/JosephusPaye/keen-ui)\n' + - ' * (c) ' + new Date().getFullYear() + ' Josephus Paye II\n' + - ' * Released under the MIT License.\n' + - ' */'; + "/*!\n" + + " * Keen UI v" + + version + + " (https://github.com/JosephusPaye/keen-ui)\n" + + " * (c) " + + new Date().getFullYear() + + " Josephus Paye II\n" + + " * Released under the MIT License.\n" + + " */"; module.exports = { - banner, + banner, - paths: { - src: { - main: path.join(__dirname, '..', 'src'), - docs: path.join(__dirname, '..', 'docs-src') - }, + paths: { + src: { + main: path.join(__dirname, "..", "src"), + docs: path.join(__dirname, "..", "docs-src"), + }, - output: { - main: path.join(__dirname, '..', 'dist'), - lib: path.join(__dirname, '..', 'lib'), - docs: path.join(__dirname, '..', 'docs') - }, + output: { + main: path.join(__dirname, "..", "dist"), + lib: path.join(__dirname, "..", "lib"), + docs: path.join(__dirname, "..", "docs"), + }, - resolve(location) { - return path.join(__dirname, '..', location); - } - } + resolve(location) { + return path.join(__dirname, "..", location); + }, + }, }; diff --git a/build/vite.config.dist.js b/build/vite.config.dist.js index db3641a5..519ed5e9 100644 --- a/build/vite.config.dist.js +++ b/build/vite.config.dist.js @@ -1,49 +1,45 @@ -const { defineConfig } = require('vite'); -const vue = require('@vitejs/plugin-vue'); -const banner = require('vite-plugin-banner'); -const options = require('./options'); -const autoprefixer = require('autoprefixer'); +const { defineConfig } = require("vite"); +const vue = require("@vitejs/plugin-vue"); +const banner = require("vite-plugin-banner"); +const options = require("./options"); +const autoprefixer = require("autoprefixer"); export default defineConfig(({ mode }) => { - const filename = mode === 'production' ? 'keen-ui.min' : 'keen-ui'; - const outDir = options.paths.output.main; + const filename = mode === "production" ? "keen-ui.min" : "keen-ui"; + const outDir = options.paths.output.main; - return { - plugins: [ - vue(), - banner({ content: options.banner, outDir }), - ], - resolve: { - alias: { - '@': options.paths.src.main, - vue: 'vue/dist/vue.esm-bundler.js' - } + return { + plugins: [vue(), banner({ content: options.banner, outDir })], + resolve: { + alias: { + "@": options.paths.src.main, + vue: "vue/dist/vue.esm-bundler.js", + }, + }, + css: { + postcss: { + plugins: [autoprefixer()], + }, + }, + build: { + minify: mode === "production" ? "esbuild" : false, + outDir, + emptyOutDir: false, + chunkSizeWarningLimit: 600, + cssCodeSplit: false, + lib: { + entry: options.paths.resolve("src/index.js"), + name: "KeenUI", + formats: ["umd"], + fileName: () => filename + ".js", + }, + rollupOptions: { + external: [/^vue/], + output: { + assetFileNames: (assetInfo) => + assetInfo.name === "style.css" ? filename + ".css" : assetInfo.name, }, - css: { - postcss: { - plugins: [ - autoprefixer() - ] - } - }, - build: { - minify: mode === 'production' ? 'esbuild' : false, - outDir, - emptyOutDir: false, - chunkSizeWarningLimit: 600, - cssCodeSplit: false, - lib: { - entry: options.paths.resolve('src/index.js'), - name: 'KeenUI', - formats: ['umd'], - fileName: () => filename + '.js' - }, - rollupOptions: { - external: [/^vue/], - output: { - assetFileNames: (assetInfo) => assetInfo.name === 'style.css' ? filename + '.css' : assetInfo.name - } - } - } - }; + }, + }, + }; }); diff --git a/build/vite.config.docs.js b/build/vite.config.docs.js index 8eaa6a75..bf91f813 100644 --- a/build/vite.config.docs.js +++ b/build/vite.config.docs.js @@ -1,43 +1,41 @@ -const { fileURLToPath, URL } = require('url'); -const { defineConfig } = require('vite'); -const vue = require('@vitejs/plugin-vue'); -const options = require('./options'); -const autoprefixer = require('autoprefixer'); +const { fileURLToPath, URL } = require("url"); +const { defineConfig } = require("vite"); +const vue = require("@vitejs/plugin-vue"); +const options = require("./options"); +const autoprefixer = require("autoprefixer"); export default defineConfig({ - plugins: [vue()], - server: { - port: 9000 + plugins: [vue()], + server: { + port: 9000, + }, + resolve: { + alias: { + "@": fileURLToPath(new URL("../src", import.meta.url)), + vue: "vue/dist/vue.esm-bundler.js", }, - resolve: { - alias: { - '@': fileURLToPath(new URL('../src', import.meta.url)), - vue: 'vue/dist/vue.esm-bundler.js' - } + }, + css: { + postcss: { + plugins: [autoprefixer()], }, - css: { - postcss: { - plugins: [ - autoprefixer() - ] - } - }, - build: { - outDir: options.paths.output.docs, - emptyOutDir: false, - cssCodeSplit: false, - rollupOptions: { - output: { - assetFileNames: (assetInfo) => { - let ext = assetInfo.name.split('.')[1] - if (ext === 'css') { - return 'docs.bundle.[ext]' - } + }, + build: { + outDir: options.paths.output.docs, + emptyOutDir: false, + cssCodeSplit: false, + rollupOptions: { + output: { + assetFileNames: (assetInfo) => { + let ext = assetInfo.name.split(".")[1]; + if (ext === "css") { + return "docs.bundle.[ext]"; + } - return '[name].[ext]' - }, - entryFileNames: 'docs.bundle.js' - } - } - } + return "[name].[ext]"; + }, + entryFileNames: "docs.bundle.js", + }, + }, + }, }); diff --git a/build/vite.config.lib.provider.js b/build/vite.config.lib.provider.js index 6da55feb..cbaf4fbd 100644 --- a/build/vite.config.lib.provider.js +++ b/build/vite.config.lib.provider.js @@ -1,47 +1,42 @@ -const vue = require('@vitejs/plugin-vue'); -const banner = require('vite-plugin-banner'); -const options = require('./options'); -const autoprefixer = require('autoprefixer'); +const vue = require("@vitejs/plugin-vue"); +const banner = require("vite-plugin-banner"); +const options = require("./options"); +const autoprefixer = require("autoprefixer"); module.exports = ({ entry, mode }) => { - const outDir = options.paths.output.lib; + const outDir = options.paths.output.lib; - return { - plugins: [ - vue(), - banner({ content: options.banner, outDir }) - ], - resolve: { - alias: { - '@': options.paths.src.main - } + return { + plugins: [vue(), banner({ content: options.banner, outDir })], + resolve: { + alias: { + "@": options.paths.src.main, + }, + }, + css: { + postcss: { + plugins: [autoprefixer()], + }, + }, + build: { + minify: mode === "production" ? "esbuild" : false, + lib: { + entry: options.paths.resolve(`src/${entry}.vue`), + formats: ["umd"], + fileName: () => `[name]${mode === "production" ? ".min" : ""}.js`, + name: `KeenUI.${entry}`, + }, + outDir, + emptyOutDir: false, + cssCodeSplit: true, + rollupOptions: { + external: [/^vue/], + output: { + globals: { + vue: "Vue", + }, }, - css: { - postcss: { - plugins: [ - autoprefixer() - ] - } - }, - build: { - minify: mode === 'production' ? 'esbuild' : false, - lib: { - entry: options.paths.resolve(`src/${entry}.vue`), - formats: ['umd'], - fileName: () => `[name]${ mode === 'production' ? '.min' : '' }.js`, - name: `KeenUI.${entry}` - }, - outDir, - emptyOutDir: false, - cssCodeSplit: true, - rollupOptions: { - external: [/^vue/], - output: { - globals: { - vue: 'Vue' - } - }, - } - } - }; + }, + }, + }; }; diff --git a/docs-src/App.vue b/docs-src/App.vue index e96f9d42..c5e1b21c 100644 --- a/docs-src/App.vue +++ b/docs-src/App.vue @@ -1,119 +1,119 @@ diff --git a/docs-src/DocsBrand.vue b/docs-src/DocsBrand.vue index fff797b8..ef026640 100644 --- a/docs-src/DocsBrand.vue +++ b/docs-src/DocsBrand.vue @@ -1,83 +1,86 @@ diff --git a/docs-src/DocsNavbar.vue b/docs-src/DocsNavbar.vue index 2fd39e53..8447d6de 100644 --- a/docs-src/DocsNavbar.vue +++ b/docs-src/DocsNavbar.vue @@ -1,132 +1,133 @@ diff --git a/docs-src/DocsSidebar.vue b/docs-src/DocsSidebar.vue index b95d9f13..8a88f193 100644 --- a/docs-src/DocsSidebar.vue +++ b/docs-src/DocsSidebar.vue @@ -1,254 +1,257 @@ diff --git a/docs-src/index.html b/docs-src/index.html index c21a03ec..4e1e5c35 100644 --- a/docs-src/index.html +++ b/docs-src/index.html @@ -1,22 +1,33 @@ - - Keen UI is a Vue.js UI library with a simple API, inspired by Google's Material Design. - + + + Keen UI is a Vue.js UI library with a simple API, inspired by Google's Material Design. + + - + - - + + - - - + + + - + - +
diff --git a/docs-src/main.js b/docs-src/main.js index 0b183abe..f0841b02 100644 --- a/docs-src/main.js +++ b/docs-src/main.js @@ -1,10 +1,10 @@ -import '@/helpers/modality'; -import { createApp } from 'vue'; +import "@/helpers/modality"; +import { createApp } from "vue"; -import App from './App.vue'; -import { router } from './navigation'; +import App from "./App.vue"; +import { router } from "./navigation"; const app = createApp(App); app.use(router); -app.mount('#app'); +app.mount("#app"); diff --git a/docs-src/navigation.js b/docs-src/navigation.js index 3bdb496b..7f2b2ad7 100644 --- a/docs-src/navigation.js +++ b/docs-src/navigation.js @@ -1,246 +1,246 @@ -import { createRouter, createWebHashHistory } from 'vue-router'; +import { createRouter, createWebHashHistory } from "vue-router"; -import UiAlert from './pages/UiAlert.vue'; -import UiAutocomplete from './pages/UiAutocomplete.vue'; -import UiButton from './pages/UiButton.vue'; -import UiCalendar from './pages/UiCalendar.vue'; -import UiCheckbox from './pages/UiCheckbox.vue'; -import UiCheckboxGroup from './pages/UiCheckboxGroup.vue'; -import UiCollapsible from './pages/UiCollapsible.vue'; -import UiConfirm from './pages/UiConfirm.vue'; -import UiDatepicker from './pages/UiDatepicker.vue'; -import UiFab from './pages/UiFab.vue'; -import UiFileupload from './pages/UiFileupload.vue'; -import UiIcon from './pages/UiIcon.vue'; -import UiIconButton from './pages/UiIconButton.vue'; -import UiMenu from './pages/UiMenu.vue'; -import UiModal from './pages/UiModal.vue'; -import UiPopover from './pages/UiPopover.vue'; -import UiPreloader from './pages/UiPreloader.vue'; -import UiProgressCircular from './pages/UiProgressCircular.vue'; -import UiProgressLinear from './pages/UiProgressLinear.vue'; -import UiRadio from './pages/UiRadio.vue'; -import UiRadioGroup from './pages/UiRadioGroup.vue'; -import UiRippleInk from './pages/UiRippleInk.vue'; -import UiSelect from './pages/UiSelect.vue'; -import UiSlider from './pages/UiSlider.vue'; -import UiSnackbar from './pages/UiSnackbar.vue'; -import UiSwitch from './pages/UiSwitch.vue'; -import UiTabs from './pages/UiTabs.vue'; -import UiTextbox from './pages/UiTextbox.vue'; -import UiToolbar from './pages/UiToolbar.vue'; -import UiTooltip from './pages/UiTooltip.vue'; +import UiAlert from "./pages/UiAlert.vue"; +import UiAutocomplete from "./pages/UiAutocomplete.vue"; +import UiButton from "./pages/UiButton.vue"; +import UiCalendar from "./pages/UiCalendar.vue"; +import UiCheckbox from "./pages/UiCheckbox.vue"; +import UiCheckboxGroup from "./pages/UiCheckboxGroup.vue"; +import UiCollapsible from "./pages/UiCollapsible.vue"; +import UiConfirm from "./pages/UiConfirm.vue"; +import UiDatepicker from "./pages/UiDatepicker.vue"; +import UiFab from "./pages/UiFab.vue"; +import UiFileupload from "./pages/UiFileupload.vue"; +import UiIcon from "./pages/UiIcon.vue"; +import UiIconButton from "./pages/UiIconButton.vue"; +import UiMenu from "./pages/UiMenu.vue"; +import UiModal from "./pages/UiModal.vue"; +import UiPopover from "./pages/UiPopover.vue"; +import UiPreloader from "./pages/UiPreloader.vue"; +import UiProgressCircular from "./pages/UiProgressCircular.vue"; +import UiProgressLinear from "./pages/UiProgressLinear.vue"; +import UiRadio from "./pages/UiRadio.vue"; +import UiRadioGroup from "./pages/UiRadioGroup.vue"; +import UiRippleInk from "./pages/UiRippleInk.vue"; +import UiSelect from "./pages/UiSelect.vue"; +import UiSlider from "./pages/UiSlider.vue"; +import UiSnackbar from "./pages/UiSnackbar.vue"; +import UiSwitch from "./pages/UiSwitch.vue"; +import UiTabs from "./pages/UiTabs.vue"; +import UiTextbox from "./pages/UiTextbox.vue"; +import UiToolbar from "./pages/UiToolbar.vue"; +import UiTooltip from "./pages/UiTooltip.vue"; const menu = [ - { - path: '/ui-alert', - component: UiAlert, - title: 'UiAlert', - sourceUrl: 'src/UiAlert.vue' - }, - { - path: '/ui-autocomplete', - component: UiAutocomplete, - title: 'UiAutocomplete', - sourceUrl: 'src/UiAutocomplete.vue' - }, - { - path: '/ui-button', - component: UiButton, - title: 'UiButton', - sourceUrl: 'src/UiButton.vue' - }, - { - path: '/ui-calendar', - component: UiCalendar, - title: 'UiCalendar', - sourceUrl: 'src/UiCalendar.vue' - }, - { - path: '/ui-checkbox', - component: UiCheckbox, - title: 'UiCheckbox', - sourceUrl: 'src/UiCheckbox.vue' - }, - { - path: '/ui-checkbox-group', - component: UiCheckboxGroup, - title: 'UiCheckboxGroup', - sourceUrl: 'src/UiCheckboxGroup.vue' - }, - { - path: '/ui-collapsible', - component: UiCollapsible, - title: 'UiCollapsible', - sourceUrl: 'src/UiCollapsible.vue' - }, - { - path: '/ui-confirm', - component: UiConfirm, - title: 'UiConfirm', - sourceUrl: 'src/UiConfirm.vue' - }, - { - path: '/ui-datepicker', - component: UiDatepicker, - title: 'UiDatepicker', - sourceUrl: 'src/UiDatepicker.vue' - }, - { - path: '/ui-fab', - component: UiFab, - title: 'UiFab', - sourceUrl: 'src/UiFab.vue' - }, - { - path: '/ui-fileupload', - component: UiFileupload, - title: 'UiFileupload', - sourceUrl: 'src/UiFileupload.vue' - }, - { - path: '/ui-icon', - component: UiIcon, - title: 'UiIcon', - sourceUrl: 'src/UiIcon.vue' - }, - { - path: '/ui-icon-button', - component: UiIconButton, - title: 'UiIconButton', - sourceUrl: 'src/UiIconButton.vue' - }, - { - path: '/ui-menu', - component: UiMenu, - title: 'UiMenu', - sourceUrl: 'src/UiMenu.vue' - }, - { - path: '/ui-modal', - component: UiModal, - title: 'UiModal', - sourceUrl: 'src/UiModal.vue' - }, - { - path: '/ui-popover', - component: UiPopover, - title: 'UiPopover', - sourceUrl: 'src/UiPopover.vue' - }, - { - path: '/ui-preloader', - component: UiPreloader, - title: 'UiPreloader', - sourceUrl: 'src/UiPreloader.vue' - }, - { - path: '/ui-progress-circular', - component: UiProgressCircular, - title: 'UiProgressCircular', - sourceUrl: 'src/UiProgressCircular.vue' - }, - { - path: '/ui-progress-linear', - component: UiProgressLinear, - title: 'UiProgressLinear', - sourceUrl: 'src/UiProgressLinear.vue' - }, - { - path: '/ui-radio', - component: UiRadio, - title: 'UiRadio', - sourceUrl: 'src/UiRadio.vue' - }, - { - path: '/ui-radio-group', - component: UiRadioGroup, - title: 'UiRadioGroup', - sourceUrl: 'src/UiRadioGroup.vue' - }, - { - path: '/ui-ripple-ink', - component: UiRippleInk, - title: 'UiRippleInk', - sourceUrl: 'src/UiRippleInk.vue' - }, - { - path: '/ui-select', - component: UiSelect, - title: 'UiSelect', - sourceUrl: 'src/UiSelect.vue' - }, - { - path: '/ui-slider', - component: UiSlider, - title: 'UiSlider', - sourceUrl: 'src/UiSlider.vue' - }, - { - path: '/ui-snackbar', - component: UiSnackbar, - title: 'UiSnackbar', - sourceUrl: 'src/UiSnackbarContainer.vue' - }, - { - path: '/ui-switch', - component: UiSwitch, - title: 'UiSwitch', - sourceUrl: 'src/UiSwitch.vue' - }, - { - path: '/ui-tabs', - component: UiTabs, - title: 'UiTabs', - sourceUrl: 'src/UiTabs.vue' - }, - { - path: '/ui-textbox', - component: UiTextbox, - title: 'UiTextbox', - sourceUrl: 'src/UiTextbox.vue' - }, - { - path: '/ui-toolbar', - component: UiToolbar, - title: 'UiToolbar', - sourceUrl: 'src/UiToolbar.vue' - }, - { - path: '/ui-tooltip', - component: UiTooltip, - title: 'UiTooltip', - sourceUrl: 'src/UiTooltip.vue' - } + { + path: "/ui-alert", + component: UiAlert, + title: "UiAlert", + sourceUrl: "src/UiAlert.vue", + }, + { + path: "/ui-autocomplete", + component: UiAutocomplete, + title: "UiAutocomplete", + sourceUrl: "src/UiAutocomplete.vue", + }, + { + path: "/ui-button", + component: UiButton, + title: "UiButton", + sourceUrl: "src/UiButton.vue", + }, + { + path: "/ui-calendar", + component: UiCalendar, + title: "UiCalendar", + sourceUrl: "src/UiCalendar.vue", + }, + { + path: "/ui-checkbox", + component: UiCheckbox, + title: "UiCheckbox", + sourceUrl: "src/UiCheckbox.vue", + }, + { + path: "/ui-checkbox-group", + component: UiCheckboxGroup, + title: "UiCheckboxGroup", + sourceUrl: "src/UiCheckboxGroup.vue", + }, + { + path: "/ui-collapsible", + component: UiCollapsible, + title: "UiCollapsible", + sourceUrl: "src/UiCollapsible.vue", + }, + { + path: "/ui-confirm", + component: UiConfirm, + title: "UiConfirm", + sourceUrl: "src/UiConfirm.vue", + }, + { + path: "/ui-datepicker", + component: UiDatepicker, + title: "UiDatepicker", + sourceUrl: "src/UiDatepicker.vue", + }, + { + path: "/ui-fab", + component: UiFab, + title: "UiFab", + sourceUrl: "src/UiFab.vue", + }, + { + path: "/ui-fileupload", + component: UiFileupload, + title: "UiFileupload", + sourceUrl: "src/UiFileupload.vue", + }, + { + path: "/ui-icon", + component: UiIcon, + title: "UiIcon", + sourceUrl: "src/UiIcon.vue", + }, + { + path: "/ui-icon-button", + component: UiIconButton, + title: "UiIconButton", + sourceUrl: "src/UiIconButton.vue", + }, + { + path: "/ui-menu", + component: UiMenu, + title: "UiMenu", + sourceUrl: "src/UiMenu.vue", + }, + { + path: "/ui-modal", + component: UiModal, + title: "UiModal", + sourceUrl: "src/UiModal.vue", + }, + { + path: "/ui-popover", + component: UiPopover, + title: "UiPopover", + sourceUrl: "src/UiPopover.vue", + }, + { + path: "/ui-preloader", + component: UiPreloader, + title: "UiPreloader", + sourceUrl: "src/UiPreloader.vue", + }, + { + path: "/ui-progress-circular", + component: UiProgressCircular, + title: "UiProgressCircular", + sourceUrl: "src/UiProgressCircular.vue", + }, + { + path: "/ui-progress-linear", + component: UiProgressLinear, + title: "UiProgressLinear", + sourceUrl: "src/UiProgressLinear.vue", + }, + { + path: "/ui-radio", + component: UiRadio, + title: "UiRadio", + sourceUrl: "src/UiRadio.vue", + }, + { + path: "/ui-radio-group", + component: UiRadioGroup, + title: "UiRadioGroup", + sourceUrl: "src/UiRadioGroup.vue", + }, + { + path: "/ui-ripple-ink", + component: UiRippleInk, + title: "UiRippleInk", + sourceUrl: "src/UiRippleInk.vue", + }, + { + path: "/ui-select", + component: UiSelect, + title: "UiSelect", + sourceUrl: "src/UiSelect.vue", + }, + { + path: "/ui-slider", + component: UiSlider, + title: "UiSlider", + sourceUrl: "src/UiSlider.vue", + }, + { + path: "/ui-snackbar", + component: UiSnackbar, + title: "UiSnackbar", + sourceUrl: "src/UiSnackbarContainer.vue", + }, + { + path: "/ui-switch", + component: UiSwitch, + title: "UiSwitch", + sourceUrl: "src/UiSwitch.vue", + }, + { + path: "/ui-tabs", + component: UiTabs, + title: "UiTabs", + sourceUrl: "src/UiTabs.vue", + }, + { + path: "/ui-textbox", + component: UiTextbox, + title: "UiTextbox", + sourceUrl: "src/UiTextbox.vue", + }, + { + path: "/ui-toolbar", + component: UiToolbar, + title: "UiToolbar", + sourceUrl: "src/UiToolbar.vue", + }, + { + path: "/ui-tooltip", + component: UiTooltip, + title: "UiTooltip", + sourceUrl: "src/UiTooltip.vue", + }, ]; // Generate a Vue Router compatible routes map from the menu -const routes = menu.map(menuItem => { - return { - path: menuItem.path, - component: menuItem.component, - meta: { - title: menuItem.title, - sourceUrl: menuItem.sourceUrl - } - }; +const routes = menu.map((menuItem) => { + return { + path: menuItem.path, + component: menuItem.component, + meta: { + title: menuItem.title, + sourceUrl: menuItem.sourceUrl, + }, + }; }); const router = createRouter({ - history: createWebHashHistory(), - linkActiveClass: 'is-active', - routes: [ - { - path: '/', - redirect: routes[0].path - }, - ...routes, - { - // Catch all route to redirect 404s - path: '/.*', - redirect: routes[0].path - } - ] + history: createWebHashHistory(), + linkActiveClass: "is-active", + routes: [ + { + path: "/", + redirect: routes[0].path, + }, + ...routes, + { + // Catch all route to redirect 404s + path: "/.*", + redirect: routes[0].path, + }, + ], }); export { menu, router }; diff --git a/src/UiAlert.vue b/src/UiAlert.vue index a0951e33..8481f414 100644 --- a/src/UiAlert.vue +++ b/src/UiAlert.vue @@ -1,160 +1,167 @@ diff --git a/src/UiAutocomplete.vue b/src/UiAutocomplete.vue index 4be130e2..048ab4ee 100644 --- a/src/UiAutocomplete.vue +++ b/src/UiAutocomplete.vue @@ -1,619 +1,623 @@ diff --git a/src/UiAutocompleteSuggestion.vue b/src/UiAutocompleteSuggestion.vue index 8c9d40f0..75985e88 100644 --- a/src/UiAutocompleteSuggestion.vue +++ b/src/UiAutocompleteSuggestion.vue @@ -1,93 +1,91 @@ diff --git a/src/UiButton.vue b/src/UiButton.vue index 68de50df..7f4791db 100644 --- a/src/UiButton.vue +++ b/src/UiButton.vue @@ -1,336 +1,323 @@ diff --git a/src/UiCalendar.vue b/src/UiCalendar.vue index 5869d08a..176956e6 100644 --- a/src/UiCalendar.vue +++ b/src/UiCalendar.vue @@ -1,176 +1,168 @@ diff --git a/src/UiCalendarControls.vue b/src/UiCalendarControls.vue index bdfa4d92..73186793 100644 --- a/src/UiCalendarControls.vue +++ b/src/UiCalendarControls.vue @@ -1,161 +1,156 @@ diff --git a/src/UiCalendarMonth.vue b/src/UiCalendarMonth.vue index 69c864b4..901a19f4 100644 --- a/src/UiCalendarMonth.vue +++ b/src/UiCalendarMonth.vue @@ -1,148 +1,146 @@ diff --git a/src/UiCalendarWeek.vue b/src/UiCalendarWeek.vue index 7aae622d..7f527069 100644 --- a/src/UiCalendarWeek.vue +++ b/src/UiCalendarWeek.vue @@ -1,187 +1,186 @@ diff --git a/src/UiCheckbox.vue b/src/UiCheckbox.vue index 8670531b..284b7f61 100644 --- a/src/UiCheckbox.vue +++ b/src/UiCheckbox.vue @@ -1,264 +1,262 @@ diff --git a/src/UiCheckboxGroup.vue b/src/UiCheckboxGroup.vue index f5aaad67..9e07862b 100644 --- a/src/UiCheckboxGroup.vue +++ b/src/UiCheckboxGroup.vue @@ -1,268 +1,269 @@ diff --git a/src/UiCloseButton.vue b/src/UiCloseButton.vue index 5d3765fa..8e4ab849 100644 --- a/src/UiCloseButton.vue +++ b/src/UiCloseButton.vue @@ -1,136 +1,137 @@ diff --git a/src/UiCollapsible.vue b/src/UiCollapsible.vue index e853c187..b3c91c37 100644 --- a/src/UiCollapsible.vue +++ b/src/UiCollapsible.vue @@ -1,237 +1,230 @@ diff --git a/src/UiConfirm.vue b/src/UiConfirm.vue index 29a6c822..b91ba07b 100644 --- a/src/UiConfirm.vue +++ b/src/UiConfirm.vue @@ -1,196 +1,188 @@ diff --git a/src/UiDatepicker.vue b/src/UiDatepicker.vue index 67f1cf7f..fee47ff6 100644 --- a/src/UiDatepicker.vue +++ b/src/UiDatepicker.vue @@ -1,579 +1,559 @@ diff --git a/src/UiDatepickerCalendar.vue b/src/UiDatepickerCalendar.vue index 646e5db1..fc60f729 100644 --- a/src/UiDatepickerCalendar.vue +++ b/src/UiDatepickerCalendar.vue @@ -1,360 +1,354 @@ diff --git a/src/UiFab.vue b/src/UiFab.vue index 8fc46682..02fdb64c 100644 --- a/src/UiFab.vue +++ b/src/UiFab.vue @@ -1,132 +1,121 @@ diff --git a/src/UiFileupload.vue b/src/UiFileupload.vue index 2cfd92b6..5ddba922 100644 --- a/src/UiFileupload.vue +++ b/src/UiFileupload.vue @@ -1,294 +1,293 @@ diff --git a/src/UiFocusContainer.vue b/src/UiFocusContainer.vue index c76ca088..a621eb10 100644 --- a/src/UiFocusContainer.vue +++ b/src/UiFocusContainer.vue @@ -1,109 +1,104 @@ diff --git a/src/UiIcon.vue b/src/UiIcon.vue index 9f76d1a6..3ef8198e 100644 --- a/src/UiIcon.vue +++ b/src/UiIcon.vue @@ -1,58 +1,58 @@ diff --git a/src/UiIconButton.vue b/src/UiIconButton.vue index 34df1753..3b9abdba 100644 --- a/src/UiIconButton.vue +++ b/src/UiIconButton.vue @@ -1,297 +1,288 @@ - + diff --git a/src/UiMenu.vue b/src/UiMenu.vue index 9900ac12..1a7eca5b 100644 --- a/src/UiMenu.vue +++ b/src/UiMenu.vue @@ -1,150 +1,146 @@ diff --git a/src/UiMenuOption.vue b/src/UiMenuOption.vue index 3b036d09..0917a27e 100644 --- a/src/UiMenuOption.vue +++ b/src/UiMenuOption.vue @@ -1,160 +1,157 @@ diff --git a/src/UiModal.vue b/src/UiModal.vue index 4dd9d913..4bc4f62a 100644 --- a/src/UiModal.vue +++ b/src/UiModal.vue @@ -1,446 +1,440 @@ diff --git a/src/UiPopover.vue b/src/UiPopover.vue index 289aac52..998aa56c 100644 --- a/src/UiPopover.vue +++ b/src/UiPopover.vue @@ -1,323 +1,321 @@ diff --git a/src/UiPreloader.vue b/src/UiPreloader.vue index 1b3ea210..0c0240da 100644 --- a/src/UiPreloader.vue +++ b/src/UiPreloader.vue @@ -1,147 +1,146 @@ diff --git a/src/UiProgressCircular.vue b/src/UiProgressCircular.vue index 71d8cd53..b20b8365 100644 --- a/src/UiProgressCircular.vue +++ b/src/UiProgressCircular.vue @@ -1,187 +1,181 @@ diff --git a/src/UiProgressLinear.vue b/src/UiProgressLinear.vue index 05b6e1df..0763b827 100644 --- a/src/UiProgressLinear.vue +++ b/src/UiProgressLinear.vue @@ -1,106 +1,99 @@ diff --git a/src/UiRadio.vue b/src/UiRadio.vue index 9c7eccde..b9c2e1a5 100644 --- a/src/UiRadio.vue +++ b/src/UiRadio.vue @@ -1,238 +1,236 @@ diff --git a/src/UiRadioGroup.vue b/src/UiRadioGroup.vue index 8922e98a..b3f9f522 100644 --- a/src/UiRadioGroup.vue +++ b/src/UiRadioGroup.vue @@ -1,265 +1,266 @@ diff --git a/src/UiRippleInk.vue b/src/UiRippleInk.vue index 95ed8c08..8da6dca2 100644 --- a/src/UiRippleInk.vue +++ b/src/UiRippleInk.vue @@ -1,5 +1,5 @@ diff --git a/src/UiSelect.vue b/src/UiSelect.vue index dab74408..8c063083 100644 --- a/src/UiSelect.vue +++ b/src/UiSelect.vue @@ -1,904 +1,884 @@ diff --git a/src/UiSelectOption.vue b/src/UiSelectOption.vue index 0bf576ec..871dddf9 100644 --- a/src/UiSelectOption.vue +++ b/src/UiSelectOption.vue @@ -1,145 +1,147 @@ diff --git a/src/UiSlider.vue b/src/UiSlider.vue index a6caa9da..0236daf8 100644 --- a/src/UiSlider.vue +++ b/src/UiSlider.vue @@ -1,559 +1,557 @@ diff --git a/src/UiSnackbar.vue b/src/UiSnackbar.vue index c4a02b9c..0ec77c54 100644 --- a/src/UiSnackbar.vue +++ b/src/UiSnackbar.vue @@ -1,138 +1,136 @@ diff --git a/src/UiSnackbarContainer.vue b/src/UiSnackbarContainer.vue index a8f1550d..a1f53c1c 100644 --- a/src/UiSnackbarContainer.vue +++ b/src/UiSnackbarContainer.vue @@ -1,196 +1,192 @@ diff --git a/src/UiSwitch.vue b/src/UiSwitch.vue index 687d4878..18260f7b 100644 --- a/src/UiSwitch.vue +++ b/src/UiSwitch.vue @@ -1,247 +1,245 @@ diff --git a/src/UiTab.vue b/src/UiTab.vue index 8c03bbe4..35bede75 100644 --- a/src/UiTab.vue +++ b/src/UiTab.vue @@ -1,89 +1,87 @@ diff --git a/src/UiTabHeaderItem.vue b/src/UiTabHeaderItem.vue index 141a72de..87a0bffe 100644 --- a/src/UiTabHeaderItem.vue +++ b/src/UiTabHeaderItem.vue @@ -1,157 +1,153 @@ diff --git a/src/UiTabs.vue b/src/UiTabs.vue index 1018e7b6..3d20dee6 100644 --- a/src/UiTabs.vue +++ b/src/UiTabs.vue @@ -1,294 +1,291 @@ diff --git a/src/UiTextbox.vue b/src/UiTextbox.vue index 2fd68366..a73d5614 100644 --- a/src/UiTextbox.vue +++ b/src/UiTextbox.vue @@ -1,538 +1,528 @@ diff --git a/src/UiToolbar.vue b/src/UiToolbar.vue index 19878d18..865d4137 100644 --- a/src/UiToolbar.vue +++ b/src/UiToolbar.vue @@ -1,194 +1,192 @@ diff --git a/src/UiTooltip.vue b/src/UiTooltip.vue index f4fc5d36..1ea86776 100644 --- a/src/UiTooltip.vue +++ b/src/UiTooltip.vue @@ -1,116 +1,117 @@ diff --git a/src/bootstrap.js b/src/bootstrap.js index 30b09c74..5fbc7fb7 100644 --- a/src/bootstrap.js +++ b/src/bootstrap.js @@ -1 +1 @@ -import './helpers/modality'; +import "./helpers/modality"; diff --git a/src/configure.js b/src/configure.js index bccc290a..b94fc86c 100644 --- a/src/configure.js +++ b/src/configure.js @@ -1,18 +1,18 @@ -import merge from 'deepmerge'; +import merge from "deepmerge"; export default function configure(Component, props) { - Object.keys(props).forEach(propName => { - if (Component.props[propName] === undefined) { - return; - } + Object.keys(props).forEach((propName) => { + if (Component.props[propName] === undefined) { + return; + } - const defaultValue = Component.props[propName].default; + const defaultValue = Component.props[propName].default; - if (typeof defaultValue === 'object') { - Component.props[propName].default = merge(defaultValue, props[propName]); - return; - } + if (typeof defaultValue === "object") { + Component.props[propName].default = merge(defaultValue, props[propName]); + return; + } - Component.props[propName].default = props[propName]; - }); + Component.props[propName].default = props[propName]; + }); } diff --git a/src/index.js b/src/index.js index b0c7054c..3438780e 100644 --- a/src/index.js +++ b/src/index.js @@ -1,143 +1,143 @@ -import './bootstrap'; -import configure from './configure'; -import { startsWith } from './helpers/util'; +import "./bootstrap"; +import configure from "./configure"; +import { startsWith } from "./helpers/util"; -import UiAlert from './UiAlert.vue'; -import UiAutocomplete from './UiAutocomplete.vue'; -import UiButton from './UiButton.vue'; -import UiCalendar from './UiCalendar.vue'; -import UiCheckbox from './UiCheckbox.vue'; -import UiCheckboxGroup from './UiCheckboxGroup.vue'; -import UiCloseButton from './UiCloseButton.vue'; -import UiCollapsible from './UiCollapsible.vue'; -import UiConfirm from './UiConfirm.vue'; -import UiDatepicker from './UiDatepicker.vue'; -import UiDatepickerCalendar from './UiDatepickerCalendar.vue'; -import UiFab from './UiFab.vue'; -import UiFileupload from './UiFileupload.vue'; -import UiIcon from './UiIcon.vue'; -import UiIconButton from './UiIconButton.vue'; -import UiMenu from './UiMenu.vue'; -import UiModal from './UiModal.vue'; -import UiPopover from './UiPopover.vue'; -import UiPreloader from './UiPreloader.vue'; -import UiProgressCircular from './UiProgressCircular.vue'; -import UiProgressLinear from './UiProgressLinear.vue'; -import UiRadio from './UiRadio.vue'; -import UiRadioGroup from './UiRadioGroup.vue'; -import UiRippleInk from './UiRippleInk.vue'; -import UiSelect from './UiSelect.vue'; -import UiSlider from './UiSlider.vue'; -import UiSnackbar from './UiSnackbar.vue'; -import UiSnackbarContainer from './UiSnackbarContainer.vue'; -import UiSwitch from './UiSwitch.vue'; -import UiTab from './UiTab.vue'; -import UiTabs from './UiTabs.vue'; -import UiTextbox from './UiTextbox.vue'; -import UiToolbar from './UiToolbar.vue'; -import UiTooltip from './UiTooltip.vue'; +import UiAlert from "./UiAlert.vue"; +import UiAutocomplete from "./UiAutocomplete.vue"; +import UiButton from "./UiButton.vue"; +import UiCalendar from "./UiCalendar.vue"; +import UiCheckbox from "./UiCheckbox.vue"; +import UiCheckboxGroup from "./UiCheckboxGroup.vue"; +import UiCloseButton from "./UiCloseButton.vue"; +import UiCollapsible from "./UiCollapsible.vue"; +import UiConfirm from "./UiConfirm.vue"; +import UiDatepicker from "./UiDatepicker.vue"; +import UiDatepickerCalendar from "./UiDatepickerCalendar.vue"; +import UiFab from "./UiFab.vue"; +import UiFileupload from "./UiFileupload.vue"; +import UiIcon from "./UiIcon.vue"; +import UiIconButton from "./UiIconButton.vue"; +import UiMenu from "./UiMenu.vue"; +import UiModal from "./UiModal.vue"; +import UiPopover from "./UiPopover.vue"; +import UiPreloader from "./UiPreloader.vue"; +import UiProgressCircular from "./UiProgressCircular.vue"; +import UiProgressLinear from "./UiProgressLinear.vue"; +import UiRadio from "./UiRadio.vue"; +import UiRadioGroup from "./UiRadioGroup.vue"; +import UiRippleInk from "./UiRippleInk.vue"; +import UiSelect from "./UiSelect.vue"; +import UiSlider from "./UiSlider.vue"; +import UiSnackbar from "./UiSnackbar.vue"; +import UiSnackbarContainer from "./UiSnackbarContainer.vue"; +import UiSwitch from "./UiSwitch.vue"; +import UiTab from "./UiTab.vue"; +import UiTabs from "./UiTabs.vue"; +import UiTextbox from "./UiTextbox.vue"; +import UiToolbar from "./UiToolbar.vue"; +import UiTooltip from "./UiTooltip.vue"; const KeenUI = { - UiAlert, - UiAutocomplete, - UiButton, - UiCalendar, - UiCheckbox, - UiCheckboxGroup, - UiCloseButton, - UiCollapsible, - UiConfirm, - UiDatepicker, - UiDatepickerCalendar, - UiFab, - UiFileupload, - UiIcon, - UiIconButton, - UiMenu, - UiModal, - UiPopover, - UiPreloader, - UiProgressCircular, - UiProgressLinear, - UiRadio, - UiRadioGroup, - UiRippleInk, - UiSelect, - UiSlider, - UiSnackbar, - UiSnackbarContainer, - UiSwitch, - UiTab, - UiTabs, - UiTextbox, - UiToolbar, - UiTooltip + UiAlert, + UiAutocomplete, + UiButton, + UiCalendar, + UiCheckbox, + UiCheckboxGroup, + UiCloseButton, + UiCollapsible, + UiConfirm, + UiDatepicker, + UiDatepickerCalendar, + UiFab, + UiFileupload, + UiIcon, + UiIconButton, + UiMenu, + UiModal, + UiPopover, + UiPreloader, + UiProgressCircular, + UiProgressLinear, + UiRadio, + UiRadioGroup, + UiRippleInk, + UiSelect, + UiSlider, + UiSnackbar, + UiSnackbarContainer, + UiSwitch, + UiTab, + UiTabs, + UiTextbox, + UiToolbar, + UiTooltip, }; KeenUI.install = function (app, config = {}) { - // Configure the component props - Object.keys(config).forEach(key => { - if (startsWith(key, 'Ui')) { - if (KeenUI[key] === undefined) { - return; - } + // Configure the component props + Object.keys(config).forEach((key) => { + if (startsWith(key, "Ui")) { + if (KeenUI[key] === undefined) { + return; + } - const Component = KeenUI[key]; - const props = config[key]; + const Component = KeenUI[key]; + const props = config[key]; - configure(Component, props); - } - }); + configure(Component, props); + } + }); - // Install the components - Object.keys(KeenUI).forEach(key => { - if (startsWith(key, 'Ui')) { - const Component = KeenUI[key]; - app.component(Component.name, Component); - } - }); + // Install the components + Object.keys(KeenUI).forEach((key) => { + if (startsWith(key, "Ui")) { + const Component = KeenUI[key]; + app.component(Component.name, Component); + } + }); }; // Make Keen UI available globally when in a browser environment -if (typeof window !== 'undefined') { - window.KeenUI = KeenUI; +if (typeof window !== "undefined") { + window.KeenUI = KeenUI; } export default KeenUI; export { - UiAlert, - UiAutocomplete, - UiButton, - UiCalendar, - UiCheckbox, - UiCheckboxGroup, - UiCloseButton, - UiCollapsible, - UiConfirm, - UiDatepicker, - UiDatepickerCalendar, - UiFab, - UiFileupload, - UiIcon, - UiIconButton, - UiMenu, - UiModal, - UiPopover, - UiPreloader, - UiProgressCircular, - UiProgressLinear, - UiRadio, - UiRadioGroup, - UiRippleInk, - UiSelect, - UiSlider, - UiSnackbar, - UiSnackbarContainer, - UiSwitch, - UiTab, - UiTabs, - UiTextbox, - UiToolbar, - UiTooltip + UiAlert, + UiAutocomplete, + UiButton, + UiCalendar, + UiCheckbox, + UiCheckboxGroup, + UiCloseButton, + UiCollapsible, + UiConfirm, + UiDatepicker, + UiDatepickerCalendar, + UiFab, + UiFileupload, + UiIcon, + UiIconButton, + UiMenu, + UiModal, + UiPopover, + UiPreloader, + UiProgressCircular, + UiProgressLinear, + UiRadio, + UiRadioGroup, + UiRippleInk, + UiSelect, + UiSlider, + UiSnackbar, + UiSnackbarContainer, + UiSwitch, + UiTab, + UiTabs, + UiTextbox, + UiToolbar, + UiTooltip, }; diff --git a/src/render.js b/src/render.js index f962fafe..35708688 100644 --- a/src/render.js +++ b/src/render.js @@ -1,9 +1,9 @@ -import { h } from 'vue'; +import { h } from "vue"; -const UiRender = props => { - return h('div', { class: 'ui-render' }, props.nodes); +const UiRender = (props) => { + return h("div", { class: "ui-render" }, props.nodes); }; -UiRender.props = ['nodes']; +UiRender.props = ["nodes"]; export default UiRender;