@onereach/ui-components 2.71.0 → 2.71.1-beta.2220.0

package/dist/esm/v3/components/or-sidebar-v3/OrSidebar.vue.d.ts

@@ -4,26 +4,36 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     resizeBar: import("@vue/composition-api").Ref<HTMLElement | null>;
     isResizing: import("@vue/composition-api").Ref<boolean>;
+    isCollapsed: import("@vue/composition-api").Ref<boolean>;
     localWidth: import("@vue/composition-api").Ref<number>;
+    isShowingToolbar: import("@vue/composition-api").ComputedRef<boolean>;
     sidebarStyle: import("@vue/composition-api").ComputedRef<{
         width: string;
     }>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    sidebarStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    toolbarStyles: import("@vue/composition-api").ComputedRef<string[]>;
     resizeStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    collapsibleButtonStyles: import("@vue/composition-api").ComputedRef<string[]>;
     mainStyles: import("@vue/composition-api").ComputedRef<string[]>;
     headerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     contentStyles: import("@vue/composition-api").ComputedRef<string[]>;
     footerStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    open: () => void;
+    close: () => void;
 }> & import("@vue/composition-api").Data, {}, {}, {
     width: {
         type: NumberConstructor;
-        required: false;
         default: number;
         validator: (value?: any) => boolean;
     };
     minimumWidth: {
         type: NumberConstructor;
-        required: false;
+        default: number;
+        validator: (value?: any) => boolean;
+    };
+    maximumWidth: {
+        type: NumberConstructor;
         default: number;
         validator: (value?: any) => boolean;
     };
@@ -39,16 +49,27 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: OrSidebarPlacement;
         validator: (value?: any) => boolean;
     };
+    draggable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    collapsible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     width: {
         type: NumberConstructor;
-        required: false;
         default: number;
         validator: (value?: any) => boolean;
     };
     minimumWidth: {
         type: NumberConstructor;
-        required: false;
+        default: number;
+        validator: (value?: any) => boolean;
+    };
+    maximumWidth: {
+        type: NumberConstructor;
         default: number;
         validator: (value?: any) => boolean;
     };
@@ -64,35 +85,59 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: OrSidebarPlacement;
         validator: (value?: any) => boolean;
     };
+    draggable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    collapsible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     width: number;
     minimumWidth: number;
+    maximumWidth: number;
     side: OrSidebarPlacement;
+    draggable: boolean;
+    collapsible: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     resizeBar: import("@vue/composition-api").Ref<HTMLElement | null>;
     isResizing: import("@vue/composition-api").Ref<boolean>;
+    isCollapsed: import("@vue/composition-api").Ref<boolean>;
     localWidth: import("@vue/composition-api").Ref<number>;
+    isShowingToolbar: import("@vue/composition-api").ComputedRef<boolean>;
     sidebarStyle: import("@vue/composition-api").ComputedRef<{
         width: string;
     }>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    sidebarStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    toolbarStyles: import("@vue/composition-api").ComputedRef<string[]>;
     resizeStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    collapsibleButtonStyles: import("@vue/composition-api").ComputedRef<string[]>;
     mainStyles: import("@vue/composition-api").ComputedRef<string[]>;
     headerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     contentStyles: import("@vue/composition-api").ComputedRef<string[]>;
     footerStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    open: () => void;
+    close: () => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     width: number;
     minimumWidth: number;
+    maximumWidth: number;
     side: OrSidebarPlacement;
+    draggable: boolean;
+    collapsible: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, {
     width: number;
     minimumWidth: number;
+    maximumWidth: number;
     side: OrSidebarPlacement;
+    draggable: boolean;
+    collapsible: boolean;
 }, true>);
 export default _default;

