@onereach/ui-components 4.2.0-beta.2548.0 → 4.2.0

package/dist/bundled/v3/OrCode.vue_vue_type_script_lang-f6f74339.js

@@ -1,236 +0,0 @@
-import { E as EditorView, a as EditorState, k as keymap } from './index-f5487f12.js';
-import { b as basicSetup, i as indentWithTab } from './index-16aee5bc.js';
-import { useElementHover } from '@vueuse/core';
-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-af0c4288.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-5d204461.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-5d628c6c.js';
-import { s as script$6 } from './OrLabel.vue_vue_type_script_lang-95601b40.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, {
-    emit
-  }) {
-    // 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 };

package/dist/bundled/v3/OrModal.vue_vue_type_script_lang-af0c4288.js

@@ -1,107 +0,0 @@
-import { defineComponent, ref, watch, onBeforeUnmount } from 'vue-demi';
-import _ from 'lodash';
-import { OrModalSizes } from './components/OrModal/constants.js';
-import { onClickOutside } from '@vueuse/core';
-import { u as useFocusTrap } from './useFocusTrap-9567b3c8.js';
-import './components/OrIconButtonV2/OrIconButton.js';
-import './components/OrOverlay/OrOverlay.js';
-import { s as script$2 } from './OrOverlay.vue_vue_type_script_lang-2f5d626d.js';
-import { s as script$1 } from './OrIconButton.vue_vue_type_script_lang-5d204461.js';
-
-var script = defineComponent({
-  name: 'OrModal',
-  components: {
-    OrIconButton: script$1,
-    OrOverlay: script$2
-  },
-  props: {
-    titleText: {
-      type: String,
-      required: false,
-      default: null,
-      validator: _.isString
-    },
-    showClose: {
-      type: Boolean,
-      default: true,
-      validator: _.isBoolean
-    },
-    closeOnClickOutside: {
-      type: Boolean,
-      required: false,
-      default: false,
-      validator: _.isBoolean
-    },
-    size: {
-      type: String,
-      required: false,
-      default: OrModalSizes.small
-    },
-    isOpen: {
-      type: Boolean,
-      required: true,
-      validator: _.isBoolean
-    },
-    isWithoutOverlay: {
-      type: Boolean,
-      required: false,
-      default: false,
-      validator: _.isBoolean
-    },
-    trapFocus: {
-      type: Boolean,
-      default: true,
-      validator: _.isBoolean
-    }
-  },
-  emits: ['close'],
-  setup(props, {
-    emit
-  }) {
-    const overlay = ref();
-    let container = ref(null);
-    let trap = useFocusTrap(container, {
-      immediate: props.trapFocus,
-      fallbackFocus: '.container',
-      allowOutsideClick: true
-    });
-    const handleClose = () => emit('close');
-    onClickOutside(container, evt => {
-      if (!evt.composedPath().includes(overlay.value.$el)) return;
-      if (props.closeOnClickOutside) handleClose();
-    });
-    const toggleFocusTrap = isNeedToTrap => {
-      if (isNeedToTrap && props.isOpen) {
-        trap.activate();
-      } else {
-        trap === null || trap === void 0 ? void 0 : trap.deactivate();
-      }
-    };
-    watch(() => props.trapFocus, toggleFocusTrap, {
-      immediate: true
-    });
-    watch(() => props.isOpen, isOpen => {
-      toggleFocusTrap(false);
-      if (isOpen) {
-        container = ref(null);
-      } else {
-        trap === null || trap === void 0 ? void 0 : trap.deactivate();
-      }
-    });
-    onBeforeUnmount(() => {
-      trap === null || trap === void 0 ? void 0 : trap.deactivate();
-    });
-    return {
-      container,
-      overlay,
-      handleClose
-    };
-  },
-  computed: {
-    sizeClass() {
-      return `is-${this.size}`;
-    }
-  }
-});
-
-export { script as s };