@onereach/ui-components 2.69.1-beta.2089.0 → 2.69.1-beta.2095.0

package/dist/esm/v3/OrCardCollection-afd863fc.js

@@ -1,274 +0,0 @@
-import { defineComponent, computed, ref, watch } from 'vue-demi';
-import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-import '@vueuse/core';
-import { s as script$2 } from './OrIconButton-1eebcafc.js';
-import { s as script$4 } from './OrMenu-840038cd.js';
-import './OrPopover-1075dd38.js';
-import { s as script$5 } from './OrMenuItem-9da279f6.js';
-import { s as script$6 } from './OrIcon-b195169c.js';
-import { openBlock, createElementBlock, normalizeClass, Fragment, renderList, renderSlot, mergeProps, createTextVNode, toDisplayString, resolveComponent, createElementVNode, createVNode, withCtx, createBlock, createCommentVNode, normalizeProps, guardReactiveProps } from 'vue';
-import { s as script$3 } from './OrButton-f4b9ee51.js';
-import { s as script$7 } from './OrSearch-cdde55ce.js';
-import './OrInputBox-5247ab25.js';
-
-var CardCollectionView;
-(function (CardCollectionView) {
-  CardCollectionView["Grid"] = "grid";
-  CardCollectionView["List"] = "list";
-})(CardCollectionView || (CardCollectionView = {}));
-
-const CardCollectionRoot = [
-// Layout
-'layout-column',
-// Spacing
-'gap-md'];
-const CardCollectionToolbar = [
-// Layout
-'layout-row justify-between',
-// Typography
-'typography-body-2-regular',
-// Theme
-'theme-foreground-default', 'dark:theme-foreground-default-dark'];
-const CardCollectionToolbarPanel = [
-// Layout
-'layout-row',
-// Spacing
-'gap-lg+'];
-const CardCollectionContent = [
-// Layout
-'grid',
-// Spacing
-'gap-sm md:gap-md'];
-const CardCollectionContentViews = {
-  'grid': [
-  // Layout
-  'sm:grid-cols-1', 'md:grid-cols-2', 'lg:grid-cols-4', 'xl:grid-cols-6'],
-  'list': []
-};
-
-var script$1 = defineComponent({
-  name: 'OrCardCollectionView',
-  props: {
-    items: {
-      type: Array,
-      default: []
-    },
-    mode: {
-      type: String,
-      required: true
-    }
-  },
-  setup(props) {
-    const contentStyles = computed(() => [...CardCollectionContent, ...CardCollectionContentViews[props.mode]]);
-    return {
-      contentStyles
-    };
-  }
-});
-
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass(_ctx.contentStyles)
-  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item, index) => {
-    return renderSlot(_ctx.$slots, "item", mergeProps({
-      key: item.key || index
-    }, {
-      item,
-      mode: _ctx.mode
-    }), () => [createTextVNode(toDisplayString(item.key), 1 /* TEXT */)]);
-  }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */);
-}
-
-script$1.render = render$1;
-script$1.__file = "src/components/or-card-collection-v3/OrCardCollectionView.vue3.vue";
-
-const gridView = {
-  view: 'grid',
-  icon: 'grid_view'
-};
-const listView = {
-  view: 'list',
-  icon: 'view_agenda'
-};
-const defaultViewModes = [gridView, listView];
-
-var script = defineComponent({
-  name: 'OrCardCollection',
-  components: {
-    OrCardCollectionView: script$1,
-    OrIconButton: script$2,
-    OrButton: script$3,
-    OrMenu: script$4,
-    OrMenuItem: script$5,
-    OrIcon: script$6,
-    OrSearch: script$7
-  },
-  inheritAttrs: false,
-  props: {
-    items: {
-      type: Array,
-      default: []
-    },
-    view: {
-      type: String,
-      default: CardCollectionView.Grid
-    },
-    viewModes: {
-      type: Array,
-      default: () => defaultViewModes
-    },
-    sort: {
-      type: String,
-      default: undefined
-    },
-    sortOptions: {
-      type: Array,
-      default: () => []
-    },
-    search: {
-      type: String,
-      default: undefined
-    }
-  },
-  emits: ['viewChange', 'sortChange', 'searchChange'],
-  expose: ['root'],
-  setup(props, context) {
-    // Refs
-    const root = ref();
-    const sortMenu = ref();
-    const sortButton = ref();
-    // Styles
-    const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-card-collection', ...CardCollectionRoot, classAttribute.value]);
-    const toolbarStyles = computed(() => [...CardCollectionToolbar]);
-    const toolbarPanelStyles = computed(() => [...CardCollectionToolbarPanel]);
-    // State
-    const proxyView = ref(props.view);
-    const proxySort = ref(props.sort);
-    const proxySearch = ref(props.search);
-    // Methods
-    function switchView(view) {
-      proxyView.value = view;
-    }
-    function handleSort(sort) {
-      proxySort.value = sort;
-    }
-    function handleSearch(search) {
-      proxySearch.value = search;
-    }
-    // Effects
-    watch(() => props.view, value => {
-      proxyView.value = value;
-    });
-    watch(proxyView, value => {
-      context.emit('viewChange', value);
-    });
-    watch(() => props.sort, value => {
-      proxySort.value = value;
-    });
-    watch(proxySort, value => {
-      context.emit('sortChange', value);
-    });
-    watch(() => props.search, value => {
-      proxySearch.value = value;
-    });
-    watch(proxySearch, value => {
-      context.emit('searchChange', value);
-    });
-    return {
-      root,
-      sortMenu,
-      sortButton,
-      rootStyles,
-      toolbarStyles,
-      toolbarPanelStyles,
-      proxyView,
-      proxySort,
-      proxySearch,
-      switchView,
-      handleSort,
-      handleSearch
-    };
-  }
-});
-
-const _hoisted_1 = {
-  class: "layout-row gap-sm"
-};
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_OrIcon = resolveComponent("OrIcon");
-  const _component_OrButton = resolveComponent("OrButton");
-  const _component_OrMenuItem = resolveComponent("OrMenuItem");
-  const _component_OrMenu = resolveComponent("OrMenu");
-  const _component_OrSearch = resolveComponent("OrSearch");
-  const _component_OrIconButton = resolveComponent("OrIconButton");
-  const _component_OrCardCollectionView = resolveComponent("OrCardCollectionView");
-  return openBlock(), createElementBlock("div", mergeProps({
-    ref: "root"
-  }, _ctx.$attrs, {
-    class: _ctx.rootStyles
-  }), [createElementVNode("div", {
-    class: normalizeClass(_ctx.toolbarStyles)
-  }, [createElementVNode("div", {
-    class: normalizeClass(_ctx.toolbarPanelStyles)
-  }, [_ctx.sortOptions.length ? (openBlock(), createElementBlock(Fragment, {
-    key: 0
-  }, [createVNode(_component_OrButton, {
-    ref: "sortButton",
-    variant: "link",
-    color: "inherit",
-    onClick: _cache[0] || (_cache[0] = $event => _ctx.sortMenu.toggle())
-  }, {
-    default: withCtx(() => [createTextVNode(toDisplayString(_ctx.proxySort) + " ", 1 /* TEXT */), _ctx.sortMenu ? (openBlock(), createBlock(_component_OrIcon, {
-      key: 0,
-      icon: _ctx.sortMenu.isOpen ? 'arrow_drop_up' : 'arrow_drop_down'
-    }, null, 8 /* PROPS */, ["icon"])) : createCommentVNode("v-if", true)]),
-    _: 1 /* STABLE */
-  }, 512 /* NEED_PATCH */), createVNode(_component_OrMenu, {
-    ref: "sortMenu",
-    trigger: _ctx.sortButton && _ctx.sortButton.root
-  }, {
-    default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.sortOptions, sortItem => {
-      return openBlock(), createBlock(_component_OrMenuItem, {
-        key: sortItem,
-        onClick: $event => _ctx.handleSort(sortItem)
-      }, {
-        default: withCtx(() => [createTextVNode(toDisplayString(sortItem), 1 /* TEXT */)]),
-
-        _: 2 /* DYNAMIC */
-      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]);
-    }), 128 /* KEYED_FRAGMENT */))]),
-
-    _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["trigger"])], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true)], 2 /* CLASS */), createElementVNode("div", {
-    class: normalizeClass(_ctx.toolbarPanelStyles)
-  }, [createVNode(_component_OrSearch, {
-    class: "md:w-[350px]",
-    size: "s",
-    onSearch: _ctx.handleSearch
-  }, null, 8 /* PROPS */, ["onSearch"]), createElementVNode("div", _hoisted_1, [_ctx.viewModes.length > 1 ? (openBlock(true), createElementBlock(Fragment, {
-    key: 0
-  }, renderList(_ctx.viewModes, viewOption => {
-    return openBlock(), createBlock(_component_OrIconButton, {
-      key: viewOption.view,
-      icon: {
-        icon: viewOption.icon,
-        variant: viewOption.view === _ctx.proxyView ? 'filled' : 'outlined'
-      },
-      onClick: $event => _ctx.switchView(viewOption.view)
-    }, null, 8 /* PROPS */, ["icon", "onClick"]);
-  }), 128 /* KEYED_FRAGMENT */)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "addon")])], 2 /* CLASS */)], 2 /* CLASS */), renderSlot(_ctx.$slots, _ctx.proxyView, normalizeProps(guardReactiveProps({
-    items: _ctx.items
-  })), () => [createVNode(_component_OrCardCollectionView, {
-    items: _ctx.items,
-    mode: _ctx.proxyView
-  }, {
-    item: withCtx(props => [renderSlot(_ctx.$slots, "item", normalizeProps(guardReactiveProps(props)))]),
-    _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["items", "mode"])])], 16 /* FULL_PROPS */);
-}
-
-script.render = render;
-script.__file = "src/components/or-card-collection-v3/OrCardCollection.vue";
-
-export { CardCollectionView as C, script as s };

