vuetify eingebunden + erster Versuch Combobox
This commit is contained in:
+43
@@ -0,0 +1,43 @@
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
// Mixins
|
||||
import { factory as GroupableFactory } from '../../mixins/groupable';
|
||||
// Utilities
|
||||
import mixins from '../../util/mixins';
|
||||
import { consoleWarn } from '../../util/console';
|
||||
export default mixins(GroupableFactory('itemGroup', 'v-item', 'v-item-group')
|
||||
/* @vue/component */
|
||||
).extend({
|
||||
name: 'v-item',
|
||||
props: {
|
||||
value: {
|
||||
required: false
|
||||
}
|
||||
},
|
||||
render: function render() {
|
||||
if (!this.$scopedSlots.default) {
|
||||
consoleWarn('v-item is missing a default scopedSlot', this);
|
||||
return null;
|
||||
}
|
||||
var element = void 0;
|
||||
/* istanbul ignore else */
|
||||
if (this.$scopedSlots.default) {
|
||||
element = this.$scopedSlots.default({
|
||||
active: this.isActive,
|
||||
toggle: this.toggle
|
||||
});
|
||||
}
|
||||
if (Array.isArray(element) && element.length === 1) {
|
||||
element = element[0];
|
||||
}
|
||||
if (!element || Array.isArray(element) || !element.tag) {
|
||||
consoleWarn('v-item should only contain a single element', this);
|
||||
return element;
|
||||
}
|
||||
element.data = this._b(element.data || {}, element.tag, {
|
||||
class: _defineProperty({}, this.activeClass, this.isActive)
|
||||
});
|
||||
return element;
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VItem.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/VItemGroup/VItem.ts"],"names":[],"mappings":";;;AACA,SAAS,WAAW,gBAApB,QAA4C,wBAA5C;AAEA;AACA,OAAO,MAAP,MAAmB,mBAAnB;AACA,SAAS,WAAT,QAA4B,oBAA5B;AAKA,eAAe,OACb,iBAAiB,WAAjB,EAA8B,QAA9B,EAAwC,cAAxC;AACA;AAFa,EAGb,MAHa,CAGN;AACP,UAAM,QADC;AAGP,WAAO;AACL,eAAO;AACL,sBAAU;AADL;AADF,KAHA;AASP,UATO,oBASD;AACJ,YAAI,CAAC,KAAK,YAAL,CAAkB,OAAvB,EAAgC;AAC9B,wBAAY,wCAAZ,EAAsD,IAAtD;AAEA,mBAAO,IAAP;AACD;AAED,YAAI,gBAAJ;AAEA;AACA,YAAI,KAAK,YAAL,CAAkB,OAAtB,EAA+B;AAC7B,sBAAU,KAAK,YAAL,CAAkB,OAAlB,CAA0B;AAClC,wBAAQ,KAAK,QADqB;AAElC,wBAAQ,KAAK;AAFqB,aAA1B,CAAV;AAID;AAED,YAAI,MAAM,OAAN,CAAc,OAAd,KAA0B,QAAQ,MAAR,KAAmB,CAAjD,EAAoD;AAClD,sBAAU,QAAQ,CAAR,CAAV;AACD;AAED,YAAI,CAAC,OAAD,IAAY,MAAM,OAAN,CAAc,OAAd,CAAZ,IAAsC,CAAC,QAAQ,GAAnD,EAAwD;AACtD,wBAAY,6CAAZ,EAA2D,IAA3D;AAEA,mBAAO,OAAP;AACD;AAED,gBAAQ,IAAR,GAAe,KAAK,EAAL,CAAQ,QAAQ,IAAR,IAAgB,EAAxB,EAA4B,QAAQ,GAApC,EAA0C;AACvD,uCAAU,KAAK,WAAf,EAA6B,KAAK,QAAlC;AADuD,SAA1C,CAAf;AAIA,eAAO,OAAP;AACD;AAzCM,CAHM,CAAf","sourcesContent":["// Mixins\nimport { factory as GroupableFactory } from '../../mixins/groupable'\n\n// Utilities\nimport mixins from '../../util/mixins'\nimport { consoleWarn } from '../../util/console'\n\n// Types\nimport { VNode, ScopedSlotChildren } from 'vue/types/vnode'\n\nexport default mixins(\n GroupableFactory('itemGroup', 'v-item', 'v-item-group')\n /* @vue/component */\n).extend({\n name: 'v-item',\n\n props: {\n value: {\n required: false\n }\n },\n\n render (): VNode {\n if (!this.$scopedSlots.default) {\n consoleWarn('v-item is missing a default scopedSlot', this)\n\n return null as any\n }\n\n let element: VNode | ScopedSlotChildren\n\n /* istanbul ignore else */\n if (this.$scopedSlots.default) {\n element = this.$scopedSlots.default({\n active: this.isActive,\n toggle: this.toggle\n })\n }\n\n if (Array.isArray(element) && element.length === 1) {\n element = element[0]\n }\n\n if (!element || Array.isArray(element) || !element.tag) {\n consoleWarn('v-item should only contain a single element', this)\n\n return element as any\n }\n\n element.data = this._b(element.data || {}, element.tag!, {\n class: { [this.activeClass]: this.isActive }\n })\n\n return element\n }\n})\n"],"sourceRoot":""}
|
||||
+190
@@ -0,0 +1,190 @@
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
// Styles
|
||||
import '../../../src/stylus/components/_item-group.styl';
|
||||
import Proxyable from '../../mixins/proxyable';
|
||||
import Themeable from '../../mixins/themeable';
|
||||
// Utilities
|
||||
import mixins from '../../util/mixins';
|
||||
import { consoleWarn } from '../../util/console';
|
||||
export var BaseItemGroup = mixins(Proxyable, Themeable).extend({
|
||||
name: 'base-item-group',
|
||||
props: {
|
||||
activeClass: {
|
||||
type: String,
|
||||
default: 'v-item--active'
|
||||
},
|
||||
mandatory: Boolean,
|
||||
max: {
|
||||
type: [Number, String],
|
||||
default: null
|
||||
},
|
||||
multiple: Boolean
|
||||
},
|
||||
data: function data() {
|
||||
return {
|
||||
// As long as a value is defined, show it
|
||||
// Otherwise, check if multiple
|
||||
// to determine which default to provide
|
||||
internalLazyValue: this.value !== undefined ? this.value : this.multiple ? [] : undefined,
|
||||
items: []
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
classes: function classes() {
|
||||
return _extends({}, this.themeClasses);
|
||||
},
|
||||
selectedItems: function selectedItems() {
|
||||
var _this = this;
|
||||
|
||||
return this.items.filter(function (item, index) {
|
||||
return _this.toggleMethod(_this.getValue(item, index));
|
||||
});
|
||||
},
|
||||
selectedValues: function selectedValues() {
|
||||
return Array.isArray(this.internalValue) ? this.internalValue : [this.internalValue];
|
||||
},
|
||||
toggleMethod: function toggleMethod() {
|
||||
var _this2 = this;
|
||||
|
||||
if (!this.multiple) {
|
||||
return function (v) {
|
||||
return _this2.internalValue === v;
|
||||
};
|
||||
}
|
||||
var internalValue = this.internalValue;
|
||||
if (Array.isArray(internalValue)) {
|
||||
return function (v) {
|
||||
return internalValue.includes(v);
|
||||
};
|
||||
}
|
||||
return function () {
|
||||
return false;
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
internalValue: function internalValue() {
|
||||
// https://github.com/vuetifyjs/vuetify/issues/5352
|
||||
this.$nextTick(this.updateItemsState);
|
||||
}
|
||||
},
|
||||
created: function created() {
|
||||
if (this.multiple && !Array.isArray(this.internalValue)) {
|
||||
consoleWarn('Model must be bound to an array if the multiple property is true.', this);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getValue: function getValue(item, i) {
|
||||
return item.value == null || item.value === '' ? i : item.value;
|
||||
},
|
||||
onClick: function onClick(item, index) {
|
||||
this.updateInternalValue(this.getValue(item, index));
|
||||
},
|
||||
register: function register(item) {
|
||||
var _this3 = this;
|
||||
|
||||
var index = this.items.push(item) - 1;
|
||||
item.$on('change', function () {
|
||||
return _this3.onClick(item, index);
|
||||
});
|
||||
// If no value provided and mandatory,
|
||||
// assign first registered item
|
||||
if (this.mandatory && this.internalLazyValue == null) {
|
||||
this.updateMandatory();
|
||||
}
|
||||
this.updateItem(item, index);
|
||||
},
|
||||
unregister: function unregister(item) {
|
||||
if (this._isDestroyed) return;
|
||||
var index = this.items.indexOf(item);
|
||||
var value = this.getValue(item, index);
|
||||
this.items.splice(index, 1);
|
||||
var valueIndex = this.selectedValues.indexOf(value);
|
||||
// Items is not selected, do nothing
|
||||
if (valueIndex < 0) return;
|
||||
// If not mandatory, use regular update process
|
||||
if (!this.mandatory) {
|
||||
return this.updateInternalValue(value);
|
||||
}
|
||||
// Remove the value
|
||||
if (this.multiple && Array.isArray(this.internalValue)) {
|
||||
this.internalValue = this.internalValue.filter(function (v) {
|
||||
return v !== value;
|
||||
});
|
||||
} else {
|
||||
this.internalValue = undefined;
|
||||
}
|
||||
// If mandatory and we have no selection
|
||||
// add the last item as value
|
||||
/* istanbul ignore else */
|
||||
if (!this.selectedItems.length) {
|
||||
this.updateMandatory(true);
|
||||
}
|
||||
},
|
||||
updateItem: function updateItem(item, index) {
|
||||
var value = this.getValue(item, index);
|
||||
item.isActive = this.toggleMethod(value);
|
||||
},
|
||||
updateItemsState: function updateItemsState() {
|
||||
if (this.mandatory && !this.selectedItems.length) {
|
||||
return this.updateMandatory();
|
||||
}
|
||||
// TODO: Make this smarter so it
|
||||
// doesn't have to iterate every
|
||||
// child in an update
|
||||
this.items.forEach(this.updateItem);
|
||||
},
|
||||
updateInternalValue: function updateInternalValue(value) {
|
||||
this.multiple ? this.updateMultiple(value) : this.updateSingle(value);
|
||||
},
|
||||
updateMandatory: function updateMandatory(last) {
|
||||
if (!this.items.length) return;
|
||||
var index = last ? this.items.length - 1 : 0;
|
||||
this.updateInternalValue(this.getValue(this.items[index], index));
|
||||
},
|
||||
updateMultiple: function updateMultiple(value) {
|
||||
var defaultValue = Array.isArray(this.internalValue) ? this.internalValue : [];
|
||||
var internalValue = defaultValue.slice();
|
||||
var index = internalValue.findIndex(function (val) {
|
||||
return val === value;
|
||||
});
|
||||
if (this.mandatory &&
|
||||
// Item already exists
|
||||
index > -1 &&
|
||||
// value would be reduced below min
|
||||
internalValue.length - 1 < 1) return;
|
||||
if (
|
||||
// Max is set
|
||||
this.max != null &&
|
||||
// Item doesn't exist
|
||||
index < 0 &&
|
||||
// value would be increased above max
|
||||
internalValue.length + 1 > this.max) return;
|
||||
index > -1 ? internalValue.splice(index, 1) : internalValue.push(value);
|
||||
this.internalValue = internalValue;
|
||||
},
|
||||
updateSingle: function updateSingle(value) {
|
||||
var isSame = value === this.internalValue;
|
||||
if (this.mandatory && isSame) return;
|
||||
this.internalValue = isSame ? undefined : value;
|
||||
}
|
||||
},
|
||||
render: function render(h) {
|
||||
return h('div', {
|
||||
staticClass: 'v-item-group',
|
||||
class: this.classes
|
||||
}, this.$slots.default);
|
||||
}
|
||||
});
|
||||
export default BaseItemGroup.extend({
|
||||
name: 'v-item-group',
|
||||
provide: function provide() {
|
||||
return {
|
||||
itemGroup: this
|
||||
};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VItemGroup.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+10
@@ -0,0 +1,10 @@
|
||||
import VItem from './VItem';
|
||||
import VItemGroup from './VItemGroup';
|
||||
export { VItem, VItemGroup };
|
||||
export default {
|
||||
$_vuetify_subcomponents: {
|
||||
VItem: VItem,
|
||||
VItemGroup: VItemGroup
|
||||
}
|
||||
};
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/VItemGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAP,MAAkB,SAAlB;AACA,OAAO,UAAP,MAAuB,cAAvB;AAEA,SACE,KADF,EAEE,UAFF;AAKA,eAAe;AACb,6BAAyB;AACvB,oBADuB;AAEvB;AAFuB;AADZ,CAAf","sourcesContent":["import VItem from './VItem'\nimport VItemGroup from './VItemGroup'\n\nexport {\n VItem,\n VItemGroup\n}\n\nexport default {\n $_vuetify_subcomponents: {\n VItem,\n VItemGroup\n }\n}\n"],"sourceRoot":""}
|
||||
Reference in New Issue
Block a user