@fastkit/vui 0.6.38 → 0.6.42

package/src/components/VControlField/VControlField.scss

@@ -0,0 +1,183 @@
+.v-control-field {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  height: var(--control-field-height);
+  padding: 0 8px;
+  font-size: var(--control-field-font-size);
+  line-height: var(--control-field-line-height);
+  letter-spacing: var(--control-field-letter-spacing);
+
+  --my-bottom-color: var(--control-field-bottom-color);
+  --my-bottom-hover-color: var(--control-field-bottom-hover-color);
+  --my-focused-color: var(--main-color);
+  --my-fill-color: var(--control-field-fill-color);
+  --my-fill-hover-color: var(--control-field-fill-hover-color);
+  --my-outline-color: var(--control-field-outline-color);
+  --my-outline-hover-color: var(--control-field-outline-hover-color);
+
+  &--invalid:not(#{&}--disabled):not(#{&}--readonly) {
+    --my-bottom-color: var(--main-color);
+    --my-bottom-hover-color: var(--main-color);
+    --my-outline-color: var(--main-color);
+    --my-outline-hover-color: var(--main-color);
+  }
+
+  &--readonly {
+    // pointer-events: none !important;
+    cursor: default;
+  }
+
+  &--disabled {
+    color: var(--control-disabled-color);
+    pointer-events: none;
+    // cursor: not-allowed !important;
+    user-select: none;
+  }
+
+  &::before,
+  &::after {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    pointer-events: none;
+    content: '';
+    // transition: all 0.2s;
+  }
+
+  &::before {
+    height: 1px;
+    border-bottom: solid 1px var(--my-bottom-color);
+    transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  }
+
+  &::after {
+    height: 2px;
+    background: var(--my-focused-color);
+    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+    transform: scaleX(0);
+  }
+
+  &--focused,
+  &:focus-within {
+    --my-outline-color: var(--my-focused-color);
+    --my-outline-hover-color: var(--my-focused-color);
+
+    outline: none;
+
+    &::after {
+      transform: scaleX(1);
+    }
+  }
+
+  // &:focus-within {
+  //   &::after {
+  //     transform: scaleX(1);
+  //   }
+  // }
+
+  &--auto-height {
+    height: auto;
+  }
+
+  &__body {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: stretch;
+    align-self: stretch;
+    // margin: 0 8px;
+    margin: 0;
+    // pointer-events: none;
+
+    // color: #f00;
+
+    // background-color: var(--control-fill-color);
+    // border: solid 1px;
+  }
+
+  &--flat {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  &--filled {
+    background-color: var(--my-fill-color);
+    border-top-left-radius: var(--control-field-radius);
+    border-top-right-radius: var(--control-field-radius);
+    transition: background-color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+
+    &:hover:not(:focus-within) {
+      background-color: var(--my-fill-hover-color);
+    }
+  }
+
+  &--flat:hover,
+  &--filled:hover {
+    &::before {
+      border-color: var(--my-bottom-hover-color);
+    }
+  }
+
+  &--flat:hover {
+    &::before {
+      height: 2px;
+      border-bottom-width: 2px;
+    }
+  }
+
+  &--flat#{&}--disabled,
+  &--filled#{&}--disabled {
+    &::before {
+      border-bottom-style: dotted;
+    }
+  }
+
+  &--outlined {
+    // border: solid 1px var(--my-outline-color);
+    border-radius: var(--control-field-radius);
+    transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+
+    &::before {
+      top: 0;
+      height: auto;
+      background: transparent;
+      border: solid 1px var(--my-outline-color);
+      border-radius: inherit;
+    }
+
+    &:hover::before {
+      border-color: var(--my-outline-hover-color);
+    }
+
+    &::after {
+      content: none;
+    }
+
+    &:focus-within {
+      box-shadow: 0 0 1px var(--shadow-color),
+        0 0 2px 2px var(--focusShadow-color);
+      // border-color: var(--my-focused-color);
+    }
+  }
+
+  &__adornment {
+    // pointer-events: none;
+
+    $my-offset: 0.25em;
+
+    &--start {
+      padding-right: $my-offset;
+    }
+
+    &--end {
+      padding-left: $my-offset;
+    }
+
+    .v-icon {
+      font-size: 1.2em;
+    }
+  }
+}

package/src/components/VControlField/VControlField.tsx

