@fastkit/vui 0.12.8 → 0.12.10

package/package.json

@@ -1,35 +1,41 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.12.8",
+  "version": "0.12.10",
   "description": "A simple, extensible UI kit for Vue applications.",
-  "buildOptions": {
-    "name": "Vui",
-    "tool": true
+  "keywords": [
+    "fastkit",
+    "vue",
+    "ui",
+    "component"
+  ],
+  "homepage": "https://github.com/dadajam4/fastkit/tree/dev/packages/vui#readme",
+  "bugs": {
+    "url": "https://github.com/dadajam4/fastkit/issues"
   },
-  "_docs": {
-    "scope": "vue",
-    "feature": "ui",
-    "description": {
-      "en": "A simple, extensible UI kit for Vue applications.",
-      "ja": "Vueアプリケーション用のシンプルで拡張可能なUIキット。"
-    }
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dadajam4/fastkit.git"
   },
-  "main": "./dist/vui.mjs",
+  "license": "MIT",
+  "author": "dadajam4",
+  "type": "module",
   "exports": {
+    "./package.json": "./package.json",
     "./vui.css": "./dist/vui.css",
-    "./tool": {
-      "import": "./dist/tool/index.mjs",
-      "types": "./dist/tool/index.d.ts"
+    ".": {
+      "types": "./dist/vui.d.ts",
+      "import": {
+        "default": "./dist/vui.mjs"
+      }
     },
-    ".": "./dist/vui.mjs"
+    "./*": "./dist/*"
   },
+  "main": "./dist/vui.mjs",
+  "types": "./dist/vui.d.ts",
   "typesVersions": {
     "*": {
       ".": [
         "./dist/vui.d.ts"
-      ],
-      "tool": [
-        "./dist/tool/index.d.ts"
       ]
     }
   },
@@ -37,49 +43,51 @@
     "dist",
     "src"
   ],
-  "types": "dist/vui.d.ts",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/dadajam4/fastkit.git"
-  },
-  "keywords": [
-    "fastkit",
-    "vue",
-    "ui",
-    "component"
-  ],
-  "author": "dadajam4",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/dadajam4/fastkit/issues"
+  "dependencies": {
+    "@fastkit/color-scheme": "0.12.10",
+    "@fastkit/color-scheme-gen": "0.12.10",
+    "@fastkit/icon-font": "0.12.10",
+    "@fastkit/helpers": "0.12.10",
+    "@fastkit/media-match": "0.12.10",
+    "@fastkit/media-match-gen": "0.12.10",
+    "@fastkit/rules": "0.12.10",
+    "@fastkit/tiny-logger": "0.12.10",
+    "@fastkit/stylebase": "0.12.10",
+    "@fastkit/vue-app-layout": "0.12.10",
+    "@fastkit/vue-form-control": "0.12.10",
+    "@fastkit/vue-color-scheme": "0.12.10",
+    "@fastkit/vue-loading": "0.12.10",
+    "@fastkit/vue-media-match": "0.12.10",
+    "@fastkit/vue-scroller": "0.12.10",
+    "@fastkit/vue-stack": "0.12.10",
+    "@fastkit/vue-utils": "0.12.10"
   },
-  "homepage": "https://github.com/dadajam4/fastkit/tree/dev/packages/vui#readme",
   "peerDependencies": {
-    "vite": "^4.0.4",
-    "vue": "^3.2.45"
+    "vue": "^3.2.0",
+    "vue-router": "^4.1.0"
   },
-  "dependencies": {
-    "@fastkit/color-scheme": "0.12.8",
-    "@fastkit/icon-font": "0.12.8",
-    "@fastkit/tiny-logger": "0.12.8",
-    "@fastkit/vite-kit": "0.12.8",
-    "@fastkit/vue-kit": "0.12.8",
-    "@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": "^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"
+  "buildOptions": {
+    "name": "Vui"
+  },
+  "_docs": {
+    "scope": "vue",
+    "feature": "ui",
+    "description": {
+      "en": "A simple, extensible UI kit for Vue applications.",
+      "ja": "Vueアプリケーション用のシンプルで拡張可能なUIキット。"
+    }
+  },
+  "scripts": {
+    "build": "plugboy build",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "eslint": "eslint . --ext ts,tsx,js,vue,html,yaml",
+    "eslint:fix": "eslint . --ext ts,tsx,js,vue,html,yaml --fix",
+    "format": "pnpm run \"/^(eslint:fix|stylelint:fix)$/\"",
+    "lint": "pnpm run \"/^(eslint|stylelint)$/\"",
+    "stub": "plugboy stub",
+    "stylelint": "stylelint \"**/*.{css,scss,vue,html}\" --allow-empty-input",
+    "stylelint:fix": "stylelint \"**/*.{css,scss,vue,html}\" --fix --allow-empty-input",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit --skipLibCheck"
   }
-}
+}

