@fastkit/vui 0.6.38 → 0.6.42

package/src/components/VWysiwygEditor/tools/link.ts

@@ -0,0 +1,57 @@
+import { WysiwygEditorToolFactory, WysiwygEditorTool } from '../schemes';
+import { Link, LinkOptions } from '@tiptap/extension-link';
+import { validateIf, url } from '@fastkit/rules';
+
+export const WysiwygLinkTool: WysiwygEditorToolFactory<LinkOptions> = (
+  vui,
+  options,
+) => {
+  const tool: WysiwygEditorTool = {
+    key: 'link',
+    // icon: ({ editor }) => {
+    //   return vui.icon(editor.isActive('link') ? 'editorLinkOff' : 'editorLink');
+    // },
+    icon: vui.icon('editorLink'),
+    active: ({ editor }) => editor.isActive('link'),
+    // disabled: ({ editor }) => {
+    //   const { $from, $to } = editor.view.state.selection;
+    //   return $to.pos - $from.pos === 0;
+    // },
+    onClick: async ({ vui, editor }) => {
+      const { href = '' } = editor.getAttributes('link');
+      const result = await vui.prompt({
+        input: {
+          label: 'Link URL',
+          rules: [validateIf, url],
+          initialValue: href,
+          size: 'sm',
+          autofocus: true,
+        },
+      });
+
+      if (result === undefined || result === false) {
+        return;
+      }
+
+      const range = editor.chain().focus().extendMarkRange('link');
+
+      if (!result) {
+        range.unsetLink().run();
+      } else {
+        range
+          .setLink({
+            href: result,
+          })
+          .run();
+      }
+    },
+    floating: true,
+    extensions: [
+      Link.configure({
+        openOnClick: false,
+        ...options,
+      }),
+    ],
+  };
+  return tool;
+};

package/src/components/VWysiwygEditor/tools/ordered-list.ts

@@ -0,0 +1,21 @@
+import { WysiwygEditorToolFactory, WysiwygEditorTool } from '../schemes';
+import {
+  OrderedList,
+  OrderedListOptions,
+} from '@tiptap/extension-ordered-list';
+
+export const WysiwygOrderedListTool: WysiwygEditorToolFactory<
+  OrderedListOptions
+> = (vui, options) => {
+  const tool: WysiwygEditorTool = {
+    key: 'orderedList',
+    icon: vui.icon('editorformatListNumbered'),
+    active: ({ editor }) => editor.isActive('orderedList'),
+    onClick: ({ editor }) => {
+      editor.chain().focus().toggleOrderedList().run();
+    },
+    floating: true,
+    extensions: [OrderedList.configure(options)],
+  };
+  return tool;
+};

package/src/components/VWysiwygEditor/tools/text-color.ts

@@ -0,0 +1,14 @@
+import { WysiwygEditorToolFactory, WysiwygEditorTool } from '../schemes';
+
+export const WysiwygTextColorTool: WysiwygEditorToolFactory = (vui) => {
+  const tool: WysiwygEditorTool = {
+    key: 'textColor',
+    icon: vui.icon('editorTextColor'),
+    // icon: (gen) => vui.icon('editorTextColor'),
+    onClick: (ctx) => {
+      ctx.vui.alert('ok');
+    },
+    floating: true,
+  };
+  return tool;
+};

package/src/components/index.ts

@@ -0,0 +1,32 @@
+export * from './loading';
+export * from './kits';
+export * from './VGrid';
+export * from './VPaper';
+export * from './VCard';
+export * from './VIcon';
+export * from './VButton';
+export * from './VPagination';
+export * from './VListTile';
+export * from './VDrawerLayout';
+export * from './VHero';
+// export * from './VAccordion';
+export * from './VNavigation';
+export * from './VCheckbox';
+export * from './VCheckboxGroup';
+export * from './VRadio';
+export * from './VRadioGroup';
+export * from './VSwitch';
+export * from './VSwitchGroup';
+export * from './VOption';
+export * from './VOptionGroup';
+export * from './VSelect';
+export * from './VTextField';
+export * from './VTextarea';
+export * from './VWysiwygEditor';
+export * from './VForm';
+export * from './VTabs';
+export * from './VBreadcrumbs';
+export * from './VContentSwitcher';
+export * from './VDataTable';
+export * from './VApp';
+export * from './VToolbar';

package/src/components/kits.ts

@@ -0,0 +1 @@
+export { VDialog, VMenu, VSnackbar } from '@fastkit/vue-kit';

package/src/components/loading.ts

@@ -0,0 +1 @@
+export * from '@fastkit/vue-loading';

package/src/composables/control.ts

