svelte-tel-input 0.4.2 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # svelte-tel-input
 
+## 0.5.0
+
+### Minor Changes
+
+- feat: prepare github pages deployment ([#43](https://github.com/gyurielf/svelte-tel-input/pull/43))
+
+* feat: implement selects and input ([#43](https://github.com/gyurielf/svelte-tel-input/pull/43))
+
+- feat: basic stores created ([#43](https://github.com/gyurielf/svelte-tel-input/pull/43))
+
 ## 0.4.2
 
 ### Patch Changes

package/README.md

@@ -6,20 +6,22 @@
 
 ## Installation
 
----
-
 Svelte Tel Input is distributed via [npm](https://www.npmjs.com/package/svelte-tel-input).
 
 ```sh
 yarn add svelte-tel-input
+```
 
-# or
-
+```
 npm install --save svelte-tel-input
 ```
 
----
-
 ## Dependencies
 
 [libphonenumber-js](https://gitlab.com/catamphetamine/libphonenumber-js)
+
+## Changelog
+
+| Package                        | Changelog                 |
+| ------------------------------ | ------------------------- |
+| [@gyurielf/svelte-tel-input]() | [Changelog](CHANGELOG.md) |

package/components/Input/TelInput.svelte

@@ -0,0 +1,23 @@
+<script >import { enteredTelInputStore } from '../../stores';
+import { parsePhoneNumberWithError, ParseError } from 'libphonenumber-js';
+export let enteredTelInput;
+const handleInput = (event) => {
+    const inputVal = event.target.value;
+    enteredTelInput = inputVal;
+    $enteredTelInputStore = inputVal;
+    try {
+        const phoneNumber = parsePhoneNumberWithError(inputVal);
+    }
+    catch (error) {
+        if (error instanceof ParseError) {
+            // Not a phone number, non-existent country, etc.
+            console.log(error.message);
+        }
+        else {
+            throw error;
+        }
+    }
+};
+</script>
+
+<input class={$$props.class} type="tel" on:input={handleInput} />

package/components/Input/TelInput.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        enteredTelInput: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TelInputProps = typeof __propDef.props;
+export declare type TelInputEvents = typeof __propDef.events;
+export declare type TelInputSlots = typeof __propDef.slots;
+export default class TelInput extends SvelteComponentTyped<TelInputProps, TelInputEvents, TelInputSlots> {
+}
+export {};

package/components/Select/TelCountrySelect/TelCountrySelect.svelte

@@ -0,0 +1,15 @@
+<script >import { selectedCountryStore } from '../../../stores';
+export let selectedCountry;
+const setSelectedCountry = (value) => {
+    selectedCountry = value;
+    $selectedCountryStore = value;
+};
+</script>
+
+<select
+    name="country_select"
+    class="some-class {$$props.class}"
+    on:change={(e) => setSelectedCountry(e.currentTarget.value)}
+>
+    <slot name="options" />
+</select>

package/components/Select/TelCountrySelect/TelCountrySelect.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        selectedCountry: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        options: {};
+    };
+};
+export declare type TelCountrySelectProps = typeof __propDef.props;
+export declare type TelCountrySelectEvents = typeof __propDef.events;
+export declare type TelCountrySelectSlots = typeof __propDef.slots;
+export default class TelCountrySelect extends SvelteComponentTyped<TelCountrySelectProps, TelCountrySelectEvents, TelCountrySelectSlots> {
+}
+export {};

package/components/Select/TelRegionSelect/TelRegionSelect.svelte

@@ -0,0 +1,12 @@
+<script >"use strict";
+let selectedTelRegion;
+</script>
+
+<select
+    name="region_select"
+    class={$$props.class}
+    bind:value={selectedTelRegion}
+    on:change={() => console.log(selectedTelRegion)}
+>
+    <slot name="options" />
+</select>

package/components/Select/TelRegionSelect/TelRegionSelect.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        options: {};
+    };
+};
+export declare type TelRegionSelectProps = typeof __propDef.props;
+export declare type TelRegionSelectEvents = typeof __propDef.events;
+export declare type TelRegionSelectSlots = typeof __propDef.slots;
+export default class TelRegionSelect extends SvelteComponentTyped<TelRegionSelectProps, TelRegionSelectEvents, TelRegionSelectSlots> {
+}
+export {};

package/components/Select/TelRegionSelect/TelRegionSelectOption.svelte

@@ -0,0 +1,4 @@
+<script >export let regionOption;
+</script>
+
+<option class={$$props.class} value={regionOption.value}>{regionOption.label}</option>

package/components/Select/TelRegionSelect/TelRegionSelectOption.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SelectObject } from '../../../models/interfaces/Select.interface';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        regionOption: SelectObject;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TelRegionSelectOptionProps = typeof __propDef.props;
+export declare type TelRegionSelectOptionEvents = typeof __propDef.events;
+export declare type TelRegionSelectOptionSlots = typeof __propDef.slots;
+export default class TelRegionSelectOption extends SvelteComponentTyped<TelRegionSelectOptionProps, TelRegionSelectOptionEvents, TelRegionSelectOptionSlots> {
+}
+export {};

package/components/Select/TelTypeSelect/TelTypeSelect.svelte

@@ -0,0 +1,15 @@
+<script >import { selectedTelTypeStore } from '../../../stores';
+export let selectedTelType;
+const setSelectedCountry = (value) => {
+    selectedTelType = value;
+    $selectedTelTypeStore = value;
+};
+</script>
+
+<select
+    name="type_select"
+    class={$$props.class}
+    on:change={(e) => setSelectedCountry(e.currentTarget.value)}
+>
+    <slot name="options" />
+</select>

package/components/Select/TelTypeSelect/TelTypeSelect.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SelectType } from '../../../models/types/Select.type';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        selectedTelType: SelectType;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        options: {};
+    };
+};
+export declare type TelTypeSelectProps = typeof __propDef.props;
+export declare type TelTypeSelectEvents = typeof __propDef.events;
+export declare type TelTypeSelectSlots = typeof __propDef.slots;
+export default class TelTypeSelect extends SvelteComponentTyped<TelTypeSelectProps, TelTypeSelectEvents, TelTypeSelectSlots> {
+}
+export {};

