@onereach/ui-components 4.1.3-beta.2560.0 → 4.1.3-beta.2563.0

package/dist/bundled/v2/components/OrCheckboxGroupV3/OrCheckboxGroup.js

@@ -3,7 +3,6 @@ import { useVModel } from '@vueuse/core';
 import __vue_component__$1 from '../OrCheckboxTreeV3/OrCheckboxTree.js';
 import __vue_component__$2 from '../OrFormGroupV3/OrFormGroup.js';
 import { FormGroupDirection } from '../OrFormGroupV3/props.js';
-import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import '../OrCheckboxTreeV3/styles.js';
 import '../../utils/functions/flattenDeep.js';
@@ -17,6 +16,7 @@ import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';
 import '../../hooks/useIdAttribute.js';
 import '../../hooks/useControlAttributes.js';
+import '../../style-inject.es-4c6f2515.js';
 import '../OrButtonV3/OrButton.js';
 import '../OrButtonV3/props.js';
 import '../OrButtonV3/styles.js';
@@ -79,11 +79,9 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "";
-styleInject(css_248z);
-
 /* script */
 const __vue_script__ = script;
+
 /* template */
 var __vue_render__ = function () {
   var _vm = this;
@@ -110,7 +108,8 @@ var __vue_render__ = function () {
       attrs: {
         "item": option,
         "disabled": _vm.disabled || option.disabled,
-        "collapsible": option.collapsible
+        "collapsible": option.collapsible,
+        "expanded": option.expanded
       },
       model: {
         value: _vm.proxyModelValue,
@@ -127,7 +126,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-3e45cf11";
+const __vue_scope_id__ = undefined;
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/bundled/v2/components/OrCheckboxGroupV3/OrCheckboxGroup.vue.d.ts

@@ -1,5 +1,6 @@
 import { PropType } from 'vue-demi';
 import { FormGroupDirection } from '../or-form-group-v3';
+import { CheckboxTreeNode } from '../or-checkbox-tree-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, {}, {}, {
@@ -24,12 +25,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: FormGroupDirection;
     };
     options: {
-        type: PropType<{
-            label: string;
-            value: any;
-            disabled?: boolean | undefined;
-            collapsible: boolean;
-        }[]>;
+        type: PropType<CheckboxTreeNode[]>;
         default: () => never[];
     };
     disabled: {
@@ -58,12 +54,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: FormGroupDirection;
     };
     options: {
-        type: PropType<{
-            label: string;
-            value: any;
-            disabled?: boolean | undefined;
-            collapsible: boolean;
-        }[]>;
+        type: PropType<CheckboxTreeNode[]>;
         default: () => never[];
     };
     disabled: {
@@ -76,12 +67,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     error: string;
     hint: string;
     direction: FormGroupDirection;
-    options: {
-        label: string;
-        value: any;
-        disabled?: boolean | undefined;
-        collapsible: boolean;
-    }[];
+    options: CheckboxTreeNode[];
     disabled: boolean;
 } & {}, import("@vue/composition-api").ShallowUnwrapRef<{
     proxyModelValue: import("@vue/composition-api").Ref<string[]> | import("@vue/composition-api").WritableComputedRef<string[]>;
@@ -91,12 +77,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     error: string;
     hint: string;
     direction: FormGroupDirection;
-    options: {
-        label: string;
-        value: any;
-        disabled?: boolean | undefined;
-        collapsible: boolean;
-    }[];
+    options: CheckboxTreeNode[];
     disabled: boolean;
 } & {}, {
     modelValue: string[];
@@ -104,12 +85,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     error: string;
     hint: string;
     direction: FormGroupDirection;
-    options: {
-        label: string;
-        value: any;
-        disabled?: boolean | undefined;
-        collapsible: boolean;
-    }[];
+    options: CheckboxTreeNode[];
     disabled: boolean;
 }, true>);
 export default _default;

package/dist/bundled/v2/components/OrCheckboxTreeV3/OrCheckboxTree.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed } from 'vue-demi';
+import { defineComponent, computed, watch } from 'vue-demi';
 import { useVModel, useToggle } from '@vueuse/core';
 import { CheckboxTreeRoot, CheckboxTreeRootParent } from './styles.js';
 import flattenDeep from '../../utils/functions/flattenDeep.js';
