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

package/dist/bundled/v2/components/OrDataGridV3/OrDataGrid.js

@@ -1,2 +1,2 @@
-export { _ as default } from '../../OrDataGrid-adb99d27.js';
+export { _ as default } from '../../OrDataGrid-679dc15e.js';
 import '../../normalize-component-6e8e3d80.js';

package/dist/bundled/v2/components/OrDataGridV3/index.js

@@ -1 +1 @@
-export { D as DataGridVariant, _ as OrDataGridV3 } from '../../OrDataGrid-adb99d27.js';
+export { D as DataGridVariant, _ as OrDataGridV3 } from '../../OrDataGrid-679dc15e.js';

package/dist/bundled/v2/components/OrFilterPopoverV3/OrFilterPopover.js

@@ -0,0 +1,219 @@
+import { defineComponent, ref, computed, toRef } from 'vue-demi';
+import { FilterPopover, FilterPopoverHeader, FilterPopoverFooter } from './styles.js';
+import __vue_component__$1 from '../OrButtonV3/OrButton.js';
+import __vue_component__$2 from '../OrModalV3/OrModal.js';
+import __vue_component__$3 from '../OrPopoverV3/OrPopover.js';
+import { PopoverPlacement } from '../OrPopoverV3/props.js';
+import { usePopoverState } from '../../hooks/usePopoverState.js';
+import useResponsive from '../../hooks/useResponsive/useResponsive.js';
+import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+
+var script = defineComponent({
+  name: 'OrFilterPopover',
+  components: {
+    OrButton: __vue_component__$1,
+    OrModal: __vue_component__$2,
+    OrPopover: __vue_component__$3
+  },
+  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,
+      default: undefined
+    },
+    placement: {
+      type: String,
+      default: () => PopoverPlacement.BottomStart
+    },
+    fallbackPlacement: {
+      type: String,
+      default: undefined
+    },
+    offset: {
+      type: [Number, Object, Function],
+      default: 8
+    }
+  },
+  emits: ['update:state', 'open', 'close', 'apply', 'reset'],
+  expose: ['root', 'state', 'open', 'close', 'toggle'],
+  setup(props, context) {
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => ['or-filter-popover-v3', ...FilterPopover]);
+    const headerStyles = computed(() => [...FilterPopoverHeader]);
+    const footerStyles = computed(() => [...FilterPopoverFooter]);
+    // State
+    const {
+      state,
+      open,
+      close,
+      toggle
+    } = usePopoverState(toRef(props, 'isOpen'), context.emit);
+    // Methods
+    function apply() {
+      context.emit('apply');
+    }
+    function reset() {
+      context.emit('reset');
+    }
+    // Helpers
+    const {
+      isDesktop,
+      isMobile
+    } = useResponsive();
+    return {
+      root,
+      rootStyles,
+      headerStyles,
+      footerStyles,
+      state,
+      open,
+      close,
+      toggle,
+      apply,
+      reset,
+      isDesktop,
+      isMobile
+    };
+  }
+});
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    class: ['contents']
+  }, [_vm.isDesktop ? [_c('OrPopover', {
+    attrs: {
+      "is-open": _vm.state === 'open',
+      "variant": 'popover',
+      "trigger": _vm.trigger,
+      "placement": _vm.placement,
+      "fallback-placement": _vm.fallbackPlacement,
+      "offset": _vm.offset
+    },
+    on: {
+      "update:state": function ($event) {
+        $event === 'open' ? _vm.open() : _vm.close();
+      }
+    }
+  }, [_c('div', _vm._b({
+    ref: 'root',
+    class: _vm.rootStyles
+  }, 'div', _vm.$attrs, false), [_c('div', {
+    class: _vm.headerStyles
+  }, [_c('div', {
+    class: ['grow', 'truncate']
+  }, [_vm._v("\n            " + _vm._s(_vm.title) + "\n          ")]), _vm._v(" "), _c('OrButton', {
+    attrs: {
+      "variant": 'link'
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.reset();
+      }
+    }
+  }, [_vm._v("\n            " + _vm._s(_vm.resetLabel) + "\n          ")])], 1), _vm._v(" "), _vm._t("default"), _vm._v(" "), _vm._t('actions', null, null, {
+    apply: _vm.apply,
+    reset: _vm.reset,
+    isDesktop: _vm.isDesktop,
+    isMobile: _vm.isMobile
+  })], 2)])] : _vm._e(), _vm._v(" "), _vm.isMobile ? [_c('OrModal', {
+    attrs: {
+      "is-open": _vm.state === 'open'
+    },
+    on: {
+      "update:state": function ($event) {
+        $event === 'open' ? _vm.open() : _vm.close();
+      }
+    },
+    scopedSlots: _vm._u([{
+      key: "header",
+      fn: function () {
+        return [_vm._v("\n        " + _vm._s(_vm.title) + "\n      ")];
+      },
+      proxy: true
+    }, {
+      key: "footer",
+      fn: function () {
+        return [_vm._t('actions', function () {
+          return [_c('div', {
+            class: _vm.footerStyles
+          }, [_c('OrButton', {
+            class: ['grow'],
+            attrs: {
+              "variant": 'contained'
+            },
+            on: {
+              "click": function ($event) {
+                return _vm.apply();
+              }
+            }
+          }, [_vm._v("\n              " + _vm._s(_vm.applyLabel) + "\n            ")]), _vm._v(" "), _c('OrButton', {
+            class: ['grow'],
+            attrs: {
+              "variant": 'outlined'
+            },
+            on: {
+              "click": function ($event) {
+                return _vm.reset();
+              }
+            }
+          }, [_vm._v("\n              " + _vm._s(_vm.resetLabel) + "\n            ")])], 1)];
+        }, null, {
+          apply: _vm.apply,
+          reset: _vm.reset,
+          isDesktop: _vm.isDesktop,
+          isMobile: _vm.isMobile
+        })];
+      },
+      proxy: true
+    }], null, true)
+  }, [_vm._v(" "), _c('div', _vm._b({
+    ref: 'root',
+    class: _vm.rootStyles
+  }, 'div', _vm.$attrs, false), [_vm._t("default")], 2)])] : _vm._e()], 2);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = undefined;
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+
+export { __vue_component__ as default };

