@onereach/ui-components 20.3.0-beta.5250.0 → 20.3.0

package/dist/esm/components/index.js

@@ -35,7 +35,7 @@ export { FabColor, OrFabV3 } from './or-fab-v3/index.js';
 export { OrFilterPopoverV3 } from './or-filter-popover-v3/index.js';
 export { OrFilterTriggerV3 } from './or-filter-trigger-v3/index.js';
 export { OrFilterV3 } from './or-filter-v3/index.js';
-export { FormGroupDirection, OrFormGroupV3 } from './or-form-group-v3/index.js';
+export { FormGroupDirection, FormGroupSpacing, OrFormGroupV3 } from './or-form-group-v3/index.js';
 export { OrHintV3 } from './or-hint-v3/index.js';
 export { IconButtonColor, OrIconButtonV3 } from './or-icon-button-v3/index.js';
 export { IconSize, IconVariant, OrIconV3 } from './or-icon-v3/index.js';

package/dist/esm/components/or-checkbox-group-v3/OrCheckboxGroup.vue.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue';
 import { CheckboxTreeNode } from '@onereach/ui-components.or-checkbox-tree-v3';
-import { FormGroupDirection } from '@onereach/ui-components.or-form-group-v3';
+import { FormGroupDirection, FormGroupSpacing } from '@onereach/ui-components.or-form-group-v3';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: PropType<string[]>;
@@ -34,8 +34,13 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    spacing: {
+        type: PropType<"none" | "sm" | "md">;
+        default: FormGroupSpacing;
+    };
 }, {
     proxyModelValue: import("@onereach/ui-components-common/hooks").UseProxyModelValueReturn<string[]>;
+    localSpacing: import("vue").ComputedRef<FormGroupSpacing.NONE | "none" | "sm" | "md">;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: PropType<string[]>;
@@ -69,6 +74,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    spacing: {
+        type: PropType<"none" | "sm" | "md">;
+        default: FormGroupSpacing;
+    };
 }>>, {
     modelValue: string[];
     label: string;
@@ -78,5 +87,6 @@ declare const _default: import("vue").DefineComponent<{
     options: CheckboxTreeNode[];
     disabled: boolean;
     readonly: boolean;
+    spacing: "none" | "sm" | "md";
 }, {}>;
 export default _default;

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

@@ -1,7 +1,7 @@
-import { defineComponent, toRef, resolveComponent, openBlock, createBlock, withCtx, renderSlot, createElementBlock, Fragment, renderList } from 'vue';
-import { r as re } from '../OrAutocompleteV3-fd7065f1.js';
+import { defineComponent, toRef, computed, resolveComponent, openBlock, createBlock, withCtx, renderSlot, createElementBlock, Fragment, renderList } from 'vue';
+import { r as re, n as ne } from '../OrAutocompleteV3-fd7065f1.js';
 import { OrCheckboxTreeV3 as script$1 } from '../or-checkbox-tree-v3/index.js';
-import { OrFormGroupV3 as script$2, FormGroupDirection } from '../or-form-group-v3/index.js';
+import { OrFormGroupV3 as script$2, FormGroupDirection, FormGroupSpacing } from '../or-form-group-v3/index.js';
 import '@vueuse/core';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
@@ -73,12 +73,21 @@ var script = defineComponent({
     readonly: {
       type: Boolean,
       default: false
+    },
+    spacing: {
+      type: String,
+      default: FormGroupSpacing.SM
     }
   },
   setup(props, context) {
     const proxyModelValue = re(toRef(props, 'modelValue'), context.emit);
+    const {
+      isMobile
+    } = ne();
+    const localSpacing = computed(() => isMobile.value ? FormGroupSpacing.NONE : props.spacing);
     return {
-      proxyModelValue
+      proxyModelValue,
+      localSpacing
     };
   }
 });
@@ -91,7 +100,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     error: _ctx.error,
     hint: _ctx.hint,
     disabled: _ctx.disabled,
