@onereach/ui-components 2.71.3-beta.2245.0 → 2.72.0-beta.2247.0

package/dist/esm/v3/{types-b79e4387.js → types-2692e337.js}

@@ -2,8 +2,8 @@ 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-2dcfb83e.js';
-import { s as script$3 } from './OrLoader-a53d2edf.js';
+import { s as script$2 } from './OrIconButton-1a89fbf9.js';
+import { s as script$3 } from './OrLoader-b3cf4231.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createVNode, createElementVNode, toDisplayString, createBlock, withModifiers, withCtx, TransitionGroup, Fragment, renderList, mergeProps } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 

package/dist/esm/v3/useClassAttribute-47fdb016.js

@@ -0,0 +1,32 @@
+import { getCurrentInstance, computed, isVue2 } from 'vue-demi';
+
+function useClassAttribute() {
+  const currentInstance = getCurrentInstance();
+  // Functions
+  function composeClass() {
+    var _a;
+    const {
+      staticClass = '',
+      class: classProperty
+    } = (_a = (currentInstance === null || currentInstance === void 0 ? void 0 : currentInstance.vnode).data) !== null && _a !== void 0 ? _a : {};
+    if (!classProperty) {
+      return staticClass || undefined;
+    }
+    switch (true) {
+      case classProperty.constructor === Object:
+        return Object.entries(classProperty).filter(([, value]) => !!value).map(([className]) => className).reduce((classList, className) => `${classList} ${className}`, staticClass).trim();
+      case Array.isArray(classProperty):
+        return `${staticClass} ${classProperty.join(' ')}`.trim();
+      default:
+        return `${staticClass} ${classProperty}`.trim();
+    }
+  }
+  return computed(() => {
+    var _a;
+    if (isVue2) {
+      return (_a = currentInstance === null || currentInstance === void 0 ? void 0 : currentInstance.attrs.class) !== null && _a !== void 0 ? _a : composeClass();
+    }
+  });
+}
+
+export { useClassAttribute as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.71.3-beta.2245.0",
+  "version": "2.72.0-beta.2247.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -37,8 +37,9 @@
     "@codemirror/lang-javascript": "6.0.2",
     "@codemirror/lang-json": "6.0.0",
     "@codemirror/lang-markdown": "6.0.1",
+    "@codemirror/theme-one-dark": "^6.1.1",
     "@floating-ui/dom": "0.3.1",
-    "@onereach/styles": "^2.33.0",
+    "@onereach/styles": "^2.34.0-beta.2247.0",
     "@splidejs/splide": "4.0.6",
     "@types/lodash": "4.14.173",
     "@types/sortablejs": "1.10.7",

package/src/components/index.ts

@@ -36,7 +36,7 @@ export * from './or-inline-text-edit';
 export * from './or-inline-textarea-v3';
 export * from './or-input-box-v3';
 export * from './or-input-v3';
-export * from './or-input';
+export * from './or-inputs';
 export * from './or-label';
 export * from './or-label-v3';
 export * from './or-link-v3';
@@ -50,11 +50,9 @@ export * from './or-modal';
 export * from './or-modal-v3';
 export * from './or-notification';
 export * from './or-notification-v3';
-export * from './or-number-input';
 export * from './or-overflow-menu';
 export * from './or-overlay';
 export * from './or-overlay-v3';
-export * from './or-password';
 export * from './or-pagination-v3';
 export * from './or-popover-v3';
 export * from './or-progress';
@@ -62,7 +60,6 @@ export * from './or-progress-v3';
 export * from './or-radio';
 export * from './or-radio-group';
 export * from './or-radio-v3';
-export * from './or-search';
 export * from './or-search-v3';
 export * from './or-segmented-control-v3';
 export * from './or-select';
@@ -86,7 +83,6 @@ export * from './or-tag-v3';
 export * from './or-teleport';
 export * from './or-teleport-v3';
 export * from './or-text-v3';
-export * from './or-textarea';
 export * from './or-textarea-v3';
 export * from './or-textbox';
 export * from './or-toast';

package/src/components/or-avatar-v3/OrAvatar.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
   >
     <slot>
@@ -21,18 +22,20 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, watchPostEffect } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
 import { generateHslFromString, hslToColorString } from '../../utils/functions/color';
