@onereach/ui-components 5.0.1-beta.3131.0 → 5.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "5.0.1-beta.3131.0",
+  "version": "5.0.1",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -39,7 +39,7 @@
     "@codemirror/lang-json": "6.0.1",
     "@codemirror/lang-markdown": "6.1.1",
     "@floating-ui/dom": "0.3.1",
-    "@onereach/styles": "^3.0.1-beta.3131.0",
+    "@onereach/styles": "^3.0.1",
     "@types/lodash": "4.14.173",
     "@types/sortablejs": "1.10.7",
     "@types/uuid": "8.3.1",
@@ -57,13 +57,7 @@
     "@onereach/rollup-vue-lib-config": "2.2.2",
     "@rollup/plugin-replace": "4.0.0",
     "@rollup/plugin-url": "^8.0.1",
-    "@storybook/addon-actions": "6.5.16",
-    "@storybook/jest": "^0.0.10",
-    "@storybook/testing-library": "^0.0.13",
-    "@storybook/vue3": "6.5.16",
-    "@types/faker": "5.5.9",
     "@vue/composition-api": "1.7.1",
-    "faker": "5.5.3",
     "glob": "9.3.0",
     "sass": "1.32.8",
     "typescript": "4.9.5",
@@ -154,5 +148,6 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  }
+  },
+  "gitHead": "2e8d5960aa8a5eb10a8b620363cde863018fd76f"
 }

package/src/components/or-checkbox-v3/OrCheckbox.vue

@@ -22,7 +22,6 @@
       <OrLabel
         :control-id="controlAttributes.id"
         :variant="labelVariant"
-        :selected="isChecked"
         :required="required"
         :disabled="disabled"
       >

package/src/components/or-input-v3/OrInput.vue