-    direction: _ctx.direction
+    direction: _ctx.direction,
+    spacing: _ctx.localSpacing
   }, {
     addon: withCtx(() => [renderSlot(_ctx.$slots, "addon")]),
     default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, option => {
@@ -107,7 +117,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 8 /* PROPS */, ["modelValue", "item", "disabled", "readonly", "collapsible", "expanded"]);
     }), 128 /* KEYED_FRAGMENT */))]),
     _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["label", "error", "hint", "disabled", "direction"]);
+  }, 8 /* PROPS */, ["label", "error", "hint", "disabled", "direction", "spacing"]);
 }
 
 script.render = render;

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

@@ -33,7 +33,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

@@ -32,7 +32,7 @@ const Checkbox = [
 // Layout
 'layout-row',
 // Spacing
-'gap-sm+ md:gap-sm'];
+'md:gap-sm'];
 const CheckboxControl = [
 // Layout
 'layout-inline-row justify-center',
@@ -41,7 +41,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

@@ -1204,6 +1204,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           column: {
             stickiness: 'start'
           },
+          class: "!py-xs !px-xs md:!py-none md:!px-sm+",
           "onUpdate:scrollOffset": _ctx.updateScrollOffset,
           "onRemove:scrollOffset": _ctx.removeScrollOffset
         }, {
@@ -1282,7 +1283,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             column: {
               stickiness: 'start'
             },
-            "force-state": 'none'
+            "force-state": 'none',
+            class: "!py-xs !px-xs md:!py-none md:!px-sm+"
           }, {
             default: withCtx(() => [createVNode(_component_OrCheckbox, {
               modelValue: _ctx.selectingModel,

package/dist/esm/components/or-form-group-v3/OrFormGroup.vue.d.ts

@@ -1,5 +1,6 @@
 import { PropType } from 'vue';
 import { FormGroupDirection } from './types';
+import { FormGroupSpacing } from './props';
 declare const _default: import("vue").DefineComponent<{
     direction: {
         type: PropType<"vertical" | "horizontal">;
@@ -25,6 +26,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    spacing: {
+        type: PropType<"none" | "sm" | "md">;
+        default: FormGroupSpacing;
+    };
 }, {
     root: import("vue").Ref<HTMLElement | undefined>;
     rootStyles: import("vue").ComputedRef<string[]>;
@@ -54,6 +59,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    spacing: {
+        type: PropType<"none" | "sm" | "md">;
+        default: FormGroupSpacing;
+    };
 }>>, {
     direction: "vertical" | "horizontal";
     label: string;
@@ -61,5 +70,6 @@ declare const _default: import("vue").DefineComponent<{
     error: string | boolean;
     required: boolean;
     disabled: boolean;
+    spacing: "none" | "sm" | "md";
 }, {}>;
 export default _default;

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

@@ -1,2 +1,3 @@
 export { default as OrFormGroupV3 } from './OrFormGroup.vue';
 export * from './types';
+export * from './props';

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

@@ -9,14 +9,19 @@ var FormGroupDirection;
   FormGroupDirection["Horizontal"] = "horizontal";
 })(FormGroupDirection || (FormGroupDirection = {}));
 
+var FormGroupSpacing;
+(function (FormGroupSpacing) {
+  FormGroupSpacing["NONE"] = "none";
+  FormGroupSpacing["SM"] = "sm";
+  FormGroupSpacing["MD"] = "md";
+})(FormGroupSpacing || (FormGroupSpacing = {}));
+
 const FormGroup = [
 // Layout
 'layout-column',
 // Spacing
-'gap-md md:gap-sm'];
-const FormGroupContent = [
-// Spacing
-'gap-md md:gap-sm'];
+'gap-sm'];
+const FormGroupContent = [];
 const FormGroupContentDirections = {
   [FormGroupDirection.Vertical]: [
   // Layout
@@ -25,6 +30,15 @@ const FormGroupContentDirections = {
   // Layout
   'layout-row']
 };
+const FormGroupContentSpacing = {
+  [FormGroupSpacing.NONE]: [],
+  [FormGroupSpacing.SM]: [
+  // Spacing
+  'gap-sm'],
+  [FormGroupSpacing.MD]: [
+  // Spacing
+  'gap-md']
+};
 
 var script = defineComponent({
   name: 'OrFormGroup',
@@ -57,13 +71,17 @@ var script = defineComponent({
     disabled: {
       type: Boolean,
       default: false
+    },
+    spacing: {
+      type: String,
+      default: FormGroupSpacing.SM
     }
   },
   setup(props) {
     // Refs & Styles
     const root = ref();
     const rootStyles = computed(() => ['or-form-group-v3', ...FormGroup]);
-    const contentStyles = computed(() => [...FormGroupContent, ...FormGroupContentDirections[props.direction]]);
+    const contentStyles = computed(() => [...FormGroupContent, ...FormGroupContentDirections[props.direction], ...FormGroupContentSpacing[props.spacing]]);
     return {
       root,
       rootStyles,
@@ -108,4 +126,4 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 script.render = render;
 script.__file = "src/components/or-form-group-v3/OrFormGroup.vue";
 
-export { FormGroupDirection, script as OrFormGroupV3 };
+export { FormGroupDirection, FormGroupSpacing, script as OrFormGroupV3 };

package/dist/esm/components/or-form-group-v3/props.d.ts

@@ -0,0 +1,5 @@
+export declare enum FormGroupSpacing {
+    NONE = "none",
+    SM = "sm",
+    MD = "md"
+}

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

@@ -1,4 +1,6 @@
 import { FormGroupDirection } from './types';
+import { FormGroupSpacing } from './props';
 export declare const FormGroup: string[];
 export declare const FormGroupContent: string[];
 export declare const FormGroupContentDirections: Record<FormGroupDirection, string[]>;
+export declare const FormGroupContentSpacing: Record<FormGroupSpacing, string[]>;

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

@@ -200,7 +200,7 @@ var script = defineComponent({
 });
 
 const _hoisted_1 = {
-  class: "layout-row gap-sm+ md:gap-sm"
+  class: "layout-row gap-md md:gap-md"
 };
 const _hoisted_2 = ["name", "type", "inputmode", "autocomplete", "placeholder", "required", "readonly", "disabled"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -272,6 +272,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         icon: _ctx.disclosed ? 'visibility' : 'visibility_off',
         variant: 'filled'
       },
+      size: 'l',
       color: 'inherit',
       disabled: _ctx.disabled,
       onClick: _cache[6] || (_cache[6] = withModifiers($event => _ctx.disclosed = !_ctx.disclosed, ["stop"]))
@@ -281,11 +282,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       key: 0,
       icon: 'close',
       color: 'inherit',
+      size: 'l',
       disabled: _ctx.disabled,
       onClick: _cache[7] || (_cache[7] = withModifiers($event => _ctx.clear(), ["stop"]))
     }, null, 8 /* PROPS */, ["disabled"])) : (openBlock(), createBlock(_component_OrIcon, {
       key: 1,
       icon: 'search',
+      size: 'l',
       variant: 'outlined'
     }))], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */))])]),
     key: "1"

