Merge branch 'feat/component' of github.com:wetix/responsive-ui into …

…feat/component

# Conflicts:
#	.gitignore

.github/dependabot.yml

@@ -7,5 +7,6 @@ version: 2
 updates:
   - package-ecosystem: "npm" # See documentation for possible values
     directory: "/" # Location of package manifests
+    target-branch: "dev"
     schedule:
       interval: "daily"

.github/workflows/test.yml

@@ -21,7 +21,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: ["14", "16", "17"]
+        node: ["16", "17"]
     name: Node ${{ matrix.node }} sample
     steps:
       - name: Checkout

.gitignore

@@ -13,4 +13,5 @@ public
 public/main.js
 *.log
 storybook-static
-yarn.lock
+yarn.lock
+package-lock.json

components/date-picker/src/DatePicker.svelte

@@ -7,6 +7,7 @@
   const today = new Date();
   const dateChangeEvent = "datechange";
   const duration = 150;
+  const dateRegex = new RegExp("^(\\d{4})-(\\d{2})-(\\d{2})$");
   const dispatch = createEventDispatcher<{ datechange: DateChangeEvent }>();
 
   let className = "";
@@ -19,21 +20,28 @@
   export let readonly = false;
   export let bordered = true;
   export let disabled = false;
-  export let format = (v: Date) => v;
+  // export let format = (v: Date) => v;
   export let disabledDate = (v: Date) => today > v;
 
+  let focused = false;
   let day = today.getDate();
   let month = today.getMonth();
   let year = today.getFullYear();
-  let focused = false;
+  let matches = dateRegex.exec(value);
+  if (matches) {
+    const date = new Date(matches[0]);
+    day = date.getDate();
+    month = date.getMonth();
+    year = date.getFullYear();
+  }
 
-  window.addEventListener("click", () => {
+  const handleClickOutside = () => {
     focused = false;
     open = false;
-  });
+  };
 
   const setDateOnlyIfValid = (value: string) => {
-    if (!/^\d{4}\-\d{2}\-\d{2}$/.test(value)) return false;
+    if (!dateRegex.test(value)) return false;
     if (isValidDate(value)) {
       const date = new Date(value);
       year = date.getFullYear();
@@ -86,6 +94,8 @@
   };
 </script>
 
+<svelte:window on:click={handleClickOutside} />
+
 <div
   class="resp-date-picker {className}"
   class:resp-date-picker--focused={focused}

components/date-picker/types/index.d.ts

@@ -7,7 +7,7 @@ export interface DatePickerProps {
   open?: boolean;
   placeholder?: string;
   value?: string;
-  ref?: null | HTMLInputElement;
+  ref?: HTMLInputElement;
   name?: string;
   readonly?: boolean;
   disabled?: boolean;

components/quantity/src/Quantity.svelte

@@ -25,15 +25,13 @@
 
   const handleDecrement = () => {
     if (minLimit) return;
-    const ratio = -step;
-    value += ratio;
+    value += -step;
     ref.stepDown(step);
   };
 
   const handleIncrement = () => {
     if (maxLimit) return;
-    const ratio = +step;
-    value += ratio;
+    value += step;
     ref.stepUp(step);
   };
 
@@ -49,7 +47,7 @@
   };
 </script>
 
-<div
+<span
   class="resp-quantity {className}"
   class:resp-quantity--slim={slim}
   class:resp-quantity--focused={focused}
@@ -92,7 +90,7 @@
       </svg>`}
     </i>
   {/if}
-</div>
+</span>
 
 <style lang="scss" global>
   .resp-quantity {