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

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

@@ -1,338 +0,0 @@
-<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

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

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

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

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

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