@onereach/ui-components 2.74.0-beta.2287.0 → 2.74.1-beta.2289.0

package/src/components/or-stepper/OrStepper.stories.ts

@@ -30,7 +30,7 @@ const Template: Story = (_args, { argTypes }) => ({
   },
   //<component :key="slot.Id" :someProp="slotProps"></component>
   //<template #buttons="{onConfirm}"> here your button slot props <or-button content="slot-confirm" @click="onConfirm"/></template>
-  template: '<div><or-stepper v-bind="$props"> <template v-for="slot in slots" v-slot:[slot]="slotProps"><p class="bg-surface-5 text-on-surface rounded-sm p-md"> your slot named like content-{index} === {{slot}} ; slot props {{slotProps}}</p></template></or-stepper></div>',
+  template: '<div><or-stepper v-bind="$props"> <template v-for="slot in slots" v-slot:[slot]="slotProps"><p class="bg-surface-5 rounded-sm p-2"> your slot named like content-{index} === {{slot}} ; slot props {{slotProps}}</p></template></or-stepper></div>',
 
 });
 

package/src/components/or-tag-v3/OrTag.stories3.ts

@@ -1,13 +1,13 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/vue3';
 import Faker from 'faker';
+import { ref } from 'vue-demi';
+import { useOverflow } from '../../hooks';
+import { OrButtonV3 as OrButton } from '../or-button-v3';
+import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
 import OrTagDocs from './OrTag.docs.mdx';
 import OrTag from './OrTag.vue';
 import { TagColor, TagVariant } from './props';
