@onereach/ui-components 2.73.0-beta.2258.0 → 2.73.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (117) hide show
  1. package/dist/bundled/v2/{OrCardCollection-06ecb8e1.js → OrCardCollection-4ac89ea5.js} +1 -1
  2. package/dist/bundled/v2/{OrCode-0cf7596d.js → OrCode-fc6876ec.js} +12 -184
  3. package/dist/bundled/v2/{OrNotification-2e2a1941.js → OrNotification-3909aaf2.js} +3 -3
  4. package/dist/bundled/v2/{OrSearch-bb87b34c.js → OrSearch-09fd004c.js} +2 -1
  5. package/dist/bundled/v2/{OrSidebar-c95ef614.js → OrSidebar-a2bc21b9.js} +155 -34
  6. package/dist/bundled/v2/OrSidebarCollapseButton-8297ef86.js +125 -0
  7. package/dist/bundled/v2/{OrSkeletonText-2f1a3cc7.js → OrSkeletonText-242d22f3.js} +3 -3
  8. package/dist/bundled/v2/components/index.js +7 -6
  9. package/dist/bundled/v2/components/or-card-collection-v3/index.js +2 -2
  10. package/dist/bundled/v2/components/or-code/OrCode.vue.d.ts +0 -10
  11. package/dist/bundled/v2/components/or-code/index.js +1 -1
  12. package/dist/bundled/v2/components/or-notification/index.js +1 -1
  13. package/dist/bundled/v2/components/or-search-v3/index.js +1 -1
  14. package/dist/bundled/v2/components/or-sidebar-v3/OrSidebar.stories3.d.ts +36 -1
  15. package/dist/bundled/v2/components/or-sidebar-v3/OrSidebar.vue.d.ts +49 -4
  16. package/dist/bundled/v2/components/or-sidebar-v3/index.js +13 -1
  17. package/dist/bundled/v2/components/or-sidebar-v3/partials/index.d.ts +1 -0
  18. package/dist/bundled/v2/components/or-sidebar-v3/partials/index.js +18 -0
  19. package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.d.ts +12 -0
  20. package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.vue.d.ts +53 -0
  21. package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.d.ts +1 -0
  22. package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.js +18 -0
  23. package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.d.ts +2 -0
  24. package/dist/bundled/v2/components/or-sidebar-v3/styles.d.ts +7 -1
  25. package/dist/bundled/v2/components/or-skeleton/index.js +1 -1
  26. package/dist/bundled/v2/index.js +8 -7
  27. package/dist/bundled/v3/{OrCardCollection.vue_vue_type_script_lang-e2980d04.js → OrCardCollection.vue_vue_type_script_lang-f76c3264.js} +1 -1
  28. package/dist/bundled/v3/{OrCode.vue_vue_type_script_lang-df150e3b.js → OrCode.vue_vue_type_script_lang-c55de81d.js} +8 -180
  29. package/dist/bundled/v3/{OrSearch.vue_vue_type_script_lang-321907ec.js → OrSearch.vue_vue_type_script_lang-c054c8db.js} +2 -1
  30. package/dist/bundled/v3/OrSidebar.vue_vue_type_script_lang-7f3f1a16.js +291 -0
  31. package/dist/bundled/v3/OrSidebarCollapseButton.vue_vue_type_script_lang-9aeba2d4.js +75 -0
  32. package/dist/bundled/v3/components/index.js +5 -4
  33. package/dist/bundled/v3/components/or-card-collection-v3/index.js +2 -2
  34. package/dist/bundled/v3/components/or-code/OrCode.vue.d.ts +0 -10
  35. package/dist/bundled/v3/components/or-code/index.js +1 -1
  36. package/dist/bundled/v3/components/or-search-v3/index.js +1 -1
  37. package/dist/bundled/v3/components/or-sidebar-v3/OrSidebar.stories3.d.ts +36 -1
  38. package/dist/bundled/v3/components/or-sidebar-v3/OrSidebar.vue.d.ts +49 -4
  39. package/dist/bundled/v3/components/or-sidebar-v3/index.js +16 -2
  40. package/dist/bundled/v3/components/or-sidebar-v3/partials/index.d.ts +1 -0
  41. package/dist/bundled/v3/components/or-sidebar-v3/partials/index.js +17 -0
  42. package/dist/bundled/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.d.ts +12 -0
  43. package/dist/bundled/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.vue.d.ts +53 -0
  44. package/dist/bundled/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.d.ts +1 -0
  45. package/dist/bundled/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.js +17 -0
  46. package/dist/bundled/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.d.ts +2 -0
  47. package/dist/bundled/v3/components/or-sidebar-v3/styles.d.ts +7 -1
  48. package/dist/bundled/v3/index.js +36 -19
  49. package/dist/esm/v2/{OrCardCollection-251ab033.js → OrCardCollection-5a9eda35.js} +1 -1
  50. package/dist/esm/v2/{OrCode-e2ce05ea.js → OrCode-d4400b42.js} +12 -30
  51. package/dist/esm/v2/{OrNotification-a49e76d3.js → OrNotification-a9231a83.js} +3 -3
  52. package/dist/esm/v2/{OrSearch-f42d588d.js → OrSearch-7411388b.js} +2 -1
  53. package/dist/esm/v2/{OrSidebar-fabc7bc9.js → OrSidebar-27236fbd.js} +155 -34
  54. package/dist/esm/v2/OrSidebarCollapseButton-cfe51a60.js +123 -0
  55. package/dist/esm/v2/{OrSkeletonText-24509efe.js → OrSkeletonText-cc94bdc9.js} +3 -3
  56. package/dist/esm/v2/components/index.js +7 -7
  57. package/dist/esm/v2/components/or-card-collection-v3/index.js +2 -2
  58. package/dist/esm/v2/components/or-code/OrCode.vue.d.ts +0 -10
  59. package/dist/esm/v2/components/or-code/index.js +2 -3
  60. package/dist/esm/v2/components/or-notification/index.js +1 -1
  61. package/dist/esm/v2/components/or-search-v3/index.js +1 -1
  62. package/dist/esm/v2/components/or-sidebar-v3/OrSidebar.stories3.d.ts +36 -1
  63. package/dist/esm/v2/components/or-sidebar-v3/OrSidebar.vue.d.ts +49 -4
  64. package/dist/esm/v2/components/or-sidebar-v3/index.js +13 -1
  65. package/dist/esm/v2/components/or-sidebar-v3/partials/index.d.ts +1 -0
  66. package/dist/esm/v2/components/or-sidebar-v3/partials/index.js +16 -0
  67. package/dist/esm/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.d.ts +12 -0
  68. package/dist/esm/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.vue.d.ts +53 -0
  69. package/dist/esm/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.d.ts +1 -0
  70. package/dist/esm/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.js +16 -0
  71. package/dist/esm/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.d.ts +2 -0
  72. package/dist/esm/v2/components/or-sidebar-v3/styles.d.ts +7 -1
  73. package/dist/esm/v2/components/or-skeleton/index.js +1 -1
  74. package/dist/esm/v2/index.js +7 -7
  75. package/dist/esm/v3/{OrCardCollection-8b8e3745.js → OrCardCollection-e4fde5b4.js} +1 -1
  76. package/dist/esm/v3/{OrCode-72688173.js → OrCode-5ed69c23.js} +9 -27
  77. package/dist/esm/v3/{OrNotification-eb08de33.js → OrNotification-e85a4956.js} +1 -1
  78. package/dist/esm/v3/{OrSearch-4c5c44f2.js → OrSearch-5406bf03.js} +2 -1
  79. package/dist/esm/v3/OrSidebar-61d84c3e.js +313 -0
  80. package/dist/esm/v3/OrSidebarCollapseButton-1b9c83ef.js +94 -0
  81. package/dist/esm/v3/{OrSkeletonText-0546754d.js → OrSkeletonText-2b1610ce.js} +3 -3
  82. package/dist/esm/v3/components/index.js +7 -7
  83. package/dist/esm/v3/components/or-card-collection-v3/index.js +2 -2
  84. package/dist/esm/v3/components/or-code/OrCode.vue.d.ts +0 -10
  85. package/dist/esm/v3/components/or-code/index.js +2 -3
  86. package/dist/esm/v3/components/or-notification/index.js +1 -1
  87. package/dist/esm/v3/components/or-search-v3/index.js +1 -1
  88. package/dist/esm/v3/components/or-sidebar-v3/OrSidebar.stories3.d.ts +36 -1
  89. package/dist/esm/v3/components/or-sidebar-v3/OrSidebar.vue.d.ts +49 -4
  90. package/dist/esm/v3/components/or-sidebar-v3/index.js +12 -1
  91. package/dist/esm/v3/components/or-sidebar-v3/partials/index.d.ts +1 -0
  92. package/dist/esm/v3/components/or-sidebar-v3/partials/index.js +15 -0
  93. package/dist/esm/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.d.ts +12 -0
  94. package/dist/esm/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.vue.d.ts +53 -0
  95. package/dist/esm/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.d.ts +1 -0
  96. package/dist/esm/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.js +15 -0
  97. package/dist/esm/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.d.ts +2 -0
  98. package/dist/esm/v3/components/or-sidebar-v3/styles.d.ts +7 -1
  99. package/dist/esm/v3/components/or-skeleton/index.js +1 -1
  100. package/dist/esm/v3/index.js +7 -7
  101. package/package.json +4 -4
  102. package/src/components/or-code/OrCode.vue +6 -23
  103. package/src/components/or-notification/OrNotification.vue +1 -26
  104. package/src/components/or-search-v3/OrSearch.vue +2 -1
  105. package/src/components/or-sidebar-v3/OrSidebar.docs.mdx +6 -0
  106. package/src/components/or-sidebar-v3/OrSidebar.stories3.ts +253 -12
  107. package/src/components/or-sidebar-v3/OrSidebar.vue +130 -23
  108. package/src/components/or-sidebar-v3/partials/index.ts +1 -0
  109. package/src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.ts +48 -0
  110. package/src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.vue +79 -0
  111. package/src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.ts +1 -0
  112. package/src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.ts +50 -0
  113. package/src/components/or-sidebar-v3/styles.ts +114 -9
  114. package/src/components/or-skeleton/styles.scss +3 -18
  115. package/src/components/or-stepper/OrStepper.stories.ts +1 -1
  116. package/dist/bundled/v3/OrSidebar.vue_vue_type_script_lang-ce0b152c.js +0 -181
  117. package/dist/esm/v3/OrSidebar-a62972f5.js +0 -206