package/src/components/VApp/VApp.tsx

@@ -1,5 +1,7 @@
 import { defineComponent } from 'vue';
-import { VAppLayout, VStackRoot, useInjectTheme } from '@fastkit/vue-kit';
+import { VAppLayout } from '@fastkit/vue-app-layout';
+import { VStackRoot } from '@fastkit/vue-stack';
+import { useInjectTheme } from '@fastkit/vue-color-scheme';
 
 export const VApp = defineComponent({
   name: 'VApp',

package/src/components/VAvatar/VAvatar.scss

@@ -1,76 +1,78 @@
 @use '../../styles/core.scss';
 
-.v-avatar {
-  @include core.button-reset();
+@layer vui {
+  .v-avatar {
+    @include core.button-reset();
 
-  --avatar-radius: 50%;
-  --avatar-font-weight: var(--typo-medium-weight);
-  --avatar-base-font-size: var(--typo-base-size);
-  --avatar-font-size: var(--avatar-base-font-size);
+    --avatar-radius: 50%;
+    --avatar-font-weight: var(--typo-medium-weight);
+    --avatar-base-font-size: var(--typo-base-size);
+    --avatar-font-size: var(--avatar-base-font-size);
 
-  display: inline-flex;
-  flex-basis: var(--avatar-size);
-  align-items: center;
-  justify-content: center;
-  width: var(--avatar-size);
-  min-width: var(--avatar-size);
-  height: var(--avatar-size);
-  overflow: hidden;
-  font-size: var(--avatar-font-size);
-  font-weight: var(--avatar-font-weight);
-  line-height: 1;
-  text-align: center;
-  vertical-align: bottom;
-  cursor: default;
-  border-style: solid;
-  border-width: 1px;
-  border-radius: var(--avatar-radius);
-  // border-radius: var(--control-field-radius);
+    display: inline-flex;
+    flex-basis: var(--avatar-size);
+    align-items: center;
+    justify-content: center;
+    width: var(--avatar-size);
+    min-width: var(--avatar-size);
+    height: var(--avatar-size);
+    overflow: hidden;
+    font-size: var(--avatar-font-size);
+    font-weight: var(--avatar-font-weight);
+    line-height: 1;
+    text-align: center;
+    vertical-align: bottom;
+    cursor: default;
+    border-style: solid;
+    border-width: 1px;
+    border-radius: var(--avatar-radius);
+    // border-radius: var(--control-field-radius);
 
-  --shadow-color: rgba(0, 0, 0, 0) !important; // @TODO layer supports
-  --focusShadow-color: rgba(0, 0, 0, 0) !important; // @TODO layer supports
+    --shadow-color: rgba(0, 0, 0, 0) !important; // @TODO layer supports
+    --focusShadow-color: rgba(0, 0, 0, 0) !important; // @TODO layer supports
 
-  &--clickable {
-    cursor: pointer;
-  }
+    &--clickable {
+      cursor: pointer;
+    }
 
-  &--sm {
-    --avatar-size: 36px;
-    --avatar-font-size: calc(var(--avatar-base-font-size) * 0.75);
-  }
+    &--sm {
+      --avatar-size: 36px;
+      --avatar-font-size: calc(var(--avatar-base-font-size) * 0.75);
+    }
 
-  &--md {
-    --avatar-size: 48px;
-  }
+    &--md {
+      --avatar-size: 48px;
+    }
 
-  &--lg {
-    --avatar-size: 62px;
-    --avatar-font-size: calc(var(--avatar-base-font-size) * 1.25);
-  }
+    &--lg {
+      --avatar-size: 62px;
+      --avatar-font-size: calc(var(--avatar-base-font-size) * 1.25);
+    }
 
-  &--rounded {
-    --avatar-radius: 4px;
-  }
+    &--rounded {
+      --avatar-radius: 4px;
+    }
 
-  &--tile {
-    --avatar-radius: 0;
-  }
+    &--tile {
+      --avatar-radius: 0;
+    }
 
-  // &[disabled] {
-  //   pointer-events: none;
+    // &[disabled] {
+    //   pointer-events: none;
 
-  //   &::before {
-  //     content: none;
-  //   }
-  // }
-  // // noop
+    //   &::before {
+    //     content: none;
+    //   }
+    // }
+    // // noop
 
-  img,
-  &__image {
-    display: inline-flex;
-    width: inherit !important;
-    height: inherit !important;
-    border-radius: inherit;
-    object-fit: cover;
+    img,
+    &__image {
+      display: inline-flex;
+      width: inherit !important;
+      height: inherit !important;
+      border-radius: inherit;
+      object-fit: cover;
+    }
   }
 }

package/src/components/VAvatar/VAvatar.tsx

@@ -9,9 +9,14 @@ import { colorSchemeProps, useColorClasses } from '@fastkit/vue-color-scheme';
 import { useVui } from '../../injections';
 import { VBusyImage } from '../VBusyImage';
 
+// @TODO Unable to resolve dts for `navigationableInheritProps`.
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { RouteLocationRaw } from 'vue-router';
+
 export const AVATAR_SIZES = ['sm', 'md', 'lg'] as const;
 
-export type AvatarSize = typeof AVATAR_SIZES[number];
+export type AvatarSize = (typeof AVATAR_SIZES)[number];
 
 export function createAvatarProps() {
   return {

package/src/components/VBreadcrumbs/VBreadcrumbs.scss

@@ -1,61 +1,63 @@
-.v-breadcrumbs {
-  display: block;
-  margin: 1.5em auto;
-  font-size: var(--breadcrumbs-font-size);
+@layer vui {
+  .v-breadcrumbs {
+    display: block;
+    margin: 1.5em auto;
+    font-size: var(--breadcrumbs-font-size);
 
-  &__list {
-    display: inline-flex;
-    flex-wrap: wrap;
-    align-items: center;
-    padding: 0;
-    margin: 0;
-    vertical-align: bottom;
-    list-style: none;
-  }
+    &__list {
+      display: inline-flex;
+      flex-wrap: wrap;
+      align-items: center;
+      padding: 0;
+      margin: 0;
+      vertical-align: bottom;
+      list-style: none;
+    }
 
-  &__item,
-  &__divider {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
+    &__item,
+    &__divider {
+      padding: 0;
+      margin: 0;
+      list-style: none;
+    }
 
-  &__link {
-    display: inline-flex;
-    align-items: center;
-    text-decoration: none;
-    white-space: nowrap;
-    vertical-align: middle;
-  }
+    &__link {
+      display: inline-flex;
+      align-items: center;
+      text-decoration: none;
+      white-space: nowrap;
+      vertical-align: middle;
+    }
 
-  &__item--disabled &__link {
-    color: inherit;
-    // color: get-color(text-muted);
-    pointer-events: none;
-  }
+    &__item--disabled &__link {
+      color: inherit;
+      // color: get-color(text-muted);
+      pointer-events: none;
+    }
 
-  &__icon {
-    margin-right: 0.2em;
-    font-size: 140%;
-  }
+    &__icon {
+      margin-right: 0.2em;
+      font-size: 140%;
+    }
 
-  &__divider {
-    // opacity: 0.3;
-    position: relative;
-    top: 1px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0 1.25em;
+    &__divider {
+      // opacity: 0.3;
+      position: relative;
+      top: 1px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 1.25em;
 
-    &__icon {
-      display: block;
-      width: 0.5em;
-      height: 0.5em;
-      margin-left: -0.25em;
-      border-top: solid 1px currentColor;
-      border-right: solid 1px currentColor;
-      transform: rotate(45deg);
+      &__icon {
+        display: block;
+        width: 0.5em;
+        height: 0.5em;
+        margin-left: -0.25em;
+        border-top: solid 1px currentColor;
+        border-right: solid 1px currentColor;
+        transform: rotate(45deg);
+      }
     }
   }
 }

package/src/components/VBusyImage/VBusyImage.scss

@@ -1,58 +1,57 @@
-.v-busy-image {
-  position: relative;
-  display: inline-block;
-  max-width: 100%;
-  vertical-align: bottom;
-
-  &--clickable {
-    cursor: pointer;
-  }
-
-  &--cover {
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-  }
-
-  &--loading::before {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: block;
-    content: '';
-    background: rgba(0, 0, 0, 0.1);
-    animation: v-tiny-image-blink normal 1.5s infinite ease-in-out;
-  }
-
-  &__node {
+@layer vui {
+  .v-busy-image {
     position: relative;
     display: inline-block;
     max-width: 100%;
     vertical-align: bottom;
-  }
-
-  &__slot {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-  }
-}
-
-@keyframes v-tiny-image-blink {
-  0% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 0;
-  }
 
-  100% {
-    opacity: 1;
+    &--clickable {
+      cursor: pointer;
+    }
+
+    &--cover {
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: cover;
+    }
+
+    &--loading::before {
+      position: absolute;
+      inset: 0;
+      display: block;
+      content: '';
+      background: rgba(0, 0, 0, 0.1);
+      animation: v-tiny-image-blink normal 1.5s infinite ease-in-out;
+    }
+
+    &__node {
+      position: relative;
+      display: inline-block;
+      max-width: 100%;
+      vertical-align: bottom;
+    }
+
+    &__slot {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+    }
+  }
+
+  @keyframes v-tiny-image-blink {
+    0% {
+      opacity: 1;
+    }
+
+    50% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
   }
 }