@fastkit/vui 0.8.18 → 0.10.0

package/package.json

@@ -1,11 +1,19 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.8.18",
-  "description": "@fastkit/vui",
+  "version": "0.10.0",
+  "description": "A simple, extensible UI kit for Vue applications.",
   "buildOptions": {
     "name": "Vui",
     "tool": true
   },
+  "_docs": {
+    "scope": "vue",
+    "feature": "ui",
+    "description": {
+      "en": "A simple, extensible UI kit for Vue applications.",
+      "ja": "Vueアプリケーション用のシンプルで拡張可能なUIキット。"
+    }
+  },
   "main": "index.js",
   "module": "dist/vui.mjs",
   "files": [
@@ -19,7 +27,10 @@
     "url": "git+https://github.com/dadajam4/fastkit.git"
   },
   "keywords": [
-    "fastkit"
+    "fastkit",
+    "vue",
+    "ui",
+    "component"
   ],
   "author": "dadajam4",
   "license": "MIT",
@@ -28,21 +39,31 @@
   },
   "homepage": "https://github.com/dadajam4/fastkit/tree/dev/packages/vui#readme",
   "peerDependencies": {
-    "vite": "^2.9.13",
-    "vue": "^3.2.37"
+    "vite": "^4.0.4",
+    "vue": "^3.2.45"
   },
   "dependencies": {
-    "@fastkit/color-scheme": "0.8.18",
-    "@fastkit/icon-font": "0.8.18",
-    "@fastkit/tiny-logger": "0.8.18",
-    "@fastkit/vite-kit": "0.8.18",
-    "@fastkit/vue-kit": "0.8.18",
-    "@tiptap/extension-link": "^2.0.0-beta.43",
-    "@tiptap/extension-underline": "^2.0.0-beta.25",
-    "@tiptap/extension-text-style": "^2.0.0-beta.26",
-    "@tiptap/starter-kit": "^2.0.0-beta.191",
-    "@tiptap/vue-3": "^2.0.0-beta.96",
+    "@fastkit/color-scheme": "0.10.0",
+    "@fastkit/icon-font": "0.10.0",
+    "@fastkit/tiny-logger": "0.10.0",
+    "@fastkit/vite-kit": "0.10.0",
+    "@fastkit/vue-kit": "0.10.0",
+    "@tiptap/extension-link": "^2.0.0-beta.209",
+    "@tiptap/extension-text-style": "^2.0.0-beta.209",
+    "@tiptap/extension-underline": "^2.0.0-beta.209",
+    "@tiptap/starter-kit": "^2.0.0-beta.209",
+    "@tiptap/vue-3": "^2.0.0-beta.209",
     "eta": "^1.12.3",
-    "fs-extra": "^9.1.0"
+    "fs-extra": "^11.1.0",
+    "prosemirror-commands": "^1.5.0",
+    "prosemirror-dropcursor": "^1.6.1",
+    "prosemirror-gapcursor": "^1.3.1",
+    "prosemirror-history": "^1.3.0",
+    "prosemirror-keymap": "^1.2.0",
+    "prosemirror-model": "^1.18.3",
+    "prosemirror-schema-list": "^1.2.2",
+    "prosemirror-state": "^1.4.2",
+    "prosemirror-transform": "^1.7.0",
+    "prosemirror-view": "^1.29.1"
   }
 }

package/src/components/VBreadcrumbs/VBreadcrumbs.tsx

