@onereach/ui-components 7.1.1-beta.3553.0 → 8.0.0

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

@@ -21,44 +21,40 @@
       </OrLabel>
     </slot>
 
-    <OrListItem
-      v-for="(item, index) in proxyModelValue"
-      :key="uuid()"
-      :draggable="canReorder"
-      @dragstart="onDragStart"
-      @dragenter="onDragEnter"
-      @dragover="onDragOver"
-      @dragleave="onDragLeave"
-      @dragend="onDragEnd"
-      @drop="onDrop"
+    <div
+      ref="content"
+      :class="contentStyles"
     >
-      <template v-if="canReorder">
-        <OrIcon
-          :icon="'drag_handle'"
-          :size="'l'"
-        />
-      </template>
-
-      <slot
-        v-bind="{
-          item,
-          index,
-          items: proxyModelValue,
-          addItem,
-          deleteItem
-        }"
+      <OrListItem
+        v-for="(item, index) in proxyModelValue"
+        :key="item.key || uuid()"
+        :selected="selection.includes(item)"
+        :disabled="disabled"
+        :draggable="canReorder"
       >
-        {{ item }}
-      </slot>
-
-      <template v-if="canDelete">
-        <OrIconButton
-          :icon="'delete'"
-          :disabled="disabled"
-          @click="deleteItem(index)"
-        />
-      </template>
-    </OrListItem>
+        <div :class="['grow']">
+          <slot
+            v-bind="{
+              item,
+              index,
+              items: proxyModelValue,
+              addItem,
+              deleteItem
+            }"
+          >
+            {{ item }}
+          </slot>
+        </div>
+
+        <template v-if="canDelete">
+          <OrIconButton
+            :icon="'delete'"
+            :disabled="disabled"
+            @click="deleteItem(index)"
+          />
+        </template>
+      </OrListItem>
+    </div>
 
     <slot
       name="footer"
@@ -80,18 +76,18 @@
 </template>
 
 <script lang="ts">
+import Sortable from 'sortablejs';
 import { v4 as uuid } from 'uuid';
-import { PropType, computed, defineComponent, ref, toRef } from 'vue-demi';
+import { PropType, computed, defineComponent, ref, toRef, watch } from 'vue-demi';
 import { useProxyModelValue } from '../../hooks';
 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 { List } from './styles';
