@onereach/ui-components 8.4.0-beta.3653.0 → 8.4.0

package/dist/bundled/v2/components/OrCardCollection/OrCardCollection.js

@@ -1,2 +1,216 @@
-export { OrCardCollection as default } from './index.js';
-import '../OrAvatar-56c993c9.js';
+import { defineComponent, ref } from 'vue-demi';
+import { CARD_COLLECTION_LAYOUT } from './constants.js';
+import __vue_component__$1 from '../OrCard/OrCard.js';
+import __vue_component__$2 from '../OrIcon/OrIcon.js';
+import __vue_component__$3 from '../OrSearch/OrSearch.js';
+import __vue_component__$4 from '../OrIconButtonV2/OrIconButton.js';
+import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
+import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+
+var script = defineComponent({
+  name: 'OrCardCollection',
+  components: {
+    OrCard: __vue_component__$1,
+    OrIcon: __vue_component__$2,
+    OrSearch: __vue_component__$3,
+    OrIconButton: __vue_component__$4
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    activeItem: {
+      type: Object,
+      default: undefined
+    },
+    layoutOptions: {
+      type: Array,
+      default: () => [{
+        name: 'grid',
+        icon: 'apps'
+      }, {
+        name: 'list',
+        icon: 'menu'
+      }]
+    },
+    layout: {
+      type: String,
+      default: CARD_COLLECTION_LAYOUT.GRID
+    },
+    sortableColumns: {
+      type: Array,
+      default: undefined
+    },
+    filterPlaceholder: {
+      type: String,
+      default: 'Search'
+    }
+  },
+  emits: ['filter', 'sort', 'layoutChanged', 'itemClicked'],
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    var _a;
+    if (!slots.default) throw new Error('Can\'t render collection without default template for cards.');
+    const sortingDirection = ref('asc');
+    const filterValue = ref('');
+    const sortingColumn = ref(((_a = props.sortableColumns) === null || _a === void 0 ? void 0 : _a.length) ? props.sortableColumns[0].name : '');
+    const selectedLayout = ref(props.layout);
+    return {
+      sortingDirection,
+      filterValue,
+      sortingColumn,
+      selectedLayout
+    };
+  },
+  computed: {
+    rootClasses() {
+      return ['or-card-collection', `or-card-collection-${this.selectedLayout}`];
+    },
+    sortingDirectionIcon() {
+      const icon = this.sortingDirection === 'asc' ? 'arrow-upward' : 'arrow-downward';
+      return icon;
+    }
+  },
+  methods: {
+    selectSortable(column) {
+      const nextValue = this.sortingDirection === 'asc' ? 'desc' : 'asc';
+      this.sortingDirection = this.sortingColumn === column.name ? nextValue : this.sortingDirection;
+      this.sortingColumn = column.name;
+      const eventPayload = {
+        column,
+        direction: this.sortingDirection
+      };
+      this.$emit('sort', eventPayload);
+    },
+    emitFilterChange() {
+      this.$emit('filter', this.filterValue);
+    },
+    selectLayout(layout) {
+      this.selectedLayout = layout;
+      this.$emit('layoutChanged', this.selectedLayout);
+    },
+    handleClick(item) {
+      this.$emit('itemClicked', item);
+    }
+  }
+});
+
+var css_248z$1 = "@keyframes spinAround-data-v-06085c59{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-06085c59{from{opacity:1}to{opacity:0}}.or-card-collection .or-card-collection-toolbar[data-v-06085c59]{display:flex;-moz-column-gap:var(--s-4);column-gap:var(--s-4);align-items:center;justify-content:space-between;margin:0 var(--s-4)}.or-card-collection .or-card-collection-toolbar .or-card-collection-sorting[data-v-06085c59]{flex-grow:1;cursor:pointer}.or-card-collection .or-card-collection-toolbar .or-card-collection-sorting .or-card-collection-sorting-column[data-v-06085c59]{display:inline-flex;margin:var(--s-2) var(--s-6);font-size:var(--fs-0);font-weight:var(--fw-0);line-height:var(--lh-0);color:var(--c-neutral-4);text-transform:capitalize;letter-spacing:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.or-card-collection .or-card-collection-toolbar .or-card-collection-sorting .or-card-collection-sorting-column.sorting-selected[data-v-06085c59]{font-weight:700;color:var(--c-neutral-6)}.or-card-collection .or-card-collection-toolbar .or-card-collection-sorting .or-card-collection-sorting-column.sorting-selected .or-card-collection-sort-direction[data-v-06085c59]{width:14px;height:14px;margin-left:var(--s-1)}.or-card-collection .or-card-collection-toolbar .or-card-collection-layout-buttons .or-icon-button[data-v-06085c59]{border-radius:0}.or-card-collection .or-card-collection-wrapper[data-v-06085c59]{display:flex;margin-top:var(--s-5)}.or-card-collection.or-card-collection-grid .or-card-collection-wrapper[data-v-06085c59]{flex-flow:row wrap}.or-card-collection.or-card-collection-grid .or-card-collection-wrapper .or-card[data-v-06085c59]{margin-right:auto}.or-card-collection.or-card-collection-list .or-card-collection-wrapper[data-v-06085c59]{flex-direction:column}";
+styleInject(css_248z$1);
+
+var css_248z = ".or-card-collection-filter .or-textbox .or-textbox--input{max-width:256px;height:30px}.or-card-collection-sort-direction .or-icon{font-size:1rem}";
+styleInject(css_248z);
+
+/* script */
+const __vue_script__ = script;
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    class: _vm.rootClasses
+  }, [_c('div', {
+    staticClass: "or-card-collection-toolbar"
+  }, [_c('div', {
+    staticClass: "or-card-collection-sorting"
+  }, [_vm.sortableColumns ? _vm._l(_vm.sortableColumns, function (column) {
+    return _c('div', {
+      key: column.name,
+      class: {
+        'or-card-collection-sorting-column': true,
+        'sorting-selected': _vm.sortingColumn === column.name
+      },
+      attrs: {
+        "class.selected": ""
+      },
+      on: {
+        "click": function ($event) {
+          return _vm.selectSortable(column);
+        }
+      }
+    }, [_c('span', [_vm._v(_vm._s(column.label))]), _vm._v(" "), _vm.sortingColumn === column.name ? _c('span', {
+      staticClass: "or-card-collection-sort-direction"
+    }, [_c('or-icon', [_vm._v(_vm._s(_vm.sortingDirection === 'asc' ? 'arrow_upward' : 'arrow_downward'))])], 1) : _vm._e()]);
+  }) : _vm._e()], 2), _vm._v(" "), _c('div', {
+    staticClass: "or-card-collection-filter"
+  }, [_vm._t("filters", function () {
+    return [_c('or-search', {
+      attrs: {
+        "placeholder": _vm.filterPlaceholder
+      },
+      on: {
+        "update:modelValue": _vm.emitFilterChange
+      },
+      model: {
+        value: _vm.filterValue,
+        callback: function ($$v) {
+          _vm.filterValue = $$v;
+        },
+        expression: "filterValue"
+      }
+    })];
+  })], 2), _vm._v(" "), _c('div', {
+    staticClass: "or-card-collection-layout-buttons"
+  }, [_vm._t("layoutButtons", function () {
+    return _vm._l(_vm.layoutOptions, function (layoutOption) {
+      return _c('or-icon-button', {
+        key: layoutOption.name,
+        attrs: {
+          "icon": layoutOption.icon,
+          "icon-color": _vm.selectedLayout === layoutOption.name ? 'neutral-6' : 'neutral-4'
+        },
+        on: {
+          "click": function ($event) {
+            return _vm.selectLayout(layoutOption.name);
+          }
+        }
+      });
+    });
+  })], 2), _vm._v(" "), _vm.$slots.toolsAppend ? _c('div', {
+    staticClass: "or-card-collection-extra-tools"
+  }, [_vm._t("toolsAppend")], 2) : _vm._e()]), _vm._v(" "), _c('div', {
+    staticClass: "or-card-collection-wrapper"
+  }, _vm._l(_vm.items, function (props, index) {
+    return _c('or-card', {
+      key: props.vforkey || index,
+      attrs: {
+        "active": _vm.activeItem === props
+      },
+      on: {
+        "click": function ($event) {
+          return _vm.handleClick(props);
+        }
+      }
+    }, [_vm._t("default", null, null, {
+      props: props,
+      items: _vm.items,
+      index: index
+    })], 2);
+  }), 1)]);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = "data-v-06085c59";
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+
+export { __vue_component__ as default };

