@onereach/ui-components 20.2.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/components/or-textarea-v3/index.js

@@ -129,10 +129,11 @@ var script = defineComponent({
     const control = ref();
     const controlStyles = computed(() => [...TextareaControl, ...TextareaControlSizes[props.size], ...(_(props.rows) ? ['resize-none'] : [])]);
     const controlInlineStyles = computed(() => {
+      var _a, _b, _c, _d, _e, _f;
       if (control.value) {
-        const paddingTop = Number(getComputedStyle(control.value).getPropertyValue('padding-top').match(/^(?<value>\d+)px$/).groups.value);
-        const paddingBottom = Number(getComputedStyle(control.value).getPropertyValue('padding-bottom').match(/^(?<value>\d+)px$/).groups.value);
-        const lineHeight = Number(getComputedStyle(control.value).getPropertyValue('line-height').match(/^(?<value>\d+)px$/).groups.value);
+        const paddingTop = Number(((_b = (_a = getComputedStyle(control.value).getPropertyValue('padding-top').match(/^(?<value>\d+)px$/)) === null || _a === void 0 ? void 0 : _a.groups) === null || _b === void 0 ? void 0 : _b.value) || 0);
+        const paddingBottom = Number(((_d = (_c = getComputedStyle(control.value).getPropertyValue('padding-bottom').match(/^(?<value>\d+)px$/)) === null || _c === void 0 ? void 0 : _c.groups) === null || _d === void 0 ? void 0 : _d.value) || 0);
+        const lineHeight = Number(((_f = (_e = getComputedStyle(control.value).getPropertyValue('line-height').match(/^(?<value>\d+)px$/)) === null || _e === void 0 ? void 0 : _e.groups) === null || _f === void 0 ? void 0 : _f.value) || 0);
         return {
           minHeight: `${paddingTop + paddingBottom + (_(props.rows) ? props.rows.min : props.rows) * lineHeight}px`,
           maxHeight: _(props.rows) && props.rows.max ? `${paddingTop + paddingBottom + props.rows.max * lineHeight}px` : undefined

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.2.0",
+  "version": "20.3.0-beta.5253.0",
   "description": "Vue components library for v3",
   "sideEffects": false,
   "exports": {
@@ -29,9 +29,7 @@
   ],
   "scripts": {
     "build": "rollup --config rollup.config.js --preserveSymlinks --bundleConfigAsCjs",
-    "dev": "ROLLUP_WATCH=true pnpm build -w",
-    "make-symlinks": "./scripts/make-symlinks.sh",
-    "prepare": "pnpm make-symlinks"
+    "dev": "ROLLUP_WATCH=true pnpm build -w"
   },
   "dependencies": {
     "@codemirror/commands": "6.2.4",
@@ -106,6 +104,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "npmUnpacked": "4.15.2",
-  "gitHead": "1b353dbcacd7ee2de511ccbef960b71b41b774ad"
+  "npmUnpacked": "4.15.2"
 }