From 831f93797a4044b71ad9747c8f87051d34370d7c Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Fri, 7 Apr 2017 20:26:24 +0430 Subject: [PATCH 01/14] Add back id prop to form --- lib/mixins/form.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/lib/mixins/form.js b/lib/mixins/form.js index a7b8a1dd783..60eaa93fa52 100755 --- a/lib/mixins/form.js +++ b/lib/mixins/form.js @@ -26,6 +26,9 @@ export default { }, size: { type: String + }, + id: { + type: String } } }; From 930cc098f177e65f60f6d44147d1798010664755 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Fri, 7 Apr 2017 20:27:50 +0430 Subject: [PATCH 02/14] fix hljs padding --- docs/nuxt/assets/css/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/nuxt/assets/css/styles.css b/docs/nuxt/assets/css/styles.css index 8653523348e..28dce281cdb 100644 --- a/docs/nuxt/assets/css/styles.css +++ b/docs/nuxt/assets/css/styles.css @@ -4,7 +4,7 @@ position: relative; background-color: #f9f9f9; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125); - padding: 0 0 1em 1em; + padding: 1em 1em 1em 1em; margin-bottom: 1em; } From 966077d9af4c8aeb02c6692a9aaa0db752a091ab Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Fri, 7 Apr 2017 23:01:11 +0430 Subject: [PATCH 03/14] [WIP] Better tables --- docs/components/table/README.md | 4 +- lib/components/table.vue | 103 ++++---------------------------- lib/utils/base-adapter.js | 90 ++++++++++++++++++++++++++++ lib/utils/local-adapter.js | 31 ++++++++++ 4 files changed, 135 insertions(+), 93 deletions(-) create mode 100755 lib/utils/base-adapter.js create mode 100755 lib/utils/local-adapter.js diff --git a/docs/components/table/README.md b/docs/components/table/README.md index 2eb19eac3aa..de371897ef1 100755 --- a/docs/components/table/README.md +++ b/docs/components/table/README.md @@ -2,7 +2,7 @@ > For tabular data. Tables support pagination and custom rendering. -### `fields` +### Fields Fields prop is used to display table columns. keys are used to extract real value from each raw. Example format: @@ -17,7 +17,7 @@ age: { } ``` -### `items` +### Items Items are real table data records. Example format: ```js diff --git a/lib/components/table.vue b/lib/components/table.vue index bd1d8bece8c..c9f8800eeec 100644 --- a/lib/components/table.vue +++ b/lib/components/table.vue @@ -6,11 +6,12 @@ :class="[field.sortable?'sorting':null,sortBy===key?'sorting_'+(sortDesc?'desc':'asc'):'',field.class?field.class:null]" v-for="field,key in fields" v-html="field.label" + :key="key" > - + {{item[key]}} @@ -20,42 +21,25 @@ ``` -## Build variants +## Build variants Choosing the best variant for your build environment / packager helps less bundle sizes. If your bundler supports es modules, it will automatically prefer it over commonjs. @@ -57,3 +57,10 @@ Variant | Environments | Package path **ES Module** | Webpack 2 / Rollup | `dist/bootstrap-vue.esm.js` commonjs2 | Webpack 1 / ... | `dist/bootstrap-vue.common.js` UMD | Browser | `dist/bootstrap-vue.js` + +## Migrating a project already using Bootstrap +If you've already been using Bootstrap 4, there are a couple adjustments you may need to make to your project: + +- remove the bootstrap.js file from your page scripts or build pipeline +- if Bootstrap is the only thing relying on jQuery, you can safely remove it—bootstrap-vue **does not** depend on jQuery +- don't forget to include the `bootstrap-vue.css` file! From d0ffd9c5e1a213b1c7ca46d99229d8380b72d555 Mon Sep 17 00:00:00 2001 From: Alex Regan Date: Sun, 30 Apr 2017 08:56:29 -0700 Subject: [PATCH 05/14] add bFormFieldset label text alignment options --- lib/components/form-fieldset.vue | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/lib/components/form-fieldset.vue b/lib/components/form-fieldset.vue index 1f7c7310e29..88991eac902 100644 --- a/lib/components/form-fieldset.vue +++ b/lib/components/form-fieldset.vue @@ -2,7 +2,7 @@
@@ -35,6 +35,17 @@ labelLayout() { return this.horizontal ? ('col-sm-' + this.labelSize) : 'col-12'; }, + labelAlignClass() { + switch (this.labelTextAlign.toLowerCase()) { + case 'center': + return 'text-center'; + case 'right': + return 'text-right'; + case 'left': + default: + return 'text-left'; + } + }, inputLayout() { return this.horizontal ? ('col-sm-' + (12 - this.labelSize)) : 'col-12'; } @@ -68,6 +79,11 @@ type: Number, default: 3 }, + labelTextAlign: { + type: String, + required: false, + default: 'left' + }, label: { type: String, default: null From 59f5b2a09326f8ce17a8c43218f84d1f7d398e87 Mon Sep 17 00:00:00 2001 From: Alex Regan Date: Sun, 30 Apr 2017 12:01:31 -0700 Subject: [PATCH 06/14] fixes per @pi0 --- lib/components/form-fieldset.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/components/form-fieldset.vue b/lib/components/form-fieldset.vue index 88991eac902..d13d79a2bf0 100644 --- a/lib/components/form-fieldset.vue +++ b/lib/components/form-fieldset.vue @@ -43,7 +43,7 @@ return 'text-right'; case 'left': default: - return 'text-left'; + return null; } }, inputLayout() { @@ -82,7 +82,7 @@ labelTextAlign: { type: String, required: false, - default: 'left' + default: null }, label: { type: String, From 3bd489cac3fd2102862fb67d9268085ca73abd9e Mon Sep 17 00:00:00 2001 From: Alex Regan Date: Sun, 30 Apr 2017 16:42:22 -0700 Subject: [PATCH 07/14] add focus method proxied to element ref --- lib/components/form-input.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/lib/components/form-input.vue b/lib/components/form-input.vue index 17c3e24afaa..2973be6f24d 100755 --- a/lib/components/form-input.vue +++ b/lib/components/form-input.vue @@ -63,6 +63,9 @@ }, onKeyUp(e) { this.$emit('keyup', e); + }, + focus() { + this.$refs.input.focus() } }, props: { From fd91ee22af60079c66ac6d19741a7a9be8015d82 Mon Sep 17 00:00:00 2001 From: Alex Regan Date: Tue, 16 May 2017 16:17:29 -0700 Subject: [PATCH 08/14] Popover dom node leak fix --- lib/components/form-input.vue | 2 +- lib/components/popover.vue | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/lib/components/form-input.vue b/lib/components/form-input.vue index 2973be6f24d..ac2e5568ab0 100755 --- a/lib/components/form-input.vue +++ b/lib/components/form-input.vue @@ -65,7 +65,7 @@ this.$emit('keyup', e); }, focus() { - this.$refs.input.focus() + this.$refs.input.focus(); } }, props: { diff --git a/lib/components/popover.vue b/lib/components/popover.vue index 836f0b674d1..4453a7dc2c2 100755 --- a/lib/components/popover.vue +++ b/lib/components/popover.vue @@ -450,6 +450,13 @@ this.normalizedTriggers.forEach(item => this.removeListener(item)); clearTimeout(this._timeout); this.destroyTether(); + }, + + destroyed() { + // Tether is moving the popover element outside of Vue's control and leaking dom nodes + if (this._popover.parentElement === document.body) { + document.body.removeChild(this._popover); + } } }; From 41910865f6dd223615eba98ef37ae03fbf0a8904 Mon Sep 17 00:00:00 2001 From: Alex Regan Date: Thu, 29 Jun 2017 13:25:05 -0700 Subject: [PATCH 09/14] feat(mixin): Automate event registration & removal on root vm --- lib/mixins/listen-on-root.js | 51 ++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 lib/mixins/listen-on-root.js diff --git a/lib/mixins/listen-on-root.js b/lib/mixins/listen-on-root.js new file mode 100644 index 00000000000..a4dc87dbaec --- /dev/null +++ b/lib/mixins/listen-on-root.js @@ -0,0 +1,51 @@ +/** + * Issue #569: collapse::toggle::state triggered too many times + * @link https://github.com/bootstrap-vue/bootstrap-vue/issues/569 + */ +export default { + data() { + return { + // This should not be altered by anything apart from this mixin. + bv_root_listeners: [] + } + }, + + methods: { + /** + * Safely register event listeners on the root Vue node. + * While Vue automatically removes listeners for individual components, + * when a component registers a listener on root and is destroyed, + * this orphans a callback because the node is gone, + * but the root does not clear the callback. + * @param {string} event + * @param {function} callback + * @chainable + */ + listenOnRoot(event, callback) { + this.bv_root_listeners.push({ event, callback }) + this.$root.$on(event, callback) + + return this + }, + + /** + * Convenience method for calling vm.$emit on vm.$root. + * @param {string} event + * @param {*} args + * @chainable + */ + emitOnRoot(event, ...args) { + this.$root.$emit(event, ...args) + + return this + } + }, + + destroyed() { + while (this.bv_root_listeners.length > 0) { + // shift to process in order + const { event, callback } = this.bv_root_listeners.shift() + this.$root.$off(event, callback) + } + } +} From 552806e0e4f79251764183e87e3c34f9d5585bad Mon Sep 17 00:00:00 2001 From: Alex Regan Date: Fri, 30 Jun 2017 10:58:54 -0700 Subject: [PATCH 10/14] fix(button-toolbar): Typo on property `keyNav` --- lib/components/button-toolbar.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/components/button-toolbar.vue b/lib/components/button-toolbar.vue index b2b9a5f265e..9447cd2d3fc 100644 --- a/lib/components/button-toolbar.vue +++ b/lib/components/button-toolbar.vue @@ -39,7 +39,7 @@ type: Boolean, default: false }, - KeyNav: { + keyNav: { type: Boolean, default: false } From 2afa15c4baf601f3a8128e956a0fb72d4d9ea40c Mon Sep 17 00:00:00 2001 From: Alex Regan Date: Tue, 11 Jul 2017 14:51:39 -0700 Subject: [PATCH 11/14] fix(root-listeners): apply listen-on-root mixin to other components --- lib/components/table.vue | 8 +++++--- lib/mixins/dropdown.js | 12 +++++++----- lib/mixins/popover.js | 8 +++++--- 3 files changed, 17 insertions(+), 11 deletions(-) diff --git a/lib/components/table.vue b/lib/components/table.vue index f8f881da65e..78c242f7293 100644 --- a/lib/components/table.vue +++ b/lib/components/table.vue @@ -75,7 +75,8 @@ + + +``` + +### `fields` prop +The `fields` prop is used to display table columns. +Keys are used to extract real value from each row. Example format: ```js -name: { - label: 'Person Full name', - sortable: true -}, -age: { - label: 'Person age', - sortable: false +{ + name: { + label: 'Person Full name', + sortable: true + }, + age: { + label: 'Person age', + sortable: false + } } ``` +Supported field properties: + +| Property | Type | Description +| ---------| ---- | ----------- +| `label` | String | Appears in the columns table header (and footer if `foot-clone` is set) +| `sortable` | Boolean | Enable sorting on this column +| `variant` | String | Apply contextual class to the `` **and** `` in the column column (`active`, `success`, `info`, `warning`, `danger`) +| `class` | String or Array | Class name (or array of class names) to add to `` **and** `` in the column +| `thClass` | String or Array | Class name (or array of class names) to add to header/footer `` cell +| `tdClass` | String or Array | Class name (or array of class names) to add to data `` cells in the column +| `thStyle` | Object | JavaScript object representing CSS styles you would like to apply to the table field `` + +*Field properties, if not present, default to null* + +For information on the syntax supported by `thStyle`, see +[Class and Style Bindings](https://vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles) +in the Vue.js guide. -### Items -Items are real table data records. Example format: + +### `items` Prop +`items` are real table data record objects in array format. Example format: ```js [ { - isActive: false, // Adds special bootstrap styles - state: 'success', // Displays record green + _rowVariant: 'success', // Displays record row green age: 27, name: 'Havij' + }, + { + _cellVariants: { + age: 'danger', // Displayes cell for field 'age' red + name: 'success' // Displayes cell for field 'name' green + }, + age: 42, + name: 'Robert' } ] ``` - -### Custom rendering -Custom rendering for each field is possible using **scoped slots**. -If you want to add an extra field which does not exits on records, just add it to `fields` array. Example: - + +Supported optional item record modifier properties (make sure your field keys do not conflict with these names): + +| Property | Type | Description +| ---------| ---- | ----------- +| `_rowVariant` | String | Bootstrap contextual state applied to row (`active`, `success`, `info`, `warning`, `danger`) +| `_cellVariants` | Object | Bootstrap contextual state applied to individual cells. Keyed by field (`active`, `success`, `info`, `warning`, `danger`) +| `state` | String | **deprecated** in favour of `_rowVariant` + +**Note** `state` is deprecated. The property `_rowVariant`, if present in +the record, will be prefered. + +`items` can also be a reference to a *provider* function, which returns an `Array` of items data. +Provider functions can also be asynchronous: +- By returning `null` (or `undefined`) and calling a callback, when the data is +ready, with the data array as the only argument to the callback, +- By returning a `Promise` that resolves to an array. + +See the **"Using Items Provider functions"** section below for more details. + +### Table Options + +`` provides several props to alter the style of the table: + +| prop | Description +| ---- | ----------- +| `striped` | Add zebra-striping to the table rows within the `` +| `bordered` | For borders on all sides of the table and cells. +| `inverse` | Invert the colors — with light text on dark backgrounds +| `small` | To make tables more compact by cutting cell padding in half. +| `hover` | To enable a hover state on table rows within a `` +| `responsive` | Create responsive table to make it scroll horizontally on small devices (under 768px) +| `foot-clone` | Turns on the table footer, and defaults with the same contents a the table header +| `head-variant` | Use `default` or `inverse` to make `` appear light or dark gray, respectively +| `foot-variant` | Use `default` or `inverse` to make `` appear light or dark gray, respectively. Has no effect if `foot-clone` is not set +| `busy` | If set to `true` will make the table opaque and disable click events. Handy when using items provider functions. +| `show-empty` | If `true`, Show a message if no records can be displayed (see `empty-text` and `empty-filter-text`) +| `empty-text` | Text to display if there are no records in the original `items` array. You can also use the named slot `empty` to set the content for `empty-text` +| `empty-filtered-text` | Text to display if there are no records in the **filtered** `items` array. You can also use the named slot `emptyfiltered` to set the content for `empty-filtered-text` + + +### Custom Data Rendering +Custom rendering for each data field in a row is possible using +[scoped slots](http://vuejs.org/v2/guide/components.html#Scoped-Slots). +If you want to add an extra field which does not exist in the records, +just add it to the `fields` array. Example: + +```js + fields: { + index: { + // A virtual column + label: 'Index' + }, + name: { + // A column that needs custom formatting + label: 'Full Name' + }, + sex: { + // A regular column + label: 'Sex' + }, + nameage: { + // A virtual column + label: 'First name and age' + } + }, + items: [ + { + name: { first: 'John', last: 'Doe' }, + sex: 'Male', + age: 42 + }, + { + name: { first: 'Jane', last: 'Doe' }, + sex: 'Female', + age: 36 + } + ] +``` + ```html - + + + + + +``` + +will render a table like so: + +| Index | Full Name | Sex | First name and age +| ----- | --------- | --- | ------------------ +| 1 | John Doe | Male | John is 42 years old +| 2 | Jane Doe | Female | Jane is 36 years old + + +The slot's scope variable (`data` in the above sample) will have the following properties: + +| Property | Type | Description +| -------- | ---- | ----------- +| `value` | Any | The value for this key in the record (`null` or `undefined` if a virtual column) +| `item` | Object | The entire record (i.e. `items[index]`) for this row +| `index` | Number | The row number (zero based) + +**Note** that `index` will not always be the actual row's index number, as it is +computed after pagination and filtering have been applied to the original +table data. The `index` value will refer to the **displayed row number**. This +number will align with the indexes from the optional `v-model` bound variable. + + +### Header/Footer Custom Rendering +It is also possible to provide custom rendering for the tables `thead` and +`tfoot` elements. Note by default the table footer is not rendered unless +`foot-clone` is set to `true`. + +Scoped slots for the header and footer cells uses a special naming +convetion of `HEAD_` and `FOOT_` respectivly. if a `FOOT_` +slot for a field is not provided, but a `HEAD_` slot is provided, then +the footer will use the `HEAD_` slot content. + +```html + + + + + ``` +The slot's scope variable (`data` in the above example) will have the following properties: + +| Property | Type | Description +| -------- | ---- | ----------- +| `label` | String | The fileds label value (also available as `data.field.label`) +| `column` | String | The fields's `key` value +| `field` | Object | the field's object (from the `fields` prop) + + +### `v-model` Binding +If you bind a variable to the `v-model` prop, the contents of this variable will +be the currently disaplyed item records (zero based index, up to `page-size` - 1). +This variable (the `value` prop) should usually be treated as readonly. + +The records within the v-model are a filtered/paginated shallow copy of `items`, and +hence any changes to a record's properties in the v-model will be reflected in +the original `items` array (except when `items` is set to a provider function). +Deleteing a record from the v-model will **not** remove the record from the +original items array. + +**Note:** Do not bind any value directly to the `value` prop. Use the `v-model` binding. + +### Filtering +Filtering, when used, is aplied to the original items array data, and hence it is not +possible to filter data based on custom rendering of virtual columns. The items row data +is stringified and the filter searches that stringified data (excluding any properties +that begin with an underscore (`_`) and the deprecated property `state`. + +The `filter` can be a string, a `RegExp` or a `function` reference. If a function +is provided, the first argument is the original item record data object. The +function should return `true` if the record matches your criteria or `false` if +the record is to be filtered out. + +When local filtering is applied, and the resultant number of items change, `` +will emit the `filtered` event, passing a single argument which is the complete list of +items passing the filter routine. Treat this argument as read-only. + +### Sorting +The built-in default `sort-compare` function sorts the specified field `key` based +on the data in the underlying record object. The field value is first stringified +if it is an object, and then sorted. + +The default `sort-compare` routine **cannot** sort neither virtual columns, nor +based on the custom rendering of the field data (which is used only for presentation). +For this reason, you can provide your own custom sort compare routine by passing a +function reference to the prop `sort-compare`. + +The `sort-compare` routine is passed three arguments. The first two arguments +(`a` and `b`) are the record objects for the rows being compared, and the third +argument is the field `key` being sorted on. The routine should return +either `-1`, `0`, or `1` based on the result of the comparing of the two records. + +The default sort-compare routine works as follows: + +```js +if (typeof a[key] === 'number' && typeof b[key] === 'number') { + // If both compared fields are native numbers + if (a[key] < b[key]) { + return -1; + } else if (a[key] > b[key]) { + return 1; + } + return 0; +} else { + // Strinify the field data and use String.localeCompare + return toString(a[key]).localeCompare(toString(b[key]), undefined, { + numeric: true + }); +} +``` + +### Using Items Provider Functions +As mentioned under the `items` prop section, it is possible to use a function to provide +the row data (items), by specifying a function reference via the `items` prop. + +**Note:** The `items-provider` prop has been deprecated in favour of providing a function +reference to the `items` prop. A console warning will be issued if `items-provider` is used. + +The provider function is called with the following signature: + +```js + provider(ctx, [callback]) +``` + +The `ctx` is the context object associated with the table state, and contains the +following five properties: + +| Property | Type | Description +| -------- | ---- | ----------- +| `currentPage` | Number | The current page number (starting from 1, the value of the `current-page` prop) +| `perPage` | Number | The maximum number of rows per page to display (the value of the `per-page` prop) +| `filter` | String or RegExp or Function | the value of the `Filter` prop +| `sortBy` | String | The current column key being sorted, or `null` if not sorting +| `sortDesc` | Boolean | The current sort direction (`true` for descending, `false` for ascending) + +The second argument `callback` is an optional parameter for when using the callback asynchronous method. + +**Example 1: returning an array of data (synchronous):** +```js +function myProvider(ctx) { + let items = []; + + // perform any items processing needed + + // Must return an array + return items || []; +} +``` + +**Example 2: Using callback to return data (asynchronous):** +```js +function myProvider(ctx, callback) { + let params = '?page=' + ctx.currentPage + '&size=' + ctx.perPage; + + this.fetchData('/some/url' + params).then((data) => { + // Pluck the array of items off our axios response + let items = data.items; + // Provide the array of items to the callabck + callback(items); + }) + + // Must return null or undefined + return null; +} +``` + +**Example 3: Using a Promise to return data (asynchronous):** +```js +function myProvider(ctx) { + let promise = axios.get('/some/url?page=' + ctx.currentPage + '&size=' + ctx.perPage); + + // Must return a promise that resolves to an array of items + return promise.then((data) => { + // Pluck the array of items off our axios response + let items = data.items; + // Must return an array of items + return(items); + }); +} +``` + +`` provides a `busy` prop that will flag the table as busy, which you can +set to `true` just before your async fetch, and then set it to `false` once you have +your data, and just before you send it to the table for display. Example: + +```html + + +``` +```js +data () { + return { + isBusy = false + }; +} +methods: { + myProvider(ctx) { + this.isBusy = true + let promise = axios.get('/some/url'); + + return promise.then((data) => { + const items = data.items; + this.isBusy = false + return(items); + }); + } + } +``` + +By default, the items provider function is responsible for **all paging, filtering, and sorting** +of the data, before passing it to `b-table` for display. + +You can disable provider paging, filtering, and sorting (individually) by setting the +following `b-table` prop(s) to `true`: + +| Prop | Type | Default | Description +| ---- | ---- | ------- | ----------- +| `no-provider-paging` | Boolean | `false` | When `true` enables the use of `b-table` local data pagination +| `no-provider-sorting` | Boolean | `false` | When `true` enables the use of `b-table` local sorting +| `no-provider-filtering` | Boolean | `false` |When `true` enables the use of `b-table` local filtering + +When `no-provider-paging` is `false` (default), you should only return at +maximum, `perPage` number of records. + +Note that `` needs reference to your pagination and filtering values in order to +trigger the calling of the provider function. So be sure to bind to the `per-page`, +`current-page` and `filter` props on `b-table` to trigger the provider update function call +(unless you have the respective `no-provider-*` prop set to `true`). + +#### Event based refreshing of data: +You may also trigger the refresh of the provider function by emitting the +event `table::refresh` on `$root` with the single argument being the `id` of your `b-table`. +You must have a unique ID on your table for this to work. + +```js + this.$root.$emit('table::refresh', 'my-table'); +``` + +Or by calling the refresh method on the table reference +```html + + +``` +```js + this.$refs.table.refresh(); +``` + +These refresh event/methods are only applicable when `items` is a provider function. + + +#### Detection of sorting change: +By listening on `` `sort-changed` event, you can detect when the sorting key +and direction have changed. + +```html + + +``` + +The `sort-changed` event provides a single argument of the table's current state context object. +This context object has the same format as used by items provider functions. + +```js +methods: { + sortingChanged(ctx) { + // ctx.sortBy ==> Field key for sorting by (or null for no sorting) + // ctx.sortDesc ==> true if sorting descending, false otherwise + } +} +``` + + +### Server Side Rendering +Special care must be taken when using server side rendering (SSR) and an `items` provider +function. Make sure you handle any special situations that may be needed server side +when fetching your data! + From d31a99e602cd827a855631ea940bbf983e9754d9 Mon Sep 17 00:00:00 2001 From: Alex Regan Date: Tue, 11 Jul 2017 14:58:55 -0700 Subject: [PATCH 13/14] fix(form): pull current master --- lib/mixins/form.js | 25 ++++--------------------- 1 file changed, 4 insertions(+), 21 deletions(-) diff --git a/lib/mixins/form.js b/lib/mixins/form.js index 60eaa93fa52..2fee6bef68d 100755 --- a/lib/mixins/form.js +++ b/lib/mixins/form.js @@ -1,34 +1,17 @@ export default { - computed: { - inputClass() { - return [ - this.size ? `form-control-${this.size}` : null, - this.state ? `form-control-${this.state}` : null - ]; - }, - custom() { - return !this.plain; - } - }, props: { name: { type: String }, + id: { + type: String + }, disabled: { type: Boolean }, - plain: { + required: { type: Boolean, default: false - }, - state: { - type: String - }, - size: { - type: String - }, - id: { - type: String } } }; From 1a5020d0d20d54ff6eb5cc11ac0f136d5ae0e1c7 Mon Sep 17 00:00:00 2001 From: Alex Regan Date: Tue, 11 Jul 2017 14:59:57 -0700 Subject: [PATCH 14/14] fix: remove adapter utils --- lib/utils/base-adapter.js | 90 -------------------------------------- lib/utils/local-adapter.js | 31 ------------- 2 files changed, 121 deletions(-) delete mode 100755 lib/utils/base-adapter.js delete mode 100755 lib/utils/local-adapter.js diff --git a/lib/utils/base-adapter.js b/lib/utils/base-adapter.js deleted file mode 100755 index 8ef6d97e686..00000000000 --- a/lib/utils/base-adapter.js +++ /dev/null @@ -1,90 +0,0 @@ -export default class BaseAdapter { - /** - * Base Table adapter - * @constructor - */ - constructor(options) { - this.options = options; - - this.sortDesc = false; - this.sortBy = null; - this.filter = null; - } - - getItems() { - return []; - } - - /** - * [Util] Returns string representation of a row - * @param v - * @returns String - */ - static stringValue(v) { - if (!v) { - return ''; - } - - if (v instanceof Object) { - return Object.keys(v).map(k => this.stringValue(v[k])).join(' '); - } - - return String(v); - } - - /** - * [Util] Compare rows a and b - * @param a - * @param b - * @returns {number} - */ - static sortCompare(a, b) { - return this.stringValue(a).localeCompare(this.stringValue(b), undefined, {numeric: true}); - } - - /** - * [Util] Applies regex filter - * @param items - * @param regex - */ - static regexFilter(items, regex) { - return items.filter(item => { - const test = regex.test(toString(item)); - regex.lastIndex = 0; - return test; - }); - } - - /** - * [Util] Applies general filtering - * @param items - */ - filterItems(items) { - if (!this.filter) { - return items; - } - - if (this.filter instanceof RegExp) { - return this.regexFilter(items, this.filter); - } - - const regex = new RegExp('.*' + this.filter + '.*', 'ig'); - return this.regexFilter(items, regex); - } - - /** - * Set SortBy field - * @param sortBy - */ - setSortBy(sortBy) { - this.sortBy = sortBy; - } - - /** - * toggle Sort Desc - */ - toggleSortDesc() { - this.sortDesc = !this.sortDesc; - } -} - diff --git a/lib/utils/local-adapter.js b/lib/utils/local-adapter.js deleted file mode 100755 index c9ee0501584..00000000000 --- a/lib/utils/local-adapter.js +++ /dev/null @@ -1,31 +0,0 @@ -import BaseAdapter from './base-adapter'; - -export default class LocalAdapter extends BaseAdapter { - /** - * Table adapter with all data in memory - * @constructor - */ - constructor(options) { - super(options); - } - - getItems() { - // Apply filter - let items = this.filterItems(this.items); - - // Apply Sort - if (this.sortBy) { - items = items.sort((a, b) => this.sortCompare(a[this.sortBy], b[this.sortBy]) * (this.sortDesc ? 1 : -1)); - } - - // Apply pagination - if (this.perPage) { - items = items.slice((this.currentPage - 1) * this.perPage, this.currentPage * this.perPage); - } - - return items; - } - - -} -