@fastkit/vui 0.6.38 → 0.6.42

package/src/components/VNavigation/VNavigationItem.tsx

@@ -0,0 +1,252 @@
+import './VNavigationItem.scss';
+import {
+  defineComponent,
+  computed,
+  VNodeChild,
+  PropType,
+  VNodeProps,
+  Fragment,
+  ref,
+  watch,
+} from 'vue';
+import { createListTileProps, listTileEmits, VListTile } from '../VListTile';
+import {
+  ExtractPropInput,
+  renderSlotOrEmpty,
+  VExpandTransition,
+} from '@fastkit/vue-utils';
+import { useVui } from '../../injections';
+import { useRoute } from 'vue-router';
+
+export function createNavigationItemProps() {
+  return {
+    ...createListTileProps(),
+    match: String,
+    // key: {
+    //   type: [String, Number],
+    //   required: true,
+    // },
+  };
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface NavigationItemInput
+  extends ExtractPropInput<ReturnType<typeof createNavigationItemProps>> {
+  key: string | number;
+  label: VNodeChild | (() => VNodeChild);
+  children?: NavigationItemInput[];
+}
+
+export function resolveNavigationItemInput(input: NavigationItemInput) {
+  let label = input.label;
+  const props: NavigationItemInput = {
+    ...input,
+  };
+  if (typeof label === 'function') {
+    label = label();
+  }
+  delete (props as NavigationItemInput).label;
+
+  return {
+    label,
+    props,
+  };
+}
+
+export function renderNavigationItemInput(
+  input: NavigationItemInput,
+  extraProps?: Record<string, unknown> & VNodeProps,
+) {
+  const { label, props } = resolveNavigationItemInput(input);
+  return (
+    <VNavigationItem {...{ ...props, ...(extraProps as any) }}>
+      {label}
+    </VNavigationItem>
+  );
+}
+
+export const VNavigationItem = defineComponent({
+  name: 'VNavigationItem',
+  inheritAttrs: false,
+  props: {
+    ...createNavigationItemProps(),
+    children: Array as PropType<NavigationItemInput[]>,
+  },
+  emits: {
+    ...listTileEmits,
+  },
+  setup(props, ctx) {
+    const vui = useVui();
+    const opened = ref(false);
+
+    const children = computed(() => {
+      const c = props.children;
+      return c && c.length ? c : undefined;
+    });
+
+    const to = computed(() => ctx.attrs.to);
+
+    const match = computed(() => {
+      const { match } = props;
+      const { to } = ctx.attrs;
+      if (match) return match;
+      if (!to) return;
+      if (typeof to === 'string') return to;
+      return (to as any).path as string | undefined;
+    });
+
+    const classes = computed(() => [
+      {
+        'v-navigation-item--opened': opened.value,
+      },
+    ]);
+
+    const route = useRoute();
+
+    // const classes = computed(() => [
+    //   // {
+    //   //   'v-navigation-item--matched': matched.value,
+    //   // },
+    // ]);
+
+    watch(
+      () => route.path,
+      (newPath) => {
+        const c = children.value;
+        const m = match.value;
+
+        if (!c || !m) {
+          // matched.value = false;
+          return;
+        }
+
+        if (newPath.match(m)) {
+          open();
+          // matched.value = true;
+        } else {
+          close();
+          // matched.value = false;
+        }
+      },
+      { immediate: true },
+    );
+
+    // const iconPayload = () => opened.value;
+
+    const _props = computed(() => {
+      const c = children.value;
+      let { endIcon } = props;
+      if (c && !endIcon) {
+        endIcon = vui.icon('navigationExpand');
+        if (typeof endIcon === 'string') {
+          const name = endIcon;
+          endIcon = (gen) => {
+            return gen({
+              name,
+              rotate: opened.value ? 180 : 0,
+            });
+          };
+        }
+      }
+
+      const __props: any = {
+        ...props,
+        endIcon,
+      };
+
+      delete __props.children;
+
+      // const _activeClass = props.activeClass;
+      // const activeClass = `v-navigation-item--active${
+      //   _activeClass ? ` ${_activeClass}` : ''
+      // }`;
+
+      return {
+        ...__props,
+        // activeClass,
+        // startIcon: toRawIconProp(__props.startIcon, iconPayload),
+        // endIcon: toRawIconProp(__props.endIcon, iconPayload),
+      };
+    });
+
+    function open() {
+      if (!children.value) return;
+      opened.value = true;
+    }
+
+    function close() {
+      opened.value = false;
+    }
+
+    function toggle() {
+      return opened.value ? close() : open();
+    }
+
+    const onClick = (ev: MouseEvent) => {
+      if (!to.value) {
+        return toggle();
+      }
+      open();
+      // if (!to.value) {
+      //   toggle();
+      // }
+      // ctx.emit('click', ev);
+    };
+
+    const onChangeActive = (isActive: boolean) => {
+      // if (isActive) {
+      //   // open();
+      //   // if (typeof window !== 'undefined') {
+      //   //   // open();
+      //   //   // console.log('hoge', window);
+      //   //   setTimeout(() => {
+      //   //     open();
+      //   //   }, 1000);
+      //   // }
+      //   // open();
+      //   // console.log(props);
+      //   // setTimeout(() => {
+      //   //   open();
+      //   // }, 500);
+      // }
+      ctx.emit('changeActive', isActive);
+    };
+
+    ctx.expose({
+      close,
+    });
+
+    return () => {
+      const _children = children.value;
+      const fallbackTag = _children ? 'button' : undefined;
+
+      return (
+        <Fragment>
+          <VListTile
+            {...ctx.attrs}
+            {..._props.value}
+            fallbackTag={fallbackTag}
+            endIcon={_props.value.endIcon}
+            class={['v-navigation-item', classes.value]}
+            onClick={onClick}
+            onChangeActive={onChangeActive}>
+            {renderSlotOrEmpty(ctx.slots, 'default')}
+          </VListTile>
+          {_children && (
+            <VExpandTransition>
+              <div class="v-navigation-item__expand" v-show={opened.value}>
+                {_children.map((child) =>
+                  renderNavigationItemInput(child, {
+                    startIconEmptySpace: _props.value.startIconEmptySpace,
+                    // onClick,
+                    // onChangeActive,
+                  }),
+                )}
+              </div>
+            </VExpandTransition>
+          )}
+        </Fragment>
+      );
+    };
+  },
+});

package/src/components/VNavigation/index.ts

@@ -0,0 +1,2 @@
+export * from './VNavigationItem';
+export * from './VNavigation';

package/src/components/VOption/VOption.scss

@@ -0,0 +1,61 @@
+@use '../../styles/core.scss';
+
+.v-option {
+  position: relative;
+  display: flex;
+  width: 100%;
+  padding: 0.375em 1em;
+  cursor: pointer;
+  user-select: none;
+
+  input {
+    @include core.hidden-input-element;
+  }
+
+  &::before,
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    pointer-events: none;
+    content: '';
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+
+  &::before {
+    background: currentColor;
+  }
+
+  &::after {
+    background: var(--palette-primary);
+  }
+
+  &:hover,
+  &:focus-within {
+    &::before {
+      opacity: 0.12;
+    }
+  }
+
+  &__label {
+    position: relative;
+    display: block;
+  }
+
+  &--selected::after {
+    opacity: 0.12;
+  }
+
+  &--selected &__label {
+    font-weight: 500;
+    color: var(--palette-primary);
+  }
+
+  &--has-not-value &__label {
+    font-style: italic;
+  }
+}

package/src/components/VOption/VOption.tsx

@@ -0,0 +1,52 @@
+import './VOption.scss';
+import { defineComponent, computed } from 'vue';
+import {
+  createFormSelectorItemSettings,
+  useFormSelectorItemControl,
+  renderSlotOrEmpty,
+} from '@fastkit/vue-kit';
+import { createControlProps, useControl } from '../../composables';
+import { VUI_SELECT_SYMBOL, VUI_OPTION_SYMBOL } from '../../injections';
+
+const { props, emits } = createFormSelectorItemSettings();
+
+export const VOption = defineComponent({
+  name: 'VOption',
+  props: {
+    ...props,
+    ...createControlProps(),
+  },
+  emits,
+  setup(props, ctx) {
+    const nodeControl = useFormSelectorItemControl(props, ctx, {
+      nodeType: VUI_OPTION_SYMBOL,
+      parentNodeType: VUI_SELECT_SYMBOL,
+    });
+    const control = useControl(props);
+    const classes = computed(() => {
+      return [
+        'v-option',
+        {
+          'v-option--selected': nodeControl.selected,
+          'v-option--has-not-value': !nodeControl.hasValue,
+          'v-option--disabled': nodeControl.isDisabled,
+        },
+        control.classes.value,
+      ];
+    });
+    return {
+      ...nodeControl.expose(),
+      classes,
+    };
+  },
+  render() {
+    const { selectorItemControl, classes } = this;
+    return (
+      <label class={classes} onClick={selectorItemControl.handleClickElement}>
+        <span class="v-option__label">
+          {renderSlotOrEmpty(this.$slots, 'default')}
+        </span>
+      </label>
+    );
+  },
+});

package/src/components/VOption/index.ts

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

package/src/components/VOptionGroup/VOptionGroup.scss

@@ -0,0 +1,3 @@
+.v-option-group {
+  display: block;
+}

package/src/components/VOptionGroup/VOptionGroup.tsx

@@ -0,0 +1,55 @@
+import './VOptionGroup.scss';
+import { computed, PropType, defineComponent } from 'vue';
+import {
+  createFormSelectorItemGroupProps,
+  useFormSelectorItemGroupControl,
+  FormSelectorItemGroupControl,
+  defineSlotsProps,
+  VNodeChildOrSlot,
+  resolveVNodeChildOrSlots,
+  renderSlotOrEmpty,
+} from '@fastkit/vue-kit';
+import { VUI_SELECT_SYMBOL } from '../../injections';
+
+export const VOptionGroup = defineComponent({
+  name: 'VOptionGroup',
+  props: {
+    ...createFormSelectorItemGroupProps(),
+    // eslint-disable-next-line vue/require-prop-types
+    label: {} as PropType<VNodeChildOrSlot<FormSelectorItemGroupControl>>,
+    ...defineSlotsProps<{
+      label: FormSelectorItemGroupControl;
+    }>(),
+  },
+  setup(props, ctx) {
+    const groupControl = useFormSelectorItemGroupControl(props, ctx, {
+      parentNodeType: VUI_SELECT_SYMBOL,
+    });
+    const labelSlot = computed(() => {
+      return resolveVNodeChildOrSlots(props.label, ctx.slots.label);
+    });
+    const classes = computed(() => {
+      return [
+        'v-option-group',
+        {
+          'v-option-group--disabled': groupControl.isDisabled,
+        },
+      ];
+    });
+    return {
+      ...groupControl.expose(),
+      classes,
+      labelSlot,
+    };
+  },
+  render() {
+    const { labelSlot, classes, groupControl } = this;
+    const label = labelSlot ? labelSlot(groupControl) : undefined;
+    return (
+      <div class={classes}>
+        {!!label && <div class="v-option-group__label">{label}</div>}
+        {renderSlotOrEmpty(this.$slots, 'default')}
+      </div>
+    );
+  },
+});

package/src/components/VOptionGroup/index.ts

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

package/src/components/VPagination/VPagination.scss

@@ -0,0 +1,100 @@
+@use '../../styles/core.scss';
+
+.v-pagination {
+  --pagination-size: var(--pagination-item-size);
+  --pagination-margin: var(--pagination-item-margin);
+  --pagination-font-size: var(--pagination-item-font-size);
+  --pagination-radius: var(--pagination-item-radius);
+
+  &::before {
+    width: var(--pagination-size);
+    margin: var(--pagination-margin);
+    content: none;
+  }
+
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  font-weight: bold;
+  line-height: 1;
+
+  &--left {
+    justify-content: flex-start;
+  }
+
+  &--center {
+    justify-content: center;
+  }
+
+  &--right {
+    justify-content: flex-end;
+  }
+
+  &__item,
+  a#{&}__item {
+    @include core.button-reset;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--pagination-size);
+    height: var(--pagination-size);
+    margin: calc(var(--pagination-margin) * 0.5);
+    font-size: var(--pagination-font-size);
+    color: inherit;
+    border-radius: var(--pagination-radius);
+    transition: 0.1s;
+
+    &:hover,
+    &:focus {
+      background: rgba(0, 0, 0, 0.1);
+    }
+
+    &--active {
+      &,
+      &:hover,
+      &:focus,
+      &:active {
+        color: var(--text-color);
+        pointer-events: none;
+        background-color: var(--main-color);
+      }
+    }
+
+    &--disabled {
+      color: var(--palette-muted) !important;
+      pointer-events: none !important;
+      background: transparent !important;
+    }
+
+    &--truncate {
+      color: var(--palette-muted) !important;
+      pointer-events: none !important;
+      background: transparent !important;
+    }
+
+    .v-icon {
+      font-size: 125%;
+    }
+  }
+
+  &--dense &__item {
+    --pagination-size: var(--pagination-item-size-dense);
+    --pagination-margin: var(--pagination-item-margin-dense);
+    --pagination-font-size: var(--pagination-item-font-size-dense);
+  }
+
+  &--disabled &__item {
+    color: var(--palette-muted);
+    pointer-events: none;
+
+    &:hover,
+    &:focus {
+      background: transparent;
+    }
+
+    &--active {
+      background: var(--palette-muted);
+    }
+  }
+}