@taole/dev-helper 0.0.6 → 0.0.8

package/Tdiv/index.js

@@ -0,0 +1,212 @@
+import setting from "./setting.js";
+export * from "./setting.js";
+
+const styleText = `
+.tw-img-div {
+    display: block;
+    background-position: top center;
+    background-repeat: no-repeat;
+    background-size: 100% auto;
+    flex: none;
+}
+.click-effect:active {
+    opacity: 0.85;
+    transform: translateY(1px);
+}`;
+
+function hasValue(value) {
+    return value !== null && value !== undefined && value !== '';
+}
+
+function calc(value, { usePx, viewportWidth, viewportUnit }) {
+    let vWidth = setting.viewportWidth;
+    if (viewportWidth) vWidth = viewportWidth;
+    let vUnit = setting.viewportUnit;
+    if (viewportUnit) vUnit = viewportUnit;
+    let localUsePx = setting.usePx;
+    if (typeof usePx === 'boolean') localUsePx = usePx;
+
+    // console.log("setting", setting, localUsePx);
+
+    if (typeof value === 'string' && !isNaN(value)) value = Number(value);
+    if (typeof value === 'number') {
+        if (localUsePx) return value + 'px';
+        let val = ((value / vWidth) * 100).toFixed(4);
+        return `${val}${vUnit}`;
+    }
+    return value;
+}
+
+class Tdiv extends HTMLElement {
+    static get observedAttributes() {
+        return [
+            '_class', 'usePx', '_style', 'src', 'width', 'height', 'absolute',
+            'top', 'left', 'right', 'bottom', 'zIndex', 'pointer', 'flex', 'column', 'center',
+            'text', 'color', 'srcMode', 'onClick', 'debug', 'viewportWidth', 'viewportUnit'
+        ];
+    }
+
+    constructor() {
+        super();
+        this._onClickHandler = this._onClickHandler.bind(this);
+        this._connected = false;
+        this._iscalcstyle = false;
+    }
+
+    connectedCallback() {
+        this._connected = true;
+        this._upgradeProperties();
+        this._update();
+        this.addEventListener('click', this._onClickHandler);
+    }
+
+    disconnectedCallback() {
+        this._connected = false;
+        this.removeEventListener('click', this._onClickHandler);
+    }
+
+    attributeChangedCallback() {
+        if (!this._connected) return;
+        this._update();
+    }
+
+    _upgradeProperties() {
+        // For properties set before upgrade
+        Tdiv.observedAttributes.forEach(attr => {
+            if (this.hasOwnProperty(attr)) {
+                let value = this[attr];
+                delete this[attr];
+                this[attr] = value;
+            }
+        });
+    }
+
+    _getAttr(name, type = 'string') {
+        if (!this.hasAttribute(name)) return null;
+        let val = this.getAttribute(name);
+        if (type === 'boolean') return val === '' || val === 'true';
+        if (type === 'number') return Number(val);
+        return val;
+    }
+
+    _update() {
+        if (this._iscalcstyle) return;
+        this._iscalcstyle = true;
+        // console.log('update');
+        // 读取所有属性
+        const _class = this._getAttr('_class') || '';
+        const usePx = this._getAttr('usePx', 'boolean');
+        const styleAttr = this._getAttr('_style') || '';
+        const src = this._getAttr('src') || '';
+        const width = this._getAttr('width');
+        const height = this._getAttr('height');
+        const absolute = this._getAttr('absolute', 'boolean');
+        const top = this._getAttr('top');
+        const left = this._getAttr('left');
+        const right = this._getAttr('right');
+        const bottom = this._getAttr('bottom');
+        const zIndex = this._getAttr('zIndex');
+        const pointer = this._getAttr('pointer', 'boolean');
+        const flex = this._getAttr('flex', 'boolean');
+        const column = this._getAttr('column', 'boolean');
+        const center = this._getAttr('center', 'boolean');
+        const text = this._getAttr('text');
+        const color = this._getAttr('color');
+        const srcMode = this._getAttr('srcMode') || 'auto';
+        const debug = this._getAttr('debug', 'boolean');
+        const viewportWidth = this._getAttr('viewportWidth', 'number');
+        const viewportUnit = this._getAttr('viewportUnit');
+        // class
+        let extraClass = ['tw-img-div'];
+        if (_class) extraClass.push(_class);
+        if (setting.useButtonEffect && this._getAttr('onClick')) extraClass.push('click-effect');
+        // 分组样式
+        const calcOpt = { usePx, viewportWidth, viewportUnit };
+        let layoutStyle = '';
+        // 宽度
+        if (hasValue(width)) {
+            const widthStyle = `width: ${calc(width, calcOpt)};`;
+            layoutStyle += widthStyle;
+        }
+        if (hasValue(height)) {
+            const heightStyle = `height: ${calc(height, calcOpt)};`;
+            layoutStyle += heightStyle;
+        }
+        if (absolute) {
+            layoutStyle += 'position: absolute;';
+            if (hasValue(left)) layoutStyle += `left: ${calc(left, calcOpt)};`;
+            if (hasValue(top)) layoutStyle += `top: ${calc(top, calcOpt)};`;
+            if (hasValue(right)) layoutStyle += `right: ${calc(right, calcOpt)};`;
+            if (hasValue(bottom)) layoutStyle += `bottom: ${calc(bottom, calcOpt)};`;
+        } else {
+            layoutStyle += 'position: relative;';
+            if (hasValue(top)) layoutStyle += `margin-top: ${calc(top, calcOpt)};`;
+            if (hasValue(left)) layoutStyle += `margin-left: ${calc(left, calcOpt)};`;
+            if (hasValue(right)) layoutStyle += `margin-right: ${calc(right, calcOpt)};`;
+            if (hasValue(bottom)) layoutStyle += `margin-bottom: ${calc(bottom, calcOpt)};`;
+        }
+        if (hasValue(zIndex)) layoutStyle += `z-index: ${zIndex};`;
+        if (pointer === true) {
+            layoutStyle += 'cursor: pointer;';
+        } else if (this._getAttr('onClick') && pointer === false) {
+            layoutStyle += 'cursor: pointer;';
+        }
+        if (flex) {
+            layoutStyle += 'display:flex;';
+            if (column) layoutStyle += 'flex-direction: column;';
+            if (center) {
+                layoutStyle += 'justify-content: center;';
+                layoutStyle += 'align-items: center;';
+            }
+        } else {
+            if (center) layoutStyle += 'text-align: center;';
+        }
+
+        if (text) layoutStyle += `font-size: ${calc(text, calcOpt)};`;
+        if (src) {
+            let realSrc = src;
+            if (src.indexOf('https://') === -1) {
+                realSrc = `https://dynamics-share.tuwan.com/${src}?x-oss-process=image/format,webp/ignore-error,1`;
+            }
+            layoutStyle += `background-image: url(${realSrc});`;
+
+
+            if (srcMode === 'fill') {
+                layoutStyle += 'background-size: 100% 100%;';
+            } else if (srcMode === 'cover') {
+                layoutStyle += 'background-size: cover;';
+            }
+        }
+        if (color) layoutStyle += `color: ${color};`;
+        if (styleAttr) layoutStyle += styleAttr;
+        if (debug) {
+            console.log('layoutStyle', layoutStyle);
+        }
+        const currentList = Array.from(this.classList);
+        const classNeeded = extraClass.filter(item => !currentList.includes(item));
+        this.classList.add(...classNeeded);
+        this.style.cssText = layoutStyle;
+        this._iscalcstyle = false;
+    }
+
+    _onClickHandler(e) {
+        // 支持onClick属性（字符串，window作用域下查找）
+        const onClickAttr = this._getAttr('onClick');
+        if (onClickAttr && typeof window[onClickAttr] === 'function') {
+            window[onClickAttr](e);
+        }
+    }
+}
+
+
+let isRegister = false;
+export function registerTdiv() {
+    if (!isRegister) {
+        customElements.define('t-div', Tdiv);
+        // append style for t-div
+        const style = document.createElement('style');
+        style.textContent = styleText;
+        document.head.appendChild(style);
+        isRegister = true;
+    }
+}

