@onereach/ui-components 2.63.0-beta.1907.0 → 2.63.0

package/dist/v3/components/or-rich-text-editor-v3/OrRichTextEditor.vue.d.ts

@@ -1,111 +0,0 @@
-import { Editor } from '@tiptap/core';
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
-    editor: Editor | null;
-    editorRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
-    containerRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
-    iconsEnum: import("@vue/composition-api").Ref<{
-        [x: string]: string;
-    }>;
-    handleToolbarClick: (item: string) => void;
-    handleEditorClick: () => void;
-    isActive: import("@vue/composition-api").Ref<{
-        [x: string]: boolean;
-    }>;
-    iconTooltipsEnum: import("@vue/composition-api").Ref<{
-        [x: string]: string;
-    }>;
-    containerStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    toolbarContainerStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    toolbarStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
-    toolbarButtonStyles: (item: string) => string[];
-    editorInputStyles: import("@vue/composition-api").ComputedRef<string[]>;
-}> & import("@vue/composition-api").Data, {}, {}, {
-    modelValue: {
-        type: StringConstructor;
-        default: string;
-        required: false;
-    };
-    toolbar: {
-        type: ArrayConstructor;
-        default: () => string[][];
-    };
-    description: {
-        type: StringConstructor;
-        default: string;
-    };
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-    };
-    autofocus: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}, import("@vue/composition-api").ExtractPropTypes<{
-    modelValue: {
-        type: StringConstructor;
-        default: string;
-        required: false;
-    };
-    toolbar: {
-        type: ArrayConstructor;
-        default: () => string[][];
-    };
-    description: {
-        type: StringConstructor;
-        default: string;
-    };
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-    };
-    autofocus: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    modelValue: string;
-    toolbar: unknown[];
-    description: string;
-    placeholder: string;
-    autofocus: boolean;
-} & {} & {
-    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, import("@vue/composition-api").ShallowUnwrapRef<{
-    editor: Editor | null;
-    editorRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
-    containerRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
-    iconsEnum: import("@vue/composition-api").Ref<{
-        [x: string]: string;
-    }>;
-    handleToolbarClick: (item: string) => void;
-    handleEditorClick: () => void;
-    isActive: import("@vue/composition-api").Ref<{
-        [x: string]: boolean;
-    }>;
-    iconTooltipsEnum: import("@vue/composition-api").Ref<{
-        [x: string]: string;
-    }>;
-    containerStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    toolbarContainerStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    toolbarStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
-    toolbarButtonStyles: (item: string) => string[];
-    editorInputStyles: import("@vue/composition-api").ComputedRef<string[]>;
-}>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
-    modelValue: string;
-    toolbar: unknown[];
-    description: string;
-    placeholder: string;
-    autofocus: boolean;
-} & {} & {
-    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, {
-    modelValue: string;
-    toolbar: unknown[];
-    description: string;
-    placeholder: string;
-    autofocus: boolean;
-}, true>);
-export default _default;

package/dist/v3/components/or-rich-text-editor-v3/index.d.ts

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

package/dist/v3/components/or-rich-text-editor-v3/styles.d.ts

@@ -1,7 +0,0 @@
-export declare const EditorContainer: string[];
-export declare const EditorContainerFilled: string[];
-export declare const ToolbarContainer: string[];
-export declare const Toolbar: string[];
-export declare const ToolbarButton: string[];
-export declare const ToolbarButtonActive: string[];
-export declare const EditorInput: string[];

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

@@ -1,16 +0,0 @@
-import {
-  Title,
-  Subtitle,
-  Description,
-  Primary,
-  ArgsTable,
-  Stories,
-  PRIMARY_STORY
-} from '@storybook/addon-docs';
-
-<Title />
-<Subtitle />
-<Description />
-<Primary />
-<ArgsTable story={PRIMARY_STORY} />
-<Stories />

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

@@ -1,57 +0,0 @@
-import { Meta, StoryFn } from '@storybook/vue3';
-import { ref } from 'vue-demi';
-import OrRichTextEditorDocs from './OrRichTextEditor.docs.mdx';
-import OrRichTextEditor from './OrRichTextEditor.vue';
-
-export default {
-  title: 'Demo/OrRichTextEditor',
-  component: OrRichTextEditor,
-
-  argTypes: {
-    // Props
-    description: {
-      control: { type: 'text' },
-    },
-    placeholder: {
-      control: { type: 'text' },
-    },
-    modelValue: {
-      control: { type: 'text' },
-    },
-  },
-
-  parameters: {
-    docs: {
-      page: OrRichTextEditorDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=608%3A2926',
-    },
-  },
-} as Meta<typeof OrRichTextEditor>;
-
-const Template: StoryFn<typeof OrRichTextEditor> = (args) => ({
-  components: {
-    OrRichTextEditor,
-  },
-
-  setup() {
-    // Refs
-    const text = ref('');
-    return {
-      args,
-      text,
-    };
-  },
-
-  template: `
-  <OrRichTextEditor
-  v-bind="args"
-  v-model="text"
-  />
-  `,
-});
-
-export const RichTextEditor = Template.bind({});

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

