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

package/dist/v3/index62.js

@@ -1,19 +1,15 @@
-import { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch } from 'vue-demi';
-import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
+export { s as OrSearchV3 } from './OrSearch-375eab55.js';
+export { a as SearchSize } from './OrInputBox-634230b1.js';
+import 'vue-demi';
 import '@vueuse/core';
-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 { s as script$1 } from './OrIconButton-b8066b5d.js';
-import { s as script$2 } from './OrLabel-7d4fe80b.js';
-import { flatMap } from 'lodash';
-import { resolveComponent, openBlock, createElementBlock, mergeProps, createVNode, withCtx, createTextVNode, toDisplayString, createElementVNode, normalizeClass, Fragment, renderList } from 'vue';
-import { s as styleInject } from './style-inject.es-4c6f2515.js';
+import './useClassAttribute-47fdb016.js';
+import './OrInput-256d2530.js';
+import './OrError-19a62a18.js';
+import 'vue';
+import './OrHint-73835593.js';
+import './OrIconButton-5fb3a9aa.js';
 import './OrIcon-b3906e35.js';
-import './OrTooltip-30e05f9e.js';
+import './OrTooltip-36c6728c.js';
 import './OrPopover-3525c670.js';
 import '@floating-ui/dom';
 import './useElevation-0e973238.js';
@@ -21,288 +17,5 @@ import './useResponsive-a02e95b7.js';
 import './OrBottomSheet-9de57dd0.js';
 import './OrOverlay-27050c19.js';
 import './OrTeleport.vue3-8099178c.js';
