@onereach/ui-components 5.2.2 → 5.2.3-beta.3178.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "5.2.2",
+  "version": "5.2.3-beta.3178.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -156,6 +156,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "6708e2cad0bfb997315b7a072bc1450bd17e2eb2"
+  }
 }

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

@@ -47,8 +47,8 @@
               <OrTag
                 v-for="option in selection"
                 :key="option.value"
-                :variant="'reset'"
-                :disabled="disabled || readonly"
+                :variant="readonly || disabled ? 'tag' : 'reset'"
+                :disabled="disabled"
                 @reset="deselect(option)"
               >
                 {{ option.label }}
@@ -57,12 +57,9 @@
           </template>
 
           <template v-else-if="popoverState === 'closed' || !enableSearch">
-            <span
-              :class="placeholderStyles"
-              :disabled="disabled ? '' : null"
-            >
+            <OrSelectPlaceholder :disabled="disabled">
               {{ placeholder }}
-            </span>
+            </OrSelectPlaceholder>
           </template>
         </template>
 
@@ -79,12 +76,9 @@
           </template>
 
           <template v-else-if="popoverState === 'closed' || !enableSearch">
-            <span
-              :class="placeholderStyles"
-              :disabled="disabled ? '' : null"
-            >
+            <OrSelectPlaceholder :disabled="disabled">
               {{ placeholder }}
-            </span>
+            </OrSelectPlaceholder>
           </template>
         </template>
       </div>
@@ -285,8 +279,9 @@ import { OrLabelV3 as OrLabel } from '../or-label-v3';
 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 OrSelectPlaceholder from './partials/or-select-placeholder/OrSelectPlaceholder.vue';
 import { SelectSize } from './props';
-import { Select, SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectDropdownItem, SelectNoSearchResults, SelectPlaceholder, SelectSearchControl } from './styles';
+import { Select, SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectDropdownItem, SelectNoSearchResults, SelectSearchControl } from './styles';
 import { SelectGroupByFunction, SelectOption, SelectSearchFunction } from './types';
 
 export default defineComponent({
@@ -302,6 +297,7 @@ export default defineComponent({
     OrLabel,
     OrMenuItem,
     OrPopover,
+    OrSelectPlaceholder,
     OrTag,
   },
 
@@ -457,10 +453,6 @@ export default defineComponent({
       ...SelectSearchControl,
     ]);
 
-    const placeholderStyles = computed(() => [
-      ...SelectPlaceholder,
-    ]);
-
     const dropdownStyles = computed(() => [
       ...SelectDropdown,
       ...popover.value?.isFlipped ? SelectDropdownFlipped : SelectDropdownDefault,
@@ -610,7 +602,6 @@ export default defineComponent({
       rootStyles,
       controlStyles,
       searchControlStyles,
-      placeholderStyles,
       dropdownStyles,
       dropdownItemStyles,
       noSearchResultsStyles,

package/src/components/or-select-v3/partials/or-select-placeholder/OrSelectPlaceholder.vue

@@ -0,0 +1,43 @@
+<template>
+  <div
+    ref="root"
+    :class="rootStyles"
+    :disabled="disabled ? '' : null"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue-demi';
+import { SelectPlaceholder } from './styles';
+
+export default defineComponent({
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  expose: [
+    'root',
+  ],
+
+  setup() {
+    // Refs
+    const root = ref<HTMLElement>();
+
+    // Styles
+    const rootStyles = computed(() => [
+      'or-select-placeholder-v3',
+      ...SelectPlaceholder,
+    ]);
+
+    return {
+      root,
+      rootStyles,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,11 @@
+export const SelectPlaceholder: string[] = [
+  // Interactivity
+  'interactivity-none',
+
+  // Typography
+  'typography-inherit truncate',
+
+  // Theme
+  'theme-foreground-outline',
+  'dark:theme-foreground-outline-dark',
+];

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

@@ -32,18 +32,6 @@ export const SelectSearchControl: string[] = [
   '!my-sm md:!my-none',
 ];
 
-export const SelectPlaceholder: string[] = [
-  // Theme
-  'theme-foreground-outline',
-  'dark:theme-foreground-outline-dark',
-
-  // Interactivity
-  'select-none',
-
-  // Typography
-  'truncate',
-];
-
 export const SelectDropdown: string[] = [
   // Overflow
   'overflow-y-auto',