@firstnoodle-ui/bui 0.0.13

package/src/components/scrollbar/enums.ts

@@ -0,0 +1,23 @@
+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

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

package/src/components/scrollbar/scrollbarWidth.ts

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,75 @@
+// 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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,87 @@
+<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

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

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

@@ -0,0 +1,78 @@
+<!-- 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

@@ -0,0 +1,62 @@
+<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

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

package/src/components/switch/Switch.vue

@@ -0,0 +1,52 @@
+<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

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

package/src/components/tab/Tab.vue

@@ -0,0 +1,59 @@
+<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

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

package/src/components/tag/Tag.vue

@@ -0,0 +1,34 @@
+<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

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