@@ -7,7 +7,7 @@ import { s as script$5 } from './OrMenu.vue_vue_type_script_lang-df35fd76.js';
7
7
  import './OrMenuItem-807e2a49.js';
8
8
  import { s as script$6 } from './OrMenuItem.vue_vue_type_script_lang-2400ec2a.js';
9
9
  import './OrIcon-1a5c9091.js';
10
- import { s as script$2 } from './OrSearch.vue_vue_type_script_lang-321907ec.js';
10
+ import { s as script$2 } from './OrSearch.vue_vue_type_script_lang-c054c8db.js';
11
11
  import { s as script$4 } from './OrButton.vue_vue_type_script_lang-3b1e442b.js';
12
12
  import { s as script$7 } from './OrIcon.vue_vue_type_script_lang-bdbaad94.js';
13
13
 
@@ -1,4 +1,4 @@
1
- import { useMutationObserver, useElementHover } from '@vueuse/core';
1
+ import { useElementHover } from '@vueuse/core';
2
2
  import _ from 'lodash';
3
3
  import { defineComponent, ref } from 'vue';
4
4
  import { s as script$3 } from './OrTeleportVue3-012351e1.js';
@@ -23380,161 +23380,6 @@ const basicSetup = /*@__PURE__*/(() => [lineNumbers(), highlightActiveLineGutter
23380
23380
  fallback: true
23381
23381
  }), bracketMatching(), closeBrackets(), autocompletion(), rectangularSelection(), crosshairCursor(), highlightActiveLine(), highlightSelectionMatches(), keymap.of([...closeBracketsKeymap, ...defaultKeymap, ...searchKeymap, ...historyKeymap, ...foldKeymap, ...completionKeymap, ...lintKeymap])])();
