adata-ui 3.0.2 → 3.1.0

package/dist/runtime/components/button/Button.vue

@@ -0,0 +1,133 @@
+<script setup>
+import { twJoin, twMerge } from "tailwind-merge";
+import { NuxtLink } from "#components";
+import { computed } from "#imports";
+defineOptions({ name: "AButton" });
+const props = defineProps({
+  variant: { type: String, required: false, default: "primary" },
+  view: { type: String, required: false, default: "default" },
+  size: { type: String, required: false, default: "lg" },
+  form: { type: String, required: false, default: "button" },
+  icon: { type: null, required: false },
+  iconClass: { type: String, required: false, default: "" },
+  loading: { type: Boolean, required: false, default: false },
+  disabled: { type: Boolean, required: false, default: false },
+  block: { type: Boolean, required: false, default: false },
+  active: { type: Boolean, required: false, default: false },
+  to: { type: String, required: false, default: "" }
+});
+const classes = computed(() => [
+  "body-600 rounded-md cursor-pointer outline-none transition duration-200 select-none",
+  props.block ? "w-full" : "",
+  typeSwitchValues[props.view][props.variant],
+  sizeSwitchValues[props.form][props.size]
+]);
+const disabledClasses = computed(() => [
+  "body-600 rounded-md outline-none transition duration-200 select-none",
+  props.block ? "w-full" : "",
+  disabledTypeSwitchValues[props.view],
+  sizeSwitchValues[props.form][props.size]
+]);
+const typeSwitchActiveValues = {
+  default: {
+    primary: "bg-deepblue-900 text-white dark:bg-gray-200",
+    success: "bg-deepblue-900 text-white dark:bg-gray-200",
+    danger: "bg-deepblue-900 text-white dark:bg-gray-200 ",
+    gray: "bg-deepblue-900 text-white dark:bg-gray-200 dark:text-gray-900 hover:text-deepblue-900 dark:hover:text-gray-200",
+    ghost: "bg-deepblue-900 text-white dark:bg-gray-200 dark:text-gray-900 hover:text-deepblue-900 dark:hover:text-gray-200"
+  },
+  transparent: {
+    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",
+    gray: "bg-deepblue-900 text-white dark:bg-gray-200 dark:text-gray-900 hover:text-deepblue-900 dark:hover:text-gray-200",
+    ghost: "bg-white text-deepblue-900 dark:bg-gray-900 dark:text-gray-200 hover:text-deepblue-900 dark:hover:text-gray-200"
+  },
+  outline: {
+    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",
+    gray: "bg-deepblue-900 text-white dark:bg-gray-200 dark:text-gray-900 hover:text-deepblue-900 dark:hover:text-gray-200",
+    ghost: "bg-gray-500 text-white dark:bg-gray-500 dark:text-gray-900 hover:text-deepblue-900 dark:hover:text-gray-200"
+  }
+};
+const typeSwitchValues = {
+  default: {
+    primary: "bg-blue-700 text-white hover:bg-blue-900 active:bg-deepblue-900 active:text-white dark:bg-blue-500 dark:text-gray-900 dark:hover:bg-blue-700 dark:active:bg-gray-200",
+    success: "bg-green-500 text-white hover:bg-green-900 active:bg-deepblue-900 active:text-white dark:bg-green dark:text-gray-900 dark:hover:bg-green-300 dark:active:bg-gray-200",
+    danger: "bg-red-500 text-white hover:bg-red-700 active:bg-deepblue-900 active:text-white dark:bg-red-400 dark:text-gray-900 dark:hover:bg-red-300 dark:active:bg-gray-200",
+    gray: "bg-deepblue-900/5 text-deepblue-900 hover:bg-deepblue-900/10 active:bg-deepblue-900 active:text-white dark:bg-gray-200/5 dark:hover:bg-gray-200/10 dark:active:bg-gray-200 dark:text-gray-200 dark:active:text-gray-900",
+    ghost: "bg-white text-deepblue-900 hover:bg-deepblue-900/5 active:bg-deepblue-900 active:text-white dark:bg-gray-900 dark:text-gray-200 dark:bg-gray-900 dark:hover:bg-gray-200/5 dark:active:bg-gray-200 dark:active:text-gray-900"
+  },
+  transparent: {
+    primary: "text-blue-700 hover:bg-blue-100 active:bg-blue-700 active:text-white dark:text-blue-500 dark:hover:bg-blue-500/20 dark:active:bg-blue-500 dark:active:text-gray-900",
+    success: "text-green-500 hover:bg-green-500/20 active:bg-green-500 active:text-white dark:text-green-400 dark:hover:bg-green-400/20 dark:active:bg-green-400 dark:active:text-gray-900",
+    danger: "text-red-500 hover:bg-red-500/20 active:bg-red-500 active:text-white dark:text-red-400 dark:hover:bg-red-400/20 dark:active:bg-red-400 dark:active:text-gray-900",
+    gray: "text-deepblue-900 hover:bg-deepblue-900/10 active:bg-deepblue-900 active:text-white dark:text-gray-200 dark:hover:bg-gray-200/5 dark:active:bg-gray-200 dark:active:text-gray-900",
+    ghost: "text-white hover:bg-deepblue-900/10 active:bg-white active:text-deepblue-900 dark:text-gray-200 dark:hover:bg-gray-200/5 dark:active:bg-gray-900 dark:active:text-gray-200"
+  },
+  outline: {
+    primary: "border border-blue-700 text-blue-700 hover:bg-blue-100 active:bg-blue-700 active:text-white dark:border-blue-500 dark:text-blue-500 dark:hover:bg-blue-500/20 dark:active:bg-blue-500 dark:active:text-gray-900",
+    success: "border border-green-500 text-green-500 hover:bg-green-500/20 active:bg-green-500 active:text-white dark:border-green-400 dark:text-green-400 dark:hover:bg-green-400/20 dark:active:bg-green-400 dark:active:text-gray-900",
+    danger: "border border-red-500 text-red-500 hover:bg-red-500/20 active:bg-red-500 active:text-white dark:text-red-400 dark:border-red-400 dark:hover:bg-red-400/20 dark:active:bg-red-400 dark:active:text-gray-900",
+    gray: "border border-gray-500/50 text-deepblue-900 hover:bg-deepblue-900/10 active:bg-deepblue-900 active:text-white dark:border-gray-500/50 dark:text-gray-200 dark:hover:bg-gray-200/5 dark:active:bg-gray-200 dark:active:text-gray-900",
+    ghost: "border border-white text-white hover:bg-deepblue-900 active:bg-gray-500 active:text-white dark:border-gray-200 dark:text-gray-200 dark:hover:bg-gray-200/5 dark:active:bg-gray-500 dark:active:text-gray-900"
+  }
+};
+const disabledTypeSwitchValues = {
+  default: "bg-deepblue-900/5 text-deepblue-900/20 dark:bg-gray-200/5 dark:text-gray-200/20 pointer-events-none",
+  transparent: "text-gray-500/50 pointer-events-none",
+  outline: "border border-gray-500/50 text-gray-500/50 pointer-events-none"
+};
+const sizeSwitchValues = {
+  icon: {
+    sm: "p-1 text-base",
+    md: "p-2 text-base",
+    lg: "p-2 text-2xl",
+    xl: "p-4 text-3xl"
+  },
+  button: {
+    sm: "px-4 py-1.5 leading-4 !h-[28px]",
+    md: "px-4 py-1.5 !h-[32px]",
+    lg: "px-4 py-2.5",
+    xl: "px-8 py-2.5"
+  }
+};
+const buttonClasses = computed(
+  () => twMerge(
+    twJoin(
+      props.disabled ? disabledClasses.value : classes.value,
+      props.active ? typeSwitchActiveValues[props.view][props.variant] : "",
+      props.to ? "inline-block" : ""
+    )
+  )
+);
+</script>
+
+<template>
+  <component
+    :is="to ? NuxtLink : 'button'"
+    :class="[buttonClasses, 'relative h-fit transition flex items-center justify-center']"
+    :disabled="disabled"
+    :to="to"
+  >
+    <span
+      :class="[
+  { 'opacity-0': loading },
+  'flex items-center justify-center gap-2 whitespace-nowrap'
+]"
+    >
+      <component
+        :is="icon"
+        :class="[`${iconClass}`]"
+      />
+      <slot />
+    </span>
+    <span
+      v-if="loading"
+      class="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center"
+    >
+      <i-loader-circle class="animate-spin" />
+    </span>
+  </component>
+</template>

