@fastkit/vui 1.1.1 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "1.1.1",
+  "version": "1.3.0",
   "description": "A simple, extensible UI kit for Vue applications.",
   "keywords": [
     "fastkit",
@@ -44,39 +44,39 @@
     "src"
   ],
   "dependencies": {
-    "@fastkit/color-scheme": "^2.1.0",
-    "@fastkit/helpers": "^0.15.0",
     "@fastkit/color-scheme-gen": "^1.1.0",
+    "@fastkit/color-scheme": "^2.1.0",
     "@fastkit/icon-font": "^2.1.0",
-    "@fastkit/dom": "^0.3.0",
     "@fastkit/media-match": "^2.1.0",
+    "@fastkit/helpers": "^0.15.0",
+    "@fastkit/dom": "^0.3.0",
+    "@fastkit/rules": "^0.15.0",
+    "@fastkit/stylebase": "^0.13.1",
     "@fastkit/tiny-logger": "^0.15.0",
+    "@fastkit/vue-action": "^0.5.0",
     "@fastkit/media-match-gen": "^1.1.0",
-    "@fastkit/stylebase": "^0.13.1",
-    "@fastkit/vue-action": "^0.4.0",
-    "@fastkit/rules": "^0.15.0",
-    "@fastkit/vue-click-outside": "^0.3.0",
-    "@fastkit/vue-disabled-reason": "^0.1.0",
-    "@fastkit/vue-form-control": "^0.22.1",
-    "@fastkit/vue-body-scroll-lock": "^0.3.0",
-    "@fastkit/vue-keyboard": "^0.3.0",
-    "@fastkit/vue-loading": "^0.16.0",
-    "@fastkit/vue-app-layout": "^0.17.0",
-    "@fastkit/vue-location": "^0.5.0",
-    "@fastkit/vue-color-scheme": "^0.16.0",
-    "@fastkit/vue-media-match": "^0.15.0",
-    "@fastkit/vue-scroller": "^0.16.0",
-    "@fastkit/vue-resize": "^0.3.0",
-    "@fastkit/vue-stack": "^0.18.0",
-    "@fastkit/vue-utils": "^0.16.0",
-    "@fastkit/vue-transitions": "^0.3.0"
+    "@fastkit/vue-body-scroll-lock": "^0.4.0",
+    "@fastkit/vue-app-layout": "^0.18.0",
+    "@fastkit/vue-disabled-reason": "^0.2.0",
+    "@fastkit/vue-color-scheme": "^0.17.0",
+    "@fastkit/vue-form-control": "^0.24.0",
+    "@fastkit/vue-click-outside": "^0.4.0",
+    "@fastkit/vue-keyboard": "^0.4.0",
+    "@fastkit/vue-location": "^0.6.0",
+    "@fastkit/vue-loading": "^0.17.0",
+    "@fastkit/vue-resize": "^0.4.0",
+    "@fastkit/vue-media-match": "^0.16.0",
+    "@fastkit/vue-utils": "^0.17.0",
+    "@fastkit/vue-scroller": "^0.17.0",
+    "@fastkit/vue-transitions": "^0.4.0",
+    "@fastkit/vue-stack": "^0.19.2"
   },
   "devDependencies": {
-    "vue": "^3.5.21",
+    "vue": "^3.5.22",
     "vue-router": "^4.5.1"
   },
   "peerDependencies": {
-    "vue": "^3.4.0",
+    "vue": "^3.5.0",
     "vue-router": "^4.4.0"
   },
   "buildOptions": {

package/src/components/VControlField/VControlField.scss

@@ -6,6 +6,7 @@
     width: 100%;
     min-width: 0;
     height: var(--control-field-height);
+    min-height: var(--control-field-height);
     padding: 0 8px;
     font-size: var(--control-field-font-size);
     line-height: var(--control-field-line-height);

package/src/components/VControlField/VControlField.tsx

@@ -64,7 +64,7 @@ export const VControlField = defineComponent({
     error: Boolean,
   },
   emits: {
-    click: (ev: MouseEvent) => true,
+    click: (ev: PointerEvent) => true,
   },
   slots,
   setup(props, ctx) {
@@ -139,7 +139,7 @@ export const VControlField = defineComponent({
       );
     };
 
-    const handleClick = (ev: MouseEvent) => ctx.emit('click', ev);
+    const handleClick = (ev: PointerEvent) => ctx.emit('click', ev);
 
     return () => (
       <div

package/src/components/VDataTable/VDataTable.tsx

@@ -493,7 +493,7 @@ export const VDataTable = defineComponent({
       }
     }
 
-    function handleClickSortHeader(header: DataTableHeader, ev: MouseEvent) {
+    function handleClickSortHeader(header: DataTableHeader, ev: PointerEvent) {
       const { sortQuery } = header;
       if (!sortQuery) return;
       if (sortByRef.value === sortQuery) {

package/src/components/VFileInput/VFileInput.scss

@@ -0,0 +1,42 @@
+@use '../../styles/core';
+
+@layer vui {
+  .v-file-input {
+    &__inner {
+      display: flex;
+      align-items: stretch;
+    }
+
+    &__button {
+      flex: 0 0 auto;
+      height: auto;
+      margin: 0;
+      margin-bottom: 1px;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &__selections {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      align-self: stretch;
+      padding: 4px 6px;
+    }
+
+    &__placeholder {
+      color: var(--control-disabled-color);
+    }
+
+    &__input {
+      flex: 1 1 100%;
+      cursor: text;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+
+      &__element {
+        @include core.hidden-input-element;
+      }
+    }
+  }
+}

package/src/components/VFileInput/VFileInput.tsx

@@ -0,0 +1,178 @@
+import './VFileInput.scss';
+import { defineComponent, computed } from 'vue';
+import {
+  createFileInputNodeSettings,
+  useFileInputNodeControl,
+  createFormNodeWrapperProps,
+  FormNodeWrapperSlots,
+  FileInputNodeEmits,
+  type FileInputNodeControl,
+} from '@fastkit/vue-form-control';
+import { defineSlots, ExtractPropInput, withCtx } from '@fastkit/vue-utils';
+import { VFormControl } from '../VFormControl';
+import {
+  VControlField,
+  createControlFieldProps,
+  InputBoxSlots,
+} from '../VControlField';
+import {
+  createControlProps,
+  useControl,
+  createControlFieldProviderProps,
+  useControlField,
+} from '../../composables';
+import { colorSchemeProps } from '@fastkit/vue-color-scheme';
+import { VUI_FILE_INPUT_SYMBOL, useVui } from '../../injections';
+import { VButton } from '../VButton';
+
+const { props, emits } = createFileInputNodeSettings();
+
+const slots = defineSlots<
+  FormNodeWrapperSlots &
+    InputBoxSlots & {
+      selections?: (control: FileInputNodeControl) => any;
+    }
+>();
+
+function createFileInputProps() {
+  return {
+    ...props,
+    ...colorSchemeProps(),
+    ...createFormNodeWrapperProps(),
+    ...createControlFieldProps(),
+    ...createControlFieldProviderProps(),
+    ...createControlProps(),
+    ...slots(),
+    buttonText: {
+      type: String,
+      default: 'Choose File',
+    },
+    truncateLength: {
+      type: [Number, String],
+      default: 22,
+    },
+  };
+}
+
+export type FileInputPropsOptions = ReturnType<typeof createFileInputProps>;
+
+export type FileInputEmits = FileInputNodeEmits;
+
+export type FileInputInput = ExtractPropInput<
+  ReturnType<typeof createFileInputProps>
+>;
+
+export const VFileInput = defineComponent({
+  name: 'VFileInput',
+  props: createFileInputProps(),
+  emits,
+  slots,
+  setup(props, ctx) {
+    const vui = useVui();
+    const inputControl = useFileInputNodeControl(props, ctx, {
+      nodeType: VUI_FILE_INPUT_SYMBOL,
+    });
+    const control = useControl(props);
+    useControlField(props);
+
+    const classes = computed(() => ['v-file-input', control.classes.value]);
+
+    const handleClickLabel = (ev: PointerEvent) => {
+      inputControl.focus();
+    };
+
+    const endAdornmentSlot = () => {
+      // }
+      if (props.clearable && inputControl.value.length) {
+        return (
+          <VButton
+            key="clear"
+            icon={vui.icon('clear')}
+            rounded
+            onClick={(ev) => {
+              ev.stopPropagation();
+              inputControl.clear();
+            }}
+          />
+        );
+      }
+    };
+
+    const showDialog = () => {
+      if (inputControl.canOperation) {
+        inputControl.inputElement?.click();
+      }
+    };
+
+    const renderSelections = () => {
+      if (ctx.slots.selections) {
+        return ctx.slots.selections(inputControl);
+      }
+
+      const { files } = inputControl.selectionContext;
+      if (!files.length)
+        return (
+          <span class="v-file-input__placeholder">
+            {inputControl.placeholder || 'No file chosen'}
+          </span>
+        );
+      return files.map((file) => file.truncatedName).join(', ');
+    };
+
+    const defaultSlot = () => (
+      <div class="v-file-input__inner">
+        <VButton
+          key="open"
+          class="v-file-input__button"
+          color={'base' as any}
+          size={props.size}
+          startIcon={vui.icon('fileUpload')}
+          variant={vui.setting('containedVariant')}
+          onClick={showDialog}>
+          {props.buttonText}
+        </VButton>
+        <VControlField
+          class="v-file-input__input"
+          startAdornment={props.startAdornment}
+          endAdornment={props.endAdornment}
+          size={control.size.value}
+          onClick={showDialog}
+          autoHeight
+          v-slots={{
+            ...ctx.slots,
+            default: withCtx(() => [
+              inputControl.createInputElement({
+                class: 'v-file-input__input__element',
+              }),
+              <div class="v-file-input__selections">{renderSelections()}</div>,
+            ]),
+            endAdornment: withCtx(endAdornmentSlot),
+          }}
+        />
+      </div>
+    );
+
+    ctx.expose({
+      control: inputControl,
+    });
+
+    return () => (
+      <VFormControl
+        nodeControl={inputControl}
+        // focused={inputControl.focused}
+        hiddenInfo={props.hiddenInfo}
+        class={classes.value}
+        label={props.label}
+        hint={props.hint}
+        hinttip={props.hinttip}
+        requiredChip={props.requiredChip}
+        onClickLabel={handleClickLabel}
+        v-slots={{
+          ...ctx.slots,
+          default: withCtx(defaultSlot),
+          // infoAppends: withCtx(infoAppendsSlot),
+        }}
+      />
+    );
+  },
+});

package/src/components/VFileInput/index.ts

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

package/src/components/VFormControl/VFormControl.tsx

@@ -115,7 +115,8 @@ export const VFormControl = defineComponent({
       vui,
     );
 
-    const handleClick = (ev: MouseEvent) => ctx.emit('clickLabel', ev, control);
+    const handleClick = (ev: PointerEvent) =>
+      ctx.emit('clickLabel', ev, control);
 
     return () => {
       const label = control.renderLabel();

package/src/components/VIcon/VIcon.tsx

@@ -77,7 +77,7 @@ export const VIcon = defineComponent({
     ...iconProps,
   },
   emits: {} as {
-    click: (ev: MouseEvent) => true;
+    click: (ev: PointerEvent) => true;
   },
   setup(props, ctx) {
     const iconName = computed(() => props.name);

package/src/components/VNavigation/VNavigationItem.tsx

@@ -177,7 +177,7 @@ export const VNavigationItem = defineComponent({
       return opened.value ? close() : open();
     }
 
-    const onClick = (ev: MouseEvent) => {
+    const onClick = (ev: PointerEvent) => {
       if (!to.value) {
         return toggle();
       }

package/src/components/VPagination/VPagination.tsx

@@ -267,7 +267,7 @@ export const VPagination = defineComponent({
             });
           })();
 
-      const onClick = (ev: MouseEvent) => {
+      const onClick = (ev: PointerEvent) => {
         ev.preventDefault();
         if (page === undefined || active || disabled) return;
         setPage(page);

package/src/components/VSelect/VSelect.tsx

@@ -248,10 +248,10 @@ export const VSelect = defineComponent({
       );
 
       if (currentEl) {
-        const ev = new MouseEvent('click', {
-          view: window,
+        const ev = new PointerEvent('click', {
           bubbles: true,
           cancelable: true,
+          view: window,
         });
         currentEl.dispatchEvent(ev);
         ev.preventDefault();
@@ -283,7 +283,7 @@ export const VSelect = defineComponent({
       closeMenu,
     });
 
-    const handleClickLabel = (ev: MouseEvent) => {
+    const handleClickLabel = (ev: PointerEvent) => {
       focus();
     };
 

package/src/components/VTabs/VTab.tsx

@@ -28,7 +28,7 @@ export const VTab = defineComponent({
     icon: [String, Function] as PropType<RawIconProp>,
   },
   emits: {
-    click: (ev: MouseEvent) => true,
+    click: (ev: PointerEvent) => true,
   },
   setup(props, ctx) {
     const classesRef = computed(() => ({

package/src/components/VTextField/VTextField.tsx

@@ -60,7 +60,7 @@ export const VTextField = defineComponent({
 
     const classes = computed(() => ['v-text-field', control.classes.value]);
 
-    const handleClickLabel = (ev: MouseEvent) => {
+    const handleClickLabel = (ev: PointerEvent) => {
       inputControl.focus();
     };
 

package/src/components/index.ts

@@ -35,6 +35,7 @@ export * from './VSelect';
 export * from './VTextField';
 export * from './VNumberField';
 export * from './VTextarea';
+export * from './VFileInput';
 // export * from './VWysiwygEditor';
 export * from './VFormGroup';
 export * from './VForm';

package/src/injections.ts

@@ -27,6 +27,7 @@ export const VUI_RADIO_GROUP_SYMBOL = 'vui-radio-group';
 export const VUI_RADIO_SYMBOL = 'vui-radio';
 export const VUI_SWITCH_GROUP_SYMBOL = 'vui-switch-group';
 export const VUI_SWITCH_SYMBOL = 'vui-switch';
+export const VUI_FILE_INPUT_SYMBOL = 'vui-file-input';
 export const VUI_FORM_GROUP_SYMBOL = 'vui-form-group';
 export const VUI_FORM_SYMBOL = 'vui-form';
 

package/src/service.tsx

@@ -132,6 +132,7 @@ export interface VuiServiceIconSettings {
   hinttip: IconName;
   clear: IconName;
   reload: IconName;
+  fileUpload: IconName;
 }
 
 export type RawVuiServiceIconSettings = Partial<VuiServiceIconSettings>;
@@ -439,7 +440,7 @@ export class VuiService {
     const action: VStackAction = {
       key,
       content: ({ control, key }) => {
-        const onClick = (ev: MouseEvent) => _onClick(control, ev);
+        const onClick = (ev: PointerEvent) => _onClick(control, ev);
 
         const _attrs: any = {
           disabled: control.guardInProgress,