@onereach/ui-components 14.1.2-beta.4685.0 → 14.1.2-beta.4693.0

package/dist/esm/v3/components/or-filter-v3/OrFilter.vue.d.ts

@@ -1,51 +0,0 @@
-import { PropType } from 'vue-demi';
-declare const _default: import("vue-demi").DefineComponent<{
-    isOpen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    triggerProps: {
-        type: PropType<Omit<any, "isOpen">>;
-        default: () => {};
-    };
-    popoverProps: {
-        type: PropType<Omit<any, "isOpen" | "trigger">>;
-        default: () => {};
-    };
-}, {
-    root: import("vue-demi").Ref<HTMLElement | undefined>;
-    rootStyles: import("vue-demi").ComputedRef<string[]>;
-    trigger: import("vue-demi").Ref<any>;
-    triggerRoot: import("vue-demi").ComputedRef<any>;
-    popover: import("vue-demi").Ref<any>;
-    state: Readonly<import("vue-demi").Ref<"open" | "closed">>;
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
-    apply: () => void;
-    reset: () => void;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:state" | "open" | "close" | "apply" | "reset")[], "update:state" | "open" | "close" | "apply" | "reset", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    isOpen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    triggerProps: {
-        type: PropType<Omit<any, "isOpen">>;
-        default: () => {};
-    };
-    popoverProps: {
-        type: PropType<Omit<any, "isOpen" | "trigger">>;
-        default: () => {};
-    };
-}>> & {
-    "onUpdate:state"?: ((...args: any[]) => any) | undefined;
-    onOpen?: ((...args: any[]) => any) | undefined;
-    onClose?: ((...args: any[]) => any) | undefined;
-    onApply?: ((...args: any[]) => any) | undefined;
-    onReset?: ((...args: any[]) => any) | undefined;
-}, {
-    isOpen: boolean;
-    triggerProps: Omit<any, "isOpen">;
-    popoverProps: Omit<any, "isOpen" | "trigger">;
-}>;
-export default _default;

package/dist/esm/v3/components/or-filter-v3/index.d.ts

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

package/dist/esm/v3/components/or-filter-v3/index.js

@@ -1,30 +0,0 @@
-export { s as OrFilterV3 } from '../../OrFilter-f35ada6b.js';
-import 'vue-demi';
-import '../../TimeFormat-a7f5565b.js';
-import '../../dom-53c9635b.js';
-import 'lodash/get';
-import 'lodash/isElement';
-import '@vueuse/core';
-import '../../usePopoverState-7267fa91.js';
-import '@onereach/styles/screens.json';
-import '@onereach/styles/tailwind.config.json';
-import '../../OrFilterPopover-2832fbc3.js';
-import '../../useResponsive-491da8c6.js';
-import '../../OrButton-31bcb511.js';
-import '../../OrLoader-5e2f359b.js';
-import 'vue';
-import '../../OrModal-4da45f04.js';
-import '../../OrOverlay-97c94f0b.js';
-import '../../useElevation-895bc28f.js';
-import '../../isVisible-d1e49905.js';
-import '../../OrTeleport.vue3-8099178c.js';
-import '../../OrIconButton-5a508869.js';
-import '../../OrIcon-9aff520e.js';
-import '../../OrTooltip-de856939.js';
-import '../../OrPopover-0daeba14.js';
-import '@floating-ui/dom';
-import '../../OrBottomSheet-a7a06f7f.js';
-import '../../useTheme-dc76b423.js';
-import '../../isPrevented-b1764210.js';
-import '../../isAncestor-2973d4f4.js';
-import '../../OrFilterTrigger-f0c8aabf.js';

package/dist/esm/v3/components/or-filter-v3/styles.d.ts

@@ -1 +0,0 @@
-export declare const Filter: string[];

package/src/components/or-filter-popover-v3/OrFilterPopover.vue

