@onereach/ui-components 4.10.4 → 4.10.5-beta.2961.0

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

@@ -0,0 +1,365 @@
+<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['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'],
+        },
+
+        '.cm-activeLineGutter, .cm-activeLine': {
+          backgroundColor: theme.backgroundColor['primary-opacity-0-08'],
+        },
+      }),
+    ]);
+
+    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,23 @@
+export const Code: string[] = [
+  // Layout
+  'layout-column',
+
+  // Spacing
+  'gap-xs',
+];
+
+export const CodeControl: string[] = [
+  // Layout
+  'grid',
+
+  // Box
+  'w-full',
+
+  // Spacing
+  '!mx-none',
+  '!my-none',
+
+  // Theme
+  'theme-background-default',
+  'dark:theme-background-default-dark',
+];

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) {

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-date-control/OrDateTimePickerDateControl.vue

@@ -23,7 +23,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue-demi';
+import { computed, defineComponent, ref, toRef } from 'vue-demi';
+import { useProxyModelValue } from '../../../../hooks';
 import { useDatePlaceholder } from '../../hooks/useDatePlaceholder';
 import { DateTimePickerDateControl, DateTimePickerDateControlPlaceholder } from './styles';
 
@@ -76,13 +77,7 @@ export default defineComponent({
     ]);
 
     // State
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
     const placeholder = useDatePlaceholder();
 

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-date-select/OrDateTimePickerDateSelect.vue

@@ -32,7 +32,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { computed, defineComponent, PropType, ref, toRef } from 'vue-demi';
+import { useProxyModelValue } from '../../../../hooks';
 import { OrButtonV3 as OrButton } from '../../../or-button-v3';
 import { FilterFunction } from '../../types';
 import { DateTimePickerDateSelect, DateTimePickerDateSelectButtonGroup, DateTimePickerDateSelectButtonGroupCurrentDateItem, DateTimePickerDateSelectButtonGroupDateItem, DateTimePickerDateSelectButtonGroupWeekdayItem } from './styles';
@@ -101,12 +102,8 @@ export default defineComponent({
     ]);
 
     // State
-    const proxyModelValue = computed({
-      get: () => props.modelValue ?? props.initialValue,
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
+      defaultValue: toRef(props, 'initialValue'),
     });
 
     const dayOptions = computed(() => {

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-month-select/OrDateTimePickerMonthSelect.vue

@@ -66,7 +66,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { computed, defineComponent, PropType, ref, toRef } from 'vue-demi';
+import { useProxyModelValue } from '../../../../hooks';
 import { OrButtonV3 as OrButton } from '../../../or-button-v3';
 import { OrIconButtonV3 as OrIconButton } from '../../../or-icon-button-v3';
 import { OrIconV3 as OrIcon } from '../../../or-icon-v3';
@@ -144,12 +145,8 @@ export default defineComponent({
     ]);
 
     // State
-    const proxyModelValue = computed({
-      get: () => props.modelValue ?? props.initialValue,
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
+      defaultValue: toRef(props, 'initialValue'),
     });
 
     const yearOptions = computed(() => {

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-time-control/OrDateTimePickerTimeControl.vue

@@ -23,7 +23,8 @@
 </template>
 
 <script lang="ts">
-import { PropType, computed, defineComponent, ref } from 'vue-demi';
+import { PropType, computed, defineComponent, ref, toRef } from 'vue-demi';
+import { useProxyModelValue } from '../../../../hooks';
 import { useTimePlaceholder } from '../../hooks/useTimePlaceholder';
 import { DateTimePickerTimeFormat } from '../../props';
 import { DateTimePickerTimeControl, DateTimePickerTimeControlPlaceholder } from './styles';
@@ -82,13 +83,7 @@ export default defineComponent({
     ]);
 
     // State
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
     const placeholder = useTimePlaceholder(props.format !== DateTimePickerTimeFormat.Auto ? props.format : undefined);
 

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-time-select/OrDateTimePickerTimeSelect.vue

@@ -58,7 +58,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
+import { computed, defineComponent, PropType, ref, toRef, watch } from 'vue-demi';
+import { useProxyModelValue } from '../../../../hooks';
 import { OrButtonV3 as OrButton } from '../../../or-button-v3';
 import { DateTimePickerTimeFormat } from '../../props';
 import { FilterFunction } from '../../types';
@@ -130,12 +131,8 @@ export default defineComponent({
     ]);
 
     // State
-    const proxyModelValue = computed({
-      get: () => props.modelValue ?? props.initialValue,
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
+      defaultValue: toRef(props, 'initialValue'),
     });
 
     const proxyTimeFormat = computed(() => {

package/src/components/or-expansion-panel-v3/OrExpansionPanel.vue

@@ -118,7 +118,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);
 
     return {
       root,

package/src/components/or-inline-input-v3/OrInlineInput.vue

@@ -77,8 +77,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, reactive, ref, watch } from 'vue-demi';
-import { useControlAttributes, useIdAttribute, useValidationAttributes } from '../../hooks';
+import { computed, defineComponent, PropType, reactive, ref, toRef, watch } from 'vue-demi';
+import { useControlAttributes, useIdAttribute, useProxyModelValue, 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';
@@ -181,16 +181,13 @@ export default defineComponent({
       ...useValidationAttributes(),
     });
 
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const draftModelValue = ref(proxyModelValue.value);
 
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
+    watch(proxyModelValue, (value) => {
+      draftModelValue.value = value;
     });
 
-    const draftModelValue = ref<string | number>('');
-
     const currentLength = computed(() => draftModelValue.value?.toString().length ?? 0);
     const maxLength = computed(() => controlAttributes.maxlength);
 
@@ -230,17 +227,12 @@ export default defineComponent({
 
     function reset(): void {
       if (draftModelValue.value !== proxyModelValue.value) {
-        draftModelValue.value = proxyModelValue.value ?? '';
+        draftModelValue.value = proxyModelValue.value;
       }
 
       activated.value = false;
     }
 
-    // Effects
-    watch(proxyModelValue, (value) => {
-      draftModelValue.value = value ?? '';
-    }, { immediate: true });
-
     return {
       root,
       control,