@firstnoodle-ui/bui 0.0.27 → 0.0.28

package/src/components/select-list/components/status-cards/loading-card/LoadingCard.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { BLoadSpinner } from "../../../..";
+import { StatusCard } from "../status-card";
+</script>
+
+<template>
+  <StatusCard status="Loading" variant="loading">
+    <BLoadSpinner />
+  </StatusCard>
+</template>

package/src/components/select-list/components/status-cards/loading-card/index.ts

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

package/src/components/select-list/components/status-cards/no-match-card/NoMatchCard.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { StatusCard } from "../status-card";
+</script>
+
+<template>
+  <StatusCard status="No matches" variant="no match">
+    <svg width="26" height="44" viewBox="0 0 26 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M3.15001 30.8249C1.30001 28.9749 2.00001 25.2749 2.00001 25.2749C2.00001 25.2749 5.70001 24.5749 7.55001 26.4249C9.40001 28.2749 8.70001 31.9749 8.70001 31.9749C8.70001 31.9749 5.00001 32.6749 3.15001 30.8249Z" stroke="#ADA7A1" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" />
+      <path d="M18.1501 18.175V17.3749H19.0001C21.8501 17.3749 24.1501 15.0749 24.1501 12.225C24.1501 9.37495 21.8501 7.02495 19.0001 7.02495H18.2001V6.22495C18.2001 3.37495 15.9001 1.07495 13.0501 1.07495C10.2001 1.07495 7.9001 3.37495 7.9001 6.22495V7.02495H7.0001C4.1501 7.02495 1.8501 9.32495 1.8501 12.175C1.8501 15.025 4.1501 17.3749 7.0001 17.3749H7.8001V18.175C7.8001 21.025 10.1001 23.3249 12.9501 23.3249C15.8501 23.3249 18.1501 21.025 18.1501 18.175Z" stroke="#ADA7A1" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" />
+      <path d="M13 15.9749C15.0986 15.9749 16.7999 14.2736 16.7999 12.1749C16.7999 10.0762 15.0986 8.37488 13 8.37488C10.9013 8.37488 9.19995 10.0762 9.19995 12.1749C9.19995 14.2736 10.9013 15.9749 13 15.9749Z" stroke="#ADA7A1" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" />
+      <path d="M13 23.325V42.9249" stroke="#ADA7A1" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" />
+      <path d="M8.69995 31.975L12.9999 35.725" stroke="#ADA7A1" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" />
+    </svg>
+  </StatusCard>
+</template>

package/src/components/select-list/components/status-cards/no-match-card/index.ts

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

package/src/components/select-list/components/status-cards/status-card/StatusCard.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { SelectListState } from "../../../types";
+
+defineProps<{ status: string; variant: SelectListState }>();
+</script>
+
+<template>
+  <div class="flex-1 h-full flex flex-col items-center justify-center gap-2">
+    <div class="flex flex-col items-center justify-center">
+      <div class="flex items-center justify-center w-12 h-12">
+        <slot />
+      </div>
+    </div>
+    <span
+      class="text-ui-label-14-medium"
+      :class="{
+        'text-disabled-font': variant === 'idle' || variant === 'no match',
+        'text-alert': variant === 'error',
+        'text-primary': variant === 'loading',
+      }"
+    >
+      {{ status }}
+    </span>
+  </div>
+</template>

package/src/components/select-list/components/status-cards/status-card/index.ts

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

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

@@ -0,0 +1,5 @@
+export { BSelectListOptionGroup } from "./components/option-group";
+export { BSelectListOption } from "./components/select-list-option";
+export { default as BSelectList } from "./SelectList.vue";
+
+export * from "./types";

package/src/components/select-list/types.ts

