@fastkit/vui 0.6.44 → 0.7.0

package/dist/{vui.esm-bundler.js → vui.mjs}

@@ -434,10 +434,10 @@ const VGridContainer = defineComponent({
 });
 
 function createPaperBaseProps() {
-  return {
+  return { ...htmlAttributesPropOptions,
     color: String,
     tag: {
-      type: String,
+      type: [String, Object],
       default: 'div'
     },
     ...defineSlotsProps$1()
@@ -449,11 +449,13 @@ function createPaperProps() {
     square: Boolean,
     headerProps: Object,
     bodyProps: Object,
-    footerProps: Object
+    footerProps: Object,
+    innerClass: [String, Array, Object]
   };
 }
 const VPaper = defineComponent({
   name: 'VPaper',
+  inheritAttrs: false,
   props: createPaperProps(),
 
   setup(props, ctx) {
@@ -464,7 +466,7 @@ const VPaper = defineComponent({
     const scope = useScopeColorClass(props);
     const classes = computed(() => [elevation.elevationClassName.value, scope.value.className, {
       'v-paper--plain': !scope.value.value,
-      'v-paper--has-color': !!scope.value.value,
+      'v-paper--has-color': !!scope.value.value || !!ctx.attrs.disabled,
       'v-paper--square': props.square
     }]);
     const headerProps = computed(() => props.headerProps);
@@ -474,16 +476,18 @@ const VPaper = defineComponent({
       const TagName = tag.value;
       const header = renderSlotOrEmpty$1(ctx.slots, 'header');
       const footer = renderSlotOrEmpty$1(ctx.slots, 'footer');
-      return createVNode(TagName, {
+      return createVNode(TagName, mergeProps({
         "class": ['v-paper', classes.value]
-      }, {
-        default: () => [header && createVNode("div", mergeProps({
+      }, ctx.attrs), {
+        default: () => [createVNode("div", {
+          "class": ['v-paper__inner', props.innerClass]
+        }, [header && createVNode("div", mergeProps({
           "class": "v-paper__header"
         }, headerProps.value), [header]), createVNode("div", mergeProps({
           "class": "v-paper__body"
         }, bodyProps.value), [renderSlotOrEmpty$1(ctx.slots, 'default')]), footer && createVNode("div", mergeProps({
           "class": "v-paper__footer"
-        }, footerProps.value), [footer])]
+        }, footerProps.value), [footer])])]
       });
     };
   }
@@ -491,20 +495,42 @@ const VPaper = defineComponent({
 });
 
 function createCardProps() {
-  return { ...createPaperProps()
+  return { ...createPaperProps(),
+    ...navigationableInheritProps,
+    disabled: Boolean
   };
 }
 const VCard = defineComponent({
   name: 'VCard',
+  inheritAttrs: false,
   props: createCardProps(),
 
   setup(props, ctx) {
     const _props = computed(() => props);
 
+    const data = computed(() => {
+      const hasLink = !!ctx.attrs.href || !!ctx.attrs.to;
+      const attrs = { ..._props.value,
+        ...ctx.attrs,
+        class: ['v-card', ctx.attrs.class, typeof ctx.attrs.onClick === 'function' && 'clickable'],
+        tag: hasLink ? VLink : 'div'
+      };
+
+      if (props.disabled) {
+        attrs.disabled = 'disabled';
+        delete attrs.onClick;
+        delete attrs.href;
+        delete attrs.to;
+      } else {
+        delete attrs.disabled;
+      }
+
+      return {
+        attrs
+      };
+    });
     return () => {
-      return createVNode(VPaper, mergeProps({
-        "class": "v-card"
-      }, _props.value), ctx.slots);
+      return createVNode(VPaper, data.value.attrs, ctx.slots);
     };
   }
 
@@ -796,7 +822,8 @@ const VPagination = defineComponent({
   name: 'VPagination',
   props: paginationProps(),
   emits: {
-    change: page => true
+    change: page => true,
+    'update:modelValue': page => true
   },
 
   setup(props, ctx) {
@@ -1131,7 +1158,8 @@ const VDrawerLayout = defineComponent({
         tag: props.tag
       }));
       return createVNode(VPaper, mergeProps({
-        "class": "v-drawer-layout"
+        "class": "v-drawer-layout",
+        "innerClass": "v-drawer-layout__inner"
       }, paperProps.value, {
         "square": true,
         "headerProps": {
@@ -1204,7 +1232,12 @@ function _isSlot$b(s) {
 
 function createNavigationItemProps() {
   return { ...createListTileProps(),
-    match: String // key: {
+    match: String,
+    depth: {
+      type: Number,
+      default: 0
+    },
+    nested: Boolean // key: {
     //   type: [String, Number],
     //   required: true,
     // },
@@ -1267,7 +1300,8 @@ const VNavigationItem = defineComponent({
       return to.path;
     });
     const classes = computed(() => [{
-      'v-navigation-item--opened': opened.value
+      'v-navigation-item--opened': opened.value,
+      [`v-navigation-item--depth-${props.depth}`]: props.depth > 0
     }]);
     const route = useRoute(); // const classes = computed(() => [
     //   // {
@@ -1392,7 +1426,8 @@ const VNavigationItem = defineComponent({
         default: () => [withDirectives(createVNode("div", {
           "class": "v-navigation-item__expand"
         }, [_children.map(child => renderNavigationItemInput(child, {
-          startIconEmptySpace: _props.value.startIconEmptySpace // onClick,
+          startIconEmptySpace: _props.value.startIconEmptySpace,
+          depth: props.nested ? props.depth + 1 : props.depth // onClick,
           // onChangeActive,
 
         }))]), [[vShow, opened.value]])]
@@ -3617,7 +3652,7 @@ const VDataTable = defineComponent({
         "class": "v-data-table__controls__info"
       }, [createVNode("small", {
         "class": "v-data-table__controls__info__length"
-      }, [createTextVNode("\u5168 "), total, createTextVNode(" \u4EF6\u4E2D "), offset + 1, createTextVNode(" \u4EF6 \u301C "), offset + length, createTextVNode(" \u4EF6\u3092\u8868\u793A")])]), createVNode("div", {
+      }, [`全 ${total} 件中 ${offset + 1} 件 〜 ${offset + length} 件を表示`])]), createVNode("div", {
         "class": "v-data-table__controls__select-limit"
       }, [createVNode("span", {
         "class": "v-data-table__controls__select-limit__prefix"

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.6.44",
+  "version": "0.7.0",
   "description": "@fastkit/vui",
   "buildOptions": {
     "name": "Vui",
     "tool": true
   },
   "main": "index.js",
-  "module": "dist/vui.esm-bundler.js",
+  "module": "dist/vui.mjs",
   "files": [
     "index.js",
     "dist",
@@ -32,11 +32,11 @@
     "vue": "^3.2.20"
   },
   "dependencies": {
-    "@fastkit/color-scheme": "0.6.44",
-    "@fastkit/icon-font": "0.6.44",
-    "@fastkit/tiny-logger": "0.6.44",
-    "@fastkit/vite-kit": "0.6.44",
-    "@fastkit/vue-kit": "0.6.44",
+    "@fastkit/color-scheme": "0.7.0",
+    "@fastkit/icon-font": "0.7.0",
+    "@fastkit/tiny-logger": "0.7.0",
+    "@fastkit/vite-kit": "0.7.0",
+    "@fastkit/vue-kit": "0.7.0",
     "eta": "^1.12.3",
     "fs-extra": "^9.1.0",
     "@tiptap/extension-link": "^2.0.0-beta.33",

package/src/components/VButton/VButton.tsx

@@ -13,6 +13,7 @@ import {
   createPropsOptions,
   renderSlotOrEmpty,
   htmlAttributesPropOptions,
+  VLink,
 } from '@fastkit/vue-utils';
 import { useVui } from '../../injections';
 import { createControlProps, useControl } from '../../composables';
@@ -20,7 +21,6 @@ import { VProgressCircular } from '../loading';
 import { ControlSize } from '../../schemes/control';
 import { VIcon } from '../VIcon';
 import type { IconName } from '../VIcon';
-import { VLink } from '@fastkit/vue-utils';
 
 export type VButtonSpacer = 'left' | 'right';
 

package/src/components/VCard/VCard.scss

@@ -1,3 +1,54 @@
+@use '../../styles/core.scss';
+
 .v-card {
+  @include core.remove-tap-highlight();
+
+  position: relative;
+  width: 100%;
+  padding: 0;
+  text-align: left;
+  touch-action: manipulation;
+  user-select: none;
+  border: 0;
+  outline: 0;
+  appearance: none;
+
+  &,
+  &:hover,
+  &:focus {
+    text-decoration: none;
+  }
+
+  &.clickable {
+    cursor: pointer;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      content: '';
+      background: currentColor;
+      border-radius: inherit;
+      opacity: 0;
+      transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+    }
+
+    &:hover,
+    &:focus {
+      &::before {
+        opacity: 0.125;
+      }
+    }
+  }
+
+  &[disabled] {
+    pointer-events: none;
+
+    &::before {
+      content: none;
+    }
+  }
   // noop
 }

package/src/components/VCard/VCard.tsx

@@ -1,20 +1,56 @@
 import './VCard.scss';
 import { defineComponent, computed } from 'vue';
 import { VPaper, createPaperProps } from '../VPaper';
+import { navigationableInheritProps, VLink } from '@fastkit/vue-utils';
 
 export function createCardProps() {
   return {
     ...createPaperProps(),
+    ...navigationableInheritProps,
+    disabled: Boolean,
   };
 }
 
 export const VCard = defineComponent({
   name: 'VCard',
+  inheritAttrs: false,
   props: createCardProps(),
   setup(props, ctx) {
     const _props = computed(() => props);
+    const data = computed(() => {
+      const hasLink = !!ctx.attrs.href || !!ctx.attrs.to;
+      const attrs = {
+        ..._props.value,
+        ...ctx.attrs,
+        class: [
+          'v-card',
+          ctx.attrs.class,
+          typeof ctx.attrs.onClick === 'function' && 'clickable',
+        ],
+        tag: hasLink ? VLink : 'div',
+      };
+      if (props.disabled) {
+        attrs.disabled = 'disabled' as any;
+        delete (attrs as any).onClick;
+        delete (attrs as any).href;
+        delete (attrs as any).to;
+      } else {
+        delete (attrs as any).disabled;
+      }
+      return { attrs };
+    });
+
     return () => {
-      return <VPaper class="v-card" {..._props.value} v-slots={ctx.slots} />;
+      return (
+        <VPaper
+          {...data.value.attrs}
+          // {..._props.value}
+          // {...ctx.attrs}
+          // class="v-card"
+          // tag={VLink}
+          v-slots={ctx.slots}
+        />
+      );
     };
   },
 });

package/src/components/VDataTable/VDataTable.tsx

@@ -443,7 +443,9 @@ export const VDataTable = defineComponent({
         <div class="v-data-table__controls">
           <div class="v-data-table__controls__info">
             <small class="v-data-table__controls__info__length">
-              全 {total} 件中 {offset + 1} 件 〜 {offset + length} 件を表示
+              {`全 ${total} 件中 ${offset + 1} 件 〜 ${
+                offset + length
+              } 件を表示`}
             </small>
           </div>
           <div class="v-data-table__controls__select-limit">

package/src/components/VDrawerLayout/VDrawerLayout.scss

@@ -1,10 +1,19 @@
 .v-drawer-layout {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
+  // display: flex;
+  // flex-direction: column;
+  // align-items: stretch;
+  display: block;
   width: 100%;
   height: 100%;
 
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+    height: 100%;
+  }
+
   &__header {
     display: flex;
     flex: 0 0 var(--v-app-layout-vertial-fixed-height);

package/src/components/VDrawerLayout/VDrawerLayout.tsx

@@ -17,6 +17,7 @@ export const VDrawerLayout = defineComponent({
       return (
         <VPaper
           class="v-drawer-layout"
+          innerClass="v-drawer-layout__inner"
           {...paperProps.value}
           square
           headerProps={{

package/src/components/VListTile/VListTile.scss

@@ -5,6 +5,7 @@
   --tile-text-active-color: var(--text-color);
   --tile-pin-color: transparent;
   --paper-link-color: var(--tile-text-color);
+  --depth-padding: var(--list-tile-padding);
 
   // &--has-color {
   //   --tile-text-color: var(--nav-color);
@@ -14,7 +15,8 @@
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 10px;
+  padding: var(--list-tile-padding);
+  padding-left: var(--depth-padding);
   color: var(--tile-text-color);
   text-align: left;
   text-decoration: none;

package/src/components/VNavigation/VNavigationItem.scss

@@ -11,4 +11,18 @@
       --tile-background: var(--tile-active-background);
     }
   }
+
+  &--depth {
+    &-1 {
+      --depth-padding: calc(var(--list-tile-padding) * 2);
+    }
+
+    &-2 {
+      --depth-padding: calc(var(--list-tile-padding) * 3);
+    }
+
+    &-3 {
+      --depth-padding: calc(var(--list-tile-padding) * 4);
+    }
+  }
 }

package/src/components/VNavigation/VNavigationItem.tsx

@@ -22,6 +22,11 @@ export function createNavigationItemProps() {
   return {
     ...createListTileProps(),
     match: String,
+    depth: {
+      type: Number,
+      default: 0,
+    },
+    nested: Boolean,
     // key: {
     //   type: [String, Number],
     //   required: true,
@@ -98,6 +103,7 @@ export const VNavigationItem = defineComponent({
     const classes = computed(() => [
       {
         'v-navigation-item--opened': opened.value,
+        [`v-navigation-item--depth-${props.depth}`]: props.depth > 0,
       },
     ]);
 
@@ -238,6 +244,7 @@ export const VNavigationItem = defineComponent({
                 {_children.map((child) =>
                   renderNavigationItemInput(child, {
                     startIconEmptySpace: _props.value.startIconEmptySpace,
+                    depth: props.nested ? props.depth + 1 : props.depth,
                     // onClick,
                     // onChangeActive,
                   }),

package/src/components/VPagination/VPagination.tsx

@@ -77,6 +77,7 @@ export const VPagination = defineComponent({
   props: paginationProps(),
   emits: {
     change: (page: number) => true,
+    'update:modelValue': (page: number) => true,
   },
   setup(props, ctx) {
     const vui = useVui();

package/src/components/VPaper/VPaper.scss

@@ -13,17 +13,23 @@
     --paper-link-color: var(--nav-color);
   }
 
+  display: block;
   color: var(--paper-text-color);
   background-color: var(--paper-background--color);
   border-radius: var(--paper-radius);
 
+  &__inner {
+    position: relative;
+    border-radius: inherit;
+  }
+
   &--square {
     --paper-radius: 0px;
   }
 
-  a {
-    color: var(--paper-link-color);
-  }
+  // a:not(.v-paper) {
+  //   color: var(--paper-link-color);
+  // }
 
   &__header {
     border-top-left-radius: inherit;

package/src/components/VPaper/VPaper.tsx

@@ -1,14 +1,19 @@
 import './VPaper.scss';
 import { defineComponent, computed, PropType, VNodeProps } from 'vue';
 import { createElevationProps, useElevation } from '../../composables';
-import { renderSlotOrEmpty, defineSlotsProps } from '@fastkit/vue-utils';
+import {
+  renderSlotOrEmpty,
+  defineSlotsProps,
+  htmlAttributesPropOptions,
+} from '@fastkit/vue-utils';
 import { useScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
 
 export function createPaperBaseProps() {
   return {
+    ...htmlAttributesPropOptions,
     color: String as PropType<ScopeName>,
     tag: {
-      type: String,
+      type: [String, Object] as PropType<any>,
       default: 'div',
     },
     ...defineSlotsProps<{
@@ -29,11 +34,13 @@ export function createPaperProps() {
     headerProps: Object as PropType<ARGS>,
     bodyProps: Object as PropType<ARGS>,
     footerProps: Object as PropType<ARGS>,
+    innerClass: [String, Array, Object] as PropType<any>,
   };
 }
 
 export const VPaper = defineComponent({
   name: 'VPaper',
+  inheritAttrs: false,
   props: createPaperProps(),
   setup(props, ctx) {
     const tag = computed(() => props.tag);
@@ -44,7 +51,7 @@ export const VPaper = defineComponent({
       scope.value.className,
       {
         'v-paper--plain': !scope.value.value,
-        'v-paper--has-color': !!scope.value.value,
+        'v-paper--has-color': !!scope.value.value || !!ctx.attrs.disabled,
         'v-paper--square': props.square,
       },
     ]);
@@ -57,20 +64,22 @@ export const VPaper = defineComponent({
       const header = renderSlotOrEmpty(ctx.slots, 'header');
       const footer = renderSlotOrEmpty(ctx.slots, 'footer');
       return (
-        <TagName class={['v-paper', classes.value]}>
-          {header && (
-            <div class="v-paper__header" {...headerProps.value}>
-              {header}
+        <TagName class={['v-paper', classes.value]} {...ctx.attrs}>
+          <div class={['v-paper__inner', props.innerClass]}>
+            {header && (
+              <div class="v-paper__header" {...headerProps.value}>
+                {header}
+              </div>
+            )}
+            <div class="v-paper__body" {...bodyProps.value}>
+              {renderSlotOrEmpty(ctx.slots, 'default')}
             </div>
-          )}
-          <div class="v-paper__body" {...bodyProps.value}>
-            {renderSlotOrEmpty(ctx.slots, 'default')}
+            {footer && (
+              <div class="v-paper__footer" {...footerProps.value}>
+                {footer}
+              </div>
+            )}
           </div>
-          {footer && (
-            <div class="v-paper__footer" {...footerProps.value}>
-              {footer}
-            </div>
-          )}
         </TagName>
       );
     };

package/src/styles/variables.scss

@@ -296,6 +296,11 @@
 
   // breadcrumbs
   --breadcrumbs-font-size: var(--typo-sm-size);
+
+  // =============================================
+  // tiles
+  // =============================================
+  --list-tile-padding: calc(var(--root-em) * 0.625);
 }
 
 :root,