@fastkit/vui 0.6.39 → 0.6.40

package/src/components/VHero/VHero.tsx

@@ -0,0 +1,52 @@
+import './VHero.scss';
+import { defineComponent, PropType } from 'vue';
+import {
+  renderSlotOrEmpty,
+  htmlAttributesPropOptions,
+  defineSlotsProps,
+} from '@fastkit/vue-utils';
+import { toScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
+import { VAppContainer } from '@fastkit/vue-app-layout';
+
+// Adornment
+
+export const VHero = defineComponent({
+  name: 'VHero',
+  props: {
+    ...htmlAttributesPropOptions,
+    color: {
+      type: String as PropType<ScopeName>,
+      default: 'primary',
+    },
+    tag: {
+      type: String,
+      default: 'header',
+    },
+    hTag: {
+      type: String,
+      default: 'h1',
+    },
+    ...defineSlotsProps<{
+      default: void;
+      adornment: void;
+    }>(),
+  },
+  setup(props, ctx) {
+    return () => {
+      const TagName = props.tag as 'header';
+      const HTagName = props.hTag as 'h1';
+      const adornment = renderSlotOrEmpty(ctx.slots, 'adornment');
+
+      return (
+        <VAppContainer pulled>
+          <TagName class={['v-hero', toScopeColorClass(props.color)]}>
+            <HTagName class="v-hero__title">
+              {renderSlotOrEmpty(ctx.slots, 'default')}
+            </HTagName>
+            {adornment && <div class="v-hero__adornment">{adornment}</div>}
+          </TagName>
+        </VAppContainer>
+      );
+    };
+  },
+});

package/src/components/VHero/index.ts

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

package/src/components/VIcon/VIcon.scss

@@ -0,0 +1,22 @@
+.v-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25em;
+  // -webkit-user-drag: none;
+  // pointer-events: none;
+  user-select: none;
+  aspect-ratio: 1 / 1;
+
+  &--clickable {
+    // pointer-events: auto;
+    cursor: pointer;
+  }
+
+  &__body {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 150ms linear;
+  }
+}

package/src/components/VIcon/VIcon.tsx

@@ -0,0 +1,110 @@
+import './VIcon.scss';
+import {
+  defineComponent,
+  PropType,
+  computed,
+  CSSProperties,
+  VNodeChild,
+  VNodeProps,
+} from 'vue';
+import { createPropsOptions, ExtractPropInput } from '@fastkit/vue-utils';
+import type { IconName } from '@fastkit/icon-font';
+
+export type { IconName } from '@fastkit/icon-font';
+export { ICON_NAMES } from '@fastkit/icon-font';
+
+type IconPropInout = ExtractPropInput<typeof iconProps>;
+
+type IconGenerator = (input: IconPropInout) => VNodeChild;
+
+type EmptyIconSymbol = '$empty';
+
+type ToggleableIconHook = (gen: IconGenerator, ctx: boolean) => VNodeChild;
+
+export type RawIconProp = IconName | EmptyIconSymbol | ToggleableIconHook;
+
+// export function toRawIconProp<T = void>(
+//   prop: RawIconProp<T>,
+//   payload: () => T,
+// ): RawIconProp {
+//   if (!prop || typeof prop !== 'function') {
+//     return prop;
+//   }
+//   const fn = (gen: IconGenerator): VNodeChild => {
+//     const t = payload();
+//     return prop(gen, t);
+//   };
+//   return fn;
+// }
+
+// export const rawRawIconProp = [String, Function] as PropType<RawIconProp>;
+const _rawIconProp = [String, Function];
+
+export function rawIconProp() {
+  return _rawIconProp as PropType<RawIconProp>;
+}
+
+export function resolveRawIconProp(
+  payload: boolean,
+  prop?: RawIconProp,
+  extraProps?: Record<string, unknown> & VNodeProps,
+): VNodeChild {
+  if (!prop) return;
+
+  return typeof prop === 'function' ? (
+    prop(
+      (input: IconPropInout) => <VIcon {...input} {...(extraProps as any)} />,
+      payload,
+    )
+  ) : (
+    <VIcon {...(extraProps as any)} name={prop} />
+  );
+}
+
+export const iconProps = createPropsOptions({
+  name: {
+    type: String as PropType<IconName | EmptyIconSymbol>,
+    required: true,
+  },
+  rotate: {
+    type: Number,
+  },
+});
+
+export const VIcon = defineComponent({
+  name: 'VIcon',
+  props: {
+    ...iconProps,
+  },
+  emits: {} as {
+    click: (ev: MouseEvent) => true;
+  },
+  setup(props, ctx) {
+    const iconName = computed(() => props.name);
+    const clickable = computed(
+      () => typeof (ctx.attrs as any).onClick !== 'undefined',
+    );
+    const classes = computed(() => [
+      {
+        'v-icon--clickable': clickable.value,
+      },
+    ]);
+    const bodyClasses = computed(() => `icon-${iconName.value}`);
+    const bodyStyles = computed<CSSProperties | undefined>(() => {
+      const { rotate } = props;
+      if (!rotate) return;
+      return {
+        transform: `rotate(${rotate}deg)`,
+      };
+    });
+
+    return () => (
+      <span class={[`v-icon notranslate`, classes.value]}>
+        <i
+          class={['v-icon__body icon', bodyClasses.value]}
+          style={bodyStyles.value}
+        />
+      </span>
+    );
+  },
+});

