@fastkit/vui 0.6.36 → 0.6.40

package/src/components/VSelect/VSelect.tsx

@@ -0,0 +1,204 @@
+import './VSelect.scss';
+import { ref, VNodeChild, defineComponent } from 'vue';
+import {
+  createFormSelectorSettings,
+  useFormSelectorControl,
+  createFormControlProps,
+  defineSlotsProps,
+  FormControlSlots,
+  FormSelectorItemControl,
+  createPropsOptions,
+} from '@fastkit/vue-kit';
+import { VFormControl } from '../VFormControl';
+import {
+  VControlField,
+  createControlFieldProps,
+  InputBoxSlots,
+} from '../VControlField';
+import {
+  createControlProps,
+  useControl,
+  createControlFieldProviderProps,
+  useControlField,
+} from '../../composables';
+import { VUI_SELECT_SYMBOL, useVui } from '../../injections';
+import { VIcon } from '../VIcon';
+import { VMenu } from '../kits';
+import { VOption } from '../VOption';
+
+const { props, emits } = createFormSelectorSettings();
+
+export const VSelect = defineComponent({
+  name: 'VSelect',
+  props: {
+    ...props,
+    ...createFormControlProps(),
+    ...createControlFieldProps(),
+    ...createControlFieldProviderProps(),
+    ...createControlProps(),
+    ...defineSlotsProps<FormControlSlots & InputBoxSlots>(),
+    ...createPropsOptions({
+      placeholder: String,
+    }),
+  },
+  emits,
+  setup(props, ctx) {
+    const menuOpened = ref(false);
+    const showMenu = () => {
+      menuOpened.value = true;
+    };
+    const closeMenu = () => {
+      menuOpened.value = false;
+    };
+    const inputControl = useFormSelectorControl(props, ctx, {
+      nodeType: VUI_SELECT_SYMBOL,
+      onSelectItem: (item) => {
+        closeMenu();
+      },
+    });
+    const control = useControl(props);
+    useControlField(props);
+    const vui = useVui();
+    const iconName = vui.icon('menuDown');
+    const fieldRef = ref<HTMLElement | null>(null);
+
+    const focus = (opts?: FocusOptions): void => {
+      fieldRef.value && fieldRef.value.focus(opts);
+    };
+
+    const renderSelections = (selectedItems: FormSelectorItemControl[]) => {
+      const children: VNodeChild[] = [];
+      if (selectedItems.length) {
+        selectedItems.forEach((item, index) => {
+          if (index > 0) {
+            children.push(vui.selectionSeparator());
+          }
+          children.push(item.renderDefaultSlot());
+        });
+      } else if (props.placeholder != null) {
+        children.push(
+          <span class="v-select__placeholder">{props.placeholder}</span>,
+        );
+      }
+      return children;
+    };
+
+    return {
+      ...inputControl.expose(),
+      ...control,
+      iconName,
+      menuOpened,
+      fieldRef: () => fieldRef,
+      focus,
+      showMenu,
+      closeMenu,
+      renderSelections,
+    };
+  },
+  render() {
+    const { nodeControl, selectorControl, selectorItems, selectedItems } = this;
+    const children = (this.$slots.default && this.$slots.default()) || [];
+    const propOptions = this.propItems.map((item) => {
+      return (
+        <VOption disabled={item.disabled} value={item.value} key={item.value}>
+          {{
+            default: () => item.label(selectorControl),
+          }}
+        </VOption>
+      );
+    });
+
+    return (
+      <VFormControl
+        nodeControl={nodeControl}
+        // focused={this.nodeControl.focused}
+        class={['v-select', this.classes]}
+        label={this.label}
+        hint={this.hint}
+        hiddenInfo={this.hiddenInfo}
+        onClickLabel={(ev) => {
+          this.focus();
+        }}
+        v-slots={{
+          ...this.$slots,
+          default: () => (
+            <VMenu
+              width="fit"
+              maxWidth="fit"
+              distance={0}
+              alwaysRender
+              v-model={this.menuOpened}
+              v-slots={{
+                activator: ({ attrs, control }) => [
+                  <VControlField
+                    class="v-select__input"
+                    ref={this.fieldRef()}
+                    startAdornment={this.startAdornment}
+                    endAdornment={this.endAdornment}
+                    // tabindex={this.computedTabindex}
+                    focused={this.menuOpened}
+                    onClick={(ev) => {
+                      if (this.canOperation && !control.isActive) {
+                        let t = ev.target as HTMLElement;
+                        const count = 0;
+                        let hit = false;
+                        while (count < 5) {
+                          if (t.classList.contains('v-select__input')) {
+                            hit = true;
+                            break;
+                          }
+                          t = t.parentElement as HTMLElement;
+                        }
+                        control.show(hit ? t : ev);
+                      }
+                    }}
+                    v-slots={{
+                      ...this.$slots,
+                      default: () => [
+                        <select
+                          class="v-select__input__element"
+                          name={this.name}
+                          tabindex={this.computedTabindex}
+                          disabled={this.isDisabled}
+                          multiple={this.multiple}
+                          onFocus={nodeControl.focusHandler}
+                          onBlur={nodeControl.blurHandler}
+                          v-model={this.currentValue}
+                          // value={nodeControl.value}
+                        >
+                          {selectorItems.map((item) => {
+                            return (
+                              <option
+                                value={item.propValue}
+                                key={item.propValue}>
+                                {item.renderDefaultSlot()}
+                              </option>
+                            );
+                          })}
+                        </select>,
+                        <div class="v-select__selections">
+                          <div class="v-select__selections__inner">
+                            {this.renderSelections(selectedItems)}
+                          </div>
+                        </div>,
+                      ],
+                      endAdornment: () => (
+                        <VIcon
+                          name={this.iconName}
+                          rotate={this.menuOpened ? 180 : 0}></VIcon>
+                      ),
+                    }}
+                  />,
+                ],
+              }}>
+              <div class={['v-select__body', this.classes]}>
+                {children}
+                {propOptions}
+              </div>
+            </VMenu>
+          ),
+        }}
+      />
+    );
+  },
+});

