@fastkit/vui 0.13.6 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.13.6",
+  "version": "0.14.0",
   "description": "A simple, extensible UI kit for Vue applications.",
   "keywords": [
     "fastkit",
@@ -44,35 +44,35 @@
     "src"
   ],
   "dependencies": {
-    "@fastkit/color-scheme": "1.0.5",
-    "@fastkit/color-scheme-gen": "0.13.5",
+    "@fastkit/color-scheme": "1.0.6",
+    "@fastkit/color-scheme-gen": "0.13.6",
     "@fastkit/dom": "0.1.1",
     "@fastkit/helpers": "0.13.1",
-    "@fastkit/icon-font": "1.0.4",
-    "@fastkit/media-match": "1.0.4",
-    "@fastkit/media-match-gen": "0.13.5",
+    "@fastkit/icon-font": "1.0.5",
+    "@fastkit/media-match": "1.0.5",
+    "@fastkit/media-match-gen": "0.13.6",
     "@fastkit/rules": "0.13.1",
     "@fastkit/stylebase": "0.13.0",
     "@fastkit/tiny-logger": "0.13.1",
-    "@fastkit/vue-action": "0.1.1",
-    "@fastkit/vue-app-layout": "0.13.3",
-    "@fastkit/vue-body-scroll-lock": "0.1.1",
-    "@fastkit/vue-click-outside": "0.1.1",
-    "@fastkit/vue-color-scheme": "0.13.5",
-    "@fastkit/vue-form-control": "0.13.1",
+    "@fastkit/vue-action": "0.2.0",
+    "@fastkit/vue-app-layout": "0.14.0",
+    "@fastkit/vue-body-scroll-lock": "0.1.2",
+    "@fastkit/vue-click-outside": "0.1.2",
+    "@fastkit/vue-color-scheme": "0.13.6",
+    "@fastkit/vue-form-control": "0.14.0",
     "@fastkit/vue-keyboard": "0.1.1",
-    "@fastkit/vue-loading": "0.13.6",
-    "@fastkit/vue-location": "0.1.1",
-    "@fastkit/vue-media-match": "0.13.5",
-    "@fastkit/vue-resize": "0.1.1",
-    "@fastkit/vue-scroller": "0.13.1",
-    "@fastkit/vue-stack": "0.13.5",
-    "@fastkit/vue-transitions": "0.1.1",
-    "@fastkit/vue-utils": "0.13.1"
+    "@fastkit/vue-loading": "0.14.0",
+    "@fastkit/vue-location": "0.1.2",
+    "@fastkit/vue-media-match": "0.13.6",
+    "@fastkit/vue-resize": "0.1.2",
+    "@fastkit/vue-scroller": "0.14.0",
+    "@fastkit/vue-stack": "0.14.0",
+    "@fastkit/vue-transitions": "0.1.2",
+    "@fastkit/vue-utils": "0.14.0"
   },
   "peerDependencies": {
-    "vue": "^3.2.0",
-    "vue-router": "^4.1.0"
+    "vue": "^3.3.0",
+    "vue-router": "^4.2.0"
   },
   "buildOptions": {
     "name": "Vui"

package/src/components/VAvatar/VAvatar.tsx

@@ -1,6 +1,5 @@
 import './VAvatar.scss';
 import { defineComponent, computed, PropType } from 'vue';
-import { renderSlotOrEmpty } from '@fastkit/vue-utils';
 import { actionableInheritProps, useActionable } from '@fastkit/vue-action';
 import { colorSchemeProps, useColorClasses } from '@fastkit/vue-color-scheme';
 import { useVui } from '../../injections';
@@ -75,7 +74,7 @@ export const VAvatar = defineComponent({
           class={['v-avatar', classes.value, color.colorClasses.value]}
           style={styles.value}>
           {(!!src && <VBusyImage class="v-avatar__image" src={src} cover />) ||
-            renderSlotOrEmpty(ctx.slots)}
+            ctx.slots.default?.()}
         </Tag>
       );
     };

package/src/components/VBreadcrumbs/VBreadcrumbs.tsx

