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

package/dist/bundled/v3/components/OrCodeV3/OrCode.js

@@ -0,0 +1,57 @@
+import { s as script } from '../../OrCode.vue_vue_type_script_lang-e8ef6dee.js';
+export { s as default } from '../../OrCode.vue_vue_type_script_lang-e8ef6dee.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, createElementVNode, renderSlot, createBlock, withModifiers, createCommentVNode, createSlots, createTextVNode, toDisplayString } from 'vue';
+
+const _hoisted_1 = {
+  class: /*#__PURE__*/normalizeClass(['layout-row', 'gap-xs'])
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrIconButton = resolveComponent("OrIconButton");
+  const _component_OrCodeControl = resolveComponent("OrCodeControl");
+  const _component_OrModal = resolveComponent("OrModal");
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles)
+  }, [createVNode(_component_OrCodeControl, {
+    ref: "control",
+    "control-id": _ctx.controlAttributes.id,
+    label: _ctx.label,
+    hint: _ctx.hint,
+    error: _ctx.error,
+    disabled: _ctx.disabled,
+    readonly: _ctx.readonly
+  }, {
+    addon: withCtx(() => [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "addon"), _ctx.enableFullscreen ? (openBlock(), createBlock(_component_OrIconButton, {
+      key: 0,
+      icon: 'fullscreen',
+      onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.openFullscreen(), ["stop"]))
+    })) : createCommentVNode("v-if", true)])]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["control-id", "label", "hint", "error", "disabled", "readonly"]), createVNode(_component_OrModal, {
+    ref: "modal",
+    size: "l",
+    "additional-styles": _ctx.modalStyles
+  }, createSlots({
+    header: withCtx(() => [createTextVNode(toDisplayString(_ctx.label), 1 /* TEXT */)]),
+
+    default: withCtx(() => [createVNode(_component_OrCodeControl, {
+      ref: "fullscreenControl",
+      "control-id": _ctx.controlAttributes.id,
+      hint: _ctx.hint,
+      error: _ctx.error,
+      disabled: _ctx.disabled,
+      readonly: _ctx.readonly
+    }, {
+      addon: withCtx(() => [renderSlot(_ctx.$slots, "addon")]),
+      _: 3 /* FORWARDED */
+    }, 8 /* PROPS */, ["control-id", "hint", "error", "disabled", "readonly"])]),
+    _: 2 /* DYNAMIC */
+  }, [_ctx.$slots.modalFooter ? {
+    name: "footer",
+    fn: withCtx(() => [renderSlot(_ctx.$slots, "modalFooter")]),
+    key: "0"
+  } : undefined]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["additional-styles"])], 2 /* CLASS */);
+}
+
+script.render = render;
+script.__file = "src/components/or-code-v3/OrCode.vue";

package/dist/bundled/v3/components/OrCodeV3/OrCode.vue.d.ts

