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

package/src/components/or-tabs-v3/OrTabs.stories3.ts

@@ -1,6 +1,6 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/vue3';
-import { ref } from 'vue-demi';
+import { ref, watch } from 'vue-demi';
 import OrTabsDocs from './OrTabs.docs.mdx';
 import OrTabs from './OrTabs.vue';
 import { TabsVariant } from './props';
@@ -63,11 +63,16 @@ const Template: StoryFn<typeof OrTabs> = (args) => ({
 
   setup() {
     // State
-    const value = ref<string>();
+    const model = ref<string>();
+
+    // Effects
+    watch(model, (value) => {
+      console.debug(value);
+    });
 
     return {
       args,
-      value,
+      model,
       onUpdateModelValue: action('update:modelValue'),
       onInput: action('input'),
     };
@@ -75,7 +80,7 @@ const Template: StoryFn<typeof OrTabs> = (args) => ({
 
   template: `
     <OrTabs
-      v-model="value"
+      v-model="model"
       v-bind="args"
       @update:modelValue="onUpdateModelValue"
       @input="onInput"

package/src/components/or-tabs-v3/OrTabs.vue

@@ -8,7 +8,7 @@
       <OrTab
         v-for="tab in tabs.normal"
         :key="tab.value"
-        :selected="proxyModelValue === tab.value"
+        :selected="tab.value === proxyModelValue"
         @click.stop="proxyModelValue = tab.value"
       >
         {{ tab.label }}

package/src/components/or-textarea-v3/OrTextarea.vue

@@ -40,16 +40,18 @@
     </OrInputBox>
 
     <template v-if="!invalid">
-      <OrHint :disabled="disabled">
-        {{ hint }}
-
-        <template
-          v-if="maxLength"
-          v-slot:addon
-        >
-          {{ currentLength }} / {{ maxLength }}
-        </template>
-      </OrHint>
+      <template v-if="hint || maxLength">
+        <OrHint :disabled="disabled">
+          {{ hint }}
+
+          <template
+            v-if="maxLength"
+            v-slot:addon
+          >
+            {{ currentLength }} / {{ maxLength }}
+          </template>
+        </OrHint>
+      </template>
     </template>
 
     <template v-else>

package/src/components/or-tooltip-v3/OrTooltip.vue

@@ -30,7 +30,7 @@ import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
 import { useClassAttribute } from '../../hooks';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
 import { TooltipPlacement } from './props';
-import { TooltipBody, TooltipRoot } from './styles';
+import { TooltipBody, TooltipBodyPlacements, TooltipRoot } from './styles';
 
 export default defineComponent({
   name: 'OrTooltip',
@@ -63,7 +63,7 @@ export default defineComponent({
     'close',
   ],
 
-  setup() {
+  setup(props) {
     // Refs
     const root = ref<HTMLElement>();
 
@@ -81,6 +81,7 @@ export default defineComponent({
 
     const bodyStyles = computed(() => [
       ...TooltipBody,
+      ...TooltipBodyPlacements[props.placement],
     ]);
 
     // Methods

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

@@ -1,3 +1,5 @@
+import { TooltipPlacement } from './props';
+
 export const TooltipRoot: string[] = [
   // Layout
   'inline-block',
@@ -9,6 +11,9 @@ export const TooltipBody: string[] = [
   'rounded-sm',
 
   // Sizing
+  'mx-sm',
+  'my-sm',
+
   'px-sm',
   'py-xs',
 
@@ -22,3 +27,53 @@ export const TooltipBody: string[] = [
   'text-inverse-on-surface',
   'dark:text-inverse-on-surface-dark',
 ];
+
+export const TooltipBodyPlacements: Record<TooltipPlacement, string[]> = {
+  'top': [],
+
+  'top-start': [
+    // Sizing
+    'ml-none',
+  ],
+
+  'top-end': [
+    // Sizing
+    'mr-none',
+  ],
+
+  'bottom': [],
+
+  'bottom-start': [
+    // Sizing
+    'ml-none',
+  ],
+
+  'bottom-end': [
+    // Sizing
+    'mr-none',
+  ],
+
+  'left': [],
+
+  'left-start': [
+    // Sizing
+    'mt-none',
+  ],
+
+  'left-end': [
+    // Sizing
+    'mb-none',
+  ],
+
+  'right': [],
+
+  'right-start': [
+    // Sizing
+    'mt-none',
+  ],
+
+  'right-end': [
+    // Sizing
+    'mb-none',
+  ],
+};

package/src/hooks/useClassAttribute.ts

@@ -8,7 +8,7 @@ export function useClassAttribute(): UseClassAttributeReturn {
 
   // Functions
   function composeClass(): UnwrapRef<UseClassAttributeReturn> {
-    const { staticClass = '', class: classProperty } = (currentInstance?.vnode as VNode).data ?? {};
+    const { staticClass = '', class: classProperty } = (currentInstance?.vnode as unknown as VNode).data ?? {};
 
     if (!classProperty) {
       return staticClass || undefined;

package/dist/v2/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/v2/components/or-rich-text-editor-v3/index.d.ts

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

package/dist/v2/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/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({});