@appscode/design-system 2.5.3 → 2.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/index.ts

@@ -1 +1,351 @@
-export * from "./v3";
+import AcAccordion from "./v3/accordion/Accordion.vue";
+
+import AcAlert from "./v3/alert/Alert.vue";
+import AcAlertMessage from "./v3/alert/AlertMessage.vue";
+import AcToast from "./v3/alert/Toast.vue";
+
+import AcAvatar from "./v3/avatar/Avatar.vue";
+
+import AcBadge from "./v3/badge-tags/Badge.vue";
+import AcBadgeTag from "./v3/badge-tags/Tag.vue";
+
+import AcBanner from "./v3/banner/Banner.vue";
+
+import AcBreadcrumb from "./v3/breadcrumbs/Breadcrumb.vue";
+
+import AcButton from "./v3/button/Button.vue";
+import AcButtons from "./v3/button/Buttons.vue";
+import AcDownloadBtn from "./v3/button/DownloadBtn.vue";
+
+import AcCard from "./v3/cards/Card.vue";
+import AcCardContent from "./v3/cards/CardContent.vue";
+import AcCardHeader from "./v3/cards/CardHeader.vue";
+import AcCards from "../design/cards/Cards.vue";
+import AcCluster from "./v3/cards/Cluster.vue";
+import AcCounter from "./v3/cards/Counter.vue";
+import AcFeatureCard from "./v3/cards/FeatureCard.vue";
+import AcFeatureCards from "./v3/cards/FeatureCards.vue";
+import AcInfoCard from "./v3/cards/InfoCard.vue";
+import AcMonitoring from "./v3/cards/Monitoring.vue";
+import AcOrgCard from "./v3/cards/OrgCard.vue";
+import AcOverviewCard from "./v3/cards/OverviewCard.vue";
+import AcOverviewCards from "./v3/cards/OverviewCards.vue";
+import AcPayment from "./v3/cards/Payment.vue";
+import AcSessionCard from "./v3/cards/SessionCard.vue";
+import AcVendor from "./v3/cards/Vendor.vue";
+
+import AcCodeBlock from "./v3/code-preview/CodeBlock.vue";
+import AcCodeGroup from "./v3/code-preview/CodeGroup.vue";
+
+import AcContentHeader from "./v3/content/ContentHeader.vue";
+import AcContentLayout from "./v3/content/ContentLayout.vue";
+import AcContentTable from "./v3/content/ContentTable.vue";
+
+import AcDivider from "./v3/divider/Divider.vue";
+
+import AcDropdownAction from "./v3/dropdown/DropdownAction.vue";
+import AcDropdownDivider from "./v3/dropdown/DropdownDivider.vue";
+import AcDropdownItem from "./v3/dropdown/DropdownItem.vue";
+import AcDropdownMenu from "./v3/dropdown/DropdownMenu.vue";
+
+import AcEditor from "./v3/editor/Editor.vue";
+import AcFilteredFileEditor from "./v3/editor/FilteredFileEditor.vue";
+import AcMonacoEditor from "./v3/editor/MonacoEditor.vue";
+import AcResourceKeyValueEditor from "./v3/editor/ResourceKeyValueEditor.vue";
+
+import AcFooterArea from "./v3/footer/FooterArea.vue";
+import AcFooterItem from "./v3/footer/FooterItem.vue";
+import AcFooterItems from "./v3/footer/FooterItems.vue";
+import AcInfo from "./v3/footer/Info.vue";
+import AcStatus from "./v3/footer/Status.vue";
+import AcUsage from "./v3/footer/Usage.vue";
+
+import AcForm from "./v3/form/Form.vue";
+import AcFormFooter from "./v3/form/FormFooter.vue";
+import AcFormFooterControl from "./v3/form/FormFooterControl.vue";
+import AcFormFooterControls from "./v3/form/FormFooterControls.vue";
+
+import AcAccording from "../design/according/According.vue";
+
+import AcInput from "./v3/form-fields/AcInput.vue";
+import AcSelect from "./v3/form-fields/AcSelect.vue";
+import AcSingleInput from "./v3/form-fields/AcSingleInput.vue";
+import AcTextArea from "./v3/form-fields/AcTextArea.vue";
+import AcCheckBox from "./v3/form-fields/CheckBox.vue";
+import AcCheckRadio from "./v3/form-fields/CheckRadio.vue";
+import AcColorSelect from "./v3/form-fields/ColorSelect.vue";
+import AcCustomSelect from "./v3/form-fields/CustomSelect.vue";
+import AcFileUpload from "./v3/form-fields/FileUpload.vue";
+import AcFileUploadSmall from "./v3/form-fields/FileUploadSmall.vue";
+import AcListInputField from "./v3/form-fields/ListInputField.vue";
+import AcSearchbar from "./v3/form-fields/Searchbar.vue";
+import AcSingleStepFormArray from "./v3/form-fields/SingleStepFormArray.vue";
+import AcSwitch from "./v3/form-fields/Switch.vue";
+
+import AcHeader from "./v3/header/Header.vue";
+import AcHeaderItem from "./v3/header/HeaderItem.vue";
+import AcHeaderItems from "./v3/header/HeaderItems.vue";
+
+import AcArrowIcon from "./v3/icons/ArrowIcon.vue";
+import AcBellIcon from "./v3/icons/BellIcon.vue";
+import AcCheckIcon from "./v3/icons/CheckIcon.vue";
+import AcClockIcon from "./v3/icons/ClockIcon.vue";
+import AcCloseIcon from "./v3/icons/CloseIcon.vue";
+import AcCpuIcon from "./v3/icons/CpuIcon.vue";
+import AcCrossIcon from "./v3/icons/CrossIcon.vue";
+import AcEllipsis from "./v3/icons/Ellipsis.vue";
+import AcEllipsisVertical from "./v3/icons/EllipsisVertical.vue";
+import AcFinanceIcon from "./v3/icons/FinanceIcon.vue";
+import AcGridIcon from "./v3/icons/GridIcon.vue";
+import AcHomeIcon from "./v3/icons/HomeIcon.vue";
+import AcInfoIcon from "./v3/icons/InfoIcon.vue";
+import AcMemoryIcon from "./v3/icons/MemoryIcon.vue";
+import AcMonitorIcon from "./v3/icons/MonitorIcon.vue";
+import AcRefreshIcon from "./v3/icons/RefreshIcon.vue";
+import AcSearchIcon from "./v3/icons/SearchIcon.vue";
+import AcStarIcon from "./v3/icons/StarIcon.vue";
+import AcStorageIcon from "./v3/icons/StorageIcon.vue";
+import AcTrashIcon from "./v3/icons/TrashIcon.vue";
+import AcUploadIcon from "./v3/icons/UploadIcon.vue";
+
+import AcInbox from "./v3/inbox/Inbox.vue";
+import AcMessageDetails from "./v3/inbox/MessageDetails.vue";
+import AcMessageList from "./v3/inbox/MessageList.vue";
+
+import AcClusterSwitcherLoader from "./v3/loaders/ClusterSwitcherLoader.vue";
+import AcInfoCardLoader from "./v3/loaders/InfoCardLoader.vue";
+import AcResourceLoader from "./v3/loaders/ResourceLoader.vue";
+import AcSidebarLoader from "./v3/loaders/SidebarLoader.vue";
+import AcSingleInfoCardLoader from "./v3/loaders/SingleInfoCardLoader.vue";
+
+import AcMessage from "./v3/messages/Message.vue";
+
+import AcDeleteModal from "./v3/modal/DeleteModal.vue";
+import AcDialogModal from "./v3/modal/DialogModal.vue";
+import AcModal from "./v3/modal/Modal.vue";
+import AcSidePanelModal from "./v3/modal/SidePanelModal.vue";
+
+import AcDeleteConfirmationModal from "./v3/modals/DeleteConfirmationModal.vue";
+import AcJsonShowModal from "./v3/modals/JsonShowModal.vue";
+
+import AcAppdrawer from "./v3/navbar/Appdrawer.vue";
+import AcNavbar from "./v3/navbar/Navbar.vue";
+import AcNavbarItem from "./v3/navbar/NavbarItem.vue";
+import AcNavbarItemContent from "./v3/navbar/NavbarItemContent.vue";
+import AcThemeMode from "./v3/navbar/ThemeMode.vue";
+import AcUser from "./v3/navbar/User.vue";
+
+import AcAlertBox from "./v3/notification/AlertBox.vue";
+import AcNotification from "./v3/notification/Notification.vue";
+import AcNotificationItem from "./v3/notification/NotificationItem.vue";
+
+import AcOptions from "./v3/option-dots/Options.vue";
+
+import AcPagination from "./v3/pagination/Pagination.vue";
+
+import AcPreloader from "./v3/preloader/Preloader.vue";
+
+import AcSearchBar from "./v3/searchbars/SearchBar.vue";
+
+import AcSidebarTabs from "./v3/sidebar/sidebar-tabs/SidebarTabs.vue";
+import AcSidebarTabsLayout from "./v3/sidebar/sidebar-tabs/SidebarTabsLayout.vue";
+import AcTabsContent from "./v3/sidebar/sidebar-tabs/TabsContent.vue";
+
+import AcAccentColorPicker from "./v3/sidebar/AccentColorPicker.vue";
+import AcClusterSwitcher from "./v3/sidebar/ClusterSwitcher.vue";
+import AcSidebar from "./v3/sidebar/Sidebar.vue";
+import AcSidebarBody from "./v3/sidebar/SidebarBody.vue";
+import AcSidebarFooter from "./v3/sidebar/SidebarFooter.vue";
+import AcSidebarHeader from "./v3/sidebar/SidebarHeader.vue";
+import AcSidebarItem from "./v3/sidebar/SidebarItem.vue";
+import AcSidebarItemWithDropDown from "./v3/sidebar/SidebarItemWithDropDown.vue";
+import AcSidebarMenuList from "./v3/sidebar/SidebarMenuList.vue";
+import AcSidebarStep from "./v3/sidebar/Steps.vue";
+
+import AcSkeleton from "./v3/skeleton/Skeleton.vue";
+import AcSkeletons from "./v3/skeleton/Skeletons.vue";
+
+import AcSteps from "./v3/steps/Steps.vue";
+
+import AcTabItem from "./v3/tab/TabItem.vue";
+import AcTabs from "./v3/tab/Tabs.vue";
+import AcTabsBody from "./v3/tab/TabsBody.vue";
+
+import AcArrayCell from "./v3/table/table-cell/ArrayCell.vue";
+import AcCellValue from "./v3/table/table-cell/CellValue.vue";
+import AcGenericCell from "./v3/table/table-cell/GenericCell.vue";
+import AcObjectCell from "./v3/table/table-cell/ObjectCell.vue";
+import AcValueWithModal from "./v3/table/table-cell/ValueWithModal.vue";
+import AcEmptyTableInfo from "./v3/table/EmptyTableInfo.vue";
+import AcFakeTableCell from "./v3/table/FakeTableCell.vue";
+import AcInfoTable from "./v3/table/InfoTable.vue";
+import AcMultiInfoTable from "./v3/table/MultiInfoTable.vue";
+import AcTable from "./v3/table/Table.vue";
+import AcTableCell from "./v3/table/TableCell.vue";
+import AcTableContainer from "./v3/table/TableContainer.vue";
+import AcTableRow from "./v3/table/TableRow.vue";
+
+import AcEditorTabs from "./v3/tabs/EditorTabs.vue";
+
+import AcTag from "./v3/tag/Tag.vue";
+import AcTags from "./v3/tag/Tags.vue";
+
+import AcSimpleSelect from "./v3/upcoming/SimpleSelect.vue";
+
+export {
+  AcAccordion,
+  AcAlert,
+  AcAlertMessage,
+  AcToast,
+  AcAvatar,
+  AcBadge,
+  AcBadgeTag,
+  AcBanner,
+  AcBreadcrumb,
+  AcButton,
+  AcButtons,
+  AcDownloadBtn,
+  AcCard,
+  AcCardContent,
+  AcCardHeader,
+  AcCards,
+  AcCluster,
+  AcCounter,
+  AcFeatureCard,
+  AcFeatureCards,
+  AcInfoCard,
+  AcMonitoring,
+  AcOrgCard,
+  AcOverviewCard,
+  AcOverviewCards,
+  AcPayment,
+  AcSessionCard,
+  AcVendor,
+  AcCodeBlock,
+  AcCodeGroup,
+  AcContentHeader,
+  AcContentLayout,
+  AcContentTable,
+  AcDivider,
+  AcDropdownAction,
+  AcDropdownDivider,
+  AcDropdownItem,
+  AcDropdownMenu,
+  AcEditor,
+  AcFilteredFileEditor,
+  AcMonacoEditor,
+  AcResourceKeyValueEditor,
+  AcFooterArea,
+  AcFooterItem,
+  AcFooterItems,
+  AcInfo,
+  AcStatus,
+  AcUsage,
+  AcForm,
+  AcFormFooter,
+  AcFormFooterControl,
+  AcFormFooterControls,
+  AcAccording,
+  AcInput,
+  AcSelect,
+  AcSingleInput,
+  AcTextArea,
+  AcCheckBox,
+  AcCheckRadio,
+  AcColorSelect,
+  AcCustomSelect,
+  AcFileUpload,
+  AcFileUploadSmall,
+  AcListInputField,
+  AcSearchbar,
+  AcSingleStepFormArray,
+  AcSwitch,
+  AcHeader,
+  AcHeaderItem,
+  AcHeaderItems,
+  AcArrowIcon,
+  AcBellIcon,
+  AcCheckIcon,
+  AcClockIcon,
+  AcCloseIcon,
+  AcCpuIcon,
+  AcCrossIcon,
+  AcEllipsis,
+  AcEllipsisVertical,
+  AcFinanceIcon,
+  AcGridIcon,
+  AcHomeIcon,
+  AcInfoIcon,
+  AcMemoryIcon,
+  AcMonitorIcon,
+  AcRefreshIcon,
+  AcSearchIcon,
+  AcStarIcon,
+  AcStorageIcon,
+  AcTrashIcon,
+  AcUploadIcon,
+  AcInbox,
+  AcMessageDetails,
+  AcMessageList,
+  AcClusterSwitcherLoader,
+  AcInfoCardLoader,
+  AcResourceLoader,
+  AcSidebarLoader,
+  AcSingleInfoCardLoader,
+  AcMessage,
+  AcDeleteModal,
+  AcDialogModal,
+  AcModal,
+  AcSidePanelModal,
+  AcDeleteConfirmationModal,
+  AcJsonShowModal,
+  AcAppdrawer,
+  AcNavbar,
+  AcNavbarItem,
+  AcNavbarItemContent,
+  AcNotification,
+  AcThemeMode,
+  AcUser,
+  AcAlertBox,
+  AcNotificationItem,
+  AcOptions,
+  AcPagination,
+  AcPreloader,
+  AcSearchBar,
+  AcSidebarTabs,
+  AcSidebarTabsLayout,
+  AcTabsContent,
+  AcAccentColorPicker,
+  AcClusterSwitcher,
+  AcSidebar,
+  AcSidebarBody,
+  AcSidebarFooter,
+  AcSidebarHeader,
+  AcSidebarItem,
+  AcSidebarItemWithDropDown,
+  AcSidebarMenuList,
+  AcSteps,
+  AcSkeleton,
+  AcSkeletons,
+  AcSidebarStep,
+  AcTabItem,
+  AcTabs,
+  AcTabsBody,
+  AcArrayCell,
+  AcCellValue,
+  AcGenericCell,
+  AcObjectCell,
+  AcValueWithModal,
+  AcEmptyTableInfo,
+  AcFakeTableCell,
+  AcInfoTable,
+  AcMultiInfoTable,
+  AcTable,
+  AcTableCell,
+  AcTableContainer,
+  AcTableRow,
+  AcEditorTabs,
+  AcTag,
+  AcTags,
+  AcSimpleSelect,
+};

