adata-ui 3.0.2 → 3.1.0

package/dist/runtime/components/OtherServiceFeatures.vue

@@ -0,0 +1,104 @@
+<script setup>
+import { useRoute } from "vue-router";
+import AIconMagnifyingGlass from "../icons/other-service/magnifying-glass.vue";
+import AIconUsersThree from "../icons/other-service/users-three.vue";
+import AIconLink from "../icons/other-service/link.vue";
+import AIconGlobe from "../icons/other-service/globe.vue";
+import AIconArrowSquareDown from "../icons/other-service/arrow-square-down.vue";
+import AIconCurrencyDollar from "../icons/other-service/currency-dollar.vue";
+import AIconBlock from "../icons/other-service/block.vue";
+import AIconStandingScales from "../icons/other-service/standing-scales.vue";
+import AIconArrowTopRightOnSquare from "../icons/other-service/arrow-top-right-on-square.vue";
+import { PAGES } from "../shared/constants/pages";
+import { useAppConfig } from "#imports";
+import { useLocalePath, useI18n } from "#i18n";
+import { navigateTo } from "#app";
+const { tm, rt, t } = useI18n();
+const route = useRoute();
+const localePath = useLocalePath();
+const appConfig = useAppConfig();
+const mode = appConfig.adataUI.mode;
+const afterClasses = 'after:content-[""] after:w-full after:h-[0.5px] after:bottom-[-10px] after:left-0 after:absolute after:bg-gray-500/50';
+const iconById = [AIconMagnifyingGlass, AIconUsersThree, AIconLink, AIconGlobe, AIconArrowSquareDown, AIconCurrencyDollar, AIconBlock, AIconStandingScales, AIconArrowTopRightOnSquare];
+const linkByIndex = [
+  `https://pk.${mode}.kz` + PAGES.pk.main,
+  `https://pk.${mode}.kz` + PAGES.pk.employees,
+  `https://pk.${mode}.kz` + PAGES.pk.connections,
+  `https://pk.${mode}.kz` + PAGES.pk.foreign,
+  `https://pk.${mode}.kz` + PAGES.pk.unload,
+  `https://pk.${mode}.kz` + PAGES.pk.offshore,
+  `https://pk.${mode}.kz` + PAGES.pk.sanctions,
+  `https://pk.${mode}.kz` + PAGES.pk.compare,
+  `https://${mode}.kz/all-services`
+];
+async function handleClick(link) {
+  console.log(link);
+  if (link.includes("all-services")) {
+    return navigateTo(localePath(link), {
+      open: {
+        target: "_blank"
+      }
+    });
+  } else {
+    await navigateTo(link, {
+      open: {
+        target: "_blank"
+      }
+    });
+  }
+}
+</script>
+
+<template>
+  <section class="a-container mb-10 flex flex-col gap-4 lg:mb-20 lg:gap-8">
+    <h2 class="heading-02 md:heading-01 px-4 md:px-0 lg:text-4xl text-2xl lg:text-left text-center font-bold">
+      {{ t("restTasks.title") }}
+    </h2>
+    <ul class="grid grid-cols-1 gap-3 px-4 sm:grid-cols-2 lg:grid-cols-3 md:px-0">
+      <li
+        v-for="(tab, idx) in tm('restTasks.tabTitleList') || []"
+        :key="idx"
+        :class="{ 'sm:col-span-2 md:col-span-1': idx === 8 }"
+      >
+        <div
+          :class="[
+  { afterClasses: idx !== 8 },
+  {
+    'flex size-full items-center justify-center text-blue-700 dark:text-blue-500': idx === 8,
+    'bg-white dark:bg-gray-900': route.path === localePath(linkByIndex[idx])
+  }
+]"
+          class="relative flex cursor-pointer items-center gap-4 rounded-md p-5 transition hover:bg-white dark:hover:bg-gray-200/5"
+          @click="() => handleClick(linkByIndex[idx])"
+        >
+          <div class="flex items-center gap-4">
+            <component
+              :is="iconById[idx]"
+              v-if="idx < 8"
+              width="40"
+              height="40"
+              class="w-[40px] shrink-0 text-blue-700 dark:text-blue-500"
+            />
+            <div class="flex flex-col gap-4">
+              <h3
+                class="size-full text-[20px] font-semibold leading-6"
+              >
+                {{ rt(tab.title) }}
+              </h3>
+              <p
+                v-if="idx !== 8"
+                class="text-sm"
+              >
+                {{ rt(tab.description) }}
+              </p>
+            </div>
+          </div>
+          <component
+            :is="AIconArrowTopRightOnSquare"
+            v-if="idx === 8"
+          />
+        </div>
+      </li>
+    </ul>
+  </section>
+</template>