@@ -0,0 +1,152 @@
+import './VControlField.scss';
+import { computed, PropType, ref, defineComponent } from 'vue';
+import {
+  useParentFormNode,
+  VNodeChildOrSlot,
+  resolveVNodeChildOrSlots,
+  TypedSlot,
+  createPropsOptions,
+  defineSlotsProps,
+  renderSlotOrEmpty,
+} from '@fastkit/vue-kit';
+import {
+  createControlProps,
+  useControl,
+  createControlFieldProviderProps,
+  useControlField,
+} from '../../composables';
+import { useVuiColorProvider } from '../../injections';
+
+const ADORNMENT_POSITIONS = ['start', 'end'] as const;
+
+export type AdornmentPosition = typeof ADORNMENT_POSITIONS[number];
+
+export function createControlFieldProps() {
+  return {
+    ...createPropsOptions({
+      startAdornment: {} as PropType<VNodeChildOrSlot>,
+      endAdornment: {} as PropType<VNodeChildOrSlot>,
+      tabindex: {
+        type: [String, Number],
+        default: 0,
+      },
+    }),
+    ...createControlFieldProviderProps(),
+    ...createControlProps(),
+  };
+}
+
+// export const inputBoxSlots = {
+//   default: () => true,
+//   startAdornment: () => true,
+//   endAdornment: () => true,
+// };
+export interface InputBoxSlots {
+  default: void;
+  startAdornment: void;
+  endAdornment: void;
+}
+
+type ResolvedSlots = Partial<Record<AdornmentPosition, TypedSlot<void>>>;
+
+export const VControlField = defineComponent({
+  name: 'VControlField',
+  props: {
+    ...createControlFieldProps(),
+    focused: Boolean,
+    autoHeight: Boolean,
+    ...defineSlotsProps<InputBoxSlots>(),
+  },
+  // _slots: inputBoxSlots,
+  emits: {
+    click: (ev: MouseEvent) => true,
+  },
+  setup(props, ctx) {
+    const parentNode = useParentFormNode();
+    const control = useControl(props);
+    const inputBox = useControlField(props);
+    const hostElRef = ref<HTMLElement | null>(null);
+
+    const disabled = computed(() => !!parentNode && parentNode.isDisabled);
+    const invalid = computed(() => !!parentNode && parentNode.invalid);
+    const autoHeight = computed(() => props.autoHeight);
+    const readonly = computed(() => !!parentNode && parentNode.isReadonly);
+    // const computedTabindex = computed(() =>
+    //   disabled.value ? -1 : props.tabindex,
+    // );
+    // const isOutlined = computed(() => inputBox.variant.value === 'outlined');
+    const colorProvider = useVuiColorProvider();
+
+    const classes = computed(() => {
+      const classes = [
+        'v-control-field',
+        `v-control-field--${inputBox.variant.value}`,
+        {
+          'v-control-field--disabled': disabled.value,
+          'v-control-field--invalid': invalid.value,
+          'v-control-field--readonly': readonly.value,
+          'v-control-field--focused': props.focused,
+          'v-control-field--auto-height': autoHeight.value,
+        },
+        control.classes.value,
+        colorProvider.className(
+          invalid.value && !readonly.value ? 'error' : 'primary',
+        ),
+      ];
+      return classes;
+    });
+
+    const resolvedSlots = computed(() => {
+      const slots: ResolvedSlots = {};
+      ADORNMENT_POSITIONS.forEach((position) => {
+        const key = `${position}Adornment` as const;
+        slots[position] = resolveVNodeChildOrSlots(props[key], ctx.slots[key]);
+      });
+      return slots;
+    });
+
+    const renderAdornment = (position: AdornmentPosition) => {
+      const result = renderSlotOrEmpty(resolvedSlots.value, position);
+      if (!result) return;
+      return (
+        <div
+          class={[
+            'v-control-field__adornment',
+            `v-control-field__adornment--${position}`,
+          ]}>
+          {result}
+        </div>
+      );
+    };
+
+    const handleClick = (ev: MouseEvent) => {
+      ctx.emit('click', ev);
+      // if (ev.target === hostElRef.value) {
+      //   ctx.emit('clickHost', ev);
+      // }
+    };
+
+    return {
+      classes,
+      renderAdornment,
+      hostElRef: () => hostElRef,
+      handleClick,
+      // computedTabindex,
+    };
+  },
+  render() {
+    return (
+      <div
+        class={this.classes}
+        onClick={this.handleClick}
+        // tabindex={this.computedTabindex}
+        ref={this.hostElRef()}>
+        {this.renderAdornment('start')}
+        <div class="v-control-field__body">
+          {renderSlotOrEmpty(this.$slots, 'default')}
+        </div>
+        {this.renderAdornment('end')}
+      </div>
+    );
+  },
+});

package/src/components/VControlField/index.ts

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

package/src/components/VDataTable/VDataTable.scss

