@vc-shell/framework 1.0.53 → 1.0.56

package/shared/index.ts

@@ -1,15 +1,13 @@
 import { App } from "vue";
-import { default as AssetsDetails } from "./assets";
-import { default as VcAppSwitcher } from "./app-switcher";
-import { default as VcBladeNavigation } from "./blade-navigation";
-
-const components = [AssetsDetails, VcAppSwitcher, VcBladeNavigation];
-
-export function init(app: App): App {
-  components.forEach((component) => app.use(component));
-
-  return app;
-}
+import { default as AssetsDetailsModule } from "./assets";
+import { default as VcAppSwitcherModule } from "./app-switcher";
+import { default as VcBladeNavigationModule } from "./blade-navigation";
+
+export default {
+  install(app: App): void {
+    app.use(AssetsDetailsModule).use(VcAppSwitcherModule).use(VcBladeNavigationModule);
+  },
+};
 
 export * from "./assets";
 export * from "./app-switcher";

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

@@ -1,7 +1,12 @@
-import { ComponentPublicInstance } from "vue";
-import { VcBadgeProps } from "./vc-badge-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 import Badge from "./vc-badge.vue";
-export const VcBadge: ComponentConstructor<
-  ComponentPublicInstance<VcBadgeProps>
-> = Badge;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcBadgeSlots = {
+  /**
+   * Slot for component content
+   * */
+  default?: () => VNode[];
+};
+
+export const VcBadge: GlobalComponentConstructor<typeof Badge, VcBadgeSlots> = Badge;

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

@@ -16,16 +16,19 @@
 </template>
 
 <script lang="ts" setup>
