@onereach/ui-components 4.3.11-beta.2664.0 → 4.3.11-beta.2667.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/v2/components/OrTextV3/OrText.js

@@ -38,19 +38,19 @@ var script = defineComponent({
     const mainTextStyles = computed(() => [...MainText]);
     const restTextStyles = computed(() => [...RestText]);
     /**
-     * Preserves whitespace at the first position as <code>&nbsp;</code>
+     * Preserves whitespace at the last position as <code>&nbsp;</code>
      * @param str A string to escape
      */
-    const escapeFirst = str => str && '\xa0' + str.slice(1);
+    const escapeLast = str => str && str.slice(0, -1) + '\xa0';
     /**
-     * Preserves whitespace at the last position as <code>&nbsp;</code>
+     * Preserves whitespace at the first position as <code>&nbsp;</code>
      * @param str A string to escape
      */
-    const escapeLast = str => str && str.slice(0, -1) + '\xa0';
+    const escapeFirst = str => str && '\xa0' + str.slice(1);
     // State
     const mainText = computed(() => {
-      if (props.sliceIndex && props.sliceIndex < props.text.length) {
-        let mainPart = props.text.slice(0, Math.abs(props.sliceIndex) * -1);
+      if (props.sliceIndex) {
+        let mainPart = props.text.slice(0, -Math.abs(props.sliceIndex));
         if (mainPart[mainPart.length - 1] === ' ') {
           mainPart = escapeLast(mainPart);
         }

package/dist/bundled/v3/{OrText.vue_vue_type_script_lang-6ce019db.js → OrText.vue_vue_type_script_lang-23ff666f.js}

@@ -37,19 +37,19 @@ var script = defineComponent({
     const mainTextStyles = computed(() => [...MainText]);
     const restTextStyles = computed(() => [...RestText]);
     /**
-     * Preserves whitespace at the first position as <code>&nbsp;</code>
+     * Preserves whitespace at the last position as <code>&nbsp;</code>
      * @param str A string to escape
      */
-    const escapeFirst = str => str && '\xa0' + str.slice(1);
+    const escapeLast = str => str && str.slice(0, -1) + '\xa0';
     /**
-     * Preserves whitespace at the last position as <code>&nbsp;</code>
+     * Preserves whitespace at the first position as <code>&nbsp;</code>
      * @param str A string to escape
      */
-    const escapeLast = str => str && str.slice(0, -1) + '\xa0';
+    const escapeFirst = str => str && '\xa0' + str.slice(1);
     // State
     const mainText = computed(() => {
-      if (props.sliceIndex && props.sliceIndex < props.text.length) {
-        let mainPart = props.text.slice(0, Math.abs(props.sliceIndex) * -1);
+      if (props.sliceIndex) {
+        let mainPart = props.text.slice(0, -Math.abs(props.sliceIndex));
         if (mainPart[mainPart.length - 1] === ' ') {
           mainPart = escapeLast(mainPart);
         }

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/bundled/v3/components/OrTextV3/OrText.js

@@ -1,5 +1,5 @@
-import { s as script } from '../../OrText.vue_vue_type_script_lang-6ce019db.js';
-export { s as default } from '../../OrText.vue_vue_type_script_lang-6ce019db.js';
+import { s as script } from '../../OrText.vue_vue_type_script_lang-23ff666f.js';
+export { s as default } from '../../OrText.vue_vue_type_script_lang-23ff666f.js';
 import { openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString } from 'vue';
 import 'vue-demi';
 import './styles.js';

package/dist/bundled/v3/components/OrTextV3/index.js

@@ -1,3 +1,3 @@
-export { s as OrTextV3 } from '../../OrText.vue_vue_type_script_lang-6ce019db.js';
+export { s as OrTextV3 } from '../../OrText.vue_vue_type_script_lang-23ff666f.js';
 import 'vue-demi';
 import './styles.js';

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

@@ -135,7 +135,7 @@ export { s as OrTagV3 } from '../OrTag.vue_vue_type_script_lang-8643b784.js';
 export { TagColor, TagVariant } from './OrTagV3/props.js';
 export { default as OrTeleport } from './OrTeleport/OrTeleport.js';
 export { s as OrTeleportV3 } from '../OrTeleport.vue3.vue_vue_type_script_lang-a6ce162e.js';
-export { s as OrTextV3 } from '../OrText.vue_vue_type_script_lang-6ce019db.js';
+export { s as OrTextV3 } from '../OrText.vue_vue_type_script_lang-23ff666f.js';
 export { s as OrTextarea } from '../OrTextarea.vue_vue_type_script_lang-048cb245.js';
 export { s as OrTextareaV3 } from '../OrTextarea.vue_vue_type_script_lang-f287189f.js';
 export { s as OrTextbox } from '../OrTextbox.vue_vue_type_script_lang-dad835c3.js';

package/dist/bundled/v3/index.js

@@ -110,7 +110,7 @@ export { s as OrTabsV3 } from './OrTabs.vue_vue_type_script_lang-6d47e560.js';
 import './components/OrTag/OrTag.js';
 export { s as OrTag } from './OrTag.vue_vue_type_script_lang-4e98d8a0.js';
 import './components/OrTextV3/OrText.js';
-export { s as OrTextV3 } from './OrText.vue_vue_type_script_lang-6ce019db.js';
+export { s as OrTextV3 } from './OrText.vue_vue_type_script_lang-23ff666f.js';
 import './components/OrTextarea/OrTextarea.js';
 export { s as OrTextarea } from './OrTextarea.vue_vue_type_script_lang-048cb245.js';
 import './components/OrTextareaV3/OrTextarea.js';

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/{OrText-44449e7b.js → OrText-6097bca5.js}

@@ -53,19 +53,19 @@ var script = defineComponent({
     const mainTextStyles = computed(() => [...MainText]);
     const restTextStyles = computed(() => [...RestText]);
     /**
-     * Preserves whitespace at the first position as <code>&nbsp;</code>
+     * Preserves whitespace at the last position as <code>&nbsp;</code>
      * @param str A string to escape
      */
-    const escapeFirst = str => str && '\xa0' + str.slice(1);
+    const escapeLast = str => str && str.slice(0, -1) + '\xa0';
     /**
-     * Preserves whitespace at the last position as <code>&nbsp;</code>
+     * Preserves whitespace at the first position as <code>&nbsp;</code>
      * @param str A string to escape
      */
-    const escapeLast = str => str && str.slice(0, -1) + '\xa0';
+    const escapeFirst = str => str && '\xa0' + str.slice(1);
     // State
     const mainText = computed(() => {
-      if (props.sliceIndex && props.sliceIndex < props.text.length) {
-        let mainPart = props.text.slice(0, Math.abs(props.sliceIndex) * -1);
+      if (props.sliceIndex) {
+        let mainPart = props.text.slice(0, -Math.abs(props.sliceIndex));
         if (mainPart[mainPart.length - 1] === ' ') {
           mainPart = escapeLast(mainPart);
         }

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';
@@ -98,7 +98,7 @@ export { _ as OrTag } from '../OrTag-8ded4261.js';
 export { _ as OrTagV3, a as TagColor, T as TagVariant } from '../OrTag-843ec724.js';
 export { _ as OrTeleport } from '../OrTeleport.vue2-f0c16c71.js';
 export { _ as OrTeleportV3 } from '../OrTeleport.vue2-424c7f33.js';
-export { _ as OrTextV3 } from '../OrText-44449e7b.js';
+export { _ as OrTextV3 } from '../OrText-6097bca5.js';
 export { _ as OrTextarea } from '../OrTextarea-226ab7a2.js';
 export { _ as OrTextareaV3 } from '../OrTextarea-800f63d4.js';
 export { _ as OrTextbox, T as TextboxTypes } from '../OrTextbox-90badc95.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/components/or-text-v3/index.js

@@ -1,3 +1,3 @@
-export { _ as OrTextV3 } from '../../OrText-44449e7b.js';
+export { _ as OrTextV3 } from '../../OrText-6097bca5.js';
 import 'vue-demi';
 import '../../normalize-component-6e8e3d80.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';
@@ -98,7 +98,7 @@ export { _ as OrTag } from './OrTag-8ded4261.js';
 export { _ as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-843ec724.js';
 export { _ as OrTeleport } from './OrTeleport.vue2-f0c16c71.js';
 export { _ as OrTeleportV3 } from './OrTeleport.vue2-424c7f33.js';
-export { _ as OrTextV3 } from './OrText-44449e7b.js';
+export { _ as OrTextV3 } from './OrText-6097bca5.js';
 export { _ as OrTextarea } from './OrTextarea-226ab7a2.js';
 export { _ as OrTextareaV3 } from './OrTextarea-800f63d4.js';
 export { _ as OrTextbox, T as TextboxTypes } from './OrTextbox-90badc95.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/{OrText-d54c951d.js → OrText-de6b2fe2.js}

@@ -53,19 +53,19 @@ var script = defineComponent({
     const mainTextStyles = computed(() => [...MainText]);
     const restTextStyles = computed(() => [...RestText]);
     /**
-     * Preserves whitespace at the first position as <code>&nbsp;</code>
+     * Preserves whitespace at the last position as <code>&nbsp;</code>
      * @param str A string to escape
      */
-    const escapeFirst = str => str && '\xa0' + str.slice(1);
+    const escapeLast = str => str && str.slice(0, -1) + '\xa0';
     /**
-     * Preserves whitespace at the last position as <code>&nbsp;</code>
+     * Preserves whitespace at the first position as <code>&nbsp;</code>
      * @param str A string to escape
      */
-    const escapeLast = str => str && str.slice(0, -1) + '\xa0';
+    const escapeFirst = str => str && '\xa0' + str.slice(1);
     // State
     const mainText = computed(() => {
-      if (props.sliceIndex && props.sliceIndex < props.text.length) {
-        let mainPart = props.text.slice(0, Math.abs(props.sliceIndex) * -1);
+      if (props.sliceIndex) {
+        let mainPart = props.text.slice(0, -Math.abs(props.sliceIndex));
         if (mainPart[mainPart.length - 1] === ' ') {
           mainPart = escapeLast(mainPart);
         }

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';
@@ -96,7 +96,7 @@ export { s as OrTag } from '../OrTag-2d9eacf8.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from '../OrTag-6116c6e3.js';
 export { s as OrTeleport } from '../OrTeleport.vue3-9bce0c02.js';
 export { s as OrTeleportV3 } from '../OrTeleport.vue3-8099178c.js';
-export { s as OrTextV3 } from '../OrText-d54c951d.js';
+export { s as OrTextV3 } from '../OrText-de6b2fe2.js';
 export { s as OrTextarea } from '../OrTextarea-f6722edc.js';
 export { s as OrTextareaV3 } from '../OrTextarea-fa1454e3.js';
 export { s as OrTextbox, T as TextboxTypes } from '../OrTextbox-6e585202.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/components/or-text-v3/index.js

@@ -1,3 +1,3 @@
-export { s as OrTextV3 } from '../../OrText-d54c951d.js';
+export { s as OrTextV3 } from '../../OrText-de6b2fe2.js';
 import 'vue-demi';
 import 'vue';

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';
@@ -96,7 +96,7 @@ export { s as OrTag } from './OrTag-2d9eacf8.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-6116c6e3.js';
 export { s as OrTeleport } from './OrTeleport.vue3-9bce0c02.js';
 export { s as OrTeleportV3 } from './OrTeleport.vue3-8099178c.js';
-export { s as OrTextV3 } from './OrText-d54c951d.js';
+export { s as OrTextV3 } from './OrText-de6b2fe2.js';
 export { s as OrTextarea } from './OrTextarea-f6722edc.js';
 export { s as OrTextareaV3 } from './OrTextarea-fa1454e3.js';
 export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-6e585202.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "4.3.11-beta.2664.0",
+  "version": "4.3.11-beta.2667.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",

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 }}

package/src/components/or-text-v3/OrText.vue

@@ -70,26 +70,23 @@ export default defineComponent({
     ]);
 
     /**
-     * Preserves whitespace at the first position as <code>&nbsp;</code>
+     * Preserves whitespace at the last position as <code>&nbsp;</code>
      * @param str A string to escape
      */
-    const escapeFirst = (str: string): string => str && ('\xa0' + str.slice(1));
-
+    const escapeLast = (str: string): string => str && (str.slice(0, -1) + '\xa0');
     /**
-     * Preserves whitespace at the last position as <code>&nbsp;</code>
+     * Preserves whitespace at the first position as <code>&nbsp;</code>
      * @param str A string to escape
      */
-    const escapeLast = (str: string): string => str && (str.slice(0, -1) + '\xa0');
+    const escapeFirst = (str: string): string => str && ('\xa0' + str.slice(1));
 
     // State
     const mainText = computed(() => {
-      if (props.sliceIndex && props.sliceIndex < props.text.length) {
-        let mainPart = props.text.slice(0, Math.abs(props.sliceIndex) * -1);
-
+      if (props.sliceIndex) {
+        let mainPart = props.text.slice(0, -Math.abs(props.sliceIndex));
         if (mainPart[mainPart.length - 1] === ' ') {
           mainPart = escapeLast(mainPart);
         }
-
         return mainPart;
       }
 
@@ -98,11 +95,9 @@ export default defineComponent({
 
     const restText = computed(() => {
       let restPart = props.text.slice(mainText.value.length);
-
       if (restPart[0] === ' ') {
         restPart = escapeFirst(restPart);
       }
-
       return restPart;
     });