@@ -1,222 +0,0 @@
-<template>
-  <div :class="['contents']">
-    <template v-if="isDesktop">
-      <OrPopover
-        :is-open="state === 'open'"
-        :variant="'popover'"
-        :trigger="trigger"
-        :placement="placement"
-        :fallback-placement="fallbackPlacement"
-        :offset="offset"
-        @update:state="$event === 'open' ? open() : close()"
-      >
-        <div
-          v-bind="$attrs"
-          :ref="'root'"
-          :class="rootStyles"
-        >
-          <div :class="headerStyles">
-            <div :class="['grow', 'truncate']">
-              {{ title }}
-            </div>
-
-            <OrButton
-              :variant="'link'"
-              @click="reset()"
-            >
-              {{ resetLabel }}
-            </OrButton>
-          </div>
-
-          <slot />
-
-          <slot
-            v-bind="{ apply, reset, isDesktop, isMobile }"
-            :name="'actions'"
-          />
-        </div>
-      </OrPopover>
-    </template>
-
-    <template v-if="isMobile">
-      <OrModal
-        :is-open="state === 'open'"
-        @update:state="$event === 'open' ? open() : close()"
-      >
-        <template v-slot:header>
-          {{ title }}
-        </template>
-
-        <div
-          v-bind="$attrs"
-          :ref="'root'"
-          :class="rootStyles"
-        >
-          <slot />
-        </div>
-
-        <template v-slot:footer>
-          <slot
-            v-bind="{ apply, reset, isDesktop, isMobile }"
-            :name="'actions'"
-          >
-            <div :class="footerStyles">
-              <OrButton
-                :class="['grow']"
-                :variant="'contained'"
-                @click="apply()"
-              >
-                {{ applyLabel }}
-              </OrButton>
-
-              <OrButton
-                :class="['grow']"
-                :variant="'outlined'"
-                @click="reset()"
-              >
-                {{ resetLabel }}
-              </OrButton>
-            </div>
-          </slot>
-        </template>
-      </OrModal>
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import { FlipOptions, ReferenceElement } from '@floating-ui/dom';
-import { PropType, computed, defineComponent, ref, toRef } from 'vue-demi';
-import { usePopoverState, useResponsive } from '../../hooks';
-import { OrButtonV3 as OrButton } from '../or-button-v3';
-import { OrModalV3 as OrModal } from '../or-modal-v3';
-import { OrPopoverV3 as OrPopover, PopoverOffset, PopoverPlacement } from '../or-popover-v3';
-import * as Styles from './styles';
-
-export default defineComponent({
-  name: 'OrFilterPopover',
-
-  components: {
-    OrButton,
-    OrModal,
-    OrPopover,
-  },
-
-  inheritAttrs: false,
-
-  props: {
-    isOpen: {
-      type: Boolean,
-      default: false,
-    },
-
-    title: {
-      type: String,
-      default: 'Filters',
-    },
-
-    applyLabel: {
-      type: String,
-      default: 'View Results',
-    },
-
-    resetLabel: {
-      type: String,
-      default: 'Reset All',
-    },
-
-    trigger: {
-      type: Object as PropType<ReferenceElement>,
-      default: undefined,
-    },
-
-    placement: {
-      type: String as PropType<`${PopoverPlacement}`>,
-      default: () => PopoverPlacement.BottomStart,
-    },
-
-    fallbackPlacement: {
-      type: String as PropType<FlipOptions['fallbackAxisSideDirection']>,
-      default: undefined,
-    },
-
-    offset: {
-      type: [Number, Object, Function] as PropType<PopoverOffset>,
-      default: 8,
-    },
-  },
-
-  emits: [
-    'update:state',
-
-    'open',
-    'close',
-
-    'apply',
-    'reset',
-  ],
-
-  expose: [
-    'root',
-
-    'state',
-
-    'open',
-    'close',
-    'toggle',
-  ],
-
-  setup(props, context) {
-    // Refs & Styles
-    const root = ref<HTMLElement>();
-
-    const rootStyles = computed(() => [
-      'or-filter-popover-v3',
-      ...Styles.FilterPopover,
-    ]);
-
-    const headerStyles = computed(() => [
-      ...Styles.FilterPopoverHeader,
-    ]);
-
-    const footerStyles = computed(() => [
-      ...Styles.FilterPopoverFooter,
-    ]);
-
-    // State
-    const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context.emit);
-
-    // Methods
-    function apply(): void {
-      context.emit('apply');
-    }
-
-    function reset(): void {
-      context.emit('reset');
-    }
-
-    // Helpers
-    const { isDesktop, isMobile } = useResponsive();
-
-    return {
-      root,
-      rootStyles,
-
-      headerStyles,
-      footerStyles,
-
-      state,
-
-      open,
-      close,
-      toggle,
-
-      apply,
-      reset,
-
-      isDesktop,
-      isMobile,
-    };
-  },
-});
-</script>

