feat: MasterCSS helpers - toLine

alanlu-tw · May 9, 2023 · 650da29 · 650da29
1 parent 3968d9f
commit 650da29
Show file tree

Hide file tree

Showing 10 changed files with 311 additions and 219 deletions.
diff --git a/src/formData/login.json → data/form/login.json b/src/formData/login.json → data/form/login.json
@@ -1,49 +1,49 @@
-{
-  "email": {
-    "name": "電子信箱",
-    "icon": "material-symbols:person",
-    "attrs": {
-      "type": "email",
-      "autocomplete": "email",
-      "title": "請輸入註冊E-mail",
-      "placeholder": "請輸入註冊E-mail",
-      "required": true
-    }
-  },
-  "password": {
-    "name": "密碼",
-    "icon": "material-symbols:lock",
-    "attrs": {
-      "type": "password",
-      "autocomplete": "current-password",
-      "title": "請輸入 8-16 英數密碼",
-      "placeholder": "請輸入 8-16 英數密碼",
-      "required": true,
-      "pattern": "[a-zA-Z0-9]{8,16}",
-      "minlength": 8,
-      "maxlength": 16
-    },
-    "msg": {
-      "pattern": "請輸入 8-16 英數字"
-    }
-  },
-  "verify_code": {
-    "name": "驗證碼",
-    "icon": "material-symbols:verified-user",
-    "attrs": {
-      "type": "text",
-      "autocomplete": "off",
-      "title": "請輸入右方驗證碼",
-      "placeholder": "請輸入右方驗證碼",
-      "required": true,
-      "pattern": "[0-9]{6}",
-      "inputmode": "numeric",
-      "maxlength": 6
-    },
-    "msg": {
-      "pattern": "請輸入6碼數字"
-    },
-    "wrapCls": "flex ai:center min-w:82 w:150",
-    "html": "<tk-media ratio='82/25' title='驗證碼' x-ref='verify' x-on:click='$refs.verify.img+=1' :img='window.ajaxUtil.url.domain+\"/verify/VerifyCode.aspx?\"'></tk-media>"
-  }
-}
+{
+  "email": {
+    "name": "電子信箱",
+    "icon": "material-symbols:person",
+    "attrs": {
+      "type": "email",
+      "autocomplete": "email",
+      "title": "請輸入註冊E-mail",
+      "placeholder": "請輸入註冊E-mail",
+      "required": true
+    }
+  },
+  "password": {
+    "name": "密碼",
+    "icon": "material-symbols:lock",
+    "attrs": {
+      "type": "password",
+      "autocomplete": "current-password",
+      "title": "請輸入 8-16 英數密碼",
+      "placeholder": "請輸入 8-16 英數密碼",
+      "required": true,
+      "pattern": "[a-zA-Z0-9]{8,16}",
+      "minlength": 8,
+      "maxlength": 16
+    },
+    "msg": {
+      "pattern": "請輸入 8-16 英數字"
+    }
+  },
+  "verify_code": {
+    "name": "驗證碼",
+    "icon": "material-symbols:verified-user",
+    "attrs": {
+      "type": "text",
+      "autocomplete": "off",
+      "title": "請輸入右方驗證碼",
+      "placeholder": "請輸入右方驗證碼",
+      "required": true,
+      "pattern": "[0-9]{6}",
+      "inputmode": "numeric",
+      "maxlength": 6
+    },
+    "msg": {
+      "pattern": "請輸入6碼數字"
+    },
+    "wrapCls": "flex ai:center min-w:82 w:150",
+    "html": "<tk-media ratio='82/25' title='驗證碼' x-ref='verify' x-on:click='$refs.verify.img+=1' :img='window.ajaxUtil.url.domain+\"/verify/VerifyCode.aspx?\"'></tk-media>"
+  }
+}
diff --git a/favicon.png b/favicon.png
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>UI DEMO</title>
-    <link rel="icon" type="image/x-icon" href="https://fakeimg.pl/50/ffffff/?text=logo" />
+    <link rel="icon" type="image/x-icon" href="./favicon.png" />
 
     <!-- Utils -->
     <script defer src="./src/@utils/obj.js"></script>
