@ozdao/martyrs 0.2.540 → 0.2.542

package/src/components/FieldTags/vue-tags-input.props.js

@@ -1,342 +0,0 @@
-// The file contains all props and validators which are provided by the component
-
-const propValidatorTag = value => {
-  return !value.some(t => {
-    const invalidText = !t.text;
-    if (invalidText) console.warn('Missing property "text"', t);
-
-    let invalidClasses = false;
-    if (t.classes) invalidClasses = typeof t.classes !== 'string';
-    if (invalidClasses) console.warn('Property "classes" must be type of string', t);
-
-    return invalidText || invalidClasses;
-  });
-};
-
-const propValidatorStringNumeric = value => {
-  return !value.some(v => {
-    if (typeof v === 'number') {
-      const numeric = isFinite(v) && Math.floor(v) === v;
-      if (!numeric) console.warn('Only numerics are allowed for this prop. Found:', v);
-      return !numeric;
-    } else if (typeof v === 'string') {
-      /*
-       * Regex: || Not totally fool-proof yet, still matches "0a" and such
-       * - allow non-word characters (aka symbols e.g. ;, :, ' etc)
-       * - allow alpha characters
-       * - deny numbers
-       */
-      const string = /\W|[a-z]|!\d/i.test(v);
-      if (!string) console.warn('Only alpha strings are allowed for this prop. Found:', v);
-      return !string;
-    } else {
-      console.warn('Only numeric and string values are allowed. Found:', v);
-      return false;
-    }
-  });
-};
-
-export default {
-  /**
-   * @description Property to bind a model to the input.
-     If the user changes the input value, the model updates, too.
-     If the user presses enter with an valid input,
-     a new tag is created with the value of this model.
-     After creating the new tag, the model is cleared.
-   * @property {props}
-   * @required
-   * @type {String}
-   * @model
-   * @default ''
-   */
-  modelValue: {
-    type: String,
-    default: '',
-    required: true,
-  },
-  /**
-   * @description Pass an array containing objects like in the example below.
-     The properties 'style' and 'class' are optional. Of course it is possible to add custom
-     properties to a tag object. vue-tags-input won't change the key and value.
-   * @property {props}
-   * @type {Array}
-   * @sync
-   * @default []
-   * @example
-    {
-     text: 'My tag value', /* The visible text on display */
-     style: 'background-color: #ccc', /* Adding inline styles is possible */
-     classes: 'custom-class another', /* The value will be added as css classes */
-    }
-   */
-  tags: {
-    type: Array,
-    default: () => [],
-    validator: propValidatorTag,
-  },
-  /**
-   * @description Expects an array containing objects inside. The objects
-    can have the same properties as a tag object.
-   * @property {props}
-   * @type {Array}
-   * @default []
-   */
-  autocompleteItems: {
-    type: Array,
-    default: () => [],
-    validator: propValidatorTag,
-  },
-  /**
-   * @description Defines whether a tag is editable after creation or not.
-   * @property {props}
-   * @type {Boolean}
-   * @default false
-   */
-  allowEditTags: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * @description Defines if duplicate autocomplete items are filtered out from the view or not.
-   * @property {props}
-   * @type {Boolean}
-   * @default true
-   */
-  autocompleteFilterDuplicates: {
-    default: true,
-    type: Boolean,
-  },
-  /**
-   * @description If it's true, the user can add tags only via the autocomplete layer.
-   * @property {props}
-   * @type {Boolean}
-   * @default false
-   */
-  addOnlyFromAutocomplete: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * @description The minimum character length which is required
-     until the autocomplete layer is shown. If set to 0,
-     then it'll be shown on focus.
-   * @property {props}
-   * @type {Number}
-   * @default 1
-   */
-  autocompleteMinLength: {
-    type: Number,
-    default: 1,
-  },
-  /**
-   * @description If it's true, the autocomplete layer is always shown, regardless if
-     an input or an autocomplete items exists.
-   * @property {props}
-   * @type {Boolean}
-   * @default false
-   */
-  autocompleteAlwaysOpen: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * @description Property to disable vue-tags-input.
-   * @property {props}
-   * @type {Boolean}
-   * @default false
-   */
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * @description The placeholder text which is shown in the input, when it's empty.
-   * @property {props}
-   * @type {String}
-   * @default Add Tag
-   */
-  placeholder: {
-    type: String,
-    default: 'Add Tag',
-  },
-  /**
-   * @description Custom trigger key codes can be registrated. If the user presses one of these,
-     a tag will be generated out of the input value. Can be either a numeric keyCode or the key
-     as a string.
-   * @property {props}
-   * @type {Array}
-   * @default [13]
-   * @example add-on-key="[13, ':', ';']"
-   */
-  addOnKey: {
-    type: Array,
-    default: () => [13],
-    validator: propValidatorStringNumeric,
-  },
-  /**
-   * @description Custom trigger key codes can be registrated. If the user edits a tag
-     and presses one of these, the edited tag will be saved.
-     Can be either a numeric keyCode or the key as a string.
-   * @property {props}
-   * @type {Array}
-   * @default [13]
-   * @example save-on-key="[13, ':', ';']"
-   */
-  saveOnKey: {
-    type: Array,
-    default: () => [13],
-    validator: propValidatorStringNumeric,
-  },
-  /**
-   * @description The maximum amount the tags array is allowed to hold.
-   * @property {props}
-   * @type {Number}
-   */
-  maxTags: {
-    type: Number,
-  },
-  /**
-   * @description The maximum amount of characters the input is allowed to hold.
-   * @property {props}
-   * @type {Number}
-   */
-  maxlength: {
-    type: Number,
-  },
-  /**
-   * @description Pass an array containing objects like in the example below.
-     The property 'classes' will be added as css classes, if the property 'rule' matches the text
-     of a tag, an autocomplete item or the input. The property 'rule' can be type of
-     RegExp or function. If the property 'disableAdd' is 'true', the item can't be added
-     to the tags array, if the appropriated rule matches.
-   * @property {props}
-   * @type {Array}
-   * @default []
-   * @example
-    {
-     classes: 'class', /* css class */
-     rule: /^([^0-9]*)$/, /* RegExp */
-    }, {
-     classes: 'no-braces', /* css class */
-     rule(text) { /* function with text as param */
-      return text.indexOf('{') !== -1 || text.indexOf('}') !== -1;
-     },
-     disableAdd: true, /* if the rule matches, the item cannot be added */,
-    },
-   */
-  validation: {
-    type: Array,
-    default: () => [],
-    validator(value) {
-      return !value.some(v => {
-        const missingRule = !v.rule;
-        if (missingRule) console.warn('Property "rule" is missing', v);
-
-        const validRule = v.rule && (typeof v.rule === 'string' || v.rule instanceof RegExp || {}.toString.call(v.rule) === '[object Function]');
-
-        if (!validRule) {
-          console.warn('A rule must be type of string, RegExp or function. Found:', JSON.stringify(v.rule));
-        }
-
-        const missingClasses = !v.classes;
-        if (missingClasses) console.warn('Property "classes" is missing', v);
-
-        const invalidType = v.type && typeof v.type !== 'string';
-        if (invalidType) console.warn('Property "type" must be type of string. Found:', v);
-
-        return !validRule || missingRule || missingClasses || invalidType;
-      });
-    },
-  },
-  /**
-   * @description Defines the characters which splits a text into different pieces,
-     to generate tags out of this pieces.
-   * @property {props}
-   * @type {Array}
-   * @default [';']
-   * @example
-     separators: [';', ',']
-     input: some; user input, has random; commas, an,d semicolons
-     will split into: some - user input - has random - commas - an - d semicolons
-   */
-  separators: {
-    type: Array,
-    default: () => [';'],
-    validator(value) {
-      return !value.some(s => {
-        const invalidType = typeof s !== 'string';
-        if (invalidType) console.warn('Separators must be type of string. Found:', s);
-        return invalidType;
-      });
-    },
-  },
-  /**
-   * @description If it's true, the user can't add or save a tag,
-     if another exists, with the same text value.
-   * @property {props}
-   * @type {Boolean}
-   * @default true
-   */
-  avoidAddingDuplicates: {
-    type: Boolean,
-    default: true,
-  },
-  /**
-   * @description If the input holds a value and loses the focus,
-     a tag will be generated out of this value, if possible.
-   * @property {props}
-   * @type {Boolean}
-   * @default true
-   */
-  addOnBlur: {
-    type: Boolean,
-    default: true,
-  },
-  /**
-   * @description Custom function to detect duplicates. If the function returns 'true',
-    the tag will be marked as duplicate.
-   * @property {props}
-   * @type {Function}
-   * @param {Array} tagsarray The Array of tags minus the one which is edited/created.
-   * @param {Object} tag The tag which is edited or should be added to the tags array.
-   * @example
-     // The duplicate function to recreate the default behaviour, would look like this:
-     isDuplicate(tags, tag) {
-      return tags.map(t => t.text).indexOf(tag.text) !== -1;
-    }
-   */
-  isDuplicate: {
-    type: Function,
-    default: null,
-  },
-  /**
-   * @description If it's true, the user can paste into the input element and
-     vue-tags-input will create tags out of the incoming text.
-   * @property {props}
-   * @type {Boolean}
-   * @default true
-   */
-  addFromPaste: {
-    type: Boolean,
-    default: true,
-  },
-  /**
-   * @description Defines if it's possible to delete tags by pressing backspace.
-     If so and the user wants to delete a tag,
-     the tag gets the css class 'deletion-mark' for 1 second.
-     If the user presses backspace again in that time period,
-     the tag is removed from the tags array and the view.
-   * @property {props}
-   * @type {Boolean}
-   * @default true
-   */
-  deleteOnBackspace: {
-    default: true,
-    type: Boolean,
-  },
-  // event handlers
-  onBeforeAddingTag: Function,
-  onBeforeDeletingTag: Function,
-  onBeforeEditingTag: Function,
-  onBeforeSavingTag: Function,
-};

