@appscode/design-system 2.6.3 → 2.6.4

package/package.json

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

package/vue-components/styles/components/alert/_alert.scss

@@ -1,13 +1,13 @@
 .ac-notification {
-  background-color: $primary-95;
+  background-color: #f1f1f1;
   font-size: 1rem;
-  color: $ac-primary;
+  color: $color-text;
   min-height: 36px;
   display: flex;
   align-items: center;
   padding: 8px 16px;
   overflow: hidden;
-  border: 1px solid $ac-primary;
+  border: 1px solid $slate-50;
   border-radius: 4px;
   justify-content: flex-start;
   position: relative;
@@ -15,7 +15,7 @@
   min-width: 280px;
 
   p {
-    color: $ac-primary;
+    color: $color-text;
     margin-bottom: 0 !important;
 
     .close-icon {
@@ -115,3 +115,11 @@
     color: $yellow-5 !important;
   }
 }
+
+// is-warning
+.ac-notification.is-neutral {
+  @include acNotification($gray-60);
+  p {
+    color: $gray-5 !important;
+  }
+}

package/vue-components/v3/alert/Alert.vue

@@ -1,16 +1,19 @@
 <script setup lang="ts">
 interface Props {
   modifierClasses?: string;
+  isCustom?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
   modifierClasses: "",
+  isCustom: false,
 });
 </script>
 
 <template>
   <div :class="modifierClasses" class="ac-notification">
-    <p>
+    <slot v-if="isCustom" name="custom" />
+    <p v-else>
       <slot />
     </p>
   </div>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineAsyncComponent, ref, watch } from "vue";
+import { defineAsyncComponent, ref, watch, onMounted } from "vue";
 
 interface prop {
   name?: string;
@@ -14,7 +14,7 @@ interface prop {
   showStar?: boolean;
 }
 
-withDefaults(defineProps<prop>(), {
+const props = withDefaults(defineProps<prop>(), {
   name: "",
   inputType: "text",
   customClass: "",
@@ -39,7 +39,7 @@ function onFocusInput() {
   triggerInput();
 }
 function onFocusOutInput() {
-  if (!model.value) isLabelHoisted.value = false;
+  if (!model.value && props.inputType !== "date" && props.inputType !== "datetime-local") isLabelHoisted.value = false;
 }
 
 function onClickLabel() {
@@ -58,6 +58,10 @@ watch(
   },
   { immediate: true },
 );
+
+onMounted(() => {
+  if (props.inputType === "date" || props.inputType === "datetime-local") triggerInput();
+});
 </script>
 
 <template>

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

@@ -8,6 +8,7 @@ interface Props {
   errorMsg?: string;
   placeholderText?: string;
   disabled?: boolean;
+  isMultiSelect?: boolean;
   label?: string;
   taggable?: boolean;
   allowEmpty?: boolean;
@@ -33,6 +34,7 @@ const props = withDefaults(defineProps<Props>(), {
   errorMsg: "",
   placeholderText: "",
   disabled: false,
+  isMultiSelect: false,
   label: "",
   allowEmpty: false,
   options: () => [],
@@ -135,6 +137,7 @@ const onSelect = (selectedOption: unknown, id: string) => emit("select", selecte
     <multiselect
       ref="multiselectElement"
       v-model="model"
+      :multiple="isMultiSelect"
       :track-by="trackBy"
       :label="showBy"
       :class="multiselectCustomClass"

package/vue-components/v3/notification/AlertBox.vue

@@ -37,6 +37,7 @@ const backgroundColor = computed(() => {
   else if (notificationType.value === "error") return "is-danger";
   else if (notificationType.value === "warning") return "is-warning";
   else if (notificationType.value === "info") return "is-info";
+  else if (notificationType.value === "neutral") return "is-neutral is-border-none";
   else return "";
 });