package/Tdiv/index.svelte

@@ -98,11 +98,12 @@
      */
     export let color = "";
     /**
-     * @type {'auto'|'fill'|'cover'}
+     * @type {'auto'|'fill'|'cover'|'contain'}
      * src传入时有效, 图片的填充模式: 默认auto
      * - fill: 长款拉伸填充
      * - auto: 自动填充(按照宽高比自动填充， 不重复不裁剪)
      * - cover: 覆盖
+     * - contain: 包含
      */
     export let srcMode = "auto";
 
@@ -234,7 +235,9 @@
         }
         if (src) {
             let realSrc = src;
-            if (src.indexOf("https://") === -1) {
+            if(src.indexOf("data:") === 0){
+                realSrc = src;
+            }else if (src.indexOf("https://") === -1) {
                 realSrc = `https://dynamics-share.tuwan.com/${src}?x-oss-process=image/format,webp/ignore-error,1`;
             }
             ret += `background-image: url(${realSrc});`;
@@ -242,6 +245,8 @@
                 ret += `background-size: 100% 100%;`;
             } else if (srcMode === "cover") {
                 ret += `background-size: cover;`;
+            }else if (srcMode === "contain") {
+                ret += `background-size: contain;`;
             }
         }
         if (color) {
@@ -260,7 +265,7 @@
 <div
     role="presentation"
     on:click={handleOnClick}
-    class="tw-img-div {_class}"
+    class="tw-img-div {_class} {setting.useButtonEffect && onClick ? 'click-effect' : ''}"
     style={styleStr}
 >
     <slot />
@@ -273,4 +278,10 @@
         background-size: 100% auto;
         flex: none;
     }