@@ -1,322 +0,0 @@
-<template>
-  <div
-    ref="root"
-    v-bind="$attrs"
-    :class="rootStyles"
-  >
-    <or-label>
-      {{ description }}
-    </or-label>
-    <div
-      ref="containerRef"
-      :class="containerStyles"
-      @click="handleEditorClick()"
-    >
-      <div :class="toolbarContainerStyles">
-        <div
-          v-for="tool in toolbar"
-          :key="tool"
-          :class="toolbarStyles"
-        >
-          <div
-            v-for="item in tool"
-            :key="item"
-            :class="toolbarButtonStyles(item)"
-          >
-            <or-icon-button
-              :tooltip="{text: iconTooltipsEnum[item], placement: 'top'}"
-              :icon="{icon: iconsEnum[item], variant: 'inherit', size: 's'}"
-              @click="handleToolbarClick(item)"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        ref="editorRef"
-        :class="editorInputStyles"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
-import { Editor } from '@tiptap/core';
-import StarterKit from '@tiptap/starter-kit';
-import Underline from '@tiptap/extension-underline';
-import Link from '@tiptap/extension-link';
-import Highlight from '@tiptap/extension-highlight';
-import Placeholder from '@tiptap/extension-placeholder';
-import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
-import { OrLabelV3 as OrLabel } from '../or-label-v3';
-import { flatMap } from 'lodash';
-import {
-  EditorContainer,
-  EditorContainerFilled,
-  ToolbarContainer,
-  Toolbar,
-  ToolbarButtonActive,
-  ToolbarButton,
-  EditorInput,
-} from './styles';
-
-export default defineComponent({
-  name: 'OrRichTextEditor',
-
-  components: {
-    OrIconButton,
-    OrLabel,
-  },
-
-  inheritAttrs: false,
-
-  props: {
-    modelValue: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    toolbar: {
-      type: Array,
-      default: () => [['bold', 'italic', 'strike'], ['underline', 'highlight'], ['link'], ['bulletList', 'orderedList'], ['undo', 'redo']],
-    },
-    description: {
-      type: String,
-      default: '',
-    },
-    placeholder: {
-      type: String,
-      default: 'Write something...',
-    },
-    autofocus: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  emits: ['update:modelValue'],
-
-  setup(props, { emit }) {
-    // Refs
-    let editor = null as Editor | null;
-    const editorRef = ref<HTMLDivElement>();
-    const containerRef = ref<HTMLDivElement>();
-    const isActive = ref<{[key: string]: boolean;}>({});
-    const isFilled = ref<boolean>(false);
-    const iconsEnum = ref<{[key: string]: string;}>({
-      bold: 'format_bold',
-      italic: 'format_italic',
-      underline: 'format_underlined',
-      strike: 'format_strikethrough',
-      bulletList: 'format_list_bulleted',
-      orderedList: 'format_list_numbered',
-      link: 'link',
-      highlight: 'highlight',
-      redo: 'redo',
-      undo: 'undo',
-    });
-
-    const iconTooltipsEnum = ref<{[key: string]: string;}>({
-      bold: 'Bold',
-      italic: 'Italic',
-      underline: 'Underline',
-      strike: 'Strike',
-      bulletList: 'Bulleted List',
-      orderedList: 'Numbered List',
-      link: 'Link',
-      highlight: 'Highlight',
-      redo: 'Redo',
-      undo: 'Undo',
-    });
-
-    onMounted(() => {
-      editor = new Editor({
-        onUpdate: ({ editor }) => {
-          setActiveFormats();
-          const html = editor.getHTML();
-          const text = editor.getText();
-          emit('update:modelValue', text === '' ? text : html);
-          isFilled.value = text !== '';
-        },
-        element: editorRef.value,
-        content: props.modelValue,
-        autofocus: props.autofocus,
-        extensions: [
-          StarterKit,
-          Underline,
-          Link.configure({
-            openOnClick: true,
-            linkOnPaste: true,
-            autolink: false,
-            protocols: ['ftp', 'mailto', 'http', 'https'],
-            validate: href => /^https?:\/\//.test(href),
-            HTMLAttributes: {
-              class: 'text-primary cursor-pointer',
-            },
-          }),
-          Highlight,
-          Placeholder
-            .configure({
-              placeholder: props.placeholder,
-              emptyEditorClass: 'is-editor-empty text-outline',
-            }),
-        ],
-        editorProps: {
-          attributes: {
-            class: 'focus:outline-none',
-          },
-        },
-      });
-      setActiveFormats();
-      isFilled.value = props.modelValue !== '';
-    });
-
-    onBeforeUnmount(() => {
-      editor?.destroy();
-    });
-
-    // Methods
-    const handleEditorClick = () => {
-      setActiveFormats();
-      editor?.commands.focus();
-    };
-
-    const handleToolbarClick = (item: string) => {
-      if (item === 'bulletList' || item === 'orderedList') {
-        item === 'bulletList' ? editor?.commands.toggleBulletList() : editor?.commands.toggleOrderedList();
-      }
-      else if (item === 'link') {
-        setLink();
-      }
-      else if (item === 'undo' || item === 'redo') {
-        item === 'undo' ? editor?.commands.undo() : editor?.commands.redo();
-      }
-      else {
-        editor?.chain().focus().toggleMark(item).run();
-      }
-    };
-
-    const setLink = () => {
-      const previousUrl = editor?.getAttributes('link').href;
-      const url = window.prompt('URL', previousUrl);
-
-      // cancelled
-      if (url === null) {
-        return;
-      }
-
-      // empty
-      if (url === '') {
-        editor?.chain().focus().extendMarkRange('link').unsetLink().run();
-        return;
-      }
-
-      // update link
-      editor?.chain()
-        .focus()
-        .extendMarkRange('link')
-        .setLink({ href: url })
-        .run();
-    };
-
-    const setActiveFormats = () => {
-      const toolbarList = flatMap(props.toolbar) as string[];
-      toolbarList.forEach((item) => {
-        isActive.value[item] = editor?.isActive(item) || false;
-      });
-    };
-
-    // Styles
-    const classAttribute = useClassAttribute();
-
-    const rootStyles = computed(() => {
-      return [
-        'or-rich-text-editor',
-        classAttribute.value,
-      ];
-    });
-
-    const containerStyles = computed(() => {
-      return [
-        ...EditorContainer,
-        ...(isFilled.value ? EditorContainerFilled : []),
-      ];
-    });
-
-    const toolbarContainerStyles = computed(() => {
-      return [
-        ...ToolbarContainer,
-      ];
-    });
-
-    const toolbarStyles = computed(() => {
-      return [
-        ...Toolbar,
-      ];
-    });
-
-    const editorInputStyles = computed(() => {
-      return [
-        'tiptap-editor',
-        ...EditorInput,
-      ];
-    });
-
-    const toolbarButtonStyles = (item: string) => {
-      return [
-        // Layout
-        'flex',
-        // Spacing
-        'gap-md',
-        ...isActive.value[item] ? ToolbarButtonActive : ToolbarButton,
-      ];
-    };
-
-    //Effects
-    watch(() => props.modelValue, (value) => {
-      if (value !== editor?.getHTML()) {
-        editor?.commands.setContent(value);
-      }
-    });
-
-    return {
-      editor,
-      editorRef,
-      containerRef,
-      iconsEnum,
-      handleToolbarClick,
-      handleEditorClick,
-      isActive,
-      iconTooltipsEnum,
-      containerStyles,
-      toolbarContainerStyles,
-      toolbarStyles,
-      rootStyles,
-      toolbarButtonStyles,
-      editorInputStyles,
-    };
-  },
-});
-</script>
-
-<style lang="scss">
-.tiptap-editor {
-  ol { //see if editor can not inherit it
-    margin: 0 24px;
-    list-style: decimal;
-  }
-
-  ul {
-    margin: 0 24px;
-    list-style: initial;
-  }
-
-  .is-editor-empty::before {
-    content: attr(data-placeholder);
-    height: 0;
-    pointer-events: none;
-    float: left;
-  }
-}
-</style>

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

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

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

@@ -1,71 +0,0 @@
-export const EditorContainer: string[] = [
-  // Colors
-  'border-disabled',
-  'dark:border-outline-dark',
-  'focus-within:theme-border-1-primary',
-  'dark:focus-within:theme-border-1-primary-dark',
-  'focus-within:bg-primary-opacity-0-08',
-  'dark:focus-within:bg-primary-opacity-0-08-dark',
-  'focus-within:theme-outline-primary',
-  'dark:focus-within:theme-outline-primary-dark',
-
-  // Sizing
-  'border-1',
-  'rounded-md',
-];
-
-export const EditorContainerFilled: string[] = [
-  //Colors
-  'bg-primary-opacity-0-08',
-  'dark:bg-primary-opacity-0-08-dark',
-];
-
-export const ToolbarContainer: string[] = [
-  // Layout
-  'flex',
-  //Spacing
-  'py-sm',
-  //Sizing
-  'border-b-1',
-  //Colors
-  'border-b-disabled',
-  'dark:border-b-outline-dark',
-];
-
-export const Toolbar: string[] = [
-  // Layout
-  'flex',
-  // Spacing
-  'px-sm',
-  'gap-md',
-  // Sizing
-  'border-r-1',
-  //Colors
-  'border-r-disabled',
-  'dark:border-r-outline-dark',
-  // Last child
-  'last-of-type:border-none',
-];
-
-export const ToolbarButton: string[] = [
-  // Typography
-  'text-on-disabled',
-  'dark:text-outline-dark',
-];
-
-export const ToolbarButtonActive: string[] = [
-  // Typography
-  'text-on-background',
-  'dark:text-on-background-dark',
-];
-
-export const EditorInput: string[] = [
-  // Spacing
-  'p-sm',
-  // Typography
-  'typography-body-2-regular',
-  'text-on-background',
-  'dark:text-on-background-dark',
-  // Sizing
-  'min-h-[88px]',
-];