paket-ui 0.0.1

package/dist/runtime/components/collapsible/CollapsibleBase.vue.d.ts

@@ -0,0 +1,22 @@
+import { type HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    triggerClass?: HTMLAttributes['class'];
+    openOnMount?: boolean;
+};
+declare var __VLS_10: {
+    isOpen: boolean;
+}, __VLS_16: {};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_10) => any;
+} & {
+    default?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/combobox/Combobox.vue

@@ -0,0 +1,171 @@
+<script setup>
+import { useElementVisibility, useVModel } from "@vueuse/core";
+import {
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxRoot,
+  ComboboxTrigger,
+  ComboboxViewport
+} from "reka-ui";
+import { BASE_CLASS, BASE_INVALID_CLASS } from "../input";
+const props = defineProps({
+  placeholder: { type: String, required: false, default: "Cari di sini..." },
+  icon: { type: String, required: false, default: "material-symbols:keyboard-arrow-down" },
+  modelValue: { type: [String, Number, Object, null], required: false, default: void 0 },
+  nullable: { type: Boolean, required: false },
+  loadingIcon: { type: String, required: false, default: "svg-spinners:90-ring-with-bg" },
+  valueKey: { type: null, required: false, default: () => "id" },
+  title: { type: String, required: false, default: void 0 },
+  invalid: { type: Boolean, required: false },
+  class: { type: null, required: false, default: void 0 },
+  labelKey: { type: null, required: false, default: () => "name" },
+  options: { type: Array, required: false, default: void 0 },
+  search: { type: Function, required: false, default: void 0 },
+  isLoading: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue", "update:isLoading"]);
+const list = ref(props.options ?? []);
+const content = useVModel(props, "modelValue", emit);
+const query = ref(props.title ?? "");
+const nextPage = ref();
+const loadingNextPage = ref(false);
+const loading = useVModel(props, "isLoading", emit, {
+  defaultValue: false,
+  passive: true
+});
+const debounce = ref(null);
+const onSearch = async (searchQuery, isNextPage = false) => {
+  if (!props.search) return;
+  if (!isNextPage) list.value = [];
+  if (isNextPage) loadingNextPage.value = true;
+  else loading.value = true;
+  if (debounce.value) {
+    clearTimeout(debounce.value);
+  }
+  debounce.value = setTimeout(async () => {
+    if (!props.search) return;
+    try {
+      const fetchList = await props.search(searchQuery, nextPage.value);
+      nextPage.value = fetchList?.meta?.nextPage || void 0;
+      list.value = isNextPage ? [...list.value, ...fetchList?.data ?? []] : fetchList?.data ?? [];
+    } catch (error) {
+      console.error("Search error:", error);
+      nextPage.value = void 0;
+      list.value = [];
+    } finally {
+      if (isNextPage) loadingNextPage.value = false;
+      else loading.value = false;
+    }
+  }, 500);
+};
+const displayValue = (value) => {
+  const selected = list.value.find((item) => item[props.valueKey] === value);
+  return selected ? selected[props.labelKey]?.toString() ?? props.title ?? "" : props.title ?? "";
+};
+watch(
+  () => props.options,
+  (newOptions) => {
+    if (props.search) return onSearch(query.value);
+    list.value = newOptions ?? [];
+  },
+  { immediate: !!props.search }
+);
+const bottomOfListRef = useTemplateRef("bottomOfListRef");
+const bottomOfListVisible = useElementVisibility(bottomOfListRef);
+watch(
+  bottomOfListVisible,
+  (visible) => {
+    if (visible) onSearch(query.value, true);
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <ComboboxRoot
+    v-model="content"
+    :ignore-filter="!!props.search"
+    class="relative"
+  >
+    <ComboboxAnchor
+      class="w-full inline-flex items-center justify-between text-sm relative"
+    >
+      <UiComboboxInput
+        v-model="query"
+        :display-value="displayValue"
+        :class="
+  cn(BASE_CLASS, props.invalid ? BASE_INVALID_CLASS : '', props.class)
+"
+        :placeholder="props.placeholder"
+        @input="onSearch(query)"
+      />
+      <ComboboxTrigger
+        class="absolute text-flux-primary right-2 top-1/2 -translate-y-1/2"
+      >
+        <Icon :name="loading ? loadingIcon : props.icon" size="24px" />
+      </ComboboxTrigger>
+    </ComboboxAnchor>
+
+    <ComboboxContent
+      class="absolute z-30 w-full max-h-60 transition-all shadow overflow-auto mt-1 bg-background rounded-lg border border-outline-variant"
+    >
+      <ComboboxViewport class="p-1 space-y-1">
+        <ComboboxEmpty
+          class="text-sm font-medium flex gap-3 p-0.5 items-center"
+          :class="{
+  'text-flux-primary animate-pulse': loading,
+  'text-flux-error': !loading,
+  'text-flux-info': query == ''
+}"
+        >
+          <Icon
+            size="20px"
+            :name="
+  loading ? loadingIcon : query === '' ? 'material-symbols:info' : 'material-symbols:close'
+"
+          />
+          {{
+            loading ? "Mencari data..." : query === "" ? "Min. 3 karakter untuk melakukan pencarian" : "Tidak ada hasil ditemukan"
+          }}
+        </ComboboxEmpty>
+
+        <ComboboxItem
+          v-for="(option, index) in props.nullable ? [
+  {
+    [props.valueKey]: null,
+    [props.labelKey]: 'Semua Pilihan'
+  },
+  ...list
+] : list"
+          :key="`option-${index}`"
+          :value="option[props.valueKey] || '-'"
+          class="rounded data-[highlighted]:bg-primary-container data-[state='checked']:bg-primary-container data-[state='checked']:text-flux-primary flex items-center py-2 text-sm hover:bg-surface-container-low pl-8 cursor-pointer pr-2.5 relative select-none"
+        >
+          <ComboboxItemIndicator class="absolute left-1.5">
+            <Icon name="material-symbols:check" size="20px" />
+          </ComboboxItemIndicator>
+          <slot :item="option">
+            <span>
+              {{ option[props.labelKey] }}
+            </span>
+          </slot>
+        </ComboboxItem>
+
+        <div
+          v-if="nextPage && !loading"
+          ref="bottomOfListRef"
+          class="w-full h-2"
+        ></div>
+        <div
+          v-if="loadingNextPage"
+          class="flex justify-center items-center text-outline pb-2"
+        >
+          <Icon name="svg-spinners:90-ring-with-bg" size="24px" />
+        </div>
+      </ComboboxViewport>
+    </ComboboxContent>
+  </ComboboxRoot>
+</template>

package/dist/runtime/components/combobox/Combobox.vue.d.ts

@@ -0,0 +1,44 @@
+import { type AcceptableValue } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+declare const _default: <T extends Record<string, AcceptableValue | boolean | undefined>, U extends keyof T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+        readonly "onUpdate:isLoading"?: ((value?: boolean | undefined) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onUpdate:isLoading"> & {
+        placeholder?: string;
+        icon?: string;
+        modelValue?: AcceptableValue;
+        nullable?: boolean;
+        loadingIcon?: string;
+        valueKey?: U;
+        title?: string;
+        invalid?: boolean;
+        class?: HTMLAttributes["class"];
+        labelKey?: U;
+        options?: T[];
+        search?: (query: string, nextPage?: number) => Promise<{
+            data: T[] | undefined;
+            meta?: {
+                nextPage?: number;
+            };
+        }>;
+        isLoading?: boolean;
+    } & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        default?: (props: {
+            item: any;
+        }) => any;
+    };
+    emit: {
+        (e: "update:modelValue", value: number): void;
+        (e: "update:isLoading", value?: boolean): void;
+    };
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/combobox/ComboboxInput.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { ComboboxInput, injectComboboxRootContext } from "reka-ui";
+const ctx = injectComboboxRootContext();
+const handleFocus = () => {
+  if (!ctx.open.value) {
+    ctx.onOpenChange(true);
+  }
+};
+</script>
+
+<template>
+  <ComboboxInput ref="input" @click="handleFocus" />
+</template>

package/dist/runtime/components/combobox/ComboboxInput.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/combobox/_index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/runtime/components/container/ContainerWrapper.vue

@@ -0,0 +1,11 @@
+<script setup>
+const props = defineProps({
+  class: { type: null, required: false }
+});
+</script>
+
+<template>
+  <UiCardBaseCard :class="props.class">
+    <slot />
+  </UiCardBaseCard>
+</template>

package/dist/runtime/components/container/ContainerWrapper.vue.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/container/FloatActionWrapper.vue

@@ -0,0 +1,29 @@
+<template>
+  <Transition
+    enter-active-class="transition duration-100 ease-out"
+    enter-from-class="transform scale-95 opacity-0"
+    enter-to-class="transform scale-100 opacity-100"
+    leave-active-class="transition duration-75 ease-in"
+    leave-from-class="transform scale-100 opacity-100"
+    leave-to-class="transform scale-95 opacity-0"
+  >
+    <div
+      v-if="show"
+      :class="
+  cn([
+    'fixed bottom-5 left-1/2 -translate-x-1/2 transition-all z-30 rounded-xl p-3 bg-background dark:bg-surface-container-high border border-outline-variant shadow-lg',
+    props.class
+  ])
+"
+    >
+      <slot />
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+const props = defineProps({
+  class: { type: null, required: false, default: void 0 },
+  show: { type: Boolean, required: false, default: false }
+});
+</script>

package/dist/runtime/components/container/FloatActionWrapper.vue.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    show?: boolean;
+};
+declare var __VLS_5: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    class: HTMLAttributes["class"];
+    show: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/context-menu/ContextMenuBase.vue

@@ -0,0 +1,37 @@
+<script setup>
+import {
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuPortal,
+  ContextMenuRoot,
+  ContextMenuTrigger
+} from "reka-ui";
+defineProps({
+  disabled: { type: Boolean, required: false },
+  actions: { type: Array, required: true }
+});
+</script>
+
+<template>
+  <ContextMenuRoot>
+    <ContextMenuTrigger :disabled="disabled" as-child>
+      <slot />
+    </ContextMenuTrigger>
+    <ContextMenuPortal>
+      <ContextMenuContent
+        class="min-w-40 z-30 bg-background dark:bg-surface-container dark:border dark:border-outline-variant outline-none rounded-lg p-1.5 shadow-xl"
+      >
+        <ContextMenuItem
+          v-for="(action, index) in actions"
+          :key="index"
+          :value="action.value"
+          class="text-xs rounded-md flex items-center gap-2 p-2 relative select-none outline-none data-[disabled]:text-outline-variant data-[disabled]:pointer-events-none data-[highlighted]:bg-surface-container-low"
+          @click="action.onClick"
+        >
+          <Icon v-if="action.icon" :name="action.icon" size="16px" />
+          <span>{{ action.label }}</span>
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenuPortal>
+  </ContextMenuRoot>
+</template>

package/dist/runtime/components/context-menu/ContextMenuBase.vue.d.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    disabled?: boolean;
+    actions: {
+        value: string;
+        label: string;
+        icon?: string;
+        onClick: () => void;
+    }[];
+};
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/cropper/CropperImage.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { Cropper } from "vue-advanced-cropper";
+import "vue-advanced-cropper/dist/style.css";
+const props = defineProps({
+  show: { type: Boolean, required: true },
+  url: { type: String, required: true },
+  title: { type: String, required: false, default: "Sesuaikan Rasio Gambar" },
+  aspectRatio: { type: Number, required: false, default: 5 / 3 }
+});
+const emits = defineEmits(["close", "onChange"]);
+const cropper = useTemplateRef("cropper");
+const onSave = () => {
+  const canvas = cropper.value?.getCanvas();
+  if (canvas) {
+    canvas.toBlob((blob) => {
+      nextTick(async () => {
+        const file = new File([blob], "image");
+        emits("onChange", file);
+        emits("close");
+      });
+    }, "image/jpeg");
+  }
+};
+</script>
+
+<template>
+  <DialogGeneral :title="title" :show="show" @close="emits('close')">
+    <div class="pb-4 px-4 flex flex-col gap-3">
+      <div
+        class="rounded-xl overflow-hidden h-96 bg-surfaceContainerLow box-center"
+      >
+        <Cropper
+          ref="cropper"
+          class="transform transition duration-300"
+          :src="url"
+          :auto-zoom="true"
+          :min-height="192"
+          :min-width="320"
+          :stencil-props="{
+  aspectRatio: props.aspectRatio,
+  resizable: true
+}"
+        />
+      </div>
+
+      <div class="flex flex-col md:flex-row box-between gap-3">
+        <div class="flex flex-row gap-3">
+          <UiButtonIconButton
+            class="p-2 rounded-lg"
+            variant="outline"
+            icon-size="lg"
+            icon-name="material-symbols:rotate-left"
+            @click="cropper?.rotate(-90)"
+          />
+          <UiButtonIconButton
+            class="p-2 rounded-lg"
+            variant="outline"
+            icon-size="lg"
+            icon-name="material-symbols:rotate-right"
+            @click="cropper?.rotate(90)"
+          />
+          <UiButtonIconButton
+            class="p-2 rounded-lg"
+            variant="outline"
+            icon-size="lg"
+            icon-name="material-symbols:zoom-out"
+            @click="cropper?.zoom(0.7)"
+          />
+          <UiButtonIconButton
+            class="p-2 rounded-lg"
+            variant="outline"
+            icon-size="lg"
+            icon-name="material-symbols:zoom-in"
+            @click="cropper?.zoom(1.3)"
+          />
+        </div>
+
+        <UiButtonBaseButton label="Simpan Gambar" @click="onSave" />
+      </div>
+    </div>
+  </DialogGeneral>
+</template>

