@fastkit/vui 0.6.39 → 0.6.43

package/src/components/VDataTable/index.ts

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

package/src/components/VDrawerLayout/VDrawerLayout.scss

@@ -0,0 +1,26 @@
+.v-drawer-layout {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  height: 100%;
+
+  &__header {
+    display: flex;
+    flex: 0 0 var(--v-app-layout-vertial-fixed-height);
+    align-items: center;
+    justify-content: center;
+    height: var(--v-app-layout-vertial-fixed-height);
+  }
+
+  &__body {
+    flex: 1 1 100%;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  &__footer {
+    flex: 0 0 auto;
+    margin-top: auto;
+  }
+}

package/src/components/VDrawerLayout/VDrawerLayout.tsx

@@ -0,0 +1,35 @@
+import './VDrawerLayout.scss';
+import { defineComponent, computed } from 'vue';
+import { createPaperBaseProps, VPaper } from '../VPaper';
+
+export const VDrawerLayout = defineComponent({
+  name: 'VDrawerLayout',
+  props: {
+    ...createPaperBaseProps(),
+  },
+  setup(props, ctx) {
+    return () => {
+      const paperProps = computed(() => ({
+        color: props.color,
+        tag: props.tag,
+      }));
+
+      return (
+        <VPaper
+          class="v-drawer-layout"
+          {...paperProps.value}
+          square
+          headerProps={{
+            class: 'v-drawer-layout__header',
+          }}
+          bodyProps={{
+            class: 'v-drawer-layout__body',
+          }}
+          footerProps={{
+            class: 'v-drawer-layout__footer',
+          }}
+          v-slots={ctx.slots}></VPaper>
+      );
+    };
+  },
+});

package/src/components/VDrawerLayout/index.ts

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

package/src/components/VForm/VForm.tsx

@@ -0,0 +1,77 @@
+import { defineComponent, computed } from 'vue';
+import {
+  VueForm,
+  createFormSettings,
+  useForm,
+  defineSlotsProps,
+  renderSlotOrEmpty,
+  getDocumentScroller,
+} from '@fastkit/vue-kit';
+import { createControlProps, useControl } from '../../composables';
+import { VUI_FORM_SYMBOL, useVui } from '../../injections';
+
+const { props, emits } = createFormSettings({
+  nodeType: VUI_FORM_SYMBOL,
+});
+
+export interface VFormSlots {
+  default: VueForm;
+}
+
+export const VForm = defineComponent({
+  name: 'VForm',
+  props: {
+    ...props,
+    ...createControlProps(),
+    ...defineSlotsProps<VFormSlots>(),
+    disableAutoScroll: Boolean,
+  },
+  emits,
+  setup(props, ctx) {
+    const vui = useVui();
+    const nodeControl = useForm(props, ctx as any, {
+      nodeType: VUI_FORM_SYMBOL,
+      onAutoValidateError: () => {
+        if (props.disableAutoScroll) return;
+        const scroller = getDocumentScroller();
+        const { firstInvalidEl } = nodeControl;
+        firstInvalidEl &&
+          scroller.toElement(firstInvalidEl, {
+            offset: vui.getAutoScrollToElementOffsetTop(),
+          });
+      },
+    });
+    const classes = computed(() => {
+      return [
+        'v-form',
+        {
+          'v-form--valid': nodeControl.valid,
+          'v-form--invalid': nodeControl.invalid,
+          'v-form--disabled': nodeControl.isDisabled,
+          'v-form--validating': nodeControl.validating,
+          'v-form--pending': nodeControl.pending,
+          'v-form--submiting': nodeControl.submiting,
+        },
+      ];
+    });
+    useControl(props);
+
+    return {
+      ...nodeControl.expose(),
+      classes,
+    };
+  },
+  render() {
+    const { form } = this;
+    return (
+      <form
+        ref={this.formRef()}
+        class={this.classes}
+        action={this.nativeAction}
+        spellcheck={this.spellcheck}
+        onSubmit={form.handleSubmit}>
+        {renderSlotOrEmpty(this.$slots, 'default', form as any)}
+      </form>
+    );
+  },
+});

package/src/components/VForm/index.ts

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

package/src/components/VFormControl/VFormControl.scss

@@ -0,0 +1,59 @@
+.v-form-control {
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  margin: var(--control-horizontal-margin) 0;
+
+  // --control-label-font-size: calc(var(--control-field-font-size) * 0.75); // 12
+  --my-label-color: var(--control-label-color);
+  --my-message-color: var(--control-message-color);
+
+  &--invalid:not(#{&}--readonly) {
+    --my-label-color: var(--main-color);
+    --my-message-color: var(--main-color);
+  }
+
+  &--disabled {
+    --my-label-color: var(--control-disabled-color);
+    --my-message-color: var(--control-disabled-color);
+  }
+
+  &__label {
+    align-self: flex-start;
+    font-size: var(--control-label-font-size);
+    font-weight: var(--control-label-font-weight);
+    line-height: var(--control-label-height);
+    color: var(--my-label-color);
+    letter-spacing: 0.00938em;
+  }
+
+  // &--disabled &__body {
+  //   user-select: none;
+  // }
+
+  &__info {
+    display: flex;
+    padding-top: 3px;
+  }
+
+  &__message,
+  &__appends {
+    margin: 0 var(--control-message-horizontal-margin);
+    font-size: var(--control-message-font-size);
+    line-height: 1.66;
+    color: var(--my-message-color);
+  }
+
+  &__message {
+    flex: 1 0;
+    // margin: 0 var(--control-message-horizontal-margin);
+    // font-size: var(--control-message-font-size);
+    // line-height: 1.66;
+    // color: var(--my-message-color);
+  }
+
+  &__appends {
+    flex: 0 1;
+    margin-left: auto;
+  }
+}

package/src/components/VFormControl/VFormControl.tsx

@@ -0,0 +1,85 @@
+import './VFormControl.scss';
+import { computed, defineComponent } from 'vue';
+import {
+  createFormControlSettings,
+  useFormControl,
+  FormControlSlots,
+  defineSlotsProps,
+  FormControl,
+  renderSlotOrEmpty,
+} from '@fastkit/vue-kit';
+import { useVuiColorProvider, useVui } from '../../injections';
+
+const { props, emits } = createFormControlSettings();
+
+export const VFormControl = defineComponent({
+  name: 'VFormControl',
+  props: {
+    ...props,
+    ...defineSlotsProps<
+      FormControlSlots & {
+        default: FormControl;
+      }
+    >(),
+  },
+  emits,
+  setup(props, ctx) {
+    const control = useFormControl(props, ctx);
+    ctx.expose(control.expose());
+
+    const vui = useVui();
+    const colorProvider = useVuiColorProvider();
+
+    const classes = computed(() => [
+      {
+        'v-form-control--validating': control.validating,
+        'v-form-control--pending': control.pending,
+        'v-form-control--focused': control.focused,
+        'v-form-control--dirty': control.dirty,
+        'v-form-control--pristine': control.pristine,
+        'v-form-control--disabled': control.disabled,
+        'v-form-control--readonly': control.readonly,
+        'v-form-control--touched': control.touched,
+        'v-form-control--untouched': control.untouched,
+        'v-form-control--invalid': control.invalid,
+        'v-form-control--valid': control.valid,
+      },
+      colorProvider.className(
+        control.invalid && !control.readonly ? 'error' : 'primary',
+      ),
+    ]);
+
+    return () => {
+      const label = control.renderLabel();
+      const message = control.renderMessage();
+      const appends = control.renderInfoAppends();
+      return (
+        <div class={['v-form-control', classes.value]}>
+          {label && (
+            <label
+              class="v-form-control__label"
+              onClick={(ev) => {
+                ctx.emit('clickLabel', ev, control);
+              }}>
+              {label}
+              {control.required && vui.getRequiredChip()}
+            </label>
+          )}
+          <div class="v-form-control__body">
+            {renderSlotOrEmpty(ctx.slots, 'default', control as any)}
+            {!props.hiddenInfo && (
+              <div class="v-form-control__info">
+                {!!message && (
+                  <div class="v-form-control__message">{message}</div>
+                )}
+                {!!appends && (
+                  <div class="v-form-control__appends">{appends}</div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      );
+    };
+  },
+});

package/src/components/VFormControl/index.ts

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

package/src/components/VGrid/VGridContainer.scss

@@ -0,0 +1,4 @@
+.v-grid-container {
+  display: flex;
+  flex-wrap: wrap;
+}

package/src/components/VGrid/VGridContainer.tsx

@@ -0,0 +1,191 @@
+import './VGridContainer.scss';
+
+import { defineComponent, computed } from 'vue';
+import { htmlAttributesPropOptions } from '@fastkit/vue-utils';
+import { RawGridValueProp, extractRawGridValueClasses } from './schemes';
+
+export type GridContainerSpacingValue =
+  | 0
+  | 0.5
+  | 1
+  | 1.5
+  | 2
+  | 2.5
+  | 3
+  | 3.5
+  | 4
+  | 4.5
+  | 5
+  | 5.5
+  | 6
+  | 6.5
+  | 7
+  | 7.5
+  | 8
+  | 8.5
+  | 9
+  | 9.5
+  | 10;
+
+function spacingValueToString(value: GridContainerSpacingValue): string {
+  return Number.isInteger(value) ? String(value) : `${value}h`;
+}
+
+export type GridContainerDirectionValue =
+  | 'row'
+  | 'row-reverse'
+  | 'column'
+  | 'column-reverse';
+
+export type GridContainerWrapValue = 'wrap' | 'nowrap' | 'wrap-reverse';
+
+export type GridContainerAlignContentValue =
+  | 'flex-start'
+  | 'flex-end'
+  | 'start'
+  | 'end'
+  | 'stretch'
+  | 'baseline'
+  | 'center'
+  | 'self-start'
+  | 'self-end';
+
+export type GridContainerJustifyContentValue =
+  | 'start'
+  | 'end'
+  | 'flex-start'
+  | 'flex-end'
+  | 'center'
+  | 'baseline'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly'
+  | 'stretch';
+
+export const VGridContainer = defineComponent({
+  name: 'VGridContainer',
+  inheritAttrs: false,
+  props: {
+    ...htmlAttributesPropOptions,
+    wrapperTag: {
+      type: String,
+      default: 'div',
+    },
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    spacing:
+      undefined as unknown as RawGridValueProp<GridContainerSpacingValue>,
+    spacingX:
+      undefined as unknown as RawGridValueProp<GridContainerSpacingValue>,
+    spacingY:
+      undefined as unknown as RawGridValueProp<GridContainerSpacingValue>,
+    direction:
+      undefined as unknown as RawGridValueProp<GridContainerDirectionValue>,
+    wrap: undefined as unknown as RawGridValueProp<GridContainerWrapValue>,
+    alignContent:
+      undefined as unknown as RawGridValueProp<GridContainerAlignContentValue>,
+    justifyContent:
+      undefined as unknown as RawGridValueProp<GridContainerJustifyContentValue>,
+  },
+  setup(props, ctx) {
+    const data = computed(() => {
+      const classes: any[] = [];
+
+      const attrs = {
+        ...ctx.attrs,
+      };
+
+      const {
+        spacing,
+        spacingX,
+        spacingY,
+        direction,
+        wrap,
+        alignContent,
+        justifyContent,
+      } = props;
+      const wrapperClass = attrs.class;
+      const wrapperStyle = attrs.style as any;
+
+      delete attrs.class;
+      delete attrs.style;
+      delete attrs.spacing;
+      delete attrs.spacingX;
+      delete attrs.spacingY;
+      delete attrs.direction;
+      delete attrs.wrap;
+      delete attrs.alignContent;
+      delete attrs.justifyContent;
+
+      // spacingX = mergeSpacing(spacing, spacingX);
+      // spacingY = mergeSpacing(spacing, spacingY);
+      // if (!spacingX) {
+      //   spacingX = spacing;
+      // }
+
+      // align &&
+      //   classes.push(extractRawGridItemValueClasses(align, 'self-align-'));
+      // justify &&
+      //   classes.push(extractRawGridItemValueClasses(justify, 'self-justify-'));
+      spacing != null &&
+        classes.push(
+          extractRawGridValueClasses(
+            spacing,
+            'grid-spacing-',
+            spacingValueToString,
+          ),
+        );
+      spacingX != null &&
+        classes.push(
+          extractRawGridValueClasses(
+            spacingX,
+            'grid-spacing-x-',
+            spacingValueToString,
+          ),
+        );
+      spacingY != null &&
+        classes.push(
+          extractRawGridValueClasses(
+            spacingY,
+            'grid-spacing-y-',
+            spacingValueToString,
+          ),
+        );
+
+      direction &&
+        classes.push(extractRawGridValueClasses(direction, 'direction-'));
+      wrap && classes.push(extractRawGridValueClasses(wrap, ''));
+      alignContent &&
+        classes.push(extractRawGridValueClasses(alignContent, 'align-'));
+      justifyContent &&
+        classes.push(extractRawGridValueClasses(justifyContent, 'justify-'));
+
+      return {
+        wrapperClass,
+        wrapperStyle,
+        classes,
+        attrs,
+      };
+    });
+
+    return () => {
+      const WrapperTag = props.wrapperTag as 'div';
+      const TagName = props.tag as 'div';
+      const { wrapperClass, wrapperStyle, classes, attrs } = data.value;
+
+      return (
+        <WrapperTag
+          class={['v-grid-container-wrapper', wrapperClass]}
+          style={wrapperStyle}>
+          <TagName
+            class={['v-grid-container grid-container', classes]}
+            {...attrs}
+            v-slots={ctx.slots}
+          />
+        </WrapperTag>
+      );
+    };
+  },
+});

package/src/components/VGrid/VGridItem.scss

@@ -0,0 +1,3 @@
+.v-grid-item {
+  display: block;
+}

package/src/components/VGrid/VGridItem.tsx

@@ -0,0 +1,114 @@
+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 =
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12;
+
+export type GridItemSizeValue = GridItemNumberSizeValue | 'auto';
+
+// type MQSizeProps = Record<
+//   MediaMatchKey,
+//   PropType<GridItemSizeValue | undefined>
+// >;
+
+export type GridItemAlignValue =
+  | 'flex-start'
+  | 'flex-end'
+  | 'start'
+  | 'end'
+  | 'stretch'
+  | 'baseline'
+  | 'center'
+  | 'self-start'
+  | 'self-end';
+
+export type GridItemJustifyValue =
+  | 'start'
+  | 'end'
+  | 'flex-start'
+  | 'flex-end'
+  | 'center'
+  | 'baseline'
+  | 'stretch';
+
+export const VGridItem = defineComponent({
+  name: 'VGridItem',
+  inheritAttrs: false,
+  props: {
+    ...htmlAttributesPropOptions,
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    // ...(undefined as unknown as MQSizeProps),
+    size: undefined as unknown as RawGridValueProp<GridItemSizeValue>,
+    align: undefined as unknown as RawGridValueProp<GridItemAlignValue>,
+    justify: undefined as unknown as RawGridValueProp<GridItemJustifyValue>,
+    order: undefined as unknown as RawGridValueProp<number | string>,
+  },
+  setup(props, ctx) {
+    const data = computed(() => {
+      const classes: any[] = [];
+
+      const attrs = {
+        ...ctx.attrs,
+      };
+
+      const { size, align, justify, order } = props;
+
+      delete attrs.size;
+      delete attrs.align;
+      delete attrs.justify;
+      delete attrs.order;
+
+      size != null &&
+        classes.push(extractRawGridValueClasses(size, 'grid-size-'));
+      align && classes.push(extractRawGridValueClasses(align, 'self-align-'));
+      justify &&
+        classes.push(extractRawGridValueClasses(justify, 'self-justify-'));
+      order != null &&
+        classes.push(extractRawGridValueClasses(order, 'order-'));
+
+      // MEDIA_MATCH_CONDITIONS.forEach(({ key }) => {
+      //   const v = attrs[key];
+      //   delete attrs[key];
+      //   if (v != null) {
+      //     classes.push(`grid-size-${v}--${key}`);
+      //   }
+      // });
+
+      return {
+        classes,
+        attrs,
+      };
+    });
+
+    return () => {
+      const TagName = props.tag as 'div';
+      const { classes, attrs } = data.value;
+
+      return (
+        <TagName
+          class={['v-grid-item grid-item', classes]}
+          {...attrs}
+          v-slots={ctx.slots}
+        />
+      );
+    };
+  },
+});

package/src/components/VGrid/index.ts

@@ -0,0 +1,2 @@
+export * from './VGridItem';
+export * from './VGridContainer';

package/src/components/VGrid/schemes.ts

@@ -0,0 +1,28 @@
+import { PropType } from 'vue';
+import { MediaMatchKey } from '@fastkit/media-match';
+
+export type RawGridValue<T extends number | string = number | string> =
+  | T
+  | Partial<Record<MediaMatchKey, T>>
+  | undefined;
+
+export type RawGridValueProp<T extends number | string = number | string> =
+  PropType<RawGridValue<T>>;
+
+export function extractRawGridValueClasses<
+  T extends number | string = number | string,
+>(
+  value: NonNullable<RawGridValue<T>>,
+  prefix: string,
+  getter?: (value: T) => string,
+): string | string[] {
+  if (typeof value !== 'object')
+    return `${prefix}${getter ? getter(value) : value}`;
+  return Object.entries(value).map(([breakpoint, breakpointValue]) => {
+    return `${prefix}${
+      getter ? getter(breakpointValue) : breakpointValue
+    }--${breakpoint}`;
+  });
+}
+
+// export const DEFAULT_MEDIA_MATCH_KEY = MEDIA_MATCH_CONDITIONS[0].key;

package/src/components/VHero/VHero.scss

@@ -0,0 +1,26 @@
+.v-hero {
+  --hero-background-color: var(--main-color);
+  --hero-text-color: var(--text-color);
+
+  display: flex;
+  align-items: center;
+  padding: 20px 30px;
+  margin: 0;
+  color: var(--hero-text-color);
+  background-color: var(--hero-background-color);
+
+  &__title {
+    flex: 1 1 100%;
+    margin: 0;
+    font-size: 1.75rem;
+    font-weight: 300;
+    line-height: 1;
+    color: inherit;
+  }
+
+  &__adornment {
+    flex: 0 0 auto;
+    padding-left: 10px;
+    margin-left: auto;
+  }
+}