@@ -0,0 +1,131 @@
+import { PropType } from 'vue-demi';
+import { EditorView } from '@codemirror/view';
+import { Extension } from '@codemirror/state';
+import { CodeLanguage } from './props';
+declare const _default: import("vue-demi").DefineComponent<{
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    language: {
+        type: PropType<CodeLanguage>;
+        default: CodeLanguage;
+    };
+    extensions: {
+        type: PropType<Extension[]>;
+        default: () => never[];
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    hint: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    error: {
+        type: (BooleanConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableFullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    editorView: EditorView;
+    root: import("vue-demi").Ref<HTMLElement | undefined>;
+    control: import("vue-demi").Ref<any>;
+    fullscreenControl: import("vue-demi").Ref<any>;
+    modal: import("vue-demi").Ref<any>;
+    rootStyles: import("vue-demi").ComputedRef<string[]>;
+    controlStyles: import("vue-demi").ComputedRef<string[]>;
+    modalStyles: import("vue-demi").ComputedRef<string[]>;
+    controlAttributes: {
+        required: boolean | undefined;
+        minlength: number | undefined;
+        maxlength: number | undefined;
+        pattern: string | undefined;
+        min: number | undefined;
+        max: number | undefined;
+        step: number | undefined;
+        readonly: boolean | undefined;
+        disabled: boolean | undefined;
+        'force-state': string | undefined;
+        id: string | undefined;
+    };
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | undefined>;
+    focus: () => void;
+    blur: () => void;
+    openFullscreen: () => void;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:modelValue" | "keydown" | "keyup" | "focus" | "blur")[], "update:modelValue" | "keydown" | "keyup" | "focus" | "blur", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    language: {
+        type: PropType<CodeLanguage>;
+        default: CodeLanguage;
+    };
+    extensions: {
+        type: PropType<Extension[]>;
+        default: () => never[];
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    hint: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    error: {
+        type: (BooleanConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableFullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onKeydown?: ((...args: any[]) => any) | undefined;
+    onKeyup?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: string;
+    language: CodeLanguage;
+    extensions: Extension[];
+    label: string;
+    hint: string;
+    error: string | boolean;
+    required: boolean;
+    readonly: boolean;
+    disabled: boolean;
+    enableFullscreen: boolean;
+}>;
+export default _default;

package/dist/bundled/v3/components/OrCodeV3/index.d.ts

@@ -0,0 +1,3 @@
+export { default as OrCodeV3 } from './OrCode.vue';
+export * from './props';
+export * from './libs';

package/dist/bundled/v3/components/OrCodeV3/index.js

@@ -0,0 +1,7 @@
+export { CodeLanguage } from './props.js';
+export { s as OrCodeV3 } from '../../OrCode.vue_vue_type_script_lang-e8ef6dee.js';
+export { a as lintGutter, l as linter } from '../../index-4a4ab262.js';
+export { javascript } from '../../index-9b8fe3ec.js';
+export { json, jsonParseLinter } from '../../index-57f01e0d.js';
+export { html } from '../../index-f537aa31.js';
+export { a as EditorState, E as EditorView } from '../../index-d32c767e.js';

package/dist/bundled/v3/components/OrCodeV3/libs.d.ts

@@ -0,0 +1,6 @@
+export { linter, lintGutter } from '@codemirror/lint';
+export { javascript } from '@codemirror/lang-javascript';
+export { json, jsonParseLinter } from '@codemirror/lang-json';
+export { html } from '@codemirror/lang-html';
+export { EditorView } from '@codemirror/view';
+export { EditorState } from '@codemirror/state';

package/dist/bundled/v3/components/OrCodeV3/libs.js

@@ -0,0 +1,5 @@
+export { a as lintGutter, l as linter } from '../../index-4a4ab262.js';
+export { javascript } from '../../index-9b8fe3ec.js';
+export { json, jsonParseLinter } from '../../index-57f01e0d.js';
+export { html } from '../../index-f537aa31.js';
+export { a as EditorState, E as EditorView } from '../../index-d32c767e.js';

package/dist/bundled/v3/components/OrCodeV3/props.d.ts

@@ -0,0 +1,8 @@
+export declare enum CodeLanguage {
+    HTML = "html",
+    CSS = "css",
+    JS = "js",
+    TS = "ts",
+    JSON = "json",
+    MD = "md"
+}

package/dist/bundled/v3/components/OrCodeV3/props.js

@@ -0,0 +1,11 @@
+var CodeLanguage;
+(function (CodeLanguage) {
+  CodeLanguage["HTML"] = "html";
+  CodeLanguage["CSS"] = "css";
+  CodeLanguage["JS"] = "js";
+  CodeLanguage["TS"] = "ts";
+  CodeLanguage["JSON"] = "json";
+  CodeLanguage["MD"] = "md";
+})(CodeLanguage || (CodeLanguage = {}));
+
+export { CodeLanguage };

package/dist/bundled/v3/components/OrCodeV3/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const Code: string[];
+export declare const CodeControlRoot: string[];
+export declare const CodeControl: string[];
+export declare const CodeModal: string[];

package/dist/bundled/v3/components/OrCodeV3/styles.js

@@ -0,0 +1,28 @@
+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-none', '!my-none',
+// 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'];
+
+export { Code, CodeControl, CodeControlRoot, CodeModal };

package/dist/bundled/v3/components/OrCollapse/OrCollapse.js

@@ -0,0 +1,36 @@
+import { s as script } from '../../OrCollapse.vue_vue_type_script_lang-be1c8c66.js';
+export { s as default } from '../../OrCollapse.vue_vue_type_script_lang-be1c8c66.js';
+import { openBlock, createBlock, Transition, withCtx, withDirectives, createElementBlock, renderSlot, normalizeProps, guardReactiveProps, vShow, Fragment, createCommentVNode } from 'vue';
+import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
+
+const _hoisted_1 = {
+  key: 0,
+  class: "or-collapse"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "or-collapse"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock(Transition, {
+    onBeforeEnter: _ctx.beforeEnter,
+    onEnter: _ctx.enter,
+    onAfterEnter: _ctx.afterEnter,
+    onBeforeLeave: _ctx.beforeLeave,
+    onLeave: _ctx.leave,
+    onAfterLeave: _ctx.afterLeave
+  }, {
+    default: withCtx(() => [_ctx.keepState ? withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(_ctx.slotScope)))], 512 /* NEED_PATCH */)), [[vShow, _ctx.isActive]]) : (openBlock(), createElementBlock(Fragment, {
+      key: 1
+    }, [_ctx.isActive ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(_ctx.slotScope)))])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */))]),
+
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["onBeforeEnter", "onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"]);
+}
+
+var css_248z = ".or-collapse[data-v-5b8d3198] {\n  padding: 0;\n  transition-timing-function: var(--t-func);\n  transition-duration: var(--t-duration);\n  transition-property: height;\n}";
+styleInject(css_248z);
+
+script.render = render;
+script.__scopeId = "data-v-5b8d3198";
+script.__file = "src/components/or-collapse/OrCollapse.vue";

