@fastkit/vui 0.15.0 → 0.16.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.15.0",
+  "version": "0.16.1",
   "description": "A simple, extensible UI kit for Vue applications.",
   "keywords": [
     "fastkit",
@@ -58,15 +58,15 @@
     "@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-color-scheme": "0.14.0",
     "@fastkit/vue-form-control": "0.15.0",
     "@fastkit/vue-keyboard": "0.1.1",
-    "@fastkit/vue-loading": "0.14.0",
+    "@fastkit/vue-loading": "0.14.1",
     "@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-stack": "0.15.1",
     "@fastkit/vue-transitions": "0.1.2",
     "@fastkit/vue-utils": "0.14.0"
   },

package/src/components/VApp/VApp.tsx

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import { VAppLayout } from '@fastkit/vue-app-layout';
-import { VStackRoot } from '@fastkit/vue-stack';
+import { VStackContainer } from '@fastkit/vue-stack';
 import { useInjectTheme } from '@fastkit/vue-color-scheme';
 
 export const VApp = defineComponent({
@@ -10,9 +10,9 @@ export const VApp = defineComponent({
 
     return () => {
       return (
-        <VStackRoot>
+        <VStackContainer>
           <VAppLayout v-slots={ctx.slots} />
-        </VStackRoot>
+        </VStackContainer>
       );
     };
   },

package/src/components/VAvatar/VAvatar.scss

@@ -26,7 +26,6 @@
     border-style: solid;
     border-width: 1px;
     border-radius: var(--avatar-radius);
-    // border-radius: var(--control-field-radius);
 
     --shadow-color: rgba(0, 0, 0, 0) !important; // @TODO layer supports
     --focusShadow-color: rgba(0, 0, 0, 0) !important; // @TODO layer supports

package/src/components/VControlField/VControlField.tsx

@@ -138,32 +138,20 @@ export const VControlField = defineComponent({
       );
     };
 
-    const handleClick = (ev: MouseEvent) => {
-      ctx.emit('click', ev);
-      // if (ev.target === hostElRef.value) {
-      //   ctx.emit('clickHost', ev);
-      // }
-    };
+    const handleClick = (ev: MouseEvent) => ctx.emit('click', ev);
 
-    return {
-      classes,
-      renderAdornment,
-      hostElRef: () => hostElRef,
-      handleClick,
-      // computedTabindex,
+    return () => {
+      return (
+        <div
+          class={classes.value}
+          onClick={handleClick}
+          // tabindex={this.computedTabindex}
+          ref={hostElRef}>
+          {renderAdornment('start')}
+          <div class="v-control-field__body">{ctx.slots.default?.()}</div>
+          {renderAdornment('end')}
+        </div>
+      );
     };
   },
-  render() {
-    return (
-      <div
-        class={this.classes}
-        onClick={this.handleClick}
-        // tabindex={this.computedTabindex}
-        ref={this.hostElRef()}>
-        {this.renderAdornment('start')}
-        <div class="v-control-field__body">{this.$slots.default?.()}</div>
-        {this.renderAdornment('end')}
-      </div>
-    );
-  },
 });

package/src/components/VDialog/VDialog.scss

@@ -0,0 +1,41 @@
+.v-dialog {
+  position: relative;
+  display: inline-block;
+  min-width: 280px;
+  margin: 24px;
+  text-align: left;
+  pointer-events: auto;
+  border-radius: 2px;
+  outline: 0;
+  box-shadow: var(--dialog-shadow);
+
+  &__header {
+    box-sizing: border-box;
+    padding: 16px;
+    font-size: 24px;
+    line-height: 1.4;
+  }
+
+  &__body {
+    box-sizing: border-box;
+    padding: 16px;
+    font-size: 16px;
+    line-height: 1.5;
+  }
+
+  &--dense &__body {
+    padding-bottom: 0;
+  }
+
+  &__actions {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 8px;
+  }
+
+  &--dense &__actions {
+    padding-top: 0;
+  }
+}

package/src/components/VDialog/VDialog.tsx

@@ -0,0 +1,51 @@
+import './VDialog.scss';
+
+import {
+  defineDialogComponent,
+  createStackActionProps,
+  useStackAction,
+} from '@fastkit/vue-stack';
+import { colorSchemeProps, useColorClasses } from '@fastkit/vue-color-scheme';
+import { useVui } from '../../injections';
+
+const colorProps = colorSchemeProps();
+
+export const VDialog = defineDialogComponent({
+  name: 'VDialog',
+  props: {
+    ...createStackActionProps(),
+    ...colorProps,
+    dense: Boolean,
+  },
+  setup(ctx) {
+    const { props, control } = ctx;
+    const vui = useVui();
+    const actionControl = useStackAction(props, control, {
+      resolver: (actions) => {
+        if (actions.length === 0) {
+          return [vui.stackAction('close')];
+        } else {
+          return actions;
+        }
+      },
+    });
+    const color = useColorClasses(props, { useRootThemeDefault: true });
+
+    return (children) => {
+      const { $actions } = actionControl;
+      return (
+        <div
+          class={[
+            'v-dialog',
+            color.colorClasses.value,
+            props.dense && 'v-dialog--dense',
+          ]}>
+          <div class="v-dialog__body">{children}</div>
+          {$actions.length > 0 && (
+            <div class="v-dialog__actions">{$actions}</div>
+          )}
+        </div>
+      );
+    };
+  },
+});

package/src/components/VDialog/index.ts

@@ -0,0 +1 @@
+export * from './VDialog';

package/src/components/VFormControl/VFormControl.tsx

@@ -11,7 +11,7 @@ import { defineSlots } from '@fastkit/vue-utils';
 import { useVuiColorProvider, useVui } from '../../injections';
 import type { VuiService } from '../../service';
 import { VIcon } from '../VIcon';
-import { VTooltip } from '../kits';
+import { VTooltip } from '../VTooltip';
 
 const { props, emits } = createFormControlSettings();
 
@@ -111,6 +111,8 @@ export const VFormControl = defineComponent({
       vui,
     );
 
+    const handleClick = (ev: MouseEvent) => ctx.emit('clickLabel', ev, control);
+
     return () => {
       const label = control.renderLabel();
       const message = control.renderMessage();
@@ -121,11 +123,7 @@ export const VFormControl = defineComponent({
       return (
         <div class={['v-form-control', classes.value]}>
           {label && (
-            <label
-              class="v-form-control__label"
-              onClick={(ev) => {
-                ctx.emit('clickLabel', ev, control);
-              }}>
+            <label class="v-form-control__label" onClick={handleClick}>
               {label}
               {getRequiredChip()}
               {hinttip && (

package/src/components/VMenu/VMenu.scss

@@ -0,0 +1,4 @@
+.v-menu {
+  border-radius: 2px;
+  box-shadow: var(--menu-shadow);
+}

package/src/components/VMenu/VMenu.tsx

@@ -0,0 +1,31 @@
+import './VMenu.scss';
+
+import { defineMenuComponent } from '@fastkit/vue-stack';
+import { colorSchemeProps, useColorClasses } from '@fastkit/vue-color-scheme';
+
+const colorProps = colorSchemeProps();
+
+export const VMenu = defineMenuComponent({
+  name: 'VMenu',
+  attrs: {
+    class: 'v-menu',
+  },
+  props: {
+    ...colorProps,
+  },
+  setup(ctx) {
+    const color = useColorClasses(ctx.props, { useRootThemeDefault: true });
+
+    ctx.setupContext.expose({
+      menu: ctx,
+    });
+
+    return (children) => {
+      return (
+        <div class={['v-menu__body', color.colorClasses.value]} {...ctx.attrs}>
+          {children}
+        </div>
+      );
+    };
+  },
+});

package/src/components/VMenu/index.ts

@@ -0,0 +1 @@
+export * from './VMenu';

package/src/components/VSelect/VSelect.tsx

@@ -36,11 +36,11 @@ import {
 } from '../../composables';
 import { VUI_SELECT_SYMBOL, useVui } from '../../injections';
 import { VIcon } from '../VIcon';
-import { VMenu } from '../kits';
+import { VMenu } from '../VMenu';
 import { VOptionGroup } from '../VOptionGroup';
 import { VOption } from '../VOption';
 import { VButton } from '../VButton';
-import { VMenuControl } from '@fastkit/vue-stack';
+import { MenuAPI } from '@fastkit/vue-stack';
 
 export const ARROW_KEY_TYPES = useKeyboard.Key(['ArrowUp', 'ArrowDown']);
 
@@ -82,7 +82,7 @@ export const VSelect = defineComponent({
   slots,
   emits,
   setup(props, ctx) {
-    const menuRef: Ref<{ stackMenuControl: VMenuControl } | null> = ref(null);
+    const menuRef: Ref<{ menu: MenuAPI } | null> = ref(null);
     const menuOpened = ref(false);
     const showMenu = () => {
       menuOpened.value = true;
@@ -119,7 +119,7 @@ export const VSelect = defineComponent({
     });
 
     const focus = (opts?: FocusOptions): void => {
-      fieldRef.value && fieldRef.value.focus(opts);
+      fieldRef.value?.focus?.(opts);
     };
 
     const renderSelections = (selectedItems: FormSelectorItemControl[]) => {
@@ -155,9 +155,9 @@ export const VSelect = defineComponent({
     };
 
     const clearKeyFocused = () => {
-      const menu = menuRef.value;
+      const menu = menuRef.value?.menu;
       if (!menu) return;
-      const bodyEl = menu.stackMenuControl.bodyRef.value;
+      const bodyEl = menu.bodyRef.value;
       if (!bodyEl) return;
 
       const els = Array.from(
@@ -168,10 +168,10 @@ export const VSelect = defineComponent({
     };
 
     const getItemElements = (): HTMLElement[] | void => {
-      const menu = menuRef.value;
+      const menu = menuRef.value?.menu;
       if (!menu) return;
 
-      const bodyEl = menu.stackMenuControl.bodyRef.value;
+      const bodyEl = menu.bodyRef.value;
 
       if (!bodyEl) return;
 

package/src/components/VSheetModal/VSheetModal.scss

@@ -0,0 +1,48 @@
+.v-sheet-modal {
+  --v-sheet-modal-width: 90vw;
+  --v-sheet-modal-max-width: none;
+  --v-sheet-background: var(--palette-foundation);
+
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: var(--v-sheet-modal-width);
+  max-width: var(--v-sheet-modal-max-width);
+  padding: 0;
+  outline: 0;
+  box-shadow: var(--dialog-shadow);
+  transition: transform var(--v-stack-transition-slowly);
+
+  &__header {
+    position: relative;
+    z-index: 1;
+    flex: 0 0;
+    background-color: var(--v-sheet-background);
+  }
+
+  &__scroller {
+    flex: 1 1;
+    -webkit-overflow-scrolling: touch;
+    height: 100%;
+    overflow-y: auto;
+    background-color: var(--v-sheet-background);
+  }
+
+  &--has-active-child {
+    transform: translateX(calc(-100vw + var(--v-sheet-modal-width)));
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: transform var(--v-stack-transition-slowly);
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: translateX(var(--v-sheet-modal-width));
+  }
+}

package/src/components/VSheetModal/VSheetModal.tsx

@@ -0,0 +1,88 @@
+import './VSheetModal.scss';
+import {
+  defineComponent,
+  // ExtractPropTypes,
+  PropType,
+  VNodeChild,
+  computed,
+} from 'vue';
+import {
+  createStackableDefine,
+  VStackSlots,
+  VStackControl,
+  useStackControl,
+} from '@fastkit/vue-stack';
+// import {  } from '../schemes';
+// import { useStackControl } from '../composables';
+// import { ExtractPropInput } from '@fastkit/vue-utils';
+
+const { props, emits } = createStackableDefine({
+  defaultTransition: 'v-sheet-modal',
+  defaultFocusTrap: true,
+  defaultFocusRestorable: true,
+  defaultScrollLock: true,
+});
+
+export interface VSheetModalSlots extends VStackSlots {
+  header?: (control: VStackControl) => VNodeChild;
+}
+
+export const sheetModalProps = {
+  ...props,
+  header: Function as PropType<(control: VStackControl) => VNodeChild>,
+  'v-slots': undefined as unknown as PropType<VSheetModalSlots>,
+};
+
+const SHEET_STACK_TYPE = Symbol('VSheetModal');
+
+export const VSheetModal = defineComponent({
+  name: 'VSheetModal',
+  inheritAttrs: false,
+  props: sheetModalProps,
+  emits,
+  setup(props, ctx) {
+    const stackControl = useStackControl(props, ctx, {
+      stackType: SHEET_STACK_TYPE,
+    });
+    const hasActiveChild = computed(() => {
+      const myIndex = stackControl.zIndex;
+      const stacks = stackControl.$service
+        .getActiveStacks()
+        .filter((stack) => stack.stackType === SHEET_STACK_TYPE);
+      return stacks.some((stack) => stack.zIndex > myIndex);
+    });
+    return {
+      stackControl,
+      hasActiveChild,
+    };
+  },
+  render() {
+    const {
+      render,
+      // color,
+    } = this.stackControl;
+    const headerSlot = this.$slots.header || this.header;
+    return render((children) => {
+      return (
+        <div
+          class={[
+            'v-sheet-modal',
+            {
+              'v-sheet-modal--has-active-child': this.hasActiveChild,
+            },
+            // color.colorClasses.value,
+          ]}
+          tabindex="0">
+          {headerSlot && (
+            <div class="v-sheet-modal__header">
+              {headerSlot(this.stackControl)}
+            </div>
+          )}
+          <div class="v-sheet-modal__scroller">{children}</div>
+        </div>
+      );
+    });
+  },
+});
+
+// export type VSheetModalStatic = typeof VSheetModal;

package/src/components/VSheetModal/index.ts

@@ -0,0 +1 @@
+export * from './VSheetModal';

package/src/components/VSnackbar/VSnackbar.scss

@@ -0,0 +1,33 @@
+.v-snackbar {
+  font-size: 14px;
+  box-shadow: var(--snackbar-shadow);
+
+  &__inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: auto;
+    min-width: 288px;
+    max-width: calc(100vw - 96px);
+    padding: 8px 4px 8px 16px;
+    color: var(--text-color);
+    background-color: var(--main-color);
+    border-color: var(--border-color);
+    border-radius: inherit;
+  }
+
+  &__body {
+    flex: 1 1 100%;
+    word-break: break-all;
+  }
+
+  &__actions {
+    flex: 0 0 auto;
+    padding-left: 20px;
+    white-space: nowrap;
+  }
+
+  &__close {
+    margin: 0;
+  }
+}

package/src/components/VSnackbar/VSnackbar.tsx

@@ -0,0 +1,48 @@
+import './VSnackbar.scss';
+
+import {
+  defineSnackbarComponent,
+  createStackActionProps,
+  useStackAction,
+} from '@fastkit/vue-stack';
+import { colorSchemeProps } from '@fastkit/vue-color-scheme';
+import { useVui } from '../../injections';
+import { useColorClasses } from '@fastkit/vue-color-scheme';
+
+const colorProps = colorSchemeProps();
+
+export const VSnackbar = defineSnackbarComponent({
+  name: 'VSnackbar',
+  props: {
+    ...createStackActionProps(),
+    ...colorProps,
+  },
+  setup(ctx) {
+    const { props, control } = ctx;
+    const vui = useVui();
+    const actionControl = useStackAction(props, control, {
+      resolver: (actions) => {
+        if (actions.length === 0) {
+          return [vui.stackAction('close')];
+        } else {
+          return actions;
+        }
+      },
+    });
+    const color = useColorClasses(props, { useRootThemeDefault: true });
+
+    return (children) => {
+      const { $actions } = actionControl;
+      return (
+        <div class={['v-snackbar', color.colorClasses.value]} {...ctx.attrs}>
+          <div class="v-snackbar__inner">
+            <div class="v-snackbar__body">{children}</div>
+            {$actions.length > 0 && (
+              <div class="v-snackbar__actions">{$actions}</div>
+            )}
+          </div>
+        </div>
+      );
+    };
+  },
+});

package/src/components/VSnackbar/index.ts

@@ -0,0 +1 @@
+export * from './VSnackbar';

package/src/components/VSwitch/VSwitch.tsx

@@ -41,7 +41,6 @@ export const VSwitch = defineComponent({
           {
             'v-switch--selected': selectorItemControl.selected,
             'v-switch--disabled': selectorItemControl.isDisabled,
-            xxxxx: selectorItemControl.booted,
           },
           this.classes,
         ]}

package/src/components/VTooltip/VTooltip.scss

@@ -0,0 +1,18 @@
+.v-tooltip {
+  --menu-shadow: var(--tooltip-shadow);
+
+  font-size: var(--tooltip-font-size);
+
+  .v-menu__body {
+    color: var(--tooltip-color) !important;
+    background: var(--tooltip-background) !important;
+  }
+
+  border-radius: var(--tooltip-radius);
+  // opacity: var(--tooltip-opacity);
+
+  &__inner {
+    display: inline-block;
+    padding: var(--tooltip-padding);
+  }
+}

package/src/components/VTooltip/VTooltip.tsx

@@ -0,0 +1,42 @@
+import './VTooltip.scss';
+
+import { defineComponent } from 'vue';
+import { VMenu } from '../VMenu';
+
+export const VTooltip = defineComponent({
+  name: 'VTooltip',
+  inheritAttrs: false,
+  setup(_props, ctx) {
+    return () => {
+      const attrs = {
+        ...ctx.attrs,
+      };
+
+      const defaultSlot = ctx.slots.default;
+      if (attrs.openOnHover == null) {
+        attrs.openOnHover = true;
+      }
+      if (attrs.openDelay == null) {
+        attrs.openDelay = 200;
+      }
+
+      return (
+        <VMenu
+          {...attrs}
+          scrollLock={false}
+          class="v-tooltip"
+          v-slots={{
+            ...ctx.slots,
+            default: (payload) => {
+              return [
+                <span class="v-tooltip__inner">
+                  {defaultSlot && defaultSlot(payload)}
+                </span>,
+              ];
+            },
+          }}
+        />
+      );
+    };
+  },
+}) as typeof VMenu;

package/src/components/VTooltip/index.ts

@@ -0,0 +1 @@
+export * from './VTooltip';

package/src/components/index.ts

@@ -1,5 +1,9 @@
 export * from './loading';
-export * from './kits';
+export * from './VDialog';
+export * from './VMenu';
+export * from './VSnackbar';
+export * from './VTooltip';
+export * from './VSheetModal';
 export * from './VSkeltonLoader';
 export * from './VBusyImage';
 export * from './VGrid';