@onereach/ui-components 11.11.2-beta.4502.0 → 11.11.2-beta.4503.0

package/dist/esm/v3/components/or-list-v3/index.js

@@ -1,5 +1,5 @@
-export { s as OrListV3 } from '../../OrList-769c6101.js';
-export { s as OrListItem } from '../../OrListItem-12fa8abd.js';
+export { s as OrListV3 } from '../../OrList-7897e5c3.js';
+export { s as OrListItem } from '../../OrListItem-63389e98.js';
 import 'sortablejs';
 import 'uuid';
 import 'vue-demi';
@@ -11,11 +11,9 @@ import '@vueuse/core';
 import '../../useProxyModelValue-940010d2.js';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
-import '../../OrButton-31bcb511.js';
-import '../../OrLoader-5e2f359b.js';
-import 'vue';
 import '../../OrIconButton-cf4f2cba.js';
 import '../../OrIcon-9aff520e.js';
+import 'vue';
 import '../../OrTooltip-267c4385.js';
 import '../../usePopoverState-5f2cd96f.js';
 import '../../OrPopover-9dbe237b.js';

package/dist/esm/v3/components/or-list-v3/partials/index.js

@@ -1,3 +1,3 @@
-export { s as OrListItem } from '../../../OrListItem-12fa8abd.js';
+export { s as OrListItem } from '../../../OrListItem-63389e98.js';
 import 'vue-demi';
 import 'vue';

package/dist/esm/v3/components/or-list-v3/partials/or-list-item/OrListItem.vue.d.ts