@@ -0,0 +1,118 @@
+import {
+  PropType,
+  ExtractPropTypes,
+  computed,
+  ComputedRef,
+  provide,
+  inject,
+} from 'vue';
+import {
+  ControlSize,
+  CONTROL_SIZES,
+  ControlFieldVariant,
+  CONTROL_FIELD_VARIANTS,
+} from '../schemes';
+import { createPropsOptions } from '@fastkit/vue-kit';
+import {
+  VuiControlInjectionKey,
+  VuiControlFieldInjectionKey,
+} from '../injections';
+
+export function createControlProps() {
+  return createPropsOptions({
+    size: {
+      type: String as PropType<ControlSize>,
+      validator: (value: any) => {
+        if (value == null) return true;
+        return CONTROL_SIZES.includes(value);
+      },
+    },
+  });
+}
+
+export type ControlProps = ExtractPropTypes<
+  ReturnType<typeof createControlProps>
+>;
+
+export interface ControlProvider {
+  parentControl: ControlProvider | null;
+  size: ComputedRef<ControlSize>;
+  classes: ComputedRef<any>;
+}
+
+export interface UseControlProviderOptions {
+  defaultSize?: ControlSize;
+}
+
+export function useControl(
+  props: ControlProps,
+  opts: UseControlProviderOptions = {},
+) {
+  const { defaultSize = 'md' } = opts;
+  const parentControl = inject(VuiControlInjectionKey, null);
+  const size = computed(() => {
+    const psize = props.size;
+    return psize
+      ? psize
+      : parentControl
+      ? parentControl.size.value
+      : defaultSize;
+  });
+  const classes = computed(() => {
+    return ['v-control', `v-control--${size.value}`];
+  });
+  const provider: ControlProvider = {
+    parentControl,
+    size,
+    classes,
+  };
+  provide(VuiControlInjectionKey, provider);
+  return provider;
+}
+
+export function createControlFieldProviderProps() {
+  return createPropsOptions({
+    variant: {
+      type: String as PropType<ControlFieldVariant>,
+      validator: (value: any) => {
+        if (value == null) return true;
+        return CONTROL_FIELD_VARIANTS.includes(value);
+      },
+    },
+  });
+}
+
+export type ControlFieldProviderProps = ExtractPropTypes<
+  ReturnType<typeof createControlFieldProviderProps>
+>;
+
+export interface ControlFieldProvider {
+  parentControlField: ControlFieldProvider | null;
+  variant: ComputedRef<ControlFieldVariant>;
+}
+
+export interface UseControlFieldProviderOptions {
+  defaultVariant?: ControlFieldVariant;
+}
+
+export function useControlField(
+  props: ControlFieldProviderProps,
+  opts: UseControlFieldProviderOptions = {},
+) {
+  const { defaultVariant = 'flat' } = opts;
+  const parentControlField = inject(VuiControlFieldInjectionKey, null);
+  const variant = computed(() => {
+    const pvariant = props.variant;
+    return pvariant
+      ? pvariant
+      : parentControlField
+      ? parentControlField.variant.value
+      : defaultVariant;
+  });
+  const provider: ControlFieldProvider = {
+    parentControlField,
+    variant,
+  };
+  provide(VuiControlFieldInjectionKey, provider);
+  return provider;
+}

package/src/composables/elevation.ts

@@ -0,0 +1,34 @@
+import { PropType, ExtractPropTypes, computed } from 'vue';
+import { createPropsOptions } from '@fastkit/vue-utils';
+import { VuiElevationValue } from '../schemes';
+
+export function createElevationProps() {
+  return createPropsOptions({
+    elevation: Number as PropType<VuiElevationValue>,
+  });
+}
+
+export type ElevationProps = ExtractPropTypes<
+  ReturnType<typeof createElevationProps>
+>;
+
+export interface UseElevationOptions {
+  defaultValue?: VuiElevationValue;
+}
+
+export function useElevation(
+  props: ElevationProps,
+  opts: UseElevationOptions = {},
+) {
+  const elevationValue = computed(() =>
+    props.elevation == null ? opts.defaultValue : props.elevation,
+  );
+  const elevationClassName = computed(() => {
+    const v = elevationValue.value;
+    return v == null ? undefined : `elevation-${v}`;
+  });
+  return {
+    elevationValue,
+    elevationClassName,
+  };
+}

package/src/composables/form-selector.scss