package/dist/bundled/v2/components/OrFilterPopoverV3/OrFilterPopover.vue.d.ts

@@ -0,0 +1,99 @@
+import { ReferenceElement } from '@floating-ui/dom';
+import { PropType } from 'vue-demi';
+import { PopoverOffset, PopoverPlacement } from '../or-popover-v3';
+declare const _default: import("vue-demi").DefineComponent<{
+    isOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    applyLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    resetLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    trigger: {
+        type: PropType<ReferenceElement>;
+        default: undefined;
+    };
+    placement: {
+        type: PropType<"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end">;
+        default: () => PopoverPlacement;
+    };
+    fallbackPlacement: {
+        type: PropType<"none" | "start" | "end" | undefined>;
+        default: undefined;
+    };
+    offset: {
+        type: PropType<PopoverOffset>;
+        default: number;
+    };
+}, {
+    root: import("vue-demi").Ref<HTMLElement | undefined>;
+    rootStyles: import("vue-demi").ComputedRef<string[]>;
+    headerStyles: import("vue-demi").ComputedRef<string[]>;
+    footerStyles: import("vue-demi").ComputedRef<string[]>;
+    state: Readonly<import("vue-demi").Ref<"open" | "closed">>;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    apply: () => void;
+    reset: () => void;
+    isDesktop: import("vue-demi").ComputedRef<boolean>;
+    isMobile: import("vue-demi").ComputedRef<boolean>;
+}, 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;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    applyLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    resetLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    trigger: {
+        type: PropType<ReferenceElement>;
+        default: undefined;
+    };
+    placement: {
+        type: PropType<"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end">;
+        default: () => PopoverPlacement;
+    };
+    fallbackPlacement: {
+        type: PropType<"none" | "start" | "end" | undefined>;
+        default: undefined;
+    };
+    offset: {
+        type: PropType<PopoverOffset>;
+        default: number;
+    };
+}>> & {
+    "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;
+    title: string;
+    applyLabel: string;
+    resetLabel: string;
+    trigger: ReferenceElement;
+    placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+    fallbackPlacement: "none" | "start" | "end" | undefined;
+    offset: PopoverOffset;
+}>;
+export default _default;

