@onereach/ui-components 4.10.3 → 4.10.4-beta.2951.0

package/dist/esm/v3/{types-53cb1e6c.js → types-c78924f3.js}

@@ -5,7 +5,7 @@ import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { s as script$4 } from './OrTeleport.vue3-8099178c.js';
 import { T as ToastType, P as PositionsX, b as PositionsY, c as TransitionType, d as useToastEventBus, a as useQueue } from './useToast-a1332cc2.js';
-import { s as script$2 } from './OrIconButton-0aaadc68.js';
+import { s as script$2 } from './OrIconButton-00f8f0c7.js';
 import { s as script$3 } from './OrLoader-b79022da.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createVNode, createElementVNode, toDisplayString, createBlock, withModifiers, withCtx, TransitionGroup, Fragment, renderList, mergeProps } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';

package/dist/esm/{v2/usePopoverState-8a95a300.js → v3/usePopoverState-b92c698b.js}

@@ -1,23 +1,23 @@
 import { debouncedRef } from '@vueuse/core';
 import { ref, watch } from 'vue-demi';
 
-// TODO: Remove type `any` (https://github.com/microsoft/TypeScript/issues/27808)
 // TODO: Use `defineEmits` after migration to Vue 3
-function usePopoverState(isOpen, context, options) {
+function usePopoverState(isOpen, emit) {
+  let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   // State
   const state = ref(isOpen.value ? 'open' : 'closed');
   watch(isOpen, value => {
     state.value = value ? 'open' : 'closed';
   });
-  const debouncedState = (options === null || options === void 0 ? void 0 : options.debounce) ? debouncedRef(state, options.debounce) : state;
+  const debouncedState = options.debounce ? debouncedRef(state, options.debounce) : state;
   watch(debouncedState, value => {
-    context.emit('update:state', value);
+    emit('update:state', value);
     switch (value) {
       case 'open':
-        context.emit('open');
+        emit('open');
         break;
       case 'closed':
-        context.emit('close');
+        emit('close');
         break;
     }
   });

package/dist/esm/v3/useProxyModelValue-940010d2.js

@@ -0,0 +1,29 @@
+import { computed } from 'vue-demi';
+
+function useProxyModelValue(modelValue, emit) {
+  let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const {
+    defaultValue
+  } = options;
+  if (defaultValue) {
+    return computed({
+      get: () => {
+        var _a;
+        return (_a = modelValue.value) !== null && _a !== void 0 ? _a : defaultValue.value;
+      },
+      set: value => {
+        emit('update:modelValue', value);
+      }
+    });
+  }
+  return computed({
+    get: () => {
+      return modelValue.value;
+    },
+    set: value => {
+      emit('update:modelValue', value);
+    }
+  });
+}
+
+export { useProxyModelValue as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "4.10.3",
+  "version": "4.10.4-beta.2951.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -31,14 +31,14 @@
     "switch:vue3": "node scripts/swap-vue.js 3 && vue-demi-switch 3 vue3"
   },
   "dependencies": {
-    "@codemirror/commands": "^6.2.1",
-    "@codemirror/lang-css": "6.0.0",
-    "@codemirror/lang-html": "6.1.0",
-    "@codemirror/lang-javascript": "6.0.2",
-    "@codemirror/lang-json": "6.0.0",
-    "@codemirror/lang-markdown": "6.0.1",
+    "@codemirror/commands": "6.2.4",
+    "@codemirror/lang-css": "6.2.0",
+    "@codemirror/lang-html": "6.4.3",
+    "@codemirror/lang-javascript": "6.1.8",
+    "@codemirror/lang-json": "6.0.1",
+    "@codemirror/lang-markdown": "6.1.1",
     "@floating-ui/dom": "0.3.1",
-    "@onereach/styles": "^2.41.3",
+    "@onereach/styles": "^2.41.4-beta.2951.0",
     "@splidejs/splide": "4.0.6",
     "@types/lodash": "4.14.173",
     "@types/sortablejs": "1.10.7",
@@ -154,6 +154,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "1449d12634ad35503b84fcb20deda4604c8fce86"
+  }
 }

package/src/components/index.ts

@@ -15,6 +15,7 @@ export * from './or-checkbox-tree-v3';
 export * from './or-checkbox-v3';
 export * from './or-chips';
 export * from './or-code';
+export * from './or-code-v3';
 export * from './or-collapse';
 export * from './or-color-picker';
 export * from './or-combined-input-v3';

package/src/components/or-bottom-sheet-v3/OrBottomSheet.vue

@@ -89,7 +89,7 @@ export default defineComponent({
     ]);
 
     // State
-    const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context);
+    const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context.emit);
 
     const fullscreen = ref<boolean>(false);
 