package/dist/esm/v3/components/or-card-collection-v3/OrCardCollectionView.vue3.vue.d.ts

@@ -1,35 +0,0 @@
-import { PropType } from 'vue-demi';
-import { CardCollectionItem } from './types';
-import { CardCollectionView } from './props';
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
-    contentStyles: import("@vue/composition-api").ComputedRef<string[]>;
-}> & import("@vue/composition-api").Data, {}, {}, {
-    items: {
-        type: PropType<CardCollectionItem[]>;
-        default: CardCollectionItem[];
-    };
-    mode: {
-        type: PropType<CardCollectionView>;
-        required: true;
-    };
-}, import("@vue/composition-api").ExtractPropTypes<{
-    items: {
-        type: PropType<CardCollectionItem[]>;
-        default: CardCollectionItem[];
-    };
-    mode: {
-        type: PropType<CardCollectionView>;
-        required: true;
-    };
-}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    items: CardCollectionItem[];
-    mode: CardCollectionView;
-} & {}, import("@vue/composition-api").ShallowUnwrapRef<{
-    contentStyles: import("@vue/composition-api").ComputedRef<string[]>;
-}>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
-    items: CardCollectionItem[];
-    mode: CardCollectionView;
-} & {}, {
-    items: CardCollectionItem[];
-}, true>);
-export default _default;