package/components/Select/TelTypeSelect/TelTypeSelectOption.svelte

@@ -0,0 +1,4 @@
+<script >export let typeOption;
+</script>
+
+<option class={$$props.class} value={typeOption.value}>{typeOption.label}</option>

package/components/Select/TelTypeSelect/TelTypeSelectOption.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SelectObject } from '../../../models/interfaces/Select.interface';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        typeOption: SelectObject;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TelTypeSelectOptionProps = typeof __propDef.props;
+export declare type TelTypeSelectOptionEvents = typeof __propDef.events;
+export declare type TelTypeSelectOptionSlots = typeof __propDef.slots;
+export default class TelTypeSelectOption extends SvelteComponentTyped<TelTypeSelectOptionProps, TelTypeSelectOptionEvents, TelTypeSelectOptionSlots> {
+}
+export {};

package/index.d.ts

@@ -1,2 +1,6 @@
-export { default as LazyLoad } from './components/LazyLoad/LazyLoad.svelte';
-export { default as PhoneInput } from './components/Input/SvelteTelInput.svelte';
+export { default as TelCountrySelect } from "./components/Select/TelCountrySelect/TelCountrySelect.svelte";
+export { default as TelTypeSelect } from "./components/Select/TelTypeSelect/TelTypeSelect.svelte";
+export { default as TelTypeSelectOption } from "./components/Select/TelTypeSelect/TelTypeSelectOption.svelte";
+export { default as TelRegionSelect } from "./components/Select/TelRegionSelect/TelRegionSelect.svelte";
+export { default as TelRegionSelectOption } from "./components/Select/TelRegionSelect/TelRegionSelectOption.svelte";
+export { default as TelInput } from "./components/Input/TelInput.svelte";

package/index.js

@@ -1,2 +1,6 @@
-export { default as LazyLoad } from './components/LazyLoad/LazyLoad.svelte';
-export { default as PhoneInput } from './components/Input/SvelteTelInput.svelte';
+export { default as TelCountrySelect } from './components/Select/TelCountrySelect/TelCountrySelect.svelte';
+export { default as TelTypeSelect } from './components/Select/TelTypeSelect/TelTypeSelect.svelte';
+export { default as TelTypeSelectOption } from './components/Select/TelTypeSelect/TelTypeSelectOption.svelte';
+export { default as TelRegionSelect } from './components/Select/TelRegionSelect/TelRegionSelect.svelte';
+export { default as TelRegionSelectOption } from './components/Select/TelRegionSelect/TelRegionSelectOption.svelte';
+export { default as TelInput } from './components/Input/TelInput.svelte';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svelte-tel-input",
   "description": "svelte-tel-input",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gyurielf/svelte-tel-input.git"