@@ -219,7 +219,6 @@ export default defineComponent({
 
   emits: [
     'update:modelValue',
-
     'input',
     'keydown',
     'keyup',

package/src/components/or-label-v3/OrLabel.vue

@@ -2,7 +2,6 @@
   <div
     ref="root"
     :class="rootStyles"
-    :selected="selected ? '' : null"
     :disabled="disabled ? '' : null"
   >
     <label
@@ -23,9 +22,11 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
 import { LabelVariant } from './props';
-import { Label, LabelAddon, LabelText, LabelVariants } from './styles';
+import { LabelAddon, LabelRoot, LabelRootVariants, LabelText } from './styles';
 
 export default defineComponent({
+  name: 'OrLabel',
+
   props: {
     controlId: {
       type: String,
@@ -37,11 +38,6 @@ export default defineComponent({
       default: LabelVariant.Input,
     },
 
-    selected: {
-      type: Boolean,
-      default: false,
-    },
-
     required: {
       type: Boolean,
       default: false,
@@ -64,8 +60,8 @@ export default defineComponent({
     // Styles
     const rootStyles = computed(() => [
       'or-label-v3',
-      ...Label,
-      ...LabelVariants[props.variant],
+      ...LabelRoot,
+      ...LabelRootVariants[props.variant],
     ]);
 
     const textStyles = computed(() => [

package/src/components/or-label-v3/props.ts

@@ -1,5 +1,4 @@
 export enum LabelVariant {
   Input = 'input',
   Toggle = 'toggle',
-  MenuItem = 'menu-item',
 }

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

@@ -1,6 +1,6 @@
 import { LabelVariant } from './props';
 
-export const Label: string[] = [
+export const LabelRoot: string[] = [
   // Layout
   'layout-row justify-between',
 
@@ -8,8 +8,8 @@ export const Label: string[] = [
   'gap-sm',
 ];
 
-export const LabelVariants: Record<LabelVariant, string[]> = {
-  [LabelVariant.Input]: [
+export const LabelRootVariants: Record<LabelVariant, string[]> = {
+  'input': [
     // Typography
     'typography-caption-regular',
 
@@ -18,7 +18,7 @@ export const LabelVariants: Record<LabelVariant, string[]> = {
     'dark:theme-foreground-outline-dark',
   ],
 
-  [LabelVariant.Toggle]: [
+  'toggle': [
     // Typography
     'typography-body-2-regular',
 
@@ -26,18 +26,6 @@ export const LabelVariants: Record<LabelVariant, string[]> = {
     'theme-foreground-default',
     'dark:theme-foreground-default-dark',
   ],
-
-  [LabelVariant.MenuItem]: [
-    // Typography
-    'typography-body-2-regular',
-
-    // Typography (selected)
-    'selected:typography-body-2-semibold',
-
-    // Theme
-    'theme-foreground-default',
-    'dark:theme-foreground-default-dark',
-  ],
 };
 
 export const LabelText: string[] = [

package/src/components/or-select-v3/OrSelect.vue

@@ -39,14 +39,14 @@
         @blur="$emit('blur', $event)"
       >
         <template v-if="multiple">
-          <template v-if="!isEmptyModelValue">
+          <template v-if="proxyModelValue && proxyModelValue.length > 0">
             <slot
               name="valueTemplate"
               :model="proxyModelValue"
             >
               <OrTag
-                v-for="option in selection"
-                :key="option.value"
+                v-for="(option, i) in selection"
+                :key="i"
                 :variant="'reset'"
                 :disabled="disabled || readonly"
                 @reset="deselect(option)"
@@ -54,80 +54,27 @@
                 {{ option.label }}
               </OrTag>
             </slot>
-
-            <template v-if="popoverState === 'open' && enableSearch">
-              <OrInput
-                ref="searchControl"
-                v-model="searchText"
-                :class="searchControlStyles"
-                :type="'search'"
-                :placeholder="'Search'"
-                :size="size"
-                :disable-default-styles="true"
-                @click.stop
-              />
-            </template>
           </template>
 
           <template v-else>
-            <template v-if="popoverState === 'open' && enableSearch">
-              <OrInput
-                ref="searchControl"
-                v-model="searchText"
-                :class="searchControlStyles"
-                :type="'search'"
-                :placeholder="'Search'"
-                :size="size"
-                :disable-default-styles="true"
-                @click.stop
-              />
-            </template>
-
-            <template v-else>
-              <span
-                :class="placeholderStyles"
-                :disabled="disabled ? '' : null"
-              >
-                {{ placeholder }}
-              </span>
-            </template>
+            <span :class="placeholderStyles">{{ placeholder }}</span>
           </template>
         </template>
 
         <template v-else>
-          <template v-if="popoverState === 'open' && enableSearch">
-            <OrInput
-              ref="searchControl"
-              v-model="searchText"
-              :class="searchControlStyles"
-              :type="'search'"
-              :placeholder="'Search'"
-              :size="size"
-              :disable-default-styles="true"
-              @click.stop
-            />
+          <template v-if="!isEmptyModelValue">
+            <slot
+              name="valueTemplate"
+              :model="proxyModelValue"
+            >
+              <span class="truncate">
+                {{ selection && selection.label }}
+              </span>
+            </slot>
           </template>
 
           <template v-else>
-            <template v-if="!isEmptyModelValue">
-              <slot
-                name="valueTemplate"
-                :model="proxyModelValue"
-              >
-                <span class="truncate">
-                  {{ selection && selection.label }}
-                </span>
-              </slot>
-            </template>
-
-            <template v-else>
-              <span
-                :class="placeholderStyles"
-                :disabled="disabled ? '' : null"
-              >
-                {{ placeholder }}
-              </span>
-            </template>
+            <span :class="placeholderStyles">{{ placeholder }}</span>
           </template>
         </template>
       </div>
@@ -137,12 +84,12 @@
       </template>
 
       <div :class="['layout-inline-row', 'gap-sm']">
-        <template v-if="proxyModelValue && popoverState === 'closed'">
+        <template v-if="!multiple && proxyModelValue">
           <OrIconButton
             :icon="'close'"
             :color="'inherit'"
             :disabled="readonly || disabled"
-            @click.stop="$emit('update:modelValue', multiple ? [] : undefined)"
+            @click.stop="$emit('update:modelValue', undefined)"
           />
         </template>
 
@@ -160,16 +107,14 @@
         :full-width="true"
         :custom-styles="dropdownStyles"
         :disable-default-styles="true"
-        @open="focusSearchControl()"
-        @close="clearSearchControl()"
       >
-        <template v-if="isMobile">
+        <template v-if="enableSearch">
           <OrInput
-            ref="mobileSearchControl"
             v-model="searchText"
-            :class="searchControlStyles"
             :type="'search'"
             :placeholder="'Search'"
+            :size="'s'"
+            :disable-default-styles="true"
           />
         </template>
 
@@ -184,7 +129,6 @@
                 <OrMenuItem
                   v-for="(option, i) in group"
                   :key="i"
-                  :selected="proxyModelValue && proxyModelValue.includes(option.value)"
                 >
                   <slot
                     name="optionTemplate"
@@ -195,7 +139,7 @@
                       v-model="proxyModelValue"
                       :value="option.value"
                       :label="option.label"
-                      :label-variant="'menu-item'"
+                      :label-variant="'input'"
                     />
                   </slot>
                 </OrMenuItem>
@@ -205,8 +149,6 @@
                 <OrMenuItem
                   v-for="(option, i) in group"
                   :key="i"
-                  :class="dropdownItemStyles"
-                  :selected="proxyModelValue === option.value"
                   @click.stop="proxyModelValue = option.value; close()"
                 >
                   <slot
@@ -226,13 +168,12 @@
               <OrMenuItem
                 v-for="(option, i) in resolvedSearchOptions"
                 :key="i"
-                :selected="proxyModelValue && proxyModelValue.includes(option.value)"
               >
                 <OrCheckbox
                   v-model="proxyModelValue"
                   :value="option.value"
                   :label="option.label"
-                  :label-variant="'menu-item'"
+                  :label-variant="'input'"
                 >
                   <slot
                     name="optionTemplate"
@@ -247,8 +188,6 @@
               <OrMenuItem
                 v-for="(option, i) in resolvedSearchOptions"
                 :key="i"
-                :class="dropdownItemStyles"
-                :selected="proxyModelValue === option.value"
                 @click.stop="proxyModelValue = option.value; close()"
               >
                 <slot
@@ -298,7 +237,7 @@
 <script lang="ts">
 import { computed, defineComponent, getCurrentInstance, onMounted, PropType, ref, toRef, watch } from 'vue-demi';
 import { DropdownClose, DropdownOpen } from '../../directives';
-import { useOverflow, useProxyModelValue, useResponsive } from '../../hooks';
+import { useOverflow, useProxyModelValue } from '../../hooks';
 import { isEmptyValue } from '../../utils/isEmptyValue';
 import { OrCheckboxV3 as OrCheckbox } from '../or-checkbox-v3';
 import { OrErrorV3 as OrError } from '../or-error-v3';
@@ -313,10 +252,12 @@ import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
 import { OrTagV3 as OrTag } from '../or-tag-v3';
 import { SelectSize } from './props';
-import { Select, SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectDropdownItem, SelectNoSearchResults, SelectPlaceholder, SelectSearchControl } from './styles';
+import { SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectNoSearchResults, SelectPlaceholder, SelectRoot } from './styles';
 import { SelectGroupByFunction, SelectOption, SelectSearchFunction } from './types';
 
 export default defineComponent({
+  name: 'OrSelect',
+
   components: {
     OrCheckbox,
     OrError,
@@ -451,9 +392,6 @@ export default defineComponent({
 
     const control = ref<HTMLElement>();
 
-    const searchControl = ref<HTMLElement>();
-    const mobileSearchControl = ref<HTMLElement>();
-
     const popover = ref<InstanceType<typeof OrPopover>>();
     const popoverRoot = computed(() => popover.value?.root);
     const popoverState = computed(() => popover.value?.state);
@@ -461,17 +399,13 @@ export default defineComponent({
     // Styles
     const rootStyles = computed(() => [
       'or-select-v3',
-      ...Select,
+      ...SelectRoot,
     ]);
 
     const controlStyles = computed(() => [
       ...SelectControl,
     ]);
 
-    const searchControlStyles = computed(() => [
-      ...SelectSearchControl,
-    ]);
-
     const placeholderStyles = computed(() => [
       ...SelectPlaceholder,
     ]);
@@ -481,10 +415,6 @@ export default defineComponent({
       ...popover.value?.isFlipped ? SelectDropdownFlipped : SelectDropdownDefault,
     ]);
 
-    const dropdownItemStyles = computed(() => [
-      ...SelectDropdownItem,
-    ]);
-
     const noSearchResultsStyles = computed(() => [
       ...SelectNoSearchResults,
     ]);
@@ -512,9 +442,7 @@ export default defineComponent({
       const modelValue = proxyModelValue.value;
 
       if (Array.isArray(modelValue)) {
-        return modelValue
-          .map((value) => props.options.find((option) => option.value === value))
-          .filter((value) => !!value);
+        return modelValue.map((value) => props.options.find((option) => option.value === value));
       }
 
       return props.options.find((option) => option.value === modelValue);
@@ -593,41 +521,20 @@ export default defineComponent({
       }
     }
 
-    function focusSearchControl(): void {
-      setTimeout(() => {
-        if (isMobile.value) {
-          mobileSearchControl.value?.focus();
-        } else {
-          searchControl.value?.focus();
-        }
-      });
-    }
-
-    function clearSearchControl(): void {
-      searchText.value = '';
-    }
-
     const { innerItems, outerItems } = useOverflow(control);
 
-    // Utils
-    const { isMobile } = useResponsive();
-
     return {
       root,
       inputBox,
       inputBoxRoot,
       control,
-      searchControl,
-      mobileSearchControl,
       popover,
       popoverRoot,
       popoverState,
       rootStyles,
       controlStyles,
-      searchControlStyles,
       placeholderStyles,
       dropdownStyles,
-      dropdownItemStyles,
       noSearchResultsStyles,
       controlId,
       proxyModelValue,
@@ -641,11 +548,8 @@ export default defineComponent({
       toggle,
       close,
       deselect,
-      focusSearchControl,
-      clearSearchControl,
       innerItems,
       outerItems,
-      isMobile,
     };
   },
 });

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

@@ -1,4 +1,4 @@
-export const Select: string[] = [
+export const SelectRoot: string[] = [
   // Layout
   'layout-column',
 
@@ -23,15 +23,6 @@ export const SelectControl: string[] = [
   'typography-inherit',
 ];
 
-export const SelectSearchControl: string[] = [
-  // Layout
-  'grow',
-
-  // Spacing
-  '!mx-lg md:!mx-none',
-  '!my-sm md:!my-none',
-];
-
 export const SelectPlaceholder: string[] = [
   // Theme
   'theme-foreground-outline',
@@ -75,14 +66,6 @@ export const SelectDropdownFlipped: string[] = [
   '!border-b-0',
 ];
 
-export const SelectDropdownItem: string[] = [
-  // Typography
-  '!typography-body-2-regular',
-
-  // Typography (selected)
-  'selected:!typography-body-2-semibold',
-];
-
 export const SelectNoSearchResults: string[] = [
   // Layout
   'layout-row justify-center',

package/src/components/or-toast/constants.ts

@@ -1,21 +1,21 @@
 export enum PositionsX {
   right = 'right',
   left = 'left',
-  center = 'center'
+  center = 'center',
 }
 
 export enum PositionsY {
   top = 'top',
-  bottom = 'bottom'
+  bottom = 'bottom',
 }
 
 export enum TransitionType {
   slide = 'slide',
-  fade = 'fade'
+  fade = 'fade',
 }
 
 export enum ToastType {
   success='success',
   error='error',
-  loading='loading'
+  loading='loading',
 }

package/src/directives/dropdown-close.ts

@@ -2,6 +2,9 @@ import { DirectiveBinding, DirectiveHook, isVue3 } from 'vue-demi';
 
 const created: DirectiveHook = (element: HTMLElement, binding: DirectiveBinding<(event: Event) => void>) => {
   element.addEventListener('keydown', (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+
     if (['Escape'].includes(event.key)) {
       binding.value(event);
     }

package/src/directives/dropdown-open.ts

@@ -2,14 +2,17 @@ import { DirectiveBinding, DirectiveHook, isVue3 } from 'vue-demi';
 
 const created: DirectiveHook = (element: HTMLElement, binding: DirectiveBinding<(event: Event) => void>) => {
   element.addEventListener('keydown', (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+
     if (['Enter', ' '].includes(event.key)) {
       binding.value(event);
     }
   });
 
   element.addEventListener('click', (event) => {
-    event.stopPropagation();
     event.preventDefault();
+    event.stopPropagation();
 
     binding.value(event);
   });

package/dist/bundled/v2/components/OrSelect/stories.helpers.d.ts

@@ -1,6 +0,0 @@
-import { Option } from './types';
-export declare function getTestOption(): Option;
-export declare function getLongTestOption(): Option;
-export declare function searchInOptions(search: string, options: Option[]): Option[];
-export declare function getSlotLabel(value: string, options: Option[]): string;
-export declare function getSlotOptionStyle(isActive: boolean): Record<string, string>;

package/dist/bundled/v3/components/OrSelect/stories.helpers.d.ts

@@ -1,6 +0,0 @@
-import { Option } from './types';
-export declare function getTestOption(): Option;
-export declare function getLongTestOption(): Option;
-export declare function searchInOptions(search: string, options: Option[]): Option[];
-export declare function getSlotLabel(value: string, options: Option[]): string;
-export declare function getSlotOptionStyle(isActive: boolean): Record<string, string>;

package/dist/esm/v2/components/or-select/stories.helpers.d.ts

@@ -1,6 +0,0 @@
-import { Option } from './types';
-export declare function getTestOption(): Option;
-export declare function getLongTestOption(): Option;
-export declare function searchInOptions(search: string, options: Option[]): Option[];
-export declare function getSlotLabel(value: string, options: Option[]): string;
-export declare function getSlotOptionStyle(isActive: boolean): Record<string, string>;

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

@@ -1,6 +0,0 @@
-import { Option } from './types';
-export declare function getTestOption(): Option;
-export declare function getLongTestOption(): Option;
-export declare function searchInOptions(search: string, options: Option[]): Option[];
-export declare function getSlotLabel(value: string, options: Option[]): string;
-export declare function getSlotOptionStyle(isActive: boolean): Record<string, string>;

package/src/components/or-avatar/OrAvatar.stories.ts

@@ -1,44 +0,0 @@
-import OrAvatar from './OrAvatar.vue';
-import { OR_AVATAR_SIZE } from './constants';
-import { ArgTypes, Story } from '@storybook/vue';
-
-export default {
-  title: 'Components/OrAvatar',
-
-  component: OrAvatar,
-
-  argTypes: {
-    size: {
-      control: 'select',
-      options: Object.values(OR_AVATAR_SIZE),
-    },
-  },
-};
-
-const defaultTemplate = '<or-avatar v-bind="$props"/>';
-
-const defaultMixin = (argTypes: ArgTypes) => ({
-  props: Object.keys(argTypes),
-
-  components: { OrAvatar },
-});
-
-const Template: Story = (_args, { argTypes }) => ({
-  mixins: [defaultMixin(argTypes)],
-  template: defaultTemplate,
-});
-
-export const Default = Template.bind({});
-Default.args = {};
-
-export const Large = Template.bind({});
-Large.args = { size: OR_AVATAR_SIZE.LARGE };
-
-export const WithSrc = Template.bind({});
-WithSrc.args = { src: 'https://onereach.gitlab.io/platform/ui-next/or-favicon.ico' };
-
-export const InvalidSrc = Template.bind({});
-InvalidSrc.args = { src: 'invalid' };
-
-export const WithIcon = Template.bind({});
-WithIcon.args = { icon: 'face' };