package/dist/esm/v3/components/or-sidebar-v3/OrSidebarCollapseButton.stories3.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+declare const _default: Meta<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
+    [x: string]: ((...args: any[]) => any) | null;
+} | string[], {} & {}, {
+    [x: number]: string;
+} | {}, true>)>;
+export default _default;
+export declare const Default: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
+    [x: string]: ((...args: any[]) => any) | null;
+} | string[], {} & {}, {
+    [x: number]: string;
+} | {}, true>)>;

package/dist/esm/v3/components/or-sidebar-v3/OrSidebarCollapseButton.vue.d.ts

@@ -0,0 +1,53 @@
+import { PropType } from 'vue-demi';
+import { OrSidebarPlacement } from './props';
+declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+    root: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    buttonStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    icon: import("@vue/composition-api").ComputedRef<"keyboard_arrow_left" | "keyboard_arrow_right">;
+}> & import("@vue/composition-api").Data, {}, {}, {
+    /**
+     * Must be `true` if sidebar is collapsed.
+     */
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    side: {
+        type: PropType<OrSidebarPlacement>;
+        default: OrSidebarPlacement;
+        validator: (value?: any) => boolean;
+    };
+}, import("@vue/composition-api").ExtractPropTypes<{
+    /**
+     * Must be `true` if sidebar is collapsed.
+     */
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    side: {
+        type: PropType<OrSidebarPlacement>;
+        default: OrSidebarPlacement;
+        validator: (value?: any) => boolean;
+    };
+}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+    modelValue: boolean;
+    side: OrSidebarPlacement;
+} & {} & {
+    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
+}, import("@vue/composition-api").ShallowUnwrapRef<{
+    root: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    buttonStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    icon: import("@vue/composition-api").ComputedRef<"keyboard_arrow_left" | "keyboard_arrow_right">;
+}>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
+    modelValue: boolean;
+    side: OrSidebarPlacement;
+} & {} & {
+    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: boolean;
+    side: OrSidebarPlacement;
+}, true>);
+export default _default;

package/dist/esm/v3/components/or-sidebar-v3/index.js

@@ -1,5 +1,16 @@
-export { O as OrSidebarPlacement, s as OrSidebarV3 } from '../../OrSidebar-a62972f5.js';
+export { O as OrSidebarPlacement, s as OrSidebarV3 } from '../../OrSidebar-f6b2050b.js';
 import '@vueuse/core';
 import 'lodash';
 import 'vue-demi';
+import '../../OrIconButton-1a89fbf9.js';
+import '../../useClassAttribute-47fdb016.js';
+import '../../OrIcon-b195169c.js';
 import 'vue';
+import '../../OrTooltip-50d27b4f.js';
+import '../../OrPopover-1075dd38.js';
+import '@floating-ui/dom';
+import '../../useElevation-31bfe1f6.js';
+import '../../useResponsive-a02e95b7.js';
+import '../../OrBottomSheet-62817aec.js';
+import '../../OrOverlay-738a44d5.js';
+import '../../OrTeleport.vue3-8099178c.js';

package/dist/esm/v3/components/or-sidebar-v3/styles.d.ts

@@ -1,10 +1,18 @@
 import { OrSidebarPlacement } from './props';
 export declare const SidebarRoot: string[];
-export declare const SidebarRootSides: Record<OrSidebarPlacement, string[]>;
+export declare const SidebarBar: string[];
+export declare const SidebarToolbar: string[];
+export declare const CollapsibleSidebarToolbar: string[];
+export declare const SidebarSides: Record<OrSidebarPlacement, string[]>;
+export declare const SidebarToolbarSides: Record<OrSidebarPlacement, string[]>;
 export declare const SidebarResize: string[];
 export declare const SidebarResizeSides: Record<OrSidebarPlacement, string[]>;
+export declare const SidebarCollapseButton: string[];
+export declare const SidebarCollapseButtonSides: Record<OrSidebarPlacement, string[]>;
 export declare const SidebarResizingSides: Record<OrSidebarPlacement, string[]>;
 export declare const SidebarMain: string[];
 export declare const SidebarHeader: string[];
 export declare const SidebarContent: string[];
 export declare const SidebarFooter: string[];
