kdutify 0.16.9-rc.0 → 2.6.0

package/lib/components/KTextField/KTextField.js

@@ -0,0 +1,530 @@
+// Styles
+import "..\\..\\..\\src\\components\\KTextField\\KTextField.sass"; // Extensions
+
+import KInput from '../KInput'; // Components
+
+import KCounter from '../KCounter';
+import KLabel from '../KLabel'; // Mixins
+
+import Intersectable from '../../mixins/intersectable';
+import Loadable from '../../mixins/loadable';
+import Validatable from '../../mixins/validatable'; // Directives
+
+import resize from '../../directives/resize';
+import ripple from '../../directives/ripple'; // Utilities
+
+import { attachedRoot } from '../../util/dom';
+import { convertToUnit, keyCodes } from '../../util/helpers';
+import { breaking, consoleWarn } from '../../util/console'; // Types
+
+import mixins from '../../util/mixins';
+const baseMixins = mixins(KInput, Intersectable({
+  onVisible: ['onResize', 'tryAutofocus']
+}), Loadable);
+const dirtyTypes = ['color', 'file', 'time', 'date', 'datetime-local', 'week', 'month'];
+/* @kdujs/component */
+
+export default baseMixins.extend().extend({
+  name: 'k-text-field',
+  directives: {
+    resize,
+    ripple
+  },
+  inheritAttrs: false,
+  props: {
+    appendOuterIcon: String,
+    autofocus: Boolean,
+    clearable: Boolean,
+    clearIcon: {
+      type: String,
+      default: '$clear'
+    },
+    counter: [Boolean, Number, String],
+    counterValue: Function,
+    filled: Boolean,
+    flat: Boolean,
+    fullWidth: Boolean,
+    label: String,
+    outlined: Boolean,
+    placeholder: String,
+    prefix: String,
+    prependInnerIcon: String,
+    persistentPlaceholder: Boolean,
+    reverse: Boolean,
+    rounded: Boolean,
+    shaped: Boolean,
+    singleLine: Boolean,
+    solo: Boolean,
+    soloInverted: Boolean,
+    suffix: String,
+    type: {
+      type: String,
+      default: 'text'
+    }
+  },
+  data: () => ({
+    badInput: false,
+    labelWidth: 0,
+    prefixWidth: 0,
+    prependWidth: 0,
+    initialValue: null,
+    isBooted: false,
+    isClearing: false
+  }),
+  computed: {
+    classes() {
+      return { ...KInput.options.computed.classes.call(this),
+        'k-text-field': true,
+        'k-text-field--full-width': this.fullWidth,
+        'k-text-field--prefix': this.prefix,
+        'k-text-field--single-line': this.isSingle,
+        'k-text-field--solo': this.isSolo,
+        'k-text-field--solo-inverted': this.soloInverted,
+        'k-text-field--solo-flat': this.flat,
+        'k-text-field--filled': this.filled,
+        'k-text-field--is-booted': this.isBooted,
+        'k-text-field--enclosed': this.isEnclosed,
+        'k-text-field--reverse': this.reverse,
+        'k-text-field--outlined': this.outlined,
+        'k-text-field--placeholder': this.placeholder,
+        'k-text-field--rounded': this.rounded,
+        'k-text-field--shaped': this.shaped
+      };
+    },
+
+    computedColor() {
+      const computedColor = Validatable.options.computed.computedColor.call(this);
+      if (!this.soloInverted || !this.isFocused) return computedColor;
+      return this.color || 'primary';
+    },
+
+    computedCounterValue() {
+      if (typeof this.counterValue === 'function') {
+        return this.counterValue(this.internalValue);
+      }
+
+      return [...(this.internalValue || '').toString()].length;
+    },
+
+    hasCounter() {
+      return this.counter !== false && this.counter != null;
+    },
+
+    hasDetails() {
+      return KInput.options.computed.hasDetails.call(this) || this.hasCounter;
+    },
+
+    internalValue: {
+      get() {
+        return this.lazyValue;
+      },
+
+      set(val) {
+        this.lazyValue = val;
+        this.$emit('input', this.lazyValue);
+      }
+
+    },
+
+    isDirty() {
+      var _this$lazyValue;
+
+      return ((_this$lazyValue = this.lazyValue) == null ? void 0 : _this$lazyValue.toString().length) > 0 || this.badInput;
+    },
+
+    isEnclosed() {
+      return this.filled || this.isSolo || this.outlined;
+    },
+
+    isLabelActive() {
+      return this.isDirty || dirtyTypes.includes(this.type);
+    },
+
+    isSingle() {
+      return this.isSolo || this.singleLine || this.fullWidth || // https://material.io/components/text-fields/#filled-text-field
+      this.filled && !this.hasLabel;
+    },
+
+    isSolo() {
+      return this.solo || this.soloInverted;
+    },
+
+    labelPosition() {
+      let offset = this.prefix && !this.labelValue ? this.prefixWidth : 0;
+      if (this.labelValue && this.prependWidth) offset -= this.prependWidth;
+      return this.$kdutify.rtl === this.reverse ? {
+        left: offset,
+        right: 'auto'
+      } : {
+        left: 'auto',
+        right: offset
+      };
+    },
+
+    showLabel() {
+      return this.hasLabel && !(this.isSingle && this.labelValue);
+    },
+
+    labelValue() {
+      return this.isFocused || this.isLabelActive || this.persistentPlaceholder;
+    }
+
+  },
+  watch: {
+    // labelValue: 'setLabelWidth', // moved to mounted, see #11533
+    outlined: 'setLabelWidth',
+
+    label() {
+      this.$nextTick(this.setLabelWidth);
+    },
+
+    prefix() {
+      this.$nextTick(this.setPrefixWidth);
+    },
+
+    isFocused: 'updateValue',
+
+    value(val) {
+      this.lazyValue = val;
+    }
+
+  },
+
+  created() {
+    /* istanbul ignore next */
+    if (this.$attrs.hasOwnProperty('box')) {
+      breaking('box', 'filled', this);
+    }
+    /* istanbul ignore next */
+
+
+    if (this.$attrs.hasOwnProperty('browser-autocomplete')) {
+      breaking('browser-autocomplete', 'autocomplete', this);
+    }
+    /* istanbul ignore if */
+
+
+    if (this.shaped && !(this.filled || this.outlined || this.isSolo)) {
+      consoleWarn('shaped should be used with either filled or outlined', this);
+    }
+  },
+
+  mounted() {
+    // #11533
+    this.$watch(() => this.labelValue, this.setLabelWidth);
+    this.autofocus && this.tryAutofocus();
+    requestAnimationFrame(() => {
+      this.isBooted = true;
+      requestAnimationFrame(() => {
+        if (!this.isIntersecting) {
+          this.onResize();
+        }
+      });
+    });
+  },
+
+  methods: {
+    /** @public */
+    focus() {
+      this.onFocus();
+    },
+
+    /** @public */
+    blur(e) {
+      // Safari tab order gets broken if called synchronous
+      window.requestAnimationFrame(() => {
+        this.$refs.input && this.$refs.input.blur();
+      });
+    },
+
+    clearableCallback() {
+      this.$refs.input && this.$refs.input.focus();
+      this.$nextTick(() => this.internalValue = null);
+    },
+
+    genAppendSlot() {
+      const slot = [];
+
+      if (this.$slots['append-outer']) {
+        slot.push(this.$slots['append-outer']);
+      } else if (this.appendOuterIcon) {
+        slot.push(this.genIcon('appendOuter'));
+      }
+
+      return this.genSlot('append', 'outer', slot);
+    },
+
+    genPrependInnerSlot() {
+      const slot = [];
+
+      if (this.$slots['prepend-inner']) {
+        slot.push(this.$slots['prepend-inner']);
+      } else if (this.prependInnerIcon) {
+        slot.push(this.genIcon('prependInner'));
+      }
+
+      return this.genSlot('prepend', 'inner', slot);
+    },
+
+    genIconSlot() {
+      const slot = [];
+
+      if (this.$slots.append) {
+        slot.push(this.$slots.append);
+      } else if (this.appendIcon) {
+        slot.push(this.genIcon('append'));
+      }
+
+      return this.genSlot('append', 'inner', slot);
+    },
+
+    genInputSlot() {
+      const input = KInput.options.methods.genInputSlot.call(this);
+      const prepend = this.genPrependInnerSlot();
+
+      if (prepend) {
+        input.children = input.children || [];
+        input.children.unshift(prepend);
+      }
+
+      return input;
+    },
+
+    genClearIcon() {
+      if (!this.clearable) return null; // if the text field has no content then don't display the clear icon.
+      // We add an empty div because other controls depend on a ref to append inner
+
+      if (!this.isDirty) {
+        return this.genSlot('append', 'inner', [this.$createElement('div')]);
+      }
+
+      return this.genSlot('append', 'inner', [this.genIcon('clear', this.clearableCallback)]);
+    },
+
+    genCounter() {
+      var _this$$scopedSlots$co, _this$$scopedSlots$co2, _this$$scopedSlots;
+
+      if (!this.hasCounter) return null;
+      const max = this.counter === true ? this.attrs$.maxlength : this.counter;
+      const props = {
+        dark: this.dark,
+        light: this.light,
+        max,
+        value: this.computedCounterValue
+      };
+      return (_this$$scopedSlots$co = (_this$$scopedSlots$co2 = (_this$$scopedSlots = this.$scopedSlots).counter) == null ? void 0 : _this$$scopedSlots$co2.call(_this$$scopedSlots, {
+        props
+      })) != null ? _this$$scopedSlots$co : this.$createElement(KCounter, {
+        props
+      });
+    },
+
+    genControl() {
+      return KInput.options.methods.genControl.call(this);
+    },
+
+    genDefaultSlot() {
+      return [this.genFieldset(), this.genTextFieldSlot(), this.genClearIcon(), this.genIconSlot(), this.genProgress()];
+    },
+
+    genFieldset() {
+      if (!this.outlined) return null;
+      return this.$createElement('fieldset', {
+        attrs: {
+          'aria-hidden': true
+        }
+      }, [this.genLegend()]);
+    },
+
+    genLabel() {
+      if (!this.showLabel) return null;
+      const data = {
+        props: {
+          absolute: true,
+          color: this.validationState,
+          dark: this.dark,
+          disabled: this.isDisabled,
+          focused: !this.isSingle && (this.isFocused || !!this.validationState),
+          for: this.computedId,
+          left: this.labelPosition.left,
+          light: this.light,
+          right: this.labelPosition.right,
+          value: this.labelValue
+        }
+      };
+      return this.$createElement(KLabel, data, this.$slots.label || this.label);
+    },
+
+    genLegend() {
+      const width = !this.singleLine && (this.labelValue || this.isDirty) ? this.labelWidth : 0;
+      const span = this.$createElement('span', {
+        domProps: {
+          innerHTML: '​'
+        },
+        staticClass: 'notranslate'
+      });
+      return this.$createElement('legend', {
+        style: {
+          width: !this.isSingle ? convertToUnit(width) : undefined
+        }
+      }, [span]);
+    },
+
+    genInput() {
+      const listeners = Object.assign({}, this.listeners$);
+      delete listeners.change; // Change should not be bound externally
+
+      const {
+        title,
+        ...inputAttrs
+      } = this.attrs$;
+      return this.$createElement('input', {
+        style: {},
+        domProps: {
+          value: this.type === 'number' && Object.is(this.lazyValue, -0) ? '-0' : this.lazyValue
+        },
+        attrs: { ...inputAttrs,
+          autofocus: this.autofocus,
+          disabled: this.isDisabled,
+          id: this.computedId,
+          placeholder: this.persistentPlaceholder || this.isFocused || !this.hasLabel ? this.placeholder : undefined,
+          readonly: this.isReadonly,
+          type: this.type
+        },
+        on: Object.assign(listeners, {
+          blur: this.onBlur,
+          input: this.onInput,
+          focus: this.onFocus,
+          keydown: this.onKeyDown
+        }),
+        ref: 'input',
+        directives: [{
+          name: 'resize',
+          modifiers: {
+            quiet: true
+          },
+          value: this.onResize
+        }]
+      });
+    },
+
+    genMessages() {
+      if (!this.showDetails) return null;
+      const messagesNode = KInput.options.methods.genMessages.call(this);
+      const counterNode = this.genCounter();
+      return this.$createElement('div', {
+        staticClass: 'k-text-field__details'
+      }, [messagesNode, counterNode]);
+    },
+
+    genTextFieldSlot() {
+      return this.$createElement('div', {
+        staticClass: 'k-text-field__slot'
+      }, [this.genLabel(), this.prefix ? this.genAffix('prefix') : null, this.genInput(), this.suffix ? this.genAffix('suffix') : null]);
+    },
+
+    genAffix(type) {
+      return this.$createElement('div', {
+        class: `k-text-field__${type}`,
+        ref: type
+      }, this[type]);
+    },
+
+    onBlur(e) {
+      this.isFocused = false;
+      e && this.$nextTick(() => this.$emit('blur', e));
+    },
+
+    onClick() {
+      if (this.isFocused || this.isDisabled || !this.$refs.input) return;
+      this.$refs.input.focus();
+    },
+
+    onFocus(e) {
+      if (!this.$refs.input) return;
+      const root = attachedRoot(this.$el);
+      if (!root) return;
+
+      if (root.activeElement !== this.$refs.input) {
+        return this.$refs.input.focus();
+      }
+
+      if (!this.isFocused) {
+        this.isFocused = true;
+        e && this.$emit('focus', e);
+      }
+    },
+
+    onInput(e) {
+      const target = e.target;
+      this.internalValue = target.value;
+      this.badInput = target.validity && target.validity.badInput;
+    },
+
+    onKeyDown(e) {
+      if (e.keyCode === keyCodes.enter && this.lazyValue !== this.initialValue) {
+        this.initialValue = this.lazyValue;
+        this.$emit('change', this.initialValue);
+      }
+
+      this.$emit('keydown', e);
+    },
+
+    onMouseDown(e) {
+      // Prevent input from being blurred
+      if (e.target !== this.$refs.input) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+
+      KInput.options.methods.onMouseDown.call(this, e);
+    },
+
+    onMouseUp(e) {
+      if (this.hasMouseDown) this.focus();
+      KInput.options.methods.onMouseUp.call(this, e);
+    },
+
+    setLabelWidth() {
+      if (!this.outlined) return;
+      this.labelWidth = this.$refs.label ? Math.min(this.$refs.label.scrollWidth * 0.75 + 6, this.$el.offsetWidth - 24) : 0;
+    },
+
+    setPrefixWidth() {
+      if (!this.$refs.prefix) return;
+      this.prefixWidth = this.$refs.prefix.offsetWidth;
+    },
+
+    setPrependWidth() {
+      if (!this.outlined || !this.$refs['prepend-inner']) return;
+      this.prependWidth = this.$refs['prepend-inner'].offsetWidth;
+    },
+
+    tryAutofocus() {
+      if (!this.autofocus || typeof document === 'undefined' || !this.$refs.input) return false;
+      const root = attachedRoot(this.$el);
+      if (!root || root.activeElement === this.$refs.input) return false;
+      this.$refs.input.focus();
+      return true;
+    },
+
+    updateValue(val) {
+      // Sets validationState from validatable
+      this.hasColor = val;
+
+      if (val) {
+        this.initialValue = this.lazyValue;
+      } else if (this.initialValue !== this.lazyValue) {
+        this.$emit('change', this.lazyValue);
+      }
+    },
+
+    onResize() {
+      this.setLabelWidth();
+      this.setPrefixWidth();
+      this.setPrependWidth();
+    }
+
+  }
+});
+//# sourceMappingURL=KTextField.js.map

