@onereach/ui-components 19.3.0-beta.5046.0 → 19.3.0-beta.5083.0

package/dist/esm-deps/components/or-bottom-sheet-v3/index.js

@@ -0,0 +1,207 @@
+import { usePointerSwipe, onClickOutside } from '@vueuse/core';
+import { ref, unref, computed, defineComponent, toRefs, watch } from 'vue';
+import { u as ue, b as te } from '../../useValidationAttributes-DxhcSj_h-3380c3cf.js';
+import '../../OrOverlay-d67e7093.js';
+import { OrOverlayV3 as script$1 } from '../or-overlay-v3/index.js';
+import '../../dom-CwV-xS38-5babad01.js';
+import 'lodash/get';
+import 'lodash/isElement';
+import '../or-teleport-v3/index.js';
+
+var BottomSheetVariant;
+(function (BottomSheetVariant) {
+  BottomSheetVariant["Basic"] = "basic";
+  BottomSheetVariant["Advanced"] = "advanced";
+})(BottomSheetVariant || (BottomSheetVariant = {}));
+
+function useBottomSheetSwipeState(root, content, fullscreen, variant, close) {
+  const inlineSwipingStyles = ref({});
+  const skipSwipe = ref(false);
+  const theme = ue();
+  const isEventSkipped = event => {
+    return variant.value === BottomSheetVariant.Basic || event.composedPath().includes(content.value) && fullscreen.value;
+  };
+  const {
+    isSwiping
+  } = usePointerSwipe(root, {
+    threshold: 12,
+    onSwipe(event) {
+      skipSwipe.value = isEventSkipped(event);
+      if (variant.value === BottomSheetVariant.Advanced) {
+        const rootElement = unref(root);
+        inlineSwipingStyles.value = {
+          transitionProperty: 'none',
+          minHeight: `${rootElement.clientHeight - event.offsetY}px`,
+          maxHeight: `${rootElement.clientHeight - event.offsetY}px`
+        };
+      }
+    },
+    onSwipeEnd(event, direction) {
+      if (isEventSkipped(event)) {
+        return;
+      }
+      if (variant.value === BottomSheetVariant.Advanced) {
+        switch (direction) {
+          case 'up':
+          case 'UP':
+            fullscreen.value = true;
+            break;
+          case 'down':
+          case 'DOWN':
+            if (fullscreen.value) {
+              fullscreen.value = false;
+            } else {
+              close();
+            }
+            break;
+        }
+      }
+    }
+  });
+  const rootInlineStyles = computed(() => {
+    if (variant.value === BottomSheetVariant.Basic) {
+      return {
+        transitionProperty: 'min-height, max-height',
+        minHeight: '0',
+        maxHeight: `calc(100% - ${theme.spacing.xl})`
+      };
+    }
+    return isSwiping.value && !skipSwipe.value ? inlineSwipingStyles.value : fullscreen.value ? {
+      transitionProperty: 'min-height, max-height',
+      minHeight: `calc(100% - ${theme.spacing.xl})`,
+      maxHeight: `calc(100% - ${theme.spacing.xl})`
+    } : {
+      transitionProperty: 'min-height, max-height',
+      minHeight: '0',
+      maxHeight: '50%'
+    };
+  });
+  return {
+    rootInlineStyles
+  };
+}
+
+const BottomSheet = [
+// Position
+'fixed', 'left-0', 'right-0', 'bottom-0',
+// Layout
+'layout-column',
+// Shape
+'rounded-t-lg',
+// Elevation
+'shadow-contextual', 'dark:shadow-contextual-dark',
+// Typography
+'typography-body-2-regular',
+// Theme
+'theme-background-default', 'dark:theme-background-default-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark'];
+const BottomSheetVariants = {
+  [BottomSheetVariant.Basic]: [],
+  [BottomSheetVariant.Advanced]: [
+  // Box
+  'max-h-[50%]',
+  // Transition
+  'transition-[min-height]', 'transition-[max-height]']
+};
+const BottomSheetHandle = [
+// Layout
+'layout-row justify-center',
+// Interactivity
+'interactivity-drag',
+// Box
+'after:w-2xl', 'after:h-xs',
+// Spacing
+'px-sm', 'py-sm',
+// Shape
+'after:rounded-full',
+// Theme
+'after:bg-outline', 'after:dark:bg-outline'];
+const BottomSheetHeader = [
+// Layout (empty)
+'empty:hidden',
+// Spacing
+'px-lg', 'py-md',
+// Typography
+'typography-headline-3'];
+const BottomSheetContent = [
+// Layout
+'layout-column', 'grow'];
+
+var script = defineComponent({
+  name: 'OrBottomSheet',
+  components: {
+    OrOverlay: script$1
+  },
+  inheritAttrs: false,
+  props: {
+    isOpen: {
+      type: Boolean,
+      default: false
+    },
+    variant: {
+      type: String,
+      default: () => BottomSheetVariant.Advanced
+    }
+  },
+  emits: ['update:state', 'open', 'close'],
+  expose: ['root', 'state', 'fullscreen', 'open', 'close', 'toggle'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    const content = ref();
+    // Props
+    const {
+      variant,
+      isOpen
+    } = toRefs(props);
+    // State
+    const {
+      state,
+      open,
+      close,
+      toggle
+    } = te(isOpen, context.emit);
+    const fullscreen = ref(false);
+    // Styles
+    const rootStyles = computed(() => ['or-bottom-sheet-v3', ...BottomSheet, ...BottomSheetVariants[props.variant]]);
+    const handleStyles = computed(() => [...BottomSheetHandle]);
+    const headerStyles = computed(() => [...BottomSheetHeader]);
+    const contentStyles = computed(() => [...BottomSheetContent, fullscreen.value || variant.value === 'basic' ? 'overflow-y-auto' : 'overflow-hidden']);
+    // Effects
+    // #region Swipe
+    const {
+      rootInlineStyles
+    } = useBottomSheetSwipeState(root, content, fullscreen, variant, close);
+    // #endregion
+    watch(state, value => {
+      if (value === 'closed') {
+        fullscreen.value = false;
+      }
+    });
+    // #region Click Outside
+    onClickOutside(root, event => {
+      const path = event.composedPath();
+      if (!path.some(({
+        classList
+      }) => (classList === null || classList === void 0 ? void 0 : classList.contains('or-popover-v3')) || (classList === null || classList === void 0 ? void 0 : classList.contains('or-bottom-sheet-v3')))) {
+        close();
+      }
+    });
+    // #endregion
+    return {
+      root,
+      content,
+      rootStyles,
+      rootInlineStyles,
+      handleStyles,
+      headerStyles,
+      contentStyles,
+      state,
+      fullscreen,
+      open,
+      close,
+      toggle
+    };
+  }
+});
+
+export { BottomSheetVariant, script as OrBottomSheetV3 };