@@ -17,20 +17,20 @@
   ],
   "engines": {
     "npm": ">= 7",
-    "yarn": "please-use-npm",
+    "yarn": ">=2",
     "node": ">= 16"
   },
   "dependencies": {
     "libphonenumber-js": "^1.9.44"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.10",
-    "@babel/preset-env": "^7.16.10",
+    "@babel/core": "^7.16.12",
+    "@babel/preset-env": "^7.16.11",
     "@changesets/cli": "^2.19.0",
     "@changesets/get-github-info": "^0.5.0",
     "@changesets/types": "^4.0.2",
     "@sveltejs/adapter-static": "^1.0.0-next.26",
-    "@sveltejs/kit": "^1.0.0-next.234",
+    "@sveltejs/kit": "^1.0.0-next.240",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/svelte": "^3.0.3",
     "@types/jest": "^27.4.0",
@@ -40,7 +40,7 @@
     "babel-jest": "^27.4.6",
     "babel-loader": "^8.2.3",
     "commitizen": "^4.2.4",
-    "cssnano": "^5.0.15",
+    "cssnano": "^5.0.16",
     "dotenv": "^14.2.0",
     "eslint": "^8.7.0",
     "eslint-config-prettier": "^8.3.0",
@@ -67,7 +67,7 @@
     "ts-jest": "^27.1.3",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "tslib": "^2.3.1",
-    "typescript": "^4.5.4"
+    "typescript": "^4.5.5"
   },
   "standard-version": {
     "skip": {
@@ -143,9 +143,12 @@
     "./package.json": "./package.json",
     "./assets/countries": "./assets/countries.js",
     "./assets/regions": "./assets/regions.js",
-    "./components/Input/SvelteTelInput.svelte": "./components/Input/SvelteTelInput.svelte",
-    "./components/Select/CountrySelect.svelte": "./components/Select/CountrySelect.svelte",
-    "./components/Select/RegionSelect.svelte": "./components/Select/RegionSelect.svelte",
+    "./components/Input/TelInput.svelte": "./components/Input/TelInput.svelte",
+    "./components/Select/TelCountrySelect/TelCountrySelect.svelte": "./components/Select/TelCountrySelect/TelCountrySelect.svelte",
+    "./components/Select/TelRegionSelect/TelRegionSelect.svelte": "./components/Select/TelRegionSelect/TelRegionSelect.svelte",
+    "./components/Select/TelRegionSelect/TelRegionSelectOption.svelte": "./components/Select/TelRegionSelect/TelRegionSelectOption.svelte",
+    "./components/Select/TelTypeSelect/TelTypeSelect.svelte": "./components/Select/TelTypeSelect/TelTypeSelect.svelte",
+    "./components/Select/TelTypeSelect/TelTypeSelectOption.svelte": "./components/Select/TelTypeSelect/TelTypeSelectOption.svelte",
     ".": "./index.js",
     "./models/enums/PhoneType.enum": "./models/enums/PhoneType.enum.js",
     "./models/enums": "./models/enums/index.js",
@@ -155,6 +158,7 @@
     "./models/types/Select.type": "./models/types/Select.type.js",
     "./stores": "./stores/index.js",
     "./utils/directives/clickOutsideAction": "./utils/directives/clickOutsideAction.js",
+    "./utils/helpers": "./utils/helpers.js",
     "./utils/simulator": "./utils/simulator.js",
     "./utils/typeCheck": "./utils/typeCheck.js"
   }

package/stores/index.d.ts

@@ -1,11 +1,17 @@
+import type { Writable } from 'svelte/store';
+import type { SelectType } from '../models/types/Select.type';
 export declare const booleanStore: (initial: boolean) => {
-    isOpen: import("svelte/store").Writable<boolean>;
+    isOpen: Writable<boolean>;
     open: () => void;
     close: () => void;
     toggle: () => void;
 };
 export declare const statefulSwap: (initialState: boolean | null) => {
-    transitionState: import("svelte/store").Writable<boolean | null>;
+    transitionState: Writable<boolean | null>;
     transitionTo: (newState: boolean | null) => void;
     onOutro: () => void;
 };
+export declare const selectedCountryStore: Writable<string>;
+export declare const selectedRegionStore: Writable<string>;
+export declare const selectedTelTypeStore: Writable<SelectType>;
+export declare const enteredTelInputStore: Writable<string>;

package/stores/index.js

@@ -29,3 +29,9 @@ export const statefulSwap = (initialState) => {
         onOutro
     };
 };