package/dist/runtime/components/button/Button.vue.d.ts

@@ -0,0 +1,37 @@
+import type { Component } from 'vue';
+interface Props {
+    variant?: 'primary' | 'success' | 'danger' | 'gray' | 'ghost';
+    view?: 'default' | 'outline' | 'transparent';
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    form?: 'icon' | 'button';
+    icon?: Component;
+    iconClass?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    block?: boolean;
+    active?: boolean;
+    to?: string;
+}
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: "sm" | "md" | "lg" | "xl";
+    view: "default" | "outline" | "transparent";
+    disabled: boolean;
+    active: boolean;
+    loading: boolean;
+    variant: "primary" | "success" | "danger" | "gray" | "ghost";
+    form: "icon" | "button";
+    iconClass: string;
+    block: boolean;
+    to: 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/button/types.d.ts

@@ -0,0 +1,21 @@
+export type TypeSwitchValues = {
+    [key in 'primary' | 'success' | 'danger' | 'gray' | 'ghost']: string;
+};
+export type ViewSwitchValues = {
+    default: TypeSwitchValues;
+    transparent: TypeSwitchValues;
+    outline: TypeSwitchValues;
+};
+export type SizeSwitchValues = {
+    icon: {
+        [key in 'sm' | 'md' | 'lg' | 'xl']: string;
+    };
+    button: {
+        [key in 'sm' | 'md' | 'lg' | 'xl']: string;
+    };
+};
+export type DisabledViewSwitchValues = {
+    default: string;
+    transparent: string;
+    outline: string;
+};

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

