@firstnoodle-ui/bui 0.0.13 → 0.0.14

package/src/components/scrollbar/enums.ts

@@ -1,23 +0,0 @@
-import type { BarProperties } from "./types";
-
-export const horizontalProperties: BarProperties = {
-  offset: "offsetWidth",
-  scroll: "scrollLeft",
-  scrollSize: "scrollWidth",
-  size: "width",
-  key: "horizontal",
-  axis: "X",
-  client: "clientX",
-  direction: "left",
-};
-
-export const verticalProperties: BarProperties = {
-  offset: "offsetHeight",
-  scroll: "scrollTop",
-  scrollSize: "scrollHeight",
-  size: "height",
-  key: "vertical",
-  axis: "Y",
-  client: "clientY",
-  direction: "top",
-};

package/src/components/scrollbar/index.ts

@@ -1,2 +0,0 @@
-export { default as BScrollbar } from "./Scrollbar.vue";
-export { default as BScrollBottomLoader } from "./ScrollBottomLoader.vue";

package/src/components/scrollbar/scrollbarWidth.ts

@@ -1,26 +0,0 @@
-let scrollBarWidth: number | undefined;
-
-export const scrollbarWidth = (): number => {
-  if (scrollBarWidth !== undefined) return scrollBarWidth;
-
-  const outer = document.createElement("div");
-  outer.className = "el-scrollbar__wrap";
-  outer.style.visibility = "hidden";
-  outer.style.width = "100px";
-  outer.style.position = "absolute";
-  outer.style.top = "-9999px";
-  document.body.appendChild(outer);
-
-  const widthNoScroll = outer.offsetWidth;
-  outer.style.overflow = "scroll";
-
-  const inner = document.createElement("div");
-  inner.style.width = "100%";
-  outer.appendChild(inner);
-
-  const widthWithScroll = inner.offsetWidth;
-  outer.parentNode?.removeChild(outer);
-  scrollBarWidth = widthNoScroll - widthWithScroll;
-
-  return scrollBarWidth;
-};

package/src/components/scrollbar/style.scss

@@ -1,75 +0,0 @@
-// reference https://github.com/ElemeFE/element/blob/dev/packages/theme-chalk/src/scrollbar.scss
-
-.scrollbar {
-  overflow: hidden;
-  position: relative;
-
-  &:hover,
-  &:active,
-  &:focus {
-    > .scrollbar__bar {
-      opacity: 1;
-      transition: opacity 340ms ease-out;
-    }
-  }
-
-  &__wrap {
-    overflow: auto;
-    height: 100%;
-
-    &.hidden-default {
-      scrollbar-width: none;
-      &::-webkit-scrollbar {
-        width: 0;
-        height: 0;
-      }
-    }
-  }
-
-  &__view {
-    height: 100%;
-  }
-
-  &__thumb {
-    position: relative;
-    display: block;
-    width: 0;
-    height: 0;
-    cursor: pointer;
-    border-radius: inherit;
-    background-color: #909399; // opacity 0.3
-    transition: .3s background-color;
-
-    &:hover {
-      background-color: #909399; // opacity 0.5
-    }
-  }
-
-  &__bar {
-    position: absolute;
-    right: 2px;
-    bottom: 2px;
-    z-index: 1;
-    border-radius: 4px;
-    opacity: 0;
-    transition: opacity 120ms ease-out;
-
-    &.is-vertical {
-      width: 6px;
-      top: 2px;
-
-      > div {
-        width: 100%;
-      }
-    }
-
-    &.is-horizontal {
-      height: 6px;
-      left: 2px;
-
-      > div {
-        height: 100%;
-      }
-    }
-  }
-}

package/src/components/scrollbar/types.ts

@@ -1,32 +0,0 @@
-export type BarProperties = {
-  offset: string;
-  scroll: string;
-  scrollSize: string;
-  size: string;
-  key: string;
-  axis: string;
-  client: string;
-  direction: string;
-};
-
-export type ThumbDragEvent = {
-  scrollReference: string;
-  positionPercentage: number;
-  scrollSize: number;
-};
-
-export const egdes = ["top", "bottom", "left", "right"] as const;
-export type ScrollEdge = (typeof egdes)[number];
-
-export type ScrollIntersectionEvent = {
-  edge: ScrollEdge;
-  hit: boolean;
-};
-
-export const directions = ["up", "down", "left", "right"] as const;
-export type ScrollDirection = (typeof directions)[number];
-
-export type ScrollTrigger = {
-  px: number;
-  callback: (trigger: ScrollTrigger, direction: ScrollDirection) => void;
-};

