@vc-shell/framework 1.0.70 → 1.0.71

package/ui/components/organisms/vc-blade/vc-blade.vue

@@ -34,15 +34,15 @@
       </template>
     </VcBladeHeader>
 
-    <template v-if="$slots['error']">
+    <template v-if="error">
       <div class="tw-text-white tw-p-2 tw-flex tw-flex-row tw-items-center tw-bg-[color:var(--blade-color-error)]">
         <VcIcon
           size="s"
           icon="fas fa-exclamation-triangle"
         />
-        <div class="tw-line-clamp-1 tw-w-full tw-mx-2"><slot name="error"></slot></div>
+        <div class="tw-line-clamp-1 tw-w-full tw-mx-2">{{ error }}</div>
         <VcButton
-          variant="onlytext"
+          text
           class="tw-shrink-0 tw-opacity-80 tw-text-white hover:!tw-opacity-100 hover:!tw-text-white"
           @click="open()"
           >{{ $t("COMPONENTS.ORGANISMS.VC_BLADE.SEE_DETAILS") }}</VcButton
@@ -59,18 +59,11 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed, useSlots, h } from "vue";
+<script lang="ts" setup>
+import { computed, Ref, reactive, useAttrs, toRefs } from "vue";
 import { IBladeToolbar } from "../../../../core/types";
 import { IBladeContainer, usePopup } from "./../../../../shared";
 import { useI18n } from "vue-i18n";
-
-export default defineComponent({
-  inheritAttrs: false,
-});
-</script>
-
-<script lang="ts" setup>
 import VcBladeHeader from "./_internal/vc-blade-header/vc-blade-header.vue";
 import VcBladeToolbar from "./_internal/vc-blade-toolbar/vc-blade-toolbar.vue";
 import { VcButton, VcIcon, VcPopup } from "./../../";
