@mixd-id/web-scaffold 0.1.230406256 → 0.1.230406257

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406256",
+  "version": "0.1.230406257",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/Checkbox.vue

@@ -151,7 +151,7 @@ export default {
 }
 
 .indicator{
-	@apply w-[21px] h-[21px] rounded-lg border-[1px] border-text-200 bg-base-50;
+	@apply w-[21px] h-[21px] rounded-lg border-[1px] border-text-200 bg-base-500;
 	@apply flex items-center justify-center overflow-hidden;
 	transition:  border 300ms cubic-bezier(0.25, 1, 0.5, 1);
 }

package/src/components/DayTimeRange.vue

@@ -36,7 +36,7 @@
     </div>
     <div class="flex justify-center">
       <button type="button" @click="add" class="p-2">
-        <svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M384 250v12c0 6.6-5.4 12-12 12h-98v98c0 6.6-5.4 12-12 12h-12c-6.6 0-12-5.4-12-12v-98h-98c-6.6 0-12-5.4-12-12v-12c0-6.6 5.4-12 12-12h98v-98c0-6.6 5.4-12 12-12h12c6.6 0 12 5.4 12 12v98h98c6.6 0 12 5.4 12 12zm120 6c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-32 0c0-119.9-97.3-216-216-216-119.9 0-216 97.3-216 216 0 119.9 97.3 216 216 216 119.9 0 216-97.3 216-216z"/></svg>
+        <svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M352 232H280V160c0-13.26-10.74-24-23.1-24S232 146.7 232 160v72H160C146.7 232 136 242.7 136 256c0 13.25 10.75 24 24 24H232V352c0 13.25 10.75 24 24 24S280 365.3 280 352V280h72C365.3 280 376 269.3 376 256C376 242.7 365.3 232 352 232zM256 0C114.6 0 0 114.6 0 256s114.6 256 256 256S512 397.4 512 256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464z"/></svg>
       </button>
     </div>
 	</div>
