@onereach/ui-components 6.4.1-beta.3431.0 → 6.4.1-beta.3432.0

package/dist/bundled/v2/components/OrResizeablePanelV3/OrResizeablePanel.js

@@ -1,16 +1,40 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { ResizeablePanel } from './styles.js';
+import { ResizeablePanel, ResizeablePanelResizeBar, ResizeablePanelResizeBarSides, ResizeablePanelHeader, ResizeablePanelContent, ResizeablePanelFooter } from './styles.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 
 var script = defineComponent({
-  setup() {
+  props: {
+    side: {
+      type: String,
+      required: true
+    },
+    resizeable: {
+      type: Boolean,
+      default: true
+    },
+    collapsible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
     // Refs
     const root = ref();
+    const resizeBar = ref();
     // Styles
     const rootStyles = computed(() => ['or-resizeable-panel-v3', ...ResizeablePanel]);
+    const resizeBarStyles = computed(() => [...ResizeablePanelResizeBar, ...ResizeablePanelResizeBarSides[props.side]]);
+    const headerStyles = computed(() => [...ResizeablePanelHeader]);
+    const contentStyles = computed(() => [...ResizeablePanelContent]);
+    const footerStyles = computed(() => [...ResizeablePanelFooter]);
     return {
       root,
-      rootStyles
+      resizeBar,
+      rootStyles,
+      resizeBarStyles,
+      headerStyles,
+      contentStyles,
+      footerStyles
     };
   }
 });
@@ -26,7 +50,15 @@ var __vue_render__ = function () {
   return _c('div', {
     ref: "root",
     class: _vm.rootStyles
-  }, [_vm._t("default")], 2);
+  }, [_vm.resizeable ? [_c('div', {
+    ref: "resizeBar"
+  })] : _vm._e(), _vm._v(" "), _vm.$slots.header ? [_c('header', {
+    class: _vm.headerStyles
+  }, [_vm._t("header")], 2)] : _vm._e(), _vm._v(" "), _c('div', {
+    class: _vm.contentStyles
+  }, [_vm._t("default")], 2), _vm._v(" "), _vm.$slots.footer ? [_c('footer', {
+    class: _vm.footerStyles
+  }, [_vm._t("footer")], 2)] : _vm._e()], 2);
 };
 var __vue_staticRenderFns__ = [];
 

package/dist/bundled/v2/components/OrResizeablePanelV3/OrResizeablePanel.vue.d.ts

@@ -1,8 +1,56 @@
+import { PropType } from 'vue-demi';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    resizeBar: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
-}> & import("@vue/composition-api").Data, {}, {}, {}, import("@vue/composition-api").ExtractPropTypes<{}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<{
+    resizeBarStyles: 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[]>;
+}> & import("@vue/composition-api").Data, {}, {}, {
+    side: {
+        type: PropType<"top" | "bottom" | "left" | "right">;
+        required: true;
+    };
+    resizeable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    collapsible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, import("@vue/composition-api").ExtractPropTypes<{
+    side: {
+        type: PropType<"top" | "bottom" | "left" | "right">;
+        required: true;
+    };
+    resizeable: {
+        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<{
+    side: "top" | "bottom" | "left" | "right";
+    resizeable: boolean;
+    collapsible: boolean;
+} & {}, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    resizeBar: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
-}>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {} & {}, {}, true>);
+    resizeBarStyles: 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[]>;
+}>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
+    side: "top" | "bottom" | "left" | "right";
+    resizeable: boolean;
+    collapsible: boolean;
+} & {}, {
+    resizeable: boolean;
+    collapsible: boolean;
+}, true>);
 export default _default;

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

@@ -1 +1,2 @@
 export { default as OrResizeablePanelV3 } from './OrResizeablePanel.vue';
+export * from './props';

package/dist/bundled/v2/components/OrResizeablePanelV3/index.js