package/dist/bundled/v3/components/OrCollapse/OrCollapse.vue.d.ts

@@ -0,0 +1,53 @@
+import { PropType } from 'vue-demi';
+declare const _default: import("vue-demi").DefineComponent<{
+    modelValue: {
+        type: PropType<boolean>;
+        default: boolean;
+        required: false;
+    };
+    isVisible: {
+        type: PropType<boolean>;
+        default: boolean;
+        required: false;
+    };
+    keepState: {
+        type: PropType<boolean>;
+        default: boolean;
+        required: false;
+    };
+}, {
+    isActive: import("vue-demi").Ref<boolean>;
+    slotScope: import("vue-demi").ComputedRef<{
+        isVisible: import("vue-demi").Ref<boolean>;
+        hide: () => void;
+    }>;
+    beforeEnter: (el: HTMLElement) => void;
+    enter: (el: HTMLElement) => void;
+    afterEnter: (el: HTMLElement) => void;
+    beforeLeave: (el: HTMLElement) => void;
+    leave: (el: HTMLElement) => void;
+    afterLeave: (el: HTMLElement) => void;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<boolean>;
+        default: boolean;
+        required: false;
+    };
+    isVisible: {
+        type: PropType<boolean>;
+        default: boolean;
+        required: false;
+    };
+    keepState: {
+        type: PropType<boolean>;
+        default: boolean;
+        required: false;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: boolean;
+    isVisible: boolean;
+    keepState: boolean;
+}>;
+export default _default;

package/dist/bundled/v3/components/OrCollapse/index.d.ts

@@ -0,0 +1 @@
+export { default as OrCollapse } from './OrCollapse.vue';

package/dist/bundled/v3/components/OrCollapse/index.js

@@ -0,0 +1 @@
+export { s as OrCollapse } from '../../OrCollapse.vue_vue_type_script_lang-be1c8c66.js';

package/dist/bundled/v3/components/OrColorPicker/OrColorPicker.js

