@onereach/ui-components 2.63.0-beta.1907.0 → 2.63.1-beta.1936.0

package/dist/v2/OrCardCollection-5d5046f1.js

@@ -0,0 +1,227 @@
+import { defineComponent, ref, computed, watch } from 'vue-demi';
+import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
+import '@vueuse/core';
+import { _ as __vue_component__$1 } from './OrCard-1d904e72.js';
+import { _ as __vue_component__$2 } from './OrIconButton-2088a37f.js';
+import { _ as __vue_component__$3 } from './OrInput-655bed71.js';
+import { _ as __vue_component__$4 } from './OrSortHeader-a6004b24.js';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+
+var CardCollectionView;
+(function (CardCollectionView) {
+  CardCollectionView["Grid"] = "grid";
+  CardCollectionView["List"] = "list";
+})(CardCollectionView || (CardCollectionView = {}));
+
+const CardCollectionRoot = [
+// Layout
+'flex flex-col',
+// Spacing
+'gap-md'];
+const CardCollectionToolbar = [
+// Layout
+'flex', 'justify-between', 'items-center',
+// Typography
+'typography-body-2-regular',
+// Theme
+'theme-foreground-default', 'dark:theme-foreground-default-dark'];
+const CardCollectionToolbarPanel = [
+// Layout
+'flex', 'justify-normal', 'items-center',
+// Spacing
+'gap-sm'];
+const CardCollectionContent = [
+// Layout
+'grid',
+// Spacing
+'gap-sm md:gap-md'];
+const CardCollectionContentViews = {
+  'grid': [
+  // Layout
+  'sm:grid-cols-1', 'md:grid-cols-2', 'lg:grid-cols-4', 'xl:grid-cols-6'],
+  'list': []
+};
+
+var script = defineComponent({
+  name: 'OrCardCollection',
+  components: {
+    OrCard: __vue_component__$1,
+    OrIconButton: __vue_component__$2,
+    OrInput: __vue_component__$3,
+    OrSortHeader: __vue_component__$4
+  },
+  inheritAttrs: false,
+  props: {
+    items: {
+      type: Array,
+      default: []
+    },
+    view: {
+      type: String,
+      default: CardCollectionView.Grid
+    },
+    sort: {
+      type: Object,
+      default: undefined
+    },
+    sortHeaders: {
+      type: Array,
+      default: undefined
+    },
+    search: {
+      type: String,
+      default: undefined
+    }
+  },
+  emits: ['viewChange', 'sortChange', 'searchChange'],
+  expose: ['root'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    // Styles
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-card-collection', ...CardCollectionRoot, classAttribute.value]);
+    const toolbarStyles = computed(() => [...CardCollectionToolbar]);
+    const toolbarPanelStyles = computed(() => [...CardCollectionToolbarPanel]);
+    const contentStyles = computed(() => [...CardCollectionContent, ...CardCollectionContentViews[proxyView.value]]);
+    // State
+    const proxyView = ref(props.view);
+    const proxySort = ref(props.sort);
+    const proxySearch = ref(props.search);
+    // Methods
+    function switchToGridView() {
+      proxyView.value = CardCollectionView.Grid;
+    }
+    function switchToListView() {
+      proxyView.value = CardCollectionView.List;
+    }
+    // Effects
+    watch(() => props.view, value => {
+      proxyView.value = value;
+    });
+    watch(proxyView, value => {
+      context.emit('viewChange', value);
+    });
+    watch(() => props.sort, value => {
+      proxySort.value = value;
+    });
+    watch(proxySort, value => {
+      context.emit('sortChange', value);
+    });
+    watch(() => props.search, value => {
+      proxySearch.value = value;
+    });
+    watch(proxySearch, value => {
+      context.emit('searchChange', value);
+    });
+    return {
+      root,
+      rootStyles,
+      toolbarStyles,
+      toolbarPanelStyles,
+      contentStyles,
+      proxyView,
+      proxySort,
+      proxySearch,
+      switchToGridView,
+      switchToListView
+    };
+  }
+});
+
+/* 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', _vm._b({
+    ref: "root",
+    class: _vm.rootStyles
+  }, 'div', _vm.$attrs, false), [_c('div', {
+    class: _vm.toolbarStyles
+  }, [_c('div', {
+    class: _vm.toolbarPanelStyles
+  }, [_vm.sortHeaders ? _vm._l(_vm.sortHeaders, function (header) {
+    return _c('OrSortHeader', {
+      key: header.value,
+      attrs: {
+        "input-value": header.value
+      },
+      model: {
+        value: _vm.proxySort,
+        callback: function ($$v) {
+          _vm.proxySort = $$v;
+        },
+        expression: "proxySort"
+      }
+    }, [_vm._v("\n          " + _vm._s(header.label) + "\n        ")]);
+  }) : _vm._e()], 2), _vm._v(" "), _c('div', {
+    class: _vm.toolbarPanelStyles
+  }, [_c('OrInput', {
+    attrs: {
+      "type": 'search',
+      "placeholder": 'Search',
+      "size": 's'
+    },
+    model: {
+      value: _vm.proxySearch,
+      callback: function ($$v) {
+        _vm.proxySearch = $$v;
+      },
+      expression: "proxySearch"
+    }
+  }), _vm._v(" "), _c('OrIconButton', {
+    attrs: {
+      "icon": 'grid_view'
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.switchToGridView();
+      }
+    }
+  }), _vm._v(" "), _c('OrIconButton', {
+    attrs: {
+      "icon": 'view_list'
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.switchToListView();
+      }
+    }
+  }), _vm._v(" "), _vm._t("addon")], 2)]), _vm._v(" "), _c('div', {
+    class: _vm.contentStyles
+  }, [_vm.proxyView === 'grid' ? _vm._l(_vm.items, function (item) {
+    return _c('OrCard', {
+      key: item.id
+    }, [_vm._t("gridItem", null, null, item)], 2);
+  }) : _vm._e(), _vm._v(" "), _vm.proxyView === 'list' ? _vm._l(_vm.items, function (item) {
+    return _c('OrCard', {
+      key: item.id
+    }, [_vm._t("listItem", null, null, item)], 2);
+  }) : _vm._e()], 2)]);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = undefined;
+/* 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 { CardCollectionView as C, __vue_component__ as _ };

package/dist/v2/{OrConfirm-8d149ece.js → OrConfirm-edc537b3.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { _ as __vue_component__$2, a as ButtonColor } from './OrButton-eb895669.js';
 import { _ as __vue_component__$1 } from './OrOverlay-4838a9b0.js';
-import { _ as __vue_component__$3 } from './OrInput-4a50fe57.js';
+import { _ as __vue_component__$3 } from './OrInput-655bed71.js';
 import { useMagicKeys, whenever } from '@vueuse/core';
 import { logicAnd } from '@vueuse/math';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';

package/dist/v2/{OrIconButton-5883eba0.js → OrIconButton-2088a37f.js}

@@ -2,7 +2,7 @@ import { defineComponent, ref, computed } from 'vue-demi';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
 import { _ as __vue_component__$1 } from './OrIcon-124f3bad.js';
-import { _ as __vue_component__$2 } from './OrTooltip-caeac590.js';
+import { _ as __vue_component__$2 } from './OrTooltip-afe7030b.js';
 import './OrPopover-9080fc00.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/v2/{OrInlineInput-16a343c1.js → OrInlineInput-da65c72a.js}

@@ -3,7 +3,7 @@ import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
 import { _ as __vue_component__$1 } from './OrError-be656098.js';
 import { _ as __vue_component__$2 } from './OrHint-44356417.js';
-import { _ as __vue_component__$3 } from './OrIconButton-5883eba0.js';
+import { _ as __vue_component__$3 } from './OrIconButton-2088a37f.js';
 import { _ as __vue_component__$4, I as InlineInputBoxSize } from './OrInlineInputBox-6a15ea2b.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
@@ -129,14 +129,15 @@ var script = defineComponent({
       activated.value = false;
     }
     function reset() {
+      var _a;
       if (draftModelValue.value !== proxyModelValue.value) {
-        draftModelValue.value = proxyModelValue.value;
+        draftModelValue.value = (_a = proxyModelValue.value) !== null && _a !== void 0 ? _a : '';
       }
       activated.value = false;
     }
     // Effects
     watch(proxyModelValue, value => {
-      draftModelValue.value = value;
+      draftModelValue.value = value !== null && value !== void 0 ? value : '';
     }, {
       immediate: true
     });
@@ -160,7 +161,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "input[data-v-8d82b992]{min-width:0;background:0 0;outline:0}input[type=number][data-v-8d82b992]::-webkit-inner-spin-button{display:none}input[type=search][data-v-8d82b992]::-webkit-search-cancel-button{display:none}";
+var css_248z = "input[data-v-28f73e22]{min-width:0;background:0 0;outline:0}input[type=number][data-v-28f73e22]::-webkit-inner-spin-button{display:none}input[type=search][data-v-28f73e22]::-webkit-search-cancel-button{display:none}";
 styleInject(css_248z);
 
 /* script */
