@onereach/ui-components 20.3.0-beta.5250.0 → 20.3.0-beta.5253.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<Omit<FormGroupSpacing, "none">>;
+        default: FormGroupSpacing;
+    };
 }, {
     proxyModelValue: import("@onereach/ui-components-common/hooks").UseProxyModelValueReturn<string[]>;
+    isMobile: import("vue").ComputedRef<boolean>;
 }, 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<Omit<FormGroupSpacing, "none">>;
+        default: FormGroupSpacing;
+    };
 }>>, {
     modelValue: string[];
     label: string;
@@ -78,5 +87,6 @@ declare const _default: import("vue").DefineComponent<{
     options: CheckboxTreeNode[];
     disabled: boolean;
     readonly: boolean;
+    spacing: Omit<FormGroupSpacing, "none">;
 }, {}>;
 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 { 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,20 @@ 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();
     return {
-      proxyModelValue
+      proxyModelValue,
+      isMobile
     };
   }
 });
@@ -91,7 +99,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.isMobile ? 'none' : _ctx.spacing
   }, {
     addon: withCtx(() => [renderSlot(_ctx.$slots, "addon")]),
     default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, option => {
@@ -107,7 +116,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-v3/index.js

@@ -32,7 +32,7 @@ const Checkbox = [
 // 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 CheckboxControl = [
 // Layout
 'layout-inline-row justify-center',

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'];
+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-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/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-beta.5253.0",
   "description": "Vue components library for v3",
   "sideEffects": false,
   "exports": {