package/dist/runtime/components/OtherServiceFeatures.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/Tag.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { computed } from "#imports";
+defineOptions({ name: "AStatusBadge" });
+const props = defineProps({
+  type: { type: String, required: false, default: "primary" },
+  view: { type: String, required: false, default: "default" },
+  size: { type: String, required: false, default: "lg" },
+  customClasses: { type: String, required: false, default: "" }
+});
+const classes = computed(() => [
+  "text-sm rounded-md select-none inline-flex gap-[5.5px] justify-center items-center",
+  typeSwitchValues[props.view][props.type],
+  props.size === "xs" ? "px-4 py-[2px] text-xs font-bold" : "",
+  props.size === "sm" ? "text-xs font-semibold px-4 py-[2px] h-6" : "",
+  props.size === "lg" ? "px-4 py-[7.5px] font-semibold" : ""
+]);
+const typeSwitchValues = {
+  default: {
+    primary: "bg-blue-700 text-white dark:text-gray-900 dark:bg-blue-500",
+    success: "bg-green-500 text-white dark:text-gray-200 dark:bg-green-400",
+    danger: "bg-red-500 text-white dark:text-gray-200  ",
+    warning: "bg-yellow-400 text-white dark:text-gray-200  ",
+    gray: "bg-deepblue-900 text-white dark:text-gray-200 dark:bg-gray-200/10",
+    orange: "bg-orange-600 text-white  dark:text-gray-200"
+  },
+  inverted: {
+    primary: "bg-blue-700/10  text-blue-700 dark:text-blue-500 dark:bg-[#1EABFF1A]",
+    success: "bg-green-500/20  text-green-500 dark:text-green-400 dark:bg-green-400/20",
+    danger: "bg-red-500/10 text-red-500  dark:text-red-400 dark:bg-red-400/10",
+    warning: "bg-yellow-400/10 text-yellow-400",
+    gray: "bg-deepblue-900/10 text-gray-600 dark:text-gray-200 dark:bg-gray-200/10",
+    orange: "bg-orange-600/10 text-orange-600"
+  },
+  transparent: {
+    success: "bg-green-500/10 text-green-500 dark:bg-green-400/10 dark:text-green-400",
+    danger: "bg-red-500/10 text-red-500 dark:bg-red-400/10 dark:text-red-400"
+  }
+};
+</script>
+
+<template>
+  <div :class="[[classes], customClasses]">
+    <slot name="point" />
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,25 @@
+interface Props {
+    type?: 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning';
+    view?: 'default' | 'inverted' | 'transparent';
+    size?: 'xs' | 'sm' | 'lg';
+    customClasses?: string;
+}
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    point?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: "xs" | "sm" | "lg";
+    type: "primary" | "success" | "danger" | "gray" | "orange" | "warning";
+    view: "default" | "inverted" | "transparent";
+    customClasses: string;
+}, {}, {}, {}, 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/Toggle.vue

