@vc-shell/framework 1.0.49 → 1.0.50

package/ui/components/index.ts

@@ -1,43 +1,43 @@
 /* Atoms */
 export { VcBadge } from "./atoms/vc-badge";
-export { default as VcButton } from "./atoms/vc-button/vc-button.vue";
-export { default as VcCard } from "./atoms/vc-card/vc-card.vue";
-export { default as VcCheckbox } from "./atoms/vc-checkbox/vc-checkbox.vue";
-export { default as VcCol } from "./atoms/vc-col/vc-col.vue";
-export { default as VcContainer } from "./atoms/vc-container/vc-container.vue";
-export { default as VcHint } from "./atoms/vc-hint/vc-hint.vue";
-export { default as VcIcon } from "./atoms/vc-icon/vc-icon.vue";
-export { default as VcInfoRow } from "./atoms/vc-info-row/vc-info-row.vue";
-export { default as VcImage } from "./atoms/vc-image/vc-image.vue";
-export { default as VcLabel } from "./atoms/vc-label/vc-label.vue";
-export { default as VcLink } from "./atoms/vc-link/vc-link.vue";
-export { default as VcLoading } from "./atoms/vc-loading/vc-loading.vue";
-export { default as VcProgress } from "./atoms/vc-progress/vc-progress.vue";
-export { default as VcRow } from "./atoms/vc-row/vc-row.vue";
-export { default as VcStatus } from "./atoms/vc-status/vc-status.vue";
-export { default as VcStatusIcon } from "./atoms/vc-status-icon/vc-status-icon.vue";
-export { default as VcSwitch } from "./atoms/vc-switch/vc-switch.vue";
-export { default as VcWidget } from "./atoms/vc-widget/vc-widget.vue";
+export {VcButton } from "./atoms/vc-button";
+export { VcCard } from "./atoms/vc-card";
+export { VcCheckbox } from "./atoms/vc-checkbox";
+export { VcCol } from "./atoms/vc-col";
+export { VcContainer } from "./atoms/vc-container";
+export { VcHint } from "./atoms/vc-hint";
+export { VcIcon } from "./atoms/vc-icon";
+export { VcInfoRow } from "./atoms/vc-info-row";
+export { VcImage } from "./atoms/vc-image";
+export { VcLabel } from "./atoms/vc-label";
+export { VcLink } from "./atoms/vc-link";
+export { VcLoading } from "./atoms/vc-loading";
+export { VcProgress } from "./atoms/vc-progress";
+export { VcRow } from "./atoms/vc-row";
+export { VcStatus } from "./atoms/vc-status";
+export { VcStatusIcon } from "./atoms/vc-status-icon";
+export { VcSwitch } from "./atoms/vc-switch";
+export { VcWidget } from "./atoms/vc-widget";
 
 /* Molecules */
-export { default as VcBreadcrumbs } from "./molecules/vc-breadcrumbs/vc-breadcrumbs.vue";
-export { default as VcEditor } from "./molecules/vc-editor/vc-editor.vue";
-export { default as VcForm } from "./molecules/vc-form/vc-form.vue";
-export { default as VcFileUpload } from "./molecules/vc-file-upload/vc-file-upload.vue";
+export { VcBreadcrumbs } from "./molecules/vc-breadcrumbs";
+export { VcEditor } from "./molecules/vc-editor";
+export { VcForm } from "./molecules/vc-form";
+export { VcFileUpload } from "./molecules/vc-file-upload";
 export { VcInput } from "./molecules/vc-input";
 export { VcInputCurrency } from "./molecules/vc-input-currency";
-export { default as VcNotification } from "./molecules/vc-notification/vc-notification.vue";
-export { default as VcPagination } from "./molecules/vc-pagination/vc-pagination.vue";
-export { default as VcRating } from "./molecules/vc-rating/vc-rating.vue";
+export { VcNotification } from "./molecules/vc-notification";
+export { VcPagination } from "./molecules/vc-pagination";
+export { VcRating } from "./molecules/vc-rating";
 export { VcSelect } from "./molecules/vc-select";
-export { default as VcSlider } from "./molecules/vc-slider/vc-slider.vue";
-export { default as VcTextarea } from "./molecules/vc-textarea/vc-textarea.vue";
+export { VcSlider } from "./molecules/vc-slider";
+export { VcTextarea } from "./molecules/vc-textarea";
 
 /* Organisms */
