@fastkit/vui 0.6.44 → 0.7.0

package/dist/vui.cjs.js

@@ -439,10 +439,10 @@ const VGridContainer = vue.defineComponent({
 });
 
 function createPaperBaseProps() {
-  return {
+  return { ...vueUtils.htmlAttributesPropOptions,
     color: String,
     tag: {
-      type: String,
+      type: [String, Object],
       default: 'div'
     },
     ...vueUtils.defineSlotsProps()
@@ -454,11 +454,13 @@ function createPaperProps() {
     square: Boolean,
     headerProps: Object,
     bodyProps: Object,
-    footerProps: Object
+    footerProps: Object,
+    innerClass: [String, Array, Object]
   };
 }
 const VPaper = vue.defineComponent({
   name: 'VPaper',
+  inheritAttrs: false,
   props: createPaperProps(),
 
   setup(props, ctx) {
@@ -469,7 +471,7 @@ const VPaper = vue.defineComponent({
     const scope = vueColorScheme.useScopeColorClass(props);
     const classes = vue.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 = vue.computed(() => props.headerProps);
@@ -479,16 +481,18 @@ const VPaper = vue.defineComponent({
       const TagName = tag.value;
       const header = vueUtils.renderSlotOrEmpty(ctx.slots, 'header');
       const footer = vueUtils.renderSlotOrEmpty(ctx.slots, 'footer');
-      return vue.createVNode(TagName, {
+      return vue.createVNode(TagName, vue.mergeProps({
         "class": ['v-paper', classes.value]
-      }, {
-        default: () => [header && vue.createVNode("div", vue.mergeProps({
+      }, ctx.attrs), {
+        default: () => [vue.createVNode("div", {
+          "class": ['v-paper__inner', props.innerClass]
+        }, [header && vue.createVNode("div", vue.mergeProps({
           "class": "v-paper__header"
         }, headerProps.value), [header]), vue.createVNode("div", vue.mergeProps({
           "class": "v-paper__body"
         }, bodyProps.value), [vueUtils.renderSlotOrEmpty(ctx.slots, 'default')]), footer && vue.createVNode("div", vue.mergeProps({
           "class": "v-paper__footer"
-        }, footerProps.value), [footer])]
+        }, footerProps.value), [footer])])]
       });
     };
   }
@@ -496,20 +500,42 @@ const VPaper = vue.defineComponent({
 });
 
 function createCardProps() {
-  return { ...createPaperProps()
+  return { ...createPaperProps(),
+    ...vueUtils.navigationableInheritProps,
+    disabled: Boolean
   };
 }
 const VCard = vue.defineComponent({
   name: 'VCard',
+  inheritAttrs: false,
   props: createCardProps(),
 
   setup(props, ctx) {
     const _props = vue.computed(() => props);
 
+    const data = vue.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 ? vueUtils.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 vue.createVNode(VPaper, vue.mergeProps({
-        "class": "v-card"
-      }, _props.value), ctx.slots);
+      return vue.createVNode(VPaper, data.value.attrs, ctx.slots);
     };
   }
 
@@ -801,7 +827,8 @@ const VPagination = vue.defineComponent({
   name: 'VPagination',
   props: paginationProps(),
   emits: {
-    change: page => true
+    change: page => true,
+    'update:modelValue': page => true
   },
 
   setup(props, ctx) {
@@ -1136,7 +1163,8 @@ const VDrawerLayout = vue.defineComponent({
         tag: props.tag
       }));
       return vue.createVNode(VPaper, vue.mergeProps({
-        "class": "v-drawer-layout"
+        "class": "v-drawer-layout",
+        "innerClass": "v-drawer-layout__inner"
       }, paperProps.value, {
         "square": true,
         "headerProps": {
@@ -1209,7 +1237,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,
     // },
@@ -1272,7 +1305,8 @@ const VNavigationItem = vue.defineComponent({
       return to.path;
     });
     const classes = vue.computed(() => [{
-      'v-navigation-item--opened': opened.value
+      'v-navigation-item--opened': opened.value,
+      [`v-navigation-item--depth-${props.depth}`]: props.depth > 0
     }]);
     const route = vueRouter.useRoute(); // const classes = computed(() => [
     //   // {
@@ -1397,7 +1431,8 @@ const VNavigationItem = vue.defineComponent({
         default: () => [vue.withDirectives(vue.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,
 
         }))]), [[vue.vShow, opened.value]])]
@@ -3622,7 +3657,7 @@ const VDataTable = vue.defineComponent({
         "class": "v-data-table__controls__info"
       }, [vue.createVNode("small", {
         "class": "v-data-table__controls__info__length"
-      }, [vue.createTextVNode("\u5168 "), total, vue.createTextVNode(" \u4EF6\u4E2D "), offset + 1, vue.createTextVNode(" \u4EF6 \u301C "), offset + length, vue.createTextVNode(" \u4EF6\u3092\u8868\u793A")])]), vue.createVNode("div", {
+      }, [`全 ${total} 件中 ${offset + 1} 件 〜 ${offset + length} 件を表示`])]), vue.createVNode("div", {
         "class": "v-data-table__controls__select-limit"
       }, [vue.createVNode("span", {
         "class": "v-data-table__controls__select-limit__prefix"

package/dist/vui.cjs.prod.js

@@ -439,10 +439,10 @@ const VGridContainer = vue.defineComponent({
 });
 
 function createPaperBaseProps() {
-  return {
+  return { ...vueUtils.htmlAttributesPropOptions,
     color: String,
     tag: {
-      type: String,
+      type: [String, Object],
       default: 'div'
     },
     ...vueUtils.defineSlotsProps()
@@ -454,11 +454,13 @@ function createPaperProps() {
     square: Boolean,
     headerProps: Object,
     bodyProps: Object,
-    footerProps: Object
+    footerProps: Object,
+    innerClass: [String, Array, Object]
   };
 }
 const VPaper = vue.defineComponent({
   name: 'VPaper',
+  inheritAttrs: false,
   props: createPaperProps(),
 
   setup(props, ctx) {
@@ -469,7 +471,7 @@ const VPaper = vue.defineComponent({
     const scope = vueColorScheme.useScopeColorClass(props);
     const classes = vue.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 = vue.computed(() => props.headerProps);
@@ -479,16 +481,18 @@ const VPaper = vue.defineComponent({
       const TagName = tag.value;
       const header = vueUtils.renderSlotOrEmpty(ctx.slots, 'header');
       const footer = vueUtils.renderSlotOrEmpty(ctx.slots, 'footer');
-      return vue.createVNode(TagName, {
+      return vue.createVNode(TagName, vue.mergeProps({
         "class": ['v-paper', classes.value]
-      }, {
-        default: () => [header && vue.createVNode("div", vue.mergeProps({
+      }, ctx.attrs), {
+        default: () => [vue.createVNode("div", {
+          "class": ['v-paper__inner', props.innerClass]
+        }, [header && vue.createVNode("div", vue.mergeProps({
           "class": "v-paper__header"
         }, headerProps.value), [header]), vue.createVNode("div", vue.mergeProps({
           "class": "v-paper__body"
         }, bodyProps.value), [vueUtils.renderSlotOrEmpty(ctx.slots, 'default')]), footer && vue.createVNode("div", vue.mergeProps({
           "class": "v-paper__footer"
-        }, footerProps.value), [footer])]
+        }, footerProps.value), [footer])])]
       });
     };
   }
@@ -496,20 +500,42 @@ const VPaper = vue.defineComponent({
 });
 
 function createCardProps() {
-  return { ...createPaperProps()
+  return { ...createPaperProps(),
+    ...vueUtils.navigationableInheritProps,
+    disabled: Boolean
   };
 }
 const VCard = vue.defineComponent({
   name: 'VCard',
+  inheritAttrs: false,
   props: createCardProps(),
 
   setup(props, ctx) {
     const _props = vue.computed(() => props);
 
+    const data = vue.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 ? vueUtils.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 vue.createVNode(VPaper, vue.mergeProps({
-        "class": "v-card"
-      }, _props.value), ctx.slots);
+      return vue.createVNode(VPaper, data.value.attrs, ctx.slots);
     };
   }
 
@@ -801,7 +827,8 @@ const VPagination = vue.defineComponent({
   name: 'VPagination',
   props: paginationProps(),
   emits: {
-    change: page => true
+    change: page => true,
+    'update:modelValue': page => true
   },
 
   setup(props, ctx) {
@@ -1136,7 +1163,8 @@ const VDrawerLayout = vue.defineComponent({
         tag: props.tag
       }));
       return vue.createVNode(VPaper, vue.mergeProps({
-        "class": "v-drawer-layout"
+        "class": "v-drawer-layout",
+        "innerClass": "v-drawer-layout__inner"
       }, paperProps.value, {
         "square": true,
         "headerProps": {
@@ -1209,7 +1237,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,
     // },
@@ -1272,7 +1305,8 @@ const VNavigationItem = vue.defineComponent({
       return to.path;
     });
     const classes = vue.computed(() => [{
-      'v-navigation-item--opened': opened.value
+      'v-navigation-item--opened': opened.value,
+      [`v-navigation-item--depth-${props.depth}`]: props.depth > 0
     }]);
     const route = vueRouter.useRoute(); // const classes = computed(() => [
     //   // {
@@ -1397,7 +1431,8 @@ const VNavigationItem = vue.defineComponent({
         default: () => [vue.withDirectives(vue.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,
 
         }))]), [[vue.vShow, opened.value]])]
@@ -3622,7 +3657,7 @@ const VDataTable = vue.defineComponent({
         "class": "v-data-table__controls__info"
       }, [vue.createVNode("small", {
         "class": "v-data-table__controls__info__length"
-      }, [vue.createTextVNode("\u5168 "), total, vue.createTextVNode(" \u4EF6\u4E2D "), offset + 1, vue.createTextVNode(" \u4EF6 \u301C "), offset + length, vue.createTextVNode(" \u4EF6\u3092\u8868\u793A")])]), vue.createVNode("div", {
+      }, [`全 ${total} 件中 ${offset + 1} 件 〜 ${offset + length} 件を表示`])]), vue.createVNode("div", {
         "class": "v-data-table__controls__select-limit"
       }, [vue.createVNode("span", {
         "class": "v-data-table__controls__select-limit__prefix"

package/dist/vui.css

@@ -551,6 +551,7 @@ template {
   --tabs-bar-height: calc(var(--root-em) * 0.375);
   --tabs-font-size: calc(var(--root-em) * 0.875);
   --breadcrumbs-font-size: var(--typo-sm-size);
+  --list-tile-padding: calc(var(--root-em) * 0.625);
 }
 
 :root,
@@ -898,6 +899,7 @@ thead th {
 }
 .v-paper {
   --paper-radius: var(--control-field-radius);
+  display: block;
   color: var(--paper-text-color);
   background-color: var(--paper-background--color);
   border-radius: var(--paper-radius);
@@ -912,12 +914,13 @@ thead th {
   --paper-text-color: var(--text-color);
   --paper-link-color: var(--nav-color);
 }
+.v-paper__inner {
+  position: relative;
+  border-radius: inherit;
+}
 .v-paper--square {
   --paper-radius: 0px;
 }
-.v-paper a {
-  color: var(--paper-link-color);
-}
 .v-paper__header {
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
@@ -926,7 +929,48 @@ thead th {
   border-bottom-right-radius: inherit;
   border-bottom-left-radius: inherit;
 }
-
+.v-card {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  position: relative;
+  width: 100%;
+  padding: 0;
+  text-align: left;
+  touch-action: manipulation;
+  user-select: none;
+  border: 0;
+  outline: 0;
+  appearance: none;
+}
+.v-card::-moz-focus-inner {
+  border: 0;
+}
+.v-card, .v-card:hover, .v-card:focus {
+  text-decoration: none;
+}
+.v-card.clickable {
+  cursor: pointer;
+}
+.v-card.clickable::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);
+}
+.v-card.clickable:hover::before, .v-card.clickable:focus::before {
+  opacity: 0.125;
+}
+.v-card[disabled] {
+  pointer-events: none;
+}
+.v-card[disabled]::before {
+  content: none;
+}
 .v-card-content {
   padding: var(--card-content-padding);
 }
@@ -1178,10 +1222,12 @@ thead th {
   --tile-text-active-color: var(--text-color);
   --tile-pin-color: transparent;
   --paper-link-color: var(--tile-text-color);
+  --depth-padding: var(--list-tile-padding);
   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;
@@ -1221,6 +1267,11 @@ thead th {
   text-align: right;
 }
 .v-drawer-layout {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.v-drawer-layout__inner {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1276,6 +1327,15 @@ thead th {
 .v-navigation-item__expand .v-navigation-item {
   --tile-background: var(--tile-active-background);
 }
+.v-navigation-item--depth-1 {
+  --depth-padding: calc(var(--list-tile-padding) * 2);
+}
+.v-navigation-item--depth-2 {
+  --depth-padding: calc(var(--list-tile-padding) * 3);
+}
+.v-navigation-item--depth-3 {
+  --depth-padding: calc(var(--list-tile-padding) * 4);
+}
 .v-navigation__caption {
   display: block;
   padding: calc(var(--root-em) * 0.625) calc(var(--root-em) * 1.5625);