@vc-shell/framework 1.0.52 → 1.0.54

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

@@ -4,11 +4,20 @@
       <VcCol>
         <VcLabel>
           <span>{{ label }}</span>
-          <template v-if="tooltip" v-slot:tooltip>{{ tooltip }}</template>
+          <template
+            v-if="tooltip"
+            v-slot:tooltip
+            >{{ tooltip }}</template
+          >
         </VcLabel>
       </VcCol>
       <VcCol size="2">
-        <p class="tw-m-0" v-if="type === 'default'">{{ value }}</p>
+        <p
+          class="tw-m-0"
+          v-if="type === 'default'"
+        >
+          {{ value }}
+        </p>
         <VcLink v-else-if="type === 'email'">{{ value }}</VcLink>
       </VcCol>
     </VcRow>
@@ -16,27 +25,8 @@
 </template>
 
 <script lang="ts" setup>
-import { VcLabel, VcRow, VcCol } from "@/ui/components";
+import { VcLabel, VcRow, VcCol } from "./../../../components";
+import { infoRowProps } from "./vc-info-row-model";
 
-defineProps({
-  label: {
-    type: String,
-    default: "",
-  },
-
-  value: {
-    type: String,
-    default: "",
-  },
-
-  tooltip: {
-    type: String,
-    default: "",
-  },
-
-  type: {
-    type: String,
-    default: "default",
-  },
-});
+defineProps(infoRowProps);
 </script>

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

