@fastkit/vui 0.6.38 → 0.6.42

package/src/components/VCheckable/VCheckable.scss

@@ -0,0 +1,103 @@
+@use '../../styles/core.scss';
+
+.v-checkable {
+  --outer-size: var(--control-checkable-outer-size);
+  --icon-size: var(--control-checkable-icon-size);
+  --color: var(--control-checkable-base-color);
+
+  &--checked {
+    --color: var(--main-color);
+  }
+
+  display: inline-flex;
+  align-items: center;
+  padding-right: 1em;
+  cursor: pointer;
+  user-select: none;
+
+  &--invalid:not(#{&}--readonly) {
+    --color: var(--main-color);
+  }
+
+  &--disabled {
+    --color: var(--control-disabled-color);
+    // --color: var(--main-color);
+
+    pointer-events: none;
+    cursor: default;
+  }
+
+  &--readonly {
+    pointer-events: none;
+    cursor: default;
+  }
+
+  input {
+    @include core.hidden-input-element;
+  }
+
+  &__faux {
+    position: relative;
+    display: inline-flex;
+    flex: 0 0 var(--outer-size);
+    align-items: center;
+    justify-content: center;
+    width: var(--outer-size);
+    height: var(--outer-size);
+    margin: var(--control-checkable-faux-margin);
+    margin-left: 0;
+    color: var(--color);
+    cursor: pointer;
+
+    &__icon {
+      position: relative;
+      display: block;
+      width: var(--icon-size);
+      height: var(--icon-size);
+      pointer-events: none;
+      transform: scale(var(--control-checkable-faux-scale));
+    }
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      display: block;
+      pointer-events: none;
+      content: '';
+      background: currentColor;
+      border-radius: 50%;
+      opacity: 0;
+      transition: opacity 0.2s;
+    }
+
+    &:hover::before {
+      opacity: 0.1;
+    }
+  }
+
+  &--custom-icon &__faux {
+    flex-basis: auto;
+    width: auto;
+
+    &::before {
+      content: none;
+    }
+  }
+
+  &:focus-within &__faux {
+    &::before {
+      opacity: 0.2;
+    }
+  }
+
+  &__label {
+    line-height: 1.5;
+  }
+
+  &--disabled &__label {
+    color: var(--color);
+  }
+}

package/src/components/VCheckable/VCheckable.tsx

@@ -0,0 +1,60 @@
+import './VCheckable.scss';
+import { computed, defineComponent } from 'vue';
+import { defineSlotsProps, renderSlotOrEmpty } from '@fastkit/vue-kit';
+import { useVuiColorProvider } from '../../injections';
+
+export const VCheckable = defineComponent({
+  name: 'VCheckable',
+  props: {
+    invalid: Boolean,
+    disabled: Boolean,
+    readonly: Boolean,
+    checked: Boolean,
+    ...defineSlotsProps<{
+      input: void;
+      faux: void;
+      icon: void;
+      label: void;
+    }>(),
+    // autoWidth: Boolean,
+  },
+  setup(props, ctx) {
+    const colorProvider = useVuiColorProvider();
+    const invalid = computed(() => props.invalid);
+    const disabled = computed(() => props.disabled);
+    const readonly = computed(() => props.readonly);
+    const checked = computed(() => props.checked);
+    // const autoWidth = computed(() => props.autoWidth);
+    const classes = computed(() => {
+      return [
+        {
+          'v-checkable--invalid': invalid.value,
+          'v-checkable--disabled': disabled.value,
+          'v-checkable--readonly': readonly.value,
+          'v-checkable--checked': checked.value,
+          'v-checkable--custom-icon': !!ctx.slots.icon,
+          disabled: disabled.value,
+        },
+        colorProvider.className(invalid.value ? 'error' : 'primary'),
+      ];
+    });
+
+    return () => (
+      <label class={['v-checkable', classes.value]}>
+        <span class="v-checkable__faux">
+          {renderSlotOrEmpty(ctx.slots, 'input')}
+          {ctx.slots.icon ? (
+            renderSlotOrEmpty(ctx.slots, 'icon')
+          ) : (
+            <span class="v-checkable__faux__icon">
+              {renderSlotOrEmpty(ctx.slots, 'faux')}
+            </span>
+          )}
+        </span>
+        <span class="v-checkable__label">
+          {renderSlotOrEmpty(ctx.slots, 'label')}
+        </span>
+      </label>
+    );
+  },
+});

package/src/components/VCheckable/index.ts

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

package/src/components/VCheckbox/VCheckbox.scss