package/dist/esm/v3/components/or-card-collection-v3/constatnts.d.ts

@@ -1,4 +0,0 @@
-import { ViewMode } from './types';
-export declare const gridView: ViewMode;
-export declare const listView: ViewMode;
-export declare const defaultViewModes: ViewMode[];

package/src/components/or-card-collection-v3/OrCardCollectionView.vue2.vue

@@ -1,41 +0,0 @@
-<template>
-  <div :class="contentStyles">
-    <slot
-      v-for="(item) in items"
-      name="item"
-      v-bind="{
-        item,
-        mode,
-      }"
-    >
-      {{ item.key }}
-    </slot>
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent, computed, PropType } from 'vue-demi';
-import { CardCollectionContent, CardCollectionContentViews } from './styles';
-import { CardCollectionItem } from './types';
-import { CardCollectionView } from './props';
-
-export default defineComponent({
-  name: 'OrCardCollectionView',
-  props: {
-    items: {
-      type: Array as PropType<CardCollectionItem[]>,
-      default: [] as CardCollectionItem[],
-    },
-    mode: {
-      type: String as PropType<CardCollectionView>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const contentStyles = computed(() => [
-      ...CardCollectionContent,
-      ...CardCollectionContentViews[props.mode],
-    ]);
-    return { contentStyles };
-  },
-});
-</script>

package/src/components/or-card-collection-v3/OrCardCollectionView.vue3.vue

@@ -1,42 +0,0 @@
-<template>
-  <div :class="contentStyles">
-    <slot
-      v-for="(item, index) in items"
-      :key="item.key || index"
-      name="item"
-      v-bind="{
-        item,
-        mode,
-      }"
-    >
-      {{ item.key }}
-    </slot>
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent, computed, PropType } from 'vue-demi';
-import { CardCollectionContent, CardCollectionContentViews } from './styles';
-import { CardCollectionItem } from './types';
-import { CardCollectionView } from './props';
-
-export default defineComponent({
-  name: 'OrCardCollectionView',
-  props: {
-    items: {
-      type: Array as PropType<CardCollectionItem[]>,
-      default: [] as CardCollectionItem[],
-    },
-    mode: {
-      type: String as PropType<CardCollectionView>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const contentStyles = computed(() => [
-      ...CardCollectionContent,
-      ...CardCollectionContentViews[props.mode],
-    ]);
-    return { contentStyles };
-  },
-});
-</script>

package/src/components/or-card-collection-v3/constatnts.ts

@@ -1,12 +0,0 @@
-import { ViewMode } from './types';
-
-export const gridView: ViewMode = {
-  view: 'grid',
-  icon: 'grid_view',
-};
-export const listView: ViewMode = {
-  view: 'list',
-  icon: 'view_agenda',
-};
-
-export const defaultViewModes = [gridView, listView];