package/src/components/or-filter-popover-v3/index.ts

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

package/src/components/or-filter-popover-v3/styles.ts

@@ -1,32 +0,0 @@
-export const FilterPopover: string[] = [
-  // Layout
-  'layout-column',
-
-  // Box
-  'w-auto md:w-[352px]',
-
-  // Spacing
-  'px-0 md:px-md',
-  'py-0 md:py-md',
-
-  'gap-md',
-];
-
-export const FilterPopoverHeader: string[] = [
-  // Layout
-  'layout-row',
-
-  // Spacing
-  'gap-md',
-
-  // Typography
-  'typography-headline-3',
-];
-
-export const FilterPopoverFooter: string[] = [
-  // Layout
-  'layout-row-reverse',
-
-  // Spacing
-  'gap-md',
-];

package/src/components/or-filter-trigger-v3/OrFilterTrigger.vue

@@ -1,101 +0,0 @@
-<template>
-  <div
-    :ref="'root'"
-    :class="rootStyles"
-    :selected="isOpen"
-    :activated="!!value"
-  >
-    <div :class="labelStyles">
-      <OrIcon :icon="'filter_list'" /> {{ label }}
-    </div>
-
-    <template v-if="value">
-      <div :class="['layout-inline-row', '-m-[12px] md:-m-[8px]']">
-        <div :class="tagStyles">
-          {{ value }}
-
-          <div :class="['layout-inline-row', '-m-[4px]']">
-            <OrIconButton
-              :icon="'close'"
-              @click.stop="reset()"
-            />
-          </div>
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, ref } from 'vue-demi';
-import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
-import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import * as Styles from './styles';
-
-export default defineComponent({
-  name: 'OrFilterTrigger',
-
-  components: {
-    OrIcon,
-    OrIconButton,
-  },
-
-  props: {
-    isOpen: {
-      type: Boolean,
-      default: false,
-    },
-
-    value: {
-      type: Number,
-      default: undefined,
-    },
-
-    label: {
-      type: String,
-      default: 'Filters',
-    },
-  },
-
-  emits: [
-    'reset',
-  ],
-
-  expose: [
-    'root',
-  ],
-
-  setup(props, context) {
-    // Refs & Styles
-    const root = ref<HTMLElement>();
-
-    const rootStyles = computed(() => [
-      'or-filter-trigger-v3',
-      ...Styles.FilterTrigger,
-    ]);
-
-    const labelStyles = computed(() => [
-      ...Styles.FilterTriggerLabel,
-    ]);
-
-    const tagStyles = computed(() => [
-      ...Styles.FilterTriggerTag,
-    ]);
-
-    // Methods
-    function reset(): void {
-      context.emit('reset');
-    }
-
-    return {
-      root,
-      rootStyles,
-
-      labelStyles,
-      tagStyles,
-
-      reset,
-    };
-  },
-});
-</script>

package/src/components/or-filter-trigger-v3/index.ts

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

package/src/components/or-filter-trigger-v3/styles.ts