package/src/components/VIcon/index.ts

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

package/src/components/VListTile/VListTile.scss

@@ -0,0 +1,71 @@
+.v-list-tile {
+  --tile-background: var(--main-color, transparent);
+  --tile-active-background: var(--deep-color, transparent);
+  --tile-text-color: var(--text-color);
+  --tile-text-active-color: var(--text-color);
+  --tile-pin-color: transparent;
+  --paper-link-color: var(--tile-text-color);
+
+  // &--has-color {
+  //   --tile-text-color: var(--nav-color);
+  //   --tile-text-active-color: var(--navActive-color, var(--nav-color));
+  // }
+
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 10px;
+  color: var(--tile-text-color);
+  text-align: left;
+  text-decoration: none;
+  user-select: none;
+  background: var(--tile-background);
+  border: 0;
+  border-left: 3px solid var(--tile-pin-color);
+  border-radius: 0;
+  outline: 0;
+  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  appearance: none;
+
+  &--clickable {
+    cursor: pointer;
+
+    --tile-text-color: var(--nav-color);
+    --tile-text-active-color: var(--navActive-color, var(--nav-color));
+
+    // --tile-text-active-color: var(--navActive-color, var(--tile-text-color));
+
+    &:hover,
+    &:focus {
+      --tile-background: var(--tile-active-background);
+      --tile-text-color: var(--tile-text-active-color);
+    }
+  }
+
+  &--active {
+    --tile-pin-color: var(--pin-color);
+    --tile-text-color: var(--tile-text-active-color);
+    --tile-background: var(--tile-active-background);
+  }
+
+  // .v-list-tile--opened & {
+  //   --tile-pin-color: var(--pin-color);
+  // }
+
+  &__body {
+    font-size: 0.8125rem;
+    // font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1.5;
+  }
+
+  &__icon {
+    min-width: 2em;
+
+    &--end {
+      margin-left: auto;
+      text-align: right;
+    }
+  }
+}

package/src/components/VListTile/VListTile.tsx