@@ -81,12 +74,9 @@ export interface Props {
   subtitle?: string;
   width?: number | string;
   expanded?: boolean;
-  maximized?: boolean;
   expandable?: boolean;
   closable?: boolean;
   toolbarItems?: IBladeToolbar[];
-  onClose?: () => void;
-  blades?: IBladeContainer[];
 }
 
 export interface Emits {
@@ -95,6 +85,10 @@ export interface Emits {
   (event: "collapse"): void;
 }
 
+defineOptions({
+  inheritAttrs: false,
+});
+
 const props = withDefaults(defineProps<Props>(), {
   width: "30%",
   closable: true,
@@ -103,9 +97,10 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 defineEmits<Emits>();
+const attrs = useAttrs();
+const { blades, maximized, error }: { blades?: Ref<IBladeContainer[]>; maximized?: Ref<boolean>; error?: Ref<string> } =
+  toRefs(reactive(attrs));
 const { t } = useI18n({ useScope: "global" });
-const slots = useSlots();
-const errorSlot = computed(() => slots.error && slots.error());
 
 const { open } = usePopup({
   component: VcPopup,
@@ -115,10 +110,7 @@ const { open } = usePopup({
     title: t("COMPONENTS.ORGANISMS.VC_BLADE.ERROR_POPUP.TITLE"),
   },
   slots: {
-    default: h(
-      "div",
-      h(() => errorSlot.value)
-    ),
+    default: computed(() => error.value),
   },
 });
 
@@ -126,7 +118,7 @@ const isExpandable = computed(() => {
   if (!props.expandable) {
     return props.expandable;
   }
-  return props.blades?.length !== 0;
+  return blades?.value && blades.value.length !== 0;
 });
 </script>
 

package/ui/components/organisms/vc-login-form/vc-login-form.stories.ts

@@ -39,7 +39,7 @@ export const Primary: Story = {
           "
     >
       <span class="tw-grow tw-basis-0"></span>
-      <vc-button variant="primary">
+      <vc-button >
         Submit
       </vc-button>
     </div>

package/ui/components/organisms/vc-popup/_internal/vc-popup-warning/vc-popup-warning.vue

@@ -11,7 +11,7 @@
   <div class="tw-flex tw-my-4 tw-mx-5">
     <div class="tw-ml-auto">
       <VcButton
-        variant="onlytext"
+        text
         class="tw-mr-5 tw-text-[#FF4A4A]"
         @click="$emit('confirm')"
         >Confirm</VcButton

package/ui/components/organisms/vc-popup/vc-popup.vue

@@ -24,7 +24,7 @@
             <slot></slot>
           </VcPopupError>
         </template>
-        <template v-if="type === 'warning'">
+        <template v-else-if="type === 'warning'">
           <VcPopupWarning
             @close="$emit('close')"
             @confirm="$emit('confirm')"

package/ui/components/organisms/vc-table/_internal/vc-table-filter/vc-table-filter.vue

@@ -56,15 +56,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, watch, computed, nextTick } from "vue";
-
-export default defineComponent({
-  inheritAttrs: false,
-});
-</script>
-
 <script lang="ts" setup>
+import { ref, watch, computed, nextTick } from "vue";
 import { offset, computePosition, ComputePositionReturn } from "@floating-ui/vue";
 
 export interface Props {
@@ -73,6 +66,10 @@ export interface Props {
   parentExpanded?: boolean;
 }
 
+defineOptions({
+  inheritAttrs: false,
+});
+
 const props = withDefaults(defineProps<Props>(), {
   title: undefined,
   counter: 0,

package/ui/components/organisms/vc-table/vc-table.vue

@@ -202,24 +202,24 @@
             ></div>
           </thead>
           <div
-            v-if="bulkDelete && allSelected"
+            v-if="selectAll && showSelectionChoice"
             class="tw-h-[60px] tw-bg-[#dfeef9] tw-w-full tw-absolute tw-flex"
           >
             <div class="tw-w-full tw-flex tw-items-center tw-justify-center">
               <div>
                 {{
-                  bulkSelected
-                    ? $t("COMPONENTS.ORGANISMS.VC_TABLE.ALL_BULK_SELECTED")
-                    : $t("COMPONENTS.ORGANISMS.VC_TABLE.ALL_SELECTED")
+                  allSelected
+                    ? $t("COMPONENTS.ORGANISMS.VC_TABLE.ALL_SELECTED")
+                    : $t("COMPONENTS.ORGANISMS.VC_TABLE.CURRENT_PAGE_SELECTED")
                 }}
                 <VcButton
-                  variant="onlytext"
+                  text
                   class="tw-text-[13px]"
-                  @click="handleBulkSelection"
+                  @click="handleSelectAll"
                   >{{
-                    bulkSelected
+                    allSelected
                       ? $t("COMPONENTS.ORGANISMS.VC_TABLE.CANCEL")
-                      : $t("COMPONENTS.ORGANISMS.VC_TABLE.SELECT")
+                      : $t("COMPONENTS.ORGANISMS.VC_TABLE.SELECT_ALL")
                   }}</VcButton
                 >
               </div>
@@ -228,7 +228,7 @@
           <tbody
             v-if="items"
             class="vc-table__body"
-            :class="{ 'tw-translate-y-[60px]': bulkDelete && allSelected }"
+            :class="{ 'tw-translate-y-[60px]': selectAll && showSelectionChoice }"
           >
             <tr
               v-for="(item, itemIndex) in items"
@@ -483,7 +483,7 @@ const props = withDefaults(
     reorderableColumns?: boolean;
     reorderableRows?: boolean;
     stateKey: string;
-    bulkDelete?: boolean;
+    selectAll?: boolean;
   }>(),
   {
     items: () => [],
@@ -492,6 +492,7 @@ const props = withDefaults(
     pages: 0,
     expanded: true,
     currentPage: 0,
+    selectedItemId: undefined,
     searchPlaceholder: "Search...",
     empty: () => ({
       text: "List is empty.",
@@ -520,7 +521,7 @@ const emit = defineEmits<{
   (event: "itemClick", item: T): void;
   (event: "scroll:ptr"): void;
   (event: "row:reorder", args: { dragIndex: number; dropIndex: number; value: T[] }): void;
-  (event: "bulk:delete"): void;
+  (event: "select:all", values: boolean): void;
 }>();
 
 // template refs
@@ -534,7 +535,7 @@ let columnResizeListener = null;
 let columnResizeEndListener = null;
 
 const selection = ref<T[]>([]) as Ref<T[]>;
-const bulkSelected = ref(false);
+const allSelected = ref(false);
 
 const selectedRow = ref<string>();
 const tooltip = ref<ComputePositionReturn>();
@@ -619,6 +620,7 @@ const headerCheckbox = computed({
     }
 
     selection.value = _selected;
+    allSelected.value = false;
   },
 });
 
@@ -630,7 +632,7 @@ const filteredCols = computed(() => {
   });
 });
 
-const allSelected = computed(() => selection.value.length === props.items.length && props.pages > 1);
+const showSelectionChoice = computed(() => selection.value.length === props.items.length && props.pages > 1);
 
 watch(
   () => props.items,
@@ -664,15 +666,20 @@ watch(
   { deep: true, immediate: true }
 );
 
-function handleBulkSelection() {
-  bulkSelected.value = !bulkSelected.value;
+watch(
+  () => allSelected.value,
+  (newVal) => {
+    emit("select:all", newVal);
+  }
+);
+
+function handleSelectAll() {
+  allSelected.value = !allSelected.value;
 
-  if (!bulkSelected.value) {
+  if (!allSelected.value) {
     selection.value = [];
     return;
   }
-
-  emit("bulk:delete");
 }
 
 function isSelected(item: T) {

package/ui/locales/en.json

@@ -8,9 +8,9 @@
         }
       },
       "VC_TABLE": {
-        "ALL_SELECTED": "All items in this page are selected.",
-        "SELECT": "Select all items",
-        "ALL_BULK_SELECTED": "All items are selected.",
+        "CURRENT_PAGE_SELECTED": "All items in this page are selected.",
+        "SELECT_ALL": "Select all items",
+        "ALL_SELECTED": "All items are selected.",
         "CANCEL": "Cancel selection",
         "ALL_ACTIONS": "All actions",
         "ALL_FILTERS": "Filters"