package/dist/bundled/v2/components/OrCardCollection/constants.js

@@ -1 +1,7 @@
-export { CARD_COLLECTION_LAYOUT } from './index.js';
+var CARD_COLLECTION_LAYOUT;
+(function (CARD_COLLECTION_LAYOUT) {
+  CARD_COLLECTION_LAYOUT["GRID"] = "grid";
+  CARD_COLLECTION_LAYOUT["LIST"] = "list";
+})(CARD_COLLECTION_LAYOUT || (CARD_COLLECTION_LAYOUT = {}));
+
+export { CARD_COLLECTION_LAYOUT };

package/dist/bundled/v2/components/OrCardCollection/index.js

@@ -1,220 +1,2 @@
-import { defineComponent, ref } from 'vue-demi';
-import __vue_component__$1 from '../OrCard/OrCard.js';
-import { OrIcon as __vue_component__$2 } from '../OrIcon/index.js';
-import __vue_component__$3 from '../OrSearch/OrSearch.js';
-import __vue_component__$4 from '../OrIconButtonV2/OrIconButton.js';
-import { s as styleInject, n as normalizeComponent } from '../OrAvatar-56c993c9.js';
-
-var CARD_COLLECTION_LAYOUT;
-(function (CARD_COLLECTION_LAYOUT) {
-  CARD_COLLECTION_LAYOUT["GRID"] = "grid";
-  CARD_COLLECTION_LAYOUT["LIST"] = "list";
-})(CARD_COLLECTION_LAYOUT || (CARD_COLLECTION_LAYOUT = {}));
-
-var script = defineComponent({
-  name: 'OrCardCollection',
-  components: {
-    OrCard: __vue_component__$1,
-    OrIcon: __vue_component__$2,
-    OrSearch: __vue_component__$3,
-    OrIconButton: __vue_component__$4
-  },
-  props: {
-    items: {
-      type: Array,
-      default: () => []
-    },
-    activeItem: {
-      type: Object,
-      default: undefined
-    },
-    layoutOptions: {
-      type: Array,
-      default: () => [{
-        name: 'grid',
-        icon: 'apps'
-      }, {
-        name: 'list',
-        icon: 'menu'
-      }]
-    },
-    layout: {
-      type: String,
-      default: CARD_COLLECTION_LAYOUT.GRID
-    },
-    sortableColumns: {
-      type: Array,
-      default: undefined
-    },
-    filterPlaceholder: {
-      type: String,
-      default: 'Search'
-    }
-  },
-  emits: ['filter', 'sort', 'layoutChanged', 'itemClicked'],
-  setup(props, _ref) {
-    let {
-      slots
-    } = _ref;
-    var _a;
-    if (!slots.default) throw new Error('Can\'t render collection without default template for cards.');
-    const sortingDirection = ref('asc');
-    const filterValue = ref('');
-    const sortingColumn = ref(((_a = props.sortableColumns) === null || _a === void 0 ? void 0 : _a.length) ? props.sortableColumns[0].name : '');
-    const selectedLayout = ref(props.layout);
-    return {
-      sortingDirection,
-      filterValue,
-      sortingColumn,
-      selectedLayout
-    };
-  },
-  computed: {
-    rootClasses() {
-      return ['or-card-collection', `or-card-collection-${this.selectedLayout}`];
-    },
-    sortingDirectionIcon() {
-      const icon = this.sortingDirection === 'asc' ? 'arrow-upward' : 'arrow-downward';
-      return icon;
-    }
-  },
-  methods: {
-    selectSortable(column) {
-      const nextValue = this.sortingDirection === 'asc' ? 'desc' : 'asc';
-      this.sortingDirection = this.sortingColumn === column.name ? nextValue : this.sortingDirection;
-      this.sortingColumn = column.name;
-      const eventPayload = {
-        column,
-        direction: this.sortingDirection
-      };
-      this.$emit('sort', eventPayload);
-    },
-    emitFilterChange() {
-      this.$emit('filter', this.filterValue);
-    },
-    selectLayout(layout) {
-      this.selectedLayout = layout;
-      this.$emit('layoutChanged', this.selectedLayout);
-    },
-    handleClick(item) {
-      this.$emit('itemClicked', item);
-    }
-  }
-});
-
-var css_248z$1 = "@keyframes spinAround-data-v-06085c59{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-06085c59{from{opacity:1}to{opacity:0}}.or-card-collection .or-card-collection-toolbar[data-v-06085c59]{display:flex;-moz-column-gap:var(--s-4);column-gap:var(--s-4);align-items:center;justify-content:space-between;margin:0 var(--s-4)}.or-card-collection .or-card-collection-toolbar .or-card-collection-sorting[data-v-06085c59]{flex-grow:1;cursor:pointer}.or-card-collection .or-card-collection-toolbar .or-card-collection-sorting .or-card-collection-sorting-column[data-v-06085c59]{display:inline-flex;margin:var(--s-2) var(--s-6);font-size:var(--fs-0);font-weight:var(--fw-0);line-height:var(--lh-0);color:var(--c-neutral-4);text-transform:capitalize;letter-spacing:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.or-card-collection .or-card-collection-toolbar .or-card-collection-sorting .or-card-collection-sorting-column.sorting-selected[data-v-06085c59]{font-weight:700;color:var(--c-neutral-6)}.or-card-collection .or-card-collection-toolbar .or-card-collection-sorting .or-card-collection-sorting-column.sorting-selected .or-card-collection-sort-direction[data-v-06085c59]{width:14px;height:14px;margin-left:var(--s-1)}.or-card-collection .or-card-collection-toolbar .or-card-collection-layout-buttons .or-icon-button[data-v-06085c59]{border-radius:0}.or-card-collection .or-card-collection-wrapper[data-v-06085c59]{display:flex;margin-top:var(--s-5)}.or-card-collection.or-card-collection-grid .or-card-collection-wrapper[data-v-06085c59]{flex-flow:row wrap}.or-card-collection.or-card-collection-grid .or-card-collection-wrapper .or-card[data-v-06085c59]{margin-right:auto}.or-card-collection.or-card-collection-list .or-card-collection-wrapper[data-v-06085c59]{flex-direction:column}";
-styleInject(css_248z$1);
-
-var css_248z = ".or-card-collection-filter .or-textbox .or-textbox--input{max-width:256px;height:30px}.or-card-collection-sort-direction .or-icon{font-size:1rem}";
-styleInject(css_248z);
-
-/* script */
-const __vue_script__ = script;
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c('div', {
-    class: _vm.rootClasses
-  }, [_c('div', {
-    staticClass: "or-card-collection-toolbar"
-  }, [_c('div', {
-    staticClass: "or-card-collection-sorting"
-  }, [_vm.sortableColumns ? _vm._l(_vm.sortableColumns, function (column) {
-    return _c('div', {
-      key: column.name,
-      class: {
-        'or-card-collection-sorting-column': true,
-        'sorting-selected': _vm.sortingColumn === column.name
-      },
-      attrs: {
-        "class.selected": ""
-      },
-      on: {
-        "click": function ($event) {
-          return _vm.selectSortable(column);
-        }
-      }
-    }, [_c('span', [_vm._v(_vm._s(column.label))]), _vm._v(" "), _vm.sortingColumn === column.name ? _c('span', {
-      staticClass: "or-card-collection-sort-direction"
-    }, [_c('or-icon', [_vm._v(_vm._s(_vm.sortingDirection === 'asc' ? 'arrow_upward' : 'arrow_downward'))])], 1) : _vm._e()]);
-  }) : _vm._e()], 2), _vm._v(" "), _c('div', {
-    staticClass: "or-card-collection-filter"
-  }, [_vm._t("filters", function () {
-    return [_c('or-search', {
-      attrs: {
-        "placeholder": _vm.filterPlaceholder
-      },
-      on: {
-        "update:modelValue": _vm.emitFilterChange
-      },
-      model: {
-        value: _vm.filterValue,
-        callback: function ($$v) {
-          _vm.filterValue = $$v;
-        },
-        expression: "filterValue"
-      }
-    })];
-  })], 2), _vm._v(" "), _c('div', {
-    staticClass: "or-card-collection-layout-buttons"
-  }, [_vm._t("layoutButtons", function () {
-    return _vm._l(_vm.layoutOptions, function (layoutOption) {
-      return _c('or-icon-button', {
-        key: layoutOption.name,
-        attrs: {
-          "icon": layoutOption.icon,
-          "icon-color": _vm.selectedLayout === layoutOption.name ? 'neutral-6' : 'neutral-4'
-        },
-        on: {
-          "click": function ($event) {
-            return _vm.selectLayout(layoutOption.name);
-          }
-        }
-      });
-    });
-  })], 2), _vm._v(" "), _vm.$slots.toolsAppend ? _c('div', {
-    staticClass: "or-card-collection-extra-tools"
-  }, [_vm._t("toolsAppend")], 2) : _vm._e()]), _vm._v(" "), _c('div', {
-    staticClass: "or-card-collection-wrapper"
-  }, _vm._l(_vm.items, function (props, index) {
-    return _c('or-card', {
-      key: props.vforkey || index,
-      attrs: {
-        "active": _vm.activeItem === props
-      },
-      on: {
-        "click": function ($event) {
-          return _vm.handleClick(props);
-        }
-      }
-    }, [_vm._t("default", null, null, {
-      props: props,
-      items: _vm.items,
-      index: index
-    })], 2);
-  }), 1)]);
-};
-var __vue_staticRenderFns__ = [];
-
-/* style */
-const __vue_inject_styles__ = undefined;
-/* scoped */
-const __vue_scope_id__ = "data-v-06085c59";
-/* module identifier */
-const __vue_module_identifier__ = undefined;
-/* functional template */
-const __vue_is_functional_template__ = false;
-/* style inject */
-
-/* style inject SSR */
-
-/* style inject shadow dom */
-
-const __vue_component__ = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__,
-  staticRenderFns: __vue_staticRenderFns__
-}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
-
-export { CARD_COLLECTION_LAYOUT, __vue_component__ as OrCardCollection };
+export { CARD_COLLECTION_LAYOUT } from './constants.js';
+export { default as OrCardCollection } from './OrCardCollection.js';

package/dist/bundled/v2/components/OrCardCollection/types.js

@@ -0,0 +1 @@
+