@@ -48,6 +48,10 @@ var script = defineComponent({
     disabled: {
       type: Boolean,
       default: false
+    },
+    expanded: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['update:modelValue'],
@@ -86,7 +90,12 @@ var script = defineComponent({
     const isIntermediate = computed(() => {
       return isAnyChildrenSelected.value && !isAllChildrenSelected.value;
     });
-    const [isOpen, setIsOpen] = useToggle(true);
+    const [isOpen, setIsOpen] = useToggle(props.expanded);
+    watch(() => props.expanded, value => {
+      if (value !== undefined) {
+        setIsOpen(value);
+      }
+    });
     // Styles
     const rootStyles = computed(() => ['or-checkbox-tree-v3', ...CheckboxTreeRoot]);
     // Styles
@@ -167,6 +176,7 @@ var __vue_render__ = function () {
       attrs: {
         "item": child,
         "collapsible": child.collapsible,
+        "expanded": child.expanded,
         "disabled": _vm.disabled || child.disabled
       },
       model: {

package/dist/bundled/v2/components/OrCheckboxTreeV3/OrCheckboxTree.vue.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue-demi';
-import { CheckboxNode } from './types';
+import { CheckboxTreeNode } from './types';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     parentStyles: import("@vue/composition-api").ComputedRef<string[]>;
@@ -18,7 +18,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: () => never[];
     };
     item: {
-        type: PropType<CheckboxNode>;
+        type: PropType<CheckboxTreeNode>;
         required: true;
     };
     collapsible: {
@@ -29,13 +29,17 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
+    expanded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     modelValue: {
         type: PropType<string[]>;
         default: () => never[];
     };
     item: {
-        type: PropType<CheckboxNode>;
+        type: PropType<CheckboxTreeNode>;
         required: true;
     };
     collapsible: {
@@ -46,11 +50,16 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
+    expanded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     modelValue: string[];
-    item: CheckboxNode;
+    item: CheckboxTreeNode;
     collapsible: boolean;
     disabled: boolean;
+    expanded: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -67,14 +76,16 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     handleParentClick: () => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: string[];
-    item: CheckboxNode;
+    item: CheckboxTreeNode;
     collapsible: boolean;
     disabled: boolean;
+    expanded: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: string[];
     collapsible: boolean;
     disabled: boolean;
+    expanded: boolean;
 }, true>);
 export default _default;

package/dist/bundled/v2/components/OrCheckboxTreeV3/index.d.ts

@@ -1 +1,2 @@
 export { default as OrCheckboxTreeV3 } from './OrCheckboxTree.vue';
+export * from './types';

package/dist/bundled/v2/components/OrCheckboxTreeV3/types.d.ts

@@ -1,7 +1,8 @@
-export type CheckboxNode = {
+export type CheckboxTreeNode = {
     label: string;
     value: string;
-    children?: CheckboxNode[];
+    children?: CheckboxTreeNode[];
     collapsible?: boolean;
     disabled?: boolean;
+    expanded?: boolean;
 };

package/dist/bundled/v3/{OrCheckboxTree.vue_vue_type_script_lang-1a85d562.js → OrCheckboxTree.vue_vue_type_script_lang-5b6dbef1.js}

@@ -1,4 +1,4 @@
-import { defineComponent, computed } from 'vue-demi';
+import { defineComponent, computed, watch } from 'vue-demi';
 import { useVModel, useToggle } from '@vueuse/core';
 import { CheckboxTreeRoot, CheckboxTreeRootParent } from './components/OrCheckboxTreeV3/styles.js';
 import flattenDeep from './utils/functions/flattenDeep.js';
@@ -36,6 +36,10 @@ var script = defineComponent({
     disabled: {
       type: Boolean,
       default: false
+    },
+    expanded: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['update:modelValue'],
@@ -74,7 +78,12 @@ var script = defineComponent({
     const isIntermediate = computed(() => {
       return isAnyChildrenSelected.value && !isAllChildrenSelected.value;
     });
-    const [isOpen, setIsOpen] = useToggle(true);
+    const [isOpen, setIsOpen] = useToggle(props.expanded);
+    watch(() => props.expanded, value => {
+      if (value !== undefined) {
+        setIsOpen(value);
+      }
+    });
     // Styles
     const rootStyles = computed(() => ['or-checkbox-tree-v3', ...CheckboxTreeRoot]);
     // Styles

package/dist/bundled/v3/components/OrCheckboxGroupV3/OrCheckboxGroup.js

@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue-demi';
 import { useVModel } from '@vueuse/core';
 import '../OrCheckboxTreeV3/OrCheckboxTree.js';
-import { s as script$1 } from '../../OrCheckboxTree.vue_vue_type_script_lang-1a85d562.js';
+import { s as script$1 } from '../../OrCheckboxTree.vue_vue_type_script_lang-5b6dbef1.js';
 import '../OrFormGroupV3/OrFormGroup.js';
 import { FormGroupDirection } from '../OrFormGroupV3/props.js';
 import { s as script$2 } from '../../OrFormGroup.vue_vue_type_script_lang-360b258b.js';
@@ -106,8 +106,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.proxyModelValue = $event),
         item: option,
         disabled: _ctx.disabled || option.disabled,
-        collapsible: option.collapsible
-      }, null, 8 /* PROPS */, ["modelValue", "item", "disabled", "collapsible"]);
+        collapsible: option.collapsible,
+        expanded: option.expanded
+      }, null, 8 /* PROPS */, ["modelValue", "item", "disabled", "collapsible", "expanded"]);
     }), 128 /* KEYED_FRAGMENT */))]),
 
     _: 3 /* FORWARDED */