-import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { AvatarColor, AvatarSize } from './props';
-import { AvatarImage, AvatarRoot, AvatarRootAbbreviationSizes, AvatarRootColors, AvatarRootIconSizes, AvatarRootSizes } from './styles';
+import { AvatarImage, AvatarRoot, AvatarRootColors, AvatarRootSizes, AvatarRootAbbreviationSizes, AvatarRootIconSizes } from './styles';
+import { OrIconV3 as OrIcon } from '../or-icon-v3';
 
 export default defineComponent({
   name: 'OrAvatar',
-
   components: {
     OrIcon,
   },
 
+  inheritAttrs: false,
+
   props: {
     src: {
       type: String,
@@ -72,6 +75,8 @@ export default defineComponent({
       return !props.icon;
     });
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-avatar',
       ...AvatarRoot,
@@ -81,6 +86,7 @@ export default defineComponent({
         ? AvatarRootAbbreviationSizes[props.size]
         : AvatarRootIconSizes[props.size]
       ),
+      classAttribute.value,
     ]);
 
     const imageStyles = computed(() => [

package/src/components/or-bottom-sheet-v3/OrBottomSheet.vue

@@ -24,6 +24,7 @@
 <script lang="ts">
 import { onClickOutside, SwipeDirection, usePointerSwipe } from '@vueuse/core';
 import { computed, defineComponent, ref, unref, watch } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
 import { OrOverlayV3 as OrOverlay } from '../or-overlay-v3';
 import { BottomSheetHandle, BottomSheetHeader, BottomSheetRoot } from './styles';
 
@@ -51,9 +52,12 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-bottom-sheet',
       ...BottomSheetRoot,
+      classAttribute.value,
     ]);
 
     const handleStyles = computed(() => [

package/src/components/or-button-v3/OrButton.vue

@@ -1,6 +1,7 @@
 <template>
   <button
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
     :type="type"
     :activated="activated ? '' : null"
@@ -33,6 +34,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
 import { OrLoaderV3 as OrLoader } from '../or-loader-v3';
 import { ButtonColor, ButtonType, ButtonVariant } from './props';
 import { ButtonRoot, ButtonRootColors, ButtonRootVariants } from './styles';
@@ -44,6 +46,8 @@ export default defineComponent({
     OrLoader,
   },
 
+  inheritAttrs: false,
+
   props: {
     type: {
       type: String as PropType<ButtonType>,
@@ -96,12 +100,15 @@ export default defineComponent({
     const root = ref<HTMLButtonElement>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-button',
       ...ButtonRoot,
       ...ButtonRootVariants[props.variant],
       ...ButtonRootColors[`${props.color}-${props.variant}`],
       props.loading && 'interactivity-none',
+      classAttribute.value,
     ]);
 
     return {

package/src/components/or-card-collection/OrCardCollection.vue

@@ -73,7 +73,7 @@ import { defineComponent, PropType, ref } from 'vue-demi';
 import { CARD_COLLECTION_LAYOUT } from './constants';
 import { OrCard } from '../or-card';
 import { OrIcon } from '../or-icon';
-import { OrSearch } from '../or-search';
+import { OrSearch } from '../or-inputs';
 import { OrIconButton } from '../or-button-v2';
 import { LayoutOption, SortableColumn } from './types';
 
@@ -177,9 +177,9 @@ export default defineComponent({
 .or-card-collection {
   .or-card-collection-toolbar {
     display: flex;
-    column-gap: $s-4;
-    align-items: center;
     justify-content: space-between;
+    align-items: center;
+    column-gap: $s-4;
     margin: 0 $s-4;
 
     .or-card-collection-sorting {
@@ -189,21 +189,21 @@ export default defineComponent({
       .or-card-collection-sorting-column {
         display: inline-flex;
         margin: $s-2 $s-6;
+        text-transform: capitalize;
+        color: $c-neutral-4;
         font-size: $fs-0;
         font-weight: $fw-0;
-        line-height: $lh-0;
-        color: $c-neutral-4;
-        text-transform: capitalize;
         letter-spacing: 0;
+        line-height: $lh-0;
         user-select: none;
 
         &.sorting-selected {
-          font-weight: bold;
           color: $c-neutral-6;
+          font-weight: bold;
 
           .or-card-collection-sort-direction {
-            width: 14px;
             height: 14px;
+            width: 14px;
             margin-left: $s-1;
           }
         }

package/src/components/or-card-collection-v3/OrCardCollection.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
   >
     <div :class="toolbarStyles">
@@ -56,7 +57,6 @@
         </div>
       </div>
     </div>
-
     <slot
       name="header"
       v-bind="{
@@ -64,7 +64,6 @@
         mode: proxyView,
       }"
     />
-
     <slot
       v-if="items.length"
       :name="proxyView"
@@ -82,7 +81,6 @@
         </template>
       </OrCardCollectionView>
     </slot>
-
     <slot
       v-else-if="items.length === 0 && proxySearch.length > 0"
       name="noSearchResults"
@@ -95,16 +93,21 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
-import { OrButtonV3 as OrButton } from '../or-button-v3';
+import { useClassAttribute } from '../../hooks';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
-import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
 import { OrMenuV3 as OrMenu } from '../or-menu-v3';
-import { OrSearchV3 as OrSearch } from '../or-search-v3';
+import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
+import { OrIconV3 as OrIcon } from '../or-icon-v3';
+import {
+  CardCollectionRoot,
+  CardCollectionToolbar,
+  CardCollectionToolbarPanel,
+} from './styles';
+import { CardCollectionItem, SortOption, ViewMode } from './types';
 import OrCardCollectionView from './OrCardCollectionView.vue3.vue';
+import { OrButtonV3 as OrButton } from '../or-button-v3';
+import { OrSearchV3 as OrSearch } from '../or-search-v3';
 import { defaultViewModes, gridView } from './props';
-import { CardCollectionRoot, CardCollectionToolbar, CardCollectionToolbarPanel } from './styles';
-import { CardCollectionItem, SortOption, ViewMode } from './types';
 
 export default defineComponent({
   name: 'OrCardCollection',
@@ -119,6 +122,8 @@ export default defineComponent({
     OrSearch,
   },
 
+  inheritAttrs: false,
+
   props: {
     items: {
       type: Array as PropType<CardCollectionItem[]>,
@@ -178,9 +183,12 @@ export default defineComponent({
     const sortButton = ref<typeof OrButton>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-card-collection',
       ...CardCollectionRoot,
+      classAttribute.value,
     ]);
 
     const toolbarStyles = computed(() => [

package/src/components/or-card-v3/OrCard.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
   >
     <slot />
@@ -9,11 +10,14 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
 import { CardRoot } from './styles';
 
 export default defineComponent({
   name: 'OrCard',
 
+  inheritAttrs: false,
+
   expose: [
     'root',
   ],
@@ -23,9 +27,12 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-card',
       ...CardRoot,
+      classAttribute.value,
     ]);
 
     return {

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

@@ -26,7 +26,11 @@ export default {
       control: { type: 'object' },
     },
 
-    value: {
+    value: { // TODO: Remove Vue 2 fallback
+      table: { disable: true },
+    },
+
+    inputValue: { // TODO: Rename to `value` after complete migration to Vue 3
       control: { type: 'text' },
     },
 
@@ -112,6 +116,7 @@ const Template: StoryFn<typeof OrCheckbox> = (args) => ({
       args,
       model,
       onUpdateModelValue: action('update:modelValue'),
+      onInput: action('input'),
       onFocus: action('focus'),
       onBlur: action('blur'),
     };
@@ -123,6 +128,7 @@ const Template: StoryFn<typeof OrCheckbox> = (args) => ({
         v-model="model"
         v-bind="args"
         @update:modelValue="onUpdateModelValue"
+        @input="onInput"
         @focus="onFocus"
         @blur="onBlur"
       >
@@ -133,9 +139,10 @@ const Template: StoryFn<typeof OrCheckbox> = (args) => ({
 
       <OrCheckbox
         v-model="model"
-        value="checkbox-2"
+        input-value="checkbox-2"
         label="Checkbox 2"
         @update:modelValue="onUpdateModelValue"
+        @input="onInput"
         @focus="onFocus"
         @blur="onBlur"
       />
@@ -150,6 +157,6 @@ Checkbox.args = {
   addon: '<OrIcon icon="info" />',
 
   // Props
-  value: 'checkbox-1',
+  inputValue: 'checkbox-1',
   label: 'Checkbox 1',
 };

package/src/components/or-checkbox-v3/OrCheckbox.vue

@@ -4,12 +4,12 @@
     :class="rootStyles"
   >
     <input
-      ref="control"
+      v-bind="$attrs"
+      :id="controlId"
       v-model="proxyModelValue"
-      v-bind="controlAttributes"
       :class="controlStyles"
-      :type="'checkbox'"
-      :value="value"
+      type="checkbox"
+      :value="inputValue"
       :indeterminate="indeterminate"
       :required="required"
       :disabled="disabled"
@@ -19,7 +19,7 @@
 
     <template v-if="$slots.default || label">
       <OrLabel
-        :control-id="controlAttributes.id"
+        :control-id="controlId"
         :variant="labelVariant"
         :required="required"
         :disabled="disabled"
@@ -35,8 +35,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, reactive, ref } from 'vue-demi';
-import { useControlAttributes, useIdAttribute } from '../../hooks';
+import { computed, defineComponent, getCurrentInstance, PropType, ref } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
 import { LabelVariant, OrLabelV3 as OrLabel } from '../or-label-v3';
 import { CheckboxControl, CheckboxControlHandle, CheckboxRoot } from './styles';
 
@@ -47,10 +47,7 @@ export default defineComponent({
     OrLabel,
   },
 
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue',
-  },
+  inheritAttrs: false,
 
   props: {
     modelValue: {
@@ -58,7 +55,12 @@ export default defineComponent({
       default: undefined,
     },
 
-    value: {
+    value: { // TODO: Remove Vue 2 fallback
+      type: [Boolean, Array] as PropType<boolean | string[]>,
+      default: undefined,
+    },
+
+    inputValue: { // TODO: Rename to `value` after complete migration to Vue 3
       type: String,
       default: undefined,
     },
@@ -92,26 +94,28 @@ export default defineComponent({
   emits: [
     'update:modelValue',
 
+    'input',
     'focus',
     'blur',
   ],
 
   expose: [
     'root',
-
-    'focus',
-    'blur',
   ],
 
   setup(props, context) {
+    const currentInstance = getCurrentInstance()!;
+
     // Refs
     const root = ref<HTMLElement>();
-    const control = ref<HTMLInputElement>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-checkbox',
       ...CheckboxRoot,
+      classAttribute.value,
     ]);
 
     const controlStyles = computed(() => [
@@ -120,37 +124,25 @@ export default defineComponent({
     ]);
 
     // State
-    const controlAttributes = reactive({
-      id: useIdAttribute(),
-      ...useControlAttributes(),
-    });
+    const controlId = ref(context.attrs.id as string ?? currentInstance.uid.toString());
 
     const proxyModelValue = computed({
-      get: () => props.modelValue,
+      get: () => {
+        return props.modelValue ?? props.value; // TODO: Remove Vue 2 fallback
+      },
 
       set: (value) => {
+        context.emit('input', value);
         context.emit('update:modelValue', value);
       },
     });
 
-    // Methods
-    function focus(): void {
-      control.value?.focus();
-    }
-
-    function blur(): void {
-      control.value?.blur();
-    }
-
     return {
       root,
-      control,
       rootStyles,
       controlStyles,
-      controlAttributes,
+      controlId,
       proxyModelValue,
-      focus,
-      blur,
     };
   },
 });

package/src/components/or-code/OrCode.vue

@@ -24,7 +24,7 @@
           <or-icon-button
             v-if="isShowingFullscreen"
             icon="fullscreen"
-            icon-color="neutral-3"
+            icon-color="neutral-4"
             class="fullscreen-button"
             @click="toggleFullscreen(true)"
           />
@@ -85,8 +85,9 @@ import { Language, LanguageSupport } from '@codemirror/language';
 import { EditorState, Extension, Transaction } from '@codemirror/state';
 import { ViewUpdate, keymap } from '@codemirror/view';
 import { indentWithTab } from '@codemirror/commands';
-import { useElementHover } from '@vueuse/core';
 import { basicSetup, EditorView } from 'codemirror';
+import { useElementHover, useMutationObserver, type MaybeElementRef } from '@vueuse/core';
+import { oneDark } from '@codemirror/theme-one-dark';
 import _ from 'lodash';
 import { defineComponent, PropType, ref, Ref } from 'vue-demi';
 import { OrIconButton } from '../or-button-v2';
@@ -185,6 +186,19 @@ export default defineComponent({
   emits: ['update:modelValue', 'focus', 'blur'],
 
   setup(props, { emit }) {
+    // theming refs
+    const parent: Element | null = document.querySelector('[data-theme]') || document.querySelector('html');
+    const themeEl = ref<HTMLElement | null>(parent as HTMLElement);
+    const isDark = ref<boolean>(parent?.getAttribute?.('data-theme') === 'dark');
+
+    const themeObserver = useMutationObserver(themeEl, (mutations) => {
+      const mutation = mutations.find((m) => m.attributeName === 'data-theme');
+      if (!mutation) return;
+      isDark.value = (mutation.target as HTMLElement)?.getAttribute?.('data-theme') === 'dark';
+    }, {
+      attributes: true,
+    });
+    // editor config
     const root = ref<HTMLDivElement>();
     const target = ref<HTMLDivElement>();
     const fullscreenTarget = ref<HTMLDivElement>();
@@ -206,6 +220,8 @@ export default defineComponent({
       fullscreenTarget,
       editor,
       isHovered,
+      isDark,
+      themeObserver,
     };
   },
 
@@ -226,8 +242,9 @@ export default defineComponent({
     localExtensions(): Extension[] {
       const { allowDrop, allowPaste, lineWrapping } = this;
       const ext = _.compact([
+        ...(this.isDark ? [oneDark] : []),
         // Toggle light/dark mode
-        EditorView.baseTheme({}),
+        this.isDark ? EditorView.theme({}, { dark: true }) : EditorView.baseTheme({}),
         // locale settings
         this.phrases ? EditorState.phrases.of(this.phrases) : undefined,
         // Parser language setting
@@ -259,11 +276,10 @@ export default defineComponent({
         // line wrapping
         lineWrapping ? EditorView.lineWrapping : undefined,
         keymap.of([indentWithTab]),
+        ...this.extensions,
       ]) as Extension[];
 
-      // Append Extensions (such as basic-setup)
-      if (this.extensions.length !== 0) _.merge(ext, this.extensions);
-      return ext;
+      return [...ext];
     },
     isShowingError(): boolean {
       return !!this.error && this.isInvalid;
@@ -313,6 +329,7 @@ export default defineComponent({
   },
 
   beforeUnmount() {
+    this.themeObserver.stop();
     this.editor?.destroy();
   },
 

package/src/components/or-confirm/OrConfirm.vue

@@ -53,7 +53,7 @@
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
 import { OrButtonV2 as OrButton, BUTTON_COLOR } from '../or-button-v2';
 import { OrModal, OrModalSizes } from '../or-modal';
-import { OrInput } from '../or-input';
+import { OrInput } from '../or-inputs';
 import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core';
 import { logicAnd } from '@vueuse/math';