@onereach/ui-components 4.1.2 → 4.1.3-beta.2558.0

package/dist/bundled/v3/utils/functions/flattenDeep.d.ts

@@ -0,0 +1,2 @@
+declare function flattenDeep(arr?: any[]): any[];
+export default flattenDeep;

package/dist/bundled/v3/utils/functions/flattenDeep.js

@@ -0,0 +1,5 @@
+function flattenDeep(arr = []) {
+  return arr.flatMap(subArray => Array.isArray(subArray) ? flattenDeep(subArray) : subArray);
+}
+
+export { flattenDeep as default };

package/dist/esm/v2/{OrCheckbox-dc587ec9.js → OrCheckbox-e55228e5.js}

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, reactive } from 'vue-demi';
+import { useVModel } from '@vueuse/core';
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
-import '@vueuse/core';
 import { _ as __vue_component__$1, L as LabelVariant } from './OrLabel-63380256.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
@@ -46,12 +46,12 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: [Boolean, Array],
-      default: undefined
+      type: null,
+      default: null
     },
     value: {
-      type: String,
-      default: undefined
+      type: [String, Boolean, Number],
+      default: null
     },
     label: {
       type: String,
@@ -76,7 +76,9 @@ var script = defineComponent({
   },
   emits: ['update:modelValue', 'focus', 'blur'],
   expose: ['root', 'focus', 'blur'],
-  setup(props, context) {
+  setup(props, {
+    emit
+  }) {
     // Refs
     const root = ref();
     const control = ref();
@@ -88,13 +90,25 @@ var script = defineComponent({
       id: useIdAttribute(),
       ...useControlAttributes()
     });
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-      set: value => {
-        context.emit('update:modelValue', value);
+    const proxyModelValue = useVModel(props, 'modelValue', emit);
+    const isChecked = computed(() => {
+      if (Array.isArray(proxyModelValue.value)) {
+        return props.value && proxyModelValue.value.includes(props.value);
       }
+      return !!proxyModelValue.value;
     });
     // Methods
+    function handleChange() {
+      if (Array.isArray(proxyModelValue.value)) {
+        if (isChecked.value) {
+          proxyModelValue.value = proxyModelValue.value.filter(v => v !== props.value);
+        } else {
+          proxyModelValue.value = [...proxyModelValue.value, props.value];
+        }
+      } else {
+        proxyModelValue.value = !proxyModelValue.value;
+      }
+    }
     function focus() {
       var _a;
       (_a = control.value) === null || _a === void 0 ? void 0 : _a.focus();
@@ -109,14 +123,15 @@ var script = defineComponent({
       rootStyles,
       controlStyles,
       controlAttributes,
-      proxyModelValue,
+      isChecked,
+      handleChange,
       focus,
       blur
     };
   }
 });
 
-var css_248z = "input[data-v-7f604760]{appearance:none;line-height:0}";
+var css_248z = "input[data-v-4d2215e4]{appearance:none;line-height:0}";
 styleInject(css_248z);
 
 /* script */
@@ -130,49 +145,28 @@ var __vue_render__ = function () {
     ref: "root",
     class: _vm.rootStyles
   }, [_c('input', _vm._b({
-    directives: [{
-      name: "model",
-      rawName: "v-model",
-      value: _vm.proxyModelValue,
-      expression: "proxyModelValue"
-    }],
     ref: "control",
     class: _vm.controlStyles,
     attrs: {
+      "type": 'checkbox',
       "indeterminate": _vm.indeterminate,
       "required": _vm.required,
-      "disabled": _vm.disabled,
-      "type": "checkbox"
+      "disabled": _vm.disabled
     },
     domProps: {
-      "value": _vm.value,
-      "checked": Array.isArray(_vm.proxyModelValue) ? _vm._i(_vm.proxyModelValue, _vm.value) > -1 : _vm.proxyModelValue
+      "checked": _vm.isChecked,
+      "value": _vm.value
     },
     on: {
+      "change": _vm.handleChange,
       "focus": function ($event) {
         return _vm.$emit('focus', $event);
       },
       "blur": function ($event) {
         return _vm.$emit('blur', $event);
-      },
-      "change": function ($event) {
-        var $$a = _vm.proxyModelValue,
-          $$el = $event.target,
-          $$c = $$el.checked ? true : false;
-        if (Array.isArray($$a)) {
-          var $$v = _vm.value,
-            $$i = _vm._i($$a, $$v);
-          if ($$el.checked) {
-            $$i < 0 && (_vm.proxyModelValue = $$a.concat([$$v]));
-          } else {
-            $$i > -1 && (_vm.proxyModelValue = $$a.slice(0, $$i).concat($$a.slice($$i + 1)));
-          }
-        } else {
-          _vm.proxyModelValue = $$c;
-        }
       }
     }
-  }, 'input', _vm.controlAttributes, false)) , _vm._v(" "), _vm.$slots.default || _vm.label ? [_c('OrLabel', {
+  }, 'input', _vm.controlAttributes, false)), _vm._v(" "), _vm.$slots.default || _vm.label ? [_c('OrLabel', {
     attrs: {
       "control-id": _vm.controlAttributes.id,
       "variant": _vm.labelVariant,
@@ -195,7 +189,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-7f604760";
+const __vue_scope_id__ = "data-v-4d2215e4";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/esm/v2/OrCheckboxTree-00fd6cf9.js

@@ -0,0 +1,202 @@
+import { defineComponent, computed } from 'vue-demi';
+import { useVModel, useToggle } from '@vueuse/core';
+import { _ as __vue_component__$2 } from './OrCheckbox-e55228e5.js';
+import { _ as __vue_component__$1 } from './OrIcon-d35a84d8.js';
+import { f as flattenDeep } from './flattenDeep-e7a8b995.js';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+
+const CheckboxTreeRoot = [
+// Layout
+'flex', 'flex-col',
+// Spacing
+'gap-sm+ md:gap-sm'];
+const CheckboxTreeRootParent = [
+// Layout
+'flex', 'flex-row', 'gap-xs'];
+
+var script = defineComponent({
+  name: 'OrCheckboxTree',
+  components: {
+    OrIcon: __vue_component__$1,
+    OrCheckbox: __vue_component__$2
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    item: {
+      type: Object,
+      required: true
+    },
+    collapsible: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, {
+    emit
+  }) {
+    // State
+    const hasChildren = computed(() => props.item.children && props.item.children.length > 0);
+    const childrenValues = computed(() => {
+      const getChildValues = children => {
+        return children === null || children === void 0 ? void 0 : children.map(child => {
+          if (child.children) {
+            return getChildValues(child.children);
+          } else {
+            return child.value;
+          }
+        });
+      };
+      return flattenDeep(getChildValues(props.item.children));
+    });
+    const proxyModelValue = useVModel(props, 'modelValue', emit);
+    const isAnyChildrenSelected = computed(() => {
+      var _a;
+      return (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.some(value => {
+        var _a;
+        return (_a = childrenValues.value) === null || _a === void 0 ? void 0 : _a.includes(value);
+      });
+    });
+    const isAllChildrenSelected = computed(() => {
+      var _a;
+      return (_a = childrenValues.value) === null || _a === void 0 ? void 0 : _a.every(value => {
+        var _a;
+        return (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.includes(value);
+      });
+    });
+    const isIntermediate = computed(() => {
+      return isAnyChildrenSelected.value && !isAllChildrenSelected.value;
+    });
+    const [isOpen, setIsOpen] = useToggle(true);
+    // Styles
+    const rootStyles = computed(() => ['or-checkbox-tree-v3', ...CheckboxTreeRoot]);
+    // Styles
+    const parentStyles = computed(() => [...CheckboxTreeRootParent]);
+    // Methods
+    const handleParentClick = () => {
+      if (isAllChildrenSelected.value) {
+        proxyModelValue.value = proxyModelValue.value.filter(value => !childrenValues.value.includes(value));
+      } else {
+        proxyModelValue.value = [...proxyModelValue.value, ...childrenValues.value];
+      }
+    };
+    return {
+      rootStyles,
+      parentStyles,
+      hasChildren,
+      proxyModelValue,
+      isOpen,
+      setIsOpen,
+      isIntermediate,
+      isAllChildrenSelected,
+      isAnyChildrenSelected,
+      childrenValues,
+      handleParentClick
+    };
+  }
+});
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: "root",
+    class: _vm.rootStyles
+  }, [_vm.hasChildren ? [_c('div', {
+    class: _vm.parentStyles
+  }, [_vm.collapsible ? [_c('OrIcon', {
+    class: [_vm.isOpen ? 'rotate-[180deg]' : 'rotate-0'],
+    attrs: {
+      "icon": "arrow_drop_down",
+      "size": "l"
+    },
+    on: {
+      "click": function () {
+        return _vm.setIsOpen(!_vm.isOpen);
+      }
+    }
+  })] : _vm._e(), _vm._v(" "), _c('OrCheckbox', {
+    attrs: {
+      "value": "true",
+      "model-value": _vm.isAllChildrenSelected,
+      "indeterminate": _vm.isIntermediate,
+      "label": _vm.item.label,
+      "disabled": _vm.disabled
+    },
+    on: {
+      "click": _vm.handleParentClick
+    }
+  })], 2), _vm._v(" "), _vm.hasChildren && _vm.isOpen ? _c('div', {
+    class: {
+      'ml-2xl': _vm.collapsible,
+      'ml-lg': !_vm.collapsible
+    }
+  }, _vm._l(_vm.item.children, function (child) {
+    return _c('OrCheckboxTree', {
+      key: child.value,
+      staticClass: "mt-xs",
+      attrs: {
+        "item": child,
+        "collapsible": _vm.collapsible || child.collapsible,
+        "disabled": _vm.disabled || child.disabled
+      },
+      model: {
+        value: _vm.proxyModelValue,
+        callback: function ($$v) {
+          _vm.proxyModelValue = $$v;
+        },
+        expression: "proxyModelValue"
+      }
+    });
+  }), 1) : _vm._e()] : [_c('OrCheckbox', {
+    attrs: {
+      "disabled": _vm.disabled || _vm.item.disabled,
+      "label": _vm.item.label,
+      "value": _vm.item.value
+    },
+    model: {
+      value: _vm.proxyModelValue,
+      callback: function ($$v) {
+        _vm.proxyModelValue = $$v;
+      },
+      expression: "proxyModelValue"
+    }
+  })]], 2);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = undefined;
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+
+export { __vue_component__ as _ };

package/dist/esm/v2/OrFormGroup-7a883bce.js

@@ -0,0 +1,140 @@
+import { defineComponent, ref, computed } from 'vue-demi';
+import { _ as __vue_component__$1 } from './OrLabel-63380256.js';
+import { _ as __vue_component__$2 } from './OrError-4ffc1c39.js';
+import { _ as __vue_component__$3 } from './OrHint-aa221198.js';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+
+var FormGroupDirection;
+(function (FormGroupDirection) {
+  FormGroupDirection["Vertical"] = "vertical";
+  FormGroupDirection["Horizontal"] = "horizontal";
+})(FormGroupDirection || (FormGroupDirection = {}));
+
+const FormGroupRoot = [
+// Layout
+'flex', 'flex-col', 'gap-md md:gap-sm'];
+const FormGroupContent = [
+// Layout
+'flex', 'pl-[10px] md:pl-[0]', 'gap-md md:gap-sm'];
+const FormGroupLabel = [
+// Typography
+'!typography-body-2-regular', '!theme-foreground dark:!theme-foreground-dark'];
+const FormGroupLabelError = [
+// Typography
+'!theme-foreground-error dark:!theme-foreground-error-dark'];
+const FormGroupContentDirections = {
+  [FormGroupDirection.Vertical]: ['flex-col', 'gap-sm'],
+  [FormGroupDirection.Horizontal]: ['flex-row', 'gap-[18px] md:gap-md']
+};
+
+var script = defineComponent({
+  name: 'OrFormGroupV3',
+  components: {
+    OrLabel: __vue_component__$1,
+    OrError: __vue_component__$2,
+    OrHint: __vue_component__$3
+  },
+  props: {
+    label: {
+      type: String,
+      default: undefined
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    direction: {
+      type: String,
+      default: FormGroupDirection.Vertical
+    },
+    error: {
+      type: [String, Boolean],
+      default: undefined
+    },
+    hint: {
+      type: String,
+      default: undefined
+    }
+  },
+  setup(props) {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-form-group-v3', ...FormGroupRoot]);
+    const labelStyles = computed(() => [...FormGroupLabel, ...(props.error ? FormGroupLabelError : [])]);
+    const contentStyles = computed(() => [...FormGroupContent, ...FormGroupContentDirections[props.direction]]);
+    return {
+      root,
+      rootStyles,
+      labelStyles,
+      contentStyles
+    };
+  }
+});
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: "root",
+    class: _vm.rootStyles
+  }, [_c('div', {
+    staticClass: "flex flex-row"
+  }, [_vm._t("label", function () {
+    return [_vm.label ? _c('OrLabel', {
+      class: _vm.labelStyles,
+      attrs: {
+        "required": _vm.required,
+        "disabled": _vm.disabled
+      },
+      scopedSlots: _vm._u([{
+        key: "addon",
+        fn: function () {
+          return [_vm._t("addon")];
+        },
+        proxy: true
+      }], null, true)
+    }, [_vm._v("\n        " + _vm._s(_vm.label) + "\n\n        ")]) : _vm._e()];
+  })], 2), _vm._v(" "), _c('div', {
+    class: _vm.contentStyles
+  }, [_vm._t("default")], 2), _vm._v(" "), _vm.hint && !_vm.error ? [_c('OrHint', {
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  }, [_vm._v("\n      " + _vm._s(_vm.hint) + "\n    ")])] : _vm._e(), _vm._v(" "), typeof _vm.error === 'string' ? [_c('OrError', {
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  }, [_vm._v("\n      " + _vm._s(_vm.error) + "\n    ")])] : _vm._e()], 2);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = undefined;
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+
+export { FormGroupDirection as F, __vue_component__ as _ };

package/dist/esm/v2/{OrSelect-40183874.js → OrSelect-4031334e.js}

@@ -2,7 +2,7 @@ import { defineComponent, getCurrentInstance, ref, computed, onMounted, watch }
 import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-0d314aa4.js';
 import { u as useOverflow } from './useOverflow-af6161c8.js';
 import '@vueuse/core';
-import { _ as __vue_component__$1 } from './OrCheckbox-dc587ec9.js';
+import { _ as __vue_component__$1 } from './OrCheckbox-e55228e5.js';
 import { _ as __vue_component__$2 } from './OrError-4ffc1c39.js';
 import { _ as __vue_component__$3 } from './OrExpansionPanel-7c359bb0.js';
 import { _ as __vue_component__$4 } from './OrHint-aa221198.js';

package/dist/esm/v2/components/index.js

@@ -13,7 +13,7 @@ export { _ as OrCardV3 } from '../OrCard-0da13cbe.js';
 export { _ as OrCarousel } from '../OrCarousel-e0c2e387.js';
 export { _ as OrCarouselItem } from '../OrCarouselItem-c614bab9.js';
 export { _ as OrCheckbox } from '../OrCheckbox-7b98fc08.js';
-export { _ as OrCheckboxV3 } from '../OrCheckbox-dc587ec9.js';
+export { _ as OrCheckboxV3 } from '../OrCheckbox-e55228e5.js';
 export { _ as OrChip } from '../OrChip-8a1abfc5.js';
 export { _ as OrChips } from '../OrChips-a01d8520.js';
 export { _ as OrCode, O as OrCodeLanguages } from '../OrCode-e54e09f7.js';
@@ -71,7 +71,7 @@ export { _ as OrSearch } from '../OrSearch-620d5d76.js';
 export { _ as OrSearchV3 } from '../OrSearch-a3038272.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-a1ea5b72.js';
 export { _ as OrSelect } from '../OrSelect-d887118b.js';
-export { _ as OrSelectV3 } from '../OrSelect-40183874.js';
+export { _ as OrSelectV3 } from '../OrSelect-4031334e.js';
 export { _ as OrSidebar, O as OrSidebarSide } from '../OrSidebar-feacf13a.js';
 export { _ as OrSidebarV3 } from '../OrSidebar-26785a1e.js';
 export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-9c424133.js';

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

@@ -0,0 +1,115 @@
+import { PropType } from 'vue-demi';
+import { FormGroupDirection } from '../or-form-group-v3';
+declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+    proxyModelValue: import("@vue/composition-api").Ref<string[]> | import("@vue/composition-api").WritableComputedRef<string[]>;
+}> & import("@vue/composition-api").Data, {}, {}, {
+    modelValue: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    error: {
+        type: StringConstructor;
+        default: string;
+    };
+    hint: {
+        type: StringConstructor;
+        default: string;
+    };
+    direction: {
+        type: PropType<FormGroupDirection>;
+        default: FormGroupDirection;
+    };
+    options: {
+        type: PropType<{
+            label: string;
+            value: any;
+            disabled?: boolean | undefined;
+            collapsible: boolean;
+        }[]>;
+        default: () => never[];
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, import("@vue/composition-api").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    error: {
+        type: StringConstructor;
+        default: string;
+    };
+    hint: {
+        type: StringConstructor;
+        default: string;
+    };
+    direction: {
+        type: PropType<FormGroupDirection>;
+        default: FormGroupDirection;
+    };
+    options: {
+        type: PropType<{
+            label: string;
+            value: any;
+            disabled?: boolean | undefined;
+            collapsible: boolean;
+        }[]>;
+        default: () => never[];
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+    modelValue: string[];
+    label: string;
+    error: string;
+    hint: string;
+    direction: FormGroupDirection;
+    options: {
+        label: string;
+        value: any;
+        disabled?: boolean | undefined;
+        collapsible: boolean;
+    }[];
+    disabled: boolean;
+} & {}, import("@vue/composition-api").ShallowUnwrapRef<{
+    proxyModelValue: import("@vue/composition-api").Ref<string[]> | import("@vue/composition-api").WritableComputedRef<string[]>;
+}>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
+    modelValue: string[];
+    label: string;
+    error: string;
+    hint: string;
+    direction: FormGroupDirection;
+    options: {
+        label: string;
+        value: any;
+        disabled?: boolean | undefined;
+        collapsible: boolean;
+    }[];
+    disabled: boolean;
+} & {}, {
+    modelValue: string[];
+    label: string;
+    error: string;
+    hint: string;
+    direction: FormGroupDirection;
+    options: {
+        label: string;
+        value: any;
+        disabled?: boolean | undefined;
+        collapsible: boolean;
+    }[];
+    disabled: boolean;
+}, true>);
+export default _default;

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

@@ -0,0 +1 @@
+export { default as OrCheckboxGroupV3 } from './OrCheckboxGroup.vue';