@@ -0,0 +1,49 @@
+import type { TIcon } from "../types";
+
+export const states = ["error", "idle", "loading", "match", "no match"] as const;
+export type SelectListState = typeof states[number];
+
+export const selectOptionVariants = ["checkbox", "deletable", "single"] as const;
+export type SelectOptionVariant = typeof selectOptionVariants[number];
+
+export type SelectListOption = {
+  id?: string | number;
+  icon?: TIcon;
+  label: string;
+  disabled?: boolean;
+  suffix?: string | number;
+  group?: string;
+  value?: any;
+  handler?: (option: SelectListOption) => void;
+};
+
+export type SelectListOptionGroup = {
+  id: string | number;
+  name?: string;
+  options: SelectListOption[];
+};
+
+export type SelectListFilter = {
+  id?: string | number;
+  name: string;
+  disabled: boolean;
+  execute: (record: SelectListOption) => boolean;
+  count?: number;
+};
+
+export type SelectListProps = {
+  identifier?: keyof SelectListOption;
+  errorMessage?: string;
+  filters?: SelectListFilter[];
+  loading?: boolean;
+  options: SelectListOption[] | SelectListOptionGroup[];
+  placeholder?: string;
+  rootClass?: string;
+  sameWidthAsTrigger?: boolean;
+  searchDebounce?: number;
+  searchFunction?: (query: string) => SelectListOption[] | null;
+  selectAll?: boolean;
+  selected: SelectListOption | null | SelectListOption[];
+  showSelection?: boolean;
+  small?: boolean;
+};

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-tertiary",
+    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,65 @@
+<script setup lang="ts">
+import type { TIcon } from "../types";
+import { ref } from "vue";
+import { BIcon, BNotificationBadge } from "../../";
+
+const props = withDefaults(
+  defineProps<{
+    icon?: TIcon;
+    grow?: boolean;
+    name: string;
+    notification?: boolean;
+    selected: boolean;
+    type?: "default" | "pill";
+    size?: "small" | "default";
+    disabled?: boolean;
+  }>(),
+  {
+    grow: false,
+    notification: false,
+    size: "default",
+    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="cursor-pointer"
+    :class="{
+      'text-sm gap-2 px-4 h-8': size === 'default' && type === 'default',
+      'text-xs gap-1 px-3 h-6': size === 'small' && type === 'default',
+      'relative flex items-center justify-center border-b focus:outline-hidden focus-visible:outline': type === 'default',
+      'border-action text-action': selected && type === 'default',
+      'border-default text-tertiary hover:text-secondary active:text-action hover:border-strong': !selected && type === 'default',
+      'text-sm px-3 h-8 rounded-lg': size === 'default' && type === 'pill',
+      'text-xs px-2 h-6 rounded': size === 'small' && type === 'pill',
+      'relative flex items-center justify-center gap-1 border border-transparent focus:outline-hidden': type === 'pill',
+      'bg-tertiary text-primary hover:bg-tertiary hover:text-primary': selected && type === 'pill',
+      'text-tertiary hover:bg-secondary active:bg-tertiary active:text-primary':
+        !disabled && !selected && type === 'pill',
+      'text-muted': disabled,
+      'flex-grow': grow,
+    }"
+    @click.stop.prevent="onSelect"
+  >
+    <BIcon v-if="icon && size === 'default'" :name="icon" />
+    <span class="relative">
+      {{ name }}
+      <div v-if="notification" class="absolute" style="top: 0em; right: -0.6em">
+        <BNotificationBadge />
+      </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
+    class="h-5 truncate text-xs rounded-sm text-tertiary bg-tertiary"
+    :class="{
+      'px-1': !deletable,
+      'pl-1 pr-0.5': deletable,
+    }"
+  >
+    <BFlexbox class="gap-1">
+      <BIcon v-if="icon" :name="icon" />
+      <span class="truncate">{{ label }}</span>
+    </BFlexbox>
+    <BButton v-if="deletable" small variant="textSubtle" icon="close" class="ml-0.5" stop-propagation @click="emit('delete')" />
+  </BFlexbox>
+</template>

package/src/components/tag/index.ts

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