@onereach/ui-components 4.3.13-beta.2684.0 → 4.3.13

package/dist/esm/v3/OrTags-a082de82.js

@@ -1,147 +0,0 @@
-import { defineComponent, ref, computed } from 'vue-demi';
-import { u as useOverflow } from './useOverflow-c856b7b7.js';
-import '@vueuse/core';
-import { s as script$1 } from './OrButton-c2b6aa9e.js';
-import { s as script$2 } from './OrPopover-84d5b844.js';
-import { s as script$3 } from './OrTag-6116c6e3.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, createBlock, mergeProps, withCtx, createTextVNode, toDisplayString, createVNode, withModifiers, createCommentVNode } from 'vue';
-
-const Tags = [
-// Layout
-'layout-row',
-// Spacing
-'gap-sm',
-// Theme
-'theme-foreground-default', 'dark:theme-foreground-default-dark'];
-const TagsContainer = [
-// Layout
-'layout-row',
-// Overflow
-'overflow-hidden',
-// Spacing
-'gap-sm'];
-const TagsOverflowButton = [
-// Typography
-'typography-caption-regular'];
-const TagsOverflowPopover = [
-// Layout
-'layout-row !flex-wrap',
-// Box
-'max-w-[192px]',
-// Spacing
-'px-md', 'py-md', 'gap-sm'];
-
-var script = defineComponent({
-  name: 'OrTags',
-  components: {
-    OrButton: script$1,
-    OrPopover: script$2,
-    OrTag: script$3
-  },
-  props: {
-    items: {
-      type: Array,
-      default: () => []
-    },
-    tagProps: {
-      type: Object,
-      default: undefined
-    }
-  },
-  setup(props) {
-    // Refs
-    const root = ref();
-    const container = ref();
-    const overflowButton = ref();
-    const overflowButtonRoot = computed(() => {
-      var _a;
-      return (_a = overflowButton.value) === null || _a === void 0 ? void 0 : _a.root;
-    });
-    const overflowPopover = ref();
-    const overflowPopoverRoot = computed(() => {
-      var _a;
-      return (_a = overflowPopover.value) === null || _a === void 0 ? void 0 : _a.root;
-    });
-    // Styles
-    const rootStyles = computed(() => ['or-tags-v3', ...Tags]);
-    const containerStyles = computed(() => [...TagsContainer]);
-    const overflowButtonStyles = computed(() => [...TagsOverflowButton]);
-    const overflowPopoverStyles = computed(() => [...TagsOverflowPopover]);
-    // State
-    const {
-      innerItems
-    } = useOverflow(container);
-    const overflowItems = computed(() => {
-      return props.items.slice(innerItems.value.length);
-    });
-    return {
-      root,
-      container,
-      overflowButton,
-      overflowButtonRoot,
-      overflowPopover,
-      overflowPopoverRoot,
-      rootStyles,
-      containerStyles,
-      overflowButtonStyles,
-      overflowPopoverStyles,
-      overflowItems
-    };
-  }
-});
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_OrTag = resolveComponent("OrTag");
-  const _component_OrButton = resolveComponent("OrButton");
-  const _component_OrPopover = resolveComponent("OrPopover");
-  return openBlock(), createElementBlock("div", {
-    ref: "root",
-    class: normalizeClass(_ctx.rootStyles)
-  }, [createElementVNode("div", {
-    ref: "container",
-    class: normalizeClass(_ctx.containerStyles)
-  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, item => {
-    return openBlock(), createBlock(_component_OrTag, mergeProps(_ctx.tagProps, {
-      key: item
-    }), {
-      default: withCtx(() => [createTextVNode(toDisplayString(item), 1 /* TEXT */)]),
-
-      _: 2 /* DYNAMIC */
-    }, 1040 /* FULL_PROPS, DYNAMIC_SLOTS */);
-  }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */), _ctx.overflowItems.length > 0 ? (openBlock(), createElementBlock(Fragment, {
-    key: 0
-  }, [createVNode(_component_OrButton, {
-    ref: "overflowButton",
-    class: normalizeClass(_ctx.overflowButtonStyles),
-    type: 'button',
-    variant: 'link',
-    color: 'inherit',
-    onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.overflowPopover.open(), ["stop"]))
-  }, {
-    default: withCtx(() => [createTextVNode(" +" + toDisplayString(_ctx.overflowItems.length), 1 /* TEXT */)]),
-
-    _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["class"]), createVNode(_component_OrPopover, {
-    ref: "overflowPopover",
-    trigger: _ctx.overflowButtonRoot
-  }, {
-    default: withCtx(() => [createElementVNode("div", {
-      class: normalizeClass(_ctx.overflowPopoverStyles)
-    }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.overflowItems, item => {
-      return openBlock(), createBlock(_component_OrTag, mergeProps(_ctx.tagProps, {
-        key: item
-      }), {
-        default: withCtx(() => [createTextVNode(toDisplayString(item), 1 /* TEXT */)]),
-
-        _: 2 /* DYNAMIC */
-      }, 1040 /* FULL_PROPS, DYNAMIC_SLOTS */);
-    }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */)]),
-
-    _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["trigger"])], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true)], 2 /* CLASS */);
-}
-
-script.render = render;
-script.__file = "src/components/or-tags-v3/OrTags.vue";
-
-export { script as s };

package/dist/esm/v3/components/or-tags-v3/OrTags.vue.d.ts

@@ -1,36 +0,0 @@
-import { PropType } from 'vue-demi';
-declare const _default: import("vue-demi").DefineComponent<{
-    items: {
-        type: PropType<string[]>;
-        default: () => never[];
-    };
-    tagProps: {
-        type: PropType<any>;
-        default: undefined;
-    };
-}, {
-    root: import("vue-demi").Ref<HTMLElement | undefined>;
-    container: import("vue-demi").Ref<HTMLElement | undefined>;
-    overflowButton: import("vue-demi").Ref<any>;
-    overflowButtonRoot: import("vue-demi").ComputedRef<any>;
-    overflowPopover: import("vue-demi").Ref<any>;
-    overflowPopoverRoot: import("vue-demi").ComputedRef<any>;
-    rootStyles: import("vue-demi").ComputedRef<string[]>;
-    containerStyles: import("vue-demi").ComputedRef<string[]>;
-    overflowButtonStyles: import("vue-demi").ComputedRef<string[]>;
-    overflowPopoverStyles: import("vue-demi").ComputedRef<string[]>;
-    overflowItems: import("vue-demi").ComputedRef<string[]>;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    items: {
-        type: PropType<string[]>;
-        default: () => never[];
-    };
-    tagProps: {
-        type: PropType<any>;
-        default: undefined;
-    };
-}>>, {
-    items: string[];
-    tagProps: any;
-}>;
-export default _default;

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

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

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

@@ -1,18 +0,0 @@
-export { s as OrTagsV3 } from '../../OrTags-a082de82.js';
-import 'vue-demi';
-import '../../useOverflow-c856b7b7.js';
-import '@vueuse/core';
-import '../../OrButton-c2b6aa9e.js';
-import '../../OrLoader-b79022da.js';
-import 'vue';
-import '../../OrPopover-84d5b844.js';
-import '@floating-ui/dom';
-import '../../useElevation-b5a49746.js';
-import '../../useResponsive-a02e95b7.js';
-import '../../OrBottomSheet-5969a217.js';
-import '../../OrOverlay-bf72f582.js';
-import '../../OrTeleport.vue3-8099178c.js';
-import '../../OrTag-6116c6e3.js';
-import '../../OrIconButton-55d51a7a.js';
-import '../../OrIcon-62793572.js';
-import '../../OrTooltip-4bb0054a.js';

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

@@ -1,4 +0,0 @@
-export declare const Tags: string[];
-export declare const TagsContainer: string[];
-export declare const TagsOverflowButton: string[];
-export declare const TagsOverflowPopover: string[];

package/src/components/or-tags-v3/OrTags.docs.mdx

@@ -1,7 +0,0 @@
-import { DocsPage } from '@storybook/addon-docs';
-
-```ts
-import { OrTagsV3 as OrTags } from '@onereach/ui-components';
-```
-
-<DocsPage />

package/src/components/or-tags-v3/OrTags.stories3.ts

@@ -1,101 +0,0 @@
-import { Meta, StoryFn } from '@storybook/vue3';
-import { OrTagV3 as OrTag } from '../or-tag-v3';
-import OrTagsDocs from './OrTags.docs.mdx';
-import OrTags from './OrTags.vue';
-
-export default {
-  title: 'Components/Tags',
-  component: OrTags,
-
-  argTypes: {
-    // Props
-    items: {
-      control: { type: 'object' },
-    },
-
-    tagProps: {
-      control: { type: 'object' },
-    },
-  },
-
-  parameters: {
-    docs: {
-      page: OrTagsDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=202%3A14&t=HsX22PSudRRma7wv-1',
-    },
-  },
-} as Meta<typeof OrTags>;
-
-const Template: StoryFn<typeof OrTags> = (args) => ({
-  components: {
-    OrTag,
-    OrTags,
-  },
-
-  setup() {
-    return { args };
-  },
-
-  template: `
-    <OrTags v-bind="args" />
-  `,
-});
-
-export const Default = (() => {
-  const Story = Template.bind({});
-
-  Story.args = {
-    // Props
-    items: [
-      'Alfa',
-      'Bravo',
-      'Charlie',
-      'Delta',
-      'Echo',
-    ],
-  };
-
-  return Story;
-})();
-
-export const WithOverflow = (() => {
-  const Story = Template.bind({});
-
-  Story.args = {
-    // Props
-    items: [
-      'Alfa',
-      'Bravo',
-      'Charlie',
-      'Delta',
-      'Echo',
-      'Foxtrot',
-      'Golf',
-      'Hotel',
-      'India',
-      'Juliett',
-      'Kilo',
-      'Lima',
-      'Mike',
-      'November',
-      'Oscar',
-      'Papa',
-      'Quebec',
-      'Romeo',
-      'Sierra',
-      'Tango',
-      'Uniform',
-      'Victor',
-      'Whiskey',
-      'X-Ray',
-      'Yankee',
-      'Zulu',
-    ],
-  };
-
-  return Story;
-})();

package/src/components/or-tags-v3/OrTags.vue

@@ -1,129 +0,0 @@
-<template>
-  <div
-    ref="root"
-    :class="rootStyles"
-  >
-    <div
-      ref="container"
-      :class="containerStyles"
-    >
-      <OrTag
-        v-for="item in items"
-        v-bind="tagProps"
-        :key="item"
-      >
-        {{ item }}
-      </OrTag>
-    </div>
-
-    <template v-if="overflowItems.length > 0">
-      <OrButton
-        ref="overflowButton"
-        :class="overflowButtonStyles"
-        :type="'button'"
-        :variant="'link'"
-        :color="'inherit'"
-        @click.stop="overflowPopover.open()"
-      >
-        +{{ overflowItems.length }}
-      </OrButton>
-
-      <OrPopover
-        ref="overflowPopover"
-        :trigger="overflowButtonRoot"
-      >
-        <div :class="overflowPopoverStyles">
-          <OrTag
-            v-for="item in overflowItems"
-            v-bind="tagProps"
-            :key="item"
-          >
-            {{ item }}
-          </OrTag>
-        </div>
-      </OrPopover>
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType, computed, defineComponent, ref } from 'vue-demi';
-import { useOverflow } from '../../hooks';
-import { OrButtonV3 as OrButton } from '../or-button-v3';
-import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
-import { OrTagV3 as OrTag } from '../or-tag-v3';
-import { Tags, TagsContainer, TagsOverflowButton, TagsOverflowPopover } from './styles';
-
-export default defineComponent({
-  name: 'OrTags',
-
-  components: {
-    OrButton,
-    OrPopover,
-    OrTag,
-  },
-
-  props: {
-    items: {
-      type: Array as PropType<string[]>,
-      default: () => [],
-    },
-
-    tagProps: {
-      type: Object as PropType<InstanceType<typeof OrTag>['$props']>,
-      default: undefined,
-    },
-  },
-
-  setup(props) {
-    // Refs
-    const root = ref<HTMLElement>();
-    const container = ref<HTMLElement>();
-
-    const overflowButton = ref<InstanceType<typeof OrButton>>();
-    const overflowButtonRoot = computed(() => overflowButton.value?.root);
-
-    const overflowPopover = ref<InstanceType<typeof OrPopover>>();
-    const overflowPopoverRoot = computed(() => overflowPopover.value?.root);
-
-    // Styles
-    const rootStyles = computed(() => [
-      'or-tags-v3',
-      ...Tags,
-    ]);
-
-    const containerStyles = computed(() => [
-      ...TagsContainer,
-    ]);
-
-    const overflowButtonStyles = computed(() => [
-      ...TagsOverflowButton,
-    ]);
-
-    const overflowPopoverStyles = computed(() => [
-      ...TagsOverflowPopover,
-    ]);
-
-    // State
-    const { innerItems } = useOverflow(container);
-
-    const overflowItems = computed(() => {
-      return props.items.slice(innerItems.value.length);
-    });
-
-    return {
-      root,
-      container,
-      overflowButton,
-      overflowButtonRoot,
-      overflowPopover,
-      overflowPopoverRoot,
-      rootStyles,
-      containerStyles,
-      overflowButtonStyles,
-      overflowPopoverStyles,
-      overflowItems,
-    };
-  },
-});
-</script>

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

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

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

@@ -1,41 +0,0 @@
-export const Tags: string[] = [
-  // Layout
-  'layout-row',
-
-  // Spacing
-  'gap-sm',
-
-  // Theme
-  'theme-foreground-default',
-  'dark:theme-foreground-default-dark',
-];
-
-export const TagsContainer: string[] = [
-  // Layout
-  'layout-row',
-
-  // Overflow
-  'overflow-hidden',
-
-  // Spacing
-  'gap-sm',
-];
-
-export const TagsOverflowButton: string[] = [
-  // Typography
-  'typography-caption-regular',
-];
-
-export const TagsOverflowPopover: string[] = [
-  // Layout
-  'layout-row !flex-wrap',
-
-  // Box
-  'max-w-[192px]',
-
-  // Spacing
-  'px-md',
-  'py-md',
-
-  'gap-sm',
-];