adata-ui 4.0.19 → 4.0.21

package/dist/module.json

@@ -5,7 +5,7 @@
     "nuxt": ">=3.16.0"
   },
   "failOnWarn": false,
-  "version": "4.0.19",
+  "version": "4.0.21",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "3.5.0"

package/dist/runtime/components/DigitBadge.vue

@@ -0,0 +1,57 @@
+<script setup>
+import { twMerge } from "tailwind-merge";
+defineOptions({ name: "ADigitBadge" });
+const props = defineProps({
+  type: { type: String, required: false, default: "primary" },
+  view: { type: String, required: false, default: "default" },
+  size: { type: String, required: false, default: "lg" },
+  value: { type: [String, Number], required: true },
+  disabled: { type: Boolean, required: false, default: false },
+  customClasses: { type: String, required: false, default: "" },
+  prefix: { type: String, required: false, default: "" }
+});
+const formattedValue = computed(() => {
+  return Number(props.value).toLocaleString("ru-RU");
+});
+const classes = computed(() => [
+  props.disabled ? "text-gray-500 bg-deepblue-900/5" : typeSwitchValues[props.view][props.type],
+  "inline-flex items-center justify-center font-medium rounded-full select-none inline-flex outline-none",
+  sizeSwitchValues[props.size],
+  props.value && props.value.toString().length > 2 ? "w-auto" : ""
+]);
+const typeSwitchValues = {
+  default: {
+    primary: "bg-blue-700 text-white dark:bg-blue-500 dark:text-gray-900",
+    success: "bg-green-500 text-white dark:bg-green-400 dark:text-gray-900",
+    danger: "bg-red-500 text-white dark:bg-red-400 dark:text-gray-900",
+    warning: "bg-yellow-400 text-white dark:text-gray-900",
+    gray: "bg-gray-50 text-gray-500  dark:text-gray-900",
+    orange: "bg-orange-600 text-white dark:bg-orange-500 dark:text-gray-900"
+  },
+  inverted: {
+    primary: "bg-white text-blue-700 dark:text-blue-500 dark:bg-gray-900",
+    success: "bg-white text-green-500 dark:text-green-400 dark:bg-gray-900",
+    danger: "bg-white text-red-500 dark:text-red-400 dark:bg-gray-900",
+    warning: "bg-white text-yellow-400 dark:bg-gray-900",
+    gray: "bg-white text-gray-500 dark:text-gray-200 dark:bg-gray-200/10",
+    orange: "bg-white text-deepblue-900 dark:text-orange-500 dark:bg-gray-900"
+  },
+  transparent: {
+    success: "bg-green-500/20 text-green-500",
+    danger: "bg-red-500/20 text-red-500 dark:text-red-400"
+  }
+};
+const sizeSwitchValues = {
+  sm: "w-4 h-4 px-1 text-[9.5px]",
+  md: "w-5 h-5 px-1 text-[10px]",
+  lg: "px-2 w-6 h-6 text-xs font-semibold"
+};
+</script>
+
+<template>
+  <div
+    :class="twMerge(...classes, customClasses)"
+  >
+    {{ prefix }}{{ formattedValue }}
+  </div>
+</template>

package/dist/runtime/components/DigitBadge.vue.d.ts

