@fastkit/vui 0.6.36 → 0.6.40

package/src/components/VBreadcrumbs/VBreadcrumbs.tsx

@@ -0,0 +1,137 @@
+import './VBreadcrumbs.scss';
+
+import { defineComponent, PropType, VNodeChild, computed } from 'vue';
+import { VLink, NavigationableInheritProps } from '@fastkit/vue-utils';
+import { useVui } from '../../injections';
+import type { VuiService } from '../../service';
+import { RawIconProp, resolveRawIconProp } from '../VIcon';
+
+export interface BreadcrumbsItem
+  extends Pick<NavigationableInheritProps, 'to' | 'disabled'> {
+  /**
+   * "正確なマッチモード" を強制する場合true
+   */
+  // exact?: boolean;
+  icon?: RawIconProp;
+  text: VNodeChild | ((vui: VuiService) => VNodeChild);
+}
+
+export type RawBreadcrumbsItem = string | BreadcrumbsItem;
+
+export const VBreadcrumbs = defineComponent({
+  name: 'VBreadcrumbs',
+  props: {
+    items: {
+      type: Array as PropType<BreadcrumbsItem[]>,
+      default: () => [],
+    },
+    divider: [String, Function] as PropType<
+      VNodeChild | ((vui: VuiService) => VNodeChild)
+    >,
+    // ...defineSlotsProps<{}>(),
+  },
+  setup(props, ctx) {
+    const vui = useVui();
+
+    const computedItemsRef = computed(() => {
+      const items: BreadcrumbsItem[] = props.items.map((rawItem) => {
+        return typeof rawItem === 'string'
+          ? {
+              text: rawItem,
+            }
+          : rawItem;
+      });
+
+      return items.map((item) => {
+        const { to, text } = item;
+        const {
+          disabled = vui.location.match(to) || !vui.location.isAvairable(to),
+        } = item;
+        return {
+          ...item,
+          disabled,
+          text: typeof text === 'function' ? text(vui) : text,
+        };
+      });
+    });
+
+    const lengthRef = computed(() => computedItemsRef.value.length);
+
+    const defaultDividerSlot = () => {
+      return [<i class="v-breadcrumbs__divider__icon" />];
+    };
+
+    return () => {
+      if (lengthRef.value < 1) return;
+      let dividerSlot: (vui: VuiService) => VNodeChild;
+      const propDivider = props.divider;
+      if (propDivider) {
+        dividerSlot =
+          typeof propDivider === 'function' ? propDivider : () => propDivider;
+      } else {
+        dividerSlot = defaultDividerSlot;
+      }
+
+      const children: VNodeChild[] = [];
+
+      computedItemsRef.value.forEach((item, index) => {
+        const { text, icon, disabled, to } = item;
+
+        if (index > 0) {
+          const divider = dividerSlot(vui);
+          if (divider) {
+            children.push(
+              <li class="v-breadcrumbs__divider" key={`divider-${index}`}>
+                {divider}
+              </li>,
+            );
+          }
+        }
+        const myChildren: VNodeChild[] = [];
+
+        if (icon) {
+          const $icon = resolveRawIconProp(false, icon, {
+            class: 'v-breadcrumbs__icon',
+          });
+          if ($icon) {
+            myChildren.push($icon);
+          }
+        }
+
+        if (text) myChildren.push(text);
+
+        const itemChild = to ? (
+          <VLink
+            class="v-breadcrumbs__link"
+            to={to}
+            exactActiveClass="v-breadcrumbs__link--active"
+            // exact={exact}
+          >
+            {myChildren}
+          </VLink>
+        ) : (
+          myChildren
+        );
+
+        children.push(
+          <li
+            class={[
+              'v-breadcrumbs__item',
+              {
+                'v-breadcrumbs__item--disabled': disabled,
+              },
+            ]}
+            key={`link-${index}`}>
+            {itemChild}
+          </li>,
+        );
+      });
+
+      return (
+        <nav class="v-breadcrumbs">
+          <ul class="v-breadcrumbs__list">{children}</ul>
+        </nav>
+      );
+    };
+  },
+});

package/src/components/VBreadcrumbs/index.ts

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

package/src/components/VButton/VButton.scss