@@ -310,15 +311,15 @@ var __vue_render__ = function () {
         return _vm.reset.apply(null, arguments);
       }
     }
-  })], 1)] : _vm._e()], 2), _vm._v(" "), !_vm.invalid ? [_c('OrHint', {
+  })], 1)] : _vm._e()], 2), _vm._v(" "), !_vm.invalid ? [_vm.hint || _vm.maxLength ? [_c('OrHint', {
     scopedSlots: _vm._u([_vm.maxLength ? {
       key: "addon",
       fn: function () {
-        return [_vm._v("\n        " + _vm._s(_vm.currentLength) + " / " + _vm._s(_vm.maxLength) + "\n      ")];
+        return [_vm._v("\n          " + _vm._s(_vm.currentLength) + " / " + _vm._s(_vm.maxLength) + "\n        ")];
       },
       proxy: true
     } : null], null, true)
-  }, [_vm._v("\n      " + _vm._s(_vm.hint) + "\n\n      ")])] : [_c('OrError', {
+  }, [_vm._v("\n        " + _vm._s(_vm.hint) + "\n\n        ")])] : _vm._e()] : [_c('OrError', {
     scopedSlots: _vm._u([_vm.maxLength ? {
       key: "addon",
       fn: function () {
@@ -333,7 +334,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-8d82b992";
+const __vue_scope_id__ = "data-v-28f73e22";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/v2/{OrInlineTextarea-f154bdf5.js → OrInlineTextarea-da66759a.js}

@@ -3,7 +3,7 @@ import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
 import { _ as __vue_component__$1 } from './OrError-be656098.js';
 import { _ as __vue_component__$2 } from './OrHint-44356417.js';
-import { _ as __vue_component__$3 } from './OrIconButton-5883eba0.js';
+import { _ as __vue_component__$3 } from './OrIconButton-2088a37f.js';
 import { _ as __vue_component__$4 } from './OrInlineInputBox-6a15ea2b.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
@@ -115,14 +115,15 @@ var script = defineComponent({
       activated.value = false;
     }
     function reset() {
+      var _a;
       if (draftModelValue.value !== proxyModelValue.value) {
-        draftModelValue.value = proxyModelValue.value;
+        draftModelValue.value = (_a = proxyModelValue.value) !== null && _a !== void 0 ? _a : '';
       }
       activated.value = false;
     }
     // Effects
     watch(proxyModelValue, value => {
-      draftModelValue.value = value;
+      draftModelValue.value = value !== null && value !== void 0 ? value : '';
     }, {
       immediate: true
     });
@@ -146,7 +147,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "textarea[data-v-d02de720]{min-width:0;background:0 0;outline:0}";
+var css_248z = "textarea[data-v-23c697a5]{min-width:0;background:0 0;outline:0}";
 styleInject(css_248z);
 
 /* script */
@@ -222,15 +223,15 @@ var __vue_render__ = function () {
         return _vm.reset.apply(null, arguments);
       }
     }
-  })], 1)] : _vm._e()], 2), _vm._v(" "), !_vm.invalid ? [_c('OrHint', {
+  })], 1)] : _vm._e()], 2), _vm._v(" "), !_vm.invalid ? [_vm.hint || _vm.maxLength ? [_c('OrHint', {
     scopedSlots: _vm._u([_vm.maxLength ? {
       key: "addon",
       fn: function () {
-        return [_vm._v("\n        " + _vm._s(_vm.currentLength) + " / " + _vm._s(_vm.maxLength) + "\n      ")];
+        return [_vm._v("\n          " + _vm._s(_vm.currentLength) + " / " + _vm._s(_vm.maxLength) + "\n        ")];
       },
       proxy: true
     } : null], null, true)
-  }, [_vm._v("\n      " + _vm._s(_vm.hint) + "\n\n      ")])] : [_c('OrError', {
+  }, [_vm._v("\n        " + _vm._s(_vm.hint) + "\n\n        ")])] : _vm._e()] : [_c('OrError', {
     scopedSlots: _vm._u([_vm.maxLength ? {
       key: "addon",
       fn: function () {
@@ -245,7 +246,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-d02de720";
+const __vue_scope_id__ = "data-v-23c697a5";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/v2/{OrInput-4a50fe57.js → OrInput-655bed71.js}

@@ -3,7 +3,7 @@ import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
 import { _ as __vue_component__$1 } from './OrError-be656098.js';
 import { _ as __vue_component__$2 } from './OrHint-44356417.js';
-import { _ as __vue_component__$4 } from './OrIconButton-5883eba0.js';
+import { _ as __vue_component__$4 } from './OrIconButton-2088a37f.js';
 import { _ as __vue_component__$3 } from './OrIcon-124f3bad.js';
 import { _ as __vue_component__$5, a as InputBoxSize } from './OrInputBox-208dceac.js';
 import { _ as __vue_component__$6 } from './OrLabel-5670468e.js';
@@ -143,7 +143,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "input[data-v-8536ff50]{min-width:0;background:0 0;outline:0}input[type=number][data-v-8536ff50]::-webkit-inner-spin-button{display:none}input[type=search][data-v-8536ff50]::-webkit-search-cancel-button{display:none}";
+var css_248z = "input[data-v-2b692b9f]{min-width:0;background:0 0;outline:0}input[type=number][data-v-2b692b9f]::-webkit-inner-spin-button{display:none}input[type=search][data-v-2b692b9f]::-webkit-search-cancel-button{display:none}";
 styleInject(css_248z);
 
 /* script */
@@ -302,7 +302,9 @@ var __vue_render__ = function () {
         _vm.proxyModelValue = $event.target.value;
       }
     }
-  }, 'input', _vm.$attrs, false)), _vm._v(" "), _vm.type === 'password' ? [_c('OrIconButton', {
+  }, 'input', _vm.$attrs, false)), _vm._v(" "), _c('div', {
+    class: ['-m-xs', 'ml-none']
+  }, [_vm.type === 'password' ? [_c('OrIconButton', {
     attrs: {
       "icon": {
         icon: _vm.disclosed ? 'visibility_off' : 'visibility',
@@ -334,18 +336,18 @@ var __vue_render__ = function () {
       "icon": 'search',
       "variant": 'outlined'
     }
-  })]] : _vm._e()], 2), _vm._v(" "), !_vm.invalid ? [_c('OrHint', {
+  })]] : _vm._e()], 2)]), _vm._v(" "), !_vm.invalid ? [_vm.hint || _vm.maxLength ? [_c('OrHint', {
     attrs: {
       "disabled": _vm.disabled
     },
     scopedSlots: _vm._u([_vm.maxLength ? {
       key: "addon",
       fn: function () {
-        return [_vm._v("\n        " + _vm._s(_vm.currentLength) + " / " + _vm._s(_vm.maxLength) + "\n      ")];
+        return [_vm._v("\n          " + _vm._s(_vm.currentLength) + " / " + _vm._s(_vm.maxLength) + "\n        ")];
       },
       proxy: true
     } : null], null, true)
-  }, [_vm._v("\n      " + _vm._s(_vm.hint) + "\n\n      ")])] : [_c('OrError', {
+  }, [_vm._v("\n        " + _vm._s(_vm.hint) + "\n\n        ")])] : _vm._e()] : [_c('OrError', {
     attrs: {
       "disabled": _vm.disabled
     },
@@ -363,7 +365,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-8536ff50";
+const __vue_scope_id__ = "data-v-2b692b9f";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/v2/{OrModal-64c5ae2e.js → OrModal-a1452b11.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
-import { _ as __vue_component__$2 } from './OrIconButton-5883eba0.js';
+import { _ as __vue_component__$2 } from './OrIconButton-2088a37f.js';
 import { _ as __vue_component__$1 } from './OrOverlay-4838a9b0.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/v2/{OrNotification-9c164908.js → OrNotification-ac420f39.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed } from 'vue-demi';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
-import { _ as __vue_component__$2 } from './OrIconButton-5883eba0.js';
+import { _ as __vue_component__$2 } from './OrIconButton-2088a37f.js';
 import { _ as __vue_component__$1 } from './OrIcon-124f3bad.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/v2/{OrSearch-a247f072.js → OrSearch-287a08a9.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed } from 'vue-demi';
 import { debouncedWatch } from '@vueuse/core';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-import { _ as __vue_component__$1 } from './OrInput-4a50fe57.js';
+import { _ as __vue_component__$1 } from './OrInput-655bed71.js';
 import { a as InputBoxSize } from './OrInputBox-208dceac.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';