@onereach/ui-components 4.4.0-beta.2680.0 → 4.4.0-beta.2690.0

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

@@ -13,6 +13,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         [x: number]: string;
     } | {}, true> | undefined>;
     moreButtonRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
+    textareaRef: import("@vue/composition-api").Ref<HTMLTextAreaElement | undefined>;
     moreRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
     menuRef: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
@@ -48,6 +49,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     isVisible: (value: string | Array<string>) => boolean;
     countOfNotVisibleTools: import("@vue/composition-api").Ref<number>;
     notVisibleTools: import("@vue/composition-api").ComputedRef<string[]>;
+    handleInput: (event: InputEvent) => void;
+    proxyModelValue: import("@vue/composition-api").WritableComputedRef<string>;
+    disableMarkdown: import("@vue/composition-api").Ref<boolean>;
+    sourceValue: import("@vue/composition-api").Ref<string>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: StringConstructor;
@@ -153,6 +158,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         [x: number]: string;
     } | {}, true> | undefined>;
     moreButtonRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
+    textareaRef: import("@vue/composition-api").Ref<HTMLTextAreaElement | undefined>;
     moreRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
     menuRef: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
@@ -188,6 +194,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     isVisible: (value: string | Array<string>) => boolean;
     countOfNotVisibleTools: import("@vue/composition-api").Ref<number>;
     notVisibleTools: import("@vue/composition-api").ComputedRef<string[]>;
+    handleInput: (event: InputEvent) => void;
+    proxyModelValue: import("@vue/composition-api").WritableComputedRef<string>;
+    disableMarkdown: import("@vue/composition-api").Ref<boolean>;
+    sourceValue: import("@vue/composition-api").Ref<string>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: string;
     toolbar: string[][];

package/dist/esm/v3/components/or-rich-text-editor-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrRichTextEditorV3 } from '../../OrRichTextEditor-c3560ddb.js';
+export { s as OrRichTextEditorV3 } from '../../OrRichTextEditor-809824b9.js';
 import 'vue-demi';
 import '@vueuse/integrations/useFocusTrap';
 import '@vueuse/core';

package/dist/esm/v3/components/or-select-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from '../../OrSelect-b1d7651a.js';
+export { s as OrSelectV3 } from '../../OrSelect-3dbddc6b.js';
 export { I as SelectSize } from '../../OrInputBox-ba40bbdf.js';
 import 'vue-demi';
 import '../../dropdown-open-e1f90e0a.js';

package/dist/esm/v3/index.js