package/dist/bundled/v3/components/OrCheckboxGroupV3/OrCheckboxGroup.vue.d.ts

@@ -1,5 +1,6 @@
 import { PropType } from 'vue-demi';
 import { FormGroupDirection } from '../or-form-group-v3';
+import { CheckboxTreeNode } from '../or-checkbox-tree-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, {}, {}, {
@@ -24,12 +25,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: FormGroupDirection;
     };
     options: {
-        type: PropType<{
-            label: string;
-            value: any;
-            disabled?: boolean | undefined;
-            collapsible: boolean;
-        }[]>;
+        type: PropType<CheckboxTreeNode[]>;
         default: () => never[];
     };
     disabled: {
@@ -58,12 +54,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: FormGroupDirection;
     };
     options: {
-        type: PropType<{
-            label: string;
-            value: any;
-            disabled?: boolean | undefined;
-            collapsible: boolean;
-        }[]>;
+        type: PropType<CheckboxTreeNode[]>;
         default: () => never[];
     };
     disabled: {
@@ -76,12 +67,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     error: string;
     hint: string;
     direction: FormGroupDirection;
-    options: {
-        label: string;
-        value: any;
-        disabled?: boolean | undefined;
-        collapsible: boolean;
-    }[];
+    options: CheckboxTreeNode[];
     disabled: boolean;
 } & {}, import("@vue/composition-api").ShallowUnwrapRef<{
     proxyModelValue: import("@vue/composition-api").Ref<string[]> | import("@vue/composition-api").WritableComputedRef<string[]>;
@@ -91,12 +77,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     error: string;
     hint: string;
     direction: FormGroupDirection;
-    options: {
-        label: string;
-        value: any;
-        disabled?: boolean | undefined;
-        collapsible: boolean;
-    }[];
+    options: CheckboxTreeNode[];
     disabled: boolean;
 } & {}, {
     modelValue: string[];
@@ -104,12 +85,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     error: string;
     hint: string;
     direction: FormGroupDirection;
-    options: {
-        label: string;
-        value: any;
-        disabled?: boolean | undefined;
-        collapsible: boolean;
-    }[];
+    options: CheckboxTreeNode[];
     disabled: boolean;
 }, true>);
 export default _default;

package/dist/bundled/v3/components/OrCheckboxGroupV3/index.js

@@ -2,7 +2,7 @@ export { default as OrCheckboxGroupV3 } from './OrCheckboxGroup.js';
 import 'vue-demi';
 import '@vueuse/core';
 import '../OrCheckboxTreeV3/OrCheckboxTree.js';
-import '../../OrCheckboxTree.vue_vue_type_script_lang-1a85d562.js';
+import '../../OrCheckboxTree.vue_vue_type_script_lang-5b6dbef1.js';
 import '../OrCheckboxTreeV3/styles.js';
 import '../../utils/functions/flattenDeep.js';
 import '../OrIconV3/OrIcon.js';

package/dist/bundled/v3/components/OrCheckboxTreeV3/OrCheckboxTree.js

@@ -1,5 +1,5 @@
-import { s as script } from '../../OrCheckboxTree.vue_vue_type_script_lang-1a85d562.js';
-export { s as default } from '../../OrCheckboxTree.vue_vue_type_script_lang-1a85d562.js';
+import { s as script } from '../../OrCheckboxTree.vue_vue_type_script_lang-5b6dbef1.js';
+export { s as default } from '../../OrCheckboxTree.vue_vue_type_script_lang-5b6dbef1.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, createElementVNode, createBlock, withCtx, createVNode, createCommentVNode, renderList } from 'vue';
 import 'vue-demi';
 import '@vueuse/core';
@@ -73,8 +73,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       class: "mt-xs",
       item: child,
       collapsible: child.collapsible,
+      expanded: child.expanded,
       disabled: _ctx.disabled || child.disabled
