@onereach/ui-components 4.1.2-beta.2554.0 → 4.1.2

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

@@ -1,263 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryFn } from '@storybook/vue3';
-import { ref, watch } from 'vue-demi';
-import { FormGroupDirection } from '../or-form-group-v3';
-import OrCheckboxGroupDocs from './OrCheckboxGroup.docs.mdx';
-import OrCheckboxGroup from './OrCheckboxGroup.vue';
-import { OrIconV3 as OrIcon } from '../or-icon-v3';
-
-export default {
-  title: 'Components/Forms/Checkbox/Group',
-  component: OrCheckboxGroup,
-  argTypes: {
-    label: {
-      control: { type: 'text' },
-    },
-    error: {
-      control: { type: 'text' },
-    },
-    hint: {
-      control: { type: 'text' },
-    },
-    direction: {
-      control: {
-        type: 'radio',
-        options: Object.values(FormGroupDirection),
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      page: OrCheckboxGroupDocs,
-    },
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=202%3A12',
-    },
-  },
-} as Meta<typeof OrCheckboxGroup>;
-
-const Template: StoryFn<typeof OrCheckboxGroup> = (args) => ({
-  components: {
-    OrCheckboxGroup,
-  },
-  setup() {
-    const model = ref([]);
-
-    watch(model, (value) => {
-      console.debug(value);
-    });
-
-    return {
-      args,
-      model,
-      onUpdateModelValue: action('update:modelValue'),
-    };
-  },
-
-  template: `
-    <div class="contents">
-      <OrCheckboxGroup
-        v-bind="args"
-        v-model="model"
-        @update:modelValue="onUpdateModelValue"
-      />
-    </div>
-  `,
-});
-
-export const CheckboxGroup = Template.bind({});
-
-CheckboxGroup.args = {
-  label: 'Checkbox Group',
-  options: [
-    {
-      label: 'Option 1',
-      value: '1',
-    },
-    {
-      label: 'Option 2',
-      value: '2',
-    },
-    {
-      label: 'Option 3',
-      value: '3',
-    },
-  ],
-};
-
-export const CheckboxGroupTree = Template.bind({});
-
-CheckboxGroupTree.args = {
-  label: 'Checkbox Group tree',
-  options: [
-    {
-      label: 'Option 1',
-      children: [
-        {
-          label: 'Option 1.1',
-          value: '1.1',
-        },
-        {
-          label: 'Option 1.2',
-          value: '1.2',
-        },
-        {
-          label: 'Option 1.3',
-          value: '1.3',
-        },
-      ],
-    },
-  ],
-};
-
-
-export const CheckboxGroupDeepTree = Template.bind({});
-
-CheckboxGroupDeepTree.args = {
-  label: 'Checkbox Group tree',
-  options: [
-    {
-      label: 'Option 1',
-      value: '1',
-    },
-    {
-      label: 'Option 2',
-      value: '2',
-    },
-    {
-      label: 'Option 3',
-      children: [
-        {
-          label: 'Option 3.1',
-          value: '3.1',
-        },
-        {
-          label: 'Option 3.2',
-          value: '3.2',
-        },
-        {
-          label: 'Option 3.3',
-          children: [
-            {
-              label: 'Option 3.3.1',
-              value: '3.3.1',
-            },
-            {
-              label: 'Option 3.3.2',
-              value: '3.3.2',
-            },
-            {
-              label: 'Option 3.3.3',
-              value: '3.3.3',
-            },
-          ],
-        },
-      ],
-    },
-  ],
-};
-
-
-export const CheckboxGroupDeepCollapsibleTree = Template.bind({});
-
-CheckboxGroupDeepCollapsibleTree.args = {
-  label: 'Checkbox Group tree',
-  options: [
-    {
-      label: 'Option 1',
-      value: '1',
-    },
-    {
-      label: 'Option 2',
-      value: '2',
-    },
-    {
-      label: 'Option 3',
-      collapsible: true,
-      children: [
-        {
-          label: 'Option 3.1',
-          value: '3.1',
-        },
-        {
-          label: 'Option 3.2',
-          value: '3.2',
-        },
-        {
-          label: 'Option 3.3',
-          collapsible: true,
-          children: [
-            {
-              label: 'Option 3.3.1',
-              value: '3.3.1',
-            },
-            {
-              label: 'Option 3.3.2',
-              value: '3.3.2',
-            },
-            {
-              label: 'Option 3.3.3',
-              value: '3.3.3',
-            },
-          ],
-        },
-      ],
-    },
-  ],
-};
-
-
-const TemplateWithAddon: StoryFn<typeof OrCheckboxGroup> = (args) => ({
-  components: {
-    OrCheckboxGroup,
-    OrIcon,
-  },
-  setup() {
-    const model = ref([]);
-
-    watch(model, (value) => {
-      console.debug(value);
-    });
-
-    return {
-      args,
-      model,
-      onUpdateModelValue: action('update:modelValue'),
-    };
-  },
-
-  template: `
-    <div class="contents">
-      <OrCheckboxGroup
-        v-bind="args"
-        v-model="model"
-        @update:modelValue="onUpdateModelValue"
-      >
-        <template #addon>
-          <OrIcon icon="info" />
-        </template>
-      </OrCheckboxGroup>
-    </div>
-  `,
-});
-
-export const CheckboxGroupWithAddon = TemplateWithAddon.bind({});
-
-CheckboxGroupWithAddon.args = {
-  label: 'Checkbox Group',
-  options: [
-    {
-      label: 'Option 1',
-      value: '1',
-    },
-    {
-      label: 'Option 2',
-      value: '2',
-    },
-    {
-      label: 'Option 3',
-      value: '3',
-    },
-  ],
-};

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