-export { default as VcApp } from "./organisms/vc-app/vc-app.vue";
-export { default as VcBlade } from "./organisms/vc-blade/vc-blade.vue";
-export { default as VcDynamicProperty } from "./organisms/vc-dynamic-property/vc-dynamic-property.vue";
-export { default as VcGallery } from "./organisms/vc-gallery/vc-gallery.vue";
-export { default as VcLoginForm } from "./organisms/vc-login-form/vc-login-form.vue";
-export { default as VcPopup } from "./organisms/vc-popup/vc-popup.vue";
-export { default as VcTable } from "./organisms/vc-table/vc-table.vue";
+export { VcApp } from "./organisms/vc-app";
+export { VcBlade } from "./organisms/vc-blade";
+export { VcDynamicProperty } from "./organisms/vc-dynamic-property";
+export { VcGallery } from "./organisms/vc-gallery";
+export { VcLoginForm } from "./organisms/vc-login-form";
+export { VcPopup } from "./organisms/vc-popup";
+export { VcTable } from "./organisms/vc-table";

package/ui/components/molecules/vc-breadcrumbs/index.ts

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcBreadcrumbsProps } from "./vc-breadcrumbs-model";
+import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import Breadcrumbs from "./vc-breadcrumbs.vue";
+export const VcBreadcrumbs: ComponentConstructor<
+  ComponentPublicInstance<VcBreadcrumbsProps>
+> = Breadcrumbs;

package/ui/components/molecules/vc-breadcrumbs/vc-breadcrumbs-model.ts

@@ -0,0 +1,15 @@
+import { VNode } from "vue";
+
+export interface VcBreadcrumbsProps {
+  items?: {
+    current: boolean;
+    icon: string;
+    title: string;
+    clickHandler: () => void;
+    id: string;
+  }[];
+}
+
+export interface VcBreadcrumbsSlots {
+  default: () => VNode[];
+}

package/ui/components/molecules/vc-breadcrumbs/vc-breadcrumbs.vue

@@ -11,18 +11,9 @@
 
 <script lang="ts" setup>
 import VcBreadcrumbsItem from "./_internal/vc-breadcrumbs-item/vc-breadcrumbs-item.vue";
+import { VcBreadcrumbsProps } from "@/ui/components/molecules/vc-breadcrumbs/vc-breadcrumbs-model";
 
-export interface Props {
-  items: {
-    current: boolean;
-    icon: string;
-    title: string;
-    clickHandler: () => void;
-    id: string;
-  }[];
-}
-
-withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<VcBreadcrumbsProps>(), {
   items: () => [],
 });
 </script>

package/ui/components/molecules/vc-editor/index.ts

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcEditorProps } from "./vc-editor-model";
+import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import Editor from "./vc-editor.vue";
+export const VcEditor: ComponentConstructor<
+  ComponentPublicInstance<VcEditorProps>
+> = Editor;

package/ui/components/molecules/vc-editor/vc-editor-model.ts

@@ -0,0 +1,17 @@
+import { VNode } from "vue";
+
+export interface VcEditorProps {
+  placeholder?: string | undefined;
+  modelValue?: string | number | Date | undefined;
+  required?: boolean | undefined;
+  disabled?: boolean | undefined;
+  label?: string | undefined;
+  tooltip?: string | undefined;
+  name?: string | undefined;
+  errorMessage?: string | undefined;
+  "onUpdate:modelValue"?: (value: string) => void;
+}
+
+export interface VcEditorSlots {
+  error: () => VNode[];
+}

package/ui/components/molecules/vc-editor/vc-editor.vue

@@ -4,7 +4,7 @@
     :class="[
       {
         'vc-editor_error': errorMessage,
-        'vc-editor_disabled': disabled
+        'vc-editor_disabled': disabled,
       },
     ]"
   >
@@ -16,11 +16,10 @@
 
     <!-- Editor field -->
     <v-ace-editor
-      class="tw-border tw-border-solid tw-border-[color:var(--editor-border-color)] tw-rounded-[var(--editor-border-radius)]"
+      class="tw-border tw-border-solid tw-border-[color:var(--editor-border-color)] tw-rounded-[var(--editor-border-radius)] tw-h-[200px]"
       v-model:value="content"
       lang="html"
       theme="chrome"
-      style="height: 200px"
       @input="onInput"
     />
     <slot v-if="errorMessage" name="error">
@@ -35,63 +34,27 @@
 import { VAceEditor } from "vue3-ace-editor";
 import "ace-builds/src-noconflict/mode-html";
 import "ace-builds/src-noconflict/theme-chrome";
