@winchsa/ui 0.1.33 → 0.1.34

package/dist/components/forms/AppStepper.vue

@@ -0,0 +1,232 @@
+<script setup>
+import { ref, computed, watchEffect } from "vue";
+import { VSlideGroup, VSlideGroupItem, VIcon } from "vuetify/components";
+const props = defineProps({
+  items: { type: Array, required: true },
+  currentStep: { type: Number, required: false, default: 0 },
+  direction: { type: String, required: false, default: "horizontal" },
+  iconSize: { type: [String, Number], required: false, default: 52 },
+  isActiveStepValid: { type: Boolean, required: false, default: void 0 }
+});
+const emit = defineEmits(["update:currentStep"]);
+const currentStep = ref(props.currentStep || 0);
+const activeOrCompletedStepsClasses = computed(
+  () => (index) => index < currentStep.value ? "stepper-steps-completed" : index === currentStep.value ? "stepper-steps-active" : ""
+);
+const isHorizontalAndNotLastStep = computed(
+  () => (index) => props.direction === "horizontal" && props.items.length - 1 !== index
+);
+const isValidationEnabled = computed(() => {
+  return props.isActiveStepValid !== void 0;
+});
+watchEffect(() => {
+  if (props.currentStep !== void 0 && props.currentStep < props.items.length && props.currentStep >= 0) {
+    currentStep.value = props.currentStep;
+  }
+  emit("update:currentStep", currentStep.value);
+});
+</script>
+
+<template>
+  <VSlideGroup
+    v-model="currentStep"
+    class="app-stepper"
+    show-arrows
+    :direction="direction"
+  >
+    <VSlideGroupItem
+      v-for="(item, index) in items"
+      :key="item.title"
+      :value="index"
+    >
+      <div
+        class="cursor-pointer mx-1"
+        :class="[!isActiveStepValid && isValidationEnabled && 'stepper-steps-invalid', activeOrCompletedStepsClasses(index)]"
+        @click="!isValidationEnabled && emit('update:currentStep', index)"
+      >
+        <!-- SECTION stepper step with icon -->
+        <template v-if="item.icon">
+          <div class="stepper-icon-step text-high-emphasis d-flex align-center gap-2">
+            <!--  icon and title -->
+            <div
+              class="d-flex align-center gap-4 step-wrapper"
+              :class="[direction === 'horizontal' && 'flex-column']"
+            >
+              <div class="stepper-icon">
+                <VIcon
+                  :icon="item.icon"
+                  :size="item.size || iconSize"
+                />
+              </div>
+
+              <div>
+                <p class="stepper-title font-weight-medium mb-0">
+                  {{ item.title }}
+                </p>
+                <span
+                  v-if="item.subtitle"
+                  class="stepper-subtitle"
+                >
+                  <span class="text-sm">{{ item.subtitle }}</span>
+                </span>
+              </div>
+            </div>
+
+            <!--  append chevron -->
+            <VIcon
+              v-if="isHorizontalAndNotLastStep(index)"
+              class="flip-in-rtl stepper-chevron-indicator mx-6"
+              size="24"
+              icon="tabler-chevron-right"
+            />
+          </div>
+        </template>
+        <!-- !SECTION  -->
+
+        <!-- SECTION stepper step without icon -->
+        <template v-else>
+          <div class="d-flex align-center gap-x-2">
+            <div class="d-flex align-center gap-2">
+              <div
+                class="d-flex align-center justify-center"
+                style="block-size: 24px; inline-size: 24px"
+              >
+                <!--  custom circle icon -->
+                <template v-if="index >= currentStep">
+                  <div
+                    v-if="!isValidationEnabled || isActiveStepValid || index !== currentStep"
+                    class="stepper-step-indicator"
+                  />
+
+                  <VIcon
+                    v-else
+                    icon="tabler-alert-circle"
+                    size="24"
+                    color="error"
+                  />
+                </template>
+
+                <!--  step completed icon -->
+
+                <VIcon
+                  v-else
+                  icon="custom-check-circle"
+                  class="stepper-step-icon"
+                  size="24"
+                />
+              </div>
+
+              <!--  Step Number -->
+              <h4 class="text-h4 step-number">
+                {{ (index + 1).toString().padStart(2, "0") }}
+              </h4>
+            </div>
+
+            <!--  title and subtitle -->
+            <div style="line-height: 0">
+              <h6 class="text-sm font-weight-medium step-title">
+                {{ item.title }}
+              </h6>
+
+              <span
+                v-if="item.subtitle"
+                class="text-xs step-subtitle"
+              >
+                {{ item.subtitle }}
+              </span>
+            </div>
+
+            <!--  stepper step line -->
+            <div
+              v-if="isHorizontalAndNotLastStep(index)"
+              class="stepper-step-line"
+            />
+          </div>
+        </template>
+        <!-- !SECTION  -->
+      </div>
+    </VSlideGroupItem>
+  </VSlideGroup>
+</template>
+
+<style>
+.app-stepper.stepper-icon-step-bg .stepper-icon-step .step-wrapper {
+  flex-direction: row !important;
+}
+.app-stepper.stepper-icon-step-bg .stepper-icon-step .stepper-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.3125rem;
+  background-color: rgba(var(--v-theme-on-surface), var(--v-selected-opacity));
+  block-size: 2.5rem;
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  inline-size: 2.5rem;
+  margin-inline-end: 0.3rem;
+}
+.app-stepper.stepper-icon-step-bg .stepper-icon-step .stepper-title,
+.app-stepper.stepper-icon-step-bg .stepper-icon-step .stepper-subtitle {
+  line-height: normal;
+}
+.app-stepper.stepper-icon-step-bg .stepper-icon-step .stepper-title {
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  font-size: 0.9375rem;
+  font-weight: 500 !important;
+}
+.app-stepper.stepper-icon-step-bg .stepper-icon-step .stepper-subtitle {
+  color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+  font-size: 0.875rem;
+}
+.app-stepper.stepper-icon-step-bg .stepper-steps-active .stepper-icon-step .stepper-icon {
+  background-color: rgb(var(--v-theme-primary));
+  color: rgba(var(--v-theme-on-primary));
+}
+.app-stepper.stepper-icon-step-bg .stepper-steps-completed .stepper-icon-step .stepper-icon {
+  background: rgba(var(--v-theme-primary), 0.08);
+  color: rgba(var(--v-theme-primary));
+}
+.app-stepper .v-slide-group__content {
+  justify-content: center;
+  row-gap: 1.5rem;
+}
+.app-stepper .v-slide-group__content .stepper-step-indicator {
+  border: 0.3125rem solid rgb(var(--v-theme-primary));
+  border-radius: 50%;
+  background-color: rgb(var(--v-theme-surface));
+  block-size: 1.25rem;
+  inline-size: 1.25rem;
+  opacity: var(--v-activated-opacity);
+}
+.app-stepper .v-slide-group__content .stepper-step-line {
+  border-radius: 0.1875rem;
+  background-color: rgb(var(--v-theme-primary));
+  block-size: 0.1875rem;
+  inline-size: 3.75rem;
+  opacity: var(--v-activated-opacity);
+}
+.app-stepper .v-slide-group__content .stepper-chevron-indicator {
+  color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+}
+.app-stepper .v-slide-group__content .stepper-steps-completed .stepper-icon-step,
+.app-stepper .v-slide-group__content .stepper-steps-completed .stepper-step-icon,
+.app-stepper .v-slide-group__content .stepper-steps-active .stepper-icon-step,
+.app-stepper .v-slide-group__content .stepper-steps-active .stepper-step-icon {
+  color: rgb(var(--v-theme-primary)) !important;
+}
+.app-stepper .v-slide-group__content .stepper-steps-completed .stepper-step-indicator,
+.app-stepper .v-slide-group__content .stepper-steps-active .stepper-step-indicator {
+  opacity: 1;
+}
+.app-stepper .v-slide-group__content .stepper-steps-completed .stepper-step-line {
+  opacity: 1;
+}
+.app-stepper .v-slide-group__content .stepper-steps-completed .stepper-chevron-indicator {
+  color: rgb(var(--v-theme-primary));
+}
+.app-stepper .v-slide-group__content .stepper-steps-invalid.stepper-steps-active .stepper-icon-step,
+.app-stepper .v-slide-group__content .stepper-steps-invalid.stepper-steps-active .step-number,
+.app-stepper .v-slide-group__content .stepper-steps-invalid.stepper-steps-active .step-title,
+.app-stepper .v-slide-group__content .stepper-steps-invalid.stepper-steps-active .step-subtitle {
+  color: rgb(var(--v-theme-error)) !important;
+}
+</style>