@@ -1,13 +1,13 @@
 declare const _default: import("vue-demi").DefineComponent<{
-    draggable: {
+    selected: {
         type: BooleanConstructor;
         default: boolean;
     };
-    selected: {
+    disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
-    disabled: {
+    draggable: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -16,21 +16,21 @@ declare const _default: import("vue-demi").DefineComponent<{
     rootStyles: import("vue-demi").ComputedRef<string[]>;
     contentStyles: import("vue-demi").ComputedRef<string[]>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    draggable: {
+    selected: {
         type: BooleanConstructor;
         default: boolean;
     };
-    selected: {
+    disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
-    disabled: {
+    draggable: {
         type: BooleanConstructor;
         default: boolean;
     };
 }>>, {
-    draggable: boolean;
     selected: boolean;
     disabled: boolean;
+    draggable: boolean;
 }>;
 export default _default;

package/dist/esm/v3/components/or-list-v3/styles.d.ts

@@ -1,4 +1,2 @@
 export declare const List: string[];
-export declare const ListHeader: string[];
 export declare const ListContent: string[];
-export declare const ListFooter: string[];

package/dist/esm/v3/components/or-select-v3/OrSelect.vue.d.ts

@@ -114,7 +114,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     close: () => void;
     open: () => void;
     selectOption: (item: SelectItem) => void;
-    deselectOption: (item: SelectItem) => void;
+    deselectOption: (value: SelectItem['value']) => void;
     toggleOption: (item: SelectItem) => void;
     isDesktop: import("vue-demi").ComputedRef<boolean>;
     isMobile: import("vue-demi").ComputedRef<boolean>;

package/dist/esm/v3/components/or-select-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from '../../OrSelect-a88e236a.js';
+export { s as OrSelectV3 } from '../../OrSelect-fa01e6e5.js';
 import 'vue-demi';
 import '../../dropdown-open-06d651cf.js';
 import '../../include-2a81e823.js';

package/dist/esm/v3/index.js

@@ -73,8 +73,8 @@ export { L as LabelVariant, s as OrLabelV3 } from './OrLabel-4abbce6e.js';
 export { L as LinkColor, s as OrLinkV3 } from './OrLink-c83a51b2.js';
 export { s as OrList } from './OrList-1625c863.js';
 export { s as OrListOfInputs } from './OrListOfInputs-690c57bc.js';
-export { s as OrListV3 } from './OrList-769c6101.js';
-export { s as OrListItem } from './OrListItem-12fa8abd.js';
+export { s as OrListV3 } from './OrList-7897e5c3.js';
+export { s as OrListItem } from './OrListItem-63389e98.js';
 export { L as LoaderViews, s as OrLoader } from './OrLoader-d5a5b426.js';
 export { a as LoaderColor, b as LoaderSize, L as LoaderVariant, s as OrLoaderV3 } from './OrLoader-5e2f359b.js';
 export { s as OrMenuItemV3 } from './OrMenuItem-1f52a938.js';
@@ -106,7 +106,7 @@ export { s as OrSearch } from './OrSearch-740f931b.js';
 export { s as OrSearchV3 } from './OrSearch-f8cd6609.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-d81008ce.js';
 export { s as OrSelect } from './OrSelect-96f3a5ff.js';
-export { s as OrSelectV3 } from './OrSelect-a88e236a.js';
+export { s as OrSelectV3 } from './OrSelect-fa01e6e5.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-4ab42b93.js';
 export { s as OrSidebarV3, S as SidebarPlacement } from './props-12beda9e.js';
 export { s as OrSkeletonCircle } from './OrSkeletonCircle-66e175a0.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "11.11.2-beta.4502.0",
+  "version": "11.11.2-beta.4503.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,

package/src/components/or-list-v3/OrList.vue

@@ -4,43 +4,42 @@
     :class="rootStyles"
     :disabled="disabled"
   >
-    <template v-if="$slots['header'] || $slots['label'] || $slots['label-addon'] || label">
-      <div :class="headerStyles">
-        <slot
-          name="header"
-          :add-item="addItem"
-          :delete-item="deleteItem"
-        >
-          <OrLabel :disabled="disabled">
-            <slot name="label">
-              {{ label }}
-            </slot>
-
-            <template v-slot:addon>
-              <slot name="label-addon" />
-            </template>
-          </OrLabel>
+    <slot
+      name="header"
+
+      v-bind="{
+        addItem,
+        deleteItem
+      }"
+    >
+      <OrLabel :disabled="disabled">
+        <slot name="label">
+          {{ label }}
         </slot>
-      </div>
-    </template>
+
+        <template v-slot:addon>
+          <slot name="label-addon" />
+        </template>
+      </OrLabel>
+    </slot>
 
     <div
       :ref="'content'"
       :class="contentStyles"
     >
       <OrListItem
-        v-for="(item, index) in model"
+        v-for="(item, index) in proxyModelValue"
         :key="item.key || uuid()"
-        :draggable="canReorder"
         :selected="selection.includes(item)"
         :disabled="disabled"
+        :draggable="canReorder"
       >
         <div :class="['grow']">
           <slot
             v-bind="{
               item,
               index,
-              items: model,
+              items: proxyModelValue,
               addItem,
               deleteItem
             }"
@@ -59,27 +58,22 @@
       </OrListItem>
     </div>
 
-    <template v-if="$slots['footer'] || canAdd">
-      <div :class="footerStyles">
-        <slot
-          name="footer"
-          :add-item="addItem"
-          :delete-item="deleteItem"
-        >
-          <template v-if="canAdd">
-            <OrButton
-              :variant="'link'"
-              :disabled="disabled"
-              @click="addItem()"
-            >
-              <slot name="add-button">
-                <OrIcon :icon="'add'" /> {{ addButtonLabel }}
-              </slot>
-            </OrButton>
-          </template>
-        </slot>
-      </div>
-    </template>
+    <slot
+      name="footer"
+
+      v-bind="{
+        addItem,
+        deleteItem
+      }"
+    >
+      <template v-if="canAdd">
+        <OrIconButton
+          :icon="'add'"
+          :disabled="disabled"
+          @click="addItem()"
+        />
+      </template>
+    </slot>
   </div>
 </template>
 
@@ -88,20 +82,16 @@ import Sortable from 'sortablejs';
 import { v4 as uuid } from 'uuid';
 import { PropType, computed, defineComponent, ref, toRef, watch } from 'vue-demi';
 import { useProxyModelValue } from '../../hooks';
-import { OrButtonV3 as OrButton } from '../or-button-v3';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
-import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { OrLabelV3 as OrLabel } from '../or-label-v3';
 import { OrListItem } from './partials';
-import * as Styles from './styles';
+import { List, ListContent } from './styles';
 import { ListItem } from './types';
 
 export default defineComponent({
   name: 'OrList',
 
   components: {
-    OrButton,
-    OrIcon,
     OrIconButton,
     OrLabel,
     OrListItem,
@@ -133,9 +123,9 @@ export default defineComponent({
       default: undefined,
     },
 
-    addButtonLabel: {
-      type: String,
-      default: 'Add Item',
+    disabled: {
+      type: Boolean,
+      default: false,
     },
 
     canAdd: {
@@ -152,11 +142,6 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
-
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   emits: [
@@ -176,30 +161,22 @@ export default defineComponent({
   ],
 
   setup(props, context) {
-    // Refs & Styles
+    // Refs
     const root = ref<HTMLElement>();
+    const content = ref<HTMLElement>();
 
+    // Styles
     const rootStyles = computed(() => [
       'or-list-v3',
-      ...Styles.List,
+      ...List,
     ]);
 
-    const headerStyles = computed(() => [
-      ...Styles.ListHeader,
-    ]);
-
-    const content = ref<HTMLElement>();
-
     const contentStyles = computed(() => [
-      ...Styles.ListContent,
-    ]);
-
-    const footerStyles = computed(() => [
-      ...Styles.ListFooter,
+      ...ListContent,
     ]);
 
     // State
-    const model = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
     // Effects
     // #region Sortable
@@ -214,14 +191,14 @@ export default defineComponent({
           disabled: props.disabled,
 
           onUpdate: (event) => {
-            context.emit('before:reorder', model.value);
+            context.emit('before:reorder', proxyModelValue.value);
 
-            const nextModelValue = [...model.value];
+            const nextModelValue = [...proxyModelValue.value];
             const reorderedItem = nextModelValue.splice(event.oldIndex!, 1)[0];
 
             nextModelValue.splice(event.newIndex!, 0, reorderedItem);
 
-            context.emit('reorder', reorderedItem, event.newIndex, event.oldIndex, model.value = nextModelValue);
+            context.emit('reorder', reorderedItem, event.newIndex, event.oldIndex, proxyModelValue.value = nextModelValue);
           },
         });
       }
@@ -234,39 +211,66 @@ export default defineComponent({
 
     // Methods
     function addItem(): void {
-      context.emit('before:add', model.value);
+      context.emit('before:add', proxyModelValue.value);
 
       const addedItem = props.itemFactory();
-      const nextModelValue = [...model.value, addedItem];
+      const nextModelValue = [...proxyModelValue.value, addedItem];
 
-      context.emit('add', addedItem, nextModelValue.indexOf(addedItem), model.value = nextModelValue);
+      context.emit('add', addedItem, nextModelValue.indexOf(addedItem), proxyModelValue.value = nextModelValue);
     }
 
     function deleteItem(index: number): void {
-      context.emit('before:delete', model.value);
+      context.emit('before:delete', proxyModelValue.value);
 
-      const deletedItem = model.value[index];
-      const nextModelValue = model.value.filter((item) => item !== deletedItem);
+      const deletedItem = proxyModelValue.value[index];
+      const nextModelValue = proxyModelValue.value.filter((item) => item !== deletedItem);
 
-      context.emit('delete', deletedItem, index, model.value = nextModelValue);
+      context.emit('delete', deletedItem, index, proxyModelValue.value = nextModelValue);
     }
 
-    return {
-      root,
-      rootStyles,
+    // Handlers
+    // function onDragStart(event: DragEvent): void {
+    //   console.log('dragstart', event);
+    // }
 
-      headerStyles,
+    // function onDragEnter(event: DragEvent): void {
+    //   console.log('dragenter', event);
+    // }
 
+    // function onDragOver(event: DragEvent): void {
+    //   console.log('dragover', event);
+    // }
+
+    // function onDragLeave(event: DragEvent): void {
+    //   console.log('dragleave', event);
+    // }
+
+    // function onDragEnd(event: DragEvent): void {
+    //   console.log('dragend', event);
+    // }
+
+    // function onDrop(event: DragEvent): void {
+    //   console.log('drop', event);
+    // }
+
+    return {
+      root,
       content,
+      rootStyles,
       contentStyles,
 
-      footerStyles,
-
-      model,
+      proxyModelValue,
 
       addItem,
       deleteItem,
 
+      // onDragStart,
+      // onDragEnter,
+      // onDragOver,
+      // onDragLeave,
+      // onDragEnd,
+      // onDrop,
+
       uuid,
     };
   },

package/src/components/or-list-v3/partials/or-list-item/OrListItem.vue

@@ -23,26 +23,27 @@ export default defineComponent({
   name: 'OrListItem',
 
   props: {
-    draggable: {
+    selected: {
       type: Boolean,
       default: false,
     },
 
-    selected: {
+    disabled: {
       type: Boolean,
       default: false,
     },
 
-    disabled: {
+    draggable: {
       type: Boolean,
       default: false,
     },
   },
 
   setup() {
-    // Refs & Styles
+    // Refs
     const root = ref<HTMLElement>();
 
+    // Styles
     const rootStyles = computed(() => [
       'or-list-item-v3',
       ...ListItem,
@@ -55,7 +56,6 @@ export default defineComponent({
     return {
       root,
       rootStyles,
-
       contentStyles,
     };
   },

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

@@ -6,8 +6,4 @@ export const List: string[] = [
   'gap-md',
 ];
 
-export const ListHeader: string[] = [];
-
 export const ListContent: string[] = [];
-
-export const ListFooter: string[] = [];

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

@@ -608,9 +608,9 @@ export default defineComponent({
       }
     }
 
-    function deselectOption(item: SelectItem): void {
+    function deselectOption(value: SelectItem['value']): void {
       if (props.multiple) {
-        proxyModelValue.value = exclude(item.value, toArray(proxyModelValue.value));
+        proxyModelValue.value = exclude(value, toArray(proxyModelValue.value));
       } else {
         proxyModelValue.value = undefined;
       }
@@ -626,7 +626,12 @@ export default defineComponent({
           proxyModelValue.value = exclude(item.value, model);
         }
       } else {
-        proxyModelValue.value = proxyModelValue.value !== item.value ? item.value : undefined;
+        if (props.enableClear) {
+          proxyModelValue.value = proxyModelValue.value !== item.value ? item.value : undefined;
+        } else {
+          proxyModelValue.value = item.value;
+        }
+
       }
 
       searchText.value = '';