package/lib/components/KTextField/KTextField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/KTextField/KTextField.ts"],"names":[],"mappings":"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","sourcesContent":["// Styles\nimport './KTextField.sass'\n\n// Extensions\nimport KInput from '../KInput'\n\n// Components\nimport KCounter from '../KCounter'\nimport KLabel from '../KLabel'\n\n// Mixins\nimport Intersectable from '../../mixins/intersectable'\nimport Loadable from '../../mixins/loadable'\nimport Validatable from '../../mixins/validatable'\n\n// Directives\nimport resize from '../../directives/resize'\nimport ripple from '../../directives/ripple'\n\n// Utilities\nimport { attachedRoot } from '../../util/dom'\nimport { convertToUnit, keyCodes } from '../../util/helpers'\nimport { breaking, consoleWarn } from '../../util/console'\n\n// Types\nimport mixins from '../../util/mixins'\nimport { KNode, PropType } from 'kdu/types'\n\nconst baseMixins = mixins(\n  KInput,\n  Intersectable({\n    onVisible: [\n      'onResize',\n      'tryAutofocus',\n    ],\n  }),\n  Loadable,\n)\ninterface options extends InstanceType<typeof baseMixins> {\n  $refs: {\n    label: HTMLElement\n    input: HTMLInputElement\n    'prepend-inner': HTMLElement\n    prefix: HTMLElement\n    suffix: HTMLElement\n  }\n}\n\nconst dirtyTypes = ['color', 'file', 'time', 'date', 'datetime-local', 'week', 'month']\n\n/* @kdujs/component */\nexport default baseMixins.extend<options>().extend({\n  name: 'k-text-field',\n\n  directives: {\n    resize,\n    ripple,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    appendOuterIcon: String,\n    autofocus: Boolean,\n    clearable: Boolean,\n    clearIcon: {\n      type: String,\n      default: '$clear',\n    },\n    counter: [Boolean, Number, String],\n    counterValue: Function as PropType<(value: any) => number>,\n    filled: Boolean,\n    flat: Boolean,\n    fullWidth: Boolean,\n    label: String,\n    outlined: Boolean,\n    placeholder: String,\n    prefix: String,\n    prependInnerIcon: String,\n    persistentPlaceholder: Boolean,\n    reverse: Boolean,\n    rounded: Boolean,\n    shaped: Boolean,\n    singleLine: Boolean,\n    solo: Boolean,\n    soloInverted: Boolean,\n    suffix: String,\n    type: {\n      type: String,\n      default: 'text',\n    },\n  },\n\n  data: () => ({\n    badInput: false,\n    labelWidth: 0,\n    prefixWidth: 0,\n    prependWidth: 0,\n    initialValue: null,\n    isBooted: false,\n    isClearing: false,\n  }),\n\n  computed: {\n    classes (): object {\n      return {\n        ...KInput.options.computed.classes.call(this),\n        'k-text-field': true,\n        'k-text-field--full-width': this.fullWidth,\n        'k-text-field--prefix': this.prefix,\n        'k-text-field--single-line': this.isSingle,\n        'k-text-field--solo': this.isSolo,\n        'k-text-field--solo-inverted': this.soloInverted,\n        'k-text-field--solo-flat': this.flat,\n        'k-text-field--filled': this.filled,\n        'k-text-field--is-booted': this.isBooted,\n        'k-text-field--enclosed': this.isEnclosed,\n        'k-text-field--reverse': this.reverse,\n        'k-text-field--outlined': this.outlined,\n        'k-text-field--placeholder': this.placeholder,\n        'k-text-field--rounded': this.rounded,\n        'k-text-field--shaped': this.shaped,\n      }\n    },\n    computedColor (): string | undefined {\n      const computedColor = Validatable.options.computed.computedColor.call(this)\n\n      if (!this.soloInverted || !this.isFocused) return computedColor\n\n      return this.color || 'primary'\n    },\n    computedCounterValue (): number {\n      if (typeof this.counterValue === 'function') {\n        return this.counterValue(this.internalValue)\n      }\n      return [...(this.internalValue || '').toString()].length\n    },\n    hasCounter (): boolean {\n      return this.counter !== false && this.counter != null\n    },\n    hasDetails (): boolean {\n      return KInput.options.computed.hasDetails.call(this) || this.hasCounter\n    },\n    internalValue: {\n      get (): any {\n        return this.lazyValue\n      },\n      set (val: any) {\n        this.lazyValue = val\n        this.$emit('input', this.lazyValue)\n      },\n    },\n    isDirty (): boolean {\n      return this.lazyValue?.toString().length > 0 || this.badInput\n    },\n    isEnclosed (): boolean {\n      return (\n        this.filled ||\n        this.isSolo ||\n        this.outlined\n      )\n    },\n    isLabelActive (): boolean {\n      return this.isDirty || dirtyTypes.includes(this.type)\n    },\n    isSingle (): boolean {\n      return (\n        this.isSolo ||\n        this.singleLine ||\n        this.fullWidth ||\n        // https://material.io/components/text-fields/#filled-text-field\n        (this.filled && !this.hasLabel)\n      )\n    },\n    isSolo (): boolean {\n      return this.solo || this.soloInverted\n    },\n    labelPosition (): Record<'left' | 'right', string | number | undefined> {\n      let offset = (this.prefix && !this.labelValue) ? this.prefixWidth : 0\n\n      if (this.labelValue && this.prependWidth) offset -= this.prependWidth\n\n      return (this.$kdutify.rtl === this.reverse) ? {\n        left: offset,\n        right: 'auto',\n      } : {\n        left: 'auto',\n        right: offset,\n      }\n    },\n    showLabel (): boolean {\n      return this.hasLabel && !(this.isSingle && this.labelValue)\n    },\n    labelValue (): boolean {\n      return this.isFocused || this.isLabelActive || this.persistentPlaceholder\n    },\n  },\n\n  watch: {\n    // labelValue: 'setLabelWidth', // moved to mounted, see #11533\n    outlined: 'setLabelWidth',\n    label () {\n      this.$nextTick(this.setLabelWidth)\n    },\n    prefix () {\n      this.$nextTick(this.setPrefixWidth)\n    },\n    isFocused: 'updateValue',\n    value (val) {\n      this.lazyValue = val\n    },\n  },\n\n  created () {\n    /* istanbul ignore next */\n    if (this.$attrs.hasOwnProperty('box')) {\n      breaking('box', 'filled', this)\n    }\n\n    /* istanbul ignore next */\n    if (this.$attrs.hasOwnProperty('browser-autocomplete')) {\n      breaking('browser-autocomplete', 'autocomplete', this)\n    }\n\n    /* istanbul ignore if */\n    if (this.shaped && !(this.filled || this.outlined || this.isSolo)) {\n      consoleWarn('shaped should be used with either filled or outlined', this)\n    }\n  },\n\n  mounted () {\n    // #11533\n    this.$watch(() => this.labelValue, this.setLabelWidth)\n    this.autofocus && this.tryAutofocus()\n    requestAnimationFrame(() => {\n      this.isBooted = true\n      requestAnimationFrame(() => {\n        if (!this.isIntersecting) {\n          this.onResize()\n        }\n      })\n    })\n  },\n\n  methods: {\n    /** @public */\n    focus () {\n      this.onFocus()\n    },\n    /** @public */\n    blur (e?: Event) {\n      // Safari tab order gets broken if called synchronous\n      window.requestAnimationFrame(() => {\n        this.$refs.input && this.$refs.input.blur()\n      })\n    },\n    clearableCallback () {\n      this.$refs.input && this.$refs.input.focus()\n      this.$nextTick(() => this.internalValue = null)\n    },\n    genAppendSlot () {\n      const slot = []\n\n      if (this.$slots['append-outer']) {\n        slot.push(this.$slots['append-outer'] as KNode[])\n      } else if (this.appendOuterIcon) {\n        slot.push(this.genIcon('appendOuter'))\n      }\n\n      return this.genSlot('append', 'outer', slot)\n    },\n    genPrependInnerSlot () {\n      const slot = []\n\n      if (this.$slots['prepend-inner']) {\n        slot.push(this.$slots['prepend-inner'] as KNode[])\n      } else if (this.prependInnerIcon) {\n        slot.push(this.genIcon('prependInner'))\n      }\n\n      return this.genSlot('prepend', 'inner', slot)\n    },\n    genIconSlot () {\n      const slot = []\n\n      if (this.$slots.append) {\n        slot.push(this.$slots.append as KNode[])\n      } else if (this.appendIcon) {\n        slot.push(this.genIcon('append'))\n      }\n\n      return this.genSlot('append', 'inner', slot)\n    },\n    genInputSlot () {\n      const input = KInput.options.methods.genInputSlot.call(this)\n\n      const prepend = this.genPrependInnerSlot()\n\n      if (prepend) {\n        input.children = input.children || []\n        input.children.unshift(prepend)\n      }\n\n      return input\n    },\n    genClearIcon () {\n      if (!this.clearable) return null\n\n      // if the text field has no content then don't display the clear icon.\n      // We add an empty div because other controls depend on a ref to append inner\n      if (!this.isDirty) {\n        return this.genSlot('append', 'inner', [\n          this.$createElement('div'),\n        ])\n      }\n\n      return this.genSlot('append', 'inner', [\n        this.genIcon('clear', this.clearableCallback),\n      ])\n    },\n    genCounter () {\n      if (!this.hasCounter) return null\n\n      const max = this.counter === true ? this.attrs$.maxlength : this.counter\n\n      const props = {\n        dark: this.dark,\n        light: this.light,\n        max,\n        value: this.computedCounterValue,\n      }\n\n      return this.$scopedSlots.counter?.({ props }) ?? this.$createElement(KCounter, { props })\n    },\n    genControl () {\n      return KInput.options.methods.genControl.call(this)\n    },\n    genDefaultSlot () {\n      return [\n        this.genFieldset(),\n        this.genTextFieldSlot(),\n        this.genClearIcon(),\n        this.genIconSlot(),\n        this.genProgress(),\n      ]\n    },\n    genFieldset () {\n      if (!this.outlined) return null\n\n      return this.$createElement('fieldset', {\n        attrs: {\n          'aria-hidden': true,\n        },\n      }, [this.genLegend()])\n    },\n    genLabel () {\n      if (!this.showLabel) return null\n\n      const data = {\n        props: {\n          absolute: true,\n          color: this.validationState,\n          dark: this.dark,\n          disabled: this.isDisabled,\n          focused: !this.isSingle && (this.isFocused || !!this.validationState),\n          for: this.computedId,\n          left: this.labelPosition.left,\n          light: this.light,\n          right: this.labelPosition.right,\n          value: this.labelValue,\n        },\n      }\n\n      return this.$createElement(KLabel, data, this.$slots.label || this.label)\n    },\n    genLegend () {\n      const width = !this.singleLine && (this.labelValue || this.isDirty) ? this.labelWidth : 0\n      const span = this.$createElement('span', {\n        domProps: { innerHTML: '&#8203;' },\n        staticClass: 'notranslate',\n      })\n\n      return this.$createElement('legend', {\n        style: {\n          width: !this.isSingle ? convertToUnit(width) : undefined,\n        },\n      }, [span])\n    },\n    genInput () {\n      const listeners = Object.assign({}, this.listeners$)\n      delete listeners.change // Change should not be bound externally\n      const { title, ...inputAttrs } = this.attrs$\n\n      return this.$createElement('input', {\n        style: {},\n        domProps: {\n          value: (this.type === 'number' && Object.is(this.lazyValue, -0)) ? '-0' : this.lazyValue,\n        },\n        attrs: {\n          ...inputAttrs,\n          autofocus: this.autofocus,\n          disabled: this.isDisabled,\n          id: this.computedId,\n          placeholder: this.persistentPlaceholder || this.isFocused || !this.hasLabel ? this.placeholder : undefined,\n          readonly: this.isReadonly,\n          type: this.type,\n        },\n        on: Object.assign(listeners, {\n          blur: this.onBlur,\n          input: this.onInput,\n          focus: this.onFocus,\n          keydown: this.onKeyDown,\n        }),\n        ref: 'input',\n        directives: [{\n          name: 'resize',\n          modifiers: { quiet: true },\n          value: this.onResize,\n        }],\n      })\n    },\n    genMessages () {\n      if (!this.showDetails) return null\n\n      const messagesNode = KInput.options.methods.genMessages.call(this)\n      const counterNode = this.genCounter()\n\n      return this.$createElement('div', {\n        staticClass: 'k-text-field__details',\n      }, [\n        messagesNode,\n        counterNode,\n      ])\n    },\n    genTextFieldSlot () {\n      return this.$createElement('div', {\n        staticClass: 'k-text-field__slot',\n      }, [\n        this.genLabel(),\n        this.prefix ? this.genAffix('prefix') : null,\n        this.genInput(),\n        this.suffix ? this.genAffix('suffix') : null,\n      ])\n    },\n    genAffix (type: 'prefix' | 'suffix') {\n      return this.$createElement('div', {\n        class: `k-text-field__${type}`,\n        ref: type,\n      }, this[type])\n    },\n    onBlur (e?: Event) {\n      this.isFocused = false\n      e && this.$nextTick(() => this.$emit('blur', e))\n    },\n    onClick () {\n      if (this.isFocused || this.isDisabled || !this.$refs.input) return\n\n      this.$refs.input.focus()\n    },\n    onFocus (e?: Event) {\n      if (!this.$refs.input) return\n\n      const root = attachedRoot(this.$el)\n      if (!root) return\n\n      if (root.activeElement !== this.$refs.input) {\n        return this.$refs.input.focus()\n      }\n\n      if (!this.isFocused) {\n        this.isFocused = true\n        e && this.$emit('focus', e)\n      }\n    },\n    onInput (e: Event) {\n      const target = e.target as HTMLInputElement\n      this.internalValue = target.value\n      this.badInput = target.validity && target.validity.badInput\n    },\n    onKeyDown (e: KeyboardEvent) {\n      if (\n        e.keyCode === keyCodes.enter &&\n        this.lazyValue !== this.initialValue\n      ) {\n        this.initialValue = this.lazyValue\n        this.$emit('change', this.initialValue)\n      }\n\n      this.$emit('keydown', e)\n    },\n    onMouseDown (e: Event) {\n      // Prevent input from being blurred\n      if (e.target !== this.$refs.input) {\n        e.preventDefault()\n        e.stopPropagation()\n      }\n\n      KInput.options.methods.onMouseDown.call(this, e)\n    },\n    onMouseUp (e: Event) {\n      if (this.hasMouseDown) this.focus()\n\n      KInput.options.methods.onMouseUp.call(this, e)\n    },\n    setLabelWidth () {\n      if (!this.outlined) return\n\n      this.labelWidth = this.$refs.label\n        ? Math.min(this.$refs.label.scrollWidth * 0.75 + 6, (this.$el as HTMLElement).offsetWidth - 24)\n        : 0\n    },\n    setPrefixWidth () {\n      if (!this.$refs.prefix) return\n\n      this.prefixWidth = this.$refs.prefix.offsetWidth\n    },\n    setPrependWidth () {\n      if (!this.outlined || !this.$refs['prepend-inner']) return\n\n      this.prependWidth = this.$refs['prepend-inner'].offsetWidth\n    },\n    tryAutofocus () {\n      if (\n        !this.autofocus ||\n        typeof document === 'undefined' ||\n        !this.$refs.input) return false\n\n      const root = attachedRoot(this.$el)\n      if (!root || root.activeElement === this.$refs.input) return false\n\n      this.$refs.input.focus()\n\n      return true\n    },\n    updateValue (val: boolean) {\n      // Sets validationState from validatable\n      this.hasColor = val\n\n      if (val) {\n        this.initialValue = this.lazyValue\n      } else if (this.initialValue !== this.lazyValue) {\n        this.$emit('change', this.lazyValue)\n      }\n    },\n    onResize () {\n      this.setLabelWidth()\n      this.setPrefixWidth()\n      this.setPrependWidth()\n    },\n  },\n})\n"],"sourceRoot":"","file":"KTextField.js"}

package/lib/components/KTextField/index.js

@@ -0,0 +1,4 @@
+import KTextField from './KTextField';
+export { KTextField };
+export default KTextField;
+//# sourceMappingURL=index.js.map

package/lib/components/KTextField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/KTextField/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAP,MAAuB,cAAvB;AAEA,SAAS,UAAT;AACA,eAAe,UAAf","sourcesContent":["import KTextField from './KTextField'\n\nexport { KTextField }\nexport default KTextField\n"],"sourceRoot":"","file":"index.js"}