-
-const EditorContainer = [
-// 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'];
-const EditorContainerFilled = [
-//Colors
-'bg-primary-opacity-0-08', 'dark:bg-primary-opacity-0-08-dark'];
-const ToolbarContainer = [
-// Layout
-'flex',
-//Spacing
-'py-sm',
-//Sizing
-'border-b-1',
-//Colors
-'border-b-disabled', 'dark:border-b-outline-dark'];
-const Toolbar = [
-// 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'];
-const ToolbarButton = [
-// Typography
-'text-on-disabled', 'dark:text-outline-dark'];
-const ToolbarButtonActive = [
-// Typography
-'text-on-background', 'dark:text-on-background-dark'];
-const EditorInput = [
-// Spacing
-'p-sm',
-// Typography
-'typography-body-2-regular', 'text-on-background', 'dark:text-on-background-dark',
-// Sizing
-'min-h-[88px]'];
-
-var script = defineComponent({
-  name: 'OrRichTextEditor',
-  components: {
-    OrIconButton: script$1,
-    OrLabel: script$2
-  },
-  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;
-    const editorRef = ref();
-    const containerRef = ref();
-    const isActive = ref({});
-    const isFilled = ref(false);
-    const iconsEnum = ref({
-      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({
-      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 === null || editor === void 0 ? void 0 : editor.destroy();
-    });
-    // Methods
-    const handleEditorClick = () => {
-      setActiveFormats();
-      editor === null || editor === void 0 ? void 0 : editor.commands.focus();
-    };
-    const handleToolbarClick = item => {
-      if (item === 'bulletList' || item === 'orderedList') {
-        item === 'bulletList' ? editor === null || editor === void 0 ? void 0 : editor.commands.toggleBulletList() : editor === null || editor === void 0 ? void 0 : editor.commands.toggleOrderedList();
-      } else if (item === 'link') {
-        setLink();
-      } else if (item === 'undo' || item === 'redo') {
-        item === 'undo' ? editor === null || editor === void 0 ? void 0 : editor.commands.undo() : editor === null || editor === void 0 ? void 0 : editor.commands.redo();
-      } else {
-        editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleMark(item).run();
-      }
-    };
-    const setLink = () => {
-      const previousUrl = editor === null || editor === void 0 ? void 0 : editor.getAttributes('link').href;
-      const url = window.prompt('URL', previousUrl);
-      // cancelled
-      if (url === null) {
-        return;
-      }
-      // empty
-      if (url === '') {
-        editor === null || editor === void 0 ? void 0 : editor.chain().focus().extendMarkRange('link').unsetLink().run();
-        return;
-      }
-      // update link
-      editor === null || editor === void 0 ? void 0 : editor.chain().focus().extendMarkRange('link').setLink({
-        href: url
-      }).run();
-    };
-    const setActiveFormats = () => {
-      const toolbarList = flatMap(props.toolbar);
-      toolbarList.forEach(item => {
-        isActive.value[item] = (editor === null || editor === void 0 ? void 0 : 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 => {
-      return [
-      // Layout
-      'flex',
-      // Spacing
-      'gap-md', ...(isActive.value[item] ? ToolbarButtonActive : ToolbarButton)];
-    };
-    //Effects
-    watch(() => props.modelValue, value => {
-      if (value !== (editor === null || editor === void 0 ? void 0 : editor.getHTML())) {
-        editor === null || editor === void 0 ? void 0 : editor.commands.setContent(value);
-      }
-    });
-    return {
-      editor,
-      editorRef,
-      containerRef,
-      iconsEnum,
-      handleToolbarClick,
-      handleEditorClick,
-      isActive,
-      iconTooltipsEnum,
-      containerStyles,
-      toolbarContainerStyles,
-      toolbarStyles,
-      rootStyles,
-      toolbarButtonStyles,
-      editorInputStyles
-    };
-  }
-});
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_or_label = resolveComponent("or-label");
-  const _component_or_icon_button = resolveComponent("or-icon-button");
-  return openBlock(), createElementBlock("div", mergeProps({
-    ref: "root"
-  }, _ctx.$attrs, {
-    class: _ctx.rootStyles
-  }), [createVNode(_component_or_label, null, {
-    default: withCtx(() => [createTextVNode(toDisplayString(_ctx.description), 1 /* TEXT */)]),
-
-    _: 1 /* STABLE */
-  }), createElementVNode("div", {
-    ref: "containerRef",
-    class: normalizeClass(_ctx.containerStyles),
-    onClick: _cache[0] || (_cache[0] = $event => _ctx.handleEditorClick())
-  }, [createElementVNode("div", {
-    class: normalizeClass(_ctx.toolbarContainerStyles)
-  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.toolbar, tool => {
-    return openBlock(), createElementBlock("div", {
-      key: tool,
-      class: normalizeClass(_ctx.toolbarStyles)
-    }, [(openBlock(true), createElementBlock(Fragment, null, renderList(tool, item => {
-      return openBlock(), createElementBlock("div", {
-        key: item,
-        class: normalizeClass(_ctx.toolbarButtonStyles(item))
-      }, [createVNode(_component_or_icon_button, {
-        tooltip: {
-          text: _ctx.iconTooltipsEnum[item],
-          placement: 'top'
-        },
-        icon: {
-          icon: _ctx.iconsEnum[item],
-          variant: 'inherit',
-          size: 's'
-        },
-        onClick: $event => _ctx.handleToolbarClick(item)
-      }, null, 8 /* PROPS */, ["tooltip", "icon", "onClick"])], 2 /* CLASS */);
-    }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */);
-  }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */), createElementVNode("div", {
-    ref: "editorRef",
-    class: normalizeClass(_ctx.editorInputStyles)
-  }, null, 2 /* CLASS */)], 2 /* CLASS */)], 16 /* FULL_PROPS */);
-}
-
-var css_248z = ".tiptap-editor ol {\n  margin: 0 24px;\n  list-style: decimal;\n}\n.tiptap-editor ul {\n  margin: 0 24px;\n  list-style: initial;\n}\n.tiptap-editor .is-editor-empty::before {\n  content: attr(data-placeholder);\n  height: 0;\n  pointer-events: none;\n  float: left;\n}";
-styleInject(css_248z);
-
-script.render = render;
-script.__file = "src/components/or-rich-text-editor-v3/OrRichTextEditor.vue";
-
-export { script as OrRichTextEditor };
+import './OrLabel-7d4fe80b.js';
+import './style-inject.es-4c6f2515.js';

package/dist/v3/index63.js

@@ -1,21 +1,5 @@
-export { s as OrSearchV3 } from './OrSearch-15a70678.js';
-export { a as SearchSize } from './OrInputBox-634230b1.js';
+export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-2bbc0f22.js';
 import 'vue-demi';
-import '@vueuse/core';
 import './useClassAttribute-47fdb016.js';
-import './OrInput-3eef7945.js';
-import './OrError-19a62a18.js';
+import '@vueuse/core';
 import 'vue';
-import './OrHint-73835593.js';
-import './OrIconButton-b8066b5d.js';
-import './OrIcon-b3906e35.js';
-import './OrTooltip-30e05f9e.js';
-import './OrPopover-3525c670.js';
-import '@floating-ui/dom';
-import './useElevation-0e973238.js';
-import './useResponsive-a02e95b7.js';
-import './OrBottomSheet-9de57dd0.js';
-import './OrOverlay-27050c19.js';
-import './OrTeleport.vue3-8099178c.js';
-import './OrLabel-7d4fe80b.js';
-import './style-inject.es-4c6f2515.js';

package/dist/v3/index65.js

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from './OrSelect-9d300f55.js';
+export { s as OrSelectV3 } from './OrSelect-52cfb10d.js';
 export { a as SelectSize } from './OrInputBox-634230b1.js';
 import 'vue-demi';
 import './dropdown-open-0d314aa4.js';
@@ -13,9 +13,9 @@ import './OrError-19a62a18.js';
 import './OrExpansionPanel-1e2a6375.js';
 import './OrIcon-b3906e35.js';
 import './OrHint-73835593.js';
-import './OrInput-3eef7945.js';
-import './OrIconButton-b8066b5d.js';
-import './OrTooltip-30e05f9e.js';
+import './OrInput-256d2530.js';
+import './OrIconButton-5fb3a9aa.js';
+import './OrTooltip-36c6728c.js';
 import './OrPopover-3525c670.js';
 import '@floating-ui/dom';
 import './useElevation-0e973238.js';
@@ -24,4 +24,4 @@ import './OrBottomSheet-9de57dd0.js';
 import './OrOverlay-27050c19.js';
 import './OrTeleport.vue3-8099178c.js';
 import './OrMenuItem-8773d073.js';
-import './OrTag-144b4ab8.js';
+import './OrTag-deaff080.js';

package/dist/v3/index78.js

@@ -1,4 +1,4 @@
-export { s as OrTabsV3, T as TabsVariant } from './OrTabs-194ca950.js';
+export { s as OrTabsV3, T as TabsVariant } from './OrTabs-ac0be933.js';
 import '@vueuse/core';
 import 'vue-demi';
 import './useClassAttribute-47fdb016.js';

package/dist/v3/index80.js

@@ -1,11 +1,11 @@
-export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-144b4ab8.js';
+export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-deaff080.js';
 import 'vue-demi';
 import './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
-import './OrIconButton-b8066b5d.js';
+import './OrIconButton-5fb3a9aa.js';
 import './OrIcon-b3906e35.js';
 import 'vue';
-import './OrTooltip-30e05f9e.js';
+import './OrTooltip-36c6728c.js';
 import './OrPopover-3525c670.js';
 import '@floating-ui/dom';
 import './useElevation-0e973238.js';

package/dist/v3/index88.js

@@ -1,13 +1,13 @@
-export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-a2a8f948.js';
+export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-d5d4ab32.js';
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-0665462d.js';
 import '@vueuse/core';
 import 'vue-demi';
 import './OrTeleport.vue3-8099178c.js';
 import 'vue';
-import './OrIconButton-b8066b5d.js';
+import './OrIconButton-5fb3a9aa.js';
 import './useClassAttribute-47fdb016.js';
 import './OrIcon-b3906e35.js';
-import './OrTooltip-30e05f9e.js';
+import './OrTooltip-36c6728c.js';
 import './OrPopover-3525c670.js';
 import '@floating-ui/dom';
 import './useElevation-0e973238.js';

package/dist/v3/index91.js

@@ -1,4 +1,4 @@
-export { s as OrTooltipV3 } from './OrTooltip-30e05f9e.js';
+export { s as OrTooltipV3 } from './OrTooltip-36c6728c.js';
 export { P as TooltipPlacement } from './OrPopover-3525c670.js';
 import '@vueuse/core';
 import 'vue-demi';

package/dist/v3/{types-a2a8f948.js → types-d5d4ab32.js}

@@ -2,7 +2,7 @@ import { useToggle } from '@vueuse/core';
 import { defineComponent, ref, computed, onBeforeMount, onBeforeUnmount, nextTick } from 'vue-demi';
 import { s as script$4 } from './OrTeleport.vue3-8099178c.js';
 import { T as ToastType, P as PositionsX, b as PositionsY, c as TransitionType, d as useToastEventBus, a as useQueue } from './useToast-0665462d.js';
-import { s as script$2 } from './OrIconButton-b8066b5d.js';
+import { s as script$2 } from './OrIconButton-5fb3a9aa.js';
 import { s as script$3 } from './OrLoader-60943812.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createVNode, toDisplayString, createElementVNode, createBlock, withModifiers, withCtx, TransitionGroup, Fragment, renderList, mergeProps } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.63.0-beta.1907.0",
+  "version": "2.63.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -29,14 +29,8 @@
     "@codemirror/lang-json": "6.0.0",
     "@codemirror/lang-markdown": "6.0.1",
     "@floating-ui/dom": "0.3.1",
-    "@onereach/styles": "^2.30.0",
+    "@onereach/styles": "^2.31.0",
     "@splidejs/splide": "4.0.6",
-    "@tiptap/core": "2.0.0-beta.209",
-    "@tiptap/extension-highlight": "2.0.0-beta.209",
-    "@tiptap/extension-link": "2.0.0-beta.209",
-    "@tiptap/extension-placeholder": "2.0.0-beta.209",
-    "@tiptap/extension-underline": "2.0.0-beta.209",
-    "@tiptap/starter-kit": "2.0.0-beta.209",
     "@types/lodash": "4.14.173",
     "@types/sortablejs": "1.10.7",
     "@types/uuid": "8.3.1",
@@ -84,5 +78,6 @@
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "gitHead": "1d365d54677891124b332a6725dc7fecc7d5c10e"
 }

package/src/components/index.ts

@@ -58,6 +58,7 @@ export * from './or-radio';
 export * from './or-radio-group';
 export * from './or-radio-v3';
 export * from './or-search-v3';
+export * from './or-segmented-control-v3';
 export * from './or-select';
 export * from './or-select-v3';
 export * from './or-sidebar';

package/src/components/or-checkbox-v3/OrCheckbox.stories3.ts

@@ -27,7 +27,7 @@ export default {
     },
 
     value: { // TODO: Remove Vue 2 fallback
-      control: { type: 'object' },
+      table: { disable: true },
     },
 
     inputValue: { // TODO: Rename to `value` after complete migration to Vue 3

package/src/components/or-inline-input-v3/OrInlineInput.vue

@@ -217,7 +217,7 @@ export default defineComponent({
 
     function reset(): void {
       if (draftModelValue.value !== proxyModelValue.value) {
-        draftModelValue.value = proxyModelValue.value;
+        draftModelValue.value = proxyModelValue.value ?? '';
       }
 
       activated.value = false;
@@ -225,7 +225,7 @@ export default defineComponent({
 
     // Effects
     watch(proxyModelValue, (value) => {
-      draftModelValue.value = value;
+      draftModelValue.value = value ?? '';
     }, { immediate: true });
 
     return {

package/src/components/or-inline-textarea-v3/OrInlineTextarea.vue

@@ -205,7 +205,7 @@ export default defineComponent({
 
     function reset(): void {
       if (draftModelValue.value !== proxyModelValue.value) {
-        draftModelValue.value = proxyModelValue.value;
+        draftModelValue.value = proxyModelValue.value ?? '';
       }
 
       activated.value = false;
@@ -213,7 +213,7 @@ export default defineComponent({
 
     // Effects
     watch(proxyModelValue, (value) => {
-      draftModelValue.value = value;
+      draftModelValue.value = value ?? '';
     }, { immediate: true });
 
     return {

package/src/components/or-input-v3/OrInput.vue

@@ -41,32 +41,34 @@
         @blur="$emit('blur', $event)"
       >
 
-      <template v-if="type === 'password'">
-        <OrIconButton
-          :icon="{ icon: disclosed ? 'visibility_off' : 'visibility', variant: 'filled' }"
-          :color="'inherit'"
-          :disabled="disabled"
-          @click.stop="disclosed = !disclosed"
-        />
-      </template>
-
-      <template v-if="type === 'search'">
-        <template v-if="modelValue">
+      <div :class="['-m-xs', 'ml-none']">
+        <template v-if="type === 'password'">
           <OrIconButton
-            :icon="'close'"
+            :icon="{ icon: disclosed ? 'visibility_off' : 'visibility', variant: 'filled' }"
             :color="'inherit'"
             :disabled="disabled"
-            @click.stop="$emit('update:modelValue', '')"
+            @click.stop="disclosed = !disclosed"
           />
         </template>
 
-        <template v-else>
-          <OrIcon
-            :icon="'search'"
-            :variant="'outlined'"
-          />
+        <template v-if="type === 'search'">
+          <template v-if="modelValue">
+            <OrIconButton
+              :icon="'close'"
+              :color="'inherit'"
+              :disabled="disabled"
+              @click.stop="$emit('update:modelValue', '')"
+            />
+          </template>
+
+          <template v-else>
+            <OrIcon
+              :icon="'search'"
+              :variant="'outlined'"
+            />
+          </template>
         </template>
-      </template>
+      </div>
     </OrInputBox>
 
     <template v-if="!invalid">

package/src/components/or-radio-v3/OrRadio.stories3.ts

@@ -27,7 +27,7 @@ export default {
     },
 
     value: { // TODO: Remove Vue 2 fallback
-      control: { type: 'object' },
+      table: { disable: true },
     },
 
     inputValue: { // TODO: Rename to `value` after complete migration to Vue 3

package/src/components/or-segmented-control-v3/OrSegmentedControl.docs.mdx

@@ -0,0 +1,7 @@
+import { DocsPage } from '@storybook/addon-docs';
+
+```ts
+import { OrSegmentedControlV3 as OrSegmentedControl } from '@onereach/ui-components';
+```
+
+<DocsPage />