@winchsa/ui 0.1.0

package/dist/components/core/AppDrawerHeaderSection.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { VSpacer } from "vuetify/components";
+import IconBtn from "../IconBtn.vue";
+defineProps({
+  title: { type: String, required: true }
+});
+defineEmits(["cancel"]);
+</script>
+
+<template>
+  <div class="px-5 py-3 d-flex align-center">
+    <h3 class="font-weight-medium text-xl">
+      {{ title }}
+    </h3>
+    <VSpacer />
+
+    <slot name="beforeClose" />
+
+    <IconBtn icon="tabler-x" @click="$emit('cancel', $event)" />
+  </div>
+</template>

package/dist/components/core/AppDrawerHeaderSection.vue.d.ts

@@ -0,0 +1,30 @@
+import { VSpacer } from 'vuetify/components';
+import IconBtn from '../IconBtn.vue';
+type __VLS_Props = {
+    title: string;
+};
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_5: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    beforeClose?: (props: typeof __VLS_5) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    VSpacer: typeof VSpacer;
+    IconBtn: typeof IconBtn;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    cancel: (el: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: ((el: MouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    cancel: (el: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: ((el: MouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, 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/components/core/AppSearchHeader.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { VCardText, VIcon } from "vuetify/components";
+import AppSearchHeaderBg from "../../images/avatar.png";
+import AppTextField from "./app-form-elements/AppTextField.vue";
+import AppCard from "./cards/AppCard.vue";
+defineProps({
+  title: { type: String, required: false },
+  subtitle: { type: String, required: false },
+  customClass: { type: String, required: false }
+});
+defineOptions({
+  inheritAttrs: false
+});
+</script>
+
+<template>
+  <!--  Search Banner  -->
+  <AppCard
+    flat
+    class="text-center search-header"
+    :class="customClass"
+    :style="`background: url(${AppSearchHeaderBg});`"
+  >
+    <VCardText>
+      <h5 class="text-h3 font-weight-medium">
+        {{ title }}
+      </h5>
+
+      <!--  Search Input -->
+      <AppTextField
+        v-bind="$attrs"
+        placeholder="Search a question..."
+        class="search-header-input mx-auto my-3"
+        density="comfortable"
+      >
+        <template #prepend-inner>
+          <VIcon
+            icon="tabler-search"
+            size="23"
+          />
+        </template>
+      </AppTextField>
+
+      <p class="mb-0">
+        {{ subtitle }}
+      </p>
+    </VCardText>
+  </AppCard>
+</template>
+
+<style>
+.search-header {
+  padding: 4rem !important;
+  background-size: cover !important;
+}
+
+.search-header-input {
+  border-radius: 0.25rem !important;
+  border-radius: 0.375rem !important;
+  background-color: rgb(var(--v-theme-surface));
+  max-inline-size: 40.125rem !important;
+}
+.search-header-input .v-field__prepend-inner i {
+  inset-block-start: 3px !important;
+}
+
+@media (max-width: 37.5rem) {
+  .search-header {
+    padding: 1.5rem !important;
+  }
+}
+</style>

package/dist/components/core/AppSearchHeader.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    title?: string;
+    subtitle?: string;
+    customClass?: string;
+};
+declare const _default: 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>;
+export default _default;

package/dist/components/core/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/core/AppStepper.vue.d.ts

@@ -0,0 +1,25 @@
+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 _default: 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;
+}>, {
+    iconSize: string | number;
+    direction: Direction;
+    currentStep: number;
+    isActiveStepValid: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/core/CustomizerSection.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { VDivider } from "vuetify/components";
+const props = defineProps({
+  title: { type: String, required: true },
+  divider: { type: Boolean, required: false, default: true }
+});
+</script>
+
+<template>
+  <VDivider v-if="divider" />
+
+  <div class="customizer-section">
+    <p class="text-caption">
+      {{ props.title }}
+    </p>
+
+    <slot />
+  </div>
+</template>

package/dist/components/core/CustomizerSection.vue.d.ts

@@ -0,0 +1,25 @@
+import { VDivider } from 'vuetify/components';
+type __VLS_Props = {
+    title: string;
+    divider?: boolean;
+};
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_5: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_5) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    VDivider: typeof VDivider;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    divider: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    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/components/core/DialogCloseBtn.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { VIcon } from "vuetify/components";
+import IconBtn from "../IconBtn.vue";
+defineProps({
+  icon: { type: String, required: false, default: "tabler-x" },
+  iconSize: { type: String, required: false, default: "22" }
+});
+</script>
+
+<template>
+  <IconBtn
+    variant="elevated"
+    class="v-dialog-close-btn"
+  >
+    <VIcon
+      :icon="icon"
+      :size="iconSize"
+    />
+  </IconBtn>
+</template>

package/dist/components/core/DialogCloseBtn.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    icon?: string;
+    iconSize?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    icon: string;
+    iconSize: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/core/MoreBtn.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { VIcon, VList, VMenu } from "vuetify/components";
+import IconBtn from "../IconBtn.vue";
+defineProps({
+  menuList: { type: Array, required: false },
+  itemProps: { type: Boolean, required: false }
+});
+</script>
+
+<template>
+  <IconBtn
+    density="compact"
+  >
+    <VIcon icon="tabler-dots-vertical" color="text-on-background" />
+
+    <VMenu
+      activator="parent"
+    >
+      <slot>
+        <VList
+          :items="menuList"
+          :item-props="itemProps"
+        />
+      </slot>
+    </VMenu>
+  </IconBtn>
+</template>

package/dist/components/core/MoreBtn.vue.d.ts

@@ -0,0 +1,25 @@
+import { VIcon, VList, VMenu } from 'vuetify/components';
+import IconBtn from '../IconBtn.vue';
+type __VLS_Props = {
+    menuList?: unknown[];
+    itemProps?: boolean;
+};
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_13: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_13) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    VIcon: typeof VIcon;
+    VList: typeof VList;
+    VMenu: typeof VMenu;
+    IconBtn: typeof IconBtn;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/components/core/ScrollToTop.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { useWindowScroll } from "@vueuse/core";
+import { VScaleTransition, VBtn, VIcon } from "vuetify/components";
+const { y } = useWindowScroll();
+const scrollToTop = () => {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth"
+  });
+};
+</script>
+
+<template>
+  <VScaleTransition
+    style="transform-origin: center"
+    class="scroll-to-top d-print-none"
+  >
+    <VBtn
+      v-show="y > 200"
+      icon
+      density="comfortable"
+      @click="scrollToTop"
+    >
+      <VIcon
+        size="22"
+        icon="tabler-arrow-up"
+      />
+    </VBtn>
+  </VScaleTransition>
+</template>
+
+<style>
+.scroll-to-top {
+  position: fixed !important;
+  z-index: 999;
+  inset-block-end: 5%;
+  inset-inline-end: 25px;
+}
+</style>

package/dist/components/core/ScrollToTop.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/components/core/app-form-elements/AppCombobox.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { computed, useAttrs } from "vue";
+import { VCombobox, VLabel } from "vuetify/components";
+import { useI18n } from "vue-i18n";
+defineOptions({
+  name: "AppCombobox",
+  inheritAttrs: false
+});
+const { t } = useI18n();
+const elementId = computed(() => {
+  const attrs = useAttrs();
+  const _elementIdToken = attrs.id || attrs.label;
+  return _elementIdToken ? `app-combobox-${_elementIdToken}-${Math.random().toString(36).slice(2, 7)}` : void 0;
+});
+const label = computed(() => useAttrs()?.label);
+const LangLabel = computed(() => label.value ? t(label.value) : "");
+const placeholder = computed(() => {
+  if (useAttrs()?.placeholder) {
+    return useAttrs()?.placeholder;
+  }
+  if (label.value) {
+    return t("inputs.placeholder", {
+      name: LangLabel.value
+    });
+  }
+  return "";
+});
+</script>
+
+<template>
+  <div
+    class="app-combobox flex-grow-1"
+    :class="$attrs.class"
+  >
+    <VLabel
+      v-if="label"
+      :for="elementId"
+      class="mb-2 text-body-2 text-high-emphasis"
+      :text="LangLabel"
+    />
+
+    <VCombobox
+      v-bind="{
+  ...$attrs,
+  class: null,
+  label: void 0,
+  variant: 'outlined',
+  id: elementId,
+  menuProps: {
+    contentClass: ['app-inner-list', 'app-combobox__content', 'v-combobox__content', $attrs.multiple !== void 0 ? 'v-list-select-multiple' : '']
+  }
+}"
+      :no-data-text="t('no_data')"
+      :placeholder="placeholder"
+    >
+      <template
+        v-for="(_, name) in $slots"
+        #[name]="slotProps"
+      >
+        <slot
+          :name="name"
+          v-bind="slotProps || {}"
+        />
+      </template>
+    </VCombobox>
+  </div>
+</template>