@appscode/design-system 1.1.0-beta.8 → 1.1.0-beta.81

package/vue-components/v3/table/table-cell/ObjectCell.vue

@@ -9,7 +9,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   cellTitle: "cell title",
-  maxCharacterLength: 50,
+  maxCharacterLength: 64,
   obj: () => ({}),
 });
 
@@ -33,7 +33,7 @@ const objKeys = computed(() => {
 
 const printableStringObjs = computed(() => {
   return objKeys.value.map((key) => {
-    let value = props.obj[key];
+    let value: string = props.obj[key] as string;
     if (typeof value === "object" && value !== null) {
       value = JSON.stringify(value);
     }
@@ -46,10 +46,10 @@ const printableStringObjs = computed(() => {
 
 const indexOfCharacterLengthExceed = computed(() => {
   let idx = -1;
-  let cumulativeLen = 0;
+  let cumulativeLen = 2;
   for (const [index, po] of printableStringObjs.value.entries()) {
-    const newLen = cumulativeLen + po.print.length;
-    if (newLen > props.maxCharacterLength) {
+    const newLen = cumulativeLen + po.print.length + 2;
+    if (newLen + 4 > props.maxCharacterLength) {
       idx = index;
       break;
     }
@@ -61,38 +61,40 @@ const indexOfCharacterLengthExceed = computed(() => {
 </script>
 
 <template>
-  <tags v-if="printableStringObjs.length">
-    <tag
-      v-for="printableStringOb in printableStringObjs.slice(
-        0,
-        indexOfCharacterLengthExceed
-      )"
-      :key="printableStringOb.key"
-      modifierClasses="is-info is-light"
-    >
-      <value-with-modal
-        v-if="printableStringOb.exceededLength"
-        :title="printableStringOb.key"
-        :value="printableStringOb.value as string"
-        :print="printableStringOb.print"
-      />
-      <template v-else> {{ printableStringOb.print }} </template>
-    </tag>
-
-    <tag
-      modifierClasses="is-info is-light"
-      v-if="indexOfCharacterLengthExceed !== printableStringObjs.length"
-    >
-      <a @click.prevent.stop="showFullData = true">
-        <ellipsis-icon />
-        <json-show-modal
-          :open="showFullData"
-          @closemodal="showFullData = false"
-          :editor-title="cellTitle"
-          :editor-content="obj"
+  <span>
+    <tags v-if="printableStringObjs.length">
+      <tag
+        v-for="printableStringOb in printableStringObjs.slice(
+          0,
+          indexOfCharacterLengthExceed
+        )"
+        :key="printableStringOb.key"
+        modifierClasses="is-primary is-light"
+      >
+        <value-with-modal
+          v-if="printableStringOb.exceededLength"
+          :title="printableStringOb.key"
+          :value="printableStringOb.value"
+          :print="printableStringOb.print"
         />
-      </a>
-    </tag>
-  </tags>
-  <p v-else>-</p>
+        <template v-else> {{ printableStringOb.print }} </template>
+      </tag>
+
+      <tag
+        modifierClasses="is-info is-light"
+        v-if="indexOfCharacterLengthExceed !== printableStringObjs.length"
+      >
+        <a @click.prevent.stop="showFullData = true">
+          <ellipsis-icon />
+          <json-show-modal
+            :open="showFullData"
+            @closemodal="showFullData = false"
+            :editor-title="cellTitle"
+            :editor-content="obj"
+          />
+        </a>
+      </tag>
+    </tags>
+    <p v-else>-</p>
+  </span>
 </template>

package/vue-components/v3/tag/Tag.vue

@@ -16,5 +16,6 @@ withDefaults(defineProps<Props>(), {
 <style lang="scss" scoped>
 .tag {
   line-height: 1;
+  font-size: 11px;
 }
 </style>

package/base/utilities/dark-theme.scss

@@ -1,26 +0,0 @@
-$dark-bg: var(--dark-bg);
-$dark-bg-light: var(--dark-bg-light);
-
-.is-dark-theme {
-  --ac-bg: var(--dark-bg);
-  --ac-white: #21272e;
-  --ac-link-black: #6969c0;
-  --ac-black: var(--ac-white-text);
-  --ac-text-heading: var(--ac-white-text);
-  --ac-text: #98a6b4;
-  // --ac-blue-light: #2e323c;
-  --ac-gray-darker: #a6a6a6;
-  --ac-gray-light: #424242;
-  --ac-gray-lightest: #777777;
-  --ac-white-light: #3f3f3f;
-  --ac-white-lighter: #2e323c;
-  --ac-white-lightest: #1f2229;
-  --ac-label-text: #8c8c8c;
-  --ac-bg-light-gray: #252830;
-
-  --ac-color-value: hsl(
-    var(--font-hsl-hue),
-    var(--font-hsl-saturation),
-    calc(var(--font-hsl-lightness) + 60%)
-  );
-}