@fastkit/vui 0.6.14 → 0.6.18

package/dist/vui.cjs.prod.js

@@ -8,6 +8,7 @@ var vueColorScheme = require('@fastkit/vue-color-scheme');
 var vueUtils = require('@fastkit/vue-utils');
 var vueLoading = require('@fastkit/vue-loading');
 var iconFont = require('@fastkit/icon-font');
+var vueRouter = require('vue-router');
 
 const CONTROL_SIZES = ['sm', 'md', 'lg'];
 const CONTROL_FIELD_VARIANTS = ['outlined', 'filled', 'flat'];
@@ -253,16 +254,24 @@ function useElevation(props, opts = {}) {
     };
 }
 
-function createPaperProps() {
-  return { ...createElevationProps(),
-    square: Boolean,
+function createPaperBaseProps() {
+  return {
     color: String,
     tag: {
       type: String,
       default: 'div'
     },
     ...vueUtils.defineSlotsProps()
-  }; //
+  };
+}
+function createPaperProps() {
+  return { ...createElevationProps(),
+    ...createPaperBaseProps(),
+    square: Boolean,
+    headerProps: Object,
+    bodyProps: Object,
+    footerProps: Object
+  };
 }
 const VPaper = vue.defineComponent({
   name: 'VPaper',
@@ -279,6 +288,9 @@ const VPaper = vue.defineComponent({
       'v-paper--has-color': !!scope.value.value,
       'v-paper--square': props.square
     }]);
+    const headerProps = vue.computed(() => props.headerProps);
+    const bodyProps = vue.computed(() => props.bodyProps);
+    const footerProps = vue.computed(() => props.footerProps);
     return () => {
       const TagName = tag.value;
       const header = vueUtils.renderSlotOrEmpty(ctx.slots, 'header');
@@ -286,13 +298,13 @@ const VPaper = vue.defineComponent({
       return vue.createVNode(TagName, {
         "class": ['v-paper', classes.value]
       }, {
-        default: () => [header && vue.createVNode("div", {
+        default: () => [header && vue.createVNode("div", vue.mergeProps({
           "class": "v-paper__header"
-        }, [header]), vue.createVNode("div", {
+        }, headerProps.value), [header]), vue.createVNode("div", vue.mergeProps({
           "class": "v-paper__body"
-        }, [vueUtils.renderSlotOrEmpty(ctx.slots, 'default')]), footer && vue.createVNode("div", {
+        }, bodyProps.value), [vueUtils.renderSlotOrEmpty(ctx.slots, 'default')]), footer && vue.createVNode("div", vue.mergeProps({
           "class": "v-paper__footer"
-        }, [footer])]
+        }, footerProps.value), [footer])]
       });
     };
   }
@@ -345,13 +357,27 @@ const VCardActions = vue.defineComponent({
 
 });
 
-const _rawRawIconProp = [String, Function];
-function rawRawIconProp() {
-  return _rawRawIconProp;
+//   prop: RawIconProp<T>,
+//   payload: () => T,
+// ): RawIconProp {
+//   if (!prop || typeof prop !== 'function') {
+//     return prop;
+//   }
+//   const fn = (gen: IconGenerator): VNodeChild => {
+//     const t = payload();
+//     return prop(gen, t);
+//   };
+//   return fn;
+// }
+// export const rawRawIconProp = [String, Function] as PropType<RawIconProp>;
+
+const _rawIconProp = [String, Function];
+function rawIconProp() {
+  return _rawIconProp;
 }
-function resolveRawIconProp(prop, extraProps) {
+function resolveRawIconProp(payload, prop, extraProps) {
   if (!prop) return;
-  return typeof prop === 'function' ? prop(input => vue.createVNode(VIcon, vue.mergeProps(input, extraProps), null)) : vue.createVNode(VIcon, vue.mergeProps(extraProps, {
+  return typeof prop === 'function' ? prop(input => vue.createVNode(VIcon, vue.mergeProps(input, extraProps), null), payload) : vue.createVNode(VIcon, vue.mergeProps(extraProps, {
     "name": prop
   }), null);
 }
@@ -422,7 +448,7 @@ const LOADING_SIZE_MAP = {
 const VButton = vue.defineComponent({
   name: 'VButton',
   props: vueButtonProps,
-  emits: { ...vueUtils.navigationableEmits.emits
+  emits: { ...vueUtils.navigationableEmits
   },
 
   setup(props, ctx) {
@@ -506,17 +532,22 @@ const VButton = vue.defineComponent({
 });
 
 function createListTileProps() {
-  const icon = rawRawIconProp();
-  return vueUtils.createPropsOptions({ ...vueUtils.navigationableProps,
-    startIcon: icon,
-    endIcon: icon,
-    fallbackTag: {
-      type: String,
-      default: 'div'
-    }
-  });
+  const icon = rawIconProp();
+  return { ...vueUtils.navigationableProps,
+    ...vueUtils.createPropsOptions({
+      startIcon: icon,
+      endIcon: icon,
+      fallbackTag: {
+        type: String,
+        default: 'div'
+      },
+      startIconEmptySpace: Boolean,
+      color: String
+    })
+  };
 }
-const listTileEmits = { ...vueUtils.navigationableEmits.emits
+const listTileEmits = { ...vueUtils.navigationableEmits,
+  changeActive: isActive => true
 };
 const VListTile = vue.defineComponent({
   name: 'VListTile',
@@ -525,20 +556,57 @@ const VListTile = vue.defineComponent({
   },
 
   setup(props, ctx) {
-    const startIcon = vue.computed(() => resolveRawIconProp(props.startIcon));
-    const endIcon = vue.computed(() => resolveRawIconProp(props.endIcon));
-    const navigationable = vueUtils.useNavigationable(props, () => props.fallbackTag);
+    const startIcon = vue.computed(() => {
+      let icon = resolveRawIconProp(false, props.startIcon);
+
+      if (!icon && props.startIconEmptySpace) {
+        icon = resolveRawIconProp(false, '$empty');
+      }
+
+      return icon;
+    });
+    const endIcon = vue.computed(() => resolveRawIconProp(false, props.endIcon));
+    const navigationable = vueUtils.useNavigationable(props, () => props.fallbackTag, ctx);
+    const hasTo = vue.computed(() => !!props.to);
+    const link = vueRouter.useLink({
+      to: props.to || ''
+    });
+    const isActive = vue.computed(() => {
+      if (!hasTo.value) return false;
+      return link.isActive.value;
+    });
+    const color = vueColorScheme.useScopeColorClass(props);
+    const classes = vue.computed(() => {
+      const _color = color.value;
+      const hasColor = !!_color.value;
+      const _navigationable = navigationable.value;
+      const clickable = _navigationable.clickable;
+      return [color.value.className, _navigationable.classes, {
+        'v-list-tile--clickable': clickable,
+        'v-list-tile--plain': !hasColor,
+        'v-list-tile--has-color': hasColor,
+        'v-list-tile--active': isActive.value
+      }];
+    });
+    vue.watch(() => isActive.value, isActive => {
+      ctx.emit('changeActive', isActive);
+    }, {
+      immediate: true
+    });
     return () => {
       const _startIcon = startIcon.value;
       const _endIcon = endIcon.value;
       const {
         Tag,
-        attrs,
-        classes
+        attrs
       } = navigationable.value;
       return vue.createVNode(Tag, vue.mergeProps({
-        "class": ['v-list-tile', classes]
-      }, attrs), {
+        "class": ['v-list-tile', classes.value]
+      }, attrs, {
+        "onClick": ev => {
+          ctx.emit('click', ev);
+        }
+      }), {
         default: () => [_startIcon && vue.createVNode("span", {
           "class": "v-list-tile__icon v-list-tile__icon--start"
         }, [_startIcon]), vue.createVNode("span", {
@@ -552,81 +620,260 @@ const VListTile = vue.defineComponent({
 
 });
 
-const VAccordion = vue.defineComponent({
-  name: 'VAccordion'
+const VDrawerLayout = vue.defineComponent({
+  name: 'VDrawerLayout',
+  props: { ...createPaperBaseProps()
+  },
+
+  setup(props, ctx) {
+    return () => {
+      const paperProps = vue.computed(() => ({
+        color: props.color,
+        tag: props.tag
+      }));
+      return vue.createVNode(VPaper, vue.mergeProps({
+        "class": "v-drawer-layout"
+      }, paperProps.value, {
+        "square": true,
+        "headerProps": {
+          class: 'v-drawer-layout__header'
+        },
+        "bodyProps": {
+          class: 'v-drawer-layout__body'
+        },
+        "footerProps": {
+          class: 'v-drawer-layout__footer'
+        }
+      }), ctx.slots);
+    };
+  }
+
 });
 
-function _isSlot$6(s) {
+function _isSlot$5(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
 function createNavigationItemProps() {
-  return { ...createListTileProps()
+  return { ...createListTileProps(),
+    match: String
   };
 }
+function resolveNavigationItemInput(input) {
+  let label = input.label;
+  const props = { ...input
+  };
+
+  if (typeof label === 'function') {
+    label = label();
+  }
+
+  delete props.label;
+  return {
+    label,
+    props
+  };
+}
+function renderNavigationItemInput(input, extraProps) {
+  const {
+    label,
+    props
+  } = resolveNavigationItemInput(input);
+  return vue.createVNode(VNavigationItem, { ...props,
+    ...extraProps
+  }, _isSlot$5(label) ? label : {
+    default: () => [label]
+  });
+}
 const VNavigationItem = vue.defineComponent({
   name: 'VNavigationItem',
-  props: createNavigationItemProps(),
+  inheritAttrs: false,
+  props: { ...createNavigationItemProps(),
+    children: Array
+  },
   emits: { ...listTileEmits
   },
 
   setup(props, ctx) {
-    const _props = vue.computed(() => ({ ...props
-    }));
+    const vui = useVui();
+    const opened = vue.ref(false);
+    const children = vue.computed(() => {
+      const c = props.children;
+      return c && c.length ? c : undefined;
+    });
+    const to = vue.computed(() => props.to);
+    const match = vue.computed(() => {
+      const {
+        match,
+        to
+      } = props;
+      if (match) return match;
+      if (!to) return;
+      if (typeof to === 'string') return to;
+      return to.path;
+    });
+    const classes = vue.computed(() => [{
+      'v-navigation-item--opened': opened.value
+    }]);
+    const route = vueRouter.useRoute(); // const classes = computed(() => [
+    //   // {
+    //   //   'v-navigation-item--matched': matched.value,
+    //   // },
+    // ]);
+
+    vue.watch(() => route.path, newPath => {
+      const c = children.value;
+      const m = match.value;
+
+      if (!c || !m) {
+        // matched.value = false;
+        return;
+      }
+
+      if (newPath.match(m)) {
+        open(); // matched.value = true;
+      } else {
+        close(); // matched.value = false;
+      }
+    }, {
+      immediate: true
+    }); // const iconPayload = () => opened.value;
+
+    const _props = vue.computed(() => {
+      const c = children.value;
+      let {
+        endIcon
+      } = props;
+
+      if (c && !endIcon) {
+        endIcon = vui.icon('navigationExpand');
+
+        if (typeof endIcon === 'string') {
+          const name = endIcon;
+
+          endIcon = gen => {
+            return gen({
+              name,
+              rotate: opened.value ? 180 : 0
+            });
+          };
+        }
+      }
+
+      const __props = { ...props,
+        endIcon
+      };
+      delete __props.children; // const _activeClass = props.activeClass;
+      // const activeClass = `v-navigation-item--active${
+      //   _activeClass ? ` ${_activeClass}` : ''
+      // }`;
+
+      return { ...__props // activeClass,
+        // startIcon: toRawIconProp(__props.startIcon, iconPayload),
+        // endIcon: toRawIconProp(__props.endIcon, iconPayload),
+
+      };
+    });
+
+    function open() {
+      opened.value = true;
+    }
+
+    function close() {
+      opened.value = false;
+    }
+
+    function toggle() {
+      return opened.value ? close() : open();
+    }
+
+    const onClick = ev => {
+      if (!to.value) {
+        toggle();
+      }
+
+      ctx.emit('click', ev);
+    };
+
+    const onChangeActive = isActive => {
+      // if (isActive) {
+      //   // open();
+      //   // if (typeof window !== 'undefined') {
+      //   //   // open();
+      //   //   // console.log('hoge', window);
+      //   //   setTimeout(() => {
+      //   //     open();
+      //   //   }, 1000);
+      //   // }
+      //   // open();
+      //   // console.log(props);
+      //   // setTimeout(() => {
+      //   //   open();
+      //   // }, 500);
+      // }
+      ctx.emit('changeActive', isActive);
+    };
 
     return () => {
       let _slot;
 
-      return vue.createVNode(VListTile, vue.mergeProps(_props.value, {
-        "class": "v-navigation-item"
-      }), _isSlot$6(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
+      const _children = children.value;
+      const fallbackTag = _children ? 'button' : undefined;
+      return vue.createVNode(vue.Fragment, null, [vue.createVNode(VListTile, vue.mergeProps(_props.value, {
+        "fallbackTag": fallbackTag,
+        "endIcon": _props.value.endIcon,
+        "class": ['v-navigation-item', classes.value],
+        "onClick": onClick,
+        "onChangeActive": onChangeActive
+      }), _isSlot$5(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
         default: () => [_slot]
-      });
+      }), _children && vue.createVNode(vueUtils.VExpandTransition, null, {
+        default: () => [vue.withDirectives(vue.createVNode("div", {
+          "class": "v-navigation-item__expand"
+        }, [_children.map(child => renderNavigationItemInput(child, {
+          startIconEmptySpace: _props.value.startIconEmptySpace // onClick,
+          // onChangeActive,
+
+        }))]), [[vue.vShow, opened.value]])]
+      })]);
     };
   }
 
 });
 
-function _isSlot$5(s) {
-  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
-}
-
 const VNavigation = vue.defineComponent({
   name: 'VNavigation',
   props: {
     items: {
       type: Array,
       required: true
-    }
+    },
+    color: String,
+    startIconEmptySpace: {
+      type: Boolean,
+      default: true
+    },
+    caption: [String, Function]
   },
 
   setup(props, ctx) {
     const items = vue.computed(() => props.items);
-    const $items = vue.computed(() => items.value.map(item => {
-      let label = item.label;
-      const _props = { ...item
-      };
-
-      if (typeof label === 'function') {
-        label = label();
-      }
-
-      delete _props.label;
-      return {
-        label,
-        props: _props
-      };
-    }));
+    const color = vueColorScheme.useScopeColorClass(props);
+    const classes = vue.computed(() => [color.value.className]);
+    const startIconEmptySpace = vue.computed(() => props.startIconEmptySpace);
+    const caption = vue.computed(() => {
+      const c = props.caption;
+      return typeof c === 'function' ? c() : c;
+    });
     return () => {
+      const $caption = caption.value;
       return vue.createVNode("nav", {
-        "class": "v-navigation"
-      }, [$items.value.map(({
-        label,
-        props
-      }) => vue.createVNode(VNavigationItem, vue.mergeProps(props, {
-        "class": "v-navigation__item"
-      }), _isSlot$5(label) ? label : {
-        default: () => [label]
+        "class": ['v-navigation', classes.value]
+      }, [!!$caption && vue.createVNode("div", {
+        "class": "v-navigation__caption"
+      }, [$caption]), items.value.map(item => renderNavigationItemInput(item, {
+        class: 'v-navigation__item',
+        startIconEmptySpace: startIconEmptySpace.value
       }))]);
     };
   }
@@ -1622,7 +1869,6 @@ exports.VSnackbar = vueKit.VSnackbar;
 exports.ICON_NAMES = iconFont.ICON_NAMES;
 exports.CONTROL_FIELD_VARIANTS = CONTROL_FIELD_VARIANTS;
 exports.CONTROL_SIZES = CONTROL_SIZES;
-exports.VAccordion = VAccordion;
 exports.VApp = VApp;
 exports.VButton = VButton;
 exports.VCard = VCard;
@@ -1630,6 +1876,7 @@ exports.VCardActions = VCardActions;
 exports.VCardContent = VCardContent;
 exports.VCheckbox = VCheckbox;
 exports.VCheckboxGroup = VCheckboxGroup;
+exports.VDrawerLayout = VDrawerLayout;
 exports.VForm = VForm;
 exports.VIcon = VIcon;
 exports.VListTile = VListTile;
@@ -1671,12 +1918,15 @@ exports.createControlProps = createControlProps;
 exports.createElevationProps = createElevationProps;
 exports.createListTileProps = createListTileProps;
 exports.createNavigationItemProps = createNavigationItemProps;
+exports.createPaperBaseProps = createPaperBaseProps;
 exports.createPaperProps = createPaperProps;
 exports.defineFormSelectorComponent = defineFormSelectorComponent;
 exports.iconProps = iconProps;
 exports.installVuiPlugin = installVuiPlugin;
 exports.listTileEmits = listTileEmits;
-exports.rawRawIconProp = rawRawIconProp;
+exports.rawIconProp = rawIconProp;
+exports.renderNavigationItemInput = renderNavigationItemInput;
+exports.resolveNavigationItemInput = resolveNavigationItemInput;
 exports.resolveRawIconProp = resolveRawIconProp;
 exports.useControl = useControl;
 exports.useControlField = useControlField;

package/dist/vui.css

@@ -923,22 +923,44 @@ h6,
   transform: translate(-50%, -50%);
 }
 .v-list-tile {
+  --tile-background: var(--main-color, transparent);
+  --tile-active-background: var(--deep-color, transparent);
+  --tile-text-color: var(--text-color);
+  --tile-text-active-color: var(--text-color);
+  --tile-pin-color: transparent;
+  --paper-link-color: var(--tile-text-color);
   display: flex;
   align-items: center;
   width: 100%;
   padding: 10px;
-  color: inherit;
+  color: var(--tile-text-color);
   text-align: left;
   text-decoration: none;
-  background: transparent;
+  user-select: none;
+  background: var(--tile-background);
   border: 0;
-  border-left: 3px solid transparent;
+  border-left: 3px solid var(--tile-pin-color);
   border-radius: 0;
   outline: 0;
+  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   appearance: none;
 }
+.v-list-tile--clickable {
+  cursor: pointer;
+  --tile-text-color: var(--nav-color);
+  --tile-text-active-color: var(--navActive-color, var(--nav-color));
+}
+.v-list-tile--clickable:hover, .v-list-tile--clickable:focus {
+  --tile-background: var(--tile-active-background);
+  --tile-text-color: var(--tile-text-active-color);
+}
+.v-list-tile--active {
+  --tile-pin-color: var(--pin-color);
+  --tile-text-color: var(--tile-text-active-color);
+  --tile-background: var(--tile-active-background);
+}
 .v-list-tile__body {
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
   font-weight: 500;
   line-height: 1.5;
 }
@@ -949,8 +971,46 @@ h6,
   margin-left: auto;
   text-align: right;
 }
-
-
+.v-drawer-layout {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  height: 100%;
+}
+.v-drawer-layout__header {
+  display: flex;
+  flex: 0 0 var(--v-app-layout-vertial-fixed-height);
+  align-items: center;
+  justify-content: center;
+  height: var(--v-app-layout-vertial-fixed-height);
+}
+.v-drawer-layout__body {
+  flex: 1 1 100%;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.v-drawer-layout__footer {
+  flex: 0 0 auto;
+  margin-top: auto;
+}
+.v-navigation-item--opened {
+  --tile-background: var(--tile-active-background);
+}
+.v-navigation-item__expand {
+  transition: height 0.2s;
+}
+.v-navigation-item__expand .v-navigation-item {
+  --tile-background: var(--tile-active-background);
+}
+.v-navigation__caption {
+  display: block;
+  padding: calc(var(--root-em) * 0.625) calc(var(--root-em) * 1.5625);
+  margin: 1em 0 0;
+  font-size: 0.75rem;
+  color: var(--caption-color);
+  text-transform: uppercase;
+}
 .v-checkbox {
   --my-border-color: var(--color);
   --my-faux-bg-color: transparent;