package/src/components/or-checkbox-group-v3/OrCheckboxGroup.vue

@@ -22,10 +22,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue-demi';
-import { useVModel } from '@vueuse/core';
-import { OrFormGroupV3 as OrFormGroup, FormGroupDirection } from '../or-form-group-v3';
-import { OrCheckboxTreeV3 as OrCheckboxTree, CheckboxTreeNode } from '../or-checkbox-tree-v3';
+import { defineComponent, PropType, toRef } from 'vue-demi';
+import { useProxyModelValue } from '../../hooks';
+import { CheckboxTreeNode, OrCheckboxTreeV3 as OrCheckboxTree } from '../or-checkbox-tree-v3';
+import { FormGroupDirection, OrFormGroupV3 as OrFormGroup } from '../or-form-group-v3';
 
 
 export default defineComponent({
@@ -68,8 +68,10 @@ export default defineComponent({
       default: false,
     },
   },
-  setup(props, { emit }) {
-    const proxyModelValue = useVModel(props, 'modelValue', emit);
+
+  setup(props, context) {
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+
     return {
       proxyModelValue,
     };
@@ -77,4 +79,3 @@ export default defineComponent({
 });
 
 </script>
-

package/src/components/or-checkbox-tree-v3/OrCheckboxTree.vue

@@ -60,14 +60,15 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, watch } from 'vue-demi';
-import { useVModel, useToggle } from '@vueuse/core';
+import { useToggle } from '@vueuse/core';
+import { computed, defineComponent, PropType, toRef, watch } from 'vue-demi';
+import { useProxyModelValue } from '../../hooks';
+import flattenDeep from '../../utils/functions/flattenDeep';
+import { OrButtonV3 as OrButton } from '../or-button-v3';
 import { OrCheckboxV3 as OrCheckbox } from '../or-checkbox-v3';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import { OrButtonV3 as OrButton } from '../or-button-v3';
 import { CheckboxTreeRoot, CheckboxTreeRootParent } from './styles';
 import { CheckboxTreeNode } from './types';
-import flattenDeep from '../../utils/functions/flattenDeep';
 
 export default defineComponent({
   name: 'OrCheckboxTree',
@@ -109,10 +110,10 @@ export default defineComponent({
     'update:modelValue',
   ],
 
-  setup(props, { emit }) {
-
+  setup(props, context) {
     // State
     const hasChildren = computed(() => props.item.children && props.item.children.length > 0);
+
     const childrenValues = computed(() => {
       const getChildValues = (children?: CheckboxTreeNode[]): any[] | undefined => {
         return children?.map((child) => {
@@ -127,7 +128,7 @@ export default defineComponent({
       return flattenDeep(getChildValues(props.item.children));
     });
 
-    const proxyModelValue = useVModel(props, 'modelValue', emit);
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
     const isAnyChildrenSelected = computed(() => {
       return proxyModelValue.value?.some((value) => childrenValues.value?.includes(value));

package/src/components/or-checkbox-v3/OrCheckbox.vue

@@ -37,9 +37,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, reactive, ref } from 'vue-demi';
-import { useVModel } from '@vueuse/core';
-import { useControlAttributes, useIdAttribute } from '../../hooks';
+import { computed, defineComponent, PropType, reactive, ref, toRef } from 'vue-demi';
+import { useControlAttributes, useIdAttribute, useProxyModelValue } from '../../hooks';
 import { isEmptyValue } from '../../utils/isEmptyValue';
 import { LabelVariant, OrLabelV3 as OrLabel } from '../or-label-v3';
 import { CheckboxControl, CheckboxControlHandle, CheckboxRoot } from './styles';
@@ -108,7 +107,7 @@ export default defineComponent({
     'blur',
   ],
 
-  setup(props, { emit }) {
+  setup(props, context) {
     // Refs
     const root = ref<HTMLElement>();
     const control = ref<HTMLInputElement>();
@@ -130,7 +129,7 @@ export default defineComponent({
       ...useControlAttributes(),
     });
 
-    const proxyModelValue = useVModel(props, 'modelValue', emit);
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
     const isChecked = computed(() => {
       if (Array.isArray(proxyModelValue.value)) {

package/src/components/or-code-v3/OrCode.vue

@@ -0,0 +1,344 @@
+<template>
+  <div
+    ref="root"
+    :class="rootStyles"
+  >
+    <template v-if="label">
+      <OrLabel
+        :control-id="controlAttributes.id"
+        :variant="'input'"
+        :required="required"
+        :disabled="disabled"
+      >
+        {{ label }}
+
+        <template v-slot:addon>
+          <div :class="['layout-row', 'gap-xs']">
+            <slot name="addon" />
+
+            <OrIconButton
+              :icon="'fullscreen'"
+              @click.stop="modal.open()"
+            />
+          </div>
+        </template>
+      </OrLabel>
+    </template>
+
+    <OrInputBox
+      :size="'m'"
+      :invalid="!!error"
+      :readonly="readonly"
+      :disabled="disabled"
+    >
+      <div
+        ref="control"
+        :class="controlStyles"
+      />
+    </OrInputBox>
+
+    <div
+      v-show="!error"
+      :class="['contents']"
+    >
+      <template v-if="hint">
+        <OrHint :disabled="disabled">
+          {{ hint }}
+        </OrHint>
+      </template>
+    </div>
+
+    <div
+      v-show="typeof error === 'string'"
+      :class="['contents']"
+    >
+      <OrError :disabled="disabled">
+        {{ error }}
+      </OrError>
+    </div>
+
+    <OrModal ref="modal">
+      <OrInputBox
+        :size="'m'"
+        :invalid="!!error"
+        :readonly="readonly"
+        :disabled="disabled"
+      >
+        <div
+          ref="fullscreenControl"
+          :class="controlStyles"
+        />
+      </OrInputBox>
+    </OrModal>
+  </div>
+</template>
+
+<script lang="ts">
+import { indentWithTab } from '@codemirror/commands';
+import { css } from '@codemirror/lang-css';
+import { html } from '@codemirror/lang-html';
+import { javascript } from '@codemirror/lang-javascript';
+import { json } from '@codemirror/lang-json';
+import { markdown } from '@codemirror/lang-markdown';
+import { EditorState, Extension } from '@codemirror/state';
+import { EditorView, keymap } from '@codemirror/view';
+import { basicSetup } from 'codemirror';
+import { PropType, computed, defineComponent, onMounted, onUnmounted, reactive, ref, toRef, watch } from 'vue-demi';
+import { useControlAttributes, useIdAttribute, useProxyModelValue, useTheme, useValidationAttributes } from '../../hooks';
+import { OrErrorV3 as OrError } from '../or-error-v3';
+import { OrHintV3 as OrHint } from '../or-hint-v3';
+import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
+import { OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
+import { OrLabelV3 as OrLabel } from '../or-label-v3';
+import { OrModalV3 as OrModal } from '../or-modal-v3';
+import { CodeLanguage } from './props';
+import { Code, CodeControl } from './styles';
+
+export default defineComponent({
+  name: 'OrCode',
+
+  components: {
+    OrError,
+    OrHint,
+    OrIconButton,
+    OrInputBox,
+    OrLabel,
+    OrModal,
+  },
+
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
+
+  props: {
+    modelValue: {
+      type: String,
+      default: undefined,
+    },
+
+    language: {
+      type: String as PropType<CodeLanguage>,
+      default: CodeLanguage.JS,
+    },
+
+    extensions: {
+      type: Array as PropType<Extension[]>,
+      default: () => [basicSetup],
+    },
+
+    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,
+    },
+  },
+
+  emits: [
+    'update:modelValue',
+
+    'keydown',
+    'keyup',
+    'focus',
+    'blur',
+  ],
+
+  expose: [
+    'root',
+
+    'focus',
+    'blur',
+  ],
+
+  setup(props, context) {
+    // Refs
+    const root = ref<HTMLElement>();
+    const control = ref<HTMLElement>();
+    const fullscreenControl = ref<HTMLElement>();
+
+    const modal = ref<InstanceType<typeof OrModal>>();
+
+    // Styles
+    const rootStyles = computed(() => [
+      'or-code-v3',
+      ...Code,
+    ]);
+
+    const controlStyles = computed(() => [
+      ...CodeControl,
+    ]);
+
+    // State
+    const controlAttributes = reactive({
+      id: useIdAttribute(),
+      ...useControlAttributes(),
+      ...useValidationAttributes(),
+    });
+
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+
+    const proxyLanguage = computed(() => {
+      switch (props.language) {
+        case CodeLanguage.HTML:
+          return html();
+
+        case CodeLanguage.CSS:
+          return css();
+
+        case CodeLanguage.JS:
+          return javascript();
+
+        case CodeLanguage.TS:
+          return javascript({ typescript: true });
+
+        case CodeLanguage.JSON:
+          return json();
+
+        case CodeLanguage.MD:
+          return markdown();
+      }
+    });
+
+    // Methods
+    function focus(): void {
+      control.value?.focus();
+    }
+
+    function blur(): void {
+      control.value?.blur();
+    }
+
+    // #region Codemirror
+    const editorView = new EditorView({
+      dispatch: (transaction) => {
+        editorView.update([
+          transaction,
+        ]);
+
+        proxyModelValue.value = String(editorView.state.doc);
+      },
+    });
+
+    const theme = useTheme();
+
+    const extensions = computed<Extension[]>(() => [
+      ...props.extensions,
+      proxyLanguage.value,
+
+      keymap.of([
+        indentWithTab,
+      ]),
+
+      EditorState.readOnly.of(props.readonly),
+      EditorView.editable.of(!props.disabled),
+
+      EditorView.domEventHandlers({
+        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({
+        '&': {
+          color: theme.textColor['on-background'],
+          backgroundColor: theme.backgroundColor['transparent'],
+        },
+      }),
+    ]);
+
+    watch([
+      proxyModelValue,
+      extensions,
+    ], ([
+      modelValue = '',
+      extensions,
+    ]) => {
+      const { selection } = editorView.state;
+
+      editorView.setState(
+        EditorState.create({
+          doc: modelValue,
+          extensions,
+
+          selection: selection.ranges.some((range) => range.to > modelValue.length)
+            ? { anchor: modelValue.length }
+            : selection,
+        }),
+      );
+    }, {
+      immediate: true,
+    });
+    // #endregion
+
+    // Effects
+    watch(() => modal.value?.state, (value) => {
+      setTimeout(() => {
+        if (value === 'open') {
+          fullscreenControl.value?.append(editorView.dom);
+        } else {
+          control.value?.append(editorView.dom);
+        }
+      });
+    });
+
+    // Lifecycle
+    onMounted(() => {
+      control.value?.append(editorView.dom);
+    });
+
+    onUnmounted(() => {
+      editorView.destroy();
+    });
+
+    return {
+      root,
+      control,
+      fullscreenControl,
+      modal,
+      rootStyles,
+      controlStyles,
+      controlAttributes,
+      proxyModelValue,
+      proxyLanguage,
+      focus,
+      blur,
+    };
+  },
+});
+</script>

package/src/components/or-code-v3/index.ts

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

package/src/components/or-code-v3/props.ts

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

package/src/components/or-code-v3/styles.ts

@@ -0,0 +1,16 @@
+export const Code: string[] = [
+  // Layout
+  'layout-column',
+
+  // Spacing
+  'gap-xs',
+];
+
+export const CodeControl: string[] = [
+  // Layout
+  'grow',
+
+  // Spacing
+  '!mx-none',
+  '!my-none',
+];

package/src/components/or-confirm-v3/OrConfirm.vue

@@ -171,7 +171,7 @@ export default defineComponent({
 
     // State
     const touched = ref(false);
-    const { state, open, close } = usePopoverState(toRef(props, 'isOpen'), context);
+    const { state, open, close } = usePopoverState(toRef(props, 'isOpen'), context.emit);
     const isInputActive = ref(false);
     const confirmationValue = ref<string>('');
 

package/src/components/or-date-picker-v3/OrDatePicker.vue

@@ -109,8 +109,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
+import { computed, defineComponent, PropType, ref, toRef, watch } from 'vue-demi';
 import { DropdownClose, DropdownOpen } from '../../directives';
+import { useProxyModelValue } from '../../hooks';
 import { FilterFunction } from '../or-date-time-picker-v3';
 import { useCurrentDate } from '../or-date-time-picker-v3/hooks/useCurrentDate';
 import OrDateTimePickerDateControl from '../or-date-time-picker-v3/partials/or-date-time-picker-date-control/OrDateTimePickerDateControl.vue';
@@ -259,19 +260,12 @@ export default defineComponent({
     // State
     const initialModelValue = useCurrentDate();
 
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
-    });
-
-    const draftModelValue = ref<Date>();
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const draftModelValue = ref(proxyModelValue.value);
 
     watch(proxyModelValue, (value) => {
       draftModelValue.value = value;
-    }, { immediate: true });
+    });
 
     const isInvalidDraftModelValue = computed(() => {
       if (draftModelValue.value) {

package/src/components/or-date-time-picker-v3/OrDateTimePicker.vue

@@ -157,8 +157,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
+import { computed, defineComponent, PropType, ref, toRef, watch } from 'vue-demi';
 import { DropdownClose, DropdownOpen } from '../../directives';
+import { useProxyModelValue } from '../../hooks';
 import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
@@ -333,19 +334,12 @@ export default defineComponent({
     // State
     const initialModelValue = useCurrentDate();
 
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
-    });
-
-    const draftModelValue = ref<Date>();
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const draftModelValue = ref(proxyModelValue.value);
 
     watch(proxyModelValue, (value) => {
       draftModelValue.value = value;
-    }, { immediate: true });
+    });
 
     const isInvalidDraftModelValue = computed(() => {
       if (draftModelValue.value) {