@fastkit/vui 0.6.28 → 0.6.30

package/dist/tool/index.js

@@ -26,6 +26,7 @@ const TEMPLATE = `
 import '@fastkit/vue-stack/dist/vue-stack.css';
 import '@fastkit/vue-app-layout/dist/vue-app-layout.css';
 import '@fastkit/vue-loading/dist/vue-loading.css';
+import '@fastkit/vue-scroller/dist/vue-scroller.css';
 import '@fastkit/vui/dist/vui.css';
 <% } %>
 import './setup.scss';
@@ -94,6 +95,9 @@ function viteVuiPlugin(options = {}) {
             color: 'base',
             variant: 'contained',
         },
+        tabDefault: {
+            color: 'accent',
+        },
         dialogOk: {
             color: 'primary',
         },

package/dist/tool/vite-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vite-plugin.d.ts","sourceRoot":"","sources":["../../../../../../../packages/vui/src/tool/vite-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAK9B,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAqF/C,MAAM,WAAW,oBACf,SAAQ,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,GAAG,CAAC;IACpC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAGD,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC;IACvD,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,2BAA2B,CAAC;IACtC,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,EAAE,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,aAAa,CAC3B,OAAO,GAAE,oBAAyB,GACjC,mBAAmB,CA0IrB"}
+{"version":3,"file":"vite-plugin.d.ts","sourceRoot":"","sources":["../../../../../../../packages/vui/src/tool/vite-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAK9B,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAsF/C,MAAM,WAAW,oBACf,SAAQ,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,GAAG,CAAC;IACpC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAGD,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC;IACvD,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,2BAA2B,CAAC;IACtC,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,EAAE,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,aAAa,CAC3B,OAAO,GAAE,oBAAyB,GACjC,mBAAmB,CA6IrB"}

package/dist/vui.cjs.js

@@ -11,6 +11,7 @@ var iconFont = require('@fastkit/icon-font');
 var helpers = require('@fastkit/helpers');
 var vueRouter = require('vue-router');
 var vueAppLayout = require('@fastkit/vue-app-layout');
+var vueScroller = require('@fastkit/vue-scroller');
 
 const CONTROL_SIZES = ['sm', 'md', 'lg'];
 const CONTROL_FIELD_VARIANTS = ['outlined', 'filled', 'flat'];
@@ -534,7 +535,7 @@ const VButton = vue.defineComponent({
 
 });
 
-function _isSlot$8(s) {
+function _isSlot$b(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -782,7 +783,7 @@ const VPagination = vue.defineComponent({
           "class": classes,
           "to": to,
           "key": key
-        }, _isSlot$8(children) ? children : {
+        }, _isSlot$b(children) ? children : {
           default: () => [children]
         });
       } else {
@@ -947,7 +948,7 @@ const VDrawerLayout = vue.defineComponent({
 
 });
 
-function _isSlot$7(s) {
+function _isSlot$a(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -982,7 +983,7 @@ const VHero = vue.defineComponent({
         }, {
           default: () => [vue.createVNode(HTagName, {
             "class": "v-hero__title"
-          }, _isSlot$7(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
+          }, _isSlot$a(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
             default: () => [_slot]
           })]
         })]
@@ -992,7 +993,7 @@ const VHero = vue.defineComponent({
 
 });
 
-function _isSlot$6(s) {
+function _isSlot$9(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -1023,7 +1024,7 @@ function renderNavigationItemInput(input, extraProps) {
   } = resolveNavigationItemInput(input);
   return vue.createVNode(VNavigationItem, { ...props,
     ...extraProps
-  }, _isSlot$6(label) ? label : {
+  }, _isSlot$9(label) ? label : {
     default: () => [label]
   });
 }
@@ -1167,7 +1168,7 @@ const VNavigationItem = vue.defineComponent({
         "class": ['v-navigation-item', classes.value],
         "onClick": onClick,
         "onChangeActive": onChangeActive
-      }), _isSlot$6(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
+      }), _isSlot$9(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
         default: () => [_slot]
       }), _children && vue.createVNode(vueUtils.VExpandTransition, null, {
         default: () => [vue.withDirectives(vue.createVNode("div", {
@@ -1315,7 +1316,7 @@ const VCheckbox = vue.defineComponent({
 
 });
 
-function _isSlot$5(s) {
+function _isSlot$8(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -1327,7 +1328,7 @@ const VCheckboxGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => vue.createVNode(VCheckbox, attrs, _isSlot$5(slots) ? slots : {
+  }) => vue.createVNode(VCheckbox, attrs, _isSlot$8(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -1379,7 +1380,7 @@ const VRadio = vue.defineComponent({
 
 });
 
-function _isSlot$4(s) {
+function _isSlot$7(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -1390,7 +1391,7 @@ const VRadioGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => vue.createVNode(VRadio, attrs, _isSlot$4(slots) ? slots : {
+  }) => vue.createVNode(VRadio, attrs, _isSlot$7(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -1452,7 +1453,7 @@ const VSwitch = vue.defineComponent({
 
 });
 
-function _isSlot$3(s) {
+function _isSlot$6(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -1464,7 +1465,7 @@ const VSwitchGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => vue.createVNode(VSwitch, attrs, _isSlot$3(slots) ? slots : {
+  }) => vue.createVNode(VSwitch, attrs, _isSlot$6(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -2023,6 +2024,484 @@ const VForm = vue.defineComponent({
 
 });
 
+function _isSlot$5(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+
+const VTab = vue.defineComponent({
+  name: 'VTab',
+  props: {
+    value: {
+      type: String,
+      required: true
+    },
+    active: Boolean,
+    to: [String, Object],
+    icon: [String, Function]
+  },
+  emits: {
+    click: ev => true
+  },
+
+  setup(props, ctx) {
+    const classesRef = vue.computed(() => ({
+      'v-tab--active': props.active
+    }));
+    const exposeValues = {
+      value: props.value,
+      active: props.active
+    };
+    ctx.expose(exposeValues);
+    return () => {
+      const {
+        to,
+        value,
+        icon,
+        active
+      } = props;
+      const classes = ['v-tab', classesRef.value];
+
+      const children = vue.createVNode("span", {
+        "class": "v-tab__content"
+      }, [icon && resolveRawIconProp(active, icon, {
+        class: 'v-tab__icon'
+      }), vueUtils.renderSlotOrEmpty(ctx.slots)]);
+
+      if (to) {
+        const replace = typeof to === 'string' ? undefined : to.replace;
+        return vue.createVNode(vueRouter.RouterLink, {
+          "class": classes,
+          "to": to,
+          "replace": replace
+        }, _isSlot$5(children) ? children : {
+          default: () => [children]
+        });
+      } else {
+        return vue.createVNode("button", {
+          "class": classes,
+          "type": "button",
+          "value": value,
+          "onClick": ev => {
+            ctx.emit('click', ev);
+          }
+        }, [children]);
+      }
+    };
+  }
+
+});
+
+function _isSlot$4(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+
+const VTabs = vue.defineComponent({
+  name: 'VTabs',
+  props: {
+    modelValue: String,
+    items: {
+      type: Array,
+      required: true // validator: (value: VTabsItem[]) => {
+      //   return Array.isArray(value) && value.length > 0;
+      // },
+
+    },
+
+    /**
+     * 自動スクロールする際の余剰オフセット幅（px）
+     */
+    autoScrollOffset: {
+      type: Number,
+      default: 20
+    },
+
+    /**
+     * ルーター同期する場合設定する
+     */
+    router: Function,
+
+    /**
+     * ルーティング連携を行う際に、クエリベースのURLマッチングを行う
+     * タブのURLが /page1?tab=xxx のようになる時に設定する
+     */
+    withQuery: Boolean,
+    ...vueUtils.defineSlotsProps(),
+    color: String
+  },
+  emits: {
+    'update:modelValue': newValue => true,
+    change: newValue => true
+  },
+
+  setup(props, ctx) {
+    const vui = useVui();
+    const internalValueRef = vue.ref(null);
+    const scrollerRef = vueKit.useVScrollerRef();
+    const elRef = vue.ref(null);
+    let scrollResult;
+    const tabRefs = vue.ref([]);
+    const currentRef = vue.computed({
+      get: () => internalValueRef.value,
+      set: value => {
+        if (internalValueRef.value !== value) {
+          internalValueRef.value = value;
+          ctx.emit('update:modelValue', value);
+          ctx.emit('change', value);
+        }
+      }
+    });
+    const colorScope = vueColorScheme.useScopeColorClass({
+      color: () => props.color || vui.setting('tabDefault').color
+    });
+    const classes = vue.computed(() => [colorScope.value.className]);
+    const computedItemsRef = vue.computed(() => {
+      const current = currentRef.value;
+      const {
+        router
+      } = props;
+      return props.items.map(item => {
+        const {
+          value
+        } = item;
+        const active = current === value;
+        let location;
+
+        if (router) {
+          const to = router(value);
+          const route = vui.router.resolve(to);
+          location = {
+            to,
+            route
+          };
+        }
+
+        return { ...item,
+          active,
+          location
+        };
+      });
+    });
+
+    const setTabRef = ref => {
+      tabRefs.value.push(ref);
+    }; // const isMountedRef = ref(false);
+
+
+    function setupInternalValue(routable) {
+      let value = props.modelValue;
+
+      if (value == null || value === '') {
+        const firstItem = props.items[0];
+        if (!firstItem) return;
+        value = firstItem.value;
+      }
+
+      if (internalValueRef.value !== value) {
+        internalValueRef.value = value;
+
+        if (routable) {
+          const {
+            router
+          } = props;
+          if (!router) return;
+          const hit = computedItemsRef.value.find(item => item.value === value);
+          if (!hit) return;
+          const {
+            location
+          } = hit;
+          if (!location) return;
+          const {
+            to,
+            route
+          } = location;
+          if (route.fullPath === vui.location.currentRoute.fullPath) return;
+          vui.router[to.replace ? 'replace' : 'push'](to);
+        } else if (!props.router && props.modelValue !== value) {
+          ctx.emit('update:modelValue', value);
+          ctx.emit('change', value);
+        }
+      }
+    }
+
+    function to(value) {
+      currentRef.value = value;
+    }
+
+    function cancelScroll() {
+      if (scrollResult) {
+        scrollResult.cancel();
+        scrollResult = undefined;
+      }
+    }
+
+    const findTab = tab => {
+      return tabRefs.value.find(t => t.value === tab);
+    };
+
+    function scrollToTab(tabValue) {
+      const tab = findTab(tabValue);
+      if (!tab) return;
+      const $tab = tab.$el;
+      if (!$tab) return;
+      const scroller = scrollerRef.value;
+      if (!scroller) return;
+      const container = scroller.scroller.element();
+      if (!container) return;
+      const {
+        autoScrollOffset
+      } = props;
+      const tabLeft = $tab.offsetLeft;
+      const tabWidth = $tab.offsetWidth;
+      const tabRight = tabLeft + tabWidth;
+      let hiddenLeft = 0;
+      let hiddenRight = 0;
+      const {
+        scrollLeft,
+        offsetWidth: scrollerWidth
+      } = container;
+      hiddenLeft = Math.max(scrollLeft - tabLeft, 0);
+      hiddenRight = Math.max(tabRight - scrollerWidth - scrollLeft, 0);
+      if (hiddenLeft > 0) hiddenLeft += autoScrollOffset;
+      if (hiddenRight > 0) hiddenRight += autoScrollOffset;
+      let scrollAmmount = 0;
+
+      if (hiddenRight > 0) {
+        scrollAmmount = hiddenRight;
+      }
+
+      if (hiddenLeft > 0) {
+        scrollAmmount = -hiddenLeft;
+      }
+
+      if (Math.abs(scrollAmmount) > 0) {
+        cancelScroll();
+        scrollResult = scroller.scroller.by(scrollAmmount, 0, {
+          duration: 150
+        });
+      }
+    }
+
+    vue.watch(() => props.modelValue, () => setupInternalValue(true));
+    vue.watch(() => props.items, () => setupInternalValue(), {
+      deep: true
+    });
+    vue.watch(() => internalValueRef.value, newValue => {
+      scrollToTab(newValue);
+    });
+    vui.location.watchRoute(route => {
+      if (!props.router) return;
+      const path = props.withQuery ? route.fullPath : route.path;
+      const hit = computedItemsRef.value.find(({
+        location
+      }) => {
+        return location && location.route.fullPath === path;
+      });
+
+      if (hit) {
+        currentRef.value = hit.value;
+      }
+    }, {
+      immediate: true
+    });
+    vue.onMounted(() => {
+      scrollToTab(currentRef.value);
+    });
+    vue.onBeforeUnmount(() => {
+      cancelScroll();
+    });
+    vue.onBeforeUpdate(() => {
+      tabRefs.value = [];
+    });
+    setupInternalValue();
+    return () => {
+      const items = computedItemsRef.value;
+      const itemSlot = ctx.slots.item;
+      const children = items.map(({
+        value,
+        active,
+        label,
+        icon,
+        location
+      }) => {
+        if (!label) {
+          label = itemSlot;
+        }
+
+        const children = typeof label === 'function' ? label({
+          value,
+          active,
+          vui
+        }) : label;
+
+        const _to = location && location.to || undefined;
+
+        return vue.createVNode(VTab, {
+          "value": value,
+          "to": _to,
+          "icon": icon,
+          "active": active,
+          "ref": setTabRef,
+          "onClick": e => {
+            if (!e.defaultPrevented) {
+              to(value);
+            }
+          }
+        }, _isSlot$4(children) ? children : {
+          default: () => [children]
+        });
+      });
+      return vue.createVNode("div", {
+        "class": ['v-tabs', classes.value],
+        "ref": elRef
+      }, [vue.createVNode(vueKit.VScroller, {
+        "class": "v-tabs__scroller",
+        "containerClass": "v-tabs__scroller__container",
+        "guide": true,
+        "ref": scrollerRef
+      }, {
+        default: () => [vue.createVNode("div", {
+          "class": "v-tabs__content"
+        }, [children])]
+      })]);
+    };
+  }
+
+});
+
+function _isSlot$3(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+
+const VContentSwitcher = vue.defineComponent({
+  name: 'VContentSwitcher',
+  props: {
+    modelValue: String,
+    order: {
+      type: Array,
+      default: () => []
+    },
+    autotop: [Boolean, Object]
+  },
+  emits: {
+    'update:modelValue': modelValue => true
+  },
+
+  setup(props, ctx) {
+    const internalValueRef = vue.ref('');
+    const transitionRef = vue.ref('');
+    const elRef = vue.ref(null);
+    const anchorRef = vue.ref(null);
+    const computedOrderRef = vue.computed(() => props.order.map(row => {
+      return typeof row === 'string' ? row : row.value;
+    }));
+    const currentRef = vue.computed({
+      get: () => internalValueRef.value,
+      set: current => {
+        if (internalValueRef.value !== current) {
+          internalValueRef.value = current;
+          ctx.emit('update:modelValue', current);
+        }
+      }
+    });
+    const autotopSettingsRef = vue.computed(() => {
+      let {
+        autotop: settings
+      } = props;
+      if (settings === true) settings = {};
+      if (!settings) return;
+      return { ...settings
+      };
+    });
+
+    function seeTop(options) {
+      const scoller = vueScroller.getDocumentScroller();
+      const {
+        value: anchor
+      } = anchorRef;
+
+      if (anchor) {
+        scoller.toElement(anchor, options);
+      }
+    }
+
+    function getEl() {
+      const el = elRef.value;
+
+      if (!el) {
+        throw new Error('missing element');
+      }
+
+      return el;
+    }
+
+    vue.watch(() => props.modelValue, (value, beforeValue) => {
+      if (value == null) return;
+      internalValueRef.value = value;
+      if (beforeValue == null) return;
+      const order = computedOrderRef.value;
+      const index = order.indexOf(value);
+      const beforeIndex = order.indexOf(beforeValue);
+      let transition = 'fade';
+
+      if (index !== -1 && beforeIndex !== -1) {
+        if (index > beforeIndex) transition = 'v-content-switcher-next';
+        if (index < beforeIndex) transition = 'v-content-switcher-prev';
+      }
+
+      transitionRef.value = transition;
+    }, {
+      immediate: true
+    });
+    vue.watch(currentRef, () => {
+      const autotopSettings = autotopSettingsRef.value;
+
+      if (autotopSettings && props.modelValue != null) {
+        seeTop(autotopSettings);
+      }
+    });
+    return () => {
+      const current = currentRef.value;
+      const children = vueUtils.renderSlotOrEmpty(ctx.slots) || [];
+      const currentSlot = ctx.slots[current];
+
+      if (currentSlot) {
+        children.push(vue.createVNode("div", {
+          "class": "v-content-switcher__content",
+          "key": current
+        }, [currentSlot(this)]));
+      }
+
+      return vue.createVNode("div", {
+        "class": "v-content-switcher",
+        "ref": elRef
+      }, [vue.createVNode("div", {
+        "class": "v-content-switcher__anchor",
+        "ref": anchorRef
+      }, null), vue.createVNode(vue.Transition, {
+        "name": transitionRef.value,
+        "onBeforeLeave": el => {
+          getEl().style.height = el.offsetHeight + 'px';
+        },
+        "onEnter": el => {
+          getEl().style.height = el.offsetHeight + 'px';
+        },
+        "onAfterEnter": () => {
+          getEl().style.height = '';
+        },
+        "onEnterCancelled": () => {
+          getEl().style.height = '';
+        },
+        "onLeaveCancelled": () => {
+          getEl().style.height = '';
+        }
+      }, _isSlot$3(children) ? children : {
+        default: () => [children]
+      })]);
+    };
+  }
+
+});
+
 const DATA_TABLE_DEFAULTS = {
   itemKey: 'id',
   pageQuery: 'page',
@@ -2895,6 +3374,7 @@ exports.VCardActions = VCardActions;
 exports.VCardContent = VCardContent;
 exports.VCheckbox = VCheckbox;
 exports.VCheckboxGroup = VCheckboxGroup;
+exports.VContentSwitcher = VContentSwitcher;
 exports.VDataTable = VDataTable;
 exports.VDrawerLayout = VDrawerLayout;
 exports.VForm = VForm;
@@ -2912,6 +3392,7 @@ exports.VRadioGroup = VRadioGroup;
 exports.VSelect = VSelect;
 exports.VSwitch = VSwitch;
 exports.VSwitchGroup = VSwitchGroup;
+exports.VTabs = VTabs;
 exports.VTextField = VTextField;
 exports.VTextarea = VTextarea;
 exports.VToolbar = VToolbar;