@fastkit/vui 0.6.38 → 0.6.42

package/src/service.tsx

@@ -0,0 +1,242 @@
+export { VuiInjectionKey } from './injections';
+
+import { VNodeChild } from 'vue';
+import { ScopeName, ColorVariant } from '@fastkit/color-scheme';
+import type { IconName, RawIconProp } from './components/VIcon';
+import {
+  type VueColorSchemePluginSettings,
+  type VueStackService,
+  type VDialogProps,
+  resolveVStackDynamicInput,
+} from '@fastkit/vue-kit';
+import type { Router } from 'vue-router';
+import { RouterLink } from 'vue-router';
+import { LocationService, setDefaultRouterLink } from '@fastkit/vue-utils';
+import { VForm } from './components/VForm';
+import { VTextField, TextFieldInput } from './components/VTextField';
+import { VueForm } from '@fastkit/vue-form-control';
+import { getDocumentScroller } from '@fastkit/vue-scroller';
+
+export interface VuiPromptOptions extends Partial<VDialogProps> {
+  input?: Omit<TextFieldInput, 'modelValue'> & { initialValue?: string };
+}
+
+export type RawVuiPromptOptions = string | VuiPromptOptions;
+
+const DEFAULT_AUTO_SCROLL_TO_ELEMENT_OFFSET_TOP = -20;
+const DEFAULT_TEXTAREA_ROWS = 3;
+
+export interface VuiServiceUISettings {
+  primaryScope: ScopeName;
+  plainVariant: ColorVariant;
+  containedVariant: ColorVariant;
+  errorScope: ScopeName;
+  buttonDefault: {
+    color: ScopeName;
+    variant: ColorVariant;
+  };
+  tabDefault: {
+    color: ScopeName;
+  };
+  dialogOk?: {
+    color?: ScopeName;
+    variant?: ColorVariant;
+  };
+  dialogCancel?: {
+    color?: ScopeName;
+    variant?: ColorVariant;
+  };
+  dialogClose?: {
+    color?: ScopeName;
+    variant?: ColorVariant;
+  };
+}
+
+export interface VuiServiceIconSettings {
+  menuDown: IconName;
+  navigationExpand: RawIconProp;
+  prev: RawIconProp;
+  next: RawIconProp;
+  sort: RawIconProp;
+  editorTextColor: IconName;
+  editorformatBold: IconName;
+  editorformatUnderline: IconName;
+  editorformatItalic: IconName;
+  editorformatListBulleted: IconName;
+  editorformatListNumbered: IconName;
+  editorLink: IconName;
+  editorLinkOff: IconName;
+  editorUndo: IconName;
+  editorRedo: IconName;
+}
+
+export type VuiVNodeResolver = () => VNodeChild;
+
+export interface VuiServiceOptions {
+  router: Router;
+  RouterLink?: typeof RouterLink;
+  colorScheme: VueColorSchemePluginSettings;
+  uiSettings: VuiServiceUISettings;
+  icons: VuiServiceIconSettings;
+  selectionSeparator?: VuiVNodeResolver;
+  autoScrollToElementOffsetTop?: number | (() => number | undefined);
+  textareaRows?: number;
+  requiredChip?: VuiVNodeResolver;
+}
+
+export class VuiService {
+  readonly options: VuiServiceOptions;
+
+  readonly selectionSeparator: VuiVNodeResolver;
+  readonly autoScrollToElementOffsetTop?: number | (() => number | undefined);
+  readonly textareaRows?: number;
+  readonly requiredChip?: VuiVNodeResolver;
+  readonly router: Router;
+  readonly location: LocationService;
+  readonly stack: VueStackService;
+
+  get scroller() {
+    return getDocumentScroller();
+  }
+
+  constructor(options: VuiServiceOptions, stackService: VueStackService) {
+    this.options = options;
+    this.configure();
+
+    const {
+      selectionSeparator = () => ', ',
+      autoScrollToElementOffsetTop = DEFAULT_AUTO_SCROLL_TO_ELEMENT_OFFSET_TOP,
+      textareaRows = DEFAULT_TEXTAREA_ROWS,
+      requiredChip = () => '*',
+    } = options;
+    this.selectionSeparator = selectionSeparator;
+    this.autoScrollToElementOffsetTop = autoScrollToElementOffsetTop;
+    this.textareaRows = textareaRows;
+    this.requiredChip = requiredChip;
+    this.router = options.router;
+    this.location = new LocationService({
+      router: this.router,
+    });
+    this.stack = stackService;
+  }
+
+  configure(options?: Partial<VuiServiceOptions>) {
+    options && Object.assign(this.options, options);
+    setDefaultRouterLink(this.getRouterLink());
+  }
+
+  getRouterLink() {
+    return this.options.RouterLink || RouterLink;
+  }
+
+  setting<K extends keyof VuiServiceUISettings>(
+    key: K,
+  ): VuiServiceUISettings[K] {
+    return this.options.uiSettings[key] as VuiServiceUISettings[K];
+  }
+
+  icon<K extends keyof VuiServiceIconSettings>(
+    iconType: K,
+  ): VuiServiceIconSettings[K] {
+    return this.options.icons[iconType] as VuiServiceIconSettings[K];
+  }
+
+  getAutoScrollToElementOffsetTop() {
+    let { autoScrollToElementOffsetTop } = this;
+    if (typeof autoScrollToElementOffsetTop === 'function') {
+      autoScrollToElementOffsetTop = autoScrollToElementOffsetTop();
+    }
+    return autoScrollToElementOffsetTop || 0;
+  }
+
+  getRequiredChip() {
+    const { requiredChip } = this;
+    return requiredChip && requiredChip();
+  }
+
+  dialog(...args: Parameters<VueStackService['dialog']>) {
+    return this.stack.dialog(...args);
+  }
+
+  alert(...args: Parameters<VueStackService['alert']>) {
+    return this.stack.alert(...args);
+  }
+
+  confirm(...args: Parameters<VueStackService['confirm']>) {
+    return this.stack.confirm(...args);
+  }
+
+  snackbar(...args: Parameters<VueStackService['snackbar']>) {
+    return this.stack.snackbar(...args);
+  }
+
+  prompt(rawOptions: RawVuiPromptOptions = {}) {
+    const options: VuiPromptOptions =
+      typeof rawOptions === 'string'
+        ? {
+            input: {
+              label: rawOptions,
+            },
+          }
+        : {
+            ...rawOptions,
+          };
+
+    options.input = {
+      ...options.input,
+    };
+
+    options.dense = true;
+
+    let { initialValue: value = '' } = options.input;
+    const { size } = options.input;
+
+    delete options.input.initialValue;
+
+    let form: VueForm | undefined;
+
+    options.actions = options.actions || [
+      this.stack.action('cancel', undefined, { size }),
+      this.stack.action('ok', undefined, {
+        size,
+        onClick: () => {
+          if (form) {
+            const ev = new Event('submit');
+            form.handleSubmit(ev);
+          }
+        },
+      }),
+    ];
+
+    const resolved = resolveVStackDynamicInput({
+      ...options,
+      content: (stack) => {
+        return (
+          <VForm
+            disableAutoScroll
+            size={size}
+            onVnodeMounted={(vnode) => {
+              form = (vnode.component as any).ctx.form as VueForm;
+            }}
+            onVnodeBeforeUnmount={() => {
+              form = undefined;
+            }}
+            onSubmit={(ev) => {
+              stack.resolve(value);
+            }}>
+            <VTextField
+              {...options.input}
+              modelValue={value}
+              onChange={(ev) => {
+                stack.value = ev;
+                value = ev;
+              }}
+            />
+          </VForm>
+        );
+      },
+    });
+
+    return this.dialog(resolved);
+  }
+}