@@ -28,7 +28,6 @@ export const VBreadcrumbs = defineComponent({
     divider: [String, Function] as PropType<
       VNodeChild | ((vui: VuiService) => VNodeChild)
     >,
-    // ...defineSlotsProps<{}>(),
   },
   setup(props, ctx) {
     const vui = useVui();

package/src/components/VBusyImage/VBusyImage.tsx

@@ -14,7 +14,7 @@ import {
 } from 'vue';
 import { IN_WINDOW } from '@fastkit/helpers';
 import { loadImage } from '@fastkit/dom';
-import { defineSlotsProps } from '@fastkit/vue-utils';
+import { defineSlots } from '@fastkit/vue-utils';
 
 export declare type ImgHTMLAttributesPropOptions = {
   [K in keyof ImgHTMLAttributes]-?: PropType<ImgHTMLAttributes[K]>;
@@ -75,6 +75,10 @@ export interface BusyImageRects {
   main: BusyImageRect;
 }
 
+const slots = defineSlots<{
+  default?: () => any;
+}>();
+
 /**
  * 画像表示用コンポーネント
  * <img /> タグのように振る舞うが、ローディング表示や、表示サイズの調整など、ちょっといい感じにやるためのコンポーネント
@@ -87,14 +91,13 @@ export const VBusyImage = defineComponent({
     width: NUMBERISH_PROP,
     height: NUMBERISH_PROP,
     cover: Boolean,
-    ...defineSlotsProps<{
-      default: void;
-    }>(),
+    ...slots(),
   },
   emits: {
     load: (ev: Event) => true,
     error: (ev: Event) => true,
   },
+  slots,
   setup(props, ctx) {
     const loadStateRef = ref<BusyImageLoadState>(
       props.cover && isAvailableSrc(ctx.attrs.src as any)
@@ -245,7 +248,7 @@ export const VBusyImage = defineComponent({
     return () => {
       const { el: elAttrs, img: imgAttrs } = attrsRef.value;
       const styles = stylesRef.value;
-      const children = ctx.slots.default && ctx.slots.default();
+      const children = ctx.slots.default?.();
 
       return (
         <span

package/src/components/VButton/VButton.tsx

@@ -7,12 +7,7 @@ import {
   VNodeChild,
 } from 'vue';
 import { colorSchemeProps, useColorClasses } from '@fastkit/vue-color-scheme';
-import {
-  ExtractPropInput,
-  createPropsOptions,
-  renderSlotOrEmpty,
-  htmlAttributesPropOptions,
-} from '@fastkit/vue-utils';
+import { ExtractPropInput, createPropsOptions } from '@fastkit/vue-utils';
 import { VAction, actionableInheritProps } from '@fastkit/vue-action';
 import { useVui } from '../../injections';
 import { createControlProps, useControl } from '../../composables';
@@ -54,7 +49,6 @@ function resolveRawVButtonIcon(
 }
 
 export const vueButtonProps = createPropsOptions({
-  ...htmlAttributesPropOptions,
   ...colorSchemeProps(),
   ...actionableInheritProps,
   spacer: [Boolean, String] as PropType<RawVButtonSpacer>,
@@ -136,12 +130,11 @@ export const VButton = defineComponent({
     ]);
 
     return () => {
-      const children = renderSlotOrEmpty(ctx.slots);
       return (
         <VAction {...ctx.attrs} class={['v-button', classes.value]}>
           <span class="v-button__content">
             {startIcon.value}
-            {children}
+            {ctx.slots.default?.()}
             {icon.value}
             {endIcon.value}
           </span>

package/src/components/VCard/VCardActions.tsx

@@ -1,16 +1,11 @@
 import './VCardActions.scss';
 import { defineComponent } from 'vue';
-import { renderSlotOrEmpty } from '@fastkit/vue-utils';
 
 export const VCardActions = defineComponent({
   name: 'VCardActions',
-  setup(props, ctx) {
+  setup(_props, ctx) {
     return () => {
-      return (
-        <div class="v-card-actions">
-          {renderSlotOrEmpty(ctx.slots, 'default')}
-        </div>
-      );
+      return <div class="v-card-actions">{ctx.slots.default?.()}</div>;
     };
   },
 });

package/src/components/VCard/VCardContent.tsx

@@ -1,16 +1,11 @@
 import './VCardContent.scss';
 import { defineComponent } from 'vue';
-import { renderSlotOrEmpty } from '@fastkit/vue-utils';
 
 export const VCardContent = defineComponent({
   name: 'VCardContent',
-  setup(props, ctx) {
+  setup(_props, ctx) {
     return () => {
-      return (
-        <div class="v-card-content">
-          {renderSlotOrEmpty(ctx.slots, 'default')}
-        </div>
-      );
+      return <div class="v-card-content">{ctx.slots.default?.()}</div>;
     };
   },
 });

package/src/components/VCheckable/VCheckable.tsx

@@ -1,8 +1,15 @@
 import './VCheckable.scss';
 import { computed, defineComponent } from 'vue';
-import { defineSlotsProps, renderSlotOrEmpty } from '@fastkit/vue-utils';
+import { defineSlots } from '@fastkit/vue-utils';
 import { useVuiColorProvider } from '../../injections';
 
+const slots = defineSlots<{
+  input?: () => any;
+  faux?: () => any;
+  icon?: () => any;
+  label?: () => any;
+}>();
+
 export const VCheckable = defineComponent({
   name: 'VCheckable',
   props: {
@@ -10,14 +17,10 @@ export const VCheckable = defineComponent({
     disabled: Boolean,
     readonly: Boolean,
     checked: Boolean,
-    ...defineSlotsProps<{
-      input: void;
-      faux: void;
-      icon: void;
-      label: void;
-    }>(),
+    ...slots(),
     // autoWidth: Boolean,
   },
+  slots,
   setup(props, ctx) {
     const colorProvider = useVuiColorProvider();
     const invalid = computed(() => props.invalid);
@@ -42,18 +45,14 @@ export const VCheckable = defineComponent({
     return () => (
       <label class={['v-checkable', classes.value]}>
         <span class="v-checkable__faux">
-          {renderSlotOrEmpty(ctx.slots, 'input')}
+          {ctx.slots.input?.()}
           {ctx.slots.icon ? (
-            renderSlotOrEmpty(ctx.slots, 'icon')
+            ctx.slots.icon()
           ) : (
-            <span class="v-checkable__faux__icon">
-              {renderSlotOrEmpty(ctx.slots, 'faux')}
-            </span>
+            <span class="v-checkable__faux__icon">{ctx.slots.faux?.()}</span>
           )}
         </span>
-        <span class="v-checkable__label">
-          {renderSlotOrEmpty(ctx.slots, 'label')}
-        </span>
+        <span class="v-checkable__label">{ctx.slots.label?.()}</span>
       </label>
     );
   },

package/src/components/VCheckbox/VCheckbox.tsx

@@ -4,7 +4,6 @@ import {
   createFormSelectorItemSettings,
   useFormSelectorItemControl,
 } from '@fastkit/vue-form-control';
-import { renderSlotOrEmpty } from '@fastkit/vue-utils';
 import { createControlProps, useControl } from '../../composables';
 import {
   VUI_CHECKBOX_GROUP_SYMBOL,
@@ -55,7 +54,7 @@ export const VCheckbox = defineComponent({
           input: () =>
             selectorItemControl.createInputElement({ type: 'checkbox' }),
           faux: () => <span class="v-checkbox__faux"></span>,
-          label: () => renderSlotOrEmpty(this.$slots, 'default'),
+          label: () => this.$slots.default?.(),
         }}
       />
     );

package/src/components/VChip/VChip.tsx

@@ -1,6 +1,5 @@
 import './VChip.scss';
 import { defineComponent, computed, PropType, VNodeChild } from 'vue';
-import { renderSlotOrEmpty } from '@fastkit/vue-utils';
 import { actionableInheritProps, useActionable } from '@fastkit/vue-action';
 import { colorSchemeProps, useColorClasses } from '@fastkit/vue-color-scheme';
 import { useVui } from '../../injections';
@@ -95,7 +94,7 @@ export const VChip = defineComponent({
           {...attrs}
           class={['v-chip', classes.value, color.colorClasses.value]}>
           {startIcon.value}
-          <span class="v-chip__content">{renderSlotOrEmpty(ctx.slots)}</span>
+          <span class="v-chip__content">{ctx.slots.default?.()}</span>
           {endIcon.value}
         </Tag>
       );

package/src/components/VContentSwitcher/VContentSwitcher.tsx

@@ -10,7 +10,6 @@ import {
 } from 'vue';
 import { getDocumentScroller } from '@fastkit/vue-scroller';
 import { VTabsItem } from '../VTabs/VTabs';
-import { renderSlotOrEmpty } from '@fastkit/vue-utils';
 
 export interface ContentSwitcherSeeTopOptions {
   /**
@@ -116,7 +115,7 @@ export const VContentSwitcher = defineComponent({
 
     return () => {
       const current = currentRef.value;
-      const children = renderSlotOrEmpty(ctx.slots) || [];
+      const children = ctx.slots.default?.() || [];
       const currentSlot = ctx.slots[current];
 
       if (currentSlot) {

package/src/components/VControlField/VControlField.tsx

@@ -6,8 +6,8 @@ import {
   resolveVNodeChildOrSlots,
   TypedSlot,
   createPropsOptions,
-  defineSlotsProps,
-  renderSlotOrEmpty,
+  defineSlots,
+  DefineSlotsType,
 } from '@fastkit/vue-utils';
 import {
   createControlProps,
@@ -43,11 +43,13 @@ export function createControlFieldProps() {
 //   startAdornment: () => true,
 //   endAdornment: () => true,
 // };
-export interface InputBoxSlots {
-  default: void;
-  startAdornment: void;
-  endAdornment: void;
-}
+export type InputBoxSlots = DefineSlotsType<{
+  default?: () => any;
+  startAdornment?: () => any;
+  endAdornment?: () => any;
+}>;
+
+const slots = defineSlots<InputBoxSlots>();
 
 type ResolvedSlots = Partial<Record<AdornmentPosition, TypedSlot<void>>>;
 
@@ -57,10 +59,10 @@ export const VControlField = defineComponent({
     ...createControlFieldProps(),
     focused: Boolean,
     autoHeight: Boolean,
-    ...defineSlotsProps<InputBoxSlots>(),
+    ...slots(),
     error: Boolean,
   },
-  // _slots: inputBoxSlots,
+  slots,
   emits: {
     click: (ev: MouseEvent) => true,
   },
@@ -122,7 +124,7 @@ export const VControlField = defineComponent({
           />
         );
       } else {
-        child = renderSlotOrEmpty(resolvedSlots.value, position);
+        child = resolvedSlots.value[position]?.();
       }
       if (!child) return;
       return (
@@ -159,9 +161,7 @@ export const VControlField = defineComponent({
         // tabindex={this.computedTabindex}
         ref={this.hostElRef()}>
         {this.renderAdornment('start')}
-        <div class="v-control-field__body">
-          {renderSlotOrEmpty(this.$slots, 'default')}
-        </div>
+        <div class="v-control-field__body">{this.$slots.default?.()}</div>
         {this.renderAdornment('end')}
       </div>
     );

package/src/components/VDrawerLayout/VDrawerLayout.tsx

@@ -1,12 +1,13 @@
 import './VDrawerLayout.scss';
 import { defineComponent, computed } from 'vue';
-import { createPaperBaseProps, VPaper } from '../VPaper';
+import { createPaperBaseProps, paperBaseSlots, VPaper } from '../VPaper';
 
 export const VDrawerLayout = defineComponent({
   name: 'VDrawerLayout',
   props: {
     ...createPaperBaseProps(),
   },
+  slots: paperBaseSlots,
   setup(props, ctx) {
     return () => {
       const paperProps = computed(() => ({

package/src/components/VForm/VForm.tsx

@@ -4,7 +4,7 @@ import {
   createFormSettings,
   useForm,
 } from '@fastkit/vue-form-control';
-import { defineSlotsProps, renderSlotOrEmpty } from '@fastkit/vue-utils';
+import { DefineSlotsType, defineSlots } from '@fastkit/vue-utils';
 import { getDocumentScroller } from '@fastkit/vue-scroller';
 import { createControlProps, useControl } from '../../composables';
 import { VUI_FORM_SYMBOL, useVui } from '../../injections';
@@ -13,15 +13,17 @@ const { props, emits } = createFormSettings({
   nodeType: VUI_FORM_SYMBOL,
 });
 
-export interface VFormSlots {
-  default: VueForm;
-}
+export type VFormSlots = DefineSlotsType<{
+  default?: (form: VueForm) => any;
+}>;
+
+export const formSlots = defineSlots<VFormSlots>();
 
 export function createVFormProps() {
   return {
     ...props,
     ...createControlProps(),
-    ...defineSlotsProps<VFormSlots>(),
+    ...formSlots(),
     // disableAutoScroll: Boolean,
   };
 }
@@ -30,6 +32,7 @@ export const VForm = defineComponent({
   name: 'VForm',
   props: createVFormProps(),
   emits,
+  slots: formSlots,
   setup(props, ctx) {
     const vui = useVui();
     const nodeControl = useForm(props, ctx as any, {
@@ -70,7 +73,7 @@ export const VForm = defineComponent({
         action={this.nativeAction}
         spellcheck={this.spellcheck}
         onSubmit={form.handleSubmit}>
-        {renderSlotOrEmpty(this.$slots, 'default', form as any)}
+        {this.$slots.default?.(form)}
       </form>
     );
   },

package/src/components/VFormControl/VFormControl.tsx

@@ -7,7 +7,7 @@ import {
   FormControl,
   RequiredChipSource,
 } from '@fastkit/vue-form-control';
-import { defineSlotsProps, renderSlotOrEmpty } from '@fastkit/vue-utils';
+import { defineSlots } from '@fastkit/vue-utils';
 import { useVuiColorProvider, useVui } from '../../injections';
 import type { VuiService } from '../../service';
 import { VIcon } from '../VIcon';
@@ -41,17 +41,20 @@ export function createRequiredChipRenderer(
   };
 }
 
+const slots = defineSlots<
+  FormControlSlots & {
+    default?: (form: FormControl) => any;
+  }
+>();
+
 export const VFormControl = defineComponent({
   name: 'VFormControl',
   props: {
     ...props,
-    ...defineSlotsProps<
-      FormControlSlots & {
-        default: FormControl;
-      }
-    >(),
+    ...slots(),
     error: Boolean,
   },
+  slots,
   emits,
   setup(props, ctx) {
     const vui = useVui();
@@ -152,7 +155,7 @@ export const VFormControl = defineComponent({
             </label>
           )}
           <div class="v-form-control__body">
-            {renderSlotOrEmpty(ctx.slots, 'default', control as any)}
+            {ctx.slots.default?.(control)}
             {!props.hiddenInfo && (
               <div class="v-form-control__info">
                 {!!message && (

package/src/components/VGrid/VGridContainer.tsx

@@ -1,7 +1,6 @@
 import './VGridContainer.scss';
 
 import { defineComponent, computed } from 'vue';
-import { htmlAttributesPropOptions } from '@fastkit/vue-utils';
 import { RawGridValueProp, extractRawGridValueClasses } from './schemes';
 
 export type GridContainerSpacingValue =
@@ -66,7 +65,6 @@ export const VGridContainer = defineComponent({
   name: 'VGridContainer',
   inheritAttrs: false,
   props: {
-    ...htmlAttributesPropOptions,
     wrapperTag: {
       type: String,
       default: 'div',

package/src/components/VGrid/VGridItem.tsx

@@ -1,8 +1,6 @@
 import './VGridItem.scss';
 
 import { defineComponent, computed } from 'vue';
-// import { MediaMatchKey, MEDIA_MATCH_CONDITIONS } from '@fastkit/media-match';
-import { htmlAttributesPropOptions } from '@fastkit/vue-utils';
 import { RawGridValueProp, extractRawGridValueClasses } from './schemes';
 
 export type GridItemNumberSizeValue =
@@ -50,7 +48,6 @@ export const VGridItem = defineComponent({
   name: 'VGridItem',
   inheritAttrs: false,
   props: {
-    ...htmlAttributesPropOptions,
     tag: {
       type: String,
       default: 'div',

package/src/components/VHero/VHero.tsx

@@ -1,19 +1,17 @@
 import './VHero.scss';
 import { defineComponent, PropType } from 'vue';
-import {
-  renderSlotOrEmpty,
-  htmlAttributesPropOptions,
-  defineSlotsProps,
-} from '@fastkit/vue-utils';
+import { defineSlots } from '@fastkit/vue-utils';
 import { toScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
 import { VAppContainer } from '@fastkit/vue-app-layout';
 
-// Adornment
+const slots = defineSlots<{
+  default?: () => void;
+  adornment?: () => void;
+}>();
 
 export const VHero = defineComponent({
   name: 'VHero',
   props: {
-    ...htmlAttributesPropOptions,
     color: {
       type: String as PropType<ScopeName>,
       default: 'primary',
@@ -26,23 +24,19 @@ export const VHero = defineComponent({
       type: String,
       default: 'h1',
     },
-    ...defineSlotsProps<{
-      default: void;
-      adornment: void;
-    }>(),
+    ...slots(),
   },
+  slots,
   setup(props, ctx) {
     return () => {
       const TagName = props.tag as 'header';
       const HTagName = props.hTag as 'h1';
-      const adornment = renderSlotOrEmpty(ctx.slots, 'adornment');
+      const adornment = ctx.slots.adornment?.();
 
       return (
         <VAppContainer pulled>
           <TagName class={['v-hero', toScopeColorClass(props.color)]}>
-            <HTagName class="v-hero__title">
-              {renderSlotOrEmpty(ctx.slots, 'default')}
-            </HTagName>
+            <HTagName class="v-hero__title">{ctx.slots.default?.()}</HTagName>
             {adornment && <div class="v-hero__adornment">{adornment}</div>}
           </TagName>
         </VAppContainer>

package/src/components/VListTile/VListTile.tsx

@@ -8,7 +8,7 @@ import {
   watch,
 } from 'vue';
 import { rawIconProp, resolveRawIconProp } from '../VIcon';
-import { renderSlotOrEmpty, createPropsOptions } from '@fastkit/vue-utils';
+import { createPropsOptions } from '@fastkit/vue-utils';
 import { actionableInheritProps, VAction } from '@fastkit/vue-action';
 import { useScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
 import { useVui } from '../../injections';
@@ -108,9 +108,7 @@ export const VListTile = defineComponent({
               {_startIcon}
             </span>
           )}
-          <span class="v-list-tile__body">
-            {renderSlotOrEmpty(ctx.slots, 'default')}
-          </span>
+          <span class="v-list-tile__body">{ctx.slots.default?.()}</span>
           {_endIcon && (
             <span class="v-list-tile__icon v-list-tile__icon--end">
               {_endIcon}

package/src/components/VNavigation/VNavigationItem.tsx

@@ -10,7 +10,7 @@ import {
   watch,
 } from 'vue';
 import { createListTileProps, listTileEmits, VListTile } from '../VListTile';
-import { ExtractPropInput, renderSlotOrEmpty } from '@fastkit/vue-utils';
+import { ExtractPropInput } from '@fastkit/vue-utils';
 import { VExpandTransition } from '@fastkit/vue-transitions';
 import { useVui } from '../../injections';
 import { useRoute } from 'vue-router';
@@ -259,7 +259,7 @@ export const VNavigationItem = defineComponent({
             class={['v-navigation-item', classes.value]}
             onClick={onClick}
             onChangeActive={onChangeActive}>
-            {renderSlotOrEmpty(ctx.slots, 'default')}
+            {ctx.slots.default?.()}
           </VListTile>
           {_children && (
             <VExpandTransition>

package/src/components/VOption/VOption.tsx

@@ -4,7 +4,6 @@ import {
   createFormSelectorItemSettings,
   useFormSelectorItemControl,
 } from '@fastkit/vue-form-control';
-import { renderSlotOrEmpty } from '@fastkit/vue-utils';
 import { createControlProps, useControl } from '../../composables';
 import { VUI_SELECT_SYMBOL, VUI_OPTION_SYMBOL } from '../../injections';
 
@@ -50,9 +49,7 @@ export const VOption = defineComponent({
         {...({
           'aria-disabled': selectorItemControl.isDisabled,
         } as any)}>
-        <span class="v-option__label">
-          {renderSlotOrEmpty(this.$slots, 'default')}
-        </span>
+        <span class="v-option__label">{this.$slots.default?.()}</span>
       </label>
     );
   },