@onereach/ui-components 2.70.0-beta.2132.0 → 2.70.0-beta.2159.0

package/src/components/or-card-collection-v3/OrCardCollectionView.vue3.vue

@@ -0,0 +1,42 @@
+<template>
+  <div :class="contentStyles">
+    <slot
+      v-for="(item, index) in items"
+      :key="item.key || index"
+      name="item"
+      v-bind="{
+        item,
+        mode,
+      }"
+    >
+      {{ item.key }}
+    </slot>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, computed, PropType } from 'vue-demi';
+import { CardCollectionContent, CardCollectionContentViews } from './styles';
+import { CardCollectionItem } from './types';
+import { DefaultCardCollectionViews } from './props';
+
+export default defineComponent({
+  name: 'OrCardCollectionView',
+  props: {
+    items: {
+      type: Array as PropType<CardCollectionItem[]>,
+      default: [] as CardCollectionItem[],
+    },
+    mode: {
+      type: String as PropType<DefaultCardCollectionViews>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const contentStyles = computed(() => [
+      ...CardCollectionContent,
+      ...CardCollectionContentViews[props.mode],
+    ]);
+    return { contentStyles };
+  },
+});
+</script>

package/src/components/or-card-collection-v3/props.ts

@@ -1,4 +1,17 @@
-export enum CardCollectionView {
+import { ViewMode } from './types';
+
+export enum DefaultCardCollectionViews {
   Grid = 'grid',
   List = 'list',
 }
+
+export const gridView: ViewMode = {
+  view: DefaultCardCollectionViews.Grid,
+  icon: 'grid_view',
+};
+export const listView: ViewMode = {
+  view: DefaultCardCollectionViews.List,
+  icon: 'view_agenda',
+};
+
+export const defaultViewModes = [gridView, listView];

package/src/components/or-card-collection-v3/styles.ts

@@ -1,4 +1,4 @@
-import { CardCollectionView } from './props';
+import { DefaultCardCollectionViews } from './props';
 
 export const CardCollectionRoot: string[] = [
   // Layout
@@ -25,7 +25,7 @@ export const CardCollectionToolbarPanel: string[] = [
   'layout-row',
 
   // Spacing
-  'gap-sm+',
+  'gap-lg+',
 ];
 
 export const CardCollectionContent: string[] = [
@@ -36,7 +36,7 @@ export const CardCollectionContent: string[] = [
   'gap-sm md:gap-md',
 ];
 
-export const CardCollectionContentViews: Record<CardCollectionView, string[]> = {
+export const CardCollectionContentViews: Record<DefaultCardCollectionViews, string[]> = {
   'grid': [
     // Layout
     'sm:grid-cols-1',
@@ -45,5 +45,7 @@ export const CardCollectionContentViews: Record<CardCollectionView, string[]> =
     'xl:grid-cols-6',
   ],
 
-  'list': [],
+  'list': [
+    'grid-cols-1',
+  ],
 };

package/src/components/or-card-collection-v3/types.ts

@@ -1,8 +1,14 @@
 export interface CardCollectionItem {
-  id: string;
+  key?: string;
+  [key: string|number]: any;
 }
 
-export interface CardCollectionSortHeader {
-  value: string;
+export interface ViewMode {
+  view: string;
+  icon: string;
+}
+
+export interface SortOption {
   label: string;
+  value: string;
 }

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

@@ -83,7 +83,8 @@
 <script lang="ts">
 import { Language, LanguageSupport } from '@codemirror/language';
 import { EditorState, Extension, Transaction } from '@codemirror/state';
-import { ViewUpdate } from '@codemirror/view';
+import { ViewUpdate, keymap } from '@codemirror/view';
+import { indentWithTab } from '@codemirror/commands';
 import { useElementHover } from '@vueuse/core';
 import { basicSetup, EditorView } from 'codemirror';
 import _ from 'lodash';
@@ -257,6 +258,7 @@ export default defineComponent({
         }),
         // line wrapping
         lineWrapping ? EditorView.lineWrapping : undefined,
+        keymap.of([indentWithTab]),
       ]) as Extension[];
 
       // Append Extensions (such as basic-setup)

package/src/components/or-empty-state-v3/OrEmptyState.vue

@@ -1,17 +1,23 @@
 <template>
   <div
     ref="root"
-    :class="rootClasses">
-    <img v-if="imageSrc"
-         :src="imageSrc"
-         :class="imageClasses"
-         alt="">
+    :class="rootClasses"
+  >
+    <img
+      v-if="imageSrc"
+      :src="imageSrc"
+      :class="imageClasses"
+      alt=""
+    >
     <div :class="headingClasses">
       {{ heading }}
     </div>
-    <div v-if="$slots.default" :class="slotClasses">
+    <div
+      v-if="$slots.default"
+      :class="slotClasses"
+    >
       <!-- @slot Additional content can be inserted via default slot. The slot uses the same font as a `text` prop. -->
-      <slot/>
+      <slot />
     </div>
     <div :class="textClasses">
       {{ text }}
@@ -21,7 +27,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
-import { EmptyStateSize } from '.';
+import { EmptyStateSize } from './props';
 import {
   EmptyStateContent,
   EmptyStateContentSizes,
@@ -31,7 +37,7 @@ import {
   EmptyStateImageSizes,
   EmptyStateRoot,
   EmptyStateText,
-  EmptyStateTextSizes
+  EmptyStateTextSizes,
 } from './styles';
 
 /**
@@ -110,7 +116,7 @@ export default defineComponent({
       headingClasses,
       textClasses,
       slotClasses,
-    }
+    };
   },
 });
 </script>

package/src/components/or-input-box-v3/OrInputBox.vue

@@ -13,9 +13,8 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
-import { InputBoxVariant } from '.';
 import { useClassAttribute } from '../../hooks';
-import { InputBoxSize } from './props';
+import { InputBoxSize, InputBoxVariant } from './props';
 import { InputBoxRoot, InputBoxRootSizes, InputBoxRootVariants } from './styles';
 
 export default defineComponent({

package/src/components/or-menu-v3/OrMenu.stories3.ts

@@ -136,7 +136,7 @@ const OrderDropdownTemplate: StoryFn<typeof OrMenu> = (args) => ({
         color="inherit"
         @click="menu.toggle()"
       >
-        Last Updated
+        A-Z
         <OrIcon
           v-if="menu"
           :icon="menu.isOpen ? 'arrow_drop_up' : 'arrow_drop_down'"

package/src/components/or-rich-text-editor-v3/OrRichTextEditor.stories3.ts

@@ -66,11 +66,13 @@ const Template: StoryFn<typeof OrRichTextEditor> = (args) => ({
   },
 
   template: `
+  <div>
   <OrRichTextEditor
     v-model="model"
     v-bind="args"
   >
   </OrRichTextEditor>
+  </div>
   `,
 });
 

package/src/components/or-rich-text-editor-v3/OrRichTextEditor.vue

@@ -94,6 +94,8 @@ import Highlight from '@tiptap/extension-highlight';
 import Heading, { Level } from '@tiptap/extension-heading';
 import Placeholder from '@tiptap/extension-placeholder';
 
+import codemirrorNode from './utils/codemirror/codemirrorNode';
+
 export default defineComponent({
   name: 'OrRichTextEditor',
 
@@ -222,8 +224,10 @@ export default defineComponent({
         element: editorRef.value,
         autofocus: props.autofocus,
         extensions: [
+          codemirrorNode,
           StarterKit.configure({
             heading: false,
+            codeBlock: false,
           }),
           Heading.configure({ levels: headingLevels }).extend({
             levels: headingLevels,
@@ -310,7 +314,13 @@ export default defineComponent({
         editor?.chain().focus().toggleBlockquote().run();
       }
       else if (item === 'codeBlock') {
-        editor?.chain().focus().toggleCodeBlock().run();
+        if (!isActive.value['codeBlock']) {
+          // isActive.value['codeBlock'] = true;
+          editor?.commands.setNode('code_block', { language: 'javascript' });
+        } else {
+          // isActive.value['codeBlock'] = false;
+          editor?.commands.setNode('paragraph');
+        }
       }
       else if (item === 'heading') {
         if (!level) {
@@ -357,7 +367,11 @@ export default defineComponent({
     const setActiveFormats = () => {
       const toolbarList = props.toolbar.flat() as string[];
       toolbarList.forEach((item) => {
-        isActive.value[item] = editor?.isActive(item) || false;
+        if (item === 'codeBlock') {
+          isActive.value[item] = editor?.isActive('code_block') || false;
+        } else {
+          isActive.value[item] = editor?.isActive(item) || false;
+        }
       });
     };
 
@@ -478,5 +492,21 @@ export default defineComponent({
     pointer-events: none;
     float: left;
   }
+
+  .cm-editor {
+    border: solid 1px #838990;
+    border-radius: 4px;
+
+    &.cm-focused {
+      outline: none;
+    }
+
+    .cm-line {
+      &:hover {
+        background-color: rgba(0, 95, 177, 0.08);
+      }
+    }
+
+  }
 }
 </style>

package/src/components/or-rich-text-editor-v3/utils/codemirror/codemirrorNode.ts

@@ -0,0 +1,40 @@
+import { Node } from '@tiptap/core';
+import CodeBlockView from './codemirrorView';
+import { minimalSetup } from 'codemirror';
+import { javascript } from '@codemirror/lang-javascript';
+
+export default Node.create({
+  name: 'code_block',
+  content: 'text*',
+  marks: '',
+  group: 'block',
+  code: true,
+  defining: true,
+  isolating: true,
+
+  parseHTML() {
+    return [
+      {
+        tag: 'pre',
+        preserveWhitespace: 'full',
+      },
+    ];
+  },
+
+  renderHTML() {
+    return ['pre', ['code', 0]];
+  },
+
+  addNodeView() {
+    return ({ node, editor, getPos }) => {
+      return new CodeBlockView({
+        node,
+        view: editor.view,
+        getPos: getPos as () => number,
+        cmOptions: {
+          extensions: [minimalSetup, javascript()],
+        },
+      });
+    };
+  },
+});

package/src/components/or-rich-text-editor-v3/utils/codemirror/codemirrorView.ts

@@ -0,0 +1,257 @@
+import { Selection, TextSelection } from 'prosemirror-state';
+import { EditorView, NodeView } from 'prosemirror-view';
+import { Node as ProsemirrorNode } from 'prosemirror-model';
+import { exitCode } from 'prosemirror-commands';
+import { EditorState as CMState, Transaction as CMTransaction } from '@codemirror/state';
+import { Command, EditorView as CMView, keymap } from '@codemirror/view';
+
+import { ComputeChange, CodeMirrorViewOptions } from './types';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    codeBlock: {
+      /**
+       * Set a code block
+       */
+      setCodeBlock: (attributes?: { language: string; }) => ReturnType;
+      /**
+       * Toggle a code block
+       */
+      toggleCodeBlock: (attributes?: { language: string; }) => ReturnType;
+    };
+  }
+}
+
+const computeChange = (oldVal: string, newVal: string): ComputeChange | null => {
+  if (oldVal === newVal) {
+    return null;
+  }
+
+  let start = 0;
+  let oldEnd = oldVal.length;
+  let newEnd = newVal.length;
+
+  while (start < oldEnd && oldVal.charCodeAt(start) === newVal.charCodeAt(start)) {
+    start += 1;
+  }
+
+  while (oldEnd > start && newEnd > start && oldVal.charCodeAt(oldEnd - 1) === newVal.charCodeAt(newEnd - 1)) {
+    oldEnd -= 1;
+    newEnd -= 1;
+  }
+
+  return {
+    from: start,
+    to: oldEnd,
+    text: newVal.slice(start, newEnd),
+  };
+};
+
+class CodeMirrorView implements NodeView {
+  name: string;
+
+  node: ProsemirrorNode;
+
+  view: EditorView;
+
+  dom: HTMLElement;
+
+  cm: CMView;
+
+  getPos: () => number;
+
+  updating = false;
+
+  constructor(options: CodeMirrorViewOptions) {
+    // Store for later
+    this.node = options.node;
+    this.view = options.view;
+    const cmExtensions = options.cmOptions?.extensions || [];
+    this.name = 'codeBlock',
+
+    this.getPos = options.getPos as () => number;
+
+    const changeFilter = CMState.changeFilter.of((tr) => {
+      if (!tr.docChanged && !this.updating) {
+        this.forwardSelection();
+      }
+      return true;
+    });
+
+    // Create a CodeMirror instancew
+    this.cm = new CMView({
+      dispatch: this.dispatch.bind(this),
+    });
+
+    // The editor's outer node is our DOM representation
+    this.dom = this.cm.dom;
+
+    const cmState = CMState.create({
+      doc: this.node.textContent,
+      extensions: [
+        changeFilter,
+        keymap.of([
+          {
+            key: 'ArrowUp',
+            run: this.mayBeEscape('line', -1),
+          },
+          {
+            key: 'ArrowLeft',
+            run: this.mayBeEscape('char', -1),
+          },
+          {
+            key: 'ArrowDown',
+            run: this.mayBeEscape('line', 1),
+          },
+          {
+            key: 'ArrowRight',
+            run: this.mayBeEscape('char', 1),
+          },
+          {
+            key: 'Ctrl-Enter',
+            run: () => {
+              if (exitCode(this.view.state, this.view.dispatch)) {
+                this.view.focus();
+                return true;
+              }
+              return false;
+            },
+          },
+        ]),
+        cmExtensions,
+      ],
+    });
+
+    this.cm.setState(cmState);
+  }
+
+  forwardSelection() {
+    if (!this.cm.hasFocus) {
+      return;
+    }
+
+    const { state } = this.view;
+    const selection = this.asProseMirrorSelection(state.doc);
+
+    if (!selection.eq(state.selection)) {
+      this.view.dispatch(state.tr.setSelection(selection));
+    }
+  }
+
+  asProseMirrorSelection(doc: ProsemirrorNode) {
+    const offset = this.getPos() + 1;
+    const { anchor, head } = this.cm.state.selection.main;
+    return TextSelection.create(doc, anchor + offset, head + offset);
+  }
+
+  dispatch(cmTr: CMTransaction) {
+    this.cm.setState(cmTr.state);
+
+    if (cmTr.docChanged && !this.updating) {
+      const start = this.getPos() + 1;
+
+      const cmValue = cmTr.state.doc.toString();
+      const change = computeChange(this.node.textContent, cmValue);
+
+      if (!change) {
+        return;
+      }
+
+      const content = change.text ? this.view.state.schema.text(change.text) : null;
+
+      const tr = this.view.state.tr.replaceWith(change.from + start, change.to + start, content as ProsemirrorNode);
+      this.view.dispatch(tr);
+      this.forwardSelection();
+    }
+  }
+
+  mayBeEscape(unit: 'char' | 'line', dir: -1 | 1): Command {
+    return (view) => {
+      const { state } = view;
+      const { selection } = state;
+
+      const offsetToPos = () => {
+        const offset = selection.main.from;
+        const line = state.doc.lineAt(offset);
+        return {
+          line: line.number,
+          ch: offset - line.from,
+        };
+      };
+
+      const pos = offsetToPos();
+      const hasSelection = state.selection.ranges.some((r) => !r.empty);
+
+      const firstLine = 1;
+      const lastLine = state.doc.lineAt(state.doc.length).number;
+
+      if (
+        hasSelection
+        || pos.line !== (dir < 0 ? firstLine : lastLine)
+        || (unit === 'char' && pos.ch !== (dir < 0 ? 0 : state.doc.line(pos.line).length))
+      ) {
+        return false;
+      }
+
+      const targetPos = this.getPos() + (dir < 0 ? 0 : this.node.nodeSize);
+      const pmSelection = Selection.near(this.view.state.doc.resolve(targetPos), dir);
+      this.view.dispatch(this.view.state.tr.setSelection(pmSelection).scrollIntoView());
+      this.view.focus();
+      return true;
+    };
+  }
+
+  update(node: ProsemirrorNode) {
+    if (node.type !== this.node.type) {
+      return false;
+    }
+
+    this.node = node;
+    const change = computeChange(this.cm.state.doc.toString(), node.textContent);
+
+    if (change) {
+      this.updating = true;
+      this.cm.dispatch({
+        changes: {
+          from: change.from,
+          to: change.to,
+          insert: change.text,
+        },
+      });
+      this.updating = false;
+    }
+
+    return true;
+  }
+
+  setSelection(anchor: number, head: number): void {
+    this.focus();
+    this.updating = true;
+    this.cm.dispatch({
+      selection: {
+        anchor,
+        head,
+      },
+    });
+    this.updating = false;
+  }
+
+  focus() {
+    this.cm.focus();
+    this.forwardSelection();
+  }
+
+  selectNode() {
+    this.focus();
+  }
+
+  stopEvent() {
+    return true;
+  }
+
+  destroy() {
+    this.cm.destroy();
+  }
+}
+
+export default CodeMirrorView;

package/src/components/or-rich-text-editor-v3/utils/codemirror/index.ts

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

package/src/components/or-rich-text-editor-v3/utils/codemirror/types.ts

@@ -0,0 +1,22 @@
+import type { EditorView } from 'prosemirror-view';
+import type { Node as ProsemirrorNode } from 'prosemirror-model';
+import type { Extension } from '@codemirror/state';
+
+export interface ComputeChange {
+  from: number;
+  to: number;
+  text: string;
+}
+
+interface CMOptions {
+  extensions: Extension;
+}
+
+export type GetPos = () => number | undefined;
+
+export interface CodeMirrorViewOptions {
+  node: ProsemirrorNode;
+  view: EditorView;
+  getPos: GetPos;
+  cmOptions?: CMOptions;
+}

package/src/components/or-rich-text-editor-v3/utils/markdown.ts

@@ -91,6 +91,8 @@ const serialize = (schema: any, content: any) => {
 };
 
 const deserialize = (schema: any, content: any) => {
+  if (!content) return null;
+
   const html = marked.parse(content);
 
   if (!html) return null;

package/src/components/or-search-v3/OrSearch.stories3.ts

@@ -5,7 +5,7 @@ import OrSearch from './OrSearch.vue';
 import { SearchSize } from './props';
 
 export default {
-  title: 'Components/Forms/Search',
+  title: 'Components/Search',
   component: OrSearch,
 
   argTypes: {

package/src/components/or-search-v3/OrSearch.vue

@@ -35,6 +35,12 @@ export default defineComponent({
   inheritAttrs: false,
 
   props: {
+    modelValue: {
+      type: String,
+      default: '',
+      required: false,
+    },
+
     size: {
       type: String as PropType<SearchSize>,
       default: SearchSize.M,
@@ -42,7 +48,7 @@ export default defineComponent({
 
     placeholder: {
       type: String,
-      default: undefined,
+      default: 'Search',
     },
 
     debounce: {
@@ -90,7 +96,7 @@ export default defineComponent({
     ]);
 
     // State
-    const localModelValue = ref('');
+    const localModelValue = ref(props.modelValue ?? '');
 
     // Events
     debouncedWatch(

package/src/components/or-teleport-v3/OrTeleport.stories3.ts

@@ -1,5 +1,5 @@
 import { Meta, StoryFn } from '@storybook/vue3';
-import { OrTeleportV3 as OrTeleport } from '.';
+import OrTeleport from './OrTeleport.vue3.vue';
 import OrTeleportDocs from './OrTeleport.docs.mdx';
 
 export default {