@@ -45,7 +45,7 @@ export const VBreadcrumbs = defineComponent({
       return items.map((item) => {
         const { to, text } = item;
         const {
-          disabled = vui.location.match(to) || !vui.location.isAvairable(to),
+          disabled = vui.location.match(to) || !vui.location.isAvailable(to),
         } = item;
         return {
           ...item,

package/src/components/VBusyImage/VBusyImage.tsx

@@ -96,7 +96,7 @@ export const VBusyImage = defineComponent({
   },
   setup(props, ctx) {
     const loadStateRef = ref<BusyImageLoadState>(
-      props.cover && isAvairableSrc(ctx.attrs.src as any)
+      props.cover && isAvailableSrc(ctx.attrs.src as any)
         ? 'loading'
         : 'pending',
     );
@@ -173,7 +173,7 @@ export const VBusyImage = defineComponent({
       () => ctx.attrs.src as string | null | undefined,
       (value) => {
         coverImageRef.value = undefined;
-        if (isAvairableSrc(value)) {
+        if (isAvailableSrc(value)) {
           loadStateRef.value = 'loading';
           if (props.cover) {
             loadImage(value)
@@ -273,6 +273,6 @@ function imageIsReady(image: HTMLImageElement): 'load' | 'error' | false {
   return image.naturalWidth + image.naturalHeight > 0 ? 'load' : 'error';
 }
 
-function isAvairableSrc(src: string | null | undefined): src is string {
+function isAvailableSrc(src: string | null | undefined): src is string {
   return typeof src === 'string' && src !== '';
 }

package/src/components/VButton/VButton.scss

@@ -38,6 +38,14 @@
   transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), color 1ms;
   appearance: none;
 
+  &--align-left {
+    justify-content: flex-start;
+  }
+
+  &--align-right {
+    justify-content: flex-end;
+  }
+
   &--plain {
     color: inherit !important;
     // color: inherit !important;

package/src/components/VButton/VButton.tsx

@@ -30,6 +30,10 @@ export type VButtonIcon = () => VNodeChild;
 
 export type RawVButtonIcon = IconName | VButtonIcon;
 
+export const BUTTON_ALIGNS = ['left', 'center', 'right'] as const;
+
+export type VButtonAlign = typeof BUTTON_ALIGNS[number];
+
 function resolveRawVButtonIcon(
   raw?: RawVButtonIcon,
   type: 'main' | 'start' | 'end' = 'main',
@@ -54,6 +58,10 @@ export const vueButtonProps = createPropsOptions({
   icon: [String, Function] as PropType<RawVButtonIcon>,
   startIcon: [String, Function] as PropType<RawVButtonIcon>,
   endIcon: [String, Function] as PropType<RawVButtonIcon>,
+  align: {
+    type: String as PropType<VButtonAlign>,
+    default: 'center',
+  },
   ...createControlProps(),
 });
 
@@ -115,6 +123,7 @@ export const VButton = defineComponent({
       // navigationable.value.classes,
       spacer.value ? `v-button--spacer-${spacer.value}` : undefined,
       `v-button--${control.size.value}`,
+      `v-button--align-${props.align}`,
       {
         'v-button--loading': isLoading.value,
         'v-button--icon': !!icon.value,

package/src/components/VDataTable/VDataTable.tsx

@@ -401,7 +401,11 @@ export const VDataTable = defineComponent({
 
       vui.location.pushQuery({
         ...queries,
-        [props.pageQuery]: 1,
+        ...(usePaigingRef.value
+          ? {
+              [props.pageQuery]: 1,
+            }
+          : undefined),
       });
     }
 
@@ -530,7 +534,7 @@ export const VDataTable = defineComponent({
       const isIndeterminate = isIndeterminateRef.value;
       const isAllSelected = isAllSelectedRef.value;
       const { defaultOrder, ascQueryValue } = props;
-      const usePaiging = usePaigingRef.value;
+      // const usePaiging = usePaigingRef.value;
 
       const children = headersRef.value.map((header) => {
         const { label, sortQuery, align, key } = header;
@@ -567,7 +571,7 @@ export const VDataTable = defineComponent({
 
         const sortActive = sortBy === sortQuery;
 
-        if (sortQuery && usePaiging) {
+        if (sortQuery) {
           const isASC = sortActive
             ? isASCRef.value
             : defaultOrder === ascQueryValue;
@@ -615,9 +619,9 @@ export const VDataTable = defineComponent({
           <th
             class={classes}
             key={header.key}
-            tabindex={sortQuery && usePaiging ? 0 : undefined}
+            tabindex={sortQuery ? 0 : undefined}
             onClick={(ev) => {
-              if (!sortQuery || !usePaiging) return;
+              if (!sortQuery) return;
               handleClickSortHeader(header, ev);
             }}>
             <div class="v-data-table__table__cell__tile">{headerChildren}</div>

package/src/components/VListTile/VListTile.tsx

@@ -14,8 +14,9 @@ import {
   createPropsOptions,
 } from '@fastkit/vue-utils';
 import { useScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
-import { useLink } from 'vue-router';
+// import { useLink } from 'vue-router';
 import { VLink } from '@fastkit/vue-utils';
+import { useVui } from '../../injections';
 
 export function createListTileProps() {
   const icon = rawIconProp();
@@ -47,6 +48,7 @@ export const VListTile = defineComponent({
     ...listTileEmits,
   },
   setup(props, ctx) {
+    const vui = useVui();
     const startIcon: ComputedRef<VNodeChild> = computed(() => {
       let icon = resolveRawIconProp(false, props.startIcon);
       if (!icon && props.startIconEmptySpace) {
@@ -60,7 +62,7 @@ export const VListTile = defineComponent({
 
     const hasTo = computed(() => !!ctx.attrs.to);
 
-    const link = useLink({ to: (ctx.attrs.to as any) || '' });
+    const link = vui.useLink({ to: (ctx.attrs.to as any) || '' });
 
     const isActive = computed(() => {
       if (!hasTo.value) return false;

package/src/components/VNavigation/VNavigation.tsx

@@ -12,10 +12,10 @@ import {
   renderNavigationItemInput,
 } from './VNavigationItem';
 import { useScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
+import { createPropsOptions, ExtractPropInput } from '@fastkit/vue-utils';
 
-export const VNavigation = defineComponent({
-  name: 'VNavigation',
-  props: {
+export function createNavigationProps() {
+  return createPropsOptions({
     items: {
       type: Array as PropType<NavigationItemInput[]>,
       required: true,
@@ -26,7 +26,16 @@ export const VNavigation = defineComponent({
       default: true,
     },
     caption: [String, Function] as PropType<VNodeChild | (() => VNodeChild)>,
-  },
+  });
+}
+
+export type NavigationInput = ExtractPropInput<
+  ReturnType<typeof createNavigationProps>
+>;
+
+export const VNavigation = defineComponent({
+  name: 'VNavigation',
+  props: createNavigationProps(),
   setup(props, ctx) {
     const items = computed(() => props.items);
     const color = useScopeColorClass(props);

package/src/components/VNavigation/VNavigationItem.tsx

@@ -22,7 +22,7 @@ import { ScopeName } from '@fastkit/color-scheme';
 export function createNavigationItemProps() {
   return {
     ...createListTileProps(),
-    match: String,
+    match: [String, Array] as PropType<string | string[]>,
     depth: {
       type: Number,
       default: 0,
@@ -72,6 +72,12 @@ export function renderNavigationItemInput(
   );
 }
 
+const TRIM_END_SLASH_RE = /\/$/;
+
+function trimEndSlash<T extends string | undefined>(sorce: T) {
+  return sorce ? sorce.replace(TRIM_END_SLASH_RE, '') : sorce;
+}
+
 export const VNavigationItem = defineComponent({
   name: 'VNavigationItem',
   inheritAttrs: false,
@@ -93,13 +99,16 @@ export const VNavigationItem = defineComponent({
 
     const to = computed(() => ctx.attrs.to);
 
-    const match = computed(() => {
+    const match = computed<string[] | undefined>(() => {
       const { match } = props;
       const { to } = ctx.attrs;
-      if (match) return match;
+      if (match) {
+        return (Array.isArray(match) ? match : [match]).map(trimEndSlash);
+      }
       if (!to) return;
-      if (typeof to === 'string') return to;
-      return (to as any).path as string | undefined;
+      const toPath = typeof to === 'string' ? to : (to as any).path;
+      if (!toPath) return;
+      return [trimEndSlash(toPath)];
     });
 
     const classes = computed(() => [
@@ -123,18 +132,27 @@ export const VNavigationItem = defineComponent({
         const c = children.value;
         const m = match.value;
 
-        if (!c || !m) {
+        if (!c || !m || !m.length) {
           // matched.value = false;
           return;
         }
 
-        if (newPath.match(m)) {
+        const trimedNewPath = trimEndSlash(newPath);
+        if (m.some((_) => trimedNewPath.match(_))) {
           open();
           // matched.value = true;
         } else {
           close();
           // matched.value = false;
         }
+
+        // if (trimEndSlash(newPath).match(m)) {
+        //   open();
+        //   // matched.value = true;
+        // } else {
+        //   close();
+        //   // matched.value = false;
+        // }
       },
       { immediate: true },
     );

package/src/components/VSelect/VSelect.tsx

@@ -18,7 +18,7 @@ import {
   createPropsOptions,
   VNodeChildOrSlot,
   resolveVNodeChildOrSlots,
-  useKeybord,
+  useKeyboard,
 } from '@fastkit/vue-kit';
 import { VFormControl } from '../VFormControl';
 import {
@@ -40,11 +40,11 @@ import { VOption } from '../VOption';
 import { VButton } from '..';
 import { VMenuControl } from '@fastkit/vue-stack';
 
-export const ARROW_KEY_TYPES = useKeybord.Key(['ArrowUp', 'ArrowDown']);
+export const ARROW_KEY_TYPES = useKeyboard.Key(['ArrowUp', 'ArrowDown']);
 
-export const CHOICE_KEY_TYPES = useKeybord.Key(['Enter', ' ']);
+export const CHOICE_KEY_TYPES = useKeyboard.Key(['Enter', ' ']);
 
-export const KEYBORD_EVENT_TYPES = useKeybord.Key([
+export const KEYBORD_EVENT_TYPES = useKeyboard.Key([
   ...ARROW_KEY_TYPES,
   ...CHOICE_KEY_TYPES,
 ]);
@@ -59,12 +59,18 @@ export const VSelect = defineComponent({
     ...createControlFieldProps(),
     ...createControlFieldProviderProps(),
     ...createControlProps(),
-    ...defineSlotsProps<FormControlSlots & InputBoxSlots>(),
+    ...defineSlotsProps<
+      FormControlSlots &
+        InputBoxSlots & {
+          selection: { item: FormSelectorItemControl; index: number };
+        }
+    >(),
     ...createPropsOptions({
       placeholder: String,
       loadingMessage: {} as PropType<VNodeChildOrSlot>,
       failedToLoadItemsMessage: {} as PropType<VNodeChildOrSlot>,
     }),
+    closeOnNavigation: Boolean,
   },
   emits,
   setup(props, ctx) {
@@ -109,6 +115,7 @@ export const VSelect = defineComponent({
     };
 
     const renderSelections = (selectedItems: FormSelectorItemControl[]) => {
+      const selectionSlot = ctx.slots.selection;
       const children: VNodeChild[] = [];
       if (inputControl.itemsLoadFailed) {
         children.push(
@@ -125,7 +132,10 @@ export const VSelect = defineComponent({
           if (index > 0) {
             children.push(vui.selectionSeparator());
           }
-          children.push(item.renderDefaultSlot());
+          const child = selectionSlot
+            ? selectionSlot({ item, index })
+            : item.renderDefaultSlot();
+          children.push(child);
         });
       } else if (props.placeholder != null) {
         children.push(
@@ -239,16 +249,16 @@ export const VSelect = defineComponent({
       }
     };
 
-    const keybordEventHandler = (ev: KeyboardEvent) => {
+    const keyboardEventHandler = (ev: KeyboardEvent) => {
       if (ARROW_KEY_TYPES.includes(ev.key as any)) return arrowKeyHandler(ev);
       if (CHOICE_KEY_TYPES.includes(ev.key as any)) return choiceKeyHandler(ev);
     };
 
-    useKeybord(
+    useKeyboard(
       [
         {
           key: KEYBORD_EVENT_TYPES,
-          handler: keybordEventHandler,
+          handler: keyboardEventHandler,
         },
       ],
       { autorun: true },
@@ -317,6 +327,7 @@ export const VSelect = defineComponent({
             <VMenu
               width="fit"
               maxWidth="fit"
+              closeOnNavigation={this.closeOnNavigation}
               distance={0}
               alwaysRender
               v-model={this.menuOpened}

package/src/components/VWysiwygEditor/VWysiwygEditor.tsx

@@ -39,7 +39,7 @@ import {
   BubbleMenu,
   FocusPosition,
 } from '@tiptap/vue-3';
-import StarterKit from '@tiptap/starter-kit';
+import { StarterKit } from '@tiptap/starter-kit';
 import { VButton, VButtonGroup } from '../VButton';
 import {
   RawWysiwygExtension,

package/src/plugin.tsx

@@ -83,7 +83,7 @@ export class VuiPlugin {
     app.config.globalProperties.$vui = $vui;
 
     onAppUnmount(app, () => {
-      delete app.config.globalProperties.$vui;
+      delete (app.config.globalProperties as any).$vui;
     });
   }
 }

package/src/service.tsx

@@ -12,7 +12,7 @@ import {
   resolveVStackDynamicInput,
 } from '@fastkit/vue-kit';
 import type { Router } from 'vue-router';
-import { RouterLink } from 'vue-router';
+import { RouterLink, useLink, UseLinkOptions } from 'vue-router';
 import { LocationService, setDefaultRouterLink } from '@fastkit/vue-utils';
 import { VForm } from './components/VForm';
 import { VTextField, TextFieldInput } from './components/VTextField';
@@ -20,6 +20,8 @@ import { VueForm, FormControlHinttipDelay } from '@fastkit/vue-form-control';
 import { getDocumentScroller } from '@fastkit/vue-scroller';
 import { ControlSize } from './schemes';
 
+export type UseLinkResult = ReturnType<typeof useLink>;
+
 export interface VuiFormPromptSettings<
   T extends { [key: string]: any } = { [key: string]: any },
 > extends Partial<VDialogProps> {
@@ -133,7 +135,8 @@ export type VuiVNodeResolver = () => VNodeChild;
 
 export interface VuiServiceOptions {
   router: Router;
-  RouterLink?: typeof RouterLink;
+  RouterLink?: any;
+  useLink?: (props: UseLinkOptions) => UseLinkResult;
   colorScheme: VueColorSchemePluginSettings;
   uiSettings: VuiServiceUISettings;
   icons: VuiServiceIconSettings;
@@ -183,6 +186,7 @@ export class VuiService {
   readonly router: Router;
   readonly location: LocationService;
   readonly stack: VueStackService;
+  readonly useLink: typeof useLink;
 
   get scroller() {
     return getDocumentScroller();
@@ -207,6 +211,7 @@ export class VuiService {
       router: this.router,
     });
     this.stack = stackService;
+    this.useLink = options.useLink || useLink;
   }
 
   configure(options?: Partial<VuiServiceOptions>) {

package/src/styles/core/functions.scss

@@ -23,7 +23,7 @@
 
 @mixin elevation($z, $important: false) {
   box-shadow: var(--shadow-key-umbra-#{$z}), var(--shadow-key-penumbra-#{$z}),
-    var(--shadow-key-ambient-#{$z}) if($important, !important, null);
+    var(--shadow-key-ambient-#{$z}) if($important, unquote('!important'), null);
 }
 
 @mixin elevation-transition(