package/dist/bundled/v2/components/OrFilterPopoverV3/index.d.ts

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

package/dist/bundled/v2/components/OrFilterPopoverV3/index.js

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

package/dist/bundled/v2/components/OrFilterPopoverV3/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const FilterPopover: string[];
+export declare const FilterPopoverHeader: string[];
+export declare const FilterPopoverFooter: string[];

package/dist/bundled/v2/components/OrFilterPopoverV3/styles.js

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

package/dist/bundled/v2/components/OrFilterTriggerV3/OrFilterTrigger.js

@@ -0,0 +1,109 @@
+import { defineComponent, ref, computed } from 'vue-demi';
+import { FilterTrigger, FilterTriggerLabel, FilterTriggerTag } from './styles.js';
+import __vue_component__$1 from '../OrIconV3/OrIcon.js';
+import __vue_component__$2 from '../OrIconButtonV3/OrIconButton.js';
+import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+
+var script = defineComponent({
+  name: 'OrFilterTrigger',
+  components: {
+    OrIcon: __vue_component__$1,
+    OrIconButton: __vue_component__$2
+  },
+  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();
+    const rootStyles = computed(() => ['or-filter-trigger-v3', ...FilterTrigger]);
+    const labelStyles = computed(() => [...FilterTriggerLabel]);
+    const tagStyles = computed(() => [...FilterTriggerTag]);
+    // Methods
+    function reset() {
+      context.emit('reset');
+    }
+    return {
+      root,
+      rootStyles,
+      labelStyles,
+      tagStyles,
+      reset
+    };
+  }
+});
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: 'root',
+    class: _vm.rootStyles,
+    attrs: {
+      "selected": _vm.isOpen,
+      "activated": !!_vm.value
+    }
+  }, [_c('div', {
+    class: _vm.labelStyles
+  }, [_c('OrIcon', {
+    attrs: {
+      "icon": 'filter_list'
+    }
+  }), _vm._v(" " + _vm._s(_vm.label) + "\n  ")], 1), _vm._v(" "), _vm.value ? [_c('div', {
+    class: ['layout-inline-row', '-m-[12px] md:-m-[8px]']
+  }, [_c('div', {
+    class: _vm.tagStyles
+  }, [_vm._v("\n        " + _vm._s(_vm.value) + "\n\n        "), _c('div', {
+    class: ['layout-inline-row', '-m-[4px]']
+  }, [_c('OrIconButton', {
+    attrs: {
+      "icon": 'close'
+    },
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+        return _vm.reset();
+      }
+    }
+  })], 1)])])] : _vm._e()], 2);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = undefined;
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+
+export { __vue_component__ as default };

package/dist/bundled/v2/components/OrFilterTriggerV3/OrFilterTrigger.vue.d.ts

@@ -0,0 +1,40 @@
+declare const _default: import("vue-demi").DefineComponent<{
+    isOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    value: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    root: import("vue-demi").Ref<HTMLElement | undefined>;
+    rootStyles: import("vue-demi").ComputedRef<string[]>;
+    labelStyles: import("vue-demi").ComputedRef<string[]>;
+    tagStyles: import("vue-demi").ComputedRef<string[]>;
+    reset: () => void;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "reset"[], "reset", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    isOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    value: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    onReset?: ((...args: any[]) => any) | undefined;
+}, {
+    isOpen: boolean;
+    value: number;
+    label: string;
+}>;
+export default _default;

package/dist/bundled/v2/components/OrFilterTriggerV3/index.d.ts

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

package/dist/bundled/v2/components/OrFilterTriggerV3/index.js

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

package/dist/bundled/v2/components/OrFilterTriggerV3/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const FilterTrigger: string[];
+export declare const FilterTriggerLabel: string[];
+export declare const FilterTriggerTag: string[];

package/dist/bundled/v2/components/OrFilterTriggerV3/styles.js

@@ -0,0 +1,39 @@
+const FilterTrigger = [
+// 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'];
+const FilterTriggerLabel = [
+// Layout
+'layout-row',
+// Spacing
+'gap-xs'];
+const FilterTriggerTag = [
+// 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'];
+
+export { FilterTrigger, FilterTriggerLabel, FilterTriggerTag };