package/src/components/side-over/SideOver.vue

@@ -1,87 +0,0 @@
-<script setup lang="ts">
-import type { Slots } from "vue";
-import type { TOverlayType } from "../types";
-import { onMounted, ref, useSlots } from "vue";
-import { BButton, BScreenOverlay, BVerticalLayout } from "../";
-import { useEscapeKey, useTrapFocus } from "../../";
-
-const props = withDefaults(
-  defineProps<{
-    closeable?: boolean;
-    overlayType?: TOverlayType;
-    noScrollbar?: boolean;
-    target?: string;
-    title?: string;
-  }>(),
-  {
-    closeable: true,
-    overlayType: "default",
-    noScrollbar: false,
-    target: "#modals",
-  },
-);
-const emit = defineEmits(["close"]);
-const slots: Slots = useSlots();
-const show = ref(false);
-const panelRef = ref<HTMLDivElement>();
-const { trapFocus } = useTrapFocus(panelRef);
-
-// when component is mounted start the transition
-onMounted(() => (show.value = true));
-
-const close = () => (show.value = false);
-const onClose = () => props.closeable && close();
-props.closeable && useEscapeKey(onClose);
-
-// afterTransition -> start trapFocus
-const onTransitionAfterEnter = () => {
-  // focus the dialog after transition
-  panelRef.value?.focus();
-  // trap focus inside the dialog (without focusing the first focusable element)
-  trapFocus();
-};
-
-defineExpose({ close });
-</script>
-
-<template>
-  <Teleport to="#modals">
-    <BScreenOverlay :show="show" :type="overlayType" class="p-4" @click="onClose" @close="emit('close')">
-      <transition
-        enter-active-class="transform transition ease-in-out duration-500"
-        enter-from-class="translate-x-full"
-        enter-to-class=""
-        leave-active-class="transform transition ease-in-out duration-300"
-        leave-class="translate-x-0"
-        leave-to-class="translate-x-full"
-        @after-enter="onTransitionAfterEnter"
-      >
-        <div
-          v-show="show"
-          ref="panelRef"
-          tabindex="0"
-          class="ml-auto flex flex-col bg-primary shadow-sm-xl rounded-xl overflow-hidden max-w-lg w-full h-full focus:outline-hidden"
-          :class="{ 'px-6 py-4': !slots.default }"
-          style="pointer-events: auto"
-        >
-          <slot v-if="$slots.default" />
-          <BVerticalLayout v-else>
-            <template v-if="props.title || $slots.header" #header>
-              <header v-if="props.title" class="flex items-center justify-between w-full h-12">
-                <h4>{{ props.title }}</h4>
-                <BButton v-if="props.closeable" small icon="close" variant="textSubtle" @click="onClose" />
-              </header>
-              <slot v-else name="header" />
-            </template>
-            <template #main>
-              <slot name="main" />
-            </template>
-            <template #footer>
-              <slot name="footer" />
-            </template>
-          </BVerticalLayout>
-        </div>
-      </transition>
-    </BScreenOverlay>
-  </Teleport>
-</template>

package/src/components/side-over/index.ts

@@ -1 +0,0 @@
-export { default as BSideOver } from "./SideOver.vue";

package/src/components/status-select/StatusIndicator.vue

