@mixd-id/web-scaffold 0.2.240706 → 0.2.250801010

package/src/components/PresetSelectorFilterItem.vue

@@ -1,113 +1,114 @@
 <template>
-  <div class="flex flex-row">
-    <div class="flex-1 flex flex-col">
-
-      <div v-if="type === 'date'" class="flex-1 flex flex-row gap-2">
-        <div class="flex-1 flex flex-row gap-2">
-          <Dropdown v-model="value.operator"
-                    :readonly="readonly"
-                    :class="![ 'yesterday', 'today', 'thisWeek', 'thisMonth', 'lastMonth', 'thisYear' ].includes(value.operator) ? 'w-[100px]' : 'w-full'"
-                    @change="apply">
-            <option value="=">=</option>
-            <option value=">">&gt;</option>
-            <option value=">=">&gt;=</option>
-            <option value="<">&lt;</option>
-            <option value="<=">&lt;=</option>
-            <option value="between">Between</option>
-            <option value="yesterday">Yesterday</option>
-            <option value="today">Today</option>
-            <option value="thisWeek">This Week</option>
-            <option value="thisMonth">This Month</option>
-            <option value="lastMonth">Last Month</option>
-            <option value="thisYear">This Year</option>
-          </Dropdown>
-          <div v-if="![ 'yesterday', 'today', 'thisWeek', 'thisMonth', 'lastMonth', 'thisYear' ].includes(value.operator)"
-               class="flex-1 flex flex-row gap-2">
-            <Datepicker class="flex-1"
-                        mode="popup"
-                        :readonly="readonly"
-                        v-model="value.value"
-                        @change="apply" />
-            <Datepicker v-if="value.operator === 'between'"
-                        class="flex-1"
-                        :readonly="readonly"
-                        mode="popup"
-                        v-model="value.value2"
-                        @change="apply" />
-          </div>
-        </div>
-      </div>
-
-      <div v-else-if="type === 'number'" class="flex flex-row gap-2">
+  <div class="flex flex-col">
+    <div v-if="type === 'date'" class="flex-1 flex flex-row gap-2">
+      <div class="flex-1 flex flex-row gap-2">
         <Dropdown v-model="value.operator"
-                  class="w-[100px]"
                   :readonly="readonly"
+                  :class="![ 'yesterday', 'today', 'thisWeek', 'thisMonth', 'lastMonth', 'thisYear', 'null' ].includes(value.operator) ? 'w-[100px]' : 'w-full'"
                   @change="apply">
           <option value="=">=</option>
           <option value=">">&gt;</option>
           <option value=">=">&gt;=</option>
           <option value="<">&lt;</option>
           <option value="<=">&lt;=</option>
-          <option value="in">Multiple with comma</option>
-          <option value="notIn">Except with comma</option>
+          <option value="between">Between</option>
+          <option value="yesterday">Yesterday</option>
+          <option value="today">Today</option>
+          <option value="thisWeek">This Week</option>
+          <option value="thisMonth">This Month</option>
+          <option value="lastMonth">Last Month</option>
+          <option value="thisYear">This Year</option>
+          <option value="null">No Value</option>
         </Dropdown>
-        <Textbox v-model="value.value"
-                 class="flex-1"
-                 :readonly="readonly"
-                 @keyup.enter="apply"
-                 @blur="apply" />
+        <div v-if="![ 'yesterday', 'today', 'thisWeek', 'thisMonth', 'lastMonth', 'thisYear', 'null' ].includes(value.operator)"
+             class="flex-1 flex flex-row gap-2">
+          <Datepicker class="flex-1"
+                      mode="popup"
+                      :readonly="readonly"
+                      v-model="value.value"
+                      @change="apply" />
+          <Datepicker v-if="value.operator === 'between'"
+                      class="flex-1"
+                      :readonly="readonly"
+                      mode="popup"
+                      v-model="value.value2"
+                      @change="apply" />
+        </div>
       </div>
+    </div>
 
-      <div v-else-if="type === 'boolean'" class="flex flex-row gap-2">
-        <Radio :name="value.key"
-               :readonly="readonly" :value="true" v-model="value.value" @change="apply">True</Radio>
-        <Radio :name="value.key"
-               :readonly="readonly" :value="false" v-model="value.value" @change="apply">False</Radio>
-      </div>
+    <div v-else-if="type === 'number'" class="flex flex-row gap-2">
+      <Dropdown v-model="value.operator"
+                class="w-[100px]"
+                :readonly="readonly"
+                @change="apply">
+        <option value="=">=</option>
+        <option value=">">&gt;</option>
+        <option value=">=">&gt;=</option>
+        <option value="<">&lt;</option>
+        <option value="<=">&lt;=</option>
+        <option value="in">Multiple with comma</option>
+        <option value="notIn">Except with comma</option>
+      </Dropdown>
+      <Textbox v-model="value.value"
+               class="flex-1"
+               :readonly="readonly"
+               @keyup.enter="apply"
+               @blur="apply" />
+    </div>
 