@@ -0,0 +1,121 @@
+import './VListTile.scss';
+import {
+  defineComponent,
+  computed,
+  PropType,
+  VNodeChild,
+  ComputedRef,
+  watch,
+} from 'vue';
+import { rawIconProp, resolveRawIconProp } from '../VIcon';
+import {
+  renderSlotOrEmpty,
+  navigationableInheritProps,
+  createPropsOptions,
+} from '@fastkit/vue-utils';
+import { useScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
+import { useLink } from 'vue-router';
+import { VLink } from '@fastkit/vue-utils';
+
+export function createListTileProps() {
+  const icon = rawIconProp();
+  return {
+    ...navigationableInheritProps,
+    ...createPropsOptions({
+      startIcon: icon,
+      endIcon: icon,
+      linkFallbackTag: {
+        type: String,
+        default: 'div',
+      },
+      startIconEmptySpace: Boolean,
+      color: String as PropType<ScopeName>,
+      exactMatch: Boolean,
+    }),
+  };
+}
+
+export const listTileEmits = {
+  changeActive: (isActive: boolean) => true,
+};
+
+export const VListTile = defineComponent({
+  name: 'VListTile',
+  inheritAttrs: false,
+  props: createListTileProps(),
+  emits: {
+    ...listTileEmits,
+  },
+  setup(props, ctx) {
+    const startIcon: ComputedRef<VNodeChild> = computed(() => {
+      let icon = resolveRawIconProp(false, props.startIcon);
+      if (!icon && props.startIconEmptySpace) {
+        icon = resolveRawIconProp(false, '$empty');
+      }
+      return icon;
+    });
+    const endIcon: ComputedRef<VNodeChild> = computed(() =>
+      resolveRawIconProp(false, props.endIcon),
+    );
+
+    const hasTo = computed(() => !!ctx.attrs.to);
+
+    const link = useLink({ to: (ctx.attrs.to as any) || '' });
+
+    const isActive = computed(() => {
+      if (!hasTo.value) return false;
+      return props.exactMatch ? link.isExactActive.value : link.isActive.value;
+    });
+
+    const color = useScopeColorClass(props);
+    const classes: ComputedRef<any[]> = computed(() => {
+      const _color = color.value;
+      const hasColor = !!_color.value;
+
+      return [
+        color.value.className,
+        {
+          'v-list-tile--plain': !hasColor,
+          'v-list-tile--has-color': hasColor,
+          'v-list-tile--active': isActive.value,
+        },
+      ];
+    });
+
+    watch(
+      () => isActive.value,
+      (isActive) => {
+        ctx.emit('changeActive', isActive);
+      },
+      {
+        immediate: true,
+      },
+    );
+
+    return () => {
+      const _startIcon = startIcon.value;
+      const _endIcon = endIcon.value;
+
+      return (
+        <VLink
+          {...ctx.attrs}
+          class={['v-list-tile', classes.value]}
+          clickableClassName="v-list-tile--clickable">
+          {_startIcon && (
+            <span class="v-list-tile__icon v-list-tile__icon--start">
+              {_startIcon}
+            </span>
+          )}
+          <span class="v-list-tile__body">
+            {renderSlotOrEmpty(ctx.slots, 'default')}
+          </span>
+          {_endIcon && (
+            <span class="v-list-tile__icon v-list-tile__icon--end">
+              {_endIcon}
+            </span>
+          )}
+        </VLink>
+      );
+    };
+  },
+});

package/src/components/VListTile/index.ts

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

package/src/components/VNavigation/VNavigation.scss

@@ -0,0 +1,12 @@
+.v-navigation {
+  // noop
+  &__caption {
+    display: block;
+    padding: calc(var(--root-em) * 0.625) calc(var(--root-em) * 1.5625);
+    margin: 1em 0 0;
+    // font-size: 0.6875rem;
+    font-size: 0.75rem;
+    color: var(--caption-color);
+    text-transform: uppercase;
+  }
+}

package/src/components/VNavigation/VNavigation.tsx

@@ -0,0 +1,79 @@
+import './VNavigation.scss';
+import {
+  defineComponent,
+  computed,
+  PropType,
+  VNodeChild,
+  onBeforeUpdate,
+  ref,
+} from 'vue';
+import {
+  NavigationItemInput,
+  renderNavigationItemInput,
+} from './VNavigationItem';
+import { useScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
+
+export const VNavigation = defineComponent({
+  name: 'VNavigation',
+  props: {
+    items: {
+      type: Array as PropType<NavigationItemInput[]>,
+      required: true,
+    },
+    color: String as PropType<ScopeName>,
+    startIconEmptySpace: {
+      type: Boolean,
+      default: true,
+    },
+    caption: [String, Function] as PropType<VNodeChild | (() => VNodeChild)>,
+  },
+  setup(props, ctx) {
+    const items = computed(() => props.items);
+    const color = useScopeColorClass(props);
+    const classes = computed(() => [color.value.className]);
+    const startIconEmptySpace = computed(() => props.startIconEmptySpace);
+    const caption = computed(() => {
+      const c = props.caption;
+      return typeof c === 'function' ? c() : c;
+    });
+    const itemsRef = ref<{ key: string | number; ref: any }[]>([]);
+
+    onBeforeUpdate(() => {
+      itemsRef.value = [];
+    });
+
+    function setItemRef(item: NavigationItemInput, itemRef: any) {
+      itemsRef.value.push({ key: item.key, ref: itemRef });
+    }
+
+    function onItemActivated(item: NavigationItemInput) {
+      itemsRef.value.forEach(({ key, ref }) => {
+        if (key === item.key) return;
+        ref.close();
+      });
+    }
+
+    return () => {
+      const $caption = caption.value;
+      return (
+        <nav class={['v-navigation', classes.value]}>
+          {!!$caption && <div class="v-navigation__caption">{$caption}</div>}
+          {items.value.map((item) =>
+            renderNavigationItemInput(item, {
+              class: 'v-navigation__item',
+              startIconEmptySpace: startIconEmptySpace.value,
+              ref: (ref: any) => {
+                setItemRef(item, ref);
+              },
+              onChangeActive: (isActive: boolean) => {
+                if (isActive /* && item.children && item.children.length*/) {
+                  onItemActivated(item);
+                }
+              },
+            }),
+          )}
+        </nav>
+      );
+    };
+  },
+});

package/src/components/VNavigation/VNavigationItem.scss

@@ -0,0 +1,14 @@
+.v-navigation-item {
+  &--opened {
+    --tile-background: var(--tile-active-background);
+    --tile-text-color: var(--tile-text-active-color);
+  }
+
+  &__expand {
+    transition: height 0.2s;
+
+    .v-navigation-item {
+      --tile-background: var(--tile-active-background);
+    }
+  }
+}