-    }, null, 8 /* PROPS */, ["modelValue", "item", "collapsible", "disabled"]);
+    }, null, 8 /* PROPS */, ["modelValue", "item", "collapsible", "expanded", "disabled"]);
   }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */)) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createBlock(_component_OrCheckbox, {
     key: 1,
     modelValue: _ctx.proxyModelValue,

package/dist/bundled/v3/components/OrCheckboxTreeV3/OrCheckboxTree.vue.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue-demi';
-import { CheckboxNode } from './types';
+import { CheckboxTreeNode } from './types';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     parentStyles: import("@vue/composition-api").ComputedRef<string[]>;
@@ -18,7 +18,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: () => never[];
     };
     item: {
-        type: PropType<CheckboxNode>;
+        type: PropType<CheckboxTreeNode>;
         required: true;
     };
     collapsible: {
@@ -29,13 +29,17 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
+    expanded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     modelValue: {
         type: PropType<string[]>;
         default: () => never[];
     };
     item: {
-        type: PropType<CheckboxNode>;
+        type: PropType<CheckboxTreeNode>;
         required: true;
     };
     collapsible: {
@@ -46,11 +50,16 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
+    expanded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     modelValue: string[];
-    item: CheckboxNode;
+    item: CheckboxTreeNode;
     collapsible: boolean;
     disabled: boolean;
+    expanded: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -67,14 +76,16 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     handleParentClick: () => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: string[];
-    item: CheckboxNode;
+    item: CheckboxTreeNode;
     collapsible: boolean;
     disabled: boolean;
+    expanded: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: string[];
     collapsible: boolean;
     disabled: boolean;
+    expanded: boolean;
 }, true>);
 export default _default;

package/dist/bundled/v3/components/OrCheckboxTreeV3/index.d.ts

@@ -1 +1,2 @@
 export { default as OrCheckboxTreeV3 } from './OrCheckboxTree.vue';
+export * from './types';

package/dist/bundled/v3/components/OrCheckboxTreeV3/index.js

@@ -1,4 +1,4 @@
-export { s as OrCheckboxTreeV3 } from '../../OrCheckboxTree.vue_vue_type_script_lang-1a85d562.js';
+export { s as OrCheckboxTreeV3 } from '../../OrCheckboxTree.vue_vue_type_script_lang-5b6dbef1.js';
 import 'vue-demi';
 import '@vueuse/core';
 import './styles.js';

package/dist/bundled/v3/components/OrCheckboxTreeV3/types.d.ts

@@ -1,7 +1,8 @@
-export type CheckboxNode = {
+export type CheckboxTreeNode = {
     label: string;
     value: string;
-    children?: CheckboxNode[];
+    children?: CheckboxTreeNode[];
     collapsible?: boolean;
     disabled?: boolean;
+    expanded?: boolean;
 };

package/dist/esm/v2/{OrCheckboxTree-de560e80.js → OrCheckboxTree-97d78f1f.js}

@@ -1,4 +1,4 @@
-import { defineComponent, computed } from 'vue-demi';
+import { defineComponent, computed, watch } from 'vue-demi';
 import { useVModel, useToggle } from '@vueuse/core';
 import { _ as __vue_component__$2 } from './OrCheckbox-39c94019.js';
 import { _ as __vue_component__$1 } from './OrIcon-d35a84d8.js';
@@ -42,6 +42,10 @@ var script = defineComponent({
     disabled: {
       type: Boolean,
       default: false
+    },
+    expanded: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['update:modelValue'],
@@ -80,7 +84,12 @@ var script = defineComponent({
     const isIntermediate = computed(() => {
       return isAnyChildrenSelected.value && !isAllChildrenSelected.value;
     });
-    const [isOpen, setIsOpen] = useToggle(true);
+    const [isOpen, setIsOpen] = useToggle(props.expanded);
+    watch(() => props.expanded, value => {
+      if (value !== undefined) {
+        setIsOpen(value);
+      }
+    });
     // Styles
     const rootStyles = computed(() => ['or-checkbox-tree-v3', ...CheckboxTreeRoot]);
     // Styles
@@ -161,6 +170,7 @@ var __vue_render__ = function () {
       attrs: {
         "item": child,
         "collapsible": child.collapsible,
+        "expanded": child.expanded,
         "disabled": _vm.disabled || child.disabled
       },
       model: {

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

@@ -1,5 +1,6 @@
 import { PropType } from 'vue-demi';
 import { FormGroupDirection } from '../or-form-group-v3';
+import { CheckboxTreeNode } from '../or-checkbox-tree-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, {}, {}, {
@@ -24,12 +25,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: FormGroupDirection;
     };
     options: {
-        type: PropType<{
-            label: string;
-            value: any;
-            disabled?: boolean | undefined;
-            collapsible: boolean;
-        }[]>;
+        type: PropType<CheckboxTreeNode[]>;
         default: () => never[];
     };
     disabled: {
@@ -58,12 +54,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: FormGroupDirection;
     };
     options: {
-        type: PropType<{
-            label: string;
-            value: any;
-            disabled?: boolean | undefined;
-            collapsible: boolean;
-        }[]>;
+        type: PropType<CheckboxTreeNode[]>;
         default: () => never[];
     };
     disabled: {
@@ -76,12 +67,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     error: string;
     hint: string;
     direction: FormGroupDirection;
-    options: {
-        label: string;
-        value: any;
-        disabled?: boolean | undefined;
-        collapsible: boolean;
-    }[];
+    options: CheckboxTreeNode[];
     disabled: boolean;
 } & {}, import("@vue/composition-api").ShallowUnwrapRef<{
     proxyModelValue: import("@vue/composition-api").Ref<string[]> | import("@vue/composition-api").WritableComputedRef<string[]>;
@@ -91,12 +77,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     error: string;
     hint: string;
     direction: FormGroupDirection;
-    options: {
-        label: string;
-        value: any;
-        disabled?: boolean | undefined;
-        collapsible: boolean;
-    }[];
+    options: CheckboxTreeNode[];
     disabled: boolean;
 } & {}, {
     modelValue: string[];
@@ -104,12 +85,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     error: string;
     hint: string;
     direction: FormGroupDirection;
-    options: {
-        label: string;
-        value: any;
-        disabled?: boolean | undefined;
-        collapsible: boolean;
-    }[];
+    options: CheckboxTreeNode[];
     disabled: boolean;
 }, true>);
 export default _default;

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

@@ -1,14 +1,14 @@
 import { defineComponent } from 'vue-demi';
 import { useVModel } from '@vueuse/core';
 import { _ as __vue_component__$2, F as FormGroupDirection } from '../../OrFormGroup-7a883bce.js';
-import { _ as __vue_component__$1 } from '../../OrCheckboxTree-de560e80.js';
-import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
+import { _ as __vue_component__$1 } from '../../OrCheckboxTree-97d78f1f.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import '../../OrLabel-63380256.js';
 import '../../OrError-4ffc1c39.js';
 import '../../OrHint-aa221198.js';
 import '../../OrCheckbox-39c94019.js';
 import '../../useIdAttribute-859439f0.js';
+import '../../style-inject.es-4c6f2515.js';
 import '../../OrIcon-d35a84d8.js';
 import '../../OrButton-6b60a776.js';
 import '../../OrLoader-b0c381f9.js';
@@ -64,11 +64,9 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "";
-styleInject(css_248z);
-
 /* script */
 const __vue_script__ = script;
+
 /* template */
 var __vue_render__ = function () {
   var _vm = this;
@@ -95,7 +93,8 @@ var __vue_render__ = function () {
       attrs: {
         "item": option,
         "disabled": _vm.disabled || option.disabled,
-        "collapsible": option.collapsible
+        "collapsible": option.collapsible,
+        "expanded": option.expanded
       },
       model: {
         value: _vm.proxyModelValue,
@@ -112,7 +111,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-3e45cf11";
+const __vue_scope_id__ = undefined;
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/esm/v2/components/or-checkbox-tree-v3/OrCheckboxTree.vue.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue-demi';
-import { CheckboxNode } from './types';
+import { CheckboxTreeNode } from './types';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     parentStyles: import("@vue/composition-api").ComputedRef<string[]>;
@@ -18,7 +18,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: () => never[];
     };
     item: {
-        type: PropType<CheckboxNode>;
+        type: PropType<CheckboxTreeNode>;
         required: true;
     };
     collapsible: {
@@ -29,13 +29,17 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
+    expanded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     modelValue: {
         type: PropType<string[]>;
         default: () => never[];
     };
     item: {
-        type: PropType<CheckboxNode>;
+        type: PropType<CheckboxTreeNode>;
         required: true;
     };
     collapsible: {
@@ -46,11 +50,16 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
+    expanded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     modelValue: string[];
-    item: CheckboxNode;
+    item: CheckboxTreeNode;
     collapsible: boolean;
     disabled: boolean;
+    expanded: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -67,14 +76,16 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     handleParentClick: () => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: string[];
-    item: CheckboxNode;
+    item: CheckboxTreeNode;
     collapsible: boolean;
     disabled: boolean;
+    expanded: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: string[];
     collapsible: boolean;
     disabled: boolean;
+    expanded: boolean;
 }, true>);
 export default _default;

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

@@ -1 +1,2 @@
 export { default as OrCheckboxTreeV3 } from './OrCheckboxTree.vue';
+export * from './types';

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

@@ -1,4 +1,4 @@
-export { _ as OrCheckboxTreeV3 } from '../../OrCheckboxTree-de560e80.js';
+export { _ as OrCheckboxTreeV3 } from '../../OrCheckboxTree-97d78f1f.js';
 import 'vue-demi';
 import '@vueuse/core';
 import '../../OrCheckbox-39c94019.js';

package/dist/esm/v2/components/or-checkbox-tree-v3/types.d.ts

@@ -1,7 +1,8 @@
-export type CheckboxNode = {
+export type CheckboxTreeNode = {
     label: string;
     value: string;
-    children?: CheckboxNode[];
+    children?: CheckboxTreeNode[];
     collapsible?: boolean;
     disabled?: boolean;
+    expanded?: boolean;
 };

package/dist/esm/v3/{OrCheckboxTree-db42d072.js → OrCheckboxTree-a02567a5.js}

@@ -1,4 +1,4 @@
-import { defineComponent, computed } from 'vue-demi';
+import { defineComponent, computed, watch } from 'vue-demi';
 import { useVModel, useToggle } from '@vueuse/core';
 import { s as script$2 } from './OrCheckbox-488b6915.js';
 import { s as script$1 } from './OrIcon-62793572.js';
@@ -42,6 +42,10 @@ var script = defineComponent({
     disabled: {
       type: Boolean,
       default: false
+    },
+    expanded: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['update:modelValue'],
@@ -80,7 +84,12 @@ var script = defineComponent({
     const isIntermediate = computed(() => {
       return isAnyChildrenSelected.value && !isAllChildrenSelected.value;
     });
-    const [isOpen, setIsOpen] = useToggle(true);
+    const [isOpen, setIsOpen] = useToggle(props.expanded);
+    watch(() => props.expanded, value => {
+      if (value !== undefined) {
+        setIsOpen(value);
+      }
+    });
     // Styles
     const rootStyles = computed(() => ['or-checkbox-tree-v3', ...CheckboxTreeRoot]);
     // Styles
@@ -154,8 +163,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       class: "mt-xs",
       item: child,
       collapsible: child.collapsible,
+      expanded: child.expanded,
       disabled: _ctx.disabled || child.disabled
-    }, null, 8 /* PROPS */, ["modelValue", "item", "collapsible", "disabled"]);
+    }, null, 8 /* PROPS */, ["modelValue", "item", "collapsible", "expanded", "disabled"]);
   }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */)) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createBlock(_component_OrCheckbox, {
     key: 1,
     modelValue: _ctx.proxyModelValue,

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

@@ -1,5 +1,6 @@
 import { PropType } from 'vue-demi';
 import { FormGroupDirection } from '../or-form-group-v3';
+import { CheckboxTreeNode } from '../or-checkbox-tree-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, {}, {}, {
@@ -24,12 +25,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: FormGroupDirection;
     };
     options: {
-        type: PropType<{
-            label: string;
-            value: any;
-            disabled?: boolean | undefined;
-            collapsible: boolean;
-        }[]>;
+        type: PropType<CheckboxTreeNode[]>;
         default: () => never[];
     };
     disabled: {
@@ -58,12 +54,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: FormGroupDirection;
     };
     options: {
-        type: PropType<{
-            label: string;
-            value: any;
-            disabled?: boolean | undefined;
-            collapsible: boolean;
-        }[]>;
+        type: PropType<CheckboxTreeNode[]>;
         default: () => never[];
     };
     disabled: {
@@ -76,12 +67,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     error: string;
     hint: string;
     direction: FormGroupDirection;
-    options: {
-        label: string;
-        value: any;
-        disabled?: boolean | undefined;
-        collapsible: boolean;
-    }[];
+    options: CheckboxTreeNode[];
     disabled: boolean;
 } & {}, import("@vue/composition-api").ShallowUnwrapRef<{
     proxyModelValue: import("@vue/composition-api").Ref<string[]> | import("@vue/composition-api").WritableComputedRef<string[]>;
@@ -91,12 +77,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     error: string;
     hint: string;
     direction: FormGroupDirection;
-    options: {
-        label: string;
-        value: any;
-        disabled?: boolean | undefined;
-        collapsible: boolean;
-    }[];
+    options: CheckboxTreeNode[];
     disabled: boolean;
 } & {}, {
     modelValue: string[];
@@ -104,12 +85,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     error: string;
     hint: string;
     direction: FormGroupDirection;
-    options: {
-        label: string;
-        value: any;
-        disabled?: boolean | undefined;
-        collapsible: boolean;
-    }[];
+    options: CheckboxTreeNode[];
     disabled: boolean;
 }, true>);
 export default _default;

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

@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue-demi';
 import { useVModel } from '@vueuse/core';
 import { s as script$2, F as FormGroupDirection } from '../../OrFormGroup-d9255559.js';
-import { s as script$1 } from '../../OrCheckboxTree-db42d072.js';
+import { s as script$1 } from '../../OrCheckboxTree-a02567a5.js';
 import { resolveComponent, openBlock, createBlock, withCtx, renderSlot, createElementBlock, Fragment, renderList } from 'vue';
 import '../../OrLabel-4da56db0.js';
 import '../../OrError-c01d0c29.js';
@@ -82,8 +82,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.proxyModelValue = $event),
         item: option,
         disabled: _ctx.disabled || option.disabled,
-        collapsible: option.collapsible
-      }, null, 8 /* PROPS */, ["modelValue", "item", "disabled", "collapsible"]);
+        collapsible: option.collapsible,
+        expanded: option.expanded
+      }, null, 8 /* PROPS */, ["modelValue", "item", "disabled", "collapsible", "expanded"]);
     }), 128 /* KEYED_FRAGMENT */))]),
 
     _: 3 /* FORWARDED */