@@ -9,7 +9,7 @@ export { s as OrCard } from './OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection-d79dac85.js';
 export { D as DefaultCardCollectionViews, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-b319b723.js';
 export { s as OrCardV3 } from './OrCard-cc82902c.js';
-export { s as OrCarousel } from './OrCarousel-4fb775f8.js';
+export { s as OrCarousel } from './OrCarousel-40f069d5.js';
 export { s as OrCarouselItem } from './OrCarouselItem-8c7ccd0f.js';
 export { s as OrCheckbox } from './OrCheckbox-ab457011.js';
 export { s as OrCheckboxV3 } from './OrCheckbox-56d7b6eb.js';
@@ -71,7 +71,7 @@ export { s as OrSearch } from './OrSearch-f4ad73db.js';
 export { s as OrSearchV3 } from './OrSearch-e15c7fd2.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-359fbf3a.js';
 export { s as OrSelect } from './OrSelect-6ff34196.js';
-export { s as OrSelectV3 } from './OrSelect-b1d7651a.js';
+export { s as OrSelectV3 } from './OrSelect-3dbddc6b.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-375c85a3.js';
 export { s as OrSidebarV3 } from './OrSidebar-bfd19c4c.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-63914891.js';
@@ -108,7 +108,7 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-a1332
 export { s as OrTooltip } from './OrTooltip-89ce98e8.js';
 export { s as OrTooltipContent } from './OrTooltipContent-37a5f562.js';
 export { s as OrTooltipV3 } from './OrTooltip-4bb0054a.js';
-export { s as OrRichTextEditorV3 } from './OrRichTextEditor-c3560ddb.js';
+export { s as OrRichTextEditorV3 } from './OrRichTextEditor-809824b9.js';
 export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e1f90e0a.js';
 export { u as useControlAttributes, a as useIdAttribute } from './useIdAttribute-859439f0.js';
 export { u as useElevation } from './useElevation-b5a49746.js';
@@ -124,6 +124,7 @@ import 'vue';
 import './style-inject.es-4c6f2515.js';
 import '@vueuse/core';
 import '@splidejs/splide';
+import '@splidejs/splide/dist/css/splide.min.css';
 import '@codemirror/state';
 import '@codemirror/view';
 import '@codemirror/commands';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "4.4.0-beta.2680.0",
+  "version": "4.4.0-beta.2690.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -38,7 +38,7 @@
     "@codemirror/lang-json": "6.0.0",
     "@codemirror/lang-markdown": "6.0.1",
     "@floating-ui/dom": "0.3.1",
-    "@onereach/styles": "^2.39.4-beta.2680.0",
+    "@onereach/styles": "^2.39.4-beta.2690.0",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.2",
     "@tiptap/extension-blockquote": "2.0.2",

package/src/components/or-carousel/OrCarousel.vue

@@ -32,9 +32,11 @@
 
 <script lang="ts">
 import { Splide, ResponsiveOptions } from '@splidejs/splide';
+import '@splidejs/splide/dist/css/splide.min.css';
 import { OrIcon } from '../or-icon';
 import { defineComponent, PropType, ref } from 'vue-demi';
 import { Direction, EVENTS, KeyBoard, Type } from './constants';
+
 export default defineComponent({
   name: 'OrCarousel',
   components: {
@@ -185,8 +187,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '~@splidejs/splide/dist/css/splide.min.css';
-
 .or-carousel {
   &__track-container {
     position: relative;

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

@@ -131,8 +131,12 @@ Markdown.args = {
   placeholder: 'Write something...',
   format: 'markdown',
   modelValue: `
-  **export**   
-  _export_   
-  ~export~   
+  Executes Cypher queries in Graphs database. 
+
+  ## **How can I use the Step?**
+  
+  You can use the Step to manage graph databases in the **Graphs** service. The Step lets you execute Graph queries against the specific graph database.
+  
+  > **Note:** The Step currently supports the [following queries](https://age.apache.org/age-manual/master/clauses/match.html)."
   `,
 };

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

@@ -54,7 +54,16 @@
         />
       </div>
       <div :class="['p-sm', { 'h-[calc(100%-32px)] md:h-[calc(100%-36px)]': fullHeight }]">
+        <textarea
+          v-show="disableMarkdown"
+          ref="textareaRef"
+          v-model="sourceValue"
+          :activated="disableMarkdown"
+          class="w-full h-full resize-none border-none outline-none bg-transparent"
+          @input="handleInput"
+        />
         <div
+          v-show="!disableMarkdown"
           ref="editorRef"
           :class="editorInputStyles"
         />
@@ -245,6 +254,7 @@ export default defineComponent({
     const root = ref<HTMLElement>();
     let editor = null as Editor | null;
     const editorRef = ref<HTMLDivElement>();
+    const textareaRef = ref<HTMLTextAreaElement>();
     const containerRef = ref<ComponentPublicInstance<HTMLInputElement>>();
     const toolbarRef = ref<ComponentPublicInstance<HTMLInputElement>>();
     const moreButtonRef = ref<HTMLDivElement>();
@@ -261,6 +271,7 @@ export default defineComponent({
     const text = ref<string>('');
     const link = ref<string>('');
     const countOfNotVisibleTools = ref<number>(0);
+    const sourceValue = ref<string>('');
 
     let trap: UseFocusTrapReturn = useFocusTrap(editorRef, {
       immediate: true,
@@ -456,26 +467,18 @@ export default defineComponent({
       return !notVisibleTools.value.includes(value);
     };
 
+    const handleInput = (event: InputEvent) => {
+      const target = event.target as HTMLTextAreaElement;
+      const value = target.value;
+      editor?.commands.setContent(deserialize(editor?.schema, value));
+    };
+
     const handleToolbarClick = (item: string, level?: number) => {
       switch (item) {
         case 'source':
           disableMarkdown.value = !disableMarkdown.value;
-          editor?.setOptions({
-            enableInputRules: !disableMarkdown.value,
-            enablePasteRules: !disableMarkdown.value,
-          });
-
-          editor?.view.updateState(editor?.state.reconfigure({
-            plugins: editor.extensionManager.plugins,
-          }));
-
-          if (disableMarkdown.value) {
-            const content = serialize(editor?.schema, editor?.getJSON());
-            editor?.commands.clearContent();
-            editor?.commands.insertContent(content);
-          } else {
-            editor?.commands.setContent(deserialize(editor?.schema, editor?.getText()));
-          }
+          textareaRef.value?.focus();
+          sourceValue.value = serialize(editor?.schema, editor?.getJSON());
           break;
         case 'bulletList':
         case 'orderedList':
@@ -647,6 +650,7 @@ export default defineComponent({
       containerRef,
       toolbarButtonRef,
       moreButtonRef,
+      textareaRef,
       moreRef,
       menuRef,
       iconsEnum,
@@ -672,6 +676,10 @@ export default defineComponent({
       isVisible,
       countOfNotVisibleTools,
       notVisibleTools,
+      handleInput,
+      proxyModelValue,
+      disableMarkdown,
+      sourceValue,
     };
   },
 });
@@ -694,7 +702,6 @@ export default defineComponent({
     }
   }
 
-
   ul {
     margin: 0 24px;
     list-style: initial;
@@ -703,7 +710,7 @@ export default defineComponent({
   blockquote {
     margin: 8px 24px;
     padding: 0 24px;
-    border-left: 4px solid #bad1ec;
+    border-left: 4px solid theme('borderColor.primary-opacity-0-16');
   }
 
   .is-editor-empty::before {
@@ -726,14 +733,14 @@ export default defineComponent({
     }
 
     .cm-gutters {
-      background-color: rgba(0, 95, 177, 0.08);
+      background-color: theme('backgroundColor.primary-opacity-0-12');
       border: none;
 
       .cm-gutterElement {
         padding: 0 10px;
 
         &.cm-activeLineGutter {
-          background-color: rgba(0, 95, 177, 0.07)
+          background-color: theme('backgroundColor.primary-opacity-0-16');
         }
       }
     }

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

@@ -50,6 +50,7 @@ export const EditorInput: string[] = [
   // Typography
   'typography-body-2-regular',
   'text-on-background',
+  'dark:text-on-background-dark',
   // Sizing
   'min-h-[88px]',
 ];

package/src/components/or-select-v3/OrSelect.stories3.ts

@@ -168,7 +168,7 @@ const Template: StoryFn<typeof OrSelect> = (args) => ({
 
   setup() {
     // State
-    const model = ref<string | string[]>();
+    const model = ref<string | string[]>(args.modelValue);
     const searchOptions = ref<SelectOption[]>(args.options);
 
     // Handlers
@@ -468,3 +468,41 @@ WithLongStrings.args = {
 
   placeholder: 'Wery Wery Wery WeryWeryWeryWery Wery Wery long placeholder',
 };
+
+export const MultipleReadonly = Template.bind({});
+
+MultipleReadonly.args = {
+  ...Default.args,
+  readonly: true,
+  options: Array.from<string, SelectOption>([
+    'Alfa',
+    'Bravo',
+    'Charlie',
+    'Delta',
+    'Echo',
+  ], (item) => ({
+    value: item.toLowerCase().replace(/\s/g, ''),
+    label: item,
+  })),
+  multiple: true,
+  modelValue: ['alfa', 'bravo'],
+};
+export const MultipleDisabled = Template.bind({});
+
+MultipleDisabled.args = {
+  ...Default.args,
+  options: Array.from<string, SelectOption>([
+    'Alfa',
+    'Bravo',
+    'Charlie',
+    'Delta',
+    'Echo',
+  ], (item) => ({
+    value: item.toLowerCase().replace(/\s/g, ''),
+    label: item,
+  })),
+  disabled: true,
+  multiple: true,
+  modelValue: ['alfa', 'bravo'],
+  paceholder: 'disabled placeholder',
+};

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

@@ -48,6 +48,7 @@
                 v-for="option in selection"
                 :key="option.value"
                 :variant="'reset'"
+                :disabled="disabled || readonly"
                 @reset="deselect(option)"
               >
                 {{ option.label }}