+import { List, ListContent } from './styles';
+import { ListItem } from './types';
 
 export default defineComponent({
   components: {
-    OrIcon,
     OrIconButton,
     OrLabel,
     OrListItem,
@@ -104,12 +100,17 @@ export default defineComponent({
 
   props: {
     modelValue: {
-      type: Array as PropType<object[]>,
+      type: Array as PropType<ListItem[]>,
+      default: () => [],
+    },
+
+    selection: {
+      type: Array as PropType<ListItem[]>,
       default: () => [],
     },
 
-    itemProps: {
-      type: Object as PropType<object>,
+    itemFactory: {
+      type: Function as PropType<() => ListItem>,
       default: () => ({}),
     },
 
@@ -142,6 +143,10 @@ export default defineComponent({
   emits: [
     'update:modelValue',
 
+    'before:add',
+    'before:delete',
+    'before:reorder',
+
     'add',
     'delete',
     'reorder',
@@ -154,6 +159,7 @@ export default defineComponent({
   setup(props, context) {
     // Refs
     const root = ref<HTMLElement>();
+    const content = ref<HTMLElement>();
 
     // Styles
     const rootStyles = computed(() => [
@@ -161,71 +167,105 @@ export default defineComponent({
       ...List,
     ]);
 
+    const contentStyles = computed(() => [
+      ...ListContent,
+    ]);
+
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
+    // Effects
+    // #region Sortable
+    let sortable: Sortable | undefined;
+
+    watch([content, () => props.canReorder], ([content, canReorder]) => {
+      sortable?.destroy();
+      sortable = undefined;
+
+      if (content && canReorder) {
+        sortable = Sortable.create(content, {
+          disabled: props.disabled,
+
+          onUpdate: (event) => {
+            context.emit('before:reorder', proxyModelValue.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, proxyModelValue.value = nextModelValue);
+          },
+        });
+      }
+    });
+
+    watch(() => props.disabled, (value) => {
+      sortable?.option('disabled', value);
+    });
+    // #endregion
+
     // Methods
     function addItem(): void {
-      const addedItem = props.itemProps;
+      context.emit('before:add', proxyModelValue.value);
 
-      proxyModelValue.value = [
-        ...proxyModelValue.value,
-        addedItem,
-      ];
+      const addedItem = props.itemFactory();
+      const nextModelValue = [...proxyModelValue.value, addedItem];
 
-      context.emit('add', addedItem, proxyModelValue.value.indexOf(addedItem), proxyModelValue.value);
+      context.emit('add', addedItem, nextModelValue.indexOf(addedItem), proxyModelValue.value = nextModelValue);
     }
 
     function deleteItem(index: number): void {
-      const deletedItem = proxyModelValue.value[index];
+      context.emit('before:delete', proxyModelValue.value);
 
-      proxyModelValue.value = proxyModelValue.value.filter((item) => {
-        return item !== deletedItem;
-      });
+      const deletedItem = proxyModelValue.value[index];
+      const nextModelValue = proxyModelValue.value.filter((item) => item !== deletedItem);
 
-      context.emit('delete', deletedItem, index, proxyModelValue.value);
+      context.emit('delete', deletedItem, index, proxyModelValue.value = nextModelValue);
     }
 
     // Handlers
-    function onDragStart(event: DragEvent): void {
-      console.log('dragstart', event);
-    }
+    // function onDragStart(event: DragEvent): void {
+    //   console.log('dragstart', event);
+    // }
 
-    function onDragEnter(event: DragEvent): void {
-      console.log('dragenter', event);
-    }
+    // function onDragEnter(event: DragEvent): void {
+    //   console.log('dragenter', event);
+    // }
 
-    function onDragOver(event: DragEvent): void {
-      console.log('dragover', event);
-    }
+    // function onDragOver(event: DragEvent): void {
+    //   console.log('dragover', event);
+    // }
 
-    function onDragLeave(event: DragEvent): void {
-      console.log('dragleave', event);
-    }
+    // function onDragLeave(event: DragEvent): void {
+    //   console.log('dragleave', event);
+    // }
 
-    function onDragEnd(event: DragEvent): void {
-      console.log('dragend', event);
-    }
+    // function onDragEnd(event: DragEvent): void {
+    //   console.log('dragend', event);
+    // }
 
-    function onDrop(event: DragEvent): void {
-      console.log('drop', event);
-    }
+    // function onDrop(event: DragEvent): void {
+    //   console.log('drop', event);
+    // }
 
     return {
       root,
+      content,
       rootStyles,
+      contentStyles,
 
       proxyModelValue,
 
       addItem,
       deleteItem,
 
-      onDragStart,
-      onDragEnter,
-      onDragOver,
-      onDragLeave,
-      onDragEnd,
-      onDrop,
+      // onDragStart,
+      // onDragEnter,
+      // onDragOver,
+      // onDragLeave,
+      // onDragEnd,
+      // onDrop,
 
       uuid,
     };

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

@@ -1,2 +1,3 @@
 export { default as OrListV3 } from './OrList.vue';
 export * from './partials';
+export * from './types';

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

@@ -2,16 +2,41 @@
   <div
     ref="root"
     :class="rootStyles"
+    :selected="selected"
+    :disabled="disabled"
+    :draggable="draggable"
   >
-    <slot />
+    <div
+      :class="contentStyles"
+      :disabled="disabled"
+    >
+      <slot />
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue-demi';
-import { ListItem } from './styles';
+import { ListItem, ListItemContent } from './styles';
 
 export default defineComponent({
+  props: {
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+
+    draggable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
   setup() {
     // Refs
     const root = ref<HTMLElement>();
@@ -22,9 +47,14 @@ export default defineComponent({
       ...ListItem,
     ]);
 
+    const contentStyles = computed(() => [
+      ...ListItemContent,
+    ]);
+
     return {
       root,
       rootStyles,
+      contentStyles,
     };
   },
 });

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

@@ -1,7 +1,34 @@
 export const ListItem: string[] = [
+  // Interactivity (draggable)
+  'draggable:interactivity-drag',
+
+  // Spacing
+  'px-md md:px-sm',
+  'py-md md:py-sm',
+
+  // Shape
+  'rounded-md',
+
+  // Theme (hover)
+  'hover:theme-background-primary-translucent-1',
+  'dark:hover:theme-background-primary-translucent-1-dark',
+
+  // Theme (focus)
+  'focus-within:theme-outline-2-primary',
+  'dark:focus-within:theme-outline-2-primary-dark',
+
+  // Theme (selected)
+  'selected:theme-background-primary-translucent-3',
+  'dark:selected:theme-background-primary-translucent-3-dark',
+];
+
+export const ListItemContent: string[] = [
   // Layout
   'layout-row',
 
   // Spacing
+  'px-md md:px-sm',
+  'py-md md:py-sm',
+
   'gap-sm',
 ];

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

@@ -5,3 +5,5 @@ export const List: string[] = [
   // Spacing
   'gap-md',
 ];
+
+export const ListContent: string[] = [];

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

@@ -0,0 +1,4 @@
+export type ListItem = {
+  key?: string;
+  [property: string]: unknown;
+};

package/dist/bundled/v3/OrList.vue_vue_type_script_lang-8f6fa1e3.js

@@ -1,141 +0,0 @@
-import { v as v4 } from './v4-cf8987a3.js';
-import { defineComponent, ref, computed, toRef } from 'vue-demi';
-import { openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
-import { List } from './components/OrListV3/styles.js';
-import './components/OrIconV3/OrIcon.js';
-import './components/OrIconButtonV3/OrIconButton.js';
-import './components/OrLabelV3/OrLabel.js';
-import { s as script$2 } from './OrIcon.vue_vue_type_script_lang-bc674d9e.js';
-import { s as script$3 } from './OrIconButton.vue_vue_type_script_lang-90648210.js';
-import { s as script$4 } from './OrLabel.vue_vue_type_script_lang-e2bcff17.js';
-import { useProxyModelValue } from './hooks/useProxyModelValue.js';
-
-const ListItem = [
-// Layout
-'layout-row',
-// Spacing
-'gap-sm'];
-
-var script$1 = defineComponent({
-  setup() {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-list-item-v3', ...ListItem]);
-    return {
-      root,
-      rootStyles
-    };
-  }
-});
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    ref: "root",
-    class: normalizeClass(_ctx.rootStyles)
-  }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
-}
-
-script$1.render = render;
-script$1.__file = "src/components/or-list-v3/partials/or-list-item/OrListItem.vue";
-
-var script = defineComponent({
-  components: {
-    OrIcon: script$2,
-    OrIconButton: script$3,
-    OrLabel: script$4,
-    OrListItem: script$1
-  },
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue'
-  },
-  props: {
-    modelValue: {
-      type: Array,
-      default: () => []
-    },
-    itemProps: {
-      type: Object,
-      default: () => ({})
-    },
-    label: {
-      type: String,
-      default: undefined
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    canAdd: {
-      type: Boolean,
-      default: true
-    },
-    canDelete: {
-      type: Boolean,
-      default: true
-    },
-    canReorder: {
-      type: Boolean,
-      default: true
-    }
-  },
-  emits: ['update:modelValue', 'add', 'delete', 'reorder'],
-  expose: ['root'],
-  setup(props, context) {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-list-v3', ...List]);
-    // State
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    // Methods
-    function addItem() {
-      const addedItem = props.itemProps;
-      proxyModelValue.value = [...proxyModelValue.value, addedItem];
-      context.emit('add', addedItem, proxyModelValue.value.indexOf(addedItem), proxyModelValue.value);
-    }
-    function deleteItem(index) {
-      const deletedItem = proxyModelValue.value[index];
-      proxyModelValue.value = proxyModelValue.value.filter(item => {
-        return item !== deletedItem;
-      });
-      context.emit('delete', deletedItem, index, proxyModelValue.value);
-    }
-    // Handlers
-    function onDragStart(event) {
-      console.log('dragstart', event);
-    }
-    function onDragEnter(event) {
-      console.log('dragenter', event);
-    }
-    function onDragOver(event) {
-      console.log('dragover', event);
-    }
-    function onDragLeave(event) {
-      console.log('dragleave', event);
-    }
-    function onDragEnd(event) {
-      console.log('dragend', event);
-    }
-    function onDrop(event) {
-      console.log('drop', event);
-    }
-    return {
-      root,
-      rootStyles,
-      proxyModelValue,
-      addItem,
-      deleteItem,
-      onDragStart,
-      onDragEnter,
-      onDragOver,
-      onDragLeave,
-      onDragEnd,
-      onDrop,
-      uuid: v4
-    };
-  }
-});
-
-export { script$1 as a, script as s };