@fastkit/vui 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "A simple, extensible UI kit for Vue applications.",
   "keywords": [
     "fastkit",
@@ -44,32 +44,32 @@
     "src"
   ],
   "dependencies": {
+    "@fastkit/color-scheme-gen": "^1.1.0",
     "@fastkit/color-scheme": "^2.1.0",
-    "@fastkit/helpers": "^0.15.0",
     "@fastkit/icon-font": "^2.1.0",
-    "@fastkit/color-scheme-gen": "^1.1.0",
     "@fastkit/media-match": "^2.1.0",
+    "@fastkit/helpers": "^0.15.0",
     "@fastkit/dom": "^0.3.0",
-    "@fastkit/vue-app-layout": "^0.18.0",
+    "@fastkit/rules": "^0.15.0",
+    "@fastkit/stylebase": "^0.13.1",
     "@fastkit/tiny-logger": "^0.15.0",
     "@fastkit/vue-action": "^0.5.0",
-    "@fastkit/vue-disabled-reason": "^0.2.0",
+    "@fastkit/media-match-gen": "^1.1.0",
     "@fastkit/vue-body-scroll-lock": "^0.4.0",
-    "@fastkit/vue-click-outside": "^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-stack": "^0.19.0",
-    "@fastkit/vue-form-control": "^0.23.0",
     "@fastkit/vue-media-match": "^0.16.0",
+    "@fastkit/vue-utils": "^0.17.0",
     "@fastkit/vue-scroller": "^0.17.0",
-    "@fastkit/media-match-gen": "^1.1.0",
-    "@fastkit/rules": "^0.15.0",
-    "@fastkit/stylebase": "^0.13.1",
     "@fastkit/vue-transitions": "^0.4.0",
-    "@fastkit/vue-utils": "^0.17.0"
+    "@fastkit/vue-stack": "^0.19.2"
   },
   "devDependencies": {
     "vue": "^3.5.22",

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/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/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>;