@@ -0,0 +1,56 @@
+@use 'sass:math';
+
+.v-checkbox {
+  --my-border-color: var(--color);
+  --my-faux-bg-color: transparent;
+
+  &--selected,
+  &--indeterminate {
+    --my-border-color: transparent;
+    --my-faux-bg-color: var(--color);
+  }
+
+  &__faux {
+    display: block;
+    width: 100%;
+    height: 100%;
+    clip-path: polygon(
+      0 0,
+      0 100%,
+      100% 100%,
+      100% 0,
+      88.25% 28.25%,
+      38% 78.125%,
+      12% 50%,
+      20% 42.1875%,
+      38% 63%,
+      82% 20%,
+      88.25% 28.25%,
+      100% 0
+    );
+    background: var(--my-faux-bg-color);
+    border: solid 2px var(--my-border-color);
+    border-radius: var(--control-field-radius);
+    transition: border-color 0.2s, background-color 0.2s;
+  }
+
+  &--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/VCheckbox/VCheckbox.tsx

@@ -0,0 +1,63 @@
+import './VCheckbox.scss';
+import { defineComponent, computed } from 'vue';
+import {
+  createFormSelectorItemSettings,
+  useFormSelectorItemControl,
+  renderSlotOrEmpty,
+} from '@fastkit/vue-kit';
+import { createControlProps, useControl } from '../../composables';
+import {
+  VUI_CHECKBOX_GROUP_SYMBOL,
+  VUI_CHECKBOX_SYMBOL,
+} from '../../injections';
+import { VCheckable } from '../VCheckable';
+
+const { props, emits } = createFormSelectorItemSettings();
+
+export const VCheckbox = defineComponent({
+  name: 'VCheckbox',
+  props: {
+    ...props,
+    ...createControlProps(),
+    indeterminate: Boolean,
+  },
+  emits,
+  setup(props, ctx) {
+    const nodeControl = useFormSelectorItemControl(props, ctx, {
+      nodeType: VUI_CHECKBOX_SYMBOL,
+      parentNodeType: VUI_CHECKBOX_GROUP_SYMBOL,
+    });
+    const control = useControl(props);
+    const isIndeterminate = computed(() => props.indeterminate);
+    return {
+      ...nodeControl.expose(),
+      ...control,
+      isIndeterminate,
+    };
+  },
+  render() {
+    const { selectorItemControl, isIndeterminate } = this;
+    return (
+      <VCheckable
+        class={[
+          'v-checkbox',
+          {
+            'v-checkbox--selected': selectorItemControl.selected,
+            'v-checkbox--indeterminate': isIndeterminate,
+          },
+          this.classes,
+        ]}
+        checked={this.selected || isIndeterminate}
+        invalid={this.invalid}
+        disabled={this.isDisabled}
+        readonly={this.isReadonly}
+        v-slots={{
+          input: () =>
+            selectorItemControl.createInputElement({ type: 'checkbox' }),
+          faux: () => <span class="v-checkbox__faux"></span>,
+          label: () => renderSlotOrEmpty(this.$slots, 'default'),
+        }}
+      />
+    );
+  },
+});

package/src/components/VCheckbox/index.ts

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

package/src/components/VCheckboxGroup/VCheckboxGroup.tsx

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

package/src/components/VCheckboxGroup/index.ts

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

package/src/components/VContentSwitcher/VContentSwitcher.scss

@@ -0,0 +1,73 @@
+.v-content-switcher {
+  position: relative;
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  transition: var(--transition-tab);
+
+  &__content {
+    width: 100%;
+  }
+
+  &-prev {
+    &-enter-active,
+    &-leave-active {
+      transition: var(--transition-tab);
+    }
+
+    &-enter {
+      &-from {
+        transform: translateX(-100%);
+      }
+
+      &-to {
+        transform: translateX(0%);
+      }
+    }
+
+    &-leave {
+      transform: translateX(0%);
+
+      &-active {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+
+      &-to {
+        transform: translateX(100%);
+      }
+    }
+  }
+
+  &-next {
+    &-enter-active,
+    &-leave-active {
+      transition: var(--transition-tab);
+    }
+
+    &-enter {
+      &-from {
+        transform: translateX(100%);
+      }
+
+      &-to {
+        transform: translateX(0%);
+      }
+    }
+
+    &-leave {
+      transform: translateX(0%);
+
+      &-active {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+
+      &-to {
+        transform: translateX(-100%);
+      }
+    }
+  }
+}

package/src/components/VContentSwitcher/VContentSwitcher.tsx

@@ -0,0 +1,156 @@
+import './VContentSwitcher.scss';
+
+import {
+  defineComponent,
+  PropType,
+  ref,
+  computed,
+  watch,
+  Transition,
+} from 'vue';
+import { getDocumentScroller } from '@fastkit/vue-scroller';
+import { VTabsItem } from '../VTabs/VTabs';
+import { renderSlotOrEmpty } from '@fastkit/vue-utils';
+
+export interface ContentSwitcherSeeTopOptions {
+  /**
+   * スクロールする際のオフセット高px
+   */
+  offset?: number;
+
+  /**
+   * スクロール期間
+   */
+  duration?: number;
+}
+
+export const VContentSwitcher = defineComponent({
+  name: 'VContentSwitcher',
+  props: {
+    modelValue: String,
+    order: {
+      type: Array as PropType<(string | VTabsItem)[]>,
+      default: () => [],
+    },
+    autotop: [Boolean, Object] as PropType<
+      boolean | ContentSwitcherSeeTopOptions
+    >,
+  },
+  emits: {
+    'update:modelValue': (modelValue: string) => true,
+  },
+  setup(props, ctx) {
+    const internalValueRef = ref('');
+    const transitionRef = ref('');
+    const elRef = ref<HTMLElement | null>(null);
+    const anchorRef = ref<HTMLElement | null>(null);
+    const computedOrderRef = computed(() =>
+      props.order.map((row) => {
+        return typeof row === 'string' ? row : row.value;
+      }),
+    );
+    const currentRef = computed({
+      get: () => internalValueRef.value,
+      set: (current) => {
+        if (internalValueRef.value !== current) {
+          internalValueRef.value = current;
+          ctx.emit('update:modelValue', current);
+        }
+      },
+    });
+    const autotopSettingsRef = computed<
+      ContentSwitcherSeeTopOptions | undefined
+    >(() => {
+      let { autotop: settings } = props;
+      if (settings === true) settings = {};
+      if (!settings) return;
+      return {
+        ...settings,
+      };
+    });
+
+    function seeTop(options?: ContentSwitcherSeeTopOptions) {
+      const scoller = getDocumentScroller();
+      const { value: anchor } = anchorRef;
+      if (anchor) {
+        scoller.toElement(anchor, options);
+      }
+    }
+
+    function getEl() {
+      const el = elRef.value;
+      if (!el) {
+        throw new Error('missing element');
+      }
+      return el;
+    }
+
+    watch(
+      () => props.modelValue,
+      (value, beforeValue) => {
+        if (value == null) return;
+        internalValueRef.value = value;
+
+        if (beforeValue == null) return;
+
+        const order = computedOrderRef.value;
+        const index = order.indexOf(value);
+        const beforeIndex = order.indexOf(beforeValue);
+
+        let transition = 'fade';
+        if (index !== -1 && beforeIndex !== -1) {
+          if (index > beforeIndex) transition = 'v-content-switcher-next';
+          if (index < beforeIndex) transition = 'v-content-switcher-prev';
+        }
+        transitionRef.value = transition;
+      },
+      { immediate: true },
+    );
+
+    watch(currentRef, () => {
+      const autotopSettings = autotopSettingsRef.value;
+      if (autotopSettings && props.modelValue != null) {
+        seeTop(autotopSettings);
+      }
+    });
+
+    return () => {
+      const current = currentRef.value;
+      const children = renderSlotOrEmpty(ctx.slots) || [];
+      const currentSlot = ctx.slots[current];
+
+      if (currentSlot) {
+        children.push(
+          <div class="v-content-switcher__content" key={current}>
+            {currentSlot(this)}
+          </div>,
+        );
+      }
+
+      return (
+        <div class="v-content-switcher" ref={elRef}>
+          <div class="v-content-switcher__anchor" ref={anchorRef} />
+          <Transition
+            name={transitionRef.value}
+            onBeforeLeave={(el) => {
+              getEl().style.height = (el as HTMLElement).offsetHeight + 'px';
+            }}
+            onEnter={(el) => {
+              getEl().style.height = (el as HTMLElement).offsetHeight + 'px';
+            }}
+            onAfterEnter={() => {
+              getEl().style.height = '';
+            }}
+            onEnterCancelled={() => {
+              getEl().style.height = '';
+            }}
+            onLeaveCancelled={() => {
+              getEl().style.height = '';
+            }}>
+            {children}
+          </Transition>
+        </div>
+      );
+    };
+  },
+});

package/src/components/VContentSwitcher/index.ts

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