package/dist/esm/v3/components/or-checkbox-tree-v3/OrCheckboxTree.vue.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue-demi';
-import { CheckboxNode } from './types';
+import { CheckboxTreeNode } from './types';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     parentStyles: import("@vue/composition-api").ComputedRef<string[]>;
@@ -18,7 +18,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: () => never[];
     };
     item: {
-        type: PropType<CheckboxNode>;
+        type: PropType<CheckboxTreeNode>;
         required: true;
     };
     collapsible: {
@@ -29,13 +29,17 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
+    expanded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     modelValue: {
         type: PropType<string[]>;
         default: () => never[];
     };
     item: {
-        type: PropType<CheckboxNode>;
+        type: PropType<CheckboxTreeNode>;
         required: true;
     };
     collapsible: {
@@ -46,11 +50,16 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
+    expanded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     modelValue: string[];
-    item: CheckboxNode;
+    item: CheckboxTreeNode;
     collapsible: boolean;
     disabled: boolean;
+    expanded: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -67,14 +76,16 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     handleParentClick: () => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: string[];
-    item: CheckboxNode;
+    item: CheckboxTreeNode;
     collapsible: boolean;
     disabled: boolean;
+    expanded: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: string[];
     collapsible: boolean;
     disabled: boolean;
+    expanded: boolean;
 }, true>);
 export default _default;

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