package/dist/components/forms/AppStepper.vue.d.ts

@@ -0,0 +1,21 @@
+type Item = {
+    title: string;
+    icon?: string;
+    size?: string;
+    subtitle?: string;
+};
+type Direction = 'vertical' | 'horizontal';
+type __VLS_Props = {
+    items: Item[];
+    currentStep?: number;
+    direction?: Direction;
+    iconSize?: string | number;
+    isActiveStepValid?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:currentStep": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:currentStep"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/forms/AppSwitch.d.vue.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    labelSwitch?: string;
+};
+declare var __VLS_15: string | number, __VLS_16: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_15>]?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/forms/AppSwitch.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { computed, useAttrs } from "vue";
+import { VLabel, VSwitch } from "vuetify/components";
+import { useI18n } from "vue-i18n";
+defineProps({
+  labelSwitch: { type: String, required: false }
+});
+defineOptions({
+  name: "AppSwitch",
+  inheritAttrs: false
+});
+const { t } = useI18n();
+const elementId = computed(() => {
+  const attrs = useAttrs();
+  const _elementIdToken = attrs.id || attrs.label;
+  return _elementIdToken ? `app-switch-${_elementIdToken}-${Math.random().toString(36).slice(2, 7)}` : void 0;
+});
+const label = computed(() => useAttrs().label);
+const LangLabel = computed(() => label.value ? t(label.value) : "");
+</script>
+
+<template>
+  <div
+    class="d-flex flex-column"
+    :class="$attrs.class"
+  >
+    <div>
+      <VLabel
+        v-if="label"
+        :for="elementId"
+        class="mb-2 text-body-2 text-high-emphasis"
+        :text="LangLabel"
+      />
+    </div>
+    <div>
+      <VSwitch
+        v-bind="{
+  ...$attrs,
+  class: null,
+  label: void 0,
+  variant: 'outlined',
+  id: elementId
+}"
+        :label="labelSwitch"
+        class="item-center h-100"
+      >
+        <template
+          v-for="(_, name) in $slots"
+          #[name]="slotProps"
+        >
+          <slot
+            :name="name"
+            v-bind="slotProps || {}"
+          />
+        </template>
+      </VSwitch>
+    </div>
+  </div>
+</template>

