@onereach/ui-components 10.4.5-beta.4373.0 → 10.5.0-beta.4375.0

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

@@ -0,0 +1,253 @@
+<template>
+  <div
+    ref="toolbarRef"
+    :class="toolbarContainerStyles"
+  >
+    <div
+      v-for="(tools, index) in toolbar"
+      :key="index"
+      :class="[...toolbarStyles, { 'hidden': isVisible(tools)}]"
+    >
+      <div
+        v-for="item in tools"
+        :key="item"
+        :class="['flex gap-md', { 'hidden': !isVisible(item)}]"
+      >
+        <or-icon-button
+          v-if="item==='heading'"
+          ref="toolbarButtonRef"
+          :selected="isActive[item]"
+          :disabled="isDisabled(item)"
+          :tooltip="{content: iconTooltipsEnum[item], placement: 'top'}"
+          :icon="{icon: headingIcon, variant: 'inherit'}"
+          @click="menuRef && menuRef.toggle()"
+        />
+        <or-icon-button
+          v-else-if="isVisible(item)"
+          :tooltip="{content: iconTooltipsEnum[item], placement: 'top'}"
+          :selected="isActive[item]"
+          :disabled="isDisabled(item)"
+          :icon="{icon: iconsEnum[item], variant: 'inherit'}"
+          @click="handleClick(item)"
+        />
+      </div>
+    </div>
+    <or-icon-button
+      v-if="countOfNotVisibleTools > 0"
+      ref="moreButtonRef"
+      :disabled="!isFocused"
+      :icon="{icon: 'more_horiz', variant: 'inherit'}"
+      class="px-sm"
+      @click="moreRef && moreRef.open()"
+    />
+    <or-popover
+      v-if="moreButtonRef"
+      ref="moreRef"
+      :trigger="moreButtonRef && moreButtonRef.root"
+      placement="top-end"
+    >
+      <div class="flex p-sm gap-md">
+        <or-icon-button
+          v-for="item in notVisibleTools"
+          :key="item"
+          :tooltip="{content: iconTooltipsEnum[item], placement: 'top'}"
+          :selected="isActive[item]"
+          :icon="{icon: iconsEnum[item], variant: 'inherit'}"
+          @click="handleClick(item)"
+        />
+      </div>
+    </or-popover>
+    <or-menu
+      v-if="toolbarButtonRef"
+      ref="menuRef"
+      :trigger="toolbarButtonRef[getIndexOfHeading] && toolbarButtonRef[getIndexOfHeading].root"
+      placement="bottom-start"
+    >
+      <or-menu-item
+        v-for="heading in headingLevels"
+        :key="heading"
+        :selected="activeHeadingLevel === heading"
+        @click="handleClick('heading', heading)"
+      >
+        Heading {{ heading }}
+      </or-menu-item>
+      <or-menu-item
+        :selected="!activeHeadingLevel"
+        @click="handleClick('heading')"
+      >
+        None
+      </or-menu-item>
+    </or-menu>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, PropType, ComponentPublicInstance } from 'vue-demi';
+import { ToolbarContainer, ToolbarButtonFocused, ToolbarButton, Toolbar } from '../styles';
+import { OrIconButtonV3 as OrIconButton } from '../../or-icon-button-v3';
+import { OrMenuItemV3 as OrMenuItem } from '../../or-menu-item-v3';
+import { OrMenuV3 as OrMenu } from '../../or-menu-v3';
+import { OrPopoverV3 as OrPopover } from '../../or-popover-v3';
+import { Level } from '@tiptap/extension-heading';
+import { isArray } from '../../../utils';
+
+import { Tools } from '../props';
+
+export default defineComponent({
+  components: {
+    OrIconButton,
+    OrMenuItem,
+    OrMenu,
+    OrPopover,
+  },
+
+  props: {
+    toolbar: {
+      type: Array as PropType<Tools>,
+      default: () => [],
+    },
+    isFocused: {
+      type: Boolean,
+      default: false,
+    },
+    countOfNotVisibleTools: {
+      type: Number,
+      default: 0,
+    },
+    activeHeadingLevel: {
+      type: Number,
+      default: 0,
+    },
+    isActive: {
+      type: Object as PropType<{ [key: string]: boolean; }>,
+      default: () => ({}),
+    },
+    headingLevels: {
+      type: Array as PropType<Level[]>,
+      default: () => [1, 2, 3, 4],
+    },
+  },
+
+  emits: ['click-tool'],
+
+  setup(props, { emit }) {
+    const toolbarRef = ref<ComponentPublicInstance<HTMLInputElement>>();
+    const moreButtonRef = ref<InstanceType<typeof OrIconButton>>();
+    const moreRef = ref<InstanceType<typeof OrPopover>>();
+    const toolbarButtonRef = ref<InstanceType<typeof OrIconButton>>();
+    const menuRef = ref<InstanceType<typeof OrMenu>>();
+
+    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',
+      codeBlock: 'code_blocks',
+      blockquote: 'format_quote',
+      file: 'attach_file',
+      source: 'source_notes',
+    });
+
+    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',
+      codeBlock: 'Code Block',
+      blockquote: 'Quote',
+      file: 'File',
+      source: 'Source',
+      heading: 'Heading',
+    });
+
+    const notVisibleTools = computed((): Set<string> => {
+      const count = props.countOfNotVisibleTools;
+      const toolbar = props.toolbar.flat();
+      let notVisible = new Set(toolbar.slice(toolbar.length - count, toolbar.length));
+      props.toolbar.forEach(tools => {
+        if (tools.some(item => notVisible.has(item))) {
+          tools.forEach(item => notVisible.add(item));
+        }
+      });
+      return notVisible;
+    });
+
+    const toolbarContainerStyles = computed(() => [
+      ...ToolbarContainer,
+    ]);
+
+    const toolbarStyles = computed(() => [
+      ...Toolbar,
+      ...props.isFocused ? ToolbarButtonFocused : ToolbarButton,
+    ]);
+
+    const getIndexOfHeading = computed(() => {
+      return props.toolbar.flat().indexOf('heading');
+    });
+
+    const headingIcon = computed(() => {
+      if (props.activeHeadingLevel && props.isActive.heading) {
+        return `format_h${props.activeHeadingLevel}`;
+      }
+      return 'format_paragraph';
+    });
+
+    const isVisible = (value: string | Array<string>) => {
+      if (isArray(value)) {
+        const isHaveNotVisibleTools = value.some(item => notVisibleTools.value.has(item));
+        return isHaveNotVisibleTools;
+      }
+      return !notVisibleTools.value.has(value);
+    };
+
+    const isDisabled = (item: string) => {
+      if (!props.isFocused) return true;
+
+      if (props.isActive.heading) {
+        return item === 'orderedList' || item === 'bulletList';
+      } else if (props.isActive.orderedList || props.isActive.bulletList) {
+        return item === 'heading';
+      }
+
+      return false;
+    };
+
+    const handleClick = (item: string, level?: number) => {
+      emit('click-tool', {
+        item,
+        level,
+      });
+    };
+
+    return {
+      toolbarRef,
+      moreButtonRef,
+      moreRef,
+      toolbarButtonRef,
+      menuRef,
+      toolbarContainerStyles,
+      toolbarStyles,
+      isVisible,
+      handleClick,
+      headingIcon,
+      getIndexOfHeading,
+      notVisibleTools,
+      iconsEnum,
+      iconTooltipsEnum,
+      isDisabled,
+    };
+  },
+});
+</script>

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