-import { OrButtonV3 as OrButton } from '../or-button-v3';
-import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
-import { useOverflow } from '../../hooks';
-import { ref } from 'vue-demi';
 
 export default {
   title: 'Components/Tag',
@@ -77,7 +77,7 @@ const Template: StoryFn<typeof OrTag> = (args) => ({
       @blur="handleBlur"
       @reset="handleReset"
     >
-    ${args.default}
+      ${args.default}
     </OrTag>
   `,
 });

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

@@ -5,7 +5,7 @@ export const TagRoot: string[] = [
   'layout-inline-row',
 
   // Box
-  'max-w-fit',
+  'max-w-min',
 
   // Shape
   'rounded-full',

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

@@ -2,13 +2,16 @@ import { TooltipPlacement } from './props';
 
 export const TooltipRoot: string[] = [
   // Layout
-  'layout-inline-row justify-center',
+  'inline-block',
 ];
 
 export const TooltipBody: string[] = [
   // Layout
   'layout-inline-row',
 
+  // Box
+  'max-w-min',
+
   // Shape
   'rounded-sm',
 

package/dist/bundled/v2/components/or-code/theme.d.ts

@@ -1,24 +0,0 @@
-import { Extension } from '@codemirror/state';
-import { HighlightStyle } from '@codemirror/language';
-export declare const color: {
-    chalky: string;
-    coral: string;
-    cyan: string;
-    invalid: string;
-    ivory: string;
-    stone: string;
-    malibu: string;
-    sage: string;
-    whiskey: string;
-    violet: string;
-    darkBackground: string;
-    highlightBackground: string;
-    background: string;
-    tooltipBackground: string;
-    selection: string;
-    cursor: string;
-};
-export declare const orCodeTheme: Extension;
-export declare const orCodeHighlightStyle: HighlightStyle;
-declare const theme: Extension;
-export default theme;

package/dist/bundled/v3/components/or-code/theme.d.ts

@@ -1,24 +0,0 @@
-import { Extension } from '@codemirror/state';
-import { HighlightStyle } from '@codemirror/language';
-export declare const color: {
-    chalky: string;
-    coral: string;
-    cyan: string;
-    invalid: string;
-    ivory: string;
-    stone: string;
-    malibu: string;
-    sage: string;
-    whiskey: string;
-    violet: string;
-    darkBackground: string;
-    highlightBackground: string;
-    background: string;
-    tooltipBackground: string;
-    selection: string;
-    cursor: string;
-};
-export declare const orCodeTheme: Extension;
-export declare const orCodeHighlightStyle: HighlightStyle;
-declare const theme: Extension;
-export default theme;

package/dist/esm/v2/components/or-code/theme.d.ts

@@ -1,24 +0,0 @@
-import { Extension } from '@codemirror/state';
-import { HighlightStyle } from '@codemirror/language';
-export declare const color: {
-    chalky: string;
-    coral: string;
-    cyan: string;
-    invalid: string;
-    ivory: string;
-    stone: string;
-    malibu: string;
-    sage: string;
-    whiskey: string;
-    violet: string;
-    darkBackground: string;
-    highlightBackground: string;
-    background: string;
-    tooltipBackground: string;
-    selection: string;
-    cursor: string;
-};
-export declare const orCodeTheme: Extension;
-export declare const orCodeHighlightStyle: HighlightStyle;
-declare const theme: Extension;
-export default theme;

package/dist/esm/v3/components/or-code/theme.d.ts

@@ -1,24 +0,0 @@
-import { Extension } from '@codemirror/state';
-import { HighlightStyle } from '@codemirror/language';
-export declare const color: {
-    chalky: string;
-    coral: string;
-    cyan: string;
-    invalid: string;
-    ivory: string;
-    stone: string;
-    malibu: string;
-    sage: string;
-    whiskey: string;
-    violet: string;
-    darkBackground: string;
-    highlightBackground: string;
-    background: string;
-    tooltipBackground: string;
-    selection: string;
-    cursor: string;
-};
-export declare const orCodeTheme: Extension;
-export declare const orCodeHighlightStyle: HighlightStyle;
-declare const theme: Extension;
-export default theme;

package/src/components/or-code/theme.ts

@@ -1,213 +0,0 @@
-import { EditorView } from '@codemirror/view';
-import { Extension } from '@codemirror/state';
-import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
-import { tags as t } from '@lezer/highlight';
-
-// Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors
-
-const chalky = 'var(--c-warning-darken-20)',
-  coral = 'var(--c-error)',
-  cyan = '#56b6c2',
-  invalid = 'var(--c-white)',
-  ivory = 'var(--c-neutral-6)',
-  stone = 'var(--c-neutral-5)', // Brightened compared to original to increase contrast
-  malibu = '#61afef',
-  sage = 'var(--c-success)',
-  whiskey = 'var(--c-warning-darken-5)',
-  violet = '#c678dd',
-  darkBackground = 'var(--c-neutral-1)',
-  highlightBackground = 'var(--c-neutral-2)',
-  background = 'var(--c-neutral-1)',
-  tooltipBackground = 'var(--c-neutral-2)',
-  selection = 'var(--c-neutral-3)',
-  cursor = 'var(--c-primary)';
-
-/// The colors used in the theme, as CSS color strings.
-export const color = {
-  chalky,
-  coral,
-  cyan,
-  invalid,
-  ivory,
-  stone,
-  malibu,
-  sage,
-  whiskey,
-  violet,
-  darkBackground,
-  highlightBackground,
-  background,
-  tooltipBackground,
-  selection,
-  cursor,
-};
-
-/// The editor theme styles for One Dark.
-export const orCodeTheme = EditorView.theme({
-  '&': {
-    color: ivory,
-    backgroundColor: background,
-  },
-
-  '.cm-content': {
-    caretColor: cursor,
-  },
-
-  '.cm-button': {
-    background: highlightBackground,
-    color: 'var(--c-neutral-6)',
-    border: 0,
-    borderRadius: 'var(--s-2)',
-  },
-
-  '.cm-panel.cm-search input[type=checkbox]': {
-    display: 'inline-block',
-    verticalAlign: 'middle',
-  },
-
-  '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
-  '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
-    backgroundColor: selection,
-  },
-
-  '.cm-panels': {
-    backgroundColor: darkBackground,
-    color: ivory,
-  },
-  '.cm-panels.cm-panels-top': { borderBottom: '2px solid var(--c-neutral-2)' },
-  '.cm-panels.cm-panels-bottom': { borderTop: '2px solid var(--c-neutral-2)' },
-
-  '.cm-searchMatch': {
-    backgroundColor: 'var(--c-neutral-1)',
-    outline: '1px solid var(--c-neutral-2)',
-  },
-  '.cm-searchMatch.cm-searchMatch-selected': {
-    backgroundColor: '#6199ff2f',
-  },
-
-  '.cm-activeLine': { backgroundColor: '#6699ff0b' },
-  '.cm-selectionMatch': { backgroundColor: '#aafe661a' },
-
-  '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
-    backgroundColor: '#bad0f847',
-  },
-
-  '.cm-gutters': {
-    backgroundColor: background,
-    color: stone,
-    border: 'none',
-  },
-
-  '.cm-activeLineGutter': {
-    backgroundColor: highlightBackground,
-  },
-
-  '.cm-foldPlaceholder': {
-    backgroundColor: 'transparent',
-    border: 'none',
-    color: '#ddd',
-  },
-
-  '.cm-tooltip': {
-    border: 'none',
-    backgroundColor: tooltipBackground,
-  },
-  '.cm-tooltip .cm-tooltip-arrow:before': {
-    borderTopColor: 'transparent',
-    borderBottomColor: 'transparent',
-  },
-  '.cm-tooltip .cm-tooltip-arrow:after': {
-    borderTopColor: tooltipBackground,
-    borderBottomColor: tooltipBackground,
-  },
-  '.cm-tooltip-autocomplete': {
-    '& > ul > li[aria-selected]': {
-      backgroundColor: highlightBackground,
-      color: ivory,
-    },
-  },
-  '.cm-textfield': {
-    outline: 'none',
-    background: background,
-    color: 'var(--c-neutral-6)',
-    backgroundColor: 'var(--c-neutral-1)',
-    border: '1px solid var(--c-neutral-2)',
-    borderRadius: 'var(--s-2)',
-  },
-}, { dark: true });
-
-/// The highlighting style for code in the One Dark theme.
-export const orCodeHighlightStyle = HighlightStyle.define([
-  {
-    tag: t.keyword,
-    color: violet,
-  },
-  {
-    tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
-    color: coral,
-  },
-  {
-    tag: [t.function(t.variableName), t.labelName],
-    color: malibu,
-  },
-  {
-    tag: [t.color, t.constant(t.name), t.standard(t.name)],
-    color: whiskey,
-  },
-  {
-    tag: [t.definition(t.name), t.separator],
-    color: ivory,
-  },
-  {
-    tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
-    color: chalky,
-  },
-  {
-    tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)],
-    color: cyan,
-  },
-  {
-    tag: [t.meta, t.comment],
-    color: stone,
-  },
-  {
-    tag: t.strong,
-    fontWeight: 'bold',
-  },
-  {
-    tag: t.emphasis,
-    fontStyle: 'italic',
-  },
-  {
-    tag: t.strikethrough,
-    textDecoration: 'line-through',
-  },
-  {
-    tag: t.link,
-    color: stone,
-    textDecoration: 'underline',
-  },
-  {
-    tag: t.heading,
-    fontWeight: 'bold',
-    color: coral,
-  },
-  {
-    tag: [t.atom, t.bool, t.special(t.variableName)],
-    color: whiskey,
-  },
-  {
-    tag: [t.processingInstruction, t.string, t.inserted],
-    color: sage,
-  },
-  {
-    tag: t.invalid,
-    color: invalid,
-  },
-]);
-
-/// Extension to enable the One Dark theme (both the editor theme and
-/// the highlight style).
-const theme: Extension = [orCodeTheme, syntaxHighlighting(orCodeHighlightStyle)];
-
-export default theme;