@@ -0,0 +1,137 @@
+@use 'sass:math';
+
+.v-button {
+  // $base-height: 2.285714285714286em;
+  $base-height: 2.571428571428571em;
+
+  --padding: 1em;
+  --height: #{$base-height};
+  --icon-margin: 0.6em;
+
+  position: relative;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  min-width: calc(var(--root-em) * 4);
+  // height: calc(var(--root-em) * 2);
+  height: var(--height);
+  // padding: 0 var(--root-em);
+  padding: 0 var(--padding);
+  // margin: 0;
+  margin: calc(var(--root-em) * 0.375) calc(var(--root-em) * 0.5);
+  overflow: hidden;
+  font: inherit;
+  // font-size: calc(var(--root-em) * 0.875);
+  font-weight: 500;
+  line-height: 1;
+  text-decoration: none;
+  text-transform: uppercase;
+  letter-spacing: math.div(1.25, 14) * 1em; //1.25px;
+  vertical-align: bottom;
+  cursor: pointer;
+  user-select: none;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--control-field-radius);
+  outline: 0;
+  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), color 1ms;
+  appearance: none;
+
+  &--plain {
+    color: inherit !important;
+    // color: inherit !important;
+
+    &[disabled] {
+      opacity: 0.5;
+    }
+  }
+
+  &--sm {
+    // height: 2em;
+    // height: calc(var(--root-em) * 1.5); // 24
+    font-size: calc(var(--root-em) * 0.75); // 12
+  }
+
+  &--md {
+    // height: 2.285714285714286em;
+    // height: calc(var(--root-em) * 2); // 32
+    // font-size: calc(var(--root-em) * 0.875); // 14
+    font-size: calc(var(--root-em) * 0.875); // 14
+  }
+
+  &--lg {
+    // height: calc(var(--root-em) * 2.875); // 46
+    font-size: calc(var(--root-em) * 1.375); // 20
+  }
+
+  &--rounded {
+    --padding: 0;
+
+    min-width: 0;
+    aspect-ratio: 1 / 1;
+    margin: calc(var(--root-em) * 0.125) calc(var(--root-em) * 0.125);
+    border-radius: 50%;
+
+    --height: auto;
+  }
+
+  &--icon {
+    // aspect-ratio: 1 / 1;
+    min-width: #{$base-height * 0.75};
+    margin: calc(var(--root-em) * 0.125) calc(var(--root-em) * 0.125);
+
+    // --height: #{$base-height};
+    // --height: calc(var);
+    --height: #{$base-height * 0.75};
+    --padding: 0em;
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &[disabled] {
+    cursor: default;
+  }
+
+  &--spacer {
+    &-left {
+      margin-left: auto;
+    }
+
+    &-right {
+      margin-right: auto;
+    }
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    justify-self: stretch;
+  }
+
+  &--loading &__content {
+    pointer-events: none;
+    opacity: 0;
+  }
+
+  &__icon {
+    &--start {
+      margin-right: var(--icon-margin);
+    }
+
+    &--end {
+      margin-left: var(--icon-margin);
+    }
+  }
+
+  &__loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 1;
+    transform: translate(-50%, -50%);
+  }
+}

package/src/components/VButton/VButton.tsx