@@ -0,0 +1,139 @@
+<script setup>
+import { SwitchRoot, SwitchThumb } from "reka-ui";
+import { twMerge, twJoin } from "tailwind-merge";
+import { computed } from "#imports";
+const props = defineProps({
+  disabled: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false, default: "md" },
+  color: { type: String, required: false, default: "blue" },
+  switchClass: { type: String, required: false, default: "" },
+  activeClass: { type: String, required: false, default: "" },
+  inactiveClass: { type: String, required: false, default: "" },
+  onIcon: { type: null, required: false, default: null },
+  onIconClass: { type: [String, null], required: false, default: null },
+  offIcon: { type: null, required: false, default: null },
+  offIconClass: { type: [String, null], required: false, default: null },
+  activeContainerClass: { type: String, required: false, default: "" },
+  inactiveContainerClass: { type: String, required: false, default: "" }
+});
+const active = defineModel({ type: Boolean, ...{ required: true } });
+const switchClass = computed(() => {
+  return twMerge(twJoin(
+    ui.base,
+    ui.size[props.size],
+    ui.rounded,
+    ui.ring,
+    props.disabled ? "opacity-20" : "",
+    props.color && (active.value ? ui.active[props.color] : ui.inactive),
+    active.value ? props.activeClass : props.inactiveClass
+  ), props.switchClass);
+});
+const containerClass = computed(() => {
+  return twMerge(twJoin(
+    ui.container.base,
+    ui.container.size[props.size],
+    active.value ? ui.container.active[props.size] : ui.container.inactive,
+    active.value ? props.activeContainerClass : props.inactiveContainerClass
+  ));
+});
+const onIconClassFormatted = computed(() => {
+  return twMerge(twJoin(
+    ui.icon.size[props.size],
+    props.onIconClass
+  ));
+});
+const offIconClassFormatted = computed(() => {
+  return twMerge(twJoin(
+    ui.icon.size[props.size],
+    props.offIconClass
+  ));
+});
+const ui = {
+  base: "relative inline-flex flex-shrink-0 border-2 border-transparent disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none transition ease-in-out",
+  rounded: "rounded-full",
+  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",
+  active: {
+    blue: "data-[state=unchecked]:bg-blue-700 data-[state=checked]:bg-blue-500",
+    green: "bg-green"
+  },
+  inactive: "data-[state=unchecked]:bg-gray-200 data-[state=checked]:dark:bg-gray-200/20",
+  size: {
+    "2xs": "h-3 w-5",
+    "xs": "h-3.5 w-6",
+    "sm": "h-4 w-7",
+    "md": "h-5 w-9",
+    "lg": "h-6 w-11",
+    "xl": "h-7 w-[3.25rem]",
+    "2xl": "h-8 w-[3.75rem]"
+  },
+  container: {
+    base: "pointer-events-none relative inline-block rounded-full data-[state=unchecked]:bg-white data-[state=checked]:bg-gray-900 shadow transform ring-0 transition ease-in-out duration-200",
+    active: {
+      "2xs": "translate-x-2 rtl:-translate-x-2",
+      "xs": "translate-x-2.5 rtl:-translate-x-2.5",
+      "sm": "translate-x-3 rtl:-translate-x-3",
+      "md": "translate-x-4 rtl:-translate-x-4",
+      "lg": "translate-x-5 rtl:-translate-x-5",
+      "xl": "translate-x-6 rtl:-translate-x-6",
+      "2xl": "translate-x-7 rtl:-translate-x-7"
+    },
+    inactive: "translate-x-0 rtl:-translate-x-0",
+    size: {
+      "2xs": "h-2 w-2",
+      "xs": "h-2.5 w-2.5",
+      "sm": "h-3 w-3",
+      "md": "h-4 w-4",
+      "lg": "h-5 w-5",
+      "xl": "h-6 w-6",
+      "2xl": "h-7 w-7"
+    }
+  },
+  icon: {
+    base: "absolute inset-0 h-full w-full flex items-center justify-center transition-opacity",
+    active: "opacity-100 ease-in duration-200",
+    inactive: "opacity-0 ease-out duration-100",
+    size: {
+      "2xs": "h-2 w-2",
+      "xs": "h-2 w-2",
+      "sm": "h-2 w-2",
+      "md": "h-3 w-3",
+      "lg": "h-4 w-4",
+      "xl": "h-5 w-5",
+      "2xl": "h-6 w-6"
+    }
+  }
+};
+</script>
+
+<template>
+  <SwitchRoot
+    id="airplane-mode"
+    v-model="active"
+    :disabled="disabled"
+    :class="switchClass"
+    aria-label="Switch"
+  >
+    <SwitchThumb
+      :class="containerClass"
+    >
+      <span
+        v-if="onIcon"
+        :class="[active ? ui.icon.active : ui.icon.inactive, ui.icon.base]"
+      >
+        <component
+          :is="onIcon"
+          :class="onIconClassFormatted"
+        />
+      </span>
+      <span
+        v-if="offIcon"
+        :class="[active ? ui.icon.inactive : ui.icon.active, ui.icon.base]"
+      >
+        <component
+          :is="offIcon"
+          :class="offIconClassFormatted"
+        />
+      </span>
+    </SwitchThumb>
+  </SwitchRoot>
+</template>

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

@@ -0,0 +1,39 @@
+type Size = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type Color = 'blue' | 'green';
+interface Props {
+    disabled?: boolean;
+    size?: Size;
+    color?: Color;
+    switchClass?: string;
+    activeClass?: string;
+    inactiveClass?: string;
+    onIcon?: SVGElement | null;
+    onIconClass?: string | null;
+    offIcon?: SVGElement | null;
+    offIconClass?: string | null;
+    activeContainerClass?: string;
+    inactiveContainerClass?: string;
+}
+type __VLS_Props = Props;
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    size: Size;
+    color: Color;
+    disabled: boolean;
+    switchClass: string;
+    activeClass: string;
+    inactiveClass: string;
+    onIcon: SVGElement | null;
+    onIconClass: string | null;
+    offIcon: SVGElement | null;
+    offIconClass: string | null;
+    activeContainerClass: string;
+    inactiveContainerClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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"
+  }
+};