package/src/styles/after-effects/display-flow.scss

@@ -0,0 +1,346 @@
+$props-map: (
+  (
+    prop: 'display',
+    values: (
+      (
+        selector: 'inline',
+        value: 'inline',
+      ),
+      (
+        selector: 'inline-block',
+        value: 'inline-block',
+      ),
+      (
+        selector: 'block',
+        value: 'block',
+      ),
+      (
+        selector: 'flex',
+        value: 'flex',
+      ),
+      (
+        selector: 'inline-flex',
+        value: 'inline-flex',
+      ),
+      (
+        selector: 'fragment',
+        value: 'contents',
+      ),
+    ),
+  ),
+  (
+    prop: 'flex-direction',
+    values: (
+      (
+        selector: 'direction-row',
+        value: 'row',
+      ),
+      (
+        selector: 'direction-row-reverse',
+        value: 'row-reverse',
+      ),
+      (
+        selector: 'direction-column',
+        value: 'column',
+      ),
+      (
+        selector: 'direction-column-reverse',
+        value: 'column-reverse',
+      ),
+    ),
+  ),
+  (
+    prop: 'flex-wrap',
+    values: (
+      (
+        selector: 'wrap',
+        value: 'wrap',
+      ),
+      (
+        selector: 'nowrap',
+        value: 'nowrap',
+      ),
+      (
+        selector: 'wrap-reverse',
+        value: 'wrap-reverse',
+      ),
+    ),
+  ),
+  (
+    prop: 'align-items',
+    values: (
+      (
+        selector: 'align-flex-start',
+        value: 'flex-start',
+      ),
+      (
+        selector: 'align-flex-end',
+        value: 'flex-end',
+      ),
+      (
+        selector: 'align-start',
+        value: 'start',
+      ),
+      (
+        selector: 'align-end',
+        value: 'end',
+      ),
+      (
+        selector: 'align-stretch',
+        value: 'stretch',
+      ),
+      (
+        selector: 'align-baseline',
+        value: 'baseline',
+      ),
+      (
+        selector: 'align-center',
+        value: 'center',
+      ),
+      (
+        selector: 'align-self-start',
+        value: 'self-start',
+      ),
+      (
+        selector: 'align-self-end',
+        value: 'self-end',
+      ),
+    ),
+  ),
+  (
+    prop: 'justify-content',
+    values: (
+      (
+        selector: 'justify-start',
+        value: 'start',
+      ),
+      (
+        selector: 'justify-end',
+        value: 'end',
+      ),
+      (
+        selector: 'justify-flex-start',
+        value: 'flex-start',
+      ),
+      (
+        selector: 'justify-flex-end',
+        value: 'flex-end',
+      ),
+      (
+        selector: 'justify-center',
+        value: 'center',
+      ),
+      (
+        selector: 'justify-baseline',
+        value: 'baseline',
+      ),
+      (
+        selector: 'justify-space-between',
+        value: 'space-between',
+      ),
+      (
+        selector: 'justify-space-around',
+        value: 'space-around',
+      ),
+      (
+        selector: 'justify-space-evenly',
+        value: 'space-evenly',
+      ),
+      (
+        selector: 'justify-stretch',
+        value: 'stretch',
+      ),
+    ),
+  ),
+  (
+    prop: 'align-self',
+    values: (
+      (
+        selector: 'self-align-flex-start',
+        value: 'flex-start',
+      ),
+      (
+        selector: 'self-align-flex-end',
+        value: 'flex-end',
+      ),
+      (
+        selector: 'self-align-start',
+        value: 'start',
+      ),
+      (
+        selector: 'self-align-end',
+        value: 'end',
+      ),
+      (
+        selector: 'self-align-stretch',
+        value: 'stretch',
+      ),
+      (
+        selector: 'self-align-baseline',
+        value: 'baseline',
+      ),
+      (
+        selector: 'self-align-center',
+        value: 'center',
+      ),
+      (
+        selector: 'self-align-self-start',
+        value: 'self-start',
+      ),
+      (
+        selector: 'self-align-self-end',
+        value: 'self-end',
+      ),
+    ),
+  ),
+  (
+    prop: 'justify-self',
+    values: (
+      (
+        selector: 'self-justify-start',
+        value: 'start',
+      ),
+      (
+        selector: 'self-justify-end',
+        value: 'end',
+      ),
+      (
+        selector: 'self-justify-flex-start',
+        value: 'flex-start',
+      ),
+      (
+        selector: 'self-justify-flex-end',
+        value: 'flex-end',
+      ),
+      (
+        selector: 'self-justify-center',
+        value: 'center',
+      ),
+      (
+        selector: 'self-justify-baseline',
+        value: 'baseline',
+      ),
+      (
+        selector: 'self-justify-stretch',
+        value: 'stretch',
+      ),
+    ),
+  )
+);
+
+@mixin grid-spacing($breakpoint-suffix: '', $direction: 'all') {
+  $props: if(
+    $direction == 'all',
+    ('top', 'left'),
+    if($direction == 'x', ('left'), ('top'))
+  );
+
+  $suffix: if($direction == 'all', '', '-' + $direction);
+
+  @for $i from 1 through 10 {
+    $base-value: if(
+      $i == 0,
+      0,
+      if($i == 1, var(--root-spacing), calc(var(--root-spacing) * #{$i}))
+    );
+    $half-value: calc(var(--root-spacing) * #{$i + 0.5});
+    $negative-base-value: if(
+      $i == 1,
+      calc(var(--root-spacing) * -1),
+      calc(var(--root-spacing) * -#{$i})
+    );
+    $negative-half-value: calc(var(--root-spacing) * -#{$i + 0.5});
+    $container-width: if(
+      $i == 0,
+      100%,
+      if(
+        $i == 1,
+        calc(100% + var(--root-spacing)),
+        calc(100% + (var(--root-spacing) * #{$i}))
+      )
+    );
+    $container-width-half: calc(100% + (var(--root-spacing) * #{$i + 0.5}));
+
+    .grid-spacing#{$suffix}-#{$i}#{$breakpoint-suffix} {
+      @if $direction != 'y' {
+        width: $container-width;
+      }
+
+      @each $prop in $props {
+        margin-#{$prop}: $negative-base-value;
+      }
+
+      & > .grid-item {
+        @each $prop in $props {
+          padding-#{$prop}: $base-value;
+        }
+      }
+    }
+
+    .grid-spacing#{$suffix}-#{$i}h#{$breakpoint-suffix} {
+      @if $direction != 'y' {
+        width: $container-width-half;
+      }
+
+      @each $prop in $props {
+        margin-#{$prop}: $negative-half-value;
+      }
+
+      & > .grid-item {
+        @each $prop in $props {
+          padding-#{$prop}: $half-value;
+        }
+      }
+    }
+  }
+}
+
+@mixin display-flow($breakpoint-suffix: '') {
+  @each $prop-info in $props-map {
+    $prop: map-get($prop-info, prop);
+    $values: map-get($prop-info, values);
+
+    @each $value-info in $values {
+      $selector: map-get($value-info, selector);
+      $value: map-get($value-info, value);
+
+      .#{$selector}#{$breakpoint-suffix} {
+        #{$prop}: unquote($value);
+      }
+    }
+  }
+
+  @for $i from 0 through 10 {
+    .order-#{$i}#{$breakpoint-suffix} {
+      order: $i;
+    }
+  }
+
+  $columns-length: 12;
+
+  @for $i from 1 through $columns-length {
+    .grid-size-#{$i}#{$breakpoint-suffix} {
+      --basis: calc(#{$i} / #{$columns-length} * 100%);
+
+      flex-basis: var(--basis);
+      flex-grow: 0;
+      max-width: var(--basis);
+    }
+  }
+
+  .grid-size-auto#{$breakpoint-suffix} {
+    flex-basis: 0;
+    flex-grow: 1;
+    max-width: 100%;
+  }
+
+  @include grid-spacing($breakpoint-suffix);
+  @include grid-spacing($breakpoint-suffix, 'x');
+  @include grid-spacing($breakpoint-suffix, 'y');
+}
+
+@include display-flow();
+
+@include mq-each() {
+  @include display-flow($breakpoint-suffix: '--' + $mq-each-target);
+}