@@ -0,0 +1,148 @@
+import './VButton.scss';
+import {
+  defineComponent,
+  ExtractPropTypes,
+  computed,
+  PropType,
+  VNodeChild,
+} from 'vue';
+import { colorSchemeProps, useColorClasses } from '@fastkit/vue-color-scheme';
+import {
+  navigationableInheritProps,
+  ExtractPropInput,
+  createPropsOptions,
+  renderSlotOrEmpty,
+  htmlAttributesPropOptions,
+} from '@fastkit/vue-utils';
+import { useVui } from '../../injections';
+import { createControlProps, useControl } from '../../composables';
+import { VProgressCircular } from '../loading';
+import { ControlSize } from '../../schemes/control';
+import { VIcon } from '../VIcon';
+import type { IconName } from '../VIcon';
+import { VLink } from '@fastkit/vue-utils';
+
+export type VButtonSpacer = 'left' | 'right';
+
+export type RawVButtonSpacer = boolean | VButtonSpacer;
+
+export type VButtonIcon = () => VNodeChild;
+
+export type RawVButtonIcon = IconName | VButtonIcon;
+
+function resolveRawVButtonIcon(
+  raw?: RawVButtonIcon,
+  type: 'main' | 'start' | 'end' = 'main',
+): VButtonIcon | undefined {
+  if (!raw) return;
+  return typeof raw === 'function'
+    ? raw
+    : () => (
+        <VIcon
+          class={['v-button__icon', `v-button__icon--${type}`]}
+          name={raw}
+        />
+      );
+}
+
+export const vueButtonProps = createPropsOptions({
+  ...htmlAttributesPropOptions,
+  ...colorSchemeProps(),
+  ...navigationableInheritProps,
+  spacer: [Boolean, String] as PropType<RawVButtonSpacer>,
+  loading: Boolean,
+  rounded: Boolean,
+  icon: [String, Function] as PropType<RawVButtonIcon>,
+  startIcon: [String, Function] as PropType<RawVButtonIcon>,
+  endIcon: [String, Function] as PropType<RawVButtonIcon>,
+  ...createControlProps(),
+});
+
+export type VButtonProps = ExtractPropInput<typeof vueButtonProps>;
+
+export type VButtonResolvedProps = ExtractPropTypes<typeof vueButtonProps>;
+
+const LOADING_SIZE_MAP: Record<ControlSize, number> = {
+  sm: 14,
+  md: 20,
+  lg: 28,
+};
+
+export const VButton = defineComponent({
+  name: 'VButton',
+  inheritAttrs: false,
+  props: vueButtonProps,
+  setup(props, ctx) {
+    const vui = useVui();
+    const control = useControl(props);
+    const defaults = vui.setting('buttonDefault');
+    const icon = computed(() => {
+      const _icon = resolveRawVButtonIcon(props.icon);
+      return _icon && _icon();
+    });
+    const startIcon = computed(() => {
+      const _icon = resolveRawVButtonIcon(props.startIcon, 'start');
+      return _icon && _icon();
+    });
+    const endIcon = computed(() => {
+      const _icon = resolveRawVButtonIcon(props.endIcon, 'end');
+      return _icon && _icon();
+    });
+    const color = useColorClasses({
+      color: () => props.color || defaults.color,
+      variant: () =>
+        props.variant ||
+        (icon.value ? vui.setting('plainVariant') : defaults.variant),
+    });
+    const isPlain = computed(
+      () =>
+        color.variant.value.value === vui.setting('plainVariant') &&
+        color.color.value.value === defaults.color,
+    );
+    const isLoading = computed(() => props.loading);
+    // const isDisabled = computed(() => props.disabled);
+    // const isRounded = computed(() =>
+    //   props.rounded != null ? props.rounded : !!icon.value,
+    // );
+
+    const spacer = computed<VButtonSpacer | undefined>(() => {
+      const _spacer = props.spacer;
+      if (!_spacer) return;
+      return _spacer === true ? 'left' : _spacer;
+    });
+
+    const classes = computed(() => [
+      color.colorClasses.value,
+      // navigationable.value.classes,
+      spacer.value ? `v-button--spacer-${spacer.value}` : undefined,
+      `v-button--${control.size.value}`,
+      {
+        'v-button--loading': isLoading.value,
+        'v-button--icon': !!icon.value,
+        'v-button--rounded': props.rounded,
+        'v-button--plain': isPlain.value,
+      },
+    ]);
+
+    return () => {
+      const children = renderSlotOrEmpty(ctx.slots);
+      return (
+        <VLink {...ctx.attrs} class={['v-button', classes.value]}>
+          <span class="v-button__content">
+            {startIcon.value}
+            {children}
+            {icon.value}
+            {endIcon.value}
+          </span>
+          {isLoading.value && (
+            <VProgressCircular
+              class="v-button__loading"
+              indeterminate
+              size={LOADING_SIZE_MAP[control.size.value]}
+            />
+          )}
+        </VLink>
+      );
+    };
+  },
+});

package/src/components/VButton/VButtonGroup.scss

