@onereach/ui-components 2.62.7-beta.1930.0 → 2.62.7-beta.1932.0

package/src/components/or-card-collection-v3/OrCardCollection.vue

@@ -1,210 +0,0 @@
-<template>
-  <div
-    ref="root"
-    v-bind="$attrs"
-    :class="rootStyles"
-  >
-    <div :class="toolbarStyles">
-      <div :class="toolbarPanelStyles">
-        <template v-if="sortHeaders">
-          <OrSortHeader
-            v-for="header in sortHeaders"
-            :key="header.value"
-            v-model="proxySort"
-            :input-value="header.value"
-          >
-            {{ header.label }}
-          </OrSortHeader>
-        </template>
-      </div>
-
-      <div :class="toolbarPanelStyles">
-        <OrInput
-          v-model="proxySearch"
-          :type="'search'"
-          :placeholder="'Search'"
-          :size="'s'"
-        />
-
-        <OrIconButton
-          :icon="'grid_view'"
-          @click="switchToGridView()"
-        />
-
-        <OrIconButton
-          :icon="'view_list'"
-          @click="switchToListView()"
-        />
-
-        <slot name="addon" />
-      </div>
-    </div>
-
-    <div :class="contentStyles">
-      <template v-if="proxyView === 'grid'">
-        <OrCard
-          v-for="item in items"
-          :key="item.id"
-        >
-          <slot
-            name="gridItem"
-            v-bind="item"
-          />
-        </OrCard>
-      </template>
-
-      <template v-if="proxyView === 'list'">
-        <OrCard
-          v-for="item in items"
-          :key="item.id"
-        >
-          <slot
-            name="listItem"
-            v-bind="item"
-          />
-        </OrCard>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
-import { OrCardV3 as OrCard } from '../or-card-v3';
-import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
-import { OrInputV3 as OrInput } from '../or-input-v3';
-import { OrSortHeaderV3 as OrSortHeader, SortHeaderModel } from '../or-sort-header-v3';
-import { CardCollectionView } from './props';
-import { CardCollectionContent, CardCollectionContentViews, CardCollectionRoot, CardCollectionToolbar, CardCollectionToolbarPanel } from './styles';
-import { CardCollectionItem, CardCollectionSortHeader } from './types';
-
-export default defineComponent({
-  name: 'OrCardCollection',
-
-  components: {
-    OrCard,
-    OrIconButton,
-    OrInput,
-    OrSortHeader,
-  },
-
-  inheritAttrs: false,
-
-  props: {
-    items: {
-      type: Array as PropType<CardCollectionItem[]>,
-      default: [] as CardCollectionItem[],
-    },
-
-    view: {
-      type: String as PropType<CardCollectionView>,
-      default: CardCollectionView.Grid,
-    },
-
-    sort: {
-      type: Object as PropType<SortHeaderModel>,
-      default: undefined,
-    },
-
-    sortHeaders: {
-      type: Array as PropType<CardCollectionSortHeader[]>,
-      default: undefined,
-    },
-
-    search: {
-      type: String,
-      default: undefined,
-    },
-  },
-
-  emits: [
-    'viewChange',
-    'sortChange',
-    'searchChange',
-  ],
-
-  expose: [
-    'root',
-  ],
-
-  setup(props, context) {
-    // Refs
-    const root = ref<HTMLElement>();
-
-    // Styles
-    const classAttribute = useClassAttribute();
-
-    const rootStyles = computed(() => [
-      'or-card-collection',
-      ...CardCollectionRoot,
-      classAttribute.value,
-    ]);
-
-    const toolbarStyles = computed(() => [
-      ...CardCollectionToolbar,
-    ]);
-
-    const toolbarPanelStyles = computed(() => [
-      ...CardCollectionToolbarPanel,
-    ]);
-
-    const contentStyles = computed(() => [
-      ...CardCollectionContent,
-      ...CardCollectionContentViews[proxyView.value],
-    ]);
-
-    // State
-    const proxyView = ref(props.view);
-    const proxySort = ref(props.sort);
-    const proxySearch = ref(props.search);
-
-    // Methods
-    function switchToGridView(): void {
-      proxyView.value = CardCollectionView.Grid;
-    }
-
-    function switchToListView(): void {
-      proxyView.value = CardCollectionView.List;
-    }
-
-    // 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,
-      rootStyles,
-      toolbarStyles,
-      toolbarPanelStyles,
-      contentStyles,
-      proxyView,
-      proxySort,
-      proxySearch,
-      switchToGridView,
-      switchToListView,
-    };
-  },
-});
-</script>

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

@@ -1,3 +0,0 @@
-export { default as OrCardCollectionV3 } from './OrCardCollection.vue';
-export * from './props';
-export * from './types';

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

@@ -1,4 +0,0 @@
-export enum CardCollectionView {
-  Grid = 'grid',
-  List = 'list',
-}

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