@@ -0,0 +1,21 @@
+interface Props {
+    type?: 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning';
+    view?: 'default' | 'inverted';
+    size?: 'sm' | 'md' | 'lg';
+    value: string | number;
+    disabled?: boolean;
+    customClasses?: string;
+    prefix?: string;
+}
+export type StateType = {
+    [key in 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning']?: string;
+};
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: "sm" | "md" | "lg";
+    type: "primary" | "success" | "danger" | "gray" | "orange" | "warning";
+    disabled: boolean;
+    view: "default" | "inverted";
+    customClasses: string;
+    prefix: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Header.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { useContacts } from "../composables/projectState";
 import TopHeader from "./header/TopHeader.vue";
 import HeaderLink from "./header/HeaderLink.vue";
 import ProfileMenu from "./header/ProfileMenu.vue";
@@ -26,7 +27,7 @@ const { t } = useI18n();
 const appConfig = useAppConfig();
 const mode = appConfig.adataUI.mode;
 const langIsOn = false;
-const contacts = ref([]);
+const contacts = ref(useContacts());
 const goAuth = () => {
   if (window) {
     emit("login");
@@ -43,7 +44,7 @@ const goToAnotherModule = () => {
 const fetchContacts = async () => {
   try {
     const response = await fetch(
-      `https://pk-api.${mode}.kz/api/v1/data/counterparty/contacts/sales-department`
+      `https://pk-api.adata.kz/api/v1/data/counterparty/contacts/sales-department`
     );
     const { data } = await response.json();
     contacts.value = data;

package/dist/runtime/components/accordion/Accordion.vue

@@ -0,0 +1,149 @@
+<script setup>
+import { twJoin, twMerge } from "tailwind-merge";
+import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger } from "reka-ui";
+import ui from "./ui.config";
+import { ref, onMounted, onBeforeUnmount, watch, computed, useAttrs } from "#imports";
+defineOptions({
+  inheritAttrs: false
+});
+const attrs = useAttrs();
+const props = defineProps({
+  label: { type: String, required: true },
+  content: { type: null, required: false },
+  defaultOpen: { type: Boolean, required: false, default: false },
+  disabled: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false, default: "md" },
+  color: { type: String, required: false, default: "gray" },
+  slot: { type: String, required: false, default: void 0 },
+  divider: { type: Boolean, required: false, default: false },
+  contentClass: { type: String, required: false },
+  bodyClass: { type: String, required: false },
+  activateOpenBg: { type: Boolean, required: false }
+});
+const emit = defineEmits(["toggle", "open", "close"]);
+const buttonClass = computed(() => twMerge(twJoin(ui.item.color[props.color], ui.ring, ui.item.button, ui.item.size[props.size])));
+const contClass = computed(() => twMerge(twJoin(ui.item.content, props.contentClass)));
+const bodyClassCompute = computed(() => twMerge(twJoin(ui.item.accordion, props.activateOpenBg ? isOpen.value && props.bodyClass : props.bodyClass)));
+const accordion = ref();
+const isOpen = ref();
+function updateState() {
+  if (accordion.value) {
+    const state = accordion.value?.$el.getAttribute("data-state");
+    isOpen.value = state === "open";
+  }
+}
+onMounted(() => {
+  if (accordion.value) {
+    updateState();
+    const observer = new MutationObserver(() => {
+      updateState();
+    });
+    observer.observe(accordion.value?.$el, {
+      attributes: true,
+      attributeFilter: ["data-state"]
+    });
+    onBeforeUnmount(() => {
+      observer.disconnect();
+    });
+  }
+});
+function emulateButtonClick() {
+  if (accordion.value) {
+    accordion.value?.$el.click();
+  }
+}
+const handelOpen = () => {
+  if (!isOpen.value) {
+    emulateButtonClick();
+  }
+};
+const handelClose = () => {
+  if (isOpen.value) {
+    emulateButtonClick();
+  }
+};
+watch(isOpen, () => {
+  emit("toggle", isOpen.value);
+  isOpen.value ? emit("open") : emit("close");
+});
+defineExpose({
+  ontoggle: emulateButtonClick,
+  handelOpen,
+  handelClose
+});
+</script>
+
+<template>
+  <accordion-root
+    type="single"
+    :disabled="disabled"
+    collapsible
+    :default-value="defaultOpen ? 'accordion' : ''"
+    v-bind="attrs"
+  >
+    <accordion-item
+      value="accordion"
+      :class="bodyClassCompute"
+    >
+      <accordion-header class="w-full">
+        <accordion-trigger
+          ref="accordion"
+          class="w-full"
+        >
+          <slot name="head">
+            <button :class="buttonClass">
+              <span :class="size === 'md' ? 'text-sm' : 'text-base'">{{ label }}</span>
+              <slot name="additional" />
+              <i-arrow-chevron-down
+                :arrow-attrs="{ class: 'stroke-deepblue-900' }"
+                :class="[{ 'rotate-180': isOpen }, 'max-h-[16px] min-h-[16px] min-w-[16px] max-w-[16px]', ui.item.icon]"
+              />
+            </button>
+          </slot>
+        </accordion-trigger>
+      </accordion-header>
+      <slot name="closedToShow" />
+      <accordion-content class="AccordionContent">
+        <div :class="[contClass, { 'mt-4 border-t': divider }]">
+          <slot
+            :name="slot || 'default'"
+            :content="content"
+          >
+            {{ content }}
+          </slot>
+        </div>
+      </accordion-content>
+    </accordion-item>
+  </accordion-root>
+</template>
+
+<style scoped>
+.AccordionContent {
+  overflow: hidden;
+}
+
+.AccordionContent[data-state=open] {
+  animation: slideDown 200ms ease-out;
+}
+
+.AccordionContent[data-state=closed] {
+  animation: slideUp 200ms ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--reka-accordion-content-height);
+  }
+}
+@keyframes slideUp {
+  from {
+    height: var(--reka-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+</style>

package/dist/runtime/components/accordion/Accordion.vue.d.ts

@@ -0,0 +1,41 @@
+import type { Props } from './types.js';
+declare function emulateButtonClick(): void;
+declare var __VLS_20: {}, __VLS_22: {}, __VLS_28: {}, __VLS_35: any, __VLS_36: {
+    content: any;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_35>]?: (props: typeof __VLS_36) => any;
+} & {
+    head?: (props: typeof __VLS_20) => any;
+} & {
+    additional?: (props: typeof __VLS_22) => any;
+} & {
+    closedToShow?: (props: typeof __VLS_28) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {
+    ontoggle: typeof emulateButtonClick;
+    handelOpen: () => void;
+    handelClose: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    toggle: (isOpen: boolean) => any;
+    open: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onToggle?: ((isOpen: boolean) => any) | undefined;
+    onOpen?: (() => any) | undefined;
+}>, {
+    size: import("./types.js").Size;
+    color: import("./types.js").Color;
+    disabled: boolean;
+    defaultOpen: boolean;
+    slot: string;
+    divider: 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/accordion/types.d.ts

@@ -0,0 +1,15 @@
+export type Size = 'md' | 'lg';
+export type Color = 'gray';
+export interface Props {
+    label: string;
+    content?: any;
+    defaultOpen?: boolean;
+    disabled?: boolean;
+    size?: Size;
+    color?: Color;
+    slot?: string;
+    divider?: boolean;
+    contentClass?: string;
+    bodyClass?: string;
+    activateOpenBg?: boolean;
+}

package/dist/runtime/components/accordion/ui.config.d.ts

@@ -0,0 +1,22 @@
+declare const _default: {
+    wrapper: string;
+    ring: string;
+    item: {
+        size: {
+            md: string;
+            lg: string;
+        };
+        color: {
+            gray: string;
+        };
+        icon: string;
+        accordion: string;
+        content: string;
+        button: string;
+    };
+    transition: {
+        enterActiveClass: string;
+        leaveActiveClass: string;
+    };
+};
+export default _default;

package/dist/runtime/components/accordion/ui.config.js

@@ -0,0 +1,21 @@
+export default {
+  wrapper: "w-full flex flex-col",
+  ring: "focus-visible:ring-2 focus-visible:ring-blue-500 dark:focus-visible:ring-blue-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900",
+  item: {
+    size: {
+      md: "text-md ",
+      lg: "text-xl"
+    },
+    color: {
+      gray: "text-deepblue-900 dark:text-gray-200"
+    },
+    icon: "ms-auto transform transition-transform duration-200",
+    accordion: "p-4 rounded bg-white dark:bg-gray-900 transition-colors",
+    content: "",
+    button: "flex justify-between gap-1 grow w-full items-center text-sm font-semibold text-start"
+  },
+  transition: {
+    enterActiveClass: "overflow-hidden transition-[height] duration-200 ease-out",
+    leaveActiveClass: "overflow-hidden transition-[height] duration-200 ease-out"
+  }
+};

package/dist/runtime/components/checkbox/Checkbox.vue

@@ -0,0 +1,123 @@
+<script setup>
+import { twMerge } from "tailwind-merge";
+defineOptions({ name: "ACheckbox" });
+const emit = defineEmits(["update:modelValue"]);
+const props = defineProps({
+  size: { type: String, required: false, default: "sm" },
+  name: { type: String, required: false, default: "check" },
+  modelValue: { type: [String, Number, Array, Object, Boolean, null], required: true, default: () => [] },
+  value: { type: [String, Number, Object, null], required: false, default: null },
+  intermediate: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  side: { type: [String, null], required: false, default: "left" },
+  masterControl: { type: Boolean, required: false, default: false },
+  emptyCheckboxClass: { type: String, required: false, default: "" },
+  intermediateCheckboxClass: { type: String, required: false, default: "" },
+  alwaysIntermediate: { type: Boolean, required: false, default: false },
+  checkboxClass: { type: String, required: false, default: "" },
+  labelClass: { type: String, required: false, default: "" },
+  viewType: { type: String, required: false, default: "checkbox" }
+});
+const slots = useSlots();
+const isChecked = computed(() => {
+  if (props.modelValue instanceof Array) {
+    return props.modelValue.includes(props.value);
+  }
+  return props.modelValue === true;
+});
+const isIntermediate = computed(() => {
+  if (props.alwaysIntermediate) {
+    return props.intermediate;
+  } else {
+    return isChecked.value && props.intermediate;
+  }
+});
+const updateInput = (e) => {
+  const isChecked2 = e.target.checked;
+  if (props.masterControl) {
+    emit("update:modelValue", isChecked2);
+  } else if (props.modelValue instanceof Array) {
+    const newValue = [...props.modelValue];
+    if (isChecked2) {
+      newValue.push(props.value);
+    } else {
+      newValue.splice(newValue.indexOf(props.value), 1);
+    }
+    emit("update:modelValue", newValue);
+  } else {
+    emit("update:modelValue", !!isChecked2);
+  }
+};
+const sizeOptions = {
+  lg: "min-w-6 min-h-6 max-w-6 max-h-6",
+  sm: "min-w-4 min-h-4 max-w-4 max-h-4"
+};
+const textSizeOptions = {
+  lg: "text-sm gap-2.5",
+  sm: "text-xs gap-2"
+};
+const hasSlotContent = computed(() => {
+  return !!slots.default?.().length;
+});
+</script>
+
+<template>
+  <div
+    class="flex items-center"
+    :class="[disabled ? 'opacity-20' : '']"
+  >
+    <input
+      :id="name"
+      type="checkbox"
+      class="hidden"
+      :checked="isChecked"
+      :disabled="disabled"
+      :value="value"
+      @change="updateInput"
+    >
+    <label
+      v-if="viewType === 'checkbox'"
+      :for="name"
+      class="flex items-center text-deepblue-900 dark:text-gray-200"
+      :class="twMerge(textSizeOptions[size], disabled ? 'cursor-default' : 'cursor-pointer', labelClass)"
+    >
+      <span
+        v-if="side === 'left' && hasSlotContent"
+        class="select-none"
+      >
+        <slot />
+      </span>
+      <span :class="[sizeOptions[size]]">
+        <i-checkbox-intermediate
+          v-if="isIntermediate"
+          class="w-full h-full"
+          :class="twMerge('text-blue-700 dark:text-blue-500', intermediateCheckboxClass)"
+        />
+        <i-checkbox-active
+          v-else-if="isChecked"
+          class="w-full h-full"
+          :class="twMerge('text-blue-700 dark:text-blue-500', checkboxClass)"
+        />
+        <i-checkbox-empty
+          v-else
+          class="w-full h-full"
+          :class="twMerge('text-deepblue-900 dark:text-gray-200', emptyCheckboxClass)"
+        />
+      </span>
+      <span
+        v-if="side === 'right' && hasSlotContent"
+        class="select-none"
+      >
+        <slot />
+      </span>
+    </label>
+    <label
+      v-else-if="viewType === 'chip'"
+      :for="name"
+      class="px-[10px] py-[3.5px] text-deepblue-900 border border-gray-500 rounded-full  dark:text-gray-200 text-xs"
+      :class="[{ 'bg-blue-700 text-white dark:bg-blue-500 dark:border-blue-500 dark:text-gray-900 font-medium': isChecked }]"
+    >
+      <slot />
+    </label>
+  </div>
+</template>

package/dist/runtime/components/checkbox/Checkbox.vue.d.ts

@@ -0,0 +1,45 @@
+interface Props {
+    size?: 'lg' | 'sm';
+    name?: string;
+    modelValue: string | number | Array<any> | object | boolean | null;
+    value?: string | number | object | null;
+    intermediate?: boolean;
+    disabled?: boolean;
+    side?: 'right' | 'left' | null;
+    masterControl?: boolean;
+    emptyCheckboxClass?: string;
+    intermediateCheckboxClass?: string;
+    alwaysIntermediate?: boolean;
+    checkboxClass?: string;
+    labelClass?: string;
+    viewType?: 'checkbox' | 'chip';
+}
+declare var __VLS_1: {}, __VLS_15: {}, __VLS_17: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_15) => any;
+} & {
+    default?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    name: string;
+    size: "lg" | "sm";
+    modelValue: string | number | Array<any> | object | boolean | null;
+    value: string | number | object | null;
+    side: "right" | "left" | null;
+    masterControl: boolean;
+    emptyCheckboxClass: string;
+    intermediateCheckboxClass: string;
+    alwaysIntermediate: boolean;
+    checkboxClass: string;
+    labelClass: string;
+    viewType: "checkbox" | "chip";
+}, {}, {}, {}, 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;
+    };
+};