@onereach/ui-components-vue2 20.3.0-beta.5253.0 → 20.3.0

package/dist/esm/components/or-checkbox-group-v3/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, toRef } from 'vue-demi';
+import { defineComponent, toRef, computed } from 'vue-demi';
 import { a as re, n as ne } from '../../useValidationAttributes-w0RCHARs-21132c84.js';
 import { OrCheckboxTreeV3 as OrCheckboxTree } from '../or-checkbox-tree-v3/index.js';
 import { OrFormGroupV3 as OrFormGroup, FormGroupDirection, FormGroupSpacing } from '../or-form-group-v3/index.js';
@@ -73,9 +73,10 @@ var script = defineComponent({
     const {
       isMobile
     } = ne();
+    const localSpacing = computed(() => isMobile.value ? FormGroupSpacing.NONE : props.spacing);
     return {
       proxyModelValue,
-      isMobile
+      localSpacing
     };
   }
 });
@@ -95,7 +96,7 @@ var __vue_render__ = function () {
       "hint": _vm.hint,
       "disabled": _vm.disabled,
       "direction": _vm.direction,
-      "spacing": _vm.isMobile ? 'none' : _vm.spacing
+      "spacing": _vm.localSpacing
     },
     scopedSlots: _vm._u([{
       key: "addon",

package/dist/esm/components/or-checkbox-tree-v3/index.js

@@ -20,7 +20,7 @@ const CheckboxTreeRoot = [
 // Layout
 'flex', 'flex-col',
 // Spacing
-'gap-sm+ md:gap-sm'];
+'md:gap-sm'];
 const CheckboxTreeRootParent = [
 // Layout
 'flex', 'flex-row', 'gap-xs'];

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

@@ -14,7 +14,7 @@ const Checkbox = [
 // Layout
 'layout-row',
 // Spacing
-'gap-[10px] md:gap-sm', 'p-sm pl-[10px] md:p-none md:pl-none'];
+'md:gap-sm'];
 const CheckboxControl = [
 // Layout
 'layout-inline-row justify-center',
@@ -23,7 +23,7 @@ const CheckboxControl = [
 // Shape
 'rounded-sm leading-[0]',
 // Box
-'w-md+ md:w-md', 'h-md+ md:h-md',
+'w-md+ md:w-md', 'h-md+ md:h-md', 'm-[10px] md:m-none',
 // Iconography
 'iconography-outlined',
 // Theme

package/dist/esm/components/or-data-grid-v3/index.js

@@ -1588,6 +1588,7 @@ var __vue_render__ = function () {
       "variant": _vm.variant
     }
   }, [_vm.features.selecting ? [_c('OrDataGridTableHeaderCell', {
+    staticClass: "!py-xs !px-xs md:!py-none md:!px-sm+",
     attrs: {
       "column": {
         stickiness: 'start'
@@ -1668,6 +1669,7 @@ var __vue_render__ = function () {
         "selected": _vm.selectingModel.includes(item.id)
       }
     }, [_vm.features.selecting ? [_c('OrDataGridTableContentCell', {
+      staticClass: "!py-xs !px-xs md:!py-none md:!px-sm+",
       attrs: {
         "column": {
           stickiness: 'start'

package/dist/esm/components/or-form-group-v3/index.js

@@ -21,7 +21,7 @@ const FormGroup = [
 // Layout
 'layout-column',
 // Spacing
-'gap-md md:gap-sm'];
+'gap-sm'];
 const FormGroupContent = [];
 const FormGroupContentDirections = {
   [FormGroupDirection.Vertical]: [

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

@@ -197,7 +197,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "input[data-v-48913112]{min-width:0;background:0 0;outline:0}input[type=search][data-v-48913112]::-webkit-search-cancel-button{display:none}";
+var css_248z = "input[data-v-3d8fe668]{min-width:0;background:0 0;outline:0}input[type=search][data-v-3d8fe668]::-webkit-search-cancel-button{display:none}";
 styleInject(css_248z);
 
 /* script */
@@ -227,7 +227,7 @@ var __vue_render__ = function () {
   }, [_vm._t("label", function () {
     return [_vm._v("\n        " + _vm._s(_vm.label) + "\n      ")];
   })], 2)] : _vm._e(), _vm._v(" "), _c('div', {
-    staticClass: "layout-row gap-sm+ md:gap-sm"
+    staticClass: "layout-row gap-md md:gap-md"
   }, [_vm._t("prepend"), _vm._v(" "), _c('OrInputBox', {
     attrs: {
       "variant": _vm.variant,
@@ -258,6 +258,7 @@ var __vue_render__ = function () {
                 icon: _vm.disclosed ? 'visibility' : 'visibility_off',
                 variant: 'filled'
               },
+              "size": 'l',
               "color": 'inherit',
               "disabled": _vm.disabled
             },
@@ -271,6 +272,7 @@ var __vue_render__ = function () {
             attrs: {
               "icon": 'close',
               "color": 'inherit',
+              "size": 'l',
               "disabled": _vm.disabled
             },
             on: {
@@ -282,6 +284,7 @@ var __vue_render__ = function () {
           })] : [_c('OrIcon', {
             attrs: {
               "icon": 'search',
+              "size": 'l',
               "variant": 'outlined'
             }
           })]] : _vm._e()]];
@@ -381,7 +384,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-48913112";
+const __vue_scope_id__ = "data-v-3d8fe668";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/esm/components/or-radio-group-v3/index.js

@@ -1,6 +1,6 @@
-import { defineComponent, toRef } from 'vue-demi';
-import { a as re } from '../../useValidationAttributes-w0RCHARs-21132c84.js';
-import { OrFormGroupV3 as OrFormGroup, FormGroupDirection } from '../or-form-group-v3/index.js';
+import { defineComponent, toRef, computed } from 'vue-demi';
+import { a as re, n as ne } from '../../useValidationAttributes-w0RCHARs-21132c84.js';
+import { OrFormGroupV3 as OrFormGroup, FormGroupDirection, FormGroupSpacing } from '../or-form-group-v3/index.js';
 import { OrRadioV3 as OrRadio } from '../or-radio-v3/index.js';
 import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
 import '../../dom-DzNS5tBj-6d9cf0ef.js';
@@ -56,14 +56,23 @@ var script = defineComponent({
     readonly: {
       type: Boolean,
       default: false
+    },
+    spacing: {
+      type: String,
+      default: FormGroupSpacing.SM
     }
   },
   emits: ['update:modelValue'],
   setup(props, context) {
     // State
     const proxyModelValue = re(toRef(props, 'modelValue'), context.emit);
+    const {
+      isMobile
+    } = ne();
+    const localSpacing = computed(() => isMobile.value ? FormGroupSpacing.NONE : props.spacing);
     return {
-      proxyModelValue
+      proxyModelValue,
+      localSpacing
     };
   }
 });
@@ -82,7 +91,8 @@ var __vue_render__ = function () {
       "label": _vm.label,
       "hint": _vm.hint,
       "error": _vm.error,
-      "disabled": _vm.disabled
+      "disabled": _vm.disabled,
+      "spacing": _vm.localSpacing
     },
     scopedSlots: _vm._u([{
       key: "addon",

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

@@ -671,11 +671,20 @@ const SelectDropdownItem = [
 // Typography
 '!typography-body-2-regular',
 // Padding Override todo: check design
-'!py-md md:!pt-[6px] md:!pb-[7px]',
+'md:!pt-[6px] md:!pb-[7px]',
 // Typography (selected)
 'selected:!typography-body-2-semibold',
 // Theme
 '!theme-foreground-default dark:!theme-foreground-default-dark'];
+const SelectDropdownItemPaddingSingle = [
+// Padding Override
+'!py-md md:!pt-[6px] md:!pb-[7px]'];
+const SelectDropdownItemPaddingMultiple = [
+// Padding Override
+'md:!pt-[6px] md:!pb-[7px]'];
+const SelectDropdownItemPaddingMultipleMobile = [
+// Padding Override
+'px-md'];
 const SelectNoSearchResults = [
 // Layout
 'layout-row justify-center',
@@ -898,7 +907,7 @@ var script = defineComponent({
       return ['or-select-popover-v3', ...SelectDropdown, ...(((_a = popover.value) === null || _a === void 0 ? void 0 : _a.isFlipped) ? SelectDropdownFlipped : SelectDropdownDefault)];
     });
     const dropdownContainerStyles = computed(() => [isMobile.value ? 'layout-column' : 'contains', bottomSheetFullscreen.value ? 'overflow-y-auto' : 'overflow-hidden']);
-    const dropdownItemStyles = computed(() => [...SelectDropdownItem]);
+    const dropdownItemStyles = computed(() => [...SelectDropdownItem, ...(props.multiple ? SelectDropdownItemPaddingMultiple : SelectDropdownItemPaddingSingle), ...(isMobile.value ? SelectDropdownItemPaddingMultipleMobile : [])]);
     const noSearchResultsStyles = computed(() => [...SelectNoSearchResults]);
     const loaderStyles = computed(() => [...SelectLoader]);
     // Methods

package/dist/esm/components/or-select-v3/styles.d.ts

@@ -5,5 +5,8 @@ export declare const SelectDropdown: string[];
 export declare const SelectDropdownDefault: string[];
 export declare const SelectDropdownFlipped: string[];
 export declare const SelectDropdownItem: string[];
+export declare const SelectDropdownItemPaddingSingle: string[];
+export declare const SelectDropdownItemPaddingMultiple: string[];
+export declare const SelectDropdownItemPaddingMultipleMobile: string[];
 export declare const SelectNoSearchResults: string[];
 export declare const SelectLoader: string[];

package/dist/esm/components/or-tag-input-v3/index.js

@@ -212,6 +212,7 @@ var script = defineComponent({
       if (maxLength.value && currentLength.value >= maxLength.value) return;
       proxyModelValue.value = $s(newItem, (_b = proxyModelValue.value) !== null && _b !== void 0 ? _b : []);
       draftModelValue.value = '';
+      nextTick(() => focus());
     }
     function remove(value) {
       var _a;
@@ -234,7 +235,8 @@ var script = defineComponent({
     });
     watch(proxyModelValue, (items, prevItems) => {
       var _a;
-      if ((items === null || items === void 0 ? void 0 : items.length) !== (prevItems === null || prevItems === void 0 ? void 0 : prevItems.length) && overflow.value === TagsOverflow.Scroll) {
+      if (overflow.value !== TagsOverflow.Scroll) return;
+      if ((items === null || items === void 0 ? void 0 : items.length) !== (prevItems === null || prevItems === void 0 ? void 0 : prevItems.length)) {
         ((_a = tags.value) === null || _a === void 0 ? void 0 : _a.scrollToEnd)();
       }
     });
@@ -270,7 +272,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "input[data-v-1c67f075]{min-width:0;background:0 0;outline:0}";
+var css_248z = "input[data-v-1dce37a5]{min-width:0;background:0 0;outline:0}";
 styleInject(css_248z);
 
 /* script */
@@ -480,7 +482,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-1c67f075";
+const __vue_scope_id__ = "data-v-1dce37a5";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components-vue2",
-  "version": "20.3.0-beta.5253.0",
+  "version": "20.3.0",
   "description": "Vue components library for v2",
   "sideEffects": false,
   "exports": {
@@ -39,8 +39,8 @@
     "@codemirror/view": "^6",
     "@floating-ui/dom": "1.5.3",
     "@lezer/highlight": "*",
-    "@onereach/styles": "^20.2.0",
-    "@onereach/ui-components-common": "^20.2.0",
+    "@onereach/styles": "^20.3.0",
+    "@onereach/ui-components-common": "^20.3.0",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -103,5 +103,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "npmUnpacked": "4.15.2"
+  "npmUnpacked": "4.15.2",
+  "gitHead": "da62f7d2af0507ea35abbe990f2c03918721e4f6"
 }