@@ -46,7 +46,7 @@
 
 export default{
 
-  emits: [ 'update:modelValue' ],
+  emits: [ 'change', 'update:modelValue' ],
 
   props: {
 
@@ -81,6 +81,7 @@ export default{
       console.log(modelValue)
 
       this.$emit('update:modelValue', modelValue)
+      this.$emit('change', modelValue)
     },
 
     updateValue(){
@@ -111,7 +112,7 @@ export default{
 <style module>
 
 .comp{
-  @apply border-[1px] border-text-200 bg-base-50 rounded-lg;
+  @apply border-[1px] border-text-200 bg-base-500 rounded-lg;
   @apply inline-flex flex-col divide-y divide-text-100;
 }
 

package/src/components/Dropdown.vue

@@ -161,7 +161,7 @@ export default {
 
 .dropdown{
 	@apply flex items-center rounded-lg overflow-hidden cursor-pointer relative;
-	@apply border-[1px] border-text-200 bg-base-50;
+	@apply border-[1px] border-text-200 bg-base-500;
 }
 .dropdown:not(.readonly){
 	@apply hover:border-text-300;

package/src/components/List.vue

@@ -22,7 +22,7 @@
              @mousedown="(e) => $util.dragResize(e, resize1)"></div>
       </div>
 
-      <div class="flex-1 flex flex-col gap-6" :class="containerClass">
+      <div class="flex-1 flex flex-col gap-3" :class="containerClass">
 
         <slot name="head"
               :preset="preset"
@@ -85,7 +85,7 @@
 
         <VirtualTable v-if="presetView === 'table'"
                       :columns="columns"
-                      class="flex-1 rounded-lg panel-400"
+                      class="flex-1 rounded-lg"
                       :items="data.items"
                       @scroll-end="loadNext">
 

package/src/components/ListItem.vue

@@ -144,6 +144,7 @@ export default{
 <style module>
 
 .comp{
+  @apply bg-base-500;
 }
 
 .comp .dragover{

package/src/components/MultilineText.vue

@@ -138,7 +138,7 @@ export default{
 <style module>
 
 .textarea{
-	@apply flex items-start border-[1px] border-text-200 bg-base-50 rounded-lg overflow-hidden;
+	@apply flex items-start border-[1px] border-text-200 bg-base-500 rounded-lg overflow-hidden;
 	@apply !max-h-[200px];
 }
 .textarea textarea{

package/src/components/Radio.vue

@@ -85,7 +85,7 @@ export default{
 }
 
 .indicator{
-  @apply w-[21px] h-[21px] border-[1px] rounded-full border-text-200 panel-500;
+  @apply w-[21px] h-[21px] border-[1px] rounded-full border-text-200 bg-base-500;
   @apply flex items-center justify-center overflow-hidden;
   transition:  border 300ms cubic-bezier(0.25, 1, 0.5, 1);
 }

package/src/components/Textarea.vue

@@ -140,7 +140,7 @@ export default{
 
 .textarea{
 	@apply min-h-[var(--h-cp)];
-	@apply flex items-start border-[1px] border-text-200 bg-base-50 rounded-lg overflow-hidden;
+	@apply flex items-start border-[1px] border-text-200 bg-base-500 rounded-lg overflow-hidden;
 	@apply !max-h-[200px];
 }
 .textarea textarea{

package/src/components/Textbox.vue

@@ -178,7 +178,7 @@ export default{
 
 .textbox{
 	@apply flex items-center;
-  @apply border-[1px] border-text-200 panel-500 rounded-lg;
+  @apply border-[1px] border-text-200 bg-base-500 rounded-lg;
 	@apply overflow-hidden;
 }
 

package/src/components/VirtualTable.vue

@@ -430,8 +430,8 @@ export default{
 <style module>
 
 .comp{
-	@apply flex flex-col overflow-hidden;
-	@apply border-[1px] border-text-50 rounded-sm;
+	@apply flex flex-col overflow-hidden bg-base-500;
+	@apply border-[1px] border-text-200 rounded-sm;
 }
 
 .comp>*:last-child{
@@ -439,7 +439,7 @@ export default{
 }
 
 .header{
-	@apply border-b-[1px] border-text-50;
+	@apply border-b-[1px] border-text-200;
 }
 
 .headerCol{
@@ -476,7 +476,7 @@ export default{
 }
 
 .table tbody td{
-	@apply border-b-[1px] border-text-50;
+	@apply border-b-[1px] border-text-200;
 }
 .table tbody td:nth-child(odd){
 }
@@ -498,7 +498,7 @@ export default{
 }
 
 .separator{
-	@apply w-[5px] absolute top-0 bottom-0 right-0 cursor-e-resize border-text-50;
+	@apply w-[5px] absolute top-0 bottom-0 right-0 cursor-e-resize border-text-200;
 	@apply border-r-[1px];
 }
 .table th:hover .separator{

package/src/themes/default/index.js

@@ -22,12 +22,12 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
       '--base-500': '255, 255, 255',
       '--base': '255, 255, 255',
 
-      "--text-50": '234, 234, 234',
-      "--text-100": '223, 223, 223',
-      "--text-200": '218, 218, 218',
+      "--text-50": '220, 220, 220',
+      "--text-100": '210, 210, 210',
+      "--text-200": '201, 201, 201',
       "--text-300": '191, 191, 191',
-      "--text-400": '136, 136, 136',
-      "--text-500": '136, 136, 136',
+      "--text-400": '116, 116, 116',
+      "--text-500": '86, 86, 86',
       "--text": '31, 41, 55',
 
       "--primary": '81, 131, 240',
@@ -60,6 +60,9 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
       '--facebook-100': '205, 215, 231',
       '--facebook-500': '8, 102, 255',
 
+      '--panel-300': 'rgb(235, 237, 240)',
+      '--panel-400': 'rgb(245, 247, 250)',
+      '--panel-500': 'rgb(255, 255, 255)',
     },
 
     'html[data-theme="dark"], .html[data-theme="dark"]': {
@@ -93,6 +96,10 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
       "--secondary-700": '95, 98, 103',
       "--secondary-800": '115, 118, 122',
       "--secondary-900": '135, 137, 141',
+
+      "--panel-300": 'rgb(0, 0, 0)',
+      "--panel-400": 'rgb(17, 21, 28)',
+      "--panel-500": 'rgb(27, 31, 38)',
     },
 
     'body': {
@@ -227,28 +234,22 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
       transform: 'scale(.9)'
     },
 
-    '.panel-50': {
-      '--webkit-backdrop-filter': 'var(--panel-50-backdrop-filter)',
-      'backdrop-filter': 'var(--panel-50-backdrop-filter)',
-      'background-color': 'rgb(var(--base-50))',
-    },
-
     '.panel-300': {
       '--webkit-backdrop-filter': 'var(--panel-300-backdrop-filter)',
       'backdrop-filter': 'var(--panel-300-backdrop-filter)',
-      'background-color': 'rgb(var(--base-300))',
+      'background-color': 'var(--panel-300)',
     },
 
     '.panel-400': {
       '--webkit-backdrop-filter': 'var(--panel-400-backdrop-filter)',
       'backdrop-filter': 'var(--panel-400-backdrop-filter)',
-      'background-color': 'rgb(var(--base-400))',
+      'background-color': 'var(--panel-400)',
     },
 
     '.panel-500': {
       '--webkit-backdrop-filter': 'var(--panel-500-backdrop-filter)',
       'backdrop-filter': 'var(--panel-500-backdrop-filter)',
-      'background-color': 'rgb(var(--base-500))',
+      'background-color': 'var(--panel-500)',
     },
 
   })