Merge pull request #100 from CSCfi/otp-input-value-prop

Otp input value prop && c-dropdown scroll fix
CSCfi · Jan 23, 2024 · 4de4cf5 · 4de4cf5
2 parents d829e6b + d6cd89d
commit 4de4cf5
Show file tree

Hide file tree

Showing 29 changed files with 6,101 additions and 2,954 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "typescript": "^4.9.5"
   },
   "scripts": {
+    "create": "lerna create",
     "build": "lerna run build",
     "publish": "lerna run tsc && lerna publish",
     "prepare": "if [ \"$CI\" = true ]; then echo \"Skip Husky\"; else chmod +x ./node_modules/husky/lib/bin.js && husky install; fi"

diff --git a/packages/csc-ui-documentation/components/examples/c-otp-input/Automatic.vue b/packages/csc-ui-documentation/components/examples/c-otp-input/Automatic.vue
@@ -1,6 +1,6 @@
 <template>
   <component-example name="automatic" rows>
-    <template #title>Automatic submitting</template>
+    <template #title>Automatic submit</template>
 
     <c-otp-input
       id="automatic-submit-example"

diff --git a/packages/csc-ui-documentation/components/examples/c-otp-input/Manual.vue b/packages/csc-ui-documentation/components/examples/c-otp-input/Manual.vue
@@ -1,10 +1,11 @@
 <template>
   <component-example name="manual" rows>
-    <template #title>Manual submitting</template>
+    <template #title>Manual submit and reset</template>
 
     <div>
       <c-otp-input
         id="manual-submit-example"
+        ref="otpInput"
         v-model="otp"
         v-control
         hint="Please enter your one time password"
@@ -13,12 +14,18 @@
         :validation="errorMessage"
       />
 
-      <c-button
-        @click="onManualCompletion()"
-        @keyup.enter="onManualCompletion()"
-      >
-        Submit
-      </c-button>
+      <c-row gap="8">
+        <c-button outlined @click="onReset()" @keyup.enter="onReset()">
+          Reset
+        </c-button>
+
+        <c-button
+          @click="onManualCompletion()"
+          @keyup.enter="onManualCompletion()"
+        >
+          Submit
+        </c-button>
+      </c-row>
     </div>
 
     <teleport to="body">
@@ -33,10 +40,16 @@ import { CToastType } from '@cscfi/csc-ui';
 
 const toasts = ref<HTMLCToastsElement | null>(null);
 
+const otpInput = ref<HTMLCOtpInputElement | null>(null);
+
 const otp = ref('');
 const errorMessage = ref('');
 const isValid = ref(true);
 
+const onReset = () => {
+  otpInput.value?.reset();
+};
+
 const onManualCompletion = () => {
   if (!otp.value) {
     errorMessage.value = 'Invalid OTP';

diff --git a/packages/csc-ui-documentation/components/examples/c-side-navigation/Basic.vue b/packages/csc-ui-documentation/components/examples/c-side-navigation/Basic.vue
@@ -10,22 +10,22 @@
         @keyup.enter="onNavigation('about')"
         @click="onNavigation('about')"
       >
-        <c-icon :path="mdiInformationOutline" size="18" />
+        <c-icon :path="mdiInformationOutline" size="20" />
         About
       </c-side-navigation-item>
 
       <c-side-navigation-title>Two level navigation</c-side-navigation-title>
 
       <c-side-navigation-item :active="false">
-        <c-icon :path="mdiEye" size="18" />
+        <c-icon :path="mdiEye" size="20" />
         Examples
 
         <c-sub-navigation-item
           :active="currentMenuItem === 'html'"
           @keyup.enter="onNavigation('html')"
           @click="onNavigation('html')"
         >
-          <c-icon :path="mdiLanguageHtml5" size="18" />
+          <c-icon :path="mdiLanguageHtml5" size="20" />
           Html
         </c-sub-navigation-item>
 
@@ -34,19 +34,19 @@
           @keyup.enter="onNavigation('js')"
           @click="onNavigation('js')"
         >
-          <c-icon :path="mdiLanguageJavascript" size="18" />
+          <c-icon :path="mdiLanguageJavascript" size="20" />
           Javascript
         </c-sub-navigation-item>
       </c-side-navigation-item>
 
       <c-side-navigation-title>Three level navigation</c-side-navigation-title>
 
       <c-side-navigation-item :active="false">
-        <c-icon :path="mdiPackageVariantClosed" size="18" />
+        <c-icon :path="mdiPackageVariantClosed" size="20" />
         Components
 
         <c-side-navigation-item :active="false">
-          <c-icon :path="mdiButtonCursor" size="18" />
+          <c-icon :path="mdiButtonCursor" size="20" />
           Buttons
 
           <c-sub-navigation-item
@@ -68,11 +68,11 @@
       </c-side-navigation-item>
 
       <c-side-navigation-item :active="false">
-        <c-icon :path="mdiCog" size="18" />
+        <c-icon :path="mdiCog" size="20" />
         Settings
 
         <c-side-navigation-item :active="false">
-          <c-icon :path="mdiPalette" size="18" />
+          <c-icon :path="mdiPalette" size="20" />
           Colors
 
           <c-sub-navigation-item

diff --git a/packages/csc-ui-documentation/components/examples/c-steps/Basic.vue b/packages/csc-ui-documentation/components/examples/c-steps/Basic.vue
@@ -2,7 +2,7 @@
   <component-example name="basic" rows>
     <template #title>Basic usage</template>
 
-    <c-steps v-model="step" v-control>
+    <c-steps v-model="step">
       <c-step>Step number 1</c-step>
 
       <c-step>Step number 2</c-step>

diff --git a/packages/csc-ui-documentation/components/examples/c-tags/Index.vue b/packages/csc-ui-documentation/components/examples/c-tags/Index.vue
@@ -8,6 +8,8 @@
   <fit />
 
   <block />
+
+  <small-variant />
 </template>
 
 <script setup lang="ts">
@@ -16,6 +18,7 @@ import Flat from './Flat.vue';
 import Closeable from './Closeable.vue';
 import Fit from './Fit.vue';
 import Block from './Block.vue';
+import SmallVariant from './Small.vue';
 
 defineOptions({
   inheritAttrs: false,

diff --git a/packages/csc-ui-documentation/components/examples/c-tags/Small.vue b/packages/csc-ui-documentation/components/examples/c-tags/Small.vue
@@ -0,0 +1,34 @@
+<template>
+  <component-example name="small">
+    <template #title>Small variant</template>
+
+    <c-tags>
+      <c-tag
+        :active="activeTags[0]"
+        size="small"
+        badge="8"
+        @click="onToggleActive(0)"
+      >
+        One
+      </c-tag>
+
+      <c-tag :active="activeTags[1]" size="small" @click="onToggleActive(1)">
+        Two
+      </c-tag>
+
+      <c-tag :active="activeTags[2]" size="small" @click="onToggleActive(2)">
+        Three
+      </c-tag>
+    </c-tags>
+  </component-example>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const activeTags = ref([false, true, false]);
+
+const onToggleActive = (index: number) => {
+  activeTags.value[index] = !activeTags.value[index];
+};
+</script>
diff --git a/packages/csc-ui-documentation/package.json b/packages/csc-ui-documentation/package.json
@@ -2,29 +2,29 @@
   "dependencies": {
     "@cscfi/csc-ui": "*",
     "@cscfi/csc-ui-vue": "*",
-    "@mdi/js": "^7.2.96",
+    "@mdi/js": "^7.4.47",
     "@pinia/nuxt": "^0.4.11",
-    "@vueuse/nuxt": "^10.5.0",
+    "@vueuse/nuxt": "^10.7.2",
     "nuxt-stencil": "^0.1.1",
-    "pinia": "^2.1.6",
+    "pinia": "^2.1.7",
     "vue3-code-block": "^2.2.12"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
     "@nuxtjs/stylelint-module": "^5.1.0",
-    "@nuxtjs/tailwindcss": "^6.8.0",
-    "@typescript-eslint/parser": "^6.7.3",
+    "@nuxtjs/tailwindcss": "^6.10.4",
+    "@typescript-eslint/parser": "^6.19.0",
     "@vitejs/plugin-vue": "^4.3.4",
-    "eslint": "^8.50.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-prettier": "^5.0.0",
-    "nuxt": "^3.7.4",
-    "prettier": "^3.0.3",
-    "sass": "^1.68.0",
-    "vue": "^3.3.4",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.1.3",
+    "nuxt": "^3.9.1",
+    "prettier": "^3.2.2",
+    "sass": "^1.69.7",
+    "vue": "^3.4.14",
     "vue-router": "^4.2.5"
   },
   "name": "@cscfi/csc-ui-documentation",
@@ -41,5 +41,5 @@
     "preview": "nuxt preview"
   },
   "type": "module",
-  "version": "1.0.0"
-}
+  "version": "1.3.8"
+}
diff --git a/packages/csc-ui/loader/index.d.ts b/packages/csc-ui/loader/index.d.ts
@@ -1,4 +1,3 @@
-
 export * from '../dist/types/components';
 export interface CustomElementsDefineOptions {
   exclude?: string[];
@@ -9,5 +8,14 @@ export interface CustomElementsDefineOptions {
   ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
-export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
 export declare function applyPolyfills(): Promise<void>;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;
diff --git a/packages/csc-ui/loader/package.json b/packages/csc-ui/loader/package.json
@@ -1,5 +1,6 @@
 {
-  "name": "testtttt-loader",
+  "name": "csc-ui-loader",
+  "private": true,
   "typings": "./index.d.ts",
   "module": "./index.js",
   "main": "./index.cjs.js",

diff --git a/packages/csc-ui/src/components.d.ts b/packages/csc-ui/src/components.d.ts
@@ -1013,6 +1013,10 @@ export namespace Components {
           * Length of the OTP code
          */
         "length": number;
+        /**
+          * Reset input value
+         */
+        "reset": () => Promise<void>;
         /**
           * Set the validíty of the input
          */
@@ -1021,6 +1025,10 @@ export namespace Components {
           * Custom validation message
          */
         "validation": string;
+        /**
+          * Value of the input
+         */
+        "value": string;
     }
     /**
      * @group Layout
@@ -1694,11 +1702,19 @@ export namespace Components {
           * Remove the hover effect
          */
         "flat": boolean;
+        /**
+          * Size of the tag
+         */
+        "size": 'default' | 'small';
     }
     /**
      * @group buttons
      */
     interface CTags {
+        /**
+          * Size of the tags
+         */
+        "size": 'default' | 'small';
     }
     /**
      * @group Form
@@ -4044,6 +4060,10 @@ declare namespace LocalJSX {
           * Custom validation message
          */
         "validation"?: string;
+        /**
+          * Value of the input
+         */
+        "value"?: string;
     }
     /**
      * @group Layout
@@ -4776,11 +4796,19 @@ declare namespace LocalJSX {
           * Emit close event on close icon click
          */
         "onClose"?: (event: CTagCustomEvent<any>) => void;
+        /**
+          * Size of the tag
+         */
+        "size"?: 'default' | 'small';
     }
     /**
      * @group buttons
      */
     interface CTags {
+        /**
+          * Size of the tags
+         */
+        "size"?: 'default' | 'small';
     }
     /**
      * @group Form

diff --git a/packages/csc-ui/src/components/c-button/c-button.scss b/packages/csc-ui/src/components/c-button/c-button.scss
@@ -12,6 +12,7 @@
 
   border-radius: var(--_c-button-border-radius);
   display: inline-flex;
+  min-width: max-content;
   transform: translateZ(0); // Safari border-radius fix
   transition: background-color 0.3s ease-in-out;