@fastkit/vui 0.6.38 → 0.6.42

package/src/components/VPagination/VPagination.tsx

@@ -0,0 +1,346 @@
+import './VPagination.scss';
+
+import {
+  defineComponent,
+  PropType,
+  ref,
+  watch,
+  computed,
+  withDirectives,
+} from 'vue';
+import {
+  createPropsOptions,
+  rawNumberPropType,
+  resolveNumberish,
+} from '@fastkit/vue-utils';
+import { isPromise } from '@fastkit/helpers';
+import { useRouter, RouterLink } from 'vue-router';
+import { resolveRawIconProp } from '../VIcon';
+import { resizeDirectiveArgument } from '@fastkit/vue-utils';
+import { useScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
+import { useVui } from '../../injections';
+
+export type VPaginationGuard = (
+  page: number,
+) => boolean | void | Promise<boolean | void>;
+
+export const PAGINATION_ALIGNS = ['left', 'center', 'right'] as const;
+
+export type VPaginationAlign = typeof PAGINATION_ALIGNS[number];
+
+export function paginationProps() {
+  return createPropsOptions({
+    /**
+     * Active Pages
+     */
+    modelValue: {
+      type: rawNumberPropType,
+      default: 1,
+    },
+
+    /**
+     * Total number of pages
+     */
+    length: {
+      type: rawNumberPropType,
+      default: 0,
+    },
+
+    /**
+     * Maximum number of links to display.
+     */
+    totalVisible: rawNumberPropType,
+
+    /**
+     * true when narrowing
+     */
+    dense: Boolean,
+    disabled: Boolean,
+    align: {
+      type: String as PropType<VPaginationAlign>,
+      default: 'center',
+    },
+
+    /**
+     * To synchronize with a query, use the query name
+     */
+    routeQuery: String,
+    beforeChange: Function as PropType<VPaginationGuard>,
+    color: String as PropType<ScopeName>,
+  });
+}
+
+type ItemSource = number | 'prev' | 'next' | 'truncate';
+
+export const VPagination = defineComponent({
+  name: 'VPagination',
+  props: paginationProps(),
+  emits: {
+    change: (page: number) => true,
+  },
+  setup(props, ctx) {
+    const vui = useVui();
+    const elRef = ref<HTMLElement | null>(null);
+    const router = useRouter();
+    const internalValue = ref(1);
+    const containerWidth = ref(0);
+    const itemSize = ref(0);
+    const capacityLength = computed(() => {
+      const _itemSize = itemSize.value;
+      if (!_itemSize) return 0;
+      return Math.floor(containerWidth.value / _itemSize);
+    });
+    const colorScope = useScopeColorClass({
+      color: () => props.color || vui.setting('primaryScope'),
+    });
+    const computedLength = computed(() => resolveNumberish(props.length));
+    const computedTotalVisible = computed(() =>
+      resolveNumberish(props.totalVisible),
+    );
+    const computedNumbersLength = computed(() => capacityLength.value - 2 - 2);
+    const computedPage = computed(() => {
+      const { routeQuery } = props;
+      if (routeQuery) {
+        return vui.location.getQuery(routeQuery, Number, 1);
+      }
+      return internalValue.value;
+    });
+
+    const _range = (from: number, to: number) => {
+      const range: number[] = [];
+
+      from = from > 0 ? from : 1;
+
+      for (let i = from; i <= to; i++) {
+        range.push(i);
+      }
+
+      return range;
+    };
+
+    const computedItems = computed<ItemSource[]>(() => {
+      const maxButtons = computedNumbersLength.value;
+      const totalVisible = computedTotalVisible.value;
+      const length = computedLength.value;
+      const pageValue = computedPage.value;
+
+      const maxLength = Math.min(
+        Math.max(0, totalVisible || 0) || length,
+        Math.max(0, maxButtons) || length,
+        length,
+      );
+      if (length <= maxLength) {
+        return _range(1, length);
+      }
+      const even = maxLength % 2 === 0 ? 1 : 0;
+      const left = Math.floor(maxLength / 2);
+      const right = length - left + 1 + even;
+
+      if (pageValue > left && pageValue < right) {
+        const start = pageValue - left + 2;
+        const end = pageValue + left - 2 - even;
+
+        return [1, 'truncate', ..._range(start, end), 'truncate', length];
+      } else if (pageValue === left) {
+        const end = pageValue + left - 1 - even;
+        return [..._range(1, end), 'truncate', length];
+      } else if (pageValue === right) {
+        const start = pageValue - left + 1;
+        return [1, 'truncate', ..._range(start, length)];
+      } else {
+        return [..._range(1, left), 'truncate', ..._range(right, length)];
+      }
+    });
+
+    const isActive = computed(() => computedLength.value > 1);
+
+    const isTransitioning = computed(() => {
+      const { routeQuery } = props;
+      return vui.location.isQueryOnlyTransitioning(routeQuery);
+    });
+
+    const isDisabled = computed(() => props.disabled || isTransitioning.value);
+
+    const classes = computed(() => [
+      {
+        'v-pagination--disabled': isDisabled.value,
+        'v-pagination--dense': props.dense,
+        [`v-pagination--${props.align}`]: true,
+      },
+      colorScope.value.className,
+    ]);
+
+    async function setPage(value: number | string) {
+      if (isDisabled.value) return;
+      const { beforeChange, routeQuery } = props;
+      const newPage = resolveNumberish(value);
+      if (computedPage.value === newPage) return;
+      if (beforeChange) {
+        try {
+          let result = beforeChange(newPage);
+          if (isPromise(result)) result = await result;
+          if (result === false) return;
+        } catch (e) {}
+      }
+      if (routeQuery) {
+        const to = createRoutableLocationByPage(newPage, routeQuery);
+        return router.push(to).then((failure) => {
+          !failure && ctx.emit('change', newPage);
+        });
+      } else {
+        internalValue.value = newPage;
+        (ctx as any).emit('update:modelValue', newPage);
+        ctx.emit('change', newPage);
+      }
+    }
+
+    function createPageInfo(source: ItemSource): {
+      number: boolean;
+      page: number | undefined;
+      active: boolean;
+      disabled: boolean;
+    } {
+      const currentPage = computedPage.value;
+      const length = computedLength.value;
+      let number: boolean;
+      let page: number | undefined;
+      let active: boolean;
+      let disabled: boolean;
+
+      if (typeof source === 'number') {
+        number = true;
+        page = source;
+        active = currentPage === page;
+        disabled = false;
+      } else if (source === 'truncate') {
+        number = false;
+        active = false;
+        disabled = false;
+      } else {
+        number = false;
+        const isPrev = source === 'prev';
+        const ammount = isPrev ? -1 : 1;
+        page = currentPage + ammount;
+        active = false;
+        disabled = page < 1 || page > length;
+      }
+
+      return {
+        number,
+        page,
+        active,
+        disabled,
+      };
+    }
+
+    function createRoutableLocationByPage(page: number, routeQuery: string) {
+      return vui.location.getQueryMergedLocation({
+        [routeQuery]: page,
+      });
+    }
+
+    function genItem(source: ItemSource, index: number) {
+      const { number, page, active, disabled } = createPageInfo(source);
+      const type = number ? 'num' : source;
+      const classes = [
+        'v-pagination__item',
+        {
+          [`v-pagination__item--${type}`]: true,
+          'v-pagination__item--active': active,
+          'v-pagination__item--disabled': disabled,
+        },
+      ];
+      const children = number
+        ? page
+        : (() => {
+            if (type === 'truncate') {
+              return <span>...</span>;
+            }
+
+            const isPrev = type === 'prev';
+            const icon = isPrev ? vui.icon('prev') : vui.icon('next');
+            return resolveRawIconProp(false, icon, {
+              class: 'v-pagination__item__icon',
+            });
+          })();
+
+      const onClick = (ev: MouseEvent) => {
+        ev.preventDefault();
+        if (page === undefined || active || disabled) return;
+        setPage(page);
+      };
+
+      const key = `${source}-${index}`;
+
+      const { routeQuery } = props;
+
+      if (page !== undefined && routeQuery) {
+        const to = createRoutableLocationByPage(page, routeQuery);
+        return (
+          <RouterLink
+            class={classes}
+            to={to}
+            key={key}
+            // event=""
+            // nativeOn={
+            //   page === undefined
+            //     ? undefined
+            //     : {
+            //         click: onClick,
+            //       }
+            // }
+          >
+            {children}
+          </RouterLink>
+        );
+      } else {
+        return (
+          <button
+            class={classes}
+            type="button"
+            value={page}
+            onClick={onClick}
+            key={key}>
+            {children}
+          </button>
+        );
+      }
+    }
+
+    watch(
+      () => props.modelValue,
+      (modelValue) => {
+        internalValue.value = resolveNumberish(modelValue);
+      },
+      { immediate: true },
+    );
+
+    return () => {
+      if (!isActive.value) return undefined;
+      const $items = [
+        'prev' as const,
+        ...computedItems.value,
+        'next' as const,
+      ].map((i, index) => genItem(i, index));
+
+      return withDirectives(
+        <nav class={['v-pagination', classes.value]} ref={elRef}>
+          {$items}
+        </nav>,
+        [
+          resizeDirectiveArgument(({ width }) => {
+            const el = elRef.value;
+            if (el) {
+              const style = window.getComputedStyle(el, 'before');
+              const width = style.getPropertyValue('width');
+              const margin = style.getPropertyValue('margin');
+              const size = parseFloat(width) + parseFloat(margin) * 0.5;
+              itemSize.value = size;
+            }
+            containerWidth.value = width;
+          }),
+        ],
+      );
+    };
+  },
+});

package/src/components/VPagination/index.ts

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

package/src/components/VPaper/VPaper.scss

@@ -0,0 +1,37 @@
+.v-paper {
+  --paper-radius: var(--control-field-radius);
+
+  &--plain {
+    --paper-background--color: var(--palette-background);
+    --paper-text-color: inherit;
+    --paper-link-color: var(--link-color);
+  }
+
+  &--has-color {
+    --paper-background--color: var(--main-color);
+    --paper-text-color: var(--text-color);
+    --paper-link-color: var(--nav-color);
+  }
+
+  color: var(--paper-text-color);
+  background-color: var(--paper-background--color);
+  border-radius: var(--paper-radius);
+
+  &--square {
+    --paper-radius: 0px;
+  }
+
+  a {
+    color: var(--paper-link-color);
+  }
+
+  &__header {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  &__footer {
+    border-bottom-right-radius: inherit;
+    border-bottom-left-radius: inherit;
+  }
+}

package/src/components/VPaper/VPaper.tsx

@@ -0,0 +1,78 @@
+import './VPaper.scss';
+import { defineComponent, computed, PropType, VNodeProps } from 'vue';
+import { createElevationProps, useElevation } from '../../composables';
+import { renderSlotOrEmpty, defineSlotsProps } from '@fastkit/vue-utils';
+import { useScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
+
+export function createPaperBaseProps() {
+  return {
+    color: String as PropType<ScopeName>,
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    ...defineSlotsProps<{
+      header: void;
+      default: void;
+      footer: void;
+    }>(),
+  };
+}
+
+type ARGS = Record<string, unknown> & VNodeProps;
+
+export function createPaperProps() {
+  return {
+    ...createElevationProps(),
+    ...createPaperBaseProps(),
+    square: Boolean,
+    headerProps: Object as PropType<ARGS>,
+    bodyProps: Object as PropType<ARGS>,
+    footerProps: Object as PropType<ARGS>,
+  };
+}
+
+export const VPaper = defineComponent({
+  name: 'VPaper',
+  props: createPaperProps(),
+  setup(props, ctx) {
+    const tag = computed(() => props.tag);
+    const elevation = useElevation(props, { defaultValue: 1 });
+    const scope = useScopeColorClass(props);
+    const classes = computed(() => [
+      elevation.elevationClassName.value,
+      scope.value.className,
+      {
+        'v-paper--plain': !scope.value.value,
+        'v-paper--has-color': !!scope.value.value,
+        'v-paper--square': props.square,
+      },
+    ]);
+    const headerProps = computed<any>(() => props.headerProps);
+    const bodyProps = computed<any>(() => props.bodyProps);
+    const footerProps = computed<any>(() => props.footerProps);
+
+    return () => {
+      const TagName = tag.value as 'div';
+      const header = renderSlotOrEmpty(ctx.slots, 'header');
+      const footer = renderSlotOrEmpty(ctx.slots, 'footer');
+      return (
+        <TagName class={['v-paper', classes.value]}>
+          {header && (
+            <div class="v-paper__header" {...headerProps.value}>
+              {header}
+            </div>
+          )}
+          <div class="v-paper__body" {...bodyProps.value}>
+            {renderSlotOrEmpty(ctx.slots, 'default')}
+          </div>
+          {footer && (
+            <div class="v-paper__footer" {...footerProps.value}>
+              {footer}
+            </div>
+          )}
+        </TagName>
+      );
+    };
+  },
+});

package/src/components/VPaper/index.ts

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

package/src/components/VRadio/VRadio.scss

@@ -0,0 +1,66 @@
+@use 'sass:math';
+
+.v-radio {
+  --my-color: var(--color);
+
+  // color: var(--my-color);
+  // --my-faux-bg-color: transparent;
+
+  // &--selected,
+  // &--indeterminate {
+  //   --my-border-color: transparent;
+  //   --my-faux-bg-color: var(--color);
+  // }
+
+  &__faux {
+    position: relative;
+    // display: flex;
+    // align-items: center;
+    // justify-content: center;
+    display: block;
+    width: 100%;
+    height: 100%;
+    // background: var(--my-faux-bg-color);
+    // border: solid 2px currentColor;
+    // border-radius: 100%;
+    transition: border-color 0.2s, background-color 0.2s;
+
+    &::before,
+    &::after {
+      position: absolute;
+      display: block;
+      content: '';
+      border-radius: 100%;
+    }
+
+    &::before {
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border: solid 2px currentColor;
+      // display: block;
+      // width: 60%;
+      // height: 60%;
+      // content: '';
+      // background: currentColor;
+      // border-radius: 100%;
+    }
+
+    &::after {
+      top: 50%;
+      left: 50%;
+      width: 50%;
+      height: 50%;
+      background: currentColor;
+      transition: transform 0.2s;
+      transform: translate(-50%, -50%) scale(0);
+    }
+  }
+
+  &--selected &__faux {
+    &::after {
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+}

package/src/components/VRadio/VRadio.tsx

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

package/src/components/VRadio/index.ts

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

package/src/components/VRadioGroup/VRadioGroup.tsx

@@ -0,0 +1,10 @@
+import { VUI_RADIO_GROUP_SYMBOL } from '../../injections';
+import { VRadio } from '../VRadio';
+import { defineFormSelectorComponent } from '../../composables';
+
+export const VRadioGroup = defineFormSelectorComponent({
+  name: 'VRadioGroup',
+  nodeType: VUI_RADIO_GROUP_SYMBOL,
+  className: 'v-radio-group',
+  itemRenderer: ({ attrs, slots }) => <VRadio {...attrs}>{slots}</VRadio>,
+});

package/src/components/VRadioGroup/index.ts

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

package/src/components/VSelect/VSelect.scss

@@ -0,0 +1,78 @@
+@use '../../styles/core.scss';
+
+.v-select {
+  &__input {
+    cursor: pointer;
+
+    &__element {
+      @include core.hidden-input-element;
+    }
+
+    // &__element {
+    //   width: 100%;
+    //   min-width: 0;
+    //   // width: calc(100% - 8px);
+    //   padding: 0;
+    //   margin: 0;
+    //   overflow: hidden;
+    //   // margin: 0 8px;
+    //   font-size: inherit;
+    //   text-overflow: ellipsis;
+    //   white-space: nowrap;
+    //   background: transparent;
+    //   border: 0;
+    //   border-radius: 0;
+    //   outline: 0;
+
+    //   &:-webkit-autofill {
+    //     color: inherit !important;
+    //     // box-shadow: 0 0 0 1000px get-color(field) inset;
+    //   }
+
+    //   &::-ms-clear {
+    //     display: none;
+    //   }
+
+    //   // @include placeholder {
+    //   //   color: get-color(text-muted);
+    //   // }
+    // }
+  }
+
+  &__body {
+    padding: 0.5em 0;
+  }
+
+  &__selections {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+    // display: flex;
+    // align-items: center;
+    // width: 100%;
+    // min-width: 0;
+    &__inner {
+      display: table-cell;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      vertical-align: middle;
+    }
+  }
+
+  &__placeholder {
+    font-style: italic;
+    color: var(--control-disabled-color);
+  }
+
+  // &__selection {
+  //   // // box-sizing: content-box;
+  //   // display: table-cell;
+  //   // // width: 100%;
+  //   // // min-width: 0;
+  //   // overflow: hidden;
+  //   // text-overflow: ellipsis;
+  //   // white-space: nowrap;
+  //   // vertical-align: middle;
+  // }
+}