package/dist/esm-deps/components/or-button-group-v3/OrButtonGroup.vue.d.ts

@@ -0,0 +1,37 @@
+import { PropType } from 'vue';
+import { ButtonColor, ButtonVariant } from '@onereach/ui-components.or-button-v3';
+declare const _default: import("vue").DefineComponent<{
+    variant: {
+        type: PropType<"contained" | "outlined" | "text" | "link">;
+        default: () => ButtonVariant;
+    };
+    color: {
+        type: PropType<"primary" | "danger" | "inherit">;
+        default: () => ButtonColor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    root: import("vue").Ref<HTMLElement | undefined>;
+    rootStyles: import("vue").ComputedRef<string[]>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    variant: {
+        type: PropType<"contained" | "outlined" | "text" | "link">;
+        default: () => ButtonVariant;
+    };
+    color: {
+        type: PropType<"primary" | "danger" | "inherit">;
+        default: () => ButtonColor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    variant: "contained" | "outlined" | "text" | "link";
+    color: "primary" | "danger" | "inherit";
+    disabled: boolean;
+}, {}>;
+export default _default;

package/dist/esm-deps/components/or-button-group-v3/index.js

@@ -0,0 +1,55 @@
+import { defineComponent, ref, computed } from 'vue';
+import { B as ButtonVariant, a as ButtonColor } from '../../props-bba3dca8.js';
+
+const ButtonGroup = [
+// Layout
+'layout-row',
+// Shape (children)
+'[&:not(:first-child)]:children:rounded-l-0', '[&:not(:last-child)]:children:rounded-r-0'];
+const ButtonGroupVariants = {
+  [ButtonVariant.Contained]: [
+  // Spacing
+  'gap-[1px]'],
+  [ButtonVariant.Outlined]: [
+  // Position (children)
+  'children:relative',
+  // Position (children:active)
+  'active:children:z-10',
+  // Spacing (children)
+  '[&:not(:first-child)]:children:-ml-[1px]'],
+  [ButtonVariant.Text]: [
+  // Theme
+  'theme-divider-outline-variant', 'dark:theme-divider-outline-variant-dark'],
+  [ButtonVariant.Link]: []
+};
+
+var script = defineComponent({
+  name: 'OrButtonGroup',
+  props: {
+    variant: {
+      type: String,
+      default: () => ButtonVariant.Contained
+    },
+    color: {
+      type: String,
+      default: () => ButtonColor.Primary
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  expose: ['root'],
+  setup(props) {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-button-group-v3', ...ButtonGroup, ...ButtonGroupVariants[props.variant]]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+export { script as OrButtonGroupV3 };

package/dist/esm-deps/components/or-button-group-v3/styles.d.ts

@@ -0,0 +1,3 @@
+import { ButtonVariant } from '@onereach/ui-components.or-button-v3';
+export declare const ButtonGroup: string[];
+export declare const ButtonGroupVariants: Record<ButtonVariant, string[]>;

package/dist/esm-deps/components/or-button-v3/index.js

@@ -0,0 +1,152 @@
+import { B as ButtonVariant, b as ButtonType, a as ButtonColor } from '../../props-bba3dca8.js';
+import { defineComponent, ref, computed } from 'vue';
+import { i as isVue3 } from '../../constants-57e8b5da.js';
+import '../../OrLoader-4e331586.js';
+import { OrLoaderV3 as script$1 } from '../or-loader-v3/index.js';
+import '@vueuse/core';
+
+const Button = [
+// Layout
+'layout-inline-row justify-center',
+// Overflow
+'overflow-hidden',
+// Interactivity
+'interactivity-click',
+// Shape
+'rounded-md',
+// Typography
+'typography-button'];
+const ButtonVariants = {
+  [ButtonVariant.Contained]: [
+  // Box
+  'min-w-[96px]',
+  // Spacing
+  'px-md md:px-md', 'py-sm+ md:py-sm', 'gap-sm+ md:gap-sm',
+  // Elevation (enabled)
+  'enabled:shadow-button', 'dark:enabled:shadow-button-dark'],
+  [ButtonVariant.Outlined]: [
+  // Box
+  'min-w-[96px]',
+  // Spacing
+  'px-md* md:px-md*', 'py-sm+* md:py-sm*', 'gap-sm+ md:gap-sm'],
+  [ButtonVariant.Text]: [
+  // Box
+  'min-w-[96px]',
+  // Spacing
+  'px-md md:px-md', 'py-sm+ md:py-sm', 'gap-sm+ md:gap-sm'],
+  [ButtonVariant.Link]: [
+  // Spacing
+  'gap-xs']
+};
+const ButtonColors = {
+  'primary-contained': [
+  // Theme
+  'theme-preset-1-primary', 'dark:theme-preset-1-primary-dark'],
+  'danger-contained': [
+  // Theme
+  'theme-preset-1-error', 'dark:theme-preset-1-error-dark'],
+  'inherit-contained': [],
+  'primary-outlined': [
+  // Theme
+  'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-border-outline border-1', 'dark:theme-border-outline-dark',
+  // Theme (active)
+  'active:theme-border-primary active:border-1', 'dark:active:theme-border-primary-dark'],
+  'danger-outlined': [
+  // Theme
+  'theme-preset-3-error', 'dark:theme-preset-3-error-dark', 'theme-border-error border-1', 'dark:theme-border-error-dark'],
+  'inherit-outlined': [],
+  'primary-text': [
+  // Theme
+  'theme-preset-4-primary', 'dark:theme-preset-4-primary-dark'],
+  'danger-text': [
+  // Theme
+  'theme-preset-4-error', 'dark:theme-preset-4-error-dark'],
+  'inherit-text': [
+  // Theme
+  'theme-foreground-inherit', 'dark:theme-foreground-inherit-dark'],
+  'primary-link': [
+  // Theme
+  'theme-preset-4-primary', 'dark:theme-preset-4-primary-dark'],
+  'danger-link': [
+  // Theme
+  'theme-preset-4-error', 'dark:theme-preset-4-error-dark'],
+  'inherit-link': [
+  // Theme
+  'theme-foreground-inherit', 'dark:theme-foreground-inherit-dark',
+  // Theme (activated)
+  'activated:theme-foreground-default', 'dark:activated:theme-foreground-default-dark']
+};
+const ButtonLoadingColors = {
+  'primary-contained': ['interactivity-none', 'bg-primary-hover dark:bg-primary-hover-dark'],
+  'danger-contained': ['interactivity-none', 'bg-error-hover dark:bg-error-hover-dark'],
+  'inherit-contained': ['interactivity-none'],
+  'primary-outlined': ['interactivity-none'],
+  'danger-outlined': ['interactivity-none'],
+  'inherit-outlined': ['interactivity-none'],
+  'primary-text': ['interactivity-none', 'text-primary-hover dark:text-primary-hover-dark'],
+  'danger-text': ['interactivity-none', 'text-error-hover dark:text-error-hover-dark'],
+  'inherit-text': ['interactivity-none'],
+  'primary-link': ['interactivity-none', 'text-primary-hover dark:text-primary-hover-dark'],
+  'danger-link': ['interactivity-none', 'text-error-hover dark:text-error-hover-dark'],
+  'inherit-link': ['interactivity-none']
+};
+const ButtonContentLoadingStyles = {
+  'contained': ['invisible'],
+  'outlined': ['invisible'],
+  'text': ['hidden'],
+  'link': ['hidden']
+};
+
+var script = defineComponent({
+  name: 'OrButton',
+  components: {
+    OrLoader: script$1
+  },
+  props: {
+    type: {
+      type: String,
+      default: () => ButtonType.Button
+    },
+    variant: {
+      type: String,
+      default: () => ButtonVariant.Contained
+    },
+    color: {
+      type: String,
+      default: () => ButtonColor.Primary
+    },
+    activated: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    loadingText: {
+      type: String,
+      default: 'Loading'
+    }
+  },
+  emits: ['click', 'focus', 'blur'],
+  expose: ['root'],
+  setup(props) {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-button-v3', ...Button, ...ButtonVariants[props.variant], ...ButtonColors[`${props.color}-${props.variant}`], ...(props.loading ? ButtonLoadingColors[`${props.color}-${props.variant}`] : [])]);
+    const contentStyles = computed(() => ['contents', ...(props.loading ? ButtonContentLoadingStyles[props.variant] : [])]);
+    return {
+      root,
+      rootStyles,
+      contentStyles,
+      isVue3
+    };
+  }
+});
+
+export { ButtonColor, ButtonType, ButtonVariant, script as OrButtonV3 };

package/dist/esm-deps/components/or-card-collection-v3/OrCardCollection.vue.d.ts

@@ -0,0 +1,112 @@
+import { PropType } from 'vue';
+import { SortOption } from '@onereach/ui-components.or-sorting-v3';
+import { CardCollectionItem, ViewMode } from './types';
+declare const _default: import("vue").DefineComponent<{
+    items: {
+        type: PropType<CardCollectionItem[]>;
+        default: () => never[];
+    };
+    view: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    viewModes: {
+        type: PropType<ViewMode[]>;
+        default: () => ViewMode[];
+    };
+    sort: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    sortOptions: {
+        type: PropType<SortOption[]>;
+        default: () => never[];
+    };
+    search: {
+        type: StringConstructor;
+        default: string;
+    };
+    searchPlaceholder: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    searchDebounce: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableSearch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    root: import("vue").Ref<HTMLElement | undefined>;
+    rootStyles: import("vue").ComputedRef<string[]>;
+    toolbarStyles: import("vue").ComputedRef<string[]>;
+    toolbarPanelStyles: import("vue").ComputedRef<string[]>;
+    emptyContainerStyles: import("vue").ComputedRef<string[]>;
+    proxyView: import("vue").Ref<string>;
+    proxySearch: import("vue").Ref<string>;
+    switchView: (view: string) => void;
+    handleSearch: (search?: string) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("viewChange" | "sortChange" | "searchChange")[], "viewChange" | "sortChange" | "searchChange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        type: PropType<CardCollectionItem[]>;
+        default: () => never[];
+    };
+    view: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    viewModes: {
+        type: PropType<ViewMode[]>;
+        default: () => ViewMode[];
+    };
+    sort: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    sortOptions: {
+        type: PropType<SortOption[]>;
+        default: () => never[];
+    };
+    search: {
+        type: StringConstructor;
+        default: string;
+    };
+    searchPlaceholder: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    searchDebounce: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableSearch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onViewChange?: ((...args: any[]) => any) | undefined;
+    onSortChange?: ((...args: any[]) => any) | undefined;
+    onSearchChange?: ((...args: any[]) => any) | undefined;
+}, {
+    sort: string;
+    search: string;
+    items: CardCollectionItem[];
+    view: string;
+    viewModes: ViewMode[];
+    sortOptions: SortOption[];
+    searchPlaceholder: string;
+    searchDebounce: number;
+    loading: boolean;
+    enableSearch: boolean;
+}, {}>;
+export default _default;