+// SELECTS
+export const selectedCountryStore = writable();
+export const selectedRegionStore = writable();
+export const selectedTelTypeStore = writable();
+// INPUT
+export const enteredTelInputStore = writable();

package/utils/helpers.d.ts

@@ -0,0 +1 @@
+export declare const capitalize: (str: string) => string;

package/utils/helpers.js

@@ -0,0 +1,3 @@
+export const capitalize = (str) => {
+    return (str && str[0].toUpperCase() + str.slice(1).toLowerCase()) || '';
+};

package/components/Input/SvelteTelInput.svelte

@@ -1,23 +0,0 @@
-<script >import { parsePhoneNumberFromString } from 'libphonenumber-js';
-let telInputNumber;
-// const phoneNumber = parsePhoneNumber(' 8 (800) 555-35-35 ', 'RU');
-// if (phoneNumber) {
-//     phoneNumber.country === 'RU';
-//     phoneNumber.number === '+78005553535';
-//     phoneNumber.isValid() === true;
-//     // Note: `.getType()` requires `/max` metadata: see below for an explanation.
-//     phoneNumber.getType() === 'TOLL_FREE';
-// }
-// const parse = parsePhoneNumber(telInputNumber);
-const handleInput = (event) => {
-    let inputVal = event.target.value;
-    console.log(parsePhoneNumberFromString(inputVal));
-};
-$: console.log(telInputNumber);
-</script>
-
-<input
-    class="px-4 py-1 text-gray-900 rounded-full focus:outline-none"
-    type="tel"
-    on:input={handleInput}
-/>

package/components/Input/SvelteTelInput.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {};
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type SvelteTelInputProps = typeof __propDef.props;
-export declare type SvelteTelInputEvents = typeof __propDef.events;
-export declare type SvelteTelInputSlots = typeof __propDef.slots;
-export default class SvelteTelInput extends SvelteComponentTyped<SvelteTelInputProps, SvelteTelInputEvents, SvelteTelInputSlots> {
-}
-export {};

package/components/Select/CountrySelect.svelte

@@ -1,14 +0,0 @@
-<script >import rawCountries from '../../assets/countries';
-let selectedCountry;
-</script>
-
-<select
-    name="countrySelect"
-    class="text-gray-700"
-    bind:value={selectedCountry}
-    on:change={() => console.log(selectedCountry)}
->
-    {#each rawCountries as country}
-        <option value={country[2]}>{country[0]}</option>
-    {/each}
-</select>

package/components/Select/CountrySelect.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {};
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type CountrySelectProps = typeof __propDef.props;
-export declare type CountrySelectEvents = typeof __propDef.events;
-export declare type CountrySelectSlots = typeof __propDef.slots;
-export default class CountrySelect extends SvelteComponentTyped<CountrySelectProps, CountrySelectEvents, CountrySelectSlots> {
-}
-export {};

package/components/Select/RegionSelect.svelte

@@ -1,14 +0,0 @@
-<script >import rawRegions from '../../assets/regions';
-let selectedRegion;
-</script>
-
-<select
-    name="countrySelect"
-    class="text-gray-700"
-    bind:value={selectedRegion}
-    on:change={() => console.log(selectedRegion)}
->
-    {#each rawRegions as region}
-        <option value={region[2]}>{region[0]}</option>
-    {/each}
-</select>

package/components/Select/RegionSelect.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {};
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type RegionSelectProps = typeof __propDef.props;
-export declare type RegionSelectEvents = typeof __propDef.events;
-export declare type RegionSelectSlots = typeof __propDef.slots;
-export default class RegionSelect extends SvelteComponentTyped<RegionSelectProps, RegionSelectEvents, RegionSelectSlots> {
-}
-export {};