-import {
-  VcBadgeProps,
-} from "./vc-badge-model";
-
-const props = withDefaults(defineProps<VcBadgeProps>(), {
-  active: false,
-  disabled: false,
-  clickable: true,
-});
-const emit = defineEmits(["click"]);
+export interface Props {
+  active?: boolean;
+  disabled?: boolean;
+  clickable?: boolean;
+}
+
+export interface Emits {
+  (event: "click"): void;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<Emits>();
 
 function onClick(): void {
   if (props.clickable && !props.disabled) {

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

@@ -1,7 +1,9 @@
-import { ComponentPublicInstance } from "vue";
-import { VcButtonProps } from "./vc-button-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 import Button from "./vc-button.vue";
-export const VcButton: ComponentConstructor<
-  ComponentPublicInstance<VcButtonProps>
-> = Button;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcButtonSlots = {
+  default?: () => VNode[];
+};
+
+export const VcButton: GlobalComponentConstructor<typeof Button, VcButtonSlots> = Button;

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

@@ -18,25 +18,38 @@
       :icon="icon"
       :size="small ? 'xs' : 's'"
     ></VcIcon>
-    <span v-if="$slots['default']" class="vc-button__title">
+    <span
+      v-if="$slots['default']"
+      class="vc-button__title"
+    >
       <slot></slot>
     </span>
   </button>
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "./../../../components";
-import { VcButtonProps } from "./vc-button-model";
 
-const props = withDefaults(defineProps<VcButtonProps>(), {
+export interface Props {
+  icon?: string | undefined;
+  variant?: "primary" | "secondary" | "special" | "danger" | "widget" | "onlytext";
+  disabled?: boolean | undefined;
+  small?: boolean | undefined;
+  outline?: boolean | undefined;
+  selected?: boolean | undefined;
+}
+
+export interface Emits {
+  /**
+   * Emitted when component is clicked
+   * */
+  (event: "click", value: Event): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
   variant: "primary",
-  disabled: false,
-  small: false,
-  outline: false,
-  selected: false,
 });
 
-const emit = defineEmits(["click"]);
+const emit = defineEmits<Emits>();
 
 function onClick(e: Event): void {
   if (!props.disabled) {

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

@@ -1,7 +1,10 @@
-import { ComponentPublicInstance } from "vue";
-import { VcCardProps } from "./vc-card-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 import Card from "./vc-card.vue";
-export const VcCard: ComponentConstructor<
-  ComponentPublicInstance<VcCardProps>
-> = Card;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcCardSlots = {
+  default?: () => VNode[];
+  actions?: () => VNode[];
+};
+
+export const VcCard: GlobalComponentConstructor<typeof Card, VcCardSlots> = Card;

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

@@ -3,10 +3,22 @@
     class="vc-card"
     :class="[{ 'vc-card_collapsable': isCollapsable }, `vc-card_${variant}`]"
   >
-    <div class="vc-card__header" v-if="header" @click="onHeaderClick">
-      <VcIcon v-if="icon" class="vc-card__icon" :icon="icon" size="xl"></VcIcon>
+    <div
+      class="vc-card__header"
+      v-if="header"
+      @click="onHeaderClick"
+    >
+      <VcIcon
+        v-if="icon"
+        class="vc-card__icon"
+        :icon="icon"
+        size="xl"
+      ></VcIcon>
       <div class="vc-card__title">{{ header }}</div>
-      <div v-if="$slots['actions']" class="vc-card__actions">
+      <div
+        v-if="$slots['actions']"
+        class="vc-card__actions"
+      >
         <slot name="actions"></slot>
       </div>
       <VcIcon
@@ -29,14 +41,27 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import { VcCardProps } from "./vc-card-model";
-const props = withDefaults(defineProps<VcCardProps>(), {
-  isCollapsable: false,
-  isCollapsed: false,
-  fill: false,
+
+export interface Props {
+  header?: string;
+  icon?: string;
+  isCollapsable?: boolean;
+  isCollapsed?: boolean;
+  fill?: boolean;
+  variant?: "default" | "success" | "danger";
+}
+
+export interface Emits {
+  (event: "header:click"): void;
+  (event: "state:collapsed", isCollapsedState: boolean): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
   variant: "default",
 });
-const emit = defineEmits(["header:click", "state:collapsed"]);
+
+const emit = defineEmits<Emits>();
+
 const isCollapsedInternal = ref(props.isCollapsed);
 
 function onHeaderClick() {

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

@@ -1,7 +1,10 @@
-import { ComponentPublicInstance } from "vue";
-import { VcCheckboxProps } from "./vc-checkbox-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 import Checkbox from "./vc-checkbox.vue";
-export const VcCheckbox: ComponentConstructor<
-    ComponentPublicInstance<VcCheckboxProps>
-> = Checkbox;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcCheckboxSlots = {
+  default?: () => VNode[];
+  error?: () => VNode[];
+};
+
+export const VcCheckbox: GlobalComponentConstructor<typeof Checkbox, VcCheckboxSlots> = Checkbox;

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

@@ -1,5 +1,8 @@
 <template>
-  <div class="vc-checkbox" :class="{ 'vc-checkbox_disabled': disabled }">
+  <div
+    class="vc-checkbox"
+    :class="{ 'vc-checkbox_disabled': disabled }"
+  >
     <label class="vc-checkbox__label">
       <input
         type="checkbox"
@@ -9,7 +12,10 @@
         @change="onChange"
       />
       <span class="vc-checkbox__checkmark"></span>
-      <span v-if="$slots['default']" class="tw-ml-2">
+      <span
+        v-if="$slots['default']"
+        class="tw-ml-2"
+      >
         <slot></slot>
       </span>
       <span
@@ -19,7 +25,10 @@
       >
     </label>
 
-    <slot v-if="errorMessage" name="error">
+    <slot
+      v-if="errorMessage"
+      name="error"
+    >
       <VcHint class="vc-checkbox__error tw-mt-1">
         {{ errorMessage }}
       </VcHint>
@@ -29,15 +38,21 @@
 
 <script lang="ts" setup>
 import { watch } from "vue";
-import { VcCheckboxProps } from "./vc-checkbox-model";
 
-const props = withDefaults(defineProps<VcCheckboxProps>(), {
-  modelValue: false,
-  disabled: false,
-  required: false,
-  name: "Field",
-});
-const emit = defineEmits(["update:modelValue"]);
+export interface Props {
+  modelValue?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  name?: string;
+  errorMessage?: string;
+}
+
+export interface Emits {
+  (event: "update:modelValue", value: boolean): void;
+}
+
+const props = withDefaults(defineProps<Props>(), { name: "Field" });
+const emit = defineEmits<Emits>();
 
 watch(
   () => props.modelValue,
@@ -47,7 +62,7 @@ watch(
 );
 
 // Handle input event to propertly validate value and emit changes
-function onChange(e: InputEvent) {
+function onChange(e: Event) {
   const newValue = (e.target as HTMLInputElement).checked;
   emit("update:modelValue", newValue);
 }

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

@@ -1,6 +1,9 @@
-import { ComponentPublicInstance } from "vue";
-import { VcColProps } from "./vc-col-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 import Col from "./vc-col.vue";
-export const VcCol: ComponentConstructor<ComponentPublicInstance<VcColProps>> =
-  Col;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcColSlots = {
+  default?: () => VNode[];
+};
+
+export const VcCol: GlobalComponentConstructor<typeof Col, VcColSlots> = Col;

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

@@ -8,9 +8,11 @@
 </template>
 
 <script lang="ts" setup>
-import { VcColProps } from "./vc-col-model";
+export interface Props {
+  size?: string;
+}
 
-withDefaults(defineProps<VcColProps>(), {
+withDefaults(defineProps<Props>(), {
   size: "1",
 });
 </script>

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

@@ -1,7 +1,9 @@
-import { ComponentPublicInstance } from "vue";
-import { VcContainerProps } from "./vc-container-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 import Container from "./vc-container.vue";
-export const VcContainer: ComponentConstructor<
-  ComponentPublicInstance<VcContainerProps>
-> = Container;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcContainerSlots = {
+  default?: () => VNode[];
+};
+
+export const VcContainer: GlobalComponentConstructor<typeof Container, VcContainerSlots> = Container;

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

@@ -36,15 +36,20 @@
 
 <script lang="ts" setup>
 import { ref, onMounted, computed, nextTick } from "vue";
-import { VcContainerProps } from "./vc-container-model";
 
-const props = withDefaults(defineProps<VcContainerProps>(), {
-  shadow: false,
-  noPadding: false,
-  usePtr: false,
-});
+export interface Props {
+  shadow?: boolean;
+  noPadding?: boolean;
+  usePtr?: boolean;
+}
+
+export interface Emits {
+  (event: "scroll:ptr"): void;
+}
+
+const props = defineProps<Props>();
 
-const emit = defineEmits(["scroll:ptr"]);
+const emit = defineEmits<Emits>();
 
 const component = ref<HTMLElement>();
 const scroll = ref(false);
@@ -57,8 +62,7 @@ const delta = ref(0);
 
 onMounted(() => {
   const observer = new ResizeObserver(() => {
-    scroll.value = (component.value &&
-      component.value.clientHeight < component.value.scrollHeight) as boolean;
+    scroll.value = (component.value && component.value.clientHeight < component.value.scrollHeight) as boolean;
   });
 
   if (component.value) {
@@ -66,9 +70,7 @@ onMounted(() => {
   }
 });
 
-const touchable = computed(
-  () => status.value !== "refresh" && status.value !== "success"
-);
+const touchable = computed(() => status.value !== "refresh" && status.value !== "success");
 
 const scrollTop = () => {
   if (component.value) {
@@ -164,8 +166,7 @@ defineExpose({
   --container-scroll-color-hover: #cce4f5;
   --container-scroll-width: 8px;
   --container-scroll-padding: 8px;
-  --container-scroll-shadow: 0 3px 2px rgba(0, 0, 0, 0.1) inset,
-    0 -3px 2px rgba(0, 0, 0, 0.1) inset;
+  --container-scroll-shadow: 0 3px 2px rgba(0, 0, 0, 0.1) inset, 0 -3px 2px rgba(0, 0, 0, 0.1) inset;
 }
 
 .vc-container {

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

@@ -1,2 +1,9 @@
 import Hint from "./vc-hint.vue";
-export const VcHint = Hint;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import { VNode } from "vue";
+
+export type VcHintSlots = {
+  default?: () => VNode[];
+};
+
+export const VcHint: GlobalComponentConstructor<typeof Hint, VcHintSlots> = Hint;

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

@@ -1,7 +1,9 @@
-import { ComponentPublicInstance } from "vue";
-import { VcIconProps } from "./vc-icon-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 import Icon from "./vc-icon.vue";
-export const VcIcon: ComponentConstructor<
-    ComponentPublicInstance<VcIconProps>
-> = Icon;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcIconSlots = {
+  default?: () => VNode[];
+};
+
+export const VcIcon: GlobalComponentConstructor<typeof Icon, VcIconSlots> = Icon;

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

@@ -3,9 +3,12 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIconProps } from "./vc-icon-model";
+export interface Props {
+  icon?: string;
+  size?: "xs" | "s" | "m" | "l" | "xl" | "xxl";
+}
 
-withDefaults(defineProps<VcIconProps>(), {
+withDefaults(defineProps<Props>(), {
   icon: "fas fa-square-full",
   size: "m",
 });

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

@@ -1,7 +1,9 @@
-import { ComponentPublicInstance } from "vue";
-import { VcImageProps } from "./vc-image-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 import Image from "./vc-image.vue";
-export const VcImage: ComponentConstructor<
-  ComponentPublicInstance<VcImageProps>
-> = Image;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcImageSlots = {
+  default?: () => VNode[];
+};
+
+export const VcImage: GlobalComponentConstructor<typeof Image, VcImageSlots> = Image;

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

@@ -25,8 +25,7 @@ const Template: Story = (args) => ({
   setup() {
     return { args };
   },
-  template:
-    '<div style="width: 400px"><vc-image v-bind="args"></vc-image></div>',
+  template: '<div style="width: 400px"><vc-image v-bind="args"></vc-image></div>',
 });
 
 export const Image = Template.bind({});

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

@@ -1,12 +1,14 @@
 <template>
-  <div class="vc-image" :class="[`vc-image_${size}`]">
+  <div
+    class="vc-image"
+    :class="[`vc-image_${size}`]"
+  >
     <div
       :class="[
         `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',
@@ -18,7 +20,10 @@
         v-if="!src"
         class="tw-absolute tw-w-full tw-h-full tw-flex tw-items-center tw-justify-center tw-text-[#83a3be]"
       >
-        <VcIcon icon="fas fa-image" size="xl"></VcIcon>
+        <VcIcon
+          icon="fas fa-image"
+          size="xl"
+        ></VcIcon>
       </div>
     </div>
   </div>
@@ -26,24 +31,32 @@
 
 <script lang="ts" setup>
 import { computed } from "vue";
-import { VcImageProps } from "./vc-image-model";
 
-const props = withDefaults(defineProps<VcImageProps>(), {
+export interface Props {
+  aspect?: string;
+  rounded?: boolean;
+  bordered?: boolean;
+  clickable?: boolean;
+  src: string;
+  size?: "auto" | "1x1" | "16x9" | "4x3" | "3x2" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
+  background?: "cover" | "contain" | "auto";
+}
+
+export interface Emits {
+  (event: "click"): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
   aspect: "1x1",
-  rounded: false,
-  bordered: false,
-  clickable: false,
   size: "auto",
   background: "cover",
 });
 
-const emit = defineEmits(["click"]);
+const emit = defineEmits<Emits>();
 
 const imageHandler = computed(() => {
   if (props.src) {
-    return `background: url(${encodeURI(props.src)}) center / ${
-      props.background
-    } no-repeat`;
+    return `background: url(${encodeURI(props.src)}) center / ${props.background} no-repeat`;
   }
   return undefined;
 });

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

@@ -1,7 +1,9 @@
-import { ComponentPublicInstance } from "vue";
-import { VcInfoRowProps } from "./vc-info-row-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
 import InfoRow from "./vc-info-row.vue";
-export const VcInfoRow: ComponentConstructor<
-  ComponentPublicInstance<VcInfoRowProps>
-> = InfoRow;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import { VNode } from "vue";
+
+export type VcInfoRowSlots = {
+  default?: () => VNode[];
+};
+
+export const VcInfoRow: GlobalComponentConstructor<typeof InfoRow, VcInfoRowSlots> = InfoRow;

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>
@@ -17,12 +26,15 @@
 
 <script lang="ts" setup>
 import { VcLabel, VcRow, VcCol } from "./../../../components";
-import { VcInfoRowProps } from "./vc-info-row-model";
 
-withDefaults(defineProps<VcInfoRowProps>(), {
-  label: "",
-  value: "",
-  tooltip: "",
+export interface Props {
+  label?: string;
+  value?: string;
+  tooltip?: string;
+  type?: "default" | "email";
+}
+
+withDefaults(defineProps<Props>(), {
   type: "default",
 });
 </script>

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

@@ -1,7 +1,10 @@
-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;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import { VNode } from "vue";
+
+export type VcLabelSlots = {
+  default?: () => VNode[];
+  tooltip?: () => VNode[];
+};
+
+export const VcLabel: GlobalComponentConstructor<typeof Label, VcLabelSlots> = Label;