@@ -0,0 +1,230 @@
+.v-data-table {
+  --controls-vertial-margin: 0.625em;
+
+  .v-card-content & {
+    margin-right: calc(var(--card-content-padding) * -1);
+    margin-left: calc(var(--card-content-padding) * -1);
+  }
+
+  &__empty--message {
+    // @include container;
+
+    // color: get-color(text-muted);
+  }
+
+  &__controls {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+
+    &__info {
+      display: flex;
+      align-items: center;
+
+      &__length {
+        margin-right: 20px;
+      }
+    }
+
+    &__select-limit {
+      display: flex;
+      align-items: center;
+
+      &__prefix {
+        margin-right: 0.5em;
+        font-size: 0.75em;
+        color: var(--palette-muted);
+        white-space: nowrap;
+      }
+
+      .v-select {
+        width: 5em;
+        margin-left: 0.5em;
+      }
+    }
+
+    &__pagination {
+      flex: 1 1 100%;
+      margin-left: auto;
+
+      @media screen and (min-width: 320px) {
+        flex: 0 0 50%;
+        width: 50%;
+      }
+    }
+  }
+
+  &__header {
+    margin-bottom: var(--controls-vertial-margin);
+  }
+
+  &__footer {
+    margin-top: var(--controls-vertial-margin);
+  }
+
+  &__body {
+    position: relative;
+
+    &__inner {
+      overflow-x: auto;
+    }
+  }
+
+  &__table-wrapper {
+    display: flex;
+
+    &::before,
+    &::after {
+      display: block;
+      // flex: 0 0 $view-padding-narrow;
+      // width: $view-padding-narrow;
+      height: 1px;
+      content: '';
+
+      // @include mq(wide) {
+      //   flex-basis: $view-padding-wide;
+      //   width: $view-padding-wide;
+      // }
+    }
+  }
+
+  &__loading {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--palette-background);
+    opacity: 0.5;
+  }
+
+  &__table {
+    width: 100%;
+    // min-width: calc(100% - #{$view-padding-narrow * 2});
+    margin: 0;
+    // border-collapse: separate;
+    background: var(--palette-background);
+    border-radius: var(--control-field-radius);
+
+    // @include mq(wide) {
+    //   min-width: calc(100% - #{$view-padding-wide * 2});
+    // }
+
+    &__cell {
+      position: relative;
+      text-align: left;
+      white-space: nowrap;
+      vertical-align: middle;
+      border-bottom: thin solid rgba(0, 0, 0, 0.12);
+      transition: background 0.2s;
+
+      &:first-child {
+        padding-left: calc(var(--table-cell-horizontal-padding) * 2);
+      }
+
+      &:last-child {
+        padding-right: calc(var(--table-cell-horizontal-padding) * 2);
+      }
+
+      &--left {
+        text-align: left;
+      }
+
+      &--center {
+        text-align: center;
+
+        .v-data-table__table__sort-icon--empty {
+          display: flex;
+        }
+      }
+
+      &--right {
+        text-align: right;
+      }
+
+      &[tabindex='0'] {
+        cursor: pointer;
+
+        &:hover,
+        &:focus {
+          // background: var(--shadow-color);
+          // background: get-color(light);
+        }
+      }
+
+      &__tile {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    &__sort-icon {
+      width: 25px;
+      font-size: 1.25em;
+      opacity: 0;
+      transition: transform 0.2s, opacity 0.2s;
+
+      // stylelint-disable-next-line no-descending-specificity
+      &--empty {
+        display: none;
+      }
+    }
+
+    &__header &__cell {
+      user-select: none;
+      background: rgba(255, 255, 255, 0.85);
+      backdrop-filter: blur(3px);
+
+      &--active[tabindex='0'] {
+        // color: get-color(invert-text);
+        // background: get-color(primary);
+      }
+    }
+
+    &__header &__cell--active &__sort-icon {
+      opacity: 1;
+    }
+
+    &__cell[tabindex='0']:hover &__sort-icon,
+    &__cell[tabindex='0']:focus &__sort-icon {
+      opacity: 1;
+    }
+
+    &__body tr:last-child &__cell {
+      border-bottom: none;
+    }
+
+    &__item {
+      &:hover {
+        td {
+          // background: get-color(tocuh-0);
+        }
+      }
+
+      &--selected {
+        // stylelint-disable-next-line no-descending-specificity
+        td {
+          // background: get-color(light);
+        }
+
+        &:hover {
+          td {
+            // background: get-color(light);
+          }
+        }
+      }
+    }
+  }
+
+  // stylelint-disable-next-line no-descending-specificity
+  &--fixed-header &__table__header &__table__cell {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+}