package/dist/components/forms/AppSwitch.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    labelSwitch?: string;
+};
+declare var __VLS_15: string | number, __VLS_16: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_15>]?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/forms/AppTextField.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_15: string | number, __VLS_16: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_15>]?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/forms/AppTextField.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { computed, useAttrs } from "vue";
+import { VLabel, VTextField } from "vuetify/components";
+import { useI18n } from "vue-i18n";
+defineOptions({
+  name: "AppTextField",
+  inheritAttrs: false
+});
+const { t } = useI18n();
+const attrs = useAttrs();
+const uid = Math.random().toString(36).slice(2, 7);
+const label = computed(() => attrs.label);
+const langLabel = computed(() => label.value ? t(label.value) : "");
+const elementId = computed(() => {
+  const token = attrs.id || label.value;
+  return token ? `AppTextField-${token}-${uid}` : void 0;
+});
+const placeholder = computed(() => {
+  return attrs.placeholder || (label.value ? t("inputs.placeholder", { name: langLabel.value }) : "");
+});
+</script>
+
+<template>
+  <div
+    class="AppTextField flex-grow-1"
+    :class="$attrs.class"
+  >
+    <VLabel
+      v-if="label"
+      :for="elementId"
+      class="mb-2 text-body-2 text-high-emphasis app-font-size-13"
+      :text="langLabel"
+    />
+    <VTextField
+      v-bind="{
+  ...$attrs,
+  class: null,
+  label: void 0,
+  variant: 'outlined',
+  id: elementId
+}"
+      :placeholder="placeholder"
+      class="app-font-size-13"
+    >
+      <template
+        v-for="(_, name) in $slots"
+        #[name]="slotProps"
+      >
+        <slot
+          :name="name"
+          v-bind="slotProps || {}"
+        />
+      </template>
+      <template #details>
+        <span class="app-h-10px" />
+      </template>
+    </VTextField>
+  </div>
+</template>

package/dist/components/forms/AppTextField.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_15: string | number, __VLS_16: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_15>]?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/forms/AppTextarea.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_15: string | number, __VLS_16: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_15>]?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/forms/AppTextarea.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { computed, useAttrs } from "vue";
+import { VLabel, VTextarea } from "vuetify/components";
+import { useI18n } from "vue-i18n";
+defineOptions({
+  name: "AppTextarea",
+  inheritAttrs: false
+});
+const { t } = useI18n();
+const attrs = useAttrs();
+const uid = Math.random().toString(36).slice(2, 7);
+const label = computed(() => attrs.label);
+const langLabel = computed(() => label.value ? t(label.value) : "");
+const elementId = computed(() => {
+  const token = attrs.id || label.value;
+  return token ? `app-textarea-${token}-${uid}` : void 0;
+});
+const placeholder = computed(() => {
+  return attrs.placeholder || (label.value ? t("inputs.placeholder", { name: langLabel.value }) : "");
+});
+</script>
+
+<template>
+  <div
+    class="app-textarea flex-grow-1"
+    :class="$attrs.class"
+  >
+    <VLabel
+      v-if="label"
+      :for="elementId"
+      class="mb-2 text-body-2 text-high-emphasis"
+      :text="langLabel"
+    />
+    <VTextarea
+      v-bind="{
+  ...$attrs,
+  class: null,
+  label: void 0,
+  variant: 'outlined',
+  id: elementId
+}"
+      :placeholder="placeholder"
+      class="w-100"
+    >
+      <template
+        v-for="(_, name) in $slots"
+        #[name]="slotProps"
+      >
+        <slot
+          :name="name"
+          v-bind="slotProps || {}"
+        />
+      </template>
+    </VTextarea>
+  </div>
+</template>
+
+<style scoped>
+:deep(textarea) {
+  padding: 15px 20px !important;
+}
+</style>

package/dist/components/forms/AppTextarea.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_15: string | number, __VLS_16: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_15>]?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/forms/AttachmentCropperInput.d.vue.ts

@@ -0,0 +1,18 @@
+import type { Attachment } from '../../types';
+type __VLS_Props = {
+    validTypes?: string[];
+    rules?: ((value: unknown) => typeof value | string)[];
+    multiple?: boolean;
+    modelValue: Attachment | Attachment[] | null;
+    sizeInMB?: number;
+    showPreview?: boolean;
+    cropWidth?: number;
+    cropHeight?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:model-value": (value: Attachment | Attachment[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:model-value"?: ((value: Attachment | Attachment[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;