@onereach/ui-components 4.3.11 → 4.3.12-beta.2674.0

package/dist/bundled/v2/components/OrSelectV3/OrSelect.js

@@ -360,7 +360,8 @@ var __vue_render__ = function () {
       return _c('OrTag', {
         key: option.value,
         attrs: {
-          "variant": 'reset'
+          "variant": 'reset',
+          "disabled": _vm.disabled || _vm.readonly
         },
         on: {
           "reset": function ($event) {

package/dist/bundled/v3/components/OrSelectV3/OrSelect.js

@@ -143,12 +143,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       return openBlock(), createBlock(_component_OrTag, {
         key: option.value,
         variant: 'reset',
+        disabled: _ctx.disabled || _ctx.readonly,
         onReset: $event => _ctx.deselect(option)
       }, {
         default: withCtx(() => [createTextVNode(toDisplayString(option.label), 1 /* TEXT */)]),
 
         _: 2 /* DYNAMIC */
-      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onReset"]);
+      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["disabled", "onReset"]);
     }), 128 /* KEYED_FRAGMENT */)) : (openBlock(), createElementBlock("span", {
       key: 1,
       class: normalizeClass(_ctx.placeholderStyles)

package/dist/esm/v2/{OrSelect-9c8f96b2.js → OrSelect-9d6b3363.js}

@@ -360,7 +360,8 @@ var __vue_render__ = function () {
       return _c('OrTag', {
         key: option.value,
         attrs: {
-          "variant": 'reset'
+          "variant": 'reset',
+          "disabled": _vm.disabled || _vm.readonly
         },
         on: {
           "reset": function ($event) {

package/dist/esm/v2/components/index.js

@@ -73,7 +73,7 @@ export { _ as OrSearch } from '../OrSearch-330e9af0.js';
 export { _ as OrSearchV3 } from '../OrSearch-7ccc1f33.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-a1ea5b72.js';
 export { _ as OrSelect } from '../OrSelect-22eea9cc.js';
-export { _ as OrSelectV3 } from '../OrSelect-9c8f96b2.js';
+export { _ as OrSelectV3 } from '../OrSelect-9d6b3363.js';
 export { _ as OrSidebar, O as OrSidebarSide } from '../OrSidebar-feacf13a.js';
 export { _ as OrSidebarV3 } from '../OrSidebar-b8387abe.js';
 export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-4bf3bad8.js';

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

@@ -1,4 +1,4 @@
-export { _ as OrSelectV3 } from '../../OrSelect-9c8f96b2.js';
+export { _ as OrSelectV3 } from '../../OrSelect-9d6b3363.js';
 export { I as SelectSize } from '../../OrInputBox.vue_rollup-plugin-vue_script-fe250f7a.js';
 import 'vue-demi';
 import '../../dropdown-open-e1f90e0a.js';

package/dist/esm/v2/index.js

@@ -73,7 +73,7 @@ export { _ as OrSearch } from './OrSearch-330e9af0.js';
 export { _ as OrSearchV3 } from './OrSearch-7ccc1f33.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-a1ea5b72.js';
 export { _ as OrSelect } from './OrSelect-22eea9cc.js';
-export { _ as OrSelectV3 } from './OrSelect-9c8f96b2.js';
+export { _ as OrSelectV3 } from './OrSelect-9d6b3363.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-feacf13a.js';
 export { _ as OrSidebarV3 } from './OrSidebar-b8387abe.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-4bf3bad8.js';

package/dist/esm/v3/{OrSelect-b1d7651a.js → OrSelect-3dbddc6b.js}

@@ -359,12 +359,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       return openBlock(), createBlock(_component_OrTag, {
         key: option.value,
         variant: 'reset',
+        disabled: _ctx.disabled || _ctx.readonly,
         onReset: $event => _ctx.deselect(option)
       }, {
         default: withCtx(() => [createTextVNode(toDisplayString(option.label), 1 /* TEXT */)]),
 
         _: 2 /* DYNAMIC */
-      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onReset"]);
+      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["disabled", "onReset"]);
     }), 128 /* KEYED_FRAGMENT */)) : (openBlock(), createElementBlock("span", {
       key: 1,
       class: normalizeClass(_ctx.placeholderStyles)

package/dist/esm/v3/components/index.js

@@ -71,7 +71,7 @@ export { s as OrSearch } from '../OrSearch-f4ad73db.js';
 export { s as OrSearchV3 } from '../OrSearch-e15c7fd2.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-359fbf3a.js';
 export { s as OrSelect } from '../OrSelect-6ff34196.js';
-export { s as OrSelectV3 } from '../OrSelect-b1d7651a.js';
+export { s as OrSelectV3 } from '../OrSelect-3dbddc6b.js';
 export { s as OrSidebar, O as OrSidebarSide } from '../OrSidebar-375c85a3.js';
 export { s as OrSidebarV3 } from '../OrSidebar-bfd19c4c.js';
 export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-63914891.js';

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

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from '../../OrSelect-b1d7651a.js';
+export { s as OrSelectV3 } from '../../OrSelect-3dbddc6b.js';
 export { I as SelectSize } from '../../OrInputBox-ba40bbdf.js';
 import 'vue-demi';
 import '../../dropdown-open-e1f90e0a.js';

package/dist/esm/v3/index.js

@@ -71,7 +71,7 @@ export { s as OrSearch } from './OrSearch-f4ad73db.js';
 export { s as OrSearchV3 } from './OrSearch-e15c7fd2.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-359fbf3a.js';
 export { s as OrSelect } from './OrSelect-6ff34196.js';
-export { s as OrSelectV3 } from './OrSelect-b1d7651a.js';
+export { s as OrSelectV3 } from './OrSelect-3dbddc6b.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-375c85a3.js';
 export { s as OrSidebarV3 } from './OrSidebar-bfd19c4c.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-63914891.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "4.3.11",
+  "version": "4.3.12-beta.2674.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -153,6 +153,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "b11ae2e324c85b8d9a760aa7027fc6fdd2796bcc"
+  }
 }

package/src/components/or-select-v3/OrSelect.stories3.ts

@@ -168,7 +168,7 @@ const Template: StoryFn<typeof OrSelect> = (args) => ({
 
   setup() {
     // State
-    const model = ref<string | string[]>();
+    const model = ref<string | string[]>(args.modelValue);
     const searchOptions = ref<SelectOption[]>(args.options);
 
     // Handlers
@@ -468,3 +468,41 @@ WithLongStrings.args = {
 
   placeholder: 'Wery Wery Wery WeryWeryWeryWery Wery Wery long placeholder',
 };
+
+export const MultipleReadonly = Template.bind({});
+
+MultipleReadonly.args = {
+  ...Default.args,
+  readonly: true,
+  options: Array.from<string, SelectOption>([
+    'Alfa',
+    'Bravo',
+    'Charlie',
+    'Delta',
+    'Echo',
+  ], (item) => ({
+    value: item.toLowerCase().replace(/\s/g, ''),
+    label: item,
+  })),
+  multiple: true,
+  modelValue: ['alfa', 'bravo'],
+};
+export const MultipleDisabled = Template.bind({});
+
+MultipleDisabled.args = {
+  ...Default.args,
+  options: Array.from<string, SelectOption>([
+    'Alfa',
+    'Bravo',
+    'Charlie',
+    'Delta',
+    'Echo',
+  ], (item) => ({
+    value: item.toLowerCase().replace(/\s/g, ''),
+    label: item,
+  })),
+  disabled: true,
+  multiple: true,
+  modelValue: ['alfa', 'bravo'],
+  paceholder: 'disabled placeholder',
+};

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

@@ -48,6 +48,7 @@
                 v-for="option in selection"
                 :key="option.value"
                 :variant="'reset'"
+                :disabled="disabled || readonly"
                 @reset="deselect(option)"
               >
                 {{ option.label }}