@@ -0,0 +1,11 @@
+.v-form-selector {
+  &__body {
+    display: block;
+  }
+
+  &--stacked &__body {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}

package/src/composables/form-selector.tsx

@@ -0,0 +1,101 @@
+import './form-selector.scss';
+import { VNodeChild, defineComponent } from 'vue';
+import {
+  defineSlotsProps,
+  TypedSlot,
+  createFormControlProps,
+  createFormSelectorSettings,
+  FormControlSlots,
+  useFormSelectorControl,
+  ResolvedFormSelectorItemData,
+  FormNodeControl,
+  renderSlotOrEmpty,
+} from '@fastkit/vue-kit';
+import { createControlProps, useControl } from './control';
+import { VFormControl } from '../components/VFormControl';
+
+export interface DefineFormSelectorComponentOptions {
+  name: string;
+  defaultMultiple?: boolean;
+  nodeType: string;
+  className: string;
+  itemRenderer: (ctx: {
+    attrs: ResolvedFormSelectorItemData & { key: string | number };
+    slots: {
+      default: TypedSlot<FormNodeControl>;
+    };
+  }) => VNodeChild;
+}
+
+export function defineFormSelectorComponent(
+  opts: DefineFormSelectorComponentOptions,
+) {
+  const { itemRenderer, defaultMultiple, nodeType, className } = opts;
+  const { props, emits } = createFormSelectorSettings({
+    defaultMultiple,
+  });
+
+  return defineComponent({
+    name: opts.name,
+    props: {
+      ...props,
+      ...createFormControlProps(),
+      ...createControlProps(),
+      stacked: {
+        type: Boolean,
+        default: true,
+      },
+      ...defineSlotsProps<FormControlSlots>(),
+    },
+    emits,
+    setup(props, ctx) {
+      const selectorControl = useFormSelectorControl(props, ctx, {
+        nodeType,
+        defaultMultiple,
+      });
+      const control = useControl(props);
+      return {
+        ...selectorControl.expose(),
+        ...control,
+      };
+    },
+    render() {
+      return (
+        <VFormControl
+          nodeControl={this.nodeControl}
+          focused={this.nodeControl.focused}
+          hiddenInfo={this.hiddenInfo}
+          class={[
+            'v-form-selector',
+            className,
+            {
+              ...this.classes,
+              'v-form-selector--stacked': this.stacked,
+            },
+          ]}
+          label={this.label}
+          hint={this.hint}
+          v-slots={{
+            ...this.$slots,
+            default: () => (
+              <div class="v-form-selector__body">
+                {this.propItems.map((attrs) =>
+                  itemRenderer({
+                    attrs: {
+                      ...attrs,
+                      key: attrs.value,
+                    },
+                    slots: {
+                      default: () => attrs.label(this.selectorControl),
+                    },
+                  }),
+                )}
+                {renderSlotOrEmpty(this.$slots, 'default')}
+              </div>
+            ),
+          }}
+        />
+      );
+    },
+  });
+}

package/src/composables/index.ts

@@ -0,0 +1,4 @@
+export * from './control';
+export * from './form-selector';
+export * from './elevation';
+export * from './vui';

package/src/composables/vui.ts

@@ -0,0 +1,9 @@
+import { ComputedRef } from 'vue';
+export type { VuiService } from '../service';
+import { ScopeName } from '@fastkit/color-scheme';
+
+export interface VuiColorProvider {
+  primary: ComputedRef<ScopeName>;
+  error: ComputedRef<ScopeName>;
+  className: (type: 'primary' | 'error') => string;
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+export * from '@fastkit/vue-kit';
+
+import './styles/index.scss';
+
+export * from './schemes';
+export * from './composables';
+export * from './components';
+export * from './service';
+export * from './plugin';
+export * from './injections';

package/src/injections.ts

@@ -0,0 +1,61 @@
+import { InjectionKey, inject, computed, provide } from 'vue';
+import type { VuiService } from './service';
+import type {
+  ControlProvider,
+  ControlFieldProvider,
+  VuiColorProvider,
+} from './composables';
+
+export const VuiInjectionKey: InjectionKey<VuiService> = Symbol();
+
+export const VuiControlInjectionKey: InjectionKey<ControlProvider> = Symbol();
+
+export const VuiControlFieldInjectionKey: InjectionKey<ControlFieldProvider> =
+  Symbol();
+
+export const VuiColorProviderInjectionKey: InjectionKey<VuiColorProvider> =
+  Symbol();
+
+export const VUI_TEXT_FIELD_SYMBOL = 'vui-text-field';
+export const VUI_TEXTAREA_SYMBOL = 'vui-textarea';
+export const VUI_WYSIWYG_EDITOR_SYMBOL = 'vui-wysiwyg-editor';
+export const VUI_SELECT_SYMBOL = 'vui-select';
+export const VUI_OPTION_SYMBOL = 'vui-option';
+export const VUI_CHECKBOX_GROUP_SYMBOL = 'vui-checkbox-group';
+export const VUI_CHECKBOX_SYMBOL = 'vui-checkbox';
+export const VUI_RADIO_GROUP_SYMBOL = 'vui-radio-group';
+export const VUI_RADIO_SYMBOL = 'vui-radio';
+export const VUI_SWITCH_GROUP_SYMBOL = 'vui-switch-group';
+export const VUI_SWITCH_SYMBOL = 'vui-switch';
+export const VUI_FORM_SYMBOL = 'vui-form';
+
+export function useVui() {
+  const vui = inject(VuiInjectionKey);
+  if (!vui) {
+    throw new Error('missing vui service');
+  }
+  return vui;
+}
+
+export function useVuiColorProvider(): VuiColorProvider {
+  const parent = inject(VuiColorProviderInjectionKey, null);
+  if (parent) {
+    return parent;
+  }
+
+  const vui = useVui();
+  const primary = computed(() => vui.setting('primaryScope'));
+  const error = computed(() => vui.setting('errorScope'));
+  const provider: VuiColorProvider = {
+    primary,
+    error,
+    className: (type) => {
+      const scope = provider[type].value;
+      return `${scope}-scope`;
+    },
+  };
+
+  provide(VuiColorProviderInjectionKey, provider);
+
+  return provider;
+}

package/src/logger.ts

@@ -0,0 +1,7 @@
+import { TinyLogger, createTinyError } from '@fastkit/tiny-logger';
+
+const name = 'vui';
+
+export const logger = new TinyLogger(name);
+
+export const VuiError = createTinyError(name);

package/src/plugin.tsx

@@ -0,0 +1,76 @@
+import { App } from 'vue';
+import { VuiService, VuiServiceOptions, VuiInjectionKey } from './service';
+import {
+  installVueStackPlugin,
+  VueStackServiceOptions,
+  VueColorSchemePlugin,
+} from '@fastkit/vue-kit';
+import { VButton } from './components/VButton';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface VuiPluginStackOptions extends VueStackServiceOptions {}
+
+export interface VuiPluginOptions extends VuiServiceOptions {
+  stack?: VuiPluginStackOptions;
+}
+
+declare module '@vue/runtime-core' {
+  export interface ComponentCustomProperties {
+    $vui: VuiService;
+  }
+}
+
+export class VuiPlugin {
+  static readonly installedApps = new Set<App>();
+
+  static install(app: App, opts: VuiPluginOptions) {
+    const { installedApps } = this;
+    if (installedApps.has(app)) return;
+    const unmountApp = app.unmount;
+    installedApps.add(app);
+
+    const { colorScheme, stack, uiSettings } = opts;
+
+    // ColorScheme
+    const vueColorSchemePlugin = new VueColorSchemePlugin(colorScheme);
+    app.use(vueColorSchemePlugin);
+
+    // Stack
+    installVueStackPlugin(app, {
+      actions: {
+        ok: ({ bindings }) => (
+          <VButton {...uiSettings.dialogOk} {...bindings}>
+            OK
+          </VButton>
+        ),
+        cancel: ({ bindings }) => (
+          <VButton {...uiSettings.dialogCancel} {...bindings}>
+            CANCEL
+          </VButton>
+        ),
+        close: ({ bindings }) => (
+          <VButton {...uiSettings.dialogClose} {...bindings}>
+            CLOSE
+          </VButton>
+        ),
+        ...(stack ? stack.actions : {}),
+      },
+      ...stack,
+    });
+
+    // Vui
+    const $vui = new VuiService(opts, app.config.globalProperties.$vstack);
+    app.provide(VuiInjectionKey, $vui);
+    app.config.globalProperties.$vui = $vui;
+
+    app.unmount = function () {
+      installedApps.delete(app);
+      delete app.config.globalProperties.$vui;
+      unmountApp();
+    };
+  }
+}
+
+export function installVuiPlugin(app: App, opts: VuiPluginOptions) {
+  return app.use(VuiPlugin, opts);
+}

package/src/schemes/control.ts

@@ -0,0 +1,7 @@
+export const CONTROL_SIZES = ['sm', 'md', 'lg'] as const;
+
+export type ControlSize = typeof CONTROL_SIZES[number];
+
+export const CONTROL_FIELD_VARIANTS = ['outlined', 'filled', 'flat'] as const;
+
+export type ControlFieldVariant = typeof CONTROL_FIELD_VARIANTS[number];

package/src/schemes/elevation.ts

@@ -0,0 +1,26 @@
+export type VuiElevationValue =
+  | 0
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+  | 13
+  | 14
+  | 15
+  | 16
+  | 17
+  | 18
+  | 19
+  | 20
+  | 21
+  | 22
+  | 23
+  | 24;

package/src/schemes/index.ts

@@ -0,0 +1,2 @@
+export * from './control';
+export * from './elevation';