@@ -50,21 +50,20 @@
       const getData = function () {
         return {
           search: '',
-          sections: null,
+          sections: {},
           loading: { sections: null },
           async init() {
             this.$watch('search', (search) => {
               Object.entries(this.sections).forEach(([section, settings]) => {
                 settings.hide = !section.includes(search.toLowerCase());
               });
             });
-
-            await this.initSections();
-
             if (true || !window.ajaxUtil.url.isProd) {
-              window.ajaxUtil.getTemplate(document.body, window.ajaxUtil.url.domain + '/src/@alpine/template/grid.html');
-              this.$store.devPanel(window.ajaxUtil.url.domain + '/src/@alpine/template/devPanel.html');
+              this.$store.dev.grid();
+              this.$store.dev.panel(window.ajaxUtil.url.domain + '/src/@alpine/template/devPanel.html');
             }
+
+            await this.initSections();
           },
           async initSections() {
             this.loading.sections = true;
@@ -80,7 +79,7 @@
               window.ajaxUtil.setTemplate(this.$refs.sections, section.value);
             });
             this.$refs.sections.style.opacity = 1;
-            window.TkMessage.success('Sections')
+            window.TkMessage.success('Sections');
             this.loading.sections = false;
           },
         };
@@ -115,7 +114,7 @@
   <body class="normal bg:#eee @" x-data="getData">
     <!-- Header -->
     <header