23382
23382
 
23383
- // Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors
23384
- const chalky = "#e5c07b",
23385
- coral = "#e06c75",
23386
- cyan = "#56b6c2",
23387
- invalid = "#ffffff",
23388
- ivory = "#abb2bf",
23389
- stone = "#7d8799",
23390
- // Brightened compared to original to increase contrast
23391
- malibu = "#61afef",
23392
- sage = "#98c379",
23393
- whiskey = "#d19a66",
23394
- violet = "#c678dd",
23395
- darkBackground = "#21252b",
23396
- highlightBackground = "#2c313a",
23397
- background = "#282c34",
23398
- tooltipBackground = "#353a42",
23399
- selection = "#3E4451",
23400
- cursor = "#528bff";
23401
- /**
23402
- The editor theme styles for One Dark.
23403
- */
23404
- const oneDarkTheme = /*@__PURE__*/EditorView.theme({
23405
- "&": {
23406
- color: ivory,
23407
- backgroundColor: background
23408
- },
23409
- ".cm-content": {
23410
- caretColor: cursor
23411
- },
23412
- ".cm-cursor, .cm-dropCursor": {
23413
- borderLeftColor: cursor
23414
- },
23415
- "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {
23416
- backgroundColor: selection
23417
- },
23418
- ".cm-panels": {
23419
- backgroundColor: darkBackground,
23420
- color: ivory
23421
- },
23422
- ".cm-panels.cm-panels-top": {
23423
- borderBottom: "2px solid black"
23424
- },
23425
- ".cm-panels.cm-panels-bottom": {
23426
- borderTop: "2px solid black"
23427
- },
23428
- ".cm-searchMatch": {
23429
- backgroundColor: "#72a1ff59",
23430
- outline: "1px solid #457dff"
23431
- },
23432
- ".cm-searchMatch.cm-searchMatch-selected": {
23433
- backgroundColor: "#6199ff2f"
23434
- },
23435
- ".cm-activeLine": {
23436
- backgroundColor: "#6699ff0b"
23437
- },
23438
- ".cm-selectionMatch": {
23439
- backgroundColor: "#aafe661a"
23440
- },
23441
- "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
23442
- backgroundColor: "#bad0f847"
23443
- },
23444
- ".cm-gutters": {
23445
- backgroundColor: background,
23446
- color: stone,
23447
- border: "none"
23448
- },
23449
- ".cm-activeLineGutter": {
23450
- backgroundColor: highlightBackground
23451
- },
23452
- ".cm-foldPlaceholder": {
23453
- backgroundColor: "transparent",
23454
- border: "none",
23455
- color: "#ddd"
23456
- },
23457
- ".cm-tooltip": {
23458
- border: "none",
23459
- backgroundColor: tooltipBackground
23460
- },
23461
- ".cm-tooltip .cm-tooltip-arrow:before": {
23462
- borderTopColor: "transparent",
23463
- borderBottomColor: "transparent"
23464
- },
23465
- ".cm-tooltip .cm-tooltip-arrow:after": {
23466
- borderTopColor: tooltipBackground,
23467
- borderBottomColor: tooltipBackground
23468
- },
23469
- ".cm-tooltip-autocomplete": {
23470
- "& > ul > li[aria-selected]": {
23471
- backgroundColor: highlightBackground,
23472
- color: ivory
23473
- }
23474
- }
23475
- }, {
23476
- dark: true
23477
- });
23478
- /**
23479
- The highlighting style for code in the One Dark theme.
23480
- */
23481
- const oneDarkHighlightStyle = /*@__PURE__*/HighlightStyle.define([{
23482
- tag: tags$1.keyword,
23483
- color: violet
23484
- }, {
23485
- tag: [tags$1.name, tags$1.deleted, tags$1.character, tags$1.propertyName, tags$1.macroName],
23486
- color: coral
23487
- }, {
23488
- tag: [/*@__PURE__*/tags$1.function(tags$1.variableName), tags$1.labelName],
23489
- color: malibu
23490
- }, {
23491
- tag: [tags$1.color, /*@__PURE__*/tags$1.constant(tags$1.name), /*@__PURE__*/tags$1.standard(tags$1.name)],
23492
- color: whiskey
23493
- }, {
23494
- tag: [/*@__PURE__*/tags$1.definition(tags$1.name), tags$1.separator],
23495
- color: ivory
23496
- }, {
23497
- tag: [tags$1.typeName, tags$1.className, tags$1.number, tags$1.changed, tags$1.annotation, tags$1.modifier, tags$1.self, tags$1.namespace],
23498
- color: chalky
23499
- }, {
23500
- tag: [tags$1.operator, tags$1.operatorKeyword, tags$1.url, tags$1.escape, tags$1.regexp, tags$1.link, /*@__PURE__*/tags$1.special(tags$1.string)],
23501
- color: cyan
23502
- }, {
23503
- tag: [tags$1.meta, tags$1.comment],
23504
- color: stone
23505
- }, {
23506
- tag: tags$1.strong,
23507
- fontWeight: "bold"
23508
- }, {
23509
- tag: tags$1.emphasis,
23510
- fontStyle: "italic"
23511
- }, {
23512
- tag: tags$1.strikethrough,
23513
- textDecoration: "line-through"
23514
- }, {
23515
- tag: tags$1.link,
23516
- color: stone,
23517
- textDecoration: "underline"
23518
- }, {
23519
- tag: tags$1.heading,
23520
- fontWeight: "bold",
23521
- color: coral
23522
- }, {
23523
- tag: [tags$1.atom, tags$1.bool, /*@__PURE__*/tags$1.special(tags$1.variableName)],
23524
- color: whiskey
23525
- }, {
23526
- tag: [tags$1.processingInstruction, tags$1.string, tags$1.inserted],
23527
- color: sage
23528
- }, {
23529
- tag: tags$1.invalid,
23530
- color: invalid
23531
- }]);
23532
- /**
23533
- Extension to enable the One Dark theme (both the editor theme and
23534
- the highlight style).
23535
- */
23536
- const oneDark = [oneDarkTheme, /*@__PURE__*/syntaxHighlighting(oneDarkHighlightStyle)];
23537
-
23538
23383
  var OrCodeLanguages;
