@tekkare/auriga 0.2.72 → 0.2.73

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.2.72"
+  "version": "0.2.73"
 }

package/dist/runtime/components/argHomeAllBlocks.vue

@@ -29,7 +29,7 @@
       </div>
     </div>
     <div v-if="filterBlocks !== null" class="arg_home_all_blocks">
-      <div class="oip_list v-start gap-8">
+      <div v-if="!noTitle" class="oip_list v-start gap-8">
         <h1 class="arg_home_blocks_title">{{ getTitle }}</h1>
         <p v-if="appSubtitle !== null" class="home_subtitle">
           {{ appSubtitle }}
@@ -43,7 +43,84 @@
       />
       <slot name="homeExtraContent" />
       <div
-        v-if="filterBlocks.length > 0"
+        v-if="
+          filterBlocks.length > 0 &&
+          blockCategories !== null &&
+          blockCategories.value.length > 0
+        "
+        class="oip_list v-start gap-16"
+      >
+        <div
+          v-for="category in blockCategories.value"
+          :key="category"
+          class="oip_list v-start gap-8 category_container"
+        >
+          <p class="category_label">{{ category }}</p>
+          <div class="oip_row v-start gap-16 wrap full_stretch">
+            <div
+              v-for="(block, index) in filterCategoryBlocks(category)"
+              :key="index"
+              class="oip_card block_card action"
+              :class="
+                selectedBlock?.title === block.title ? 'block_selected' : ''
+              "
+              @click="selectBlock(block)"
+            >
+              <slot
+                v-if="customizeBlocks"
+                :name="seperateCustoms ? 'customOther' : 'custom'"
+                v-bind:block="block"
+              />
+              <div v-else class="block_content">
+                <div
+                  class="oip_row v-center space-between full_stretch card_head"
+                >
+                  <p class="block_title">
+                    <span v-if="block.country"
+                      ><arg-flag
+                        v-if="block.iso"
+                        :emoji="
+                          block.iso === 'ww' ||
+                          block.iso === 'eu' ||
+                          block.emoji
+                        "
+                        :iso="block.iso"
+                        height="14" />
+                      <arg-flag
+                        v-else
+                        :slug="block.country.toLowerCase()"
+                        :emoji="
+                          block.country === 'world' ||
+                          block.country === 'europe' ||
+                          block.emoji
+                        "
+                        height="14" /></span
+                    >{{ block.title }}
+                  </p>
+                  <div
+                    v-if="block.population && block.population !== null"
+                    class="oip_row v-center gap-8 population"
+                  >
+                    <arg-icon
+                      name="UsersThree"
+                      color="var(--medium)"
+                      size="14"
+                    />
+                    <p>
+                      {{
+                        new Intl.NumberFormat("us-US").format(block.population)
+                      }}
+                    </p>
+                  </div>
+                </div>
+                <p class="block_descr">{{ block.description }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        v-else-if="filterBlocks.length > 0"
         class="oip_row v-start gap-16 wrap full_stretch"
       >
         <div
@@ -123,6 +200,10 @@ export default defineComponent({
       type: String,
       default: null
     },
+    noTitle: {
+      type: Boolean,
+      default: false
+    },
     globalTitle: {
       type: String,
       default: null
@@ -185,6 +266,15 @@ export default defineComponent({
         }
       }
     }
+    const blockCategories = computed(() => {
+      const categories = ref(null);
+      if (props.appBlocks.length > 0) {
+        categories.value = [
+          ...new Set(props.appBlocks.map((a) => a.category))
+        ];
+      }
+      return categories;
+    });
     onBeforeMount(async () => {
       setLang();
     });
@@ -215,6 +305,9 @@ export default defineComponent({
     const filterBlocks = computed(() => {
       return props.appBlocks.length > 0 ? props.appBlocks.filter((a) => includesValue(a)) : null;
     });
+    const filterCategoryBlocks = (cat) => {
+      return props.appBlocks.length > 0 ? props.appBlocks.filter((a) => a.category === cat) : null;
+    };
     function includesValue(a) {
       const hasValue = ref(false);
       for (const [key] of Object.entries(a)) {
@@ -238,12 +331,14 @@ export default defineComponent({
       selectBlock,
       filterBlocks,
       getGlobalTitle,
-      langData
+      langData,
+      blockCategories,
+      filterCategoryBlocks
     };
   }
 });
 </script>
 
 <style scoped>
-.arg_home_all_blocks{align-items:flex-start;align-self:stretch;display:flex;flex-direction:column;gap:24px}.block_card{align-self:stretch;cursor:pointer;flex:0 0 calc(50% - 59px);margin:0!important;padding:24px!important}.block_card:not(.block_selected):hover .block_title{color:var(--primary)!important}.block_descr{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:14px;font-style:normal;font-weight:400;line-height:160%;overflow:hidden}.block_content{align-items:flex-start;display:flex;flex-direction:column;gap:12px}.block_title{align-items:flex-end;display:flex;flex-direction:row;font-size:16px;font-style:normal;font-weight:700;gap:8px;line-height:normal}.block_selected{background:var(--primary)!important;border:1px solid var(--primary)!important;box-shadow:var(--large-shadow)!important;color:var(--white)!important}.full_stretch{align-self:stretch}.population p{color:var(--medium);font-size:12px;font-weight:400;line-height:14px}.block_selected>.block_content>.card_head>.population p,.block_selected>.block_content>.card_head>.population svg{color:var(--white)!important}.home_subtitle{color:var(--dark);font-size:14px;font-style:normal;font-weight:400;line-height:160%}
+.arg_home_all_blocks{align-items:flex-start;align-self:stretch;display:flex;flex-direction:column;gap:24px}.block_card{align-self:stretch;cursor:pointer;flex:0 0 calc(50% - 59px);margin:0!important;padding:24px!important}.block_card:not(.block_selected):hover .block_title{color:var(--primary)!important}.block_descr{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:14px;font-style:normal;font-weight:400;line-height:160%;overflow:hidden}.block_content{align-items:flex-start;display:flex;flex-direction:column;gap:12px}.block_title{align-items:flex-end;display:flex;flex-direction:row;font-size:16px;font-style:normal;font-weight:700;gap:8px;line-height:normal}.block_selected{background:var(--primary)!important;border:1px solid var(--primary)!important;box-shadow:var(--large-shadow)!important;color:var(--white)!important}.full_stretch{align-self:stretch}.population p{color:var(--medium);font-size:12px;font-weight:400;line-height:14px}.block_selected>.block_content>.card_head>.population p,.block_selected>.block_content>.card_head>.population svg{color:var(--white)!important}.home_subtitle{color:var(--dark);font-size:14px;font-style:normal;font-weight:400;line-height:160%}.category_container{border-top:1.5px solid var(--light);padding:24px 0;position:relative}.category_label{align-items:center;background:var(--lightest);border-radius:4px;display:flex;gap:8px;left:24px;padding:4px 12px;position:absolute;top:-14px}p.category_label{color:var(--medium);font-size:14px;font-weight:500;text-transform:uppercase}
 </style>

package/dist/runtime/components/argHomeAllBlocks.vue.d.ts

@@ -3,6 +3,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: null;
     };
+    noTitle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     globalTitle: {
         type: StringConstructor;
         default: null;
@@ -54,14 +58,20 @@ declare const _default: import("vue").DefineComponent<{
     getSearchPlaceholder: import("vue").ComputedRef<any>;
     selectedBlock: import("vue").Ref<any>;
     selectBlock: (block: any) => void;
-    filterBlocks: import("vue").ComputedRef<unknown[] | null>;
+    filterBlocks: any;
     getGlobalTitle: import("vue").ComputedRef<any>;
     langData: import("vue").Ref<any>;
+    blockCategories: import("vue").ComputedRef<import("vue").Ref<any>>;
+    filterCategoryBlocks: any;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("onSelectBlock" | "update:Block")[], "onSelectBlock" | "update:Block", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     title: {
         type: StringConstructor;
         default: null;
     };
+    noTitle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     globalTitle: {
         type: StringConstructor;
         default: null;
@@ -113,6 +123,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     lang: string;
     title: string;
+    noTitle: boolean;
     globalTitle: string;
     searchPlaceholder: string;
     globalSubtitle: string;

package/dist/runtime/components/argHomeContent.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="arg_home_content">
-    <div class="arg_home_blocks">
+    <div class="arg_home_blocks" :class="borderTop ? 'has_top_border' : ''">
       <slot name="blocks" />
     </div>
     <div class="arg_home_selected">
@@ -14,9 +14,15 @@ import {
   defineComponent
 } from "vue";
 export default defineComponent({
-  name: "argHomeContent"
+  name: "argHomeContent",
+  props: {
+    borderTop: {
+      type: Boolean,
+      default: true
+    }
+  }
 });
 </script>
 <style scoped>
-.arg_home_content{align-items:flex-start;display:inline-flex;flex-direction:row;gap:32px;position:relative;width:100%}.arg_home_blocks{border-top:1px solid var(--light,#ececf2);padding-top:8px;width:66%}.arg_home_selected{align-self:stretch;display:flex;position:relative;width:33%}.height{height:350px}
+.arg_home_content{align-items:flex-start;display:inline-flex;flex-direction:row;gap:32px;position:relative;width:100%}.arg_home_blocks{padding-top:8px;width:66%}.arg_home_blocks.has_top_border{border-top:1px solid var(--light,#ececf2)}.arg_home_selected{align-self:stretch;display:flex;position:relative;width:33%}.height{height:350px}
 </style>

package/dist/runtime/components/argHomeContent.vue.d.ts

@@ -1,2 +1,14 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<{
+    borderTop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    borderTop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    borderTop: boolean;
+}, {}>;
 export default _default;

package/dist/runtime/components/argHomeSelectedBlock.vue

@@ -21,9 +21,9 @@
               v-if="selected.iso"
               :iso="selected.iso"
               height="16"
-              :emoji="selected.iso === 'ww' || selected.iso === 'eu'"
-              ||
-              selected.emoji
+              :emoji="
+                selected.iso === 'ww' || selected.iso === 'eu' || selected.emoji
+              "
             />
             <arg-flag
               v-else-if="selected.country"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/auriga",
-  "version": "0.2.72",
+  "version": "0.2.73",
   "description": "Aurgia is a UI kit developped by Tekkare",
   "license": "MIT",
   "type": "module",