@@ -1,53 +0,0 @@
-import { CardCollectionView } from './props';
-
-export const CardCollectionRoot: string[] = [
-  // Layout
-  'flex flex-col',
-
-  // Spacing
-  'gap-md',
-];
-
-export const CardCollectionToolbar: string[] = [
-  // Layout
-  'flex',
-  'justify-between',
-  'items-center',
-
-  // Typography
-  'typography-body-2-regular',
-
-  // Theme
-  'theme-foreground-default',
-  'dark:theme-foreground-default-dark',
-];
-
-export const CardCollectionToolbarPanel: string[] = [
-  // Layout
-  'flex',
-  'justify-normal',
-  'items-center',
-
-  // Spacing
-  'gap-sm',
-];
-
-export const CardCollectionContent: string[] = [
-  // Layout
-  'grid',
-
-  // Spacing
-  'gap-sm md:gap-md',
-];
-
-export const CardCollectionContentViews: Record<CardCollectionView, string[]> = {
-  'grid': [
-    // Layout
-    'sm:grid-cols-1',
-    'md:grid-cols-2',
-    'lg:grid-cols-4',
-    'xl:grid-cols-6',
-  ],
-
-  'list': [],
-};

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

@@ -1,8 +0,0 @@
-export interface CardCollectionItem {
-  id: string;
-}
-
-export interface CardCollectionSortHeader {
-  value: string;
-  label: string;
-}

package/src/components/or-sort-header-v3/OrSortHeader.docs.mdx

@@ -1,3 +0,0 @@
-import { DocsPage } from '@storybook/addon-docs';
-
-<DocsPage />

package/src/components/or-sort-header-v3/OrSortHeader.stories3.ts

@@ -1,132 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryFn } from '@storybook/vue3';
-import { ref, watch } from 'vue-demi';
-import OrSortHeaderDocs from './OrSortHeader.docs.mdx';
-import OrSortHeader from './OrSortHeader.vue';
-import { SortHeaderModel } from './types';
-
-export default {
-  title: 'Components/Sort Header',
-  component: OrSortHeader,
-
-  argTypes: {
-    // Slots
-    default: {
-      type: {
-        name: 'string',
-        required: true,
-      },
-
-      control: { type: 'text' },
-    },
-
-    // Props
-    modelValue: {
-      control: { type: 'object' },
-    },
-
-    value: { // TODO: Remove Vue 2 fallback
-      control: { type: 'object' },
-    },
-
-    inputValue: { // TODO: Rename to `value` after complete migration to Vue 3
-      control: { type: 'text' },
-    },
-
-    // Events
-    'update:modelValue': {
-      table: { disable: true },
-    },
-
-    input: {
-      table: { disable: true },
-    },
-
-    focus: {
-      table: { disable: true },
-    },
-
-    blur: {
-      table: { disable: true },
-    },
-  },
-
-  parameters: {
-    layout: 'centered',
-
-    docs: {
-      page: OrSortHeaderDocs,
-    },
-  },
-
-  decorators: [
-    () => ({
-      template: `
-        <div class="flex flex-row gap-sm">
-          <story />
-        </div>
-      `,
-    }),
-  ],
-} as Meta<typeof OrSortHeader>;
-
-const Template: StoryFn<typeof OrSortHeader> = (args) => ({
-  components: {
-    OrSortHeader,
-  },
-
-  setup() {
-    // State
-    const model = ref<SortHeaderModel>();
-
-    // Effects
-    watch(model, (value) => {
-      console.debug(value);
-    });
-
-    return {
-      args,
-      model,
-      onUpdateModelValue: action('update:modelValue'),
-      onInput: action('input'),
-      onFocus: action('focus'),
-      onBlur: action('blur'),
-    };
-  },
-
-  template: `
-    <div class="contents">
-      <OrSortHeader
-        v-model="model"
-        v-bind="args"
-        @update:modelValue="onUpdateModelValue"
-        @input="onInput"
-        @focus="onFocus"
-        @blur="onBlur"
-      >
-        ${args.default}
-      </OrSortHeader>
-
-      <OrSortHeader
-        v-model="model"
-        input-value="column-2"
-        @update:modelValue="onUpdateModelValue"
-        @input="onInput"
-        @focus="onFocus"
-        @blur="onBlur"
-      >
-        Column 2
-      </OrSortHeader>
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  // Slots
-  default: 'Column 1',
-
-  // Props
-  inputValue: 'column-1',
-};

package/src/components/or-sort-header-v3/index.ts

@@ -1,2 +0,0 @@
-export { default as OrSortHeaderV3 } from './OrSortHeader.vue';
-export * from './types';

package/src/components/or-sort-header-v3/styles.ts

@@ -1,23 +0,0 @@
-export const SortHeaderRoot: string[] = [
-  // Layout
-  'inline-flex',
-  'justify-normal',
-  'items-center',
-
-  // Interactivity
-  'interactivity-auto',
-
-  // Typography
-  'typography-caption-regular',
-
-  // Typography (activated)
-  'activated:typography-caption-semibold',
-
-  // Theme
-  'theme-foreground-outline',
-  'dark:theme-foreground-outline-dark',
-
-  // Theme (activated)
-  'activated:theme-foreground-default',
-  'dark:activated:theme-foreground-default-dark',
-];

package/src/components/or-sort-header-v3/types.ts

@@ -1,4 +0,0 @@
-export interface SortHeaderModel {
-  column: string;
-  direction: 'asc' | 'desc';
-}