@onereach/ui-components 8.24.1-beta.4148.0 → 8.24.1-beta.4149.0

package/src/components/or-editor-tabs-v3/styles.ts

@@ -0,0 +1,51 @@
+import { EditorTabsOverflow } from './props';
+
+export const EditorTabs: string[] = [];
+
+export const EditorTabsHeader: string[] = [
+  // Layout
+  'layout-row',
+
+  // Theme
+  'theme-border-underline',
+
+  'theme-border-1-outline-variant',
+  'dark:theme-border-1-outline-variant-dark',
+
+  'theme-divider-outline-variant',
+  'dark:theme-divider-outline-variant-dark',
+];
+
+export const EditorTabsHeaderTabs: string[] = [
+  // Layout
+  'layout-row grow md:grow-0',
+
+  // Box
+  'max-w-full',
+
+  // Theme
+  'theme-divider-outline-variant',
+  'dark:theme-divider-outline-variant-dark',
+];
+
+export const EditorTabsHeaderTabsOverflows: Record<EditorTabsOverflow, string[]> = {
+  [EditorTabsOverflow.Scroll]: [
+    // Overflow
+    'overflow-x-auto scrollbar-hidden',
+  ],
+
+  [EditorTabsOverflow.Wrap]: [
+    // Layout
+    'flex-wrap',
+  ],
+};
+
+export const EditorTabsContent: string[] = [
+  // Spacing
+  'px-md',
+  'py-md',
+
+  // Theme
+  'theme-background-surface-1',
+  'dark:theme-background-surface-1-dark',
+];

package/src/components/or-menu-item-v3/OrMenuItem.vue

@@ -13,22 +13,32 @@
       <OrIcon v-bind="typeof icon === 'string' ? { icon } : icon" />
     </template>
 
-    <div :class="['truncate', 'w-full']">
+    <div :class="['truncate']">
       <slot />
     </div>
+
+    <template v-if="closeButton">
+      <div :class="['grow']" />
+
+      <OrIconButton
+        :icon="'close'"
+        :disabled="disabled"
+        @click.stop="$emit('close')"
+      />
+    </template>
   </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import { MenuItemRoot } from './styles';
+import { MenuItem } from './styles';
 
 export default defineComponent({
-  name: 'OrMenuItem',
-
   components: {
     OrIcon,
+    OrIconButton,
   },
 
   props: {
@@ -37,6 +47,11 @@ export default defineComponent({
       default: undefined,
     },
 
+    closeButton: {
+      type: Boolean,
+      default: false,
+    },
+
     selected: {
       type: Boolean,
       default: false,
@@ -52,6 +67,8 @@ export default defineComponent({
     'click',
     'focus',
     'blur',
+
+    'close',
   ],
 
   expose: [
@@ -65,7 +82,7 @@ export default defineComponent({
     // Styles
     const rootStyles = computed(() => [
       'or-menu-item-v3',
-      ...MenuItemRoot,
+      ...MenuItem,
     ]);
 
     return {

package/src/components/or-menu-item-v3/styles.ts

@@ -1,4 +1,4 @@
-export const MenuItemRoot: string[] = [
+export const MenuItem: string[] = [
   // Layout
   'layout-row',
 

package/src/components/or-select-v3/partials/or-select-multiple-control/OrSelectMultipleControl.vue

@@ -16,7 +16,9 @@
       :overflow="overflow"
       @reset="$emit('reset', $event)"
     >
-      <template v-slot:tag="{item}">
+      <template
+        v-slot:tag="{item}"
+      >
         <slot
           name="tag"
           :item="item"
@@ -24,7 +26,6 @@
           {{ item.label }}
         </slot>
       </template>
-
       <template
         v-if="enableSearch"
         v-slot:tail
@@ -137,7 +138,6 @@ export default defineComponent({
 
     const searchControl = ref<InstanceType<typeof OrSelectControlInput>>();
     const tags = ref<InstanceType<typeof OrTags>>();
-
     // Props
     const { modelValue, model, options, overflow } = toRefs(props);
 

package/src/components/or-select-v3/partials/or-select-single-control/OrSelectSingleControl.vue

@@ -3,26 +3,26 @@
     ref="root"
     :class="rootStyles"
   >
-    <template v-if="isOpen && enableSearch">
+    <template v-if="!isEmpty && !isOpen">
+      <span class="truncate">
+        {{ selectionLabel }}
+      </span>
+    </template>
+
+    <template v-else>
       <OrSelectControlInput
+        v-if="enableSearch"
         ref="searchControl"
         v-model="searchModelValue"
         :placeholder="isEmpty ? placeholder : selectionLabel"
       />
-    </template>
 
-    <template v-else>
-      <template v-if="isEmpty">
-        <OrSelectPlaceholder :disabled="disabled">
-          {{ placeholder }}
-        </OrSelectPlaceholder>
-      </template>
-
-      <template v-else>
-        <span class="truncate">
-          {{ selectionLabel }}
-        </span>
-      </template>
+      <OrSelectPlaceholder
+        v-else
+        :disabled="disabled"
+      >
+        {{ placeholder }}
+      </OrSelectPlaceholder>
     </template>
   </div>
 </template>
@@ -105,7 +105,6 @@ export default defineComponent({
 
     // State
     const searchModelValue = useProxyModelValue(modelValue, context.emit);
-
     const isEmpty = computed(() => {
       return isEmptyValue(model.value);
     });

package/src/components/or-sidebar-v3/OrSidebar.vue

@@ -1,6 +1,6 @@
 <template>
   <OrResizeablePanel
-    :is-open="isOpen"
+    :is-open="state === 'open'"
     :width="width"
     :min-width="proxyMinWidth"
     :max-width="proxyMaxWidth"

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

@@ -2,6 +2,7 @@ export interface TabsItem {
   value: string | number;
   label: string;
 
+  pinned?: boolean;
   invalid?: boolean;
   disabled?: boolean;
 }