package/dist/runtime/components/cropper/CropperImage.vue.d.ts

@@ -0,0 +1,18 @@
+import 'vue-advanced-cropper/dist/style.css';
+type __VLS_Props = {
+    show: boolean;
+    url: string;
+    title?: string;
+    aspectRatio?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    onChange: (payload: File) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onOnChange?: ((payload: File) => any) | undefined;
+}>, {
+    title: string;
+    aspectRatio: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/datepicker/DatepickerBase.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { useVModel } from "@vueuse/core";
+const props = defineProps({
+  class: { type: null, required: false, default: void 0 },
+  invalid: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  placeholder: { type: String, required: false, default: "Pilih tanggal" },
+  defaultValue: { type: Date, required: false, default: void 0 },
+  modelValue: { type: Date, required: false, default: void 0 },
+  yearRange: { type: Array, required: false, default: () => [2020, (/* @__PURE__ */ new Date()).getFullYear()] },
+  maxDate: { type: Date, required: false, default: () => /* @__PURE__ */ new Date() },
+  minDate: { type: Date, required: false, default: void 0 }
+});
+const emits = defineEmits(["update:modelValue"]);
+const modelValue = useVModel(props, "modelValue", emits, {
+  passive: true,
+  defaultValue: props.defaultValue
+});
+const renderedRange = computed(() => {
+  if (!modelValue.value) return void 0;
+  return formatDateLongMonth(modelValue.value.toString());
+});
+const showPicker = ref(false);
+</script>
+
+<template>
+  <UiDropdown
+    v-model="showPicker"
+    :class="
+  cn(
+    'rounded-lg min-w-64 relative transition-all font-normal inline-flex justify-between bg-background dark:bg-surface-container-high gap-3 text-sm py-2 px-2.5 items-center border border-outline-variant outline-none focus:ring-1 focus:border-flux-primary focus:ring-flux-primary',
+    props.class
+  )
+"
+  >
+    <span
+      :class="{
+  'text-flux-outline': !renderedRange
+}"
+      >{{ renderedRange ?? placeholder }}</span
+    >
+    <Icon
+      name="material-symbols:calendar-month-outline-rounded"
+      size="24px"
+      class="text-flux-primary absolute right-2 top-1/2 -translate-y-1/2"
+    />
+    <template #content>
+      <UiDatepickerBody
+        v-model:date="modelValue"
+        :min-date="props.minDate"
+        :max-date="props.maxDate"
+      />
+    </template>
+  </UiDropdown>
+</template>

package/dist/runtime/components/datepicker/DatepickerBase.vue.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    invalid?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    defaultValue?: Date;
+    modelValue?: Date;
+    yearRange?: [number, number];
+    maxDate?: Date;
+    minDate?: Date;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (payload?: Date | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((payload?: Date | undefined) => any) | undefined;
+}>, {
+    class: HTMLAttributes["class"];
+    modelValue: Date;
+    placeholder: string;
+    defaultValue: Date;
+    yearRange: [number, number];
+    maxDate: Date;
+    minDate: Date;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;