package/src/components/VSelect/index.ts

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

package/src/components/VSwitch/VSwitch.scss

@@ -0,0 +1,125 @@
+@use 'sass:math';
+
+.v-switch {
+  --my-pin-color: var(--palette-background);
+  // --my-faux-bg-color: transparent;
+
+  &--selected {
+    --my-pin-color: var(--color);
+  }
+
+  &__faux {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    width: var(--control-switch-width);
+    height: 100%;
+    cursor: pointer;
+
+    &::before {
+      display: block;
+      width: var(--control-switch-track-width);
+      height: var(--control-switch-track-height);
+      content: '';
+      background: var(--color);
+      border-radius: calc(var(--control-switch-track-height) / 2);
+      opacity: 0.5;
+    }
+
+    &__pin {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--outer-size);
+      height: var(--outer-size);
+      // background: #f00;
+      border-radius: 50%;
+      transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+        transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+      &::before,
+      &::after {
+        display: block;
+        content: '';
+      }
+
+      &::before {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: currentColor;
+        border-radius: 50%;
+        opacity: 0;
+        transition: opacity 0.2s;
+      }
+
+      &::after {
+        position: relative;
+        width: var(--icon-size);
+        height: var(--icon-size);
+        background: var(--my-pin-color);
+        border-radius: 50%;
+        box-shadow: rgb(0 0 0 / 0.2) 0 2px 1px -1px,
+          rgb(0 0 0 / 0.14) 0 1px 1px 0, rgb(0 0 0 / 0.12) 0 1px 3px 0;
+        transform: scale(var(--control-checkable-faux-scale));
+      }
+    }
+  }
+
+  &--selected &__faux {
+    &__pin {
+      left: calc(100% - var(--outer-size));
+    }
+  }
+
+  &--disabled &__faux {
+    &::before {
+      background-color: #000;
+      opacity: 0.12;
+    }
+
+    &__pin {
+      &::after {
+        background-color: rgba(245, 245, 245, 1);
+      }
+    }
+  }
+
+  &__faux:hover &__faux__pin::before {
+    opacity: 0.1;
+  }
+
+  &:focus-within &__faux {
+    &__pin {
+      &::before {
+        opacity: 0.1;
+      }
+    }
+  }
+
+  // &--indeterminate &__faux {
+  //   $x1: math.div(12, 54) * 100%;
+  //   $x2: 100% - $x1;
+  //   $y1: math.div(24, 54) * 100%;
+  //   $y2: 100% - $y1;
+
+  //   clip-path: polygon(
+  //     0 0,
+  //     0 100%,
+  //     100% 100%,
+  //     100% 0,
+  //     #{$x2} #{$y1},
+  //     #{$x2} #{$y2},
+  //     #{$x1} #{$y2},
+  //     #{$x1} #{$y1},
+  //     #{$x2} #{$y1},
+  //     100% 0
+  //   );
+  // }
+}

