@onereach/ui-components 4.10.0 → 4.10.1-beta.2921.0

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

@@ -0,0 +1,338 @@
+<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, watch } from 'vue-demi';
+import { useControlAttributes, useIdAttribute, 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 = computed({
+      get: () => props.modelValue,
+
+      set: (value) => {
+        context.emit('update:modelValue', value);
+      },
+    });
+
+    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 extensions = computed<Extension[]>(() => [
+      ...props.extensions,
+      proxyLanguage.value,
+      keymap.of([indentWithTab]),
+      EditorView.editable.of(!props.readonly && !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.baseTheme({}),
+    ]);
+
+    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,12 @@
+export const Code: string[] = [
+  // Layout
+  'layout-column',
+
+  // Spacing
+  'gap-xs',
+];
+
+export const CodeControl: string[] = [
+  // Layout
+  'grow',
+];