@@ -6,42 +6,8 @@ export const OrRichTextEditor: string[] = [
   'gap-xs',
 
   // Box
-  'max-h-full',
-];
-
-export const EditorContainer: string[] = [
-  // Layout
-  'layout-column',
-
-  // Theme (focus)
-  'focus-within:theme-background-primary-translucent-1',
-  'dark:focus-within:theme-background-primary-translucent-1-dark',
-
-  'focus-within:theme-border-primary focus-within:border-1',
-  'dark:focus-within:theme-border-primary-dark',
-
-  'focus-within:theme-outline-primary focus-within:outline-2',
-  'dark:focus-within:theme-outline-primary-dark',
-
-  // Theme (invalid)
-  'invalid:theme-background-error-translucent-1',
-  'dark:invalid:theme-background-error-translucent-1-dark',
-
-  'invalid:theme-foreground-default',
-  'dark:invalid:theme-foreground-default-dark',
-
-  'invalid:theme-border-error invalid:border-1',
-  'dark:invalid:theme-border-error-dark',
-
-  'invalid:theme-outline-transparent invalid:outline-2',
-  'dark:invalid:theme-outline-transparent',
-
-  // Box
-  'border-1',
-  'rounded-md',
+  'h-full',
   'w-full',
-  'overflow-hidden',
-  'grow',
 ];
 
 export const ToolbarContainer: string[] = [
@@ -54,6 +20,9 @@ export const ToolbarContainer: string[] = [
   //Sizing
   'border-b-1',
 
+  //Box
+  'w-full',
+
   //Colors
   'border-b-outline',
 ];
@@ -85,8 +54,3 @@ export const ToolbarButtonFocused: string[] = [
   // Typography
   'text-outline',
 ];
-
-export const EditorInput: string[] = [
-  // Typography
-  'typography-body-2-regular',
-];

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

@@ -41,8 +41,8 @@ const mdSerializerMarks = {
     expelEnclosingWhitespace: true,
   },
   [Italic.name]: {
-    open: ' _',
-    close: '_ ',
+    open: '_',
+    close: '_',
     mixable: true,
     expelEnclosingWhitespace: true,
   },

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

@@ -2,7 +2,7 @@
   <OrInput
     :ref="'root'"
     v-bind="controlAttributes"
-    v-model="draft"
+    v-model.trim="draftModelValue"
     :class="rootStyles"
     :type="'search'"
     :size="size"
@@ -22,7 +22,6 @@ import { PropType, computed, defineComponent, reactive, ref, toRef, watch } from
 import { useControlAttributes, useIdAttribute, useProxyModelValue, useValidationAttributes } from '../../hooks';
 import { InputBoxSize } from '../or-input-box-v3';
 import { OrInputV3 as OrInput } from '../or-input-v3';
-import { SearchModelValue } from './types';
 
 export default defineComponent({
   name: 'OrSearch',
@@ -38,8 +37,8 @@ export default defineComponent({
 
   props: {
     modelValue: {
-      type: undefined as unknown as PropType<SearchModelValue>,
-      default: undefined,
+      type: String,
+      default: '',
     },
 
     size: {
@@ -79,53 +78,54 @@ export default defineComponent({
   expose: [
     'root',
 
-    'clear',
     'focus',
     'blur',
+    'clear',
   ],
 
   setup(props, context) {
-    const controlAttributes = reactive({
-      id: useIdAttribute(),
-      ...useControlAttributes(),
-      ...useValidationAttributes(),
-    });
-
-    // Refs & Styles
+    // Refs
     const root = ref<InstanceType<typeof OrInput>>();
 
+    // Styles
     const rootStyles = computed(() => [
       'or-search-v3',
     ]);
 
     // State
-    const model = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const draft = ref(props.modelValue);
+    const controlAttributes = reactive({
+      id: useIdAttribute(),
+      ...useControlAttributes(),
+      ...useValidationAttributes(),
+    });
 
-    watch(model, (value) => {
-      draft.value = value;
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const draftModelValue = ref(props.modelValue);
+
+    watch(proxyModelValue, (value) => {
+      draftModelValue.value = value;
     });
 
-    watchDebounced(draft, (value) => {
-      if (value) {
-        context.emit('search', model.value = value);
+    watchDebounced(draftModelValue, (value) => {
+      if (value.length > 0) {
+        proxyModelValue.value = value;
+
+        context.emit('search', value);
       }
     }, {
       debounce: toRef(props, 'debounce'),
     });
 
-    watch(draft, (nextValue, prevValue) => {
-      if (!nextValue && prevValue) {
-        context.emit('search', model.value = nextValue);
+    watch(draftModelValue, (nextValue, prevValue) => {
+      if (nextValue.length === 0 && prevValue.length > 0) {
+        proxyModelValue.value = nextValue;
+
+        context.emit('search', '');
         context.emit('clear');
       }
     });
 
     // Methods
-    function clear(): void {
-      (root.value as { clear: () => void; } | undefined)?.clear(); // fixes error TS2349
-    }
-
     function focus(): void {
       (root.value as { focus: () => void; } | undefined)?.focus(); // fixes error TS2349
     }
@@ -134,18 +134,21 @@ export default defineComponent({
       (root.value as { blur: () => void; } | undefined)?.blur(); // fixes error TS2349
     }
 
-    return {
-      controlAttributes,
+    function clear(): void {
+      draftModelValue.value = '';
+    }
 
+    return {
       root,
       rootStyles,
 
-      model,
-      draft,
+      controlAttributes,
+      proxyModelValue,
+      draftModelValue,
 
-      clear,
       focus,
       blur,
+      clear,
     };
   },
 });

package/src/components/or-search-v3/index.ts

@@ -1,2 +1 @@
 export { default as OrSearchV3 } from './OrSearch.vue';
-export * from './types';

package/src/components/or-segmented-control-v3/OrSegmentedControl.vue

@@ -39,7 +39,7 @@ export default defineComponent({
   props: {
     options: {
       type: Array as PropType<SegmentedControlOption[]>,
-      default: () => [],
+      default: [] as SegmentedControlOption[],
     },
 
     modelValue: {

package/src/components/or-select-v3/OrSelect.vue

@@ -314,12 +314,12 @@ export default defineComponent({
 
     options: {
       type: Array as PropType<SelectItem[]>,
-      default: () => [],
+      default: [] as SelectItem[],
     },
 
     searchOptions: {
       type: Array as PropType<SelectItem[]>,
-      default: () => [],
+      default: [] as SelectItem[],
     },
 
     multiple: {
@@ -593,7 +593,7 @@ export default defineComponent({
       if (props.multiple) {
         proxyModelValue.value = exclude(item.value, toArray(proxyModelValue.value));
       } else {
-        proxyModelValue.value = undefined;
+        proxyModelValue.value = null;
       }
     }
 
@@ -607,7 +607,7 @@ export default defineComponent({
           proxyModelValue.value = exclude(item.value, model);
         }
       } else {
-        proxyModelValue.value = proxyModelValue.value !== item.value ? item.value : undefined;
+        proxyModelValue.value = proxyModelValue.value !== item.value ? item.value : null;
       }
 
       searchText.value = '';

package/src/components/or-select-v3/partials/or-select-multiple-control/OrSelectMultipleControl.vue

@@ -81,12 +81,12 @@ export default defineComponent({
 
     model: {
       type: undefined as unknown as PropType<SelectModelValue>,
-      default: () => [],
+      default: [] as SelectModelValue,
     },
 
     options: {
       type: Array as PropType<SelectItem[]>,
-      default: () => [],
+      default: [] as SelectItem[],
     },
 
     overflow: {

package/src/components/or-select-v3/partials/or-select-single-control/OrSelectSingleControl.vue

@@ -62,7 +62,7 @@ export default defineComponent({
 
     options: {
       type: Array as PropType<SelectItem[]>,
-      default: () => [],
+      default: [] as SelectItem[],
     },
 
     placeholder: {

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

@@ -44,8 +44,8 @@ export const SelectDropdown: string[] = [
   'theme-background-default',
   'dark:theme-background-default-dark',
 
-  'theme-border-outline border-1',
-  'dark:theme-border-outline-dark',
+  'theme-border-1-outline',
+  'dark:theme-border-1-outline-dark',
 ];
 
 export const SelectDropdownDefault: string[] = [

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

@@ -79,8 +79,10 @@ export const SidebarFooter: string[] = [
   'overflow-hidden',
 
   // Theme
-  'theme-border-outline-variant border-t-1',
-  'dark:theme-border-outline-variant-dark',
+  'theme-border-overline',
+
+  'theme-border-1-outline-variant',
+  'dark:theme-border-1-outline-variant-dark',
 ];
 
 export const SidebarFooterPaddings: Record<ResizeablePanelPadding, string[]> = {