@@ -0,0 +1,124 @@
+<script setup>
+import { twMerge } from "tailwind-merge";
+import { useSlots, computed } from "#imports";
+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;
+    };
+};

package/dist/runtime/components/date-picker/DatePicker.vue

@@ -0,0 +1,102 @@
+<script setup>
+import VueDatePicker from "@vuepic/vue-datepicker";
+import "@vuepic/vue-datepicker/dist/main.css";
+import { kk, ru, enUS } from "date-fns/locale";
+import { nextTick, ref, useI18n, computed } from "#imports";
+const props = defineProps({
+  placeholder: { type: String, required: false },
+  yearPicker: { type: Boolean, required: false },
+  menuTitle: { type: String, required: false },
+  format: { type: String, required: false }
+});
+const { t, locale } = useI18n();
+const date = defineModel({ type: [Date, null], ...{ default: null } });
+const datePicker = ref();
+function closeDatePicker() {
+  datePicker.value?.closeMenu();
+}
+const currentLocale = computed(() => {
+  if (locale.value === "en") return enUS;
+  if (locale.value === "kk") return kk;
+  return ru;
+});
+function menuOpened() {
+  nextTick(() => {
+    const menu = document.querySelector(".dp__menu");
+    menu?.classList.remove("dp__theme_light");
+    menu?.classList.add("date-picker-menu-shadow");
+    const topArrow = document.querySelector(".dp__arrow_top");
+    const bottomArrow = document.querySelector(".dp__arrow_bottom");
+    topArrow?.remove();
+    bottomArrow?.remove();
+  });
+}
+</script>
+
+<template>
+  <vue-date-picker
+    ref="datePicker"
+    v-model="date"
+    v-bind="$attrs"
+    :enable-time-picker="false"
+    :format="format"
+    :format-locale="currentLocale"
+    :placeholder="placeholder || t('reuse.date')"
+    :year-picker="yearPicker"
+    :ui="{
+  navBtnNext: 'hidden',
+  navBtnPrev: 'hidden',
+  menu: 'p-2'
+}"
+    model-type="format"
+    class="custom-date-picker"
+    auto-apply
+    @open="menuOpened"
+  >
+    <template #top-extra>
+      <div
+        class="flex items-center justify-between"
+        :class="{ 'mb-2': yearPicker }"
+      >
+        <p class="text-base font-semibold">
+          {{ menuTitle || t("reuse.selectDate") }}
+        </p>
+        <i-x-mark
+          class="cursor-pointer size-6 shrink-0"
+          @click="closeDatePicker"
+        />
+      </div>
+    </template>
+    <template #calendar-header="{ index, day }">
+      <p class="text-gray-600 dark:text-gray-200 text-sm font-normal">
+        {{ day }}
+      </p>
+    </template>
+    <template #action-row />
+    <template #action-preview />
+    <template #action-buttons />
+  </vue-date-picker>
+</template>
+
+<style>
+.custom-date-picker {
+  --dp-border-radius: 8px;
+  --dp-background-color: white;
+  --dp-menu-border-color: white;
+  --dp-border-color: white;
+  --dp-text-color: #2C3E50;
+  --dp-primary-color: #0070EB;
+}
+
+.date-picker-menu-shadow {
+  box-shadow: 0px 1px 8px 0px rgba(139, 146, 156, 0.3019607843);
+}
+
+.dark .custom-date-picker {
+  --dp-background-color: #26282B;
+  --dp-menu-border-color: #26282B;
+  --dp-border-color: #26282B;
+  --dp-text-color: #e3e5e8;
+  --dp-primary-color: #1B98E2;
+}
+</style>

package/dist/runtime/components/date-picker/DatePicker.vue.d.ts

@@ -0,0 +1,16 @@
+import '@vuepic/vue-datepicker/dist/main.css';
+type __VLS_Props = {
+    placeholder?: string;
+    yearPicker?: boolean;
+    menuTitle?: string;
+    format?: string;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: Date | null;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Date | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Date | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/floating-label/FloatingLabel.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { twMerge } from "tailwind-merge";
+const props = defineProps({
+  value: { type: String, required: false },
+  labelClasses: { type: String, required: false }
+});
+const combinedClasses = twMerge(`
+  pointer-events-none absolute
+  left-8 top-0 text-[10px] ps-1.5
+  transition-all
+  peer-focus:top-0 peer-focus:pt-0 peer-focus:text-[10px]
+  peer-placeholder-shown:text-sm peer-placeholder-shown:top-1.5 peer-placeholder-shown:pt-0.5
+`, props.labelClasses);
+</script>
+
+<template>
+  <label :class="combinedClasses">
+    <slot>
+      <span class="text-gray-500 leading-4">{{ value }}</span>
+    </slot>
+  </label>
+</template>

package/dist/runtime/components/floating-label/FloatingLabel.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    value?: string;
+    labelClasses?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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;
+    };
+};