@vc-shell/framework 1.0.49 → 1.0.50

package/ui/components/atoms/vc-image/index.ts

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcImageProps } from "./vc-image-model";
+import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import Image from "./vc-image.vue";
+export const VcImage: ComponentConstructor<
+  ComponentPublicInstance<VcImageProps>
+> = Image;

package/ui/components/atoms/vc-image/vc-image-model.ts

@@ -0,0 +1,27 @@
+import { VNode } from "vue";
+
+export interface VcImageProps {
+  aspect?: string | undefined;
+  rounded?: boolean | undefined;
+  bordered?: boolean | undefined;
+  clickable?: boolean | undefined;
+  src?: string | undefined;
+  size?:
+    | "auto"
+    | "1x1"
+    | "16x9"
+    | "4x3"
+    | "3x2"
+    | "xs"
+    | "s"
+    | "m"
+    | "l"
+    | "xl"
+    | "xxl";
+  background?: "cover" | "contain" | "auto";
+  onClick?: () => void;
+}
+
+export interface VcImageSlots {
+  default: () => VNode[];
+}

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

@@ -5,7 +5,8 @@
         `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',
@@ -25,42 +26,15 @@
 
 <script lang="ts" setup>
 import { computed } from "vue";
-
-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",
-  },
+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 emit = defineEmits(["click"]);

package/ui/components/atoms/vc-info-row/index.ts

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcInfoRowProps } from "./vc-info-row-model";
+import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import InfoRow from "./vc-info-row.vue";
+export const VcInfoRow: ComponentConstructor<
+  ComponentPublicInstance<VcInfoRowProps>
+> = InfoRow;

package/ui/components/atoms/vc-info-row/vc-info-row-model.ts

@@ -0,0 +1,12 @@
+import { VNode } from "vue";
+
+export interface VcInfoRowProps {
+  label?: string | undefined;
+  value?: string | undefined;
+  tooltip?: string | undefined;
+  type?: "default" | "email";
+}
+
+export interface VcInfoRowSlots {
+  default: () => VNode[];
+}

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

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

package/ui/components/atoms/vc-label/index.ts

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcLabelProps } from "./vc-label-model";
+import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import Label from "./vc-label.vue";
+export const VcLabel: ComponentConstructor<
+  ComponentPublicInstance<VcLabelProps>
+> = Label;

package/ui/components/atoms/vc-label/vc-label-model.ts

@@ -0,0 +1,11 @@
+import { VNode } from "vue";
+
+export interface VcLabelProps {
+  required?: boolean | undefined;
+  tooltipIcon?: string | undefined;
+}
+
+export interface VcLabelSlots {
+  default: () => VNode[];
+  tooltip: () => VNode[];
+}

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

@@ -1,7 +1,9 @@
 <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">
@@ -25,17 +27,11 @@
 <script lang="ts" setup>
 import { VcIcon } from "@/ui/components";
 import { ref } from "vue";
+import { VcLabelProps } from "@/ui/components/atoms/vc-label/vc-label-model";
 
-defineProps({
-  required: {
-    type: Boolean,
-    default: false,
-  },
-
-  tooltipIcon: {
-    type: String,
-    default: "fas fa-info-circle",
-  },
+withDefaults(defineProps<VcLabelProps>(), {
+  required: false,
+  tooltipIcon: "fas fa-info-circle",
 });
 
 const tooltipVisible = ref(false);

package/ui/components/atoms/vc-link/index.ts

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcLinkProps } from "./vc-link-model";
+import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import Link from "./vc-link.vue";
+export const VcLink: ComponentConstructor<
+  ComponentPublicInstance<VcLinkProps>
+> = Link;

package/ui/components/atoms/vc-link/vc-link-model.ts

@@ -0,0 +1,11 @@
+import { VNode } from "vue";
+
+export interface VcLinkProps {
+  active?: boolean | undefined;
+  disabled?: boolean | undefined;
+  onClick?: () => void;
+}
+
+export interface VcLinkSlots {
+  default: () => VNode[];
+}

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

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

package/ui/components/atoms/vc-loading/index.ts

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcLoadingProps } from "./vc-loading-model";
+import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import Loading from "./vc-loading.vue";
+export const VcLoading: ComponentConstructor<
+  ComponentPublicInstance<VcLoadingProps>
+> = Loading;

package/ui/components/atoms/vc-loading/vc-loading-model.ts

@@ -0,0 +1,9 @@
+import { VNode } from "vue";
+
+export interface VcLoadingProps {
+  active?: boolean | undefined;
+}
+
+export interface VcLoadingSlots {
+  default: () => VNode[];
+}

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

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

package/ui/components/atoms/vc-progress/index.ts

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcProgressProps } from "./vc-progress-model";
+import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import Progress from "./vc-progress.vue";
+export const VcProgress: ComponentConstructor<
+  ComponentPublicInstance<VcProgressProps>
+> = Progress;

package/ui/components/atoms/vc-progress/vc-progress-model.ts

@@ -0,0 +1,10 @@
+import { VNode } from "vue";
+
+export interface VcProgressProps {
+  value?: number | undefined;
+  variant?: "default" | "striped" | undefined;
+}
+
+export interface VcProgressSlots {
+  default: () => VNode[];
+}

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

@@ -6,24 +6,18 @@
     ]"
   >
     <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>
-defineProps({
-  value: {
-    type: Number,
-    default: 0,
-  },
+import { VcProgressProps } from "@/ui/components/atoms/vc-progress/vc-progress-model";
 
-  variant: {
-    type: String,
-    default: "default",
-    enum: ["default", "striped"],
-  },
+withDefaults(defineProps<VcProgressProps>(), {
+  value: 0,
+  variant: "default",
 });
 </script>
 

package/ui/components/atoms/vc-row/index.ts

@@ -0,0 +1,2 @@
+import Row from "./vc-row.vue";
+export const VcRow = Row;

package/ui/components/atoms/vc-row/vc-row-model.ts

@@ -0,0 +1,5 @@
+import { VNode } from "vue";
+
+export interface VcRowSlots {
+  default: () => VNode[];
+}

package/ui/components/atoms/vc-status/index.ts

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcStatusProps } from "./vc-status-model";
+import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import Status from "./vc-status.vue";
+export const VcStatus: ComponentConstructor<
+    ComponentPublicInstance<VcStatusProps>
+> = Status;

package/ui/components/atoms/vc-status/vc-status-model.ts

@@ -0,0 +1,17 @@
+import { VNode } from "vue";
+
+export interface VcStatusProps {
+  variant?:
+    | "info"
+    | "warning"
+    | "danger"
+    | "success"
+    | "light-danger"
+    | undefined;
+  outline?: boolean | undefined;
+  extend?: boolean | undefined;
+}
+
+export interface VcStatusSlots {
+  default: () => VNode[];
+}

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

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

package/ui/components/atoms/vc-status-icon/index.ts

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcStatusIconProps } from "./vc-status-icon-model";
+import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import StatusIcon from "./vc-status-icon.vue";
+export const VcStatusIcon: ComponentConstructor<
+  ComponentPublicInstance<VcStatusIconProps>
+> = StatusIcon;

package/ui/components/atoms/vc-status-icon/vc-status-icon-model.ts

@@ -0,0 +1,9 @@
+import { VNode } from "vue";
+
+export interface VcStatusIconProps {
+  status?: boolean | undefined;
+}
+
+export interface VcStatusIconSlots {
+  default: () => VNode[];
+}

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

@@ -1,21 +1,25 @@
 <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";
 
-defineProps({
-  status: {
-    type: Boolean,
-    default: false,
-  },
+withDefaults(defineProps<VcStatusIconProps>(), {
+  status: false,
 });
 </script>

package/ui/components/atoms/vc-switch/index.ts

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcSwitchProps } from "./vc-switch-model";
+import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import Switch from "./vc-switch.vue";
+export const VcSwitch: ComponentConstructor<
+    ComponentPublicInstance<VcSwitchProps>
+> = Switch;

package/ui/components/atoms/vc-switch/vc-switch-model.ts

@@ -0,0 +1,14 @@
+import { VNode } from "vue";
+
+export interface VcSwitchProps {
+  modelValue?: boolean | undefined;
+  disabled?: boolean | undefined;
+  tooltip?: string | undefined;
+  required?: boolean | undefined;
+  label?: string | undefined;
+  "onUpdate:modelValue"?: (value: boolean) => void;
+}
+
+export interface VcSwitchSlots {
+  default: () => VNode[];
+}

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

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

package/ui/components/atoms/vc-widget/index.ts

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcWidgetProps } from "./vc-widget-model";
+import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import Widget from "./vc-widget.vue";
+export const VcWidget: ComponentConstructor<
+  ComponentPublicInstance<VcWidgetProps>
+> = Widget;

package/ui/components/atoms/vc-widget/vc-widget-model.ts

@@ -0,0 +1,13 @@
+import { VNode } from "vue";
+
+export interface VcWidgetProps {
+  icon?: string | undefined;
+  title?: string | undefined;
+  value?: string | number | undefined;
+  disabled?: boolean | undefined;
+  onClick?: () => void;
+}
+
+export interface VcWidgetSlots {
+  default: () => VNode[];
+}

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

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