@@ -1 +1,2 @@
 export { default as OrResizeablePanelV3 } from './OrResizeablePanel.js';
+export { ResizeablePanelSide } from './props.js';

package/dist/bundled/v2/components/OrResizeablePanelV3/props.d.ts

@@ -0,0 +1,6 @@
+export declare enum ResizeablePanelSide {
+    Top = "top",
+    Bottom = "bottom",
+    Left = "left",
+    Right = "right"
+}

package/dist/bundled/v2/components/OrResizeablePanelV3/props.js

@@ -0,0 +1,9 @@
+var ResizeablePanelSide;
+(function (ResizeablePanelSide) {
+  ResizeablePanelSide["Top"] = "top";
+  ResizeablePanelSide["Bottom"] = "bottom";
+  ResizeablePanelSide["Left"] = "left";
+  ResizeablePanelSide["Right"] = "right";
+})(ResizeablePanelSide || (ResizeablePanelSide = {}));
+
+export { ResizeablePanelSide };

package/dist/bundled/v2/components/OrResizeablePanelV3/styles.d.ts

@@ -1 +1,7 @@
+import { ResizeablePanelSide } from './props';
 export declare const ResizeablePanel: string[];
+export declare const ResizeablePanelResizeBar: string[];
+export declare const ResizeablePanelResizeBarSides: Record<ResizeablePanelSide, string[]>;
+export declare const ResizeablePanelHeader: string[];
+export declare const ResizeablePanelContent: string[];
+export declare const ResizeablePanelFooter: string[];

package/dist/bundled/v2/components/OrResizeablePanelV3/styles.js

@@ -1,3 +1,39 @@
-const ResizeablePanel = [];
+import { ResizeablePanelSide } from './props.js';
 
-export { ResizeablePanel };
+const ResizeablePanel = [
+// Position
+'relative',
+// Layout
+'layout-column'];
+const ResizeablePanelResizeBar = [
+// Position
+'absolute',
+// Theme
+'theme-border-1-outline-variant', 'dark:theme-border-1-outline-variant-dark',
+// Theme (hover)
+'hover:theme-border-1-primary-hover', 'dark:hover:theme-border-1-primary-hover-dark'];
+const ResizeablePanelResizeBarSides = {
+  [ResizeablePanelSide.Top]: [
+  // Position
+  'top-none', 'left-none', 'right-none'],
+  [ResizeablePanelSide.Bottom]: [
+  // Position
+  'bottom-none', 'left-none', 'right-none'],
+  [ResizeablePanelSide.Left]: [
+  // Position
+  'left-none', 'top-none', 'bottom-none'],
+  [ResizeablePanelSide.Right]: [
+  // Position
+  'right-none', 'top-none', 'bottom-none']
+};
+const ResizeablePanelHeader = [
+// Layout
+'shrink'];
+const ResizeablePanelContent = [
+// Layout
+'grow'];
+const ResizeablePanelFooter = [
+// Layout
+'shrink'];
+
+export { ResizeablePanel, ResizeablePanelContent, ResizeablePanelFooter, ResizeablePanelHeader, ResizeablePanelResizeBar, ResizeablePanelResizeBarSides };

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

@@ -124,6 +124,7 @@ export { default as OrRadioGroup } from './OrRadioGroup/OrRadioGroup.js';
 export { default as OrRadioGroupV3 } from './OrRadioGroupV3/OrRadioGroup.js';
 export { default as OrRadioV3 } from './OrRadioV3/OrRadio.js';
 export { default as OrResizeablePanelV3 } from './OrResizeablePanelV3/OrResizeablePanel.js';
+export { ResizeablePanelSide } from './OrResizeablePanelV3/props.js';
 export { default as OrRichTextEditorV3 } from './OrRichTextEditorV3/OrRichTextEditor.js';
 export { Formats } from './OrRichTextEditorV3/props.js';
 export { default as OrSearch } from './OrSearch/OrSearch.js';