@onereach/ui-components 2.68.0-beta.2033.0 → 2.68.0-beta.2034.0

package/src/components/or-empty-state-v3/styles.ts

@@ -0,0 +1,76 @@
+import { EmptyStateSize } from './props';
+
+export const EmptyStateRoot: string[] = [
+  // Layout
+  'grow',
+  'flex',
+  'flex-col',
+  'justify-center',
+  'items-center',
+
+  // Box
+  'w-full',
+
+  // Sizing
+  'gap-sm',
+];
+
+export const EmptyStateImage = [
+  // Sizing
+  'mb-sm',
+];
+
+export const EmptyStateImageSizes: Record<EmptyStateSize, string[]> = {
+  [EmptyStateSize.L]: [
+    // Box
+    'h-3xl',
+  ],
+  [EmptyStateSize.M]: [
+    // Box
+    'h-2xl',
+  ],
+}
+
+export const EmptyStateHeading: string[] = [
+  // Theme
+  'text-on-background',
+  'dark:text-on-background-dark'
+];
+
+export const EmptyStateHeadingSizes: Record<EmptyStateSize, string[]> = {
+  [EmptyStateSize.L]: [
+    // Typography
+    'text-headline-2',
+    'font-headline-2',
+  ],
+  [EmptyStateSize.M]: [
+    // Typography
+    'text-headline-4',
+    'font-headline-4',
+  ],
+}
+
+export const EmptyStateText: string[] = [
+  'text-center',
+
+  // Theme
+  'text-outline',
+  'dark:text-outline-dark',
+];
+
+export const EmptyStateContent = EmptyStateText;
+
+export const EmptyStateTextSizes: Record<EmptyStateSize, string[]> = {
+  [EmptyStateSize.L]: [
+    // Typography
+    'text-body-2-regular',
+    'font-body-2-regular',
+  ],
+  [EmptyStateSize.M]: [
+    // Typography
+    'text-caption-regular',
+    'font-caption-regular',
+  ],
+};
+
+export const EmptyStateContentSizes = EmptyStateTextSizes;

package/src/components/or-empty-state-v3/types.ts

@@ -0,0 +1,3 @@
+import { LoaderVariant } from '../or-loader-v3';
+
+export type EmptyStateLoader = boolean | LoaderVariant | undefined;

package/src/components/or-icon-button-v3/OrIconButton.stories3.ts

@@ -66,21 +66,10 @@ const Template: StoryFn<typeof OrIconButton> = (args) => ({
   `,
 });
 
-export const Default = Template.bind({});
+export const IconButton = Template.bind({});
 
-Default.args = {
+IconButton.args = {
   // Props
   icon: 'delete',
   tooltip: 'Delete',
 };
-
-export const WithDetailedIconSettings = Template.bind({});
-WithDetailedIconSettings.args = {
-  // Props
-  icon: {
-    icon: 'delete',
-    variant: 'filled',
-    size: 'xl',
-  },
-  tooltip: 'Delete',
-};

package/src/components/or-input-box-v3/OrInputBox.vue

@@ -13,7 +13,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
-import { InputBoxVariant } from './props';
+import { InputBoxVariant } from '.';
 import { useClassAttribute } from '../../hooks';
 import { InputBoxSize } from './props';
 import { InputBoxRoot, InputBoxRootSizes, InputBoxRootVariants } from './styles';

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

@@ -89,9 +89,9 @@ const Template: StoryFn<typeof OrSegmentedControl> = (args) => ({
   `,
 });
 
-export const Default = Template.bind({});
+export const Base = Template.bind({});
 
-Default.args = {
+Base.args = {
   // Props
   options: Array.from<string, SegmentedControlOption>([
     'Alfa',

package/src/components/or-segmented-control-v3/components/or-segmented-control-item/OrSegmentedControlItem.vue

@@ -5,7 +5,7 @@
     :class="rootStyles"
     :selected="selected ? '' : null"
     :disabled="disabled ? '' : null"
-    @click="onClick"
+    @click="$emit('click', $event)"
   >
     <div :class="['truncate']">
       <slot />
@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, isVue2, PropType, ref } from 'vue-demi';
+import { computed, defineComponent, PropType, ref } from 'vue-demi';
 import { useClassAttribute } from '../../../../hooks';
 import { SegmentedControlSize } from '../../props';
 import { SegmentedControlItemRoot, SegmentedControlItemRootSizes } from './styles';
@@ -41,7 +41,7 @@ export default defineComponent({
     },
   },
 
-  setup(props, context) {
+  setup(props) {
     // Refs
     const root = ref<HTMLElement>();
 
@@ -55,17 +55,9 @@ export default defineComponent({
       classAttribute.value,
     ]);
 
-    // Handlers
-    function onClick(event: Event): void {
-      if (isVue2) {
-        context.emit('click', event);
-      }
-    }
-
     return {
       root,
       rootStyles,
-      onClick,
     };
   },
 });

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

@@ -93,7 +93,7 @@ export default defineComponent({
           (popoverInstance.open as () => void)();
         }
       }
-    }, 250);
+    }, 1000);
 
     const close = useDebounceFn(() => {
       if (!hover.value) {
@@ -103,7 +103,7 @@ export default defineComponent({
           (popoverInstance.close as () => void)();
         }
       }
-    }, 250);
+    }, 500);
 
     // Effects
     // #region Hover

package/src/utils/functions/text.ts

@@ -2,7 +2,7 @@ import { RX_ABBREVIATION_FROM_STRING } from '../constants/regex';
 
 export function getAbbreviation(text: string | null, limit?: number): string {
   if (typeof text != 'string' || !text) return '';
-  return ((text.match(RX_ABBREVIATION_FROM_STRING) ?? []) as string[])
-    .reduce((previous: string, next: string) => previous + ((+next === 0 || parseInt(next)) ? parseInt(next) : next[0] || ''), '')
+  return (text.match(RX_ABBREVIATION_FROM_STRING) ?? [])
+    .reduce((previous, next) => previous + ((+next === 0 || parseInt(next)) ? parseInt(next) : next[0] || ''), '')
     .toUpperCase().substring(0, limit);
 }

package/dist/bundled/v2/useClassAttribute-47fdb016.js

@@ -1,32 +0,0 @@
-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 };