@onereach/ui-components 2.62.3-beta.1904.0 → 2.62.3

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

@@ -1,162 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryFn } from '@storybook/vue3';
-import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import OrCardCollectionDocs from './OrCardCollection.docs.mdx';
-import OrCardCollection from './OrCardCollection.vue';
-import { CardCollectionView } from './props';
-import { CardCollectionItem, CardCollectionSortHeader } from './types';
-
-export default {
-  title: 'Components/Card Collection',
-  component: OrCardCollection,
-
-  argTypes: {
-    // Slots
-    gridItem: {
-      type: {
-        name: 'string',
-        required: true,
-      },
-
-      control: { type: 'text' },
-    },
-
-    listItem: {
-      type: {
-        name: 'string',
-        required: true,
-      },
-
-      control: { type: 'text' },
-    },
-
-    // Props
-    items: {
-      control: { type: 'object' },
-    },
-
-    view: {
-      control: { type: 'select' },
-      options: Object.values(CardCollectionView),
-    },
-
-    sort: {
-      control: { type: 'object' },
-    },
-
-    sortHeaders: {
-      control: { type: 'object' },
-    },
-
-    search: {
-      control: { type: 'text' },
-    },
-
-    // Events
-    viewChange: {
-      table: { disable: true },
-    },
-
-    sortChange: {
-      table: { disable: true },
-    },
-
-    searchChange: {
-      table: { disable: true },
-    },
-  },
-
-  parameters: {
-    docs: {
-      page: OrCardCollectionDocs,
-    },
-  },
-} as Meta<typeof OrCardCollection>;
-
-const Template: StoryFn<typeof OrCardCollection> = (args) => ({
-  components: {
-    OrCardCollection,
-    OrIcon,
-  },
-
-  setup() {
-    return {
-      args,
-      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>
-  `,
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  // Slots
-  gridItem: '{{ item.label }} (grid)',
-  listItem: '{{ item.label }} (list)',
-  addon: '<OrIcon icon="info" />',
-
-  // Props
-  items: Array.from<string, CardCollectionItem>([
-    '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',
-  ], (item) => ({
-    id: item.toLowerCase(),
-    label: item,
-  })),
-};
-
-export const WithSorting = Template.bind({});
-
-WithSorting.args = {
-  ...Default.args,
-
-  // Props
-  sortHeaders: Array.from<string, CardCollectionSortHeader>([
-    'Foo',
-    'Bar',
-    'Baz',
-    'Qux',
-  ], (item) => ({
-    value: item.toLowerCase(),
-    label: item,
-  })),
-};

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/OrSortHeader.vue

@@ -1,111 +0,0 @@
-<template>
-  <div
-    ref="root"
-    v-bind="$attrs"
-    :class="rootStyles"
-    :activated="activated ? '' : null"
-    @click.stop="toggleDirection()"
-  >
-    <slot />
-
-    <template v-if="activated">
-      <OrIcon
-        :class="{ 'rotate-180': proxyModelValue.direction === 'asc' }"
-        :icon="'arrow_downward'"
-      />
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
-import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import { SortHeaderRoot } from './styles';
-import { SortHeaderModel } from './types';
-
-export default defineComponent({
-  name: 'OrSortHeader',
-
-  components: {
-    OrIcon,
-  },
-
-  inheritAttrs: false,
-
-  props: {
-    modelValue: {
-      type: Object as PropType<SortHeaderModel>,
-      default: undefined,
-    },
-
-    value: { // TODO: Remove Vue 2 fallback
-      type: Object as PropType<SortHeaderModel>,
-      default: undefined,
-    },
-
-    inputValue: { // TODO: Rename to `value` after complete migration to Vue 3
-      type: String,
-      required: true,
-    },
-  },
-
-  emits: [
-    'update:modelValue',
-
-    'input',
-    'focus',
-    'blur',
-  ],
-
-  expose: [
-    'root',
-  ],
-
-  setup(props, context) {
-    // Refs
-    const root = ref<HTMLElement>();
-
-    // Styles
-    const classAttribute = useClassAttribute();
-
-    const rootStyles = computed(() => [
-      'or-sort-header',
-      ...SortHeaderRoot,
-      classAttribute.value,
-    ]);
-
-    // State
-    const proxyModelValue = computed({
-      get: () => {
-        return props.modelValue ?? props.value; // TODO: Remove Vue 2 fallback
-      },
-
-      set: (value) => {
-        context.emit('input', value);
-        context.emit('update:modelValue', value);
-      },
-    });
-
-    const activated = computed(() => {
-      return proxyModelValue.value?.column === props.inputValue;
-    });
-
-    // Methods
-    function toggleDirection(): void {
-      proxyModelValue.value = {
-        column: props.inputValue,
-        direction: proxyModelValue.value?.direction === 'asc' ? 'desc' : 'asc',
-      };
-    }
-
-    return {
-      root,
-      rootStyles,
-      proxyModelValue,
-      activated,
-      toggleDirection,
-    };
-  },
-});
-</script>

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

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