@fastkit/vui 0.6.36 → 0.6.40

package/src/components/VTabs/VTabs.tsx

@@ -0,0 +1,315 @@
+import './VTabs.scss';
+import {
+  defineComponent,
+  VNodeChild,
+  ref,
+  PropType,
+  computed,
+  watch,
+  onBeforeUnmount,
+  onBeforeUpdate,
+  onMounted,
+} from 'vue';
+import { RawIconProp } from '../VIcon';
+import { VuiService } from '../../service';
+import { useVui } from '../../injections';
+import { defineSlotsProps } from '@fastkit/vue-utils';
+import { RouteLocationRaw, RouteLocation } from 'vue-router';
+import { VTab, VTabRef } from './VTab';
+import { VScroller, useVScrollerRef } from '@fastkit/vue-kit';
+import { ScrollResult } from '@fastkit/scroller';
+import { useScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
+
+export interface VTabsItemLabelSlotCtx {
+  value: string;
+  active: boolean;
+  vui: VuiService;
+}
+
+export type VTabsItemLabelSlot = (ctx: VTabsItemLabelSlotCtx) => VNodeChild;
+
+export type VTabsRouterHandler = (value: string) => RouteLocationRaw;
+
+export interface VTabsItem {
+  value: string;
+  icon?: RawIconProp;
+  label?: VNodeChild | VTabsItemLabelSlot;
+}
+
+export const VTabs = defineComponent({
+  name: 'VTabs',
+  props: {
+    modelValue: String,
+
+    items: {
+      type: Array as PropType<VTabsItem[]>,
+      required: true,
+      // validator: (value: VTabsItem[]) => {
+      //   return Array.isArray(value) && value.length > 0;
+      // },
+    },
+
+    /**
+     * 自動スクロールする際の余剰オフセット幅（px）
+     */
+    autoScrollOffset: {
+      type: Number,
+      default: 20,
+    },
+
+    /**
+     * ルーター同期する場合設定する
+     */
+    router: Function as PropType<VTabsRouterHandler>,
+
+    /**
+     * ルーティング連携を行う際に、クエリベースのURLマッチングを行う
+     * タブのURLが /page1?tab=xxx のようになる時に設定する
+     */
+    withQuery: Boolean,
+    ...defineSlotsProps<{
+      item: VTabsItemLabelSlotCtx;
+    }>(),
+
+    color: String as PropType<ScopeName>,
+  },
+  emits: {
+    'update:modelValue': (newValue: string) => true,
+    change: (newValue: string) => true,
+  },
+  setup(props, ctx) {
+    const vui = useVui();
+
+    const internalValueRef = ref<string>(null as any);
+    const scrollerRef = useVScrollerRef();
+    const elRef = ref<HTMLElement>(null as any);
+    let scrollResult: ScrollResult | undefined;
+    const tabRefs = ref<VTabRef[]>([]);
+
+    const currentRef = computed({
+      get: () => internalValueRef.value,
+      set: (value) => {
+        if (internalValueRef.value !== value) {
+          internalValueRef.value = value;
+          ctx.emit('update:modelValue', value);
+          ctx.emit('change', value);
+        }
+      },
+    });
+
+    const colorScope = useScopeColorClass({
+      color: () => props.color || vui.setting('tabDefault').color,
+    });
+
+    const classes = computed(() => [colorScope.value.className]);
+
+    const computedItemsRef = computed(() => {
+      const current = currentRef.value;
+      const { router } = props;
+      return props.items.map((item) => {
+        const { value } = item;
+        const active = current === value;
+        let location:
+          | {
+              to: RouteLocationRaw;
+              route: RouteLocation & {
+                href: string;
+              };
+            }
+          | undefined;
+
+        if (router) {
+          const to = router(value);
+          const route = vui.router.resolve(to);
+          location = { to, route };
+        }
+
+        return {
+          ...item,
+          active,
+          location,
+        };
+      });
+    });
+
+    const setTabRef = (ref: VTabRef) => {
+      tabRefs.value.push(ref);
+    };
+
+    // const isMountedRef = ref(false);
+
+    function setupInternalValue(routable?: boolean) {
+      let value = props.modelValue;
+      if (value == null || value === '') {
+        const firstItem = props.items[0];
+        if (!firstItem) return;
+        value = firstItem.value;
+      }
+      if (internalValueRef.value !== value) {
+        internalValueRef.value = value;
+
+        if (routable) {
+          const { router } = props;
+          if (!router) return;
+          const hit = computedItemsRef.value.find(
+            (item) => item.value === value,
+          );
+          if (!hit) return;
+          const { location } = hit;
+          if (!location) return;
+          const { to, route } = location;
+          if (route.fullPath === vui.location.currentRoute.fullPath) return;
+          vui.router[to.replace ? 'replace' : 'push'](to);
+        } else if (!props.router && props.modelValue !== value) {
+          ctx.emit('update:modelValue', value);
+          ctx.emit('change', value);
+        }
+      }
+    }
+
+    function to(value: string) {
+      currentRef.value = value;
+    }
+
+    function cancelScroll() {
+      if (scrollResult) {
+        scrollResult.cancel();
+        scrollResult = undefined;
+      }
+    }
+
+    const findTab = (tab: string) => {
+      return tabRefs.value.find((t) => t.value === tab);
+    };
+
+    function scrollToTab(tabValue: string) {
+      const tab = findTab(tabValue);
+      if (!tab) return;
+      const $tab = tab.$el as HTMLElement;
+      if (!$tab) return;
+
+      const scroller = scrollerRef.value;
+      if (!scroller) return;
+      const container = scroller.scroller.element();
+      if (!container) return;
+
+      const { autoScrollOffset } = props;
+      const tabLeft = $tab.offsetLeft;
+      const tabWidth = $tab.offsetWidth;
+      const tabRight = tabLeft + tabWidth;
+      let hiddenLeft = 0;
+      let hiddenRight = 0;
+
+      const { scrollLeft, offsetWidth: scrollerWidth } = container;
+      hiddenLeft = Math.max(scrollLeft - tabLeft, 0);
+      hiddenRight = Math.max(tabRight - scrollerWidth - scrollLeft, 0);
+
+      if (hiddenLeft > 0) hiddenLeft += autoScrollOffset;
+      if (hiddenRight > 0) hiddenRight += autoScrollOffset;
+
+      let scrollAmmount = 0;
+      if (hiddenRight > 0) {
+        scrollAmmount = hiddenRight;
+      }
+      if (hiddenLeft > 0) {
+        scrollAmmount = -hiddenLeft;
+      }
+
+      if (Math.abs(scrollAmmount) > 0) {
+        cancelScroll();
+        scrollResult = scroller.scroller.by(scrollAmmount, 0, {
+          duration: 150,
+        });
+      }
+    }
+
+    watch(
+      () => props.modelValue,
+      () => setupInternalValue(true),
+    );
+
+    watch(
+      () => props.items,
+      () => setupInternalValue(),
+      { deep: true },
+    );
+
+    watch(
+      () => internalValueRef.value,
+      (newValue) => {
+        scrollToTab(newValue);
+      },
+    );
+
+    vui.location.watchRoute(
+      (route) => {
+        if (!props.router) return;
+        const path = props.withQuery ? route.fullPath : route.path;
+        const hit = computedItemsRef.value.find(({ location }) => {
+          return location && location.route.fullPath === path;
+        });
+        if (hit) {
+          currentRef.value = hit.value;
+        }
+      },
+      { immediate: true },
+    );
+
+    onMounted(() => {
+      scrollToTab(currentRef.value);
+    });
+
+    onBeforeUnmount(() => {
+      cancelScroll();
+    });
+
+    onBeforeUpdate(() => {
+      tabRefs.value = [];
+    });
+
+    setupInternalValue();
+
+    return () => {
+      const items = computedItemsRef.value;
+      const itemSlot = ctx.slots.item as VTabsItemLabelSlot | undefined;
+      const children = items.map(({ value, active, label, icon, location }) => {
+        if (!label) {
+          label = itemSlot;
+        }
+
+        const children =
+          typeof label === 'function' ? label({ value, active, vui }) : label;
+
+        const _to = (location && location.to) || undefined;
+
+        return (
+          <VTab
+            value={value}
+            to={_to}
+            icon={icon}
+            active={active}
+            ref={setTabRef as any}
+            onClick={(e) => {
+              if (!e.defaultPrevented) {
+                to(value);
+              }
+            }}>
+            {children}
+          </VTab>
+        );
+      });
+
+      return (
+        <div class={['v-tabs', classes.value]} ref={elRef}>
+          <VScroller
+            class="v-tabs__scroller"
+            containerClass="v-tabs__scroller__container"
+            guide
+            ref={scrollerRef}>
+            <div class="v-tabs__content">{children}</div>
+          </VScroller>
+        </div>
+      );
+    };
+  },
+});

package/src/components/VTabs/index.ts

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

package/src/components/VTextCounter/VTextCounter.scss

@@ -0,0 +1,3 @@
+.v-text-counter {
+  white-space: nowrap;
+}

package/src/components/VTextCounter/VTextCounter.tsx

@@ -0,0 +1,21 @@
+import './VTextCounter.scss';
+import { defineComponent } from 'vue';
+
+export const VTextCounter = defineComponent({
+  name: 'VTextCounter',
+  props: {
+    length: {
+      type: Number,
+      required: true,
+    },
+    maxlength: {
+      type: Number,
+      required: true,
+    },
+  },
+  render() {
+    return (
+      <span class="v-text-counter">{`${this.length} / ${this.maxlength}`}</span>
+    );
+  },
+});

package/src/components/VTextCounter/index.ts

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

package/src/components/VTextField/VTextField.scss

@@ -0,0 +1,45 @@
+@use '../../styles/core.scss';
+
+.v-text-field {
+  &__input {
+    cursor: text;
+
+    &__element {
+      width: 100%;
+      min-width: 0;
+      // width: calc(100% - 8px);
+      padding: 0;
+      margin: 0;
+      overflow: hidden;
+      // margin: 0 8px;
+      font-size: inherit;
+      line-height: inherit;
+      text-overflow: ellipsis;
+      letter-spacing: inherit;
+      white-space: nowrap;
+      background: transparent;
+      border: 0;
+      border-radius: 0;
+      outline: 0;
+
+      &:-webkit-autofill {
+        @include core.auto-fill-cancel;
+        // color: inherit !important;
+        // box-shadow: 0 0 0 1000px get-color(field) inset;
+      }
+
+      &::-ms-clear {
+        display: none;
+      }
+
+      &::placeholder {
+        font-style: italic;
+        color: var(--control-disabled-color);
+      }
+
+      // @include placeholder {
+      //   color: get-color(text-muted);
+      // }
+    }
+  }
+}

package/src/components/VTextField/VTextField.tsx

@@ -0,0 +1,96 @@
+import './VTextField.scss';
+import { defineComponent } from 'vue';
+import {
+  createTextInputSettings,
+  useTextInputControl,
+  createFormControlProps,
+  FormControlSlots,
+  defineSlotsProps,
+} from '@fastkit/vue-kit';
+import { VFormControl } from '../VFormControl';
+import {
+  VControlField,
+  createControlFieldProps,
+  InputBoxSlots,
+} from '../VControlField';
+import {
+  createControlProps,
+  useControl,
+  createControlFieldProviderProps,
+  useControlField,
+} from '../../composables';
+import { VTextCounter } from '../VTextCounter';
+import { VUI_TEXT_FIELD_SYMBOL } from '../../injections';
+import { ExtractPropInput } from '@fastkit/vue-utils';
+
+const { props, emits } = createTextInputSettings();
+
+function createTextFieldProps() {
+  return {
+    ...props,
+    ...createFormControlProps(),
+    ...createControlFieldProps(),
+    ...createControlFieldProviderProps(),
+    ...createControlProps(),
+    ...defineSlotsProps<FormControlSlots & InputBoxSlots>(),
+  };
+}
+
+export type TextFieldInput = ExtractPropInput<
+  ReturnType<typeof createTextFieldProps>
+>;
+
+export const VTextField = defineComponent({
+  name: 'VTextField',
+  props: createTextFieldProps(),
+  emits,
+  setup(props, ctx) {
+    const inputControl = useTextInputControl(props, ctx, {
+      nodeType: VUI_TEXT_FIELD_SYMBOL,
+    });
+    const control = useControl(props);
+    useControlField(props);
+
+    return {
+      ...inputControl.expose(),
+      ...control,
+    };
+  },
+  render() {
+    return (
+      <VFormControl
+        nodeControl={this.nodeControl}
+        focused={this.nodeControl.focused}
+        hiddenInfo={this.hiddenInfo}
+        class={['v-text-field', this.classes]}
+        label={this.label}
+        hint={this.hint}
+        onClickLabel={(ev) => {
+          this.focus();
+        }}
+        v-slots={{
+          ...this.$slots,
+          default: () => (
+            <VControlField
+              class="v-text-field__input"
+              startAdornment={this.startAdornment}
+              endAdornment={this.endAdornment}
+              v-slots={{
+                ...this.$slots,
+                default: () =>
+                  this.textInputControl.createInputElement({
+                    class: 'v-text-field__input__element',
+                  }),
+              }}
+            />
+          ),
+          infoAppends: () => {
+            const { counterResult } = this;
+            if (!counterResult) return;
+            return <VTextCounter {...counterResult} />;
+          },
+        }}
+      />
+    );
+  },
+});

package/src/components/VTextField/index.ts

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

package/src/components/VTextarea/VTextarea.scss

@@ -0,0 +1,41 @@
+@use '../../styles/core.scss';
+
+.v-textarea {
+  &__input {
+    cursor: text;
+
+    &__element {
+      width: 100%;
+      min-width: 0;
+      padding: 8px 0;
+      margin: 0;
+      font-size: inherit;
+      line-height: inherit;
+      letter-spacing: inherit;
+      resize: none;
+      background: transparent;
+      border: 0;
+      border-radius: 0;
+      outline: 0;
+
+      &:-webkit-autofill {
+        @include core.auto-fill-cancel;
+        // color: inherit !important;
+        // box-shadow: 0 0 0 1000px get-color(field) inset;
+      }
+
+      &::-ms-clear {
+        display: none;
+      }
+
+      &::placeholder {
+        font-style: italic;
+        color: var(--control-disabled-color);
+      }
+
+      // @include placeholder {
+      //   color: get-color(text-muted);
+      // }
+    }
+  }
+}

package/src/components/VTextarea/VTextarea.tsx

@@ -0,0 +1,93 @@
+import './VTextarea.scss';
+import { defineComponent } from 'vue';
+import {
+  createTextareaSettings,
+  useTextareaControl,
+  createFormControlProps,
+  FormControlSlots,
+  defineSlotsProps,
+} from '@fastkit/vue-kit';
+import { VFormControl } from '../VFormControl';
+import {
+  VControlField,
+  createControlFieldProps,
+  InputBoxSlots,
+} from '../VControlField';
+import {
+  createControlProps,
+  useControl,
+  createControlFieldProviderProps,
+  useControlField,
+} from '../../composables';
+import { VTextCounter } from '../VTextCounter';
+import { VUI_TEXTAREA_SYMBOL, useVui } from '../../injections';
+
+const { props, emits } = createTextareaSettings();
+
+export const VTextarea = defineComponent({
+  name: 'VTextarea',
+  props: {
+    ...props,
+    ...createFormControlProps(),
+    ...createControlFieldProps(),
+    ...createControlFieldProviderProps(),
+    ...createControlProps(),
+    ...defineSlotsProps<FormControlSlots & InputBoxSlots>(),
+  },
+  emits,
+  setup(props, ctx) {
+    const vui = useVui();
+    const inputControl = useTextareaControl(props, ctx, {
+      nodeType: VUI_TEXTAREA_SYMBOL,
+      defaultRows: vui.textareaRows,
+    });
+    const control = useControl(props);
+    useControlField(props);
+
+    return {
+      ...inputControl.expose(),
+      ...control,
+    };
+  },
+  render() {
+    return (
+      <VFormControl
+        nodeControl={this.nodeControl}
+        focused={this.nodeControl.focused}
+        class={['v-textarea', this.classes]}
+        label={this.label}
+        hint={this.hint}
+        hiddenInfo={this.hiddenInfo}
+        onClickLabel={(ev) => {
+          this.focus();
+        }}
+        v-slots={{
+          ...this.$slots,
+          default: () => (
+            <VControlField
+              class="v-textarea__input"
+              autoHeight
+              startAdornment={this.startAdornment}
+              endAdornment={this.endAdornment}
+              // onClickHost={(ev) => {
+              //   this.focus();
+              // }}
+              v-slots={{
+                ...this.$slots,
+                default: () =>
+                  this.textareaControl.createInputElement({
+                    class: 'v-textarea__input__element',
+                  }),
+              }}
+            />
+          ),
+          infoAppends: () => {
+            const { counterResult } = this;
+            if (!counterResult) return;
+            return <VTextCounter {...counterResult} />;
+          },
+        }}
+      />
+    );
+  },
+});

package/src/components/VTextarea/index.ts

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

package/src/components/VToolbar/VToolbar.scss

@@ -0,0 +1,26 @@
+// @use './core.scss';
+// @use '../../styles/core.scss';
+
+.v-toolbar {
+  --height: var(--toolbar-height);
+
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: var(--height);
+  padding: 0 calc(var(--root-em) * 1.5); // 24
+  margin: 0;
+  border-radius: inherit;
+
+  &--plain {
+    --main-color: var(--palette-background);
+  }
+
+  .v-app-layout__header > & {
+    height: 100%;
+  }
+
+  &--dense {
+    --height: var(--toolbar-dense-height);
+  }
+}

package/src/components/VToolbar/VToolbar.tsx

@@ -0,0 +1,44 @@
+import './VToolbar.scss';
+import { defineComponent, computed } from 'vue';
+import { renderSlotOrEmpty } from '@fastkit/vue-utils';
+import { colorSchemeProps, useColorClasses } from '@fastkit/vue-color-scheme';
+import { createElevationProps, useElevation } from '../../composables';
+import { useVui } from '../../injections';
+
+export const VToolbar = defineComponent({
+  name: 'VToolbar',
+  props: {
+    ...createElevationProps(),
+    ...colorSchemeProps(),
+    dense: Boolean,
+  },
+  setup(props, ctx) {
+    const vui = useVui();
+
+    const elevation = useElevation(props, { defaultValue: 4 });
+    const dense = computed(() => props.dense);
+    const color = useColorClasses({
+      color: () => props.color,
+      variant: () => props.variant || vui.setting('containedVariant'),
+    });
+
+    const classes = computed(() => {
+      return [
+        elevation.elevationClassName.value,
+        color.colorClasses.value,
+        {
+          'v-toolbar--plain': !color.color.value.value,
+          'v-toolbar--dense': dense.value,
+        },
+      ];
+    });
+
+    return () => {
+      return (
+        <div class={['v-toolbar', classes.value]}>
+          {renderSlotOrEmpty(ctx.slots, 'default')}
+        </div>
+      );
+    };
+  },
+});