@@ -1,76 +0,0 @@
-export const FilterTrigger: string[] = [
-  // Layout
-  'layout-row',
-
-  // Interactivity
-  'interactivity-click',
-
-  // Shape
-  'rounded-full',
-
-  // Box
-  'h-[44px] md:h-[32px]',
-
-  // Spacing
-  'px-md md:px-sm+',
-  'py-0',
-
-  'gap-md+ md:gap-md',
-
-  // Typography
-  'typography-button',
-
-  // Theme
-  'theme-foreground-default',
-  'dark:theme-foreground-default-dark',
-
-  // Theme (hover)
-  'hover:theme-foreground-primary-hover',
-  'dark:hover:theme-foreground-primary-hover-dark',
-
-  'hover:theme-background-primary-translucent-1',
-  'dark:hover:theme-background-primary-translucent-1-dark',
-
-  // Theme (selected)
-  'selected:theme-foreground-primary',
-  'dark:selected:theme-foreground-primary-dark',
-
-  'selected:theme-background-primary-translucent-1',
-  'dark:selected:theme-background-primary-translucent-1-dark',
-
-  // Theme (activated)
-  'activated:theme-background-primary-translucent-1',
-  'dark:activated:theme-background-primary-translucent-1-dark',
-];
-
-export const FilterTriggerLabel: string[] = [
-  // Layout
-  'layout-row',
-
-  // Spacing
-  'gap-xs',
-];
-
-export const FilterTriggerTag: string[] = [
-  // Layout
-  'layout-row',
-
-  // Shape
-  'rounded-full',
-
-  // Box
-  'h-[36px] md:h-[24px]',
-
-  // Spacing
-  'px-sm+ md:px-sm',
-  'py-0',
-
-  'gap-sm+ md:gap-sm',
-
-  // Theme
-  'theme-foreground-default',
-  'dark:theme-foreground-default-dark',
-
-  'theme-background-default',
-  'dark:theme-background-default-dark',
-];

package/src/components/or-filter-v3/OrFilter.vue

@@ -1,136 +0,0 @@
-<template>
-  <div
-    :ref="'root'"
-    :class="rootStyles"
-  >
-    <OrFilterTrigger
-      :ref="'trigger'"
-      :is-open="state === 'open'"
-      v-bind="triggerProps"
-      @click="toggle()"
-      @reset="reset()"
-    />
-
-    <OrFilterPopover
-      :ref="'popover'"
-      :is-open="state === 'open'"
-      :trigger="triggerRoot"
-      v-bind="popoverProps"
-      @update:state="$event === 'open' ? open() : close()"
-      @apply="apply()"
-      @reset="reset()"
-    >
-      <slot />
-
-      <template v-slot:actions="props">
-        <slot
-          :name="'actions'"
-          v-bind="props"
-        />
-      </template>
-    </OrFilterPopover>
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType, computed, defineComponent, ref, toRef } from 'vue-demi';
-import { usePopoverState } from '../../hooks';
-import { OrFilterPopoverV3 as OrFilterPopover } from '../or-filter-popover-v3';
-import { OrFilterTriggerV3 as OrFilterTrigger } from '../or-filter-trigger-v3';
-import * as Styles from './styles';
-
-export default defineComponent({
-  name: 'OrFilter',
-
-  components: {
-    OrFilterPopover,
-    OrFilterTrigger,
-  },
-
-  props: {
-    isOpen: {
-      type: Boolean,
-      default: false,
-    },
-
-    triggerProps: {
-      type: Object as PropType<Omit<InstanceType<typeof OrFilterTrigger>['$props'], 'isOpen'>>,
-      default: () => ({}),
-    },
-
-    popoverProps: {
-      type: Object as PropType<Omit<InstanceType<typeof OrFilterPopover>['$props'], 'isOpen' | 'trigger'>>,
-      default: () => ({}),
-    },
-  },
-
-  emits: [
-    'update:state',
-
-    'open',
-    'close',
-
-    'apply',
-    'reset',
-  ],
-
-  expose: [
-    'root',
-
-    'state',
-
-    'open',
-    'close',
-    'toggle',
-  ],
-
-  setup(props, context) {
-    // Refs & Styles
-    const root = ref<HTMLElement>();
-
-    const rootStyles = computed(() => [
-      'or-filter-v3',
-      ...Styles.Filter,
-    ]);
-
-    const trigger = ref<InstanceType<typeof OrFilterTrigger>>();
-
-    const triggerRoot = computed(() => {
-      return trigger.value?.root;
-    });
-
-    const popover = ref<InstanceType<typeof OrFilterPopover>>();
-
-    // State
-    const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context.emit);
-
-    // Methods
-    function apply(): void {
-      context.emit('apply');
-    }
-
-    function reset(): void {
-      context.emit('reset');
-    }
-
-    return {
-      root,
-      rootStyles,
-
-      trigger,
-      triggerRoot,
-
-      popover,
-
-      state,
-
-      open,
-      close,
-      toggle,
-
-      apply,
-      reset,
-    };
-  },
-});
-</script>

package/src/components/or-filter-v3/index.ts

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

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

@@ -1 +0,0 @@
-export const Filter: string[] = [];