@@ -1,78 +0,0 @@
-<!-- eslint-disable vue/no-deprecated-slot-attribute -->
-<script setup lang="ts">
-import type { TStatusSelectStatus } from "../types";
-import { computed } from "vue";
-import { BIcon, BLoadSpinner } from "../";
-
-const props = withDefaults(
-  defineProps<{
-    button?: boolean;
-    loading?: boolean;
-    softFocus?: boolean;
-    status?: TStatusSelectStatus | null;
-  }>(),
-  {
-    button: true,
-    loading: false,
-    softFocus: false,
-    status: null,
-  },
-);
-
-// should be a 'disabled' prop instead of 'button'
-const tag = computed(() => (props.button ? "button" : "div"));
-
-const classes = computed(() => {
-  const result = [];
-
-  const loadingClasses = "border-default bg-granite-grey-15";
-
-  switch (props.status) {
-    case null:
-      if (props.loading) {
-        result.push(loadingClasses);
-      }
-      else if (props.button) {
-        result.push("border-default");
-        props.softFocus ? result.push("bg-sand-grey-15") : result.push("bg-white");
-      }
-
-      break;
-    case "Ok":
-      props.loading ? result.push(loadingClasses) : result.push("border-forest-green-darker bg-forest-green");
-      break;
-    case "Not Ok":
-      props.loading ? result.push(loadingClasses) : result.push("border-lava-red-darker bg-lava-red");
-      break;
-    case "Not Applicable":
-      props.loading ? result.push(loadingClasses) : result.push("border-granite-grey-darker bg-granite-grey");
-      break;
-    default:
-  }
-
-  if (props.button) result.push("focus:outline-hidden focus-visible:ring-3 active:scale-[0.98]");
-
-  return result;
-});
-
-const icon = computed(() => {
-  switch (props.status) {
-    case null:
-      return null;
-    case "Ok":
-      return "check";
-    case "Not Ok":
-      return "close";
-    case "Not Applicable":
-      return "dash";
-  }
-  return null;
-});
-</script>
-
-<template>
-  <component :is="tag" class="inline-flex items-center justify-center w-6 h-6 rounded-full border" :class="classes">
-    <BLoadSpinner v-if="loading" class="w-4 h-4 text-white" />
-    <BIcon v-else-if="icon" :name="icon" class="text-white" />
-  </component>
-</template>

package/src/components/status-select/StatusSelect.vue

@@ -1,62 +0,0 @@
-<script setup lang="ts">
-// import { ref } from "vue";
-// import StatusIndicator from "./StatusIndicator.vue";
-// import { BPopper, BPopperContent, BPopperOption } from "@firstnoodle-ui/bui";
-// import { useNextFrame } from "@/bui/composables";
-// import { TStatusSelectStatus } from "../types.ts";
-
-// const emit = defineEmits<{ change: [TStatusSelectStatus | null] }>();
-
-// withDefaults(
-//   defineProps<{
-//     clearable?: boolean;
-//     disabled?: boolean;
-//     loading?: boolean;
-//     status: TStatusSelectStatus | null;
-//   }>(),
-//   {
-//     clearable: false,
-//     disabled: false,
-//     loading: false,
-//     status: null
-//   }
-// );
-
-// const { nextFrame } = useNextFrame();
-
-// const popoverRef = ref<typeof BPopper>();
-// const contentRef = ref<typeof BPopperContent>();
-
-// const onShow = () => {
-//   nextFrame(() => contentRef.value!.focus());
-// };
-
-// const onStatusChange = (status: TStatusSelectStatus | null) => {
-//   emit("change", status);
-//   popoverRef.value && popoverRef.value.close();
-// };
-</script>
-
-<template>
-  TODO
-  <!-- <status-indicator v-if="disabled" :status="status" />
-  <b-popper v-else ref="popoverRef" trigger="click" trigger-class="flex" placement="bottom" :disabled="loading" :offset-main="4" @show="onShow">
-    <template #default="slotProps">
-      <status-indicator button :soft-focus="slotProps && slotProps.visible" :status="status" :loading="loading" />
-    </template>
-    <template #content>
-      <b-popper-content ref="contentRef">
-        <b-popper-option @click="onStatusChange('Ok')">
-          <status-indicator :button="false" status="Ok" />
-        </b-popper-option>
-        <b-popper-option @click="onStatusChange('Not Ok')">
-          <status-indicator :button="false" status="Not Ok" />
-        </b-popper-option>
-        <b-popper-option @click="onStatusChange('Not Applicable')">
-          <status-indicator :button="false" status="Not Applicable" />
-        </b-popper-option>
-        <b-popper-option v-if="clearable" icon="trash" @click="onStatusChange(null)" class="justify-center py-3" />
-      </b-popper-content>
-    </template>
-  </b-popper> -->
-</template>

package/src/components/status-select/index.ts

@@ -1 +0,0 @@
-export { default as BStatusSelect } from "./StatusSelect.vue";

package/src/components/switch/Switch.vue

