@onereach/ui-components 2.72.2-beta.2263.0 → 2.72.2-beta.2264.0

package/src/components/or-sidebar-v3/partials/{OrSidebarCollapseButton.stories3.ts → or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.ts}

@@ -1,11 +1,11 @@
 import { Meta, StoryFn } from '@storybook/vue3';
 import OrSidebarCollapseButton from './OrSidebarCollapseButton.vue';
-import { OrSidebarPlacement } from '../props';
+import { OrSidebarPlacement } from '../../props';
 import { action } from '@storybook/addon-actions';
 import { ref } from 'vue-demi';
 
 export default {
-  title: 'Components/Sidebar/Parts/CollapseButton',
+  title: 'Components/Sidebar/Partials/CollapseButton',
   component: OrSidebarCollapseButton,
 
   argTypes: {

package/src/components/or-sidebar-v3/partials/{OrSidebarCollapseButton.vue → or-sidebar-collapse-button/OrSidebarCollapseButton.vue}

@@ -15,9 +15,9 @@
 <script lang="ts">
 import _ from 'lodash';
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
-import { OrSidebarPlacement } from '../props';
-import { OrIconButtonV3 as OrIconButton } from '../../or-icon-button-v3';
-import { CollapseButton, CollapseButtonContainer } from '../styles';
+import { OrSidebarPlacement } from '../../props';
+import { OrIconButtonV3 as OrIconButton } from '../../../or-icon-button-v3';
+import { CollapseButton, CollapseButtonContainer } from './styles';
 
 export default defineComponent({
   name: 'OrSidebarCollapseButton',

package/src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.ts

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

package/src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.ts

@@ -0,0 +1,49 @@
+export const CollapseButtonContainer: string[] = [
+  // Box
+  'w-[24px]',
+  'h-[24px]',
+  'rounded-full',
+
+  // Theme
+  'text-primary dark:text-primary-dark',
+  'bg-background dark:bg-background-dark',
+];
+
+export const CollapseButton: string[] = [
+  // Box
+  'w-[24px]',
+  'h-[24px]',
+
+  // Typography
+  '!text-[16px]',
+
+  // Borders
+  '!border-[1px]',
+  '!border-solid',
+
+  // Theme
+  '!text-primary dark:!text-primary-dark',
+  '!bg-background dark:!bg-background-dark',
+  '!border-outline-variant dark:!border-outline-variant-dark',
+  '!outline-none',
+
+  // Theme (hover)
+  'hover:!text-primary hover:dark:!text-primary-dark',
+  'hover:!bg-primary-opacity-0-08 dark:hover:!bg-primary-opacity-0-08-dark',
+  'hover:!border-outline dark:hover:!border-outline-dark',
+
+  // Theme (active)
+  'active:!text-primary active:dark:!text-primary-dark',
+  'active:!bg-primary-opacity-0-12 dark:active:!bg-primary-opacity-0-12-dark',
+  'active:!border-primary dark:active:!border-primary-dark',
+
+  // Theme (focus)
+  'focus:!text-primary focus:dark:!text-primary-dark',
+  'focus:!bg-primary-opacity-0-12 dark:focus:!bg-primary-opacity-0-12-dark',
+  'focus:!border-outline dark:focus:!border-outline-dark',
+
+  // Theme (disabled)
+  'disabled:!text-on-disabled disabled:dark:!text-on-disabled-dark',
+  'disabled:!bg-background disabled:dark:!bg-background-dark',
+  'disabled:!border-outline-variant disabled:dark:!border-outline-variant-dark',
+];

package/src/components/or-sidebar-v3/styles.ts

@@ -219,53 +219,3 @@ export const SidebarFooter: string[] = [
   'border-t-solid',
   'border-t-outline-variant dark:border-t-outline-variant-dark',
 ];
-
-export const CollapseButtonContainer: string[] = [
-  // Box
-  'w-[24px]',
-  'h-[24px]',
-  'rounded-full',
-
-  // Theme
-  'text-primary dark:text-primary-dark',
-  'bg-background dark:bg-background-dark',
-];
-
-export const CollapseButton: string[] = [
-  // Box
-  'w-[24px]',
-  'h-[24px]',
-
-  // Typography
-  '!text-[16px]',
-
-  // Borders
-  '!border-[1px]',
-  '!border-solid',
-
-  // Theme
-  '!text-primary dark:!text-primary-dark',
-  '!bg-background dark:!bg-background-dark',
-  '!border-outline-variant dark:!border-outline-variant-dark',
-  '!outline-none',
-
-  // Theme (hover)
-  'hover:!text-primary hover:dark:!text-primary-dark',
-  'hover:!bg-primary-opacity-0-08 dark:hover:!bg-primary-opacity-0-08-dark',
-  'hover:!border-outline dark:hover:!border-outline-dark',
-
-  // Theme (active)
-  'active:!text-primary active:dark:!text-primary-dark',
-  'active:!bg-primary-opacity-0-12 dark:active:!bg-primary-opacity-0-12-dark',
-  'active:!border-primary dark:active:!border-primary-dark',
-
-  // Theme (focus)
-  'focus:!text-primary focus:dark:!text-primary-dark',
-  'focus:!bg-primary-opacity-0-12 dark:focus:!bg-primary-opacity-0-12-dark',
-  'focus:!border-outline dark:focus:!border-outline-dark',
-
-  // Theme (disabled)
-  'disabled:!text-on-disabled disabled:dark:!text-on-disabled-dark',
-  'disabled:!bg-background disabled:dark:!bg-background-dark',
-  'disabled:!border-outline-variant disabled:dark:!border-outline-variant-dark',
-];

package/dist/bundled/v3/OrSidebarCollapseButton.vue_vue_type_script_lang-d3e3cd4f.js

@@ -1,185 +0,0 @@
-import _ from 'lodash';
-import { defineComponent, ref, computed } from 'vue';
-import './OrIconButton-e0566ecf.js';
-import { s as script$1 } from './OrIconButton.vue_vue_type_script_lang-7d1c3fe1.js';
-
-var OrSidebarPlacement;
-(function (OrSidebarPlacement) {
-  OrSidebarPlacement["left"] = "left";
-  OrSidebarPlacement["right"] = "right";
-})(OrSidebarPlacement || (OrSidebarPlacement = {}));
-
-const SidebarRoot = [
-// Position
-'relative',
-// Layout
-'flex', 'flex-row', 'shrink-0',
-// Box
-'min-w-0', 'h-auto', 'p-0',
-// Theme
-'bg-background', 'dark:bg-background-dark'];
-const SidebarBar = [
-// Position
-'relative',
-// Layout
-'flex', 'flex-col', 'shrink-0', 'grow',
-// Box
-'min-h-0', 'p-0',
-// Theme
-'text-on-background', 'dark:text-on-background-dark',
-// Transition
-'transition-[width]'];
-const SidebarToolbar = [
-// Position
-'relative',
-// Layout
-'flex', 'flex-col', 'shrink-0', 'grow', 'overflow-auto', 'items-center',
-// Sizing
-'gap-md',
-// Box
-'min-h-0', 'min-w-xl', 'p-[6px]', 'py-md+',
-// Theme
-'text-outline', 'dark:text-outline-dark'];
-const CollapsibleSidebarToolbar = ['pt-[56px]'];
-const SidebarSides = {
-  [OrSidebarPlacement.left]: [
-  // Borders
-  'border-r-[1px]', 'border-r-solid', 'border-r-outline-variant dark:border-r-outline-variant-dark'],
-  [OrSidebarPlacement.right]: [
-  // Borders
-  'border-l-[1px]', 'border-l-solid', 'border-l-outline-variant dark:border-l-outline-variant-dark']
-};
-const SidebarToolbarSides = {
-  [OrSidebarPlacement.left]: [
-  // Borders
-  'border-r-[1px]', 'border-r-solid', 'border-r-outline-variant dark:border-r-outline-variant-dark'],
-  [OrSidebarPlacement.right]: [
-  // Borders
-  'border-l-[1px]', 'border-l-solid', 'border-l-outline-variant dark:border-l-outline-variant-dark']
-};
-const SidebarResize = [
-// Position
-'absolute', 'inset-y-none', 'z-[1]',
-// Box
-'w-sm+', 'h-[100%]',
-// Cursor
-'cursor-ew-resize'];
-const SidebarResizeSides = {
-  [OrSidebarPlacement.left]: [
-  // Position
-  '-right-[1px]',
-  // Borders
-  'hover:border-r-2', 'hover:border-r-primary-hover hover:dark:border-r-primary-hover-dark',
-  // Transition
-  'transition-[border-right]'],
-  [OrSidebarPlacement.right]: [
-  // Position
-  '-left-[1px]',
-  // Borders
-  'hover:border-l-2', 'hover:border-l-primary-hover hover:dark:border-l-primary-hover-dark',
-  // Transition
-  'transition-[border-left]']
-};
-const SidebarCollapseButton = [
-// Position
-'absolute', 'top-md', 'inset-y-none', 'z-[1]'];
-const SidebarCollapseButtonSides = {
-  [OrSidebarPlacement.left]: [
-  // Position
-  '-right-[12px]'],
-  [OrSidebarPlacement.right]: [
-  // Position
-  '-left-[12px]']
-};
-const SidebarResizingSides = {
-  [OrSidebarPlacement.left]: [
-  // Borders
-  'border-r-2', 'border-r-primary-hover dark:border-r-primary-hover-dark'],
-  [OrSidebarPlacement.right]: [
-  // Borders
-  'border-l-2', 'border-l-primary-hover dark:border-l-primary-hover-dark']
-};
-const SidebarMain = [
-// Layout
-'flex', 'flex-col', 'grow', 'overflow-x-hidden',
-// Box
-'min-h-0'];
-const SidebarHeader = [
-// Layout
-'shrink-0', 'overflow-hidden',
-// Sizing
-'p-md',
-// Typography
-'typography-headline-2', 'whitespace-nowrap', 'text-ellipsis'];
-const SidebarContent = [
-// Layout
-'grow', 'overflow-auto',
-// Sizing
-'p-md'];
-const SidebarFooter = [
-// Layout
-'shrink-0', 'overflow-x-hidden',
-// Sizing
-'p-md',
-// Borders
-'border-t-[1px]', 'border-t-solid', 'border-t-outline-variant dark:border-t-outline-variant-dark'];
-const CollapseButtonContainer = [
-// Box
-'w-[24px]', 'h-[24px]', 'rounded-full',
-// Theme
-'text-primary dark:text-primary-dark', 'bg-background dark:bg-background-dark'];
-const CollapseButton = [
-// Box
-'w-[24px]', 'h-[24px]',
-// Typography
-'!text-[16px]',
-// Borders
-'!border-[1px]', '!border-solid',
-// Theme
-'!text-primary dark:!text-primary-dark', '!bg-background dark:!bg-background-dark', '!border-outline-variant dark:!border-outline-variant-dark', '!outline-none',
-// Theme (hover)
-'hover:!text-primary hover:dark:!text-primary-dark', 'hover:!bg-primary-opacity-0-08 dark:hover:!bg-primary-opacity-0-08-dark', 'hover:!border-outline dark:hover:!border-outline-dark',
-// Theme (active)
-'active:!text-primary active:dark:!text-primary-dark', 'active:!bg-primary-opacity-0-12 dark:active:!bg-primary-opacity-0-12-dark', 'active:!border-primary dark:active:!border-primary-dark',
-// Theme (focus)
-'focus:!text-primary focus:dark:!text-primary-dark', 'focus:!bg-primary-opacity-0-12 dark:focus:!bg-primary-opacity-0-12-dark', 'focus:!border-outline dark:focus:!border-outline-dark',
-// Theme (disabled)
-'disabled:!text-on-disabled disabled:dark:!text-on-disabled-dark', 'disabled:!bg-background disabled:dark:!bg-background-dark', 'disabled:!border-outline-variant disabled:dark:!border-outline-variant-dark'];
-
-var script = defineComponent({
-  name: 'OrSidebarCollapseButton',
-  components: {
-    OrIconButton: script$1
-  },
-  props: {
-    /**
-     * Must be `true` if sidebar is collapsed.
-     */
-    modelValue: {
-      type: Boolean,
-      default: false
-    },
-    side: {
-      type: String,
-      default: OrSidebarPlacement.right,
-      validator: value => _.includes(_.values(OrSidebarPlacement), value)
-    }
-  },
-  emits: ['update:modelValue'],
-  expose: ['root'],
-  setup(props) {
-    // Refs
-    const root = ref();
-    const rootStyles = computed(() => ['or-sidebar-collapse-button', ...CollapseButtonContainer]);
-    const buttonStyles = computed(() => [...CollapseButton]);
-    const icon = computed(() => props.side === OrSidebarPlacement.left !== props.modelValue ? 'keyboard_arrow_left' : 'keyboard_arrow_right');
-    return {
-      root,
-      rootStyles,
-      buttonStyles,
-      icon
-    };
-  }
-});
-
-export { CollapsibleSidebarToolbar as C, OrSidebarPlacement as O, SidebarRoot as S, SidebarBar as a, SidebarSides as b, SidebarToolbar as c, SidebarToolbarSides as d, SidebarResize as e, SidebarResizeSides as f, SidebarResizingSides as g, SidebarCollapseButton as h, SidebarCollapseButtonSides as i, SidebarMain as j, SidebarHeader as k, SidebarContent as l, SidebarFooter as m, script as s };

package/dist/esm/v3/OrSidebarCollapseButton-30d0033b.js

@@ -1,204 +0,0 @@
-import _ from 'lodash';
-import { defineComponent, ref, computed } from 'vue-demi';
-import { s as script$1 } from './OrIconButton-2dcfb83e.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode } from 'vue';
-
-var OrSidebarPlacement;
-(function (OrSidebarPlacement) {
-  OrSidebarPlacement["left"] = "left";
-  OrSidebarPlacement["right"] = "right";
-})(OrSidebarPlacement || (OrSidebarPlacement = {}));
-
-const SidebarRoot = [
-// Position
-'relative',
-// Layout
-'flex', 'flex-row', 'shrink-0',
-// Box
-'min-w-0', 'h-auto', 'p-0',
-// Theme
-'bg-background', 'dark:bg-background-dark'];
-const SidebarBar = [
-// Position
-'relative',
-// Layout
-'flex', 'flex-col', 'shrink-0', 'grow',
-// Box
-'min-h-0', 'p-0',
-// Theme
-'text-on-background', 'dark:text-on-background-dark',
-// Transition
-'transition-[width]'];
-const SidebarToolbar = [
-// Position
-'relative',
-// Layout
-'flex', 'flex-col', 'shrink-0', 'grow', 'overflow-auto', 'items-center',
-// Sizing
-'gap-md',
-// Box
-'min-h-0', 'min-w-xl', 'p-[6px]', 'py-md+',
-// Theme
-'text-outline', 'dark:text-outline-dark'];
-const CollapsibleSidebarToolbar = ['pt-[56px]'];
-const SidebarSides = {
-  [OrSidebarPlacement.left]: [
-  // Borders
-  'border-r-[1px]', 'border-r-solid', 'border-r-outline-variant dark:border-r-outline-variant-dark'],
-  [OrSidebarPlacement.right]: [
-  // Borders
-  'border-l-[1px]', 'border-l-solid', 'border-l-outline-variant dark:border-l-outline-variant-dark']
-};
-const SidebarToolbarSides = {
-  [OrSidebarPlacement.left]: [
-  // Borders
-  'border-r-[1px]', 'border-r-solid', 'border-r-outline-variant dark:border-r-outline-variant-dark'],
-  [OrSidebarPlacement.right]: [
-  // Borders
-  'border-l-[1px]', 'border-l-solid', 'border-l-outline-variant dark:border-l-outline-variant-dark']
-};
-const SidebarResize = [
-// Position
-'absolute', 'inset-y-none', 'z-[1]',
-// Box
-'w-sm+', 'h-[100%]',
-// Cursor
-'cursor-ew-resize'];
-const SidebarResizeSides = {
-  [OrSidebarPlacement.left]: [
-  // Position
-  '-right-[1px]',
-  // Borders
-  'hover:border-r-2', 'hover:border-r-primary-hover hover:dark:border-r-primary-hover-dark',
-  // Transition
-  'transition-[border-right]'],
-  [OrSidebarPlacement.right]: [
-  // Position
-  '-left-[1px]',
-  // Borders
-  'hover:border-l-2', 'hover:border-l-primary-hover hover:dark:border-l-primary-hover-dark',
-  // Transition
-  'transition-[border-left]']
-};
-const SidebarCollapseButton = [
-// Position
-'absolute', 'top-md', 'inset-y-none', 'z-[1]'];
-const SidebarCollapseButtonSides = {
-  [OrSidebarPlacement.left]: [
-  // Position
-  '-right-[12px]'],
-  [OrSidebarPlacement.right]: [
-  // Position
-  '-left-[12px]']
-};
-const SidebarResizingSides = {
-  [OrSidebarPlacement.left]: [
-  // Borders
-  'border-r-2', 'border-r-primary-hover dark:border-r-primary-hover-dark'],
-  [OrSidebarPlacement.right]: [
-  // Borders
-  'border-l-2', 'border-l-primary-hover dark:border-l-primary-hover-dark']
-};
-const SidebarMain = [
-// Layout
-'flex', 'flex-col', 'grow', 'overflow-x-hidden',
-// Box
-'min-h-0'];
-const SidebarHeader = [
-// Layout
-'shrink-0', 'overflow-hidden',
-// Sizing
-'p-md',
-// Typography
-'typography-headline-2', 'whitespace-nowrap', 'text-ellipsis'];
-const SidebarContent = [
-// Layout
-'grow', 'overflow-auto',
-// Sizing
-'p-md'];
-const SidebarFooter = [
-// Layout
-'shrink-0', 'overflow-x-hidden',
-// Sizing
-'p-md',
-// Borders
-'border-t-[1px]', 'border-t-solid', 'border-t-outline-variant dark:border-t-outline-variant-dark'];
-const CollapseButtonContainer = [
-// Box
-'w-[24px]', 'h-[24px]', 'rounded-full',
-// Theme
-'text-primary dark:text-primary-dark', 'bg-background dark:bg-background-dark'];
-const CollapseButton = [
-// Box
-'w-[24px]', 'h-[24px]',
-// Typography
-'!text-[16px]',
-// Borders
-'!border-[1px]', '!border-solid',
-// Theme
-'!text-primary dark:!text-primary-dark', '!bg-background dark:!bg-background-dark', '!border-outline-variant dark:!border-outline-variant-dark', '!outline-none',
-// Theme (hover)
-'hover:!text-primary hover:dark:!text-primary-dark', 'hover:!bg-primary-opacity-0-08 dark:hover:!bg-primary-opacity-0-08-dark', 'hover:!border-outline dark:hover:!border-outline-dark',
-// Theme (active)
-'active:!text-primary active:dark:!text-primary-dark', 'active:!bg-primary-opacity-0-12 dark:active:!bg-primary-opacity-0-12-dark', 'active:!border-primary dark:active:!border-primary-dark',
-// Theme (focus)
-'focus:!text-primary focus:dark:!text-primary-dark', 'focus:!bg-primary-opacity-0-12 dark:focus:!bg-primary-opacity-0-12-dark', 'focus:!border-outline dark:focus:!border-outline-dark',
-// Theme (disabled)
-'disabled:!text-on-disabled disabled:dark:!text-on-disabled-dark', 'disabled:!bg-background disabled:dark:!bg-background-dark', 'disabled:!border-outline-variant disabled:dark:!border-outline-variant-dark'];
-
-var script = defineComponent({
-  name: 'OrSidebarCollapseButton',
-  components: {
-    OrIconButton: script$1
-  },
-  props: {
-    /**
-     * Must be `true` if sidebar is collapsed.
-     */
-    modelValue: {
-      type: Boolean,
-      default: false
-    },
-    side: {
-      type: String,
-      default: OrSidebarPlacement.right,
-      validator: value => _.includes(_.values(OrSidebarPlacement), value)
-    }
-  },
-  emits: ['update:modelValue'],
-  expose: ['root'],
-  setup(props) {
-    // Refs
-    const root = ref();
-    const rootStyles = computed(() => ['or-sidebar-collapse-button', ...CollapseButtonContainer]);
-    const buttonStyles = computed(() => [...CollapseButton]);
-    const icon = computed(() => props.side === OrSidebarPlacement.left !== props.modelValue ? 'keyboard_arrow_left' : 'keyboard_arrow_right');
-    return {
-      root,
-      rootStyles,
-      buttonStyles,
-      icon
-    };
-  }
-});
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_or_icon_button = resolveComponent("or-icon-button");
-  return openBlock(), createElementBlock("div", {
-    ref: "root",
-    class: normalizeClass(_ctx.rootStyles)
-  }, [createVNode(_component_or_icon_button, {
-    class: normalizeClass(_ctx.buttonStyles),
-    icon: {
-      icon: _ctx.icon,
-      size: 'inherit'
-    },
-    color: "inherit",
-    onClick: _cache[0] || (_cache[0] = $event => _ctx.$emit('update:modelValue', !_ctx.modelValue))
-  }, null, 8 /* PROPS */, ["class", "icon"])], 2 /* CLASS */);
-}
-
-script.render = render;
-script.__file = "src/components/or-sidebar-v3/partials/OrSidebarCollapseButton.vue";
-
-export { CollapsibleSidebarToolbar as C, OrSidebarPlacement as O, SidebarRoot as S, SidebarBar as a, SidebarSides as b, SidebarToolbar as c, SidebarToolbarSides as d, SidebarResize as e, SidebarResizeSides as f, SidebarResizingSides as g, SidebarCollapseButton as h, SidebarCollapseButtonSides as i, SidebarMain as j, SidebarHeader as k, SidebarContent as l, SidebarFooter as m, script as s };