23539
23384
  (function (OrCodeLanguages) {
23540
23385
  OrCodeLanguages["JS"] = "javascript";
@@ -29630,20 +29475,6 @@ var script = defineComponent({
29630
29475
  setup(props, {
29631
29476
  emit
29632
29477
  }) {
29633
- var _a;
29634
- // theming refs
29635
- const parent = document.querySelector('[data-theme]') || document.querySelector('html');
29636
- const themeEl = ref(parent);
29637
- const isDark = ref(((_a = parent === null || parent === void 0 ? void 0 : parent.getAttribute) === null || _a === void 0 ? void 0 : _a.call(parent, 'data-theme')) === 'dark');
29638
- const themeObserver = useMutationObserver(themeEl, mutations => {
29639
- var _a, _b;
29640
- const mutation = mutations.find(m => m.attributeName === 'data-theme');
29641
- if (!mutation) return;
29642
- isDark.value = ((_b = (_a = mutation.target) === null || _a === void 0 ? void 0 : _a.getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, 'data-theme')) === 'dark';
29643
- }, {
29644
- attributes: true
29645
- });
29646
- // editor config
29647
29478
  const root = ref();
29648
29479
  const target = ref();
29649
29480
  const fullscreenTarget = ref();
@@ -29663,9 +29494,7 @@ var script = defineComponent({
29663
29494
  target,
29664
29495
  fullscreenTarget,
29665
29496
  editor,
29666
- isHovered,
29667
- isDark,
29668
- themeObserver
29497
+ isHovered
29669
29498
  };
29670
29499
  },
29671
29500
  data() {
@@ -29687,11 +29516,9 @@ var script = defineComponent({
29687
29516
  allowPaste,
29688
29517
  lineWrapping
29689
29518
  } = this;
29690
- const ext = _.compact([...(this.isDark ? [oneDark] : []),
29519
+ const ext = _.compact([
29691
29520
  // Toggle light/dark mode
29692
- this.isDark ? EditorView.theme({}, {
29693
- dark: true
29694
- }) : EditorView.baseTheme({}),
29521
+ EditorView.baseTheme({}),
29695
29522
  // locale settings
29696
29523
  this.phrases ? EditorState.phrases.of(this.phrases) : undefined,
29697
29524
  // Parser language setting
@@ -29718,8 +29545,10 @@ var script = defineComponent({
29718
29545
  }
29719
29546
  }),
29720
29547
  // line wrapping
29721
- lineWrapping ? EditorView.lineWrapping : undefined, keymap.of([indentWithTab]), ...this.extensions]);
29722
- return [...ext];
29548
+ lineWrapping ? EditorView.lineWrapping : undefined, keymap.of([indentWithTab])]);
29549
+ // Append Extensions (such as basic-setup)
29550
+ if (this.extensions.length !== 0) _.merge(ext, this.extensions);
29551
+ return ext;
29723
29552
  },
29724
29553
  isShowingError() {
29725
29554
  return !!this.error && this.isInvalid;
@@ -29762,7 +29591,6 @@ var script = defineComponent({
29762
29591
  },
29763
29592
  beforeUnmount() {
29764
29593
  var _a;
29765
- this.themeObserver.stop();
29766
29594
  (_a = this.editor) === null || _a === void 0 ? void 0 : _a.destroy();
29767
29595
  },
29768
29596
  methods: {
@@ -47,11 +47,12 @@ var script = defineComponent({
47
47
  // State
48
48
  const localModelValue = ref((_a = props.modelValue) !== null && _a !== void 0 ? _a : '');
49
49
  // Events
50
- debouncedWatch(localModelValue, () => context.emit('search', localModelValue.value), {
50
+ debouncedWatch(localModelValue, () => localModelValue.value.length > 0 && context.emit('search', localModelValue.value), {
51
51
  debounce: props.debounce
52
52
  });
53
53
  watch(localModelValue, (val, beforeVal) => {
54
54
  if (val.length === 0 && beforeVal.length > 0) {
55
+ context.emit('search');
55
56
  context.emit('clear');
56
57
  }
57
58
  });
@@ -0,0 +1,291 @@
1
+ import { useDraggable, useElementBounding } from '@vueuse/core';
2
+ import _ from 'lodash';
3
+ import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, defineComponent, ref, computed, useSlots, watch } from 'vue';
4
+ import { O as OrSidebarPlacement, s as script$1 } from './OrSidebarCollapseButton.vue_vue_type_script_lang-9aeba2d4.js';
5
+
6
+ const SidebarRoot = [
7
+ // Position
8
+ 'relative',
9
+ // Layout
10
+ 'flex', 'flex-row', 'shrink-0',
11
+ // Box
12
+ 'min-w-0', 'h-auto', 'p-0',
13
+ // Theme
14
+ 'bg-background', 'dark:bg-background-dark'];
15
+ const SidebarBar = [
16
+ // Position
17
+ 'relative',
18
+ // Layout
19
+ 'flex', 'flex-col', 'shrink-0', 'grow',
20
+ // Box
21
+ 'min-h-0', 'p-0',
22
+ // Theme
23
+ 'text-on-background', 'dark:text-on-background-dark',
24
+ // Transition
25
+ 'transition-[width]'];
26
+ const SidebarToolbar = [
27
+ // Position
28
+ 'relative',
29
+ // Layout
30
+ 'flex', 'flex-col', 'shrink-0', 'grow', 'overflow-auto', 'items-center',
31
+ // Sizing
32
+ 'gap-md',
33
+ // Box
34
+ 'min-h-0', 'min-w-xl', 'p-[6px]', 'py-md+',
35
+ // Theme
36
+ 'text-outline', 'dark:text-outline-dark'];
37
+ const CollapsibleSidebarToolbar = ['pt-[56px]'];
38
+ const SidebarSides = {
39
+ [OrSidebarPlacement.left]: [
40
+ // Borders
41
+ 'border-r-[1px]', 'border-r-solid', 'border-r-outline-variant dark:border-r-outline-variant-dark'],
42
+ [OrSidebarPlacement.right]: [
43
+ // Borders
44
+ 'border-l-[1px]', 'border-l-solid', 'border-l-outline-variant dark:border-l-outline-variant-dark']
45
+ };
46
+ const SidebarToolbarSides = {
47
+ [OrSidebarPlacement.left]: [
48
+ // Borders
49
+ 'border-r-[1px]', 'border-r-solid', 'border-r-outline-variant dark:border-r-outline-variant-dark'],
50
+ [OrSidebarPlacement.right]: [
51
+ // Borders
52
+ 'border-l-[1px]', 'border-l-solid', 'border-l-outline-variant dark:border-l-outline-variant-dark']
53
+ };
54
+ const SidebarResize = [
55
+ // Position
56
+ 'absolute', 'inset-y-none', 'z-[1]',
57
+ // Box
58
+ 'w-sm+', 'h-[100%]',
59
+ // Cursor
60
+ 'cursor-ew-resize'];
61
+ const SidebarResizeSides = {
62
+ [OrSidebarPlacement.left]: [
63
+ // Position
64
+ '-right-[1px]',
65
+ // Borders
66
+ 'hover:border-r-2', 'hover:border-r-primary-hover hover:dark:border-r-primary-hover-dark',
67
+ // Transition
68
+ 'transition-[border-right]'],
69
+ [OrSidebarPlacement.right]: [
70
+ // Position
71
+ '-left-[1px]',
72
+ // Borders
73
+ 'hover:border-l-2', 'hover:border-l-primary-hover hover:dark:border-l-primary-hover-dark',
74
+ // Transition
75
+ 'transition-[border-left]']
76
+ };
77
+ const SidebarCollapseButton = [
78
+ // Position
79
+ 'absolute', 'top-md', 'inset-y-none', 'z-[1]'];
80
+ const SidebarCollapseButtonSides = {
81
+ [OrSidebarPlacement.left]: [
82
+ // Position
83
+ '-right-[12px]'],
84
+ [OrSidebarPlacement.right]: [
85
+ // Position
86
+ '-left-[12px]']
87
+ };
88
+ const SidebarResizingSides = {
89
+ [OrSidebarPlacement.left]: [
90
+ // Borders
91
+ 'border-r-2', 'border-r-primary-hover dark:border-r-primary-hover-dark'],
92
+ [OrSidebarPlacement.right]: [
93
+ // Borders
94
+ 'border-l-2', 'border-l-primary-hover dark:border-l-primary-hover-dark']
95
+ };
96
+ const SidebarMain = [
97
+ // Layout
98
+ 'flex', 'flex-col', 'grow', 'overflow-x-hidden',
99
+ // Box
100
+ 'min-h-0'];
101
+ const SidebarHeader = [
102
+ // Layout
103
+ 'shrink-0', 'overflow-hidden',
104
+ // Sizing
105
+ 'p-md',
106
+ // Typography
107
+ 'typography-headline-2', 'whitespace-nowrap', 'text-ellipsis'];
108
+ const SidebarContent = [
109
+ // Layout
110
+ 'grow', 'overflow-auto',
111
+ // Sizing
112
+ 'p-md'];
113
+ const SidebarFooter = [
114
+ // Layout
115
+ 'shrink-0', 'overflow-x-hidden',
116
+ // Sizing
117
+ 'p-md',
118
+ // Borders
119
+ 'border-t-[1px]', 'border-t-solid', 'border-t-outline-variant dark:border-t-outline-variant-dark'];
120
+
121
+ function render(_ctx, _cache, $props, $setup, $data, $options) {
122
+ const _component_or_icon_button = resolveComponent("or-icon-button");
123
+ return openBlock(), createElementBlock("div", {
124
+ ref: "root",
125
+ class: normalizeClass(_ctx.rootStyles)
126
+ }, [createVNode(_component_or_icon_button, {
127
+ class: normalizeClass(_ctx.buttonStyles),
128
+ icon: {
129
+ icon: _ctx.icon,
130
+ size: 'inherit'
131
+ },
132
+ color: "inherit",
133
+ onClick: _cache[0] || (_cache[0] = $event => _ctx.$emit('update:modelValue', !_ctx.modelValue))
134
+ }, null, 8 /* PROPS */, ["class", "icon"])], 2 /* CLASS */);
135
+ }
136
+
137
+ script$1.render = render;
138
+ script$1.__file = "src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.vue";
139
+
140
+ var script = defineComponent({
141
+ name: 'OrSidebar',
142
+ components: {
143
+ OrSidebarCollapseButton: script$1
144
+ },
145
+ props: {
146
+ width: {
147
+ type: Number,
148
+ default: 320,
149
+ validator: value => _.isNumber(value) && value >= 0
150
+ },
151
+ minimumWidth: {
152
+ type: Number,
153
+ default: 256,
154
+ validator: value => _.isNumber(value) && value >= 0
155
+ },
156
+ maximumWidth: {
157
+ type: Number,
158
+ default: 384,
159
+ validator: value => _.isNumber(value) && value >= 0
160
+ },
161
+ /**
162
+ * User may put the component on the right or the left side of a container.
163
+ * This property mirrors the resizing behavior (drag direction) and styling (horizontal border) of the sidebar.
164
+ *
165
+ * Note: the property doesn't reposition the component in the parent container.
166
+ * @values left, right
167
+ */
168
+ side: {
169
+ type: String,
170
+ default: OrSidebarPlacement.right,
171
+ validator: value => _.includes(_.values(OrSidebarPlacement), value)
172
+ },
173
+ draggable: {
174
+ type: Boolean,
175
+ default: true
176
+ },
177
+ collapsible: {
178
+ type: Boolean,
179
+ default: false
180
+ }
181
+ },
182
+ emits: ['change:width', 'open', 'close'],
183
+ expose: ['root', 'open', 'close'],
184
+ setup(props, {
185
+ emit
186
+ }) {
187
+ // Refs
188
+ const root = ref();
189
+ const resizeBar = ref(null);
190
+ const parentContainer = computed(() => {
191
+ var _a;
192
+ return (_a = root.value) === null || _a === void 0 ? void 0 : _a.parentElement;
193
+ });
194
+ // Slots
195
+ const {
196
+ toolbar: toolbarSlot
197
+ } = useSlots();
198
+ // State
199
+ const startPositionX = ref(0);
200
+ const isResizing = ref(false);
201
+ const isCollapsed = ref(false);
202
+ const maximumWidth = ref(props.maximumWidth || 384);
203
+ const localWidth = ref(props.width >= props.minimumWidth ? props.width : props.minimumWidth);
204
+ const isShowingToolbar = computed(() => !!toolbarSlot);
205
+ // Styles
206
+ const sidebarStyle = computed(() => ({
207
+ width: (isCollapsed.value ? 16 : localWidth.value) + 'px'
208
+ }));
209
+ const rootStyles = computed(() => ['or-sidebar', ...SidebarRoot]);
210
+ const sidebarStyles = computed(() => [...SidebarBar, ...SidebarSides[props.side]]);
211
+ const toolbarStyles = computed(() => [...SidebarToolbar, ...(props.collapsible ? CollapsibleSidebarToolbar : []), ...SidebarToolbarSides[props.side]]);
212
+ const resizeStyles = computed(() => [...SidebarResize, ...SidebarResizeSides[props.side], ...(isResizing.value ? SidebarResizingSides[props.side] : [])]);
213
+ const collapsibleButtonStyles = computed(() => [...SidebarCollapseButton, ...SidebarCollapseButtonSides[props.side]]);
214
+ const mainStyles = computed(() => [...SidebarMain]);
215
+ const headerStyles = computed(() => [...SidebarHeader]);
216
+ const contentStyles = computed(() => [...SidebarContent]);
217
+ const footerStyles = computed(() => [...SidebarFooter]);
218
+ // Effects
219
+ useDraggable(resizeBar, {
220
+ preventDefault: true,
221
+ onStart: (position, event) => {
222
+ document.body.style.cursor = 'ew-resize';
223
+ document.body.style.userSelect = 'none';
224
+ startPositionX.value = event.x;
225
+ isResizing.value = true;
226
+ },
227
+ onMove: position => {
228
+ const delta = (position.x - startPositionX.value) * (props.side === OrSidebarPlacement.left ? -1 : 1);
229
+ const newWidth = localWidth.value - delta;
230
+ localWidth.value = newWidth > maximumWidth.value ? maximumWidth.value : newWidth < props.minimumWidth ? props.minimumWidth : newWidth;
231
+ startPositionX.value = position.x;
232
+ },
233
+ onEnd: () => {
234
+ document.body.style.cursor = '';
235
+ document.body.style.userSelect = '';
236
+ isResizing.value = false;
237
+ }
238
+ });
239
+ // Methods
240
+ function open() {
241
+ isCollapsed.value = false;
242
+ }
243
+ function close() {
244
+ isCollapsed.value = true;
245
+ }
246
+ const {
247
+ width: containerWidth
248
+ } = useElementBounding(parentContainer);
249
+ watch(() => props.width, newValue => {
250
+ if (newValue !== localWidth.value) {
251
+ localWidth.value = newValue > maximumWidth.value ? maximumWidth.value : newValue < props.minimumWidth ? props.minimumWidth : newValue;
252
+ }
253
+ });
254
+ watch(() => props.minimumWidth, newMinimum => {
255
+ if (newMinimum > localWidth.value) localWidth.value = newMinimum;
256
+ });
257
+ watch(() => props.maximumWidth, newMaximum => {
258
+ if (newMaximum < maximumWidth.value) maximumWidth.value = newMaximum;
259
+ });
260
+ watch(containerWidth, newMaximum => {
261
+ if (newMaximum < maximumWidth.value) maximumWidth.value = newMaximum;
262
+ });
263
+ watch(maximumWidth, newMaximum => {
264
+ if (newMaximum < localWidth.value) localWidth.value = newMaximum;
265
+ });
266
+ watch(localWidth, val => emit('change:width', val));
267
+ watch(isCollapsed, val => emit(val ? 'close' : 'open'));
268
+ return {
269
+ root,
270
+ resizeBar,
271
+ isResizing,
272
+ isCollapsed,
273
+ localWidth,
274
+ isShowingToolbar,
275
+ sidebarStyle,
276
+ rootStyles,
277
+ sidebarStyles,
278
+ toolbarStyles,
279
+ resizeStyles,
280
+ collapsibleButtonStyles,
281
+ mainStyles,
282
+ headerStyles,
283
+ contentStyles,
284
+ footerStyles,
285
+ open,
286
+ close
287
+ };
288
+ }
289
+ });
290
+
291
+ export { script as s };
@@ -0,0 +1,75 @@
1
+ import _ from 'lodash';
2
+ import { defineComponent, ref, computed } from 'vue';
3
+ import './OrIconButton-e0566ecf.js';
4
+ import { s as script$1 } from './OrIconButton.vue_vue_type_script_lang-7d1c3fe1.js';
5
+
6
+ var OrSidebarPlacement;
7
+ (function (OrSidebarPlacement) {
8
+ OrSidebarPlacement["left"] = "left";
9
+ OrSidebarPlacement["right"] = "right";
10
+ })(OrSidebarPlacement || (OrSidebarPlacement = {}));
11
+
12
+ const CollapseButtonContainer = [
13
+ // Box
14
+ 'w-[24px]', 'h-[24px]', 'rounded-full',
15
+ // Theme
16
+ 'text-primary dark:text-primary-dark', 'bg-background dark:bg-background-dark'];
17
+ const CollapseButton = [
18
+ // Box
19
+ 'w-[24px]', 'h-[24px]', 'rounded-full',
20
+ // Typography
21
+ '!text-[16px]',
22
+ // Borders
23
+ '!border-[1px]', '!border-solid',
24
+ // Theme
25
+ '!text-primary dark:!text-primary-dark', '!bg-background dark:!bg-background-dark', '!border-outline-variant dark:!border-outline-variant-dark', '!outline-none',
26
+ // Theme (hover)
27
+ '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',
28
+ // Theme (active)
29
+ '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',
30
+ // Theme (focus)
31
+ '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',
32
+ // Theme (disabled)
33
+ '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'];
34
+
35
+ var script = defineComponent({
36
+ name: 'OrSidebarCollapseButton',
37
+ components: {
38
+ OrIconButton: script$1
39
+ },
40
+ model: {
41
+ prop: 'modelValue',
42
+ event: 'update:modelValue'
43
+ },
44
+ props: {
45
+ /**
46
+ * Must be `true` if sidebar is collapsed.
47
+ */
48
+ modelValue: {
49
+ type: Boolean,
50
+ default: false
51
+ },
52
+ side: {
53
+ type: String,
54
+ default: OrSidebarPlacement.right,
55
+ validator: value => _.includes(_.values(OrSidebarPlacement), value)
56
+ }
57
+ },
58
+ emits: ['update:modelValue'],
59
+ expose: ['root'],
60
+ setup(props) {
61
+ // Refs
62
+ const root = ref();
63
+ const rootStyles = computed(() => ['or-sidebar-collapse-button', ...CollapseButtonContainer]);
64
+ const buttonStyles = computed(() => [...CollapseButton]);
65
+ const icon = computed(() => props.side === OrSidebarPlacement.left !== props.modelValue ? 'keyboard_arrow_left' : 'keyboard_arrow_right');
66
+ return {
67
+ root,
68
+ rootStyles,
69
+ buttonStyles,
70
+ icon
71
+ };
72
+ }
73
+ });
74
+
75
+ export { OrSidebarPlacement as O, script as s };
@@ -8,14 +8,14 @@ export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTT
8
8
  export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from '../OrButton.vue_vue_type_script_lang-3b1e442b.js';
9
9
  export { s as OrCard } from '../OrCard.vue_vue_type_script_lang-90ba001b.js';
10
10
  export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from '../OrCardCollection.vue_vue_type_script_lang-cd84f344.js';
11
- export { D as DefaultCardCollectionViews, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../OrCardCollection.vue_vue_type_script_lang-e2980d04.js';
11
+ export { D as DefaultCardCollectionViews, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../OrCardCollection.vue_vue_type_script_lang-f76c3264.js';
12
12
  export { s as OrCardV3 } from '../OrCard.vue_vue_type_script_lang-b6685a34.js';
13
13
  export { a as OrCarousel, s as OrCarouselItem } from '../OrCarouselItem.vue_vue_type_script_lang-ad286afc.js';
14
14
  export { s as OrCheckbox } from '../OrCheckbox.vue_vue_type_script_lang-d8a66818.js';
15
15
  export { s as OrCheckboxV3 } from '../OrCheckbox.vue_vue_type_script_lang-fc067611.js';
16
16
  export { s as OrChip } from '../OrChip-5d502431.js';
17
17
  export { s as OrChips } from '../OrChips.vue_vue_type_script_lang-69917e34.js';
18
- export { s as OrCode, O as OrCodeLanguages } from '../OrCode.vue_vue_type_script_lang-df150e3b.js';
18
+ export { s as OrCode, O as OrCodeLanguages } from '../OrCode.vue_vue_type_script_lang-c55de81d.js';
19
19
  export { s as OrCollapse } from '../OrCollapse.vue_vue_type_script_lang-65cbb754.js';
20
20
  export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from '../OrColorPicker.vue_vue_type_script_lang-4141378d.js';
21
21
  export { s as OrConfirm } from '../OrConfirm.vue_vue_type_script_lang-41b4d791.js';
@@ -66,12 +66,13 @@ export { s as OrRadio } from '../OrRadio.vue_vue_type_script_lang-c956b54b.js';
66
66
  export { s as OrRadioGroup } from '../OrRadioGroup.vue_vue_type_script_lang-caea7bcb.js';
67
67
  export { s as OrRadioV3 } from '../OrRadio.vue_vue_type_script_lang-8dc0720c.js';
68
68
  export { s as OrSearch } from '../OrSearch.vue_vue_type_script_lang-5356fa79.js';
69
- export { s as OrSearchV3 } from '../OrSearch.vue_vue_type_script_lang-321907ec.js';
69
+ export { s as OrSearchV3 } from '../OrSearch.vue_vue_type_script_lang-c054c8db.js';
70
70
  export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl.vue_vue_type_script_lang-38a00b68.js';
71
71
  export { s as OrSelect } from '../OrSelect.vue_vue_type_script_lang-26c0a70a.js';
72
72
  export { s as OrSelectV3 } from '../OrSelect.vue_vue_type_script_lang-7fd5e2f0.js';
73
73
  export { s as OrSidebar, O as OrSidebarSide } from '../OrSidebar.vue_vue_type_script_lang-7c55ac0a.js';
74
- export { O as OrSidebarPlacement, s as OrSidebarV3 } from '../OrSidebar.vue_vue_type_script_lang-ce0b152c.js';
74
+ export { s as OrSidebarV3 } from '../OrSidebar.vue_vue_type_script_lang-7f3f1a16.js';
75
+ export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton.vue_vue_type_script_lang-9aeba2d4.js';
75
76
  export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from '../OrSkeletonText.vue_vue_type_script_lang-f3f989c3.js';
76
77
  export { s as OrSkeletonCircleV3, a as OrSkeletonRectV3, b as OrSkeletonTextV3 } from '../OrSkeletonText.vue_vue_type_script_lang-efcfbe21.js';
77
78
  export { s as OrSlider } from '../OrSlider.vue_vue_type_script_lang-d47ff040.js';
@@ -1,4 +1,4 @@
1
- export { D as DefaultCardCollectionViews, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../../OrCardCollection.vue_vue_type_script_lang-e2980d04.js';
1
+ export { D as DefaultCardCollectionViews, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../../OrCardCollection.vue_vue_type_script_lang-f76c3264.js';
2
2
  import 'vue';
3
3
  import '../../OrIconButton-e0566ecf.js';
4
4
  import '../../OrIconButton.vue_vue_type_script_lang-7d1c3fe1.js';
@@ -22,7 +22,7 @@ import '../../OrMenu-6d7abe97.js';
22
22
  import '../../OrMenu.vue_vue_type_script_lang-df35fd76.js';
23
23
  import '../../OrMenuItem-807e2a49.js';
24
24
  import '../../OrMenuItem.vue_vue_type_script_lang-2400ec2a.js';
25
- import '../../OrSearch.vue_vue_type_script_lang-321907ec.js';
25
+ import '../../OrSearch.vue_vue_type_script_lang-c054c8db.js';
26
26
  import '../../OrInput-dcf2606e.js';
27
27
  import '../../OrInput.vue_vue_type_script_lang-27220623.js';
28
28
  import '../../OrHint-5d5e4d99.js';