kdutify 0.16.9-rc.0 → 2.6.0

package/es5/components/KRadioGroup/KRadio.js

@@ -1,148 +1,190 @@
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+"use strict";
 
-import { KFadeTransition } from '../transitions';
-import KIcon from '../KIcon';
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-import Colorable from '../../mixins/colorable';
-import Rippleable from '../../mixins/rippleable';
-import TabFocusable from '../../mixins/tab-focusable';
-import Themeable from '../../mixins/themeable';
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 
-export default {
-  name: 'k-radio',
+require("..\\..\\..\\src\\components\\KRadioGroup\\KRadio.sass");
 
-  inheritAttrs: false,
+var _KLabel = _interopRequireDefault(require("../KLabel"));
 
-  inject: ['isMandatory', 'name', 'registerChild', 'unregisterChild'],
+var _KIcon = _interopRequireDefault(require("../KIcon"));
 
-  components: {
-    KFadeTransition: KFadeTransition,
-    KIcon: KIcon
-  },
+var _KInput = _interopRequireDefault(require("../KInput"));
+
+var _bindsAttrs = _interopRequireDefault(require("../../mixins/binds-attrs"));
+
+var _colorable = _interopRequireDefault(require("../../mixins/colorable"));
+
+var _groupable = require("../../mixins/groupable");
+
+var _rippleable = _interopRequireDefault(require("../../mixins/rippleable"));
+
+var _themeable = _interopRequireDefault(require("../../mixins/themeable"));
+
+var _selectable = _interopRequireWildcard(require("../../mixins/selectable"));
+
+var _helpers = require("../../util/helpers");
+
+var _mixins = _interopRequireDefault(require("../../util/mixins"));
+
+var _mergeData = require("../../util/mergeData");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-  mixins: [Colorable, Rippleable, TabFocusable, Themeable],
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+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; }
+
+var baseMixins = (0, _mixins.default)(_bindsAttrs.default, _colorable.default, _rippleable.default, (0, _groupable.factory)('radioGroup'), _themeable.default);
+/* @kdujs/component */
+
+var _default = baseMixins.extend().extend({
+  name: 'k-radio',
+  inheritAttrs: false,
   props: {
     disabled: Boolean,
-    value: null,
-    label: String
+    id: String,
+    label: String,
+    name: String,
+    offIcon: {
+      type: String,
+      default: '$radioOff'
+    },
+    onIcon: {
+      type: String,
+      default: '$radioOn'
+    },
+    readonly: Boolean,
+    value: {
+      default: null
+    }
   },
-
   data: function data() {
     return {
-      isActive: false
+      isFocused: false
     };
   },
-
-
   computed: {
     classes: function classes() {
-      return this.addTextColorClassChecks({
-        'input-group': true,
-        'input-group--active': this.isActive,
-        'input-group--disabled': this.disabled,
-        'input-group--selection-controls': true,
-        'input-group--tab-focused': this.tabFocused,
-        'radio': true,
-        'theme--dark': this.dark,
-        'theme--light': this.light
-      });
-    },
-    icon: function icon() {
-      return this.isActive ? 'radio_button_checked' : 'radio_button_unchecked';
+      return _objectSpread(_objectSpread({
+        'k-radio--is-disabled': this.isDisabled,
+        'k-radio--is-focused': this.isFocused
+      }, this.themeClasses), this.groupClasses);
+    },
+    computedColor: function computedColor() {
+      return _selectable.default.options.computed.computedColor.call(this);
+    },
+    computedIcon: function computedIcon() {
+      return this.isActive ? this.onIcon : this.offIcon;
+    },
+    computedId: function computedId() {
+      return _KInput.default.options.computed.computedId.call(this);
+    },
+    hasLabel: _KInput.default.options.computed.hasLabel,
+    hasState: function hasState() {
+      return (this.radioGroup || {}).hasState;
+    },
+    isDisabled: function isDisabled() {
+      return this.disabled || !!this.radioGroup && this.radioGroup.isDisabled;
+    },
+    isReadonly: function isReadonly() {
+      return this.readonly || !!this.radioGroup && this.radioGroup.isReadonly;
+    },
+    computedName: function computedName() {
+      if (this.name || !this.radioGroup) {
+        return this.name;
+      }
+
+      return this.radioGroup.name || "radio-".concat(this.radioGroup._uid);
+    },
+    rippleState: function rippleState() {
+      return _selectable.default.options.computed.rippleState.call(this);
+    },
+    validationState: function validationState() {
+      return (this.radioGroup || {}).validationState || this.computedColor;
     }
   },
-
   methods: {
-    genInput: function genInput(radio) {
-      var value = ['string', 'number'].includes(_typeof(this.value)) ? this.value : JSON.stringify(this.value);
-      var input = this.$createElement('input', {
-        ref: 'input',
-        style: {
-          display: 'none'
-        },
-        attrs: Object.assign({
-          name: this.name && this.name(),
-          id: this.id,
-          type: 'radio',
-          value: value
-        }, this.$attrs)
-      }, [value]);
-
-      radio.push(input);
-
-      return this.$createElement('div', {
-        class: 'input-group__input'
-      }, radio);
+    genInput: function genInput(args) {
+      // We can't actually use the mixin directly because
+      // it's made for standalone components, but its
+      // genInput method is exactly what we need
+      return _selectable.default.options.methods.genInput.call(this, 'radio', args);
     },
-    genWrapper: function genWrapper(radio) {
-      var _this = this;
-
-      var children = [];
-
-      children.push(this.genLabel());
-      children.push(this.genInput(radio));
-
-      return this.$createElement('div', {
-        class: this.classes,
+    genLabel: function genLabel() {
+      if (!this.hasLabel) return null;
+      return this.$createElement(_KLabel.default, {
+        on: {
+          // Label shouldn't cause the input to focus
+          click: _selectable.prevent
+        },
         attrs: {
-          role: 'radio',
-          'aria-checked': this.isActive && 'true' || 'false',
-          'aria-label': this.label
+          for: this.computedId
         },
-        on: {
-          keydown: function keydown(e) {
-            if ([13, 32].includes(e.keyCode)) {
-              e.preventDefault();
-              _this.toggle();
-            }
-          },
-          blur: function blur(e) {
-            _this.$emit('blur', e);
-            _this.tabFocused = false;
-          }
+        props: {
+          color: this.validationState,
+          focused: this.hasState
         }
-      }, children);
+      }, (0, _helpers.getSlot)(this, 'label') || this.label);
     },
-    genLabel: function genLabel() {
-      return this.$createElement('label', {
-        on: {
-          click: this.toggle
+    genRadio: function genRadio() {
+      var _this$attrs$ = this.attrs$,
+          title = _this$attrs$.title,
+          radioAttrs = _objectWithoutProperties(_this$attrs$, ["title"]);
+
+      return this.$createElement('div', {
+        staticClass: 'k-input--selection-controls__input'
+      }, [this.$createElement(_KIcon.default, this.setTextColor(this.validationState, {
+        props: {
+          dense: this.radioGroup && this.radioGroup.dense
         }
-      }, this.$slots.label || this.label);
+      }), this.computedIcon), this.genInput(_objectSpread({
+        name: this.computedName,
+        value: this.value
+      }, radioAttrs)), this.genRipple(this.setTextColor(this.rippleState))]);
     },
-    toggle: function toggle() {
-      var mandatory = this.isMandatory && this.isMandatory() || false;
-
-      if (!this.disabled && (!this.isActive || !mandatory)) {
-        this.$refs.input.checked = true;
-        this.isActive = true;
-        this.$emit('change', this.value);
-      }
-    }
-  },
-
-  created: function created() {
-    // Semantic check to help people identify the reason for the inject error above it.
-    if (!this.$parent || !this.$parent.$knode || !this.$parent.$knode.tag || !this.$parent.$knode.tag.endsWith('k-radio-group')) {
-      console.warn('[Kdutify] Warn: The k-radio component must have an immediate parent of k-radio-group.');
-    }
-  },
-  mounted: function mounted() {
-    this.registerChild(this);
-  },
-  beforeDestroy: function beforeDestroy() {
-    this.unregisterChild(this);
+    onFocus: function onFocus(e) {
+      this.isFocused = true;
+      this.$emit('focus', e);
+    },
+    onBlur: function onBlur(e) {
+      this.isFocused = false;
+      this.$emit('blur', e);
+    },
+    onChange: function onChange() {
+      if (this.isDisabled || this.isReadonly || this.isActive) return;
+      this.toggle();
+    },
+    onKeydown: function onKeydown() {}
   },
   render: function render(h) {
-    var transition = h('k-fade-transition', {}, [h('k-icon', {
-      staticClass: 'icon--selection-control',
-      'class': {
-        'icon--radio': this.isActive
-      },
-      key: this.icon
-    }, this.icon)]);
-
-    return this.genWrapper([transition, this.genRipple()]);
+    var data = {
+      staticClass: 'k-radio',
+      class: this.classes,
+      on: (0, _mergeData.mergeListeners)({
+        click: this.onChange
+      }, this.listeners$),
+      attrs: {
+        title: this.attrs$.title
+      }
+    };
+    return h('div', data, [this.genRadio(), this.genLabel()]);
   }
-};
+});
+
+exports.default = _default;
+//# sourceMappingURL=KRadio.js.map

package/es5/components/KRadioGroup/KRadio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/KRadioGroup/KRadio.ts"],"names":[],"mappings":"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","sourcesContent":["// Styles\nimport './KRadio.sass'\n\n// Components\nimport KRadioGroup from './KRadioGroup'\nimport KLabel from '../KLabel'\nimport KIcon from '../KIcon'\nimport KInput from '../KInput'\n\n// Mixins\nimport BindsAttrs from '../../mixins/binds-attrs'\nimport Colorable from '../../mixins/colorable'\nimport { factory as GroupableFactory } from '../../mixins/groupable'\nimport Rippleable from '../../mixins/rippleable'\nimport Themeable from '../../mixins/themeable'\nimport Selectable, { prevent } from '../../mixins/selectable'\n\n// Utilities\nimport { getSlot } from '../../util/helpers'\n\n// Types\nimport { KNode, KNodeData } from 'kdu'\nimport mixins from '../../util/mixins'\nimport { mergeListeners } from '../../util/mergeData'\n\nconst baseMixins = mixins(\n  BindsAttrs,\n  Colorable,\n  Rippleable,\n  GroupableFactory('radioGroup'),\n  Themeable\n)\n\ninterface options extends InstanceType<typeof baseMixins> {\n  radioGroup: InstanceType<typeof KRadioGroup>\n}\n\n/* @kdujs/component */\nexport default baseMixins.extend<options>().extend({\n  name: 'k-radio',\n\n  inheritAttrs: false,\n\n  props: {\n    disabled: Boolean,\n    id: String,\n    label: String,\n    name: String,\n    offIcon: {\n      type: String,\n      default: '$radioOff',\n    },\n    onIcon: {\n      type: String,\n      default: '$radioOn',\n    },\n    readonly: Boolean,\n    value: {\n      default: null,\n    },\n  },\n\n  data: () => ({\n    isFocused: false,\n  }),\n\n  computed: {\n    classes (): object {\n      return {\n        'k-radio--is-disabled': this.isDisabled,\n        'k-radio--is-focused': this.isFocused,\n        ...this.themeClasses,\n        ...this.groupClasses,\n      }\n    },\n    computedColor (): string | undefined {\n      return Selectable.options.computed.computedColor.call(this)\n    },\n    computedIcon (): string {\n      return this.isActive\n        ? this.onIcon\n        : this.offIcon\n    },\n    computedId (): string {\n      return KInput.options.computed.computedId.call(this)\n    },\n    hasLabel: KInput.options.computed.hasLabel,\n    hasState (): boolean {\n      return (this.radioGroup || {}).hasState\n    },\n    isDisabled (): boolean {\n      return this.disabled || (\n        !!this.radioGroup &&\n        this.radioGroup.isDisabled\n      )\n    },\n    isReadonly (): boolean {\n      return this.readonly || (\n        !!this.radioGroup &&\n        this.radioGroup.isReadonly\n      )\n    },\n    computedName (): string {\n      if (this.name || !this.radioGroup) {\n        return this.name\n      }\n\n      return this.radioGroup.name || `radio-${this.radioGroup._uid}`\n    },\n    rippleState (): string | undefined {\n      return Selectable.options.computed.rippleState.call(this)\n    },\n    validationState (): string | undefined {\n      return (this.radioGroup || {}).validationState || this.computedColor\n    },\n  },\n\n  methods: {\n    genInput (args: any) {\n      // We can't actually use the mixin directly because\n      // it's made for standalone components, but its\n      // genInput method is exactly what we need\n      return Selectable.options.methods.genInput.call(this, 'radio', args)\n    },\n    genLabel () {\n      if (!this.hasLabel) return null\n\n      return this.$createElement(KLabel, {\n        on: {\n          // Label shouldn't cause the input to focus\n          click: prevent,\n        },\n        attrs: {\n          for: this.computedId,\n        },\n        props: {\n          color: this.validationState,\n          focused: this.hasState,\n        },\n      }, getSlot(this, 'label') || this.label)\n    },\n    genRadio () {\n      const { title, ...radioAttrs } = this.attrs$\n\n      return this.$createElement('div', {\n        staticClass: 'k-input--selection-controls__input',\n      }, [\n        this.$createElement(KIcon, this.setTextColor(this.validationState, {\n          props: {\n            dense: this.radioGroup && this.radioGroup.dense,\n          },\n        }), this.computedIcon),\n        this.genInput({\n          name: this.computedName,\n          value: this.value,\n          ...radioAttrs,\n        }),\n        this.genRipple(this.setTextColor(this.rippleState)),\n      ])\n    },\n    onFocus (e: Event) {\n      this.isFocused = true\n      this.$emit('focus', e)\n    },\n    onBlur (e: Event) {\n      this.isFocused = false\n      this.$emit('blur', e)\n    },\n    onChange () {\n      if (this.isDisabled || this.isReadonly || this.isActive) return\n\n      this.toggle()\n    },\n    onKeydown: () => {}, // Override default with noop\n  },\n\n  render (h): KNode {\n    const data: KNodeData = {\n      staticClass: 'k-radio',\n      class: this.classes,\n      on: mergeListeners({\n        click: this.onChange,\n      }, this.listeners$),\n      attrs: { title: this.attrs$.title },\n    }\n\n    return h('div', data, [\n      this.genRadio(),\n      this.genLabel(),\n    ])\n  },\n})\n"],"sourceRoot":"","file":"KRadio.js"}

package/es5/components/KRadioGroup/KRadioGroup.js

@@ -1,139 +1,102 @@
-require('../../../src/stylus/components/_input-groups.styl');
-require('../../../src/stylus/components/_selection-controls.styl');
-require('../../../src/stylus/components/_radio-group.styl');
+"use strict";
 
-import Input from '../../mixins/input';
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 
-export default {
-  name: 'k-radio-group',
+require("..\\..\\..\\src\\styles\\components\\_selection-controls.sass");
 
-  mixins: [Input],
+require("..\\..\\..\\src\\components\\KRadioGroup\\KRadioGroup.sass");
 
-  model: {
-    prop: 'inputValue',
-    event: 'change'
-  },
+var _KInput = _interopRequireDefault(require("../KInput"));
 
-  provide: function provide() {
-    var _this = this;
+var _KItemGroup = require("../KItemGroup/KItemGroup");
+
+var _comparable = _interopRequireDefault(require("../../mixins/comparable"));
+
+var _mixins = _interopRequireDefault(require("../../util/mixins"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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; }
+
+var baseMixins = (0, _mixins.default)(_comparable.default, _KItemGroup.BaseItemGroup, _KInput.default);
+/* @kdujs/component */
+
+var _default = baseMixins.extend({
+  name: 'k-radio-group',
+  provide: function provide() {
     return {
-      isMandatory: function isMandatory() {
-        return _this.mandatory;
-      },
-      name: function name() {
-        return _this.name;
-      },
-      registerChild: this.registerChild,
-      unregisterChild: this.unregisterChild
+      radioGroup: this
     };
   },
-
-
   props: {
     column: {
       type: Boolean,
       default: true
     },
-    inputValue: null,
-    mandatory: {
-      type: Boolean,
-      default: true
+    height: {
+      type: [Number, String],
+      default: 'auto'
     },
     name: String,
-    row: Boolean
-  },
-
-  data: function data() {
-    return {
-      internalTabIndex: -1
-    };
-  },
-
-
-  watch: {
-    inputValue: function inputValue(val) {
-      this.getRadios().forEach(function (radio) {
-        radio.isActive = val === radio.value;
-      });
-    }
+    row: Boolean,
+    // If no value set on KRadio
+    // will match valueComparator
+    // force default to null
+    value: null
   },
-
   computed: {
     classes: function classes() {
-      return {
-        'radio-group': true,
-        'radio-group--column': this.column && !this.row,
-        'radio-group--row': this.row
-      };
+      return _objectSpread(_objectSpread({}, _KInput.default.options.computed.classes.call(this)), {}, {
+        'k-input--selection-controls k-input--radio-group': true,
+        'k-input--radio-group--column': this.column && !this.row,
+        'k-input--radio-group--row': this.row
+      });
     }
   },
-
   methods: {
-    getRadios: function getRadios() {
-      return this.$children.filter(function (child) {
-        return child.$el.classList.contains('radio');
-      });
+    genDefaultSlot: function genDefaultSlot() {
+      return this.$createElement('div', {
+        staticClass: 'k-input--radio-group__input',
+        attrs: {
+          id: this.id,
+          role: 'radiogroup',
+          'aria-labelledby': this.computedId
+        }
+      }, _KInput.default.options.methods.genDefaultSlot.call(this));
     },
-    toggleRadio: function toggleRadio(value) {
-      var _this2 = this;
+    genInputSlot: function genInputSlot() {
+      var render = _KInput.default.options.methods.genInputSlot.call(this);
 
-      if (this.disabled) {
-        return;
-      }
+      delete render.data.on.click;
+      return render;
+    },
+    genLabel: function genLabel() {
+      var label = _KInput.default.options.methods.genLabel.call(this);
 
-      this.shouldValidate = true;
-      this.$emit('change', value);
-      this.$nextTick(function () {
-        return _this2.validate();
-      });
+      if (!label) return null;
+      label.data.attrs.id = this.computedId; // WAI considers this an orphaned label
 
-      this.getRadios().filter(function (r) {
-        return r.value !== value;
-      }).forEach(function (r) {
-        return r.isActive = false;
-      });
+      delete label.data.attrs.for;
+      label.tag = 'legend';
+      return label;
     },
-    radioBlur: function radioBlur(e) {
-      if (!e.relatedTarget || !e.relatedTarget.classList.contains('radio')) {
-        this.shouldValidate = true;
-        this.$emit('blur', this.inputValue);
-      }
-    },
-    registerChild: function registerChild(radio) {
-      radio.isActive = this.inputValue === radio.value;
-      radio.$el.tabIndex = radio.$el.tabIndex > 0 ? radio.$el.tabIndex : 0;
-      radio.$on('change', this.toggleRadio);
-      radio.$on('blur', this.radioBlur);
-      radio.$on('focus', this.radioFocus);
-    },
-    unregisterChild: function unregisterChild(radio) {
-      radio.$off('change', this.toggleRadio);
-      radio.$off('blur', this.radioBlur);
-      radio.$off('focus', this.radioFocus);
-    }
+    onClick: _KItemGroup.BaseItemGroup.options.methods.onClick
   },
+  render: function render(h) {
+    var knode = _KInput.default.options.render.call(this, h);
 
-  mounted: function mounted() {
-    var _this3 = this;
-
-    this.getRadios().forEach(function (radio) {
-      return _this3.registerChild(radio);
-    });
-  },
-  beforeDestroy: function beforeDestroy() {
-    var _this4 = this;
+    this._b(knode.data, 'div', this.attrs$);
 
-    this.getRadios().forEach(function (radio) {
-      return _this4.unregisterChild(radio);
-    });
-  },
-  render: function render(h) {
-    var data = {
-      attrs: {
-        role: 'radiogroup'
-      }
-    };
-    return this.genInputGroup(this.$slots.default, data);
+    return knode;
   }
-};
+});
+
+exports.default = _default;
+//# sourceMappingURL=KRadioGroup.js.map

package/es5/components/KRadioGroup/KRadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/KRadioGroup/KRadioGroup.ts"],"names":[],"mappings":";;;;;;;AACA;;AACA;;AAGA;;AACA;;AAGA;;AAGA;;;;;;;;;;AAGA,IAAM,UAAU,GAAG,qBACjB,mBADiB,EAEjB,yBAFiB,EAGjB,eAHiB,CAAnB;AAMA;;eACe,UAAU,CAAC,MAAX,CAAkB;AAC/B,EAAA,IAAI,EAAE,eADyB;AAG/B,EAAA,OAH+B,qBAGxB;AACL,WAAO;AACL,MAAA,UAAU,EAAE;AADP,KAAP;AAGD,GAP8B;AAS/B,EAAA,KAAK,EAAE;AACL,IAAA,MAAM,EAAE;AACN,MAAA,IAAI,EAAE,OADA;AAEN,MAAA,OAAO,EAAE;AAFH,KADH;AAKL,IAAA,MAAM,EAAE;AACN,MAAA,IAAI,EAAE,CAAC,MAAD,EAAS,MAAT,CADA;AAEN,MAAA,OAAO,EAAE;AAFH,KALH;AASL,IAAA,IAAI,EAAE,MATD;AAUL,IAAA,GAAG,EAAE,OAVA;AAWL;AACA;AACA;AACA,IAAA,KAAK,EAAE;AAdF,GATwB;AA0B/B,EAAA,QAAQ,EAAE;AACR,IAAA,OADQ,qBACD;AACL,6CACK,gBAAO,OAAP,CAAe,QAAf,CAAwB,OAAxB,CAAgC,IAAhC,CAAqC,IAArC,CADL;AAEE,4DAAoD,IAFtD;AAGE,wCAAgC,KAAK,MAAL,IAAe,CAAC,KAAK,GAHvD;AAIE,qCAA6B,KAAK;AAJpC;AAMD;AARO,GA1BqB;AAqC/B,EAAA,OAAO,EAAE;AACP,IAAA,cADO,4BACO;AACZ,aAAO,KAAK,cAAL,CAAoB,KAApB,EAA2B;AAChC,QAAA,WAAW,EAAE,6BADmB;AAEhC,QAAA,KAAK,EAAE;AACL,UAAA,EAAE,EAAE,KAAK,EADJ;AAEL,UAAA,IAAI,EAAE,YAFD;AAGL,6BAAmB,KAAK;AAHnB;AAFyB,OAA3B,EAOJ,gBAAO,OAAP,CAAe,OAAf,CAAuB,cAAvB,CAAsC,IAAtC,CAA2C,IAA3C,CAPI,CAAP;AAQD,KAVM;AAWP,IAAA,YAXO,0BAWK;AACV,UAAM,MAAM,GAAG,gBAAO,OAAP,CAAe,OAAf,CAAuB,YAAvB,CAAoC,IAApC,CAAyC,IAAzC,CAAf;;AAEA,aAAO,MAAM,CAAC,IAAP,CAAa,EAAb,CAAiB,KAAxB;AAEA,aAAO,MAAP;AACD,KAjBM;AAkBP,IAAA,QAlBO,sBAkBC;AACN,UAAM,KAAK,GAAG,gBAAO,OAAP,CAAe,OAAf,CAAuB,QAAvB,CAAgC,IAAhC,CAAqC,IAArC,CAAd;;AAEA,UAAI,CAAC,KAAL,EAAY,OAAO,IAAP;AAEZ,MAAA,KAAK,CAAC,IAAN,CAAY,KAAZ,CAAmB,EAAnB,GAAwB,KAAK,UAA7B,CALM,CAMN;;AACA,aAAO,KAAK,CAAC,IAAN,CAAY,KAAZ,CAAmB,GAA1B;AACA,MAAA,KAAK,CAAC,GAAN,GAAY,QAAZ;AAEA,aAAO,KAAP;AACD,KA7BM;AA8BP,IAAA,OAAO,EAAE,0BAAc,OAAd,CAAsB,OAAtB,CAA8B;AA9BhC,GArCsB;AAsE/B,EAAA,MAtE+B,kBAsEvB,CAtEuB,EAsEtB;AACP,QAAM,KAAK,GAAG,gBAAO,OAAP,CAAe,MAAf,CAAsB,IAAtB,CAA2B,IAA3B,EAAiC,CAAjC,CAAd;;AAEA,SAAK,EAAL,CAAQ,KAAK,CAAC,IAAd,EAAqB,KAArB,EAA4B,KAAK,MAAjC;;AAEA,WAAO,KAAP;AACD;AA5E8B,CAAlB,C","sourcesContent":["// Styles\nimport '../../styles/components/_selection-controls.sass'\nimport './KRadioGroup.sass'\n\n// Extensions\nimport KInput from '../KInput'\nimport { BaseItemGroup } from '../KItemGroup/KItemGroup'\n\n// Mixins\nimport Comparable from '../../mixins/comparable'\n\n// Types\nimport mixins from '../../util/mixins'\nimport { PropType } from 'kdu'\n\nconst baseMixins = mixins(\n  Comparable,\n  BaseItemGroup,\n  KInput\n)\n\n/* @kdujs/component */\nexport default baseMixins.extend({\n  name: 'k-radio-group',\n\n  provide () {\n    return {\n      radioGroup: this,\n    }\n  },\n\n  props: {\n    column: {\n      type: Boolean,\n      default: true,\n    },\n    height: {\n      type: [Number, String],\n      default: 'auto',\n    },\n    name: String,\n    row: Boolean,\n    // If no value set on KRadio\n    // will match valueComparator\n    // force default to null\n    value: null as unknown as PropType<any>,\n  },\n\n  computed: {\n    classes (): object {\n      return {\n        ...KInput.options.computed.classes.call(this),\n        'k-input--selection-controls k-input--radio-group': true,\n        'k-input--radio-group--column': this.column && !this.row,\n        'k-input--radio-group--row': this.row,\n      }\n    },\n  },\n\n  methods: {\n    genDefaultSlot () {\n      return this.$createElement('div', {\n        staticClass: 'k-input--radio-group__input',\n        attrs: {\n          id: this.id,\n          role: 'radiogroup',\n          'aria-labelledby': this.computedId,\n        },\n      }, KInput.options.methods.genDefaultSlot.call(this))\n    },\n    genInputSlot () {\n      const render = KInput.options.methods.genInputSlot.call(this)\n\n      delete render.data!.on!.click\n\n      return render\n    },\n    genLabel () {\n      const label = KInput.options.methods.genLabel.call(this)\n\n      if (!label) return null\n\n      label.data!.attrs!.id = this.computedId\n      // WAI considers this an orphaned label\n      delete label.data!.attrs!.for\n      label.tag = 'legend'\n\n      return label\n    },\n    onClick: BaseItemGroup.options.methods.onClick,\n  },\n\n  render (h) {\n    const knode = KInput.options.render.call(this, h)\n\n    this._b(knode.data!, 'div', this.attrs$)\n\n    return knode\n  },\n})\n"],"sourceRoot":"","file":"KRadioGroup.js"}

package/es5/components/KRadioGroup/index.js

@@ -1,11 +1,33 @@
-import KRadioGroup from './KRadioGroup';
-import KRadio from './KRadio';
+"use strict";
 
-export { KRadioGroup, KRadio };
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "KRadioGroup", {
+  enumerable: true,
+  get: function get() {
+    return _KRadioGroup.default;
+  }
+});
+Object.defineProperty(exports, "KRadio", {
+  enumerable: true,
+  get: function get() {
+    return _KRadio.default;
+  }
+});
+exports.default = void 0;
 
-KRadioGroup.install = function install(Kdu) {
-  Kdu.component(KRadioGroup.name, KRadioGroup);
-  Kdu.component(KRadio.name, KRadio);
-};
+var _KRadioGroup = _interopRequireDefault(require("./KRadioGroup"));
+
+var _KRadio = _interopRequireDefault(require("./KRadio"));
 
-export default KRadioGroup;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  $_kdutify_subcomponents: {
+    KRadioGroup: _KRadioGroup.default,
+    KRadio: _KRadio.default
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/es5/components/KRadioGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/KRadioGroup/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;;;eAIe;AACb,EAAA,uBAAuB,EAAE;AACvB,IAAA,WAAW,EAAX,oBADuB;AAEvB,IAAA,MAAM,EAAN;AAFuB;AADZ,C","sourcesContent":["import KRadioGroup from './KRadioGroup'\nimport KRadio from './KRadio'\n\nexport { KRadioGroup, KRadio }\n\nexport default {\n  $_kdutify_subcomponents: {\n    KRadioGroup,\n    KRadio,\n  },\n}\n"],"sourceRoot":"","file":"index.js"}