+    .click-effect {
+        &:active {
+            opacity: 0.85;
+            transform: translateY(1px);
+        }
+    }
 </style>

package/Tdiv/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div role="presentation" :class="['tw-img-div', _class]" :style="styleStr" @click="handleOnClick">
+  <div role="presentation" :class="['tw-img-div', _class, setting.useButtonEffect && onClick ? 'click-effect' : '']" :style="styleStr" @click="handleOnClick">
     <slot />
   </div>
 </template>
@@ -34,6 +34,11 @@ export default {
     viewportWidth: { type: Number, default: null },
     viewportUnit: { type: String, default: null },
   },
+  data() {
+    return {
+      setting,
+    };
+  },
   computed: {
     styleStr() {
       let vWidth = setting.viewportWidth;
@@ -45,7 +50,7 @@ export default {
         vUnit = this.viewportUnit;
       }
       let localUsePx = setting.usePx;
-      if(typeof this.usePx === 'boolean'){
+      if (typeof this.usePx === 'boolean') {
         localUsePx = this.usePx;
       }
       const calc = (value) => {
@@ -128,4 +133,11 @@ export default {
   background-size: 100% auto;
   flex: none;
 }
+
+.click-effect {
+  &:active {
+    opacity: 0.85;
+    transform: translateY(1px);
+  }
+}
 </style>

package/Tdiv/setting.js

@@ -1,7 +1,20 @@
 const config = {
+    /**
+     * 设置视口宽度
+     */
     viewportWidth: 750,
+    /**
+     * 设置视口单位
+     */
     viewportUnit: "vw",
+    /**
+     * 设置是否使用px
+     */
     usePx: false,
+    /**
+     * 设置是否使用按钮效果(指按钮的点击效果)
+     */
+    useButtonEffect: false,
 }
 
 /**
@@ -28,4 +41,20 @@ export function setUsePx(use) {
     config.usePx = use;
 }
 
+/**
+ * 设置是否使用按钮效果(指按钮的点击效果)
+ * @param {boolean} use 
+ */
+export function setUseButtonEffect(use) {
+    config.useButtonEffect = use;
+}
+
+/**
+ * 更新配置
+ * @param {Partial<typeof config>} newConfig 
+ */
+export function updateConfig(newConfig) {
+    Object.assign(config, newConfig);
+}
+
 export default config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taole/dev-helper",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"