-      class="header header--fixed flex ai:center {opacity:.8;shadow:md}.header--fade"
+      class="header header--fixed flex ai:center {opacity:.9;shadow:md}.header--fade"
       x-data="{
           transparentBar: function(){
             var st = window.scrollY || window.pageYOffset;
@@ -125,26 +124,26 @@
       @scroll.window="transparentBar"
     >
       <div class="container w:full py:0 flex flex:wrap ai:center jc:space-between">
-        <div class="flex ai:center">
+        <div class="flex:1 flex ai:center">
           <!-- ICON -->
           <div class="flex ai:center opacity:0.8:hover ~opacity|.2s pointer">
             <div class="w:4x h:4x r:0x overflow:hidden">
-              <tk-media img="https://fakeimg.pl/50/ffffff/?text=logo" prevented-lazy prevented-skeleton></tk-media>
+              <tk-media img="./favicon.png" prevented-lazy prevented-skeleton></tk-media>
             </div>
-            <p class="ml:2x fg:theme-fg">UI DEMO</p>
+            <p class="ml:2x ml:1x@<2xs fg:theme-fg hide@<2xs">UI DEMO</p>
           </div>
+        </div>
+        <div class="flex">
           <!-- SEARCH -->
-          <div class="input ml:5x opacity:.5 opacity:.8:hover ~opacity|.2s">
+          <div class="input mr:3x mr:1x@<xs opacity:.5 opacity:.8:hover ~opacity|.2s w:170@<xs w:120@<3xs">
             <tk-icon class="input-icon" icon="mdi:search"></tk-icon>
             <input type="search" placeholder="Search" x-model.debounce="search" />
           </div>
-        </div>
-        <div class="flex">
           <div>
             <tk-button type="theme" shape="circle" icon="ph:github-logo" href="https://github.com/zhongyoulu/TK-UI-DEMO"></tk-button>
             <tk-button type="theme" shape="circle" icon="ph:codesandbox-logo" href="https://codesandbox.io/s/github/zhongyoulu/TK-UI-DEOM"></tk-button>
           </div>
-          <tk-theme class="ml:2x" @click.stop @theme="window.TkMessage.success('theme: ' + $event.detail.current)"></tk-theme>
+          <tk-theme class="ml:2x ml:1x@<2xs" @click.stop @theme="window.TkMessage.success('theme: ' + $event.detail.current)"></tk-theme>
         </div>
       </div>
     </header>

diff --git a/sections/tk-media.html b/sections/tk-media.html
@@ -63,7 +63,7 @@
               <div>
                 <div class="inline-flex center-content">
                   <span>cover:</span>
-                  <div class="input w:300 h:3x!">
+                  <div class="input h:3x!">
                     <input type="text" placeholder="img-src" x-model.debounce="img" />
                   </div>
                 </div>

diff --git a/src/@alpine/index.js b/src/@alpine/index.js
@@ -19,7 +19,37 @@
   script.src = `https://unpkg.com/alpinejs@${version}/dist/cdn.min.js`;
   document.head.appendChild(script);
 
-  const globalData = () => {};
+  const globalData = () => {
+    Alpine.data('draggableData', () => ({
+      dragStartX: 0,
+      dragStartY: 0,
+      initialX: 0,
+      initialY: 0,
+      dragListeners: null,
+      initDrag(e) {
+        this.dragStartX = e.clientX;
+        this.dragStartY = e.clientY;
+        this.initialX = this.$el.offsetLeft;
+        this.initialY = this.$el.offsetTop;
+        this.dragListeners = window.objUtil.mapListener([
+          [document, 'mousemove', this.dragging.bind(this)],
+          [document, 'mouseup', this.stopDragging.bind(this)],
+        ]);
+      },
+      dragging(e) {
+        const dx = e.clientX - this.dragStartX;
+        const dy = e.clientY - this.dragStartY;
+        this.$el.style.left = this.initialX + dx + 'px';
+        this.$el.style.top = this.initialY + dy + 'px';
+        console.log(this.$el.style.left, this.$el.style.top);
+      },
+      stopDragging() {
+        this.dragListeners.forEach((removeEventListener) => {
+          removeEventListener();
+        });
+      },
+    }));
+  };
   const globalBind = () => {
     Alpine.bind('SomeButton', () => ({
       type: 'button',
@@ -96,18 +126,25 @@
     // ----------------------------------------------------------------
     // Dev
     // ----------------------------------------------------------------
-    Alpine.store('devPanel', function (devPanelUrl) {
-      // window.alpineHost = Alpine.mergeProxies(document.getElementById('app')._x_dataStack);
-      window.alpineHost = Alpine.evaluate(document.getElementById('app'), '$data');
-      Alpine.store('alpineHost', window.alpineHost);
+    Alpine.store('dev', {
+      panel(devPanelUrl) {
+        // window.alpineHost = Alpine.mergeProxies(document.getElementById('app')._x_dataStack);
+        window.alpineHost = Alpine.evaluate(document.getElementById('app'), '$data');
+        Alpine.store('alpineHost', window.alpineHost);
 
-      window.devPanelUrl = devPanelUrl;
-      window.ajaxUtil.getTemplate(document.body, window.devPanelUrl);
-      // window.open(
-      //   window.ajaxUtil.url.domain + '/src/@alpine/template/open.html',
-      //   'alpineDev',
-      //   'height=600,width=768,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no'
-      // );
+        window.devPanelUrl = devPanelUrl;
+        window.ajaxUtil.getTemplate(document.body, window.devPanelUrl);
+      },
+      open() {
+        window.open(
+          window.ajaxUtil.url.domain + '/src/@alpine/template/open.html',
+          'alpineDev',
+          'height=600,width=768,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no'
+        );
+      },
+      grid() {
+        window.ajaxUtil.getTemplate(document.body, window.ajaxUtil.url.domain + '/src/@alpine/template/grid.html');
+      },
     });
 
     Alpine.store('darkMode', {

diff --git a/src/@alpine/template/devPanel.html b/src/@alpine/template/devPanel.html
@@ -1,55 +1,83 @@
 <!-- DEV測試用 -->
 <div
   id="devPanel"
-  x-data="{ show: false, open: true }"
-  :hide="!show"
-  :open="open"
-  :class="Object.values({
-    'main': 'hide[hide] z:devPanel fixed! left:0 bottom:0 w:full bg:bg shadow:0|0|10|B-50/.1 ~opacity|.2s opacity:.5 opacity:0.9[open] opacity:1:hover',
-    'window': '{block!;rel!;shadow:none}[window] {min-h:0;max-h:unset}[window]_#devPanel-content',
-  }).join(' ')"
-  @keyup.alt.slash.window="show = !show"
   class="accordion"
   x-id="['accordion']"
+  :hide="hide"
+  :direction="direction"
+  :draggable="direction === 'drag'"
+  :class="masterCSSLiteral.toLine({
+    '': 'z:devPanel fg:theme bg:theme-fg shadow:0|0|10|B-50/.1',
+    'transition': '~opacity|.2s opacity:.8 opacity:1:hover {opacity:0!;untouchable!}[hide]',
+    '[window]': 'z:0 block rel opacity:1 shadow:none {min-h:0;max-h:unset}_#devPanel-content {hide}_#devPanel-switch',
+    '[direction=drag]': 'abs-center w:80vw cursor:move! r:1x p:1x|2x shadow:lg',
+    '[direction=bottom]': 'fixed w:full top:unset! left:0! right:0! bottom:0! {max-h:40vh_#devPanel-content}',
+    '[direction=left]': 'fixed w:30vw max-w:600 h:100vh top:0! left:0! right:unset!',
+    '[direction=right]': 'fixed w:30vw max-w:600 h:100vh top:0! left:unset! right:0!',
+  })"
+  x-data="{
+    ...draggableData(),
+    open: false,
+    hide: false,
+    direction:'bottom',
+  }"
+  @mousedown.prevent.stop="direction === 'drag' && initDrag"
+  @keyup.alt.slash.window="hide = !hide"
 >
-  <input type="checkbox" :id="$id('accordion')" checked />
+  <input type="checkbox" :id="$id('accordion')" x-model="open" />
   <label :for="$id('accordion')">
     <!-- devPanel-switch -->
-    <div id="devPanel-switch" class="p:1x t:center pointer" @click="open=!open">
+    <div id="devPanel-switch" class="rel p:1x pointer flex center-content">
+      <div class="abs left:0 flex ai:center gap:2x">
+        <tk-button shape="circle" class="ml:2x" icon="radix-icons:external-link" type="theme" @click.stop="$store.dev.open"></tk-button>
+        <tk-radio-group :value="direction" @change="direction=$event.detail.value">
+          <tk-radio class="mr:2x" value="drag"><tk-icon icon="material-symbols:drag-pan-rounded"></tk-icon></tk-radio>
+          <tk-radio value="left"><tk-icon icon="carbon:open-panel-filled-left"></tk-icon></tk-radio>
+          <tk-radio value="bottom"><tk-icon icon="carbon:open-panel-filled-bottom"></tk-icon></tk-radio>
+          <tk-radio value="right"><tk-icon icon="carbon:open-panel-filled-right"></tk-icon></tk-radio>
+        </tk-radio-group>
+      </div>
       <div class="flex center-content">
         <span>儀錶板</span>
         <tk-icon type="arrow" :flag="0"></tk-icon>
       </div>
-      <div class="abs top:0 right:0 p:1x bg:G-20 f:bold fg:danger">
-        <span>DEV測試用 (alt+/)</span>
+      <div class="abs right:0 opacity:.7">
+        <tk-checkbox :checked="hide" @change="hide=$event.detail.checked"">(隱藏：<kbd>alt</kbd>+<kbd>/</kbd>)</tk-checkbox>
       </div>
     </div>
     <!-- devPanel-content -->
   </label>
-
   <div class="accordion-content">
-    <div id="devPanel-content" class="max-h:40vh overflow:auto scrollbar">
-      <div class="grid-cols:1 grid-cols:3@xs {p:1x}>section">
-        <section>
-          <div class="text:center">section-settings</div>
-          <template x-for="section in Object.keys($store.alpineHost.sections)" :key="section">
-            <div class="field">
-              <p>
-                <span x-text="section"></span>
-                <tk-checkbox-group>
-                  <tk-checkbox :checked="$store.alpineHost.sections[section].open" @change="$store.alpineHost.sections[section].open=$event.detail.checked">open</tk-checkbox>
-                  <tk-checkbox :checked="$store.alpineHost.sections[section].hide" @change="$store.alpineHost.sections[section].hide=$event.detail.checked">hide</tk-checkbox>
-                </tk-checkbox-group>
-              </p>
+    <div class="min-h:0 scrollbar">
+      <div id="devPanel-content" class="overflow:auto scrollbar">
+        <div class="grid-cols:1 grid-cols:3@xs {p:1x}>section">
+          <section>
+            <div class="accordion" x-id="['accordion']">
+              <input type="checkbox" :id="$id('accordion')" checked />
+              <label class="subject" :for="$id('accordion')">
+                <div class="flex center-content">
+                  <span>section-settings</span>
+                  <tk-icon type="arrow" :flag="0"></tk-icon>
+                </div>
+              </label>
+              <div class="accordion-content">
+                <div class="min-h:0">
+                  <template x-for="section in Object.keys($store.alpineHost.sections)" :key="section">
+                    <div class="field">
+                      <p>
+                        <span x-text="section"></span>
+                        <tk-checkbox-group>
+                          <tk-checkbox :checked="$store.alpineHost.sections[section].open" @change="$store.alpineHost.sections[section].open=$event.detail.checked">open</tk-checkbox>
+                          <tk-checkbox :checked="$store.alpineHost.sections[section].hide" @change="$store.alpineHost.sections[section].hide=$event.detail.checked">hide</tk-checkbox>
+                        </tk-checkbox-group>
+                      </p>
+                    </div>
+                  </template>
+                </div>
+              </div>
             </div>
-          </template>
-        </section>
-        <section>
-          <div class="text:center">設定2</div>
-        </section>
-        <section>
-          <div class="text:center">設定3</div>
-        </section>
+          </section>
+        </div>
       </div>
     </div>
   </div>