@onereach/ui-components 8.4.0-beta.3653.0 → 8.4.0

package/dist/bundled/v3/OrChips.vue_vue_type_script_lang-e1f37564.js

@@ -0,0 +1,192 @@
+import { defineComponent } from 'vue-demi';
+import './components/OrChip/OrChip.js';
+import { OR_CHIPS_VALUE_PROP, PLACEHOLDER_PROP } from './components/OrChips/constants.js';
+import { s as script$2 } from './OrChip.vue_vue_type_script_lang-cacd81e5.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, withModifiers, Fragment, renderList, createBlock, createElementVNode } from 'vue';
+import { s as styleInject } from './style-inject.es-4c6f2515.js';
+import './components/OrLabel/OrLabel.js';
+import './components/OrError/OrError.js';
+import { s as script$3 } from './OrLabel.vue_vue_type_script_lang-6243e348.js';
+import { s as script$4 } from './OrError.vue_vue_type_script_lang-450321b8.js';
+
+var script$1 = defineComponent({
+  name: 'OrChipsInput',
+  components: {
+    OrChip: script$2
+  },
+  props: {
+    chips: OR_CHIPS_VALUE_PROP,
+    placeholder: PLACEHOLDER_PROP,
+    input: {
+      type: String,
+      default: ''
+    },
+    duplicateAtIndex: {
+      type: Number,
+      default: -1
+    },
+    isFocused: Boolean,
+    isDisabled: Boolean,
+    isInvalid: Boolean
+  },
+  emits: ['add-chip', 'delete-chip', 'input-change', 'focus', 'blur'],
+  computed: {
+    placeholderText() {
+      return this.chips && this.chips.length ? '' : this.placeholder;
+    },
+    states() {
+      return {
+        error: this.isInvalid,
+        disabled: this.isDisabled
+      };
+    }
+  },
+  watch: {
+    isFocused: {
+      handler(isFocused) {
+        const ref = this.$refs['or-chips-input'];
+        if (ref) {
+          isFocused ? ref.focus() : ref.blur();
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    getOrChipColor(index) {
+      return this.duplicateAtIndex === index ? 'error' : '';
+    },
+    /* Help user to put input in focus by clicking on empty space  */
+    handleContentClick(event) {
+      const CONTENT_CLASS = 'or-chips-input';
+      const target = event.target;
+      if (target.classList.contains(CONTENT_CLASS)) {
+        this.$emit('focus');
+      }
+    }
+  }
+});
+
+const _hoisted_1 = ["value", "placeholder", "disabled"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_chip = resolveComponent("or-chip");
+  return openBlock(), createElementBlock("form", {
+    class: normalizeClass(["or-chips-input", _ctx.states]),
+    onClick: _cache[2] || (_cache[2] = function () {
+      return _ctx.handleContentClick && _ctx.handleContentClick(...arguments);
+    }),
+    onSubmit: _cache[3] || (_cache[3] = withModifiers($event => _ctx.$emit('add-chip'), ["prevent"]))
+  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.chips, (item, index) => {
+    return openBlock(), createBlock(_component_or_chip, {
+      key: index,
+      content: item,
+      color: _ctx.getOrChipColor(index),
+      "is-disabled": _ctx.isDisabled,
+      onDelete: $event => _ctx.$emit('delete-chip', index)
+    }, null, 8 /* PROPS */, ["content", "color", "is-disabled", "onDelete"]);
+  }), 128 /* KEYED_FRAGMENT */)), createElementVNode("input", {
+    ref: "or-chips-input",
+    value: _ctx.input,
+    placeholder: _ctx.placeholderText,
+    disabled: _ctx.isDisabled,
+    class: "or-chips-input-element",
+    onInput: _cache[0] || (_cache[0] = $event => _ctx.$emit('input-change', $event.target.value)),
+    onBlur: _cache[1] || (_cache[1] = $event => _ctx.$emit('blur'))
+  }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_1)], 34 /* CLASS, HYDRATE_EVENTS */);
+}
+
+var css_248z = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-4beb72e1 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-4beb72e1 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-chips-input[data-v-4beb72e1] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  padding: 0.125rem 0.5rem;\n  background-color: var(--c-neutral-1);\n  border: 1px solid var(--c-neutral-2);\n  border-radius: 0.25rem;\n}\n.or-chips-input.error[data-v-4beb72e1] {\n  border-color: var(--c-error);\n}\n.or-chips-input.disabled[data-v-4beb72e1] {\n  cursor: not-allowed;\n}\n.or-chips-input.disabled .or-chips-input-element[data-v-4beb72e1] {\n  cursor: not-allowed;\n}\n.or-chips-input-element[data-v-4beb72e1] {\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 1.875rem;\n  margin: 0 0.125rem;\n  font-size: var(--fs-1);\n  background: transparent;\n  border: none;\n  outline: none;\n}\n.or-chips-input .or-chip[data-v-4beb72e1] {\n  margin: 0.125rem;\n}";
+styleInject(css_248z);
+
+script$1.render = render;
+script$1.__scopeId = "data-v-4beb72e1";
+script$1.__file = "src/components/or-chips/partials/OrChipsInput.vue";
+
+var script = defineComponent({
+  name: 'OrChips',
+  components: {
+    OrChipsInput: script$1,
+    OrLabel: script$3,
+    OrError: script$4
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    label: {
+      type: String,
+      default: ''
+    },
+    error: {
+      type: String,
+      default: ''
+    },
+    modelValue: OR_CHIPS_VALUE_PROP,
+    placeholder: PLACEHOLDER_PROP,
+    isRequired: Boolean,
+    isDisabled: Boolean,
+    isInvalid: Boolean
+  },
+  emits: ['update:modelValue', 'blur', 'focus', 'add-chip', 'delete-chip'],
+  data() {
+    return {
+      input: '',
+      duplicateAtIndex: -1,
+      isFocused: false
+    };
+  },
+  computed: {
+    hasDuplicates() {
+      return this.duplicateAtIndex !== -1;
+    }
+  },
+  watch: {
+    input: {
+      handler() {
+        this.checkForDuplicates();
+      },
+      immediate: true
+    },
+    modelValue: {
+      handler() {
+        this.checkForDuplicates();
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    handleFocus() {
+      this.isFocused = true;
+      this.$emit('focus');
+    },
+    handleAddChip(args) {
+      const isNotEmpty = !!this.input;
+      const hasNoDuplicate = this.duplicateAtIndex === -1;
+      if (isNotEmpty && hasNoDuplicate) {
+        const value = [...this.modelValue, this.input];
+        this.input = '';
+        this.$emit('update:modelValue', value);
+      }
+      this.isFocused = !args.blur;
+      if (!this.isFocused) {
+        this.$emit('blur', this.modelValue);
+      }
+      this.$emit('add-chip', this.modelValue);
+    },
+    handleDeleteChip(index) {
+      const value = [...this.modelValue];
+      value.splice(index, 1);
+      this.$emit('update:modelValue', value);
+      this.$emit('delete-chip', value);
+    },
+    checkForDuplicates() {
+      const input = this.input.trim();
+      this.duplicateAtIndex = this.modelValue.findIndex(chip => {
+        return chip === input;
+      });
+    }
+  }
+});
+
+export { script as s };

package/dist/bundled/v3/OrCode.vue_vue_type_script_lang-8376244c.js

@@ -0,0 +1,237 @@
+import { E as EditorView, a as EditorState, k as keymap } from './index-d32c767e.js';
+import { b as basicSetup, i as indentWithTab } from './index-59ae65a4.js';
+import { u as useElementHover } from './index-06852368.js';
+import { defineComponent, ref } from 'vue-demi';
+import script$3 from './components/OrTeleport/OrTeleport.js';
+import { OrCodeLanguages } from './components/OrCode/constants.js';
+import languages from './components/OrCode/lang.js';
+import theme from './components/OrCode/theme.js';
+import './components/OrIconButtonV2/OrIconButton.js';
+import './components/OrModal/OrModal.js';
+import { s as script$2 } from './OrModal.vue_vue_type_script_lang-70904ce1.js';
+import './components/OrError/OrError.js';
+import './components/OrHint/OrHint.js';
+import './components/OrLabel/OrLabel.js';
+import { s as script$1 } from './OrIconButton.vue_vue_type_script_lang-f6bf7dda.js';
+import { s as script$4 } from './OrError.vue_vue_type_script_lang-450321b8.js';
+import { s as script$5 } from './OrHint.vue_vue_type_script_lang-5eb3ee22.js';
+import { s as script$6 } from './OrLabel.vue_vue_type_script_lang-6243e348.js';
+
+//partially based on https://github.com/logue/vue-codemirror6/blob/master/src/components/CodeMirror.vue
+var script = defineComponent({
+  name: 'OrCode',
+  components: {
+    OrIconButton: script$1,
+    OrModal: script$2,
+    OrTeleport: script$3,
+    OrError: script$4,
+    OrHint: script$5,
+    OrLabel: script$6
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    label: {
+      type: String,
+      default: '',
+      required: false
+    },
+    modelValue: {
+      type: String,
+      default: '',
+      required: false
+    },
+    language: {
+      type: [Object, String],
+      required: false,
+      default: OrCodeLanguages.JS
+    },
+    isReadonly: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    extensions: {
+      type: Array,
+      required: false,
+      default: () => [basicSetup]
+    },
+    phrases: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    isShowingFullscreen: {
+      type: Boolean,
+      default: true,
+      required: false
+    },
+    isInvalid: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    error: {
+      type: String,
+      default: '',
+      required: false
+    },
+    hint: {
+      type: String,
+      default: '',
+      required: false
+    },
+    allowPaste: {
+      type: Boolean,
+      default: true
+    },
+    allowDrop: {
+      type: Boolean,
+      default: true
+    },
+    lineWrapping: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:modelValue', 'focus', 'blur'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    // editor config
+    const root = ref();
+    const target = ref();
+    const fullscreenTarget = ref();
+    const isHovered = useElementHover(root);
+    const editor = new EditorView({
+      state: EditorState.create({
+        doc: props.modelValue
+      }),
+      dispatch: tr => {
+        editor.update([tr]);
+        if (tr.changes.empty) return;
+        emit('update:modelValue', editor.state.doc.toString());
+      }
+    });
+    return {
+      root,
+      target,
+      fullscreenTarget,
+      editor,
+      isHovered
+    };
+  },
+  data() {
+    return {
+      isFullscreen: false
+    };
+  },
+  computed: {
+    localLanguage() {
+      if (Object.values(OrCodeLanguages).includes(this.language)) {
+        return languages[this.language];
+      } else {
+        return this.language;
+      }
+    },
+    localExtensions() {
+      const {
+        allowDrop,
+        allowPaste,
+        lineWrapping,
+        extensions
+      } = this;
+      let ext = [theme, EditorView.baseTheme({}),
+      // locale settings
+      this.phrases ? EditorState.phrases.of(this.phrases) : undefined,
+      // Parser language setting
+      this.localLanguage,
+      // Editable option
+      EditorView.editable.of(!this.isReadonly),
+      // Focus and blur listener
+      EditorView.updateListener.of(viewUpdate => {
+        if (viewUpdate.focusChanged) {
+          viewUpdate.view.hasFocus ? this.$emit('focus') : this.$emit('blur', viewUpdate.state.doc.toString());
+        }
+      }), EditorView.domEventHandlers({
+        drop(event) {
+          if (!allowDrop) {
+            event.preventDefault();
+            return true;
+          }
+        },
+        paste(event) {
+          if (!allowPaste) {
+            event.preventDefault();
+            return true;
+          }
+        }
+      }),
+      // line wrapping
+      lineWrapping ? EditorView.lineWrapping : undefined, keymap.of([indentWithTab])];
+      if (Array.isArray(extensions)) {
+        ext = [...ext, ...extensions];
+      }
+      ext = ext.filter(Boolean);
+      return ext;
+    },
+    isShowingError() {
+      return !!this.error && this.isInvalid;
+    },
+    isShowingHint() {
+      return !!this.hint && !this.isShowingError;
+    },
+    isShowingHeader() {
+      var _a;
+      return this.isShowingFullscreen || this.$slots.label || this.$slots.actions || ((_a = this.$scopedSlots) === null || _a === void 0 ? void 0 : _a.actions);
+    }
+  },
+  watch: {
+    modelValue(value) {
+      if (this.editor.composing) return;
+      if (this.editor.state.doc.toString() === value) return;
+      const previous = this.editor.state.selection;
+      this.editor.setState(EditorState.create({
+        doc: value,
+        extensions: this.localExtensions,
+        selection: previous.ranges.some(range => range.to > value.length) ? {
+          anchor: value.length
+        } : previous
+      }));
+    },
+    isFullscreen(value) {
+      if (value) {
+        this.fullscreenTarget.append(this.editor.dom);
+      } else {
+        this.target.append(this.editor.dom);
+      }
+    },
+    localExtensions() {
+      this.updateEditorState();
+    }
+  },
+  mounted() {
+    this.updateEditorState();
+    this.target.append(this.editor.dom);
+  },
+  beforeUnmount() {
+    var _a;
+    (_a = this.editor) === null || _a === void 0 ? void 0 : _a.destroy();
+  },
+  methods: {
+    updateEditorState() {
+      this.editor.setState(EditorState.create({
+        doc: this.modelValue,
+        extensions: this.localExtensions
+      }));
+    },
+    toggleFullscreen(value) {
+      this.isFullscreen = value === undefined ? !this.isFullscreen : value;
+    }
+  }
+});
+
+export { script as s };