+export declare const CollapseButtonContainer: string[];
+export declare const CollapseButton: string[];

package/dist/esm/v3/index.js

@@ -65,7 +65,7 @@ export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmen
 export { s as OrSelect } from './OrSelect-0821b907.js';
 export { s as OrSelectV3 } from './OrSelect-8fbd88bc.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-375c85a3.js';
-export { O as OrSidebarPlacement, s as OrSidebarV3 } from './OrSidebar-a62972f5.js';
+export { O as OrSidebarPlacement, s as OrSidebarV3 } from './OrSidebar-f6b2050b.js';
 export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText-2b1610ce.js';
 export { s as OrSkeletonCircleV3, a as OrSkeletonRectV3, b as OrSkeletonTextV3 } from './OrSkeletonText-3965ff71.js';
 export { s as OrSlider } from './OrSlider-87e2da8c.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.71.0",
+  "version": "2.71.1-beta.2220.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -124,6 +124,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "cefc97d698b64427f39d20edb6f637b22a00a362"
+  }
 }

package/src/components/or-sidebar-v3/OrSidebar.docs.mdx

@@ -5,3 +5,9 @@ import { OrSidebarV3 as OrSidebar } from '@onereach/ui-components';
 ```
 
 <DocsPage />
+
+## Migration Guide from V1
+  - added property `draggable`
+  - added property `maximumWidth`
+  - added property `collapsible`
+  - added slot `toolbar`

package/src/components/or-sidebar-v3/OrSidebar.stories3.ts

@@ -3,8 +3,11 @@ import OrSidebarDocs from './OrSidebar.docs.mdx';
 import OrSidebar from './OrSidebar.vue';
 import { OrSidebarPlacement } from './props';
 import { action } from '@storybook/addon-actions';
+import { ref } from 'vue-demi';
 import * as Faker from 'faker';
 import { OrButtonV3 as OrButton } from '../or-button-v3';
+import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
+import { OrTabsV3 as OrTabs, TabsItem } from '../or-tabs-v3';
 
 export default {
   title: 'Components/Sidebar',
@@ -39,6 +42,15 @@ export default {
       control: { type: 'text' },
     },
 
+    toolbar: {
+      type: {
+        name: 'string',
+        required: false,
+      },
+
+      control: { type: 'text' },
+    },
+
     // Props
     width: {
       control: { type: 'number' },
@@ -52,11 +64,17 @@ export default {
       control: { type: 'select' },
       options: Object.values(OrSidebarPlacement),
     },
+
+    draggable: {
+      control: { type: 'boolean' },
+    },
+
+    collapsible: {
+      control: { type: 'boolean' },
+    },
   },
 
   parameters: {
-    layout: 'centered',
-
     docs: {
       page: OrSidebarDocs,
     },
@@ -67,6 +85,7 @@ const DefaultTemplate: StoryFn<typeof OrSidebar> = (args) => ({
   components: {
     OrSidebar,
     OrButton,
+    OrIconButton,
   },
 
   setup() {
@@ -78,9 +97,12 @@ const DefaultTemplate: StoryFn<typeof OrSidebar> = (args) => ({
   },
 
   template: `
-    <div style="display: flex; flex-direction: row; border: 1px solid gray; max-height: 500px">
-      <div style="flex-grow: 1; overflow: auto">
-        ${Faker.lorem.paragraphs(3)}
+    <div style="display: flex; flex-direction: row; border: 1px solid gray; height: 650px">
+      <div
+        class="theme-background-surface-1 dark:theme-background-surface-1-dark text-on-background dark:text-on-background-dark"
+        style="flex-grow: 1; overflow: auto; padding: 16px"
+      >
+        ${Faker.lorem.paragraphs(10)}
       </div>
       <OrSidebar v-bind="args" @change:width="onChangeWidth">
           <template v-if="${!!args.header}" v-slot:header>
