@onereach/ui-components-vue2 20.1.1 → 20.1.2

package/dist/esm/components/or-code-v3/index.js

@@ -0,0 +1,598 @@
+import { defineComponent, ref, computed, reactive, toRef, watch, onMounted, onUnmounted } from 'vue-demi';
+import { K, _, i as ie, b as re, u as ue } from '../../useValidationAttributes-DxhcSj_h-373e04c1.js';
+import { basicSetup } from 'codemirror';
+import { indentWithTab } from '@codemirror/commands';
+import { Compartment, EditorState } from '@codemirror/state';
+export { EditorState } from '@codemirror/state';
+import { keymap, EditorView } from '@codemirror/view';
+export { EditorView } from '@codemirror/view';
+import { OrErrorV3 as OrError } from '../or-error-v3/index.js';
+import { OrHintV3 as OrHint } from '../or-hint-v3/index.js';
+import { OrInputBoxV3 as OrInputBox } from '../or-input-box-v3/index.js';
+import { OrLabelV3 as OrLabel } from '../or-label-v3/index.js';
+import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
+import { OrModalV3 as OrModal } from '../or-modal-v3/index.js';
+import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3/index.js';
+export { lintGutter, linter } from '@codemirror/lint';
+export { javascript } from '@codemirror/lang-javascript';
+export { json, jsonParseLinter } from '@codemirror/lang-json';
+export { html } from '@codemirror/lang-html';
+import '../../dom-CwV-xS38-5babad01.js';
+import 'lodash/get';
+import 'lodash/isElement';
+import '@vueuse/core';
+import '@onereach/styles/screens.json';
+import '@onereach/styles/tailwind.config.json';
+import '../../types-98e9a758.js';
+import '../or-overlay-v3/index.js';
+import '../or-teleport-v3/index.js';
+import 'portal-vue';
+import '../../constants-2e3ea701.js';
+import '../or-icon-v3/index.js';
+import '../or-tooltip-v3/index.js';
+import '../or-popover-v3/index.js';
+import '@floating-ui/dom';
+import '../../extractCssVarName-IHa2pGlF-d99daa2a.js';
+import '../or-bottom-sheet-v3/index.js';
+
+const Code = [
+// Layout
+'layout-column',
+// Spacing
+'gap-xs'];
+const CodeControlRoot = [
+// Layout
+'layout-column',
+// Sizing
+'h-full',
+// Spacing
+'gap-xs'];
+const CodeControl = [
+// Layout
+'grid',
+// Box
+'w-full', 'h-full',
+// Spacing
+'!mx-0', '!my-0',
+// Theme
+'theme-background-default', 'dark:theme-background-default-dark',
+// todo: https://onereach.atlassian.net/browse/UI-580
+'dark:invert dark:hue-rotate-180'];
+const CodeModal = [
+// Sizing
+'!h-full'];
+
+var script$1 = defineComponent({
+  name: 'OrCodeControl',
+  components: {
+    OrError,
+    OrHint,
+    OrInputBox,
+    OrLabel
+  },
+  props: {
+    error: {
+      type: [String, Boolean],
+      default: undefined
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    controlId: {
+      type: String,
+      default: undefined
+    },
+    label: {
+      type: String,
+      default: undefined
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    hint: {
+      type: String,
+      default: undefined
+    }
+  },
+  expose: ['root', 'control', 'focus', 'blur'],
+  setup() {
+    // Refs
+    const root = ref();
+    const control = ref();
+    // Methods
+    function focus() {
+      var _a;
+      (_a = control.value) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    function blur() {
+      var _a;
+      (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    // Styles
+    const rootStyles = computed(() => ['or-code-control-v3', ...CodeControlRoot]);
+    const controlStyles = computed(() => [...CodeControl]);
+    return {
+      root,
+      control,
+      rootStyles,
+      controlStyles,
+      focus,
+      blur
+    };
+  }
+});
+
+/* script */
+const __vue_script__$1 = script$1;
+
+/* template */
+var __vue_render__$1 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: 'root',
+    class: _vm.rootStyles
+  }, [_c('OrLabel', {
+    attrs: {
+      "control-id": _vm.controlId,
+      "variant": 'input',
+      "required": _vm.required,
+      "disabled": _vm.disabled
+    },
+    scopedSlots: _vm._u([{
+      key: "addon",
+      fn: function () {
+        return [_vm._t("addon")];
+      },
+      proxy: true
+    }], null, true)
+  }, [_vm._t("label", function () {
+    return [_vm._v("\n      " + _vm._s(_vm.label) + "\n    ")];
+  })], 2), _vm._v(" "), _c('OrInputBox', {
+    class: ['grow'],
+    attrs: {
+      "size": 'm',
+      "invalid": !!_vm.error || !!_vm.$slots.error,
+      "readonly": _vm.readonly,
+      "disabled": _vm.disabled
+    }
+  }, [_c('div', {
+    ref: 'control',
+    class: _vm.controlStyles
+  })]), _vm._v(" "), _vm.$slots.hint || _vm.hint ? [_c('OrHint', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: !_vm.error,
+      expression: "!error"
+    }],
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  }, [_vm._t("hint", function () {
+    return [_vm._v("\n        " + _vm._s(_vm.hint) + "\n      ")];
+  })], 2)] : _vm._e(), _vm._v(" "), _c('OrError', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: typeof _vm.error === 'string' && _vm.error.length > 0 || _vm.$slots.error,
+      expression: "typeof error === 'string' && error.length > 0 || $slots.error"
+    }],
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  }, [_vm._t("error", function () {
+    return [_vm._v("\n      " + _vm._s(_vm.error) + "\n    ")];
+  })], 2)], 2);
+};
+var __vue_staticRenderFns__$1 = [];
+
+/* style */
+const __vue_inject_styles__$1 = undefined;
+/* scoped */
+const __vue_scope_id__$1 = undefined;
+/* module identifier */
+const __vue_module_identifier__$1 = undefined;
+/* functional template */
+const __vue_is_functional_template__$1 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$2 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$1,
+  staticRenderFns: __vue_staticRenderFns__$1
+}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);
+var OrCodeControl = __vue_component__$2;
+
+var CodeLanguage;
+(function (CodeLanguage) {
+  CodeLanguage["HTML"] = "html";
+  CodeLanguage["CSS"] = "css";
+  CodeLanguage["JS"] = "js";
+  CodeLanguage["TS"] = "ts";
+  CodeLanguage["JSON"] = "json";
+  CodeLanguage["MD"] = "md";
+})(CodeLanguage || (CodeLanguage = {}));
+
+var script = defineComponent({
+  name: 'OrCode',
+  components: {
+    OrModal,
+    OrCodeControl,
+    OrIconButton
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: undefined
+    },
+    language: {
+      type: String,
+      default: () => CodeLanguage.JS
+    },
+    extensions: {
+      type: Array,
+      default: () => []
+    },
+    label: {
+      type: String,
+      default: undefined
+    },
+    hint: {
+      type: String,
+      default: undefined
+    },
+    error: {
+      type: [String, Boolean],
+      default: undefined
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // todo: review flag prop, seems better to set 'false' default value
+    enableFullscreen: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
+  expose: ['root', 'editorView', 'control', 'fullscreenControl', 'modal', 'focus', 'blur', 'openFullscreen'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    const control = ref();
+    const fullscreenControl = ref();
+    const modal = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-code-v3', ...Code]);
+    const controlStyles = computed(() => [...CodeControl]);
+    const modalStyles = computed(() => [...CodeModal]);
+    const addedExtensionCompartment = new Compartment();
+    const languageExtensionCompartment = new Compartment();
+    const readonlyExtensionCompartment = new Compartment();
+    const disabledExtensionCompartment = new Compartment();
+    // State
+    const controlAttributes = reactive({
+      id: K(),
+      ..._(),
+      ...ie()
+    });
+    const proxyModelValue = re(toRef(props, 'modelValue'), context.emit);
+    const getLanguageExtension = async language => {
+      switch (language) {
+        case CodeLanguage.HTML:
+          return (await import('@codemirror/lang-html')).html();
+        case CodeLanguage.CSS:
+          return (await import('@codemirror/lang-css')).css();
+        case CodeLanguage.JS:
+          return (await import('@codemirror/lang-javascript')).javascript();
+        case CodeLanguage.TS:
+          return (await import('@codemirror/lang-javascript')).javascript({
+            typescript: true
+          });
+        case CodeLanguage.JSON:
+          return (await import('@codemirror/lang-json')).json();
+        case CodeLanguage.MD:
+          return (await import('@codemirror/lang-markdown')).markdown();
+      }
+    };
+    // Methods
+    function focus() {
+      var _a, _b;
+      (_b = (_a = control.value) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+    function blur() {
+      var _a, _b;
+      (_b = (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+    function openFullscreen() {
+      var _a, _b;
+      (_b = (_a = modal.value) === null || _a === void 0 ? void 0 : _a.open) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+    // #region Codemirror
+    const theme = ue();
+    const defaultExtensions = [basicSetup, keymap.of([indentWithTab]), EditorView.domEventHandlers({
+      input: event => {
+        context.emit('input', event);
+      },
+      keydown: event => {
+        context.emit('keydown', event);
+      },
+      keyup: event => {
+        context.emit('keyup', event);
+      },
+      focus: event => {
+        context.emit('focus', event);
+      },
+      blur: event => {
+        context.emit('blur', event);
+      }
+    }), EditorView.theme({
+      '&': {
+        overflow: 'hidden',
+        color: theme.textColor['on-background'],
+        backgroundColor: theme.backgroundColor['background']
+      },
+      '&.cm-focused': {
+        outline: 'none'
+      },
+      '.cm-scroller': {
+        fontFamily: theme.fontFamily['caption'],
+        fontWeight: theme.fontWeight['caption'],
+        fontSize: theme.fontSize['caption'],
+        lineHeight: theme.lineHeight['caption']
+      },
+      '.cm-gutters': {
+        color: theme.textColor['on-background'],
+        backgroundColor: theme.backgroundColor['primary-opacity-0-12'],
+        borderColor: theme.borderColor['outline'],
+        backdropFilter: 'blur(2px)'
+      },
+      '.cm-activeLineGutter, .cm-activeLine': {
+        backgroundColor: theme.backgroundColor['primary-opacity-0-08']
+      }
+    })];
+    const state = EditorState.create({
+      doc: proxyModelValue.value,
+      extensions: [...defaultExtensions, languageExtensionCompartment.of([]), addedExtensionCompartment.of(props.extensions), readonlyExtensionCompartment.of([EditorState.readOnly.of(props.readonly)]), disabledExtensionCompartment.of([EditorView.editable.of(!props.disabled)])]
+    });
+    const editorView = new EditorView({
+      state,
+      dispatch: transaction => {
+        editorView.update([transaction]);
+        if (transaction.docChanged) {
+          proxyModelValue.value = String(editorView.state.doc);
+        }
+      }
+    });
+    watch(proxyModelValue, value => {
+      if (editorView.composing) return;
+      if (editorView.state.doc.toString() === value) return;
+      const modelValue = value !== null && value !== void 0 ? value : '';
+      const {
+        selection
+      } = editorView.state;
+      editorView.dispatch({
+        changes: {
+          from: 0,
+          to: editorView.state.doc.length,
+          insert: modelValue
+        },
+        selection: selection.ranges.some(range => range.to > modelValue.length) ? {
+          anchor: modelValue.length
+        } : selection
+      });
+    });
+    watch([() => props.extensions, () => props.language, () => props.readonly, () => props.disabled], async ([extensions, language, readonly, disabled], [, prevLanguage, pevReadonly, pevDisabled]) => {
+      let effects = [];
+      if (readonly !== pevReadonly) {
+        effects.push(readonlyExtensionCompartment.reconfigure(EditorState.readOnly.of(readonly)));
+      }
+      if (disabled !== pevDisabled) {
+        effects.push(disabledExtensionCompartment.reconfigure(EditorView.editable.of(!disabled)));
+      }
+      if (language !== prevLanguage) {
+        const languageExt = await getLanguageExtension(language);
+        effects.push(languageExtensionCompartment.reconfigure([languageExt]));
+      }
+      effects.push(addedExtensionCompartment.reconfigure(extensions));
+      editorView.dispatch({
+        effects
+      });
+    }, {
+      immediate: true
+    });
+    // #endregion
+    // Effects
+    watch(() => {
+      var _a;
+      return (_a = modal.value) === null || _a === void 0 ? void 0 : _a.state;
+    }, value => {
+      setTimeout(() => {
+        var _a, _b, _c, _d;
+        if (value === 'open') {
+          (_b = (_a = fullscreenControl.value) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.append(editorView.dom);
+        } else {
+          (_d = (_c = control.value) === null || _c === void 0 ? void 0 : _c.control) === null || _d === void 0 ? void 0 : _d.append(editorView.dom);
+        }
+      });
+    });
+    // Lifecycle
+    onMounted(() => {
+      var _a, _b;
+      (_b = (_a = control.value) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.append(editorView.dom);
+    });
+    onUnmounted(() => {
+      editorView.destroy();
+    });
+    return {
+      root,
+      editorView,
+      control,
+      fullscreenControl,
+      modal,
+      rootStyles,
+      controlStyles,
+      modalStyles,
+      controlAttributes,
+      proxyModelValue,
+      focus,
+      blur,
+      openFullscreen
+    };
+  }
+});
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: 'root',
+    class: _vm.rootStyles
+  }, [_c('OrCodeControl', {
+    ref: 'control',
+    attrs: {
+      "control-id": _vm.controlAttributes.id,
+      "label": _vm.label,
+      "hint": _vm.hint,
+      "error": _vm.error,
+      "disabled": _vm.disabled,
+      "readonly": _vm.readonly
+    },
+    scopedSlots: _vm._u([{
+      key: "label",
+      fn: function () {
+        return [_vm._t("label", function () {
+          return [_vm._v("\n        " + _vm._s(_vm.label) + "\n      ")];
+        })];
+      },
+      proxy: true
+    }, {
+      key: "addon",
+      fn: function () {
+        return [_c('div', {
+          class: ['layout-row', 'gap-xs']
+        }, [_vm._t("addon"), _vm._v(" "), _vm.enableFullscreen ? _c('OrIconButton', {
+          attrs: {
+            "icon": 'fullscreen'
+          },
+          on: {
+            "click": function ($event) {
+              $event.stopPropagation();
+              return _vm.openFullscreen();
+            }
+          }
+        }) : _vm._e()], 2)];
+      },
+      proxy: true
+    }, {
+      key: "hint",
+      fn: function () {
+        return [_vm._t("hint", function () {
+          return [_vm._v("\n        " + _vm._s(_vm.hint) + "\n      ")];
+        })];
+      },
+      proxy: true
+    }, _vm.$slots.error ? {
+      key: "error",
+      fn: function () {
+        return [_vm._t("error")];
+      },
+      proxy: true
+    } : null], null, true)
+  }), _vm._v(" "), _c('OrModal', {
+    ref: 'modal',
+    attrs: {
+      "additional-styles": _vm.modalStyles,
+      "size": 'l'
+    },
+    scopedSlots: _vm._u([{
+      key: "header",
+      fn: function () {
+        return [_vm._t("label", function () {
+          return [_vm._v("\n        " + _vm._s(_vm.label) + "\n      ")];
+        })];
+      },
+      proxy: true
+    }, _vm.$slots.modalFooter ? {
+      key: "footer",
+      fn: function () {
+        return [_vm._t("modalFooter")];
+      },
+      proxy: true
+    } : null], null, true)
+  }, [_vm._v(" "), _c('OrCodeControl', {
+    ref: 'fullscreenControl',
+    attrs: {
+      "control-id": _vm.controlAttributes.id,
+      "hint": _vm.hint,
+      "error": _vm.error,
+      "disabled": _vm.disabled,
+      "readonly": _vm.readonly
+    },
+    scopedSlots: _vm._u([{
+      key: "addon",
+      fn: function () {
+        return [_vm._t("addon")];
+      },
+      proxy: true
+    }, _vm.$slots.error ? {
+      key: "error",
+      fn: function () {
+        return [_vm._t("error")];
+      },
+      proxy: true
+    } : null], null, true)
+  })], 1)], 1);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = undefined;
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+var __vue_component__$1 = __vue_component__;
+
+export { CodeLanguage, __vue_component__$1 as OrCodeV3 };

package/dist/{esm-deps → esm}/components/or-confirm-v3/index.js

@@ -1,7 +1,7 @@
 import { useMagicKeys, whenever, onClickOutside } from '@vueuse/core';
-import { computed, defineComponent, ref, toRef, watch } from 'vue-demi';
-import { resolveUnref } from '@vueuse/shared';
-import { a as te } from '../../useValidationAttributes-DxhcSj_h-39556969.js';
+import { logicAnd } from '@vueuse/math';
+import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
+import { a as te } from '../../useValidationAttributes-DxhcSj_h-373e04c1.js';
 import { OrOverlayV3 as OrOverlay } from '../or-overlay-v3/index.js';
 import { OrButtonV3 as OrButton } from '../or-button-v3/index.js';
 import { OrInputV3 as OrInput } from '../or-input-v3/index.js';
@@ -10,9 +10,11 @@ import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
 import '../../dom-CwV-xS38-5babad01.js';
 import 'lodash/get';
 import 'lodash/isElement';
+import '@onereach/styles/screens.json';
+import '@onereach/styles/tailwind.config.json';
 import '../or-teleport-v3/index.js';
 import 'portal-vue';
-import '../../constants-873d04a2.js';
+import '../../constants-2e3ea701.js';
 import '../or-loader-v3/index.js';
 import '../or-error-v3/index.js';
 import '../or-hint-v3/index.js';
@@ -20,9 +22,7 @@ import '../or-icon-v3/index.js';
 import '../or-icon-button-v3/index.js';
 import '../or-tooltip-v3/index.js';
 import '../or-popover-v3/index.js';
-import '@floating-ui/core';
-import '@floating-ui/utils';
-import '@floating-ui/utils/dom';
+import '@floating-ui/dom';
 import '../../extractCssVarName-IHa2pGlF-d99daa2a.js';
 import '../or-bottom-sheet-v3/index.js';
 import '../or-input-box-v3/index.js';
@@ -30,10 +30,6 @@ import '../../types-98e9a758.js';
 import '../or-label-v3/index.js';
 import '../../style-inject.es-87955792.js';
 
-function logicAnd(...args) {
-  return computed(() => args.every((i) => resolveUnref(i)));
-}
-
 var ConfirmType;
 (function (ConfirmType) {
   ConfirmType["D"] = "d";

package/dist/{esm-deps → esm}/components/or-context-menu-v3/index.js

@@ -1,5 +1,5 @@
 import { defineComponent, toRefs, watch, ref } from 'vue-demi';
-import { a as te } from '../../useValidationAttributes-DxhcSj_h-39556969.js';
+import { a as te } from '../../useValidationAttributes-DxhcSj_h-373e04c1.js';
 import { OrMenuV3 as OrMenu } from '../or-menu-v3/index.js';
 import { PopoverPlacement } from '../or-popover-v3/index.js';
 import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
@@ -7,9 +7,9 @@ import '../../dom-CwV-xS38-5babad01.js';
 import 'lodash/get';
 import 'lodash/isElement';
 import '@vueuse/core';
-import '@floating-ui/core';
-import '@floating-ui/utils';
-import '@floating-ui/utils/dom';
+import '@onereach/styles/screens.json';
+import '@onereach/styles/tailwind.config.json';
+import '@floating-ui/dom';
 import '../../extractCssVarName-IHa2pGlF-d99daa2a.js';
 import '../or-bottom-sheet-v3/index.js';
 import '../or-overlay-v3/index.js';