@@ -0,0 +1,23 @@
+.v-button-group {
+  display: inline-flex;
+  align-items: stretch;
+
+  &__item {
+    position: relative;
+    margin: 0;
+
+    &--has-left {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &--has-right {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:focus {
+      z-index: 1;
+    }
+  }
+}

package/src/components/VButton/VButtonGroup.tsx

@@ -0,0 +1,81 @@
+import './VButtonGroup.scss';
+
+import { defineComponent, isVNode, cloneVNode, VNodeChild, VNode } from 'vue';
+import { colorSchemeProps } from '@fastkit/vue-color-scheme';
+import { createControlProps } from '../../composables';
+import { renderSlotOrEmpty, isFragment } from '@fastkit/vue-utils';
+import { VButton } from './VButton';
+
+type VButtonGroupChild =
+  | {
+      isButton: true;
+      node: VNode;
+    }
+  | {
+      isButton: false;
+      node: VNodeChild;
+    };
+
+export const VButtonGroup = defineComponent({
+  name: 'VButtonGroup',
+  props: {
+    ...colorSchemeProps(),
+    ...createControlProps(),
+    disabled: Boolean,
+  },
+  setup(props, ctx) {
+    return () => {
+      let buttonLength = 0;
+
+      let tmp = renderSlotOrEmpty(ctx.slots) || [];
+
+      if (tmp.length === 1 && isFragment(tmp[0])) {
+        tmp = tmp[0].children as any;
+      }
+
+      const children: VButtonGroupChild[] = tmp.map((node) => {
+        if (!isVNode(node) || node.type !== VButton) {
+          return {
+            isButton: false,
+            node,
+          };
+        }
+
+        buttonLength++;
+
+        return {
+          isButton: true,
+          node,
+        };
+      });
+
+      let buttonIndex = 0;
+
+      const $children = children.map((child) => {
+        if (child.isButton) {
+          buttonIndex++;
+
+          const hasLeft = buttonIndex > 1;
+          const hasRight = buttonIndex < buttonLength;
+
+          const childProps = child.node.props;
+
+          return cloneVNode(child.node, {
+            ...props,
+            ...childProps,
+            rouded: false,
+            class: [
+              'v-button-group__item',
+              {
+                'v-button-group__item--has-left': hasLeft,
+                'v-button-group__item--has-right': hasRight,
+              },
+            ],
+          });
+        }
+        return child.node;
+      });
+      return <div class="v-button-group">{$children}</div>;
+    };
+  },
+});

package/src/components/VButton/index.ts

@@ -0,0 +1,2 @@
+export * from './VButton';
+export * from './VButtonGroup';

package/src/components/VCard/VCard.scss

@@ -0,0 +1,3 @@
+.v-card {
+  // noop
+}

package/src/components/VCard/VCard.tsx

@@ -0,0 +1,20 @@
+import './VCard.scss';
+import { defineComponent, computed } from 'vue';
+import { VPaper, createPaperProps } from '../VPaper';
+
+export function createCardProps() {
+  return {
+    ...createPaperProps(),
+  };
+}
+
+export const VCard = defineComponent({
+  name: 'VCard',
+  props: createCardProps(),
+  setup(props, ctx) {
+    const _props = computed(() => props);
+    return () => {
+      return <VPaper class="v-card" {..._props.value} v-slots={ctx.slots} />;
+    };
+  },
+});

package/src/components/VCard/VCardActions.scss

@@ -0,0 +1,10 @@
+.v-card-actions {
+  display: flex;
+  align-items: center;
+  padding: var(--card-actions-padding);
+
+  .v-btn {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}

package/src/components/VCard/VCardActions.tsx

@@ -0,0 +1,16 @@
+import './VCardActions.scss';
+import { defineComponent } from 'vue';
+import { renderSlotOrEmpty } from '@fastkit/vue-utils';
+
+export const VCardActions = defineComponent({
+  name: 'VCardActions',
+  setup(props, ctx) {
+    return () => {
+      return (
+        <div class="v-card-actions">
+          {renderSlotOrEmpty(ctx.slots, 'default')}
+        </div>
+      );
+    };
+  },
+});

package/src/components/VCard/VCardContent.scss

@@ -0,0 +1,3 @@
+.v-card-content {
+  padding: var(--card-content-padding);
+}

package/src/components/VCard/VCardContent.tsx

@@ -0,0 +1,16 @@
+import './VCardContent.scss';
+import { defineComponent } from 'vue';
+import { renderSlotOrEmpty } from '@fastkit/vue-utils';
+
+export const VCardContent = defineComponent({
+  name: 'VCardContent',
+  setup(props, ctx) {
+    return () => {
+      return (
+        <div class="v-card-content">
+          {renderSlotOrEmpty(ctx.slots, 'default')}
+        </div>
+      );
+    };
+  },
+});

package/src/components/VCard/index.ts

@@ -0,0 +1,3 @@
+export * from './VCard';
+export * from './VCardContent';
+export * from './VCardActions';