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

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

@@ -1,7 +1,12 @@
 export interface CardCollectionItem {
-    id: string;
+    key?: string;
+    [key: string | number]: any;
 }
-export interface CardCollectionSortHeader {
-    value: string;
+export interface ViewMode {
+    view: string;
+    icon: string;
+}
+export interface SortOption {
     label: string;
+    value: string;
 }

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

@@ -1,6 +1,6 @@
-export { C as ConfirmType, s as OrConfirmV3 } from '../../OrConfirm-7cb2f36b.js';
+export { C as ConfirmType, s as OrConfirmV3 } from '../../OrConfirm-906427ef.js';
 import 'vue-demi';
-import '../../OrButton-970ae320.js';
+import '../../OrButton-f4b9ee51.js';
 import '../../useClassAttribute-47fdb016.js';
 import '@vueuse/core';
 import '../../OrLoader-b3cf4231.js';

package/dist/esm/v3/components/or-select-v3/OrSelect.vue.d.ts

@@ -23,13 +23,13 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     dropdownStyles: import("@vue/composition-api").ComputedRef<string[]>;
     noSearchResultsStyles: import("@vue/composition-api").ComputedRef<string[]>;
     controlId: import("@vue/composition-api").Ref<string>;
-    proxyModelValue: import("@vue/composition-api").WritableComputedRef<string | number | (string | number)[]>;
+    proxyModelValue: import("@vue/composition-api").WritableComputedRef<string | string[]>;
     invalid: import("@vue/composition-api").ComputedRef<boolean>;
     readonly: import("@vue/composition-api").ComputedRef<boolean>;
     selection: import("@vue/composition-api").ComputedRef<SelectOption | (SelectOption | undefined)[] | undefined>;
     searchText: import("@vue/composition-api").Ref<string>;
     internalSearchOptions: import("@vue/composition-api").Ref<{
-        value: string | number;
+        value: string;
         label: string;
     }[]>;
     resolvedSearchOptions: import("@vue/composition-api").ComputedRef<SelectOption[]>;
@@ -49,11 +49,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: SelectOption[];
     };
     modelValue: {
-        type: PropType<string | number | (string | number)[]>;
+        type: PropType<string | string[]>;
         default: undefined;
     };
     value: {
-        type: PropType<string | number | (string | number)[]>;
+        type: PropType<string | string[]>;
         default: undefined;
     };
     multiple: {
@@ -114,11 +114,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: SelectOption[];
     };
     modelValue: {
-        type: PropType<string | number | (string | number)[]>;
+        type: PropType<string | string[]>;
         default: undefined;
     };
     value: {
-        type: PropType<string | number | (string | number)[]>;
+        type: PropType<string | string[]>;
         default: undefined;
     };
     multiple: {
@@ -173,8 +173,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     label: string;
     options: SelectOption[];
     searchOptions: SelectOption[];
-    modelValue: string | number | (string | number)[];
-    value: string | number | (string | number)[];
+    modelValue: string | string[];
+    value: string | string[];
     multiple: boolean;
     size: SelectSize;
     placeholder: string;
@@ -210,13 +210,13 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     dropdownStyles: import("@vue/composition-api").ComputedRef<string[]>;
     noSearchResultsStyles: import("@vue/composition-api").ComputedRef<string[]>;
     controlId: import("@vue/composition-api").Ref<string>;
-    proxyModelValue: import("@vue/composition-api").WritableComputedRef<string | number | (string | number)[]>;
+    proxyModelValue: import("@vue/composition-api").WritableComputedRef<string | string[]>;
     invalid: import("@vue/composition-api").ComputedRef<boolean>;
     readonly: import("@vue/composition-api").ComputedRef<boolean>;
     selection: import("@vue/composition-api").ComputedRef<SelectOption | (SelectOption | undefined)[] | undefined>;
     searchText: import("@vue/composition-api").Ref<string>;
     internalSearchOptions: import("@vue/composition-api").Ref<{
-        value: string | number;
+        value: string;
         label: string;
     }[]>;
     resolvedSearchOptions: import("@vue/composition-api").ComputedRef<SelectOption[]>;
@@ -230,8 +230,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     label: string;
     options: SelectOption[];
     searchOptions: SelectOption[];
-    modelValue: string | number | (string | number)[];
-    value: string | number | (string | number)[];
+    modelValue: string | string[];
+    value: string | string[];
     multiple: boolean;
     size: SelectSize;
     placeholder: string;
@@ -249,8 +249,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     label: string;
     options: SelectOption[];
     searchOptions: SelectOption[];
-    modelValue: string | number | (string | number)[];
-    value: string | number | (string | number)[];
+    modelValue: string | string[];
+    value: string | string[];
     multiple: boolean;
     size: SelectSize;
     placeholder: string;

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

@@ -1,3 +1,2 @@
 export { default as OrSelectV3 } from './OrSelect.vue';
 export * from './props';
-export * from './types';

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

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from '../../OrSelect-bff22c7f.js';
+export { s as OrSelectV3 } from '../../OrSelect-fee9c099.js';
 export { a as SelectSize } from '../../OrInputBox-5247ab25.js';
 import 'vue-demi';
 import '../../dropdown-open-0d314aa4.js';

package/dist/esm/v3/components/or-select-v3/types.d.ts

@@ -1,5 +1,5 @@
 export interface SelectOption {
-    value: string | number;
+    value: string;
     label: string;
 }
 export interface SelectSearchFunction {

package/dist/esm/v3/index.js

@@ -3,10 +3,10 @@ export { a as AvatarColor, A as AvatarSize, s as OrAvatarV3 } from './OrAvatar-e
 export { s as OrBottomSheetV3 } from './OrBottomSheet-62817aec.js';
 export { s as OrButton, a as OrButtonColors, b as OrButtonSizes, O as OrButtonViews } from './OrButton-fca9019a.js';
 export { b as BUTTON_COLOR, d as BUTTON_LOADER_TYPE, c as BUTTON_SIZE, B as BUTTON_TYPE, I as ICON_BUTTON_TYPE, s as OrButtonV2, a as OrIconButton } from './OrIconButton-8be9c89f.js';
-export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-970ae320.js';
+export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-f4b9ee51.js';
 export { s as OrCard } from './OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection-a5e326ef.js';
-export { C as CardCollectionView, s as OrCardCollectionV3 } from './OrCardCollection-5a0febaf.js';
+export { C as CardCollectionView, s as OrCardCollectionV3 } from './OrCardCollection-3bd67c5c.js';
 export { s as OrCardV3 } from './OrCard-fd92f7c8.js';
 export { a as OrCarousel, s as OrCarouselItem } from './OrCarouselItem-636d99a1.js';
 export { s as OrCheckbox } from './OrCheckbox-ed4a19cf.js';
@@ -16,7 +16,7 @@ export { s as OrCode, O as OrCodeLanguages } from './OrCode-ee19a5e6.js';
 export { s as OrCollapse } from './OrCollapse-445141ab.js';
 export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from './OrColorPicker-189cb097.js';
 export { s as OrConfirm } from './OrConfirm-f39bd784.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-7cb2f36b.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-906427ef.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-f2e08564.js';
 export { s as OrError } from './OrError-f90296db.js';
 export { s as OrErrorTagV3 } from './OrErrorTag-98252eef.js';
@@ -53,7 +53,6 @@ export { N as NotificationVariant, s as OrNotificationV3 } from './OrNotificatio
 export { s as OrOverflowMenu } from './OrOverflowMenu-e82cbcbe.js';
 export { s as OrOverlay } from './OrOverlay-451dce49.js';
 export { s as OrOverlayV3 } from './OrOverlay-738a44d5.js';
-export { s as OrPaginationV3 } from './OrPagination-d351a13b.js';
 export { s as OrProgress, O as OrProgressColors, a as OrProgressTypes } from './OrProgress-d0d52c86.js';
 export { s as OrProgressV3, P as ProgressColor, a as ProgressType } from './OrProgress-407002e0.js';
 export { s as OrRadio } from './OrRadio-c3ab11f2.js';
@@ -62,7 +61,7 @@ export { s as OrRadioV3 } from './OrRadio-54b6d0de.js';
 export { s as OrSearchV3 } from './OrSearch-cdde55ce.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-171cad78.js';
 export { s as OrSelect } from './OrSelect-0821b907.js';
-export { s as OrSelectV3 } from './OrSelect-bff22c7f.js';
+export { s as OrSelectV3 } from './OrSelect-fee9c099.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-375c85a3.js';
 export { O as OrSidebarPlacement, s as OrSidebarV3 } from './OrSidebar-a62972f5.js';
 export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText-2b1610ce.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.69.1-beta.2095.0",
+  "version": "2.69.1-beta.2097.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",

package/src/components/index.ts

@@ -52,7 +52,6 @@ export * from './or-notification-v3';
 export * from './or-overflow-menu';
 export * from './or-overlay';
 export * from './or-overlay-v3';
-export * from './or-pagination-v3';
 export * from './or-popover-v3';
 export * from './or-progress';
 export * from './or-progress-v3';

package/src/components/or-button-v3/OrButton.stories3.ts

@@ -36,10 +36,6 @@ export default {
       options: Object.values(ButtonColor),
     },
 
-    activated: {
-      table: { disable: true },
-    },
-
     disabled: {
       control: { type: 'boolean' },
     },

package/src/components/or-button-v3/OrButton.vue

@@ -4,7 +4,6 @@
     v-bind="$attrs"
     :class="rootStyles"
     :type="type"
-    :activated="activated ? '' : null"
     :disabled="disabled"
     @click="$emit('click', $event)"
     @focus="$emit('focus', $event)"
@@ -64,11 +63,6 @@ export default defineComponent({
       default: ButtonColor.Primary,
     },
 
-    activated: {
-      type: Boolean,
-      default: false,
-    },
-
     disabled: {
       type: Boolean,
       default: false,

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

@@ -110,19 +110,5 @@ export const ButtonRootColors: Record<`${ButtonColor}-${ButtonVariant}`, string[
     'dark:theme-preset-4-error-dark',
   ],
 
-  'inherit-link': [
-    // Typography
-    'typography-caption-regular',
-
-    // Typography (activated)
-    'activated:typography-caption-bold',
-
-    // Theme
-    'theme-foreground-inherit',
-    'dark:theme-foreground-inherit',
-
-    // Theme (activated)
-    'activated:theme-foreground-default',
-    'dark:activated:theme-foreground-default-dark',
-  ],
+  'inherit-link': [],
 };

package/src/components/or-card-collection-v3/OrCardCollection.stories3.ts

@@ -1,10 +1,13 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/vue3';
+import { ref } from 'vue-demi';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import OrCardCollectionDocs from './OrCardCollection.docs.mdx';
 import OrCardCollection from './OrCardCollection.vue';
+import { defaultViewModes } from './constatnts';
+import { OrCardV3 as OrCard } from '../or-card-v3';
 import { CardCollectionView } from './props';
-import { CardCollectionItem, CardCollectionSortHeader } from './types';
+import { CardCollectionItem } from './types';
 
 export default {
   title: 'Components/Card Collection',
@@ -12,7 +15,7 @@ export default {
 
   argTypes: {
     // Slots
-    gridItem: {
+    item: {
       type: {
         name: 'string',
         required: true,
@@ -21,10 +24,9 @@ export default {
       control: { type: 'text' },
     },
 
-    listItem: {
+    header: {
       type: {
         name: 'string',
-        required: true,
       },
 
       control: { type: 'text' },
@@ -44,7 +46,7 @@ export default {
       control: { type: 'object' },
     },
 
-    sortHeaders: {
+    sortOptions: {
       control: { type: 'object' },
     },
 
@@ -70,35 +72,51 @@ export default {
     docs: {
       page: OrCardCollectionDocs,
     },
+    layout: 'fullscreen',
   },
 } as Meta<typeof OrCardCollection>;
 
 const Template: StoryFn<typeof OrCardCollection> = (args) => ({
   components: {
     OrCardCollection,
+    OrCard,
     OrIcon,
   },
 
   setup() {
+    const sort = ref(args.sort);
+    const onSortChange = (newSort: string) => {
+      sort.value = newSort;
+      action('searchChange')(newSort);
+    };
+
     return {
       args,
+      sort,
+      onSortChange,
       onViewChange: action('viewChange'),
-      onSortChange: action('sortChange'),
       onSearchChange: action('searchChange'),
     };
   },
 
   template: `
-    <OrCardCollection
-      v-bind="args"
-      @viewChange="onViewChange"
-      @sortChange="onSortChange"
-      @searchChange="onSearchChange"
-    >
-      <template #gridItem="item">${args.gridItem}</template>
-      <template #listItem="item">${args.listItem}</template>
-      <template #addon>${args.addon}</template>
-    </OrCardCollection>
+    <div class="p-md bg-surface-1 dark:bg-surface-1-dark">
+      <OrCardCollection
+        v-bind="args"
+        :sort="sort"
+        @viewChange="onViewChange"
+        @sortChange="onSortChange"
+        @searchChange="onSearchChange"
+      >
+        <template #header>
+          ${args.header}
+        </template>
+        <template #item="{item, mode}">
+          <OrCard>${args.item} ({{mode}})</OrCard>
+        </template>
+        <template #addon>${args.addon}</template>
+      </OrCardCollection>
+    </div>
   `,
 });
 
@@ -106,8 +124,7 @@ export const Default = Template.bind({});
 
 Default.args = {
   // Slots
-  gridItem: '{{ item.label }} (grid)',
-  listItem: '{{ item.label }} (list)',
+  item: '{{ item.label }}',
   addon: '<OrIcon icon="info" />',
 
   // Props
@@ -139,7 +156,7 @@ Default.args = {
     'Yankee',
     'Zulu',
   ], (item) => ({
-    id: item.toLowerCase(),
+    key: item.toLowerCase(),
     label: item,
   })),
 };
@@ -150,13 +167,161 @@ WithSorting.args = {
   ...Default.args,
 
   // Props
-  sortHeaders: Array.from<string, CardCollectionSortHeader>([
-    'Foo',
-    'Bar',
-    'Baz',
-    'Qux',
-  ], (item) => ({
-    value: item.toLowerCase(),
-    label: item,
-  })),
+  sort: 'bar',
+  sortOptions: [
+    {
+      label: 'Foo',
+      value: 'foo',
+    },
+    {
+      label: 'Bar',
+      value: 'bar',
+    },
+    {
+      label: 'Baz',
+      value: 'baz',
+    },
+    {
+      label: 'Qux',
+      value: 'qux',
+    },
+  ],
+};
+
+
+export const OverrideViewContainer: StoryFn<typeof OrCardCollection> = (args) => ({
+  components: {
+    OrCardCollection,
+    OrCard,
+  },
+
+  setup() {
+    return {
+      args,
+      onViewChange: action('viewChange'),
+      onSortChange: action('sortChange'),
+      onSearchChange: action('searchChange'),
+    };
+  },
+
+  template: `
+    <div class="p-md bg-surface-1 dark:bg-surface-1-dark">
+      <OrCardCollection
+        v-bind="args"
+        @viewChange="onViewChange"
+        @sortChange="onSortChange"
+        @searchChange="onSearchChange"
+      >
+      <template #header="{mode}">
+        <div class="typography-headline-3">Custom {{ mode }}</div>
+      </template>
+      <template #grid="{items}">
+        <div class="grid grid-cols-3">
+          <OrCard
+            v-for="item in items"
+            :key="item.key"
+          >
+            {{ item.label }}
+          </OrCard>
+        </div>
+      </template>
+        <template #list="{items}">
+          <ul>
+            <li
+              v-for="item in items"
+              :key="item.key"
+            >
+              - {{ item.label }}
+            </li>
+          </ul>
+        </template>
+      </OrCardCollection>
+    </div>
+  `,
+});
+
+OverrideViewContainer.args = {
+  ...Default.args,
+};
+
+export const ExtraViewMode: StoryFn<typeof OrCardCollection> = (args) => ({
+  components: {
+    OrCardCollection,
+    OrCard,
+  },
+
+  setup() {
+    return {
+      args,
+      defaultViewModes,
+      onViewChange: action('viewChange'),
+      onSearchChange: action('searchChange'),
+    };
+  },
+
+  template: `
+    <div class="p-md bg-surface-1 dark:bg-surface-1-dark">
+      <OrCardCollection
+        v-bind="args"
+        :view-modes="[...defaultViewModes, {view: 'mymode', icon: 'timeline'}]"
+        @viewChange="onViewChange"
+        @searchChange="onSearchChange"
+      >
+        <template #item="{item, mode}">
+          <OrCard>${args.item} ({{mode}})</OrCard>
+        </template>
+        <template #mymode="{items}">
+          <div class="typography-headline-3">My view mode</div>
+          <div class="grid grid-cols-3">
+            <OrCard
+              v-for="item in items"
+              :key="item.key"
+            >
+              {{ item.label }} (timeline)
+            </OrCard>
+          </div>
+        </template>
+      </OrCardCollection>
+    </div>
+  `,
+});
+
+ExtraViewMode.args = {
+  ...Default.args,
+};
+
+export const WithLink: StoryFn<typeof OrCardCollection> = (args) => ({
+  components: {
+    OrCardCollection,
+    OrCard,
+    OrIcon,
+  },
+
+  setup() {
+    return {
+      args,
+      onViewChange: action('viewChange'),
+      onSortChange: action('sortChange'),
+      onSearchChange: action('searchChange'),
+    };
+  },
+
+  template: `
+    <div class="p-md bg-surface-1 dark:bg-surface-1-dark">
+      <OrCardCollection
+        v-bind="args"
+        @viewChange="onViewChange"
+        @sortChange="onSortChange"
+        @searchChange="onSearchChange"
+      >
+        <template #item="{item}">
+          <a href="#" @click.prevent><OrCard>${args.item}</OrCard></a>
+        </template>
+      </OrCardCollection>
+    </div>
+  `,
+});
+
+WithLink.args = {
+  ...Default.args,
 };