@@ -0,0 +1,5 @@
+import { ComponentPublicInstance } from "vue";
+import { VcLabelProps } from "./vc-label-model";
+import { ComponentConstructor } from "./../../../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,20 @@
+import { VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+
+export const labelProps = {
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  tooltipIcon: {
+    type: String,
+    default: "fas fa-info-circle",
+  },
+};
+
+export type VcLabelProps = ExtractTypes<typeof labelProps>;
+
+export interface VcLabelSlots {
+  default: () => VNode[];
+  tooltip: () => VNode[];
+}

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

@@ -1,10 +1,15 @@
 <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">
+    <span
+      v-if="$slots['tooltip']"
+      class="tw-grow tw-basis-0 tw-ml-1"
+    >
       <VcIcon
         class="tw-text-[color:var(--label-tooltip-color)]"
         :icon="tooltipIcon"
@@ -23,20 +28,11 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "@/ui/components";
+import { VcIcon } from "./../../../components";
 import { ref } from "vue";
+import { labelProps } from "./vc-label-model";
 
-defineProps({
-  required: {
-    type: Boolean,
-    default: false,
-  },
-
-  tooltipIcon: {
-    type: String,
-    default: "fas fa-info-circle",
-  },
-});
+defineProps(labelProps);
 
 const tooltipVisible = ref(false);
 </script>

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

@@ -0,0 +1,6 @@
+import { ComponentPublicInstance } from "vue";
+import { VcLinkEmits, VcLinkProps } from "./vc-link-model";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
+import Link from "./vc-link.vue";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const VcLink: ComponentConstructor<ComponentPublicInstance<VcLinkProps, any, any, any, any, VcLinkEmits>> = Link;

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

@@ -0,0 +1,24 @@
+import { VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+
+export const linkProps = {
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const linkEmits = {
+  click: () => true,
+};
+
+export type VcLinkProps = ExtractTypes<typeof linkProps>;
+export type VcLinkEmits = typeof linkEmits;
+
+export interface VcLinkSlots {
+  default: () => VNode[];
+}

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

@@ -13,18 +13,11 @@
 </template>
 
 <script lang="ts" setup>
-const props = defineProps({
-  active: {
-    type: Boolean,
-    default: false,
-  },
+import { linkEmits, linkProps } from "./vc-link-model";
+
+const props = defineProps(linkProps);
+const emit = defineEmits(linkEmits);
 
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
-const emit = defineEmits(["click"]);
 function onClick(): void {
   if (!props.disabled) {
     emit("click");

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

@@ -0,0 +1,5 @@
+import { ComponentPublicInstance } from "vue";
+import { VcLoadingProps } from "./vc-loading-model";
+import { ComponentConstructor } from "./../../../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,15 @@
+import { VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+
+export const loadingProps = {
+  active: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export type VcLoadingProps = ExtractTypes<typeof loadingProps>;
+
+export interface VcLoadingSlots {
+  default: () => VNode[];
+}

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

@@ -2,17 +2,14 @@
   <div
     class="tw-absolute tw-items-center tw-justify-center tw-flex-col tw-z-[9998] tw-hidden tw-w-full tw-h-full tw-box-border"
     :class="{
-      '!tw-flex tw-backdrop-blur-[3px] tw-bg-[rgba(255, 255, 255, 0.5)]':
-        active,
+      '!tw-flex tw-backdrop-blur-[3px] tw-bg-[rgba(255, 255, 255, 0.5)]': active,
     }"
   >
     <div class="tw-relative tw-w-[142px] tw-h-[40px] tw-z-[1]">
       <span
         class="tw-absolute tw-w-4 tw-h-4 tw-top-[12px] tw-left-[15px] tw-bg-[#319ed4] tw-rounded-full tw-translate-x-0 tw-animate-loadingMarker"
       ></span>
-      <div
-        class="tw-translate-x-0 tw-mt-3 tw-ml-[31px] tw-animate-loadingMarkers"
-      >
+      <div class="tw-translate-x-0 tw-mt-3 tw-ml-[31px] tw-animate-loadingMarkers">
         <span
           class="tw-block tw-float-left tw-w-4 tw-h-4 tw-bg-[#319ed4] tw-rounded-full tw-ml-4"
           v-for="item in 3"
@@ -24,10 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-defineProps({
-  active: {
-    type: Boolean,
-    default: false,
-  },
-});
+import { loadingProps } from "./vc-loading-model";
+
+defineProps(loadingProps);
 </script>

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

@@ -0,0 +1,5 @@
+import { ComponentPublicInstance } from "vue";
+import { VcProgressProps } from "./vc-progress-model";
+import { ComponentConstructor } from "./../../../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,19 @@
+import { PropType, VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+
+export const progressProps = {
+  value: {
+    type: Number,
+    default: 0,
+  },
+  variant: {
+    type: String as PropType<"default" | "striped">,
+    default: "default",
+  },
+};
+
+export type VcProgressProps = ExtractTypes<typeof progressProps>;
+
+export interface VcProgressSlots {
+  default: () => VNode[];
+}

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

@@ -6,25 +6,16 @@
     ]"
   >
     <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 { progressProps } from "./vc-progress-model";
 
-  variant: {
-    type: String,
-    default: "default",
-    enum: ["default", "striped"],
-  },
-});
+defineProps(progressProps);
 </script>
 
 <style lang="scss">
@@ -49,14 +40,8 @@ defineProps({
 .vc-progress {
   &.striped {
     .vc-progress__value {
-      background: linear-gradient(
-            45deg,
-            transparent 50%,
-            #acd2f2 50%,
-            #acd2f2 75%,
-            transparent 75%
-          )
-          left/30px 30px repeat-x,
+      background: linear-gradient(45deg, transparent 50%, #acd2f2 50%, #acd2f2 75%, transparent 75%) left/30px 30px
+          repeat-x,
         #e1f0fe;
       animation: change 1s linear infinite;
     }

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,5 @@
+import { ComponentPublicInstance } from "vue";
+import { VcStatusProps } from "./vc-status-model";
+import { ComponentConstructor } from "./../../../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,23 @@
+import { PropType, VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+
+export const statusProps = {
+  variant: {
+    type: String as PropType<"info" | "warning" | "danger" | "success" | "light-danger">,
+    default: "info",
+  },
+  outline: {
+    type: Boolean,
+    default: true,
+  },
+  extend: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export type VcStatusProps = ExtractTypes<typeof statusProps>;
+
+export interface VcStatusSlots {
+  default: () => VNode[];
+}

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

@@ -1,34 +1,16 @@
 <template>
   <div
     class="vc-status"
-    :class="[
-      `vc-status_${variant}`,
-      { 'vc-status_outline': outline },
-      { 'vc-status_extended': extend },
-    ]"
+    :class="[`vc-status_${variant}`, { 'vc-status_outline': outline }, { 'vc-status_extended': extend }]"
   >
     <slot></slot>
   </div>
 </template>
 
 <script lang="ts" setup>
-defineProps({
-  variant: {
-    type: String,
-    default: "info",
-    enum: ["info", "warning", "danger", "success", "light-danger"],
-  },
+import { statusProps } from "./vc-status-model";
 
-  outline: {
-    type: Boolean,
-    default: true,
-  },
-
-  extend: {
-    type: Boolean,
-    default: false,
-  },
-});
+defineProps(statusProps);
 </script>
 
 <style lang="scss">

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

@@ -0,0 +1,5 @@
+import { ComponentPublicInstance } from "vue";
+import { VcStatusIconProps } from "./vc-status-icon-model";
+import { ComponentConstructor } from "./../../../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,15 @@
+import { VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+
+export const statusIconProps = {
+  status: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export type VcStatusIconProps = ExtractTypes<typeof statusIconProps>;
+
+export interface VcStatusIconSlots {
+  default: () => VNode[];
+}

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

@@ -1,21 +1,23 @@
 <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 { VcIcon } from "./../../../components";
+import { statusIconProps } from "./vc-status-icon-model";
 
-defineProps({
-  status: {
-    type: Boolean,
-    default: false,
-  },
-});
+defineProps(statusIconProps);
 </script>

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

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcSwitchEmits, VcSwitchProps } from "./vc-switch-model";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
+import Switch from "./vc-switch.vue";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const VcSwitch: ComponentConstructor<ComponentPublicInstance<VcSwitchProps, any, any, any, any, VcSwitchEmits>> =
+  Switch;

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

@@ -0,0 +1,34 @@
+import { VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+import { isBoolean } from "./../../../utils";
+
+export const switchProps = {
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  tooltip: {
+    type: String,
+    default: "",
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  label: String,
+};
+
+export const switchEmits = {
+  "update:modelValue": (value: boolean) => isBoolean(value),
+};
+
+export type VcSwitchProps = ExtractTypes<typeof switchProps>;
+export type VcSwitchEmits = typeof switchEmits;
+
+export interface VcSwitchSlots {
+  default: () => VNode[];
+}

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

@@ -1,7 +1,11 @@
 <template>
   <div>
     <!-- Switch label -->
-    <VcLabel v-if="label" class="tw-mb-2" :required="required">
+    <VcLabel
+      v-if="label"
+      class="tw-mb-2"
+      :required="required"
+    >
       <span>{{ label }}</span>
     </VcLabel>
     <div class="tw-relative tw-inline-block tw-w-[54px] tw-h-[18px]">
@@ -15,7 +19,10 @@
         />
         <span class="vc-switch__slider"></span>
       </label>
-      <VcHint class="tw-mt-2 tw-w-max" v-if="tooltip">
+      <VcHint
+        class="tw-mt-2 tw-w-max"
+        v-if="tooltip"
+      >
         {{ tooltip }}
       </VcHint>
     </div>
@@ -23,34 +30,11 @@
 </template>
 
 <script lang="ts" setup>
-defineProps({
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
+import { switchEmits, switchProps } from "./vc-switch-model";
 
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
+defineProps(switchProps);
 
-  tooltip: {
-    type: String,
-    default: "",
-  },
-
-  required: {
-    type: Boolean,
-    default: false,
-  },
-
-  label: {
-    type: String,
-    default: undefined,
-  },
-});
-
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(switchEmits);
 
 function onInput(e: InputEvent) {
   const newValue = (e.target as HTMLInputElement).checked;

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

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcWidgetEmits, VcWidgetProps } from "./vc-widget-model";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
+import Widget from "./vc-widget.vue";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const VcWidget: ComponentConstructor<ComponentPublicInstance<VcWidgetProps, any, any, any, any, VcWidgetEmits>> =
+  Widget;

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

@@ -0,0 +1,23 @@
+import { VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+
+export const widgetProps = {
+  icon: String,
+  title: String,
+  value: [String, Number],
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const widgetEmits = {
+  click: () => true,
+};
+
+export type VcWidgetProps = ExtractTypes<typeof widgetProps>;
+export type VcWidgetEmits = typeof widgetEmits;
+
+export interface VcWidgetSlots {
+  default: () => VNode[];
+}

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

@@ -10,34 +10,27 @@
       :icon="icon"
       size="xxl"
     ></VcIcon>
-    <div v-if="title" class="vc-widget__title">{{ title }}</div>
-    <div v-if="value !== undefined" class="vc-widget__value">{{ value }}</div>
+    <div
+      v-if="title"
+      class="vc-widget__title"
+    >
+      {{ title }}
+    </div>
+    <div
+      v-if="value !== undefined"
+      class="vc-widget__value"
+    >
+      {{ value }}
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-const props = defineProps({
-  icon: {
-    type: String,
-    default: undefined,
-  },
+import { widgetEmits, widgetProps } from "./vc-widget-model";
 
-  title: {
-    type: String,
-    default: undefined,
-  },
+const props = defineProps(widgetProps);
 
-  value: {
-    type: [String, Number],
-    default: undefined,
-  },
-
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
-const emit = defineEmits(["click"]);
+const emit = defineEmits(widgetEmits);
 
 function onClick() {
   if (!props.disabled) {