@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue";
-
-const props = withDefaults(
-  defineProps<{
-    value?: boolean;
-    offColorClass?: string;
-    onColorClass?: string;
-    small?: boolean;
-  }>(),
-  {
-    value: false,
-    offColorClass: "bg-secondary",
-    onColorClass: "bg-tertiary",
-    small: false,
-  },
-);
-
-const emit = defineEmits<{
-  (e: "toggle", event: Event): void;
-}>();
-
-const knobClass = computed(() => {
-  return [props.small ? "h-3 w-3" : "h-5 w-5", props.value ? (props.small ? "translate-x-3" : "translate-x-5") : "translate-x-0"];
-});
-
-const backgroundClass = computed(() => {
-  return [props.small ? "h-4" : "h-6", props.value ? props.onColorClass : props.offColorClass];
-});
-
-const backgroundStyle = computed(() => {
-  return {
-    width: props.small ? "1.75rem" : "2.75rem",
-  };
-});
-</script>
-
-<template>
-  <button
-    role="checkbox"
-    tabindex="0"
-    aria-checked="false"
-    :class="backgroundClass"
-    class="group relative inline-flex flex-shrink-0 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-hidden focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-black dark:focus-visible:outline-white"
-    :style="backgroundStyle"
-    @click.stop.prevent="emit('toggle', $event)"
-    @keydown.space.prevent="emit('toggle', $event)"
-    @keydown.enter.prevent="emit('toggle', $event)"
-  >
-    <span aria-hidden="true" :class="knobClass" class="inline-block rounded-full bg-primary shadow-sm transform transition ease-in-out duration-200" />
-  </button>
-</template>

package/src/components/switch/index.ts

@@ -1 +0,0 @@
-export { default as BSwitch } from "./Switch.vue";

package/src/components/tab/Tab.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import type { TIcon } from "../types";
-import { ref } from "vue";
-import { BIcon } from "../../";
-
-const props = withDefaults(
-  defineProps<{
-    icon?: TIcon;
-    grow?: boolean;
-    name: string;
-    notification?: boolean;
-    selected: boolean;
-    type?: "default" | "pill";
-    disabled?: boolean;
-  }>(),
-  {
-    grow: false,
-    notification: false,
-    type: "default",
-  },
-);
-
-const emit = defineEmits(["select"]);
-
-const tabRef = ref<HTMLButtonElement>();
-
-const onSelect = () => {
-  tabRef.value!.blur();
-  emit("select", props.name);
-};
-</script>
-
-<template>
-  <button
-    ref="tabRef"
-    :disabled="disabled"
-    class=""
-    :class="{
-      'relative flex items-center justify-center space-x-1 px-3 h-8 border-b focus:outline-hidden focus:border-action': type === 'default',
-      'border-action text-action': selected && type === 'default',
-      'border-subtle text-tertiary hover:text-secondary': !selected && type === 'default',
-      'relative flex items-center justify-center  px-3 h-8 border border-transparent rounded-lg focus:outline-hidden': type === 'pill',
-      'bg-actionLightActive text-action': selected && type === 'pill',
-      'text-primary bg-sand-grey-40 hover:text-secondary hover:bg-actionLightHover focus:bg-actionLightActive focus:text-action':
-        !disabled && !selected && type === 'pill',
-      'text-disabled': disabled,
-      'flex-grow': grow,
-    }"
-    @click.stop.prevent="onSelect"
-  >
-    <BIcon v-if="icon" :name="icon" />
-    <span class="relative text-sm">
-      {{ name }}
-      <div v-if="notification" class="absolute" style="top: 0.124em; right: -0.65em">
-        <div class="w-3 h-3 bg-orange-500 rounded-full border border-white" />
-      </div>
-    </span>
-  </button>
-</template>

package/src/components/tab/index.ts

@@ -1 +0,0 @@
-export { default as BTab } from "./Tab.vue";

package/src/components/tag/Tag.vue

@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import type { TIcon } from "../types";
-import { BButton, BFlexbox, BIcon } from "../";
-
-withDefaults(
-  defineProps<{
-    label: string;
-    icon?: TIcon;
-    deletable?: boolean;
-  }>(),
-  {
-    deletable: false,
-  },
-);
-
-const emit = defineEmits(["delete"]);
-</script>
-
-<template>
-  <BFlexbox
-    inline
-    align="center"
-    class="h-8 leading-tight truncate text-sm border rounded-lg border-sand-grey-15 text-secondary bg-sand-grey-40"
-    :class="{
-      'px-2': !deletable,
-      'pl-2 pr-1': deletable,
-    }"
-  >
-    <BIcon v-if="icon" :name="icon" class="mr-1" />
-    <slot v-if="$slots.default" />
-    <span v-else class="truncate">{{ label }}</span>
-    <BButton v-if="deletable" small icon="close" class="ml-1" stop-propagation @click="emit('delete')" />
-  </BFlexbox>
-</template>

package/src/components/tag/index.ts

@@ -1 +0,0 @@
-export { default as BTag } from "./Tag.vue";