-import {ref, unref, watch} from "vue";
-
-const props = defineProps({
-  placeholder: {
-    type: String,
-    default: "",
-  },
-
-  modelValue: {
-    type: [String, Number, Date],
-    default: null,
-  },
-
-  required: {
-    type: Boolean,
-    default: false,
-  },
-
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-
-  label: {
-    type: String,
-    default: undefined,
-  },
-
-  tooltip: {
-    type: String,
-    default: undefined,
-  },
-
-  name: {
-    type: String,
-    default: "Field",
-  },
-
-  errorMessage: {
-    type: String,
-    default: undefined
-  }
+import { ref, unref, watch } from "vue";
+import { VcEditorProps } from "@/ui/components/molecules/vc-editor/vc-editor-model";
+
+const props = withDefaults(defineProps<VcEditorProps>(), {
+  placeholder: "",
+  modelValue: null,
+  required: false,
+  name: "Field",
 });
 
 const emit = defineEmits(["update:modelValue"]);
 const content = ref();
-let initialValue = unref(props.modelValue);
 
 watch(
-    () => props.modelValue,
-    (value) => {
-        let init = unref(value);
-        emit("update:modelValue", init);
-    }
+  () => props.modelValue,
+  (value) => {
+    let init = unref(value);
+    emit("update:modelValue", init);
+  }
 );
 
-// Handle input event to propertly validate value and emit changes
 function onInput() {
   emit("update:modelValue", content.value);
 }

package/ui/components/molecules/vc-file-upload/index.ts

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcFileUploadProps } from "./vc-file-upload-model";
+import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import FileUpload from "./vc-file-upload.vue";
+export const VcFileUpload: ComponentConstructor<
+  ComponentPublicInstance<VcFileUploadProps>
+> = FileUpload;

package/ui/components/molecules/vc-file-upload/vc-file-upload-model.ts

@@ -0,0 +1,15 @@
+import { VNode } from "vue";
+
+export interface VcFileUploadProps {
+  variant?: "gallery" | "file-upload" | undefined;
+  loading?: boolean | undefined;
+  accept?: string | undefined;
+  multiple?: boolean | undefined;
+  rules?: string | Record<string, unknown> | undefined;
+  name?: string | undefined;
+  onUpload?: (files: FileList) => void;
+}
+
+export interface VcFileUploadSlots {
+  error: () => VNode[];
+}

package/ui/components/molecules/vc-file-upload/vc-file-upload.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class= "tw-flex tw-flex-col tw-flex-1">
+  <div class="tw-flex tw-flex-col tw-flex-1">
     <div
       class="vc-file-upload tw-relative tw-h-[155px] tw-box-border tw-border tw-border-dashed tw-border-[#c8dbea] tw-rounded-[6px] tw-p-2 tw-p-4 tw-flex tw-flex-col tw-items-center tw-justify-center"
       :class="`vc-file-upload_${variant}`"
@@ -18,7 +18,9 @@
         size="xxl"
       ></VcIcon>
 
-      <div class="tw-text-[#9db0be] tw-text-center tw-text-lg tw-leading-lg tw-mt-4">
+      <div
+        class="tw-text-[#9db0be] tw-text-center tw-text-lg tw-leading-lg tw-mt-4"
+      >
         <span>Drag and drop file here or</span>&nbsp;
         <br />
         <VcLink @click="toggleUploader">browse your files</VcLink>
@@ -45,37 +47,14 @@
 <script lang="ts" setup>
 import { getCurrentInstance, ref, unref } from "vue";
 import { useField } from "vee-validate";
-
-const props = defineProps({
-  variant: {
-    type: String,
-    enum: ["gallery", "file-upload"],
-    default: "gallery",
-  },
-
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-
-  accept: {
-    type: String,
-    default: ".jpg, .png, .jpeg",
-  },
-
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-
-  rules: {
-    type: [String, Object],
-  },
-
-  name: {
-    type: String,
-    default: "Gallery",
-  },
+import { VcFileUploadProps } from "@/ui/components/molecules/vc-file-upload/vc-file-upload-model";
+
+const props = withDefaults(defineProps<VcFileUploadProps>(), {
+  variant: "gallery",
+  loading: false,
+  accept: ".jpg, .png, .jpeg",
+  multiple: false,
+  name: "Gallery",
 });
 
 const emit = defineEmits(["upload"]);

package/ui/components/molecules/vc-form/index.ts

@@ -0,0 +1,2 @@
+import Form from "./vc-form.vue";
+export const VcForm = Form;

package/ui/components/molecules/vc-notification/index.ts

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcNotificationProps } from "./vc-notification-model";
+import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import Notification from "./vc-notification.vue";
+export const VcNotification: ComponentConstructor<
+  ComponentPublicInstance<VcNotificationProps>
+> = Notification;

package/ui/components/molecules/vc-notification/vc-notification-model.ts

@@ -0,0 +1,11 @@
+import { VNode } from "vue";
+
+export interface VcNotificationProps {
+  timeout?: number | undefined;
+  onDismiss?: () => void;
+  onExpired?: () => void;
+}
+
+export interface VcNotificationSlots {
+  default: () => VNode[];
+}

package/ui/components/molecules/vc-notification/vc-notification.vue

@@ -18,17 +18,10 @@
 
 <script lang="ts" setup>
 import { VcIcon } from "@/ui/components";
+import { VcNotificationProps } from "@/ui/components/molecules/vc-notification/vc-notification-model";
 
-const props = defineProps({
-  variant: {
-    type: String,
-    default: "info",
-  },
-
-  timeout: {
-    type: Number,
-    default: 0,
-  },
+const props = withDefaults(defineProps<VcNotificationProps>(), {
+  timeout: 0,
 });
 
 const emit = defineEmits(["dismiss", "expired"]);

package/ui/components/molecules/vc-pagination/index.ts

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcPaginationProps } from "./vc-pagination-model";
+import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import Pagination from "./vc-pagination.vue";
+export const VcPagination: ComponentConstructor<
+  ComponentPublicInstance<VcPaginationProps>
+> = Pagination;

package/ui/components/molecules/vc-pagination/vc-pagination-model.ts

@@ -0,0 +1,12 @@
+import { VNode } from "vue";
+
+export interface VcPaginationProps {
+  expanded?: boolean | undefined;
+  pages?: number | undefined;
+  currentPage?: number | undefined;
+  onItemClick?: (pages: number) => void;
+}
+
+export interface VcPaginationSlots {
+  default: () => VNode[];
+}

package/ui/components/molecules/vc-pagination/vc-pagination.vue

@@ -93,22 +93,12 @@
 
 <script lang="ts" setup>
 import { VcIcon } from "@/ui/components";
+import { VcPaginationProps } from "@/ui/components/molecules/vc-pagination/vc-pagination-model";
 
-defineProps({
-  expanded: {
-    type: Boolean,
-    default: false,
-  },
-
-  pages: {
-    type: Number,
-    default: 1,
-  },
-
-  currentPage: {
-    type: Number,
-    default: 1,
-  },
+withDefaults(defineProps<VcPaginationProps>(), {
+  expanded: false,
+  pages: 1,
+  currentPage: 1,
 });
 
 defineEmits(["itemClick"]);
@@ -119,7 +109,7 @@ defineEmits(["itemClick"]);
   --pagination-item-width: 30px;
   --pagination-item-height: 30px;
   --pagination-item-color: #000000;
-  --pagination-item-color-hover:tw- #000000;
+  --pagination-item-color-hover: #000000;
   --pagination-item-color-current: #ffffff;
   --pagination-item-color-disabled: #9c9c9c;
   --pagination-item-background-color: #ffffff;

package/ui/components/molecules/vc-rating/index.ts

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcRatingProps } from "./vc-rating-model";
+import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import Rating from "./vc-rating.vue";
+export const VcRating: ComponentConstructor<
+    ComponentPublicInstance<VcRatingProps>
+> = Rating;

package/ui/components/molecules/vc-rating/vc-rating-model.ts

@@ -0,0 +1,14 @@
+import { VNode } from "vue";
+
+export interface VcRatingProps {
+  label?: string;
+  placeholder?: string;
+  tooltip?: string;
+  rating: number | undefined;
+  max?: number;
+  variant?: "stars" | "star-and-text" | "text";
+}
+
+export interface VcRatingSlots {
+  details: () => VNode[];
+}

package/ui/components/molecules/vc-rating/vc-rating.vue

@@ -42,17 +42,9 @@
 
 <script lang="ts" setup>
 import { VcIcon, VcLabel } from "@/ui/components";
+import { VcRatingProps } from "@/ui/components/molecules/vc-rating/vc-rating-model";
 
-export interface Props {
-  label?: string;
-  placeholder?: string;
-  tooltip?: string;
-  rating: number | undefined;
-  max?: number;
-  variant?: "stars" | "star-and-text" | "text";
-}
-
-withDefaults(defineProps<Props>(), { max: 5, variant: "stars" });
+withDefaults(defineProps<VcRatingProps>(), { max: 5, variant: "stars" });
 </script>
 
 <style lang="scss">

package/ui/components/molecules/vc-slider/index.ts

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcSliderProps } from "./vc-slider-model";
+import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import Slider from "./vc-slider.vue";
+export const VcSlider: ComponentConstructor<
+  ComponentPublicInstance<VcSliderProps>
+> = Slider;

package/ui/components/molecules/vc-slider/vc-slider-model.ts

@@ -0,0 +1,15 @@
+import {VNode} from "vue";
+
+export interface VcSliderProps {
+    slides?: Record<string, unknown>[] | any[]
+    navigation?: boolean | undefined
+    overflow?: boolean | undefined
+    slidesPerView?: string | 'auto' | undefined
+    spaceBetweenSlides?: number | undefined
+}
+
+export interface VcSliderSlots {
+    default: (slide: Record<string, unknown>[] | any[]) => VNode[]
+    prevBtn: () => VNode[]
+    nextBtn: () => VNode[]
+}

package/ui/components/molecules/vc-slider/vc-slider.vue

@@ -48,33 +48,15 @@ import SwiperCore, { Navigation } from "swiper";
 import "swiper/swiper-bundle.min.css";
 import "swiper/swiper.min.css";
 import "swiper/components/navigation/navigation.min.css";
+import { VcSliderProps } from "@/ui/components/molecules/vc-slider/vc-slider-model";
 SwiperCore.use([Navigation]);
 
-defineProps({
-  slides: {
-    type: Array,
-    default: () => [],
-  },
-
-  navigation: {
-    type: Boolean,
-    default: false,
-  },
-
-  overflow: {
-    type: Boolean,
-    default: false,
-  },
-
-  slidesPerView: {
-    type: String,
-    default: "auto",
-  },
-
-  spaceBetweenSlides: {
-    type: Number,
-    default: 10,
-  },
+withDefaults(defineProps<VcSliderProps>(), {
+  slides: () => [],
+  navigation: false,
+  overflow: false,
+  slidesPerView: "auto",
+  spaceBetweenSlides: 10,
 });
 
 const buttonsList = computed(() => ({

package/ui/components/molecules/vc-textarea/index.ts

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcTextareaProps } from "./vc-textarea-model";
+import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import Textarea from "./vc-textarea.vue";
+export const VcTextarea: ComponentConstructor<
+  ComponentPublicInstance<VcTextareaProps>
+> = Textarea;

package/ui/components/molecules/vc-textarea/vc-textarea-model.ts

@@ -0,0 +1,18 @@
+import { VNode } from "vue";
+
+export interface VcTextareaProps {
+  placeholder?: string | undefined;
+  modelValue: string | undefined;
+  required?: boolean | undefined;
+  disabled?: boolean | undefined;
+  label?: string | undefined;
+  tooltip?: string | undefined;
+  name?: string | undefined;
+  maxchars?: string | undefined;
+  errorMessage?: string | undefined;
+  "onUpdate:modelValue"?: (value: string) => void;
+}
+
+export interface VcTextareaSlots {
+  error: () => VNode[];
+}

package/ui/components/molecules/vc-textarea/vc-textarea.vue

@@ -7,7 +7,7 @@
     }"
   >
     <!-- Textarea label -->
-    <VcLabel v-if="label" class="tw-mb-2" :required="isRequired">
+    <VcLabel v-if="label" class="tw-mb-2" :required="required">
       <span>{{ label }}</span>
       <template v-if="tooltip" v-slot:tooltip>
         <span v-html="tooltip"></span>
@@ -37,52 +37,14 @@
 <script lang="ts" setup>
 import { watch } from "vue";
 import { VcLabel } from "@/ui/components";
-
-const props = defineProps({
-  placeholder: {
-    type: String,
-    default: "",
-  },
-
-  modelValue: {
-    type: String,
-    default: undefined,
-  },
-
-  isRequired: {
-    type: Boolean,
-    default: false,
-  },
-
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-
-  label: {
-    type: String,
-    default: undefined,
-  },
-
-  tooltip: {
-    type: String,
-    default: undefined,
-  },
-
-  name: {
-    type: String,
-    default: "Field",
-  },
-
-  maxchars: {
-    type: String,
-    default: "1024",
-  },
-
-  errorMessage: {
-    type: String,
-    default: undefined,
-  },
+import { VcTextareaProps } from "@/ui/components/molecules/vc-textarea/vc-textarea-model";
+
+const props = withDefaults(defineProps<VcTextareaProps>(), {
+  placeholder: "",
+  required: false,
+  disabled: false,
+  name: "Field",
+  maxchars: "1024",
 });
 
 const emit = defineEmits(["update:modelValue"]);