@@ -0,0 +1,76 @@
+import { s as script } from '../../OrColorPicker.vue_vue_type_script_lang-b030a96d.js';
+export { s as default } from '../../OrColorPicker.vue_vue_type_script_lang-b030a96d.js';
+import { resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeStyle, withModifiers, createBlock, withCtx, Fragment, renderList, normalizeClass, withDirectives, vShow, createCommentVNode, pushScopeId, popScopeId } from 'vue';
+import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
+
+const _withScopeId = n => (pushScopeId("data-v-da42f3fe"), n = n(), popScopeId(), n);
+const _hoisted_1 = {
+  class: "color-container"
+};
+const _hoisted_2 = {
+  class: "or-color-picker-box"
+};
+const _hoisted_3 = ["aria-label", "aria-selected", "data-color", "onClick"];
+const _hoisted_4 = {
+  class: "or-color-picker-pick"
+};
+const _hoisted_5 = {
+  style: {
+    "width": "24px",
+    "height": "24px"
+  },
+  viewBox: "0 0 24 24"
+};
+const _hoisted_6 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createElementVNode("path", {
+  d: "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+}, null, -1 /* HOISTED */));
+const _hoisted_7 = [_hoisted_6];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_floating = resolveComponent("or-floating");
+  return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", {
+    ref: "trigger",
+    class: "tag__color",
+    style: normalizeStyle({
+      backgroundColor: _ctx.selected || _ctx.defaultColor
+    }),
+    onClick: _cache[0] || (_cache[0] = withModifiers(function () {
+      return _ctx.toggle && _ctx.toggle(...arguments);
+    }, ["prevent"]))
+  }, null, 4 /* STYLE */), _ctx.isActive ? (openBlock(), createBlock(_component_or_floating, {
+    key: 0,
+    trigger: _ctx.trigger,
+    offset: 8,
+    placement: _ctx.placement,
+    "is-using-shift": "",
+    "is-using-flip": ""
+  }, {
+    default: withCtx(() => [createElementVNode("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.palette, (group, idx) => {
+      return openBlock(), createElementBlock("div", {
+        key: idx,
+        class: "or-color-picker-color-group"
+      }, [(openBlock(true), createElementBlock(Fragment, null, renderList(group, color => {
+        return openBlock(), createElementBlock("div", {
+          key: color,
+          class: normalizeClass(_ctx.getClass(color)),
+          role: "option",
+          "aria-label": 'Color:' + color,
+          "aria-selected": color === _ctx.selected,
+          "data-color": color,
+          style: normalizeStyle({
+            background: color
+          }),
+          onClick: withModifiers($event => _ctx.handlerClick(color), ["prevent"])
+        }, [withDirectives(createElementVNode("div", _hoisted_4, [(openBlock(), createElementBlock("svg", _hoisted_5, _hoisted_7))], 512 /* NEED_PATCH */), [[vShow, color === _ctx.selected]])], 14 /* CLASS, STYLE, PROPS */, _hoisted_3);
+      }), 128 /* KEYED_FRAGMENT */))]);
+    }), 128 /* KEYED_FRAGMENT */))])]),
+
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["trigger", "placement"])) : createCommentVNode("v-if", true)]);
+}
+
+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-da42f3fe {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-da42f3fe {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.color-container[data-v-da42f3fe] {\n  position: relative;\n}\n.color-container .tag__color[data-v-da42f3fe] {\n  width: 20px;\n  height: 20px;\n  margin-right: 10px;\n  border: var(--s-1) solid var(--c-neutral-0-darken-3);\n  border-radius: 50%;\n  cursor: pointer;\n}\n.or-color-picker-box[data-v-da42f3fe] {\n  max-height: 244px;\n  max-width: 312px;\n  overflow-y: scroll;\n  background-color: var(--c-neutral-0);\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(0, 0, 0, 0.16);\n  padding: var(--s-4);\n  display: flex;\n  gap: var(--s-3);\n  flex-wrap: wrap;\n}\n.or-color-picker-box .or-color-picker-color-group[data-v-da42f3fe] {\n  width: 40px;\n  float: left;\n}\n.or-color-picker-box .or-color-picker-color-group .or-color-picker-color-it[data-v-da42f3fe] {\n  box-sizing: border-box;\n  width: 40px;\n  height: 24px;\n  cursor: pointer;\n  margin-bottom: 1px;\n  overflow: hidden;\n  border-radius: var(--s-1) var(--s-1) 0 0;\n}\n.or-color-picker-box .or-color-picker-color-group .or-color-picker-color--white[data-v-da42f3fe] {\n  border: 1px solid #DDD;\n}\n.or-color-picker-box .or-color-picker-color-group .or-color-picker-pick[data-v-da42f3fe] {\n  fill: rgb(255, 255, 255);\n  margin-left: 8px;\n  display: block;\n}\n.or-color-picker-box .or-color-picker-color-group .or-color-picker-color--white .or-color-picker-pick[data-v-da42f3fe] {\n  fill: rgb(51, 51, 51);\n}";
+styleInject(css_248z);
+
+script.render = render;
+script.__scopeId = "data-v-da42f3fe";
+script.__file = "src/components/or-color-picker/OrColorPicker.vue";

package/dist/bundled/v3/components/OrColorPicker/OrColorPicker.vue.d.ts

@@ -0,0 +1,48 @@
+import { PropType } from 'vue-demi';
+import { PaletteType } from './types';
+import defaultPalette from './utils/defultPalette';
+import { OrFloatingPlacements } from '../or-floating';
+declare const _default: import("vue-demi").DefineComponent<{
+    palette: {
+        type: PropType<PaletteType>;
+        default: typeof defaultPalette;
+    };
+    defaultColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    placement: {
+        type: PropType<OrFloatingPlacements>;
+        required: false;
+        default: OrFloatingPlacements;
+    };
+}, {
+    trigger: import("vue-demi").Ref<HTMLElement | null>;
+    toggle: (value?: boolean | undefined) => boolean;
+    isActive: import("vue-demi").Ref<boolean>;
+    selected: import("vue-demi").Ref<string | null>;
+}, unknown, {}, {
+    getClass(tone: string): (string | Record<string, boolean>)[];
+    handlerClick(color: string): void;
+}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "select"[], "select", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    palette: {
+        type: PropType<PaletteType>;
+        default: typeof defaultPalette;
+    };
+    defaultColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    placement: {
+        type: PropType<OrFloatingPlacements>;
+        required: false;
+        default: OrFloatingPlacements;
+    };
+}>> & {
+    onSelect?: ((...args: any[]) => any) | undefined;
+}, {
+    palette: PaletteType;
+    defaultColor: string;
+    placement: OrFloatingPlacements;
+}>;
+export default _default;