-      <div v-else-if="type === 'enum' && Array.isArray(cTypeParams) && cTypeParams.length > 0"
-           class="flex flex-col gap-1">
+    <div v-else-if="type === 'boolean'" class="flex flex-row gap-2">
+      <Radio :name="value.key"
+             :readonly="readonly" :value="true" v-model="value.value" @change="apply">True</Radio>
+      <Radio :name="value.key"
+             :readonly="readonly" :value="false" v-model="value.value" @change="apply">False</Radio>
+    </div>
 
-        <Checkbox v-for="param in cTypeParams"
-                  v-model="cValue.value"
-                  class="flex-1"
-                  :readonly="readonly"
-                  :value="param.value"
-                  @change="apply">
-          {{ param.text }}
-        </Checkbox>
+    <div v-else-if="type === 'enum' && Array.isArray(cTypeParams) && cTypeParams.length > 0"
+         class="flex flex-col gap-1">
 
-      </div>
+      <Checkbox v-for="param in cTypeParams"
+                v-model="cValue.value"
+                class="flex-1"
+                :readonly="readonly"
+                :value="param.value"
+                @change="apply">
+        {{ param.text }}
+      </Checkbox>
 
-      <div v-else-if="type === 'component'">
-        <component :is="column.component"
-                   :value="value"
-                   :readonly="readonly"
-                   @change="apply" />
-      </div>
+    </div>
 
-      <div v-else class="flex flex-row gap-2">
-        <Dropdown v-model="value.operator" class="w-[100px]"
-                  :readonly="readonly"
-                  @change="apply">
-          <option value="eq">Equal</option>
-          <option value="not">Not Equal</option>
-          <option value="startsWith">Starts With</option>
-          <option value="endsWith">Ends With</option>
-          <option value="contains">Contains</option>
-          <option value="notContains">Not Contains</option>
-          <option value="in">Multiple with comma</option>
-          <option value="notIn">Except with comma</option>
-          <option value="regex">Regex</option>
-        </Dropdown>
-        <Textbox v-model="value.value"
+    <div v-else-if="type === 'component'">
+      <component :is="column.component"
+                 :value="value"
                  :readonly="readonly"
-                 class="flex-1"
-                 @keyup.enter="apply"
-                 @blur="apply" />
-      </div>
+                 @change="apply" />
+    </div>
 
+    <div v-else class="flex flex-row gap-2">
+      <Dropdown v-model="value.operator"
+                :class="![ 'notEmpty' ].includes(value.operator) ? 'w-[100px]' : 'w-full'"
+                :readonly="readonly"
+                @change="apply">
+        <option value="eq">Equal</option>
+        <option value="not">Not Equal</option>
+        <option value="startsWith">Starts With</option>
+        <option value="endsWith">Ends With</option>
+        <option value="contains">Contains</option>
+        <option value="notContains">Not Contains</option>
+        <option value="in">Multiple with comma</option>
+        <option value="notIn">Except with comma</option>
+        <option value="regex">Regex</option>
+        <option value="notEmpty">Not Empty</option>
+      </Dropdown>
+      <Textbox v-if="![ 'notEmpty' ].includes(value.operator)"
+               v-model="value.value"
+               :readonly="readonly"
+               class="flex-1"
+               @keyup.enter="apply"
+               @blur="apply" />
     </div>
+
   </div>
 
 </template>
@@ -125,6 +126,8 @@ export default{
       default: {}
     },
 
+    enabled: Boolean,
+
     type: String,
 
     typeParams: Array,