package/src/components/VSwitch/VSwitch.tsx

@@ -0,0 +1,66 @@
+import './VSwitch.scss';
+import { defineComponent } from 'vue';
+import {
+  createFormSelectorItemSettings,
+  useFormSelectorItemControl,
+  renderSlotOrEmpty,
+} from '@fastkit/vue-kit';
+import { createControlProps, useControl } from '../../composables';
+import { VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL } from '../../injections';
+import { VCheckable } from '../VCheckable';
+
+const { props, emits } = createFormSelectorItemSettings();
+
+export const VSwitch = defineComponent({
+  name: 'VSwitch',
+  props: {
+    ...props,
+    ...createControlProps(),
+  },
+  emits,
+  setup(props, ctx) {
+    const nodeControl = useFormSelectorItemControl(props, ctx, {
+      nodeType: VUI_SWITCH_SYMBOL,
+      parentNodeType: VUI_SWITCH_GROUP_SYMBOL,
+    });
+    const control = useControl(props);
+    if (typeof window !== 'undefined') {
+      (window as any).yy = {};
+      (window as any).yy[String(Date.now())] = nodeControl;
+    }
+    return {
+      ...nodeControl.expose(),
+      ...control,
+    };
+  },
+  render() {
+    const { selectorItemControl } = this;
+    return (
+      <VCheckable
+        class={[
+          'v-switch',
+          {
+            'v-switch--selected': selectorItemControl.selected,
+            'v-switch--disabled': selectorItemControl.isDisabled,
+            xxxxx: selectorItemControl.booted,
+          },
+          this.classes,
+        ]}
+        checked={this.selected}
+        invalid={this.invalid}
+        disabled={this.isDisabled}
+        readonly={this.isReadonly}
+        v-slots={{
+          input: () =>
+            selectorItemControl.createInputElement({ type: 'checkbox' }),
+          icon: () => (
+            <span class="v-switch__faux">
+              <span class="v-switch__faux__pin"></span>
+            </span>
+          ),
+          label: () => renderSlotOrEmpty(this.$slots, 'default'),
+        }}
+      />
+    );
+  },
+});

package/src/components/VSwitch/index.ts

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

package/src/components/VSwitchGroup/VSwitchGroup.tsx

@@ -0,0 +1,11 @@
+import { VUI_SWITCH_GROUP_SYMBOL } from '../../injections';
+import { VSwitch } from '../VSwitch';
+import { defineFormSelectorComponent } from '../../composables';
+
+export const VSwitchGroup = defineFormSelectorComponent({
+  name: 'VSwitchGroup',
+  defaultMultiple: true,
+  nodeType: VUI_SWITCH_GROUP_SYMBOL,
+  className: 'v-switch-group',
+  itemRenderer: ({ attrs, slots }) => <VSwitch {...attrs}>{slots}</VSwitch>,
+});

package/src/components/VSwitchGroup/index.ts

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

package/src/components/VTabs/VTab.scss