@@ -1,82 +0,0 @@
-<template>
-  <OrFormGroup
-    :label="label"
-    :error="error"
-    :hint="hint"
-    :disabled="disabled"
-    :direction="direction"
-  >
-    <template v-slot:addon>
-      <slot name="addon" />
-    </template>
-    <OrCheckboxTree
-      v-for="option in options"
-      :key="option.value"
-      v-model="proxyModelValue"
-      :item="option"
-      :disabeld="disabled || option.disabled"
-      :collapsible="option.collapsible"
-    />
-  </OrFormGroup>
-</template>
-
-<script lang="ts">
-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';
-
-
-export default defineComponent({
-  name: 'OrCheckboxGroup',
-  components: {
-    OrCheckboxTree,
-    OrFormGroup,
-  },
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue',
-  },
-  props: {
-    modelValue: {
-      type: Array as PropType<string[]>,
-      default: () => [],
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    error: {
-      type: String,
-      default: '',
-    },
-    hint: {
-      type: String,
-      default: '',
-    },
-    direction: {
-      type: String as PropType<FormGroupDirection>,
-      default: FormGroupDirection.Vertical,
-    },
-    options: {
-      type: Array as PropType<{ label: string; value: any; disabled?: boolean; collapsible: boolean;}[]>,
-      default: () => [],
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props, { emit }) {
-    const proxyModelValue = useVModel(props, 'modelValue', emit);
-    return {
-      proxyModelValue,
-    };
-  },
-});
-
-</script>
-
-<style scoped>
-
-</style>

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

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

package/src/components/or-checkbox-tree-v3/OrCheckboxTree.docs.mdx

@@ -1,7 +0,0 @@
-import { DocsPage } from '@storybook/addon-docs';
-
-```ts
-import { OrCheckboxTreeV3 as OrCheckboxTree } from '@onereach/ui-components';
-```
-
-<DocsPage />

package/src/components/or-checkbox-tree-v3/OrCheckboxTree.stories3.ts

@@ -1,112 +0,0 @@
-import { Meta, StoryFn } from '@storybook/vue3';
-import { ref } from 'vue-demi';
-import OrCheckboxTreeDocs from './OrCheckboxTree.docs.mdx';
-import OrCheckboxTree from './OrCheckboxTree.vue';
-
-export default {
-  title: 'Components/Forms/Checkbox/Tree',
-  component: OrCheckboxTree,
-  parameters: {
-    docs: {
-      page: OrCheckboxTreeDocs,
-    },
-  },
-} as Meta<typeof OrCheckboxTree>;
-
-const Template: StoryFn<typeof OrCheckboxTree> = (args) => ({
-  components: {
-    OrCheckboxTree,
-  },
-  setup() {
-    const model = ref<string[]>([]);
-    return {
-      args,
-      model,
-    };
-  },
-  template: `
-    <div class="contents">
-      <OrCheckboxTree
-        v-for="item in args.items"
-        v-model="model"
-        :item="item"
-      />
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  items: [
-    {
-      label: 'Option 1',
-      value: '1',
-    },
-    {
-      label: 'Option 2',
-      value: '2',
-    },
-    {
-      label: 'Option 3',
-      children: [
-        {
-          label: 'Option 3.1',
-          value: '3.1',
-        },
-        {
-          label: 'Option 3.2',
-          collapsible: true,
-          children: [
-            {
-              label: 'Option 3.2.1',
-              value: '3.2.1',
-            },
-            {
-              label: 'Option 3.2.2',
-              value: '3.2.2',
-            },
-            {
-              label: 'Option 3.2.3',
-              children: [
-                {
-                  label: 'Option',
-                  value: '3.3.1',
-                },
-                {
-                  label: 'Option',
-                  value: '3.3.2',
-                },
-                {
-                  label: 'Option',
-                  value: '3.3.3',
-                },
-              ],
-            },
-          ],
-        },
-        {
-          label: 'Option 3.3',
-          value: '3.3',
-        },
-      ],
-    },
-    {
-      label: 'Option 4',
-      value: '4',
-    },
-    {
-      label: 'Option 5',
-      collapsible: true,
-      children: [
-        {
-          label: 'Option 5.1',
-          value: '5.1',
-        },
-        {
-          label: 'Option 5.2',
-          value: '5.2',
-        },
-      ],
-    },
-  ],
-};

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

@@ -1,161 +0,0 @@
-<template>
-  <div
-    ref="root"
-    :class="rootStyles"
-  >
-    <template v-if="hasChildren">
-      <div :class="parentStyles">
-        <template
-          v-if="collapsible"
-        >
-          <OrIcon
-            :class="[isOpen ? 'rotate-[180deg]': 'rotate-0']"
-            icon="arrow_drop_down"
-            size="l"
-            @click="() => setIsOpen(!isOpen)"
-          />
-        </template>
-        <OrCheckbox
-          value="true"
-          :model-value="isAllChildrenSelected"
-          :indeterminate="isIntermediate"
-          :label="item.label"
-          @click="handleParentClick"
-        />
-      </div>
-      <div
-        v-if="hasChildren && isOpen"
-        :class="{
-          'ml-2xl': collapsible,
-          'ml-lg': !collapsible
-        }"
-      >
-        <OrCheckboxTree
-          v-for="child in item.children"
-          :key="child.value"
-          v-model="proxyModelValue"
-          class="mt-xs"
-          :item="child"
-          :collapsible="collapsible || child.collapsible"
-        />
-      </div>
-    </template>
-    <template v-else>
-      <OrCheckbox
-        v-model="proxyModelValue"
-        :label="item.label"
-        :value="item.value"
-      />
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } 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 { CheckboxTreeRoot, CheckboxTreeRootParent } from './styles';
-import { CheckboxNode } from './types';
-import flattenDeep from '../../utils/functions/flattenDeep';
-
-export default defineComponent({
-  name: 'OrCheckboxTree',
-  components: {
-    OrIcon,
-    OrCheckbox,
-  },
-
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue',
-  },
-
-  props: {
-    modelValue: {
-      type: Array as PropType<string[]>,
-      default: () => [],
-    },
-    item: {
-      type: Object as PropType<CheckboxNode>,
-      required: true,
-    },
-    collapsible: {
-      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?: CheckboxNode[]): any[] | undefined => {
-        return 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(() => {
-      return proxyModelValue.value?.some((value) => childrenValues.value?.includes(value));
-    });
-
-    const isAllChildrenSelected = computed(() => {
-      return childrenValues.value?.every((value) => proxyModelValue.value?.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>

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

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

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

@@ -1,15 +0,0 @@
-export const CheckboxTreeRoot: string[] = [
-  // Layout
-  'flex',
-  'flex-col',
-
-  // Spacing
-  'gap-sm+ md:gap-sm',
-];
-
-export const CheckboxTreeRootParent: string[] = [
-  // Layout
-  'flex',
-  'flex-row',
-  'gap-xs',
-];

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

@@ -1,6 +0,0 @@
-export type CheckboxNode = {
-  label: string;
-  value: string;
-  children?: CheckboxNode[];
-  collapsible?: boolean;
-};