@@ -1 +1,2 @@
 export { default as OrCheckboxTreeV3 } from './OrCheckboxTree.vue';
+export * from './types';

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

@@ -1,4 +1,4 @@
-export { s as OrCheckboxTreeV3 } from '../../OrCheckboxTree-db42d072.js';
+export { s as OrCheckboxTreeV3 } from '../../OrCheckboxTree-a02567a5.js';
 import 'vue-demi';
 import '@vueuse/core';
 import '../../OrCheckbox-488b6915.js';

package/dist/esm/v3/components/or-checkbox-tree-v3/types.d.ts

@@ -1,7 +1,8 @@
-export type CheckboxNode = {
+export type CheckboxTreeNode = {
     label: string;
     value: string;
-    children?: CheckboxNode[];
+    children?: CheckboxTreeNode[];
     collapsible?: boolean;
     disabled?: boolean;
+    expanded?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "4.1.3-beta.2560.0",
+  "version": "4.1.3-beta.2563.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",

package/src/components/or-checkbox-group-v3/OrCheckboxGroup.stories3.ts

@@ -307,3 +307,67 @@ CheckboxGroupWithAddon.args = {
     },
   ],
 };
+
+export const CheckboxGroupDeepPartiallyCollapsed = Template.bind({});
+
+CheckboxGroupDeepPartiallyCollapsed.args = {
+  label: 'Checkbox Group tree',
+  options: [
+    {
+      label: 'Option 1',
+      value: '1',
+    },
+    {
+      label: 'Option 2',
+      value: '2',
+    },
+    {
+      label: 'Option 3',
+      collapsible: true,
+      expanded: false,
+      children: [
+        {
+          label: 'Option 3.1',
+          value: '3.1',
+        },
+        {
+          label: 'Option 3.2',
+          value: '3.2',
+        },
+        {
+          label: 'Option 3.3',
+          collapsible: true,
+          expanded: false,
+          children: [
+            {
+              label: 'Option 3.3.1',
+              value: '3.3.1',
+            },
+            {
+              label: 'Option 3.3.2',
+              value: '3.3.2',
+            },
+            {
+              label: 'Option 3.3.3',
+              collapsible: true,
+              children: [
+                {
+                  label: 'Option 3.3.3.1',
+                  value: '3.3.3.1',
+                },
+                {
+                  label: 'Option 3.3.3.2',
+                  value: '3.3.3.2',
+                },
+              ],
+            },
+            {
+              label: 'Option 3.3.4',
+              value: '3.3.3',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};

package/src/components/or-checkbox-group-v3/OrCheckboxGroup.vue

@@ -16,6 +16,7 @@
       :item="option"
       :disabled="disabled || option.disabled"
       :collapsible="option.collapsible"
+      :expanded="option.expanded"
     />
   </OrFormGroup>
 </template>
@@ -24,7 +25,7 @@
 import { defineComponent, PropType } from 'vue-demi';
 import { useVModel } from '@vueuse/core';
 import { OrFormGroupV3 as OrFormGroup, FormGroupDirection } from '../or-form-group-v3';
-import { OrCheckboxTreeV3 as OrCheckboxTree } from '../or-checkbox-tree-v3';
+import { OrCheckboxTreeV3 as OrCheckboxTree, CheckboxTreeNode } from '../or-checkbox-tree-v3';
 
 
 export default defineComponent({
@@ -59,7 +60,7 @@ export default defineComponent({
       default: FormGroupDirection.Vertical,
     },
     options: {
-      type: Array as PropType<{ label: string; value: any; disabled?: boolean; collapsible: boolean;}[]>,
+      type: Array as PropType<CheckboxTreeNode[]>,
       default: () => [],
     },
     disabled: {
@@ -77,6 +78,3 @@ export default defineComponent({
 
 </script>
 
-<style scoped>
-
-</style>

package/src/components/or-checkbox-tree-v3/OrCheckboxTree.vue

@@ -43,6 +43,7 @@
           class="mt-xs"
           :item="child"
           :collapsible="child.collapsible"
+          :expanded="child.expanded"
           :disabled="disabled || child.disabled"
         />
       </div>
@@ -59,13 +60,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue-demi';
+import { computed, defineComponent, PropType, watch } from 'vue-demi';
 import { useVModel, useToggle } from '@vueuse/core';
 import { OrCheckboxV3 as OrCheckbox } from '../or-checkbox-v3';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { OrButtonV3 as OrButton } from '../or-button-v3';
 import { CheckboxTreeRoot, CheckboxTreeRootParent } from './styles';
-import { CheckboxNode } from './types';
+import { CheckboxTreeNode } from './types';
 import flattenDeep from '../../utils/functions/flattenDeep';
 
 export default defineComponent({
@@ -87,7 +88,7 @@ export default defineComponent({
       default: () => [],
     },
     item: {
-      type: Object as PropType<CheckboxNode>,
+      type: Object as PropType<CheckboxTreeNode>,
       required: true,
     },
     collapsible: {
@@ -98,6 +99,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    expanded: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   emits: [
@@ -109,7 +114,7 @@ export default defineComponent({
     // State
     const hasChildren = computed(() => props.item.children && props.item.children.length > 0);
     const childrenValues = computed(() => {
-      const getChildValues = (children?: CheckboxNode[]): any[] | undefined => {
+      const getChildValues = (children?: CheckboxTreeNode[]): any[] | undefined => {
         return children?.map((child) => {
           if (child.children) {
             return getChildValues(child.children);
@@ -136,7 +141,13 @@ export default defineComponent({
       return isAnyChildrenSelected.value && !isAllChildrenSelected.value;
     });
 
-    const [isOpen, setIsOpen] = useToggle(true);
+    const [isOpen, setIsOpen] = useToggle(props.expanded);
+
+    watch(() => props.expanded, (value) => {
+      if (value !== undefined) {
+        setIsOpen(value);
+      }
+    });
 
     // Styles
     const rootStyles = computed(() => [

package/src/components/or-checkbox-tree-v3/index.ts

@@ -1 +1,2 @@
 export { default as OrCheckboxTreeV3 } from './OrCheckboxTree.vue';
+export * from './types';

package/src/components/or-checkbox-tree-v3/types.ts

@@ -1,7 +1,8 @@
-export type CheckboxNode = {
+export type CheckboxTreeNode = {
   label: string;
   value: string;
-  children?: CheckboxNode[];
+  children?: CheckboxTreeNode[];
   collapsible?: boolean;
   disabled?: boolean;
+  expanded?: boolean;
 };