package/dist/esm/components/or-radio-group-v3/OrRadioGroup.vue.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { FormGroupDirection } from '@onereach/ui-components.or-form-group-v3';
+import { FormGroupDirection, FormGroupSpacing } from '@onereach/ui-components.or-form-group-v3';
 import { RadioModelValue } from '@onereach/ui-components.or-radio-v3';
 import { RadioGroupOption } from './types';
 declare const _default: import("vue").DefineComponent<{
@@ -35,8 +35,13 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    spacing: {
+        type: PropType<"none" | "sm" | "md">;
+        default: FormGroupSpacing;
+    };
 }, {
     proxyModelValue: import("@onereach/ui-components-common/hooks").UseProxyModelValueReturn<RadioModelValue>;
+    localSpacing: import("vue").ComputedRef<FormGroupSpacing.NONE | "none" | "sm" | "md">;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: PropType<RadioModelValue>;
@@ -70,6 +75,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    spacing: {
+        type: PropType<"none" | "sm" | "md">;
+        default: FormGroupSpacing;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -81,5 +90,6 @@ declare const _default: import("vue").DefineComponent<{
     error: string;
     disabled: boolean;
     readonly: boolean;
+    spacing: "none" | "sm" | "md";
 }, {}>;
 export default _default;

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

@@ -1,6 +1,6 @@
-import { defineComponent, toRef, resolveComponent, openBlock, createBlock, withCtx, renderSlot, createElementBlock, Fragment, renderList } from 'vue';
-import { r as re } from '../OrAutocompleteV3-fd7065f1.js';
-import { OrFormGroupV3 as script$1, FormGroupDirection } from '../or-form-group-v3/index.js';
+import { defineComponent, toRef, computed, resolveComponent, openBlock, createBlock, withCtx, renderSlot, createElementBlock, Fragment, renderList } from 'vue';
+import { r as re, n as ne } from '../OrAutocompleteV3-fd7065f1.js';
+import { OrFormGroupV3 as script$1, FormGroupDirection, FormGroupSpacing } from '../or-form-group-v3/index.js';
 import { OrRadioV3 as script$2 } from '../or-radio-v3/index.js';
 import '@vueuse/core';
 import '@onereach/styles/screens.json';
@@ -72,14 +72,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
     };
   }
 });
