@vc-shell/framework 1.0.50 → 1.0.51

package/ui/components/atoms/vc-image/vc-image.vue

@@ -5,8 +5,7 @@
         `vc-image_${aspect}`,
         {
           'tw-rounded-full tw-pb-[var(--image-padding-bottom-1x1)]': rounded,
-          'tw-rounded-[3px] tw-border tw-border-solid tw-border-[color:#efefef]':
-            bordered,
+          'tw-rounded-[3px] tw-border tw-border-solid tw-border-[color:#efefef]': bordered,
           'tw-cursor-pointer': clickable,
         },
         'tw-relative',
@@ -26,15 +25,42 @@
 
 <script lang="ts" setup>
 import { computed } from "vue";
-import { VcImageProps } from "@/ui/components/atoms/vc-image/vc-image-model";
-
-const props = withDefaults(defineProps<VcImageProps>(), {
-  aspect: "1x1",
-  rounded: false,
-  bordered: false,
-  clickable: false,
-  size: "auto",
-  background: "cover",
+
+const props = defineProps({
+  aspect: {
+    type: String,
+    default: "1x1",
+  },
+
+  rounded: {
+    type: Boolean,
+    default: false,
+  },
+
+  bordered: {
+    type: Boolean,
+    default: false,
+  },
+
+  clickable: {
+    type: Boolean,
+    default: false,
+  },
+
+  src: {
+    type: String,
+    default: undefined,
+  },
+
+  size: {
+    type: String,
+    default: "auto",
+  },
+
+  background: {
+    type: String,
+    default: "cover",
+  },
 });
 
 const emit = defineEmits(["click"]);

package/ui/components/atoms/vc-info-row/vc-info-row.vue

@@ -17,12 +17,26 @@
 
 <script lang="ts" setup>
 import { VcLabel, VcRow, VcCol } from "@/ui/components";
-import { VcInfoRowProps } from "@/ui/components/atoms/vc-info-row/vc-info-row-model";
 
-withDefaults(defineProps<VcInfoRowProps>(), {
-  label: "",
-  value: "",
-  tooltip: "",
-  type: "default",
+defineProps({
+  label: {
+    type: String,
+    default: "",
+  },
+
+  value: {
+    type: String,
+    default: "",
+  },
+
+  tooltip: {
+    type: String,
+    default: "",
+  },
+
+  type: {
+    type: String,
+    default: "default",
+  },
 });
 </script>

package/ui/components/atoms/vc-label/vc-label.vue

@@ -1,9 +1,7 @@
 <template>
-  <div class="tw-flex tw-flex-nowrap tw-font-bold">
+  <div class= "tw-flex tw-flex-nowrap tw-font-bold">
     <span><slot></slot></span>
-    <span
-      v-if="required"
-      class="tw-text-[color:var(--label-required-color)] tw-ml-1"
+    <span v-if="required" class="tw-text-[color:var(--label-required-color)] tw-ml-1"
       >*</span
     >
     <span v-if="$slots['tooltip']" class="tw-grow tw-basis-0 tw-ml-1">
@@ -27,11 +25,17 @@
 <script lang="ts" setup>
 import { VcIcon } from "@/ui/components";
 import { ref } from "vue";
-import { VcLabelProps } from "@/ui/components/atoms/vc-label/vc-label-model";
 
-withDefaults(defineProps<VcLabelProps>(), {
-  required: false,
-  tooltipIcon: "fas fa-info-circle",
+defineProps({
+  required: {
+    type: Boolean,
+    default: false,
+  },
+
+  tooltipIcon: {
+    type: String,
+    default: "fas fa-info-circle",
+  },
 });
 
 const tooltipVisible = ref(false);

package/ui/components/atoms/vc-link/vc-link.vue

@@ -13,11 +13,16 @@
 </template>
 
 <script lang="ts" setup>
-import { VcLinkProps } from "@/ui/components/atoms/vc-link/vc-link-model";
+const props = defineProps({
+  active: {
+    type: Boolean,
+    default: false,
+  },
 
-const props = withDefaults(defineProps<VcLinkProps>(), {
-  active: false,
-  disabled: false,
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 const emit = defineEmits(["click"]);
 function onClick(): void {

package/ui/components/atoms/vc-loading/vc-loading.vue

@@ -24,9 +24,10 @@
 </template>
 
 <script lang="ts" setup>
-import { VcLoadingProps } from "@/ui/components/atoms/vc-loading/vc-loading-model";
-
-withDefaults(defineProps<VcLoadingProps>(), {
-  active: false,
+defineProps({
+  active: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>

package/ui/components/atoms/vc-progress/vc-progress.vue

@@ -6,18 +6,24 @@
     ]"
   >
     <div
-      class="vc-progress__value tw-bg-[color:var(--progressbar-foreground-color)] tw-transition tw-duration-200 tw-h-full"
+      class="vc-progress__value tw-bg-[color:var(--progressbar-foreground-color)] tw-transition  tw-duration-200 tw-h-full"
       :style="`width: ${value}%`"
     ></div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { VcProgressProps } from "@/ui/components/atoms/vc-progress/vc-progress-model";
+defineProps({
+  value: {
+    type: Number,
+    default: 0,
+  },
 
-withDefaults(defineProps<VcProgressProps>(), {
-  value: 0,
-  variant: "default",
+  variant: {
+    type: String,
+    default: "default",
+    enum: ["default", "striped"],
+  },
 });
 </script>
 

package/ui/components/atoms/vc-status/vc-status.vue

@@ -12,12 +12,22 @@
 </template>
 
 <script lang="ts" setup>
-import { VcStatusProps } from "@/ui/components/atoms/vc-status/vc-status-model";
+defineProps({
+  variant: {
+    type: String,
+    default: "info",
+    enum: ["info", "warning", "danger", "success", "light-danger"],
+  },
 
-withDefaults(defineProps<VcStatusProps>(), {
-  variant: "info",
-  outline: true,
-  extend: false,
+  outline: {
+    type: Boolean,
+    default: true,
+  },
+
+  extend: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>
 

package/ui/components/atoms/vc-status-icon/vc-status-icon.vue

@@ -1,25 +1,21 @@
 <template>
   <div>
     <template v-if="status">
-      <VcIcon
-        icon="fas fa-check-circle"
-        class="tw-text-[color:#87b563]"
-      ></VcIcon>
+      <VcIcon icon="fas fa-check-circle" class="tw-text-[color:#87b563]"></VcIcon>
     </template>
     <template v-else>
-      <VcIcon
-        icon="fas fa-times-circle"
-        class="tw-text-[color:#bdd1df]"
-      ></VcIcon>
+      <VcIcon icon="fas fa-times-circle" class="tw-text-[color:#bdd1df]"></VcIcon>
     </template>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { VcIcon } from "@/ui/components";
-import { VcStatusIconProps } from "@/ui/components/atoms/vc-status-icon/vc-status-icon-model";
 
-withDefaults(defineProps<VcStatusIconProps>(), {
-  status: false,
+defineProps({
+  status: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>

package/ui/components/atoms/vc-switch/vc-switch.vue

@@ -23,13 +23,31 @@
 </template>
 
 <script lang="ts" setup>
-import { VcSwitchProps } from "@/ui/components/atoms/vc-switch/vc-switch-model";
+defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
 
-withDefaults(defineProps<VcSwitchProps>(), {
-  modelValue: false,
-  disabled: false,
-  tooltip: "",
-  required: false,
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+
+  tooltip: {
+    type: String,
+    default: "",
+  },
+
+  required: {
+    type: Boolean,
+    default: false,
+  },
+
+  label: {
+    type: String,
+    default: undefined,
+  },
 });
 
 const emit = defineEmits(["update:modelValue"]);

package/ui/components/atoms/vc-widget/vc-widget.vue

@@ -16,10 +16,26 @@
 </template>
 
 <script lang="ts" setup>
-import { VcWidgetProps } from "@/ui/components/atoms/vc-widget/vc-widget-model";
+const props = defineProps({
+  icon: {
+    type: String,
+    default: undefined,
+  },
 
-const props = withDefaults(defineProps<VcWidgetProps>(), {
-  disabled: false,
+  title: {
+    type: String,
+    default: undefined,
+  },
+
+  value: {
+    type: [String, Number],
+    default: undefined,
+  },
+
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 const emit = defineEmits(["click"]);
 

package/ui/components/index.ts

@@ -1,43 +1,43 @@
 /* Atoms */
 export { VcBadge } from "./atoms/vc-badge";
-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";
+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";
 
 /* Molecules */
-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 { 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 { VcInput } from "./molecules/vc-input";
 export { VcInputCurrency } from "./molecules/vc-input-currency";
-export { VcNotification } from "./molecules/vc-notification";
-export { VcPagination } from "./molecules/vc-pagination";
-export { VcRating } from "./molecules/vc-rating";
+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 { VcSelect } from "./molecules/vc-select";
-export { VcSlider } from "./molecules/vc-slider";
-export { VcTextarea } from "./molecules/vc-textarea";
+export { default as VcSlider } from "./molecules/vc-slider/vc-slider.vue";
+export { default as VcTextarea } from "./molecules/vc-textarea/vc-textarea.vue";
 
 /* Organisms */
-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";
+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";

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

@@ -11,9 +11,18 @@
 
 <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";
 
-withDefaults(defineProps<VcBreadcrumbsProps>(), {
+export interface Props {
+  items: {
+    current: boolean;
+    icon: string;
+    title: string;
+    clickHandler: () => void;
+    id: string;
+  }[];
+}
+
+withDefaults(defineProps<Props>(), {
   items: () => [],
 });
 </script>

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,10 +16,11 @@
 
     <!-- Editor field -->
     <v-ace-editor
-      class="tw-border tw-border-solid tw-border-[color:var(--editor-border-color)] tw-rounded-[var(--editor-border-radius)] tw-h-[200px]"
+      class="tw-border tw-border-solid tw-border-[color:var(--editor-border-color)] tw-rounded-[var(--editor-border-radius)]"
       v-model:value="content"
       lang="html"
       theme="chrome"
+      style="height: 200px"
       @input="onInput"
     />
     <slot v-if="errorMessage" name="error">
@@ -34,27 +35,63 @@
 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";
-import { VcEditorProps } from "@/ui/components/molecules/vc-editor/vc-editor-model";
-
-const props = withDefaults(defineProps<VcEditorProps>(), {
-  placeholder: "",
-  modelValue: null,
-  required: false,
-  name: "Field",
+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
+  }
 });
 
 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/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,9 +18,7 @@
         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>
@@ -47,14 +45,37 @@
 <script lang="ts" setup>
 import { getCurrentInstance, ref, unref } from "vue";
 import { useField } from "vee-validate";
-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 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",
+  },
 });
 
 const emit = defineEmits(["upload"]);

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

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

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

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

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

@@ -42,9 +42,17 @@
 
 <script lang="ts" setup>
 import { VcIcon, VcLabel } from "@/ui/components";
-import { VcRatingProps } from "@/ui/components/molecules/vc-rating/vc-rating-model";
 
-withDefaults(defineProps<VcRatingProps>(), { max: 5, variant: "stars" });
+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" });
 </script>
 
 <style lang="scss">