@onereach/ui-components 7.0.0 → 7.0.1-beta.3529.0

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

@@ -18,21 +18,36 @@ export const Tags: string[] = [
 export const TagsContainer: string[] = [
   // Layout
   'layout-row',
+  'max-w-full',
 
   // Spacing
   'gap-sm',
+  'py-xs',
 ];
 
 export const TagsContainerOverflows: Record<TagsOverflow, string[]> = {
+  // todo: remove in next braking release
+  // @deprecated use Hidden instead
   [TagsOverflow.Default]: [
     // Overflow
     'overflow-hidden',
   ],
 
+  [TagsOverflow.Hidden]: [
+    // Overflow
+    'overflow-hidden',
+  ],
+
   [TagsOverflow.Wrap]: [
     // Layout
     '!flex-wrap',
   ],
+  [TagsOverflow.Scroll]: [
+    // Layout
+    'overflow-y-auto',
+    // todo: extract to plugin?
+    '[&::-webkit-scrollbar]:hidden [-ms-overflow-style:\'none\'] [scrollbar-width:\'none\']',
+  ],
 };
 
 export const TagsOverflowButton: string[] = [
@@ -42,10 +57,10 @@ export const TagsOverflowButton: string[] = [
 
 export const TagsOverflowPopover: string[] = [
   // Layout
-  'layout-row !flex-wrap',
+  'layout-row !flex-wrap !content-start overflow-y-auto',
 
   // Box
-  'max-w-[192px]',
+  'max-w-[192px] max-h-[340px]',
 
   // Spacing
   'px-md',

package/src/components/or-tags-v3/types.ts

@@ -0,0 +1,6 @@
+export type SimpleTag = string;
+export type Tag = SimpleTag | TagObject;
+export interface TagObject {
+  label: string;
+  value: string | number | object;
+}

package/src/components/or-tags-v3/utils/castToTag.ts

@@ -0,0 +1,11 @@
+import { Tag, TagObject } from '../types';
+export function castToTagObject(tag: Tag): TagObject {
+  if (typeof tag === 'string') {
+    return {
+      label: tag,
+      value: tag,
+    };
+  } else {
+    return tag;
+  }
+}

package/src/hooks/useOverflow.ts

@@ -7,7 +7,13 @@ export interface Overflow {
   outerItems: Ref<HTMLElement[]>;
 }
 
-export function useOverflow(container: MaybeElementRef<HTMLElement | undefined>): Overflow {
+export interface UseOverflowOptions {
+  hide?: boolean;
+}
+export function useOverflow(
+  container: MaybeElementRef<HTMLElement | undefined>,
+  options: UseOverflowOptions = { hide: true },
+): Overflow {
   const containerRef = isRef(container) ? container : ref(container);
 
   // State
@@ -26,14 +32,18 @@ export function useOverflow(container: MaybeElementRef<HTMLElement | undefined>)
         const { x: containerOffset, width: containerWidth } = container.getBoundingClientRect();
 
         if (itemOffset + itemWidth > containerOffset + containerWidth) {
-          item.style.setProperty('visibility', 'hidden');
+          if (options.hide) {
+            item.style.setProperty('visibility', 'hidden');
+          }
 
           return {
             innerItems,
             outerItems: [...outerItems, item],
           };
         } else {
-          item.style.removeProperty('visibility');
+          if (options.hide) {
+            item.style.removeProperty('visibility');
+          }
 
           return {
             innerItems: [...innerItems, item],

package/dist/bundled/v3/OrSelect.vue_vue_type_script_lang-d1d57fd5.js

@@ -1,352 +0,0 @@
-import { defineComponent, ref, computed, getCurrentInstance, toRefs, onMounted, watch } from 'vue-demi';
-import { isEmptyValue } from './utils/isEmptyValue.js';
-import { openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
-import { Select, SelectControl, SelectSearchControl, SelectDropdown, SelectDropdownFlipped, SelectDropdownDefault, SelectDropdownItem, SelectNoSearchResults } from './components/OrSelectV3/styles.js';
-import './components/OrCheckboxV3/OrCheckbox.js';
-import './components/OrErrorV3/OrError.js';
-import './components/OrExpansionPanelV3/OrExpansionPanel.js';
-import { s as script$4 } from './OrExpansionPanel.vue_vue_type_script_lang-d7c2d142.js';
-import './components/OrHintV3/OrHint.js';
-import './components/OrIconV3/OrIcon.js';
-import './components/OrIconButtonV3/OrIconButton.js';
-import './components/OrInputV3/OrInput.js';
-import './components/OrInputBoxV3/OrInputBox.js';
-import './components/OrLabelV3/OrLabel.js';
-import './components/OrMenuItemV3/OrMenuItem.js';
-import './components/OrPopoverV3/OrPopover.js';
-import './components/OrTagV3/OrTag.js';
-import { s as script$d } from './OrTag.vue_vue_type_script_lang-e4811b42.js';
-import { useOverflow } from './hooks/useOverflow.js';
-import { s as script$2 } from './OrCheckbox.vue_vue_type_script_lang-cdc466f7.js';
-import { s as script$3 } from './OrError.vue_vue_type_script_lang-fcf91781.js';
-import { s as script$5 } from './OrHint.vue_vue_type_script_lang-0ab8b932.js';
-import { s as script$6 } from './OrIcon.vue_vue_type_script_lang-bc674d9e.js';
-import { s as script$7 } from './OrIconButton.vue_vue_type_script_lang-a35c30ce.js';
-import { s as script$8 } from './OrInput.vue_vue_type_script_lang-bea5b267.js';
-import { s as script$9 } from './OrInputBox.vue_vue_type_script_lang-137cb650.js';
-import { s as script$a } from './OrLabel.vue_vue_type_script_lang-e2bcff17.js';
-import { s as script$b } from './OrMenuItem.vue_vue_type_script_lang-1e9ee207.js';
-import { s as script$c } from './OrPopover.vue_vue_type_script_lang-2462c31d.js';
-import { DropdownClose } from './directives/dropdown-close.js';
-import { DropdownOpen } from './directives/dropdown-open.js';
-import { InputBoxSize } from './components/OrInputBoxV3/props.js';
-import { useProxyModelValue } from './hooks/useProxyModelValue.js';
-import useResponsive from './hooks/useResponsive/useResponsive.js';
-
-const SelectPlaceholder = [
-// Interactivity
-'interactivity-default',
-// Typography
-'typography-inherit truncate',
-// Theme
-'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
-
-var script$1 = defineComponent({
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  expose: ['root'],
-  setup() {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-select-placeholder-v3', ...SelectPlaceholder]);
-    return {
-      root,
-      rootStyles
-    };
-  }
-});
-
-const _hoisted_1 = ["disabled"];
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    ref: "root",
-    class: normalizeClass(_ctx.rootStyles),
-    disabled: _ctx.disabled ? '' : null
-  }, [renderSlot(_ctx.$slots, "default")], 10 /* CLASS, PROPS */, _hoisted_1);
-}
-
-script$1.render = render;
-script$1.__file = "src/components/or-select-v3/partials/or-select-placeholder/OrSelectPlaceholder.vue";
-
-var script = defineComponent({
-  components: {
-    OrCheckbox: script$2,
-    OrError: script$3,
-    OrExpansionPanel: script$4,
-    OrHint: script$5,
-    OrIcon: script$6,
-    OrIconButton: script$7,
-    OrInput: script$8,
-    OrInputBox: script$9,
-    OrLabel: script$a,
-    OrMenuItem: script$b,
-    OrPopover: script$c,
-    OrSelectPlaceholder: script$1,
-    OrTag: script$d
-  },
-  directives: {
-    DropdownClose,
-    DropdownOpen
-  },
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue'
-  },
-  props: {
-    options: {
-      type: Array,
-      default: () => []
-    },
-    searchOptions: {
-      type: Array,
-      default: () => []
-    },
-    modelValue: {
-      type: [Object, String, Number, Array],
-      default: undefined
-    },
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-    size: {
-      type: String,
-      default: InputBoxSize.M
-    },
-    label: {
-      type: String,
-      default: undefined
-    },
-    placeholder: {
-      type: String,
-      default: undefined
-    },
-    searchPlaceholder: {
-      type: String,
-      default: undefined
-    },
-    hint: {
-      type: String,
-      default: undefined
-    },
-    error: {
-      type: [String, Boolean],
-      default: undefined
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false
-    },
-    enableSearch: {
-      type: Boolean,
-      default: false
-    },
-    enableClear: {
-      type: Boolean,
-      default: false
-    },
-    searchFunction: {
-      type: Function,
-      default: async (searchText, options) => {
-        return options.filter(_ref => {
-          let {
-            label
-          } = _ref;
-          return label.toLowerCase().includes(searchText.toLowerCase());
-        });
-      }
-    },
-    groupByFunction: {
-      type: Function,
-      default: undefined
-    },
-    externalControl: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['update:modelValue', 'focus', 'blur', 'search'],
-  expose: ['root'],
-  setup(props, context) {
-    var _a;
-    const currentInstance = getCurrentInstance();
-    // Refs
-    const root = ref();
-    const inputBox = ref();
-    const inputBoxRoot = computed(() => {
-      var _a;
-      return (_a = inputBox.value) === null || _a === void 0 ? void 0 : _a.root;
-    });
-    const control = ref();
-    const searchControl = ref();
-    const popover = ref();
-    const popoverRoot = computed(() => {
-      var _a;
-      return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.root;
-    });
-    const popoverState = computed(() => {
-      var _a;
-      return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
-    });
-    // Props
-    const {
-      enableClear,
-      modelValue
-    } = toRefs(props);
-    // Styles
-    const rootStyles = computed(() => ['or-select-v3', ...Select]);
-    const controlStyles = computed(() => [...SelectControl]);
-    const searchControlStyles = computed(() => [...SelectSearchControl]);
-    const dropdownStyles = computed(() => {
-      var _a;
-      return [...SelectDropdown, ...(((_a = popover.value) === null || _a === void 0 ? void 0 : _a.isFlipped) ? SelectDropdownFlipped : SelectDropdownDefault)];
-    });
-    const dropdownItemStyles = computed(() => [...SelectDropdownItem]);
-    const noSearchResultsStyles = computed(() => [...SelectNoSearchResults]);
-    // State
-    const controlId = ref((_a = context.attrs.id) !== null && _a !== void 0 ? _a : currentInstance.uid.toString());
-    const proxyModelValue = useProxyModelValue(modelValue, context.emit);
-    const isEmptyModelValue = computed(() => {
-      return Array.isArray(proxyModelValue.value) ? proxyModelValue.value.length === 0 : isEmptyValue(proxyModelValue.value);
-    });
-    const showClear = computed(() => {
-      return enableClear.value && !isEmptyModelValue.value;
-    });
-    onMounted(() => {
-      if (!proxyModelValue.value && props.multiple) {
-        proxyModelValue.value = [];
-      }
-    });
-    const readonly = computed(() => context.attrs.readonly);
-    const selection = computed(() => {
-      const modelValue = proxyModelValue.value;
-      if (Array.isArray(modelValue)) {
-        return modelValue.map(value => props.options.find(option => option.value === value)).filter(value => !!value);
-      }
-      return props.options.find(option => option.value === modelValue);
-    });
-    const internalSearchOptions = ref(props.options);
-    const resolvedSearchOptions = computed(() => {
-      return props.externalControl ? props.searchOptions : internalSearchOptions.value;
-    });
-    const searchText = ref('');
-    watch([() => props.externalControl, searchText, () => props.options], async _ref2 => {
-      let [externalControl, searchText, options] = _ref2;
-      if (externalControl) {
-        context.emit('search', searchText);
-      } else {
-        internalSearchOptions.value = await props.searchFunction(searchText, options);
-      }
-    }, {
-      deep: true
-    });
-    const groupedOptions = computed(() => {
-      const groupBy = props.groupByFunction;
-      if (groupBy) {
-        return internalSearchOptions.value.reduce((accumulator, option) => {
-          var _a;
-          const group = groupBy(option);
-          return {
-            ...accumulator,
-            [group]: [...((_a = accumulator[group]) !== null && _a !== void 0 ? _a : []), option]
-          };
-        }, {});
-      }
-      return {
-        '': props.options
-      };
-    });
-    // Methods
-    function toggle() {
-      if (!readonly.value && !props.disabled) {
-        const popoverInstance = popover.value;
-        if (popoverInstance) {
-          if (popoverState.value === 'open') {
-            popoverInstance.close();
-          } else {
-            popoverInstance.open();
-          }
-        }
-      }
-    }
-    function close() {
-      const popoverInstance = popover.value;
-      if (popoverInstance) {
-        popoverInstance.close();
-      }
-    }
-    function deselect(option) {
-      const modelValue = proxyModelValue.value;
-      if (Array.isArray(modelValue)) {
-        proxyModelValue.value = modelValue.filter(value => value !== option.value);
-      }
-    }
-    function clearSearchControl() {
-      searchText.value = '';
-    }
-    const {
-      innerItems,
-      outerItems
-    } = useOverflow(control);
-    // Utils
-    const {
-      isDesktop,
-      isMobile
-    } = useResponsive();
-    // Effects
-    watch(searchControl, control => {
-      setTimeout(() => {
-        control === null || control === void 0 ? void 0 : control.focus();
-      });
-    });
-    return {
-      root,
-      inputBox,
-      inputBoxRoot,
-      control,
-      searchControl,
-      popover,
-      popoverRoot,
-      popoverState,
-      rootStyles,
-      controlStyles,
-      searchControlStyles,
-      dropdownStyles,
-      dropdownItemStyles,
-      noSearchResultsStyles,
-      controlId,
-      proxyModelValue,
-      readonly,
-      isEmptyModelValue,
-      showClear,
-      selection,
-      searchText,
-      internalSearchOptions,
-      resolvedSearchOptions,
-      groupedOptions,
-      toggle,
-      close,
-      deselect,
-      clearSearchControl,
-      innerItems,
-      outerItems,
-      isDesktop,
-      isMobile
-    };
-  }
-});
-
-export { script as s };