@@ -92,7 +101,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     label: _ctx.label,
     hint: _ctx.hint,
     error: _ctx.error,
-    disabled: _ctx.disabled
+    disabled: _ctx.disabled,
+    spacing: _ctx.localSpacing
   }, {
     addon: withCtx(() => [renderSlot(_ctx.$slots, "addon")]),
     default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, option => {
@@ -107,7 +117,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 8 /* PROPS */, ["modelValue", "value", "label", "disabled", "readonly"]);
     }), 128 /* KEYED_FRAGMENT */))]),
     _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["direction", "label", "hint", "error", "disabled"]);
+  }, 8 /* PROPS */, ["direction", "label", "hint", "error", "disabled", "spacing"]);
 }
 
 script.render = render;

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

@@ -32,7 +32,7 @@ const Radio = [
 // Layout
 'layout-row',
 // Spacing
-'gap-sm+ md:gap-sm'];
+'gap-[10px] md:gap-sm', 'p-sm pl-[10px] md:p-none md:pl-none'];
 const RadioControl = [
 // Layout
 'layout-inline-row justify-center',

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

@@ -529,11 +529,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',
@@ -756,7 +765,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

@@ -210,6 +210,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;
@@ -232,7 +233,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)();
       }
     });

package/dist/esm/index.js

@@ -58,7 +58,7 @@ export { EditorState } from '@codemirror/state';
 export { OrDatePickerV3 } from './components/or-date-picker-v3/index.js';
 export { OrErrorV3 } from './components/or-error-v3/index.js';
 export { ExpansionPanelBackgroundColor, ExpansionPanelColor, ExpansionPanelVariant, OrExpansionPanelV3 } from './components/or-expansion-panel-v3/index.js';
-export { FormGroupDirection, OrFormGroupV3 } from './components/or-form-group-v3/index.js';
+export { FormGroupDirection, FormGroupSpacing, OrFormGroupV3 } from './components/or-form-group-v3/index.js';
 export { OrHintV3 } from './components/or-hint-v3/index.js';
 export { IconButtonColor, OrIconButtonV3 } from './components/or-icon-button-v3/index.js';
 export { IconSize, IconVariant, OrIconV3 } from './components/or-icon-v3/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "20.3.0-beta.5250.0",
+  "version": "20.3.0",
   "description": "Vue components library for v3",
   "sideEffects": false,
   "exports": {
@@ -44,8 +44,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",
@@ -104,5 +104,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "npmUnpacked": "4.15.2"
+  "npmUnpacked": "4.15.2",
+  "gitHead": "da62f7d2af0507ea35abbe990f2c03918721e4f6"
 }