@@ -0,0 +1,73 @@
+@use '../../styles/core.scss';
+
+.v-tab {
+  @include core.button-reset;
+
+  --tab-content-color: var(--palette-caption);
+  --tab-content-focus-color: var(--main-color);
+  --tab-content-opacity: 0.7;
+
+  position: relative;
+  z-index: 3;
+  display: flex;
+  // flex: 1 1 auto;
+  align-items: center;
+  justify-content: center;
+  height: var(--tabs-height);
+  padding: 0 1.25em;
+  font: inherit;
+  font-size: var(--tabs-font-size);
+  // color: inherit;
+  white-space: nowrap;
+  user-select: none;
+  transition: color 0.6s;
+
+  &::before {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    // top: 0;
+    left: 0;
+    z-index: 1;
+    height: 2px;
+    content: '';
+    background-color: var(--tab-content-focus-color);
+    border-radius: inherit;
+    transition: all 0.25s;
+    transform: scaleX(0);
+  }
+
+  &__content {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    line-height: 1.2;
+    color: var(--tab-content-color);
+    text-align: center;
+    opacity: var(--tab-content-opacity);
+    transition: all 0.25s ease;
+  }
+
+  &__icon {
+    margin-right: 8px;
+    font-size: 120%;
+  }
+
+  &:hover {
+    --tab-content-color: var(--tab-content-focus-color);
+  }
+
+  &--active {
+    --tab-content-color: rgba(0, 0, 0, 0.87);
+
+    pointer-events: none;
+    background: var(--tabs-color);
+
+    --tab-content-opacity: 1;
+
+    &::before {
+      transform: scaleX(1);
+    }
+  }
+}

package/src/components/VTabs/VTab.tsx

@@ -0,0 +1,88 @@
+import './VTab.scss';
+
+import {
+  defineComponent,
+  PropType,
+  computed,
+  ComponentPublicInstance,
+} from 'vue';
+import { RouteLocationRaw } from 'vue-router';
+import { RawIconProp, resolveRawIconProp } from '../VIcon';
+import { renderSlotOrEmpty } from '@fastkit/vue-utils';
+import { RouterLink } from 'vue-router';
+
+export interface VTabExpose {
+  value: string;
+  active: boolean;
+}
+
+export interface VTabRef extends ComponentPublicInstance, VTabExpose {}
+
+export const VTab = defineComponent({
+  name: 'VTab',
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+    active: Boolean,
+    to: [String, Object] as PropType<RouteLocationRaw>,
+    icon: [String, Function] as PropType<RawIconProp>,
+  },
+  emits: {
+    click: (ev: MouseEvent) => true,
+  },
+  setup(props, ctx) {
+    const classesRef = computed(() => ({
+      'v-tab--active': props.active,
+    }));
+
+    const exposeValues: VTabExpose = {
+      value: props.value,
+      active: props.active,
+    };
+
+    ctx.expose(exposeValues);
+
+    return () => {
+      const { to, value, icon, active } = props;
+      const classes = ['v-tab', classesRef.value];
+
+      const children = (
+        <span class="v-tab__content">
+          {icon &&
+            resolveRawIconProp(active, icon, {
+              class: 'v-tab__icon',
+            })}
+          {renderSlotOrEmpty(ctx.slots)}
+        </span>
+      );
+
+      if (to) {
+        const replace = typeof to === 'string' ? undefined : to.replace;
+        return (
+          <RouterLink
+            class={classes}
+            to={to}
+            replace={replace}
+            // disableScrollBehavior
+          >
+            {children}
+          </RouterLink>
+        );
+      } else {
+        return (
+          <button
+            class={classes}
+            type="button"
+            value={value}
+            onClick={(ev) => {
+              ctx.emit('click', ev);
+            }}>
+            {children}
+          </button>
+        );
+      }
+    };
+  },
+});

package/src/components/VTabs/VTabs.scss

@@ -0,0 +1,49 @@
+$my-offset: 30px;
+
+.v-tabs {
+  position: relative;
+  width: 100%;
+  height: var(--tabs-height);
+  overflow: hidden;
+
+  &::before {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    height: 2px;
+    content: '';
+    background: currentColor;
+    opacity: 0.25;
+  }
+
+  &__scroller {
+    width: 100%;
+    height: calc(var(--tabs-height) + #{$my-offset});
+
+    &__container {
+      padding-bottom: $my-offset;
+    }
+  }
+
+  &__content {
+    position: relative;
+    display: inline-flex;
+    align-items: stretch;
+    min-width: 100%;
+    vertical-align: bottom;
+
+    // &::after {
+    //   position: absolute;
+    //   right: 0;
+    //   bottom: 0;
+    //   left: 0;
+    //   z-index: 1;
+    //   display: block;
+    //   height: var(--tabs-bar-height);
+    //   pointer-events: none;
+    //   content: '';
+    // }
+  }
+}