@@ -167,13 +170,22 @@ export default{
   methods: {
 
     apply(){
+      if(this.enabled === false) return
 
-      if((!this.valueRequired && this.value.operator) ||
-          (this.value.operator && this.value.operator !== 'between' && this.value.value) ||
-          (this.value.operator === 'between' && !!this.value.value && !!this.value.value2)){
-        this.$emit('change')
-      }
+      switch(this.type){
+
+        case 'bool':
+        case 'boolean':
+          this.$emit('change')
+          break
 
+        default:
+          if((!this.valueRequired && this.value.operator) ||
+              (this.value.operator && this.value.operator !== 'between' && this.value.value) ||
+              (this.value.operator === 'between' && !!this.value.value && !!this.value.value2)){
+            this.$emit('change')
+          }
+      }
     }
 
   }

package/src/components/Radio.vue

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

package/src/components/SearchModal.vue

@@ -0,0 +1,153 @@
+<template>
+  <Modal ref="modal"
+         :hash="hash"
+         width="600"
+         position="top"
+         :dismissable="true"
+         class="bg-transparent border-none md:top-[10px]"
+         @dismiss="$refs.modal.close()"
+         @show="$refs.searchText.select();">
+    <template v-slot:head>
+      <div class="relative p-5 bg-base-300">
+
+        <Textbox ref="searchText"
+                 v-model="search"
+                 :clearable="true"
+                 @clear="search = ''"
+                 @keyup="dummify"
+                 :placeholder="placeholder">
+          <template #start>
+            <svg width="14" height="14" class="fill-text ml-3" 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="M504.1 471l-134-134C399.1 301.5 415.1 256.8 415.1 208c0-114.9-93.13-208-208-208S-.0002 93.13-.0002 208S93.12 416 207.1 416c48.79 0 93.55-16.91 129-45.04l134 134C475.7 509.7 481.9 512 488 512s12.28-2.344 16.97-7.031C514.3 495.6 514.3 480.4 504.1 471zM48 208c0-88.22 71.78-160 160-160s160 71.78 160 160s-71.78 160-160 160S48 296.2 48 208z"/></svg>
+          </template>
+        </Textbox>
+
+      </div>
+    </template>
+
+    <template #default>
+      <div class="flex-1 flex flex-col min-h-[60vh]">
+
+        <Transition name="slidedown">
+          <div v-if="searchHistories.length > 0" class="bg-base-300 divide-y divide-border-50">
+            <div v-for="history in searchHistories" class="p-5 py-3 flex flex-row gap-3">
+              <router-link :to="history.target" class="flex-1">
+                {{ history.name }}
+              </router-link>
+              <button type="button" class="text-primary">Remove</button>
+            </div>
+          </div>
+        </Transition>
+
+        <Transition name="slidedown">
+          <div v-if="recommendations.length > 0" class="bg-base-300 py-6">
+
+            <div class="px-5">
+              <label>Recommended Products</label>
+            </div>
+
+            <div class="p-2">
+              <div class="overflow-x-auto flex flex-row gap-2 flex-nowrap">
+                <router-link v-for="item in recommendations"
+                             :to="item.target"
+                             class="shrink-0 w-[30vw] md:w-[16vw]">
+                  <Image :src="item.imageUrl" />
+                  <div class="p-3">
+                    <label>{{ item.name }}</label>
+                  </div>
+                </router-link>
+              </div>
+            </div>
+
+          </div>
+        </Transition>
+
+        <div class="flex-1" @click="$refs.modal.close()"></div>
+
+      </div>
+    </template>
+
+  </Modal>
+</template>
+
+<script>
+
+export default {
+
+  props: {
+
+    apiUrl: String,
+
+    hash: {
+      type: String,
+      default: '#search'
+    },
+
+    height: {
+      type: String,
+      default: '16px'
+    },
+
+    placeholder: {
+      type: String,
+      default: 'Search...'
+    },
+
+    width: {
+      type: String,
+      default: '16px'
+    }
+  },
+
+  methods: {
+
+    open(){
+      this.$refs.modal.open()
+    }
+
+  },
+
+  data(){
+    return {
+      searchHistories: [],
+      recommendations: [],
+      search: ''
+    }
+  },
+
+  watch: {
+
+    search(){
+      if(this.search.length > 0){
+        this.searchHistories = [
+          { id: 1, name: 'Search History 1', target:{ path:'search', query:{ k:'Search History 1' }} },
+          { id: 1, name: 'Search History 2', target:{ path:'search', query:{ k:'Search History 2' }} },
+          { id: 1, name: 'Search History 3', target:{ path:'search', query:{ k:'Search History 3' }} },
+        ]
+      }
+      else{
+        this.searchHistories = []
+      }
+
+      this.recommendations = [
+        { name:'Speaker', imageUrl:'https://assets.devialet.com/fr-fr/media/dvl_media/Phantom_01_2x.png?twic=v1/background=transparent/cover=600x780', target:{ path:'/product-1' } },
+        { name:'Portable Speaker', imageUrl:'https://assets.devialet.com/fr-fr/media/dvl_media/Mania_02_2x.jpg?twic=v1/background=transparent/cover=600x780', target:{ path:'/product-1' } },
+        { name:'Soundbar', imageUrl:'https://assets.devialet.com/fr-fr/media/dvl_media/Gemini_03_2x.png?twic=v1/background=transparent/cover=600x780', target:{ path:'/product-1' } },
+        { name:'Speaker', imageUrl:'https://assets.devialet.com/fr-fr/media/dvl_media/Phantom_01_2x.png?twic=v1/background=transparent/cover=600x780', target:{ path:'/product-1' } },
+        { name:'Portable Speaker', imageUrl:'https://assets.devialet.com/fr-fr/media/dvl_media/Mania_02_2x.jpg?twic=v1/background=transparent/cover=600x780', target:{ path:'/product-1' } },
+        { name:'Soundbar', imageUrl:'https://assets.devialet.com/fr-fr/media/dvl_media/Gemini_03_2x.png?twic=v1/background=transparent/cover=600x780', target:{ path:'/product-1' } },
+      ]
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/components/Slider.vue

@@ -299,7 +299,7 @@ export default{
 
   .slider>div:nth-child(1)>div:nth-child(2),
   .slider>div:nth-child(1)>div:nth-child(3){
-    @apply absolute w-[2.5rem] h-[2.5rem] rounded-full bg-white shadow-sm border-[1px] border-text-200;
+    @apply absolute w-[2.5rem] h-[2.5rem] rounded-full bg-white shadow-sm border-[1px] border-border-200;
     @apply flex;
     top: 50%;
     transform: translate3d(0, -50%, 0);

package/src/components/Svg.vue

@@ -1,5 +1,5 @@
 <template>
-	<span v-html="html"></span>
+	<svg xmlns="http://www.w3.org/2000/svg" :viewBox="viewBox" :width="svgWidth" :height="svgHeight" v-html="html" />
 </template>
 
 <script>

package/src/components/SvgEditor.vue

@@ -0,0 +1,173 @@
+<template>
+	<div :class="$style.comp">
+
+    <div>
+      <small class="text-text-400">SVG Text</small>
+      <code ref="code"
+            contenteditable="true"
+            spellcheck="false"
+            @paste="onPaste"
+            @blur="textChanged">
+        {{ modelValue }}
+      </code>
+    </div>
+
+    <div class="flex flex-row gap-3">
+      <div>
+        <small class="text-text-400">Width</small>
+        <Textbox ref="widthText"
+                 class="w-[100px]"
+                 maxlength="6"
+                 v-model="attrs.width"
+                 @change="sizeChanged"
+                 @keyup.enter="sizeChanged">
+          <template #end>
+            <button type="button" class="pr-3" @click="$refs.sizeMenu.open($refs.widthText, { key:'width' })">
+              <svg width="11" height="11" class="fill-text-300 hover:fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
+            </button>
+          </template>
+        </Textbox>
+      </div>
+
+      <div>
+        <small class="text-text-400">Height</small>
+        <Textbox ref="heightText"
+                 class="w-[100px]"
+                 maxlength="6"
+                 v-model="attrs.height"
+                 @change="sizeChanged"
+                 @keyup.enter="sizeChanged">
+          <template #end>
+            <button type="button" class="pr-3" @click="$refs.sizeMenu.open($refs.heightText, { key:'height' })">
+              <svg width="11" height="11" class="fill-text-300 hover:fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
+            </button>
+          </template>
+        </Textbox>
+      </div>
+
+      <div>
+        <small class="text-text-400">Fill</small>
+        <Textbox ref="fillText"
+                 class="w-[100px]"
+                 maxlength="6"
+                 v-model="attrs.fill"
+                 @change="sizeChanged"
+                 @keyup.enter="sizeChanged">
+          <template #end>
+            <button type="button" class="pr-3" @click="$refs.sizeMenu.open($refs.fillText, { key:'fill' })">
+              <svg width="11" height="11" class="fill-text-300 hover:fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
+            </button>
+          </template>
+        </Textbox>
+      </div>
+    </div>
+
+    <ContextMenu ref="sizeMenu" position="bottom-right">
+      <template #default="{ context }">
+        <div class="flex flex-col divide-y divide-border-50">
+          <button v-for="value in defaultValues[context?.key]"
+                  type="button"
+                  class="menu-item p-3"
+                  @click="attrs[context.key] = value; sizeChanged()">
+            {{ value }}
+          </button>
+        </div>
+      </template>
+    </ContextMenu>
+	</div>
+</template>
+
+<script setup>
+
+import {ref, useTemplateRef} from "vue";
+
+const attrs = ref({
+  width: '',
+  height: '',
+  fill: ''
+})
+
+const size = [
+  '11px',
+  '12px',
+  '13px',
+  '14px',
+  '16px',
+  '18px',
+  '21px',
+  '24px',
+]
+
+const defaultValues = ref({
+  height: size,
+  width: size,
+  fill: [
+    '#000',
+    '#fff'
+  ]
+})
+
+const { modelValue } = defineProps({
+  modelValue: String
+})
+
+const emit = defineEmits(['update:modelValue'])
+const code = useTemplateRef('code')
+
+
+function onPaste(e) {
+  e.preventDefault()
+  let text = (e.clipboardData || window.clipboardData).getData("text");
+
+  for(let key in attrs.value){
+    const match = text.match(new RegExp(`${key}="([^"]*)"`))
+    if(match && match[1]){
+      attrs.value[key] = match[1]
+    }
+  }
+
+  emit('update:modelValue', text)
+}
+
+function textChanged(){
+  emit('update:modelValue', code.value.innerText)
+}
+
+function sizeChanged(){
+  let curValue = modelValue ?? ''
+
+  let text = []
+  for(let key in attrs.value){
+    if(attrs.value[key] && attrs.value[key].length > 0){
+      text.push(`${key}="${attrs.value[key]}"`)
+
+      curValue = curValue.replace(new RegExp(`${key}="[^"]*"`, 'g'), '')
+    }
+  }
+  text = text.length > 0 ? ' ' + text.join(' ') : ''
+
+  curValue = curValue.replace(/<svg /, `<svg${text} `)
+
+  emit('update:modelValue', curValue)
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex flex-col gap-3;
+}
+
+.comp code{
+  @apply border-[1px] border-border-200 bg-base-300 rounded-lg flex flex-col overflow-hidden;
+	@apply p-6;
+	white-space: pre-wrap;
+	tab-size: 1rem;
+}
+
+.comp [contenteditable]{
+	outline: 0px solid transparent;
+}
+
+</style>

package/src/components/Switch.vue

@@ -8,7 +8,7 @@
 
 <script>
 
-import { parseBoolean, uid } from "../utils/helpers.mjs"
+import {parseBoolean, uid} from "../utils/helpers.mjs"
 
 export default{
 
@@ -63,7 +63,6 @@ export default{
 <style module>
 
 .switch{
-	@apply h-[var(--h-cp)];
 	@apply text-left flex items-center;
 }
 
@@ -76,12 +75,12 @@ export default{
 }
 
 .switch label{
-	@apply w-[3rem] inline-block rounded-2xl bg-base-50 h-[2rem];
-	@apply border-[1px] border-text-200 hover:border-text-300;
+	@apply w-[3rem] inline-block rounded-2xl bg-base-300 h-[2rem];
+	@apply border-[1px] border-border-200 hover:border-border-300;
 }
 
 .switch label>span{
-	@apply mt-[.2rem] mx-1 w-[1.4rem] h-[1.4rem] inline-block align-middle rounded-full bg-text-200;
+	@apply mt-[.2rem] mx-1 w-[1.4rem] h-[1.4rem] inline-block align-middle rounded-full bg-text-300;
 	transition: margin 200ms ease;
 }
 

package/src/components/Table.vue

@@ -41,7 +41,7 @@ export default{
 }
 
 .comp table{
-	@apply border-[1px] border-text-200 border-collapse;
+	@apply border-[1px] border-border-200 border-collapse;
 	table-layout: fixed;
 }
 
@@ -50,7 +50,7 @@ export default{
 }
 
 .comp th, .comp td{
-	@apply border-[1px] border-text-200 p-3;
+	@apply border-[1px] border-border-200 p-3;
 }
 
 </style>

package/src/components/TableView.vue

@@ -35,7 +35,6 @@
 
 import TableViewHead from "./TableViewHead.vue";
 import dayjs from "dayjs";
-import { h } from "vue";
 
 const DEFAULT_COLUMN_WIDTH = 125
 
@@ -171,7 +170,7 @@ export default{
 }
 
 .comp tbody td{
-	@apply relative border-b-[1px] border-text-50;
+	@apply relative border-b-[1px] border-border-50;
 }
 
 .comp td,
@@ -198,4 +197,4 @@ export default{
 	@apply bg-text-50
 }
 
-</style>
+</style>