@@ -92,6 +114,9 @@ const DefaultTemplate: StoryFn<typeof OrSidebar> = (args) => ({
           <template v-if="${!!args.footer}" v-slot:footer>
             ${args.footer}
           </template>
+          <template v-if="${!!args.toolbar}" v-slot:toolbar>
+            ${args.toolbar}
+          </template>
       </OrSidebar>
     </div>
   `,
@@ -101,6 +126,7 @@ const LeftTemplate: StoryFn<typeof OrSidebar> = (args) => ({
   components: {
     OrSidebar,
     OrButton,
+    OrIconButton,
   },
 
   setup() {
@@ -112,7 +138,7 @@ const LeftTemplate: StoryFn<typeof OrSidebar> = (args) => ({
   },
 
   template: `
-    <div style="display: flex; flex-direction: row; border: 1px solid gray; max-height: 500px">
+    <div style="display: flex; flex-direction: row; border: 1px solid gray; height: 650px">
       <OrSidebar v-bind="args" @change:width="onChangeWidth">
           <template v-if="${!!args.header}" v-slot:header>
             ${args.header}
@@ -123,14 +149,143 @@ const LeftTemplate: StoryFn<typeof OrSidebar> = (args) => ({
           <template v-if="${!!args.footer}" v-slot:footer>
             ${args.footer}
           </template>
+          <template v-if="${!!args.toolbar}" v-slot:toolbar>
+            ${args.toolbar}
+          </template>
       </OrSidebar>
-      <div style="flex-grow: 1; overflow: auto">
-        ${Faker.lorem.paragraphs(3)}
+      <div
+        class="theme-background-surface-1 dark:theme-background-surface-1-dark text-on-background dark:text-on-background-dark"
+        style="flex-grow: 1; overflow: auto; padding: 16px"
+      >
+        ${Faker.lorem.paragraphs(10)}
       </div>
     </div>
   `,
 });
 
+const TabsTemplate: StoryFn<typeof OrSidebar> = (args) => ({
+  components: {
+    OrSidebar,
+    OrButton,
+    OrIconButton,
+    OrTabs,
+  },
+
+  setup() {
+    // State
+    const model = ref<string>();
+
+    return {
+      args,
+      model,
+    };
+  },
+
+  methods: {
+    onChangeWidth: action('change:width'),
+  },
+
+  template: `
+    <div style="display: flex; flex-direction: row; border: 1px solid gray; height: 650px">
+      <div
+        class="theme-background-surface-1 dark:theme-background-surface-1-dark text-on-background dark:text-on-background-dark"
+        style="flex-grow: 1; overflow: auto; padding: 16px"
+      >
+        ${Faker.lorem.paragraphs(10)}
+      </div>
+      <OrSidebar v-bind="args" @change:width="onChangeWidth">
+          <template v-if="${!!args.header}" v-slot:header>
+            ${args.header}
+          </template>
+          <template v-if="${!!args.default}" v-slot:default>
+            ${args.default}
+          </template>
+          <template v-else v-slot:default>
+            <or-tabs
+              v-model="model"
+              :items="args.items"
+            >
+              <template v-for="item in args.items" #[item.value]>
+                {{ item.label }} Content
+                ${Faker.lorem.paragraphs(3)}
+              </template>
+            </or-tabs>
+          </template>
+          <template v-if="${!!args.footer}" v-slot:footer>
+            ${args.footer}
+          </template>
+          <template v-if="${!!args.toolbar}" v-slot:toolbar>
+            ${args.toolbar}
+          </template>
+      </OrSidebar>
+    </div>
+  `,
+});
+
+const longToolbar = `
+  <or-icon-button
+    icon="refresh"
+    color="inherit"
+  />
+  <hr class="w-full border-outline-variant dark:border-outline-variant-dark" />
+  <or-icon-button
+    icon="add"
+    color="inherit"
+  />
+  <or-icon-button
+    icon="zoom_out_map"
+    color="inherit"
+  />
+  <or-icon-button
+    icon="remove"
+    color="inherit"
+  />
+  <hr class="w-full border-outline-variant dark:border-outline-variant-dark" />
+  <or-icon-button
+    icon="description"
+    color="inherit"
+  />
+  <or-icon-button
+    icon="tab_unselected"
+    color="inherit"
+  />
+  <hr class="w-full border-outline-variant dark:border-outline-variant-dark" />
+  <or-icon-button
+    icon="create_new_folder"
+    color="inherit"
+  />
+  <or-icon-button
+    icon="content_paste"
+    color="inherit"
+  />
+  <or-icon-button
+    icon="location_on"
+    color="inherit"
+  />
+  <or-icon-button
+    icon="copy_all"
+    color="inherit"
+  />
+  <or-icon-button
+    icon="call_split"
+    color="inherit"
+  />
+  <hr class="w-full border-outline-variant dark:border-outline-variant-dark" />
+  <or-icon-button
+    icon="sell"
+    color="inherit"
+  />
+  <div class="mt-auto" />
+  <or-icon-button
+    icon="terminal"
+    color="inherit"
+  />
+  <or-icon-button
+    icon="delete"
+    color="inherit"
+  />
+`;
+
 export const Default = DefaultTemplate.bind({});
 Default.args = {
   header: 'Header',
@@ -138,11 +293,24 @@ Default.args = {
   footer: 'Footer',
 };
 
-export const WithMinimumWidth = DefaultTemplate.bind({});
-WithMinimumWidth.args = {
+export const WithCustomWidthConstraints = DefaultTemplate.bind({});
+WithCustomWidthConstraints.args = {
   ...Default.args,
   width: 250,
   minimumWidth: 200,
+  maximumWidth: 500,
+};
+
+export const NotDraggable = DefaultTemplate.bind({});
+NotDraggable.args = {
+  ...Default.args,
+  draggable: false,
+};
+
+export const Collapsible = DefaultTemplate.bind({});
+Collapsible.args = {
+  ...Default.args,
+  collapsible: true,
 };
 
 export const OnlyContent = DefaultTemplate.bind({});
@@ -167,8 +335,60 @@ WithFooter.args = {
   `,
 };
 
+export const WithToolbar = DefaultTemplate.bind({});
+WithToolbar.args = {
+  ...OnlyContent.args,
+  toolbar: longToolbar,
+};
+
+export const CollapsibleWithToolbar = DefaultTemplate.bind({});
+CollapsibleWithToolbar.args = {
+  ...WithToolbar.args,
+  collapsible: true,
+};
+
+export const WithTabs = TabsTemplate.bind({});
+WithTabs.args = {
+  minimumWidth: 352,
+  header: 'Headline',
+  items: Array.from<string, TabsItem>([
+    'Alfa',
+    'Bravo',
+    'Charlie',
+    'Delta',
+    'Echo',
+    'Foxtrot',
+    'Golf',
+    'Hotel',
+    'India',
+    'Juliett',
+  ], (item) => ({
+    value: item.toLowerCase(),
+    label: item,
+  })),
+  footer: `
+    <div style="display: flex; flex-direction: row; justify-content: end; gap: 16px">
+        <or-button color="danger" variant="outlined">Delete</or-button>
+        <or-button variant="outlined" class="ml-auto">Cancel</or-button>
+        <or-button>Save</or-button>
+    </div>
+  `,
+};
+
 export const LeftSidebar = LeftTemplate.bind({});
 LeftSidebar.args = {
   ...Default.args,
   side: 'left',
 };
+
+export const WithLeftToolbar = LeftTemplate.bind({});
+WithLeftToolbar.args = {
+  ...LeftSidebar.args,
+  toolbar: longToolbar,
+};
+
+export const CollapsibleWithWithLeftToolbar = LeftTemplate.bind({});
+CollapsibleWithWithLeftToolbar.args = {
+  ...WithLeftToolbar.args,
+  collapsible: true,
+};