package/vue-components/v3/footer/Status.vue

@@ -5,6 +5,7 @@ const FooterItem = defineAsyncComponent(() => import("./FooterItem.vue"));
 const HeroiconsCheckBadge = defineAsyncComponent(() => import("~icons/heroicons/check-badge"));
 const HeroiconsCrossBadge = defineAsyncComponent(() => import("~icons/heroicons/x-circle"));
 const MdiMinusCircleOutline = defineAsyncComponent(() => import("~icons/mdi/minus-circle-outline"));
+const WarningIcon = defineAsyncComponent(() => import("~icons/heroicons/exclamation-triangle-16-solid"));
 
 interface Props {
   statusInfo?: Array<Record<string, string>>;
@@ -19,14 +20,13 @@ withDefaults(defineProps<Props>(), {
   <footer-items>
     <footer-item v-for="(item, idx) in statusInfo" :key="idx + item.label" :modifier-classes="item.color">
       <span class="icon">
-        <HeroiconsCheckBadge v-if="item.color === `has-text-success`" />
-        <i v-else-if="item.color === `has-text-warning`" class="fa fa-refresh fa-spin fa-fw"></i>
+        <HeroiconsCheckBadge v-if="item.color === 'has-text-success'" />
+        <WarningIcon v-else-if="item.color === 'has-text-warning'" />
         <HeroiconsCrossBadge v-else-if="item.color === 'has-text-danger'" />
+        <i v-else-if="item.color === 'pending'" class="fa fa-refresh fa-spin fa-fw"></i>
         <MdiMinusCircleOutline v-else />
       </span>
       <span>{{ item.label }}</span>
     </footer-item>
   </footer-items>
 </template>
-
-<style lang="scss" scoped></style>

package/vue-components/v3/form-fields/Input.vue

@@ -18,8 +18,8 @@ const handleInput = (e: Event) => {
 <template>
   <input
     class="ac-input"
-    :class="{ 'width-200': modelValue }"
     data-testid="ac-input"
+    :class="{ 'width-200': modelValue }"
     :value="modelValue"
     @input="handleInput"
   />

package/vue-components/v3/navbar/Notification.vue

@@ -2,7 +2,6 @@
 import { defineAsyncComponent, ref } from "vue";
 import type { Notification } from "../../types/notification";
 import { useTimeAgo } from "@vueuse/core";
-
 import BellIcon from "../icons/BellIcon.vue";
 const NavbarItem = defineAsyncComponent(() => import("./NavbarItem.vue"));
 const NavbarItemContent = defineAsyncComponent(() => import("./NavbarItemContent.vue"));
@@ -16,7 +15,6 @@ withDefaults(
     unreadNotification: 0,
   },
 );
-
 const emit = defineEmits(["isActive"]);
 const showNotification = ref(false);
 function handleIsActiveChange(isActive: string | any[]) {
@@ -71,12 +69,10 @@ function handleIsActiveChange(isActive: string | any[]) {
 
 <style lang="scss" scoped>
 @import "../../../vue-components/styles/components/navbar/notification";
-
 .v-enter-active,
 .v-leave-active {
   transition: opacity 0.5s ease;
 }
-
 .v-enter-from,
 .v-leave-to {
   opacity: 0;

package/vue-components/v3/index.ts

@@ -1,9 +0,0 @@
-import AcAccordion from "./accordion/Accordion.vue";
-import AcAlert from "./alert/Alert.vue";
-import AcAlertMessage from "./alert/AlertMessage.vue";
-import AcToast from "./alert/Toast.vue";
-import AcAvatar from "./avatar/Avatar.vue";
-import AcBadge from "./badge-tags/Badge.vue";
-import AcTag from "./badge-tags/Tag.vue";
-
-export { AcAccordion, AcAlert, AcAlertMessage, AcToast, AcAvatar, AcBadge, AcTag };