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

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/index92.js

@@ -1,7 +1,2 @@
-export { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-export { u as useElevation } from './useElevation-0e973238.js';
-export { u as useOverflow } from './useOverflow-ac506c65.js';
-export { u as useResponsive } from './useResponsive-a02e95b7.js';
-export { u as useToggle } from './useToggle-29e4d7c7.js';
+export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-0d314aa4.js';
 import 'vue-demi';
-import '@vueuse/core';

package/dist/v3/index93.js

@@ -1,3 +1,7 @@
+export { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
+export { u as useElevation } from './useElevation-0e973238.js';
+export { u as useOverflow } from './useOverflow-ac506c65.js';
 export { u as useResponsive } from './useResponsive-a02e95b7.js';
-import '@vueuse/core';
+export { u as useToggle } from './useToggle-29e4d7c7.js';
 import 'vue-demi';
+import '@vueuse/core';

package/dist/v3/index94.js

@@ -0,0 +1,3 @@
+export { u as useResponsive } from './useResponsive-a02e95b7.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.1896.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-avatar-v3/OrAvatar.docs.mdx

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

package/src/components/or-bottom-sheet-v3/OrBottomSheet.docs.mdx

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

package/src/components/or-button-v3/OrButton.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrButtonV3 as OrButton } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-card-v3/OrCard.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrCardV3 as OrCard } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-checkbox-v3/OrCheckbox.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrCheckboxV3 as OrCheckbox } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

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-confirm-v3/OrConfirm.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrConfirmV3 as OrConfirm } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-error-tag-v3/OrErrorTag.docs.mdx

@@ -1,3 +1,8 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrErrorTagV3 as OrErrorTag } from '@onereach/ui-components';
+```
+
+
 <DocsPage />

package/src/components/or-error-v3/OrError.docs.mdx

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

package/src/components/or-expansion-panel-v3/OrExpansionPanel.docs.mdx

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

package/src/components/or-fab-v3/OrFab.docs.mdx

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

package/src/components/or-hint-v3/OrHint.docs.mdx

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

package/src/components/or-icon-button-v3/OrIconButton.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrIconButtonV3 as OrIconButton } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-icon-v3/OrIcon.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrIconV3 as OrIcon } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-inline-input-v3/OrInlineInput.docs.mdx

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

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.docs.mdx

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

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.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrInputV3 as OrInput } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

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-label-v3/OrLabel.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrLabelV3 as OrLabel } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-link-v3/OrLink.docs.mdx

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

package/src/components/or-loader-v3/OrLoader.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrLoaderV3 as OrLoader } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-menu-item-v3/OrMenuItem.docs.mdx

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

package/src/components/or-menu-v3/OrMenu.docs.mdx

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

package/src/components/or-modal-v3/OrModal.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrModalV3 as OrModal } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-notification-v3/OrNotification.docs.mdx

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

package/src/components/or-overlay-v3/OrOverlay.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrOverlayV3 as OrOverlay } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-popover-v3/OrPopover.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrPopoverV3 as OrPopover } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-progress-v3/OrProgress.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrProgressV3 as OrProgress } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-radio-v3/OrRadio.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrRadioV3 as OrRadio } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

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-search-v3/OrSearch.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrSearchV3 as OrSearch } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

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 />

package/src/components/or-segmented-control-v3/OrSegmentedControl.stories3.ts

@@ -0,0 +1,106 @@
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryFn } from '@storybook/vue3';
+import { ref, watch } from 'vue-demi';
+import OrSegmentedControlDocs from './OrSegmentedControl.docs.mdx';
+import OrSegmentedControl from './OrSegmentedControl.vue';
+import { SegmentedControlSize } from './props';
+import { SegmentedControlOption } from './types';
+
+export default {
+  title: 'Components/Forms/Segmented Control',
+  component: OrSegmentedControl,
+
+  argTypes: {
+    // Props
+    options: {
+      control: { type: 'object' },
+    },
+
+    modelValue: {
+      control: { type: 'text' },
+    },
+
+    value: { // TODO: Remove Vue 2 fallback
+      table: { disable: true },
+    },
+
+    size: {
+      control: { type: 'select' },
+      options: Object.values(SegmentedControlSize),
+    },
+
+    disabled: {
+      control: { type: 'boolean' },
+    },
+
+    // Events
+    'update:modelValue': {
+      table: { disable: true },
+    },
+
+    input: {
+      table: { disable: true },
+    },
+  },
+
+  parameters: {
+    layout: 'centered',
+
+    docs: {
+      page: OrSegmentedControlDocs,
+    },
+
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=410%3A2097&t=7N93DAotOYMOX2kx-1',
+    },
+  },
+} as Meta<typeof OrSegmentedControl>;
+
+const Template: StoryFn<typeof OrSegmentedControl> = (args) => ({
+  components: {
+    OrSegmentedControl,
+  },
+
+  setup() {
+    // State
+    const model = ref<string>();
+
+    // Effects
+    watch(model, (value) => {
+      console.debug(value);
+    });
+
+    return {
+      args,
+      model,
+      onUpdateModelValue: action('update:modelValue'),
+      onInput: action('input'),
+    };
+  },
+
+  template: `
+    <OrSegmentedControl
+      v-model="model"
+      v-bind="args"
+      @update:modelValue="onUpdateModelValue"
+      @input="onInput"
+    />
+  `,
+});
+
+export const Base = Template.bind({});
+
+Base.args = {
+  // Props
+  options: Array.from<string, SegmentedControlOption>([
+    'Alfa',
+    'Bravo',
+    'Charlie',
+    'Delta',
+    'Echo',
+  ], (item) => ({
+    value: item.toLowerCase(),
+    label: item,
+  })),
+};