├── .editorconfig
├── .gitignore
├── .prettierignore
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── demo
    ├── README.md
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── favicon.ico
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── logo.png
    │   ├── components
    │   │   └── HelloWorld.vue
    │   └── main.js
    └── vite.config.js
├── package-lock.json
├── package.json
├── prettier.config.js
├── rollup.config.js
└── src
    └── vue-sl-model.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # http://editorconfig.org
 2 | 
 3 | root = true
 4 | 
 5 | [*]
 6 | charset = utf-8
 7 | indent_style = space
 8 | indent_size = 2
 9 | end_of_line = lf
10 | insert_final_newline = true
11 | trim_trailing_whitespace = true
12 | 
13 | [*.md]
14 | insert_final_newline = false
15 | trim_trailing_whitespace = false
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | dist
 2 | node_modules
 3 | 
 4 | .DS_Store
 5 | demo/*.local
 6 | demo/dist
 7 | demo/dist-ssr
 8 | demo/node_modules
 9 | demo/public/assets/icons
10 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | .github
2 | dist
3 | node_modules
4 | package-lock.json
5 | README.md
6 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | 
 3 | ## 1.0.1
 4 | 
 5 | - Fixed a bug where `<sl-select>` wasn't working properly because it doesn't emit `sl-input` [#4](https://github.com/shoelace-style/vue-sl-model/pull/4)
 6 | 
 7 | ## 1.0.0
 8 | 
 9 | - Initial release
10 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright (c) 2020 A Beautiful Site, LLC
2 | 
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 | 
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 | 
7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue Directive for Two-way Binding Shoelace Components
 2 | 
 3 | A custom Vue 3 directive that makes two-way binding [Shoelace components](https://shoelace.style) easier.
 4 | 
 5 | <details>
 6 | <summary>Instructions for Vue 2 users</summary>
 7 | 
 8 | If you're looking for a directive that's compatible with Vue 2, install version 1 of this package:
 9 | 
10 | ```bash
11 | npm install @shoelace-style/vue-sl-model@1
12 | ```
13 | 
14 | Then [follow these instructions](https://github.com/shoelace-style/vue-sl-model/tree/77cac5afd36bd6e3321b0a738e3c1751ff006158#vue-directive-for-two-way-binding-shoelace-components) instead.
15 | 
16 | </details>
17 | 
18 | ## Usage
19 | 
20 | Install the directive with this command.
21 | 
22 | ```sh
23 | npm install @shoelace-style/vue-sl-model
24 | ```
25 | 
26 | Next, import the directive into your app and enable it like this.
27 | 
28 | ```js
29 | import "@shoelace-style/shoelace/dist/themes/light.css"
30 | import "@shoelace-style/shoelace/dist/components/input/input"
31 | 
32 | import ShoelaceModelDirective from '@shoelace-style/vue-sl-model'
33 | import { createApp } from 'vue'
34 | import App from './App.vue'
35 | 
36 | const app = createApp(App)
37 | app.use(ShoelaceModelDirective)
38 | 
39 | app.config.compilerOptions.isCustomElement = tag => tag.startsWith('sl-')
40 | 
41 | // If using Vite, the above "isCustomElement" needs to be deleted and defined in vite.config.js
42 | // See below for an example vite.config.js
43 | 
44 | app.mount('#app')
45 | ```
46 | 
47 | Now you can use the `v-sl-model` directive to keep your data in sync!
48 | 
49 | ```html
50 | <sl-input v-sl-model="name"></sl-input>
51 | ```
52 | 
53 | ## Why is this necessary?
54 | 
55 | Currently, there's [no support for v-model on custom elements](https://github.com/vuejs/vue/issues/7830) in Vue. You can handle two-way binding manually, but's it rather verbose.
56 | 
57 | ```html
58 | <!-- This doesn't work -->
59 | <sl-input v-model="name"></sl-input>
60 | 
61 | <!-- This works, but it's a bit longer -->
62 | <sl-input :value="name" @input="name = $event.target.value"></sl-input>
63 | ```
64 | 
65 | This utility solves this problem by creating a custom directive that works just like `v-model` but for Shoelace components.
66 | 
67 | ## Using Vite
68 | 
69 | ```js
70 | // vite.config.js
71 | import { defineConfig } from 'vite'
72 | import vue from '@vitejs/plugin-vue'
73 | 
74 | // https://vitejs.dev/config/
75 | export default defineConfig({
76 |   plugins: [
77 |     vue({
78 |       template: {
79 |         compilerOptions: {
80 |           isCustomElement: (tag) => tag.startsWith('sl-')
81 |         }
82 |       },
83 |     })
84 |   ]
85 | })
86 | ```
87 | 


--------------------------------------------------------------------------------
/demo/README.md:
--------------------------------------------------------------------------------
1 | # Vue 3 + Vite
2 | 
3 | This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
4 | 
5 | ## Recommended IDE Setup
6 | 
7 | - [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
8 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite App</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.js"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/demo/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "demo",
  3 |   "version": "0.0.0",
  4 |   "lockfileVersion": 2,
  5 |   "requires": true,
  6 |   "packages": {
  7 |     "": {
  8 |       "version": "0.0.0",
  9 |       "dependencies": {
 10 |         "@shoelace-style/shoelace": "*",
 11 |         "@shoelace-style/vue-sl-model": "file:../",
 12 |         "vue": "^3.2.13"
 13 |       },
 14 |       "devDependencies": {
 15 |         "@vitejs/plugin-vue": "^1.9.0",
 16 |         "vite": "^2.5.10"
 17 |       }
 18 |     },
 19 |     "..": {
 20 |       "name": "@shoelace-style/vue-sl-model",
 21 |       "version": "2.0.0",
 22 |       "license": "MIT",
 23 |       "devDependencies": {
 24 |         "@babel/cli": "^7.10.4",
 25 |         "@babel/core": "^7.10.4",
 26 |         "@babel/preset-env": "^7.10.4",
 27 |         "@rollup/plugin-babel": "^5.3.0",
 28 |         "rollup": "^2.21.0",
 29 |         "rollup-plugin-node-resolve": "^5.2.0",
 30 |         "rollup-plugin-terser": "^6.1.0"
 31 |       },
 32 |       "peerDependencies": {
 33 |         "@vue/compat": ">= 3.1.0-0",
 34 |         "vue": ">= 3.1.0-0"
 35 |       }
 36 |     },
 37 |     "../..": {},
 38 |     "../../..": {},
 39 |     "node_modules/@babel/parser": {
 40 |       "version": "7.15.7",
 41 |       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.7.tgz",
 42 |       "integrity": "sha512-rycZXvQ+xS9QyIcJ9HXeDWf1uxqlbVFAUq0Rq0dbc50Zb/+wUe/ehyfzGfm9KZZF0kBejYgxltBXocP+gKdL2g==",
 43 |       "bin": {
 44 |         "parser": "bin/babel-parser.js"
 45 |       },
 46 |       "engines": {
 47 |         "node": ">=6.0.0"
 48 |       }
 49 |     },
 50 |     "node_modules/@lit/reactive-element": {
 51 |       "version": "1.0.0",
 52 |       "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.0.0.tgz",
 53 |       "integrity": "sha512-Kpgenb8UNFsKCsFhggiVvUkCbcFQSd6N8hffYEEGjz27/4rw3cTSsmP9t3q1EHOAsdum60Wo64HvuZDFpEwexA=="
 54 |     },
 55 |     "node_modules/@popperjs/core": {
 56 |       "version": "2.10.1",
 57 |       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.1.tgz",
 58 |       "integrity": "sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw==",
 59 |       "funding": {
 60 |         "type": "opencollective",
 61 |         "url": "https://opencollective.com/popperjs"
 62 |       }
 63 |     },
 64 |     "node_modules/@shoelace-style/animations": {
 65 |       "version": "1.1.0",
 66 |       "resolved": "https://registry.npmjs.org/@shoelace-style/animations/-/animations-1.1.0.tgz",
 67 |       "integrity": "sha512-Be+cahtZyI2dPKRm8EZSx3YJQ+jLvEcn3xzRP7tM4tqBnvd/eW/64Xh0iOf0t2w5P8iJKfdBbpVNE9naCaOf2g==",
 68 |       "funding": {
 69 |         "type": "individual",
 70 |         "url": "https://github.com/sponsors/claviska"
 71 |       }
 72 |     },
 73 |     "node_modules/@shoelace-style/shoelace": {
 74 |       "version": "2.0.0-beta.52",
 75 |       "resolved": "https://registry.npmjs.org/@shoelace-style/shoelace/-/shoelace-2.0.0-beta.52.tgz",
 76 |       "integrity": "sha512-O4xXJ06EInHYUNQgtoin7bh2kRfGKK36ow+HFYqPluxQFkuCx1gIl26JIIUMiN7WYJLpL7w0KUGSqS6AmsSaQg==",
 77 |       "dependencies": {
 78 |         "@popperjs/core": "^2.7.0",
 79 |         "@shoelace-style/animations": "^1.1.0",
 80 |         "color": "^3.1.3",
 81 |         "lit": "^2.0.0",
 82 |         "lit-html": "^2.0.0",
 83 |         "qr-creator": "^1.0.0"
 84 |       },
 85 |       "funding": {
 86 |         "type": "individual",
 87 |         "url": "https://github.com/sponsors/claviska"
 88 |       }
 89 |     },
 90 |     "node_modules/@shoelace-style/vue-sl-model": {
 91 |       "resolved": "..",
 92 |       "link": true
 93 |     },
 94 |     "node_modules/@types/trusted-types": {
 95 |       "version": "2.0.2",
 96 |       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
 97 |       "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
 98 |     },
 99 |     "node_modules/@vitejs/plugin-vue": {
100 |       "version": "1.9.0",
101 |       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.9.0.tgz",
102 |       "integrity": "sha512-TQB87f8baZsTZO/g7Az/dTCwV8eDxwkrP8hMl8HpwLJz/NKvmXtBqa7bYg8GKWNwqjy+pBRLdgiML+BI3HphOw==",
103 |       "dev": true,
104 |       "engines": {
105 |         "node": ">=12.0.0"
106 |       },
107 |       "peerDependencies": {
108 |         "vite": "^2.5.10"
109 |       }
110 |     },
111 |     "node_modules/@vue/compiler-core": {
112 |       "version": "3.2.13",
113 |       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.13.tgz",
114 |       "integrity": "sha512-H8MUuKVCfAT6C0vth/+1LAriKnM+RTFo/5MoFycwRPwworTvkpWq/EuGoIXdLBblo8Y2/bNsOmIBEEoOtrb/bQ==",
115 |       "dependencies": {
116 |         "@babel/parser": "^7.15.0",
117 |         "@vue/shared": "3.2.13",
118 |         "estree-walker": "^2.0.2",
119 |         "source-map": "^0.6.1"
120 |       }
121 |     },
122 |     "node_modules/@vue/compiler-dom": {
123 |       "version": "3.2.13",
124 |       "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.13.tgz",
125 |       "integrity": "sha512-5+2dYgQyNzM97EEgbdAusUpLjulcKkvLM26jOGpd14+qwEcW/KCnns5DGjlZD/tsdEwToOoTDCm+mjx7cO/G1Q==",
126 |       "dependencies": {
127 |         "@vue/compiler-core": "3.2.13",
128 |         "@vue/shared": "3.2.13"
129 |       }
130 |     },
131 |     "node_modules/@vue/compiler-sfc": {
132 |       "version": "3.2.13",
133 |       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.13.tgz",
134 |       "integrity": "sha512-3j970d969aOILykcTstdihP33xH1Onm0wsvcl+rGv9AGxivB9xicRxBw93HCIA4dAPivr42WjHEoci9q2/85uw==",
135 |       "dependencies": {
136 |         "@babel/parser": "^7.15.0",
137 |         "@vue/compiler-core": "3.2.13",
138 |         "@vue/compiler-dom": "3.2.13",
139 |         "@vue/compiler-ssr": "3.2.13",
140 |         "@vue/ref-transform": "3.2.13",
141 |         "@vue/shared": "3.2.13",
142 |         "estree-walker": "^2.0.2",
143 |         "magic-string": "^0.25.7",
144 |         "postcss": "^8.1.10",
145 |         "source-map": "^0.6.1"
146 |       }
147 |     },
148 |     "node_modules/@vue/compiler-ssr": {
149 |       "version": "3.2.13",
150 |       "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.13.tgz",
151 |       "integrity": "sha512-ZbO6uDhUWTdKBRguYNEZXj2FU3nh1cudoHBiidbxj9q5J0tVT+j1PSVFAXPq6SquUBdJpa4HvGkQ5kQzv6upXg==",
152 |       "dependencies": {
153 |         "@vue/compiler-dom": "3.2.13",
154 |         "@vue/shared": "3.2.13"
155 |       }
156 |     },
157 |     "node_modules/@vue/reactivity": {
158 |       "version": "3.2.13",
159 |       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.13.tgz",
160 |       "integrity": "sha512-j3ByCiRgrr4uEZpXJM8XowrbYKeNHMHlbmMZE/2QpVzVPIfrQWS2fpLmbchJeMrnwIrzEl+dub3hgwkV4KRn4w==",
161 |       "dependencies": {
162 |         "@vue/shared": "3.2.13"
163 |       }
164 |     },
165 |     "node_modules/@vue/ref-transform": {
166 |       "version": "3.2.13",
167 |       "resolved": "https://registry.npmjs.org/@vue/ref-transform/-/ref-transform-3.2.13.tgz",
168 |       "integrity": "sha512-q6GXHZFzXjpx1K3UFRF8fa+xSmD9xV/FjhGzTNnfrryBr8tBUNYgP2f0s5K5N+21Ay7+MlQ1XXMUp8McGvsryQ==",
169 |       "dependencies": {
170 |         "@babel/parser": "^7.15.0",
171 |         "@vue/compiler-core": "3.2.13",
172 |         "@vue/shared": "3.2.13",
173 |         "estree-walker": "^2.0.2",
174 |         "magic-string": "^0.25.7"
175 |       }
176 |     },
177 |     "node_modules/@vue/runtime-core": {
178 |       "version": "3.2.13",
179 |       "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.13.tgz",
180 |       "integrity": "sha512-VQedL9Wa7yWMPVDrIkxzLCm6cWCDBoXcXc+jrsOJkqpWhEeA7+zGOsDsHzhLH8aaJD6vdnUR5Cy0EKvoJDqEWQ==",
181 |       "dependencies": {
182 |         "@vue/reactivity": "3.2.13",
183 |         "@vue/shared": "3.2.13"
184 |       }
185 |     },
186 |     "node_modules/@vue/runtime-dom": {
187 |       "version": "3.2.13",
188 |       "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.13.tgz",
189 |       "integrity": "sha512-DVG+ItkrnCOEa9HSrmGBTLwv/gBVYCO8wkm/yv+d5ChoTnyIILxP0oCiZEPJsgWZfUSRPNi5rXozwo7F99MiwQ==",
190 |       "dependencies": {
191 |         "@vue/runtime-core": "3.2.13",
192 |         "@vue/shared": "3.2.13",
193 |         "csstype": "^2.6.8"
194 |       }
195 |     },
196 |     "node_modules/@vue/server-renderer": {
197 |       "version": "3.2.13",
198 |       "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.13.tgz",
199 |       "integrity": "sha512-KI+JFV+vRb95+Jb6IwRRm4Vhvj8wrJTNs+OlATfqwwIRpBGAyxn/4knDJYzlnUf/mrKAkrbw751mHhi+pEwILQ==",
200 |       "dependencies": {
201 |         "@vue/compiler-ssr": "3.2.13",
202 |         "@vue/shared": "3.2.13"
203 |       },
204 |       "peerDependencies": {
205 |         "vue": "3.2.13"
206 |       }
207 |     },
208 |     "node_modules/@vue/shared": {
209 |       "version": "3.2.13",
210 |       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.13.tgz",
211 |       "integrity": "sha512-F/gs3kHQ8Xeo24F6EImOvBiIoYQsBjF9qoLzvk+LHxYN6ZhIDEL1NWrBFYzdFQ7NphjEYd4EvPZ+Qee+WX8P6w=="
212 |     },
213 |     "node_modules/color": {
214 |       "version": "3.2.1",
215 |       "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
216 |       "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
217 |       "dependencies": {
218 |         "color-convert": "^1.9.3",
219 |         "color-string": "^1.6.0"
220 |       }
221 |     },
222 |     "node_modules/color-convert": {
223 |       "version": "1.9.3",
224 |       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
225 |       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
226 |       "dependencies": {
227 |         "color-name": "1.1.3"
228 |       }
229 |     },
230 |     "node_modules/color-name": {
231 |       "version": "1.1.3",
232 |       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
233 |       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
234 |     },
235 |     "node_modules/color-string": {
236 |       "version": "1.6.0",
237 |       "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.6.0.tgz",
238 |       "integrity": "sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==",
239 |       "dependencies": {
240 |         "color-name": "^1.0.0",
241 |         "simple-swizzle": "^0.2.2"
242 |       }
243 |     },
244 |     "node_modules/colorette": {
245 |       "version": "1.4.0",
246 |       "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz",
247 |       "integrity": "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g=="
248 |     },
249 |     "node_modules/csstype": {
250 |       "version": "2.6.18",
251 |       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.18.tgz",
252 |       "integrity": "sha512-RSU6Hyeg14am3Ah4VZEmeX8H7kLwEEirXe6aU2IPfKNvhXwTflK5HQRDNI0ypQXoqmm+QPyG2IaPuQE5zMwSIQ=="
253 |     },
254 |     "node_modules/esbuild": {
255 |       "version": "0.12.28",
256 |       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.28.tgz",
257 |       "integrity": "sha512-pZ0FrWZXlvQOATlp14lRSk1N9GkeJ3vLIwOcUoo3ICQn9WNR4rWoNi81pbn6sC1iYUy7QPqNzI3+AEzokwyVcA==",
258 |       "dev": true,
259 |       "hasInstallScript": true,
260 |       "bin": {
261 |         "esbuild": "bin/esbuild"
262 |       }
263 |     },
264 |     "node_modules/estree-walker": {
265 |       "version": "2.0.2",
266 |       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
267 |       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
268 |     },
269 |     "node_modules/fsevents": {
270 |       "version": "2.3.2",
271 |       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
272 |       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
273 |       "dev": true,
274 |       "hasInstallScript": true,
275 |       "optional": true,
276 |       "os": [
277 |         "darwin"
278 |       ],
279 |       "engines": {
280 |         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
281 |       }
282 |     },
283 |     "node_modules/function-bind": {
284 |       "version": "1.1.1",
285 |       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
286 |       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
287 |       "dev": true
288 |     },
289 |     "node_modules/has": {
290 |       "version": "1.0.3",
291 |       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
292 |       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
293 |       "dev": true,
294 |       "dependencies": {
295 |         "function-bind": "^1.1.1"
296 |       },
297 |       "engines": {
298 |         "node": ">= 0.4.0"
299 |       }
300 |     },
301 |     "node_modules/is-arrayish": {
302 |       "version": "0.3.2",
303 |       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
304 |       "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
305 |     },
306 |     "node_modules/is-core-module": {
307 |       "version": "2.6.0",
308 |       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.6.0.tgz",
309 |       "integrity": "sha512-wShG8vs60jKfPWpF2KZRaAtvt3a20OAn7+IJ6hLPECpSABLcKtFKTTI4ZtH5QcBruBHlq+WsdHWyz0BCZW7svQ==",
310 |       "dev": true,
311 |       "dependencies": {
312 |         "has": "^1.0.3"
313 |       },
314 |       "funding": {
315 |         "url": "https://github.com/sponsors/ljharb"
316 |       }
317 |     },
318 |     "node_modules/lit": {
319 |       "version": "2.0.0",
320 |       "resolved": "https://registry.npmjs.org/lit/-/lit-2.0.0.tgz",
321 |       "integrity": "sha512-pqi5O/wVzQ9Bn4ERRoYQlt1EAUWyY5Wv888vzpoArbtChc+zfUv1XohRqSdtQZYCogl0eHKd+MQwymg2XJfECg==",
322 |       "dependencies": {
323 |         "@lit/reactive-element": "^1.0.0",
324 |         "lit-element": "^3.0.0",
325 |         "lit-html": "^2.0.0"
326 |       }
327 |     },
328 |     "node_modules/lit-element": {
329 |       "version": "3.0.0",
330 |       "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.0.0.tgz",
331 |       "integrity": "sha512-oPqRhhBBhs+AlI62QLwtWQNU/bNK/h2L1jI3IDroqZubo6XVAkyNy2dW3CRfjij8mrNlY7wULOfyyKKOnfEePA==",
332 |       "dependencies": {
333 |         "@lit/reactive-element": "^1.0.0",
334 |         "lit-html": "^2.0.0"
335 |       }
336 |     },
337 |     "node_modules/lit-html": {
338 |       "version": "2.0.0",
339 |       "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.0.0.tgz",
340 |       "integrity": "sha512-tJsCapCmc0vtLj6harqd6HfCxnlt/RSkgowtz4SC9dFE3nSL38Tb33I5HMDiyJsRjQZRTgpVsahrnDrR9wg27w==",
341 |       "dependencies": {
342 |         "@types/trusted-types": "^2.0.2"
343 |       }
344 |     },
345 |     "node_modules/magic-string": {
346 |       "version": "0.25.7",
347 |       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
348 |       "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
349 |       "dependencies": {
350 |         "sourcemap-codec": "^1.4.4"
351 |       }
352 |     },
353 |     "node_modules/nanoid": {
354 |       "version": "3.1.25",
355 |       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.25.tgz",
356 |       "integrity": "sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==",
357 |       "bin": {
358 |         "nanoid": "bin/nanoid.cjs"
359 |       },
360 |       "engines": {
361 |         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
362 |       }
363 |     },
364 |     "node_modules/path-parse": {
365 |       "version": "1.0.7",
366 |       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
367 |       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
368 |       "dev": true
369 |     },
370 |     "node_modules/postcss": {
371 |       "version": "8.3.6",
372 |       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.6.tgz",
373 |       "integrity": "sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==",
374 |       "dependencies": {
375 |         "colorette": "^1.2.2",
376 |         "nanoid": "^3.1.23",
377 |         "source-map-js": "^0.6.2"
378 |       },
379 |       "engines": {
380 |         "node": "^10 || ^12 || >=14"
381 |       },
382 |       "funding": {
383 |         "type": "opencollective",
384 |         "url": "https://opencollective.com/postcss/"
385 |       }
386 |     },
387 |     "node_modules/qr-creator": {
388 |       "version": "1.0.0",
389 |       "resolved": "https://registry.npmjs.org/qr-creator/-/qr-creator-1.0.0.tgz",
390 |       "integrity": "sha512-C0cqfbS1P5hfqN4NhsYsUXePlk9BO+a45bAQ3xLYjBL3bOIFzoVEjs79Fado9u9BPBD3buHi3+vY+C8tHh4qMQ=="
391 |     },
392 |     "node_modules/resolve": {
393 |       "version": "1.20.0",
394 |       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
395 |       "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
396 |       "dev": true,
397 |       "dependencies": {
398 |         "is-core-module": "^2.2.0",
399 |         "path-parse": "^1.0.6"
400 |       },
401 |       "funding": {
402 |         "url": "https://github.com/sponsors/ljharb"
403 |       }
404 |     },
405 |     "node_modules/rollup": {
406 |       "version": "2.56.3",
407 |       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.56.3.tgz",
408 |       "integrity": "sha512-Au92NuznFklgQCUcV96iXlxUbHuB1vQMaH76DHl5M11TotjOHwqk9CwcrT78+Tnv4FN9uTBxq6p4EJoYkpyekg==",
409 |       "dev": true,
410 |       "bin": {
411 |         "rollup": "dist/bin/rollup"
412 |       },
413 |       "engines": {
414 |         "node": ">=10.0.0"
415 |       },
416 |       "optionalDependencies": {
417 |         "fsevents": "~2.3.2"
418 |       }
419 |     },
420 |     "node_modules/simple-swizzle": {
421 |       "version": "0.2.2",
422 |       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
423 |       "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
424 |       "dependencies": {
425 |         "is-arrayish": "^0.3.1"
426 |       }
427 |     },
428 |     "node_modules/source-map": {
429 |       "version": "0.6.1",
430 |       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
431 |       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
432 |       "engines": {
433 |         "node": ">=0.10.0"
434 |       }
435 |     },
436 |     "node_modules/source-map-js": {
437 |       "version": "0.6.2",
438 |       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
439 |       "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
440 |       "engines": {
441 |         "node": ">=0.10.0"
442 |       }
443 |     },
444 |     "node_modules/sourcemap-codec": {
445 |       "version": "1.4.8",
446 |       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
447 |       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
448 |     },
449 |     "node_modules/vite": {
450 |       "version": "2.5.10",
451 |       "resolved": "https://registry.npmjs.org/vite/-/vite-2.5.10.tgz",
452 |       "integrity": "sha512-0ObiHTi5AHyXdJcvZ67HMsDgVpjT5RehvVKv6+Q0jFZ7zDI28PF5zK9mYz2avxdA+4iJMdwCz6wnGNnn4WX5Gg==",
453 |       "dev": true,
454 |       "dependencies": {
455 |         "esbuild": "^0.12.17",
456 |         "postcss": "^8.3.6",
457 |         "resolve": "^1.20.0",
458 |         "rollup": "^2.38.5"
459 |       },
460 |       "bin": {
461 |         "vite": "bin/vite.js"
462 |       },
463 |       "engines": {
464 |         "node": ">=12.2.0"
465 |       },
466 |       "optionalDependencies": {
467 |         "fsevents": "~2.3.2"
468 |       }
469 |     },
470 |     "node_modules/vue": {
471 |       "version": "3.2.13",
472 |       "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.13.tgz",
473 |       "integrity": "sha512-raTGvLXXTdMxrhQKY1r1YFXZMmjbjTe7QHBW9EU4CgCBhq8DbgyLqgILcSUZmeFyazk5WY7a7xu0VYmHElf4lA==",
474 |       "dependencies": {
475 |         "@vue/compiler-dom": "3.2.13",
476 |         "@vue/compiler-sfc": "3.2.13",
477 |         "@vue/runtime-dom": "3.2.13",
478 |         "@vue/server-renderer": "3.2.13",
479 |         "@vue/shared": "3.2.13"
480 |       }
481 |     }
482 |   },
483 |   "dependencies": {
484 |     "@babel/parser": {
485 |       "version": "7.15.7",
486 |       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.7.tgz",
487 |       "integrity": "sha512-rycZXvQ+xS9QyIcJ9HXeDWf1uxqlbVFAUq0Rq0dbc50Zb/+wUe/ehyfzGfm9KZZF0kBejYgxltBXocP+gKdL2g=="
488 |     },
489 |     "@lit/reactive-element": {
490 |       "version": "1.0.0",
491 |       "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.0.0.tgz",
492 |       "integrity": "sha512-Kpgenb8UNFsKCsFhggiVvUkCbcFQSd6N8hffYEEGjz27/4rw3cTSsmP9t3q1EHOAsdum60Wo64HvuZDFpEwexA=="
493 |     },
494 |     "@popperjs/core": {
495 |       "version": "2.10.1",
496 |       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.1.tgz",
497 |       "integrity": "sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw=="
498 |     },
499 |     "@shoelace-style/animations": {
500 |       "version": "1.1.0",
501 |       "resolved": "https://registry.npmjs.org/@shoelace-style/animations/-/animations-1.1.0.tgz",
502 |       "integrity": "sha512-Be+cahtZyI2dPKRm8EZSx3YJQ+jLvEcn3xzRP7tM4tqBnvd/eW/64Xh0iOf0t2w5P8iJKfdBbpVNE9naCaOf2g=="
503 |     },
504 |     "@shoelace-style/shoelace": {
505 |       "version": "2.0.0-beta.52",
506 |       "resolved": "https://registry.npmjs.org/@shoelace-style/shoelace/-/shoelace-2.0.0-beta.52.tgz",
507 |       "integrity": "sha512-O4xXJ06EInHYUNQgtoin7bh2kRfGKK36ow+HFYqPluxQFkuCx1gIl26JIIUMiN7WYJLpL7w0KUGSqS6AmsSaQg==",
508 |       "requires": {
509 |         "@popperjs/core": "^2.7.0",
510 |         "@shoelace-style/animations": "^1.1.0",
511 |         "color": "^3.1.3",
512 |         "lit": "^2.0.0",
513 |         "lit-html": "^2.0.0",
514 |         "qr-creator": "^1.0.0"
515 |       }
516 |     },
517 |     "@shoelace-style/vue-sl-model": {
518 |       "version": "file:..",
519 |       "requires": {
520 |         "@babel/cli": "^7.10.4",
521 |         "@babel/core": "^7.10.4",
522 |         "@babel/preset-env": "^7.10.4",
523 |         "@rollup/plugin-babel": "^5.3.0",
524 |         "rollup": "^2.21.0",
525 |         "rollup-plugin-node-resolve": "^5.2.0",
526 |         "rollup-plugin-terser": "^6.1.0"
527 |       }
528 |     },
529 |     "@types/trusted-types": {
530 |       "version": "2.0.2",
531 |       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
532 |       "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
533 |     },
534 |     "@vitejs/plugin-vue": {
535 |       "version": "1.9.0",
536 |       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.9.0.tgz",
537 |       "integrity": "sha512-TQB87f8baZsTZO/g7Az/dTCwV8eDxwkrP8hMl8HpwLJz/NKvmXtBqa7bYg8GKWNwqjy+pBRLdgiML+BI3HphOw==",
538 |       "dev": true,
539 |       "requires": {}
540 |     },
541 |     "@vue/compiler-core": {
542 |       "version": "3.2.13",
543 |       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.13.tgz",
544 |       "integrity": "sha512-H8MUuKVCfAT6C0vth/+1LAriKnM+RTFo/5MoFycwRPwworTvkpWq/EuGoIXdLBblo8Y2/bNsOmIBEEoOtrb/bQ==",
545 |       "requires": {
546 |         "@babel/parser": "^7.15.0",
547 |         "@vue/shared": "3.2.13",
548 |         "estree-walker": "^2.0.2",
549 |         "source-map": "^0.6.1"
550 |       }
551 |     },
552 |     "@vue/compiler-dom": {
553 |       "version": "3.2.13",
554 |       "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.13.tgz",
555 |       "integrity": "sha512-5+2dYgQyNzM97EEgbdAusUpLjulcKkvLM26jOGpd14+qwEcW/KCnns5DGjlZD/tsdEwToOoTDCm+mjx7cO/G1Q==",
556 |       "requires": {
557 |         "@vue/compiler-core": "3.2.13",
558 |         "@vue/shared": "3.2.13"
559 |       }
560 |     },
561 |     "@vue/compiler-sfc": {
562 |       "version": "3.2.13",
563 |       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.13.tgz",
564 |       "integrity": "sha512-3j970d969aOILykcTstdihP33xH1Onm0wsvcl+rGv9AGxivB9xicRxBw93HCIA4dAPivr42WjHEoci9q2/85uw==",
565 |       "requires": {
566 |         "@babel/parser": "^7.15.0",
567 |         "@vue/compiler-core": "3.2.13",
568 |         "@vue/compiler-dom": "3.2.13",
569 |         "@vue/compiler-ssr": "3.2.13",
570 |         "@vue/ref-transform": "3.2.13",
571 |         "@vue/shared": "3.2.13",
572 |         "estree-walker": "^2.0.2",
573 |         "magic-string": "^0.25.7",
574 |         "postcss": "^8.1.10",
575 |         "source-map": "^0.6.1"
576 |       }
577 |     },
578 |     "@vue/compiler-ssr": {
579 |       "version": "3.2.13",
580 |       "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.13.tgz",
581 |       "integrity": "sha512-ZbO6uDhUWTdKBRguYNEZXj2FU3nh1cudoHBiidbxj9q5J0tVT+j1PSVFAXPq6SquUBdJpa4HvGkQ5kQzv6upXg==",
582 |       "requires": {
583 |         "@vue/compiler-dom": "3.2.13",
584 |         "@vue/shared": "3.2.13"
585 |       }
586 |     },
587 |     "@vue/reactivity": {
588 |       "version": "3.2.13",
589 |       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.13.tgz",
590 |       "integrity": "sha512-j3ByCiRgrr4uEZpXJM8XowrbYKeNHMHlbmMZE/2QpVzVPIfrQWS2fpLmbchJeMrnwIrzEl+dub3hgwkV4KRn4w==",
591 |       "requires": {
592 |         "@vue/shared": "3.2.13"
593 |       }
594 |     },
595 |     "@vue/ref-transform": {
596 |       "version": "3.2.13",
597 |       "resolved": "https://registry.npmjs.org/@vue/ref-transform/-/ref-transform-3.2.13.tgz",
598 |       "integrity": "sha512-q6GXHZFzXjpx1K3UFRF8fa+xSmD9xV/FjhGzTNnfrryBr8tBUNYgP2f0s5K5N+21Ay7+MlQ1XXMUp8McGvsryQ==",
599 |       "requires": {
600 |         "@babel/parser": "^7.15.0",
601 |         "@vue/compiler-core": "3.2.13",
602 |         "@vue/shared": "3.2.13",
603 |         "estree-walker": "^2.0.2",
604 |         "magic-string": "^0.25.7"
605 |       }
606 |     },
607 |     "@vue/runtime-core": {
608 |       "version": "3.2.13",
609 |       "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.13.tgz",
610 |       "integrity": "sha512-VQedL9Wa7yWMPVDrIkxzLCm6cWCDBoXcXc+jrsOJkqpWhEeA7+zGOsDsHzhLH8aaJD6vdnUR5Cy0EKvoJDqEWQ==",
611 |       "requires": {
612 |         "@vue/reactivity": "3.2.13",
613 |         "@vue/shared": "3.2.13"
614 |       }
615 |     },
616 |     "@vue/runtime-dom": {
617 |       "version": "3.2.13",
618 |       "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.13.tgz",
619 |       "integrity": "sha512-DVG+ItkrnCOEa9HSrmGBTLwv/gBVYCO8wkm/yv+d5ChoTnyIILxP0oCiZEPJsgWZfUSRPNi5rXozwo7F99MiwQ==",
620 |       "requires": {
621 |         "@vue/runtime-core": "3.2.13",
622 |         "@vue/shared": "3.2.13",
623 |         "csstype": "^2.6.8"
624 |       }
625 |     },
626 |     "@vue/server-renderer": {
627 |       "version": "3.2.13",
628 |       "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.13.tgz",
629 |       "integrity": "sha512-KI+JFV+vRb95+Jb6IwRRm4Vhvj8wrJTNs+OlATfqwwIRpBGAyxn/4knDJYzlnUf/mrKAkrbw751mHhi+pEwILQ==",
630 |       "requires": {
631 |         "@vue/compiler-ssr": "3.2.13",
632 |         "@vue/shared": "3.2.13"
633 |       }
634 |     },
635 |     "@vue/shared": {
636 |       "version": "3.2.13",
637 |       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.13.tgz",
638 |       "integrity": "sha512-F/gs3kHQ8Xeo24F6EImOvBiIoYQsBjF9qoLzvk+LHxYN6ZhIDEL1NWrBFYzdFQ7NphjEYd4EvPZ+Qee+WX8P6w=="
639 |     },
640 |     "color": {
641 |       "version": "3.2.1",
642 |       "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
643 |       "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
644 |       "requires": {
645 |         "color-convert": "^1.9.3",
646 |         "color-string": "^1.6.0"
647 |       }
648 |     },
649 |     "color-convert": {
650 |       "version": "1.9.3",
651 |       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
652 |       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
653 |       "requires": {
654 |         "color-name": "1.1.3"
655 |       }
656 |     },
657 |     "color-name": {
658 |       "version": "1.1.3",
659 |       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
660 |       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
661 |     },
662 |     "color-string": {
663 |       "version": "1.6.0",
664 |       "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.6.0.tgz",
665 |       "integrity": "sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==",
666 |       "requires": {
667 |         "color-name": "^1.0.0",
668 |         "simple-swizzle": "^0.2.2"
669 |       }
670 |     },
671 |     "colorette": {
672 |       "version": "1.4.0",
673 |       "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz",
674 |       "integrity": "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g=="
675 |     },
676 |     "csstype": {
677 |       "version": "2.6.18",
678 |       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.18.tgz",
679 |       "integrity": "sha512-RSU6Hyeg14am3Ah4VZEmeX8H7kLwEEirXe6aU2IPfKNvhXwTflK5HQRDNI0ypQXoqmm+QPyG2IaPuQE5zMwSIQ=="
680 |     },
681 |     "esbuild": {
682 |       "version": "0.12.28",
683 |       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.28.tgz",
684 |       "integrity": "sha512-pZ0FrWZXlvQOATlp14lRSk1N9GkeJ3vLIwOcUoo3ICQn9WNR4rWoNi81pbn6sC1iYUy7QPqNzI3+AEzokwyVcA==",
685 |       "dev": true
686 |     },
687 |     "estree-walker": {
688 |       "version": "2.0.2",
689 |       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
690 |       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
691 |     },
692 |     "fsevents": {
693 |       "version": "2.3.2",
694 |       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
695 |       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
696 |       "dev": true,
697 |       "optional": true
698 |     },
699 |     "function-bind": {
700 |       "version": "1.1.1",
701 |       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
702 |       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
703 |       "dev": true
704 |     },
705 |     "has": {
706 |       "version": "1.0.3",
707 |       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
708 |       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
709 |       "dev": true,
710 |       "requires": {
711 |         "function-bind": "^1.1.1"
712 |       }
713 |     },
714 |     "is-arrayish": {
715 |       "version": "0.3.2",
716 |       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
717 |       "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
718 |     },
719 |     "is-core-module": {
720 |       "version": "2.6.0",
721 |       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.6.0.tgz",
722 |       "integrity": "sha512-wShG8vs60jKfPWpF2KZRaAtvt3a20OAn7+IJ6hLPECpSABLcKtFKTTI4ZtH5QcBruBHlq+WsdHWyz0BCZW7svQ==",
723 |       "dev": true,
724 |       "requires": {
725 |         "has": "^1.0.3"
726 |       }
727 |     },
728 |     "lit": {
729 |       "version": "2.0.0",
730 |       "resolved": "https://registry.npmjs.org/lit/-/lit-2.0.0.tgz",
731 |       "integrity": "sha512-pqi5O/wVzQ9Bn4ERRoYQlt1EAUWyY5Wv888vzpoArbtChc+zfUv1XohRqSdtQZYCogl0eHKd+MQwymg2XJfECg==",
732 |       "requires": {
733 |         "@lit/reactive-element": "^1.0.0",
734 |         "lit-element": "^3.0.0",
735 |         "lit-html": "^2.0.0"
736 |       }
737 |     },
738 |     "lit-element": {
739 |       "version": "3.0.0",
740 |       "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.0.0.tgz",
741 |       "integrity": "sha512-oPqRhhBBhs+AlI62QLwtWQNU/bNK/h2L1jI3IDroqZubo6XVAkyNy2dW3CRfjij8mrNlY7wULOfyyKKOnfEePA==",
742 |       "requires": {
743 |         "@lit/reactive-element": "^1.0.0",
744 |         "lit-html": "^2.0.0"
745 |       }
746 |     },
747 |     "lit-html": {
748 |       "version": "2.0.0",
749 |       "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.0.0.tgz",
750 |       "integrity": "sha512-tJsCapCmc0vtLj6harqd6HfCxnlt/RSkgowtz4SC9dFE3nSL38Tb33I5HMDiyJsRjQZRTgpVsahrnDrR9wg27w==",
751 |       "requires": {
752 |         "@types/trusted-types": "^2.0.2"
753 |       }
754 |     },
755 |     "magic-string": {
756 |       "version": "0.25.7",
757 |       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
758 |       "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
759 |       "requires": {
760 |         "sourcemap-codec": "^1.4.4"
761 |       }
762 |     },
763 |     "nanoid": {
764 |       "version": "3.1.25",
765 |       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.25.tgz",
766 |       "integrity": "sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q=="
767 |     },
768 |     "path-parse": {
769 |       "version": "1.0.7",
770 |       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
771 |       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
772 |       "dev": true
773 |     },
774 |     "postcss": {
775 |       "version": "8.3.6",
776 |       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.6.tgz",
777 |       "integrity": "sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==",
778 |       "requires": {
779 |         "colorette": "^1.2.2",
780 |         "nanoid": "^3.1.23",
781 |         "source-map-js": "^0.6.2"
782 |       }
783 |     },
784 |     "qr-creator": {
785 |       "version": "1.0.0",
786 |       "resolved": "https://registry.npmjs.org/qr-creator/-/qr-creator-1.0.0.tgz",
787 |       "integrity": "sha512-C0cqfbS1P5hfqN4NhsYsUXePlk9BO+a45bAQ3xLYjBL3bOIFzoVEjs79Fado9u9BPBD3buHi3+vY+C8tHh4qMQ=="
788 |     },
789 |     "resolve": {
790 |       "version": "1.20.0",
791 |       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
792 |       "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
793 |       "dev": true,
794 |       "requires": {
795 |         "is-core-module": "^2.2.0",
796 |         "path-parse": "^1.0.6"
797 |       }
798 |     },
799 |     "rollup": {
800 |       "version": "2.56.3",
801 |       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.56.3.tgz",
802 |       "integrity": "sha512-Au92NuznFklgQCUcV96iXlxUbHuB1vQMaH76DHl5M11TotjOHwqk9CwcrT78+Tnv4FN9uTBxq6p4EJoYkpyekg==",
803 |       "dev": true,
804 |       "requires": {
805 |         "fsevents": "~2.3.2"
806 |       }
807 |     },
808 |     "simple-swizzle": {
809 |       "version": "0.2.2",
810 |       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
811 |       "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
812 |       "requires": {
813 |         "is-arrayish": "^0.3.1"
814 |       }
815 |     },
816 |     "source-map": {
817 |       "version": "0.6.1",
818 |       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
819 |       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
820 |     },
821 |     "source-map-js": {
822 |       "version": "0.6.2",
823 |       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
824 |       "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug=="
825 |     },
826 |     "sourcemap-codec": {
827 |       "version": "1.4.8",
828 |       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
829 |       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
830 |     },
831 |     "vite": {
832 |       "version": "2.5.10",
833 |       "resolved": "https://registry.npmjs.org/vite/-/vite-2.5.10.tgz",
834 |       "integrity": "sha512-0ObiHTi5AHyXdJcvZ67HMsDgVpjT5RehvVKv6+Q0jFZ7zDI28PF5zK9mYz2avxdA+4iJMdwCz6wnGNnn4WX5Gg==",
835 |       "dev": true,
836 |       "requires": {
837 |         "esbuild": "^0.12.17",
838 |         "fsevents": "~2.3.2",
839 |         "postcss": "^8.3.6",
840 |         "resolve": "^1.20.0",
841 |         "rollup": "^2.38.5"
842 |       }
843 |     },
844 |     "vue": {
845 |       "version": "3.2.13",
846 |       "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.13.tgz",
847 |       "integrity": "sha512-raTGvLXXTdMxrhQKY1r1YFXZMmjbjTe7QHBW9EU4CgCBhq8DbgyLqgILcSUZmeFyazk5WY7a7xu0VYmHElf4lA==",
848 |       "requires": {
849 |         "@vue/compiler-dom": "3.2.13",
850 |         "@vue/compiler-sfc": "3.2.13",
851 |         "@vue/runtime-dom": "3.2.13",
852 |         "@vue/server-renderer": "3.2.13",
853 |         "@vue/shared": "3.2.13"
854 |       }
855 |     }
856 |   }
857 | }
858 | 


--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "demo",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "npm run shoelace:copy && vite",
 7 |     "build": "npm run shoelace:copy && vite build",
 8 |     "serve": "vite preview",
 9 |     "shoelace:copy": "rm -rf public/assets/icons && mkdir -p public/assets/icons && cp -R node_modules/@shoelace-style/shoelace/dist/assets/icons public/assets"
10 |   },
11 |   "dependencies": {
12 |     "@shoelace-style/shoelace": "*",
13 |     "@shoelace-style/vue-sl-model": "file:../",
14 |     "vue": "^3.2.13"
15 |   },
16 |   "devDependencies": {
17 |     "@vitejs/plugin-vue": "^1.9.0",
18 |     "vite": "^2.5.10"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/demo/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shoelace-style/vue-sl-model/1a98e4ff629dc4fd8beac27fe635fef0f994c258/demo/public/favicon.ico


--------------------------------------------------------------------------------
/demo/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | // This starter template is using Vue 3 <script setup> SFCs
 3 | // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
 4 | import HelloWorld from './components/HelloWorld.vue'
 5 | </script>
 6 | 
 7 | <template>
 8 |   <img alt="Vue logo" src="./assets/logo.png" />
 9 |   <HelloWorld msg="Hello Vue 3 + Vite" />
10 |   <sl-input v-sl-model="blah"></sl-input>
11 | </template>
12 | 
13 | <style>
14 | #app {
15 |   font-family: Avenir, Helvetica, Arial, sans-serif;
16 |   -webkit-font-smoothing: antialiased;
17 |   -moz-osx-font-smoothing: grayscale;
18 |   text-align: center;
19 |   color: #2c3e50;
20 |   margin-top: 60px;
21 | }
22 | </style>
23 | 
24 | <script>
25 | export default {
26 |   data() {
27 |     return {
28 |       blah: 'Blah!'
29 |     }
30 |   }
31 | }
32 | </script>
33 | 


--------------------------------------------------------------------------------
/demo/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shoelace-style/vue-sl-model/1a98e4ff629dc4fd8beac27fe635fef0f994c258/demo/src/assets/logo.png


--------------------------------------------------------------------------------
/demo/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { ref } from 'vue'
 3 | 
 4 | defineProps({
 5 |   msg: String
 6 | })
 7 | 
 8 | const count = ref(0)
 9 | </script>
10 | 
11 | <template>
12 |   <h1>{{ msg }}</h1>
13 | 
14 |   <p>
15 |     Recommended IDE setup:
16 |     <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
17 |     +
18 |     <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
19 |   </p>
20 | 
21 |   <p>
22 |     <a href="https://vitejs.dev/guide/features.html" target="_blank">
23 |       Vite Documentation
24 |     </a>
25 |     |
26 |     <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
27 |   </p>
28 | 
29 |   <button type="button" @click="count++">count is: {{ count }}</button>
30 |   <p>
31 |     Edit
32 |     <code>components/HelloWorld.vue</code> to test hot module replacement.
33 |   </p>
34 | </template>
35 | 
36 | <style scoped>
37 | a {
38 |   color: #42b983;
39 | }
40 | </style>
41 | 


--------------------------------------------------------------------------------
/demo/src/main.js:
--------------------------------------------------------------------------------
 1 | import "@shoelace-style/shoelace/dist/themes/light.css"
 2 | import "@shoelace-style/shoelace/dist/components/input/input"
 3 | 
 4 | import ShoelaceModelDirective from '@shoelace-style/vue-sl-model'
 5 | import { createApp } from 'vue'
 6 | import App from './App.vue'
 7 | 
 8 | const app = createApp(App)
 9 | 
10 | app.use(ShoelaceModelDirective)
11 | 
12 | // app.config.compilerOptions.isCustomElement = tag => tag.startsWith('sl-')
13 | // ^ Not needed. Defined in vite.config.js
14 | 
15 | app.mount('#app')
16 | 


--------------------------------------------------------------------------------
/demo/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import vue from '@vitejs/plugin-vue'
 3 | 
 4 | // https://vitejs.dev/config/
 5 | export default defineConfig({
 6 |   plugins: [
 7 |     vue({
 8 |       template: {
 9 |         compilerOptions: {
10 |           isCustomElement: (tag) => tag.startsWith('sl-')
11 |         }
12 |       },
13 |     })
14 |   ]
15 | })
16 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@shoelace-style/vue-sl-model",
 3 |   "version": "1.0.1",
 4 |   "description": "A custom Vue directive that makes two-way binding Shoelace components easier.",
 5 |   "main": "dist/index.js",
 6 |   "module": "dist/index.esm.js",
 7 |   "files": [
 8 |     "dist"
 9 |   ],
10 |   "scripts": {
11 |     "build": "rollup -c",
12 |     "test": "echo \"Error: no test specified\" && exit 1",
13 |     "prepublish": "npm run build"
14 |   },
15 |   "repository": {
16 |     "type": "git",
17 |     "url": "git+https://github.com/shoelace-style/vue-sl-model.git"
18 |   },
19 |   "author": "Cory LaViska",
20 |   "license": "MIT",
21 |   "bugs": {
22 |     "url": "https://github.com/shoelace-style/vue-sl-model/issues"
23 |   },
24 |   "homepage": "https://github.com/shoelace-style/vue-sl-model#readme",
25 |   "devDependencies": {
26 |     "@babel/cli": "^7.10.4",
27 |     "@babel/core": "^7.10.4",
28 |     "@babel/preset-env": "^7.10.4",
29 |     "@rollup/plugin-babel": "^5.3.0",
30 |     "rollup": "^2.21.0",
31 |     "rollup-plugin-node-resolve": "^5.2.0",
32 |     "rollup-plugin-terser": "^6.1.0"
33 |   },
34 |   "peerDependencies": {
35 |     "vue": ">= 3.1.0-0"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   arrowParens: 'avoid',
 3 |   bracketSpacing: true,
 4 |   htmlWhitespaceSensitivity: 'css',
 5 |   insertPragma: false,
 6 |   jsxBracketSameLine: false,
 7 |   jsxSingleQuote: false,
 8 |   printWidth: 120,
 9 |   proseWrap: 'preserve',
10 |   quoteProps: 'as-needed',
11 |   requirePragma: false,
12 |   semi: true,
13 |   singleQuote: true,
14 |   tabWidth: 2,
15 |   trailingComma: 'none',
16 |   useTabs: false
17 | };
18 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import resolve from 'rollup-plugin-node-resolve';
 2 | import babel from '@rollup/plugin-babel';
 3 | import { terser } from 'rollup-plugin-terser';
 4 | 
 5 | export default {
 6 |   input: 'src/vue-sl-model.js',
 7 |   output: [
 8 |     { file: 'dist/index.js', format: 'cjs' },
 9 |     { file: 'dist/index.min.js', format: 'cjs', plugins: [terser()] },
10 |     { file: 'dist/index.esm.js', format: 'esm' }
11 |   ],
12 |   plugins: [
13 |     resolve(),
14 |     babel({
15 |       exclude: 'node_modules/**',
16 |       presets: ['@babel/preset-env']
17 |     })
18 |   ]
19 | };
20 | 


--------------------------------------------------------------------------------
/src/vue-sl-model.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   name: 'vue-sl-model',
 3 |   install: (app, _options) => {
 4 |     const wm = new WeakMap();
 5 |     app.directive("sl-model", {
 6 |       beforeMount(el, binding, _vnode) {
 7 |         const eventName = el.tagName === "SL-SELECT" ? "sl-change" : "input";
 8 |         const inputHandler = function inputHandler(event) {
 9 |           return (binding.instance[binding.value] = event.target.value);
10 |         };
11 | 
12 |         wm.set(el, inputHandler);
13 |         el.value = binding.value ?? "";
14 |         el.addEventListener(eventName, inputHandler);
15 |       },
16 |       updated(el, binding) {
17 |         el.value = binding.value ?? "";
18 |       },
19 |       unmounted(el, _binding) {
20 |         const inputHandler = wm.get(el);
21 |         el.removeEventListener(el, inputHandler);
22 |       },
23 |     });
24 |   },
25 | };
26 | 


--------------------------------------------------------------------------------