package/src/components/FieldTags/vue-tags-input.scss

@@ -1,149 +0,0 @@
-$error: #e54d42;
-$success: #68cd86;
-$warn: #ffb648;
-
-.ti-icon-check:before {
-  content: "\e902";
-  font-size: 0.5rem;
-}
-
-.ti-icon-close:before {
-  content: "✕";
-  font-size: 0.5rem;
-}
-
-.ti-icon-undo:before {
-  content: "↺";
-  font-size: 0.5rem;
-}
-
-ul {
-  margin: 0px;
-  padding: 0px;
-  list-style-type: none;
-}
-
-*, *:before, *:after {
-  box-sizing: border-box;
-}
-
-input:focus {
-  outline: none;
-}
-
-input[disabled] {
-  background-color: transparent;
-}
-
-div.vue-tags-input.disabled {
-  opacity: 0.5;
-
-  * {
-    cursor: default;
-  }
-}
-
-.ti-input {
-  display: flex;
-}
-
-.ti-tags {
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-  line-height: 1em;
-}
-
-.ti-tag {
-  background-color: rgb(var(--main));
-  color: rgb(var(--black));
-  border-radius: 4rem;
-  display: flex;
-  padding: 1px 8px 2px;
-  margin: 2px;
-  font-size: .85em;
-  min-height: 2rem;
-
-  &:focus {
-    outline: none;
-  }
-
-  .ti-content {
-    display: flex;
-    align-items: center;
-  }
-
-  .ti-tag-center {
-    position: relative;
-  }
-
-  span {
-    line-height: .85em;
-  }
-
-  span.ti-hidden {
-    padding-left: 14px;
-    visibility: hidden;
-    height: 0px;
-    white-space: pre;
-  }
-
-  .ti-actions {
-    margin-left: 2px;
-    display: flex;
-    align-items: center;
-    font-size: 1.15em;
-
-    i {
-      cursor: pointer;
-    }
-  }
-
-  &:last-child {
-    margin-right: 4px;
-  }
-
-  &.ti-invalid, &.ti-tag.ti-deletion-mark {
-    background-color: $error;
-  }
-}
-
-.ti-new-tag-input-wrapper {
-  display: flex;
-  flex: 1 0 auto;
-  padding: 3px 5px;
-  margin: 2px;
-  font-size: .85em;
-
-  input {
-    flex: 1 0 auto;
-    min-width: 100px;
-    border: none;
-    padding: 0px;
-    margin: 0px;
-  }
-}
-
-.ti-new-tag-input {
-  line-height: initial;
-}
-
-.ti-autocomplete {
-  border-top: none;
-  position: absolute;
-  width: 100%;
-  left: 0;
-  top: 110%;
-  z-index: 20;
-}
-
-.ti-item > div {
-  cursor: pointer;
-  padding: 3px 6px;
-  width: 100%;
-}
-
-.ti-selected-item {
-  background-color: rgb(var(--main));
-  color: #fff;
-}